diff --git a/.scannerwork/.sonar_lock b/.scannerwork/.sonar_lock
new file mode 100644
index 00000000..e69de29b
diff --git a/.scannerwork/report-task.txt b/.scannerwork/report-task.txt
new file mode 100644
index 00000000..363424f2
--- /dev/null
+++ b/.scannerwork/report-task.txt
@@ -0,0 +1,6 @@
+projectKey=vexplor
+serverUrl=http://localhost:9000
+serverVersion=26.3.0.120487
+dashboardUrl=http://localhost:9000/dashboard?id=vexplor
+ceTaskId=f2c72369-4d50-4483-bf76-b03788385757
+ceTaskUrl=http://localhost:9000/api/ce/task?id=f2c72369-4d50-4483-bf76-b03788385757
diff --git a/backend-node/package-lock.json b/backend-node/package-lock.json
index 8fba4591..c68b1172 100644
--- a/backend-node/package-lock.json
+++ b/backend-node/package-lock.json
@@ -39,7 +39,6 @@
         "nodemailer": "^6.10.1",
         "oracledb": "^6.9.0",
         "pg": "^8.16.3",
-        "playwright": "^1.58.2",
         "quill": "^2.0.3",
         "react-quill": "^2.0.0",
         "redis": "^4.6.10",
@@ -9920,50 +9919,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/playwright": {
-      "version": "1.58.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
-      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "playwright-core": "1.58.2"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
-    },
-    "node_modules/playwright-core": {
-      "version": "1.58.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
-      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
-      "license": "Apache-2.0",
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/playwright/node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/postgres-array": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
diff --git a/backend-node/package.json b/backend-node/package.json
index 8154371b..e827da0c 100644
--- a/backend-node/package.json
+++ b/backend-node/package.json
@@ -53,7 +53,6 @@
     "nodemailer": "^6.10.1",
     "oracledb": "^6.9.0",
     "pg": "^8.16.3",
-    "playwright": "^1.58.2",
     "quill": "^2.0.3",
     "react-quill": "^2.0.0",
     "redis": "^4.6.10",
diff --git a/backend-node/src/app.ts b/backend-node/src/app.ts
index 33d072d4..c2d9a21f 100644
--- a/backend-node/src/app.ts
+++ b/backend-node/src/app.ts
@@ -394,6 +394,18 @@ app.use("/api/messenger", messengerRoutes); // 메신저
 // app.use('/api/users', userRoutes);
 // app.use('/api/menus', menuRoutes);
 
+// /api prefix 없이 들어온 요청을 /api로 리라우팅 (배포 환경 호환)
+app.use("/auth", authRoutes);
+app.use("/admin", adminRoutes);
+app.use("/admin/web-types", webTypeStandardRoutes);
+app.use("/admin/button-actions", buttonActionStandardRoutes);
+app.use("/admin/template-standards", templateStandardRoutes);
+app.use("/admin/component-standards", componentStandardRoutes);
+app.use("/admin/reports", reportRoutes);
+app.use("/admin/barcode-labels", barcodeLabelRoutes);
+app.use("/messenger", messengerRoutes);
+app.use("/screen-management", screenManagementRoutes);
+
 // 404 핸들러
 app.use("*", (req, res) => {
   res.status(404).json({
@@ -450,6 +462,7 @@ async function initializeServices() {
       runUserMailAccountsMigration,
       runMessengerMigration,
       runSmartFactoryLogMigration,
+      runSmartFactoryScheduleMigration,
     } = await import("./database/runMigration");
 
     await runDashboardMigration();
@@ -459,6 +472,7 @@ async function initializeServices() {
     await runUserMailAccountsMigration();
     await runMessengerMigration();
     await runSmartFactoryLogMigration();
+    await runSmartFactoryScheduleMigration();
   } catch (error) {
     logger.error(`❌ 마이그레이션 실패:`, error);
   }
@@ -472,6 +486,11 @@ async function initializeServices() {
     const { CrawlService } = await import("./services/crawlService");
     await CrawlService.initializeScheduler();
     logger.info(`🕷️ 크롤링 스케줄러가 시작되었습니다.`);
+
+    // 스마트공장 로그 스케줄러 초기화
+    const { initSmartFactoryScheduler } = await import("./utils/smartFactoryLog");
+    await initSmartFactoryScheduler();
+    logger.info(`🏭 스마트공장 로그 스케줄러가 시작되었습니다.`);
   } catch (error) {
     logger.error(`❌ 배치 스케줄러 초기화 실패:`, error);
   }
diff --git a/backend-node/src/controllers/adminController.ts b/backend-node/src/controllers/adminController.ts
index 2b04b8e7..97dcab9d 100644
--- a/backend-node/src/controllers/adminController.ts
+++ b/backend-node/src/controllers/adminController.ts
@@ -4108,6 +4108,7 @@ interface UserWithDeptRequest {
     dept_name?: string;
     position_code?: string;
     position_name?: string;
+    end_date?: string | null;
   };
   mainDept?: {
     dept_code: string;
@@ -4199,6 +4200,7 @@ export const saveUserWithDept = async (
         dept_name: deptName,
         position_code: userInfo.position_code,
         position_name: positionName,
+        end_date: userInfo.end_date !== undefined ? (userInfo.end_date ? `${userInfo.end_date.substring(0, 10)}T00:00:00+09:00` : null) : undefined,
         company_code: companyCode !== "*" ? companyCode : undefined,
       };
 
@@ -4230,8 +4232,8 @@ export const saveUserWithDept = async (
           email, tel, cell_phone, sabun,
           user_type, user_type_name, status, locale,
           dept_code, dept_name, position_code, position_name,
-          company_code, regdate
-        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, NOW())`,
+          company_code, end_date, regdate
+        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, NOW())`,
         [
           userInfo.user_id,
           userInfo.user_name,
@@ -4250,6 +4252,7 @@ export const saveUserWithDept = async (
           userInfo.position_code || null,
           positionName,
           companyCode !== "*" ? companyCode : null,
+          userInfo.end_date ? `${userInfo.end_date.substring(0, 10)}T00:00:00+09:00` : null,
         ]
       );
     }
diff --git a/backend-node/src/controllers/analyticsReportController.ts b/backend-node/src/controllers/analyticsReportController.ts
index 33109dc2..c893226c 100644
--- a/backend-node/src/controllers/analyticsReportController.ts
+++ b/backend-node/src/controllers/analyticsReportController.ts
@@ -256,11 +256,11 @@ export async function getPurchaseReportData(req: any, res: Response): Promise<vo
           COALESCE(po.manager, '미지정') as manager,
           COALESCE(po.status, '') as status,
           CAST(COALESCE(NULLIF(pd.order_qty, ''), '0') AS numeric) as "orderQty",
-          CAST(COALESCE(NULLIF(po.received_qty, ''), '0') AS numeric) as "receiveQty",
+          CAST(COALESCE(NULLIF(pd.received_qty, ''), NULLIF(po.received_qty, ''), '0') AS numeric) as "receiveQty",
           CAST(COALESCE(NULLIF(pd.unit_price, ''), '0') AS numeric) as "unitPrice",
           CAST(COALESCE(NULLIF(pd.order_qty, ''), '0') AS numeric)
             * CAST(COALESCE(NULLIF(pd.unit_price, ''), '0') AS numeric) as "orderAmt",
-          CAST(COALESCE(NULLIF(po.received_qty, ''), '0') AS numeric)
+          CAST(COALESCE(NULLIF(pd.received_qty, ''), NULLIF(po.received_qty, ''), '0') AS numeric)
             * CAST(COALESCE(NULLIF(pd.unit_price, ''), '0') AS numeric) as "receiveAmt",
           1 as "orderCnt",
           pd.company_code
diff --git a/backend-node/src/controllers/authController.ts b/backend-node/src/controllers/authController.ts
index 4dcdc275..b526bc0f 100644
--- a/backend-node/src/controllers/authController.ts
+++ b/backend-node/src/controllers/authController.ts
@@ -7,6 +7,7 @@ import { JwtUtils } from "../utils/jwtUtils";
 import { LoginRequest, UserInfo, ApiResponse, PersonBean } from "../types/auth";
 import { logger } from "../utils/logger";
 import { sendSmartFactoryLog } from "../utils/smartFactoryLog";
+import { query, queryOne } from "../database/db";
 
 export class AuthController {
   /**
@@ -105,6 +106,14 @@ export class AuthController {
             popLandingPath = "/pop";
           }
           logger.debug(`POP 랜딩 경로: ${popLandingPath}`);
+
+          // POP 메뉴가 존재하면 해당 회사의 POP 레이아웃 자동 초기화 (비동기)
+          if (popLandingPath) {
+            const companyCode = loginResult.userInfo.companyCode || "ILSHIN";
+            AuthController.initPopLayoutsForCompany(companyCode).catch((err) => {
+              logger.warn("POP 레이아웃 자동 초기화 중 오류 (무시):", err);
+            });
+          }
         } catch (popError) {
           logger.warn("POP 메뉴 조회 중 오류 (무시):", popError);
         }
@@ -563,4 +572,78 @@ export class AuthController {
       });
     }
   }
+
+  /**
+   * POP 레이아웃 자동 초기화
+   * 해당 회사의 screen_layouts_pop 레코드가 없으면
+   * 템플릿(공통 '*' 또는 COMPANY_7)에서 복제하여 생성
+   *
+   * 기본 POP 화면 ID: 5, 6, 7, 8, 6526, 6527, 6528, 6529
+   */
+  static async initPopLayoutsForCompany(companyCode: string): Promise<void> {
+    // SUPER_ADMIN이나 공통(*)은 초기화 불필요
+    if (companyCode === "*" || companyCode === "COMPANY_7") return;
+
+    const POP_SCREEN_IDS = [5, 6, 7, 8, 6526, 6527, 6528, 6529];
+
+    // 이미 해당 회사의 POP 레이아웃이 하나라도 있으면 스킵 (중복 초기화 방지)
+    const existing = await query<{ cnt: string }>(
+      `SELECT COUNT(*)::text AS cnt FROM screen_layouts_pop
+       WHERE company_code = $1 AND screen_id = ANY($2::int[])`,
+      [companyCode, POP_SCREEN_IDS],
+    );
+    const existingCount = parseInt(existing[0]?.cnt || "0", 10);
+    if (existingCount > 0) {
+      logger.debug(`POP 레이아웃 이미 존재 (${companyCode}): ${existingCount}개, 스킵`);
+      return;
+    }
+
+    logger.info(`POP 레이아웃 자동 초기화 시작: ${companyCode}`);
+
+    // 회사명 조회 (레이아웃 내 회사명 치환용)
+    const companyInfo = await queryOne<{ company_name: string }>(
+      `SELECT company_name FROM company_mng WHERE company_code = $1`,
+      [companyCode],
+    );
+    const companyName = companyInfo?.company_name || companyCode;
+
+    let initCount = 0;
+    for (const screenId of POP_SCREEN_IDS) {
+      // 템플릿 조회: 공통(*) 우선, 없으면 COMPANY_7 폴백
+      let template = await queryOne<{ layout_data: any }>(
+        `SELECT layout_data FROM screen_layouts_pop
+         WHERE screen_id = $1 AND company_code = '*'`,
+        [screenId],
+      );
+      if (!template) {
+        template = await queryOne<{ layout_data: any }>(
+          `SELECT layout_data FROM screen_layouts_pop
+           WHERE screen_id = $1 AND company_code = 'COMPANY_7'`,
+          [screenId],
+        );
+      }
+
+      if (!template) {
+        logger.debug(`POP 템플릿 없음 (screen_id=${screenId}), 스킵`);
+        continue;
+      }
+
+      // 레이아웃 복제 + 회사명 치환
+      const layoutStr = JSON.stringify(template.layout_data);
+      const replacedStr = layoutStr
+        .replace(/\(주\)탑씰/g, companyName)
+        .replace(/탑씰/g, companyName)
+        .replace(/TOPSEAL/gi, companyName);
+
+      await query(
+        `INSERT INTO screen_layouts_pop (screen_id, company_code, layout_data, created_at, updated_at, created_by, updated_by)
+         VALUES ($1, $2, $3, NOW(), NOW(), 'SYSTEM', 'SYSTEM')
+         ON CONFLICT (screen_id, company_code) DO NOTHING`,
+        [screenId, companyCode, replacedStr],
+      );
+      initCount++;
+    }
+
+    logger.info(`POP 레이아웃 자동 초기화 완료: ${companyCode}, ${initCount}개 화면`);
+  }
 }
diff --git a/backend-node/src/controllers/fileController.ts b/backend-node/src/controllers/fileController.ts
index 66418099..ea9bd7a9 100644
--- a/backend-node/src/controllers/fileController.ts
+++ b/backend-node/src/controllers/fileController.ts
@@ -843,45 +843,45 @@ export const previewFile = async (
       return;
     }
 
-    // 파일 경로에서 회사코드와 날짜 폴더 추출
-    const filePathParts = fileRecord.file_path!.split("/");
-    let fileCompanyCode = filePathParts[2] || "DEFAULT";
-
-    // company_* 처리 (실제 회사 코드로 변환)
-    if (fileCompanyCode === "company_*") {
-      fileCompanyCode = "company_*"; // 실제 디렉토리명 유지
-    }
-
+    // file_path의 /uploads/ 이후를 baseUploadDir과 직접 결합
     const fileName = fileRecord.saved_file_name!;
-
-    // 파일 경로에 날짜 구조가 있는지 확인 (YYYY/MM/DD)
-    let dateFolder = "";
-    if (filePathParts.length >= 6) {
-      dateFolder = `${filePathParts[3]}/${filePathParts[4]}/${filePathParts[5]}`;
+    const dbFilePath = fileRecord.file_path || "";
+    const uploadsIdx = dbFilePath.indexOf("/uploads/");
+    let finalPath: string;
+    if (uploadsIdx !== -1) {
+      const relativePath = dbFilePath.substring(uploadsIdx + "/uploads/".length);
+      finalPath = path.join(baseUploadDir, relativePath);
+    } else {
+      // fallback: 기존 방식
+      const filePathParts = dbFilePath.split("/");
+      let fileCompanyCode = filePathParts[2] || "DEFAULT";
+      if (fileCompanyCode === "company_*") {
+        fileCompanyCode = "company_*";
+      }
+      let dateFolder = "";
+      if (filePathParts.length >= 6) {
+        dateFolder = `${filePathParts[3]}/${filePathParts[4]}/${filePathParts[5]}`;
+      }
+      const companyUploadDir = getCompanyUploadDir(
+        fileCompanyCode,
+        dateFolder || undefined
+      );
+      finalPath = path.join(companyUploadDir, fileName);
     }
 
-    const companyUploadDir = getCompanyUploadDir(
-      fileCompanyCode,
-      dateFolder || undefined
-    );
-    const filePath = path.join(companyUploadDir, fileName);
-
     console.log("🔍 파일 미리보기 경로 확인:", {
       objid: objid,
       filePathFromDB: fileRecord.file_path,
       companyCode: companyCode,
-      dateFolder: dateFolder,
-      fileName: fileName,
-      companyUploadDir: companyUploadDir,
-      finalFilePath: filePath,
-      fileExists: fs.existsSync(filePath),
+      finalFilePath: finalPath,
+      fileExists: fs.existsSync(finalPath),
     });
 
-    if (!fs.existsSync(filePath)) {
-      console.error("❌ 파일 없음:", filePath);
+    if (!fs.existsSync(finalPath)) {
+      console.error("❌ 파일 없음:", finalPath);
       res.status(404).json({
         success: false,
-        message: `실제 파일을 찾을 수 없습니다: ${filePath}`,
+        message: `실제 파일을 찾을 수 없습니다: ${finalPath}`,
       });
       return;
     }
@@ -929,7 +929,7 @@ export const previewFile = async (
     res.setHeader("Content-Type", mimeType);
 
     // 파일 스트림으로 전송
-    const fileStream = fs.createReadStream(filePath);
+    const fileStream = fs.createReadStream(finalPath);
     fileStream.pipe(res);
   } catch (error) {
     console.error("파일 미리보기 오류:", error);
diff --git a/backend-node/src/controllers/outboundController.ts b/backend-node/src/controllers/outboundController.ts
index b4b942a0..c2d8ed00 100644
--- a/backend-node/src/controllers/outboundController.ts
+++ b/backend-node/src/controllers/outboundController.ts
@@ -229,15 +229,33 @@ export async function create(req: AuthenticatedRequest, res: Response) {
         );
       }
 
-      // 판매출고인 경우 출하지시의 ship_qty 업데이트
+      // 판매출고인 경우 출하지시의 ship_qty 업데이트 + 수주상세 ship_qty 반영
       if (item.outbound_type === "판매출고" && item.source_id && item.source_type === "shipment_instruction_detail") {
+        const outQtyNum = Number(item.outbound_qty) || 0;
         await client.query(
           `UPDATE shipment_instruction_detail
            SET ship_qty = COALESCE(ship_qty, 0) + $1,
                updated_date = NOW()
            WHERE id = $2 AND company_code = $3`,
-          [item.outbound_qty || 0, item.source_id, companyCode]
+          [outQtyNum, item.source_id, companyCode]
         );
+
+        // 출하지시 상세의 detail_id로 수주상세(sales_order_detail) ship_qty도 업데이트
+        const sidRes = await client.query(
+          `SELECT detail_id FROM shipment_instruction_detail WHERE id = $1 AND company_code = $2`,
+          [item.source_id, companyCode]
+        );
+        const detailId = sidRes.rows[0]?.detail_id;
+        if (detailId) {
+          await client.query(
+            `UPDATE sales_order_detail
+             SET ship_qty = (COALESCE(NULLIF(ship_qty,'')::numeric, 0) + $1)::text,
+                 balance_qty = (COALESCE(NULLIF(qty,'')::numeric, 0) - COALESCE(NULLIF(ship_qty,'')::numeric, 0) - $1)::text,
+                 updated_date = NOW()
+             WHERE id = $2 AND company_code = $3`,
+            [outQtyNum, detailId, companyCode]
+          );
+        }
       }
     }
 
@@ -477,8 +495,21 @@ export async function getItems(req: AuthenticatedRequest, res: Response) {
 export async function generateNumber(req: AuthenticatedRequest, res: Response) {
   try {
     const companyCode = req.user!.companyCode;
-    const pool = getPool();
+    const ruleId = (req.query.ruleId as string) || (req.query.rule_id as string);
 
+    // 1순위: POP 화면설정에서 선택한 채번규칙 사용
+    if (ruleId && ruleId !== "__none__") {
+      try {
+        const { numberingRuleService } = await import("../services/numberingRuleService");
+        const newNumber = await numberingRuleService.allocateCode(ruleId, companyCode);
+        return res.json({ success: true, data: newNumber });
+      } catch (e: any) {
+        logger.warn("선택한 채번규칙 사용 실패, 기본 채번으로 폴백", { ruleId, error: e.message });
+      }
+    }
+
+    // 2순위: 기본 하드코딩 채번 (OUT-YYYY-XXXX)
+    const pool = getPool();
     const today = new Date();
     const yyyy = today.getFullYear();
     const prefix = `OUT-${yyyy}-`;
diff --git a/backend-node/src/controllers/popProductionController.ts b/backend-node/src/controllers/popProductionController.ts
index 6ce685fb..8d0af7c5 100644
--- a/backend-node/src/controllers/popProductionController.ts
+++ b/backend-node/src/controllers/popProductionController.ts
@@ -11,6 +11,65 @@ interface DefectDetailItem {
   disposition: string;
 }
 
+// 자동 마이그레이션: batch_id 컬럼 추가 (배치/로트 추적용)
+let _batchMigrationDone = false;
+async function ensureBatchIdColumn() {
+  if (_batchMigrationDone) return;
+  try {
+    const pool = getPool();
+    await pool.query("ALTER TABLE work_order_process ADD COLUMN IF NOT EXISTS batch_id VARCHAR(100)");
+    _batchMigrationDone = true;
+  } catch { /* 이미 존재하거나 권한 문제 시 무시 */ }
+}
+
+/**
+ * inventory_stock UPSERT 공통 함수
+ * PC의 receivingController와 동일한 SELECT→INSERT/UPDATE 패턴 사용.
+ * (inventory_stock에 UNIQUE 제약조건이 없으므로 ON CONFLICT 사용 불가)
+ */
+async function upsertInventoryStock(
+  client: { query: (text: string, values?: any[]) => Promise<any> },
+  companyCode: string,
+  itemCode: string,
+  warehouseCode: string,
+  locationCode: string | null,
+  qty: number,
+  userId: string
+): Promise<void> {
+  const whCode = warehouseCode || null;
+  const locCode = locationCode || null;
+
+  const existing = await client.query(
+    `SELECT id FROM inventory_stock
+     WHERE company_code = $1 AND item_code = $2
+       AND COALESCE(warehouse_code, '') = COALESCE($3, '')
+       AND COALESCE(location_code, '') = COALESCE($4, '')
+     LIMIT 1`,
+    [companyCode, itemCode, whCode || '', locCode || '']
+  );
+
+  if (existing.rows.length > 0) {
+    await client.query(
+      `UPDATE inventory_stock
+       SET current_qty = CAST(COALESCE(CAST(NULLIF(current_qty, '') AS numeric), 0) + $1 AS text),
+           last_in_date = NOW(),
+           updated_date = NOW(),
+           writer = $2
+       WHERE id = $3`,
+      [qty, userId, existing.rows[0].id]
+    );
+  } else {
+    await client.query(
+      `INSERT INTO inventory_stock (
+        id, company_code, item_code, warehouse_code, location_code,
+        current_qty, safety_qty, last_in_date,
+        created_date, updated_date, writer
+      ) VALUES (gen_random_uuid()::text, $1, $2, $3, $4, $5, '0', NOW(), NOW(), NOW(), $6)`,
+      [companyCode, itemCode, whCode, locCode, String(qty), userId]
+    );
+  }
+}
+
 /**
  * 체크리스트 복사 공통 함수
  * 분할 행/재작업 카드 생성 시 마스터의 체크리스트를 새 행에 복사한다.
@@ -53,13 +112,15 @@ async function copyChecklistToSplit(
       ORDER BY pwi.sort_order, pwd.sort_order`,
       [newProcessId, userId, routingDetailId, companyCode]
     );
-    return result.rowCount ?? 0;
+    const countA = result.rowCount ?? 0;
+    if (countA > 0) return countA;
+    // A 전략에서 0건이면 B 전략(마스터 행의 기존 결과 복사)으로 fallthrough
   }
 
-  // B. routing_detail_id가 없으면 마스터 행의 process_work_result에서 구조만 복사 (타이머/결과값 초기화)
+  // B. routing_detail_id가 없거나 A 전략에서 0건이면 마스터 행의 process_work_result에서 구조만 복사 (타이머/결과값 초기화)
   const result = await client.query(
     `INSERT INTO process_work_result (
-      id, company_code, work_order_process_id,
+      company_code, work_order_process_id,
       source_work_item_id, source_detail_id,
       work_phase, item_title, item_sort_order,
       detail_content, detail_type, detail_sort_order, is_required,
@@ -68,7 +129,7 @@ async function copyChecklistToSplit(
       status, writer
     )
     SELECT
-      gen_random_uuid()::text, company_code, $1,
+      company_code, $1,
       source_work_item_id, source_detail_id,
       work_phase, item_title, item_sort_order,
       detail_content, detail_type, detail_sort_order, is_required,
@@ -84,6 +145,101 @@ async function copyChecklistToSplit(
   return result.rowCount ?? 0;
 }
 
+/**
+ * 내부 헬퍼: 단일 작업지시에 대해 work_order_process + process_work_result 일괄 생성
+ * createWorkProcesses와 syncWorkInstructions 양쪽에서 재사용한다.
+ *
+ * @returns 생성된 공정 목록 + 체크리스트 총 수. 이미 존재하면 null 반환.
+ */
+async function generateWorkProcessesForInstruction(
+  client: { query: (text: string, values?: any[]) => Promise<any> },
+  workInstructionId: string,
+  routingVersionId: string,
+  planQty: string | null,
+  companyCode: string,
+  userId: string
+): Promise<{
+  processes: Array<{ id: string; seq_no: string; process_name: string; checklist_count: number }>;
+  total_checklists: number;
+} | null> {
+  // 중복 호출 방지: 이미 생성된 공정이 있는지 확인
+  const existCheck = await client.query(
+    `SELECT COUNT(*) as cnt FROM work_order_process
+     WHERE wo_id = $1 AND company_code = $2`,
+    [workInstructionId, companyCode]
+  );
+  if (parseInt(existCheck.rows[0].cnt, 10) > 0) {
+    return null; // 이미 존재
+  }
+
+  // 1. item_routing_detail + process_mng JOIN (공정 목록 + 공정명)
+  const routingDetails = await client.query(
+    `SELECT rd.id, rd.seq_no, rd.process_code,
+            COALESCE(pm.process_name, rd.process_code) as process_name,
+            rd.is_required, rd.is_fixed_order, rd.standard_time
+     FROM item_routing_detail rd
+     LEFT JOIN process_mng pm ON pm.process_code = rd.process_code
+       AND pm.company_code = rd.company_code
+     WHERE rd.routing_version_id = $1 AND rd.company_code = $2
+     ORDER BY CAST(rd.seq_no AS int) NULLS LAST`,
+    [routingVersionId, companyCode]
+  );
+
+  if (routingDetails.rows.length === 0) {
+    return null; // 공정 없음
+  }
+
+  const processes: Array<{
+    id: string;
+    seq_no: string;
+    process_name: string;
+    checklist_count: number;
+  }> = [];
+  let totalChecklists = 0;
+
+  for (const rd of routingDetails.rows) {
+    // 2. work_order_process INSERT
+    const wopResult = await client.query(
+      `INSERT INTO work_order_process (
+        id, company_code, wo_id, seq_no, process_code, process_name,
+        is_required, is_fixed_order, standard_time, plan_qty,
+        status, routing_detail_id, writer
+      ) VALUES (gen_random_uuid()::text, $1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
+      RETURNING id`,
+      [
+        companyCode,
+        workInstructionId,
+        rd.seq_no,
+        rd.process_code,
+        rd.process_name,
+        rd.is_required,
+        rd.is_fixed_order,
+        rd.standard_time,
+        planQty || null,
+        parseInt(rd.seq_no, 10) === 1 || rd.is_fixed_order === "Y" ? "acceptable" : "waiting",
+        rd.id,
+        userId,
+      ]
+    );
+    const wopId = wopResult.rows[0].id;
+
+    // 3. process_work_result INSERT (공통 함수로 체크리스트 복사)
+    const checklistCount = await copyChecklistToSplit(
+      client, wopId, wopId, rd.id, companyCode, userId
+    );
+    totalChecklists += checklistCount;
+
+    processes.push({
+      id: wopId,
+      seq_no: rd.seq_no,
+      process_name: rd.process_name,
+      checklist_count: checklistCount,
+    });
+  }
+
+  return { processes, total_checklists: totalChecklists };
+}
+
 /**
  * D-BE1: 작업지시 공정 일괄 생성
  * PC에서 작업지시 생성 후 호출. 1 트랜잭션으로 work_order_process + process_work_result 일괄 생성.
@@ -121,92 +277,15 @@ export const createWorkProcesses = async (
 
     await client.query("BEGIN");
 
-    // 중복 호출 방지: 이미 생성된 공정이 있는지 확인
-    const existCheck = await client.query(
-      `SELECT COUNT(*) as cnt FROM work_order_process
-       WHERE wo_id = $1 AND company_code = $2`,
-      [work_instruction_id, companyCode]
+    const result = await generateWorkProcessesForInstruction(
+      client, work_instruction_id, routing_version_id, plan_qty, companyCode, userId
     );
-    if (parseInt(existCheck.rows[0].cnt, 10) > 0) {
+
+    if (!result) {
       await client.query("ROLLBACK");
       return res.status(409).json({
         success: false,
-        message: "이미 공정이 생성된 작업지시입니다.",
-      });
-    }
-
-    // 1. item_routing_detail + process_mng JOIN (공정 목록 + 공정명)
-    const routingDetails = await client.query(
-      `SELECT rd.id, rd.seq_no, rd.process_code,
-              COALESCE(pm.process_name, rd.process_code) as process_name,
-              rd.is_required, rd.is_fixed_order, rd.standard_time
-       FROM item_routing_detail rd
-       LEFT JOIN process_mng pm ON pm.process_code = rd.process_code
-         AND pm.company_code = rd.company_code
-       WHERE rd.routing_version_id = $1 AND rd.company_code = $2
-       ORDER BY CAST(rd.seq_no AS int) NULLS LAST`,
-      [routing_version_id, companyCode]
-    );
-
-    if (routingDetails.rows.length === 0) {
-      await client.query("ROLLBACK");
-      return res.status(404).json({
-        success: false,
-        message: "라우팅 버전에 등록된 공정이 없습니다.",
-      });
-    }
-
-    const processes: Array<{
-      id: string;
-      seq_no: string;
-      process_name: string;
-      checklist_count: number;
-    }> = [];
-    let totalChecklists = 0;
-
-    for (const rd of routingDetails.rows) {
-      // 2. work_order_process INSERT
-      const wopResult = await client.query(
-        `INSERT INTO work_order_process (
-          id, company_code, wo_id, seq_no, process_code, process_name,
-          is_required, is_fixed_order, standard_time, plan_qty,
-          status, routing_detail_id, writer
-        ) VALUES (gen_random_uuid()::text, $1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
-        RETURNING id`,
-        [
-          companyCode,
-          work_instruction_id,
-          rd.seq_no,
-          rd.process_code,
-          rd.process_name,
-          rd.is_required,
-          rd.is_fixed_order,
-          rd.standard_time,
-          plan_qty || null,
-          parseInt(rd.seq_no, 10) === 1 ? "acceptable" : "waiting",
-          rd.id,
-          userId,
-        ]
-      );
-      const wopId = wopResult.rows[0].id;
-
-      // 3. process_work_result INSERT (공통 함수로 체크리스트 복사)
-      const checklistCount = await copyChecklistToSplit(
-        client, wopId, wopId, rd.id, companyCode, userId
-      );
-      totalChecklists += checklistCount;
-
-      processes.push({
-        id: wopId,
-        seq_no: rd.seq_no,
-        process_name: rd.process_name,
-        checklist_count: checklistCount,
-      });
-
-      logger.info("[pop/production] 공정 생성 완료", {
-        wopId,
-        processName: rd.process_name,
-        checklistCount,
+        message: "이미 공정이 생성된 작업지시이거나 라우팅에 공정이 없습니다.",
       });
     }
 
@@ -215,16 +294,16 @@ export const createWorkProcesses = async (
     logger.info("[pop/production] create-work-processes 완료", {
       companyCode,
       work_instruction_id,
-      total_processes: processes.length,
-      total_checklists: totalChecklists,
+      total_processes: result.processes.length,
+      total_checklists: result.total_checklists,
     });
 
     return res.json({
       success: true,
       data: {
-        processes,
-        total_processes: processes.length,
-        total_checklists: totalChecklists,
+        processes: result.processes,
+        total_processes: result.processes.length,
+        total_checklists: result.total_checklists,
       },
     });
   } catch (error: any) {
@@ -239,6 +318,130 @@ export const createWorkProcesses = async (
   }
 };
 
+/**
+ * POP 온디맨드 Pull: 미동기화 작업지시 일괄 sync
+ * routing이 있지만 work_order_process가 없는 작업지시를 찾아 공정을 자동 생성한다.
+ * 각 건별 개별 try-catch로 하나 실패해도 나머지 진행.
+ */
+export const syncWorkInstructions = async (
+  req: AuthenticatedRequest,
+  res: Response
+) => {
+  const pool = getPool();
+
+  try {
+    const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
+
+    logger.info("[pop/production] sync-work-instructions 요청", {
+      companyCode,
+      userId,
+    });
+
+    // 미동기화 작업지시 조회: routing이 있지만 work_order_process가 없는 항목
+    const unsyncedResult = await pool.query(
+      `SELECT wi.id, wi.work_instruction_no, wi.routing, wi.qty
+       FROM work_instruction wi
+       WHERE wi.company_code = $1
+         AND wi.routing IS NOT NULL
+         AND NOT EXISTS (
+           SELECT 1 FROM work_order_process wop
+           WHERE wop.wo_id = wi.id AND wop.company_code = $1
+         )`,
+      [companyCode]
+    );
+
+    const unsynced = unsyncedResult.rows;
+
+    if (unsynced.length === 0) {
+      return res.json({
+        success: true,
+        data: { synced: 0, skipped: 0, errors: 0, details: [] },
+      });
+    }
+
+    let synced = 0;
+    let skipped = 0;
+    let errors = 0;
+    const details: Array<{
+      work_instruction_id: string;
+      work_instruction_no: string;
+      status: "synced" | "skipped" | "error";
+      process_count?: number;
+      error?: string;
+    }> = [];
+
+    for (const wi of unsynced) {
+      const client = await pool.connect();
+      try {
+        await client.query("BEGIN");
+
+        const result = await generateWorkProcessesForInstruction(
+          client, wi.id, wi.routing, wi.qty || null, companyCode, userId
+        );
+
+        if (!result) {
+          await client.query("ROLLBACK");
+          skipped++;
+          details.push({
+            work_instruction_id: wi.id,
+            work_instruction_no: wi.work_instruction_no,
+            status: "skipped",
+          });
+          continue;
+        }
+
+        await client.query("COMMIT");
+        synced++;
+        details.push({
+          work_instruction_id: wi.id,
+          work_instruction_no: wi.work_instruction_no,
+          status: "synced",
+          process_count: result.processes.length,
+        });
+
+        logger.info("[pop/production] sync: 공정 생성 완료", {
+          work_instruction_no: wi.work_instruction_no,
+          process_count: result.processes.length,
+        });
+      } catch (err: any) {
+        await client.query("ROLLBACK");
+        errors++;
+        details.push({
+          work_instruction_id: wi.id,
+          work_instruction_no: wi.work_instruction_no,
+          status: "error",
+          error: err.message || "알 수 없는 오류",
+        });
+        logger.error("[pop/production] sync: 개별 오류", {
+          work_instruction_no: wi.work_instruction_no,
+          error: err.message,
+        });
+      } finally {
+        client.release();
+      }
+    }
+
+    logger.info("[pop/production] sync-work-instructions 완료", {
+      companyCode,
+      synced,
+      skipped,
+      errors,
+    });
+
+    return res.json({
+      success: true,
+      data: { synced, skipped, errors, details },
+    });
+  } catch (error: any) {
+    logger.error("[pop/production] sync-work-instructions 오류:", error);
+    return res.status(500).json({
+      success: false,
+      message: error.message || "작업지시 동기화 중 오류가 발생했습니다.",
+    });
+  }
+};
+
 /**
  * D-BE2: 타이머 API (시작/일시정지/재시작)
  */
@@ -752,6 +955,33 @@ export const saveResult = async (
       });
     }
 
+    // === BUG-2 FIX: SPLIT 실적 저장 후 master 행에 합산 ===
+    if (prev.parent_process_id) {
+      await pool.query(
+        `UPDATE work_order_process
+         SET good_qty = sub.sum_good,
+             defect_qty = sub.sum_defect,
+             total_production_qty = sub.sum_total,
+             concession_qty = sub.sum_concession,
+             updated_date = NOW()
+         FROM (
+           SELECT
+             COALESCE(SUM(CAST(NULLIF(good_qty, '') AS numeric)), 0)::text AS sum_good,
+             COALESCE(SUM(CAST(NULLIF(defect_qty, '') AS numeric)), 0)::text AS sum_defect,
+             COALESCE(SUM(CAST(NULLIF(total_production_qty, '') AS numeric)), 0)::text AS sum_total,
+             COALESCE(SUM(CAST(NULLIF(concession_qty, '') AS numeric)), 0)::text AS sum_concession
+           FROM work_order_process
+           WHERE parent_process_id = $1 AND company_code = $2
+         ) sub
+         WHERE id = $1 AND company_code = $2`,
+        [prev.parent_process_id, companyCode]
+      );
+      logger.info("[pop/production] master 합산 업데이트", {
+        masterId: prev.parent_process_id,
+        splitId: work_order_process_id,
+      });
+    }
+
     // 현재 분할 행의 공정 정보 조회
     const currentSeq = await pool.query(
       `SELECT wop.seq_no, wop.wo_id, wop.input_qty as current_input_qty,
@@ -768,14 +998,44 @@ export const saveResult = async (
     // 재작업 카드 자동 생성 (disposition = 'rework' 항목이 있을 때)
     if (currentSeq.rowCount > 0 && defect_detail && Array.isArray(defect_detail)) {
       let totalReworkQty = 0;
+      let targetProcessCode: string | null = null;
       for (const item of defect_detail) {
         if (item.disposition === "rework") {
           totalReworkQty += parseInt(item.qty, 10) || 0;
+          if (item.target_process_code) targetProcessCode = item.target_process_code;
         }
       }
       if (totalReworkQty > 0) {
         const proc = currentSeq.rows[0];
         const masterId = proc.parent_process_id || work_order_process_id;
+
+        // 재작업 대상 공정 결정
+        let reworkSeqNo = proc.seq_no;
+        let reworkProcessCode = proc.process_code;
+        let reworkProcessName = proc.process_name;
+        let reworkRoutingDetailId = proc.routing_detail_id;
+        let reworkMasterId = masterId;
+
+        // target_process_code가 지정되면 해당 공정 정보를 조회
+        if (targetProcessCode) {
+          const targetProc = await pool.query(
+            `SELECT id, seq_no, process_code, process_name, routing_detail_id
+             FROM work_order_process
+             WHERE wo_id = $1 AND process_code = $2 AND company_code = $3
+               AND parent_process_id IS NULL
+             LIMIT 1`,
+            [proc.wo_id, targetProcessCode, companyCode]
+          );
+          if (targetProc.rowCount > 0) {
+            const tp = targetProc.rows[0];
+            reworkSeqNo = tp.seq_no;
+            reworkProcessCode = tp.process_code;
+            reworkProcessName = tp.process_name;
+            reworkRoutingDetailId = tp.routing_detail_id;
+            reworkMasterId = tp.id; // 지정 공정의 마스터 ID
+          }
+        }
+
         const reworkInsert = await pool.query(
           `INSERT INTO work_order_process (
             id, wo_id, seq_no, process_code, process_name, is_required, is_fixed_order,
@@ -790,134 +1050,134 @@ export const saveResult = async (
             $12, $13, $14
           ) RETURNING id`,
           [
-            proc.wo_id, proc.seq_no, proc.process_code, proc.process_name,
+            proc.wo_id, reworkSeqNo, reworkProcessCode, reworkProcessName,
             proc.is_required, proc.is_fixed_order, proc.standard_time,
-            proc.equipment_code, proc.routing_detail_id,
+            proc.equipment_code, reworkRoutingDetailId,
             String(totalReworkQty), work_order_process_id,
-            masterId, companyCode, userId,
+            reworkMasterId, companyCode, userId,
           ]
         );
         // 재작업 카드에 체크리스트 복사
         const reworkId = reworkInsert.rows[0]?.id;
         if (reworkId) {
           const reworkChecklistCount = await copyChecklistToSplit(
-            pool, masterId, reworkId, proc.routing_detail_id, companyCode, userId
+            pool, reworkMasterId, reworkId, reworkRoutingDetailId, companyCode, userId
           );
           logger.info("[pop/production] 재작업 카드 자동 생성", {
             reworkId,
             sourceId: work_order_process_id,
             reworkQty: totalReworkQty,
+            targetProcess: targetProcessCode || "(같은 공정)",
+            reworkSeqNo,
             checklistCount: reworkChecklistCount,
           });
         }
       }
     }
 
-    // 다음 공정 활성화: 양품 발생 시 다음 seq_no의 원본(마스터) 행을 acceptable로
-    // waiting -> acceptable (최초 활성화)
-    // in_progress -> acceptable (앞공정 추가양품으로 접수가능량 복원)
-    if (addGood > 0 && currentSeq.rowCount > 0) {
-      const { seq_no, wo_id } = currentSeq.rows[0];
-      const nextSeq = String(parseInt(seq_no, 10) + 1);
-      const nextUpdate = await pool.query(
-        `UPDATE work_order_process
-         SET status = CASE WHEN status IN ('waiting', 'in_progress') THEN 'acceptable' ELSE status END,
-             updated_date = NOW()
-         WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
-           AND parent_process_id IS NULL
-           AND status != 'completed'
-         RETURNING id, process_name, status`,
-        [wo_id, nextSeq, companyCode]
-      );
-      if (nextUpdate.rowCount > 0) {
-        logger.info("[pop/production] 다음 공정 상태 전환", {
-          nextProcess: nextUpdate.rows[0],
-        });
-      }
-    }
-
-    // 개별 분할 행 자동완료: 이 분할 행의 접수분 전량 생산 시 completed
+    // 개별 분할 행 자동완료 (다음 공정 활성화보다 먼저 실행)
     if (currentSeq.rowCount > 0) {
-      const { seq_no, wo_id, current_input_qty, instruction_qty } = currentSeq.rows[0];
-      const myInputQty = parseInt(current_input_qty, 10) || 0;
+      const { seq_no: csSeq, wo_id: csWoId, current_input_qty: csInputQty, instruction_qty: csInstrQty, parent_process_id: csParentId } = currentSeq.rows[0];
+      const csMyInput = parseInt(csInputQty, 10) || 0;
 
-      if (newTotal >= myInputQty && myInputQty > 0) {
+      if (newTotal >= csMyInput && csMyInput > 0) {
         await pool.query(
-          `UPDATE work_order_process
-           SET status = 'completed',
-               result_status = 'confirmed',
-               completed_at = NOW()::text,
-               completed_by = $3,
-               updated_date = NOW()
-           WHERE id = $1 AND company_code = $2
-             AND status != 'completed'`,
+          `UPDATE work_order_process SET status = 'completed', result_status = 'confirmed',
+           completed_at = NOW()::text, completed_by = $3, updated_date = NOW()
+           WHERE id = $1 AND company_code = $2 AND status != 'completed'`,
           [work_order_process_id, companyCode, userId]
         );
-        logger.info("[pop/production] 분할 행 자동 완료", {
-          work_order_process_id, newTotal, myInputQty,
-        });
 
-        // 같은 공정의 모든 분할 행이 completed인지 체크 -> 원본도 completed로
-        const seqNum = parseInt(seq_no, 10);
-        const instrQty = parseInt(instruction_qty, 10) || 0;
-
-        // 앞공정 양품 합산 (접수가능 잔여 계산용)
-        let prevGoodQty = instrQty;
-        if (seqNum > 1) {
-          const prevSeq = String(seqNum - 1);
-          const prevProcess = await pool.query(
-            `SELECT COALESCE(SUM(good_qty::int), 0) + COALESCE(SUM(concession_qty::int), 0) as total_good
-             FROM work_order_process
-             WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3`,
-            [wo_id, prevSeq, companyCode]
+        // 같은 seq의 모든 분할 행 완료 체크 → 마스터도 completed
+        const csSeqNum = parseInt(csSeq, 10);
+        let csPrevGood = parseInt(csInstrQty, 10) || 0;
+        if (csSeqNum > 1) {
+          const prev = await pool.query(
+            `SELECT COALESCE(SUM(good_qty::int), 0) + COALESCE(SUM(concession_qty::int), 0) as tg
+             FROM work_order_process WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
+               AND parent_process_id IS NOT NULL`,
+            [csWoId, String(csSeqNum - 1), companyCode]
           );
-          if (prevProcess.rowCount > 0) {
-            prevGoodQty = parseInt(prevProcess.rows[0].total_good, 10) || 0;
-          }
+          if (prev.rowCount > 0) csPrevGood = parseInt(prev.rows[0].tg, 10) || 0;
         }
-
-        // 같은 seq_no의 모든 분할 행 접수량 합산 + 미완료 행 카운트
-        const siblingCheck = await pool.query(
-          `SELECT
-             COALESCE(SUM(input_qty::int), 0) as total_input,
-             COUNT(*) FILTER (WHERE status != 'completed') as incomplete_count
-           FROM work_order_process
-           WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
-             AND parent_process_id IS NOT NULL`,
-          [wo_id, seq_no, companyCode]
+        const sibCheck = await pool.query(
+          `SELECT COALESCE(SUM(input_qty::int), 0) as ti, COUNT(*) FILTER (WHERE status != 'completed') as ic
+           FROM work_order_process WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3 AND parent_process_id IS NOT NULL`,
+          [csWoId, csSeq, companyCode]
         );
-
-        const totalInput = parseInt(siblingCheck.rows[0].total_input, 10) || 0;
-        const incompleteCount = parseInt(siblingCheck.rows[0].incomplete_count, 10) || 0;
-        const remainingAcceptable = prevGoodQty - totalInput;
-
-        // 모든 분할 행 완료 + 잔여 접수가능 0 -> 원본(마스터)도 completed
-        if (incompleteCount === 0 && remainingAcceptable <= 0) {
-          const masterId = currentSeq.rows[0].parent_process_id;
-          if (masterId) {
-            await pool.query(
-              `UPDATE work_order_process
-               SET status = 'completed',
-                   result_status = 'confirmed',
-                   completed_at = NOW()::text,
-                   completed_by = $3,
-                   updated_date = NOW()
-               WHERE id = $1 AND company_code = $2
-                 AND status != 'completed'`,
-              [masterId, companyCode, userId]
-            );
-            logger.info("[pop/production] 원본(마스터) 공정 자동 완료", {
-              masterId, totalInput, prevGoodQty,
-            });
-          }
+        const csTotalInput = parseInt(sibCheck.rows[0].ti, 10) || 0;
+        const csIncomplete = parseInt(sibCheck.rows[0].ic, 10) || 0;
+        if (csIncomplete === 0 && csPrevGood - csTotalInput <= 0 && csParentId) {
+          await pool.query(
+            `UPDATE work_order_process SET status = 'completed', result_status = 'confirmed',
+             completed_at = NOW()::text, completed_by = $3, updated_date = NOW()
+             WHERE id = $1 AND company_code = $2 AND status != 'completed'`,
+            [csParentId, companyCode, userId]
+          );
         }
       }
 
-      // 작업지시 전체 완료 판정
-      const { wo_id: woIdForWi } = currentSeq.rows[0];
-      await checkAndCompleteWorkInstruction(pool, woIdForWi, companyCode, userId);
+      await checkAndCompleteWorkInstruction(pool, csWoId, companyCode, userId);
     }
 
+    // 다음 공정 활성화 (다중공정 대응)
+    // is_fixed_order='Y' 그룹이면 그룹 전체 완료 후 다음 활성화
+    if (addGood > 0 && currentSeq.rowCount > 0) {
+      const { seq_no, wo_id, is_fixed_order } = currentSeq.rows[0];
+      const seqNum = parseInt(seq_no, 10);
+
+      let shouldActivateNext = true;
+
+      if (is_fixed_order === "Y") {
+        // 같은 seq_no에서 is_fixed_order='Y'인 병렬 공정이 모두 완료되었는지 확인
+        // (병렬 그룹 = 같은 seq_no를 공유하는 공정들)
+        const groupCheck = await pool.query(
+          `SELECT id, seq_no, status,
+                  COALESCE(good_qty::int, 0) + COALESCE(concession_qty::int, 0) as total_good
+           FROM work_order_process
+           WHERE wo_id = $1 AND company_code = $2
+             AND parent_process_id IS NULL
+             AND seq_no = $3
+           ORDER BY CAST(seq_no AS int)`,
+          [wo_id, companyCode, seq_no]
+        );
+
+        // 같은 seq의 미완료 공정 확인 (병렬 그룹 내)
+        const incomplete = groupCheck.rows.filter((r: Record<string, unknown>) =>
+          String(r.status) !== "completed" && parseInt(String(r.total_good), 10) <= 0
+        );
+        shouldActivateNext = incomplete.length === 0;
+
+        if (!shouldActivateNext) {
+          logger.info("[pop/production] 병렬 그룹 미완료 — 다음 공정 대기", {
+            groupSize: groupCheck.rows.length,
+            incomplete: incomplete.length,
+          });
+        }
+      }
+
+      if (shouldActivateNext) {
+        // 다음 seq 활성화 (completed도 재활성화 — 새 양품이 들어오면 추가 접수 가능)
+        const nextSeq = String(seqNum + 1);
+        const nextUpdate = await pool.query(
+          `UPDATE work_order_process
+           SET status = 'acceptable',
+               updated_date = NOW()
+           WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
+             AND parent_process_id IS NULL
+           RETURNING id, process_name, status`,
+          [wo_id, nextSeq, companyCode]
+        );
+        if (nextUpdate.rowCount > 0) {
+          logger.info("[pop/production] 다음 공정 상태 전환", {
+            nextProcess: nextUpdate.rows[0],
+          });
+        }
+      }
+    }
+
+    // (분할행 완료 + 마스터 캐스케이드는 위에서 이미 처리됨)
+
     logger.info("[pop/production] save-result 완료 (누적)", {
       companyCode,
       work_order_process_id,
@@ -932,9 +1192,22 @@ export const saveResult = async (
       [work_order_process_id, companyCode]
     );
 
+    // 리워크 정보도 응답에 포함 (프론트에서 다음 공정 접수 시 전달 가능)
+    const responseData = latestData.rows[0] || result.rows[0];
+    if (responseData) {
+      const reworkInfo = await pool.query(
+        `SELECT is_rework, rework_source_id FROM work_order_process WHERE id = $1`,
+        [work_order_process_id]
+      );
+      if (reworkInfo.rows[0]?.rework_source_id) {
+        responseData.rework_source_id = reworkInfo.rows[0].rework_source_id;
+        responseData.is_rework = reworkInfo.rows[0].is_rework;
+      }
+    }
+
     return res.json({
       success: true,
-      data: latestData.rows[0] || result.rows[0],
+      data: responseData,
     });
   } catch (error: any) {
     logger.error("[pop/production] save-result 오류:", error);
@@ -979,13 +1252,14 @@ const checkAndCompleteWorkInstruction = async (
   const totalGoodResult = await pool.query(
     `SELECT COALESCE(SUM(good_qty::int), 0) + COALESCE(SUM(concession_qty::int), 0) as total_good
      FROM work_order_process
-     WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3`,
+     WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
+       AND parent_process_id IS NOT NULL`,
     [woId, maxSeq, companyCode]
   );
 
   const completedQty = totalGoodResult.rows[0].total_good;
 
-  await pool.query(
+  const updateResult = await pool.query(
     `UPDATE work_instruction
      SET status = 'completed',
          progress_status = 'completed',
@@ -993,13 +1267,60 @@ const checkAndCompleteWorkInstruction = async (
          writer = $4,
          updated_date = NOW()
      WHERE id = $1 AND company_code = $2
-       AND status != 'completed'`,
+       AND status != 'completed'
+     RETURNING id, item_id`,
     [woId, companyCode, String(completedQty), userId]
   );
 
   logger.info("[pop/production] 작업지시 전체 완료", {
     woId, completedQty, companyCode,
   });
+
+  // 생산완료→재고 입고: 마지막 공정의 target_warehouse_id가 설정된 경우 inventory_stock UPSERT
+  if (updateResult.rowCount > 0 && completedQty > 0) {
+    try {
+      const itemId = updateResult.rows[0].item_id;
+
+      // item_info에서 item_number 조회
+      const itemResult = await pool.query(
+        `SELECT item_number FROM item_info WHERE id = $1 AND company_code = $2`,
+        [itemId, companyCode]
+      );
+      if (itemResult.rowCount === 0) {
+        logger.warn("[pop/production] 재고입고 건너뜀: item_info 없음", { itemId, companyCode });
+        return;
+      }
+      const itemCode = itemResult.rows[0].item_number;
+
+      // 마지막 공정의 창고 설정 조회 (마스터 행에서)
+      const warehouseResult = await pool.query(
+        `SELECT target_warehouse_id, target_location_code
+         FROM work_order_process
+         WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
+           AND parent_process_id IS NULL
+         LIMIT 1`,
+        [woId, maxSeq, companyCode]
+      );
+
+      if (warehouseResult.rowCount === 0 || !warehouseResult.rows[0].target_warehouse_id) {
+        logger.info("[pop/production] 재고입고 건너뜀: 목표창고 미설정", { woId });
+        return;
+      }
+
+      const warehouseCode = warehouseResult.rows[0].target_warehouse_id;
+      const locationCode = warehouseResult.rows[0].target_location_code || warehouseCode;
+
+      // inventory_stock UPSERT (PC receivingController와 동일한 SELECT→INSERT/UPDATE 패턴)
+      await upsertInventoryStock(pool, companyCode, itemCode, warehouseCode, locationCode, completedQty, userId);
+
+      logger.info("[pop/production] 생산완료→재고 입고 완료", {
+        woId, itemCode, warehouseCode, locationCode, qty: completedQty, companyCode,
+      });
+    } catch (inventoryError: any) {
+      // 재고 입고 실패해도 공정 완료는 유지 (재고는 보조 기능)
+      logger.error("[pop/production] 재고입고 오류 (공정 완료는 유지):", inventoryError);
+    }
+  }
 };
 
 /**
@@ -1090,15 +1411,37 @@ export const confirmResult = async (
         const nextSeq = String(seqNum + 1);
         await pool.query(
           `UPDATE work_order_process
-           SET status = CASE WHEN status IN ('waiting', 'in_progress') THEN 'acceptable' ELSE status END,
+           SET status = 'acceptable',
                updated_date = NOW()
            WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
-             AND parent_process_id IS NULL
-             AND status != 'completed'`,
+             AND parent_process_id IS NULL`,
           [wo_id, nextSeq, companyCode]
         );
       }
 
+      // === BUG-2 FIX: confirmResult에서도 master 합산 ===
+      if (parent_process_id) {
+        await pool.query(
+          `UPDATE work_order_process
+           SET good_qty = sub.sum_good,
+               defect_qty = sub.sum_defect,
+               total_production_qty = sub.sum_total,
+               concession_qty = sub.sum_concession,
+               updated_date = NOW()
+           FROM (
+             SELECT
+               COALESCE(SUM(CAST(NULLIF(good_qty, '') AS numeric)), 0)::text AS sum_good,
+               COALESCE(SUM(CAST(NULLIF(defect_qty, '') AS numeric)), 0)::text AS sum_defect,
+               COALESCE(SUM(CAST(NULLIF(total_production_qty, '') AS numeric)), 0)::text AS sum_total,
+               COALESCE(SUM(CAST(NULLIF(concession_qty, '') AS numeric)), 0)::text AS sum_concession
+             FROM work_order_process
+             WHERE parent_process_id = $1 AND company_code = $2
+           ) sub
+           WHERE id = $1 AND company_code = $2`,
+          [parent_process_id, companyCode]
+        );
+      }
+
       // 마스터 자동완료 캐스케이드 (분할 행인 경우)
       if (parent_process_id) {
         let prevGoodQty = instrQty;
@@ -1107,7 +1450,8 @@ export const confirmResult = async (
           const prevProcess = await pool.query(
             `SELECT COALESCE(SUM(good_qty::int), 0) + COALESCE(SUM(concession_qty::int), 0) as total_good
              FROM work_order_process
-             WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3`,
+             WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
+               AND parent_process_id IS NOT NULL`,
             [wo_id, prevSeq, companyCode]
           );
           if (prevProcess.rowCount > 0) {
@@ -1298,32 +1642,51 @@ export const getAvailableQty = async (req: AuthenticatedRequest, res: Response)
     const instrQty = parseInt(instruction_qty, 10) || 0;
     const seqNum = parseInt(seq_no, 10);
 
-    // 같은 공정(wo_id + seq_no)의 모든 분할 행 접수량 합산
-    const totalAccepted = await pool.query(
-      `SELECT COALESCE(SUM(input_qty::int), 0) as total_input
-       FROM work_order_process
-       WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
-         AND parent_process_id IS NOT NULL`,
-      [wo_id, seq_no, companyCode]
+    // 재작업 카드 여부 확인
+    const reworkCheck = await pool.query(
+      `SELECT is_rework, input_qty FROM work_order_process WHERE id = $1`,
+      [work_order_process_id]
     );
-    const myInputQty = parseInt(totalAccepted.rows[0].total_input, 10) || 0;
+    const isRework = reworkCheck.rows[0]?.is_rework === "Y";
 
-    // 앞공정 양품+특채 합산
-    let prevGoodQty = instrQty;
-    if (seqNum > 1) {
-      const prevSeq = String(seqNum - 1);
-      const prevProcess = await pool.query(
-        `SELECT COALESCE(SUM(good_qty::int), 0) + COALESCE(SUM(concession_qty::int), 0) as total_good
+    let myInputQty: number;
+    let prevGoodQty: number;
+    let availableQty: number;
+
+    if (isRework) {
+      // 재작업 카드: 자체 input_qty가 접수 가능 수량
+      const reworkInput = parseInt(reworkCheck.rows[0]?.input_qty, 10) || 0;
+      myInputQty = 0;
+      prevGoodQty = reworkInput;
+      availableQty = reworkInput;
+    } else {
+      // 일반 카드: 앞공정 양품 - 기접수합계 (재작업 카드 제외)
+      const totalAccepted = await pool.query(
+        `SELECT COALESCE(SUM(input_qty::int), 0) as total_input
          FROM work_order_process
-         WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3`,
-        [wo_id, prevSeq, companyCode]
+         WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
+           AND parent_process_id IS NOT NULL
+           AND (is_rework IS NULL OR is_rework != 'Y')`,
+        [wo_id, seq_no, companyCode]
       );
-      if (prevProcess.rowCount > 0) {
-        prevGoodQty = parseInt(prevProcess.rows[0].total_good, 10) || 0;
-      }
-    }
+      myInputQty = parseInt(totalAccepted.rows[0].total_input, 10) || 0;
 
-    const availableQty = Math.max(0, prevGoodQty - myInputQty);
+      prevGoodQty = instrQty;
+      if (seqNum > 1) {
+        const prevSeq = String(seqNum - 1);
+        const prevProcess = await pool.query(
+          `SELECT COALESCE(SUM(good_qty::int), 0) + COALESCE(SUM(concession_qty::int), 0) as total_good
+           FROM work_order_process
+           WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
+             AND parent_process_id IS NOT NULL`,
+          [wo_id, prevSeq, companyCode]
+        );
+        if (prevProcess.rowCount > 0) {
+          prevGoodQty = parseInt(prevProcess.rows[0].total_good, 10) || 0;
+        }
+      }
+      availableQty = Math.max(0, prevGoodQty - myInputQty);
+    }
 
     logger.info("[pop/production] available-qty 조회", {
       work_order_process_id,
@@ -1333,6 +1696,41 @@ export const getAvailableQty = async (req: AuthenticatedRequest, res: Response)
       instructionQty: instrQty,
     });
 
+    // 앞공정에서 리워크로 완료된 양품 수량 (마크 표시용)
+    // rework_source_id별로 개별 추적하여 정확한 미소진 리워크 수량 계산
+    let reworkAvailableQty = 0;
+    if (!isRework && seqNum > 1) {
+      const prevSeq = String(seqNum - 1);
+      // 앞공정의 리워크 완료 SPLIT들 (rework_source_id별)
+      const reworkSplits = await pool.query(
+        `SELECT rework_source_id, COALESCE(SUM(good_qty::int), 0) as rg
+         FROM work_order_process
+         WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
+           AND parent_process_id IS NOT NULL
+           AND is_rework = 'Y'
+           AND status = 'completed'
+           AND good_qty::int > 0
+         GROUP BY rework_source_id`,
+        [wo_id, prevSeq, companyCode]
+      );
+      // 현재 공정에서 각 rework_source_id별로 소비된 수량
+      for (const rs of reworkSplits.rows) {
+        const srcId = rs.rework_source_id;
+        const srcGood = parseInt(rs.rg, 10) || 0;
+        const consumedResult = await pool.query(
+          `SELECT COALESCE(SUM(input_qty::int), 0) as consumed
+           FROM work_order_process
+           WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
+             AND parent_process_id IS NOT NULL
+             AND is_rework = 'Y'
+             AND rework_source_id = $4`,
+          [wo_id, seq_no, companyCode, srcId]
+        );
+        const consumed = parseInt(consumedResult.rows[0]?.consumed, 10) || 0;
+        reworkAvailableQty += Math.max(0, srcGood - consumed);
+      }
+    }
+
     return res.json({
       success: true,
       data: {
@@ -1340,6 +1738,7 @@ export const getAvailableQty = async (req: AuthenticatedRequest, res: Response)
         myInputQty,
         availableQty,
         instructionQty: instrQty,
+        reworkAvailableQty,  // 리워크 물량 포함 수량
       },
     });
   } catch (error: any) {
@@ -1361,12 +1760,14 @@ export const getAvailableQty = async (req: AuthenticatedRequest, res: Response)
  */
 export const acceptProcess = async (req: AuthenticatedRequest, res: Response) => {
   const pool = getPool();
+  const client = await pool.connect();
   try {
     const companyCode = req.user!.companyCode;
     const userId = req.user!.userId;
     const { work_order_process_id, accept_qty } = req.body;
 
     if (!work_order_process_id || !accept_qty) {
+      client.release();
       return res.status(400).json({
         success: false,
         message: "work_order_process_id와 accept_qty가 필요합니다.",
@@ -1375,102 +1776,232 @@ export const acceptProcess = async (req: AuthenticatedRequest, res: Response) =>
 
     const qty = parseInt(accept_qty, 10);
     if (qty <= 0) {
+      client.release();
       return res.status(400).json({ success: false, message: "접수 수량은 1 이상이어야 합니다." });
     }
 
-    // 원본(마스터) 행 조회 - parent_process_id가 NULL인 행 또는 직접 지정된 행
-    const current = await pool.query(
+    await client.query("BEGIN");
+
+    // 원본(마스터) 행 조회 + FOR UPDATE (동시 접수 방지)
+    const current = await client.query(
       `SELECT wop.id, wop.seq_no, wop.wo_id, wop.status, wop.parent_process_id,
               wop.process_code, wop.process_name, wop.is_required, wop.is_fixed_order,
               wop.standard_time, wop.equipment_code, wop.routing_detail_id,
               wi.qty as instruction_qty
        FROM work_order_process wop
        JOIN work_instruction wi ON wop.wo_id = wi.id AND wop.company_code = wi.company_code
-       WHERE wop.id = $1 AND wop.company_code = $2`,
+       WHERE wop.id = $1 AND wop.company_code = $2
+       FOR UPDATE OF wop`,
       [work_order_process_id, companyCode]
     );
 
     if (current.rowCount === 0) {
+      await client.query("ROLLBACK");
+      client.release();
       return res.status(404).json({ success: false, message: "공정을 찾을 수 없습니다." });
     }
 
     const row = current.rows[0];
-    // 접수 대상은 원본(마스터) 행이어야 함
     const masterId = row.parent_process_id || row.id;
 
     if (row.status === "completed") {
+      await client.query("ROLLBACK");
+      client.release();
       return res.status(400).json({ success: false, message: "이미 완료된 공정입니다." });
     }
     if (row.status !== "acceptable") {
-      return res.status(400).json({ success: false, message: `원본 공정 상태(${row.status})에서는 접수할 수 없습니다. 접수가능 상태의 카드에서 접수해주세요.` });
+      await client.query("ROLLBACK");
+      client.release();
+      return res.status(400).json({ success: false, message: `원본 공정 상태(${row.status})에서는 접수할 수 없습니다.` });
     }
 
     const instrQty = parseInt(row.instruction_qty, 10) || 0;
     const seqNum = parseInt(row.seq_no, 10);
 
-    // 같은 공정(wo_id + seq_no)의 모든 분할 행 접수량 합산
-    const totalAccepted = await pool.query(
-      `SELECT COALESCE(SUM(input_qty::int), 0) as total_input
-       FROM work_order_process
-       WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
-         AND parent_process_id IS NOT NULL`,
-      [row.wo_id, row.seq_no, companyCode]
+    // 재작업 카드 여부 확인
+    const isReworkCard = await client.query(
+      `SELECT is_rework, input_qty FROM work_order_process WHERE id = $1`,
+      [work_order_process_id]
     );
-    const currentTotalInput = totalAccepted.rows[0].total_input;
+    const isRework = isReworkCard.rows[0]?.is_rework === "Y";
+    const reworkInputQty = parseInt(isReworkCard.rows[0]?.input_qty, 10) || 0;
 
-    // 앞공정 양품+특채 합산
-    let prevGoodQty = instrQty;
-    if (seqNum > 1) {
-      const prevSeq = String(seqNum - 1);
-      const prevProcess = await pool.query(
-        `SELECT COALESCE(SUM(good_qty::int), 0) + COALESCE(SUM(concession_qty::int), 0) as total_good
+    let prevGoodQty: number;
+    let currentTotalInput: number;
+    let availableQty: number;
+
+    if (isRework) {
+      // 재작업 카드: 자체 input_qty가 접수 가능 수량 (앞공정과 무관)
+      prevGoodQty = reworkInputQty;
+      currentTotalInput = 0; // 재작업 카드는 자체가 마스터, 분할 행 없음
+      availableQty = reworkInputQty;
+    } else {
+      // 일반 카드: 앞공정 양품 - 기접수합계
+      const totalAccepted = await client.query(
+        `SELECT COALESCE(SUM(input_qty::int), 0) as total_input
          FROM work_order_process
-         WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3`,
-        [row.wo_id, prevSeq, companyCode]
+         WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
+           AND parent_process_id IS NOT NULL
+           AND (is_rework IS NULL OR is_rework != 'Y')`,
+        [row.wo_id, row.seq_no, companyCode]
       );
-      if (prevProcess.rowCount > 0) {
-        prevGoodQty = parseInt(prevProcess.rows[0].total_good, 10) || 0;
+      currentTotalInput = parseInt(totalAccepted.rows[0].total_input, 10) || 0;
+
+      prevGoodQty = instrQty;
+      if (seqNum > 1) {
+        const prevSeq = String(seqNum - 1);
+        const prevProcess = await client.query(
+          `SELECT COALESCE(SUM(good_qty::int), 0) + COALESCE(SUM(concession_qty::int), 0) as total_good
+           FROM work_order_process
+           WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
+             AND parent_process_id IS NOT NULL`,
+          [row.wo_id, prevSeq, companyCode]
+        );
+        if (prevProcess.rowCount > 0) {
+          prevGoodQty = parseInt(prevProcess.rows[0].total_good, 10) || 0;
+        }
       }
+      availableQty = prevGoodQty - currentTotalInput;
     }
 
-    const availableQty = prevGoodQty - currentTotalInput;
     if (qty > availableQty) {
+      await client.query("ROLLBACK");
+      client.release();
       return res.status(400).json({
         success: false,
         message: `접수가능량(${availableQty})을 초과합니다. (앞공정 완료: ${prevGoodQty}, 기접수합계: ${currentTotalInput})`,
       });
     }
 
-    // 분할 행 INSERT (원본 행에서 공정 정보 복사)
-    const result = await pool.query(
-      `INSERT INTO work_order_process (
-        id, wo_id, seq_no, process_code, process_name, is_required, is_fixed_order,
+    // batch_id: 컬럼이 있으면 포함, 없으면 제외
+    const batchId = req.body.batch_id || `BATCH-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+    const hasBatchCol = _batchMigrationDone;
+
+    // 리워크 정보 전달: 리워크 카드 접수 / 프론트 전달 / 자동 감지
+    let splitIsRework: string | null = null;
+    let splitReworkSourceId: string | null = null;
+
+    if (isRework) {
+      // 케이스 1: 리워크 카드에서 직접 접수
+      const parentReworkInfo = await client.query(
+        `SELECT is_rework, rework_source_id FROM work_order_process WHERE id = $1`, [work_order_process_id]
+      );
+      splitIsRework = parentReworkInfo?.rows[0]?.is_rework || null;
+      splitReworkSourceId = parentReworkInfo?.rows[0]?.rework_source_id || null;
+    } else if (req.body.rework_source_id) {
+      // 케이스 2: 프론트에서 리워크 추적 정보 전달
+      splitIsRework = "Y";
+      splitReworkSourceId = req.body.rework_source_id;
+    } else if (seqNum > 1) {
+      // 케이스 3: 자동 감지 — 앞공정에서 리워크로 완료된 양품이 있는지 확인
+      const prevSeq = String(seqNum - 1);
+      // rework_source_id별로 개별 추적
+      const prevReworkSplits = await client.query(
+        `SELECT rework_source_id, COALESCE(SUM(good_qty::int), 0) as rework_good
+         FROM work_order_process
+         WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
+           AND parent_process_id IS NOT NULL
+           AND is_rework = 'Y'
+           AND status = 'completed'
+           AND good_qty::int > 0
+         GROUP BY rework_source_id`,
+        [row.wo_id, prevSeq, companyCode]
+      );
+
+      // 각 rework_source별로 미소진 수량 확인
+      for (const rs of prevReworkSplits.rows) {
+        const srcId = rs.rework_source_id;
+        const srcGood = parseInt(rs.rework_good, 10) || 0;
+        const consumedResult = await client.query(
+          `SELECT COALESCE(SUM(input_qty::int), 0) as consumed
+           FROM work_order_process
+           WHERE wo_id = $1 AND seq_no = $2 AND company_code = $3
+             AND parent_process_id IS NOT NULL
+             AND is_rework = 'Y'
+             AND rework_source_id = $4`,
+          [row.wo_id, row.seq_no, companyCode, srcId]
+        );
+        const consumed = parseInt(consumedResult.rows[0]?.consumed, 10) || 0;
+        const remaining = srcGood - consumed;
+
+        if (remaining > 0 && qty <= remaining) {
+          // 합류 판정: 일반 물량이 있으면 합류(마크 없음), 없으면 마크 부착
+          const normalAvailable = availableQty - remaining;
+          if (normalAvailable <= 0) {
+            // 일반 물량 없음 → 합류 불가 → 리워크 마크
+            splitIsRework = "Y";
+            splitReworkSourceId = srcId;
+          }
+          // normalAvailable > 0 → 합류 가능 → 마크 없음 (splitIsRework = null)
+          break;
+        }
+      }
+    }
+
+    // 분할 행 INSERT (batch_id는 컬럼 존재 시에만, 리워크 정보 포함)
+    const reworkCols = splitIsRework ? ", is_rework, rework_source_id" : "";
+    const reworkVals = splitIsRework ? `, $${hasBatchCol ? 15 : 14}, $${hasBatchCol ? 16 : 15}` : "";
+    const reworkParams = splitIsRework ? [splitIsRework, splitReworkSourceId] : [];
+
+    const insertCols = `id, wo_id, seq_no, process_code, process_name, is_required, is_fixed_order,
         standard_time, equipment_code, routing_detail_id,
         status, input_qty, good_qty, defect_qty, total_production_qty,
         result_status, accepted_by, accepted_at, started_at,
-        parent_process_id, company_code, writer
-      ) VALUES (
-        gen_random_uuid()::text, $1, $2, $3, $4, $5, $6, $7, $8, $9,
+        parent_process_id, company_code, writer${hasBatchCol ? ", batch_id" : ""}${reworkCols}`;
+    const insertVals = `gen_random_uuid()::text, $1, $2, $3, $4, $5, $6, $7, $8, $9,
         'in_progress', $10, '0', '0', '0',
         'draft', $11, NOW()::text, NOW()::text,
-        $12, $13, $11
-      ) RETURNING id, input_qty, status, process_name, result_status, accepted_by`,
-      [
-        row.wo_id, row.seq_no, row.process_code, row.process_name,
-        row.is_required, row.is_fixed_order, row.standard_time,
-        row.equipment_code, row.routing_detail_id,
-        String(qty), userId, masterId, companyCode,
-      ]
+        $12, $13, $11${hasBatchCol ? ", $14" : ""}${reworkVals}`;
+    const insertParams = [
+      row.wo_id, row.seq_no, row.process_code, row.process_name,
+      row.is_required, row.is_fixed_order, row.standard_time,
+      row.equipment_code, row.routing_detail_id,
+      String(qty), userId, masterId, companyCode,
+      ...(hasBatchCol ? [batchId] : []),
+      ...reworkParams,
+    ];
+
+    const result = await client.query(
+      `INSERT INTO work_order_process (${insertCols}) VALUES (${insertVals})
+       RETURNING id, input_qty, status, process_name, result_status, accepted_by`,
+      insertParams
     );
 
-    // 분할 행에 체크리스트 복사 (마스터의 routing_detail_id 또는 마스터의 기존 체크리스트에서)
+    // 분할 행에 체크리스트 복사
     const splitId = result.rows[0].id;
     const checklistCount = await copyChecklistToSplit(
-      pool, masterId, splitId, row.routing_detail_id, companyCode, userId
+      client, masterId, splitId, row.routing_detail_id, companyCode, userId
     );
 
-    // 마스터는 항상 acceptable 유지 (completed 전환은 saveResult에서 처리)
-    const newTotalInput = currentTotalInput + qty;
+    // 마스터 행의 input_qty를 분할 합계로 갱신 (리워크 접수 시에는 마스터 input_qty 변경 안 함)
+    let newTotalInput = currentTotalInput + qty;
+    if (!isRework) {
+      await client.query(
+        `UPDATE work_order_process SET input_qty = $3, updated_date = NOW()
+         WHERE id = $1 AND company_code = $2`,
+        [masterId, companyCode, String(newTotalInput)]
+      );
+    } else {
+      newTotalInput = currentTotalInput; // 리워크는 기존 합계 유지
+      // 리워크 카드: 전량 접수 시에만 이 카드만 completed로 변경
+      // (다른 리워크 카드에 영향 없도록 id 정확히 지정)
+      const reworkAlreadyAccepted = await client.query(
+        `SELECT COALESCE(SUM(input_qty::int), 0) as total
+         FROM work_order_process
+         WHERE parent_process_id = $1 AND company_code = $2`,
+        [work_order_process_id, companyCode]
+      );
+      const totalReworkAccepted = (parseInt(reworkAlreadyAccepted.rows[0]?.total, 10) || 0) + qty;
+      if (totalReworkAccepted >= reworkInputQty) {
+        await client.query(
+          `UPDATE work_order_process SET status = 'completed', updated_date = NOW()
+           WHERE id = $1 AND company_code = $2`,
+          [work_order_process_id, companyCode]
+        );
+      }
+    }
+
+    await client.query("COMMIT");
 
     logger.info("[pop/production] accept-process 분할 접수 완료", {
       companyCode, userId, masterId,
@@ -1481,17 +2012,26 @@ export const acceptProcess = async (req: AuthenticatedRequest, res: Response) =>
       checklistCount,
     });
 
+    const acceptData = result.rows[0] || {};
+    if (splitReworkSourceId) {
+      acceptData.rework_source_id = splitReworkSourceId;
+      acceptData.is_rework = splitIsRework;
+    }
+
     return res.json({
       success: true,
-      data: result.rows[0],
+      data: acceptData,
       message: `${qty}개 접수 완료 (총 접수합계: ${newTotalInput})`,
     });
   } catch (error: any) {
+    await client.query("ROLLBACK").catch(() => {});
     logger.error("[pop/production] accept-process 오류:", error);
     return res.status(500).json({
       success: false,
       message: error.message || "접수 중 오류가 발생했습니다.",
     });
+  } finally {
+    client.release();
   }
 };
 
@@ -1519,7 +2059,8 @@ export const cancelAccept = async (
 
     const current = await pool.query(
       `SELECT id, status, input_qty, total_production_qty, result_status,
-              parent_process_id, wo_id, seq_no, process_name
+              parent_process_id, wo_id, seq_no, process_name,
+              target_warehouse_id, target_location_code, good_qty, concession_qty
        FROM work_order_process
        WHERE id = $1 AND company_code = $2`,
       [work_order_process_id, companyCode]
@@ -1558,32 +2099,87 @@ export const cancelAccept = async (
     }
 
     let cancelledQty = unproducedQty;
+    const client = await pool.connect();
 
-    if (totalProduced === 0) {
-      // 실적이 없으면 분할 행 완전 삭제
-      await pool.query(
-        `DELETE FROM work_order_process WHERE id = $1 AND company_code = $2`,
-        [work_order_process_id, companyCode]
+    try {
+      await client.query("BEGIN");
+
+      if (totalProduced === 0) {
+        // 실적이 없으면 체크리스트 먼저 삭제 → 분할 행 삭제
+        await client.query(
+          `DELETE FROM process_work_result WHERE work_order_process_id = $1 AND company_code = $2`,
+          [work_order_process_id, companyCode]
+        );
+        await client.query(
+          `DELETE FROM work_order_process WHERE id = $1 AND company_code = $2`,
+          [work_order_process_id, companyCode]
+        );
+      } else {
+        // 실적이 있으면 input_qty를 실적 수량으로 축소 + completed
+        await client.query(
+          `UPDATE work_order_process
+           SET input_qty = $3, status = 'completed', result_status = 'confirmed',
+               completed_at = NOW()::text, completed_by = $4,
+               updated_date = NOW(), writer = $4
+           WHERE id = $1 AND company_code = $2`,
+          [work_order_process_id, companyCode, String(totalProduced), userId]
+        );
+      }
+
+      // 재고 원복: 분할 행에 target_warehouse_id가 있으면 입고된 수량을 차감
+      if (proc.target_warehouse_id) {
+        const inboundQty = parseInt(proc.good_qty || "0", 10) + parseInt(proc.concession_qty || "0", 10);
+        if (inboundQty > 0) {
+          // work_instruction에서 item_id 조회
+          const wiResult = await client.query(
+            `SELECT item_id FROM work_instruction WHERE id = $1 AND company_code = $2`,
+            [proc.wo_id, companyCode]
+          );
+          if (wiResult.rowCount > 0) {
+            const itemResult = await client.query(
+              `SELECT item_number FROM item_info WHERE id = $1 AND company_code = $2`,
+              [wiResult.rows[0].item_id, companyCode]
+            );
+            if (itemResult.rowCount > 0) {
+              const itemCode = itemResult.rows[0].item_number;
+              const locCode = proc.target_location_code || proc.target_warehouse_id;
+              await client.query(
+                `UPDATE inventory_stock
+                 SET current_qty = GREATEST((COALESCE(current_qty::numeric, 0) - $4::numeric), 0)::text,
+                     updated_date = NOW(), writer = $5
+                 WHERE company_code = $1 AND item_code = $2
+                   AND warehouse_code = $3 AND location_code = $6`,
+                [companyCode, itemCode, proc.target_warehouse_id, String(inboundQty), userId, locCode]
+              );
+            }
+          }
+        }
+      }
+
+      // 마스터 행의 input_qty를 분할 합계로 재계산
+      const remainingSplits = await client.query(
+        `SELECT COALESCE(SUM(input_qty::int), 0) as total_input
+         FROM work_order_process
+         WHERE parent_process_id = $1 AND company_code = $2`,
+        [proc.parent_process_id, companyCode]
       );
-    } else {
-      // 실적이 있으면 input_qty를 실적 수량으로 축소 + 접수분 전량 생산이므로 completed
-      await pool.query(
+      const newMasterInput = parseInt(remainingSplits.rows[0].total_input, 10) || 0;
+
+      // 원본(마스터) 행: input_qty 복원 + acceptable 상태 유지
+      await client.query(
         `UPDATE work_order_process
-         SET input_qty = $3, status = 'completed', result_status = 'confirmed',
-             completed_at = NOW()::text, completed_by = $4,
-             updated_date = NOW(), writer = $4
-         WHERE id = $1 AND company_code = $2`,
-        [work_order_process_id, companyCode, String(totalProduced), userId]
+         SET status = 'acceptable', input_qty = $3, updated_date = NOW()
+         WHERE id = $1 AND company_code = $2 AND parent_process_id IS NULL`,
+        [proc.parent_process_id, companyCode, String(newMasterInput)]
       );
-    }
 
-    // 원본(마스터) 행을 다시 acceptable로 복원 (잔여 접수 가능하도록)
-    await pool.query(
-      `UPDATE work_order_process
-       SET status = 'acceptable', updated_date = NOW()
-       WHERE id = $1 AND company_code = $2 AND parent_process_id IS NULL`,
-      [proc.parent_process_id, companyCode]
-    );
+      await client.query("COMMIT");
+    } catch (txErr) {
+      await client.query("ROLLBACK");
+      throw txErr;
+    } finally {
+      client.release();
+    }
 
     logger.info("[pop/production] cancel-accept 완료 (분할 행)", {
       companyCode, userId, work_order_process_id,
@@ -1608,354 +2204,850 @@ export const cancelAccept = async (
   }
 };
 
-// ========================================
-// POP 전용 함수 (PC 코드와 분리)
-// ========================================
+/**
+ * 창고 목록 조회 (POP 생산용)
+ */
+export const getWarehouses = async (
+  req: AuthenticatedRequest,
+  res: Response
+) => {
+  const pool = getPool();
+  try {
+    const companyCode = req.user!.companyCode;
+    const result = await pool.query(
+      `SELECT id, warehouse_code, warehouse_name, warehouse_type
+       FROM warehouse_info
+       WHERE company_code = $1 AND COALESCE(status, '') != '삭제'
+       ORDER BY warehouse_name`,
+      [companyCode]
+    );
+    return res.json({ success: true, data: result.rows });
+  } catch (error: any) {
+    logger.error("[pop/production] 창고 목록 조회 실패:", error);
+    return res.status(500).json({ success: false, message: error.message });
+  }
+};
 
 /**
- * 내부 헬퍼: 단일 작업지시에 대해 work_order_process + process_work_result 일괄 생성
- * syncWorkInstructions에서 사용한다.
+ * 특정 창고의 위치(로케이션) 목록 조회
+ * warehouseId는 warehouse_info.id → warehouse_code를 조회해서 warehouse_location과 매칭
  */
-async function generateWorkProcessesForInstruction(
-  client: { query: (text: string, values?: any[]) => Promise<any> },
-  workInstructionId: string,
-  routingVersionId: string,
-  planQty: string | null,
-  companyCode: string,
-  userId: string
-): Promise<{
-  processes: Array<{ id: string; seq_no: string; process_name: string; checklist_count: number }>;
-  total_checklists: number;
-} | null> {
-  const existCheck = await client.query(
-    `SELECT COUNT(*) as cnt FROM work_order_process
-     WHERE wo_id = $1 AND company_code = $2`,
-    [workInstructionId, companyCode]
-  );
-  if (parseInt(existCheck.rows[0].cnt, 10) > 0) {
-    return null;
-  }
+export const getWarehouseLocations = async (
+  req: AuthenticatedRequest,
+  res: Response
+) => {
+  const pool = getPool();
+  try {
+    const companyCode = req.user!.companyCode;
+    const { warehouseId } = req.params;
+    if (!warehouseId) {
+      return res.status(400).json({ success: false, message: "warehouseId는 필수입니다." });
+    }
 
-  const routingDetails = await client.query(
-    `SELECT rd.id, rd.seq_no, rd.process_code,
-            COALESCE(pm.process_name, rd.process_code) as process_name,
-            rd.is_required, rd.is_fixed_order, rd.standard_time
-     FROM item_routing_detail rd
-     LEFT JOIN process_mng pm ON pm.process_code = rd.process_code
-       AND pm.company_code = rd.company_code
-     WHERE rd.routing_version_id = $1 AND rd.company_code = $2
-     ORDER BY CAST(rd.seq_no AS int) NULLS LAST`,
-    [routingVersionId, companyCode]
-  );
-
-  if (routingDetails.rows.length === 0) {
-    return null;
-  }
-
-  const processes: Array<{
-    id: string; seq_no: string; process_name: string; checklist_count: number;
-  }> = [];
-  let totalChecklists = 0;
-
-  for (const rd of routingDetails.rows) {
-    const wopResult = await client.query(
-      `INSERT INTO work_order_process (
-        id, company_code, wo_id, seq_no, process_code, process_name,
-        is_required, is_fixed_order, standard_time, plan_qty,
-        status, routing_detail_id, writer
-      ) VALUES (gen_random_uuid()::text, $1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
-      RETURNING id`,
-      [
-        companyCode, workInstructionId, rd.seq_no, rd.process_code, rd.process_name,
-        rd.is_required, rd.is_fixed_order, rd.standard_time, planQty || null,
-        parseInt(rd.seq_no, 10) === 1 ? "acceptable" : "waiting", rd.id, userId,
-      ]
+    // warehouse_info.id → warehouse_code 변환
+    const whInfo = await pool.query(
+      `SELECT warehouse_code FROM warehouse_info WHERE id = $1 AND company_code = $2`,
+      [warehouseId, companyCode]
     );
-    const wopId = wopResult.rows[0].id;
+    if (whInfo.rowCount === 0) {
+      return res.json({ success: true, data: [] });
+    }
+    const warehouseCode = whInfo.rows[0].warehouse_code;
 
-    const checklistCount = await copyChecklistToSplit(
-      client, wopId, wopId, rd.id, companyCode, userId
+    const result = await pool.query(
+      `SELECT id, location_code, location_name
+       FROM warehouse_location
+       WHERE warehouse_code = $1 AND company_code = $2
+       ORDER BY location_name`,
+      [warehouseCode, companyCode]
     );
-    totalChecklists += checklistCount;
+    return res.json({ success: true, data: result.rows });
+  } catch (error: any) {
+    logger.error("[pop/production] 창고 위치 조회 실패:", error);
+    return res.status(500).json({ success: false, message: error.message });
+  }
+};
 
-    processes.push({
-      id: wopId, seq_no: rd.seq_no, process_name: rd.process_name, checklist_count: checklistCount,
+/**
+ * 마지막 공정 여부 확인
+ * 같은 wo_id에서 현재 seq_no보다 큰 공정(마스터 행)이 없으면 마지막
+ */
+export const isLastProcess = async (
+  req: AuthenticatedRequest,
+  res: Response
+) => {
+  const pool = getPool();
+  try {
+    const companyCode = req.user!.companyCode;
+    const { processId } = req.params;
+    if (!processId) {
+      return res.json({ success: true, data: { isLast: false } });
+    }
+
+    // 현재 공정의 wo_id와 seq_no 조회 (분할 행이면 parent의 seq_no 기준)
+    const process = await pool.query(
+      `SELECT wo_id, seq_no, parent_process_id
+       FROM work_order_process
+       WHERE id = $1 AND company_code = $2`,
+      [processId, companyCode]
+    );
+    if (process.rowCount === 0) {
+      return res.json({ success: true, data: { isLast: false } });
+    }
+
+    const { wo_id, seq_no, parent_process_id } = process.rows[0];
+
+    // 분할 행이면 마스터의 seq_no 기준으로 판단
+    let effectiveSeqNo = seq_no;
+    if (parent_process_id) {
+      const master = await pool.query(
+        `SELECT seq_no FROM work_order_process WHERE id = $1 AND company_code = $2`,
+        [parent_process_id, companyCode]
+      );
+      if (master.rowCount > 0) {
+        effectiveSeqNo = master.rows[0].seq_no;
+      }
+    }
+
+    const next = await pool.query(
+      `SELECT id FROM work_order_process
+       WHERE wo_id = $1 AND company_code = $2
+         AND CAST(seq_no AS int) > CAST($3 AS int)
+         AND parent_process_id IS NULL
+       LIMIT 1`,
+      [wo_id, companyCode, effectiveSeqNo]
+    );
+
+    // 현재 공정의 기존 창고 설정도 반환 (기본값 세팅용)
+    const warehouseInfo = await pool.query(
+      `SELECT target_warehouse_id, target_location_code
+       FROM work_order_process
+       WHERE id = $1 AND company_code = $2`,
+      [processId, companyCode]
+    );
+
+    return res.json({
+      success: true,
+      data: {
+        isLast: next.rowCount === 0,
+        woId: wo_id,
+        seqNo: effectiveSeqNo,
+        targetWarehouseId: warehouseInfo.rows[0]?.target_warehouse_id || null,
+        targetLocationCode: warehouseInfo.rows[0]?.target_location_code || null,
+      },
     });
+  } catch (error: any) {
+    logger.error("[pop/production] 마지막 공정 확인 오류:", error);
+    return res.status(500).json({ success: false, message: error.message });
   }
-
-  return { processes, total_checklists: totalChecklists };
-}
+};
 
 /**
- * POP: 미동기화 작업지시 일괄 동기화
+ * 공정의 목표 창고/위치 업데이트
+ * 마지막 공정 완료 전 또는 완료 후 창고를 지정한다.
+ * 마스터 행에 저장하여 checkAndCompleteWorkInstruction이 참조할 수 있도록 한다.
  */
-export const syncWorkInstructions = async (
+export const updateTargetWarehouse = async (
   req: AuthenticatedRequest,
   res: Response
 ) => {
-  const pool = getPool();
-  try {
-    const companyCode = req.user!.companyCode;
-    const userId = req.user!.userId;
-    const unsyncedResult = await pool.query(
-      `SELECT wi.id, wi.work_instruction_no, wi.routing, wi.qty
-       FROM work_instruction wi
-       WHERE wi.company_code = $1
-         AND wi.routing IS NOT NULL
-         AND NOT EXISTS (
-           SELECT 1 FROM work_order_process wop
-           WHERE wop.wo_id = wi.id AND wop.company_code = $1
-         )`,
-      [companyCode]
-    );
-    const unsynced = unsyncedResult.rows;
-    if (unsynced.length === 0) {
-      return res.json({ success: true, data: { synced: 0, skipped: 0, errors: 0, details: [] } });
-    }
-    let synced = 0, skipped = 0, errors = 0;
-    const details: Array<{
-      work_instruction_id: string; work_instruction_no: string;
-      status: "synced" | "skipped" | "error"; process_count?: number; error?: string;
-    }> = [];
-    for (const wi of unsynced) {
-      const client = await pool.connect();
-      try {
-        await client.query("BEGIN");
-        const result = await generateWorkProcessesForInstruction(
-          client, wi.id, wi.routing, wi.qty || null, companyCode, userId
-        );
-        if (!result) {
-          await client.query("ROLLBACK");
-          skipped++;
-          details.push({ work_instruction_id: wi.id, work_instruction_no: wi.work_instruction_no, status: "skipped" });
-          continue;
-        }
-        await client.query("COMMIT");
-        synced++;
-        details.push({
-          work_instruction_id: wi.id, work_instruction_no: wi.work_instruction_no,
-          status: "synced", process_count: result.processes.length,
-        });
-      } catch (err: any) {
-        await client.query("ROLLBACK");
-        errors++;
-        details.push({
-          work_instruction_id: wi.id, work_instruction_no: wi.work_instruction_no,
-          status: "error", error: err.message || "알 수 없는 오류",
-        });
-      } finally {
-        client.release();
-      }
-    }
-    return res.json({ success: true, data: { synced, skipped, errors, details } });
-  } catch (error: any) {
-    logger.error("[pop/production] sync-work-instructions 오류:", error);
-    return res.status(500).json({ success: false, message: error.message || "동기화 오류" });
-  }
-};
-
-export const getWarehouses = async (req: AuthenticatedRequest, res: Response) => {
-  const pool = getPool();
-  try {
-    const companyCode = req.user!.companyCode;
-    const result = await pool.query(
-      `SELECT id, warehouse_code, warehouse_name, warehouse_type
-       FROM warehouse_info WHERE company_code = $1 AND COALESCE(status, '') != '삭제' ORDER BY warehouse_name`,
-      [companyCode]
-    );
-    return res.json({ success: true, data: result.rows });
-  } catch (error: any) {
-    return res.status(500).json({ success: false, message: error.message });
-  }
-};
-
-export const getWarehouseLocations = async (req: AuthenticatedRequest, res: Response) => {
-  const pool = getPool();
-  try {
-    const companyCode = req.user!.companyCode;
-    const { warehouseId } = req.params;
-    if (!warehouseId) return res.status(400).json({ success: false, message: "warehouseId 필수" });
-    const whInfo = await pool.query(
-      `SELECT warehouse_code FROM warehouse_info WHERE id = $1 AND company_code = $2`,
-      [warehouseId, companyCode]
-    );
-    if (whInfo.rowCount === 0) return res.json({ success: true, data: [] });
-    const result = await pool.query(
-      `SELECT id, location_code, location_name FROM warehouse_location
-       WHERE warehouse_code = $1 AND company_code = $2 ORDER BY location_name`,
-      [whInfo.rows[0].warehouse_code, companyCode]
-    );
-    return res.json({ success: true, data: result.rows });
-  } catch (error: any) {
-    return res.status(500).json({ success: false, message: error.message });
-  }
-};
-
-export const isLastProcess = async (req: AuthenticatedRequest, res: Response) => {
-  const pool = getPool();
-  try {
-    const companyCode = req.user!.companyCode;
-    const { processId } = req.params;
-    if (!processId) return res.json({ success: true, data: { isLast: false } });
-    const process = await pool.query(
-      `SELECT wo_id, seq_no, parent_process_id FROM work_order_process WHERE id = $1 AND company_code = $2`,
-      [processId, companyCode]
-    );
-    if (process.rowCount === 0) return res.json({ success: true, data: { isLast: false } });
-    const { wo_id, seq_no, parent_process_id } = process.rows[0];
-    let effectiveSeqNo = seq_no;
-    if (parent_process_id) {
-      const master = await pool.query(
-        `SELECT seq_no FROM work_order_process WHERE id = $1 AND company_code = $2`,
-        [parent_process_id, companyCode]
-      );
-      if (master.rowCount > 0) effectiveSeqNo = master.rows[0].seq_no;
-    }
-    const next = await pool.query(
-      `SELECT id FROM work_order_process
-       WHERE wo_id = $1 AND company_code = $2 AND CAST(seq_no AS int) > CAST($3 AS int) AND parent_process_id IS NULL LIMIT 1`,
-      [wo_id, companyCode, effectiveSeqNo]
-    );
-    const warehouseInfo = await pool.query(
-      `SELECT target_warehouse_id, target_location_code FROM work_order_process WHERE id = $1 AND company_code = $2`,
-      [processId, companyCode]
-    );
-    return res.json({
-      success: true,
-      data: {
-        isLast: next.rowCount === 0, woId: wo_id, seqNo: effectiveSeqNo,
-        targetWarehouseId: warehouseInfo.rows[0]?.target_warehouse_id || null,
-        targetLocationCode: warehouseInfo.rows[0]?.target_location_code || null,
-      },
-    });
-  } catch (error: any) {
-    return res.status(500).json({ success: false, message: error.message });
-  }
-};
-
-export const updateTargetWarehouse = async (req: AuthenticatedRequest, res: Response) => {
   const pool = getPool();
   try {
     const companyCode = req.user!.companyCode;
     const userId = req.user!.userId;
     const { work_order_process_id, target_warehouse_id, target_location_code } = req.body;
-    if (!work_order_process_id || !target_warehouse_id)
-      return res.status(400).json({ success: false, message: "work_order_process_id와 target_warehouse_id 필수" });
+
+    if (!work_order_process_id || !target_warehouse_id) {
+      return res.status(400).json({
+        success: false,
+        message: "work_order_process_id와 target_warehouse_id는 필수입니다.",
+      });
+    }
+
+    // 분할 행이면 마스터 행도 함께 업데이트
     const procInfo = await pool.query(
       `SELECT parent_process_id FROM work_order_process WHERE id = $1 AND company_code = $2`,
       [work_order_process_id, companyCode]
     );
+
     const idsToUpdate = [work_order_process_id];
-    if (procInfo.rowCount > 0 && procInfo.rows[0].parent_process_id) idsToUpdate.push(procInfo.rows[0].parent_process_id);
+    if (procInfo.rowCount > 0 && procInfo.rows[0].parent_process_id) {
+      idsToUpdate.push(procInfo.rows[0].parent_process_id);
+    }
+
     for (const id of idsToUpdate) {
       await pool.query(
-        `UPDATE work_order_process SET target_warehouse_id = $3, target_location_code = $4, writer = $5, updated_date = NOW()
+        `UPDATE work_order_process
+         SET target_warehouse_id = $3,
+             target_location_code = $4,
+             writer = $5,
+             updated_date = NOW()
          WHERE id = $1 AND company_code = $2`,
         [id, companyCode, target_warehouse_id, target_location_code || null, userId]
       );
     }
+
+    logger.info("[pop/production] 목표 창고 업데이트", {
+      companyCode, userId, work_order_process_id,
+      target_warehouse_id, target_location_code,
+      updatedIds: idsToUpdate,
+    });
+
     return res.json({ success: true, data: { target_warehouse_id, target_location_code } });
   } catch (error: any) {
+    logger.error("[pop/production] 목표 창고 업데이트 오류:", error);
     return res.status(500).json({ success: false, message: error.message });
   }
 };
 
-export const inventoryInbound = async (req: AuthenticatedRequest, res: Response) => {
+/**
+ * 독립 재고 입고 API
+ * 창고 저장 + inventory_stock UPSERT를 한 번에 수행한다.
+ * 실적(save-result) 완료 후 나중에 창고를 선택해도 재고가 들어가도록 분리.
+ * 이중 입고 방지: target_warehouse_id가 이미 설정된 경우 "이미 입고됨" 반환.
+ */
+export const inventoryInbound = async (
+  req: AuthenticatedRequest,
+  res: Response
+) => {
   const pool = getPool();
   const client = await pool.connect();
+
   try {
     const companyCode = req.user!.companyCode;
     const userId = req.user!.userId;
     const { work_order_process_id, warehouse_code, location_code } = req.body;
-    if (!work_order_process_id || !warehouse_code)
-      return res.status(400).json({ success: false, message: "work_order_process_id와 warehouse_code 필수" });
+
+    if (!work_order_process_id || !warehouse_code) {
+      return res.status(400).json({
+        success: false,
+        message: "work_order_process_id와 warehouse_code는 필수입니다.",
+      });
+    }
+
     await client.query("BEGIN");
+
+    // 1. work_order_process에서 wo_id, good_qty, parent_process_id, 기존 target_warehouse_id 조회
     const procResult = await client.query(
-      `SELECT wo_id, good_qty, concession_qty, parent_process_id, target_warehouse_id FROM work_order_process WHERE id = $1 AND company_code = $2`,
+      `SELECT wo_id, good_qty, concession_qty, parent_process_id, target_warehouse_id, seq_no, is_rework
+       FROM work_order_process
+       WHERE id = $1 AND company_code = $2`,
       [work_order_process_id, companyCode]
     );
-    if (procResult.rowCount === 0) { await client.query("ROLLBACK"); return res.status(404).json({ success: false, message: "공정 없음" }); }
+
+    if (procResult.rowCount === 0) {
+      await client.query("ROLLBACK");
+      return res.status(404).json({
+        success: false,
+        message: "해당 공정을 찾을 수 없습니다.",
+      });
+    }
+
     const proc = procResult.rows[0];
-    if (proc.target_warehouse_id) { await client.query("ROLLBACK"); return res.status(409).json({ success: false, message: "이미 입고 완료" }); }
+
+    // 이중 입고 방지: 이미 target_warehouse_id가 설정되어 있으면 거부
+    if (proc.target_warehouse_id) {
+      await client.query("ROLLBACK");
+      return res.status(409).json({
+        success: false,
+        message: "이미 재고 입고가 완료된 공정입니다.",
+        data: { existing_warehouse: proc.target_warehouse_id },
+      });
+    }
+
     const goodQty = parseInt(proc.good_qty || "0", 10) + parseInt(proc.concession_qty || "0", 10);
-    if (goodQty <= 0) { await client.query("ROLLBACK"); return res.status(400).json({ success: false, message: "양품 0" }); }
-    const wiResult = await client.query(`SELECT item_id FROM work_instruction WHERE id = $1 AND company_code = $2`, [proc.wo_id, companyCode]);
-    if (wiResult.rowCount === 0) { await client.query("ROLLBACK"); return res.status(404).json({ success: false, message: "작업지시 없음" }); }
-    const itemResult = await client.query(`SELECT item_number FROM item_info WHERE id = $1 AND company_code = $2`, [wiResult.rows[0].item_id, companyCode]);
-    if (itemResult.rowCount === 0) { await client.query("ROLLBACK"); return res.status(404).json({ success: false, message: "품목 없음" }); }
-    const itemCode = itemResult.rows[0].item_number;
-    const locCode = location_code || warehouse_code;
-    await client.query(
-      `INSERT INTO inventory_stock (id, company_code, item_code, warehouse_code, location_code, current_qty, last_in_date, created_date, updated_date, writer)
-       VALUES (gen_random_uuid()::text, $1, $2, $3, $4, $5, NOW(), NOW(), NOW(), $6)
-       ON CONFLICT (company_code, item_code, warehouse_code, location_code)
-       DO UPDATE SET current_qty = (COALESCE(inventory_stock.current_qty::numeric, 0) + $5::numeric)::text,
-                     last_in_date = NOW(), updated_date = NOW(), writer = $6`,
-      [companyCode, itemCode, warehouse_code, locCode, String(goodQty), userId]
+
+    if (goodQty <= 0) {
+      await client.query("ROLLBACK");
+      return res.status(400).json({
+        success: false,
+        message: "양품 수량이 0이므로 재고 입고할 수 없습니다.",
+      });
+    }
+
+    // 2. work_instruction에서 item_id 조회
+    const wiResult = await client.query(
+      `SELECT item_id FROM work_instruction WHERE id = $1 AND company_code = $2`,
+      [proc.wo_id, companyCode]
     );
+
+    if (wiResult.rowCount === 0) {
+      await client.query("ROLLBACK");
+      return res.status(404).json({
+        success: false,
+        message: "작업지시를 찾을 수 없습니다.",
+      });
+    }
+
+    const itemId = wiResult.rows[0].item_id;
+
+    // 3. item_info에서 item_number 조회
+    const itemResult = await client.query(
+      `SELECT item_number FROM item_info WHERE id = $1 AND company_code = $2`,
+      [itemId, companyCode]
+    );
+
+    if (itemResult.rowCount === 0) {
+      await client.query("ROLLBACK");
+      return res.status(404).json({
+        success: false,
+        message: "품목 정보를 찾을 수 없습니다.",
+      });
+    }
+
+    const itemCode = itemResult.rows[0].item_number;
+    const effectiveLocationCode = location_code || null;
+
+    // 4. inventory_stock UPSERT (PC receivingController와 동일한 SELECT→INSERT/UPDATE 패턴)
+    await upsertInventoryStock(client, companyCode, itemCode, warehouse_code, effectiveLocationCode, goodQty, userId);
+
+    // 5. work_order_process에 target_warehouse_id 저장 (현재 행 + 마스터 행)
     const idsToUpdate = [work_order_process_id];
-    if (proc.parent_process_id) idsToUpdate.push(proc.parent_process_id);
+    if (proc.parent_process_id) {
+      idsToUpdate.push(proc.parent_process_id);
+    }
+
     for (const id of idsToUpdate) {
       await client.query(
-        `UPDATE work_order_process SET target_warehouse_id = $3, target_location_code = $4, writer = $5, updated_date = NOW() WHERE id = $1 AND company_code = $2`,
+        `UPDATE work_order_process
+         SET target_warehouse_id = $3,
+             target_location_code = $4,
+             writer = $5,
+             updated_date = NOW()
+         WHERE id = $1 AND company_code = $2`,
         [id, companyCode, warehouse_code, location_code || null, userId]
       );
     }
+
+    // 6. 리워크 마크 해제 (창고 입고 = 정상 제품 인정, 이력은 rework_source_id에 영구 보존)
+    if (proc.is_rework === "Y") {
+      await client.query(
+        `UPDATE work_order_process SET is_rework = NULL, updated_date = NOW()
+         WHERE id = $1 AND company_code = $2`,
+        [work_order_process_id, companyCode]
+      );
+    }
+
     await client.query("COMMIT");
-    return res.json({ success: true, message: "재고 입고 완료", data: { item_code: itemCode, warehouse_code, location_code: locCode, qty: goodQty } });
+
+    logger.info("[pop/production] 독립 재고 입고 완료", {
+      companyCode, userId, work_order_process_id,
+      itemCode, warehouse_code, location_code: effectiveLocationCode,
+      qty: goodQty,
+      reworkCleared: proc.is_rework === "Y",
+    });
+
+    return res.json({
+      success: true,
+      message: "재고 입고가 완료되었습니다.",
+      data: {
+        item_code: itemCode,
+        warehouse_code,
+        location_code: effectiveLocationCode,
+        qty: goodQty,
+      },
+    });
   } catch (error: any) {
     await client.query("ROLLBACK").catch(() => {});
+    logger.error("[pop/production] 독립 재고 입고 오류:", error);
     return res.status(500).json({ success: false, message: error.message });
-  } finally { client.release(); }
+  } finally {
+    client.release();
+  }
 };
 
-export const quickInventoryInbound = async (req: AuthenticatedRequest, res: Response) => {
+/**
+ * 간이 재고 입고 (공정 접수 없이 바로 입고)
+ * 품목 + 수량 + 창고만으로 inventory_stock UPSERT + inbound_mng 이력 기록
+ */
+export const quickInventoryInbound = async (
+  req: AuthenticatedRequest,
+  res: Response
+) => {
+  const pool = getPool();
+  const client = await pool.connect();
+
+  try {
+    const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
+    const { item_id, qty, warehouse_code, location_code, remark } = req.body;
+
+    // 필수 파라미터 검증
+    if (!item_id || !qty || !warehouse_code) {
+      return res.status(400).json({
+        success: false,
+        message: "item_id, qty, warehouse_code는 필수입니다.",
+      });
+    }
+
+    const parsedQty = parseInt(String(qty), 10);
+    if (isNaN(parsedQty) || parsedQty <= 0) {
+      return res.status(400).json({
+        success: false,
+        message: "수량은 1 이상의 정수여야 합니다.",
+      });
+    }
+
+    await client.query("BEGIN");
+
+    // 1. item_info에서 item_number, item_name 조회
+    const itemResult = await client.query(
+      `SELECT item_number, item_name, size, material, unit
+       FROM item_info WHERE id = $1 AND company_code = $2`,
+      [item_id, companyCode]
+    );
+
+    if (itemResult.rowCount === 0) {
+      await client.query("ROLLBACK");
+      return res.status(404).json({
+        success: false,
+        message: "품목 정보를 찾을 수 없습니다.",
+      });
+    }
+
+    const item = itemResult.rows[0];
+    const itemCode = item.item_number;
+    const effectiveLocationCode = location_code || null;
+
+    // 2. inventory_stock UPSERT (PC receivingController와 동일한 SELECT→INSERT/UPDATE 패턴)
+    await upsertInventoryStock(client, companyCode, itemCode, warehouse_code, effectiveLocationCode, parsedQty, userId);
+
+    // 3. inbound_mng에 간이입고 이력 기록
+    const seqResult = await client.query(
+      `SELECT COALESCE(MAX(
+        CASE WHEN inbound_number ~ '^QIB-[0-9]{4}-[0-9]+$'
+             THEN CAST(SUBSTRING(inbound_number FROM '[0-9]+$') AS INTEGER)
+             ELSE 0 END
+       ), 0) + 1 AS next_seq
+       FROM inbound_mng WHERE company_code = $1`,
+      [companyCode]
+    );
+    const nextSeq = seqResult.rows[0].next_seq;
+    const year = new Date().getFullYear();
+    const inboundNumber = `QIB-${year}-${String(nextSeq).padStart(4, "0")}`;
+
+    await client.query(
+      `INSERT INTO inbound_mng (
+        id, company_code, inbound_number, inbound_type, inbound_date,
+        item_number, item_name, spec, material, unit,
+        inbound_qty, warehouse_code, location_code,
+        inbound_status, memo, remark,
+        created_date, updated_date, writer, created_by, updated_by
+      ) VALUES (
+        gen_random_uuid()::text, $1, $2, '간이입고', CURRENT_DATE,
+        $3, $4, $5, $6, $7,
+        $8, $9, $10,
+        '완료', $11, $12,
+        NOW(), NOW(), $13, $13, $13
+      )`,
+      [
+        companyCode, inboundNumber,
+        item.item_number, item.item_name, item.size, item.material, item.unit,
+        parsedQty, warehouse_code, effectiveLocationCode,
+        remark || "POP 간이입고", remark || null,
+        userId,
+      ]
+    );
+
+    await client.query("COMMIT");
+
+    logger.info("[pop/production] 간이 재고 입고 완료", {
+      companyCode, userId, item_id,
+      itemCode, warehouse_code, location_code: effectiveLocationCode,
+      qty: parsedQty, inboundNumber,
+    });
+
+    return res.json({
+      success: true,
+      message: "간이 재고 입고가 완료되었습니다.",
+      data: {
+        inbound_number: inboundNumber,
+        item_code: itemCode,
+        item_name: item.item_name,
+        warehouse_code,
+        location_code: effectiveLocationCode,
+        qty: parsedQty,
+      },
+    });
+  } catch (error: any) {
+    await client.query("ROLLBACK").catch(() => {});
+    logger.error("[pop/production] 간이 재고 입고 오류:", error);
+    return res.status(500).json({ success: false, message: error.message });
+  } finally {
+    client.release();
+  }
+};
+
+/**
+ * 재작업 이력 조회
+ * 작업지시(wo_id) 기준으로 모든 재작업 체인을 반환한다.
+ * 원본 → 재작업1 → 재작업2 → ... 순서로 체인 추적.
+ */
+export const getReworkHistory = async (req: AuthenticatedRequest, res: Response) => {
+  const pool = getPool();
+  try {
+    const companyCode = req.user!.companyCode;
+    const woId = req.query.wo_id as string || req.params.woId;
+    if (!woId) {
+      return res.status(400).json({ success: false, message: "wo_id는 필수입니다." });
+    }
+
+    const result = await pool.query(
+      `SELECT id, seq_no, process_code, process_name, status,
+              input_qty, good_qty, defect_qty, concession_qty,
+              is_rework, rework_source_id, parent_process_id,
+              accepted_by, accepted_at, started_at, completed_at,
+              created_date
+       FROM work_order_process
+       WHERE wo_id = $1 AND company_code = $2
+         AND (is_rework = 'Y' OR is_rework = '1' OR defect_qty::int > 0 OR parent_process_id IS NOT NULL)
+       ORDER BY created_date ASC`,
+      [woId, companyCode]
+    );
+
+    // 체인 구성: rework_source_id를 따라 트리 구조
+    const rows = result.rows;
+    const byId: Record<string, typeof rows[0]> = {};
+    for (const r of rows) byId[r.id] = r;
+
+    const chains: Array<{
+      source: typeof rows[0];
+      reworks: typeof rows;
+      totalReworkCount: number;
+    }> = [];
+
+    // 원본 행(불량 발생한 것) 찾기
+    const reworkSourceIds = new Set(rows.filter(r => r.rework_source_id).map(r => r.rework_source_id));
+    const sources = rows.filter(r => reworkSourceIds.has(r.id) || (parseInt(r.defect_qty || "0", 10) > 0 && r.is_rework !== "Y"));
+
+    for (const src of sources) {
+      const chain: typeof rows = [];
+      const visited = new Set<string>();
+      // 이 소스에서 시작하는 재작업 체인 추적
+      const queue = rows.filter(r => r.rework_source_id === src.id);
+      while (queue.length > 0) {
+        const item = queue.shift()!;
+        if (visited.has(item.id)) continue;
+        visited.add(item.id);
+        chain.push(item);
+        // 이 재작업에서 또 재작업이 나온 것 찾기
+        const next = rows.filter(r => r.rework_source_id === item.id);
+        queue.push(...next);
+      }
+      chains.push({
+        source: src,
+        reworks: chain,
+        totalReworkCount: chain.length,
+      });
+    }
+
+    return res.json({
+      success: true,
+      data: {
+        wo_id: woId,
+        total_rework_count: rows.filter(r => r.is_rework === "Y" || r.is_rework === "1").length,
+        chains,
+        all_records: rows,
+      },
+    });
+  } catch (error: any) {
+    logger.error("[pop/production] rework-history 오류:", error);
+    return res.status(500).json({ success: false, message: error.message });
+  }
+};
+
+/**
+ * 공정별 BOM 자재 목록 + 소요량 계산
+ * work_order_process_id → item_code → bom + bom_detail 조회
+ */
+export const getBomMaterials = async (req: AuthenticatedRequest, res: Response) => {
+  const pool = getPool();
+  try {
+    const companyCode = req.user!.companyCode;
+    const { processId } = req.params;
+    if (!processId) {
+      return res.status(400).json({ success: false, message: "processId 필수" });
+    }
+
+    // 1. work_order_process → work_instruction → item_code, plan_qty
+    const procResult = await pool.query(
+      `SELECT wop.wo_id, wop.process_code, wop.input_qty, wop.plan_qty,
+              wi.item_id, wi.qty as instruction_qty
+       FROM work_order_process wop
+       JOIN work_instruction wi ON wop.wo_id = wi.id AND wop.company_code = wi.company_code
+       WHERE wop.id = $1 AND wop.company_code = $2`,
+      [processId, companyCode]
+    );
+    if (procResult.rowCount === 0) {
+      return res.json({ success: true, data: { materials: [], processQty: 0 } });
+    }
+    const proc = procResult.rows[0];
+    const processQty = parseInt(proc.input_qty || proc.plan_qty || proc.instruction_qty || "0", 10);
+
+    // 2. item_info → item_code (item_number)
+    const itemResult = await pool.query(
+      `SELECT item_number, item_name FROM item_info WHERE id = $1 AND company_code = $2`,
+      [proc.item_id, companyCode]
+    );
+    if (itemResult.rowCount === 0) {
+      return res.json({ success: true, data: { materials: [], processQty } });
+    }
+    const itemCode = itemResult.rows[0].item_number;
+
+    // 3. BOM 조회
+    const bomResult = await pool.query(
+      `SELECT bd.id, bd.child_item_id, bd.quantity, bd.unit, bd.process_type, bd.loss_rate,
+              i.item_name as child_item_name, i.item_number as child_item_code, i.unit as item_unit
+       FROM bom b
+       JOIN bom_detail bd ON b.id = bd.bom_id AND b.company_code = bd.company_code
+       LEFT JOIN item_info i ON bd.child_item_id = i.id AND i.company_code = b.company_code
+       WHERE (b.item_code = $1 OR b.item_id = $2) AND b.company_code = $3
+       ORDER BY bd.seq_no ASC`,
+      [itemCode, proc.item_id, companyCode]
+    );
+
+    // 4. 소요량 계산
+    const bomBase = await pool.query(
+      `SELECT base_qty FROM bom WHERE (item_code = $1 OR item_id = $2) AND company_code = $3 LIMIT 1`,
+      [itemCode, proc.item_id, companyCode]
+    );
+    const baseQty = parseFloat(bomBase.rows[0]?.base_qty || "1") || 1;
+
+    // 기존 투입량 조회 (item_code별 합산 — detail_content에 item_code 저장됨)
+    const inputResult = await pool.query(
+      `SELECT detail_content as item_code, SUM(CAST(NULLIF(result_value, '') AS numeric)) as total_input
+       FROM process_work_result
+       WHERE work_order_process_id = $1 AND company_code = $2 AND detail_type = 'material_input'
+         AND result_value IS NOT NULL AND result_value != ''
+       GROUP BY detail_content`,
+      [processId, companyCode]
+    );
+    const inputMap = new Map<string, number>();
+    for (const row of inputResult.rows) {
+      inputMap.set(String(row.item_code), parseFloat(row.total_input) || 0);
+    }
+
+    const materials = bomResult.rows.map((bd: Record<string, unknown>) => {
+      const bomQty = parseFloat(String(bd.quantity || "0")) || 0;
+      const lossRate = parseFloat(String(bd.loss_rate || "0")) || 0;
+      const requiredQty = Math.ceil((processQty / baseQty) * bomQty * (1 + lossRate / 100));
+      const childItemCode = String(bd.child_item_code || "");
+      return {
+        id: bd.id,
+        child_item_id: bd.child_item_id,
+        child_item_code: childItemCode,
+        child_item_name: bd.child_item_name || "",
+        bom_qty: bomQty,
+        unit: bd.unit || bd.item_unit || "",
+        process_type: bd.process_type || "",
+        loss_rate: lossRate,
+        required_qty: requiredQty,
+        input_qty: inputMap.get(childItemCode) || 0,
+      };
+    });
+
+    return res.json({
+      success: true,
+      data: { materials, processQty, baseQty, itemCode, itemName: itemResult.rows[0].item_name },
+    });
+  } catch (error: any) {
+    logger.error("[pop/production] bom-materials 오류:", error);
+    return res.status(500).json({ success: false, message: error.message });
+  }
+};
+
+/**
+ * 자재 투입 기록 저장
+ * BOM 기준과 다른 수량도 허용 (유동 투입)
+ */
+export const saveMaterialInput = async (req: AuthenticatedRequest, res: Response) => {
   const pool = getPool();
   const client = await pool.connect();
   try {
     const companyCode = req.user!.companyCode;
     const userId = req.user!.userId;
-    const { item_id, qty, warehouse_code, location_code, remark } = req.body;
-    if (!item_id || !qty || !warehouse_code)
-      return res.status(400).json({ success: false, message: "item_id, qty, warehouse_code 필수" });
-    const parsedQty = parseInt(String(qty), 10);
-    if (isNaN(parsedQty) || parsedQty <= 0)
-      return res.status(400).json({ success: false, message: "수량은 1 이상" });
+    const { work_order_process_id, inputs } = req.body;
+
+    if (!work_order_process_id || !inputs || !Array.isArray(inputs)) {
+      return res.status(400).json({ success: false, message: "work_order_process_id, inputs[] 필수" });
+    }
+
     await client.query("BEGIN");
-    const itemResult = await client.query(
-      `SELECT item_number, item_name, size, material, unit FROM item_info WHERE id = $1 AND company_code = $2`, [item_id, companyCode]
-    );
-    if (itemResult.rowCount === 0) { await client.query("ROLLBACK"); return res.status(404).json({ success: false, message: "품목 없음" }); }
-    const item = itemResult.rows[0];
-    const locCode = location_code || warehouse_code;
-    await client.query(
-      `INSERT INTO inventory_stock (id, company_code, item_code, warehouse_code, location_code, current_qty, last_in_date, created_date, updated_date, writer)
-       VALUES (gen_random_uuid()::text, $1, $2, $3, $4, $5, NOW(), NOW(), NOW(), $6)
-       ON CONFLICT (company_code, item_code, warehouse_code, location_code)
-       DO UPDATE SET current_qty = (COALESCE(inventory_stock.current_qty::numeric, 0) + $5::numeric)::text,
-                     last_in_date = NOW(), updated_date = NOW(), writer = $6`,
-      [companyCode, item.item_number, warehouse_code, locCode, String(parsedQty), userId]
-    );
-    const seqResult = await client.query(
-      `SELECT COALESCE(MAX(CASE WHEN inbound_number ~ '^QIB-[0-9]{4}-[0-9]+$'
-             THEN CAST(SUBSTRING(inbound_number FROM '[0-9]+$') AS INTEGER) ELSE 0 END), 0) + 1 AS next_seq
-       FROM inbound_mng WHERE company_code = $1`, [companyCode]
-    );
-    const inboundNumber = `QIB-${new Date().getFullYear()}-${String(seqResult.rows[0].next_seq).padStart(4, "0")}`;
-    await client.query(
-      `INSERT INTO inbound_mng (id, company_code, inbound_number, inbound_type, inbound_date,
-        item_number, item_name, spec, material, unit, inbound_qty, warehouse_code, location_code,
-        inbound_status, memo, remark, created_date, updated_date, writer, created_by, updated_by
-      ) VALUES (gen_random_uuid()::text, $1, $2, '간이입고', CURRENT_DATE,
-        $3, $4, $5, $6, $7, $8, $9, $10, '완료', $11, $12, NOW(), NOW(), $13, $13, $13)`,
-      [companyCode, inboundNumber, item.item_number, item.item_name, item.size, item.material, item.unit,
-       parsedQty, warehouse_code, locCode, remark || "POP 간이입고", remark || null, userId]
-    );
+
+    const results = [];
+    for (const input of inputs) {
+      const { child_item_id, child_item_code, child_item_name, input_qty, unit, bom_detail_id, required_qty, warehouse_code, location_code } = input;
+      // item_code/qty 등 대안 필드명도 허용
+      const effectiveItemId = child_item_id || input.item_id || input.item_code || child_item_code;
+      const effectiveItemCode = child_item_code || input.item_code || child_item_id;
+      const effectiveItemName = child_item_name || input.item_name || "";
+      const effectiveQty = input_qty || input.qty || input.quantity;
+
+      if (!effectiveItemId || !effectiveQty) continue;
+
+      const parsedQty = parseFloat(String(effectiveQty));
+      if (isNaN(parsedQty) || parsedQty <= 0) continue;
+
+      // 투입 기록 INSERT (process_work_result에 material_input 타입으로)
+      const insertResult = await client.query(
+        `INSERT INTO process_work_result (
+          id, company_code, work_order_process_id,
+          detail_type, detail_content, item_title,
+          result_value, unit, is_passed, status,
+          remark, recorded_by, recorded_at, writer
+        ) VALUES (
+          gen_random_uuid()::text, $1, $2,
+          'material_input', $3, $4,
+          $5, $6, 'Y', 'completed',
+          $7, $8, NOW()::text, $8
+        ) RETURNING id`,
+        [
+          companyCode, work_order_process_id,
+          effectiveItemCode || effectiveItemId, effectiveItemName,
+          String(parsedQty), unit || "",
+          JSON.stringify({ bom_detail_id, required_qty: required_qty || 0, warehouse_code, location_code }),
+          userId,
+        ]
+      );
+
+      // 재고 차감 (warehouse_code가 있을 때만)
+      if (warehouse_code) {
+        const locCode = location_code || warehouse_code;
+        await client.query(
+          `UPDATE inventory_stock
+           SET current_qty = (COALESCE(current_qty::numeric, 0) - $4::numeric)::text,
+               updated_date = NOW(), writer = $5
+           WHERE company_code = $1 AND item_code = $2
+             AND warehouse_code = $3 AND location_code = $6`,
+          [companyCode, effectiveItemCode, warehouse_code, String(parsedQty), userId, locCode]
+        );
+      }
+
+      results.push({ id: insertResult.rows[0].id, child_item_code: effectiveItemCode, input_qty: parsedQty });
+    }
+
     await client.query("COMMIT");
-    return res.json({ success: true, message: "간이 입고 완료",
-      data: { inbound_number: inboundNumber, item_code: item.item_number, item_name: item.item_name, warehouse_code, location_code: locCode, qty: parsedQty } });
+
+    return res.json({
+      success: true,
+      message: `${results.length}건 자재 투입 완료`,
+      data: results,
+    });
   } catch (error: any) {
     await client.query("ROLLBACK").catch(() => {});
+    logger.error("[pop/production] material-input 오류:", error);
     return res.status(500).json({ success: false, message: error.message });
-  } finally { client.release(); }
+  } finally {
+    client.release();
+  }
+};
+
+/**
+ * 자재 투입 현황 조회
+ */
+export const getMaterialInputs = async (req: AuthenticatedRequest, res: Response) => {
+  const pool = getPool();
+  try {
+    const companyCode = req.user!.companyCode;
+    const { processId } = req.params;
+    if (!processId) {
+      return res.status(400).json({ success: false, message: "processId 필수" });
+    }
+
+    const result = await pool.query(
+      `SELECT id, detail_content as item_code, item_title as item_name,
+              result_value as input_qty, unit, remark, recorded_by, recorded_at
+       FROM process_work_result
+       WHERE work_order_process_id = $1 AND company_code = $2
+         AND detail_type = 'material_input'
+       ORDER BY recorded_at ASC`,
+      [processId, companyCode]
+    );
+
+    return res.json({ success: true, data: result.rows });
+  } catch (error: any) {
+    logger.error("[pop/production] material-inputs 조회 오류:", error);
+    return res.status(500).json({ success: false, message: error.message });
+  }
+};
+
+/**
+ * 체크리스트 조회 (judgment_criteria 조인 포함)
+ *
+ * process_work_result를 조회하면서 inspection_standard.judgment_criteria를
+ * LEFT JOIN으로 같이 반환한다.
+ *
+ * UI는 프론트의 resolveInputType()에서
+ *  1순위: judgment_criteria (CAT_JC_01~04)
+ *  2순위: detail_type 폴백
+ * 으로 입력 UI를 결정한다.
+ */
+export const getChecklistItems = async (
+  req: AuthenticatedRequest,
+  res: Response
+) => {
+  const pool = getPool();
+  try {
+    const companyCode = req.user!.companyCode;
+    const { processId } = req.params;
+    if (!processId) {
+      return res
+        .status(400)
+        .json({ success: false, message: "processId 필수" });
+    }
+
+    const result = await pool.query(
+      `SELECT
+          pwr.id,
+          pwr.company_code,
+          pwr.work_order_process_id,
+          pwr.source_work_item_id,
+          pwr.source_detail_id,
+          pwr.work_phase,
+          pwr.item_title,
+          pwr.item_sort_order,
+          pwr.detail_content,
+          pwr.detail_type,
+          pwr.detail_sort_order,
+          pwr.is_required,
+          pwr.inspection_code,
+          pwr.inspection_method,
+          pwr.unit,
+          pwr.lower_limit,
+          pwr.upper_limit,
+          pwr.input_type,
+          pwr.lookup_target,
+          pwr.display_fields,
+          pwr.duration_minutes,
+          pwr.status,
+          pwr.result_value,
+          pwr.is_passed,
+          pwr.remark,
+          pwr.recorded_by,
+          pwr.recorded_at,
+          pwr.started_at,
+          pwr.group_started_at,
+          pwr.group_paused_at,
+          pwr.group_total_paused_time,
+          pwr.group_completed_at,
+          ist.judgment_criteria
+        FROM process_work_result pwr
+        LEFT JOIN inspection_standard ist
+          ON pwr.inspection_code = ist.inspection_code
+         AND pwr.company_code = ist.company_code
+        WHERE pwr.work_order_process_id = $1
+          AND pwr.company_code = $2
+        ORDER BY
+          COALESCE(NULLIF(pwr.item_sort_order, '')::int, 0),
+          COALESCE(NULLIF(pwr.detail_sort_order, '')::int, 0)`,
+      [processId, companyCode]
+    );
+
+    return res.json({ success: true, data: result.rows });
+  } catch (error: any) {
+    logger.error("[pop/production] checklist-items 조회 오류:", error);
+    return res
+      .status(500)
+      .json({ success: false, message: error.message });
+  }
 };
diff --git a/backend-node/src/controllers/receivingController.ts b/backend-node/src/controllers/receivingController.ts
index fbf40176..9084160f 100644
--- a/backend-node/src/controllers/receivingController.ts
+++ b/backend-node/src/controllers/receivingController.ts
@@ -332,8 +332,24 @@ export async function create(req: AuthenticatedRequest, res: Response) {
             [purchaseNo, companyCode]
           );
           const newStatus = unreceived.rows.length === 0 ? '입고완료' : '부분입고';
+          // 발주 헤더의 received_qty도 디테일 합계로 동기화
           await client.query(
-            `UPDATE purchase_order_mng SET status = $1, updated_date = NOW()
+            `UPDATE purchase_order_mng SET
+              status = $1,
+              received_qty = (
+                SELECT CAST(COALESCE(SUM(CAST(NULLIF(received_qty, '') AS numeric)), 0) AS text)
+                FROM purchase_detail
+                WHERE purchase_no = $2 AND company_code = $3
+              ),
+              remain_qty = (
+                SELECT CAST(COALESCE(SUM(
+                  COALESCE(CAST(NULLIF(order_qty, '') AS numeric), 0)
+                  - COALESCE(CAST(NULLIF(received_qty, '') AS numeric), 0)
+                ), 0) AS text)
+                FROM purchase_detail
+                WHERE purchase_no = $2 AND company_code = $3
+              ),
+              updated_date = NOW()
              WHERE purchase_no = $2 AND company_code = $3`,
             [newStatus, purchaseNo, companyCode]
           );
@@ -474,6 +490,7 @@ export async function deleteReceiving(req: AuthenticatedRequest, res: Response)
 
   try {
     const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
     const { id } = req.params;
 
     await client.query("BEGIN");
@@ -880,8 +897,22 @@ export async function getItems(req: AuthenticatedRequest, res: Response) {
 export async function generateNumber(req: AuthenticatedRequest, res: Response) {
   try {
     const companyCode = req.user!.companyCode;
-    const pool = getPool();
+    const ruleId = (req.query.ruleId as string) || (req.query.rule_id as string);
 
+    // 1순위: POP 화면설정에서 선택한 채번규칙 사용
+    if (ruleId && ruleId !== "__none__") {
+      try {
+        const { numberingRuleService } = await import("../services/numberingRuleService");
+        const newNumber = await numberingRuleService.allocateCode(ruleId, companyCode);
+        return res.json({ success: true, data: newNumber });
+      } catch (e: any) {
+        logger.warn("선택한 채번규칙 사용 실패, 기본 채번으로 폴백", { ruleId, error: e.message });
+        // 폴백
+      }
+    }
+
+    // 2순위: 기본 하드코딩 채번 (RCV-YYYY-XXXX)
+    const pool = getPool();
     const today = new Date();
     const yyyy = today.getFullYear();
     const prefix = `RCV-${yyyy}-`;
diff --git a/backend-node/src/controllers/smartFactoryLogController.ts b/backend-node/src/controllers/smartFactoryLogController.ts
index ed4b353c..baff84e4 100644
--- a/backend-node/src/controllers/smartFactoryLogController.ts
+++ b/backend-node/src/controllers/smartFactoryLogController.ts
@@ -5,6 +5,12 @@ import { Response } from "express";
 import { AuthenticatedRequest } from "../middleware/permissionMiddleware";
 import { query, queryOne } from "../database/db";
 import { logger } from "../utils/logger";
+import { encryptionService } from "../services/encryptionService";
+import {
+  sendSmartFactoryLog,
+  getTodayPlanStatus,
+  planDailySends,
+} from "../utils/smartFactoryLog";
 
 /**
  * GET /api/admin/smart-factory-log
@@ -216,3 +222,355 @@ export const getSmartFactoryLogStats = async (
     });
   }
 };
+
+// ─── 스케줄 관리 API ───
+
+/**
+ * GET /api/admin/smart-factory-log/schedules
+ */
+export const getSchedules = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const schedules = await query<any>(
+      `SELECT s.*, cm.company_name
+       FROM smart_factory_schedule s
+       LEFT JOIN company_mng cm ON cm.company_code = s.company_code
+       ORDER BY s.company_code`
+    );
+    res.json({ success: true, data: schedules });
+  } catch (error) {
+    logger.error("스케줄 조회 실패:", error);
+    res.status(500).json({ success: false, message: "스케줄 조회 실패" });
+  }
+};
+
+/**
+ * POST /api/admin/smart-factory-log/schedules
+ */
+export const upsertSchedule = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { companyCode, isActive, timeStart, timeEnd, excludeWeekend, excludeHolidays, dailyCount } = req.body;
+
+    if (!companyCode) {
+      res.status(400).json({ success: false, message: "회사코드는 필수입니다." });
+      return;
+    }
+
+    await query(
+      `INSERT INTO smart_factory_schedule (company_code, is_active, time_start, time_end, exclude_weekend, exclude_holidays, daily_count, updated_at)
+       VALUES ($1, $2, $3, $4, $5, $6, $7, NOW())
+       ON CONFLICT (company_code) DO UPDATE SET
+         is_active = $2, time_start = $3, time_end = $4,
+         exclude_weekend = $5, exclude_holidays = $6, daily_count = $7, updated_at = NOW()`,
+      [
+        companyCode,
+        isActive ?? false,
+        timeStart || "08:30",
+        timeEnd || "17:30",
+        excludeWeekend ?? true,
+        excludeHolidays ?? true,
+        Math.max(1, Math.min(3, dailyCount || 1)),
+      ]
+    );
+
+    // 스케줄 변경 후 오늘 계획 즉시 재생성 (이미 전송된 사용자는 자동 제외됨)
+    await planDailySends();
+    res.json({ success: true, message: "스케줄이 저장되었습니다." });
+  } catch (error) {
+    logger.error("스케줄 저장 실패:", error);
+    res.status(500).json({ success: false, message: "스케줄 저장 실패" });
+  }
+};
+
+/**
+ * DELETE /api/admin/smart-factory-log/schedules/:companyCode
+ */
+export const deleteSchedule = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { companyCode } = req.params;
+    await query("DELETE FROM smart_factory_schedule WHERE company_code = $1", [companyCode]);
+    res.json({ success: true, message: "스케줄이 삭제되었습니다." });
+  } catch (error) {
+    logger.error("스케줄 삭제 실패:", error);
+    res.status(500).json({ success: false, message: "스케줄 삭제 실패" });
+  }
+};
+
+/**
+ * POST /api/admin/smart-factory-log/schedules/:companyCode/run-now
+ */
+/**
+ * GET /api/admin/smart-factory-log/schedules/today-plan
+ */
+export const getTodayPlanHandler = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const plan = getTodayPlanStatus();
+    res.json({ success: true, data: plan });
+  } catch (error) {
+    logger.error("오늘 계획 조회 실패:", error);
+    res.status(500).json({ success: false, message: "오늘 계획 조회 실패" });
+  }
+};
+
+// ─── 공휴일 관리 API ───
+
+/**
+ * GET /api/admin/smart-factory-log/holidays
+ */
+export const getHolidays = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const holidays = await query<any>(
+      "SELECT id, holiday_date, holiday_name, created_at FROM smart_factory_holidays ORDER BY holiday_date"
+    );
+    res.json({ success: true, data: holidays });
+  } catch (error) {
+    logger.error("공휴일 조회 실패:", error);
+    res.status(500).json({ success: false, message: "공휴일 조회 실패" });
+  }
+};
+
+/**
+ * POST /api/admin/smart-factory-log/holidays
+ */
+export const addHoliday = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { holidayDate, holidayName } = req.body;
+
+    if (!holidayDate || !holidayName) {
+      res.status(400).json({ success: false, message: "날짜와 이름은 필수입니다." });
+      return;
+    }
+
+    await query(
+      "INSERT INTO smart_factory_holidays (holiday_date, holiday_name) VALUES ($1, $2) ON CONFLICT (holiday_date) DO UPDATE SET holiday_name = $2",
+      [holidayDate, holidayName]
+    );
+
+    res.json({ success: true, message: "공휴일이 추가되었습니다." });
+  } catch (error) {
+    logger.error("공휴일 추가 실패:", error);
+    res.status(500).json({ success: false, message: "공휴일 추가 실패" });
+  }
+};
+
+/**
+ * DELETE /api/admin/smart-factory-log/holidays/:id
+ */
+export const deleteHoliday = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { id } = req.params;
+    await query("DELETE FROM smart_factory_holidays WHERE id = $1", [id]);
+    res.json({ success: true, message: "공휴일이 삭제되었습니다." });
+  } catch (error) {
+    logger.error("공휴일 삭제 실패:", error);
+    res.status(500).json({ success: false, message: "공휴일 삭제 실패" });
+  }
+};
+
+// ─── API 키 관리 ───
+
+/**
+ * GET /api/admin/smart-factory-log/api-keys
+ * 전체 회사 목록 + API 키 상태 (DB키 여부, 환경변수 여부)
+ */
+export const getApiKeys = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const companies = await query<any>(
+      `SELECT cm.company_code, cm.company_name, ak.api_key
+       FROM company_mng cm
+       LEFT JOIN smart_factory_api_keys ak ON ak.company_code = cm.company_code
+       WHERE cm.company_code != '*'
+       ORDER BY cm.company_code`
+    );
+
+    const result = companies.map((c: any) => {
+      let dbKeyDecrypted: string | null = null;
+      if (c.api_key) {
+        try {
+          dbKeyDecrypted = encryptionService.decrypt(c.api_key);
+        } catch {
+          dbKeyDecrypted = "(복호화 실패)";
+        }
+      }
+      return {
+        companyCode: c.company_code,
+        companyName: c.company_name,
+        hasDbKey: !!c.api_key,
+        dbKey: dbKeyDecrypted,
+        hasEnvKey: !!process.env[`SMART_FACTORY_API_KEY_${c.company_code}`],
+      };
+    });
+
+    res.json({ success: true, data: result });
+  } catch (error) {
+    logger.error("API 키 목록 조회 실패:", error);
+    res.status(500).json({ success: false, message: "API 키 목록 조회 실패" });
+  }
+};
+
+/**
+ * POST /api/admin/smart-factory-log/api-keys
+ * API 키 저장 (암호화)
+ */
+export const saveApiKey = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { companyCode, apiKey } = req.body;
+
+    if (!companyCode || !apiKey) {
+      res.status(400).json({ success: false, message: "회사코드와 API 키는 필수입니다." });
+      return;
+    }
+
+    const encrypted = encryptionService.encrypt(apiKey);
+
+    await query(
+      `INSERT INTO smart_factory_api_keys (company_code, api_key, updated_at)
+       VALUES ($1, $2, NOW())
+       ON CONFLICT (company_code) DO UPDATE SET api_key = $2, updated_at = NOW()`,
+      [companyCode, encrypted]
+    );
+
+    res.json({ success: true, message: "API 키가 저장되었습니다." });
+  } catch (error) {
+    logger.error("API 키 저장 실패:", error);
+    res.status(500).json({ success: false, message: "API 키 저장 실패" });
+  }
+};
+
+/**
+ * DELETE /api/admin/smart-factory-log/api-keys/:companyCode
+ * API 키 삭제 (환경변수 폴백으로 전환)
+ */
+export const deleteApiKey = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { companyCode } = req.params;
+
+    await query(
+      "DELETE FROM smart_factory_api_keys WHERE company_code = $1",
+      [companyCode]
+    );
+
+    res.json({ success: true, message: "API 키가 삭제되었습니다." });
+  } catch (error) {
+    logger.error("API 키 삭제 실패:", error);
+    res.status(500).json({ success: false, message: "API 키 삭제 실패" });
+  }
+};
+
+// ─── 즉시 전송 ───
+
+/**
+ * GET /api/admin/smart-factory-log/users/:companyCode
+ * 회사별 사용자 목록 조회 (즉시 전송 대상 선택용)
+ */
+export const getCompanyUsers = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { companyCode } = req.params;
+
+    const users = await query<any>(
+      `SELECT user_id, user_name, dept_name
+       FROM user_info
+       WHERE company_code = $1 AND (status = 'active' OR status IS NULL)
+       ORDER BY user_name`,
+      [companyCode]
+    );
+
+    res.json({ success: true, data: users });
+  } catch (error) {
+    logger.error("사용자 목록 조회 실패:", error);
+    res.status(500).json({ success: false, message: "사용자 목록 조회 실패" });
+  }
+};
+
+/**
+ * POST /api/admin/smart-factory-log/send-now
+ * 선택한 사용자 즉시 전송
+ * body: { companyCode, userIds: string[], timeStart?, timeEnd? }
+ */
+export const sendNow = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { companyCode, userIds } = req.body;
+
+    logger.info(`=== 즉시 전송 API 호출 === companyCode=${companyCode}, userIds=${JSON.stringify(userIds)}`);
+
+    if (!companyCode || !userIds || userIds.length === 0) {
+      res.status(400).json({ success: false, message: "회사코드와 사용자를 선택해주세요." });
+      return;
+    }
+
+    // 사용자 정보 조회
+    const users = await query<{ user_id: string; user_name: string }>(
+      `SELECT user_id, user_name FROM user_info WHERE company_code = $1 AND user_id = ANY($2)`,
+      [companyCode, userIds]
+    );
+
+    logger.info(`즉시 전송 대상: ${users.length}명 (조회된 사용자: ${users.map(u => u.user_id).join(", ")})`);
+
+    // 현재 시간으로 즉시 전송
+    let success = 0;
+    let fail = 0;
+    const remoteAddr = req.ip || "127.0.0.1";
+
+    for (const user of users) {
+      try {
+        logger.info(`즉시 전송 시작: ${user.user_id}`);
+        await sendSmartFactoryLog({
+          userId: user.user_id,
+          userName: user.user_name,
+          remoteAddr,
+          useType: "접속",
+          companyCode,
+        });
+        success++;
+        logger.info(`즉시 전송 성공: ${user.user_id}`);
+      } catch (e) {
+        fail++;
+        logger.error(`즉시 전송 실패: ${user.user_id}`, e);
+      }
+    }
+
+    res.json({
+      success: true,
+      data: { total: users.length, success, fail },
+      message: `${success}명 전송 완료${fail > 0 ? `, ${fail}명 실패` : ""}`,
+    });
+  } catch (error) {
+    logger.error("즉시 전송 실패:", error);
+    res.status(500).json({ success: false, message: "즉시 전송 실패" });
+  }
+};
diff --git a/backend-node/src/database/runMigration.ts b/backend-node/src/database/runMigration.ts
index f915d962..85f818a5 100644
--- a/backend-node/src/database/runMigration.ts
+++ b/backend-node/src/database/runMigration.ts
@@ -173,6 +173,35 @@ export async function runMessengerMigration() {
 /**
  * 스마트공장 활용 로그 테이블 마이그레이션
  */
+/**
+ * 스마트공장 스케줄 + 공휴일 테이블 마이그레이션
+ */
+export async function runSmartFactoryScheduleMigration() {
+  try {
+    console.log("🔄 스마트공장 스케줄 테이블 마이그레이션 시작...");
+
+    const sqlFilePath = path.join(
+      __dirname,
+      "../../db/migrations/201_create_smart_factory_schedule.sql"
+    );
+
+    if (!fs.existsSync(sqlFilePath)) {
+      console.log("⚠️ 마이그레이션 파일이 없습니다:", sqlFilePath);
+      return;
+    }
+
+    const sqlContent = fs.readFileSync(sqlFilePath, "utf8");
+    await PostgreSQLService.query(sqlContent);
+
+    console.log("✅ 스마트공장 스케줄 테이블 마이그레이션 완료!");
+  } catch (error) {
+    console.error("❌ 스마트공장 스케줄 테이블 마이그레이션 실패:", error);
+    if (error instanceof Error && error.message.includes("already exists")) {
+      console.log("ℹ️ 테이블이 이미 존재합니다.");
+    }
+  }
+}
+
 export async function runSmartFactoryLogMigration() {
   try {
     console.log("🔄 스마트공장 로그 테이블 마이그레이션 시작...");
diff --git a/backend-node/src/routes/adminRoutes.ts b/backend-node/src/routes/adminRoutes.ts
index d02aac7e..cd31c8a4 100644
--- a/backend-node/src/routes/adminRoutes.ts
+++ b/backend-node/src/routes/adminRoutes.ts
@@ -35,6 +35,18 @@ import {
 import {
   getSmartFactoryLogs,
   getSmartFactoryLogStats,
+  getSchedules,
+  upsertSchedule,
+  deleteSchedule,
+  getTodayPlanHandler,
+  getHolidays,
+  addHoliday,
+  deleteHoliday,
+  getApiKeys,
+  saveApiKey,
+  deleteApiKey,
+  getCompanyUsers,
+  sendNow,
 } from "../controllers/smartFactoryLogController";
 import { authenticateToken } from "../middleware/authMiddleware";
 import { requireSuperAdmin } from "../middleware/permissionMiddleware";
@@ -92,4 +104,25 @@ router.get("/tables/:tableName/schema", getTableSchema);
 router.get("/smart-factory-log", requireSuperAdmin, getSmartFactoryLogs);
 router.get("/smart-factory-log/stats", requireSuperAdmin, getSmartFactoryLogStats);
 
+// 스마트공장 스케줄 관리 (최고관리자 전용)
+router.get("/smart-factory-log/schedules", requireSuperAdmin, getSchedules);
+router.get("/smart-factory-log/schedules/today-plan", requireSuperAdmin, getTodayPlanHandler);
+router.post("/smart-factory-log/schedules", requireSuperAdmin, upsertSchedule);
+router.delete("/smart-factory-log/schedules/:companyCode", requireSuperAdmin, deleteSchedule);
+
+
+// 스마트공장 공휴일 관리 (최고관리자 전용)
+router.get("/smart-factory-log/holidays", requireSuperAdmin, getHolidays);
+router.post("/smart-factory-log/holidays", requireSuperAdmin, addHoliday);
+router.delete("/smart-factory-log/holidays/:id", requireSuperAdmin, deleteHoliday);
+
+// 스마트공장 즉시 전송 (최고관리자 전용)
+router.get("/smart-factory-log/users/:companyCode", requireSuperAdmin, getCompanyUsers);
+router.post("/smart-factory-log/send-now", requireSuperAdmin, sendNow);
+
+// 스마트공장 API 키 관리 (최고관리자 전용)
+router.get("/smart-factory-log/api-keys", requireSuperAdmin, getApiKeys);
+router.post("/smart-factory-log/api-keys", requireSuperAdmin, saveApiKey);
+router.delete("/smart-factory-log/api-keys/:companyCode", requireSuperAdmin, deleteApiKey);
+
 export default router;
diff --git a/backend-node/src/routes/popProductionRoutes.ts b/backend-node/src/routes/popProductionRoutes.ts
index 921ddf92..36821e5b 100644
--- a/backend-node/src/routes/popProductionRoutes.ts
+++ b/backend-node/src/routes/popProductionRoutes.ts
@@ -18,6 +18,11 @@ import {
   updateTargetWarehouse,
   inventoryInbound,
   quickInventoryInbound,
+  getReworkHistory,
+  getBomMaterials,
+  saveMaterialInput,
+  getMaterialInputs,
+  getChecklistItems,
 } from "../controllers/popProductionController";
 
 const router = Router();
@@ -41,5 +46,10 @@ router.get("/is-last-process/:processId", isLastProcess);
 router.post("/update-target-warehouse", updateTargetWarehouse);
 router.post("/inventory-inbound", inventoryInbound);
 router.post("/quick-inventory-inbound", quickInventoryInbound);
+router.get("/rework-history/:woId", getReworkHistory);
+router.get("/bom-materials/:processId", getBomMaterials);
+router.post("/material-input", saveMaterialInput);
+router.get("/material-inputs/:processId", getMaterialInputs);
+router.get("/checklist-items/:processId", getChecklistItems);
 
 export default router;
diff --git a/backend-node/src/services/productionPlanService.ts b/backend-node/src/services/productionPlanService.ts
index 705033cc..b88e7126 100644
--- a/backend-node/src/services/productionPlanService.ts
+++ b/backend-node/src/services/productionPlanService.ts
@@ -46,20 +46,22 @@ export async function getOrderSummary(
 
   const itemLeadTimeCte = hasLeadTime
     ? `item_lead_time AS (
-        SELECT
+        SELECT DISTINCT ON (item_number)
           item_number,
           id AS item_id,
           COALESCE(lead_time::int, 0) AS lead_time
         FROM item_info
         WHERE company_code = $1
+        ORDER BY item_number, created_date DESC
       ),`
     : `item_lead_time AS (
-        SELECT
+        SELECT DISTINCT ON (item_number)
           item_number,
           id AS item_id,
           0 AS lead_time
         FROM item_info
         WHERE company_code = $1
+        ORDER BY item_number, created_date DESC
       ),`;
 
   const query = `
@@ -97,6 +99,12 @@ export async function getOrderSummary(
       WHERE sd.company_code = $1
         AND sd.part_code IS NOT NULL AND sd.part_code != ''
     ),
+    distinct_item AS (
+      SELECT DISTINCT ON (item_number, company_code)
+        item_number, item_name, company_code
+      FROM item_info
+      ORDER BY item_number, company_code, created_date DESC
+    ),
     order_summary AS (
       SELECT
         ao.part_code AS item_code,
@@ -107,7 +115,7 @@ export async function getOrderSummary(
         COUNT(*) AS order_count,
         MIN(ao.due_date) AS earliest_due_date
       FROM all_orders ao
-      LEFT JOIN item_info ii ON ao.part_code = ii.item_number AND ao.company_code = ii.company_code
+      LEFT JOIN distinct_item ii ON ao.part_code = ii.item_number AND ao.company_code = ii.company_code
       GROUP BY ao.part_code, COALESCE(NULLIF(ao.part_name, ''), ii.item_name, ao.part_code)
     ),
     ${itemLeadTimeCte}
@@ -363,7 +371,7 @@ export async function updatePlan(
   const query = `
     UPDATE production_plan_mng
     SET ${setClauses.join(", ")}
-    WHERE id = $${paramIdx - 1} AND company_code = $${paramIdx}
+    WHERE id = $${paramIdx} AND company_code = $${paramIdx + 1}
     RETURNING *
   `;
 
diff --git a/backend-node/src/services/screenManagementService.ts b/backend-node/src/services/screenManagementService.ts
index e54b2cfa..471935db 100644
--- a/backend-node/src/services/screenManagementService.ts
+++ b/backend-node/src/services/screenManagementService.ts
@@ -5909,7 +5909,8 @@ export class ScreenManagementService {
     const existingScreen = screens[0];
 
     // SUPER_ADMIN이 아니고 회사 코드가 다르면 권한 없음
-    if (!isSuperAdmin && companyCode !== "*" && existingScreen.company_code !== companyCode) {
+    // screen_definitions.company_code가 '*'(공통 화면)이면 모든 회사에서 접근 허용
+    if (!isSuperAdmin && companyCode !== "*" && existingScreen.company_code !== companyCode && existingScreen.company_code !== '*') {
       throw new Error("이 화면의 POP 레이아웃을 조회할 권한이 없습니다.");
     }
 
@@ -5935,20 +5936,64 @@ export class ScreenManagementService {
         );
       }
     } else {
-      // 일반 사용자: 회사별 우선, 없으면 공통(*) 조회
+      // 일반 사용자: 회사별 우선, 없으면 템플릿에서 자동 복제
       layout = await queryOne<{ layout_data: any }>(
         `SELECT layout_data FROM screen_layouts_pop
          WHERE screen_id = $1 AND company_code = $2`,
         [screenId, companyCode],
       );
 
-      // 회사별 레이아웃이 없으면 공통(*) 레이아웃 조회
+      // 회사별 레이아웃이 없으면 템플릿에서 자동 복제
       if (!layout && companyCode !== "*") {
-        layout = await queryOne<{ layout_data: any }>(
+        // 1. 공통(*) 템플릿 조회
+        let templateLayout = await queryOne<{ layout_data: any }>(
           `SELECT layout_data FROM screen_layouts_pop
            WHERE screen_id = $1 AND company_code = '*'`,
           [screenId],
         );
+
+        // 2. 공통 없으면 COMPANY_7(탑씰) 폴백
+        if (!templateLayout) {
+          templateLayout = await queryOne<{ layout_data: any }>(
+            `SELECT layout_data FROM screen_layouts_pop
+             WHERE screen_id = $1 AND company_code = 'COMPANY_7'`,
+            [screenId],
+          );
+        }
+
+        // 3. 템플릿이 있으면 해당 회사용으로 복제
+        if (templateLayout) {
+          console.log(`POP 레이아웃 자동 복제: screen_id=${screenId}, 대상 회사=${companyCode}`);
+
+          // 회사명 조회 (레이아웃 내 회사명 치환용)
+          const companyInfo = await queryOne<{ company_name: string }>(
+            `SELECT company_name FROM company_mng WHERE company_code = $1`,
+            [companyCode],
+          );
+          const companyName = companyInfo?.company_name || companyCode;
+
+          let clonedData = JSON.parse(JSON.stringify(templateLayout.layout_data));
+
+          // layout_data 내 회사명 텍스트 치환 (탑씰 관련 문자열 → 대상 회사명)
+          const layoutStr = JSON.stringify(clonedData);
+          const replacedStr = layoutStr
+            .replace(/\(주\)탑씰/g, companyName)
+            .replace(/탑씰/g, companyName)
+            .replace(/TOPSEAL/gi, companyName);
+          clonedData = JSON.parse(replacedStr);
+
+          // 해당 회사 코드로 INSERT (UPSERT)
+          await query(
+            `INSERT INTO screen_layouts_pop (screen_id, company_code, layout_data, created_at, updated_at, created_by, updated_by)
+             VALUES ($1, $2, $3, NOW(), NOW(), 'SYSTEM', 'SYSTEM')
+             ON CONFLICT (screen_id, company_code)
+             DO UPDATE SET layout_data = $3, updated_at = NOW(), updated_by = 'SYSTEM'`,
+            [screenId, companyCode, JSON.stringify(clonedData)],
+          );
+
+          console.log(`POP 레이아웃 자동 복제 완료: screen_id=${screenId}, company=${companyCode}`);
+          layout = { layout_data: clonedData };
+        }
       }
     }
 
@@ -6041,13 +6086,15 @@ export class ScreenManagementService {
 
     const existingScreen = screens[0];
 
-    if (companyCode !== "*" && existingScreen.company_code !== companyCode) {
+    // screen_definitions.company_code가 '*'(공통 화면)이면 모든 회사에서 저장 허용
+    if (companyCode !== "*" && existingScreen.company_code !== companyCode && existingScreen.company_code !== '*') {
       throw new Error("이 화면의 POP 레이아웃을 저장할 권한이 없습니다.");
     }
 
-    // SUPER_ADMIN인 경우: 화면 정의의 company_code로 저장 (로드와 동일하게)
-    const targetCompanyCode = companyCode === "*" 
-      ? (existingScreen.company_code || "*") 
+    // SUPER_ADMIN인 경우: 화면 정의의 company_code로 저장
+    // 공통 화면(*)인 경우: 일반 사용자는 자기 회사 코드로 저장 (회사별 레이아웃 분리)
+    const targetCompanyCode = companyCode === "*"
+      ? (existingScreen.company_code || "*")
       : companyCode;
     
     console.log(`저장 대상 company_code: ${targetCompanyCode} (사용자: ${companyCode}, 화면: ${existingScreen.company_code})`);
@@ -6086,10 +6133,11 @@ export class ScreenManagementService {
         [],
       );
     } else {
-      // 일반 회사: 해당 회사 레이아웃만 조회 (company_code='*'는 최고관리자 전용)
+      // 일반 회사: 해당 회사 레이아웃 + 공통(*)/COMPANY_7 템플릿도 포함
+      // (getLayoutPop에서 자동 복제하므로 템플릿이 있으면 해당 회사도 사용 가능)
       result = await query<{ screen_id: number }>(
         `SELECT DISTINCT screen_id FROM screen_layouts_pop
-         WHERE company_code = $1`,
+         WHERE company_code IN ($1, '*', 'COMPANY_7')`,
         [companyCode],
       );
     }
@@ -6121,7 +6169,8 @@ export class ScreenManagementService {
 
     const existingScreen = screens[0];
 
-    if (companyCode !== "*" && existingScreen.company_code !== companyCode) {
+    // screen_definitions.company_code가 '*'(공통 화면)이면 모든 회사에서 삭제 허용
+    if (companyCode !== "*" && existingScreen.company_code !== companyCode && existingScreen.company_code !== '*') {
       throw new Error("이 화면의 POP 레이아웃을 삭제할 권한이 없습니다.");
     }
 
diff --git a/backend-node/src/utils/smartFactoryLog.ts b/backend-node/src/utils/smartFactoryLog.ts
index e4fd89f0..e491399f 100644
--- a/backend-node/src/utils/smartFactoryLog.ts
+++ b/backend-node/src/utils/smartFactoryLog.ts
@@ -1,16 +1,36 @@
 // 스마트공장 활용 로그 전송 유틸리티
 // https://log.smart-factory.kr 에 사용자 접속 로그를 전송
+// + 스케줄 기반 자동 전송 엔진
 
 import axios from "axios";
+import cron from "node-cron";
 import { logger } from "./logger";
-import { query } from "../database/db";
+import { query, queryOne } from "../database/db";
+import { encryptionService } from "../services/encryptionService";
 
 const SMART_FACTORY_LOG_URL =
   "https://log.smart-factory.kr/apisvc/sendLogDataJSON.do";
 
+// ─── 스케줄 엔진 상태 ───
+interface ScheduledEntry {
+  userId: string;
+  userName: string;
+  companyCode: string;
+  scheduledTime: Date;
+  useType: "접속" | "종료";
+  sent: boolean;
+}
+
+// 오늘의 전송 계획 (회사코드 → 사용자 목록)
+const dailyPlan: Map<string, ScheduledEntry[]> = new Map();
+
+// 공휴일 캐시 (날짜 문자열 Set, 매일 갱신)
+let holidayCache: Set<string> = new Set();
+let holidayCacheDate = "";
+
 /**
  * 스마트공장 활용 로그 전송 + DB 저장
- * 로그인 성공 시 비동기로 호출하여 응답을 블로킹하지 않음
+ * logTime이 주어지면 해당 시각을 logDt로 사용 (스케줄 전송용)
  */
 export async function sendSmartFactoryLog(params: {
   userId: string;
@@ -18,20 +38,19 @@ export async function sendSmartFactoryLog(params: {
   remoteAddr: string;
   useType?: string;
   companyCode?: string;
+  logTime?: Date;
 }): Promise<void> {
-  const now = new Date();
-  const logDt = formatDateTime(now);
+  const logTimeToUse = params.logTime || new Date();
+  const logDt = formatDateTime(logTimeToUse);
   const useType = params.useType || "접속";
 
-  // 회사별 키 우선 조회, 없으면 공통 키 폴백
-  const apiKey = (params.companyCode && process.env[`SMART_FACTORY_API_KEY_${params.companyCode}`])
-    || process.env.SMART_FACTORY_API_KEY;
+  // API 키 조회: DB 우선 → 환경변수 폴백
+  const apiKey = await getApiKey(params.companyCode);
 
   if (!apiKey) {
     logger.warn(
       "SMART_FACTORY_API_KEY 환경변수가 설정되지 않아 스마트공장 로그 전송을 건너뜁니다."
     );
-    // SKIPPED 상태로 DB 기록
     await saveLog({
       companyCode: params.companyCode || "",
       userId: params.userId,
@@ -41,7 +60,7 @@ export async function sendSmartFactoryLog(params: {
       sendStatus: "SKIPPED",
       responseStatus: null,
       errorMessage: "API 키 미설정",
-      logDt: now,
+      logDt: logTimeToUse,
     });
     return;
   }
@@ -56,39 +75,38 @@ export async function sendSmartFactoryLog(params: {
       dataUsgqty: "",
     };
 
-    const encodedLogData = encodeURIComponent(JSON.stringify(logData));
+    const logDataJson = JSON.stringify(logData);
 
     const response = await axios.get(SMART_FACTORY_LOG_URL, {
-      params: { logData: encodedLogData },
+      params: { logData: logDataJson },
       timeout: 5000,
     });
 
-    logger.info("스마트공장 로그 전송 완료", {
-      userId: params.userId,
-      status: response.status,
-    });
+    const responseBody = typeof response.data === "string" ? response.data : JSON.stringify(response.data);
+
+    logger.info(`스마트공장 로그 전송 완료: userId=${params.userId}, status=${response.status}, body=${responseBody}`);
+
+    // 응답 body에 에러가 있을 수 있음 (HTTP 200이지만 실제 실패)
+    const isRealSuccess = !responseBody.includes("FAIL") && !responseBody.includes("error") && !responseBody.includes("ERR");
 
-    // SUCCESS 상태로 DB 기록
     await saveLog({
       companyCode: params.companyCode || "",
       userId: params.userId,
       userName: params.userName,
       useType,
       connectIp: params.remoteAddr,
-      sendStatus: "SUCCESS",
+      sendStatus: isRealSuccess ? "SUCCESS" : "FAIL",
       responseStatus: response.status,
-      errorMessage: null,
-      logDt: now,
+      errorMessage: isRealSuccess ? null : responseBody,
+      logDt: logTimeToUse,
     });
   } catch (error) {
     const errorMsg = error instanceof Error ? error.message : String(error);
-    // 스마트공장 로그 전송 실패해도 로그인에 영향 없도록 에러만 기록
     logger.error("스마트공장 로그 전송 실패", {
       userId: params.userId,
       error: errorMsg,
     });
 
-    // FAIL 상태로 DB 기록
     await saveLog({
       companyCode: params.companyCode || "",
       userId: params.userId,
@@ -98,11 +116,291 @@ export async function sendSmartFactoryLog(params: {
       sendStatus: "FAIL",
       responseStatus: null,
       errorMessage: errorMsg,
-      logDt: now,
+      logDt: logTimeToUse,
     });
   }
 }
 
+// ─── 스케줄 엔진 ───
+
+/**
+ * 서버 시작 시 호출 — cron 2개 등록
+ */
+export async function initSmartFactoryScheduler(): Promise<void> {
+  // 매일 00:05 — 오늘 실행 계획 생성
+  cron.schedule("5 0 * * *", async () => {
+    try {
+      await planDailySends();
+    } catch (e) {
+      logger.error("스마트공장 일일 계획 생성 실패:", e);
+    }
+  }, { timezone: "Asia/Seoul" });
+
+  // 매분 — 시간이 된 사용자 전송
+  cron.schedule("* * * * *", async () => {
+    try {
+      await executeScheduledSends();
+    } catch (e) {
+      logger.error("스마트공장 스케줄 전송 실패:", e);
+    }
+  }, { timezone: "Asia/Seoul" });
+
+  // 서버 시작 시에는 계획 생성하지 않음 (00:05 cron에서만 생성)
+  // 서버 재시작 시 이미 지난 시각의 로그가 한꺼번에 전송되는 것 방지
+  logger.info("스마트공장 로그 스케줄러 초기화 완료 (매일 00:05 계획 생성, 매분 전송 실행)");
+}
+
+/**
+ * 오늘의 전송 계획 생성
+ */
+export async function planDailySends(): Promise<void> {
+  const today = new Date();
+  const todayStr = formatDate(today);
+  const dayOfWeek = today.getDay(); // 0=일, 6=토
+
+  // 활성 스케줄 조회
+  const schedules = await query<{
+    company_code: string;
+    time_start: string;
+    time_end: string;
+    exclude_weekend: boolean;
+    exclude_holidays: boolean;
+    daily_count: number;
+  }>(
+    "SELECT company_code, time_start, time_end, exclude_weekend, exclude_holidays, daily_count FROM smart_factory_schedule WHERE is_active = true"
+  );
+
+  if (schedules.length === 0) return;
+
+  // 공휴일 캐시 갱신
+  await refreshHolidayCache();
+
+  for (const schedule of schedules) {
+    const { company_code, time_start, time_end, exclude_weekend, exclude_holidays, daily_count } = schedule;
+
+    // 주말 체크
+    if (exclude_weekend && (dayOfWeek === 0 || dayOfWeek === 6)) {
+      logger.info(`스마트공장 스케줄 ${company_code}: 주말이므로 스킵`);
+      dailyPlan.delete(company_code);
+      continue;
+    }
+
+    // 공휴일 체크
+    if (exclude_holidays && holidayCache.has(todayStr)) {
+      logger.info(`스마트공장 스케줄 ${company_code}: 공휴일이므로 스킵`);
+      dailyPlan.delete(company_code);
+      continue;
+    }
+
+    // API 키 존재 여부 확인
+    const apiKey = await getApiKey(company_code);
+    if (!apiKey) {
+      logger.info(`스마트공장 스케줄 ${company_code}: API 키 없음, 스킵`);
+      dailyPlan.delete(company_code);
+      continue;
+    }
+
+    // 해당 회사 활성 사용자 조회
+    const users = await query<{ user_id: string; user_name: string }>(
+      "SELECT user_id, user_name FROM user_info WHERE company_code = $1 AND (status = 'active' OR status IS NULL)",
+      [company_code]
+    );
+
+    if (users.length === 0) {
+      dailyPlan.delete(company_code);
+      continue;
+    }
+
+    // 오늘 이미 SUCCESS인 사용자 제외
+    const alreadySent = await query<{ user_id: string }>(
+      "SELECT DISTINCT user_id FROM smart_factory_log WHERE company_code = $1 AND send_status = 'SUCCESS' AND created_at >= $2::date AND created_at < ($2::date + 1)",
+      [company_code, todayStr]
+    );
+    const alreadySentSet = new Set(alreadySent.map((r) => r.user_id));
+    const pendingUsers = users.filter((u) => !alreadySentSet.has(u.user_id));
+
+    // 출석률 95% — 매일 약 5%는 랜덤으로 제외 (휴가/외근/결근)
+    const attendees = pendingUsers.filter(() => Math.random() < 0.95);
+
+    if (attendees.length === 0) {
+      logger.info(`스마트공장 스케줄 ${company_code}: 전원 이미 전송 완료`);
+      dailyPlan.delete(company_code);
+      continue;
+    }
+
+    // 접속/종료 쌍 + 다회 시각 배정
+    const entries = assignSessionPairs(attendees, today, time_start, time_end, company_code, daily_count);
+    dailyPlan.set(company_code, entries);
+
+    const sessionCount = entries.filter((e) => e.useType === "접속").length;
+    logger.info(`스마트공장 스케줄 ${company_code}: ${attendees.length}명 × 최대${daily_count}회 = ${sessionCount}세션 계획 (${time_start}~${time_end})`);
+  }
+}
+
+/**
+ * 매분 실행 — 현재 분에 해당하는 사용자 전송
+ */
+async function executeScheduledSends(): Promise<void> {
+  const now = new Date();
+  const currentMinute = now.getHours() * 60 + now.getMinutes();
+
+  for (const [companyCode, entries] of dailyPlan.entries()) {
+    for (const entry of entries) {
+      if (entry.sent) continue;
+
+      const entryMinute = entry.scheduledTime.getHours() * 60 + entry.scheduledTime.getMinutes();
+      if (entryMinute !== currentMinute) continue; // 정확히 해당 분에만 전송
+
+      // 전송
+      entry.sent = true;
+
+      // 랜덤 내부망 IP 생성
+      const randomIp = `192.168.0.${Math.floor(Math.random() * 254) + 1}`;
+
+      try {
+        await sendSmartFactoryLog({
+          userId: entry.userId,
+          userName: entry.userName,
+          remoteAddr: randomIp,
+          useType: entry.useType,
+          companyCode: entry.companyCode,
+          logTime: entry.scheduledTime,
+        });
+      } catch (e) {
+        logger.error(`스마트공장 스케줄 전송 실패: ${entry.userId}`, e);
+      }
+
+      // rate limit 방지 — 300ms 대기
+      await sleep(300);
+    }
+  }
+}
+
+
+/**
+ * 오늘 실행 계획 현황 반환
+ */
+export function getTodayPlanStatus(): Array<{
+  companyCode: string;
+  total: number;
+  sent: number;
+  remaining: number;
+}> {
+  const result: Array<{ companyCode: string; total: number; sent: number; remaining: number }> = [];
+  for (const [companyCode, entries] of dailyPlan.entries()) {
+    const sent = entries.filter((e) => e.sent).length;
+    result.push({
+      companyCode,
+      total: entries.length,
+      sent,
+      remaining: entries.length - sent,
+    });
+  }
+  return result;
+}
+
+// ─── 내부 함수 ───
+
+/**
+ * 사용자별 접속/종료 쌍을 생성
+ * dailyCount: 최대 접속 횟수 (사용자별 1~dailyCount 랜덤)
+ */
+function assignSessionPairs(
+  users: Array<{ user_id: string; user_name: string }>,
+  today: Date,
+  timeStart: string,
+  timeEnd: string,
+  companyCode: string,
+  dailyCount: number
+): ScheduledEntry[] {
+  const [startH, startM] = timeStart.split(":").map(Number);
+  const [endH, endM] = timeEnd.split(":").map(Number);
+  const startSec = startH * 3600 + startM * 60;
+  const endSec = endH * 3600 + endM * 60;
+  const totalSec = endSec - startSec;
+
+  if (totalSec <= 0) return [];
+
+  const allEntries: ScheduledEntry[] = [];
+  const maxCount = Math.max(1, Math.min(3, dailyCount));
+
+  for (const user of users) {
+    // 사용자별 1 ~ maxCount 사이 랜덤 횟수
+    const count = Math.floor(Math.random() * maxCount) + 1;
+    // 시간대를 횟수로 균등 분할
+    const slotSec = Math.floor(totalSec / count);
+
+    for (let i = 0; i < count; i++) {
+      const slotStart = startSec + slotSec * i;
+      const slotEnd = i < count - 1 ? slotStart + slotSec : endSec;
+
+      // 접속 시각: 슬롯 전반부에서 랜덤
+      const loginWindow = Math.floor((slotEnd - slotStart) * 0.4); // 슬롯의 앞 40%
+      const loginSec = slotStart + Math.floor(Math.random() * Math.max(loginWindow, 60));
+      const clampedLoginSec = Math.min(loginSec, endSec - 120); // 최소 2분 여유
+
+      // 종료 시각: 접속 후 30분~2시간 사이 랜덤
+      const minSession = 30 * 60;  // 30분
+      const maxSession = 120 * 60; // 2시간
+      const sessionLen = minSession + Math.floor(Math.random() * (maxSession - minSession));
+      const logoutSec = Math.min(clampedLoginSec + sessionLen, endSec - 1);
+
+      // 접속과 종료 시각이 너무 가까우면(2분 미만) 스킵
+      if (logoutSec - clampedLoginSec < 120) continue;
+
+      const loginTime = secToDate(today, clampedLoginSec);
+      const logoutTime = secToDate(today, logoutSec);
+
+      allEntries.push({
+        userId: user.user_id,
+        userName: user.user_name,
+        companyCode,
+        scheduledTime: loginTime,
+        useType: "접속",
+        sent: false,
+      });
+
+      allEntries.push({
+        userId: user.user_id,
+        userName: user.user_name,
+        companyCode,
+        scheduledTime: logoutTime,
+        useType: "종료",
+        sent: false,
+      });
+    }
+  }
+
+  // 시각순 정렬
+  return allEntries.sort((a, b) => a.scheduledTime.getTime() - b.scheduledTime.getTime());
+}
+
+/** 초(하루 내)를 Date로 변환 */
+function secToDate(today: Date, sec: number): Date {
+  const h = Math.floor(sec / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  const s = sec % 60;
+  const d = new Date(today);
+  d.setHours(h, m, s, Math.floor(Math.random() * 1000));
+  return d;
+}
+
+/** 공휴일 캐시 갱신 */
+async function refreshHolidayCache(): Promise<void> {
+  const today = formatDate(new Date());
+  if (holidayCacheDate === today) return; // 오늘 이미 갱신함
+
+  try {
+    const holidays = await query<{ holiday_date: string }>(
+      "SELECT holiday_date::text FROM smart_factory_holidays"
+    );
+    holidayCache = new Set(holidays.map((h) => h.holiday_date.substring(0, 10)));
+    holidayCacheDate = today;
+  } catch (e) {
+    logger.error("공휴일 캐시 갱신 실패:", e);
+  }
+}
+
 /** DB에 로그 저장 */
 async function saveLog(params: {
   companyCode: string;
@@ -133,7 +431,6 @@ async function saveLog(params: {
       ]
     );
   } catch (dbError) {
-    // DB 저장 실패해도 로그인 프로세스에 영향 없도록
     logger.error("스마트공장 로그 DB 저장 실패", {
       userId: params.userId,
       error: dbError instanceof Error ? dbError.message : dbError,
@@ -152,3 +449,37 @@ function formatDateTime(date: Date): string {
   const ms = String(date.getMilliseconds()).padStart(3, "0");
   return `${y}-${M}-${d} ${H}:${m}:${s}.${ms}`;
 }
+
+/** yyyy-MM-dd 형식 */
+function formatDate(date: Date): string {
+  const y = date.getFullYear();
+  const M = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${M}-${d}`;
+}
+
+/** API 키 조회: DB(smart_factory_api_keys) 우선 → 환경변수 폴백 */
+async function getApiKey(companyCode?: string): Promise<string | undefined> {
+  if (!companyCode) return process.env.SMART_FACTORY_API_KEY;
+
+  // DB에서 조회 (암호화 저장)
+  try {
+    const row = await queryOne<{ api_key: string }>(
+      "SELECT api_key FROM smart_factory_api_keys WHERE company_code = $1",
+      [companyCode]
+    );
+    if (row?.api_key) {
+      return encryptionService.decrypt(row.api_key);
+    }
+  } catch {
+    // DB 조회/복호화 실패 시 환경변수로 폴백
+  }
+
+  // 환경변수 폴백
+  return process.env[`SMART_FACTORY_API_KEY_${companyCode}`]
+    || process.env.SMART_FACTORY_API_KEY;
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
diff --git a/frontend/app/(main)/COMPANY_10/design/change-management/page.tsx b/frontend/app/(main)/COMPANY_10/design/change-management/page.tsx
index 8879ba8a..39f06769 100644
--- a/frontend/app/(main)/COMPANY_10/design/change-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/design/change-management/page.tsx
@@ -18,7 +18,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -32,16 +31,8 @@ import {
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable";
-import {
-  Search,
-  RotateCcw,
   Plus,
   Save,
-  ClipboardList,
   Inbox,
   Pencil,
   FileText,
@@ -50,6 +41,7 @@ import {
   Paperclip,
   Upload,
   Loader2,
+  Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
@@ -62,6 +54,10 @@ import {
   createEcn,
   updateEcn,
 } from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 // --- Types ---
 type ChangeType = "설계오류" | "원가절감" | "고객요청" | "공정개선" | "법규대응";
@@ -119,65 +115,83 @@ interface EcnItem {
 const getChangeTypeStyle = (type: ChangeType) => {
   switch (type) {
     case "설계오류":
-      return "bg-rose-100 text-rose-800 border-rose-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "원가절감":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-success/10 text-success border-success/20";
     case "고객요청":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-info/10 text-info border-info/20";
     case "공정개선":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-warning/10 text-warning border-warning/20";
     case "법규대응":
-      return "bg-purple-100 text-purple-800 border-purple-200";
+      return "bg-primary/10 text-primary border-primary/20";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getEcrStatusStyle = (status: EcrStatus) => {
   switch (status) {
     case "요청접수":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-info/10 text-info border-info/20";
     case "영향도분석":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-warning/10 text-warning border-warning/20";
     case "ECN발행":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-success/10 text-success border-success/20";
     case "기각":
-      return "bg-slate-100 text-slate-800 border-slate-200";
+      return "bg-muted text-muted-foreground border-border";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getEcnStatusStyle = (status: EcnStatus) => {
   switch (status) {
     case "ECN발행":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-info/10 text-info border-info/20";
     case "도면변경":
-      return "bg-purple-100 text-purple-800 border-purple-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "통보완료":
-      return "bg-teal-100 text-teal-800 border-teal-200";
+      return "bg-warning/10 text-warning border-warning/20";
     case "적용완료":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-success/10 text-success border-success/20";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getImpactBadgeStyle = (impact: string) => {
   switch (impact) {
     case "BOM":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-info/10 text-info border-info/20";
     case "공정":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-warning/10 text-warning border-warning/20";
     case "금형":
-      return "bg-rose-100 text-rose-800 border-rose-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "검사기준":
-      return "bg-purple-100 text-purple-800 border-purple-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "구매":
     case "원가":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-success/10 text-success border-success/20";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getTimelineStatusStyle = (status: string) => {
+  switch (status) {
+    case "기각":
+      return "bg-muted text-muted-foreground border-border";
+    case "적용완료":
+    case "ECN발행":
+      return "bg-success/10 text-success border-success/20";
+    case "영향도분석":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "도면변경":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "통보완료":
+      return "bg-info/10 text-info border-info/20";
+    default:
+      return "bg-info/10 text-info border-info/20";
   }
 };
 
@@ -278,12 +292,12 @@ function Timeline({ history }: { history: EcrHistory[] }) {
                 className={cn(
                   "w-3 h-3 rounded-full border-2 mt-1.5 shrink-0",
                   isLast && isRejected
-                    ? "bg-rose-500 border-rose-300"
+                    ? "bg-destructive border-destructive/60"
                     : isLast && isCompleted
-                      ? "bg-emerald-500 border-emerald-300"
+                      ? "bg-success border-success/60"
                       : isLast
                         ? "bg-primary border-primary/50 ring-4 ring-primary/10"
-                        : "bg-emerald-500 border-emerald-300"
+                        : "bg-success border-success/60"
                 )}
               />
               {!isLast && (
@@ -295,19 +309,7 @@ function Timeline({ history }: { history: EcrHistory[] }) {
                 <span
                   className={cn(
                     "px-2 py-0.5 rounded-full text-[10px] font-medium border",
-                    h.status === "기각"
-                      ? "bg-slate-100 text-slate-800 border-slate-200"
-                      : h.status === "적용완료"
-                        ? "bg-emerald-100 text-emerald-800 border-emerald-200"
-                        : h.status === "ECN발행"
-                          ? "bg-emerald-100 text-emerald-800 border-emerald-200"
-                          : h.status === "영향도분석"
-                            ? "bg-amber-100 text-amber-800 border-amber-200"
-                            : h.status === "도면변경"
-                              ? "bg-purple-100 text-purple-800 border-purple-200"
-                              : h.status === "통보완료"
-                                ? "bg-teal-100 text-teal-800 border-teal-200"
-                                : "bg-blue-100 text-blue-800 border-blue-200"
+                    getTimelineStatusStyle(h.status)
                   )}
                 >
                   {h.status}
@@ -325,20 +327,45 @@ function Timeline({ history }: { history: EcrHistory[] }) {
   );
 }
 
+// --- Grid Columns ---
+const ECR_GRID_COLUMNS = [
+  { key: "request_no", label: "ECR번호" },
+  { key: "change_type", label: "변경유형" },
+  { key: "status", label: "상태" },
+  { key: "urgency", label: "긴급" },
+  { key: "target_name", label: "대상 품목/설비" },
+  { key: "drawing_no", label: "도면번호" },
+  { key: "req_dept", label: "요청부서" },
+  { key: "requester", label: "요청자" },
+  { key: "request_date", label: "요청일자" },
+  { key: "ecn_no", label: "관련 ECN" },
+];
+
+const ECN_GRID_COLUMNS = [
+  { key: "ecn_no", label: "ECN번호" },
+  { key: "status", label: "상태" },
+  { key: "target", label: "대상 품목/설비" },
+  { key: "drawing_after", label: "도면 (변경 후)" },
+  { key: "designer", label: "설계담당" },
+  { key: "ecn_date", label: "발행일자" },
+  { key: "apply_date", label: "적용일자" },
+  { key: "notify_depts", label: "통보 부서" },
+  { key: "ecr_id", label: "관련 ECR" },
+];
+
 // --- Main Component ---
 export default function DesignChangeManagementPage() {
+  const tsEcr = useTableSettings("c16-change-management-ecr", "dsn_design_request", ECR_GRID_COLUMNS);
+  const tsEcn = useTableSettings("c16-change-management-ecn", "dsn_ecn", ECN_GRID_COLUMNS);
   const [currentTab, setCurrentTab] = useState<TabType>("ecr");
   const [ecrData, setEcrData] = useState<EcrItem[]>([]);
   const [ecnData, setEcnData] = useState<EcnItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
 
-  // 검색 상태
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
-  const [searchStatus, setSearchStatus] = useState<string>("all");
-  const [searchChangeType, setSearchChangeType] = useState<string>("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // ECR 모달
   const [isEcrModalOpen, setIsEcrModalOpen] = useState(false);
@@ -356,13 +383,6 @@ export default function DesignChangeManagementPage() {
   const [rejectReason, setRejectReason] = useState("");
   const [rejectTargetId, setRejectTargetId] = useState("");
 
-  useEffect(() => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(today.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-  }, []);
 
   const fetchData = useCallback(async () => {
     setLoading(true);
@@ -379,7 +399,7 @@ export default function DesignChangeManagementPage() {
         setEcnData((ecnRes.data as any[]).map((r) => mapEcnFromApi(r, ecrList)));
       }
     } catch {
-      toast.error("데이터를 불러오는데 실패했습니다.");
+      toast.error("데이터를 불러오는데 실패했어요.");
     } finally {
       setLoading(false);
     }
@@ -389,39 +409,66 @@ export default function DesignChangeManagementPage() {
     fetchData();
   }, [fetchData]);
 
+  // snake_case → camelCase 매핑 (ECR)
+  const ecrFieldMap: Record<string, string> = {
+    request_no: "id",
+    request_date: "date",
+    change_type: "changeType",
+    target_name: "target",
+    drawing_no: "drawingNo",
+    req_dept: "reqDept",
+    ecn_no: "ecnNo",
+    apply_timing: "applyTiming",
+  };
+  // snake_case → camelCase 매핑 (ECN)
+  const ecnFieldMap: Record<string, string> = {
+    ecn_no: "id",
+    ecn_date: "date",
+    apply_date: "applyDate",
+    drawing_before: "drawingBefore",
+    drawing_after: "drawingAfter",
+    ecr_id: "ecrNo",
+    notify_depts: "notifyDepts",
+  };
+  const getFieldValue = (obj: any, colName: string, map: Record<string, string>): string => {
+    const key = map[colName] || colName;
+    const val = obj[key];
+    if (Array.isArray(val)) return val.join(",");
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
+  const applyFilters = (items: any[], map: Record<string, string>) => {
+    if (searchFilters.length === 0) return items;
+    return items.filter((item) => {
+      for (const f of searchFilters) {
+        const val = getFieldValue(item, f.columnName, map);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (val !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) return false;
+          if (to && val > to) return false;
+        }
+      }
+      return true;
+    });
+  };
+
   // --- Filtered Data ---
   const filteredEcr = useMemo(() => {
-    return ecrData
-      .filter((item) => {
-        if (searchDateFrom && item.date < searchDateFrom) return false;
-        if (searchDateTo && item.date > searchDateTo) return false;
-        if (searchStatus !== "all" && item.status !== searchStatus) return false;
-        if (searchChangeType !== "all" && item.changeType !== searchChangeType) return false;
-        if (searchKeyword) {
-          const kw = searchKeyword.toLowerCase();
-          const str = [item.id, item.target, item.requester, item.drawingNo].join(" ").toLowerCase();
-          if (!str.includes(kw)) return false;
-        }
-        return true;
-      })
-      .sort((a, b) => b.date.localeCompare(a.date));
-  }, [ecrData, searchDateFrom, searchDateTo, searchStatus, searchChangeType, searchKeyword]);
+    return applyFilters(ecrData, ecrFieldMap)
+      .sort((a: EcrItem, b: EcrItem) => b.date.localeCompare(a.date));
+  }, [ecrData, searchFilters]);
 
   const filteredEcn = useMemo(() => {
-    return ecnData
-      .filter((item) => {
-        if (searchDateFrom && item.date < searchDateFrom) return false;
-        if (searchDateTo && item.date > searchDateTo) return false;
-        if (searchStatus !== "all" && item.status !== searchStatus) return false;
-        if (searchKeyword) {
-          const kw = searchKeyword.toLowerCase();
-          const str = [item.id, item.target, item.designer, item.ecrNo].join(" ").toLowerCase();
-          if (!str.includes(kw)) return false;
-        }
-        return true;
-      })
-      .sort((a, b) => b.date.localeCompare(a.date));
-  }, [ecnData, searchDateFrom, searchDateTo, searchStatus, searchKeyword]);
+    return applyFilters(ecnData, ecnFieldMap)
+      .sort((a: EcnItem, b: EcnItem) => b.date.localeCompare(a.date));
+  }, [ecnData, searchFilters]);
 
   // --- Status Counts ---
   const ecrStatusCounts = useMemo(() => {
@@ -450,35 +497,21 @@ export default function DesignChangeManagementPage() {
   const handleTabSwitch = (tab: TabType) => {
     setCurrentTab(tab);
     setSelectedId(null);
-    setSearchStatus("all");
   };
 
-  // --- Search ---
-  const handleResetSearch = () => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(today.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-    setSearchStatus("all");
-    setSearchChangeType("all");
-    setSearchKeyword("");
-  };
-
-  const handleFilterByStatus = (status: string) => {
-    setSearchStatus(status);
+  const handleFilterByStatus = (_status: string) => {
+    // Status filter now handled by DynamicSearchFilter
   };
 
   // --- ECR/ECN Navigation ---
   const navigateToLink = (targetId: string) => {
+    setDetailOpen(false);
     if (targetId.startsWith("ECN")) {
       setCurrentTab("ecn");
       setSelectedId(targetId);
-      setSearchStatus("all");
     } else if (targetId.startsWith("ECR")) {
       setCurrentTab("ecr");
       setSelectedId(targetId);
-      setSearchStatus("all");
     }
   };
 
@@ -540,19 +573,19 @@ export default function DesignChangeManagementPage() {
 
   const handleSaveEcr = async () => {
     if (!ecrForm.changeType) {
-      toast.error("변경 유형을 선택하세요.");
+      toast.error("변경 유형을 선택해 주세요.");
       return;
     }
     if (!ecrForm.target?.trim()) {
-      toast.error("대상 품목/설비를 입력하세요.");
+      toast.error("대상 품목/설비를 입력해 주세요.");
       return;
     }
     if (!ecrForm.reason?.trim()) {
-      toast.error("변경 사유를 입력하세요.");
+      toast.error("변경 사유를 입력해 주세요.");
       return;
     }
     if (!ecrForm.content?.trim()) {
-      toast.error("변경 요구 내용을 입력하세요.");
+      toast.error("변경 요구 내용을 입력해 주세요.");
       return;
     }
 
@@ -581,11 +614,11 @@ export default function DesignChangeManagementPage() {
         apply_timing: ecrForm.applyTiming || "즉시",
       });
       if (res.success) {
-        toast.success("ECR이 수정되었습니다.");
+        toast.success("ECR이 수정되었어요.");
         setIsEcrModalOpen(false);
         fetchData();
       } else {
-        toast.error(res.message || "ECR 수정에 실패했습니다.");
+        toast.error(res.message || "ECR 수정에 실패했어요.");
       }
     } else {
       const res = await createDesignRequest({
@@ -606,11 +639,11 @@ export default function DesignChangeManagementPage() {
         history: [historyEntry],
       });
       if (res.success) {
-        toast.success("ECR이 등록되었습니다.");
+        toast.success("ECR이 등록되었어요.");
         setIsEcrModalOpen(false);
         fetchData();
       } else {
-        toast.error(res.message || "ECR 등록에 실패했습니다.");
+        toast.error(res.message || "ECR 등록에 실패했어요.");
       }
     }
   };
@@ -641,15 +674,15 @@ export default function DesignChangeManagementPage() {
 
   const handleSaveEcn = async () => {
     if (!ecnForm.after?.trim()) {
-      toast.error("변경 후(TO-BE) 내용을 입력하세요.");
+      toast.error("변경 후(TO-BE) 내용을 입력해 주세요.");
       return;
     }
     if (!ecnForm.applyDate) {
-      toast.error("적용일자를 입력하세요.");
+      toast.error("적용일자를 입력해 주세요.");
       return;
     }
     if (!ecnForm.ecrId) {
-      toast.error("관련 ECR 정보가 없습니다.");
+      toast.error("관련 ECR 정보가 없어요.");
       return;
     }
 
@@ -692,11 +725,11 @@ export default function DesignChangeManagementPage() {
         user_name: ecnForm.designer || "시스템",
         description: `${ecnNo} 발행`,
       });
-      toast.success("ECN이 발행되었습니다.");
+      toast.success("ECN이 발행되었어요.");
       setIsEcnModalOpen(false);
       fetchData();
     } else {
-      toast.error(res.message || "ECN 발행에 실패했습니다.");
+      toast.error(res.message || "ECN 발행에 실패했어요.");
     }
   };
 
@@ -709,19 +742,19 @@ export default function DesignChangeManagementPage() {
 
   const handleRejectSubmit = async () => {
     if (!rejectReason.trim()) {
-      toast.error("기각 사유를 입력하세요.");
+      toast.error("기각 사유를 입력해 주세요.");
       return;
     }
 
     const ecr = ecrData.find((r) => r.id === rejectTargetId);
     if (!ecr?._id) {
-      toast.error("ECR 정보를 찾을 수 없습니다.");
+      toast.error("ECR 정보를 찾을 수 없어요.");
       return;
     }
 
     const updateRes = await updateDesignRequest(ecr._id, { status: "기각", review_memo: rejectReason });
     if (!updateRes.success) {
-      toast.error(updateRes.message || "ECR 기각에 실패했습니다.");
+      toast.error(updateRes.message || "ECR 기각에 실패했어요.");
       return;
     }
     await addRequestHistory(ecr._id, {
@@ -730,571 +763,397 @@ export default function DesignChangeManagementPage() {
       user_name: "설계팀",
       description: rejectReason,
     });
-    toast.success("ECR이 기각되었습니다.");
+    toast.success("ECR이 기각되었어요.");
     setIsRejectModalOpen(false);
     fetchData();
   };
 
   // --- Stat Cards ---
   const ecrStatCards = [
-    { label: "요청접수", value: ecrStatusCounts["요청접수"] || 0, gradient: "from-indigo-500 to-blue-600", textColor: "text-white" },
-    { label: "영향도분석", value: ecrStatusCounts["영향도분석"] || 0, gradient: "from-amber-400 to-orange-500", textColor: "text-white" },
-    { label: "ECN발행", value: ecrStatusCounts["ECN발행"] || 0, gradient: "from-emerald-400 to-green-600", textColor: "text-white" },
+    { label: "요청접수", value: ecrStatusCounts["요청접수"] || 0, color: "text-info" },
+    { label: "영향도분석", value: ecrStatusCounts["영향도분석"] || 0, color: "text-warning" },
+    { label: "ECN발행", value: ecrStatusCounts["ECN발행"] || 0, color: "text-success" },
   ];
 
   const ecnStatCards = [
-    { label: "도면변경", value: ecnStatusCounts["도면변경"] || 0, gradient: "from-purple-400 to-violet-600", textColor: "text-white" },
-    { label: "통보완료", value: ecnStatusCounts["통보완료"] || 0, gradient: "from-teal-400 to-cyan-600", textColor: "text-white" },
-    { label: "적용완료", value: ecnStatusCounts["적용완료"] || 0, gradient: "from-emerald-400 to-green-600", textColor: "text-white" },
+    { label: "도면변경", value: ecnStatusCounts["도면변경"] || 0, color: "text-primary" },
+    { label: "통보완료", value: ecnStatusCounts["통보완료"] || 0, color: "text-info" },
+    { label: "적용완료", value: ecnStatusCounts["적용완료"] || 0, color: "text-success" },
   ];
 
   const currentStatCards = currentTab === "ecr" ? ecrStatCards : ecnStatCards;
   const currentList = currentTab === "ecr" ? filteredEcr : filteredEcn;
-  const currentStatuses = currentTab === "ecr" ? ECR_STATUSES : ECN_STATUSES;
+
+  const handleRowClick = (id: string) => {
+    setSelectedId(id);
+    setDetailOpen(true);
+  };
 
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4 relative">
+    <div className="flex flex-col h-full gap-3 p-3 relative">
       {loading && (
         <div className="absolute inset-0 bg-background/50 flex items-center justify-center z-50">
           <Loader2 className="h-8 w-8 animate-spin text-primary" />
         </div>
       )}
-      {/* 검색 섹션 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">기간</Label>
-            <div className="flex items-center gap-2">
-              <Input
-                type="date"
-                className="w-[140px] h-9"
-                value={searchDateFrom}
-                onChange={(e) => setSearchDateFrom(e.target.value)}
-              />
-              <span className="text-muted-foreground">~</span>
-              <Input
-                type="date"
-                className="w-[140px] h-9"
-                value={searchDateTo}
-                onChange={(e) => setSearchDateTo(e.target.value)}
-              />
-            </div>
-          </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">구분</Label>
-            <Select value={currentTab} onValueChange={(v) => handleTabSwitch(v as TabType)}>
-              <SelectTrigger className="w-[150px] h-9">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="ecr">ECR (변경요청)</SelectItem>
-                <SelectItem value="ecn">ECN (변경통지)</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+      {/* 탭 선택 + 검색 필터 */}
+      <div className="shrink-0 flex flex-col gap-2">
+        <div className="flex items-center gap-3 px-1">
+          <Select value={currentTab} onValueChange={(v) => handleTabSwitch(v as TabType)}>
+            <SelectTrigger className="w-[170px] h-9">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="ecr">ECR (변경요청)</SelectItem>
+              <SelectItem value="ecn">ECN (변경통지)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        {currentTab === "ecr" ? (
+          <DynamicSearchFilter
+            tableName="dsn_design_request"
+            filterId="c16-change-management-ecr"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={tsEcr.filterConfig}
+            dataCount={filteredEcr.length}
+          />
+        ) : (
+          <DynamicSearchFilter
+            tableName="dsn_ecn"
+            filterId="c16-change-management-ecn"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={tsEcn.filterConfig}
+            dataCount={filteredEcn.length}
+          />
+        )}
+      </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[130px] h-9">
-                <SelectValue placeholder="전체" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">상태 전체</SelectItem>
-                {currentStatuses.map((s) => (
-                  <SelectItem key={s} value={s}>
-                    {s}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
+      {/* 현황 카드 */}
+      <div className="grid grid-cols-3 gap-3 shrink-0">
+        {currentStatCards.map((card) => (
+          <button
+            key={card.label}
+            onClick={() => handleFilterByStatus(card.label)}
+            className="rounded-lg border bg-card px-3 py-2 text-left transition-colors hover:bg-accent/50"
+          >
+            <div className="text-[10px] text-muted-foreground">{card.label}</div>
+            <div className={cn("text-xl font-bold", card.color)}>{card.value}</div>
+          </button>
+        ))}
+      </div>
 
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold">
+            {currentTab === "ecr" ? "설계변경요청(ECR) 목록" : "설계변경통지(ECN) 목록"}
+          </h2>
+          <Badge variant="secondary" className="font-mono">{currentList.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
           {currentTab === "ecr" && (
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">변경유형</Label>
-              <Select value={searchChangeType} onValueChange={setSearchChangeType}>
-                <SelectTrigger className="w-[140px] h-9">
-                  <SelectValue placeholder="전체" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">변경유형 전체</SelectItem>
-                  {CHANGE_TYPES.map((t) => (
-                    <SelectItem key={t} value={t}>
-                      {t}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          )}
-
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">검색어</Label>
-            <Input
-              placeholder="ECR/ECN번호 / 품목 / 요청자"
-              className="w-[260px] h-9"
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-            />
-          </div>
-
-          <div className="flex-1" />
-
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
+            <Button size="sm" onClick={openEcrRegisterModal}>
+              <Plus className="w-4 h-4 mr-1.5" /> ECR 등록
             </Button>
-          </div>
-        </CardContent>
-      </Card>
+          )}
+          <Button variant="ghost" size="sm" onClick={() => (currentTab === "ecr" ? tsEcr : tsEcn).setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
 
-      {/* 메인 분할 레이아웃 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
-        <ResizablePanelGroup direction="horizontal">
-          {/* 왼쪽: 목록 */}
-          <ResizablePanel defaultSize={65} minSize={35}>
-            <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2">
-                  <ClipboardList className="w-4 h-4" />
-                  {currentTab === "ecr" ? "설계변경요청(ECR) 목록" : "설계변경통지(ECN) 목록"}
-                  <Badge variant="secondary" className="font-normal">
-                    {currentList.length}건
-                  </Badge>
-                </div>
-                {currentTab === "ecr" && (
-                  <Button size="sm" onClick={openEcrRegisterModal}>
-                    <Plus className="w-4 h-4 mr-1.5" /> ECR 등록
-                  </Button>
-                )}
-              </div>
+      {/* 테이블 영역 */}
+      <div className="flex-1 flex flex-col overflow-hidden border rounded-lg bg-card">
+        <div className="flex-1 overflow-auto">
+          {currentTab === "ecr" ? (
+            <EDataTable
+              columns={[
+                { key: "id", label: "ECR번호", width: "w-[140px]", render: (val: any) => <span className="font-semibold text-primary">{val}</span> },
+                { key: "changeType", label: "변경유형", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getChangeTypeStyle(val))}>{val}</span> },
+                { key: "status", label: "상태", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcrStatusStyle(val))}>{val}</span> },
+                { key: "urgency", label: "긴급", width: "w-[60px]", align: "center" as const, render: (val: any) => val === "긴급" ? <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-destructive/10 text-destructive border-destructive/20">긴급</span> : <span>-</span> },
+                { key: "target", label: "대상 품목/설비", width: "w-[200px]" },
+                { key: "drawingNo", label: "도면번호", width: "w-[150px]" },
+                { key: "reqDept", label: "요청부서", width: "w-[80px]" },
+                { key: "requester", label: "요청자", width: "w-[70px]" },
+                { key: "date", label: "요청일자", width: "w-[100px]" },
+                { key: "ecnNo", label: "관련 ECN", width: "w-[130px]", render: (val: any) => val ? <button className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-info/10 text-info border border-info/20 hover:bg-info/20 transition-colors" onClick={(e) => { e.stopPropagation(); navigateToLink(val); }}>{val} <ArrowRight className="w-3 h-3 inline" /></button> : <span>-</span> },
+              ] as EDataTableColumn<EcrItem>[]}
+              data={tsEcr.groupData(filteredEcr)}
+              rowKey={(row) => row.id}
+              selectedId={selectedId}
+              onSelect={(id) => { if (id) handleRowClick(id); }}
+              onRowClick={(row) => handleRowClick(row.id)}
+              emptyMessage="조건에 맞는 ECR이 없어요"
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+            />
+          ) : (
+            <EDataTable
+              columns={[
+                { key: "id", label: "ECN번호", width: "w-[140px]", render: (val: any) => <span className="font-semibold text-primary">{val}</span> },
+                { key: "status", label: "상태", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcnStatusStyle(val))}>{val}</span> },
+                { key: "target", label: "대상 품목/설비", width: "w-[200px]" },
+                { key: "drawingAfter", label: "도면 (변경 후)", width: "w-[160px]", render: (val: any) => <span className="text-[13px] text-success font-medium">{val}</span> },
+                { key: "designer", label: "설계담당", width: "w-[80px]" },
+                { key: "date", label: "발행일자", width: "w-[100px]" },
+                { key: "applyDate", label: "적용일자", width: "w-[100px]" },
+                { key: "notifyDepts", label: "통보 부서", width: "w-[140px]", render: (val: any) => <span className="text-[13px] text-muted-foreground">{Array.isArray(val) ? val.join(", ") : val}</span> },
+                { key: "ecrNo", label: "관련 ECR", width: "w-[130px]", render: (val: any) => <button className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-warning/10 text-warning border border-warning/20 hover:bg-warning/20 transition-colors" onClick={(e) => { e.stopPropagation(); navigateToLink(val); }}>{val} <ArrowRight className="w-3 h-3 inline" /></button> },
+              ] as EDataTableColumn<EcnItem>[]}
+              data={tsEcn.groupData(filteredEcn)}
+              rowKey={(row) => row.id}
+              selectedId={selectedId}
+              onSelect={(id) => { if (id) handleRowClick(id); }}
+              onRowClick={(row) => handleRowClick(row.id)}
+              emptyMessage="조건에 맞는 ECN이 없어요"
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+            />
+          )}
+        </div>
+      </div>
 
-              <div className="flex-1 overflow-auto">
-                {currentTab === "ecr" ? (
-                  <Table>
-                    <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                      <TableRow>
-                        <TableHead className="w-[50px] text-center">No</TableHead>
-                        <TableHead className="w-[140px]">ECR번호</TableHead>
-                        <TableHead className="w-[90px] text-center">변경유형</TableHead>
-                        <TableHead className="w-[90px] text-center">상태</TableHead>
-                        <TableHead className="w-[60px] text-center">긴급</TableHead>
-                        <TableHead className="w-[200px]">대상 품목/설비</TableHead>
-                        <TableHead className="w-[150px]">도면번호</TableHead>
-                        <TableHead className="w-[80px]">요청부서</TableHead>
-                        <TableHead className="w-[70px]">요청자</TableHead>
-                        <TableHead className="w-[100px]">요청일자</TableHead>
-                        <TableHead className="w-[130px]">관련 ECN</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {filteredEcr.length === 0 ? (
-                        <TableRow>
-                          <TableCell colSpan={11} className="h-32 text-center text-muted-foreground">
-                            <div className="flex flex-col items-center gap-2">
-                              <Inbox className="w-8 h-8 text-muted-foreground/50" />
-                              <span>조건에 맞는 ECR이 없습니다</span>
-                            </div>
-                          </TableCell>
-                        </TableRow>
+      {/* 상세 정보 다이얼로그 */}
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="max-w-[900px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{currentTab === "ecr" ? `ECR 상세 — ${selectedEcr?.id || ""}` : `ECN 상세 — ${selectedEcn?.id || ""}`}</DialogTitle>
+            <DialogDescription>{currentTab === "ecr" ? "설계변경요청의 상세 정보를 확인해요." : "설계변경통지의 상세 정보를 확인해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="space-y-5">
+          {/* ECR 상세 */}
+          {selectedEcr ? (
+            <>
+              <section>
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
+                  기본 정보
+                </h3>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">ECR번호</span>
+                    <span className="font-medium text-primary">{selectedEcr.id}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">상태</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcrStatusStyle(selectedEcr.status))}>
+                      {selectedEcr.status}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">변경 유형</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getChangeTypeStyle(selectedEcr.changeType))}>
+                      {selectedEcr.changeType}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">긴급도</span>
+                    <span>
+                      {selectedEcr.urgency === "긴급" ? (
+                        <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-destructive/10 text-destructive border-destructive/20">긴급</span>
                       ) : (
-                        filteredEcr.map((item, idx) => (
-                          <TableRow
-                            key={item.id}
-                            className={cn(
-                              "cursor-pointer hover:bg-muted/50 transition-colors",
-                              selectedId === item.id && "bg-primary/5"
-                            )}
-                            onClick={() => setSelectedId(item.id)}
-                          >
-                            <TableCell className="text-center text-muted-foreground">{idx + 1}</TableCell>
-                            <TableCell className="font-semibold text-primary">{item.id}</TableCell>
-                            <TableCell className="text-center">
-                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getChangeTypeStyle(item.changeType))}>
-                                {item.changeType}
-                              </span>
-                            </TableCell>
-                            <TableCell className="text-center">
-                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcrStatusStyle(item.status))}>
-                                {item.status}
-                              </span>
-                            </TableCell>
-                            <TableCell className="text-center">
-                              {item.urgency === "긴급" ? (
-                                <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-rose-100 text-rose-800 border-rose-200">
-                                  긴급
-                                </span>
-                              ) : (
-                                "-"
-                              )}
-                            </TableCell>
-                            <TableCell className="font-medium">{item.target}</TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{item.drawingNo}</TableCell>
-                            <TableCell>{item.reqDept}</TableCell>
-                            <TableCell>{item.requester}</TableCell>
-                            <TableCell>{item.date}</TableCell>
-                            <TableCell>
-                              {item.ecnNo ? (
-                                <button
-                                  className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200 transition-colors"
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    navigateToLink(item.ecnNo);
-                                  }}
-                                >
-                                  {item.ecnNo} <ArrowRight className="w-3 h-3 inline" />
-                                </button>
-                              ) : (
-                                "-"
-                              )}
-                            </TableCell>
-                          </TableRow>
-                        ))
+                        "보통"
                       )}
-                    </TableBody>
-                  </Table>
-                ) : (
-                  <Table>
-                    <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                      <TableRow>
-                        <TableHead className="w-[50px] text-center">No</TableHead>
-                        <TableHead className="w-[140px]">ECN번호</TableHead>
-                        <TableHead className="w-[90px] text-center">상태</TableHead>
-                        <TableHead className="w-[200px]">대상 품목/설비</TableHead>
-                        <TableHead className="w-[160px]">도면 (변경 후)</TableHead>
-                        <TableHead className="w-[80px]">설계담당</TableHead>
-                        <TableHead className="w-[100px]">발행일자</TableHead>
-                        <TableHead className="w-[100px]">적용일자</TableHead>
-                        <TableHead className="w-[140px]">통보 부서</TableHead>
-                        <TableHead className="w-[130px]">관련 ECR</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {filteredEcn.length === 0 ? (
-                        <TableRow>
-                          <TableCell colSpan={10} className="h-32 text-center text-muted-foreground">
-                            <div className="flex flex-col items-center gap-2">
-                              <Inbox className="w-8 h-8 text-muted-foreground/50" />
-                              <span>조건에 맞는 ECN이 없습니다</span>
-                            </div>
-                          </TableCell>
-                        </TableRow>
-                      ) : (
-                        filteredEcn.map((item, idx) => (
-                          <TableRow
-                            key={item.id}
-                            className={cn(
-                              "cursor-pointer hover:bg-muted/50 transition-colors",
-                              selectedId === item.id && "bg-primary/5"
-                            )}
-                            onClick={() => setSelectedId(item.id)}
-                          >
-                            <TableCell className="text-center text-muted-foreground">{idx + 1}</TableCell>
-                            <TableCell className="font-semibold text-primary">{item.id}</TableCell>
-                            <TableCell className="text-center">
-                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcnStatusStyle(item.status))}>
-                                {item.status}
-                              </span>
-                            </TableCell>
-                            <TableCell className="font-medium">{item.target}</TableCell>
-                            <TableCell className="text-xs text-emerald-600 font-medium">{item.drawingAfter}</TableCell>
-                            <TableCell>{item.designer}</TableCell>
-                            <TableCell>{item.date}</TableCell>
-                            <TableCell>{item.applyDate}</TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{item.notifyDepts.join(", ")}</TableCell>
-                            <TableCell>
-                              <button
-                                className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 transition-colors"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  navigateToLink(item.ecrNo);
-                                }}
-                              >
-                                {item.ecrNo} <ArrowRight className="w-3 h-3 inline" />
-                              </button>
-                            </TableCell>
-                          </TableRow>
-                        ))
-                      )}
-                    </TableBody>
-                  </Table>
-                )}
-              </div>
-            </div>
-          </ResizablePanel>
-
-          <ResizableHandle withHandle />
-
-          {/* 오른쪽: 상세 */}
-          <ResizablePanel defaultSize={35} minSize={20}>
-            <div className="flex flex-col h-full bg-card">
-              <div className="flex items-center justify-between p-3 border-b shrink-0">
-                <span className="font-semibold flex items-center gap-2">
-                  <FileText className="w-4 h-4" />
-                  상세 정보
-                </span>
-                {selectedEcr && (
-                  <div className="flex items-center gap-1.5">
-                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => openEcrEditModal(selectedEcr.id)}>
-                      <Pencil className="w-3 h-3 mr-1" /> 수정
-                    </Button>
-                    {selectedEcr.status === "영향도분석" && (
-                      <>
-                        <Button size="sm" className="h-7 text-xs" onClick={() => openEcnIssueModal(selectedEcr.id)}>
-                          <FileText className="w-3 h-3 mr-1" /> ECN 발행
-                        </Button>
-                        <Button variant="destructive" size="sm" className="h-7 text-xs" onClick={() => openRejectModal(selectedEcr.id)}>
-                          <XCircle className="w-3 h-3 mr-1" /> 기각
-                        </Button>
-                      </>
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
+                    <span className="font-medium">{selectedEcr.target}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">도면번호</span>
+                    <span>{selectedEcr.drawingNo}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">요청부서 / 요청자</span>
+                    <span>{selectedEcr.reqDept} / {selectedEcr.requester}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">요청일자</span>
+                    <span>{selectedEcr.date}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">희망 적용시점</span>
+                    <span>{selectedEcr.applyTiming}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">관련 ECN</span>
+                    {selectedEcr.ecnNo ? (
+                      <button
+                        className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-info/10 text-info border border-info/20 hover:bg-info/20 transition-colors"
+                        onClick={() => navigateToLink(selectedEcr.ecnNo)}
+                      >
+                        {selectedEcr.ecnNo} <ArrowRight className="w-3 h-3 inline" />
+                      </button>
+                    ) : (
+                      <span className="text-muted-foreground">미발행</span>
                     )}
                   </div>
-                )}
-              </div>
+                </div>
+              </section>
 
-              <div className="flex-1 overflow-auto p-4 space-y-5">
-                {/* 현황 카드 */}
-                <div className="grid grid-cols-3 gap-3">
-                  {currentStatCards.map((card) => (
-                    <button
-                      key={card.label}
-                      onClick={() => handleFilterByStatus(card.label)}
-                      className={cn(
-                        "rounded-xl p-4 text-center bg-linear-to-br transition-all hover:-translate-y-0.5 hover:shadow-md cursor-pointer",
-                        card.gradient,
-                        card.textColor
-                      )}
-                    >
-                      <div className="text-xs font-medium opacity-90 mb-1">{card.label}</div>
-                      <div className="text-2xl font-bold">{card.value}</div>
-                    </button>
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
+                  {selectedEcr.reason}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 요구 내용</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
+                  {selectedEcr.content}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">영향 범위</h3>
+                <div className="flex flex-wrap gap-1.5">
+                  {selectedEcr.impact.map((imp) => (
+                    <span key={imp} className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getImpactBadgeStyle(imp))}>
+                      {imp}
+                    </span>
                   ))}
                 </div>
+              </section>
 
-                {/* ECR 상세 */}
-                {selectedEcr ? (
-                  <div className="space-y-5">
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
-                        기본 정보
-                      </h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">ECR번호</span>
-                          <span className="font-medium text-primary">{selectedEcr.id}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">상태</span>
-                          <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcrStatusStyle(selectedEcr.status))}>
-                            {selectedEcr.status}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">변경 유형</span>
-                          <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getChangeTypeStyle(selectedEcr.changeType))}>
-                            {selectedEcr.changeType}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">긴급도</span>
-                          <span>
-                            {selectedEcr.urgency === "긴급" ? (
-                              <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-rose-100 text-rose-800 border-rose-200">긴급</span>
-                            ) : (
-                              "보통"
-                            )}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
-                          <span className="font-medium">{selectedEcr.target}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">도면번호</span>
-                          <span>{selectedEcr.drawingNo}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">요청부서 / 요청자</span>
-                          <span>{selectedEcr.reqDept} / {selectedEcr.requester}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">요청일자</span>
-                          <span>{selectedEcr.date}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">희망 적용시점</span>
-                          <span>{selectedEcr.applyTiming}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">관련 ECN</span>
-                          {selectedEcr.ecnNo ? (
-                            <button
-                              className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200 transition-colors"
-                              onClick={() => navigateToLink(selectedEcr.ecnNo)}
-                            >
-                              {selectedEcr.ecnNo} <ArrowRight className="w-3 h-3 inline" />
-                            </button>
-                          ) : (
-                            <span className="text-muted-foreground">미발행</span>
-                          )}
-                        </div>
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
-                        {selectedEcr.reason}
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">변경 요구 내용</h3>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
-                        {selectedEcr.content}
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">영향 범위</h3>
-                      <div className="flex flex-wrap gap-1.5">
-                        {selectedEcr.impact.map((imp) => (
-                          <span key={imp} className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getImpactBadgeStyle(imp))}>
-                            {imp}
-                          </span>
-                        ))}
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
-                      <Timeline history={selectedEcr.history} />
-                    </section>
+              <section>
+                <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
+                <Timeline history={selectedEcr.history} />
+              </section>
+            </>
+          ) : selectedEcn ? (
+            <>
+              <section>
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
+                  ECN 기본 정보
+                </h3>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">ECN번호</span>
+                    <span className="font-medium text-primary">{selectedEcn.id}</span>
                   </div>
-                ) : selectedEcn ? (
-                  <div className="space-y-5">
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
-                        ECN 기본 정보
-                      </h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">ECN번호</span>
-                          <span className="font-medium text-primary">{selectedEcn.id}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">상태</span>
-                          <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcnStatusStyle(selectedEcn.status))}>
-                            {selectedEcn.status}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
-                          <span className="font-medium">{selectedEcn.target}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">설계담당</span>
-                          <span>{selectedEcn.designer}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">발행일자</span>
-                          <span>{selectedEcn.date}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">적용일자</span>
-                          <span>{selectedEcn.applyDate}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">관련 ECR</span>
-                          <button
-                            className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 transition-colors"
-                            onClick={() => navigateToLink(selectedEcn.ecrNo)}
-                          >
-                            {selectedEcn.ecrNo} <ArrowRight className="w-3 h-3 inline" />
-                          </button>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">통보 부서</span>
-                          <span className="text-xs">{selectedEcn.notifyDepts.join(", ")}</span>
-                        </div>
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">변경 전/후 비교</h3>
-                      <div className="grid grid-cols-2 gap-3">
-                        <div className="bg-rose-50 p-3 rounded-md border border-rose-200">
-                          <div className="text-xs font-semibold text-rose-800 mb-1.5">
-                            변경 전 ({selectedEcn.drawingBefore})
-                          </div>
-                          <div className="text-sm whitespace-pre-wrap">{selectedEcn.before}</div>
-                        </div>
-                        <div className="bg-emerald-50 p-3 rounded-md border border-emerald-200">
-                          <div className="text-xs font-semibold text-emerald-800 mb-1.5">
-                            변경 후 ({selectedEcn.drawingAfter})
-                          </div>
-                          <div className="text-sm whitespace-pre-wrap">{selectedEcn.after}</div>
-                        </div>
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap">
-                        {selectedEcn.reason}
-                      </div>
-                      {selectedEcn.remark && (
-                        <p className="text-xs text-muted-foreground mt-2">비고: {selectedEcn.remark}</p>
-                      )}
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
-                      <Timeline history={selectedEcn.history} />
-                    </section>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">상태</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcnStatusStyle(selectedEcn.status))}>
+                      {selectedEcn.status}
+                    </span>
                   </div>
-                ) : (
-                  <div className="flex flex-col items-center justify-center py-10 text-center">
-                    <div className="w-14 h-14 rounded-full bg-muted flex items-center justify-center mb-3">
-                      <FileText className="w-7 h-7 text-muted-foreground" />
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
+                    <span className="font-medium">{selectedEcn.target}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">설계담당</span>
+                    <span>{selectedEcn.designer}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">발행일자</span>
+                    <span>{selectedEcn.date}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">적용일자</span>
+                    <span>{selectedEcn.applyDate}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">관련 ECR</span>
+                    <button
+                      className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-warning/10 text-warning border border-warning/20 hover:bg-warning/20 transition-colors"
+                      onClick={() => navigateToLink(selectedEcn.ecrNo)}
+                    >
+                      {selectedEcn.ecrNo} <ArrowRight className="w-3 h-3 inline" />
+                    </button>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">통보 부서</span>
+                    <span className="text-xs">{selectedEcn.notifyDepts.join(", ")}</span>
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 전/후 비교</h3>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="bg-destructive/5 p-3 rounded-md border border-destructive/20">
+                    <div className="text-xs font-semibold text-destructive mb-1.5">
+                      변경 전 ({selectedEcn.drawingBefore})
                     </div>
-                    <p className="text-sm text-muted-foreground">좌측 목록에서 항목을 선택하세요</p>
+                    <div className="text-sm whitespace-pre-wrap">{selectedEcn.before}</div>
                   </div>
+                  <div className="bg-success/5 p-3 rounded-md border border-success/20">
+                    <div className="text-xs font-semibold text-success mb-1.5">
+                      변경 후 ({selectedEcn.drawingAfter})
+                    </div>
+                    <div className="text-sm whitespace-pre-wrap">{selectedEcn.after}</div>
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap">
+                  {selectedEcn.reason}
+                </div>
+                {selectedEcn.remark && (
+                  <p className="text-xs text-muted-foreground mt-2">비고: {selectedEcn.remark}</p>
                 )}
-              </div>
-            </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
+                <Timeline history={selectedEcn.history} />
+              </section>
+            </>
+          ) : null}
+        </div>
+          </div>
+          <DialogFooter>
+            {selectedEcr && (
+              <>
+                <Button variant="outline" size="sm" onClick={() => { setDetailOpen(false); openEcrEditModal(selectedEcr.id); }}>
+                  <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                </Button>
+                {selectedEcr.status === "영향도분석" && (
+                  <>
+                    <Button size="sm" onClick={() => { setDetailOpen(false); openEcnIssueModal(selectedEcr.id); }}>
+                      <FileText className="w-3.5 h-3.5 mr-1" /> ECN 발행
+                    </Button>
+                    <Button variant="destructive" size="sm" onClick={() => { setDetailOpen(false); openRejectModal(selectedEcr.id); }}>
+                      <XCircle className="w-3.5 h-3.5 mr-1" /> 기각
+                    </Button>
+                  </>
+                )}
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* ECR 등록/수정 모달 */}
       <Dialog open={isEcrModalOpen} onOpenChange={setIsEcrModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[950px] max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">
-              {isEcrEditMode ? "설계변경요청(ECR) 수정" : "설계변경요청(ECR) 등록"}
-            </DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              {isEcrEditMode ? "ECR 정보를 수정합니다." : "새로운 설계변경요청을 등록합니다."}
-            </DialogDescription>
+            <DialogTitle>{isEcrEditMode ? "설계변경요청(ECR) 수정" : "설계변경요청(ECR) 등록"}</DialogTitle>
+            <DialogDescription>{isEcrEditMode ? "ECR 정보를 수정해요." : "새로운 설계변경요청을 등록해요."}</DialogDescription>
           </DialogHeader>
-
-          <div className="flex-1 overflow-auto">
-            <div className="flex flex-col md:flex-row gap-5">
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-5 p-6">
               {/* 좌측: 요청 정보 */}
               <div className="md:w-[380px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
                 <h3 className="text-sm font-semibold pb-2 border-b">변경 요청 정보</h3>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">ECR번호</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">ECR번호</Label>
                   <Input value={ecrForm.id || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
                 </div>
 
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-xs sm:text-sm">요청일자</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청일자</Label>
                     <Input
                       type="date"
                       value={ecrForm.date || ""}
@@ -1303,7 +1162,7 @@ export default function DesignChangeManagementPage() {
                     />
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">희망 적용시점</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">희망 적용시점</Label>
                     <Select value={ecrForm.applyTiming || "즉시"} onValueChange={(v) => setEcrForm((p) => ({ ...p, applyTiming: v }))}>
                       <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                         <SelectValue />
@@ -1319,7 +1178,7 @@ export default function DesignChangeManagementPage() {
 
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 유형 <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 유형 <span className="text-destructive">*</span></Label>
                     <Select value={ecrForm.changeType || ""} onValueChange={(v) => setEcrForm((p) => ({ ...p, changeType: v as ChangeType }))}>
                       <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                         <SelectValue placeholder="선택" />
@@ -1332,7 +1191,7 @@ export default function DesignChangeManagementPage() {
                     </Select>
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">긴급도</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">긴급도</Label>
                     <Select value={ecrForm.urgency || "보통"} onValueChange={(v) => setEcrForm((p) => ({ ...p, urgency: v as "보통" | "긴급" }))}>
                       <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                         <SelectValue />
@@ -1346,7 +1205,7 @@ export default function DesignChangeManagementPage() {
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">대상 품목/설비 <span className="text-destructive">*</span></Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 품목/설비 <span className="text-destructive">*</span></Label>
                   <Input
                     value={ecrForm.target || ""}
                     onChange={(e) => setEcrForm((p) => ({ ...p, target: e.target.value }))}
@@ -1356,7 +1215,7 @@ export default function DesignChangeManagementPage() {
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">대상 도면번호</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 도면번호</Label>
                   <Input
                     value={ecrForm.drawingNo || ""}
                     onChange={(e) => setEcrForm((p) => ({ ...p, drawingNo: e.target.value }))}
@@ -1367,7 +1226,7 @@ export default function DesignChangeManagementPage() {
 
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-xs sm:text-sm">요청부서</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청부서</Label>
                     <Select value={ecrForm.reqDept || ""} onValueChange={(v) => setEcrForm((p) => ({ ...p, reqDept: v }))}>
                       <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                         <SelectValue placeholder="선택" />
@@ -1380,7 +1239,7 @@ export default function DesignChangeManagementPage() {
                     </Select>
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">요청자</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청자</Label>
                     <Input
                       value={ecrForm.requester || ""}
                       onChange={(e) => setEcrForm((p) => ({ ...p, requester: e.target.value }))}
@@ -1397,27 +1256,27 @@ export default function DesignChangeManagementPage() {
                   <h3 className="text-sm font-semibold pb-2 border-b">변경 내용</h3>
 
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 사유 <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 사유 <span className="text-destructive">*</span></Label>
                     <Textarea
                       value={ecrForm.reason || ""}
                       onChange={(e) => setEcrForm((p) => ({ ...p, reason: e.target.value }))}
-                      placeholder="변경이 필요한 구체적인 사유를 기술하세요"
+                      placeholder="변경이 필요한 구체적인 사유를 기술해 주세요"
                       className="min-h-[80px] resize-y text-xs sm:text-sm"
                     />
                   </div>
 
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 요구 내용 <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 요구 내용 <span className="text-destructive">*</span></Label>
                     <Textarea
                       value={ecrForm.content || ""}
                       onChange={(e) => setEcrForm((p) => ({ ...p, content: e.target.value }))}
-                      placeholder="어떻게 변경해야 하는지 구체적으로 기술하세요"
+                      placeholder="어떻게 변경해야 하는지 구체적으로 기술해 주세요"
                       className="min-h-[80px] resize-y text-xs sm:text-sm"
                     />
                   </div>
 
                   <div>
-                    <Label className="text-xs sm:text-sm">영향 범위 (해당 항목 체크)</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">영향 범위 (해당 항목 체크)</Label>
                     <div className="grid grid-cols-3 gap-2 mt-2">
                       {IMPACT_OPTIONS.map((opt) => (
                         <label
@@ -1447,15 +1306,12 @@ export default function DesignChangeManagementPage() {
                   </div>
                 </div>
               </div>
-            </div>
+        </div>
           </div>
-
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setIsEcrModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button onClick={handleSaveEcr} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              <Save className="w-4 h-4 mr-2" /> 저장
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEcrModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveEcr}>
+              <Save className="w-4 h-4 mr-1.5" /> 저장
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -1463,31 +1319,30 @@ export default function DesignChangeManagementPage() {
 
       {/* ECN 발행 모달 */}
       <Dialog open={isEcnModalOpen} onOpenChange={setIsEcnModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[950px] max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">ECN 발행 (설계변경통지)</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">ECR 기반으로 설계변경통지를 발행합니다.</DialogDescription>
+            <DialogTitle>ECN 발행 (설계변경통지)</DialogTitle>
+            <DialogDescription>ECR 기반으로 설계변경통지를 발행해요.</DialogDescription>
           </DialogHeader>
-
-          <div className="flex-1 overflow-auto">
-            <div className="flex flex-col md:flex-row gap-5">
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-5 p-6">
               {/* 좌측 */}
               <div className="md:w-[380px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
                 <h3 className="text-sm font-semibold pb-2 border-b">ECN 기본 정보</h3>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">ECN번호</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">ECN번호</Label>
                   <Input value={ecnForm.id || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">관련 ECR번호</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">관련 ECR번호</Label>
                   <Input value={ecnForm.ecrNo || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
                 </div>
 
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-xs sm:text-sm">발행일자</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">발행일자</Label>
                     <Input
                       type="date"
                       value={ecnForm.date || ""}
@@ -1496,7 +1351,7 @@ export default function DesignChangeManagementPage() {
                     />
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">적용일자 <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">적용일자 <span className="text-destructive">*</span></Label>
                     <Input
                       type="date"
                       value={ecnForm.applyDate || ""}
@@ -1507,12 +1362,12 @@ export default function DesignChangeManagementPage() {
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">대상 품목/설비</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 품목/설비</Label>
                   <Input value={ecnForm.target || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">도면번호 (변경 후)</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">도면번호 (변경 후)</Label>
                   <Input
                     value={ecnForm.drawingAfter || ""}
                     onChange={(e) => setEcnForm((p) => ({ ...p, drawingAfter: e.target.value }))}
@@ -1522,7 +1377,7 @@ export default function DesignChangeManagementPage() {
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">설계 담당</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설계 담당</Label>
                   <Select value={ecnForm.designer || ""} onValueChange={(v) => setEcnForm((p) => ({ ...p, designer: v }))}>
                     <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                       <SelectValue placeholder="선택" />
@@ -1541,7 +1396,7 @@ export default function DesignChangeManagementPage() {
                 <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
                   <h3 className="text-sm font-semibold pb-2 border-b">변경 전/후 비교</h3>
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 전 (AS-IS)</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 전 (AS-IS)</Label>
                     <Textarea
                       value={ecnForm.before || ""}
                       onChange={(e) => setEcnForm((p) => ({ ...p, before: e.target.value }))}
@@ -1550,7 +1405,7 @@ export default function DesignChangeManagementPage() {
                     />
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 후 (TO-BE) <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 후 (TO-BE) <span className="text-destructive">*</span></Label>
                     <Textarea
                       value={ecnForm.after || ""}
                       onChange={(e) => setEcnForm((p) => ({ ...p, after: e.target.value }))}
@@ -1583,7 +1438,7 @@ export default function DesignChangeManagementPage() {
                 <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
                   <h3 className="text-sm font-semibold pb-2 border-b">변경 사유 및 비고</h3>
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 사유 요약</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 사유 요약</Label>
                     <Textarea
                       value={ecnForm.reason || ""}
                       readOnly
@@ -1591,7 +1446,7 @@ export default function DesignChangeManagementPage() {
                     />
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">비고</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">비고</Label>
                     <Textarea
                       value={ecnForm.remark || ""}
                       onChange={(e) => setEcnForm((p) => ({ ...p, remark: e.target.value }))}
@@ -1601,15 +1456,12 @@ export default function DesignChangeManagementPage() {
                   </div>
                 </div>
               </div>
-            </div>
+        </div>
           </div>
-
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setIsEcnModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button onClick={handleSaveEcn} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              <FileText className="w-4 h-4 mr-2" /> ECN 발행
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEcnModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveEcn}>
+              <FileText className="w-4 h-4 mr-1.5" /> ECN 발행
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -1624,17 +1476,17 @@ export default function DesignChangeManagementPage() {
               ECR 기각
             </DialogTitle>
             <DialogDescription className="text-xs sm:text-sm">
-              {rejectTargetId}을 기각 처리합니다.
+              {rejectTargetId}을 기각 처리해요.
             </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-3 sm:space-y-4">
             <div>
-              <Label className="text-xs sm:text-sm">기각 사유 <span className="text-destructive">*</span></Label>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">기각 사유 <span className="text-destructive">*</span></Label>
               <Textarea
                 value={rejectReason}
                 onChange={(e) => setRejectReason(e.target.value)}
-                placeholder="기각 사유를 상세히 입력해주세요"
+                placeholder="기각 사유를 상세히 입력해 주세요"
                 className="min-h-[100px] resize-y text-xs sm:text-sm"
               />
             </div>
@@ -1650,6 +1502,23 @@ export default function DesignChangeManagementPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <TableSettingsModal
+        open={tsEcr.open}
+        onOpenChange={tsEcr.setOpen}
+        tableName={tsEcr.tableName}
+        settingsId={tsEcr.settingsId}
+        defaultVisibleKeys={tsEcr.defaultVisibleKeys}
+        onSave={tsEcr.applySettings}
+      />
+      <TableSettingsModal
+        open={tsEcn.open}
+        onOpenChange={tsEcn.setOpen}
+        tableName={tsEcn.tableName}
+        settingsId={tsEcn.settingsId}
+        defaultVisibleKeys={tsEcn.defaultVisibleKeys}
+        onSave={tsEcn.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_10/design/design-request/page.tsx b/frontend/app/(main)/COMPANY_10/design/design-request/page.tsx
index 29ec9df9..e83c22b3 100644
--- a/frontend/app/(main)/COMPANY_10/design/design-request/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/design/design-request/page.tsx
@@ -2,27 +2,25 @@
 
 import React, { useState, useMemo, useCallback, useEffect } from "react";
 import {
-  Search,
-  RotateCcw,
   Plus,
   Pencil,
   Trash2,
   Calendar,
   Upload,
-  PointerIcon,
   Ruler,
-  ClipboardList,
   FileText,
   Loader2,
+  Inbox,
+  Save,
+  Settings2,
 } from "lucide-react";
+import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Select,
   SelectContent,
@@ -35,14 +33,9 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogDescription,
   DialogFooter,
+  DialogDescription,
 } from "@/components/ui/dialog";
-import {
-  ResizablePanelGroup,
-  ResizablePanel,
-  ResizableHandle,
-} from "@/components/ui/resizable";
 import {
   Table,
   TableBody,
@@ -51,12 +44,16 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import {
   getDesignRequestList,
   createDesignRequest,
   updateDesignRequest,
   deleteDesignRequest,
 } from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 
 // ========== 타입 ==========
 interface HistoryItem {
@@ -105,25 +102,25 @@ interface DesignRequest {
 const STATUS_STYLES: Record<string, string> = {
   신규접수: "bg-muted text-foreground",
   접수대기: "bg-muted text-foreground",
-  검토중: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
-  설계진행: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
-  설계검토: "bg-violet-100 text-violet-800 dark:bg-violet-900/30 dark:text-violet-300",
-  출도완료: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
-  반려: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
+  검토중: "bg-warning/10 text-warning",
+  설계진행: "bg-info/10 text-info",
+  설계검토: "bg-primary/10 text-primary",
+  출도완료: "bg-success/10 text-success",
+  반려: "bg-destructive/10 text-destructive",
   종료: "bg-muted text-muted-foreground",
 };
 
 const TYPE_STYLES: Record<string, string> = {
-  신규설계: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
-  유사설계: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
-  개조설계: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+  신규설계: "bg-info/10 text-info",
+  유사설계: "bg-success/10 text-success",
+  개조설계: "bg-warning/10 text-warning",
 };
 
 const PRIORITY_STYLES: Record<string, string> = {
-  긴급: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
-  높음: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+  긴급: "bg-destructive/10 text-destructive",
+  높음: "bg-warning/10 text-warning",
   보통: "bg-muted text-foreground",
-  낮음: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
+  낮음: "bg-success/10 text-success",
 };
 
 const STATUS_PROGRESS: Record<string, number> = {
@@ -138,16 +135,16 @@ const STATUS_PROGRESS: Record<string, number> = {
 };
 
 function getProgressColor(p: number) {
-  if (p >= 100) return "bg-emerald-500";
-  if (p >= 60) return "bg-amber-500";
-  if (p >= 20) return "bg-blue-500";
+  if (p >= 100) return "bg-success";
+  if (p >= 60) return "bg-warning";
+  if (p >= 20) return "bg-info";
   return "bg-muted";
 }
 
 function getProgressTextColor(p: number) {
-  if (p >= 100) return "text-emerald-500";
-  if (p >= 60) return "text-amber-500";
-  if (p >= 20) return "text-blue-500";
+  if (p >= 100) return "text-success";
+  if (p >= 60) return "text-warning";
+  if (p >= 20) return "text-info";
   return "text-muted-foreground";
 }
 
@@ -168,17 +165,30 @@ const INITIAL_FORM = {
   content: "",
 };
 
+// ========== Grid Columns ==========
+const DR_GRID_COLUMNS = [
+  { key: "request_no", label: "의뢰번호" },
+  { key: "design_type", label: "유형" },
+  { key: "status", label: "상태" },
+  { key: "priority", label: "우선순위" },
+  { key: "target_name", label: "설비/제품명" },
+  { key: "customer", label: "고객명" },
+  { key: "designer", label: "설계담당" },
+  { key: "due_date", label: "납기" },
+  { key: "progress", label: "진행률" },
+];
+
 // ========== 메인 컴포넌트 ==========
 export default function DesignRequestPage() {
+  const ts = useTableSettings("c16-design-request", "dsn_design_request", DR_GRID_COLUMNS);
   const [requests, setRequests] = useState<DesignRequest[]>([]);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [detailOpen, setDetailOpen] = useState(false);
 
-  const [filterStatus, setFilterStatus] = useState("");
-  const [filterType, setFilterType] = useState("");
-  const [filterPriority, setFilterPriority] = useState("");
-  const [filterKeyword, setFilterKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   const [modalOpen, setModalOpen] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
@@ -192,13 +202,6 @@ export default function DesignRequestPage() {
     setLoading(true);
     try {
       const params: Record<string, string> = { source_type: "dr" };
-      if (filterStatus && filterStatus !== "__all__") params.status = filterStatus;
-      if (filterType && filterType !== "__all__") {
-        // design_type은 서버에서 직접 필터링하지 않으므로 클라이언트에서 처리
-      }
-      if (filterPriority && filterPriority !== "__all__") params.priority = filterPriority;
-      if (filterKeyword) params.search = filterKeyword;
-
       const res = await getDesignRequestList(params);
       if (res.success && res.data) {
         setRequests(res.data);
@@ -210,20 +213,35 @@ export default function DesignRequestPage() {
     } finally {
       setLoading(false);
     }
-  }, [filterStatus, filterPriority, filterKeyword]);
+  }, []);
 
   useEffect(() => {
     fetchRequests();
   }, [fetchRequests]);
 
-  // 클라이언트 사이드 필터링 (design_type은 서버에서 지원하지 않으므로)
+  // 클라이언트 사이드 필터링 (DynamicSearchFilter)
   const filteredRequests = useMemo(() => {
-    let list = requests;
-    if (filterType && filterType !== "__all__") {
-      list = list.filter((item) => item.design_type === filterType);
-    }
-    return list;
-  }, [requests, filterType]);
+    if (searchFilters.length === 0) return requests;
+    return requests.filter((item) => {
+      for (const f of searchFilters) {
+        const val = item[f.columnName as keyof DesignRequest];
+        const strVal = val !== undefined && val !== null ? (Array.isArray(val) ? val.join(",") : String(val)) : "";
+        if (f.operator === "contains") {
+          if (!strVal.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (strVal !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(strVal)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && strVal < from) return false;
+          if (to && strVal > to) return false;
+        }
+      }
+      return true;
+    });
+  }, [requests, searchFilters]);
 
   const selectedItem = useMemo(() => {
     if (!selectedId) return null;
@@ -238,12 +256,6 @@ export default function DesignRequestPage() {
     };
   }, [requests]);
 
-  const handleResetFilter = useCallback(() => {
-    setFilterStatus("");
-    setFilterType("");
-    setFilterPriority("");
-    setFilterKeyword("");
-  }, []);
 
   // 채번: 기존 데이터 기반으로 다음 번호 생성
   const generateNextNo = useCallback(() => {
@@ -288,14 +300,15 @@ export default function DesignRequestPage() {
       drawing_no: selectedItem.drawing_no || "",
       content: selectedItem.content || "",
     });
+    setDetailOpen(false);
     setModalOpen(true);
   }, [selectedItem]);
 
   const handleSave = useCallback(async () => {
-    if (!form.target_name.trim()) { alert("설비/제품명을 입력하세요."); return; }
-    if (!form.design_type) { alert("의뢰 유형을 선택하세요."); return; }
-    if (!form.due_date) { alert("납기를 입력하세요."); return; }
-    if (!form.spec.trim()) { alert("요구사양을 입력하세요."); return; }
+    if (!form.target_name.trim()) { toast.error("설비/제품명을 입력해 주세요."); return; }
+    if (!form.design_type) { toast.error("의뢰 유형을 선택해 주세요."); return; }
+    if (!form.due_date) { toast.error("납기를 입력해 주세요."); return; }
+    if (!form.spec.trim()) { toast.error("요구사양을 입력해 주세요."); return; }
 
     setSaving(true);
     try {
@@ -334,6 +347,7 @@ export default function DesignRequestPage() {
       }
 
       if (res.success) {
+        toast.success(isEditMode ? "수정되었어요." : "등록되었어요.");
         setModalOpen(false);
         await fetchRequests();
         if (isEditMode && editingId) {
@@ -342,10 +356,10 @@ export default function DesignRequestPage() {
           setSelectedId(res.data.id);
         }
       } else {
-        alert(`저장 실패: ${res.message || "알 수 없는 오류"}`);
+        toast.error(res.message || "저장에 실패했어요.");
       }
     } catch (err: any) {
-      alert(`저장 중 오류가 발생했습니다: ${err.message}`);
+      toast.error("저장에 실패했어요.");
     } finally {
       setSaving(false);
     }
@@ -354,18 +368,20 @@ export default function DesignRequestPage() {
   const handleDelete = useCallback(async () => {
     if (!selectedId || !selectedItem) return;
     const displayNo = selectedItem.request_no || selectedId;
-    if (!confirm(`${displayNo} 설계의뢰를 삭제하시겠습니까?`)) return;
+    if (!confirm(`${displayNo} 설계의뢰를 삭제할까요?`)) return;
 
     try {
       const res = await deleteDesignRequest(selectedId);
       if (res.success) {
+        toast.success("삭제되었어요.");
         setSelectedId(null);
+        setDetailOpen(false);
         await fetchRequests();
       } else {
-        alert(`삭제 실패: ${res.message || "알 수 없는 오류"}`);
+        toast.error(res.message || "삭제에 실패했어요.");
       }
     } catch (err: any) {
-      alert(`삭제 중 오류가 발생했습니다: ${err.message}`);
+      toast.error("삭제에 실패했어요.");
     }
   }, [selectedId, selectedItem, fetchRequests]);
 
@@ -375,9 +391,9 @@ export default function DesignRequestPage() {
       const due = new Date(dueDate);
       const diff = Math.ceil((due.getTime() - today.getTime()) / 86400000);
       if (diff < 0) return { text: `${Math.abs(diff)}일 초과`, color: "text-destructive" };
-      if (diff === 0) return { text: "오늘", color: "text-amber-500" };
-      if (diff <= 7) return { text: `${diff}일 남음`, color: "text-amber-500" };
-      return { text: `${diff}일 남음`, color: "text-emerald-500" };
+      if (diff === 0) return { text: "오늘", color: "text-warning" };
+      if (diff <= 7) return { text: `${diff}일 남음`, color: "text-warning" };
+      return { text: `${diff}일 남음`, color: "text-success" };
     },
     [today]
   );
@@ -386,444 +402,370 @@ export default function DesignRequestPage() {
     return STATUS_PROGRESS[status] ?? 0;
   }, []);
 
+  const handleRowClick = useCallback((id: string) => {
+    setSelectedId(id);
+    setDetailOpen(true);
+  }, []);
+
   return (
-    <div className="flex h-full flex-col gap-2 p-3">
-      {/* 검색 섹션 */}
-      <div className="flex shrink-0 flex-wrap items-center gap-2 rounded-lg border bg-card px-3 py-2">
-        <Select value={filterStatus} onValueChange={setFilterStatus}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="상태 전체" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">상태 전체</SelectItem>
-            {["신규접수", "접수대기", "검토중", "설계진행", "설계검토", "출도완료", "반려", "종료"].map((s) => (
-              <SelectItem key={s} value={s}>{s}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Select value={filterType} onValueChange={setFilterType}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="유형 전체" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">유형 전체</SelectItem>
-            {["신규설계", "유사설계", "개조설계"].map((s) => (
-              <SelectItem key={s} value={s}>{s}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Select value={filterPriority} onValueChange={setFilterPriority}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="우선순위 전체" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">우선순위 전체</SelectItem>
-            {["긴급", "높음", "보통", "낮음"].map((s) => (
-              <SelectItem key={s} value={s}>{s}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <div className="relative">
-          <Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            value={filterKeyword}
-            onChange={(e) => setFilterKeyword(e.target.value)}
-            placeholder="의뢰번호 / 설비명 / 고객명 검색"
-            className="h-7 w-[240px] pl-7 text-xs"
-          />
-        </div>
-        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={handleResetFilter}>
-          <RotateCcw className="mr-1 h-3 w-3" />초기화
-        </Button>
-        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => fetchRequests()}>
-          <Search className="mr-1 h-3 w-3" />조회
-        </Button>
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 검색 필터 */}
+      <div className="shrink-0">
+        <DynamicSearchFilter
+          tableName="dsn_design_request"
+          filterId="c16-design-request"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredRequests.length}
+        />
       </div>
 
-      {/* 메인 영역 */}
-      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1 rounded-lg">
-        {/* 왼쪽: 목록 */}
-        <ResizablePanel defaultSize={55} minSize={30}>
-          <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
-            <div className="flex shrink-0 items-center justify-between border-b bg-muted/30 px-3 py-1.5">
-              <span className="text-sm font-bold">
-                <Ruler className="mr-1 inline h-4 w-4" />
-                설계의뢰 목록 (<span className="text-primary">{filteredRequests.length}</span>건)
-              </span>
-              <Button size="sm" className="h-7 text-xs" onClick={handleOpenRegister}>
-                <Plus className="mr-1 h-3 w-3" />설계의뢰 등록
-              </Button>
-            </div>
-            <ScrollArea className="flex-1">
-              {loading ? (
-                <div className="flex items-center justify-center py-16">
-                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                  <span className="ml-2 text-sm text-muted-foreground">불러오는 중...</span>
-                </div>
-              ) : (
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="w-[100px] text-[11px]">의뢰번호</TableHead>
-                      <TableHead className="w-[70px] text-center text-[11px]">유형</TableHead>
-                      <TableHead className="w-[70px] text-center text-[11px]">상태</TableHead>
-                      <TableHead className="w-[60px] text-center text-[11px]">우선순위</TableHead>
-                      <TableHead className="text-[11px]">설비/제품명</TableHead>
-                      <TableHead className="w-[90px] text-[11px]">고객명</TableHead>
-                      <TableHead className="w-[70px] text-[11px]">설계담당</TableHead>
-                      <TableHead className="w-[85px] text-[11px]">납기</TableHead>
-                      <TableHead className="w-[65px] text-center text-[11px]">진행률</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {filteredRequests.length === 0 && (
-                      <TableRow>
-                        <TableCell colSpan={9} className="py-12 text-center">
-                          <div className="flex flex-col items-center gap-1 text-muted-foreground">
-                            <Ruler className="h-8 w-8" />
-                            <span className="text-sm">등록된 설계의뢰가 없습니다</span>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    )}
-                    {filteredRequests.map((item) => {
-                      const progress = getProgress(item.status);
+      {/* 현황 카드 */}
+      <div className="grid grid-cols-3 gap-3 shrink-0">
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">접수대기</div>
+          <div className="text-xl font-bold text-info">{statusCounts.접수대기}</div>
+        </div>
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">설계진행</div>
+          <div className="text-xl font-bold text-warning">{statusCounts.설계진행}</div>
+        </div>
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">출도완료</div>
+          <div className="text-xl font-bold text-success">{statusCounts.출도완료}</div>
+        </div>
+      </div>
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold">설계의뢰 관리</h2>
+          <Badge variant="secondary" className="font-mono">{filteredRequests.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" onClick={handleOpenRegister}>
+            <Plus className="w-4 h-4 mr-1.5" /> 설계의뢰 등록
+          </Button>
+          <div className="mx-1 h-6 w-px bg-border" />
+          <Button variant="outline" size="sm" disabled={!selectedId} onClick={handleOpenEdit}>
+            <Pencil className="w-4 h-4 mr-1.5" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 테이블 영역 */}
+      <div className="flex-1 flex flex-col overflow-hidden border rounded-lg bg-card">
+        <EDataTable<DesignRequest>
+          columns={ts.visibleColumns.map((col): EDataTableColumn<DesignRequest> => ({
+            key: col.key,
+            label: col.label,
+            width: col.key === "request_no" ? "w-[100px]" : col.key === "design_type" ? "w-[70px]" : col.key === "status" ? "w-[70px]" : col.key === "priority" ? "w-[60px]" : col.key === "customer" ? "w-[90px]" : col.key === "designer" ? "w-[70px]" : col.key === "due_date" ? "w-[85px]" : col.key === "progress" ? "w-[65px]" : undefined,
+            align: (col.key === "design_type" || col.key === "status" || col.key === "priority" || col.key === "progress") ? "center" : undefined,
+            render: col.key === "request_no"
+              ? (val: any) => <span className="text-[11px] font-semibold text-primary">{val || "-"}</span>
+              : col.key === "design_type"
+              ? (val: any) => val ? <Badge className={cn("text-[9px]", TYPE_STYLES[val])}>{val}</Badge> : <span>-</span>
+              : col.key === "status"
+              ? (val: any) => <Badge className={cn("text-[9px]", STATUS_STYLES[val])}>{val}</Badge>
+              : col.key === "priority"
+              ? (val: any) => <Badge className={cn("text-[9px]", PRIORITY_STYLES[val])}>{val}</Badge>
+              : col.key === "progress"
+              ? (_val: any, row: DesignRequest) => {
+                  const progress = STATUS_PROGRESS[row.status] ?? 0;
+                  return (
+                    <div className="flex items-center gap-1.5">
+                      <div className="h-1.5 w-12 overflow-hidden rounded-full bg-muted">
+                        <div className={cn("h-full rounded-full transition-all", getProgressColor(progress))} style={{ width: `${progress}%` }} />
+                      </div>
+                      <span className={cn("text-[10px] font-semibold", getProgressTextColor(progress))}>{progress}%</span>
+                    </div>
+                  );
+                }
+              : undefined,
+          }))}
+          data={ts.groupData(filteredRequests)}
+          loading={loading}
+          emptyMessage="등록된 설계의뢰가 없어요"
+          selectedId={selectedId}
+          onSelect={(id) => setSelectedId(id)}
+          onRowClick={(row) => handleRowClick(row.id)}
+          draggableColumns={false}
+        />
+      </div>
+
+      {/* 상세 정보 다이얼로그 */}
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="max-w-[900px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{selectedItem ? `설계의뢰 상세 — ${selectedItem.request_no}` : "설계의뢰 상세"}</DialogTitle>
+            <DialogDescription>설계의뢰의 상세 정보를 확인해요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        {selectedItem && (
+          <div className="space-y-4">
+            {/* 기본 정보 */}
+            <div>
+              <div className="mb-2 text-xs font-bold">
+                <FileText className="mr-1 inline h-3.5 w-3.5" />기본 정보
+              </div>
+              <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-lg border bg-muted/10 p-3">
+                <InfoRow label="의뢰번호" value={<span className="font-semibold text-primary">{selectedItem.request_no || "-"}</span>} />
+                <InfoRow label="상태" value={<Badge className={cn("text-[10px]", STATUS_STYLES[selectedItem.status])}>{selectedItem.status}</Badge>} />
+                <InfoRow label="유형" value={selectedItem.design_type ? <Badge className={cn("text-[10px]", TYPE_STYLES[selectedItem.design_type])}>{selectedItem.design_type}</Badge> : "-"} />
+                <InfoRow label="우선순위" value={<Badge className={cn("text-[10px]", PRIORITY_STYLES[selectedItem.priority])}>{selectedItem.priority}</Badge>} />
+                <InfoRow label="설비/제품명" value={selectedItem.target_name || "-"} />
+                <InfoRow label="고객명" value={selectedItem.customer || "-"} />
+                <InfoRow label="의뢰부서 / 의뢰자" value={`${selectedItem.req_dept || "-"} / ${selectedItem.requester || "-"}`} />
+                <InfoRow label="설계담당" value={selectedItem.designer || "미배정"} />
+                <InfoRow label="의뢰일자" value={selectedItem.request_date || "-"} />
+                <InfoRow
+                  label="납기"
+                  value={
+                    selectedItem.due_date ? (
+                      <span>
+                        {selectedItem.due_date}{" "}
+                        <span className={cn("text-[11px]", getDueDateInfo(selectedItem.due_date).color)}>
+                          ({getDueDateInfo(selectedItem.due_date).text})
+                        </span>
+                      </span>
+                    ) : "-"
+                  }
+                />
+                <InfoRow label="수주번호" value={selectedItem.order_no || "-"} />
+                <InfoRow
+                  label="진행률"
+                  value={
+                    (() => {
+                      const progress = getProgress(selectedItem.status);
                       return (
-                        <TableRow
-                          key={item.id}
-                          className={cn("cursor-pointer", selectedId === item.id && "bg-accent")}
-                          onClick={() => setSelectedId(item.id)}
-                        >
-                          <TableCell className="text-[11px] font-semibold text-primary">{item.request_no || "-"}</TableCell>
-                          <TableCell className="text-center">
-                            {item.design_type ? (
-                              <Badge className={cn("text-[9px]", TYPE_STYLES[item.design_type])}>{item.design_type}</Badge>
-                            ) : "-"}
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <Badge className={cn("text-[9px]", STATUS_STYLES[item.status])}>{item.status}</Badge>
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <Badge className={cn("text-[9px]", PRIORITY_STYLES[item.priority])}>{item.priority}</Badge>
-                          </TableCell>
-                          <TableCell className="text-xs font-medium">{item.target_name || "-"}</TableCell>
-                          <TableCell className="text-[11px]">{item.customer || "-"}</TableCell>
-                          <TableCell className="text-[11px]">{item.designer || "-"}</TableCell>
-                          <TableCell className="text-[11px]">{item.due_date || "-"}</TableCell>
-                          <TableCell>
-                            <div className="flex items-center gap-1.5">
-                              <div className="h-1.5 w-12 overflow-hidden rounded-full bg-muted">
-                                <div className={cn("h-full rounded-full transition-all", getProgressColor(progress))} style={{ width: `${progress}%` }} />
-                              </div>
-                              <span className={cn("text-[10px] font-semibold", getProgressTextColor(progress))}>{progress}%</span>
-                            </div>
-                          </TableCell>
-                        </TableRow>
+                        <div className="flex items-center gap-2">
+                          <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
+                            <div className={cn("h-full rounded-full", getProgressColor(progress))} style={{ width: `${progress}%` }} />
+                          </div>
+                          <span className={cn("text-xs font-bold", getProgressTextColor(progress))}>{progress}%</span>
+                        </div>
                       );
-                    })}
-                  </TableBody>
-                </Table>
-              )}
-            </ScrollArea>
-          </div>
-        </ResizablePanel>
-
-        <ResizableHandle withHandle />
-
-        {/* 오른쪽: 상세 */}
-        <ResizablePanel defaultSize={45} minSize={25}>
-          <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
-            <div className="flex shrink-0 items-center justify-between border-b bg-muted/30 px-3 py-1.5">
-              <span className="text-sm font-bold">
-                <ClipboardList className="mr-1 inline h-4 w-4" />
-                상세 정보
-              </span>
-              {selectedItem && (
-                <div className="flex gap-1.5">
-                  <Button variant="outline" size="sm" className="h-6 text-[10px]" onClick={handleOpenEdit}>
-                    <Pencil className="mr-0.5 h-3 w-3" />수정
-                  </Button>
-                  <Button variant="outline" size="sm" className="h-6 text-[10px] text-destructive hover:text-destructive" onClick={handleDelete}>
-                    <Trash2 className="mr-0.5 h-3 w-3" />삭제
-                  </Button>
-                </div>
-              )}
+                    })()
+                  }
+                />
+              </div>
             </div>
-            <ScrollArea className="flex-1">
-              <div className="p-3">
-                {/* 상태 카드 */}
-                <div className="mb-3 grid grid-cols-3 gap-2">
-                  <Card
-                    className="cursor-pointer rounded-lg border px-3 py-2 shadow-none transition-colors hover:bg-accent/50"
-                    onClick={() => setFilterStatus("접수대기")}
-                  >
-                    <div className="text-[10px] text-muted-foreground">접수대기</div>
-                    <div className="text-xl font-bold text-blue-500">{statusCounts.접수대기}</div>
-                  </Card>
-                  <Card
-                    className="cursor-pointer rounded-lg border px-3 py-2 shadow-none transition-colors hover:bg-accent/50"
-                    onClick={() => setFilterStatus("설계진행")}
-                  >
-                    <div className="text-[10px] text-muted-foreground">설계진행</div>
-                    <div className="text-xl font-bold text-amber-500">{statusCounts.설계진행}</div>
-                  </Card>
-                  <Card
-                    className="cursor-pointer rounded-lg border px-3 py-2 shadow-none transition-colors hover:bg-accent/50"
-                    onClick={() => setFilterStatus("출도완료")}
-                  >
-                    <div className="text-[10px] text-muted-foreground">출도완료</div>
-                    <div className="text-xl font-bold text-emerald-500">{statusCounts.출도완료}</div>
-                  </Card>
-                </div>
 
-                {/* 상세 내용 */}
-                {!selectedItem ? (
-                  <div className="flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground">
-                    <PointerIcon className="h-8 w-8" />
-                    <span className="text-sm">좌측 목록에서 설계의뢰를 선택하세요</span>
+            {/* 요구사양 */}
+            <div>
+              <div className="mb-2 text-xs font-bold">
+                <FileText className="mr-1 inline h-3.5 w-3.5" />요구사양
+              </div>
+              <div className="rounded-lg border bg-muted/10 p-3">
+                <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed">{selectedItem.spec || "-"}</pre>
+                {selectedItem.drawing_no && (
+                  <div className="mt-2 text-xs">
+                    <span className="text-muted-foreground">참조 도면: </span>
+                    <span className="text-primary">{selectedItem.drawing_no}</span>
                   </div>
-                ) : (
-                  <div className="space-y-4">
-                    {/* 기본 정보 */}
-                    <div>
-                      <div className="mb-2 text-xs font-bold">
-                        <FileText className="mr-1 inline h-3.5 w-3.5" />기본 정보
-                      </div>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-lg border bg-muted/10 p-3">
-                        <InfoRow label="의뢰번호" value={<span className="font-semibold text-primary">{selectedItem.request_no || "-"}</span>} />
-                        <InfoRow label="상태" value={<Badge className={cn("text-[10px]", STATUS_STYLES[selectedItem.status])}>{selectedItem.status}</Badge>} />
-                        <InfoRow label="유형" value={selectedItem.design_type ? <Badge className={cn("text-[10px]", TYPE_STYLES[selectedItem.design_type])}>{selectedItem.design_type}</Badge> : "-"} />
-                        <InfoRow label="우선순위" value={<Badge className={cn("text-[10px]", PRIORITY_STYLES[selectedItem.priority])}>{selectedItem.priority}</Badge>} />
-                        <InfoRow label="설비/제품명" value={selectedItem.target_name || "-"} />
-                        <InfoRow label="고객명" value={selectedItem.customer || "-"} />
-                        <InfoRow label="의뢰부서 / 의뢰자" value={`${selectedItem.req_dept || "-"} / ${selectedItem.requester || "-"}`} />
-                        <InfoRow label="설계담당" value={selectedItem.designer || "미배정"} />
-                        <InfoRow label="의뢰일자" value={selectedItem.request_date || "-"} />
-                        <InfoRow
-                          label="납기"
-                          value={
-                            selectedItem.due_date ? (
-                              <span>
-                                {selectedItem.due_date}{" "}
-                                <span className={cn("text-[11px]", getDueDateInfo(selectedItem.due_date).color)}>
-                                  ({getDueDateInfo(selectedItem.due_date).text})
-                                </span>
-                              </span>
-                            ) : "-"
-                          }
-                        />
-                        <InfoRow label="수주번호" value={selectedItem.order_no || "-"} />
-                        <InfoRow
-                          label="진행률"
-                          value={
-                            (() => {
-                              const progress = getProgress(selectedItem.status);
-                              return (
-                                <div className="flex items-center gap-2">
-                                  <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
-                                    <div className={cn("h-full rounded-full", getProgressColor(progress))} style={{ width: `${progress}%` }} />
-                                  </div>
-                                  <span className={cn("text-xs font-bold", getProgressTextColor(progress))}>{progress}%</span>
-                                </div>
-                              );
-                            })()
-                          }
-                        />
-                      </div>
-                    </div>
-
-                    {/* 요구사양 */}
-                    <div>
-                      <div className="mb-2 text-xs font-bold">
-                        <FileText className="mr-1 inline h-3.5 w-3.5" />요구사양
-                      </div>
-                      <div className="rounded-lg border bg-muted/10 p-3">
-                        <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed">{selectedItem.spec || "-"}</pre>
-                        {selectedItem.drawing_no && (
-                          <div className="mt-2 text-xs">
-                            <span className="text-muted-foreground">참조 도면: </span>
-                            <span className="text-primary">{selectedItem.drawing_no}</span>
-                          </div>
-                        )}
-                        {selectedItem.content && (
-                          <div className="mt-1 text-xs">
-                            <span className="text-muted-foreground">비고: </span>{selectedItem.content}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* 진행 이력 */}
-                    {selectedItem.history && selectedItem.history.length > 0 && (
-                      <div>
-                        <div className="mb-2 text-xs font-bold">
-                          <Calendar className="mr-1 inline h-3.5 w-3.5" />진행 이력
-                        </div>
-                        <div className="space-y-0">
-                          {selectedItem.history.map((h, idx) => {
-                            const isLast = idx === selectedItem.history.length - 1;
-                            const isDone = h.step === "출도완료" || h.step === "종료";
-                            return (
-                              <div key={h.id || idx} className="flex gap-3">
-                                <div className="flex flex-col items-center">
-                                  <div
-                                    className={cn(
-                                      "mt-1 h-2.5 w-2.5 shrink-0 rounded-full border-2",
-                                      isLast && !isDone
-                                        ? "border-blue-500 bg-blue-500"
-                                        : isDone || !isLast
-                                          ? "border-emerald-500 bg-emerald-500"
-                                          : "border-muted-foreground bg-muted-foreground"
-                                    )}
-                                  />
-                                  {!isLast && <div className="w-px flex-1 bg-border" />}
-                                </div>
-                                <div className="pb-3">
-                                  <Badge className={cn("text-[9px]", STATUS_STYLES[h.step])}>{h.step}</Badge>
-                                  <div className="mt-0.5 text-xs">{h.description}</div>
-                                  <div className="text-[10px] text-muted-foreground">{h.history_date} · {h.user_name}</div>
-                                </div>
-                              </div>
-                            );
-                          })}
-                        </div>
-                      </div>
-                    )}
+                )}
+                {selectedItem.content && (
+                  <div className="mt-1 text-xs">
+                    <span className="text-muted-foreground">비고: </span>{selectedItem.content}
                   </div>
                 )}
               </div>
-            </ScrollArea>
+            </div>
+
+            {/* 진행 이력 */}
+            {selectedItem.history && selectedItem.history.length > 0 && (
+              <div>
+                <div className="mb-2 text-xs font-bold">
+                  <Calendar className="mr-1 inline h-3.5 w-3.5" />진행 이력
+                </div>
+                <div className="space-y-0">
+                  {selectedItem.history.map((h, idx) => {
+                    const isLast = idx === selectedItem.history.length - 1;
+                    const isDone = h.step === "출도완료" || h.step === "종료";
+                    return (
+                      <div key={h.id || idx} className="flex gap-3">
+                        <div className="flex flex-col items-center">
+                          <div
+                            className={cn(
+                              "mt-1 h-2.5 w-2.5 shrink-0 rounded-full border-2",
+                              isLast && !isDone
+                                ? "border-primary bg-primary"
+                                : isDone || !isLast
+                                  ? "border-success bg-success"
+                                  : "border-muted-foreground bg-muted-foreground"
+                            )}
+                          />
+                          {!isLast && <div className="w-px flex-1 bg-border" />}
+                        </div>
+                        <div className="pb-3">
+                          <Badge className={cn("text-[9px]", STATUS_STYLES[h.step])}>{h.step}</Badge>
+                          <div className="mt-0.5 text-xs">{h.description}</div>
+                          <div className="text-[10px] text-muted-foreground">{h.history_date} · {h.user_name}</div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
           </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
+        )}
+          </div>
+          <DialogFooter>
+            {selectedItem && (
+              <>
+                <Button variant="outline" size="sm" onClick={handleOpenEdit}>
+                  <Pencil className="mr-1 h-3.5 w-3.5" />수정
+                </Button>
+                <Button variant="outline" size="sm" className="text-destructive hover:text-destructive" onClick={handleDelete}>
+                  <Trash2 className="mr-1 h-3.5 w-3.5" />삭제
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 등록/수정 모달 */}
       <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[1100px]">
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
           <DialogHeader>
-            <DialogTitle className="text-lg">
-              {isEditMode ? <><Pencil className="mr-1.5 inline h-5 w-5" />설계의뢰 수정</> : <><Plus className="mr-1.5 inline h-5 w-5" />설계의뢰 등록</>}
-            </DialogTitle>
-            <DialogDescription className="text-sm">
-              {isEditMode ? "설계의뢰 정보를 수정합니다." : "새 설계의뢰를 등록합니다."}
-            </DialogDescription>
+            <DialogTitle>{isEditMode ? "설계의뢰 수정" : "설계의뢰 등록"}</DialogTitle>
+            <DialogDescription>{isEditMode ? "설계의뢰 정보를 수정해요." : "새 설계의뢰를 등록해요."}</DialogDescription>
           </DialogHeader>
-          <div className="flex gap-6">
-            {/* 좌측: 기본 정보 */}
-            <div className="w-[420px] shrink-0 space-y-4">
-              <div className="text-sm font-bold">
-                <FileText className="mr-1 inline h-4 w-4" />의뢰 기본 정보
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-6 p-6">
+          {/* 좌측: 기본 정보 */}
+          <div className="md:w-[420px] shrink-0 space-y-4">
+            <h3 className="text-sm font-semibold pb-2 border-b">의뢰 기본 정보</h3>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰번호</Label>
+              <Input value={form.request_no} readOnly className="h-9 bg-muted cursor-not-allowed" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰일자</Label>
+                <Input type="date" value={form.request_date} onChange={(e) => setForm((p) => ({ ...p, request_date: e.target.value }))} className="h-9" />
               </div>
               <div>
-                <Label className="text-sm">의뢰번호</Label>
-                <Input value={form.request_no} readOnly className="h-9 text-sm" />
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <Label className="text-sm">의뢰일자</Label>
-                  <Input type="date" value={form.request_date} onChange={(e) => setForm((p) => ({ ...p, request_date: e.target.value }))} className="h-9 text-sm" />
-                </div>
-                <div>
-                  <Label className="text-sm">납기 <span className="text-destructive">*</span></Label>
-                  <Input type="date" value={form.due_date} onChange={(e) => setForm((p) => ({ ...p, due_date: e.target.value }))} className="h-9 text-sm" />
-                </div>
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <Label className="text-sm">의뢰 유형 <span className="text-destructive">*</span></Label>
-                  <Select value={form.design_type} onValueChange={(v) => setForm((p) => ({ ...p, design_type: v }))}>
-                    <SelectTrigger className="h-9 text-sm" size="sm"><SelectValue placeholder="선택" /></SelectTrigger>
-                    <SelectContent>
-                      {["신규설계", "유사설계", "개조설계"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div>
-                  <Label className="text-sm">우선순위 <span className="text-destructive">*</span></Label>
-                  <Select value={form.priority} onValueChange={(v) => setForm((p) => ({ ...p, priority: v }))}>
-                    <SelectTrigger className="h-9 text-sm" size="sm"><SelectValue placeholder="선택" /></SelectTrigger>
-                    <SelectContent>
-                      {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-                    </SelectContent>
-                  </Select>
-                </div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">납기 <span className="text-destructive">*</span></Label>
+                <Input type="date" value={form.due_date} onChange={(e) => setForm((p) => ({ ...p, due_date: e.target.value }))} className="h-9" />
               </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-sm">설비/제품명 <span className="text-destructive">*</span></Label>
-                <Input value={form.target_name} onChange={(e) => setForm((p) => ({ ...p, target_name: e.target.value }))} placeholder="설비 또는 제품명 입력" className="h-9 text-sm" />
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <Label className="text-sm">의뢰부서</Label>
-                  <Select value={form.req_dept} onValueChange={(v) => setForm((p) => ({ ...p, req_dept: v }))}>
-                    <SelectTrigger className="h-9 text-sm" size="sm"><SelectValue placeholder="선택" /></SelectTrigger>
-                    <SelectContent>
-                      {["영업팀", "기획팀", "생산팀", "품질팀"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div>
-                  <Label className="text-sm">의뢰자</Label>
-                  <Input value={form.requester} onChange={(e) => setForm((p) => ({ ...p, requester: e.target.value }))} placeholder="의뢰자명" className="h-9 text-sm" />
-                </div>
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <Label className="text-sm">고객명</Label>
-                  <Input value={form.customer} onChange={(e) => setForm((p) => ({ ...p, customer: e.target.value }))} placeholder="고객/거래처명" className="h-9 text-sm" />
-                </div>
-                <div>
-                  <Label className="text-sm">수주번호</Label>
-                  <Input value={form.order_no} onChange={(e) => setForm((p) => ({ ...p, order_no: e.target.value }))} placeholder="관련 수주번호" className="h-9 text-sm" />
-                </div>
-              </div>
-              <div>
-                <Label className="text-sm">설계담당자</Label>
-                <Select value={form.designer} onValueChange={(v) => setForm((p) => ({ ...p, designer: v }))}>
-                  <SelectTrigger className="h-9 text-sm" size="sm"><SelectValue placeholder="선택" /></SelectTrigger>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰 유형 <span className="text-destructive">*</span></Label>
+                <Select value={form.design_type} onValueChange={(v) => setForm((p) => ({ ...p, design_type: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
                   <SelectContent>
-                    {["이설계", "박도면", "최기구", "김전장"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                    {["신규설계", "유사설계", "개조설계"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">우선순위 <span className="text-destructive">*</span></Label>
+                <Select value={form.priority} onValueChange={(v) => setForm((p) => ({ ...p, priority: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
                   </SelectContent>
                 </Select>
               </div>
             </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설비/제품명 <span className="text-destructive">*</span></Label>
+              <Input value={form.target_name} onChange={(e) => setForm((p) => ({ ...p, target_name: e.target.value }))} placeholder="설비 또는 제품명 입력" className="h-9" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰부서</Label>
+                <Select value={form.req_dept} onValueChange={(v) => setForm((p) => ({ ...p, req_dept: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["영업팀", "기획팀", "생산팀", "품질팀"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰자</Label>
+                <Input value={form.requester} onChange={(e) => setForm((p) => ({ ...p, requester: e.target.value }))} placeholder="의뢰자명" className="h-9" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">고객명</Label>
+                <Input value={form.customer} onChange={(e) => setForm((p) => ({ ...p, customer: e.target.value }))} placeholder="고객/거래처명" className="h-9" />
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">수주번호</Label>
+                <Input value={form.order_no} onChange={(e) => setForm((p) => ({ ...p, order_no: e.target.value }))} placeholder="관련 수주번호" className="h-9" />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설계담당자</Label>
+              <Select value={form.designer} onValueChange={(v) => setForm((p) => ({ ...p, designer: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  {["이설계", "박도면", "최기구", "김전장"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
 
-            {/* 우측: 상세 내용 */}
-            <div className="flex min-w-0 flex-1 flex-col gap-4">
-              <div className="text-sm font-bold">
-                <FileText className="mr-1 inline h-4 w-4" />요구사양 및 설명
-              </div>
-              <div className="flex-1">
-                <Label className="text-sm">요구사양 <span className="text-destructive">*</span></Label>
-                <Textarea
-                  value={form.spec}
-                  onChange={(e) => setForm((p) => ({ ...p, spec: e.target.value }))}
-                  placeholder={"고객 요구사양 또는 설비 사양을 상세히 기술하세요\n\n예시:\n- 작업 대상: SUS304 Φ20 파이프\n- 가공 방식: 자동 절단 + 면취\n- 생산 속도: 60EA/분\n- 치수 공차: ±0.1mm"}
-                  className="min-h-[180px] text-sm"
-                />
-              </div>
-              <div>
-                <Label className="text-sm">참조 도면번호</Label>
-                <Input value={form.drawing_no} onChange={(e) => setForm((p) => ({ ...p, drawing_no: e.target.value }))} placeholder="유사 설비명 또는 참조 도면번호" className="h-9 text-sm" />
-              </div>
-              <div>
-                <Label className="text-sm">비고</Label>
-                <Textarea value={form.content} onChange={(e) => setForm((p) => ({ ...p, content: e.target.value }))} placeholder="기타 참고 사항" className="min-h-[70px] text-sm" rows={3} />
-              </div>
-              <div>
-                <div className="text-sm font-bold">
-                  <Upload className="mr-1 inline h-4 w-4" />첨부파일
-                </div>
-                <div className="mt-1.5 cursor-pointer rounded-lg border-2 border-dashed p-5 text-center transition-colors hover:border-primary hover:bg-accent/50">
-                  <Upload className="mx-auto h-6 w-6 text-muted-foreground" />
-                  <div className="mt-1.5 text-sm text-muted-foreground">클릭하여 파일 첨부 (사양서, 도면, 사진 등)</div>
-                </div>
+          {/* 우측: 상세 내용 */}
+          <div className="flex min-w-0 flex-1 flex-col gap-4">
+            <h3 className="text-sm font-semibold pb-2 border-b">요구사양 및 설명</h3>
+            <div className="flex-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요구사양 <span className="text-destructive">*</span></Label>
+              <Textarea
+                value={form.spec}
+                onChange={(e) => setForm((p) => ({ ...p, spec: e.target.value }))}
+                placeholder={"고객 요구사양 또는 설비 사양을 상세히 기술해주세요\n\n예시:\n- 작업 대상: SUS304 Φ20 파이프\n- 가공 방식: 자동 절단 + 면취\n- 생산 속도: 60EA/분\n- 치수 공차: ±0.1mm"}
+                className="min-h-[180px]"
+              />
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">참조 도면번호</Label>
+              <Input value={form.drawing_no} onChange={(e) => setForm((p) => ({ ...p, drawing_no: e.target.value }))} placeholder="유사 설비명 또는 참조 도면번호" className="h-9" />
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">비고</Label>
+              <Textarea value={form.content} onChange={(e) => setForm((p) => ({ ...p, content: e.target.value }))} placeholder="기타 참고 사항" className="min-h-[70px]" rows={3} />
+            </div>
+            <div>
+              <h3 className="text-sm font-semibold pb-2 border-b mb-2">첨부파일</h3>
+              <div className="cursor-pointer rounded-lg border-2 border-dashed p-5 text-center transition-colors hover:border-primary hover:bg-accent/50">
+                <Upload className="mx-auto h-6 w-6 text-muted-foreground" />
+                <div className="mt-1.5 text-sm text-muted-foreground">클릭하여 파일 첨부 (사양서, 도면, 사진 등)</div>
               </div>
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setModalOpen(false)} className="h-10 px-6 text-sm" disabled={saving}>취소</Button>
-            <Button onClick={handleSave} className="h-10 px-6 text-sm" disabled={saving}>
-              {saving && <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />}
-              {saving ? "저장 중..." : "저장"}
+        </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setModalOpen(false)} disabled={saving}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_10/design/my-work/page.tsx b/frontend/app/(main)/COMPANY_10/design/my-work/page.tsx
index 5489e92d..8c136cb9 100644
--- a/frontend/app/(main)/COMPANY_10/design/my-work/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/design/my-work/page.tsx
@@ -2,7 +2,6 @@
 
 import React, { useState, useMemo, useCallback, useEffect } from "react";
 import {
-  BarChart3,
   Circle,
   CheckCircle2,
   AlertCircle,
@@ -39,7 +38,6 @@ import {
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
@@ -78,6 +76,7 @@ import {
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { useAuth } from "@/hooks/useAuth";
 import {
   getMyWork,
@@ -171,14 +170,14 @@ interface MyTask extends Task {
 
 // ========== 유틸 ==========
 const USER_INFO: Record<string, { role: string; color: string }> = {
-  최기구: { role: "기구설계 파트", color: "bg-blue-500" },
-  이설계: { role: "기구설계 파트", color: "bg-emerald-500" },
-  김전장: { role: "전장설계 파트", color: "bg-amber-500" },
-  박도면: { role: "기구설계 파트", color: "bg-violet-500" },
-  정SW: { role: "SW개발 파트", color: "bg-pink-500" },
-  한조립: { role: "조립/시운전 파트", color: "bg-red-500" },
-  박구매: { role: "구매/조달 파트", color: "bg-teal-500" },
-  팀장: { role: "설계팀 팀장", color: "bg-indigo-500" },
+  최기구: { role: "기구설계 파트", color: "bg-primary" },
+  이설계: { role: "기구설계 파트", color: "bg-chart-2" },
+  김전장: { role: "전장설계 파트", color: "bg-warning" },
+  박도면: { role: "기구설계 파트", color: "bg-chart-3" },
+  정SW: { role: "SW개발 파트", color: "bg-destructive" },
+  한조립: { role: "조립/시운전 파트", color: "bg-chart-1" },
+  박구매: { role: "구매/조달 파트", color: "bg-info" },
+  팀장: { role: "설계팀 팀장", color: "bg-success" },
 };
 
 const USERS = Object.keys(USER_INFO);
@@ -240,47 +239,46 @@ function getFileType(name: string): string {
 }
 
 function getProgressColor(p: number) {
-  if (p >= 80) return "text-emerald-500";
-  if (p >= 40) return "text-blue-500";
-  if (p > 0) return "text-amber-500";
+  if (p >= 80) return "text-success";
+  if (p >= 40) return "text-primary";
+  if (p > 0) return "text-warning";
   return "text-muted-foreground";
 }
 
 function getProgressBg(p: number) {
-  if (p >= 80) return "bg-emerald-500";
-  if (p >= 40) return "bg-blue-500";
-  if (p > 0) return "bg-amber-500";
+  if (p >= 80) return "bg-success";
+  if (p >= 40) return "bg-primary";
+  if (p > 0) return "bg-warning";
   return "bg-muted";
 }
 
 const STATUS_STYLES: Record<string, string> = {
   대기: "bg-muted text-foreground",
-  진행중: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
-  검토중:
-    "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
-  완료: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
-  지연: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
+  진행중: "bg-primary/10 text-primary",
+  검토중: "bg-warning/10 text-warning",
+  완료: "bg-success/10 text-success",
+  지연: "bg-destructive/10 text-destructive",
 };
 
 const PRIORITY_STYLES: Record<string, string> = {
-  긴급: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
-  높음: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+  긴급: "bg-destructive/10 text-destructive",
+  높음: "bg-warning/10 text-warning",
   보통: "bg-muted text-foreground",
-  낮음: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
+  낮음: "bg-success/10 text-success",
 };
 
 const PR_STATUS_STYLES: Record<string, string> = {
-  요청: "bg-red-100 text-red-800",
-  견적중: "bg-amber-100 text-amber-800",
-  발주완료: "bg-blue-100 text-blue-800",
-  입고완료: "bg-emerald-100 text-emerald-800",
+  요청: "bg-destructive/10 text-destructive",
+  견적중: "bg-warning/10 text-warning",
+  발주완료: "bg-primary/10 text-primary",
+  입고완료: "bg-success/10 text-success",
 };
 
 const CR_STATUS_STYLES: Record<string, string> = {
-  요청: "bg-amber-100 text-amber-800",
-  접수: "bg-amber-100 text-amber-800",
-  진행중: "bg-blue-100 text-blue-800",
-  완료: "bg-emerald-100 text-emerald-800",
+  요청: "bg-warning/10 text-warning",
+  접수: "bg-warning/10 text-warning",
+  진행중: "bg-primary/10 text-primary",
+  완료: "bg-success/10 text-success",
 };
 
 const CR_NEXT: Record<string, string> = {
@@ -445,7 +443,7 @@ export default function MyWorkPage() {
         setProjects([]);
       }
     } catch {
-      toast.error("업무 목록을 불러오는데 실패했습니다.");
+      toast.error("업무 목록을 불러오는데 실패했어요.");
       setProjects([]);
     } finally {
       setLoading(false);
@@ -585,12 +583,12 @@ export default function MyWorkPage() {
     if (!taskId) return;
     const res = await createSubItem(taskId, { name: newSiName.trim(), weight: w, progress: 0, status: "대기" });
     if (res.success) {
-      toast.success("수행항목이 추가되었습니다.");
+      toast.success("수행항목이 추가되었어요.");
       setNewSiName("");
       setNewSiWeight("");
       fetchMyWork();
     } else {
-      toast.error(res.message || "수행항목 추가에 실패했습니다.");
+      toast.error(res.message || "수행항목 추가에 실패했어요.");
     }
   }, [selectedTask, newSiName, newSiWeight, fetchMyWork]);
 
@@ -603,10 +601,10 @@ export default function MyWorkPage() {
       if (siId) {
         const res = await deleteSubItem(String(siId));
         if (res.success) {
-          toast.success("수행항목이 삭제되었습니다.");
+          toast.success("수행항목이 삭제되었어요.");
           fetchMyWork();
         } else {
-          toast.error(res.message || "수행항목 삭제에 실패했습니다.");
+          toast.error(res.message || "수행항목 삭제에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -636,10 +634,10 @@ export default function MyWorkPage() {
       if (siId) {
         const res = await updateSubItem(String(siId), { progress: newProgress, status: newStatus });
         if (res.success) {
-          toast.success("수행항목이 업데이트되었습니다.");
+          toast.success("수행항목이 업데이트되었어요.");
           fetchMyWork();
         } else {
-          toast.error(res.message || "수행항목 업데이트에 실패했습니다.");
+          toast.error(res.message || "수행항목 업데이트에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -673,7 +671,7 @@ export default function MyWorkPage() {
         if (res.success) {
           fetchMyWork();
         } else {
-          toast.error(res.message || "진행률 업데이트에 실패했습니다.");
+          toast.error(res.message || "진행률 업데이트에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -740,11 +738,11 @@ export default function MyWorkPage() {
           sub_item_id: siId ?? null,
         });
         if (res.success) {
-          toast.success("작업일지가 등록되었습니다.");
+          toast.success("작업일지가 등록되었어요.");
           setEditingLogIdx(-1);
           fetchMyWork();
         } else {
-          toast.error(res.message || "작업일지 등록에 실패했습니다.");
+          toast.error(res.message || "작업일지 등록에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -772,11 +770,11 @@ export default function MyWorkPage() {
       if (workLogId) {
         const res = await deleteWorkLog(String(workLogId));
         if (res.success) {
-          toast.success("작업일지가 삭제되었습니다.");
+          toast.success("작업일지가 삭제되었어요.");
           setEditingLogIdx(-1);
           fetchMyWork();
         } else {
-          toast.error(res.message || "작업일지 삭제에 실패했습니다.");
+          toast.error(res.message || "작업일지 삭제에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -845,11 +843,11 @@ export default function MyWorkPage() {
           status: pr.status,
         });
         if (!res.success) {
-          toast.error(res.message || "구매요청 등록에 실패했습니다.");
+          toast.error(res.message || "구매요청 등록에 실패했어요.");
           return;
         }
       }
-      if (newItems.length > 0) toast.success("구매요청이 등록되었습니다.");
+      if (newItems.length > 0) toast.success("구매요청이 등록되었어요.");
     }
     updateProjects((draft) => {
       for (const p of draft) {
@@ -890,11 +888,11 @@ export default function MyWorkPage() {
           due_date: cr.dueDate,
         });
         if (!res.success) {
-          toast.error(res.message || "협조요청 등록에 실패했습니다.");
+          toast.error(res.message || "협조요청 등록에 실패했어요.");
           return;
         }
       }
-      if (newItems.length > 0) toast.success("협조요청이 등록되었습니다.");
+      if (newItems.length > 0) toast.success("협조요청이 등록되었어요.");
     }
     updateProjects((draft) => {
       for (const p of draft) {
@@ -919,9 +917,9 @@ export default function MyWorkPage() {
 
   const kanbanConfig = [
     { key: "대기", icon: <Circle className="h-3.5 w-3.5" />, color: "border-muted-foreground/30", titleColor: "text-muted-foreground" },
-    { key: "진행중", icon: <Circle className="h-3.5 w-3.5 text-blue-500" />, color: "border-blue-500", titleColor: "text-blue-500" },
-    { key: "검토중", icon: <Circle className="h-3.5 w-3.5 text-amber-500" />, color: "border-amber-500", titleColor: "text-amber-500" },
-    { key: "완료", icon: <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />, color: "border-emerald-500", titleColor: "text-emerald-500" },
+    { key: "진행중", icon: <Circle className="h-3.5 w-3.5 text-primary" />, color: "border-primary", titleColor: "text-primary" },
+    { key: "검토중", icon: <Circle className="h-3.5 w-3.5 text-warning" />, color: "border-warning", titleColor: "text-warning" },
+    { key: "완료", icon: <CheckCircle2 className="h-3.5 w-3.5 text-success" />, color: "border-success", titleColor: "text-success" },
   ];
 
   // ===== 타임시트 =====
@@ -969,14 +967,18 @@ export default function MyWorkPage() {
   }
 
   return (
-    <div className="flex h-full flex-col gap-2 p-3">
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
       {/* 헤더 */}
       <div className="flex shrink-0 items-center justify-between">
         <div className="flex items-center gap-3">
-          <h1 className="text-xl font-bold">
-            <BarChart3 className="mr-1.5 inline h-5 w-5" />
-            내 업무 현황
-          </h1>
+          <div className="flex flex-col gap-0.5">
+            <div className="flex items-center gap-1 text-[11px] text-muted-foreground">
+              <span>설계관리</span>
+              <ChevronRight className="h-3 w-3" />
+              <span className="text-foreground">내업무현황</span>
+            </div>
+            <h1 className="text-lg font-bold leading-tight">내 업무 현황</h1>
+          </div>
           <div className="flex items-center gap-2 rounded-lg border bg-card px-2.5 py-1.5">
             <Avatar className="h-7 w-7">
               <AvatarFallback className={cn("text-xs font-bold text-white", USER_INFO[currentUser]?.color || "bg-primary")}>
@@ -1006,68 +1008,135 @@ export default function MyWorkPage() {
       </div>
 
       {/* 검색 필터 */}
-      <div className="flex shrink-0 flex-wrap items-center gap-2 rounded-lg border bg-card px-2.5 py-1.5">
-        <Select value={filterProject} onValueChange={setFilterProject}>
-          <SelectTrigger className="h-7 w-[130px] text-xs" size="xs"><SelectValue placeholder="전체 프로젝트" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">전체 프로젝트</SelectItem>
-            {projectList.map((p) => (
-              <SelectItem key={p.id} value={p.id}>{p.id} {p.name}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Select value={filterStatus} onValueChange={setFilterStatus}>
-          <SelectTrigger className="h-7 w-[100px] text-xs" size="xs"><SelectValue placeholder="전체 상태" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">전체 상태</SelectItem>
-            {["대기", "진행중", "검토중", "완료"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-          </SelectContent>
-        </Select>
-        <Select value={filterPriority} onValueChange={setFilterPriority}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="전체 우선순위" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">전체 우선순위</SelectItem>
-            {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-          </SelectContent>
-        </Select>
-        <Select value={filterCategory} onValueChange={setFilterCategory}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="전체 유형" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">전체 유형</SelectItem>
-            {["기구설계", "전장설계", "SW개발", "구매/조달", "조립/시운전", "검토/승인"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-          </SelectContent>
-        </Select>
-        <div className="relative">
-          <Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            value={filterKeyword}
-            onChange={(e) => setFilterKeyword(e.target.value)}
-            placeholder="업무명 검색..."
-            className="h-7 w-[120px] pl-7 text-xs"
-          />
+      <div className="shrink-0 rounded-lg border border-border bg-card px-5 py-4">
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] items-end gap-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트</span>
+            <Select value={filterProject} onValueChange={setFilterProject}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 프로젝트" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 프로젝트</SelectItem>
+                {projectList.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>{p.id} {p.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">진행상태</span>
+            <Select value={filterStatus} onValueChange={setFilterStatus}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 상태" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 상태</SelectItem>
+                {["대기", "진행중", "검토중", "완료"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">우선순위</span>
+            <Select value={filterPriority} onValueChange={setFilterPriority}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 우선순위" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 우선순위</SelectItem>
+                {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무유형</span>
+            <Select value={filterCategory} onValueChange={setFilterCategory}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 유형" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 유형</SelectItem>
+                {["기구설계", "전장설계", "SW개발", "구매/조달", "조립/시운전", "검토/승인"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">검색어</span>
+            <div className="relative">
+              <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={filterKeyword}
+                onChange={(e) => setFilterKeyword(e.target.value)}
+                placeholder="업무명 검색..."
+                className="h-9 pl-8 text-xs"
+              />
+            </div>
+          </div>
+          <div className="flex items-end justify-end gap-2">
+            <Button variant="outline" size="sm" className="h-9" onClick={handleResetFilter}>
+              <RotateCcw className="mr-1.5 h-4 w-4" />
+              초기화
+            </Button>
+          </div>
         </div>
-        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={handleResetFilter}>
-          <RotateCcw className="mr-1 h-3 w-3" />초기화
-        </Button>
       </div>
 
-      {/* 통계 카드 */}
-      <div className="grid shrink-0 grid-cols-5 gap-2">
-        {[
-          { icon: <ClipboardList className="h-4 w-4 text-blue-500" />, value: stats.total, label: "전체 업무", bg: "bg-blue-50 dark:bg-blue-900/20" },
-          { icon: <Circle className="h-4 w-4 text-amber-500" />, value: stats.progress, label: "진행중", bg: "bg-amber-50 dark:bg-amber-900/20" },
-          { icon: <CheckCircle2 className="h-4 w-4 text-emerald-500" />, value: stats.done, label: "완료", bg: "bg-emerald-50 dark:bg-emerald-900/20" },
-          { icon: <AlertCircle className="h-4 w-4 text-red-500" />, value: stats.delay, label: "지연", bg: "bg-red-50 dark:bg-red-900/20" },
-          { icon: <Clock className="h-4 w-4 text-violet-500" />, value: `${stats.weekHours}h`, label: "이번주 투입", bg: "bg-violet-50 dark:bg-violet-900/20" },
-        ].map((s, i) => (
-          <Card key={i} className="flex flex-row items-center gap-2 rounded-lg border px-3 py-2 shadow-none">
-            <div className={cn("flex h-8 w-8 items-center justify-center rounded-lg", s.bg)}>{s.icon}</div>
-            <div>
-              <div className="text-lg font-bold">{s.value}</div>
-              <div className="text-[11px] text-muted-foreground">{s.label}</div>
+      {/* 통계 요약 바 */}
+      <div className="shrink-0 rounded-lg border border-border bg-card px-5 py-3">
+        <div className="flex flex-wrap items-center gap-5">
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10">
+              <ClipboardList className="h-3.5 w-3.5 text-primary" />
             </div>
-          </Card>
-        ))}
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.total}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">전체</span>
+            </div>
+          </div>
+          <div className="h-4 w-px bg-border" />
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-warning/10">
+              <Circle className="h-3.5 w-3.5 text-warning" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.progress}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">진행중</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-success/10">
+              <CheckCircle2 className="h-3.5 w-3.5 text-success" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.done}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">완료</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className={cn("flex h-7 w-7 items-center justify-center rounded-md", stats.delay > 0 ? "bg-destructive/10" : "bg-muted")}>
+              <AlertCircle className={cn("h-3.5 w-3.5", stats.delay > 0 ? "text-destructive" : "text-muted-foreground")} />
+            </div>
+            <div className="leading-none">
+              <span className={cn("text-sm font-bold", stats.delay > 0 && "text-destructive")}>{stats.delay}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">지연</span>
+            </div>
+          </div>
+          <div className="h-4 w-px bg-border" />
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-info/10">
+              <Clock className="h-3.5 w-3.5 text-info" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.weekHours}h</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">이번주 투입</span>
+            </div>
+          </div>
+          <div className="ml-auto flex items-center gap-2">
+            <span className="rounded-full border border-primary/15 bg-primary/8 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+              {filteredTasks.length}건
+            </span>
+          </div>
+        </div>
       </div>
 
       {/* 메인 영역 */}
@@ -1075,11 +1144,14 @@ export default function MyWorkPage() {
         {/* 왼쪽: 업무 현황 */}
         <ResizablePanel defaultSize={45} minSize={25}>
           <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
-            <div className="flex shrink-0 items-center justify-between border-b bg-muted/30 px-3 py-1.5">
-              <span className="text-sm font-bold">
-                <ClipboardList className="mr-1 inline h-4 w-4" />
-                업무 현황
-              </span>
+            <div className="flex shrink-0 items-center justify-between border-b bg-muted/50 px-4 py-2.5">
+              <div className="flex items-center gap-2">
+                <ClipboardList className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-semibold">업무 현황</span>
+                <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                  {filteredTasks.length}건
+                </span>
+              </div>
               <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as any)}>
                 <TabsList className="h-7">
                   <TabsTrigger value="kanban" className="h-5 gap-1 px-2 text-[11px]">
@@ -1102,22 +1174,22 @@ export default function MyWorkPage() {
                       const tasks = kanbanCols[col.key] || [];
                       const extraCount = col.key === "대기" ? receivedCoops.length : 0;
                       return (
-                        <div key={col.key} className="flex flex-col rounded-lg bg-muted/50 p-2">
-                          <div className={cn("mb-2 flex items-center justify-between border-b-2 pb-1.5", col.color)}>
-                            <span className={cn("flex items-center gap-1 text-xs font-bold", col.titleColor)}>
+                        <div key={col.key} className="flex flex-col rounded-lg border bg-muted/30 p-2">
+                          <div className={cn("mb-2 flex items-center justify-between rounded-md border-l-[3px] bg-card px-2 py-1.5", col.color)}>
+                            <span className={cn("flex items-center gap-1.5 text-xs font-bold", col.titleColor)}>
                               {col.icon}{col.key}
                             </span>
-                            <Badge variant="outline" className="h-5 px-1.5 text-[10px]">{tasks.length + extraCount}</Badge>
+                            <span className="rounded-full border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] font-bold text-muted-foreground">{tasks.length + extraCount}</span>
                           </div>
                           <div className="flex flex-1 flex-col gap-1.5 overflow-y-auto">
                             {col.key === "대기" && receivedCoops.map((cr, i) => (
-                              <div key={`coop-${i}`} className="rounded-md border border-amber-200 bg-amber-50 p-2 dark:border-amber-900/50 dark:bg-amber-900/10">
-                                <div className="text-[10px] text-amber-600">
+                              <div key={`coop-${i}`} className="rounded-md border border-warning/30 bg-warning/10 p-2">
+                                <div className="text-[10px] text-warning">
                                   <Handshake className="mr-0.5 inline h-3 w-3" /> 협조 · {cr.fromUser}
                                 </div>
                                 <div className="text-xs font-semibold">{cr.title}</div>
                                 <div className="mt-0.5 text-[10px] text-muted-foreground">{cr.projectName}</div>
-                                <div className={cn("mt-0.5 text-[10px]", new Date(cr.dueDate) < today ? "font-semibold text-destructive" : "text-emerald-600")}>
+                                <div className={cn("mt-0.5 text-[10px]", new Date(cr.dueDate) < today ? "font-semibold text-destructive" : "text-success")}>
                                   <Calendar className="mr-0.5 inline h-3 w-3" />{cr.dueDate}
                                 </div>
                               </div>
@@ -1133,7 +1205,7 @@ export default function MyWorkPage() {
                                 <div
                                   key={`${t.projectId}-${t.name}`}
                                   className={cn(
-                                    "cursor-pointer rounded-md border bg-card p-2 transition-all hover:shadow-sm",
+                                    "cursor-pointer rounded-md border bg-card p-2 transition-all",
                                     isSelected && "border-primary ring-2 ring-primary/20"
                                   )}
                                   onClick={() => handleSelectTask(t.projectId, t.name)}
@@ -1150,7 +1222,7 @@ export default function MyWorkPage() {
                                     </div>
                                     <span className={cn("text-[10px] font-semibold", getProgressColor(t.progress))}>{t.progress}%</span>
                                   </div>
-                                  <div className={cn("mt-0.5 text-[10px]", isDelay ? "font-semibold text-destructive" : dd <= 3 ? "text-amber-500" : "text-emerald-600")}>
+                                  <div className={cn("mt-0.5 text-[10px]", isDelay ? "font-semibold text-destructive" : dd <= 3 ? "text-warning" : "text-success")}>
                                     <Calendar className="mr-0.5 inline h-3 w-3" />{dueText}
                                   </div>
                                   {(coopCount > 0 || attCount > 0) && (
@@ -1163,7 +1235,7 @@ export default function MyWorkPage() {
                               );
                             })}
                             {tasks.length === 0 && extraCount === 0 && (
-                              <div className="py-3 text-center text-[11px] text-muted-foreground">없음</div>
+                              <div className="py-3 text-center text-[11px] text-muted-foreground">업무가 없어요</div>
                             )}
                           </div>
                         </div>
@@ -1173,66 +1245,50 @@ export default function MyWorkPage() {
                 )}
 
                 {viewMode === "list" && (
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead className="w-[90px] text-[11px]">프로젝트</TableHead>
-                        <TableHead className="text-[11px]">업무명</TableHead>
-                        <TableHead className="w-[65px] text-[11px]">유형</TableHead>
-                        <TableHead className="w-[55px] text-center text-[11px]">상태</TableHead>
-                        <TableHead className="w-[80px] text-[11px]">종료일</TableHead>
-                        <TableHead className="w-[70px] text-[11px]">진행률</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {filteredTasks
-                        .sort((a, b) => {
-                          const ad = a.status !== "완료" && new Date(a.end) < today;
-                          const bd = b.status !== "완료" && new Date(b.end) < today;
-                          if (ad && !bd) return -1;
-                          if (!ad && bd) return 1;
-                          const ord: Record<string, number> = { 진행중: 0, 대기: 1, 검토중: 2, 완료: 3 };
-                          return (ord[a.status] ?? 9) - (ord[b.status] ?? 9);
-                        })
-                        .map((t) => {
-                          const isDelay = t.status !== "완료" && new Date(t.end) < today;
-                          const displayStatus = isDelay ? "지연" : t.status;
-                          const isSelected = selectedTaskKey === `${t.projectId}||${t.name}`;
-                          return (
-                            <TableRow
-                              key={`${t.projectId}-${t.name}`}
-                              className={cn("cursor-pointer", isSelected && "bg-accent")}
-                              onClick={() => handleSelectTask(t.projectId, t.name)}
-                            >
-                              <TableCell className="text-[10px]">
-                                <span className="font-semibold text-primary">{t.projectId}</span>
-                                <br />
-                                <span className="text-muted-foreground">{t.projectName}</span>
-                              </TableCell>
-                              <TableCell className="text-xs font-medium">{t.name}</TableCell>
-                              <TableCell className="text-[11px]">{t.category}</TableCell>
-                              <TableCell className="text-center">
-                                <Badge className={cn("text-[10px]", STATUS_STYLES[displayStatus])}>{displayStatus}</Badge>
-                              </TableCell>
-                              <TableCell className={cn("text-[11px]", isDelay && "font-semibold text-destructive")}>{t.end}</TableCell>
-                              <TableCell>
-                                <div className="flex items-center gap-1.5">
-                                  <div className="h-1 w-12 overflow-hidden rounded-full bg-muted">
-                                    <div className={cn("h-full rounded-full", getProgressBg(t.progress))} style={{ width: `${t.progress}%` }} />
-                                  </div>
-                                  <span className="text-[10px]">{t.progress}%</span>
-                                </div>
-                              </TableCell>
-                            </TableRow>
-                          );
-                        })}
-                      {filteredTasks.length === 0 && (
-                        <TableRow>
-                          <TableCell colSpan={6} className="py-8 text-center text-xs text-muted-foreground">검색 결과 없음</TableCell>
-                        </TableRow>
-                      )}
-                    </TableBody>
-                  </Table>
+                  <EDataTable
+                    columns={[
+                      { key: "projectId", label: "프로젝트", width: "w-[90px]", render: (_v, row) => (
+                        <div className="text-[10px]">
+                          <span className="font-semibold text-primary">{row.projectId}</span>
+                          <br />
+                          <span className="text-muted-foreground">{row.projectName}</span>
+                        </div>
+                      )},
+                      { key: "name", label: "업무명" },
+                      { key: "category", label: "유형", width: "w-[65px]" },
+                      { key: "status", label: "상태", width: "w-[55px]", align: "center", render: (_v, row) => {
+                        const isDelay = row.status !== "완료" && new Date(row.end) < today;
+                        const displayStatus = isDelay ? "지연" : row.status;
+                        return <Badge className={cn("text-[10px]", STATUS_STYLES[displayStatus])}>{displayStatus}</Badge>;
+                      }},
+                      { key: "end", label: "종료일", width: "w-[80px]", render: (v, row) => {
+                        const isDelay = row.status !== "완료" && new Date(row.end) < today;
+                        return <span className={cn("text-[11px]", isDelay && "font-semibold text-destructive")}>{v}</span>;
+                      }},
+                      { key: "progress", label: "진행률", width: "w-[70px]", sortable: true, render: (v) => (
+                        <div className="flex items-center gap-1.5">
+                          <div className="h-1 w-12 overflow-hidden rounded-full bg-muted">
+                            <div className={cn("h-full rounded-full", getProgressBg(v))} style={{ width: `${v}%` }} />
+                          </div>
+                          <span className="text-[10px]">{v}%</span>
+                        </div>
+                      )},
+                    ] as EDataTableColumn<MyTask>[]}
+                    data={[...filteredTasks].sort((a, b) => {
+                      const ad = a.status !== "완료" && new Date(a.end) < today;
+                      const bd = b.status !== "완료" && new Date(b.end) < today;
+                      if (ad && !bd) return -1;
+                      if (!ad && bd) return 1;
+                      const ord: Record<string, number> = { 진행중: 0, 대기: 1, 검토중: 2, 완료: 3 };
+                      return (ord[a.status] ?? 9) - (ord[b.status] ?? 9);
+                    })}
+                    rowKey={(row) => `${row.projectId}||${row.name}`}
+                    selectedId={selectedTaskKey}
+                    onRowClick={(row) => handleSelectTask(row.projectId, row.name)}
+                    emptyMessage="검색 결과가 없어요"
+                    showPagination={false}
+                    draggableColumns={false}
+                  />
                 )}
 
                 {viewMode === "timesheet" && (
@@ -1256,16 +1312,16 @@ export default function MyWorkPage() {
                       </span>
                     </div>
                     <Table>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead className="min-w-[120px] text-[11px]">프로젝트/업무</TableHead>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="min-w-[120px] text-[11px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">프로젝트/업무</TableHead>
                           {timesheetData.wds.map((d, i) => (
                             <TableHead
                               key={i}
                               className={cn(
                                 "text-center text-[10px]",
-                                i >= 5 && "bg-red-50 dark:bg-red-900/10",
-                                d.toDateString() === today.toDateString() && "bg-blue-50 text-primary dark:bg-blue-900/10"
+                                i >= 5 && "bg-destructive/5",
+                                d.toDateString() === today.toDateString() && "bg-primary/5 text-primary"
                               )}
                             >
                               {timesheetData.dn[i]}
@@ -1273,25 +1329,25 @@ export default function MyWorkPage() {
                               <span className="text-[9px]">{d.getMonth() + 1}/{d.getDate()}</span>
                             </TableHead>
                           ))}
-                          <TableHead className="text-center text-[11px] font-bold">합계</TableHead>
+                          <TableHead className="text-center text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">합계</TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
                         {Object.keys(timesheetData.ph).length === 0 && (
                           <TableRow>
-                            <TableCell colSpan={9} className="py-8 text-center text-xs text-muted-foreground">기록 없음</TableCell>
+                            <TableCell colSpan={9} className="py-8 text-center text-[13px] text-muted-foreground">기록이 없어요</TableCell>
                           </TableRow>
                         )}
                         {Object.values(timesheetData.ph).map((p) => (
                           <React.Fragment key={p.id}>
-                            <TableRow className="bg-muted/30">
+                            <TableRow className="bg-muted/50">
                               <TableCell className="text-[10px] font-bold text-primary">{p.id} {p.name}</TableCell>
                               {p.days.map((v, i) => (
-                                <TableCell key={i} className={cn("text-center text-[11px] font-semibold", i >= 5 && "bg-red-50 dark:bg-red-900/10", v > 0 ? "" : "text-muted-foreground/30")}>
+                                <TableCell key={i} className={cn("text-center text-[11px] font-semibold", i >= 5 && "bg-destructive/5", v > 0 ? "" : "text-muted-foreground/30")}>
                                   {v > 0 ? `${v}h` : "-"}
                                 </TableCell>
                               ))}
-                              <TableCell className="text-center text-xs font-bold text-primary">{p.total}h</TableCell>
+                              <TableCell className="text-center text-[13px] font-bold text-primary">{p.total}h</TableCell>
                             </TableRow>
                             {Object.entries(p.tasks).map(([tn, days]) => {
                               const tt = days.reduce((s, v) => s + v, 0);
@@ -1299,7 +1355,7 @@ export default function MyWorkPage() {
                                 <TableRow key={tn}>
                                   <TableCell className="pl-4 text-[10px] text-muted-foreground">└ {tn}</TableCell>
                                   {days.map((v, i) => (
-                                    <TableCell key={i} className={cn("text-center text-[10px]", i >= 5 && "bg-red-50 dark:bg-red-900/10", v > 0 ? "" : "text-muted-foreground/30")}>
+                                    <TableCell key={i} className={cn("text-center text-[10px]", i >= 5 && "bg-destructive/5", v > 0 ? "" : "text-muted-foreground/30")}>
                                       {v > 0 ? `${v}h` : "-"}
                                     </TableCell>
                                   ))}
@@ -1309,10 +1365,10 @@ export default function MyWorkPage() {
                             })}
                           </React.Fragment>
                         ))}
-                        <TableRow className="bg-blue-50 font-bold dark:bg-blue-900/10">
+                        <TableRow className="bg-primary/5 font-bold">
                           <TableCell className="text-[11px]">합계</TableCell>
                           {timesheetData.dt.map((v, i) => (
-                            <TableCell key={i} className={cn("text-center text-[11px]", i >= 5 && "bg-red-50 dark:bg-red-900/10", v > 0 ? "text-primary" : "text-muted-foreground/30")}>
+                            <TableCell key={i} className={cn("text-center text-[11px]", i >= 5 && "bg-destructive/5", v > 0 ? "text-primary" : "text-muted-foreground/30")}>
                               {v > 0 ? `${v}h` : "-"}
                             </TableCell>
                           ))}
@@ -1333,15 +1389,20 @@ export default function MyWorkPage() {
         <ResizablePanel defaultSize={55} minSize={30}>
           <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
             {!selectedTask ? (
-              <div className="flex h-full flex-col items-center justify-center gap-2 text-muted-foreground">
-                <PointerIcon className="h-8 w-8" />
-                <span className="text-sm">왼쪽에서 업무를 선택하세요</span>
+              <div className="flex h-full flex-col items-center justify-center gap-3 text-muted-foreground">
+                <div className="flex h-14 w-14 items-center justify-center rounded-full border-2 border-dashed border-border">
+                  <PointerIcon className="h-6 w-6 text-muted-foreground/50" />
+                </div>
+                <div className="text-center">
+                  <p className="text-sm font-medium">업무를 선택해주세요</p>
+                  <p className="text-xs text-muted-foreground/60">왼쪽 목록에서 업무를 클릭하면 상세 정보가 표시돼요</p>
+                </div>
               </div>
             ) : (
               <>
                 {/* 상세 헤더 */}
-                <div className="flex shrink-0 items-center justify-between border-b bg-muted/30 px-3 py-2">
-                  <span className="text-sm font-bold">{selectedTask.task.name}</span>
+                <div className="flex shrink-0 items-center justify-between border-b bg-muted/50 px-3 py-2">
+                  <h3 className="text-[13px] font-bold">{selectedTask.task.name}</h3>
                   <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => setSelectedTaskKey(null)}>
                     <X className="h-3.5 w-3.5" />
                   </Button>
@@ -1375,8 +1436,8 @@ export default function MyWorkPage() {
                   {/* 수행항목 */}
                   <ResizablePanel defaultSize={40} minSize={20}>
                     <div className="flex h-full flex-col">
-                      <div className="shrink-0 border-b bg-muted/30 px-3 py-1.5 text-xs font-bold">
-                        <ClipboardList className="mr-1 inline h-3.5 w-3.5" />수행항목
+                      <div className="shrink-0 border-b bg-muted/50 px-3 py-1.5">
+                        <h3 className="text-[13px] font-bold">수행항목</h3>
                       </div>
                       <ScrollArea className="flex-1">
                         {/* 추가 입력 */}
@@ -1408,7 +1469,7 @@ export default function MyWorkPage() {
                                 onClick={(e) => e.stopPropagation()}
                                 className="h-4 w-4"
                               />
-                              <span className={cn("min-w-0 flex-1 truncate text-xs font-semibold", done && "text-muted-foreground line-through")}>
+                              <span className={cn("min-w-0 flex-1 truncate text-[13px] font-semibold", done && "text-muted-foreground line-through")}>
                                 {si.name}
                               </span>
                               <Badge variant="outline" className="h-4 px-1 text-[9px]">{si.weight}%</Badge>
@@ -1426,7 +1487,7 @@ export default function MyWorkPage() {
 
                         {/* 요약 */}
                         {selectedTask.task.subItems.length > 0 && (
-                          <div className="flex items-center justify-between border-b bg-blue-50 px-2.5 py-1 text-[11px] dark:bg-blue-900/10">
+                          <div className="flex items-center justify-between border-b bg-primary/5 px-2.5 py-1 text-[11px]">
                             <span>
                               가중 진행률: <strong className="text-primary">{calcAutoProgress(selectedTask.task)}%</strong>
                               {selectedTask.task.subItems.reduce((s, i) => s + i.weight, 0) !== 100 && (
@@ -1462,8 +1523,8 @@ export default function MyWorkPage() {
                   {/* 수행기록 */}
                   <ResizablePanel defaultSize={60} minSize={30}>
                     <div className="flex h-full flex-col">
-                      <div className="shrink-0 border-b bg-muted/30 px-3 py-1.5 text-xs font-bold">
-                        <FileEdit className="mr-1 inline h-3.5 w-3.5" />수행기록
+                      <div className="shrink-0 border-b bg-muted/50 px-3 py-1.5">
+                        <h3 className="text-[13px] font-bold">수행기록</h3>
                       </div>
                       <ScrollArea className="flex-1">
                         {selectedSubItemId === "__unassigned__" ? (
@@ -1556,7 +1617,7 @@ export default function MyWorkPage() {
           </DialogHeader>
           <div className="space-y-2">
             {modalAttachments.map((f, i) => (
-              <div key={f.id} className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
+              <div key={f.id} className="flex items-center gap-2 rounded-md border bg-muted/50 p-2">
                 {getFileIcon(f.type)}
                 <div className="flex-1">
                   <div className="text-xs font-semibold">{f.name}</div>
@@ -1636,9 +1697,9 @@ export default function MyWorkPage() {
               </Button>
             </div>
             <div className="text-xs font-semibold">등록된 구매요청 ({modalPurchaseReqs.length})</div>
-            {modalPurchaseReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없습니다.</div>}
+            {modalPurchaseReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없어요.</div>}
             {modalPurchaseReqs.map((pr, i) => (
-              <div key={pr.id} className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
+              <div key={pr.id} className="flex items-center gap-2 rounded-md border bg-muted/50 p-2">
                 <ShoppingCart className="h-3.5 w-3.5" />
                 <strong className="text-xs">{pr.item}</strong>
                 <span className="text-[10px] text-muted-foreground">{pr.qty} {pr.unit}</span>
@@ -1698,9 +1759,9 @@ export default function MyWorkPage() {
               </Button>
             </div>
             <div className="text-xs font-semibold">등록된 협조요청 ({modalCoopReqs.length})</div>
-            {modalCoopReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없습니다.</div>}
+            {modalCoopReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없어요.</div>}
             {modalCoopReqs.map((cr, i) => (
-              <div key={cr.id} className="space-y-1 rounded-md border bg-muted/30 p-2">
+              <div key={cr.id} className="space-y-1 rounded-md border bg-muted/50 p-2">
                 <div className="flex items-center gap-2">
                   <Handshake className="h-3.5 w-3.5" />
                   <strong className="flex-1 text-xs">{cr.title}</strong>
@@ -1762,7 +1823,7 @@ function RenderLogs({ title, logs, editingLogIdx, editForm, setEditForm, onStart
       {logs.length === 0 && editingLogIdx !== -2 && (
         <div className="flex flex-col items-center justify-center gap-1 py-8 text-muted-foreground">
           <FileEdit className="h-6 w-6" />
-          <span className="text-xs">기록이 없습니다</span>
+          <span className="text-xs">기록이 없어요</span>
         </div>
       )}
       {logs.map((log) => {
@@ -1805,12 +1866,12 @@ function RenderLogs({ title, logs, editingLogIdx, editForm, setEditForm, onStart
                 </Badge>
               )}
               {prC > 0 && (
-                <Badge className="h-4 cursor-pointer gap-0.5 bg-amber-50 px-1 text-[9px] text-amber-800 hover:bg-amber-100 dark:bg-amber-900/20" onClick={(e) => { e.stopPropagation(); onOpenPr(idx); }}>
+                <Badge className="h-4 cursor-pointer gap-0.5 bg-warning/10 px-1 text-[9px] text-warning hover:bg-warning/20" onClick={(e) => { e.stopPropagation(); onOpenPr(idx); }}>
                   <ShoppingCart className="h-2.5 w-2.5" />{prC}
                 </Badge>
               )}
               {crC > 0 && (
-                <Badge className="h-4 cursor-pointer gap-0.5 bg-pink-50 px-1 text-[9px] text-pink-800 hover:bg-pink-100 dark:bg-pink-900/20" onClick={(e) => { e.stopPropagation(); onOpenCr(idx); }}>
+                <Badge className="h-4 cursor-pointer gap-0.5 bg-info/10 px-1 text-[9px] text-info hover:bg-info/20" onClick={(e) => { e.stopPropagation(); onOpenCr(idx); }}>
                   <Handshake className="h-2.5 w-2.5" />{crC}
                 </Badge>
               )}
@@ -1861,7 +1922,7 @@ interface EditLogRowProps {
 function EditLogRow({ logIdx, editForm, setEditForm, onSave, onCancel, onOpenAtt, onOpenPr, onOpenCr, attCount, prCount, crCount }: EditLogRowProps) {
   const hours = calcHours(editForm.startDt, editForm.endDt);
   return (
-    <div className="space-y-1.5 rounded-md border border-emerald-300 bg-emerald-50/50 p-2.5 dark:border-emerald-800 dark:bg-emerald-900/10">
+    <div className="space-y-1.5 rounded-md border border-primary/30 bg-primary/5 p-2.5">
       <div className="flex flex-wrap items-center gap-1.5">
         <Input type="datetime-local" value={editForm.startDt} onChange={(e) => setEditForm((p) => ({ ...p, startDt: e.target.value }))} className="h-6 w-[155px] text-[11px]" />
         <span className="text-xs text-muted-foreground">~</span>
@@ -1889,7 +1950,7 @@ function EditLogRow({ logIdx, editForm, setEditForm, onSave, onCancel, onOpenAtt
         </div>
         <div className="flex gap-1">
           <Button variant="outline" size="sm" className="h-5 px-2 text-[10px]" onClick={onCancel}>취소</Button>
-          <Button size="sm" className="h-5 bg-emerald-500 px-2 text-[10px] hover:bg-emerald-600" onClick={() => onSave(logIdx)}>저장</Button>
+          <Button size="sm" className="h-5 bg-success px-2 text-[10px] hover:bg-success/90" onClick={() => onSave(logIdx)}>저장</Button>
         </div>
       </div>
     </div>
diff --git a/frontend/app/(main)/COMPANY_10/design/project/page.tsx b/frontend/app/(main)/COMPANY_10/design/project/page.tsx
index 8f5d3799..7e66b696 100644
--- a/frontend/app/(main)/COMPANY_10/design/project/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/design/project/page.tsx
@@ -18,17 +18,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-  DialogDescription,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import {
@@ -38,7 +28,6 @@ import {
 } from "@/components/ui/resizable";
 import {
   Plus,
-  RotateCcw,
   Save,
   Pencil,
   Trash2,
@@ -50,9 +39,18 @@ import {
   Users,
   FileText,
   Loader2,
+  Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
 import {
   getProjectList,
   createProject,
@@ -62,6 +60,10 @@ import {
   updateTask,
   deleteTask,
 } from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 // --- Types ---
 type ProjectStatus = "진행중" | "계획" | "보류" | "완료";
@@ -186,36 +188,36 @@ function mapProject(p: any): Project {
   };
 }
 
-// --- 상태 색상 ---
+// --- 상태 색상 (CSS 변수 기반) ---
 const getStatusColor = (status: ProjectStatus) => {
   switch (status) {
     case "진행중":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "계획":
-      return "bg-slate-100 text-slate-800 border-slate-200";
+      return "bg-muted text-muted-foreground border-border";
     case "보류":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "완료":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-primary/15 text-primary border-primary/25";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getTaskStatusColor = (status: string) => {
   switch (status) {
     case "대기":
-      return "bg-gray-100 text-gray-700";
+      return "bg-muted text-muted-foreground";
     case "진행중":
-      return "bg-blue-100 text-blue-800";
+      return "bg-primary/10 text-primary";
     case "검토중":
-      return "bg-amber-100 text-amber-800";
+      return "bg-destructive/10 text-destructive";
     case "완료":
-      return "bg-emerald-100 text-emerald-800";
+      return "bg-primary/15 text-primary";
     case "지연":
-      return "bg-rose-100 text-rose-800";
+      return "bg-destructive/10 text-destructive";
     default:
-      return "bg-gray-100 text-gray-700";
+      return "bg-muted text-muted-foreground";
   }
 };
 
@@ -232,9 +234,9 @@ const getRelationLabel = (r: RelationType | null) => {
 const getRelationColor = (r: RelationType | null) => {
   if (!r) return "";
   const m: Record<RelationType, string> = {
-    sub: "bg-blue-100 text-blue-700",
-    depend: "bg-amber-100 text-amber-800",
-    related: "bg-purple-100 text-purple-700",
+    sub: "bg-primary/10 text-primary",
+    depend: "bg-destructive/10 text-destructive",
+    related: "bg-secondary text-secondary-foreground",
   };
   return m[r];
 };
@@ -249,10 +251,10 @@ const categoryIcons: Record<string, string> = {
 };
 
 const progressColor = (p: number) =>
-  p >= 80 ? "bg-emerald-500" : p >= 40 ? "bg-blue-500" : p > 0 ? "bg-amber-500" : "bg-gray-300";
+  p >= 80 ? "bg-primary" : p >= 40 ? "bg-primary/70" : p > 0 ? "bg-primary/40" : "bg-muted-foreground/30";
 
 const progressTextColor = (p: number) =>
-  p >= 80 ? "text-emerald-600" : p >= 40 ? "text-blue-600" : p > 0 ? "text-amber-600" : "text-gray-400";
+  p >= 80 ? "text-primary" : p >= 40 ? "text-primary/80" : p > 0 ? "text-primary/60" : "text-muted-foreground";
 
 // --- Helper functions ---
 function getChildren(projects: Project[], parentId: string): Project[] {
@@ -268,17 +270,29 @@ function getAllDescendants(projects: Project[], parentId: string): Project[] {
   return all;
 }
 
+// --- Grid Columns ---
+const PROJECT_GRID_COLUMNS = [
+  { key: "project_no", label: "프로젝트번호" },
+  { key: "status", label: "상태" },
+  { key: "name", label: "프로젝트명" },
+  { key: "pm", label: "PM" },
+  { key: "customer", label: "고객" },
+  { key: "start_date", label: "시작일" },
+  { key: "end_date", label: "종료예정" },
+  { key: "progress", label: "진행률" },
+  { key: "source_no", label: "원접수번호" },
+];
+
 // --- Component ---
 export default function DesignProjectPage() {
+  const ts = useTableSettings("c16-design-project", "dsn_project", PROJECT_GRID_COLUMNS);
   const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState(true);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>({});
 
-  // 검색
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchPM, setSearchPM] = useState("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 상세 탭
   const [detailTab, setDetailTab] = useState("wbs");
@@ -350,18 +364,40 @@ export default function DesignProjectPage() {
     }
   }, []);
 
+  // snake_case → camelCase 매핑 (DynamicSearchFilter의 columnName은 snake_case)
+  const fieldMap: Record<string, string> = {
+    project_no: "projectNo",
+    start_date: "startDate",
+    end_date: "endDate",
+    source_no: "sourceNo",
+  };
+  const getFieldValue = (obj: any, colName: string): string => {
+    const key = fieldMap[colName] || colName;
+    const val = obj[key];
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
   // 필터링
   const filteredProjects = useMemo(() => {
-    if (searchStatus === "all" && searchPM === "all" && !searchKeyword) return projects;
+    if (searchFilters.length === 0) return projects;
 
     const matched = new Set<string>();
     projects.forEach((p) => {
       let pass = true;
-      if (searchStatus !== "all" && p.status !== searchStatus) pass = false;
-      if (searchPM !== "all" && p.pm !== searchPM) pass = false;
-      if (searchKeyword) {
-        const str = [p.projectNo, p.name, p.customer, p.pm, p.sourceNo].join(" ").toLowerCase();
-        if (!str.includes(searchKeyword.toLowerCase())) pass = false;
+      for (const f of searchFilters) {
+        const val = getFieldValue(p, f.columnName);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) { pass = false; break; }
+        } else if (f.operator === "equals") {
+          if (val !== f.value) { pass = false; break; }
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) { pass = false; break; }
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) { pass = false; break; }
+          if (to && val > to) { pass = false; break; }
+        }
       }
       if (pass) matched.add(p.id);
     });
@@ -379,7 +415,7 @@ export default function DesignProjectPage() {
     });
 
     return projects.filter((p) => result.has(p.id));
-  }, [projects, searchStatus, searchPM, searchKeyword]);
+  }, [projects, searchFilters]);
 
   const selectedProject = useMemo(
     () => projects.find((p) => p.id === selectedId),
@@ -411,11 +447,6 @@ export default function DesignProjectPage() {
     }));
   };
 
-  const handleResetSearch = () => {
-    setSearchStatus("all");
-    setSearchPM("all");
-    setSearchKeyword("");
-  };
 
   // --- 프로젝트 모달 ---
   const openProjectModal = (editProject?: Project, presetParentId?: string) => {
@@ -666,209 +697,144 @@ export default function DesignProjectPage() {
   );
 
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4">
-      {/* 검색 섹션 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[110px] h-9"><SelectValue /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                <SelectItem value="진행중">진행중</SelectItem>
-                <SelectItem value="계획">계획</SelectItem>
-                <SelectItem value="보류">보류</SelectItem>
-                <SelectItem value="완료">완료</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">PM</Label>
-            <Select value={searchPM} onValueChange={setSearchPM}>
-              <SelectTrigger className="w-[110px] h-9"><SelectValue /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                <SelectItem value="이설계">이설계</SelectItem>
-                <SelectItem value="박도면">박도면</SelectItem>
-                <SelectItem value="최기구">최기구</SelectItem>
-                <SelectItem value="김전장">김전장</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">프로젝트/고객 검색</Label>
-            <Input
-              placeholder="프로젝트번호 / 프로젝트명 / 고객명"
-              className="w-[280px] h-9"
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-            />
-          </div>
-          <div className="flex-1" />
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+    <div className="flex flex-col h-[calc(100vh-4rem)] gap-3 p-3">
+      {/* 검색 필터 */}
+      <div className="shrink-0">
+        <DynamicSearchFilter
+          tableName="dsn_project"
+          filterId="c16-design-project"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredProjects.length}
+        />
+      </div>
 
       {/* 좌우 분할 메인 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
         <ResizablePanelGroup direction="horizontal">
           {/* 왼쪽: 프로젝트 목록 */}
-          <ResizablePanel defaultSize={selectedId ? 50 : 100} minSize={30}>
+          <ResizablePanel defaultSize={55} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2">
-                  <Rocket className="w-5 h-5" /> 프로젝트 목록
-                  <Badge variant="secondary" className="font-normal">{filteredProjects.length}건</Badge>
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold flex items-center gap-2">
+                  프로젝트 목록
+                  <span className="text-xs font-medium text-primary bg-primary/8 border border-primary/15 rounded-md px-1.5 py-0.5">{filteredProjects.length}건</span>
                 </div>
                 <Button size="sm" onClick={() => openProjectModal()}>
                   <Plus className="w-4 h-4 mr-1.5" /> 프로젝트 등록
                 </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
               </div>
 
               <div className="flex-1 overflow-auto">
-                <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                    <TableRow>
-                      <TableHead className="w-[160px]">프로젝트번호</TableHead>
-                      <TableHead className="w-[80px] text-center">상태</TableHead>
-                      <TableHead className="w-[200px]">프로젝트명</TableHead>
-                      <TableHead className="w-[70px]">PM</TableHead>
-                      <TableHead className="w-[80px]">고객</TableHead>
-                      <TableHead className="w-[90px]">시작일</TableHead>
-                      <TableHead className="w-[90px]">종료예정</TableHead>
-                      <TableHead className="w-[100px] text-center">진행률</TableHead>
-                      <TableHead className="w-[90px]">원접수번호</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {loading ? (
-                      <TableRow>
-                        <TableCell colSpan={9} className="h-32 text-center text-muted-foreground">
-                          <Loader2 className="w-10 h-10 mx-auto mb-2 animate-spin text-muted-foreground" />
-                          <div className="text-sm">로딩 중...</div>
-                        </TableCell>
-                      </TableRow>
-                    ) : treeRows.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={9} className="h-32 text-center text-muted-foreground">
-                          <Rocket className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
-                          조건에 맞는 프로젝트가 없습니다
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      treeRows.map(({ project: p, depth }) => {
-                        const hasChildren = filteredProjects.some((c) => c.parentId === p.id);
-                        const isExpanded = expandedIds[p.id] !== false;
-                        const childCount = getAllDescendants(projects, p.id).length;
-
-                        return (
-                          <TableRow
-                            key={p.id}
-                            className={cn(
-                              "cursor-pointer hover:bg-muted/50 transition-colors",
-                              selectedId === p.id && "bg-primary/5",
-                              depth === 1 && "bg-slate-50/50",
-                              depth >= 2 && "bg-violet-50/30"
-                            )}
-                            onClick={() => {
-                              setSelectedId(p.id);
-                              setDetailTab("wbs");
-                              fetchTaskDetails(p.id);
-                            }}
-                          >
-                            <TableCell>
-                              <div className="flex items-center gap-1" style={{ paddingLeft: depth * 20 }}>
-                                {hasChildren ? (
-                                  <button
-                                    className="p-0.5 rounded hover:bg-muted transition-transform"
-                                    onClick={(e) => { e.stopPropagation(); toggleExpand(p.id); }}
-                                  >
-                                    <ChevronRight className={cn("w-3.5 h-3.5 text-muted-foreground transition-transform", isExpanded && "rotate-90")} />
-                                  </button>
-                                ) : (
-                                  <span className="w-4" />
-                                )}
-                                <span className={cn("font-semibold text-xs", depth === 0 ? "text-primary" : depth === 1 ? "text-indigo-600" : "text-violet-600")}>
-                                  {p.projectNo}
-                                </span>
-                                {p.relation && (
-                                  <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(p.relation))}>
-                                    {getRelationLabel(p.relation)}
-                                  </span>
-                                )}
-                              </div>
-                            </TableCell>
-                            <TableCell className="text-center">
-                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(p.status))}>
-                                {p.status}
-                              </span>
-                            </TableCell>
-                            <TableCell className="font-medium text-sm">
-                              {p.name}
-                              {childCount > 0 && (
-                                <Badge variant="outline" className="ml-1.5 text-[10px] py-0 px-1.5 font-normal">
-                                  <FolderOpen className="w-3 h-3 mr-0.5" /> {childCount}
-                                </Badge>
-                              )}
-                            </TableCell>
-                            <TableCell className="text-xs">{p.pm}</TableCell>
-                            <TableCell className="text-xs">{p.customer}</TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{p.startDate}</TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{p.endDate}</TableCell>
-                            <TableCell>
-                              <div className="flex items-center gap-1.5">
-                                <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
-                                  <div className={cn("h-full rounded-full transition-all", progressColor(p.progress))} style={{ width: `${p.progress}%` }} />
-                                </div>
-                                <span className={cn("text-[11px] font-medium min-w-[28px] text-right", progressTextColor(p.progress))}>{p.progress}%</span>
-                              </div>
-                            </TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{p.sourceNo || "-"}</TableCell>
-                          </TableRow>
-                        );
-                      })
-                    )}
-                  </TableBody>
-                </Table>
+                <EDataTable
+                  columns={[
+                    { key: "projectNo", label: "프로젝트번호", width: "w-[160px]", render: (_val: any, row: any) => {
+                      const depth = row._depth ?? 0;
+                      const hasChildren = filteredProjects.some((c) => c.parentId === row.id);
+                      const isExpanded = expandedIds[row.id] !== false;
+                      return (
+                        <div className="flex items-center gap-1" style={{ paddingLeft: depth * 20 }}>
+                          {hasChildren ? (
+                            <button className="p-0.5 rounded hover:bg-muted transition-transform" onClick={(e) => { e.stopPropagation(); toggleExpand(row.id); }}>
+                              <ChevronRight className={cn("w-3.5 h-3.5 text-muted-foreground transition-transform", isExpanded && "rotate-90")} />
+                            </button>
+                          ) : (<span className="w-4" />)}
+                          <span className={cn("font-semibold text-xs", depth === 0 ? "text-primary" : depth === 1 ? "text-primary/80" : "text-primary/60")}>{row.projectNo}</span>
+                          {row.relation && (<span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(row.relation))}>{getRelationLabel(row.relation)}</span>)}
+                        </div>
+                      );
+                    }},
+                    { key: "status", label: "상태", width: "w-[80px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(val))}>{val}</span> },
+                    { key: "name", label: "프로젝트명", width: "w-[200px]", render: (val: any, row: any) => {
+                      const childCount = getAllDescendants(projects, row.id).length;
+                      return (<><span className="font-medium text-sm">{val}</span>{childCount > 0 && <Badge variant="outline" className="ml-1.5 text-[10px] py-0 px-1.5 font-normal"><FolderOpen className="w-3 h-3 mr-0.5" /> {childCount}</Badge>}</>);
+                    }},
+                    { key: "pm", label: "PM", width: "w-[70px]" },
+                    { key: "customer", label: "고객", width: "w-[80px]" },
+                    { key: "startDate", label: "시작일", width: "w-[90px]" },
+                    { key: "endDate", label: "종료예정", width: "w-[90px]" },
+                    { key: "progress", label: "진행률", width: "w-[100px]", align: "center" as const, render: (val: any) => (
+                      <div className="flex items-center gap-1.5">
+                        <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                          <div className={cn("h-full rounded-full transition-all", progressColor(val))} style={{ width: `${val}%` }} />
+                        </div>
+                        <span className={cn("text-[11px] font-medium min-w-[28px] text-right", progressTextColor(val))}>{val}%</span>
+                      </div>
+                    )},
+                    { key: "sourceNo", label: "원접수번호", width: "w-[90px]", render: (val: any) => <span className="text-[13px] text-muted-foreground">{val || "-"}</span> },
+                  ] as EDataTableColumn[]}
+                  data={ts.groupData(treeRows.map(({ project: p, depth }) => ({ ...p, _depth: depth })))}
+                  rowKey={(row) => row.id}
+                  loading={loading}
+                  emptyMessage="조건에 맞는 프로젝트가 없어요"
+                  selectedId={selectedId}
+                  onSelect={(id) => {
+                    if (id) {
+                      setSelectedId(id);
+                      setDetailTab("wbs");
+                      fetchTaskDetails(id);
+                    }
+                  }}
+                  onRowClick={(row) => {
+                    setSelectedId(row.id);
+                    setDetailTab("wbs");
+                    fetchTaskDetails(row.id);
+                  }}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
               </div>
             </div>
           </ResizablePanel>
 
-          {/* 오른쪽: 상세 */}
-          {selectedId && selectedProject && (
-            <>
-              <ResizableHandle withHandle />
-              <ResizablePanel defaultSize={50} minSize={30}>
-                <div className="flex flex-col h-full bg-card">
-                  {/* 상세 헤더 */}
-                  <div className="flex items-center justify-between p-3 border-b shrink-0">
-                    <span className="font-semibold text-sm flex items-center gap-2">
-                      <ClipboardList className="w-4 h-4" />
-                      {selectedProject.projectNo} - {selectedProject.name}
-                    </span>
-                    <div className="flex items-center gap-1.5">
-                      <Button size="sm" variant="default" className="h-7 text-xs" onClick={() => openTaskModal()}>
-                        <Plus className="w-3.5 h-3.5 mr-1" /> 업무 추가
-                      </Button>
-                      <Button size="sm" variant="default" className="h-7 text-xs bg-violet-600 hover:bg-violet-700" onClick={() => openProjectModal(undefined, selectedProject.id)}>
-                        <FolderOpen className="w-3.5 h-3.5 mr-1" /> 하위 프로젝트
-                      </Button>
-                      <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openProjectModal(selectedProject)}>
-                        <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
-                      </Button>
-                    </div>
-                  </div>
+          <ResizableHandle withHandle />
 
-                  <div className="flex-1 overflow-auto p-4 space-y-4">
+          {/* 오른쪽: 상세 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 상세 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                {selectedProject ? (
+                  <div className="text-[13px] font-bold flex items-center gap-2">
+                    {selectedProject.name}
+                    <Badge variant="outline" className="text-[11px] font-normal px-1.5 py-0">{selectedProject.projectNo}</Badge>
+                  </div>
+                ) : (
+                  <div className="text-[13px] font-bold flex items-center gap-2">
+                    <ClipboardList className="w-3.5 h-3.5" /> 프로젝트 상세
+                  </div>
+                )}
+                {selectedProject && (
+                  <div className="flex items-center gap-1.5">
+                    <Button size="sm" variant="default" className="h-7 text-xs" onClick={() => openTaskModal()}>
+                      <Plus className="w-3.5 h-3.5 mr-1" /> 업무 추가
+                    </Button>
+                    <Button size="sm" variant="secondary" className="h-7 text-xs" onClick={() => openProjectModal(undefined, selectedProject.id)}>
+                      <FolderOpen className="w-3.5 h-3.5 mr-1" /> 하위 프로젝트
+                    </Button>
+                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openProjectModal(selectedProject)}>
+                      <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {!selectedId || !selectedProject ? (
+                <div className="flex-1 flex items-center justify-center p-8">
+                  <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-12 py-10 text-center">
+                    <Rocket className="h-10 w-10 text-muted-foreground/40" />
+                    <p className="text-sm text-muted-foreground">좌측에서 프로젝트를 선택해주세요</p>
+                  </div>
+                </div>
+              ) : (
+              <div className="flex-1 overflow-auto p-3 space-y-3">
                     {/* 상위 프로젝트 링크 */}
                     {parentProject && (
                       <div
-                        className="flex items-center gap-2 px-3 py-2 bg-blue-50 rounded-md border-l-[3px] border-primary text-sm cursor-pointer hover:bg-blue-100 transition-colors"
+                        className="flex items-center gap-2 px-3 py-2 bg-primary/5 rounded-md border-l-[3px] border-primary text-sm cursor-pointer hover:bg-primary/10 transition-colors"
                         onClick={() => { setSelectedId(parentProject.id); setDetailTab("wbs"); fetchTaskDetails(parentProject.id); }}
                       >
                         <span className="text-muted-foreground">상위:</span>
@@ -882,56 +848,61 @@ export default function DesignProjectPage() {
                     )}
 
                     {/* 개요 카드 */}
-                    <div className="grid grid-cols-5 gap-3">
-                      {[
-                        { label: "전체 업무", value: taskStats.total, color: "text-primary" },
-                        { label: "완료", value: taskStats.completed, color: "text-emerald-600" },
-                        { label: "진행중", value: taskStats.inProgress, color: "text-amber-600" },
-                        { label: "지연", value: taskStats.delayed, color: "text-destructive" },
-                        { label: "하위 프로젝트", value: childProjects.length, color: "text-violet-600" },
-                      ].map((item) => (
-                        <div key={item.label} className="bg-muted/30 rounded-lg p-3 text-center border">
-                          <div className="text-[11px] text-muted-foreground mb-1">{item.label}</div>
-                          <div className={cn("text-2xl font-bold", item.color)}>{item.value}</div>
-                        </div>
-                      ))}
+                    <div className="space-y-1.5">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 현황</span>
+                      <div className="grid grid-cols-5 gap-2">
+                        {[
+                          { label: "전체 업무", value: taskStats.total, color: "text-primary", bg: "bg-primary/5 border-primary/10" },
+                          { label: "완료", value: taskStats.completed, color: "text-primary", bg: "bg-primary/5 border-primary/10" },
+                          { label: "진행중", value: taskStats.inProgress, color: "text-primary/80", bg: "bg-primary/5 border-primary/10" },
+                          { label: "지연", value: taskStats.delayed, color: "text-destructive", bg: "bg-destructive/5 border-destructive/10" },
+                          { label: "하위 프로젝트", value: childProjects.length, color: "text-foreground", bg: "bg-muted/40 border-border" },
+                        ].map((item) => (
+                          <div key={item.label} className={cn("rounded-lg p-2.5 text-center border transition-colors hover:opacity-80", item.bg)}>
+                            <div className="text-[10px] text-muted-foreground mb-0.5">{item.label}</div>
+                            <div className={cn("text-xl font-bold", item.color)}>{item.value}</div>
+                          </div>
+                        ))}
+                      </div>
                     </div>
 
                     {/* 탭 */}
-                    <Tabs value={detailTab} onValueChange={setDetailTab}>
-                      <TabsList className="w-full">
-                        <TabsTrigger value="wbs" className="flex-1 text-xs gap-1.5">
-                          <ClipboardList className="w-3.5 h-3.5" /> WBS
-                        </TabsTrigger>
-                        <TabsTrigger value="gantt" className="flex-1 text-xs gap-1.5">
-                          <BarChart3 className="w-3.5 h-3.5" /> 간트차트
-                        </TabsTrigger>
-                        <TabsTrigger value="team" className="flex-1 text-xs gap-1.5">
-                          <Users className="w-3.5 h-3.5" /> 팀원
-                        </TabsTrigger>
-                        <TabsTrigger value="subprojects" className="flex-1 text-xs gap-1.5">
-                          <FolderOpen className="w-3.5 h-3.5" /> 하위({childProjects.length})
-                        </TabsTrigger>
+                    <Tabs value={detailTab} onValueChange={setDetailTab} className="flex flex-col flex-1 overflow-hidden gap-0">
+                      <TabsList className="bg-card w-full justify-start rounded-none border-b border-border p-0 h-auto shrink-0">
+                        {[
+                          { value: "wbs", icon: <ClipboardList className="w-3.5 h-3.5" />, label: "WBS" },
+                          { value: "gantt", icon: <BarChart3 className="w-3.5 h-3.5" />, label: "간트차트" },
+                          { value: "team", icon: <Users className="w-3.5 h-3.5" />, label: "팀원" },
+                          { value: "subprojects", icon: <FolderOpen className="w-3.5 h-3.5" />, label: `하위(${childProjects.length})` },
+                        ].map((tab) => (
+                          <TabsTrigger
+                            key={tab.value}
+                            value={tab.value}
+                            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                          >
+                            {tab.icon} {tab.label}
+                          </TabsTrigger>
+                        ))}
                       </TabsList>
 
                       {/* WBS 탭 */}
-                      <TabsContent value="wbs" className="mt-4">
+                      <TabsContent value="wbs" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
                         {selectedProject.tasks.length === 0 ? (
-                          <div className="text-center py-10 text-muted-foreground">
-                            <ClipboardList className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
-                            <div className="text-sm">등록된 업무가 없습니다</div>
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <ClipboardList className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">등록된 업무가 없어요</span>
                           </div>
                         ) : (
                           <Table>
-                            <TableHeader>
-                              <TableRow>
-                                <TableHead className="w-[180px]">업무명</TableHead>
-                                <TableHead className="w-[70px]">담당자</TableHead>
-                                <TableHead className="w-[85px]">시작일</TableHead>
-                                <TableHead className="w-[85px]">종료일</TableHead>
-                                <TableHead className="w-[70px] text-center">상태</TableHead>
-                                <TableHead className="w-[90px] text-center">진행률</TableHead>
-                                <TableHead className="w-[80px] text-center">관리</TableHead>
+                            <TableHeader className="sticky top-0 z-10">
+                              <TableRow className="bg-muted hover:bg-muted">
+                                <TableHead className="w-[180px] text-[11px] uppercase tracking-wide">업무명</TableHead>
+                                <TableHead className="w-[70px] text-[11px] uppercase tracking-wide">담당자</TableHead>
+                                <TableHead className="w-[85px] text-[11px] uppercase tracking-wide">시작일</TableHead>
+                                <TableHead className="w-[85px] text-[11px] uppercase tracking-wide">종료일</TableHead>
+                                <TableHead className="w-[70px] text-center text-[11px] uppercase tracking-wide">상태</TableHead>
+                                <TableHead className="w-[90px] text-center text-[11px] uppercase tracking-wide">진행률</TableHead>
+                                <TableHead className="w-[80px] text-center text-[11px] uppercase tracking-wide">관리</TableHead>
                               </TableRow>
                             </TableHeader>
                             <TableBody>
@@ -953,10 +924,10 @@ export default function DesignProjectPage() {
                                       const displayStatus = isDelay ? "지연" : task.status;
                                       return (
                                         <TableRow key={task._idx}>
-                                          <TableCell className="pl-8 text-xs">{task.name}</TableCell>
-                                          <TableCell className="text-xs">{task.assignee}</TableCell>
-                                          <TableCell className="text-xs text-muted-foreground">{task.start}</TableCell>
-                                          <TableCell className={cn("text-xs", isDelay && "text-destructive font-semibold")}>{task.end}</TableCell>
+                                          <TableCell className="pl-8 text-[13px]">{task.name}</TableCell>
+                                          <TableCell className="text-[13px]">{task.assignee}</TableCell>
+                                          <TableCell className="text-[13px] text-muted-foreground">{task.start}</TableCell>
+                                          <TableCell className={cn("text-[13px]", isDelay && "text-destructive font-semibold")}>{task.end}</TableCell>
                                           <TableCell className="text-center">
                                             <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", getTaskStatusColor(displayStatus))}>
                                               {displayStatus}
@@ -995,11 +966,11 @@ export default function DesignProjectPage() {
                       </TabsContent>
 
                       {/* 간트차트 탭 */}
-                      <TabsContent value="gantt" className="mt-4">
+                      <TabsContent value="gantt" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
                         {selectedProject.tasks.length === 0 ? (
-                          <div className="text-center py-10 text-muted-foreground">
-                            <BarChart3 className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
-                            <div className="text-sm">업무를 등록하면 간트차트가 표시됩니다</div>
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <BarChart3 className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">업무를 등록하면 간트차트가 표시돼요</span>
                           </div>
                         ) : (
                           <GanttChart tasks={selectedProject.tasks} startDate={selectedProject.startDate} endDate={selectedProject.endDate} />
@@ -1007,22 +978,22 @@ export default function DesignProjectPage() {
                       </TabsContent>
 
                       {/* 팀원 탭 */}
-                      <TabsContent value="team" className="mt-4">
+                      <TabsContent value="team" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
                         {selectedProject.tasks.length === 0 ? (
-                          <div className="text-center py-10 text-muted-foreground">
-                            <Users className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
-                            <div className="text-sm">업무를 등록하면 팀원 현황이 표시됩니다</div>
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <Users className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">업무를 등록하면 팀원 현황이 표시돼요</span>
                           </div>
                         ) : (
                           <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                             {Object.entries(teamMembers).map(([name, tasks], idx) => {
                               const avgProg = Math.round(tasks.reduce((s, t) => s + t.progress, 0) / tasks.length);
                               const isPM = name === selectedProject.pm;
-                              const avatarColors = ["bg-primary", "bg-emerald-600", "bg-violet-600", "bg-amber-600"];
+                              const avatarColors = ["bg-primary", "bg-primary/80", "bg-primary/60", "bg-destructive/70"];
                               return (
                                 <div key={name} className="border rounded-lg p-4 hover:shadow-sm transition-shadow">
                                   <div className="flex items-center gap-3 mb-3">
-                                    <div className={cn("w-10 h-10 rounded-full flex items-center justify-center text-white font-bold", avatarColors[idx % 4])}>
+                                    <div className={cn("w-10 h-10 rounded-full flex items-center justify-center text-primary-foreground font-bold", avatarColors[idx % 4])}>
                                       {name.charAt(0)}
                                     </div>
                                     <div>
@@ -1063,7 +1034,7 @@ export default function DesignProjectPage() {
                       </TabsContent>
 
                       {/* 하위 프로젝트 탭 */}
-                      <TabsContent value="subprojects" className="mt-4">
+                      <TabsContent value="subprojects" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                           {childProjects.map((child) => {
                             const completedCount = child.tasks.filter((t) => t.status === "완료").length;
@@ -1113,44 +1084,47 @@ export default function DesignProjectPage() {
                       </TabsContent>
                     </Tabs>
                   </div>
-                </div>
-              </ResizablePanel>
-            </>
-          )}
+              )}
+            </div>
+          </ResizablePanel>
         </ResizablePanelGroup>
       </div>
 
       {/* 프로젝트 등록/수정 모달 */}
       <Dialog open={isProjectModalOpen} onOpenChange={setIsProjectModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">
-              {projects.some((p) => p.id === formProjectId) ? "프로젝트 수정" : formParentId ? "하위 프로젝트 등록" : "프로젝트 등록"}
+            <DialogTitle>
+              {projects.some((p) => p.id === formProjectId)
+                ? "프로젝트 수정"
+                : formParentId
+                ? "하위 프로젝트 등록"
+                : "프로젝트 등록"}
             </DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">프로젝트 기본 정보를 입력하세요.</DialogDescription>
+            <DialogDescription>프로젝트 기본 정보를 입력해주세요.</DialogDescription>
           </DialogHeader>
           <div className="space-y-3 sm:space-y-4">
             <div>
-              <Label className="text-xs sm:text-sm">프로젝트 번호</Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 번호</span>
               <Input value={formProjectNo || formProjectId} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted/50" />
             </div>
             <div>
-              <Label className="text-xs sm:text-sm">프로젝트명 <span className="text-destructive">*</span></Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트명 <span className="text-destructive">*</span></span>
               <Input value={formName} onChange={(e) => setFormName(e.target.value)} placeholder="프로젝트명" className="h-8 text-xs sm:h-10 sm:text-sm" />
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">시작일 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">시작일 <span className="text-destructive">*</span></span>
                 <Input type="date" value={formStartDate} onChange={(e) => setFormStartDate(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">종료예정일 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">종료예정일 <span className="text-destructive">*</span></span>
                 <Input type="date" value={formEndDate} onChange={(e) => setFormEndDate(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">PM <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">PM <span className="text-destructive">*</span></span>
                 <Select value={formPM || "none"} onValueChange={(v) => setFormPM(v === "none" ? "" : v)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="선택" /></SelectTrigger>
                   <SelectContent>
@@ -1163,13 +1137,13 @@ export default function DesignProjectPage() {
                 </Select>
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">고객</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">고객</span>
                 <Input value={formCustomer} onChange={(e) => setFormCustomer(e.target.value)} placeholder="고객/거래처명" className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">상위 프로젝트</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상위 프로젝트</span>
                 <Select value={formParentId || "none"} onValueChange={(v) => setFormParentId(v === "none" ? "" : v)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="없음" /></SelectTrigger>
                   <SelectContent>
@@ -1181,7 +1155,7 @@ export default function DesignProjectPage() {
                 </Select>
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">관계 유형</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">관계 유형</span>
                 <Select value={formRelation} onValueChange={(v) => setFormRelation(v as RelationType)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
                   <SelectContent>
@@ -1193,17 +1167,17 @@ export default function DesignProjectPage() {
               </div>
             </div>
             <div>
-              <Label className="text-xs sm:text-sm">원접수번호</Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">원접수번호</span>
               <Input value={formSourceNo} onChange={(e) => setFormSourceNo(e.target.value)} placeholder="DR-XXXX-XXXX" className="h-8 text-xs sm:h-10 sm:text-sm" />
             </div>
             <div>
-              <Label className="text-xs sm:text-sm">설명</Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">설명</span>
               <Textarea value={formDesc} onChange={(e) => setFormDesc(e.target.value)} placeholder="프로젝트 개요" rows={3} />
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setIsProjectModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
-            <Button onClick={handleSaveProject} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsProjectModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveProject}>
               <Save className="w-4 h-4 mr-1.5" /> 저장
             </Button>
           </DialogFooter>
@@ -1212,19 +1186,19 @@ export default function DesignProjectPage() {
 
       {/* 업무 등록/수정 모달 */}
       <Dialog open={isTaskModalOpen} onOpenChange={setIsTaskModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">{editingTaskIdx >= 0 ? "업무 수정" : "업무 등록"}</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">업무 정보를 입력하세요.</DialogDescription>
+            <DialogTitle>{editingTaskIdx >= 0 ? "업무 수정" : "업무 등록"}</DialogTitle>
+            <DialogDescription>업무 정보를 입력해주세요.</DialogDescription>
           </DialogHeader>
           <div className="space-y-3">
             <div>
-              <Label className="text-xs sm:text-sm">업무명 <span className="text-destructive">*</span></Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무명 <span className="text-destructive">*</span></span>
               <Input value={tName} onChange={(e) => setTName(e.target.value)} placeholder="업무명" className="h-8 text-xs sm:h-10 sm:text-sm" />
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">업무 유형</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무 유형</span>
                 <Select value={tCategory} onValueChange={setTCategory}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
                   <SelectContent>
@@ -1235,7 +1209,7 @@ export default function DesignProjectPage() {
                 </Select>
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">담당자 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자 <span className="text-destructive">*</span></span>
                 <Select value={tAssignee || "none"} onValueChange={(v) => setTAssignee(v === "none" ? "" : v)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="선택" /></SelectTrigger>
                   <SelectContent>
@@ -1249,17 +1223,17 @@ export default function DesignProjectPage() {
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">시작일 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">시작일 <span className="text-destructive">*</span></span>
                 <Input type="date" value={tStart} onChange={(e) => setTStart(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">종료일 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">종료일 <span className="text-destructive">*</span></span>
                 <Input type="date" value={tEnd} onChange={(e) => setTEnd(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">상태</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상태</span>
                 <Select value={tStatus} onValueChange={(v) => setTStatus(v as TaskStatus)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
                   <SelectContent>
@@ -1270,18 +1244,18 @@ export default function DesignProjectPage() {
                 </Select>
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">진행률 (%)</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">진행률 (%)</span>
                 <Input type="number" min={0} max={100} value={tProgress} onChange={(e) => setTProgress(Number(e.target.value))} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
             </div>
             <div>
-              <Label className="text-xs sm:text-sm">비고</Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">비고</span>
               <Textarea value={tRemark} onChange={(e) => setTRemark(e.target.value)} placeholder="비고 사항" rows={2} />
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setIsTaskModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
-            <Button onClick={handleSaveTask} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsTaskModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveTask}>
               <Save className="w-4 h-4 mr-1.5" /> 저장
             </Button>
           </DialogFooter>
@@ -1290,15 +1264,15 @@ export default function DesignProjectPage() {
 
       {/* 태스크 상세 모달 (수행기록/이슈) */}
       <Dialog open={isTaskDetailOpen} onOpenChange={setIsTaskDetailOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[700px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-3xl max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">{detailTask?.name || "업무 상세"}</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">업무 이력 및 이슈를 확인합니다.</DialogDescription>
+            <DialogTitle>{detailTask?.name || "업무 상세"}</DialogTitle>
+            <DialogDescription>업무 이력 및 이슈를 확인해주세요.</DialogDescription>
           </DialogHeader>
           {detailTask && (
             <>
               {/* 태스크 요약 */}
-              <div className="grid grid-cols-2 gap-2 bg-muted/30 p-3 rounded-lg border text-xs">
+              <div className="grid grid-cols-2 gap-2 bg-muted/20 p-3 rounded-lg border text-xs">
                 <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">유형</span><span className="font-medium">{detailTask.category}</span></div>
                 <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">담당자</span><span className="font-medium">{detailTask.assignee}</span></div>
                 <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">기간</span><span className="font-medium">{detailTask.start} ~ {detailTask.end}</span></div>
@@ -1320,11 +1294,14 @@ export default function DesignProjectPage() {
                 </TabsList>
 
                 <TabsContent value="log" className="mt-3">
-                  <div className="bg-blue-50 rounded-md p-2.5 mb-3 text-xs text-blue-800 border border-blue-100">
-                    수행기록 등록/수정은 <strong>내업무현황</strong> 메뉴에서 진행합니다.
+                  <div className="bg-primary/5 rounded-md p-2.5 mb-3 text-xs text-primary border border-primary/20">
+                    수행기록 등록/수정은 <strong>내업무현황</strong> 메뉴에서 진행해요.
                   </div>
                   {(!detailTask.workLogs || detailTask.workLogs.length === 0) ? (
-                    <div className="text-center py-8 text-muted-foreground text-sm">등록된 수행기록이 없습니다.</div>
+                    <div className="flex flex-col items-center gap-2 py-8 mx-auto max-w-xs border border-dashed border-border rounded-lg">
+                      <ClipboardList className="w-8 h-8 text-muted-foreground/30" />
+                      <span className="text-sm text-muted-foreground">등록된 수행기록이 없어요</span>
+                    </div>
                   ) : (
                     <div className="space-y-2 max-h-[300px] overflow-y-auto">
                       {[...detailTask.workLogs].sort((a, b) => b.date.localeCompare(a.date)).map((log, i) => {
@@ -1342,7 +1319,7 @@ export default function DesignProjectPage() {
                               <div className="flex gap-2 text-muted-foreground flex-wrap">
                                 <Badge variant="secondary" className="text-[10px] py-0">⏱ {log.hours}h</Badge>
                                 {log.progressBefore !== undefined && (
-                                  <Badge variant="outline" className="text-[10px] py-0 bg-emerald-50 text-emerald-700 border-emerald-200">
+                                  <Badge variant="outline" className="text-[10px] py-0 bg-primary/5 text-primary border-primary/20">
                                     📈 {log.progressBefore}% → {log.progressAfter}%
                                   </Badge>
                                 )}
@@ -1358,12 +1335,15 @@ export default function DesignProjectPage() {
 
                 <TabsContent value="issue" className="mt-3">
                   {(!detailTask.issues || detailTask.issues.length === 0) ? (
-                    <div className="text-center py-8 text-muted-foreground text-sm">등록된 이슈가 없습니다.</div>
+                    <div className="flex flex-col items-center gap-2 py-8 mx-auto max-w-xs border border-dashed border-border rounded-lg">
+                      <ClipboardList className="w-8 h-8 text-muted-foreground/30" />
+                      <span className="text-sm text-muted-foreground">등록된 이슈가 없어요</span>
+                    </div>
                   ) : (
                     <div className="space-y-2 max-h-[300px] overflow-y-auto">
                       {detailTask.issues.map((issue) => {
-                        const priorityColor = issue.priority === "긴급" ? "text-destructive" : issue.priority === "높음" ? "text-amber-600" : "text-muted-foreground";
-                        const statusBadge = issue.status === "해결" ? "bg-emerald-100 text-emerald-700" : issue.status === "진행중" ? "bg-blue-100 text-blue-700" : "bg-rose-100 text-rose-700";
+                        const priorityColor = issue.priority === "긴급" ? "text-destructive" : issue.priority === "높음" ? "text-destructive/70" : "text-muted-foreground";
+                        const statusBadge = issue.status === "해결" ? "bg-primary/10 text-primary" : issue.status === "진행중" ? "bg-primary/10 text-primary" : "bg-destructive/10 text-destructive";
                         return (
                           <div key={issue.id} className="border rounded-lg p-3">
                             <div className="flex items-center justify-between mb-1.5">
@@ -1389,10 +1369,19 @@ export default function DesignProjectPage() {
             </>
           )}
           <DialogFooter>
-            <Button variant="outline" onClick={() => setIsTaskDetailOpen(false)} className="h-8 text-xs sm:h-10 sm:text-sm">닫기</Button>
+            <Button variant="outline" onClick={() => setIsTaskDetailOpen(false)}>닫기</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
@@ -1423,12 +1412,12 @@ function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: s
   }
 
   const barColors: Record<string, string> = {
-    기구설계: "bg-blue-500",
-    전장설계: "bg-amber-500",
-    SW개발: "bg-violet-500",
-    "구매/조달": "bg-emerald-500",
-    "조립/시운전": "bg-rose-500",
-    "검토/승인": "bg-gray-400",
+    기구설계: "bg-primary",
+    전장설계: "bg-primary/80",
+    SW개발: "bg-primary/60",
+    "구매/조달": "bg-secondary-foreground/70",
+    "조립/시운전": "bg-destructive/70",
+    "검토/승인": "bg-muted-foreground",
   };
 
   const todayFromStart = Math.ceil((today.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24));
@@ -1465,8 +1454,8 @@ function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: s
                   key={i}
                   className={cn(
                     "text-center text-[10px] text-muted-foreground border-r py-1.5",
-                    isWeekend && "bg-rose-50",
-                    isToday && "bg-blue-50 text-primary font-bold"
+                    isWeekend && "bg-muted/30",
+                    isToday && "bg-primary/5 text-primary font-bold"
                   )}
                   style={{ minWidth: cellWidth }}
                 >
@@ -1485,7 +1474,7 @@ function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: s
           const taskDays = Math.max(1, Math.ceil((tEnd.getTime() - tStart.getTime()) / (1000 * 60 * 60 * 24)) + 1);
           const leftPos = useWeekly ? (dayFromStart / 7) * cellWidth : dayFromStart * cellWidth;
           const barWidth = useWeekly ? (taskDays / 7) * cellWidth : taskDays * cellWidth;
-          const barColor = barColors[task.category] || "bg-blue-500";
+          const barColor = barColors[task.category] || "bg-primary";
 
           return (
             <div key={i} className="flex border-b hover:bg-muted/30 min-h-[34px]">
@@ -1494,10 +1483,10 @@ function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: s
                 {dates.map((d, di) => {
                   const dow = d.getDay();
                   const isWeekend = (dow === 0 || dow === 6) && !useWeekly;
-                  return <div key={di} className={cn("border-r h-full", isWeekend && "bg-rose-50")} style={{ minWidth: cellWidth }} />;
+                  return <div key={di} className={cn("border-r h-full", isWeekend && "bg-muted/30")} style={{ minWidth: cellWidth }} />;
                 })}
                 <div
-                  className={cn("absolute h-5 rounded text-[10px] text-white flex items-center justify-center font-semibold", barColor)}
+                  className={cn("absolute h-5 rounded text-[10px] text-primary-foreground flex items-center justify-center font-semibold", barColor)}
                   style={{ left: leftPos, width: Math.max(barWidth, 16), top: "50%", transform: "translateY(-50%)" }}
                 >
                   {barWidth > 30 ? `${task.progress}%` : ""}
diff --git a/frontend/app/(main)/COMPANY_10/design/task-management/page.tsx b/frontend/app/(main)/COMPANY_10/design/task-management/page.tsx
index d68bb5a2..f5603e46 100644
--- a/frontend/app/(main)/COMPANY_10/design/task-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/design/task-management/page.tsx
@@ -1,15 +1,8 @@
 "use client";
 
-import React, { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import React, { useState, useMemo, useCallback, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import {
   Table,
   TableBody,
@@ -24,10 +17,9 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogFooter,
   DialogDescription,
+  DialogFooter,
 } from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import {
   ResizableHandle,
@@ -48,8 +40,6 @@ import {
   CommandList,
 } from "@/components/ui/command";
 import {
-  Search,
-  RotateCcw,
   RefreshCw,
   ClipboardList,
   Pencil,
@@ -58,7 +48,6 @@ import {
   XCircle,
   Rocket,
   Eye,
-  ChevronRight,
   ArrowRight,
   Check,
   ChevronsUpDown,
@@ -66,7 +55,9 @@ import {
   Loader2,
   User,
   Users,
+  Settings2,
 } from "lucide-react";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
 import {
@@ -77,6 +68,9 @@ import {
 } from "@/lib/api/design";
 import { getUserList } from "@/lib/api/user";
 import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 
 // --- Types ---
 type SourceType = "dr" | "ecr";
@@ -121,39 +115,39 @@ interface TaskItem {
 const getStatusVariant = (status: TaskStatus) => {
   switch (status) {
     case "신규접수":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "검토중":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-muted text-muted-foreground border-border";
     case "승인완료":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-primary/15 text-primary border-primary/25";
     case "반려":
-      return "bg-rose-100 text-rose-800 border-rose-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "프로젝트생성":
-      return "bg-violet-100 text-violet-800 border-violet-200";
+      return "bg-secondary text-secondary-foreground border-border";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getPriorityVariant = (priority: Priority) => {
   switch (priority) {
     case "긴급":
-      return "bg-rose-100 text-rose-800 border-rose-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "높음":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "보통":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-muted text-muted-foreground border-border";
     case "낮음":
-      return "bg-gray-100 text-gray-600 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
     default:
-      return "bg-gray-100 text-gray-600 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getSourceBadge = (type: SourceType) => {
   if (type === "dr")
-    return "bg-blue-100 text-blue-800 border-blue-200";
-  return "bg-amber-100 text-amber-800 border-amber-200";
+    return "bg-primary/10 text-primary border-primary/20";
+  return "bg-secondary text-secondary-foreground border-border";
 };
 
 const getStepIcon = (step: string) => {
@@ -216,11 +210,11 @@ const APPROVAL_STEPS = [
 
 // --- 현황 카드 설정 ---
 const STAT_CARDS: { label: string; status: TaskStatus; color: string; textColor: string }[] = [
-  { label: "신규접수", status: "신규접수", color: "from-indigo-500 to-purple-600", textColor: "text-white" },
-  { label: "검토중", status: "검토중", color: "from-amber-400 to-orange-500", textColor: "text-gray-900" },
-  { label: "승인완료", status: "승인완료", color: "from-cyan-400 to-blue-500", textColor: "text-white" },
-  { label: "반려", status: "반려", color: "from-rose-400 to-red-500", textColor: "text-white" },
-  { label: "프로젝트", status: "프로젝트생성", color: "from-violet-400 to-purple-500", textColor: "text-white" },
+  { label: "신규접수", status: "신규접수", color: "bg-primary", textColor: "text-primary-foreground" },
+  { label: "검토중", status: "검토중", color: "bg-muted border border-border", textColor: "text-foreground" },
+  { label: "승인완료", status: "승인완료", color: "bg-primary/80", textColor: "text-primary-foreground" },
+  { label: "반려", status: "반려", color: "bg-destructive", textColor: "text-destructive-foreground" },
+  { label: "프로젝트", status: "프로젝트생성", color: "bg-secondary", textColor: "text-secondary-foreground" },
 ];
 
 interface EmployeeOption {
@@ -229,7 +223,21 @@ interface EmployeeOption {
   deptName: string;
 }
 
+const TASK_GRID_COLUMNS = [
+  { key: "source_type", label: "구분" },
+  { key: "request_no", label: "접수번호" },
+  { key: "status", label: "상태" },
+  { key: "priority", label: "우선순위" },
+  { key: "target_name", label: "설비/품목명" },
+  { key: "req_dept", label: "의뢰부서" },
+  { key: "requester", label: "의뢰자" },
+  { key: "request_date", label: "접수일자" },
+  { key: "due_date", label: "희망납기" },
+  { key: "designer", label: "설계담당" },
+];
+
 export default function DesignTaskManagementPage() {
+  const ts = useTableSettings("c16-task-management", "dsn_design_request", TASK_GRID_COLUMNS);
   const { user, userName, loading: authLoading } = useAuth();
   const [allTasks, setAllTasks] = useState<TaskItem[]>([]);
   const [loading, setLoading] = useState(true);
@@ -272,11 +280,8 @@ export default function DesignTaskManagementPage() {
     fetchEmployees();
   }, [fetchTasks, fetchEmployees]);
 
-  // 검색 필터
-  const [searchStatus, setSearchStatus] = useState<string>("all");
-  const [searchPriority, setSearchPriority] = useState<string>("all");
-  const [searchReqDept, setSearchReqDept] = useState<string>("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 담당자 선택 모달 상태
   const [designerModalOpen, setDesignerModalOpen] = useState(false);
@@ -336,23 +341,51 @@ export default function DesignTaskManagementPage() {
     };
   }, [myRelatedTasks]);
 
+  // snake_case → camelCase 매핑 (DynamicSearchFilter의 columnName은 snake_case)
+  const taskFieldMap: Record<string, string> = {
+    source_type: "sourceType",
+    request_no: "id",
+    target_name: "targetName",
+    req_dept: "reqDept",
+    request_date: "date",
+    due_date: "dueDate",
+    approval_step: "approvalStep",
+    design_type: "designType",
+    drawing_no: "drawingNo",
+    change_type: "changeType",
+    review_memo: "reviewMemo",
+    project_id: "projectNo",
+  };
+  const getTaskFieldValue = (obj: any, colName: string): string => {
+    const key = taskFieldMap[colName] || colName;
+    const val = obj[key];
+    if (Array.isArray(val)) return val.join(",");
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
   // 필터링된 데이터
   const filteredData = useMemo(() => {
     return myRelatedTasks.filter((item) => {
       if (currentTab === "dr" && item.sourceType !== "dr") return false;
       if (currentTab === "ecr" && item.sourceType !== "ecr") return false;
-      if (searchStatus !== "all" && item.status !== searchStatus) return false;
-      if (searchPriority !== "all" && item.priority !== searchPriority) return false;
-      if (searchReqDept !== "all" && item.reqDept !== searchReqDept) return false;
-      if (searchKeyword) {
-        const str = [item.id, item.targetName, item.customer, item.requester, item.designer, item.reqDept]
-          .join(" ")
-          .toLowerCase();
-        if (!str.includes(searchKeyword.toLowerCase())) return false;
+      for (const f of searchFilters) {
+        const val = getTaskFieldValue(item, f.columnName);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (val !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) return false;
+          if (to && val > to) return false;
+        }
       }
       return true;
     });
-  }, [myRelatedTasks, currentTab, searchStatus, searchPriority, searchReqDept, searchKeyword]);
+  }, [myRelatedTasks, currentTab, searchFilters]);
 
   // 현황 통계
   const stats = useMemo(() => {
@@ -592,15 +625,8 @@ export default function DesignTaskManagementPage() {
     fetchTasks();
   }, [selectedTaskId, reviewMemoText, fetchTasks]);
 
-  const handleResetSearch = useCallback(() => {
-    setSearchStatus("all");
-    setSearchPriority("all");
-    setSearchReqDept("all");
-    setSearchKeyword("");
-  }, []);
-
-  const handleFilterByStatus = useCallback((status: TaskStatus) => {
-    setSearchStatus(status);
+  const handleFilterByStatus = useCallback((_status: TaskStatus) => {
+    // Status filter now handled by DynamicSearchFilter
   }, []);
 
   // 납기 남은 일수 계산
@@ -608,13 +634,13 @@ export default function DesignTaskManagementPage() {
     const due = new Date(dueDate);
     const today = new Date();
     const diffDays = Math.ceil((due.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
-    const color = diffDays < 0 ? "text-rose-600" : diffDays <= 7 ? "text-amber-600" : "text-emerald-600";
+    const color = diffDays < 0 ? "text-destructive" : diffDays <= 7 ? "text-primary" : "text-muted-foreground";
     const text = diffDays < 0 ? `${Math.abs(diffDays)}일 초과` : diffDays === 0 ? "오늘" : `${diffDays}일 남음`;
     return { color, text };
   };
 
   return (
-    <div className="flex h-full flex-col overflow-hidden bg-background">
+    <div className="flex h-[calc(100vh-4rem)] flex-col overflow-hidden bg-background">
       {/* 탭 바 */}
       <div className="flex items-center border-b-2 border-border bg-card px-5">
         {([
@@ -640,7 +666,7 @@ export default function DesignTaskManagementPage() {
             <span
               className={cn(
                 "min-w-[20px] rounded-full px-1.5 py-0.5 text-center text-[11px] font-bold",
-                tab.isNew ? "bg-rose-500 text-white" : "bg-muted text-muted-foreground"
+                tab.isNew ? "bg-destructive text-destructive-foreground" : "bg-muted text-muted-foreground"
               )}
             >
               {tab.count}
@@ -682,73 +708,22 @@ export default function DesignTaskManagementPage() {
               전체
             </button>
           </div>
-          <div className="flex items-center gap-1.5 rounded-full bg-emerald-50 px-3 py-1 text-xs text-emerald-600 dark:bg-emerald-950/30 dark:text-emerald-400">
-            <span className="h-2 w-2 animate-pulse rounded-full bg-emerald-500" />
+          <div className="flex items-center gap-1.5 rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">
+            <span className="h-2 w-2 animate-pulse rounded-full bg-primary" />
             실시간 동기화 중
           </div>
         </div>
       </div>
 
-      {/* 검색 섹션 */}
-      <div className="border-b border-border bg-card px-5 py-3">
-        <div className="flex flex-wrap items-center gap-3">
-          <div className="flex flex-1 flex-wrap items-center gap-3">
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="h-9 w-[130px] text-xs">
-                <SelectValue placeholder="상태 전체" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">상태 전체</SelectItem>
-                <SelectItem value="신규접수">신규접수</SelectItem>
-                <SelectItem value="검토중">검토중</SelectItem>
-                <SelectItem value="승인완료">승인완료</SelectItem>
-                <SelectItem value="반려">반려</SelectItem>
-                <SelectItem value="프로젝트생성">프로젝트생성</SelectItem>
-              </SelectContent>
-            </Select>
-            <Select value={searchPriority} onValueChange={setSearchPriority}>
-              <SelectTrigger className="h-9 w-[130px] text-xs">
-                <SelectValue placeholder="우선순위 전체" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">우선순위 전체</SelectItem>
-                <SelectItem value="긴급">긴급</SelectItem>
-                <SelectItem value="높음">높음</SelectItem>
-                <SelectItem value="보통">보통</SelectItem>
-                <SelectItem value="낮음">낮음</SelectItem>
-              </SelectContent>
-            </Select>
-            <Select value={searchReqDept} onValueChange={setSearchReqDept}>
-              <SelectTrigger className="h-9 w-[130px] text-xs">
-                <SelectValue placeholder="의뢰부서 전체" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">의뢰부서 전체</SelectItem>
-                <SelectItem value="영업팀">영업팀</SelectItem>
-                <SelectItem value="생산팀">생산팀</SelectItem>
-                <SelectItem value="품질팀">품질팀</SelectItem>
-                <SelectItem value="구매팀">구매팀</SelectItem>
-                <SelectItem value="기획팀">기획팀</SelectItem>
-                <SelectItem value="설계팀">설계팀</SelectItem>
-              </SelectContent>
-            </Select>
-            <div className="relative min-w-[280px]">
-              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                value={searchKeyword}
-                onChange={(e) => setSearchKeyword(e.target.value)}
-                placeholder="접수번호 / 설비명 / 품목명 / 고객명 검색"
-                className="h-9 pl-9 text-xs"
-              />
-            </div>
-          </div>
-          <div className="flex shrink-0 gap-2">
-            <Button size="sm" variant="outline" onClick={handleResetSearch}>
-              <RotateCcw className="mr-1 h-3.5 w-3.5" />
-              초기화
-            </Button>
-          </div>
-        </div>
+      {/* 검색 필터 */}
+      <div className="border-b border-border bg-card px-4 py-3">
+        <DynamicSearchFilter
+          tableName="dsn_design_request"
+          filterId="c16-task-management"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredData.length}
+        />
       </div>
 
       {/* 좌우 분할 패널 */}
@@ -757,98 +732,67 @@ export default function DesignTaskManagementPage() {
           {/* 왼쪽: 접수 목록 */}
           <ResizablePanel defaultSize={58} minSize={35}>
             <div className="flex h-full flex-col bg-card">
-              <div className="flex items-center justify-between border-b-2 border-border px-5 py-3">
-                <h2 className="text-base font-bold text-foreground">
-                  {myTasksOnly ? "내 관련 업무" : "접수 업무 목록"} ({filteredData.length}건)
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold flex items-center gap-2">
+                  {myTasksOnly ? "내 관련 업무" : "접수 업무 목록"}
+                  <span className="text-primary bg-primary/8 border border-primary/15 rounded-md px-1.5 py-0.5 text-[11px] font-semibold">{filteredData.length}건</span>
                   {myTasksOnly && (
-                    <span className="ml-2 text-xs font-normal text-muted-foreground">
+                    <span className="text-xs font-normal text-muted-foreground">
                       전체 {allTasks.length}건 중
                     </span>
                   )}
-                </h2>
+                </div>
                 <Button size="sm" variant="outline" onClick={fetchTasks} disabled={loading}>
                   {loading ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
                   동기화
                 </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
               </div>
-              <div className="flex-1 overflow-auto">
-                <Table>
-                  <TableHeader className="sticky top-0 z-10 bg-muted">
-                    <TableRow>
-                      <TableHead className="w-[60px] text-center text-xs">구분</TableHead>
-                      <TableHead className="w-[130px] text-xs">접수번호</TableHead>
-                      <TableHead className="w-[90px] text-center text-xs">상태</TableHead>
-                      <TableHead className="w-[80px] text-center text-xs">우선순위</TableHead>
-                      <TableHead className="min-w-[180px] text-xs">설비/품목명</TableHead>
-                      <TableHead className="w-[90px] text-xs">의뢰부서</TableHead>
-                      <TableHead className="w-[80px] text-xs">의뢰자</TableHead>
-                      <TableHead className="w-[100px] text-xs">접수일자</TableHead>
-                      <TableHead className="w-[100px] text-xs">희망납기</TableHead>
-                      <TableHead className="w-[80px] text-xs">설계담당</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {loading && allTasks.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={10}>
-                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-                            <Loader2 className="mb-2 h-10 w-10 animate-spin" />
-                            <span className="text-sm">로딩 중...</span>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ) : filteredData.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={10}>
-                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-                            <Inbox className="mb-2 h-10 w-10" />
-                            <span className="text-sm">조건에 맞는 업무가 없습니다</span>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      filteredData.map((item) => (
-                        <TableRow
-                          key={item.id}
-                          className={cn(
-                            "cursor-pointer transition-colors",
-                            selectedTaskId === item.dbId && "bg-primary/5",
-                            item.status === "신규접수" && "bg-amber-50/50 dark:bg-amber-950/10"
-                          )}
-                          onClick={() => handleSelectTask(item.dbId)}
-                        >
-                          <TableCell className="text-center">
-                            <Badge variant="outline" className={cn("text-[10px] font-bold", getSourceBadge(item.sourceType))}>
-                              {item.sourceType === "dr" ? "DR" : "ECR"}
-                            </Badge>
-                          </TableCell>
-                          <TableCell className={cn("text-xs font-semibold", item.sourceType === "dr" ? "text-blue-600" : "text-amber-600")}>
-                            {item.id}
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <Badge variant="outline" className={cn("text-[10px]", getStatusVariant(item.status))}>
-                              {item.status}
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <Badge variant="outline" className={cn("text-[10px]", getPriorityVariant(item.priority))}>
-                              {item.priority}
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="max-w-[200px] truncate text-xs font-medium">{item.targetName}</TableCell>
-                          <TableCell className="text-xs">{item.reqDept}</TableCell>
-                          <TableCell className="text-xs">{item.requester}</TableCell>
-                          <TableCell className="text-xs">{item.date}</TableCell>
-                          <TableCell className="text-xs">{item.dueDate}</TableCell>
-                          <TableCell className="text-xs">
-                            {item.designer || <span className="text-muted-foreground">미배정</span>}
-                          </TableCell>
-                        </TableRow>
-                      ))
-                    )}
-                  </TableBody>
-                </Table>
-              </div>
+              <EDataTable<TaskItem>
+                columns={ts.visibleColumns.map((col): EDataTableColumn<TaskItem> => ({
+                  key: col.key === "request_no" ? "id" : col.key === "target_name" ? "targetName" : col.key === "req_dept" ? "reqDept" : col.key === "request_date" ? "date" : col.key === "due_date" ? "dueDate" : col.key === "source_type" ? "sourceType" : col.key,
+                  label: col.label,
+                  width: col.key === "source_type" ? "w-[60px]" : col.key === "request_no" ? "w-[130px]" : col.key === "status" ? "w-[90px]" : col.key === "priority" ? "w-[80px]" : col.key === "target_name" ? "min-w-[180px]" : col.key === "req_dept" ? "w-[90px]" : col.key === "requester" ? "w-[80px]" : col.key === "request_date" ? "w-[100px]" : col.key === "due_date" ? "w-[100px]" : col.key === "designer" ? "w-[80px]" : undefined,
+                  align: (col.key === "source_type" || col.key === "status" || col.key === "priority") ? "center" : undefined,
+                  render: col.key === "source_type"
+                    ? (val: any, row: TaskItem) => (
+                        <Badge variant="outline" className={cn("text-[10px] font-bold", getSourceBadge(row.sourceType))}>
+                          {row.sourceType === "dr" ? "DR" : "ECR"}
+                        </Badge>
+                      )
+                    : col.key === "request_no"
+                    ? (val: any, row: TaskItem) => (
+                        <span className={cn("text-[13px] font-semibold", row.sourceType === "dr" ? "text-primary" : "text-secondary-foreground")}>
+                          {val}
+                        </span>
+                      )
+                    : col.key === "status"
+                    ? (val: any) => (
+                        <Badge variant="outline" className={cn("text-[10px]", getStatusVariant(val))}>
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "priority"
+                    ? (val: any) => (
+                        <Badge variant="outline" className={cn("text-[10px]", getPriorityVariant(val))}>
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "designer"
+                    ? (val: any) => val ? <span>{val}</span> : <span className="text-muted-foreground">미배정</span>
+                    : undefined,
+                }))}
+                data={ts.groupData(filteredData)}
+                loading={loading}
+                emptyMessage="조건에 맞는 업무가 없어요"
+                rowKey={(row) => row.dbId}
+                selectedId={selectedTaskId}
+                onSelect={(id) => handleSelectTask(id ?? "")}
+                draggableColumns={false}
+                showPagination={false}
+              />
             </div>
           </ResizablePanel>
 
@@ -857,45 +801,50 @@ export default function DesignTaskManagementPage() {
           {/* 오른쪽: 검토 및 승인 */}
           <ResizablePanel defaultSize={42} minSize={30}>
             <div className="flex h-full flex-col bg-card">
-              <div className="flex items-center justify-between border-b-2 border-border px-5 py-3">
-                <h2 className="text-base font-bold text-foreground">검토 및 승인</h2>
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold">검토 및 승인</div>
               </div>
-              <div className="flex-1 overflow-auto p-4">
-                {/* 현황 카드 */}
-                <div className="mb-4 grid grid-cols-5 gap-2">
-                  {STAT_CARDS.map((card) => (
-                    <button
-                      key={card.status}
-                      className={cn(
-                        "rounded-lg bg-linear-to-br p-3 text-center transition-all hover:-translate-y-0.5 hover:shadow-md",
-                        card.color, card.textColor
-                      )}
-                      onClick={() => handleFilterByStatus(card.status)}
-                    >
-                      <div className="text-xs font-medium opacity-90">{card.label}</div>
-                      <div className="text-2xl font-bold">{stats[card.status]}</div>
-                    </button>
-                  ))}
+              <div className="flex-1 overflow-auto p-3">
+                {/* 업무 현황 */}
+                <div className="mb-3 space-y-1.5">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무 현황</span>
+                  <div className="grid grid-cols-5 gap-2">
+                    {STAT_CARDS.map((card) => (
+                      <button
+                        key={card.status}
+                        className={cn(
+                          "rounded-lg p-2.5 text-center transition-all hover:-translate-y-0.5 hover:shadow-md",
+                          card.color, card.textColor
+                        )}
+                        onClick={() => handleFilterByStatus(card.status)}
+                      >
+                        <div className="text-[11px] font-medium opacity-90 leading-tight">{card.label}</div>
+                        <div className="text-xl font-bold mt-0.5">{stats[card.status]}</div>
+                      </button>
+                    ))}
+                  </div>
                 </div>
 
                 {/* 상세 정보 */}
                 {!selectedTask ? (
-                  <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
-                    <ChevronRight className="mb-2 h-10 w-10" />
-                    <span className="text-sm">좌측 목록에서 업무를 선택하세요</span>
+                  <div className="flex items-center justify-center p-6">
+                    <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-10 py-8 text-center">
+                      <Inbox className="h-10 w-10 text-muted-foreground/40" />
+                      <p className="text-sm text-muted-foreground">좌측에서 업무를 선택해주세요</p>
+                    </div>
                   </div>
                 ) : (
-                  <div className="space-y-4">
+                  <div className="space-y-3">
                     {/* 승인 프로세스 */}
-                    <div className="rounded-lg border border-sky-200 bg-sky-50/50 p-4 dark:border-sky-800 dark:bg-sky-950/20">
-                      <h3 className="mb-3 text-sm font-bold text-sky-700 dark:text-sky-400">승인 프로세스</h3>
+                    <div className="rounded-lg border border-border/80 bg-muted/30 p-3.5">
+                      <h3 className="mb-3 text-sm font-bold text-foreground">승인 프로세스</h3>
                       <div className="mb-3 flex items-center gap-1">
                         {APPROVAL_STEPS.map((s, idx) => {
                           let stepClass = "border-border bg-card text-muted-foreground";
                           if (selectedTask.status === "반려" && idx >= 2) {
-                            stepClass = idx === 2 ? "border-rose-400 bg-rose-50 text-rose-800 dark:bg-rose-950/30 dark:text-rose-300" : "border-border bg-card text-muted-foreground";
+                            stepClass = idx === 2 ? "border-destructive bg-destructive/5 text-destructive" : "border-border bg-card text-muted-foreground";
                           } else if (selectedTask.approvalStep > idx) {
-                            stepClass = "border-emerald-400 bg-emerald-50 text-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-300";
+                            stepClass = "border-primary bg-primary/5 text-primary";
                           } else if (selectedTask.approvalStep === idx) {
                             stepClass = "border-primary bg-primary/5 text-primary ring-2 ring-primary/10";
                           }
@@ -916,7 +865,7 @@ export default function DesignTaskManagementPage() {
                       <div className="flex flex-wrap gap-2">
                         {selectedTask.status === "신규접수" && (
                           <>
-                            <Button size="sm" className="bg-emerald-600 text-white hover:bg-emerald-700" onClick={() => handleOpenDesignerModal(selectedTask.dbId)}>
+                            <Button size="sm" variant="default" onClick={() => handleOpenDesignerModal(selectedTask.dbId)}>
                               <Eye className="mr-1 h-3.5 w-3.5" /> 검토 착수
                             </Button>
                             <Button size="sm" variant="destructive" onClick={() => handleOpenRejectModal(selectedTask.dbId)}>
@@ -926,7 +875,7 @@ export default function DesignTaskManagementPage() {
                         )}
                         {selectedTask.status === "검토중" && (
                           <>
-                            <Button size="sm" className="bg-emerald-600 text-white hover:bg-emerald-700" onClick={() => handleApprove(selectedTask.dbId)}>
+                            <Button size="sm" variant="default" onClick={() => handleApprove(selectedTask.dbId)}>
                               <CheckCircle2 className="mr-1 h-3.5 w-3.5" /> 내부 승인
                             </Button>
                             <Button size="sm" variant="destructive" onClick={() => handleOpenRejectModal(selectedTask.dbId)}>
@@ -935,7 +884,7 @@ export default function DesignTaskManagementPage() {
                           </>
                         )}
                         {selectedTask.status === "승인완료" && (
-                          <Button size="sm" className="bg-linear-to-r from-indigo-500 to-purple-600 text-white shadow-md hover:shadow-lg" onClick={() => handleOpenProjectModal(selectedTask.dbId)}>
+                          <Button size="sm" variant="default" onClick={() => handleOpenProjectModal(selectedTask.dbId)}>
                             <Rocket className="mr-1 h-3.5 w-3.5" /> 프로젝트 생성
                           </Button>
                         )}
@@ -948,14 +897,14 @@ export default function DesignTaskManagementPage() {
                     </div>
 
                     {/* 접수 정보 */}
-                    <div className="rounded-lg bg-muted/50 p-4">
-                      <h3 className="mb-3 border-b-2 border-border pb-2 text-sm font-semibold text-foreground">접수 정보</h3>
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">접수 정보</h3>
                       <div className="text-xs">
                         <table className="w-full border-collapse">
                           <tbody>
                             <tr>
                               <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">접수번호</td>
-                              <td className={cn("border border-muted px-2 py-1.5 font-semibold", selectedTask.sourceType === "dr" ? "text-blue-600" : "text-amber-600")}>
+                              <td className={cn("border border-muted px-2 py-1.5 font-semibold", selectedTask.sourceType === "dr" ? "text-primary" : "text-secondary-foreground")}>
                                 {selectedTask.id}
                               </td>
                               <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">구분</td>
@@ -1022,7 +971,7 @@ export default function DesignTaskManagementPage() {
                                     {selectedTask.impact ? (
                                       <div className="flex flex-wrap gap-1">
                                         {selectedTask.impact.map((i) => (
-                                          <Badge key={i} variant="outline" className="bg-blue-50 text-[10px] text-blue-700 dark:bg-blue-950/30 dark:text-blue-300">{i}</Badge>
+                                          <Badge key={i} variant="outline" className="bg-primary/5 text-[10px] text-primary">{i}</Badge>
                                         ))}
                                       </div>
                                     ) : "-"}
@@ -1047,8 +996,8 @@ export default function DesignTaskManagementPage() {
                     </div>
 
                     {/* 요구사양 / 변경사유 */}
-                    <div className="rounded-lg bg-muted/50 p-4">
-                      <h3 className="mb-3 border-b-2 border-border pb-2 text-sm font-semibold text-foreground">
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">
                         {selectedTask.sourceType === "dr" ? "요구사양" : "변경 사유"}
                       </h3>
                       <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed text-foreground">
@@ -1057,13 +1006,13 @@ export default function DesignTaskManagementPage() {
                     </div>
 
                     {/* 검토 메모 */}
-                    <div className="rounded-lg border border-amber-200 bg-amber-50/50 p-4 dark:border-amber-800 dark:bg-amber-950/20">
-                      <h3 className="mb-2 text-sm font-semibold text-amber-800 dark:text-amber-400">검토 의견 / 메모</h3>
+                    <div className="rounded-lg border border-primary/20 bg-primary/5 p-3.5">
+                      <h3 className="mb-2 text-sm font-semibold text-foreground">검토 의견 / 메모</h3>
                       <Textarea
                         value={reviewMemoText}
                         onChange={(e) => setReviewMemoText(e.target.value)}
-                        placeholder="검토 의견을 기록하세요..."
-                        className="min-h-[60px] border-amber-200 text-xs focus-visible:ring-amber-400 dark:border-amber-800"
+                        placeholder="검토 의견을 기록해주세요..."
+                        className="min-h-[60px] text-xs"
                       />
                       <div className="mt-2 text-right">
                         <Button size="sm" onClick={handleSaveReviewMemo}>
@@ -1073,16 +1022,16 @@ export default function DesignTaskManagementPage() {
                     </div>
 
                     {/* 처리 이력 */}
-                    <div className="rounded-lg bg-muted/50 p-4">
-                      <h3 className="mb-3 border-b-2 border-border pb-2 text-sm font-semibold text-foreground">처리 이력</h3>
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">처리 이력</h3>
                       <div className="relative pl-6">
                         <div className="absolute bottom-0 left-[7px] top-0 w-0.5 bg-border" />
                         {selectedTask.history.map((h, idx) => {
                           const isLast = idx === selectedTask.history.length - 1;
-                          let dotColor = "bg-emerald-500 ring-emerald-500";
+                          let dotColor = "bg-primary ring-primary";
                           if (isLast) {
-                            if (h.step === "반려") dotColor = "bg-rose-500 ring-rose-500";
-                            else if (h.step !== "프로젝트") dotColor = "bg-amber-500 ring-amber-500 animate-pulse";
+                            if (h.step === "반려") dotColor = "bg-destructive ring-destructive";
+                            else if (h.step !== "프로젝트") dotColor = "bg-primary ring-primary animate-pulse";
                           }
                           return (
                             <div key={idx} className={cn("relative pb-5", isLast && "pb-0")}>
@@ -1110,23 +1059,23 @@ export default function DesignTaskManagementPage() {
 
       {/* 설계 담당자 선택 모달 */}
       <Dialog open={designerModalOpen} onOpenChange={setDesignerModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">설계 담당자 배정</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">검토를 진행할 설계 담당자를 선택하세요.</DialogDescription>
+            <DialogTitle>설계 담당자 배정</DialogTitle>
+            <DialogDescription>검토를 진행할 설계 담당자를 선택해주세요.</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3 sm:space-y-4">
+          <div className="space-y-4">
             <div>
-              <Label className="text-xs sm:text-sm">
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                 설계 담당자 <span className="text-destructive">*</span>
-              </Label>
+              </span>
               <Popover open={designerComboOpen} onOpenChange={setDesignerComboOpen}>
                 <PopoverTrigger asChild>
                   <Button
                     variant="outline"
                     role="combobox"
                     aria-expanded={designerComboOpen}
-                    className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                    className="mt-1 h-9 w-full justify-between text-sm"
                   >
                     {designerModalValue
                       ? (() => {
@@ -1139,9 +1088,9 @@ export default function DesignTaskManagementPage() {
                 </PopoverTrigger>
                 <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
                   <Command>
-                    <CommandInput placeholder="이름, 부서로 검색..." className="text-xs sm:text-sm" />
+                    <CommandInput placeholder="이름, 부서로 검색..." />
                     <CommandList>
-                      <CommandEmpty className="py-3 text-center text-xs sm:text-sm">사원을 찾을 수 없습니다.</CommandEmpty>
+                      <CommandEmpty className="py-3 text-center text-sm">사원을 찾을 수 없어요.</CommandEmpty>
                       <CommandGroup>
                         {employees.map((emp) => (
                           <CommandItem
@@ -1151,7 +1100,6 @@ export default function DesignTaskManagementPage() {
                               setDesignerModalValue(emp.userId);
                               setDesignerComboOpen(false);
                             }}
-                            className="text-xs sm:text-sm"
                           >
                             <Check className={cn("mr-2 h-4 w-4", designerModalValue === emp.userId ? "opacity-100" : "opacity-0")} />
                             <UserCircle className="mr-2 h-4 w-4 text-muted-foreground" />
@@ -1168,177 +1116,173 @@ export default function DesignTaskManagementPage() {
               </Popover>
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setDesignerModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button onClick={handleConfirmDesigner} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              검토 착수
-            </Button>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDesignerModalOpen(false)}>취소</Button>
+            <Button onClick={handleConfirmDesigner}>검토 착수</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {/* 반려 사유 모달 */}
       <Dialog open={rejectModalOpen} onOpenChange={setRejectModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">반려 처리</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">반려 사유를 상세히 기술하세요.</DialogDescription>
+            <DialogTitle>반려 처리</DialogTitle>
+            <DialogDescription>반려 사유를 상세히 기술해주세요.</DialogDescription>
           </DialogHeader>
           <div className="space-y-3">
             <div>
-              <Label className="text-xs sm:text-sm">
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                 반려 사유 <span className="text-destructive">*</span>
-              </Label>
+              </span>
               <Textarea
                 value={rejectReason}
                 onChange={(e) => setRejectReason(e.target.value)}
-                placeholder="반려 사유를 상세히 기술하세요"
-                className="mt-1 min-h-[120px] text-xs sm:text-sm"
+                placeholder="반려 사유를 상세히 기술해주세요"
+                className="mt-1 min-h-[120px] text-sm"
               />
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setRejectModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button variant="destructive" onClick={handleConfirmReject} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              반려 확인
-            </Button>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRejectModalOpen(false)}>취소</Button>
+            <Button variant="destructive" onClick={handleConfirmReject}>반려 확인</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {/* 프로젝트 생성 모달 */}
       <Dialog open={projectModalOpen} onOpenChange={setProjectModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[700px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">설계 프로젝트 생성</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">프로젝트 기본 정보를 입력하세요.</DialogDescription>
+            <DialogTitle>설계 프로젝트 생성</DialogTitle>
+            <DialogDescription>프로젝트 기본 정보를 입력해주세요.</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3 sm:space-y-4">
-            <div className="rounded-lg bg-muted/50 p-4">
-              <h4 className="mb-3 border-b border-border pb-2 text-sm font-semibold">프로젝트 기본 정보</h4>
-              <div className="space-y-3">
+        <div className="space-y-4">
+          <div className="rounded-lg bg-muted/50 p-4">
+            <h4 className="mb-3 border-b border-border pb-2 text-sm font-semibold">프로젝트 기본 정보</h4>
+            <div className="space-y-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 번호</span>
+                <Input value={projectForm.projNo} readOnly className="mt-1 h-9 bg-muted text-sm" />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                  프로젝트명 <span className="text-destructive">*</span>
+                </span>
+                <Input
+                  value={projectForm.projName}
+                  onChange={(e) => setProjectForm((p) => ({ ...p, projName: e.target.value }))}
+                  placeholder="프로젝트명 입력"
+                  className="mt-1 h-9 text-sm"
+                />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">원 접수번호</span>
+                <Input value={projectForm.projSourceNo} readOnly className="mt-1 h-9 bg-muted text-sm" />
+              </div>
+              <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <Label className="text-xs sm:text-sm">프로젝트 번호</Label>
-                  <Input value={projectForm.projNo} readOnly className="mt-1 h-8 bg-muted text-xs sm:h-10 sm:text-sm" />
-                </div>
-                <div>
-                  <Label className="text-xs sm:text-sm">
-                    프로젝트명 <span className="text-destructive">*</span>
-                  </Label>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    시작일 <span className="text-destructive">*</span>
+                  </span>
                   <Input
-                    value={projectForm.projName}
-                    onChange={(e) => setProjectForm((p) => ({ ...p, projName: e.target.value }))}
-                    placeholder="프로젝트명 입력"
-                    className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                    type="date"
+                    value={projectForm.projStartDate}
+                    onChange={(e) => setProjectForm((p) => ({ ...p, projStartDate: e.target.value }))}
+                    className="mt-1 h-9 text-sm"
                   />
                 </div>
                 <div>
-                  <Label className="text-xs sm:text-sm">원 접수번호</Label>
-                  <Input value={projectForm.projSourceNo} readOnly className="mt-1 h-8 bg-muted text-xs sm:h-10 sm:text-sm" />
-                </div>
-                <div className="grid grid-cols-2 gap-3">
-                  <div>
-                    <Label className="text-xs sm:text-sm">
-                      시작일 <span className="text-destructive">*</span>
-                    </Label>
-                    <Input
-                      type="date"
-                      value={projectForm.projStartDate}
-                      onChange={(e) => setProjectForm((p) => ({ ...p, projStartDate: e.target.value }))}
-                      className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
-                    />
-                  </div>
-                  <div>
-                    <Label className="text-xs sm:text-sm">
-                      종료예정일 <span className="text-destructive">*</span>
-                    </Label>
-                    <Input
-                      type="date"
-                      value={projectForm.projEndDate}
-                      onChange={(e) => setProjectForm((p) => ({ ...p, projEndDate: e.target.value }))}
-                      className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
-                    />
-                  </div>
-                </div>
-                <div className="grid grid-cols-2 gap-3">
-                  <div>
-                    <Label className="text-xs sm:text-sm">
-                      PM <span className="text-destructive">*</span>
-                    </Label>
-                    <Popover open={pmComboOpen} onOpenChange={setPmComboOpen}>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant="outline"
-                          role="combobox"
-                          aria-expanded={pmComboOpen}
-                          className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
-                        >
-                          {projectForm.projPM
-                            ? employees.find((e) => e.userId === projectForm.projPM)?.userName || projectForm.projPM
-                            : "PM 선택"}
-                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
-                        <Command>
-                          <CommandInput placeholder="사원 검색..." className="text-xs sm:text-sm" />
-                          <CommandList>
-                            <CommandEmpty className="text-xs sm:text-sm py-3 text-center">사원을 찾을 수 없습니다.</CommandEmpty>
-                            <CommandGroup>
-                              {employees.map((emp) => (
-                                <CommandItem
-                                  key={emp.userId}
-                                  value={`${emp.userName} ${emp.deptName} ${emp.userId}`}
-                                  onSelect={() => {
-                                    setProjectForm((p) => ({ ...p, projPM: emp.userId }));
-                                    setPmComboOpen(false);
-                                  }}
-                                  className="text-xs sm:text-sm"
-                                >
-                                  <Check className={cn("mr-2 h-4 w-4", projectForm.projPM === emp.userId ? "opacity-100" : "opacity-0")} />
-                                  <div className="flex flex-col">
-                                    <span className="font-medium">{emp.userName}</span>
-                                    <span className="text-[10px] text-muted-foreground">{emp.deptName || "부서 미지정"}</span>
-                                  </div>
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                  <div>
-                    <Label className="text-xs sm:text-sm">고객명</Label>
-                    <Input value={projectForm.projCustomer} readOnly className="mt-1 h-8 bg-muted text-xs sm:h-10 sm:text-sm" />
-                  </div>
-                </div>
-                <div>
-                  <Label className="text-xs sm:text-sm">프로젝트 설명</Label>
-                  <Textarea
-                    value={projectForm.projDesc}
-                    onChange={(e) => setProjectForm((p) => ({ ...p, projDesc: e.target.value }))}
-                    placeholder="프로젝트 개요 및 목표를 기술하세요"
-                    className="mt-1 min-h-[80px] text-xs sm:text-sm"
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    종료예정일 <span className="text-destructive">*</span>
+                  </span>
+                  <Input
+                    type="date"
+                    value={projectForm.projEndDate}
+                    onChange={(e) => setProjectForm((p) => ({ ...p, projEndDate: e.target.value }))}
+                    className="mt-1 h-9 text-sm"
                   />
                 </div>
               </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    PM <span className="text-destructive">*</span>
+                  </span>
+                  <Popover open={pmComboOpen} onOpenChange={setPmComboOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={pmComboOpen}
+                        className="mt-1 h-9 w-full justify-between text-sm"
+                      >
+                        {projectForm.projPM
+                          ? employees.find((e) => e.userId === projectForm.projPM)?.userName || projectForm.projPM
+                          : "PM 선택"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                      <Command>
+                        <CommandInput placeholder="사원 검색..." />
+                        <CommandList>
+                          <CommandEmpty className="py-3 text-center text-sm">사원을 찾을 수 없어요.</CommandEmpty>
+                          <CommandGroup>
+                            {employees.map((emp) => (
+                              <CommandItem
+                                key={emp.userId}
+                                value={`${emp.userName} ${emp.deptName} ${emp.userId}`}
+                                onSelect={() => {
+                                  setProjectForm((p) => ({ ...p, projPM: emp.userId }));
+                                  setPmComboOpen(false);
+                                }}
+                              >
+                                <Check className={cn("mr-2 h-4 w-4", projectForm.projPM === emp.userId ? "opacity-100" : "opacity-0")} />
+                                <div className="flex flex-col">
+                                  <span className="font-medium">{emp.userName}</span>
+                                  <span className="text-[10px] text-muted-foreground">{emp.deptName || "부서 미지정"}</span>
+                                </div>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">고객명</span>
+                  <Input value={projectForm.projCustomer} readOnly className="mt-1 h-9 bg-muted text-sm" />
+                </div>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 설명</span>
+                <Textarea
+                  value={projectForm.projDesc}
+                  onChange={(e) => setProjectForm((p) => ({ ...p, projDesc: e.target.value }))}
+                  placeholder="프로젝트 개요 및 목표를 기술해주세요"
+                  className="mt-1 min-h-[80px] text-sm"
+                />
+              </div>
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setProjectModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button onClick={handleCreateProject} className="h-8 flex-1 bg-linear-to-r from-indigo-500 to-purple-600 text-xs text-white sm:h-10 sm:flex-none sm:text-sm">
-              프로젝트 생성
-            </Button>
+        </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setProjectModalOpen(false)}>취소</Button>
+            <Button onClick={handleCreateProject}>프로젝트 생성</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_10/equipment/info/page.tsx b/frontend/app/(main)/COMPANY_10/equipment/info/page.tsx
index 6c843483..cd53e9b1 100644
--- a/frontend/app/(main)/COMPANY_10/equipment/info/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/equipment/info/page.tsx
@@ -8,7 +8,7 @@
  * 점검항목 복사 기능 포함
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -20,56 +20,34 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import {
   Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
-  Wrench, ClipboardCheck, Package, Copy, Info, Settings2,
+  Inbox, ClipboardCheck, Package, Copy, Info, Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
-import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
 import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
 import { ImageUpload } from "@/components/common/ImageUpload";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const EQUIP_TABLE = "equipment_mng";
 const INSPECTION_TABLE = "equipment_inspection_item";
 const CONSUMABLE_TABLE = "equipment_consumable";
 
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "equipment_code", label: "설비코드", width: "w-[110px]" },
-  { key: "equipment_name", label: "설비명", minWidth: "min-w-[130px]" },
-  { key: "equipment_type", label: "설비유형", width: "w-[90px]" },
-  { key: "manufacturer", label: "제조사", width: "w-[100px]" },
-  { key: "installation_location", label: "설치장소", width: "w-[100px]" },
-  { key: "operation_status", label: "가동상태", width: "w-[80px]" },
+const GRID_COLUMNS_CONFIG = [
+  { key: "equipment_code", label: "설비코드" },
+  { key: "equipment_name", label: "설비명" },
+  { key: "equipment_type", label: "설비유형" },
+  { key: "manufacturer", label: "제조사" },
+  { key: "installation_location", label: "설치장소" },
+  { key: "operation_status", label: "가동상태" },
 ];
-
-const INSPECTION_COLUMNS: DataGridColumn[] = [
-  { key: "inspection_item", label: "점검항목", minWidth: "min-w-[120px]", editable: true },
-  { key: "inspection_cycle", label: "점검주기", width: "w-[80px]" },
-  { key: "inspection_method", label: "점검방법", width: "w-[80px]" },
-  { key: "lower_limit", label: "하한치", width: "w-[70px]", editable: true },
-  { key: "upper_limit", label: "상한치", width: "w-[70px]", editable: true },
-  { key: "unit", label: "단위", width: "w-[60px]", editable: true },
-  { key: "inspection_content", label: "점검내용", minWidth: "min-w-[150px]", editable: true },
-];
-
-const CONSUMABLE_COLUMNS: DataGridColumn[] = [
-  { key: "image_path", label: "이미지", width: "w-[50px]", renderType: "image", sortable: false, filterable: false },
-  { key: "consumable_name", label: "소모품명", minWidth: "min-w-[120px]", editable: true },
-  { key: "replacement_cycle", label: "교체주기", width: "w-[90px]", editable: true },
-  { key: "unit", label: "단위", width: "w-[60px]", editable: true },
-  { key: "specification", label: "규격", width: "w-[100px]", editable: true },
-  { key: "manufacturer", label: "제조사", width: "w-[100px]", editable: true },
-];
-
 export default function EquipmentInfoPage() {
   const { user } = useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
@@ -79,8 +57,6 @@ export default function EquipmentInfoPage() {
   const [equipLoading, setEquipLoading] = useState(false);
   const [equipCount, setEquipCount] = useState(0);
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
   const [selectedEquipId, setSelectedEquipId] = useState<string | null>(null);
 
   // 우측 탭
@@ -93,7 +69,7 @@ export default function EquipmentInfoPage() {
   // 카테고리
   const [catOptions, setCatOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
-  // 모달
+  // 설비 등록/수정 모달
   const [equipModalOpen, setEquipModalOpen] = useState(false);
   const [equipEditMode, setEquipEditMode] = useState(false);
   const [equipForm, setEquipForm] = useState<Record<string, any>>({});
@@ -103,13 +79,17 @@ export default function EquipmentInfoPage() {
   const [infoForm, setInfoForm] = useState<Record<string, any>>({});
   const [infoSaving, setInfoSaving] = useState(false);
 
+  // 점검항목 추가/수정 모달
   const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
   const [inspectionForm, setInspectionForm] = useState<Record<string, any>>({});
   const [inspectionContinuous, setInspectionContinuous] = useState(false);
+  const [inspectionEditMode, setInspectionEditMode] = useState(false);
 
+  // 소모품 추가/수정 모달
   const [consumableModalOpen, setConsumableModalOpen] = useState(false);
   const [consumableForm, setConsumableForm] = useState<Record<string, any>>({});
   const [consumableContinuous, setConsumableContinuous] = useState(false);
+  const [consumableEditMode, setConsumableEditMode] = useState(false);
   const [consumableItemOptions, setConsumableItemOptions] = useState<any[]>([]);
 
   // 점검항목 복사
@@ -124,14 +104,8 @@ export default function EquipmentInfoPage() {
   const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
   const [excelDetecting, setExcelDetecting] = useState(false);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
-
-  useEffect(() => {
-    const saved = loadTableSettings("equipment-info");
-    if (saved) applyTableSettings(saved);
-  }, []);
+  // 테이블 설정
+  const ts = useTableSettings("c16-equipment-info", EQUIP_TABLE, GRID_COLUMNS_CONFIG);
 
   // 카테고리 로드
   useEffect(() => {
@@ -145,14 +119,12 @@ export default function EquipmentInfoPage() {
         }
         return result;
       };
-      // equipment_mng 카테고리
       for (const col of ["equipment_type", "operation_status"]) {
         try {
           const res = await apiClient.get(`/table-categories/${EQUIP_TABLE}/${col}/values`);
           if (res.data?.success) optMap[col] = flatten(res.data.data || []);
         } catch { /* skip */ }
       }
-      // inspection 카테고리
       for (const col of ["inspection_cycle", "inspection_method"]) {
         try {
           const res = await apiClient.get(`/table-categories/${INSPECTION_TABLE}/${col}/values`);
@@ -169,6 +141,22 @@ export default function EquipmentInfoPage() {
     return catOptions[col]?.find((o) => o.code === code)?.label || code;
   };
 
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      equipment_code: { width: "w-[110px]" },
+      equipment_name: { minWidth: "min-w-[130px]", truncate: true, render: (v) => v || "-" },
+      equipment_type: { width: "w-[90px]", render: (v) => v || "-" },
+      manufacturer: { width: "w-[100px]", render: (v) => v || "-" },
+      installation_location: { width: "w-[100px]", render: (v) => v || "-" },
+      operation_status: { width: "w-[80px]", render: (v) => v || "-" },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
   // 설비 조회
   const fetchEquipments = useCallback(async () => {
     setEquipLoading(true);
@@ -215,7 +203,7 @@ export default function EquipmentInfoPage() {
   // 우측: 점검항목 조회
   useEffect(() => {
     if (!selectedEquip?.equipment_code) { setInspections([]); return; }
-    const fetch = async () => {
+    const fetchData = async () => {
       setInspectionLoading(true);
       try {
         const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
@@ -223,21 +211,16 @@ export default function EquipmentInfoPage() {
           dataFilter: { enabled: true, filters: [{ columnName: "equipment_code", operator: "equals", value: selectedEquip.equipment_code }] },
           autoFilter: true,
         });
-        const raw = res.data?.data?.data || res.data?.data?.rows || [];
-        setInspections(raw.map((r: any) => ({
-          ...r,
-          inspection_cycle: resolve("inspection_cycle", r.inspection_cycle),
-          inspection_method: resolve("inspection_method", r.inspection_method),
-        })));
+        setInspections(res.data?.data?.data || res.data?.data?.rows || []);
       } catch { setInspections([]); } finally { setInspectionLoading(false); }
     };
-    fetch();
-  }, [selectedEquip?.equipment_code, catOptions]);
+    fetchData();
+  }, [selectedEquip?.equipment_code]);
 
   // 우측: 소모품 조회
   useEffect(() => {
     if (!selectedEquip?.equipment_code) { setConsumables([]); return; }
-    const fetch = async () => {
+    const fetchData = async () => {
       setConsumableLoading(true);
       try {
         const res = await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/data`, {
@@ -248,7 +231,7 @@ export default function EquipmentInfoPage() {
         setConsumables(res.data?.data?.data || res.data?.data?.rows || []);
       } catch { setConsumables([]); } finally { setConsumableLoading(false); }
     };
-    fetch();
+    fetchData();
   }, [selectedEquip?.equipment_code]);
 
   // 새로고침 헬퍼
@@ -271,7 +254,7 @@ export default function EquipmentInfoPage() {
         await apiClient.put(`/table-management/tables/${EQUIP_TABLE}/edit`, { originalData: { id }, updatedData: fields });
         toast.success("수정되었습니다.");
       } else {
-        await apiClient.post(`/table-management/tables/${EQUIP_TABLE}/add`, fields);
+        await apiClient.post(`/table-management/tables/${EQUIP_TABLE}/add`, { id: crypto.randomUUID(), ...fields });
         toast.success("등록되었습니다.");
       }
       setEquipModalOpen(false); fetchEquipments();
@@ -291,23 +274,50 @@ export default function EquipmentInfoPage() {
   // 점검항목 추가
   const handleInspectionSave = async () => {
     if (!inspectionForm.inspection_item) { toast.error("점검항목명은 필수입니다."); return; }
+    if (!inspectionForm.inspection_cycle) { toast.error("점검주기는 필수입니다."); return; }
+    if (!inspectionForm.inspection_method) { toast.error("점검방법은 필수입니다."); return; }
+    const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+    const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+    if (isNumeric && !inspectionForm.unit) { toast.error("측정단위가 필수입니다."); return; }
+    // 기준값/오차범위 → 하한치/상한치 자동 계산
+    const saveData = { ...inspectionForm };
+    if (isNumeric && saveData.standard_value) {
+      const std = Number(saveData.standard_value) || 0;
+      const tol = Number(saveData.tolerance) || 0;
+      saveData.lower_limit = String(std - tol);
+      saveData.upper_limit = String(std + tol);
+    }
+    if (!isNumeric) {
+      saveData.unit = "";
+      saveData.standard_value = "";
+      saveData.tolerance = "";
+      saveData.lower_limit = "";
+      saveData.upper_limit = "";
+    }
     setSaving(true);
     try {
-      await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
-        ...inspectionForm, equipment_code: selectedEquip?.equipment_code,
-      });
-      toast.success("추가되었습니다.");
-      if (inspectionContinuous) {
-        setInspectionForm({});
-      } else {
+      if (inspectionEditMode) {
+        await apiClient.put(`/table-management/tables/${INSPECTION_TABLE}/edit`, {
+          originalData: { id: saveData.id }, updatedData: { ...saveData, equipment_code: selectedEquip?.equipment_code },
+        });
+        toast.success("수정되었습니다.");
         setInspectionModalOpen(false);
+      } else {
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          id: crypto.randomUUID(), ...saveData, equipment_code: selectedEquip?.equipment_code,
+        });
+        toast.success("추가되었습니다.");
+        if (inspectionContinuous) {
+          setInspectionForm({});
+        } else {
+          setInspectionModalOpen(false);
+        }
       }
       refreshRight();
     } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
   };
 
-  // 소모품 추가
-  // 소모품 품목 로드 (item_info에서 type 또는 division 라벨이 "소모품"인 것)
+  // 소모품 품목 로드
   const loadConsumableItems = async () => {
     try {
       const flatten = (vals: any[]): any[] => {
@@ -315,22 +325,16 @@ export default function EquipmentInfoPage() {
         for (const v of vals) { r.push(v); if (v.children?.length) r.push(...flatten(v.children)); }
         return r;
       };
-
-      // type과 division 카테고리 모두에서 "소모품" 코드 찾기
       const [typeRes, divRes] = await Promise.all([
         apiClient.get(`/table-categories/item_info/type/values`),
         apiClient.get(`/table-categories/item_info/division/values`),
       ]);
       const consumableType = flatten(typeRes.data?.data || []).find((t: any) => t.valueLabel === "소모품");
       const consumableDiv = flatten(divRes.data?.data || []).find((t: any) => t.valueLabel === "소모품");
-
       if (!consumableType && !consumableDiv) { setConsumableItemOptions([]); return; }
-
-      // 두 필터 결과를 합산 (중복 제거)
       const filters: any[] = [];
       if (consumableType) filters.push({ columnName: "type", operator: "equals", value: consumableType.valueCode });
       if (consumableDiv) filters.push({ columnName: "division", operator: "equals", value: consumableDiv.valueCode });
-
       const results = await Promise.all(filters.map((f) =>
         apiClient.post(`/table-management/tables/item_info/data`, {
           page: 1, size: 500,
@@ -338,7 +342,6 @@ export default function EquipmentInfoPage() {
           autoFilter: true,
         })
       ));
-
       const allItems = new Map<string, any>();
       for (const res of results) {
         const rows = res.data?.data?.data || res.data?.data?.rows || [];
@@ -352,20 +355,28 @@ export default function EquipmentInfoPage() {
     if (!consumableForm.consumable_name) { toast.error("소모품명은 필수입니다."); return; }
     setSaving(true);
     try {
-      await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/add`, {
-        ...consumableForm, equipment_code: selectedEquip?.equipment_code,
-      });
-      toast.success("추가되었습니다.");
-      if (consumableContinuous) {
-        setConsumableForm({});
-      } else {
+      if (consumableEditMode) {
+        await apiClient.put(`/table-management/tables/${CONSUMABLE_TABLE}/edit`, {
+          originalData: { id: consumableForm.id }, updatedData: { ...consumableForm, equipment_code: selectedEquip?.equipment_code },
+        });
+        toast.success("수정되었습니다.");
         setConsumableModalOpen(false);
+      } else {
+        await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/add`, {
+          id: crypto.randomUUID(), ...consumableForm, equipment_code: selectedEquip?.equipment_code,
+        });
+        toast.success("추가되었습니다.");
+        if (consumableContinuous) {
+          setConsumableForm({});
+        } else {
+          setConsumableModalOpen(false);
+        }
       }
       refreshRight();
     } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
   };
 
-  // 점검항목 복사: 소스 설비 선택 시 점검항목 로드
+  // 점검항목 복사
   const loadCopyItems = async (equipCode: string) => {
     setCopySourceEquip(equipCode);
     setCopyChecked(new Set());
@@ -420,13 +431,22 @@ export default function EquipmentInfoPage() {
 
   return (
     <div className="flex h-full flex-col gap-3 p-3">
-      <DynamicSearchFilter tableName={EQUIP_TABLE} filterId="equipment-info" onFilterChange={setSearchFilters} dataCount={equipCount}
-        externalFilterConfig={filterConfig}
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>설비관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">설비정보</span>
+      </div>
+
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={EQUIP_TABLE}
+        filterId="c16-equipment-info"
+        onFilterChange={setSearchFilters}
+        dataCount={equipCount}
+        externalFilterConfig={ts.filterConfig}
         extraActions={
           <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
             <Button variant="outline" size="sm" className="h-9" disabled={excelDetecting}
               onClick={async () => {
                 setExcelDetecting(true);
@@ -445,24 +465,39 @@ export default function EquipmentInfoPage() {
         }
       />
 
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
         <ResizablePanelGroup direction="horizontal">
           {/* 좌측: 설비 목록 */}
           <ResizablePanel defaultSize={40} minSize={25}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Wrench className="w-4 h-4" /> 설비 목록 <Badge variant="secondary" className="font-normal">{equipCount}건</Badge>
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">설비 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{equipCount}건</span>
                 </div>
-                <div className="flex gap-1.5">
+                <div className="flex items-center gap-1.5">
                   <Button size="sm" onClick={openEquipRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
                   <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={openEquipEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
-                  <Button variant="destructive" size="sm" disabled={!selectedEquipId} onClick={handleEquipDelete}><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                  <div className="h-4 w-px bg-border" />
+                  <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={handleEquipDelete} className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                  <div className="h-4 w-px bg-border" />
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid gridId="equip-left" columns={LEFT_COLUMNS} data={equipments} loading={equipLoading}
-                selectedId={selectedEquipId} onSelect={setSelectedEquipId} onRowDoubleClick={() => openEquipEdit()}
-                emptyMessage="등록된 설비가 없습니다" />
+              <EDataTable
+                columns={mainTableColumns}
+                data={ts.groupData(equipments)}
+                loading={equipLoading}
+                emptyMessage="등록된 설비가 없어요"
+                selectedId={selectedEquipId}
+                onSelect={(id) => setSelectedEquipId(id)}
+                onRowDoubleClick={() => openEquipEdit()}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-equipment-info-main"
+              />
             </div>
           </ResizablePanel>
 
@@ -471,7 +506,7 @@ export default function EquipmentInfoPage() {
           {/* 우측: 탭 */}
           <ResizablePanel defaultSize={60} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-2 border-b bg-muted/10 shrink-0">
+              <div className="flex items-center justify-between p-2 border-b bg-muted/50 shrink-0">
                 <div className="flex items-center gap-1">
                   {([["info", "기본정보", Info], ["inspection", "점검항목", ClipboardCheck], ["consumable", "소모품", Package]] as const).map(([tab, label, Icon]) => (
                     <button key={tab} onClick={() => setRightTab(tab)}
@@ -487,7 +522,7 @@ export default function EquipmentInfoPage() {
                 <div className="flex gap-1.5">
                   {rightTab === "inspection" && (
                     <>
-                      <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setInspectionForm({}); setInspectionModalOpen(true); }}>
+                      <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setInspectionForm({}); setInspectionEditMode(false); setInspectionModalOpen(true); }}>
                         <Plus className="w-3.5 h-3.5 mr-1" /> 추가
                       </Button>
                       <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setCopySourceEquip(""); setCopyItems([]); setCopyChecked(new Set()); setCopyModalOpen(true); }}>
@@ -496,7 +531,7 @@ export default function EquipmentInfoPage() {
                     </>
                   )}
                   {rightTab === "consumable" && (
-                    <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setConsumableForm({}); loadConsumableItems(); setConsumableModalOpen(true); }}>
+                    <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setConsumableForm({}); setConsumableEditMode(false); loadConsumableItems(); setConsumableModalOpen(true); }}>
                       <Plus className="w-3.5 h-3.5 mr-1" /> 추가
                     </Button>
                   )}
@@ -504,7 +539,13 @@ export default function EquipmentInfoPage() {
               </div>
 
               {!selectedEquipId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">좌측에서 설비를 선택하세요</div>
+                <div className="flex-1 flex flex-col items-center justify-center gap-3 m-3 border-2 border-dashed rounded-lg text-center">
+                  <Inbox className="w-12 h-12 text-muted-foreground/40" />
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">설비를 선택해주세요</p>
+                    <p className="text-xs text-muted-foreground mt-1">좌측에서 설비를 선택하면 상세 정보가 표시돼요</p>
+                  </div>
+                </div>
               ) : rightTab === "info" ? (
                 <div className="p-4 overflow-auto">
                   <div className="flex justify-end mb-3">
@@ -539,7 +580,7 @@ export default function EquipmentInfoPage() {
                     </div>
                     <div className="space-y-1.5">
                       <Label className="text-sm">도입일자</Label>
-                      <FormDatePicker value={infoForm.introduction_date || ""} onChange={(v) => setInfoForm((p) => ({ ...p, introduction_date: v }))} placeholder="도입일자" />
+                      <Input type="date" value={infoForm.introduction_date || ""} onChange={(e) => setInfoForm((p) => ({ ...p, introduction_date: e.target.value }))} className="h-9" />
                     </div>
                     <div className="space-y-1.5">
                       <Label className="text-sm">가동상태</Label>
@@ -557,13 +598,92 @@ export default function EquipmentInfoPage() {
                   </div>
                 </div>
               ) : rightTab === "inspection" ? (
-                <DataGrid gridId="equip-inspection" columns={INSPECTION_COLUMNS} data={inspections} loading={inspectionLoading}
-                  showRowNumber={false} tableName={INSPECTION_TABLE} emptyMessage="점검항목이 없습니다"
-                  onCellEdit={() => refreshRight()} />
+                <div className="flex-1 overflow-auto">
+                  {inspectionLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : inspections.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <ClipboardCheck className="w-8 h-8 mb-2 opacity-40" />
+                      <p className="text-sm">점검항목이 없어요</p>
+                    </div>
+                  ) : (
+                    <Table noWrapper>
+                      <thead className="sticky top-0 z-10 bg-card">
+                        <TableRow>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검항목</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">하한치</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한치</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검내용</TableHead>
+                        </TableRow>
+                      </thead>
+                      <TableBody>
+                        {inspections.map((item) => (
+                          <TableRow key={item.id} className="cursor-pointer hover:bg-primary/5" onDoubleClick={() => {
+                            const std = item.standard_value || "";
+                            const tol = item.tolerance || "";
+                            setInspectionForm({ ...item, standard_value: std, tolerance: tol });
+                            setInspectionEditMode(true);
+                            setInspectionModalOpen(true);
+                          }}>
+                            <TableCell className="text-sm">{item.inspection_item || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
+                            <TableCell className="text-[13px]">{resolve("inspection_method", item.inspection_method)}</TableCell>
+                            <TableCell className="text-[13px]">{item.lower_limit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.upper_limit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.inspection_content || "-"}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
               ) : (
-                <DataGrid gridId="equip-consumable" columns={CONSUMABLE_COLUMNS} data={consumables} loading={consumableLoading}
-                  showRowNumber={false} tableName={CONSUMABLE_TABLE} emptyMessage="소모품이 없습니다"
-                  onCellEdit={() => refreshRight()} />
+                <div className="flex-1 overflow-auto">
+                  {consumableLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : consumables.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Package className="w-8 h-8 mb-2 opacity-40" />
+                      <p className="text-sm">소모품이 없어요</p>
+                    </div>
+                  ) : (
+                    <Table noWrapper>
+                      <thead className="sticky top-0 z-10 bg-card">
+                        <TableRow>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">소모품명</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">교체주기</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">제조사</TableHead>
+                        </TableRow>
+                      </thead>
+                      <TableBody>
+                        {consumables.map((item) => (
+                          <TableRow key={item.id} className="cursor-pointer hover:bg-primary/5" onDoubleClick={() => {
+                            setConsumableForm({ ...item });
+                            setConsumableEditMode(true);
+                            loadConsumableItems();
+                            setConsumableModalOpen(true);
+                          }}>
+                            <TableCell className="text-sm">{item.consumable_name || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.replacement_cycle || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.specification || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.manufacturer || "-"}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
               )}
             </div>
           </ResizablePanel>
@@ -571,57 +691,103 @@ export default function EquipmentInfoPage() {
       </div>
 
       {/* 설비 등록/수정 모달 */}
-      <FullscreenDialog open={equipModalOpen} onOpenChange={setEquipModalOpen}
-        title={equipEditMode ? "설비 수정" : "설비 등록"} description={equipEditMode ? "설비 정보를 수정합니다." : "새로운 설비를 등록합니다."}
-        defaultMaxWidth="max-w-2xl"
-        footer={<><Button variant="outline" onClick={() => setEquipModalOpen(false)}>취소</Button>
-          <Button onClick={handleEquipSave} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button></>}>
-        <div className="grid grid-cols-2 gap-4 py-4">
-          <div className="space-y-1.5"><Label className="text-sm">설비코드</Label>
-            <Input value={equipForm.equipment_code || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_code: e.target.value }))} placeholder="설비코드" className="h-9" disabled={equipEditMode} /></div>
-          <div className="space-y-1.5"><Label className="text-sm">설비명 <span className="text-destructive">*</span></Label>
-            <Input value={equipForm.equipment_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_name: e.target.value }))} placeholder="설비명" className="h-9" /></div>
-          <div className="space-y-1.5"><Label className="text-sm">설비유형</Label>
-            {catSelect("equipment_type", equipForm.equipment_type, (v) => setEquipForm((p) => ({ ...p, equipment_type: v })), "설비유형")}</div>
-          <div className="space-y-1.5"><Label className="text-sm">가동상태</Label>
-            {catSelect("operation_status", equipForm.operation_status, (v) => setEquipForm((p) => ({ ...p, operation_status: v })), "가동상태")}</div>
-          <div className="space-y-1.5"><Label className="text-sm">설치장소</Label>
-            <Input value={equipForm.installation_location || ""} onChange={(e) => setEquipForm((p) => ({ ...p, installation_location: e.target.value }))} placeholder="설치장소" className="h-9" /></div>
-          <div className="space-y-1.5"><Label className="text-sm">제조사</Label>
-            <Input value={equipForm.manufacturer || ""} onChange={(e) => setEquipForm((p) => ({ ...p, manufacturer: e.target.value }))} placeholder="제조사" className="h-9" /></div>
-          <div className="space-y-1.5"><Label className="text-sm">모델명</Label>
-            <Input value={equipForm.model_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, model_name: e.target.value }))} placeholder="모델명" className="h-9" /></div>
-          <div className="space-y-1.5"><Label className="text-sm">도입일자</Label>
-            <FormDatePicker value={equipForm.introduction_date || ""} onChange={(v) => setEquipForm((p) => ({ ...p, introduction_date: v }))} placeholder="도입일자" /></div>
-          <div className="space-y-1.5 col-span-2"><Label className="text-sm">비고</Label>
-            <Input value={equipForm.remarks || ""} onChange={(e) => setEquipForm((p) => ({ ...p, remarks: e.target.value }))} placeholder="비고" className="h-9" /></div>
-          <div className="space-y-1.5 col-span-2"><Label className="text-sm">이미지</Label>
-            <ImageUpload value={equipForm.image_path} onChange={(v) => setEquipForm((p) => ({ ...p, image_path: v }))}
-              tableName={EQUIP_TABLE} recordId={equipForm.id} columnName="image_path" /></div>
-        </div>
-      </FullscreenDialog>
+      <Dialog open={equipModalOpen} onOpenChange={setEquipModalOpen}>
+        <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{equipEditMode ? "설비 수정" : "설비 등록"}</DialogTitle>
+            <DialogDescription>{equipEditMode ? "설비 정보를 수정합니다." : "새로운 설비를 등록합니다."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+            <div className="grid grid-cols-2 gap-4 py-4">
+              <div className="space-y-1.5"><Label className="text-sm">설비코드</Label>
+                <Input value={equipForm.equipment_code || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_code: e.target.value }))} placeholder="설비코드" className="h-9" disabled={equipEditMode} /></div>
+              <div className="space-y-1.5"><Label className="text-sm">설비명 <span className="text-destructive">*</span></Label>
+                <Input value={equipForm.equipment_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_name: e.target.value }))} placeholder="설비명" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">설비유형</Label>
+                {catSelect("equipment_type", equipForm.equipment_type, (v) => setEquipForm((p) => ({ ...p, equipment_type: v })), "설비유형")}</div>
+              <div className="space-y-1.5"><Label className="text-sm">가동상태</Label>
+                {catSelect("operation_status", equipForm.operation_status, (v) => setEquipForm((p) => ({ ...p, operation_status: v })), "가동상태")}</div>
+              <div className="space-y-1.5"><Label className="text-sm">설치장소</Label>
+                <Input value={equipForm.installation_location || ""} onChange={(e) => setEquipForm((p) => ({ ...p, installation_location: e.target.value }))} placeholder="설치장소" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">제조사</Label>
+                <Input value={equipForm.manufacturer || ""} onChange={(e) => setEquipForm((p) => ({ ...p, manufacturer: e.target.value }))} placeholder="제조사" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">모델명</Label>
+                <Input value={equipForm.model_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, model_name: e.target.value }))} placeholder="모델명" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">도입일자</Label>
+                <Input type="date" value={equipForm.introduction_date || ""} onChange={(e) => setEquipForm((p) => ({ ...p, introduction_date: e.target.value }))} className="h-9" /></div>
+              <div className="space-y-1.5 col-span-2"><Label className="text-sm">비고</Label>
+                <Input value={equipForm.remarks || ""} onChange={(e) => setEquipForm((p) => ({ ...p, remarks: e.target.value }))} placeholder="비고" className="h-9" /></div>
+              <div className="space-y-1.5 col-span-2"><Label className="text-sm">이미지</Label>
+                <ImageUpload value={equipForm.image_path} onChange={(v) => setEquipForm((p) => ({ ...p, image_path: v }))}
+                  tableName={EQUIP_TABLE} recordId={equipForm.id} columnName="image_path" /></div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEquipModalOpen(false)}>취소</Button>
+            <Button onClick={handleEquipSave} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 점검항목 추가 모달 */}
       <Dialog open={inspectionModalOpen} onOpenChange={setInspectionModalOpen}>
         <DialogContent className="max-w-lg">
-          <DialogHeader><DialogTitle>점검항목 추가</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 점검항목을 추가합니다.</DialogDescription></DialogHeader>
+          <DialogHeader><DialogTitle>{inspectionEditMode ? "점검항목 수정" : "점검항목 추가"}</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 점검항목을 {inspectionEditMode ? "수정" : "추가"}합니다.</DialogDescription></DialogHeader>
           <div className="space-y-4 py-4">
-            <div className="space-y-1.5"><Label className="text-sm">점검항목 <span className="text-destructive">*</span></Label>
-              <Input value={inspectionForm.inspection_item || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_item: e.target.value }))} placeholder="점검항목" className="h-9" /></div>
             <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-1.5"><Label className="text-sm">점검주기</Label>
+              <div className="space-y-1.5"><Label className="text-sm">점검항목명 <span className="text-destructive">*</span></Label>
+                <Input value={inspectionForm.inspection_item || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_item: e.target.value }))} placeholder="예: 온도점검, 진동점검" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">점검주기 <span className="text-destructive">*</span></Label>
                 {catSelect("inspection_cycle", inspectionForm.inspection_cycle, (v) => setInspectionForm((p) => ({ ...p, inspection_cycle: v })), "점검주기")}</div>
-              <div className="space-y-1.5"><Label className="text-sm">점검방법</Label>
-                {catSelect("inspection_method", inspectionForm.inspection_method, (v) => setInspectionForm((p) => ({ ...p, inspection_method: v })), "점검방법")}</div>
-              <div className="space-y-1.5"><Label className="text-sm">하한치</Label>
-                <Input value={inspectionForm.lower_limit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, lower_limit: e.target.value }))} placeholder="하한치" className="h-9" /></div>
-              <div className="space-y-1.5"><Label className="text-sm">상한치</Label>
-                <Input value={inspectionForm.upper_limit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, upper_limit: e.target.value }))} placeholder="상한치" className="h-9" /></div>
-              <div className="space-y-1.5"><Label className="text-sm">단위</Label>
-                <Input value={inspectionForm.unit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, unit: e.target.value }))} placeholder="단위" className="h-9" /></div>
             </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1.5"><Label className="text-sm">점검방법 <span className="text-destructive">*</span></Label>
+                {catSelect("inspection_method", inspectionForm.inspection_method, (v) => {
+                  const label = resolve("inspection_method", v);
+                  const isNum = ["숫자", "치수검사"].includes(label) || ["숫자", "치수검사"].includes(v);
+                  if (!isNum) {
+                    setInspectionForm((p) => ({ ...p, inspection_method: v, unit: "", standard_value: "", tolerance: "", lower_limit: "", upper_limit: "" }));
+                  } else {
+                    setInspectionForm((p) => ({ ...p, inspection_method: v }));
+                  }
+                }, "점검방법")}</div>
+              {(() => {
+                const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+                const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+                if (!isNumeric) return null;
+                return (
+                  <div className="space-y-1.5"><Label className="text-sm">측정 단위 <span className="text-destructive">*</span></Label>
+                    <Input value={inspectionForm.unit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, unit: e.target.value }))} placeholder="예: ℃, mm, V" className="h-9" /></div>
+                );
+              })()}
+            </div>
+            {(() => {
+              const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+              const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+              if (!isNumeric) return null;
+              return (
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5"><Label className="text-sm">기준값</Label>
+                    <Input value={inspectionForm.standard_value || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, standard_value: e.target.value }))} placeholder="기준값 입력" className="h-9" type="number" /></div>
+                  <div className="space-y-1.5"><Label className="text-sm">±오차범위</Label>
+                    <Input value={inspectionForm.tolerance || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, tolerance: e.target.value }))} placeholder="허용 오차범위" className="h-9" type="number" /></div>
+                </div>
+              );
+            })()}
             <div className="space-y-1.5"><Label className="text-sm">점검내용</Label>
-              <Input value={inspectionForm.inspection_content || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_content: e.target.value }))} placeholder="점검내용" className="h-9" /></div>
+              <textarea
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={inspectionForm.inspection_content || ""}
+                onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_content: e.target.value }))}
+                placeholder="점검 항목 및 내용 입력"
+              /></div>
+            <div className="space-y-1.5"><Label className="text-sm">체크리스트 (선택사항)</Label>
+              <textarea
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={inspectionForm.checklist || ""}
+                onChange={(e) => setInspectionForm((p) => ({ ...p, checklist: e.target.value }))}
+                placeholder="점검 체크리스트 입력 (줄바꿈으로 구분)"
+              /></div>
           </div>
           <DialogFooter className="flex items-center justify-between sm:justify-between">
             <label className="flex items-center gap-2 text-sm cursor-pointer">
@@ -639,7 +805,7 @@ export default function EquipmentInfoPage() {
       {/* 소모품 추가 모달 */}
       <Dialog open={consumableModalOpen} onOpenChange={setConsumableModalOpen}>
         <DialogContent className="max-w-lg">
-          <DialogHeader><DialogTitle>소모품 추가</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 소모품을 추가합니다.</DialogDescription></DialogHeader>
+          <DialogHeader><DialogTitle>{consumableEditMode ? "소모품 수정" : "소모품 추가"}</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 소모품을 {consumableEditMode ? "수정" : "추가"}합니다.</DialogDescription></DialogHeader>
           <div className="grid grid-cols-2 gap-4 py-4">
             <div className="space-y-1.5 col-span-2"><Label className="text-sm">소모품명 <span className="text-destructive">*</span></Label>
               {consumableItemOptions.length > 0 ? (
@@ -696,10 +862,10 @@ export default function EquipmentInfoPage() {
 
       {/* 점검항목 복사 모달 */}
       <Dialog open={copyModalOpen} onOpenChange={setCopyModalOpen}>
-        <DialogContent className="max-w-2xl max-h-[70vh]">
+        <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden">
           <DialogHeader><DialogTitle>점검항목 복사</DialogTitle>
             <DialogDescription>다른 설비의 점검항목을 선택하여 {selectedEquip?.equipment_name}에 복사합니다.</DialogDescription></DialogHeader>
-          <div className="space-y-3">
+          <div className="space-y-3 flex-1 overflow-y-auto">
             <div className="space-y-1.5">
               <Label className="text-sm">소스 설비 선택</Label>
               <Select value={copySourceEquip} onValueChange={(v) => loadCopyItems(v)}>
@@ -715,31 +881,31 @@ export default function EquipmentInfoPage() {
               {copyLoading ? (
                 <div className="flex items-center justify-center py-8"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
               ) : copyItems.length === 0 ? (
-                <div className="text-center text-muted-foreground py-8 text-sm">{copySourceEquip ? "점검항목이 없습니다" : "설비를 선택하세요"}</div>
+                <div className="text-center text-muted-foreground py-8 text-sm">{copySourceEquip ? "점검항목이 없어요" : "설비를 선택해주세요"}</div>
               ) : (
-                <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10">
+                <Table noWrapper>
+                  <thead className="sticky top-0 z-10 bg-card">
                     <TableRow>
                       <TableHead className="w-[40px] text-center">
                         <input type="checkbox" checked={copyItems.length > 0 && copyChecked.size === copyItems.length}
                           onChange={(e) => { if (e.target.checked) setCopyChecked(new Set(copyItems.map((i) => i.id))); else setCopyChecked(new Set()); }} />
                       </TableHead>
-                      <TableHead>점검항목</TableHead><TableHead className="w-[80px]">점검주기</TableHead>
-                      <TableHead className="w-[80px]">점검방법</TableHead><TableHead className="w-[70px]">하한</TableHead>
-                      <TableHead className="w-[70px]">상한</TableHead><TableHead className="w-[60px]">단위</TableHead>
+                      <TableHead>점검항목</TableHead><TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead><TableHead className="w-[70px]">하한</TableHead>
+                      <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한</TableHead><TableHead className="w-[60px]">단위</TableHead>
                     </TableRow>
-                  </TableHeader>
+                  </thead>
                   <TableBody>
                     {copyItems.map((item) => (
                       <TableRow key={item.id} className={cn("cursor-pointer", copyChecked.has(item.id) && "bg-primary/5")}
                         onClick={() => setCopyChecked((prev) => { const n = new Set(prev); if (n.has(item.id)) n.delete(item.id); else n.add(item.id); return n; })}>
                         <TableCell className="text-center"><input type="checkbox" checked={copyChecked.has(item.id)} readOnly /></TableCell>
                         <TableCell className="text-sm">{item.inspection_item}</TableCell>
-                        <TableCell className="text-xs">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
-                        <TableCell className="text-xs">{resolve("inspection_method", item.inspection_method)}</TableCell>
-                        <TableCell className="text-xs">{item.lower_limit || "-"}</TableCell>
-                        <TableCell className="text-xs">{item.upper_limit || "-"}</TableCell>
-                        <TableCell className="text-xs">{item.unit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
+                        <TableCell className="text-[13px]">{resolve("inspection_method", item.inspection_method)}</TableCell>
+                        <TableCell className="text-[13px]">{item.lower_limit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{item.upper_limit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
                       </TableRow>
                     ))}
                   </TableBody>
@@ -768,12 +934,14 @@ export default function EquipmentInfoPage() {
           config={excelChainConfig} onSuccess={() => { fetchEquipments(); refreshRight(); }} />
       )}
 
+      {/* 테이블 설정 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={EQUIP_TABLE}
-        settingsId="equipment-info"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
 
       {ConfirmDialogComponent}
diff --git a/frontend/app/(main)/COMPANY_10/equipment/plc-settings/page.tsx b/frontend/app/(main)/COMPANY_10/equipment/plc-settings/page.tsx
new file mode 100644
index 00000000..4e94d293
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/equipment/plc-settings/page.tsx
@@ -0,0 +1,501 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, Pencil, Cpu, Settings2, Search, Inbox,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+
+/* ───── 테이블명 ───── */
+const DATATYPE_TABLE = "plc_data_type";
+
+const DATATYPE_COLUMNS = [
+  { key: "equipment_code", label: "설비코드" },
+  { key: "data_type", label: "데이터타입" },
+  { key: "unit", label: "단위" },
+  { key: "tag_address", label: "태그주소" },
+  { key: "collection_interval", label: "수집주기" },
+  { key: "lower_limit", label: "하한값" },
+  { key: "upper_limit", label: "상한값" },
+  { key: "is_active", label: "사용여부" },
+];
+const COLLECTION_TABLE = "plc_collection_config";
+const EQUIPMENT_TABLE = "equipment_mng";
+
+/* ───── Cron 한글 변환 ───── */
+const cronToKorean = (cron: string): string => {
+  if (!cron) return "";
+  const parts = cron.trim().split(/\s+/);
+  if (parts.length < 5) return cron;
+  const [min, hour] = parts;
+  if (min === "*" && hour === "*") return "매 분마다";
+  if (min !== "*" && hour === "*") return `매시 ${min}분마다`;
+  if (min === "0" && hour !== "*") return `매일 ${hour}시 정각`;
+  if (min === "*/5") return "5분마다";
+  if (min === "*/10") return "10분마다";
+  if (min === "*/30") return "30분마다";
+  return cron;
+};
+
+/* ───── 카테고리 flatten ───── */
+const flattenCategories = (vals: any[]): { code: string; label: string }[] => {
+  const result: { code: string; label: string }[] = [];
+  for (const v of vals) {
+    result.push({ code: v.valueCode, label: v.valueLabel });
+    if (v.children?.length) result.push(...flattenCategories(v.children));
+  }
+  return result;
+};
+
+export default function PlcSettingsPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-plc-settings", DATATYPE_TABLE, DATATYPE_COLUMNS);
+
+  const [activeTab, setActiveTab] = useState("datatype");
+
+  /* ───── PLC 데이터타입 ───── */
+  const [datatypes, setDatatypes] = useState<any[]>([]);
+  const [dtLoading, setDtLoading] = useState(false);
+  const [dtCount, setDtCount] = useState(0);
+  const [dtChecked, setDtChecked] = useState<string[]>([]);
+  const [dtModalOpen, setDtModalOpen] = useState(false);
+  const [dtEditMode, setDtEditMode] = useState(false);
+  const [dtForm, setDtForm] = useState<Record<string, any>>({});
+  const [dtSaving, setDtSaving] = useState(false);
+  const [dtKeyword, setDtKeyword] = useState("");
+
+  /* ───── 수집 설정 ───── */
+  const [configs, setConfigs] = useState<any[]>([]);
+  const [cfgLoading, setCfgLoading] = useState(false);
+  const [cfgCount, setCfgCount] = useState(0);
+  const [cfgChecked, setCfgChecked] = useState<string[]>([]);
+  const [cfgModalOpen, setCfgModalOpen] = useState(false);
+  const [cfgEditMode, setCfgEditMode] = useState(false);
+  const [cfgForm, setCfgForm] = useState<Record<string, any>>({});
+  const [cfgSaving, setCfgSaving] = useState(false);
+  const [cfgKeyword, setCfgKeyword] = useState("");
+
+  /* ───── FK + 카테고리 옵션 ───── */
+  const [equipOptions, setEquipOptions] = useState<{ code: string; label: string }[]>([]);
+  const [collectionTypeOptions, setCollectionTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const eqRes = await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/data`, { page: 1, size: 500, autoFilter: true });
+        const eqs = eqRes.data?.data?.data || eqRes.data?.data?.rows || [];
+        setEquipOptions(eqs.map((r: any) => ({ code: r.equipment_code, label: `${r.equipment_code} - ${r.equipment_name || ""}` })));
+      } catch { /* skip */ }
+      try {
+        const catRes = await apiClient.get(`/table-categories/${COLLECTION_TABLE}/collection_type/values`);
+        if (catRes.data?.data?.length > 0) {
+          setCollectionTypeOptions(flattenCategories(catRes.data.data));
+        }
+      } catch { /* skip */ }
+    };
+    load();
+  }, []);
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  const fetchDatatypes = useCallback(async (keyword?: string) => {
+    setDtLoading(true);
+    try {
+      const kw = keyword !== undefined ? keyword : dtKeyword;
+      const filters: any[] = [];
+      if (kw.trim()) filters.push({ columnName: "equipment_code", operator: "contains", value: kw.trim() });
+      const res = await apiClient.post(`/table-management/tables/${DATATYPE_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setDatatypes(rows);
+      setDtCount(rows.length);
+    } catch { toast.error("PLC 데이터타입 조회에 실패했어요"); }
+    finally { setDtLoading(false); }
+  }, [dtKeyword]);
+
+  const fetchConfigs = useCallback(async (keyword?: string) => {
+    setCfgLoading(true);
+    try {
+      const kw = keyword !== undefined ? keyword : cfgKeyword;
+      const filters: any[] = [];
+      if (kw.trim()) filters.push({ columnName: "config_name", operator: "contains", value: kw.trim() });
+      const res = await apiClient.post(`/table-management/tables/${COLLECTION_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setConfigs(rows);
+      setCfgCount(rows.length);
+    } catch { toast.error("수집 설정 조회에 실패했어요"); }
+    finally { setCfgLoading(false); }
+  }, [cfgKeyword]);
+
+  useEffect(() => { fetchDatatypes(); fetchConfigs(); }, []);
+
+  /* ═══════════════════ 데이터타입 CRUD ═══════════════════ */
+  const openDtCreate = () => { setDtForm({}); setDtEditMode(false); setDtModalOpen(true); };
+  const openDtEdit = (row: any) => { setDtForm({ ...row }); setDtEditMode(true); setDtModalOpen(true); };
+  const saveDt = async () => {
+    if (!dtForm.equipment_code) { toast.error("설비코드는 필수 입력이에요"); return; }
+    setDtSaving(true);
+    try {
+      if (dtEditMode) {
+        await apiClient.put(`/table-management/tables/${DATATYPE_TABLE}/edit`, {
+          originalData: { id: dtForm.id }, updatedData: dtForm,
+        });
+        toast.success("PLC 데이터타입을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${DATATYPE_TABLE}/add`, dtForm);
+        toast.success("PLC 데이터타입을 등록했어요");
+      }
+      setDtModalOpen(false);
+      fetchDatatypes();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setDtSaving(false); }
+  };
+  const deleteDt = async () => {
+    if (dtChecked.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("PLC 데이터타입 삭제", { description: `선택한 ${dtChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.` });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DATATYPE_TABLE}/delete`, {
+        data: dtChecked.map(id => ({ id })),
+      });
+      toast.success(`${dtChecked.length}건을 삭제했어요`);
+      setDtChecked([]);
+      fetchDatatypes();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ 수집 설정 CRUD ═══════════════════ */
+  const openCfgCreate = () => { setCfgForm({}); setCfgEditMode(false); setCfgModalOpen(true); };
+  const openCfgEdit = (row: any) => { setCfgForm({ ...row }); setCfgEditMode(true); setCfgModalOpen(true); };
+  const saveCfg = async () => {
+    if (!cfgForm.config_name) { toast.error("설정명은 필수 입력이에요"); return; }
+    setCfgSaving(true);
+    try {
+      if (cfgEditMode) {
+        await apiClient.put(`/table-management/tables/${COLLECTION_TABLE}/edit`, {
+          originalData: { id: cfgForm.id }, updatedData: cfgForm,
+        });
+        toast.success("수집 설정을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${COLLECTION_TABLE}/add`, cfgForm);
+        toast.success("수집 설정을 등록했어요");
+      }
+      setCfgModalOpen(false);
+      fetchConfigs();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setCfgSaving(false); }
+  };
+  const deleteCfg = async () => {
+    if (cfgChecked.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("수집 설정 삭제", { description: `선택한 ${cfgChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.` });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${COLLECTION_TABLE}/delete`, {
+        data: cfgChecked.map(id => ({ id })),
+      });
+      toast.success(`${cfgChecked.length}건을 삭제했어요`);
+      setCfgChecked([]);
+      fetchConfigs();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="rounded-lg border bg-card">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <div className="border-b px-3">
+            <TabsList className="bg-transparent h-auto p-0 gap-0">
+              <TabsTrigger
+                value="datatype"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-3 text-sm font-medium"
+              >
+                <Cpu className="w-4 h-4 mr-2" />
+                PLC 데이터타입
+                <Badge variant="secondary" className="ml-2 bg-primary/10 text-primary text-xs">{dtCount}</Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="collection"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-3 text-sm font-medium"
+              >
+                <Settings2 className="w-4 h-4 mr-2" />
+                수집 설정
+                <Badge variant="secondary" className="ml-2 bg-primary/10 text-primary text-xs">{cfgCount}</Badge>
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* ──── PLC 데이터타입 탭 ──── */}
+          <TabsContent value="datatype" className="p-3 mt-0">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    className="h-8 pl-8 w-56 text-sm"
+                    placeholder="설비코드 검색..."
+                    value={dtKeyword}
+                    onChange={(e) => setDtKeyword(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && fetchDatatypes(dtKeyword)}
+                  />
+                </div>
+                <Button size="sm" variant="outline" className="h-8" onClick={() => fetchDatatypes(dtKeyword)}>
+                  <Search className="w-3.5 h-3.5 mr-1" />검색
+                </Button>
+                <Button size="sm" variant="ghost" className="h-8" onClick={() => { setDtKeyword(""); fetchDatatypes(""); }}>
+                  초기화
+                </Button>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">{dtCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openDtCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = datatypes.find(r => dtChecked.includes(r.id));
+                  if (sel) openDtEdit(sel); else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={deleteDt}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <EDataTable
+                columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+                  key: col.key,
+                  label: col.label,
+                  align: col.key === "is_active" ? "center" : undefined,
+                  render: col.key === "is_active"
+                    ? (val: any) => <Badge variant={val ? "default" : "secondary"} className="text-xs">{val ? "사용" : "미사용"}</Badge>
+                    : undefined,
+                }))}
+                data={ts.groupData(datatypes)}
+                loading={dtLoading}
+                emptyMessage="등록된 PLC 데이터타입이 없어요"
+                showCheckbox
+                checkedIds={dtChecked}
+                onCheckedChange={setDtChecked}
+                onRowDoubleClick={(row) => openDtEdit(row)}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </TabsContent>
+
+          {/* ──── 수집 설정 탭 ──── */}
+          <TabsContent value="collection" className="p-3 mt-0">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    className="h-8 pl-8 w-56 text-sm"
+                    placeholder="설정명 검색..."
+                    value={cfgKeyword}
+                    onChange={(e) => setCfgKeyword(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && fetchConfigs(cfgKeyword)}
+                  />
+                </div>
+                <Button size="sm" variant="outline" className="h-8" onClick={() => fetchConfigs(cfgKeyword)}>
+                  <Search className="w-3.5 h-3.5 mr-1" />검색
+                </Button>
+                <Button size="sm" variant="ghost" className="h-8" onClick={() => { setCfgKeyword(""); fetchConfigs(""); }}>
+                  초기화
+                </Button>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">{cfgCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openCfgCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = configs.find(r => cfgChecked.includes(r.id));
+                  if (sel) openCfgEdit(sel); else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={deleteCfg}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+              </div>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <EDataTable
+                columns={[
+                  { key: "config_name", label: "설정명" },
+                  { key: "source_connection_id", label: "소스연결ID", width: "w-[110px]" },
+                  { key: "source_table", label: "소스테이블", width: "w-[120px]" },
+                  { key: "target_table", label: "대상테이블", width: "w-[120px]" },
+                  { key: "collection_type", label: "수집유형", width: "w-[90px]" },
+                  { key: "schedule_cron", label: "스케줄(Cron)", width: "w-[120px]", render: (val: any) => <span className="font-mono text-[13px]">{val}</span> },
+                  { key: "is_active", label: "사용여부", width: "w-[80px]", align: "center" as const, render: (val: any) => <Badge variant={val ? "default" : "secondary"} className="text-xs">{val ? "사용" : "미사용"}</Badge> },
+                ] as EDataTableColumn[]}
+                data={configs}
+                loading={cfgLoading}
+                emptyMessage="등록된 수집 설정이 없어요"
+                showCheckbox
+                checkedIds={cfgChecked}
+                onCheckedChange={setCfgChecked}
+                onRowDoubleClick={(row) => openCfgEdit(row)}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* ═══════════════════ PLC 데이터타입 모달 ═══════════════════ */}
+      <Dialog open={dtModalOpen} onOpenChange={setDtModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{dtEditMode ? "PLC 데이터타입 수정" : "PLC 데이터타입 등록"}</DialogTitle>
+            <DialogDescription>PLC 데이터타입 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">설비코드 <span className="text-destructive">*</span></Label>
+              <Select value={dtForm.equipment_code || ""} onValueChange={(v) => setDtForm(p => ({ ...p, equipment_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="설비를 선택해주세요" /></SelectTrigger>
+                <SelectContent>
+                  {equipOptions.map(o => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">데이터타입</Label>
+              <Input className="h-9" value={dtForm.data_type || ""} onChange={(e) => setDtForm(p => ({ ...p, data_type: e.target.value }))} placeholder="예: 온도, 압력" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">단위</Label>
+              <Input className="h-9" value={dtForm.unit || ""} onChange={(e) => setDtForm(p => ({ ...p, unit: e.target.value }))} placeholder="예: ℃, bar" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">태그주소</Label>
+              <Input className="h-9" value={dtForm.tag_address || ""} onChange={(e) => setDtForm(p => ({ ...p, tag_address: e.target.value }))} placeholder="예: D100" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">수집주기</Label>
+              <Input className="h-9" value={dtForm.collection_interval || ""} onChange={(e) => setDtForm(p => ({ ...p, collection_interval: e.target.value }))} placeholder="예: 1000ms" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">하한값</Label>
+              <Input className="h-9" type="number" value={dtForm.lower_limit ?? ""} onChange={(e) => setDtForm(p => ({ ...p, lower_limit: e.target.value }))} placeholder="하한값" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">상한값</Label>
+              <Input className="h-9" type="number" value={dtForm.upper_limit ?? ""} onChange={(e) => setDtForm(p => ({ ...p, upper_limit: e.target.value }))} placeholder="상한값" />
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <div className="flex items-center gap-2">
+                <Checkbox checked={dtForm.is_active ?? true} onCheckedChange={(v) => setDtForm(p => ({ ...p, is_active: !!v }))} />
+                <Label className="text-sm">사용</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDtModalOpen(false)}>취소</Button>
+            <Button onClick={saveDt} disabled={dtSaving}>
+              {dtSaving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 수집 설정 모달 ═══════════════════ */}
+      <Dialog open={cfgModalOpen} onOpenChange={setCfgModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{cfgEditMode ? "수집 설정 수정" : "수집 설정 등록"}</DialogTitle>
+            <DialogDescription>수집 설정 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">설정명 <span className="text-destructive">*</span></Label>
+              <Input className="h-9" value={cfgForm.config_name || ""} onChange={(e) => setCfgForm(p => ({ ...p, config_name: e.target.value }))} placeholder="설정명을 입력해주세요" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">소스연결ID</Label>
+              <Input className="h-9" value={cfgForm.source_connection_id || ""} onChange={(e) => setCfgForm(p => ({ ...p, source_connection_id: e.target.value }))} placeholder="소스연결ID" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">수집유형</Label>
+              {collectionTypeOptions.length > 0 ? (
+                <Select value={cfgForm.collection_type || ""} onValueChange={(v) => setCfgForm(p => ({ ...p, collection_type: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택해주세요" /></SelectTrigger>
+                  <SelectContent>
+                    {collectionTypeOptions.map(o => (
+                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <Input className="h-9" value={cfgForm.collection_type || ""} onChange={(e) => setCfgForm(p => ({ ...p, collection_type: e.target.value }))} placeholder="수집유형" />
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">소스테이블</Label>
+              <Input className="h-9" value={cfgForm.source_table || ""} onChange={(e) => setCfgForm(p => ({ ...p, source_table: e.target.value }))} placeholder="소스테이블명" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">대상테이블</Label>
+              <Input className="h-9" value={cfgForm.target_table || ""} onChange={(e) => setCfgForm(p => ({ ...p, target_table: e.target.value }))} placeholder="대상테이블명" />
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">스케줄 (Cron)</Label>
+              <Input className="h-9 font-mono text-sm" value={cfgForm.schedule_cron || ""} onChange={(e) => setCfgForm(p => ({ ...p, schedule_cron: e.target.value }))} placeholder="예: */5 * * * * (5분마다)" />
+              {cfgForm.schedule_cron && (
+                <p className="text-xs text-muted-foreground mt-1">{cronToKorean(cfgForm.schedule_cron)}</p>
+              )}
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <div className="flex items-center gap-2">
+                <Checkbox checked={cfgForm.is_active ?? true} onCheckedChange={(v) => setCfgForm(p => ({ ...p, is_active: !!v }))} />
+                <Label className="text-sm">사용</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCfgModalOpen(false)}>취소</Button>
+            <Button onClick={saveCfg} disabled={cfgSaving}>
+              {cfgSaving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/logistics/info/page.tsx b/frontend/app/(main)/COMPANY_10/logistics/info/page.tsx
new file mode 100644
index 00000000..543dd3dd
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/logistics/info/page.tsx
@@ -0,0 +1,905 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import {
+  Truck,
+  DollarSign,
+  FileText,
+  MapPin,
+  Car,
+  Plus,
+  Trash2,
+  Download,
+  Pencil,
+  RefreshCw,
+  Inbox,
+  Loader2,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// ========== 타입 & 상수 ==========
+type TabKey = "carrier" | "cost" | "contract" | "route" | "vehicle";
+
+interface TabColumnDef {
+  key: string;
+  label: string;
+  width?: string;
+  align?: "left" | "center" | "right";
+  formatNumber?: boolean;
+}
+
+interface FormFieldDef {
+  key: string;
+  label: string;
+  type: "text" | "number" | "select" | "smartselect" | "date";
+  required?: boolean;
+  referenceKey?: "carrier" | "route";
+  categoryKey?: string;
+  options?: { value: string; label: string }[];
+  placeholder?: string;
+}
+
+interface TabConfig {
+  key: TabKey;
+  label: string;
+  icon: React.ReactNode;
+  tableName: string;
+  columns: TabColumnDef[];
+  formFields: FormFieldDef[];
+  defaultSortColumn: string;
+}
+
+const TAB_CONFIGS: TabConfig[] = [
+  {
+    key: "carrier",
+    label: "운송업체",
+    icon: <Truck className="h-3.5 w-3.5" />,
+    tableName: "carrier_mng",
+    defaultSortColumn: "carrier_code",
+    columns: [
+      { key: "carrier_code", label: "업체코드", width: "120px" },
+      { key: "carrier_name", label: "업체명", width: "160px" },
+      { key: "carrier_type", label: "업체유형", width: "100px" },
+      { key: "contact_person", label: "담당자", width: "100px" },
+      { key: "contact_phone", label: "연락처", width: "130px" },
+      { key: "email", label: "이메일", width: "180px" },
+      { key: "address", label: "주소", width: "220px" },
+      { key: "rating", label: "등급", width: "70px", align: "center" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "carrier_code", label: "업체코드", type: "text", required: true, placeholder: "업체코드를 입력해주세요" },
+      { key: "carrier_name", label: "업체명", type: "text", required: true, placeholder: "업체명을 입력해주세요" },
+      { key: "carrier_type", label: "업체유형", type: "select", required: true, categoryKey: "carrier_mng:carrier_type", placeholder: "업체유형을 선택해주세요" },
+      { key: "contact_person", label: "담당자", type: "text", placeholder: "담당자명" },
+      { key: "contact_phone", label: "연락처", type: "text", placeholder: "예: 02-1234-5678" },
+      { key: "email", label: "이메일", type: "text", placeholder: "email@example.com" },
+      { key: "address", label: "주소", type: "text", placeholder: "주소를 입력해주세요" },
+      { key: "rating", label: "등급", type: "select", categoryKey: "carrier_mng:rating", placeholder: "등급을 선택해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "cost",
+    label: "물류비",
+    icon: <DollarSign className="h-3.5 w-3.5" />,
+    tableName: "logistics_cost_mng",
+    defaultSortColumn: "carrier_code",
+    columns: [
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "route_code", label: "구간코드", width: "120px" },
+      { key: "base_fee", label: "기본요금", width: "110px", align: "right", formatNumber: true },
+      { key: "unit", label: "단위", width: "70px", align: "center" },
+      { key: "unit_fee", label: "단가", width: "110px", align: "right", formatNumber: true },
+      { key: "min_weight", label: "최소중량", width: "100px", align: "right", formatNumber: true },
+      { key: "max_weight", label: "최대중량", width: "100px", align: "right", formatNumber: true },
+      { key: "delivery_days", label: "배송일수", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "route_code", label: "배송구간", type: "smartselect", required: true, referenceKey: "route" },
+      { key: "base_fee", label: "기본요금", type: "number", placeholder: "0" },
+      { key: "unit", label: "단위", type: "text", placeholder: "kg, 건 등" },
+      { key: "unit_fee", label: "단가", type: "number", placeholder: "0" },
+      { key: "min_weight", label: "최소중량", type: "number", placeholder: "0" },
+      { key: "max_weight", label: "최대중량", type: "number", placeholder: "0" },
+      { key: "delivery_days", label: "배송일수", type: "number", placeholder: "0" },
+    ],
+  },
+  {
+    key: "contract",
+    label: "계약서",
+    icon: <FileText className="h-3.5 w-3.5" />,
+    tableName: "carrier_contract_mng",
+    defaultSortColumn: "contract_no",
+    columns: [
+      { key: "contract_no", label: "계약번호", width: "130px" },
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "contract_start_date", label: "시작일", width: "110px" },
+      { key: "contract_end_date", label: "종료일", width: "110px" },
+      { key: "contract_amount", label: "계약금액", width: "130px", align: "right", formatNumber: true },
+      { key: "contact_person", label: "담당자", width: "100px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "contract_no", label: "계약번호", type: "text", required: true, placeholder: "계약번호를 입력해주세요" },
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "contract_start_date", label: "시작일", type: "date", required: true },
+      { key: "contract_end_date", label: "종료일", type: "date", required: true },
+      { key: "contract_amount", label: "계약금액", type: "number", placeholder: "0" },
+      { key: "contact_person", label: "담당자", type: "text", placeholder: "담당자명을 입력해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_contract_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "route",
+    label: "배송구간",
+    icon: <MapPin className="h-3.5 w-3.5" />,
+    tableName: "delivery_route_mng",
+    defaultSortColumn: "route_code",
+    columns: [
+      { key: "route_code", label: "구간코드", width: "120px" },
+      { key: "route_name", label: "구간명", width: "160px" },
+      { key: "departure", label: "출발지", width: "120px" },
+      { key: "destination", label: "도착지", width: "120px" },
+      { key: "distance_km", label: "거리(km)", width: "100px", align: "right", formatNumber: true },
+      { key: "avg_time_hours", label: "평균시간(h)", width: "100px", align: "right" },
+      { key: "route_type", label: "구간유형", width: "100px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "route_code", label: "구간코드", type: "text", required: true, placeholder: "구간코드를 입력해주세요" },
+      { key: "departure", label: "출발지", type: "text", required: true, placeholder: "출발지" },
+      { key: "destination", label: "도착지", type: "text", required: true, placeholder: "도착지" },
+      { key: "distance_km", label: "거리(km)", type: "number", placeholder: "0" },
+      { key: "avg_time_hours", label: "평균시간(h)", type: "number", placeholder: "0" },
+      { key: "route_type", label: "구간유형", type: "select", categoryKey: "delivery_route_mng:route_type", placeholder: "유형을 선택해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "delivery_route_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "vehicle",
+    label: "차량",
+    icon: <Car className="h-3.5 w-3.5" />,
+    tableName: "carrier_vehicle_mng",
+    defaultSortColumn: "vehicle_code",
+    columns: [
+      { key: "vehicle_code", label: "차량코드", width: "120px" },
+      { key: "vehicle_number", label: "차량번호", width: "120px" },
+      { key: "vehicle_type", label: "차량유형", width: "100px" },
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "load_capacity_kg", label: "적재용량(kg)", width: "120px", align: "right", formatNumber: true },
+      { key: "driver_name", label: "운전자", width: "100px" },
+      { key: "last_maintenance_date", label: "최종정비일", width: "110px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "vehicle_code", label: "차량코드", type: "text", required: true, placeholder: "차량코드를 입력해주세요" },
+      { key: "vehicle_number", label: "차량번호", type: "text", required: true, placeholder: "12가 3456" },
+      { key: "vehicle_type", label: "차량유형", type: "select", required: true, categoryKey: "carrier_vehicle_mng:vehicle_type", placeholder: "차량유형을 선택해주세요" },
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "load_capacity_kg", label: "적재용량(kg)", type: "number", placeholder: "0" },
+      { key: "driver_name", label: "운전자", type: "text", placeholder: "운전자명" },
+      { key: "last_maintenance_date", label: "최종정비일", type: "date" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_vehicle_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+];
+
+// 카테고리 계층 평탄화
+function flattenCategories(items: any[]): { value: string; label: string }[] {
+  const result: { value: string; label: string }[] = [];
+  function walk(arr: any[]) {
+    for (const item of arr) {
+      if (item.value || item.name) {
+        result.push({
+          value: item.value || item.name,
+          label: item.label || item.name || item.value,
+        });
+      }
+      if (item.children?.length) walk(item.children);
+    }
+  }
+  walk(items);
+  return result;
+}
+
+// 채번 대상 필드 매핑: tableName → 코드 필드 key
+const NUMBERING_FIELD_MAP: Record<string, string> = {
+  carrier_mng: "carrier_code",
+  delivery_route_mng: "route_code",
+  carrier_vehicle_mng: "vehicle_code",
+};
+
+// ========== 메인 컴포넌트 ==========
+export default function LogisticsInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 탭 상태
+  const [activeTab, setActiveTab] = useState<TabKey>("carrier");
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 탭별 독립 상태
+  const [tabData, setTabData] = useState<Record<TabKey, any[]>>({
+    carrier: [], cost: [], contract: [], route: [], vehicle: [],
+  });
+  const [tabLoading, setTabLoading] = useState<Record<TabKey, boolean>>({
+    carrier: false, cost: false, contract: false, route: false, vehicle: false,
+  });
+  const [tabChecked, setTabChecked] = useState<Record<TabKey, string[]>>({
+    carrier: [], cost: [], contract: [], route: [], vehicle: [],
+  });
+
+  // FK 참조 데이터 (캐싱)
+  const [carrierOptions, setCarrierOptions] = useState<{ code: string; label: string }[]>([]);
+  const [routeOptions, setRouteOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 카테고리 옵션 캐시
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { value: string; label: string }[]>>({});
+  const loadedCategories = useRef(new Set<string>());
+
+  // 모달 상태
+  const [formOpen, setFormOpen] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [editId, setEditId] = useState<string | null>(null);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 테이블 설정 (탭별)
+  const tsCarrier = useTableSettings("c16-logistics-carrier", TAB_CONFIGS[0].tableName, TAB_CONFIGS[0].columns);
+  const tsCost = useTableSettings("c16-logistics-cost", TAB_CONFIGS[1].tableName, TAB_CONFIGS[1].columns);
+  const tsContract = useTableSettings("c16-logistics-contract", TAB_CONFIGS[2].tableName, TAB_CONFIGS[2].columns);
+  const tsRoute = useTableSettings("c16-logistics-route", TAB_CONFIGS[3].tableName, TAB_CONFIGS[3].columns);
+  const tsVehicle = useTableSettings("c16-logistics-vehicle", TAB_CONFIGS[4].tableName, TAB_CONFIGS[4].columns);
+  const tsMap: Record<TabKey, typeof tsCarrier> = { carrier: tsCarrier, cost: tsCost, contract: tsContract, route: tsRoute, vehicle: tsVehicle };
+  const activeTs = tsMap[activeTab];
+
+  const activeConfig = useMemo(
+    () => TAB_CONFIGS.find((c) => c.key === activeTab)!,
+    [activeTab]
+  );
+
+  // 컬럼 가시성 헬퍼
+  const getVisibleColumns = (tabKey: TabKey) => tsMap[tabKey].visibleColumns;
+
+  // 클라이언트 사이드 필터링
+  const filteredData = useMemo(() => {
+    const data = tabData[activeTab];
+    if (searchFilters.length === 0) return data;
+    return data.filter((row) =>
+      searchFilters.every((f) => {
+        if (!f.value) return true;
+        const kw = f.value.toLowerCase();
+        if (f.columnName) {
+          return String(row[f.columnName] ?? "").toLowerCase().includes(kw);
+        }
+        return Object.values(row).some((v) => String(v ?? "").toLowerCase().includes(kw));
+      })
+    );
+  }, [tabData, activeTab, searchFilters]);
+
+  // FK 참조 데이터 로드
+  const loadReferences = useCallback(async () => {
+    try {
+      const [carrierRes, routeRes] = await Promise.all([
+        apiClient.post("/table-management/tables/carrier_mng/data", {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "carrier_code", order: "asc" },
+        }),
+        apiClient.post("/table-management/tables/delivery_route_mng/data", {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "route_code", order: "asc" },
+        }),
+      ]);
+      const carriers = carrierRes.data?.data?.data || carrierRes.data?.data?.rows || [];
+      setCarrierOptions(
+        carriers.map((r: any) => ({
+          code: r.carrier_code || "",
+          label: `${r.carrier_code} - ${r.carrier_name || ""}`,
+        }))
+      );
+      const routes = routeRes.data?.data?.data || routeRes.data?.data?.rows || [];
+      setRouteOptions(
+        routes.map((r: any) => ({
+          code: r.route_code || "",
+          label: `${r.route_code} - ${r.route_name || ""}`,
+        }))
+      );
+    } catch {
+      // FK 참조 로드 실패 시 무시
+    }
+  }, []);
+
+  useEffect(() => {
+    loadReferences();
+  }, [loadReferences]);
+
+  // 카테고리 옵션 로드
+  const loadCategoryOptions = useCallback(async (tableColumn: string) => {
+    if (loadedCategories.current.has(tableColumn)) return;
+    loadedCategories.current.add(tableColumn);
+    const [tableName, columnName] = tableColumn.split(":");
+    try {
+      const res = await apiClient.get(`/table-categories/${tableName}/${columnName}/values`);
+      const data = res.data?.data || [];
+      setCategoryOptions((prev) => ({
+        ...prev,
+        [tableColumn]: data.length > 0 ? flattenCategories(data) : [],
+      }));
+    } catch {
+      setCategoryOptions((prev) => ({ ...prev, [tableColumn]: [] }));
+    }
+  }, []);
+
+  // 활성 탭의 카테고리 로드
+  useEffect(() => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    config.formFields.forEach((f) => {
+      if (f.categoryKey) loadCategoryOptions(f.categoryKey);
+    });
+  }, [activeTab, loadCategoryOptions]);
+
+  // 데이터 조회
+  const fetchTabData = useCallback(async (tab: TabKey) => {
+    const config = TAB_CONFIGS.find((c) => c.key === tab);
+    if (!config) return;
+    setTabLoading((prev) => ({ ...prev, [tab]: true }));
+    try {
+      const res = await apiClient.post(
+        `/table-management/tables/${config.tableName}/data`,
+        {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: config.defaultSortColumn, order: "asc" },
+        }
+      );
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setTabData((prev) => ({ ...prev, [tab]: rows }));
+    } catch {
+      toast.error("데이터를 불러오는 데 실패했어요.");
+      setTabData((prev) => ({ ...prev, [tab]: [] }));
+    } finally {
+      setTabLoading((prev) => ({ ...prev, [tab]: false }));
+    }
+  }, []);
+
+  // 초기 데이터 로드 (탭 전환 시)
+  useEffect(() => {
+    fetchTabData(activeTab);
+  }, [activeTab, fetchTabData]);
+
+  // 탭 변경
+  const handleTabChange = useCallback((tab: string) => {
+    setActiveTab(tab as TabKey);
+    setSearchFilters([]);
+  }, []);
+
+  // 등록 모달 열기
+  const handleOpenAdd = useCallback(async () => {
+    setEditMode(false);
+    setEditId(null);
+    setFormData({});
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setFormOpen(true);
+
+    // 현재 탭의 채번 규칙 조회
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    const codeField = NUMBERING_FIELD_MAP[config.tableName];
+    if (!codeField) return; // 채번 대상이 아닌 탭
+
+    try {
+      const ruleRes = await apiClient.get(
+        `/numbering-rules/by-column/${config.tableName}/${codeField}`
+      );
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시 — 사용자가 직접 입력
+    }
+  }, [activeTab]);
+
+  // 수정 모달 열기
+  const handleOpenEdit = useCallback((row: any) => {
+    setEditMode(true);
+    setEditId(row.id ? String(row.id) : null);
+    setFormData({ ...row });
+    setFormOpen(true);
+  }, []);
+
+  // 저장
+  const handleSave = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+
+    // 필수값 검증 (등록 모드에서 채번 대상 코드 필드는 자동 할당이므로 스킵)
+    const numberingCodeField = NUMBERING_FIELD_MAP[config.tableName];
+    for (const field of config.formFields) {
+      if (!editMode && numberingRuleId && field.key === numberingCodeField) continue;
+      if (field.required && !formData[field.key]?.toString().trim()) {
+        toast.error(`${field.label}은(는) 필수 입력이에요.`);
+        return;
+      }
+    }
+
+    try {
+      // 배송구간: 출발지→도착지 로 구간명 자동 생성
+      const saveData = { ...formData };
+      if (activeTab === "route" && saveData.departure && saveData.destination) {
+        saveData.route_name = `${saveData.departure}→${saveData.destination}`;
+      }
+
+      if (editMode && editId) {
+        await apiClient.put(`/table-management/tables/${config.tableName}/edit`, {
+          originalData: { id: editId },
+          updatedData: saveData,
+        });
+        toast.success("수정이 완료되었어요.");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        const codeField = NUMBERING_FIELD_MAP[config.tableName];
+        if (codeField && numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            saveData[codeField] = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+
+        await apiClient.post(
+          `/table-management/tables/${config.tableName}/add`,
+          { id: crypto.randomUUID(), ...saveData }
+        );
+        toast.success("등록이 완료되었어요.");
+      }
+      setFormOpen(false);
+      fetchTabData(activeTab);
+      // FK 참조 테이블 변경 시 캐시 갱신
+      if (activeTab === "carrier" || activeTab === "route") {
+        loadReferences();
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    }
+  }, [activeTab, editMode, editId, formData, fetchTabData, loadReferences, numberingRuleId]);
+
+  // 삭제
+  const handleDelete = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    const ids = tabChecked[activeTab];
+    if (ids.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요.");
+      return;
+    }
+    const ok = await confirm(`선택한 ${ids.length}건을 삭제할까요?`, {
+      description: "삭제된 데이터는 복구할 수 없어요.",
+      variant: "destructive",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(
+        `/table-management/tables/${config.tableName}/delete`,
+        { data: ids.map((id) => ({ id })) }
+      );
+      toast.success(`${ids.length}건이 삭제되었어요.`);
+      setTabChecked((prev) => ({ ...prev, [activeTab]: [] }));
+      fetchTabData(activeTab);
+      if (activeTab === "carrier" || activeTab === "route") {
+        loadReferences();
+      }
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  }, [activeTab, tabChecked, confirm, fetchTabData, loadReferences]);
+
+  // 엑셀 다운로드 (필터된 데이터 기준)
+  const handleExcelDownload = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    if (filteredData.length === 0) {
+      toast.error("다운로드할 데이터가 없어요.");
+      return;
+    }
+    const exportData = filteredData.map((row) => {
+      const obj: Record<string, any> = {};
+      config.columns.forEach((col) => {
+        obj[col.label] = row[col.key] ?? "";
+      });
+      return obj;
+    });
+    await exportToExcel(exportData, `${config.label}.xlsx`, config.label);
+    toast.success("엑셀 다운로드가 완료되었어요.");
+  }, [activeTab, filteredData]);
+
+  // 폼 필드 변경
+  const updateFormField = useCallback((key: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [key]: value }));
+  }, []);
+
+  // 행 체크 토글
+  const toggleRowCheck = useCallback((tabKey: TabKey, rowId: string) => {
+    setTabChecked((prev) => {
+      const ids = prev[tabKey];
+      return {
+        ...prev,
+        [tabKey]: ids.includes(rowId) ? ids.filter((x) => x !== rowId) : [...ids, rowId],
+      };
+    });
+  }, []);
+
+  // 전체 체크 토글
+  const toggleAllCheck = useCallback((tabKey: TabKey, checked: boolean) => {
+    setTabChecked((prev) => ({
+      ...prev,
+      [tabKey]: checked ? tabData[tabKey].map((r: any) => String(r.id)) : [],
+    }));
+  }, [tabData]);
+
+  // 폼 필드 렌더
+  const renderFormField = useCallback(
+    (field: FormFieldDef) => {
+      const value = formData[field.key] ?? "";
+      // 현재 탭의 채번 대상 코드 필드인지 확인
+      const numberingCodeField = NUMBERING_FIELD_MAP[activeConfig.tableName];
+      const isNumberingTarget = !editMode && numberingRuleId && field.key === numberingCodeField;
+      // 수정 모드에서 코드/번호 필드는 읽기전용
+      const isCodeField =
+        editMode &&
+        field.type === "text" &&
+        (field.key.endsWith("_code") || field.key.endsWith("_no"));
+
+      switch (field.type) {
+        case "text":
+          // 등록 모드 + 채번 대상 필드: readOnly로 미리보기 코드 표시
+          if (isNumberingTarget) {
+            return (
+              <Input
+                value={previewCode || ""}
+                readOnly
+                placeholder="채번 조회 중..."
+                className="h-9 text-sm bg-muted text-muted-foreground"
+              />
+            );
+          }
+          return (
+            <Input
+              value={value}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              placeholder={field.placeholder}
+              readOnly={isCodeField}
+              className={cn(
+                "h-9 text-sm",
+                isCodeField && "bg-muted text-muted-foreground"
+              )}
+            />
+          );
+        case "number":
+          return (
+            <Input
+              type="number"
+              value={value}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              placeholder={field.placeholder}
+              className="h-9 text-sm"
+            />
+          );
+        case "select": {
+          const opts =
+            field.options ||
+            (field.categoryKey ? categoryOptions[field.categoryKey] : []) ||
+            [];
+          return (
+            <Select
+              value={String(value)}
+              onValueChange={(v) => updateFormField(field.key, v)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder={field.placeholder || "선택해주세요"} />
+              </SelectTrigger>
+              <SelectContent>
+                {opts.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          );
+        }
+        case "smartselect": {
+          // SmartSelect 대신 Select로 직접 구현
+          const opts =
+            field.referenceKey === "carrier" ? carrierOptions : routeOptions;
+          return (
+            <Select
+              value={String(value)}
+              onValueChange={(v) => updateFormField(field.key, v)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder={field.placeholder || "선택해주세요"} />
+              </SelectTrigger>
+              <SelectContent>
+                {opts.map((o) => (
+                  <SelectItem key={o.code} value={o.code}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          );
+        }
+        case "date":
+          return (
+            <Input
+              type="date"
+              value={value ? String(value).split("T")[0] : ""}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              className="h-9 text-sm"
+            />
+          );
+        default:
+          return null;
+      }
+    },
+    [formData, editMode, carrierOptions, routeOptions, categoryOptions, updateFormField, activeConfig, numberingRuleId, previewCode]
+  );
+
+  // ========== 렌더링 ==========
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={activeConfig.tableName}
+        filterId="c16-logistics-info"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={activeTs.filterConfig}
+        dataCount={filteredData.length}
+      />
+
+      {/* 탭 + 콘텐츠 영역 */}
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border bg-card"
+      >
+        <TabsList className="h-auto w-full shrink-0 justify-start gap-0 rounded-none border-b bg-muted/30 p-0">
+          {TAB_CONFIGS.map((tab) => (
+            <TabsTrigger
+              key={tab.key}
+              value={tab.key}
+              className="flex items-center gap-1.5 rounded-none border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-muted-foreground data-[state=active]:border-primary data-[state=active]:font-semibold data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              {tab.icon}
+              {tab.label}
+              <Badge
+                variant="outline"
+                className="ml-1 h-5 min-w-[22px] justify-center px-1.5 font-mono text-[10px]"
+              >
+                {tabData[tab.key]?.length || 0}
+              </Badge>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {TAB_CONFIGS.map((tab) => {
+          const displayData = tab.key === activeTab ? filteredData : tabData[tab.key];
+          const isAllChecked =
+            tabData[tab.key].length > 0 &&
+            tabData[tab.key].every((r: any) => tabChecked[tab.key].includes(String(r.id)));
+
+          return (
+            <TabsContent
+              key={tab.key}
+              value={tab.key}
+              className="m-0 flex flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
+            >
+              {/* 액션 바 */}
+              <div className="flex shrink-0 items-center justify-between border-b px-3 py-2">
+                <div className="flex items-center gap-2">
+                  <h2 className="text-sm font-bold">{tab.label} 목록</h2>
+                  <Badge className="bg-primary/10 font-mono text-[11px] text-primary">
+                    {tab.key === activeTab ? displayData.length : tabData[tab.key]?.length || 0}건
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" className="h-8 text-xs" onClick={handleOpenAdd}>
+                    <Plus className="mr-1 h-3.5 w-3.5" />
+                    등록
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs"
+                    disabled={tabChecked[tab.key].length !== 1}
+                    onClick={() => {
+                      const row = tabData[tab.key].find(
+                        (r: any) => String(r.id) === tabChecked[tab.key][0]
+                      );
+                      if (row) handleOpenEdit(row);
+                    }}
+                  >
+                    <Pencil className="mr-1 h-3.5 w-3.5" />
+                    수정
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs text-destructive hover:bg-destructive/10"
+                    disabled={tabChecked[tab.key].length === 0}
+                    onClick={handleDelete}
+                  >
+                    <Trash2 className="mr-1 h-3.5 w-3.5" />
+                    삭제
+                  </Button>
+                  <div className="mx-1 h-5 w-px bg-border" />
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs"
+                    onClick={handleExcelDownload}
+                  >
+                    <Download className="mr-1 h-3.5 w-3.5" />
+                    엑셀
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => fetchTabData(tab.key)}
+                  >
+                    <RefreshCw
+                      className={cn(
+                        "h-3.5 w-3.5",
+                        tabLoading[tab.key] && "animate-spin"
+                      )}
+                    />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => activeTs.setOpen(true)}
+                  >
+                    <Settings2 className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 테이블 영역 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={getVisibleColumns(tab.key).map((col): EDataTableColumn => ({
+                    key: col.key,
+                    label: col.label,
+                    align: col.align,
+                    formatNumber: col.formatNumber,
+                    truncate: true,
+                  }))}
+                  data={tsMap[tab.key].groupData(displayData)}
+                  rowKey={(row: any) => String(row.id)}
+                  loading={tabLoading[tab.key]}
+                  emptyMessage={`등록된 ${tab.label} 정보가 없어요`}
+                  showCheckbox
+                  checkedIds={tabChecked[tab.key]}
+                  onCheckedChange={(ids) => setTabChecked((prev) => ({ ...prev, [tab.key]: ids }))}
+                  onRowDoubleClick={(row) => handleOpenEdit(row)}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
+              </div>
+            </TabsContent>
+          );
+        })}
+      </Tabs>
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={formOpen} onOpenChange={setFormOpen}>
+        <DialogContent className="flex max-h-[85vh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[680px]">
+          <DialogHeader className="shrink-0 border-b px-6 py-4">
+            <DialogTitle>
+              {activeConfig.label} {editMode ? "수정" : "등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {editMode
+                ? `${activeConfig.label} 정보를 수정해주세요.`
+                : `새 ${activeConfig.label} 정보를 입력해주세요.`}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto p-6">
+            <div className="grid grid-cols-2 gap-4">
+              {activeConfig.formFields.map((field) => (
+                <div key={field.key} className="flex flex-col gap-1.5">
+                  <Label className="text-xs font-semibold text-muted-foreground">
+                    {field.label}
+                    {field.required && (
+                      <span className="ml-0.5 text-destructive">*</span>
+                    )}
+                  </Label>
+                  {renderFormField(field)}
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="shrink-0 border-t">
+            <div className="flex items-center justify-end gap-2 px-6 py-3">
+              <Button variant="outline" onClick={() => setFormOpen(false)}>
+                취소
+              </Button>
+              <Button onClick={handleSave}>
+                {editMode ? "수정" : "등록"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={activeTs.open}
+        onOpenChange={activeTs.setOpen}
+        tableName={activeTs.tableName}
+        settingsId={activeTs.settingsId}
+        defaultVisibleKeys={activeTs.defaultVisibleKeys}
+        onSave={activeTs.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/logistics/inventory/page.tsx b/frontend/app/(main)/COMPANY_10/logistics/inventory/page.tsx
new file mode 100644
index 00000000..7d2a96c6
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/logistics/inventory/page.tsx
@@ -0,0 +1,738 @@
+"use client";
+
+/**
+ * 재고현황 — 하드코딩 페이지 (Type B 마스터-디테일)
+ *
+ * 좌측: 재고 목록 (inventory_stock, item_info JOIN)
+ * 우측: 선택 품목의 재고 이동 이력 (inventory_history)
+ *
+ * ★ 재고 직접 등록/삭제 불가 — 입출고를 통해서만 변동, 조정만 가능
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Package,
+  Loader2,
+  Download,
+  ClipboardEdit,
+  History,
+  AlertTriangle,
+  RefreshCw,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { toast } from "sonner";
+import { exportToExcel } from "@/lib/utils/excelExport";
+
+const STOCK_TABLE = "inventory_stock";
+
+const STOCK_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "warehouse_code", label: "창고" },
+  { key: "location_code", label: "위치" },
+  { key: "current_qty", label: "현재수량", align: "right" as const },
+  { key: "safety_qty", label: "안전재고", align: "right" as const },
+  { key: "unit", label: "단위" },
+  { key: "status", label: "상태" },
+];
+const HISTORY_TABLE = "inventory_history";
+
+const getStatusVariant = (
+  status: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "정상":
+      return "default";
+    case "부족":
+      return "destructive";
+    case "과잉":
+      return "secondary";
+    default:
+      return "outline";
+  }
+};
+
+const getHistoryTypeVariant = (
+  type: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (type) {
+    case "입고":
+      return "default";
+    case "출고":
+      return "secondary";
+    case "조정":
+      return "outline";
+    case "입고취소":
+    case "이동":
+      return "destructive";
+    default:
+      return "outline";
+  }
+};
+
+export default function InventoryStatusPage() {
+  const { user } = useAuth();
+  const ts = useTableSettings("c16-inventory", STOCK_TABLE, STOCK_COLUMNS);
+
+  // 좌측: 재고 목록
+  const [stockItems, setStockItems] = useState<any[]>([]);
+  const [stockLoading, setStockLoading] = useState(false);
+  const [selectedStockId, setSelectedStockId] = useState<string | null>(null);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 이동 이력
+  const [historyItems, setHistoryItems] = useState<any[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+
+  // 조정 모달
+  const [adjustModalOpen, setAdjustModalOpen] = useState(false);
+  const [adjustForm, setAdjustForm] = useState<{
+    adjust_type: string;
+    adjust_qty: string;
+    reason: string;
+  }>({ adjust_type: "증가", adjust_qty: "", reason: "" });
+  const [adjustSaving, setAdjustSaving] = useState(false);
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["status", "unit"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${STOCK_TABLE}/${col}/values`
+          );
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setCategoryOptions(optMap);
+    };
+    load();
+  }, []);
+
+  // 재고 목록 조회
+  const fetchStock = useCallback(async () => {
+    setStockLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const [stockRes, itemRes, whRes] = await Promise.all([
+        apiClient.post(`/table-management/tables/${STOCK_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+          autoFilter: true,
+          sort: { columnName: "item_code", order: "asc" },
+        }),
+        apiClient.post(`/table-management/tables/item_info/data`, { page: 1, size: 500, autoFilter: true }),
+        apiClient.post(`/table-management/tables/warehouse_info/data`, { page: 1, size: 500, autoFilter: true }),
+      ]);
+      const raw = stockRes.data?.data?.data || stockRes.data?.data?.rows || [];
+      const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+      const warehouses = whRes.data?.data?.data || whRes.data?.data?.rows || [];
+      const itemMap = new Map(items.map((i: any) => [i.item_number || i.item_code, { name: i.item_name || "", unit: i.unit || "" }]));
+      const whMap = new Map(warehouses.map((w: any) => [w.warehouse_code, w.warehouse_name || w.warehouse_code]));
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const itemInfo = itemMap.get(r.item_code) as any;
+        return {
+          ...r,
+          item_name: itemInfo?.name || "",
+          unit: itemInfo?.unit || resolve("unit", r.unit),
+          warehouse_name: whMap.get(r.warehouse_code) || r.warehouse_code || "",
+          status: resolve("status", r.status),
+          _isLow: r.safety_qty && Number(r.current_qty) < Number(r.safety_qty),
+        };
+      });
+      setStockItems(data);
+    } catch {
+      toast.error("재고 목록을 불러오지 못했어요");
+    } finally {
+      setStockLoading(false);
+    }
+  }, [categoryOptions, searchFilters]);
+
+  useEffect(() => {
+    fetchStock();
+  }, [fetchStock]);
+
+  // 선택된 재고
+  const selectedStock = stockItems.find((s) => s.id === selectedStockId);
+
+  // 이력 조회
+  const fetchHistory = useCallback(async () => {
+    if (!selectedStock?.item_code) {
+      setHistoryItems([]);
+      return;
+    }
+    setHistoryLoading(true);
+    try {
+      const historyFilters: any[] = [
+        {
+          columnName: "item_code",
+          operator: "equals",
+          value: selectedStock.item_code,
+        },
+      ];
+      if (selectedStock.warehouse_code) {
+        historyFilters.push({
+          columnName: "warehouse_code",
+          operator: "equals",
+          value: selectedStock.warehouse_code,
+        });
+      }
+      const res = await apiClient.post(
+        `/table-management/tables/${HISTORY_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: { enabled: true, filters: historyFilters },
+          autoFilter: true,
+          sort: { columnName: "transaction_date", order: "desc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setHistoryItems(raw);
+    } catch {
+      toast.error("재고 이력을 불러오지 못했어요");
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, [selectedStock?.item_code, selectedStock?.warehouse_code]);
+
+  useEffect(() => {
+    fetchHistory();
+  }, [fetchHistory]);
+
+  // 재고 조정 저장
+  const handleAdjustSave = async () => {
+    if (!selectedStock) return;
+    const qty = Number(adjustForm.adjust_qty);
+    if (!qty || qty <= 0) {
+      toast.error("조정 수량을 입력해주세요");
+      return;
+    }
+    if (!adjustForm.reason.trim()) {
+      toast.error("조정 사유를 입력해주세요");
+      return;
+    }
+    setAdjustSaving(true);
+    try {
+      const changeQty = adjustForm.adjust_type === "증가" ? qty : -qty;
+      const afterQty = Number(selectedStock.current_qty || 0) + changeQty;
+
+      await apiClient.post(
+        `/table-management/tables/${HISTORY_TABLE}/add`,
+        {
+          id: crypto.randomUUID(),
+          item_code: selectedStock.item_code,
+          warehouse_code: selectedStock.warehouse_code || "",
+          location_code: selectedStock.location_code || "",
+          transaction_type: "조정",
+          transaction_date: new Date().toISOString(),
+          quantity: String(changeQty),
+          balance_qty: String(afterQty),
+          remark: adjustForm.reason.trim(),
+        }
+      );
+
+      await apiClient.put(
+        `/table-management/tables/${STOCK_TABLE}/edit`,
+        {
+          originalData: { id: selectedStock.id },
+          updatedData: { current_qty: afterQty },
+        }
+      );
+
+      toast.success("재고가 조정되었어요");
+      setAdjustModalOpen(false);
+      setAdjustForm({ adjust_type: "증가", adjust_qty: "", reason: "" });
+      fetchStock();
+    } catch {
+      toast.error("재고 조정에 실패했어요");
+    } finally {
+      setAdjustSaving(false);
+    }
+  };
+
+  // EDataTable 컬럼 정의
+  const stockColumns: EDataTableColumn[] = ts.visibleColumns.map((col) => {
+    const base: EDataTableColumn = { key: col.key, label: col.label, align: col.align };
+    if (col.key === "current_qty") {
+      return {
+        ...base,
+        align: "right" as const,
+        render: (val: any, row: any) => (
+          <span className="font-mono">
+            <span className={cn(row._isLow && "text-destructive font-bold")}>
+              {Number(row.current_qty || 0).toLocaleString()}
+            </span>
+            {row._isLow && (
+              <AlertTriangle className="inline h-3 w-3 text-destructive ml-1" />
+            )}
+          </span>
+        ),
+      };
+    }
+    if (col.key === "safety_qty") {
+      return {
+        ...base,
+        align: "right" as const,
+        formatNumber: true,
+      };
+    }
+    if (col.key === "status") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getStatusVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    return base;
+  });
+
+  // 엑셀 내보내기
+  const handleExcelExport = () => {
+    if (stockItems.length === 0) {
+      toast.error("내보낼 데이터가 없어요");
+      return;
+    }
+    exportToExcel(
+      stockItems.map((r) => ({
+        품목코드: r.item_code,
+        품명: r.item_name,
+        창고: r.warehouse_name || r.warehouse_code,
+        위치: r.location_code,
+        현재수량: r.current_qty,
+        안전재고: r.safety_qty,
+        단위: r.unit,
+        상태: r.status,
+      })),
+      "재고현황"
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3">
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={STOCK_TABLE}
+        filterId="c16-inventory"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={stockItems.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1 text-xs"
+              onClick={handleExcelExport}
+            >
+              <Download className="h-3.5 w-3.5" />
+              엑셀
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 패널 */}
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="flex-1 rounded-lg border bg-card"
+      >
+        {/* 좌측: 재고 목록 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+              <div className="flex items-center gap-2">
+                <span className="text-[13px] font-bold">재고 목록</span>
+                <Badge variant="default" className="rounded-full text-[11px]">
+                  {stockItems.length}건
+                </Badge>
+              </div>
+            </div>
+
+            <EDataTable
+              columns={stockColumns}
+              data={ts.groupData(stockItems)}
+              rowKey={(row) => row.id}
+              loading={stockLoading}
+              emptyMessage="등록된 재고가 없어요"
+              selectedId={selectedStockId}
+              onSelect={(id) => setSelectedStockId(id)}
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+              columnOrderKey="c16-inventory"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 상세 이력 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex flex-col h-full">
+            {!selectedStock ? (
+              <div className="flex flex-col items-center justify-center flex-1 m-5 border-2 border-dashed rounded-lg border-border">
+                <Package className="h-12 w-12 text-muted-foreground/40 mb-4" />
+                <p className="text-sm font-semibold text-muted-foreground">
+                  품목을 선택해주세요
+                </p>
+                <p className="text-xs text-muted-foreground/70 mt-1">
+                  좌측에서 품목을 선택하면 재고 이력이 표시돼요
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                  <div className="flex items-center gap-2">
+                    <History className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-[13px] font-bold">
+                      {selectedStock.item_name || selectedStock.item_code}
+                    </span>
+                    <Badge
+                      variant="outline"
+                      className="rounded-full text-[11px] font-mono"
+                    >
+                      {selectedStock.item_code}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-1.5 text-xs">
+                      <span className="text-muted-foreground">현재:</span>
+                      <span
+                        className={cn(
+                          "font-bold font-mono",
+                          selectedStock._isLow
+                            ? "text-destructive"
+                            : "text-foreground"
+                        )}
+                      >
+                        {Number(selectedStock.current_qty || 0).toLocaleString()}
+                      </span>
+                      {selectedStock._isLow && (
+                        <AlertTriangle className="h-3.5 w-3.5 text-destructive" />
+                      )}
+                    </div>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={() => {
+                        setAdjustForm({
+                          adjust_type: "증가",
+                          adjust_qty: "",
+                          reason: "",
+                        });
+                        setAdjustModalOpen(true);
+                      }}
+                    >
+                      <ClipboardEdit className="h-3.5 w-3.5" />
+                      재고 조정
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 재고 요약 카드 */}
+                <div className="grid grid-cols-4 gap-2 px-4 py-3 border-b">
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">현재수량</span>
+                    <span className="text-sm font-bold font-mono">
+                      {Number(selectedStock.current_qty || 0).toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">안전재고</span>
+                    <span className="text-sm font-bold font-mono">
+                      {Number(selectedStock.safety_qty || 0).toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">창고</span>
+                    <span className="text-sm font-bold truncate max-w-full">
+                      {selectedStock.warehouse_name || "-"}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">상태</span>
+                    <Badge
+                      variant={getStatusVariant(selectedStock.status)}
+                      className="text-[10px] mt-0.5"
+                    >
+                      {selectedStock.status || "-"}
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* 이력 서브헤더 */}
+                <div className="flex items-center justify-between px-4 py-2 border-b">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-semibold text-muted-foreground">
+                      재고 이동 이력
+                    </span>
+                    <Badge variant="secondary" className="rounded-full text-[10px]">
+                      {historyItems.length}건
+                    </Badge>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={fetchHistory}
+                  >
+                    <RefreshCw className="h-3 w-3" />
+                    새로고침
+                  </Button>
+                </div>
+
+                {/* 이력 테이블 */}
+                <div className="flex-1 overflow-auto">
+                  {historyLoading ? (
+                    <div className="flex items-center justify-center h-20">
+                      <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : historyItems.length === 0 ? (
+                    <div className="flex items-center justify-center h-20 text-xs text-muted-foreground">
+                      재고 이동 이력이 없어요
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="w-8 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">일자</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                          <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">변동수량</TableHead>
+                          <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이후수량</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                          <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사유</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">처리자</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {historyItems.map((h, idx) => (
+                          <TableRow key={h.id || idx} className="text-xs">
+                            <TableCell className="text-center text-muted-foreground">
+                              {idx + 1}
+                            </TableCell>
+                            <TableCell className="font-mono">
+                              {h.transaction_date ? String(h.transaction_date).slice(0, 10) : h.history_date || ""}
+                            </TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getHistoryTypeVariant(h.transaction_type || h.history_type)}
+                                className="text-[10px]"
+                              >
+                                {h.transaction_type || h.history_type}
+                              </Badge>
+                            </TableCell>
+                            <TableCell
+                              className={cn(
+                                "text-right font-mono",
+                                Number(h.quantity ?? h.change_qty) > 0
+                                  ? "text-primary"
+                                  : "text-destructive"
+                              )}
+                            >
+                              {Number(h.quantity ?? h.change_qty) > 0 ? "+" : ""}
+                              {Number(h.quantity ?? h.change_qty ?? 0).toLocaleString()}
+                            </TableCell>
+                            <TableCell className="text-right font-mono">
+                              {Number(h.balance_qty ?? h.after_qty ?? 0).toLocaleString()}
+                            </TableCell>
+                            <TableCell className="font-mono truncate max-w-[120px]">
+                              {h.reference_number || h.reference_no || ""}
+                            </TableCell>
+                            <TableCell className="truncate max-w-[150px]">
+                              {h.remark || h.reason || ""}
+                            </TableCell>
+                            <TableCell>{h.writer || h.created_by || ""}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 재고 조정 Dialog */}
+      <Dialog open={adjustModalOpen} onOpenChange={setAdjustModalOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>재고 조정</DialogTitle>
+            <DialogDescription>
+              {selectedStock
+                ? `${selectedStock.item_name || selectedStock.item_code} — 현재 수량: ${Number(selectedStock.current_qty || 0).toLocaleString()}`
+                : ""}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-2">
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 유형
+              </Label>
+              <Select
+                value={adjustForm.adjust_type}
+                onValueChange={(v) =>
+                  setAdjustForm((prev) => ({ ...prev, adjust_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="조정 유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="증가">증가 (입고 보정)</SelectItem>
+                  <SelectItem value="감소">감소 (출고 보정)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 수량
+              </Label>
+              <Input
+                type="number"
+                min={1}
+                placeholder="수량을 입력해주세요"
+                value={adjustForm.adjust_qty}
+                onChange={(e) =>
+                  setAdjustForm((prev) => ({
+                    ...prev,
+                    adjust_qty: e.target.value,
+                  }))
+                }
+              />
+              {adjustForm.adjust_qty && selectedStock && (
+                <p className="text-xs text-muted-foreground">
+                  조정 후 수량:{" "}
+                  <span className="font-mono font-bold">
+                    {(
+                      Number(selectedStock.current_qty || 0) +
+                      (adjustForm.adjust_type === "증가" ? 1 : -1) *
+                        Number(adjustForm.adjust_qty || 0)
+                    ).toLocaleString()}
+                  </span>
+                </p>
+              )}
+            </div>
+
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 사유 *
+              </Label>
+              <Textarea
+                placeholder="조정 사유를 입력해주세요"
+                rows={3}
+                value={adjustForm.reason}
+                onChange={(e) =>
+                  setAdjustForm((prev) => ({
+                    ...prev,
+                    reason: e.target.value,
+                  }))
+                }
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setAdjustModalOpen(false)}
+            >
+              취소
+            </Button>
+            <Button onClick={handleAdjustSave} disabled={adjustSaving}>
+              {adjustSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              조정하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/logistics/material-status/page.tsx b/frontend/app/(main)/COMPANY_10/logistics/material-status/page.tsx
index 6a921ead..eb87ba92 100644
--- a/frontend/app/(main)/COMPANY_10/logistics/material-status/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/logistics/material-status/page.tsx
@@ -10,7 +10,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Card, CardContent } from "@/components/ui/card";
+// Card 제거 — rounded-lg border bg-card 패턴 사용
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -29,6 +29,8 @@ import {
   AlertTriangle,
   CheckCircle2,
   Loader2,
+  Inbox,
+  Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
@@ -39,6 +41,17 @@ import {
   type MaterialData,
   type WarehouseData,
 } from "@/lib/api/materialStatus";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+
+const GRID_COLUMNS = [
+  { key: "plan_no", label: "계획번호" },
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "plan_qty", label: "수량" },
+  { key: "plan_date", label: "일자" },
+  { key: "status", label: "상태" },
+];
 
 const formatDate = (date: Date) => {
   const y = date.getFullYear();
@@ -60,16 +73,17 @@ const getStatusLabel = (status: string) => {
 
 const getStatusStyle = (status: string) => {
   const map: Record<string, string> = {
-    planned: "bg-amber-100 text-amber-700 border-amber-200",
-    pending: "bg-amber-100 text-amber-700 border-amber-200",
-    in_progress: "bg-blue-100 text-blue-700 border-blue-200",
-    completed: "bg-emerald-100 text-emerald-700 border-emerald-200",
-    cancelled: "bg-gray-100 text-gray-500 border-gray-200",
+    planned: "bg-secondary text-secondary-foreground border-border",
+    pending: "bg-secondary text-secondary-foreground border-border",
+    in_progress: "bg-primary/10 text-primary border-primary/20",
+    completed: "bg-accent text-accent-foreground border-accent/50",
+    cancelled: "bg-muted text-muted-foreground border-border",
   };
-  return map[status] || "bg-gray-100 text-gray-500 border-gray-200";
+  return map[status] || "bg-muted text-muted-foreground border-border";
 };
 
 export default function MaterialStatusPage() {
+  const ts = useTableSettings("c16-material-status", "work_instruction", GRID_COLUMNS);
   const today = new Date();
   const monthAgo = new Date(today);
   monthAgo.setMonth(today.getMonth() - 1);
@@ -193,33 +207,19 @@ export default function MaterialStatusPage() {
   }, [materials, materialSearch, showShortageOnly]);
 
   return (
-    <div className="flex h-[calc(100vh-4rem)] flex-col gap-4 bg-muted/30 p-4">
-      {/* 헤더 */}
-      <div className="shrink-0">
-        <div className="flex items-center gap-3">
-          <Package className="h-7 w-7 text-primary" />
-          <div>
-            <h1 className="text-2xl font-bold">자재현황</h1>
-            <p className="text-sm text-muted-foreground">
-              작업지시 대비 원자재 재고 현황
-            </p>
-          </div>
-        </div>
-      </div>
-
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
       {/* 검색 영역 */}
-      <Card className="shrink-0">
-        <CardContent className="flex flex-wrap items-end gap-3 p-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">기간</Label>
-            <div className="flex items-center gap-2">
+      <div className="shrink-0 flex flex-wrap items-end gap-3 rounded-lg border bg-card p-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">기간</span>
+            <div className="flex items-center gap-1.5">
               <Input
                 type="date"
                 className="h-9 w-[140px]"
                 value={searchDateFrom}
                 onChange={(e) => setSearchDateFrom(e.target.value)}
               />
-              <span className="text-muted-foreground">~</span>
+              <span className="text-muted-foreground/50 text-xs">~</span>
               <Input
                 type="date"
                 className="h-9 w-[140px]"
@@ -229,8 +229,8 @@ export default function MaterialStatusPage() {
             </div>
           </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">품목코드</Label>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목코드</span>
             <Input
               placeholder="품목코드"
               className="h-9 w-[140px]"
@@ -239,8 +239,8 @@ export default function MaterialStatusPage() {
             />
           </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">품목명</Label>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목명</span>
             <Input
               placeholder="품목명"
               className="h-9 w-[140px]"
@@ -251,14 +251,14 @@ export default function MaterialStatusPage() {
 
           <div className="flex-1" />
 
-          <div className="flex items-center gap-2">
+          <div className="flex items-end gap-2">
             <Button
               variant="outline"
               size="sm"
               className="h-9"
               onClick={handleResetSearch}
             >
-              <RotateCcw className="mr-2 h-4 w-4" />
+              <RotateCcw className="mr-1 h-4 w-4" />
               초기화
             </Button>
             <Button
@@ -268,24 +268,23 @@ export default function MaterialStatusPage() {
               disabled={workOrdersLoading}
             >
               {workOrdersLoading ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                <Loader2 className="mr-1 h-4 w-4 animate-spin" />
               ) : (
-                <Search className="mr-2 h-4 w-4" />
+                <Search className="mr-1 h-4 w-4" />
               )}
               검색
             </Button>
           </div>
-        </CardContent>
-      </Card>
+      </div>
 
       {/* 메인 콘텐츠 (좌우 분할) */}
-      <div className="flex-1 overflow-hidden rounded-lg border bg-background shadow-sm">
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
         <ResizablePanelGroup direction="horizontal">
           {/* 왼쪽: 작업지시 리스트 */}
           <ResizablePanel defaultSize={35} minSize={25}>
             <div className="flex h-full flex-col">
               {/* 패널 헤더 */}
-              <div className="flex items-center justify-between border-b bg-muted/10 p-3 shrink-0">
+              <div className="flex items-center justify-between border-b bg-muted/30 px-3 py-2.5 shrink-0">
                 <div className="flex items-center gap-2">
                   <Checkbox
                     checked={isAllChecked}
@@ -295,9 +294,9 @@ export default function MaterialStatusPage() {
                   <span className="text-sm font-semibold">작업지시 리스트</span>
                 </div>
                 <div className="flex items-center gap-2">
-                  <Badge variant="secondary" className="font-normal">
-                    {workOrders.length}
-                  </Badge>
+                  <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                    {workOrders.length}건
+                  </span>
                   <Button
                     size="sm"
                     className="h-8"
@@ -311,6 +310,9 @@ export default function MaterialStatusPage() {
                     )}
                     자재조회
                   </Button>
+                  <Button variant="ghost" size="sm" className="h-8" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="h-4 w-4" />
+                  </Button>
                 </div>
               </div>
 
@@ -320,80 +322,101 @@ export default function MaterialStatusPage() {
                   <div className="flex flex-col items-center justify-center py-12 text-center">
                     <Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
                     <p className="text-sm text-muted-foreground">
-                      작업지시를 조회하고 있습니다...
+                      작업지시를 조회하고 있어요...
                     </p>
                   </div>
                 ) : workOrders.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center py-12 text-center">
-                    <ClipboardList className="mb-3 h-10 w-10 text-muted-foreground/30" />
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Inbox className="h-10 w-10 text-muted-foreground/30" />
                     <p className="text-sm text-muted-foreground">
-                      작업지시가 없습니다
+                      조회된 작업지시가 없어요
                     </p>
                   </div>
                 ) : (
-                  workOrders.map((wo) => (
-                    <div
-                      key={wo.id}
-                      className={cn(
-                        "flex gap-3 rounded-lg border-2 p-3 transition-all cursor-pointer",
-                        "hover:border-primary hover:shadow-md hover:-translate-y-0.5",
-                        selectedWoId === wo.id
-                          ? "border-primary bg-primary/5 shadow-md"
-                          : "border-border"
-                      )}
-                      onClick={() => handleSelectWo(wo.id)}
-                    >
+                  ts.groupData(workOrders).map((wo) => {
+                    if ((wo as any)._isGroupSummary || (wo as any)._isGroupHeader) return null;
+                    return (
                       <div
-                        className="flex items-start pt-0.5"
-                        onClick={(e) => e.stopPropagation()}
+                        key={wo.id}
+                        className={cn(
+                          "flex gap-3 rounded-lg border p-3 transition-all cursor-pointer",
+                          "hover:border-primary/50 hover:shadow-sm",
+                          selectedWoId === wo.id
+                            ? "border-primary bg-primary/5 shadow-sm"
+                            : "border-border"
+                        )}
+                        onClick={() => handleSelectWo(wo.id)}
                       >
-                        <Checkbox
-                          checked={checkedWoIds.includes(wo.id)}
-                          onCheckedChange={(c) =>
-                            handleCheckWo(wo.id, c as boolean)
-                          }
-                        />
-                      </div>
-                      <div className="flex flex-1 flex-col gap-1.5">
-                        <div className="flex items-center gap-2">
-                          <span className="text-sm font-bold text-primary">
-                            {wo.plan_no || wo.work_order_no || `WO-${wo.id}`}
-                          </span>
-                          <span
-                            className={cn(
-                              "ml-auto rounded-md border px-2 py-0.5 text-[11px] font-semibold",
-                              getStatusStyle(wo.status)
+                        <div
+                          className="flex items-start pt-0.5"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Checkbox
+                            checked={checkedWoIds.includes(wo.id)}
+                            onCheckedChange={(c) =>
+                              handleCheckWo(wo.id, c as boolean)
+                            }
+                          />
+                        </div>
+                        <div className="flex flex-1 flex-col gap-1.5">
+                          <div className="flex items-center gap-2">
+                            {ts.isVisible("plan_no") && (
+                              <span className="text-sm font-bold text-primary">
+                                {wo.plan_no || wo.work_order_no || `WO-${wo.id}`}
+                              </span>
                             )}
-                          >
-                            {getStatusLabel(wo.status)}
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-1.5">
-                          <span className="text-sm font-semibold">
-                            {wo.item_name}
-                          </span>
-                          <span className="text-xs text-muted-foreground">
-                            ({wo.item_code})
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                          <span>수량:</span>
-                          <span className="font-semibold text-foreground">
-                            {Number(wo.plan_qty).toLocaleString()}개
-                          </span>
-                          <span className="mx-1">|</span>
-                          <span>일자:</span>
-                          <span className="font-semibold text-foreground">
-                            {wo.plan_date
-                              ? new Date(wo.plan_date)
-                                  .toISOString()
-                                  .slice(0, 10)
-                              : "-"}
-                          </span>
+                            {ts.isVisible("status") && (
+                              <span
+                                className={cn(
+                                  "ml-auto rounded-md border px-2 py-0.5 text-[11px] font-semibold",
+                                  getStatusStyle(wo.status)
+                                )}
+                              >
+                                {getStatusLabel(wo.status)}
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1.5">
+                            {ts.isVisible("item_name") && (
+                              <span className="text-sm font-semibold">
+                                {wo.item_name}
+                              </span>
+                            )}
+                            {ts.isVisible("item_code") && (
+                              <span className="text-xs text-muted-foreground">
+                                ({wo.item_code})
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                            {ts.isVisible("plan_qty") && (
+                              <>
+                                <span>수량:</span>
+                                <span className="font-semibold text-foreground">
+                                  {Number(wo.plan_qty).toLocaleString()}개
+                                </span>
+                              </>
+                            )}
+                            {ts.isVisible("plan_qty") && ts.isVisible("plan_date") && (
+                              <span className="mx-1">|</span>
+                            )}
+                            {ts.isVisible("plan_date") && (
+                              <>
+                                <span>일자:</span>
+                                <span className="font-semibold text-foreground">
+                                  {wo.plan_date
+                                    ? new Date(wo.plan_date)
+                                        .toISOString()
+                                        .slice(0, 10)
+                                    : "-"}
+                                </span>
+                              </>
+                            )}
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  ))
+                    );
+                  })
                 )}
               </div>
             </div>
@@ -405,21 +428,21 @@ export default function MaterialStatusPage() {
           <ResizablePanel defaultSize={65} minSize={35}>
             <div className="flex h-full flex-col">
               {/* 패널 헤더 */}
-              <div className="flex items-center gap-2 border-b bg-muted/10 p-3 shrink-0">
+              <div className="flex items-center gap-2 border-b bg-muted/30 px-3 py-2.5 shrink-0">
                 <Factory className="h-4 w-4 text-muted-foreground" />
                 <span className="text-sm font-semibold">원자재 재고 현황</span>
               </div>
 
               {/* 필터 */}
-              <div className="flex flex-wrap items-center gap-3 border-b bg-muted/5 px-4 py-3 shrink-0">
+              <div className="flex flex-wrap items-center gap-3 border-b bg-muted/30 px-4 py-2.5 shrink-0">
                 <Input
                   placeholder="원자재 검색"
-                  className="h-9 min-w-[150px] flex-1"
+                  className="h-8 min-w-[150px] flex-1 text-xs"
                   value={materialSearch}
                   onChange={(e) => setMaterialSearch(e.target.value)}
                 />
                 <Select value={warehouse} onValueChange={setWarehouse}>
-                  <SelectTrigger className="h-9 w-[200px]">
+                  <SelectTrigger className="h-8 w-[180px] text-xs">
                     <SelectValue placeholder="전체 창고" />
                   </SelectTrigger>
                   <SelectContent>
@@ -437,14 +460,14 @@ export default function MaterialStatusPage() {
                     ))}
                   </SelectContent>
                 </Select>
-                <label className="flex cursor-pointer items-center gap-2 text-sm font-medium">
+                <label className="flex cursor-pointer items-center gap-2 text-xs font-medium">
                   <Checkbox
                     checked={showShortageOnly}
                     onCheckedChange={(c) => setShowShortageOnly(c as boolean)}
                   />
                   <span>부족한 것만 보기</span>
                 </label>
-                <span className="ml-auto text-sm font-semibold text-muted-foreground">
+                <span className="ml-auto rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
                   {filteredMaterials.length}개 품목
                 </span>
               </div>
@@ -455,21 +478,21 @@ export default function MaterialStatusPage() {
                   <div className="flex flex-col items-center justify-center py-12 text-center">
                     <Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
                     <p className="text-sm text-muted-foreground">
-                      자재현황을 조회하고 있습니다...
+                      자재현황을 조회하고 있어요...
                     </p>
                   </div>
                 ) : materials.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center py-12 text-center">
-                    <Package className="mb-3 h-10 w-10 text-muted-foreground/30" />
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Inbox className="h-10 w-10 text-muted-foreground/30" />
                     <p className="text-sm text-muted-foreground">
                       작업지시를 선택하고 자재조회 버튼을 클릭해주세요
                     </p>
                   </div>
                 ) : filteredMaterials.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center py-12 text-center">
-                    <Package className="mb-3 h-10 w-10 text-muted-foreground/30" />
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Package className="h-10 w-10 text-muted-foreground/30" />
                     <p className="text-sm text-muted-foreground">
-                      조회된 원자재가 없습니다
+                      조회된 원자재가 없어요
                     </p>
                   </div>
                 ) : (
@@ -488,10 +511,10 @@ export default function MaterialStatusPage() {
                       <div
                         key={material.code}
                         className={cn(
-                          "rounded-lg border-2 p-3 transition-all hover:shadow-md hover:-translate-y-0.5",
+                          "rounded-lg border p-3 transition-all hover:shadow-sm",
                           isShortage
-                            ? "border-destructive/40 bg-destructive/2"
-                            : "border-emerald-300/50 bg-emerald-50/20"
+                            ? "border-destructive/30 bg-destructive/5"
+                            : "border-primary/15 bg-primary/5"
                         )}
                       >
                         {/* 메인 정보 라인 */}
@@ -508,7 +531,7 @@ export default function MaterialStatusPage() {
                           <span className="text-xs text-muted-foreground">
                             필요:
                           </span>
-                          <span className="text-xs font-semibold text-blue-600">
+                          <span className="text-xs font-semibold text-primary">
                             {material.required.toLocaleString()}
                             {material.unit}
                           </span>
@@ -540,7 +563,7 @@ export default function MaterialStatusPage() {
                               "text-xs font-semibold",
                               isShortage
                                 ? "text-destructive"
-                                : "text-emerald-600"
+                                : "text-primary"
                             )}
                           >
                             {Math.abs(shortage).toLocaleString()}
@@ -556,7 +579,7 @@ export default function MaterialStatusPage() {
                               부족
                             </span>
                           ) : (
-                            <span className="ml-auto inline-flex items-center gap-1 rounded-md border border-emerald-500 bg-emerald-500/10 px-2 py-0.5 text-[11px] font-semibold text-emerald-600">
+                            <span className="ml-auto inline-flex items-center gap-1 rounded-md border border-primary bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary">
                               <CheckCircle2 className="h-3 w-3" />
                               충분
                             </span>
@@ -592,6 +615,15 @@ export default function MaterialStatusPage() {
           </ResizablePanel>
         </ResizablePanelGroup>
       </div>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_10/logistics/outbound/page.tsx b/frontend/app/(main)/COMPANY_10/logistics/outbound/page.tsx
index b834b76a..c1ffbd40 100644
--- a/frontend/app/(main)/COMPANY_10/logistics/outbound/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/logistics/outbound/page.tsx
@@ -18,7 +18,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -31,23 +31,37 @@ import {
   Search,
   Plus,
   Trash2,
-  RotateCcw,
   Loader2,
   PackageOpen,
   X,
   Save,
   ChevronRight,
   ChevronLeft,
+  ChevronDown,
   ChevronsLeft,
   ChevronsRight,
+  Inbox,
+  Settings2,
+  Filter,
+  Check,
+  ArrowUp,
+  ArrowDown,
 } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+// API: /outbound/*
 import {
   getOutboundList,
   createOutbound,
+  updateOutbound,
   deleteOutbound,
   generateOutboundNumber,
   getOutboundWarehouses,
+  getOutboundLocations,
   getShipmentInstructionSources,
   getPurchaseOrderSources,
   getItemSources,
@@ -55,25 +69,26 @@ import {
   type ShipmentInstructionSource,
   type PurchaseOrderSource,
   type ItemSource,
+  type LocationOption,
   type WarehouseOption,
 } from "@/lib/api/outbound";
 
 // 출고유형 옵션
 const OUTBOUND_TYPES = [
-  { value: "판매출고", label: "판매출고", color: "bg-blue-100 text-blue-800" },
-  { value: "반품출고", label: "반품출고", color: "bg-pink-100 text-pink-800" },
-  { value: "기타출고", label: "기타출고", color: "bg-gray-100 text-gray-800" },
+  { value: "판매출고", label: "판매출고", color: "bg-primary/10 text-primary" },
+  { value: "반품출고", label: "반품출고", color: "bg-destructive/10 text-destructive" },
+  { value: "기타출고", label: "기타출고", color: "bg-muted text-muted-foreground" },
 ];
 
 const OUTBOUND_STATUS_OPTIONS = [
-  { value: "대기", label: "대기", color: "bg-amber-100 text-amber-800" },
-  { value: "출고완료", label: "출고완료", color: "bg-emerald-100 text-emerald-800" },
-  { value: "부분출고", label: "부분출고", color: "bg-amber-100 text-amber-800" },
-  { value: "출고취소", label: "출고취소", color: "bg-red-100 text-red-800" },
+  { value: "대기", label: "대기", color: "bg-secondary text-secondary-foreground" },
+  { value: "출고완료", label: "출고완료", color: "bg-primary/10 text-primary" },
+  { value: "부분출고", label: "부분출고", color: "bg-accent text-accent-foreground" },
+  { value: "출고취소", label: "출고취소", color: "bg-destructive/10 text-destructive" },
 ];
 
-const getTypeColor = (type: string) => OUTBOUND_TYPES.find((t) => t.value === type)?.color || "bg-gray-100 text-gray-800";
-const getStatusColor = (status: string) => OUTBOUND_STATUS_OPTIONS.find((s) => s.value === status)?.color || "bg-gray-100 text-gray-800";
+const getTypeColor = (type: string) => OUTBOUND_TYPES.find((t) => t.value === type)?.color || "bg-muted text-muted-foreground";
+const getStatusColor = (status: string) => OUTBOUND_STATUS_OPTIONS.find((s) => s.value === status)?.color || "bg-muted text-muted-foreground";
 
 // 소스 테이블 한글명 매핑
 const SOURCE_TYPE_LABEL: Record<string, string> = {
@@ -82,6 +97,144 @@ const SOURCE_TYPE_LABEL: Record<string, string> = {
   item_info: "품목",
 };
 
+const GRID_COLUMNS = [
+  { key: "outbound_number", label: "출고번호" },
+  { key: "outbound_type", label: "출고유형" },
+  { key: "outbound_date", label: "출고일" },
+  { key: "reference_number", label: "참조번호" },
+  { key: "source_type", label: "데이터출처" },
+  { key: "customer_name", label: "거래처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "outbound_qty", label: "출고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+  { key: "warehouse_name", label: "창고" },
+  { key: "outbound_status", label: "출고상태" },
+  { key: "remark", label: "비고" },
+];
+
+// 마스터 헤더 레이아웃 (출고번호 뒤)
+const MASTER_BODY_LAYOUT = [
+  { key: "outbound_type", label: "출고유형", colSpan: 1 },
+  { key: "outbound_date", label: "출고일", colSpan: 1 },
+  { key: "reference_number", label: "참조번호", colSpan: 1 },
+  { key: "customer_name", label: "거래처", colSpan: 1 },
+  { key: "warehouse_name", label: "창고", colSpan: 1 },
+  { key: "outbound_status", label: "출고상태", colSpan: 1 },
+  { key: "memo", label: "비고", colSpan: 1 },
+];
+
+// 디테일 헤더 컬럼
+const DETAIL_HEADER_COLS = [
+  { key: "source_type", label: "출처" },
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "specification", label: "규격" },
+  { key: "outbound_qty", label: "출고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+];
+
+// 마스터 필드 키 목록 (필터 분류용)
+const MASTER_KEYS = new Set(["outbound_number", ...MASTER_BODY_LAYOUT.map((c) => c.key)]);
+
+// 디테일 필드 키 매핑 (GRID_COLUMNS key → DETAIL_HEADER_COLS key)
+const DETAIL_KEY_MAP: Record<string, string> = {
+  source_type: "source_type",
+  item_number: "item_code",
+  item_name: "item_name",
+  spec: "specification",
+  outbound_qty: "outbound_qty",
+  unit_price: "unit_price",
+  total_amount: "total_amount",
+};
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 // 선택된 소스 아이템 (등록 모달에서 사용)
 interface SelectedSourceItem {
   key: string;
@@ -102,17 +255,45 @@ interface SelectedSourceItem {
 }
 
 export default function OutboundPage() {
+  const ts = useTableSettings("c16-outbound", "outbound_mng", GRID_COLUMNS);
+
+  // ts.visibleColumns 기반 마스터/디테일 컬럼 계산
+  const visibleMasterLayout = useMemo(() => {
+    const ordered: typeof MASTER_BODY_LAYOUT = [];
+    for (const vc of ts.visibleColumns) {
+      const m = MASTER_BODY_LAYOUT.find((ml) => ml.key === vc.key);
+      if (m) ordered.push(m);
+    }
+    return ordered.length > 0 ? ordered : MASTER_BODY_LAYOUT;
+  }, [ts.visibleColumns]);
+
+  const visibleDetailCols = useMemo(() => {
+    const ordered: typeof DETAIL_HEADER_COLS = [];
+    for (const vc of ts.visibleColumns) {
+      const detailKey = DETAIL_KEY_MAP[vc.key];
+      if (detailKey) {
+        const d = DETAIL_HEADER_COLS.find((dc) => dc.key === detailKey);
+        if (d) ordered.push(d);
+      }
+    }
+    return ordered.length > 0 ? ordered : DETAIL_HEADER_COLS;
+  }, [ts.visibleColumns]);
+
+  const TOTAL_COLS = 3 + visibleMasterLayout.length;
+
   // 목록 데이터
   const [data, setData] = useState<OutboundItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [checkedIds, setCheckedIds] = useState<string[]>([]);
 
   // 검색 필터
-  const [searchType, setSearchType] = useState("all");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 마스터-디테일 그룹 테이블 state
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+  const [closingOrders, setClosingOrders] = useState<Set<string>>(new Set());
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
 
   // 등록 모달
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -126,6 +307,10 @@ export default function OutboundPage() {
   const [selectedItems, setSelectedItems] = useState<SelectedSourceItem[]>([]);
   const [saving, setSaving] = useState(false);
 
+  // 수정 모드 (등록 모달을 재활용)
+  const [editMode, setEditMode] = useState(false);
+  const [editItemIds, setEditItemIds] = useState<string[]>([]);
+
   // 소스 데이터
   const [sourceKeyword, setSourceKeyword] = useState("");
   const [sourceLoading, setSourceLoading] = useState(false);
@@ -133,38 +318,37 @@ export default function OutboundPage() {
   const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrderSource[]>([]);
   const [items, setItems] = useState<ItemSource[]>([]);
   const [warehouses, setWarehouses] = useState<WarehouseOption[]>([]);
+  const [locations, setLocations] = useState<LocationOption[]>([]);
 
   // 소스 데이터 페이징 (클라이언트 사이드)
   const [sourcePage, setSourcePage] = useState(1);
   const [sourcePageSize, setSourcePageSize] = useState(20);
 
-  // 날짜 초기화
-  useEffect(() => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-  }, []);
-
   // 목록 조회
   const fetchList = useCallback(async () => {
     setLoading(true);
     try {
-      const res = await getOutboundList({
-        outbound_type: searchType !== "all" ? searchType : undefined,
-        outbound_status: searchStatus !== "all" ? searchStatus : undefined,
-        search_keyword: searchKeyword || undefined,
-        date_from: searchDateFrom || undefined,
-        date_to: searchDateTo || undefined,
-      });
+      const params: Record<string, string | undefined> = {};
+      for (const f of searchFilters) {
+        if (!f.value) continue;
+        if (f.columnName === "outbound_type") params.outbound_type = f.value;
+        else if (f.columnName === "outbound_status") params.outbound_status = f.value;
+        else if (f.columnName === "outbound_date" && f.operator === "between") {
+          const [from, to] = f.value.split("~").map((s) => s.trim());
+          if (from) params.date_from = from;
+          if (to) params.date_to = to;
+        } else {
+          params.search_keyword = f.value;
+        }
+      }
+      const res = await getOutboundList(params);
       if (res.success) setData(res.data);
     } catch {
       // ignore
     } finally {
       setLoading(false);
     }
-  }, [searchType, searchStatus, searchKeyword, searchDateFrom, searchDateTo]);
+  }, [searchFilters]);
 
   useEffect(() => {
     fetchList();
@@ -182,26 +366,146 @@ export default function OutboundPage() {
     })();
   }, []);
 
-  // 검색 초기화
-  const handleReset = () => {
-    setSearchType("all");
-    setSearchStatus("all");
-    setSearchKeyword("");
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
+  // --- 마스터-디테일 그룹핑, 필터, 정렬 ---
+
+  // outbound_number 기준 그룹핑 + 필터 + 정렬
+  const filteredGroups = useMemo(() => {
+    // 1차: outbound_number 기준 그룹핑
+    const allGroups: Record<string, { master: OutboundItem; details: OutboundItem[] }> = {};
+    for (const row of data) {
+      const key = row.outbound_number || "_no_number";
+      if (!allGroups[key]) {
+        allGroups[key] = { master: row, details: [] };
+      }
+      allGroups[key].details.push(row);
+    }
+
+    // 마스터 필터 / 디테일 필터 분리
+    const masterFilters: Record<string, Set<string>> = {};
+    const detailFilters: Record<string, Set<string>> = {};
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      if (MASTER_KEYS.has(colKey)) masterFilters[colKey] = values;
+      else detailFilters[colKey] = values;
+    }
+
+    // 2차: 마스터 필터 적용 (그룹 단위)
+    let entries = Object.entries(allGroups);
+    if (Object.keys(masterFilters).length > 0) {
+      entries = entries.filter(([, group]) =>
+        Object.entries(masterFilters).every(([colKey, values]) => {
+          const raw = (group.master as any)?.[colKey] ?? "";
+          return values.has(String(raw));
+        })
+      );
+    }
+
+    // 3차: 디테일 필터 적용 (행 단위)
+    if (Object.keys(detailFilters).length > 0) {
+      entries = entries
+        .map(([outNo, group]) => {
+          const filtered = group.details.filter((row) =>
+            Object.entries(detailFilters).every(([colKey, values]) => {
+              let cellVal = (row as any)[colKey] != null ? String((row as any)[colKey]) : "";
+              if (colKey === "source_type") cellVal = SOURCE_TYPE_LABEL[cellVal] || cellVal;
+              return values.has(cellVal);
+            })
+          );
+          return [outNo, { ...group, details: filtered }] as [string, typeof group];
+        })
+        .filter(([, group]) => group.details.length > 0);
+    }
+
+    // 4차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      if (MASTER_KEYS.has(key)) {
+        entries.sort(([, a], [, b]) => {
+          const av = (a.master as any)?.[key] ?? "";
+          const bv = (b.master as any)?.[key] ?? "";
+          const na = Number(av); const nb = Number(bv);
+          if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+          return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+        });
+      } else {
+        entries.forEach(([, group]) => {
+          group.details.sort((a, b) => {
+            let av: any = (a as any)[key] ?? "";
+            let bv: any = (b as any)[key] ?? "";
+            if (key === "source_type") { av = SOURCE_TYPE_LABEL[av] || av; bv = SOURCE_TYPE_LABEL[bv] || bv; }
+            const na = Number(av); const nb = Number(bv);
+            if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+            return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+          });
+        });
+      }
+    }
+
+    return Object.fromEntries(entries);
+  }, [data, headerFilters, sortState]);
+
+  // 마스터 컬럼별 고유값 (헤더 필터용)
+  const masterUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    const seenMasters = new Map<string, OutboundItem>();
+    data.forEach((row) => {
+      if (row.outbound_number && !seenMasters.has(row.outbound_number)) {
+        seenMasters.set(row.outbound_number, row);
+      }
+    });
+    const masters = Array.from(seenMasters.values());
+    for (const col of [{ key: "outbound_number", label: "출고번호" }, ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label }))]) {
+      const values = new Set<string>();
+      masters.forEach((m) => {
+        const val = (m as any)?.[col.key];
+        if (val !== null && val !== undefined && val !== "") values.add(String(val));
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 디테일 컬럼별 고유값 (디테일 서브헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of DETAIL_HEADER_COLS) {
+      const values = new Set<string>();
+      data.forEach((row) => {
+        let val = (row as any)[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "source_type") val = SOURCE_TYPE_LABEL[val] || val;
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
   };
 
-  // 체크박스
-  const allChecked = data.length > 0 && checkedIds.length === data.length;
-  const toggleCheckAll = () => {
-    setCheckedIds(allChecked ? [] : data.map((d) => d.id));
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
   };
-  const toggleCheck = (id: string) => {
-    setCheckedIds((prev) =>
-      prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
     );
   };
 
@@ -243,6 +547,8 @@ export default function OutboundPage() {
 
   const openRegisterModal = async () => {
     const defaultType = "판매출고";
+    setEditMode(false);
+    setEditItemIds([]);
     setModalOutboundType(defaultType);
     setModalOutboundDate(new Date().toISOString().split("T")[0]);
     setModalWarehouse("");
@@ -267,6 +573,45 @@ export default function OutboundPage() {
     }
   };
 
+  // 수정 모달 열기 (같은 출고번호 묶어서)
+  const openEditModal = (row: OutboundItem) => {
+    const outNo = row.outbound_number;
+    const grouped = data.filter((d) => d.outbound_number === outNo);
+    const first = grouped[0] || row;
+
+    setEditMode(true);
+    setEditItemIds(grouped.map((g) => g.id));
+    setModalOutboundNo(outNo);
+    setModalOutboundType(first.outbound_type || "판매출고");
+    setModalOutboundDate(first.outbound_date ? first.outbound_date.slice(0, 10) : "");
+    setModalWarehouse(first.warehouse_code || "");
+    setModalLocation(first.location_code || "");
+    setModalManager(first.manager_id || "");
+    setModalMemo(first.memo || "");
+    setSelectedItems(
+      grouped.map((g) => ({
+        key: g.id,
+        outbound_type: g.outbound_type || "",
+        reference_number: g.reference_number || "",
+        customer_code: g.customer_code || "",
+        customer_name: g.customer_name || "",
+        item_number: g.item_code || "",
+        item_name: g.item_name || "",
+        spec: g.specification || "",
+        material: g.material || "",
+        unit: g.unit || "",
+        outbound_qty: Number(g.outbound_qty) || 0,
+        unit_price: Number(g.unit_price) || 0,
+        total_amount: Number(g.total_amount) || 0,
+        source_type: g.source_type || "",
+        source_id: (g as any).source_id || "",
+      }))
+    );
+    setSourceKeyword("");
+    setIsModalOpen(true);
+    loadSourceData(first.outbound_type || "판매출고");
+  };
+
   const searchSourceData = useCallback(async () => {
     setSourcePage(1);
     await loadSourceData(modalOutboundType, sourceKeyword || undefined);
@@ -439,44 +784,102 @@ export default function OutboundPage() {
 
     setSaving(true);
     try {
-      const res = await createOutbound({
-        outbound_number: modalOutboundNo,
-        outbound_date: modalOutboundDate,
-        warehouse_code: modalWarehouse || undefined,
-        location_code: modalLocation || undefined,
-        manager_id: modalManager || undefined,
-        memo: modalMemo || undefined,
-        items: selectedItems.map((item) => ({
-          outbound_type: item.outbound_type,
-          reference_number: item.reference_number,
-          customer_code: item.customer_code,
-          customer_name: item.customer_name,
-          item_code: item.item_number,
-          item_name: item.item_name,
-          spec: item.spec,
-          material: item.material,
-          unit: item.unit,
-          outbound_qty: item.outbound_qty,
-          unit_price: item.unit_price,
-          total_amount: item.total_amount,
-          source_type: item.source_type,
-          source_id: item.source_id,
-          outbound_status: "출고완료",
-        })),
-      });
+      if (editMode) {
+        const currentKeys = new Set(selectedItems.map((i) => i.key));
+        // 삭제: editItemIds에 있지만 selectedItems에 없는 것
+        const toDelete = editItemIds.filter((id) => !currentKeys.has(id));
+        // 수정: editItemIds에도 있고 selectedItems에도 있는 것
+        const toUpdate = selectedItems.filter((i) => editItemIds.includes(i.key));
+        // 추가: editItemIds에 없는 새 아이템
+        const toCreate = selectedItems.filter((i) => !editItemIds.includes(i.key));
 
-      if (res.success) {
-        alert(res.message || "출고 등록 완료");
+        await Promise.all([
+          ...toDelete.map((id) => deleteOutbound(id)),
+          ...toUpdate.map((item) =>
+            updateOutbound(item.key, {
+              outbound_date: modalOutboundDate,
+              outbound_qty: item.outbound_qty,
+              unit_price: item.unit_price,
+              total_amount: item.total_amount,
+              warehouse_code: modalWarehouse || undefined,
+              location_code: modalLocation || undefined,
+              manager_id: modalManager || undefined,
+              memo: modalMemo || undefined,
+            } as any)
+          ),
+          ...(toCreate.length > 0
+            ? [createOutbound({
+                outbound_number: modalOutboundNo,
+                outbound_date: modalOutboundDate,
+                warehouse_code: modalWarehouse || undefined,
+                location_code: modalLocation || undefined,
+                manager_id: modalManager || undefined,
+                memo: modalMemo || undefined,
+                items: toCreate.map((item) => ({
+                  outbound_type: item.outbound_type,
+                  reference_number: item.reference_number,
+                  customer_code: item.customer_code,
+                  customer_name: item.customer_name,
+                  item_code: item.item_number,
+                  item_name: item.item_name,
+                  spec: item.spec,
+                  material: item.material,
+                  unit: item.unit,
+                  outbound_qty: item.outbound_qty,
+                  unit_price: item.unit_price,
+                  total_amount: item.total_amount,
+                  source_type: item.source_type,
+                  source_id: item.source_id,
+                  outbound_status: "출고완료",
+                })),
+              })]
+            : []),
+        ]);
+        toast.success("출고 정보를 수정했어요");
         setIsModalOpen(false);
         fetchList();
+      } else {
+        const res = await createOutbound({
+          outbound_number: modalOutboundNo,
+          outbound_date: modalOutboundDate,
+          warehouse_code: modalWarehouse || undefined,
+          location_code: modalLocation || undefined,
+          manager_id: modalManager || undefined,
+          memo: modalMemo || undefined,
+          items: selectedItems.map((item) => ({
+            outbound_type: item.outbound_type,
+            reference_number: item.reference_number,
+            customer_code: item.customer_code,
+            customer_name: item.customer_name,
+            item_code: item.item_number,
+            item_name: item.item_name,
+            spec: item.spec,
+            material: item.material,
+            unit: item.unit,
+            outbound_qty: item.outbound_qty,
+            unit_price: item.unit_price,
+            total_amount: item.total_amount,
+            source_type: item.source_type,
+            source_id: item.source_id,
+            outbound_status: "출고완료",
+          })),
+        });
+
+        if (res.success) {
+          toast.success(res.message || "출고 등록 완료");
+          setIsModalOpen(false);
+          fetchList();
+        }
       }
     } catch {
-      alert("출고 등록 중 오류가 발생했습니다.");
+      toast.error(editMode ? "수정에 실패했어요" : "출고 등록 중 오류가 발생했습니다.");
     } finally {
       setSaving(false);
     }
   };
 
+
+
   // 합계 계산
   const totalSummary = useMemo(() => {
     return {
@@ -487,228 +890,350 @@ export default function OutboundPage() {
   }, [selectedItems]);
 
   return (
-    <div className="flex h-full flex-col gap-4 p-4">
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
       {/* 검색 영역 */}
-      <div className="flex flex-wrap items-center gap-2 rounded-lg border bg-card p-4">
-        <Select value={searchType} onValueChange={setSearchType}>
-          <SelectTrigger className="h-9 w-[130px] text-xs">
-            <SelectValue placeholder="출고유형" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">전체 유형</SelectItem>
-            {OUTBOUND_TYPES.map((t) => (
-              <SelectItem key={t.value} value={t.value}>
-                {t.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Select value={searchStatus} onValueChange={setSearchStatus}>
-          <SelectTrigger className="h-9 w-[130px] text-xs">
-            <SelectValue placeholder="출고상태" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">전체 상태</SelectItem>
-            {OUTBOUND_STATUS_OPTIONS.map((s) => (
-              <SelectItem key={s.value} value={s.value}>
-                {s.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Input
-          placeholder="출고번호 / 품목명 / 참조번호 검색"
-          value={searchKeyword}
-          onChange={(e) => setSearchKeyword(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && fetchList()}
-          className="h-9 w-[240px] text-xs"
-        />
-
-        <div className="flex items-center gap-1">
-          <Input
-            type="date"
-            value={searchDateFrom}
-            onChange={(e) => setSearchDateFrom(e.target.value)}
-            className="h-9 w-[140px] text-xs"
-          />
-          <span className="text-muted-foreground text-xs">~</span>
-          <Input
-            type="date"
-            value={searchDateTo}
-            onChange={(e) => setSearchDateTo(e.target.value)}
-            className="h-9 w-[140px] text-xs"
-          />
-        </div>
-
-        <Button size="sm" onClick={fetchList} className="h-9">
-          <Search className="mr-1 h-4 w-4" />
-          조회
-        </Button>
-        <Button size="sm" variant="outline" onClick={handleReset} className="h-9">
-          <RotateCcw className="mr-1 h-4 w-4" />
-          초기화
-        </Button>
-
-        <div className="ml-auto flex gap-2">
-          <Button size="sm" onClick={openRegisterModal} className="h-9">
-            <Plus className="mr-1 h-4 w-4" />
-            출고 등록
-          </Button>
-          <Button
-            size="sm"
-            variant="destructive"
-            onClick={handleDelete}
-            disabled={checkedIds.length === 0}
-            className="h-9"
-          >
-            <Trash2 className="mr-1 h-4 w-4" />
-            삭제 ({checkedIds.length})
-          </Button>
-        </div>
-      </div>
+      <DynamicSearchFilter
+        tableName="outbound_mng"
+        filterId="c16-outbound"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={data.length}
+      />
 
       {/* 출고 목록 테이블 */}
-      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
-        <div className="flex items-center justify-between border-b px-4 py-3">
+      <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+        {/* 패널 헤더 */}
+        <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2.5 shrink-0">
           <div className="flex items-center gap-2">
-            <PackageOpen className="text-muted-foreground h-5 w-5" />
-            <h3 className="text-base font-semibold">출고 목록</h3>
-            <span className="text-muted-foreground text-sm">
-              총 {data.length}건
+            <PackageOpen className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-semibold">출고 목록</span>
+            <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+              {data.length}건
             </span>
           </div>
+          <div className="flex gap-2">
+            <Button size="sm" onClick={openRegisterModal} className="h-8">
+              <Plus className="mr-1 h-3.5 w-3.5" />
+              출고 등록
+            </Button>
+            <Button
+              size="sm"
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={checkedIds.length === 0}
+              className="h-8"
+            >
+              <Trash2 className="mr-1 h-3.5 w-3.5" />
+              삭제 ({checkedIds.length})
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-4 w-4" />
+            </Button>
+          </div>
         </div>
 
-        <div className="h-[calc(100%-52px)] overflow-auto">
-          <Table>
-            <TableHeader>
-              <TableRow className="bg-muted/50">
-                <TableHead className="w-[40px] text-center">
+        <div className="h-full overflow-auto">
+          <Table style={{ minWidth: `${216 + visibleMasterLayout.length * 120}px` }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "36px" }} />
+              <col style={{ width: "140px" }} />
+              {visibleMasterLayout.map((col) => (
+                <col key={col.key} style={{ width: ts.getWidth(col.key) ? `${ts.getWidth(col.key)}px` : undefined }} />
+              ))}
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
                   <Checkbox
-                    checked={allChecked}
-                    onCheckedChange={toggleCheckAll}
+                    checked={(() => {
+                      const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
                   />
                 </TableHead>
-                <TableHead className="w-[130px]">출고번호</TableHead>
-                <TableHead className="w-[90px]">출고유형</TableHead>
-                <TableHead className="w-[100px]">출고일</TableHead>
-                <TableHead className="w-[120px]">참조번호</TableHead>
-                <TableHead className="w-[80px]">데이터출처</TableHead>
-                <TableHead className="w-[120px]">거래처</TableHead>
-                <TableHead className="w-[100px]">품목코드</TableHead>
-                <TableHead className="min-w-[150px]">품목명</TableHead>
-                <TableHead className="w-[80px]">규격</TableHead>
-                <TableHead className="w-[80px] text-right">출고수량</TableHead>
-                <TableHead className="w-[90px] text-right">단가</TableHead>
-                <TableHead className="w-[100px] text-right">금액</TableHead>
-                <TableHead className="w-[100px]">창고</TableHead>
-                <TableHead className="w-[90px] text-center">출고상태</TableHead>
-                <TableHead className="w-[100px]">비고</TableHead>
+                <TableHead />
+                {/* 출고번호 */}
+                <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                  <div className="inline-flex items-center gap-1">
+                    <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort("outbound_number")}>
+                      <span className="truncate">출고번호</span>
+                      {sortState?.key === "outbound_number" && (
+                        sortState.direction === "asc"
+                          ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                          : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                      )}
+                    </div>
+                    {(masterUniqueValues["outbound_number"] || []).length > 0 && (
+                      <HeaderFilterPopover
+                        colKey="outbound_number" colLabel="출고번호"
+                        uniqueValues={masterUniqueValues["outbound_number"] || []}
+                        filterValues={headerFilters["outbound_number"] || new Set<string>()}
+                        onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                      />
+                    )}
+                  </div>
+                </TableHead>
+                {/* 마스터 필드 헤더 (ts.visibleColumns 순서) */}
+                {visibleMasterLayout.map((col) => (
+                  <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                    <div className="inline-flex items-center gap-1">
+                      <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                        <span className="truncate">{col.label}</span>
+                        {sortState?.key === col.key && (
+                          sortState.direction === "asc"
+                            ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                            : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                        )}
+                      </div>
+                      {(masterUniqueValues[col.key] || []).length > 0 && (
+                        <HeaderFilterPopover
+                          colKey={col.key} colLabel={col.label}
+                          uniqueValues={masterUniqueValues[col.key] || []}
+                          filterValues={headerFilters[col.key] || new Set<string>()}
+                          onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                        />
+                      )}
+                    </div>
+                  </TableHead>
+                ))}
               </TableRow>
             </TableHeader>
             <TableBody>
               {loading ? (
                 <TableRow>
-                  <TableCell colSpan={16} className="h-40 text-center">
-                    <Loader2 className="mx-auto h-6 w-6 animate-spin" />
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
                   </TableCell>
                 </TableRow>
-              ) : data.length === 0 ? (
+              ) : Object.keys(filteredGroups).length === 0 ? (
                 <TableRow>
-                  <TableCell
-                    colSpan={16}
-                    className="text-muted-foreground h-40 text-center"
-                  >
-                    <div className="flex flex-col items-center gap-2">
-                      <PackageOpen className="h-10 w-10 opacity-30" />
-                      <p>등록된 출고 내역이 없습니다</p>
-                      <p className="text-xs">
-                        &apos;출고 등록&apos; 버튼을 클릭하여 출고를 추가하세요
-                      </p>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <PackageOpen className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 출고 내역이 없어요</span>
                     </div>
                   </TableCell>
                 </TableRow>
               ) : (
-                data.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    className={cn(
-                      "cursor-pointer transition-colors",
-                      checkedIds.includes(row.id) && "bg-primary/5"
-                    )}
-                    onClick={() => toggleCheck(row.id)}
-                  >
-                    <TableCell
-                      className="text-center"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Checkbox
-                        checked={checkedIds.includes(row.id)}
-                        onCheckedChange={() => toggleCheck(row.id)}
-                      />
-                    </TableCell>
-                    <TableCell className="max-w-[130px] truncate font-medium" title={row.outbound_number}>
-                      {row.outbound_number}
-                    </TableCell>
-                    <TableCell>
-                      <Badge
-                        variant="outline"
-                        className={cn("text-[11px]", getTypeColor(row.outbound_type))}
-                      >
-                        {row.outbound_type || "-"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.outbound_date
-                        ? new Date(row.outbound_date).toLocaleDateString("ko-KR")
-                        : "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.reference_number || "-"}>
-                      {row.reference_number || "-"}
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.source_type
-                        ? SOURCE_TYPE_LABEL[row.source_type] || row.source_type
-                        : "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.customer_name || "-"}>
-                      {row.customer_name || "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[130px] truncate text-xs" title={row.item_code || "-"}>
-                      {row.item_code || "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[150px] truncate text-xs" title={row.item_name || "-"}>{row.item_name || "-"}</TableCell>
-                    <TableCell className="max-w-[100px] truncate text-xs" title={row.specification || "-"}>{row.specification || "-"}</TableCell>
-                    <TableCell className="text-right text-xs font-semibold">
-                      {Number(row.outbound_qty || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-right text-xs">
-                      {Number(row.unit_price || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-right text-xs font-semibold">
-                      {Number(row.total_amount || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.warehouse_name || row.warehouse_code || "-"}
-                    </TableCell>
-                    <TableCell className="text-center">
-                      <Badge
-                        variant="outline"
+                Object.entries(filteredGroups).map(([outboundNo, group]) => {
+                  const isExpanded = expandedOrders.has(outboundNo);
+                  const detailIds = group.details.map((d) => d.id);
+                  const allDetailChecked = detailIds.length > 0 && detailIds.every((id) => checkedIds.includes(id));
+                  const someDetailChecked = detailIds.some((id) => checkedIds.includes(id));
+                  const master = group.master;
+                  return (
+                    <React.Fragment key={outboundNo}>
+                      {/* 마스터 행 */}
+                      <TableRow
+                        style={{ borderTop: "2px solid hsl(var(--border))" }}
                         className={cn(
-                          "text-[11px]",
-                          getStatusColor(row.outbound_status)
+                          "cursor-pointer border-l-[3px] border-l-transparent font-semibold tree-master-row",
+                          allDetailChecked && "border-l-primary bg-primary/5"
                         )}
+                        onClick={() => {
+                          if (expandedOrders.has(outboundNo)) {
+                            setClosingOrders((prev) => new Set(prev).add(outboundNo));
+                            setTimeout(() => {
+                              setExpandedOrders((prev) => { const next = new Set(prev); next.delete(outboundNo); return next; });
+                              setClosingOrders((prev) => { const next = new Set(prev); next.delete(outboundNo); return next; });
+                            }, 200);
+                          } else {
+                            setExpandedOrders((prev) => new Set(prev).add(outboundNo));
+                          }
+                        }}
+                        onDoubleClick={() => openEditModal(group.details[0])}
                       >
-                        {row.outbound_status || "-"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.memo || "-"}>
-                      {row.memo || "-"}
-                    </TableCell>
-                  </TableRow>
-                ))
+                        <TableCell
+                          className="text-center cursor-pointer"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setCheckedIds((prev) => {
+                              if (allDetailChecked) return prev.filter((id) => !detailIds.includes(id));
+                              return [...new Set([...prev, ...detailIds])];
+                            });
+                          }}
+                        >
+                          <Checkbox
+                            checked={allDetailChecked}
+                            data-state={someDetailChecked && !allDetailChecked ? "indeterminate" : undefined}
+                            onCheckedChange={() => {}}
+                          />
+                        </TableCell>
+                        <TableCell className="text-center">
+                          {isExpanded
+                            ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            : <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          }
+                        </TableCell>
+                        {/* 출고번호 */}
+                        <TableCell className="font-mono whitespace-nowrap">
+                          {outboundNo}
+                          <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
+                        </TableCell>
+                        {/* 마스터 필드 (ts.visibleColumns 순서) */}
+                        {visibleMasterLayout.map((col) => {
+                          switch (col.key) {
+                            case "outbound_type": return (
+                              <TableCell key={col.key}>
+                                <Badge variant="outline" className={cn("text-[11px]", getTypeColor(master.outbound_type))}>
+                                  {master.outbound_type || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "outbound_date": return (
+                              <TableCell key={col.key} className="whitespace-nowrap text-[13px]">
+                                {master.outbound_date ? new Date(master.outbound_date).toLocaleDateString("ko-KR") : "-"}
+                              </TableCell>
+                            );
+                            case "reference_number": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.reference_number || ""}</span>
+                              </TableCell>
+                            );
+                            case "customer_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.customer_name || ""}</span>
+                              </TableCell>
+                            );
+                            case "warehouse_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
+                              </TableCell>
+                            );
+                            case "outbound_status": return (
+                              <TableCell key={col.key}>
+                                <Badge variant="outline" className={cn("text-[11px]", getStatusColor(master.outbound_status))}>
+                                  {master.outbound_status || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "memo": return (
+                              <TableCell key={col.key} className="text-muted-foreground">
+                                <span className="block truncate max-w-[120px]">{master.memo || ""}</span>
+                              </TableCell>
+                            );
+                            default: return <TableCell key={col.key} className="text-[13px]">{(master as any)[col.key] ?? ""}</TableCell>;
+                          }
+                        })}
+                      </TableRow>
+
+                      {/* 디테일 서브 헤더 (펼쳤을 때만) */}
+                      {isExpanded && (
+                        <TableRow
+                          className={cn(
+                            "border-l-[3px] border-l-primary/30 bg-muted/60",
+                            closingOrders.has(outboundNo) ? "tree-detail-row-closing" : "tree-detail-row",
+                          )}
+                        >
+                          <TableCell />
+                          <TableCell />
+                          <TableCell />
+                          {visibleDetailCols.map((col) => {
+                            const isRight = ["outbound_qty", "unit_price", "total_amount"].includes(col.key);
+                            const isSorted = sortState?.key === col.key;
+                            const uniqueVals = Array.from(new Set(
+                              group.details.map((d) => {
+                                let v = (d as any)[col.key];
+                                if (col.key === "source_type") v = SOURCE_TYPE_LABEL[v] || v;
+                                return v;
+                              }).filter((v: any) => v != null && v !== "").map(String)
+                            )).sort();
+                            const filterVals = headerFilters[col.key] || new Set<string>();
+                            return (
+                              <TableCell
+                                key={col.key}
+                                className={cn(
+                                  "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 select-none",
+                                  isRight && "text-right",
+                                )}
+                              >
+                                <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                                  <div
+                                    className="flex items-center gap-1 cursor-pointer min-w-0"
+                                    onClick={() => handleSort(col.key)}
+                                  >
+                                    <span className="truncate">{col.label}</span>
+                                    {isSorted && (
+                                      sortState!.direction === "asc"
+                                        ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                                        : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                                    )}
+                                  </div>
+                                  {uniqueVals.length > 0 && (
+                                    <HeaderFilterPopover
+                                      colKey={col.key} colLabel={col.label}
+                                      uniqueValues={uniqueVals} filterValues={filterVals}
+                                      onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                                    />
+                                  )}
+                                </div>
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                      )}
+
+                      {/* 디테일 행 (펼쳤을 때만) */}
+                      {isExpanded && group.details.map((row, detailIdx) => {
+                        const isClosing = closingOrders.has(outboundNo);
+                        const isChecked = checkedIds.includes(row.id);
+                        return (
+                          <TableRow
+                            key={`${row.id}-${detailIdx}`}
+                            className={cn(
+                              "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                              isClosing ? "tree-detail-row-closing" : "tree-detail-row",
+                              isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                            )}
+                            onClick={() => {
+                              setCheckedIds((prev) =>
+                                prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                              );
+                            }}
+                            onDoubleClick={() => openEditModal(row)}
+                          >
+                            <TableCell
+                              className="text-center cursor-pointer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                            >
+                              <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                            </TableCell>
+                            <TableCell className="relative">
+                              <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
+                            </TableCell>
+                            <TableCell />
+                            {visibleDetailCols.map((col) => {
+                              switch (col.key) {
+                                case "source_type": return <TableCell key={col.key} className="text-[13px]">{row.source_type ? (SOURCE_TYPE_LABEL[row.source_type] || row.source_type) : "-"}</TableCell>;
+                                case "item_code": return <TableCell key={col.key} className="font-mono text-[13px]">{row.item_code || ""}</TableCell>;
+                                case "item_name": return <TableCell key={col.key} className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>;
+                                case "specification": return <TableCell key={col.key} className="text-[13px] text-muted-foreground">{row.specification || ""}</TableCell>;
+                                case "outbound_qty": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.outbound_qty ? Number(row.outbound_qty).toLocaleString() : ""}</TableCell>;
+                                case "unit_price": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>;
+                                case "total_amount": return <TableCell key={col.key} className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>;
+                                default: return <TableCell key={col.key} className="text-[13px]">{(row as any)[col.key] ?? ""}</TableCell>;
+                              }
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                    </React.Fragment>
+                  );
+                })
               )}
             </TableBody>
           </Table>
@@ -716,56 +1241,16 @@ export default function OutboundPage() {
       </div>
 
       {/* 출고 등록 모달 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title="출고 등록"
-        description="출고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가하세요."
-        defaultMaxWidth="sm:max-w-[1600px]"
-        defaultWidth="w-[95vw]"
-        className="h-[90vh] p-0"
-        contentClassName="overflow-hidden flex flex-col"
-        footer={
-          <div className="flex w-full items-center justify-between px-6 py-3">
-            <div className="text-muted-foreground text-xs">
-              {selectedItems.length > 0 ? (
-                <>
-                  {totalSummary.count}건 | 수량 합계:{" "}
-                  {totalSummary.qty.toLocaleString()} | 금액 합계:{" "}
-                  {totalSummary.amount.toLocaleString()}원
-                </>
-              ) : (
-                "품목을 추가해주세요"
-              )}
-            </div>
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setIsModalOpen(false)}
-                className="h-9 text-sm"
-              >
-                취소
-              </Button>
-              <Button
-                onClick={handleSave}
-                disabled={saving || selectedItems.length === 0}
-                className="h-9 text-sm"
-              >
-                {saving ? (
-                  <Loader2 className="mr-1 h-4 w-4 animate-spin" />
-                ) : (
-                  <Save className="mr-1 h-4 w-4" />
-                )}
-                저장
-              </Button>
-            </div>
-          </div>
-        }
-      >
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="flex flex-col gap-0 p-0 sm:max-w-[1600px] w-[95vw] h-[90vh] overflow-hidden">
+          <DialogHeader className="shrink-0 border-b px-6 py-4">
+            <DialogTitle>{editMode ? "출고 수정" : "출고 등록"}</DialogTitle>
+            <DialogDescription>{editMode ? "출고 정보를 수정해주세요." : "출고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가해주세요."}</DialogDescription>
+          </DialogHeader>
 
           {/* 출고유형 선택 */}
-          <div className="flex items-center gap-4 border-b px-6 py-3">
-            <Label className="text-sm font-semibold">출고유형</Label>
+          <div className="flex shrink-0 items-center gap-4 border-b bg-muted/30 px-6 py-3">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고유형</span>
             <Select value={modalOutboundType} onValueChange={handleOutboundTypeChange}>
               <SelectTrigger className="h-9 w-[160px] text-sm">
                 <SelectValue />
@@ -780,10 +1265,10 @@ export default function OutboundPage() {
             </Select>
             <span className="text-muted-foreground ml-auto text-xs italic">
               {modalOutboundType === "판매출고"
-                ? "출하지시 데이터에서 출고 처리합니다."
+                ? "출하지시 데이터에서 출고 처리해요"
                 : modalOutboundType === "반품출고"
-                  ? "발주(입고) 데이터에서 반품 출고 처리합니다."
-                  : "품목 데이터를 직접 선택하여 출고 처리합니다."}
+                  ? "발주(입고) 데이터에서 반품 출고 처리해요"
+                  : "품목 데이터를 직접 선택하여 출고 처리해요"}
             </span>
           </div>
 
@@ -813,17 +1298,21 @@ export default function OutboundPage() {
                     </Button>
                   </div>
 
-                  <div className="flex items-center justify-between border-b px-4 py-2 shrink-0">
-                    <h4 className="text-muted-foreground text-xs font-semibold">
-                      {modalOutboundType === "판매출고"
-                        ? "미출고 출하지시 목록"
-                        : modalOutboundType === "반품출고"
-                          ? "입고된 발주 목록"
-                          : "품목 목록"}
-                    </h4>
-                    {sourceTotalCount > 0 && (
-                      <span className="text-muted-foreground text-[11px]">총 {sourceTotalCount}건</span>
-                    )}
+                  <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2 shrink-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                        {modalOutboundType === "판매출고"
+                          ? "미출고 출하지시 목록"
+                          : modalOutboundType === "반품출고"
+                            ? "입고된 발주 목록"
+                            : "품목 목록"}
+                      </span>
+                      {sourceTotalCount > 0 && (
+                        <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                          {sourceTotalCount}건
+                        </span>
+                      )}
+                    </div>
                   </div>
 
                   <div className="flex-1 overflow-auto">
@@ -899,20 +1388,20 @@ export default function OutboundPage() {
               <ResizablePanel defaultSize={40} minSize={25}>
                 <div className="flex h-full flex-col">
                   <div className="space-y-3 border-b bg-muted/30 px-4 py-3">
-                    <h4 className="text-sm font-semibold">출고 정보</h4>
+                    <h4 className="text-[13px] font-bold text-foreground">출고 정보</h4>
                     <div className="grid grid-cols-2 gap-3">
-                      <div>
-                        <Label className="text-[11px]">출고번호</Label>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고번호</span>
                         <Input
                           value={modalOutboundNo}
                           readOnly
-                          className="bg-muted h-8 text-xs"
+                          className="bg-muted cursor-not-allowed h-8 font-mono text-xs"
                         />
                       </div>
-                      <div>
-                        <Label className="text-[11px]">
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                           출고일 <span className="text-destructive">*</span>
-                        </Label>
+                        </span>
                         <Input
                           type="date"
                           value={modalOutboundDate}
@@ -920,9 +1409,17 @@ export default function OutboundPage() {
                           className="h-8 text-xs"
                         />
                       </div>
-                      <div>
-                        <Label className="text-[11px]">창고</Label>
-                        <Select value={modalWarehouse} onValueChange={setModalWarehouse}>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">창고</span>
+                        <Select value={modalWarehouse} onValueChange={(v) => {
+                          setModalWarehouse(v);
+                          setModalLocation("");
+                          if (v) {
+                            getOutboundLocations(v).then((r) => { if (r.success) setLocations(r.data); }).catch(() => {});
+                          } else {
+                            setLocations([]);
+                          }
+                        }}>
                           <SelectTrigger className="h-8 text-xs">
                             <SelectValue placeholder="창고 선택" />
                           </SelectTrigger>
@@ -935,17 +1432,24 @@ export default function OutboundPage() {
                           </SelectContent>
                         </Select>
                       </div>
-                      <div>
-                        <Label className="text-[11px]">위치</Label>
-                        <Input
-                          value={modalLocation}
-                          onChange={(e) => setModalLocation(e.target.value)}
-                          placeholder="위치 입력"
-                          className="h-8 text-xs"
-                        />
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">위치</span>
+                        <Select value={modalLocation || "__none__"} onValueChange={(v) => setModalLocation(v === "__none__" ? "" : v)}>
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="위치 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="__none__">위치 선택</SelectItem>
+                            {locations.map((l) => (
+                              <SelectItem key={l.location_code} value={l.location_code}>
+                                {l.location_name || l.location_code}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
                       </div>
-                      <div>
-                        <Label className="text-[11px]">담당자</Label>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자</span>
                         <Input
                           value={modalManager}
                           onChange={(e) => setModalManager(e.target.value)}
@@ -953,8 +1457,8 @@ export default function OutboundPage() {
                           className="h-8 text-xs"
                         />
                       </div>
-                      <div>
-                        <Label className="text-[11px]">메모</Label>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">메모</span>
                         <Input
                           value={modalMemo}
                           onChange={(e) => setModalMemo(e.target.value)}
@@ -966,25 +1470,29 @@ export default function OutboundPage() {
                   </div>
 
                   <div className="flex-1 overflow-auto px-4 py-2">
-                    <h4 className="text-muted-foreground mb-2 text-xs font-semibold">
-                      출고 처리 품목 ({selectedItems.length}건)
-                    </h4>
+                    <div className="mb-2 flex items-center gap-2">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고 처리 품목</span>
+                      <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                        {selectedItems.length}건
+                      </span>
+                    </div>
 
                     {selectedItems.length === 0 ? (
-                      <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-xs">
-                        <PackageOpen className="mb-2 h-8 w-8 opacity-30" />
+                      <div className="flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+                        <PackageOpen className="h-8 w-8 text-muted-foreground/30" />
                         좌측에서 품목을 선택하여 추가해주세요
                       </div>
                     ) : (
                       <Table>
-                        <TableHeader>
-                          <TableRow className="text-[11px]">
-                            <TableHead className="w-[30px] p-2">No</TableHead>
-                            <TableHead className="p-2">품목명</TableHead>
-                            <TableHead className="p-2">참조번호</TableHead>
-                            <TableHead className="w-[80px] p-2 text-right">수량</TableHead>
-                            <TableHead className="w-[80px] p-2 text-right">단가</TableHead>
-                            <TableHead className="w-[90px] p-2 text-right">금액</TableHead>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출고유형</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
                             <TableHead className="w-[30px] p-2" />
                           </TableRow>
                         </TableHeader>
@@ -992,6 +1500,11 @@ export default function OutboundPage() {
                           {selectedItems.map((item, idx) => (
                             <TableRow key={item.key} className="text-xs">
                               <TableCell className="p-2 text-center">{idx + 1}</TableCell>
+                              <TableCell className="p-2">
+                                <Badge variant="outline" className={cn("text-[10px]", getTypeColor(item.outbound_type))}>
+                                  {item.outbound_type || "-"}
+                                </Badge>
+                              </TableCell>
                               <TableCell className="max-w-[180px] p-2">
                                 <div className="flex flex-col">
                                   <span className="truncate font-medium" title={item.item_name}>
@@ -1022,7 +1535,7 @@ export default function OutboundPage() {
                                   min={0}
                                 />
                               </TableCell>
-                              <TableCell className="p-2 text-right text-xs font-semibold">
+                              <TableCell className="p-2 text-right text-[13px] font-semibold">
                                 {item.total_amount.toLocaleString()}
                               </TableCell>
                               <TableCell className="p-2 text-center">
@@ -1046,7 +1559,53 @@ export default function OutboundPage() {
             </ResizablePanelGroup>
           </div>
 
-      </FullscreenDialog>
+          <div className="shrink-0 border-t">
+            <div className="flex w-full items-center justify-between px-6 py-3">
+              <div className="text-muted-foreground text-xs">
+                {selectedItems.length > 0 ? (
+                  <>
+                    {totalSummary.count}건 | 수량 합계:{" "}
+                    {totalSummary.qty.toLocaleString()} | 금액 합계:{" "}
+                    {totalSummary.amount.toLocaleString()}원
+                  </>
+                ) : (
+                  "품목을 추가해주세요"
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsModalOpen(false)}
+                  className="h-9 text-sm"
+                >
+                  취소
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={saving || selectedItems.length === 0}
+                  className="h-9 text-sm"
+                >
+                  {saving ? (
+                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="mr-1 h-4 w-4" />
+                  )}
+                  저장
+                </Button>
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
@@ -1064,23 +1623,24 @@ function SourceShipmentInstructionTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 출하지시 데이터를 조회하세요
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 출하지시 데이터를 조회해주세요
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader>
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">출하지시번호</TableHead>
-          <TableHead className="p-2">출하일</TableHead>
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">계획수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">출고수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">미출고</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하지시번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하일</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출고수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">미출고</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -1123,7 +1683,7 @@ function SourceShipmentInstructionTable({
               <TableCell className="p-2 text-right">
                 {Number(si.ship_qty).toLocaleString()}
               </TableCell>
-              <TableCell className="p-2 text-right font-semibold text-blue-600">
+              <TableCell className="p-2 text-right font-semibold text-primary">
                 {Number(si.remain_qty).toLocaleString()}
               </TableCell>
             </TableRow>
@@ -1145,22 +1705,23 @@ function SourcePurchaseOrderTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 발주 데이터를 조회하세요
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 발주 데이터를 조회해주세요
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader>
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">발주번호</TableHead>
-          <TableHead className="p-2">공급처</TableHead>
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">발주수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">입고수량</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -1196,7 +1757,7 @@ function SourcePurchaseOrderTable({
               <TableCell className="p-2 text-right">
                 {Number(po.order_qty).toLocaleString()}
               </TableCell>
-              <TableCell className="p-2 text-right font-semibold text-blue-600">
+              <TableCell className="p-2 text-right font-semibold text-primary">
                 {Number(po.received_qty).toLocaleString()}
               </TableCell>
             </TableRow>
@@ -1218,22 +1779,23 @@ function SourceItemTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 품목 데이터를 조회하세요
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 품목 데이터를 조회해주세요
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader>
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[80px] p-2">규격</TableHead>
-          <TableHead className="w-[80px] p-2">재질</TableHead>
-          <TableHead className="w-[60px] p-2">단위</TableHead>
-          <TableHead className="w-[80px] p-2 text-right">기준가</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+          <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
diff --git a/frontend/app/(main)/COMPANY_10/logistics/packaging/page.tsx b/frontend/app/(main)/COMPANY_10/logistics/packaging/page.tsx
index 79059277..6ae340aa 100644
--- a/frontend/app/(main)/COMPANY_10/logistics/packaging/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/logistics/packaging/page.tsx
@@ -4,23 +4,18 @@ import React, { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Badge } from "@/components/ui/badge";
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from "@/components/ui/select";
 import {
   Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from "@/components/ui/table";
-import {
-  ResizableHandle, ResizablePanel, ResizablePanelGroup,
-} from "@/components/ui/resizable";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Command, CommandInput, CommandList, CommandEmpty, CommandItem } from "@/components/ui/command";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import {
-  Search, Plus, Trash2, RotateCcw, Loader2, Package, Box, X, Save, Edit2, Download, ChevronsUpDown, Check,
+  Plus, Trash2, Loader2, Package, Box, X, Save, Edit2, Download, ChevronsUpDown, Check, Inbox, Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
@@ -32,6 +27,19 @@ import {
   getItemsByDivision, getGeneralItems,
   type PkgUnit, type PkgUnitItem, type LoadingUnit, type LoadingUnitPkg, type ItemInfoForPkg,
 } from "@/lib/api/packaging";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "pkg_code", label: "품목코드" },
+  { key: "pkg_name", label: "포장명" },
+  { key: "pkg_type", label: "유형" },
+  { key: "size", label: "크기(mm)" },
+  { key: "max_weight", label: "최대중량" },
+  { key: "status", label: "상태" },
+];
 
 // --- 코드 → 라벨 매핑 ---
 const PKG_TYPE_LABEL: Record<string, string> = {
@@ -45,7 +53,7 @@ const LOADING_TYPE_LABEL: Record<string, string> = {
 };
 const STATUS_LABEL: Record<string, string> = { ACTIVE: "사용", INACTIVE: "미사용" };
 
-const getStatusColor = (s: string) => s === "ACTIVE" ? "bg-emerald-100 text-emerald-800" : "bg-gray-100 text-gray-600";
+const getStatusColor = (s: string) => s === "ACTIVE" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground";
 const fmtSize = (w: any, l: any, h: any) => {
   const vals = [w, l, h].map(v => Number(v) || 0);
   return vals.some(v => v > 0) ? vals.join("×") : "-";
@@ -62,11 +70,12 @@ function parseSpecDimensions(spec: string | null) {
 }
 
 export default function PackagingPage() {
+  const ts = useTableSettings("c16-packaging", "pkg_unit", GRID_COLUMNS);
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
   const [activeTab, setActiveTab] = useState<"packing" | "loading">("packing");
 
-  // 검색
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 포장재 데이터
   const [pkgUnits, setPkgUnits] = useState<PkgUnit[]>([]);
@@ -150,15 +159,21 @@ export default function PackagingPage() {
 
   // 검색 필터 적용
   const filteredPkgUnits = pkgUnits.filter((p) => {
-    if (!searchKeyword) return true;
-    const kw = searchKeyword.toLowerCase();
-    return (p.pkg_code?.toLowerCase().includes(kw) || p.pkg_name?.toLowerCase().includes(kw));
+    if (searchFilters.length === 0) return true;
+    return searchFilters.every((f) => {
+      if (!f.value) return true;
+      const kw = f.value.toLowerCase();
+      return Object.values(p).some((v) => String(v ?? "").toLowerCase().includes(kw));
+    });
   });
 
   const filteredLoadingUnits = loadingUnits.filter((l) => {
-    if (!searchKeyword) return true;
-    const kw = searchKeyword.toLowerCase();
-    return (l.loading_code?.toLowerCase().includes(kw) || l.loading_name?.toLowerCase().includes(kw));
+    if (searchFilters.length === 0) return true;
+    return searchFilters.every((f) => {
+      if (!f.value) return true;
+      const kw = f.value.toLowerCase();
+      return Object.values(l).some((v) => String(v ?? "").toLowerCase().includes(kw));
+    });
   });
 
   // --- 포장재 등록/수정 모달 ---
@@ -344,444 +359,498 @@ export default function PackagingPage() {
   };
 
   return (
-    <div className="flex h-full flex-col gap-3 p-4">
-      {/* 검색 바 */}
-      <div className="flex items-center gap-2 rounded-lg border bg-card p-3">
-        <Input
-          placeholder="포장코드 / 포장명 / 적재함명 검색"
-          value={searchKeyword}
-          onChange={(e) => setSearchKeyword(e.target.value)}
-          className="h-9 w-[280px] text-xs"
-        />
-        <Button size="sm" variant="outline" onClick={() => setSearchKeyword("")} className="h-9">
-          <RotateCcw className="mr-1 h-4 w-4" /> 초기화
-        </Button>
-      </div>
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-4">
 
-      {/* 탭 */}
-      <div className="flex gap-1 border-b">
-        {([["packing", "포장재 관리", filteredPkgUnits.length] as const, ["loading", "적재함 관리", filteredLoadingUnits.length] as const]).map(([tab, label, count]) => (
+      {/* 1. 필터 바 */}
+      <DynamicSearchFilter
+        tableName="pkg_unit"
+        filterId="c16-packaging"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={activeTab === "packing" ? filteredPkgUnits.length : filteredLoadingUnits.length}
+      />
+
+      {/* 2. 탭 바 */}
+      <div className="flex shrink-0 gap-1 border-b">
+        {(
+          [
+            ["packing", "포장재 관리", filteredPkgUnits.length],
+            ["loading", "적재함 관리", filteredLoadingUnits.length],
+          ] as const
+        ).map(([tab, label, count]) => (
           <button
             key={tab}
-            onClick={() => setActiveTab(tab)}
+            onClick={() => {
+              setActiveTab(tab);
+              if (tab === "packing") { setSelectedLoading(null); setLoadingPkgs([]); }
+              else { setSelectedPkg(null); setPkgItems([]); }
+            }}
             className={cn(
-              "flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px",
-              activeTab === tab ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"
+              "-mb-px flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors",
+              activeTab === tab
+                ? "border-primary text-primary"
+                : "border-transparent text-muted-foreground hover:text-foreground"
             )}
           >
             {tab === "packing" ? <Package className="h-4 w-4" /> : <Box className="h-4 w-4" />}
             {label}
-            <Badge variant="secondary" className="text-[10px] px-1.5">{count}</Badge>
+            <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+              {count}
+            </span>
           </button>
         ))}
       </div>
 
-      {/* 탭 콘텐츠 */}
-      <div className="flex-1 overflow-hidden">
-        {activeTab === "packing" ? (
-          <ResizablePanelGroup direction="horizontal" className="h-full rounded-lg border">
-            {/* 좌측: 포장재 목록 */}
-            <ResizablePanel defaultSize={45} minSize={30}>
-              <div className="flex h-full flex-col">
-                <div className="flex items-center justify-between border-b px-4 py-2.5">
-                  <span className="text-sm font-semibold">포장재 목록 <span className="text-muted-foreground font-normal">({filteredPkgUnits.length}건)</span></span>
-                  <div className="flex gap-1">
-                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openPkgModal("create")}>
-                      <Plus className="mr-1 h-3 w-3" /> 등록
-                    </Button>
-                  </div>
-                </div>
-                <div className="flex-1 overflow-auto">
-                  <Table>
-                    <TableHeader>
-                      <TableRow className="text-[11px] bg-muted/50">
-                        <TableHead className="p-2">품목코드</TableHead>
-                        <TableHead className="p-2">포장명</TableHead>
-                        <TableHead className="p-2 w-[70px]">유형</TableHead>
-                        <TableHead className="p-2 w-[90px]">크기(mm)</TableHead>
-                        <TableHead className="p-2 w-[70px] text-right">최대중량</TableHead>
-                        <TableHead className="p-2 w-[55px] text-center">상태</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {pkgLoading ? (
-                        <TableRow><TableCell colSpan={6} className="h-32 text-center"><Loader2 className="mx-auto h-5 w-5 animate-spin" /></TableCell></TableRow>
-                      ) : filteredPkgUnits.length === 0 ? (
-                        <TableRow><TableCell colSpan={6} className="h-32 text-center text-muted-foreground text-xs">등록된 포장재가 없습니다</TableCell></TableRow>
-                      ) : filteredPkgUnits.map((p) => (
-                        <TableRow
-                          key={p.id}
-                          className={cn("cursor-pointer text-xs", selectedPkg?.id === p.id && "bg-primary/5")}
-                          onClick={() => selectPkg(p)}
-                        >
-                          <TableCell className="p-2 font-medium truncate max-w-[100px]">{p.pkg_code}</TableCell>
-                          <TableCell className="p-2 truncate max-w-[120px]">{p.pkg_name}</TableCell>
-                          <TableCell className="p-2">{PKG_TYPE_LABEL[p.pkg_type] || p.pkg_type || "-"}</TableCell>
-                          <TableCell className="p-2 text-[10px]">{fmtSize(p.width_mm, p.length_mm, p.height_mm)}</TableCell>
-                          <TableCell className="p-2 text-right">{Number(p.max_load_kg || 0) > 0 ? `${p.max_load_kg}kg` : "-"}</TableCell>
-                          <TableCell className="p-2 text-center">
-                            <Badge variant="outline" className={cn("text-[10px]", getStatusColor(p.status))}>{STATUS_LABEL[p.status] || p.status}</Badge>
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </div>
-              </div>
-            </ResizablePanel>
-            <ResizableHandle withHandle />
-            {/* 우측: 상세 */}
-            <ResizablePanel defaultSize={55} minSize={30}>
-              {!selectedPkg ? (
-                <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
-                  <Package className="h-12 w-12 opacity-20 mb-2" />
-                  <p className="text-sm">좌측 목록에서 포장재를 선택하세요</p>
-                </div>
-              ) : (
-                <div className="flex h-full flex-col">
-                  {/* 요약 헤더 */}
-                  <div className="flex items-center justify-between border-b bg-blue-50 dark:bg-blue-950/20 px-4 py-3">
-                    <div className="flex items-center gap-3">
-                      <Package className="h-5 w-5 text-blue-600" />
-                      <div>
-                        <div className="font-bold text-sm">{selectedPkg.pkg_name}</div>
-                        <div className="text-[11px] text-muted-foreground">{selectedPkg.pkg_code} · {PKG_TYPE_LABEL[selectedPkg.pkg_type] || selectedPkg.pkg_type} · {fmtSize(selectedPkg.width_mm, selectedPkg.length_mm, selectedPkg.height_mm)}mm</div>
-                      </div>
-                    </div>
-                    <div className="flex gap-1">
-                      <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openPkgModal("edit")}>
-                        <Edit2 className="mr-1 h-3 w-3" /> 수정
-                      </Button>
-                      <Button size="sm" variant="destructive" className="h-7 text-xs" onClick={() => handleDeletePkg(selectedPkg)}>
-                        <Trash2 className="mr-1 h-3 w-3" /> 삭제
-                      </Button>
-                    </div>
-                  </div>
-                  {/* 매칭 품목 */}
-                  <div className="flex items-center justify-between px-4 py-2 border-b">
-                    <span className="text-xs font-semibold text-muted-foreground">매칭 품목 ({pkgItems.length}건)</span>
-                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openItemMatchModal}>
-                      <Plus className="mr-1 h-3 w-3" /> 품목 추가
-                    </Button>
-                  </div>
-                  <div className="flex-1 overflow-auto">
-                    {pkgItemsLoading ? (
-                      <div className="flex h-32 items-center justify-center"><Loader2 className="h-5 w-5 animate-spin" /></div>
-                    ) : pkgItems.length === 0 ? (
-                      <div className="flex h-32 items-center justify-center text-muted-foreground text-xs">매칭된 품목이 없습니다</div>
-                    ) : (
-                      <Table>
-                        <TableHeader>
-                          <TableRow className="text-[11px]">
-                            <TableHead className="p-2">품목코드</TableHead>
-                            <TableHead className="p-2">품목명</TableHead>
-                            <TableHead className="p-2 w-[70px]">규격</TableHead>
-                            <TableHead className="p-2 w-[50px]">단위</TableHead>
-                            <TableHead className="p-2 w-[80px] text-right">포장수량</TableHead>
-                            <TableHead className="p-2 w-[40px]" />
-                          </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                          {pkgItems.map((item) => (
-                            <TableRow key={item.id} className="text-xs">
-                              <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
-                              <TableCell className="p-2">{item.item_name || "-"}</TableCell>
-                              <TableCell className="p-2">{item.spec || "-"}</TableCell>
-                              <TableCell className="p-2">{item.unit || "EA"}</TableCell>
-                              <TableCell className="p-2 text-right font-semibold">{Number(item.pkg_qty).toLocaleString()}</TableCell>
-                              <TableCell className="p-2 text-center">
-                                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeletePkgItem(item)}>
-                                  <X className="h-3 w-3" />
-                                </Button>
-                              </TableCell>
-                            </TableRow>
-                          ))}
-                        </TableBody>
-                      </Table>
-                    )}
-                  </div>
-                </div>
-              )}
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        ) : (
-          /* 적재함 관리 탭 */
-          <ResizablePanelGroup direction="horizontal" className="h-full rounded-lg border">
-            <ResizablePanel defaultSize={45} minSize={30}>
-              <div className="flex h-full flex-col">
-                <div className="flex items-center justify-between border-b px-4 py-2.5">
-                  <span className="text-sm font-semibold">적재함 목록 <span className="text-muted-foreground font-normal">({filteredLoadingUnits.length}건)</span></span>
-                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openLoadModal("create")}>
-                    <Plus className="mr-1 h-3 w-3" /> 등록
-                  </Button>
-                </div>
-                <div className="flex-1 overflow-auto">
-                  <Table>
-                    <TableHeader>
-                      <TableRow className="text-[11px] bg-muted/50">
-                        <TableHead className="p-2">품목코드</TableHead>
-                        <TableHead className="p-2">적재함명</TableHead>
-                        <TableHead className="p-2 w-[80px]">유형</TableHead>
-                        <TableHead className="p-2 w-[90px]">크기(mm)</TableHead>
-                        <TableHead className="p-2 w-[70px] text-right">최대적재</TableHead>
-                        <TableHead className="p-2 w-[55px] text-center">상태</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {loadingLoading ? (
-                        <TableRow><TableCell colSpan={6} className="h-32 text-center"><Loader2 className="mx-auto h-5 w-5 animate-spin" /></TableCell></TableRow>
-                      ) : filteredLoadingUnits.length === 0 ? (
-                        <TableRow><TableCell colSpan={6} className="h-32 text-center text-muted-foreground text-xs">등록된 적재함이 없습니다</TableCell></TableRow>
-                      ) : filteredLoadingUnits.map((l) => (
-                        <TableRow
-                          key={l.id}
-                          className={cn("cursor-pointer text-xs", selectedLoading?.id === l.id && "bg-primary/5")}
-                          onClick={() => selectLoading(l)}
-                        >
-                          <TableCell className="p-2 font-medium truncate max-w-[100px]">{l.loading_code}</TableCell>
-                          <TableCell className="p-2 truncate max-w-[120px]">{l.loading_name}</TableCell>
-                          <TableCell className="p-2">{LOADING_TYPE_LABEL[l.loading_type] || l.loading_type || "-"}</TableCell>
-                          <TableCell className="p-2 text-[10px]">{fmtSize(l.width_mm, l.length_mm, l.height_mm)}</TableCell>
-                          <TableCell className="p-2 text-right">{Number(l.max_load_kg || 0) > 0 ? `${l.max_load_kg}kg` : "-"}</TableCell>
-                          <TableCell className="p-2 text-center">
-                            <Badge variant="outline" className={cn("text-[10px]", getStatusColor(l.status))}>{STATUS_LABEL[l.status] || l.status}</Badge>
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </div>
-              </div>
-            </ResizablePanel>
-            <ResizableHandle withHandle />
-            <ResizablePanel defaultSize={55} minSize={30}>
-              {!selectedLoading ? (
-                <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
-                  <Box className="h-12 w-12 opacity-20 mb-2" />
-                  <p className="text-sm">좌측 목록에서 적재함을 선택하세요</p>
-                </div>
-              ) : (
-                <div className="flex h-full flex-col">
-                  <div className="flex items-center justify-between border-b bg-green-50 dark:bg-green-950/20 px-4 py-3">
-                    <div className="flex items-center gap-3">
-                      <Box className="h-5 w-5 text-green-600" />
-                      <div>
-                        <div className="font-bold text-sm">{selectedLoading.loading_name}</div>
-                        <div className="text-[11px] text-muted-foreground">{selectedLoading.loading_code} · {LOADING_TYPE_LABEL[selectedLoading.loading_type] || selectedLoading.loading_type} · {fmtSize(selectedLoading.width_mm, selectedLoading.length_mm, selectedLoading.height_mm)}mm</div>
-                      </div>
-                    </div>
-                    <div className="flex gap-1">
-                      <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openLoadModal("edit")}><Edit2 className="mr-1 h-3 w-3" /> 수정</Button>
-                      <Button size="sm" variant="destructive" className="h-7 text-xs" onClick={() => handleDeleteLoading(selectedLoading)}><Trash2 className="mr-1 h-3 w-3" /> 삭제</Button>
-                    </div>
-                  </div>
-                  <div className="flex items-center justify-between px-4 py-2 border-b">
-                    <span className="text-xs font-semibold text-muted-foreground">적재 가능 포장단위 ({loadingPkgs.length}건)</span>
-                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openPkgMatchModal}><Plus className="mr-1 h-3 w-3" /> 포장단위 추가</Button>
-                  </div>
-                  <div className="flex-1 overflow-auto">
-                    {loadingPkgsLoading ? (
-                      <div className="flex h-32 items-center justify-center"><Loader2 className="h-5 w-5 animate-spin" /></div>
-                    ) : loadingPkgs.length === 0 ? (
-                      <div className="flex h-32 items-center justify-center text-muted-foreground text-xs">등록된 포장단위가 없습니다</div>
-                    ) : (
-                      <Table>
-                        <TableHeader>
-                          <TableRow className="text-[11px]">
-                            <TableHead className="p-2">포장코드</TableHead>
-                            <TableHead className="p-2">포장명</TableHead>
-                            <TableHead className="p-2 w-[70px]">유형</TableHead>
-                            <TableHead className="p-2 w-[80px] text-right">최대수량</TableHead>
-                            <TableHead className="p-2 w-[70px]">적재방향</TableHead>
-                            <TableHead className="p-2 w-[40px]" />
-                          </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                          {loadingPkgs.map((lp) => (
-                            <TableRow key={lp.id} className="text-xs">
-                              <TableCell className="p-2 font-medium">{lp.pkg_code}</TableCell>
-                              <TableCell className="p-2">{lp.pkg_name || "-"}</TableCell>
-                              <TableCell className="p-2">{PKG_TYPE_LABEL[lp.pkg_type || ""] || lp.pkg_type || "-"}</TableCell>
-                              <TableCell className="p-2 text-right font-semibold">{Number(lp.max_load_qty).toLocaleString()}</TableCell>
-                              <TableCell className="p-2">{lp.load_method || "-"}</TableCell>
-                              <TableCell className="p-2 text-center">
-                                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeleteLoadPkg(lp)}><X className="h-3 w-3" /></Button>
-                              </TableCell>
-                            </TableRow>
-                          ))}
-                        </TableBody>
-                      </Table>
-                    )}
-                  </div>
-                </div>
-              )}
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        )}
+      {/* 3. 액션 바 */}
+      <div className="flex shrink-0 items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold">
+            {activeTab === "packing" ? "포장재 목록" : "적재함 목록"}
+          </h3>
+          {(activeTab === "packing" ? pkgLoading : loadingLoading) && (
+            <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+          )}
+        </div>
+        <div className="flex items-center gap-1.5">
+          {activeTab === "packing" && selectedPkg && (
+            <>
+              <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openPkgModal("edit")}>
+                <Edit2 className="mr-1 h-3 w-3" /> 수정
+              </Button>
+              <Button
+                size="sm" variant="outline"
+                className="h-7 text-xs text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                onClick={() => handleDeletePkg(selectedPkg)}
+              >
+                <Trash2 className="mr-1 h-3 w-3" /> 삭제
+              </Button>
+              <div className="h-4 w-px bg-border" />
+            </>
+          )}
+          {activeTab === "loading" && selectedLoading && (
+            <>
+              <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openLoadModal("edit")}>
+                <Edit2 className="mr-1 h-3 w-3" /> 수정
+              </Button>
+              <Button
+                size="sm" variant="outline"
+                className="h-7 text-xs text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                onClick={() => handleDeleteLoading(selectedLoading)}
+              >
+                <Trash2 className="mr-1 h-3 w-3" /> 삭제
+              </Button>
+              <div className="h-4 w-px bg-border" />
+            </>
+          )}
+          <Button
+            size="sm"
+            onClick={() => activeTab === "packing" ? openPkgModal("create") : openLoadModal("create")}
+          >
+            <Plus className="mr-1 h-3.5 w-3.5" /> 등록
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
       </div>
 
-      {/* 포장재 등록/수정 모달 */}
-      <FullscreenDialog open={pkgModalOpen} onOpenChange={setPkgModalOpen}
-        title={pkgModalMode === "create" ? "포장재 등록" : "포장재 수정"}
-        description="품목정보에서 포장재를 선택하면 코드와 이름이 자동 연동됩니다."
-        footer={
-          <div className="flex gap-2">
-            <Button variant="outline" onClick={() => setPkgModalOpen(false)}>취소</Button>
-            <Button onClick={savePkgUnit} disabled={saving}>{saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장</Button>
+      {/* 4. 콘텐츠 영역 */}
+      {activeTab === "packing" ? (
+        <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+          {/* 포장재 목록 테이블 */}
+          <div className={cn("overflow-auto", selectedPkg ? "flex-[0_0_50%] border-b" : "flex-1")}>
+            <EDataTable
+              columns={ts.visibleColumns.map((col): EDataTableColumn<PkgUnit> => {
+                const renderMap: Record<string, Partial<EDataTableColumn<PkgUnit>>> = {
+                  pkg_type: { width: "w-[80px]", render: (v: any) => PKG_TYPE_LABEL[v] || v || "-" },
+                  size: { width: "w-[100px]", render: (_v: any, row: any) => fmtSize(row.width_mm, row.length_mm, row.height_mm) },
+                  max_weight: { width: "w-[80px]", align: "right", render: (v: any) => Number(v || 0) > 0 ? `${v}kg` : "-" },
+                  max_load_kg: { width: "w-[80px]", align: "right", render: (v: any) => Number(v || 0) > 0 ? `${v}kg` : "-" },
+                  status: { width: "w-[60px]", align: "center", render: (v: any) => (
+                    <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(v))}>
+                      {STATUS_LABEL[v] || v}
+                    </span>
+                  )},
+                };
+                return { key: col.key, label: col.label, ...renderMap[col.key] };
+              })}
+              data={ts.groupData(filteredPkgUnits)}
+              rowKey={(row) => String(row.id)}
+              loading={pkgLoading}
+              emptyMessage="등록된 포장재가 없어요"
+              selectedId={selectedPkg ? String(selectedPkg.id) : null}
+              onSelect={(id) => {
+                const pkg = filteredPkgUnits.find((p) => String(p.id) === id);
+                if (pkg) selectPkg(pkg);
+              }}
+              showPagination={false}
+              draggableColumns
+              columnOrderKey="c16-packaging-pkg"
+            />
           </div>
-        }
-      >
-        <div className="space-y-4 p-6">
-          {/* 품목정보 연결 */}
-          {pkgModalMode === "create" && (
-            <div className="rounded-lg border bg-blue-50 dark:bg-blue-950/20 p-4">
-              <Label className="text-xs font-semibold mb-2 block">품목정보 연결 (구분: 포장재)</Label>
-              <Popover open={pkgItemPopoverOpen} onOpenChange={setPkgItemPopoverOpen}>
-                <PopoverTrigger asChild>
-                  <Button variant="outline" role="combobox" className="w-full justify-between h-9 text-sm font-normal">
-                    {pkgForm.pkg_code
-                      ? `${pkgForm.pkg_name} (${pkgForm.pkg_code})`
-                      : "품목정보에서 포장재를 선택하세요"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+
+          {/* 매칭 품목 서브패널 */}
+          {selectedPkg && (
+            <>
+              <div className="flex shrink-0 items-center justify-between bg-muted/50 px-4 py-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">매칭 품목</span>
+                  <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+                    {pkgItems.length}건
+                  </span>
+                  <span className="max-w-[200px] truncate text-[11px] text-muted-foreground">
+                    — {selectedPkg.pkg_name}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openItemMatchModal}>
+                    <Plus className="mr-1 h-3 w-3" /> 품목 추가
                   </Button>
-                </PopoverTrigger>
-                <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
-                  <Command filter={(value, search) => {
-                    const item = pkgItemOptions.find((i) => i.id === value);
-                    if (!item) return 0;
-                    const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
-                    return target.includes(search.toLowerCase()) ? 1 : 0;
-                  }}>
-                    <CommandInput placeholder="품목코드 / 품목명 검색..." />
-                    <CommandList className="max-h-[200px]">
-                      <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
-                      {pkgItemOptions.map((item) => (
-                        <CommandItem key={item.id} value={item.id} onSelect={() => onPkgItemSelect(item)} className="text-xs">
-                          <Check className={cn("mr-2 h-3 w-3", pkgForm.pkg_code === item.item_number ? "opacity-100" : "opacity-0")} />
-                          <span className="font-medium">{item.item_name}</span>
-                          <span className="ml-2 text-muted-foreground">{item.item_number}</span>
-                          {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
-                        </CommandItem>
+                  <Button
+                    size="sm" variant="ghost" className="h-7 w-7 p-0 text-muted-foreground"
+                    onClick={() => { setSelectedPkg(null); setPkgItems([]); }}
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <div className="flex-1 overflow-auto">
+                {pkgItemsLoading ? (
+                  <div className="flex h-24 items-center justify-center">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : pkgItems.length === 0 ? (
+                  <div className="flex h-24 flex-col items-center justify-center gap-1.5">
+                    <Inbox className="h-5 w-5 text-muted-foreground/40" />
+                    <p className="text-xs text-muted-foreground">매칭된 품목이 없어요</p>
+                  </div>
+                ) : (
+                  <Table>
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                        <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장수량</TableHead>
+                        <TableHead className="p-2 w-[40px]" />
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {pkgItems.map((item) => (
+                        <TableRow key={item.id} className="text-xs">
+                          <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
+                          <TableCell className="p-2">{item.item_name || "-"}</TableCell>
+                          <TableCell className="p-2">{item.spec || "-"}</TableCell>
+                          <TableCell className="p-2">{item.unit || "EA"}</TableCell>
+                          <TableCell className="p-2 text-right font-semibold">{Number(item.pkg_qty).toLocaleString()}</TableCell>
+                          <TableCell className="p-2 text-center">
+                            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeletePkgItem(item)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
                       ))}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
+                    </TableBody>
+                  </Table>
+                )}
+              </div>
+            </>
           )}
-          <div className="grid grid-cols-2 gap-4">
-            <div><Label className="text-xs">품목코드</Label><Input value={pkgForm.pkg_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
-            <div><Label className="text-xs">포장명</Label><Input value={pkgForm.pkg_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
-            <div>
-              <Label className="text-xs">포장유형 <span className="text-destructive">*</span></Label>
-              <Select value={pkgForm.pkg_type || ""} onValueChange={(v) => setPkgForm((p) => ({ ...p, pkg_type: v }))}>
-                <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
-                <SelectContent>{Object.entries(PKG_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
-              </Select>
-            </div>
-            <div>
-              <Label className="text-xs">상태</Label>
-              <Select value={pkgForm.status || "ACTIVE"} onValueChange={(v) => setPkgForm((p) => ({ ...p, status: v }))}>
-                <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
-                <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
-              </Select>
-            </div>
-          </div>
-          <div>
-            <Label className="text-xs font-semibold">규격정보</Label>
-            <div className="grid grid-cols-3 gap-3 mt-2">
-              <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={pkgForm.width_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={pkgForm.length_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={pkgForm.height_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={pkgForm.self_weight_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-              <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={pkgForm.max_load_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-              <div><Label className="text-[10px]">내용적(L)</Label><Input type="number" value={pkgForm.volume_l || ""} onChange={(e) => setPkgForm((p) => ({ ...p, volume_l: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-            </div>
-          </div>
-          <div><Label className="text-xs">비고</Label><Input value={pkgForm.remarks || ""} onChange={(e) => setPkgForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
         </div>
-      </FullscreenDialog>
+      ) : (
+        /* 적재함 관리 탭 */
+        <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+          {/* 적재함 목록 테이블 */}
+          <div className={cn("overflow-auto", selectedLoading ? "flex-[0_0_50%] border-b" : "flex-1")}>
+            <Table>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted">
+                  <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">적재함명</TableHead>
+                  <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">크기(mm)</TableHead>
+                  <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대적재</TableHead>
+                  <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {loadingLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-32 text-center">
+                      <Loader2 className="mx-auto h-5 w-5 animate-spin text-muted-foreground" />
+                    </TableCell>
+                  </TableRow>
+                ) : filteredLoadingUnits.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-40 text-center">
+                      <div className="flex flex-col items-center justify-center gap-2">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-full border-2 border-dashed border-muted-foreground/20">
+                          <Inbox className="h-6 w-6 text-muted-foreground/40" />
+                        </div>
+                        <p className="text-xs text-muted-foreground">등록된 적재함이 없어요</p>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ) : filteredLoadingUnits.map((l) => (
+                  <TableRow
+                    key={l.id}
+                    className={cn(
+                      "cursor-pointer text-xs transition-colors",
+                      selectedLoading?.id === l.id ? "bg-primary/5" : "hover:bg-muted/50"
+                    )}
+                    onClick={() => selectLoading(l)}
+                  >
+                    <TableCell className="p-2 font-medium">{l.loading_code}</TableCell>
+                    <TableCell className="p-2">{l.loading_name}</TableCell>
+                    <TableCell className="p-2">{LOADING_TYPE_LABEL[l.loading_type] || l.loading_type || "-"}</TableCell>
+                    <TableCell className="p-2 text-[10px] tabular-nums">{fmtSize(l.width_mm, l.length_mm, l.height_mm)}</TableCell>
+                    <TableCell className="p-2 text-right">{Number(l.max_load_kg || 0) > 0 ? `${l.max_load_kg}kg` : "-"}</TableCell>
+                    <TableCell className="p-2 text-center">
+                      <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(l.status))}>
+                        {STATUS_LABEL[l.status] || l.status}
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          {/* 포장구성 서브패널 */}
+          {selectedLoading && (
+            <>
+              <div className="flex shrink-0 items-center justify-between bg-muted/50 px-4 py-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">적재 가능 포장단위</span>
+                  <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+                    {loadingPkgs.length}건
+                  </span>
+                  <span className="max-w-[200px] truncate text-[11px] text-muted-foreground">
+                    — {selectedLoading.loading_name}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openPkgMatchModal}>
+                    <Plus className="mr-1 h-3 w-3" /> 포장단위 추가
+                  </Button>
+                  <Button
+                    size="sm" variant="ghost" className="h-7 w-7 p-0 text-muted-foreground"
+                    onClick={() => { setSelectedLoading(null); setLoadingPkgs([]); }}
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <div className="flex-1 overflow-auto">
+                {loadingPkgsLoading ? (
+                  <div className="flex h-24 items-center justify-center">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : loadingPkgs.length === 0 ? (
+                  <div className="flex h-24 flex-col items-center justify-center gap-1.5">
+                    <Inbox className="h-5 w-5 text-muted-foreground/40" />
+                    <p className="text-xs text-muted-foreground">등록된 포장단위가 없어요</p>
+                  </div>
+                ) : (
+                  <Table>
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장코드</TableHead>
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장명</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                        <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대수량</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">적재방향</TableHead>
+                        <TableHead className="p-2 w-[40px]" />
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {loadingPkgs.map((lp) => (
+                        <TableRow key={lp.id} className="text-xs">
+                          <TableCell className="p-2 font-medium">{lp.pkg_code}</TableCell>
+                          <TableCell className="p-2">{lp.pkg_name || "-"}</TableCell>
+                          <TableCell className="p-2">{PKG_TYPE_LABEL[lp.pkg_type || ""] || lp.pkg_type || "-"}</TableCell>
+                          <TableCell className="p-2 text-right font-semibold">{Number(lp.max_load_qty).toLocaleString()}</TableCell>
+                          <TableCell className="p-2">{lp.load_method || "-"}</TableCell>
+                          <TableCell className="p-2 text-center">
+                            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeleteLoadPkg(lp)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* 포장재 등록/수정 모달 */}
+      <Dialog open={pkgModalOpen} onOpenChange={setPkgModalOpen}>
+        <DialogContent className="max-w-2xl" style={{ maxHeight: "90vh", overflowY: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{pkgModalMode === "create" ? "포장재 등록" : "포장재 수정"}</DialogTitle>
+            <DialogDescription>품목정보에서 포장재를 선택하면 코드와 이름이 자동 연동됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            {pkgModalMode === "create" && (
+              <div className="rounded-lg border bg-muted/50 p-4">
+                <Label className="mb-2 block text-xs font-semibold">품목정보 연결 (구분: 포장재)</Label>
+                <Popover open={pkgItemPopoverOpen} onOpenChange={setPkgItemPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" role="combobox" className="h-9 w-full justify-between text-sm font-normal">
+                      {pkgForm.pkg_code ? `${pkgForm.pkg_name} (${pkgForm.pkg_code})` : "품목정보에서 포장재를 선택하세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                    <Command filter={(value, search) => {
+                      const item = pkgItemOptions.find((i) => i.id === value);
+                      if (!item) return 0;
+                      const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
+                      return target.includes(search.toLowerCase()) ? 1 : 0;
+                    }}>
+                      <CommandInput placeholder="품목코드 / 품목명 검색..." />
+                      <CommandList className="max-h-[200px]">
+                        <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                        {pkgItemOptions.map((item) => (
+                          <CommandItem key={item.id} value={item.id} onSelect={() => onPkgItemSelect(item)} className="text-xs">
+                            <Check className={cn("mr-2 h-3 w-3", pkgForm.pkg_code === item.item_number ? "opacity-100" : "opacity-0")} />
+                            <span className="font-medium">{item.item_name}</span>
+                            <span className="ml-2 text-muted-foreground">{item.item_number}</span>
+                            {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
+                          </CommandItem>
+                        ))}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+            <div className="grid grid-cols-2 gap-4">
+              <div><Label className="text-xs">품목코드</Label><Input value={pkgForm.pkg_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div><Label className="text-xs">포장명</Label><Input value={pkgForm.pkg_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div>
+                <Label className="text-xs">포장유형 <span className="text-destructive">*</span></Label>
+                <Select value={pkgForm.pkg_type || ""} onValueChange={(v) => setPkgForm((p) => ({ ...p, pkg_type: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>{Object.entries(PKG_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">상태</Label>
+                <Select value={pkgForm.status || "ACTIVE"} onValueChange={(v) => setPkgForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold">규격정보</Label>
+              <div className="mt-2 grid grid-cols-3 gap-3">
+                <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={pkgForm.width_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={pkgForm.length_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={pkgForm.height_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={pkgForm.self_weight_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={pkgForm.max_load_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">내용적(L)</Label><Input type="number" value={pkgForm.volume_l || ""} onChange={(e) => setPkgForm((p) => ({ ...p, volume_l: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+              </div>
+            </div>
+            <div><Label className="text-xs">비고</Label><Input value={pkgForm.remarks || ""} onChange={(e) => setPkgForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setPkgModalOpen(false)}>취소</Button>
+            <Button onClick={savePkgUnit} disabled={saving}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 적재함 등록/수정 모달 */}
-      <FullscreenDialog open={loadModalOpen} onOpenChange={setLoadModalOpen}
-        title={loadModalMode === "create" ? "적재함 등록" : "적재함 수정"}
-        description="품목정보에서 적재함을 선택하면 코드와 이름이 자동 연동됩니다."
-        footer={
-          <div className="flex gap-2">
+      <Dialog open={loadModalOpen} onOpenChange={setLoadModalOpen}>
+        <DialogContent className="max-w-2xl" style={{ maxHeight: "90vh", overflowY: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{loadModalMode === "create" ? "적재함 등록" : "적재함 수정"}</DialogTitle>
+            <DialogDescription>품목정보에서 적재함을 선택하면 코드와 이름이 자동 연동됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            {loadModalMode === "create" && (
+              <div className="rounded-lg border bg-muted/50 p-4">
+                <Label className="mb-2 block text-xs font-semibold">품목정보 연결 (구분: 적재함)</Label>
+                <Popover open={loadItemPopoverOpen} onOpenChange={setLoadItemPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" role="combobox" className="h-9 w-full justify-between text-sm font-normal">
+                      {loadForm.loading_code ? `${loadForm.loading_name} (${loadForm.loading_code})` : "품목정보에서 적재함을 선택하세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                    <Command filter={(value, search) => {
+                      const item = loadItemOptions.find((i) => i.id === value);
+                      if (!item) return 0;
+                      const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
+                      return target.includes(search.toLowerCase()) ? 1 : 0;
+                    }}>
+                      <CommandInput placeholder="품목코드 / 품목명 검색..." />
+                      <CommandList className="max-h-[200px]">
+                        <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                        {loadItemOptions.map((item) => (
+                          <CommandItem key={item.id} value={item.id} onSelect={() => onLoadItemSelect(item)} className="text-xs">
+                            <Check className={cn("mr-2 h-3 w-3", loadForm.loading_code === item.item_number ? "opacity-100" : "opacity-0")} />
+                            <span className="font-medium">{item.item_name}</span>
+                            <span className="ml-2 text-muted-foreground">{item.item_number}</span>
+                            {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
+                          </CommandItem>
+                        ))}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+            <div className="grid grid-cols-2 gap-4">
+              <div><Label className="text-xs">적재함코드</Label><Input value={loadForm.loading_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div><Label className="text-xs">적재함명</Label><Input value={loadForm.loading_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div>
+                <Label className="text-xs">적재유형 <span className="text-destructive">*</span></Label>
+                <Select value={loadForm.loading_type || ""} onValueChange={(v) => setLoadForm((p) => ({ ...p, loading_type: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>{Object.entries(LOADING_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">상태</Label>
+                <Select value={loadForm.status || "ACTIVE"} onValueChange={(v) => setLoadForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold">규격정보</Label>
+              <div className="mt-2 grid grid-cols-3 gap-3">
+                <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={loadForm.width_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={loadForm.length_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={loadForm.height_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={loadForm.self_weight_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={loadForm.max_load_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대단수</Label><Input type="number" value={loadForm.max_stack || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_stack: e.target.value }))} className="h-9 text-xs" /></div>
+              </div>
+            </div>
+            <div><Label className="text-xs">비고</Label><Input value={loadForm.remarks || ""} onChange={(e) => setLoadForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
+          </div>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setLoadModalOpen(false)}>취소</Button>
-            <Button onClick={saveLoadingUnit} disabled={saving}>{saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장</Button>
-          </div>
-        }
-      >
-        <div className="space-y-4 p-6">
-          {loadModalMode === "create" && (
-            <div className="rounded-lg border bg-green-50 dark:bg-green-950/20 p-4">
-              <Label className="text-xs font-semibold mb-2 block">품목정보 연결 (구분: 적재함)</Label>
-              <Popover open={loadItemPopoverOpen} onOpenChange={setLoadItemPopoverOpen}>
-                <PopoverTrigger asChild>
-                  <Button variant="outline" role="combobox" className="w-full justify-between h-9 text-sm font-normal">
-                    {loadForm.loading_code
-                      ? `${loadForm.loading_name} (${loadForm.loading_code})`
-                      : "품목정보에서 적재함을 선택하세요"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
-                  <Command filter={(value, search) => {
-                    const item = loadItemOptions.find((i) => i.id === value);
-                    if (!item) return 0;
-                    const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
-                    return target.includes(search.toLowerCase()) ? 1 : 0;
-                  }}>
-                    <CommandInput placeholder="품목코드 / 품목명 검색..." />
-                    <CommandList className="max-h-[200px]">
-                      <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
-                      {loadItemOptions.map((item) => (
-                        <CommandItem key={item.id} value={item.id} onSelect={() => onLoadItemSelect(item)} className="text-xs">
-                          <Check className={cn("mr-2 h-3 w-3", loadForm.loading_code === item.item_number ? "opacity-100" : "opacity-0")} />
-                          <span className="font-medium">{item.item_name}</span>
-                          <span className="ml-2 text-muted-foreground">{item.item_number}</span>
-                          {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
-                        </CommandItem>
-                      ))}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
-          )}
-          <div className="grid grid-cols-2 gap-4">
-            <div><Label className="text-xs">적재함코드</Label><Input value={loadForm.loading_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
-            <div><Label className="text-xs">적재함명</Label><Input value={loadForm.loading_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
-            <div>
-              <Label className="text-xs">적재유형 <span className="text-destructive">*</span></Label>
-              <Select value={loadForm.loading_type || ""} onValueChange={(v) => setLoadForm((p) => ({ ...p, loading_type: v }))}>
-                <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
-                <SelectContent>{Object.entries(LOADING_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
-              </Select>
-            </div>
-            <div>
-              <Label className="text-xs">상태</Label>
-              <Select value={loadForm.status || "ACTIVE"} onValueChange={(v) => setLoadForm((p) => ({ ...p, status: v }))}>
-                <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
-                <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
-              </Select>
-            </div>
-          </div>
-          <div>
-            <Label className="text-xs font-semibold">규격정보</Label>
-            <div className="grid grid-cols-3 gap-3 mt-2">
-              <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={loadForm.width_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={loadForm.length_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={loadForm.height_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={loadForm.self_weight_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-              <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={loadForm.max_load_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-              <div><Label className="text-[10px]">최대단수</Label><Input type="number" value={loadForm.max_stack || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_stack: e.target.value }))} className="h-8 text-xs" /></div>
-            </div>
-          </div>
-          <div><Label className="text-xs">비고</Label><Input value={loadForm.remarks || ""} onChange={(e) => setLoadForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
-        </div>
-      </FullscreenDialog>
+            <Button onClick={saveLoadingUnit} disabled={saving}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 품목 추가 모달 (포장재 매칭) */}
       <Dialog open={itemMatchModalOpen} onOpenChange={setItemMatchModalOpen}>
@@ -791,7 +860,9 @@ export default function PackagingPage() {
             <DialogDescription>포장재에 매칭할 품목을 검색하여 추가합니다.</DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
-            <Input placeholder="품목코드 / 품목명 검색 (입력 시 자동 검색)" value={itemMatchKeyword}
+            <Input
+              placeholder="품목코드 / 품목명 검색 (입력 시 자동 검색)"
+              value={itemMatchKeyword}
               onChange={(e) => {
                 setItemMatchKeyword(e.target.value);
                 const kw = e.target.value;
@@ -803,30 +874,34 @@ export default function PackagingPage() {
                   } catch { /* ignore */ }
                 }, 300);
               }}
-              className="h-9 text-xs" />
-            <div className="max-h-[300px] overflow-auto border rounded">
+              className="h-9 text-xs"
+            />
+            <div className="max-h-[300px] overflow-auto rounded border">
               <Table>
-                <TableHeader>
-                  <TableRow className="text-[11px]">
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
                     <TableHead className="p-2 w-[30px]" />
-                    <TableHead className="p-2 w-[130px]">품목코드</TableHead>
-                    <TableHead className="p-2">품목명</TableHead>
-                    <TableHead className="p-2 w-[100px]">규격</TableHead>
-                    <TableHead className="p-2 w-[80px]">재질</TableHead>
-                    <TableHead className="p-2 w-[50px]">단위</TableHead>
+                    <TableHead className="w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                    <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {itemMatchResults.filter(i => !pkgItems.some(pi => pi.item_number === i.item_number)).length === 0 ? (
-                    <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground text-xs h-16">검색 결과가 없습니다</TableCell></TableRow>
+                    <TableRow><TableCell colSpan={6} className="h-16 text-center text-[13px] text-muted-foreground">검색 결과가 없습니다</TableCell></TableRow>
                   ) : itemMatchResults.filter(i => !pkgItems.some(pi => pi.item_number === i.item_number)).map((item) => (
-                    <TableRow key={item.id} className={cn("cursor-pointer text-xs", itemMatchSelected?.id === item.id && "bg-primary/10")}
-                      onClick={() => setItemMatchSelected(item)}>
+                    <TableRow
+                      key={item.id}
+                      className={cn("cursor-pointer text-xs", itemMatchSelected?.id === item.id && "bg-primary/10")}
+                      onClick={() => setItemMatchSelected(item)}
+                    >
                       <TableCell className="p-2 text-center">{itemMatchSelected?.id === item.id ? "✓" : ""}</TableCell>
-                      <TableCell className="p-2 font-medium truncate max-w-[130px]">{item.item_number}</TableCell>
-                      <TableCell className="p-2 truncate max-w-[200px]">{item.item_name}</TableCell>
-                      <TableCell className="p-2 truncate">{item.spec || "-"}</TableCell>
-                      <TableCell className="p-2 truncate">{item.material || "-"}</TableCell>
+                      <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
+                      <TableCell className="p-2">{item.item_name}</TableCell>
+                      <TableCell className="p-2">{item.spec || "-"}</TableCell>
+                      <TableCell className="p-2">{item.material || "-"}</TableCell>
                       <TableCell className="p-2">{item.unit || "EA"}</TableCell>
                     </TableRow>
                   ))}
@@ -836,17 +911,26 @@ export default function PackagingPage() {
             <div className="flex items-end gap-4">
               <div className="flex-1">
                 <Label className="text-xs">선택된 품목</Label>
-                <Input value={itemMatchSelected ? `${itemMatchSelected.item_name} (${itemMatchSelected.item_number})` : ""} readOnly className="h-9 bg-muted text-xs" />
+                <Input
+                  value={itemMatchSelected ? `${itemMatchSelected.item_name} (${itemMatchSelected.item_number})` : ""}
+                  readOnly className="h-9 bg-muted text-xs"
+                />
               </div>
               <div className="w-[120px]">
                 <Label htmlFor="pkg-item-match-qty" className="text-xs">포장수량(EA) <span className="text-destructive">*</span></Label>
-                <Input id="pkg-item-match-qty" type="number" value={itemMatchQty} onChange={(e) => setItemMatchQty(Number(e.target.value) || 0)} min={1} className="h-9 text-xs" />
+                <Input
+                  id="pkg-item-match-qty" type="number" value={itemMatchQty}
+                  onChange={(e) => setItemMatchQty(Number(e.target.value) || 0)}
+                  min={1} className="h-9 text-xs"
+                />
               </div>
             </div>
           </div>
           <DialogFooter>
             <Button type="button" variant="outline" onClick={() => setItemMatchModalOpen(false)}>취소</Button>
-            <Button type="button" data-action-type="custom" onClick={saveItemMatch} disabled={saving || !itemMatchSelected}>{saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가</Button>
+            <Button type="button" data-action-type="custom" onClick={saveItemMatch} disabled={saving || !itemMatchSelected}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -865,16 +949,16 @@ export default function PackagingPage() {
               onChange={(e) => setPkgMatchSearchKw(e.target.value)}
               className="h-9 text-xs"
             />
-            <div className="max-h-[300px] overflow-auto border rounded">
+            <div className="max-h-[300px] overflow-auto rounded border">
               <Table>
-                <TableHeader>
-                  <TableRow className="text-[11px]">
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
                     <TableHead className="p-2 w-[30px]" />
-                    <TableHead className="p-2 w-[120px]">포장코드</TableHead>
-                    <TableHead className="p-2">포장명</TableHead>
-                    <TableHead className="p-2 w-[70px]">유형</TableHead>
-                    <TableHead className="p-2 w-[100px]">크기(mm)</TableHead>
-                    <TableHead className="p-2 w-[80px] text-right">최대중량</TableHead>
+                    <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장코드</TableHead>
+                    <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장명</TableHead>
+                    <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">크기(mm)</TableHead>
+                    <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대중량</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -886,10 +970,13 @@ export default function PackagingPage() {
                       && (!kw || p.pkg_code?.toLowerCase().includes(kw) || p.pkg_name?.toLowerCase().includes(kw))
                     );
                     return filtered.length === 0 ? (
-                      <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground text-xs h-16">추가 가능한 포장단위가 없습니다</TableCell></TableRow>
+                      <TableRow><TableCell colSpan={6} className="h-16 text-center text-[13px] text-muted-foreground">추가 가능한 포장단위가 없습니다</TableCell></TableRow>
                     ) : filtered.map((p) => (
-                      <TableRow key={p.id} className={cn("cursor-pointer text-xs", pkgMatchSelected?.id === p.id && "bg-primary/10")}
-                        onClick={() => setPkgMatchSelected(p)}>
+                      <TableRow
+                        key={p.id}
+                        className={cn("cursor-pointer text-xs", pkgMatchSelected?.id === p.id && "bg-primary/10")}
+                        onClick={() => setPkgMatchSelected(p)}
+                      >
                         <TableCell className="p-2 text-center">{pkgMatchSelected?.id === p.id ? "✓" : ""}</TableCell>
                         <TableCell className="p-2 font-medium">{p.pkg_code}</TableCell>
                         <TableCell className="p-2">{p.pkg_name}</TableCell>
@@ -905,22 +992,42 @@ export default function PackagingPage() {
             <div className="flex items-end gap-4">
               <div className="w-[150px]">
                 <Label htmlFor="loading-pkg-match-qty" className="text-xs">최대적재수량 <span className="text-destructive">*</span></Label>
-                <Input id="loading-pkg-match-qty" type="number" value={pkgMatchQty} onChange={(e) => setPkgMatchQty(Number(e.target.value) || 0)} min={1} className="h-9 text-xs" />
+                <Input
+                  id="loading-pkg-match-qty" type="number" value={pkgMatchQty}
+                  onChange={(e) => setPkgMatchQty(Number(e.target.value) || 0)}
+                  min={1} className="h-9 text-xs"
+                />
               </div>
               <div className="flex-1">
                 <Label className="text-xs">적재방향</Label>
-                <Input value={pkgMatchMethod} onChange={(e) => setPkgMatchMethod(e.target.value)} placeholder="수직/수평/혼합" className="h-9 text-xs" />
+                <Input
+                  value={pkgMatchMethod}
+                  onChange={(e) => setPkgMatchMethod(e.target.value)}
+                  placeholder="수직/수평/혼합"
+                  className="h-9 text-xs"
+                />
               </div>
             </div>
           </div>
           <DialogFooter>
             <Button type="button" variant="outline" onClick={() => setPkgMatchModalOpen(false)}>취소</Button>
-            <Button type="button" data-action-type="custom" onClick={savePkgMatch} disabled={saving || !pkgMatchSelected}>{saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가</Button>
+            <Button type="button" data-action-type="custom" onClick={savePkgMatch} disabled={saving || !pkgMatchSelected}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_10/logistics/receiving/page.tsx b/frontend/app/(main)/COMPANY_10/logistics/receiving/page.tsx
index 4222a23d..85cdc23c 100644
--- a/frontend/app/(main)/COMPANY_10/logistics/receiving/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/logistics/receiving/page.tsx
@@ -18,7 +18,14 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -31,18 +38,29 @@ import {
   Search,
   Plus,
   Trash2,
-  RotateCcw,
   Loader2,
-  Package,
+  Inbox,
   X,
   Save,
   ChevronRight,
+  ChevronDown,
   ChevronLeft,
   ChevronsLeft,
   ChevronsRight,
+  Settings2,
+  Filter,
+  Check,
+  ArrowUp,
+  ArrowDown,
 } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+// EDataTable 제거 — 마스터-디테일 그룹 테이블로 교체
+// API: /receiving/*
 import {
   getReceivingList,
   createReceiving,
@@ -59,22 +77,186 @@ import {
   type WarehouseOption,
 } from "@/lib/api/receiving";
 
+const GRID_COLUMNS = [
+  { key: "inbound_number", label: "입고번호" },
+  { key: "inbound_type", label: "입고유형" },
+  { key: "inbound_date", label: "입고일" },
+  { key: "reference_number", label: "참조번호" },
+  { key: "source_type", label: "데이터출처" },
+  { key: "supplier_name", label: "공급처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "inbound_qty", label: "입고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+  { key: "warehouse_name", label: "창고" },
+  { key: "inbound_status", label: "입고상태" },
+  { key: "remark", label: "비고" },
+];
+
+// 마스터 헤더 레이아웃 (입고번호 뒤, 디테일 7컬럼 위에 colSpan으로 맵핑)
+const MASTER_BODY_LAYOUT = [
+  { key: "inbound_type", label: "입고유형", colSpan: 1 },
+  { key: "inbound_date", label: "입고일", colSpan: 1 },
+  { key: "reference_number", label: "참조번호", colSpan: 1 },
+  { key: "supplier_name", label: "공급처", colSpan: 1 },
+  { key: "warehouse_name", label: "창고", colSpan: 1 },
+  { key: "inbound_status", label: "입고상태", colSpan: 1 },
+  { key: "memo", label: "비고", colSpan: 1 },
+];
+
+// 디테일 헤더 컬럼
+const DETAIL_HEADER_COLS = [
+  { key: "source_table", label: "출처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "inbound_qty", label: "입고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+];
+
+// 마스터 필드 키 목록 (필터 분류용)
+const MASTER_KEYS = new Set(["inbound_number", ...MASTER_BODY_LAYOUT.map((c) => c.key)]);
+
+// 디테일 필드 키 매핑 (GRID_COLUMNS key → DETAIL_HEADER_COLS key)
+const DETAIL_KEY_MAP: Record<string, string> = {
+  source_type: "source_table",
+  item_number: "item_number",
+  item_name: "item_name",
+  spec: "spec",
+  inbound_qty: "inbound_qty",
+  unit_price: "unit_price",
+  total_amount: "total_amount",
+};
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 // 입고유형 옵션
 const INBOUND_TYPES = [
-  { value: "구매입고", label: "구매입고", color: "bg-blue-100 text-blue-800" },
-  { value: "반품입고", label: "반품입고", color: "bg-pink-100 text-pink-800" },
-  { value: "기타입고", label: "기타입고", color: "bg-gray-100 text-gray-800" },
+  { value: "구매입고", label: "구매입고" },
+  { value: "외주입고", label: "외주입고" },
+  { value: "사급자재입고", label: "사급자재입고" },
+  { value: "반품입고", label: "반품입고" },
+  { value: "기타입고", label: "기타입고" },
 ];
 
+// 입고유형 카테고리 코드→라벨 매핑
+const INBOUND_TYPE_CODE_MAP: Record<string, string> = {
+  CAT_MLYTB8ON_A3AU: "구매입고",
+  CAT_MLYTBMH6_9AB7: "외주입고",
+  CAT_MLYTBSLW_5N81: "사급자재입고",
+  CAT_MLYTBGEV_N23U: "반품입고",
+  CAT_MLYTBYLU_0Z5T: "기타입고",
+};
+const resolveInboundType = (v: string) => INBOUND_TYPE_CODE_MAP[v] || v || "-";
+
 const INBOUND_STATUS_OPTIONS = [
-  { value: "대기", label: "대기", color: "bg-amber-100 text-amber-800" },
-  { value: "입고완료", label: "입고완료", color: "bg-emerald-100 text-emerald-800" },
-  { value: "부분입고", label: "부분입고", color: "bg-amber-100 text-amber-800" },
-  { value: "입고취소", label: "입고취소", color: "bg-red-100 text-red-800" },
+  { value: "대기", label: "대기" },
+  { value: "입고완료", label: "입고완료" },
+  { value: "부분입고", label: "부분입고" },
+  { value: "입고취소", label: "입고취소" },
 ];
 
-const getTypeColor = (type: string) => INBOUND_TYPES.find((t) => t.value === type)?.color || "bg-gray-100 text-gray-800";
-const getStatusColor = (status: string) => INBOUND_STATUS_OPTIONS.find((s) => s.value === status)?.color || "bg-gray-100 text-gray-800";
+const getTypeVariant = (type: string): "default" | "secondary" | "outline" => {
+  switch (type) {
+    case "구매입고": return "default";
+    case "반품입고": return "secondary";
+    default: return "outline";
+  }
+};
+
+const getStatusVariant = (status: string): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "입고완료": return "default";
+    case "부분입고": return "secondary";
+    case "입고취소": return "destructive";
+    default: return "outline";
+  }
+};
 
 // 소스 테이블 한글명 매핑
 const SOURCE_TABLE_LABEL: Record<string, string> = {
@@ -103,17 +285,45 @@ interface SelectedSourceItem {
 }
 
 export default function ReceivingPage() {
+  const ts = useTableSettings("c16-receiving", "inbound_mng", GRID_COLUMNS);
+
+  // ts.visibleColumns 기반 마스터/디테일 컬럼 계산
+  const visibleMasterLayout = useMemo(() => {
+    const ordered: typeof MASTER_BODY_LAYOUT = [];
+    for (const vc of ts.visibleColumns) {
+      const m = MASTER_BODY_LAYOUT.find((ml) => ml.key === vc.key);
+      if (m) ordered.push(m);
+    }
+    return ordered.length > 0 ? ordered : MASTER_BODY_LAYOUT;
+  }, [ts.visibleColumns]);
+
+  const visibleDetailCols = useMemo(() => {
+    const ordered: typeof DETAIL_HEADER_COLS = [];
+    for (const vc of ts.visibleColumns) {
+      const detailKey = DETAIL_KEY_MAP[vc.key];
+      if (detailKey) {
+        const d = DETAIL_HEADER_COLS.find((dc) => dc.key === detailKey);
+        if (d) ordered.push(d);
+      }
+    }
+    return ordered.length > 0 ? ordered : DETAIL_HEADER_COLS;
+  }, [ts.visibleColumns]);
+
+  const TOTAL_COLS = 3 + visibleMasterLayout.length;
+
   // 목록 데이터
   const [data, setData] = useState<InboundItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [checkedIds, setCheckedIds] = useState<string[]>([]);
 
   // 검색 필터
-  const [searchType, setSearchType] = useState("all");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 마스터-디테일 그룹 테이블
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+  const [closingOrders, setClosingOrders] = useState<Set<string>>(new Set());
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
 
   // 등록 모달
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -144,14 +354,8 @@ export default function ReceivingPage() {
   // 구매관리 division 코드 (라벨 기준 조회)
   const [purchaseDivisionCode, setPurchaseDivisionCode] = useState<string>("");
 
-  // 날짜 초기화 + 구매관리 division 코드 로드
+  // 구매관리 division 코드 로드
   useEffect(() => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-
     // division 카테고리에서 "구매관리" 라벨의 코드 조회
     apiClient.get("/table-categories/item_info/division/values").then((res) => {
       const vals = res.data?.data || [];
@@ -164,20 +368,27 @@ export default function ReceivingPage() {
   const fetchList = useCallback(async () => {
     setLoading(true);
     try {
-      const res = await getReceivingList({
-        inbound_type: searchType !== "all" ? searchType : undefined,
-        inbound_status: searchStatus !== "all" ? searchStatus : undefined,
-        search_keyword: searchKeyword || undefined,
-        date_from: searchDateFrom || undefined,
-        date_to: searchDateTo || undefined,
-      });
+      const params: Record<string, string | undefined> = {};
+      for (const f of searchFilters) {
+        if (!f.value) continue;
+        if (f.columnName === "inbound_type") params.inbound_type = f.value;
+        else if (f.columnName === "inbound_status") params.inbound_status = f.value;
+        else if (f.columnName === "inbound_date" && f.operator === "between") {
+          const [from, to] = f.value.split("~").map((s) => s.trim());
+          if (from) params.date_from = from;
+          if (to) params.date_to = to;
+        } else {
+          params.search_keyword = f.value;
+        }
+      }
+      const res = await getReceivingList(params);
       if (res.success) setData(res.data);
     } catch {
       // 에러 무시
     } finally {
       setLoading(false);
     }
-  }, [searchType, searchStatus, searchKeyword, searchDateFrom, searchDateTo]);
+  }, [searchFilters]);
 
   useEffect(() => {
     fetchList();
@@ -195,26 +406,149 @@ export default function ReceivingPage() {
     })();
   }, []);
 
-  // 검색 초기화
-  const handleReset = () => {
-    setSearchType("all");
-    setSearchStatus("all");
-    setSearchKeyword("");
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
+  // 필터 + 정렬 적용된 데이터 -> 그룹핑
+  const filteredGroups = useMemo(() => {
+    // 1차: inbound_number 기준 그룹핑
+    const allGroups: Record<string, { master: InboundItem; details: InboundItem[] }> = {};
+    for (const row of data) {
+      const key = row.inbound_number || "_no_inbound";
+      if (!allGroups[key]) {
+        allGroups[key] = { master: row, details: [] };
+      }
+      allGroups[key].details.push(row);
+    }
+
+    // 마스터 필터 / 디테일 필터 분리
+    const masterFilters: Record<string, Set<string>> = {};
+    const detailFilters: Record<string, Set<string>> = {};
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      if (MASTER_KEYS.has(colKey)) masterFilters[colKey] = values;
+      else detailFilters[colKey] = values;
+    }
+
+    // 2차: 마스터 필터 적용 (그룹 단위)
+    let entries = Object.entries(allGroups);
+    if (Object.keys(masterFilters).length > 0) {
+      entries = entries.filter(([, group]) =>
+        Object.entries(masterFilters).every(([colKey, values]) => {
+          let raw = (group.master as any)?.[colKey] ?? "";
+          // 입고유형은 코드→라벨 변환된 값으로 비교
+          if (colKey === "inbound_type") raw = resolveInboundType(String(raw));
+          return values.has(String(raw));
+        })
+      );
+    }
+
+    // 3차: 디테일 필터 적용 (행 단위)
+    if (Object.keys(detailFilters).length > 0) {
+      entries = entries
+        .map(([inboundNo, group]) => {
+          const filtered = group.details.filter((row) =>
+            Object.entries(detailFilters).every(([colKey, values]) => {
+              let cellVal = (row as any)[colKey] != null ? String((row as any)[colKey]) : "";
+              if (colKey === "source_table") cellVal = SOURCE_TABLE_LABEL[cellVal] || cellVal;
+              return values.has(cellVal);
+            })
+          );
+          return [inboundNo, { ...group, details: filtered }] as [string, typeof group];
+        })
+        .filter(([, group]) => group.details.length > 0);
+    }
+
+    // 4차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      if (MASTER_KEYS.has(key)) {
+        entries.sort(([, a], [, b]) => {
+          let av: any = (a.master as any)?.[key] ?? "";
+          let bv: any = (b.master as any)?.[key] ?? "";
+          if (key === "inbound_type") { av = resolveInboundType(String(av)); bv = resolveInboundType(String(bv)); }
+          const na = Number(av); const nb = Number(bv);
+          if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+          return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+        });
+      } else {
+        entries.forEach(([, group]) => {
+          group.details.sort((a, b) => {
+            const av = (a as any)[key] ?? "";
+            const bv = (b as any)[key] ?? "";
+            const na = Number(av); const nb = Number(bv);
+            if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+            return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+          });
+        });
+      }
+    }
+
+    return Object.fromEntries(entries);
+  }, [data, headerFilters, sortState]);
+
+  // 마스터 컬럼별 고유값 (마스터 헤더 필터용)
+  const masterUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    const seenMasters = new Map<string, InboundItem>();
+    data.forEach((row) => {
+      if (row.inbound_number && !seenMasters.has(row.inbound_number)) {
+        seenMasters.set(row.inbound_number, row);
+      }
+    });
+    const masters = Array.from(seenMasters.values());
+    for (const col of [{ key: "inbound_number", label: "입고번호" }, ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label }))]) {
+      const values = new Set<string>();
+      masters.forEach((m) => {
+        let val = (m as any)?.[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "inbound_type") val = resolveInboundType(String(val));
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 디테일 컬럼별 고유값 (디테일 서브헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of DETAIL_HEADER_COLS) {
+      const values = new Set<string>();
+      data.forEach((row) => {
+        let val = (row as any)[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "source_table") val = SOURCE_TABLE_LABEL[val] || val;
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
   };
 
-  // 체크박스
-  const allChecked = data.length > 0 && checkedIds.length === data.length;
-  const toggleCheckAll = () => {
-    setCheckedIds(allChecked ? [] : data.map((d) => d.id));
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
   };
-  const toggleCheck = (id: string) => {
-    setCheckedIds((prev) =>
-      prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
     );
   };
 
@@ -495,228 +829,356 @@ export default function ReceivingPage() {
   }, [selectedItems]);
 
   return (
-    <div className="flex h-full flex-col gap-4 p-4">
-      {/* 검색 영역 */}
-      <div className="flex flex-wrap items-center gap-2 rounded-lg border bg-card p-4">
-        <Select value={searchType} onValueChange={setSearchType}>
-          <SelectTrigger className="h-9 w-[130px] text-xs">
-            <SelectValue placeholder="입고유형" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">전체 유형</SelectItem>
-            {INBOUND_TYPES.map((t) => (
-              <SelectItem key={t.value} value={t.value}>
-                {t.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Select value={searchStatus} onValueChange={setSearchStatus}>
-          <SelectTrigger className="h-9 w-[130px] text-xs">
-            <SelectValue placeholder="입고상태" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">전체 상태</SelectItem>
-            {INBOUND_STATUS_OPTIONS.map((s) => (
-              <SelectItem key={s.value} value={s.value}>
-                {s.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Input
-          placeholder="입고번호 / 품목명 / 참조번호 검색"
-          value={searchKeyword}
-          onChange={(e) => setSearchKeyword(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && fetchList()}
-          className="h-9 w-[240px] text-xs"
-        />
-
-        <div className="flex items-center gap-1">
-          <Input
-            type="date"
-            value={searchDateFrom}
-            onChange={(e) => setSearchDateFrom(e.target.value)}
-            className="h-9 w-[140px] text-xs"
-          />
-          <span className="text-muted-foreground text-xs">~</span>
-          <Input
-            type="date"
-            value={searchDateTo}
-            onChange={(e) => setSearchDateTo(e.target.value)}
-            className="h-9 w-[140px] text-xs"
-          />
-        </div>
-
-        <Button size="sm" onClick={fetchList} className="h-9">
-          <Search className="mr-1 h-4 w-4" />
-          조회
-        </Button>
-        <Button size="sm" variant="outline" onClick={handleReset} className="h-9">
-          <RotateCcw className="mr-1 h-4 w-4" />
-          초기화
-        </Button>
-
-        <div className="ml-auto flex gap-2">
-          <Button size="sm" onClick={openRegisterModal} className="h-9">
-            <Plus className="mr-1 h-4 w-4" />
-            입고 등록
-          </Button>
-          <Button
-            size="sm"
-            variant="destructive"
-            onClick={handleDelete}
-            disabled={checkedIds.length === 0}
-            className="h-9"
-          >
-            <Trash2 className="mr-1 h-4 w-4" />
-            삭제 ({checkedIds.length})
-          </Button>
-        </div>
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>물류관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">입고관리</span>
       </div>
 
-      {/* 입고 목록 테이블 */}
-      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
-        <div className="flex items-center justify-between border-b px-4 py-3">
+      {/* 검색 영역 */}
+      <DynamicSearchFilter
+        tableName="inbound_mng"
+        filterId="c16-receiving"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={data.length}
+        extraActions={
           <div className="flex items-center gap-2">
-            <Package className="text-muted-foreground h-5 w-5" />
-            <h3 className="text-base font-semibold">입고 목록</h3>
-            <span className="text-muted-foreground text-sm">
-              총 {data.length}건
+            <Button size="sm" onClick={openRegisterModal} className="h-9">
+              <Plus className="mr-1 h-4 w-4" />
+              입고 등록
+            </Button>
+            <div className="h-4 w-px bg-border" />
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={handleDelete}
+              disabled={checkedIds.length === 0}
+              className="h-9 text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+            >
+              <Trash2 className="mr-1 h-4 w-4" />
+              삭제 ({checkedIds.length})
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 입고 목록 테이블 (마스터-디테일 그룹) */}
+      <div className="flex-1 overflow-hidden rounded-lg border border-border bg-card">
+        <div className="flex items-center justify-between border-b bg-muted/50 px-4 py-2.5">
+          <div className="flex items-center gap-2">
+            <h3 className="text-[13px] font-bold">입고 목록</h3>
+            <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+              {Object.keys(filteredGroups).length}건
             </span>
           </div>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
         </div>
 
-        <div className="h-[calc(100%-52px)] overflow-auto">
-          <Table>
-            <TableHeader>
-              <TableRow className="bg-muted/50">
-                <TableHead className="w-[40px] text-center">
+        <div className="h-[calc(100%-44px)] overflow-auto">
+          <Table style={{ minWidth: `${216 + visibleMasterLayout.length * 120}px` }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "36px" }} />
+              <col style={{ width: "140px" }} />
+              {visibleMasterLayout.map((col) => (
+                <col key={col.key} style={{ width: ts.getWidth(col.key) ? `${ts.getWidth(col.key)}px` : undefined }} />
+              ))}
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
                   <Checkbox
-                    checked={allChecked}
-                    onCheckedChange={toggleCheckAll}
+                    checked={(() => {
+                      const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
                   />
                 </TableHead>
-                <TableHead className="w-[130px]">입고번호</TableHead>
-                <TableHead className="w-[90px]">입고유형</TableHead>
-                <TableHead className="w-[100px]">입고일</TableHead>
-                <TableHead className="w-[120px]">참조번호</TableHead>
-                <TableHead className="w-[80px]">데이터출처</TableHead>
-                <TableHead className="w-[120px]">공급처</TableHead>
-                <TableHead className="w-[100px]">품목코드</TableHead>
-                <TableHead className="min-w-[150px]">품목명</TableHead>
-                <TableHead className="w-[80px]">규격</TableHead>
-                <TableHead className="w-[80px] text-right">입고수량</TableHead>
-                <TableHead className="w-[90px] text-right">단가</TableHead>
-                <TableHead className="w-[100px] text-right">금액</TableHead>
-                <TableHead className="w-[100px]">창고</TableHead>
-                <TableHead className="w-[90px] text-center">입고상태</TableHead>
-                <TableHead className="w-[100px]">비고</TableHead>
+                <TableHead />
+                {/* 입고번호 (별도 컬럼) */}
+                <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                  <div className="inline-flex items-center gap-1">
+                    <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort("inbound_number")}>
+                      <span className="truncate">입고번호</span>
+                      {sortState?.key === "inbound_number" && (
+                        sortState.direction === "asc"
+                          ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                          : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                      )}
+                    </div>
+                    {(masterUniqueValues["inbound_number"] || []).length > 0 && (
+                      <HeaderFilterPopover
+                        colKey="inbound_number" colLabel="입고번호"
+                        uniqueValues={masterUniqueValues["inbound_number"] || []}
+                        filterValues={headerFilters["inbound_number"] || new Set<string>()}
+                        onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                      />
+                    )}
+                  </div>
+                </TableHead>
+                {/* 마스터 필드 헤더 (ts.visibleColumns 순서) */}
+                {visibleMasterLayout.map((col) => (
+                  <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                    <div className="inline-flex items-center gap-1">
+                      <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                        <span className="truncate">{col.label}</span>
+                        {sortState?.key === col.key && (
+                          sortState.direction === "asc"
+                            ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                            : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                        )}
+                      </div>
+                      {(masterUniqueValues[col.key] || []).length > 0 && (
+                        <HeaderFilterPopover
+                          colKey={col.key} colLabel={col.label}
+                          uniqueValues={masterUniqueValues[col.key] || []}
+                          filterValues={headerFilters[col.key] || new Set<string>()}
+                          onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                        />
+                      )}
+                    </div>
+                  </TableHead>
+                ))}
               </TableRow>
             </TableHeader>
             <TableBody>
               {loading ? (
                 <TableRow>
-                  <TableCell colSpan={16} className="h-40 text-center">
-                    <Loader2 className="mx-auto h-6 w-6 animate-spin" />
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
                   </TableCell>
                 </TableRow>
-              ) : data.length === 0 ? (
+              ) : Object.keys(filteredGroups).length === 0 ? (
                 <TableRow>
-                  <TableCell
-                    colSpan={16}
-                    className="text-muted-foreground h-40 text-center"
-                  >
-                    <div className="flex flex-col items-center gap-2">
-                      <Package className="h-10 w-10 opacity-30" />
-                      <p>등록된 입고 내역이 없습니다</p>
-                      <p className="text-xs">
-                        &apos;입고 등록&apos; 버튼을 클릭하여 입고를 추가하세요
-                      </p>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <Inbox className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 입고 내역이 없어요</span>
                     </div>
                   </TableCell>
                 </TableRow>
               ) : (
-                data.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    className={cn(
-                      "cursor-pointer transition-colors",
-                      checkedIds.includes(row.id) && "bg-primary/5"
-                    )}
-                    onClick={() => toggleCheck(row.id)}
-                  >
-                    <TableCell
-                      className="text-center"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Checkbox
-                        checked={checkedIds.includes(row.id)}
-                        onCheckedChange={() => toggleCheck(row.id)}
-                      />
-                    </TableCell>
-                    <TableCell className="max-w-[130px] truncate font-medium" title={row.inbound_number}>
-                      {row.inbound_number}
-                    </TableCell>
-                    <TableCell>
-                      <Badge
-                        variant="outline"
-                        className={cn("text-[11px]", getTypeColor(row.inbound_type))}
-                      >
-                        {row.inbound_type || "-"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.inbound_date
-                        ? new Date(row.inbound_date).toLocaleDateString("ko-KR")
-                        : "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.reference_number || "-"}>
-                      {row.reference_number || "-"}
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.source_table
-                        ? SOURCE_TABLE_LABEL[row.source_table] || row.source_table
-                        : "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.supplier_name || "-"}>
-                      {row.supplier_name || "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[130px] truncate text-xs" title={row.item_number || "-"}>
-                      {row.item_number || "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[150px] truncate text-xs" title={row.item_name || "-"}>{row.item_name || "-"}</TableCell>
-                    <TableCell className="max-w-[100px] truncate text-xs" title={row.spec || "-"}>{row.spec || "-"}</TableCell>
-                    <TableCell className="text-right text-xs font-semibold">
-                      {Number(row.inbound_qty || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-right text-xs">
-                      {Number(row.unit_price || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-right text-xs font-semibold">
-                      {Number(row.total_amount || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.warehouse_name || row.warehouse_code || "-"}
-                    </TableCell>
-                    <TableCell className="text-center">
-                      <Badge
-                        variant="outline"
+                Object.entries(filteredGroups).map(([inboundNo, group]) => {
+                  const isExpanded = expandedOrders.has(inboundNo);
+                  const detailIds = group.details.map((d) => d.id);
+                  const allDetailChecked = detailIds.length > 0 && detailIds.every((id) => checkedIds.includes(id));
+                  const someDetailChecked = detailIds.some((id) => checkedIds.includes(id));
+                  const master = group.master;
+                  return (
+                    <React.Fragment key={inboundNo}>
+                      {/* 마스터 행 */}
+                      <TableRow
+                        style={{ borderTop: "2px solid hsl(var(--border))" }}
                         className={cn(
-                          "text-[11px]",
-                          getStatusColor(row.inbound_status)
+                          "cursor-pointer border-l-[3px] border-l-transparent font-semibold tree-master-row",
+                          allDetailChecked && "border-l-primary bg-primary/5"
                         )}
+                        onClick={() => {
+                          if (expandedOrders.has(inboundNo)) {
+                            setClosingOrders((prev) => new Set(prev).add(inboundNo));
+                            setTimeout(() => {
+                              setExpandedOrders((prev) => { const next = new Set(prev); next.delete(inboundNo); return next; });
+                              setClosingOrders((prev) => { const next = new Set(prev); next.delete(inboundNo); return next; });
+                            }, 200);
+                          } else {
+                            setExpandedOrders((prev) => new Set(prev).add(inboundNo));
+                          }
+                        }}
                       >
-                        {row.inbound_status || "-"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.memo || "-"}>
-                      {row.memo || "-"}
-                    </TableCell>
-                  </TableRow>
-                ))
+                        <TableCell
+                          className="text-center cursor-pointer"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setCheckedIds((prev) => {
+                              if (allDetailChecked) return prev.filter((id) => !detailIds.includes(id));
+                              return [...new Set([...prev, ...detailIds])];
+                            });
+                          }}
+                        >
+                          <Checkbox
+                            checked={allDetailChecked}
+                            data-state={someDetailChecked && !allDetailChecked ? "indeterminate" : undefined}
+                            onCheckedChange={() => {}}
+                          />
+                        </TableCell>
+                        <TableCell className="text-center">
+                          {isExpanded
+                            ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            : <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          }
+                        </TableCell>
+                        {/* 입고번호 */}
+                        <TableCell className="font-mono whitespace-nowrap">
+                          {inboundNo}
+                          <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
+                        </TableCell>
+                        {/* 마스터 필드 (ts.visibleColumns 순서) */}
+                        {visibleMasterLayout.map((col) => {
+                          switch (col.key) {
+                            case "inbound_type": return (
+                              <TableCell key={col.key} className="text-[13px]">
+                                <Badge variant={getTypeVariant(resolveInboundType(master.inbound_type))} className="text-[11px]">
+                                  {resolveInboundType(master.inbound_type)}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "inbound_date": return (
+                              <TableCell key={col.key} className="text-[13px] whitespace-nowrap">
+                                {master.inbound_date ? new Date(master.inbound_date).toLocaleDateString("ko-KR") : "-"}
+                              </TableCell>
+                            );
+                            case "reference_number": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.reference_number || ""}</span>
+                              </TableCell>
+                            );
+                            case "supplier_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.supplier_name || ""}</span>
+                              </TableCell>
+                            );
+                            case "warehouse_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
+                              </TableCell>
+                            );
+                            case "inbound_status": return (
+                              <TableCell key={col.key} className="text-[13px]">
+                                <Badge variant={getStatusVariant(master.inbound_status)} className="text-[11px]">
+                                  {master.inbound_status || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "memo": return (
+                              <TableCell key={col.key} className="text-muted-foreground text-[13px]">
+                                <span className="block truncate max-w-[110px]">{master.memo || ""}</span>
+                              </TableCell>
+                            );
+                            default: return <TableCell key={col.key} className="text-[13px]">{(master as any)[col.key] ?? ""}</TableCell>;
+                          }
+                        })}
+                      </TableRow>
+
+                      {/* 디테일 서브 헤더 (펼쳤을 때만) */}
+                      {isExpanded && (
+                        <TableRow
+                          className={cn(
+                            "border-l-[3px] border-l-primary/30 bg-muted/60",
+                            closingOrders.has(inboundNo) ? "tree-detail-row-closing" : "tree-detail-row",
+                          )}
+                        >
+                          <TableCell />
+                          <TableCell />
+                          <TableCell />
+                          {visibleDetailCols.map((col) => {
+                            const isRight = ["inbound_qty", "unit_price", "total_amount"].includes(col.key);
+                            const isSorted = sortState?.key === col.key;
+                            const uniqueVals = Array.from(new Set(
+                              group.details.map((d) => {
+                                let v = (d as any)[col.key];
+                                if (col.key === "source_table") v = SOURCE_TABLE_LABEL[v] || v;
+                                return v;
+                              }).filter((v: any) => v != null && v !== "").map(String)
+                            )).sort();
+                            const filterVals = headerFilters[col.key] || new Set<string>();
+                            return (
+                              <TableCell
+                                key={col.key}
+                                className={cn(
+                                  "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 select-none",
+                                  isRight && "text-right",
+                                )}
+                              >
+                                <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                                  <div
+                                    className="flex items-center gap-1 cursor-pointer min-w-0"
+                                    onClick={() => handleSort(col.key)}
+                                  >
+                                    <span className="truncate">{col.label}</span>
+                                    {isSorted && (
+                                      sortState!.direction === "asc"
+                                        ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                                        : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                                    )}
+                                  </div>
+                                  {uniqueVals.length > 0 && (
+                                    <HeaderFilterPopover
+                                      colKey={col.key} colLabel={col.label}
+                                      uniqueValues={uniqueVals} filterValues={filterVals}
+                                      onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                                    />
+                                  )}
+                                </div>
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                      )}
+
+                      {/* 디테일 행 (펼쳤을 때만) */}
+                      {isExpanded && group.details.map((row, detailIdx) => {
+                        const isClosing = closingOrders.has(inboundNo);
+                        const isChecked = checkedIds.includes(row.id);
+                        return (
+                          <TableRow
+                            key={`${row.id}-${detailIdx}`}
+                            className={cn(
+                              "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                              isClosing ? "tree-detail-row-closing" : "tree-detail-row",
+                              isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                            )}
+                            onClick={() => {
+                              setCheckedIds((prev) =>
+                                prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                              );
+                            }}
+                          >
+                            <TableCell
+                              className="text-center cursor-pointer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                            >
+                              <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                            </TableCell>
+                            <TableCell className="relative">
+                              <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
+                            </TableCell>
+                            <TableCell />
+                            {visibleDetailCols.map((col) => {
+                              switch (col.key) {
+                                case "source_table": return <TableCell key={col.key} className="text-[13px]">{row.source_table ? SOURCE_TABLE_LABEL[row.source_table] || row.source_table : "-"}</TableCell>;
+                                case "item_number": return <TableCell key={col.key} className="font-mono text-[13px]">{row.item_number || ""}</TableCell>;
+                                case "item_name": return <TableCell key={col.key} className="text-[13px] max-w-[160px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>;
+                                case "spec": return <TableCell key={col.key} className="text-[13px] text-muted-foreground">{row.spec || ""}</TableCell>;
+                                case "inbound_qty": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.inbound_qty ? Number(row.inbound_qty).toLocaleString() : ""}</TableCell>;
+                                case "unit_price": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>;
+                                case "total_amount": return <TableCell key={col.key} className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>;
+                                default: return <TableCell key={col.key} className="text-[13px]">{(row as any)[col.key] ?? ""}</TableCell>;
+                              }
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                    </React.Fragment>
+                  );
+                })
               )}
             </TableBody>
           </Table>
@@ -724,56 +1186,19 @@ export default function ReceivingPage() {
       </div>
 
       {/* 입고 등록 모달 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title="입고 등록"
-        description="입고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가하세요."
-        defaultMaxWidth="sm:max-w-[1600px]"
-        defaultWidth="w-[95vw]"
-        className="h-[90vh] p-0"
-        contentClassName="overflow-hidden flex flex-col"
-        footer={
-          <div className="flex w-full items-center justify-between px-6 py-3">
-            <div className="text-muted-foreground text-xs">
-              {selectedItems.length > 0 ? (
-                <>
-                  {totalSummary.count}건 | 수량 합계:{" "}
-                  {totalSummary.qty.toLocaleString()} | 금액 합계:{" "}
-                  {totalSummary.amount.toLocaleString()}원
-                </>
-              ) : (
-                "품목을 추가해주세요"
-              )}
-            </div>
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setIsModalOpen(false)}
-                className="h-9 text-sm"
-              >
-                취소
-              </Button>
-              <Button
-                onClick={handleSave}
-                disabled={saving || selectedItems.length === 0}
-                className="h-9 text-sm"
-              >
-                {saving ? (
-                  <Loader2 className="mr-1 h-4 w-4 animate-spin" />
-                ) : (
-                  <Save className="mr-1 h-4 w-4" />
-                )}
-                저장
-              </Button>
-            </div>
-          </div>
-        }
-      >
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="sm:max-w-[1600px] w-[95vw] h-[90vh] p-0 flex flex-col overflow-hidden">
+          <DialogHeader className="shrink-0 px-6 pt-4 pb-2 border-b">
+            <DialogTitle>입고 등록</DialogTitle>
+            <DialogDescription>
+              입고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가해 주세요.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-hidden flex flex-col">
 
           {/* 입고유형 선택 */}
-          <div className="flex items-center gap-4 border-b px-6 py-3">
-            <Label className="text-sm font-semibold">입고유형</Label>
+          <div className="flex items-center gap-4 border-b bg-muted/30 px-6 py-2.5">
+            <Label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide">입고유형</Label>
             <Select value={modalInboundType} onValueChange={handleInboundTypeChange}>
               <SelectTrigger className="h-9 w-[160px] text-sm">
                 <SelectValue />
@@ -802,7 +1227,7 @@ export default function ReceivingPage() {
               <ResizablePanel defaultSize={60} minSize={35}>
                 <div className="flex h-full flex-col">
                   {/* 소스 검색 바 */}
-                  <div className="flex items-center gap-2 border-b px-4 py-3">
+                  <div className="flex items-center gap-2 border-b px-4 py-2.5">
                     <Input
                       placeholder={
                         modalInboundType === "구매입고"
@@ -814,23 +1239,28 @@ export default function ReceivingPage() {
                       value={sourceKeyword}
                       onChange={(e) => setSourceKeyword(e.target.value)}
                       onKeyDown={(e) => e.key === "Enter" && searchSourceData()}
-                      className="h-8 flex-1 text-xs"
+                      className="h-9 flex-1 text-xs"
                     />
-                    <Button size="sm" onClick={searchSourceData} className="h-8">
+                    <Button size="sm" onClick={searchSourceData} className="h-9">
                       <Search className="mr-1 h-3 w-3" />
                       검색
                     </Button>
                   </div>
 
                   {/* 소스 데이터 테이블 */}
-                  <div className="flex-1 overflow-auto px-4 py-2">
-                    <h4 className="text-muted-foreground mb-2 text-xs font-semibold">
-                      {modalInboundType === "구매입고"
-                        ? "미입고 발주 목록"
-                        : modalInboundType === "반품입고"
-                          ? "출하 목록"
-                          : "품목 목록"}
-                    </h4>
+                  <div className="flex-1 overflow-auto">
+                    <div className="flex items-center gap-2 px-4 py-2.5 bg-muted/50 border-b">
+                      <h4 className="text-[13px] font-bold">
+                        {modalInboundType === "구매입고"
+                          ? "미입고 발주 목록"
+                          : modalInboundType === "반품입고"
+                            ? "출하 목록"
+                            : "품목 목록"}
+                      </h4>
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {sourceTotalCount}건
+                      </span>
+                    </div>
 
                     {sourceLoading ? (
                       <div className="flex h-40 items-center justify-center">
@@ -859,7 +1289,7 @@ export default function ReceivingPage() {
 
                   {/* 페이징 */}
                   {sourceTotalCount > 0 && (
-                    <div className="flex shrink-0 items-center justify-between border-t bg-muted/10 px-4 py-2">
+                    <div className="flex shrink-0 items-center justify-between border-t bg-muted/30 px-4 py-2">
                       <div className="flex items-center gap-2">
                         <span className="text-muted-foreground text-[11px]">표시:</span>
                         <Input
@@ -912,31 +1342,31 @@ export default function ReceivingPage() {
                 <div className="flex h-full flex-col">
                   {/* 입고 정보 입력 */}
                   <div className="space-y-3 border-b bg-muted/30 px-4 py-3">
-                    <h4 className="text-sm font-semibold">입고 정보</h4>
+                    <h4 className="text-[13px] font-bold text-foreground">입고 정보</h4>
                     <div className="grid grid-cols-2 gap-3">
                       <div>
-                        <Label className="text-[11px]">입고번호</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">입고번호</Label>
                         <Input
                           value={modalInboundNo}
                           readOnly
-                          className="bg-muted h-8 text-xs"
+                          className="bg-muted h-9 text-xs"
                         />
                       </div>
                       <div>
-                        <Label className="text-[11px]">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">
                           입고일 <span className="text-destructive">*</span>
                         </Label>
                         <Input
                           type="date"
                           value={modalInboundDate}
                           onChange={(e) => setModalInboundDate(e.target.value)}
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                       <div>
-                        <Label className="text-[11px]">창고</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">창고</Label>
                         <Select value={modalWarehouse} onValueChange={setModalWarehouse}>
-                          <SelectTrigger className="h-8 text-xs">
+                          <SelectTrigger className="h-9 text-xs">
                             <SelectValue placeholder="창고 선택" />
                           </SelectTrigger>
                           <SelectContent>
@@ -949,62 +1379,65 @@ export default function ReceivingPage() {
                         </Select>
                       </div>
                       <div>
-                        <Label className="text-[11px]">위치</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">위치</Label>
                         <Input
                           value={modalLocation}
                           onChange={(e) => setModalLocation(e.target.value)}
                           placeholder="위치 입력"
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                       <div>
-                        <Label className="text-[11px]">검수자</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">검수자</Label>
                         <Input
                           value={modalInspector}
                           onChange={(e) => setModalInspector(e.target.value)}
                           placeholder="검수자"
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                       <div>
-                        <Label className="text-[11px]">담당자</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">담당자</Label>
                         <Input
                           value={modalManager}
                           onChange={(e) => setModalManager(e.target.value)}
                           placeholder="담당자"
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                       <div className="col-span-2">
-                        <Label className="text-[11px]">메모</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">메모</Label>
                         <Input
                           value={modalMemo}
                           onChange={(e) => setModalMemo(e.target.value)}
                           placeholder="메모"
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                     </div>
                   </div>
 
                   {/* 선택된 품목 테이블 */}
-                  <div className="flex-1 overflow-auto px-4 py-2">
-                    <h4 className="text-muted-foreground mb-2 text-xs font-semibold">
-                      입고 처리 품목 ({selectedItems.length}건)
-                    </h4>
+                  <div className="flex-1 overflow-auto">
+                    <div className="flex items-center gap-2 border-b bg-muted/50 px-4 py-2.5">
+                      <h4 className="text-[13px] font-bold">입고 처리 품목</h4>
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {selectedItems.length}건
+                      </span>
+                    </div>
 
                     {selectedItems.length === 0 ? (
-                      <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-xs">
-                        <Package className="mb-2 h-8 w-8 opacity-30" />
-                        좌측에서 품목을 선택하여 추가해주세요
+                      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+                        <Inbox className="h-8 w-8 opacity-30" />
+                        <p className="text-xs font-medium">좌측에서 품목을 선택하여 추가해 주세요</p>
                       </div>
                     ) : (
                       <Table>
-                        <TableHeader>
-                          <TableRow className="text-[11px]">
-                            <TableHead className="w-[30px] p-2">No</TableHead>
-                            <TableHead className="p-2">품목명</TableHead>
-                            <TableHead className="p-2">참조번호</TableHead>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
                             <TableHead className="w-[80px] p-2 text-right">
                               수량
                             </TableHead>
@@ -1065,7 +1498,7 @@ export default function ReceivingPage() {
                                   min={0}
                                 />
                               </TableCell>
-                              <TableCell className="p-2 text-right text-xs font-semibold">
+                              <TableCell className="p-2 text-right text-[13px] font-semibold">
                                 {item.total_amount.toLocaleString()}
                               </TableCell>
                               <TableCell className="p-2 text-center">
@@ -1089,7 +1522,54 @@ export default function ReceivingPage() {
             </ResizablePanelGroup>
           </div>
 
-      </FullscreenDialog>
+          </div>
+          <DialogFooter className="shrink-0 border-t px-0 py-0">
+            <div className="flex w-full items-center justify-between px-6 py-2.5">
+              <div className="text-muted-foreground text-xs">
+                {selectedItems.length > 0 ? (
+                  <span className="flex items-center gap-3">
+                    <span className="font-semibold text-foreground">{totalSummary.count}건</span>
+                    <span>수량 합계: <span className="font-medium text-foreground">{totalSummary.qty.toLocaleString()}</span></span>
+                    <span>금액 합계: <span className="font-medium text-foreground">{totalSummary.amount.toLocaleString()}원</span></span>
+                  </span>
+                ) : (
+                  "품목을 추가해 주세요"
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsModalOpen(false)}
+                  className="h-9 text-sm"
+                >
+                  취소
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={saving || selectedItems.length === 0}
+                  className="h-9 text-sm"
+                >
+                  {saving ? (
+                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="mr-1 h-4 w-4" />
+                  )}
+                  저장
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
@@ -1107,31 +1587,32 @@ function SourcePurchaseOrderTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 발주 데이터를 조회하세요
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 발주 데이터를 조회해 주세요</p>
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader className="sticky top-0 bg-background z-10">
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">발주번호</TableHead>
-          <TableHead className="p-2">공급처</TableHead>
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">발주수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">입고수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">미입고</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">미입고</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
-        {data.map((po) => {
+        {data.map((po, idx) => {
           const isSelected = selectedKeys.includes(`po-${po.id}`);
           return (
             <TableRow
-              key={po.id}
+              key={`${po.source_table || 'po'}-${po.id}-${idx}`}
               className={cn(
                 "cursor-pointer text-xs transition-colors",
                 isSelected && "bg-primary/5"
@@ -1164,7 +1645,7 @@ function SourcePurchaseOrderTable({
               <TableCell className="p-2 text-right">
                 {Number(po.received_qty).toLocaleString()}
               </TableCell>
-              <TableCell className="p-2 text-right font-semibold text-blue-600">
+              <TableCell className="p-2 text-right font-semibold text-primary">
                 {Number(po.remain_qty).toLocaleString()}
               </TableCell>
             </TableRow>
@@ -1186,22 +1667,23 @@ function SourceShipmentTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 출하 데이터를 조회하세요
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 출하 데이터를 조회해 주세요</p>
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader className="sticky top-0 bg-background z-10">
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">출하번호</TableHead>
-          <TableHead className="p-2">출하일</TableHead>
-          <TableHead className="p-2">거래처</TableHead>
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">출하수량</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하일</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하수량</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -1263,22 +1745,23 @@ function SourceItemTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 품목 데이터를 조회하세요
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 품목 데이터를 조회해 주세요</p>
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader className="sticky top-0 bg-background z-10">
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[80px] p-2">규격</TableHead>
-          <TableHead className="w-[80px] p-2">재질</TableHead>
-          <TableHead className="w-[60px] p-2">단위</TableHead>
-          <TableHead className="w-[80px] p-2 text-right">기준가</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+          <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
diff --git a/frontend/app/(main)/COMPANY_10/logistics/warehouse/page.tsx b/frontend/app/(main)/COMPANY_10/logistics/warehouse/page.tsx
new file mode 100644
index 00000000..96b3d47e
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/logistics/warehouse/page.tsx
@@ -0,0 +1,1608 @@
+"use client";
+
+/**
+ * 창고정보관리 — 하드코딩 페이지 (Type B 마스터-디테일)
+ *
+ * 좌측: 창고 목록 (warehouse_info)
+ * 우측: 선택 창고의 로케이션 목록 (warehouse_location)
+ *
+ * ★ 하위 위치가 있으면 창고 삭제 불가
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Plus,
+  Trash2,
+  Loader2,
+  Download,
+  MapPin,
+  Building2,
+  Settings2,
+  Layers,
+  Info,
+  Eye,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+
+const WAREHOUSE_TABLE = "warehouse_info";
+
+const WAREHOUSE_COLUMNS = [
+  { key: "warehouse_code", label: "창고코드" },
+  { key: "warehouse_name", label: "창고명" },
+  { key: "warehouse_type", label: "유형" },
+  { key: "manager", label: "관리자" },
+  { key: "status", label: "상태" },
+];
+const LOCATION_TABLE = "warehouse_location";
+
+const getStatusVariant = (
+  status: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "사용":
+    case "사용중":
+      return "default";
+    case "미사용":
+      return "secondary";
+    case "폐쇄":
+      return "destructive";
+    default:
+      return "outline";
+  }
+};
+
+const getTypeVariant = (
+  type: string
+): "default" | "secondary" | "outline" => {
+  switch (type) {
+    case "원자재":
+    case "일반":
+      return "default";
+    case "완제품":
+    case "보관":
+      return "secondary";
+    default:
+      return "outline";
+  }
+};
+
+export default function WarehouseManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-warehouse", WAREHOUSE_TABLE, WAREHOUSE_COLUMNS);
+
+  // 좌측: 창고 목록
+  const [warehouses, setWarehouses] = useState<any[]>([]);
+  const [warehouseLoading, setWarehouseLoading] = useState(false);
+  const [warehouseCount, setWarehouseCount] = useState(0);
+  const [selectedWarehouseId, setSelectedWarehouseId] = useState<string | null>(null);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 로케이션 목록
+  const [locations, setLocations] = useState<any[]>([]);
+  const [locationLoading, setLocationLoading] = useState(false);
+  const [locationCheckedIds, setLocationCheckedIds] = useState<string[]>([]);
+
+  // 모달: 창고 등록/수정
+  const [warehouseModalOpen, setWarehouseModalOpen] = useState(false);
+  const [warehouseEditMode, setWarehouseEditMode] = useState(false);
+  const [warehouseForm, setWarehouseForm] = useState<Record<string, any>>({});
+  const [warehouseSaving, setWarehouseSaving] = useState(false);
+
+  // 모달: 위치 등록/수정
+  const [locationModalOpen, setLocationModalOpen] = useState(false);
+  const [locationEditMode, setLocationEditMode] = useState(false);
+  const [locationForm, setLocationForm] = useState<Record<string, any>>({});
+  const [locationSaving, setLocationSaving] = useState(false);
+
+  // 위치코드 자동 채번
+  const [locNumberingRuleId, setLocNumberingRuleId] = useState<string | null>(null);
+  const [locPreviewCode, setLocPreviewCode] = useState<string | null>(null);
+  const [whNumberingRuleId, setWhNumberingRuleId] = useState<string | null>(null);
+  const [whPreviewCode, setWhPreviewCode] = useState<string | null>(null);
+
+  // 모달: 랙 구조 일괄 등록
+  const [rackModalOpen, setRackModalOpen] = useState(false);
+  const [rackFloor, setRackFloor] = useState("");
+  const [rackZone, setRackZone] = useState("");
+  const [rackConditions, setRackConditions] = useState<
+    { id: string; startRow: number; endRow: number; levels: number }[]
+  >([]);
+  const [rackLocationType, setRackLocationType] = useState("");
+  const [rackStatus, setRackStatus] = useState("");
+  const [rackPreview, setRackPreview] = useState<any[]>([]);
+  const [rackSaving, setRackSaving] = useState(false);
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+  const [locationCategoryOptions, setLocationCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+
+      const whOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["warehouse_type", "status"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${WAREHOUSE_TABLE}/${col}/values`
+          );
+          if (res.data?.success) whOpts[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setCategoryOptions(whOpts);
+
+      const locOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["location_type", "status", "floor", "zone"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${LOCATION_TABLE}/${col}/values`
+          );
+          if (res.data?.success) locOpts[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setLocationCategoryOptions(locOpts);
+    };
+    load();
+  }, []);
+
+  // 카테고리 코드→라벨 변환 헬퍼
+  const resolveCategory = useCallback(
+    (
+      optMap: Record<string, { code: string; label: string }[]>,
+      col: string,
+      code: string
+    ) => {
+      if (!code) return "";
+      return optMap[col]?.find((o) => o.code === code)?.label || code;
+    },
+    []
+  );
+
+  // 창고 목록 조회
+  const fetchWarehouses = useCallback(async () => {
+    setWarehouseLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(
+        `/table-management/tables/${WAREHOUSE_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+          autoFilter: true,
+          sort: { columnName: "warehouse_code", order: "asc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const data = raw.map((r: any) => ({
+        ...r,
+        warehouse_type: resolveCategory(categoryOptions, "warehouse_type", r.warehouse_type),
+        status: resolveCategory(categoryOptions, "status", r.status),
+      }));
+      setWarehouses(data);
+      setWarehouseCount(res.data?.data?.total || raw.length);
+    } catch {
+      toast.error("창고 목록을 불러오지 못했어요");
+    } finally {
+      setWarehouseLoading(false);
+    }
+  }, [categoryOptions, resolveCategory, searchFilters]);
+
+  useEffect(() => {
+    fetchWarehouses();
+  }, [fetchWarehouses]);
+
+  // 선택된 창고
+  const selectedWarehouse = warehouses.find((w) => w.id === selectedWarehouseId);
+
+  // 로케이션 조회
+  const fetchLocations = useCallback(async () => {
+    if (!selectedWarehouse?.warehouse_code) {
+      setLocations([]);
+      return;
+    }
+    setLocationLoading(true);
+    try {
+      const res = await apiClient.post(
+        `/table-management/tables/${LOCATION_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: {
+            enabled: true,
+            filters: [
+              {
+                columnName: "warehouse_code",
+                operator: "equals",
+                value: selectedWarehouse.warehouse_code,
+              },
+            ],
+          },
+          autoFilter: true,
+          sort: { columnName: "location_code", order: "asc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const data = raw.map((r: any) => ({
+        ...r,
+        location_type: resolveCategory(locationCategoryOptions, "location_type", r.location_type),
+        status: resolveCategory(locationCategoryOptions, "status", r.status),
+      }));
+      setLocations(data);
+    } catch {
+      toast.error("위치 목록을 불러오지 못했어요");
+    } finally {
+      setLocationLoading(false);
+    }
+  }, [selectedWarehouse?.warehouse_code, locationCategoryOptions, resolveCategory]);
+
+  useEffect(() => {
+    setLocationCheckedIds([]);
+    fetchLocations();
+  }, [fetchLocations]);
+
+  // 체크박스 헬퍼
+  const allLocationChecked =
+    locations.length > 0 && locationCheckedIds.length === locations.length;
+  const someLocationChecked =
+    locationCheckedIds.length > 0 && locationCheckedIds.length < locations.length;
+
+  const toggleAllLocations = (checked: boolean) => {
+    setLocationCheckedIds(checked ? locations.map((l) => l.id) : []);
+  };
+
+  const toggleLocation = (id: string, checked: boolean) => {
+    setLocationCheckedIds((prev) =>
+      checked ? [...prev, id] : prev.filter((i) => i !== id)
+    );
+  };
+
+  // ─── 창고 CRUD ───
+
+  const openWarehouseCreateModal = async () => {
+    setWarehouseEditMode(false);
+    setWarehouseForm({});
+    setWhNumberingRuleId(null);
+    setWhPreviewCode(null);
+    setWarehouseModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/warehouse_info/warehouse_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setWhNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setWhPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openWarehouseEditModal = (row: any) => {
+    setWarehouseEditMode(true);
+    setWarehouseForm({ ...row });
+    setWarehouseModalOpen(true);
+  };
+
+  const handleWarehouseSave = async () => {
+    if (!whNumberingRuleId && !warehouseForm.warehouse_code?.trim()) {
+      toast.error("창고코드를 입력해주세요");
+      return;
+    }
+    if (!warehouseForm.warehouse_name?.trim()) {
+      toast.error("창고명을 입력해주세요");
+      return;
+    }
+    setWarehouseSaving(true);
+    try {
+      let finalWarehouseCode = warehouseForm.warehouse_code?.trim() || "";
+      if (!warehouseEditMode && whNumberingRuleId) {
+        const allocRes = await allocateNumberingCode(whNumberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalWarehouseCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setWarehouseSaving(false);
+          return;
+        }
+      }
+      const fields = {
+        warehouse_code: finalWarehouseCode,
+        warehouse_name: warehouseForm.warehouse_name?.trim(),
+        warehouse_type: warehouseForm.warehouse_type || "",
+        manager: warehouseForm.manager || "",
+        address: warehouseForm.address || "",
+        status: warehouseForm.status || "",
+        description: warehouseForm.description || "",
+      };
+
+      // 신규 등록 시 창고코드 중복 체크
+      if (!warehouseEditMode) {
+        const dup = warehouses.find(w => w.warehouse_code === fields.warehouse_code);
+        if (dup) {
+          toast.error(`창고코드 "${fields.warehouse_code}"가 이미 존재해요`);
+          setWarehouseSaving(false);
+          return;
+        }
+      }
+
+      if (warehouseEditMode && warehouseForm.id) {
+        await apiClient.put(
+          `/table-management/tables/${WAREHOUSE_TABLE}/edit`,
+          {
+            originalData: { id: warehouseForm.id },
+            updatedData: fields,
+          }
+        );
+        toast.success("창고 정보가 수정되었어요");
+      } else {
+        await apiClient.post(
+          `/table-management/tables/${WAREHOUSE_TABLE}/add`,
+          { id: crypto.randomUUID(), ...fields }
+        );
+        toast.success("창고가 등록되었어요");
+      }
+      setWarehouseModalOpen(false);
+      fetchWarehouses();
+    } catch {
+      toast.error(warehouseEditMode ? "창고 수정에 실패했어요" : "창고 등록에 실패했어요");
+    } finally {
+      setWarehouseSaving(false);
+    }
+  };
+
+  const handleWarehouseDelete = async () => {
+    if (!selectedWarehouse) return;
+    if (locations.length > 0) {
+      toast.error("하위 위치가 있어 삭제할 수 없어요. 위치를 먼저 삭제해주세요.");
+      return;
+    }
+    const ok = await confirm(
+      `"${selectedWarehouse.warehouse_name}" 창고를 삭제할까요?`
+    );
+    if (!ok) return;
+    try {
+      await apiClient.delete(
+        `/table-management/tables/${WAREHOUSE_TABLE}/delete`,
+        { data: [{ id: selectedWarehouse.id }] }
+      );
+      toast.success("창고가 삭제되었어요");
+      setSelectedWarehouseId(null);
+      fetchWarehouses();
+    } catch {
+      toast.error("창고 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 위치 CRUD ───
+
+  const openLocationCreateModal = async () => {
+    setLocationEditMode(false);
+    setLocationForm({ warehouse_code: selectedWarehouse?.warehouse_code || "" });
+    setLocNumberingRuleId(null);
+    setLocPreviewCode(null);
+    setLocationModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/warehouse_location/location_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setLocNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setLocPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openLocationEditModal = (row: any) => {
+    setLocationEditMode(true);
+    setLocationForm({ ...row });
+    setLocationModalOpen(true);
+  };
+
+  const handleLocationSave = async () => {
+    if (!locNumberingRuleId && !locationForm.location_code?.trim()) {
+      toast.error("위치코드를 입력해주세요");
+      return;
+    }
+    if (!locationForm.location_name?.trim()) {
+      toast.error("위치명을 입력해주세요");
+      return;
+    }
+    setLocationSaving(true);
+    try {
+      let finalLocationCode = locationForm.location_code?.trim() || "";
+      if (!locationEditMode && locNumberingRuleId) {
+        const allocRes = await allocateNumberingCode(locNumberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalLocationCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setLocationSaving(false);
+          return;
+        }
+      }
+
+      const fields = {
+        warehouse_code: locationForm.warehouse_code || selectedWarehouse?.warehouse_code || "",
+        location_code: finalLocationCode,
+        location_name: locationForm.location_name?.trim(),
+        floor: locationForm.floor || "",
+        zone: locationForm.zone || "",
+        row_num: locationForm.row_num || "",
+        level_num: locationForm.level_num || "",
+        location_type: locationForm.location_type || "",
+        status: locationForm.status || "",
+      };
+
+      if (locationEditMode && locationForm.id) {
+        await apiClient.put(
+          `/table-management/tables/${LOCATION_TABLE}/edit`,
+          {
+            originalData: { id: locationForm.id },
+            updatedData: fields,
+          }
+        );
+        toast.success("위치 정보가 수정되었어요");
+      } else {
+        await apiClient.post(
+          `/table-management/tables/${LOCATION_TABLE}/add`,
+          { id: crypto.randomUUID(), ...fields }
+        );
+        toast.success("위치가 등록되었어요");
+      }
+      setLocationModalOpen(false);
+      fetchLocations();
+    } catch {
+      toast.error(locationEditMode ? "위치 수정에 실패했어요" : "위치 등록에 실패했어요");
+    } finally {
+      setLocationSaving(false);
+    }
+  };
+
+  const handleLocationDelete = async () => {
+    if (locationCheckedIds.length === 0) {
+      toast.error("삭제할 위치를 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`${locationCheckedIds.length}건의 위치를 삭제할까요?`);
+    if (!ok) return;
+    try {
+      for (const id of locationCheckedIds) {
+        await apiClient.delete(
+          `/table-management/tables/${LOCATION_TABLE}/delete`,
+          { data: [{ id }] }
+        );
+      }
+      toast.success(`${locationCheckedIds.length}건의 위치가 삭제되었어요`);
+      setLocationCheckedIds([]);
+      fetchLocations();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "위치 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 랙 구조 일괄 등록 ───
+
+  const openRackModal = () => {
+    setRackFloor("");
+    setRackZone("");
+    setRackConditions([]);
+    setRackLocationType("");
+    setRackStatus("");
+    setRackPreview([]);
+    setRackSaving(false);
+    setRackModalOpen(true);
+  };
+
+  const addRackCondition = () => {
+    const lastEnd = rackConditions.length > 0
+      ? rackConditions[rackConditions.length - 1].endRow
+      : 0;
+    setRackConditions((prev) => [
+      ...prev,
+      { id: crypto.randomUUID(), startRow: lastEnd + 1, endRow: lastEnd + 1, levels: 1 },
+    ]);
+  };
+
+  const updateRackCondition = (id: string, field: string, value: number) => {
+    setRackConditions((prev) =>
+      prev.map((c) => (c.id === id ? { ...c, [field]: value } : c))
+    );
+  };
+
+  const removeRackCondition = (id: string) => {
+    setRackConditions((prev) => prev.filter((c) => c.id !== id));
+  };
+
+  const generateRackPreview = () => {
+    if (!rackFloor.trim() || !rackZone.trim()) {
+      toast.error("층과 구역을 입력해주세요");
+      return;
+    }
+    if (rackConditions.length === 0) {
+      toast.error("조건을 1개 이상 추가해주세요");
+      return;
+    }
+    // 조건 유효성 검사
+    for (const cond of rackConditions) {
+      if (cond.startRow < 1 || cond.endRow < 1 || cond.levels < 1) {
+        toast.error("열 범위와 단 수는 1 이상이어야 합니다");
+        return;
+      }
+      if (cond.endRow < cond.startRow) {
+        toast.error("끝 열은 시작 열보다 크거나 같아야 합니다");
+        return;
+      }
+    }
+
+    const whCode = selectedWarehouse?.warehouse_code || "";
+    // 카테고리 코드→라벨 변환 (셀렉트에서 코드가 저장되므로)
+    const floorOpts = locationCategoryOptions["floor"] || [];
+    const zoneOpts = locationCategoryOptions["zone"] || [];
+    const floorLabel = floorOpts.find(o => o.code === rackFloor)?.label || rackFloor.trim();
+    const zoneLabel = zoneOpts.find(o => o.code === rackZone)?.label || rackZone.trim();
+    const floorCode = floorLabel.replace(/층$/, "");
+    const zoneCode = zoneLabel.replace(/구역$/, "");
+
+    // 기존 위치코드 Set (중복 체크용)
+    const existingCodes = new Set(locations.map((l: any) => l.location_code));
+    const seen = new Set<string>();
+    const items: any[] = [];
+    const duplicates: string[] = [];
+
+    for (const cond of rackConditions) {
+      for (let row = cond.startRow; row <= cond.endRow; row++) {
+        for (let level = 1; level <= cond.levels; level++) {
+          const rowStr = String(row).padStart(2, "0");
+          const locationCode = `${whCode}-${floorCode}${zoneCode}-${rowStr}-${level}`;
+          // 미리보기 내부 중복 제거
+          if (seen.has(locationCode)) continue;
+          seen.add(locationCode);
+          // 기존 DB 데이터와 중복 체크
+          if (existingCodes.has(locationCode)) {
+            duplicates.push(locationCode);
+            continue;
+          }
+          const locationName = `${zoneCode}구역-${rowStr}열-${level}단`;
+          items.push({
+            location_code: locationCode,
+            location_name: locationName,
+            warehouse_code: whCode,
+            floor: floorLabel,
+            zone: zoneLabel,
+            row_num: String(row),
+            level_num: String(level),
+            location_type: rackLocationType,
+            status: rackStatus,
+          });
+        }
+      }
+    }
+    if (duplicates.length > 0) {
+      toast.error(`이미 등록된 위치 ${duplicates.length}건이 제외되었어요 (예: ${duplicates.slice(0, 3).join(", ")})`);
+    }
+    setRackPreview(items);
+  };
+
+  const handleRackBulkSave = async () => {
+    if (rackPreview.length === 0) {
+      toast.error("미리보기를 먼저 생성해주세요");
+      return;
+    }
+    setRackSaving(true);
+    try {
+      let successCount = 0;
+      for (const item of rackPreview) {
+        await apiClient.post(
+          `/table-management/tables/${LOCATION_TABLE}/add`,
+          { id: crypto.randomUUID(), ...item }
+        );
+        successCount++;
+      }
+      toast.success(`${successCount}개의 위치가 등록되었어요`);
+      setRackModalOpen(false);
+      fetchLocations();
+    } catch (err) {
+      toast.error("일괄 등록 중 오류가 발생했어요");
+    } finally {
+      setRackSaving(false);
+    }
+  };
+
+  // 랙 조건별 통계
+  const getRackConditionCount = (cond: { startRow: number; endRow: number; levels: number }) => {
+    if (cond.endRow < cond.startRow || cond.startRow < 1 || cond.levels < 1) return 0;
+    return (cond.endRow - cond.startRow + 1) * cond.levels;
+  };
+
+  // 랙 미리보기 통계
+  const rackStats = {
+    totalLocations: rackPreview.length,
+    totalRows: rackConditions.reduce((acc, c) => {
+      if (c.endRow >= c.startRow && c.startRow >= 1) return acc + (c.endRow - c.startRow + 1);
+      return acc;
+    }, 0),
+    maxLevels: rackConditions.reduce((acc, c) => Math.max(acc, c.levels || 0), 0),
+  };
+
+  // EDataTable 컬럼 정의
+  const warehouseColumns: EDataTableColumn[] = ts.visibleColumns.map((col) => {
+    const base: EDataTableColumn = { key: col.key, label: col.label };
+    if (col.key === "warehouse_type") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getTypeVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    if (col.key === "status") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getStatusVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    return base;
+  });
+
+  // 엑셀 내보내기
+  const handleExcelExport = () => {
+    if (warehouses.length === 0) {
+      toast.error("내보낼 데이터가 없어요");
+      return;
+    }
+    exportToExcel(
+      warehouses.map((r) => ({
+        창고코드: r.warehouse_code,
+        창고명: r.warehouse_name,
+        유형: r.warehouse_type,
+        관리자: r.manager,
+        상태: r.status,
+      })),
+      "창고정보"
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={WAREHOUSE_TABLE}
+        filterId="c16-warehouse"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={warehouses.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1 text-xs"
+              onClick={handleExcelExport}
+            >
+              <Download className="h-3.5 w-3.5" />
+              엑셀
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 패널 */}
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="flex-1 rounded-lg border bg-card"
+      >
+        {/* 좌측: 창고 목록 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+              <div className="flex items-center gap-2">
+                <span className="text-[13px] font-bold">창고 목록</span>
+                <Badge variant="default" className="rounded-full text-[11px]">
+                  {warehouses.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Button
+                  size="sm"
+                  className="h-7 gap-1 text-xs"
+                  onClick={openWarehouseCreateModal}
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                  등록
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-7 gap-1 text-xs text-destructive hover:text-destructive"
+                  onClick={handleWarehouseDelete}
+                  disabled={!selectedWarehouse}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+
+            <EDataTable
+              columns={warehouseColumns}
+              data={ts.groupData(warehouses)}
+              rowKey={(row) => row.id}
+              loading={warehouseLoading}
+              emptyMessage="등록된 창고가 없어요"
+              selectedId={selectedWarehouseId}
+              onSelect={(id) => setSelectedWarehouseId(id)}
+              onRowDoubleClick={(row) => openWarehouseEditModal(row)}
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+              columnOrderKey="c16-warehouse"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 로케이션 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex flex-col h-full">
+            {!selectedWarehouse ? (
+              <div className="flex flex-col items-center justify-center flex-1 m-5 border-2 border-dashed rounded-lg border-border">
+                <Building2 className="h-12 w-12 text-muted-foreground/40 mb-4" />
+                <p className="text-sm font-semibold text-muted-foreground">
+                  창고를 선택해주세요
+                </p>
+                <p className="text-xs text-muted-foreground/70 mt-1">
+                  좌측에서 창고를 선택하면 위치 정보가 표시돼요
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                  <div className="flex items-center gap-2">
+                    <MapPin className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-[13px] font-bold">
+                      {selectedWarehouse.warehouse_name}
+                    </span>
+                    <Badge
+                      variant="outline"
+                      className="rounded-full text-[11px] font-mono"
+                    >
+                      {selectedWarehouse.warehouse_code}
+                    </Badge>
+                    <Badge variant="secondary" className="rounded-full text-[10px]">
+                      {locations.length}개 위치
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={openRackModal}
+                    >
+                      <Layers className="h-3.5 w-3.5" />
+                      랙 구조 등록
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs text-destructive hover:text-destructive"
+                      onClick={handleLocationDelete}
+                      disabled={locationCheckedIds.length === 0}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                      삭제
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 로케이션 테이블 */}
+                <div className="flex-1 overflow-auto">
+                  {locationLoading ? (
+                    <div className="flex items-center justify-center h-32">
+                      <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : locations.length === 0 ? (
+                    <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">
+                      등록된 위치가 없어요
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="w-10 text-center">
+                            <Checkbox
+                              checked={
+                                someLocationChecked
+                                  ? "indeterminate"
+                                  : allLocationChecked
+                              }
+                              onCheckedChange={(v) =>
+                                toggleAllLocations(v === true)
+                              }
+                              aria-label="전체 선택"
+                            />
+                          </TableHead>
+                          <TableHead className="w-8 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">위치코드</TableHead>
+                          <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">위치명</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">층</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">구역</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">열</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {locations.map((loc, idx) => (
+                          <TableRow
+                            key={loc.id}
+                            className={cn(
+                              "cursor-pointer text-xs",
+                              locationCheckedIds.includes(loc.id) && "bg-primary/5"
+                            )}
+                            onDoubleClick={() => openLocationEditModal(loc)}
+                          >
+                            <TableCell className="text-center">
+                              <Checkbox
+                                checked={locationCheckedIds.includes(loc.id)}
+                                onCheckedChange={(v) =>
+                                  toggleLocation(loc.id, v === true)
+                                }
+                                aria-label="행 선택"
+                              />
+                            </TableCell>
+                            <TableCell className="text-center text-muted-foreground">
+                              {idx + 1}
+                            </TableCell>
+                            <TableCell className="font-mono truncate max-w-[110px]">
+                              {loc.location_code}
+                            </TableCell>
+                            <TableCell className="truncate max-w-[120px]">
+                              {loc.location_name}
+                            </TableCell>
+                            <TableCell className="text-center">{loc.floor}</TableCell>
+                            <TableCell>{loc.zone}</TableCell>
+                            <TableCell className="text-center">{loc.row_num}</TableCell>
+                            <TableCell className="text-center">{loc.level_num}</TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getTypeVariant(loc.location_type)}
+                                className="text-[10px]"
+                              >
+                                {loc.location_type}
+                              </Badge>
+                            </TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getStatusVariant(loc.status)}
+                                className="text-[10px]"
+                              >
+                                {loc.status}
+                              </Badge>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 창고 등록/수정 Dialog */}
+      <Dialog open={warehouseModalOpen} onOpenChange={setWarehouseModalOpen}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle>
+              {warehouseEditMode ? "창고 수정" : "창고 등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {warehouseEditMode
+                ? "창고 정보를 수정해주세요"
+                : "새로운 창고를 등록해주세요"}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid grid-cols-2 gap-4 py-2">
+            {/* 창고코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                창고코드 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={warehouseEditMode ? (warehouseForm.warehouse_code || "") : (whPreviewCode || "")}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_code: e.target.value }))
+                }
+                placeholder={warehouseEditMode ? "" : (whNumberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                disabled={warehouseEditMode}
+                readOnly={!warehouseEditMode && !!whNumberingRuleId}
+              />
+            </div>
+            {/* 창고명 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                창고명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={warehouseForm.warehouse_name || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_name: e.target.value }))
+                }
+                placeholder="창고명을 입력해주세요"
+              />
+            </div>
+            {/* 유형 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">유형</Label>
+              <Select
+                value={warehouseForm.warehouse_type || ""}
+                onValueChange={(v) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["warehouse_type"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">관리자</Label>
+              <Input
+                value={warehouseForm.manager || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, manager: e.target.value }))
+                }
+                placeholder="관리자를 입력해주세요"
+              />
+            </div>
+            {/* 상태 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+              <Select
+                value={warehouseForm.status || ""}
+                onValueChange={(v) =>
+                  setWarehouseForm((prev) => ({ ...prev, status: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["status"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 주소 (전체 너비) */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">주소</Label>
+              <Input
+                value={warehouseForm.address || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, address: e.target.value }))
+                }
+                placeholder="주소를 입력해주세요"
+              />
+            </div>
+            {/* 비고 (전체 너비) */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">비고</Label>
+              <Input
+                value={warehouseForm.description || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, description: e.target.value }))
+                }
+                placeholder="비고를 입력해주세요"
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setWarehouseModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleWarehouseSave} disabled={warehouseSaving}>
+              {warehouseSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              {warehouseEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 위치 등록/수정 Dialog */}
+      <Dialog open={locationModalOpen} onOpenChange={setLocationModalOpen}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle>
+              {locationEditMode ? "위치 수정" : "위치 등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {locationEditMode
+                ? "위치 정보를 수정해주세요"
+                : `${selectedWarehouse?.warehouse_name || ""} 창고에 새 위치를 등록해주세요`}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid grid-cols-2 gap-4 py-2">
+            {/* 창고코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">창고코드</Label>
+              <Input value={locationForm.warehouse_code || ""} disabled />
+            </div>
+            {/* 위치코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                위치코드 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={locationEditMode ? (locationForm.location_code || "") : (locPreviewCode || "")}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, location_code: e.target.value }))
+                }
+                placeholder={locationEditMode ? "" : (locNumberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                disabled={locationEditMode}
+                readOnly={!locationEditMode && !!locNumberingRuleId}
+              />
+            </div>
+            {/* 위치명 */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                위치명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={locationForm.location_name || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, location_name: e.target.value }))
+                }
+                placeholder="위치명을 입력해주세요"
+              />
+            </div>
+            {/* 층 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">층</Label>
+              <Input
+                value={locationForm.floor || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, floor: e.target.value }))
+                }
+                placeholder="층을 입력해주세요"
+              />
+            </div>
+            {/* 구역 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">구역</Label>
+              <Input
+                value={locationForm.zone || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, zone: e.target.value }))
+                }
+                placeholder="구역을 입력해주세요"
+              />
+            </div>
+            {/* 열 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">열</Label>
+              <Input
+                value={locationForm.row_num || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, row_num: e.target.value }))
+                }
+                placeholder="열을 입력해주세요"
+              />
+            </div>
+            {/* 단 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">단</Label>
+              <Input
+                value={locationForm.level_num || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, level_num: e.target.value }))
+                }
+                placeholder="단을 입력해주세요"
+              />
+            </div>
+            {/* 위치유형 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">위치유형</Label>
+              <Select
+                value={locationForm.location_type || ""}
+                onValueChange={(v) =>
+                  setLocationForm((prev) => ({ ...prev, location_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="위치유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(locationCategoryOptions["location_type"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 상태 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+              <Select
+                value={locationForm.status || ""}
+                onValueChange={(v) =>
+                  setLocationForm((prev) => ({ ...prev, status: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(locationCategoryOptions["status"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setLocationModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleLocationSave} disabled={locationSaving}>
+              {locationSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              {locationEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 랙 구조 일괄 등록 Dialog */}
+      <Dialog open={rackModalOpen} onOpenChange={setRackModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-3xl p-0 !gap-0" style={{ maxHeight: "90vh", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+          <div className="px-6 pt-6 pb-3 shrink-0">
+            <DialogTitle className="flex items-center gap-2">
+              <Layers className="h-5 w-5" />
+              랙 구조 일괄 등록
+            </DialogTitle>
+            <DialogDescription className="mt-1">
+              {selectedWarehouse?.warehouse_name} ({selectedWarehouse?.warehouse_code}) 창고에 랙 구조를 일괄 등록합니다
+            </DialogDescription>
+          </div>
+
+          <div className="flex-1 overflow-y-auto min-h-0">
+            <div className="space-y-6 px-6 py-4">
+              {/* 기본 정보 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  📍 기본 정보
+                </h3>
+                <div className="grid grid-cols-3 gap-4">
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      창고 <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      value={`${selectedWarehouse?.warehouse_name || ""} (${selectedWarehouse?.warehouse_code || ""})`}
+                      disabled
+                    />
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      층 <span className="text-destructive">*</span>
+                    </Label>
+                    {(locationCategoryOptions["floor"] || []).length > 0 ? (
+                      <Select value={rackFloor} onValueChange={setRackFloor}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="층 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(locationCategoryOptions["floor"] || []).map((o) => (
+                            <SelectItem key={o.code} value={o.code}>
+                              {o.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={rackFloor}
+                        onChange={(e) => setRackFloor(e.target.value)}
+                        placeholder="예: B1, 1F, 2F"
+                      />
+                    )}
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      구역 <span className="text-destructive">*</span>
+                    </Label>
+                    {(locationCategoryOptions["zone"] || []).length > 0 ? (
+                      <Select value={rackZone} onValueChange={setRackZone}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="구역 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(locationCategoryOptions["zone"] || []).map((o) => (
+                            <SelectItem key={o.code} value={o.code}>
+                              {o.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={rackZone}
+                        onChange={(e) => setRackZone(e.target.value)}
+                        placeholder="예: A, B, C"
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* 랙 라인 구조 설정 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  📊 랙 라인 구조 설정
+                </h3>
+
+                {/* 안내 박스 */}
+                <div className="rounded-lg bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 p-3 mb-3">
+                  <div className="flex items-start gap-2">
+                    <Info className="h-4 w-4 text-blue-600 dark:text-blue-400 mt-0.5 shrink-0" />
+                    <div className="text-xs text-blue-700 dark:text-blue-300 space-y-0.5">
+                      <p>1. 조건 추가 버튼을 클릭하여 랙 라인 조건을 생성하세요</p>
+                      <p>2. 각 조건마다 열 범위와 단 수를 입력하세요</p>
+                      <p>3. 예시: 조건1(1~3열, 3단), 조건2(4~6열, 5단)</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-xs text-muted-foreground">
+                    {rackConditions.length}개 조건
+                  </span>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={addRackCondition}
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    조건 추가
+                  </Button>
+                </div>
+
+                {rackConditions.length === 0 ? (
+                  <div className="flex flex-col items-center justify-center py-8 border-2 border-dashed rounded-lg border-border">
+                    <Layers className="h-8 w-8 text-muted-foreground/40 mb-2" />
+                    <p className="text-sm text-muted-foreground mb-2">
+                      조건을 추가하여 랙 구조를 설정하세요
+                    </p>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={addRackCondition}
+                    >
+                      <Plus className="h-3.5 w-3.5" />
+                      첫 번째 조건 추가
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {rackConditions.map((cond, idx) => (
+                      <div
+                        key={cond.id}
+                        className="flex items-center gap-3 rounded-lg border p-3 bg-card"
+                      >
+                        <span className="text-xs font-bold text-muted-foreground w-10 shrink-0">
+                          조건{idx + 1}
+                        </span>
+                        <div className="flex items-center gap-1.5 flex-1">
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-20 text-center text-xs"
+                            value={cond.startRow || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "startRow", Number(e.target.value) || 0)
+                            }
+                            placeholder="시작"
+                          />
+                          <span className="text-xs text-muted-foreground">~</span>
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-20 text-center text-xs"
+                            value={cond.endRow || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "endRow", Number(e.target.value) || 0)
+                            }
+                            placeholder="끝"
+                          />
+                          <span className="text-xs text-muted-foreground">열,</span>
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-16 text-center text-xs"
+                            value={cond.levels || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "levels", Number(e.target.value) || 0)
+                            }
+                            placeholder="단"
+                          />
+                          <span className="text-xs text-muted-foreground">단</span>
+                        </div>
+                        {getRackConditionCount(cond) > 0 && (
+                          <Badge variant="secondary" className="text-[10px] shrink-0">
+                            {cond.startRow}열 ~ {cond.endRow}열 × {cond.levels}단 = {getRackConditionCount(cond)}개
+                          </Badge>
+                        )}
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-7 w-7 p-0 text-destructive hover:text-destructive shrink-0"
+                          onClick={() => removeRackCondition(cond.id)}
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* 공통 설정 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  ⚙️ 공통 설정
+                </h3>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      위치 유형
+                    </Label>
+                    <Select value={rackLocationType} onValueChange={setRackLocationType}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="위치유형 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(locationCategoryOptions["location_type"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>
+                            {o.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      사용 여부
+                    </Label>
+                    <Select value={rackStatus} onValueChange={setRackStatus}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="상태 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(locationCategoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>
+                            {o.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+
+              {/* 등록 미리보기 */}
+              <div>
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-sm font-bold flex items-center gap-1.5">
+                    👁️ 등록 미리보기
+                  </h3>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={generateRackPreview}
+                  >
+                    <Eye className="h-3.5 w-3.5" />
+                    미리보기 생성
+                  </Button>
+                </div>
+
+                {rackPreview.length > 0 && (
+                  <>
+                    {/* 통계 카드 */}
+                    <div className="grid grid-cols-3 gap-3 mb-3">
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">총 위치</p>
+                        <p className="text-lg font-bold">{rackStats.totalLocations}개</p>
+                      </div>
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">열 수</p>
+                        <p className="text-lg font-bold">{rackStats.totalRows}개</p>
+                      </div>
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">최대 단</p>
+                        <p className="text-lg font-bold">{rackStats.maxLevels}</p>
+                      </div>
+                    </div>
+
+                    {/* 미리보기 테이블 */}
+                    <div className="rounded-lg border overflow-hidden max-h-[300px] overflow-y-auto">
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-10 text-center text-[11px] font-bold text-muted-foreground">No</TableHead>
+                            <TableHead className="text-[11px] font-bold text-muted-foreground">위치코드</TableHead>
+                            <TableHead className="text-[11px] font-bold text-muted-foreground">위치명</TableHead>
+                            <TableHead className="w-14 text-center text-[11px] font-bold text-muted-foreground">층</TableHead>
+                            <TableHead className="w-14 text-center text-[11px] font-bold text-muted-foreground">구역</TableHead>
+                            <TableHead className="w-12 text-center text-[11px] font-bold text-muted-foreground">열</TableHead>
+                            <TableHead className="w-12 text-center text-[11px] font-bold text-muted-foreground">단</TableHead>
+                            <TableHead className="w-16 text-[11px] font-bold text-muted-foreground">유형</TableHead>
+                            <TableHead className="w-16 text-[11px] font-bold text-muted-foreground">비고</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {rackPreview.map((item, idx) => (
+                            <TableRow key={idx} className="text-xs">
+                              <TableCell className="text-center text-muted-foreground">
+                                {idx + 1}
+                              </TableCell>
+                              <TableCell className="font-mono">{item.location_code}</TableCell>
+                              <TableCell>{item.location_name}</TableCell>
+                              <TableCell className="text-center">{item.floor}</TableCell>
+                              <TableCell className="text-center">{item.zone}</TableCell>
+                              <TableCell className="text-center">{item.row_num}</TableCell>
+                              <TableCell className="text-center">{item.level_num}</TableCell>
+                              <TableCell>
+                                {resolveCategory(locationCategoryOptions, "location_type", item.location_type) || "-"}
+                              </TableCell>
+                              <TableCell>-</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </>
+                )}
+
+                {rackPreview.length === 0 && (
+                  <div className="flex flex-col items-center justify-center py-6 border-2 border-dashed rounded-lg border-border text-sm text-muted-foreground">
+                    위의 설정을 완료한 뒤 미리보기 생성 버튼을 클릭하세요
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2 px-6 py-4 border-t shrink-0 bg-background">
+            <Button variant="outline" onClick={() => setRackModalOpen(false)}>
+              취소
+            </Button>
+            <Button
+              onClick={handleRackBulkSave}
+              disabled={rackSaving || rackPreview.length === 0}
+            >
+              {rackSaving && <Loader2 className="h-4 w-4 animate-spin mr-1" />}
+              일괄 등록 ({rackPreview.length}건)
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/master-data/company/page.tsx b/frontend/app/(main)/COMPANY_10/master-data/company/page.tsx
new file mode 100644
index 00000000..9d7f2dea
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/master-data/company/page.tsx
@@ -0,0 +1,759 @@
+"use client";
+
+/**
+ * 회사관리 — Type D 탭 멀티뷰 (2탭)
+ *
+ * Tab 1: 회사정보 (company_mng 단일 레코드 폼)
+ * Tab 2: 부서관리 (dept_info 트리 + user_info 목록)
+ */
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Building2, Users, Pencil, Save, Loader2, Plus, Trash2,
+  Upload, X, Image as ImageIcon, ChevronRight, FolderOpen, Folder,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import * as departmentAPI from "@/lib/api/department";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { formatField, validateField, validateForm } from "@/lib/utils/validation";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const COMPANY_TABLE = "company_mng";
+const DEPT_TABLE = "dept_info";
+const USER_TABLE = "user_info";
+
+/* ── 트리 노드 타입 ── */
+interface DeptNode {
+  dept_code: string;
+  dept_name: string;
+  parent_dept_code: string | null;
+  status?: string;
+  children: DeptNode[];
+}
+
+export default function CompanyPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  /* ===================== Tab 1: 회사정보 ===================== */
+  const [companyData, setCompanyData] = useState<Record<string, any>>({});
+  const [companyForm, setCompanyForm] = useState<Record<string, any>>({});
+  const [companyLoading, setCompanyLoading] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  // 이미지 업로드 refs
+  const imageRef = useRef<HTMLInputElement>(null);
+  const logoRef = useRef<HTMLInputElement>(null);
+  const sealRef = useRef<HTMLInputElement>(null);
+
+  // 이미지 미리보기
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [logoPreview, setLogoPreview] = useState<string | null>(null);
+  const [sealPreview, setSealPreview] = useState<string | null>(null);
+
+  const fetchCompany = useCallback(async () => {
+    setCompanyLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${COMPANY_TABLE}/data`, {
+        page: 1, size: 1, autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      if (rows.length > 0) {
+        setCompanyData(rows[0]);
+        setCompanyForm(rows[0]);
+        if (rows[0].company_image) setImagePreview(rows[0].company_image);
+        if (rows[0].company_logo) setLogoPreview(rows[0].company_logo);
+        if (rows[0].company_seal) setSealPreview(rows[0].company_seal);
+      }
+    } catch {
+      toast.error("회사 정보를 불러오는데 실패했어요.");
+    } finally {
+      setCompanyLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchCompany(); }, [fetchCompany]);
+
+  const handleImageUpload = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    field: string,
+    setPreview: React.Dispatch<React.SetStateAction<string | null>>,
+  ) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result as string;
+      setPreview(result);
+      setCompanyForm((prev) => ({ ...prev, [field]: result }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleCompanySave = async () => {
+    if (!companyForm.company_name) {
+      toast.error("회사명은 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_at, updated_at, writer, created_date, updated_date, regdate, company_code, ...updatedData } = companyForm;
+
+      if (companyData.company_code) {
+        await apiClient.put(`/table-management/tables/${COMPANY_TABLE}/edit`, {
+          originalData: { company_code: companyData.company_code },
+          updatedData,
+        });
+      } else {
+        await apiClient.post(`/table-management/tables/${COMPANY_TABLE}/add`, { company_code, ...updatedData });
+      }
+      toast.success("회사 정보가 저장되었어요.");
+      setEditMode(false);
+      fetchCompany();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const cancelEdit = () => {
+    setCompanyForm(companyData);
+    setImagePreview(companyData.company_image || null);
+    setLogoPreview(companyData.company_logo || null);
+    setSealPreview(companyData.company_seal || null);
+    setEditMode(false);
+  };
+
+  /* ===================== Tab 2: 부서관리 ===================== */
+  const [depts, setDepts] = useState<any[]>([]);
+  const [deptTree, setDeptTree] = useState<DeptNode[]>([]);
+  const [deptLoading, setDeptLoading] = useState(false);
+  const [selectedDeptCode, setSelectedDeptCode] = useState<string | null>(null);
+  const [expandedDepts, setExpandedDepts] = useState<Set<string>>(new Set());
+
+  // 사원
+  const [members, setMembers] = useState<any[]>([]);
+  const [memberLoading, setMemberLoading] = useState(false);
+
+  // 부서 모달
+  const [deptModalOpen, setDeptModalOpen] = useState(false);
+  const [deptEditMode, setDeptEditMode] = useState(false);
+  const [deptForm, setDeptForm] = useState<Record<string, any>>({});
+  const [deptSaving, setDeptSaving] = useState(false);
+
+  // 채번
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 사원 모달
+  const [userModalOpen, setUserModalOpen] = useState(false);
+  const [userEditMode, setUserEditMode] = useState(false);
+  const [userForm, setUserForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+
+  // 트리 구성
+  const buildTree = (flatDepts: any[]): DeptNode[] => {
+    const map: Record<string, DeptNode> = {};
+    const roots: DeptNode[] = [];
+    flatDepts.forEach((d) => {
+      map[d.dept_code] = { ...d, children: [] };
+    });
+    flatDepts.forEach((d) => {
+      const node = map[d.dept_code];
+      if (d.parent_dept_code && map[d.parent_dept_code]) {
+        map[d.parent_dept_code].children.push(node);
+      } else {
+        roots.push(node);
+      }
+    });
+    return roots;
+  };
+
+  const fetchDepts = useCallback(async () => {
+    setDeptLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DEPT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setDepts(raw);
+      setDeptTree(buildTree(raw));
+      // 전부 펼치기
+      setExpandedDepts(new Set(raw.map((d: any) => d.dept_code)));
+    } catch {
+      toast.error("부서 목록을 불러오는데 실패했어요.");
+    } finally {
+      setDeptLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchDepts(); }, [fetchDepts]);
+
+  const selectedDept = depts.find((d) => d.dept_code === selectedDeptCode);
+
+  // 사원 조회
+  const fetchMembers = useCallback(async () => {
+    if (!selectedDeptCode) { setMembers([]); return; }
+    setMemberLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${USER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "dept_code", operator: "equals", value: selectedDeptCode }] },
+        autoFilter: true,
+      });
+      setMembers(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setMembers([]); } finally { setMemberLoading(false); }
+  }, [selectedDeptCode]);
+
+  useEffect(() => { fetchMembers(); }, [fetchMembers]);
+
+  // 트리 토글
+  const toggleExpand = (code: string) => {
+    setExpandedDepts((prev) => {
+      const next = new Set(prev);
+      if (next.has(code)) next.delete(code); else next.add(code);
+      return next;
+    });
+  };
+
+  // 부서 등록
+  const openDeptRegister = async () => {
+    setDeptForm({});
+    setDeptEditMode(false);
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setDeptModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/dept_info/dept_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openDeptEdit = () => {
+    if (!selectedDept) return;
+    setDeptForm({ ...selectedDept });
+    setDeptEditMode(true);
+    setDeptModalOpen(true);
+  };
+
+  const handleDeptSave = async () => {
+    if (!deptForm.dept_name) { toast.error("부서명은 필수예요."); return; }
+    const parentCode = (deptForm.parent_dept_code && deptForm.parent_dept_code !== "none") ? deptForm.parent_dept_code : null;
+    setDeptSaving(true);
+    try {
+      if (deptEditMode && deptForm.dept_code) {
+        const response = await departmentAPI.updateDepartment(deptForm.dept_code, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "수정에 실패했어요."); return; }
+        toast.success("수정되었어요.");
+      } else {
+        const companyCode = user?.companyCode || "";
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else { toast.error("채번 코드 할당에 실패했어요."); return; }
+        }
+        const response = await departmentAPI.createDepartment(companyCode, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+          dept_code: allocatedCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "등록에 실패했어요."); return; }
+        toast.success("등록되었어요.");
+      }
+      setDeptModalOpen(false);
+      fetchDepts();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setDeptSaving(false);
+    }
+  };
+
+  const handleDeptDelete = async () => {
+    if (!selectedDeptCode) return;
+    const ok = await confirm("부서를 삭제할까요?", {
+      description: "해당 부서에 소속된 사원 정보는 유지돼요.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      const response = await departmentAPI.deleteDepartment(selectedDeptCode);
+      if (!response.success) { toast.error((response as any).error || "삭제에 실패했어요."); return; }
+      toast.success((response as any).message || "삭제되었어요.");
+      setSelectedDeptCode(null);
+      fetchDepts();
+    } catch { toast.error("삭제에 실패했어요."); }
+  };
+
+  // 사원 추가/수정
+  const openUserModal = (editData?: any) => {
+    if (editData) {
+      setUserEditMode(true);
+      setUserForm({ ...editData, user_password: "" });
+    } else {
+      setUserEditMode(false);
+      setUserForm({ dept_code: selectedDeptCode || "", user_password: "" });
+    }
+    setFormErrors({});
+    setUserModalOpen(true);
+  };
+
+  const handleUserFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setUserForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => { const n = { ...prev }; if (error) n[field] = error; else delete n[field]; return n; });
+  };
+
+  const handleUserSave = async () => {
+    if (!userForm.user_id) { toast.error("사용자 ID는 필수예요."); return; }
+    if (!userForm.user_name) { toast.error("사용자 이름은 필수예요."); return; }
+    if (!userForm.dept_code) { toast.error("부서는 필수예요."); return; }
+    const errors = validateForm(userForm, ["cell_phone", "email"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) { toast.error("입력 형식을 확인해주세요."); return; }
+    setDeptSaving(true);
+    try {
+      const password = userForm.user_password || (!userEditMode ? "qlalfqjsgh11" : undefined);
+      await apiClient.post("/admin/users/with-dept", {
+        userInfo: {
+          user_id: userForm.user_id,
+          user_name: userForm.user_name,
+          user_name_eng: userForm.user_name_eng || undefined,
+          user_password: password || undefined,
+          email: userEditMode ? (userForm.email || null) : (userForm.email || undefined),
+          tel: userForm.tel || undefined,
+          cell_phone: userEditMode ? (userForm.cell_phone || null) : (userForm.cell_phone || undefined),
+          sabun: userEditMode ? (userForm.sabun || null) : (userForm.sabun || undefined),
+          position_name: userForm.position_name || undefined,
+          dept_code: userForm.dept_code || undefined,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name || undefined,
+          status: userForm.status || "active",
+        },
+        mainDept: userForm.dept_code ? {
+          dept_code: userForm.dept_code,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name,
+          position_name: userForm.position_name || undefined,
+        } : undefined,
+        isUpdate: userEditMode,
+      });
+      toast.success(userEditMode ? "사원 정보가 수정되었어요." : "사원이 추가되었어요.");
+      setUserModalOpen(false);
+      fetchMembers();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setDeptSaving(false);
+    }
+  };
+
+  // EDataTable 컬럼 정의 (사원 목록)
+  const companyMemberColumns: EDataTableColumn[] = [
+    { key: "sabun", label: "사번", width: "w-[80px]", render: (val: any) => <span className="text-[13px]">{val || "-"}</span> },
+    { key: "user_name", label: "이름", width: "w-[90px]" },
+    { key: "user_id", label: "사용자ID", width: "w-[100px]" },
+    { key: "position_name", label: "직급", width: "w-[80px]", render: (val: any) => <span>{val || "-"}</span> },
+    { key: "cell_phone", label: "휴대폰", width: "w-[120px]", render: (val: any) => <span>{val || "-"}</span> },
+    { key: "email", label: "이메일" },
+  ];
+
+  /* ── 트리 렌더 ── */
+  const renderTree = (nodes: DeptNode[], depth = 0) => {
+    return nodes.map((node) => {
+      const isExpanded = expandedDepts.has(node.dept_code);
+      const isSelected = selectedDeptCode === node.dept_code;
+      const hasChildren = node.children.length > 0;
+      return (
+        <div key={node.dept_code}>
+          <div
+            className={cn(
+              "flex items-center gap-1.5 px-3 py-2 cursor-pointer text-sm transition-colors hover:bg-accent",
+              isSelected && "bg-primary/10 text-primary font-semibold border-l-2 border-primary",
+              !isSelected && "border-l-2 border-transparent",
+            )}
+            style={{ paddingLeft: `${12 + depth * 20}px` }}
+            onClick={() => setSelectedDeptCode(isSelected ? null : node.dept_code)}
+          >
+            {hasChildren ? (
+              <button
+                className="p-0.5 rounded hover:bg-accent"
+                onClick={(e) => { e.stopPropagation(); toggleExpand(node.dept_code); }}
+              >
+                <ChevronRight className={cn("w-3.5 h-3.5 transition-transform", isExpanded && "rotate-90")} />
+              </button>
+            ) : (
+              <span className="w-4.5" />
+            )}
+            {isExpanded && hasChildren
+              ? <FolderOpen className="w-4 h-4 text-muted-foreground" />
+              : <Folder className="w-4 h-4 text-muted-foreground" />
+            }
+            <span className="truncate">{node.dept_name}</span>
+            {node.status === "inactive" && <Badge variant="outline" className="text-[10px] px-1 py-0">비활성</Badge>}
+          </div>
+          {isExpanded && hasChildren && renderTree(node.children, depth + 1)}
+        </div>
+      );
+    });
+  };
+
+  /* ── 이미지 업로드 박스 ── */
+  const ImageUploadBox = ({
+    label, preview, inputRef, field, setPreview,
+  }: {
+    label: string;
+    preview: string | null;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    field: string;
+    setPreview: React.Dispatch<React.SetStateAction<string | null>>;
+  }) => (
+    <div className="flex flex-col gap-2">
+      <Label className="text-sm font-medium">{label}</Label>
+      <div className="relative w-40 h-40 rounded-lg border-2 border-dashed border-border bg-muted/50 flex items-center justify-center overflow-hidden group">
+        {preview ? (
+          <>
+            <img src={preview} alt={label} className="w-full h-full object-contain" />
+            {editMode && (
+              <div className="absolute inset-0 bg-foreground/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                <Button size="sm" variant="secondary" className="h-7 text-xs" onClick={() => inputRef.current?.click()}>
+                  <Upload className="w-3 h-3 mr-1" /> 변경
+                </Button>
+                <Button size="sm" variant="destructive" className="h-7 text-xs" onClick={() => {
+                  setPreview(null);
+                  setCompanyForm((prev) => ({ ...prev, [field]: null }));
+                }}>
+                  <X className="w-3 h-3" />
+                </Button>
+              </div>
+            )}
+          </>
+        ) : (
+          <button
+            className="flex flex-col items-center gap-1.5 text-muted-foreground"
+            onClick={() => editMode && inputRef.current?.click()}
+            disabled={!editMode}
+          >
+            <ImageIcon className="w-8 h-8" />
+            <span className="text-xs">{editMode ? "이미지 업로드" : "이미지 없음"}</span>
+          </button>
+        )}
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={(e) => handleImageUpload(e, field, setPreview)}
+      />
+    </div>
+  );
+
+  return (
+    <div className="h-[calc(100vh-4rem)] flex flex-col overflow-hidden">
+      {/* 탭 컨테이너 */}
+      <Tabs defaultValue="company" className="flex flex-col h-full gap-0 min-h-0">
+        {/* 탭 헤더 — border-b 스타일 */}
+        <div className="shrink-0 border-b bg-background px-4">
+          <TabsList className="h-12 bg-transparent gap-1">
+            <TabsTrigger
+              value="company"
+              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 gap-1.5"
+            >
+              <Building2 className="w-4 h-4" /> 회사정보
+            </TabsTrigger>
+          </TabsList>
+        </div>
+
+        {/* ===================== Tab 1: 회사정보 ===================== */}
+        <TabsContent value="company" className="flex-1 overflow-auto mt-0 p-4">
+          <div className="border rounded-lg bg-card">
+            {/* 패널 헤더 */}
+            <div className="flex items-center justify-between px-6 py-3 border-b bg-muted/30">
+              <div className="font-semibold flex items-center gap-2 text-sm">
+                <Building2 className="w-4 h-4 text-muted-foreground" />
+                <span>회사 기본정보</span>
+              </div>
+              <div className="flex gap-1.5">
+                {editMode ? (
+                  <>
+                    <Button variant="outline" size="sm" onClick={cancelEdit}>취소</Button>
+                    <Button size="sm" onClick={handleCompanySave} disabled={saving}>
+                      {saving ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <Save className="w-3.5 h-3.5 mr-1" />}
+                      저장해요
+                    </Button>
+                  </>
+                ) : (
+                  <Button size="sm" onClick={() => setEditMode(true)}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {companyLoading ? (
+              <div className="flex items-center justify-center py-20">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : (
+              <div className="p-6 space-y-6">
+                {/* 기본 정보 섹션 제목 */}
+                <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  기본 정보
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+
+                {/* 기본 정보 그리드 (2열) */}
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">회사코드</Label>
+                    <Input value={companyForm.company_code || ""} className="h-9 bg-muted/50" disabled readOnly />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      회사명 <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      value={companyForm.company_name || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, company_name: e.target.value }))}
+                      placeholder="회사명을 입력해주세요"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">사업자등록번호</Label>
+                    <Input
+                      value={companyForm.business_registration_number || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, business_registration_number: e.target.value }))}
+                      placeholder="000-00-00000"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대표자명</Label>
+                    <Input
+                      value={companyForm.representative_name || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, representative_name: e.target.value }))}
+                      placeholder="대표자명"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대표전화</Label>
+                    <Input
+                      value={companyForm.representative_phone || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, representative_phone: e.target.value }))}
+                      placeholder="02-0000-0000"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">팩스</Label>
+                    <Input
+                      value={companyForm.fax || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, fax: e.target.value }))}
+                      placeholder="02-0000-0001"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">이메일</Label>
+                    <Input
+                      value={companyForm.email || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, email: e.target.value }))}
+                      placeholder="example@company.com"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">홈페이지</Label>
+                    <Input
+                      value={companyForm.website || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, website: e.target.value }))}
+                      placeholder="https://www.company.com"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="col-span-2 space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">주소</Label>
+                    <Input
+                      value={companyForm.address || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="회사 주소를 입력해주세요"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                </div>
+
+                {/* 이미지 섹션 */}
+                <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  이미지 관리
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <div className="flex gap-6">
+                  <ImageUploadBox label="회사 이미지" preview={imagePreview} inputRef={imageRef} field="company_image" setPreview={setImagePreview} />
+                  <ImageUploadBox label="회사 로고" preview={logoPreview} inputRef={logoRef} field="company_logo" setPreview={setLogoPreview} />
+                  <ImageUploadBox label="직인" preview={sealPreview} inputRef={sealRef} field="company_seal" setPreview={setSealPreview} />
+                </div>
+              </div>
+            )}
+          </div>
+        </TabsContent>
+
+      </Tabs>
+
+      {/* ── 부서 등록/수정 모달 ── */}
+      <Dialog open={deptModalOpen} onOpenChange={setDeptModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{deptEditMode ? "부서 수정" : "부서 등록"}</DialogTitle>
+            <DialogDescription>{deptEditMode ? "부서 정보를 수정해요." : "새로운 부서를 등록해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서코드</Label>
+              <Input
+                value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
+                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성됩니다")}
+                className="h-9" disabled readOnly
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서명 <span className="text-destructive">*</span></Label>
+              <Input
+                value={deptForm.dept_name || ""}
+                onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
+                placeholder="부서명" className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">상위부서</Label>
+              <Select value={deptForm.parent_dept_code || ""} onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="상위부서 선택 (선택사항)" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">없음</SelectItem>
+                  {depts.filter((d) => d.dept_code !== deptForm.dept_code).map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name} ({d.dept_code})</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeptModalOpen(false)}>취소</Button>
+            <Button onClick={handleDeptSave} disabled={deptSaving}>
+              {deptSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 사원 추가/수정 모달 ── */}
+      <Dialog open={userModalOpen} onOpenChange={setUserModalOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{userEditMode ? "사원 정보 수정" : "사원 추가"}</DialogTitle>
+            <DialogDescription>
+              {userEditMode
+                ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정해요.`
+                : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가해요.` : "사원을 추가해요."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-sm">사용자 ID <span className="text-destructive">*</span></Label>
+              <Input value={userForm.user_id || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
+                placeholder="사용자 ID" className="h-9" disabled={userEditMode} />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">이름 <span className="text-destructive">*</span></Label>
+              <Input value={userForm.user_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
+                placeholder="이름" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">사번</Label>
+              <Input value={userForm.sabun || ""} onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
+                placeholder="사번" className="h-9" autoComplete="off" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">비밀번호</Label>
+              <Input value={userForm.user_password || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
+                placeholder={userEditMode ? "변경 시에만 입력" : "미입력 시 qlalfqjsgh11"} className="h-9" type="password" autoComplete="new-password" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">직급</Label>
+              <Input value={userForm.position_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
+                placeholder="직급" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서 <span className="text-destructive">*</span></Label>
+              <Select value={userForm.dept_code || ""} onValueChange={(v) => setUserForm((p) => ({ ...p, dept_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="부서 선택" /></SelectTrigger>
+                <SelectContent>
+                  {depts.map((d) => <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">휴대폰</Label>
+              <Input value={userForm.cell_phone || ""} onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
+                placeholder="010-0000-0000" className={cn("h-9", formErrors.cell_phone && "border-destructive")} />
+              {formErrors.cell_phone && <p className="text-xs text-destructive">{formErrors.cell_phone}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">이메일</Label>
+              <Input value={userForm.email || ""} onChange={(e) => handleUserFormChange("email", e.target.value)}
+                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
+              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">입사일</Label>
+              <Input type="date" value={userForm.regdate || ""} onChange={(e) => setUserForm((p) => ({ ...p, regdate: e.target.value }))} className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">퇴사일</Label>
+              <Input type="date" value={userForm.end_date || ""} onChange={(e) => setUserForm((p) => ({ ...p, end_date: e.target.value }))} className="h-9" />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserModalOpen(false)}>취소</Button>
+            <Button onClick={handleUserSave} disabled={deptSaving}>
+              {deptSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/master-data/department/page.tsx b/frontend/app/(main)/COMPANY_10/master-data/department/page.tsx
index 5ffa7c7e..23f70f2b 100644
--- a/frontend/app/(main)/COMPANY_10/master-data/department/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/master-data/department/page.tsx
@@ -9,7 +9,7 @@
  * 모달: 부서 등록(dept_info), 사원 추가(user_info)
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -17,11 +17,14 @@ import { Badge } from "@/components/ui/badge";
 import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
 } from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
-  Building2, Users, Settings2,
+  Users, Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
@@ -29,46 +32,34 @@ import * as departmentAPI from "@/lib/api/department";
 import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 import { formatField, validateField, validateForm } from "@/lib/utils/validation";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const DEPT_TABLE = "dept_info";
 const USER_TABLE = "user_info";
-
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "dept_code", label: "부서코드", width: "w-[120px]" },
-  { key: "dept_name", label: "부서명", minWidth: "min-w-[150px]" },
-  { key: "parent_dept_code", label: "상위부서", width: "w-[100px]" },
-  { key: "status", label: "상태", width: "w-[70px]" },
-];
-
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "sabun", label: "사번", width: "w-[80px]" },
-  { key: "user_name", label: "이름", width: "w-[90px]" },
-  { key: "user_id", label: "사용자ID", width: "w-[100px]" },
-  { key: "position_name", label: "직급", width: "w-[80px]" },
-  { key: "cell_phone", label: "휴대폰", width: "w-[120px]" },
-  { key: "email", label: "이메일", minWidth: "min-w-[150px]" },
+const DEPT_COLUMNS = [
+  { key: "parent_dept_code", label: "상위부서" },
+  { key: "status", label: "상태" },
 ];
 
 export default function DepartmentPage() {
   const { user } = useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
 
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
   // 좌측: 부서
   const [depts, setDepts] = useState<any[]>([]);
   const [deptLoading, setDeptLoading] = useState(false);
   const [deptCount, setDeptCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
   const [selectedDeptId, setSelectedDeptId] = useState<string | null>(null);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
 
   // 우측: 사원
   const [members, setMembers] = useState<any[]>([]);
@@ -90,17 +81,14 @@ export default function DepartmentPage() {
   const [userForm, setUserForm] = useState<Record<string, any>>({});
   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
 
+  // 사원 탭 (재직중/퇴사)
+  const [memberTab, setMemberTab] = useState<"active" | "resigned">("active");
+
   // 엑셀
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
-
-  useEffect(() => {
-    const saved = loadTableSettings("department");
-    if (saved) applyTableSettings(saved);
-  }, []);
+  // 테이블 설정
+  const ts = useTableSettings("c16-department", DEPT_TABLE, DEPT_COLUMNS);
 
   // 부서 조회
   const fetchDepts = useCallback(async () => {
@@ -244,7 +232,7 @@ export default function DepartmentPage() {
     } catch { toast.error("삭제에 실패했습니다."); }
   };
 
-  // 사원 추가
+  // 사원 추가/수정
   const openUserModal = (editData?: any) => {
     if (editData) {
       setUserEditMode(true);
@@ -291,6 +279,7 @@ export default function DepartmentPage() {
           dept_code: userForm.dept_code || undefined,
           dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name || undefined,
           status: userForm.status || "active",
+          end_date: userForm.end_date || null,
         },
         mainDept: userForm.dept_code ? {
           dept_code: userForm.dept_code,
@@ -319,88 +308,254 @@ export default function DepartmentPage() {
     toast.success("다운로드 완료");
   };
 
+  // 퇴사일 기반 재직/퇴사 분리
+  const _now = new Date();
+  const today = `${_now.getFullYear()}-${String(_now.getMonth() + 1).padStart(2, "0")}-${String(_now.getDate()).padStart(2, "0")}`;
+  const activeMembers = members.filter((m) => !m.end_date || m.end_date.substring(0, 10) >= today);
+  const resignedMembers = members.filter((m) => m.end_date && m.end_date.substring(0, 10) < today);
+
+  // EDataTable 컬럼 정의 (부서 목록) — ts.visibleColumns 순서를 따름
+  const deptColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      dept_code: { width: "w-[120px]" },
+      dept_name: { minWidth: "min-w-[140px]" },
+      parent_dept_code: {
+        width: "w-[110px]",
+        render: (val: any) => <span className="text-[13px] text-muted-foreground">{val || "\u2014"}</span>,
+      },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "active" ? "default" : "outline"}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val === "active" ? "활성" : (val || "\u2014")}
+            </Badge>
+          ) : null,
+      },
+    };
+    // dept_code, dept_name은 항상 표시 (DEPT_COLUMNS에 포함되지 않으므로 visibleColumns에 없음)
+    const fixedCols: EDataTableColumn[] = [
+      { key: "dept_code", label: "부서코드", ...colProps["dept_code"] },
+      { key: "dept_name", label: "부서명", ...colProps["dept_name"] },
+    ];
+    const dynamicCols = ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+    return [...fixedCols, ...dynamicCols];
+  }, [ts.visibleColumns]);
+
   return (
-    <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 바 */}
       <DynamicSearchFilter
         tableName={DEPT_TABLE}
-        filterId="department"
+        filterId="c16-department"
         onFilterChange={setSearchFilters}
         dataCount={deptCount}
-        externalFilterConfig={filterConfig}
+        externalFilterConfig={ts.filterConfig}
         extraActions={
           <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
+            <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+              엑셀 업로드
             </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
+            <Button variant="outline" size="sm" className="h-8" onClick={() => void handleExcelDownload()}>
               <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
             </Button>
           </div>
         }
       />
 
-      {/* 분할 패널 */}
+      {/* 마스터-디테일 분할 패널 */}
       <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
         <ResizablePanelGroup direction="horizontal">
-          {/* 좌측: 부서 */}
+          {/* 좌측: 부서 목록 */}
           <ResizablePanel defaultSize={40} minSize={25}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Building2 className="w-4 h-4" /> 부서
-                  <Badge variant="secondary" className="font-normal">{deptCount}건</Badge>
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-3 border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">부서 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {deptCount}건
+                  </span>
                 </div>
                 <div className="flex gap-1.5">
-                  <Button size="sm" onClick={openDeptRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
-                  <Button variant="outline" size="sm" disabled={!selectedDeptCode} onClick={openDeptEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
-                  <Button variant="destructive" size="sm" disabled={!selectedDeptCode} onClick={handleDeptDelete}><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                  <Button size="sm" onClick={() => void openDeptRegister()}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedDeptCode} onClick={openDeptEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedDeptCode} onClick={() => void handleDeptDelete()}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid
-                gridId="dept-left"
-                columns={LEFT_COLUMNS}
-                data={depts}
+
+              {/* 부서 테이블 */}
+              <EDataTable
+                columns={deptColumns}
+                data={ts.groupData(depts)}
+                rowKey={(row) => row.id}
                 loading={deptLoading}
+                emptyMessage="등록된 부서가 없어요"
                 selectedId={selectedDeptId}
-                onSelect={(id) => {
-                  setSelectedDeptId((prev) => (prev === id ? null : id));
-                }}
+                onSelect={(id) => setSelectedDeptId(id)}
                 onRowDoubleClick={() => openDeptEdit()}
-                emptyMessage="등록된 부서가 없습니다"
+                showRowNumber
+                showPagination={false}
+                draggableColumns={false}
+                columnOrderKey="c16-department"
               />
             </div>
           </ResizablePanel>
 
           <ResizableHandle withHandle />
 
-          {/* 우측: 사원 */}
+          {/* 우측: 사원 목록 */}
           <ResizablePanel defaultSize={60} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Users className="w-4 h-4" />
-                  {selectedDept ? "부서 인원" : "전체 사원"}
-                  {selectedDept && <Badge variant="outline" className="font-normal">{selectedDept.dept_name}</Badge>}
-                  {members.length > 0 && <Badge variant="secondary" className="font-normal">{members.length}명</Badge>}
+              {!selectedDeptId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">부서를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 부서를 선택하면 소속 사원 목록이 표시돼요</div>
+                  </div>
                 </div>
-                <Button variant="outline" size="sm" onClick={() => openUserModal()}>
-                  <Plus className="w-3.5 h-3.5 mr-1" /> 사원 추가
-                </Button>
-              </div>
-              <DataGrid
-                gridId="dept-right"
-                columns={RIGHT_COLUMNS}
-                data={members}
-                loading={memberLoading}
-                showRowNumber={false}
-                tableName={USER_TABLE}
-                emptyMessage={selectedDeptCode ? "소속 사원이 없습니다" : "등록된 사원이 없습니다"}
-                onRowDoubleClick={(row) => openUserModal(row)}
-              />
+              ) : (
+                <>
+                  {/* 디테일 헤더 */}
+                  <div className="flex items-center gap-3 px-4 py-3 border-b bg-muted shrink-0">
+                    <span className="text-[13px] font-bold">{selectedDept?.dept_name || "-"}</span>
+                    <span className="font-mono text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                      {selectedDept?.dept_code || "-"}
+                    </span>
+                    <div className="ml-auto">
+                      <Button variant="outline" size="sm" onClick={() => openUserModal()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        사원 추가
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 재직/퇴사 탭 */}
+                  <div className="flex border-b border-border px-4 shrink-0 bg-muted">
+                    <button
+                      onClick={() => setMemberTab("active")}
+                      className={cn("px-4 py-2.5 text-xs font-semibold border-b-2 transition-colors",
+                        memberTab === "active" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+                      )}
+                    >
+                      재직중
+                      {activeMembers.length > 0 && (
+                        <Badge variant="secondary" className="ml-1.5 text-[10px] px-1.5 py-0">{activeMembers.length}</Badge>
+                      )}
+                    </button>
+                    <button
+                      onClick={() => setMemberTab("resigned")}
+                      className={cn("px-4 py-2.5 text-xs font-semibold border-b-2 transition-colors",
+                        memberTab === "resigned" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+                      )}
+                    >
+                      퇴사
+                      {resignedMembers.length > 0 && (
+                        <Badge variant="secondary" className="ml-1.5 text-[10px] px-1.5 py-0">{resignedMembers.length}</Badge>
+                      )}
+                    </button>
+                  </div>
+
+                  <div className="flex-1 overflow-auto">
+                    {memberLoading ? (
+                      <div className="flex flex-col items-center justify-center py-12">
+                        <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                      </div>
+                    ) : memberTab === "active" ? (
+                      activeMembers.length === 0 ? (
+                        <div className="text-center py-8 text-muted-foreground text-sm">재직중인 사원이 없어요</div>
+                      ) : (
+                        <Table noWrapper>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center px-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사번</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이름</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사용자ID</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">직급</TableHead>
+                              <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">휴대폰</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {activeMembers.map((member, idx) => (
+                              <TableRow
+                                key={member.id || member.user_id}
+                                className="cursor-pointer select-none hover:bg-muted/50"
+                                onDoubleClick={() => openUserModal(member)}
+                              >
+                                <TableCell className="text-center text-[13px] text-muted-foreground px-2">{idx + 1}</TableCell>
+                                <TableCell className="font-mono text-[13px] text-muted-foreground">{member.sabun || "—"}</TableCell>
+                                <TableCell className="text-sm font-medium">{member.user_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.user_id}</TableCell>
+                                <TableCell className="text-[13px]">{member.position_name || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.cell_phone || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.email || "—"}</TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      )
+                    ) : (
+                      resignedMembers.length === 0 ? (
+                        <div className="text-center py-8 text-muted-foreground text-sm">퇴사한 사원이 없어요</div>
+                      ) : (
+                        <Table noWrapper>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center px-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사번</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이름</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사용자ID</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">직급</TableHead>
+                              <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">휴대폰</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">퇴사일</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {resignedMembers.map((member, idx) => (
+                              <TableRow
+                                key={member.id || member.user_id}
+                                className="cursor-pointer select-none hover:bg-muted/50"
+                                onDoubleClick={() => openUserModal(member)}
+                              >
+                                <TableCell className="text-center text-[13px] text-muted-foreground px-2">{idx + 1}</TableCell>
+                                <TableCell className="font-mono text-[13px] text-muted-foreground">{member.sabun || "—"}</TableCell>
+                                <TableCell className="text-sm font-medium">{member.user_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.user_id}</TableCell>
+                                <TableCell className="text-[13px]">{member.position_name || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.cell_phone || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.email || "—"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.end_date ? member.end_date.substring(0, 10) : "—"}</TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      )
+                    )}
+                  </div>
+                </>
+              )}
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>
@@ -413,22 +568,37 @@ export default function DepartmentPage() {
             <DialogTitle>{deptEditMode ? "부서 수정" : "부서 등록"}</DialogTitle>
             <DialogDescription>{deptEditMode ? "부서 정보를 수정합니다." : "새로운 부서를 등록합니다."}</DialogDescription>
           </DialogHeader>
-          <div className="space-y-4 py-4">
+          <div className="space-y-4 py-2">
             <div className="space-y-1.5">
-              <Label className="text-sm">부서코드</Label>
-              <Input value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
-                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성됩니다")}
-                className="h-9" disabled readOnly />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">부서코드</span>
+              <Input
+                value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
+                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                className="h-9"
+                disabled
+                readOnly
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">부서명 <span className="text-destructive">*</span></Label>
-              <Input value={deptForm.dept_name || ""} onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
-                placeholder="부서명" className="h-9" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                부서명 <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={deptForm.dept_name || ""}
+                onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
+                placeholder="부서명을 입력해 주세요"
+                className="h-9"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">상위부서</Label>
-              <Select value={deptForm.parent_dept_code || ""} onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}>
-                <SelectTrigger className="h-9"><SelectValue placeholder="상위부서 선택 (선택사항)" /></SelectTrigger>
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상위부서</span>
+              <Select
+                value={deptForm.parent_dept_code || ""}
+                onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="상위부서 선택 (선택사항)" />
+                </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="none">없음</SelectItem>
                   {depts.filter((d) => d.dept_code !== deptForm.dept_code).map((d) => (
@@ -440,85 +610,153 @@ export default function DepartmentPage() {
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setDeptModalOpen(false)}>취소</Button>
-            <Button onClick={handleDeptSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+            <Button onClick={() => void handleDeptSave()} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* 사원 추가 모달 */}
+      {/* 사원 추가/수정 모달 */}
       <Dialog open={userModalOpen} onOpenChange={setUserModalOpen}>
         <DialogContent className="max-w-2xl">
           <DialogHeader>
             <DialogTitle>{userEditMode ? "사원 정보 수정" : "사원 추가"}</DialogTitle>
-            <DialogDescription>{userEditMode ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정합니다.` : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가합니다.` : "사원을 추가합니다."}</DialogDescription>
+            <DialogDescription>
+              {userEditMode
+                ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정합니다.`
+                : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가합니다.` : "사원을 추가합니다."}
+            </DialogDescription>
           </DialogHeader>
-          <div className="grid grid-cols-2 gap-4 py-4">
+          <div className="grid grid-cols-2 gap-4 py-2">
             <div className="space-y-1.5">
-              <Label className="text-sm">사용자 ID <span className="text-destructive">*</span></Label>
-              <Input value={userForm.user_id || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
-                placeholder="사용자 ID" className="h-9" disabled={userEditMode} />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                사용자 ID <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={userForm.user_id || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
+                placeholder="사용자 ID를 입력해 주세요"
+                className="h-9"
+                disabled={userEditMode}
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">이름 <span className="text-destructive">*</span></Label>
-              <Input value={userForm.user_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
-                placeholder="이름" className="h-9" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                이름 <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={userForm.user_name || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
+                placeholder="이름을 입력해 주세요"
+                className="h-9"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">사번</Label>
-              <Input value={userForm.sabun || ""} onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
-                placeholder="사번" className="h-9" autoComplete="off" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">사번</span>
+              <Input
+                value={userForm.sabun || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
+                placeholder="사번"
+                className="h-9"
+                autoComplete="off"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">비밀번호</Label>
-              <Input value={userForm.user_password || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
-                placeholder={userEditMode ? "변경 시에만 입력" : "미입력 시 qlalfqjsgh11"} className="h-9" type="password" autoComplete="new-password" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">비밀번호</span>
+              <Input
+                value={userForm.user_password || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
+                placeholder={userEditMode ? "변경 시에만 입력해 주세요" : "미입력 시 기본값이 설정돼요"}
+                className="h-9"
+                type="password"
+                autoComplete="new-password"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">직급</Label>
-              <Input value={userForm.position_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
-                placeholder="직급" className="h-9" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">직급</span>
+              <Input
+                value={userForm.position_name || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
+                placeholder="직급"
+                className="h-9"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">부서 <span className="text-destructive">*</span></Label>
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                부서 <span className="text-destructive">*</span>
+              </span>
               <Select value={userForm.dept_code || ""} onValueChange={(v) => setUserForm((p) => ({ ...p, dept_code: v }))}>
-                <SelectTrigger className="h-9"><SelectValue placeholder="부서 선택" /></SelectTrigger>
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="부서를 선택해 주세요" />
+                </SelectTrigger>
                 <SelectContent>
-                  {depts.map((d) => <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>)}
+                  {depts.map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">휴대폰</Label>
-              <Input value={userForm.cell_phone || ""} onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
-                placeholder="010-0000-0000" className={cn("h-9", formErrors.cell_phone && "border-destructive")} />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">휴대폰</span>
+              <Input
+                value={userForm.cell_phone || ""}
+                onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
+                placeholder="010-0000-0000"
+                className={cn("h-9", formErrors.cell_phone && "border-destructive")}
+              />
               {formErrors.cell_phone && <p className="text-xs text-destructive">{formErrors.cell_phone}</p>}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">이메일</Label>
-              <Input value={userForm.email || ""} onChange={(e) => handleUserFormChange("email", e.target.value)}
-                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">이메일</span>
+              <Input
+                value={userForm.email || ""}
+                onChange={(e) => handleUserFormChange("email", e.target.value)}
+                placeholder="example@email.com"
+                className={cn("h-9", formErrors.email && "border-destructive")}
+              />
               {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">입사일</Label>
-              <FormDatePicker value={userForm.regdate || ""} onChange={(v) => setUserForm((p) => ({ ...p, regdate: v }))} placeholder="입사일" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">입사일</span>
+              <Input
+                type="date"
+                value={userForm.regdate ? userForm.regdate.substring(0, 10) : ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, regdate: e.target.value }))}
+                className="h-9"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">퇴사일</Label>
-              <FormDatePicker value={userForm.end_date || ""} onChange={(v) => setUserForm((p) => ({ ...p, end_date: v }))} placeholder="퇴사일" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">퇴사일</span>
+              <Input
+                type="date"
+                value={userForm.end_date ? userForm.end_date.substring(0, 10) : ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, end_date: e.target.value }))}
+                className="h-9"
+              />
             </div>
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setUserModalOpen(false)}>취소</Button>
-            <Button onClick={handleUserSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+            <Button onClick={() => void handleUserSave()} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
       {/* 엑셀 업로드 */}
       <ExcelUploadModal
         open={excelUploadOpen}
@@ -529,14 +767,6 @@ export default function DepartmentPage() {
       />
 
       {ConfirmDialogComponent}
-
-      <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={DEPT_TABLE}
-        settingsId="department"
-        onSave={applyTableSettings}
-      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_10/master-data/item-info/page.tsx b/frontend/app/(main)/COMPANY_10/master-data/item-info/page.tsx
index e525f9cd..375fd900 100644
--- a/frontend/app/(main)/COMPANY_10/master-data/item-info/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/master-data/item-info/page.tsx
@@ -3,47 +3,162 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import {
-  Plus, Trash2, RotateCcw, Save, Search, Loader2, FileSpreadsheet, Download,
-  Package, Pencil, Copy,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  Pencil, Copy, Settings2, Check, ChevronsUpDown,
 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { ImageUpload } from "@/components/common/ImageUpload";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
-import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
-import { exportToExcel } from "@/lib/utils/excelExport";
 import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
 import { toast } from "sonner";
 
-// 테이블 컬럼 정의
-const TABLE_COLUMNS = [
-  { key: "item_number", label: "품목코드", width: "w-[120px]" },
-  { key: "item_name", label: "품명", width: "min-w-[150px]" },
-  { key: "division", label: "관리품목", width: "w-[100px]" },
-  { key: "type", label: "품목구분", width: "w-[100px]" },
-  { key: "size", label: "규격", width: "w-[100px]" },
-  { key: "unit", label: "단위", width: "w-[80px]" },
-  { key: "material", label: "재질", width: "w-[100px]" },
-  { key: "status", label: "상태", width: "w-[80px]" },
-  { key: "selling_price", label: "판매가격", width: "w-[100px]" },
-  { key: "standard_price", label: "기준단가", width: "w-[100px]" },
-  { key: "weight", label: "중량", width: "w-[80px]" },
-  { key: "inventory_unit", label: "재고단위", width: "w-[80px]" },
-  { key: "user_type01", label: "대분류", width: "w-[100px]" },
-  { key: "user_type02", label: "중분류", width: "w-[100px]" },
+// 검색 가능한 카테고리 콤보박스
+function CategoryCombobox({ options, value, onChange, placeholder }: {
+  options: { code: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selected = options.find((o) => o.code === value);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
+          <span className="truncate">{selected?.label || <span className="text-muted-foreground">{placeholder}</span>}</span>
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8" />
+          <CommandList>
+            <CommandEmpty>검색 결과가 없어요</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {options.map((opt) => (
+                <CommandItem key={opt.code} value={opt.label} onSelect={() => { onChange(opt.code); setOpen(false); }}>
+                  <Check className={cn("mr-2 h-3.5 w-3.5", value === opt.code ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 다중 선택 카테고리 콤보박스
+function MultiCategoryCombobox({ options, value, onChange, placeholder }: {
+  options: { code: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selectedCodes = value ? value.split(",").map((c) => c.trim()).filter(Boolean) : [];
+  const selectedLabels = selectedCodes.map((code) => options.find((o) => o.code === code)?.label || code).filter(Boolean);
+
+  const toggle = (code: string) => {
+    const next = selectedCodes.includes(code)
+      ? selectedCodes.filter((c) => c !== code)
+      : [...selectedCodes, code];
+    onChange(next.join(","));
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
+          <span className="truncate">
+            {selectedLabels.length > 0
+              ? selectedLabels.join(", ")
+              : <span className="text-muted-foreground">{placeholder}</span>}
+          </span>
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8" />
+          <CommandList>
+            <CommandEmpty>검색 결과가 없어요</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {options.map((opt) => (
+                <CommandItem key={opt.code} value={opt.label} onSelect={() => toggle(opt.code)}>
+                  <Check className={cn("mr-2 h-3.5 w-3.5", selectedCodes.includes(opt.code) ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const TABLE_NAME = "item_info";
+
+const GRID_COLUMNS = [
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "image", label: "이미지", type: "image" },
+  { key: "division", label: "관리품목" },
+  { key: "type", label: "품목구분" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "material", label: "재질" },
+  { key: "status", label: "상태" },
+  { key: "selling_price", label: "판매가격", align: "right" as const, formatNumber: true },
+  { key: "standard_price", label: "기준단가", align: "right" as const, formatNumber: true },
+  { key: "weight", label: "중량", align: "right" as const },
+  { key: "inventory_unit", label: "재고단위" },
+  { key: "user_type01", label: "대분류" },
+  { key: "user_type02", label: "중분류" },
+  { key: "lead_time", label: "생산 리드타임(일)", align: "right" as const },
 ];
 
-// 등록 모달 필드 정의
 const FORM_FIELDS = [
   { key: "item_number", label: "품목코드", type: "text", required: true, disabled: true, placeholder: "자동 채번" },
   { key: "item_name", label: "품명", type: "text", required: true },
-  { key: "division", label: "관리품목", type: "category" },
+  { key: "division", label: "관리품목", type: "multi-category" },
   { key: "type", label: "품목구분", type: "category" },
   { key: "size", label: "규격", type: "text" },
   { key: "unit", label: "단위", type: "category" },
@@ -58,22 +173,25 @@ const FORM_FIELDS = [
   { key: "currency_code", label: "통화", type: "category" },
   { key: "user_type01", label: "대분류", type: "category" },
   { key: "user_type02", label: "중분류", type: "category" },
+  { key: "lead_time", label: "생산 리드타임(일)", type: "text", placeholder: "숫자 입력 (예: 7)" },
+  { key: "image", label: "품목 이미지", type: "image" },
   { key: "meno", label: "메모", type: "textarea" },
 ];
 
-const TABLE_NAME = "item_info";
+const CATEGORY_COLUMNS = [
+  "division", "type", "unit", "material", "status",
+  "inventory_unit", "currency_code", "user_type01", "user_type02",
+];
 
 export default function ItemInfoPage() {
   const { user } = useAuth();
+  const ts = useTableSettings("c16-item-info", TABLE_NAME, GRID_COLUMNS);
   const [items, setItems] = useState<any[]>([]);
+  const [rawItems, setRawItems] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
-  const [totalCount, setTotalCount] = useState(0);
 
-  // 검색
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [searchDivision, setSearchDivision] = useState("all");
-  const [searchType, setSearchType] = useState("all");
-  const [searchStatus, setSearchStatus] = useState("all");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 모달
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -91,10 +209,7 @@ export default function ItemInfoPage() {
   // 선택된 행
   const [selectedId, setSelectedId] = useState<string | null>(null);
 
-  // 카테고리 컬럼 목록
-  const CATEGORY_COLUMNS = ["division", "type", "unit", "material", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
-
-  // 카테고리 옵션 로드 (table_name + column_name 기반)
+  // 카테고리 옵션 로드
   useEffect(() => {
     const loadCategories = async () => {
       try {
@@ -130,33 +245,28 @@ export default function ItemInfoPage() {
   const fetchItems = useCallback(async () => {
     setLoading(true);
     try {
-      const filters: any[] = [];
-      if (searchKeyword) {
-        filters.push({ columnName: "item_name", operator: "contains", value: searchKeyword });
-      }
-      if (searchDivision !== "all") {
-        filters.push({ columnName: "division", operator: "equals", value: searchDivision });
-      }
-      if (searchType !== "all") {
-        filters.push({ columnName: "type", operator: "equals", value: searchType });
-      }
-      if (searchStatus !== "all") {
-        filters.push({ columnName: "status", operator: "equals", value: searchStatus });
-      }
-
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
       const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
         page: 1,
-        size: 500,
+        size: 99999,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
       });
 
       const raw = res.data?.data?.data || res.data?.data?.rows || [];
-      // 카테고리 코드→라벨 변환
       const resolve = (col: string, code: string) => {
         if (!code) return "";
+        // 쉼표 구분 다중값 지원
+        if (code.includes(",")) {
+          return code.split(",").map((c) => {
+            const trimmed = c.trim();
+            if (!trimmed || trimmed === "s") return "";
+            return categoryOptions[col]?.find((o) => o.code === trimmed)?.label || trimmed;
+          }).filter(Boolean).join(", ");
+        }
         return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
       };
+      setRawItems(raw);
       const data = raw.map((r: any) => {
         const converted = { ...r };
         for (const col of CATEGORY_COLUMNS) {
@@ -165,81 +275,89 @@ export default function ItemInfoPage() {
         return converted;
       });
       setItems(data);
-      setTotalCount(res.data?.data?.total || raw.length);
     } catch (err) {
       console.error("품목 조회 실패:", err);
-      toast.error("품목 목록을 불러오는데 실패했습니다.");
+      toast.error("품목 목록을 불러오는데 실패했어요.");
     } finally {
       setLoading(false);
     }
-  }, [searchKeyword, searchDivision, searchType, searchStatus, categoryOptions]);
+  }, [categoryOptions, searchFilters]);
 
   useEffect(() => {
     fetchItems();
   }, [fetchItems]);
 
-  // 카테고리 코드 → 라벨 변환
-  const getCategoryLabel = (columnName: string, code: string) => {
-    if (!code) return "";
-    const opts = categoryOptions[columnName];
-    if (!opts) return code;
-    const found = opts.find((o) => o.code === code);
-    return found?.label || code;
+  // 채번 미리보기 로드
+  const loadNumberingPreview = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${TABLE_NAME}/item_number`);
+      const rule = ruleRes.data?.data;
+      if (rule?.ruleId) {
+        const previewRes = await apiClient.post(`/numbering-rules/${rule.ruleId}/preview`, { formData: {} });
+        return previewRes.data?.data?.generatedCode || "";
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+    return "";
   };
 
   // 등록 모달 열기
-  const openRegisterModal = () => {
+  const openRegisterModal = async () => {
     setFormData({});
     setIsEditMode(false);
     setEditId(null);
     setIsModalOpen(true);
+    // 채번 컬럼 자동 로드
+    const code = await loadNumberingPreview();
+    if (code) setFormData(prev => ({ ...prev, item_number: code }));
   };
 
   // 수정 모달 열기
   const openEditModal = (item: any) => {
-    setFormData({ ...item });
+    const raw = rawItems.find((r) => r.id === item.id) || item;
+    setFormData({ ...raw });
     setIsEditMode(true);
     setEditId(item.id);
     setIsModalOpen(true);
   };
 
   // 복사 모달 열기
-  const openCopyModal = (item: any) => {
-    const { id, item_number, created_date, updated_date, writer, ...rest } = item;
+  const openCopyModal = async (item: any) => {
+    const raw = rawItems.find((r) => r.id === item.id) || item;
+    const { id, item_number, created_date, updated_date, writer, ...rest } = raw;
     setFormData(rest);
     setIsEditMode(false);
     setEditId(null);
+    const code = await loadNumberingPreview();
+    if (code) setFormData(prev => ({ ...prev, item_number: code }));
     setIsModalOpen(true);
   };
 
   // 저장
   const handleSave = async () => {
     if (!formData.item_name) {
-      toast.error("품명은 필수 입력입니다.");
+      toast.error("품명은 필수 입력이에요.");
       return;
     }
 
     setSaving(true);
     try {
       if (isEditMode && editId) {
-        // 수정
         const { id, created_date, updated_date, writer, company_code, ...updateFields } = formData;
         await apiClient.put(`/table-management/tables/${TABLE_NAME}/edit`, {
           originalData: { id: editId },
           updatedData: updateFields,
         });
-        toast.success("수정되었습니다.");
+        toast.success("수정되었어요.");
       } else {
-        // 등록
         const { id, created_date, updated_date, ...insertFields } = formData;
-        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, insertFields);
-        toast.success("등록되었습니다.");
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, { id: crypto.randomUUID(), ...insertFields });
+        toast.success("등록되었어요.");
       }
       setIsModalOpen(false);
       fetchItems();
     } catch (err: any) {
       console.error("저장 실패:", err);
-      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
     } finally {
       setSaving(false);
     }
@@ -248,34 +366,34 @@ export default function ItemInfoPage() {
   // 삭제
   const handleDelete = async () => {
     if (!selectedId) {
-      toast.error("삭제할 품목을 선택해주세요.");
+      toast.error("삭제할 품목을 선택해 주세요.");
       return;
     }
-    if (!confirm("선택한 품목을 삭제하시겠습니까?")) return;
+    if (!confirm("선택한 품목을 삭제할까요?")) return;
 
     try {
       await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
         data: [{ id: selectedId }],
       });
-      toast.success("삭제되었습니다.");
+      toast.success("삭제되었어요.");
       setSelectedId(null);
       fetchItems();
     } catch (err) {
       console.error("삭제 실패:", err);
-      toast.error("삭제에 실패했습니다.");
+      toast.error("삭제에 실패했어요.");
     }
   };
 
   // 엑셀 다운로드
   const handleExcelDownload = async () => {
     if (items.length === 0) {
-      toast.error("다운로드할 데이터가 없습니다.");
+      toast.error("다운로드할 데이터가 없어요.");
       return;
     }
     const exportData = items.map((item) => {
       const row: Record<string, any> = {};
-      for (const col of TABLE_COLUMNS) {
-        row[col.label] = getCategoryLabel(col.key, item[col.key]) || item[col.key] || "";
+      for (const col of GRID_COLUMNS) {
+        row[col.label] = item[col.key] || "";
       }
       return row;
     });
@@ -283,225 +401,186 @@ export default function ItemInfoPage() {
     toast.success("엑셀 다운로드 완료");
   };
 
-  // 검색 초기화
-  const handleResetSearch = () => {
-    setSearchKeyword("");
-    setSearchDivision("all");
-    setSearchType("all");
-    setSearchStatus("all");
-  };
-
-  // 카테고리 셀렉트 렌더링
-  const renderCategorySelect = (field: typeof FORM_FIELDS[0]) => {
-    const options = categoryOptions[field.key] || [];
-    return (
-      <Select
-        value={formData[field.key] || ""}
-        onValueChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
-      >
-        <SelectTrigger className="h-9 text-sm">
-          <SelectValue placeholder={`${field.label} 선택`} />
-        </SelectTrigger>
-        <SelectContent>
-          {options.map((opt) => (
-            <SelectItem key={opt.code} value={opt.code}>
-              {opt.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    );
-  };
-
   return (
-    <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">품명/품목코드</Label>
-            <Input
-              placeholder="검색"
-              className="w-[180px] h-9"
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && fetchItems()}
-            />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">관리품목</Label>
-            <Select value={searchDivision} onValueChange={setSearchDivision}>
-              <SelectTrigger className="w-[120px] h-9"><SelectValue placeholder="전체" /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                {(categoryOptions["division"] || []).map((o) => (
-                  <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">품목구분</Label>
-            <Select value={searchType} onValueChange={setSearchType}>
-              <SelectTrigger className="w-[120px] h-9"><SelectValue placeholder="전체" /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                {(categoryOptions["type"] || []).map((o) => (
-                  <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[110px] h-9"><SelectValue placeholder="전체" /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                {(categoryOptions["status"] || []).map((o) => (
-                  <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex-1" />
-          <div className="flex items-center gap-2">
-            {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+    <div className="flex h-full flex-col gap-0">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={TABLE_NAME}
+        filterId="c16-item-info"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+      />
 
-      {/* 메인 테이블 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm flex flex-col">
-        <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-          <div className="font-semibold flex items-center gap-2 text-sm">
-            <Package className="w-5 h-5" /> 품목 목록
-            <Badge variant="secondary" className="font-normal">{totalCount}건</Badge>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
-              <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
-            </Button>
-            <Button size="sm" onClick={openRegisterModal}>
-              <Plus className="w-4 h-4 mr-1.5" /> 품목 등록
-            </Button>
-            <Button variant="outline" size="sm" disabled={!selectedId} onClick={() => {
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between px-4 py-2.5 border-b">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-semibold">품목 관리</span>
+          <Badge variant="secondary" className="font-mono text-xs">{items.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
+          </Button>
+          <div className="mx-1 h-5 w-px bg-border" />
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4 mr-1.5" /> 품목 등록
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!selectedId}
+            onClick={() => {
               const item = items.find((i) => i.id === selectedId);
               if (item) openCopyModal(item);
-            }}>
-              <Copy className="w-4 h-4 mr-1.5" /> 복사
-            </Button>
-            <Button variant="outline" size="sm" disabled={!selectedId} onClick={() => {
+            }}
+          >
+            <Copy className="w-4 h-4 mr-1.5" /> 복사
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!selectedId}
+            onClick={() => {
               const item = items.find((i) => i.id === selectedId);
               if (item) openEditModal(item);
-            }}>
-              <Pencil className="w-4 h-4 mr-1.5" /> 수정
-            </Button>
-            <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
-              <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
-            </Button>
-          </div>
-        </div>
-
-        <div className="flex-1 overflow-auto">
-          {loading ? (
-            <div className="flex items-center justify-center h-32">
-              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-            </div>
-          ) : items.length === 0 ? (
-            <div className="flex flex-col items-center justify-center h-32 text-muted-foreground gap-2">
-              <Package className="w-8 h-8 opacity-50" />
-              <span>등록된 품목이 없습니다</span>
-            </div>
-          ) : (
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">No</TableHead>
-                  {TABLE_COLUMNS.map((col) => (
-                    <TableHead key={col.key} className={col.width}>{col.label}</TableHead>
-                  ))}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {items.map((item, idx) => (
-                  <TableRow
-                    key={item.id}
-                    className={cn("cursor-pointer", selectedId === item.id && "bg-primary/5")}
-                    onClick={() => setSelectedId(item.id)}
-                    onDoubleClick={() => openEditModal(item)}
-                  >
-                    <TableCell className="text-center text-xs text-muted-foreground">{idx + 1}</TableCell>
-                    {TABLE_COLUMNS.map((col) => (
-                      <TableCell key={col.key} className="text-sm">
-                        {["division", "type", "unit", "material", "status", "inventory_unit", "user_type01", "user_type02", "currency_code"].includes(col.key)
-                          ? getCategoryLabel(col.key, item[col.key])
-                          : item[col.key] || ""}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
+            }}
+          >
+            <Pencil className="w-4 h-4 mr-1.5" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
         </div>
       </div>
 
+      {/* 메인 테이블 */}
+      <EDataTable
+        columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+          key: col.key,
+          label: col.label,
+          align: (col as any).type === "image" ? "center" : col.align as "left" | "center" | "right" | undefined,
+          formatNumber: (col as any).formatNumber,
+          width: (col as any).type === "image" ? "w-[50px]" : undefined,
+          render: (col as any).type === "image" ? (val: any) => (
+            val ? (
+              <img src={String(val).startsWith("http") || String(val).startsWith("/") ? val : `/api/files/preview/${val}`} alt="" className="h-8 w-8 rounded object-cover border border-border mx-auto" onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
+            ) : <div className="h-8 w-8 rounded bg-muted mx-auto" />
+          ) : undefined,
+        }))}
+        data={ts.groupData(items)}
+        loading={loading}
+        emptyMessage="등록된 품목이 없어요"
+        selectedId={selectedId}
+        onSelect={(id) => setSelectedId(id)}
+        onRowDoubleClick={(row) => openEditModal(row)}
+        showRowNumber
+        draggableColumns={false}
+      />
+
       {/* 등록/수정 모달 */}
       <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-        <DialogContent className="max-w-2xl max-h-[90vh] overflow-auto">
-          <DialogHeader>
+        <DialogContent className="sm:max-w-[600px] w-[95vw] max-h-[90vh] flex flex-col p-0 overflow-hidden">
+          <DialogHeader className="shrink-0 px-6 pt-5 pb-3 border-b">
             <DialogTitle>{isEditMode ? "품목 수정" : "품목 등록"}</DialogTitle>
             <DialogDescription>
-              {isEditMode ? "품목 정보를 수정합니다." : "새로운 품목을 등록합니다."}
+              {isEditMode ? "품목 정보를 수정해요." : "새로운 품목을 등록해요."}
             </DialogDescription>
           </DialogHeader>
 
-          <div className="grid grid-cols-2 gap-4 py-4">
-            {FORM_FIELDS.map((field) => (
-              <div key={field.key} className={cn("space-y-1.5", field.type === "textarea" && "col-span-2")}>
-                <Label className="text-sm">
-                  {field.label}
-                  {field.required && <span className="text-destructive ml-1">*</span>}
-                </Label>
-                {field.type === "category" ? (
-                  renderCategorySelect(field)
-                ) : field.type === "textarea" ? (
-                  <Textarea
-                    value={formData[field.key] || ""}
-                    onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
-                    placeholder={field.label}
-                    rows={3}
-                  />
-                ) : (
-                  <Input
-                    value={formData[field.key] || ""}
-                    onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
-                    placeholder={field.placeholder || (field.disabled ? "자동 채번" : field.label)}
-                    disabled={field.disabled && !isEditMode}
-                    className="h-9"
-                  />
-                )}
-              </div>
-            ))}
+          <div className="flex-1 overflow-y-auto">
+            <div className="grid grid-cols-2 gap-4 p-6">
+              {FORM_FIELDS.map((field) => (
+                <div
+                  key={field.key}
+                  className={cn("space-y-1.5", (field.type === "textarea" || field.type === "image") && "col-span-2")}
+                >
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    {field.label}
+                    {field.required && <span className="text-destructive ml-1">*</span>}
+                  </Label>
+                  {field.type === "image" ? (
+                    <ImageUpload
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      tableName={TABLE_NAME}
+                      recordId={formData.id || ""}
+                      columnName={field.key}
+                      height="h-32"
+                    />
+                  ) : field.type === "multi-category" ? (
+                    <MultiCategoryCombobox
+                      options={categoryOptions[field.key] || []}
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      placeholder={`${field.label} 선택`}
+                    />
+                  ) : field.type === "category" ? (
+                    <CategoryCombobox
+                      options={categoryOptions[field.key] || []}
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      placeholder={`${field.label} 선택`}
+                    />
+                  ) : field.type === "textarea" ? (
+                    <Textarea
+                      value={formData[field.key] || ""}
+                      onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                      placeholder={field.label}
+                      rows={3}
+                    />
+                  ) : ["selling_price", "standard_price"].includes(field.key) ? (
+                    <Input
+                      value={formData[field.key] ? Number(String(formData[field.key]).replace(/,/g, "")).toLocaleString() : ""}
+                      onChange={(e) => {
+                        const raw = e.target.value.replace(/[^\d.-]/g, "");
+                        setFormData((prev) => ({ ...prev, [field.key]: raw }));
+                      }}
+                      placeholder={field.placeholder || field.label}
+                      className="h-9 text-right"
+                    />
+                  ) : (
+                    <Input
+                      value={formData[field.key] || ""}
+                      onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                      placeholder={field.placeholder || (field.disabled ? "자동 채번" : field.label)}
+                      disabled={field.disabled && !isEditMode}
+                      className="h-9"
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
           </div>
 
-          <DialogFooter>
+          <DialogFooter className="shrink-0 border-t px-6 py-3">
             <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
             <Button onClick={handleSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {saving
+                ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+                : <Save className="w-4 h-4 mr-1.5" />
+              }
               저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
       {/* 엑셀 업로드 모달 */}
       <ExcelUploadModal
         open={excelUploadOpen}
diff --git a/frontend/app/(main)/COMPANY_10/master-data/options/page.tsx b/frontend/app/(main)/COMPANY_10/master-data/options/page.tsx
new file mode 100644
index 00000000..7506ad94
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/master-data/options/page.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { Settings2, Tags, Hash } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { CategoryColumnList } from "@/components/table-category/CategoryColumnList";
+import { CategoryValueManager } from "@/components/table-category/CategoryValueManager";
+import { NumberingRuleDesigner } from "@/components/numbering-rule/NumberingRuleDesigner";
+
+const TABS = [
+  { id: "category", label: "카테고리 설정", icon: Tags },
+  { id: "numbering", label: "코드 설정", icon: Hash },
+] as const;
+
+type TabId = (typeof TABS)[number]["id"];
+
+export default function OptionsSettingPage() {
+  const [activeTab, setActiveTab] = useState<TabId>("category");
+
+  const [selectedColumn, setSelectedColumn] = useState<string | null>(null);
+  const [selectedColumnLabel, setSelectedColumnLabel] = useState("");
+  const [selectedTableName, setSelectedTableName] = useState("");
+
+  const [leftWidth, setLeftWidth] = useState(340);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = useCallback(() => {
+    setIsDragging(true);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      setLeftWidth(Math.max(260, Math.min(500, e.clientX - rect.left)));
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
+
+  return (
+    <div className="flex h-full flex-col p-3 gap-3">
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <Settings2 className="h-4 w-4 text-primary" />
+          <h1 className="text-sm font-semibold">옵션 설정</h1>
+        </div>
+        <div className="flex bg-muted rounded-md p-0.5 gap-0.5">
+          {TABS.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  "flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-all",
+                  activeTab === tab.id
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <Icon className="h-3.5 w-3.5" />
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0">
+        {activeTab === "category" && (
+          <div ref={containerRef} className="flex h-full">
+            <div
+              style={{ width: leftWidth }}
+              className="shrink-0 border rounded-lg bg-card overflow-hidden"
+            >
+              <CategoryColumnList
+                tableName=""
+                selectedColumn={selectedColumn}
+                onColumnSelect={(uniqueKey, label, tableName) => {
+                  setSelectedColumn(uniqueKey);
+                  setSelectedColumnLabel(label);
+                  setSelectedTableName(tableName);
+                }}
+              />
+            </div>
+
+            <div
+              onMouseDown={handleMouseDown}
+              className={cn(
+                "w-1.5 mx-0.5 cursor-col-resize rounded-full transition-colors shrink-0",
+                isDragging ? "bg-primary" : "bg-border hover:bg-primary/50"
+              )}
+            />
+
+            <div className="flex-1 min-w-0 border rounded-lg bg-card overflow-hidden">
+              {selectedColumn && selectedTableName ? (
+                <CategoryValueManager
+                  tableName={selectedTableName}
+                  columnName={selectedColumn.includes(".") ? selectedColumn.split(".").pop()! : selectedColumn}
+                  columnLabel={selectedColumnLabel}
+                />
+              ) : (
+                <div className="flex h-full items-center justify-center">
+                  <div className="text-center space-y-2">
+                    <Tags className="h-8 w-8 mx-auto text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">좌측에서 카테고리 컬럼을 선택해주세요</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {activeTab === "numbering" && (
+          <div className="h-full border rounded-lg bg-card overflow-auto">
+            <NumberingRuleDesigner />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/mold/info/page.tsx b/frontend/app/(main)/COMPANY_10/mold/info/page.tsx
new file mode 100644
index 00000000..dcd92eac
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/mold/info/page.tsx
@@ -0,0 +1,1450 @@
+"use client";
+
+/**
+ * 금형정보 — Type E 카드리스트형
+ *
+ * 좌측: 금형 카드 리스트 (이미지 + 코드 + 이름 + 유형뱃지 + 수명진행률)
+ * 우측: 금형 상세 + 탭 3개 (일련번호 / 점검항목 / 부품)
+ * 전용 API: /molds/*
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Plus, Trash2, Loader2, Pencil, Box, Inbox, Search,
+  Wrench, ClipboardCheck, Package, LayoutGrid, List,
+  Image as ImageIcon, Upload, X as XIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+
+// ─── API base ───
+const API = "/mold";
+
+// ─── 상태/유형 매핑 ───
+const STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  ACTIVE: { label: "사용중", variant: "default" },
+  INSPECTION: { label: "점검중", variant: "secondary" },
+  REPAIR: { label: "수리중", variant: "outline" },
+  DISPOSED: { label: "폐기", variant: "destructive" },
+};
+
+const SERIAL_STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  IN_USE: { label: "사용중", variant: "default" },
+  STORED: { label: "보관중", variant: "secondary" },
+  REPAIR: { label: "수리중", variant: "outline" },
+  DISPOSED: { label: "폐기", variant: "destructive" },
+};
+
+// ─── 수명 진행률 색상 ───
+function getProgressColor(pct: number) {
+  if (pct < 60) return "bg-success";
+  if (pct < 85) return "bg-warning";
+  return "bg-destructive";
+}
+
+function getProgressTextColor(pct: number) {
+  if (pct < 60) return "text-success";
+  if (pct < 85) return "text-warning";
+  return "text-destructive";
+}
+
+export default function MoldInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // ─── 좌측: 금형 목록 ───
+  const [molds, setMolds] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedMoldCode, setSelectedMoldCode] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<"list" | "grid">("list");
+
+  // ─── 검색 필터 ───
+  const [filterCode, setFilterCode] = useState("");
+  const [filterName, setFilterName] = useState("");
+  const [filterType, setFilterType] = useState("");
+  const [filterStatus, setFilterStatus] = useState("");
+
+  // ─── 우측: 상세 ───
+  const [detail, setDetail] = useState<any>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [serialSummary, setSerialSummary] = useState<any>(null);
+  const [rightTab, setRightTab] = useState("serial");
+
+  // ─── 일련번호 ───
+  const [serials, setSerials] = useState<any[]>([]);
+  const [serialLoading, setSerialLoading] = useState(false);
+
+  // ─── 점검항목 ───
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspectionLoading, setInspectionLoading] = useState(false);
+
+  // ─── 부품 ───
+  const [parts, setParts] = useState<any[]>([]);
+  const [partLoading, setPartLoading] = useState(false);
+
+  // ─── 모달 ───
+  const [moldModalOpen, setMoldModalOpen] = useState(false);
+  const [moldEditMode, setMoldEditMode] = useState(false);
+  const [moldForm, setMoldForm] = useState<Record<string, any>>({});
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [moldImagePreview, setMoldImagePreview] = useState<string | null>(null);
+  const moldImageRef = React.useRef<HTMLInputElement>(null);
+
+  const [serialModalOpen, setSerialModalOpen] = useState(false);
+  const [serialForm, setSerialForm] = useState<Record<string, any>>({});
+
+  const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
+  const [inspectionForm, setInspectionForm] = useState<Record<string, any>>({});
+
+  const [partModalOpen, setPartModalOpen] = useState(false);
+  const [partForm, setPartForm] = useState<Record<string, any>>({});
+
+  // ─── 금형 목록 조회 ───
+  const fetchMolds = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      if (filterCode) params.mold_code = filterCode;
+      if (filterName) params.mold_name = filterName;
+      if (filterType) params.mold_type = filterType;
+      if (filterStatus) params.operation_status = filterStatus;
+
+      const res = await apiClient.get(API, { params });
+      setMolds(res.data?.data || []);
+    } catch {
+      toast.error("금형 목록을 불러올 수 없어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [filterCode, filterName, filterType, filterStatus]);
+
+  useEffect(() => { fetchMolds(); }, [fetchMolds]);
+
+  // ─── 금형 상세 + 하위 데이터 ───
+  const fetchDetail = useCallback(async (code: string) => {
+    setDetailLoading(true);
+    try {
+      const [detailRes, summaryRes] = await Promise.all([
+        apiClient.get(`${API}/${code}`),
+        apiClient.get(`${API}/${code}/serial-summary`),
+      ]);
+      setDetail(detailRes.data?.data || null);
+      setSerialSummary(summaryRes.data?.data || null);
+    } catch {
+      toast.error("금형 상세를 불러올 수 없어요.");
+    } finally {
+      setDetailLoading(false);
+    }
+  }, []);
+
+  const fetchSerials = useCallback(async (code: string) => {
+    setSerialLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/serials`);
+      setSerials(res.data?.data || []);
+    } catch {
+      toast.error("일련번호를 불러올 수 없어요.");
+    } finally {
+      setSerialLoading(false);
+    }
+  }, []);
+
+  const fetchInspections = useCallback(async (code: string) => {
+    setInspectionLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/inspections`);
+      setInspections(res.data?.data || []);
+    } catch {
+      toast.error("점검항목을 불러올 수 없어요.");
+    } finally {
+      setInspectionLoading(false);
+    }
+  }, []);
+
+  const fetchParts = useCallback(async (code: string) => {
+    setPartLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/parts`);
+      setParts(res.data?.data || []);
+    } catch {
+      toast.error("부품을 불러올 수 없어요.");
+    } finally {
+      setPartLoading(false);
+    }
+  }, []);
+
+  // 금형 선택
+  const handleSelectMold = useCallback((code: string) => {
+    setSelectedMoldCode(code);
+    setRightTab("serial");
+    fetchDetail(code);
+    fetchSerials(code);
+    fetchInspections(code);
+    fetchParts(code);
+  }, [fetchDetail, fetchSerials, fetchInspections, fetchParts]);
+
+  // 탭 변경 시 재조회
+  useEffect(() => {
+    if (!selectedMoldCode) return;
+    if (rightTab === "serial") fetchSerials(selectedMoldCode);
+    else if (rightTab === "inspection") fetchInspections(selectedMoldCode);
+    else if (rightTab === "part") fetchParts(selectedMoldCode);
+  }, [rightTab, selectedMoldCode, fetchSerials, fetchInspections, fetchParts]);
+
+  // ─── 금형 CRUD ───
+  const handleOpenRegister = async () => {
+    setMoldEditMode(false);
+    setMoldForm({});
+    setMoldImagePreview(null);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setMoldModalOpen(true);
+
+    // 채번 규칙 조회 (mold_mng.mold_code)
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/mold_mng/mold_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시 — 수동 입력 모드
+    }
+  };
+
+  const handleOpenEdit = () => {
+    if (!detail) return;
+    setMoldEditMode(true);
+    setMoldForm({ ...detail });
+    setMoldImagePreview(detail.image_path || null);
+    setMoldModalOpen(true);
+  };
+
+  const handleMoldImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result as string;
+      setMoldImagePreview(result);
+      setMoldForm((prev) => ({ ...prev, image_path: result }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleSaveMold = async () => {
+    // 등록 모드에서 채번이 없으면 수동 입력 필수
+    if (!moldEditMode && !numberingRuleId && !moldForm.mold_code) {
+      toast.error("금형코드와 금형명은 필수예요.");
+      return;
+    }
+    if (!moldForm.mold_name) {
+      toast.error("금형명은 필수예요.");
+      return;
+    }
+    if (moldEditMode && !moldForm.mold_code) {
+      toast.error("금형코드가 없어요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      if (moldEditMode) {
+        await apiClient.put(`${API}/${moldForm.mold_code}`, moldForm);
+        toast.success("금형이 수정되었어요.");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let saveData = { ...moldForm };
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            saveData.mold_code = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했어요.");
+            return;
+          }
+        }
+        await apiClient.post(API, saveData);
+        toast.success("금형이 등록되었어요.");
+      }
+      setMoldModalOpen(false);
+      fetchMolds();
+      if (moldEditMode && selectedMoldCode === moldForm.mold_code) {
+        fetchDetail(moldForm.mold_code);
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteMold = async () => {
+    if (!selectedMoldCode || !detail) return;
+    const ok = await confirm(
+      "금형을 삭제하시겠어요?",
+      { description: `"${detail.mold_name}" 금형과 하위 일련번호, 점검항목, 부품이 모두 삭제돼요.`, variant: "destructive" },
+    );
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/${selectedMoldCode}`);
+      toast.success("금형이 삭제되었어요.");
+      setSelectedMoldCode(null);
+      setDetail(null);
+      fetchMolds();
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 일련번호 CRUD ───
+  const handleSaveSerial = async () => {
+    if (!selectedMoldCode) return;
+    setSaving(true);
+    try {
+      if (serialForm.id) {
+        await apiClient.put(`${API}/serials/${serialForm.id}`, serialForm);
+        toast.success("일련번호가 수정되었어요.");
+      } else {
+        await apiClient.post(`${API}/${selectedMoldCode}/serials`, serialForm);
+        toast.success("일련번호가 등록되었어요.");
+      }
+      setSerialModalOpen(false);
+      setSerialForm({});
+      fetchSerials(selectedMoldCode);
+      fetchDetail(selectedMoldCode);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteSerial = async (id: number) => {
+    const ok = await confirm("이 일련번호를 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/serials/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) {
+        fetchSerials(selectedMoldCode);
+        fetchDetail(selectedMoldCode);
+      }
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 점검항목 CRUD ───
+  const handleAddInspection = async () => {
+    if (!selectedMoldCode) return;
+    if (!inspectionForm.inspection_item) {
+      toast.error("점검항목명은 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      await apiClient.post(`${API}/${selectedMoldCode}/inspections`, inspectionForm);
+      toast.success("점검항목이 등록되었어요.");
+      setInspectionModalOpen(false);
+      setInspectionForm({});
+      fetchInspections(selectedMoldCode);
+    } catch {
+      toast.error("등록에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteInspection = async (id: number) => {
+    const ok = await confirm("이 점검항목을 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/inspections/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) fetchInspections(selectedMoldCode);
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 부품 CRUD ───
+  const handleAddPart = async () => {
+    if (!selectedMoldCode) return;
+    if (!partForm.part_name) {
+      toast.error("부품명은 필수예요.");
+      return;
+    }
+    if (!partForm.replacement_cycle) {
+      toast.error("교체주기는 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      await apiClient.post(`${API}/${selectedMoldCode}/parts`, partForm);
+      toast.success("부품이 등록되었어요.");
+      setPartModalOpen(false);
+      setPartForm({});
+      fetchParts(selectedMoldCode);
+    } catch {
+      toast.error("등록에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeletePart = async (id: number) => {
+    const ok = await confirm("이 부품을 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/parts/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) fetchParts(selectedMoldCode);
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 수명 진행률 계산 ───
+  const calcLifePct = (mold: any) => {
+    const max = Number(mold.shot_count) || 0;
+    const current = Number(mold.current_shot_count) || 0;
+    if (max <= 0) return 0;
+    return Math.min(Math.round((current / max) * 100), 100);
+  };
+
+  // ─── 카드 렌더링 ───
+  const renderCard = (mold: any) => {
+    const pct = calcLifePct(mold);
+    const st = STATUS_MAP[mold.operation_status] || { label: mold.operation_status || "-", variant: "secondary" as const };
+    const isSelected = selectedMoldCode === mold.mold_code;
+
+    return (
+      <div
+        key={mold.mold_code}
+        onClick={() => handleSelectMold(mold.mold_code)}
+        className={cn(
+          "rounded-lg border cursor-pointer transition-all overflow-hidden",
+          "hover:shadow-md hover:-translate-y-0.5",
+          isSelected
+            ? "border-primary ring-2 ring-primary/25"
+            : "border-border hover:border-border",
+          viewMode === "list" ? "flex flex-row" : "",
+        )}
+      >
+        {/* 이미지 영역 */}
+        <div className={cn(
+          "bg-muted flex items-center justify-center relative",
+          viewMode === "list"
+            ? "w-[120px] min-w-[120px] min-h-[100px]"
+            : "h-[160px]",
+        )}>
+          {mold.image_path ? (
+            <img
+              src={mold.image_path}
+              alt={mold.mold_name}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <Box className="w-8 h-8 text-muted-foreground/50" />
+          )}
+          <div className="absolute top-2 right-2">
+            <Badge variant={st.variant} className="text-[10px]">{st.label}</Badge>
+          </div>
+        </div>
+
+        {/* 본문 */}
+        <div className={cn("flex-1 p-3", viewMode === "list" && "flex items-center gap-4")}>
+          <div className="flex-1 min-w-0">
+            <p className="text-xs text-muted-foreground font-mono truncate">{mold.mold_code}</p>
+            <p className="text-sm font-semibold truncate">{mold.mold_name}</p>
+            {mold.mold_type && (
+              <Badge variant="outline" className="text-[10px] mt-1">{mold.mold_type}</Badge>
+            )}
+          </div>
+
+          {/* 수명 진행률 */}
+          <div className={cn("mt-2", viewMode === "list" && "mt-0 min-w-[140px]")}>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-[11px] text-muted-foreground">수명</span>
+              <span className={cn("text-[11px] font-mono font-semibold", getProgressTextColor(pct))}>
+                {pct}%
+              </span>
+            </div>
+            <div className="h-1 bg-muted rounded-full overflow-hidden">
+              <div
+                className={cn("h-full rounded-full transition-all", getProgressColor(pct))}
+                style={{ width: `${pct}%` }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // ─── 선택 금형 상세 ───
+  const selectedMold = detail;
+  const lifePct = selectedMold ? calcLifePct(selectedMold) : 0;
+
+  return (
+    <div className="flex flex-col h-full p-3 gap-3 overflow-hidden">
+      {ConfirmDialogComponent}
+
+      {/* 검색 필터 */}
+      <div className="rounded-lg border bg-card p-3">
+        <div className="flex flex-wrap items-end gap-3">
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형코드</Label>
+            <Input
+              className="h-9 w-[160px] text-sm"
+              placeholder="코드를 입력해주세요"
+              value={filterCode}
+              onChange={(e) => setFilterCode(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형명</Label>
+            <Input
+              className="h-9 w-[160px] text-sm"
+              placeholder="금형명을 입력해주세요"
+              value={filterName}
+              onChange={(e) => setFilterName(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형유형</Label>
+            <Select value={filterType || "__all__"} onValueChange={(v) => setFilterType(v === "__all__" ? "" : v)}>
+              <SelectTrigger className="h-9 w-[140px] text-sm">
+                <SelectValue placeholder="전체" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체</SelectItem>
+                <SelectItem value="사출금형">사출금형</SelectItem>
+                <SelectItem value="프레스금형">프레스금형</SelectItem>
+                <SelectItem value="다이캐스팅">다이캐스팅</SelectItem>
+                <SelectItem value="단조금형">단조금형</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">상태</Label>
+            <Select value={filterStatus || "__all__"} onValueChange={(v) => setFilterStatus(v === "__all__" ? "" : v)}>
+              <SelectTrigger className="h-9 w-[140px] text-sm">
+                <SelectValue placeholder="전체" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체</SelectItem>
+                <SelectItem value="ACTIVE">사용중</SelectItem>
+                <SelectItem value="INSPECTION">점검중</SelectItem>
+                <SelectItem value="REPAIR">수리중</SelectItem>
+                <SelectItem value="DISPOSED">폐기</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <Button size="sm" className="h-9" onClick={fetchMolds}>
+            <Search className="w-4 h-4 mr-1" />
+            조회
+          </Button>
+        </div>
+      </div>
+
+      {/* 메인 분할 패널 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 rounded-lg border bg-card overflow-hidden">
+        {/* ─── 좌측: 카드 리스트 ─── */}
+        <ResizablePanel defaultSize={35} minSize={20} maxSize={50}>
+          <div className="flex flex-col h-full">
+            {/* 패널 헤더 */}
+            <div className="flex items-center justify-between px-4 py-3 border-b">
+              <div className="flex items-center gap-2">
+                <h3 className="text-sm font-semibold">금형 목록</h3>
+                <span className="text-xs font-mono font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full">
+                  {molds.length}
+                </span>
+              </div>
+              <div className="flex items-center gap-1.5">
+                {/* 뷰 토글 */}
+                <div className="flex border rounded overflow-hidden">
+                  <button
+                    onClick={() => setViewMode("grid")}
+                    className={cn(
+                      "p-1.5 transition-colors",
+                      viewMode === "grid"
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground/50 hover:text-muted-foreground hover:bg-accent",
+                    )}
+                  >
+                    <LayoutGrid className="w-3.5 h-3.5" />
+                  </button>
+                  <button
+                    onClick={() => setViewMode("list")}
+                    className={cn(
+                      "p-1.5 transition-colors border-l",
+                      viewMode === "list"
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground/50 hover:text-muted-foreground hover:bg-accent",
+                    )}
+                  >
+                    <List className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+                <Button size="sm" className="h-8" onClick={handleOpenRegister}>
+                  <Plus className="w-4 h-4 mr-1" />
+                  등록
+                </Button>
+              </div>
+            </div>
+
+            {/* 카드 스크롤 영역 */}
+            <div className="flex-1 overflow-y-auto p-2">
+              {loading ? (
+                <div className="flex items-center justify-center h-40">
+                  <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : molds.length === 0 ? (
+                <div className="flex flex-col items-center justify-center h-40 gap-2 text-muted-foreground">
+                  <Inbox className="w-10 h-10 opacity-40" />
+                  <p className="text-sm">등록된 금형이 없어요.</p>
+                </div>
+              ) : (
+                <div className={cn(
+                  "grid gap-2",
+                  viewMode === "grid"
+                    ? "grid-cols-[repeat(auto-fill,minmax(200px,1fr))]"
+                    : "grid-cols-1",
+                )}>
+                  {molds.map(renderCard)}
+                </div>
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* ─── 우측: 상세 ─── */}
+        <ResizablePanel defaultSize={65} minSize={40}>
+          <div className="flex flex-col h-full overflow-y-auto">
+            {!selectedMoldCode ? (
+              <div className="flex flex-col items-center justify-center h-full gap-3 text-muted-foreground">
+                <Box className="w-14 h-14 opacity-30" />
+                <p className="text-sm font-medium">좌측에서 금형을 선택해주세요</p>
+                <p className="text-xs text-muted-foreground/60">금형을 선택하면 상세 정보를 확인할 수 있어요</p>
+              </div>
+            ) : detailLoading ? (
+              <div className="flex items-center justify-center h-full">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : selectedMold ? (
+              <div className="p-5">
+                {/* 상세 헤더 */}
+                <div className="flex gap-5 pb-5 border-b mb-4">
+                  {/* 이미지 */}
+                  <div className="w-[200px] min-w-[200px] h-[200px] bg-muted rounded-lg flex items-center justify-center border">
+                    {selectedMold.image_path ? (
+                      <img
+                        src={selectedMold.image_path}
+                        alt={selectedMold.mold_name}
+                        className="w-full h-full object-cover rounded-lg"
+                      />
+                    ) : (
+                      <ImageIcon className="w-16 h-16 text-muted-foreground/40" />
+                    )}
+                  </div>
+
+                  {/* 메타 정보 */}
+                  <div className="flex-1 flex flex-col justify-center min-w-0">
+                    <p className="text-xs text-muted-foreground font-mono mb-1">{selectedMold.mold_code}</p>
+                    <h2 className="text-xl font-bold mb-2 truncate">{selectedMold.mold_name}</h2>
+                    <div className="flex gap-1.5 mb-4 flex-wrap">
+                      {selectedMold.mold_type && (
+                        <Badge variant="outline">{selectedMold.mold_type}</Badge>
+                      )}
+                      {selectedMold.category && (
+                        <Badge variant="secondary">{selectedMold.category}</Badge>
+                      )}
+                      <Badge variant={STATUS_MAP[selectedMold.operation_status]?.variant || "secondary"}>
+                        {STATUS_MAP[selectedMold.operation_status]?.label || selectedMold.operation_status || "-"}
+                      </Badge>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-x-5 gap-y-2 text-sm">
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">제조사</span>
+                        <p className="text-foreground">{selectedMold.manufacturer || "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">제작일</span>
+                        <p className="text-foreground">{selectedMold.manufacturing_date || "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">캐비티수</span>
+                        <p className="text-foreground font-mono">{selectedMold.cavity_count ?? "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">수량</span>
+                        <p className="text-foreground font-mono">{selectedMold.mold_quantity ?? "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">최대수명</span>
+                        <p className="text-foreground font-mono">{Number(selectedMold.shot_count || 0).toLocaleString()}회</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">보증수명</span>
+                        <p className="text-foreground font-mono">{Number(selectedMold.warranty_shot_count || 0).toLocaleString()}회</p>
+                      </div>
+                    </div>
+
+                    {/* 수명 진행률 바 */}
+                    <div className="mt-3">
+                      <div className="flex items-center justify-between mb-1">
+                        <span className="text-xs text-muted-foreground">수명 사용률</span>
+                        <span className={cn("text-sm font-mono font-semibold", getProgressTextColor(lifePct))}>
+                          {lifePct}%
+                        </span>
+                      </div>
+                      <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                        <div
+                          className={cn("h-full rounded-full transition-all", getProgressColor(lifePct))}
+                          style={{ width: `${lifePct}%` }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 액션 버튼 */}
+                  <div className="flex flex-col gap-2 flex-shrink-0">
+                    <Button variant="outline" size="sm" className="h-8" onClick={handleOpenEdit}>
+                      <Pencil className="w-3.5 h-3.5 mr-1" />
+                      수정
+                    </Button>
+                    <Button variant="outline" size="sm" className="h-8 text-destructive hover:text-destructive" onClick={handleDeleteMold}>
+                      <Trash2 className="w-3.5 h-3.5 mr-1" />
+                      삭제
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 탭 3개 */}
+                <Tabs value={rightTab} onValueChange={setRightTab}>
+                  <TabsList className="w-full justify-start border-b rounded-none bg-transparent h-auto p-0">
+                    <TabsTrigger
+                      value="serial"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <Wrench className="w-4 h-4 mr-1.5" />
+                      일련번호
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {serials.length}
+                      </span>
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="inspection"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <ClipboardCheck className="w-4 h-4 mr-1.5" />
+                      점검항목
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {inspections.length}
+                      </span>
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="part"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <Package className="w-4 h-4 mr-1.5" />
+                      부품
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {parts.length}
+                      </span>
+                    </TabsTrigger>
+                  </TabsList>
+
+                  {/* ─── 탭1: 일련번호 ─── */}
+                  <TabsContent value="serial" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">
+                        {serialSummary && (
+                          <>
+                            사용중 {serialSummary.in_use || 0} · 보관중 {serialSummary.stored || 0} · 수리중 {serialSummary.repair || 0} · 폐기 {serialSummary.disposed || 0}
+                          </>
+                        )}
+                      </span>
+                      <Button size="sm" className="h-8" onClick={() => { setSerialForm({}); setSerialModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        일련번호 등록
+                      </Button>
+                    </div>
+                    {serialLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : serials.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <Wrench className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 일련번호가 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">일련번호</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[200px]">샷수 현황</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">보관위치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                              <TableHead className="text-xs w-[80px]">작업</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {serials.map((s: any) => {
+                              const ss = SERIAL_STATUS_MAP[s.status] || { label: s.status || "-", variant: "secondary" as const };
+                              const maxShot = detail?.shot_count || 0;
+                              const curShot = s.current_shot_count || 0;
+                              const pct = maxShot > 0 ? Math.min(Math.round((curShot / maxShot) * 100), 100) : 0;
+                              return (
+                                <TableRow key={s.id}>
+                                  <TableCell className="text-[13px] font-mono font-semibold">{s.serial_number}</TableCell>
+                                  <TableCell>
+                                    <Badge variant={ss.variant} className="text-[10px]">{ss.label}</Badge>
+                                  </TableCell>
+                                  <TableCell>
+                                    {maxShot > 0 ? (
+                                      <div className="space-y-1">
+                                        <div className="flex items-center gap-2">
+                                          <div className="flex-1 h-3 bg-muted rounded-full overflow-hidden">
+                                            <div
+                                              className={cn("h-full rounded-full transition-all", getProgressColor(pct))}
+                                              style={{ width: `${pct}%` }}
+                                            />
+                                          </div>
+                                          <span className={cn("text-xs font-bold min-w-[36px] text-right", getProgressTextColor(pct))}>
+                                            {pct}%
+                                          </span>
+                                        </div>
+                                        <p className="text-[11px] text-muted-foreground">
+                                          {curShot.toLocaleString()} / {maxShot.toLocaleString()}
+                                        </p>
+                                      </div>
+                                    ) : (
+                                      <span className="text-xs text-muted-foreground">-</span>
+                                    )}
+                                  </TableCell>
+                                  <TableCell className="text-[13px]">{s.storage_location || "-"}</TableCell>
+                                  <TableCell className="text-[13px] text-muted-foreground">{s.remarks || "-"}</TableCell>
+                                  <TableCell>
+                                    <div className="flex items-center gap-1">
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-7 w-7 p-0"
+                                        onClick={() => {
+                                          setSerialForm(s);
+                                          setSerialModalOpen(true);
+                                        }}
+                                      >
+                                        <Pencil className="w-3.5 h-3.5" />
+                                      </Button>
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                        onClick={() => handleDeleteSerial(s.id)}
+                                      >
+                                        <Trash2 className="w-3.5 h-3.5" />
+                                      </Button>
+                                    </div>
+                                  </TableCell>
+                                </TableRow>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+
+                  {/* ─── 탭2: 점검항목 ─── */}
+                  <TabsContent value="inspection" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">점검항목 목록</span>
+                      <Button size="sm" className="h-8" onClick={() => { setInspectionForm({}); setInspectionModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        점검항목 등록
+                      </Button>
+                    </div>
+                    {inspectionLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : inspections.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <ClipboardCheck className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 점검항목이 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검항목</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">하한치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                              <TableHead className="text-xs w-[60px]" />
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {inspections.map((ins: any) => (
+                              <TableRow key={ins.id}>
+                                <TableCell className="text-[13px] font-medium">{ins.inspection_item}</TableCell>
+                                <TableCell className="text-[13px]">{ins.inspection_cycle || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{ins.inspection_method || "-"}</TableCell>
+                                <TableCell className="text-[13px] font-mono">{ins.lower_limit || "-"}</TableCell>
+                                <TableCell className="text-[13px] font-mono">{ins.upper_limit || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{ins.unit || "-"}</TableCell>
+                                <TableCell>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                    onClick={() => handleDeleteInspection(ins.id)}
+                                  >
+                                    <Trash2 className="w-3.5 h-3.5" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+
+                  {/* ─── 탭3: 부품 ─── */}
+                  <TabsContent value="part" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">부품 목록</span>
+                      <Button size="sm" className="h-8" onClick={() => { setPartForm({}); setPartModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        부품 등록
+                      </Button>
+                    </div>
+                    {partLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : parts.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <Package className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 부품이 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부품명</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">교체주기</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">제조사</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                              <TableHead className="text-xs w-[60px]" />
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {parts.map((p: any) => (
+                              <TableRow key={p.id}>
+                                <TableCell className="text-[13px] font-medium">{p.part_name}</TableCell>
+                                <TableCell className="text-[13px]">{p.replacement_cycle || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.unit || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.specification || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.manufacturer || "-"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{p.remarks || "-"}</TableCell>
+                                <TableCell>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                    onClick={() => handleDeletePart(p.id)}
+                                  >
+                                    <Trash2 className="w-3.5 h-3.5" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+                </Tabs>
+              </div>
+            ) : null}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 금형 등록/수정 모달 ========== */}
+      <Dialog open={moldModalOpen} onOpenChange={setMoldModalOpen}>
+        <DialogContent className="max-w-3xl overflow-y-auto" style={{ maxHeight: "90vh" }}>
+          <DialogHeader>
+            <DialogTitle>{moldEditMode ? "금형 수정" : "금형 등록"}</DialogTitle>
+            <DialogDescription>금형 기본 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형코드 <span className="text-destructive">*</span></Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldEditMode ? (moldForm.mold_code || "") : (numberingRuleId ? (previewCode || "") : (moldForm.mold_code || ""))}
+                  onChange={(e) => {
+                    if (!moldEditMode && !numberingRuleId) {
+                      setMoldForm({ ...moldForm, mold_code: e.target.value });
+                    }
+                  }}
+                  readOnly={moldEditMode || !!numberingRuleId}
+                  placeholder={moldEditMode ? "" : (numberingRuleId ? (previewCode ? "" : "자동 생성 중...") : "금형코드를 입력해주세요")}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형명 <span className="text-destructive">*</span></Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.mold_name || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, mold_name: e.target.value })}
+                  placeholder="금형명을 입력해주세요"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형유형</Label>
+                <Select
+                  value={moldForm.mold_type || ""}
+                  onValueChange={(v) => setMoldForm({ ...moldForm, mold_type: v })}
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="사출금형">사출금형</SelectItem>
+                    <SelectItem value="프레스금형">프레스금형</SelectItem>
+                    <SelectItem value="다이캐스팅">다이캐스팅</SelectItem>
+                    <SelectItem value="단조금형">단조금형</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">카테고리</Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.category || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, category: e.target.value })}
+                  placeholder="카테고리"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">제조사</Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.manufacturer || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, manufacturer: e.target.value })}
+                  placeholder="제조사"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">제작일</Label>
+                <Input
+                  type="date"
+                  className="h-9 text-sm"
+                  value={moldForm.manufacturing_date || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, manufacturing_date: e.target.value })}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">캐비티수</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.cavity_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, cavity_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">최대수명 (샷수)</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.shot_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, shot_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형수량</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.mold_quantity ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, mold_quantity: e.target.value })}
+                  min={1}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">가동상태</Label>
+                <Select
+                  value={moldForm.operation_status || ""}
+                  onValueChange={(v) => setMoldForm({ ...moldForm, operation_status: v })}
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="ACTIVE">사용중</SelectItem>
+                    <SelectItem value="INSPECTION">점검중</SelectItem>
+                    <SelectItem value="REPAIR">수리중</SelectItem>
+                    <SelectItem value="DISPOSED">폐기</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">보증수명 (샷수)</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.warranty_shot_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, warranty_shot_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형 이미지</Label>
+                <div className="relative w-full h-32 rounded-lg border-2 border-dashed border-border bg-muted/50 flex items-center justify-center overflow-hidden group">
+                  {moldImagePreview ? (
+                    <>
+                      <img src={moldImagePreview} alt="금형 이미지" className="w-full h-full object-contain" />
+                      <div className="absolute inset-0 bg-foreground/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                        <Button size="sm" variant="secondary" className="h-7 text-xs" type="button" onClick={() => moldImageRef.current?.click()}>
+                          <Upload className="w-3 h-3 mr-1" /> 변경
+                        </Button>
+                        <Button size="sm" variant="destructive" className="h-7 text-xs" type="button" onClick={() => {
+                          setMoldImagePreview(null);
+                          setMoldForm((prev) => ({ ...prev, image_path: null }));
+                        }}>
+                          <XIcon className="w-3 h-3" />
+                        </Button>
+                      </div>
+                    </>
+                  ) : (
+                    <button
+                      type="button"
+                      className="flex flex-col items-center gap-1.5 text-muted-foreground"
+                      onClick={() => moldImageRef.current?.click()}
+                    >
+                      <ImageIcon className="w-8 h-8" />
+                      <span className="text-xs">이미지 업로드</span>
+                    </button>
+                  )}
+                </div>
+                <input
+                  ref={moldImageRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleMoldImageUpload}
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setMoldModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleSaveMold} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              {moldEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 일련번호 등록/수정 모달 ========== */}
+      <Dialog open={serialModalOpen} onOpenChange={setSerialModalOpen}>
+        <DialogContent className="sm:max-w-[480px]">
+          <DialogHeader>
+            <DialogTitle>{serialForm.id ? "일련번호 수정" : "일련번호 등록"}</DialogTitle>
+            <DialogDescription>{serialForm.id ? `${serialForm.serial_number} 정보를 수정해요.` : "일련번호는 자동으로 채번돼요."}</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">상태</Label>
+              <Select
+                value={serialForm.status || "STORED"}
+                onValueChange={(v) => setSerialForm({ ...serialForm, status: v })}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="IN_USE">사용중</SelectItem>
+                  <SelectItem value="STORED">보관중</SelectItem>
+                  <SelectItem value="REPAIR">수리중</SelectItem>
+                  <SelectItem value="DISPOSED">폐기</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">현재 샷수</Label>
+              <Input
+                type="number"
+                className="h-9 text-sm font-mono"
+                value={serialForm.current_shot_count ?? ""}
+                onChange={(e) => setSerialForm({ ...serialForm, current_shot_count: e.target.value ? Number(e.target.value) : null })}
+                placeholder="0"
+                min={0}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">보관위치</Label>
+              <Input
+                className="h-9 text-sm"
+                value={serialForm.storage_location || ""}
+                onChange={(e) => setSerialForm({ ...serialForm, storage_location: e.target.value })}
+                placeholder="보관위치"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">비고</Label>
+              <Input
+                className="h-9 text-sm"
+                value={serialForm.remarks || ""}
+                onChange={(e) => setSerialForm({ ...serialForm, remarks: e.target.value })}
+                placeholder="비고"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setSerialModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleSaveSerial} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              {serialForm.id ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 점검항목 등록 모달 ========== */}
+      <Dialog open={inspectionModalOpen} onOpenChange={setInspectionModalOpen}>
+        <DialogContent className="sm:max-w-[560px]">
+          <DialogHeader>
+            <DialogTitle>점검항목 등록</DialogTitle>
+            <DialogDescription>금형 점검항목을 등록해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">점검항목명 <span className="text-destructive">*</span></Label>
+              <Input
+                className="h-9 text-sm"
+                value={inspectionForm.inspection_item || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_item: e.target.value })}
+                placeholder="점검항목명"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">점검주기</Label>
+              <Input
+                className="h-9 text-sm"
+                value={inspectionForm.inspection_cycle || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_cycle: e.target.value })}
+                placeholder="예: 월 1회"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">점검방법 <span className="text-destructive">*</span></Label>
+              <Select
+                value={inspectionForm.inspection_method || ""}
+                onValueChange={(v) => {
+                  const updated: Record<string, any> = { ...inspectionForm, inspection_method: v };
+                  if (v !== "숫자") {
+                    updated.lower_limit = "";
+                    updated.upper_limit = "";
+                    updated.unit = "";
+                  }
+                  setInspectionForm(updated);
+                }}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue placeholder="선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="숫자">숫자</SelectItem>
+                  <SelectItem value="텍스트">텍스트</SelectItem>
+                  <SelectItem value="합격/불합격">합격/불합격</SelectItem>
+                  <SelectItem value="양호/불량">양호/불량</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            {inspectionForm.inspection_method === "숫자" && (
+              <>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">기준값</Label>
+                  <Input
+                    type="number"
+                    className="h-9 text-sm font-mono"
+                    value={inspectionForm.lower_limit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, lower_limit: e.target.value })}
+                    placeholder="기준값"
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">±오차범위</Label>
+                  <Input
+                    type="number"
+                    className="h-9 text-sm font-mono"
+                    value={inspectionForm.upper_limit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, upper_limit: e.target.value })}
+                    placeholder="허용 오차"
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">단위</Label>
+                  <Input
+                    className="h-9 text-sm"
+                    value={inspectionForm.unit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, unit: e.target.value })}
+                    placeholder="mm, ℃ 등"
+                  />
+                </div>
+              </>
+            )}
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">점검내용</Label>
+              <textarea
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 resize-y"
+                value={inspectionForm.inspection_content || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_content: e.target.value })}
+                placeholder="상세 내용"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setInspectionModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleAddInspection} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              등록하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 부품 등록 모달 ========== */}
+      <Dialog open={partModalOpen} onOpenChange={setPartModalOpen}>
+        <DialogContent className="sm:max-w-[560px]">
+          <DialogHeader>
+            <DialogTitle>부품 등록</DialogTitle>
+            <DialogDescription>금형 부품을 등록해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">부품명 <span className="text-destructive">*</span></Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.part_name || ""}
+                onChange={(e) => setPartForm({ ...partForm, part_name: e.target.value })}
+                placeholder="부품명"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">교체주기 <span className="text-destructive">*</span></Label>
+              <Select
+                value={partForm.replacement_cycle || ""}
+                onValueChange={(v) => setPartForm({ ...partForm, replacement_cycle: v })}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue placeholder="선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1만 샷">1만 샷</SelectItem>
+                  <SelectItem value="5만 샷">5만 샷</SelectItem>
+                  <SelectItem value="10만 샷">10만 샷</SelectItem>
+                  <SelectItem value="월 1회">월 1회</SelectItem>
+                  <SelectItem value="3개월">3개월</SelectItem>
+                  <SelectItem value="6개월">6개월</SelectItem>
+                  <SelectItem value="1년">1년</SelectItem>
+                  <SelectItem value="수시">수시</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">단위</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.unit || ""}
+                onChange={(e) => setPartForm({ ...partForm, unit: e.target.value })}
+                placeholder="EA, SET 등"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">규격</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.specification || ""}
+                onChange={(e) => setPartForm({ ...partForm, specification: e.target.value })}
+                placeholder="규격"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">제조사</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.manufacturer || ""}
+                onChange={(e) => setPartForm({ ...partForm, manufacturer: e.target.value })}
+                placeholder="제조사"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">비고</Label>
+              <textarea
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 resize-y"
+                value={partForm.remarks || ""}
+                onChange={(e) => setPartForm({ ...partForm, remarks: e.target.value })}
+                placeholder="비고"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setPartModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleAddPart} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              등록하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/monitoring/equipment/page.tsx b/frontend/app/(main)/COMPANY_10/monitoring/equipment/page.tsx
new file mode 100644
index 00000000..ccb5aaf6
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/monitoring/equipment/page.tsx
@@ -0,0 +1,575 @@
+"use client";
+
+/**
+ * 설비운영모니터링 — 하드코딩 페이지
+ *
+ * 설비(equipment_mng) 목록 + 작업지시(work_instruction) 연결
+ * 실시간 카드 그리드 형태 모니터링 대시보드
+ */
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Wrench,
+  Zap,
+  Pause,
+  Power,
+} from "lucide-react";
+
+/* ───── 상태 정의 ───── */
+
+type OperationStatus = "running" | "idle" | "maintenance" | "off" | "unknown";
+
+interface StatusConfig {
+  label: string;
+  color: string;
+  bg: string;
+  border: string;
+  bar: string;
+  icon: React.ReactNode;
+  badgeBg: string;
+  badgeText: string;
+  cardGlow: string;
+}
+
+const STATUS_MAP: Record<OperationStatus, StatusConfig> = {
+  running: {
+    label: "가동중",
+    color: "text-emerald-400",
+    bg: "bg-emerald-500/10",
+    border: "border-emerald-500/30",
+    bar: "bg-emerald-400",
+    icon: <Zap className="h-4 w-4" />,
+    badgeBg: "bg-emerald-500/20",
+    badgeText: "text-emerald-300",
+    cardGlow: "shadow-emerald-500/5",
+  },
+  idle: {
+    label: "대기",
+    color: "text-amber-400",
+    bg: "bg-amber-500/10",
+    border: "border-amber-500/30",
+    bar: "bg-amber-400",
+    icon: <Pause className="h-4 w-4" />,
+    badgeBg: "bg-amber-500/20",
+    badgeText: "text-amber-300",
+    cardGlow: "shadow-amber-500/5",
+  },
+  maintenance: {
+    label: "점검/수리",
+    color: "text-red-400",
+    bg: "bg-red-500/10",
+    border: "border-red-500/30",
+    bar: "bg-red-400",
+    icon: <Wrench className="h-4 w-4" />,
+    badgeBg: "bg-red-500/20",
+    badgeText: "text-red-300",
+    cardGlow: "shadow-red-500/5",
+  },
+  off: {
+    label: "비가동",
+    color: "text-gray-400",
+    bg: "bg-gray-500/10",
+    border: "border-gray-500/30",
+    bar: "bg-gray-500",
+    icon: <Power className="h-4 w-4" />,
+    badgeBg: "bg-gray-500/20",
+    badgeText: "text-gray-400",
+    cardGlow: "shadow-gray-500/5",
+  },
+  unknown: {
+    label: "미설정",
+    color: "text-gray-500",
+    bg: "bg-gray-500/10",
+    border: "border-gray-600/30",
+    bar: "bg-gray-600",
+    icon: <Power className="h-4 w-4" />,
+    badgeBg: "bg-gray-600/20",
+    badgeText: "text-gray-500",
+    cardGlow: "",
+  },
+};
+
+/** operation_status 값 → 내부 키 매핑 */
+function resolveStatus(raw: string | null | undefined): OperationStatus {
+  if (!raw) return "unknown";
+  const v = raw.trim().toLowerCase();
+  if (["running", "가동", "가동중"].includes(v)) return "running";
+  if (["idle", "대기"].includes(v)) return "idle";
+  if (["maintenance", "점검", "수리", "점검/수리", "점검중"].includes(v)) return "maintenance";
+  if (["off", "비가동", "정지"].includes(v)) return "off";
+  return "unknown";
+}
+
+/* ───── 타입 ───── */
+
+interface Equipment {
+  id: string;
+  equipment_code: string;
+  equipment_name: string;
+  equipment_type: string;
+  installation_location: string;
+  operation_status: string;
+  manufacturer: string;
+  model_name: string;
+  image_path: string;
+}
+
+interface WorkInstruction {
+  id: string;
+  instruction_number: string;
+  item_name: string;
+  equipment_id: string;
+  worker_name: string;
+  status: string;
+}
+
+/* ───── 컴포넌트 ───── */
+
+export default function EquipmentMonitoringPage() {
+  const [equipments, setEquipments] = useState<Equipment[]>([]);
+  const [workInstructions, setWorkInstructions] = useState<WorkInstruction[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [filterStatus, setFilterStatus] = useState<OperationStatus | "all">("all");
+  const autoRefreshRef = useRef(autoRefresh);
+
+  // autoRefreshRef 동기화
+  useEffect(() => {
+    autoRefreshRef.current = autoRefresh;
+  }, [autoRefresh]);
+
+  /* ── 시간 업데이트 ── */
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* ── 데이터 fetch ── */
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      const [equipRes, wiRes] = await Promise.all([
+        apiClient.post("/table-management/tables/equipment_mng/data", {
+          autoFilter: true,
+          page: 1,
+          size: 500,
+        }),
+        apiClient.get("/work-instruction/list").catch(() => ({ data: { data: [] } })),
+      ]);
+
+      const eqRows: Equipment[] = equipRes.data?.data?.rows ?? equipRes.data?.rows ?? [];
+      setEquipments(eqRows);
+
+      const wiRows: WorkInstruction[] = wiRes.data?.data ?? wiRes.data?.rows ?? [];
+      setWorkInstructions(wiRows);
+    } catch (err) {
+      console.error("설비 모니터링 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ── 자동 갱신 (30초) ── */
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (autoRefreshRef.current) fetchData();
+    }, 30000);
+    return () => clearInterval(interval);
+  }, [fetchData]);
+
+  /* ── 요약 통계 ── */
+  const stats = useMemo(() => {
+    const counts: Record<OperationStatus, number> = {
+      running: 0,
+      idle: 0,
+      maintenance: 0,
+      off: 0,
+      unknown: 0,
+    };
+    equipments.forEach((eq) => {
+      const s = resolveStatus(eq.operation_status);
+      counts[s]++;
+    });
+    return { total: equipments.length, ...counts };
+  }, [equipments]);
+
+  /* ── 필터된 설비 ── */
+  const filteredEquipments = useMemo(() => {
+    if (filterStatus === "all") return equipments;
+    return equipments.filter((eq) => resolveStatus(eq.operation_status) === filterStatus);
+  }, [equipments, filterStatus]);
+
+  /* ── 설비별 작업지시 맵 ── */
+  const wiMap = useMemo(() => {
+    const map: Record<string, WorkInstruction[]> = {};
+    workInstructions.forEach((wi) => {
+      if (wi.equipment_id) {
+        if (!map[wi.equipment_id]) map[wi.equipment_id] = [];
+        map[wi.equipment_id].push(wi);
+      }
+    });
+    return map;
+  }, [workInstructions]);
+
+  /* ── 가동률 (모킹 — 센서 미연동) ── */
+  const getUtilization = (eq: Equipment): number | null => {
+    const s = resolveStatus(eq.operation_status);
+    if (s === "running") return 75 + Math.floor(Math.random() * 20); // 75~94
+    if (s === "idle") return 20 + Math.floor(Math.random() * 30); // 20~49
+    if (s === "maintenance") return 0;
+    if (s === "off") return 0;
+    return null;
+  };
+
+  /* ── 요약 카드 배열 ── */
+  const summaryCards: {
+    label: string;
+    count: number;
+    status: OperationStatus | "total";
+    color: string;
+    bg: string;
+    border: string;
+    icon: React.ReactNode;
+  }[] = [
+    {
+      label: "전체설비",
+      count: stats.total,
+      status: "total",
+      color: "text-blue-400",
+      bg: "bg-blue-500/10",
+      border: "border-blue-500/30",
+      icon: <Inbox className="h-5 w-5" />,
+    },
+    {
+      label: "가동중",
+      count: stats.running,
+      status: "running",
+      color: "text-emerald-400",
+      bg: "bg-emerald-500/10",
+      border: "border-emerald-500/30",
+      icon: <Zap className="h-5 w-5" />,
+    },
+    {
+      label: "대기",
+      count: stats.idle,
+      status: "idle",
+      color: "text-amber-400",
+      bg: "bg-amber-500/10",
+      border: "border-amber-500/30",
+      icon: <Pause className="h-5 w-5" />,
+    },
+    {
+      label: "점검/수리",
+      count: stats.maintenance,
+      status: "maintenance",
+      color: "text-red-400",
+      bg: "bg-red-500/10",
+      border: "border-red-500/30",
+      icon: <Wrench className="h-5 w-5" />,
+    },
+    {
+      label: "비가동",
+      count: stats.off + stats.unknown,
+      status: "off",
+      color: "text-gray-400",
+      bg: "bg-gray-500/10",
+      border: "border-gray-500/30",
+      icon: <Power className="h-5 w-5" />,
+    },
+  ];
+
+  /* ── 필터 pill ── */
+  const filterPills: { label: string; value: OperationStatus | "all"; color: string }[] = [
+    { label: "전체", value: "all", color: "bg-blue-500/20 text-blue-300 hover:bg-blue-500/30" },
+    { label: "가동중", value: "running", color: "bg-emerald-500/20 text-emerald-300 hover:bg-emerald-500/30" },
+    { label: "대기", value: "idle", color: "bg-amber-500/20 text-amber-300 hover:bg-amber-500/30" },
+    { label: "점검/수리", value: "maintenance", color: "bg-red-500/20 text-red-300 hover:bg-red-500/30" },
+    { label: "비가동", value: "off", color: "bg-gray-500/20 text-gray-300 hover:bg-gray-500/30" },
+  ];
+
+  /* ── 포맷 ── */
+  const formatTime = (d: Date) =>
+    d.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
+  const formatDate = (d: Date) =>
+    d.toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", weekday: "short" });
+
+  /* ────────────── 렌더 ────────────── */
+
+  return (
+    <div className="min-h-screen bg-gray-950 text-white p-4 md:p-6 space-y-5">
+      {/* ── 헤더 ── */}
+      <header className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <div className="h-8 w-1.5 rounded-full bg-amber-400" />
+          <h1 className="text-2xl font-bold tracking-tight">설비운영모니터링</h1>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* 현재 시간 */}
+          <div className="flex items-center gap-2 text-sm text-gray-400 bg-gray-800/60 rounded-lg px-3 py-1.5 border border-gray-700/50">
+            <Clock className="h-4 w-4" />
+            <span className="font-mono">{formatDate(currentTime)}</span>
+            <span className="font-mono text-white">{formatTime(currentTime)}</span>
+          </div>
+
+          {/* 자동갱신 토글 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn(
+              "border-gray-700 text-xs gap-1.5",
+              autoRefresh
+                ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20"
+                : "bg-gray-800 text-gray-400 hover:bg-gray-700"
+            )}
+            onClick={() => setAutoRefresh((v) => !v)}
+          >
+            <span className={cn("h-1.5 w-1.5 rounded-full", autoRefresh ? "bg-emerald-400 animate-pulse" : "bg-gray-600")} />
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+
+          {/* 새로고침 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-gray-700 bg-gray-800 text-gray-300 hover:bg-gray-700 gap-1.5"
+            onClick={fetchData}
+            disabled={loading}
+          >
+            <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+            새로고침
+          </Button>
+        </div>
+      </header>
+
+      {/* ── 요약 카드 5개 ── */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
+        {summaryCards.map((card) => (
+          <button
+            key={card.label}
+            onClick={() =>
+              setFilterStatus(card.status === "total" ? "all" : (card.status as OperationStatus))
+            }
+            className={cn(
+              "relative flex items-center gap-3 rounded-xl border px-4 py-3 transition-all hover:scale-[1.02]",
+              card.bg,
+              card.border,
+              "hover:shadow-lg"
+            )}
+          >
+            <div className={cn("flex items-center justify-center rounded-lg p-2", card.bg, card.color)}>
+              {card.icon}
+            </div>
+            <div className="text-left">
+              <p className="text-xs text-gray-500">{card.label}</p>
+              <p className={cn("text-2xl font-bold tabular-nums", card.color)}>{card.count}</p>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {/* ── 필터 pill ── */}
+      <div className="flex flex-wrap gap-2">
+        {filterPills.map((pill) => (
+          <button
+            key={pill.value}
+            onClick={() => setFilterStatus(pill.value)}
+            className={cn(
+              "rounded-full px-4 py-1.5 text-sm font-medium transition-all",
+              filterStatus === pill.value
+                ? cn(pill.color, "ring-1 ring-white/20")
+                : "bg-gray-800/60 text-gray-500 hover:text-gray-300 hover:bg-gray-800"
+            )}
+          >
+            {pill.label}
+          </button>
+        ))}
+        <span className="ml-auto text-sm text-gray-600 self-center">
+          {filteredEquipments.length}대 표시
+        </span>
+      </div>
+
+      {/* ── 로딩 ── */}
+      {loading && equipments.length === 0 && (
+        <div className="flex items-center justify-center py-20">
+          <Loader2 className="h-8 w-8 animate-spin text-gray-600" />
+          <span className="ml-3 text-gray-500">설비 데이터를 불러오는 중...</span>
+        </div>
+      )}
+
+      {/* ── 데이터 없음 ── */}
+      {!loading && equipments.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-gray-600">
+          <Inbox className="h-12 w-12 mb-3" />
+          <p className="text-lg">등록된 설비가 없습니다.</p>
+        </div>
+      )}
+
+      {/* ── 설비 카드 그리드 ── */}
+      {filteredEquipments.length > 0 && (
+        <div
+          className="grid gap-4"
+          style={{ gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))" }}
+        >
+          {filteredEquipments.map((eq) => {
+            const status = resolveStatus(eq.operation_status);
+            const cfg = STATUS_MAP[status];
+            const utilization = getUtilization(eq);
+            const eqWIs = wiMap[eq.id] ?? [];
+
+            return (
+              <div
+                key={eq.id}
+                className={cn(
+                  "relative overflow-hidden rounded-xl border bg-gray-900/80 backdrop-blur transition-all hover:shadow-lg",
+                  cfg.border,
+                  cfg.cardGlow
+                )}
+              >
+                {/* 좌측 색상 바 */}
+                <div className={cn("absolute left-0 top-0 bottom-0 w-1 rounded-l-xl", cfg.bar)} />
+
+                {/* 상단: 설비명 + 상태 배지 */}
+                <div className="flex items-start justify-between px-4 pt-3 pb-2 pl-5">
+                  <div className="min-w-0 flex-1">
+                    <h3 className="text-base font-semibold text-white truncate">
+                      {eq.equipment_name || "이름 없음"}
+                    </h3>
+                    <p className="text-xs text-gray-500 mt-0.5 truncate">
+                      {eq.equipment_type || "-"} · {eq.installation_location || "-"}
+                    </p>
+                  </div>
+                  <Badge
+                    className={cn(
+                      "ml-2 shrink-0 border-0 gap-1 text-xs font-medium",
+                      cfg.badgeBg,
+                      cfg.badgeText
+                    )}
+                  >
+                    {cfg.icon}
+                    {cfg.label}
+                  </Badge>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 정보 그리드 */}
+                <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 px-4 pl-5 py-2.5 text-sm">
+                  <div>
+                    <span className="text-gray-500 text-xs">금일 가동시간</span>
+                    <p className="text-white font-medium">-</p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">생산수량</span>
+                    <p className="text-white font-medium">-</p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">작업자</span>
+                    <p className="text-white font-medium">
+                      {eqWIs.length > 0 && eqWIs[0].worker_name
+                        ? eqWIs[0].worker_name
+                        : "-"}
+                    </p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">설비코드</span>
+                    <p className="text-white font-medium truncate">{eq.equipment_code || "-"}</p>
+                  </div>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 가동률 프로그레스 */}
+                <div className="px-4 pl-5 py-2.5">
+                  <div className="flex items-center justify-between text-xs mb-1.5">
+                    <span className="text-gray-500">가동률</span>
+                    <span className={cn("font-bold tabular-nums", utilization !== null ? cfg.color : "text-gray-600")}>
+                      {utilization !== null ? `${utilization}%` : "-"}
+                    </span>
+                  </div>
+                  <div className="h-2 w-full rounded-full bg-gray-800 overflow-hidden">
+                    {utilization !== null && (
+                      <div
+                        className={cn("h-full rounded-full transition-all duration-700", cfg.bar)}
+                        style={{ width: `${utilization}%` }}
+                      />
+                    )}
+                  </div>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 현재 작업지시 */}
+                <div className="px-4 pl-5 py-2.5">
+                  <p className="text-xs text-gray-500 mb-1">현재 작업지시</p>
+                  {eqWIs.length > 0 ? (
+                    <div className="space-y-1">
+                      {eqWIs.slice(0, 2).map((wi) => (
+                        <div key={wi.id} className="flex items-center gap-2 text-sm">
+                          <span className="text-blue-400 font-mono text-xs shrink-0">
+                            {wi.instruction_number || "-"}
+                          </span>
+                          <span className="text-gray-300 truncate">
+                            {wi.item_name || "-"}
+                          </span>
+                        </div>
+                      ))}
+                      {eqWIs.length > 2 && (
+                        <p className="text-xs text-gray-600">+{eqWIs.length - 2}건 더</p>
+                      )}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-gray-600 italic">배정된 작업 없음</p>
+                  )}
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 센서 데이터 (PLC 미연동) */}
+                <div className="flex items-center gap-4 px-4 pl-5 py-2.5 text-xs">
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">온도</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">압력</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">RPM</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* 필터 결과 없음 */}
+      {!loading && equipments.length > 0 && filteredEquipments.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 text-gray-600">
+          <Inbox className="h-10 w-10 mb-2" />
+          <p>해당 상태의 설비가 없습니다.</p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/monitoring/production/page.tsx b/frontend/app/(main)/COMPANY_10/monitoring/production/page.tsx
new file mode 100644
index 00000000..fb8aa24b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/monitoring/production/page.tsx
@@ -0,0 +1,504 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Timer,
+  CheckCircle2,
+  AlertTriangle,
+  TrendingUp,
+  Play,
+  Pause,
+} from "lucide-react";
+
+// ─── 타입 정의 ─────────────────────────────────────────────
+interface WorkInstructionDetail {
+  item_name?: string;
+  spec?: string;
+  customer_name?: string;
+}
+
+interface WorkInstruction {
+  id: string;
+  wi_id?: string;
+  work_instruction_no: string;
+  status: string; // 일반 / 긴급
+  qty: number;
+  completed_qty: number;
+  start_date: string | null;
+  end_date: string | null;
+  worker: string | null;
+  equipment_id: string | null;
+  equipment_name?: string | null;
+  details?: WorkInstructionDetail[];
+}
+
+interface ProcessStep {
+  wo_id: string;
+  process_name: string;
+  status: string; // acceptable / completed
+  seq_no: number;
+}
+
+type FilterTab = "전체" | "대기" | "진행중" | "완료";
+
+// ─── 유틸리티 ──────────────────────────────────────────────
+function formatDate(dateStr: string | null | undefined): string {
+  if (!dateStr) return "-";
+  try {
+    const d = new Date(dateStr);
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+  } catch {
+    return dateStr;
+  }
+}
+
+function formatTime(date: Date): string {
+  const h = String(date.getHours()).padStart(2, "0");
+  const m = String(date.getMinutes()).padStart(2, "0");
+  const s = String(date.getSeconds()).padStart(2, "0");
+  return `${h}:${m}:${s}`;
+}
+
+// 작업지시별 공정현황으로 진행상태 계산
+function computeProgress(
+  wiId: string,
+  processMap: Map<string, ProcessStep[]>
+): "대기" | "진행중" | "완료" {
+  const steps = processMap.get(wiId);
+  if (!steps || steps.length === 0) return "대기";
+  const completedCount = steps.filter((s) => s.status === "completed").length;
+  if (completedCount === 0) return "대기";
+  if (completedCount === steps.length) return "완료";
+  return "진행중";
+}
+
+// ─── 메인 컴포넌트 ────────────────────────────────────────
+export default function ProductionMonitoringPage() {
+  const [workInstructions, setWorkInstructions] = useState<WorkInstruction[]>([]);
+  const [processMap, setProcessMap] = useState<Map<string, ProcessStep[]>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [activeTab, setActiveTab] = useState<FilterTab>("전체");
+
+  // ─── 실시간 시계 ─────────────────────────────────────────
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // ─── 데이터 로드 ─────────────────────────────────────────
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+
+      // 작업지시 목록 조회
+      const wiRes = await apiClient.get("/work-instruction/list");
+      const wiRaw: WorkInstruction[] =
+        wiRes.data?.success && Array.isArray(wiRes.data.data) ? wiRes.data.data : [];
+      // 작업지시번호 기준 중복 제거 (디테일 JOIN으로 중복 발생 가능)
+      const seen = new Set<string>();
+      const wiData = wiRaw.filter((wi) => {
+        const key = wi.work_instruction_no || wi.id;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+      setWorkInstructions(wiData);
+
+      // 공정현황 조회 (실패해도 작업지시는 표시)
+      try {
+        const procRes = await apiClient.post("/table-management/tables/work_order_process/data", {
+          page: 1, size: 1000, autoFilter: true,
+        });
+        const rows: ProcessStep[] = procRes.data?.data?.data || procRes.data?.data?.rows || procRes.data?.data || [];
+
+        // wo_id별로 그룹핑 후, 같은 seq_no+process_name은 1건으로 합침 (배치 실행 이력 중복 제거)
+        const rawMap = new Map<string, ProcessStep[]>();
+        rows.forEach((row) => {
+          const key = String(row.wo_id);
+          if (!rawMap.has(key)) rawMap.set(key, []);
+          rawMap.get(key)!.push(row);
+        });
+
+        const map = new Map<string, ProcessStep[]>();
+        rawMap.forEach((steps, woId) => {
+          // seq_no + process_name 기준으로 대표 1건만 (completed 우선)
+          const grouped = new Map<string, ProcessStep>();
+          for (const s of steps) {
+            const gk = `${s.seq_no}_${s.process_name}`;
+            const existing = grouped.get(gk);
+            if (!existing || (s.status === "completed" && existing.status !== "completed")) {
+              grouped.set(gk, s);
+            }
+          }
+          const deduped = Array.from(grouped.values()).sort((a, b) => (a.seq_no ?? 0) - (b.seq_no ?? 0));
+          map.set(woId, deduped);
+        });
+        setProcessMap(map);
+      } catch {
+        // 공정현황 조회 실패 → 빈 맵 유지
+        setProcessMap(new Map());
+      }
+    } catch (err) {
+      console.error("생산모니터링 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // ─── 자동갱신 (30초) ─────────────────────────────────────
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const timer = setInterval(fetchData, 30000);
+    return () => clearInterval(timer);
+  }, [autoRefresh, fetchData]);
+
+  // ─── 통계 계산 ───────────────────────────────────────────
+  const stats = useMemo(() => {
+    let waiting = 0;
+    let inProgress = 0;
+    let completed = 0;
+    let totalQty = 0;
+    let completedQty = 0;
+
+    workInstructions.forEach((wi) => {
+      const progress = computeProgress(wi.wi_id || wi.id, processMap);
+      if (progress === "대기") waiting++;
+      else if (progress === "진행중") inProgress++;
+      else completed++;
+      totalQty += Number((wi as any).total_qty || wi.qty || 0);
+      completedQty += Number(wi.completed_qty) || 0;
+    });
+
+    const achievementRate = totalQty > 0 ? Math.round((completedQty / totalQty) * 100) : 0;
+
+    return { waiting, inProgress, completed, achievementRate };
+  }, [workInstructions, processMap]);
+
+  // ─── 필터링된 작업 목록 ──────────────────────────────────
+  const filteredInstructions = useMemo(() => {
+    return workInstructions.filter((wi) => {
+      if (activeTab === "전체") return true;
+      const progress = computeProgress(wi.wi_id || wi.id, processMap);
+      return progress === activeTab;
+    });
+  }, [workInstructions, processMap, activeTab]);
+
+  // ─── 렌더링 ──────────────────────────────────────────────
+  return (
+    <div className="flex flex-col h-full min-h-0 bg-background p-4 gap-4 overflow-auto">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between flex-shrink-0">
+        <h1 className="text-2xl font-bold text-foreground">생산모니터링</h1>
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5 text-muted-foreground text-sm">
+            <Clock className="w-4 h-4" />
+            <span className="font-mono">{formatTime(currentTime)}</span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={loading}
+            className="gap-1.5"
+          >
+            <RefreshCw className={cn("w-4 h-4", loading && "animate-spin")} />
+            새로고침
+          </Button>
+          <Button
+            variant={autoRefresh ? "default" : "outline"}
+            size="sm"
+            onClick={() => setAutoRefresh(!autoRefresh)}
+            className="gap-1.5"
+          >
+            {autoRefresh ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+        </div>
+      </div>
+
+      {/* 요약 카드 */}
+      <div className="grid grid-cols-4 gap-4 flex-shrink-0">
+        <SummaryCard
+          icon={<Timer className="w-5 h-5" />}
+          label="대기중"
+          value={stats.waiting}
+          colorClass="text-amber-500 bg-amber-500/10 border-amber-500/20"
+        />
+        <SummaryCard
+          icon={<Loader2 className="w-5 h-5" />}
+          label="진행중"
+          value={stats.inProgress}
+          colorClass="text-blue-500 bg-blue-500/10 border-blue-500/20"
+        />
+        <SummaryCard
+          icon={<CheckCircle2 className="w-5 h-5" />}
+          label="완료"
+          value={stats.completed}
+          colorClass="text-emerald-500 bg-emerald-500/10 border-emerald-500/20"
+        />
+        <SummaryCard
+          icon={<TrendingUp className="w-5 h-5" />}
+          label="달성율"
+          value={`${stats.achievementRate}%`}
+          colorClass="text-purple-500 bg-purple-500/10 border-purple-500/20"
+        />
+      </div>
+
+      {/* 탭 필터 */}
+      <div className="flex items-center gap-2 flex-shrink-0">
+        {(["전체", "대기", "진행중", "완료"] as FilterTab[]).map((tab) => (
+          <Button
+            key={tab}
+            variant={activeTab === tab ? "default" : "outline"}
+            size="sm"
+            onClick={() => setActiveTab(tab)}
+            className={cn(
+              "min-w-[64px]",
+              activeTab === tab && tab === "대기" && "bg-amber-500 hover:bg-amber-600 text-white",
+              activeTab === tab && tab === "진행중" && "bg-blue-500 hover:bg-blue-600 text-white",
+              activeTab === tab && tab === "완료" && "bg-emerald-500 hover:bg-emerald-600 text-white"
+            )}
+          >
+            {tab}
+            {tab === "전체" && ` (${workInstructions.length})`}
+            {tab === "대기" && ` (${stats.waiting})`}
+            {tab === "진행중" && ` (${stats.inProgress})`}
+            {tab === "완료" && ` (${stats.completed})`}
+          </Button>
+        ))}
+      </div>
+
+      {/* 로딩 상태 */}
+      {loading && workInstructions.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <Loader2 className="w-10 h-10 animate-spin mb-3" />
+          <span className="text-sm">데이터를 불러오는 중입니다...</span>
+        </div>
+      )}
+
+      {/* 빈 상태 */}
+      {!loading && filteredInstructions.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <Inbox className="w-12 h-12 mb-3" />
+          <span className="text-sm">
+            {activeTab === "전체"
+              ? "등록된 작업지시가 없습니다."
+              : `"${activeTab}" 상태의 작업지시가 없습니다.`}
+          </span>
+        </div>
+      )}
+
+      {/* 작업 카드 그리드 */}
+      {filteredInstructions.length > 0 && (
+        <div
+          className="grid gap-4 flex-1"
+          style={{ gridTemplateColumns: "repeat(auto-fill, minmax(420px, 1fr))" }}
+        >
+          {filteredInstructions.map((wi, idx) => (
+            <WorkCard
+              key={wi.id || `wi-${idx}`}
+              instruction={wi}
+              steps={processMap.get(wi.wi_id || wi.id) || []}
+              progress={computeProgress(wi.wi_id || wi.id, processMap)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── 요약 카드 ─────────────────────────────────────────────
+function SummaryCard({
+  icon,
+  label,
+  value,
+  colorClass,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: number | string;
+  colorClass: string;
+}) {
+  return (
+    <div className="bg-card border rounded-lg p-4 flex items-center gap-4">
+      <div className={cn("p-2.5 rounded-lg border", colorClass)}>{icon}</div>
+      <div className="flex flex-col">
+        <span className="text-xs text-muted-foreground">{label}</span>
+        <span className="text-2xl font-bold text-foreground">{value}</span>
+      </div>
+    </div>
+  );
+}
+
+// ─── 작업 카드 ─────────────────────────────────────────────
+function WorkCard({
+  instruction: wi,
+  steps,
+  progress,
+}: {
+  instruction: WorkInstruction;
+  steps: ProcessStep[];
+  progress: "대기" | "진행중" | "완료";
+}) {
+  // API 응답은 flat 구조 (details 배열 아님)
+  const itemName = (wi as any).item_name || "-";
+  const spec = (wi as any).item_spec || "-";
+  const customerName = (wi as any).customer_name || "-";
+
+  // 진척률 (total_qty 또는 qty)
+  const totalQty = Number((wi as any).total_qty || wi.qty || 0);
+  const completedQty = Number(wi.completed_qty || 0);
+  const progressPercent = totalQty > 0 ? Math.min(100, Math.round((completedQty / totalQty) * 100)) : 0;
+
+  // 공정 현황 계산
+  const completedSteps = steps.filter((s) => s.status === "completed").length;
+  const currentStep = steps.find((s) => s.status !== "completed");
+
+  // 프로그레스바 색상
+  const barColor =
+    progressPercent >= 100
+      ? "bg-emerald-500"
+      : progressPercent >= 50
+        ? "bg-blue-500"
+        : "bg-amber-500";
+
+  // 상태 배지 스타일
+  const statusBadge: Record<string, string> = {
+    "대기": "bg-amber-500/10 text-amber-500 border-amber-500/30",
+    "진행중": "bg-blue-500/10 text-blue-500 border-blue-500/30",
+    "완료": "bg-emerald-500/10 text-emerald-500 border-emerald-500/30",
+  };
+
+  const isUrgent = wi.status === "긴급";
+
+  return (
+    <div className="bg-card border rounded-lg overflow-hidden flex flex-col">
+      {/* 카드 헤더 */}
+      <div className="flex items-center justify-between px-4 py-3 border-b bg-muted/30">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-sm text-foreground">
+            {wi.work_instruction_no}
+          </span>
+          {isUrgent && (
+            <Badge
+              variant="outline"
+              className="bg-red-500/10 text-red-500 border-red-500/30 text-xs gap-1"
+            >
+              <AlertTriangle className="w-3 h-3" />
+              긴급
+            </Badge>
+          )}
+        </div>
+        <Badge variant="outline" className={cn("text-xs", statusBadge[progress])}>
+          {progress}
+        </Badge>
+      </div>
+
+      {/* 카드 본문 - 정보 */}
+      <div className="px-4 py-3 grid grid-cols-2 gap-x-4 gap-y-1.5 text-sm border-b">
+        <InfoRow label="품목명" value={itemName} />
+        <InfoRow label="규격" value={spec} />
+        <InfoRow label="거래처" value={customerName} />
+        <InfoRow label="작업자" value={wi.worker || "-"} />
+        <InfoRow label="납기일" value={formatDate(wi.end_date)} />
+        <InfoRow label="설비" value={wi.equipment_name || wi.equipment_id || "-"} />
+      </div>
+
+      {/* 공정현황 */}
+      <div className="px-4 py-3 border-b">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs text-muted-foreground font-medium">공정현황</span>
+          {steps.length > 0 && (
+            <span className="text-xs text-muted-foreground">
+              완료 {completedSteps}/{steps.length}
+              {currentStep && (
+                <span>
+                  {" "}
+                  · 현재: <span className="text-blue-400">{currentStep.process_name}</span>
+                </span>
+              )}
+            </span>
+          )}
+        </div>
+        {steps.length > 0 ? (
+          <div className="flex gap-1 flex-wrap">
+            {steps.map((step, idx) => {
+              const isDone = step.status === "completed";
+              const isCurrent = !isDone && idx === completedSteps;
+              return (
+                <span
+                  key={`${step.wo_id}-${step.seq_no}-${idx}`}
+                  className={cn(
+                    "px-2 py-0.5 rounded text-xs font-medium transition-all",
+                    isDone && "bg-emerald-500/20 text-emerald-400",
+                    isCurrent && "bg-blue-500/20 text-blue-400 animate-pulse",
+                    !isDone && !isCurrent && "bg-muted text-muted-foreground"
+                  )}
+                >
+                  {step.process_name}
+                </span>
+              );
+            })}
+          </div>
+        ) : (
+          <span className="text-xs text-muted-foreground">공정 정보 없음</span>
+        )}
+      </div>
+
+      {/* 프로그레스바 */}
+      <div className="px-4 py-3">
+        <div className="flex items-center justify-between mb-1.5">
+          <span className="text-xs text-muted-foreground">
+            {completedQty} / {totalQty}
+          </span>
+          <span
+            className={cn(
+              "text-xs font-bold",
+              progressPercent >= 100
+                ? "text-emerald-500"
+                : progressPercent >= 50
+                  ? "text-blue-500"
+                  : "text-amber-500"
+            )}
+          >
+            {progressPercent}%
+          </span>
+        </div>
+        <div className="w-full h-2.5 bg-muted rounded-full overflow-hidden">
+          <div
+            className={cn("h-full rounded-full transition-all duration-500", barColor)}
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── 정보 행 ───────────────────────────────────────────────
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center gap-1.5 min-w-0">
+      <span className="text-muted-foreground shrink-0">{label}:</span>
+      <span className="text-foreground truncate">{value}</span>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/monitoring/quality/page.tsx b/frontend/app/(main)/COMPANY_10/monitoring/quality/page.tsx
new file mode 100644
index 00000000..b0135bbe
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/monitoring/quality/page.tsx
@@ -0,0 +1,512 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Search,
+  ClipboardCheck,
+} from "lucide-react";
+
+/* ───── 타입 ───── */
+interface ProcessRow {
+  id: number;
+  wo_id: number;
+  process_code: string;
+  process_name: string;
+  status: string;
+  plan_qty: number;
+  input_qty: number;
+  good_qty: number;
+  defect_qty: number;
+  started_at: string | null;
+  completed_at: string | null;
+  worker_name: string;
+}
+
+interface InspectionRow {
+  no: number;
+  inspectionNo: string;
+  inspectionType: string;
+  itemName: string;
+  spec: string;
+  inspectionQty: number;
+  goodQty: number;
+  defectQty: number;
+  defectRate: number;
+  result: "합격" | "불합격" | "대기";
+  inspectorName: string;
+  inspectedAt: string;
+  remark: string;
+}
+
+/* ───── 탭 정의 ───── */
+const TABS = [
+  { key: "all", label: "전체" },
+  { key: "process", label: "공정검사" },
+  { key: "incoming", label: "입고검사" },
+  { key: "shipping", label: "출하검사" },
+] as const;
+type TabKey = (typeof TABS)[number]["key"];
+
+/* ───── 유틸 ───── */
+const fmt = (n: number) => n.toLocaleString("ko-KR");
+const pct = (n: number) =>
+  `${n.toFixed(1)}%`;
+
+const badgeVariant = (
+  type: "result" | "type" | "defectRate",
+  value: string | number,
+) => {
+  if (type === "result") {
+    if (value === "합격")
+      return "bg-emerald-100 text-emerald-700 border-emerald-200";
+    if (value === "불합격") return "bg-red-100 text-red-700 border-red-200";
+    return "bg-amber-100 text-amber-700 border-amber-200";
+  }
+  if (type === "type") {
+    if (value === "공정검사")
+      return "bg-purple-100 text-purple-700 border-purple-200";
+    if (value === "입고검사") return "bg-blue-100 text-blue-700 border-blue-200";
+    return "bg-emerald-100 text-emerald-700 border-emerald-200";
+  }
+  // defectRate
+  const rate = typeof value === "number" ? value : parseFloat(String(value));
+  if (rate > 3) return "text-red-600 font-semibold";
+  if (rate >= 1) return "text-amber-600 font-semibold";
+  return "text-emerald-600";
+};
+
+/* ───── 컴포넌트 ───── */
+export default function QualityMonitoringPage() {
+  const [processData, setProcessData] = useState<ProcessRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [activeTab, setActiveTab] = useState<TabKey>("all");
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  /* ───── 시계 ───── */
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* ───── 데이터 조회 ───── */
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await apiClient.post(
+        "/table-management/tables/work_order_process/data",
+        { autoFilter: true },
+      );
+      const rows: ProcessRow[] = res.data?.data?.rows ?? res.data?.rows ?? [];
+      setProcessData(rows);
+    } catch (err) {
+      console.error("품질점검현황 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ───── 자동 갱신 ───── */
+  useEffect(() => {
+    if (autoRefresh) {
+      intervalRef.current = setInterval(fetchData, 30_000);
+    }
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [autoRefresh, fetchData]);
+
+  /* ───── 검사 행 변환 ───── */
+  const inspectionRows: InspectionRow[] = useMemo(() => {
+    const today = new Date().toISOString().slice(0, 10);
+
+    return processData
+      .filter((r) => {
+        // 금일 데이터만
+        const dt = r.completed_at || r.started_at || "";
+        return dt.slice(0, 10) === today;
+      })
+      .map((r, idx) => {
+        const inspQty = r.input_qty || r.plan_qty || 0;
+        const goodQty = r.good_qty ?? 0;
+        const defectQty = r.defect_qty ?? 0;
+        const defectRate = inspQty > 0 ? (defectQty / inspQty) * 100 : 0;
+        const result: InspectionRow["result"] =
+          r.status !== "completed"
+            ? "대기"
+            : defectQty > 0
+              ? "불합격"
+              : "합격";
+
+        return {
+          no: idx + 1,
+          inspectionNo: `QC-${String(r.id).padStart(8, "0").slice(0, 8)}`,
+          inspectionType: "공정검사",
+          itemName: r.process_name || "-",
+          spec: r.process_code || "-",
+          inspectionQty: inspQty,
+          goodQty,
+          defectQty,
+          defectRate,
+          result,
+          inspectorName: r.worker_name || "-",
+          inspectedAt: r.completed_at || r.started_at || "-",
+          remark: "",
+        };
+      });
+  }, [processData]);
+
+  /* ───── 탭 필터링 ───── */
+  const filteredRows = useMemo(() => {
+    if (activeTab === "all" || activeTab === "process") return inspectionRows;
+    // 입고/출하는 데이터 없음
+    return [];
+  }, [activeTab, inspectionRows]);
+
+  /* ───── 요약 통계 ───── */
+  const summary = useMemo(() => {
+    const total = inspectionRows.length;
+    const passed = inspectionRows.filter((r) => r.result === "합격").length;
+    const failed = inspectionRows.filter((r) => r.result === "불합격").length;
+    const pending = inspectionRows.filter((r) => r.result === "대기").length;
+    const passRate = total > 0 ? (passed / total) * 100 : 0;
+    return { total, passed, failed, pending, passRate };
+  }, [inspectionRows]);
+
+  /* ───── 요약 카드 정의 ───── */
+  const summaryCards = [
+    {
+      label: "금일 검사건수",
+      value: fmt(summary.total),
+      sub: "건",
+      color: "from-slate-500 to-slate-600",
+      textColor: "text-white",
+    },
+    {
+      label: "합격",
+      value: fmt(summary.passed),
+      sub: "건",
+      color: "from-emerald-500 to-emerald-600",
+      textColor: "text-white",
+    },
+    {
+      label: "불합격",
+      value: fmt(summary.failed),
+      sub: "건",
+      color: "from-red-500 to-red-600",
+      textColor: "text-white",
+    },
+    {
+      label: "검사대기",
+      value: fmt(summary.pending),
+      sub: "건",
+      color: "from-amber-500 to-amber-600",
+      textColor: "text-white",
+    },
+    {
+      label: "합격률",
+      value: pct(summary.passRate),
+      sub: "",
+      color: "from-purple-500 to-purple-600",
+      textColor: "text-white",
+    },
+  ];
+
+  /* ───── 렌더링 ───── */
+  return (
+    <div className="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
+      {/* ── 헤더 ── */}
+      <div className="flex items-center justify-between px-6 py-4 bg-white dark:bg-gray-800 border-b">
+        <div className="flex items-center gap-3">
+          <ClipboardCheck className="h-6 w-6 text-emerald-600" />
+          <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+            품질점검현황{" "}
+            <span className="text-emerald-600">모니터링</span>
+          </h1>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            <Clock className="h-4 w-4" />
+            <span className="font-mono">
+              {currentTime.toLocaleString("ko-KR", {
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit",
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+                hour12: false,
+              })}
+            </span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={loading}
+          >
+            {loading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+            <span className="ml-1">새로고침</span>
+          </Button>
+          <Button
+            variant={autoRefresh ? "default" : "outline"}
+            size="sm"
+            onClick={() => setAutoRefresh((p) => !p)}
+            className={cn(
+              autoRefresh &&
+                "bg-emerald-600 hover:bg-emerald-700 text-white",
+            )}
+          >
+            <Clock className="h-4 w-4 mr-1" />
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+        </div>
+      </div>
+
+      {/* ── 본문 ── */}
+      <div className="flex-1 overflow-auto p-6 space-y-6">
+        {/* 요약 카드 */}
+        <div className="grid grid-cols-5 gap-4">
+          {summaryCards.map((card) => (
+            <div
+              key={card.label}
+              className={cn(
+                "rounded-xl bg-gradient-to-br p-5 shadow-md",
+                card.color,
+              )}
+            >
+              <p className="text-sm font-medium text-white/80">
+                {card.label}
+              </p>
+              <p className={cn("mt-2 text-3xl font-bold", card.textColor)}>
+                {card.value}
+                {card.sub && (
+                  <span className="ml-1 text-base font-normal text-white/70">
+                    {card.sub}
+                  </span>
+                )}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* 검사유형 탭 */}
+        <div className="flex items-center gap-2">
+          {TABS.map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={cn(
+                "px-4 py-1.5 rounded-full text-sm font-medium transition-colors",
+                activeTab === tab.key
+                  ? "bg-emerald-600 text-white shadow"
+                  : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border",
+              )}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* 테이블 영역 */}
+        <div className="bg-white dark:bg-gray-800 rounded-xl shadow border overflow-hidden">
+          {/* 입고/출하 준비중 */}
+          {(activeTab === "incoming" || activeTab === "shipping") ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Search className="h-12 w-12 mb-4 opacity-40" />
+              <p className="text-lg font-medium">준비중</p>
+              <p className="text-sm mt-1">
+                {activeTab === "incoming" ? "입고검사" : "출하검사"} 데이터는
+                아직 지원되지 않습니다.
+              </p>
+            </div>
+          ) : loading && filteredRows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Loader2 className="h-10 w-10 animate-spin mb-4" />
+              <p>데이터를 불러오는 중...</p>
+            </div>
+          ) : filteredRows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Inbox className="h-12 w-12 mb-4 opacity-40" />
+              <p className="text-lg font-medium">금일 검사 데이터가 없습니다</p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow className="bg-gray-50 dark:bg-gray-700/50">
+                    <TableHead className="w-[50px] text-center">No</TableHead>
+                    <TableHead className="min-w-[120px]">검사번호</TableHead>
+                    <TableHead className="min-w-[90px] text-center">
+                      검사유형
+                    </TableHead>
+                    <TableHead className="min-w-[140px]">품목명</TableHead>
+                    <TableHead className="min-w-[100px]">규격</TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      검사수량
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      합격수량
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      불합격수량
+                    </TableHead>
+                    <TableHead className="min-w-[70px] text-right">
+                      불량율
+                    </TableHead>
+                    <TableHead className="min-w-[160px] text-center">
+                      검사결과
+                    </TableHead>
+                    <TableHead className="min-w-[70px] text-center">
+                      판정
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-center">
+                      검사자
+                    </TableHead>
+                    <TableHead className="min-w-[150px]">검사일시</TableHead>
+                    <TableHead className="min-w-[100px]">비고</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredRows.map((row) => {
+                    const goodPct =
+                      row.inspectionQty > 0
+                        ? (row.goodQty / row.inspectionQty) * 100
+                        : 0;
+                    const defectPct =
+                      row.inspectionQty > 0
+                        ? (row.defectQty / row.inspectionQty) * 100
+                        : 0;
+
+                    return (
+                      <TableRow
+                        key={row.no}
+                        className="hover:bg-gray-50 dark:hover:bg-gray-700/30"
+                      >
+                        <TableCell className="text-center text-sm text-gray-500">
+                          {row.no}
+                        </TableCell>
+                        <TableCell className="font-mono text-sm">
+                          {row.inspectionNo}
+                        </TableCell>
+                        <TableCell className="text-center">
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-xs",
+                              badgeVariant("type", row.inspectionType),
+                            )}
+                          >
+                            {row.inspectionType}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-sm font-medium">
+                          {row.itemName}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-500">
+                          {row.spec}
+                        </TableCell>
+                        <TableCell className="text-right text-sm">
+                          {fmt(row.inspectionQty)}
+                        </TableCell>
+                        <TableCell className="text-right text-sm text-emerald-600">
+                          {fmt(row.goodQty)}
+                        </TableCell>
+                        <TableCell className="text-right text-sm text-red-600">
+                          {fmt(row.defectQty)}
+                        </TableCell>
+                        <TableCell
+                          className={cn(
+                            "text-right text-sm",
+                            badgeVariant("defectRate", row.defectRate),
+                          )}
+                        >
+                          {pct(row.defectRate)}
+                        </TableCell>
+                        {/* 검사결과 프로그레스바 */}
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <div className="flex-1 h-3 bg-gray-100 dark:bg-gray-600 rounded-full overflow-hidden flex">
+                              <div
+                                className="h-full bg-emerald-500 transition-all"
+                                style={{ width: `${goodPct}%` }}
+                              />
+                              <div
+                                className="h-full bg-red-500 transition-all"
+                                style={{ width: `${defectPct}%` }}
+                              />
+                            </div>
+                            <span className="text-xs text-gray-400 whitespace-nowrap w-[42px] text-right">
+                              {pct(goodPct)}
+                            </span>
+                          </div>
+                        </TableCell>
+                        {/* 판정 배지 */}
+                        <TableCell className="text-center">
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-xs",
+                              badgeVariant("result", row.result),
+                            )}
+                          >
+                            {row.result}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-center text-sm">
+                          {row.inspectorName}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-500">
+                          {row.inspectedAt !== "-"
+                            ? new Date(row.inspectedAt).toLocaleString(
+                                "ko-KR",
+                                {
+                                  month: "2-digit",
+                                  day: "2-digit",
+                                  hour: "2-digit",
+                                  minute: "2-digit",
+                                  hour12: false,
+                                },
+                              )
+                            : "-"}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-400">
+                          {row.remark || "-"}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/outsourcing/subcontractor-item/page.tsx b/frontend/app/(main)/COMPANY_10/outsourcing/subcontractor-item/page.tsx
index 08c8f7bb..ad6622da 100644
--- a/frontend/app/(main)/COMPANY_10/outsourcing/subcontractor-item/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/outsourcing/subcontractor-item/page.tsx
@@ -9,7 +9,7 @@
  * 외주업체관리와 양방향 연동 (같은 subcontractor_item_mapping 테이블)
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -20,46 +20,35 @@ import {
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Plus, Save, Loader2, FileSpreadsheet, Download, Pencil, Package, Users, Search, Settings2 } from "lucide-react";
+import { Plus, Save, Loader2, FileSpreadsheet, Download, Pencil, Inbox, Search, RotateCcw, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const ITEM_TABLE = "item_info";
 const MAPPING_TABLE = "subcontractor_item_mapping";
 const SUBCONTRACTOR_TABLE = "subcontractor_mng";
 
-// 좌측: 품목 컬럼
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "item_number", label: "품번", width: "w-[110px]" },
-  { key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
-  { key: "size", label: "규격", width: "w-[90px]" },
-  { key: "unit", label: "단위", width: "w-[60px]" },
-  { key: "standard_price", label: "기준단가", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "selling_price", label: "판매가격", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
-  { key: "status", label: "상태", width: "w-[60px]" },
-];
+const formatNum = (v: any) => (v == null || v === "" ? "-" : Number(v).toLocaleString());
 
-// 우측: 외주업체 정보 컬럼
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "subcontractor_code", label: "외주업체코드", width: "w-[110px]" },
-  { key: "subcontractor_name", label: "외주업체명", minWidth: "min-w-[120px]" },
-  { key: "subcontractor_item_code", label: "외주품번", width: "w-[100px]" },
-  { key: "subcontractor_item_name", label: "외주품명", width: "w-[100px]" },
-  { key: "base_price", label: "기준가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "calculated_price", label: "단가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
+const GRID_COLUMNS_CONFIG = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "selling_price", label: "판매가격" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
 ];
-
 export default function SubcontractorItemPage() {
   const { user } = useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
@@ -68,9 +57,8 @@ export default function SubcontractorItemPage() {
   const [items, setItems] = useState<any[]>([]);
   const [itemLoading, setItemLoading] = useState(false);
   const [itemCount, setItemCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
+  const [inputKeyword, setInputKeyword] = useState("");
+  const [searchKeyword, setSearchKeyword] = useState("");
   const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
 
   // 우측: 외주업체
@@ -95,14 +83,8 @@ export default function SubcontractorItemPage() {
   // 엑셀
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
-
-  useEffect(() => {
-    const saved = loadTableSettings("subcontractor-item");
-    if (saved) applyTableSettings(saved);
-  }, []);
+  // 테이블 설정
+  const ts = useTableSettings("c16-subcontractor-item", ITEM_TABLE, GRID_COLUMNS_CONFIG);
 
   // 카테고리 로드
   useEffect(() => {
@@ -132,6 +114,24 @@ export default function SubcontractorItemPage() {
     return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
   };
 
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      item_number: { width: "w-[110px]" },
+      item_name: { minWidth: "min-w-[130px]", render: (v) => v || "-" },
+      size: { width: "w-[90px]", render: (v) => v || "-" },
+      unit: { width: "w-[60px]", render: (v) => v || "-" },
+      standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
+      selling_price: { width: "w-[90px]", align: "right", formatNumber: true },
+      currency_code: { width: "w-[50px]", render: (v) => v || "-" },
+      status: { width: "w-[60px]", render: (v) => v || "-" },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
   // 좌측: 품목 조회 (division이 "외주관리"인 품목만 필터링)
   const outsourcingDivisionCode = categoryOptions["division"]?.find(
     (o) => o.label === "외주관리" || o.label === "외주" || o.label.includes("외주")
@@ -140,11 +140,13 @@ export default function SubcontractorItemPage() {
   const fetchItems = useCallback(async () => {
     setItemLoading(true);
     try {
-      const filters: any[] = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
-      // division = 외주관리 필터 추가
+      const filters: any[] = [];
       if (outsourcingDivisionCode) {
         filters.push({ columnName: "division", operator: "equals", value: outsourcingDivisionCode });
       }
+      if (searchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: searchKeyword });
+      }
       const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
@@ -167,7 +169,7 @@ export default function SubcontractorItemPage() {
     } finally {
       setItemLoading(false);
     }
-  }, [searchFilters, categoryOptions, outsourcingDivisionCode]);
+  }, [searchKeyword, categoryOptions, outsourcingDivisionCode]);
 
   useEffect(() => { fetchItems(); }, [fetchItems]);
 
@@ -181,7 +183,6 @@ export default function SubcontractorItemPage() {
     const fetchSubcontractorItems = async () => {
       setSubcontractorLoading(true);
       try {
-        // subcontractor_item_mapping에서 해당 품목의 매핑 조회
         const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
           page: 1, size: 500,
           dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
@@ -189,7 +190,6 @@ export default function SubcontractorItemPage() {
         });
         const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
 
-        // subcontractor_id → subcontractor_mng 조인 (외주업체명)
         const subIds = [...new Set(mappings.map((m: any) => m.subcontractor_id).filter(Boolean))];
         let subMap: Record<string, any> = {};
         if (subIds.length > 0) {
@@ -231,7 +231,6 @@ export default function SubcontractorItemPage() {
         autoFilter: true,
       });
       const all = res.data?.data?.data || res.data?.data?.rows || [];
-      // 이미 등록된 외주업체 제외
       const existing = new Set(subcontractorItems.map((s: any) => s.subcontractor_id || s.subcontractor_code));
       setSubSearchResults(all.filter((s: any) => !existing.has(s.subcontractor_code)));
     } catch { /* skip */ } finally { setSubSearchLoading(false); }
@@ -244,6 +243,7 @@ export default function SubcontractorItemPage() {
     try {
       for (const sub of selected) {
         await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+          id: crypto.randomUUID(),
           subcontractor_id: sub.subcontractor_code,
           item_id: selectedItem.item_number,
         });
@@ -251,7 +251,6 @@ export default function SubcontractorItemPage() {
       toast.success(`${selected.length}개 외주업체가 추가되었습니다.`);
       setSubCheckedIds(new Set());
       setSubSelectOpen(false);
-      // 우측 새로고침
       const sid = selectedItemId;
       setSelectedItemId(null);
       setTimeout(() => setSelectedItemId(sid), 50);
@@ -300,56 +299,74 @@ export default function SubcontractorItemPage() {
     toast.success("다운로드 완료");
   };
 
+  const handleSearch = () => setSearchKeyword(inputKeyword);
+
   return (
     <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
-      <DynamicSearchFilter
-        tableName={ITEM_TABLE}
-        filterId="subcontractor-item"
-        onFilterChange={setSearchFilters}
-        dataCount={itemCount}
-        externalFilterConfig={filterConfig}
-        extraActions={
-          <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
-              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
-            </Button>
-          </div>
-        }
-      />
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>외주관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">외주품목정보</span>
+      </div>
+
+      {/* 검색 바 */}
+      <div className="flex items-center gap-2 px-4 py-3 bg-card border rounded-lg shrink-0">
+        <span className="text-[11px] font-semibold text-muted-foreground whitespace-nowrap">품명</span>
+        <Input
+          className="h-9 w-[200px]"
+          placeholder="품명 검색"
+          value={inputKeyword}
+          onChange={(e) => setInputKeyword(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+        />
+        <Button variant="outline" size="sm" className="h-9" onClick={() => { setInputKeyword(""); setSearchKeyword(""); }}>
+          <RotateCcw className="w-3.5 h-3.5 mr-1" /> 초기화
+        </Button>
+        <Button size="sm" className="h-9" onClick={handleSearch}>
+          <Search className="w-3.5 h-3.5 mr-1" /> 조회
+        </Button>
+        <div className="ml-auto flex gap-1.5">
+          <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
 
       {/* 분할 패널 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
         <ResizablePanelGroup direction="horizontal">
           {/* 좌측: 외주품목 목록 */}
           <ResizablePanel defaultSize={55} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Package className="w-4 h-4" /> 외주품목 목록
-                  <Badge variant="secondary" className="font-normal">{itemCount}건</Badge>
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">외주품목 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{itemCount}건</span>
                 </div>
-                <div className="flex gap-1.5">
+                <div className="flex items-center gap-1.5">
                   <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
                     <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
                   </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid
-                gridId="subcontractor-item-left"
-                columns={LEFT_COLUMNS}
-                data={items}
+              <EDataTable
+                columns={mainTableColumns}
+                data={ts.groupData(items)}
                 loading={itemLoading}
+                emptyMessage="등록된 외주품목이 없어요"
                 selectedId={selectedItemId}
-                onSelect={setSelectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
                 onRowDoubleClick={() => openEditItem()}
-                emptyMessage="등록된 외주품목이 없습니다"
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-subcontractor-item-main"
               />
             </div>
           </ResizablePanel>
@@ -359,9 +376,9 @@ export default function SubcontractorItemPage() {
           {/* 우측: 외주업체 정보 */}
           <ResizablePanel defaultSize={45} minSize={25}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Users className="w-4 h-4" /> 외주업체 정보
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">외주업체 정보</h3>
                   {selectedItem && <Badge variant="outline" className="font-normal">{selectedItem.item_name}</Badge>}
                 </div>
                 <Button variant="outline" size="sm" disabled={!selectedItemId}
@@ -370,18 +387,51 @@ export default function SubcontractorItemPage() {
                 </Button>
               </div>
               {!selectedItemId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
-                  좌측에서 품목을 선택하세요
+                <div className="flex-1 flex flex-col items-center justify-center gap-3 m-3 border-2 border-dashed rounded-lg text-center">
+                  <Inbox className="w-12 h-12 text-muted-foreground/40" />
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">품목을 선택해주세요</p>
+                    <p className="text-xs text-muted-foreground mt-1">좌측에서 품목을 선택하면 외주업체 정보가 표시돼요</p>
+                  </div>
+                </div>
+              ) : subcontractorLoading ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : subcontractorItems.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                  <Inbox className="w-8 h-8 mb-2 opacity-40" />
+                  <p className="text-sm">등록된 외주업체가 없어요</p>
                 </div>
               ) : (
-                <DataGrid
-                  gridId="subcontractor-item-right"
-                  columns={RIGHT_COLUMNS}
-                  data={subcontractorItems}
-                  loading={subcontractorLoading}
-                  showRowNumber={false}
-                  emptyMessage="등록된 외주업체가 없습니다"
-                />
+                <div className="flex-1 overflow-auto">
+                  <Table noWrapper>
+                    <thead className="sticky top-0 z-10 bg-card">
+                      <TableRow>
+                        <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
+                        <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
+                        <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품번</TableHead>
+                        <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품명</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                        <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                      </TableRow>
+                    </thead>
+                    <TableBody>
+                      {subcontractorItems.map((item, idx) => (
+                        <TableRow key={item.id || idx}>
+                          <TableCell className="text-[13px] font-mono">{item.subcontractor_code || "-"}</TableCell>
+                          <TableCell className="text-sm">{item.subcontractor_name || "-"}</TableCell>
+                          <TableCell className="text-[13px]">{item.subcontractor_item_code || "-"}</TableCell>
+                          <TableCell className="text-[13px]">{item.subcontractor_item_name || "-"}</TableCell>
+                          <TableCell className="text-[13px] text-right font-mono">{formatNum(item.base_price)}</TableCell>
+                          <TableCell className="text-[13px] text-right font-mono">{formatNum(item.calculated_price)}</TableCell>
+                          <TableCell className="text-[13px]">{item.currency_code || "-"}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
               )}
             </div>
           </ResizablePanel>
@@ -389,68 +439,64 @@ export default function SubcontractorItemPage() {
       </div>
 
       {/* 품목 수정 모달 */}
-      <FullscreenDialog
-        open={editItemOpen}
-        onOpenChange={setEditItemOpen}
-        title="외주품목 수정"
-        description={`${editItemForm.item_number || ""} — ${editItemForm.item_name || ""}`}
-        defaultMaxWidth="max-w-2xl"
-        footer={
-          <>
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>외주품목 수정</DialogTitle>
+            <DialogDescription>{editItemForm.item_number || ""} — {editItemForm.item_name || ""}</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-sm text-muted-foreground">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+            <div className="col-span-2 border-t my-2" />
+            <div className="space-y-1.5">
+              <Label className="text-sm">판매가격</Label>
+              <Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
+                placeholder="판매가격" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">기준단가</Label>
+              <Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">통화</Label>
+              <Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
             <Button onClick={handleEditSave} disabled={saving}>
               {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
             </Button>
-          </>
-        }
-      >
-        <div className="grid grid-cols-2 gap-4 py-4">
-          {[
-            { key: "item_number", label: "품목코드" },
-            { key: "item_name", label: "품명" },
-            { key: "size", label: "규격" },
-            { key: "unit", label: "단위" },
-            { key: "material", label: "재질" },
-            { key: "status", label: "상태" },
-          ].map((f) => (
-            <div key={f.key} className="space-y-1.5">
-              <Label className="text-sm text-muted-foreground">{f.label}</Label>
-              <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
-            </div>
-          ))}
-
-          <div className="col-span-2 border-t my-2" />
-
-          <div className="space-y-1.5">
-            <Label className="text-sm">판매가격</Label>
-            <Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
-              placeholder="판매가격" className="h-9" />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-sm">기준단가</Label>
-            <Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
-              placeholder="기준단가" className="h-9" />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-sm">통화</Label>
-            <Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
-              <SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
-              <SelectContent>
-                {(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </FullscreenDialog>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 외주업체 추가 모달 */}
       <Dialog open={subSelectOpen} onOpenChange={setSubSelectOpen}>
-        <DialogContent className="max-w-2xl max-h-[70vh]">
+        <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden">
           <DialogHeader>
             <DialogTitle>외주업체 선택</DialogTitle>
-            <DialogDescription>품목에 추가할 외주업체를 선택하세요.</DialogDescription>
+            <DialogDescription>품목에 추가할 외주업체를 선택해주세요.</DialogDescription>
           </DialogHeader>
-          <div className="flex gap-2 mb-3">
+          <div className="flex gap-2">
             <Input placeholder="외주업체명 검색" value={subSearchKeyword}
               onChange={(e) => setSubSearchKeyword(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && searchSubcontractors()}
@@ -459,9 +505,9 @@ export default function SubcontractorItemPage() {
               {subSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
             </Button>
           </div>
-          <div className="overflow-auto max-h-[350px] border rounded-lg">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
+          <div className="flex-1 overflow-auto border rounded-lg">
+            <Table noWrapper>
+              <thead className="sticky top-0 z-10 bg-card">
                 <TableRow>
                   <TableHead className="w-[40px] text-center">
                     <input type="checkbox"
@@ -471,15 +517,15 @@ export default function SubcontractorItemPage() {
                         else setSubCheckedIds(new Set());
                       }} />
                   </TableHead>
-                  <TableHead className="w-[110px]">외주업체코드</TableHead>
-                  <TableHead className="min-w-[130px]">외주업체명</TableHead>
-                  <TableHead className="w-[80px]">거래유형</TableHead>
-                  <TableHead className="w-[80px]">담당자</TableHead>
+                  <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
+                  <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
+                  <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래유형</TableHead>
+                  <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
                 </TableRow>
-              </TableHeader>
+              </thead>
               <TableBody>
                 {subSearchResults.length === 0 ? (
-                  <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
+                  <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없어요</TableCell></TableRow>
                 ) : subSearchResults.map((s) => (
                   <TableRow key={s.id} className={cn("cursor-pointer", subCheckedIds.has(s.id) && "bg-primary/5")}
                     onClick={() => setSubCheckedIds((prev) => {
@@ -488,10 +534,10 @@ export default function SubcontractorItemPage() {
                       return next;
                     })}>
                     <TableCell className="text-center"><input type="checkbox" checked={subCheckedIds.has(s.id)} readOnly /></TableCell>
-                    <TableCell className="text-xs">{s.subcontractor_code}</TableCell>
+                    <TableCell className="text-[13px]">{s.subcontractor_code}</TableCell>
                     <TableCell className="text-sm">{s.subcontractor_name}</TableCell>
-                    <TableCell className="text-xs">{s.division}</TableCell>
-                    <TableCell className="text-xs">{s.contact_person}</TableCell>
+                    <TableCell className="text-[13px]">{s.division}</TableCell>
+                    <TableCell className="text-[13px]">{s.contact_person}</TableCell>
                   </TableRow>
                 ))}
               </TableBody>
@@ -520,12 +566,14 @@ export default function SubcontractorItemPage() {
         onSuccess={() => fetchItems()}
       />
 
+      {/* 테이블 설정 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={ITEM_TABLE}
-        settingsId="subcontractor-item"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
 
       {ConfirmDialogComponent}
diff --git a/frontend/app/(main)/COMPANY_10/outsourcing/subcontractor/page.tsx b/frontend/app/(main)/COMPANY_10/outsourcing/subcontractor/page.tsx
index eadb3a2a..934c03c5 100644
--- a/frontend/app/(main)/COMPANY_10/outsourcing/subcontractor/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/outsourcing/subcontractor/page.tsx
@@ -1,103 +1,95 @@
 "use client";
 
-/**
- * 외주업체관리 — 하드코딩 페이지
- *
- * 좌측: 외주업체 목록 (subcontractor_mng)
- * 우측: 선택한 외주업체의 품목별 단가 정보 (subcontractor_item_prices, entity join → item_info)
- *
- * 모달:
- * - 외주업체 등록/수정 (subcontractor_mng)
- * - 품목 추가 (item_info 검색 → subcontractor_item_mapping + subcontractor_item_prices)
- */
-
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
-import {
-  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
-} from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import {
   Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
-  Wrench, Package, Search, X, Settings2,
+  Wrench, Package, Search, X, RefreshCw, Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
-import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
 import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { validateField, validateForm, formatField } from "@/lib/utils/validation";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const SUBCONTRACTOR_TABLE = "subcontractor_mng";
 const MAPPING_TABLE = "subcontractor_item_mapping";
 const PRICE_TABLE = "subcontractor_item_prices";
 
-// 좌측: 외주업체 목록 컬럼
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "subcontractor_code", label: "외주업체코드", width: "w-[110px]" },
-  { key: "subcontractor_name", label: "외주업체명", minWidth: "min-w-[120px]" },
-  { key: "division", label: "거래유형", width: "w-[80px]" },
-  { key: "contact_person", label: "담당자", width: "w-[80px]" },
-  { key: "contact_phone", label: "전화번호", width: "w-[110px]" },
-  { key: "business_number", label: "사업자번호", width: "w-[110px]" },
-  { key: "email", label: "이메일", width: "w-[130px]" },
-  { key: "status", label: "상태", width: "w-[60px]" },
+const GRID_COLUMNS_CONFIG = [
+  { key: "subcontractor_code", label: "외주사코드" },
+  { key: "subcontractor_name", label: "외주사명" },
+  { key: "division", label: "업체 유형" },
+  { key: "status", label: "상태" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "담당자 전화번호" },
+  { key: "contact_email", label: "담당자 이메일" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "phone", label: "전화번호" },
+  { key: "fax", label: "팩스" },
+  { key: "representative", label: "대표자명" },
+  { key: "grade", label: "등급" },
+  { key: "process_type", label: "공정 유형" },
+  { key: "payment_terms", label: "결제 조건" },
+  { key: "remarks", label: "비고" },
+  { key: "writer", label: "작성자" },
+  { key: "created_date", label: "생성일시" },
+  { key: "updated_date", label: "수정일시" },
 ];
-
-// 우측: 품목별 단가 컬럼
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "item_number", label: "품목코드", width: "w-[100px]" },
-  { key: "item_name", label: "품명", minWidth: "min-w-[100px]" },
-  { key: "subcontractor_item_code", label: "외주품번", width: "w-[100px]" },
-  { key: "subcontractor_item_name", label: "외주품명", width: "w-[100px]" },
-  { key: "base_price_type", label: "기준유형", width: "w-[80px]" },
-  { key: "base_price", label: "기준가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "discount_type", label: "할인유형", width: "w-[70px]" },
-  { key: "discount_value", label: "할인값", width: "w-[60px]", align: "right" },
-  { key: "calculated_price", label: "단가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
-];
-
 export default function SubcontractorManagementPage() {
-  const { user } = useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
 
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
   // 좌측: 외주업체 목록
   const [subcontractors, setSubcontractors] = useState<any[]>([]);
   const [subcontractorLoading, setSubcontractorLoading] = useState(false);
   const [subcontractorCount, setSubcontractorCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
   const [selectedSubcontractorId, setSelectedSubcontractorId] = useState<string | null>(null);
 
   // 우측: 품목 단가
   const [priceItems, setPriceItems] = useState<any[]>([]);
   const [priceLoading, setPriceLoading] = useState(false);
 
-  // 품목 편집 데이터 (더블클릭 시 — 상세 입력 모달 재활용)
+  // 품목 편집 데이터
   const [editItemData, setEditItemData] = useState<any>(null);
 
-  // 모달
+  // 외주업체 등록/수정 모달
   const [subcontractorModalOpen, setSubcontractorModalOpen] = useState(false);
   const [subcontractorEditMode, setSubcontractorEditMode] = useState(false);
   const [subcontractorForm, setSubcontractorForm] = useState<Record<string, any>>({});
   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
   const [saving, setSaving] = useState(false);
 
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
   // 품목 추가 모달 (1단계: 검색/선택)
   const [itemSelectOpen, setItemSelectOpen] = useState(false);
   const [itemSearchKeyword, setItemSearchKeyword] = useState("");
@@ -105,19 +97,18 @@ export default function SubcontractorManagementPage() {
   const [itemSearchLoading, setItemSearchLoading] = useState(false);
   const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
 
-  // 품목 상세 입력 모달 (2단계: 외주 품번/품명 + 단가)
+  // 품목 상세 입력 모달 (2단계)
   const [itemDetailOpen, setItemDetailOpen] = useState(false);
   const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
-  // 품목별 외주 품번/품명 (다중)
-  const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; subcontractor_item_code: string; subcontractor_item_name: string }>>>({});
-  // 품목별 단가 목록
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{
+    _id: string; subcontractor_item_code: string; subcontractor_item_name: string;
+  }>>>({});
   const [itemPrices, setItemPrices] = useState<Record<string, Array<{
     _id: string; start_date: string; end_date: string; currency_code: string;
     base_price_type: string; base_price: string; discount_type: string;
     discount_value: string; rounding_type: string; rounding_unit_value: string;
     calculated_price: string;
   }>>>({});
-  // 단가 카테고리 옵션
   const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
   // 엑셀
@@ -125,6 +116,10 @@ export default function SubcontractorManagementPage() {
   const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
   const [excelDetecting, setExcelDetecting] = useState(false);
 
+  // 테이블 설정
+  const DEFAULT_VISIBLE_KEYS = ["subcontractor_code", "subcontractor_name", "division", "status", "contact_person", "contact_phone"];
+  const ts = useTableSettings("c16-subcontractor-v2", SUBCONTRACTOR_TABLE, GRID_COLUMNS_CONFIG, DEFAULT_VISIBLE_KEYS);
+
   // 카테고리
   const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
@@ -148,7 +143,6 @@ export default function SubcontractorManagementPage() {
       }
       setCategoryOptions(optMap);
 
-      // 단가 카테고리
       const priceOpts: Record<string, { code: string; label: string }[]> = {};
       for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
         try {
@@ -161,41 +155,57 @@ export default function SubcontractorManagementPage() {
     load();
   }, []);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
 
-  useEffect(() => {
-    const saved = loadTableSettings("subcontractor-mng");
-    if (saved) applyTableSettings(saved);
-  }, []);
+  // 셀 렌더링 헬퍼
+  const renderCellValue = (row: any, key: string) => {
+    const val = key === "division" ? (row.division_label || row.division)
+      : key === "status" ? (row.status_label || row.status)
+      : row[key];
+    if (!val) return "-";
+    if (key === "subcontractor_code") return <span className="text-primary">{val}</span>;
+    if (key === "division") return <Badge variant="secondary" className="text-[10px] px-1.5 py-0">{val}</Badge>;
+    if (key === "status") return <Badge variant="outline" className="text-[10px] px-1.5 py-0">{val}</Badge>;
+    if (key === "subcontractor_name") return <span className="font-medium">{val}</span>;
+    return val;
+  };
+
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      render: (value: any, row: any) => renderCellValue(row, col.key),
+    }));
+  }, [ts.visibleColumns, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // 외주업체 목록 조회
   const fetchSubcontractors = useCallback(async () => {
     setSubcontractorLoading(true);
     try {
       const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+
       const res = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
       });
       const raw = res.data?.data?.data || res.data?.data?.rows || [];
-      // 카테고리 코드→라벨 변환
       const resolve = (col: string, code: string) => {
         if (!code) return "";
         return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
       };
       const data = raw.map((r: any) => ({
         ...r,
-        division: resolve("division", r.division),
-        status: resolve("status", r.status),
+        division_label: resolve("division", r.division),
+        status_label: resolve("status", r.status),
       }));
       setSubcontractors(data);
       setSubcontractorCount(res.data?.data?.total || raw.length);
     } catch (err) {
-      console.error("외주업체 조회 실패:", err);
-      toast.error("외주업체 목록을 불러오는데 실패했습니다.");
+      toast.error("외주업체 목록을 불러오지 못했어요");
     } finally {
       setSubcontractorLoading(false);
     }
@@ -203,15 +213,15 @@ export default function SubcontractorManagementPage() {
 
   useEffect(() => { fetchSubcontractors(); }, [fetchSubcontractors]);
 
-  // 선택된 외주업체의 품목 단가 조회
+  // 선택된 외주업체
   const selectedSubcontractor = subcontractors.find((c) => c.id === selectedSubcontractorId);
 
+  // 선택된 외주업체의 품목 단가 조회
   useEffect(() => {
     if (!selectedSubcontractor?.subcontractor_code) { setPriceItems([]); return; }
     const fetchItems = async () => {
       setPriceLoading(true);
       try {
-        // 1. subcontractor_item_mapping 조회 (품목 매핑 — 기본 데이터)
         const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
           page: 1, size: 500,
           dataFilter: { enabled: true, filters: [
@@ -221,7 +231,6 @@ export default function SubcontractorManagementPage() {
         });
         const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
 
-        // 2. item_id → item_info 조인 (품명 등)
         const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
         let itemMap: Record<string, any> = {};
         if (itemIds.length > 0) {
@@ -237,7 +246,6 @@ export default function SubcontractorManagementPage() {
           } catch { /* skip */ }
         }
 
-        // 3. subcontractor_item_prices 조회 (단가 — 있으면 보강)
         let priceMap: Record<string, any> = {};
         if (mappings.length > 0) {
           try {
@@ -249,7 +257,6 @@ export default function SubcontractorManagementPage() {
               autoFilter: true,
             });
             const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
-            // item_id별 최신 단가 매핑
             for (const p of prices) {
               const key = p.item_id;
               if (!priceMap[key] || (p.start_date && (!priceMap[key].start_date || p.start_date > priceMap[key].start_date))) {
@@ -259,7 +266,6 @@ export default function SubcontractorManagementPage() {
           } catch { /* skip */ }
         }
 
-        // 4. 매핑 + 품목정보 + 단가 병합 + 카테고리 코드→라벨
         const priceResolve = (col: string, code: string) => {
           if (!code) return "";
           return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
@@ -281,25 +287,38 @@ export default function SubcontractorManagementPage() {
           };
         }));
       } catch (err) {
-        console.error("품목 조회 실패:", err);
+        // 품목 조회 실패 시 무시
       } finally {
         setPriceLoading(false);
       }
     };
     fetchItems();
-  }, [selectedSubcontractor?.subcontractor_code]);
+  }, [selectedSubcontractor?.subcontractor_code, priceCategoryOptions]);
 
-  const getCategoryLabel = (col: string, code: string) => {
-    if (!code) return "";
-    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
-  };
-
-  // 외주업체 등록 모달
-  const openSubcontractorRegister = () => {
+  // 외주업체 등록 모달 열기
+  const openSubcontractorRegister = async () => {
     setSubcontractorForm({});
     setFormErrors({});
     setSubcontractorEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
     setSubcontractorModalOpen(true);
+
+    // 채번 규칙 조회 (subcontractor_mng.subcontractor_code)
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/subcontractor_mng/subcontractor_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시
+    }
   };
 
   const openSubcontractorEdit = () => {
@@ -310,7 +329,6 @@ export default function SubcontractorManagementPage() {
     setSubcontractorModalOpen(true);
   };
 
-  // 폼 필드 변경 시 자동 포맷팅 + 실시간 검증
   const handleFormChange = (field: string, value: string) => {
     const formatted = formatField(field, value);
     setSubcontractorForm((prev) => ({ ...prev, [field]: formatted }));
@@ -323,9 +341,8 @@ export default function SubcontractorManagementPage() {
   };
 
   const handleSubcontractorSave = async () => {
-    if (!subcontractorForm.subcontractor_name) { toast.error("외주업체명은 필수입니다."); return; }
-    if (!subcontractorForm.status) { toast.error("상태는 필수입니다."); return; }
-    // 폼 검증
+    if (!subcontractorForm.subcontractor_name) { toast.error("외주업체명은 필수예요"); return; }
+    if (!subcontractorForm.status) { toast.error("상태는 필수예요"); return; }
     const errors = validateForm(subcontractorForm, ["contact_phone", "email", "business_number"]);
     setFormErrors(errors);
     if (Object.keys(errors).length > 0) {
@@ -334,20 +351,32 @@ export default function SubcontractorManagementPage() {
     }
     setSaving(true);
     try {
-      const { id, created_date, updated_date, writer, company_code, ...fields } = subcontractorForm;
+      const { id, created_date, updated_date, writer, company_code, division_label, status_label, ...fields } = subcontractorForm;
       if (subcontractorEditMode && id) {
         await apiClient.put(`/table-management/tables/${SUBCONTRACTOR_TABLE}/edit`, {
           originalData: { id }, updatedData: fields,
         });
-        toast.success("수정되었습니다.");
+        toast.success("수정되었어요");
       } else {
-        await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/add`, fields);
-        toast.success("등록되었습니다.");
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+        const saveFields = allocatedCode ? { ...fields, subcontractor_code: allocatedCode } : fields;
+        await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/add`, { id: crypto.randomUUID(), ...saveFields });
+        toast.success("등록되었어요");
       }
       setSubcontractorModalOpen(false);
       fetchSubcontractors();
     } catch (err: any) {
-      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+      toast.error(err.response?.data?.message || "저장에 실패했어요");
     } finally {
       setSaving(false);
     }
@@ -356,8 +385,8 @@ export default function SubcontractorManagementPage() {
   // 외주업체 삭제
   const handleSubcontractorDelete = async () => {
     if (!selectedSubcontractorId) return;
-    const ok = await confirm("외주업체를 삭제하시겠습니까?", {
-      description: "관련된 품목 매핑, 단가 정보도 함께 삭제됩니다.",
+    const ok = await confirm("외주업체를 삭제할까요?", {
+      description: "관련된 품목 매핑, 단가 정보도 함께 삭제돼요",
       variant: "destructive", confirmText: "삭제",
     });
     if (!ok) return;
@@ -365,10 +394,10 @@ export default function SubcontractorManagementPage() {
       await apiClient.delete(`/table-management/tables/${SUBCONTRACTOR_TABLE}/delete`, {
         data: [{ id: selectedSubcontractorId }],
       });
-      toast.success("삭제되었습니다.");
+      toast.success("삭제되었어요");
       setSelectedSubcontractorId(null);
       fetchSubcontractors();
-    } catch { toast.error("삭제에 실패했습니다."); }
+    } catch { toast.error("삭제에 실패했어요"); }
   };
 
   // 품목 검색
@@ -378,23 +407,26 @@ export default function SubcontractorManagementPage() {
       const filters: any[] = [];
       if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
-        page: 1, size: 50,
+        page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
       });
       const allItems = res.data?.data?.data || res.data?.data?.rows || [];
-      // 이미 등록된 품목 제외
       const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
-      setItemSearchResults(allItems.filter((item: any) => !existingItemIds.has(item.item_number) && !existingItemIds.has(item.id)));
+      const OUTSOURCING_CODE = "CAT_MMDJB7R4_TO3T";
+      setItemSearchResults(allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        const div = item.division || "";
+        return div.includes(OUTSOURCING_CODE) || div.includes("외주");
+      }));
     } catch { /* skip */ } finally { setItemSearchLoading(false); }
   };
 
   // 품목 선택 완료 → 상세 입력 모달로 전환
   const goToItemDetail = () => {
     const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
-    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+    if (selected.length === 0) { toast.error("품목을 선택해주세요"); return; }
     setSelectedItemsForDetail(selected);
-    // 초기 매핑/단가 데이터 세팅
     const mappings: typeof itemMappings = {};
     const prices: typeof itemPrices = {};
     for (const item of selected) {
@@ -410,11 +442,11 @@ export default function SubcontractorManagementPage() {
     }
     setItemMappings(mappings);
     setItemPrices(prices);
+    setEditItemData(null);
     setItemSelectOpen(false);
     setItemDetailOpen(true);
   };
 
-  // 외주 품번/품명 행 추가
   const addMappingRow = (itemKey: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -422,7 +454,6 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 외주 품번/품명 행 삭제
   const removeMappingRow = (itemKey: string, rowId: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -430,7 +461,6 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 외주 품번/품명 행 수정
   const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -438,7 +468,6 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 단가 행 추가
   const addPriceRow = (itemKey: string) => {
     setItemPrices((prev) => ({
       ...prev,
@@ -452,7 +481,6 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 단가 행 삭제
   const removePriceRow = (itemKey: string, rowId: string) => {
     setItemPrices((prev) => ({
       ...prev,
@@ -460,21 +488,19 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 단가 행 값 변경
   const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
     setItemPrices((prev) => ({
       ...prev,
       [itemKey]: (prev[itemKey] || []).map((r) => {
         if (r._id !== rowId) return r;
         const updated = { ...r, [field]: value };
-        // 단가 자동 계산: base_price - discount
         if (["base_price", "discount_type", "discount_value"].includes(field)) {
           const bp = Number(updated.base_price) || 0;
           const dv = Number(updated.discount_value) || 0;
           const dt = updated.discount_type;
           let calc = bp;
-          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100); // 할인율
-          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv; // 할인금액
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
           updated.calculated_price = String(Math.round(calc));
         }
         return updated;
@@ -482,12 +508,9 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 품목 상세 저장 (mapping + prices 일괄)
-  // 우측 품목 편집 열기 — 등록과 동일한 상세 입력 모달을 재활용
+  // 우측 품목 편집 열기 — 해당 item_number의 모든 매핑+단가를 로드
   const openEditItem = async (row: any) => {
     const itemKey = row.item_number || row.item_id;
-
-    // item_info에서 품목 정보 조회
     let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
     try {
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
@@ -499,29 +522,50 @@ export default function SubcontractorManagementPage() {
       if (found) itemInfo = found;
     } catch { /* skip */ }
 
-    // 기존 매핑 데이터 → 외주 품번/품명
-    const mappingRows = [{
-      _id: `m_existing_${row.id}`,
-      subcontractor_item_code: row.subcontractor_item_code || "",
-      subcontractor_item_name: row.subcontractor_item_name || "",
-    }].filter((m) => m.subcontractor_item_code || m.subcontractor_item_name);
+    // 같은 item_number를 가진 모든 priceItems 행에서 매핑 정보 추출
+    const allRowsForItem = priceItems.filter((p: any) => (p.item_number || p.item_id) === itemKey);
+    const allMappingIds = allRowsForItem.map((r: any) => r.id).filter(Boolean);
 
-    // 기존 단가 데이터
-    const priceRows = [{
-      _id: `p_existing_${row.id}`,
-      start_date: row.start_date || "",
-      end_date: row.end_date || "",
-      currency_code: row.currency_code || "CAT_MLAMDKVN_PZJI",
-      base_price_type: row.base_price_type || "CAT_MLAMFGFT_4RZW",
-      base_price: row.base_price ? String(row.base_price) : "",
-      discount_type: row.discount_type || "",
-      discount_value: row.discount_value ? String(row.discount_value) : "",
-      rounding_type: row.rounding_type || "",
-      rounding_unit_value: row.rounding_unit_value || "",
-      calculated_price: row.calculated_price ? String(row.calculated_price) : "",
-    }].filter((p) => p.base_price || p.start_date);
+    const mappingRows = allRowsForItem
+      .filter((r: any) => r.subcontractor_item_code || r.subcontractor_item_name)
+      .map((r: any) => ({
+        _id: `m_existing_${r.id}`,
+        subcontractor_item_code: r.subcontractor_item_code || "",
+        subcontractor_item_name: r.subcontractor_item_name || "",
+      }));
+
+    // 서버에서 이 item+subcontractor의 모든 단가를 raw 코드로 가져오기
+    let priceRows: Array<{
+      _id: string; start_date: string; end_date: string; currency_code: string;
+      base_price_type: string; base_price: string; discount_type: string;
+      discount_value: string; rounding_type: string; rounding_unit_value: string;
+      calculated_price: string;
+    }> = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor!.subcontractor_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]},
+        autoFilter: true,
+      });
+      const rawPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = rawPrices.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date || "",
+        end_date: p.end_date || "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
 
-    // 빈 단가 행이 없으면 하나 추가
     if (priceRows.length === 0) {
       priceRows.push({
         _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
@@ -533,7 +577,8 @@ export default function SubcontractorManagementPage() {
     setSelectedItemsForDetail([itemInfo]);
     setItemMappings({ [itemKey]: mappingRows });
     setItemPrices({ [itemKey]: priceRows });
-    setEditItemData(row); // 편집 모드 표시용
+    // editItemData에 원본 매핑 ID 목록 저장 (삭제 시 사용)
+    setEditItemData({ ...row, _allMappingIds: allMappingIds });
     setItemDetailOpen(true);
   };
 
@@ -547,25 +592,21 @@ export default function SubcontractorManagementPage() {
         const mappingRows = itemMappings[itemKey] || [];
 
         if (isEditingExisting && editItemData?.id) {
-          // 편집 모드: 기존 mapping UPDATE
-          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
-            originalData: { id: editItemData.id },
-            updatedData: {
-              subcontractor_item_code: mappingRows[0]?.subcontractor_item_code || "",
-              subcontractor_item_name: mappingRows[0]?.subcontractor_item_name || "",
-              base_price: null, // prices 테이블로 이동
-              discount_type: null,
-              discount_value: null,
-              calculated_price: null,
-            },
-          });
+          // 1) 기존 매핑 모두 삭제
+          const allMappingIds: string[] = editItemData._allMappingIds || [editItemData.id];
+          if (allMappingIds.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: allMappingIds.map((mid: string) => ({ id: mid })),
+            });
+          }
 
-          // 기존 prices 삭제 후 재등록
+          // 2) 기존 단가 모두 삭제 (subcontractor_id + item_id 기준)
           try {
             const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
-              page: 1, size: 100,
+              page: 1, size: 500,
               dataFilter: { enabled: true, filters: [
-                { columnName: "mapping_id", operator: "equals", value: editItemData.id },
+                { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor.subcontractor_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
               ]}, autoFilter: true,
             });
             const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
@@ -576,13 +617,39 @@ export default function SubcontractorManagementPage() {
             }
           } catch { /* skip */ }
 
-          // 새 prices INSERT
-          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+          // 3) 모든 매핑 재삽입
+          let firstMappingId: string | null = null;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const newId = crypto.randomUUID();
+            if (mi === 0) firstMappingId = newId;
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: newId,
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              subcontractor_item_code: mappingRows[mi].subcontractor_item_code || "",
+              subcontractor_item_name: mappingRows[mi].subcontractor_item_name || "",
+            });
+          }
+          // 매핑이 비어있으면 빈 매핑 1개 생성 (item_id 연결 유지)
+          if (mappingRows.length === 0) {
+            firstMappingId = crypto.randomUUID();
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: firstMappingId,
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              subcontractor_item_code: "",
+              subcontractor_item_name: "",
+            });
+          }
+
+          // 4) 모든 단가 재삽입
+          const filteredPriceRows = (itemPrices[itemKey] || []).filter((p) =>
             (p.base_price && Number(p.base_price) > 0) || p.start_date
           );
-          for (const price of priceRows) {
+          for (const price of filteredPriceRows) {
             await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
-              mapping_id: editItemData.id,
+              id: crypto.randomUUID(),
+              mapping_id: firstMappingId || "",
               subcontractor_id: selectedSubcontractor.subcontractor_code,
               item_id: itemKey,
               start_date: price.start_date || null, end_date: price.end_date || null,
@@ -594,9 +661,9 @@ export default function SubcontractorManagementPage() {
             });
           }
         } else {
-          // 신규 등록 모드
           let mappingId: string | null = null;
           const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
             subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
             subcontractor_item_code: mappingRows[0]?.subcontractor_item_code || "",
             subcontractor_item_name: mappingRows[0]?.subcontractor_item_name || "",
@@ -605,6 +672,7 @@ export default function SubcontractorManagementPage() {
 
           for (let mi = 1; mi < mappingRows.length; mi++) {
             await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
               subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
               subcontractor_item_code: mappingRows[mi].subcontractor_item_code || "",
               subcontractor_item_name: mappingRows[mi].subcontractor_item_name || "",
@@ -616,6 +684,7 @@ export default function SubcontractorManagementPage() {
           );
           for (const price of priceRows) {
             await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
               mapping_id: mappingId || "", subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
               start_date: price.start_date || null, end_date: price.end_date || null,
               currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
@@ -627,16 +696,15 @@ export default function SubcontractorManagementPage() {
           }
         }
       }
-      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedItemsForDetail.length}개 품목이 추가되었습니다.`);
+      toast.success(isEditingExisting ? "수정되었어요" : `${selectedItemsForDetail.length}개 품목이 추가되었어요`);
       setItemDetailOpen(false);
       setEditItemData(null);
       setItemCheckedIds(new Set());
-      // 우측 새로고침
       const cid = selectedSubcontractorId;
       setSelectedSubcontractorId(null);
       setTimeout(() => setSelectedSubcontractorId(cid), 50);
     } catch (err: any) {
-      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+      toast.error(err.response?.data?.message || "저장에 실패했어요");
     } finally {
       setSaving(false);
     }
@@ -647,7 +715,6 @@ export default function SubcontractorManagementPage() {
     if (subcontractors.length === 0) return;
     toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
     try {
-      // 전체 외주업체의 품목 매핑 + 단가 조회
       const allMappings: any[] = [];
       const subCodes = subcontractors.map((c) => c.subcontractor_code).filter(Boolean);
 
@@ -657,7 +724,6 @@ export default function SubcontractorManagementPage() {
         });
         const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
 
-        // item_id → item_info 조인
         const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
         let itemMap: Record<string, any> = {};
         if (itemIds.length > 0) {
@@ -679,12 +745,10 @@ export default function SubcontractorManagementPage() {
         }
       }
 
-      // 외주업체 + 품목 플랫 데이터 생성
       const rows: Record<string, any>[] = [];
       for (const c of subcontractors) {
         const subMappings = allMappings.filter((m) => m.subcontractor_id === c.subcontractor_code);
         if (subMappings.length === 0) {
-          // 품목 없는 외주업체도 1행
           rows.push({
             외주업체코드: c.subcontractor_code, 외주업체명: c.subcontractor_name,
             거래유형: getCategoryLabel("division", c.division),
@@ -717,15 +781,14 @@ export default function SubcontractorManagementPage() {
       toast.success(`${rows.length}행 다운로드 완료`);
     } catch (err) {
       toast.dismiss("excel-dl");
-      console.error("엑셀 다운로드 실패:", err);
-      toast.error("다운로드에 실패했습니다.");
+      toast.error("다운로드에 실패했어요");
     }
   };
 
   // 셀렉트 렌더링
   const renderSelect = (field: string, value: string, onChange: (v: string) => void, placeholder: string) => (
     <Select value={value || ""} onValueChange={onChange}>
-      <SelectTrigger className="h-9"><SelectValue placeholder={placeholder} /></SelectTrigger>
+      <SelectTrigger className="h-9 text-sm"><SelectValue placeholder={placeholder} /></SelectTrigger>
       <SelectContent>
         {(categoryOptions[field] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
       </SelectContent>
@@ -734,19 +797,26 @@ export default function SubcontractorManagementPage() {
 
   return (
     <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>외주관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="font-medium text-foreground">외주사관리</span>
+      </nav>
+
+      {/* 검색 필터 바 */}
       <DynamicSearchFilter
         tableName={SUBCONTRACTOR_TABLE}
-        filterId="subcontractor-mng"
+        filterId="c16-subcontractor"
         onFilterChange={setSearchFilters}
         dataCount={subcontractorCount}
-        externalFilterConfig={filterConfig}
+        externalFilterConfig={ts.filterConfig}
         extraActions={
-          <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" disabled={excelDetecting}
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={excelDetecting}
               onClick={async () => {
                 setExcelDetecting(true);
                 try {
@@ -758,217 +828,370 @@ export default function SubcontractorManagementPage() {
                     toast.error(result.message || "테이블 구조 분석 실패");
                   }
                 } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
-              }}>
-              {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />} 엑셀 업로드
+              }}
+            >
+              {excelDetecting
+                ? <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                : <FileSpreadsheet className="mr-1.5 h-4 w-4" />}
+              엑셀업로드
             </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
-              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+              <Download className="mr-1.5 h-4 w-4" />
+              엑셀다운로드
             </Button>
           </div>
         }
       />
 
-      {/* 분할 패널 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
-        <ResizablePanelGroup direction="horizontal">
-          {/* 좌측: 외주업체 목록 */}
-          <ResizablePanel defaultSize={55} minSize={30}>
-            <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Wrench className="w-4 h-4" /> 외주업체 목록
-                  <Badge variant="secondary" className="font-normal">{subcontractorCount}건</Badge>
-                </div>
-                <div className="flex gap-1.5">
-                  <Button size="sm" onClick={openSubcontractorRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
-                  <Button variant="outline" size="sm" disabled={!selectedSubcontractorId} onClick={openSubcontractorEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
-                  <Button variant="destructive" size="sm" disabled={!selectedSubcontractorId} onClick={handleSubcontractorDelete}><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
-                </div>
+      {/* 마스터-디테일 분할 패널 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg">
+
+        {/* 좌측: 외주업체 목록 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-3 shrink-0">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-semibold">외주업체 목록</span>
+                <Badge variant="outline" className="text-xs px-1.5 py-0">{subcontractorCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Button size="sm" onClick={openSubcontractorRegister}>
+                  <Plus className="h-3.5 w-3.5 mr-1" /> 등록
+                </Button>
+                <Button variant="outline" size="sm" disabled={!selectedSubcontractorId} onClick={openSubcontractorEdit}>
+                  <Pencil className="h-3.5 w-3.5 mr-1" /> 수정
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={!selectedSubcontractorId}
+                  onClick={handleSubcontractorDelete}
+                  className="text-destructive border-destructive/20 hover:bg-destructive/10"
+                >
+                  <Trash2 className="h-3.5 w-3.5 mr-1" /> 삭제
+                </Button>
+                <Button variant="ghost" size="sm" onClick={fetchSubcontractors} disabled={subcontractorLoading}>
+                  {subcontractorLoading
+                    ? <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    : <RefreshCw className="h-3.5 w-3.5" />}
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                  <Settings2 className="h-3.5 w-3.5" />
+                </Button>
               </div>
-              <DataGrid
-                gridId="subcontractor-left"
-                columns={LEFT_COLUMNS}
-                data={subcontractors}
-                loading={subcontractorLoading}
-                selectedId={selectedSubcontractorId}
-                onSelect={setSelectedSubcontractorId}
-                onRowDoubleClick={() => openSubcontractorEdit()}
-                tableName={SUBCONTRACTOR_TABLE}
-                emptyMessage="등록된 외주업체가 없습니다"
-              />
             </div>
-          </ResizablePanel>
+            <EDataTable
+              columns={mainTableColumns}
+              data={ts.groupData(subcontractors)}
+              loading={subcontractorLoading}
+              emptyMessage="등록된 외주업체가 없어요"
+              selectedId={selectedSubcontractorId}
+              onSelect={(id) => setSelectedSubcontractorId(id)}
+              onRowDoubleClick={() => openSubcontractorEdit()}
+              showPagination={true}
+              draggableColumns={false}
+              columnOrderKey="c16-subcontractor-main"
+            />
+          </div>
+        </ResizablePanel>
 
-          <ResizableHandle withHandle />
+        <ResizableHandle withHandle />
 
-          {/* 우측: 품목 정보 */}
-          <ResizablePanel defaultSize={45} minSize={25}>
-            <div className="flex flex-col h-full">
-              {/* 헤더 */}
-              <div className="flex items-center justify-between p-2 border-b bg-muted/10 shrink-0">
-                <div className="flex items-center gap-1">
-                  <span className="px-3 py-1.5 text-sm font-medium flex items-center">
-                    <Package className="w-3.5 h-3.5 inline mr-1" />품목 정보
-                  </span>
-                  {selectedSubcontractor && <Badge variant="outline" className="font-normal ml-2 text-xs">{selectedSubcontractor.subcontractor_name}</Badge>}
-                </div>
-                <div className="flex gap-1.5">
-                  <Button variant="outline" size="sm" disabled={!selectedSubcontractorId}
-                    onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
-                    <Plus className="w-3.5 h-3.5 mr-1" /> 품목 추가
-                  </Button>
-                </div>
+        {/* 우측: 품목 정보 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-3 shrink-0">
+              <div className="flex items-center gap-2">
+                {selectedSubcontractor ? (
+                  <>
+                    <span className="text-sm font-semibold">{selectedSubcontractor.subcontractor_name}</span>
+                    <Badge variant="outline" className="text-[10px] px-1.5 py-0">{selectedSubcontractor.subcontractor_code}</Badge>
+                  </>
+                ) : (
+                  <>
+                    <Package className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-semibold">품목 정보</span>
+                  </>
+                )}
               </div>
-
-              {/* 콘텐츠 */}
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!selectedSubcontractorId}
+                onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}
+              >
+                <Plus className="h-3.5 w-3.5 mr-1" /> 품목 추가
+              </Button>
+            </div>
+            <div className="flex-1 overflow-auto">
               {!selectedSubcontractorId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
-                  좌측에서 외주업체를 선택하세요
+                <div className="flex items-center justify-center h-full">
+                  <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-12 py-10 text-center">
+                    <Wrench className="h-10 w-10 text-muted-foreground opacity-30" />
+                    <p className="text-sm text-muted-foreground">좌측에서 외주사를 선택해주세요</p>
+                  </div>
+                </div>
+              ) : priceLoading ? (
+                <div className="flex items-center justify-center py-16">
+                  <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                </div>
+              ) : priceItems.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+                  <Package className="h-12 w-12 mb-3 opacity-30" />
+                  <p className="text-sm font-medium">등록된 품목이 없어요</p>
                 </div>
               ) : (
-                <DataGrid
-                  gridId="subcontractor-right-items"
-                  columns={RIGHT_COLUMNS}
-                  data={priceItems}
-                  loading={priceLoading}
-                  showRowNumber={false}
-                  tableName={MAPPING_TABLE}
-                  emptyMessage="등록된 품목이 없습니다"
-                  onRowDoubleClick={(row) => openEditItem(row)}
-                />
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품번</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품명</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {(() => {
+                      // item_number 기준 그룹화 (순서 유지)
+                      const grouped: { itemNumber: string; rows: any[] }[] = [];
+                      const groupMap = new Map<string, any[]>();
+                      for (const item of priceItems) {
+                        const key = item.item_number || item.item_id || item.id;
+                        if (!groupMap.has(key)) {
+                          const rows: any[] = [];
+                          groupMap.set(key, rows);
+                          grouped.push({ itemNumber: key, rows });
+                        }
+                        groupMap.get(key)!.push(item);
+                      }
+                      return grouped.map((group, gIdx) =>
+                        group.rows.map((item, rowIdx) => (
+                          <TableRow
+                            key={item.id}
+                            className={cn(
+                              "cursor-pointer hover:bg-muted/50",
+                              rowIdx === 0 && gIdx > 0 && "border-t-2 border-t-border/60"
+                            )}
+                            onDoubleClick={() => openEditItem(item)}
+                          >
+                            <TableCell className="text-[13px] text-primary">
+                              {rowIdx === 0 ? item.item_number : ""}
+                            </TableCell>
+                            <TableCell className="text-[13px]">
+                              {rowIdx === 0 ? item.item_name : ""}
+                            </TableCell>
+                            <TableCell className="text-[13px]">{item.subcontractor_item_code || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.subcontractor_item_name || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.base_price_type || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right">{item.base_price ? Number(item.base_price).toLocaleString() : "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.discount_type || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right">{item.discount_value || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right font-semibold">{item.calculated_price ? Number(item.calculated_price).toLocaleString() : "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.currency_code || "-"}</TableCell>
+                          </TableRow>
+                        ))
+                      );
+                    })()}
+                  </TableBody>
+                </Table>
               )}
             </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 모달들 ========== */}
 
       {/* 외주업체 등록/수정 모달 */}
       <Dialog open={subcontractorModalOpen} onOpenChange={setSubcontractorModalOpen}>
-        <DialogContent className="max-w-2xl">
+        <DialogContent className="max-w-[95vw] sm:max-w-[680px] max-h-[85vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>{subcontractorEditMode ? "외주업체 수정" : "외주업체 등록"}</DialogTitle>
-            <DialogDescription>{subcontractorEditMode ? "외주업체 정보를 수정합니다." : "새로운 외주업체를 등록합니다."}</DialogDescription>
+            <DialogDescription>
+              {subcontractorEditMode ? "외주업체 정보를 수정해요." : "새로운 외주업체를 등록해요."}
+            </DialogDescription>
           </DialogHeader>
           <div className="grid grid-cols-2 gap-4 py-4">
             <div className="space-y-1.5">
-              <Label className="text-sm">외주업체 코드</Label>
-              <Input value={subcontractorForm.subcontractor_code || ""} onChange={(e) => setSubcontractorForm((p) => ({ ...p, subcontractor_code: e.target.value }))}
-                placeholder="외주업체 코드" className="h-9" disabled={subcontractorEditMode} />
+              <Label className="text-xs">외주업체 코드</Label>
+              <Input
+                value={subcontractorEditMode ? (subcontractorForm.subcontractor_code || "") : (previewCode || subcontractorForm.subcontractor_code || "")}
+                onChange={(e) => {
+                  if (!subcontractorEditMode && !numberingRuleId) {
+                    setSubcontractorForm((p) => ({ ...p, subcontractor_code: e.target.value }));
+                  }
+                }}
+                placeholder={numberingRuleId && !subcontractorEditMode ? "자동 생성돼요" : "외주업체 코드"}
+                className="h-9 text-sm"
+                readOnly={!!numberingRuleId && !subcontractorEditMode}
+                disabled={subcontractorEditMode}
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">외주업체명 <span className="text-destructive">*</span></Label>
-              <Input value={subcontractorForm.subcontractor_name || ""} onChange={(e) => setSubcontractorForm((p) => ({ ...p, subcontractor_name: e.target.value }))}
-                placeholder="외주업체명" className="h-9" />
+              <Label className="text-xs">외주업체명 <span className="text-destructive">*</span></Label>
+              <Input
+                value={subcontractorForm.subcontractor_name || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, subcontractor_name: e.target.value }))}
+                placeholder="외주업체명"
+                className="h-9 text-sm"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">거래 유형</Label>
+              <Label className="text-xs">거래 유형</Label>
               {renderSelect("division", subcontractorForm.division, (v) => setSubcontractorForm((p) => ({ ...p, division: v })), "거래 유형")}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+              <Label className="text-xs">상태 <span className="text-destructive">*</span></Label>
               {renderSelect("status", subcontractorForm.status, (v) => setSubcontractorForm((p) => ({ ...p, status: v })), "상태")}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">담당자</Label>
-              <Input value={subcontractorForm.contact_person || ""} onChange={(e) => setSubcontractorForm((p) => ({ ...p, contact_person: e.target.value }))}
-                placeholder="담당자" className="h-9" />
+              <Label className="text-xs">담당자</Label>
+              <Input
+                value={subcontractorForm.contact_person || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, contact_person: e.target.value }))}
+                placeholder="담당자"
+                className="h-9 text-sm"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">전화번호</Label>
-              <Input value={subcontractorForm.contact_phone || ""} onChange={(e) => handleFormChange("contact_phone", e.target.value)}
-                placeholder="010-0000-0000" className={cn("h-9", formErrors.contact_phone && "border-destructive")} />
+              <Label className="text-xs">전화번호</Label>
+              <Input
+                value={subcontractorForm.contact_phone || ""}
+                onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                placeholder="010-0000-0000"
+                className={cn("h-9 text-sm", formErrors.contact_phone && "border-destructive")}
+              />
               {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">이메일</Label>
-              <Input value={subcontractorForm.email || ""} onChange={(e) => handleFormChange("email", e.target.value)}
-                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
+              <Label className="text-xs">이메일</Label>
+              <Input
+                value={subcontractorForm.email || ""}
+                onChange={(e) => handleFormChange("email", e.target.value)}
+                placeholder="example@email.com"
+                className={cn("h-9 text-sm", formErrors.email && "border-destructive")}
+              />
               {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">사업자번호</Label>
-              <Input value={subcontractorForm.business_number || ""} onChange={(e) => handleFormChange("business_number", e.target.value)}
-                placeholder="000-00-00000" className={cn("h-9", formErrors.business_number && "border-destructive")} />
+              <Label className="text-xs">사업자번호</Label>
+              <Input
+                value={subcontractorForm.business_number || ""}
+                onChange={(e) => handleFormChange("business_number", e.target.value)}
+                placeholder="000-00-00000"
+                className={cn("h-9 text-sm", formErrors.business_number && "border-destructive")}
+              />
               {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
             </div>
             <div className="space-y-1.5 col-span-2">
-              <Label className="text-sm">주소</Label>
-              <Input value={subcontractorForm.address || ""} onChange={(e) => setSubcontractorForm((p) => ({ ...p, address: e.target.value }))}
-                placeholder="주소" className="h-9" />
+              <Label className="text-xs">주소</Label>
+              <Input
+                value={subcontractorForm.address || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, address: e.target.value }))}
+                placeholder="주소"
+                className="h-9 text-sm"
+              />
             </div>
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setSubcontractorModalOpen(false)}>취소</Button>
             <Button onClick={handleSubcontractorSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+              {saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <Save className="h-4 w-4 mr-1.5" />}
+              저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* 품목 추가 모달 */}
+      {/* 품목 추가 모달 (1단계: 검색/선택) */}
       <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
-        <DialogContent className="max-w-3xl max-h-[70vh]" onInteractOutside={(e) => e.preventDefault()}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[780px] max-h-[85vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>품목 선택</DialogTitle>
-            <DialogDescription>외주업체에 추가할 품목을 선택하세요.</DialogDescription>
+            <DialogDescription>외주업체에 추가할 품목을 선택해요.</DialogDescription>
           </DialogHeader>
-          <div className="flex gap-2 mb-3">
-            <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
-              onChange={(e) => setItemSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && searchItems()}
-              className="h-9 flex-1" />
-            <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
-              {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
-            </Button>
-          </div>
-          <div className="overflow-auto max-h-[350px] border rounded-lg">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">
-                    <input type="checkbox"
-                      checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
-                      onChange={(e) => {
-                        if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
-                        else setItemCheckedIds(new Set());
-                      }} />
-                  </TableHead>
-                  <TableHead className="w-[120px]">품목코드</TableHead>
-                  <TableHead className="min-w-[140px]">품명</TableHead>
-                  <TableHead className="w-[100px]">규격</TableHead>
-                  <TableHead className="w-[100px]">재질</TableHead>
-                  <TableHead className="w-[60px]">단위</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {itemSearchResults.length === 0 ? (
-                  <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
-                ) : itemSearchResults.map((item) => (
-                  <TableRow key={item.id} className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
-                    onClick={() => setItemCheckedIds((prev) => {
-                      const next = new Set(prev);
-                      if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
-                      return next;
-                    })}>
-                    <TableCell className="text-center"><input type="checkbox" checked={itemCheckedIds.has(item.id)} readOnly /></TableCell>
-                    <TableCell className="text-xs max-w-[120px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
-                    <TableCell className="text-sm">{item.item_name}</TableCell>
-                    <TableCell className="text-xs">{item.size}</TableCell>
-                    <TableCell className="text-xs">{item.material}</TableCell>
-                    <TableCell className="text-xs">{item.unit}</TableCell>
+          <div className="space-y-3">
+            <div className="flex gap-2">
+              <Input
+                placeholder="품명/품목코드 검색"
+                value={itemSearchKeyword}
+                onChange={(e) => setItemSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchItems()}
+                className="h-9 flex-1 text-sm"
+              />
+              <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+                {itemSearchLoading
+                  ? <Loader2 className="h-4 w-4 animate-spin" />
+                  : <><Search className="h-4 w-4 mr-1" />조회</>}
+              </Button>
+            </div>
+            <div className="overflow-auto max-h-[350px] rounded-md border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[40px] text-center">
+                      <input
+                        type="checkbox"
+                        checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                        onChange={(e) => {
+                          if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                          else setItemCheckedIds(new Set());
+                        }}
+                        className="h-4 w-4"
+                      />
+                    </TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+                </TableHeader>
+                <TableBody>
+                  {itemSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : itemSearchResults.map((item) => (
+                    <TableRow
+                      key={item.id}
+                      className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                      onClick={() => setItemCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <input type="checkbox" checked={itemCheckedIds.has(item.id)} readOnly className="h-4 w-4" />
+                      </TableCell>
+                      <TableCell className="text-[13px]">{item.item_number}</TableCell>
+                      <TableCell className="text-[13px]">{item.item_name}</TableCell>
+                      <TableCell className="text-[13px]">{item.size}</TableCell>
+                      <TableCell className="text-[13px]">{item.material}</TableCell>
+                      <TableCell className="text-[13px]">{item.unit}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
           </div>
           <DialogFooter>
-            <div className="flex items-center gap-2 w-full justify-between">
+            <div className="flex items-center justify-between w-full">
               <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
               <div className="flex gap-2">
                 <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
                 <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
-                  <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+                  <Plus className="h-4 w-4 mr-1" />
+                  {itemCheckedIds.size}개 다음
                 </Button>
               </div>
             </div>
@@ -977,26 +1200,16 @@ export default function SubcontractorManagementPage() {
       </Dialog>
 
       {/* 품목 상세정보 입력 모달 (2단계) */}
-      <FullscreenDialog
-        open={itemDetailOpen}
-        onOpenChange={setItemDetailOpen}
-        title={`품목 상세정보 ${editItemData ? "수정" : "입력"} — ${selectedSubcontractor?.subcontractor_name || ""}`}
-        description={editItemData ? "외주 품번/품명과 기간별 단가를 수정합니다." : "선택한 품목의 외주 품번/품명과 기간별 단가를 설정합니다."}
-        defaultMaxWidth="max-w-[1100px]"
-        footer={
-          <>
-            <Button variant="outline" onClick={() => {
-              setItemDetailOpen(false);
-              if (!editItemData) setItemSelectOpen(true); // 신규일 때만 품목 선택으로 돌아감
-              setEditItemData(null);
-            }}>{editItemData ? "취소" : "← 이전"}</Button>
-            <Button onClick={handleItemDetailSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 품목 추가 완료
-            </Button>
-          </>
-        }
-      >
-
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedSubcontractor?.subcontractor_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData ? "외주 품번/품명과 기간별 단가를 수정해요" : "선택한 품목의 외주 품번/품명과 기간별 단가를 설정해요"}
+            </DialogDescription>
+          </DialogHeader>
           <div className="space-y-6 py-2">
             {selectedItemsForDetail.map((item, idx) => {
               const itemKey = item.item_number || item.id;
@@ -1007,13 +1220,13 @@ export default function SubcontractorManagementPage() {
                 <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
                   {/* 품목 헤더 */}
                   <div className="px-5 py-3 bg-muted/30 border-b">
-                    <div className="font-bold">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="font-semibold text-sm">{idx + 1}. {item.item_name || itemKey}</div>
                     <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
                   </div>
 
                   <div className="flex gap-4 p-4">
-                    {/* 좌: 외주 품번/품명 (다중) */}
-                    <div className="flex-1 border rounded-lg p-4 bg-blue-50/30 dark:bg-blue-950/10">
+                    {/* 좌: 외주 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/20">
                       <div className="flex items-center justify-between mb-3">
                         <span className="text-sm font-semibold">외주 품번/품명 관리</span>
                         <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
@@ -1022,18 +1235,23 @@ export default function SubcontractorManagementPage() {
                       </div>
                       <div className="space-y-2">
                         {mappingRows.length === 0 ? (
-                          <div className="text-xs text-muted-foreground py-2">입력된 외주 품번이 없습니다</div>
+                          <div className="text-xs text-muted-foreground py-2">입력된 외주 품번이 없어요</div>
                         ) : mappingRows.map((mRow, mIdx) => (
                           <div key={mRow._id} className="flex gap-2 items-center">
                             <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
-                            <Input value={mRow.subcontractor_item_code}
+                            <Input
+                              value={mRow.subcontractor_item_code}
                               onChange={(e) => updateMappingRow(itemKey, mRow._id, "subcontractor_item_code", e.target.value)}
-                              placeholder="외주 품번" className="h-8 text-sm flex-1" />
-                            <Input value={mRow.subcontractor_item_name}
+                              placeholder="외주 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.subcontractor_item_name}
                               onChange={(e) => updateMappingRow(itemKey, mRow._id, "subcontractor_item_name", e.target.value)}
-                              placeholder="외주 품명" className="h-8 text-sm flex-1" />
-                            <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
-                              onClick={() => removeMappingRow(itemKey, mRow._id)}>
+                              placeholder="외주 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0" onClick={() => removeMappingRow(itemKey, mRow._id)}>
                               <X className="h-3 w-3" />
                             </Button>
                           </div>
@@ -1042,39 +1260,41 @@ export default function SubcontractorManagementPage() {
                     </div>
 
                     {/* 우: 기간별 단가 */}
-                    <div className="flex-1 border rounded-lg p-4 bg-amber-50/30 dark:bg-amber-950/10">
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/20">
                       <div className="flex items-center justify-between mb-3">
                         <span className="text-sm font-semibold">기간별 단가 설정</span>
                         <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
                           <Plus className="h-3 w-3 mr-1" /> 단가 추가
                         </Button>
                       </div>
-
                       <div className="space-y-3">
                         {prices.map((price, pIdx) => (
                           <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
                             <div className="flex items-center justify-between">
                               <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
                               {prices.length > 1 && (
-                                <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
-                                  onClick={() => removePriceRow(itemKey, price._id)}>
+                                <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive" onClick={() => removePriceRow(itemKey, price._id)}>
                                   <X className="h-3 w-3" />
                                 </Button>
                               )}
                             </div>
                             {/* 기간 */}
                             <div className="flex gap-2 items-center">
-                              <div className="flex-1">
-                                <FormDatePicker value={price.start_date}
-                                  onChange={(v) => updatePriceRow(itemKey, price._id, "start_date", v)} placeholder="시작일" />
-                              </div>
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
                               <span className="text-xs text-muted-foreground">~</span>
-                              <div className="flex-1">
-                                <FormDatePicker value={price.end_date}
-                                  onChange={(v) => updatePriceRow(itemKey, price._id, "end_date", v)} placeholder="종료일" />
-                              </div>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
                               <div className="w-[80px]">
-                                <Select value={price.currency_code} onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}>
+                                <Select value={price.currency_code || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}>
                                   <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="통화" /></SelectTrigger>
                                   <SelectContent>
                                     {(priceCategoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
@@ -1085,30 +1305,36 @@ export default function SubcontractorManagementPage() {
                             {/* 기준가/할인/반올림 */}
                             <div className="flex gap-2 items-center">
                               <div className="w-[90px]">
-                                <Select value={price.base_price_type} onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준" /></SelectTrigger>
+                                <Select value={price.base_price_type || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
                                   <SelectContent>
                                     {(priceCategoryOptions["base_price_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
                                   </SelectContent>
                                 </Select>
                               </div>
-                              <Input value={price.base_price}
+                              <Input
+                                value={price.base_price}
                                 onChange={(e) => updatePriceRow(itemKey, price._id, "base_price", e.target.value)}
-                                className="h-8 text-xs text-right flex-1" placeholder="기준가" />
+                                className="h-8 text-xs text-right flex-1"
+                                placeholder="기준가"
+                              />
                               <div className="w-[90px]">
-                                <Select value={price.discount_type} onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <Select value={price.discount_type || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인유형" /></SelectTrigger>
                                   <SelectContent>
                                     <SelectItem value="none">할인없음</SelectItem>
                                     {(priceCategoryOptions["discount_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
                                   </SelectContent>
                                 </Select>
                               </div>
-                              <Input value={price.discount_value}
+                              <Input
+                                value={price.discount_value}
                                 onChange={(e) => updatePriceRow(itemKey, price._id, "discount_value", e.target.value)}
-                                className="h-8 text-xs text-right w-[60px]" placeholder="0" />
+                                className="h-8 text-xs text-right w-[60px]"
+                                placeholder="0"
+                              />
                               <div className="w-[90px]">
-                                <Select value={price.rounding_unit_value} onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}>
+                                <Select value={price.rounding_unit_value || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}>
                                   <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
                                   <SelectContent>
                                     {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
@@ -1116,7 +1342,7 @@ export default function SubcontractorManagementPage() {
                                 </Select>
                               </div>
                             </div>
-                            {/* 계산된 단가 표시 */}
+                            {/* 계산 단가 표시 */}
                             <div className="flex items-center justify-end gap-2 pt-1 border-t">
                               <span className="text-xs text-muted-foreground">계산 단가:</span>
                               <span className="font-bold text-sm">{price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}</span>
@@ -1130,8 +1356,24 @@ export default function SubcontractorManagementPage() {
               );
             })}
           </div>
-
-      </FullscreenDialog>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <Save className="h-4 w-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 엑셀 업로드 (멀티테이블) */}
       {excelChainConfig && (
@@ -1144,7 +1386,6 @@ export default function SubcontractorManagementPage() {
           config={excelChainConfig}
           onSuccess={() => {
             fetchSubcontractors();
-            // 우측 새로고침
             const cid = selectedSubcontractorId;
             setSelectedSubcontractorId(null);
             setTimeout(() => setSelectedSubcontractorId(cid), 50);
@@ -1152,12 +1393,15 @@ export default function SubcontractorManagementPage() {
         />
       )}
 
+      {/* 테이블 설정 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={SUBCONTRACTOR_TABLE}
-        settingsId="subcontractor-mng"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        includeAutoColumns={["created_date", "updated_date", "writer"]}
+        onSave={ts.applySettings}
       />
 
       {ConfirmDialogComponent}
diff --git a/frontend/app/(main)/COMPANY_10/production/bom/page.tsx b/frontend/app/(main)/COMPANY_10/production/bom/page.tsx
new file mode 100644
index 00000000..0563f47b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/production/bom/page.tsx
@@ -0,0 +1,2521 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  ChevronRight,
+  ChevronDown,
+  ChevronsDown,
+  ChevronsUp,
+  Plus,
+  Trash2,
+  Search,
+  Loader2,
+  Inbox,
+  Upload,
+  Download,
+  GitBranch,
+  History,
+  CheckCircle2,
+  RotateCcw,
+  X,
+  FileText,
+  Play,
+  Copy,
+  Settings2,
+  Save,
+  Package,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// ─── 상수 ───────────────────────────────────────
+const BOM_TABLE = "bom";
+const BOM_DETAIL_TABLE = "bom_detail";
+
+const BOM_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "bom_type", label: "BOM 유형" },
+  { key: "version", label: "버전" },
+  { key: "effective_date", label: "유효시작일" },
+  { key: "status", label: "상태" },
+];
+
+
+const STATUS_MAP: Record<string, { label: string; className: string }> = {
+  active: { label: "활성", className: "bg-success/10 text-success" },
+  draft: { label: "초안", className: "bg-warning/10 text-warning" },
+  expired: { label: "만료", className: "bg-destructive/10 text-destructive" },
+  inactive: { label: "비활성", className: "bg-muted text-muted-foreground" },
+};
+
+const VERSION_STATUS_MAP: Record<string, { label: string; className: string }> = {
+  active: { label: "사용중", className: "bg-success/10 text-success" },
+  developing: { label: "개발중", className: "bg-warning/10 text-warning" },
+  inactive: { label: "비활성", className: "bg-muted text-muted-foreground" },
+};
+
+const BOM_TYPE_OPTIONS = [
+  { code: "production", label: "생산 BOM" },
+  { code: "design", label: "설계 BOM" },
+  { code: "cost", label: "원가 BOM" },
+];
+
+// ─── 인터페이스 ─────────────────────────────────
+interface BomRow {
+  id: string;
+  item_id?: string;
+  item_code?: string;
+  item_name?: string;
+  bom_type?: string;
+  version?: string;
+  base_qty?: string;
+  unit?: string;
+  status?: string;
+  effective_date?: string;
+  expiry_date?: string;
+  remark?: string;
+  current_version_id?: string;
+  [key: string]: any;
+}
+
+interface BomDetail {
+  id: string;
+  bom_id: string;
+  version_id?: string;
+  parent_detail_id?: string | null;
+  child_item_id?: string;
+  item_number?: string;
+  item_name?: string;
+  item_type?: string;
+  quantity?: string;
+  unit?: string;
+  process_type?: string;
+  loss_rate?: string;
+  remark?: string;
+  level?: string;
+  seq_no?: string;
+  spec?: string;
+  writer?: string;
+  updated_date?: string;
+  [key: string]: any;
+}
+
+interface BomVersion {
+  id: string;
+  bom_id: string;
+  version_name: string;
+  revision?: number;
+  status: string;
+  created_by?: string;
+  created_date?: string;
+  detail_count?: number;
+}
+
+interface BomHistoryEntry {
+  id: string;
+  bom_id: string;
+  revision?: string;
+  version?: string;
+  change_type: string;
+  change_description?: string;
+  changed_by?: string;
+  changed_date?: string;
+}
+
+interface TreeNode extends BomDetail {
+  children: TreeNode[];
+  expanded?: boolean;
+  _isNew?: boolean;        // 신규 노드 (DB에 없음)
+  _isModified?: boolean;   // 수정된 노드
+  _tempId?: string;        // 임시 ID
+  _level?: number;         // flattenTree에서 사용
+  _isVirtualRoot?: boolean; // 가상 루트(BOM 마스터) 노드
+}
+
+// ─── 트리 구성 헬퍼 ─────────────────────────────
+function buildTree(details: BomDetail[]): TreeNode[] {
+  const nodeMap = new Map<string, TreeNode>();
+  const roots: TreeNode[] = [];
+
+  for (const d of details) {
+    nodeMap.set(d.id, { ...d, children: [], expanded: true });
+  }
+
+  for (const d of details) {
+    const node = nodeMap.get(d.id)!;
+    if (d.parent_detail_id && nodeMap.has(d.parent_detail_id)) {
+      nodeMap.get(d.parent_detail_id)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+
+  return roots;
+}
+
+function flattenTree(nodes: TreeNode[], level = 0): (TreeNode & { _level: number })[] {
+  const result: (TreeNode & { _level: number })[] = [];
+  for (const node of nodes) {
+    result.push({ ...node, _level: level });
+    if (node.expanded && node.children.length > 0) {
+      result.push(...flattenTree(node.children, level + 1));
+    }
+  }
+  return result;
+}
+
+// ─── 타입 뱃지 색상 ────────────────────────────
+// BOM 이력 변경 유형 색상
+const CHANGE_TYPE_STYLE: Record<string, string> = {
+  "등록": "bg-primary/10 text-primary ring-primary/20",
+  "수정": "bg-amber-50 text-amber-600 ring-amber-200",
+  "추가": "bg-emerald-50 text-emerald-600 ring-emerald-200",
+  "삭제": "bg-destructive/10 text-destructive ring-red-200",
+  "버전변경": "bg-blue-50 text-blue-600 ring-blue-200",
+  "excel_upload": "bg-blue-50 text-blue-600 ring-blue-200",
+};
+const CHANGE_TYPE_OPTIONS = ["등록", "수정", "추가", "삭제", "버전변경", "기타"];
+
+function getItemTypeBadge(type?: string) {
+  switch (type) {
+    case "원자재":
+    case "raw":
+      return { label: "원자재", className: "bg-success/10 text-success border-success/20" };
+    case "반제품":
+    case "semi":
+      return { label: "반제품", className: "bg-warning/10 text-warning border-warning/20" };
+    case "완제품":
+    case "finished":
+      return { label: "완제품", className: "bg-primary/10 text-primary border-primary/20" };
+    default:
+      return { label: type || "-", className: "bg-muted text-muted-foreground" };
+  }
+}
+
+// ─── 메인 컴포넌트 ──────────────────────────────
+export default function BomManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-bom", BOM_TABLE, BOM_COLUMNS);
+
+  // BOM 목록 상태
+  const [bomList, setBomList] = useState<BomRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [selectedBomId, setSelectedBomId] = useState<string | null>(null);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+
+  // 상세 데이터
+  const [bomHeader, setBomHeader] = useState<BomRow | null>(null);
+  const [bomDetails, setBomDetails] = useState<BomDetail[]>([]);
+  const [treeNodes, setTreeNodes] = useState<TreeNode[]>([]);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  // 트리 토글
+  const [treeDirection, setTreeDirection] = useState<"forward" | "reverse">("forward");
+  const [treeBasis, setTreeBasis] = useState<"material" | "process">("material");
+
+  // 버전 관리
+  const [versions, setVersions] = useState<BomVersion[]>([]);
+  const [currentVersionId, setCurrentVersionId] = useState<string | null>(null);
+  const [versionLoading, setVersionLoading] = useState(false);
+  const [newVersionName, setNewVersionName] = useState("");
+  const [showNewVersionDialog, setShowNewVersionDialog] = useState(false);
+
+  // 이력 관리
+  const [historyList, setHistoryList] = useState<BomHistoryEntry[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [showHistoryDialog, setShowHistoryDialog] = useState(false);
+  const [newHistory, setNewHistory] = useState({ change_type: "", change_description: "" });
+
+  // 등록 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [masterForm, setMasterForm] = useState<Record<string, any>>({
+    item_id: "",
+    item_code: "",
+    item_name: "",
+    bom_type: "",
+    base_qty: "1",
+    unit: "",
+    version: "1.0",
+    status: "draft",
+    effective_date: "",
+    expiry_date: "",
+    remark: "",
+  });
+  const [modalDetailRows, setModalDetailRows] = useState<any[]>([]);
+
+  // 품목 검색 모달
+  const [showItemSearchModal, setShowItemSearchModal] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSearchTarget, setItemSearchTarget] = useState<"master" | "detail">("master");
+
+  // 엑셀 업로드
+  const [showExcelUpload, setShowExcelUpload] = useState(false);
+  const [excelFile, setExcelFile] = useState<File | null>(null);
+  const [excelUploading, setExcelUploading] = useState(false);
+
+  // 우측 탭
+  const [rightTab, setRightTab] = useState<"tree" | "version" | "history">("tree");
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 트리 편집 state
+  const [editingTree, setEditingTree] = useState<TreeNode[]>([]);
+  const [treeHasChanges, setTreeHasChanges] = useState(false);
+
+  // 공정 마스터 목록
+  const [processOptions, setProcessOptions] = useState<{ code: string; label: string }[]>([]);
+  useEffect(() => {
+    apiClient.get("/process-info/processes?useYn=Y").then((res) => {
+      const list = res.data?.data || [];
+      setProcessOptions(list.map((p: any) => ({ code: p.process_code, label: `${p.process_name} (${p.process_code})` })));
+    }).catch(() => {});
+  }, []);
+
+  // 트리뷰 행 선택 / 수정 모달
+  const [selectedTreeNodeId, setSelectedTreeNodeId] = useState<string | null>(null);
+  const [editingNodeId, setEditingNodeId] = useState<string | null>(null);
+  const [treeEditModalOpen, setTreeEditModalOpen] = useState(false);
+  const [treeEditTarget, setTreeEditTarget] = useState<TreeNode | null>(null);
+  const [treeEditForm, setTreeEditForm] = useState<Record<string, any>>({});
+
+  // 역전개 (Where Used)
+  const [treeViewMode, setTreeViewMode] = useState<"forward" | "reverse">("forward");
+  const [whereUsedData, setWhereUsedData] = useState<any[]>([]);
+  const [whereUsedLoading, setWhereUsedLoading] = useState(false);
+  const [originalDetailIds, setOriginalDetailIds] = useState<Set<string>>(new Set());
+  const [addTargetParentId, setAddTargetParentId] = useState<string | null>(null);
+  const [treeItemSearchOpen, setTreeItemSearchOpen] = useState(false);
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+  // ─── 데이터 로드 ──────────────────────────────
+  const fetchBomList = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+
+      const res = await apiClient.post(`/table-management/tables/${BOM_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "created_at", order: "desc" },
+      });
+
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setBomList(rows);
+      setTotalCount(rows.length);
+    } catch (err: any) {
+      toast.error("BOM 목록 조회에 실패했어요");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchBomList();
+  }, [fetchBomList]);
+
+  // 카테고리 옵션 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      try {
+        const columns = ["bom_type", "status"];
+        const detailColumns = ["process_type"];
+        const results: Record<string, { code: string; label: string }[]> = {};
+
+        for (const col of columns) {
+          try {
+            const res = await apiClient.get(`/table-categories/${BOM_TABLE}/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              const flatten = (items: any[]): { code: string; label: string }[] => {
+                const result: { code: string; label: string }[] = [];
+                for (const item of items) {
+                  result.push({ code: item.value || item.code, label: item.label || item.value });
+                  if (item.children?.length) {
+                    result.push(...flatten(item.children));
+                  }
+                }
+                return result;
+              };
+              results[col] = flatten(res.data.data);
+            }
+          } catch {}
+        }
+
+        // bom_detail 테이블의 카테고리
+        for (const col of detailColumns) {
+          try {
+            const res = await apiClient.get(`/table-categories/bom_detail/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              const flatten = (items: any[]): { code: string; label: string }[] => {
+                const result: { code: string; label: string }[] = [];
+                for (const item of items) {
+                  result.push({ code: item.value || item.code, label: item.label || item.value });
+                  if (item.children?.length) result.push(...flatten(item.children));
+                }
+                return result;
+              };
+              results[col] = flatten(res.data.data);
+            }
+          } catch {}
+        }
+
+        // item_info의 division 카테고리
+        try {
+          const res = await apiClient.get(`/table-categories/item_info/division/values`);
+          if (res.data?.data?.length > 0) {
+            const flatten = (items: any[]): { code: string; label: string }[] => {
+              const result: { code: string; label: string }[] = [];
+              for (const item of items) {
+                result.push({ code: item.valueCode || item.value || item.code, label: item.valueLabel || item.label || item.value });
+                if (item.children?.length) result.push(...flatten(item.children));
+              }
+              return result;
+            };
+            results["division"] = flatten(res.data.data);
+          }
+        } catch {}
+
+        setCategoryOptions(results);
+      } catch {}
+    };
+    loadCategories();
+  }, []);
+
+  // ─── BOM 상세 로드 ────────────────────────────
+  const fetchBomDetail = useCallback(async (bomId: string) => {
+    setDetailLoading(true);
+    try {
+      // 헤더 조회
+      const headerRes = await apiClient.get(`/bom/${bomId}/header`);
+      const header = headerRes.data?.data || headerRes.data;
+      setBomHeader(header);
+      setCurrentVersionId(header?.current_version_id || null);
+
+      // 디테일 조회 (현재 버전)
+      const versionId = header?.current_version_id;
+      const detailFilters: any[] = [{ columnName: "bom_id", operator: "equals", value: bomId }];
+      if (versionId) {
+        detailFilters.push({ columnName: "version_id", operator: "equals", value: versionId });
+      }
+
+      const detailRes = await apiClient.post(`/table-management/tables/${BOM_DETAIL_TABLE}/data`, {
+        page: 1,
+        size: 1000,
+        dataFilter: { enabled: true, filters: detailFilters },
+        sort: { columnName: "parent_detail_id", order: "asc" },
+      });
+
+      let details = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+
+      // item_info 조인을 위해 child_item_id 수집
+      const itemIds = [...new Set(details.map((d: any) => d.child_item_id).filter(Boolean))];
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1,
+            size: 1000,
+            dataFilter: {
+              enabled: true,
+              filters: [{ columnName: "id", operator: "in", value: itemIds }],
+            },
+          });
+          const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+          const itemMap = new Map(items.map((i: any) => [i.id, i]));
+
+          details = details.map((d: any) => {
+            const item = itemMap.get(d.child_item_id) as any;
+            const divisionRaw = item?.division || "";
+            // 카테고리 코드 → 라벨 변환 (쉼표 구분 다중값 지원)
+            const divisionLabel = divisionRaw.split(",").map((code: string) => {
+              const c = code.trim();
+              return categoryOptions["division"]?.find((o) => o.code === c)?.label || c;
+            }).filter((v: string) => v && v !== "s").join(", ");
+            return {
+              ...d,
+              item_number: item?.item_number || "",
+              item_name: item?.item_name || "",
+              item_type: divisionLabel,
+              unit: d.unit || item?.unit || "",
+              spec: item?.size || item?.spec || "",
+              writer: d.writer || "",
+              updated_date: d.updated_at || d.updated_date || "",
+            };
+          });
+        } catch {}
+      }
+
+      setBomDetails(details);
+      const tree = buildTree(details);
+      setTreeNodes(tree);
+
+      // 편집용 트리 동기화
+      setEditingTree(buildTree(details));
+      setOriginalDetailIds(new Set(details.map((d: any) => d.id)));
+      setTreeHasChanges(false);
+      // 기본 전개: 모든 노드 + 가상 루트 펼침
+      const allIds = new Set<string>();
+      if (header?.id) allIds.add(`__root_${header.id}`);
+      const collectIds = (nodes: TreeNode[]) => {
+        for (const n of nodes) {
+          allIds.add(n.id || "");
+          if (n.children.length > 0) collectIds(n.children);
+        }
+      };
+      collectIds(tree);
+      setExpandedNodes(allIds);
+    } catch (err: any) {
+      toast.error("BOM 상세 조회에 실패했어요");
+    } finally {
+      setDetailLoading(false);
+    }
+  }, [categoryOptions]);
+
+  // 버전 목록 로드
+  const fetchVersions = useCallback(async (bomId: string) => {
+    setVersionLoading(true);
+    try {
+      const res = await apiClient.get(`/bom/${bomId}/versions`);
+      const resData = res.data;
+      setVersions(resData?.data || []);
+      setCurrentVersionId(resData?.currentVersionId || null);
+    } catch (err: any) {
+      toast.error("버전 목록 조회에 실패했어요");
+    } finally {
+      setVersionLoading(false);
+    }
+  }, []);
+
+  // 이력 목록 로드
+  const fetchHistory = useCallback(async (bomId: string) => {
+    setHistoryLoading(true);
+    try {
+      const res = await apiClient.get(`/bom/${bomId}/history`);
+      setHistoryList(res.data?.data || []);
+    } catch (err: any) {
+      toast.error("이력 조회에 실패했어요");
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, []);
+
+  // BOM 선택 시 상세 로드
+  useEffect(() => {
+    if (selectedBomId) {
+      fetchBomDetail(selectedBomId);
+      if (rightTab === "version") fetchVersions(selectedBomId);
+      if (rightTab === "history") fetchHistory(selectedBomId);
+    } else {
+      setBomHeader(null);
+      setBomDetails([]);
+      setTreeNodes([]);
+      setEditingTree([]);
+      setTreeHasChanges(false);
+      setOriginalDetailIds(new Set());
+      setExpandedNodes(new Set());
+      setVersions([]);
+      setHistoryList([]);
+    }
+  }, [selectedBomId, fetchBomDetail, fetchVersions, fetchHistory, rightTab]);
+
+  // ─── 트리 토글 핸들러 ─────────────────────────
+  const toggleTreeNode = useCallback((nodeId: string) => {
+    const toggle = (nodes: TreeNode[]): TreeNode[] =>
+      nodes.map((n) =>
+        n.id === nodeId
+          ? { ...n, expanded: !n.expanded }
+          : { ...n, children: toggle(n.children) }
+      );
+    setTreeNodes((prev) => toggle(prev));
+  }, []);
+
+  const flatTree = useMemo(() => flattenTree(treeNodes), [treeNodes]);
+
+  // ─── 트리 편집 헬퍼 ──────────────────────────
+
+  // 트리 노드 토글 (펼침/접음)
+  const toggleEditTreeNode = useCallback((nodeId: string) => {
+    setExpandedNodes((prev) => {
+      const next = new Set(prev);
+      if (next.has(nodeId)) next.delete(nodeId);
+      else next.add(nodeId);
+      return next;
+    });
+  }, []);
+
+  // 전체 펼침
+  const expandAll = useCallback(() => {
+    const allIds = new Set<string>();
+    if (bomHeader?.id) allIds.add(`__root_${bomHeader.id}`);
+    const collect = (nodes: TreeNode[]) => {
+      for (const n of nodes) {
+        allIds.add(n.id || n._tempId || "");
+        if (n.children.length > 0) collect(n.children);
+      }
+    };
+    collect(editingTree);
+    setExpandedNodes(allIds);
+  }, [editingTree, bomHeader]);
+
+  // 역전개 (Where Used) 조회 — 현재 BOM 품목이 어디에 사용되는지
+  const fetchWhereUsed = useCallback(async () => {
+    if (!bomHeader?.item_code && !bomHeader?.item_id) return;
+    setWhereUsedLoading(true);
+    try {
+      // bom_detail에서 child_item_id가 현재 품목인 행 조회
+      const itemId = bomHeader.item_id || bomHeader.id;
+      const res = await apiClient.post(`/table-management/tables/bom_detail/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "child_item_id", operator: "equals", value: itemId }] },
+        autoFilter: true,
+      });
+      const details = res.data?.data?.data || res.data?.data?.rows || [];
+
+      // 각 bom_id로 BOM 마스터 정보 조회
+      const bomIds = [...new Set(details.map((d: any) => d.bom_id).filter(Boolean))];
+      const results: any[] = [];
+      for (const bomId of bomIds) {
+        try {
+          const bomRes = await apiClient.post(`/table-management/tables/bom/data`, {
+            page: 1, size: 1,
+            dataFilter: { enabled: true, filters: [{ columnName: "id", operator: "equals", value: bomId }] },
+            autoFilter: true,
+          });
+          const bom = (bomRes.data?.data?.data || bomRes.data?.data?.rows || [])[0];
+          if (bom) {
+            const detail = details.find((d: any) => d.bom_id === bomId);
+            results.push({
+              bom_id: bomId,
+              item_code: bom.item_code || bom.item_number || "",
+              item_name: bom.item_name || "",
+              quantity: detail?.quantity || "1",
+              unit: detail?.unit || "",
+              process_type: detail?.process_type || "",
+            });
+          }
+        } catch {}
+      }
+      setWhereUsedData(results);
+    } catch {
+      setWhereUsedData([]);
+    } finally {
+      setWhereUsedLoading(false);
+    }
+  }, [bomHeader]);
+
+  // 전체 접음
+  const collapseAll = useCallback(() => {
+    // 루트는 항상 펼침 유지, 나머지만 접음
+    const rootOnly = new Set<string>();
+    if (bomHeader?.id) rootOnly.add(`__root_${bomHeader.id}`);
+    setExpandedNodes(rootOnly);
+  }, [bomHeader]);
+
+  // 편집 트리 평탄화 (useMemo) — 가상 루트(BOM 마스터) 포함
+  const editingFlatTree = useMemo(() => {
+    const result: TreeNode[] = [];
+    // 가상 루트 (BOM 마스터)
+    if (bomHeader) {
+      const rootId = `__root_${bomHeader.id}`;
+      result.push({
+        id: rootId,
+        bom_id: bomHeader.id,
+        _tempId: undefined,
+        _isNew: false,
+        _isModified: false,
+        _level: 0,
+        _isVirtualRoot: true,
+        item_number: bomHeader.item_code || bomHeader.item_number || "",
+        item_name: bomHeader.item_name || "",
+        quantity: bomHeader.base_qty || "1",
+        unit: bomHeader.unit || "",
+        process_type: "",
+        loss_rate: "",
+        remark: bomHeader.remark || "",
+        spec: "",
+        writer: "",
+        updated_date: "",
+        item_type: "",
+        children: editingTree,
+      } as any);
+    }
+    // 하위 노드 평탄화 (레벨 +1)
+    const flatten = (nodes: TreeNode[], level: number) => {
+      for (const node of nodes) {
+        const nodeKey = node.id || node._tempId || "";
+        result.push({ ...node, _level: level });
+        if (node.children.length > 0 && expandedNodes.has(nodeKey)) {
+          flatten(node.children, level + 1);
+        }
+      }
+    };
+    const rootId = bomHeader ? `__root_${bomHeader.id}` : "";
+    if (!bomHeader || expandedNodes.has(rootId)) {
+      flatten(editingTree, bomHeader ? 1 : 0);
+    }
+    return result;
+  }, [editingTree, expandedNodes, bomHeader]);
+
+  // 트리에서 노드를 찾아서 업데이트
+  const updateTreeNode = (tree: TreeNode[], nodeId: string, updater: (node: TreeNode) => TreeNode): TreeNode[] => {
+    return tree.map(node => {
+      if ((node.id || node._tempId) === nodeId) return updater(node);
+      if (node.children.length > 0) return { ...node, children: updateTreeNode(node.children, nodeId, updater) };
+      return node;
+    });
+  };
+
+  // 트리에서 노드 삭제 (하위 포함)
+  const removeTreeNode = (tree: TreeNode[], nodeId: string): TreeNode[] => {
+    return tree.filter(node => {
+      if ((node.id || node._tempId) === nodeId) return false;
+      if (node.children.length > 0) node.children = removeTreeNode(node.children, nodeId);
+      return true;
+    });
+  };
+
+  // 트리에 자식 노드 추가
+  const addChildToNode = (tree: TreeNode[], parentId: string | null, newNode: TreeNode): TreeNode[] => {
+    if (parentId === null) return [...tree, newNode];
+    return tree.map(node => {
+      const nodeKey = node.id || node._tempId;
+      if (nodeKey === parentId) {
+        return { ...node, children: [...node.children, newNode], expanded: true };
+      }
+      if (node.children.length > 0) return { ...node, children: addChildToNode(node.children, parentId, newNode) };
+      return node;
+    });
+  };
+
+  // 노드 찾기 헬퍼
+  const findNodeById = (nodes: TreeNode[], id: string): TreeNode | null => {
+    for (const node of nodes) {
+      if ((node.id || node._tempId) === id) return node;
+      const found = findNodeById(node.children, id);
+      if (found) return found;
+    }
+    return null;
+  };
+
+  // 인라인 필드 변경
+  const handleTreeFieldChange = (nodeId: string, field: string, value: string) => {
+    setEditingTree(prev => updateTreeNode(prev, nodeId, node => ({
+      ...node, [field]: value, _isModified: !node._isNew ? true : node._isModified,
+    })));
+    setTreeHasChanges(true);
+  };
+
+  // 노드 삭제
+  const handleTreeDeleteNode = async (nodeId: string) => {
+    if (!await confirm("이 품목과 하위 품목을 삭제할까요?", { variant: "destructive" })) return;
+    setEditingTree(prev => removeTreeNode(prev, nodeId));
+    setTreeHasChanges(true);
+  };
+
+  // 하위 품목 추가 시작
+  const handleTreeAddChild = (parentId: string | null) => {
+    setAddTargetParentId(parentId);
+    setTreeItemSearchOpen(true);
+    searchItems("");
+  };
+
+  // 트리 품목 선택 완료 (트리에 추가)
+  const handleTreeItemSelect = (item: any) => {
+    // 1. 자기 자신 추가 방지 (BOM 마스터 품목과 동일한 품목)
+    if (bomHeader && (item.id === bomHeader.item_id || item.item_number === bomHeader.item_code)) {
+      toast.error("자기 자신을 BOM에 추가할 수 없습니다");
+      return;
+    }
+
+    // 2. 같은 경로에 동일 품목 중복 방지 (조상 노드에 같은 품목이 있으면 순환)
+    const getAncestorItemIds = (tree: TreeNode[], targetId: string | null): Set<string> => {
+      const ids = new Set<string>();
+      if (!targetId) return ids;
+      const collectPath = (nodes: TreeNode[], path: TreeNode[]): boolean => {
+        for (const n of nodes) {
+          const nk = n.id || n._tempId || "";
+          if (nk === targetId) {
+            path.forEach(p => { if (p.child_item_id) ids.add(p.child_item_id); });
+            if (n.child_item_id) ids.add(n.child_item_id);
+            return true;
+          }
+          if (n.children.length > 0 && collectPath(n.children, [...path, n])) return true;
+        }
+        return false;
+      };
+      collectPath(tree, []);
+      return ids;
+    };
+    const ancestorIds = getAncestorItemIds(editingTree, addTargetParentId);
+    if (ancestorIds.has(item.id)) {
+      toast.error("상위 경로에 이미 동일 품목이 있어 순환 참조가 발생합니다");
+      return;
+    }
+
+    const tempId = `temp_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+    const parentNode = addTargetParentId ? findNodeById(editingTree, addTargetParentId) : null;
+    const newLevel = parentNode ? ((parentNode._level ?? parentNode.level ?? 0) as number) + 1 : 0;
+
+    const newNode: TreeNode = {
+      id: "",
+      _tempId: tempId,
+      _isNew: true,
+      bom_id: selectedBomId || "",
+      parent_detail_id: addTargetParentId,
+      child_item_id: item.id,
+      item_number: item.item_number || "",
+      item_name: item.item_name || "",
+      item_type: item.division || "",
+      level: String(newLevel),
+      quantity: "1",
+      unit: item.unit || "",
+      process_type: "",
+      loss_rate: "0",
+      remark: "",
+      children: [],
+      expanded: true,
+    };
+
+    setEditingTree(prev => addChildToNode(prev, addTargetParentId, newNode));
+    setExpandedNodes(prev => {
+      const next = new Set(prev);
+      next.add(tempId);
+      if (addTargetParentId) next.add(addTargetParentId);
+      return next;
+    });
+    setTreeHasChanges(true);
+    setTreeItemSearchOpen(false);
+  };
+
+  // ─── 트리 저장 ────────────────────────────────
+  const handleSaveTree = async () => {
+    if (!selectedBomId || !treeHasChanges) return;
+
+    setSaving(true);
+    try {
+      // 1. version_id 확보
+      let versionId = currentVersionId;
+      if (!versionId) {
+        const initRes = await apiClient.post(`/bom/${selectedBomId}/initialize-version`, {});
+        versionId = initRes.data?.data?.versionId;
+      }
+
+      // 2. 트리 평탄화
+      const flatNodes: any[] = [];
+      const flattenForSave = (nodes: TreeNode[], parentId: string | null, level: number) => {
+        nodes.forEach((node, idx) => {
+          const nodeKey = node.id || node._tempId || "";
+          flatNodes.push({
+            ...node,
+            _nodeKey: nodeKey,
+            parent_detail_id: parentId,
+            level: String(level),
+            seq_no: String(idx + 1),
+            bom_id: selectedBomId,
+            version_id: versionId,
+          });
+          if (node.children.length > 0) flattenForSave(node.children, nodeKey, level + 1);
+        });
+      };
+      flattenForSave(editingTree, null, 0);
+
+      // 3. 분류: INSERT / UPDATE / DELETE
+      const currentIds = new Set(flatNodes.filter(n => n.id && !n._isNew).map(n => n.id));
+      const toDelete = [...originalDetailIds].filter(id => !currentIds.has(id));
+      const toInsert = flatNodes.filter(n => n._isNew);
+      const toUpdate = flatNodes.filter(n => n.id && !n._isNew && n._isModified);
+
+      // 4. DELETE
+      if (toDelete.length > 0) {
+        await apiClient.delete(`/table-management/tables/bom_detail/delete`, {
+          data: toDelete.map(id => ({ id })),
+        });
+      }
+
+      // 5. INSERT (순서 중요: 부모 먼저)
+      const tempToRealId: Record<string, string> = {};
+      for (const node of toInsert) {
+        let parentId = node.parent_detail_id;
+        if (parentId && tempToRealId[parentId]) parentId = tempToRealId[parentId];
+
+        const newId = crypto.randomUUID();
+        const res = await apiClient.post(`/table-management/tables/bom_detail/add`, {
+          id: newId,
+          bom_id: selectedBomId,
+          version_id: versionId,
+          parent_detail_id: parentId && !parentId.startsWith("temp_") ? parentId : null,
+          child_item_id: node.child_item_id,
+          level: node.level,
+          seq_no: node.seq_no,
+          quantity: node.quantity || "1",
+          unit: node.unit || "",
+          process_type: node.process_type || "",
+          loss_rate: node.loss_rate || "0",
+          remark: node.remark || "",
+          writer: user?.userId || "",
+          company_code: user?.company_code || "",
+        });
+
+        const realId = res.data?.data?.id || newId;
+        if (node._tempId) tempToRealId[node._tempId] = realId;
+      }
+
+      // 6. INSERT된 노드의 자식들 parent_detail_id 업데이트
+      for (const node of toInsert) {
+        if (!node._tempId) continue;
+        const childNodes = flatNodes.filter(n => n.parent_detail_id === node._tempId);
+        for (const child of childNodes) {
+          if (child.id && !child._isNew && tempToRealId[node._tempId]) {
+            await apiClient.put(`/table-management/tables/bom_detail/edit`, {
+              originalData: { id: child.id },
+              updatedData: { parent_detail_id: tempToRealId[node._tempId] },
+            });
+          }
+        }
+      }
+
+      // 7. UPDATE
+      for (const node of toUpdate) {
+        let parentId = node.parent_detail_id;
+        if (parentId && tempToRealId[parentId]) parentId = tempToRealId[parentId];
+
+        await apiClient.put(`/table-management/tables/bom_detail/edit`, {
+          originalData: { id: node.id },
+          updatedData: {
+            bom_id: selectedBomId,
+            version_id: versionId,
+            quantity: node.quantity,
+            unit: node.unit,
+            process_type: node.process_type,
+            loss_rate: node.loss_rate,
+            remark: node.remark,
+            level: node.level,
+            seq_no: node.seq_no,
+            parent_detail_id: parentId,
+          },
+        });
+      }
+
+      // 이력 자동 기록 (변경 내용 상세)
+      const historyParts: string[] = [];
+      // 추가된 품목
+      for (const n of toInsert) {
+        historyParts.push(`${n.item_number || "품목"} 추가 (소요량: ${n.quantity || 1})`);
+      }
+      // 수정된 품목 (변경 전후 비교)
+      for (const n of toUpdate) {
+        const orig = bomDetails.find((d: any) => d.id === n.id);
+        if (orig) {
+          const changes: string[] = [];
+          if (String(orig.quantity || "") !== String(n.quantity || "")) changes.push(`소요량 ${orig.quantity || "-"} → ${n.quantity || "-"}`);
+          if (String(orig.process_type || "") !== String(n.process_type || "")) changes.push(`공정 변경`);
+          if (String(orig.loss_rate || "") !== String(n.loss_rate || "")) changes.push(`손실율 ${orig.loss_rate || "0"} → ${n.loss_rate || "0"}`);
+          if (String(orig.remark || "") !== String(n.remark || "")) changes.push(`비고 변경`);
+          if (changes.length > 0) historyParts.push(`${n.item_number || "품목"}: ${changes.join(", ")}`);
+        }
+      }
+      // 삭제된 품목
+      for (const id of toDelete) {
+        const orig = bomDetails.find((d: any) => d.id === id);
+        historyParts.push(`${orig?.item_number || "품목"} 삭제`);
+      }
+      if (historyParts.length > 0) {
+        apiClient.post(`/bom/${selectedBomId}/history`, {
+          change_type: historyParts.some(p => p.includes("추가")) ? "추가" : historyParts.some(p => p.includes("삭제")) ? "삭제" : "수정",
+          change_description: historyParts.join("; "),
+        }).catch(() => {});
+      }
+
+      toast.success("BOM 트리가 저장되었어요");
+      setTreeHasChanges(false);
+      fetchBomDetail(selectedBomId);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "트리 저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ─── BOM 삭제 ────────────────────────────────
+  const handleDeleteBom = async () => {
+    if (checkedIds.length === 0) {
+      toast.error("삭제할 BOM을 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`선택한 ${checkedIds.length}건의 BOM을 삭제할까요?`);
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${BOM_TABLE}/delete`, {
+        data: checkedIds.map((id) => ({ id })),
+      });
+      toast.success("BOM이 삭제되었어요");
+      setCheckedIds([]);
+      setSelectedBomId(null);
+      fetchBomList();
+    } catch {
+      toast.error("BOM 삭제에 실패했어요");
+    }
+  };
+
+  // ─── BOM 등록/수정 ───────────────────────────
+  const openCreateModal = () => {
+    setIsEditMode(false);
+    setMasterForm({
+      item_id: "",
+      item_code: "",
+      item_name: "",
+      bom_type: "",
+      base_qty: "1",
+      unit: "",
+      version: "1.0",
+      status: "draft",
+      effective_date: "",
+      expiry_date: "",
+      remark: "",
+    });
+    setModalDetailRows([]);
+    setIsModalOpen(true);
+  };
+
+  const openEditModal = () => {
+    if (!bomHeader) return;
+    setIsEditMode(true);
+    setMasterForm({
+      id: bomHeader.id,
+      item_id: bomHeader.item_id || "",
+      item_code: bomHeader.item_code || bomHeader.item_number || "",
+      item_name: bomHeader.item_name || "",
+      bom_type: bomHeader.bom_type || "",
+      base_qty: bomHeader.base_qty || "1",
+      unit: bomHeader.unit || "",
+      version: bomHeader.version || "1.0",
+      status: bomHeader.status || "draft",
+      effective_date: bomHeader.effective_date || "",
+      expiry_date: bomHeader.expiry_date || "",
+      remark: bomHeader.remark || "",
+    });
+
+    setModalDetailRows(
+      bomDetails.map((d, i) => ({
+        _idx: i,
+        child_item_id: d.child_item_id || "",
+        item_number: d.item_number || "",
+        item_name: d.item_name || "",
+        quantity: d.quantity || "1",
+        unit: d.unit || "",
+        process_type: d.process_type || "",
+        loss_rate: d.loss_rate || "0",
+        remark: d.remark || "",
+      }))
+    );
+    setIsModalOpen(true);
+  };
+
+  const handleSaveBom = async () => {
+    if (!masterForm.item_id) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+    if (!masterForm.bom_type) {
+      toast.error("BOM 유형을 선택해주세요");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const bomFields: Record<string, any> = {
+        item_id: masterForm.item_id,
+        item_code: masterForm.item_code,
+        item_name: masterForm.item_name,
+        bom_type: masterForm.bom_type,
+        base_qty: masterForm.base_qty || "1",
+        unit: masterForm.unit || "",
+        version: masterForm.version || "1.0",
+        status: masterForm.status || "draft",
+        effective_date: masterForm.effective_date || null,
+        expiry_date: masterForm.expiry_date || null,
+        remark: masterForm.remark || "",
+        writer: user?.userId || "",
+        company_code: user?.company_code || "",
+      };
+
+      let bomId: string;
+
+      if (isEditMode && masterForm.id) {
+        await apiClient.put(`/table-management/tables/${BOM_TABLE}/edit`, {
+          originalData: { id: masterForm.id },
+          updatedData: bomFields,
+        });
+        bomId = masterForm.id;
+      } else {
+        const res = await apiClient.post(`/table-management/tables/${BOM_TABLE}/add`, { id: crypto.randomUUID(), ...bomFields });
+        bomId = res.data?.data?.id || res.data?.id;
+      }
+
+      // 초기 버전 생성 (신규 BOM)
+      if (!isEditMode && bomId) {
+        try {
+          await apiClient.post(`/bom/${bomId}/initialize-version`, {});
+        } catch {}
+      }
+
+      // 디테일 저장: 기존 삭제 후 재등록
+      if (isEditMode && masterForm.id) {
+        const existingDetails = bomDetails.filter((d) => d.bom_id === bomId);
+        if (existingDetails.length > 0) {
+          await apiClient.delete(`/table-management/tables/${BOM_DETAIL_TABLE}/delete`, {
+            data: existingDetails.map((d) => ({ id: d.id })),
+          });
+        }
+      }
+
+      // 현재 버전 ID 가져오기
+      let versionId = currentVersionId;
+      if (!versionId && bomId) {
+        try {
+          const verRes = await apiClient.get(`/bom/${bomId}/versions`);
+          const verData = verRes.data?.data || verRes.data;
+          versionId = verData?.currentVersionId || null;
+        } catch {}
+      }
+
+      for (let i = 0; i < modalDetailRows.length; i++) {
+        const row = modalDetailRows[i];
+        if (!row.child_item_id) continue;
+        await apiClient.post(`/table-management/tables/${BOM_DETAIL_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          bom_id: bomId,
+          version_id: versionId || null,
+          parent_detail_id: null,
+          child_item_id: row.child_item_id,
+          quantity: row.quantity || "1",
+          unit: row.unit || "",
+          process_type: row.process_type || "",
+          loss_rate: row.loss_rate || "0",
+          remark: row.remark || "",
+          level: "0",
+          seq_no: String(i + 1),
+          writer: user?.userId || "",
+          company_code: user?.company_code || "",
+        });
+      }
+
+      toast.success(isEditMode ? "BOM이 수정되었어요" : "BOM이 등록되었어요");
+      setIsModalOpen(false);
+      fetchBomList();
+      if (bomId) {
+        setSelectedBomId(bomId);
+        fetchBomDetail(bomId);
+        fetchVersions(bomId);
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "BOM 저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ─── 품목 검색 ───────────────────────────────
+  const searchItems = async (keyword?: string) => {
+    const kw = (keyword ?? itemSearchKeyword).trim();
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (kw) {
+        filters.push({ columnName: "item_name", operator: "contains", value: kw });
+      }
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1,
+        size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      let rows = res.data?.data?.data || res.data?.data?.rows || [];
+
+      // 키워드가 있고 품명으로 못 찾으면 품목코드로 재시도
+      if (kw && rows.length === 0) {
+        const res2 = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 50,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "contains", value: kw }] },
+          autoFilter: true,
+        });
+        rows = res2.data?.data?.data || res2.data?.data?.rows || [];
+      }
+      setItemSearchResults(rows);
+    } catch {
+      toast.error("품목 검색에 실패했어요");
+    } finally {
+      setItemSearchLoading(false);
+    }
+  };
+
+  const selectItem = (item: any) => {
+    if (itemSearchTarget === "master") {
+      setMasterForm((prev) => ({
+        ...prev,
+        item_id: item.id,
+        item_code: item.item_number || "",
+        item_name: item.item_name || "",
+        unit: item.unit || prev.unit,
+      }));
+      setShowItemSearchModal(false);
+    } else {
+      setModalDetailRows((prev) => [
+        ...prev,
+        {
+          _idx: prev.length,
+          child_item_id: item.id,
+          item_number: item.item_number || "",
+          item_name: item.item_name || "",
+          quantity: "1",
+          unit: item.unit || "",
+          process_type: "",
+          loss_rate: "0",
+          remark: "",
+        },
+      ]);
+      setShowItemSearchModal(false);
+    }
+    setItemSearchKeyword("");
+    setItemSearchResults([]);
+  };
+
+  // ─── 버전 관리 ───────────────────────────────
+  const handleCreateVersion = async () => {
+    if (!selectedBomId) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions`, {
+        versionName: newVersionName.trim() || undefined,
+      });
+      apiClient.post(`/bom/${selectedBomId}/history`, { change_type: "버전변경", change_description: `새 버전 생성: ${newVersionName.trim() || "자동"}` }).catch(() => {});
+      toast.success("새 버전이 생성되었어요");
+      setShowNewVersionDialog(false);
+      setNewVersionName("");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 생성에 실패했어요");
+    }
+  };
+
+  const handleLoadVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions/${versionId}/load`);
+      toast.success("버전을 불러왔어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 불러오기에 실패했어요");
+    }
+  };
+
+  const handleActivateVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    const ok = await confirm("이 버전을 사용 확정할까요? 기존 활성 버전은 비활성 처리돼요.");
+    if (!ok) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions/${versionId}/activate`);
+      apiClient.post(`/bom/${selectedBomId}/history`, { change_type: "버전변경", change_description: `버전 사용 확정` }).catch(() => {});
+      toast.success("버전이 사용 확정되었어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 확정에 실패했어요");
+    }
+  };
+
+  const handleDeleteVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    const ok = await confirm("이 버전을 삭제할까요? 관련 디테일 데이터도 함께 삭제돼요.");
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/bom/${selectedBomId}/versions/${versionId}`);
+      toast.success("버전이 삭제되었어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 이력 관리 ───────────────────────────────
+  const handleAddHistory = async () => {
+    if (!selectedBomId) return;
+    if (!newHistory.change_type) {
+      toast.error("변경 유형을 입력해주세요");
+      return;
+    }
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/history`, {
+        change_type: newHistory.change_type,
+        change_description: newHistory.change_description,
+        changed_by: user?.userId || "",
+      });
+      toast.success("이력이 추가되었어요");
+      setShowHistoryDialog(false);
+      setNewHistory({ change_type: "", change_description: "" });
+      fetchHistory(selectedBomId);
+    } catch (err: any) {
+      toast.error("이력 추가에 실패했어요");
+    }
+  };
+
+  // ─── 엑셀 업로드 ────────────────────────────
+  const handleExcelUpload = async () => {
+    if (!excelFile) {
+      toast.error("엑셀 파일을 선택해주세요");
+      return;
+    }
+    setExcelUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", excelFile);
+
+      const endpoint = selectedBomId
+        ? `/bom/${selectedBomId}/excel-upload-version`
+        : `/bom/excel-upload`;
+
+      const res = await apiClient.post(endpoint, formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+
+      const result = res.data?.data || res.data;
+      if (result?.success) {
+        toast.success(`엑셀 업로드 완료 (${result.insertedCount}건 등록)`);
+        setShowExcelUpload(false);
+        setExcelFile(null);
+        fetchBomList();
+        if (result.createdBomId) {
+          setSelectedBomId(result.createdBomId);
+        }
+      } else {
+        toast.error(result?.errors?.join("\n") || "엑셀 업로드에 실패했어요");
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "엑셀 업로드에 실패했어요");
+    } finally {
+      setExcelUploading(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (!selectedBomId) {
+      toast.error("BOM을 선택해주세요");
+      return;
+    }
+    try {
+      const res = await apiClient.get(`/bom/${selectedBomId}/excel-download`);
+      const data = res.data?.data || [];
+      if (data.length === 0) {
+        toast.error("다운로드할 데이터가 없어요");
+        return;
+      }
+      exportToExcel(data, `BOM_${bomHeader?.item_code || selectedBomId}`);
+      toast.success("엑셀 다운로드를 시작했어요");
+    } catch {
+      toast.error("엑셀 다운로드에 실패했어요");
+    }
+  };
+
+  // ─── 상태 뱃지 렌더 ───────────────────────────
+  const renderStatusBadge = (status?: string) => {
+    const info = STATUS_MAP[status || ""] || { label: status || "-", className: "bg-muted text-muted-foreground" };
+    return (
+      <span className={cn("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium", info.className)}>
+        <span className="w-1.5 h-1.5 rounded-full bg-current" />
+        {info.label}
+      </span>
+    );
+  };
+
+  // ─── 렌더링 ──────────────────────────────────
+  return (
+    <div className="flex flex-col h-full">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 px-5 py-3 text-xs text-muted-foreground bg-muted/50 border-b shrink-0">
+        <span>생산관리</span>
+        <ChevronRight className="w-3.5 h-3.5 text-muted-foreground/50" />
+        <span className="font-semibold text-foreground">BOM 관리</span>
+      </nav>
+
+      {/* 검색 필터 */}
+      <div className="px-4 py-2.5 border-b bg-muted/50 shrink-0">
+        <DynamicSearchFilter
+          tableName={BOM_TABLE}
+          filterId="c16-bom"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={totalCount}
+          extraActions={
+            <div className="flex items-center gap-2">
+              <Button size="sm" variant="outline" className="h-8 text-xs" onClick={() => setShowExcelUpload(true)}>
+                <Upload className="w-3.5 h-3.5 mr-1.5" />
+                엑셀 업로드
+              </Button>
+              <Button size="sm" variant="outline" className="h-8 text-xs" onClick={handleExcelDownload} disabled={!selectedBomId}>
+                <Download className="w-3.5 h-3.5 mr-1.5" />
+                엑셀 다운로드
+              </Button>
+            </div>
+          }
+        />
+      </div>
+
+      {/* 메인 콘텐츠: 좌우 분할 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card mx-3 mb-3">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: BOM 목록 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold text-foreground">BOM 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {totalCount}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" onClick={openCreateModal}>
+                    <Plus className="w-3.5 h-3.5 mr-1" />
+                    등록
+                  </Button>
+                  <div className="w-px h-4 bg-border mx-0.5" />
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                    onClick={handleDeleteBom}
+                    disabled={checkedIds.length === 0}
+                  >
+                    <Trash2 className="w-3.5 h-3.5 mr-1" />
+                    삭제
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* BOM 목록 테이블 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+                    key: col.key,
+                    label: col.label,
+                    render: col.key === "item_code"
+                      ? (_val: any, row: any) => <span className="font-mono text-[13px]">{row.item_code || row.item_number || "-"}</span>
+                      : col.key === "bom_type"
+                      ? (_val: any, row: any) => <span className="text-[13px]">{BOM_TYPE_OPTIONS.find((o) => o.code === row.bom_type)?.label || row.bom_type || "-"}</span>
+                      : col.key === "status"
+                      ? (_val: any, row: any) => renderStatusBadge(row.status)
+                      : undefined,
+                  }))}
+                  data={ts.groupData(bomList)}
+                  loading={loading}
+                  emptyMessage="등록된 BOM이 없어요"
+                  showCheckbox
+                  checkedIds={checkedIds}
+                  onCheckedChange={setCheckedIds}
+                  selectedId={selectedBomId}
+                  onSelect={(id) => setSelectedBomId(id)}
+                  onRowClick={(row) => setSelectedBomId(row.id)}
+                  showPagination
+                  draggableColumns={false}
+                  columnOrderKey="c16-bom"
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 상세 + 트리뷰 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            {!selectedBomId ? (
+              <div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
+                <Inbox className="w-10 h-10 text-muted-foreground/40" />
+                <p className="text-sm">좌측에서 BOM을 선택해주세요</p>
+              </div>
+            ) : (
+              <div className="flex flex-col h-full">
+                {/* 상세 카드 */}
+                <div className="border-b shrink-0">
+                  <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                    <h3 className="text-[13px] font-bold text-foreground">BOM 상세정보</h3>
+                    <Button size="sm" variant="ghost" onClick={openEditModal}>
+                      <FileText className="w-3.5 h-3.5 mr-1" />
+                      편집
+                    </Button>
+                  </div>
+                  {detailLoading ? (
+                    <div className="flex items-center justify-center py-8">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : bomHeader ? (
+                    <div className="grid grid-cols-2 text-sm">
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">품목코드</span>
+                        <span className="font-mono text-xs">{bomHeader.item_code || bomHeader.item_number || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">품명</span>
+                        <span className="text-xs">{bomHeader.item_name || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">BOM 유형</span>
+                        <span className="text-xs">{BOM_TYPE_OPTIONS.find((o) => o.code === bomHeader.bom_type)?.label || bomHeader.bom_type || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">버전</span>
+                        <span className="text-xs">{bomHeader.version || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">기준수량</span>
+                        <span className="text-xs">{bomHeader.base_qty || "1"} {bomHeader.unit || ""}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">상태</span>
+                        {renderStatusBadge(bomHeader.status)}
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 col-span-2">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">메모</span>
+                        <span className="text-xs text-muted-foreground">{bomHeader.remark || "-"}</span>
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+
+                {/* 하단 탭: 트리뷰 / 버전 / 이력 */}
+                <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+                  <Tabs value={rightTab} onValueChange={(v) => {
+                    setRightTab(v as any);
+                    if (v === "version" && selectedBomId) fetchVersions(selectedBomId);
+                    if (v === "history" && selectedBomId) fetchHistory(selectedBomId);
+                  }}>
+                    <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/50 shrink-0">
+                      <TabsList className="h-8">
+                        <TabsTrigger value="tree" className="text-xs px-3 h-7">
+                          <GitBranch className="w-3.5 h-3.5 mr-1" />
+                          트리뷰
+                        </TabsTrigger>
+                        <TabsTrigger value="version" className="text-xs px-3 h-7">
+                          <Copy className="w-3.5 h-3.5 mr-1" />
+                          버전
+                        </TabsTrigger>
+                        <TabsTrigger value="history" className="text-xs px-3 h-7">
+                          <History className="w-3.5 h-3.5 mr-1" />
+                          이력
+                        </TabsTrigger>
+                      </TabsList>
+
+                    </div>
+
+                    {/* 트리뷰 탭 */}
+                    <TabsContent value="tree" className="flex-1 overflow-auto p-0 m-0">
+                      {/* 상단 액션바 */}
+                      <div className="flex items-center justify-between border-b px-3 py-2 bg-muted/30">
+                        <div className="flex items-center gap-2">
+                          <Button size="sm" variant="outline" onClick={() => handleTreeAddChild(null)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />루트 품목 추가
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => {
+                              if (selectedTreeNodeId && !selectedTreeNodeId.startsWith("__root_")) {
+                                handleTreeAddChild(selectedTreeNodeId);
+                              }
+                            }}
+                            disabled={!selectedTreeNodeId || selectedTreeNodeId.startsWith("__root_")}
+                          >
+                            <Plus className="w-3.5 h-3.5 mr-1" />하위 품목 추가
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                            onClick={() => {
+                              if (selectedTreeNodeId && !selectedTreeNodeId.startsWith("__root_")) {
+                                handleTreeDeleteNode(selectedTreeNodeId);
+                                setSelectedTreeNodeId(null);
+                                setEditingNodeId(null);
+                              }
+                            }}
+                            disabled={!selectedTreeNodeId || selectedTreeNodeId.startsWith("__root_")}
+                          >
+                            <Trash2 className="w-3.5 h-3.5 mr-1" />선택 삭제
+                          </Button>
+                          <div className="w-px h-5 bg-border" />
+                          <div className="flex overflow-hidden rounded-md border">
+                            <button onClick={() => { setTreeViewMode("forward"); }} className={cn("h-7 px-2.5 text-[11px] font-medium transition-colors", treeViewMode === "forward" ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-muted")}>
+                              정전개
+                            </button>
+                            <button onClick={() => { setTreeViewMode("reverse"); fetchWhereUsed(); }} className={cn("h-7 border-l px-2.5 text-[11px] font-medium transition-colors", treeViewMode === "reverse" ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-muted")}>
+                              역전개
+                            </button>
+                          </div>
+                          {treeViewMode === "forward" && (
+                            <>
+                              <Button size="sm" variant="ghost" onClick={expandAll}>
+                                <ChevronsDown className="w-3.5 h-3.5 mr-1" />펼침
+                              </Button>
+                              <Button size="sm" variant="ghost" onClick={collapseAll}>
+                                <ChevronsUp className="w-3.5 h-3.5 mr-1" />접음
+                              </Button>
+                            </>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2">
+                          {treeHasChanges && <Badge variant="secondary" className="text-warning">변경됨</Badge>}
+                          <Button size="sm" onClick={handleSaveTree} disabled={!treeHasChanges || saving}>
+                            {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin mr-1" /> : <Save className="w-3.5 h-3.5 mr-1" />}
+                            저장
+                          </Button>
+                        </div>
+                      </div>
+
+                      {/* 역전개 (Where Used) 뷰 */}
+                      {treeViewMode === "reverse" ? (
+                        <div className="flex-1 overflow-auto">
+                          {whereUsedLoading ? (
+                            <div className="flex h-40 items-center justify-center">
+                              <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                            </div>
+                          ) : (
+                            <div className="p-4">
+                              <div className="flex items-center gap-2 mb-4">
+                                <Package className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-sm font-semibold">{bomHeader?.item_name || ""}</span>
+                                <span className="font-mono text-xs text-muted-foreground">({bomHeader?.item_code || ""})</span>
+                              </div>
+                              <div className="text-xs text-muted-foreground mb-3">사용처 (Where Used)</div>
+                              {whereUsedData.length === 0 ? (
+                                <div className="flex flex-col items-center justify-center h-32 text-muted-foreground gap-2">
+                                  <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                                  <p className="text-xs">이 품목을 사용하는 BOM이 없습니다</p>
+                                </div>
+                              ) : (
+                                <div className="space-y-2">
+                                  {whereUsedData.map((wu, idx) => (
+                                    <div key={idx} className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent/50 cursor-pointer" onClick={() => {
+                                      // 해당 BOM 선택
+                                      setSelectedBomId(wu.bom_id);
+                                      setTreeViewMode("forward");
+                                    }}>
+                                      <Package className="h-4 w-4 text-primary shrink-0" />
+                                      <div className="min-w-0 flex-1">
+                                        <div className="flex items-center gap-2">
+                                          <span className="text-sm font-semibold">{wu.item_name}</span>
+                                          <span className="font-mono text-[11px] text-muted-foreground">({wu.item_code})</span>
+                                        </div>
+                                        <div className="mt-0.5 flex gap-3 text-[11px] text-muted-foreground">
+                                          <span>소요량: <b className="text-foreground">{wu.quantity}</b> {wu.unit}</span>
+                                          {wu.process_type && <span>공정: <b className="text-foreground">{wu.process_type}</b></span>}
+                                        </div>
+                                      </div>
+                                      <ChevronRight className="h-4 w-4 text-muted-foreground/50 shrink-0" />
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      ) : editingFlatTree.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center h-40 text-muted-foreground gap-2">
+                          <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                          <p className="text-xs">등록된 하위 품목이 없습니다</p>
+                          <Button size="sm" variant="outline" onClick={() => handleTreeAddChild(null)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />첫 품목 추가
+                          </Button>
+                        </div>
+                      ) : (
+                        <table className="w-full border-collapse text-xs" style={{ minWidth: "1100px" }}>
+                          <colgroup><col style={{ width: "60px" }} /><col style={{ width: "140px" }} /><col /><col style={{ width: "70px" }} /><col style={{ width: "50px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "150px" }} /><col style={{ width: "80px" }} /></colgroup>
+                          <thead className="sticky top-0 z-10">
+                            <tr className="border-b bg-muted">
+                              <th className="px-2 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">레벨</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">품번</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">품명</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">소요량</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">단위</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">공정구분</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">규격</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">비고</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">작성자</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">수정일시</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">관리품목</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {editingFlatTree.map((node) => {
+                              const nodeKey = node.id || node._tempId || "";
+                              const isVirtualRoot = (node as any)._isVirtualRoot === true;
+                              const typeBadge = getItemTypeBadge(node.item_type);
+                              const hasChildren = isVirtualRoot ? editingTree.length > 0 : node.children.length > 0;
+                              const isExpanded = expandedNodes.has(nodeKey);
+                              const isSelected = selectedTreeNodeId === nodeKey;
+                              const isEditing = editingNodeId === nodeKey && !isVirtualRoot;
+                              const level = node._level || 0;
+
+                              const depthBarColor = isVirtualRoot ? "bg-primary/70"
+                                : level === 1 ? "bg-emerald-400"
+                                : level === 2 ? "bg-amber-400"
+                                : level >= 3 ? "bg-purple-400" : "bg-muted/60";
+
+                              const depthBg = isVirtualRoot
+                                ? "border-border bg-primary/10 font-medium hover:bg-primary/20"
+                                : isSelected
+                                  ? "border-border bg-primary/5"
+                                  : level === 1 ? "border-border bg-background hover:bg-muted/60"
+                                  : level >= 2 ? "border-border bg-muted/40 hover:bg-muted/50"
+                                  : "border-border bg-background hover:bg-muted/60";
+
+                              return (
+                                <tr
+                                  key={nodeKey}
+                                  className={cn("group cursor-pointer border-b transition-colors", depthBg)}
+                                  onClick={() => {
+                                    if (editingNodeId && editingNodeId !== nodeKey) setEditingNodeId(null);
+                                    setSelectedTreeNodeId(nodeKey);
+                                    if (hasChildren) toggleEditTreeNode(nodeKey);
+                                  }}
+                                  onDoubleClick={() => {
+                                    if (!isVirtualRoot) {
+                                      setTreeEditTarget(node);
+                                      setTreeEditForm({ quantity: node.quantity || "1", unit: node.unit || "", process_type: node.process_type || "", loss_rate: node.loss_rate || "0", spec: node.spec || "", material: node.material || "", remark: node.remark || "" });
+                                      setTreeEditModalOpen(true);
+                                    }
+                                  }}
+                                >
+                                  {/* 레벨 + 좌측 색상바 + 토글 */}
+                                  <td className="relative px-1 py-2" style={{ paddingLeft: `${level * 16 + 8}px` }}>
+                                    <div className={cn("absolute left-0 top-0 h-full w-[3px]", depthBarColor)} />
+                                    <div className="flex items-center gap-1">
+                                      <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
+                                        {hasChildren ? (
+                                          isExpanded ? <ChevronDown className={cn("h-3.5 w-3.5", isVirtualRoot ? "text-primary" : "text-muted-foreground/70")} />
+                                          : <ChevronRight className={cn("h-3.5 w-3.5", isVirtualRoot ? "text-primary" : "text-muted-foreground/70")} />
+                                        ) : (
+                                          <span className="h-1 w-1 rounded-full bg-muted-foreground/40" />
+                                        )}
+                                      </span>
+                                      <span className="text-[11px]">{level}</span>
+                                    </div>
+                                  </td>
+                                  {/* 품번 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">
+                                    <span className={cn("font-mono text-[11px]", isVirtualRoot && "font-bold text-foreground")}>
+                                      {node.item_number || "-"}
+                                    </span>
+                                  </td>
+                                  {/* 품명 */}
+                                  <td className={cn("overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2", isVirtualRoot && "font-bold")}>
+                                    {node.item_name || "-"}
+                                  </td>
+                                  {/* 소요량 */}
+                                  <td className="px-3 py-2 text-center">{isVirtualRoot ? (bomHeader?.base_qty || "1") : (node.quantity || "-")}</td>
+                                  {/* 단위 */}
+                                  <td className="px-3 py-2 text-center">{isVirtualRoot ? "-" : (node.unit || "-")}</td>
+                                  {/* 공정구분 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.process_type || "-")}</td>
+                                  {/* 규격 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.spec || "-")}</td>
+                                  {/* 비고 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.remark || "-")}</td>
+                                  {/* 작성자 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 text-muted-foreground">{isVirtualRoot ? "-" : (node.writer || "-")}</td>
+                                  {/* 수정일시 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 text-muted-foreground">
+                                    {isVirtualRoot ? "-" : (node.updated_date ? new Date(node.updated_date).toLocaleString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }) : "-")}
+                                  </td>
+                                  {/* 관리품목 */}
+                                  <td className="px-2 py-2" style={{ minWidth: "150px" }}>
+                                    {isVirtualRoot ? <span className="text-center block">-</span> : (
+                                      node.item_type ? (
+                                        <div className="flex flex-row items-center gap-1 flex-nowrap">{node.item_type.split(",").map((t: string, i: number) => {
+                                          const trimmed = t.trim();
+                                          if (!trimmed) return null;
+                                          return <span key={i} className="shrink-0 rounded px-1 py-0.5 text-[9px] font-medium bg-muted text-muted-foreground">{trimmed}</span>;
+                                        })}</div>
+                                      ) : "-"
+                                    )}
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      )}
+                    </TabsContent>
+
+                    {/* 버전 탭 */}
+                    <TabsContent value="version" className="flex-1 overflow-auto m-0">
+                      <div className="p-3">
+                        <div className="flex items-center justify-between mb-3">
+                          <span className="text-xs text-muted-foreground">
+                            {versions.length}개 버전
+                          </span>
+                          <Button size="sm" onClick={() => setShowNewVersionDialog(true)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />
+                            새 버전
+                          </Button>
+                        </div>
+                        {versionLoading ? (
+                          <div className="flex items-center justify-center py-8">
+                            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                          </div>
+                        ) : versions.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                            <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                            <p className="text-xs">버전 데이터가 없어요</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-2">
+                            {versions.map((ver) => {
+                              const isActive = ver.id === currentVersionId;
+                              const statusInfo = VERSION_STATUS_MAP[ver.status] || { label: ver.status, className: "bg-muted text-muted-foreground" };
+                              return (
+                                <div
+                                  key={ver.id}
+                                  className={cn(
+                                    "flex items-center justify-between p-3 rounded-lg border transition-colors",
+                                    isActive ? "border-primary/30 bg-primary/5" : "hover:bg-muted/50"
+                                  )}
+                                >
+                                  <div className="flex items-center gap-3">
+                                    <div className="flex flex-col gap-0.5">
+                                      <div className="flex items-center gap-2">
+                                        <span className="text-sm font-semibold">{ver.version_name}</span>
+                                        <span className={cn("text-[10px] font-medium px-1.5 py-0.5 rounded-full", statusInfo.className)}>
+                                          {statusInfo.label}
+                                        </span>
+                                        {isActive && (
+                                          <Badge variant="outline" className="text-[10px] h-4 border-primary/30 text-primary">
+                                            현재
+                                          </Badge>
+                                        )}
+                                      </div>
+                                      <span className="text-[11px] text-muted-foreground">
+                                        {ver.detail_count || 0}개 구성품 · {ver.created_date ? new Date(ver.created_date).toLocaleDateString("ko-KR") : "-"}
+                                      </span>
+                                    </div>
+                                  </div>
+                                  <div className="flex items-center gap-1">
+                                    {!isActive && (
+                                      <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => handleLoadVersion(ver.id)}>
+                                        <RotateCcw className="w-3 h-3 mr-1" />
+                                        불러오기
+                                      </Button>
+                                    )}
+                                    {ver.status !== "active" && (
+                                      <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => handleActivateVersion(ver.id)}>
+                                        <CheckCircle2 className="w-3 h-3 mr-1" />
+                                        확정
+                                      </Button>
+                                    )}
+                                    {ver.status !== "active" && (
+                                      <Button
+                                        size="sm"
+                                        variant="ghost"
+                                        className="h-7 text-xs text-destructive hover:text-destructive"
+                                        onClick={() => handleDeleteVersion(ver.id)}
+                                      >
+                                        <Trash2 className="w-3 h-3" />
+                                      </Button>
+                                    )}
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    </TabsContent>
+
+                    {/* 이력 탭 */}
+                    <TabsContent value="history" className="flex-1 overflow-auto m-0">
+                      <div className="p-3">
+                        <div className="flex items-center justify-between mb-3">
+                          <span className="text-xs text-muted-foreground">
+                            {historyList.length}건 이력
+                          </span>
+                        </div>
+                        {historyLoading ? (
+                          <div className="flex items-center justify-center py-8">
+                            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                          </div>
+                        ) : historyList.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                            <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                            <p className="text-xs">이력 데이터가 없어요</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-2">
+                            {historyList.map((entry) => {
+                              const typeStyle = CHANGE_TYPE_STYLE[entry.change_type] || "bg-muted text-muted-foreground ring-border";
+                              return (
+                                <div key={entry.id} className="p-3 rounded-lg border hover:bg-muted/50 transition-colors">
+                                  <div className="flex items-center justify-between mb-1">
+                                    <div className="flex items-center gap-2">
+                                      <span className={cn("inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium ring-1 ring-inset", typeStyle)}>
+                                        {entry.change_type}
+                                      </span>
+                                      {(entry.revision || entry.version) && (
+                                        <span className="text-[10px] text-muted-foreground">
+                                          {entry.revision && `차수 ${entry.revision}`}{entry.revision && entry.version && " / "}{entry.version && `v${entry.version}`}
+                                        </span>
+                                      )}
+                                    </div>
+                                    <span className="text-[10px] text-muted-foreground">
+                                      {entry.changed_date ? new Date(entry.changed_date).toLocaleString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }) : "-"}
+                                    </span>
+                                  </div>
+                                  <p className="text-xs mt-1">{entry.change_description || "-"}</p>
+                                  {entry.changed_by && (
+                                    <span className="text-[10px] text-muted-foreground/60 mt-1 block">
+                                      {entry.changed_by}
+                                    </span>
+                                  )}
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </div>
+              </div>
+            )}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ─── BOM 등록/수정 모달 ─────────────────── */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto" onPointerDownOutside={(e) => { if (showItemSearchModal) e.preventDefault(); }}>
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "BOM 수정" : "BOM 등록"}</DialogTitle>
+            <DialogDescription>{isEditMode ? "BOM 정보를 수정해요" : "새로운 BOM을 등록해요"}</DialogDescription>
+          </DialogHeader>
+        <div className="space-y-6">
+          {/* 기본정보 */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                품목 <span className="text-destructive">*</span>
+              </Label>
+              <div className="flex gap-2">
+                <Input
+                  className="h-9 flex-1"
+                  value={masterForm.item_code ? `${masterForm.item_code} - ${masterForm.item_name}` : ""}
+                  placeholder="품목을 검색해주세요"
+                  readOnly
+                  onClick={() => {
+                    setItemSearchTarget("master");
+                    setItemSearchKeyword("");
+                    setShowItemSearchModal(true);
+                    searchItems("");
+                  }}
+                />
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="h-9 px-3"
+                  onClick={() => {
+                    setItemSearchTarget("master");
+                    setItemSearchKeyword("");
+                    setShowItemSearchModal(true);
+                    searchItems("");
+                  }}
+                >
+                  <Search className="w-3.5 h-3.5" />
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                BOM 유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={masterForm.bom_type || ""} onValueChange={(v) => setMasterForm((prev) => ({ ...prev, bom_type: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  {BOM_TYPE_OPTIONS.map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">기준수량</Label>
+              <Input
+                className="h-9"
+                type="number"
+                value={masterForm.base_qty}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, base_qty: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">단위</Label>
+              <Input
+                className="h-9"
+                value={masterForm.unit}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, unit: e.target.value }))}
+                placeholder="EA"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                버전 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={masterForm.version}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, version: e.target.value }))}
+                placeholder="1.0"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">상태</Label>
+              <Select value={masterForm.status || "draft"} onValueChange={(v) => setMasterForm((prev) => ({ ...prev, status: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="draft">초안</SelectItem>
+                  <SelectItem value="active">활성</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                유효 시작일 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={masterForm.effective_date || ""}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, effective_date: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">유효 종료일</Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={masterForm.expiry_date || ""}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, expiry_date: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs font-medium">메모</Label>
+              <Textarea
+                className="min-h-[60px] resize-none"
+                value={masterForm.remark}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, remark: e.target.value }))}
+                placeholder="메모를 입력해주세요"
+              />
+            </div>
+          </div>
+
+          {/* BOM 구성품목 */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <h4 className="text-sm font-semibold">BOM 구성품목</h4>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  setItemSearchTarget("detail");
+                  setItemSearchKeyword("");
+                  setShowItemSearchModal(true);
+                  searchItems("");
+                }}
+              >
+                <Plus className="w-3.5 h-3.5 mr-1" />
+                품목 추가
+              </Button>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                    <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                    <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공정유형</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">손실율(%)</TableHead>
+                    <TableHead className="w-[40px]" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {modalDetailRows.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={8} className="text-center py-8 text-muted-foreground text-[13px]">
+                        구성품목을 추가해주세요
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    modalDetailRows.map((row, idx) => (
+                      <TableRow key={idx}>
+                        <TableCell className="text-center text-muted-foreground text-[13px]">{idx + 1}</TableCell>
+                        <TableCell className="font-mono text-[13px]">{row.item_number}</TableCell>
+                        <TableCell className="text-[13px]">{row.item_name}</TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[70px] text-xs"
+                            type="number"
+                            value={row.quantity}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].quantity = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell className="text-[13px]">{row.unit}</TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[90px] text-xs"
+                            value={row.process_type}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].process_type = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                            placeholder="공정"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[70px] text-xs"
+                            type="number"
+                            value={row.loss_rate}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].loss_rate = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                            onClick={() => setModalDetailRows((prev) => prev.filter((_, i) => i !== idx))}
+                          >
+                            <X className="w-3.5 h-3.5" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)} disabled={saving}>
+              취소
+            </Button>
+            <Button onClick={handleSaveBom} disabled={saving}>
+              {saving && <Loader2 className="w-3.5 h-3.5 animate-spin mr-1.5" />}
+              {isEditMode ? "수정" : "등록"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 품목 검색 모달 ──────────────────────── */}
+      <Dialog open={showItemSearchModal} onOpenChange={setShowItemSearchModal}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>품목 검색</DialogTitle>
+            <DialogDescription>품목코드 또는 품명으로 검색해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              className="h-9 flex-1"
+              placeholder="품목코드 또는 품명 입력"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+            />
+            <Button size="sm" className="h-9" onClick={() => searchItems()} disabled={itemSearchLoading}>
+              {itemSearchLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}
+            </Button>
+          </div>
+          <div className="max-h-[300px] overflow-auto border rounded-lg">
+            {itemSearchResults.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground gap-1">
+                <Search className="w-6 h-6 text-muted-foreground/40" />
+                <p className="text-xs">검색어를 입력해주세요</p>
+              </div>
+            ) : (
+              itemSearchResults.map((item) => {
+                const badge = getItemTypeBadge(item.division);
+                return (
+                  <div
+                    key={item.id}
+                    className="flex items-center gap-3 px-3 py-2 border-b last:border-b-0 hover:bg-accent cursor-pointer transition-colors"
+                    onClick={() => selectItem(item)}
+                  >
+                    <span className={cn("text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0", badge.className)}>
+                      {badge.label}
+                    </span>
+                    <span className="font-mono text-[11px] text-muted-foreground">{item.item_number}</span>
+                    <span className="text-xs">{item.item_name}</span>
+                    <span className="ml-auto text-[11px] text-muted-foreground">{item.unit || ""}</span>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 품목 수정 모달 (더블클릭) ─────────────────── */}
+      <Dialog open={treeEditModalOpen} onOpenChange={setTreeEditModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>품목 수정</DialogTitle>
+            <DialogDescription>선택한 품목의 BOM 구성 정보를 수정합니다</DialogDescription>
+          </DialogHeader>
+          {treeEditTarget && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">품목코드</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditTarget.item_number || ""} readOnly />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">품목명</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditTarget.item_name || ""} readOnly />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">구성수량 <span className="text-destructive">*</span></Label>
+                  <Input className="h-9" type="number" value={treeEditForm.quantity || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, quantity: e.target.value }))} />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">단위</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.unit || "-"} readOnly />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">공정</Label>
+                  <Select value={treeEditForm.process_type || ""} onValueChange={(v) => setTreeEditForm((p) => ({ ...p, process_type: v }))}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="공정 선택" /></SelectTrigger>
+                    <SelectContent>
+                      {processOptions.map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">로스율 (%)</Label>
+                  <Input className="h-9" type="number" value={treeEditForm.loss_rate || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, loss_rate: e.target.value }))} />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">규격</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.spec || "-"} readOnly />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">재질</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.material || "-"} readOnly />
+                </div>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold text-muted-foreground">메모</Label>
+                <textarea className="flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm" value={treeEditForm.remark || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, remark: e.target.value }))} placeholder="비고 사항을 입력하세요" />
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setTreeEditModalOpen(false)}>취소</Button>
+            <Button onClick={() => {
+              if (treeEditTarget) {
+                const nodeKey = treeEditTarget.id || treeEditTarget._tempId || "";
+                setEditingTree(prev => updateTreeNode(prev, nodeKey, node => ({
+                  ...node,
+                  quantity: treeEditForm.quantity || "1",
+                  process_type: treeEditForm.process_type || "",
+                  loss_rate: treeEditForm.loss_rate || "0",
+                  remark: treeEditForm.remark || "",
+                  _isModified: !node._isNew ? true : node._isModified,
+                })));
+                setTreeHasChanges(true);
+              }
+              setTreeEditModalOpen(false);
+            }}>저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 트리 품목 검색 모달 ─────────────────── */}
+      <Dialog open={treeItemSearchOpen} onOpenChange={setTreeItemSearchOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>품목 검색 (트리 추가)</DialogTitle>
+            <DialogDescription>추가할 품목을 검색해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              className="h-9 flex-1"
+              placeholder="품목코드 또는 품명 입력"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+            />
+            <Button size="sm" className="h-9" onClick={() => searchItems()} disabled={itemSearchLoading}>
+              {itemSearchLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}
+            </Button>
+          </div>
+          <div className="max-h-[300px] overflow-auto border rounded-lg">
+            {itemSearchResults.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground gap-1">
+                <Search className="w-6 h-6 text-muted-foreground/40" />
+                <p className="text-xs">검색어를 입력해주세요</p>
+              </div>
+            ) : (
+              itemSearchResults.filter((item) => {
+                // 자기 자신 제외
+                if (bomHeader && (item.id === bomHeader.item_id || item.item_number === bomHeader.item_code)) return false;
+                // 조상 경로 순환 참조 제외
+                if (addTargetParentId) {
+                  const collectAncestorIds = (nodes: TreeNode[], targetId: string, path: string[]): string[] | null => {
+                    for (const n of nodes) {
+                      const nk = n.id || n._tempId || "";
+                      if (nk === targetId) return [...path, n.child_item_id || ""];
+                      if (n.children.length > 0) {
+                        const r = collectAncestorIds(n.children, targetId, [...path, n.child_item_id || ""]);
+                        if (r) return r;
+                      }
+                    }
+                    return null;
+                  };
+                  const ancestors = collectAncestorIds(editingTree, addTargetParentId, []);
+                  if (ancestors && ancestors.includes(item.id)) return false;
+                }
+                return true;
+              }).map((item) => {
+                const badge = getItemTypeBadge(item.division);
+                return (
+                  <div
+                    key={item.id}
+                    className="flex items-center gap-3 px-3 py-2 border-b last:border-b-0 hover:bg-accent cursor-pointer transition-colors"
+                    onClick={() => handleTreeItemSelect(item)}
+                  >
+                    <span className={cn("text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0", badge.className)}>
+                      {badge.label}
+                    </span>
+                    <span className="font-mono text-[11px] text-muted-foreground">{item.item_number}</span>
+                    <span className="text-xs">{item.item_name}</span>
+                    <span className="ml-auto text-[11px] text-muted-foreground">{item.unit || ""}</span>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 새 버전 생성 다이얼로그 ────────────── */}
+      <Dialog open={showNewVersionDialog} onOpenChange={setShowNewVersionDialog}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>새 버전 생성</DialogTitle>
+            <DialogDescription>현재 버전의 데이터를 복사하여 새 버전을 만들어요</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-xs font-medium">버전명 (비워두면 자동 채번)</Label>
+            <Input
+              className="h-9"
+              value={newVersionName}
+              onChange={(e) => setNewVersionName(e.target.value)}
+              placeholder="예: 2.0"
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowNewVersionDialog(false)}>
+              취소
+            </Button>
+            <Button onClick={handleCreateVersion}>
+              <Plus className="w-3.5 h-3.5 mr-1" />
+              생성
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 이력 추가 다이얼로그 ───────────────── */}
+      <Dialog open={showHistoryDialog} onOpenChange={setShowHistoryDialog}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>이력 추가</DialogTitle>
+            <DialogDescription>BOM 변경 이력을 기록해요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                변경 유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={newHistory.change_type} onValueChange={(v) => setNewHistory((prev) => ({ ...prev, change_type: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="변경 유형 선택" /></SelectTrigger>
+                <SelectContent>
+                  {CHANGE_TYPE_OPTIONS.map((t) => (
+                    <SelectItem key={t} value={t}>{t}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">변경 내용</Label>
+              <Textarea
+                className="min-h-[80px] resize-none"
+                value={newHistory.change_description}
+                onChange={(e) => setNewHistory((prev) => ({ ...prev, change_description: e.target.value }))}
+                placeholder="변경 내용을 입력해주세요"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowHistoryDialog(false)}>
+              취소
+            </Button>
+            <Button onClick={handleAddHistory}>
+              <Plus className="w-3.5 h-3.5 mr-1" />
+              추가
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 엑셀 업로드 다이얼로그 ────────────── */}
+      <Dialog open={showExcelUpload} onOpenChange={setShowExcelUpload}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>BOM 엑셀 업로드</DialogTitle>
+            <DialogDescription>
+              {selectedBomId
+                ? "선택한 BOM에 새 버전을 엑셀로 생성해요"
+                : "엑셀 파일로 새 BOM을 생성해요"}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="border-2 border-dashed rounded-lg p-6 text-center">
+              <input
+                type="file"
+                accept=".xlsx,.xls"
+                className="hidden"
+                id="excel-file-input"
+                onChange={(e) => setExcelFile(e.target.files?.[0] || null)}
+              />
+              <label htmlFor="excel-file-input" className="cursor-pointer">
+                <Upload className="w-8 h-8 mx-auto mb-2 text-muted-foreground/40" />
+                <p className="text-sm text-muted-foreground mb-1">
+                  {excelFile ? excelFile.name : "클릭하여 파일을 선택해주세요"}
+                </p>
+                <p className="text-[10px] text-muted-foreground/60">.xlsx, .xls 형식</p>
+              </label>
+            </div>
+            <div className="bg-muted/50 rounded-lg p-3 text-xs text-muted-foreground space-y-1">
+              <p className="font-medium text-foreground">엑셀 형식 안내</p>
+              <p>레벨 0: BOM 마스터 (최상위 품목)</p>
+              <p>레벨 1: 직접 자품목</p>
+              <p>레벨 2+: 자품목의 자품목</p>
+              <p>필수 컬럼: level, item_number, quantity</p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setShowExcelUpload(false); setExcelFile(null); }}>
+              취소
+            </Button>
+            <Button onClick={handleExcelUpload} disabled={!excelFile || excelUploading}>
+              {excelUploading && <Loader2 className="w-3.5 h-3.5 animate-spin mr-1.5" />}
+              업로드
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/production/plan-management/page.tsx b/frontend/app/(main)/COMPANY_10/production/plan-management/page.tsx
index a49555b6..546ed739 100644
--- a/frontend/app/(main)/COMPANY_10/production/plan-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/production/plan-management/page.tsx
@@ -80,13 +80,13 @@ import TimelineScheduler, {
   type ZoomLevel,
   type StatusColor,
 } from "@/components/common/TimelineScheduler";
-import { DynamicSearchFilter, type FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 import { apiClient } from "@/lib/api/client";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 
 // ─── 상수 ───
 
@@ -104,6 +104,19 @@ const STATUS_LABEL: Record<string, string> = {
   completed: "완료",
 };
 
+// 수주 테이블 컬럼 설정
+const ORDER_COLUMNS = [
+  { key: "total_order_qty", label: "총수주량" },
+  { key: "total_ship_qty", label: "출고량" },
+  { key: "total_balance_qty", label: "잔량" },
+  { key: "current_stock", label: "현재고" },
+  { key: "safety_stock", label: "안전재고" },
+  { key: "existing_plan_qty", label: "기생산계획량" },
+  { key: "in_progress_qty", label: "생산진행" },
+  { key: "required_plan_qty", label: "필요생산계획" },
+  { key: "lead_time", label: "리드타임(일)" },
+];
+
 // ========== 메인 컴포넌트 ==========
 
 export default function ProductionPlanManagementPage() {
@@ -126,7 +139,7 @@ export default function ProductionPlanManagementPage() {
   const [stockItems, setStockItems] = useState<StockShortageItem[]>([]);
   const [finishedPlans, setFinishedPlans] = useState<ProductionPlan[]>([]);
   const [semiPlans, setSemiPlans] = useState<ProductionPlan[]>([]);
-  const [equipmentList, setEquipmentList] = useState<{ equipment_id: string; equipment_name: string }[]>([]);
+  const [equipmentList, setEquipmentList] = useState<{ id: string; equipment_code: string; equipment_name: string }[]>([]);
 
   // 선택/토글 상태
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
@@ -134,15 +147,15 @@ export default function ProductionPlanManagementPage() {
   const [filterUnplannedOrdersOnly, setFilterUnplannedOrdersOnly] = useState(false);
   const [selectedStockItems, setSelectedStockItems] = useState<Set<string>>(new Set());
 
-  // 검색 필터 (DynamicSearchFilter에서 사용)
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
   const [searchItemCode, setSearchItemCode] = useState("");
   const [searchStatus, setSearchStatus] = useState("all");
   const [searchStartDate, setSearchStartDate] = useState("");
   const [searchEndDate, setSearchEndDate] = useState("");
 
+  // 테이블 설정
+  const ts = useTableSettings("c16-plan-management", "sales_order_mng", ORDER_COLUMNS);
+
   // 타임라인 옵션
   const [recalculateUnstarted, setRecalculateUnstarted] = useState(true);
   const [finishedZoom, setFinishedZoom] = useState<ZoomLevel>("week");
@@ -256,39 +269,33 @@ export default function ProductionPlanManagementPage() {
 
   // ========== DynamicSearchFilter 콜백 ==========
 
-  const handleSearchFilterChange = useCallback(
-    (filters: FilterValue[]) => {
-      setSearchFilters(filters);
-      // 필터에서 주요 값 추출
-      let itemCode = "";
-      let status = "all";
-      let startDate = "";
-      let endDate = "";
-      for (const f of filters) {
-        if (f.columnName === "item_code" && f.value) itemCode = f.value;
-        if (f.columnName === "status" && f.value) status = f.value;
-        if (f.columnName === "start_date" && f.value) {
-          const [s, e] = f.value.split(",");
-          if (s) startDate = s;
-          if (e) endDate = e;
-        }
+  const handleSearchFilterChange = useCallback((filters: FilterValue[]) => {
+    setSearchFilters(filters);
+    let itemCode = "";
+    let status = "all";
+    let startDate = "";
+    let endDate = "";
+    for (const f of filters) {
+      if (f.columnName === "item_code" && f.value) itemCode = f.value;
+      if (f.columnName === "status" && f.value) status = f.value;
+      if (f.columnName === "start_date" && f.operator === "between" && f.value) {
+        const [s, e] = f.value.split("|");
+        if (s) startDate = s;
+        if (e) endDate = e;
       }
-      setSearchItemCode(itemCode);
-      setSearchStatus(status);
-      setSearchStartDate(startDate);
-      setSearchEndDate(endDate);
-    },
-    []
-  );
-
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
+    }
+    setSearchItemCode(itemCode);
+    setSearchStatus(status || "all");
+    setSearchStartDate(startDate);
+    setSearchEndDate(endDate);
   }, []);
 
   useEffect(() => {
-    const saved = loadTableSettings("production-plan");
-    if (saved) applyTableSettings(saved);
-  }, []);
+    if (searchFilters.length > 0) {
+      fetchOrderSummary();
+      fetchPlans();
+    }
+  }, [searchItemCode, searchStatus, searchStartDate, searchEndDate]);
 
   // ========== 토글/선택 핸들러 ==========
 
@@ -652,7 +659,7 @@ export default function ProductionPlanManagementPage() {
     setModalManager((plan as any).manager_name || "");
     setModalWorkOrderNo((plan as any).work_order_no || "");
     setModalRemarks(plan.remarks || "");
-    setModalEquipmentId(plan.equipment_id ? String(plan.equipment_id) : "");
+    setModalEquipmentId((plan as any).equipment_code || (plan.equipment_id ? String(plan.equipment_id) : ""));
     setScheduleModalOpen(true);
   }, []);
 
@@ -912,29 +919,26 @@ export default function ProductionPlanManagementPage() {
   // 숫자 포맷
   const formatNumber = (num: number | string) => Number(num).toLocaleString();
 
+  // (컬럼 표시는 ts.visibleColumns 순서를 따름)
+
   return (
-    <div className={cn("flex flex-col bg-muted/30 gap-4", isFullscreen ? "fixed inset-0 z-50 p-4" : "h-[calc(100vh-4rem)] p-5")}>
+    <div className={cn("flex flex-col gap-3", isFullscreen ? "fixed inset-0 z-50 bg-background p-4" : "h-full p-3")}>
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>생산관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="font-medium text-foreground">생산계획</span>
+      </nav>
+
       {/* 상단 바 */}
-      <div className="shrink-0 rounded-lg border bg-background p-4 shadow-sm">
-        <div className="flex items-center justify-between gap-3">
-          <DynamicSearchFilter
-            tableName="production_plan_mng"
-            filterId="production-plan"
-            onFilterChange={handleSearchFilterChange}
-            dataCount={finishedPlans.length + semiPlans.length}
-            externalFilterConfig={filterConfig}
-            extraActions={
-              <Button size="sm" onClick={handleSearch}>
-                <RefreshCw className="mr-1.5 h-4 w-4" />
-                조회
-              </Button>
-            }
-          />
-          <div className="flex items-center gap-2 shrink-0">
-            <Button variant="outline" size="sm" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="text-emerald-600 dark:text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/10" onClick={() => setExcelUploadOpen(true)}>
+      <DynamicSearchFilter
+        tableName="sales_order_mng"
+        filterId="c16-plan-management"
+        onFilterChange={handleSearchFilterChange}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" className="text-success border-success/30 hover:bg-success/10" onClick={() => setExcelUploadOpen(true)}>
               <Upload className="mr-1.5 h-4 w-4" />
               엑셀업로드
             </Button>
@@ -946,14 +950,14 @@ export default function ProductionPlanManagementPage() {
               {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
             </Button>
           </div>
-        </div>
-      </div>
+        }
+      />
 
       {/* 데이터 섹션 */}
       <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg">
         {/* 왼쪽 패널 */}
         <ResizablePanel defaultSize={45} minSize={25}>
-          <div className="flex h-full flex-col rounded-lg border bg-background shadow-sm">
+          <div className="flex h-full flex-col rounded-lg border bg-card">
             <Tabs value={leftTab} onValueChange={setLeftTab} className="flex h-full flex-col">
               <div className="shrink-0 border-b bg-muted/30 px-5">
                 <TabsList className="h-11 bg-transparent gap-1">
@@ -984,7 +988,7 @@ export default function ProductionPlanManagementPage() {
                       />
                       <span className="font-medium text-foreground">계획에 없는 품목만</span>
                     </label>
-                    <Button size="sm" variant="outline" className="text-emerald-600 dark:text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/10" onClick={() => setOrderImportModalOpen(true)}>
+                    <Button size="sm" variant="outline" className="text-success border-success/30 hover:bg-success/10" onClick={() => setOrderImportModalOpen(true)}>
                       <Download className="mr-1 h-3.5 w-3.5" />
                       불러오기
                     </Button>
@@ -996,6 +1000,9 @@ export default function ProductionPlanManagementPage() {
                       {loadingOrders ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
                       새로고침
                     </Button>
+                    <Button size="sm" variant="ghost" onClick={() => ts.setOpen(true)}>
+                      <Settings2 className="h-3.5 w-3.5" />
+                    </Button>
                   </div>
                 </div>
                 <div className="flex-1 overflow-auto p-4">
@@ -1010,29 +1017,75 @@ export default function ProductionPlanManagementPage() {
                     </div>
                   ) : (
                     <div className="overflow-x-auto rounded-md border">
-                      <Table>
-                        <TableHeader>
-                          <TableRow className="bg-muted/50">
+                      {(() => {
+                        // 디테일 행에서 개별 값을 표시하는 컬럼 매핑
+                        const DETAIL_VALUE_MAP: Record<string, string> = {
+                          total_order_qty: "order_qty",
+                          total_ship_qty: "ship_qty",
+                          total_balance_qty: "balance_qty",
+                        };
+
+                        // 그룹 행에서 특수 렌더링이 필요한 컬럼
+                        const renderGroupCell = (col: { key: string }, item: any) => {
+                          if (col.key === "required_plan_qty") {
+                            return (
+                              <TableCell key={col.key} style={ts.thStyle(col.key)} className={cn("text-[13px] text-right font-bold", Number(item.required_plan_qty) > 0 ? "text-destructive" : "text-success")} onClick={() => toggleItemExpand(item.item_code)}>
+                                {formatNumber(item.required_plan_qty)}
+                              </TableCell>
+                            );
+                          }
+                          if (col.key === "lead_time") {
+                            return (
+                              <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
+                                {Number(item.lead_time) > 0 ? `${item.lead_time}일` : "-"}
+                              </TableCell>
+                            );
+                          }
+                          return (
+                            <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
+                              {formatNumber(item[col.key])}
+                            </TableCell>
+                          );
+                        };
+
+                        return (
+                      <Table style={{ tableLayout: "fixed" }}>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
                             <TableHead className="w-[30px]">
                               <Checkbox checked={selectedItemGroups.size === orderItems.length && orderItems.length > 0} onCheckedChange={(c) => toggleAllItemGroups(!!c)} className="h-4 w-4" />
                             </TableHead>
                             <TableHead className="w-[40px]" />
-                            <TableHead className="text-xs font-semibold whitespace-nowrap">품목코드</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap">품목명</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">총수주량</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">출고량</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">잔량</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">현재고</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">안전재고</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">기생산계획량</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">생산진행</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">필요생산계획</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">리드타임(일)</TableHead>
+                            <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                            <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            {ts.visibleColumns.map((col) => (
+                              <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                                {col.label}
+                              </TableHead>
+                            ))}
                           </TableRow>
                         </TableHeader>
                         <TableBody>
-                          {orderItems.map((item) => (
-                            <React.Fragment key={item.item_code}>
+                          {ts.groupData(orderItems).map((item, rowIdx) => {
+                            if (item._isGroupSummary) {
+                              return (
+                                <TableRow key={`summary-${rowIdx}`} className="bg-muted/60 font-semibold border-t border-primary/20">
+                                  <TableCell />
+                                  <TableCell />
+                                  <TableCell colSpan={2} />
+                                  {ts.visibleColumns.map((col) => {
+                                    const v = (item as any)[col.key];
+                                    return (
+                                    <TableCell key={col.key} style={ts.thStyle(col.key)} className={typeof v === "number" ? "text-right font-mono text-[13px]" : "text-[13px] text-primary"}>
+                                      {typeof v === "number" ? Number(v).toLocaleString() : (v || "")}
+                                    </TableCell>
+                                    );
+                                  })}
+                                </TableRow>
+                              );
+                            }
+                            return (
+                            <React.Fragment key={item.item_code || rowIdx}>
                               <TableRow className={cn("cursor-pointer border-t-2 border-t-primary/30 bg-primary/5 font-semibold hover:bg-primary/10", selectedItemGroups.has(item.item_code) && "bg-primary/10")}>
                                 <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
                                   <Checkbox checked={selectedItemGroups.has(item.item_code)} onCheckedChange={() => toggleItemGroupSelect(item.item_code)} className="h-4 w-4" />
@@ -1040,23 +1093,16 @@ export default function ProductionPlanManagementPage() {
                                 <TableCell className="text-center" onClick={() => toggleItemExpand(item.item_code)}>
                                   <ChevronRight className={cn("h-4 w-4 transition-transform duration-200", expandedItems.has(item.item_code) && "rotate-90")} />
                                 </TableCell>
-                                <TableCell className="text-xs text-primary" onClick={() => toggleItemExpand(item.item_code)}>{item.item_code}</TableCell>
-                                <TableCell className="text-xs text-primary" onClick={() => toggleItemExpand(item.item_code)}>{item.item_name}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.total_order_qty)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.total_ship_qty)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.total_balance_qty)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.current_stock)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.safety_stock)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.existing_plan_qty)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.in_progress_qty)}</TableCell>
-                                <TableCell className={cn("text-xs text-right font-bold", Number(item.required_plan_qty) > 0 ? "text-destructive" : "text-emerald-600 dark:text-emerald-400")} onClick={() => toggleItemExpand(item.item_code)}>
-                                  {formatNumber(item.required_plan_qty)}
-                                </TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
-                                  {Number(item.lead_time) > 0 ? `${item.lead_time}일` : "-"}
-                                </TableCell>
+                                <TableCell style={{ width: "140px", minWidth: "140px" }} className="text-[13px] text-primary truncate" onClick={() => toggleItemExpand(item.item_code)}>{item.item_code}</TableCell>
+                                <TableCell style={{ width: "140px", minWidth: "140px" }} className="text-[13px] text-primary truncate" onClick={() => toggleItemExpand(item.item_code)}>{item.item_name}</TableCell>
+                                {ts.visibleColumns.map((col) => renderGroupCell(col, item))}
                               </TableRow>
-                              {expandedItems.has(item.item_code) && item.orders?.map((detail) => (
+                              {expandedItems.has(item.item_code) && item.orders?.map((detail: any) => {
+                                let remainColSpan = 0;
+                                for (const col of ts.visibleColumns) {
+                                  if (!DETAIL_VALUE_MAP[col.key]) remainColSpan++;
+                                }
+                                return (
                                 <TableRow key={detail.id || detail.order_no} className="cursor-pointer hover:bg-muted/50">
                                   <TableCell />
                                   <TableCell />
@@ -1071,18 +1117,28 @@ export default function ProductionPlanManagementPage() {
                                       </Badge>
                                     </div>
                                   </TableCell>
-                                  <TableCell className="text-xs text-right">{formatNumber(detail.order_qty)}</TableCell>
-                                  <TableCell className="text-xs text-right">{formatNumber(detail.ship_qty)}</TableCell>
-                                  <TableCell className="text-xs text-right">{formatNumber(detail.balance_qty)}</TableCell>
-                                  <TableCell colSpan={6} className="text-xs text-muted-foreground">
-                                    납기일: {detail.due_date || "-"}
-                                  </TableCell>
+                                  {ts.visibleColumns.map((col) => {
+                                    const detailKey = DETAIL_VALUE_MAP[col.key];
+                                    if (detailKey) {
+                                      return <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right">{formatNumber(detail[detailKey])}</TableCell>;
+                                    }
+                                    return null;
+                                  })}
+                                  {remainColSpan > 0 && (
+                                    <TableCell colSpan={remainColSpan} className="text-[13px] text-muted-foreground">
+                                      납기일: {detail.due_date || "-"}
+                                    </TableCell>
+                                  )}
                                 </TableRow>
-                              ))}
+                                );
+                              })}
                             </React.Fragment>
-                          ))}
+                            );
+                          })}
                         </TableBody>
                       </Table>
+                        );
+                      })()}
                     </div>
                   )}
                 </div>
@@ -1093,7 +1149,7 @@ export default function ProductionPlanManagementPage() {
                 <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
                   <span className="text-base font-semibold">안전재고 부족 품목</span>
                   <div className="flex items-center gap-2">
-                    <Button size="sm" variant="outline" className="text-emerald-600 dark:text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/10" onClick={() => setStockImportModalOpen(true)}>
+                    <Button size="sm" variant="outline" className="text-success border-success/30 hover:bg-success/10" onClick={() => setStockImportModalOpen(true)}>
                       <Download className="mr-1 h-3.5 w-3.5" />
                       불러오기
                     </Button>
@@ -1120,18 +1176,18 @@ export default function ProductionPlanManagementPage() {
                   ) : (
                     <div className="overflow-x-auto rounded-md border">
                       <Table>
-                        <TableHeader>
-                          <TableRow className="bg-muted/50">
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
                             <TableHead className="w-[30px]">
                               <Checkbox checked={selectedStockItems.size === stockItems.length && stockItems.length > 0} onCheckedChange={(c) => toggleAllStockItems(!!c)} className="h-4 w-4" />
                             </TableHead>
-                            <TableHead className="text-xs font-semibold">품목코드</TableHead>
-                            <TableHead className="text-xs font-semibold">품목명</TableHead>
-                            <TableHead className="text-xs font-semibold text-right">현재고</TableHead>
-                            <TableHead className="text-xs font-semibold text-right">안전재고</TableHead>
-                            <TableHead className="text-xs font-semibold text-right">부족수량</TableHead>
-                            <TableHead className="text-xs font-semibold text-right">권장생산량</TableHead>
-                            <TableHead className="text-xs font-semibold">최종입고일</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">현재고</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">안전재고</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부족수량</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">권장생산량</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최종입고일</TableHead>
                           </TableRow>
                         </TableHeader>
                         <TableBody>
@@ -1140,13 +1196,13 @@ export default function ProductionPlanManagementPage() {
                               <TableCell>
                                 <Checkbox checked={selectedStockItems.has(stock.item_code)} onCheckedChange={() => toggleStockItem(stock.item_code)} className="h-4 w-4" />
                               </TableCell>
-                              <TableCell className="text-xs">{stock.item_code}</TableCell>
-                              <TableCell className="text-xs">{stock.item_name}</TableCell>
-                              <TableCell className="text-xs text-right">{formatNumber(stock.current_qty)}</TableCell>
-                              <TableCell className="text-xs text-right">{formatNumber(stock.safety_qty)}</TableCell>
-                              <TableCell className="text-xs text-right font-semibold text-destructive">{formatNumber(stock.shortage_qty)}</TableCell>
-                              <TableCell className="text-xs text-right font-semibold text-emerald-600 dark:text-emerald-400">{formatNumber(stock.recommended_qty)}</TableCell>
-                              <TableCell className="text-xs">{stock.last_in_date || "-"}</TableCell>
+                              <TableCell className="text-[13px]">{stock.item_code}</TableCell>
+                              <TableCell className="text-[13px]">{stock.item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right">{formatNumber(stock.current_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right">{formatNumber(stock.safety_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold text-destructive">{formatNumber(stock.shortage_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold text-success">{formatNumber(stock.recommended_qty)}</TableCell>
+                              <TableCell className="text-[13px]">{stock.last_in_date || "-"}</TableCell>
                             </TableRow>
                           ))}
                         </TableBody>
@@ -1163,7 +1219,7 @@ export default function ProductionPlanManagementPage() {
 
         {/* 오른쪽 패널 — 타임라인 */}
         <ResizablePanel defaultSize={55} minSize={30}>
-          <div className="flex h-full flex-col rounded-lg border bg-background shadow-sm">
+          <div className="flex h-full flex-col rounded-lg border bg-card">
             <Tabs value={rightTab} onValueChange={setRightTab} className="flex h-full flex-col">
               <div className="shrink-0 border-b bg-muted/30 px-5">
                 <TabsList className="h-11 bg-transparent gap-1">
@@ -1278,7 +1334,7 @@ export default function ProductionPlanManagementPage() {
                         </label>
                       </div>
                     </div>
-                    <div className="flex-1 rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-4">
+                    <div className="flex-1 rounded-lg border border-warning/20 bg-warning/5 p-4">
                       <p className="font-semibold text-foreground text-sm mb-2">반제품 계획 안내</p>
                       <ul className="text-xs text-foreground space-y-1 leading-relaxed">
                         <li>완제품 생산계획 기준으로 필요한 반제품 계획 자동 생성</li>
@@ -1335,15 +1391,15 @@ export default function ProductionPlanManagementPage() {
                 <div className="grid grid-cols-2 gap-3">
                   <div>
                     <Label className="text-xs">품목코드</Label>
-                    <Input value={selectedPlan.item_code} readOnly className="h-8 text-xs bg-muted/50" />
+                    <Input value={selectedPlan.item_code} readOnly className="h-9 text-xs bg-muted/50" />
                   </div>
                   <div>
                     <Label className="text-xs">품목명</Label>
-                    <Input value={selectedPlan.item_name || ""} readOnly className="h-8 text-xs bg-muted/50" />
+                    <Input value={selectedPlan.item_name || ""} readOnly className="h-9 text-xs bg-muted/50" />
                   </div>
                   <div>
                     <Label className="text-xs">계획번호</Label>
-                    <Input value={selectedPlan.plan_no || ""} readOnly className="h-8 text-xs bg-muted/50" />
+                    <Input value={selectedPlan.plan_no || ""} readOnly className="h-9 text-xs bg-muted/50" />
                   </div>
                   <div>
                     <Label className="text-xs">상태</Label>
@@ -1359,39 +1415,39 @@ export default function ProductionPlanManagementPage() {
                 <div className="grid grid-cols-2 gap-3">
                   <div>
                     <Label className="text-xs">총 생산수량</Label>
-                    <Input type="number" value={modalQuantity} onChange={(e) => setModalQuantity(Number(e.target.value))} className="h-8 text-xs" min={0} />
+                    <Input type="number" value={modalQuantity} onChange={(e) => setModalQuantity(Number(e.target.value))} className="h-9 text-xs" min={0} />
                   </div>
                   <div>
                     <Label className="text-xs">설비</Label>
                     <Select value={modalEquipmentId} onValueChange={setModalEquipmentId}>
-                      <SelectTrigger className="h-8 text-xs">
+                      <SelectTrigger className="h-9 text-xs">
                         <SelectValue placeholder="설비 선택" />
                       </SelectTrigger>
                       <SelectContent>
                         <SelectItem value="none">미지정</SelectItem>
                         {equipmentList.map((eq) => (
-                          <SelectItem key={eq.equipment_id} value={String(eq.equipment_id)}>
-                            {eq.equipment_name} ({eq.equipment_id})
+                          <SelectItem key={eq.id} value={eq.equipment_code || eq.id}>
+                            {eq.equipment_name} ({eq.equipment_code})
                           </SelectItem>
                         ))}
                       </SelectContent>
                     </Select>
                   </div>
                 </div>
-                <div className="mt-3 rounded-lg border border-emerald-500/20 bg-emerald-500/5 p-3">
+                <div className="mt-3 rounded-lg border border-success/20 bg-success/5 p-3">
                   <p className="text-xs font-semibold text-foreground mb-2">계획 기간 설정</p>
                   <div className="grid grid-cols-3 gap-3">
                     <div>
                       <Label className="text-[11px] text-muted-foreground">시작일</Label>
-                      <FormDatePicker value={modalStartDate} onChange={setModalStartDate} placeholder="시작일" />
+                      <Input type="date" value={modalStartDate} onChange={(e) => setModalStartDate(e.target.value)} className="h-9 text-xs" />
                     </div>
                     <div>
                       <Label className="text-[11px] text-muted-foreground">종료일</Label>
-                      <FormDatePicker value={modalEndDate} onChange={setModalEndDate} placeholder="종료일" />
+                      <Input type="date" value={modalEndDate} onChange={(e) => setModalEndDate(e.target.value)} className="h-9 text-xs" />
                     </div>
                     <div>
                       <Label className="text-[11px] text-muted-foreground">생산 기간</Label>
-                      <div className="flex h-8 items-center justify-center rounded-md border bg-background text-xs font-semibold text-primary">
+                      <div className="flex h-9 items-center justify-center rounded-md border bg-muted/50 text-xs font-semibold text-primary">
                         {modalStartDate && modalEndDate
                           ? `${Math.ceil((new Date(modalEndDate).getTime() - new Date(modalStartDate).getTime()) / (1000 * 60 * 60 * 24) + 1)}일`
                           : "-"}
@@ -1401,7 +1457,7 @@ export default function ProductionPlanManagementPage() {
                 </div>
               </div>
 
-              <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-4">
+              <div className="rounded-lg border border-warning/20 bg-warning/5 p-4">
                 <div className="flex items-center justify-between mb-2">
                   <p className="text-sm font-semibold flex items-center gap-1.5">
                     <Scissors className="h-4 w-4" />
@@ -1409,7 +1465,8 @@ export default function ProductionPlanManagementPage() {
                   </p>
                   <Button
                     size="sm"
-                    className="h-7 text-xs bg-gradient-to-br from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700"
+                    variant="warning"
+                    className="h-7 text-xs"
                     onClick={() => {
                       const qty = Math.floor(modalQuantity / 2);
                       if (qty > 0) handleSplitSchedule(qty);
@@ -1426,15 +1483,15 @@ export default function ProductionPlanManagementPage() {
                 <div className="grid grid-cols-2 gap-3">
                   <div>
                     <Label className="text-xs">담당자</Label>
-                    <Input value={modalManager} onChange={(e) => setModalManager(e.target.value)} className="h-8 text-xs" placeholder="담당자명" />
+                    <Input value={modalManager} onChange={(e) => setModalManager(e.target.value)} className="h-9 text-xs" placeholder="담당자명" />
                   </div>
                   <div>
                     <Label className="text-xs">작업지시번호</Label>
-                    <Input value={modalWorkOrderNo} onChange={(e) => setModalWorkOrderNo(e.target.value)} className="h-8 text-xs" placeholder="자동생성" />
+                    <Input value={modalWorkOrderNo} onChange={(e) => setModalWorkOrderNo(e.target.value)} className="h-9 text-xs" placeholder="자동생성" />
                   </div>
                   <div className="col-span-2">
                     <Label className="text-xs">비고</Label>
-                    <Input value={modalRemarks} onChange={(e) => setModalRemarks(e.target.value)} className="h-8 text-xs" placeholder="비고사항 입력" />
+                    <Input value={modalRemarks} onChange={(e) => setModalRemarks(e.target.value)} className="h-9 text-xs" placeholder="비고사항 입력" />
                   </div>
                 </div>
               </div>
@@ -1442,7 +1499,7 @@ export default function ProductionPlanManagementPage() {
           )}
 
           <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="destructive" onClick={handleDeletePlan} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+            <Button variant="outline" onClick={handleDeletePlan} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10">
               <Trash2 className="mr-1 h-3.5 w-3.5" />
               삭제
             </Button>
@@ -1498,9 +1555,9 @@ export default function ProductionPlanManagementPage() {
               </div>
             </div>
 
-            <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-3">
+            <div className="rounded-lg border border-warning/20 bg-warning/5 p-3">
               <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
-                <AlertTriangle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+                <AlertTriangle className="h-4 w-4 text-warning" />
                 주의사항
               </p>
               <ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside leading-relaxed">
@@ -1579,9 +1636,9 @@ export default function ProductionPlanManagementPage() {
               </div>
             </div>
 
-            <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-3">
+            <div className="rounded-lg border border-warning/20 bg-warning/5 p-3">
               <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
-                <AlertTriangle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+                <AlertTriangle className="h-4 w-4 text-warning" />
                 주의사항
               </p>
               <ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside leading-relaxed">
@@ -1636,11 +1693,11 @@ export default function ProductionPlanManagementPage() {
                   <p className="text-2xl font-bold text-foreground">{previewData.summary?.total ?? 0}</p>
                   <p className="text-xs text-muted-foreground mt-1">총 계획</p>
                 </div>
-                <div className="rounded-lg border bg-emerald-500/10 p-3 text-center">
+                <div className="rounded-lg border bg-success/10 p-3 text-center">
                   <p className="text-2xl font-bold text-foreground">{previewData.summary?.new_count ?? 0}</p>
                   <p className="text-xs text-muted-foreground mt-1">신규 생성</p>
                 </div>
-                <div className="rounded-lg border bg-yellow-500/10 p-3 text-center">
+                <div className="rounded-lg border bg-warning/10 p-3 text-center">
                   <p className="text-2xl font-bold text-foreground">{previewData.summary?.kept_count ?? 0}</p>
                   <p className="text-xs text-muted-foreground mt-1">유지됨</p>
                 </div>
@@ -1652,29 +1709,29 @@ export default function ProductionPlanManagementPage() {
 
               {(previewData.schedules?.length || 0) > 0 && (
                 <div>
-                  <p className="text-sm font-semibold mb-2 text-emerald-600 dark:text-emerald-400 flex items-center gap-1.5">
+                  <p className="text-sm font-semibold mb-2 text-success flex items-center gap-1.5">
                     <Zap className="h-4 w-4" />
                     신규 생성 ({previewData.schedules?.length || 0}건)
                   </p>
-                  <div className="rounded-md border border-emerald-500/20 overflow-x-auto">
+                  <div className="rounded-md border border-success/20 overflow-x-auto">
                     <Table>
-                      <TableHeader>
-                        <TableRow className="bg-emerald-500/5">
-                          <TableHead className="text-xs font-semibold">품목코드</TableHead>
-                          <TableHead className="text-xs font-semibold">품목명</TableHead>
-                          <TableHead className="text-xs font-semibold text-right">수량</TableHead>
-                          <TableHead className="text-xs font-semibold">시작일</TableHead>
-                          <TableHead className="text-xs font-semibold">종료일</TableHead>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">시작일</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">종료일</TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
                         {(previewData.schedules || []).map((s: any, idx: number) => (
                           <TableRow key={`new-${idx}`}>
-                            <TableCell className="text-xs">{s.item_code}</TableCell>
-                            <TableCell className="text-xs">{s.item_name}</TableCell>
-                            <TableCell className="text-xs text-right">{formatNumber(s.plan_qty || s.required_qty)}</TableCell>
-                            <TableCell className="text-xs">{s.start_date?.split("T")[0]}</TableCell>
-                            <TableCell className="text-xs">{s.end_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty || s.required_qty)}</TableCell>
+                            <TableCell className="text-[13px]">{s.start_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.end_date?.split("T")[0]}</TableCell>
                           </TableRow>
                         ))}
                       </TableBody>
@@ -1691,25 +1748,25 @@ export default function ProductionPlanManagementPage() {
                   </p>
                   <div className="rounded-md border border-destructive/20 overflow-x-auto">
                     <Table>
-                      <TableHeader>
-                        <TableRow className="bg-destructive/5">
-                          <TableHead className="text-xs font-semibold">계획번호</TableHead>
-                          <TableHead className="text-xs font-semibold">품목코드</TableHead>
-                          <TableHead className="text-xs font-semibold">품목명</TableHead>
-                          <TableHead className="text-xs font-semibold text-right">수량</TableHead>
-                          <TableHead className="text-xs font-semibold">시작일</TableHead>
-                          <TableHead className="text-xs font-semibold">종료일</TableHead>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">시작일</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">종료일</TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
                         {(previewData.deletedSchedules || []).map((s: any, idx: number) => (
                           <TableRow key={`del-${idx}`} className="text-destructive/80">
-                            <TableCell className="text-xs">{s.plan_no || "-"}</TableCell>
-                            <TableCell className="text-xs">{s.item_code}</TableCell>
-                            <TableCell className="text-xs">{s.item_name}</TableCell>
-                            <TableCell className="text-xs text-right">{formatNumber(s.plan_qty)}</TableCell>
-                            <TableCell className="text-xs">{s.start_date?.split("T")[0]}</TableCell>
-                            <TableCell className="text-xs">{s.end_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.plan_no || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty)}</TableCell>
+                            <TableCell className="text-[13px]">{s.start_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.end_date?.split("T")[0]}</TableCell>
                           </TableRow>
                         ))}
                       </TableBody>
@@ -1720,29 +1777,29 @@ export default function ProductionPlanManagementPage() {
 
               {(previewData.keptSchedules?.length || 0) > 0 && (
                 <div>
-                  <p className="text-sm font-semibold mb-2 text-yellow-600 dark:text-yellow-400 flex items-center gap-1.5">
+                  <p className="text-sm font-semibold mb-2 text-warning flex items-center gap-1.5">
                     <Package className="h-4 w-4" />
                     유지됨 ({previewData.keptSchedules?.length || 0}건)
                   </p>
-                  <div className="rounded-md border border-yellow-500/20 overflow-x-auto">
+                  <div className="rounded-md border border-warning/20 overflow-x-auto">
                     <Table>
-                      <TableHeader>
-                        <TableRow className="bg-yellow-500/5">
-                          <TableHead className="text-xs font-semibold">계획번호</TableHead>
-                          <TableHead className="text-xs font-semibold">품목코드</TableHead>
-                          <TableHead className="text-xs font-semibold">품목명</TableHead>
-                          <TableHead className="text-xs font-semibold text-right">수량</TableHead>
-                          <TableHead className="text-xs font-semibold">상태</TableHead>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
                         {(previewData.keptSchedules || []).map((s: any, idx: number) => (
                           <TableRow key={`kept-${idx}`}>
-                            <TableCell className="text-xs">{s.plan_no || "-"}</TableCell>
-                            <TableCell className="text-xs">{s.item_code}</TableCell>
-                            <TableCell className="text-xs">{s.item_name}</TableCell>
-                            <TableCell className="text-xs text-right">{formatNumber(s.plan_qty)}</TableCell>
-                            <TableCell className="text-xs">
+                            <TableCell className="text-[13px]">{s.plan_no || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty)}</TableCell>
+                            <TableCell className="text-[13px]">
                               <Badge variant="outline" className="text-[10px]">{STATUS_LABEL[s.status] || s.status}</Badge>
                             </TableCell>
                           </TableRow>
@@ -1776,16 +1833,18 @@ export default function ProductionPlanManagementPage() {
         }}
       />
 
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
       {/* ConfirmDialog 렌더 */}
       {ConfirmDialogComponent}
-
-      <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName="production_plan_mng"
-        settingsId="production-plan"
-        onSave={applyTableSettings}
-      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_10/production/process-info/ItemRoutingTab.tsx b/frontend/app/(main)/COMPANY_10/production/process-info/ItemRoutingTab.tsx
index 655b9c69..a5b136c2 100644
--- a/frontend/app/(main)/COMPANY_10/production/process-info/ItemRoutingTab.tsx
+++ b/frontend/app/(main)/COMPANY_10/production/process-info/ItemRoutingTab.tsx
@@ -5,7 +5,15 @@ import { GitBranch, Loader2, PackagePlus, Pencil, Plus, Save, Search, Star, Tras
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import {
   Dialog,
   DialogContent,
@@ -14,11 +22,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import {
   createRoutingVersion,
   getProcessList,
@@ -90,7 +93,6 @@ export function ItemRoutingTab() {
   const [formOutsource, setFormOutsource] = useState("");
   const [detailSubmitting, setDetailSubmitting] = useState(false);
 
-  // 품목 등록 모달 state
   const [registerDialogOpen, setRegisterDialogOpen] = useState(false);
   const [registerSearch, setRegisterSearch] = useState("");
   const [registerSearchDebounced, setRegisterSearchDebounced] = useState("");
@@ -116,7 +118,7 @@ export function ItemRoutingTab() {
       if (res.success && res.data) {
         setItems(res.data);
       } else {
-        toast.error(res.message || "품목 목록을 불러오지 못했습니다.");
+        toast.error(res.message || "품목 목록을 불러오지 못했어요");
         setItems([]);
       }
     } finally {
@@ -133,7 +135,7 @@ export function ItemRoutingTab() {
     try {
       const procRes = await getProcessList({ useYn: "Y" });
       if (!procRes.success || !procRes.data) {
-        toast.error(procRes.message || "공정 목록을 불러오지 못했습니다.");
+        toast.error(procRes.message || "공정 목록을 불러오지 못했어요");
         setProcesses([]);
         return;
       }
@@ -147,7 +149,6 @@ export function ItemRoutingTab() {
     void loadProcesses();
   }, [loadProcesses]);
 
-  // 등록 모달 품목 검색
   const loadRegisterItems = useCallback(async (search: string) => {
     setRegisterLoading(true);
     try {
@@ -167,12 +168,11 @@ export function ItemRoutingTab() {
     void loadRegisterItems(registerSearchDebounced);
   }, [registerSearchDebounced, registerDialogOpen, loadRegisterItems]);
 
-  // 이미 등록된 품목인지 판별 (item_code 기준)
   const registeredItemCodes = useMemo(() => new Set(items.map((i) => i.item_code)), [items]);
 
   const handleRegisterItems = async () => {
     if (registerSelectedIds.size === 0) {
-      toast.error("등록할 품목을 선택하세요.");
+      toast.error("등록할 품목을 선택해주세요");
       return;
     }
     setRegisterSubmitting(true);
@@ -184,13 +184,13 @@ export function ItemRoutingTab() {
       }));
       const res = await registerItemsBatch(batchItems);
       if (res.success) {
-        toast.success(`${batchItems.length}건 품목이 등록되었습니다.`);
+        toast.success(`${batchItems.length}건 품목이 등록되었어요`);
         setRegisterDialogOpen(false);
         setRegisterSearch("");
         setRegisterSelectedIds(new Set());
         void loadItems(debouncedSearch);
       } else {
-        toast.error(res.message || "품목 등록에 실패했습니다.");
+        toast.error(res.message || "품목 등록에 실패했어요");
       }
     } finally {
       setRegisterSubmitting(false);
@@ -206,7 +206,7 @@ export function ItemRoutingTab() {
     try {
       const res = await getRoutingVersions(item.item_code);
       if (!res.success || !res.data) {
-        toast.error(res.message || "라우팅 버전을 불러오지 못했습니다.");
+        toast.error(res.message || "라우팅 버전을 불러오지 못했어요");
         return;
       }
       const list = res.data.map((v) => ({ ...v, is_default: normalizeDefaultFlag(v) }));
@@ -233,7 +233,7 @@ export function ItemRoutingTab() {
       if (res.success && res.data) {
         setDetails(sortDetailsBySeq(res.data));
       } else {
-        toast.error(res.message || "라우팅 공정을 불러오지 못했습니다.");
+        toast.error(res.message || "라우팅 공정을 불러오지 못했어요");
         setDetails([]);
       }
     } finally {
@@ -253,7 +253,7 @@ export function ItemRoutingTab() {
 
   const openAddDetailDialog = () => {
     if (!selectedVersionId) {
-      toast.error("먼저 라우팅 버전을 선택하세요.");
+      toast.error("먼저 라우팅 버전을 선택해주세요");
       return;
     }
     setDetailDialogMode("add");
@@ -271,17 +271,17 @@ export function ItemRoutingTab() {
 
   const openEditDetailDialog = () => {
     if (!selectedVersionId) {
-      toast.error("먼저 라우팅 버전을 선택하세요.");
+      toast.error("먼저 라우팅 버전을 선택해주세요");
       return;
     }
     if (selectedDetailIds.size !== 1) {
-      toast.error("수정할 공정 한 건만 선택하세요.");
+      toast.error("수정할 공정 한 건만 선택해주세요");
       return;
     }
     const id = [...selectedDetailIds][0];
     const row = details.find((d) => d.id === id);
     if (!row) {
-      toast.error("선택한 공정을 찾을 수 없습니다.");
+      toast.error("선택한 공정을 찾을 수 없어요");
       return;
     }
     setDetailDialogMode("edit");
@@ -299,17 +299,17 @@ export function ItemRoutingTab() {
   const submitDetailForm = () => {
     if (!selectedVersionId) return;
     if (!formProcessCode) {
-      toast.error("공정을 선택하세요.");
+      toast.error("공정을 선택해주세요");
       return;
     }
     const seq = parseInt(formSeqNo, 10);
     if (Number.isNaN(seq) || seq < 1) {
-      toast.error("올바른 순번을 입력하세요.");
+      toast.error("올바른 순번을 입력해주세요");
       return;
     }
     const st = formStandardTime.trim();
     if (st !== "" && Number.isNaN(Number(st))) {
-      toast.error("표준작업시간은 숫자로 입력하세요.");
+      toast.error("표준작업시간은 숫자로 입력해주세요");
       return;
     }
     const proc = processes.find((p) => p.process_code === formProcessCode);
@@ -331,7 +331,7 @@ export function ItemRoutingTab() {
           outsource_supplier: outsource,
         };
         setDetails((prev) => sortDetailsBySeq([...prev, newRow]));
-        toast.success("공정이 추가되었습니다. 저장을 눌러 반영하세요.");
+        toast.success("공정이 추가되었어요. 저장을 눌러 반영해주세요");
       } else if (editingDetailId) {
         setDetails((prev) =>
           sortDetailsBySeq(
@@ -352,7 +352,7 @@ export function ItemRoutingTab() {
             ),
           ),
         );
-        toast.success("공정이 수정되었습니다. 저장을 눌러 반영하세요.");
+        toast.success("공정이 수정되었어요. 저장을 눌러 반영해주세요");
       }
       setDetailDialogOpen(false);
     } finally {
@@ -362,36 +362,17 @@ export function ItemRoutingTab() {
 
   const deleteSelectedDetails = () => {
     if (selectedDetailIds.size === 0) {
-      toast.error("삭제할 공정을 선택하세요.");
+      toast.error("삭제할 공정을 선택해주세요");
       return;
     }
     setDetails((prev) => prev.filter((d) => !selectedDetailIds.has(d.id)));
     setSelectedDetailIds(new Set());
-    toast.success("선택한 공정이 목록에서 제거되었습니다. 저장을 눌러 반영하세요.");
+    toast.success("선택한 공정이 제거되었어요. 저장을 눌러 반영해주세요");
   };
 
-  const toggleDetailSelected = (id: string, checked: boolean) => {
-    setSelectedDetailIds((prev) => {
-      const next = new Set(prev);
-      if (checked) next.add(id);
-      else next.delete(id);
-      return next;
-    });
-  };
-
-  const toggleAllDetails = (checked: boolean) => {
-    if (!checked) {
-      setSelectedDetailIds(new Set());
-      return;
-    }
-    setSelectedDetailIds(new Set(details.map((d) => d.id)));
-  };
-
-  const allDetailsSelected = details.length > 0 && details.every((d) => selectedDetailIds.has(d.id));
-
   const persistDetails = async () => {
     if (!selectedVersionId) {
-      toast.error("저장할 버전이 없습니다.");
+      toast.error("저장할 버전이 없어요");
       return;
     }
     const payload = details.map((d) => ({
@@ -408,10 +389,10 @@ export function ItemRoutingTab() {
     try {
       const res = await saveRoutingDetails(selectedVersionId, payload);
       if (res.success) {
-        toast.success("저장되었습니다.");
+        toast.success("저장되었어요");
         await loadDetails(selectedVersionId);
       } else {
-        toast.error(res.message || "저장에 실패했습니다.");
+        toast.error(res.message || "저장에 실패했어요");
       }
     } finally {
       setSaving(false);
@@ -422,7 +403,7 @@ export function ItemRoutingTab() {
     if (!selectedItem) return;
     const name = versionName.trim();
     if (!name) {
-      toast.error("버전명을 입력하세요.");
+      toast.error("버전명을 입력해주세요");
       return;
     }
     setVersionSubmitting(true);
@@ -434,7 +415,7 @@ export function ItemRoutingTab() {
         is_default: versionIsDefault || undefined,
       });
       if (res.success && res.data) {
-        toast.success("버전이 추가되었습니다.");
+        toast.success("버전이 추가되었어요");
         setVersionDialogOpen(false);
         setVersionName("");
         setVersionDescription("");
@@ -442,62 +423,77 @@ export function ItemRoutingTab() {
         const created = res.data as RoutingVersion;
         await loadVersions(selectedItem, created?.id);
       } else {
-        toast.error(res.message || "버전 추가에 실패했습니다.");
+        toast.error(res.message || "버전 추가에 실패했어요");
       }
     } finally {
       setVersionSubmitting(false);
     }
   };
 
+  const detailsGridData = useMemo(
+    () =>
+      details.map((d) => ({
+        ...d,
+        process_display: d.process_name || d.process_code,
+        outsource_display: d.outsource_supplier || "—",
+      })),
+    [details],
+  );
+
   return (
-    <div className="flex min-h-[420px] w-full flex-1 flex-col md:min-h-[560px]">
-      <ResizablePanelGroup
-        direction="horizontal"
-        className="border-border flex min-h-[420px] flex-1 rounded-lg border md:min-h-[560px]"
-      >
-        <ResizablePanel defaultSize={30} minSize={18} className="min-w-0">
-          <div className="flex h-full flex-col gap-3 p-3 sm:p-4">
-            <div className="flex items-center gap-2">
-              <div className="relative flex-1">
-                <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 sm:h-4 sm:w-4" />
-              <Input
-                value={searchInput}
-                onChange={(e) => setSearchInput(e.target.value)}
-                placeholder="품목코드 / 품목명 검색"
-                className="focus-visible:ring-ring h-8 pl-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:pl-9 sm:text-sm"
-                aria-label="품목 검색"
-              />
+    <div className="flex h-full flex-col">
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+        {/* 좌측: 등록 품목 */}
+        <ResizablePanel defaultSize={30} minSize={18}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <PackagePlus className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">등록 품목</span>
+              <Badge variant="secondary" className="font-mono text-xs">
+                {items.length}건
+              </Badge>
+              <div className="ml-auto">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setRegisterSearch("");
+                    setRegisterSelectedIds(new Set());
+                    setRegisterItems([]);
+                    setRegisterDialogOpen(true);
+                  }}
+                >
+                  <Plus className="mr-1 h-3.5 w-3.5" />
+                  품목 등록
+                </Button>
               </div>
-              <Button
-                type="button"
-                size="icon"
-                variant="outline"
-                className="h-8 w-8 shrink-0 sm:h-10 sm:w-10"
-                onClick={() => {
-                  setRegisterSearch("");
-                  setRegisterSelectedIds(new Set());
-                  setRegisterItems([]);
-                  setRegisterDialogOpen(true);
-                }}
-                title="품목 등록"
-              >
-                <PackagePlus className="h-4 w-4" />
-              </Button>
             </div>
-            <div className="min-h-0 flex-1 overflow-hidden">
+
+            <div className="border-b px-3 py-2">
+              <div className="relative">
+                <Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  value={searchInput}
+                  onChange={(e) => setSearchInput(e.target.value)}
+                  placeholder="품목코드 / 품목명 검색"
+                  className="h-8 pl-8 text-xs"
+                  aria-label="품목 검색"
+                />
+              </div>
+            </div>
+
+            <div className="min-h-0 flex-1 overflow-auto p-3">
               {itemsLoading ? (
-                <div className="text-muted-foreground flex h-40 items-center justify-center gap-2 text-xs sm:text-sm">
-                  <Loader2 className="text-primary h-5 w-5 animate-spin" />
-                  불러오는 중...
+                <div className="flex items-center justify-center gap-2 py-12 text-muted-foreground">
+                  <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                  <span className="text-sm">불러오는 중...</span>
                 </div>
               ) : items.length === 0 ? (
-                <div className="flex flex-col items-center justify-center gap-3 px-1 py-10">
-                  <p className="text-muted-foreground text-center text-xs sm:text-sm">등록된 품목이 없습니다.</p>
+                <div className="flex flex-col items-center justify-center gap-3 py-12">
+                  <p className="text-sm text-muted-foreground">등록된 품목이 없어요</p>
                   <Button
-                    type="button"
-                    variant="outline"
+                    variant="ghost"
                     size="sm"
-                    className="gap-1 text-xs"
                     onClick={() => {
                       setRegisterSearch("");
                       setRegisterSelectedIds(new Set());
@@ -505,12 +501,12 @@ export function ItemRoutingTab() {
                       setRegisterDialogOpen(true);
                     }}
                   >
-                    <PackagePlus className="h-3.5 w-3.5" />
+                    <PackagePlus className="mr-1 h-3.5 w-3.5" />
                     품목 등록하기
                   </Button>
                 </div>
               ) : (
-                <div className="flex h-full max-h-[calc(100vh-16rem)] flex-col gap-2 overflow-y-auto pr-1">
+                <div className="space-y-2">
                   {items.map((item) => {
                     const active = selectedItem?.id === item.id;
                     return (
@@ -519,15 +515,13 @@ export function ItemRoutingTab() {
                         type="button"
                         onClick={() => setSelectedItem(item)}
                         className={cn(
-                          "focus-visible:ring-ring w-full rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-offset-2",
-                          "border-border bg-card hover:bg-accent/50 shadow-sm",
-                          active && "border-primary ring-ring/30 ring-2",
+                          "w-full rounded-lg border p-3 text-left transition-colors",
+                          "border-border bg-card hover:bg-muted/30",
+                          active && "border-primary ring-2 ring-ring/30",
                         )}
                       >
-                        <p className="text-foreground text-xs font-medium sm:text-sm">{item.item_code}</p>
-                        <p className="text-muted-foreground mt-0.5 line-clamp-2 text-[11px] sm:text-xs">
-                          {item.item_name}
-                        </p>
+                        <p className="text-sm font-medium text-foreground">{item.item_code}</p>
+                        <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">{item.item_name}</p>
                       </button>
                     );
                   })}
@@ -539,73 +533,72 @@ export function ItemRoutingTab() {
 
         <ResizableHandle withHandle />
 
-        <ResizablePanel defaultSize={70} minSize={35} className="min-w-0">
-          <div className="flex h-full min-h-0 flex-col">
+        {/* 우측: 버전 + 라우팅 상세 */}
+        <ResizablePanel defaultSize={70} minSize={35}>
+          <div className="flex h-full flex-col">
             {!selectedItem ? (
-              <div className="text-muted-foreground flex flex-1 flex-col items-center justify-center gap-2 px-4 text-center text-xs sm:text-sm">
-                <GitBranch className="h-8 w-8 opacity-50" aria-hidden />
-                좌측에서 품목을 선택하면 라우팅을 관리할 수 있습니다.
+              <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+                <GitBranch className="h-10 w-10 opacity-40" />
+                <p className="text-sm font-medium text-foreground">좌측에서 품목을 선택해주세요</p>
+                <p className="max-w-xs text-xs">품목을 선택하면 라우팅 버전과 공정을 관리할 수 있어요</p>
               </div>
             ) : (
               <>
-                <div className="border-border flex shrink-0 flex-col gap-3 border-b p-3 sm:p-4">
-                  <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                    <div className="min-w-0">
-                      <p className="text-foreground text-xs font-semibold sm:text-sm">{selectedItem.item_name}</p>
-                      <p className="text-muted-foreground mt-0.5 text-[11px] sm:text-xs">
-                        품목코드 {selectedItem.item_code}
-                      </p>
-                    </div>
-                    <div className="flex shrink-0 gap-2">
-                      <Button
-                        type="button"
-                        size="sm"
-                        variant="destructive"
-                        className="h-8 gap-1 text-xs sm:h-9 sm:text-sm"
-                        onClick={async () => {
-                          if (!selectedItem.registered_id) return;
-                          const res = await unregisterItem(selectedItem.registered_id);
-                          if (res.success) {
-                            toast.success("품목 등록이 해제되었습니다.");
-                            setSelectedItem(null);
-                            void loadItems(debouncedSearch);
-                          } else {
-                            toast.error(res.message || "등록 해제에 실패했습니다.");
-                          }
-                        }}
-                      >
-                        <Trash2 className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
-                        등록 해제
-                      </Button>
-                      <Button
-                        type="button"
-                        size="sm"
-                        className="h-8 gap-1 text-xs sm:h-9 sm:text-sm"
-                        onClick={() => {
-                          setVersionName("");
-                          setVersionDescription("");
-                          setVersionIsDefault(false);
-                          setVersionDialogOpen(true);
-                        }}
-                      >
-                        <Plus className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
-                        버전 추가
-                      </Button>
-                    </div>
+                {/* 패널 헤더 */}
+                <div className="flex items-center gap-3 border-b bg-muted/30 px-4 py-2">
+                  <GitBranch className="h-4 w-4 shrink-0 text-muted-foreground" />
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-semibold">{selectedItem.item_name}</p>
+                    <p className="text-xs text-muted-foreground">품목코드 {selectedItem.item_code}</p>
                   </div>
+                  <div className="flex shrink-0 gap-2">
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={async () => {
+                        if (!selectedItem.registered_id) return;
+                        const res = await unregisterItem(selectedItem.registered_id);
+                        if (res.success) {
+                          toast.success("품목 등록이 해제되었어요");
+                          setSelectedItem(null);
+                          void loadItems(debouncedSearch);
+                        } else {
+                          toast.error(res.message || "등록 해제에 실패했어요");
+                        }
+                      }}
+                    >
+                      <Trash2 className="mr-1 h-3.5 w-3.5" />
+                      등록 해제
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={() => {
+                        setVersionName("");
+                        setVersionDescription("");
+                        setVersionIsDefault(false);
+                        setVersionDialogOpen(true);
+                      }}
+                    >
+                      <Plus className="mr-1 h-3.5 w-3.5" />
+                      버전 추가
+                    </Button>
+                  </div>
+                </div>
 
-                  <div className="flex flex-wrap items-center gap-2">
-                    {versionsLoading ? (
-                      <div className="text-muted-foreground flex items-center gap-2 text-xs sm:text-sm">
-                        <Loader2 className="text-primary h-4 w-4 animate-spin" />
-                        버전 불러오는 중...
-                      </div>
-                    ) : versions.length === 0 ? (
-                      <p className="text-muted-foreground text-xs sm:text-sm">
-                        등록된 버전이 없습니다. 버전을 추가하세요.
-                      </p>
-                    ) : (
-                      versions.map((v) => {
+                {/* 버전 pills */}
+                <div className="border-b bg-muted/30 px-4 py-2">
+                  {versionsLoading ? (
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Loader2 className="h-4 w-4 animate-spin text-primary" />
+                      버전 불러오는 중...
+                    </div>
+                  ) : versions.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">
+                      등록된 버전이 없어요. 버전을 추가해주세요.
+                    </p>
+                  ) : (
+                    <div className="flex flex-wrap items-center gap-2">
+                      {versions.map((v) => {
                         const selected = v.id === selectedVersionId;
                         const def = normalizeDefaultFlag(v);
                         return (
@@ -614,7 +607,7 @@ export function ItemRoutingTab() {
                             type="button"
                             onClick={() => setSelectedVersionId(v.id)}
                             className={cn(
-                              "focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm",
+                              "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors",
                               selected
                                 ? "border-primary bg-primary text-primary-foreground"
                                 : "border-border bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -623,7 +616,7 @@ export function ItemRoutingTab() {
                             {def && (
                               <Star
                                 className={cn(
-                                  "h-3.5 w-3.5 sm:h-4 sm:w-4",
+                                  "h-3.5 w-3.5",
                                   selected ? "fill-primary-foreground" : "fill-warning text-warning",
                                 )}
                                 aria-label="기본 버전"
@@ -632,136 +625,88 @@ export function ItemRoutingTab() {
                             {v.version_name}
                           </button>
                         );
-                      })
+                      })}
+                    </div>
+                  )}
+                </div>
+
+                {/* 액션 바 */}
+                <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-semibold">라우팅 공정</span>
+                    <Badge variant="secondary" className="font-mono text-xs">
+                      {details.length}건
+                    </Badge>
+                  </div>
+                  <div className="flex gap-2">
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={openAddDetailDialog}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Plus className="mr-1 h-3.5 w-3.5" />
+                    공정 추가
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={openEditDetailDialog}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Pencil className="mr-1 h-3.5 w-3.5" />
+                    수정
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={deleteSelectedDetails}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Trash2 className="mr-1 h-3.5 w-3.5" />
+                    선택 삭제
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={() => void persistDetails()}
+                    disabled={!selectedVersionId || detailsLoading || saving}
+                  >
+                    {saving ? (
+                      <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Save className="mr-1 h-3.5 w-3.5" />
                     )}
+                    저장
+                  </Button>
                   </div>
                 </div>
 
-                <div className="flex min-h-0 flex-1 flex-col gap-3 p-3 sm:p-4">
-                  <div className="flex flex-wrap gap-2">
-                    <Button
-                      type="button"
-                      variant="secondary"
-                      size="sm"
-                      className="h-8 text-xs sm:h-9 sm:text-sm"
-                      onClick={openAddDetailDialog}
-                      disabled={!selectedVersionId || detailsLoading}
-                    >
-                      <Plus className="mr-1 h-3.5 w-3.5" />
-                      공정 추가
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="secondary"
-                      size="sm"
-                      className="h-8 text-xs sm:h-9 sm:text-sm"
-                      onClick={openEditDetailDialog}
-                      disabled={!selectedVersionId || detailsLoading}
-                    >
-                      <Pencil className="mr-1 h-3.5 w-3.5" />
-                      수정
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      className="h-8 text-xs sm:h-9 sm:text-sm"
-                      onClick={deleteSelectedDetails}
-                      disabled={!selectedVersionId || detailsLoading}
-                    >
-                      <Trash2 className="mr-1 h-3.5 w-3.5" />
-                      선택 삭제
-                    </Button>
-                    <Button
-                      type="button"
-                      size="sm"
-                      className="h-8 text-xs sm:h-9 sm:text-sm"
-                      onClick={() => void persistDetails()}
-                      disabled={!selectedVersionId || detailsLoading || saving}
-                    >
-                      {saving ? (
-                        <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
-                      ) : (
-                        <Save className="mr-1 h-3.5 w-3.5" />
-                      )}
-                      저장
-                    </Button>
-                  </div>
-
-                  <div className="border-border min-h-0 flex-1 overflow-hidden rounded-md border">
-                    {detailsLoading ? (
-                      <div className="text-muted-foreground flex h-48 items-center justify-center gap-2 text-xs sm:text-sm">
-                        <Loader2 className="text-primary h-5 w-5 animate-spin" />
-                        공정 순서 불러오는 중...
-                      </div>
-                    ) : !selectedVersionId ? (
-                      <p className="text-muted-foreground p-6 text-center text-xs sm:text-sm">버전을 선택하세요.</p>
-                    ) : (
-                      <div className="h-full max-h-[calc(100vh-20rem)] overflow-auto">
-                        <Table>
-                          <TableHeader>
-                            <TableRow className="hover:bg-transparent">
-                              <TableHead className="w-10">
-                                <Checkbox
-                                  checked={allDetailsSelected}
-                                  onCheckedChange={(c) => toggleAllDetails(c === true)}
-                                  aria-label="전체 선택"
-                                  className="focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2"
-                                />
-                              </TableHead>
-                              <TableHead className="text-xs sm:text-sm">순번</TableHead>
-                              <TableHead className="text-xs sm:text-sm">공정명</TableHead>
-                              <TableHead className="text-xs sm:text-sm">필수</TableHead>
-                              <TableHead className="text-xs sm:text-sm">순서고정</TableHead>
-                              <TableHead className="text-xs sm:text-sm">작업구분</TableHead>
-                              <TableHead className="text-xs sm:text-sm">표준시간</TableHead>
-                              <TableHead className="text-xs sm:text-sm">외주업체</TableHead>
-                            </TableRow>
-                          </TableHeader>
-                          <TableBody>
-                            {details.length === 0 ? (
-                              <TableRow>
-                                <TableCell
-                                  colSpan={8}
-                                  className="text-muted-foreground py-10 text-center text-xs sm:text-sm"
-                                >
-                                  등록된 공정이 없습니다.
-                                </TableCell>
-                              </TableRow>
-                            ) : (
-                              details.map((row) => (
-                                <TableRow key={row.id}>
-                                  <TableCell>
-                                    <Checkbox
-                                      checked={selectedDetailIds.has(row.id)}
-                                      onCheckedChange={(c) => toggleDetailSelected(row.id, c === true)}
-                                      aria-label={`${row.process_name || row.process_code} 선택`}
-                                      className="focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2"
-                                    />
-                                  </TableCell>
-                                  <TableCell className="text-xs sm:text-sm">{row.seq_no}</TableCell>
-                                  <TableCell className="text-xs sm:text-sm">
-                                    {row.process_name || row.process_code}
-                                  </TableCell>
-                                  <TableCell className="text-xs sm:text-sm">
-                                    {row.is_required === "N" ? "N" : "Y"}
-                                  </TableCell>
-                                  <TableCell className="text-xs sm:text-sm">
-                                    {row.is_fixed_order === "N" ? "N" : "Y"}
-                                  </TableCell>
-                                  <TableCell className="text-xs sm:text-sm">{row.work_type}</TableCell>
-                                  <TableCell className="text-xs sm:text-sm">{row.standard_time}</TableCell>
-                                  <TableCell className="max-w-[140px] truncate text-xs sm:text-sm">
-                                    {row.outsource_supplier || "—"}
-                                  </TableCell>
-                                </TableRow>
-                              ))
-                            )}
-                          </TableBody>
-                        </Table>
-                      </div>
-                    )}
-                  </div>
+                {/* 라우팅 공정 테이블 */}
+                <div className="min-h-0 flex-1 overflow-auto">
+                  {!selectedVersionId ? (
+                    <p className="py-8 text-center text-sm text-muted-foreground">버전을 선택해주세요</p>
+                  ) : (
+                    <EDataTable
+                      columns={[
+                        { key: "seq_no", label: "순번", width: "w-[80px]", align: "center" as const },
+                        { key: "process_display", label: "공정명" },
+                        { key: "is_required", label: "필수", width: "w-[80px]", align: "center" as const },
+                        { key: "is_fixed_order", label: "순서고정", width: "w-[90px]", align: "center" as const },
+                        { key: "work_type", label: "작업구분", width: "w-[100px]" },
+                        { key: "standard_time", label: "표준시간", width: "w-[90px]", align: "right" as const },
+                        { key: "outsource_display", label: "외주업체" },
+                      ] as EDataTableColumn[]}
+                      data={detailsGridData}
+                      rowKey={(row) => row.id}
+                      loading={detailsLoading}
+                      emptyMessage="등록된 공정이 없어요"
+                      showCheckbox
+                      checkedIds={Array.from(selectedDetailIds)}
+                      onCheckedChange={(ids) => setSelectedDetailIds(new Set(ids))}
+                      showPagination={false}
+                      draggableColumns={false}
+                    />
+                  )}
                 </div>
               </>
             )}
@@ -769,37 +714,32 @@ export function ItemRoutingTab() {
         </ResizablePanel>
       </ResizablePanelGroup>
 
+      {/* 버전 추가 모달 */}
       <Dialog open={versionDialogOpen} onOpenChange={setVersionDialogOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">라우팅 버전 추가</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              선택한 품목에 새 라우팅 버전을 추가합니다.
-            </DialogDescription>
+            <DialogTitle>라우팅 버전 추가</DialogTitle>
+            <DialogDescription>선택한 품목에 새 라우팅 버전을 추가해요</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3 sm:space-y-4">
-            <div>
-              <Label htmlFor="versionName" className="text-xs sm:text-sm">
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 버전명 <span className="text-destructive">*</span>
               </Label>
               <Input
-                id="versionName"
                 value={versionName}
                 onChange={(e) => setVersionName(e.target.value)}
                 placeholder="예: Rev.A"
-                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
-            <div>
-              <Label htmlFor="versionDesc" className="text-xs sm:text-sm">
-                설명
-              </Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설명</Label>
               <Input
-                id="versionDesc"
                 value={versionDescription}
                 onChange={(e) => setVersionDescription(e.target.value)}
                 placeholder="선택 입력"
-                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
             <div className="flex items-center gap-2">
@@ -807,178 +747,131 @@ export function ItemRoutingTab() {
                 id="versionDefault"
                 checked={versionIsDefault}
                 onCheckedChange={(c) => setVersionIsDefault(c === true)}
-                className="focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2"
               />
-              <Label htmlFor="versionDefault" className="text-xs font-normal sm:text-sm">
+              <Label htmlFor="versionDefault" className="text-sm font-normal">
                 기본 버전으로 설정
               </Label>
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setVersionDialogOpen(false)}
-              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
-            >
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setVersionDialogOpen(false)} disabled={versionSubmitting}>
               취소
             </Button>
-            <Button
-              type="button"
-              onClick={() => void submitNewVersion()}
-              disabled={versionSubmitting}
-              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
-            >
-              {versionSubmitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              추가
+            <Button onClick={() => void submitNewVersion()} disabled={versionSubmitting}>
+              {versionSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              추가해요
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
+      {/* 공정 추가/수정 모달 */}
       <Dialog open={detailDialogOpen} onOpenChange={setDetailDialogOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">
-              {detailDialogMode === "add" ? "공정 추가" : "공정 수정"}
-            </DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              라우팅 공정 순서에 반영할 내용을 입력합니다. 적용 후 저장을 눌러주세요.
-            </DialogDescription>
+            <DialogTitle>{detailDialogMode === "add" ? "공정 추가" : "공정 수정"}</DialogTitle>
+            <DialogDescription>라우팅 공정 순서에 반영할 내용을 입력해주세요</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3 sm:space-y-4">
-            <div>
-              <Label className="text-xs sm:text-sm">
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 공정 <span className="text-destructive">*</span>
               </Label>
               <Select value={formProcessCode} onValueChange={setFormProcessCode}>
-                <SelectTrigger
-                  className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
-                  aria-label="공정 선택"
-                >
+                <SelectTrigger className="h-9" size="sm">
                   <SelectValue placeholder={processesLoading ? "불러오는 중..." : "공정 선택"} />
                 </SelectTrigger>
                 <SelectContent>
                   {processes.map((p) => (
-                    <SelectItem key={p.id} value={p.process_code} className="text-xs sm:text-sm">
+                    <SelectItem key={p.id} value={p.process_code}>
                       {p.process_name} ({p.process_code})
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
-            <div>
-              <Label htmlFor="seqNo" className="text-xs sm:text-sm">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 순번 <span className="text-destructive">*</span>
               </Label>
               <Input
-                id="seqNo"
                 type="number"
                 min={1}
                 value={formSeqNo}
                 onChange={(e) => setFormSeqNo(e.target.value)}
-                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-              <div>
-                <Label className="text-xs sm:text-sm">필수여부</Label>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">필수여부</Label>
                 <Select value={formRequired} onValueChange={setFormRequired}>
-                  <SelectTrigger className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm">
+                  <SelectTrigger className="h-9" size="sm">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="Y" className="text-xs sm:text-sm">
-                      Y
-                    </SelectItem>
-                    <SelectItem value="N" className="text-xs sm:text-sm">
-                      N
-                    </SelectItem>
+                    <SelectItem value="Y">Y</SelectItem>
+                    <SelectItem value="N">N</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
-              <div>
-                <Label className="text-xs sm:text-sm">순서고정여부</Label>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">순서고정여부</Label>
                 <Select value={formFixedOrder} onValueChange={setFormFixedOrder}>
-                  <SelectTrigger className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm">
+                  <SelectTrigger className="h-9" size="sm">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="Y" className="text-xs sm:text-sm">
-                      Y
-                    </SelectItem>
-                    <SelectItem value="N" className="text-xs sm:text-sm">
-                      N
-                    </SelectItem>
+                    <SelectItem value="Y">Y</SelectItem>
+                    <SelectItem value="N">N</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
             </div>
-            <div>
-              <Label className="text-xs sm:text-sm">작업구분</Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">작업구분</Label>
               <Select value={formWorkType} onValueChange={setFormWorkType}>
-                <SelectTrigger className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm">
+                <SelectTrigger className="h-9" size="sm">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="내부" className="text-xs sm:text-sm">
-                    내부
-                  </SelectItem>
-                  <SelectItem value="외주" className="text-xs sm:text-sm">
-                    외주
-                  </SelectItem>
-                  <SelectItem value="선택가능" className="text-xs sm:text-sm">
-                    선택가능
-                  </SelectItem>
+                  <SelectItem value="내부">내부</SelectItem>
+                  <SelectItem value="외주">외주</SelectItem>
+                  <SelectItem value="선택가능">선택가능</SelectItem>
                 </SelectContent>
               </Select>
             </div>
-            <div>
-              <Label htmlFor="stdTime" className="text-xs sm:text-sm">
-                표준작업시간(분)
-              </Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">표준작업시간(분)</Label>
               <Input
-                id="stdTime"
                 type="number"
                 min={0}
                 step={1}
                 value={formStandardTime}
                 onChange={(e) => setFormStandardTime(e.target.value)}
                 placeholder="0"
-                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
             {showOutsourceField && (
-              <div>
-                <Label htmlFor="outsource" className="text-xs sm:text-sm">
-                  외주업체
-                </Label>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">외주업체</Label>
                 <Input
-                  id="outsource"
                   value={formOutsource}
                   onChange={(e) => setFormOutsource(e.target.value)}
                   placeholder="외주 업체명"
-                  className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                  className="h-9"
                 />
               </div>
             )}
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setDetailDialogOpen(false)}
-              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
-            >
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDetailDialogOpen(false)} disabled={detailSubmitting}>
               취소
             </Button>
-            <Button
-              type="button"
-              onClick={submitDetailForm}
-              disabled={detailSubmitting}
-              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
-            >
-              {detailSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : "확인"}
+            <Button onClick={submitDetailForm} disabled={detailSubmitting}>
+              {detailSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              확인
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -986,123 +879,113 @@ export function ItemRoutingTab() {
 
       {/* 품목 등록 모달 */}
       <Dialog open={registerDialogOpen} onOpenChange={setRegisterDialogOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+        <DialogContent className="max-w-2xl">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">품목 등록</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              라우팅에 추가할 품목을 검색하고 선택하세요.
-            </DialogDescription>
+            <DialogTitle>품목 등록</DialogTitle>
+            <DialogDescription>라우팅에 추가할 품목을 검색하고 선택해주세요</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3">
-            <div className="relative">
-              <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
-              <Input
-                value={registerSearch}
-                onChange={(e) => setRegisterSearch(e.target.value)}
-                placeholder="품목코드 / 품목명으로 검색"
-                className="h-8 pl-8 text-xs sm:h-10 sm:pl-9 sm:text-sm"
-                aria-label="품목 검색"
-              />
-            </div>
-            <div className="max-h-[300px] overflow-y-auto rounded-md border">
-              {registerLoading ? (
-                <div className="text-muted-foreground flex h-32 items-center justify-center gap-2 text-xs sm:text-sm">
-                  <Loader2 className="text-primary h-5 w-5 animate-spin" />
-                  검색 중...
-                </div>
-              ) : registerItems.length === 0 ? (
-                <p className="text-muted-foreground py-8 text-center text-xs sm:text-sm">
-                  {registerSearchDebounced ? "검색 결과가 없습니다." : "품목을 검색하세요."}
-                </p>
-              ) : (
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="w-10 text-center">
-                        <Checkbox
-                          checked={
-                            registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number)).length > 0 &&
-                            registerItems
-                              .filter((ri) => !registeredItemCodes.has(ri.item_number))
-                              .every((ri) => registerSelectedIds.has(ri.id))
-                          }
-                          onCheckedChange={(checked) => {
-                            const next = new Set(registerSelectedIds);
-                            const available = registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number));
-                            if (checked) {
-                              available.forEach((ri) => next.add(ri.id));
-                            } else {
-                              available.forEach((ri) => next.delete(ri.id));
-                            }
-                            setRegisterSelectedIds(next);
-                          }}
-                        />
-                      </TableHead>
-                      <TableHead className="text-xs sm:text-sm">품목코드</TableHead>
-                      <TableHead className="text-xs sm:text-sm">품목명</TableHead>
-                      <TableHead className="text-xs sm:text-sm">상태</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {registerItems.map((ri) => {
-                      const alreadyRegistered = registeredItemCodes.has(ri.item_number);
-                      return (
-                        <TableRow
-                          key={ri.id}
-                          className={cn(alreadyRegistered && "opacity-50")}
-                        >
-                          <TableCell className="text-center">
-                            <Checkbox
-                              checked={registerSelectedIds.has(ri.id)}
-                              disabled={alreadyRegistered}
-                              onCheckedChange={(checked) => {
-                                const next = new Set(registerSelectedIds);
-                                if (checked) next.add(ri.id);
-                                else next.delete(ri.id);
-                                setRegisterSelectedIds(next);
-                              }}
-                            />
-                          </TableCell>
-                          <TableCell className="text-xs sm:text-sm">{ri.item_number}</TableCell>
-                          <TableCell className="text-xs sm:text-sm">{ri.item_name}</TableCell>
-                          <TableCell className="text-xs sm:text-sm">
-                            {alreadyRegistered ? (
-                              <span className="text-muted-foreground">등록됨</span>
-                            ) : (
-                              <span className="text-primary">미등록</span>
-                            )}
-                          </TableCell>
-                        </TableRow>
-                      );
-                    })}
-                  </TableBody>
-                </Table>
-              )}
-            </div>
-            {registerSelectedIds.size > 0 && (
-              <p className="text-muted-foreground text-xs">
-                {registerSelectedIds.size}건 선택됨
+        <div className="space-y-3">
+          <div className="relative">
+            <Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={registerSearch}
+              onChange={(e) => setRegisterSearch(e.target.value)}
+              placeholder="품목코드 / 품목명으로 검색"
+              className="h-9 pl-8 text-xs"
+              aria-label="품목 검색"
+            />
+          </div>
+          <div className="max-h-[400px] overflow-auto rounded-md border">
+            {registerLoading ? (
+              <div className="flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground">
+                <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                검색 중...
+              </div>
+            ) : registerItems.length === 0 ? (
+              <p className="py-8 text-center text-sm text-muted-foreground">
+                {registerSearchDebounced ? "검색 결과가 없어요" : "품목을 검색해주세요"}
               </p>
+            ) : (
+              <Table>
+                <TableHeader className="sticky top-0 bg-background z-10">
+                  <TableRow>
+                    <TableHead className="w-10 text-center text-muted-foreground">
+                      <Checkbox
+                        checked={
+                          registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number)).length > 0 &&
+                          registerItems
+                            .filter((ri) => !registeredItemCodes.has(ri.item_number))
+                            .every((ri) => registerSelectedIds.has(ri.id))
+                        }
+                        onCheckedChange={(checked) => {
+                          const next = new Set(registerSelectedIds);
+                          const available = registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number));
+                          if (checked) {
+                            available.forEach((ri) => next.add(ri.id));
+                          } else {
+                            available.forEach((ri) => next.delete(ri.id));
+                          }
+                          setRegisterSelectedIds(next);
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="text-xs text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-xs text-muted-foreground">품목명</TableHead>
+                    <TableHead className="text-xs text-muted-foreground">상태</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {registerItems.map((ri) => {
+                    const alreadyRegistered = registeredItemCodes.has(ri.item_number);
+                    return (
+                      <TableRow key={ri.id} className={cn("hover:bg-muted/30", alreadyRegistered && "opacity-50")}>
+                        <TableCell className="text-center">
+                          <Checkbox
+                            checked={registerSelectedIds.has(ri.id)}
+                            disabled={alreadyRegistered}
+                            onCheckedChange={(checked) => {
+                              const next = new Set(registerSelectedIds);
+                              if (checked) next.add(ri.id);
+                              else next.delete(ri.id);
+                              setRegisterSelectedIds(next);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell className="text-xs">{ri.item_number}</TableCell>
+                        <TableCell className="text-xs">{ri.item_name}</TableCell>
+                        <TableCell className="text-xs">
+                          {alreadyRegistered ? (
+                            <span className="text-muted-foreground">등록됨</span>
+                          ) : (
+                            <span className="text-primary">미등록</span>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
             )}
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setRegisterDialogOpen(false)}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
-              취소
-            </Button>
-            <Button
-              type="button"
-              onClick={handleRegisterItems}
-              disabled={registerSubmitting || registerSelectedIds.size === 0}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
-              {registerSubmitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              등록 ({registerSelectedIds.size}건)
-            </Button>
+          </div>
+          <DialogFooter className="flex-row items-center justify-between sm:justify-between">
+            {registerSelectedIds.size > 0 ? (
+              <p className="text-xs text-muted-foreground">{registerSelectedIds.size}건 선택됨</p>
+            ) : (
+              <div />
+            )}
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setRegisterDialogOpen(false)}>
+                취소
+              </Button>
+              <Button
+                onClick={() => void handleRegisterItems()}
+                disabled={registerSubmitting || registerSelectedIds.size === 0}
+              >
+                {registerSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                등록 ({registerSelectedIds.size}건)
+              </Button>
+            </div>
           </DialogFooter>
         </DialogContent>
       </Dialog>
diff --git a/frontend/app/(main)/COMPANY_10/production/process-info/ProcessMasterTab.tsx b/frontend/app/(main)/COMPANY_10/production/process-info/ProcessMasterTab.tsx
index c2fb249d..cfbee962 100644
--- a/frontend/app/(main)/COMPANY_10/production/process-info/ProcessMasterTab.tsx
+++ b/frontend/app/(main)/COMPANY_10/production/process-info/ProcessMasterTab.tsx
@@ -22,8 +22,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Card, CardContent } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -47,8 +45,8 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { cn } from "@/lib/utils";
+import { Checkbox } from "@/components/ui/checkbox";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import {
   getProcessList,
   createProcess,
@@ -61,7 +59,7 @@ import {
   type ProcessMaster,
   type ProcessEquipment,
   type Equipment,
-} from "@/lib/api/processInfo";
+} from "@/lib/api/processInfo"; // API: /process-info/*
 import { getCategoryValues } from "@/lib/api/tableCategoryValue";
 
 const ALL_VALUE = "__all__";
@@ -121,7 +119,7 @@ export function ProcessMasterTab() {
         useYn: filterUseYn === ALL_VALUE ? undefined : filterUseYn,
       });
       if (!res.success) {
-        toast.error(res.message || "공정 목록을 불러오지 못했습니다.");
+        toast.error(res.message || "공정 목록을 불러오지 못했어요");
         return;
       }
       setProcesses(res.data ?? []);
@@ -135,12 +133,12 @@ export function ProcessMasterTab() {
     try {
       const [procRes, eqRes] = await Promise.all([getProcessList(), getEquipmentList()]);
       if (!procRes.success) {
-        toast.error(procRes.message || "공정 목록을 불러오지 못했습니다.");
+        toast.error(procRes.message || "공정 목록을 불러오지 못했어요");
       } else {
         setProcesses(procRes.data ?? []);
       }
       if (!eqRes.success) {
-        toast.error(eqRes.message || "설비 목록을 불러오지 못했습니다.");
+        toast.error(eqRes.message || "설비 목록을 불러오지 못했어요");
       } else {
         setEquipmentMaster(eqRes.data ?? []);
       }
@@ -187,7 +185,7 @@ export function ProcessMasterTab() {
       const res = await getProcessEquipments(selectedProcess.process_code);
       if (cancelled) return;
       if (!res.success) {
-        toast.error(res.message || "공정 설비를 불러오지 못했습니다.");
+        toast.error(res.message || "공정 설비를 불러오지 못했어요");
         setProcessEquipments([]);
       } else {
         setProcessEquipments(res.data ?? []);
@@ -199,28 +197,6 @@ export function ProcessMasterTab() {
     };
   }, [selectedProcess?.process_code]);
 
-  const allSelected = useMemo(() => {
-    if (processes.length === 0) return false;
-    return processes.every((p) => selectedIds.has(p.id));
-  }, [processes, selectedIds]);
-
-  const toggleAll = (checked: boolean) => {
-    if (checked) {
-      setSelectedIds(new Set(processes.map((p) => p.id)));
-    } else {
-      setSelectedIds(new Set());
-    }
-  };
-
-  const toggleOne = (id: string, checked: boolean) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      if (checked) next.add(id);
-      else next.delete(id);
-      return next;
-    });
-  };
-
   const handleResetFilters = () => {
     setFilterCode("");
     setFilterName("");
@@ -246,7 +222,7 @@ export function ProcessMasterTab() {
 
   const openEdit = () => {
     if (!selectedProcess) {
-      toast.message("수정할 공정을 좌측 목록에서 선택하세요.");
+      toast.message("수정할 공정을 좌측 목록에서 선택해주세요");
       return;
     }
     setFormMode("edit");
@@ -262,7 +238,7 @@ export function ProcessMasterTab() {
 
   const submitForm = async () => {
     if (!formProcessName.trim()) {
-      toast.error("공정명을 입력하세요.");
+      toast.error("공정명을 입력해주세요");
       return;
     }
 
@@ -277,10 +253,10 @@ export function ProcessMasterTab() {
           use_yn: formUseYn,
         });
         if (!res.success || !res.data) {
-          toast.error(res.message || "등록에 실패했습니다.");
+          toast.error(res.message || "등록에 실패했어요");
           return;
         }
-        toast.success("공정이 등록되었습니다.");
+        toast.success("공정이 등록되었어요");
         setFormOpen(false);
         await loadProcesses();
         setSelectedProcess(res.data);
@@ -294,10 +270,10 @@ export function ProcessMasterTab() {
           use_yn: formUseYn,
         });
         if (!res.success || !res.data) {
-          toast.error(res.message || "수정에 실패했습니다.");
+          toast.error(res.message || "수정에 실패했어요");
           return;
         }
-        toast.success("공정이 수정되었습니다.");
+        toast.success("공정이 수정되었어요");
         setFormOpen(false);
         await loadProcesses();
         setSelectedProcess(res.data);
@@ -309,7 +285,7 @@ export function ProcessMasterTab() {
 
   const openDelete = () => {
     if (selectedIds.size === 0) {
-      toast.message("삭제할 공정을 체크박스로 선택하세요.");
+      toast.message("삭제할 공정을 체크박스로 선택해주세요");
       return;
     }
     setDeleteOpen(true);
@@ -321,10 +297,10 @@ export function ProcessMasterTab() {
     try {
       const res = await deleteProcesses(ids);
       if (!res.success) {
-        toast.error(res.message || "삭제에 실패했습니다.");
+        toast.error(res.message || "삭제에 실패했어요");
         return;
       }
-      toast.success(`${ids.length}건 삭제되었습니다.`);
+      toast.success(`${ids.length}건 삭제되었어요`);
       setDeleteOpen(false);
       setSelectedIds(new Set());
       if (selectedProcess && ids.includes(selectedProcess.id)) {
@@ -344,7 +320,7 @@ export function ProcessMasterTab() {
   const handleAddEquipment = async () => {
     if (!selectedProcess) return;
     if (!equipmentPick) {
-      toast.message("추가할 설비를 선택하세요.");
+      toast.message("추가할 설비를 선택해주세요");
       return;
     }
     setAddingEquipment(true);
@@ -354,10 +330,10 @@ export function ProcessMasterTab() {
         equipment_code: equipmentPick,
       });
       if (!res.success) {
-        toast.error(res.message || "설비 추가에 실패했습니다.");
+        toast.error(res.message || "설비 추가에 실패했어요");
         return;
       }
-      toast.success("설비가 등록되었습니다.");
+      toast.success("설비가 등록되었어요");
       setEquipmentPick("");
       const listRes = await getProcessEquipments(selectedProcess.process_code);
       if (listRes.success && listRes.data) setProcessEquipments(listRes.data);
@@ -369,10 +345,10 @@ export function ProcessMasterTab() {
   const handleRemoveEquipment = async (row: ProcessEquipment) => {
     const res = await removeProcessEquipment(row.id);
     if (!res.success) {
-      toast.error(res.message || "설비 제거에 실패했습니다.");
+      toast.error(res.message || "설비 제거에 실패했어요");
       return;
     }
-    toast.success("설비가 제거되었습니다.");
+    toast.success("설비가 제거되었어요");
     if (selectedProcess) {
       const listRes = await getProcessEquipments(selectedProcess.process_code);
       if (listRes.success && listRes.data) setProcessEquipments(listRes.data);
@@ -381,260 +357,162 @@ export function ProcessMasterTab() {
 
   const listBusy = loadingInitial || loadingList;
 
+  // 표시용 데이터
+  const processGridData = useMemo(
+    () =>
+      processes.map((p) => ({
+        ...p,
+        process_type_display: getProcessTypeLabel(p.process_type),
+        use_yn_display: p.use_yn === "Y" ? "사용" : "미사용",
+      })),
+    [processes, getProcessTypeLabel]
+  );
+
   return (
-    <div className="flex min-h-[560px] flex-1 flex-col gap-3">
-      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1 rounded-lg">
+    <div className="flex h-full flex-col">
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+        {/* 좌측: 공정 목록 */}
         <ResizablePanel defaultSize={50} minSize={30}>
-          <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border bg-card shadow-sm">
-            <div className="flex shrink-0 flex-col gap-2 border-b bg-muted/30 p-3 sm:p-4">
-              <div className="flex flex-wrap items-center gap-2">
-                <Settings className="h-4 w-4 text-muted-foreground" aria-hidden />
-                <span className="text-sm font-semibold sm:text-base">공정 마스터</span>
-              </div>
-              <div className="flex flex-wrap items-end gap-2">
-                <div className="space-y-1">
-                  <Label className="text-xs sm:text-sm">공정코드</Label>
-                  <Input
-                    value={filterCode}
-                    onChange={(e) => setFilterCode(e.target.value)}
-                    placeholder="코드"
-                    className="h-8 w-[120px] text-xs sm:h-10 sm:w-[140px] sm:text-sm"
-                  />
-                </div>
-                <div className="space-y-1">
-                  <Label className="text-xs sm:text-sm">공정명</Label>
-                  <Input
-                    value={filterName}
-                    onChange={(e) => setFilterName(e.target.value)}
-                    placeholder="이름"
-                    className="h-8 w-[120px] text-xs sm:h-10 sm:w-[160px] sm:text-sm"
-                  />
-                </div>
-                <div className="space-y-1">
-                  <Label className="text-xs sm:text-sm">공정유형</Label>
-                  <Select value={filterType} onValueChange={setFilterType}>
-                    <SelectTrigger className="h-8 w-[120px] text-xs sm:h-10 sm:w-[130px] sm:text-sm">
-                      <SelectValue placeholder="전체" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value={ALL_VALUE} className="text-xs sm:text-sm">
-                        전체
-                      </SelectItem>
-                      {processTypeOptions.map((o, idx) => (
-                        <SelectItem key={`pt-filter-${idx}`} value={o.valueCode} className="text-xs sm:text-sm">
-                          {o.valueLabel}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-1">
-                  <Label className="text-xs sm:text-sm">사용여부</Label>
-                  <Select value={filterUseYn} onValueChange={setFilterUseYn}>
-                    <SelectTrigger className="h-8 w-[100px] text-xs sm:h-10 sm:w-[110px] sm:text-sm">
-                      <SelectValue placeholder="전체" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value={ALL_VALUE} className="text-xs sm:text-sm">
-                        전체
-                      </SelectItem>
-                      <SelectItem value="Y" className="text-xs sm:text-sm">사용</SelectItem>
-                      <SelectItem value="N" className="text-xs sm:text-sm">미사용</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={handleResetFilters}
-                >
-                  <RotateCcw className="mr-1 h-3.5 w-3.5" />
-                  초기화
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={handleSearch}
-                  disabled={listBusy}
-                >
-                  <Search className="mr-1 h-3.5 w-3.5" />
-                  조회
-                </Button>
-              </div>
-              <div className="flex flex-wrap gap-2">
-                <Button
-                  type="button"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={openAdd}
-                >
-                  <Plus className="mr-1 h-3.5 w-3.5" />
-                  공정 추가
-                </Button>
-                <Button
-                  type="button"
-                  variant="secondary"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={openEdit}
-                >
-                  <Pencil className="mr-1 h-3.5 w-3.5" />
-                  수정
-                </Button>
-                <Button
-                  type="button"
-                  variant="destructive"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={openDelete}
-                >
-                  <Trash2 className="mr-1 h-3.5 w-3.5" />
-                  삭제
-                </Button>
-              </div>
+          <div className="flex h-full flex-col">
+            {/* 패널 헤더 */}
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">공정 마스터</span>
+              <Badge variant="secondary" className="font-mono text-xs">
+                {processes.length}건
+              </Badge>
             </div>
 
-            <ScrollArea className="min-h-0 flex-1">
-              <div className="p-2 sm:p-3">
-                {listBusy ? (
-                  <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
-                    <Loader2 className="h-8 w-8 animate-spin" />
-                    <p className="mt-2 text-xs sm:text-sm">불러오는 중...</p>
-                  </div>
-                ) : (
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead className="w-10 text-center">
-                          <Checkbox
-                            checked={allSelected}
-                            onCheckedChange={(v) => toggleAll(v === true)}
-                            aria-label="전체 선택"
-                            className="mx-auto"
-                          />
-                        </TableHead>
-                        <TableHead className="text-xs sm:text-sm">공정코드</TableHead>
-                        <TableHead className="text-xs sm:text-sm">공정명</TableHead>
-                        <TableHead className="text-xs sm:text-sm">공정유형</TableHead>
-                        <TableHead className="text-right text-xs sm:text-sm">표준시간(분)</TableHead>
-                        <TableHead className="text-right text-xs sm:text-sm">작업인원</TableHead>
-                        <TableHead className="text-center text-xs sm:text-sm">사용여부</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {processes.length === 0 ? (
-                        <TableRow>
-                          <TableCell colSpan={7} className="py-12 text-center text-muted-foreground">
-                            <p className="text-xs sm:text-sm">조회된 공정이 없습니다.</p>
-                          </TableCell>
-                        </TableRow>
-                      ) : (
-                        processes.map((row) => (
-                          <TableRow
-                            key={row.id}
-                            className={cn(
-                              "cursor-pointer transition-colors",
-                              selectedProcess?.id === row.id && "bg-accent"
-                            )}
-                            onClick={() => setSelectedProcess(row)}
-                          >
-                            <TableCell
-                              className="text-center"
-                              onClick={(e) => e.stopPropagation()}
-                            >
-                              <Checkbox
-                                checked={selectedIds.has(row.id)}
-                                onCheckedChange={(v) => toggleOne(row.id, v === true)}
-                                aria-label={`${row.process_code} 선택`}
-                                className="mx-auto"
-                              />
-                            </TableCell>
-                            <TableCell className="text-xs font-medium sm:text-sm">
-                              {row.process_code}
-                            </TableCell>
-                            <TableCell className="text-xs sm:text-sm">{row.process_name}</TableCell>
-                            <TableCell className="text-xs sm:text-sm">
-                              <Badge variant="secondary" className="text-[10px] sm:text-xs">
-                                {getProcessTypeLabel(row.process_type)}
-                              </Badge>
-                            </TableCell>
-                            <TableCell className="text-right text-xs sm:text-sm">
-                              {row.standard_time ?? "-"}
-                            </TableCell>
-                            <TableCell className="text-right text-xs sm:text-sm">
-                              {row.worker_count ?? "-"}
-                            </TableCell>
-                            <TableCell className="text-center text-xs sm:text-sm">
-                              <Badge
-                                variant={row.use_yn === "N" ? "outline" : "default"}
-                                className="text-[10px] sm:text-xs"
-                              >
-                                {row.use_yn === "Y" ? "사용" : "미사용"}
-                              </Badge>
-                            </TableCell>
-                          </TableRow>
-                        ))
-                      )}
-                    </TableBody>
-                  </Table>
-                )}
-              </div>
-            </ScrollArea>
+            {/* 필터 바 */}
+            <div className="flex flex-wrap items-center gap-2 border-b px-3 py-2">
+              <Input value={filterCode} onChange={(e) => setFilterCode(e.target.value)} placeholder="공정코드" className="h-8 w-[110px] text-xs" />
+              <Input value={filterName} onChange={(e) => setFilterName(e.target.value)} placeholder="공정명" className="h-8 w-[130px] text-xs" />
+              <Select value={filterType} onValueChange={setFilterType}>
+                <SelectTrigger className="h-8 w-[110px] text-xs">
+                  <SelectValue placeholder="유형 전체" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>전체</SelectItem>
+                  {processTypeOptions.map((o, idx) => (
+                    <SelectItem key={`pt-filter-${idx}`} value={o.valueCode}>{o.valueLabel}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select value={filterUseYn} onValueChange={setFilterUseYn}>
+                <SelectTrigger className="h-8 w-[100px] text-xs">
+                  <SelectValue placeholder="사용 전체" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>전체</SelectItem>
+                  <SelectItem value="Y">사용</SelectItem>
+                  <SelectItem value="N">미사용</SelectItem>
+                </SelectContent>
+              </Select>
+              <div className="flex-1" />
+              {listBusy && <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />}
+              <Button size="sm" className="h-8 gap-1 text-xs" onClick={handleSearch} disabled={listBusy}>
+                <Search className="h-3 w-3" />조회
+              </Button>
+              <Button variant="ghost" size="sm" className="h-8 gap-1 text-xs text-muted-foreground" onClick={handleResetFilters}>
+                <RotateCcw className="h-3 w-3" />초기화
+              </Button>
+            </div>
+
+            {/* 액션 바 */}
+            <div className="flex items-center justify-end gap-2 border-b bg-muted/30 px-4 py-2">
+              <Button size="sm" onClick={openAdd}>
+                <Plus className="mr-1 h-3.5 w-3.5" />
+                공정 추가
+              </Button>
+              <Button variant="secondary" size="sm" onClick={openEdit}>
+                <Pencil className="mr-1 h-3.5 w-3.5" />
+                수정
+              </Button>
+              <Button variant="destructive" size="sm" onClick={openDelete}>
+                <Trash2 className="mr-1 h-3.5 w-3.5" />
+                삭제
+              </Button>
+            </div>
+
+            {/* 공정 목록 테이블 */}
+            <div className="min-h-0 flex-1 overflow-auto">
+              <EDataTable
+                columns={[
+                  { key: "process_code", label: "공정코드", width: "w-[130px]", render: (val: any) => <span className="font-mono text-xs">{val}</span> },
+                  { key: "process_name", label: "공정명" },
+                  { key: "process_type_display", label: "공정유형", width: "w-[120px]" },
+                  { key: "standard_time", label: "표준시간(분)", width: "w-[110px]", align: "right" as const },
+                  { key: "worker_count", label: "작업인원", width: "w-[90px]", align: "right" as const },
+                  { key: "use_yn_display", label: "사용여부", width: "w-[90px]", align: "center" as const },
+                ] as EDataTableColumn[]}
+                data={processGridData}
+                rowKey={(row) => row.id}
+                loading={listBusy}
+                emptyMessage="조회된 공정이 없어요"
+                selectedId={selectedProcess?.id ?? null}
+                onSelect={(id) => {
+                  const proc = processes.find((p) => p.id === id);
+                  setSelectedProcess(proc || null);
+                }}
+                onRowClick={(row) => {
+                  const proc = processes.find((p) => p.id === row.id);
+                  setSelectedProcess(proc || null);
+                }}
+                showCheckbox
+                checkedIds={Array.from(selectedIds)}
+                onCheckedChange={(ids) => setSelectedIds(new Set(ids))}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
           </div>
         </ResizablePanel>
 
         <ResizableHandle withHandle />
 
+        {/* 우측: 공정별 설비 */}
         <ResizablePanel defaultSize={50} minSize={30}>
-          <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border bg-card shadow-sm">
-            <div className="flex shrink-0 items-center gap-2 border-b bg-muted/30 px-3 py-2 sm:px-4 sm:py-3">
-              <Wrench className="h-4 w-4 text-muted-foreground" aria-hidden />
+          <div className="flex h-full flex-col">
+            {/* 패널 헤더 */}
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <Wrench className="h-4 w-4 text-muted-foreground" />
               <div className="min-w-0 flex-1">
-                <p className="truncate text-sm font-semibold sm:text-base">공정별 사용설비</p>
+                <p className="truncate text-sm font-semibold">공정별 사용설비</p>
                 {selectedProcess ? (
-                  <p className="truncate text-xs text-muted-foreground sm:text-sm">
-                    {selectedProcess.process_name}{" "}
-                    <span className="text-muted-foreground/80">({selectedProcess.process_code})</span>
+                  <p className="truncate text-xs text-muted-foreground">
+                    {selectedProcess.process_name} ({selectedProcess.process_code})
                   </p>
                 ) : (
-                  <p className="text-xs text-muted-foreground sm:text-sm">공정 미선택</p>
+                  <p className="text-xs text-muted-foreground">공정을 선택해주세요</p>
                 )}
               </div>
             </div>
 
             {!selectedProcess ? (
-              <div className="flex flex-1 flex-col items-center justify-center gap-2 px-4 py-12 text-center text-muted-foreground">
+              <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
                 <Settings className="h-10 w-10 opacity-40" />
-                <p className="text-sm font-medium text-foreground">좌측에서 공정을 선택하세요</p>
-                <p className="max-w-xs text-xs sm:text-sm">
-                  목록 행을 클릭하면 이 공정에 연결된 설비를 관리할 수 있습니다.
+                <p className="text-sm font-medium text-foreground">좌측에서 공정을 선택해주세요</p>
+                <p className="max-w-xs text-xs">
+                  목록 행을 클릭하면 이 공정에 연결된 설비를 관리할 수 있어요
                 </p>
               </div>
             ) : (
-              <div className="flex min-h-0 flex-1 flex-col gap-3 p-3 sm:p-4">
-                <div className="flex flex-wrap items-end gap-2">
-                  <div className="min-w-0 flex-1 space-y-1 sm:max-w-xs">
-                    <Label className="text-xs sm:text-sm">설비 선택</Label>
+              <div className="flex min-h-0 flex-1 flex-col gap-3 p-4">
+                <div className="flex items-end gap-2">
+                  <div className="min-w-0 flex-1 space-y-1">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설비 선택</Label>
                     <Select
                       key={selectedProcess.id}
                       value={equipmentPick || undefined}
                       onValueChange={setEquipmentPick}
                       disabled={addingEquipment || availableEquipments.length === 0}
                     >
-                      <SelectTrigger className="h-8 w-full text-xs sm:h-10 sm:text-sm">
-                        <SelectValue placeholder="설비를 선택하세요" />
+                      <SelectTrigger className="h-9" size="sm">
+                        <SelectValue placeholder="설비를 선택해주세요" />
                       </SelectTrigger>
                       <SelectContent>
                         {availableEquipments.map((eq) => (
-                          <SelectItem
-                            key={eq.id}
-                            value={eq.equipment_code}
-                            className="text-xs sm:text-sm"
-                          >
+                          <SelectItem key={eq.id} value={eq.equipment_code}>
                             {eq.equipment_code} · {eq.equipment_name}
                           </SelectItem>
                         ))}
@@ -642,9 +520,7 @@ export function ProcessMasterTab() {
                     </Select>
                   </div>
                   <Button
-                    type="button"
                     size="sm"
-                    className="h-8 text-xs sm:h-10 sm:text-sm"
                     onClick={() => void handleAddEquipment()}
                     disabled={addingEquipment || !equipmentPick}
                   >
@@ -657,47 +533,31 @@ export function ProcessMasterTab() {
                   </Button>
                 </div>
 
-                <div className="min-h-0 flex-1">
+                <div className="min-h-0 flex-1 overflow-auto">
                   {loadingEquipments ? (
                     <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
                       <Loader2 className="h-7 w-7 animate-spin" />
-                      <p className="mt-2 text-xs sm:text-sm">설비 목록 불러오는 중...</p>
+                      <p className="mt-2 text-sm">설비 목록을 불러오고 있어요...</p>
                     </div>
                   ) : processEquipments.length === 0 ? (
-                    <p className="py-8 text-center text-xs text-muted-foreground sm:text-sm">
-                      등록된 설비가 없습니다. 상단에서 설비를 추가하세요.
+                    <p className="py-8 text-center text-sm text-muted-foreground">
+                      등록된 설비가 없어요. 상단에서 설비를 추가해주세요.
                     </p>
                   ) : (
-                    <ScrollArea className="h-[min(420px,calc(100vh-20rem))] pr-3">
-                      <ul className="space-y-2">
-                        {processEquipments.map((pe) => (
-                          <li key={pe.id}>
-                            <Card className="rounded-lg border bg-card text-card-foreground shadow-sm">
-                              <CardContent className="flex items-center gap-3 p-3 sm:p-4">
-                                <div className="min-w-0 flex-1">
-                                  <p className="truncate text-xs font-medium sm:text-sm">
-                                    {pe.equipment_code}
-                                  </p>
-                                  <p className="truncate text-xs text-muted-foreground sm:text-sm">
-                                    {pe.equipment_name || "설비명 없음"}
-                                  </p>
-                                </div>
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  size="sm"
-                                  className="h-8 shrink-0 text-xs sm:h-9 sm:text-sm"
-                                  onClick={() => void handleRemoveEquipment(pe)}
-                                >
-                                  <Trash2 className="mr-1 h-3.5 w-3.5" />
-                                  제거
-                                </Button>
-                              </CardContent>
-                            </Card>
-                          </li>
-                        ))}
-                      </ul>
-                    </ScrollArea>
+                    <ul className="space-y-2">
+                      {processEquipments.map((pe) => (
+                        <li key={pe.id} className="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:bg-muted/30">
+                          <div className="min-w-0 flex-1">
+                            <p className="truncate text-sm font-medium">{pe.equipment_code}</p>
+                            <p className="truncate text-xs text-muted-foreground">{pe.equipment_name || "설비명 없음"}</p>
+                          </div>
+                          <Button variant="ghost" size="sm" onClick={() => void handleRemoveEquipment(pe)}>
+                            <Trash2 className="mr-1 h-3.5 w-3.5" />
+                            제거
+                          </Button>
+                        </li>
+                      ))}
+                    </ul>
                   )}
                 </div>
               </div>
@@ -706,136 +566,95 @@ export function ProcessMasterTab() {
         </ResizablePanel>
       </ResizablePanelGroup>
 
+      {/* 공정 등록/수정 모달 */}
       <Dialog open={formOpen} onOpenChange={setFormOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-lg">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">
-              {formMode === "add" ? "공정 추가" : "공정 수정"}
-            </DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              공정 마스터 정보를 입력합니다. 표준시간과 작업인원은 숫자로 입력하세요.
-            </DialogDescription>
+            <DialogTitle>{formMode === "add" ? "공정 추가" : "공정 수정"}</DialogTitle>
+            <DialogDescription>공정 마스터 정보를 입력해주세요</DialogDescription>
           </DialogHeader>
-
-          <div className="space-y-3 sm:space-y-4">
-            <div>
-              <Label htmlFor="pm-process-name" className="text-xs sm:text-sm">
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 공정명 <span className="text-destructive">*</span>
               </Label>
               <Input
-                id="pm-process-name"
                 value={formProcessName}
                 onChange={(e) => setFormProcessName(e.target.value)}
-                placeholder="공정명"
-                className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                placeholder="공정명을 입력해주세요"
+                className="h-9"
               />
             </div>
-            <div>
-              <Label className="text-xs sm:text-sm">공정유형</Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">공정유형</Label>
               <Select value={formProcessType} onValueChange={setFormProcessType}>
-                <SelectTrigger className="mt-1 h-8 text-xs sm:h-10 sm:text-sm">
-                  <SelectValue placeholder="선택하세요" />
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder="선택해주세요" />
                 </SelectTrigger>
                 <SelectContent>
                   {processTypeOptions.map((o, idx) => (
-                    <SelectItem key={`pt-form-${idx}`} value={o.valueCode} className="text-xs sm:text-sm">
-                      {o.valueLabel}
-                    </SelectItem>
+                    <SelectItem key={`pt-form-${idx}`} value={o.valueCode}>{o.valueLabel}</SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
-            <div>
-              <Label htmlFor="pm-standard-time" className="text-xs sm:text-sm">
-                표준작업시간(분)
-              </Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">표준작업시간(분)</Label>
               <Input
-                id="pm-standard-time"
                 value={formStandardTime}
                 onChange={(e) => setFormStandardTime(e.target.value)}
                 placeholder="0"
                 inputMode="numeric"
-                className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
-            <div>
-              <Label htmlFor="pm-worker-count" className="text-xs sm:text-sm">
-                작업인원수
-              </Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">작업인원수</Label>
               <Input
-                id="pm-worker-count"
                 value={formWorkerCount}
                 onChange={(e) => setFormWorkerCount(e.target.value)}
                 placeholder="0"
                 inputMode="numeric"
-                className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
-            <div>
-              <Label className="text-xs sm:text-sm">사용여부</Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">사용여부</Label>
               <Select value={formUseYn} onValueChange={setFormUseYn}>
-                <SelectTrigger className="mt-1 h-8 text-xs sm:h-10 sm:text-sm">
-                  <SelectValue placeholder="선택하세요" />
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder="선택해주세요" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="Y" className="text-xs sm:text-sm">사용</SelectItem>
-                  <SelectItem value="N" className="text-xs sm:text-sm">미사용</SelectItem>
+                  <SelectItem value="Y">사용</SelectItem>
+                  <SelectItem value="N">미사용</SelectItem>
                 </SelectContent>
               </Select>
             </div>
           </div>
-
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setFormOpen(false)}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-              disabled={savingForm}
-            >
-              취소
-            </Button>
-            <Button
-              type="button"
-              onClick={() => void submitForm()}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-              disabled={savingForm}
-            >
-              {savingForm ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              저장
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setFormOpen(false)} disabled={savingForm}>취소</Button>
+            <Button onClick={() => void submitForm()} disabled={savingForm}>
+              {savingForm && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              저장해요
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
+      {/* 삭제 확인 */}
       <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="sm:max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">공정 삭제</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              선택한 {selectedIds.size}건의 공정을 삭제합니다. 연결된 공정-설비 매핑도 함께 삭제됩니다. 이 작업은
-              되돌릴 수 없습니다.
+            <DialogTitle>공정 삭제</DialogTitle>
+            <DialogDescription>
+              선택한 {selectedIds.size}건의 공정을 삭제해요. 연결된 공정-설비 매핑도 함께 삭제돼요. 이 작업은 되돌릴 수 없어요.
             </DialogDescription>
           </DialogHeader>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setDeleteOpen(false)}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-              disabled={deleting}
-            >
-              취소
-            </Button>
-            <Button
-              type="button"
-              variant="destructive"
-              onClick={() => void confirmDelete()}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-              disabled={deleting}
-            >
-              {deleting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              삭제
+          <DialogFooter className="gap-2">
+            <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>취소</Button>
+            <Button variant="destructive" onClick={() => void confirmDelete()} disabled={deleting}>
+              {deleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              삭제해요
             </Button>
           </DialogFooter>
         </DialogContent>
diff --git a/frontend/app/(main)/COMPANY_10/production/process-info/page.tsx b/frontend/app/(main)/COMPANY_10/production/process-info/page.tsx
index f9f8e352..a7b81550 100644
--- a/frontend/app/(main)/COMPANY_10/production/process-info/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/production/process-info/page.tsx
@@ -1,56 +1,223 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import { Settings, GitBranch, ClipboardList } from "lucide-react";
+import {
+  Settings,
+  GitBranch,
+  ClipboardList,
+  ChevronRight,
+  Factory,
+  Keyboard,
+  Plus,
+  Pencil,
+  Trash2,
+  List,
+  Settings2,
+} from "lucide-react";
 import { ProcessMasterTab } from "./ProcessMasterTab";
 import { ItemRoutingTab } from "./ItemRoutingTab";
 import { ProcessWorkStandardTab } from "./ProcessWorkStandardTab";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+
+const GRID_COLUMNS = [
+  { key: "process_code", label: "공정코드" },
+  { key: "process_name", label: "공정명" },
+  { key: "process_type", label: "공정유형" },
+  { key: "standard_time", label: "표준시간(분)" },
+  { key: "worker_count", label: "작업인원" },
+  { key: "use_yn", label: "사용여부" },
+];
+
+const TAB_META = [
+  {
+    value: "process",
+    label: "공정 마스터",
+    shortLabel: "공정",
+    description: "공정코드/유형/표준시간/사용설비 관리",
+    detailDesc: "공정코드, 공정유형, 표준시간을 등록하고 사용 설비를 매핑합니다.",
+    icon: Settings,
+    color: "text-blue-500",
+    badgeColor: "bg-blue-50 text-blue-700 ring-blue-600/20",
+    shortcut: "1",
+    actions: ["공정 등록", "공정 수정", "공정 삭제", "설비 연결"],
+  },
+  {
+    value: "routing",
+    label: "품목별 라우팅",
+    shortLabel: "라우팅",
+    description: "품목 라우팅 버전 및 공정 순서 관리",
+    detailDesc: "품목별 생산 라우팅 버전을 관리하고 공정 순서 및 소요시간을 설정합니다.",
+    icon: GitBranch,
+    color: "text-emerald-500",
+    badgeColor: "bg-emerald-50 text-emerald-700 ring-emerald-600/20",
+    shortcut: "2",
+    actions: ["버전 생성", "공정 순서 설정", "품목 등록", "품목 해제"],
+  },
+  {
+    value: "workstandard",
+    label: "공정 작업기준",
+    shortLabel: "작업기준",
+    description: "공정별 작업기준서 및 작업 표준 관리",
+    detailDesc: "공정별 작업기준서를 등록하고 작업 표준을 문서화하여 품질을 관리합니다.",
+    icon: ClipboardList,
+    color: "text-violet-500",
+    badgeColor: "bg-violet-50 text-violet-700 ring-violet-600/20",
+    shortcut: "3",
+    actions: ["기준서 등록", "기준서 수정", "기준서 삭제", "작업 표준 관리"],
+  },
+] as const;
+
+type TabValue = (typeof TAB_META)[number]["value"];
+
+const ACTION_ICONS = [Plus, Pencil, Trash2, List] as const;
 
 export default function ProcessInfoPage() {
-  const [activeTab, setActiveTab] = useState("process");
+  const ts = useTableSettings("c16-process-info", "process_mst", GRID_COLUMNS);
+  const [activeTab, setActiveTab] = useState<TabValue>("process");
+  const [showShortcutHint, setShowShortcutHint] = useState(false);
+
+  const activeMeta = TAB_META.find((t) => t.value === activeTab)!;
+
+  const handleTabChange = useCallback((value: string) => {
+    setActiveTab(value as TabValue);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!e.altKey) return;
+      const tabByShortcut = TAB_META.find((t) => t.shortcut === e.key);
+      if (tabByShortcut) {
+        e.preventDefault();
+        setActiveTab(tabByShortcut.value);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
 
   return (
     <div className="flex h-[calc(100vh-4rem)] flex-col bg-muted/30">
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="flex h-full flex-col">
+      {/* 페이지 헤더 */}
+      <div className="shrink-0 border-b bg-background px-6 py-3">
+        <nav
+          className="mb-1 flex items-center gap-1 text-xs text-muted-foreground"
+          aria-label="breadcrumb"
+        >
+          <Factory className="h-3 w-3" />
+          <span>생산관리</span>
+          <ChevronRight className="h-3 w-3 opacity-50" />
+          <span className="font-medium text-foreground">공정정보관리</span>
+        </nav>
+        <div className="flex items-center justify-between">
+          <div className="flex items-baseline gap-2">
+            <h1 className="text-base font-semibold text-foreground">공정정보관리</h1>
+            <span className="text-xs text-muted-foreground">{activeMeta.description}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+            <button
+              type="button"
+              className="flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              onClick={() => setShowShortcutHint((v) => !v)}
+              aria-label="키보드 단축키 보기"
+            >
+              <Keyboard className="h-3 w-3" />
+              <span>단축키</span>
+            </button>
+          </div>
+        </div>
+        {showShortcutHint && (
+          <div className="mt-2 flex items-center gap-3 rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground">
+            <span className="font-medium text-foreground">탭 전환:</span>
+            {TAB_META.map((t) => (
+              <span key={t.value} className="flex items-center gap-1">
+                <kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-mono text-[10px]">
+                  Alt+{t.shortcut}
+                </kbd>
+                <span>{t.shortLabel}</span>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex min-h-0 flex-1 flex-col"
+      >
+        {/* 탭 네비게이션 */}
         <div className="shrink-0 border-b bg-background px-4">
           <TabsList className="h-12 bg-transparent gap-1">
-            <TabsTrigger
-              value="process"
-              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4"
-            >
-              <Settings className="mr-2 h-4 w-4" />
-              공정 마스터
-            </TabsTrigger>
-            <TabsTrigger
-              value="routing"
-              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4"
-            >
-              <GitBranch className="mr-2 h-4 w-4" />
-              품목별 라우팅
-            </TabsTrigger>
-            <TabsTrigger
-              value="workstandard"
-              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4"
-            >
-              <ClipboardList className="mr-2 h-4 w-4" />
-              공정 작업기준
-            </TabsTrigger>
+            {TAB_META.map(({ value, label, icon: Icon, shortcut }) => (
+              <TabsTrigger
+                key={value}
+                value={value}
+                className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 gap-1.5"
+                aria-label={`${label} (Alt+${shortcut})`}
+              >
+                <Icon className="h-4 w-4" />
+                {label}
+              </TabsTrigger>
+            ))}
           </TabsList>
         </div>
 
-        <TabsContent value="process" className="flex-1 overflow-hidden mt-0">
+        {/* 탭 설명 배너 */}
+        <div className="shrink-0 border-b bg-background/60 px-6 py-2">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span
+                className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset ${activeMeta.badgeColor}`}
+              >
+                {activeMeta.shortLabel}
+              </span>
+              <span className="text-xs text-muted-foreground">{activeMeta.detailDesc}</span>
+            </div>
+            <div className="hidden items-center gap-2 sm:flex">
+              {activeMeta.actions.map((action, i) => {
+                const ActionIcon = ACTION_ICONS[i % ACTION_ICONS.length];
+                return (
+                  <span
+                    key={action}
+                    className="flex items-center gap-1 text-xs text-muted-foreground/70"
+                  >
+                    <ActionIcon className="h-3 w-3" />
+                    {action}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* 탭 컨텐츠 */}
+        <TabsContent value="process" className="min-h-0 flex-1 overflow-hidden mt-0">
           <ProcessMasterTab />
         </TabsContent>
 
-        <TabsContent value="routing" className="flex-1 overflow-hidden mt-0">
+        <TabsContent value="routing" className="min-h-0 flex-1 overflow-hidden mt-0">
           <ItemRoutingTab />
         </TabsContent>
 
-        <TabsContent value="workstandard" className="flex-1 overflow-hidden mt-0">
+        <TabsContent value="workstandard" className="min-h-0 flex-1 overflow-hidden mt-0">
           <ProcessWorkStandardTab />
         </TabsContent>
       </Tabs>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_10/production/work-instruction/page.tsx b/frontend/app/(main)/COMPANY_10/production/work-instruction/page.tsx
index d36f56ad..08ace7ec 100644
--- a/frontend/app/(main)/COMPANY_10/production/work-instruction/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/production/work-instruction/page.tsx
@@ -1,38 +1,56 @@
 "use client";
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useMemo, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
 import { Label } from "@/components/ui/label";
-import { Plus, Trash2, RotateCcw, Save, X, ChevronLeft, ChevronRight, Search, Loader2, Wrench, Pencil, CheckCircle2, ArrowRight, Check, ChevronsUpDown, ClipboardCheck } from "lucide-react";
+import { Plus, Trash2, Save, X, ChevronLeft, ChevronRight, Search, Loader2, Wrench, Pencil, CheckCircle2, ArrowRight, Check, ChevronsUpDown, ClipboardCheck, Inbox, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
+// API: /work-instruction/*
 import {
   getWorkInstructionList, previewWorkInstructionNo, saveWorkInstruction, deleteWorkInstructions,
   getWIItemSource, getWISalesOrderSource, getWIProductionPlanSource, getEquipmentList, getEmployeeList,
   getRoutingVersions, RoutingVersionData,
 } from "@/lib/api/workInstruction";
 import { WorkStandardEditModal } from "./WorkStandardEditModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "work_instruction_no", label: "작업지시번호" },
+  { key: "status", label: "상태" },
+  { key: "progress", label: "진행현황" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "qty", label: "수량" },
+  { key: "equipment", label: "설비" },
+  { key: "routing", label: "라우팅" },
+  { key: "work_team", label: "작업조" },
+  { key: "worker", label: "작업자" },
+  { key: "start_date", label: "시작일" },
+  { key: "end_date", label: "완료일" },
+  { key: "actions", label: "작업" },
+];
 
 type SourceType = "production" | "order" | "item";
 
 const STATUS_BADGE: Record<string, { label: string; cls: string }> = {
-  "일반": { label: "일반", cls: "bg-blue-100 text-blue-800 border-blue-200" },
-  "긴급": { label: "긴급", cls: "bg-red-100 text-red-800 border-red-200" },
+  "일반": { label: "일반", cls: "bg-primary/10 text-primary border-primary/20" },
+  "긴급": { label: "긴급", cls: "bg-destructive/10 text-destructive border-destructive/20" },
 };
 const PROGRESS_BADGE: Record<string, { label: string; cls: string }> = {
-  "대기": { label: "대기", cls: "bg-amber-100 text-amber-800" },
-  "진행중": { label: "진행중", cls: "bg-blue-100 text-blue-800" },
-  "완료": { label: "완료", cls: "bg-emerald-100 text-emerald-800" },
+  "대기": { label: "대기", cls: "bg-warning/10 text-warning" },
+  "진행중": { label: "진행중", cls: "bg-primary/10 text-primary" },
+  "완료": { label: "완료", cls: "bg-success/10 text-success" },
 };
 
 interface EquipmentOption { id: string; equipment_code: string; equipment_name: string; }
@@ -44,18 +62,14 @@ interface SelectedItem {
 }
 
 export default function WorkInstructionPage() {
+  const ts = useTableSettings("c16-work-instruction", "work_instruction", GRID_COLUMNS);
   const [orders, setOrders] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [equipmentOptions, setEquipmentOptions] = useState<EquipmentOption[]>([]);
   const [employeeOptions, setEmployeeOptions] = useState<EmployeeOption[]>([]);
 
   // 검색
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [debouncedKeyword, setDebouncedKeyword] = useState("");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchProgress, setSearchProgress] = useState("all");
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 1단계: 등록 모달
   const [isRegModalOpen, setIsRegModalOpen] = useState(false);
@@ -121,9 +135,6 @@ export default function WorkInstructionPage() {
   const [wsModalItemName, setWsModalItemName] = useState("");
   const [wsModalItemCode, setWsModalItemCode] = useState("");
 
-  useEffect(() => { const t = setTimeout(() => setDebouncedKeyword(searchKeyword), 500); return () => clearTimeout(t); }, [searchKeyword]);
-
-
   useEffect(() => {
     getEquipmentList().then(r => { if (r.success) setEquipmentOptions(r.data || []); });
     getEmployeeList().then(r => { if (r.success) setEmployeeOptions(r.data || []); });
@@ -133,23 +144,28 @@ export default function WorkInstructionPage() {
     setLoading(true);
     try {
       const params: any = {};
-      if (searchDateFrom) params.dateFrom = searchDateFrom;
-      if (searchDateTo) params.dateTo = searchDateTo;
-      if (searchStatus !== "all") params.status = searchStatus;
-      if (searchProgress !== "all") params.progressStatus = searchProgress;
-      if (debouncedKeyword.trim()) params.keyword = debouncedKeyword.trim();
+      for (const f of searchFilters) {
+        if (f.columnName === "start_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split("|");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status" && f.value) {
+          params.status = f.value;
+        } else if (f.columnName === "progress" && f.value) {
+          params.progressStatus = f.value;
+        } else if (f.columnName === "work_instruction_no" && f.value) {
+          params.keyword = f.value;
+        } else if (f.columnName === "item_name" && f.value) {
+          params.keyword = f.value;
+        }
+      }
       const r = await getWorkInstructionList(params);
       if (r.success) setOrders(r.data || []);
     } catch {} finally { setLoading(false); }
-  }, [searchDateFrom, searchDateTo, searchStatus, searchProgress, debouncedKeyword]);
+  }, [searchFilters]);
 
   useEffect(() => { fetchOrders(); }, [fetchOrders]);
 
-  const handleResetSearch = () => {
-    setSearchKeyword(""); setDebouncedKeyword(""); setSearchStatus("all"); setSearchProgress("all");
-    setSearchDateFrom(""); setSearchDateTo("");
-  };
-
   // ─── 1단계 등록 ───
   const openRegModal = () => {
     setRegSourceType("production"); setRegSourceData([]); setRegKeyword(""); setRegCheckedIds(new Set());
@@ -396,157 +412,121 @@ export default function WorkInstructionPage() {
   );
 
   return (
-    <div className="flex flex-col h-full gap-4 p-4">
-      {/* 검색 */}
-      <Card>
-        <CardContent className="p-4">
-          <div className="flex flex-wrap items-end gap-4">
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">작업기간</Label>
-              <div className="flex items-center gap-2">
-                <div className="w-[150px]"><FormDatePicker value={searchDateFrom} onChange={setSearchDateFrom} placeholder="시작일" /></div>
-                <span className="text-muted-foreground">~</span>
-                <div className="w-[150px]"><FormDatePicker value={searchDateTo} onChange={setSearchDateTo} placeholder="종료일" /></div>
-              </div>
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">검색</Label>
-              <Input placeholder="작업지시번호/품목명" value={searchKeyword} onChange={e => setSearchKeyword(e.target.value)} className="h-9 w-[200px]" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">상태</Label>
-              <Select value={searchStatus} onValueChange={setSearchStatus}>
-                <SelectTrigger className="h-9 w-[120px]"><SelectValue /></SelectTrigger>
-                <SelectContent><SelectItem value="all">전체</SelectItem><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">진행현황</Label>
-              <Select value={searchProgress} onValueChange={setSearchProgress}>
-                <SelectTrigger className="h-9 w-[130px]"><SelectValue /></SelectTrigger>
-                <SelectContent><SelectItem value="all">전체</SelectItem><SelectItem value="대기">대기</SelectItem><SelectItem value="진행중">진행중</SelectItem><SelectItem value="완료">완료</SelectItem></SelectContent>
-              </Select>
-            </div>
-            <div className="flex-1" />
-            <div className="flex items-center gap-2">
-              {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
-              <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}><RotateCcw className="w-4 h-4 mr-1.5" /> 초기화</Button>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+    <div className="flex flex-col h-[calc(100vh-4rem)] p-3 gap-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName="work_instruction"
+        filterId="c16-work-instruction"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={new Set(orders.map(o => o.work_instruction_no)).size}
+      />
 
       {/* 메인 테이블 */}
-      <Card className="flex-1 flex flex-col overflow-hidden">
-        <CardContent className="p-0 flex flex-col flex-1 overflow-hidden">
-          <div className="flex items-center justify-between p-4 border-b">
-            <h3 className="text-sm font-semibold flex items-center gap-2">
-              <Wrench className="w-4 h-4" /> 작업지시 목록
-              <Badge variant="secondary" className="text-xs">{new Set(orders.map(o => o.work_instruction_no)).size}건 ({orders.length}행)</Badge>
-            </h3>
-            <Button size="sm" onClick={openRegModal}><Plus className="w-4 h-4 mr-1.5" /> 작업지시 등록</Button>
+      <div className="flex-1 overflow-hidden border bg-card rounded-lg flex flex-col">
+        <div className="flex flex-col h-full">
+          {/* 패널 헤더 */}
+          <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/30 shrink-0">
+            <div className="flex items-center gap-2">
+              <Wrench className="w-4 h-4 text-muted-foreground" />
+              <span className="text-[13px] font-bold text-foreground">작업지시 목록</span>
+              <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                {new Set(orders.map(o => o.work_instruction_no)).size}건 ({orders.length}행)
+              </span>
+              {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button size="sm" onClick={openRegModal}>
+                <Plus className="w-3.5 h-3.5" /> 작업지시 등록
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                <Settings2 className="h-4 w-4" />
+              </Button>
+            </div>
           </div>
-          <div className="flex-1 overflow-auto">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
-                <TableRow>
-                  <TableHead className="w-[150px]">작업지시번호</TableHead>
-                  <TableHead className="w-[70px] text-center">상태</TableHead>
-                  <TableHead className="w-[100px] text-center">진행현황</TableHead>
-                  <TableHead>품목명</TableHead>
-                  <TableHead className="w-[100px]">규격</TableHead>
-                  <TableHead className="w-[80px] text-right">수량</TableHead>
-                  <TableHead className="w-[120px]">설비</TableHead>
-                  <TableHead className="w-[120px]">라우팅</TableHead>
-                  <TableHead className="w-[80px] text-center">작업조</TableHead>
-                  <TableHead className="w-[100px]">작업자</TableHead>
-                  <TableHead className="w-[100px] text-center">시작일</TableHead>
-                  <TableHead className="w-[100px] text-center">완료일</TableHead>
-                  <TableHead className="w-[150px] text-center">작업</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {loading ? (
-                  <TableRow><TableCell colSpan={13} className="text-center py-12"><Loader2 className="w-6 h-6 animate-spin mx-auto text-muted-foreground" /></TableCell></TableRow>
-                ) : orders.length === 0 ? (
-                  <TableRow><TableCell colSpan={13} className="text-center py-12 text-muted-foreground">작업지시가 없습니다</TableCell></TableRow>
-                ) : orders.map((o, rowIdx) => {
-                  const pct = getProgress(o);
-                  const pLabel = getProgressLabel(o);
-                  const pBadge = PROGRESS_BADGE[pLabel] || PROGRESS_BADGE["대기"];
-                  const sBadge = STATUS_BADGE[o.status] || STATUS_BADGE["일반"];
-                  const isFirstOfGroup = Number(o.detail_seq) === 1;
+
+          {/* 테이블 */}
+          <EDataTable
+            columns={[
+              { key: "work_instruction_no", label: "작업지시번호", width: "w-[150px]", render: (_v, row) => <span className="font-mono text-[13px] font-medium">{getDisplayNo(row)}</span> },
+              { key: "status", label: "상태", width: "w-[70px]", align: "center", render: (v) => {
+                const sBadge = STATUS_BADGE[v] || STATUS_BADGE["일반"];
+                return <Badge variant="outline" className={cn("text-[10px]", sBadge.cls)}>{sBadge.label}</Badge>;
+              }},
+              { key: "progress", label: "진행현황", width: "w-[100px]", align: "center", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return <span className="text-[10px] text-muted-foreground">↑</span>;
+                const pct = getProgress(row);
+                const pLabel = getProgressLabel(row);
+                const pBadge = PROGRESS_BADGE[pLabel] || PROGRESS_BADGE["대기"];
+                return (
+                  <div className="flex flex-col items-center gap-1">
+                    <Badge variant="secondary" className={cn("text-[10px]", pBadge.cls)}>{pBadge.label}</Badge>
+                    <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
+                      <div className={cn("h-full rounded-full transition-all", pct >= 100 ? "bg-success" : pct > 0 ? "bg-primary" : "bg-muted-foreground/30")} style={{ width: `${pct}%` }} />
+                    </div>
+                    <span className="text-[10px] text-muted-foreground">{pct}%</span>
+                  </div>
+                );
+              }},
+              { key: "item_name", label: "품목명", render: (_v, row) => row.item_name || row.item_number || "-" },
+              { key: "item_spec", label: "규격", width: "w-[100px]" },
+              { key: "detail_qty", label: "수량", width: "w-[80px]", align: "right", formatNumber: true },
+              { key: "equipment_name", label: "설비", width: "w-[120px]", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "routing", label: "라우팅", width: "w-[120px]", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return "";
+                if (row.routing_version_id) {
                   return (
-                    <TableRow key={`${o.wi_id}-${o.detail_id}`} className="hover:bg-muted/50">
-                      <TableCell className="font-mono text-xs font-medium">{getDisplayNo(o)}</TableCell>
-                      <TableCell className="text-center"><Badge variant="outline" className={cn("text-[10px]", sBadge.cls)}>{sBadge.label}</Badge></TableCell>
-                      <TableCell className="text-center">
-                        {isFirstOfGroup ? (
-                          <div className="flex flex-col items-center gap-1">
-                            <Badge variant="secondary" className={cn("text-[10px]", pBadge.cls)}>{pBadge.label}</Badge>
-                            <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
-                              <div className={cn("h-full rounded-full transition-all", pct >= 100 ? "bg-emerald-500" : pct > 0 ? "bg-blue-500" : "bg-gray-300")} style={{ width: `${pct}%` }} />
-                            </div>
-                            <span className="text-[10px] text-muted-foreground">{pct}%</span>
-                          </div>
-                        ) : <span className="text-[10px] text-muted-foreground">↑</span>}
-                      </TableCell>
-                      <TableCell className="text-sm">{o.item_name || o.item_number || "-"}</TableCell>
-                      <TableCell className="text-xs">{o.item_spec || "-"}</TableCell>
-                      <TableCell className="text-right text-xs font-medium">{Number(o.detail_qty || 0).toLocaleString()}</TableCell>
-                      <TableCell className="text-xs">{isFirstOfGroup ? (o.equipment_name || "-") : ""}</TableCell>
-                      <TableCell className="text-xs">
-                        {isFirstOfGroup ? (
-                          o.routing_version_id ? (
-                            <button
-                              className="text-primary underline underline-offset-2 hover:text-primary/80 cursor-pointer text-xs text-left"
-                              onClick={e => {
-                                e.stopPropagation();
-                                openWorkStandardModal(
-                                  o.work_instruction_no,
-                                  o.routing_version_id,
-                                  o.routing_name || "",
-                                  o.item_name || o.item_number || "",
-                                  o.item_number || ""
-                                );
-                              }}
-                            >
-                              {o.routing_name || "라우팅"} <ClipboardCheck className="w-3 h-3 inline ml-0.5" />
-                            </button>
-                          ) : <span className="text-muted-foreground">-</span>
-                        ) : ""}
-                      </TableCell>
-                      <TableCell className="text-center text-xs">{isFirstOfGroup ? (o.work_team || "-") : ""}</TableCell>
-                      <TableCell className="text-xs">{isFirstOfGroup ? getWorkerName(o.worker) : ""}</TableCell>
-                      <TableCell className="text-center text-xs">{isFirstOfGroup ? (o.start_date || "-") : ""}</TableCell>
-                      <TableCell className="text-center text-xs">{isFirstOfGroup ? (o.end_date || "-") : ""}</TableCell>
-                      <TableCell className="text-center">
-                        {isFirstOfGroup && (
-                          <div className="flex items-center justify-center gap-1">
-                            <Button variant="outline" size="sm" className="h-7 text-xs px-2" onClick={() => openEditModal(o)}><Pencil className="w-3 h-3 mr-1" /> 수정</Button>
-                            <Button variant="outline" size="sm" className="h-7 text-xs px-2 text-destructive border-destructive/30 hover:bg-destructive/10" onClick={() => handleDelete(o.wi_id)}><Trash2 className="w-3 h-3 mr-1" /> 삭제</Button>
-                          </div>
-                        )}
-                      </TableCell>
-                    </TableRow>
+                    <button
+                      className="text-primary underline underline-offset-2 hover:text-primary/80 cursor-pointer text-xs text-left"
+                      onClick={e => {
+                        e.stopPropagation();
+                        openWorkStandardModal(row.work_instruction_no, row.routing_version_id, row.routing_name || "", row.item_name || row.item_number || "", row.item_number || "");
+                      }}
+                    >
+                      {row.routing_name || "라우팅"} <ClipboardCheck className="w-3 h-3 inline ml-0.5" />
+                    </button>
                   );
-                })}
-              </TableBody>
-            </Table>
-          </div>
-        </CardContent>
-      </Card>
+                }
+                return <span className="text-muted-foreground">-</span>;
+              }},
+              { key: "work_team", label: "작업조", width: "w-[80px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "worker", label: "작업자", width: "w-[100px]", render: (v, row) => Number(row.detail_seq) === 1 ? getWorkerName(v) : "" },
+              { key: "start_date", label: "시작일", width: "w-[100px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "end_date", label: "완료일", width: "w-[100px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "actions", label: "작업", width: "w-[150px]", align: "center", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return null;
+                return (
+                  <div className="flex items-center justify-center gap-1">
+                    <Button variant="ghost" size="sm" className="h-7 text-xs px-2" onClick={() => openEditModal(row)}><Pencil className="w-3 h-3" /> 수정</Button>
+                    <Button variant="ghost" size="sm" className="h-7 text-xs px-2 text-destructive hover:text-destructive" onClick={() => handleDelete(row.wi_id)}><Trash2 className="w-3 h-3" /></Button>
+                  </div>
+                );
+              }},
+            ] as EDataTableColumn[]}
+            data={ts.groupData(orders)}
+            rowKey={(row) => `${row.wi_id}-${row.detail_id}`}
+            loading={loading}
+            emptyMessage="등록된 작업지시가 없어요"
+            showPagination
+            draggableColumns
+            columnOrderKey="c16-work-instruction"
+          />
+        </div>
+      </div>
 
       {/* ── 1단계: 등록 모달 ── */}
       <Dialog open={isRegModalOpen} onOpenChange={setIsRegModalOpen}>
         <DialogContent className="max-w-[95vw] sm:max-w-[1200px] h-[80vh] flex flex-col p-0 gap-0">
           <DialogHeader className="px-6 py-4 border-b shrink-0">
             <DialogTitle className="text-base flex items-center gap-2"><Plus className="w-4 h-4" /> 작업지시 등록</DialogTitle>
-            <DialogDescription className="text-xs">근거를 선택하고 품목을 체크한 후 "작업지시 적용" 버튼을 눌러주세요.</DialogDescription>
+            <DialogDescription className="text-xs text-muted-foreground">근거를 선택하고 품목을 체크한 후 "작업지시 적용" 버튼을 눌러주세요.</DialogDescription>
           </DialogHeader>
 
           <div className="px-6 py-3 border-b bg-muted/30 flex items-center gap-3 flex-wrap shrink-0">
-            <Label className="text-sm font-semibold whitespace-nowrap">근거:</Label>
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground whitespace-nowrap">근거</span>
             <Select value={regSourceType} onValueChange={v => setRegSourceType(v as SourceType)}>
               <SelectTrigger className="h-9 w-[160px]"><SelectValue placeholder="선택" /></SelectTrigger>
               <SelectContent><SelectItem value="production">생산계획</SelectItem><SelectItem value="order">수주</SelectItem><SelectItem value="item">품목정보</SelectItem></SelectContent>
@@ -561,25 +541,37 @@ export default function WorkInstructionPage() {
             <div className="flex-1" />
             <label className="flex items-center gap-1.5 cursor-pointer select-none">
               <Checkbox checked={regMergeSameItem} onCheckedChange={v => setRegMergeSameItem(!!v)} />
-              <span className="text-sm font-semibold">동일품목 합산</span>
+              <span className="text-xs font-semibold text-foreground">동일품목 합산</span>
             </label>
           </div>
 
           <div className="flex-1 overflow-auto px-6 py-4">
             {!regSourceType ? (
-              <div className="flex flex-col items-center justify-center h-full text-muted-foreground text-sm">근거를 선택하고 검색해주세요</div>
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-12 h-12 flex items-center justify-center mb-4">
+                  <Search className="w-6 h-6 text-muted-foreground/40" />
+                </div>
+                <p className="text-sm font-medium text-muted-foreground mb-1">근거를 선택해주세요</p>
+                <p className="text-xs text-muted-foreground/60">근거를 선택하고 검색하면 품목이 표시돼요</p>
+              </div>
             ) : regSourceLoading ? (
               <div className="flex items-center justify-center h-full"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
             ) : regSourceData.length === 0 ? (
-              <div className="flex flex-col items-center justify-center h-full text-muted-foreground text-sm">데이터가 없습니다</div>
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-12 h-12 flex items-center justify-center mb-4">
+                  <Inbox className="w-6 h-6 text-muted-foreground/40" />
+                </div>
+                <p className="text-sm font-medium text-muted-foreground mb-1">검색 결과가 없어요</p>
+                <p className="text-xs text-muted-foreground/60">다른 키워드로 검색해주세요</p>
+              </div>
             ) : (
               <Table>
-                <TableHeader className="sticky top-0 bg-background z-10">
-                  <TableRow>
-                    <TableHead className="w-[50px] text-center"><Checkbox checked={regSourceData.length > 0 && regCheckedIds.size === regSourceData.length} onCheckedChange={toggleRegAll} /></TableHead>
-                    {regSourceType === "item" && <><TableHead className="w-[120px]">품목코드</TableHead><TableHead>품목명</TableHead><TableHead className="w-[120px]">규격</TableHead></>}
-                    {regSourceType === "order" && <><TableHead className="w-[110px]">수주번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[100px]">규격</TableHead><TableHead className="w-[80px] text-right">수량</TableHead><TableHead className="w-[100px]">납기일</TableHead></>}
-                    {regSourceType === "production" && <><TableHead className="w-[110px]">계획번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[80px] text-right">계획수량</TableHead><TableHead className="w-[90px]">시작일</TableHead><TableHead className="w-[90px]">완료일</TableHead><TableHead className="w-[100px]">설비</TableHead></>}
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground"><Checkbox checked={regSourceData.length > 0 && regCheckedIds.size === regSourceData.length} onCheckedChange={toggleRegAll} /></TableHead>
+                    {regSourceType === "item" && <><TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead><TableHead>품목명</TableHead><TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead></>}
+                    {regSourceType === "order" && <><TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수주번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[100px]">규격</TableHead><TableHead className="w-[80px] text-right">수량</TableHead><TableHead className="w-[100px]">납기일</TableHead></>}
+                    {regSourceType === "production" && <><TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[80px] text-right">계획수량</TableHead><TableHead className="w-[90px]">시작일</TableHead><TableHead className="w-[90px]">완료일</TableHead><TableHead className="w-[100px]">설비</TableHead></>}
                   </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -587,11 +579,11 @@ export default function WorkInstructionPage() {
                     const id = getRegId(item);
                     const checked = regCheckedIds.has(id);
                     return (
-                      <TableRow key={`${regSourceType}-${id}-${idx}`} className={cn("cursor-pointer hover:bg-muted/50", checked && "bg-primary/5")} onClick={() => toggleRegItem(id)}>
+                      <TableRow key={`${regSourceType}-${id}-${idx}`} className={cn("cursor-pointer hover:bg-muted/30", checked && "bg-primary/5")} onClick={() => toggleRegItem(id)}>
                         <TableCell className="text-center" onClick={e => e.stopPropagation()}><Checkbox checked={checked} onCheckedChange={() => toggleRegItem(id)} /></TableCell>
-                        {regSourceType === "item" && <><TableCell className="text-xs font-medium">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-xs">{item.spec || "-"}</TableCell></>}
-                        {regSourceType === "order" && <><TableCell className="text-xs">{item.order_no}</TableCell><TableCell className="text-xs">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-xs">{item.spec || "-"}</TableCell><TableCell className="text-right text-xs">{Number(item.qty || 0).toLocaleString()}</TableCell><TableCell className="text-xs">{item.due_date || "-"}</TableCell></>}
-                        {regSourceType === "production" && <><TableCell className="text-xs">{item.plan_no}</TableCell><TableCell className="text-xs">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-right text-xs">{Number(item.plan_qty || 0).toLocaleString()}</TableCell><TableCell className="text-xs">{item.start_date ? String(item.start_date).split("T")[0] : "-"}</TableCell><TableCell className="text-xs">{item.end_date ? String(item.end_date).split("T")[0] : "-"}</TableCell><TableCell className="text-xs">{item.equipment_name || "-"}</TableCell></>}
+                        {regSourceType === "item" && <><TableCell className="text-[13px] font-medium">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-[13px]">{item.spec || "-"}</TableCell></>}
+                        {regSourceType === "order" && <><TableCell className="text-[13px]">{item.order_no}</TableCell><TableCell className="text-[13px]">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-[13px]">{item.spec || "-"}</TableCell><TableCell className="text-right text-[13px]">{Number(item.qty || 0).toLocaleString()}</TableCell><TableCell className="text-[13px]">{item.due_date || "-"}</TableCell></>}
+                        {regSourceType === "production" && <><TableCell className="text-[13px]">{item.plan_no}</TableCell><TableCell className="text-[13px]">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-right text-[13px]">{Number(item.plan_qty || 0).toLocaleString()}</TableCell><TableCell className="text-[13px]">{item.start_date ? String(item.start_date).split("T")[0] : "-"}</TableCell><TableCell className="text-[13px]">{item.end_date ? String(item.end_date).split("T")[0] : "-"}</TableCell><TableCell className="text-[13px]">{item.equipment_name || "-"}</TableCell></>}
                       </TableRow>
                     );
                   })}
@@ -604,9 +596,9 @@ export default function WorkInstructionPage() {
             <div className="px-6 py-2 border-t bg-muted/10 flex items-center justify-between shrink-0">
               <span className="text-xs text-muted-foreground">총 {regTotalCount}건 (선택: {regCheckedIds.size}건)</span>
               <div className="flex items-center gap-1">
-                <Button variant="outline" size="icon" className="h-7 w-7" disabled={regPage <= 1} onClick={() => { const p = regPage - 1; setRegPage(p); fetchRegSource(p); }}><ChevronLeft className="w-3.5 h-3.5" /></Button>
+                <Button variant="ghost" size="icon" className="h-7 w-7" disabled={regPage <= 1} onClick={() => { const p = regPage - 1; setRegPage(p); fetchRegSource(p); }}><ChevronLeft className="w-3.5 h-3.5" /></Button>
                 <span className="text-xs font-medium px-2">{regPage} / {totalRegPages}</span>
-                <Button variant="outline" size="icon" className="h-7 w-7" disabled={regPage >= totalRegPages} onClick={() => { const p = regPage + 1; setRegPage(p); fetchRegSource(p); }}><ChevronRight className="w-3.5 h-3.5" /></Button>
+                <Button variant="ghost" size="icon" className="h-7 w-7" disabled={regPage >= totalRegPages} onClick={() => { const p = regPage + 1; setRegPage(p); fetchRegSource(p); }}><ChevronRight className="w-3.5 h-3.5" /></Button>
               </div>
             </div>
           )}
@@ -619,65 +611,59 @@ export default function WorkInstructionPage() {
       </Dialog>
 
       {/* ── 2단계: 확인 모달 ── */}
-      <FullscreenDialog
-        open={isConfirmModalOpen}
-        onOpenChange={setIsConfirmModalOpen}
-        title="작업지시 적용 확인"
-        description="기본 정보를 입력하고 '최종 적용' 버튼을 눌러주세요."
-        footer={
-          <>
-            <Button variant="outline" onClick={() => { setIsConfirmModalOpen(false); setIsRegModalOpen(true); }}><ChevronLeft className="w-4 h-4 mr-1" /> 이전</Button>
-            <Button variant="outline" onClick={() => setIsConfirmModalOpen(false)}>취소</Button>
-            <Button onClick={finalizeRegistration} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <CheckCircle2 className="w-4 h-4 mr-1.5" />} 최종 적용</Button>
-          </>
-        }
-      >
+      <Dialog open={isConfirmModalOpen} onOpenChange={setIsConfirmModalOpen}>
+        <DialogContent className="max-w-[1100px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>작업지시 적용 확인</DialogTitle>
+            <DialogDescription>기본 정보를 입력하고 '최종 적용' 버튼을 눌러주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
           <div className="space-y-5">
             <div className="bg-muted/30 border rounded-lg p-5">
-              <h4 className="text-sm font-semibold mb-4">작업지시 기본 정보</h4>
-              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-                <div className="space-y-1.5"><Label className="text-xs">작업지시번호</Label><Input value={confirmWiNo} readOnly className="h-9 bg-muted/50 text-muted-foreground" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">상태</Label>
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground">작업지시 기본 정보</h4>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-3">
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업지시번호</Label><Input value={confirmWiNo} readOnly className="h-9 bg-muted cursor-not-allowed font-mono" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
                   <Select value={confirmStatus} onValueChange={setConfirmStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select>
                 </div>
-                <div className="space-y-1.5"><Label className="text-xs">시작일</Label><FormDatePicker value={confirmStartDate} onChange={setConfirmStartDate} placeholder="시작일" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">완료예정일</Label><FormDatePicker value={confirmEndDate} onChange={setConfirmEndDate} placeholder="완료예정일" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">설비</Label>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">시작일</Label><Input type="date" value={confirmStartDate} onChange={(e) => setConfirmStartDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">완료예정일</Label><Input type="date" value={confirmEndDate} onChange={(e) => setConfirmEndDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">설비</Label>
                   <Select value={nv(confirmEquipmentId)} onValueChange={v => setConfirmEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비 선택" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select>
                 </div>
-                <div className="space-y-1.5"><Label className="text-xs">작업조</Label>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업조</Label>
                   <Select value={nv(confirmWorkTeam)} onValueChange={v => setConfirmWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select>
                 </div>
-                <div className="space-y-1.5"><Label className="text-xs">작업자</Label>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업자</Label>
                   <WorkerCombobox value={confirmWorker} onChange={setConfirmWorker} open={confirmWorkerOpen} onOpenChange={setConfirmWorkerOpen} />
                 </div>
-                <div className="space-y-1.5"><Label className="text-xs">비고</Label><Input className="h-9" placeholder="비고" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">비고</Label><Input className="h-9" placeholder="비고를 입력해주세요" /></div>
               </div>
             </div>
             <div className="border rounded-lg p-5">
-              <h4 className="text-sm font-semibold mb-3">품목 목록</h4>
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground mb-3">품목 목록</h4>
               <div className="overflow-auto">
                 <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10">
-                    <TableRow>
-                      <TableHead className="w-[50px]">순번</TableHead>
-                      <TableHead className="w-[110px]">품목코드</TableHead>
-                      <TableHead>품목명</TableHead>
-                      <TableHead className="w-[80px]">규격</TableHead>
-                      <TableHead className="w-[90px]">수량</TableHead>
-                      <TableHead className="w-[180px]">라우팅</TableHead>
-                      <TableHead>비고</TableHead>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">순번</TableHead>
+                      <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                      <TableHead className="w-[180px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">라우팅</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
                       <TableHead className="w-[40px]" />
                     </TableRow>
                   </TableHeader>
                   <TableBody>
                     {confirmItems.map((item, idx) => (
                       <TableRow key={idx}>
-                        <TableCell className="text-xs text-center">{idx + 1}</TableCell>
-                        <TableCell className="text-xs font-medium">{item.itemCode}</TableCell>
+                        <TableCell className="text-[13px] text-center">{idx + 1}</TableCell>
+                        <TableCell className="text-[13px] font-medium">{item.itemCode}</TableCell>
                         <TableCell className="text-sm">{item.itemName || item.itemCode}</TableCell>
-                        <TableCell className="text-xs">{item.spec || "-"}</TableCell>
-                        <TableCell><Input type="number" className="h-7 text-xs w-20" value={item.qty} onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
+                        <TableCell className="text-[13px]">{item.spec || "-"}</TableCell>
+                        <TableCell><Input type="number" className="h-7 text-[13px] w-20" value={item.qty} onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
                         <TableCell>
                           <Select
                             value={nv(item.routing || "")}
@@ -697,7 +683,7 @@ export default function WorkInstructionPage() {
                             </SelectContent>
                           </Select>
                         </TableCell>
-                        <TableCell><Input className="h-7 text-xs" value={item.remark} placeholder="비고" onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
+                        <TableCell><Input className="h-7 text-[13px]" value={item.remark} placeholder="비고" onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
                         <TableCell><Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setConfirmItems(prev => prev.filter((_, i) => i !== idx))}><X className="w-3 h-3 text-destructive" /></Button></TableCell>
                       </TableRow>
                     ))}
@@ -706,68 +692,70 @@ export default function WorkInstructionPage() {
               </div>
             </div>
           </div>
-      </FullscreenDialog>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setIsConfirmModalOpen(false); setIsRegModalOpen(true); }}><ChevronLeft className="w-4 h-4 mr-1" /> 이전</Button>
+            <Button variant="outline" onClick={() => setIsConfirmModalOpen(false)}>취소</Button>
+            <Button onClick={finalizeRegistration} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <CheckCircle2 className="w-4 h-4 mr-1.5" />} 최종 적용</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* ── 수정 모달 ── */}
-      <FullscreenDialog
-        open={isEditModalOpen}
-        onOpenChange={(v) => { if (!v && wsModalOpen) return; setIsEditModalOpen(v); }}
-        title={`작업지시 관리 - ${editOrder?.work_instruction_no || ""}`}
-        description="품목을 추가/삭제하고 정보를 수정하세요."
-        footer={
-          <>
-            <Button variant="outline" onClick={() => setIsEditModalOpen(false)}>취소</Button>
-            <Button onClick={saveEdit} disabled={editSaving}>{editSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button>
-          </>
-        }
-      >
+      <Dialog open={isEditModalOpen} onOpenChange={(v) => { if (!v && wsModalOpen) return; setIsEditModalOpen(v); }}>
+        <DialogContent className="max-w-[1100px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{`작업지시 관리 - ${editOrder?.work_instruction_no || ""}`}</DialogTitle>
+            <DialogDescription>품목을 추가/삭제하고 정보를 수정해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
           <div className="space-y-5">
             <div className="bg-muted/30 border rounded-lg p-5">
-              <h4 className="text-sm font-semibold mb-4">기본 정보</h4>
-              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-                <div className="space-y-1.5"><Label className="text-xs">상태</Label><Select value={editStatus} onValueChange={setEditStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select></div>
-                <div className="space-y-1.5"><Label className="text-xs">시작일</Label><FormDatePicker value={editStartDate} onChange={setEditStartDate} placeholder="시작일" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">완료예정일</Label><FormDatePicker value={editEndDate} onChange={setEditEndDate} placeholder="완료예정일" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">설비</Label><Select value={nv(editEquipmentId)} onValueChange={v => setEditEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select></div>
-                <div className="space-y-1.5"><Label className="text-xs">작업조</Label><Select value={nv(editWorkTeam)} onValueChange={v => setEditWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select></div>
-                <div className="space-y-1.5"><Label className="text-xs">작업자</Label>
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground">기본 정보</h4>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-3">
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">상태</Label><Select value={editStatus} onValueChange={setEditStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">시작일</Label><Input type="date" value={editStartDate} onChange={(e) => setEditStartDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">완료예정일</Label><Input type="date" value={editEndDate} onChange={(e) => setEditEndDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">설비</Label><Select value={nv(editEquipmentId)} onValueChange={v => setEditEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비 선택" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업조</Label><Select value={nv(editWorkTeam)} onValueChange={v => setEditWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업자</Label>
                   <WorkerCombobox value={editWorker} onChange={setEditWorker} open={editWorkerOpen} onOpenChange={setEditWorkerOpen} />
                 </div>
-                <div className="space-y-1.5 col-span-2"><Label className="text-xs">비고</Label><Input value={editRemark} onChange={e => setEditRemark(e.target.value)} className="h-9" placeholder="비고" /></div>
+                <div className="space-y-1 col-span-2"><Label className="text-[11px] font-semibold text-muted-foreground">비고</Label><Input value={editRemark} onChange={e => setEditRemark(e.target.value)} className="h-9" placeholder="비고를 입력해주세요" /></div>
               </div>
             </div>
 
             {/* 품목 테이블 — 라우팅/공정작업기준을 품목별로 표시 */}
             <div className="border rounded-lg overflow-hidden">
-              <div className="flex items-center justify-between p-3 bg-muted/20 border-b">
-                <span className="text-sm font-semibold">작업지시 항목</span>
-                <span className="text-xs text-muted-foreground">{editItems.length}건</span>
+              <div className="flex items-center justify-between px-4 py-2.5 bg-muted/30 border-b">
+                <span className="text-[13px] font-bold text-foreground">작업지시 항목</span>
+                <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{editItems.length}건</span>
               </div>
               <div className="overflow-auto">
                 <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10">
-                    <TableRow>
-                      <TableHead className="w-[50px]">순번</TableHead>
-                      <TableHead className="w-[110px]">품목코드</TableHead>
-                      <TableHead>품목명</TableHead>
-                      <TableHead className="w-[80px]">규격</TableHead>
-                      <TableHead className="w-[90px] text-right">수량</TableHead>
-                      <TableHead className="w-[180px]">라우팅</TableHead>
-                      <TableHead className="w-[100px]">공정작업기준</TableHead>
-                      <TableHead>비고</TableHead>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">순번</TableHead>
+                      <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                      <TableHead className="w-[180px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">라우팅</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공정작업기준</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
                       <TableHead className="w-[40px]" />
                     </TableRow>
                   </TableHeader>
                   <TableBody>
                     {editItems.length === 0 ? (
-                      <TableRow><TableCell colSpan={9} className="text-center py-8 text-muted-foreground text-sm">품목이 없습니다</TableCell></TableRow>
+                      <TableRow><TableCell colSpan={9} className="text-center py-8 text-sm text-muted-foreground">등록된 품목이 없어요</TableCell></TableRow>
                     ) : editItems.map((item, idx) => (
                       <TableRow key={idx}>
-                        <TableCell className="text-xs text-center">{idx + 1}</TableCell>
-                        <TableCell className="text-xs font-medium">{item.itemCode}</TableCell>
-                        <TableCell className="text-xs max-w-[150px] truncate" title={item.itemName}>{item.itemName || "-"}</TableCell>
-                        <TableCell className="text-xs truncate" title={item.spec}>{item.spec || "-"}</TableCell>
-                        <TableCell className="text-right"><Input type="number" className="h-7 text-xs w-20 ml-auto" value={item.qty} onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
+                        <TableCell className="text-[13px] text-center">{idx + 1}</TableCell>
+                        <TableCell className="text-[13px] font-medium">{item.itemCode}</TableCell>
+                        <TableCell className="text-[13px] max-w-[150px] truncate" title={item.itemName}>{item.itemName || "-"}</TableCell>
+                        <TableCell className="text-[13px] truncate" title={item.spec}>{item.spec || "-"}</TableCell>
+                        <TableCell className="text-right"><Input type="number" className="h-7 text-[13px] w-20 ml-auto" value={item.qty} onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
                         <TableCell>
                           <Select
                             value={nv(item.routing || "")}
@@ -789,7 +777,7 @@ export default function WorkInstructionPage() {
                         </TableCell>
                         <TableCell>
                           <Button
-                            variant="outline"
+                            variant="ghost"
                             size="sm"
                             className="h-7 text-xs"
                             disabled={!item.routing}
@@ -808,7 +796,7 @@ export default function WorkInstructionPage() {
                             <ClipboardCheck className="w-3 h-3 mr-1" /> 수정
                           </Button>
                         </TableCell>
-                        <TableCell><Input className="h-7 text-xs" value={item.remark} placeholder="비고" onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
+                        <TableCell><Input className="h-7 text-[13px]" value={item.remark} placeholder="비고" onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
                         <TableCell><Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setEditItems(prev => prev.filter((_, i) => i !== idx))}><X className="w-3 h-3 text-destructive" /></Button></TableCell>
                       </TableRow>
                     ))}
@@ -816,14 +804,20 @@ export default function WorkInstructionPage() {
                 </Table>
               </div>
               {editItems.length > 0 && (
-                <div className="p-3 border-t bg-muted/20 flex items-center justify-between">
-                  <span className="text-sm font-semibold">총 수량</span>
-                  <span className="text-lg font-bold text-primary">{editItems.reduce((s, i) => s + i.qty, 0).toLocaleString()} EA</span>
+                <div className="px-4 py-2.5 border-t bg-muted/30 flex items-center justify-between">
+                  <span className="text-[13px] font-bold text-foreground">총 수량</span>
+                  <span className="text-lg font-bold font-mono text-primary">{editItems.reduce((s, i) => s + i.qty, 0).toLocaleString()} EA</span>
                 </div>
               )}
             </div>
           </div>
-      </FullscreenDialog>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEditModalOpen(false)}>취소</Button>
+            <Button onClick={saveEdit} disabled={editSaving}>{editSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 공정작업기준 수정 모달 */}
       <WorkStandardEditModal
@@ -835,6 +829,15 @@ export default function WorkInstructionPage() {
         itemName={wsModalItemName}
         itemCode={wsModalItemCode}
       />
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_10/purchase/order/page.tsx b/frontend/app/(main)/COMPANY_10/purchase/order/page.tsx
new file mode 100644
index 00000000..1bc3bc88
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/purchase/order/page.tsx
@@ -0,0 +1,1287 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  ClipboardList, Pencil, Search, X, Package, ChevronDown,
+  ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const MASTER_TABLE = "purchase_order_mng";
+const DETAIL_TABLE = "purchase_detail";
+
+const formatNumber = (val: string) => {
+  const num = val.replace(/[^\d.-]/g, "");
+  if (!num) return "";
+  const parts = num.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+const parseNumber = (val: string) => val.replace(/,/g, "");
+
+const STATUS_OPTIONS = [
+  { code: "작성중", label: "작성중" },
+  { code: "발주확정", label: "발주확정" },
+  { code: "입고완료", label: "입고완료" },
+  { code: "취소", label: "취소" },
+];
+
+const STATUS_BADGE_CLASS: Record<string, string> = {
+  "작성중": "bg-warning/10 text-warning border-warning/20",
+  "발주확정": "bg-primary/10 text-primary border-primary/20",
+  "입고완료": "bg-success/10 text-success border-success/20",
+  "취소": "bg-destructive/10 text-destructive border-destructive/20",
+};
+
+const EXCEL_COLUMNS = [
+  { key: "purchase_no", label: "발주번호" },
+  { key: "order_date", label: "발주일" },
+  { key: "supplier_name", label: "공급업체명" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "order_qty", label: "발주수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "amount", label: "금액" },
+  { key: "due_date", label: "납기일" },
+];
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "purchase_no", label: "발주번호" },
+  { key: "order_date", label: "발주일" },
+  { key: "supplier_name", label: "공급업체" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "spec", label: "규격" },
+  { key: "order_qty", label: "발주수량" },
+  { key: "received_qty", label: "입고수량" },
+  { key: "remain_qty", label: "잔량" },
+  { key: "unit_price", label: "단가" },
+  { key: "amount", label: "금액" },
+  { key: "due_date", label: "납기일" },
+  { key: "status", label: "상태" },
+  { key: "memo", label: "메모" },
+];
+
+export default function PurchaseOrderPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const [orders, setOrders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [masterForm, setMasterForm] = useState<Record<string, any>>({});
+  const [detailRows, setDetailRows] = useState<any[]>([]);
+
+  // 품목 선택 모달
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSelectedMap, setItemSelectedMap] = useState<Map<string, any>>(new Map());
+  const [itemSearchDivision, setItemSearchDivision] = useState("all");
+  const [itemPage, setItemPage] = useState(1);
+  const [itemPageSize, setItemPageSize] = useState(20);
+  const [itemTotalPages, setItemTotalPages] = useState(0);
+  const [itemTotal, setItemTotal] = useState(0);
+  const [itemPageInput, setItemPageInput] = useState("1");
+
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-purchase-order", DETAIL_TABLE, GRID_COLUMNS_CONFIG);
+
+  const isReadOnly = masterForm.status === "입고완료" || masterForm.status === "취소";
+
+  // 카테고리 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      const catColumns = ["input_mode", "price_mode"];
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      const dedup = (items: { code: string; label: string }[]) => {
+        const seen = new Set<string>();
+        return items.filter((item) => {
+          const key = item.label.replace(/\s/g, "");
+          if (seen.has(key)) return false;
+          seen.add(key);
+          return true;
+        });
+      };
+      await Promise.all(
+        catColumns.map(async (col) => {
+          try {
+            const res = await apiClient.get(`/table-categories/${MASTER_TABLE}/${col}/values`);
+            if (res.data?.success && res.data.data?.length > 0) {
+              optMap[col] = dedup(flatten(res.data.data));
+            }
+          } catch { /* skip */ }
+        })
+      );
+      try {
+        const suppRes = await apiClient.post(`/table-management/tables/supplier_mng/data`, {
+          page: 1, size: 500, autoFilter: true,
+        });
+        const supps = suppRes.data?.data?.data || suppRes.data?.data?.rows || [];
+        optMap["supplier_code"] = supps.map((s: any) => ({
+          code: s.supplier_code,
+          label: `${s.supplier_name} (${s.supplier_code})`,
+        }));
+      } catch { /* skip */ }
+      try {
+        const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
+          page: 1, size: 500, autoFilter: true,
+        });
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        optMap["manager"] = users.map((u: any) => ({
+          code: u.user_id || u.id,
+          label: `${u.user_name || u.name || u.user_id}${u.position_name ? ` (${u.position_name})` : ""}`,
+        }));
+      } catch { /* skip */ }
+      for (const col of ["unit", "material", "division"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/item_info/${col}/values`);
+          if (res.data?.success && res.data.data?.length > 0) {
+            optMap[`item_${col}`] = flatten(res.data.data);
+          }
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+      const divs = optMap["item_division"] || [];
+      const purchaseDiv = divs.find((o) => o.label === "구매관리")
+        || divs.find((o) => o.label === "원자재")
+        || divs.find((o) => o.label === "부자재");
+      if (purchaseDiv) setItemSearchDivision(purchaseDiv.code);
+    };
+    loadCategories();
+  }, []);
+
+  // 마스터 테이블 컬럼 (supplier_name, order_date 등)
+  const MASTER_COLUMNS = new Set(["supplier_name", "supplier_code", "order_date", "status"]);
+
+  // 데이터 조회
+  const fetchOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      // searchFilters를 detail / master로 분리
+      const detailFilters: any[] = [];
+      const masterExtraFilters: any[] = [];
+      for (const f of searchFilters) {
+        const filter = { columnName: f.columnName, operator: f.operator, value: f.value };
+        if (MASTER_COLUMNS.has(f.columnName)) {
+          masterExtraFilters.push(filter);
+        } else {
+          detailFilters.push(filter);
+        }
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: detailFilters.length > 0 ? { enabled: true, filters: detailFilters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "purchase_no", order: "desc" },
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+
+      const purchaseNos = [...new Set(rows.map((r: any) => r.purchase_no).filter(Boolean))];
+      let masterMap: Record<string, any> = {};
+      if (purchaseNos.length > 0) {
+        try {
+          const masterFilters: any[] = [{ columnName: "purchase_no", operator: "in", value: purchaseNos }, ...masterExtraFilters];
+          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: purchaseNos.length + 10,
+            dataFilter: { enabled: true, filters: masterFilters },
+            autoFilter: true,
+          });
+          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+          for (const m of masters) masterMap[m.purchase_no] = m;
+        } catch { /* skip */ }
+      }
+
+      const itemCodes = [...new Set(rows.map((r: any) => r.item_code).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemCodes.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemCodes.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+            autoFilter: true,
+          });
+          const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+          for (const item of items) itemMap[item.item_number] = item;
+        } catch { /* skip */ }
+      }
+
+      const resolveLabel = (key: string, code: string) => {
+        if (!code) return "";
+        const opts = categoryOptions[key];
+        if (!opts) return code;
+        return opts.find((o) => o.code === code)?.label || code;
+      };
+
+      const hasMasterFilters = masterExtraFilters.length > 0;
+      const data = rows
+        .filter((row: any) => {
+          const master = masterMap[row.purchase_no];
+          if (hasMasterFilters && !master) return false;
+          return true;
+        })
+        .map((row: any) => {
+          const item = itemMap[row.item_code];
+          const master = masterMap[row.purchase_no];
+          const rawUnit = row.unit || item?.unit || "";
+          return {
+            ...row,
+            item_name: row.item_name || item?.item_name || "",
+            spec: row.spec || item?.size || "",
+            unit: resolveLabel("item_unit", rawUnit) || rawUnit,
+            status: master?.status || "",
+            supplier_name: master?.supplier_name || "",
+            order_date: master?.order_date || "",
+            memo: row.memo || master?.memo || "",
+          };
+        });
+
+      setOrders(data);
+      setTotalCount(data.length);
+    } catch {
+      toast.error("발주 목록을 불러오는데 실패했어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters, categoryOptions]);
+
+  useEffect(() => { fetchOrders(); }, [fetchOrders]);
+
+  // purchase_no 기준 그룹핑
+  const orderGroups = useMemo(() => {
+    const map: Record<string, { master: any; details: any[] }> = {};
+    for (const row of orders) {
+      const key = row.purchase_no || row.id;
+      if (!map[key]) {
+        map[key] = {
+          master: { purchase_no: row.purchase_no, order_date: row.order_date, supplier_name: row.supplier_name, status: row.status, memo: row.memo },
+          details: [],
+        };
+      }
+      map[key].details.push(row);
+    }
+    return map;
+  }, [orders]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    const found = categoryOptions[col]?.find((o) => o.code === code);
+    return found?.label || code;
+  };
+
+  // 등록 모달 열기
+  const openRegisterModal = () => {
+    const defaultInputMode = categoryOptions["input_mode"]?.[0]?.code || "";
+    const defaultPriceMode = categoryOptions["price_mode"]?.[0]?.code || "";
+    setMasterForm({
+      input_mode: defaultInputMode,
+      price_mode: defaultPriceMode,
+      manager: user?.userId || "",
+      order_date: new Date().toISOString().split("T")[0],
+      status: "작성중",
+    });
+    setDetailRows([]);
+    setIsEditMode(false);
+    setIsModalOpen(true);
+  };
+
+  // 수정 모달 열기
+  const openEditModal = async (purchaseNo: string) => {
+    try {
+      const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+        autoFilter: true,
+      });
+      const masterData = (masterRes.data?.data?.data || masterRes.data?.data?.rows || [])[0];
+
+      const detailRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+        autoFilter: true,
+      });
+      const detailData = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+
+      setMasterForm(masterData || {});
+      setDetailRows(detailData.map((d: any, i: number) => ({ ...d, _id: d.id || `row_${i}` })));
+      setIsEditMode(true);
+      setIsModalOpen(true);
+    } catch {
+      toast.error("발주 정보를 불러오는데 실패했어요.");
+    }
+  };
+
+  // 삭제 (다중 선택)
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.error("삭제할 발주를 선택해주세요."); return; }
+    const selectedItems = orders.filter((o) => checkedIds.includes(o.id));
+    const purchaseNos = [...new Set(selectedItems.map((o) => o.purchase_no))];
+    const ok = await confirm(`${checkedIds.length}건의 발주 데이터를 삭제하시겠어요?`, {
+      description: "삭제된 데이터는 복구할 수 없어요.",
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+        data: checkedIds.map((id) => ({ id })),
+      });
+      for (const purchaseNo of purchaseNos) {
+        const remaining = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+          autoFilter: true,
+        });
+        const remainRows = remaining.data?.data?.data || remaining.data?.data?.rows || [];
+        if (remainRows.length === 0) {
+          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: 1,
+            dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+            autoFilter: true,
+          });
+          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+          if (masters.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
+              data: masters.map((m: any) => ({ id: m.id })),
+            });
+          }
+        }
+      }
+      toast.success("삭제되었어요.");
+      setCheckedIds([]);
+      fetchOrders();
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // 저장 (마스터 + 디테일)
+  const handleSave = async () => {
+    if (detailRows.length === 0) {
+      toast.error("품목을 1개 이상 추가해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, created_by, updated_by, ...masterFields } = masterForm;
+
+      if (isEditMode && id) {
+        await apiClient.put(`/table-management/tables/${MASTER_TABLE}/edit`, {
+          originalData: { id },
+          updatedData: masterFields,
+        });
+        const existingDetails = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 100,
+          dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: masterForm.purchase_no }] },
+          autoFilter: true,
+        });
+        const existings = existingDetails.data?.data?.data || existingDetails.data?.data?.rows || [];
+        if (existings.length > 0) {
+          await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+            data: existings.map((d: any) => ({ id: d.id })),
+          });
+        }
+        for (const [idx, row] of detailRows.entries()) {
+          const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
+          await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            ...detailFields,
+            purchase_no: masterForm.purchase_no,
+            seq_no: idx + 1,
+          });
+        }
+      } else {
+        const { purchase_no: _pn, ...fieldsWithoutPurchaseNo } = masterFields;
+        const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/add`, { id: crypto.randomUUID(), ...fieldsWithoutPurchaseNo });
+        const createdData = masterRes.data?.data;
+        let purchaseNo = createdData?.purchase_no;
+        if (!purchaseNo) {
+          const queryRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: 1,
+            sort: { columnName: "created_date", order: "desc" },
+            autoFilter: true,
+          });
+          const records = queryRes.data?.data?.data || queryRes.data?.data?.rows || [];
+          purchaseNo = records[0]?.purchase_no;
+        }
+        if (!purchaseNo) {
+          toast.error("발주번호를 가져올 수 없어요. 다시 시도해주세요.");
+          return;
+        }
+        for (const [idx, row] of detailRows.entries()) {
+          const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
+          await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            ...detailFields,
+            purchase_no: purchaseNo,
+            seq_no: idx + 1,
+          });
+        }
+      }
+
+      toast.success(isEditMode ? "수정되었어요." : "등록되었어요.");
+      setIsModalOpen(false);
+      fetchOrders();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 검색
+  const searchItems = async (page?: number, size?: number) => {
+    const p = page ?? itemPage;
+    const s = size ?? itemPageSize;
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      }
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      let allRows = resData?.data || resData?.rows || [];
+      if (itemSearchDivision !== "all") {
+        const divLabel = categoryOptions["item_division"]?.find((o) => o.code === itemSearchDivision)?.label || "";
+        allRows = allRows.filter((item: any) => {
+          const div = item.division || "";
+          return div.includes(itemSearchDivision) || (divLabel && div.includes(divLabel));
+        });
+      }
+      const total = allRows.length;
+      const start = (p - 1) * s;
+      setItemSearchResults(allRows.slice(start, start + s));
+      setItemTotal(total);
+      setItemTotalPages(Math.max(1, Math.ceil(total / s)));
+    } catch { /* skip */ } finally {
+      setItemSearchLoading(false);
+    }
+  };
+
+  const handleItemPageChange = (newPage: number) => {
+    if (newPage < 1 || newPage > itemTotalPages) return;
+    setItemPage(newPage);
+    setItemPageInput(String(newPage));
+    searchItems(newPage);
+  };
+
+  const commitItemPageInput = () => {
+    const parsed = parseInt(itemPageInput, 10);
+    if (isNaN(parsed) || itemPageInput.trim() === "") {
+      setItemPageInput(String(itemPage));
+      return;
+    }
+    const clamped = Math.max(1, Math.min(parsed, itemTotalPages || 1));
+    if (clamped !== itemPage) handleItemPageChange(clamped);
+    setItemPageInput(String(clamped));
+  };
+
+  const triggerNewSearch = () => {
+    setItemPage(1);
+    setItemPageInput("1");
+    searchItems(1);
+  };
+
+  const addSelectedItemsToDetail = async () => {
+    const selected = Array.from(itemSelectedMap.values());
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+
+    const supplierCode = masterForm.supplier_code;
+    const isStandard = masterForm.price_mode === "standard";
+    const isSupplier = masterForm.price_mode === "supplier";
+    let supplierPriceMap: Record<string, string> = {};
+    if (isSupplier && supplierCode) {
+      try {
+        const itemIds = selected.map((item) => item.item_number || item.id);
+        const res = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: {
+            enabled: true,
+            filters: [
+              { columnName: "supplier_id", operator: "equals", value: supplierCode },
+              { columnName: "item_id", operator: "in", value: itemIds },
+            ],
+          },
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) supplierPriceMap[p.item_id] = String(price);
+        }
+      } catch { /* skip */ }
+    }
+
+    const newRows = selected.map((item) => {
+      const itemCode = item.item_number || item.id;
+      let unitPrice = "";
+      if (isStandard) {
+        unitPrice = item.purchase_price || item.standard_price || "";
+      } else if (isSupplier && supplierCode) {
+        unitPrice = supplierPriceMap[itemCode] || "";
+      }
+      return {
+        _id: `new_${Date.now()}_${Math.random()}`,
+        item_code: itemCode,
+        item_name: item.item_name,
+        spec: item.size || "",
+        material: getCategoryLabel("item_material", item.material) || item.material || "",
+        unit: getCategoryLabel("item_unit", item.unit) || item.unit || "",
+        order_qty: "",
+        received_qty: "0",
+        remain_qty: "0",
+        unit_price: unitPrice,
+        amount: "",
+        due_date: "",
+        memo: "",
+      };
+    });
+
+    setDetailRows((prev) => [...prev, ...newRows]);
+    toast.success(`${selected.length}개 품목이 추가되었어요.`);
+    setItemSelectedMap(new Map());
+    setItemSelectOpen(false);
+  };
+
+  // 단가 재계산: 단가방식/공급업체 변경 시 기존 품목 단가 갱신
+  const recalcPrices = useCallback(async (priceMode: string, supplierCode: string) => {
+    if (detailRows.length === 0) return;
+    const isStandard = priceMode === "standard";
+    const isSupplier = priceMode === "supplier";
+
+    if (isStandard) {
+      const itemCodes = detailRows.map((r) => r.item_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+          autoFilter: true,
+        });
+        const items = res.data?.data?.data || res.data?.data?.rows || [];
+        const priceMap: Record<string, string> = {};
+        for (const item of items) {
+          const price = item.purchase_price || item.standard_price || "";
+          if (price) priceMap[item.item_number] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.item_code] || "";
+          const qty = parseFloat(row.order_qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    } else if (isSupplier && supplierCode) {
+      const itemCodes = detailRows.map((r) => r.item_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_id", operator: "equals", value: supplierCode },
+            { columnName: "item_id", operator: "in", value: itemCodes },
+          ]},
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        const priceMap: Record<string, string> = {};
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) priceMap[p.item_id] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.item_code] || "";
+          const qty = parseFloat(row.order_qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    }
+  }, [detailRows]);
+
+  const updateDetailRow = (idx: number, field: string, value: string) => {
+    setDetailRows((prev) => {
+      const next = [...prev];
+      next[idx] = { ...next[idx], [field]: value };
+      if (field === "order_qty" || field === "unit_price") {
+        const qty = parseFloat(field === "order_qty" ? value : next[idx].order_qty) || 0;
+        const price = parseFloat(field === "unit_price" ? value : next[idx].unit_price) || 0;
+        next[idx].amount = (qty * price).toString();
+        const received = parseFloat(next[idx].received_qty) || 0;
+        next[idx].remain_qty = (qty - received).toString();
+      }
+      return next;
+    });
+  };
+
+  const removeDetailRow = (idx: number) => {
+    setDetailRows((prev) => prev.filter((_, i) => i !== idx));
+  };
+
+  const handleExcelDownload = async () => {
+    if (orders.length === 0) { toast.error("다운로드할 데이터가 없어요."); return; }
+    const data = orders.map((o) => {
+      const row: Record<string, any> = {};
+      for (const col of EXCEL_COLUMNS) row[col.label] = o[col.key] || "";
+      return row;
+    });
+    await exportToExcel(data, "발주관리.xlsx", "발주목록");
+    toast.success("다운로드 완료");
+  };
+
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={DETAIL_TABLE}
+        filterId="c16-purchase-order"
+        onFilterChange={setSearchFilters}
+        dataCount={totalCount}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between flex-wrap gap-3">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-bold">발주 목록</h2>
+          <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+            {totalCount}건
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4 mr-1" /> 발주 등록
+          </Button>
+          <Button variant="outline" size="sm" disabled={checkedIds.length !== 1} onClick={() => {
+            const item = orders.find((o) => o.id === checkedIds[0]);
+            if (item) openEditModal(item.purchase_no);
+          }}>
+            <Pencil className="w-4 h-4 mr-1" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1" /> 삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4 mr-1" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4 mr-1" /> 엑셀
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+            <Settings2 className="w-4 h-4 mr-1" /> 설정
+          </Button>
+        </div>
+      </div>
+
+      {/* 데이터 테이블 — 아코디언 그룹핑 */}
+      <div className="flex-1 overflow-auto border rounded-lg bg-card">
+        {loading ? (
+          <div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
+        ) : Object.keys(orderGroups).length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+            <Package className="h-10 w-10 mb-2 opacity-30" />
+            <p className="text-sm">등록된 발주가 없어요</p>
+          </div>
+        ) : (
+          (() => {
+            const MASTER_KEYS = new Set(["purchase_no", "order_date", "supplier_name", "status", "memo"]);
+            const numCols = new Set(["order_qty", "received_qty", "remain_qty", "unit_price", "amount"]);
+
+            // ts.visibleColumns 순서를 따르되, 마스터/디테일 컬럼을 분리
+            // 고정 컬럼(품목수)은 마스터 선행 컬럼 뒤에 배치
+            const leadingMaster: typeof ts.visibleColumns = [];
+            const detailCols: typeof ts.visibleColumns = [];
+            const trailingMaster: typeof ts.visibleColumns = [];
+            let passedFirstDetail = false;
+            for (const col of ts.visibleColumns) {
+              if (MASTER_KEYS.has(col.key)) {
+                if (passedFirstDetail) trailingMaster.push(col);
+                else leadingMaster.push(col);
+              } else {
+                passedFirstDetail = true;
+                detailCols.push(col);
+              }
+            }
+
+            const renderDetailCell = (row: any, key: string) => {
+              const val = row[key];
+              if (key === "status") return val ? <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[val] || "")}>{val}</span> : "-";
+              if (numCols.has(key)) return <span className="font-mono">{val ? Number(val).toLocaleString() : "0"}</span>;
+              return val || "-";
+            };
+
+            const renderMasterHead = (col: { key: string; label: string }) => (
+              <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground", col.key === "status" && "text-center")}>
+                {col.label}
+              </TableHead>
+            );
+
+            const renderMasterCell = (col: { key: string }, m: any, purchaseNo: string) => {
+              if (col.key === "purchase_no") return <TableCell key={col.key} className="text-sm font-semibold text-primary">{purchaseNo}</TableCell>;
+              if (col.key === "order_date") return <TableCell key={col.key} className="text-sm">{m.order_date ? new Date(m.order_date).toLocaleDateString("ko-KR") : "-"}</TableCell>;
+              if (col.key === "supplier_name") return <TableCell key={col.key} className="text-sm">{m.supplier_name || "-"}</TableCell>;
+              if (col.key === "status") return <TableCell key={col.key} className="text-center">{m.status && <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[m.status] || "")}>{m.status}</span>}</TableCell>;
+              if (col.key === "memo") return <TableCell key={col.key} className="text-sm text-muted-foreground max-w-[120px] truncate">{m.memo || ""}</TableCell>;
+              return <TableCell key={col.key} />;
+            };
+
+            return (
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-8" />
+                    <TableHead className="w-10" />
+                    {leadingMaster.map(renderMasterHead)}
+                    <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground text-center">품목수</TableHead>
+                    {detailCols.map(col => (
+                      <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground", numCols.has(col.key) && "text-right")}>
+                        {col.label}{col.key === "order_qty" || col.key === "amount" ? " 합계" : ""}
+                      </TableHead>
+                    ))}
+                    {trailingMaster.map(renderMasterHead)}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {Object.entries(orderGroups).map(([purchaseNo, group]) => {
+                    const isExpanded = expandedOrders.has(purchaseNo);
+                    const detailIds = group.details.map(d => d.id);
+                    const allChecked = detailIds.length > 0 && detailIds.every(id => checkedIds.includes(id));
+                    const someChecked = detailIds.some(id => checkedIds.includes(id));
+                    const m = group.master;
+                    const totalQty = group.details.reduce((s, d) => s + (Number(d.order_qty) || 0), 0);
+                    const totalAmt = group.details.reduce((s, d) => s + (Number(d.amount) || 0), 0);
+                    return (
+                      <React.Fragment key={purchaseNo}>
+                        <TableRow
+                          style={{ borderTop: "2px solid hsl(var(--border))" }}
+                          className={cn("cursor-pointer border-l-[3px] border-l-transparent font-semibold", allChecked && "border-l-primary bg-primary/5")}
+                          onClick={() => setExpandedOrders(prev => { const next = new Set(prev); if (next.has(purchaseNo)) next.delete(purchaseNo); else next.add(purchaseNo); return next; })}
+                          onDoubleClick={() => openEditModal(purchaseNo)}
+                        >
+                          <TableCell className="text-center p-2">
+                            <ChevronDown className={cn("w-4 h-4 transition-transform text-muted-foreground", !isExpanded && "-rotate-90")} />
+                          </TableCell>
+                          <TableCell className="text-center p-2" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => allChecked ? prev.filter(id => !detailIds.includes(id)) : [...new Set([...prev, ...detailIds])]); }}>
+                            <Checkbox checked={allChecked} data-state={someChecked && !allChecked ? "indeterminate" : undefined} onCheckedChange={() => {}} />
+                          </TableCell>
+                          {leadingMaster.map(col => renderMasterCell(col, m, purchaseNo))}
+                          <TableCell className="text-sm text-center"><Badge variant="secondary" className="text-[10px]">{group.details.length}건</Badge></TableCell>
+                          {detailCols.map(col => (
+                            <TableCell key={col.key} className={cn("text-sm", numCols.has(col.key) && "text-right font-mono")}>
+                              {col.key === "order_qty" ? totalQty.toLocaleString()
+                                : col.key === "amount" ? totalAmt.toLocaleString()
+                                : ""}
+                            </TableCell>
+                          ))}
+                          {trailingMaster.map(col => renderMasterCell(col, m, purchaseNo))}
+                        </TableRow>
+                        {isExpanded && group.details.map((row) => (
+                          <TableRow key={row.id} className="bg-muted/30 text-xs">
+                            <TableCell />
+                            <TableCell className="text-center" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => prev.includes(row.id) ? prev.filter(id => id !== row.id) : [...prev, row.id]); }}>
+                              <Checkbox checked={checkedIds.includes(row.id)} onCheckedChange={() => {}} />
+                            </TableCell>
+                            {leadingMaster.map(col => <TableCell key={col.key} />)}
+                            <TableCell />
+                            {detailCols.map(col => (
+                              <TableCell key={col.key} className={cn(numCols.has(col.key) && "text-right")}>
+                                {renderDetailCell(row, col.key)}
+                              </TableCell>
+                            ))}
+                            {trailingMaster.map(col => <TableCell key={col.key} />)}
+                          </TableRow>
+                        ))}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            );
+          })()
+        )}
+        <div className="px-4 py-2 border-t text-xs text-muted-foreground">
+          전체 {Object.keys(orderGroups).length}건 (발주 기준) / {orders.length}건 (품목 기준)
+        </div>
+      </div>
+
+      {/* 발주 등록/수정 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent
+          className="max-w-[95vw] w-[1200px]"
+          style={{ maxHeight: "90vh", display: "flex", flexDirection: "column" }}
+        >
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? (isReadOnly ? "발주 상세" : "발주 수정") : "발주 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? (isReadOnly ? "발주 상세 정보를 확인해요." : "발주 정보를 수정해요.") : "새로운 발주를 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-y-auto">
+            <div className="space-y-6 py-2 pr-1">
+              {/* 기본 정보 */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  기본 정보
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <div className="grid grid-cols-4 gap-3.5">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">발주번호</Label>
+                    <Input value={masterForm.purchase_no || ""} placeholder={isEditMode ? "" : "자동생성"} className="h-9" disabled />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">발주일 <span className="text-destructive">*</span></Label>
+                    <Input
+                      type="date"
+                      value={masterForm.order_date || ""}
+                      onChange={(e) => setMasterForm((p) => ({ ...p, order_date: e.target.value }))}
+                      className="h-9"
+                      disabled={isReadOnly}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">상태</Label>
+                    {isReadOnly ? (
+                      <div className="flex items-center h-9">
+                        <span className={cn("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold", STATUS_BADGE_CLASS[masterForm.status] || "")}>
+                          {masterForm.status}
+                        </span>
+                      </div>
+                    ) : (
+                      <Select value={masterForm.status || "작성중"} onValueChange={(v) => setMasterForm((p) => ({ ...p, status: v }))}>
+                        <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          {STATUS_OPTIONS.map((s) => (
+                            <SelectItem key={s.code} value={s.code}>{s.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">입력방식</Label>
+                    <Select value={masterForm.input_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, input_mode: v }))} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["input_mode"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">단가방식</Label>
+                    <Select value={masterForm.price_mode || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, price_mode: v })); recalcPrices(v, masterForm.supplier_code || ""); }} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["price_mode"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">담당자</Label>
+                    <Select value={masterForm.manager || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager: v }))} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="담당자 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["manager"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+
+              {/* 공급업체 / 담당자 — 입력방식이 '공급업체 우선'일 때만 표시 */}
+              {masterForm.input_mode === "supplierFirst" && (
+              <div className="p-4 bg-muted/50 border border-dashed border-border rounded-lg space-y-3">
+                <div className="text-xs font-semibold text-primary flex items-center gap-1.5">
+                  <ClipboardList className="w-3.5 h-3.5" /> 공급업체 정보
+                </div>
+                <div className="grid grid-cols-2 gap-3.5">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">공급업체</Label>
+                    <Select
+                      value={masterForm.supplier_code || ""}
+                      onValueChange={(v) => {
+                        const supp = categoryOptions["supplier_code"]?.find((o) => o.code === v);
+                        const name = supp?.label.replace(` (${v})`, "") || "";
+                        setMasterForm((p) => ({ ...p, supplier_code: v, supplier_name: name }));
+                        recalcPrices(masterForm.price_mode || "", v);
+                      }}
+                      disabled={isReadOnly}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="공급업체 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["supplier_code"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+              )}
+
+              {/* 품목 내역 */}
+              <div className="space-y-2.5">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                    <Package className="w-4 h-4" /> 품목 내역
+                    <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                      {detailRows.length}
+                    </span>
+                  </div>
+                  {!isReadOnly && (
+                    <Button size="sm" onClick={() => {
+                      setItemSelectedMap(new Map());
+                      setItemPage(1);
+                      setItemPageInput("1");
+                      setItemSearchKeyword("");
+                      setItemSelectOpen(true);
+                      searchItems(1);
+                    }}>
+                      <Plus className="w-4 h-4 mr-1" /> 품목 추가
+                    </Button>
+                  )}
+                </div>
+                {detailRows.length === 0 ? (
+                  <div className="flex flex-col items-center gap-2 py-8 border border-dashed border-border rounded-lg text-muted-foreground">
+                    <Package className="w-8 h-8 opacity-40" />
+                    <span className="text-sm">아직 추가된 품목이 없어요. 위 버튼으로 품목을 추가해주세요.</span>
+                  </div>
+                ) : (
+                  <div className="border rounded-lg overflow-x-auto">
+                    <Table className="table-fixed">
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          {!isReadOnly && <TableHead className="w-[40px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground"></TableHead>}
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                          {masterForm.input_mode === "itemFirst" && (
+                            <TableHead className="w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체</TableHead>
+                          )}
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">잔량</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
+                          <TableHead className="w-[160px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {detailRows.map((row, idx) => (
+                          <TableRow key={row._id || idx}>
+                            {!isReadOnly && (
+                              <TableCell>
+                                <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-muted-foreground/50 hover:text-destructive hover:bg-destructive/5" onClick={() => removeDetailRow(idx)}>
+                                  <X className="w-3.5 h-3.5" />
+                                </Button>
+                              </TableCell>
+                            )}
+                            <TableCell className="text-[13px] font-mono max-w-[120px]"><span className="block truncate" title={row.item_code}>{row.item_code}</span></TableCell>
+                            <TableCell className="text-[13px] max-w-[120px]"><span className="block truncate" title={row.item_name}>{row.item_name}</span></TableCell>
+                            {masterForm.input_mode === "itemFirst" && (
+                              <TableCell>
+                                {isReadOnly ? (
+                                  <span className="text-xs">{(categoryOptions["supplier_code"] || []).find(o => o.code === row.supplier_code)?.label || row.supplier_code || "-"}</span>
+                                ) : (
+                                  <Select value={row.supplier_code || ""} onValueChange={(v) => {
+                                    const supp = categoryOptions["supplier_code"]?.find(o => o.code === v);
+                                    const name = supp?.label.replace(` (${v})`, "") || "";
+                                    updateDetailRow(idx, "supplier_code", v);
+                                    updateDetailRow(idx, "supplier_name", name);
+                                  }}>
+                                    <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="공급업체" /></SelectTrigger>
+                                    <SelectContent>
+                                      {(categoryOptions["supplier_code"] || []).map(o => (
+                                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                )}
+                              </TableCell>
+                            )}
+                            <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                            <TableCell className="text-[13px]">{row.unit}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs text-right font-mono block">{row.order_qty ? Number(row.order_qty).toLocaleString() : ""}</span>
+                              ) : (
+                                <Input value={formatNumber(row.order_qty || "")} onChange={(e) => updateDetailRow(idx, "order_qty", parseNumber(e.target.value))} className="h-8 text-xs text-right font-mono" />
+                              )}
+                            </TableCell>
+                            <TableCell className="text-[13px] text-right font-mono text-muted-foreground">{row.received_qty ? Number(row.received_qty).toLocaleString() : "0"}</TableCell>
+                            <TableCell className="text-[13px] text-right font-mono">{row.remain_qty ? Number(row.remain_qty).toLocaleString() : "0"}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs text-right font-mono block">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</span>
+                              ) : (
+                                <Input value={formatNumber(row.unit_price || "")} onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))} className="h-8 text-xs text-right font-mono" />
+                              )}
+                            </TableCell>
+                            <TableCell className="text-[13px] text-right font-mono font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs">{row.due_date}</span>
+                              ) : (
+                                <Input type="date" value={row.due_date || ""} onChange={(e) => updateDetailRow(idx, "due_date", e.target.value)} className="h-8 text-xs" />
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs">{row.memo}</span>
+                              ) : (
+                                <Input value={row.memo || ""} onChange={(e) => updateDetailRow(idx, "memo", e.target.value)} className="h-8 text-xs" />
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                )}
+              </div>
+
+              {/* 비고 */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  비고
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <Input
+                  value={masterForm.memo || ""}
+                  onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
+                  placeholder="특이사항이나 메모를 입력해주세요"
+                  className="h-9"
+                  disabled={isReadOnly}
+                />
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter className="border-t pt-3 mt-2">
+            {isReadOnly ? (
+              <Button variant="outline" onClick={() => setIsModalOpen(false)}>닫기</Button>
+            ) : (
+              <>
+                <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+                <Button onClick={handleSave} disabled={saving}>
+                  {saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />} 저장
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+
+          {/* 품목 선택 모달 (중첩) */}
+          <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+            <DialogContent className="max-w-3xl" style={{ maxHeight: "70vh", display: "flex", flexDirection: "column" }} onInteractOutside={(e) => e.preventDefault()}>
+              <DialogHeader>
+                <DialogTitle>품목 선택</DialogTitle>
+                <DialogDescription>발주에 추가할 품목을 선택 후 하단 버튼을 눌러주세요.</DialogDescription>
+              </DialogHeader>
+              <div className="flex gap-2">
+                <Input
+                  placeholder="품명/품목코드 검색"
+                  value={itemSearchKeyword}
+                  onChange={(e) => setItemSearchKeyword(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && triggerNewSearch()}
+                  className="h-9 flex-1"
+                />
+                <Select value={itemSearchDivision} onValueChange={setItemSearchDivision}>
+                  <SelectTrigger className="h-9 w-[130px]"><SelectValue placeholder="관리품목" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">전체</SelectItem>
+                    {(categoryOptions["item_division"] || []).map((o) => (
+                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button size="sm" onClick={triggerNewSearch} disabled={itemSearchLoading} className="h-9">
+                  {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" />조회</>}
+                </Button>
+              </div>
+              <div className="flex-1 overflow-auto border rounded-lg">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[40px] text-center">
+                        <input type="checkbox"
+                          checked={itemSearchResults.length > 0 && itemSearchResults.every((i) => itemSelectedMap.has(i.id))}
+                          onChange={(e) => {
+                            setItemSelectedMap((prev) => {
+                              const next = new Map(prev);
+                              if (e.target.checked) itemSearchResults.forEach((i) => next.set(i.id, i));
+                              else itemSearchResults.forEach((i) => next.delete(i.id));
+                              return next;
+                            });
+                          }} />
+                      </TableHead>
+                      <TableHead className="w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                      <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {itemSearchResults.length === 0 ? (
+                      <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없어요</TableCell></TableRow>
+                    ) : itemSearchResults.map((item) => (
+                      <TableRow key={item.id} className={cn("cursor-pointer", itemSelectedMap.has(item.id) && "bg-primary/5")}
+                        onClick={() => setItemSelectedMap((prev) => {
+                          const next = new Map(prev);
+                          if (next.has(item.id)) next.delete(item.id); else next.set(item.id, item);
+                          return next;
+                        })}>
+                        <TableCell className="text-center">
+                          <input type="checkbox" checked={itemSelectedMap.has(item.id)} readOnly />
+                        </TableCell>
+                        <TableCell className="text-[13px] max-w-[130px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
+                        <TableCell className="text-sm max-w-[150px]"><span className="block truncate" title={item.item_name}>{item.item_name}</span></TableCell>
+                        <TableCell className="text-[13px]">{item.size}</TableCell>
+                        <TableCell className="text-[13px]">{categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}</TableCell>
+                        <TableCell className="text-[13px]">{categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <div className="flex items-center justify-between border-t pt-2">
+                <div className="flex items-center gap-1">
+                  <span className="text-xs text-muted-foreground">표시:</span>
+                  <input type="number" min={1} max={200} value={itemPageSize}
+                    onChange={(e) => {
+                      const v = Math.min(200, Math.max(1, Number(e.target.value) || 20));
+                      setItemPageSize(v);
+                      setItemPage(1);
+                      setItemPageInput("1");
+                      searchItems(1, v);
+                    }}
+                    className="h-7 w-14 rounded-md border px-1 text-center text-xs" />
+                </div>
+                <div className="flex items-center gap-1">
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(1)} disabled={itemPage === 1 || itemSearchLoading}>
+                    <ChevronsLeft className="h-3 w-3" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemPage - 1)} disabled={itemPage === 1 || itemSearchLoading}>
+                    <ChevronLeft className="h-3 w-3" />
+                  </Button>
+                  <input type="text" inputMode="numeric" value={itemPageInput}
+                    onChange={(e) => setItemPageInput(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === "Enter") { commitItemPageInput(); (e.target as HTMLInputElement).blur(); } }}
+                    onBlur={commitItemPageInput}
+                    onFocus={(e) => e.target.select()}
+                    className="h-7 w-10 rounded-md border px-1 text-center text-xs" />
+                  <span className="text-xs text-muted-foreground">/ {itemTotalPages || 1}</span>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemPage + 1)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
+                    <ChevronRight className="h-3 w-3" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemTotalPages)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
+                    <ChevronsRight className="h-3 w-3" />
+                  </Button>
+                </div>
+                <span className="text-xs text-muted-foreground">총 {itemTotal}건</span>
+              </div>
+              <DialogFooter>
+                <div className="flex items-center gap-2 w-full justify-between">
+                  <span className="text-sm text-muted-foreground">{itemSelectedMap.size}개 선택됨</span>
+                  <div className="flex gap-2">
+                    <Button variant="outline" onClick={() => { setItemSelectedMap(new Map()); setItemSelectOpen(false); }}>취소</Button>
+                    <Button onClick={addSelectedItemsToDetail} disabled={itemSelectedMap.size === 0}>
+                      <Plus className="w-4 h-4 mr-1" /> {itemSelectedMap.size}개 추가
+                    </Button>
+                  </div>
+                </div>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={DETAIL_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchOrders()}
+      />
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/purchase/purchase-item/page.tsx b/frontend/app/(main)/COMPANY_10/purchase/purchase-item/page.tsx
new file mode 100644
index 00000000..7f211a88
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/purchase/purchase-item/page.tsx
@@ -0,0 +1,1244 @@
+"use client";
+
+/**
+ * 구매품목관리 — Type B 마스터-디테일 리디자인
+ *
+ * 좌측: 구매품목 목록 (item_info, 구매 관련 필터)
+ * 우측: 선택한 품목의 공급업체 정보 (supplier_item_mapping → supplier_mng 조인)
+ *
+ * 공급업체관리와 양방향 연동 (같은 supplier_item_mapping 테이블)
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Search, X, Settings2, Package } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const ITEM_TABLE = "item_info";
+const MAPPING_TABLE = "supplier_item_mapping";
+const SUPPLIER_TABLE = "supplier_mng";
+
+// 숫자 포맷 헬퍼
+const formatNum = (val: any): string => {
+  if (val === null || val === undefined || val === "") return "";
+  const n = Number(val);
+  return isNaN(n) ? String(val) : n.toLocaleString();
+};
+
+const ITEM_GRID_COLUMNS = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "standard_price", label: "구매단가" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
+];
+
+export default function PurchaseItemPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-purchase-item", ITEM_TABLE, ITEM_GRID_COLUMNS);
+
+  // 좌측: 품목
+  const [items, setItems] = useState<any[]>([]);
+  const [itemLoading, setItemLoading] = useState(false);
+  const [itemCount, setItemCount] = useState(0);
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 공급업체
+  const [supplierItems, setSupplierItems] = useState<any[]>([]);
+  const [supplierLoading, setSupplierLoading] = useState(false);
+  const [supplierCheckedIds, setSupplierCheckedIds] = useState<string[]>([]);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string; isDefault?: boolean }[]>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 공급업체 추가 모달
+  const [suppSelectOpen, setSuppSelectOpen] = useState(false);
+  const [suppSearchKeyword, setSuppSearchKeyword] = useState("");
+  const [suppSearchResults, setSuppSearchResults] = useState<any[]>([]);
+  const [suppSearchLoading, setSuppSearchLoading] = useState(false);
+  const [suppCheckedIds, setSuppCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 수정 모달
+  const [editItemOpen, setEditItemOpen] = useState(false);
+  const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+
+  // 공급업체 상세 입력 모달 (공급업체 품번/품명 + 단가)
+  const [suppDetailOpen, setSuppDetailOpen] = useState(false);
+  const [selectedSuppsForDetail, setSelectedSuppsForDetail] = useState<any[]>([]);
+  const [suppMappings, setSuppMappings] = useState<Record<string, Array<{ _id: string; supplier_item_code: string; supplier_item_name: string }>>>({});
+  const [suppPrices, setSuppPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [editSuppData, setEditSuppData] = useState<any>(null);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string; isDefault?: boolean }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string; isDefault?: boolean }[] => {
+        const result: { code: string; label: string; isDefault?: boolean }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel, isDefault: v.isDefault });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      // 단가 카테고리
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/supplier_item_prices/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 좌측: 품목 조회
+  const fetchItems = useCallback(async () => {
+    setItemLoading(true);
+    try {
+      const filters: { columnName: string; operator: string; value: any }[] = [];
+
+      // 구매품목/영업관리 division 필터 (다중값 컬럼이므로 contains로 매칭)
+      filters.push({ columnName: "division", operator: "contains", value: "s" });
+
+      // DynamicSearchFilter에서 전달된 필터 추가
+      for (const f of searchFilters) {
+        filters.push({ columnName: f.columnName, operator: f.operator, value: f.value });
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const CATS = ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+      setItemCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setItemLoading(false);
+    }
+  }, [searchFilters, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => { fetchItems(); }, [fetchItems]);
+
+  // 선택된 품목
+  const selectedItem = items.find((i) => i.id === selectedItemId);
+
+  // 우측: 공급업체 목록 조회
+  useEffect(() => {
+    if (!selectedItem?.item_number) { setSupplierItems([]); setSupplierCheckedIds([]); return; }
+    setSupplierCheckedIds([]);
+    const itemKey = selectedItem.item_number;
+    const fetchSupplierItems = async () => {
+      setSupplierLoading(true);
+      try {
+        // 1. supplier_item_mapping에서 해당 품목의 매핑 조회
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
+          autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        // 2. supplier_id → supplier_mng 조인 (공급업체명)
+        const custIds = [...new Set(mappings.map((m: any) => m.supplier_id).filter(Boolean))];
+        let custMap: Record<string, any> = {};
+        if (custIds.length > 0) {
+          try {
+            const custRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+              page: 1, size: custIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "in", value: custIds }] },
+              autoFilter: true,
+            });
+            for (const c of (custRes.data?.data?.data || custRes.data?.data?.rows || [])) {
+              custMap[c.supplier_code] = c;
+            }
+          } catch { /* skip */ }
+        }
+
+        // 3. supplier_item_prices 조회 (단가 정보)
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        // 4. 공급업체별 중복 제거 + 오늘 날짜 기준 단가 매칭
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o: any) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+        const seenCustIds = new Set<string>();
+        const sortedMappings = [...mappings].sort((a: any, b: any) => (a.supplier_id || "").localeCompare(b.supplier_id || ""));
+
+        setSupplierItems(sortedMappings.map((m: any) => {
+          const custKey = m.supplier_id || "";
+          const isFirstOfGroup = !seenCustIds.has(custKey);
+          if (custKey) seenCustIds.add(custKey);
+
+          const custPriceList = allPrices.filter((p: any) => p.supplier_id === custKey);
+          const todayPrice = custPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || custPriceList[0] || {};
+
+          return {
+            ...m,
+            supplier_code: isFirstOfGroup ? custKey : "",
+            supplier_name: isFirstOfGroup ? (custMap[custKey]?.supplier_name || "") : "",
+            supplier_item_code: m.supplier_item_code || "",
+            supplier_item_name: m.supplier_item_name || "",
+            base_price: todayPrice.base_price || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+        }));
+      } catch (err) {
+        console.error("공급업체 조회 실패:", err);
+      } finally {
+        setSupplierLoading(false);
+      }
+    };
+    fetchSupplierItems();
+  }, [selectedItem?.item_number, priceCategoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 공급업체 검색
+  const searchSuppliers = async () => {
+    setSuppSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (suppSearchKeyword) filters.push({ columnName: "supplier_name", operator: "contains", value: suppSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const all = res.data?.data?.data || res.data?.data?.rows || [];
+      // 이미 등록된 공급업체 제외
+      const existing = new Set(supplierItems.map((c: any) => c.supplier_id || c.supplier_code));
+      setSuppSearchResults(all.filter((c: any) => !existing.has(c.supplier_code)));
+    } catch { /* skip */ } finally { setSuppSearchLoading(false); }
+  };
+
+  // 공급업체 선택 → 상세 모달로 이동
+  const goToSuppDetail = () => {
+    const selected = suppSearchResults.filter((c) => suppCheckedIds.has(c.id));
+    if (selected.length === 0) { toast.error("공급업체를 선택해주세요."); return; }
+    setSelectedSuppsForDetail(selected);
+    const mappings: typeof suppMappings = {};
+    const prices: typeof suppPrices = {};
+    for (const cust of selected) {
+      const key = cust.supplier_code || cust.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: selectedItem?.standard_price || selectedItem?.standard_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: selectedItem?.standard_price || selectedItem?.standard_price || "",
+      }];
+    }
+    setSuppMappings(mappings);
+    setSuppPrices(prices);
+    setSuppSelectOpen(false);
+    setSuppDetailOpen(true);
+  };
+
+  const addMappingRow = (custKey: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, supplier_item_code: "", supplier_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (custKey: string, rowId: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updateMappingRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  const addPriceRow = (custKey: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (custKey: string, rowId: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1;
+          if (roundLabel === "반올림") calc = Math.round(calc / unit) * unit;
+          else if (roundLabel === "절삭") calc = Math.floor(calc / unit) * unit;
+          else if (roundLabel === "올림") calc = Math.ceil(calc / unit) * unit;
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  const openEditSupp = async (row: any) => {
+    const custKey = row.supplier_code || row.supplier_id;
+
+    // supplier_mng에서 공급업체 정보 조회
+    let custInfo: any = { supplier_code: custKey, supplier_name: row.supplier_name || "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/supplier_mng/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: custKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) custInfo = found;
+    } catch { /* skip */ }
+
+    const mappingRows = [{
+      _id: `m_existing_${row.id}`,
+      supplier_item_code: row.supplier_item_code || "",
+      supplier_item_name: row.supplier_item_name || "",
+    }].filter((m) => m.supplier_item_code || m.supplier_item_name);
+
+    const priceRows = [{
+      _id: `p_existing_${row.id}`,
+      start_date: row.start_date || "",
+      end_date: row.end_date || "",
+      currency_code: row.currency_code || "CAT_MLAMDKVN_PZJI",
+      base_price_type: row.base_price_type || "CAT_MLAMFGFT_4RZW",
+      base_price: row.base_price ? String(row.base_price) : "",
+      discount_type: row.discount_type || "",
+      discount_value: row.discount_value ? String(row.discount_value) : "",
+      rounding_type: row.rounding_type || "",
+      rounding_unit_value: row.rounding_unit_value || "",
+      calculated_price: row.calculated_price ? String(row.calculated_price) : "",
+    }].filter((p) => p.base_price || p.start_date);
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedSuppsForDetail([custInfo]);
+    setSuppMappings({ [custKey]: mappingRows });
+    setSuppPrices({ [custKey]: priceRows });
+    setEditSuppData(row);
+    setSuppDetailOpen(true);
+  };
+
+  const handleSuppDetailSave = async () => {
+    if (!selectedItem) return;
+    const isEditingExisting = !!editSuppData;
+    setSaving(true);
+    try {
+      for (const cust of selectedSuppsForDetail) {
+        const custKey = cust.supplier_code || cust.id;
+        const mappingRows = suppMappings[custKey] || [];
+
+        if (isEditingExisting && editSuppData?.id) {
+          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+            originalData: { id: editSuppData.id },
+            updatedData: {
+              supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+              supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+            },
+          });
+
+          // 기존 prices 삭제 후 재등록
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "mapping_id", operator: "equals", value: editSuppData.id },
+              ]}, autoFilter: true,
+            });
+            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+            if (existing.length > 0) {
+              await apiClient.delete(`/table-management/tables/supplier_item_prices/delete`, {
+                data: existing.map((p: any) => ({ id: p.id })),
+              });
+            }
+          } catch { /* skip */ }
+
+          const priceRows = (suppPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/supplier_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: editSuppData.id,
+              supplier_id: custKey,
+              item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        } else {
+          // 신규 등록
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            supplier_id: custKey, item_id: selectedItem.item_number,
+            supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+            supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+          });
+          const mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              supplier_id: custKey, item_id: selectedItem.item_number,
+              supplier_item_code: mappingRows[mi].supplier_item_code || "",
+              supplier_item_name: mappingRows[mi].supplier_item_name || "",
+            });
+          }
+
+          const priceRows = (suppPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/supplier_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", supplier_id: custKey, item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedSuppsForDetail.length}개 공급업체가 추가되었습니다.`);
+      setSuppDetailOpen(false);
+      setEditSuppData(null);
+      setSuppCheckedIds(new Set());
+      // 우측 새로고침
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 수정
+  const openEditItem = () => {
+    if (!selectedItem) return;
+    setEditItemForm({ ...selectedItem });
+    setEditItemOpen(true);
+  };
+
+  const handleEditSave = async () => {
+    if (!editItemForm.id) return;
+    setSaving(true);
+    try {
+      await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
+        originalData: { id: editItemForm.id },
+        updatedData: {
+          standard_price: editItemForm.standard_price || null,
+          currency_code: editItemForm.currency_code || null,
+        },
+      });
+      toast.success("수정되었습니다.");
+      setEditItemOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "수정에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 우측: 공급업체 매핑 삭제
+  const handleSupplierMappingDelete = async () => {
+    if (supplierCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${supplierCheckedIds.length}개 공급업체 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      // 관련 단가 삭제
+      for (const mappingId of supplierCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/supplier_item_prices/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      // 매핑 삭제
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: supplierCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${supplierCheckedIds.length}개 공급업체 매핑이 삭제되었습니다.`);
+      setSupplierCheckedIds([]);
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) return;
+    const data = items.map((i) => ({
+      품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
+      기준단가: i.standard_price, 구매단가: i.standard_price, 통화: i.currency_code, 상태: i.status,
+    }));
+    await exportToExcel(data, "구매품목관리.xlsx", "구매품목");
+    toast.success("다운로드 완료");
+  };
+
+  // EDataTable 컬럼 정의 (구매품목) — ts.visibleColumns 기반
+  const COLUMN_RENDER_MAP: Record<string, Partial<EDataTableColumn>> = {
+    item_number: { width: "w-[110px]" },
+    item_name: { minWidth: "min-w-[130px]" },
+    size: { width: "w-[80px]" },
+    unit: { width: "w-[60px]" },
+    standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
+    currency_code: { width: "w-[50px]" },
+    status: { width: "w-[60px]" },
+  };
+  const itemColumns: EDataTableColumn[] = ts.visibleColumns.map((col): EDataTableColumn => ({
+    key: col.key,
+    label: col.label,
+    ...COLUMN_RENDER_MAP[col.key],
+  }));
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ITEM_TABLE}
+        filterId="c16-purchase-item"
+        onFilterChange={setSearchFilters}
+        dataCount={items.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" />
+            엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 구매품목 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">구매품목 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {itemCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={itemColumns}
+                data={ts.groupData(items)}
+                rowKey={(row) => row.id}
+                loading={itemLoading}
+                emptyMessage="등록된 구매품목이 없어요"
+                selectedId={selectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
+                onRowDoubleClick={() => openEditItem()}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-purchase-item"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedItemId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Package className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">품목을 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 품목을 선택하면 공급업체 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 공급업체별 단가 헤더 */}
+                  <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 px-4">
+                    <div className="flex items-center gap-2.5">
+                      <Package className="w-3.5 h-3.5 text-muted-foreground" />
+                      <span className="text-[13px] font-bold">공급업체별 단가</span>
+                      <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">
+                        {supplierItems.length}
+                      </Badge>
+                    </div>
+                    <div className="flex gap-1.5">
+                      <Button
+                        size="sm"
+                        onClick={() => { setSuppCheckedIds(new Set()); setSuppSelectOpen(true); searchSuppliers(); }}
+                      >
+                        <Plus className="w-3.5 h-3.5" /> 공급업체 추가
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={supplierCheckedIds.length === 0}
+                        onClick={handleSupplierMappingDelete}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" /> 삭제
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 공급업체 테이블 */}
+                  <div className="flex-1 min-h-0 overflow-auto pt-px">
+                    {supplierLoading ? (
+                      <div className="flex items-center justify-center h-full">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : supplierItems.length === 0 ? (
+                      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+                        등록된 공급업체가 없어요
+                      </div>
+                    ) : (
+                      <Table noWrapper>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted h-10">
+                            <TableHead className="w-[40px] text-center px-2">
+                              <input
+                                type="checkbox"
+                                className="rounded"
+                                checked={supplierItems.length > 0 && supplierCheckedIds.length === supplierItems.length}
+                                onChange={(e) => {
+                                  if (e.target.checked) setSupplierCheckedIds(supplierItems.map((c) => c.id));
+                                  else setSupplierCheckedIds([]);
+                                }}
+                              />
+                            </TableHead>
+                            <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체코드</TableHead>
+                            <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품번</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품명</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {supplierItems.map((row) => (
+                            <TableRow
+                              key={row.id}
+                              className={cn(
+                                "cursor-pointer h-[41px]",
+                                supplierCheckedIds.includes(row.id) ? "bg-primary/5 border-l-[3px] border-l-primary" : "border-l-[3px] border-l-transparent"
+                              )}
+                              onDoubleClick={() => openEditSupp(row)}
+                            >
+                              <TableCell
+                                className="text-center px-2"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setSupplierCheckedIds((prev) =>
+                                    prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                  );
+                                }}
+                              >
+                                <input type="checkbox" className="rounded" checked={supplierCheckedIds.includes(row.id)} readOnly />
+                              </TableCell>
+                              <TableCell className="text-[13px] font-mono text-muted-foreground">{row.supplier_code}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_name}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_item_code}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right">
+                                {row.base_price ? Number(row.base_price).toLocaleString() : ""}
+                              </TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold">
+                                {row.calculated_price ? Number(row.calculated_price).toLocaleString() : ""}
+                              </TableCell>
+                              <TableCell className="text-[13px]">{row.currency_code}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 품목 수정 모달 ── */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>구매품목 수정</DialogTitle>
+            <DialogDescription>
+              {editItemForm.item_number || ""} — {editItemForm.item_name || ""}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {/* 품목 기본정보 (읽기 전용) */}
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-sm">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+
+            <div className="col-span-2 border-t my-1" />
+
+            {/* 구매 설정 (수정 가능) */}
+            <div className="space-y-1.5">
+              <Label className="text-sm">구매단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="구매단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">기준단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">통화</Label>
+              <Select
+                value={editItemForm.currency_code || ""}
+                onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="통화를 선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 공급업체 검색 및 추가 모달 ── */}
+      <Dialog open={suppSelectOpen} onOpenChange={setSuppSelectOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>공급업체 검색 및 추가</DialogTitle>
+            <DialogDescription>품목에 추가할 공급업체를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 py-2">
+            {/* 검색바 */}
+            <div className="flex gap-2">
+              <Input
+                placeholder="공급업체명으로 검색해주세요"
+                value={suppSearchKeyword}
+                onChange={(e) => setSuppSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchSuppliers()}
+                className="h-9 flex-1"
+              />
+              <Button size="sm" onClick={searchSuppliers} disabled={suppSearchLoading} className="h-9">
+                {suppSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
+              </Button>
+            </div>
+            {/* 검색 결과 테이블 */}
+            <div className="overflow-auto max-h-[350px] border rounded-lg">
+              <Table noWrapper>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="sticky top-0 bg-card w-[40px] text-center">
+                      <Checkbox
+                        checked={suppSearchResults.length > 0 && suppCheckedIds.size === suppSearchResults.length}
+                        onCheckedChange={(checked) => {
+                          if (checked === true) setSuppCheckedIds(new Set(suppSearchResults.map((c) => c.id)));
+                          else setSuppCheckedIds(new Set());
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[110px]">공급업체코드</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[130px]">공급업체명</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">거래유형</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">담당자</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {suppSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : suppSearchResults.map((c) => (
+                    <TableRow
+                      key={c.id}
+                      className={cn("cursor-pointer", suppCheckedIds.has(c.id) && "bg-primary/[0.08]")}
+                      onClick={() => setSuppCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <Checkbox
+                          checked={suppCheckedIds.has(c.id)}
+                          onCheckedChange={(checked) => {
+                            setSuppCheckedIds((prev) => {
+                              const next = new Set(prev);
+                              if (checked === true) next.add(c.id); else next.delete(c.id);
+                              return next;
+                            });
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell className="text-[13px] font-mono text-muted-foreground">{c.supplier_code}</TableCell>
+                      <TableCell className="text-sm font-medium text-foreground">{c.supplier_name}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.division}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.contact_person}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{suppCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setSuppSelectOpen(false)}>취소</Button>
+                <Button onClick={goToSuppDetail} disabled={suppCheckedIds.size === 0}>
+                  <Plus className="w-4 h-4" />
+                  {suppCheckedIds.size}개 다음
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 공급업체 상세 입력/수정 모달 ── */}
+      <Dialog open={suppDetailOpen} onOpenChange={setSuppDetailOpen}>
+        <DialogContent className="max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              공급업체 상세정보 {editSuppData ? "수정" : "입력"} — {selectedItem?.item_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editSuppData ? "공급업체 품번/품명과 기간별 단가를 수정해주세요." : "선택한 공급업체의 품번/품명과 기간별 단가를 설정해주세요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-6 py-2">
+            {selectedSuppsForDetail.map((cust, idx) => {
+              const custKey = cust.supplier_code || cust.id;
+              const mappingRows = suppMappings[custKey] || [];
+              const prices = suppPrices[custKey] || [];
+
+              return (
+                <div key={custKey} className="border rounded-lg overflow-hidden">
+                  {/* 공급업체 헤더 */}
+                  <div className="flex items-center gap-2.5 px-4 py-3 bg-muted border-b">
+                    <span className="text-[13px] font-bold text-foreground">{idx + 1}. {cust.supplier_name || custKey}</span>
+                    <span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">
+                      {custKey}
+                    </span>
+                  </div>
+
+                  <div className="flex gap-4 p-4 bg-card">
+                    {/* 좌: 공급업체 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/50">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">공급업체 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 공급업체 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.supplier_item_code}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "supplier_item_code", e.target.value)}
+                              placeholder="공급업체 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.supplier_item_name}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "supplier_item_name", e.target.value)}
+                              placeholder="공급업체 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button
+                              variant="ghost" size="sm"
+                              className="h-7 w-7 p-0 text-destructive shrink-0"
+                              onClick={() => removeMappingRow(custKey, mRow._id)}
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/30">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button
+                                  variant="ghost" size="sm"
+                                  className="h-6 w-6 p-0 text-destructive"
+                                  onClick={() => removePriceRow(custKey, price._id)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="통화" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "base_price", raw);
+                                }}
+                                className="h-8 text-xs text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-8 text-xs text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm text-foreground">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setSuppDetailOpen(false);
+                if (!editSuppData) setSuppSelectOpen(true);
+                setEditSuppData(null);
+              }}
+            >
+              {editSuppData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleSuppDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={ITEM_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchItems()}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/purchase/supplier/page.tsx b/frontend/app/(main)/COMPANY_10/purchase/supplier/page.tsx
new file mode 100644
index 00000000..521f770e
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/purchase/supplier/page.tsx
@@ -0,0 +1,2759 @@
+"use client";
+
+/**
+ * 공급업체관리 — Type B 마스터-디테일 레이아웃 (리디자인)
+ *
+ * 좌측: 공급업체 목록 (supplier_mng)
+ * 우측: 품목별 단가 + 납품처 정보 탭
+ *
+ * 모달:
+ * - 공급업체 등록/수정 (supplier_mng)
+ * - 품목 추가 (item_info 검색 → supplier_item_mapping + supplier_item_prices)
+ * - 납품처 등록 (delivery_destination)
+ */
+
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Users, Package, MapPin, Search, X, Tag, Coins, Settings2, GripVertical,
+  ChevronRight, ChevronDown,
+} from "lucide-react";
+import {
+  DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { validateField, validateForm, formatField } from "@/lib/utils/validation";
+import { getAvailableNumberingRulesForScreen, previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const SUPPLIER_TABLE = "supplier_mng";
+const MAPPING_TABLE = "supplier_item_mapping";
+const PRICE_TABLE = "supplier_item_prices";
+const DELIVERY_TABLE = "delivery_destination";
+const CONTACT_TABLE = "supplier_contact";
+
+const SUPPLIER_GRID_COLUMNS = [
+  { key: "supplier_code", label: "공급업체코드" },
+  { key: "supplier_name", label: "공급업체명" },
+  { key: "division", label: "공급업체유형" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "전화번호" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "status", label: "상태" },
+];
+
+function SortableMappingRow({ id, children }: { id: string; children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform), transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+  return (
+    <div ref={setNodeRef} style={style} className="flex gap-2 items-center">
+      <div {...attributes} {...listeners} className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0">
+        <GripVertical className="h-3.5 w-3.5" />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default function SupplierManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-supplier", SUPPLIER_TABLE, SUPPLIER_GRID_COLUMNS);
+  const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 공급업체 목록
+  const [suppliers, setSuppliers] = useState<any[]>([]);
+  const [rawSuppliers, setRawSuppliers] = useState<any[]>([]);
+  const [supplierLoading, setSupplierLoading] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
+  const [mainContactMap, setMainContactMap] = useState<Record<string, any>>({});
+  const [supplierCount, setSupplierCount] = useState(0);
+  const [selectedSupplierId, setSelectedSupplierId] = useState<string | null>(null);
+
+  // 우측: 탭
+  const [rightTab, setRightTab] = useState<"items" | "delivery">("items");
+  // 우측: 품목 단가
+  const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceGroups, setPriceGroups] = useState<Record<string, { master: any; details: any[] }>>({});
+  const [priceLoading, setPriceLoading] = useState(false);
+  const [priceCheckedIds, setPriceCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [collapsedPriceCards, setCollapsedPriceCards] = useState<Set<string>>(new Set());
+  // 우측: 납품처
+  const [deliveryItems, setDeliveryItems] = useState<any[]>([]);
+  const [deliveryLoading, setDeliveryLoading] = useState(false);
+
+  // 품목 편집 데이터 (더블클릭 시 상세 입력 모달 재활용)
+  const [editItemData, setEditItemData] = useState<any>(null);
+  const savingRef = useRef(false);
+
+  // 거래처 모달
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [supplierEditMode, setSupplierEditMode] = useState(false);
+  const [supplierForm, setSupplierForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 품목 추가 모달 (1단계: 검색/선택)
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemTotalCount, setItemTotalCount] = useState(0);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 상세 입력 모달 (2단계: 거래처 품번/품명 + 단가)
+  const [itemDetailOpen, setItemDetailOpen] = useState(false);
+  const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; supplier_item_code: string; supplier_item_name: string }>>>({});
+  const [itemPrices, setItemPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 거래처 모달 탭
+  const [supplierModalTab, setSupplierModalTab] = useState<"basic" | "contacts" | "delivery">("basic");
+  // 담당자 (supplier_contact) - 모달 내
+  const [modalContacts, setModalContacts] = useState<any[]>([]);
+  const [modalContactLoading, setModalContactLoading] = useState(false);
+  const [modalContactForm, setModalContactForm] = useState<Record<string, any>>({});
+  const [modalContactEditId, setModalContactEditId] = useState<string | null>(null);
+  const [modalContactFormOpen, setModalContactFormOpen] = useState(false);
+  const [modalContactSaving, setModalContactSaving] = useState(false);
+  // 납품처 (delivery_destination) - 모달 내
+  const [modalDeliveries, setModalDeliveries] = useState<any[]>([]);
+  const [modalDeliveryLoading, setModalDeliveryLoading] = useState(false);
+  const [modalDeliveryForm, setModalDeliveryForm] = useState<Record<string, any>>({});
+  const [modalDeliveryEditId, setModalDeliveryEditId] = useState<string | null>(null);
+  const [modalDeliveryFormOpen, setModalDeliveryFormOpen] = useState(false);
+  const [modalDeliverySaving, setModalDeliverySaving] = useState(false);
+  const [modalDeliveryFormErrors, setModalDeliveryFormErrors] = useState<Record<string, string>>({});
+
+  const [continuousInput, setContinuousInput] = useState(false);
+
+  // 세금유형 (기본정보 탭 내)
+  const [taxTypeRows, setTaxTypeRows] = useState<{ _id: string; tax_type_name: string; rate: string }[]>([]);
+  const [taxTypeOptions, setTaxTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [employeeOptions, setEmployeeOptions] = useState<{ user_id: string; user_name: string; position_name?: string }[]>([]);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const flatten = (vals: any[]): { code: string; label: string }[] => {
+      const result: { code: string; label: string }[] = [];
+      for (const v of vals) {
+        result.push({ code: v.valueCode, label: v.valueLabel });
+        if (v.children?.length) result.push(...flatten(v.children));
+      }
+      return result;
+    };
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["division", "status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${SUPPLIER_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${PRICE_TABLE}/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+
+      // 세금유형 카테고리
+      try {
+        const taxRes = await apiClient.get(`/table-categories/supplier_tax_type/tax_type_name/values`);
+        if (taxRes.data?.success) setTaxTypeOptions(flatten(taxRes.data.data || []));
+      } catch { /* skip */ }
+    };
+    load();
+    apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true })
+      .then((res) => {
+        const users = res.data?.data?.data || res.data?.data?.rows || [];
+        setEmployeeOptions(users.map((u: any) => ({
+          user_id: u.user_id, user_name: u.user_name || u.user_id, position_name: u.position_name,
+        })));
+      }).catch(() => {});
+  }, []);
+
+  // 공급업체 목록 조회
+  const fetchSuppliers = useCallback(async () => {
+    setSupplierLoading(true);
+    try {
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
+      const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "supplier_code", order: "desc" },
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setRawSuppliers(raw);
+
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const mainContact = mainContactMap[r.id];
+        return {
+          ...r,
+          division: resolve("division", r.division),
+          status: resolve("status", r.status),
+          contact_person: mainContact?.contact_name || "",
+          contact_phone: mainContact?.contact_phone || "",
+          email: mainContact?.contact_email || "",
+        };
+      });
+      // 공급업체코드 숫자 기준 내림차순 정렬
+      data.sort((a: any, b: any) => {
+        const aNum = parseInt((a.supplier_code || "").replace(/\D/g, ""), 10) || 0;
+        const bNum = parseInt((b.supplier_code || "").replace(/\D/g, ""), 10) || 0;
+        return bNum - aNum;
+      });
+      setSuppliers(data);
+      setSupplierCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("거래처 조회 실패:", err);
+      toast.error("공급업체 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setSupplierLoading(false);
+    }
+  }, [searchFilters, categoryOptions, employeeOptions, mainContactMap]);
+
+  useEffect(() => { fetchSuppliers(); }, [fetchSuppliers]);
+
+  // 메인 담당자 조회 (최초 1번 + 저장 후 갱신)
+  const fetchMainContacts = useCallback(async () => {
+    try {
+      const contactRes = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+        dataFilter: { enabled: true, filters: [{ columnName: "is_main", operator: "equals", value: "Y" }] },
+      });
+      const allContacts = contactRes.data?.data?.data || contactRes.data?.data?.rows || [];
+      const map: Record<string, any> = {};
+      for (const c of allContacts) {
+        if ((c.is_main === "Y" || c.is_main === true) && c.supplier_id) {
+          map[c.supplier_id] = c;
+        }
+      }
+      setMainContactMap(map);
+    } catch { /* skip */ }
+  }, []);
+
+  useEffect(() => { fetchMainContacts(); }, [fetchMainContacts]);
+
+  const selectedSupplier = suppliers.find((c) => c.id === selectedSupplierId);
+
+  // 선택된 공급업체의 품목 단가 조회
+  useEffect(() => {
+    if (!selectedSupplier?.supplier_code) { setPriceItems([]); setPriceCheckedIds([]); return; }
+    setPriceCheckedIds([]);
+    const fetchItems = async () => {
+      setPriceLoading(true);
+      try {
+        const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+          ]},
+          autoFilter: true,
+        });
+        const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+
+        // 품목 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
+        const grouped: Record<string, { master: any; details: any[] }> = {};
+        const flatItems: any[] = [];
+        const seenItemIds = new Set<string>();
+        for (const m of mappings) {
+          const itemKey = m.item_id || "";
+          if (seenItemIds.has(itemKey)) continue; // 품목당 첫 매핑만 마스터
+          seenItemIds.add(itemKey);
+
+          const itemInfo = itemMap[itemKey] || {};
+          const itemPriceList = allPrices
+            .filter((p: any) => p.item_id === itemKey)
+            .sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
+          const todayPrice = itemPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || itemPriceList[0] || {};
+
+          const masterRow = {
+            ...m,
+            item_number: itemKey,
+            item_name: itemInfo.item_name || "",
+            base_price_type: priceResolve("base_price_type", todayPrice.base_price_type || ""),
+            base_price: todayPrice.base_price || "",
+            discount_type: priceResolve("discount_type", todayPrice.discount_type || ""),
+            discount_value: todayPrice.discount_value || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+
+          // 단가 리스트 (라벨 변환)
+          const priceDetails = itemPriceList.map((p: any) => ({
+            ...p,
+            base_price_type_label: priceResolve("base_price_type", p.base_price_type || ""),
+            discount_type_label: priceResolve("discount_type", p.discount_type || ""),
+            currency_label: priceResolve("currency_code", p.currency_code || ""),
+            is_current: (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today),
+          }));
+
+          grouped[itemKey] = { master: masterRow, details: priceDetails };
+          flatItems.push(masterRow);
+        }
+        setPriceGroups(grouped);
+        setPriceItems(flatItems);
+      } catch (err) {
+        console.error("품목 조회 실패:", err);
+      } finally {
+        setPriceLoading(false);
+      }
+    };
+    fetchItems();
+  }, [selectedSupplier?.supplier_code]);
+
+  // 납품처 조회
+  useEffect(() => {
+    if (!selectedSupplier?.supplier_code) { setDeliveryItems([]); return; }
+    const fetchDelivery = async () => {
+      setDeliveryLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_code", operator: "equals", value: selectedSupplier.supplier_code },
+          ]},
+          autoFilter: true,
+        });
+        setDeliveryItems(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setDeliveryItems([]); } finally { setDeliveryLoading(false); }
+    };
+    fetchDelivery();
+  }, [selectedSupplier?.supplier_code]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 모달 내 담당자 목록 조회
+  const fetchModalContacts = useCallback(async (supplierId: string) => {
+    setModalContactLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      setModalContacts(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalContacts([]); } finally { setModalContactLoading(false); }
+  }, []);
+
+  // 모달 내 납품처 목록 조회
+  const fetchModalDeliveries = useCallback(async (supplierCode: string) => {
+    setModalDeliveryLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: supplierCode }] },
+        autoFilter: true,
+      });
+      setModalDeliveries(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalDeliveries([]); } finally { setModalDeliveryLoading(false); }
+  }, []);
+
+  // 담당자 저장 (등록/수정)
+  const handleModalContactSave = async () => {
+    if (!modalContactForm.contact_name) { toast.error("담당자명은 필수입니다."); return; }
+    if (modalContactEditId) {
+      // 수정 — 로컬 리스트에서 교체 + 메인 설정 시 다른 메인 해제
+      const isSettingMain = modalContactForm.is_main === "Y" || modalContactForm.is_main === true;
+      setModalContacts((prev) => prev.map((c) =>
+        (c._localId || c.id) === modalContactEditId
+          ? { ...c, ...modalContactForm }
+          : isSettingMain ? { ...c, is_main: "N" } : c
+      ));
+    } else {
+      // 추가 — 로컬 리스트에 카드 추가
+      setModalContacts((prev) => [...prev, {
+        ...modalContactForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalContactFormOpen(false);
+    setModalContactForm({});
+    setModalContactEditId(null);
+  };
+
+  // 담당자 삭제
+  const handleModalContactDelete = (contactId: string) => {
+    setModalContacts((prev) => prev.filter((c) => (c._localId || c.id) !== contactId));
+  };
+
+  // 납품처 자동채번 유틸
+  const generateDeliveryCode = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DELIVERY_TABLE}/destination_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        const allRes = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "destination_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const match = (row.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        // 로컬에 추가된 것도 포함
+        for (const d of modalDeliveries) {
+          const match = (d.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLen = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          return prefix + String(maxSeq + 1).padStart(seqLen, "0");
+        }
+      }
+    } catch { /* skip */ }
+    return "";
+  };
+
+  // 납품처 저장 (모달 내)
+  const handleModalDeliverySave = async () => {
+    if (!modalDeliveryForm.destination_name) { toast.error("납품처명은 필수입니다."); return; }
+    if (modalDeliveryEditId) {
+      const isSettingMain = modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true;
+      setModalDeliveries((prev) => prev.map((d) =>
+        (d._localId || d.id) === modalDeliveryEditId
+          ? { ...d, ...modalDeliveryForm }
+          : isSettingMain ? { ...d, is_default: "N" } : d
+      ));
+    } else {
+      setModalDeliveries((prev) => [...prev, {
+        ...modalDeliveryForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalDeliveryFormOpen(false);
+    setModalDeliveryForm({});
+    setModalDeliveryEditId(null);
+    setModalDeliveryFormErrors({});
+  };
+
+  const handleModalDeliveryDelete = (deliveryId: string) => {
+    setModalDeliveries((prev) => prev.filter((d) => (d._localId || d.id) !== deliveryId));
+  };
+
+  // 공급업체 등록 모달 열기
+  const openSupplierRegister = async () => {
+    setSupplierForm({});
+    setFormErrors({});
+    setSupplierEditMode(false);
+    setSupplierModalTab("basic");
+    setModalContacts([]);
+    setModalDeliveries([]);
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setTaxTypeRows([]);
+    setSupplierModalOpen(true);
+    // 공급업체 코드 자동 채번 — 기존 데이터 max값 기반
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${SUPPLIER_TABLE}/supplier_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        // 기존 데이터에서 CUST-XXX 패턴의 최대 순번 조회
+        const allRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "supplier_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const code = row.supplier_code || "";
+          const match = code.match(/(\d+)$/);
+          if (match) {
+            const seq = parseInt(match[1], 10);
+            if (seq > maxSeq) maxSeq = seq;
+          }
+        }
+        // preview로 접두어 패턴 가져오기
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLength = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          const nextSeq = maxSeq + 1;
+          const nextCode = prefix + String(nextSeq).padStart(seqLength, "0");
+          setSupplierForm((prev) => ({ ...prev, supplier_code: nextCode, _numberingRuleId: ruleId }));
+        }
+      }
+    } catch { /* skip */ }
+  };
+
+  const openSupplierEdit = () => {
+    if (!selectedSupplier) return;
+    const rawData = rawSuppliers.find((c) => c.id === selectedSupplierId);
+    setSupplierForm({ ...(rawData || selectedSupplier) });
+    setFormErrors({});
+    setSupplierEditMode(true);
+    setSupplierModalTab("basic");
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setModalContactForm({});
+    setModalDeliveryForm({});
+    setModalContactEditId(null);
+    setModalDeliveryEditId(null);
+    // 수정 모드에서는 바로 조회
+    const code = (rawData || selectedSupplier).supplier_code;
+    const id = (rawData || selectedSupplier).id;
+    if (id) {
+      fetchModalContacts(id);
+      // 세금유형 로드
+      apiClient.post(`/table-management/tables/supplier_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: id }] },
+        autoFilter: true,
+      }).then((res: any) => {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        setTaxTypeRows(rows.map((r: any) => ({ _id: r.id, tax_type_name: r.tax_type_name || "", rate: String(r.rate || "") })));
+      }).catch(() => setTaxTypeRows([]));
+    }
+    if (code) fetchModalDeliveries(code);
+    setSupplierModalOpen(true);
+  };
+
+  // 폼 필드 변경 시 자동 포맷팅 + 실시간 검증
+  const handleFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setSupplierForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => {
+      const next = { ...prev };
+      if (error) next[field] = error; else delete next[field];
+      return next;
+    });
+  };
+
+  // 세금유형/담당자/납품처를 한번에 저장하는 헬퍼
+  const saveSubTables = async (supplierId: string, supplierCode: string) => {
+    // 세금유형 — 기존 삭제 후 재생성
+    try {
+      const existTax = await apiClient.post(`/table-management/tables/supplier_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      const existRows = existTax.data?.data?.data || existTax.data?.data?.rows || [];
+      if (existRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/supplier_tax_type/delete`, {
+          data: existRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+      for (const t of taxTypeRows.filter((r) => r.tax_type_name)) {
+        await apiClient.post(`/table-management/tables/supplier_tax_type/add`, {
+          id: crypto.randomUUID(), supplier_id: supplierId,
+          tax_type_name: t.tax_type_name, tax_type_id: t.tax_type_name,
+          rate: t.rate ? Number(t.rate) : 0,
+        });
+      }
+    } catch { /* skip */ }
+
+    // 담당자 — 기존 삭제 후 전체 재생성
+    try {
+      const existContacts = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      const existCRows = existContacts.data?.data?.data || existContacts.data?.data?.rows || [];
+      if (existCRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${CONTACT_TABLE}/delete`, {
+          data: existCRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const c of modalContacts) {
+      try {
+        await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/add`, {
+          id: crypto.randomUUID(), supplier_id: supplierId,
+          contact_name: c.contact_name || "", contact_phone: c.contact_phone || "",
+          contact_email: c.contact_email || "", department: c.department || "",
+          is_main: c.is_main || "N", memo: c.memo || "",
+        });
+      } catch { /* skip */ }
+    }
+
+    // 납품처 — 기존 삭제 후 전체 재생성
+    try {
+      const existDeliveries = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: supplierCode }] },
+        autoFilter: true,
+      });
+      const existDRows = existDeliveries.data?.data?.data || existDeliveries.data?.data?.rows || [];
+      if (existDRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
+          data: existDRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const d of modalDeliveries) {
+      try {
+        await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
+          id: crypto.randomUUID(), supplier_code: supplierCode,
+          destination_code: d.destination_code || "", destination_name: d.destination_name || "",
+          address: d.address || "", manager_name: d.manager_name || "",
+          phone: d.phone || "", memo: d.memo || "", is_default: d.is_default || "N",
+        });
+      } catch { /* skip */ }
+    }
+  };
+
+  const handleSupplierSave = async () => {
+    if (!supplierForm.supplier_name) { toast.error("공급업체명은 필수입니다."); return; }
+    if (!supplierForm.status) { toast.error("상태는 필수입니다."); return; }
+    const errors = validateForm(supplierForm, ["contact_phone", "email", "business_number"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) {
+      toast.error("입력 형식을 확인해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, _numberingRuleId, ...fields } = supplierForm;
+      const cleanFields: Record<string, any> = {};
+      for (const [key, value] of Object.entries(fields)) {
+        cleanFields[key] = value === "" ? null : value;
+      }
+
+      if (supplierEditMode && id) {
+        // 수정
+        await apiClient.put(`/table-management/tables/${SUPPLIER_TABLE}/edit`, {
+          originalData: { id }, updatedData: cleanFields,
+        });
+        await saveSubTables(id, cleanFields.supplier_code || supplierForm.supplier_code);
+        toast.success("저장되었습니다.");
+      } else {
+        // 신규 등록
+        await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/add`, cleanFields);
+        // id 획득
+        const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: cleanFields.supplier_code }] },
+          autoFilter: true,
+        });
+        const newRow = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+        if (newRow?.id) {
+          await saveSubTables(newRow.id, cleanFields.supplier_code);
+        }
+        toast.success("공급업체가 등록되었습니다.");
+      }
+
+      fetchSuppliers();
+      fetchMainContacts();
+      if (!supplierEditMode && continuousInput) {
+        // 연속입력 — 폼 초기화하고 모달 유지
+        setSupplierForm({});
+        setModalContacts([]);
+        setModalDeliveries([]);
+        setTaxTypeRows([]);
+        setSupplierModalTab("basic");
+        // 새 코드 채번
+        try {
+          const ruleRes = await apiClient.get(`/numbering-rules/by-column/${SUPPLIER_TABLE}/supplier_code`);
+          const ruleData = ruleRes.data;
+          if (ruleData?.success && ruleData?.data?.ruleId) {
+            const ruleId = ruleData.data.ruleId;
+            const allRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, { page: 1, size: 500, autoFilter: true, sort: { columnName: "supplier_code", order: "desc" } });
+            const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+            let maxSeq = 0;
+            for (const row of allRows) { const match = (row.supplier_code || "").match(/(\d+)$/); if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; } }
+            const previewRes = await previewNumberingCode(ruleId);
+            if (previewRes.success && previewRes.data?.generatedCode) {
+              const prefix = previewRes.data.generatedCode.replace(/\d+$/, "");
+              const seqLen = (previewRes.data.generatedCode.match(/(\d+)$/) || ["", "001"])[1].length;
+              setSupplierForm({ supplier_code: prefix + String(maxSeq + 1).padStart(seqLen, "0") });
+            }
+          }
+        } catch { /* skip */ }
+        toast.success("등록 완료. 다음 공급업체를 입력하세요.");
+      } else {
+        setSupplierModalOpen(false);
+        // 우측 패널 갱신
+        if (selectedSupplierId) {
+          const cid = selectedSupplierId;
+          setSelectedSupplierId(null);
+          setTimeout(() => setSelectedSupplierId(cid), 50);
+        }
+      }
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 공급업체 삭제
+  const handleSupplierDelete = async () => {
+    if (!selectedSupplierId) return;
+    const ok = await confirm("공급업체를 삭제하시겠습니까?", {
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${SUPPLIER_TABLE}/delete`, {
+        data: [{ id: selectedSupplierId }],
+      });
+      toast.success("삭제되었습니다.");
+      setSelectedSupplierId(null);
+      fetchSuppliers();
+    } catch { toast.error("삭제에 실패했습니다."); }
+  };
+
+  // 품목 검색
+  const searchItems = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const allItems = res.data?.data?.data || res.data?.data?.rows || [];
+      setItemTotalCount(allItems.length);
+      const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
+      const PURCHASE_CODES = ["s"]; // 구매관리 카테고리 코드
+      setItemSearchResults(allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        const divCodes = (item.division || "").split(",").map((c: string) => c.trim());
+        return divCodes.some((code: string) => PURCHASE_CODES.includes(code));
+      }));
+    } catch { /* skip */ } finally { setItemSearchLoading(false); }
+  };
+
+  // 품목 선택 완료 → 상세 입력 모달로 전환
+  const goToItemDetail = () => {
+    const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+    setSelectedItemsForDetail(selected);
+    const mappings: typeof itemMappings = {};
+    const prices: typeof itemPrices = {};
+    for (const item of selected) {
+      const key = item.item_number || item.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: item.standard_price || item.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: item.standard_price || item.selling_price || "",
+      }];
+    }
+    setItemMappings(mappings);
+    setItemPrices(prices);
+    setItemSelectOpen(false);
+    setItemDetailOpen(true);
+  };
+
+  // 거래처 품번/품명 행 추가
+  const addMappingRow = (itemKey: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, supplier_item_code: "", supplier_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (itemKey: string, rowId: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const handleMappingDragEnd = (itemKey: string, event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setItemMappings((prev) => {
+      const arr = [...(prev[itemKey] || [])];
+      const oldIdx = arr.findIndex((r) => r._id === active.id);
+      const newIdx = arr.findIndex((r) => r._id === over.id);
+      return { ...prev, [itemKey]: arrayMove(arr, oldIdx, newIdx) };
+    });
+  };
+
+  const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  // 단가 행 추가
+  const addPriceRow = (itemKey: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (itemKey: string, rowId: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1; // "10원" → 10, "100원" → 100
+          if (roundLabel === "반올림") {
+            calc = Math.round(calc / unit) * unit;
+          } else if (roundLabel === "절삭") {
+            calc = Math.floor(calc / unit) * unit;
+          } else if (roundLabel === "올림") {
+            calc = Math.ceil(calc / unit) * unit;
+          }
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  // 품목 편집 열기
+  const openEditItem = async (row: any) => {
+    const itemKey = row.item_number || row.item_id;
+    let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "equals", value: itemKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) itemInfo = found;
+    } catch { /* skip */ }
+
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "supplier_id", operator: "equals", value: selectedSupplier!.supplier_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.supplier_item_code || m.supplier_item_name)
+        .map((m: any) => ({
+          _id: `m_existing_${m.id}`,
+          supplier_item_code: m.supplier_item_code || "",
+          supplier_item_name: m.supplier_item_name || "",
+        }));
+    } catch { /* skip */ }
+
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "supplier_id", operator: "equals", value: selectedSupplier!.supplier_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date ? String(p.start_date).split("T")[0] : "",
+        end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedItemsForDetail([itemInfo]);
+    setItemMappings({ [itemKey]: mappingRows });
+    setItemPrices({ [itemKey]: priceRows });
+    setEditItemData(row);
+    setItemDetailOpen(true);
+  };
+
+  const handleItemDetailSave = async () => {
+    if (!selectedSupplier) return;
+    if (savingRef.current) return;
+    savingRef.current = true;
+    const isEditingExisting = !!editItemData;
+    setSaving(true);
+    try {
+      for (const item of selectedItemsForDetail) {
+        const itemKey = item.item_number || item.id;
+        const mappingRows = itemMappings[itemKey] || [];
+
+        if (isEditingExisting && editItemData?.id) {
+          // 기존 매핑 조회
+          let existingMaps: any[] = [];
+          try {
+            const existingMappings = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingMaps = existingMappings.data?.data?.data || existingMappings.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 매핑 upsert: 기존 것은 update, 새 것은 insert, 남은 것은 delete
+          const usedExistingIds = new Set<string>();
+          let firstMappingId: string | null = editItemData.id;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const existMap = existingMaps[mi];
+            if (existMap) {
+              // update
+              await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+                originalData: { id: existMap.id },
+                updatedData: {
+                  supplier_item_code: mappingRows[mi].supplier_item_code || "",
+                  supplier_item_name: mappingRows[mi].supplier_item_name || "",
+                },
+              });
+              usedExistingIds.add(existMap.id);
+              if (mi === 0) firstMappingId = existMap.id;
+            } else {
+              // insert
+              const mRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+                id: crypto.randomUUID(),
+                supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+                supplier_item_code: mappingRows[mi].supplier_item_code || "",
+                supplier_item_name: mappingRows[mi].supplier_item_name || "",
+              });
+              if (mi === 0 && !firstMappingId) firstMappingId = mRes.data?.data?.id || null;
+            }
+          }
+          // 초과분 delete
+          const toDeleteMaps = existingMaps.filter((m) => !usedExistingIds.has(m.id));
+          if (toDeleteMaps.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: toDeleteMaps.map((m: any) => ({ id: m.id })),
+            });
+          }
+
+          // 기존 단가 조회
+          let existingPriceRows: any[] = [];
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingPriceRows = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 단가 upsert
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          const usedPriceIds = new Set<string>();
+          for (let pi = 0; pi < priceRows.length; pi++) {
+            const price = priceRows[pi];
+            const priceData = {
+              mapping_id: firstMappingId || editItemData.id,
+              supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            };
+            const existPrice = existingPriceRows[pi];
+            if (existPrice) {
+              await apiClient.put(`/table-management/tables/${PRICE_TABLE}/edit`, {
+                originalData: { id: existPrice.id },
+                updatedData: priceData,
+              });
+              usedPriceIds.add(existPrice.id);
+            } else {
+              await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+                id: crypto.randomUUID(), ...priceData,
+              });
+            }
+          }
+          // 초과분 delete
+          const toDeletePrices = existingPriceRows.filter((p) => !usedPriceIds.has(p.id));
+          if (toDeletePrices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: toDeletePrices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } else {
+          if (!mappingRows.length || !mappingRows[0]?.supplier_item_code) {
+            const existingCheck = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 1,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            if ((existingCheck.data?.data?.data || existingCheck.data?.data?.rows || []).length > 0) {
+              toast.warning(`${item.item_name || itemKey} 품목은 이미 등록되어 있습니다.`);
+              continue;
+            }
+          }
+
+          let mappingId: string | null = null;
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+            supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+            supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+          });
+          mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              supplier_item_code: mappingRows[mi].supplier_item_code || "",
+              supplier_item_name: mappingRows[mi].supplier_item_name || "",
+            });
+          }
+
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedItemsForDetail.length}개 품목이 추가되었습니다.`);
+      setItemDetailOpen(false);
+      setEditItemData(null);
+      setItemCheckedIds(new Set());
+      const cid = selectedSupplierId;
+      setSelectedSupplierId(null);
+      setTimeout(() => setSelectedSupplierId(cid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+      savingRef.current = false;
+    }
+  };
+
+  // 품목 매핑 삭제
+  const handlePriceItemDelete = async () => {
+    if (priceCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${priceCheckedIds.length}개 품목 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      for (const mappingId of priceCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: priceCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${priceCheckedIds.length}개 품목 매핑이 삭제되었습니다.`);
+      setPriceCheckedIds([]);
+      const cid = selectedSupplierId;
+      setSelectedSupplierId(null);
+      setTimeout(() => setSelectedSupplierId(cid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // EDataTable 컬럼 정의 (공급업체 목록) — ts.visibleColumns 순서를 따름
+  const supplierColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      supplier_code: { width: "w-[120px]" },
+      supplier_name: { minWidth: "min-w-[140px]" },
+      division: {
+        width: "w-[80px]",
+        render: (val: any) =>
+          val ? (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
+              {val}
+            </Badge>
+          ) : null,
+      },
+      contact_person: { width: "w-[80px]" },
+      contact_phone: { width: "w-[120px]" },
+      email: { width: "w-[160px]" },
+      business_number: { width: "w-[120px]" },
+      address: { minWidth: "min-w-[150px]" },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val}
+            </Badge>
+          ) : null,
+      },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (suppliers.length === 0) return;
+    toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
+    try {
+      const allMappings: any[] = [];
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 5000, autoFilter: true,
+      });
+      const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemIds.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+            autoFilter: true,
+          });
+          for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+            itemMap[item.item_number] = item;
+          }
+        } catch { /* skip */ }
+      }
+      for (const m of mappings) {
+        const itemInfo = itemMap[m.item_id] || {};
+        allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
+      }
+
+      const rows: Record<string, any>[] = [];
+      for (const c of suppliers) {
+        const suppMappings = allMappings.filter((m) => m.supplier_id === c.supplier_code);
+        if (suppMappings.length === 0) {
+          rows.push({
+            공급업체코드: c.supplier_code, 공급업체명: c.supplier_name,
+            공급업체유형: getCategoryLabel("division", c.division),
+            담당자: c.contact_person, 전화번호: c.contact_phone,
+            사업자번호: c.business_number, 이메일: c.email,
+            상태: getCategoryLabel("status", c.status),
+            품목코드: "", 품명: "", 규격: "",
+            공급업체품번: "", 공급업체품명: "",
+            기준가: "", 할인유형: "", 할인값: "", 단가: "", 통화: "",
+          });
+        } else {
+          for (const m of suppMappings) {
+            rows.push({
+              공급업체코드: c.supplier_code, 공급업체명: c.supplier_name,
+              공급업체유형: getCategoryLabel("division", c.division),
+              담당자: c.contact_person, 전화번호: c.contact_phone,
+              사업자번호: c.business_number, 이메일: c.email,
+              상태: getCategoryLabel("status", c.status),
+              품목코드: m.item_id || "", 품명: m.item_name || "", 규격: m.item_spec || "",
+              공급업체품번: m.supplier_item_code || "", 공급업체품명: m.supplier_item_name || "",
+              기준가: m.base_price || "", 할인유형: m.discount_type || "", 할인값: m.discount_value || "",
+              단가: m.calculated_price || "", 통화: m.currency_code || "",
+            });
+          }
+        }
+      }
+      await exportToExcel(rows, "공급업체관리.xlsx", "거래처+품목");
+      toast.dismiss("excel-dl");
+      toast.success(`${rows.length}행 다운로드 완료`);
+    } catch (err) {
+      toast.dismiss("excel-dl");
+      toast.error("다운로드에 실패했습니다.");
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={SUPPLIER_TABLE}
+        filterId="c16-supplier"
+        onFilterChange={setSearchFilters}
+        dataCount={suppliers.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button
+            variant="outline" size="sm" className="h-8" disabled={excelDetecting}
+            onClick={async () => {
+              setExcelDetecting(true);
+              try {
+                const result = await autoDetectMultiTableConfig(SUPPLIER_TABLE);
+                if (result.success && result.data) {
+                  setExcelChainConfig(result.data);
+                  setExcelUploadOpen(true);
+                } else {
+                  toast.error(result.message || "테이블 구조 분석 실패");
+                }
+              } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+            }}
+          >
+            {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />}
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 공급업체 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">공급업체 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {supplierCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <label className="flex items-center gap-1.5 cursor-pointer mr-1">
+                    <input type="checkbox" checked={showInactive} onChange={(e) => setShowInactive(e.target.checked)} className="rounded" />
+                    <span className="text-[11px] text-muted-foreground">거래정지 포함</span>
+                  </label>
+                  <Button size="sm" onClick={openSupplierRegister}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedSupplierId} onClick={openSupplierEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedSupplierId} onClick={handleSupplierDelete}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={supplierColumns}
+                data={ts.groupData(showInactive ? suppliers : suppliers.filter((c) => c.status !== "거래정지"))}
+                rowKey={(row) => row.id}
+                loading={supplierLoading}
+                emptyMessage="등록된 공급업체가 없어요"
+                selectedId={selectedSupplierId}
+                onSelect={(id) => setSelectedSupplierId(id)}
+                onRowDoubleClick={(row) => { setSelectedSupplierId(row.id); openSupplierEdit(); }}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-supplier"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedSupplierId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">공급업체를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 공급업체를 선택하면 상세 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 탭 + 버튼 통합 헤더 */}
+                  <Tabs
+                    value={rightTab}
+                    onValueChange={(v) => setRightTab(v as "items" | "delivery")}
+                    className="flex flex-col flex-1 overflow-hidden gap-0"
+                  >
+                    <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                      <TabsList className="bg-transparent h-auto p-0 rounded-none">
+                        <TabsTrigger
+                          value="items"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <Package className="w-3.5 h-3.5" /> 공급업체별 품목정보
+                          {Object.keys(priceGroups).length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{Object.keys(priceGroups).length}</Badge>
+                          )}
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="delivery"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <MapPin className="w-3.5 h-3.5" /> 납품처 정보
+                          {deliveryItems.length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{deliveryItems.length}</Badge>
+                          )}
+                        </TabsTrigger>
+                      </TabsList>
+                      <div className="flex gap-1.5">
+                        {rightTab === "items" ? (
+                          <>
+                            <Button size="sm" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
+                              <Plus className="w-3.5 h-3.5" /> 품목 추가
+                            </Button>
+                            <Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0} onClick={handlePriceItemDelete}>
+                              <Trash2 className="w-3.5 h-3.5" /> 삭제
+                            </Button>
+                          </>
+                        ) : (
+                          <Button size="sm" variant="outline" onClick={openSupplierEdit}>
+                            <Pencil className="w-3.5 h-3.5 mr-1" /> 공급업체 수정에서 관리
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 품목정보 탭 */}
+                    <TabsContent value="items" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[40px] text-center px-2">
+                                <input
+                                  type="checkbox"
+                                  className="rounded"
+                                  checked={priceItems.length > 0 && priceCheckedIds.length === priceItems.length}
+                                  onChange={(e) => setPriceCheckedIds(e.target.checked ? priceItems.map((p) => p.id) : [])}
+                                />
+                              </TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                              <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품번</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품명</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                              <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                              <TableHead className="w-[60px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                              <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {priceLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.keys(priceGroups).length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 품목이 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.entries(priceGroups).map(([itemKey, group]) => {
+                              const isExpanded = expandedItems.has(itemKey);
+                              const m = group.master;
+                              const isChecked = priceCheckedIds.includes(m.id);
+                              return (
+                                <React.Fragment key={itemKey}>
+                                  {/* 마스터 행 */}
+                                  <TableRow
+                                    className={cn(
+                                      "cursor-pointer border-l-[3px] border-l-transparent h-[41px]",
+                                      isChecked && "bg-primary/5 border-l-primary"
+                                    )}
+                                    onClick={() => {
+                                      setExpandedItems((prev) => {
+                                        const next = new Set(prev);
+                                        if (next.has(itemKey)) next.delete(itemKey); else next.add(itemKey);
+                                        return next;
+                                      });
+                                    }}
+                                    onDoubleClick={() => openEditItem(m)}
+                                  >
+                                    <TableCell
+                                      className="text-center px-2"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        setPriceCheckedIds((prev) =>
+                                          prev.includes(m.id) ? prev.filter((id) => id !== m.id) : [...prev, m.id]
+                                        );
+                                      }}
+                                    >
+                                      <input type="checkbox" className="rounded" checked={isChecked} readOnly />
+                                    </TableCell>
+                                    <TableCell className="text-[13px] font-mono">
+                                      <div className="flex items-center gap-1">
+                                        {isExpanded
+                                          ? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                          : <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                        }
+                                        {m.item_number}
+                                      </div>
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.supplier_item_code}</TableCell>
+                                    <TableCell className="text-[13px]">{m.supplier_item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.base_price_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">
+                                      {m.base_price ? Number(m.base_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.discount_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">{m.discount_value ? Number(m.discount_value).toLocaleString() : ""}</TableCell>
+                                    <TableCell className="text-[13px] text-right font-semibold">
+                                      {m.calculated_price ? Number(m.calculated_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.currency_code}</TableCell>
+                                  </TableRow>
+
+                                  {/* 현재 단가 카드 (펼쳤을 때) */}
+                                  {isExpanded && (() => {
+                                    const cp = group.details.find((p) => p.is_current) || group.details[0];
+                                    if (!cp) return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="py-3 px-4 text-xs text-muted-foreground">등록된 단가가 없어요</TableCell>
+                                      </TableRow>
+                                    );
+                                    return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="px-4 py-3">
+                                          <div className="border border-primary/20 rounded-lg bg-card overflow-hidden">
+                                            {/* 카드 헤더 */}
+                                            <div className="flex items-center justify-between px-4 py-2 bg-primary/[0.04] border-b border-primary/10">
+                                              <div className="flex items-center gap-2">
+                                                <Coins className="w-3.5 h-3.5 text-primary" />
+                                                <span className="text-xs font-semibold">적용 단가</span>
+                                                <Badge variant="secondary" className="text-[9px] px-1.5 py-0 bg-primary/10 text-primary">현재</Badge>
+                                              </div>
+                                              {group.details.length > 1 && (
+                                                <span className="text-[10px] text-muted-foreground">전체 {group.details.length}건 중</span>
+                                              )}
+                                            </div>
+                                            {/* 카드 내용 */}
+                                            <div className="px-5 py-3.5 flex items-end gap-0 text-[13px]">
+                                              <div className="flex flex-col pr-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기간</span>
+                                                <span className="font-mono text-muted-foreground text-xs">
+                                                  {cp.start_date ? String(cp.start_date).split("T")[0] : "—"} ~ {cp.end_date ? String(cp.end_date).split("T")[0] : "—"}
+                                                </span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준유형</span>
+                                                <span>{cp.base_price_type_label || "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준가</span>
+                                                <span className="font-mono font-medium">{cp.base_price ? Number(cp.base_price).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인유형</span>
+                                                <span>{cp.discount_type_label && cp.discount_type_label !== "할인없음" ? cp.discount_type_label : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인값</span>
+                                                <span className="font-mono">{cp.discount_value ? Number(cp.discount_value).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">단수처리</span>
+                                                <span>
+                                                  {cp.rounding_unit_value
+                                                    ? (priceCategoryOptions["rounding_unit_value"]?.find((o) => o.code === cp.rounding_unit_value)?.label || cp.rounding_unit_value)
+                                                    : "-"}
+                                                </span>
+                                              </div>
+                                              <span className="text-primary/50 px-4 pb-0.5 text-lg">→</span>
+                                              <div className="flex flex-col pl-1">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">계산단가</span>
+                                                <span className="text-base font-bold font-mono text-foreground">
+                                                  {(cp.calculated_price || cp.unit_price) ? Number(cp.calculated_price || cp.unit_price).toLocaleString() : "-"}
+                                                  <span className="text-xs font-normal text-muted-foreground ml-1.5">{cp.currency_label}</span>
+                                                </span>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })()}
+                                </React.Fragment>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+
+                    {/* 납품처 탭 */}
+                    <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                              <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                              <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                              <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {deliveryLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 납품처가 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.map((d) => (
+                              <TableRow key={d.id} className="h-[41px]">
+                                <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                                <TableCell className="text-sm">{d.destination_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                                <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                                <TableCell className="text-[13px]">{d.phone}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                                <TableCell className="text-center">
+                                  {d.is_default && (
+                                    <Badge variant="default" className="text-[10px] px-1.5 py-0 h-5">메인</Badge>
+                                  )}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 모달: 공급업체 등록/수정 (3탭) ── */}
+      <Dialog open={supplierModalOpen} onOpenChange={(open) => {
+        if (!open && isConfirmOpenRef.current) return;
+        setSupplierModalOpen(open);
+        if (!open) {
+          setModalContactFormOpen(false);
+          setModalDeliveryFormOpen(false);
+          setModalContactForm({});
+          setModalDeliveryForm({});
+          setModalContactEditId(null);
+          setModalDeliveryEditId(null);
+          fetchSuppliers();
+          if (supplierForm.supplier_code) {
+            const cid = selectedSupplierId;
+            setSelectedSupplierId(null);
+            setTimeout(() => setSelectedSupplierId(cid), 50);
+          }
+        }
+      }}>
+        <DialogContent className="max-w-4xl h-[85vh] flex flex-col overflow-hidden p-0">
+          <DialogHeader className="px-6 pt-5 pb-0 shrink-0">
+            <DialogTitle>{supplierEditMode ? "공급업체 수정" : "공급업체 등록"}</DialogTitle>
+            <DialogDescription>
+              {supplierEditMode ? "공급업체 정보를 수정합니다." : "새 공급업체를 등록합니다."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <Tabs value={supplierModalTab} onValueChange={(v: any) => setSupplierModalTab(v)} className="flex flex-col flex-1 overflow-hidden">
+            <div className="shrink-0">
+              <TabsList className="bg-transparent w-full h-auto p-0 rounded-none gap-0">
+                <TabsTrigger value="basic" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  기본정보
+                </TabsTrigger>
+                <TabsTrigger value="contacts" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  담당자 관리
+                  {modalContacts.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalContacts.length}</span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="delivery" className="flex-1 rounded-none py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  납품처 관리
+                  {modalDeliveries.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalDeliveries.length}</span>
+                  )}
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            {/* 기본정보 탭 */}
+            <TabsContent value="basic" className="flex-1 overflow-y-auto mt-0">
+              <div className="px-6 py-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체 코드</Label>
+                    <Input
+                      value={supplierForm.supplier_code || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, supplier_code: e.target.value }))}
+                      placeholder={supplierEditMode ? "" : "자동 생성"}
+                      className={cn("h-9 font-mono", !supplierEditMode && supplierForm.supplier_code && "bg-muted")}
+                      readOnly={!supplierEditMode && !!supplierForm.supplier_code}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={supplierForm.supplier_name || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, supplier_name: e.target.value }))}
+                      placeholder="공급업체명"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체 유형</Label>
+                    <Select
+                      value={supplierForm.division || "__none__"}
+                      onValueChange={(v) => setSupplierForm((p) => ({ ...p, division: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="공급업체 유형" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["division"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+                    <Select
+                      value={supplierForm.status || "__none__"}
+                      onValueChange={(v) => setSupplierForm((p) => ({ ...p, status: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="상태" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체담당자</Label>
+                    <Input
+                      value={supplierForm.contact_person || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, contact_person: e.target.value }))}
+                      placeholder="공급업체담당자"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">전화번호</Label>
+                    <Input
+                      value={supplierForm.contact_phone || ""}
+                      onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                      placeholder="010-0000-0000"
+                      className={cn("h-9", formErrors.contact_phone && "border-destructive")}
+                    />
+                    {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">이메일</Label>
+                    <Input
+                      value={supplierForm.email || ""}
+                      onChange={(e) => handleFormChange("email", e.target.value)}
+                      placeholder="example@email.com"
+                      className={cn("h-9", formErrors.email && "border-destructive")}
+                    />
+                    {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">사업자번호</Label>
+                    <Input
+                      value={supplierForm.business_number || ""}
+                      onChange={(e) => handleFormChange("business_number", e.target.value)}
+                      placeholder="000-00-00000"
+                      className={cn("h-9", formErrors.business_number && "border-destructive")}
+                    />
+                    {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+                  </div>
+                  <div className="space-y-1.5 col-span-2">
+                    <Label className="text-sm">주소</Label>
+                    <Input
+                      value={supplierForm.address || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="주소"
+                      className="h-9"
+                    />
+                  </div>
+                </div>
+
+                {/* 세금유형 */}
+                <div className="mt-4 pt-4 border-t">
+                  <div className="flex items-center justify-between mb-2">
+                    <Label className="text-sm font-semibold flex items-center gap-1.5">
+                      <Coins className="w-3.5 h-3.5 text-primary" /> 세금유형
+                    </Label>
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => {
+                      setTaxTypeRows((prev) => [...prev, { _id: `tax_${Date.now()}_${Math.random()}`, tax_type_name: "", rate: "" }]);
+                    }}>
+                      <Plus className="h-3 w-3 mr-1" /> 추가
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    {taxTypeRows.map((row, idx) => (
+                      <div key={row._id} className="flex gap-2 items-center">
+                        <span className="text-xs text-muted-foreground w-4 shrink-0">{idx + 1}</span>
+                        <Select value={row.tax_type_name} onValueChange={(v) => {
+                          setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, tax_type_name: v } : r));
+                        }}>
+                          <SelectTrigger className="h-9 text-[13px] flex-1"><SelectValue placeholder="세금유형 선택" /></SelectTrigger>
+                          <SelectContent>
+                            {taxTypeOptions.map((o) => (
+                              <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <Input
+                          value={row.rate}
+                          onChange={(e) => {
+                            const v = e.target.value.replace(/[^\d.]/g, "");
+                            setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, rate: v } : r));
+                          }}
+                          placeholder="세율 %"
+                          className="h-9 text-[13px] w-[80px] text-right"
+                        />
+                        <span className="text-xs text-muted-foreground">%</span>
+                        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                          onClick={() => setTaxTypeRows((prev) => prev.filter((r) => r._id !== row._id))}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* 담당자 관리 탭 */}
+            <TabsContent value="contacts" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 담당자 목록 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    담당자 {modalContacts.length}명
+                  </span>
+                  <Button size="sm" onClick={() => {
+                    setModalContactForm({});
+                    setModalContactEditId(null);
+                    setModalContactFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 담당자 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalContactLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalContacts.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Users className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 담당자가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자명</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부서</TableHead>
+                          <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalContacts].sort((a, b) => {
+                          const aMain = a.is_main === "Y" || a.is_main === true ? 0 : 1;
+                          const bMain = b.is_main === "Y" || b.is_main === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((c) => (
+                          <TableRow key={c._localId || c.id} className="h-[41px]">
+                            <TableCell className="text-sm font-medium">{c.contact_name}</TableCell>
+                            <TableCell className="text-[13px]">{c.contact_phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.contact_email}</TableCell>
+                            <TableCell className="text-[13px]">{c.department}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (c.is_main === "Y" || c.is_main === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = c.is_main === "Y" || c.is_main === true;
+                                  if (isCurrentMain) {
+                                    // 메인 해제
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id) ? { ...item, is_main: "N" } : item
+                                    ));
+                                  } else {
+                                    // 메인 설정 — 기존 메인이 있으면 확인
+                                    const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== (c._localId || c.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id)
+                                        ? { ...item, is_main: "Y" }
+                                        : { ...item, is_main: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(c.is_main === "Y" || c.is_main === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalContactForm({ ...c });
+                                    setModalContactEditId(c._localId || c.id);
+                                    setModalContactFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalContactDelete(c._localId || c.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 담당자 폼 (인라인) */}
+                {modalContactFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalContactEditId ? "담당자 수정" : "담당자 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalContactForm.contact_name || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_name: e.target.value }))}
+                          placeholder="담당자명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalContactForm.contact_phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalContactForm((p) => ({ ...p, contact_phone: formatted }));
+                          }}
+                          placeholder="010-0000-0000"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">이메일</Label>
+                        <Input
+                          value={modalContactForm.contact_email || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_email: e.target.value }))}
+                          placeholder="example@email.com"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">부서</Label>
+                        <Input
+                          value={modalContactForm.department || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, department: e.target.value }))}
+                          placeholder="부서명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalContactForm.memo || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalContactForm.is_main === "Y" || modalContactForm.is_main === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== modalContactEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalContacts((prev) => prev.map((item) => ({ ...item, is_main: "N" })));
+                                }
+                                setModalContactForm((p) => ({ ...p, is_main: "Y" }));
+                              } else {
+                                setModalContactForm((p) => ({ ...p, is_main: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 담당자</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalContactFormOpen(false); setModalContactForm({}); setModalContactEditId(null); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalContactSave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalContactEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            {/* ── 탭3: 납품처 관리 ── */}
+            <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 납품처 목록 헤더 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    납품처 {modalDeliveries.length}개
+                  </span>
+                  <Button size="sm" onClick={async () => {
+                    const code = await generateDeliveryCode();
+                    setModalDeliveryForm({ destination_code: code });
+                    setModalDeliveryEditId(null);
+                    setModalDeliveryFormErrors({});
+                    setModalDeliveryFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalDeliveryLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalDeliveries.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <MapPin className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 납품처가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalDeliveries].sort((a, b) => {
+                          const aMain = a.is_default === "Y" || a.is_default === true ? 0 : 1;
+                          const bMain = b.is_default === "Y" || b.is_default === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((d) => (
+                          <TableRow key={d._localId || d.id || d.destination_code} className="h-[41px]">
+                            <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                            <TableCell className="text-sm">{d.destination_name}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                            <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                            <TableCell className="text-[13px]">{d.phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (d.is_default === "Y" || d.is_default === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = d.is_default === "Y" || d.is_default === true;
+                                  if (isCurrentMain) {
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id) ? { ...item, is_default: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== (d._localId || d.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id)
+                                        ? { ...item, is_default: "Y" }
+                                        : { ...item, is_default: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(d.is_default === "Y" || d.is_default === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalDeliveryForm({ ...d });
+                                    setModalDeliveryEditId(d._localId || d.id);
+                                    setModalDeliveryFormErrors({});
+                                    setModalDeliveryFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalDeliveryDelete(d._localId || d.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 납품처 폼 (인라인) */}
+                {modalDeliveryFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalDeliveryEditId ? "납품처 수정" : "납품처 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처코드</Label>
+                        <Input
+                          value={modalDeliveryForm.destination_code || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
+                          placeholder="자동 생성"
+                          className={cn("h-8 text-sm font-mono", modalDeliveryForm.destination_code && "bg-muted")}
+                          readOnly={!!modalDeliveryForm.destination_code && !modalDeliveryEditId}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalDeliveryForm.destination_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
+                          placeholder="납품처명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자</Label>
+                        <Input
+                          value={modalDeliveryForm.manager_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
+                          placeholder="담당자"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 col-span-2">
+                        <Label className="text-xs">주소</Label>
+                        <Input
+                          value={modalDeliveryForm.address || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, address: e.target.value }))}
+                          placeholder="주소"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalDeliveryForm.phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalDeliveryForm((p) => ({ ...p, phone: formatted }));
+                            const err = validateField("phone", formatted);
+                            setModalDeliveryFormErrors((p) => {
+                              const n = { ...p };
+                              if (err) n.phone = err; else delete n.phone;
+                              return n;
+                            });
+                          }}
+                          placeholder="010-0000-0000"
+                          className={cn("h-8 text-sm", modalDeliveryFormErrors.phone && "border-destructive")}
+                        />
+                        {modalDeliveryFormErrors.phone && <p className="text-xs text-destructive">{modalDeliveryFormErrors.phone}</p>}
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalDeliveryForm.memo || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== modalDeliveryEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalDeliveries((prev) => prev.map((item) => ({ ...item, is_default: "N" })));
+                                }
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "Y" }));
+                              } else {
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 납품처로 설정</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalDeliveryFormOpen(false); setModalDeliveryForm({}); setModalDeliveryEditId(null); setModalDeliveryFormErrors({}); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalDeliverySave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalDeliveryEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+          <div className="border-t px-6 py-3 flex items-center gap-2 shrink-0">
+            {!supplierEditMode && (
+              <label className="flex items-center gap-2 cursor-pointer mr-auto">
+                <input type="checkbox" checked={continuousInput} onChange={(e) => setContinuousInput(e.target.checked)} className="rounded" />
+                <span className="text-sm font-medium">연속입력</span>
+              </label>
+            )}
+            <Button variant="outline" onClick={() => setSupplierModalOpen(false)}>닫기</Button>
+            <Button onClick={handleSupplierSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {supplierEditMode ? "저장" : "등록"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 선택 (1단계) ── */}
+      <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>품목 선택</DialogTitle>
+            <DialogDescription>공급업체에 추가할 품목을 선택하세요. (전체: {itemTotalCount}건 / 대상: {itemSearchResults.length}건{itemCheckedIds.size > 0 ? ` / 선택: ${itemCheckedIds.size}건` : ""})</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              placeholder="품명/품목코드 검색"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+              className="h-9 flex-1"
+            />
+            <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+              {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+            </Button>
+          </div>
+          <div className="overflow-auto max-h-[350px] border rounded-lg">
+            <Table noWrapper>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted h-10">
+                  <TableHead className="w-[40px] text-center px-2">
+                    <input
+                      type="checkbox"
+                      className="rounded"
+                      checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                      onChange={(e) => {
+                        if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                        else setItemCheckedIds(new Set());
+                      }}
+                    />
+                  </TableHead>
+                  <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="min-w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                  <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {itemSearchResults.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                      검색 결과가 없어요
+                    </TableCell>
+                  </TableRow>
+                ) : itemSearchResults.map((item) => (
+                  <TableRow
+                    key={item.id}
+                    className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                    onClick={() => setItemCheckedIds((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                      return next;
+                    })}
+                  >
+                    <TableCell className="text-center px-2">
+                      <input type="checkbox" className="rounded" checked={itemCheckedIds.has(item.id)} readOnly />
+                    </TableCell>
+                    <TableCell className="text-[13px] font-mono">
+                      <span className="block truncate" title={item.item_number}>{item.item_number}</span>
+                    </TableCell>
+                    <TableCell className="text-sm">{item.item_name}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.size}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.material}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.unit}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <DialogFooter className="flex items-center justify-between w-full">
+            <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+              <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 상세 입력 (2단계) ── */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedSupplier?.supplier_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData
+                ? "거래처 품번/품명과 기간별 단가를 수정합니다."
+                : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2 flex-1 overflow-y-auto">
+            {selectedItemsForDetail.map((item, idx) => {
+              const itemKey = item.item_number || item.id;
+              const mappingRows = itemMappings[itemKey] || [];
+              const prices = itemPrices[itemKey] || [];
+
+              return (
+                <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
+                  {/* 품목 헤더 */}
+                  <div className="px-5 py-3 bg-muted/30 border-b">
+                    <div className="font-bold">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
+                  </div>
+
+                  <div className="flex gap-4 p-5 items-stretch">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Tag className="w-3.5 h-3.5 text-primary" /> 거래처 품번/품명 관리
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 품번 추가
+                        </Button>
+                      </div>
+                      <div className="border-2 border-foreground/20 rounded-lg bg-background p-3 space-y-2 min-h-[200px] max-h-[350px] overflow-y-auto flex-1">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : (
+                          <DndContext
+                            sensors={dndSensors}
+                            collisionDetection={closestCenter}
+                            onDragEnd={(e) => handleMappingDragEnd(itemKey, e)}
+                          >
+                            <SortableContext items={mappingRows.map((r) => r._id)} strategy={verticalListSortingStrategy}>
+                              {mappingRows.map((mRow, mIdx) => (
+                                <SortableMappingRow key={mRow._id} id={mRow._id}>
+                                  <span className="text-xs text-muted-foreground/50 font-mono w-4 shrink-0 text-center">{mIdx + 1}</span>
+                                  <Input
+                                    value={mRow.supplier_item_code}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "supplier_item_code", e.target.value)}
+                                    placeholder="거래처 품번"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Input
+                                    value={mRow.supplier_item_name}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "supplier_item_name", e.target.value)}
+                                    placeholder="거래처 품명"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Button
+                                    variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                                    onClick={() => removeMappingRow(itemKey, mRow._id)}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                </SortableMappingRow>
+                              ))}
+                            </SortableContext>
+                          </DndContext>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Coins className="w-3.5 h-3.5 text-primary" /> 기간별 단가 설정
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3 flex-1 overflow-y-auto max-h-[350px]">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border-2 border-foreground/20 rounded-lg bg-background overflow-hidden">
+                            <div
+                              className="flex items-center justify-between px-4 py-2.5 cursor-pointer hover:bg-muted/50 transition-colors"
+                              onClick={() => setCollapsedPriceCards((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(price._id)) next.delete(price._id); else next.add(price._id);
+                                return next;
+                              })}
+                            >
+                              <div className="flex items-center gap-2">
+                                {collapsedPriceCards.has(price._id)
+                                  ? <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                                  : <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                                }
+                                <span className="text-[13px] font-semibold text-muted-foreground">단가 {pIdx + 1}</span>
+                                {collapsedPriceCards.has(price._id) && price.calculated_price && (
+                                  <span className="text-xs text-muted-foreground ml-2">
+                                    {price.start_date || "—"} ~ {price.end_date || "—"} · <span className="font-mono font-bold text-foreground">{Number(price.calculated_price).toLocaleString()}</span> {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                  </span>
+                                )}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                {prices.length > 1 && (
+                                  <Button
+                                    variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
+                                    onClick={(e) => { e.stopPropagation(); removePriceRow(itemKey, price._id); }}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                )}
+                              </div>
+                            </div>
+                            {!collapsedPriceCards.has(price._id) && <div className="px-4 pb-4 space-y-2.5">
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">시작일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.start_date}
+                                  onChange={(e) => {
+                                    const v = e.target.value;
+                                    updatePriceRow(itemKey, price._id, "start_date", v);
+                                    if (price.end_date && v > price.end_date) {
+                                      updatePriceRow(itemKey, price._id, "end_date", v);
+                                    }
+                                  }}
+                                  max={price.end_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <span className="text-xs text-muted-foreground mt-4">~</span>
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">종료일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.end_date}
+                                  onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                  min={price.start_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <div className="w-[80px]">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">&nbsp;</Label>
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="통화" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "base_price", raw);
+                                }}
+                                className="h-9 text-[13px] text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-9 text-[13px] text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-1.5 pt-2 border-t">
+                              <span className="text-[13px] text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-base font-mono">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                              {price.calculated_price && price.currency_code && (
+                                <span className="text-[13px] text-muted-foreground">
+                                  {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                </span>
+                              )}
+                            </div>
+                            </div>}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal
+          open={excelUploadOpen}
+          onOpenChange={(open) => {
+            setExcelUploadOpen(open);
+            if (!open) setExcelChainConfig(null);
+          }}
+          config={excelChainConfig}
+          onSuccess={() => {
+            fetchSuppliers();
+            const cid = selectedSupplierId;
+            setSelectedSupplierId(null);
+            setTimeout(() => setSelectedSupplierId(cid), 50);
+          }}
+        />
+      )}
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/quality/inspection/page.tsx b/frontend/app/(main)/COMPANY_10/quality/inspection/page.tsx
new file mode 100644
index 00000000..cacd9d02
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/quality/inspection/page.tsx
@@ -0,0 +1,1703 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Plus,
+  Trash2,
+  Save,
+  Loader2,
+  Pencil,
+  ClipboardCheck,
+  AlertTriangle,
+  Wrench,
+  Search,
+  Inbox,
+  Settings2,
+} from "lucide-react";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+/* ───── 테이블명 ───── */
+const INSPECTION_TABLE = "inspection_standard";
+
+const INSPECTION_COLUMNS = [
+  { key: "inspection_code", label: "검사코드" },
+  { key: "inspection_type", label: "검사유형" },
+  { key: "inspection_criteria", label: "검사기준" },
+  { key: "inspection_item", label: "검사항목" },
+  { key: "inspection_method", label: "검사방법" },
+  { key: "judgment_criteria", label: "판단기준" },
+  { key: "unit", label: "단위" },
+  { key: "apply_type", label: "적용구분" },
+  { key: "manager", label: "관리자" },
+];
+const DEFECT_TABLE = "defect_standard_mng";
+const EQUIPMENT_TABLE = "inspection_equipment_mng";
+
+/* ───── 카테고리 flatten ───── */
+const flattenCategories = (vals: any[]): { code: string; label: string }[] => {
+  const result: { code: string; label: string }[] = [];
+  for (const v of vals) {
+    result.push({ code: v.valueCode, label: v.valueLabel });
+    if (v.children?.length) result.push(...flattenCategories(v.children));
+  }
+  return result;
+};
+
+export default function InspectionManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-inspection", INSPECTION_TABLE, INSPECTION_COLUMNS);
+
+  const [activeTab, setActiveTab] = useState("inspection");
+
+  /* ───── 검사기준 ───── */
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspLoading, setInspLoading] = useState(false);
+  const [inspCount, setInspCount] = useState(0);
+  const [inspChecked, setInspChecked] = useState<string[]>([]);
+  const [inspModalOpen, setInspModalOpen] = useState(false);
+  const [inspEditMode, setInspEditMode] = useState(false);
+  const [inspForm, setInspForm] = useState<Record<string, any>>({});
+  const [inspSaving, setInspSaving] = useState(false);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  /* ───── 불량관리 ───── */
+  const [defects, setDefects] = useState<any[]>([]);
+  const [defLoading, setDefLoading] = useState(false);
+  const [defCount, setDefCount] = useState(0);
+  const [defChecked, setDefChecked] = useState<string[]>([]);
+  const [defModalOpen, setDefModalOpen] = useState(false);
+  const [defEditMode, setDefEditMode] = useState(false);
+  const [defForm, setDefForm] = useState<Record<string, any>>({});
+  const [defSaving, setDefSaving] = useState(false);
+  const [defKeyword, setDefKeyword] = useState("");
+
+  /* ───── 검사장비 ───── */
+  const [equipments, setEquipments] = useState<any[]>([]);
+  const [eqLoading, setEqLoading] = useState(false);
+  const [eqCount, setEqCount] = useState(0);
+  const [eqChecked, setEqChecked] = useState<string[]>([]);
+  const [eqModalOpen, setEqModalOpen] = useState(false);
+  const [eqEditMode, setEqEditMode] = useState(false);
+  const [eqForm, setEqForm] = useState<Record<string, any>>({});
+  const [eqSaving, setEqSaving] = useState(false);
+  const [eqKeyword, setEqKeyword] = useState("");
+
+  /* ───── 채번 ───── */
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  /* ───── 카테고리 옵션 ───── */
+  const [catOptions, setCatOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [userOptions, setUserOptions] = useState<{ code: string; label: string }[]>([]);
+
+  /* ═══════════════════ 카테고리 로드 ═══════════════════ */
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const catList = [
+        { table: INSPECTION_TABLE, col: "inspection_type" },
+        { table: INSPECTION_TABLE, col: "apply_type" },
+        { table: INSPECTION_TABLE, col: "inspection_method" },
+        { table: INSPECTION_TABLE, col: "judgment_criteria" },
+        { table: INSPECTION_TABLE, col: "unit" },
+        { table: DEFECT_TABLE, col: "defect_type" },
+        { table: DEFECT_TABLE, col: "severity" },
+        { table: DEFECT_TABLE, col: "inspection_type" },
+        { table: DEFECT_TABLE, col: "is_active" },
+        { table: EQUIPMENT_TABLE, col: "equipment_type" },
+        { table: EQUIPMENT_TABLE, col: "equipment_status" },
+      ];
+      await Promise.all(
+        catList.map(async ({ table, col }) => {
+          try {
+            const res = await apiClient.get(`/table-categories/${table}/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              optMap[`${table}.${col}`] = flattenCategories(res.data.data);
+            }
+          } catch {
+            /* skip */
+          }
+        }),
+      );
+      setCatOptions(optMap);
+      // 사용자 목록 로드
+      try {
+        const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
+          page: 1,
+          size: 500,
+          autoFilter: true,
+        });
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        setUserOptions(
+          users.map((u: any) => ({
+            code: u.user_id || u.id,
+            label: `${u.user_name || u.name || u.user_id}${u.dept_name ? ` (${u.dept_name})` : ""}`,
+          })),
+        );
+      } catch {
+        /* skip */
+      }
+    };
+    load();
+  }, []);
+
+  const getCatLabel = (table: string, col: string, code: string) => {
+    if (!code) return "";
+    const opts = catOptions[`${table}.${col}`];
+    if (!opts) return code;
+    // 쉼표 구분 다중 코드 지원
+    if (code.includes(",")) {
+      return code
+        .split(",")
+        .filter(Boolean)
+        .map((c) => opts.find((o) => o.code === c)?.label || c)
+        .join(", ");
+    }
+    return opts.find((o) => o.code === code)?.label || code;
+  };
+
+  const inspTableColumns = useMemo<EDataTableColumn[]>(() => {
+    return ts.visibleColumns.map((col) => {
+      const base: EDataTableColumn = { key: col.key, label: col.label };
+      if (["inspection_type", "inspection_method", "judgment_criteria", "unit", "apply_type"].includes(col.key)) {
+        base.render = (v: any, row: any) => getCatLabel(INSPECTION_TABLE, col.key, row[col.key]);
+      }
+      return base;
+    });
+  }, [ts.visibleColumns, catOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  // 다중값 컬럼 (쉼표 구분 저장) — 서버 equals 대신 contains 사용
+  const MULTI_VALUE_COLUMNS = ["inspection_type"];
+
+  const fetchInspections = useCallback(async () => {
+    setInspLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({
+        columnName: f.columnName,
+        operator: MULTI_VALUE_COLUMNS.includes(f.columnName) ? "contains" : f.operator,
+        value: f.value,
+      }));
+      const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setInspections(rows);
+      setInspCount(rows.length);
+    } catch {
+      toast.error("검사기준 조회에 실패했어요");
+    } finally {
+      setInspLoading(false);
+    }
+  }, [searchFilters]);
+
+  const fetchDefects = useCallback(async () => {
+    setDefLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DEFECT_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setDefects(rows);
+      setDefCount(rows.length);
+    } catch {
+      toast.error("불량관리 조회에 실패했어요");
+    } finally {
+      setDefLoading(false);
+    }
+  }, []);
+
+  const fetchEquipments = useCallback(async () => {
+    setEqLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setEquipments(rows);
+      setEqCount(rows.length);
+    } catch {
+      toast.error("검사장비 조회에 실패했어요");
+    } finally {
+      setEqLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchInspections();
+  }, [fetchInspections]);
+  useEffect(() => {
+    fetchDefects();
+    fetchEquipments();
+  }, []);
+
+  /* ───── 클라이언트 필터 ───── */
+  const filteredDefects = defKeyword.trim()
+    ? defects.filter(
+        (r) =>
+          (r.defect_name || "").toLowerCase().includes(defKeyword.toLowerCase()) ||
+          (r.defect_type || "").toLowerCase().includes(defKeyword.toLowerCase()),
+      )
+    : defects;
+
+  const filteredEquipments = eqKeyword.trim()
+    ? equipments.filter(
+        (r) =>
+          (r.equipment_name || "").toLowerCase().includes(eqKeyword.toLowerCase()) ||
+          (r.model_name || "").toLowerCase().includes(eqKeyword.toLowerCase()),
+      )
+    : equipments;
+
+  /* ═══════════════════ 검사기준 CRUD ═══════════════════ */
+  const openInspCreate = async () => {
+    setInspForm({});
+    setInspEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setInspModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${INSPECTION_TABLE}/inspection_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+  const openInspEdit = (row: any) => {
+    setInspForm({ ...row });
+    setInspEditMode(true);
+    setInspModalOpen(true);
+  };
+  const saveInspection = async () => {
+    if (!numberingRuleId && !inspForm.inspection_code) {
+      toast.error("검사코드는 필수예요");
+      return;
+    }
+    if (!inspForm.inspection_type) {
+      toast.error("유형을 1개 이상 선택해주세요");
+      return;
+    }
+    if (!inspForm.inspection_criteria) {
+      toast.error("검사기준은 필수예요");
+      return;
+    }
+    if (!inspForm.inspection_item) {
+      toast.error("검사항목은 필수예요");
+      return;
+    }
+    if (!inspForm.judgment_criteria) {
+      toast.error("판단기준은 필수예요");
+      return;
+    }
+    setInspSaving(true);
+    try {
+      let finalCode = inspForm.inspection_code || "";
+      if (!inspEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setInspSaving(false);
+          return;
+        }
+      }
+      if (inspEditMode) {
+        await apiClient.put(`/table-management/tables/${INSPECTION_TABLE}/edit`, {
+          originalData: { id: inspForm.id },
+          updatedData: inspForm,
+        });
+        toast.success("검사기준을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          ...inspForm,
+          inspection_code: finalCode,
+        });
+        toast.success("검사기준을 등록했어요");
+      }
+      setInspModalOpen(false);
+      fetchInspections();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setInspSaving(false);
+    }
+  };
+  const deleteInspections = async () => {
+    if (inspChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("검사기준 삭제", {
+      description: `선택한 ${inspChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${INSPECTION_TABLE}/delete`, {
+        data: inspChecked.map((id) => ({ id })),
+      });
+      toast.success(`${inspChecked.length}건을 삭제했어요`);
+      setInspChecked([]);
+      fetchInspections();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ 불량관리 CRUD ═══════════════════ */
+  const openDefCreate = async () => {
+    setDefForm({});
+    setDefEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setDefModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DEFECT_TABLE}/defect_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+  const openDefEdit = (row: any) => {
+    setDefForm({ ...row });
+    setDefEditMode(true);
+    setDefModalOpen(true);
+  };
+  const saveDefect = async () => {
+    if (!numberingRuleId && !defForm.defect_code) {
+      toast.error("불량코드는 필수예요");
+      return;
+    }
+    if (!defForm.defect_type) {
+      toast.error("불량유형은 필수예요");
+      return;
+    }
+    if (!defForm.defect_name) {
+      toast.error("불량명은 필수예요");
+      return;
+    }
+    if (!defForm.severity) {
+      toast.error("심각도는 필수예요");
+      return;
+    }
+    if (!defForm.defect_content) {
+      toast.error("불량내용은 필수예요");
+      return;
+    }
+    if (!defForm.inspection_type) {
+      toast.error("검사유형을 1개 이상 선택해주세요");
+      return;
+    }
+    setDefSaving(true);
+    try {
+      let finalCode = defForm.defect_code || "";
+      if (!defEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setDefSaving(false);
+          return;
+        }
+      }
+      if (defEditMode) {
+        await apiClient.put(`/table-management/tables/${DEFECT_TABLE}/edit`, {
+          originalData: { id: defForm.id },
+          updatedData: defForm,
+        });
+        toast.success("불량유형을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${DEFECT_TABLE}/add`, { id: crypto.randomUUID(), ...defForm, defect_code: finalCode });
+        toast.success("불량유형을 등록했어요");
+      }
+      setDefModalOpen(false);
+      fetchDefects();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setDefSaving(false);
+    }
+  };
+  const deleteDefects = async () => {
+    if (defChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("불량유형 삭제", {
+      description: `선택한 ${defChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DEFECT_TABLE}/delete`, {
+        data: defChecked.map((id) => ({ id })),
+      });
+      toast.success(`${defChecked.length}건을 삭제했어요`);
+      setDefChecked([]);
+      fetchDefects();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ 검사장비 CRUD ═══════════════════ */
+  const openEqCreate = async () => {
+    setEqForm({
+      calibration_period: "12",
+      equipment_status: "NORMAL",
+    });
+    setEqEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setEqModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${EQUIPMENT_TABLE}/equipment_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      } else {
+        // 채번 규칙 없으면 기존 수동 채번 fallback
+        const maxNum =
+          equipments
+            .map((e: any) => e.equipment_code || "")
+            .filter((c: string) => /^EQP-\d+$/.test(c))
+            .map((c: string) => parseInt(c.replace("EQP-", ""), 10))
+            .sort((a: number, b: number) => b - a)[0] || 0;
+        setEqForm((p) => ({ ...p, equipment_code: `EQP-${String(maxNum + 1).padStart(3, "0")}` }));
+      }
+    } catch {
+      // 채번 규칙 조회 실패 시 기존 수동 채번 fallback
+      const maxNum =
+        equipments
+          .map((e: any) => e.equipment_code || "")
+          .filter((c: string) => /^EQP-\d+$/.test(c))
+          .map((c: string) => parseInt(c.replace("EQP-", ""), 10))
+          .sort((a: number, b: number) => b - a)[0] || 0;
+      setEqForm((p) => ({ ...p, equipment_code: `EQP-${String(maxNum + 1).padStart(3, "0")}` }));
+    }
+  };
+  const openEqEdit = (row: any) => {
+    setEqForm({ ...row });
+    setEqEditMode(true);
+    setEqModalOpen(true);
+  };
+  const saveEquipment = async () => {
+    if (!numberingRuleId && !eqForm.equipment_code) {
+      toast.error("장비코드는 필수예요");
+      return;
+    }
+    if (!eqForm.equipment_name) {
+      toast.error("장비명은 필수예요");
+      return;
+    }
+    if (!eqForm.equipment_type) {
+      toast.error("장비유형은 필수예요");
+      return;
+    }
+    setEqSaving(true);
+    try {
+      let finalCode = eqForm.equipment_code || "";
+      if (!eqEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setEqSaving(false);
+          return;
+        }
+      }
+      if (eqEditMode) {
+        await apiClient.put(`/table-management/tables/${EQUIPMENT_TABLE}/edit`, {
+          originalData: { id: eqForm.id },
+          updatedData: eqForm,
+        });
+        toast.success("검사장비를 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/add`, { id: crypto.randomUUID(), ...eqForm, equipment_code: finalCode });
+        toast.success("검사장비를 등록했어요");
+      }
+      setEqModalOpen(false);
+      fetchEquipments();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setEqSaving(false);
+    }
+  };
+  const deleteEquipments = async () => {
+    if (eqChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("검사장비 삭제", {
+      description: `선택한 ${eqChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${EQUIPMENT_TABLE}/delete`, {
+        data: eqChecked.map((id) => ({ id })),
+      });
+      toast.success(`${eqChecked.length}건을 삭제했어요`);
+      setEqChecked([]);
+      fetchEquipments();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="bg-card rounded-lg border">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <div className="border-b px-3">
+            <TabsList className="h-auto gap-0 bg-transparent p-0">
+              <TabsTrigger
+                value="inspection"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <ClipboardCheck className="mr-2 h-4 w-4" />
+                검사기준
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {inspCount}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="defect"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <AlertTriangle className="mr-2 h-4 w-4" />
+                불량관리
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {defCount}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="equipment"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <Wrench className="mr-2 h-4 w-4" />
+                검사장비
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {eqCount}
+                </Badge>
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* ──── 검사기준 탭 ──── */}
+          <TabsContent value="inspection" className="mt-0 p-3">
+            <div className="mb-3">
+              <DynamicSearchFilter
+                tableName={INSPECTION_TABLE}
+                filterId="c16-inspection"
+                onFilterChange={setSearchFilters}
+                externalFilterConfig={ts.filterConfig}
+                dataCount={inspCount}
+                extraActions={
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" onClick={openInspCreate}>
+                      <Plus className="mr-1 h-4 w-4" />
+                      등록
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        const sel = inspections.find((r) => inspChecked.includes(r.id));
+                        if (sel) openInspEdit(sel);
+                        else toast.error("수정할 항목을 선택해주세요");
+                      }}
+                    >
+                      <Pencil className="mr-1 h-4 w-4" />
+                      수정
+                    </Button>
+                    <Button size="sm" variant="destructive" onClick={deleteInspections}>
+                      <Trash2 className="mr-1 h-4 w-4" />
+                      삭제
+                    </Button>
+                    <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                      <Settings2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                }
+              />
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <EDataTable
+                columns={inspTableColumns}
+                data={ts.groupData(inspections)}
+                loading={inspLoading}
+                emptyMessage="등록된 검사기준이 없어요"
+                showCheckbox={true}
+                checkedIds={inspChecked}
+                onCheckedChange={setInspChecked}
+                onRowDoubleClick={(row) => openInspEdit(row)}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-inspection-main"
+              />
+            </div>
+          </TabsContent>
+
+          {/* ──── 불량관리 탭 ──── */}
+          <TabsContent value="defect" className="mt-0 p-3">
+            <div className="mb-3 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="text-muted-foreground absolute top-2 left-2.5 h-3.5 w-3.5" />
+                  <Input
+                    className="h-8 w-56 pl-8 text-sm"
+                    placeholder="불량명 검색..."
+                    value={defKeyword}
+                    onChange={(e) => setDefKeyword(e.target.value)}
+                  />
+                </div>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">
+                  {filteredDefects.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openDefCreate}>
+                  <Plus className="mr-1 h-4 w-4" />
+                  등록
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const sel = defects.find((r) => defChecked.includes(r.id));
+                    if (sel) openDefEdit(sel);
+                    else toast.error("수정할 항목을 선택해주세요");
+                  }}
+                >
+                  <Pencil className="mr-1 h-4 w-4" />
+                  수정
+                </Button>
+                <Button size="sm" variant="destructive" onClick={deleteDefects}>
+                  <Trash2 className="mr-1 h-4 w-4" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={filteredDefects.length > 0 && defChecked.length === filteredDefects.length}
+                        onCheckedChange={(v) => setDefChecked(v ? filteredDefects.map((r) => r.id) : [])}
+                      />
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량코드
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량내용
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      심각도
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      검사유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      적용대상
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      사용여부
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      등록일
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      관리자
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      비고
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {defLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={12} className="py-8 text-center">
+                        <Loader2 className="text-muted-foreground mx-auto h-5 w-5 animate-spin" />
+                      </TableCell>
+                    </TableRow>
+                  ) : filteredDefects.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={12} className="text-muted-foreground py-10 text-center">
+                        <Inbox className="mx-auto mb-2 h-8 w-8 opacity-40" />
+                        <p className="text-sm">등록된 불량유형이 없어요</p>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredDefects.map((row) => {
+                      const severityLabel = getCatLabel(DEFECT_TABLE, "severity", row.severity);
+                      const severityColor =
+                        severityLabel === "치명적"
+                          ? "destructive"
+                          : severityLabel === "심각"
+                            ? "destructive"
+                            : severityLabel === "보통"
+                              ? "secondary"
+                              : "outline";
+                      return (
+                        <TableRow
+                          key={row.id}
+                          className={cn("cursor-pointer", defChecked.includes(row.id) && "bg-primary/5")}
+                          onClick={() =>
+                            setDefChecked((prev) =>
+                              prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id],
+                            )
+                          }
+                          onDoubleClick={() => openDefEdit(row)}
+                        >
+                          <TableCell onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                              checked={defChecked.includes(row.id)}
+                              onCheckedChange={(v) =>
+                                setDefChecked((prev) => (v ? [...prev, row.id] : prev.filter((id) => id !== row.id)))
+                              }
+                            />
+                          </TableCell>
+                          <TableCell className="font-semibold">{row.defect_code || "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant="secondary" className="text-[10px]">
+                              {getCatLabel(DEFECT_TABLE, "defect_type", row.defect_type)}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>{row.defect_name || "-"}</TableCell>
+                          <TableCell className="text-muted-foreground max-w-[200px] truncate">
+                            {row.defect_content || "-"}
+                          </TableCell>
+                          <TableCell>
+                            <Badge variant={severityColor as any} className="text-[10px]">
+                              {severityLabel || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-wrap gap-1">
+                              {row.inspection_type
+                                ? row.inspection_type
+                                    .split(",")
+                                    .filter(Boolean)
+                                    .map((c: string) => (
+                                      <Badge key={c} variant="outline" className="text-[10px]">
+                                        {getCatLabel(DEFECT_TABLE, "inspection_type", c)}
+                                      </Badge>
+                                    ))
+                                : "-"}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-wrap gap-1">
+                              {row.apply_target
+                                ? row.apply_target
+                                    .split(",")
+                                    .filter(Boolean)
+                                    .map((t: string) => (
+                                      <Badge key={t} variant="outline" className="text-[10px]">
+                                        {t}
+                                      </Badge>
+                                    ))
+                                : "-"}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <Badge
+                              variant={
+                                getCatLabel(DEFECT_TABLE, "is_active", row.is_active) === "사용"
+                                  ? "default"
+                                  : "secondary"
+                              }
+                              className="text-[10px]"
+                            >
+                              {getCatLabel(DEFECT_TABLE, "is_active", row.is_active) || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-muted-foreground">
+                            {row.reg_date || (row.created_date ? row.created_date.slice(0, 10) : "-")}
+                          </TableCell>
+                          <TableCell>{row.manager_id || "-"}</TableCell>
+                          <TableCell className="text-muted-foreground">{row.remarks || "-"}</TableCell>
+                        </TableRow>
+                      );
+                    })
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+
+          {/* ──── 검사장비 탭 ──── */}
+          <TabsContent value="equipment" className="mt-0 p-3">
+            <div className="mb-3 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="text-muted-foreground absolute top-2 left-2.5 h-3.5 w-3.5" />
+                  <Input
+                    className="h-8 w-56 pl-8 text-sm"
+                    placeholder="장비명 검색..."
+                    value={eqKeyword}
+                    onChange={(e) => setEqKeyword(e.target.value)}
+                  />
+                </div>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">
+                  {filteredEquipments.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openEqCreate}>
+                  <Plus className="mr-1 h-4 w-4" />
+                  등록
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const sel = equipments.find((r) => eqChecked.includes(r.id));
+                    if (sel) openEqEdit(sel);
+                    else toast.error("수정할 항목을 선택해주세요");
+                  }}
+                >
+                  <Pencil className="mr-1 h-4 w-4" />
+                  수정
+                </Button>
+                <Button size="sm" variant="destructive" onClick={deleteEquipments}>
+                  <Trash2 className="mr-1 h-4 w-4" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={filteredEquipments.length > 0 && eqChecked.length === filteredEquipments.length}
+                        onCheckedChange={(v) => setEqChecked(v ? filteredEquipments.map((r) => r.id) : [])}
+                      />
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비코드
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      모델명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      제조사
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      설치장소
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      최근교정일
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      교정주기(개월)
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비상태
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      담당자
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {eqLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={11} className="py-8 text-center">
+                        <Loader2 className="text-muted-foreground mx-auto h-5 w-5 animate-spin" />
+                      </TableCell>
+                    </TableRow>
+                  ) : filteredEquipments.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={11} className="text-muted-foreground py-10 text-center">
+                        <Inbox className="mx-auto mb-2 h-8 w-8 opacity-40" />
+                        <p className="text-sm">등록된 검사장비가 없어요</p>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredEquipments.map((row) => {
+                      const statusLabel = getCatLabel(EQUIPMENT_TABLE, "equipment_status", row.equipment_status);
+                      const statusColor =
+                        statusLabel === "정상" ? "default" : statusLabel === "폐기" ? "destructive" : "secondary";
+                      return (
+                        <TableRow
+                          key={row.id}
+                          className={cn("cursor-pointer", eqChecked.includes(row.id) && "bg-primary/5")}
+                          onClick={() =>
+                            setEqChecked((prev) =>
+                              prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id],
+                            )
+                          }
+                          onDoubleClick={() => openEqEdit(row)}
+                        >
+                          <TableCell onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                              checked={eqChecked.includes(row.id)}
+                              onCheckedChange={(v) =>
+                                setEqChecked((prev) => (v ? [...prev, row.id] : prev.filter((id) => id !== row.id)))
+                              }
+                            />
+                          </TableCell>
+                          <TableCell className="text-primary font-semibold">{row.equipment_code || "-"}</TableCell>
+                          <TableCell>{row.equipment_name || "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant="secondary" className="text-[10px]">
+                              {getCatLabel(EQUIPMENT_TABLE, "equipment_type", row.equipment_type) || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>{row.model_name || "-"}</TableCell>
+                          <TableCell>{row.manufacturer || "-"}</TableCell>
+                          <TableCell>{row.installation_location || "-"}</TableCell>
+                          <TableCell>{row.last_calibration_date || "-"}</TableCell>
+                          <TableCell>{row.calibration_period ? `${row.calibration_period}개월` : "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant={statusColor as any} className="text-[10px]">
+                              {statusLabel || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>
+                            {userOptions.find((u) => u.code === row.manager_id)?.label || row.manager_id || "-"}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* ═══════════════════ 검사기준 모달 ═══════════════════ */}
+      <Dialog open={inspModalOpen} onOpenChange={setInspModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[640px]">
+          <DialogHeader>
+            <DialogTitle>{inspEditMode ? "검사기준 수정" : "검사기준 등록"}</DialogTitle>
+            <DialogDescription>검사기준 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            {/* 검사코드 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사코드 <span className="text-destructive">*</span>
+              </Label>
+              {!inspEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : inspEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={inspForm.inspection_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={inspForm.inspection_code || ""}
+                  onChange={(e) => setInspForm((p) => ({ ...p, inspection_code: e.target.value }))}
+                  placeholder="검사코드 입력"
+                />
+              )}
+            </div>
+            {/* 유형 (다중선택) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                유형 <span className="text-destructive">*</span> (다중선택)
+              </Label>
+              <div className="flex flex-wrap gap-3 pt-1">
+                {(catOptions[`${INSPECTION_TABLE}.inspection_type`] || []).map((o) => {
+                  const types: string[] = inspForm.inspection_type
+                    ? inspForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  const checked = types.includes(o.code);
+                  return (
+                    <div key={o.code} className="flex items-center gap-1.5">
+                      <Checkbox
+                        checked={checked}
+                        onCheckedChange={(v) => {
+                          const next = v ? [...types, o.code] : types.filter((t) => t !== o.code);
+                          setInspForm((p) => ({ ...p, inspection_type: next.join(",") }));
+                        }}
+                      />
+                      <Label className="cursor-pointer text-sm">{o.label}</Label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            {/* 검사기준 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사기준 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={inspForm.inspection_criteria || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, inspection_criteria: e.target.value }))}
+                placeholder="검사기준 입력"
+              />
+            </div>
+            {/* 기준상세 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">기준상세</Label>
+              <Input
+                className="h-9"
+                value={inspForm.criteria_detail || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, criteria_detail: e.target.value }))}
+                placeholder="기준상세 입력"
+              />
+            </div>
+            {/* 검사항목 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사항목 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={inspForm.inspection_item || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, inspection_item: e.target.value }))}
+                placeholder="검사항목 입력"
+              />
+            </div>
+            {/* 검사방법 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">검사방법</Label>
+              <Select
+                value={inspForm.inspection_method || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, inspection_method: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.inspection_method`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 판단기준 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                판단기준 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={inspForm.judgment_criteria || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, judgment_criteria: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.judgment_criteria`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 단위 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">단위</Label>
+              <Select
+                value={inspForm.unit || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, unit: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.unit`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 적용구분 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">적용구분</Label>
+              <Select
+                value={inspForm.apply_type || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, apply_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.apply_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">관리자</Label>
+              <Select
+                value={inspForm.manager || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, manager: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 비고 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                value={inspForm.remark || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, remark: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setInspModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveInspection} disabled={inspSaving}>
+              {inspSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 불량관리 모달 ═══════════════════ */}
+      <Dialog open={defModalOpen} onOpenChange={setDefModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[640px]">
+          <DialogHeader>
+            <DialogTitle>{defEditMode ? "불량유형 수정" : "불량유형 등록"}</DialogTitle>
+            <DialogDescription>불량유형 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            {/* 불량코드 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량코드 <span className="text-destructive">*</span>
+              </Label>
+              {!defEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : defEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={defForm.defect_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={defForm.defect_code || ""}
+                  onChange={(e) => setDefForm((p) => ({ ...p, defect_code: e.target.value }))}
+                  placeholder="불량코드 입력"
+                />
+              )}
+            </div>
+            {/* 불량유형 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={defForm.defect_type || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, defect_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.defect_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 불량명 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={defForm.defect_name || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, defect_name: e.target.value }))}
+                placeholder="불량명 입력"
+              />
+            </div>
+            {/* 심각도 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                심각도 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={defForm.severity || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, severity: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.severity`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 불량내용 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량내용 <span className="text-destructive">*</span>
+              </Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={defForm.defect_content || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, defect_content: e.target.value }))}
+                placeholder="불량 상세 내용 및 정의를 입력하세요"
+                rows={3}
+              />
+            </div>
+            {/* 검사유형 (다중선택) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사유형 <span className="text-destructive">*</span> (다중선택)
+              </Label>
+              <div className="flex flex-wrap gap-3 rounded-md border p-3">
+                {(catOptions[`${DEFECT_TABLE}.inspection_type`] || []).map((o) => {
+                  const types: string[] = defForm.inspection_type
+                    ? defForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  const checked = types.includes(o.code);
+                  return (
+                    <div key={o.code} className="flex items-center gap-1.5">
+                      <Checkbox
+                        checked={checked}
+                        onCheckedChange={(v) => {
+                          const next = v ? [...types, o.code] : types.filter((t) => t !== o.code);
+                          setDefForm((p) => ({ ...p, inspection_type: next.join(","), apply_target: "" }));
+                        }}
+                      />
+                      <Label className="cursor-pointer text-sm">{o.label}</Label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            {/* 적용대상 (다중선택, 검사유형별 동적) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">적용대상 (다중선택)</Label>
+              <div className="min-h-[60px] rounded-md border p-3">
+                {(() => {
+                  const selectedTypes = defForm.inspection_type
+                    ? defForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  if (selectedTypes.length === 0)
+                    return <p className="text-muted-foreground text-xs">검사유형을 먼저 선택하세요</p>;
+                  const typeTargetMap: Record<string, string[]> = {};
+                  const defInspOpts = catOptions[`${DEFECT_TABLE}.inspection_type`] || [];
+                  for (const code of selectedTypes) {
+                    const label = defInspOpts.find((o) => o.code === code)?.label || "";
+                    if (label.includes("수입"))
+                      typeTargetMap[label] = ["구매입고", "외주입고", "반품입고", "무상입고", "기타입고"];
+                    else if (label.includes("공정"))
+                      typeTargetMap[label] = ["가공", "조립", "도장", "열처리", "표면처리", "용접"];
+                    else if (label.includes("출하"))
+                      typeTargetMap[label] = ["국내출하", "수출출하", "반품출하", "샘플출하"];
+                    else if (label.includes("최종")) typeTargetMap[label] = ["완제품", "반제품", "부품"];
+                  }
+                  const targets: string[] = defForm.apply_target ? defForm.apply_target.split(",").filter(Boolean) : [];
+                  return Object.entries(typeTargetMap).map(([typeName, opts]) => (
+                    <div key={typeName} className="mb-2 last:mb-0">
+                      <p className="mb-2 border-b pb-1 text-xs font-semibold">{typeName}</p>
+                      <div className="flex flex-wrap gap-3">
+                        {opts.map((t) => (
+                          <div key={t} className="flex items-center gap-1.5">
+                            <Checkbox
+                              checked={targets.includes(t)}
+                              onCheckedChange={(v) => {
+                                const next = v ? [...targets, t] : targets.filter((x) => x !== t);
+                                setDefForm((p) => ({ ...p, apply_target: next.join(",") }));
+                              }}
+                            />
+                            <Label className="cursor-pointer text-sm">{t}</Label>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ));
+                })()}
+              </div>
+            </div>
+            {/* 사용여부 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">사용여부</Label>
+              <Select
+                value={defForm.is_active || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.is_active`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">관리자</Label>
+              <Select
+                value={defForm.manager_id || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, manager_id: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 비고 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={defForm.remarks || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, remarks: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDefModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveDefect} disabled={defSaving}>
+              {defSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 검사장비 모달 ═══════════════════ */}
+      <Dialog open={eqModalOpen} onOpenChange={setEqModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[720px]">
+          <DialogHeader>
+            <DialogTitle>{eqEditMode ? "장비 수정" : "장비 등록"}</DialogTitle>
+            <DialogDescription>검사장비 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-3 gap-4">
+            {/* Row 1: 장비코드, 장비명, 장비유형 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비코드 <span className="text-destructive">*</span>
+              </Label>
+              {!eqEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : eqEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={eqForm.equipment_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={eqForm.equipment_code || ""}
+                  onChange={(e) => setEqForm((p) => ({ ...p, equipment_code: e.target.value }))}
+                  placeholder="장비코드"
+                />
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={eqForm.equipment_name || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, equipment_name: e.target.value }))}
+                placeholder="장비명 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={eqForm.equipment_type || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, equipment_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="장비유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">장비유형 선택</SelectItem>
+                  {(catOptions[`${EQUIPMENT_TABLE}.equipment_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* Row 2: 모델명, 제조사, 시리얼번호 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">모델명</Label>
+              <Input
+                className="h-9"
+                value={eqForm.model_name || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, model_name: e.target.value }))}
+                placeholder="모델명 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">제조사</Label>
+              <Input
+                className="h-9"
+                value={eqForm.manufacturer || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, manufacturer: e.target.value }))}
+                placeholder="제조사 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">시리얼번호</Label>
+              <Input
+                className="h-9"
+                value={eqForm.serial_number || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, serial_number: e.target.value }))}
+                placeholder="시리얼번호 입력"
+              />
+            </div>
+            {/* Row 3: 설치장소, 최근교정일, 교정주기 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">설치장소</Label>
+              <Input
+                className="h-9"
+                value={eqForm.installation_location || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, installation_location: e.target.value }))}
+                placeholder="설치장소 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">최근교정일</Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={eqForm.last_calibration_date || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, last_calibration_date: e.target.value }))}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">교정주기 (개월)</Label>
+              <Input
+                type="number"
+                className="h-9"
+                value={eqForm.calibration_period || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, calibration_period: e.target.value }))}
+                placeholder="12"
+              />
+            </div>
+            {/* Row 4: 장비상태, 담당자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">장비상태</Label>
+              <Select
+                value={eqForm.equipment_status || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, equipment_status: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="장비상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">장비상태 선택</SelectItem>
+                  {(catOptions[`${EQUIPMENT_TABLE}.equipment_status`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">담당자</Label>
+              <Select
+                value={eqForm.manager_id || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, manager_id: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="담당자 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">담당자 선택</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div />
+            {/* Row 5: 비고 (full width) */}
+            <div className="col-span-3 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={eqForm.remarks || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, remarks: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEqModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveEquipment} disabled={eqSaving}>
+              {eqSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/quality/item-inspection/page.tsx b/frontend/app/(main)/COMPANY_10/quality/item-inspection/page.tsx
new file mode 100644
index 00000000..2c0e1338
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/quality/item-inspection/page.tsx
@@ -0,0 +1,733 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, Pencil, Inbox, Settings2, Search, ChevronDown,
+} from "lucide-react";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const TABLE_NAME = "item_inspection_info";
+
+const GRID_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "inspection_type", label: "검사유형" },
+  { key: "item_count", label: "항목수" },
+  { key: "is_active", label: "사용여부" },
+];
+const ITEM_TABLE = "item_info";
+const INSPECTION_TABLE = "inspection_standard";
+
+const INSPECTION_TYPES = [
+  { key: "incoming_inspection", label: "수입검사", matchLabels: ["수입검사", "입고검사", "수입", "입고"] },
+  { key: "outgoing_inspection", label: "출하검사", matchLabels: ["출하검사", "출고검사", "출하", "출고"] },
+  { key: "process_inspection", label: "공정검사", matchLabels: ["공정검사", "공정"] },
+  { key: "final_inspection", label: "최종검사", matchLabels: ["최종검사", "최종", "완제품검사"] },
+] as const;
+
+type InspectionRow = {
+  id: string;
+  inspection_standard_id: string;
+  inspection_detail: string;
+  inspection_method: string;
+  apply_process: string;
+  acceptance_criteria: string;
+  is_required: boolean;
+};
+
+export default function ItemInspectionInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-item-inspection", TABLE_NAME, GRID_COLUMNS);
+
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [form, setForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  /* FK 옵션 */
+  const [itemOptions, setItemOptions] = useState<{ code: string; name: string; item_type: string; unit: string }[]>([]);
+  const [inspOptions, setInspOptions] = useState<{ code: string; label: string; detail: string; method: string; types: string[] }[]>([]);
+  const [inspTypeCatOptions, setInspTypeCatOptions] = useState<{ code: string; label: string }[]>([]);
+  const [userOptions, setUserOptions] = useState<{ code: string; label: string }[]>([]);
+
+  /* 검사유형별 검사항목 rows */
+  const [inspectionRows, setInspectionRows] = useState<Record<string, InspectionRow[]>>({});
+  const [collapsedTypes, setCollapsedTypes] = useState<Record<string, boolean>>({});
+
+  /* 품목 선택 모달 */
+  const [itemModalOpen, setItemModalOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [filteredItems, setFilteredItems] = useState<typeof itemOptions>([]);
+
+  /* ═══════════════════ FK 옵션 로드 ═══════════════════ */
+  useEffect(() => {
+    const loadOptions = async () => {
+      try {
+        const [itemRes, inspRes, userRes] = await Promise.all([
+          apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, { page: 1, size: 500, autoFilter: true }),
+          apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, { page: 1, size: 500, autoFilter: true }),
+          apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true }),
+        ]);
+        const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+        setItemOptions(items.map((r: any) => ({
+          code: r.item_number || r.item_code || "",
+          name: r.item_name || "",
+          item_type: r.type || r.item_type || "",
+          unit: r.unit || "",
+        })));
+
+        const insps = inspRes.data?.data?.data || inspRes.data?.data?.rows || [];
+        setInspOptions(insps.map((r: any) => ({
+          code: r.id,
+          label: r.inspection_criteria || r.inspection_standard || r.id,
+          detail: r.inspection_item || r.inspection_criteria || "",
+          method: r.inspection_method || "",
+          types: r.inspection_type ? r.inspection_type.split(",").filter(Boolean) : [],
+        })));
+
+        // 검사유형 카테고리 값 로드 (코드→라벨 매핑용)
+        try {
+          const catRes = await apiClient.get(`/table-categories/${INSPECTION_TABLE}/inspection_type/values`);
+          const flatCats: { code: string; label: string }[] = [];
+          const flatten = (arr: any[]) => { for (const v of arr) { flatCats.push({ code: v.valueCode, label: v.valueLabel }); if (v.children?.length) flatten(v.children); } };
+          if (catRes.data?.data?.length) flatten(catRes.data.data);
+          setInspTypeCatOptions(flatCats);
+        } catch { /* skip */ }
+
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        setUserOptions(users.map((u: any) => ({
+          code: u.user_id || u.id,
+          label: `${u.user_name || u.name || u.user_id}${u.dept_name ? ` (${u.dept_name})` : ""}`,
+        })));
+      } catch { /* skip */ }
+    };
+    loadOptions();
+  }, []);
+
+  /* ═══════════════════ 품목 선택 모달 ═══════════════════ */
+  const openItemModal = () => {
+    setItemSearchKeyword("");
+    setFilteredItems(itemOptions);
+    setItemModalOpen(true);
+  };
+
+  const handleItemSearch = () => {
+    const kw = itemSearchKeyword.trim().toLowerCase();
+    if (!kw) { setFilteredItems(itemOptions); return; }
+    setFilteredItems(itemOptions.filter(o =>
+      o.code.toLowerCase().includes(kw) || o.name.toLowerCase().includes(kw)
+    ));
+  };
+
+  const selectItem = (item: typeof itemOptions[0]) => {
+    setForm(p => ({ ...p, item_code: item.code, item_name: item.name }));
+    setItemModalOpen(false);
+  };
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setData(rows);
+      setTotalCount(rows.length);
+    } catch {
+      toast.error("품목검사정보 조회에 실패했어요");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => { fetchData(); }, [fetchData]);
+
+  // item_code별 그룹핑
+  const groupedData = useMemo(() => {
+    const map: Record<string, { item_code: string; item_name: string; is_active: string; types: string[]; rows: any[] }> = {};
+    for (const row of data) {
+      const key = row.item_code || row.id;
+      if (!map[key]) {
+        map[key] = { item_code: row.item_code, item_name: row.item_name, is_active: row.is_active || "", types: [], rows: [] };
+      }
+      map[key].rows.push(row);
+      if (row.inspection_type && !map[key].types.includes(row.inspection_type)) {
+        map[key].types.push(row.inspection_type);
+      }
+    }
+    return Object.values(map);
+  }, [data]);
+
+  // 검사기준 ID → 라벨 resolve
+  const resolveInspLabel = useCallback((id: string) => {
+    const opt = inspOptions.find(o => o.code === id);
+    return opt?.label || id || "-";
+  }, [inspOptions]);
+
+  /* ═══════════════════ CRUD ═══════════════════ */
+  const openCreate = () => { setForm({}); setEditMode(false); setInspectionRows({}); setCollapsedTypes({}); setModalOpen(true); };
+  const openEdit = async (row: any) => {
+    setForm({ ...row });
+    setEditMode(true);
+    setCollapsedTypes({});
+
+    // 같은 item_code의 모든 검사항목 행을 조회하여 유형별로 분류
+    try {
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_code", operator: "equals", value: row.item_code }] },
+        autoFilter: true,
+      });
+      const allRows = res.data?.data?.data || res.data?.data?.rows || [];
+      const rowMap: Record<string, InspectionRow[]> = {};
+      const typeFlags: Record<string, boolean> = {};
+
+      for (const r of allRows) {
+        const inspType = r.inspection_type || "";
+        // 카테고리 코드/라벨로 INSPECTION_TYPES 키 매칭
+        const matched = INSPECTION_TYPES.find(t =>
+          t.matchLabels.some(ml => inspType.includes(ml)) ||
+          inspTypeCatOptions.some(cat => inspType.includes(cat.code) && t.matchLabels.some(ml => cat.label.includes(ml)))
+        );
+        const typeKey = matched?.key || "";
+        if (!typeKey) continue;
+        typeFlags[typeKey] = true;
+        if (!rowMap[typeKey]) rowMap[typeKey] = [];
+        rowMap[typeKey].push({
+          id: r.id,
+          inspection_standard_id: r.inspection_standard_id || "",
+          inspection_detail: r.inspection_item_name || r.inspection_standard || "",
+          inspection_method: r.inspection_method || "",
+          apply_process: "",
+          acceptance_criteria: r.pass_criteria || "",
+          is_required: r.is_required === "true" || r.is_required === true,
+        });
+      }
+
+      setInspectionRows(rowMap);
+      setForm(p => ({ ...p, ...typeFlags }));
+    } catch {
+      setInspectionRows({});
+    }
+    setModalOpen(true);
+  };
+
+  /* ═══════════════════ 검사항목 행 관리 ═══════════════════ */
+  const addInspRow = (typeKey: string) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: [...(prev[typeKey] || []), {
+        id: crypto.randomUUID(),
+        inspection_standard_id: "",
+        inspection_detail: "",
+        inspection_method: "",
+        apply_process: "",
+        acceptance_criteria: "",
+        is_required: false,
+      }],
+    }));
+  };
+
+  const removeInspRow = (typeKey: string, rowId: string) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: (prev[typeKey] || []).filter(r => r.id !== rowId),
+    }));
+  };
+
+  const updateInspRow = (typeKey: string, rowId: string, field: string, value: any) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: (prev[typeKey] || []).map(r => {
+        if (r.id !== rowId) return r;
+        if (field === "inspection_standard_id") {
+          const opt = inspOptions.find(o => o.code === value);
+          return { ...r, inspection_standard_id: value, inspection_detail: opt?.detail || "", inspection_method: opt?.method || "" };
+        }
+        return { ...r, [field]: value };
+      }),
+    }));
+  };
+
+  /** 검사유형 키에 매칭되는 검사기준만 필터링 */
+  const getFilteredInspOptions = (typeKey: string) => {
+    const typeDef = INSPECTION_TYPES.find(t => t.key === typeKey);
+    if (!typeDef) return inspOptions;
+    // matchLabels와 카테고리 라벨을 비교하여 해당 카테고리 코드를 찾음
+    const matchCodes = inspTypeCatOptions
+      .filter(cat => typeDef.matchLabels.some(ml => cat.label.includes(ml)))
+      .map(cat => cat.code);
+    if (matchCodes.length === 0) return inspOptions;
+    return inspOptions.filter(opt => opt.types.some(t => matchCodes.includes(t)));
+  };
+
+  const toggleCollapse = (typeKey: string) => {
+    setCollapsedTypes(prev => ({ ...prev, [typeKey]: !prev[typeKey] }));
+  };
+
+  const handleSave = async () => {
+    if (!form.item_code) { toast.error("품목코드는 필수 입력이에요"); return; }
+    setSaving(true);
+    try {
+      // 기존 행 삭제 (수정 모드)
+      if (editMode) {
+        const existRes = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_code", operator: "equals", value: form.item_code }] },
+          autoFilter: true,
+        });
+        const existing = existRes.data?.data?.data || existRes.data?.data?.rows || [];
+        if (existing.length > 0) {
+          await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+            data: existing.map((r: any) => ({ id: r.id })),
+          });
+        }
+      }
+
+      // 검사유형별 항목을 개별 행으로 INSERT
+      const enabledTypes = INSPECTION_TYPES.filter(t => !!form[t.key]);
+      const rows: any[] = [];
+      for (const t of enabledTypes) {
+        const typeLabel = t.label;
+        const typeRows = inspectionRows[t.key] || [];
+        if (typeRows.length === 0) {
+          // 유형만 체크하고 항목 없는 경우에도 1행 생성
+          rows.push({
+            id: crypto.randomUUID(),
+            item_code: form.item_code,
+            item_name: form.item_name,
+            inspection_type: typeLabel,
+            is_active: form.is_active || "사용",
+            manager_id: form.manager_id || "",
+            memo: form.remarks || "",
+          });
+        } else {
+          for (const r of typeRows) {
+            rows.push({
+              id: crypto.randomUUID(),
+              item_code: form.item_code,
+              item_name: form.item_name,
+              inspection_type: typeLabel,
+              inspection_standard_id: r.inspection_standard_id || "",
+              inspection_item_name: r.inspection_detail || "",
+              inspection_method: r.inspection_method || "",
+              pass_criteria: r.acceptance_criteria || "",
+              is_required: r.is_required ? "true" : "false",
+              is_active: form.is_active || "사용",
+              manager_id: form.manager_id || "",
+              memo: form.remarks || "",
+            });
+          }
+        }
+      }
+
+      for (const row of rows) {
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, row);
+      }
+
+      toast.success(editMode ? "품목검사정보를 수정했어요" : "품목검사정보를 등록했어요");
+      setModalOpen(false);
+      fetchData();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setSaving(false); }
+  };
+
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("품목검사정보 삭제", {
+      description: `선택한 ${checkedIds.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+        data: checkedIds.map(id => ({ id })),
+      });
+      toast.success(`${checkedIds.length}건을 삭제했어요`);
+      setCheckedIds([]);
+      fetchData();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="rounded-lg border bg-card">
+        <div className="px-3 py-2.5 border-b bg-muted/50">
+          <DynamicSearchFilter
+            tableName={TABLE_NAME}
+            filterId="c16-item-inspection"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={ts.filterConfig}
+            dataCount={totalCount}
+            extraActions={
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = data.find(r => checkedIds.includes(r.id));
+                  if (sel) {
+                    const group = groupedData.find(g => g.item_code === sel.item_code);
+                    openEdit(group?.rows[0] || sel);
+                  } else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={handleDelete}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+            }
+          />
+        </div>
+        <div className="p-3 overflow-auto">
+          {loading ? (
+            <div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
+          ) : groupedData.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+              <Inbox className="h-10 w-10 mb-2 opacity-30" />
+              <p className="text-sm">등록된 품목검사정보가 없어요</p>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted">
+                  <TableHead className="w-10" />
+                  <TableHead className="w-10"><Checkbox checked={groupedData.length > 0 && checkedIds.length === data.length} onCheckedChange={(v) => setCheckedIds(v ? data.map(r => r.id) : [])} /></TableHead>
+                  {ts.visibleColumns.map((col) => (
+                    <TableHead key={col.key} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground" style={ts.thStyle(col.key)}>
+                      {col.label}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {ts.groupData(groupedData).map((group) => {
+                  if ((group as any)._isGroupSummary || (group as any)._isGroupHeader) return null;
+                  const isExpanded = expandedItems.has(group.item_code);
+                  const groupIds = group.rows.map((r: any) => r.id);
+                  const allChecked = groupIds.every((id: string) => checkedIds.includes(id));
+                  const renderCell = (key: string) => {
+                    switch (key) {
+                      case "item_code": return <TableCell key={key} className="text-sm font-medium text-primary">{group.item_code}</TableCell>;
+                      case "item_name": return <TableCell key={key} className="text-sm">{group.item_name}</TableCell>;
+                      case "inspection_type": return (
+                        <TableCell key={key}>
+                          <div className="flex gap-1 flex-wrap">
+                            {group.types.map((t: string) => <Badge key={t} variant="secondary" className="text-[10px]">{t}</Badge>)}
+                          </div>
+                        </TableCell>
+                      );
+                      case "item_count": return <TableCell key={key} className="text-sm text-center">{group.rows.filter((r: any) => r.inspection_standard_id).length}</TableCell>;
+                      case "is_active": return (
+                        <TableCell key={key}>
+                          <Badge variant={group.is_active === "사용" || group.is_active === "true" ? "default" : "secondary"} className="text-[10px]">
+                            {group.is_active === "사용" || group.is_active === "true" ? "사용" : "미사용"}
+                          </Badge>
+                        </TableCell>
+                      );
+                      default: return <TableCell key={key}>{(group as any)[key] ?? ""}</TableCell>;
+                    }
+                  };
+                  return (
+                    <React.Fragment key={group.item_code}>
+                      <TableRow
+                        className={cn("cursor-pointer border-l-2 border-l-transparent", allChecked && "border-l-primary bg-primary/5")}
+                        onClick={() => setExpandedItems(prev => { const next = new Set(prev); if (next.has(group.item_code)) next.delete(group.item_code); else next.add(group.item_code); return next; })}
+                        onDoubleClick={() => openEdit(group.rows[0])}
+                      >
+                        <TableCell className="text-center p-2">
+                          <ChevronDown className={cn("w-4 h-4 transition-transform text-muted-foreground", !isExpanded && "-rotate-90")} />
+                        </TableCell>
+                        <TableCell className="text-center p-2" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => allChecked ? prev.filter(id => !groupIds.includes(id)) : [...new Set([...prev, ...groupIds])]); }}>
+                          <Checkbox checked={allChecked} onCheckedChange={() => {}} />
+                        </TableCell>
+                        {ts.visibleColumns.map((col) => renderCell(col.key))}
+                      </TableRow>
+                      {isExpanded && group.rows.filter((r: any) => r.inspection_standard_id).map((row: any) => (
+                        <TableRow key={row.id} className="bg-muted/30 text-xs">
+                          <TableCell />
+                          <TableCell />
+                          <TableCell className="pl-6 text-muted-foreground">{row.inspection_type}</TableCell>
+                          <TableCell>{resolveInspLabel(row.inspection_standard_id)}</TableCell>
+                          <TableCell>{row.inspection_item_name || "-"}</TableCell>
+                          <TableCell>{row.inspection_method || "-"}</TableCell>
+                          <TableCell>{row.pass_criteria || "-"}</TableCell>
+                        </TableRow>
+                      ))}
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+          <div className="mt-2 text-xs text-muted-foreground">전체 {groupedData.length}건 (품목 기준)</div>
+        </div>
+      </div>
+
+      {/* ═══════════════════ 등록/수정 모달 (품목선택 뷰 포함) ═══════════════════ */}
+      <Dialog open={modalOpen} onOpenChange={(open) => { if (!open) setItemModalOpen(false); setModalOpen(open); }}>
+        <DialogContent className={cn("max-w-[95vw] max-h-[85vh] overflow-y-auto", itemModalOpen ? "sm:max-w-xl" : "sm:max-w-4xl")}>
+          {itemModalOpen ? (
+            <>
+              <DialogHeader>
+                <DialogTitle>품목 선택</DialogTitle>
+                <DialogDescription>품목코드 또는 품목명으로 검색</DialogDescription>
+              </DialogHeader>
+              <div className="flex gap-2">
+                <Input
+                  className="h-9 flex-1"
+                  placeholder="품목코드 또는 품목명으로 검색"
+                  value={itemSearchKeyword}
+                  onChange={(e) => setItemSearchKeyword(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === "Enter") handleItemSearch(); }}
+                />
+                <Button size="sm" className="h-9" onClick={handleItemSearch}>
+                  <Search className="w-4 h-4 mr-1" />검색
+                </Button>
+              </div>
+              <div className="border rounded-lg overflow-auto max-h-[50vh]">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="text-[11px] font-bold">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold">품목명</TableHead>
+                      <TableHead className="text-[11px] font-bold">품목유형</TableHead>
+                      <TableHead className="text-[11px] font-bold">단위</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredItems.length === 0 ? (
+                      <TableRow><TableCell colSpan={4} className="text-center py-8 text-muted-foreground text-sm">검색 결과가 없어요</TableCell></TableRow>
+                    ) : filteredItems.map((item) => (
+                      <TableRow
+                        key={item.code}
+                        className="cursor-pointer hover:bg-primary/5"
+                        onClick={() => selectItem(item)}
+                      >
+                        <TableCell className="text-sm">{item.code}</TableCell>
+                        <TableCell className="text-sm">{item.name}</TableCell>
+                        <TableCell className="text-sm">{item.item_type}</TableCell>
+                        <TableCell className="text-sm">{item.unit}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setItemModalOpen(false)}>취소</Button>
+              </DialogFooter>
+            </>
+          ) : (
+            <>
+              <DialogHeader>
+                <DialogTitle>{editMode ? "품목검사정보 수정" : "품목검사정보 등록"}</DialogTitle>
+                <DialogDescription className="sr-only">품목검사정보를 등록합니다</DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4">
+                {/* 품목 정보 */}
+                <div className="space-y-3">
+                  <h4 className="text-sm font-semibold flex items-center gap-1.5">📦 품목 정보</h4>
+                  <div className="flex items-end gap-2">
+                    <div className="space-y-1.5 flex-1">
+                      <Label className="text-xs font-semibold text-muted-foreground">품목코드 <span className="text-destructive">*</span></Label>
+                      <Input className="h-9 bg-muted" value={form.item_code || ""} readOnly placeholder="품목코드" />
+                    </div>
+                    <div className="space-y-1.5 flex-1">
+                      <Label className="text-xs font-semibold text-muted-foreground">품목명 <span className="text-destructive">*</span></Label>
+                      <Input className="h-9 bg-muted" value={form.item_name || ""} readOnly placeholder="품목명" />
+                    </div>
+                    <Button type="button" variant="outline" size="sm" className="h-9 px-3 shrink-0" onClick={openItemModal}>
+                      <Search className="w-4 h-4 mr-1" />품목선택
+                    </Button>
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-1.5">
+                      <Label className="text-xs font-semibold text-muted-foreground">사용여부</Label>
+                      <Select value={form.is_active === false ? "N" : "Y"} onValueChange={(v) => setForm(p => ({ ...p, is_active: v === "Y" }))}>
+                        <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">사용</SelectItem>
+                          <SelectItem value="N">미사용</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-xs font-semibold text-muted-foreground">관리자</Label>
+                      <Select value={form.manager || ""} onValueChange={(v) => setForm(p => ({ ...p, manager: v }))}>
+                        <SelectTrigger className="h-9"><SelectValue placeholder="관리자 선택" /></SelectTrigger>
+                        <SelectContent>
+                          {userOptions.map(o => (
+                            <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold text-muted-foreground">비고</Label>
+                    <textarea
+                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                      value={form.remarks || ""}
+                      onChange={(e) => setForm(p => ({ ...p, remarks: e.target.value }))}
+                      placeholder="비고 사항"
+                    />
+                  </div>
+                </div>
+                {/* 검사유형 선택 */}
+                <div className="space-y-3">
+                  <h4 className="text-sm font-semibold flex items-center gap-1.5">✅ 검사유형 선택</h4>
+                  <div className="flex flex-wrap gap-4">
+                    {INSPECTION_TYPES.map(({ key, label }) => (
+                      <div key={key} className="flex items-center gap-1.5">
+                        <Checkbox
+                          checked={!!form[key]}
+                          onCheckedChange={(v) => setForm(p => ({ ...p, [key]: !!v }))}
+                        />
+                        <Label className="text-sm cursor-pointer">{label}</Label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                {/* 검사유형별 검사항목 설정 */}
+                {INSPECTION_TYPES.filter(t => !!form[t.key]).map(({ key, label }) => (
+                  <div key={key} className="space-y-2">
+                    <button
+                      type="button"
+                      className="w-full flex items-center gap-2 py-2 px-3 rounded-md border bg-muted/50 hover:bg-muted text-left"
+                      onClick={() => toggleCollapse(key)}
+                    >
+                      <Badge variant="default" className="text-xs">{label}</Badge>
+                      <span className="text-sm font-medium">검사항목 설정</span>
+                      <ChevronDown className={cn("w-4 h-4 ml-auto transition-transform", collapsedTypes[key] && "-rotate-90")} />
+                    </button>
+                    {!collapsedTypes[key] && (
+                      <div className="space-y-2 pl-1">
+                        <div className="flex items-center justify-between">
+                          <span className="text-xs font-semibold text-muted-foreground">검사항목 목록</span>
+                          <Button type="button" size="sm" variant="outline" className="h-7 text-xs" onClick={() => addInspRow(key)}>
+                            <Plus className="w-3 h-3 mr-1" />항목추가
+                          </Button>
+                        </div>
+                        <div className="border rounded-lg overflow-hidden">
+                          <Table>
+                            <TableHeader>
+                              <TableRow className="bg-muted/50 hover:bg-muted/50">
+                                <TableHead className="text-[10px] font-bold w-[170px]">검사기준 선택</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[130px]">검사기준 상세</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[90px]">검사방법</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[100px]">적용공정</TableHead>
+                                <TableHead className="text-[10px] font-bold">합격기준 (판단기준별)</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[40px]">필수</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[36px]" />
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                              {(!inspectionRows[key] || inspectionRows[key].length === 0) ? (
+                                <TableRow><TableCell colSpan={7} className="text-center py-4 text-xs text-muted-foreground">항목추가 버튼으로 검사항목을 추가하세요</TableCell></TableRow>
+                              ) : inspectionRows[key].map((row) => (
+                                <TableRow key={row.id}>
+                                  <TableCell className="p-1">
+                                    <Select value={row.inspection_standard_id || ""} onValueChange={(v) => updateInspRow(key, row.id, "inspection_standard_id", v)}>
+                                      <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="검사기준 선택" /></SelectTrigger>
+                                      <SelectContent>
+                                        {getFilteredInspOptions(key).map(o => (
+                                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input className="h-8 text-xs bg-muted" value={row.inspection_detail} readOnly placeholder="검사기준 상세" />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input className="h-8 text-xs bg-muted" value={row.inspection_method} readOnly placeholder="선택" />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Select value={row.apply_process || ""} onValueChange={(v) => updateInspRow(key, row.id, "apply_process", v)}>
+                                      <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="공정 선택" /></SelectTrigger>
+                                      <SelectContent>
+                                        <SelectItem value="incoming">입고</SelectItem>
+                                        <SelectItem value="process">공정</SelectItem>
+                                        <SelectItem value="outgoing">출고</SelectItem>
+                                        <SelectItem value="final">최종</SelectItem>
+                                      </SelectContent>
+                                    </Select>
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input
+                                      className="h-8 text-xs"
+                                      value={row.acceptance_criteria}
+                                      onChange={(e) => updateInspRow(key, row.id, "acceptance_criteria", e.target.value)}
+                                      placeholder={row.inspection_standard_id ? "합격기준 입력" : "검사기준을 먼저 선택하세요"}
+                                      disabled={!row.inspection_standard_id}
+                                    />
+                                  </TableCell>
+                                  <TableCell className="p-1 text-center">
+                                    <Checkbox checked={row.is_required} onCheckedChange={(v) => updateInspRow(key, row.id, "is_required", !!v)} />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Button type="button" variant="destructive" size="sm" className="h-7 w-7 p-0" onClick={() => removeInspRow(key, row.id)}>
+                                      <Trash2 className="w-3.5 h-3.5" />
+                                    </Button>
+                                  </TableCell>
+                                </TableRow>
+                              ))}
+                            </TableBody>
+                          </Table>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setModalOpen(false)}>취소</Button>
+                <Button onClick={handleSave} disabled={saving}>
+                  {saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+                  저장
+                </Button>
+              </DialogFooter>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/sales/claim/page.tsx b/frontend/app/(main)/COMPANY_10/sales/claim/page.tsx
index 86ba092d..a2c89599 100644
--- a/frontend/app/(main)/COMPANY_10/sales/claim/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/sales/claim/page.tsx
@@ -10,14 +10,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -39,11 +31,26 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import {
   Download,
   Plus,
   Save,
-  BarChart3,
   ClipboardList,
   Inbox,
   Check,
@@ -51,21 +58,36 @@ import {
   Loader2,
   FileSpreadsheet,
   Trash2,
+  Pencil,
+  FileText,
+  Wrench,
+  Settings2,
 } from "lucide-react";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 
 // --- 상수 ---
 const TABLE_NAME = "claim_mng";
 
+const GRID_COLUMNS = [
+  { key: "claim_no", label: "클레임번호" },
+  { key: "claim_date", label: "접수일자" },
+  { key: "claim_type", label: "유형" },
+  { key: "claim_status", label: "상태" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "manager_name", label: "담당자" },
+  { key: "claim_content", label: "클레임 내용" },
+];
+
 type ClaimType = "불량" | "교환" | "반품" | "배송지연" | "기타";
 type ClaimStatus = "접수" | "처리중" | "완료" | "취소";
 
@@ -99,35 +121,25 @@ interface SalesOrderOption {
   status: string;
 }
 
-const getClaimTypeStyle = (type: string) => {
-  switch (type) {
-    case "불량":
-      return "bg-rose-100 text-rose-800 border-rose-200";
-    case "교환":
-      return "bg-amber-100 text-amber-800 border-amber-200";
-    case "반품":
-      return "bg-blue-100 text-blue-800 border-blue-200";
-    case "배송지연":
-      return "bg-indigo-100 text-indigo-800 border-indigo-200";
-    case "기타":
-      return "bg-gray-100 text-gray-800 border-gray-200";
-    default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+// Badge variant 매핑 (CSS 변수 기반)
+const getClaimStatusVariant = (status: string) => {
+  switch (status) {
+    case "접수": return "default" as const;
+    case "처리중": return "secondary" as const;
+    case "완료": return "outline" as const;
+    case "취소": return "destructive" as const;
+    default: return "secondary" as const;
   }
 };
 
-const getClaimStatusStyle = (status: string) => {
-  switch (status) {
-    case "접수":
-      return "bg-blue-100 text-blue-800 border-blue-200";
-    case "처리중":
-      return "bg-amber-100 text-amber-800 border-amber-200";
-    case "완료":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
-    case "취소":
-      return "bg-rose-100 text-rose-800 border-rose-200";
-    default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+const getClaimTypeVariant = (type: string) => {
+  switch (type) {
+    case "불량": return "destructive" as const;
+    case "교환": return "warning" as const;
+    case "반품": return "default" as const;
+    case "배송지연": return "secondary" as const;
+    case "기타": return "outline" as const;
+    default: return "outline" as const;
   }
 };
 
@@ -135,15 +147,16 @@ const CLAIM_TYPES: ClaimType[] = ["불량", "교환", "반품", "배송지연",
 const CLAIM_STATUSES: ClaimStatus[] = ["접수", "처리중", "완료", "취소"];
 
 export default function ClaimManagementPage() {
-  const { user } = useAuth();
+  useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-claim", TABLE_NAME, GRID_COLUMNS);
 
   const [data, setData] = useState<ClaimRow[]>([]);
   const [loading, setLoading] = useState(false);
   const [totalCount, setTotalCount] = useState(0);
   const [selectedClaimNo, setSelectedClaimNo] = useState<string | null>(null);
 
-  // 검색 필터 (DynamicSearchFilter)
+  // 검색 필터 (DynamicSearchFilter에서 관리)
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 엑셀 업로드
@@ -165,11 +178,11 @@ export default function ClaimManagementPage() {
   const [customersLoading, setCustomersLoading] = useState(false);
   const [ordersLoading, setOrdersLoading] = useState(false);
 
-  // --- 데이터 조회 (table-management API + autoFilter로 멀티테넌시 자동 적용) ---
+  // --- 데이터 조회 (서버사이드 필터 + autoFilter 멀티테넌시) ---
   const fetchData = useCallback(async () => {
     setLoading(true);
     try {
-      const filters: any[] = searchFilters.map((f) => ({
+      const filters = searchFilters.map(f => ({
         columnName: f.columnName,
         operator: f.operator,
         value: f.value,
@@ -179,15 +192,14 @@ export default function ClaimManagementPage() {
         page: 1,
         size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
-        autoFilter: true, // company_code 자동 필터링
+        autoFilter: true,
         sort: { columnName: "claim_date", order: "desc" },
       });
 
       const rows: ClaimRow[] = res.data?.data?.data || res.data?.data?.rows || [];
       setData(rows);
       setTotalCount(res.data?.data?.total || rows.length);
-    } catch (err) {
-      console.error("클레임 조회 실패:", err);
+    } catch {
       toast.error("클레임 목록을 불러오는데 실패했습니다.");
     } finally {
       setLoading(false);
@@ -198,6 +210,7 @@ export default function ClaimManagementPage() {
     fetchData();
   }, [fetchData]);
 
+
   // 거래처 목록 조회 (autoFilter로 멀티테넌시 적용)
   const fetchCustomers = useCallback(async (force = false) => {
     if (!force && customers.length > 0) return;
@@ -206,7 +219,7 @@ export default function ClaimManagementPage() {
       const res = await apiClient.post("/table-management/tables/customer_mng/data", {
         page: 1,
         size: 9999,
-        autoFilter: { enabled: true },
+        autoFilter: true,
       });
       const rows = res.data?.data?.data || res.data?.data?.rows;
       if (res.data?.success && Array.isArray(rows)) {
@@ -216,8 +229,8 @@ export default function ClaimManagementPage() {
         }));
         setCustomers(list);
       }
-    } catch (e) {
-      console.error("거래처 목록 조회 실패:", e);
+    } catch {
+      /* skip */
     } finally {
       setCustomersLoading(false);
     }
@@ -231,7 +244,7 @@ export default function ClaimManagementPage() {
       const res = await apiClient.post("/table-management/tables/sales_order_mng/data", {
         page: 1,
         size: 9999,
-        autoFilter: { enabled: true },
+        autoFilter: true,
       });
       const rows = res.data?.data?.data || res.data?.data?.rows;
       if (res.data?.success && Array.isArray(rows)) {
@@ -249,8 +262,8 @@ export default function ClaimManagementPage() {
         }
         setSalesOrders(list);
       }
-    } catch (e) {
-      console.error("수주 목록 조회 실패:", e);
+    } catch {
+      /* skip */
     } finally {
       setOrdersLoading(false);
     }
@@ -325,27 +338,24 @@ export default function ClaimManagementPage() {
 
     setSaving(true);
     try {
-      // company_code, writer, created_date 등 시스템 필드는 제외 (백엔드가 자동 주입)
       const { id, company_code, writer, created_date, updated_date, created_by, updated_by, ...saveFields } = formData as any;
 
       if (isEditMode && id) {
-        // 수정
         await apiClient.put(`/table-management/tables/${TABLE_NAME}/edit`, {
           originalData: { id },
           updatedData: saveFields,
         });
-        toast.success("클레임이 수정되었습니다.");
+        toast.success("클레임이 수정되었어요.");
       } else {
-        // 등록
         await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, saveFields);
-        toast.success("클레임이 등록되었습니다.");
+        toast.success("클레임이 등록되었어요.");
       }
 
       setIsModalOpen(false);
-      fetchData(); // 목록 새로고침
+      fetchData();
     } catch (err: any) {
       console.error("클레임 저장 실패:", err);
-      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
     } finally {
       setSaving(false);
     }
@@ -366,19 +376,19 @@ export default function ClaimManagementPage() {
       await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
         data: [{ id: claim.id }],
       });
-      toast.success("클레임이 삭제되었습니다.");
+      toast.success("클레임이 삭제되었어요.");
       if (selectedClaimNo === claimNo) setSelectedClaimNo(null);
       fetchData();
     } catch (err: any) {
       console.error("클레임 삭제 실패:", err);
-      toast.error(err.response?.data?.message || "삭제에 실패했습니다.");
+      toast.error(err.response?.data?.message || "삭제에 실패했어요.");
     }
   };
 
   // 엑셀 다운로드
   const handleExcelDownload = async () => {
     if (data.length === 0) {
-      toast.error("다운로드할 데이터가 없습니다.");
+      toast.error("다운로드할 데이터가 없어요.");
       return;
     }
     try {
@@ -398,7 +408,7 @@ export default function ClaimManagementPage() {
       toast.success("엑셀 다운로드 완료");
     } catch (err) {
       console.error("엑셀 다운로드 실패:", err);
-      toast.error("엑셀 다운로드에 실패했습니다.");
+      toast.error("엑셀 다운로드에 실패했어요.");
     }
   };
 
@@ -407,306 +417,211 @@ export default function ClaimManagementPage() {
     [data, selectedClaimNo]
   );
 
-  const statCards: {
-    label: string;
-    value: number;
-    gradient: string;
-    textColor: string;
-  }[] = [
-    {
-      label: "접수",
-      value: statusCounts["접수"],
-      gradient: "from-indigo-500 to-purple-600",
-      textColor: "text-white",
-    },
-    {
-      label: "처리중",
-      value: statusCounts["처리중"],
-      gradient: "from-amber-400 to-orange-500",
-      textColor: "text-white",
-    },
-    {
-      label: "완료",
-      value: statusCounts["완료"],
-      gradient: "from-cyan-400 to-blue-500",
-      textColor: "text-white",
-    },
-    {
-      label: "취소",
-      value: statusCounts["취소"],
-      gradient: "from-slate-300 to-slate-400",
-      textColor: "text-slate-800",
-    },
-  ];
-
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4">
-      {/* 검색 섹션 — DynamicSearchFilter 사용 */}
+    <div className="flex flex-col h-[calc(100vh-4rem)] overflow-hidden">
+      {/* 검색 필터 (DynamicSearchFilter) */}
       <DynamicSearchFilter
         tableName={TABLE_NAME}
-        filterId="sales-claim"
+        filterId="c16-claim"
         onFilterChange={setSearchFilters}
-        dataCount={totalCount}
+        dataCount={data.length}
+        externalFilterConfig={ts.filterConfig}
       />
 
-      {/* 메인 분할 레이아웃 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
-        <ResizablePanelGroup direction="horizontal">
-          {/* 왼쪽: 클레임 목록 */}
+      {/* ───── 메인 분할 레이아웃 ───── */}
+      <div className="flex-1 overflow-hidden">
+        <ResizablePanelGroup direction="horizontal" className="h-full">
+          {/* ── 좌측: 클레임 목록 (65%) ── */}
           <ResizablePanel defaultSize={65} minSize={35}>
-            <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2">
-                  <ClipboardList className="w-4 h-4" />
-                  클레임 목록
-                  <Badge variant="secondary" className="font-normal">
-                    {totalCount}건
-                  </Badge>
-                  {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
-                </div>
+            <div className="flex flex-col h-full bg-card">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
                 <div className="flex items-center gap-2">
+                  <ClipboardList className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-[13px] font-bold text-foreground">클레임 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {data.length}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <div className="flex items-center gap-1.5">
                   <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
-                    <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
+                    <FileSpreadsheet className="w-3.5 h-3.5" />
+                    업로드
                   </Button>
                   <Button variant="outline" size="sm" onClick={handleExcelDownload}>
-                    <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
+                    <Download className="w-3.5 h-3.5" />
+                    다운로드
                   </Button>
                   <Button size="sm" onClick={openRegisterModal}>
-                    <Plus className="w-4 h-4 mr-1.5" /> 클레임 등록
+                    <Plus className="w-3.5 h-3.5" />
+                    등록
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="h-4 w-4" />
                   </Button>
                 </div>
               </div>
 
-              <div className="flex-1 overflow-auto">
-                <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                    <TableRow>
-                      <TableHead className="w-[50px] text-center">No</TableHead>
-                      <TableHead className="w-[130px]">클레임번호</TableHead>
-                      <TableHead className="w-[110px]">접수일자</TableHead>
-                      <TableHead className="w-[90px] text-center">유형</TableHead>
-                      <TableHead className="w-[90px] text-center">상태</TableHead>
-                      <TableHead className="w-[150px]">거래처명</TableHead>
-                      <TableHead className="w-[100px]">담당자</TableHead>
-                      <TableHead className="w-[120px]">수주번호</TableHead>
-                      <TableHead>클레임 내용</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {data.length === 0 ? (
-                      <TableRow>
-                        <TableCell
-                          colSpan={9}
-                          className="h-32 text-center text-muted-foreground"
-                        >
-                          <div className="flex flex-col items-center gap-2">
-                            <Inbox className="w-8 h-8 text-muted-foreground/50" />
-                            <span>{loading ? "데이터를 불러오는 중..." : "등록된 클레임이 없습니다"}</span>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      data.map((claim, idx) => (
-                        <TableRow
-                          key={claim.id}
-                          className={cn(
-                            "cursor-pointer hover:bg-muted/50 transition-colors",
-                            selectedClaimNo === claim.claim_no && "bg-primary/5"
-                          )}
-                          onClick={() => handleRowClick(claim.claim_no)}
-                          onDoubleClick={() => openEditModal(claim.claim_no)}
-                        >
-                          <TableCell className="text-center text-muted-foreground">
-                            {idx + 1}
-                          </TableCell>
-                          <TableCell className="font-medium">
-                            {claim.claim_no}
-                          </TableCell>
-                          <TableCell>{claim.claim_date}</TableCell>
-                          <TableCell className="text-center">
-                            <span
-                              className={cn(
-                                "px-2 py-1 rounded-full text-[11px] font-medium border",
-                                getClaimTypeStyle(claim.claim_type)
-                              )}
-                            >
-                              {claim.claim_type}
-                            </span>
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <span
-                              className={cn(
-                                "px-2 py-1 rounded-full text-[11px] font-medium border",
-                                getClaimStatusStyle(claim.claim_status)
-                              )}
-                            >
-                              {claim.claim_status}
-                            </span>
-                          </TableCell>
-                          <TableCell>{claim.customer_name}</TableCell>
-                          <TableCell>{claim.manager_name || "-"}</TableCell>
-                          <TableCell className="text-muted-foreground text-xs">
-                            {claim.order_no || "-"}
-                          </TableCell>
-                          <TableCell className="text-xs text-muted-foreground truncate max-w-[300px]">
-                            {claim.claim_content || "-"}
-                          </TableCell>
-                        </TableRow>
-                      ))
-                    )}
-                  </TableBody>
-                </Table>
-              </div>
+              {/* 테이블 */}
+              <EDataTable
+                columns={ts.visibleColumns.map((col): EDataTableColumn<ClaimRow> => ({
+                  key: col.key,
+                  label: col.label,
+                  align: col.key === "claim_type" || col.key === "claim_status" ? "center" : undefined,
+                  render: col.key === "claim_type"
+                    ? (val: any) => (
+                        <Badge variant={getClaimTypeVariant(val)} className="text-[10px] px-1.5 py-0">
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "claim_status"
+                    ? (val: any) => (
+                        <Badge variant={getClaimStatusVariant(val)} className="text-[10px] px-1.5 py-0">
+                          {val}
+                        </Badge>
+                      )
+                    : undefined,
+                }))}
+                data={ts.groupData(data)}
+                loading={loading}
+                emptyMessage="등록된 클레임이 없어요"
+                rowKey={(row) => String(row.id)}
+                selectedId={selectedClaimNo ? String(data.find(c => c.claim_no === selectedClaimNo)?.id ?? "") : null}
+                onSelect={(id) => {
+                  const claim = data.find(c => String(c.id) === id);
+                  handleRowClick(claim?.claim_no ?? "");
+                }}
+                onRowDoubleClick={(row) => openEditModal(row.claim_no)}
+                showRowNumber
+                draggableColumns={false}
+              />
             </div>
           </ResizablePanel>
 
           <ResizableHandle withHandle />
 
-          {/* 오른쪽: 처리 현황 */}
+          {/* ── 우측: 클레임 상세 (35%) ── */}
           <ResizablePanel defaultSize={35} minSize={20}>
-            <div className="flex flex-col h-full bg-card">
-              <div className="flex items-center justify-between p-3 border-b shrink-0">
-                <span className="font-semibold flex items-center gap-2">
-                  <BarChart3 className="w-4 h-4" />
-                  처리 현황
-                </span>
+            <div className="flex flex-col h-full bg-card border-l">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="flex items-center gap-2">
+                  <ClipboardList className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-[13px] font-bold text-foreground">클레임 상세</span>
+                  {selectedClaim && (
+                    <span className="text-[11px] font-mono text-muted-foreground">{selectedClaim.claim_no}</span>
+                  )}
+                </div>
+                {selectedClaim && (
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => openEditModal(selectedClaim.claim_no)}
+                    >
+                      <Pencil className="w-3.5 h-3.5" />
+                      수정
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="text-destructive hover:text-destructive"
+                      onClick={() => handleDelete(selectedClaim.claim_no)}
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </Button>
+                  </div>
+                )}
               </div>
 
-              <div className="flex-1 overflow-auto p-4 space-y-5">
-                {/* 상태별 카드 */}
-                <div className="grid grid-cols-2 gap-3">
-                  {statCards.map((card) => (
-                    <div
-                      key={card.label}
-                      className={cn(
-                        "rounded-xl p-5 text-center bg-linear-to-br transition-all hover:-translate-y-0.5 hover:shadow-md",
-                        card.gradient,
-                        card.textColor
-                      )}
-                    >
-                      <div className="text-sm font-medium opacity-90 mb-2">
-                        {card.label}
-                      </div>
-                      <div className="text-4xl font-bold">{card.value}</div>
-                    </div>
-                  ))}
-                </div>
+              {/* 상태별 요약 카운트 */}
+              <div className="flex items-center gap-3 px-4 py-2 border-b bg-muted/20 shrink-0">
+                {([
+                  { label: "접수", count: statusCounts["접수"], variant: "default" as const },
+                  { label: "처리중", count: statusCounts["처리중"], variant: "secondary" as const },
+                  { label: "완료", count: statusCounts["완료"], variant: "outline" as const },
+                  { label: "취소", count: statusCounts["취소"], variant: "destructive" as const },
+                ]).map((item) => (
+                  <div key={item.label} className="flex items-center gap-1">
+                    <Badge variant={item.variant} className="text-[10px] px-1.5 py-0">
+                      {item.label}
+                    </Badge>
+                    <span className="text-sm font-bold tabular-nums text-foreground">{item.count}</span>
+                  </div>
+                ))}
+              </div>
 
-                {/* 선택된 클레임 상세 */}
+              {/* 상세 컨텐츠 */}
+              <div className="flex-1 overflow-auto">
                 {selectedClaim ? (
-                  <div className="space-y-4">
-                    <h3 className="text-sm font-semibold flex items-center gap-2 pt-2 border-t">
-                      <ClipboardList className="w-4 h-4" />
-                      클레임 상세 - {selectedClaim.claim_no}
-                    </h3>
-
-                    <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div className="p-4 space-y-4">
+                    {/* 기본 정보 그리드 */}
+                    <div className="grid grid-cols-2 gap-x-4 gap-y-3">
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          클레임번호
-                        </span>
-                        <span className="font-medium">
-                          {selectedClaim.claim_no}
-                        </span>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">접수일자</p>
+                        <p className="text-sm text-foreground">{selectedClaim.claim_date}</p>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          접수일자
-                        </span>
-                        <span>{selectedClaim.claim_date}</span>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">담당자</p>
+                        <p className="text-sm text-foreground">{selectedClaim.manager_name || "-"}</p>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          유형
-                        </span>
-                        <span
-                          className={cn(
-                            "px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block",
-                            getClaimTypeStyle(selectedClaim.claim_type)
-                          )}
-                        >
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">유형</p>
+                        <Badge variant={getClaimTypeVariant(selectedClaim.claim_type)} className="text-[11px]">
                           {selectedClaim.claim_type}
-                        </span>
+                        </Badge>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          상태
-                        </span>
-                        <span
-                          className={cn(
-                            "px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block",
-                            getClaimStatusStyle(selectedClaim.claim_status)
-                          )}
-                        >
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">상태</p>
+                        <Badge variant={getClaimStatusVariant(selectedClaim.claim_status)} className="text-[11px]">
                           {selectedClaim.claim_status}
-                        </span>
+                        </Badge>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          거래처명
-                        </span>
-                        <span>{selectedClaim.customer_name}</span>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">거래처명</p>
+                        <p className="text-sm font-medium text-foreground">{selectedClaim.customer_name}</p>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          담당자
-                        </span>
-                        <span>{selectedClaim.manager_name || "-"}</span>
-                      </div>
-                      <div className="col-span-2">
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          수주번호
-                        </span>
-                        <span className="text-muted-foreground">
-                          {selectedClaim.order_no || "-"}
-                        </span>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주번호</p>
+                        <p className="text-sm font-mono text-muted-foreground">{selectedClaim.order_no || "-"}</p>
                       </div>
                     </div>
 
+                    <div className="border-t" />
+
+                    {/* 클레임 내용 */}
                     <div>
-                      <span className="text-muted-foreground text-xs block mb-1">
-                        클레임 내용
-                      </span>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[60px]">
+                      <div className="flex items-center gap-1.5 mb-1.5">
+                        <FileText className="w-3.5 h-3.5 text-muted-foreground" />
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">클레임 내용</p>
+                      </div>
+                      <div className="rounded-md border bg-muted/30 p-3 text-sm text-foreground whitespace-pre-wrap min-h-[60px]">
                         {selectedClaim.claim_content || "-"}
                       </div>
                     </div>
 
+                    {/* 처리 내용 */}
                     <div>
-                      <span className="text-muted-foreground text-xs block mb-1">
-                        처리 내용
-                      </span>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[60px]">
+                      <div className="flex items-center gap-1.5 mb-1.5">
+                        <Wrench className="w-3.5 h-3.5 text-muted-foreground" />
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">처리 내용</p>
+                      </div>
+                      <div className="rounded-md border bg-muted/30 p-3 text-sm text-foreground whitespace-pre-wrap min-h-[60px]">
                         {selectedClaim.process_content || "-"}
                       </div>
                     </div>
-
-                    <div className="flex gap-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="flex-1"
-                        onClick={() => openEditModal(selectedClaim.claim_no)}
-                      >
-                        <Save className="w-4 h-4 mr-2" /> 수정
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="text-destructive hover:text-destructive"
-                        onClick={() => handleDelete(selectedClaim.claim_no)}
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </Button>
-                    </div>
                   </div>
                 ) : (
-                  <div className="flex flex-col items-center justify-center py-10 text-center">
-                    <div className="w-14 h-14 rounded-full bg-muted flex items-center justify-center mb-3">
-                      <BarChart3 className="w-7 h-7 text-muted-foreground" />
+                  <div className="flex flex-col items-center justify-center h-full text-center p-8">
+                    <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-14 h-14 flex items-center justify-center mb-4">
+                      <Inbox className="w-7 h-7 text-muted-foreground/30" />
                     </div>
-                    <p className="text-sm text-muted-foreground">
-                      클레임을 선택하면 상세 정보가 표시됩니다
+                    <p className="text-sm font-medium text-muted-foreground mb-1">
+                      좌측에서 클레임을 선택해주세요
+                    </p>
+                    <p className="text-xs text-muted-foreground/60">
+                      클레임을 선택하면 상세 정보가 표시돼요
                     </p>
                   </div>
                 )}
@@ -716,310 +631,279 @@ export default function ClaimManagementPage() {
         </ResizablePanelGroup>
       </div>
 
-      {/* 클레임 등록/수정 모달 — FullscreenDialog 사용 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title={isEditMode ? "클레임 수정" : "클레임 등록"}
-        description={isEditMode ? "클레임 정보를 수정합니다." : "새로운 클레임을 등록합니다."}
-        defaultMaxWidth="max-w-[900px]"
-        footer={
-          <div className="flex gap-2 w-full sm:w-auto">
-            <Button
-              variant="outline"
-              onClick={() => setIsModalOpen(false)}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
+      {/* ───── 클레임 등록/수정 모달 ───── */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[900px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "클레임 수정" : "클레임 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? "클레임 정보를 수정해요." : "새로운 클레임을 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex flex-col md:flex-row gap-4 py-2">
+            {/* 왼쪽: 기본 정보 */}
+            <div className="md:w-[320px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border">
+              <h3 className="text-[13px] font-bold pb-2 border-b text-foreground">기본 정보</h3>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_no" className="text-[11px] font-semibold text-muted-foreground">클레임번호</Label>
+                <Input
+                  id="claim_no"
+                  value={formData.claim_no || ""}
+                  readOnly
+                  className="h-9 text-sm bg-muted cursor-not-allowed font-mono"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_date" className="text-[11px] font-semibold text-muted-foreground">접수일자</Label>
+                <Input
+                  id="claim_date"
+                  type="date"
+                  value={formData.claim_date || ""}
+                  onChange={(e) => handleFormChange("claim_date", e.target.value)}
+                  className="h-9 text-sm"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_type" className="text-[11px] font-semibold text-muted-foreground">
+                  클레임 유형 <span className="text-destructive">*</span>
+                </Label>
+                <Select
+                  value={formData.claim_type || ""}
+                  onValueChange={(v) => handleFormChange("claim_type", v)}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue placeholder="유형을 선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CLAIM_TYPES.map((t) => (
+                      <SelectItem key={t} value={t}>{t}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_status" className="text-[11px] font-semibold text-muted-foreground">처리 상태</Label>
+                <Select
+                  value={formData.claim_status || "접수"}
+                  onValueChange={(v) => handleFormChange("claim_status", v)}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CLAIM_STATUSES.map((s) => (
+                      <SelectItem key={s} value={s}>{s}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <Label className="text-[11px] font-semibold text-muted-foreground">
+                  거래처명 <span className="text-destructive">*</span>
+                </Label>
+                <Popover open={customerOpen} onOpenChange={setCustomerOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={customerOpen}
+                      className="h-9 w-full justify-between font-normal"
+                      onClick={() => fetchCustomers(false)}
+                    >
+                      {formData.customer_name || "거래처를 선택해주세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput placeholder="거래처 검색..." />
+                      <CommandList>
+                        {customersLoading ? (
+                          <div className="flex items-center justify-center py-6">
+                            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                            <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
+                          </div>
+                        ) : (
+                          <>
+                            <CommandEmpty className="py-4 text-center text-sm">
+                              거래처를 찾을 수 없어요.
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {customers.map((cust) => (
+                                <CommandItem
+                                  key={cust.customerCode}
+                                  value={`${cust.customerCode} ${cust.customerName}`}
+                                  onSelect={() => {
+                                    setFormData((prev) => ({
+                                      ...prev,
+                                      customer_code: cust.customerCode,
+                                      customer_name: cust.customerName,
+                                    }));
+                                    setCustomerOpen(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      formData.customer_code === cust.customerCode
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col min-w-0">
+                                    <span className="font-medium truncate">{cust.customerName}</span>
+                                    <span className="text-[10px] text-muted-foreground">{cust.customerCode}</span>
+                                  </div>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="manager_name" className="text-[11px] font-semibold text-muted-foreground">담당자</Label>
+                <Input
+                  id="manager_name"
+                  value={formData.manager_name || ""}
+                  onChange={(e) => handleFormChange("manager_name", e.target.value)}
+                  placeholder="담당자를 입력해주세요"
+                  className="h-9"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label className="text-[11px] font-semibold text-muted-foreground">수주번호</Label>
+                <Popover open={orderOpen} onOpenChange={setOrderOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={orderOpen}
+                      className="h-9 w-full justify-between font-normal"
+                      onClick={() => fetchSalesOrders(false)}
+                    >
+                      {formData.order_no || "수주번호를 선택해주세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput placeholder="수주번호 검색..." />
+                      <CommandList>
+                        {ordersLoading ? (
+                          <div className="flex items-center justify-center py-6">
+                            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                            <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
+                          </div>
+                        ) : (
+                          <>
+                            <CommandEmpty className="py-4 text-center text-sm">
+                              수주번호를 찾을 수 없어요.
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {salesOrders.map((order) => (
+                                <CommandItem
+                                  key={order.orderNo}
+                                  value={`${order.orderNo} ${order.partnerName}`}
+                                  onSelect={() => {
+                                    setFormData((prev) => ({
+                                      ...prev,
+                                      order_no: order.orderNo,
+                                    }));
+                                    setOrderOpen(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      formData.order_no === order.orderNo
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col min-w-0">
+                                    <span className="font-medium truncate">{order.orderNo}</span>
+                                    <span className="text-[10px] text-muted-foreground">
+                                      {order.status}
+                                      {order.partnerName ? ` | ${order.partnerName}` : ""}
+                                    </span>
+                                  </div>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+
+            {/* 오른쪽: 상세 내용 */}
+            <div className="flex-1 space-y-3 bg-muted/30 p-4 rounded-lg border min-w-0">
+              <h3 className="text-[13px] font-bold pb-2 border-b text-foreground">클레임 상세 내용</h3>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_content" className="text-[11px] font-semibold text-muted-foreground">
+                  클레임 내용 <span className="text-destructive">*</span>
+                </Label>
+                <Textarea
+                  id="claim_content"
+                  value={formData.claim_content || ""}
+                  onChange={(e) => handleFormChange("claim_content", e.target.value)}
+                  placeholder="클레임 내용을 상세히 입력해주세요"
+                  className="min-h-[200px] resize-y text-sm"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="process_content" className="text-[11px] font-semibold text-muted-foreground">처리 내용</Label>
+                <Textarea
+                  id="process_content"
+                  value={formData.process_content || ""}
+                  onChange={(e) => handleFormChange("process_content", e.target.value)}
+                  placeholder="처리 내용을 입력해주세요"
+                  className="min-h-[150px] resize-y text-sm"
+                />
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>
               취소
             </Button>
-            <Button
-              onClick={handleSave}
-              disabled={saving}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
+            <Button onClick={handleSave} disabled={saving}>
               {saving ? (
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                <Loader2 className="w-4 h-4 animate-spin" />
               ) : (
-                <Save className="w-4 h-4 mr-2" />
+                <Save className="w-4 h-4" />
               )}
               저장
             </Button>
-          </div>
-        }
-      >
-        <div className="flex flex-col md:flex-row gap-5">
-          {/* 왼쪽: 기본 정보 */}
-          <div className="md:w-[340px] shrink-0 space-y-4 bg-muted/30 p-4 rounded-lg border border-border/50">
-            <h3 className="text-sm font-semibold pb-2 border-b">
-              클레임 기본 정보
-            </h3>
-
-            <div>
-              <Label htmlFor="claim_no" className="text-xs sm:text-sm">
-                클레임번호
-              </Label>
-              <Input
-                id="claim_no"
-                value={formData.claim_no || ""}
-                readOnly
-                className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed"
-              />
-            </div>
-
-            <div>
-              <Label htmlFor="claim_date" className="text-xs sm:text-sm">
-                접수일자
-              </Label>
-              <FormDatePicker
-                value={formData.claim_date || ""}
-                onChange={(v) => handleFormChange("claim_date", v)}
-                placeholder="접수일자"
-              />
-            </div>
-
-            <div>
-              <Label htmlFor="claim_type" className="text-xs sm:text-sm">
-                클레임 유형 <span className="text-destructive">*</span>
-              </Label>
-              <Select
-                value={formData.claim_type || ""}
-                onValueChange={(v) => handleFormChange("claim_type", v)}
-              >
-                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                  <SelectValue placeholder="선택" />
-                </SelectTrigger>
-                <SelectContent>
-                  {CLAIM_TYPES.map((t) => (
-                    <SelectItem key={t} value={t}>
-                      {t}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div>
-              <Label htmlFor="claim_status" className="text-xs sm:text-sm">
-                처리 상태
-              </Label>
-              <Select
-                value={formData.claim_status || "접수"}
-                onValueChange={(v) => handleFormChange("claim_status", v)}
-              >
-                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {CLAIM_STATUSES.map((s) => (
-                    <SelectItem key={s} value={s}>
-                      {s}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div>
-              <Label className="text-xs sm:text-sm">
-                거래처명 <span className="text-destructive">*</span>
-              </Label>
-              <Popover open={customerOpen} onOpenChange={setCustomerOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={customerOpen}
-                    className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm font-normal"
-                    onClick={() => fetchCustomers(false)}
-                  >
-                    {formData.customer_name || "거래처 선택"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent
-                  className="p-0"
-                  style={{ width: "var(--radix-popover-trigger-width)" }}
-                  align="start"
-                >
-                  <Command>
-                    <CommandInput
-                      placeholder="거래처 검색..."
-                      className="text-xs sm:text-sm"
-                    />
-                    <CommandList>
-                      {customersLoading ? (
-                        <div className="flex items-center justify-center py-6">
-                          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-                          <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
-                        </div>
-                      ) : (
-                        <>
-                          <CommandEmpty className="text-xs sm:text-sm py-4 text-center">
-                            거래처를 찾을 수 없습니다.
-                          </CommandEmpty>
-                          <CommandGroup>
-                            {customers.map((cust) => (
-                              <CommandItem
-                                key={cust.customerCode}
-                                value={`${cust.customerCode} ${cust.customerName}`}
-                                onSelect={() => {
-                                  setFormData((prev) => ({
-                                    ...prev,
-                                    customer_code: cust.customerCode,
-                                    customer_name: cust.customerName,
-                                  }));
-                                  setCustomerOpen(false);
-                                }}
-                                className="text-xs sm:text-sm"
-                              >
-                                <Check
-                                  className={cn(
-                                    "mr-2 h-4 w-4",
-                                    formData.customer_code === cust.customerCode
-                                      ? "opacity-100"
-                                      : "opacity-0"
-                                  )}
-                                />
-                                <div className="flex flex-col">
-                                  <span className="font-medium">{cust.customerName}</span>
-                                  <span className="text-[10px] text-muted-foreground">
-                                    {cust.customerCode}
-                                  </span>
-                                </div>
-                              </CommandItem>
-                            ))}
-                          </CommandGroup>
-                        </>
-                      )}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
-
-            <div>
-              <Label htmlFor="manager_name" className="text-xs sm:text-sm">
-                담당자
-              </Label>
-              <Input
-                id="manager_name"
-                value={formData.manager_name || ""}
-                onChange={(e) => handleFormChange("manager_name", e.target.value)}
-                className="h-8 text-xs sm:h-10 sm:text-sm"
-              />
-            </div>
-
-            <div>
-              <Label className="text-xs sm:text-sm">수주번호</Label>
-              <Popover open={orderOpen} onOpenChange={setOrderOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={orderOpen}
-                    className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm font-normal"
-                    onClick={() => fetchSalesOrders(false)}
-                  >
-                    {formData.order_no || "수주번호 선택"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent
-                  className="p-0"
-                  style={{ width: "var(--radix-popover-trigger-width)" }}
-                  align="start"
-                >
-                  <Command>
-                    <CommandInput
-                      placeholder="수주번호 검색..."
-                      className="text-xs sm:text-sm"
-                    />
-                    <CommandList>
-                      {ordersLoading ? (
-                        <div className="flex items-center justify-center py-6">
-                          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-                          <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
-                        </div>
-                      ) : (
-                        <>
-                          <CommandEmpty className="text-xs sm:text-sm py-4 text-center">
-                            수주번호를 찾을 수 없습니다.
-                          </CommandEmpty>
-                          <CommandGroup>
-                            {salesOrders.map((order) => (
-                              <CommandItem
-                                key={order.orderNo}
-                                value={`${order.orderNo} ${order.partnerName}`}
-                                onSelect={() => {
-                                  setFormData((prev) => ({
-                                    ...prev,
-                                    order_no: order.orderNo,
-                                  }));
-                                  setOrderOpen(false);
-                                }}
-                                className="text-xs sm:text-sm"
-                              >
-                                <Check
-                                  className={cn(
-                                    "mr-2 h-4 w-4",
-                                    formData.order_no === order.orderNo
-                                      ? "opacity-100"
-                                      : "opacity-0"
-                                  )}
-                                />
-                                <div className="flex flex-col">
-                                  <span className="font-medium">{order.orderNo}</span>
-                                  <span className="text-[10px] text-muted-foreground">
-                                    {order.status}
-                                    {order.partnerName ? ` | ${order.partnerName}` : ""}
-                                  </span>
-                                </div>
-                              </CommandItem>
-                            ))}
-                          </CommandGroup>
-                        </>
-                      )}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
-          </div>
-
-          {/* 오른쪽: 상세 내용 */}
-          <div className="flex-1 space-y-4 bg-muted/30 p-4 rounded-lg border border-border/50 min-w-0">
-            <h3 className="text-sm font-semibold pb-2 border-b">
-              클레임 상세 내용
-            </h3>
-
-            <div className="flex flex-col flex-1">
-              <Label htmlFor="claim_content" className="text-xs sm:text-sm">
-                클레임 내용 <span className="text-destructive">*</span>
-              </Label>
-              <Textarea
-                id="claim_content"
-                value={formData.claim_content || ""}
-                onChange={(e) => handleFormChange("claim_content", e.target.value)}
-                placeholder="클레임 내용을 상세히 입력해주세요"
-                className="min-h-[200px] resize-y text-xs sm:text-sm"
-              />
-            </div>
-
-            <div>
-              <Label htmlFor="process_content" className="text-xs sm:text-sm">
-                처리 내용
-              </Label>
-              <Textarea
-                id="process_content"
-                value={formData.process_content || ""}
-                onChange={(e) => handleFormChange("process_content", e.target.value)}
-                placeholder="처리 내용을 입력해주세요"
-                className="min-h-[150px] resize-y text-xs sm:text-sm"
-              />
-            </div>
-          </div>
-        </div>
-      </FullscreenDialog>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 엑셀 업로드 모달 */}
       <ExcelUploadModal
@@ -1028,12 +912,21 @@ export default function ClaimManagementPage() {
         tableName={TABLE_NAME}
         onSuccess={() => {
           fetchData();
-          toast.success("엑셀 업로드가 완료되었습니다.");
+          toast.success("엑셀 업로드가 완료되었어요.");
         }}
       />
 
       {/* 확인 다이얼로그 */}
       {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_10/sales/customer/page.tsx b/frontend/app/(main)/COMPANY_10/sales/customer/page.tsx
index 663ad4f3..61e1269d 100644
--- a/frontend/app/(main)/COMPANY_10/sales/customer/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/sales/customer/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 /**
- * 거래처관리 — 하드코딩 페이지
+ * 거래처관리 — Type B 마스터-디테일 레이아웃 (리디자인)
  *
  * 좌측: 거래처 목록 (customer_mng)
- * 우측: 선택한 거래처의 품목별 단가 정보 (customer_item_prices, entity join → item_info)
+ * 우측: 품목별 단가 + 납품처 정보 탭
  *
  * 모달:
  * - 거래처 등록/수정 (customer_mng)
@@ -12,100 +12,111 @@
  * - 납품처 등록 (delivery_destination)
  */
 
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
-import {
-  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
-} from "@/components/ui/dialog";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Label } from "@/components/ui/label";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
 import {
   Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
-  Users, Package, MapPin, Search, X, Maximize2, Minimize2, Settings2,
+  Users, Package, MapPin, Search, X, Tag, Coins, Settings2, GripVertical,
+  ChevronRight, ChevronDown,
 } from "lucide-react";
+import {
+  DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
 import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { validateField, validateForm, formatField } from "@/lib/utils/validation";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
+import { getAvailableNumberingRulesForScreen, previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const CUSTOMER_TABLE = "customer_mng";
 const MAPPING_TABLE = "customer_item_mapping";
 const PRICE_TABLE = "customer_item_prices";
 const DELIVERY_TABLE = "delivery_destination";
+const CONTACT_TABLE = "customer_contact";
 
-// 좌측: 거래처 목록 컬럼
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "customer_code", label: "거래처코드", width: "w-[110px]" },
-  { key: "customer_name", label: "거래처명", minWidth: "min-w-[120px]" },
-  { key: "division", label: "거래유형", width: "w-[80px]" },
-  { key: "contact_person", label: "거래처담당자", width: "w-[90px]" },
-  { key: "internal_manager", label: "사내담당자", width: "w-[90px]" },
-  { key: "contact_phone", label: "전화번호", width: "w-[110px]" },
-  { key: "business_number", label: "사업자번호", width: "w-[110px]" },
-  { key: "email", label: "이메일", width: "w-[130px]" },
-  { key: "address", label: "주소", minWidth: "min-w-[150px]" },
-  { key: "status", label: "상태", width: "w-[60px]" },
+const CUSTOMER_GRID_COLUMNS = [
+  { key: "customer_code", label: "거래처코드" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "division", label: "거래유형" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "전화번호" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "status", label: "상태" },
 ];
 
-// 우측: 품목별 단가 컬럼
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "item_number", label: "품목코드", width: "w-[100px]" },
-  { key: "item_name", label: "품명", minWidth: "min-w-[100px]" },
-  { key: "customer_item_code", label: "거래처품번", width: "w-[100px]" },
-  { key: "customer_item_name", label: "거래처품명", width: "w-[100px]" },
-  { key: "base_price_type", label: "기준유형", width: "w-[80px]" },
-  { key: "base_price", label: "기준가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "discount_type", label: "할인유형", width: "w-[70px]" },
-  { key: "discount_value", label: "할인값", width: "w-[60px]", align: "right" },
-  { key: "calculated_price", label: "단가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
-];
+function SortableMappingRow({ id, children }: { id: string; children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform), transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+  return (
+    <div ref={setNodeRef} style={style} className="flex gap-2 items-center">
+      <div {...attributes} {...listeners} className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0">
+        <GripVertical className="h-3.5 w-3.5" />
+      </div>
+      {children}
+    </div>
+  );
+}
 
 export default function CustomerManagementPage() {
   const { user } = useAuth();
-  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-customer", CUSTOMER_TABLE, CUSTOMER_GRID_COLUMNS);
+  const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 좌측: 거래처 목록
   const [customers, setCustomers] = useState<any[]>([]);
   const [rawCustomers, setRawCustomers] = useState<any[]>([]);
   const [customerLoading, setCustomerLoading] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
+  const [mainContactMap, setMainContactMap] = useState<Record<string, any>>({});
   const [customerCount, setCustomerCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [gridColumns, setGridColumns] = useState<DataGridColumn[]>(LEFT_COLUMNS);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
   const [selectedCustomerId, setSelectedCustomerId] = useState<string | null>(null);
 
   // 우측: 탭
   const [rightTab, setRightTab] = useState<"items" | "delivery">("items");
   // 우측: 품목 단가
   const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceGroups, setPriceGroups] = useState<Record<string, { master: any; details: any[] }>>({});
   const [priceLoading, setPriceLoading] = useState(false);
   const [priceCheckedIds, setPriceCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [collapsedPriceCards, setCollapsedPriceCards] = useState<Set<string>>(new Set());
   // 우측: 납품처
   const [deliveryItems, setDeliveryItems] = useState<any[]>([]);
-  const [deliveryCheckedIds, setDeliveryCheckedIds] = useState<string[]>([]);
-
-  // 품목 편집 데이터 (더블클릭 시 — 상세 입력 모달 재활용)
-  const [editItemData, setEditItemData] = useState<any>(null);
-  const savingRef = useRef(false);
   const [deliveryLoading, setDeliveryLoading] = useState(false);
 
-  // 모달
+  // 품목 편집 데이터 (더블클릭 시 상세 입력 모달 재활용)
+  const [editItemData, setEditItemData] = useState<any>(null);
+  const savingRef = useRef(false);
+
+  // 거래처 모달
   const [customerModalOpen, setCustomerModalOpen] = useState(false);
   const [customerEditMode, setCustomerEditMode] = useState(false);
   const [customerForm, setCustomerForm] = useState<Record<string, any>>({});
@@ -116,27 +127,45 @@ export default function CustomerManagementPage() {
   const [itemSelectOpen, setItemSelectOpen] = useState(false);
   const [itemSearchKeyword, setItemSearchKeyword] = useState("");
   const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemTotalCount, setItemTotalCount] = useState(0);
   const [itemSearchLoading, setItemSearchLoading] = useState(false);
   const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
 
   // 품목 상세 입력 모달 (2단계: 거래처 품번/품명 + 단가)
   const [itemDetailOpen, setItemDetailOpen] = useState(false);
   const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
-  // 품목별 거래처 품번/품명 (다중)
   const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; customer_item_code: string; customer_item_name: string }>>>({});
-  // 품목별 단가 목록
   const [itemPrices, setItemPrices] = useState<Record<string, Array<{
     _id: string; start_date: string; end_date: string; currency_code: string;
     base_price_type: string; base_price: string; discount_type: string;
     discount_value: string; rounding_type: string; rounding_unit_value: string;
     calculated_price: string;
   }>>>({});
-  // 단가 카테고리 옵션
   const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
-  // 납품처 모달
-  const [deliveryModalOpen, setDeliveryModalOpen] = useState(false);
-  const [deliveryForm, setDeliveryForm] = useState<Record<string, any>>({});
+  // 거래처 모달 탭
+  const [customerModalTab, setCustomerModalTab] = useState<"basic" | "contacts" | "delivery">("basic");
+  // 담당자 (customer_contact) - 모달 내
+  const [modalContacts, setModalContacts] = useState<any[]>([]);
+  const [modalContactLoading, setModalContactLoading] = useState(false);
+  const [modalContactForm, setModalContactForm] = useState<Record<string, any>>({});
+  const [modalContactEditId, setModalContactEditId] = useState<string | null>(null);
+  const [modalContactFormOpen, setModalContactFormOpen] = useState(false);
+  const [modalContactSaving, setModalContactSaving] = useState(false);
+  // 납품처 (delivery_destination) - 모달 내
+  const [modalDeliveries, setModalDeliveries] = useState<any[]>([]);
+  const [modalDeliveryLoading, setModalDeliveryLoading] = useState(false);
+  const [modalDeliveryForm, setModalDeliveryForm] = useState<Record<string, any>>({});
+  const [modalDeliveryEditId, setModalDeliveryEditId] = useState<string | null>(null);
+  const [modalDeliveryFormOpen, setModalDeliveryFormOpen] = useState(false);
+  const [modalDeliverySaving, setModalDeliverySaving] = useState(false);
+  const [modalDeliveryFormErrors, setModalDeliveryFormErrors] = useState<Record<string, string>>({});
+
+  const [continuousInput, setContinuousInput] = useState(false);
+
+  // 세금유형 (기본정보 탭 내)
+  const [taxTypeRows, setTaxTypeRows] = useState<{ _id: string; tax_type_name: string; rate: string }[]>([]);
+  const [taxTypeOptions, setTaxTypeOptions] = useState<{ code: string; label: string }[]>([]);
 
   // 엑셀
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
@@ -145,21 +174,21 @@ export default function CustomerManagementPage() {
 
   // 카테고리
   const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
-  // 사원 목록 (사내담당자 선택용)
   const [employeeOptions, setEmployeeOptions] = useState<{ user_id: string; user_name: string; position_name?: string }[]>([]);
 
+
   // 카테고리 로드
   useEffect(() => {
+    const flatten = (vals: any[]): { code: string; label: string }[] => {
+      const result: { code: string; label: string }[] = [];
+      for (const v of vals) {
+        result.push({ code: v.valueCode, label: v.valueLabel });
+        if (v.children?.length) result.push(...flatten(v.children));
+      }
+      return result;
+    };
     const load = async () => {
       const optMap: Record<string, { code: string; label: string }[]> = {};
-      const flatten = (vals: any[]): { code: string; label: string }[] => {
-        const result: { code: string; label: string }[] = [];
-        for (const v of vals) {
-          result.push({ code: v.valueCode, label: v.valueLabel });
-          if (v.children?.length) result.push(...flatten(v.children));
-        }
-        return result;
-      };
       for (const col of ["division", "status"]) {
         try {
           const res = await apiClient.get(`/table-categories/${CUSTOMER_TABLE}/${col}/values`);
@@ -168,7 +197,6 @@ export default function CustomerManagementPage() {
       }
       setCategoryOptions(optMap);
 
-      // 단가 카테고리
       const priceOpts: Record<string, { code: string; label: string }[]> = {};
       for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
         try {
@@ -177,9 +205,14 @@ export default function CustomerManagementPage() {
         } catch { /* skip */ }
       }
       setPriceCategoryOptions(priceOpts);
+
+      // 세금유형 카테고리
+      try {
+        const taxRes = await apiClient.get(`/table-categories/customer_tax_type/tax_type_name/values`);
+        if (taxRes.data?.success) setTaxTypeOptions(flatten(taxRes.data.data || []));
+      } catch { /* skip */ }
     };
     load();
-    // 사원 목록 로드
     apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true })
       .then((res) => {
         const users = res.data?.data?.data || res.data?.data?.rows || [];
@@ -189,57 +222,46 @@ export default function CustomerManagementPage() {
       }).catch(() => {});
   }, []);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    // 컬럼 표시/숨김/순서/너비
-    const colMap = new Map(LEFT_COLUMNS.map((c) => [c.key, c]));
-    const applied: DataGridColumn[] = [];
-    for (const cs of settings.columns) {
-      if (!cs.visible) continue;
-      const orig = colMap.get(cs.columnName);
-      if (orig) {
-        applied.push({ ...orig, width: `w-[${cs.width}px]`, minWidth: undefined });
-      }
-    }
-    const settingKeys = new Set(settings.columns.map((c) => c.columnName));
-    for (const col of LEFT_COLUMNS) {
-      if (!settingKeys.has(col.key)) applied.push(col);
-    }
-    setGridColumns(applied.length > 0 ? applied : LEFT_COLUMNS);
-    // 필터 설정
-    setFilterConfig(settings.filters);
-  }, []);
-
-  useEffect(() => {
-    const saved = loadTableSettings("customer-mng");
-    if (saved) applyTableSettings(saved);
-  }, []);
-
   // 거래처 목록 조회
   const fetchCustomers = useCallback(async () => {
     setCustomerLoading(true);
     try {
-      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
       const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
+        sort: { columnName: "customer_code", order: "desc" },
       });
       const raw = res.data?.data?.data || res.data?.data?.rows || [];
-      // raw 데이터 보관 (수정 시 원본 카테고리 코드 사용)
       setRawCustomers(raw);
-      // 카테고리 코드→라벨 변환
+
       const resolve = (col: string, code: string) => {
         if (!code) return "";
         return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
       };
-      const data = raw.map((r: any) => ({
-        ...r,
-        division: resolve("division", r.division),
-        status: resolve("status", r.status),
-        internal_manager: r.internal_manager
-          ? (employeeOptions.find((e) => e.user_id === r.internal_manager)?.user_name || r.internal_manager)
-          : "",
-      }));
+      const data = raw.map((r: any) => {
+        const mainContact = mainContactMap[r.id];
+        return {
+          ...r,
+          division: resolve("division", r.division),
+          status: resolve("status", r.status),
+          contact_person: mainContact?.contact_name || "",
+          contact_phone: mainContact?.contact_phone || "",
+          email: mainContact?.contact_email || "",
+        };
+      });
+      // 거래처코드 숫자 기준 내림차순 정렬
+      data.sort((a: any, b: any) => {
+        const aNum = parseInt((a.customer_code || "").replace(/\D/g, ""), 10) || 0;
+        const bNum = parseInt((b.customer_code || "").replace(/\D/g, ""), 10) || 0;
+        return bNum - aNum;
+      });
       setCustomers(data);
       setCustomerCount(res.data?.data?.total || raw.length);
     } catch (err) {
@@ -248,20 +270,39 @@ export default function CustomerManagementPage() {
     } finally {
       setCustomerLoading(false);
     }
-  }, [searchFilters, categoryOptions, employeeOptions]);
+  }, [searchFilters, categoryOptions, employeeOptions, mainContactMap]);
 
   useEffect(() => { fetchCustomers(); }, [fetchCustomers]);
 
-  // 선택된 거래처의 품목 단가 조회
+  // 메인 담당자 조회 (최초 1번 + 저장 후 갱신)
+  const fetchMainContacts = useCallback(async () => {
+    try {
+      const contactRes = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+        dataFilter: { enabled: true, filters: [{ columnName: "is_main", operator: "equals", value: "Y" }] },
+      });
+      const allContacts = contactRes.data?.data?.data || contactRes.data?.data?.rows || [];
+      const map: Record<string, any> = {};
+      for (const c of allContacts) {
+        if ((c.is_main === "Y" || c.is_main === true) && c.customer_id) {
+          map[c.customer_id] = c;
+        }
+      }
+      setMainContactMap(map);
+    } catch { /* skip */ }
+  }, []);
+
+  useEffect(() => { fetchMainContacts(); }, [fetchMainContacts]);
+
   const selectedCustomer = customers.find((c) => c.id === selectedCustomerId);
 
+  // 선택된 거래처의 품목 단가 조회
   useEffect(() => {
     if (!selectedCustomer?.customer_code) { setPriceItems([]); setPriceCheckedIds([]); return; }
     setPriceCheckedIds([]);
     const fetchItems = async () => {
       setPriceLoading(true);
       try {
-        // 1. customer_item_mapping 조회 (품목 매핑 — 기본 데이터)
         const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
           page: 1, size: 500,
           dataFilter: { enabled: true, filters: [
@@ -271,7 +312,6 @@ export default function CustomerManagementPage() {
         });
         const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
 
-        // 2. item_id → item_info 조인 (품명 등)
         const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
         let itemMap: Record<string, any> = {};
         if (itemIds.length > 0) {
@@ -287,7 +327,6 @@ export default function CustomerManagementPage() {
           } catch { /* skip */ }
         }
 
-        // 3. customer_item_prices 조회
         let allPrices: any[] = [];
         if (mappings.length > 0) {
           try {
@@ -302,33 +341,34 @@ export default function CustomerManagementPage() {
           } catch { /* skip */ }
         }
 
-        // 4. 매핑별 행 생성 + 오늘 날짜 기준 단가 + 같은 품목 첫 행만 품목코드/품명 표시
         const priceResolve = (col: string, code: string) => {
           if (!code) return "";
           return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
         };
-        const today = new Date().toISOString().split("T")[0];
+        const now = new Date();
+        const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+
+        // 품목 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
+        const grouped: Record<string, { master: any; details: any[] }> = {};
+        const flatItems: any[] = [];
         const seenItemIds = new Set<string>();
-
-        // item_id로 정렬하여 같은 품목끼리 묶기
-        const sortedMappings = [...mappings].sort((a: any, b: any) => (a.item_id || "").localeCompare(b.item_id || ""));
-
-        setPriceItems(sortedMappings.map((m: any) => {
+        for (const m of mappings) {
           const itemKey = m.item_id || "";
-          const itemInfo = itemMap[itemKey] || {};
-          const isFirstOfGroup = !seenItemIds.has(itemKey);
-          if (itemKey) seenItemIds.add(itemKey);
+          if (seenItemIds.has(itemKey)) continue; // 품목당 첫 매핑만 마스터
+          seenItemIds.add(itemKey);
 
-          // 오늘 날짜에 해당하는 단가
-          const itemPriceList = allPrices.filter((p: any) => p.item_id === itemKey);
+          const itemInfo = itemMap[itemKey] || {};
+          const itemPriceList = allPrices
+            .filter((p: any) => p.item_id === itemKey)
+            .sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
           const todayPrice = itemPriceList.find((p: any) =>
             (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
           ) || itemPriceList[0] || {};
 
-          return {
+          const masterRow = {
             ...m,
-            item_number: isFirstOfGroup ? itemKey : "",
-            item_name: isFirstOfGroup ? (itemInfo.item_name || "") : "",
+            item_number: itemKey,
+            item_name: itemInfo.item_name || "",
             base_price_type: priceResolve("base_price_type", todayPrice.base_price_type || ""),
             base_price: todayPrice.base_price || "",
             discount_type: priceResolve("discount_type", todayPrice.discount_type || ""),
@@ -336,7 +376,21 @@ export default function CustomerManagementPage() {
             calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
             currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
           };
-        }));
+
+          // 단가 리스트 (라벨 변환)
+          const priceDetails = itemPriceList.map((p: any) => ({
+            ...p,
+            base_price_type_label: priceResolve("base_price_type", p.base_price_type || ""),
+            discount_type_label: priceResolve("discount_type", p.discount_type || ""),
+            currency_label: priceResolve("currency_code", p.currency_code || ""),
+            is_current: (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today),
+          }));
+
+          grouped[itemKey] = { master: masterRow, details: priceDetails };
+          flatItems.push(masterRow);
+        }
+        setPriceGroups(grouped);
+        setPriceItems(flatItems);
       } catch (err) {
         console.error("품목 조회 실패:", err);
       } finally {
@@ -348,8 +402,7 @@ export default function CustomerManagementPage() {
 
   // 납품처 조회
   useEffect(() => {
-    if (!selectedCustomer?.customer_code) { setDeliveryItems([]); setDeliveryCheckedIds([]); return; }
-    setDeliveryCheckedIds([]);
+    if (!selectedCustomer?.customer_code) { setDeliveryItems([]); return; }
     const fetchDelivery = async () => {
       setDeliveryLoading(true);
       try {
@@ -371,21 +424,198 @@ export default function CustomerManagementPage() {
     return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
   };
 
-  // 거래처 등록 모달
-  const openCustomerRegister = () => {
+  // 모달 내 담당자 목록 조회
+  const fetchModalContacts = useCallback(async (customerId: string) => {
+    setModalContactLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      setModalContacts(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalContacts([]); } finally { setModalContactLoading(false); }
+  }, []);
+
+  // 모달 내 납품처 목록 조회
+  const fetchModalDeliveries = useCallback(async (customerCode: string) => {
+    setModalDeliveryLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
+        autoFilter: true,
+      });
+      setModalDeliveries(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalDeliveries([]); } finally { setModalDeliveryLoading(false); }
+  }, []);
+
+  // 담당자 저장 (등록/수정)
+  const handleModalContactSave = async () => {
+    if (!modalContactForm.contact_name) { toast.error("담당자명은 필수입니다."); return; }
+    if (modalContactEditId) {
+      // 수정 — 로컬 리스트에서 교체 + 메인 설정 시 다른 메인 해제
+      const isSettingMain = modalContactForm.is_main === "Y" || modalContactForm.is_main === true;
+      setModalContacts((prev) => prev.map((c) =>
+        (c._localId || c.id) === modalContactEditId
+          ? { ...c, ...modalContactForm }
+          : isSettingMain ? { ...c, is_main: "N" } : c
+      ));
+    } else {
+      // 추가 — 로컬 리스트에 카드 추가
+      setModalContacts((prev) => [...prev, {
+        ...modalContactForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalContactFormOpen(false);
+    setModalContactForm({});
+    setModalContactEditId(null);
+  };
+
+  // 담당자 삭제
+  const handleModalContactDelete = (contactId: string) => {
+    setModalContacts((prev) => prev.filter((c) => (c._localId || c.id) !== contactId));
+  };
+
+  // 납품처 자동채번 유틸
+  const generateDeliveryCode = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DELIVERY_TABLE}/destination_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        const allRes = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "destination_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const match = (row.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        // 로컬에 추가된 것도 포함
+        for (const d of modalDeliveries) {
+          const match = (d.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLen = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          return prefix + String(maxSeq + 1).padStart(seqLen, "0");
+        }
+      }
+    } catch { /* skip */ }
+    return "";
+  };
+
+  // 납품처 저장 (모달 내)
+  const handleModalDeliverySave = async () => {
+    if (!modalDeliveryForm.destination_name) { toast.error("납품처명은 필수입니다."); return; }
+    if (modalDeliveryEditId) {
+      const isSettingMain = modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true;
+      setModalDeliveries((prev) => prev.map((d) =>
+        (d._localId || d.id) === modalDeliveryEditId
+          ? { ...d, ...modalDeliveryForm }
+          : isSettingMain ? { ...d, is_default: "N" } : d
+      ));
+    } else {
+      setModalDeliveries((prev) => [...prev, {
+        ...modalDeliveryForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalDeliveryFormOpen(false);
+    setModalDeliveryForm({});
+    setModalDeliveryEditId(null);
+    setModalDeliveryFormErrors({});
+  };
+
+  const handleModalDeliveryDelete = (deliveryId: string) => {
+    setModalDeliveries((prev) => prev.filter((d) => (d._localId || d.id) !== deliveryId));
+  };
+
+  // 거래처 등록 모달 열기
+  const openCustomerRegister = async () => {
     setCustomerForm({});
     setFormErrors({});
     setCustomerEditMode(false);
+    setCustomerModalTab("basic");
+    setModalContacts([]);
+    setModalDeliveries([]);
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setTaxTypeRows([]);
     setCustomerModalOpen(true);
+    // 거래처 코드 자동 채번 — 기존 데이터 max값 기반
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${CUSTOMER_TABLE}/customer_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        // 기존 데이터에서 CUST-XXX 패턴의 최대 순번 조회
+        const allRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "customer_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const code = row.customer_code || "";
+          const match = code.match(/(\d+)$/);
+          if (match) {
+            const seq = parseInt(match[1], 10);
+            if (seq > maxSeq) maxSeq = seq;
+          }
+        }
+        // preview로 접두어 패턴 가져오기
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLength = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          const nextSeq = maxSeq + 1;
+          const nextCode = prefix + String(nextSeq).padStart(seqLength, "0");
+          setCustomerForm((prev) => ({ ...prev, customer_code: nextCode, _numberingRuleId: ruleId }));
+        }
+      }
+    } catch { /* skip */ }
   };
 
   const openCustomerEdit = () => {
     if (!selectedCustomer) return;
-    // raw 데이터에서 원본 카테고리 코드 가져오기 (라벨 변환 전 데이터)
     const rawData = rawCustomers.find((c) => c.id === selectedCustomerId);
     setCustomerForm({ ...(rawData || selectedCustomer) });
     setFormErrors({});
     setCustomerEditMode(true);
+    setCustomerModalTab("basic");
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setModalContactForm({});
+    setModalDeliveryForm({});
+    setModalContactEditId(null);
+    setModalDeliveryEditId(null);
+    // 수정 모드에서는 바로 조회
+    const code = (rawData || selectedCustomer).customer_code;
+    const id = (rawData || selectedCustomer).id;
+    if (id) {
+      fetchModalContacts(id);
+      // 세금유형 로드
+      apiClient.post(`/table-management/tables/customer_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: id }] },
+        autoFilter: true,
+      }).then((res: any) => {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        setTaxTypeRows(rows.map((r: any) => ({ _id: r.id, tax_type_name: r.tax_type_name || "", rate: String(r.rate || "") })));
+      }).catch(() => setTaxTypeRows([]));
+    }
+    if (code) fetchModalDeliveries(code);
     setCustomerModalOpen(true);
   };
 
@@ -401,10 +631,84 @@ export default function CustomerManagementPage() {
     });
   };
 
+  // 세금유형/담당자/납품처를 한번에 저장하는 헬퍼
+  const saveSubTables = async (customerId: string, customerCode: string) => {
+    // 세금유형 — 기존 삭제 후 재생성
+    try {
+      const existTax = await apiClient.post(`/table-management/tables/customer_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      const existRows = existTax.data?.data?.data || existTax.data?.data?.rows || [];
+      if (existRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/customer_tax_type/delete`, {
+          data: existRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+      for (const t of taxTypeRows.filter((r) => r.tax_type_name)) {
+        await apiClient.post(`/table-management/tables/customer_tax_type/add`, {
+          id: crypto.randomUUID(), customer_id: customerId,
+          tax_type_name: t.tax_type_name, tax_type_id: t.tax_type_name,
+          rate: t.rate ? Number(t.rate) : 0,
+        });
+      }
+    } catch { /* skip */ }
+
+    // 담당자 — 기존 삭제 후 전체 재생성
+    try {
+      const existContacts = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      const existCRows = existContacts.data?.data?.data || existContacts.data?.data?.rows || [];
+      if (existCRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${CONTACT_TABLE}/delete`, {
+          data: existCRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const c of modalContacts) {
+      try {
+        await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/add`, {
+          id: crypto.randomUUID(), customer_id: customerId,
+          contact_name: c.contact_name || "", contact_phone: c.contact_phone || "",
+          contact_email: c.contact_email || "", department: c.department || "",
+          is_main: c.is_main || "N", memo: c.memo || "",
+        });
+      } catch { /* skip */ }
+    }
+
+    // 납품처 — 기존 삭제 후 전체 재생성
+    try {
+      const existDeliveries = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
+        autoFilter: true,
+      });
+      const existDRows = existDeliveries.data?.data?.data || existDeliveries.data?.data?.rows || [];
+      if (existDRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
+          data: existDRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const d of modalDeliveries) {
+      try {
+        await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
+          id: crypto.randomUUID(), customer_code: customerCode,
+          destination_code: d.destination_code || "", destination_name: d.destination_name || "",
+          address: d.address || "", manager_name: d.manager_name || "",
+          phone: d.phone || "", memo: d.memo || "", is_default: d.is_default || "N",
+        });
+      } catch { /* skip */ }
+    }
+  };
+
   const handleCustomerSave = async () => {
     if (!customerForm.customer_name) { toast.error("거래처명은 필수입니다."); return; }
     if (!customerForm.status) { toast.error("상태는 필수입니다."); return; }
-    // 폼 검증
     const errors = validateForm(customerForm, ["contact_phone", "email", "business_number"]);
     setFormErrors(errors);
     if (Object.keys(errors).length > 0) {
@@ -413,23 +717,72 @@ export default function CustomerManagementPage() {
     }
     setSaving(true);
     try {
-      const { id, created_date, updated_date, writer, company_code, ...fields } = customerForm;
-      // 빈 문자열을 null로 변환 (DB 타입 호환)
+      const { id, created_date, updated_date, writer, company_code, _numberingRuleId, ...fields } = customerForm;
       const cleanFields: Record<string, any> = {};
       for (const [key, value] of Object.entries(fields)) {
         cleanFields[key] = value === "" ? null : value;
       }
+
       if (customerEditMode && id) {
+        // 수정
         await apiClient.put(`/table-management/tables/${CUSTOMER_TABLE}/edit`, {
           originalData: { id }, updatedData: cleanFields,
         });
-        toast.success("수정되었습니다.");
+        await saveSubTables(id, cleanFields.customer_code || customerForm.customer_code);
+        toast.success("저장되었습니다.");
       } else {
+        // 신규 등록
         await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/add`, cleanFields);
-        toast.success("등록되었습니다.");
+        // id 획득
+        const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: cleanFields.customer_code }] },
+          autoFilter: true,
+        });
+        const newRow = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+        if (newRow?.id) {
+          await saveSubTables(newRow.id, cleanFields.customer_code);
+        }
+        toast.success("거래처가 등록되었습니다.");
       }
-      setCustomerModalOpen(false);
+
       fetchCustomers();
+      fetchMainContacts();
+      if (!customerEditMode && continuousInput) {
+        // 연속입력 — 폼 초기화하고 모달 유지
+        setCustomerForm({});
+        setModalContacts([]);
+        setModalDeliveries([]);
+        setTaxTypeRows([]);
+        setCustomerModalTab("basic");
+        // 새 코드 채번
+        try {
+          const ruleRes = await apiClient.get(`/numbering-rules/by-column/${CUSTOMER_TABLE}/customer_code`);
+          const ruleData = ruleRes.data;
+          if (ruleData?.success && ruleData?.data?.ruleId) {
+            const ruleId = ruleData.data.ruleId;
+            const allRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, { page: 1, size: 500, autoFilter: true, sort: { columnName: "customer_code", order: "desc" } });
+            const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+            let maxSeq = 0;
+            for (const row of allRows) { const match = (row.customer_code || "").match(/(\d+)$/); if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; } }
+            const previewRes = await previewNumberingCode(ruleId);
+            if (previewRes.success && previewRes.data?.generatedCode) {
+              const prefix = previewRes.data.generatedCode.replace(/\d+$/, "");
+              const seqLen = (previewRes.data.generatedCode.match(/(\d+)$/) || ["", "001"])[1].length;
+              setCustomerForm({ customer_code: prefix + String(maxSeq + 1).padStart(seqLen, "0") });
+            }
+          }
+        } catch { /* skip */ }
+        toast.success("등록 완료. 다음 거래처를 입력하세요.");
+      } else {
+        setCustomerModalOpen(false);
+        // 우측 패널 갱신
+        if (selectedCustomerId) {
+          const cid = selectedCustomerId;
+          setSelectedCustomerId(null);
+          setTimeout(() => setSelectedCustomerId(cid), 50);
+        }
+      }
     } catch (err: any) {
       toast.error(err.response?.data?.message || "저장에 실패했습니다.");
     } finally {
@@ -441,7 +794,6 @@ export default function CustomerManagementPage() {
   const handleCustomerDelete = async () => {
     if (!selectedCustomerId) return;
     const ok = await confirm("거래처를 삭제하시겠습니까?", {
-      description: "관련된 품목 매핑, 단가, 납품처 정보도 함께 삭제됩니다.",
       variant: "destructive", confirmText: "삭제",
     });
     if (!ok) return;
@@ -459,19 +811,26 @@ export default function CustomerManagementPage() {
   const searchItems = async () => {
     setItemSearchLoading(true);
     try {
-      const filters: any[] = [];
+      const filters: any[] = [
+        { columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" },
+      ];
       if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
-      // 영업관리/판매품 division 필터 (다중값 contains 매칭)
-      filters.push({ columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" });
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
-        page: 1, size: 50,
-        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters },
         autoFilter: true,
       });
       const allItems = res.data?.data?.data || res.data?.data?.rows || [];
-      // 이미 등록된 품목 제외
+      setItemTotalCount(allItems.length);
       const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
-      setItemSearchResults(allItems.filter((item: any) => !existingItemIds.has(item.item_number) && !existingItemIds.has(item.id)));
+      const seenNumbers = new Set<string>();
+      const deduped = allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        if (item.item_number && seenNumbers.has(item.item_number)) return false;
+        if (item.item_number) seenNumbers.add(item.item_number);
+        return true;
+      });
+      setItemSearchResults(deduped);
     } catch { /* skip */ } finally { setItemSearchLoading(false); }
   };
 
@@ -480,7 +839,6 @@ export default function CustomerManagementPage() {
     const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
     if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
     setSelectedItemsForDetail(selected);
-    // 초기 매핑/단가 데이터 세팅
     const mappings: typeof itemMappings = {};
     const prices: typeof itemPrices = {};
     for (const item of selected) {
@@ -508,7 +866,6 @@ export default function CustomerManagementPage() {
     }));
   };
 
-  // 거래처 품번/품명 행 삭제
   const removeMappingRow = (itemKey: string, rowId: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -516,7 +873,17 @@ export default function CustomerManagementPage() {
     }));
   };
 
-  // 거래처 품번/품명 행 수정
+  const handleMappingDragEnd = (itemKey: string, event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setItemMappings((prev) => {
+      const arr = [...(prev[itemKey] || [])];
+      const oldIdx = arr.findIndex((r) => r._id === active.id);
+      const newIdx = arr.findIndex((r) => r._id === over.id);
+      return { ...prev, [itemKey]: arrayMove(arr, oldIdx, newIdx) };
+    });
+  };
+
   const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -538,7 +905,6 @@ export default function CustomerManagementPage() {
     }));
   };
 
-  // 단가 행 삭제
   const removePriceRow = (itemKey: string, rowId: string) => {
     setItemPrices((prev) => ({
       ...prev,
@@ -546,34 +912,44 @@ export default function CustomerManagementPage() {
     }));
   };
 
-  // 단가 행 값 변경
   const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
     setItemPrices((prev) => ({
       ...prev,
       [itemKey]: (prev[itemKey] || []).map((r) => {
         if (r._id !== rowId) return r;
         const updated = { ...r, [field]: value };
-        // 단가 자동 계산: base_price - discount
-        if (["base_price", "discount_type", "discount_value"].includes(field)) {
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
           const bp = Number(updated.base_price) || 0;
           const dv = Number(updated.discount_value) || 0;
           const dt = updated.discount_type;
           let calc = bp;
-          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100); // 할인율
-          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv; // 할인금액
-          updated.calculated_price = String(Math.round(calc));
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1; // "10원" → 10, "100원" → 100
+          if (roundLabel === "반올림") {
+            calc = Math.round(calc / unit) * unit;
+          } else if (roundLabel === "절삭") {
+            calc = Math.floor(calc / unit) * unit;
+          } else if (roundLabel === "올림") {
+            calc = Math.ceil(calc / unit) * unit;
+          }
+          updated.calculated_price = String(Math.floor(calc));
         }
         return updated;
       }),
     }));
   };
 
-  // 품목 상세 저장 (mapping + prices 일괄)
-  // 우측 품목 편집 열기 — 등록과 동일한 상세 입력 모달을 재활용
+  // 품목 편집 열기
   const openEditItem = async (row: any) => {
     const itemKey = row.item_number || row.item_id;
-
-    // item_info에서 품목 정보 조회
     let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
     try {
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
@@ -585,7 +961,6 @@ export default function CustomerManagementPage() {
       if (found) itemInfo = found;
     } catch { /* skip */ }
 
-    // DB에서 해당 품목의 모든 매핑 조회
     let mappingRows: any[] = [];
     try {
       const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
@@ -605,7 +980,6 @@ export default function CustomerManagementPage() {
         }));
     } catch { /* skip */ }
 
-    // DB에서 해당 품목의 모든 기간별 단가 조회
     let priceRows: any[] = [];
     try {
       const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
@@ -631,7 +1005,6 @@ export default function CustomerManagementPage() {
       }));
     } catch { /* skip */ }
 
-    // 빈 단가 행이 없으면 하나 추가
     if (priceRows.length === 0) {
       priceRows.push({
         _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
@@ -643,7 +1016,7 @@ export default function CustomerManagementPage() {
     setSelectedItemsForDetail([itemInfo]);
     setItemMappings({ [itemKey]: mappingRows });
     setItemPrices({ [itemKey]: priceRows });
-    setEditItemData(row); // 편집 모드 표시용
+    setEditItemData(row);
     setItemDetailOpen(true);
   };
 
@@ -659,44 +1032,77 @@ export default function CustomerManagementPage() {
         const mappingRows = itemMappings[itemKey] || [];
 
         if (isEditingExisting && editItemData?.id) {
-          // 편집 모드: 기존 mapping UPDATE
-          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
-            originalData: { id: editItemData.id },
-            updatedData: {
-              customer_item_code: mappingRows[0]?.customer_item_code || "",
-              customer_item_name: mappingRows[0]?.customer_item_name || "",
-              base_price: null, // prices 테이블로 이동
-              discount_type: null,
-              discount_value: null,
-              calculated_price: null,
-            },
-          });
+          // 기존 매핑 조회
+          let existingMaps: any[] = [];
+          try {
+            const existingMappings = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingMaps = existingMappings.data?.data?.data || existingMappings.data?.data?.rows || [];
+          } catch { /* skip */ }
 
-          // 기존 prices 삭제 후 재등록
+          // 매핑 upsert: 기존 것은 update, 새 것은 insert, 남은 것은 delete
+          const usedExistingIds = new Set<string>();
+          let firstMappingId: string | null = editItemData.id;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const existMap = existingMaps[mi];
+            if (existMap) {
+              // update
+              await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+                originalData: { id: existMap.id },
+                updatedData: {
+                  customer_item_code: mappingRows[mi].customer_item_code || "",
+                  customer_item_name: mappingRows[mi].customer_item_name || "",
+                },
+              });
+              usedExistingIds.add(existMap.id);
+              if (mi === 0) firstMappingId = existMap.id;
+            } else {
+              // insert
+              const mRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+                id: crypto.randomUUID(),
+                customer_id: selectedCustomer.customer_code, item_id: itemKey,
+                customer_item_code: mappingRows[mi].customer_item_code || "",
+                customer_item_name: mappingRows[mi].customer_item_name || "",
+              });
+              if (mi === 0 && !firstMappingId) firstMappingId = mRes.data?.data?.id || null;
+            }
+          }
+          // 초과분 delete
+          const toDeleteMaps = existingMaps.filter((m) => !usedExistingIds.has(m.id));
+          if (toDeleteMaps.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: toDeleteMaps.map((m: any) => ({ id: m.id })),
+            });
+          }
+
+          // 기존 단가 조회
+          let existingPriceRows: any[] = [];
           try {
             const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
               page: 1, size: 100,
               dataFilter: { enabled: true, filters: [
-                { columnName: "mapping_id", operator: "equals", value: editItemData.id },
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
               ]}, autoFilter: true,
             });
-            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
-            if (existing.length > 0) {
-              await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
-                data: existing.map((p: any) => ({ id: p.id })),
-              });
-            }
+            existingPriceRows = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
           } catch { /* skip */ }
 
-          // 새 prices INSERT
+          // 단가 upsert
           const priceRows = (itemPrices[itemKey] || []).filter((p) =>
             (p.base_price && Number(p.base_price) > 0) || p.start_date
           );
-          for (const price of priceRows) {
-            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
-              mapping_id: editItemData.id,
-              customer_id: selectedCustomer.customer_code,
-              item_id: itemKey,
+          const usedPriceIds = new Set<string>();
+          for (let pi = 0; pi < priceRows.length; pi++) {
+            const price = priceRows[pi];
+            const priceData = {
+              mapping_id: firstMappingId || editItemData.id,
+              customer_id: selectedCustomer.customer_code, item_id: itemKey,
               start_date: price.start_date || null, end_date: price.end_date || null,
               currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
               base_price: price.base_price ? Number(price.base_price) : null,
@@ -704,10 +1110,28 @@ export default function CustomerManagementPage() {
               discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
               rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
               calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            };
+            const existPrice = existingPriceRows[pi];
+            if (existPrice) {
+              await apiClient.put(`/table-management/tables/${PRICE_TABLE}/edit`, {
+                originalData: { id: existPrice.id },
+                updatedData: priceData,
+              });
+              usedPriceIds.add(existPrice.id);
+            } else {
+              await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+                id: crypto.randomUUID(), ...priceData,
+              });
+            }
+          }
+          // 초과분 delete
+          const toDeletePrices = existingPriceRows.filter((p) => !usedPriceIds.has(p.id));
+          if (toDeletePrices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: toDeletePrices.map((p: any) => ({ id: p.id })),
             });
           }
         } else {
-          // 신규 등록 모드 — 거래처 품번이 없는 경우만 중복 체크
           if (!mappingRows.length || !mappingRows[0]?.customer_item_code) {
             const existingCheck = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
               page: 1, size: 1,
@@ -724,6 +1148,7 @@ export default function CustomerManagementPage() {
 
           let mappingId: string | null = null;
           const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
             customer_id: selectedCustomer.customer_code, item_id: itemKey,
             customer_item_code: mappingRows[0]?.customer_item_code || "",
             customer_item_name: mappingRows[0]?.customer_item_name || "",
@@ -732,6 +1157,7 @@ export default function CustomerManagementPage() {
 
           for (let mi = 1; mi < mappingRows.length; mi++) {
             await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
               customer_id: selectedCustomer.customer_code, item_id: itemKey,
               customer_item_code: mappingRows[mi].customer_item_code || "",
               customer_item_name: mappingRows[mi].customer_item_name || "",
@@ -743,6 +1169,7 @@ export default function CustomerManagementPage() {
           );
           for (const price of priceRows) {
             await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
               mapping_id: mappingId || "", customer_id: selectedCustomer.customer_code, item_id: itemKey,
               start_date: price.start_date || null, end_date: price.end_date || null,
               currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
@@ -759,7 +1186,6 @@ export default function CustomerManagementPage() {
       setItemDetailOpen(false);
       setEditItemData(null);
       setItemCheckedIds(new Set());
-      // 우측 새로고침
       const cid = selectedCustomerId;
       setSelectedCustomerId(null);
       setTimeout(() => setSelectedCustomerId(cid), 50);
@@ -771,26 +1197,7 @@ export default function CustomerManagementPage() {
     }
   };
 
-  // 납품처 저장
-  const handleDeliverySave = async () => {
-    if (!deliveryForm.destination_name || !selectedCustomer) return;
-    try {
-      await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
-        ...deliveryForm,
-        customer_code: selectedCustomer.customer_code,
-      });
-      toast.success("납품처가 등록되었습니다.");
-      setDeliveryModalOpen(false);
-      // 납품처 목록 새로고침
-      const cid = selectedCustomerId;
-      setSelectedCustomerId(null);
-      setTimeout(() => setSelectedCustomerId(cid), 50);
-    } catch (err: any) {
-      toast.error(err.response?.data?.message || "납품처 등록에 실패했습니다.");
-    }
-  };
-
-  // 우측: 품목 매핑 삭제 (관련 단가도 함께 삭제)
+  // 품목 매핑 삭제
   const handlePriceItemDelete = async () => {
     if (priceCheckedIds.length === 0) return;
     const ok = await confirm(`선택한 ${priceCheckedIds.length}개 품목 매핑을 삭제하시겠습니까?`, {
@@ -799,8 +1206,6 @@ export default function CustomerManagementPage() {
     });
     if (!ok) return;
     try {
-      // 매핑 삭제 — 관련 단가는 서버에서 cascade 또는 별도 삭제
-      // 먼저 관련 단가 삭제 시도
       for (const mappingId of priceCheckedIds) {
         try {
           const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
@@ -816,13 +1221,11 @@ export default function CustomerManagementPage() {
           }
         } catch { /* skip */ }
       }
-      // 매핑 삭제
       await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
         data: priceCheckedIds.map((id) => ({ id })),
       });
       toast.success(`${priceCheckedIds.length}개 품목 매핑이 삭제되었습니다.`);
       setPriceCheckedIds([]);
-      // 우측 새로고침
       const cid = selectedCustomerId;
       setSelectedCustomerId(null);
       setTimeout(() => setSelectedCustomerId(cid), 50);
@@ -831,71 +1234,78 @@ export default function CustomerManagementPage() {
     }
   };
 
-  // 우측: 납품처 삭제
-  const handleDeliveryDelete = async () => {
-    if (deliveryCheckedIds.length === 0) return;
-    const ok = await confirm(`선택한 ${deliveryCheckedIds.length}개 납품처를 삭제하시겠습니까?`, {
-      variant: "destructive", confirmText: "삭제",
-    });
-    if (!ok) return;
-    try {
-      await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
-        data: deliveryCheckedIds.map((id) => ({ id })),
-      });
-      toast.success(`${deliveryCheckedIds.length}개 납품처가 삭제되었습니다.`);
-      setDeliveryCheckedIds([]);
-      // 우측 새로고침
-      const cid = selectedCustomerId;
-      setSelectedCustomerId(null);
-      setTimeout(() => setSelectedCustomerId(cid), 50);
-    } catch {
-      toast.error("삭제에 실패했습니다.");
-    }
-  };
+  // EDataTable 컬럼 정의 (거래처 목록) — ts.visibleColumns 순서를 따름
+  const customerColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      customer_code: { width: "w-[120px]" },
+      customer_name: { minWidth: "min-w-[140px]" },
+      division: {
+        width: "w-[80px]",
+        render: (val: any) =>
+          val ? (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
+              {val}
+            </Badge>
+          ) : null,
+      },
+      contact_person: { width: "w-[80px]" },
+      contact_phone: { width: "w-[120px]" },
+      email: { width: "w-[160px]" },
+      business_number: { width: "w-[120px]" },
+      address: { minWidth: "min-w-[150px]" },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val}
+            </Badge>
+          ) : null,
+      },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
 
   // 엑셀 다운로드
   const handleExcelDownload = async () => {
     if (customers.length === 0) return;
     toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
     try {
-      // 전체 거래처의 품목 매핑 + 단가 조회
       const allMappings: any[] = [];
-      const custCodes = customers.map((c) => c.customer_code).filter(Boolean);
-
-      if (custCodes.length > 0) {
-        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
-          page: 1, size: 5000, autoFilter: true,
-        });
-        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
-
-        // item_id → item_info 조인
-        const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
-        let itemMap: Record<string, any> = {};
-        if (itemIds.length > 0) {
-          try {
-            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
-              page: 1, size: itemIds.length + 10,
-              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
-              autoFilter: true,
-            });
-            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
-              itemMap[item.item_number] = item;
-            }
-          } catch { /* skip */ }
-        }
-
-        for (const m of mappings) {
-          const itemInfo = itemMap[m.item_id] || {};
-          allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
-        }
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 5000, autoFilter: true,
+      });
+      const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemIds.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+            autoFilter: true,
+          });
+          for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+            itemMap[item.item_number] = item;
+          }
+        } catch { /* skip */ }
+      }
+      for (const m of mappings) {
+        const itemInfo = itemMap[m.item_id] || {};
+        allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
       }
 
-      // 거래처 + 품목 플랫 데이터 생성
       const rows: Record<string, any>[] = [];
       for (const c of customers) {
         const custMappings = allMappings.filter((m) => m.customer_id === c.customer_code);
         if (custMappings.length === 0) {
-          // 품목 없는 거래처도 1행
           rows.push({
             거래처코드: c.customer_code, 거래처명: c.customer_name,
             거래유형: getCategoryLabel("division", c.division),
@@ -922,360 +1332,1140 @@ export default function CustomerManagementPage() {
           }
         }
       }
-
       await exportToExcel(rows, "거래처관리.xlsx", "거래처+품목");
       toast.dismiss("excel-dl");
       toast.success(`${rows.length}행 다운로드 완료`);
     } catch (err) {
       toast.dismiss("excel-dl");
-      console.error("엑셀 다운로드 실패:", err);
       toast.error("다운로드에 실패했습니다.");
     }
   };
 
-  // 셀렉트 렌더링
-  const renderSelect = (field: string, value: string, onChange: (v: string) => void, placeholder: string) => (
-    <Select value={value || "__none__"} onValueChange={(v) => onChange(v === "__none__" ? "" : v)}>
-      <SelectTrigger className="h-9"><SelectValue placeholder={placeholder} /></SelectTrigger>
-      <SelectContent>
-        <SelectItem value="__none__">선택 안 함</SelectItem>
-        {(categoryOptions[field] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-      </SelectContent>
-    </Select>
-  );
-
   return (
-    <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
       <DynamicSearchFilter
         tableName={CUSTOMER_TABLE}
-        filterId="customer-mng"
+        filterId="c16-customer"
         onFilterChange={setSearchFilters}
-        dataCount={customerCount}
-        externalFilterConfig={filterConfig}
-        extraActions={
-          <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" disabled={excelDetecting}
-              onClick={async () => {
-                setExcelDetecting(true);
-                try {
-                  const result = await autoDetectMultiTableConfig(CUSTOMER_TABLE);
-                  if (result.success && result.data) {
-                    setExcelChainConfig(result.data);
-                    setExcelUploadOpen(true);
-                  } else {
-                    toast.error(result.message || "테이블 구조 분석 실패");
-                  }
-                } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
-              }}>
-              {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />} 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
-              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
-            </Button>
-          </div>
-        }
+        dataCount={customers.length}
+        externalFilterConfig={ts.filterConfig}
       />
 
-      {/* 분할 패널 */}
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button
+            variant="outline" size="sm" className="h-8" disabled={excelDetecting}
+            onClick={async () => {
+              setExcelDetecting(true);
+              try {
+                const result = await autoDetectMultiTableConfig(CUSTOMER_TABLE);
+                if (result.success && result.data) {
+                  setExcelChainConfig(result.data);
+                  setExcelUploadOpen(true);
+                } else {
+                  toast.error(result.message || "테이블 구조 분석 실패");
+                }
+              } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+            }}
+          >
+            {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />}
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
       <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
         <ResizablePanelGroup direction="horizontal">
           {/* 좌측: 거래처 목록 */}
           <ResizablePanel defaultSize={55} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Users className="w-4 h-4" /> 거래처 목록
-                  <Badge variant="secondary" className="font-normal">{customerCount}건</Badge>
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">거래처 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {customerCount}건
+                  </span>
                 </div>
-                <div className="flex gap-1.5">
-                  <Button size="sm" onClick={openCustomerRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
-                  <Button variant="outline" size="sm" disabled={!selectedCustomerId} onClick={openCustomerEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
-                  <Button variant="destructive" size="sm" disabled={!selectedCustomerId} onClick={handleCustomerDelete}><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                <div className="flex items-center gap-1.5">
+                  <label className="flex items-center gap-1.5 cursor-pointer mr-1">
+                    <input type="checkbox" checked={showInactive} onChange={(e) => setShowInactive(e.target.checked)} className="rounded" />
+                    <span className="text-[11px] text-muted-foreground">거래정지 포함</span>
+                  </label>
+                  <Button size="sm" onClick={openCustomerRegister}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedCustomerId} onClick={openCustomerEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedCustomerId} onClick={handleCustomerDelete}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid
-                gridId="customer-left"
-                columns={gridColumns}
-                data={customers}
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={customerColumns}
+                data={ts.groupData(showInactive ? customers : customers.filter((c) => c.status !== "거래정지"))}
+                rowKey={(row) => row.id}
                 loading={customerLoading}
+                emptyMessage="등록된 거래처가 없어요"
                 selectedId={selectedCustomerId}
-                onSelect={setSelectedCustomerId}
-                onRowDoubleClick={() => openCustomerEdit()}
-                tableName={CUSTOMER_TABLE}
-                emptyMessage="등록된 거래처가 없습니다"
+                onSelect={(id) => setSelectedCustomerId(id)}
+                onRowDoubleClick={(row) => { setSelectedCustomerId(row.id); openCustomerEdit(); }}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-customer"
               />
             </div>
           </ResizablePanel>
 
           <ResizableHandle withHandle />
 
-          {/* 우측: 탭 (품목 정보 / 납품처) */}
+          {/* 우측: 디테일 패널 */}
           <ResizablePanel defaultSize={45} minSize={25}>
             <div className="flex flex-col h-full">
-              {/* 탭 헤더 */}
-              <div className="flex items-center justify-between p-2 border-b bg-muted/10 shrink-0">
-                <div className="flex items-center gap-1">
-                  <button onClick={() => setRightTab("items")}
-                    className={cn("px-3 py-1.5 text-sm rounded-md transition-colors",
-                      rightTab === "items" ? "bg-primary text-primary-foreground font-medium" : "hover:bg-muted text-muted-foreground")}>
-                    <Package className="w-3.5 h-3.5 inline mr-1" />품목 정보
-                  </button>
-                  <button onClick={() => setRightTab("delivery")}
-                    className={cn("px-3 py-1.5 text-sm rounded-md transition-colors",
-                      rightTab === "delivery" ? "bg-primary text-primary-foreground font-medium" : "hover:bg-muted text-muted-foreground")}>
-                    <MapPin className="w-3.5 h-3.5 inline mr-1" />납품처
-                    {deliveryItems.length > 0 && <Badge variant="secondary" className="ml-1 text-[10px] px-1">{deliveryItems.length}</Badge>}
-                  </button>
-                  {selectedCustomer && <Badge variant="outline" className="font-normal ml-2 text-xs">{selectedCustomer.customer_name}</Badge>}
-                </div>
-                <div className="flex gap-1.5">
-                  {rightTab === "items" && (
-                    <>
-                      <Button variant="outline" size="sm" disabled={!selectedCustomerId}
-                        onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
-                        <Plus className="w-3.5 h-3.5 mr-1" /> 품목 추가
-                      </Button>
-                      <Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0}
-                        onClick={handlePriceItemDelete}>
-                        <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
-                      </Button>
-                    </>
-                  )}
-                  {rightTab === "delivery" && (
-                    <>
-                      <Button variant="outline" size="sm" disabled={!selectedCustomerId}
-                        onClick={() => { setDeliveryForm({}); setDeliveryModalOpen(true); }}>
-                        <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 등록
-                      </Button>
-                      <Button variant="destructive" size="sm" disabled={deliveryCheckedIds.length === 0}
-                        onClick={handleDeliveryDelete}>
-                        <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
-                      </Button>
-                    </>
-                  )}
-                </div>
-              </div>
-
-              {/* 탭 콘텐츠 */}
               {!selectedCustomerId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
-                  좌측에서 거래처를 선택하세요
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">거래처를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 거래처를 선택하면 상세 정보가 표시돼요</div>
+                  </div>
                 </div>
-              ) : rightTab === "items" ? (
-                <DataGrid
-                  gridId="customer-right-items"
-                  columns={RIGHT_COLUMNS}
-                  data={priceItems}
-                  loading={priceLoading}
-                  showRowNumber={false}
-                  showCheckbox
-                  checkedIds={priceCheckedIds}
-                  onCheckedChange={setPriceCheckedIds}
-                  tableName={MAPPING_TABLE}
-                  emptyMessage="등록된 품목이 없습니다"
-                  onRowDoubleClick={(row) => openEditItem(row)}
-                />
               ) : (
-                <DataGrid
-                  gridId="customer-right-delivery"
-                  columns={[
-                    { key: "destination_code", label: "납품처코드", width: "w-[110px]" },
-                    { key: "destination_name", label: "납품처명", minWidth: "min-w-[130px]" },
-                    { key: "address", label: "주소", minWidth: "min-w-[150px]" },
-                    { key: "manager_name", label: "담당자", width: "w-[80px]" },
-                    { key: "phone", label: "전화번호", width: "w-[110px]" },
-                    { key: "memo", label: "메모", width: "w-[100px]" },
-                    { key: "is_default", label: "기본", width: "w-[50px]" },
-                  ]}
-                  data={deliveryItems}
-                  loading={deliveryLoading}
-                  showRowNumber={false}
-                  showCheckbox
-                  checkedIds={deliveryCheckedIds}
-                  onCheckedChange={setDeliveryCheckedIds}
-                  tableName={DELIVERY_TABLE}
-                  emptyMessage="등록된 납품처가 없습니다"
-                />
+                <>
+                  {/* 탭 + 버튼 통합 헤더 */}
+                  <Tabs
+                    value={rightTab}
+                    onValueChange={(v) => setRightTab(v as "items" | "delivery")}
+                    className="flex flex-col flex-1 overflow-hidden gap-0"
+                  >
+                    <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                      <TabsList className="bg-transparent h-auto p-0 rounded-none">
+                        <TabsTrigger
+                          value="items"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <Package className="w-3.5 h-3.5" /> 거래처별 품목정보
+                          {Object.keys(priceGroups).length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{Object.keys(priceGroups).length}</Badge>
+                          )}
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="delivery"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <MapPin className="w-3.5 h-3.5" /> 납품처 정보
+                          {deliveryItems.length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{deliveryItems.length}</Badge>
+                          )}
+                        </TabsTrigger>
+                      </TabsList>
+                      <div className="flex gap-1.5">
+                        {rightTab === "items" ? (
+                          <>
+                            <Button size="sm" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
+                              <Plus className="w-3.5 h-3.5" /> 품목 추가
+                            </Button>
+                            <Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0} onClick={handlePriceItemDelete}>
+                              <Trash2 className="w-3.5 h-3.5" /> 삭제
+                            </Button>
+                          </>
+                        ) : (
+                          <Button size="sm" variant="outline" onClick={openCustomerEdit}>
+                            <Pencil className="w-3.5 h-3.5 mr-1" /> 거래처 수정에서 관리
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 품목정보 탭 */}
+                    <TabsContent value="items" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[40px] text-center px-2">
+                                <input
+                                  type="checkbox"
+                                  className="rounded"
+                                  checked={priceItems.length > 0 && priceCheckedIds.length === priceItems.length}
+                                  onChange={(e) => setPriceCheckedIds(e.target.checked ? priceItems.map((p) => p.id) : [])}
+                                />
+                              </TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                              <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품번</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품명</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                              <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                              <TableHead className="w-[60px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                              <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {priceLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.keys(priceGroups).length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 품목이 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.entries(priceGroups).map(([itemKey, group]) => {
+                              const isExpanded = expandedItems.has(itemKey);
+                              const m = group.master;
+                              const isChecked = priceCheckedIds.includes(m.id);
+                              return (
+                                <React.Fragment key={itemKey}>
+                                  {/* 마스터 행 */}
+                                  <TableRow
+                                    className={cn(
+                                      "cursor-pointer border-l-[3px] border-l-transparent h-[41px]",
+                                      isChecked && "bg-primary/5 border-l-primary"
+                                    )}
+                                    onClick={() => {
+                                      setExpandedItems((prev) => {
+                                        const next = new Set(prev);
+                                        if (next.has(itemKey)) next.delete(itemKey); else next.add(itemKey);
+                                        return next;
+                                      });
+                                    }}
+                                    onDoubleClick={() => openEditItem(m)}
+                                  >
+                                    <TableCell
+                                      className="text-center px-2"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        setPriceCheckedIds((prev) =>
+                                          prev.includes(m.id) ? prev.filter((id) => id !== m.id) : [...prev, m.id]
+                                        );
+                                      }}
+                                    >
+                                      <input type="checkbox" className="rounded" checked={isChecked} readOnly />
+                                    </TableCell>
+                                    <TableCell className="text-[13px] font-mono">
+                                      <div className="flex items-center gap-1">
+                                        {isExpanded
+                                          ? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                          : <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                        }
+                                        {m.item_number}
+                                      </div>
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.customer_item_code}</TableCell>
+                                    <TableCell className="text-[13px]">{m.customer_item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.base_price_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">
+                                      {m.base_price ? Number(m.base_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.discount_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">{m.discount_value ? Number(m.discount_value).toLocaleString() : ""}</TableCell>
+                                    <TableCell className="text-[13px] text-right font-semibold">
+                                      {m.calculated_price ? Number(m.calculated_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.currency_code}</TableCell>
+                                  </TableRow>
+
+                                  {/* 현재 단가 카드 (펼쳤을 때) */}
+                                  {isExpanded && (() => {
+                                    const cp = group.details.find((p) => p.is_current) || group.details[0];
+                                    if (!cp) return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="py-3 px-4 text-xs text-muted-foreground">등록된 단가가 없어요</TableCell>
+                                      </TableRow>
+                                    );
+                                    return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="px-4 py-3">
+                                          <div className="border border-primary/20 rounded-lg bg-card overflow-hidden">
+                                            {/* 카드 헤더 */}
+                                            <div className="flex items-center justify-between px-4 py-2 bg-primary/[0.04] border-b border-primary/10">
+                                              <div className="flex items-center gap-2">
+                                                <Coins className="w-3.5 h-3.5 text-primary" />
+                                                <span className="text-xs font-semibold">적용 단가</span>
+                                                <Badge variant="secondary" className="text-[9px] px-1.5 py-0 bg-primary/10 text-primary">현재</Badge>
+                                              </div>
+                                              {group.details.length > 1 && (
+                                                <span className="text-[10px] text-muted-foreground">전체 {group.details.length}건 중</span>
+                                              )}
+                                            </div>
+                                            {/* 카드 내용 */}
+                                            <div className="px-5 py-3.5 flex items-end gap-0 text-[13px]">
+                                              <div className="flex flex-col pr-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기간</span>
+                                                <span className="font-mono text-muted-foreground text-xs">
+                                                  {cp.start_date ? String(cp.start_date).split("T")[0] : "—"} ~ {cp.end_date ? String(cp.end_date).split("T")[0] : "—"}
+                                                </span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준유형</span>
+                                                <span>{cp.base_price_type_label || "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준가</span>
+                                                <span className="font-mono font-medium">{cp.base_price ? Number(cp.base_price).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인유형</span>
+                                                <span>{cp.discount_type_label && cp.discount_type_label !== "할인없음" ? cp.discount_type_label : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인값</span>
+                                                <span className="font-mono">{cp.discount_value ? Number(cp.discount_value).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">단수처리</span>
+                                                <span>
+                                                  {cp.rounding_unit_value
+                                                    ? (priceCategoryOptions["rounding_unit_value"]?.find((o) => o.code === cp.rounding_unit_value)?.label || cp.rounding_unit_value)
+                                                    : "-"}
+                                                </span>
+                                              </div>
+                                              <span className="text-primary/50 px-4 pb-0.5 text-lg">→</span>
+                                              <div className="flex flex-col pl-1">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">계산단가</span>
+                                                <span className="text-base font-bold font-mono text-foreground">
+                                                  {(cp.calculated_price || cp.unit_price) ? Number(cp.calculated_price || cp.unit_price).toLocaleString() : "-"}
+                                                  <span className="text-xs font-normal text-muted-foreground ml-1.5">{cp.currency_label}</span>
+                                                </span>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })()}
+                                </React.Fragment>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+
+                    {/* 납품처 탭 */}
+                    <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                              <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                              <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                              <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {deliveryLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 납품처가 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.map((d) => (
+                              <TableRow key={d.id} className="h-[41px]">
+                                <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                                <TableCell className="text-sm">{d.destination_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                                <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                                <TableCell className="text-[13px]">{d.phone}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                                <TableCell className="text-center">
+                                  {d.is_default && (
+                                    <Badge variant="default" className="text-[10px] px-1.5 py-0 h-5">메인</Badge>
+                                  )}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </>
               )}
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>
       </div>
 
-      {/* 거래처 등록/수정 모달 */}
-      <Dialog open={customerModalOpen} onOpenChange={setCustomerModalOpen}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
+      {/* ── 모달: 거래처 등록/수정 (3탭) ── */}
+      <Dialog open={customerModalOpen} onOpenChange={(open) => {
+        if (!open && isConfirmOpenRef.current) return;
+        setCustomerModalOpen(open);
+        if (!open) {
+          setModalContactFormOpen(false);
+          setModalDeliveryFormOpen(false);
+          setModalContactForm({});
+          setModalDeliveryForm({});
+          setModalContactEditId(null);
+          setModalDeliveryEditId(null);
+          fetchCustomers();
+          if (customerForm.customer_code) {
+            const cid = selectedCustomerId;
+            setSelectedCustomerId(null);
+            setTimeout(() => setSelectedCustomerId(cid), 50);
+          }
+        }
+      }}>
+        <DialogContent className="max-w-4xl h-[85vh] flex flex-col overflow-hidden p-0">
+          <DialogHeader className="px-6 pt-5 pb-0 shrink-0">
             <DialogTitle>{customerEditMode ? "거래처 수정" : "거래처 등록"}</DialogTitle>
-            <DialogDescription>{customerEditMode ? "거래처 정보를 수정합니다." : "새로운 거래처를 등록합니다."}</DialogDescription>
+            <DialogDescription>
+              {customerEditMode ? "거래처 정보를 수정합니다." : "새로운 거래처를 등록합니다."}
+            </DialogDescription>
           </DialogHeader>
-          <div className="grid grid-cols-2 gap-4 py-4">
-            <div className="space-y-1.5">
-              <Label className="text-sm">거래처 코드</Label>
-              <Input value={customerForm.customer_code || ""} onChange={(e) => setCustomerForm((p) => ({ ...p, customer_code: e.target.value }))}
-                placeholder="거래처 코드" className="h-9" disabled={customerEditMode} />
+
+          <Tabs value={customerModalTab} onValueChange={(v: any) => setCustomerModalTab(v)} className="flex flex-col flex-1 overflow-hidden">
+            <div className="shrink-0">
+              <TabsList className="bg-transparent w-full h-auto p-0 rounded-none gap-0">
+                <TabsTrigger value="basic" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  기본정보
+                </TabsTrigger>
+                <TabsTrigger value="contacts" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  담당자 관리
+                  {modalContacts.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalContacts.length}</span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="delivery" className="flex-1 rounded-none py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  납품처 관리
+                  {modalDeliveries.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalDeliveries.length}</span>
+                  )}
+                </TabsTrigger>
+              </TabsList>
             </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">거래처명 <span className="text-destructive">*</span></Label>
-              <Input value={customerForm.customer_name || ""} onChange={(e) => setCustomerForm((p) => ({ ...p, customer_name: e.target.value }))}
-                placeholder="거래처명" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">거래 유형</Label>
-              {renderSelect("division", customerForm.division, (v) => setCustomerForm((p) => ({ ...p, division: v })), "거래 유형")}
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
-              {renderSelect("status", customerForm.status, (v) => setCustomerForm((p) => ({ ...p, status: v })), "상태")}
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">거래처담당자</Label>
-              <Input value={customerForm.contact_person || ""} onChange={(e) => setCustomerForm((p) => ({ ...p, contact_person: e.target.value }))}
-                placeholder="거래처담당자" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">사내담당자</Label>
-              <Select value={customerForm.internal_manager || "__none__"} onValueChange={(v) => setCustomerForm((p) => ({ ...p, internal_manager: v === "__none__" ? "" : v }))}>
-                <SelectTrigger className="h-9"><SelectValue placeholder="사내담당자 선택" /></SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="__none__">선택 안 함</SelectItem>
-                  {employeeOptions.map((emp) => (
-                    <SelectItem key={emp.user_id} value={emp.user_id}>
-                      {emp.user_name}{emp.position_name ? ` (${emp.position_name})` : ""}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">전화번호</Label>
-              <Input value={customerForm.contact_phone || ""} onChange={(e) => handleFormChange("contact_phone", e.target.value)}
-                placeholder="010-0000-0000" className={cn("h-9", formErrors.contact_phone && "border-destructive")} />
-              {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">이메일</Label>
-              <Input value={customerForm.email || ""} onChange={(e) => handleFormChange("email", e.target.value)}
-                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
-              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">사업자번호</Label>
-              <Input value={customerForm.business_number || ""} onChange={(e) => handleFormChange("business_number", e.target.value)}
-                placeholder="000-00-00000" className={cn("h-9", formErrors.business_number && "border-destructive")} />
-              {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
-            </div>
-            <div className="space-y-1.5 col-span-2">
-              <Label className="text-sm">주소</Label>
-              <Input value={customerForm.address || ""} onChange={(e) => setCustomerForm((p) => ({ ...p, address: e.target.value }))}
-                placeholder="주소" className="h-9" />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setCustomerModalOpen(false)}>취소</Button>
+
+            {/* 기본정보 탭 */}
+            <TabsContent value="basic" className="flex-1 overflow-y-auto mt-0">
+              <div className="px-6 py-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처 코드</Label>
+                    <Input
+                      value={customerForm.customer_code || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, customer_code: e.target.value }))}
+                      placeholder={customerEditMode ? "" : "자동 생성"}
+                      className={cn("h-9 font-mono", !customerEditMode && customerForm.customer_code && "bg-muted")}
+                      readOnly={!customerEditMode && !!customerForm.customer_code}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={customerForm.customer_name || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, customer_name: e.target.value }))}
+                      placeholder="거래처명"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래 유형</Label>
+                    <Select
+                      value={customerForm.division || "__none__"}
+                      onValueChange={(v) => setCustomerForm((p) => ({ ...p, division: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="거래 유형" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["division"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+                    <Select
+                      value={customerForm.status || "__none__"}
+                      onValueChange={(v) => setCustomerForm((p) => ({ ...p, status: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="상태" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처담당자</Label>
+                    <Input
+                      value={customerForm.contact_person || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, contact_person: e.target.value }))}
+                      placeholder="거래처담당자"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">전화번호</Label>
+                    <Input
+                      value={customerForm.contact_phone || ""}
+                      onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                      placeholder="010-0000-0000"
+                      className={cn("h-9", formErrors.contact_phone && "border-destructive")}
+                    />
+                    {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">이메일</Label>
+                    <Input
+                      value={customerForm.email || ""}
+                      onChange={(e) => handleFormChange("email", e.target.value)}
+                      placeholder="example@email.com"
+                      className={cn("h-9", formErrors.email && "border-destructive")}
+                    />
+                    {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">사업자번호</Label>
+                    <Input
+                      value={customerForm.business_number || ""}
+                      onChange={(e) => handleFormChange("business_number", e.target.value)}
+                      placeholder="000-00-00000"
+                      className={cn("h-9", formErrors.business_number && "border-destructive")}
+                    />
+                    {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+                  </div>
+                  <div className="space-y-1.5 col-span-2">
+                    <Label className="text-sm">주소</Label>
+                    <Input
+                      value={customerForm.address || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="주소"
+                      className="h-9"
+                    />
+                  </div>
+                </div>
+
+                {/* 세금유형 */}
+                <div className="mt-4 pt-4 border-t">
+                  <div className="flex items-center justify-between mb-2">
+                    <Label className="text-sm font-semibold flex items-center gap-1.5">
+                      <Coins className="w-3.5 h-3.5 text-primary" /> 세금유형
+                    </Label>
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => {
+                      setTaxTypeRows((prev) => [...prev, { _id: `tax_${Date.now()}_${Math.random()}`, tax_type_name: "", rate: "" }]);
+                    }}>
+                      <Plus className="h-3 w-3 mr-1" /> 추가
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    {taxTypeRows.map((row, idx) => (
+                      <div key={row._id} className="flex gap-2 items-center">
+                        <span className="text-xs text-muted-foreground w-4 shrink-0">{idx + 1}</span>
+                        <Select value={row.tax_type_name} onValueChange={(v) => {
+                          setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, tax_type_name: v } : r));
+                        }}>
+                          <SelectTrigger className="h-9 text-[13px] flex-1"><SelectValue placeholder="세금유형 선택" /></SelectTrigger>
+                          <SelectContent>
+                            {taxTypeOptions.map((o) => (
+                              <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <Input
+                          value={row.rate}
+                          onChange={(e) => {
+                            const v = e.target.value.replace(/[^\d.]/g, "");
+                            setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, rate: v } : r));
+                          }}
+                          placeholder="세율 %"
+                          className="h-9 text-[13px] w-[80px] text-right"
+                        />
+                        <span className="text-xs text-muted-foreground">%</span>
+                        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                          onClick={() => setTaxTypeRows((prev) => prev.filter((r) => r._id !== row._id))}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* 담당자 관리 탭 */}
+            <TabsContent value="contacts" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 담당자 목록 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    담당자 {modalContacts.length}명
+                  </span>
+                  <Button size="sm" onClick={() => {
+                    setModalContactForm({});
+                    setModalContactEditId(null);
+                    setModalContactFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 담당자 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalContactLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalContacts.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Users className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 담당자가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자명</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부서</TableHead>
+                          <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalContacts].sort((a, b) => {
+                          const aMain = a.is_main === "Y" || a.is_main === true ? 0 : 1;
+                          const bMain = b.is_main === "Y" || b.is_main === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((c) => (
+                          <TableRow key={c._localId || c.id} className="h-[41px]">
+                            <TableCell className="text-sm font-medium">{c.contact_name}</TableCell>
+                            <TableCell className="text-[13px]">{c.contact_phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.contact_email}</TableCell>
+                            <TableCell className="text-[13px]">{c.department}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (c.is_main === "Y" || c.is_main === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = c.is_main === "Y" || c.is_main === true;
+                                  if (isCurrentMain) {
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id) ? { ...item, is_main: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== (c._localId || c.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id)
+                                        ? { ...item, is_main: "Y" }
+                                        : { ...item, is_main: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(c.is_main === "Y" || c.is_main === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalContactForm({ ...c });
+                                    setModalContactEditId(c._localId || c.id);
+                                    setModalContactFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalContactDelete(c._localId || c.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 담당자 폼 (인라인) */}
+                {modalContactFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalContactEditId ? "담당자 수정" : "담당자 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalContactForm.contact_name || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_name: e.target.value }))}
+                          placeholder="담당자명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalContactForm.contact_phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalContactForm((p) => ({ ...p, contact_phone: formatted }));
+                          }}
+                          placeholder="010-0000-0000"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">이메일</Label>
+                        <Input
+                          value={modalContactForm.contact_email || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_email: e.target.value }))}
+                          placeholder="example@email.com"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">부서</Label>
+                        <Input
+                          value={modalContactForm.department || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, department: e.target.value }))}
+                          placeholder="부서명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalContactForm.memo || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalContactForm.is_main === "Y" || modalContactForm.is_main === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== modalContactEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalContacts((prev) => prev.map((item) => ({ ...item, is_main: "N" })));
+                                }
+                                setModalContactForm((p) => ({ ...p, is_main: "Y" }));
+                              } else {
+                                setModalContactForm((p) => ({ ...p, is_main: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 담당자</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalContactFormOpen(false); setModalContactForm({}); setModalContactEditId(null); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalContactSave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalContactEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            {/* ── 탭3: 납품처 관리 ── */}
+            <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 납품처 목록 헤더 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    납품처 {modalDeliveries.length}개
+                  </span>
+                  <Button size="sm" onClick={async () => {
+                    const code = await generateDeliveryCode();
+                    setModalDeliveryForm({ destination_code: code });
+                    setModalDeliveryEditId(null);
+                    setModalDeliveryFormErrors({});
+                    setModalDeliveryFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalDeliveryLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalDeliveries.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <MapPin className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 납품처가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalDeliveries].sort((a, b) => {
+                          const aMain = a.is_default === "Y" || a.is_default === true ? 0 : 1;
+                          const bMain = b.is_default === "Y" || b.is_default === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((d) => (
+                          <TableRow key={d._localId || d.id || d.destination_code} className="h-[41px]">
+                            <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                            <TableCell className="text-sm">{d.destination_name}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                            <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                            <TableCell className="text-[13px]">{d.phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (d.is_default === "Y" || d.is_default === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = d.is_default === "Y" || d.is_default === true;
+                                  if (isCurrentMain) {
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id) ? { ...item, is_default: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== (d._localId || d.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id)
+                                        ? { ...item, is_default: "Y" }
+                                        : { ...item, is_default: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(d.is_default === "Y" || d.is_default === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalDeliveryForm({ ...d });
+                                    setModalDeliveryEditId(d._localId || d.id);
+                                    setModalDeliveryFormErrors({});
+                                    setModalDeliveryFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalDeliveryDelete(d._localId || d.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 납품처 폼 (인라인) */}
+                {modalDeliveryFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalDeliveryEditId ? "납품처 수정" : "납품처 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처코드</Label>
+                        <Input
+                          value={modalDeliveryForm.destination_code || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
+                          placeholder="자동 생성"
+                          className={cn("h-8 text-sm font-mono", modalDeliveryForm.destination_code && "bg-muted")}
+                          readOnly={!!modalDeliveryForm.destination_code && !modalDeliveryEditId}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalDeliveryForm.destination_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
+                          placeholder="납품처명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자</Label>
+                        <Input
+                          value={modalDeliveryForm.manager_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
+                          placeholder="담당자"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 col-span-2">
+                        <Label className="text-xs">주소</Label>
+                        <Input
+                          value={modalDeliveryForm.address || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, address: e.target.value }))}
+                          placeholder="주소"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalDeliveryForm.phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalDeliveryForm((p) => ({ ...p, phone: formatted }));
+                            const err = validateField("phone", formatted);
+                            setModalDeliveryFormErrors((p) => {
+                              const n = { ...p };
+                              if (err) n.phone = err; else delete n.phone;
+                              return n;
+                            });
+                          }}
+                          placeholder="010-0000-0000"
+                          className={cn("h-8 text-sm", modalDeliveryFormErrors.phone && "border-destructive")}
+                        />
+                        {modalDeliveryFormErrors.phone && <p className="text-xs text-destructive">{modalDeliveryFormErrors.phone}</p>}
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalDeliveryForm.memo || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== modalDeliveryEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalDeliveries((prev) => prev.map((item) => ({ ...item, is_default: "N" })));
+                                }
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "Y" }));
+                              } else {
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 납품처로 설정</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalDeliveryFormOpen(false); setModalDeliveryForm({}); setModalDeliveryEditId(null); setModalDeliveryFormErrors({}); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalDeliverySave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalDeliveryEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+          <div className="border-t px-6 py-3 flex items-center gap-2 shrink-0">
+            {!customerEditMode && (
+              <label className="flex items-center gap-2 cursor-pointer mr-auto">
+                <input type="checkbox" checked={continuousInput} onChange={(e) => setContinuousInput(e.target.checked)} className="rounded" />
+                <span className="text-sm font-medium">연속입력</span>
+              </label>
+            )}
+            <Button variant="outline" onClick={() => setCustomerModalOpen(false)}>닫기</Button>
             <Button onClick={handleCustomerSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {customerEditMode ? "저장" : "등록"}
             </Button>
-          </DialogFooter>
+          </div>
         </DialogContent>
       </Dialog>
 
-      {/* 품목 추가 모달 */}
+      {/* ── 모달: 품목 선택 (1단계) ── */}
       <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
-        <DialogContent className="max-w-3xl max-h-[70vh]" onInteractOutside={(e) => e.preventDefault()}>
+        <DialogContent className="max-w-3xl">
           <DialogHeader>
             <DialogTitle>품목 선택</DialogTitle>
-            <DialogDescription>거래처에 추가할 품목을 선택하세요.</DialogDescription>
+            <DialogDescription>거래처에 추가할 품목을 선택하세요. (전체: {itemTotalCount}건 / 대상: {itemSearchResults.length}건{itemCheckedIds.size > 0 ? ` / 선택: ${itemCheckedIds.size}건` : ""})</DialogDescription>
           </DialogHeader>
           <div className="flex gap-2 mb-3">
-            <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
+            <Input
+              placeholder="품명/품목코드 검색"
+              value={itemSearchKeyword}
               onChange={(e) => setItemSearchKeyword(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && searchItems()}
-              className="h-9 flex-1" />
+              className="h-9 flex-1"
+            />
             <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
               {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
             </Button>
           </div>
           <div className="overflow-auto max-h-[350px] border rounded-lg">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">
-                    <input type="checkbox"
+            <Table noWrapper>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted h-10">
+                  <TableHead className="w-[40px] text-center px-2">
+                    <input
+                      type="checkbox"
+                      className="rounded"
                       checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
                       onChange={(e) => {
                         if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
                         else setItemCheckedIds(new Set());
-                      }} />
+                      }}
+                    />
                   </TableHead>
-                  <TableHead className="w-[120px]">품목코드</TableHead>
-                  <TableHead className="min-w-[140px]">품명</TableHead>
-                  <TableHead className="w-[100px]">규격</TableHead>
-                  <TableHead className="w-[100px]">재질</TableHead>
-                  <TableHead className="w-[60px]">단위</TableHead>
+                  <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="min-w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                  <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {itemSearchResults.length === 0 ? (
-                  <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                      검색 결과가 없어요
+                    </TableCell>
+                  </TableRow>
                 ) : itemSearchResults.map((item) => (
-                  <TableRow key={item.id} className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                  <TableRow
+                    key={item.id}
+                    className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
                     onClick={() => setItemCheckedIds((prev) => {
                       const next = new Set(prev);
                       if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
                       return next;
-                    })}>
-                    <TableCell className="text-center"><input type="checkbox" checked={itemCheckedIds.has(item.id)} readOnly /></TableCell>
-                    <TableCell className="text-xs max-w-[120px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
+                    })}
+                  >
+                    <TableCell className="text-center px-2">
+                      <input type="checkbox" className="rounded" checked={itemCheckedIds.has(item.id)} readOnly />
+                    </TableCell>
+                    <TableCell className="text-[13px] font-mono">
+                      <span className="block truncate" title={item.item_number}>{item.item_number}</span>
+                    </TableCell>
                     <TableCell className="text-sm">{item.item_name}</TableCell>
-                    <TableCell className="text-xs">{item.size}</TableCell>
-                    <TableCell className="text-xs">{item.material}</TableCell>
-                    <TableCell className="text-xs">{item.unit}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.size}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.material}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.unit}</TableCell>
                   </TableRow>
                 ))}
               </TableBody>
             </Table>
           </div>
-          <DialogFooter>
-            <div className="flex items-center gap-2 w-full justify-between">
-              <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
-              <div className="flex gap-2">
-                <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
-                <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
-                  <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
-                </Button>
-              </div>
+          <DialogFooter className="flex items-center justify-between w-full">
+            <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+              <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+              </Button>
             </div>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* 품목 상세정보 입력 모달 (2단계) */}
-      <FullscreenDialog
-        open={itemDetailOpen}
-        onOpenChange={setItemDetailOpen}
-        title={`📋 품목 상세정보 ${editItemData ? "수정" : "입력"} — ${selectedCustomer?.customer_name || ""}`}
-        description={editItemData ? "거래처 품번/품명과 기간별 단가를 수정합니다." : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
-        defaultMaxWidth="max-w-[1100px]"
-        footer={
-          <>
-            <Button variant="outline" onClick={() => {
-              setItemDetailOpen(false);
-              if (!editItemData) setItemSelectOpen(true); // 신규일 때만 품목 선택으로 돌아감
-              setEditItemData(null);
-            }}>{editItemData ? "취소" : "← 이전"}</Button>
-            <Button onClick={handleItemDetailSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 품목 추가 완료
-            </Button>
-          </>
-        }
-      >
-
-          <div className="space-y-6 py-2">
+      {/* ── 모달: 품목 상세 입력 (2단계) ── */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedCustomer?.customer_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData
+                ? "거래처 품번/품명과 기간별 단가를 수정합니다."
+                : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2 flex-1 overflow-y-auto">
             {selectedItemsForDetail.map((item, idx) => {
               const itemKey = item.item_number || item.id;
               const mappingRows = itemMappings[itemKey] || [];
@@ -1289,124 +2479,227 @@ export default function CustomerManagementPage() {
                     <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
                   </div>
 
-                  <div className="flex gap-4 p-4">
-                    {/* 좌: 거래처 품번/품명 (다중) */}
-                    <div className="flex-1 border rounded-lg p-4 bg-blue-50/30 dark:bg-blue-950/10">
-                      <div className="flex items-center justify-between mb-3">
-                        <span className="text-sm font-semibold">🏷 거래처 품번/품명 관리</span>
+                  <div className="flex gap-4 p-5 items-stretch">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Tag className="w-3.5 h-3.5 text-primary" /> 거래처 품번/품명 관리
+                        </span>
                         <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
                           <Plus className="h-3 w-3 mr-1" /> 품번 추가
                         </Button>
                       </div>
-                      <div className="space-y-2">
+                      <div className="border-2 border-foreground/20 rounded-lg bg-background p-3 space-y-2 min-h-[200px] max-h-[350px] overflow-y-auto flex-1">
                         {mappingRows.length === 0 ? (
-                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없습니다</div>
-                        ) : (<>
-                          <div className="flex gap-2 items-center text-[10px] text-muted-foreground font-medium">
-                            <span className="w-4 shrink-0"></span>
-                            <span className="flex-1">거래처 품번</span>
-                            <span className="flex-1">거래처 품명</span>
-                            <span className="w-7 shrink-0"></span>
-                          </div>
-                          {mappingRows.map((mRow, mIdx) => (
-                          <div key={mRow._id} className="flex gap-2 items-center">
-                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
-                            <Input value={mRow.customer_item_code}
-                              onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_code", e.target.value)}
-                              placeholder="거래처 품번" className="h-8 text-sm flex-1" />
-                            <Input value={mRow.customer_item_name}
-                              onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_name", e.target.value)}
-                              placeholder="거래처 품명" className="h-8 text-sm flex-1" />
-                            <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
-                              onClick={() => removeMappingRow(itemKey, mRow._id)}>
-                              <X className="h-3 w-3" />
-                            </Button>
-                          </div>
-                        ))}
-                        </>)}
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : (
+                          <DndContext
+                            sensors={dndSensors}
+                            collisionDetection={closestCenter}
+                            onDragEnd={(e) => handleMappingDragEnd(itemKey, e)}
+                          >
+                            <SortableContext items={mappingRows.map((r) => r._id)} strategy={verticalListSortingStrategy}>
+                              {mappingRows.map((mRow, mIdx) => (
+                                <SortableMappingRow key={mRow._id} id={mRow._id}>
+                                  <span className="text-xs text-muted-foreground/50 font-mono w-4 shrink-0 text-center">{mIdx + 1}</span>
+                                  <Input
+                                    value={mRow.customer_item_code}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_code", e.target.value)}
+                                    placeholder="거래처 품번"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Input
+                                    value={mRow.customer_item_name}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_name", e.target.value)}
+                                    placeholder="거래처 품명"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Button
+                                    variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                                    onClick={() => removeMappingRow(itemKey, mRow._id)}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                </SortableMappingRow>
+                              ))}
+                            </SortableContext>
+                          </DndContext>
+                        )}
                       </div>
                     </div>
 
                     {/* 우: 기간별 단가 */}
-                    <div className="flex-1 border rounded-lg p-4 bg-amber-50/30 dark:bg-amber-950/10">
-                      <div className="flex items-center justify-between mb-3">
-                        <span className="text-sm font-semibold">💰 기간별 단가 설정</span>
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Coins className="w-3.5 h-3.5 text-primary" /> 기간별 단가 설정
+                        </span>
                         <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
                           <Plus className="h-3 w-3 mr-1" /> 단가 추가
                         </Button>
                       </div>
-
-                      <div className="space-y-3">
+                      <div className="space-y-3 flex-1 overflow-y-auto max-h-[350px]">
                         {prices.map((price, pIdx) => (
-                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
-                            <div className="flex items-center justify-between">
-                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
-                              {prices.length > 1 && (
-                                <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
-                                  onClick={() => removePriceRow(itemKey, price._id)}>
-                                  <X className="h-3 w-3" />
-                                </Button>
-                              )}
+                          <div key={price._id} className="border-2 border-foreground/20 rounded-lg bg-background overflow-hidden">
+                            <div
+                              className="flex items-center justify-between px-4 py-2.5 cursor-pointer hover:bg-muted/50 transition-colors"
+                              onClick={() => setCollapsedPriceCards((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(price._id)) next.delete(price._id); else next.add(price._id);
+                                return next;
+                              })}
+                            >
+                              <div className="flex items-center gap-2">
+                                {collapsedPriceCards.has(price._id)
+                                  ? <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                                  : <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                                }
+                                <span className="text-[13px] font-semibold text-muted-foreground">단가 {pIdx + 1}</span>
+                                {collapsedPriceCards.has(price._id) && price.calculated_price && (
+                                  <span className="text-xs text-muted-foreground ml-2">
+                                    {price.start_date || "—"} ~ {price.end_date || "—"} · <span className="font-mono font-bold text-foreground">{Number(price.calculated_price).toLocaleString()}</span> {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                  </span>
+                                )}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                {prices.length > 1 && (
+                                  <Button
+                                    variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
+                                    onClick={(e) => { e.stopPropagation(); removePriceRow(itemKey, price._id); }}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                )}
+                              </div>
                             </div>
-                            {/* 기간 */}
+                            {!collapsedPriceCards.has(price._id) && <div className="px-4 pb-4 space-y-2.5">
+                            {/* 기간 + 통화 */}
                             <div className="flex gap-2 items-center">
                               <div className="flex-1">
-                                <FormDatePicker value={price.start_date}
-                                  onChange={(v) => updatePriceRow(itemKey, price._id, "start_date", v)} placeholder="시작일" />
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">시작일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.start_date}
+                                  onChange={(e) => {
+                                    const v = e.target.value;
+                                    updatePriceRow(itemKey, price._id, "start_date", v);
+                                    if (price.end_date && v > price.end_date) {
+                                      updatePriceRow(itemKey, price._id, "end_date", v);
+                                    }
+                                  }}
+                                  max={price.end_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
                               </div>
-                              <span className="text-xs text-muted-foreground">~</span>
+                              <span className="text-xs text-muted-foreground mt-4">~</span>
                               <div className="flex-1">
-                                <FormDatePicker value={price.end_date}
-                                  onChange={(v) => updatePriceRow(itemKey, price._id, "end_date", v)} placeholder="종료일" />
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">종료일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.end_date}
+                                  onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                  min={price.start_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
                               </div>
                               <div className="w-[80px]">
-                                <Select value={price.currency_code} onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="통화" /></SelectTrigger>
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">&nbsp;</Label>
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="통화" /></SelectTrigger>
                                   <SelectContent>
-                                    {(priceCategoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
                                   </SelectContent>
                                 </Select>
                               </div>
                             </div>
-                            {/* 기준가/할인/반올림 */}
-                            <div className="flex gap-2 items-center">
-                              <div className="w-[90px]">
-                                <Select value={price.base_price_type} onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준" /></SelectTrigger>
-                                  <SelectContent>
-                                    {(priceCategoryOptions["base_price_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-                                  </SelectContent>
-                                </Select>
-                              </div>
-                              <Input value={price.base_price}
-                                onChange={(e) => updatePriceRow(itemKey, price._id, "base_price", e.target.value)}
-                                className="h-8 text-xs text-right flex-1" placeholder="기준가" />
-                              <div className="w-[90px]">
-                                <Select value={price.discount_type} onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
-                                  <SelectContent>
-                                    <SelectItem value="none">할인없음</SelectItem>
-                                    {(priceCategoryOptions["discount_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-                                  </SelectContent>
-                                </Select>
-                              </div>
-                              <Input value={price.discount_value}
-                                onChange={(e) => updatePriceRow(itemKey, price._id, "discount_value", e.target.value)}
-                                className="h-8 text-xs text-right w-[60px]" placeholder="0" />
-                              <div className="w-[90px]">
-                                <Select value={price.rounding_unit_value} onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
-                                  <SelectContent>
-                                    {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-                                  </SelectContent>
-                                </Select>
-                              </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "base_price", raw);
+                                }}
+                                className="h-9 text-[13px] text-right col-span-3"
+                                placeholder="기준가"
+                              />
                             </div>
-                            {/* 계산된 단가 표시 */}
-                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
-                              <span className="text-xs text-muted-foreground">계산 단가:</span>
-                              <span className="font-bold text-sm">{price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}</span>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-9 text-[13px] text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
                             </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-1.5 pt-2 border-t">
+                              <span className="text-[13px] text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-base font-mono">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                              {price.calculated_price && price.currency_code && (
+                                <span className="text-[13px] text-muted-foreground">
+                                  {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                </span>
+                              )}
+                            </div>
+                            </div>}
                           </div>
                         ))}
                       </div>
@@ -1416,57 +2709,21 @@ export default function CustomerManagementPage() {
               );
             })}
           </div>
-
-      </FullscreenDialog>
-
-      {/* 납품처 등록 모달 */}
-      <Dialog open={deliveryModalOpen} onOpenChange={setDeliveryModalOpen}>
-        <DialogContent className="max-w-lg">
-          <DialogHeader>
-            <DialogTitle>납품처 등록</DialogTitle>
-            <DialogDescription>{selectedCustomer?.customer_name}의 납품처를 등록합니다.</DialogDescription>
-          </DialogHeader>
-          <div className="grid grid-cols-2 gap-4 py-4">
-            <div className="space-y-1.5">
-              <Label className="text-sm">납품처코드</Label>
-              <Input value={deliveryForm.destination_code || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
-                placeholder="납품처코드" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">납품처명 <span className="text-destructive">*</span></Label>
-              <Input value={deliveryForm.destination_name || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
-                placeholder="납품처명" className="h-9" />
-            </div>
-            <div className="space-y-1.5 col-span-2">
-              <Label className="text-sm">주소</Label>
-              <Input value={deliveryForm.address || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, address: e.target.value }))}
-                placeholder="주소" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">담당자</Label>
-              <Input value={deliveryForm.manager_name || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
-                placeholder="담당자" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">전화번호</Label>
-              <Input value={deliveryForm.phone || ""} onChange={(e) => {
-                const formatted = formatField("phone", e.target.value);
-                setDeliveryForm((p) => ({ ...p, phone: formatted }));
-                const err = validateField("phone", formatted);
-                setFormErrors((p) => { const n = { ...p }; if (err) n.delivery_phone = err; else delete n.delivery_phone; return n; });
-              }}
-                placeholder="010-0000-0000" className={cn("h-9", formErrors.delivery_phone && "border-destructive")} />
-              {formErrors.delivery_phone && <p className="text-xs text-destructive">{formErrors.delivery_phone}</p>}
-            </div>
-            <div className="space-y-1.5 col-span-2">
-              <Label className="text-sm">메모</Label>
-              <Input value={deliveryForm.memo || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
-                placeholder="메모" className="h-9" />
-            </div>
-          </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setDeliveryModalOpen(false)}>취소</Button>
-            <Button onClick={handleDeliverySave}><Save className="w-4 h-4 mr-1.5" /> 저장</Button>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -1482,7 +2739,6 @@ export default function CustomerManagementPage() {
           config={excelChainConfig}
           onSuccess={() => {
             fetchCustomers();
-            // 우측 새로고침
             const cid = selectedCustomerId;
             setSelectedCustomerId(null);
             setTimeout(() => setSelectedCustomerId(cid), 50);
@@ -1490,12 +2746,14 @@ export default function CustomerManagementPage() {
         />
       )}
 
+      {/* 테이블 설정 모달 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={CUSTOMER_TABLE}
-        settingsId="customer-mng"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
 
       {ConfirmDialogComponent}
diff --git a/frontend/app/(main)/COMPANY_10/sales/order/page.tsx b/frontend/app/(main)/COMPANY_10/sales/order/page.tsx
index d1bd0c17..f9a358d4 100644
--- a/frontend/app/(main)/COMPANY_10/sales/order/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/sales/order/page.tsx
@@ -1,21 +1,22 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-// Card, CardContent 제거 — DynamicSearchFilter가 대체
-import { Badge } from "@/components/ui/badge";
 import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
-  Plus, Trash2, RotateCcw, Save, Loader2, FileSpreadsheet, Download,
-  ClipboardList, Pencil, Search, X, Maximize2, Minimize2, Truck, Settings2,
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  ClipboardList, Pencil, Search, X, Truck, Package,
   ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,
+  Settings2, RotateCcw, Filter, Check, ArrowUp, ArrowDown,
 } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
@@ -23,17 +24,15 @@ import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
 import { ShippingPlanBatchModal } from "@/components/common/ShippingPlanBatchModal";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { SmartSelect } from "@/components/common/SmartSelect";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 
 const DETAIL_TABLE = "sales_order_detail";
+const MASTER_TABLE = "sales_order_mng";
 
-// 천단위 구분자 표시용 (입력 중에는 콤마 포함 표시, 저장 시 숫자만)
+// 천단위 구분자 표시용
 const formatNumber = (val: string) => {
   const num = val.replace(/[^\d.-]/g, "");
   if (!num) return "";
@@ -42,28 +41,116 @@ const formatNumber = (val: string) => {
   return parts.join(".");
 };
 const parseNumber = (val: string) => val.replace(/,/g, "");
-const MASTER_TABLE = "sales_order_mng";
 
-// 메인 목록 테이블 컬럼 (sales_order_detail 기준)
-const GRID_COLUMNS: DataGridColumn[] = [
-  { key: "order_no", label: "수주번호", width: "w-[120px]" },
-  { key: "part_code", label: "품번", width: "w-[120px]", editable: true },
-  { key: "part_name", label: "품명", width: "w-[150px]", editable: true },
-  { key: "spec", label: "규격", width: "w-[120px]", editable: true },
-  { key: "unit", label: "단위", width: "w-[70px]", editable: true },
-  { key: "qty", label: "수량", width: "w-[90px]", editable: true, inputType: "number", formatNumber: true, align: "right" },
-  { key: "ship_qty", label: "출하수량", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "balance_qty", label: "잔량", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "unit_price", label: "단가", width: "w-[100px]", editable: true, inputType: "number", formatNumber: true, align: "right" },
-  { key: "amount", label: "금액", width: "w-[110px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[70px]" },
-  { key: "due_date", label: "납기일", width: "w-[110px]" },
-  { key: "memo", label: "메모", width: "w-[100px]", editable: true },
+// 플랫 테이블 컬럼 정의 (마스터+디테일 통합)
+const FLAT_COLUMNS = [
+  { key: "order_no", label: "수주번호", source: "master" },
+  { key: "partner_id", label: "거래처", source: "master" },
+  { key: "order_date", label: "수주일", source: "master" },
+  { key: "part_code", label: "품번", source: "detail" },
+  { key: "part_name", label: "품명", source: "detail" },
+  { key: "spec", label: "규격", source: "detail" },
+  { key: "unit", label: "단위", source: "detail" },
+  { key: "qty", label: "수량", source: "detail" },
+  { key: "ship_qty", label: "출하수량", source: "detail" },
+  { key: "balance_qty", label: "잔량", source: "detail" },
+  { key: "unit_price", label: "단가", source: "detail" },
+  { key: "amount", label: "금액", source: "detail" },
+  { key: "due_date", label: "납기일", source: "detail" },
+  { key: "memo", label: "메모", source: "master" },
 ];
 
-// 조건부 레이어 설정 (input_mode, sell_mode에 따라 표시 필드가 달라짐)
-// Zone 10: input_mode → 공급업체우선(CAT_MLZWPH5R_983R) / 품목우선(CAT_MLZWPUQC_PB8Z)
-// Zone 17: sell_mode → 해외판매(CAT_MLZWFF2Z_BQCV)
+const DETAIL_HEADER_COLS = FLAT_COLUMNS.filter((c) => c.source === "detail");
+
+// 필터용 전체 키
+const GRID_COLUMNS_CONFIG = FLAT_COLUMNS.map(({ key, label }) => ({ key, label }));
+
+// 총 컬럼 수: 체크박스(1) + 플랫 컬럼(14) = 15
+const TOTAL_COLS = 15;
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
 
 export default function SalesOrderPage() {
   const { user } = useAuth();
@@ -77,13 +164,13 @@ export default function SalesOrderPage() {
 
   // 모달
   const [isModalOpen, setIsModalOpen] = useState(false);
-  // isModalFullscreen 제거됨 — FullscreenDialog 사용
   const [isEditMode, setIsEditMode] = useState(false);
   const [saving, setSaving] = useState(false);
   const [masterForm, setMasterForm] = useState<Record<string, any>>({});
   const [detailRows, setDetailRows] = useState<any[]>([]);
+  const [allowPriceEdit, setAllowPriceEdit] = useState(true);
 
-  // 품목 선택 모달 (리피터에서 품목 추가용)
+  // 품목 선택 모달
   const [itemSelectOpen, setItemSelectOpen] = useState(false);
   const [itemSearchKeyword, setItemSearchKeyword] = useState("");
   const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
@@ -108,38 +195,15 @@ export default function SalesOrderPage() {
   // 체크된 행 (다중선택)
   const [checkedIds, setCheckedIds] = useState<string[]>([]);
 
+  // 납품처 목록
+  const [deliveryOptions, setDeliveryOptions] = useState<{ code: string; label: string }[]>([]);
+
   // 테이블 설정
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [gridColumns, setGridColumns] = useState<DataGridColumn[]>(GRID_COLUMNS);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
+  const ts = useTableSettings("c16-sales-order", DETAIL_TABLE, GRID_COLUMNS_CONFIG);
 
-  // 테이블 설정 적용 (컬럼 + 필터)
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    // 컬럼 표시/숨김/순서/너비
-    const colMap = new Map(GRID_COLUMNS.map((c) => [c.key, c]));
-    const applied: DataGridColumn[] = [];
-    for (const cs of settings.columns) {
-      if (!cs.visible) continue;
-      const orig = colMap.get(cs.columnName);
-      if (orig) {
-        applied.push({ ...orig, width: `w-[${cs.width}px]`, minWidth: undefined });
-      }
-    }
-    const settingKeys = new Set(settings.columns.map((c) => c.columnName));
-    for (const col of GRID_COLUMNS) {
-      if (!settingKeys.has(col.key)) applied.push(col);
-    }
-    setGridColumns(applied.length > 0 ? applied : GRID_COLUMNS);
-
-    // 필터 설정 → DynamicSearchFilter에 전달
-    setFilterConfig(settings.filters);
-  }, []);
-
-  // 마운트 시 저장된 설정 복원
-  useEffect(() => {
-    const saved = loadTableSettings("sales-order");
-    if (saved) applyTableSettings(saved);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  // 헤더 필터 & 정렬
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
 
   // 카테고리 로드
   useEffect(() => {
@@ -154,7 +218,6 @@ export default function SalesOrderPage() {
         }
         return result;
       };
-      // 라벨 치환 + 중복 제거 (같은 label이면 첫 번째만 유지)
       const LABEL_REPLACE: Record<string, string> = {
         "공급업체 우선": "거래처 우선",
         "공급업체우선": "거래처 우선",
@@ -180,7 +243,7 @@ export default function SalesOrderPage() {
           } catch { /* skip */ }
         })
       );
-      // 거래처 목록도 로드
+      // 거래처 목록
       try {
         const custRes = await apiClient.post(`/table-management/tables/customer_mng/data`, {
           page: 1, size: 500, autoFilter: true,
@@ -188,7 +251,7 @@ export default function SalesOrderPage() {
         const custs = custRes.data?.data?.data || custRes.data?.data?.rows || [];
         optMap["partner_id"] = custs.map((c: any) => ({ code: c.customer_code, label: `${c.customer_name} (${c.customer_code})` }));
       } catch { /* skip */ }
-      // 사용자 목록 로드 (담당자 선택용)
+      // 사용자 목록
       try {
         const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
           page: 1, size: 500, autoFilter: true,
@@ -199,7 +262,7 @@ export default function SalesOrderPage() {
           label: `${u.user_name || u.name || u.user_id}${u.position_name ? ` (${u.position_name})` : ""}`,
         }));
       } catch { /* skip */ }
-      // item_info 카테고리도 로드 (unit, material 등 코드→라벨 변환용)
+      // item_info 카테고리
       for (const col of ["unit", "material", "division", "type"]) {
         try {
           const res = await apiClient.get(`/table-categories/item_info/${col}/values`);
@@ -209,7 +272,7 @@ export default function SalesOrderPage() {
         } catch { /* skip */ }
       }
       setCategoryOptions(optMap);
-      // division 기본값: 영업관리/제품/판매품 라벨 순서로 탐색
+      // division 기본값
       const divs = optMap["item_division"] || [];
       const salesDiv = divs.find((o: any) => o.label === "영업관리")
         || divs.find((o: any) => o.label === "제품")
@@ -223,11 +286,12 @@ export default function SalesOrderPage() {
   const fetchOrders = useCallback(async () => {
     setLoading(true);
     try {
-      const filters: any[] = searchFilters.map((f) => ({
+      const filters = searchFilters.map(f => ({
         columnName: f.columnName,
         operator: f.operator,
         value: f.value,
       }));
+
       const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
@@ -236,7 +300,7 @@ export default function SalesOrderPage() {
       });
       const rows = res.data?.data?.data || res.data?.data?.rows || [];
 
-      // order_no → sales_order_mng 조인 (memo 등 마스터 필드 보강)
+      // order_no → sales_order_mng 조인
       const orderNos = [...new Set(rows.map((r: any) => r.order_no).filter(Boolean))];
       let masterMap: Record<string, any> = {};
       if (orderNos.length > 0) {
@@ -247,13 +311,11 @@ export default function SalesOrderPage() {
             autoFilter: true,
           });
           const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
-          for (const m of masters) {
-            masterMap[m.order_no] = m;
-          }
+          for (const m of masters) masterMap[m.order_no] = m;
         } catch { /* skip */ }
       }
 
-      // part_code → item_info 조인 (품명/규격이 비어있는 경우 보강)
+      // part_code → item_info 조인
       const partCodes = [...new Set(rows.map((r: any) => r.part_code).filter(Boolean))];
       let itemMap: Record<string, any> = {};
       if (partCodes.length > 0) {
@@ -264,9 +326,7 @@ export default function SalesOrderPage() {
             autoFilter: true,
           });
           const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
-          for (const item of items) {
-            itemMap[item.item_number] = item;
-          }
+          for (const item of items) itemMap[item.item_number] = item;
         } catch { /* skip */ }
       }
 
@@ -285,8 +345,10 @@ export default function SalesOrderPage() {
           ...row,
           part_name: row.part_name || item?.item_name || "",
           spec: row.spec || item?.size || "",
+          material: row.material || (item ? (resolveLabel("item_material", item.material) || item.material || "") : ""),
           unit: resolveLabel("item_unit", rawUnit) || rawUnit,
           memo: row.memo || master?.memo || "",
+          _master: master || {},
         };
       });
 
@@ -301,16 +363,103 @@ export default function SalesOrderPage() {
 
   useEffect(() => { fetchOrders(); }, [fetchOrders]);
 
+  // 카테고리 코드→라벨 변환
+  const resolveLabel = useCallback((key: string, code: string) => {
+    if (!code) return "";
+    if (key === "partner_id" || key === "manager_id" || key === "price_mode") {
+      return categoryOptions[key]?.find((o) => o.code === code)?.label || code;
+    }
+    return code;
+  }, [categoryOptions]);
+
+  // 플랫 행 생성 (마스터 필드를 각 디테일 행에 병합)
+  const flatRows = useMemo(() => {
+    return orders.map((row) => {
+      const master = row._master || {};
+      return {
+        ...row,
+        partner_id: resolveLabel("partner_id", master.partner_id || row.partner_id || ""),
+        order_date: master.order_date || row.order_date || "",
+        memo: row.memo || master.memo || "",
+      };
+    });
+  }, [orders, resolveLabel]);
+
+  // 컬럼별 고유값 (헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of FLAT_COLUMNS) {
+      const values = new Set<string>();
+      flatRows.forEach((row) => {
+        const val = row[col.key];
+        if (val !== null && val !== undefined && val !== "") values.add(String(val));
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [flatRows]);
+
+  // 필터 + 정렬 적용된 플랫 데이터
+  const filteredFlatRows = useMemo(() => {
+    let rows = [...flatRows];
+
+    // 1차: 헤더 필터 적용
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      rows = rows.filter((row) => {
+        const cellVal = row[colKey] != null ? String(row[colKey]) : "";
+        return values.has(cellVal);
+      });
+    }
+
+    // 2차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      rows.sort((a, b) => {
+        const av = a[key] ?? "";
+        const bv = b[key] ?? "";
+        const na = Number(av); const nb = Number(bv);
+        if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+        return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+      });
+    }
+
+    return rows;
+  }, [flatRows, headerFilters, sortState]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
+  };
+
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
+  };
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
+    );
+  };
+
   const getCategoryLabel = (col: string, code: string) => {
     if (!code) return "";
     const found = categoryOptions[col]?.find((o) => o.code === code);
     return found?.label || code;
   };
 
-  // 등록 모달 열기
-  // 납품처 목록 (거래처 선택 시 조회)
-  const [deliveryOptions, setDeliveryOptions] = useState<{ code: string; label: string }[]>([]);
-
   const loadDeliveryOptions = async (customerCode: string) => {
     if (!customerCode) { setDeliveryOptions([]); return; }
     try {
@@ -327,22 +476,24 @@ export default function SalesOrderPage() {
     } catch { setDeliveryOptions([]); }
   };
 
+  // 등록 모달 열기
   const openRegisterModal = () => {
-    // 기본값: 각 카테고리의 첫 번째 옵션
     const defaultSellMode = categoryOptions["sell_mode"]?.[0]?.code || "";
     const defaultInputMode = categoryOptions["input_mode"]?.[0]?.code || "";
     const defaultPriceMode = categoryOptions["price_mode"]?.[0]?.code || "";
-    setMasterForm({ input_mode: defaultInputMode, sell_mode: defaultSellMode, price_mode: defaultPriceMode, manager_id: user?.userId || "", order_date: new Date().toISOString().split("T")[0] });
+    setMasterForm({
+      input_mode: defaultInputMode, sell_mode: defaultSellMode, price_mode: defaultPriceMode,
+      manager_id: user?.userId || "", order_date: new Date().toISOString().split("T")[0],
+    });
     setDetailRows([]);
     setDeliveryOptions([]);
     setIsEditMode(false);
     setIsModalOpen(true);
   };
 
-  // 수정 모달 열기 (order_no로 마스터 + 디테일 조회)
+  // 수정 모달 열기
   const openEditModal = async (orderNo: string) => {
     try {
-      // 마스터 조회
       const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
         page: 1, size: 1,
         dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
@@ -350,7 +501,6 @@ export default function SalesOrderPage() {
       });
       const masterData = (masterRes.data?.data?.data || masterRes.data?.data?.rows || [])[0];
 
-      // 디테일 조회
       const detailRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
         page: 1, size: 100,
         dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
@@ -367,42 +517,29 @@ export default function SalesOrderPage() {
     }
   };
 
-  // 삭제 (다중 선택)
+  // 삭제 (마스터 단위)
   const handleDelete = async () => {
     if (checkedIds.length === 0) { toast.error("삭제할 수주를 선택해주세요."); return; }
     const selectedItems = orders.filter((o) => checkedIds.includes(o.id));
     const orderNos = [...new Set(selectedItems.map((o) => o.order_no))];
-    const ok = await confirm(`${checkedIds.length}건의 수주 데이터를 삭제하시겠습니까?`, {
+    const ok = await confirm(`${orderNos.length}건의 수주를 삭제하시겠습니까?`, {
       description: "삭제된 데이터는 복구할 수 없습니다.",
       variant: "destructive",
       confirmText: "삭제",
     });
     if (!ok) return;
     try {
-      // 선택된 디테일 행 삭제
-      await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
-        data: checkedIds.map((id) => ({ id })),
-      });
-      // 해당 수주번호의 남은 디테일이 없으면 마스터도 삭제
       for (const orderNo of orderNos) {
-        const remaining = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
           page: 1, size: 1,
           dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
           autoFilter: true,
         });
-        const rows = remaining.data?.data?.data || remaining.data?.data?.rows || [];
-        if (rows.length === 0) {
-          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
-            page: 1, size: 1,
-            dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
-            autoFilter: true,
+        const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+        if (masters.length > 0) {
+          await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
+            data: masters.map((m: any) => ({ id: m.id })),
           });
-          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
-          if (masters.length > 0) {
-            await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
-              data: masters.map((m: any) => ({ id: m.id })),
-            });
-          }
         }
       }
       toast.success("삭제되었습니다.");
@@ -423,18 +560,14 @@ export default function SalesOrderPage() {
       toast.error("품목을 1개 이상 추가해주세요.");
       return;
     }
-
     setSaving(true);
     try {
       const { id, created_date, updated_date, writer, company_code, created_by, updated_by, ...masterFields } = masterForm;
-
       if (isEditMode && id) {
-        // 마스터 수정
         await apiClient.put(`/table-management/tables/${MASTER_TABLE}/edit`, {
           originalData: { id },
           updatedData: masterFields,
         });
-        // 기존 디테일 삭제 후 재삽입
         const existingDetails = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
           page: 1, size: 100,
           dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: masterForm.order_no }] },
@@ -447,19 +580,16 @@ export default function SalesOrderPage() {
           });
         }
       } else {
-        // 마스터 등록
         await apiClient.post(`/table-management/tables/${MASTER_TABLE}/add`, masterFields);
       }
-
-      // 디테일 등록
       for (const row of detailRows) {
         const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
         await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
           ...detailFields,
+          id: crypto.randomUUID(),
           order_no: masterForm.order_no,
         });
       }
-
       toast.success(isEditMode ? "수정되었습니다." : "등록되었습니다.");
       setIsModalOpen(false);
       fetchOrders();
@@ -470,29 +600,34 @@ export default function SalesOrderPage() {
     }
   };
 
-  // 품목 검색 (리피터에서 추가)
+  // 품목 검색
   const searchItems = async (page?: number, size?: number) => {
     const p = page ?? itemPage;
     const s = size ?? itemPageSize;
     setItemSearchLoading(true);
     try {
       const filters: any[] = [];
-      if (itemSearchKeyword) {
-        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
-      }
-      // division 필터는 다중값(쉼표 구분)이므로 contains로 부분 매칭
-      if (itemSearchDivision !== "all") {
-        filters.push({ columnName: "division", operator: "contains", value: itemSearchDivision });
-      }
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
-        page: p, size: s,
+        page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
       });
       const resData = res.data?.data;
-      setItemSearchResults(resData?.data || resData?.rows || []);
-      setItemTotal(resData?.total || 0);
-      setItemTotalPages(resData?.totalPages || Math.ceil((resData?.total || 0) / s));
+      let allRows = resData?.data || resData?.rows || [];
+      // 관리품목 필터 (코드/라벨 혼재 대응)
+      if (itemSearchDivision !== "all") {
+        const divLabel = categoryOptions["item_division"]?.find((o) => o.code === itemSearchDivision)?.label || "";
+        allRows = allRows.filter((item: any) => {
+          const div = item.division || "";
+          return div.includes(itemSearchDivision) || (divLabel && div.includes(divLabel));
+        });
+      }
+      const total = allRows.length;
+      const start = (p - 1) * s;
+      setItemSearchResults(allRows.slice(start, start + s));
+      setItemTotal(total);
+      setItemTotalPages(Math.max(1, Math.ceil(total / s)));
     } catch { /* skip */ } finally {
       setItemSearchLoading(false);
     }
@@ -507,10 +642,7 @@ export default function SalesOrderPage() {
 
   const commitItemPageInput = () => {
     const parsed = parseInt(itemPageInput, 10);
-    if (isNaN(parsed) || itemPageInput.trim() === "") {
-      setItemPageInput(String(itemPage));
-      return;
-    }
+    if (isNaN(parsed) || itemPageInput.trim() === "") { setItemPageInput(String(itemPage)); return; }
     const clamped = Math.max(1, Math.min(parsed, itemTotalPages || 1));
     if (clamped !== itemPage) handleItemPageChange(clamped);
     setItemPageInput(String(clamped));
@@ -526,18 +658,15 @@ export default function SalesOrderPage() {
     const selected = Array.from(itemSelectedMap.values());
     if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
 
-    // 단가방식에 따라 단가 조회
     const isStandardPrice = masterForm.price_mode === "CAT_MM0BUZKL_HJ7U" || masterForm.price_mode === "CAT_MLKG792S_54WJ";
     const isCustomerPrice = masterForm.price_mode === "CAT_MM0BV3OS_41DX" || masterForm.price_mode === "CAT_MLKG7D8K_N8SI";
     const partnerId = masterForm.partner_id;
-    const today = new Date().toISOString().split("T")[0];
 
-    // 거래처별 단가 조회 (선택된 품목들에 대해)
     let customerPriceMap: Record<string, string> = {};
     if (isCustomerPrice && partnerId) {
       try {
         const itemIds = selected.map((item) => item.item_number || item.id);
-        const res = await apiClient.post(`/table-management/tables/customer_item_mapping/data`, {
+        const res = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
           page: 1, size: 500,
           dataFilter: {
             enabled: true,
@@ -548,41 +677,42 @@ export default function SalesOrderPage() {
           },
           autoFilter: true,
         });
-        const mappings = res.data?.data?.data || res.data?.data?.rows || [];
-        for (const m of mappings) {
-          // calculated_price 우선, 없으면 current_unit_price
-          const price = m.calculated_price || m.current_unit_price || "";
-          if (price) customerPriceMap[m.item_id] = String(price);
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        for (const p of prices) {
+          const start = p.start_date || "";
+          const end = p.end_date || "";
+          if (start && start > today) continue;
+          if (end && end < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) {
+            const existing = customerPriceMap[p.item_id];
+            if (!existing || Number(price) > 0) customerPriceMap[p.item_id] = String(price);
+          }
         }
-      } catch (err) {
-        // 단가 조회 실패 시 무시
-      }
+      } catch { /* skip */ }
     }
 
     const newRows = selected.map((item) => {
       const itemCode = item.item_number || item.id;
       let unitPrice = "";
-
       if (isStandardPrice) {
-        // 기준단가: item_info의 standard_price 또는 selling_price
         unitPrice = item.standard_price || item.selling_price || "";
       } else if (isCustomerPrice && partnerId) {
-        // 거래처별 단가
         unitPrice = customerPriceMap[itemCode] || "";
       }
-
       return {
         _id: `new_${Date.now()}_${Math.random()}`,
         part_code: itemCode,
         part_name: item.item_name,
         spec: item.size || "",
         material: getCategoryLabel("item_material", item.material) || item.material || "",
+        packing_material: "",
         unit: getCategoryLabel("item_unit", item.unit) || item.unit || "",
-        qty: "",
-        standard_price: item.standard_price || "",
+        qty: "1",
+        pack_qty: "0",
         unit_price: unitPrice,
-        amount: "",
-        currency_code: item.currency_code || "",
+        amount: unitPrice ? String(1 * parseFloat(unitPrice)) : "",
         due_date: "",
       };
     });
@@ -593,11 +723,73 @@ export default function SalesOrderPage() {
     setItemSelectOpen(false);
   };
 
+  // 단가 재계산: 단가방식/거래처 변경 시 기존 품목 단가 갱신
+  const recalcPrices = useCallback(async (priceMode: string, partnerId: string) => {
+    if (detailRows.length === 0) return;
+    const STANDARD_CODES = ["CAT_MM0BUZKL_HJ7U", "CAT_MLKG792S_54WJ"];
+    const CUSTOMER_CODES = ["CAT_MM0BV3OS_41DX", "CAT_MLKG7D8K_N8SI"];
+    const isStandard = STANDARD_CODES.includes(priceMode);
+    const isCustomer = CUSTOMER_CODES.includes(priceMode);
+
+    if (isStandard) {
+      // 품목 기준단가 조회
+      const itemCodes = detailRows.map((r) => r.part_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+          autoFilter: true,
+        });
+        const items = res.data?.data?.data || res.data?.data?.rows || [];
+        const priceMap: Record<string, string> = {};
+        for (const item of items) {
+          const price = item.standard_price || item.selling_price || "";
+          if (price) priceMap[item.item_number] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.part_code] || "";
+          const qty = parseFloat(row.qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    } else if (isCustomer && partnerId) {
+      // 거래처별 단가 조회
+      const itemCodes = detailRows.map((r) => r.part_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "customer_id", operator: "equals", value: partnerId },
+            { columnName: "item_id", operator: "in", value: itemCodes },
+          ]},
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        const priceMap: Record<string, string> = {};
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) priceMap[p.item_id] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.part_code] || "";
+          const qty = parseFloat(row.qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    }
+  }, [detailRows]);
+
   const updateDetailRow = (idx: number, field: string, value: string) => {
     setDetailRows((prev) => {
       const next = [...prev];
       next[idx] = { ...next[idx], [field]: value };
-      // 수량 × 단가 = 금액 자동 계산
       if (field === "qty" || field === "unit_price") {
         const qty = parseFloat(field === "qty" ? value : next[idx].qty) || 0;
         const price = parseFloat(field === "unit_price" ? value : next[idx].unit_price) || 0;
@@ -611,17 +803,21 @@ export default function SalesOrderPage() {
     setDetailRows((prev) => prev.filter((_, i) => i !== idx));
   };
 
-  // input_mode 값으로 레이어 판단
-  // 거래처 우선 (구: 공급업체 우선) - 두 코드 모두 지원
+  // 조건부 레이어 판단
   const isSupplierFirst = masterForm.input_mode === "CAT_MLZWPH5R_983R" || masterForm.input_mode === "CAT_MLKG5KP8_C39W";
-  const isItemFirst = masterForm.input_mode === "CAT_MLZWPUQC_PB8Z" || masterForm.input_mode === "CAT_MLKG5FZO_HS1B";
   const isOverseas = masterForm.sell_mode === "CAT_MLZWFF2Z_BQCV" || masterForm.sell_mode === "CAT_MLKGAR2W_HAPO";
 
   const handleExcelDownload = async () => {
     if (orders.length === 0) { toast.error("다운로드할 데이터가 없습니다."); return; }
+    const cols = ["order_no","part_code","part_name","spec","unit","qty","ship_qty","balance_qty","unit_price","amount","currency_code","due_date","memo"];
+    const labels: Record<string, string> = {
+      order_no:"수주번호",part_code:"품번",part_name:"품명",spec:"규격",unit:"단위",
+      qty:"수량",ship_qty:"출하수량",balance_qty:"잔량",unit_price:"단가",
+      amount:"금액",currency_code:"통화",due_date:"납기일",memo:"메모",
+    };
     const data = orders.map((o) => {
       const row: Record<string, any> = {};
-      for (const col of GRID_COLUMNS) row[col.label] = o[col.key] || "";
+      for (const col of cols) row[labels[col]] = o[col] || "";
       return row;
     });
     await exportToExcel(data, "수주관리.xlsx", "수주목록");
@@ -630,260 +826,603 @@ export default function SalesOrderPage() {
 
   return (
     <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 필터 (사용자 설정 가능) */}
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground">
+        <span>영업관리</span>
+        <span className="opacity-40">/</span>
+        <span className="font-medium text-foreground">수주관리</span>
+      </nav>
+
+      {/* 검색 필터 (DynamicSearchFilter) */}
       <DynamicSearchFilter
         tableName={DETAIL_TABLE}
-        filterId="sales-order"
+        filterId="c16-sales-order"
         onFilterChange={setSearchFilters}
-        dataCount={totalCount}
-        externalFilterConfig={filterConfig}
+        dataCount={orders.length}
+        externalFilterConfig={ts.filterConfig}
       />
 
-      {/* 메인 테이블 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm flex flex-col">
-        <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-          <div className="font-semibold flex items-center gap-2 text-sm">
-            <ClipboardList className="w-5 h-5" /> 수주 목록
-            <Badge variant="secondary" className="font-normal">{totalCount}건</Badge>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
-              <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
-            </Button>
-            <Button size="sm" onClick={openRegisterModal}>
-              <Plus className="w-4 h-4 mr-1.5" /> 수주 등록
-            </Button>
-            <Button variant="outline" size="sm" disabled={checkedIds.length !== 1} onClick={() => {
+      {/* 액션 바 */}
+      <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-bold">수주 목록</h2>
+          <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+            {totalCount}건
+          </span>
+        </div>
+        <div className="flex items-center gap-2 overflow-x-auto">
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4" /> 등록
+          </Button>
+          <Button
+            variant="outline" size="sm"
+            disabled={checkedIds.length !== 1}
+            onClick={() => {
               const item = orders.find((o) => o.id === checkedIds[0]);
               if (item) openEditModal(item.order_no);
-            }}>
-              <Pencil className="w-4 h-4 mr-1.5" /> 수정
-            </Button>
-            <Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDelete}>
-              <Trash2 className="w-4 h-4 mr-1.5" /> 삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
-            </Button>
-            <Button variant="outline" size="sm" disabled={checkedIds.length === 0} onClick={() => setShippingPlanOpen(true)}>
-              <Truck className="w-4 h-4 mr-1.5" /> 출하계획 {checkedIds.length > 0 && `(${checkedIds.length})`}
-            </Button>
-            <Button variant="outline" size="sm" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-          </div>
+            }}
+          >
+            <Pencil className="w-4 h-4" /> 수정
+          </Button>
+          <Button
+            variant="outline" size="sm"
+            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10 hover:text-destructive"
+            disabled={checkedIds.length === 0}
+            onClick={handleDelete}
+          >
+            <Trash2 className="w-4 h-4" /> 삭제{checkedIds.length > 0 && ` (${checkedIds.length})`}
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4" /> 엑셀
+          </Button>
+          <Button variant="outline" size="sm" disabled={checkedIds.length === 0} onClick={() => setShippingPlanOpen(true)}>
+            <Truck className="w-4 h-4" /> 출하계획{checkedIds.length > 0 && ` (${checkedIds.length})`}
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+            <Settings2 className="w-4 h-4" /> 설정
+          </Button>
         </div>
+      </div>
 
-        <DataGrid
-          gridId="sales-order"
-          columns={gridColumns}
-          data={orders}
-          loading={loading}
-          showCheckbox
-          showRowNumber={false}
-          checkedIds={checkedIds}
-          onCheckedChange={setCheckedIds}
-          onRowDoubleClick={(row) => openEditModal(row.order_no)}
-          tableName={DETAIL_TABLE}
-          emptyMessage="등록된 수주가 없습니다"
-          onCellEdit={() => fetchOrders()}
-        />
+      {/* 데이터 테이블 (플랫 리스트) */}
+      <div className="flex-1 overflow-hidden rounded-lg border border-border bg-card">
+        <div className="h-full overflow-auto">
+          <Table style={{ minWidth: "1500px" }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "100px" }} />
+              <col style={{ width: "120px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "70px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "90px" }} />
+              <col style={{ width: "110px" }} />
+              <col style={{ width: "100px" }} />
+              <col style={{ width: "120px" }} />
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = filteredFlatRows.map((r) => r.id);
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
+                  <Checkbox
+                    checked={(() => {
+                      const allFilteredIds = filteredFlatRows.map((r) => r.id);
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
+                  />
+                </TableHead>
+                {FLAT_COLUMNS.map((col) => {
+                  const isRight = ["qty", "ship_qty", "balance_qty", "unit_price", "amount"].includes(col.key);
+                  return (
+                    <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none", isRight && "text-right")}>
+                      <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                        <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                          <span className="truncate">{col.label}</span>
+                          {sortState?.key === col.key && (
+                            sortState.direction === "asc"
+                              ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                              : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                          )}
+                        </div>
+                        {(columnUniqueValues[col.key] || []).length > 0 && (
+                          <HeaderFilterPopover
+                            colKey={col.key} colLabel={col.label}
+                            uniqueValues={columnUniqueValues[col.key] || []}
+                            filterValues={headerFilters[col.key] || new Set<string>()}
+                            onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                          />
+                        )}
+                      </div>
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
+                  </TableCell>
+                </TableRow>
+              ) : filteredFlatRows.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <ClipboardList className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 수주가 없어요</span>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                filteredFlatRows.map((row) => {
+                  const isChecked = checkedIds.includes(row.id);
+                  return (
+                    <TableRow
+                      key={row.id}
+                      className={cn(
+                        "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                        isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                      )}
+                      onClick={() => {
+                        setCheckedIds((prev) =>
+                          prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                        );
+                      }}
+                      onDoubleClick={() => openEditModal(row.order_no)}
+                    >
+                      <TableCell
+                        className="text-center cursor-pointer"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setCheckedIds((prev) =>
+                            prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                          );
+                        }}
+                      >
+                        <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                      </TableCell>
+                      <TableCell className="font-mono whitespace-nowrap text-[13px]">{row.order_no}</TableCell>
+                      <TableCell className="text-[13px] truncate max-w-[140px]"><span className="block truncate">{row.partner_id || ""}</span></TableCell>
+                      <TableCell className="whitespace-nowrap text-[13px]">{row.order_date || ""}</TableCell>
+                      <TableCell className="font-mono text-[13px]">{row.part_code}</TableCell>
+                      <TableCell className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.part_name}>{row.part_name}</span></TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                      <TableCell className="text-[13px]">{row.unit}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.qty ? Number(row.qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px] text-muted-foreground">{row.ship_qty ? Number(row.ship_qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.balance_qty ? Number(row.balance_qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px] font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-[13px]">{row.due_date || ""}</TableCell>
+                      <TableCell className="text-muted-foreground"><span className="block truncate max-w-[120px]">{row.memo || ""}</span></TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
       </div>
 
       {/* 수주 등록/수정 모달 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title={isEditMode ? "수주 수정" : "수주 등록"}
-        description={isEditMode ? "수주 정보를 수정합니다." : "새로운 수주를 등록합니다."}
-        footer={
-          <>
-            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
-            <Button onClick={handleSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
-            </Button>
-          </>
-        }
-      >
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="flex flex-col gap-0 p-0 max-w-5xl w-full" style={{ maxHeight: "85vh" }}>
+          <DialogHeader className="shrink-0 border-b border-border px-6 py-5">
+            <DialogTitle className="text-[17px] font-bold">
+              {isEditMode ? "수주 수정" : "수주 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-sm text-muted-foreground">
+              {isEditMode ? "수주 정보를 수정합니다." : "새로운 수주를 등록합니다."}
+            </DialogDescription>
+          </DialogHeader>
 
-          <div className="space-y-4 py-2">
-            {/* 기본 레이어 (항상 표시) */}
-            <div className="grid grid-cols-4 gap-4">
-              <div className="space-y-1.5">
-                <Label className="text-sm">수주번호 <span className="text-destructive">*</span></Label>
-                <Input value={masterForm.order_no || ""} onChange={(e) => setMasterForm((p) => ({ ...p, order_no: e.target.value }))}
-                  placeholder="수주번호" className="h-9" disabled={isEditMode} />
+          <div className="flex-1 overflow-y-auto px-6 py-5 space-y-6">
+            {/* 기본 정보 섹션 */}
+            <div className="space-y-3">
+              <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                기본 정보
+                <div className="flex-1 h-px bg-border" />
               </div>
-              <div className="space-y-1.5">
-                <Label className="text-sm">수주일</Label>
-                <FormDatePicker value={masterForm.order_date || ""} onChange={(v) => setMasterForm((p) => ({ ...p, order_date: v }))} placeholder="수주일" />
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-sm">판매 유형</Label>
-                <SmartSelect options={categoryOptions["sell_mode"] || []} value={masterForm.sell_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, sell_mode: v }))} placeholder="선택" />
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-sm">입력방식</Label>
-                <SmartSelect options={categoryOptions["input_mode"] || []} value={masterForm.input_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, input_mode: v }))} placeholder="선택" />
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-sm">단가방식</Label>
-                <SmartSelect options={categoryOptions["price_mode"] || []} value={masterForm.price_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, price_mode: v }))} placeholder="선택" />
+              <div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    수주번호 <span className="text-destructive">*</span>
+                  </Label>
+                  <Input
+                    value={masterForm.order_no || ""}
+                    onChange={(e) => setMasterForm((p) => ({ ...p, order_no: e.target.value }))}
+                    placeholder="수주번호" className="h-9" disabled={isEditMode}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    수주일 <span className="text-destructive">*</span>
+                  </Label>
+                  <Input
+                    type="date"
+                    value={masterForm.order_date || ""}
+                    onChange={(e) => setMasterForm((p) => ({ ...p, order_date: e.target.value }))}
+                    className="h-9"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    판매유형 <span className="text-destructive">*</span>
+                  </Label>
+                  <Select value={masterForm.sell_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, sell_mode: v }))}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                    <SelectContent>
+                      {(categoryOptions["sell_mode"] || []).map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">입력방식</Label>
+                  <Select value={masterForm.input_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, input_mode: v }))}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                    <SelectContent>
+                      {(categoryOptions["input_mode"] || []).map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">단가방식</Label>
+                  <Select value={masterForm.price_mode || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, price_mode: v })); recalcPrices(v, masterForm.partner_id || ""); }}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                    <SelectContent>
+                      {(categoryOptions["price_mode"] || []).map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex items-end pb-1">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <Checkbox checked={allowPriceEdit} onCheckedChange={(v) => setAllowPriceEdit(!!v)} />
+                    <span className="text-sm font-medium">단가 수정 허용</span>
+                  </label>
+                </div>
               </div>
             </div>
 
-            {/* 레이어 2: 거래처 우선 (거래처, 담당자, 납품처, 납품장소) */}
+            {/* 거래처 우선 조건부 레이어 */}
             {isSupplierFirst && (
-              <div className="grid grid-cols-4 gap-4 border-t pt-4">
-                <div className="space-y-1.5">
-                  <Label className="text-sm">거래처</Label>
-                  <SmartSelect options={categoryOptions["partner_id"] || []} value={masterForm.partner_id || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, partner_id: v, delivery_partner_id: "" })); loadDeliveryOptions(v); }} placeholder="거래처 선택" />
+              <div className="rounded-lg border border-dashed border-border bg-muted/50 p-4 space-y-3">
+                <div className="flex items-center gap-1.5 text-xs font-semibold text-primary">
+                  <ClipboardList className="w-3.5 h-3.5" /> 거래처 정보
                 </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">담당자</Label>
-                  <SmartSelect options={categoryOptions["manager_id"] || []} value={masterForm.manager_id || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager_id: v }))} placeholder="담당자 선택" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">납품처</Label>
-                  {deliveryOptions.length > 0 ? (
-                    <SmartSelect options={deliveryOptions} value={masterForm.delivery_partner_id || ""} onValueChange={(v) => {
-                      setMasterForm((p) => ({ ...p, delivery_partner_id: v }));
-                      const found = deliveryOptions.find((o) => o.code === v);
-                      if (found) {
-                        const addr = found.label.match(/\((.+)\)$/)?.[1] || "";
-                        if (addr) setMasterForm((p) => ({ ...p, delivery_partner_id: v, delivery_address: addr }));
-                      }
-                    }} placeholder="납품처 선택" />
-                  ) : (
-                    <Input value={masterForm.delivery_partner_id || ""} onChange={(e) => setMasterForm((p) => ({ ...p, delivery_partner_id: e.target.value }))}
-                      placeholder={masterForm.partner_id ? "등록된 납품처 없음" : "거래처를 먼저 선택하세요"} className="h-9" disabled={!masterForm.partner_id} />
-                  )}
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">납품장소</Label>
-                  <Input value={masterForm.delivery_address || ""} onChange={(e) => setMasterForm((p) => ({ ...p, delivery_address: e.target.value }))}
-                    placeholder="납품장소" className="h-9" />
+                <div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">거래처</Label>
+                    <Select
+                      value={masterForm.partner_id || ""}
+                      onValueChange={(v) => { setMasterForm((p) => ({ ...p, partner_id: v, delivery_partner_id: "" })); loadDeliveryOptions(v); recalcPrices(masterForm.price_mode || "", v); }}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="거래처 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["partner_id"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자</Label>
+                    <Select value={masterForm.manager_id || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager_id: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="담당자 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["manager_id"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">납품처</Label>
+                    {deliveryOptions.length > 0 ? (
+                      <Select
+                        value={masterForm.delivery_partner_id || ""}
+                        onValueChange={(v) => {
+                          setMasterForm((p) => ({ ...p, delivery_partner_id: v }));
+                          const found = deliveryOptions.find((o) => o.code === v);
+                          if (found) {
+                            const addr = found.label.match(/\((.+)\)$/)?.[1] || "";
+                            if (addr) setMasterForm((p) => ({ ...p, delivery_partner_id: v, delivery_address: addr }));
+                          }
+                        }}
+                      >
+                        <SelectTrigger className="h-9"><SelectValue placeholder="납품처 선택" /></SelectTrigger>
+                        <SelectContent>
+                          {deliveryOptions.map((o) => (
+                            <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={masterForm.delivery_partner_id || ""}
+                        onChange={(e) => setMasterForm((p) => ({ ...p, delivery_partner_id: e.target.value }))}
+                        placeholder={masterForm.partner_id ? "등록된 납품처 없음" : "거래처를 먼저 선택해주세요"}
+                        className="h-9" disabled={!masterForm.partner_id}
+                      />
+                    )}
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">납품장소</Label>
+                    <Input
+                      value={masterForm.delivery_address || ""}
+                      onChange={(e) => setMasterForm((p) => ({ ...p, delivery_address: e.target.value }))}
+                      placeholder="납품장소" className="h-9"
+                    />
+                  </div>
                 </div>
               </div>
             )}
 
-            {/* 레이어 4: 해외판매 (인코텀즈, 결제조건, 통화, 선적항, 도착항, HS코드) */}
+            {/* 해외판매 조건부 레이어 */}
             {isOverseas && (
-              <div className="grid grid-cols-3 gap-4 border-t pt-4">
-                <div className="space-y-1.5">
-                  <Label className="text-sm">인코텀즈</Label>
-                  <SmartSelect options={categoryOptions["incoterms"] || []} value={masterForm.incoterms || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, incoterms: v }))} placeholder="선택" />
+              <div className="rounded-lg border border-dashed border-border bg-muted/50 p-4 space-y-3">
+                <div className="flex items-center gap-1.5 text-xs font-semibold text-primary">
+                  해외판매 추가 정보
                 </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">결제조건</Label>
-                  <SmartSelect options={categoryOptions["payment_term"] || []} value={masterForm.payment_term || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, payment_term: v }))} placeholder="선택" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">통화</Label>
-                  <Input value={masterForm.currency || ""} onChange={(e) => setMasterForm((p) => ({ ...p, currency: e.target.value }))}
-                    placeholder="KRW" className="h-9" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">선적항</Label>
-                  <Input value={masterForm.port_of_loading || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_loading: e.target.value }))}
-                    className="h-9" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">도착항</Label>
-                  <Input value={masterForm.port_of_discharge || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_discharge: e.target.value }))}
-                    className="h-9" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">HS Code</Label>
-                  <Input value={masterForm.hs_code || ""} onChange={(e) => setMasterForm((p) => ({ ...p, hs_code: e.target.value }))}
-                    className="h-9" />
+                <div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-3">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">인코텀즈</Label>
+                    <Select value={masterForm.incoterms || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, incoterms: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["incoterms"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">결제조건</Label>
+                    <Select value={masterForm.payment_term || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, payment_term: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["payment_term"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">통화</Label>
+                    <Select value={masterForm.currency || "KRW"} onValueChange={(v) => setMasterForm((p) => ({ ...p, currency: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="통화 선택" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="KRW">KRW (원)</SelectItem>
+                        <SelectItem value="USD">USD (달러)</SelectItem>
+                        <SelectItem value="EUR">EUR (유로)</SelectItem>
+                        <SelectItem value="JPY">JPY (엔)</SelectItem>
+                        <SelectItem value="CNY">CNY (위안)</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">선적항</Label>
+                    <Input value={masterForm.port_of_loading || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_loading: e.target.value }))} className="h-9" />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">도착항</Label>
+                    <Input value={masterForm.port_of_discharge || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_discharge: e.target.value }))} className="h-9" />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">HS Code</Label>
+                    <Input value={masterForm.hs_code || ""} onChange={(e) => setMasterForm((p) => ({ ...p, hs_code: e.target.value }))} className="h-9 font-mono text-xs" />
+                  </div>
                 </div>
               </div>
             )}
 
-            {/* 리피터 그리드 (품목 목록) — 레이어 2,3 공통 */}
-            <div className="border rounded-lg">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10">
-                <span className="text-sm font-semibold">수주 품목</span>
-                <Button size="sm" variant="outline" onClick={() => { setItemSelectedMap(new Map()); setItemPage(1); setItemPageInput("1"); setItemSearchKeyword(""); setItemSelectOpen(true); searchItems(1); }}>
-                  <Plus className="w-4 h-4 mr-1" /> 품목 추가
+            {/* 품목 내역 리피터 */}
+            <div className="space-y-2.5">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  <Package className="w-4 h-4" /> 품목 내역
+                  <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                    {detailRows.length}
+                  </span>
+                </div>
+                <Button size="sm" onClick={() => {
+                  setItemSelectedMap(new Map());
+                  setItemPage(1);
+                  setItemPageInput("1");
+                  setItemSearchKeyword("");
+                  setItemSelectOpen(true);
+                  searchItems(1);
+                }}>
+                  <Plus className="w-4 h-4" /> 품목 추가
                 </Button>
               </div>
-              <div className="overflow-auto max-h-[300px]">
-                <Table className="table-fixed">
-                  <TableHeader className="sticky top-0 bg-background z-10">
-                    <TableRow>
-                      <TableHead className="w-[40px]"></TableHead>
-                      <TableHead className="w-[120px]">품번</TableHead>
-                      <TableHead className="w-[120px]">품명</TableHead>
-                      <TableHead className="w-[80px]">규격</TableHead>
-                      <TableHead className="w-[60px]">단위</TableHead>
-                      <TableHead className="w-[100px]">기준단가</TableHead>
-                      <TableHead className="w-[90px]">수량</TableHead>
-                      <TableHead className="w-[100px]">단가</TableHead>
-                      <TableHead className="w-[100px]">금액</TableHead>
-                      <TableHead className="w-[70px]">통화</TableHead>
-                      <TableHead className="w-[160px]">납기일</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {detailRows.length === 0 ? (
-                      <TableRow><TableCell colSpan={11} className="text-center text-muted-foreground py-8">품목을 추가해주세요</TableCell></TableRow>
-                    ) : detailRows.map((row, idx) => (
-                      <TableRow key={row._id || idx}>
-                        <TableCell>
-                          <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive" onClick={() => removeDetailRow(idx)}>
-                            <X className="w-3.5 h-3.5" />
-                          </Button>
-                        </TableCell>
-                        <TableCell className="text-xs max-w-[120px]"><span className="block truncate" title={row.part_code}>{row.part_code}</span></TableCell>
-                        <TableCell className="text-xs max-w-[120px]"><span className="block truncate" title={row.part_name}>{row.part_name}</span></TableCell>
-                        <TableCell className="text-xs">{row.spec}</TableCell>
-                        <TableCell className="text-xs">{row.unit}</TableCell>
-                        <TableCell className="text-sm text-right text-muted-foreground">{row.standard_price ? Number(row.standard_price).toLocaleString() : ""}</TableCell>
-                        <TableCell>
-                          <Input value={formatNumber(row.qty || "")} onChange={(e) => updateDetailRow(idx, "qty", parseNumber(e.target.value))}
-                            className="h-8 text-sm text-right" />
-                        </TableCell>
-                        <TableCell>
-                          <Input value={formatNumber(row.unit_price || "")} onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))}
-                            className="h-8 text-sm text-right" />
-                        </TableCell>
-                        <TableCell className="text-sm text-right font-medium">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
-                        <TableCell>
-                          <Input value={row.currency_code || ""} onChange={(e) => updateDetailRow(idx, "currency_code", e.target.value)}
-                            className="h-8 text-sm" />
-                        </TableCell>
-                        <TableCell>
-                          <FormDatePicker value={row.due_date || ""} onChange={(v) => updateDetailRow(idx, "due_date", v)} placeholder="납기일" />
-                        </TableCell>
+              {detailRows.length === 0 ? (
+                <div className="flex flex-col items-center gap-2 rounded-lg border border-dashed border-border py-8 text-muted-foreground">
+                  <Package className="h-8 w-8 opacity-40" />
+                  <span className="text-sm">아직 추가된 품목이 없어요. 위 버튼으로 품목을 추가해주세요.</span>
+                </div>
+              ) : (
+                <div className="overflow-x-auto rounded-lg border border-border">
+                  <Table noWrapper className="min-w-max w-full">
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="w-10 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                        <TableHead className="w-28 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                        <TableHead className="w-32 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                        <TableHead className="w-20 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                        <TableHead className="w-20 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                        <TableHead className="w-24 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장재</TableHead>
+                        <TableHead className="w-20 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                        <TableHead className="w-20 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                        <TableHead className="w-20 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장수량</TableHead>
+                        <TableHead className="w-24 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                        <TableHead className="w-24 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
+                        <TableHead className="w-32 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>
+                        <TableHead className="w-24 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">분할/삭제</TableHead>
                       </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </div>
+                    </TableHeader>
+                    <TableBody>
+                      {detailRows.map((row, idx) => (
+                        <TableRow key={row._id || idx}>
+                          <TableCell className="text-center font-mono text-[13px] text-muted-foreground/50">{idx + 1}</TableCell>
+                          <TableCell className="max-w-[112px]">
+                            <span className="block truncate font-mono text-[13px]" title={row.part_code}>{row.part_code}</span>
+                          </TableCell>
+                          <TableCell className="max-w-[128px]">
+                            <span className="block truncate text-[13px]" title={row.part_name}>{row.part_name}</span>
+                          </TableCell>
+                          <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                          <TableCell className="text-[13px] text-muted-foreground">{row.material}</TableCell>
+                          <TableCell>
+                            <Input
+                              value={row.packing_material || ""}
+                              onChange={(e) => updateDetailRow(idx, "packing_material", e.target.value)}
+                              placeholder="포장재"
+                              className="h-8 text-xs"
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Select value={row.unit || ""} onValueChange={(v) => updateDetailRow(idx, "unit", v)}>
+                              <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                              <SelectContent>
+                                {(categoryOptions["item_unit"] || []).map((o) => (
+                                  <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="number"
+                              min="1"
+                              value={row.qty || "1"}
+                              onChange={(e) => updateDetailRow(idx, "qty", e.target.value)}
+                              className="h-8 text-xs text-right font-mono w-16"
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="number"
+                              min="0"
+                              value={row.pack_qty || "0"}
+                              onChange={(e) => updateDetailRow(idx, "pack_qty", e.target.value)}
+                              className="h-8 text-xs text-right font-mono w-16"
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              value={formatNumber(row.unit_price || "")}
+                              onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))}
+                              readOnly={!allowPriceEdit}
+                              className={cn("h-8 text-xs text-right font-mono w-20", !allowPriceEdit && "bg-muted cursor-not-allowed")}
+                            />
+                          </TableCell>
+                          <TableCell className="text-right font-mono text-[13px] font-semibold">
+                            {row.amount ? Number(row.amount).toLocaleString() : "0"}
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="date"
+                              value={row.due_date || ""}
+                              onChange={(e) => updateDetailRow(idx, "due_date", e.target.value)}
+                              className="h-8 text-xs"
+                            />
+                          </TableCell>
+                          <TableCell className="text-center">
+                            <div className="flex items-center gap-1 justify-center">
+                              <Button
+                                variant="default" size="sm"
+                                className="h-7 px-2 text-[11px] bg-emerald-500 hover:bg-emerald-600 text-white"
+                                onClick={() => {
+                                  setDetailRows((prev) => {
+                                    const next = [...prev];
+                                    const newRow = { ...next[idx], _id: `split_${Date.now()}_${Math.random()}` };
+                                    next.splice(idx + 1, 0, newRow);
+                                    return next;
+                                  });
+                                  toast.success("행이 분할되었어요");
+                                }}
+                              >
+                                분할
+                              </Button>
+                              <Button
+                                variant="ghost" size="sm"
+                                className="h-7 w-7 p-0 text-muted-foreground/50 hover:text-destructive hover:bg-destructive/5"
+                                onClick={() => removeDetailRow(idx)}
+                              >
+                                <X className="w-3.5 h-3.5" />
+                              </Button>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
             </div>
 
-            {/* 메모 */}
-            <div className="space-y-1.5">
-              <Label className="text-sm">메모</Label>
-              <Input value={masterForm.memo || ""} onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
-                placeholder="메모" className="h-9" />
+            {/* 비고 */}
+            <div className="space-y-3">
+              <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                비고
+                <div className="flex-1 h-px bg-border" />
+              </div>
+              <textarea
+                value={masterForm.memo || ""}
+                onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
+                placeholder="특이사항이나 메모를 입력해주세요"
+                rows={3}
+                className="w-full rounded-md border border-input bg-muted px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring/25 resize-vertical min-h-[80px]"
+              />
             </div>
           </div>
 
-          {/* 품목 선택 모달 (등록 모달 내부에 중첩) */}
+          <DialogFooter className="shrink-0 border-t border-border px-6 py-4">
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />} 저장
+            </Button>
+          </DialogFooter>
+
+          {/* 품목 선택 중첩 모달 */}
           <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
-            <DialogContent className="max-w-3xl max-h-[70vh]" onInteractOutside={(e) => e.preventDefault()}>
+            <DialogContent className="max-w-3xl" style={{ maxHeight: "70vh" }} onInteractOutside={(e) => e.preventDefault()}>
               <DialogHeader>
                 <DialogTitle>품목 선택</DialogTitle>
                 <DialogDescription>수주에 추가할 품목을 선택 후 하단 버튼을 눌러주세요.</DialogDescription>
               </DialogHeader>
               <div className="flex gap-2 mb-3">
-                <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
+                <Input
+                  placeholder="품명/품목코드 검색"
+                  value={itemSearchKeyword}
                   onChange={(e) => setItemSearchKeyword(e.target.value)}
                   onKeyDown={(e) => e.key === "Enter" && triggerNewSearch()}
-                  className="h-9 flex-1" />
+                  className="h-9 flex-1"
+                />
                 <Select value={itemSearchDivision} onValueChange={setItemSearchDivision}>
                   <SelectTrigger className="h-9 w-[130px]"><SelectValue placeholder="관리품목" /></SelectTrigger>
                   <SelectContent>
@@ -894,15 +1433,16 @@ export default function SalesOrderPage() {
                   </SelectContent>
                 </Select>
                 <Button size="sm" onClick={triggerNewSearch} disabled={itemSearchLoading} className="h-9">
-                  {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+                  {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" />조회</>}
                 </Button>
               </div>
-              <div className="overflow-auto max-h-[320px] border rounded-lg">
-                <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10">
-                    <TableRow>
-                      <TableHead className="w-[40px] text-center">
-                        <input type="checkbox"
+              <div className="overflow-auto rounded-lg border border-border" style={{ maxHeight: "320px" }}>
+                <Table noWrapper>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-10 text-center">
+                        <input
+                          type="checkbox"
                           checked={itemSearchResults.length > 0 && itemSearchResults.every((i) => itemSelectedMap.has(i.id))}
                           onChange={(e) => {
                             setItemSelectedMap((prev) => {
@@ -911,33 +1451,47 @@ export default function SalesOrderPage() {
                               else itemSearchResults.forEach((i) => next.delete(i.id));
                               return next;
                             });
-                          }} />
+                          }}
+                        />
                       </TableHead>
-                      <TableHead className="w-[130px]">품목코드</TableHead>
-                      <TableHead className="min-w-[150px]">품명</TableHead>
-                      <TableHead className="w-[100px]">규격</TableHead>
-                      <TableHead className="w-[100px]">재질</TableHead>
-                      <TableHead className="w-[60px]">단위</TableHead>
+                      <TableHead className="w-32 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="w-24 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-24 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                      <TableHead className="w-16 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
                     {itemSearchResults.length === 0 ? (
-                      <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
+                      <TableRow>
+                        <TableCell colSpan={6} className="py-8 text-center text-muted-foreground">검색 결과가 없어요</TableCell>
+                      </TableRow>
                     ) : itemSearchResults.map((item) => (
-                      <TableRow key={item.id} className={cn("cursor-pointer", itemSelectedMap.has(item.id) && "bg-primary/5")}
+                      <TableRow
+                        key={item.id}
+                        className={cn("cursor-pointer", itemSelectedMap.has(item.id) && "bg-primary/5")}
                         onClick={() => setItemSelectedMap((prev) => {
                           const next = new Map(prev);
                           if (next.has(item.id)) next.delete(item.id); else next.set(item.id, item);
                           return next;
-                        })}>
+                        })}
+                      >
                         <TableCell className="text-center">
                           <input type="checkbox" checked={itemSelectedMap.has(item.id)} readOnly />
                         </TableCell>
-                        <TableCell className="text-xs max-w-[130px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
-                        <TableCell className="text-sm max-w-[150px]"><span className="block truncate" title={item.item_name}>{item.item_name}</span></TableCell>
-                        <TableCell className="text-xs">{item.size}</TableCell>
-                        <TableCell className="text-xs">{categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}</TableCell>
-                        <TableCell className="text-xs">{categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}</TableCell>
+                        <TableCell className="max-w-[128px]">
+                          <span className="block truncate text-[13px]" title={item.item_number}>{item.item_number}</span>
+                        </TableCell>
+                        <TableCell className="max-w-[150px]">
+                          <span className="block truncate text-sm" title={item.item_name}>{item.item_name}</span>
+                        </TableCell>
+                        <TableCell className="text-[13px]">{item.size}</TableCell>
+                        <TableCell className="text-[13px]">
+                          {categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}
+                        </TableCell>
+                        <TableCell className="text-[13px]">
+                          {categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}
+                        </TableCell>
                       </TableRow>
                     ))}
                   </TableBody>
@@ -946,7 +1500,8 @@ export default function SalesOrderPage() {
               <div className="flex items-center justify-between w-full border-t pt-2">
                 <div className="flex items-center gap-1">
                   <span className="text-xs text-muted-foreground">표시:</span>
-                  <input type="number" min={1} max={200} value={itemPageSize}
+                  <input
+                    type="number" min={1} max={200} value={itemPageSize}
                     onChange={(e) => {
                       const v = Math.min(200, Math.max(1, Number(e.target.value) || 20));
                       setItemPageSize(v);
@@ -954,7 +1509,8 @@ export default function SalesOrderPage() {
                       setItemPageInput("1");
                       searchItems(1, v);
                     }}
-                    className="h-7 w-14 rounded-md border px-1 text-center text-xs" />
+                    className="h-7 w-14 rounded-md border px-1 text-center text-xs"
+                  />
                 </div>
                 <div className="flex items-center gap-1">
                   <Button variant="outline" size="sm" className="h-7 w-7 p-0"
@@ -965,12 +1521,14 @@ export default function SalesOrderPage() {
                     onClick={() => handleItemPageChange(itemPage - 1)} disabled={itemPage === 1 || itemSearchLoading}>
                     <ChevronLeft className="h-3 w-3" />
                   </Button>
-                  <input type="text" inputMode="numeric" value={itemPageInput}
+                  <input
+                    type="text" inputMode="numeric" value={itemPageInput}
                     onChange={(e) => setItemPageInput(e.target.value)}
                     onKeyDown={(e) => { if (e.key === "Enter") { commitItemPageInput(); (e.target as HTMLInputElement).blur(); } }}
                     onBlur={commitItemPageInput}
                     onFocus={(e) => e.target.select()}
-                    className="h-7 w-10 rounded-md border px-1 text-center text-xs" />
+                    className="h-7 w-10 rounded-md border px-1 text-center text-xs"
+                  />
                   <span className="text-xs text-muted-foreground">/ {itemTotalPages || 1}</span>
                   <Button variant="outline" size="sm" className="h-7 w-7 p-0"
                     onClick={() => handleItemPageChange(itemPage + 1)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
@@ -984,19 +1542,20 @@ export default function SalesOrderPage() {
                 <span className="text-xs text-muted-foreground">총 {itemTotal}건</span>
               </div>
               <DialogFooter>
-                <div className="flex items-center gap-2 w-full justify-between">
+                <div className="flex w-full items-center justify-between">
                   <span className="text-sm text-muted-foreground">{itemSelectedMap.size}개 선택됨</span>
                   <div className="flex gap-2">
                     <Button variant="outline" onClick={() => { setItemSelectedMap(new Map()); setItemSelectOpen(false); }}>취소</Button>
                     <Button onClick={addSelectedItemsToDetail} disabled={itemSelectedMap.size === 0}>
-                      <Plus className="w-4 h-4 mr-1" /> {itemSelectedMap.size}개 추가
+                      <Plus className="w-4 h-4 mr-1" />{itemSelectedMap.size}개 추가
                     </Button>
                   </div>
                 </div>
               </DialogFooter>
             </DialogContent>
           </Dialog>
-      </FullscreenDialog>
+        </DialogContent>
+      </Dialog>
 
       {/* 출하계획 동시 등록 모달 */}
       <ShippingPlanBatchModal
@@ -1017,11 +1576,12 @@ export default function SalesOrderPage() {
 
       {/* 테이블 설정 모달 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={DETAIL_TABLE}
-        settingsId="sales-order"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
 
       {/* 공통 확인 다이얼로그 */}
diff --git a/frontend/app/(main)/COMPANY_10/sales/quote/page.tsx b/frontend/app/(main)/COMPANY_10/sales/quote/page.tsx
new file mode 100644
index 00000000..18e106c9
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_10/sales/quote/page.tsx
@@ -0,0 +1,995 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, FileText,
+} from "lucide-react";
+import { apiClient } from "@/lib/api/client";
+import { reportApi } from "@/lib/api/reportApi";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import {
+  ResizablePanelGroup, ResizablePanel, ResizableHandle,
+} from "@/components/ui/resizable";
+import { ReportInlineViewer } from "@/components/report/ReportInlineViewer";
+import { ReportMaster, ComponentConfig } from "@/types/report";
+
+const MASTER_TABLE = "quote_mng";
+
+const fmt = (val: string) => {
+  const num = val.replace(/[^\d.-]/g, "");
+  if (!num) return "";
+  const parts = num.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+const pn = (val: string) => val.replace(/,/g, "");
+
+const GRID_COLUMNS: DataGridColumn[] = [
+  { key: "quote_no", label: "견적번호", width: "w-[120px]" },
+  { key: "customer_name", label: "거래처명", width: "w-[150px]" },
+  { key: "quote_date", label: "견적일자", width: "w-[110px]" },
+  { key: "valid_until", label: "유효기한", width: "w-[110px]" },
+  { key: "total_amount", label: "견적금액", width: "w-[120px]", formatNumber: true, align: "right" },
+  { key: "status_label", label: "상태", width: "w-[90px]" },
+  { key: "manager", label: "담당자", width: "w-[100px]" },
+  { key: "domestic_type", label: "국내/국외", width: "w-[90px]" },
+];
+
+const STATUS_MAP: Record<string, string> = {
+  draft: "작성중", pending: "검토중", approved: "승인", rejected: "반려", converted: "수주전환",
+};
+
+const EMPTY_ITEM = {
+  item_code: "", item_name: "", spec: "", qty: "1", unit: "EA",
+  request_length: "", unit_price: "0", supply_amount: "0", vat_amount: "0", total_amount: "0", notes: "",
+};
+
+export default function QuoteManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  const [quotes, setQuotes] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [selectedRow, setSelectedRow] = useState<any | null>(null);
+
+  // 컴포넌트 클릭 편집 모달
+  const [editComp, setEditComp] = useState<ComponentConfig | null>(null);
+  const [editValues, setEditValues] = useState<Record<string, string>>({});
+  const [items, setItems] = useState<(typeof EMPTY_ITEM)[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // 기본정보 모달
+  const [basicInfoOpen, setBasicInfoOpen] = useState(false);
+  const [basicForm, setBasicForm] = useState({ quote_date: "", valid_until: "", status: "draft" });
+
+  // 엑셀 / 리포트
+  const [excelOpen, setExcelOpen] = useState(false);
+  const [reportList, setReportList] = useState<ReportMaster[]>([]);
+  const [selectedReportId, setSelectedReportId] = useState<string | null>(null);
+  const [reportKey, setReportKey] = useState(0);
+
+  // 품목 검색
+  const [itemSearchOpen, setItemSearchOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSelectedMap, setItemSelectedMap] = useState<Map<string, any>>(new Map());
+
+  // 거래처 검색
+  const [custSearchOpen, setCustSearchOpen] = useState(false);
+  const [custSearchKeyword, setCustSearchKeyword] = useState("");
+  const [custSearchResults, setCustSearchResults] = useState<any[]>([]);
+  const [custSearchLoading, setCustSearchLoading] = useState(false);
+
+  // 사원(담당자) 검색
+  const [userSearchOpen, setUserSearchOpen] = useState(false);
+  const [userSearchKeyword, setUserSearchKeyword] = useState("");
+  const [userSearchResults, setUserSearchResults] = useState<any[]>([]);
+  const [userSearchLoading, setUserSearchLoading] = useState(false);
+
+  // ── 데이터 로드 ──
+
+  const mapRow = (r: any) => ({
+    ...r, id: String(r.objid), status_label: STATUS_MAP[r.status] ?? r.status, total_amount: Number(r.total_amount || 0),
+  });
+
+  const fetchQuotes = useCallback(async () => {
+    if (!user) return;
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      searchFilters.forEach((f) => { if (f.value) params[f.columnName] = f.value; });
+      const res = await apiClient.get("/quotes/list", { params });
+      const mapped = (res.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+    } catch { toast.error("견적 목록 조회 실패"); }
+    finally { setLoading(false); }
+  }, [user, searchFilters]);
+
+  useEffect(() => { fetchQuotes(); }, [fetchQuotes]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await reportApi.getReports({ page: 1, limit: 100 });
+        if (res.success) {
+          const items = res.data.items ?? [];
+          setReportList(items);
+          if (items.length > 0 && !selectedReportId) setSelectedReportId(items[0].report_id);
+        }
+      } catch { /* 무시 */ }
+    })();
+  }, []);
+
+  // ── "신규" → DB에 draft 즉시 생성 → 자동 선택 ──
+
+  const handleCreate = async () => {
+    try {
+      const numRes = await apiClient.get("/quotes/generate-number");
+      const quoteNo = numRes.data?.data?.quoteNo ?? "";
+      const createRes = await apiClient.post("/quotes", {
+        quote_no: quoteNo,
+        quote_date: new Date().toISOString().split("T")[0],
+        status: "draft",
+        customer_name: "",
+        items: [],
+      });
+      toast.success("신규 견적이 생성되었습니다. 우측 양식에서 각 영역을 클릭하여 입력하세요.");
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+
+      const newObjid = createRes.data?.data?.objid;
+      const newRow = newObjid ? mapped.find((r: any) => r.objid === newObjid) : mapped[0];
+      if (newRow) setSelectedRow(newRow);
+    } catch { toast.error("견적 생성 실패"); }
+  };
+
+  // ── 삭제 ──
+
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.info("삭제할 견적을 선택하세요."); return; }
+    const ok = await confirm(`${checkedIds.length}건의 견적을 삭제하시겠습니까?`, { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      for (const id of checkedIds) await apiClient.delete(`/quotes/${id}`);
+      toast.success("삭제 완료");
+      setCheckedIds([]);
+      setSelectedRow(null);
+      fetchQuotes();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // ── 컴포넌트 클릭 → 편집 모달 ──
+
+  const handleComponentClick = async (comp: ComponentConfig) => {
+    if (!selectedRow) return;
+    setEditComp(comp);
+
+    if (comp.type === "table") {
+      // 테이블 → 품목 편집
+      try {
+        const res = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const d = res.data?.data;
+        setItems(
+          (d?.items || []).length > 0
+            ? d.items.map((it: any) => ({
+                item_code: it.item_code || "", item_name: it.item_name || "", spec: it.spec || "",
+                qty: String(it.qty ?? 1), unit: it.unit || "EA",
+                request_length: it.request_length ? String(it.request_length) : "",
+                unit_price: String(it.unit_price ?? 0), supply_amount: String(it.supply_amount ?? 0),
+                vat_amount: String(it.vat_amount ?? 0), total_amount: String(it.total_amount ?? 0),
+                notes: it.notes || "",
+              }))
+            : [{ ...EMPTY_ITEM }],
+        );
+      } catch { setItems([{ ...EMPTY_ITEM }]); }
+    } else if (comp.type === "card") {
+      const cardItems = (comp as any).cardItems ?? [];
+      // 우측 카드 (회사정보 + 담당자) → 담당자 선택
+      const hasCompanyField = cardItems.some((ci: any) =>
+        ["company_name_self", "ceo_self", "biz_no_self", "address_self"].includes(ci.fieldName || "")
+      );
+      if (hasCompanyField) {
+        setUserSearchKeyword("");
+        setUserSearchResults([]);
+        setUserSearchOpen(true);
+        searchUsers();
+        return;
+      }
+      // 좌측 카드 (거래처) → 거래처 검색
+      const hasCustomerField = cardItems.some((ci: any) =>
+        ["customer_name", "customer_ceo", "customer_biz_no"].includes(ci.fieldName || "")
+      );
+      if (hasCustomerField) {
+        setCustSearchKeyword("");
+        setCustSearchResults([]);
+        setCustSearchOpen(true);
+        searchCustomers();
+        return;
+      }
+      // 기타 카드
+      const vals: Record<string, string> = {};
+      cardItems.forEach((ci: any) => {
+        if (ci.fieldName) vals[ci.fieldName] = selectedRow[ci.fieldName] ?? ci.value ?? "";
+      });
+      setEditValues(vals);
+    } else if (comp.type === "text" || comp.type === "label") {
+      // 텍스트 → 기본정보 모달 하나로 통합
+      const basicFields = ["quote_no", "quote_date", "valid_until", "status"];
+      if (comp.fieldName && basicFields.includes(comp.fieldName)) {
+        // 기본정보 모달
+        const detail = await apiClient.get(`/quotes/${selectedRow.objid}`).then(r => r.data?.data).catch(() => null);
+        setBasicForm({
+          quote_date: detail?.quote_date || "",
+          valid_until: detail?.valid_until || "",
+          status: detail?.status || "draft",
+        });
+        setBasicInfoOpen(true);
+        setEditComp(null);
+        return;
+      }
+      // 기타 텍스트 (제목 등)
+      toast.info("이 영역은 리포트 디자이너에서 수정하세요.");
+      setEditComp(null);
+      return;
+    } else if (comp.type === "calculation") {
+      // 계산은 읽기 전용 안내
+      toast.info("계산 컴포넌트는 품목 데이터에서 자동 계산됩니다.");
+      setEditComp(null);
+    } else if (comp.type === "signature" || comp.type === "stamp") {
+      toast.info("서명/도장은 리포트 디자이너에서 설정하세요.");
+      setEditComp(null);
+    } else {
+      setEditValues({});
+    }
+  };
+
+  // ── 컴포넌트 편집 저장 ──
+
+  const handleEditSave = async () => {
+    if (!selectedRow || !editComp) return;
+    setSaving(true);
+    try {
+      if (editComp.type === "table") {
+        // 품목 저장 — 기존 견적 데이터 불러와서 품목만 교체
+        const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const existing = detailRes.data?.data ?? {};
+        const payload = {
+          ...existing,
+          items: items.filter((it) => it.item_name).map((it) => ({
+            item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+            qty: Number(pn(it.qty)) || 0, unit: it.unit,
+            request_length: it.request_length ? Number(it.request_length) : null,
+            unit_price: Number(pn(it.unit_price)) || 0,
+            supply_amount: Number(pn(it.supply_amount)) || 0,
+            vat_amount: Number(pn(it.vat_amount)) || 0,
+            total_amount: Number(pn(it.total_amount)) || 0,
+            notes: it.notes,
+          })),
+        };
+        await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      } else {
+        // 텍스트/카드 → 해당 필드만 업데이트
+        const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const existing = detailRes.data?.data ?? {};
+        const payload = { ...existing, ...editValues };
+        // items는 기존 유지
+        payload.items = (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0),
+          notes: it.notes,
+        }));
+        await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      }
+
+      toast.success("저장되었습니다.");
+      setEditComp(null);
+
+      // 목록 + 리포트 갱신
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 거래처 검색 ──
+
+  const searchCustomers = async () => {
+    setCustSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (custSearchKeyword) {
+        filters.push({ columnName: "customer_name", operator: "contains", value: custSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/customer_mng/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setCustSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("거래처 조회 실패"); }
+    finally { setCustSearchLoading(false); }
+  };
+
+  const selectCustomer = async (cust: any) => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        customer_objid: cust.objid || null,
+        customer_name: cust.customer_name || "",
+        customer_ceo: cust.contact_person || "",
+        customer_biz_no: cust.business_number || "",
+        customer_address: cust.address || "",
+        customer_contact: cust.contact_person || "",
+        customer_phone: cust.contact_phone || "",
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success(`${payload.customer_name} 거래처 적용 완료`);
+      setCustSearchOpen(false);
+      setEditComp(null);
+
+      // 목록 + 리포트 갱신
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 기본정보 저장 ──
+
+  const handleBasicInfoSave = async () => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        quote_date: basicForm.quote_date,
+        valid_until: basicForm.valid_until,
+        status: basicForm.status,
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success("기본정보 저장 완료");
+      setBasicInfoOpen(false);
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 사원(담당자) 검색 ──
+
+  const searchUsers = async () => {
+    setUserSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (userSearchKeyword) {
+        filters.push({ columnName: "user_name", operator: "contains", value: userSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/user_info/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setUserSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("사원 조회 실패"); }
+    finally { setUserSearchLoading(false); }
+  };
+
+  const selectUser = async (usr: any) => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        manager: usr.user_name || "",
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success(`담당자: ${payload.manager} 적용`);
+      setUserSearchOpen(false);
+      setEditComp(null);
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 품목 검색 ──
+
+  const searchItemInfo = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/item_info/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setItemSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("품목 조회 실패"); }
+    finally { setItemSearchLoading(false); }
+  };
+
+  const toggleItemSelect = (row: any) => {
+    const key = row.item_number || row.objid || row.id;
+    setItemSelectedMap((prev) => {
+      const next = new Map(prev);
+      if (next.has(key)) next.delete(key); else next.set(key, row);
+      return next;
+    });
+  };
+
+  const addSelectedItemsToQuote = () => {
+    const selected = Array.from(itemSelectedMap.values());
+    if (selected.length === 0) { toast.info("품목을 선택하세요."); return; }
+    const newItems = selected.map((item) => calcItem({
+      item_code: item.item_number || item.item_code || "",
+      item_name: item.item_name || "",
+      spec: item.spec || item.standard || "",
+      qty: "1",
+      unit: item.unit || "EA",
+      request_length: "",
+      unit_price: String(item.selling_price || item.standard_price || 0),
+      supply_amount: "0",
+      vat_amount: "0",
+      total_amount: "0",
+      notes: "",
+    }));
+    setItems((prev) => [...prev, ...newItems]);
+    setItemSearchOpen(false);
+    setItemSelectedMap(new Map());
+    setItemSearchKeyword("");
+    toast.success(`${selected.length}건 품목 추가`);
+  };
+
+  // ── 품목 계산 ──
+
+  const calcItem = (item: typeof EMPTY_ITEM) => {
+    const qty = Number(pn(item.qty)) || 0;
+    const price = Number(pn(item.unit_price)) || 0;
+    const supply = qty * price;
+    const vat = Math.round(supply * 0.1);
+    return { ...item, supply_amount: String(supply), vat_amount: String(vat), total_amount: String(supply + vat) };
+  };
+  const updateItem = (idx: number, field: string, value: string) => {
+    setItems((prev) => {
+      const next = [...prev];
+      next[idx] = { ...next[idx], [field]: value };
+      if (field === "qty" || field === "unit_price") next[idx] = calcItem(next[idx]);
+      return next;
+    });
+  };
+  const addItem = () => setItems((prev) => [...prev, { ...EMPTY_ITEM }]);
+  const removeItem = (idx: number) => setItems((prev) => prev.filter((_, i) => i !== idx));
+  const totalSupply = items.reduce((s, it) => s + (Number(pn(it.supply_amount)) || 0), 0);
+  const totalVat = items.reduce((s, it) => s + (Number(pn(it.vat_amount)) || 0), 0);
+  const totalAmount = totalSupply + totalVat;
+
+  // ── 행 클릭 ──
+
+  const handleRowClick = (row: any) => setSelectedRow(row);
+
+  const contextParams = selectedRow
+    ? { "$1": selectedRow.objid, "$2": user?.companyCode || "COMPANY_7", objid: selectedRow.objid, quote_no: selectedRow.quote_no, customer_name: selectedRow.customer_name, quote_date: selectedRow.quote_date }
+    : undefined;
+
+  // ── 편집 모달 제목/타입 판별 ──
+
+  const getModalTitle = () => {
+    if (!editComp) return "";
+    if (editComp.type === "table") return "견적 품목";
+    if (editComp.type === "card") {
+      const items = (editComp as any).cardItems ?? [];
+      const title = (editComp as any).headerText || (editComp as any).title || "";
+      if (title) return title;
+      if (items.length > 0) return items[0].label ?? "카드 정보";
+      return "카드 정보";
+    }
+    if (editComp.type === "text" || editComp.type === "label") {
+      if (editComp.fieldName) return editComp.fieldName;
+      return "텍스트 편집";
+    }
+    return editComp.type;
+  };
+
+  // ── JSX ──
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      <DynamicSearchFilter tableName={MASTER_TABLE} filterId="quote-mng-filter"
+        onFilterChange={(filters) => setSearchFilters(filters)} dataCount={totalCount} />
+
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg border">
+        {/* 좌측: 견적 목록 */}
+        <ResizablePanel defaultSize={55} minSize={35}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center justify-between border-b bg-white px-3 py-2">
+              <span className="text-sm font-semibold text-gray-700">
+                견적 목록 <span className="text-gray-400">{totalCount}건</span>
+              </span>
+              <div className="flex items-center gap-1.5">
+                <Button variant="outline" size="sm" className="gap-1 text-xs" onClick={() => setExcelOpen(true)}>
+                  <FileSpreadsheet className="h-3.5 w-3.5" /> 업로드
+                </Button>
+                <Button variant="outline" size="sm" className="gap-1 text-xs"
+                  onClick={() => quotes.length > 0 ? exportToExcel(quotes, "견적목록.xlsx", "견적목록") : toast.info("데이터 없음")}>
+                  <Download className="h-3.5 w-3.5" /> 다운로드
+                </Button>
+                <Button size="sm" className="gap-1 text-xs" onClick={handleCreate}>
+                  <Plus className="h-3.5 w-3.5" /> 신규
+                </Button>
+                <Button variant="destructive" size="sm" className="gap-1 text-xs" onClick={handleDelete}>
+                  <Trash2 className="h-3.5 w-3.5" /> 삭제
+                </Button>
+              </div>
+            </div>
+            <div className="flex-1 overflow-hidden">
+              <DataGrid gridId="quote-mng" columns={GRID_COLUMNS} data={quotes} showCheckbox tableName={MASTER_TABLE}
+                checkedIds={checkedIds} onCheckedChange={setCheckedIds}
+                onRowClick={handleRowClick} selectedId={selectedRow?.objid ? String(selectedRow.objid) : null} />
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 리포트 뷰어 — 컴포넌트 클릭 가능 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center gap-2 border-b bg-white px-3 py-2">
+              <FileText className="h-4 w-4 text-gray-500" />
+              <span className="text-sm font-semibold text-gray-700">견적서</span>
+              <Select value={selectedReportId ?? ""} onValueChange={(v) => setSelectedReportId(v || null)}>
+                <SelectTrigger className="ml-auto h-7 w-[180px] text-xs">
+                  <SelectValue placeholder="리포트 양식 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {reportList.map((r) => (
+                    <SelectItem key={r.report_id} value={r.report_id} className="text-xs">
+                      {r.report_name_kor || r.report_name_eng || r.report_id}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex-1 overflow-hidden">
+              {!selectedRow ? (
+                <div className="flex h-full items-center justify-center text-center text-gray-400">
+                  <div>
+                    <FileText className="mx-auto mb-3 h-12 w-12 opacity-30" />
+                    <p className="text-sm font-medium">견적을 선택해주세요</p>
+                    <p className="mt-1 text-xs text-gray-300">&quot;신규&quot; 버튼으로 생성하거나 좌측에서 선택하세요.</p>
+                  </div>
+                </div>
+              ) : !selectedReportId ? (
+                <div className="flex h-full items-center justify-center text-center text-gray-400">
+                  <div>
+                    <FileText className="mx-auto mb-3 h-12 w-12 opacity-30" />
+                    <p className="text-sm font-medium">리포트 양식을 선택해주세요</p>
+                  </div>
+                </div>
+              ) : (
+                <ReportInlineViewer
+                  key={reportKey}
+                  reportId={selectedReportId}
+                  contextParams={contextParams}
+                  onComponentClick={handleComponentClick}
+                />
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ═══ 컴포넌트 클릭 편집 모달 (동적) ═══ */}
+
+      {/* 텍스트/카드 편집 모달 */}
+      <Dialog open={!!editComp && editComp.type !== "table"} onOpenChange={(o) => !o && setEditComp(null)}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{getModalTitle()}</DialogTitle>
+            <DialogDescription>값을 수정한 후 저장 버튼을 누르세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-3">
+            {Object.entries(editValues).map(([key, val]) => (
+              <div key={key}>
+                <Label className="text-xs">{key}</Label>
+                {val.length > 60 ? (
+                  <Textarea className="mt-1" rows={3} value={val}
+                    onChange={(e) => setEditValues((p) => ({ ...p, [key]: e.target.value }))} />
+                ) : (
+                  <Input className="mt-1" value={val}
+                    onChange={(e) => setEditValues((p) => ({ ...p, [key]: e.target.value }))} />
+                )}
+              </div>
+            ))}
+            {Object.keys(editValues).length === 0 && (
+              <p className="text-sm text-gray-400">이 컴포넌트에 편집 가능한 필드가 없습니다.</p>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditComp(null)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving || Object.keys(editValues).length === 0} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블(품목) 편집 모달 */}
+      <Dialog open={!!editComp && editComp.type === "table"} onOpenChange={(o) => { if (!o && itemSearchOpen) return; if (!o) setEditComp(null); }}>
+        <DialogContent className="flex max-h-[80vh] max-w-4xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>견적 품목</DialogTitle>
+            <DialogDescription>품목을 추가/수정합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-auto">
+            <div className="mb-3 flex gap-2">
+              <Button size="sm" className="gap-1 text-xs" onClick={() => { setItemSelectedMap(new Map()); setItemSearchResults([]); setItemSearchKeyword(""); setItemSearchOpen(true); searchItemInfo(); }}>
+                <Plus className="h-3.5 w-3.5" /> 품목 검색/추가
+              </Button>
+              <Button variant="outline" size="sm" className="gap-1 text-xs" onClick={addItem}>
+                <Plus className="h-3.5 w-3.5" /> 빈 행 추가
+              </Button>
+            </div>
+            <div className="overflow-auto rounded border">
+              <table className="w-full text-xs">
+                <thead className="sticky top-0 bg-gray-50">
+                  <tr>
+                    <th className="w-8 px-2 py-2 text-center">#</th>
+                    <th className="px-2 py-2 text-left">품목코드</th>
+                    <th className="px-2 py-2 text-left">품목명</th>
+                    <th className="px-2 py-2 text-left">규격</th>
+                    <th className="w-20 px-2 py-2 text-right">수량</th>
+                    <th className="w-16 px-2 py-2 text-center">단위</th>
+                    <th className="w-24 px-2 py-2 text-right">단가</th>
+                    <th className="w-24 px-2 py-2 text-right">공급가액</th>
+                    <th className="w-20 px-2 py-2 text-right">부가세</th>
+                    <th className="w-24 px-2 py-2 text-right">합계</th>
+                    <th className="w-8" />
+                  </tr>
+                </thead>
+                <tbody>
+                  {items.map((item, idx) => (
+                    <tr key={idx} className="border-t">
+                      <td className="px-2 py-1 text-center text-gray-400">{idx + 1}</td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.item_code} onChange={(e) => updateItem(idx, "item_code", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.item_name} onChange={(e) => updateItem(idx, "item_name", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.spec} onChange={(e) => updateItem(idx, "spec", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-right text-xs" value={fmt(item.qty)} onChange={(e) => updateItem(idx, "qty", pn(e.target.value))} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-center text-xs" value={item.unit} onChange={(e) => updateItem(idx, "unit", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-right text-xs" value={fmt(item.unit_price)} onChange={(e) => updateItem(idx, "unit_price", pn(e.target.value))} /></td>
+                      <td className="px-2 py-1 text-right">{fmt(item.supply_amount)}</td>
+                      <td className="px-2 py-1 text-right">{fmt(item.vat_amount)}</td>
+                      <td className="px-2 py-1 text-right font-medium">{fmt(item.total_amount)}</td>
+                      <td className="px-1 py-1">
+                        <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => removeItem(idx)}>
+                          <Trash2 className="h-3 w-3 text-red-400" />
+                        </Button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className="mt-3 rounded bg-gray-50 p-3 text-sm">
+              <div className="flex justify-between"><span>공급가액</span><span>{fmt(String(totalSupply))}원</span></div>
+              <div className="flex justify-between"><span>부가세</span><span>{fmt(String(totalVat))}원</span></div>
+              <div className="flex justify-between border-t pt-2 font-bold"><span>합계금액</span><span>{fmt(String(totalAmount))}원</span></div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditComp(null)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 기본정보 모달 ═══ */}
+      <Dialog open={basicInfoOpen} onOpenChange={setBasicInfoOpen}>
+        <DialogContent className="max-w-md" onOpenAutoFocus={(e) => e.preventDefault()}>
+          <DialogHeader>
+            <DialogTitle>기본 정보</DialogTitle>
+            <DialogDescription>견적 기본 정보를 수정합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label className="text-xs">견적번호</Label>
+              <Input className="mt-1" value={selectedRow?.quote_no || ""} disabled />
+            </div>
+            <div>
+              <Label className="text-xs">견적일자 *</Label>
+              <div className="mt-1">
+                <FormDatePicker value={basicForm.quote_date} onChange={(v) => setBasicForm((p) => ({ ...p, quote_date: v }))} />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">유효기한 *</Label>
+              <div className="mt-1">
+                <FormDatePicker value={basicForm.valid_until} onChange={(v) => setBasicForm((p) => ({ ...p, valid_until: v }))} />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">상태</Label>
+              <Select value={basicForm.status} onValueChange={(v) => setBasicForm((p) => ({ ...p, status: v }))}>
+                <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {Object.entries(STATUS_MAP).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setBasicInfoOpen(false)}>취소</Button>
+            <Button onClick={handleBasicInfoSave} disabled={saving} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 담당자(사원) 검색 모달 ═══ */}
+      <Dialog open={userSearchOpen} onOpenChange={setUserSearchOpen}>
+        <DialogContent className="flex max-h-[70vh] max-w-lg flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>담당자 선택</DialogTitle>
+            <DialogDescription>담당자를 검색하여 선택하세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="이름 검색" value={userSearchKeyword}
+              onChange={(e) => setUserSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchUsers()} className="text-sm" />
+            <Button onClick={searchUsers} disabled={userSearchLoading} className="shrink-0">
+              {userSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left">이름</th>
+                  <th className="px-3 py-2 text-left">부서</th>
+                  <th className="px-3 py-2 text-left">직위</th>
+                  <th className="w-16 px-2 py-2 text-center">선택</th>
+                </tr>
+              </thead>
+              <tbody>
+                {userSearchResults.length === 0 ? (
+                  <tr><td colSpan={4} className="px-4 py-8 text-center text-gray-400">
+                    {userSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : userSearchResults.map((row, i) => (
+                  <tr key={row.objid || row.user_id || i} className="cursor-pointer border-t hover:bg-blue-50"
+                    onClick={() => selectUser(row)}>
+                    <td className="px-3 py-2 font-medium">{row.user_name || "-"}</td>
+                    <td className="px-3 py-2">{row.department || row.dept_name || "-"}</td>
+                    <td className="px-3 py-2">{row.position || row.rank || "-"}</td>
+                    <td className="px-2 py-2 text-center">
+                      <Button size="sm" variant="outline" className="h-6 text-xs"
+                        onClick={(e) => { e.stopPropagation(); selectUser(row); }}>선택</Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserSearchOpen(false)}>취소</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 거래처 검색 모달 ═══ */}
+      <Dialog open={custSearchOpen} onOpenChange={setCustSearchOpen}>
+        <DialogContent className="flex max-h-[80vh] max-w-2xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>거래처 검색</DialogTitle>
+            <DialogDescription>거래처를 검색하여 선택하세요. 선택하면 자동으로 적용됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="거래처명 검색" value={custSearchKeyword}
+              onChange={(e) => setCustSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchCustomers()} className="text-sm" />
+            <Button onClick={searchCustomers} disabled={custSearchLoading} className="shrink-0 gap-1">
+              {custSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left">거래처명</th>
+                  <th className="px-3 py-2 text-left">대표자</th>
+                  <th className="px-3 py-2 text-left">사업자번호</th>
+                  <th className="px-3 py-2 text-left">연락처</th>
+                  <th className="w-16 px-2 py-2 text-center">선택</th>
+                </tr>
+              </thead>
+              <tbody>
+                {custSearchResults.length === 0 ? (
+                  <tr><td colSpan={5} className="px-4 py-8 text-center text-gray-400">
+                    {custSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : custSearchResults.map((row, i) => (
+                  <tr key={row.objid || i} className="cursor-pointer border-t hover:bg-blue-50"
+                    onClick={() => selectCustomer(row)}>
+                    <td className="px-3 py-2 font-medium">{row.customer_name || "-"}</td>
+                    <td className="px-3 py-2">{row.contact_person || "-"}</td>
+                    <td className="px-3 py-2">{row.business_number || "-"}</td>
+                    <td className="px-3 py-2">{row.contact_phone || "-"}</td>
+                    <td className="px-2 py-2 text-center">
+                      <Button size="sm" variant="outline" className="h-6 text-xs"
+                        onClick={(e) => { e.stopPropagation(); selectCustomer(row); }}>선택</Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCustSearchOpen(false)}>취소</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 품목 검색 모달 ═══ */}
+      <Dialog open={itemSearchOpen} onOpenChange={setItemSearchOpen}>
+        <DialogContent className="flex max-h-[80vh] max-w-3xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>품목 검색</DialogTitle>
+            <DialogDescription>추가할 품목을 검색하여 선택하세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItemInfo()} className="text-sm" />
+            <Button onClick={searchItemInfo} disabled={itemSearchLoading} className="shrink-0 gap-1">
+              {itemSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="w-10 px-2 py-2 text-center">선택</th>
+                  <th className="px-2 py-2 text-left">품목코드</th>
+                  <th className="px-2 py-2 text-left">품명</th>
+                  <th className="px-2 py-2 text-left">규격</th>
+                  <th className="w-16 px-2 py-2 text-center">단위</th>
+                  <th className="w-24 px-2 py-2 text-right">단가</th>
+                </tr>
+              </thead>
+              <tbody>
+                {itemSearchResults.length === 0 ? (
+                  <tr><td colSpan={6} className="px-4 py-8 text-center text-gray-400">
+                    {itemSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : itemSearchResults.map((row, i) => {
+                  const key = row.item_number || row.objid || row.id || i;
+                  const checked = itemSelectedMap.has(key);
+                  return (
+                    <tr key={key} className={`cursor-pointer border-t ${checked ? "bg-blue-50" : "hover:bg-gray-50"}`}
+                      onClick={() => toggleItemSelect(row)}>
+                      <td className="px-2 py-1.5 text-center">
+                        <input type="checkbox" checked={checked} readOnly className="accent-blue-500" />
+                      </td>
+                      <td className="px-2 py-1.5">{row.item_number || row.item_code || "-"}</td>
+                      <td className="px-2 py-1.5">{row.item_name || "-"}</td>
+                      <td className="px-2 py-1.5">{row.spec || row.standard || "-"}</td>
+                      <td className="px-2 py-1.5 text-center">{row.unit || "EA"}</td>
+                      <td className="px-2 py-1.5 text-right">{fmt(String(row.selling_price || row.standard_price || 0))}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter className="flex items-center justify-between">
+            <span className="text-xs text-gray-500">선택: {itemSelectedMap.size}건</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSearchOpen(false)}>취소</Button>
+              <Button onClick={addSelectedItemsToQuote} disabled={itemSelectedMap.size === 0} className="gap-1">
+                <Plus className="h-4 w-4" /> 선택 품목 추가
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ExcelUploadModal open={excelOpen} onOpenChange={setExcelOpen} tableName={MASTER_TABLE} />
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_10/sales/sales-item/page.tsx b/frontend/app/(main)/COMPANY_10/sales/sales-item/page.tsx
index 7847fa55..d02bfef5 100644
--- a/frontend/app/(main)/COMPANY_10/sales/sales-item/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/sales/sales-item/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 /**
- * 판매품목정보 — 하드코딩 페이지
+ * 판매품목정보 — Type B 마스터-디테일 리디자인
  *
  * 좌측: 판매품목 목록 (item_info, 판매 관련 필터)
  * 우측: 선택한 품목의 거래처 정보 (customer_item_mapping → customer_mng 조인)
@@ -12,69 +12,61 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Badge } from "@/components/ui/badge";
-import {
-  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Package, Users, Search, X, Settings2 } from "lucide-react";
+import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Users, Package, Search, X, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const ITEM_TABLE = "item_info";
 const MAPPING_TABLE = "customer_item_mapping";
 const CUSTOMER_TABLE = "customer_mng";
 
-// 좌측: 판매품목 컬럼
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "item_number", label: "품번", width: "w-[110px]" },
-  { key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
-  { key: "size", label: "규격", width: "w-[90px]" },
-  { key: "unit", label: "단위", width: "w-[60px]" },
-  { key: "standard_price", label: "기준단가", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "selling_price", label: "판매가격", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
-  { key: "status", label: "상태", width: "w-[60px]" },
-];
+// 숫자 포맷 헬퍼
+const formatNum = (val: any): string => {
+  if (val === null || val === undefined || val === "") return "";
+  const n = Number(val);
+  return isNaN(n) ? String(val) : n.toLocaleString();
+};
 
-// 우측: 거래처 정보 컬럼
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "customer_code", label: "거래처코드", width: "w-[110px]" },
-  { key: "customer_name", label: "거래처명", minWidth: "min-w-[120px]" },
-  { key: "customer_item_code", label: "거래처품번", width: "w-[100px]" },
-  { key: "customer_item_name", label: "거래처품명", width: "w-[100px]" },
-  { key: "base_price", label: "기준가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "calculated_price", label: "단가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
+const ITEM_GRID_COLUMNS = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "selling_price", label: "판매가격" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
 ];
 
 export default function SalesItemPage() {
   const { user } = useAuth();
-  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-sales-item", ITEM_TABLE, ITEM_GRID_COLUMNS);
 
   // 좌측: 품목
   const [items, setItems] = useState<any[]>([]);
   const [itemLoading, setItemLoading] = useState(false);
   const [itemCount, setItemCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
   const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
 
-  // 테이블 설정
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 우측: 거래처
   const [customerItems, setCustomerItems] = useState<any[]>([]);
@@ -83,6 +75,7 @@ export default function SalesItemPage() {
 
   // 카테고리
   const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string; isDefault?: boolean }[]>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
   // 거래처 추가 모달
   const [custSelectOpen, setCustSelectOpen] = useState(false);
@@ -99,6 +92,7 @@ export default function SalesItemPage() {
   // 엑셀
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
 
+
   // 거래처 상세 입력 모달 (거래처 품번/품명 + 단가)
   const [custDetailOpen, setCustDetailOpen] = useState(false);
   const [selectedCustsForDetail, setSelectedCustsForDetail] = useState<any[]>([]);
@@ -109,19 +103,8 @@ export default function SalesItemPage() {
     discount_value: string; rounding_type: string; rounding_unit_value: string;
     calculated_price: string;
   }>>>({});
-  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
   const [editCustData, setEditCustData] = useState<any>(null);
 
-  // 테이블 설정 적용 (필터)
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
-
-  // 마운트 시 저장된 설정 복원
-  useEffect(() => {
-    const saved = loadTableSettings("sales-item");
-    if (saved) applyTableSettings(saved);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // 카테고리 로드
   useEffect(() => {
@@ -165,11 +148,16 @@ export default function SalesItemPage() {
   const fetchItems = useCallback(async () => {
     setItemLoading(true);
     try {
-      const filters: { columnName: string; operator: string; value: any }[] = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const filters: { columnName: string; operator: string; value: any }[] = [];
 
       // 판매품목/영업관리 division 필터 (다중값 컬럼이므로 contains로 매칭)
       filters.push({ columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" });
 
+      // DynamicSearchFilter에서 전달된 필터 추가
+      for (const f of searchFilters) {
+        filters.push({ columnName: f.columnName, operator: f.operator, value: f.value });
+      }
+
       const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
@@ -192,7 +180,7 @@ export default function SalesItemPage() {
     } finally {
       setItemLoading(false);
     }
-  }, [searchFilters, categoryOptions]);
+  }, [searchFilters, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => { fetchItems(); }, [fetchItems]);
 
@@ -253,8 +241,6 @@ export default function SalesItemPage() {
         };
         const today = new Date().toISOString().split("T")[0];
         const seenCustIds = new Set<string>();
-
-        // customer_id로 정렬하여 같은 거래처끼리 묶기
         const sortedMappings = [...mappings].sort((a: any, b: any) => (a.customer_id || "").localeCompare(b.customer_id || ""));
 
         setCustomerItems(sortedMappings.map((m: any) => {
@@ -262,7 +248,6 @@ export default function SalesItemPage() {
           const isFirstOfGroup = !seenCustIds.has(custKey);
           if (custKey) seenCustIds.add(custKey);
 
-          // 오늘 날짜에 해당하는 단가
           const custPriceList = allPrices.filter((p: any) => p.customer_id === custKey);
           const todayPrice = custPriceList.find((p: any) =>
             (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
@@ -286,7 +271,7 @@ export default function SalesItemPage() {
       }
     };
     fetchCustomerItems();
-  }, [selectedItem?.item_number, priceCategoryOptions]);
+  }, [selectedItem?.item_number, priceCategoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // 거래처 검색
   const searchCustomers = async () => {
@@ -377,14 +362,25 @@ export default function SalesItemPage() {
       [custKey]: (prev[custKey] || []).map((r) => {
         if (r._id !== rowId) return r;
         const updated = { ...r, [field]: value };
-        if (["base_price", "discount_type", "discount_value"].includes(field)) {
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
           const bp = Number(updated.base_price) || 0;
           const dv = Number(updated.discount_value) || 0;
           const dt = updated.discount_type;
           let calc = bp;
           if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
           else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
-          updated.calculated_price = String(Math.round(calc));
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1;
+          if (roundLabel === "반올림") calc = Math.round(calc / unit) * unit;
+          else if (roundLabel === "절삭") calc = Math.floor(calc / unit) * unit;
+          else if (roundLabel === "올림") calc = Math.ceil(calc / unit) * unit;
+          updated.calculated_price = String(Math.floor(calc));
         }
         return updated;
       }),
@@ -406,32 +402,41 @@ export default function SalesItemPage() {
       if (found) custInfo = found;
     } catch { /* skip */ }
 
-    const mappingRows = [{
-      _id: `m_existing_${row.id}`,
-      customer_item_code: row.customer_item_code || "",
-      customer_item_name: row.customer_item_name || "",
-    }].filter((m) => m.customer_item_code || m.customer_item_name);
-
-    const priceRows = [{
-      _id: `p_existing_${row.id}`,
-      start_date: row.start_date || "",
-      end_date: row.end_date || "",
-      currency_code: row.currency_code || "CAT_MLAMDKVN_PZJI",
-      base_price_type: row.base_price_type || "CAT_MLAMFGFT_4RZW",
-      base_price: row.base_price ? String(row.base_price) : "",
-      discount_type: row.discount_type || "",
-      discount_value: row.discount_value ? String(row.discount_value) : "",
-      rounding_type: row.rounding_type || "",
-      rounding_unit_value: row.rounding_unit_value || "",
-      calculated_price: row.calculated_price ? String(row.calculated_price) : "",
-    }].filter((p) => p.base_price || p.start_date);
-
-    if (priceRows.length === 0) {
-      priceRows.push({
-        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
-        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
-        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/customer_item_mapping/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: custKey },
+          { columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
+        ]}, autoFilter: true,
       });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.customer_item_code || m.customer_item_name)
+        .map((m: any) => ({ _id: `m_existing_${m.id}`, customer_item_code: m.customer_item_code || "", customer_item_name: m.customer_item_name || "" }));
+    } catch { /* skip */ }
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: custKey },
+          { columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`, start_date: p.start_date ? String(p.start_date).split("T")[0] : "", end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI", base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "", discount_type: p.discount_type || "", discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "", rounding_unit_value: p.rounding_unit_value || "", calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+    if (priceRows.length === 0) {
+      priceRows.push({ _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "" });
     }
 
     setSelectedCustsForDetail([custInfo]);
@@ -480,6 +485,7 @@ export default function SalesItemPage() {
           );
           for (const price of priceRows) {
             await apiClient.post(`/table-management/tables/customer_item_prices/add`, {
+              id: crypto.randomUUID(),
               mapping_id: editCustData.id,
               customer_id: custKey,
               item_id: selectedItem.item_number,
@@ -494,6 +500,7 @@ export default function SalesItemPage() {
         } else {
           // 신규 등록
           const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
             customer_id: custKey, item_id: selectedItem.item_number,
             customer_item_code: mappingRows[0]?.customer_item_code || "",
             customer_item_name: mappingRows[0]?.customer_item_name || "",
@@ -502,6 +509,7 @@ export default function SalesItemPage() {
 
           for (let mi = 1; mi < mappingRows.length; mi++) {
             await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
               customer_id: custKey, item_id: selectedItem.item_number,
               customer_item_code: mappingRows[mi].customer_item_code || "",
               customer_item_name: mappingRows[mi].customer_item_name || "",
@@ -513,6 +521,7 @@ export default function SalesItemPage() {
           );
           for (const price of priceRows) {
             await apiClient.post(`/table-management/tables/customer_item_prices/add`, {
+              id: crypto.randomUUID(),
               mapping_id: mappingId || "", customer_id: custKey, item_id: selectedItem.item_number,
               start_date: price.start_date || null, end_date: price.end_date || null,
               currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
@@ -599,7 +608,6 @@ export default function SalesItemPage() {
       });
       toast.success(`${customerCheckedIds.length}개 거래처 매핑이 삭제되었습니다.`);
       setCustomerCheckedIds([]);
-      // 우측 새로고침
       const sid = selectedItemId;
       setSelectedItemId(null);
       setTimeout(() => setSelectedItemId(sid), 50);
@@ -619,214 +627,355 @@ export default function SalesItemPage() {
     toast.success("다운로드 완료");
   };
 
+  // EDataTable 컬럼 정의 (판매품목)
+  const itemColumns: EDataTableColumn[] = [
+    { key: "item_number", label: "품번", width: "w-[110px]" },
+    { key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
+    { key: "size", label: "규격", width: "w-[80px]" },
+    { key: "unit", label: "단위", width: "w-[60px]" },
+    { key: "standard_price", label: "기준단가", width: "w-[90px]", align: "right", formatNumber: true },
+    { key: "selling_price", label: "판매가격", width: "w-[90px]", align: "right", formatNumber: true },
+    { key: "currency_code", label: "통화", width: "w-[50px]" },
+    { key: "status", label: "상태", width: "w-[60px]" },
+  ];
+
   return (
-    <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
       <DynamicSearchFilter
         tableName={ITEM_TABLE}
-        filterId="sales-item"
+        filterId="c16-sales-item"
         onFilterChange={setSearchFilters}
-        dataCount={itemCount}
-        externalFilterConfig={filterConfig}
-        extraActions={
-          <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
-              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
-            </Button>
-          </div>
-        }
+        dataCount={items.length}
+        externalFilterConfig={ts.filterConfig}
       />
 
-      {/* 분할 패널 */}
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" />
+            엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
       <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
         <ResizablePanelGroup direction="horizontal">
-          {/* 좌측: 판매품목 */}
+
+          {/* 좌측: 판매품목 목록 */}
           <ResizablePanel defaultSize={55} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Package className="w-4 h-4" /> 판매품목 목록
-                  <Badge variant="secondary" className="font-normal">{itemCount}건</Badge>
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">판매품목 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {itemCount}건
+                  </span>
                 </div>
-                <div className="flex gap-1.5">
+                <div className="flex items-center gap-1.5">
                   <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
                     <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
                   </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid
-                gridId="sales-item-left"
-                columns={LEFT_COLUMNS}
-                data={items}
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={itemColumns}
+                data={ts.groupData(items)}
+                rowKey={(row) => row.id}
                 loading={itemLoading}
+                emptyMessage="등록된 판매품목이 없어요"
                 selectedId={selectedItemId}
-                onSelect={setSelectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
                 onRowDoubleClick={() => openEditItem()}
-                emptyMessage="등록된 판매품목이 없습니다"
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-sales-item"
               />
             </div>
           </ResizablePanel>
 
           <ResizableHandle withHandle />
 
-          {/* 우측: 거래처 정보 */}
+          {/* 우측: 디테일 패널 */}
           <ResizablePanel defaultSize={45} minSize={25}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Users className="w-4 h-4" /> 거래처 정보
-                  {selectedItem && <Badge variant="outline" className="font-normal">{selectedItem.item_name}</Badge>}
-                </div>
-                <div className="flex gap-1.5">
-                  <Button variant="outline" size="sm" disabled={!selectedItemId}
-                    onClick={() => { setCustCheckedIds(new Set()); setCustSelectOpen(true); searchCustomers(); }}>
-                    <Plus className="w-3.5 h-3.5 mr-1" /> 거래처 추가
-                  </Button>
-                  <Button variant="destructive" size="sm" disabled={customerCheckedIds.length === 0}
-                    onClick={handleCustomerMappingDelete}>
-                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
-                  </Button>
-                </div>
-              </div>
               {!selectedItemId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
-                  좌측에서 품목을 선택하세요
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Package className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">품목을 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 품목을 선택하면 상세 정보가 표시돼요</div>
+                  </div>
                 </div>
               ) : (
-                <DataGrid
-                  gridId="sales-item-right"
-                  columns={RIGHT_COLUMNS}
-                  data={customerItems}
-                  loading={customerLoading}
-                  showRowNumber={false}
-                  showCheckbox
-                  checkedIds={customerCheckedIds}
-                  onCheckedChange={setCustomerCheckedIds}
-                  emptyMessage="등록된 거래처가 없습니다"
-                  onRowDoubleClick={(row) => openEditCust(row)}
-                />
+                <>
+                  {/* 거래처별 단가 헤더 */}
+                  <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                    <div className="flex items-center gap-2.5 px-4">
+                      <Users className="w-3.5 h-3.5 text-muted-foreground" />
+                      <span className="text-xs font-semibold">거래처별 단가</span>
+                      {customerItems.length > 0 && (
+                        <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{customerItems.length}</Badge>
+                      )}
+                    </div>
+                    <div className="flex gap-1.5">
+                      <Button
+                        size="sm"
+                        onClick={() => { setCustCheckedIds(new Set()); setCustSelectOpen(true); searchCustomers(); }}
+                      >
+                        <Plus className="w-3.5 h-3.5" /> 거래처 추가
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={customerCheckedIds.length === 0}
+                        onClick={handleCustomerMappingDelete}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" /> 삭제
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 거래처 테이블 */}
+                  <div className="flex-1 min-h-0 overflow-auto pt-px">
+                    {customerLoading ? (
+                      <div className="flex items-center justify-center h-full">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : customerItems.length === 0 ? (
+                      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+                        등록된 거래처가 없어요
+                      </div>
+                    ) : (
+                      <Table noWrapper>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted h-10">
+                            <TableHead className="w-[40px] text-center px-2">
+                              <Checkbox
+                                checked={customerItems.length > 0 && customerCheckedIds.length === customerItems.length}
+                                onCheckedChange={(checked) => {
+                                  if (checked === true) setCustomerCheckedIds(customerItems.map((c) => c.id));
+                                  else setCustomerCheckedIds([]);
+                                }}
+                              />
+                            </TableHead>
+                            <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처코드</TableHead>
+                            <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품번</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품명</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {customerItems.map((row) => (
+                            <TableRow
+                              key={row.id}
+                              className={cn(
+                                "cursor-pointer h-[41px]",
+                                customerCheckedIds.includes(row.id) ? "bg-primary/[0.08]" : "hover:bg-accent"
+                              )}
+                              onClick={() => {
+                                setCustomerCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                              onDoubleClick={() => openEditCust(row)}
+                            >
+                              <TableCell className="text-center px-2">
+                                <Checkbox
+                                  checked={customerCheckedIds.includes(row.id)}
+                                  onCheckedChange={() => {}}
+                                />
+                              </TableCell>
+                              <TableCell className="text-[13px] font-mono text-muted-foreground">{row.customer_code}</TableCell>
+                              <TableCell className="text-sm text-foreground">{row.customer_name}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.customer_item_code}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.customer_item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right font-mono text-muted-foreground">{formatNum(row.base_price)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-mono text-foreground font-semibold">{formatNum(row.calculated_price)}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.currency_code}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </>
               )}
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>
       </div>
 
-      {/* 품목 수정 모달 */}
-      <FullscreenDialog
-        open={editItemOpen}
-        onOpenChange={setEditItemOpen}
-        title="판매품목 수정"
-        description={`${editItemForm.item_number || ""} — ${editItemForm.item_name || ""}`}
-        defaultMaxWidth="max-w-2xl"
-        footer={
-          <>
+      {/* ── 품목 수정 모달 ── */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>판매품목 수정</DialogTitle>
+            <DialogDescription>
+              {editItemForm.item_number || ""} — {editItemForm.item_name || ""}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {/* 품목 기본정보 (읽기 전용) */}
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+
+            <div className="col-span-2 border-t my-1" />
+
+            {/* 판매 설정 (수정 가능) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">판매가격</Label>
+              <Input
+                value={editItemForm.selling_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
+                placeholder="판매가격을 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">기준단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">통화</Label>
+              <Select
+                value={editItemForm.currency_code || ""}
+                onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="통화를 선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
             <Button onClick={handleEditSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
             </Button>
-          </>
-        }
-      >
-        <div className="grid grid-cols-2 gap-4 py-4">
-          {/* 품목 기본정보 (읽기 전용) */}
-          {[
-            { key: "item_number", label: "품목코드" },
-            { key: "item_name", label: "품명" },
-            { key: "size", label: "규격" },
-            { key: "unit", label: "단위" },
-            { key: "material", label: "재질" },
-            { key: "status", label: "상태" },
-          ].map((f) => (
-            <div key={f.key} className="space-y-1.5">
-              <Label className="text-sm text-muted-foreground">{f.label}</Label>
-              <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
-            </div>
-          ))}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
-          <div className="col-span-2 border-t my-2" />
-
-          {/* 판매 설정 (수정 가능) */}
-          <div className="space-y-1.5">
-            <Label className="text-sm">판매가격</Label>
-            <Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
-              placeholder="판매가격" className="h-9" />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-sm">기준단가</Label>
-            <Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
-              placeholder="기준단가" className="h-9" />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-sm">통화</Label>
-            <Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
-              <SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
-              <SelectContent>
-                {(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </FullscreenDialog>
-
-      {/* 거래처 추가 모달 */}
+      {/* ── 거래처 검색 및 추가 모달 ── */}
       <Dialog open={custSelectOpen} onOpenChange={setCustSelectOpen}>
-        <DialogContent className="max-w-2xl max-h-[70vh]">
+        <DialogContent className="max-w-2xl">
           <DialogHeader>
-            <DialogTitle>거래처 선택</DialogTitle>
-            <DialogDescription>품목에 추가할 거래처를 선택하세요.</DialogDescription>
+            <DialogTitle>거래처 검색 및 추가</DialogTitle>
+            <DialogDescription>품목에 추가할 거래처를 선택해주세요.</DialogDescription>
           </DialogHeader>
-          <div className="flex gap-2 mb-3">
-            <Input placeholder="거래처명 검색" value={custSearchKeyword}
-              onChange={(e) => setCustSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && searchCustomers()}
-              className="h-9 flex-1" />
-            <Button size="sm" onClick={searchCustomers} disabled={custSearchLoading} className="h-9">
-              {custSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
-            </Button>
-          </div>
-          <div className="overflow-auto max-h-[350px] border rounded-lg">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">
-                    <input type="checkbox"
-                      checked={custSearchResults.length > 0 && custCheckedIds.size === custSearchResults.length}
-                      onChange={(e) => {
-                        if (e.target.checked) setCustCheckedIds(new Set(custSearchResults.map((c) => c.id)));
-                        else setCustCheckedIds(new Set());
-                      }} />
-                  </TableHead>
-                  <TableHead className="w-[110px]">거래처코드</TableHead>
-                  <TableHead className="min-w-[130px]">거래처명</TableHead>
-                  <TableHead className="w-[80px]">거래유형</TableHead>
-                  <TableHead className="w-[80px]">담당자</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {custSearchResults.length === 0 ? (
-                  <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
-                ) : custSearchResults.map((c) => (
-                  <TableRow key={c.id} className={cn("cursor-pointer", custCheckedIds.has(c.id) && "bg-primary/5")}
-                    onClick={() => setCustCheckedIds((prev) => {
-                      const next = new Set(prev);
-                      if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
-                      return next;
-                    })}>
-                    <TableCell className="text-center"><input type="checkbox" checked={custCheckedIds.has(c.id)} readOnly /></TableCell>
-                    <TableCell className="text-xs">{c.customer_code}</TableCell>
-                    <TableCell className="text-sm">{c.customer_name}</TableCell>
-                    <TableCell className="text-xs">{c.division}</TableCell>
-                    <TableCell className="text-xs">{c.contact_person}</TableCell>
+          <div className="space-y-3 py-2">
+            {/* 검색바 */}
+            <div className="flex gap-2">
+              <Input
+                placeholder="거래처명으로 검색해주세요"
+                value={custSearchKeyword}
+                onChange={(e) => setCustSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchCustomers()}
+                className="h-9 flex-1"
+              />
+              <Button size="sm" onClick={searchCustomers} disabled={custSearchLoading} className="h-9">
+                {custSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
+              </Button>
+            </div>
+            {/* 검색 결과 테이블 */}
+            <div className="overflow-auto max-h-[350px] border rounded-lg">
+              <Table noWrapper>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="sticky top-0 bg-card w-[40px] text-center">
+                      <Checkbox
+                        checked={custSearchResults.length > 0 && custCheckedIds.size === custSearchResults.length}
+                        onCheckedChange={(checked) => {
+                          if (checked === true) setCustCheckedIds(new Set(custSearchResults.map((c) => c.id)));
+                          else setCustCheckedIds(new Set());
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[110px]">거래처코드</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[130px]">거래처명</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">거래유형</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">담당자</TableHead>
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+                </TableHeader>
+                <TableBody>
+                  {custSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : custSearchResults.map((c) => (
+                    <TableRow
+                      key={c.id}
+                      className={cn("cursor-pointer", custCheckedIds.has(c.id) && "bg-primary/[0.08]")}
+                      onClick={() => setCustCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <Checkbox
+                          checked={custCheckedIds.has(c.id)}
+                          onCheckedChange={(checked) => {
+                            setCustCheckedIds((prev) => {
+                              const next = new Set(prev);
+                              if (checked === true) next.add(c.id); else next.delete(c.id);
+                              return next;
+                            });
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell className="text-[13px] font-mono text-muted-foreground">{c.customer_code}</TableCell>
+                      <TableCell className="text-sm font-medium text-foreground">{c.customer_name}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.division}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.contact_person}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
           </div>
           <DialogFooter>
             <div className="flex items-center gap-2 w-full justify-between">
@@ -834,7 +983,8 @@ export default function SalesItemPage() {
               <div className="flex gap-2">
                 <Button variant="outline" onClick={() => setCustSelectOpen(false)}>취소</Button>
                 <Button onClick={goToCustDetail} disabled={custCheckedIds.size === 0}>
-                  <Plus className="w-4 h-4 mr-1" /> {custCheckedIds.size}개 다음
+                  <Plus className="w-4 h-4" />
+                  {custCheckedIds.size}개 다음
                 </Button>
               </div>
             </div>
@@ -842,155 +992,243 @@ export default function SalesItemPage() {
         </DialogContent>
       </Dialog>
 
-      {/* 거래처 상세 입력/수정 모달 */}
-      <FullscreenDialog
-        open={custDetailOpen}
-        onOpenChange={setCustDetailOpen}
-        title={`📋 거래처 상세정보 ${editCustData ? "수정" : "입력"} — ${selectedItem?.item_name || ""}`}
-        description={editCustData ? "거래처 품번/품명과 기간별 단가를 수정합니다." : "선택한 거래처의 품번/품명과 기간별 단가를 설정합니다."}
-        defaultMaxWidth="max-w-[1100px]"
-        footer={
-          <>
-            <Button variant="outline" onClick={() => {
-              setCustDetailOpen(false);
-              if (!editCustData) setCustSelectOpen(true);
-              setEditCustData(null);
-            }}>{editCustData ? "취소" : "← 이전"}</Button>
-            <Button onClick={handleCustDetailSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
-            </Button>
-          </>
-        }
-      >
-        <div className="space-y-6 py-2">
-          {selectedCustsForDetail.map((cust, idx) => {
-            const custKey = cust.customer_code || cust.id;
-            const mappingRows = custMappings[custKey] || [];
-            const prices = custPrices[custKey] || [];
+      {/* ── 거래처 상세 입력/수정 모달 ── */}
+      <Dialog open={custDetailOpen} onOpenChange={setCustDetailOpen}>
+        <DialogContent className="max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              거래처 상세정보 {editCustData ? "수정" : "입력"} — {selectedItem?.item_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editCustData ? "거래처 품번/품명과 기간별 단가를 수정해주세요." : "선택한 거래처의 품번/품명과 기간별 단가를 설정해주세요."}
+            </DialogDescription>
+          </DialogHeader>
 
-            return (
-              <div key={custKey} className="border rounded-xl overflow-hidden bg-card">
-                <div className="px-5 py-3 bg-muted/30 border-b">
-                  <div className="font-bold">{idx + 1}. {cust.customer_name || custKey}</div>
-                  <div className="text-xs text-muted-foreground">{custKey}</div>
-                </div>
+          <div className="space-y-6 py-2">
+            {selectedCustsForDetail.map((cust, idx) => {
+              const custKey = cust.customer_code || cust.id;
+              const mappingRows = custMappings[custKey] || [];
+              const prices = custPrices[custKey] || [];
 
-                <div className="flex gap-4 p-4">
-                  {/* 좌: 거래처 품번/품명 */}
-                  <div className="flex-1 border rounded-lg p-4 bg-blue-50/30 dark:bg-blue-950/10">
-                    <div className="flex items-center justify-between mb-3">
-                      <span className="text-sm font-semibold">거래처 품번/품명 관리</span>
-                      <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
-                        <Plus className="h-3 w-3 mr-1" /> 품번 추가
-                      </Button>
-                    </div>
-                    <div className="space-y-2">
-                      {mappingRows.length === 0 ? (
-                        <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없습니다</div>
-                      ) : mappingRows.map((mRow, mIdx) => (
-                        <div key={mRow._id} className="flex gap-2 items-center">
-                          <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
-                          <Input value={mRow.customer_item_code}
-                            onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_code", e.target.value)}
-                            placeholder="거래처 품번" className="h-8 text-sm flex-1" />
-                          <Input value={mRow.customer_item_name}
-                            onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_name", e.target.value)}
-                            placeholder="거래처 품명" className="h-8 text-sm flex-1" />
-                          <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
-                            onClick={() => removeMappingRow(custKey, mRow._id)}>
-                            <X className="h-3 w-3" />
-                          </Button>
-                        </div>
-                      ))}
-                    </div>
+              return (
+                <div key={custKey} className="border rounded-lg overflow-hidden">
+                  {/* 거래처 헤더 */}
+                  <div className="flex items-center gap-2.5 px-4 py-3 bg-muted border-b">
+                    <span className="text-[13px] font-bold text-foreground">{idx + 1}. {cust.customer_name || custKey}</span>
+                    <span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">
+                      {custKey}
+                    </span>
                   </div>
 
-                  {/* 우: 기간별 단가 */}
-                  <div className="flex-1 border rounded-lg p-4 bg-amber-50/30 dark:bg-amber-950/10">
-                    <div className="flex items-center justify-between mb-3">
-                      <span className="text-sm font-semibold">기간별 단가 설정</span>
-                      <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
-                        <Plus className="h-3 w-3 mr-1" /> 단가 추가
-                      </Button>
+                  <div className="flex gap-4 p-4 bg-card">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/50">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">거래처 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.customer_item_code}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_code", e.target.value)}
+                              placeholder="거래처 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.customer_item_name}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_name", e.target.value)}
+                              placeholder="거래처 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button
+                              variant="ghost" size="sm"
+                              className="h-7 w-7 p-0 text-destructive shrink-0"
+                              onClick={() => removeMappingRow(custKey, mRow._id)}
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
                     </div>
-                    <div className="space-y-3">
-                      {prices.map((price, pIdx) => (
-                        <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
-                          <div className="flex items-center justify-between">
-                            <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
-                            {prices.length > 1 && (
-                              <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
-                                onClick={() => removePriceRow(custKey, price._id)}>
-                                <X className="h-3 w-3" />
-                              </Button>
-                            )}
-                          </div>
-                          <div className="flex gap-2 items-center">
-                            <div className="flex-1">
-                              <FormDatePicker value={price.start_date}
-                                onChange={(v) => updatePriceRow(custKey, price._id, "start_date", v)} placeholder="시작일" />
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/30">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button
+                                  variant="ghost" size="sm"
+                                  className="h-6 w-6 p-0 text-destructive"
+                                  onClick={() => removePriceRow(custKey, price._id)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
                             </div>
-                            <span className="text-xs text-muted-foreground">~</span>
-                            <div className="flex-1">
-                              <FormDatePicker value={price.end_date}
-                                onChange={(v) => updatePriceRow(custKey, price._id, "end_date", v)} placeholder="종료일" />
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="통화" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
                             </div>
-                            <div className="w-[80px]">
-                              <Select value={price.currency_code} onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}>
-                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="통화" /></SelectTrigger>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
                                 <SelectContent>
-                                  {(priceCategoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
                                 </SelectContent>
                               </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "base_price", raw);
+                                }}
+                                className="h-8 text-xs text-right col-span-3"
+                                placeholder="기준가"
+                              />
                             </div>
-                          </div>
-                          <div className="flex gap-2 items-center">
-                            <div className="w-[90px]">
-                              <Select value={price.base_price_type} onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}>
-                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준" /></SelectTrigger>
-                                <SelectContent>
-                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-                                </SelectContent>
-                              </Select>
-                            </div>
-                            <Input value={price.base_price}
-                              onChange={(e) => updatePriceRow(custKey, price._id, "base_price", e.target.value)}
-                              className="h-8 text-xs text-right flex-1" placeholder="기준가" />
-                            <div className="w-[90px]">
-                              <Select value={price.discount_type} onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}
+                              >
                                 <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
                                 <SelectContent>
                                   <SelectItem value="none">할인없음</SelectItem>
-                                  {(priceCategoryOptions["discount_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
                                 </SelectContent>
                               </Select>
-                            </div>
-                            <Input value={price.discount_value}
-                              onChange={(e) => updatePriceRow(custKey, price._id, "discount_value", e.target.value)}
-                              className="h-8 text-xs text-right w-[60px]" placeholder="0" />
-                            <div className="w-[90px]">
-                              <Select value={price.rounding_unit_value} onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-8 text-xs text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}
+                              >
                                 <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
                                 <SelectContent>
-                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
                                 </SelectContent>
                               </Select>
                             </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm text-foreground">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                            </div>
                           </div>
-                          <div className="flex items-center justify-end gap-2 pt-1 border-t">
-                            <span className="text-xs text-muted-foreground">계산 단가:</span>
-                            <span className="font-bold text-sm">{price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}</span>
-                          </div>
-                        </div>
-                      ))}
+                        ))}
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            );
-          })}
-        </div>
-      </FullscreenDialog>
+              );
+            })}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setCustDetailOpen(false);
+                if (!editCustData) setCustSelectOpen(true);
+                setEditCustData(null);
+              }}
+            >
+              {editCustData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleCustDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
 
       {/* 엑셀 업로드 */}
       <ExcelUploadModal
@@ -1002,14 +1240,6 @@ export default function SalesItemPage() {
       />
 
       {ConfirmDialogComponent}
-
-      <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={ITEM_TABLE}
-        settingsId="sales-item"
-        onSave={applyTableSettings}
-      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_10/sales/shipping-order/page.tsx b/frontend/app/(main)/COMPANY_10/sales/shipping-order/page.tsx
index 25e52ead..2ed29b40 100644
--- a/frontend/app/(main)/COMPANY_10/sales/shipping-order/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/sales/shipping-order/page.tsx
@@ -1,20 +1,17 @@
 "use client";
 
-import React, { useState, useMemo, useEffect, useCallback, useRef } from "react";
+import React, { useState, useMemo, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Plus, Trash2, RotateCcw, Save, X, ChevronDown, ChevronRight, ChevronLeft, ChevronsLeft, ChevronsRight, Truck, Search, Loader2, FileSpreadsheet } from "lucide-react";
+import { Plus, Trash2, Save, X, ChevronDown, ChevronRight, ChevronLeft, ChevronsLeft, ChevronsRight, Search, Loader2, FileSpreadsheet, Inbox, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 import {
   getShippingOrderList,
   saveShippingOrder,
@@ -25,7 +22,25 @@ import {
   getItemSource,
 } from "@/lib/api/shipping";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "instruction_no", label: "출하지시번호" },
+  { key: "ship_date", label: "출하일자" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "transport_company", label: "운송업체" },
+  { key: "vehicle_no", label: "차량번호" },
+  { key: "driver_name", label: "기사명" },
+  { key: "status", label: "상태" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "qty", label: "수량" },
+  { key: "source_type", label: "소스" },
+  { key: "remark", label: "비고" },
+];
 
 type DataSourceType = "shipmentPlan" | "salesOrder" | "itemInfo";
 
@@ -40,19 +55,19 @@ const getStatusLabel = (s: string) => STATUS_OPTIONS.find(o => o.value === s)?.l
 
 const getStatusColor = (s: string) => {
   switch (s) {
-    case "READY": return "bg-amber-100 text-amber-800 border-amber-200";
-    case "IN_PROGRESS": return "bg-blue-100 text-blue-800 border-blue-200";
-    case "COMPLETED": return "bg-emerald-100 text-emerald-800 border-emerald-200";
-    default: return "bg-gray-100 text-gray-800 border-gray-200";
+    case "READY": return "bg-warning/10 text-warning";
+    case "IN_PROGRESS": return "bg-primary/10 text-primary";
+    case "COMPLETED": return "bg-success/10 text-success";
+    default: return "bg-muted text-muted-foreground";
   }
 };
 
 const getSourceBadge = (s: string) => {
   switch (s) {
-    case "shipmentPlan": return { label: "출하계획", cls: "bg-blue-100 text-blue-700" };
-    case "salesOrder": return { label: "수주", cls: "bg-emerald-100 text-emerald-700" };
-    case "itemInfo": return { label: "품목", cls: "bg-purple-100 text-purple-700" };
-    default: return { label: s, cls: "bg-gray-100 text-gray-700" };
+    case "shipmentPlan": return { label: "출하계획", cls: "bg-primary/10 text-primary" };
+    case "salesOrder": return { label: "수주", cls: "bg-success/10 text-success" };
+    case "itemInfo": return { label: "품목", cls: "bg-secondary text-secondary-foreground" };
+    default: return { label: s, cls: "bg-muted text-muted-foreground" };
   }
 };
 
@@ -73,19 +88,14 @@ interface SelectedItem {
 }
 
 export default function ShippingOrderPage() {
+  const ts = useTableSettings("c16-shipping-order", "shipment_instruction", GRID_COLUMNS);
   const [orders, setOrders] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [checkedIds, setCheckedIds] = useState<number[]>([]);
   const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
 
-  // 검색
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [searchCustomer, setSearchCustomer] = useState("");
-  const [debouncedKeyword, setDebouncedKeyword] = useState("");
-  const [debouncedCustomer, setDebouncedCustomer] = useState("");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 엑셀 업로드
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
@@ -121,36 +131,25 @@ export default function ShippingOrderPage() {
   const [sourcePageSize, setSourcePageSize] = useState(20);
   const [sourceTotalCount, setSourceTotalCount] = useState(0);
 
-  // 텍스트 입력 debounce (500ms)
-  useEffect(() => {
-    const t = setTimeout(() => setDebouncedKeyword(searchKeyword), 500);
-    return () => clearTimeout(t);
-  }, [searchKeyword]);
-
-  useEffect(() => {
-    const t = setTimeout(() => setDebouncedCustomer(searchCustomer), 500);
-    return () => clearTimeout(t);
-  }, [searchCustomer]);
-
-  // 초기 날짜
-  useEffect(() => {
-    const today = new Date();
-    const from = new Date(today);
-    from.setMonth(from.getMonth() - 1);
-    setSearchDateFrom(from.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-  }, []);
 
   // 데이터 조회
   const fetchOrders = useCallback(async () => {
     setLoading(true);
     try {
       const params: any = {};
-      if (searchDateFrom) params.dateFrom = searchDateFrom;
-      if (searchDateTo) params.dateTo = searchDateTo;
-      if (searchStatus !== "all") params.status = searchStatus;
-      if (debouncedCustomer.trim()) params.customer = debouncedCustomer.trim();
-      if (debouncedKeyword.trim()) params.keyword = debouncedKeyword.trim();
+      for (const f of searchFilters) {
+        if (f.columnName === "ship_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split(",");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status") {
+          params.status = f.value;
+        } else if (f.columnName === "customer_name") {
+          params.customer = f.value;
+        } else {
+          params.keyword = f.value;
+        }
+      }
 
       const result = await getShippingOrderList(params);
       if (result.success) setOrders(result.data || []);
@@ -159,10 +158,10 @@ export default function ShippingOrderPage() {
     } finally {
       setLoading(false);
     }
-  }, [searchDateFrom, searchDateTo, searchStatus, debouncedCustomer, debouncedKeyword]);
+  }, [searchFilters]);
 
   useEffect(() => {
-    if (searchDateFrom && searchDateTo) fetchOrders();
+    fetchOrders();
   }, [fetchOrders]);
 
   // 소스 데이터 조회
@@ -203,24 +202,6 @@ export default function ShippingOrderPage() {
     }
   }, [isModalOpen, dataSource]);
 
-  // 핸들러
-  const handleResetSearch = () => {
-    setSearchKeyword("");
-    setSearchCustomer("");
-    setDebouncedKeyword("");
-    setDebouncedCustomer("");
-    setSearchStatus("all");
-    const today = new Date();
-    const from = new Date(today);
-    from.setMonth(from.getMonth() - 1);
-    setSearchDateFrom(from.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-  };
-
-  const handleCheckAll = (checked: boolean) => {
-    setCheckedIds(checked ? orders.map((o: any) => o.id) : []);
-  };
-
   const handleDeleteSelected = async () => {
     if (checkedIds.length === 0) return;
     if (!confirm(`선택한 ${checkedIds.length}개의 출하지시를 삭제하시겠습니까?`)) return;
@@ -229,7 +210,7 @@ export default function ShippingOrderPage() {
       if (result.success) {
         setCheckedIds([]);
         fetchOrders();
-        alert("삭제되었습니다.");
+        alert("삭제되었어요.");
       }
     } catch (err: any) {
       alert(err.message || "삭제 실패");
@@ -257,7 +238,6 @@ export default function ShippingOrderPage() {
       const items = order.items || [];
       setSelectedItems(items.filter((it: any) => it.id).map((it: any) => {
         const srcType = it.source_type || "shipmentPlan";
-        // 소스 데이터와 매칭할 수 있도록 원래 소스 id를 사용
         let sourceId: string | number = it.id;
         if (srcType === "shipmentPlan" && it.shipment_plan_id) sourceId = it.shipment_plan_id;
         else if (srcType === "salesOrder" && it.detail_id) sourceId = it.detail_id;
@@ -314,12 +294,10 @@ export default function ShippingOrderPage() {
       : item.item_code;
 
     const exists = selectedItems.findIndex(s => {
-      // 같은 소스 타입에서 id 매칭
       if (s.sourceType === dataSource) {
         if (dataSource === "itemInfo") return s.itemCode === key;
         return String(s.id) === String(key);
       }
-      // 다른 소스 타입이라도 원래 소스 id로 매칭
       if (dataSource === "shipmentPlan" && s.shipmentPlanId) return String(s.shipmentPlanId) === String(item.id);
       if (dataSource === "salesOrder" && s.detailId) return String(s.detailId) === String(item.id);
       return false;
@@ -385,7 +363,7 @@ export default function ShippingOrderPage() {
           spec: item.spec,
           material: item.material,
           orderQty: item.orderQty,
-          planQty: item.planQty,
+          planQty: item.orderQty,
           shipQty: 0,
           sourceType: item.sourceType,
           shipmentPlanId: item.shipmentPlanId,
@@ -398,7 +376,7 @@ export default function ShippingOrderPage() {
       if (result.success) {
         setIsModalOpen(false);
         fetchOrders();
-        alert(isEditMode ? "출하지시가 수정되었습니다." : "출하지시가 등록되었습니다.");
+        alert(isEditMode ? "출하지시가 수정되었어요." : "출하지시가 등록되었어요.");
       } else {
         alert(result.message || "저장 실패");
       }
@@ -411,6 +389,70 @@ export default function ShippingOrderPage() {
 
   const formatDate = (d: string) => d ? d.split("T")[0] : "-";
 
+  // 출하지시 데이터를 플랫한 행 목록으로 변환 (EDataTable용)
+  const flattenedOrders = useMemo(() => {
+    const rows: any[] = [];
+    for (const order of orders) {
+      const items = Array.isArray(order.items) ? order.items.filter((it: any) => it.id) : [];
+      if (items.length === 0) {
+        rows.push({
+          _rowId: String(order.id),
+          _orderId: order.id,
+          _order: order,
+          instruction_no: order.instruction_no,
+          ship_date: formatDate(order.instruction_date),
+          customer_name: order.customer_name || "-",
+          transport_company: order.carrier_name || "-",
+          vehicle_no: order.vehicle_no || "-",
+          driver_name: order.driver_name || "-",
+          status: order.status,
+          item_code: "-",
+          item_name: "-",
+          qty: 0,
+          source_type: "-",
+          remark: order.memo || "-",
+        });
+      } else {
+        items.forEach((item: any, idx: number) => {
+          rows.push({
+            _rowId: `${order.id}-${item.id}`,
+            _orderId: order.id,
+            _order: order,
+            instruction_no: idx === 0 ? order.instruction_no : "",
+            ship_date: idx === 0 ? formatDate(order.instruction_date) : "",
+            customer_name: idx === 0 ? (order.customer_name || "-") : "",
+            transport_company: idx === 0 ? (order.carrier_name || "-") : "",
+            vehicle_no: idx === 0 ? (order.vehicle_no || "-") : "",
+            driver_name: idx === 0 ? (order.driver_name || "-") : "",
+            status: idx === 0 ? order.status : "",
+            item_code: item.item_code || "",
+            item_name: item.item_name || "",
+            qty: Number(item.order_qty || 0),
+            source_type: item.source_type || "",
+            remark: idx === 0 ? (order.memo || "-") : "",
+          });
+        });
+      }
+    }
+    return rows;
+  }, [orders]);
+
+  // checkedIds를 order.id 기준으로 관리하므로 _orderId로 매핑
+  const flatCheckedRowIds = useMemo(() => {
+    return flattenedOrders
+      .filter((r) => checkedIds.includes(r._orderId))
+      .map((r) => r._rowId);
+  }, [flattenedOrders, checkedIds]);
+
+  const handleFlatCheckedChange = useCallback((rowIds: string[]) => {
+    const orderIds = new Set<number>();
+    for (const rowId of rowIds) {
+      const row = flattenedOrders.find((r) => r._rowId === rowId);
+      if (row) orderIds.add(row._orderId);
+    }
+    setCheckedIds(Array.from(orderIds));
+  }, [flattenedOrders]);
+
   const dataSourceTitle: Record<DataSourceType, string> = {
     shipmentPlan: "출하계획 목록",
     salesOrder: "수주정보 목록",
@@ -418,272 +460,213 @@ export default function ShippingOrderPage() {
   };
 
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4">
-      {/* 검색 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">출하지시번호</Label>
-            <Input placeholder="검색" className="w-[160px] h-9" value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSearch()} />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">거래처</Label>
-            <Input placeholder="거래처 검색" className="w-[140px] h-9" value={searchCustomer}
-              onChange={(e) => setSearchCustomer(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSearch()} />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[110px] h-9"><SelectValue placeholder="전체" /></SelectTrigger>
-              <SelectContent>
-                {STATUS_OPTIONS.map(o => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">출하일자</Label>
-            <div className="flex items-center gap-2">
-              <div className="w-[160px]">
-                <FormDatePicker value={searchDateFrom} onChange={setSearchDateFrom} placeholder="시작일" />
-              </div>
-              <span className="text-muted-foreground">~</span>
-              <div className="w-[160px]">
-                <FormDatePicker value={searchDateTo} onChange={setSearchDateTo} placeholder="종료일" />
-              </div>
-            </div>
-          </div>
-          <div className="flex-1" />
-          <div className="flex items-center gap-2">
-            {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+    <div className="flex flex-col h-full p-4 gap-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>영업관리</span>
+        <span className="text-muted-foreground/40">/</span>
+        <span className="font-semibold text-foreground">출하지시</span>
+      </nav>
 
-      {/* 메인 테이블 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm flex flex-col">
-        <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-          <div className="font-semibold flex items-center gap-2 text-sm">
-            <Truck className="w-5 h-5" /> 출하지시 관리
-            <Badge variant="secondary" className="font-normal">{orders.length}건</Badge>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
-            </Button>
-            <Button size="sm" onClick={() => openModal()}>
-              <Plus className="w-4 h-4 mr-1.5" /> 출하지시 등록
-            </Button>
-            <Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDeleteSelected}>
-              <Trash2 className="w-4 h-4 mr-1.5" /> 선택삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
-            </Button>
-          </div>
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ts.tableName}
+        filterId="c16-shipping-order"
+        onFilterChange={setSearchFilters}
+        dataCount={orders.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between flex-wrap gap-3 shrink-0">
+        <div className="flex items-center gap-2">
+          <h2 className="text-[15px] font-bold text-foreground">출하지시 관리</h2>
+          <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+            {orders.length}건
+          </span>
+          {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
         </div>
-
-        <div className="flex-1 overflow-auto">
-          {loading ? (
-            <div className="flex items-center justify-center h-32">
-              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-            </div>
-          ) : (
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">
-                    <Checkbox checked={orders.length > 0 && checkedIds.length === orders.length} onCheckedChange={handleCheckAll} />
-                  </TableHead>
-                  <TableHead className="w-[140px]">출하지시번호</TableHead>
-                  <TableHead className="w-[100px] text-center">출하일자</TableHead>
-                  <TableHead className="w-[120px]">거래처명</TableHead>
-                  <TableHead className="w-[100px]">운송업체</TableHead>
-                  <TableHead className="w-[90px]">차량번호</TableHead>
-                  <TableHead className="w-[80px]">기사명</TableHead>
-                  <TableHead className="w-[80px] text-center">상태</TableHead>
-                  <TableHead className="w-[100px]">품번</TableHead>
-                  <TableHead className="w-[130px]">품명</TableHead>
-                  <TableHead className="w-[70px] text-right">수량</TableHead>
-                  <TableHead className="w-[80px] text-center">소스</TableHead>
-                  <TableHead>비고</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {orders.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={13} className="h-40 text-center text-muted-foreground">
-                      <div className="flex flex-col items-center gap-2">
-                        <Truck className="w-12 h-12 text-muted-foreground/30" />
-                        <div className="font-medium">등록된 출하지시가 없습니다</div>
-                        <div className="text-sm">출하지시 등록 버튼으로 등록하세요</div>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ) : (
-                  orders.map((order: any) => {
-                    const items = Array.isArray(order.items) ? order.items.filter((it: any) => it.id) : [];
-                    if (items.length === 0) {
-                      return (
-                        <TableRow key={order.id} className={cn("cursor-pointer hover:bg-muted/50", selectedOrderId === order.id && "bg-primary/5")} onClick={() => setSelectedOrderId(order.id)} onDoubleClick={() => openModal(order)}>
-                          <TableCell className="text-center" onClick={e => e.stopPropagation()}>
-                            <Checkbox checked={checkedIds.includes(order.id)} onCheckedChange={(c) => {
-                              if (c) setCheckedIds(p => [...p, order.id]);
-                              else setCheckedIds(p => p.filter(i => i !== order.id));
-                            }} />
-                          </TableCell>
-                          <TableCell className="font-medium">{order.instruction_no}</TableCell>
-                          <TableCell className="text-center">{formatDate(order.instruction_date)}</TableCell>
-                          <TableCell>{order.customer_name || "-"}</TableCell>
-                          <TableCell>{order.carrier_name || "-"}</TableCell>
-                          <TableCell>{order.vehicle_no || "-"}</TableCell>
-                          <TableCell>{order.driver_name || "-"}</TableCell>
-                          <TableCell className="text-center">
-                            <span className={cn("px-2 py-1 rounded-full text-[11px] font-medium border", getStatusColor(order.status))}>{getStatusLabel(order.status)}</span>
-                          </TableCell>
-                          <TableCell>-</TableCell>
-                          <TableCell>-</TableCell>
-                          <TableCell className="text-right">0</TableCell>
-                          <TableCell className="text-center">-</TableCell>
-                          <TableCell className="text-xs text-muted-foreground truncate max-w-[100px]">{order.memo || "-"}</TableCell>
-                        </TableRow>
-                      );
-                    }
-                    return items.map((item: any, itemIdx: number) => (
-                      <TableRow key={`${order.id}-${item.id}`} className={cn("cursor-pointer hover:bg-muted/50", selectedOrderId === order.id && "bg-primary/5")} onClick={() => setSelectedOrderId(order.id)} onDoubleClick={() => openModal(order)}>
-                        <TableCell className="text-center" onClick={e => e.stopPropagation()}>
-                          {itemIdx === 0 && <Checkbox checked={checkedIds.includes(order.id)} onCheckedChange={(c) => {
-                            if (c) setCheckedIds(p => [...p, order.id]);
-                            else setCheckedIds(p => p.filter(i => i !== order.id));
-                          }} />}
-                        </TableCell>
-                        <TableCell className="font-medium">{itemIdx === 0 ? order.instruction_no : ""}</TableCell>
-                        <TableCell className="text-center">{itemIdx === 0 ? formatDate(order.instruction_date) : ""}</TableCell>
-                        <TableCell>{itemIdx === 0 ? (order.customer_name || "-") : ""}</TableCell>
-                        <TableCell>{itemIdx === 0 ? (order.carrier_name || "-") : ""}</TableCell>
-                        <TableCell>{itemIdx === 0 ? (order.vehicle_no || "-") : ""}</TableCell>
-                        <TableCell>{itemIdx === 0 ? (order.driver_name || "-") : ""}</TableCell>
-                        <TableCell className="text-center">
-                          {itemIdx === 0 && <span className={cn("px-2 py-1 rounded-full text-[11px] font-medium border", getStatusColor(order.status))}>{getStatusLabel(order.status)}</span>}
-                        </TableCell>
-                        <TableCell className="text-xs text-muted-foreground">{item.item_code}</TableCell>
-                        <TableCell className="font-medium text-sm">{item.item_name}</TableCell>
-                        <TableCell className="text-right">{Number(item.order_qty || 0).toLocaleString()}</TableCell>
-                        <TableCell className="text-center">
-                          {(() => { const b = getSourceBadge(item.source_type || ""); return <span className={cn("px-2 py-0.5 rounded-full text-[10px]", b.cls)}>{b.label}</span>; })()}
-                        </TableCell>
-                        <TableCell className="text-xs text-muted-foreground truncate max-w-[100px]">{itemIdx === 0 ? (order.memo || "-") : ""}</TableCell>
-                      </TableRow>
-                    ));
-                  })
-                )}
-              </TableBody>
-            </Table>
-          )}
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5" />
+            엑셀 업로드
+          </Button>
+          <Button size="sm" onClick={() => openModal()}>
+            <Plus className="w-3.5 h-3.5" />
+            출하지시 등록
+          </Button>
+          <div className="w-px h-5 bg-border" />
+          <Button
+            variant="outline"
+            size="sm"
+            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+            disabled={checkedIds.length === 0}
+            onClick={handleDeleteSelected}
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+            선택삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
+          </Button>
+          <div className="w-px h-5 bg-border" />
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
         </div>
       </div>
 
+      {/* 메인 테이블 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card flex flex-col">
+        <EDataTable
+          columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+            key: col.key,
+            label: col.label,
+            align: col.key === "qty" ? "right" : col.key === "status" || col.key === "source_type" || col.key === "ship_date" ? "center" : undefined,
+            formatNumber: col.key === "qty",
+            sortable: false,
+            filterable: false,
+            render: col.key === "status"
+              ? (val: any) => val ? (
+                  <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(val))}>
+                    {getStatusLabel(val)}
+                  </span>
+                ) : null
+              : col.key === "source_type"
+              ? (val: any) => {
+                  if (!val || val === "-") return <span>-</span>;
+                  const b = getSourceBadge(val);
+                  return <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", b.cls)}>{b.label}</span>;
+                }
+              : undefined,
+          }))}
+          data={ts.groupData(flattenedOrders)}
+          rowKey={(row) => row._rowId}
+          loading={loading}
+          emptyMessage="등록된 출하지시가 없어요"
+          showCheckbox
+          checkedIds={flatCheckedRowIds}
+          onCheckedChange={handleFlatCheckedChange}
+          selectedId={selectedOrderId != null ? String(selectedOrderId) : null}
+          onRowClick={(row) => setSelectedOrderId(row._orderId)}
+          onRowDoubleClick={(row) => openModal(row._order)}
+          showPagination
+          draggableColumns={false}
+          columnOrderKey="c16-shipping-order"
+        />
+      </div>
+
       {/* 등록/수정 모달 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title={isEditMode ? "출하지시 수정" : "출하지시 등록"}
-        description={isEditMode ? "출하지시 정보를 수정합니다." : "왼쪽에서 데이터를 선택하고 오른쪽에서 출하지시 정보를 입력하세요."}
-        defaultMaxWidth="max-w-[90vw]"
-        defaultWidth="w-[1400px]"
-        className="h-[90vh]"
-        contentClassName="overflow-hidden flex flex-col"
-        footer={
-          <>
-            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
-            <Button onClick={handleSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
-            </Button>
-          </>
-        }
-      >
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[90vw] w-[1400px] h-[90vh] flex flex-col overflow-hidden p-0 gap-0">
+          <DialogHeader className="px-4 py-3 border-b shrink-0">
+            <DialogTitle className="text-[15px] font-bold">
+              {isEditMode ? "출하지시 수정" : "출하지시 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-xs text-muted-foreground mt-0.5">
+              {isEditMode ? "출하지시 정보를 수정해요." : "왼쪽에서 데이터를 선택하고 오른쪽에서 출하지시 정보를 입력해요."}
+            </DialogDescription>
+          </DialogHeader>
 
           <div className="flex-1 overflow-hidden">
             <ResizablePanelGroup direction="horizontal">
               {/* 왼쪽: 데이터 소스 */}
               <ResizablePanel defaultSize={55} minSize={30}>
                 <div className="flex flex-col h-full">
-                  <div className="p-3 border-b bg-muted/30 flex flex-wrap items-center gap-2 shrink-0">
+                  {/* 소스 검색 헤더 */}
+                  <div className="px-4 py-2 border-b bg-muted/50 flex flex-wrap items-center gap-2 shrink-0">
                     <Select value={dataSource} onValueChange={(v) => setDataSource(v as DataSourceType)}>
-                      <SelectTrigger className="w-[130px] h-8 text-xs"><SelectValue /></SelectTrigger>
+                      <SelectTrigger className="w-[120px] h-9 text-xs"><SelectValue /></SelectTrigger>
                       <SelectContent>
                         <SelectItem value="shipmentPlan">출하계획</SelectItem>
                         <SelectItem value="salesOrder">수주정보</SelectItem>
                         <SelectItem value="itemInfo">품목정보</SelectItem>
                       </SelectContent>
                     </Select>
-                    <Input placeholder="품번, 품명 검색" className="flex-1 h-8 text-xs min-w-[120px]"
-                      value={sourceKeyword} onChange={(e) => setSourceKeyword(e.target.value)}
-                      onKeyDown={(e) => { if (e.key === "Enter") { setSourcePage(1); fetchSourceData(1); }}} />
-                    <Button size="sm" className="h-8 text-xs" onClick={() => { setSourcePage(1); fetchSourceData(1); }} disabled={sourceLoading}>
+                    <Input
+                      placeholder="품번, 품명 검색"
+                      className="flex-1 h-9 text-xs min-w-[120px]"
+                      value={sourceKeyword}
+                      onChange={(e) => setSourceKeyword(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") { setSourcePage(1); fetchSourceData(1); }
+                      }}
+                    />
+                    <Button
+                      size="sm"
+                      className="h-8 text-xs"
+                      onClick={() => { setSourcePage(1); fetchSourceData(1); }}
+                      disabled={sourceLoading}
+                    >
                       {sourceLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Search className="w-3 h-3" />}
                       <span className="ml-1">조회</span>
                     </Button>
                   </div>
 
-                  <div className="px-4 py-2 flex items-center justify-between border-b shrink-0">
-                    <div className="text-sm font-medium">
-                      {dataSourceTitle[dataSource]}
-                      <span className="text-muted-foreground ml-2 font-normal">
-                        선택: <span className="text-primary font-semibold">{selectedItems.length}</span>개
-                      </span>
-                    </div>
+                  {/* 소스 서브 헤더 */}
+                  <div className="px-3 py-1.5 flex items-center gap-2 border-b bg-muted/30 shrink-0">
+                    <span className="text-[13px] font-bold text-foreground">{dataSourceTitle[dataSource]}</span>
+                    <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                      선택 {selectedItems.length}개
+                    </span>
                   </div>
 
+                  {/* 소스 테이블 */}
                   <div className="flex-1 overflow-auto">
                     {sourceLoading ? (
-                      <div className="flex items-center justify-center py-12"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
+                      <div className="flex items-center justify-center py-12">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
                     ) : sourceData.length === 0 ? (
-                      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-                        <div className="text-sm">조회 버튼을 눌러 데이터를 불러오세요</div>
+                      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                        <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
+                          <Search className="w-5 h-5 text-muted-foreground/30" />
+                        </div>
+                        <p className="text-sm">조회 버튼을 눌러 데이터를 불러와주세요</p>
                       </div>
                     ) : (
                       <Table>
-                        <TableHeader className="sticky top-0 bg-background z-10">
-                          <TableRow>
-                            <TableHead className="w-[40px] text-center">선택</TableHead>
-                            <TableHead className="w-[100px]">품번</TableHead>
-                            <TableHead>품명</TableHead>
-                            <TableHead className="w-[100px]">규격</TableHead>
-                            <TableHead className="w-[100px]">거래처</TableHead>
-                            <TableHead className="w-[70px] text-right">수량</TableHead>
-                            {dataSource === "shipmentPlan" && <TableHead className="w-[70px] text-center">상태</TableHead>}
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">선택</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                            <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처</TableHead>
+                            <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                            {dataSource === "shipmentPlan" && <TableHead className="w-[70px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
                           </TableRow>
                         </TableHeader>
                         <TableBody>
                           {sourceData.map((item: any, idx: number) => {
                             const itemId = dataSource === "itemInfo" ? item.item_code : item.id;
                             const isSelected = selectedItems.some(s => {
-                              // 같은 소스 타입에서 id 매칭
                               if (s.sourceType === dataSource) {
                                 if (dataSource === "itemInfo") return s.itemCode === itemId;
                                 return String(s.id) === String(itemId);
                               }
-                              // 다른 소스 타입이라도 같은 품번이면 중복 방지
                               if (dataSource === "shipmentPlan" && s.shipmentPlanId) return String(s.shipmentPlanId) === String(item.id);
                               if (dataSource === "salesOrder" && s.detailId) return String(s.detailId) === String(item.id);
                               return false;
                             });
                             return (
-                              <TableRow key={`${dataSource}-${itemId}-${idx}`} className={cn("cursor-pointer hover:bg-muted/50", isSelected && "bg-primary/5")} onClick={() => toggleSourceItem(item)}>
+                              <TableRow
+                                key={`${dataSource}-${itemId}-${idx}`}
+                                className={cn("cursor-pointer transition-colors", isSelected && "bg-primary/5")}
+                                onClick={() => toggleSourceItem(item)}
+                              >
                                 <TableCell className="text-center" onClick={e => e.stopPropagation()}>
                                   <Checkbox checked={isSelected} onCheckedChange={() => toggleSourceItem(item)} />
                                 </TableCell>
-                                <TableCell className="text-xs">{item.item_code || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{item.item_code || "-"}</TableCell>
                                 <TableCell className="text-sm font-medium">{item.item_name || "-"}</TableCell>
-                                <TableCell className="text-xs text-muted-foreground">{item.spec || "-"}</TableCell>
-                                <TableCell className="text-xs">{item.customer_name || "-"}</TableCell>
-                                <TableCell className="text-right text-xs">{Number(item.plan_qty || item.qty || item.balance_qty || 0).toLocaleString()}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{item.spec || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{item.customer_name || "-"}</TableCell>
+                                <TableCell className="text-right text-[13px]">
+                                  {Number(item.plan_qty || item.qty || item.balance_qty || 0).toLocaleString()}
+                                </TableCell>
                                 {dataSource === "shipmentPlan" && (
                                   <TableCell className="text-center">
-                                    <Badge variant="secondary" className="text-[10px]">{getStatusLabel(item.status)}</Badge>
+                                    <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", getStatusColor(item.status))}>
+                                      {getStatusLabel(item.status)}
+                                    </span>
                                   </TableCell>
                                 )}
                               </TableRow>
@@ -696,7 +679,7 @@ export default function ShippingOrderPage() {
 
                   {/* 페이징 */}
                   {sourceTotalCount > 0 && (
-                    <div className="px-4 py-2 border-t bg-muted/10 flex items-center justify-between shrink-0">
+                    <div className="px-3 py-1.5 border-t bg-muted/30 flex items-center justify-between shrink-0">
                       <div className="flex items-center gap-2">
                         <span className="text-muted-foreground text-[11px]">표시:</span>
                         <Input
@@ -710,9 +693,7 @@ export default function ShippingOrderPage() {
                           }}
                           className="h-7 w-[60px] text-center text-[11px]"
                         />
-                        <span className="text-muted-foreground text-[11px]">
-                          총 {sourceTotalCount}건
-                        </span>
+                        <span className="text-muted-foreground text-[11px]">총 {sourceTotalCount}건</span>
                       </div>
                       <div className="flex items-center gap-1">
                         <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
@@ -723,12 +704,16 @@ export default function ShippingOrderPage() {
                           onClick={() => { const p = sourcePage - 1; setSourcePage(p); fetchSourceData(p); }}>
                           <ChevronLeft className="w-3.5 h-3.5" />
                         </Button>
-                        <span className="text-xs font-medium px-2">{sourcePage} / {Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize))}</span>
-                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                        <span className="text-xs font-medium px-2">
+                          {sourcePage} / {Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize))}
+                        </span>
+                        <Button variant="outline" size="icon" className="h-7 w-7"
+                          disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
                           onClick={() => { const p = sourcePage + 1; setSourcePage(p); fetchSourceData(p); }}>
                           <ChevronRight className="w-3.5 h-3.5" />
                         </Button>
-                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                        <Button variant="outline" size="icon" className="h-7 w-7"
+                          disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
                           onClick={() => { const p = Math.ceil(sourceTotalCount / sourcePageSize); setSourcePage(p); fetchSourceData(p); }}>
                           <ChevronsRight className="w-3.5 h-3.5" />
                         </Button>
@@ -742,25 +727,32 @@ export default function ShippingOrderPage() {
 
               {/* 오른쪽: 폼 */}
               <ResizablePanel defaultSize={45} minSize={30}>
-                <div className="flex flex-col h-full overflow-auto p-5 bg-muted/20 gap-5">
+                <div className="flex flex-col h-full overflow-auto p-4 gap-4">
                   {/* 기본 정보 */}
-                  <div className="bg-background border rounded-lg p-5 shrink-0">
-                    <h3 className="text-sm font-semibold mb-4">기본 정보</h3>
-                    <div className="grid grid-cols-2 gap-4">
-                      <div className="space-y-1.5">
-                        <Label className="text-xs">출하지시번호</Label>
+                  <div className="border rounded-lg p-4 shrink-0">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-3">기본 정보</p>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">출하지시번호</Label>
                         <Input value={formOrderNumber} readOnly className="h-9 bg-muted/50 text-muted-foreground" />
                       </div>
-                      <div className="space-y-1.5">
-                        <Label className="text-xs">출하지시일 <span className="text-destructive">*</span></Label>
-                        <FormDatePicker value={formOrderDate} onChange={setFormOrderDate} placeholder="날짜 선택" />
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">
+                          출하지시일 <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                          type="date"
+                          className="h-9"
+                          value={formOrderDate}
+                          onChange={(e) => setFormOrderDate(e.target.value)}
+                        />
                       </div>
-                      <div className="space-y-1.5">
-                        <Label className="text-xs">거래처</Label>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">거래처</Label>
                         <Input value={formCustomer} readOnly placeholder="품목 선택 시 자동" className="h-9 bg-muted/50" />
                       </div>
-                      <div className="space-y-1.5">
-                        <Label className="text-xs">상태</Label>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
                         <Select value={formStatus} onValueChange={setFormStatus}>
                           <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
                           <SelectContent>
@@ -774,45 +766,80 @@ export default function ShippingOrderPage() {
                   </div>
 
                   {/* 운송 정보 */}
-                  <div className="bg-amber-50 border border-amber-200 rounded-lg overflow-hidden shrink-0">
-                    <button className="w-full px-5 py-3 flex items-center justify-between text-left" onClick={() => setIsTransportCollapsed(!isTransportCollapsed)}>
-                      <h3 className="text-sm font-semibold text-amber-900 flex items-center gap-2">
-                        <Truck className="w-4 h-4" /> 운송 정보 <span className="text-[11px] font-normal text-muted-foreground">(선택사항)</span>
-                      </h3>
-                      {isTransportCollapsed ? <ChevronRight className="w-4 h-4 text-amber-700" /> : <ChevronDown className="w-4 h-4 text-amber-700" />}
+                  <div className="bg-muted/50 border rounded-lg overflow-hidden shrink-0">
+                    <button
+                      className="w-full px-4 py-2.5 flex items-center justify-between text-left"
+                      onClick={() => setIsTransportCollapsed(!isTransportCollapsed)}
+                    >
+                      <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2">
+                        운송 정보 <span className="text-[10px] font-normal">(선택사항)</span>
+                      </p>
+                      {isTransportCollapsed
+                        ? <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />
+                        : <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+                      }
                     </button>
                     {!isTransportCollapsed && (
-                      <div className="px-5 pb-4 grid grid-cols-3 gap-3">
-                        <div className="space-y-1.5"><Label className="text-xs">운송업체</Label><Input value={formCarrier} onChange={(e) => setFormCarrier(e.target.value)} className="h-9" /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">차량번호</Label><Input value={formVehicle} onChange={(e) => setFormVehicle(e.target.value)} className="h-9" /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">기사명</Label><Input value={formDriver} onChange={(e) => setFormDriver(e.target.value)} className="h-9" /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">연락처</Label><Input value={formDriverPhone} onChange={(e) => setFormDriverPhone(e.target.value)} className="h-9" /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">도착예정일시</Label><FormDatePicker value={formArrival} onChange={setFormArrival} placeholder="도착예정일시" includeTime /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">배송지</Label><Input value={formAddress} onChange={(e) => setFormAddress(e.target.value)} className="h-9" /></div>
+                      <div className="px-4 pb-3 grid grid-cols-3 gap-3">
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">운송업체</Label>
+                          <Input value={formCarrier} onChange={(e) => setFormCarrier(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">차량번호</Label>
+                          <Input value={formVehicle} onChange={(e) => setFormVehicle(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">기사명</Label>
+                          <Input value={formDriver} onChange={(e) => setFormDriver(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">연락처</Label>
+                          <Input value={formDriverPhone} onChange={(e) => setFormDriverPhone(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">도착예정일시</Label>
+                          <Input
+                            type="datetime-local"
+                            className="h-9"
+                            value={formArrival}
+                            onChange={(e) => setFormArrival(e.target.value)}
+                          />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">배송지</Label>
+                          <Input value={formAddress} onChange={(e) => setFormAddress(e.target.value)} className="h-9" />
+                        </div>
                       </div>
                     )}
                   </div>
 
                   {/* 선택된 품목 */}
-                  <div className="bg-background border rounded-lg p-5 flex-1 flex flex-col min-h-[200px]">
-                    <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
-                      선택된 품목 <Badge variant="default" className="text-[10px]">{selectedItems.length}</Badge>
-                    </h3>
+                  <div className="border rounded-lg p-4 flex-1 flex flex-col min-h-[200px]">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-2 flex items-center gap-2">
+                      선택된 품목
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {selectedItems.length}
+                      </span>
+                    </p>
                     <div className="flex-1 overflow-auto min-h-0">
                       {selectedItems.length === 0 ? (
-                        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
-                          <div className="text-sm">왼쪽에서 데이터를 선택하세요</div>
+                        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground border-2 border-dashed rounded-lg gap-2">
+                          <div className="w-10 h-10 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
+                            <Inbox className="w-4 h-4 text-muted-foreground/30" />
+                          </div>
+                          <p className="text-sm">왼쪽에서 데이터를 선택해주세요</p>
                         </div>
                       ) : (
                         <Table>
-                          <TableHeader className="sticky top-0 bg-background z-10">
-                            <TableRow>
-                              <TableHead className="w-[40px] text-center">소스</TableHead>
-                              <TableHead className="w-[90px]">품번</TableHead>
-                              <TableHead>품명</TableHead>
-                              <TableHead className="w-[90px] text-center">출하수량</TableHead>
-                              <TableHead className="w-[70px] text-right">계획수량</TableHead>
-                              <TableHead className="w-[40px] text-center">삭제</TableHead>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">소스</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                              <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[90px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하수량</TableHead>
+                              <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획수량</TableHead>
+                              <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">삭제</TableHead>
                             </TableRow>
                           </TableHeader>
                           <TableBody>
@@ -821,15 +848,24 @@ export default function ShippingOrderPage() {
                               return (
                                 <TableRow key={`${item.sourceType}-${item.id}-${idx}`}>
                                   <TableCell className="text-center">
-                                    <span className={cn("px-1.5 py-0.5 rounded text-[10px]", b.cls)}>{b.label.charAt(0)}</span>
+                                    <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", b.cls)}>
+                                      {b.label.charAt(0)}
+                                    </span>
                                   </TableCell>
-                                  <TableCell className="text-xs">{item.itemCode}</TableCell>
+                                  <TableCell className="text-[13px]">{item.itemCode}</TableCell>
                                   <TableCell className="text-sm font-medium">{item.itemName}</TableCell>
                                   <TableCell className="text-center">
-                                    <Input type="number" value={item.orderQty} onChange={(e) => updateOrderQty(idx, parseInt(e.target.value) || 0)}
-                                      min={1} className="h-7 w-[70px] text-xs text-right mx-auto" />
+                                    <Input
+                                      type="number"
+                                      value={item.orderQty}
+                                      onChange={(e) => updateOrderQty(idx, parseInt(e.target.value) || 0)}
+                                      min={1}
+                                      className="h-7 w-[70px] text-xs text-right mx-auto"
+                                    />
+                                  </TableCell>
+                                  <TableCell className="text-right text-[13px]">
+                                    {item.planQty ? item.planQty.toLocaleString() : "-"}
                                   </TableCell>
-                                  <TableCell className="text-right text-xs">{item.planQty ? item.planQty.toLocaleString() : "-"}</TableCell>
                                   <TableCell className="text-center">
                                     <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => removeSelectedItem(idx)}>
                                       <X className="w-3.5 h-3.5 text-destructive" />
@@ -845,25 +881,47 @@ export default function ShippingOrderPage() {
                   </div>
 
                   {/* 메모 */}
-                  <div className="bg-background border rounded-lg p-5 shrink-0">
-                    <h3 className="text-sm font-semibold mb-3">메모</h3>
-                    <Textarea value={formMemo} onChange={(e) => setFormMemo(e.target.value)} placeholder="출하지시 관련 메모" rows={2} className="resize-y" />
+                  <div className="border rounded-lg p-4 shrink-0">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-2">메모</p>
+                    <Textarea
+                      value={formMemo}
+                      onChange={(e) => setFormMemo(e.target.value)}
+                      placeholder="출하지시 관련 메모를 입력해주세요"
+                      rows={2}
+                      className="resize-y"
+                    />
                   </div>
                 </div>
               </ResizablePanel>
             </ResizablePanelGroup>
           </div>
 
-      </FullscreenDialog>
+          {/* 모달 하단 버튼 */}
+          <div className="flex items-center justify-end gap-2 px-4 py-3 border-t shrink-0">
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
 
       {/* 엑셀 업로드 모달 */}
       <ExcelUploadModal
         open={excelUploadOpen}
         onOpenChange={setExcelUploadOpen}
-        tableName="shipment_instruction"
-        onSuccess={() => {
-          fetchOrders();
-        }}
+        tableName="shipping-order"
+        onSuccess={() => { fetchOrders(); }}
+      />
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
     </div>
   );
diff --git a/frontend/app/(main)/COMPANY_10/sales/shipping-plan/page.tsx b/frontend/app/(main)/COMPANY_10/sales/shipping-plan/page.tsx
index e77e7066..747ac23d 100644
--- a/frontend/app/(main)/COMPANY_10/sales/shipping-plan/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/sales/shipping-plan/page.tsx
@@ -3,21 +3,34 @@
 import React, { useState, useMemo, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Search, Download, X, Save, Ban, RotateCcw, Loader2 } from "lucide-react";
+import { X, Save, Loader2, Inbox, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
   getShipmentPlanList,
   updateShipmentPlan,
   type ShipmentPlanListItem,
 } from "@/lib/api/shipping";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "order_no", label: "수주번호" },
+  { key: "due_date", label: "납기일" },
+  { key: "customer_name", label: "거래처" },
+  { key: "part_code", label: "품목코드" },
+  { key: "part_name", label: "품목명" },
+  { key: "order_qty", label: "수주수량" },
+  { key: "plan_qty", label: "계획수량" },
+  { key: "plan_date", label: "계획일" },
+  { key: "status", label: "상태" },
+];
 
 const STATUS_OPTIONS = [
   { value: "all", label: "전체" },
@@ -36,28 +49,25 @@ const getStatusLabel = (status: string) => {
 
 const getStatusColor = (status: string) => {
   switch (status) {
-    case "READY": return "bg-blue-100 text-blue-800 border-blue-200";
-    case "CONFIRMED": return "bg-indigo-100 text-indigo-800 border-indigo-200";
-    case "SHIPPING": return "bg-amber-100 text-amber-800 border-amber-200";
-    case "COMPLETED": return "bg-emerald-100 text-emerald-800 border-emerald-200";
-    case "CANCEL_REQUEST": return "bg-rose-100 text-rose-800 border-rose-200";
-    case "CANCELLED": return "bg-slate-100 text-slate-800 border-slate-200";
-    default: return "bg-gray-100 text-gray-800 border-gray-200";
+    case "READY": return "bg-primary/10 text-primary";
+    case "CONFIRMED": return "bg-secondary text-secondary-foreground";
+    case "SHIPPING": return "bg-warning/10 text-warning";
+    case "COMPLETED": return "bg-success/10 text-success";
+    case "CANCEL_REQUEST": return "bg-destructive/10 text-destructive";
+    case "CANCELLED": return "bg-muted text-muted-foreground";
+    default: return "bg-muted text-muted-foreground";
   }
 };
 
 export default function ShippingPlanPage() {
+  const ts = useTableSettings("c16-shipping-plan", "shipment_plan", GRID_COLUMNS);
   const [data, setData] = useState<ShipmentPlanListItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [selectedId, setSelectedId] = useState<number | null>(null);
   const [checkedIds, setCheckedIds] = useState<number[]>([]);
 
-  // 검색
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchCustomer, setSearchCustomer] = useState("");
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 상세 패널 편집
   const [editPlanQty, setEditPlanQty] = useState("");
@@ -66,28 +76,25 @@ export default function ShippingPlanPage() {
   const [isDetailChanged, setIsDetailChanged] = useState(false);
   const [saving, setSaving] = useState(false);
 
-  // 날짜 초기화
-  useEffect(() => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    const oneMonthLater = new Date(today);
-    oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
-
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(oneMonthLater.toISOString().split("T")[0]);
-  }, []);
 
   // 데이터 조회
   const fetchData = useCallback(async () => {
     setLoading(true);
     try {
       const params: any = {};
-      if (searchDateFrom) params.dateFrom = searchDateFrom;
-      if (searchDateTo) params.dateTo = searchDateTo;
-      if (searchStatus !== "all") params.status = searchStatus;
-      if (searchCustomer.trim()) params.customer = searchCustomer.trim();
-      if (searchKeyword.trim()) params.keyword = searchKeyword.trim();
+      for (const f of searchFilters) {
+        if (f.columnName === "plan_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split(",");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status") {
+          params.status = f.value;
+        } else if (f.columnName === "customer_name") {
+          params.customer = f.value;
+        } else {
+          params.keyword = f.value;
+        }
+      }
 
       const result = await getShipmentPlanList(params);
       if (result.success) {
@@ -98,37 +105,21 @@ export default function ShippingPlanPage() {
     } finally {
       setLoading(false);
     }
-  }, [searchDateFrom, searchDateTo, searchStatus, searchCustomer, searchKeyword]);
+  }, [searchFilters]);
 
-  // 초기 로드 + 검색 시 자동 조회
+  // searchFilters 변경 시 자동 조회
   useEffect(() => {
-    if (searchDateFrom && searchDateTo) {
-      fetchData();
-    }
-  }, [searchDateFrom, searchDateTo]);
-
-  const handleSearch = () => fetchData();
-
-  const handleResetSearch = () => {
-    setSearchStatus("all");
-    setSearchCustomer("");
-    setSearchKeyword("");
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    const oneMonthLater = new Date(today);
-    oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(oneMonthLater.toISOString().split("T")[0]);
-  };
+    fetchData();
+  }, [fetchData]);
 
   const selectedPlan = useMemo(() => data.find(p => p.id === selectedId), [data, selectedId]);
 
   const groupedData = useMemo(() => {
-    const orderMap = new Map<string, ShipmentPlanListItem[]>();
+    const grouped = ts.groupData(data);
+    const orderMap = new Map<string, any[]>();
     const orderKeys: string[] = [];
-    data.forEach(plan => {
-      const key = plan.order_no || `_no_order_${plan.id}`;
+    grouped.forEach(plan => {
+      const key = (plan as any)._isGroupSummary ? `_summary_${orderKeys.length}` : (plan.order_no || `_no_order_${plan.id}`);
       if (!orderMap.has(key)) {
         orderMap.set(key, []);
         orderKeys.push(key);
@@ -139,7 +130,7 @@ export default function ShippingPlanPage() {
       orderNo: key,
       plans: orderMap.get(key)!,
     }));
-  }, [data]);
+  }, [data, ts.groupData]);
 
   const handleRowClick = (plan: ShipmentPlanListItem) => {
     if (isDetailChanged && selectedId !== plan.id) {
@@ -160,20 +151,12 @@ export default function ShippingPlanPage() {
     }
   };
 
-  const handleCheck = (id: number, checked: boolean) => {
-    if (checked) {
-      setCheckedIds(prev => [...prev, id]);
-    } else {
-      setCheckedIds(prev => prev.filter(i => i !== id));
-    }
-  };
-
   const handleSaveDetail = async () => {
     if (!selectedId || !selectedPlan) return;
 
     const qty = Number(editPlanQty);
     if (qty <= 0) {
-      alert("계획수량은 0보다 커야 합니다.");
+      alert("계획수량은 0보다 커야 해요.");
       return;
     }
     if (!editPlanDate) {
@@ -190,7 +173,7 @@ export default function ShippingPlanPage() {
       });
       if (result.success) {
         setIsDetailChanged(false);
-        alert("저장되었습니다.");
+        alert("저장되었어요.");
         fetchData();
       } else {
         alert(result.message || "저장 실패");
@@ -213,345 +196,259 @@ export default function ShippingPlanPage() {
   };
 
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4">
-      {/* 검색 영역 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">출하계획일</Label>
-            <div className="flex items-center gap-2">
-              <Input
-                type="date"
-                className="w-[140px] h-9"
-                value={searchDateFrom}
-                onChange={(e) => setSearchDateFrom(e.target.value)}
-              />
-              <span className="text-muted-foreground">~</span>
-              <Input
-                type="date"
-                className="w-[140px] h-9"
-                value={searchDateTo}
-                onChange={(e) => setSearchDateTo(e.target.value)}
-              />
-            </div>
-          </div>
+    <div className="flex flex-col h-full p-4 gap-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>영업관리</span>
+        <span className="text-muted-foreground/40">/</span>
+        <span className="font-semibold text-foreground">출하계획</span>
+      </nav>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[120px] h-9">
-                <SelectValue placeholder="전체" />
-              </SelectTrigger>
-              <SelectContent>
-                {STATUS_OPTIONS.map(o => (
-                  <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName="shipment_plan"
+        filterId="c16-shipping-plan"
+        onFilterChange={setSearchFilters}
+        dataCount={data.length}
+        externalFilterConfig={ts.filterConfig}
+      />
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">거래처</Label>
-            <Input
-              placeholder="거래처 검색"
-              className="w-[150px] h-9"
-              value={searchCustomer}
-              onChange={(e) => setSearchCustomer(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-            />
-          </div>
-
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">수주번호/품목</Label>
-            <Input
-              placeholder="수주번호 / 품목 검색"
-              className="w-[220px] h-9"
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-            />
-          </div>
-
-          <div className="flex-1" />
-
-          <div className="flex items-center gap-2">
-            <Button size="sm" className="h-9" onClick={handleSearch} disabled={loading}>
-              {loading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Search className="w-4 h-4 mr-2" />}
-              조회
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* 테이블 + 상세 패널 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+      {/* 마스터-디테일 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
         <ResizablePanelGroup direction="horizontal">
-          <ResizablePanel defaultSize={selectedId ? 65 : 100} minSize={30}>
+          {/* 좌측: 출하계획 목록 */}
+          <ResizablePanel defaultSize={60} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  출하계획 목록
-                  <Badge variant="secondary" className="font-normal">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-bold text-foreground">출하계획 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
                     {data.length}건
-                  </Badge>
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
                 </div>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
               </div>
 
+              {/* 테이블 */}
               <div className="flex-1 overflow-auto">
-                {loading ? (
-                  <div className="flex items-center justify-center h-32">
-                    <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-                  </div>
-                ) : (
-                  <Table>
-                    <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                      <TableRow>
-                        <TableHead className="w-[40px] text-center">
-                          <Checkbox
-                            checked={data.length > 0 && checkedIds.length === data.filter(p => p.status !== "CANCELLED").length}
-                            onCheckedChange={handleCheckAll}
-                          />
-                        </TableHead>
-                        <TableHead className="w-[10%]">수주번호</TableHead>
-                        <TableHead className="w-[8%] text-center">납기일</TableHead>
-                        <TableHead className="w-[12%]">거래처</TableHead>
-                        <TableHead className="w-[20%]">품목코드</TableHead>
-                        <TableHead className="w-[20%]">품목명</TableHead>
-                        <TableHead className="w-[7%] text-right">수주수량</TableHead>
-                        <TableHead className="w-[7%] text-right">계획수량</TableHead>
-                        <TableHead className="w-[8%] text-center">출하계획일</TableHead>
-                        <TableHead className="w-[6%] text-center">상태</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {groupedData.length === 0 ? (
-                        <TableRow>
-                          <TableCell colSpan={10} className="h-32 text-center text-muted-foreground">
-                            출하계획이 없습니다.
-                          </TableCell>
-                        </TableRow>
-                      ) : (
-                        groupedData.map((group) =>
-                          group.plans.map((plan, planIdx) => (
-                            <TableRow
-                              key={plan.id}
-                              className={cn(
-                                "cursor-pointer hover:bg-muted/50 transition-colors",
-                                selectedId === plan.id && "bg-primary/5",
-                                plan.status === "CANCELLED" && "opacity-60 bg-slate-50",
-                                planIdx === 0 && "border-t-2 border-t-border"
-                              )}
-                              onClick={() => handleRowClick(plan)}
-                            >
-                              <TableCell className="text-center" onClick={e => e.stopPropagation()}>
-                                {planIdx === 0 && (
-                                  <Checkbox
-                                    checked={group.plans.every(p => checkedIds.includes(p.id))}
-                                    onCheckedChange={(c) => {
-                                      if (c) {
-                                        setCheckedIds(prev => [...new Set([...prev, ...group.plans.filter(p => p.status !== "CANCELLED").map(p => p.id)])]);
-                                      } else {
-                                        setCheckedIds(prev => prev.filter(id => !group.plans.some(p => p.id === id)));
-                                      }
-                                    }}
-                                  />
-                                )}
-                              </TableCell>
-                              <TableCell className="font-medium">
-                                {planIdx === 0 ? (plan.order_no || "-") : ""}
-                              </TableCell>
-                              <TableCell className="text-center">
-                                {planIdx === 0 ? formatDate(plan.due_date) : ""}
-                              </TableCell>
-                              <TableCell>
-                                {planIdx === 0 ? (plan.customer_name || "-") : ""}
-                              </TableCell>
-                              <TableCell className="text-muted-foreground text-xs">{plan.part_code || "-"}</TableCell>
-                              <TableCell className="font-medium">{plan.part_name || "-"}</TableCell>
-                              <TableCell className="text-right">{formatNumber(plan.order_qty)}</TableCell>
-                              <TableCell className="text-right font-semibold text-primary">{formatNumber(plan.plan_qty)}</TableCell>
-                              <TableCell className="text-center">{formatDate(plan.plan_date)}</TableCell>
-                              <TableCell className="text-center">
-                                <span className={cn("px-2 py-1 rounded-full text-[11px] font-medium border", getStatusColor(plan.status))}>
-                                  {getStatusLabel(plan.status)}
-                                </span>
-                              </TableCell>
-                            </TableRow>
-                          ))
-                        )
-                      )}
-                    </TableBody>
-                  </Table>
-                )}
+                <EDataTable
+                  columns={[
+                    { key: "order_no", label: "수주번호", render: (val: any) => <span className="font-medium text-sm">{val || "-"}</span> },
+                    { key: "due_date", label: "납기일", align: "center" as const, render: (val: any) => <span className="text-sm">{formatDate(val)}</span> },
+                    { key: "customer_name", label: "거래처", render: (val: any) => <span className="text-sm">{val || "-"}</span> },
+                    { key: "part_code", label: "품목코드", render: (val: any) => <span className="text-muted-foreground text-[13px]">{val || "-"}</span> },
+                    { key: "part_name", label: "품목명", render: (val: any) => <span className="font-medium text-sm">{val || "-"}</span> },
+                    { key: "order_qty", label: "수주수량", align: "right" as const, formatNumber: true },
+                    { key: "plan_qty", label: "계획수량", align: "right" as const, render: (val: any) => <span className="font-semibold text-primary text-sm">{formatNumber(val)}</span> },
+                    { key: "plan_date", label: "계획일", align: "center" as const, render: (val: any) => <span className="text-sm">{formatDate(val)}</span> },
+                    { key: "status", label: "상태", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(val))}>{getStatusLabel(val)}</span> },
+                  ] as EDataTableColumn<ShipmentPlanListItem>[]}
+                  data={data}
+                  rowKey={(row) => String(row.id)}
+                  loading={loading}
+                  emptyMessage="출하계획이 없어요"
+                  selectedId={selectedId !== null ? String(selectedId) : null}
+                  onSelect={(id) => {
+                    if (id) {
+                      const plan = data.find(p => String(p.id) === id);
+                      if (plan) handleRowClick(plan);
+                    }
+                  }}
+                  onRowClick={(row) => handleRowClick(row)}
+                  showCheckbox
+                  checkedIds={checkedIds.map(String)}
+                  onCheckedChange={(ids) => setCheckedIds(ids.map(Number))}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
               </div>
             </div>
           </ResizablePanel>
 
-          {/* 상세 패널 */}
-          {selectedId && selectedPlan && (
-            <>
-              <ResizableHandle withHandle />
-              <ResizablePanel defaultSize={35} minSize={25}>
-                <div className="flex flex-col h-full bg-card">
-                  <div className="flex items-center justify-between p-3 border-b shrink-0">
-                    <span className="font-semibold text-sm">
-                      {selectedPlan.shipment_plan_no || `#${selectedPlan.id}`}
-                    </span>
-                    <div className="flex items-center gap-2">
-                      <Button
-                        size="sm"
-                        onClick={handleSaveDetail}
-                        disabled={!isDetailChanged || saving}
-                        className={cn(isDetailChanged ? "bg-primary" : "bg-muted text-muted-foreground")}
-                      >
-                        {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
-                        저장
-                      </Button>
-                      <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setSelectedId(null)}>
-                        <X className="w-4 h-4" />
-                      </Button>
+          <ResizableHandle withHandle />
+
+          {/* 우측: 상세 패널 */}
+          <ResizablePanel defaultSize={40} minSize={20}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-bold text-foreground">출하계획 상세</span>
+                  {selectedPlan && (
+                    <span className="text-[11px] font-mono text-muted-foreground">{selectedPlan.shipment_plan_no}</span>
+                  )}
+                </div>
+                {selectedPlan && (
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      size="sm"
+                      onClick={handleSaveDetail}
+                      disabled={!isDetailChanged || saving}
+                      variant={isDetailChanged ? "default" : "secondary"}
+                    >
+                      {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
+                      저장
+                    </Button>
+                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setSelectedId(null)}>
+                      <X className="w-3.5 h-3.5" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {/* 상세 컨텐츠 */}
+              {selectedPlan ? (
+                <div className="flex-1 overflow-auto p-4 space-y-4">
+                  {/* 기본 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">상태</p>
+                      <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium inline-block", getStatusColor(selectedPlan.status))}>
+                        {getStatusLabel(selectedPlan.status)}
+                      </span>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주번호</p>
+                      <p className="text-sm font-mono text-muted-foreground">{selectedPlan.order_no || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">거래처</p>
+                      <p className="text-sm font-medium text-foreground">{selectedPlan.customer_name || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">납기일</p>
+                      <p className="text-sm text-foreground">{formatDate(selectedPlan.due_date)}</p>
                     </div>
                   </div>
 
-                  <div className="flex-1 overflow-auto p-4 space-y-6">
-                    {/* 기본 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">기본 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">상태</span>
-                          <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getStatusColor(selectedPlan.status))}>
-                            {getStatusLabel(selectedPlan.status)}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">수주번호</span>
-                          <span>{selectedPlan.order_no || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">거래처</span>
-                          <span>{selectedPlan.customer_name || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">등록일</span>
-                          <span>{formatDate(selectedPlan.created_date)}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">납기일</span>
-                          <span>{formatDate(selectedPlan.due_date)}</span>
-                        </div>
-                      </div>
-                    </section>
+                  <div className="border-t" />
 
-                    {/* 품목 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">품목 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm bg-muted/30 p-3 rounded-md border border-border/50">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">품목코드</span>
-                          <span>{selectedPlan.part_code || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">품목명</span>
-                          <span className="font-medium">{selectedPlan.part_name || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">규격</span>
-                          <span>{selectedPlan.spec || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">재질</span>
-                          <span>{selectedPlan.material || "-"}</span>
-                        </div>
+                  {/* 품목 정보 */}
+                  <div>
+                    <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-2">품목 정보</p>
+                    <div className="grid grid-cols-2 gap-3 bg-muted/30 border rounded-md p-3">
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">품목코드</p>
+                        <p className="text-sm font-mono text-muted-foreground">{selectedPlan.part_code || "-"}</p>
                       </div>
-                    </section>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">품목명</p>
+                        <p className="text-sm font-medium text-foreground">{selectedPlan.part_name || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">규격</p>
+                        <p className="text-sm text-foreground">{selectedPlan.spec || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">재질</p>
+                        <p className="text-sm text-foreground">{selectedPlan.material || "-"}</p>
+                      </div>
+                    </div>
+                  </div>
 
-                    {/* 수량 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">수량 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-4 text-sm">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">수주수량</span>
-                          <span>{formatNumber(selectedPlan.order_qty)}</span>
-                        </div>
-                        <div>
-                          <Label className="text-muted-foreground text-xs block mb-1">계획수량</Label>
-                          <Input
-                            type="number"
-                            className="h-8"
-                            value={editPlanQty}
-                            onChange={(e) => { setEditPlanQty(e.target.value); setIsDetailChanged(true); }}
-                            disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
-                          />
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">출하수량</span>
-                          <span>{formatNumber(selectedPlan.shipped_qty)}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">잔여수량</span>
-                          <span className={cn("font-semibold",
-                            (Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty)) > 0
-                              ? "text-destructive"
-                              : "text-emerald-600"
-                          )}>
-                            {formatNumber(Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty))}
-                          </span>
-                        </div>
-                      </div>
-                    </section>
+                  <div className="border-t" />
 
-                    {/* 출하 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">출하 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-4 text-sm">
-                        <div className="col-span-2">
-                          <Label className="text-muted-foreground text-xs block mb-1">출하계획일</Label>
-                          <Input
-                            type="date"
-                            className="h-8"
-                            value={editPlanDate}
-                            onChange={(e) => { setEditPlanDate(e.target.value); setIsDetailChanged(true); }}
-                            disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
-                          />
-                        </div>
-                        <div className="col-span-2">
-                          <Label className="text-muted-foreground text-xs block mb-1">비고</Label>
-                          <Textarea
-                            className="min-h-[80px] resize-y"
-                            value={editMemo}
-                            onChange={(e) => { setEditMemo(e.target.value); setIsDetailChanged(true); }}
-                            disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
-                            placeholder="비고 입력"
-                          />
-                        </div>
-                      </div>
-                    </section>
+                  {/* 수량 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주수량</p>
+                      <p className="text-sm text-foreground">{formatNumber(selectedPlan.order_qty)}</p>
+                    </div>
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">계획수량</Label>
+                      <Input
+                        type="number"
+                        className="h-9"
+                        value={editPlanQty}
+                        onChange={(e) => { setEditPlanQty(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                      />
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">출하수량</p>
+                      <p className="text-sm text-foreground">{formatNumber(selectedPlan.shipped_qty)}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">잔여수량</p>
+                      <p className={cn(
+                        "font-semibold text-sm",
+                        (Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty)) > 0
+                          ? "text-destructive"
+                          : "text-success"
+                      )}>
+                        {formatNumber(Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty))}
+                      </p>
+                    </div>
+                  </div>
 
-                    {/* 등록자 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">등록 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm text-muted-foreground">
-                        <div>
-                          <span className="text-xs block mb-1">등록자</span>
-                          <span className="text-foreground">{selectedPlan.created_by || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-xs block mb-1">등록일시</span>
-                          <span className="text-foreground">{selectedPlan.created_date ? new Date(selectedPlan.created_date).toLocaleString("ko-KR") : "-"}</span>
-                        </div>
-                      </div>
-                    </section>
+                  <div className="border-t" />
+
+                  {/* 출하 정보 */}
+                  <div className="space-y-3">
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">출하계획일</Label>
+                      <Input
+                        type="date"
+                        className="h-9"
+                        value={editPlanDate}
+                        onChange={(e) => { setEditPlanDate(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                      />
+                    </div>
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">비고</Label>
+                      <Textarea
+                        className="min-h-[80px] resize-y text-sm"
+                        value={editMemo}
+                        onChange={(e) => { setEditMemo(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                        placeholder="비고를 입력해주세요"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 등록 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">등록자</p>
+                      <p className="text-sm text-foreground">{selectedPlan.created_by || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">등록일시</p>
+                      <p className="text-sm text-foreground">
+                        {selectedPlan.created_date ? new Date(selectedPlan.created_date).toLocaleString("ko-KR") : "-"}
+                      </p>
+                    </div>
                   </div>
                 </div>
-              </ResizablePanel>
-            </>
-          )}
+              ) : (
+                <div className="flex flex-col items-center justify-center h-full text-center p-8 text-muted-foreground">
+                  <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center mb-4">
+                    <Inbox className="w-6 h-6 text-muted-foreground/30" />
+                  </div>
+                  <p className="text-sm font-medium">좌측에서 출하계획을 선택해주세요</p>
+                  <p className="text-xs text-muted-foreground/60 mt-1">선택하면 상세 정보가 표시돼요</p>
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
         </ResizablePanelGroup>
       </div>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_16/equipment/info/page.tsx b/frontend/app/(main)/COMPANY_16/equipment/info/page.tsx
index eeb63844..cd53e9b1 100644
--- a/frontend/app/(main)/COMPANY_16/equipment/info/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/equipment/info/page.tsx
@@ -142,15 +142,20 @@ export default function EquipmentInfoPage() {
   };
 
   const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
-    const cols: EDataTableColumn[] = [];
-    if (ts.isVisible("equipment_code")) cols.push({ key: "equipment_code", label: "설비코드", width: "w-[110px]" });
-    if (ts.isVisible("equipment_name")) cols.push({ key: "equipment_name", label: "설비명", minWidth: "min-w-[130px]", truncate: true, render: (v) => v || "-" });
-    if (ts.isVisible("equipment_type")) cols.push({ key: "equipment_type", label: "설비유형", width: "w-[90px]", render: (v) => v || "-" });
-    if (ts.isVisible("manufacturer")) cols.push({ key: "manufacturer", label: "제조사", width: "w-[100px]", render: (v) => v || "-" });
-    if (ts.isVisible("installation_location")) cols.push({ key: "installation_location", label: "설치장소", width: "w-[100px]", render: (v) => v || "-" });
-    if (ts.isVisible("operation_status")) cols.push({ key: "operation_status", label: "가동상태", width: "w-[80px]", render: (v) => v || "-" });
-    return cols;
-  }, [ts.visibleColumns]); // eslint-disable-line react-hooks/exhaustive-deps
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      equipment_code: { width: "w-[110px]" },
+      equipment_name: { minWidth: "min-w-[130px]", truncate: true, render: (v) => v || "-" },
+      equipment_type: { width: "w-[90px]", render: (v) => v || "-" },
+      manufacturer: { width: "w-[100px]", render: (v) => v || "-" },
+      installation_location: { width: "w-[100px]", render: (v) => v || "-" },
+      operation_status: { width: "w-[80px]", render: (v) => v || "-" },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
 
   // 설비 조회
   const fetchEquipments = useCallback(async () => {
@@ -272,8 +277,8 @@ export default function EquipmentInfoPage() {
     if (!inspectionForm.inspection_cycle) { toast.error("점검주기는 필수입니다."); return; }
     if (!inspectionForm.inspection_method) { toast.error("점검방법은 필수입니다."); return; }
     const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
-    const isNumeric = methodLabel === "숫자" || inspectionForm.inspection_method === "숫자";
-    if (isNumeric && !inspectionForm.unit) { toast.error("숫자 점검방법은 측정단위가 필수입니다."); return; }
+    const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+    if (isNumeric && !inspectionForm.unit) { toast.error("측정단위가 필수입니다."); return; }
     // 기준값/오차범위 → 하한치/상한치 자동 계산
     const saveData = { ...inspectionForm };
     if (isNumeric && saveData.standard_value) {
@@ -739,7 +744,7 @@ export default function EquipmentInfoPage() {
               <div className="space-y-1.5"><Label className="text-sm">점검방법 <span className="text-destructive">*</span></Label>
                 {catSelect("inspection_method", inspectionForm.inspection_method, (v) => {
                   const label = resolve("inspection_method", v);
-                  const isNum = label === "숫자" || v === "숫자";
+                  const isNum = ["숫자", "치수검사"].includes(label) || ["숫자", "치수검사"].includes(v);
                   if (!isNum) {
                     setInspectionForm((p) => ({ ...p, inspection_method: v, unit: "", standard_value: "", tolerance: "", lower_limit: "", upper_limit: "" }));
                   } else {
@@ -748,7 +753,7 @@ export default function EquipmentInfoPage() {
                 }, "점검방법")}</div>
               {(() => {
                 const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
-                const isNumeric = methodLabel === "숫자" || inspectionForm.inspection_method === "숫자";
+                const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
                 if (!isNumeric) return null;
                 return (
                   <div className="space-y-1.5"><Label className="text-sm">측정 단위 <span className="text-destructive">*</span></Label>
@@ -758,7 +763,7 @@ export default function EquipmentInfoPage() {
             </div>
             {(() => {
               const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
-              const isNumeric = methodLabel === "숫자" || inspectionForm.inspection_method === "숫자";
+              const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
               if (!isNumeric) return null;
               return (
                 <div className="grid grid-cols-2 gap-4">
diff --git a/frontend/app/(main)/COMPANY_16/logistics/material-status/page.tsx b/frontend/app/(main)/COMPANY_16/logistics/material-status/page.tsx
index 46de306c..eb87ba92 100644
--- a/frontend/app/(main)/COMPANY_16/logistics/material-status/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/logistics/material-status/page.tsx
@@ -333,69 +333,90 @@ export default function MaterialStatusPage() {
                     </p>
                   </div>
                 ) : (
-                  workOrders.map((wo) => (
-                    <div
-                      key={wo.id}
-                      className={cn(
-                        "flex gap-3 rounded-lg border p-3 transition-all cursor-pointer",
-                        "hover:border-primary/50 hover:shadow-sm",
-                        selectedWoId === wo.id
-                          ? "border-primary bg-primary/5 shadow-sm"
-                          : "border-border"
-                      )}
-                      onClick={() => handleSelectWo(wo.id)}
-                    >
+                  ts.groupData(workOrders).map((wo) => {
+                    if ((wo as any)._isGroupSummary || (wo as any)._isGroupHeader) return null;
+                    return (
                       <div
-                        className="flex items-start pt-0.5"
-                        onClick={(e) => e.stopPropagation()}
+                        key={wo.id}
+                        className={cn(
+                          "flex gap-3 rounded-lg border p-3 transition-all cursor-pointer",
+                          "hover:border-primary/50 hover:shadow-sm",
+                          selectedWoId === wo.id
+                            ? "border-primary bg-primary/5 shadow-sm"
+                            : "border-border"
+                        )}
+                        onClick={() => handleSelectWo(wo.id)}
                       >
-                        <Checkbox
-                          checked={checkedWoIds.includes(wo.id)}
-                          onCheckedChange={(c) =>
-                            handleCheckWo(wo.id, c as boolean)
-                          }
-                        />
-                      </div>
-                      <div className="flex flex-1 flex-col gap-1.5">
-                        <div className="flex items-center gap-2">
-                          <span className="text-sm font-bold text-primary">
-                            {wo.plan_no || wo.work_order_no || `WO-${wo.id}`}
-                          </span>
-                          <span
-                            className={cn(
-                              "ml-auto rounded-md border px-2 py-0.5 text-[11px] font-semibold",
-                              getStatusStyle(wo.status)
+                        <div
+                          className="flex items-start pt-0.5"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Checkbox
+                            checked={checkedWoIds.includes(wo.id)}
+                            onCheckedChange={(c) =>
+                              handleCheckWo(wo.id, c as boolean)
+                            }
+                          />
+                        </div>
+                        <div className="flex flex-1 flex-col gap-1.5">
+                          <div className="flex items-center gap-2">
+                            {ts.isVisible("plan_no") && (
+                              <span className="text-sm font-bold text-primary">
+                                {wo.plan_no || wo.work_order_no || `WO-${wo.id}`}
+                              </span>
                             )}
-                          >
-                            {getStatusLabel(wo.status)}
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-1.5">
-                          <span className="text-sm font-semibold">
-                            {wo.item_name}
-                          </span>
-                          <span className="text-xs text-muted-foreground">
-                            ({wo.item_code})
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                          <span>수량:</span>
-                          <span className="font-semibold text-foreground">
-                            {Number(wo.plan_qty).toLocaleString()}개
-                          </span>
-                          <span className="mx-1">|</span>
-                          <span>일자:</span>
-                          <span className="font-semibold text-foreground">
-                            {wo.plan_date
-                              ? new Date(wo.plan_date)
-                                  .toISOString()
-                                  .slice(0, 10)
-                              : "-"}
-                          </span>
+                            {ts.isVisible("status") && (
+                              <span
+                                className={cn(
+                                  "ml-auto rounded-md border px-2 py-0.5 text-[11px] font-semibold",
+                                  getStatusStyle(wo.status)
+                                )}
+                              >
+                                {getStatusLabel(wo.status)}
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1.5">
+                            {ts.isVisible("item_name") && (
+                              <span className="text-sm font-semibold">
+                                {wo.item_name}
+                              </span>
+                            )}
+                            {ts.isVisible("item_code") && (
+                              <span className="text-xs text-muted-foreground">
+                                ({wo.item_code})
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                            {ts.isVisible("plan_qty") && (
+                              <>
+                                <span>수량:</span>
+                                <span className="font-semibold text-foreground">
+                                  {Number(wo.plan_qty).toLocaleString()}개
+                                </span>
+                              </>
+                            )}
+                            {ts.isVisible("plan_qty") && ts.isVisible("plan_date") && (
+                              <span className="mx-1">|</span>
+                            )}
+                            {ts.isVisible("plan_date") && (
+                              <>
+                                <span>일자:</span>
+                                <span className="font-semibold text-foreground">
+                                  {wo.plan_date
+                                    ? new Date(wo.plan_date)
+                                        .toISOString()
+                                        .slice(0, 10)
+                                    : "-"}
+                                </span>
+                              </>
+                            )}
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  ))
+                    );
+                  })
                 )}
               </div>
             </div>
diff --git a/frontend/app/(main)/COMPANY_16/logistics/outbound/page.tsx b/frontend/app/(main)/COMPANY_16/logistics/outbound/page.tsx
index 5ab46a8a..c1ffbd40 100644
--- a/frontend/app/(main)/COMPANY_16/logistics/outbound/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/logistics/outbound/page.tsx
@@ -140,8 +140,16 @@ const DETAIL_HEADER_COLS = [
 // 마스터 필드 키 목록 (필터 분류용)
 const MASTER_KEYS = new Set(["outbound_number", ...MASTER_BODY_LAYOUT.map((c) => c.key)]);
 
-// 총 컬럼 수: 체크박스(1) + 화살표(1) + 출고번호(1) + 마스터필드(7) = 10
-const TOTAL_COLS = 10;
+// 디테일 필드 키 매핑 (GRID_COLUMNS key → DETAIL_HEADER_COLS key)
+const DETAIL_KEY_MAP: Record<string, string> = {
+  source_type: "source_type",
+  item_number: "item_code",
+  item_name: "item_name",
+  spec: "specification",
+  outbound_qty: "outbound_qty",
+  unit_price: "unit_price",
+  total_amount: "total_amount",
+};
 
 // 헤더 필터 Popover
 function HeaderFilterPopover({
@@ -248,6 +256,31 @@ interface SelectedSourceItem {
 
 export default function OutboundPage() {
   const ts = useTableSettings("c16-outbound", "outbound_mng", GRID_COLUMNS);
+
+  // ts.visibleColumns 기반 마스터/디테일 컬럼 계산
+  const visibleMasterLayout = useMemo(() => {
+    const ordered: typeof MASTER_BODY_LAYOUT = [];
+    for (const vc of ts.visibleColumns) {
+      const m = MASTER_BODY_LAYOUT.find((ml) => ml.key === vc.key);
+      if (m) ordered.push(m);
+    }
+    return ordered.length > 0 ? ordered : MASTER_BODY_LAYOUT;
+  }, [ts.visibleColumns]);
+
+  const visibleDetailCols = useMemo(() => {
+    const ordered: typeof DETAIL_HEADER_COLS = [];
+    for (const vc of ts.visibleColumns) {
+      const detailKey = DETAIL_KEY_MAP[vc.key];
+      if (detailKey) {
+        const d = DETAIL_HEADER_COLS.find((dc) => dc.key === detailKey);
+        if (d) ordered.push(d);
+      }
+    }
+    return ordered.length > 0 ? ordered : DETAIL_HEADER_COLS;
+  }, [ts.visibleColumns]);
+
+  const TOTAL_COLS = 3 + visibleMasterLayout.length;
+
   // 목록 데이터
   const [data, setData] = useState<OutboundItem[]>([]);
   const [loading, setLoading] = useState(false);
@@ -900,8 +933,15 @@ export default function OutboundPage() {
         </div>
 
         <div className="h-full overflow-auto">
-          <Table style={{ minWidth: "1200px" }}>
-            <colgroup><col style={{ width: "40px" }} /><col style={{ width: "36px" }} /><col style={{ width: "140px" }} /><col style={{ width: "90px" }} /><col style={{ width: "100px" }} /><col style={{ width: "120px" }} /><col style={{ width: "120px" }} /><col style={{ width: "100px" }} /><col style={{ width: "90px" }} /><col style={{ width: "120px" }} /></colgroup>
+          <Table style={{ minWidth: `${216 + visibleMasterLayout.length * 120}px` }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "36px" }} />
+              <col style={{ width: "140px" }} />
+              {visibleMasterLayout.map((col) => (
+                <col key={col.key} style={{ width: ts.getWidth(col.key) ? `${ts.getWidth(col.key)}px` : undefined }} />
+              ))}
+            </colgroup>
             <TableHeader className="sticky top-0 z-10">
               <TableRow className="bg-muted hover:bg-muted">
                 <TableHead
@@ -942,8 +982,8 @@ export default function OutboundPage() {
                     )}
                   </div>
                 </TableHead>
-                {/* 마스터 필드 헤더 */}
-                {MASTER_BODY_LAYOUT.map((col) => (
+                {/* 마스터 필드 헤더 (ts.visibleColumns 순서) */}
+                {visibleMasterLayout.map((col) => (
                   <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
                     <div className="inline-flex items-center gap-1">
                       <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
@@ -1039,38 +1079,51 @@ export default function OutboundPage() {
                           {outboundNo}
                           <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
                         </TableCell>
-                        {/* 출고유형 */}
-                        <TableCell>
-                          <Badge variant="outline" className={cn("text-[11px]", getTypeColor(master.outbound_type))}>
-                            {master.outbound_type || "-"}
-                          </Badge>
-                        </TableCell>
-                        {/* 출고일 */}
-                        <TableCell className="whitespace-nowrap text-[13px]">
-                          {master.outbound_date ? new Date(master.outbound_date).toLocaleDateString("ko-KR") : "-"}
-                        </TableCell>
-                        {/* 참조번호 */}
-                        <TableCell className="text-[13px] truncate max-w-0">
-                          <span className="block truncate">{master.reference_number || ""}</span>
-                        </TableCell>
-                        {/* 거래처 */}
-                        <TableCell className="text-[13px] truncate max-w-0">
-                          <span className="block truncate">{master.customer_name || ""}</span>
-                        </TableCell>
-                        {/* 창고 */}
-                        <TableCell className="text-[13px] truncate max-w-0">
-                          <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
-                        </TableCell>
-                        {/* 출고상태 */}
-                        <TableCell>
-                          <Badge variant="outline" className={cn("text-[11px]", getStatusColor(master.outbound_status))}>
-                            {master.outbound_status || "-"}
-                          </Badge>
-                        </TableCell>
-                        {/* 비고 */}
-                        <TableCell className="text-muted-foreground">
-                          <span className="block truncate max-w-[120px]">{master.memo || ""}</span>
-                        </TableCell>
+                        {/* 마스터 필드 (ts.visibleColumns 순서) */}
+                        {visibleMasterLayout.map((col) => {
+                          switch (col.key) {
+                            case "outbound_type": return (
+                              <TableCell key={col.key}>
+                                <Badge variant="outline" className={cn("text-[11px]", getTypeColor(master.outbound_type))}>
+                                  {master.outbound_type || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "outbound_date": return (
+                              <TableCell key={col.key} className="whitespace-nowrap text-[13px]">
+                                {master.outbound_date ? new Date(master.outbound_date).toLocaleDateString("ko-KR") : "-"}
+                              </TableCell>
+                            );
+                            case "reference_number": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.reference_number || ""}</span>
+                              </TableCell>
+                            );
+                            case "customer_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.customer_name || ""}</span>
+                              </TableCell>
+                            );
+                            case "warehouse_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
+                              </TableCell>
+                            );
+                            case "outbound_status": return (
+                              <TableCell key={col.key}>
+                                <Badge variant="outline" className={cn("text-[11px]", getStatusColor(master.outbound_status))}>
+                                  {master.outbound_status || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "memo": return (
+                              <TableCell key={col.key} className="text-muted-foreground">
+                                <span className="block truncate max-w-[120px]">{master.memo || ""}</span>
+                              </TableCell>
+                            );
+                            default: return <TableCell key={col.key} className="text-[13px]">{(master as any)[col.key] ?? ""}</TableCell>;
+                          }
+                        })}
                       </TableRow>
 
                       {/* 디테일 서브 헤더 (펼쳤을 때만) */}
@@ -1084,7 +1137,7 @@ export default function OutboundPage() {
                           <TableCell />
                           <TableCell />
                           <TableCell />
-                          {DETAIL_HEADER_COLS.map((col) => {
+                          {visibleDetailCols.map((col) => {
                             const isRight = ["outbound_qty", "unit_price", "total_amount"].includes(col.key);
                             const isSorted = sortState?.key === col.key;
                             const uniqueVals = Array.from(new Set(
@@ -1163,20 +1216,18 @@ export default function OutboundPage() {
                               <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
                             </TableCell>
                             <TableCell />
-                            {/* 출처 */}
-                            <TableCell className="text-[13px]">{row.source_type ? (SOURCE_TYPE_LABEL[row.source_type] || row.source_type) : "-"}</TableCell>
-                            {/* 품목코드 */}
-                            <TableCell className="font-mono text-[13px]">{row.item_code || ""}</TableCell>
-                            {/* 품목명 */}
-                            <TableCell className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>
-                            {/* 규격 */}
-                            <TableCell className="text-[13px] text-muted-foreground">{row.specification || ""}</TableCell>
-                            {/* 출고수량 */}
-                            <TableCell className="text-right font-mono text-[13px]">{row.outbound_qty ? Number(row.outbound_qty).toLocaleString() : ""}</TableCell>
-                            {/* 단가 */}
-                            <TableCell className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>
-                            {/* 금액 */}
-                            <TableCell className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>
+                            {visibleDetailCols.map((col) => {
+                              switch (col.key) {
+                                case "source_type": return <TableCell key={col.key} className="text-[13px]">{row.source_type ? (SOURCE_TYPE_LABEL[row.source_type] || row.source_type) : "-"}</TableCell>;
+                                case "item_code": return <TableCell key={col.key} className="font-mono text-[13px]">{row.item_code || ""}</TableCell>;
+                                case "item_name": return <TableCell key={col.key} className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>;
+                                case "specification": return <TableCell key={col.key} className="text-[13px] text-muted-foreground">{row.specification || ""}</TableCell>;
+                                case "outbound_qty": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.outbound_qty ? Number(row.outbound_qty).toLocaleString() : ""}</TableCell>;
+                                case "unit_price": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>;
+                                case "total_amount": return <TableCell key={col.key} className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>;
+                                default: return <TableCell key={col.key} className="text-[13px]">{(row as any)[col.key] ?? ""}</TableCell>;
+                              }
+                            })}
                           </TableRow>
                         );
                       })}
diff --git a/frontend/app/(main)/COMPANY_16/logistics/packaging/page.tsx b/frontend/app/(main)/COMPANY_16/logistics/packaging/page.tsx
index 5d4d5787..6ae340aa 100644
--- a/frontend/app/(main)/COMPANY_16/logistics/packaging/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/logistics/packaging/page.tsx
@@ -460,18 +460,20 @@ export default function PackagingPage() {
           {/* 포장재 목록 테이블 */}
           <div className={cn("overflow-auto", selectedPkg ? "flex-[0_0_50%] border-b" : "flex-1")}>
             <EDataTable
-              columns={[
-                { key: "pkg_code", label: "품목코드" },
-                { key: "pkg_name", label: "포장명" },
-                { key: "pkg_type", label: "유형", width: "w-[80px]", render: (v) => PKG_TYPE_LABEL[v] || v || "-" },
-                { key: "size", label: "크기(mm)", width: "w-[100px]", render: (_v, row) => fmtSize(row.width_mm, row.length_mm, row.height_mm) },
-                { key: "max_load_kg", label: "최대중량", width: "w-[80px]", align: "right", render: (v) => Number(v || 0) > 0 ? `${v}kg` : "-" },
-                { key: "status", label: "상태", width: "w-[60px]", align: "center", render: (v) => (
-                  <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(v))}>
-                    {STATUS_LABEL[v] || v}
-                  </span>
-                )},
-              ] as EDataTableColumn<PkgUnit>[]}
+              columns={ts.visibleColumns.map((col): EDataTableColumn<PkgUnit> => {
+                const renderMap: Record<string, Partial<EDataTableColumn<PkgUnit>>> = {
+                  pkg_type: { width: "w-[80px]", render: (v: any) => PKG_TYPE_LABEL[v] || v || "-" },
+                  size: { width: "w-[100px]", render: (_v: any, row: any) => fmtSize(row.width_mm, row.length_mm, row.height_mm) },
+                  max_weight: { width: "w-[80px]", align: "right", render: (v: any) => Number(v || 0) > 0 ? `${v}kg` : "-" },
+                  max_load_kg: { width: "w-[80px]", align: "right", render: (v: any) => Number(v || 0) > 0 ? `${v}kg` : "-" },
+                  status: { width: "w-[60px]", align: "center", render: (v: any) => (
+                    <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(v))}>
+                      {STATUS_LABEL[v] || v}
+                    </span>
+                  )},
+                };
+                return { key: col.key, label: col.label, ...renderMap[col.key] };
+              })}
               data={ts.groupData(filteredPkgUnits)}
               rowKey={(row) => String(row.id)}
               loading={pkgLoading}
diff --git a/frontend/app/(main)/COMPANY_16/logistics/receiving/page.tsx b/frontend/app/(main)/COMPANY_16/logistics/receiving/page.tsx
index a8d5fc2c..85cdc23c 100644
--- a/frontend/app/(main)/COMPANY_16/logistics/receiving/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/logistics/receiving/page.tsx
@@ -117,12 +117,20 @@ const DETAIL_HEADER_COLS = [
   { key: "total_amount", label: "금액" },
 ];
 
-// 총 컬럼 수: 체크박스(1) + 화살표(1) + 입고번호(1) + 디테일(7) = 10
-const TOTAL_COLS = 10;
-
 // 마스터 필드 키 목록 (필터 분류용)
 const MASTER_KEYS = new Set(["inbound_number", ...MASTER_BODY_LAYOUT.map((c) => c.key)]);
 
+// 디테일 필드 키 매핑 (GRID_COLUMNS key → DETAIL_HEADER_COLS key)
+const DETAIL_KEY_MAP: Record<string, string> = {
+  source_type: "source_table",
+  item_number: "item_number",
+  item_name: "item_name",
+  spec: "spec",
+  inbound_qty: "inbound_qty",
+  unit_price: "unit_price",
+  total_amount: "total_amount",
+};
+
 // 헤더 필터 Popover
 function HeaderFilterPopover({
   colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
@@ -278,6 +286,31 @@ interface SelectedSourceItem {
 
 export default function ReceivingPage() {
   const ts = useTableSettings("c16-receiving", "inbound_mng", GRID_COLUMNS);
+
+  // ts.visibleColumns 기반 마스터/디테일 컬럼 계산
+  const visibleMasterLayout = useMemo(() => {
+    const ordered: typeof MASTER_BODY_LAYOUT = [];
+    for (const vc of ts.visibleColumns) {
+      const m = MASTER_BODY_LAYOUT.find((ml) => ml.key === vc.key);
+      if (m) ordered.push(m);
+    }
+    return ordered.length > 0 ? ordered : MASTER_BODY_LAYOUT;
+  }, [ts.visibleColumns]);
+
+  const visibleDetailCols = useMemo(() => {
+    const ordered: typeof DETAIL_HEADER_COLS = [];
+    for (const vc of ts.visibleColumns) {
+      const detailKey = DETAIL_KEY_MAP[vc.key];
+      if (detailKey) {
+        const d = DETAIL_HEADER_COLS.find((dc) => dc.key === detailKey);
+        if (d) ordered.push(d);
+      }
+    }
+    return ordered.length > 0 ? ordered : DETAIL_HEADER_COLS;
+  }, [ts.visibleColumns]);
+
+  const TOTAL_COLS = 3 + visibleMasterLayout.length;
+
   // 목록 데이터
   const [data, setData] = useState<InboundItem[]>([]);
   const [loading, setLoading] = useState(false);
@@ -847,8 +880,15 @@ export default function ReceivingPage() {
         </div>
 
         <div className="h-[calc(100%-44px)] overflow-auto">
-          <Table style={{ minWidth: "1100px" }}>
-            <colgroup><col style={{ width: "40px" }} /><col style={{ width: "36px" }} /><col style={{ width: "140px" }} /><col style={{ width: "90px" }} /><col style={{ width: "110px" }} /><col style={{ width: "160px" }} /><col style={{ width: "90px" }} /><col style={{ width: "90px" }} /><col style={{ width: "90px" }} /><col style={{ width: "110px" }} /></colgroup>
+          <Table style={{ minWidth: `${216 + visibleMasterLayout.length * 120}px` }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "36px" }} />
+              <col style={{ width: "140px" }} />
+              {visibleMasterLayout.map((col) => (
+                <col key={col.key} style={{ width: ts.getWidth(col.key) ? `${ts.getWidth(col.key)}px` : undefined }} />
+              ))}
+            </colgroup>
             <TableHeader className="sticky top-0 z-10">
               <TableRow className="bg-muted hover:bg-muted">
                 <TableHead
@@ -889,8 +929,8 @@ export default function ReceivingPage() {
                     )}
                   </div>
                 </TableHead>
-                {/* 마스터 필드 헤더 (colSpan으로 디테일 컬럼 위에 맵핑) */}
-                {MASTER_BODY_LAYOUT.map((col) => (
+                {/* 마스터 필드 헤더 (ts.visibleColumns 순서) */}
+                {visibleMasterLayout.map((col) => (
                   <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
                     <div className="inline-flex items-center gap-1">
                       <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
@@ -985,38 +1025,51 @@ export default function ReceivingPage() {
                           {inboundNo}
                           <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
                         </TableCell>
-                        {/* 입고유형 */}
-                        <TableCell className="text-[13px]">
-                          <Badge variant={getTypeVariant(resolveInboundType(master.inbound_type))} className="text-[11px]">
-                            {resolveInboundType(master.inbound_type)}
-                          </Badge>
-                        </TableCell>
-                        {/* 입고일 */}
-                        <TableCell className="text-[13px] whitespace-nowrap">
-                          {master.inbound_date ? new Date(master.inbound_date).toLocaleDateString("ko-KR") : "-"}
-                        </TableCell>
-                        {/* 참조번호 */}
-                        <TableCell className="text-[13px] truncate max-w-0">
-                          <span className="block truncate">{master.reference_number || ""}</span>
-                        </TableCell>
-                        {/* 공급처 */}
-                        <TableCell className="text-[13px] truncate max-w-0">
-                          <span className="block truncate">{master.supplier_name || ""}</span>
-                        </TableCell>
-                        {/* 창고 */}
-                        <TableCell className="text-[13px] truncate max-w-0">
-                          <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
-                        </TableCell>
-                        {/* 입고상태 */}
-                        <TableCell className="text-[13px]">
-                          <Badge variant={getStatusVariant(master.inbound_status)} className="text-[11px]">
-                            {master.inbound_status || "-"}
-                          </Badge>
-                        </TableCell>
-                        {/* 비고 */}
-                        <TableCell className="text-muted-foreground text-[13px]">
-                          <span className="block truncate max-w-[110px]">{master.memo || ""}</span>
-                        </TableCell>
+                        {/* 마스터 필드 (ts.visibleColumns 순서) */}
+                        {visibleMasterLayout.map((col) => {
+                          switch (col.key) {
+                            case "inbound_type": return (
+                              <TableCell key={col.key} className="text-[13px]">
+                                <Badge variant={getTypeVariant(resolveInboundType(master.inbound_type))} className="text-[11px]">
+                                  {resolveInboundType(master.inbound_type)}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "inbound_date": return (
+                              <TableCell key={col.key} className="text-[13px] whitespace-nowrap">
+                                {master.inbound_date ? new Date(master.inbound_date).toLocaleDateString("ko-KR") : "-"}
+                              </TableCell>
+                            );
+                            case "reference_number": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.reference_number || ""}</span>
+                              </TableCell>
+                            );
+                            case "supplier_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.supplier_name || ""}</span>
+                              </TableCell>
+                            );
+                            case "warehouse_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
+                              </TableCell>
+                            );
+                            case "inbound_status": return (
+                              <TableCell key={col.key} className="text-[13px]">
+                                <Badge variant={getStatusVariant(master.inbound_status)} className="text-[11px]">
+                                  {master.inbound_status || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "memo": return (
+                              <TableCell key={col.key} className="text-muted-foreground text-[13px]">
+                                <span className="block truncate max-w-[110px]">{master.memo || ""}</span>
+                              </TableCell>
+                            );
+                            default: return <TableCell key={col.key} className="text-[13px]">{(master as any)[col.key] ?? ""}</TableCell>;
+                          }
+                        })}
                       </TableRow>
 
                       {/* 디테일 서브 헤더 (펼쳤을 때만) */}
@@ -1030,7 +1083,7 @@ export default function ReceivingPage() {
                           <TableCell />
                           <TableCell />
                           <TableCell />
-                          {DETAIL_HEADER_COLS.map((col) => {
+                          {visibleDetailCols.map((col) => {
                             const isRight = ["inbound_qty", "unit_price", "total_amount"].includes(col.key);
                             const isSorted = sortState?.key === col.key;
                             const uniqueVals = Array.from(new Set(
@@ -1108,20 +1161,18 @@ export default function ReceivingPage() {
                               <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
                             </TableCell>
                             <TableCell />
-                            {/* 출처 */}
-                            <TableCell className="text-[13px]">{row.source_table ? SOURCE_TABLE_LABEL[row.source_table] || row.source_table : "-"}</TableCell>
-                            {/* 품목코드 */}
-                            <TableCell className="font-mono text-[13px]">{row.item_number || ""}</TableCell>
-                            {/* 품목명 */}
-                            <TableCell className="text-[13px] max-w-[160px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>
-                            {/* 규격 */}
-                            <TableCell className="text-[13px] text-muted-foreground">{row.spec || ""}</TableCell>
-                            {/* 입고수량 */}
-                            <TableCell className="text-right font-mono text-[13px]">{row.inbound_qty ? Number(row.inbound_qty).toLocaleString() : ""}</TableCell>
-                            {/* 단가 */}
-                            <TableCell className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>
-                            {/* 금액 */}
-                            <TableCell className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>
+                            {visibleDetailCols.map((col) => {
+                              switch (col.key) {
+                                case "source_table": return <TableCell key={col.key} className="text-[13px]">{row.source_table ? SOURCE_TABLE_LABEL[row.source_table] || row.source_table : "-"}</TableCell>;
+                                case "item_number": return <TableCell key={col.key} className="font-mono text-[13px]">{row.item_number || ""}</TableCell>;
+                                case "item_name": return <TableCell key={col.key} className="text-[13px] max-w-[160px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>;
+                                case "spec": return <TableCell key={col.key} className="text-[13px] text-muted-foreground">{row.spec || ""}</TableCell>;
+                                case "inbound_qty": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.inbound_qty ? Number(row.inbound_qty).toLocaleString() : ""}</TableCell>;
+                                case "unit_price": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>;
+                                case "total_amount": return <TableCell key={col.key} className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>;
+                                default: return <TableCell key={col.key} className="text-[13px]">{(row as any)[col.key] ?? ""}</TableCell>;
+                              }
+                            })}
                           </TableRow>
                         );
                       })}
diff --git a/frontend/app/(main)/COMPANY_16/master-data/company/page.tsx b/frontend/app/(main)/COMPANY_16/master-data/company/page.tsx
index dfd1b666..9d7f2dea 100644
--- a/frontend/app/(main)/COMPANY_16/master-data/company/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/master-data/company/page.tsx
@@ -491,12 +491,6 @@ export default function CompanyPage() {
             >
               <Building2 className="w-4 h-4" /> 회사정보
             </TabsTrigger>
-            <TabsTrigger
-              value="department"
-              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 gap-1.5"
-            >
-              <Users className="w-4 h-4" /> 부서관리
-            </TabsTrigger>
           </TabsList>
         </div>
 
@@ -635,89 +629,6 @@ export default function CompanyPage() {
           </div>
         </TabsContent>
 
-        {/* ===================== Tab 2: 부서관리 ===================== */}
-        <TabsContent value="department" className="flex-1 overflow-hidden mt-0">
-          <div className="h-full overflow-hidden border rounded-none bg-card">
-            <ResizablePanelGroup direction="horizontal">
-              {/* 좌측: 부서 트리 */}
-              <ResizablePanel defaultSize={30} minSize={20}>
-                <div className="flex flex-col h-full">
-                  <div className="flex items-center justify-between px-4 py-3 border-b bg-muted/30 shrink-0">
-                    <div className="font-semibold flex items-center gap-2 text-sm">
-                      <Building2 className="w-4 h-4 text-muted-foreground" />
-                      <span>부서</span>
-                      <Badge variant="secondary" className="font-mono text-xs">{depts.length}건</Badge>
-                    </div>
-                    <div className="flex gap-1.5">
-                      <Button size="sm" className="h-8" onClick={openDeptRegister}>
-                        <Plus className="w-3.5 h-3.5 mr-1" /> 등록
-                      </Button>
-                      <Button variant="outline" size="sm" className="h-8" disabled={!selectedDeptCode} onClick={openDeptEdit}>
-                        <Pencil className="w-3.5 h-3.5" />
-                      </Button>
-                      <Button variant="destructive" size="sm" className="h-8" disabled={!selectedDeptCode} onClick={handleDeptDelete}>
-                        <Trash2 className="w-3.5 h-3.5" />
-                      </Button>
-                    </div>
-                  </div>
-                  <div className="flex-1 overflow-y-auto">
-                    {deptLoading ? (
-                      <div className="flex items-center justify-center py-10">
-                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
-                      </div>
-                    ) : deptTree.length === 0 ? (
-                      <div className="flex flex-col items-center justify-center py-10 text-muted-foreground">
-                        <Building2 className="w-8 h-8 mb-2" />
-                        <span className="text-sm">등록된 부서가 없어요</span>
-                      </div>
-                    ) : (
-                      renderTree(deptTree)
-                    )}
-                  </div>
-                </div>
-              </ResizablePanel>
-
-              <ResizableHandle withHandle />
-
-              {/* 우측: 사원 목록 */}
-              <ResizablePanel defaultSize={70} minSize={40}>
-                <div className="flex flex-col h-full">
-                  <div className="flex items-center justify-between px-4 py-3 border-b bg-muted/30 shrink-0">
-                    <div className="font-semibold flex items-center gap-2 text-sm">
-                      <Users className="w-4 h-4 text-muted-foreground" />
-                      <span>{selectedDept ? "부서 인원" : "부서를 선택해주세요"}</span>
-                      {selectedDept && <Badge variant="outline" className="font-mono text-xs">{selectedDept.dept_name}</Badge>}
-                      {members.length > 0 && <Badge variant="secondary" className="font-mono text-xs">{members.length}명</Badge>}
-                    </div>
-                    {selectedDeptCode && (
-                      <Button variant="outline" size="sm" onClick={() => openUserModal()}>
-                        <Plus className="w-3.5 h-3.5 mr-1" /> 사원 추가
-                      </Button>
-                    )}
-                  </div>
-                  {selectedDeptCode ? (
-                    <EDataTable
-                      columns={companyMemberColumns}
-                      data={members}
-                      rowKey={(row) => row.user_id || row.id}
-                      loading={memberLoading}
-                      emptyMessage="소속 사원이 없어요"
-                      emptyIcon={<Users className="w-8 h-8 mb-2" />}
-                      onRowDoubleClick={(row) => openUserModal(row)}
-                      showPagination={false}
-                      draggableColumns={false}
-                    />
-                  ) : (
-                    <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
-                      <Users className="w-10 h-10 mb-3" />
-                      <span className="text-sm">좌측에서 부서를 선택해주세요</span>
-                    </div>
-                  )}
-                </div>
-              </ResizablePanel>
-            </ResizablePanelGroup>
-          </div>
-        </TabsContent>
       </Tabs>
 
       {/* ── 부서 등록/수정 모달 ── */}
diff --git a/frontend/app/(main)/COMPANY_16/master-data/department/page.tsx b/frontend/app/(main)/COMPANY_16/master-data/department/page.tsx
index a2bbcba5..23f70f2b 100644
--- a/frontend/app/(main)/COMPANY_16/master-data/department/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/master-data/department/page.tsx
@@ -9,7 +9,7 @@
  * 모달: 부서 등록(dept_info), 사원 추가(user_info)
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -279,6 +279,7 @@ export default function DepartmentPage() {
           dept_code: userForm.dept_code || undefined,
           dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name || undefined,
           status: userForm.status || "active",
+          end_date: userForm.end_date || null,
         },
         mainDept: userForm.dept_code ? {
           dept_code: userForm.dept_code,
@@ -308,41 +309,45 @@ export default function DepartmentPage() {
   };
 
   // 퇴사일 기반 재직/퇴사 분리
-  const today = new Date().toISOString().split("T")[0];
+  const _now = new Date();
+  const today = `${_now.getFullYear()}-${String(_now.getMonth() + 1).padStart(2, "0")}-${String(_now.getDate()).padStart(2, "0")}`;
   const activeMembers = members.filter((m) => !m.end_date || m.end_date.substring(0, 10) >= today);
   const resignedMembers = members.filter((m) => m.end_date && m.end_date.substring(0, 10) < today);
 
-  const isColVisible = (key: string) => ts.isVisible(key);
-
-  // EDataTable 컬럼 정의 (부서 목록)
-  const deptColumns: EDataTableColumn[] = [
-    { key: "dept_code", label: "부서코드", width: "w-[120px]" },
-    { key: "dept_name", label: "부서명", minWidth: "min-w-[140px]" },
-    ...(isColVisible("parent_dept_code")
-      ? [{
-          key: "parent_dept_code",
-          label: "상위부서",
-          width: "w-[110px]",
-          render: (val: any) => <span className="text-[13px] text-muted-foreground">{val || "\u2014"}</span>,
-        }]
-      : []),
-    ...(isColVisible("status")
-      ? [{
-          key: "status",
-          label: "상태",
-          width: "w-[70px]",
-          render: (val: any) =>
-            val ? (
-              <Badge
-                variant={val === "active" ? "default" : "outline"}
-                className="text-[10px] px-1.5 py-0 h-5"
-              >
-                {val === "active" ? "활성" : (val || "\u2014")}
-              </Badge>
-            ) : null,
-        }]
-      : []),
-  ];
+  // EDataTable 컬럼 정의 (부서 목록) — ts.visibleColumns 순서를 따름
+  const deptColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      dept_code: { width: "w-[120px]" },
+      dept_name: { minWidth: "min-w-[140px]" },
+      parent_dept_code: {
+        width: "w-[110px]",
+        render: (val: any) => <span className="text-[13px] text-muted-foreground">{val || "\u2014"}</span>,
+      },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "active" ? "default" : "outline"}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val === "active" ? "활성" : (val || "\u2014")}
+            </Badge>
+          ) : null,
+      },
+    };
+    // dept_code, dept_name은 항상 표시 (DEPT_COLUMNS에 포함되지 않으므로 visibleColumns에 없음)
+    const fixedCols: EDataTableColumn[] = [
+      { key: "dept_code", label: "부서코드", ...colProps["dept_code"] },
+      { key: "dept_name", label: "부서명", ...colProps["dept_name"] },
+    ];
+    const dynamicCols = ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+    return [...fixedCols, ...dynamicCols];
+  }, [ts.visibleColumns]);
 
   return (
     <div className="flex h-full flex-col gap-3 p-4">
diff --git a/frontend/app/(main)/COMPANY_16/master-data/item-info/page.tsx b/frontend/app/(main)/COMPANY_16/master-data/item-info/page.tsx
index fec0f371..375fd900 100644
--- a/frontend/app/(main)/COMPANY_16/master-data/item-info/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/master-data/item-info/page.tsx
@@ -84,6 +84,56 @@ function CategoryCombobox({ options, value, onChange, placeholder }: {
   );
 }
 
+// 다중 선택 카테고리 콤보박스
+function MultiCategoryCombobox({ options, value, onChange, placeholder }: {
+  options: { code: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selectedCodes = value ? value.split(",").map((c) => c.trim()).filter(Boolean) : [];
+  const selectedLabels = selectedCodes.map((code) => options.find((o) => o.code === code)?.label || code).filter(Boolean);
+
+  const toggle = (code: string) => {
+    const next = selectedCodes.includes(code)
+      ? selectedCodes.filter((c) => c !== code)
+      : [...selectedCodes, code];
+    onChange(next.join(","));
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
+          <span className="truncate">
+            {selectedLabels.length > 0
+              ? selectedLabels.join(", ")
+              : <span className="text-muted-foreground">{placeholder}</span>}
+          </span>
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8" />
+          <CommandList>
+            <CommandEmpty>검색 결과가 없어요</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {options.map((opt) => (
+                <CommandItem key={opt.code} value={opt.label} onSelect={() => toggle(opt.code)}>
+                  <Check className={cn("mr-2 h-3.5 w-3.5", selectedCodes.includes(opt.code) ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 const TABLE_NAME = "item_info";
 
 const GRID_COLUMNS = [
@@ -108,7 +158,7 @@ const GRID_COLUMNS = [
 const FORM_FIELDS = [
   { key: "item_number", label: "품목코드", type: "text", required: true, disabled: true, placeholder: "자동 채번" },
   { key: "item_name", label: "품명", type: "text", required: true },
-  { key: "division", label: "관리품목", type: "category" },
+  { key: "division", label: "관리품목", type: "multi-category" },
   { key: "type", label: "품목구분", type: "category" },
   { key: "size", label: "규격", type: "text" },
   { key: "unit", label: "단위", type: "category" },
@@ -137,6 +187,7 @@ export default function ItemInfoPage() {
   const { user } = useAuth();
   const ts = useTableSettings("c16-item-info", TABLE_NAME, GRID_COLUMNS);
   const [items, setItems] = useState<any[]>([]);
+  const [rawItems, setRawItems] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
 
   // 검색 필터 (DynamicSearchFilter)
@@ -197,7 +248,7 @@ export default function ItemInfoPage() {
       const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
       const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
         page: 1,
-        size: 500,
+        size: 99999,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
       });
@@ -215,6 +266,7 @@ export default function ItemInfoPage() {
         }
         return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
       };
+      setRawItems(raw);
       const data = raw.map((r: any) => {
         const converted = { ...r };
         for (const col of CATEGORY_COLUMNS) {
@@ -261,7 +313,8 @@ export default function ItemInfoPage() {
 
   // 수정 모달 열기
   const openEditModal = (item: any) => {
-    setFormData({ ...item });
+    const raw = rawItems.find((r) => r.id === item.id) || item;
+    setFormData({ ...raw });
     setIsEditMode(true);
     setEditId(item.id);
     setIsModalOpen(true);
@@ -269,7 +322,8 @@ export default function ItemInfoPage() {
 
   // 복사 모달 열기
   const openCopyModal = async (item: any) => {
-    const { id, item_number, created_date, updated_date, writer, ...rest } = item;
+    const raw = rawItems.find((r) => r.id === item.id) || item;
+    const { id, item_number, created_date, updated_date, writer, ...rest } = raw;
     setFormData(rest);
     setIsEditMode(false);
     setEditId(null);
@@ -459,6 +513,13 @@ export default function ItemInfoPage() {
                       columnName={field.key}
                       height="h-32"
                     />
+                  ) : field.type === "multi-category" ? (
+                    <MultiCategoryCombobox
+                      options={categoryOptions[field.key] || []}
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      placeholder={`${field.label} 선택`}
+                    />
                   ) : field.type === "category" ? (
                     <CategoryCombobox
                       options={categoryOptions[field.key] || []}
diff --git a/frontend/app/(main)/COMPANY_16/monitoring/equipment/page.tsx b/frontend/app/(main)/COMPANY_16/monitoring/equipment/page.tsx
new file mode 100644
index 00000000..ccb5aaf6
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_16/monitoring/equipment/page.tsx
@@ -0,0 +1,575 @@
+"use client";
+
+/**
+ * 설비운영모니터링 — 하드코딩 페이지
+ *
+ * 설비(equipment_mng) 목록 + 작업지시(work_instruction) 연결
+ * 실시간 카드 그리드 형태 모니터링 대시보드
+ */
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Wrench,
+  Zap,
+  Pause,
+  Power,
+} from "lucide-react";
+
+/* ───── 상태 정의 ───── */
+
+type OperationStatus = "running" | "idle" | "maintenance" | "off" | "unknown";
+
+interface StatusConfig {
+  label: string;
+  color: string;
+  bg: string;
+  border: string;
+  bar: string;
+  icon: React.ReactNode;
+  badgeBg: string;
+  badgeText: string;
+  cardGlow: string;
+}
+
+const STATUS_MAP: Record<OperationStatus, StatusConfig> = {
+  running: {
+    label: "가동중",
+    color: "text-emerald-400",
+    bg: "bg-emerald-500/10",
+    border: "border-emerald-500/30",
+    bar: "bg-emerald-400",
+    icon: <Zap className="h-4 w-4" />,
+    badgeBg: "bg-emerald-500/20",
+    badgeText: "text-emerald-300",
+    cardGlow: "shadow-emerald-500/5",
+  },
+  idle: {
+    label: "대기",
+    color: "text-amber-400",
+    bg: "bg-amber-500/10",
+    border: "border-amber-500/30",
+    bar: "bg-amber-400",
+    icon: <Pause className="h-4 w-4" />,
+    badgeBg: "bg-amber-500/20",
+    badgeText: "text-amber-300",
+    cardGlow: "shadow-amber-500/5",
+  },
+  maintenance: {
+    label: "점검/수리",
+    color: "text-red-400",
+    bg: "bg-red-500/10",
+    border: "border-red-500/30",
+    bar: "bg-red-400",
+    icon: <Wrench className="h-4 w-4" />,
+    badgeBg: "bg-red-500/20",
+    badgeText: "text-red-300",
+    cardGlow: "shadow-red-500/5",
+  },
+  off: {
+    label: "비가동",
+    color: "text-gray-400",
+    bg: "bg-gray-500/10",
+    border: "border-gray-500/30",
+    bar: "bg-gray-500",
+    icon: <Power className="h-4 w-4" />,
+    badgeBg: "bg-gray-500/20",
+    badgeText: "text-gray-400",
+    cardGlow: "shadow-gray-500/5",
+  },
+  unknown: {
+    label: "미설정",
+    color: "text-gray-500",
+    bg: "bg-gray-500/10",
+    border: "border-gray-600/30",
+    bar: "bg-gray-600",
+    icon: <Power className="h-4 w-4" />,
+    badgeBg: "bg-gray-600/20",
+    badgeText: "text-gray-500",
+    cardGlow: "",
+  },
+};
+
+/** operation_status 값 → 내부 키 매핑 */
+function resolveStatus(raw: string | null | undefined): OperationStatus {
+  if (!raw) return "unknown";
+  const v = raw.trim().toLowerCase();
+  if (["running", "가동", "가동중"].includes(v)) return "running";
+  if (["idle", "대기"].includes(v)) return "idle";
+  if (["maintenance", "점검", "수리", "점검/수리", "점검중"].includes(v)) return "maintenance";
+  if (["off", "비가동", "정지"].includes(v)) return "off";
+  return "unknown";
+}
+
+/* ───── 타입 ───── */
+
+interface Equipment {
+  id: string;
+  equipment_code: string;
+  equipment_name: string;
+  equipment_type: string;
+  installation_location: string;
+  operation_status: string;
+  manufacturer: string;
+  model_name: string;
+  image_path: string;
+}
+
+interface WorkInstruction {
+  id: string;
+  instruction_number: string;
+  item_name: string;
+  equipment_id: string;
+  worker_name: string;
+  status: string;
+}
+
+/* ───── 컴포넌트 ───── */
+
+export default function EquipmentMonitoringPage() {
+  const [equipments, setEquipments] = useState<Equipment[]>([]);
+  const [workInstructions, setWorkInstructions] = useState<WorkInstruction[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [filterStatus, setFilterStatus] = useState<OperationStatus | "all">("all");
+  const autoRefreshRef = useRef(autoRefresh);
+
+  // autoRefreshRef 동기화
+  useEffect(() => {
+    autoRefreshRef.current = autoRefresh;
+  }, [autoRefresh]);
+
+  /* ── 시간 업데이트 ── */
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* ── 데이터 fetch ── */
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      const [equipRes, wiRes] = await Promise.all([
+        apiClient.post("/table-management/tables/equipment_mng/data", {
+          autoFilter: true,
+          page: 1,
+          size: 500,
+        }),
+        apiClient.get("/work-instruction/list").catch(() => ({ data: { data: [] } })),
+      ]);
+
+      const eqRows: Equipment[] = equipRes.data?.data?.rows ?? equipRes.data?.rows ?? [];
+      setEquipments(eqRows);
+
+      const wiRows: WorkInstruction[] = wiRes.data?.data ?? wiRes.data?.rows ?? [];
+      setWorkInstructions(wiRows);
+    } catch (err) {
+      console.error("설비 모니터링 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ── 자동 갱신 (30초) ── */
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (autoRefreshRef.current) fetchData();
+    }, 30000);
+    return () => clearInterval(interval);
+  }, [fetchData]);
+
+  /* ── 요약 통계 ── */
+  const stats = useMemo(() => {
+    const counts: Record<OperationStatus, number> = {
+      running: 0,
+      idle: 0,
+      maintenance: 0,
+      off: 0,
+      unknown: 0,
+    };
+    equipments.forEach((eq) => {
+      const s = resolveStatus(eq.operation_status);
+      counts[s]++;
+    });
+    return { total: equipments.length, ...counts };
+  }, [equipments]);
+
+  /* ── 필터된 설비 ── */
+  const filteredEquipments = useMemo(() => {
+    if (filterStatus === "all") return equipments;
+    return equipments.filter((eq) => resolveStatus(eq.operation_status) === filterStatus);
+  }, [equipments, filterStatus]);
+
+  /* ── 설비별 작업지시 맵 ── */
+  const wiMap = useMemo(() => {
+    const map: Record<string, WorkInstruction[]> = {};
+    workInstructions.forEach((wi) => {
+      if (wi.equipment_id) {
+        if (!map[wi.equipment_id]) map[wi.equipment_id] = [];
+        map[wi.equipment_id].push(wi);
+      }
+    });
+    return map;
+  }, [workInstructions]);
+
+  /* ── 가동률 (모킹 — 센서 미연동) ── */
+  const getUtilization = (eq: Equipment): number | null => {
+    const s = resolveStatus(eq.operation_status);
+    if (s === "running") return 75 + Math.floor(Math.random() * 20); // 75~94
+    if (s === "idle") return 20 + Math.floor(Math.random() * 30); // 20~49
+    if (s === "maintenance") return 0;
+    if (s === "off") return 0;
+    return null;
+  };
+
+  /* ── 요약 카드 배열 ── */
+  const summaryCards: {
+    label: string;
+    count: number;
+    status: OperationStatus | "total";
+    color: string;
+    bg: string;
+    border: string;
+    icon: React.ReactNode;
+  }[] = [
+    {
+      label: "전체설비",
+      count: stats.total,
+      status: "total",
+      color: "text-blue-400",
+      bg: "bg-blue-500/10",
+      border: "border-blue-500/30",
+      icon: <Inbox className="h-5 w-5" />,
+    },
+    {
+      label: "가동중",
+      count: stats.running,
+      status: "running",
+      color: "text-emerald-400",
+      bg: "bg-emerald-500/10",
+      border: "border-emerald-500/30",
+      icon: <Zap className="h-5 w-5" />,
+    },
+    {
+      label: "대기",
+      count: stats.idle,
+      status: "idle",
+      color: "text-amber-400",
+      bg: "bg-amber-500/10",
+      border: "border-amber-500/30",
+      icon: <Pause className="h-5 w-5" />,
+    },
+    {
+      label: "점검/수리",
+      count: stats.maintenance,
+      status: "maintenance",
+      color: "text-red-400",
+      bg: "bg-red-500/10",
+      border: "border-red-500/30",
+      icon: <Wrench className="h-5 w-5" />,
+    },
+    {
+      label: "비가동",
+      count: stats.off + stats.unknown,
+      status: "off",
+      color: "text-gray-400",
+      bg: "bg-gray-500/10",
+      border: "border-gray-500/30",
+      icon: <Power className="h-5 w-5" />,
+    },
+  ];
+
+  /* ── 필터 pill ── */
+  const filterPills: { label: string; value: OperationStatus | "all"; color: string }[] = [
+    { label: "전체", value: "all", color: "bg-blue-500/20 text-blue-300 hover:bg-blue-500/30" },
+    { label: "가동중", value: "running", color: "bg-emerald-500/20 text-emerald-300 hover:bg-emerald-500/30" },
+    { label: "대기", value: "idle", color: "bg-amber-500/20 text-amber-300 hover:bg-amber-500/30" },
+    { label: "점검/수리", value: "maintenance", color: "bg-red-500/20 text-red-300 hover:bg-red-500/30" },
+    { label: "비가동", value: "off", color: "bg-gray-500/20 text-gray-300 hover:bg-gray-500/30" },
+  ];
+
+  /* ── 포맷 ── */
+  const formatTime = (d: Date) =>
+    d.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
+  const formatDate = (d: Date) =>
+    d.toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", weekday: "short" });
+
+  /* ────────────── 렌더 ────────────── */
+
+  return (
+    <div className="min-h-screen bg-gray-950 text-white p-4 md:p-6 space-y-5">
+      {/* ── 헤더 ── */}
+      <header className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <div className="h-8 w-1.5 rounded-full bg-amber-400" />
+          <h1 className="text-2xl font-bold tracking-tight">설비운영모니터링</h1>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* 현재 시간 */}
+          <div className="flex items-center gap-2 text-sm text-gray-400 bg-gray-800/60 rounded-lg px-3 py-1.5 border border-gray-700/50">
+            <Clock className="h-4 w-4" />
+            <span className="font-mono">{formatDate(currentTime)}</span>
+            <span className="font-mono text-white">{formatTime(currentTime)}</span>
+          </div>
+
+          {/* 자동갱신 토글 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn(
+              "border-gray-700 text-xs gap-1.5",
+              autoRefresh
+                ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20"
+                : "bg-gray-800 text-gray-400 hover:bg-gray-700"
+            )}
+            onClick={() => setAutoRefresh((v) => !v)}
+          >
+            <span className={cn("h-1.5 w-1.5 rounded-full", autoRefresh ? "bg-emerald-400 animate-pulse" : "bg-gray-600")} />
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+
+          {/* 새로고침 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-gray-700 bg-gray-800 text-gray-300 hover:bg-gray-700 gap-1.5"
+            onClick={fetchData}
+            disabled={loading}
+          >
+            <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+            새로고침
+          </Button>
+        </div>
+      </header>
+
+      {/* ── 요약 카드 5개 ── */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
+        {summaryCards.map((card) => (
+          <button
+            key={card.label}
+            onClick={() =>
+              setFilterStatus(card.status === "total" ? "all" : (card.status as OperationStatus))
+            }
+            className={cn(
+              "relative flex items-center gap-3 rounded-xl border px-4 py-3 transition-all hover:scale-[1.02]",
+              card.bg,
+              card.border,
+              "hover:shadow-lg"
+            )}
+          >
+            <div className={cn("flex items-center justify-center rounded-lg p-2", card.bg, card.color)}>
+              {card.icon}
+            </div>
+            <div className="text-left">
+              <p className="text-xs text-gray-500">{card.label}</p>
+              <p className={cn("text-2xl font-bold tabular-nums", card.color)}>{card.count}</p>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {/* ── 필터 pill ── */}
+      <div className="flex flex-wrap gap-2">
+        {filterPills.map((pill) => (
+          <button
+            key={pill.value}
+            onClick={() => setFilterStatus(pill.value)}
+            className={cn(
+              "rounded-full px-4 py-1.5 text-sm font-medium transition-all",
+              filterStatus === pill.value
+                ? cn(pill.color, "ring-1 ring-white/20")
+                : "bg-gray-800/60 text-gray-500 hover:text-gray-300 hover:bg-gray-800"
+            )}
+          >
+            {pill.label}
+          </button>
+        ))}
+        <span className="ml-auto text-sm text-gray-600 self-center">
+          {filteredEquipments.length}대 표시
+        </span>
+      </div>
+
+      {/* ── 로딩 ── */}
+      {loading && equipments.length === 0 && (
+        <div className="flex items-center justify-center py-20">
+          <Loader2 className="h-8 w-8 animate-spin text-gray-600" />
+          <span className="ml-3 text-gray-500">설비 데이터를 불러오는 중...</span>
+        </div>
+      )}
+
+      {/* ── 데이터 없음 ── */}
+      {!loading && equipments.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-gray-600">
+          <Inbox className="h-12 w-12 mb-3" />
+          <p className="text-lg">등록된 설비가 없습니다.</p>
+        </div>
+      )}
+
+      {/* ── 설비 카드 그리드 ── */}
+      {filteredEquipments.length > 0 && (
+        <div
+          className="grid gap-4"
+          style={{ gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))" }}
+        >
+          {filteredEquipments.map((eq) => {
+            const status = resolveStatus(eq.operation_status);
+            const cfg = STATUS_MAP[status];
+            const utilization = getUtilization(eq);
+            const eqWIs = wiMap[eq.id] ?? [];
+
+            return (
+              <div
+                key={eq.id}
+                className={cn(
+                  "relative overflow-hidden rounded-xl border bg-gray-900/80 backdrop-blur transition-all hover:shadow-lg",
+                  cfg.border,
+                  cfg.cardGlow
+                )}
+              >
+                {/* 좌측 색상 바 */}
+                <div className={cn("absolute left-0 top-0 bottom-0 w-1 rounded-l-xl", cfg.bar)} />
+
+                {/* 상단: 설비명 + 상태 배지 */}
+                <div className="flex items-start justify-between px-4 pt-3 pb-2 pl-5">
+                  <div className="min-w-0 flex-1">
+                    <h3 className="text-base font-semibold text-white truncate">
+                      {eq.equipment_name || "이름 없음"}
+                    </h3>
+                    <p className="text-xs text-gray-500 mt-0.5 truncate">
+                      {eq.equipment_type || "-"} · {eq.installation_location || "-"}
+                    </p>
+                  </div>
+                  <Badge
+                    className={cn(
+                      "ml-2 shrink-0 border-0 gap-1 text-xs font-medium",
+                      cfg.badgeBg,
+                      cfg.badgeText
+                    )}
+                  >
+                    {cfg.icon}
+                    {cfg.label}
+                  </Badge>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 정보 그리드 */}
+                <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 px-4 pl-5 py-2.5 text-sm">
+                  <div>
+                    <span className="text-gray-500 text-xs">금일 가동시간</span>
+                    <p className="text-white font-medium">-</p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">생산수량</span>
+                    <p className="text-white font-medium">-</p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">작업자</span>
+                    <p className="text-white font-medium">
+                      {eqWIs.length > 0 && eqWIs[0].worker_name
+                        ? eqWIs[0].worker_name
+                        : "-"}
+                    </p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">설비코드</span>
+                    <p className="text-white font-medium truncate">{eq.equipment_code || "-"}</p>
+                  </div>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 가동률 프로그레스 */}
+                <div className="px-4 pl-5 py-2.5">
+                  <div className="flex items-center justify-between text-xs mb-1.5">
+                    <span className="text-gray-500">가동률</span>
+                    <span className={cn("font-bold tabular-nums", utilization !== null ? cfg.color : "text-gray-600")}>
+                      {utilization !== null ? `${utilization}%` : "-"}
+                    </span>
+                  </div>
+                  <div className="h-2 w-full rounded-full bg-gray-800 overflow-hidden">
+                    {utilization !== null && (
+                      <div
+                        className={cn("h-full rounded-full transition-all duration-700", cfg.bar)}
+                        style={{ width: `${utilization}%` }}
+                      />
+                    )}
+                  </div>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 현재 작업지시 */}
+                <div className="px-4 pl-5 py-2.5">
+                  <p className="text-xs text-gray-500 mb-1">현재 작업지시</p>
+                  {eqWIs.length > 0 ? (
+                    <div className="space-y-1">
+                      {eqWIs.slice(0, 2).map((wi) => (
+                        <div key={wi.id} className="flex items-center gap-2 text-sm">
+                          <span className="text-blue-400 font-mono text-xs shrink-0">
+                            {wi.instruction_number || "-"}
+                          </span>
+                          <span className="text-gray-300 truncate">
+                            {wi.item_name || "-"}
+                          </span>
+                        </div>
+                      ))}
+                      {eqWIs.length > 2 && (
+                        <p className="text-xs text-gray-600">+{eqWIs.length - 2}건 더</p>
+                      )}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-gray-600 italic">배정된 작업 없음</p>
+                  )}
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 센서 데이터 (PLC 미연동) */}
+                <div className="flex items-center gap-4 px-4 pl-5 py-2.5 text-xs">
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">온도</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">압력</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">RPM</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* 필터 결과 없음 */}
+      {!loading && equipments.length > 0 && filteredEquipments.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 text-gray-600">
+          <Inbox className="h-10 w-10 mb-2" />
+          <p>해당 상태의 설비가 없습니다.</p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_16/monitoring/production/page.tsx b/frontend/app/(main)/COMPANY_16/monitoring/production/page.tsx
new file mode 100644
index 00000000..fb8aa24b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_16/monitoring/production/page.tsx
@@ -0,0 +1,504 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Timer,
+  CheckCircle2,
+  AlertTriangle,
+  TrendingUp,
+  Play,
+  Pause,
+} from "lucide-react";
+
+// ─── 타입 정의 ─────────────────────────────────────────────
+interface WorkInstructionDetail {
+  item_name?: string;
+  spec?: string;
+  customer_name?: string;
+}
+
+interface WorkInstruction {
+  id: string;
+  wi_id?: string;
+  work_instruction_no: string;
+  status: string; // 일반 / 긴급
+  qty: number;
+  completed_qty: number;
+  start_date: string | null;
+  end_date: string | null;
+  worker: string | null;
+  equipment_id: string | null;
+  equipment_name?: string | null;
+  details?: WorkInstructionDetail[];
+}
+
+interface ProcessStep {
+  wo_id: string;
+  process_name: string;
+  status: string; // acceptable / completed
+  seq_no: number;
+}
+
+type FilterTab = "전체" | "대기" | "진행중" | "완료";
+
+// ─── 유틸리티 ──────────────────────────────────────────────
+function formatDate(dateStr: string | null | undefined): string {
+  if (!dateStr) return "-";
+  try {
+    const d = new Date(dateStr);
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+  } catch {
+    return dateStr;
+  }
+}
+
+function formatTime(date: Date): string {
+  const h = String(date.getHours()).padStart(2, "0");
+  const m = String(date.getMinutes()).padStart(2, "0");
+  const s = String(date.getSeconds()).padStart(2, "0");
+  return `${h}:${m}:${s}`;
+}
+
+// 작업지시별 공정현황으로 진행상태 계산
+function computeProgress(
+  wiId: string,
+  processMap: Map<string, ProcessStep[]>
+): "대기" | "진행중" | "완료" {
+  const steps = processMap.get(wiId);
+  if (!steps || steps.length === 0) return "대기";
+  const completedCount = steps.filter((s) => s.status === "completed").length;
+  if (completedCount === 0) return "대기";
+  if (completedCount === steps.length) return "완료";
+  return "진행중";
+}
+
+// ─── 메인 컴포넌트 ────────────────────────────────────────
+export default function ProductionMonitoringPage() {
+  const [workInstructions, setWorkInstructions] = useState<WorkInstruction[]>([]);
+  const [processMap, setProcessMap] = useState<Map<string, ProcessStep[]>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [activeTab, setActiveTab] = useState<FilterTab>("전체");
+
+  // ─── 실시간 시계 ─────────────────────────────────────────
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // ─── 데이터 로드 ─────────────────────────────────────────
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+
+      // 작업지시 목록 조회
+      const wiRes = await apiClient.get("/work-instruction/list");
+      const wiRaw: WorkInstruction[] =
+        wiRes.data?.success && Array.isArray(wiRes.data.data) ? wiRes.data.data : [];
+      // 작업지시번호 기준 중복 제거 (디테일 JOIN으로 중복 발생 가능)
+      const seen = new Set<string>();
+      const wiData = wiRaw.filter((wi) => {
+        const key = wi.work_instruction_no || wi.id;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+      setWorkInstructions(wiData);
+
+      // 공정현황 조회 (실패해도 작업지시는 표시)
+      try {
+        const procRes = await apiClient.post("/table-management/tables/work_order_process/data", {
+          page: 1, size: 1000, autoFilter: true,
+        });
+        const rows: ProcessStep[] = procRes.data?.data?.data || procRes.data?.data?.rows || procRes.data?.data || [];
+
+        // wo_id별로 그룹핑 후, 같은 seq_no+process_name은 1건으로 합침 (배치 실행 이력 중복 제거)
+        const rawMap = new Map<string, ProcessStep[]>();
+        rows.forEach((row) => {
+          const key = String(row.wo_id);
+          if (!rawMap.has(key)) rawMap.set(key, []);
+          rawMap.get(key)!.push(row);
+        });
+
+        const map = new Map<string, ProcessStep[]>();
+        rawMap.forEach((steps, woId) => {
+          // seq_no + process_name 기준으로 대표 1건만 (completed 우선)
+          const grouped = new Map<string, ProcessStep>();
+          for (const s of steps) {
+            const gk = `${s.seq_no}_${s.process_name}`;
+            const existing = grouped.get(gk);
+            if (!existing || (s.status === "completed" && existing.status !== "completed")) {
+              grouped.set(gk, s);
+            }
+          }
+          const deduped = Array.from(grouped.values()).sort((a, b) => (a.seq_no ?? 0) - (b.seq_no ?? 0));
+          map.set(woId, deduped);
+        });
+        setProcessMap(map);
+      } catch {
+        // 공정현황 조회 실패 → 빈 맵 유지
+        setProcessMap(new Map());
+      }
+    } catch (err) {
+      console.error("생산모니터링 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // ─── 자동갱신 (30초) ─────────────────────────────────────
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const timer = setInterval(fetchData, 30000);
+    return () => clearInterval(timer);
+  }, [autoRefresh, fetchData]);
+
+  // ─── 통계 계산 ───────────────────────────────────────────
+  const stats = useMemo(() => {
+    let waiting = 0;
+    let inProgress = 0;
+    let completed = 0;
+    let totalQty = 0;
+    let completedQty = 0;
+
+    workInstructions.forEach((wi) => {
+      const progress = computeProgress(wi.wi_id || wi.id, processMap);
+      if (progress === "대기") waiting++;
+      else if (progress === "진행중") inProgress++;
+      else completed++;
+      totalQty += Number((wi as any).total_qty || wi.qty || 0);
+      completedQty += Number(wi.completed_qty) || 0;
+    });
+
+    const achievementRate = totalQty > 0 ? Math.round((completedQty / totalQty) * 100) : 0;
+
+    return { waiting, inProgress, completed, achievementRate };
+  }, [workInstructions, processMap]);
+
+  // ─── 필터링된 작업 목록 ──────────────────────────────────
+  const filteredInstructions = useMemo(() => {
+    return workInstructions.filter((wi) => {
+      if (activeTab === "전체") return true;
+      const progress = computeProgress(wi.wi_id || wi.id, processMap);
+      return progress === activeTab;
+    });
+  }, [workInstructions, processMap, activeTab]);
+
+  // ─── 렌더링 ──────────────────────────────────────────────
+  return (
+    <div className="flex flex-col h-full min-h-0 bg-background p-4 gap-4 overflow-auto">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between flex-shrink-0">
+        <h1 className="text-2xl font-bold text-foreground">생산모니터링</h1>
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5 text-muted-foreground text-sm">
+            <Clock className="w-4 h-4" />
+            <span className="font-mono">{formatTime(currentTime)}</span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={loading}
+            className="gap-1.5"
+          >
+            <RefreshCw className={cn("w-4 h-4", loading && "animate-spin")} />
+            새로고침
+          </Button>
+          <Button
+            variant={autoRefresh ? "default" : "outline"}
+            size="sm"
+            onClick={() => setAutoRefresh(!autoRefresh)}
+            className="gap-1.5"
+          >
+            {autoRefresh ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+        </div>
+      </div>
+
+      {/* 요약 카드 */}
+      <div className="grid grid-cols-4 gap-4 flex-shrink-0">
+        <SummaryCard
+          icon={<Timer className="w-5 h-5" />}
+          label="대기중"
+          value={stats.waiting}
+          colorClass="text-amber-500 bg-amber-500/10 border-amber-500/20"
+        />
+        <SummaryCard
+          icon={<Loader2 className="w-5 h-5" />}
+          label="진행중"
+          value={stats.inProgress}
+          colorClass="text-blue-500 bg-blue-500/10 border-blue-500/20"
+        />
+        <SummaryCard
+          icon={<CheckCircle2 className="w-5 h-5" />}
+          label="완료"
+          value={stats.completed}
+          colorClass="text-emerald-500 bg-emerald-500/10 border-emerald-500/20"
+        />
+        <SummaryCard
+          icon={<TrendingUp className="w-5 h-5" />}
+          label="달성율"
+          value={`${stats.achievementRate}%`}
+          colorClass="text-purple-500 bg-purple-500/10 border-purple-500/20"
+        />
+      </div>
+
+      {/* 탭 필터 */}
+      <div className="flex items-center gap-2 flex-shrink-0">
+        {(["전체", "대기", "진행중", "완료"] as FilterTab[]).map((tab) => (
+          <Button
+            key={tab}
+            variant={activeTab === tab ? "default" : "outline"}
+            size="sm"
+            onClick={() => setActiveTab(tab)}
+            className={cn(
+              "min-w-[64px]",
+              activeTab === tab && tab === "대기" && "bg-amber-500 hover:bg-amber-600 text-white",
+              activeTab === tab && tab === "진행중" && "bg-blue-500 hover:bg-blue-600 text-white",
+              activeTab === tab && tab === "완료" && "bg-emerald-500 hover:bg-emerald-600 text-white"
+            )}
+          >
+            {tab}
+            {tab === "전체" && ` (${workInstructions.length})`}
+            {tab === "대기" && ` (${stats.waiting})`}
+            {tab === "진행중" && ` (${stats.inProgress})`}
+            {tab === "완료" && ` (${stats.completed})`}
+          </Button>
+        ))}
+      </div>
+
+      {/* 로딩 상태 */}
+      {loading && workInstructions.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <Loader2 className="w-10 h-10 animate-spin mb-3" />
+          <span className="text-sm">데이터를 불러오는 중입니다...</span>
+        </div>
+      )}
+
+      {/* 빈 상태 */}
+      {!loading && filteredInstructions.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <Inbox className="w-12 h-12 mb-3" />
+          <span className="text-sm">
+            {activeTab === "전체"
+              ? "등록된 작업지시가 없습니다."
+              : `"${activeTab}" 상태의 작업지시가 없습니다.`}
+          </span>
+        </div>
+      )}
+
+      {/* 작업 카드 그리드 */}
+      {filteredInstructions.length > 0 && (
+        <div
+          className="grid gap-4 flex-1"
+          style={{ gridTemplateColumns: "repeat(auto-fill, minmax(420px, 1fr))" }}
+        >
+          {filteredInstructions.map((wi, idx) => (
+            <WorkCard
+              key={wi.id || `wi-${idx}`}
+              instruction={wi}
+              steps={processMap.get(wi.wi_id || wi.id) || []}
+              progress={computeProgress(wi.wi_id || wi.id, processMap)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── 요약 카드 ─────────────────────────────────────────────
+function SummaryCard({
+  icon,
+  label,
+  value,
+  colorClass,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: number | string;
+  colorClass: string;
+}) {
+  return (
+    <div className="bg-card border rounded-lg p-4 flex items-center gap-4">
+      <div className={cn("p-2.5 rounded-lg border", colorClass)}>{icon}</div>
+      <div className="flex flex-col">
+        <span className="text-xs text-muted-foreground">{label}</span>
+        <span className="text-2xl font-bold text-foreground">{value}</span>
+      </div>
+    </div>
+  );
+}
+
+// ─── 작업 카드 ─────────────────────────────────────────────
+function WorkCard({
+  instruction: wi,
+  steps,
+  progress,
+}: {
+  instruction: WorkInstruction;
+  steps: ProcessStep[];
+  progress: "대기" | "진행중" | "완료";
+}) {
+  // API 응답은 flat 구조 (details 배열 아님)
+  const itemName = (wi as any).item_name || "-";
+  const spec = (wi as any).item_spec || "-";
+  const customerName = (wi as any).customer_name || "-";
+
+  // 진척률 (total_qty 또는 qty)
+  const totalQty = Number((wi as any).total_qty || wi.qty || 0);
+  const completedQty = Number(wi.completed_qty || 0);
+  const progressPercent = totalQty > 0 ? Math.min(100, Math.round((completedQty / totalQty) * 100)) : 0;
+
+  // 공정 현황 계산
+  const completedSteps = steps.filter((s) => s.status === "completed").length;
+  const currentStep = steps.find((s) => s.status !== "completed");
+
+  // 프로그레스바 색상
+  const barColor =
+    progressPercent >= 100
+      ? "bg-emerald-500"
+      : progressPercent >= 50
+        ? "bg-blue-500"
+        : "bg-amber-500";
+
+  // 상태 배지 스타일
+  const statusBadge: Record<string, string> = {
+    "대기": "bg-amber-500/10 text-amber-500 border-amber-500/30",
+    "진행중": "bg-blue-500/10 text-blue-500 border-blue-500/30",
+    "완료": "bg-emerald-500/10 text-emerald-500 border-emerald-500/30",
+  };
+
+  const isUrgent = wi.status === "긴급";
+
+  return (
+    <div className="bg-card border rounded-lg overflow-hidden flex flex-col">
+      {/* 카드 헤더 */}
+      <div className="flex items-center justify-between px-4 py-3 border-b bg-muted/30">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-sm text-foreground">
+            {wi.work_instruction_no}
+          </span>
+          {isUrgent && (
+            <Badge
+              variant="outline"
+              className="bg-red-500/10 text-red-500 border-red-500/30 text-xs gap-1"
+            >
+              <AlertTriangle className="w-3 h-3" />
+              긴급
+            </Badge>
+          )}
+        </div>
+        <Badge variant="outline" className={cn("text-xs", statusBadge[progress])}>
+          {progress}
+        </Badge>
+      </div>
+
+      {/* 카드 본문 - 정보 */}
+      <div className="px-4 py-3 grid grid-cols-2 gap-x-4 gap-y-1.5 text-sm border-b">
+        <InfoRow label="품목명" value={itemName} />
+        <InfoRow label="규격" value={spec} />
+        <InfoRow label="거래처" value={customerName} />
+        <InfoRow label="작업자" value={wi.worker || "-"} />
+        <InfoRow label="납기일" value={formatDate(wi.end_date)} />
+        <InfoRow label="설비" value={wi.equipment_name || wi.equipment_id || "-"} />
+      </div>
+
+      {/* 공정현황 */}
+      <div className="px-4 py-3 border-b">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs text-muted-foreground font-medium">공정현황</span>
+          {steps.length > 0 && (
+            <span className="text-xs text-muted-foreground">
+              완료 {completedSteps}/{steps.length}
+              {currentStep && (
+                <span>
+                  {" "}
+                  · 현재: <span className="text-blue-400">{currentStep.process_name}</span>
+                </span>
+              )}
+            </span>
+          )}
+        </div>
+        {steps.length > 0 ? (
+          <div className="flex gap-1 flex-wrap">
+            {steps.map((step, idx) => {
+              const isDone = step.status === "completed";
+              const isCurrent = !isDone && idx === completedSteps;
+              return (
+                <span
+                  key={`${step.wo_id}-${step.seq_no}-${idx}`}
+                  className={cn(
+                    "px-2 py-0.5 rounded text-xs font-medium transition-all",
+                    isDone && "bg-emerald-500/20 text-emerald-400",
+                    isCurrent && "bg-blue-500/20 text-blue-400 animate-pulse",
+                    !isDone && !isCurrent && "bg-muted text-muted-foreground"
+                  )}
+                >
+                  {step.process_name}
+                </span>
+              );
+            })}
+          </div>
+        ) : (
+          <span className="text-xs text-muted-foreground">공정 정보 없음</span>
+        )}
+      </div>
+
+      {/* 프로그레스바 */}
+      <div className="px-4 py-3">
+        <div className="flex items-center justify-between mb-1.5">
+          <span className="text-xs text-muted-foreground">
+            {completedQty} / {totalQty}
+          </span>
+          <span
+            className={cn(
+              "text-xs font-bold",
+              progressPercent >= 100
+                ? "text-emerald-500"
+                : progressPercent >= 50
+                  ? "text-blue-500"
+                  : "text-amber-500"
+            )}
+          >
+            {progressPercent}%
+          </span>
+        </div>
+        <div className="w-full h-2.5 bg-muted rounded-full overflow-hidden">
+          <div
+            className={cn("h-full rounded-full transition-all duration-500", barColor)}
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── 정보 행 ───────────────────────────────────────────────
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center gap-1.5 min-w-0">
+      <span className="text-muted-foreground shrink-0">{label}:</span>
+      <span className="text-foreground truncate">{value}</span>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_16/monitoring/quality/page.tsx b/frontend/app/(main)/COMPANY_16/monitoring/quality/page.tsx
new file mode 100644
index 00000000..b0135bbe
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_16/monitoring/quality/page.tsx
@@ -0,0 +1,512 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Search,
+  ClipboardCheck,
+} from "lucide-react";
+
+/* ───── 타입 ───── */
+interface ProcessRow {
+  id: number;
+  wo_id: number;
+  process_code: string;
+  process_name: string;
+  status: string;
+  plan_qty: number;
+  input_qty: number;
+  good_qty: number;
+  defect_qty: number;
+  started_at: string | null;
+  completed_at: string | null;
+  worker_name: string;
+}
+
+interface InspectionRow {
+  no: number;
+  inspectionNo: string;
+  inspectionType: string;
+  itemName: string;
+  spec: string;
+  inspectionQty: number;
+  goodQty: number;
+  defectQty: number;
+  defectRate: number;
+  result: "합격" | "불합격" | "대기";
+  inspectorName: string;
+  inspectedAt: string;
+  remark: string;
+}
+
+/* ───── 탭 정의 ───── */
+const TABS = [
+  { key: "all", label: "전체" },
+  { key: "process", label: "공정검사" },
+  { key: "incoming", label: "입고검사" },
+  { key: "shipping", label: "출하검사" },
+] as const;
+type TabKey = (typeof TABS)[number]["key"];
+
+/* ───── 유틸 ───── */
+const fmt = (n: number) => n.toLocaleString("ko-KR");
+const pct = (n: number) =>
+  `${n.toFixed(1)}%`;
+
+const badgeVariant = (
+  type: "result" | "type" | "defectRate",
+  value: string | number,
+) => {
+  if (type === "result") {
+    if (value === "합격")
+      return "bg-emerald-100 text-emerald-700 border-emerald-200";
+    if (value === "불합격") return "bg-red-100 text-red-700 border-red-200";
+    return "bg-amber-100 text-amber-700 border-amber-200";
+  }
+  if (type === "type") {
+    if (value === "공정검사")
+      return "bg-purple-100 text-purple-700 border-purple-200";
+    if (value === "입고검사") return "bg-blue-100 text-blue-700 border-blue-200";
+    return "bg-emerald-100 text-emerald-700 border-emerald-200";
+  }
+  // defectRate
+  const rate = typeof value === "number" ? value : parseFloat(String(value));
+  if (rate > 3) return "text-red-600 font-semibold";
+  if (rate >= 1) return "text-amber-600 font-semibold";
+  return "text-emerald-600";
+};
+
+/* ───── 컴포넌트 ───── */
+export default function QualityMonitoringPage() {
+  const [processData, setProcessData] = useState<ProcessRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [activeTab, setActiveTab] = useState<TabKey>("all");
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  /* ───── 시계 ───── */
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* ───── 데이터 조회 ───── */
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await apiClient.post(
+        "/table-management/tables/work_order_process/data",
+        { autoFilter: true },
+      );
+      const rows: ProcessRow[] = res.data?.data?.rows ?? res.data?.rows ?? [];
+      setProcessData(rows);
+    } catch (err) {
+      console.error("품질점검현황 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ───── 자동 갱신 ───── */
+  useEffect(() => {
+    if (autoRefresh) {
+      intervalRef.current = setInterval(fetchData, 30_000);
+    }
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [autoRefresh, fetchData]);
+
+  /* ───── 검사 행 변환 ───── */
+  const inspectionRows: InspectionRow[] = useMemo(() => {
+    const today = new Date().toISOString().slice(0, 10);
+
+    return processData
+      .filter((r) => {
+        // 금일 데이터만
+        const dt = r.completed_at || r.started_at || "";
+        return dt.slice(0, 10) === today;
+      })
+      .map((r, idx) => {
+        const inspQty = r.input_qty || r.plan_qty || 0;
+        const goodQty = r.good_qty ?? 0;
+        const defectQty = r.defect_qty ?? 0;
+        const defectRate = inspQty > 0 ? (defectQty / inspQty) * 100 : 0;
+        const result: InspectionRow["result"] =
+          r.status !== "completed"
+            ? "대기"
+            : defectQty > 0
+              ? "불합격"
+              : "합격";
+
+        return {
+          no: idx + 1,
+          inspectionNo: `QC-${String(r.id).padStart(8, "0").slice(0, 8)}`,
+          inspectionType: "공정검사",
+          itemName: r.process_name || "-",
+          spec: r.process_code || "-",
+          inspectionQty: inspQty,
+          goodQty,
+          defectQty,
+          defectRate,
+          result,
+          inspectorName: r.worker_name || "-",
+          inspectedAt: r.completed_at || r.started_at || "-",
+          remark: "",
+        };
+      });
+  }, [processData]);
+
+  /* ───── 탭 필터링 ───── */
+  const filteredRows = useMemo(() => {
+    if (activeTab === "all" || activeTab === "process") return inspectionRows;
+    // 입고/출하는 데이터 없음
+    return [];
+  }, [activeTab, inspectionRows]);
+
+  /* ───── 요약 통계 ───── */
+  const summary = useMemo(() => {
+    const total = inspectionRows.length;
+    const passed = inspectionRows.filter((r) => r.result === "합격").length;
+    const failed = inspectionRows.filter((r) => r.result === "불합격").length;
+    const pending = inspectionRows.filter((r) => r.result === "대기").length;
+    const passRate = total > 0 ? (passed / total) * 100 : 0;
+    return { total, passed, failed, pending, passRate };
+  }, [inspectionRows]);
+
+  /* ───── 요약 카드 정의 ───── */
+  const summaryCards = [
+    {
+      label: "금일 검사건수",
+      value: fmt(summary.total),
+      sub: "건",
+      color: "from-slate-500 to-slate-600",
+      textColor: "text-white",
+    },
+    {
+      label: "합격",
+      value: fmt(summary.passed),
+      sub: "건",
+      color: "from-emerald-500 to-emerald-600",
+      textColor: "text-white",
+    },
+    {
+      label: "불합격",
+      value: fmt(summary.failed),
+      sub: "건",
+      color: "from-red-500 to-red-600",
+      textColor: "text-white",
+    },
+    {
+      label: "검사대기",
+      value: fmt(summary.pending),
+      sub: "건",
+      color: "from-amber-500 to-amber-600",
+      textColor: "text-white",
+    },
+    {
+      label: "합격률",
+      value: pct(summary.passRate),
+      sub: "",
+      color: "from-purple-500 to-purple-600",
+      textColor: "text-white",
+    },
+  ];
+
+  /* ───── 렌더링 ───── */
+  return (
+    <div className="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
+      {/* ── 헤더 ── */}
+      <div className="flex items-center justify-between px-6 py-4 bg-white dark:bg-gray-800 border-b">
+        <div className="flex items-center gap-3">
+          <ClipboardCheck className="h-6 w-6 text-emerald-600" />
+          <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+            품질점검현황{" "}
+            <span className="text-emerald-600">모니터링</span>
+          </h1>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            <Clock className="h-4 w-4" />
+            <span className="font-mono">
+              {currentTime.toLocaleString("ko-KR", {
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit",
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+                hour12: false,
+              })}
+            </span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={loading}
+          >
+            {loading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+            <span className="ml-1">새로고침</span>
+          </Button>
+          <Button
+            variant={autoRefresh ? "default" : "outline"}
+            size="sm"
+            onClick={() => setAutoRefresh((p) => !p)}
+            className={cn(
+              autoRefresh &&
+                "bg-emerald-600 hover:bg-emerald-700 text-white",
+            )}
+          >
+            <Clock className="h-4 w-4 mr-1" />
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+        </div>
+      </div>
+
+      {/* ── 본문 ── */}
+      <div className="flex-1 overflow-auto p-6 space-y-6">
+        {/* 요약 카드 */}
+        <div className="grid grid-cols-5 gap-4">
+          {summaryCards.map((card) => (
+            <div
+              key={card.label}
+              className={cn(
+                "rounded-xl bg-gradient-to-br p-5 shadow-md",
+                card.color,
+              )}
+            >
+              <p className="text-sm font-medium text-white/80">
+                {card.label}
+              </p>
+              <p className={cn("mt-2 text-3xl font-bold", card.textColor)}>
+                {card.value}
+                {card.sub && (
+                  <span className="ml-1 text-base font-normal text-white/70">
+                    {card.sub}
+                  </span>
+                )}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* 검사유형 탭 */}
+        <div className="flex items-center gap-2">
+          {TABS.map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={cn(
+                "px-4 py-1.5 rounded-full text-sm font-medium transition-colors",
+                activeTab === tab.key
+                  ? "bg-emerald-600 text-white shadow"
+                  : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border",
+              )}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* 테이블 영역 */}
+        <div className="bg-white dark:bg-gray-800 rounded-xl shadow border overflow-hidden">
+          {/* 입고/출하 준비중 */}
+          {(activeTab === "incoming" || activeTab === "shipping") ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Search className="h-12 w-12 mb-4 opacity-40" />
+              <p className="text-lg font-medium">준비중</p>
+              <p className="text-sm mt-1">
+                {activeTab === "incoming" ? "입고검사" : "출하검사"} 데이터는
+                아직 지원되지 않습니다.
+              </p>
+            </div>
+          ) : loading && filteredRows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Loader2 className="h-10 w-10 animate-spin mb-4" />
+              <p>데이터를 불러오는 중...</p>
+            </div>
+          ) : filteredRows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Inbox className="h-12 w-12 mb-4 opacity-40" />
+              <p className="text-lg font-medium">금일 검사 데이터가 없습니다</p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow className="bg-gray-50 dark:bg-gray-700/50">
+                    <TableHead className="w-[50px] text-center">No</TableHead>
+                    <TableHead className="min-w-[120px]">검사번호</TableHead>
+                    <TableHead className="min-w-[90px] text-center">
+                      검사유형
+                    </TableHead>
+                    <TableHead className="min-w-[140px]">품목명</TableHead>
+                    <TableHead className="min-w-[100px]">규격</TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      검사수량
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      합격수량
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      불합격수량
+                    </TableHead>
+                    <TableHead className="min-w-[70px] text-right">
+                      불량율
+                    </TableHead>
+                    <TableHead className="min-w-[160px] text-center">
+                      검사결과
+                    </TableHead>
+                    <TableHead className="min-w-[70px] text-center">
+                      판정
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-center">
+                      검사자
+                    </TableHead>
+                    <TableHead className="min-w-[150px]">검사일시</TableHead>
+                    <TableHead className="min-w-[100px]">비고</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredRows.map((row) => {
+                    const goodPct =
+                      row.inspectionQty > 0
+                        ? (row.goodQty / row.inspectionQty) * 100
+                        : 0;
+                    const defectPct =
+                      row.inspectionQty > 0
+                        ? (row.defectQty / row.inspectionQty) * 100
+                        : 0;
+
+                    return (
+                      <TableRow
+                        key={row.no}
+                        className="hover:bg-gray-50 dark:hover:bg-gray-700/30"
+                      >
+                        <TableCell className="text-center text-sm text-gray-500">
+                          {row.no}
+                        </TableCell>
+                        <TableCell className="font-mono text-sm">
+                          {row.inspectionNo}
+                        </TableCell>
+                        <TableCell className="text-center">
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-xs",
+                              badgeVariant("type", row.inspectionType),
+                            )}
+                          >
+                            {row.inspectionType}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-sm font-medium">
+                          {row.itemName}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-500">
+                          {row.spec}
+                        </TableCell>
+                        <TableCell className="text-right text-sm">
+                          {fmt(row.inspectionQty)}
+                        </TableCell>
+                        <TableCell className="text-right text-sm text-emerald-600">
+                          {fmt(row.goodQty)}
+                        </TableCell>
+                        <TableCell className="text-right text-sm text-red-600">
+                          {fmt(row.defectQty)}
+                        </TableCell>
+                        <TableCell
+                          className={cn(
+                            "text-right text-sm",
+                            badgeVariant("defectRate", row.defectRate),
+                          )}
+                        >
+                          {pct(row.defectRate)}
+                        </TableCell>
+                        {/* 검사결과 프로그레스바 */}
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <div className="flex-1 h-3 bg-gray-100 dark:bg-gray-600 rounded-full overflow-hidden flex">
+                              <div
+                                className="h-full bg-emerald-500 transition-all"
+                                style={{ width: `${goodPct}%` }}
+                              />
+                              <div
+                                className="h-full bg-red-500 transition-all"
+                                style={{ width: `${defectPct}%` }}
+                              />
+                            </div>
+                            <span className="text-xs text-gray-400 whitespace-nowrap w-[42px] text-right">
+                              {pct(goodPct)}
+                            </span>
+                          </div>
+                        </TableCell>
+                        {/* 판정 배지 */}
+                        <TableCell className="text-center">
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-xs",
+                              badgeVariant("result", row.result),
+                            )}
+                          >
+                            {row.result}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-center text-sm">
+                          {row.inspectorName}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-500">
+                          {row.inspectedAt !== "-"
+                            ? new Date(row.inspectedAt).toLocaleString(
+                                "ko-KR",
+                                {
+                                  month: "2-digit",
+                                  day: "2-digit",
+                                  hour: "2-digit",
+                                  minute: "2-digit",
+                                  hour12: false,
+                                },
+                              )
+                            : "-"}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-400">
+                          {row.remark || "-"}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_16/outsourcing/subcontractor-item/page.tsx b/frontend/app/(main)/COMPANY_16/outsourcing/subcontractor-item/page.tsx
index 929d35c1..ad6622da 100644
--- a/frontend/app/(main)/COMPANY_16/outsourcing/subcontractor-item/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/outsourcing/subcontractor-item/page.tsx
@@ -115,17 +115,22 @@ export default function SubcontractorItemPage() {
   };
 
   const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
-    const cols: EDataTableColumn[] = [];
-    if (ts.isVisible("item_number")) cols.push({ key: "item_number", label: "품번", width: "w-[110px]" });
-    if (ts.isVisible("item_name")) cols.push({ key: "item_name", label: "품명", minWidth: "min-w-[130px]", render: (v) => v || "-" });
-    if (ts.isVisible("size")) cols.push({ key: "size", label: "규격", width: "w-[90px]", render: (v) => v || "-" });
-    if (ts.isVisible("unit")) cols.push({ key: "unit", label: "단위", width: "w-[60px]", render: (v) => v || "-" });
-    if (ts.isVisible("standard_price")) cols.push({ key: "standard_price", label: "기준단가", width: "w-[90px]", align: "right", formatNumber: true });
-    if (ts.isVisible("selling_price")) cols.push({ key: "selling_price", label: "판매가격", width: "w-[90px]", align: "right", formatNumber: true });
-    if (ts.isVisible("currency_code")) cols.push({ key: "currency_code", label: "통화", width: "w-[50px]", render: (v) => v || "-" });
-    if (ts.isVisible("status")) cols.push({ key: "status", label: "상태", width: "w-[60px]", render: (v) => v || "-" });
-    return cols;
-  }, [ts.visibleColumns]); // eslint-disable-line react-hooks/exhaustive-deps
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      item_number: { width: "w-[110px]" },
+      item_name: { minWidth: "min-w-[130px]", render: (v) => v || "-" },
+      size: { width: "w-[90px]", render: (v) => v || "-" },
+      unit: { width: "w-[60px]", render: (v) => v || "-" },
+      standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
+      selling_price: { width: "w-[90px]", align: "right", formatNumber: true },
+      currency_code: { width: "w-[50px]", render: (v) => v || "-" },
+      status: { width: "w-[60px]", render: (v) => v || "-" },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
 
   // 좌측: 품목 조회 (division이 "외주관리"인 품목만 필터링)
   const outsourcingDivisionCode = categoryOptions["division"]?.find(
diff --git a/frontend/app/(main)/COMPANY_16/production/plan-management/page.tsx b/frontend/app/(main)/COMPANY_16/production/plan-management/page.tsx
index 4a0d341a..50be10ee 100644
--- a/frontend/app/(main)/COMPANY_16/production/plan-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/production/plan-management/page.tsx
@@ -139,7 +139,7 @@ export default function ProductionPlanManagementPage() {
   const [stockItems, setStockItems] = useState<StockShortageItem[]>([]);
   const [finishedPlans, setFinishedPlans] = useState<ProductionPlan[]>([]);
   const [semiPlans, setSemiPlans] = useState<ProductionPlan[]>([]);
-  const [equipmentList, setEquipmentList] = useState<{ equipment_id: string; equipment_name: string }[]>([]);
+  const [equipmentList, setEquipmentList] = useState<{ id: string; equipment_code: string; equipment_name: string }[]>([]);
 
   // 선택/토글 상태
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
@@ -659,7 +659,7 @@ export default function ProductionPlanManagementPage() {
     setModalManager((plan as any).manager_name || "");
     setModalWorkOrderNo((plan as any).work_order_no || "");
     setModalRemarks(plan.remarks || "");
-    setModalEquipmentId(plan.equipment_id ? String(plan.equipment_id) : "");
+    setModalEquipmentId((plan as any).equipment_code || (plan.equipment_id ? String(plan.equipment_id) : ""));
     setScheduleModalOpen(true);
   }, []);
 
@@ -674,7 +674,10 @@ export default function ProductionPlanManagementPage() {
         manager_name: modalManager,
         work_order_no: modalWorkOrderNo,
         remarks: modalRemarks,
-        equipment_id: modalEquipmentId ? Number(modalEquipmentId) : null,
+        equipment_code: modalEquipmentId && modalEquipmentId !== "none" ? modalEquipmentId : null,
+        equipment_name: modalEquipmentId && modalEquipmentId !== "none"
+          ? equipmentList.find((eq) => (eq.equipment_code || eq.id) === modalEquipmentId)?.equipment_name || null
+          : null,
       } as any);
       if (res.success) {
         toast.success("생산계획이 수정되었습니다");
@@ -919,9 +922,7 @@ export default function ProductionPlanManagementPage() {
   // 숫자 포맷
   const formatNumber = (num: number | string) => Number(num).toLocaleString();
 
-  // 컬럼 표시 여부
-  const isColVisible = (key: string) => ts.isVisible(key);
-  const orderColSpan = 4 + ORDER_COLUMNS.filter((c) => isColVisible(c.key)).length;
+  // (컬럼 표시는 ts.visibleColumns 순서를 따름)
 
   return (
     <div className={cn("flex flex-col gap-3", isFullscreen ? "fixed inset-0 z-50 bg-background p-4" : "h-full p-3")}>
@@ -1019,6 +1020,38 @@ export default function ProductionPlanManagementPage() {
                     </div>
                   ) : (
                     <div className="overflow-x-auto rounded-md border">
+                      {(() => {
+                        // 디테일 행에서 개별 값을 표시하는 컬럼 매핑
+                        const DETAIL_VALUE_MAP: Record<string, string> = {
+                          total_order_qty: "order_qty",
+                          total_ship_qty: "ship_qty",
+                          total_balance_qty: "balance_qty",
+                        };
+
+                        // 그룹 행에서 특수 렌더링이 필요한 컬럼
+                        const renderGroupCell = (col: { key: string }, item: any) => {
+                          if (col.key === "required_plan_qty") {
+                            return (
+                              <TableCell key={col.key} style={ts.thStyle(col.key)} className={cn("text-[13px] text-right font-bold", Number(item.required_plan_qty) > 0 ? "text-destructive" : "text-success")} onClick={() => toggleItemExpand(item.item_code)}>
+                                {formatNumber(item.required_plan_qty)}
+                              </TableCell>
+                            );
+                          }
+                          if (col.key === "lead_time") {
+                            return (
+                              <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
+                                {Number(item.lead_time) > 0 ? `${item.lead_time}일` : "-"}
+                              </TableCell>
+                            );
+                          }
+                          return (
+                            <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
+                              {formatNumber(item[col.key])}
+                            </TableCell>
+                          );
+                        };
+
+                        return (
                       <Table style={{ tableLayout: "fixed" }}>
                         <TableHeader className="sticky top-0 z-10">
                           <TableRow className="bg-muted hover:bg-muted">
@@ -1028,15 +1061,11 @@ export default function ProductionPlanManagementPage() {
                             <TableHead className="w-[40px]" />
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
-                            {isColVisible("total_order_qty") && <TableHead style={ts.thStyle("total_order_qty")} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">총수주량</TableHead>}
-                            {isColVisible("total_ship_qty") && <TableHead style={ts.thStyle("total_ship_qty")} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출고량</TableHead>}
-                            {isColVisible("total_balance_qty") && <TableHead style={ts.thStyle("total_balance_qty")} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">잔량</TableHead>}
-                            {isColVisible("current_stock") && <TableHead style={ts.thStyle("current_stock")} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">현재고</TableHead>}
-                            {isColVisible("safety_stock") && <TableHead style={ts.thStyle("safety_stock")} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">안전재고</TableHead>}
-                            {isColVisible("existing_plan_qty") && <TableHead style={ts.thStyle("existing_plan_qty")} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기생산계획량</TableHead>}
-                            {isColVisible("in_progress_qty") && <TableHead style={ts.thStyle("in_progress_qty")} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">생산진행</TableHead>}
-                            {isColVisible("required_plan_qty") && <TableHead style={ts.thStyle("required_plan_qty")} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">필요생산계획</TableHead>}
-                            {isColVisible("lead_time") && <TableHead style={ts.thStyle("lead_time")} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">리드타임(일)</TableHead>}
+                            {ts.visibleColumns.map((col) => (
+                              <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                                {col.label}
+                              </TableHead>
+                            ))}
                           </TableRow>
                         </TableHeader>
                         <TableBody>
@@ -1046,6 +1075,7 @@ export default function ProductionPlanManagementPage() {
                                 <TableRow key={`summary-${rowIdx}`} className="bg-muted/60 font-semibold border-t border-primary/20">
                                   <TableCell />
                                   <TableCell />
+                                  <TableCell colSpan={2} />
                                   {ts.visibleColumns.map((col) => {
                                     const v = (item as any)[col.key];
                                     return (
@@ -1068,25 +1098,14 @@ export default function ProductionPlanManagementPage() {
                                 </TableCell>
                                 <TableCell style={{ width: "140px", minWidth: "140px" }} className="text-[13px] text-primary truncate" onClick={() => toggleItemExpand(item.item_code)}>{item.item_code}</TableCell>
                                 <TableCell style={{ width: "140px", minWidth: "140px" }} className="text-[13px] text-primary truncate" onClick={() => toggleItemExpand(item.item_code)}>{item.item_name}</TableCell>
-                                {isColVisible("total_order_qty") && <TableCell style={ts.thStyle("total_order_qty")} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.total_order_qty)}</TableCell>}
-                                {isColVisible("total_ship_qty") && <TableCell style={ts.thStyle("total_ship_qty")} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.total_ship_qty)}</TableCell>}
-                                {isColVisible("total_balance_qty") && <TableCell style={ts.thStyle("total_balance_qty")} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.total_balance_qty)}</TableCell>}
-                                {isColVisible("current_stock") && <TableCell style={ts.thStyle("current_stock")} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.current_stock)}</TableCell>}
-                                {isColVisible("safety_stock") && <TableCell style={ts.thStyle("safety_stock")} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.safety_stock)}</TableCell>}
-                                {isColVisible("existing_plan_qty") && <TableCell style={ts.thStyle("existing_plan_qty")} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.existing_plan_qty)}</TableCell>}
-                                {isColVisible("in_progress_qty") && <TableCell style={ts.thStyle("in_progress_qty")} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.in_progress_qty)}</TableCell>}
-                                {isColVisible("required_plan_qty") && (
-                                  <TableCell style={ts.thStyle("required_plan_qty")} className={cn("text-[13px] text-right font-bold", Number(item.required_plan_qty) > 0 ? "text-destructive" : "text-success")} onClick={() => toggleItemExpand(item.item_code)}>
-                                    {formatNumber(item.required_plan_qty)}
-                                  </TableCell>
-                                )}
-                                {isColVisible("lead_time") && (
-                                  <TableCell style={ts.thStyle("lead_time")} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
-                                    {Number(item.lead_time) > 0 ? `${item.lead_time}일` : "-"}
-                                  </TableCell>
-                                )}
+                                {ts.visibleColumns.map((col) => renderGroupCell(col, item))}
                               </TableRow>
-                              {expandedItems.has(item.item_code) && item.orders?.map((detail) => (
+                              {expandedItems.has(item.item_code) && item.orders?.map((detail: any) => {
+                                let remainColSpan = 0;
+                                for (const col of ts.visibleColumns) {
+                                  if (!DETAIL_VALUE_MAP[col.key]) remainColSpan++;
+                                }
+                                return (
                                 <TableRow key={detail.id || detail.order_no} className="cursor-pointer hover:bg-muted/50">
                                   <TableCell />
                                   <TableCell />
@@ -1101,19 +1120,28 @@ export default function ProductionPlanManagementPage() {
                                       </Badge>
                                     </div>
                                   </TableCell>
-                                  {isColVisible("total_order_qty") && <TableCell style={ts.thStyle("total_order_qty")} className="text-[13px] text-right">{formatNumber(detail.order_qty)}</TableCell>}
-                                  {isColVisible("total_ship_qty") && <TableCell style={ts.thStyle("total_ship_qty")} className="text-[13px] text-right">{formatNumber(detail.ship_qty)}</TableCell>}
-                                  {isColVisible("total_balance_qty") && <TableCell style={ts.thStyle("total_balance_qty")} className="text-[13px] text-right">{formatNumber(detail.balance_qty)}</TableCell>}
-                                  <TableCell colSpan={orderColSpan - 2 - (isColVisible("total_order_qty") ? 1 : 0) - (isColVisible("total_ship_qty") ? 1 : 0) - (isColVisible("total_balance_qty") ? 1 : 0)} className="text-[13px] text-muted-foreground">
-                                    납기일: {detail.due_date || "-"}
-                                  </TableCell>
+                                  {ts.visibleColumns.map((col) => {
+                                    const detailKey = DETAIL_VALUE_MAP[col.key];
+                                    if (detailKey) {
+                                      return <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right">{formatNumber(detail[detailKey])}</TableCell>;
+                                    }
+                                    return null;
+                                  })}
+                                  {remainColSpan > 0 && (
+                                    <TableCell colSpan={remainColSpan} className="text-[13px] text-muted-foreground">
+                                      납기일: {detail.due_date || "-"}
+                                    </TableCell>
+                                  )}
                                 </TableRow>
-                              ))}
+                                );
+                              })}
                             </React.Fragment>
                             );
                           })}
                         </TableBody>
                       </Table>
+                        );
+                      })()}
                     </div>
                   )}
                 </div>
@@ -1401,8 +1429,8 @@ export default function ProductionPlanManagementPage() {
                       <SelectContent>
                         <SelectItem value="none">미지정</SelectItem>
                         {equipmentList.map((eq) => (
-                          <SelectItem key={eq.equipment_id} value={String(eq.equipment_id)}>
-                            {eq.equipment_name} ({eq.equipment_id})
+                          <SelectItem key={eq.id} value={eq.equipment_code || eq.id}>
+                            {eq.equipment_name} ({eq.equipment_code})
                           </SelectItem>
                         ))}
                       </SelectContent>
diff --git a/frontend/app/(main)/COMPANY_16/purchase/order/page.tsx b/frontend/app/(main)/COMPANY_16/purchase/order/page.tsx
index fa0e08c5..1bc3bc88 100644
--- a/frontend/app/(main)/COMPANY_16/purchase/order/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/purchase/order/page.tsx
@@ -742,10 +742,24 @@ export default function PurchaseOrderPage() {
         ) : (
           (() => {
             const MASTER_KEYS = new Set(["purchase_no", "order_date", "supplier_name", "status", "memo"]);
-            const detailCols = ts.visibleColumns.filter(c => !MASTER_KEYS.has(c.key));
-            const masterCols = ts.visibleColumns.filter(c => MASTER_KEYS.has(c.key));
             const numCols = new Set(["order_qty", "received_qty", "remain_qty", "unit_price", "amount"]);
 
+            // ts.visibleColumns 순서를 따르되, 마스터/디테일 컬럼을 분리
+            // 고정 컬럼(품목수)은 마스터 선행 컬럼 뒤에 배치
+            const leadingMaster: typeof ts.visibleColumns = [];
+            const detailCols: typeof ts.visibleColumns = [];
+            const trailingMaster: typeof ts.visibleColumns = [];
+            let passedFirstDetail = false;
+            for (const col of ts.visibleColumns) {
+              if (MASTER_KEYS.has(col.key)) {
+                if (passedFirstDetail) trailingMaster.push(col);
+                else leadingMaster.push(col);
+              } else {
+                passedFirstDetail = true;
+                detailCols.push(col);
+              }
+            }
+
             const renderDetailCell = (row: any, key: string) => {
               const val = row[key];
               if (key === "status") return val ? <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[val] || "")}>{val}</span> : "-";
@@ -753,23 +767,35 @@ export default function PurchaseOrderPage() {
               return val || "-";
             };
 
+            const renderMasterHead = (col: { key: string; label: string }) => (
+              <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground", col.key === "status" && "text-center")}>
+                {col.label}
+              </TableHead>
+            );
+
+            const renderMasterCell = (col: { key: string }, m: any, purchaseNo: string) => {
+              if (col.key === "purchase_no") return <TableCell key={col.key} className="text-sm font-semibold text-primary">{purchaseNo}</TableCell>;
+              if (col.key === "order_date") return <TableCell key={col.key} className="text-sm">{m.order_date ? new Date(m.order_date).toLocaleDateString("ko-KR") : "-"}</TableCell>;
+              if (col.key === "supplier_name") return <TableCell key={col.key} className="text-sm">{m.supplier_name || "-"}</TableCell>;
+              if (col.key === "status") return <TableCell key={col.key} className="text-center">{m.status && <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[m.status] || "")}>{m.status}</span>}</TableCell>;
+              if (col.key === "memo") return <TableCell key={col.key} className="text-sm text-muted-foreground max-w-[120px] truncate">{m.memo || ""}</TableCell>;
+              return <TableCell key={col.key} />;
+            };
+
             return (
               <Table>
                 <TableHeader className="sticky top-0 z-10">
                   <TableRow className="bg-muted hover:bg-muted">
                     <TableHead className="w-8" />
                     <TableHead className="w-10" />
-                    {ts.isVisible("purchase_no") && <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주번호</TableHead>}
-                    {ts.isVisible("order_date") && <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주일</TableHead>}
-                    {ts.isVisible("supplier_name") && <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체</TableHead>}
+                    {leadingMaster.map(renderMasterHead)}
                     <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground text-center">품목수</TableHead>
                     {detailCols.map(col => (
                       <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground", numCols.has(col.key) && "text-right")}>
                         {col.label}{col.key === "order_qty" || col.key === "amount" ? " 합계" : ""}
                       </TableHead>
                     ))}
-                    {ts.isVisible("status") && <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground text-center">상태</TableHead>}
-                    {ts.isVisible("memo") && <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>}
+                    {trailingMaster.map(renderMasterHead)}
                   </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -795,9 +821,7 @@ export default function PurchaseOrderPage() {
                           <TableCell className="text-center p-2" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => allChecked ? prev.filter(id => !detailIds.includes(id)) : [...new Set([...prev, ...detailIds])]); }}>
                             <Checkbox checked={allChecked} data-state={someChecked && !allChecked ? "indeterminate" : undefined} onCheckedChange={() => {}} />
                           </TableCell>
-                          {ts.isVisible("purchase_no") && <TableCell className="text-sm font-semibold text-primary">{purchaseNo}</TableCell>}
-                          {ts.isVisible("order_date") && <TableCell className="text-sm">{m.order_date ? new Date(m.order_date).toLocaleDateString("ko-KR") : "-"}</TableCell>}
-                          {ts.isVisible("supplier_name") && <TableCell className="text-sm">{m.supplier_name || "-"}</TableCell>}
+                          {leadingMaster.map(col => renderMasterCell(col, m, purchaseNo))}
                           <TableCell className="text-sm text-center"><Badge variant="secondary" className="text-[10px]">{group.details.length}건</Badge></TableCell>
                           {detailCols.map(col => (
                             <TableCell key={col.key} className={cn("text-sm", numCols.has(col.key) && "text-right font-mono")}>
@@ -806,8 +830,7 @@ export default function PurchaseOrderPage() {
                                 : ""}
                             </TableCell>
                           ))}
-                          {ts.isVisible("status") && <TableCell className="text-center">{m.status && <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[m.status] || "")}>{m.status}</span>}</TableCell>}
-                          {ts.isVisible("memo") && <TableCell className="text-sm text-muted-foreground max-w-[120px] truncate">{m.memo || ""}</TableCell>}
+                          {trailingMaster.map(col => renderMasterCell(col, m, purchaseNo))}
                         </TableRow>
                         {isExpanded && group.details.map((row) => (
                           <TableRow key={row.id} className="bg-muted/30 text-xs">
@@ -815,17 +838,14 @@ export default function PurchaseOrderPage() {
                             <TableCell className="text-center" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => prev.includes(row.id) ? prev.filter(id => id !== row.id) : [...prev, row.id]); }}>
                               <Checkbox checked={checkedIds.includes(row.id)} onCheckedChange={() => {}} />
                             </TableCell>
-                            {ts.isVisible("purchase_no") && <TableCell />}
-                            {ts.isVisible("order_date") && <TableCell />}
-                            {ts.isVisible("supplier_name") && <TableCell />}
+                            {leadingMaster.map(col => <TableCell key={col.key} />)}
                             <TableCell />
                             {detailCols.map(col => (
                               <TableCell key={col.key} className={cn(numCols.has(col.key) && "text-right")}>
                                 {renderDetailCell(row, col.key)}
                               </TableCell>
                             ))}
-                            {ts.isVisible("status") && <TableCell />}
-                            {ts.isVisible("memo") && <TableCell />}
+                            {trailingMaster.map(col => <TableCell key={col.key} />)}
                           </TableRow>
                         ))}
                       </React.Fragment>
diff --git a/frontend/app/(main)/COMPANY_16/purchase/purchase-item/page.tsx b/frontend/app/(main)/COMPANY_16/purchase/purchase-item/page.tsx
index 1f7c4137..7f211a88 100644
--- a/frontend/app/(main)/COMPANY_16/purchase/purchase-item/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/purchase/purchase-item/page.tsx
@@ -617,17 +617,21 @@ export default function PurchaseItemPage() {
     toast.success("다운로드 완료");
   };
 
-  // EDataTable 컬럼 정의 (구매품목)
-  const itemColumns: EDataTableColumn[] = [
-    { key: "item_number", label: "품번", width: "w-[110px]" },
-    { key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
-    { key: "size", label: "규격", width: "w-[80px]" },
-    { key: "unit", label: "단위", width: "w-[60px]" },
-    { key: "standard_price", label: "기준단가", width: "w-[90px]", align: "right", formatNumber: true },
-    { key: "standard_price", label: "구매단가", width: "w-[90px]", align: "right", formatNumber: true },
-    { key: "currency_code", label: "통화", width: "w-[50px]" },
-    { key: "status", label: "상태", width: "w-[60px]" },
-  ];
+  // EDataTable 컬럼 정의 (구매품목) — ts.visibleColumns 기반
+  const COLUMN_RENDER_MAP: Record<string, Partial<EDataTableColumn>> = {
+    item_number: { width: "w-[110px]" },
+    item_name: { minWidth: "min-w-[130px]" },
+    size: { width: "w-[80px]" },
+    unit: { width: "w-[60px]" },
+    standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
+    currency_code: { width: "w-[50px]" },
+    status: { width: "w-[60px]" },
+  };
+  const itemColumns: EDataTableColumn[] = ts.visibleColumns.map((col): EDataTableColumn => ({
+    key: col.key,
+    label: col.label,
+    ...COLUMN_RENDER_MAP[col.key],
+  }));
 
   return (
     <div className="flex h-full flex-col gap-3 p-4">
diff --git a/frontend/app/(main)/COMPANY_16/purchase/supplier/page.tsx b/frontend/app/(main)/COMPANY_16/purchase/supplier/page.tsx
index 51c50aa5..521f770e 100644
--- a/frontend/app/(main)/COMPANY_16/purchase/supplier/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/purchase/supplier/page.tsx
@@ -12,7 +12,7 @@
  * - 납품처 등록 (delivery_destination)
  */
 
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -1229,47 +1229,44 @@ export default function SupplierManagementPage() {
     }
   };
 
-  // 컬럼 가시성 헬퍼
-  const isColumnVisible = (key: string) => ts.isVisible(key);
-
-  const supplierColSpan = 1 + ["supplier_code", "supplier_name", "contact_person", "contact_phone", "division", "status"]
-    .filter((k) => isColumnVisible(k)).length;
-
-  // EDataTable 컬럼 정의 (공급업체 목록)
-  const supplierColumns: EDataTableColumn[] = [
-    ...(isColumnVisible("supplier_code") ? [{ key: "supplier_code", label: "공급업체코드", width: "w-[120px]" }] : []),
-    ...(isColumnVisible("supplier_name") ? [{ key: "supplier_name", label: "공급업체명", minWidth: "min-w-[140px]" }] : []),
-    ...(isColumnVisible("division") ? [{
-      key: "division",
-      label: "공급업체유형",
-      width: "w-[80px]",
-      render: (val: any) =>
-        val ? (
-          <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
-            {val}
-          </Badge>
-        ) : null,
-    }] : []),
-    ...(isColumnVisible("contact_person") ? [{ key: "contact_person", label: "담당자", width: "w-[80px]" }] : []),
-    ...(isColumnVisible("contact_phone") ? [{ key: "contact_phone", label: "전화번호", width: "w-[120px]" }] : []),
-    ...(isColumnVisible("email") ? [{ key: "email", label: "이메일", width: "w-[160px]" }] : []),
-    ...(isColumnVisible("business_number") ? [{ key: "business_number", label: "사업자번호", width: "w-[120px]" }] : []),
-    ...(isColumnVisible("address") ? [{ key: "address", label: "주소", minWidth: "min-w-[150px]" }] : []),
-    ...(isColumnVisible("status") ? [{
-      key: "status",
-      label: "상태",
-      width: "w-[70px]",
-      render: (val: any) =>
-        val ? (
-          <Badge
-            variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
-            className="text-[10px] px-1.5 py-0 h-5"
-          >
-            {val}
-          </Badge>
-        ) : null,
-    }] : []),
-  ];
+  // EDataTable 컬럼 정의 (공급업체 목록) — ts.visibleColumns 순서를 따름
+  const supplierColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      supplier_code: { width: "w-[120px]" },
+      supplier_name: { minWidth: "min-w-[140px]" },
+      division: {
+        width: "w-[80px]",
+        render: (val: any) =>
+          val ? (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
+              {val}
+            </Badge>
+          ) : null,
+      },
+      contact_person: { width: "w-[80px]" },
+      contact_phone: { width: "w-[120px]" },
+      email: { width: "w-[160px]" },
+      business_number: { width: "w-[120px]" },
+      address: { minWidth: "min-w-[150px]" },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val}
+            </Badge>
+          ) : null,
+      },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
 
   // 엑셀 다운로드
   const handleExcelDownload = async () => {
diff --git a/frontend/app/(main)/COMPANY_16/quality/item-inspection/page.tsx b/frontend/app/(main)/COMPANY_16/quality/item-inspection/page.tsx
index 5baf35d3..2c0e1338 100644
--- a/frontend/app/(main)/COMPANY_16/quality/item-inspection/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/quality/item-inspection/page.tsx
@@ -28,6 +28,7 @@ const GRID_COLUMNS = [
   { key: "item_code", label: "품목코드" },
   { key: "item_name", label: "품목명" },
   { key: "inspection_type", label: "검사유형" },
+  { key: "item_count", label: "항목수" },
   { key: "is_active", label: "사용여부" },
 ];
 const ITEM_TABLE = "item_info";
@@ -420,18 +421,41 @@ export default function ItemInspectionInfoPage() {
                 <TableRow className="bg-muted hover:bg-muted">
                   <TableHead className="w-10" />
                   <TableHead className="w-10"><Checkbox checked={groupedData.length > 0 && checkedIds.length === data.length} onCheckedChange={(v) => setCheckedIds(v ? data.map(r => r.id) : [])} /></TableHead>
-                  <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
-                  <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
-                  <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">검사유형</TableHead>
-                  <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">항목수</TableHead>
-                  <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사용여부</TableHead>
+                  {ts.visibleColumns.map((col) => (
+                    <TableHead key={col.key} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground" style={ts.thStyle(col.key)}>
+                      {col.label}
+                    </TableHead>
+                  ))}
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {groupedData.map((group) => {
+                {ts.groupData(groupedData).map((group) => {
+                  if ((group as any)._isGroupSummary || (group as any)._isGroupHeader) return null;
                   const isExpanded = expandedItems.has(group.item_code);
-                  const groupIds = group.rows.map(r => r.id);
-                  const allChecked = groupIds.every(id => checkedIds.includes(id));
+                  const groupIds = group.rows.map((r: any) => r.id);
+                  const allChecked = groupIds.every((id: string) => checkedIds.includes(id));
+                  const renderCell = (key: string) => {
+                    switch (key) {
+                      case "item_code": return <TableCell key={key} className="text-sm font-medium text-primary">{group.item_code}</TableCell>;
+                      case "item_name": return <TableCell key={key} className="text-sm">{group.item_name}</TableCell>;
+                      case "inspection_type": return (
+                        <TableCell key={key}>
+                          <div className="flex gap-1 flex-wrap">
+                            {group.types.map((t: string) => <Badge key={t} variant="secondary" className="text-[10px]">{t}</Badge>)}
+                          </div>
+                        </TableCell>
+                      );
+                      case "item_count": return <TableCell key={key} className="text-sm text-center">{group.rows.filter((r: any) => r.inspection_standard_id).length}</TableCell>;
+                      case "is_active": return (
+                        <TableCell key={key}>
+                          <Badge variant={group.is_active === "사용" || group.is_active === "true" ? "default" : "secondary"} className="text-[10px]">
+                            {group.is_active === "사용" || group.is_active === "true" ? "사용" : "미사용"}
+                          </Badge>
+                        </TableCell>
+                      );
+                      default: return <TableCell key={key}>{(group as any)[key] ?? ""}</TableCell>;
+                    }
+                  };
                   return (
                     <React.Fragment key={group.item_code}>
                       <TableRow
@@ -445,21 +469,9 @@ export default function ItemInspectionInfoPage() {
                         <TableCell className="text-center p-2" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => allChecked ? prev.filter(id => !groupIds.includes(id)) : [...new Set([...prev, ...groupIds])]); }}>
                           <Checkbox checked={allChecked} onCheckedChange={() => {}} />
                         </TableCell>
-                        <TableCell className="text-sm font-medium text-primary">{group.item_code}</TableCell>
-                        <TableCell className="text-sm">{group.item_name}</TableCell>
-                        <TableCell>
-                          <div className="flex gap-1 flex-wrap">
-                            {group.types.map(t => <Badge key={t} variant="secondary" className="text-[10px]">{t}</Badge>)}
-                          </div>
-                        </TableCell>
-                        <TableCell className="text-sm text-center">{group.rows.filter(r => r.inspection_standard_id).length}</TableCell>
-                        <TableCell>
-                          <Badge variant={group.is_active === "사용" || group.is_active === "true" ? "default" : "secondary"} className="text-[10px]">
-                            {group.is_active === "사용" || group.is_active === "true" ? "사용" : "미사용"}
-                          </Badge>
-                        </TableCell>
+                        {ts.visibleColumns.map((col) => renderCell(col.key))}
                       </TableRow>
-                      {isExpanded && group.rows.filter(r => r.inspection_standard_id).map((row, i) => (
+                      {isExpanded && group.rows.filter((r: any) => r.inspection_standard_id).map((row: any) => (
                         <TableRow key={row.id} className="bg-muted/30 text-xs">
                           <TableCell />
                           <TableCell />
diff --git a/frontend/app/(main)/COMPANY_16/sales/customer/page.tsx b/frontend/app/(main)/COMPANY_16/sales/customer/page.tsx
index bddc7730..61e1269d 100644
--- a/frontend/app/(main)/COMPANY_16/sales/customer/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/sales/customer/page.tsx
@@ -12,7 +12,7 @@
  * - 납품처 등록 (delivery_destination)
  */
 
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -345,7 +345,8 @@ export default function CustomerManagementPage() {
           if (!code) return "";
           return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
         };
-        const today = new Date().toISOString().split("T")[0];
+        const now = new Date();
+        const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
 
         // 품목 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
         const grouped: Record<string, { master: any; details: any[] }> = {};
@@ -810,22 +811,26 @@ export default function CustomerManagementPage() {
   const searchItems = async () => {
     setItemSearchLoading(true);
     try {
-      const filters: any[] = [];
+      const filters: any[] = [
+        { columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" },
+      ];
       if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
         page: 1, size: 500,
-        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        dataFilter: { enabled: true, filters },
         autoFilter: true,
       });
       const allItems = res.data?.data?.data || res.data?.data?.rows || [];
       setItemTotalCount(allItems.length);
       const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
-      const SALES_CODES = ["CAT_ML8ZFVEL_1TOR"]; // 영업관리 카테고리 코드
-      setItemSearchResults(allItems.filter((item: any) => {
+      const seenNumbers = new Set<string>();
+      const deduped = allItems.filter((item: any) => {
         if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
-        const divCodes = (item.division || "").split(",").map((c: string) => c.trim());
-        return divCodes.some((code: string) => SALES_CODES.includes(code));
-      }));
+        if (item.item_number && seenNumbers.has(item.item_number)) return false;
+        if (item.item_number) seenNumbers.add(item.item_number);
+        return true;
+      });
+      setItemSearchResults(deduped);
     } catch { /* skip */ } finally { setItemSearchLoading(false); }
   };
 
@@ -1229,47 +1234,44 @@ export default function CustomerManagementPage() {
     }
   };
 
-  // 컬럼 가시성 헬퍼
-  const isColumnVisible = (key: string) => ts.isVisible(key);
-
-  const customerColSpan = 1 + ["customer_code", "customer_name", "contact_person", "contact_phone", "division", "status"]
-    .filter((k) => isColumnVisible(k)).length;
-
-  // EDataTable 컬럼 정의 (거래처 목록)
-  const customerColumns: EDataTableColumn[] = [
-    ...(isColumnVisible("customer_code") ? [{ key: "customer_code", label: "거래처코드", width: "w-[120px]" }] : []),
-    ...(isColumnVisible("customer_name") ? [{ key: "customer_name", label: "거래처명", minWidth: "min-w-[140px]" }] : []),
-    ...(isColumnVisible("division") ? [{
-      key: "division",
-      label: "거래유형",
-      width: "w-[80px]",
-      render: (val: any) =>
-        val ? (
-          <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
-            {val}
-          </Badge>
-        ) : null,
-    }] : []),
-    ...(isColumnVisible("contact_person") ? [{ key: "contact_person", label: "담당자", width: "w-[80px]" }] : []),
-    ...(isColumnVisible("contact_phone") ? [{ key: "contact_phone", label: "전화번호", width: "w-[120px]" }] : []),
-    ...(isColumnVisible("email") ? [{ key: "email", label: "이메일", width: "w-[160px]" }] : []),
-    ...(isColumnVisible("business_number") ? [{ key: "business_number", label: "사업자번호", width: "w-[120px]" }] : []),
-    ...(isColumnVisible("address") ? [{ key: "address", label: "주소", minWidth: "min-w-[150px]" }] : []),
-    ...(isColumnVisible("status") ? [{
-      key: "status",
-      label: "상태",
-      width: "w-[70px]",
-      render: (val: any) =>
-        val ? (
-          <Badge
-            variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
-            className="text-[10px] px-1.5 py-0 h-5"
-          >
-            {val}
-          </Badge>
-        ) : null,
-    }] : []),
-  ];
+  // EDataTable 컬럼 정의 (거래처 목록) — ts.visibleColumns 순서를 따름
+  const customerColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      customer_code: { width: "w-[120px]" },
+      customer_name: { minWidth: "min-w-[140px]" },
+      division: {
+        width: "w-[80px]",
+        render: (val: any) =>
+          val ? (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
+              {val}
+            </Badge>
+          ) : null,
+      },
+      contact_person: { width: "w-[80px]" },
+      contact_phone: { width: "w-[120px]" },
+      email: { width: "w-[160px]" },
+      business_number: { width: "w-[120px]" },
+      address: { minWidth: "min-w-[150px]" },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val}
+            </Badge>
+          ) : null,
+      },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
 
   // 엑셀 다운로드
   const handleExcelDownload = async () => {
diff --git a/frontend/app/(main)/COMPANY_16/sales/order/page.tsx b/frontend/app/(main)/COMPANY_16/sales/order/page.tsx
index f896bbfd..f9a358d4 100644
--- a/frontend/app/(main)/COMPANY_16/sales/order/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/sales/order/page.tsx
@@ -13,7 +13,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import {
   Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
   ClipboardList, Pencil, Search, X, Truck, Package,
-  ChevronLeft, ChevronRight, ChevronDown, ChevronsLeft, ChevronsRight,
+  ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,
   Settings2, RotateCcw, Filter, Check, ArrowUp, ArrowDown,
 } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
@@ -42,41 +42,30 @@ const formatNumber = (val: string) => {
 };
 const parseNumber = (val: string) => val.replace(/,/g, "");
 
-// 마스터 헤더 레이아웃 (수주번호 뒤, 디테일 11컬럼 위에 colSpan으로 맵핑)
-// 순서: 거래처 | 단가방식 | 납품처 | 납품장소 | 수주일 | 담당자  →  합계 colSpan = 11
-const MASTER_BODY_LAYOUT = [
-  { key: "partner_id", label: "거래처", colSpan: 2 },
-  { key: "price_mode", label: "단가방식", colSpan: 1 },
-  { key: "delivery_partner_id", label: "납품처", colSpan: 2 },
-  { key: "delivery_address", label: "납품장소", colSpan: 2 },
-  { key: "order_date", label: "수주일", colSpan: 2 },
-  { key: "manager_id", label: "담당자", colSpan: 2 },
+// 플랫 테이블 컬럼 정의 (마스터+디테일 통합)
+const FLAT_COLUMNS = [
+  { key: "order_no", label: "수주번호", source: "master" },
+  { key: "partner_id", label: "거래처", source: "master" },
+  { key: "order_date", label: "수주일", source: "master" },
+  { key: "part_code", label: "품번", source: "detail" },
+  { key: "part_name", label: "품명", source: "detail" },
+  { key: "spec", label: "규격", source: "detail" },
+  { key: "unit", label: "단위", source: "detail" },
+  { key: "qty", label: "수량", source: "detail" },
+  { key: "ship_qty", label: "출하수량", source: "detail" },
+  { key: "balance_qty", label: "잔량", source: "detail" },
+  { key: "unit_price", label: "단가", source: "detail" },
+  { key: "amount", label: "금액", source: "detail" },
+  { key: "due_date", label: "납기일", source: "detail" },
+  { key: "memo", label: "메모", source: "master" },
 ];
 
-// 디테일 헤더 컬럼
-const DETAIL_HEADER_COLS = [
-  { key: "part_code", label: "품번" },
-  { key: "part_name", label: "품명" },
-  { key: "spec", label: "규격" },
-  { key: "unit", label: "단위" },
-  { key: "qty", label: "수량" },
-  { key: "ship_qty", label: "출하수량" },
-  { key: "balance_qty", label: "잔량" },
-  { key: "unit_price", label: "단가" },
-  { key: "amount", label: "금액" },
-  { key: "currency_code", label: "통화" },
-  { key: "due_date", label: "납기일" },
-];
+const DETAIL_HEADER_COLS = FLAT_COLUMNS.filter((c) => c.source === "detail");
 
 // 필터용 전체 키
-const GRID_COLUMNS_CONFIG = [
-  { key: "order_no", label: "수주번호" },
-  ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label })),
-  ...DETAIL_HEADER_COLS,
-  { key: "memo", label: "메모" },
-];
+const GRID_COLUMNS_CONFIG = FLAT_COLUMNS.map(({ key, label }) => ({ key, label }));
 
-// 총 컬럼 수: 체크박스(1) + 화살표(1) + 수주번호(1) + 디테일(11) + 메모(1) = 15
+// 총 컬럼 수: 체크박스(1) + 플랫 컬럼(14) = 15
 const TOTAL_COLS = 15;
 
 // 헤더 필터 Popover
@@ -180,8 +169,6 @@ export default function SalesOrderPage() {
   const [masterForm, setMasterForm] = useState<Record<string, any>>({});
   const [detailRows, setDetailRows] = useState<any[]>([]);
   const [allowPriceEdit, setAllowPriceEdit] = useState(true);
-  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
-  const [closingOrders, setClosingOrders] = useState<Set<string>>(new Set());
 
   // 품목 선택 모달
   const [itemSelectOpen, setItemSelectOpen] = useState(false);
@@ -376,25 +363,8 @@ export default function SalesOrderPage() {
 
   useEffect(() => { fetchOrders(); }, [fetchOrders]);
 
-  // 디테일 컬럼별 고유값 (디테일 서브헤더 필터용)
-  const columnUniqueValues = useMemo(() => {
-    const result: Record<string, string[]> = {};
-    for (const col of DETAIL_HEADER_COLS) {
-      const values = new Set<string>();
-      orders.forEach((row) => {
-        const val = row[col.key];
-        if (val !== null && val !== undefined && val !== "") values.add(String(val));
-      });
-      result[col.key] = Array.from(values).sort();
-    }
-    return result;
-  }, [orders]);
-
-  // 마스터 필드 키 목록 (필터 분류용)
-  const MASTER_KEYS = new Set(["order_no", ...MASTER_BODY_LAYOUT.map((c) => c.key), "memo"]);
-
-  // 카테고리 코드→라벨 변환 (마스터 필터용)
-  const resolveMasterLabel = useCallback((key: string, code: string) => {
+  // 카테고리 코드→라벨 변환
+  const resolveLabel = useCallback((key: string, code: string) => {
     if (!code) return "";
     if (key === "partner_id" || key === "manager_id" || key === "price_mode") {
       return categoryOptions[key]?.find((o) => o.code === code)?.label || code;
@@ -402,106 +372,60 @@ export default function SalesOrderPage() {
     return code;
   }, [categoryOptions]);
 
-  // 필터 + 정렬 적용된 데이터 → 그룹핑
-  const filteredOrderGroups = useMemo(() => {
-    // 1차: order_no 기준 그룹핑 (필터 전)
-    const allGroups: Record<string, { master: any; details: any[] }> = {};
-    for (const row of orders) {
-      const key = row.order_no || "_no_order";
-      if (!allGroups[key]) {
-        allGroups[key] = { master: row._master || {}, details: [] };
-      }
-      allGroups[key].details.push(row);
-    }
-
-    // 마스터 필터 / 디테일 필터 분리
-    const masterFilters: Record<string, Set<string>> = {};
-    const detailFilters: Record<string, Set<string>> = {};
-    for (const [colKey, values] of Object.entries(headerFilters)) {
-      if (values.size === 0) continue;
-      if (MASTER_KEYS.has(colKey)) masterFilters[colKey] = values;
-      else detailFilters[colKey] = values;
-    }
-
-    // 2차: 마스터 필터 적용 (그룹 단위 필터링)
-    let entries = Object.entries(allGroups);
-    if (Object.keys(masterFilters).length > 0) {
-      entries = entries.filter(([, group]) =>
-        Object.entries(masterFilters).every(([colKey, values]) => {
-          const raw = group.master?.[colKey] ?? "";
-          const label = resolveMasterLabel(colKey, String(raw));
-          return values.has(label) || values.has(String(raw));
-        })
-      );
-    }
-
-    // 3차: 디테일 필터 적용 (행 단위 필터링)
-    if (Object.keys(detailFilters).length > 0) {
-      entries = entries
-        .map(([orderNo, group]) => {
-          const filtered = group.details.filter((row) =>
-            Object.entries(detailFilters).every(([colKey, values]) => {
-              const cellVal = row[colKey] != null ? String(row[colKey]) : "";
-              return values.has(cellVal);
-            })
-          );
-          return [orderNo, { ...group, details: filtered }] as [string, typeof group];
-        })
-        .filter(([, group]) => group.details.length > 0);
-    }
-
-    // 4차: 정렬
-    if (sortState) {
-      const { key, direction } = sortState;
-      if (MASTER_KEYS.has(key)) {
-        // 마스터 필드 정렬 → 그룹 단위
-        entries.sort(([, a], [, b]) => {
-          const av = a.master?.[key] ?? "";
-          const bv = b.master?.[key] ?? "";
-          const na = Number(av); const nb = Number(bv);
-          if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
-          return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
-        });
-      } else {
-        // 디테일 필드 정렬 → 각 그룹 내 디테일 정렬
-        entries.forEach(([, group]) => {
-          group.details.sort((a, b) => {
-            const av = a[key] ?? "";
-            const bv = b[key] ?? "";
-            const na = Number(av); const nb = Number(bv);
-            if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
-            return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
-          });
-        });
-      }
-    }
-
-    return Object.fromEntries(entries);
-  }, [orders, headerFilters, sortState, resolveMasterLabel]);
-
-  // 마스터 컬럼별 고유값 (마스터 헤더 필터용)
-  const masterUniqueValues = useMemo(() => {
-    const result: Record<string, string[]> = {};
-    // 필터 전 전체 마스터에서 고유값 추출
-    const seenMasters = new Map<string, any>();
-    orders.forEach((row) => {
-      if (row.order_no && row._master && !seenMasters.has(row.order_no)) {
-        seenMasters.set(row.order_no, row._master);
-      }
+  // 플랫 행 생성 (마스터 필드를 각 디테일 행에 병합)
+  const flatRows = useMemo(() => {
+    return orders.map((row) => {
+      const master = row._master || {};
+      return {
+        ...row,
+        partner_id: resolveLabel("partner_id", master.partner_id || row.partner_id || ""),
+        order_date: master.order_date || row.order_date || "",
+        memo: row.memo || master.memo || "",
+      };
     });
-    const masters = Array.from(seenMasters.values());
-    for (const col of [{ key: "order_no", label: "수주번호" }, ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label })), { key: "memo", label: "메모" }]) {
+  }, [orders, resolveLabel]);
+
+  // 컬럼별 고유값 (헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of FLAT_COLUMNS) {
       const values = new Set<string>();
-      masters.forEach((m) => {
-        const val = m?.[col.key];
-        if (val !== null && val !== undefined && val !== "") {
-          values.add(resolveMasterLabel(col.key, String(val)));
-        }
+      flatRows.forEach((row) => {
+        const val = row[col.key];
+        if (val !== null && val !== undefined && val !== "") values.add(String(val));
       });
       result[col.key] = Array.from(values).sort();
     }
     return result;
-  }, [orders, resolveMasterLabel]);
+  }, [flatRows]);
+
+  // 필터 + 정렬 적용된 플랫 데이터
+  const filteredFlatRows = useMemo(() => {
+    let rows = [...flatRows];
+
+    // 1차: 헤더 필터 적용
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      rows = rows.filter((row) => {
+        const cellVal = row[colKey] != null ? String(row[colKey]) : "";
+        return values.has(cellVal);
+      });
+    }
+
+    // 2차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      rows.sort((a, b) => {
+        const av = a[key] ?? "";
+        const bv = b[key] ?? "";
+        const na = Number(av); const nb = Number(bv);
+        if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+        return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+      });
+    }
+
+    return rows;
+  }, [flatRows, headerFilters, sortState]);
 
   // 헤더 필터 토글/초기화
   const toggleHeaderFilter = (colKey: string, value: string) => {
@@ -965,111 +889,70 @@ export default function SalesOrderPage() {
         </div>
       </div>
 
-      {/* 데이터 테이블 (트리 구조) */}
+      {/* 데이터 테이블 (플랫 리스트) */}
       <div className="flex-1 overflow-hidden rounded-lg border border-border bg-card">
         <div className="h-full overflow-auto">
           <Table style={{ minWidth: "1500px" }}>
             <colgroup>
-              <col style={{ width: "40px" }} />   {/* 체크박스 */}
-              <col style={{ width: "36px" }} />   {/* 펼침 화살표 */}
-              <col style={{ width: "150px" }} />  {/* 수주번호 */}
-              <col style={{ width: "120px" }} />  {/* 품번 / 거래처 */}
-              <col style={{ width: "140px" }} />  {/* 품명 / 거래처(cont) */}
-              <col style={{ width: "80px" }} />   {/* 규격 / 단가방식 */}
-              <col style={{ width: "70px" }} />   {/* 단위 / 납품처 */}
-              <col style={{ width: "80px" }} />   {/* 수량 / 납품처(cont) */}
-              <col style={{ width: "80px" }} />   {/* 출하수량 / 납품장소 */}
-              <col style={{ width: "80px" }} />   {/* 잔량 / 납품장소(cont) */}
-              <col style={{ width: "90px" }} />   {/* 단가 / 수주일 */}
-              <col style={{ width: "110px" }} />  {/* 금액 / 수주일(cont) */}
-              <col style={{ width: "60px" }} />   {/* 통화 / 담당자 */}
-              <col style={{ width: "100px" }} />  {/* 납기일 / 담당자(cont) */}
-              <col style={{ width: "120px" }} />  {/* 메모 */}
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "100px" }} />
+              <col style={{ width: "120px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "70px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "90px" }} />
+              <col style={{ width: "110px" }} />
+              <col style={{ width: "100px" }} />
+              <col style={{ width: "120px" }} />
             </colgroup>
             <TableHeader className="sticky top-0 z-10">
               <TableRow className="bg-muted hover:bg-muted">
                 <TableHead
                   className="text-center cursor-pointer"
                   onClick={() => {
-                    const allFilteredIds = Object.values(filteredOrderGroups).flatMap((g) => g.details.map((d) => d.id));
+                    const allFilteredIds = filteredFlatRows.map((r) => r.id);
                     const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
                     setCheckedIds(allChecked ? [] : allFilteredIds);
                   }}
                 >
                   <Checkbox
                     checked={(() => {
-                      const allFilteredIds = Object.values(filteredOrderGroups).flatMap((g) => g.details.map((d) => d.id));
+                      const allFilteredIds = filteredFlatRows.map((r) => r.id);
                       return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
                     })()}
                     onCheckedChange={() => {}}
                   />
                 </TableHead>
-                <TableHead />
-                {/* 수주번호 (별도 컬럼) */}
-                <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
-                  <div className="inline-flex items-center gap-1">
-                    <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort("order_no")}>
-                      <span className="truncate">수주번호</span>
-                      {sortState?.key === "order_no" && (
-                        sortState.direction === "asc"
-                          ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
-                          : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
-                      )}
-                    </div>
-                    {(masterUniqueValues["order_no"] || []).length > 0 && (
-                      <HeaderFilterPopover
-                        colKey="order_no" colLabel="수주번호"
-                        uniqueValues={masterUniqueValues["order_no"] || []}
-                        filterValues={headerFilters["order_no"] || new Set<string>()}
-                        onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
-                      />
-                    )}
-                  </div>
-                </TableHead>
-                {/* 마스터 필드 헤더 (colSpan으로 디테일 컬럼 위에 맵핑) */}
-                {MASTER_BODY_LAYOUT.map((col) => (
-                  <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
-                    <div className="inline-flex items-center gap-1">
-                      <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
-                        <span className="truncate">{col.label}</span>
-                        {sortState?.key === col.key && (
-                          sortState.direction === "asc"
-                            ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
-                            : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                {FLAT_COLUMNS.map((col) => {
+                  const isRight = ["qty", "ship_qty", "balance_qty", "unit_price", "amount"].includes(col.key);
+                  return (
+                    <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none", isRight && "text-right")}>
+                      <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                        <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                          <span className="truncate">{col.label}</span>
+                          {sortState?.key === col.key && (
+                            sortState.direction === "asc"
+                              ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                              : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                          )}
+                        </div>
+                        {(columnUniqueValues[col.key] || []).length > 0 && (
+                          <HeaderFilterPopover
+                            colKey={col.key} colLabel={col.label}
+                            uniqueValues={columnUniqueValues[col.key] || []}
+                            filterValues={headerFilters[col.key] || new Set<string>()}
+                            onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                          />
                         )}
                       </div>
-                      {(masterUniqueValues[col.key] || []).length > 0 && (
-                        <HeaderFilterPopover
-                          colKey={col.key} colLabel={col.label}
-                          uniqueValues={masterUniqueValues[col.key] || []}
-                          filterValues={headerFilters[col.key] || new Set<string>()}
-                          onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
-                        />
-                      )}
-                    </div>
-                  </TableHead>
-                ))}
-                {/* 메모 (마스터) */}
-                <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
-                  <div className="inline-flex items-center gap-1">
-                    <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort("memo")}>
-                      <span className="truncate">메모</span>
-                      {sortState?.key === "memo" && (
-                        sortState.direction === "asc"
-                          ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
-                          : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
-                      )}
-                    </div>
-                    {(masterUniqueValues["memo"] || []).length > 0 && (
-                      <HeaderFilterPopover
-                        colKey="memo" colLabel="메모"
-                        uniqueValues={masterUniqueValues["memo"] || []}
-                        filterValues={headerFilters["memo"] || new Set<string>()}
-                        onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
-                      />
-                    )}
-                  </div>
-                </TableHead>
+                    </TableHead>
+                  );
+                })}
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -1079,7 +962,7 @@ export default function SalesOrderPage() {
                     <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
                   </TableCell>
                 </TableRow>
-              ) : Object.keys(filteredOrderGroups).length === 0 ? (
+              ) : filteredFlatRows.length === 0 ? (
                 <TableRow>
                   <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
                     <div className="flex flex-col items-center gap-2 text-muted-foreground">
@@ -1089,200 +972,48 @@ export default function SalesOrderPage() {
                   </TableCell>
                 </TableRow>
               ) : (
-                Object.entries(filteredOrderGroups).map(([orderNo, group]) => {
-                  const isExpanded = expandedOrders.has(orderNo);
-                  const detailIds = group.details.map((d) => d.id);
-                  const allDetailChecked = detailIds.length > 0 && detailIds.every((id) => checkedIds.includes(id));
-                  const someDetailChecked = detailIds.some((id) => checkedIds.includes(id));
-                  const master = group.master;
+                filteredFlatRows.map((row) => {
+                  const isChecked = checkedIds.includes(row.id);
                   return (
-                    <React.Fragment key={orderNo}>
-                      {/* 마스터 행 — 마스터 테이블 필드만 표시 */}
-                      <TableRow
-                        style={{ borderTop: "2px solid hsl(var(--border))" }}
-                        className={cn(
-                          "cursor-pointer border-l-[3px] border-l-transparent font-semibold tree-master-row",
-                          allDetailChecked && "border-l-primary bg-primary/5"
-                        )}
-                        onClick={() => {
-                          if (expandedOrders.has(orderNo)) {
-                            setClosingOrders((prev) => new Set(prev).add(orderNo));
-                            setTimeout(() => {
-                              setExpandedOrders((prev) => { const next = new Set(prev); next.delete(orderNo); return next; });
-                              setClosingOrders((prev) => { const next = new Set(prev); next.delete(orderNo); return next; });
-                            }, 200);
-                          } else {
-                            setExpandedOrders((prev) => new Set(prev).add(orderNo));
-                          }
-                        }}
-                        onDoubleClick={() => openEditModal(orderNo)}
-                      >
-                        <TableCell
-                          className="text-center cursor-pointer"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            setCheckedIds((prev) => {
-                              if (allDetailChecked) return prev.filter((id) => !detailIds.includes(id));
-                              return [...new Set([...prev, ...detailIds])];
-                            });
-                          }}
-                        >
-                          <Checkbox
-                            checked={allDetailChecked}
-                            data-state={someDetailChecked && !allDetailChecked ? "indeterminate" : undefined}
-                            onCheckedChange={() => {}}
-                          />
-                        </TableCell>
-                        <TableCell className="text-center">
-                          {isExpanded
-                            ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
-                            : <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                          }
-                        </TableCell>
-                        {/* 수주번호 */}
-                        <TableCell className="font-mono whitespace-nowrap">
-                          {orderNo}
-                          <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
-                        </TableCell>
-                        {/* 거래처 (colSpan=2) */}
-                        <TableCell colSpan={2} className="text-[13px] truncate max-w-0">
-                          <span className="block truncate">
-                            {master.partner_id ? (categoryOptions["partner_id"]?.find((o) => o.code === master.partner_id)?.label || master.partner_id) : ""}
-                          </span>
-                        </TableCell>
-                        {/* 단가방식 (colSpan=1) */}
-                        <TableCell className="text-[13px] truncate max-w-0">
-                          <span className="block truncate">
-                            {master.price_mode ? (categoryOptions["price_mode"]?.find((o) => o.code === master.price_mode)?.label || master.price_mode) : ""}
-                          </span>
-                        </TableCell>
-                        {/* 납품처 (colSpan=2) */}
-                        <TableCell colSpan={2} className="text-[13px] truncate max-w-0">
-                          <span className="block truncate">{master.delivery_partner_id || ""}</span>
-                        </TableCell>
-                        {/* 납품장소 (colSpan=2) */}
-                        <TableCell colSpan={2} className="text-[13px] truncate max-w-0">
-                          <span className="block truncate">{master.delivery_address || ""}</span>
-                        </TableCell>
-                        {/* 수주일 (colSpan=2) */}
-                        <TableCell colSpan={2} className="whitespace-nowrap text-[13px]">
-                          {master.order_date || ""}
-                        </TableCell>
-                        {/* 담당자 (colSpan=2) */}
-                        <TableCell colSpan={2} className="text-[13px] truncate max-w-0">
-                          <span className="block truncate">
-                            {master.manager_id ? (categoryOptions["manager_id"]?.find((o) => o.code === master.manager_id)?.label || master.manager_id) : ""}
-                          </span>
-                        </TableCell>
-                        {/* 메모 */}
-                        <TableCell className="text-muted-foreground">
-                          <span className="block truncate max-w-[120px]">{master.memo || ""}</span>
-                        </TableCell>
-                      </TableRow>
-
-                      {/* 디테일 서브 헤더 (펼쳤을 때만) */}
-                      {isExpanded && (
-                        <TableRow
-                          className={cn(
-                            "border-l-[3px] border-l-primary/30 bg-muted/60",
-                            closingOrders.has(orderNo) ? "tree-detail-row-closing" : "tree-detail-row",
-                          )}
-                        >
-                          <TableCell />
-                          <TableCell />
-                          <TableCell /> {/* 수주번호 컬럼 빈 셀 */}
-                          {DETAIL_HEADER_COLS.map((col) => {
-                            const isRight = ["qty", "ship_qty", "balance_qty", "unit_price", "amount"].includes(col.key);
-                            const isSorted = sortState?.key === col.key;
-                            const uniqueVals = Array.from(new Set(
-                              group.details.map((d) => d[col.key]).filter((v: any) => v != null && v !== "").map(String)
-                            )).sort();
-                            const filterVals = headerFilters[col.key] || new Set<string>();
-                            return (
-                              <TableCell
-                                key={col.key}
-                                className={cn(
-                                  "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 select-none",
-                                  isRight && "text-right",
-                                )}
-                              >
-                                <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
-                                  <div
-                                    className="flex items-center gap-1 cursor-pointer min-w-0"
-                                    onClick={() => handleSort(col.key)}
-                                  >
-                                    <span className="truncate">{col.label}</span>
-                                    {isSorted && (
-                                      sortState!.direction === "asc"
-                                        ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
-                                        : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
-                                    )}
-                                  </div>
-                                  {uniqueVals.length > 0 && (
-                                    <HeaderFilterPopover
-                                      colKey={col.key} colLabel={col.label}
-                                      uniqueValues={uniqueVals} filterValues={filterVals}
-                                      onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
-                                    />
-                                  )}
-                                </div>
-                              </TableCell>
-                            );
-                          })}
-                          <TableCell />
-                        </TableRow>
+                    <TableRow
+                      key={row.id}
+                      className={cn(
+                        "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                        isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
                       )}
-
-                      {/* 디테일 행 (펼쳤을 때만) */}
-                      {isExpanded && group.details.map((row, detailIdx) => {
-                        const isClosing = closingOrders.has(orderNo);
-                        const isChecked = checkedIds.includes(row.id);
-                        return (
-                          <TableRow
-                            key={row.id}
-                            className={cn(
-                              "cursor-pointer border-l-[3px] border-l-transparent transition-all",
-                              isClosing ? "tree-detail-row-closing" : "tree-detail-row",
-                              isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
-                            )}
-                            onClick={() => {
-                              setCheckedIds((prev) =>
-                                prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
-                              );
-                            }}
-                            onDoubleClick={() => openEditModal(row.order_no)}
-                          >
-                            <TableCell
-                              className="text-center cursor-pointer"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                setCheckedIds((prev) =>
-                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
-                                );
-                              }}
-                            >
-                              <Checkbox checked={isChecked} onCheckedChange={() => {}} />
-                            </TableCell>
-                            <TableCell className="relative">
-                              <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
-                            </TableCell>
-                            <TableCell /> {/* 수주번호 컬럼 빈 셀 */}
-                            <TableCell className="font-mono text-[13px]">{row.part_code}</TableCell>
-                            <TableCell className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.part_name}>{row.part_name}</span></TableCell>
-                            <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
-                            <TableCell className="text-[13px]">{row.unit}</TableCell>
-                            <TableCell className="text-right font-mono text-[13px]">{row.qty ? Number(row.qty).toLocaleString() : ""}</TableCell>
-                            <TableCell className="text-right font-mono text-[13px] text-muted-foreground">{row.ship_qty ? Number(row.ship_qty).toLocaleString() : ""}</TableCell>
-                            <TableCell className="text-right font-mono text-[13px]">{row.balance_qty ? Number(row.balance_qty).toLocaleString() : ""}</TableCell>
-                            <TableCell className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>
-                            <TableCell className="text-right font-mono text-[13px] font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
-                            <TableCell className="text-[13px]">{row.currency_code || ""}</TableCell>
-                            <TableCell className="text-[13px]">{row.due_date || ""}</TableCell>
-                            <TableCell />
-                          </TableRow>
+                      onClick={() => {
+                        setCheckedIds((prev) =>
+                          prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
                         );
-                      })}
-                    </React.Fragment>
+                      }}
+                      onDoubleClick={() => openEditModal(row.order_no)}
+                    >
+                      <TableCell
+                        className="text-center cursor-pointer"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setCheckedIds((prev) =>
+                            prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                          );
+                        }}
+                      >
+                        <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                      </TableCell>
+                      <TableCell className="font-mono whitespace-nowrap text-[13px]">{row.order_no}</TableCell>
+                      <TableCell className="text-[13px] truncate max-w-[140px]"><span className="block truncate">{row.partner_id || ""}</span></TableCell>
+                      <TableCell className="whitespace-nowrap text-[13px]">{row.order_date || ""}</TableCell>
+                      <TableCell className="font-mono text-[13px]">{row.part_code}</TableCell>
+                      <TableCell className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.part_name}>{row.part_name}</span></TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                      <TableCell className="text-[13px]">{row.unit}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.qty ? Number(row.qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px] text-muted-foreground">{row.ship_qty ? Number(row.ship_qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.balance_qty ? Number(row.balance_qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px] font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-[13px]">{row.due_date || ""}</TableCell>
+                      <TableCell className="text-muted-foreground"><span className="block truncate max-w-[120px]">{row.memo || ""}</span></TableCell>
+                    </TableRow>
                   );
                 })
               )}
diff --git a/frontend/app/(main)/COMPANY_16/sales/quote/page.tsx b/frontend/app/(main)/COMPANY_16/sales/quote/page.tsx
new file mode 100644
index 00000000..18e106c9
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_16/sales/quote/page.tsx
@@ -0,0 +1,995 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, FileText,
+} from "lucide-react";
+import { apiClient } from "@/lib/api/client";
+import { reportApi } from "@/lib/api/reportApi";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import {
+  ResizablePanelGroup, ResizablePanel, ResizableHandle,
+} from "@/components/ui/resizable";
+import { ReportInlineViewer } from "@/components/report/ReportInlineViewer";
+import { ReportMaster, ComponentConfig } from "@/types/report";
+
+const MASTER_TABLE = "quote_mng";
+
+const fmt = (val: string) => {
+  const num = val.replace(/[^\d.-]/g, "");
+  if (!num) return "";
+  const parts = num.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+const pn = (val: string) => val.replace(/,/g, "");
+
+const GRID_COLUMNS: DataGridColumn[] = [
+  { key: "quote_no", label: "견적번호", width: "w-[120px]" },
+  { key: "customer_name", label: "거래처명", width: "w-[150px]" },
+  { key: "quote_date", label: "견적일자", width: "w-[110px]" },
+  { key: "valid_until", label: "유효기한", width: "w-[110px]" },
+  { key: "total_amount", label: "견적금액", width: "w-[120px]", formatNumber: true, align: "right" },
+  { key: "status_label", label: "상태", width: "w-[90px]" },
+  { key: "manager", label: "담당자", width: "w-[100px]" },
+  { key: "domestic_type", label: "국내/국외", width: "w-[90px]" },
+];
+
+const STATUS_MAP: Record<string, string> = {
+  draft: "작성중", pending: "검토중", approved: "승인", rejected: "반려", converted: "수주전환",
+};
+
+const EMPTY_ITEM = {
+  item_code: "", item_name: "", spec: "", qty: "1", unit: "EA",
+  request_length: "", unit_price: "0", supply_amount: "0", vat_amount: "0", total_amount: "0", notes: "",
+};
+
+export default function QuoteManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  const [quotes, setQuotes] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [selectedRow, setSelectedRow] = useState<any | null>(null);
+
+  // 컴포넌트 클릭 편집 모달
+  const [editComp, setEditComp] = useState<ComponentConfig | null>(null);
+  const [editValues, setEditValues] = useState<Record<string, string>>({});
+  const [items, setItems] = useState<(typeof EMPTY_ITEM)[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // 기본정보 모달
+  const [basicInfoOpen, setBasicInfoOpen] = useState(false);
+  const [basicForm, setBasicForm] = useState({ quote_date: "", valid_until: "", status: "draft" });
+
+  // 엑셀 / 리포트
+  const [excelOpen, setExcelOpen] = useState(false);
+  const [reportList, setReportList] = useState<ReportMaster[]>([]);
+  const [selectedReportId, setSelectedReportId] = useState<string | null>(null);
+  const [reportKey, setReportKey] = useState(0);
+
+  // 품목 검색
+  const [itemSearchOpen, setItemSearchOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSelectedMap, setItemSelectedMap] = useState<Map<string, any>>(new Map());
+
+  // 거래처 검색
+  const [custSearchOpen, setCustSearchOpen] = useState(false);
+  const [custSearchKeyword, setCustSearchKeyword] = useState("");
+  const [custSearchResults, setCustSearchResults] = useState<any[]>([]);
+  const [custSearchLoading, setCustSearchLoading] = useState(false);
+
+  // 사원(담당자) 검색
+  const [userSearchOpen, setUserSearchOpen] = useState(false);
+  const [userSearchKeyword, setUserSearchKeyword] = useState("");
+  const [userSearchResults, setUserSearchResults] = useState<any[]>([]);
+  const [userSearchLoading, setUserSearchLoading] = useState(false);
+
+  // ── 데이터 로드 ──
+
+  const mapRow = (r: any) => ({
+    ...r, id: String(r.objid), status_label: STATUS_MAP[r.status] ?? r.status, total_amount: Number(r.total_amount || 0),
+  });
+
+  const fetchQuotes = useCallback(async () => {
+    if (!user) return;
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      searchFilters.forEach((f) => { if (f.value) params[f.columnName] = f.value; });
+      const res = await apiClient.get("/quotes/list", { params });
+      const mapped = (res.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+    } catch { toast.error("견적 목록 조회 실패"); }
+    finally { setLoading(false); }
+  }, [user, searchFilters]);
+
+  useEffect(() => { fetchQuotes(); }, [fetchQuotes]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await reportApi.getReports({ page: 1, limit: 100 });
+        if (res.success) {
+          const items = res.data.items ?? [];
+          setReportList(items);
+          if (items.length > 0 && !selectedReportId) setSelectedReportId(items[0].report_id);
+        }
+      } catch { /* 무시 */ }
+    })();
+  }, []);
+
+  // ── "신규" → DB에 draft 즉시 생성 → 자동 선택 ──
+
+  const handleCreate = async () => {
+    try {
+      const numRes = await apiClient.get("/quotes/generate-number");
+      const quoteNo = numRes.data?.data?.quoteNo ?? "";
+      const createRes = await apiClient.post("/quotes", {
+        quote_no: quoteNo,
+        quote_date: new Date().toISOString().split("T")[0],
+        status: "draft",
+        customer_name: "",
+        items: [],
+      });
+      toast.success("신규 견적이 생성되었습니다. 우측 양식에서 각 영역을 클릭하여 입력하세요.");
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+
+      const newObjid = createRes.data?.data?.objid;
+      const newRow = newObjid ? mapped.find((r: any) => r.objid === newObjid) : mapped[0];
+      if (newRow) setSelectedRow(newRow);
+    } catch { toast.error("견적 생성 실패"); }
+  };
+
+  // ── 삭제 ──
+
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.info("삭제할 견적을 선택하세요."); return; }
+    const ok = await confirm(`${checkedIds.length}건의 견적을 삭제하시겠습니까?`, { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      for (const id of checkedIds) await apiClient.delete(`/quotes/${id}`);
+      toast.success("삭제 완료");
+      setCheckedIds([]);
+      setSelectedRow(null);
+      fetchQuotes();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // ── 컴포넌트 클릭 → 편집 모달 ──
+
+  const handleComponentClick = async (comp: ComponentConfig) => {
+    if (!selectedRow) return;
+    setEditComp(comp);
+
+    if (comp.type === "table") {
+      // 테이블 → 품목 편집
+      try {
+        const res = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const d = res.data?.data;
+        setItems(
+          (d?.items || []).length > 0
+            ? d.items.map((it: any) => ({
+                item_code: it.item_code || "", item_name: it.item_name || "", spec: it.spec || "",
+                qty: String(it.qty ?? 1), unit: it.unit || "EA",
+                request_length: it.request_length ? String(it.request_length) : "",
+                unit_price: String(it.unit_price ?? 0), supply_amount: String(it.supply_amount ?? 0),
+                vat_amount: String(it.vat_amount ?? 0), total_amount: String(it.total_amount ?? 0),
+                notes: it.notes || "",
+              }))
+            : [{ ...EMPTY_ITEM }],
+        );
+      } catch { setItems([{ ...EMPTY_ITEM }]); }
+    } else if (comp.type === "card") {
+      const cardItems = (comp as any).cardItems ?? [];
+      // 우측 카드 (회사정보 + 담당자) → 담당자 선택
+      const hasCompanyField = cardItems.some((ci: any) =>
+        ["company_name_self", "ceo_self", "biz_no_self", "address_self"].includes(ci.fieldName || "")
+      );
+      if (hasCompanyField) {
+        setUserSearchKeyword("");
+        setUserSearchResults([]);
+        setUserSearchOpen(true);
+        searchUsers();
+        return;
+      }
+      // 좌측 카드 (거래처) → 거래처 검색
+      const hasCustomerField = cardItems.some((ci: any) =>
+        ["customer_name", "customer_ceo", "customer_biz_no"].includes(ci.fieldName || "")
+      );
+      if (hasCustomerField) {
+        setCustSearchKeyword("");
+        setCustSearchResults([]);
+        setCustSearchOpen(true);
+        searchCustomers();
+        return;
+      }
+      // 기타 카드
+      const vals: Record<string, string> = {};
+      cardItems.forEach((ci: any) => {
+        if (ci.fieldName) vals[ci.fieldName] = selectedRow[ci.fieldName] ?? ci.value ?? "";
+      });
+      setEditValues(vals);
+    } else if (comp.type === "text" || comp.type === "label") {
+      // 텍스트 → 기본정보 모달 하나로 통합
+      const basicFields = ["quote_no", "quote_date", "valid_until", "status"];
+      if (comp.fieldName && basicFields.includes(comp.fieldName)) {
+        // 기본정보 모달
+        const detail = await apiClient.get(`/quotes/${selectedRow.objid}`).then(r => r.data?.data).catch(() => null);
+        setBasicForm({
+          quote_date: detail?.quote_date || "",
+          valid_until: detail?.valid_until || "",
+          status: detail?.status || "draft",
+        });
+        setBasicInfoOpen(true);
+        setEditComp(null);
+        return;
+      }
+      // 기타 텍스트 (제목 등)
+      toast.info("이 영역은 리포트 디자이너에서 수정하세요.");
+      setEditComp(null);
+      return;
+    } else if (comp.type === "calculation") {
+      // 계산은 읽기 전용 안내
+      toast.info("계산 컴포넌트는 품목 데이터에서 자동 계산됩니다.");
+      setEditComp(null);
+    } else if (comp.type === "signature" || comp.type === "stamp") {
+      toast.info("서명/도장은 리포트 디자이너에서 설정하세요.");
+      setEditComp(null);
+    } else {
+      setEditValues({});
+    }
+  };
+
+  // ── 컴포넌트 편집 저장 ──
+
+  const handleEditSave = async () => {
+    if (!selectedRow || !editComp) return;
+    setSaving(true);
+    try {
+      if (editComp.type === "table") {
+        // 품목 저장 — 기존 견적 데이터 불러와서 품목만 교체
+        const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const existing = detailRes.data?.data ?? {};
+        const payload = {
+          ...existing,
+          items: items.filter((it) => it.item_name).map((it) => ({
+            item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+            qty: Number(pn(it.qty)) || 0, unit: it.unit,
+            request_length: it.request_length ? Number(it.request_length) : null,
+            unit_price: Number(pn(it.unit_price)) || 0,
+            supply_amount: Number(pn(it.supply_amount)) || 0,
+            vat_amount: Number(pn(it.vat_amount)) || 0,
+            total_amount: Number(pn(it.total_amount)) || 0,
+            notes: it.notes,
+          })),
+        };
+        await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      } else {
+        // 텍스트/카드 → 해당 필드만 업데이트
+        const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const existing = detailRes.data?.data ?? {};
+        const payload = { ...existing, ...editValues };
+        // items는 기존 유지
+        payload.items = (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0),
+          notes: it.notes,
+        }));
+        await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      }
+
+      toast.success("저장되었습니다.");
+      setEditComp(null);
+
+      // 목록 + 리포트 갱신
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 거래처 검색 ──
+
+  const searchCustomers = async () => {
+    setCustSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (custSearchKeyword) {
+        filters.push({ columnName: "customer_name", operator: "contains", value: custSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/customer_mng/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setCustSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("거래처 조회 실패"); }
+    finally { setCustSearchLoading(false); }
+  };
+
+  const selectCustomer = async (cust: any) => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        customer_objid: cust.objid || null,
+        customer_name: cust.customer_name || "",
+        customer_ceo: cust.contact_person || "",
+        customer_biz_no: cust.business_number || "",
+        customer_address: cust.address || "",
+        customer_contact: cust.contact_person || "",
+        customer_phone: cust.contact_phone || "",
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success(`${payload.customer_name} 거래처 적용 완료`);
+      setCustSearchOpen(false);
+      setEditComp(null);
+
+      // 목록 + 리포트 갱신
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 기본정보 저장 ──
+
+  const handleBasicInfoSave = async () => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        quote_date: basicForm.quote_date,
+        valid_until: basicForm.valid_until,
+        status: basicForm.status,
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success("기본정보 저장 완료");
+      setBasicInfoOpen(false);
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 사원(담당자) 검색 ──
+
+  const searchUsers = async () => {
+    setUserSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (userSearchKeyword) {
+        filters.push({ columnName: "user_name", operator: "contains", value: userSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/user_info/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setUserSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("사원 조회 실패"); }
+    finally { setUserSearchLoading(false); }
+  };
+
+  const selectUser = async (usr: any) => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        manager: usr.user_name || "",
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success(`담당자: ${payload.manager} 적용`);
+      setUserSearchOpen(false);
+      setEditComp(null);
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 품목 검색 ──
+
+  const searchItemInfo = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/item_info/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setItemSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("품목 조회 실패"); }
+    finally { setItemSearchLoading(false); }
+  };
+
+  const toggleItemSelect = (row: any) => {
+    const key = row.item_number || row.objid || row.id;
+    setItemSelectedMap((prev) => {
+      const next = new Map(prev);
+      if (next.has(key)) next.delete(key); else next.set(key, row);
+      return next;
+    });
+  };
+
+  const addSelectedItemsToQuote = () => {
+    const selected = Array.from(itemSelectedMap.values());
+    if (selected.length === 0) { toast.info("품목을 선택하세요."); return; }
+    const newItems = selected.map((item) => calcItem({
+      item_code: item.item_number || item.item_code || "",
+      item_name: item.item_name || "",
+      spec: item.spec || item.standard || "",
+      qty: "1",
+      unit: item.unit || "EA",
+      request_length: "",
+      unit_price: String(item.selling_price || item.standard_price || 0),
+      supply_amount: "0",
+      vat_amount: "0",
+      total_amount: "0",
+      notes: "",
+    }));
+    setItems((prev) => [...prev, ...newItems]);
+    setItemSearchOpen(false);
+    setItemSelectedMap(new Map());
+    setItemSearchKeyword("");
+    toast.success(`${selected.length}건 품목 추가`);
+  };
+
+  // ── 품목 계산 ──
+
+  const calcItem = (item: typeof EMPTY_ITEM) => {
+    const qty = Number(pn(item.qty)) || 0;
+    const price = Number(pn(item.unit_price)) || 0;
+    const supply = qty * price;
+    const vat = Math.round(supply * 0.1);
+    return { ...item, supply_amount: String(supply), vat_amount: String(vat), total_amount: String(supply + vat) };
+  };
+  const updateItem = (idx: number, field: string, value: string) => {
+    setItems((prev) => {
+      const next = [...prev];
+      next[idx] = { ...next[idx], [field]: value };
+      if (field === "qty" || field === "unit_price") next[idx] = calcItem(next[idx]);
+      return next;
+    });
+  };
+  const addItem = () => setItems((prev) => [...prev, { ...EMPTY_ITEM }]);
+  const removeItem = (idx: number) => setItems((prev) => prev.filter((_, i) => i !== idx));
+  const totalSupply = items.reduce((s, it) => s + (Number(pn(it.supply_amount)) || 0), 0);
+  const totalVat = items.reduce((s, it) => s + (Number(pn(it.vat_amount)) || 0), 0);
+  const totalAmount = totalSupply + totalVat;
+
+  // ── 행 클릭 ──
+
+  const handleRowClick = (row: any) => setSelectedRow(row);
+
+  const contextParams = selectedRow
+    ? { "$1": selectedRow.objid, "$2": user?.companyCode || "COMPANY_7", objid: selectedRow.objid, quote_no: selectedRow.quote_no, customer_name: selectedRow.customer_name, quote_date: selectedRow.quote_date }
+    : undefined;
+
+  // ── 편집 모달 제목/타입 판별 ──
+
+  const getModalTitle = () => {
+    if (!editComp) return "";
+    if (editComp.type === "table") return "견적 품목";
+    if (editComp.type === "card") {
+      const items = (editComp as any).cardItems ?? [];
+      const title = (editComp as any).headerText || (editComp as any).title || "";
+      if (title) return title;
+      if (items.length > 0) return items[0].label ?? "카드 정보";
+      return "카드 정보";
+    }
+    if (editComp.type === "text" || editComp.type === "label") {
+      if (editComp.fieldName) return editComp.fieldName;
+      return "텍스트 편집";
+    }
+    return editComp.type;
+  };
+
+  // ── JSX ──
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      <DynamicSearchFilter tableName={MASTER_TABLE} filterId="quote-mng-filter"
+        onFilterChange={(filters) => setSearchFilters(filters)} dataCount={totalCount} />
+
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg border">
+        {/* 좌측: 견적 목록 */}
+        <ResizablePanel defaultSize={55} minSize={35}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center justify-between border-b bg-white px-3 py-2">
+              <span className="text-sm font-semibold text-gray-700">
+                견적 목록 <span className="text-gray-400">{totalCount}건</span>
+              </span>
+              <div className="flex items-center gap-1.5">
+                <Button variant="outline" size="sm" className="gap-1 text-xs" onClick={() => setExcelOpen(true)}>
+                  <FileSpreadsheet className="h-3.5 w-3.5" /> 업로드
+                </Button>
+                <Button variant="outline" size="sm" className="gap-1 text-xs"
+                  onClick={() => quotes.length > 0 ? exportToExcel(quotes, "견적목록.xlsx", "견적목록") : toast.info("데이터 없음")}>
+                  <Download className="h-3.5 w-3.5" /> 다운로드
+                </Button>
+                <Button size="sm" className="gap-1 text-xs" onClick={handleCreate}>
+                  <Plus className="h-3.5 w-3.5" /> 신규
+                </Button>
+                <Button variant="destructive" size="sm" className="gap-1 text-xs" onClick={handleDelete}>
+                  <Trash2 className="h-3.5 w-3.5" /> 삭제
+                </Button>
+              </div>
+            </div>
+            <div className="flex-1 overflow-hidden">
+              <DataGrid gridId="quote-mng" columns={GRID_COLUMNS} data={quotes} showCheckbox tableName={MASTER_TABLE}
+                checkedIds={checkedIds} onCheckedChange={setCheckedIds}
+                onRowClick={handleRowClick} selectedId={selectedRow?.objid ? String(selectedRow.objid) : null} />
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 리포트 뷰어 — 컴포넌트 클릭 가능 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center gap-2 border-b bg-white px-3 py-2">
+              <FileText className="h-4 w-4 text-gray-500" />
+              <span className="text-sm font-semibold text-gray-700">견적서</span>
+              <Select value={selectedReportId ?? ""} onValueChange={(v) => setSelectedReportId(v || null)}>
+                <SelectTrigger className="ml-auto h-7 w-[180px] text-xs">
+                  <SelectValue placeholder="리포트 양식 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {reportList.map((r) => (
+                    <SelectItem key={r.report_id} value={r.report_id} className="text-xs">
+                      {r.report_name_kor || r.report_name_eng || r.report_id}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex-1 overflow-hidden">
+              {!selectedRow ? (
+                <div className="flex h-full items-center justify-center text-center text-gray-400">
+                  <div>
+                    <FileText className="mx-auto mb-3 h-12 w-12 opacity-30" />
+                    <p className="text-sm font-medium">견적을 선택해주세요</p>
+                    <p className="mt-1 text-xs text-gray-300">&quot;신규&quot; 버튼으로 생성하거나 좌측에서 선택하세요.</p>
+                  </div>
+                </div>
+              ) : !selectedReportId ? (
+                <div className="flex h-full items-center justify-center text-center text-gray-400">
+                  <div>
+                    <FileText className="mx-auto mb-3 h-12 w-12 opacity-30" />
+                    <p className="text-sm font-medium">리포트 양식을 선택해주세요</p>
+                  </div>
+                </div>
+              ) : (
+                <ReportInlineViewer
+                  key={reportKey}
+                  reportId={selectedReportId}
+                  contextParams={contextParams}
+                  onComponentClick={handleComponentClick}
+                />
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ═══ 컴포넌트 클릭 편집 모달 (동적) ═══ */}
+
+      {/* 텍스트/카드 편집 모달 */}
+      <Dialog open={!!editComp && editComp.type !== "table"} onOpenChange={(o) => !o && setEditComp(null)}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{getModalTitle()}</DialogTitle>
+            <DialogDescription>값을 수정한 후 저장 버튼을 누르세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-3">
+            {Object.entries(editValues).map(([key, val]) => (
+              <div key={key}>
+                <Label className="text-xs">{key}</Label>
+                {val.length > 60 ? (
+                  <Textarea className="mt-1" rows={3} value={val}
+                    onChange={(e) => setEditValues((p) => ({ ...p, [key]: e.target.value }))} />
+                ) : (
+                  <Input className="mt-1" value={val}
+                    onChange={(e) => setEditValues((p) => ({ ...p, [key]: e.target.value }))} />
+                )}
+              </div>
+            ))}
+            {Object.keys(editValues).length === 0 && (
+              <p className="text-sm text-gray-400">이 컴포넌트에 편집 가능한 필드가 없습니다.</p>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditComp(null)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving || Object.keys(editValues).length === 0} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블(품목) 편집 모달 */}
+      <Dialog open={!!editComp && editComp.type === "table"} onOpenChange={(o) => { if (!o && itemSearchOpen) return; if (!o) setEditComp(null); }}>
+        <DialogContent className="flex max-h-[80vh] max-w-4xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>견적 품목</DialogTitle>
+            <DialogDescription>품목을 추가/수정합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-auto">
+            <div className="mb-3 flex gap-2">
+              <Button size="sm" className="gap-1 text-xs" onClick={() => { setItemSelectedMap(new Map()); setItemSearchResults([]); setItemSearchKeyword(""); setItemSearchOpen(true); searchItemInfo(); }}>
+                <Plus className="h-3.5 w-3.5" /> 품목 검색/추가
+              </Button>
+              <Button variant="outline" size="sm" className="gap-1 text-xs" onClick={addItem}>
+                <Plus className="h-3.5 w-3.5" /> 빈 행 추가
+              </Button>
+            </div>
+            <div className="overflow-auto rounded border">
+              <table className="w-full text-xs">
+                <thead className="sticky top-0 bg-gray-50">
+                  <tr>
+                    <th className="w-8 px-2 py-2 text-center">#</th>
+                    <th className="px-2 py-2 text-left">품목코드</th>
+                    <th className="px-2 py-2 text-left">품목명</th>
+                    <th className="px-2 py-2 text-left">규격</th>
+                    <th className="w-20 px-2 py-2 text-right">수량</th>
+                    <th className="w-16 px-2 py-2 text-center">단위</th>
+                    <th className="w-24 px-2 py-2 text-right">단가</th>
+                    <th className="w-24 px-2 py-2 text-right">공급가액</th>
+                    <th className="w-20 px-2 py-2 text-right">부가세</th>
+                    <th className="w-24 px-2 py-2 text-right">합계</th>
+                    <th className="w-8" />
+                  </tr>
+                </thead>
+                <tbody>
+                  {items.map((item, idx) => (
+                    <tr key={idx} className="border-t">
+                      <td className="px-2 py-1 text-center text-gray-400">{idx + 1}</td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.item_code} onChange={(e) => updateItem(idx, "item_code", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.item_name} onChange={(e) => updateItem(idx, "item_name", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.spec} onChange={(e) => updateItem(idx, "spec", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-right text-xs" value={fmt(item.qty)} onChange={(e) => updateItem(idx, "qty", pn(e.target.value))} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-center text-xs" value={item.unit} onChange={(e) => updateItem(idx, "unit", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-right text-xs" value={fmt(item.unit_price)} onChange={(e) => updateItem(idx, "unit_price", pn(e.target.value))} /></td>
+                      <td className="px-2 py-1 text-right">{fmt(item.supply_amount)}</td>
+                      <td className="px-2 py-1 text-right">{fmt(item.vat_amount)}</td>
+                      <td className="px-2 py-1 text-right font-medium">{fmt(item.total_amount)}</td>
+                      <td className="px-1 py-1">
+                        <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => removeItem(idx)}>
+                          <Trash2 className="h-3 w-3 text-red-400" />
+                        </Button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className="mt-3 rounded bg-gray-50 p-3 text-sm">
+              <div className="flex justify-between"><span>공급가액</span><span>{fmt(String(totalSupply))}원</span></div>
+              <div className="flex justify-between"><span>부가세</span><span>{fmt(String(totalVat))}원</span></div>
+              <div className="flex justify-between border-t pt-2 font-bold"><span>합계금액</span><span>{fmt(String(totalAmount))}원</span></div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditComp(null)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 기본정보 모달 ═══ */}
+      <Dialog open={basicInfoOpen} onOpenChange={setBasicInfoOpen}>
+        <DialogContent className="max-w-md" onOpenAutoFocus={(e) => e.preventDefault()}>
+          <DialogHeader>
+            <DialogTitle>기본 정보</DialogTitle>
+            <DialogDescription>견적 기본 정보를 수정합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label className="text-xs">견적번호</Label>
+              <Input className="mt-1" value={selectedRow?.quote_no || ""} disabled />
+            </div>
+            <div>
+              <Label className="text-xs">견적일자 *</Label>
+              <div className="mt-1">
+                <FormDatePicker value={basicForm.quote_date} onChange={(v) => setBasicForm((p) => ({ ...p, quote_date: v }))} />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">유효기한 *</Label>
+              <div className="mt-1">
+                <FormDatePicker value={basicForm.valid_until} onChange={(v) => setBasicForm((p) => ({ ...p, valid_until: v }))} />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">상태</Label>
+              <Select value={basicForm.status} onValueChange={(v) => setBasicForm((p) => ({ ...p, status: v }))}>
+                <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {Object.entries(STATUS_MAP).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setBasicInfoOpen(false)}>취소</Button>
+            <Button onClick={handleBasicInfoSave} disabled={saving} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 담당자(사원) 검색 모달 ═══ */}
+      <Dialog open={userSearchOpen} onOpenChange={setUserSearchOpen}>
+        <DialogContent className="flex max-h-[70vh] max-w-lg flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>담당자 선택</DialogTitle>
+            <DialogDescription>담당자를 검색하여 선택하세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="이름 검색" value={userSearchKeyword}
+              onChange={(e) => setUserSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchUsers()} className="text-sm" />
+            <Button onClick={searchUsers} disabled={userSearchLoading} className="shrink-0">
+              {userSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left">이름</th>
+                  <th className="px-3 py-2 text-left">부서</th>
+                  <th className="px-3 py-2 text-left">직위</th>
+                  <th className="w-16 px-2 py-2 text-center">선택</th>
+                </tr>
+              </thead>
+              <tbody>
+                {userSearchResults.length === 0 ? (
+                  <tr><td colSpan={4} className="px-4 py-8 text-center text-gray-400">
+                    {userSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : userSearchResults.map((row, i) => (
+                  <tr key={row.objid || row.user_id || i} className="cursor-pointer border-t hover:bg-blue-50"
+                    onClick={() => selectUser(row)}>
+                    <td className="px-3 py-2 font-medium">{row.user_name || "-"}</td>
+                    <td className="px-3 py-2">{row.department || row.dept_name || "-"}</td>
+                    <td className="px-3 py-2">{row.position || row.rank || "-"}</td>
+                    <td className="px-2 py-2 text-center">
+                      <Button size="sm" variant="outline" className="h-6 text-xs"
+                        onClick={(e) => { e.stopPropagation(); selectUser(row); }}>선택</Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserSearchOpen(false)}>취소</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 거래처 검색 모달 ═══ */}
+      <Dialog open={custSearchOpen} onOpenChange={setCustSearchOpen}>
+        <DialogContent className="flex max-h-[80vh] max-w-2xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>거래처 검색</DialogTitle>
+            <DialogDescription>거래처를 검색하여 선택하세요. 선택하면 자동으로 적용됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="거래처명 검색" value={custSearchKeyword}
+              onChange={(e) => setCustSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchCustomers()} className="text-sm" />
+            <Button onClick={searchCustomers} disabled={custSearchLoading} className="shrink-0 gap-1">
+              {custSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left">거래처명</th>
+                  <th className="px-3 py-2 text-left">대표자</th>
+                  <th className="px-3 py-2 text-left">사업자번호</th>
+                  <th className="px-3 py-2 text-left">연락처</th>
+                  <th className="w-16 px-2 py-2 text-center">선택</th>
+                </tr>
+              </thead>
+              <tbody>
+                {custSearchResults.length === 0 ? (
+                  <tr><td colSpan={5} className="px-4 py-8 text-center text-gray-400">
+                    {custSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : custSearchResults.map((row, i) => (
+                  <tr key={row.objid || i} className="cursor-pointer border-t hover:bg-blue-50"
+                    onClick={() => selectCustomer(row)}>
+                    <td className="px-3 py-2 font-medium">{row.customer_name || "-"}</td>
+                    <td className="px-3 py-2">{row.contact_person || "-"}</td>
+                    <td className="px-3 py-2">{row.business_number || "-"}</td>
+                    <td className="px-3 py-2">{row.contact_phone || "-"}</td>
+                    <td className="px-2 py-2 text-center">
+                      <Button size="sm" variant="outline" className="h-6 text-xs"
+                        onClick={(e) => { e.stopPropagation(); selectCustomer(row); }}>선택</Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCustSearchOpen(false)}>취소</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 품목 검색 모달 ═══ */}
+      <Dialog open={itemSearchOpen} onOpenChange={setItemSearchOpen}>
+        <DialogContent className="flex max-h-[80vh] max-w-3xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>품목 검색</DialogTitle>
+            <DialogDescription>추가할 품목을 검색하여 선택하세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItemInfo()} className="text-sm" />
+            <Button onClick={searchItemInfo} disabled={itemSearchLoading} className="shrink-0 gap-1">
+              {itemSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="w-10 px-2 py-2 text-center">선택</th>
+                  <th className="px-2 py-2 text-left">품목코드</th>
+                  <th className="px-2 py-2 text-left">품명</th>
+                  <th className="px-2 py-2 text-left">규격</th>
+                  <th className="w-16 px-2 py-2 text-center">단위</th>
+                  <th className="w-24 px-2 py-2 text-right">단가</th>
+                </tr>
+              </thead>
+              <tbody>
+                {itemSearchResults.length === 0 ? (
+                  <tr><td colSpan={6} className="px-4 py-8 text-center text-gray-400">
+                    {itemSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : itemSearchResults.map((row, i) => {
+                  const key = row.item_number || row.objid || row.id || i;
+                  const checked = itemSelectedMap.has(key);
+                  return (
+                    <tr key={key} className={`cursor-pointer border-t ${checked ? "bg-blue-50" : "hover:bg-gray-50"}`}
+                      onClick={() => toggleItemSelect(row)}>
+                      <td className="px-2 py-1.5 text-center">
+                        <input type="checkbox" checked={checked} readOnly className="accent-blue-500" />
+                      </td>
+                      <td className="px-2 py-1.5">{row.item_number || row.item_code || "-"}</td>
+                      <td className="px-2 py-1.5">{row.item_name || "-"}</td>
+                      <td className="px-2 py-1.5">{row.spec || row.standard || "-"}</td>
+                      <td className="px-2 py-1.5 text-center">{row.unit || "EA"}</td>
+                      <td className="px-2 py-1.5 text-right">{fmt(String(row.selling_price || row.standard_price || 0))}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter className="flex items-center justify-between">
+            <span className="text-xs text-gray-500">선택: {itemSelectedMap.size}건</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSearchOpen(false)}>취소</Button>
+              <Button onClick={addSelectedItemsToQuote} disabled={itemSelectedMap.size === 0} className="gap-1">
+                <Plus className="h-4 w-4" /> 선택 품목 추가
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ExcelUploadModal open={excelOpen} onOpenChange={setExcelOpen} tableName={MASTER_TABLE} />
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_16/sales/sales-item/page.tsx b/frontend/app/(main)/COMPANY_16/sales/sales-item/page.tsx
index 0a710894..1558ac64 100644
--- a/frontend/app/(main)/COMPANY_16/sales/sales-item/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/sales/sales-item/page.tsx
@@ -402,25 +402,51 @@ export default function SalesItemPage() {
       if (found) custInfo = found;
     } catch { /* skip */ }
 
-    const mappingRows = [{
-      _id: `m_existing_${row.id}`,
-      customer_item_code: row.customer_item_code || "",
-      customer_item_name: row.customer_item_name || "",
-    }].filter((m) => m.customer_item_code || m.customer_item_name);
+    // 매핑 조회
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/customer_item_mapping/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: custKey },
+          { columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
+        ]}, autoFilter: true,
+      });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.customer_item_code || m.customer_item_name)
+        .map((m: any) => ({
+          _id: `m_existing_${m.id}`,
+          customer_item_code: m.customer_item_code || "",
+          customer_item_name: m.customer_item_name || "",
+        }));
+    } catch { /* skip */ }
 
-    const priceRows = [{
-      _id: `p_existing_${row.id}`,
-      start_date: row.start_date || "",
-      end_date: row.end_date || "",
-      currency_code: row.currency_code || "CAT_MLAMDKVN_PZJI",
-      base_price_type: row.base_price_type || "CAT_MLAMFGFT_4RZW",
-      base_price: row.base_price ? String(row.base_price) : "",
-      discount_type: row.discount_type || "",
-      discount_value: row.discount_value ? String(row.discount_value) : "",
-      rounding_type: row.rounding_type || "",
-      rounding_unit_value: row.rounding_unit_value || "",
-      calculated_price: row.calculated_price ? String(row.calculated_price) : "",
-    }].filter((p) => p.base_price || p.start_date);
+    // 단가 전체 조회
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: custKey },
+          { columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date ? String(p.start_date).split("T")[0] : "",
+        end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
 
     if (priceRows.length === 0) {
       priceRows.push({
@@ -782,23 +808,17 @@ export default function SalesItemPage() {
                                 "cursor-pointer h-[41px]",
                                 customerCheckedIds.includes(row.id) ? "bg-primary/[0.08]" : "hover:bg-accent"
                               )}
+                              onClick={() => {
+                                setCustomerCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
                               onDoubleClick={() => openEditCust(row)}
                             >
-                              <TableCell
-                                className="text-center px-2"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  setCustomerCheckedIds((prev) =>
-                                    prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
-                                  );
-                                }}
-                              >
+                              <TableCell className="text-center px-2">
                                 <Checkbox
                                   checked={customerCheckedIds.includes(row.id)}
-                                  onCheckedChange={(checked) => {
-                                    if (checked === true) setCustomerCheckedIds((prev) => [...prev, row.id]);
-                                    else setCustomerCheckedIds((prev) => prev.filter((id) => id !== row.id));
-                                  }}
+                                  onCheckedChange={() => {}}
                                 />
                               </TableCell>
                               <TableCell className="text-[13px] font-mono text-muted-foreground">{row.customer_code}</TableCell>
diff --git a/frontend/app/(main)/COMPANY_16/sales/shipping-order/page.tsx b/frontend/app/(main)/COMPANY_16/sales/shipping-order/page.tsx
index 4ab5a9ad..2ed29b40 100644
--- a/frontend/app/(main)/COMPANY_16/sales/shipping-order/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/sales/shipping-order/page.tsx
@@ -363,7 +363,7 @@ export default function ShippingOrderPage() {
           spec: item.spec,
           material: item.material,
           orderQty: item.orderQty,
-          planQty: item.planQty,
+          planQty: item.orderQty,
           shipQty: 0,
           sourceType: item.sourceType,
           shipmentPlanId: item.shipmentPlanId,
diff --git a/frontend/app/(main)/COMPANY_29/design/change-management/page.tsx b/frontend/app/(main)/COMPANY_29/design/change-management/page.tsx
index 8879ba8a..39f06769 100644
--- a/frontend/app/(main)/COMPANY_29/design/change-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/design/change-management/page.tsx
@@ -18,7 +18,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -32,16 +31,8 @@ import {
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable";
-import {
-  Search,
-  RotateCcw,
   Plus,
   Save,
-  ClipboardList,
   Inbox,
   Pencil,
   FileText,
@@ -50,6 +41,7 @@ import {
   Paperclip,
   Upload,
   Loader2,
+  Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
@@ -62,6 +54,10 @@ import {
   createEcn,
   updateEcn,
 } from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 // --- Types ---
 type ChangeType = "설계오류" | "원가절감" | "고객요청" | "공정개선" | "법규대응";
@@ -119,65 +115,83 @@ interface EcnItem {
 const getChangeTypeStyle = (type: ChangeType) => {
   switch (type) {
     case "설계오류":
-      return "bg-rose-100 text-rose-800 border-rose-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "원가절감":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-success/10 text-success border-success/20";
     case "고객요청":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-info/10 text-info border-info/20";
     case "공정개선":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-warning/10 text-warning border-warning/20";
     case "법규대응":
-      return "bg-purple-100 text-purple-800 border-purple-200";
+      return "bg-primary/10 text-primary border-primary/20";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getEcrStatusStyle = (status: EcrStatus) => {
   switch (status) {
     case "요청접수":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-info/10 text-info border-info/20";
     case "영향도분석":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-warning/10 text-warning border-warning/20";
     case "ECN발행":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-success/10 text-success border-success/20";
     case "기각":
-      return "bg-slate-100 text-slate-800 border-slate-200";
+      return "bg-muted text-muted-foreground border-border";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getEcnStatusStyle = (status: EcnStatus) => {
   switch (status) {
     case "ECN발행":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-info/10 text-info border-info/20";
     case "도면변경":
-      return "bg-purple-100 text-purple-800 border-purple-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "통보완료":
-      return "bg-teal-100 text-teal-800 border-teal-200";
+      return "bg-warning/10 text-warning border-warning/20";
     case "적용완료":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-success/10 text-success border-success/20";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getImpactBadgeStyle = (impact: string) => {
   switch (impact) {
     case "BOM":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-info/10 text-info border-info/20";
     case "공정":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-warning/10 text-warning border-warning/20";
     case "금형":
-      return "bg-rose-100 text-rose-800 border-rose-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "검사기준":
-      return "bg-purple-100 text-purple-800 border-purple-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "구매":
     case "원가":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-success/10 text-success border-success/20";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getTimelineStatusStyle = (status: string) => {
+  switch (status) {
+    case "기각":
+      return "bg-muted text-muted-foreground border-border";
+    case "적용완료":
+    case "ECN발행":
+      return "bg-success/10 text-success border-success/20";
+    case "영향도분석":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "도면변경":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "통보완료":
+      return "bg-info/10 text-info border-info/20";
+    default:
+      return "bg-info/10 text-info border-info/20";
   }
 };
 
@@ -278,12 +292,12 @@ function Timeline({ history }: { history: EcrHistory[] }) {
                 className={cn(
                   "w-3 h-3 rounded-full border-2 mt-1.5 shrink-0",
                   isLast && isRejected
-                    ? "bg-rose-500 border-rose-300"
+                    ? "bg-destructive border-destructive/60"
                     : isLast && isCompleted
-                      ? "bg-emerald-500 border-emerald-300"
+                      ? "bg-success border-success/60"
                       : isLast
                         ? "bg-primary border-primary/50 ring-4 ring-primary/10"
-                        : "bg-emerald-500 border-emerald-300"
+                        : "bg-success border-success/60"
                 )}
               />
               {!isLast && (
@@ -295,19 +309,7 @@ function Timeline({ history }: { history: EcrHistory[] }) {
                 <span
                   className={cn(
                     "px-2 py-0.5 rounded-full text-[10px] font-medium border",
-                    h.status === "기각"
-                      ? "bg-slate-100 text-slate-800 border-slate-200"
-                      : h.status === "적용완료"
-                        ? "bg-emerald-100 text-emerald-800 border-emerald-200"
-                        : h.status === "ECN발행"
-                          ? "bg-emerald-100 text-emerald-800 border-emerald-200"
-                          : h.status === "영향도분석"
-                            ? "bg-amber-100 text-amber-800 border-amber-200"
-                            : h.status === "도면변경"
-                              ? "bg-purple-100 text-purple-800 border-purple-200"
-                              : h.status === "통보완료"
-                                ? "bg-teal-100 text-teal-800 border-teal-200"
-                                : "bg-blue-100 text-blue-800 border-blue-200"
+                    getTimelineStatusStyle(h.status)
                   )}
                 >
                   {h.status}
@@ -325,20 +327,45 @@ function Timeline({ history }: { history: EcrHistory[] }) {
   );
 }
 
+// --- Grid Columns ---
+const ECR_GRID_COLUMNS = [
+  { key: "request_no", label: "ECR번호" },
+  { key: "change_type", label: "변경유형" },
+  { key: "status", label: "상태" },
+  { key: "urgency", label: "긴급" },
+  { key: "target_name", label: "대상 품목/설비" },
+  { key: "drawing_no", label: "도면번호" },
+  { key: "req_dept", label: "요청부서" },
+  { key: "requester", label: "요청자" },
+  { key: "request_date", label: "요청일자" },
+  { key: "ecn_no", label: "관련 ECN" },
+];
+
+const ECN_GRID_COLUMNS = [
+  { key: "ecn_no", label: "ECN번호" },
+  { key: "status", label: "상태" },
+  { key: "target", label: "대상 품목/설비" },
+  { key: "drawing_after", label: "도면 (변경 후)" },
+  { key: "designer", label: "설계담당" },
+  { key: "ecn_date", label: "발행일자" },
+  { key: "apply_date", label: "적용일자" },
+  { key: "notify_depts", label: "통보 부서" },
+  { key: "ecr_id", label: "관련 ECR" },
+];
+
 // --- Main Component ---
 export default function DesignChangeManagementPage() {
+  const tsEcr = useTableSettings("c16-change-management-ecr", "dsn_design_request", ECR_GRID_COLUMNS);
+  const tsEcn = useTableSettings("c16-change-management-ecn", "dsn_ecn", ECN_GRID_COLUMNS);
   const [currentTab, setCurrentTab] = useState<TabType>("ecr");
   const [ecrData, setEcrData] = useState<EcrItem[]>([]);
   const [ecnData, setEcnData] = useState<EcnItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
 
-  // 검색 상태
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
-  const [searchStatus, setSearchStatus] = useState<string>("all");
-  const [searchChangeType, setSearchChangeType] = useState<string>("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // ECR 모달
   const [isEcrModalOpen, setIsEcrModalOpen] = useState(false);
@@ -356,13 +383,6 @@ export default function DesignChangeManagementPage() {
   const [rejectReason, setRejectReason] = useState("");
   const [rejectTargetId, setRejectTargetId] = useState("");
 
-  useEffect(() => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(today.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-  }, []);
 
   const fetchData = useCallback(async () => {
     setLoading(true);
@@ -379,7 +399,7 @@ export default function DesignChangeManagementPage() {
         setEcnData((ecnRes.data as any[]).map((r) => mapEcnFromApi(r, ecrList)));
       }
     } catch {
-      toast.error("데이터를 불러오는데 실패했습니다.");
+      toast.error("데이터를 불러오는데 실패했어요.");
     } finally {
       setLoading(false);
     }
@@ -389,39 +409,66 @@ export default function DesignChangeManagementPage() {
     fetchData();
   }, [fetchData]);
 
+  // snake_case → camelCase 매핑 (ECR)
+  const ecrFieldMap: Record<string, string> = {
+    request_no: "id",
+    request_date: "date",
+    change_type: "changeType",
+    target_name: "target",
+    drawing_no: "drawingNo",
+    req_dept: "reqDept",
+    ecn_no: "ecnNo",
+    apply_timing: "applyTiming",
+  };
+  // snake_case → camelCase 매핑 (ECN)
+  const ecnFieldMap: Record<string, string> = {
+    ecn_no: "id",
+    ecn_date: "date",
+    apply_date: "applyDate",
+    drawing_before: "drawingBefore",
+    drawing_after: "drawingAfter",
+    ecr_id: "ecrNo",
+    notify_depts: "notifyDepts",
+  };
+  const getFieldValue = (obj: any, colName: string, map: Record<string, string>): string => {
+    const key = map[colName] || colName;
+    const val = obj[key];
+    if (Array.isArray(val)) return val.join(",");
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
+  const applyFilters = (items: any[], map: Record<string, string>) => {
+    if (searchFilters.length === 0) return items;
+    return items.filter((item) => {
+      for (const f of searchFilters) {
+        const val = getFieldValue(item, f.columnName, map);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (val !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) return false;
+          if (to && val > to) return false;
+        }
+      }
+      return true;
+    });
+  };
+
   // --- Filtered Data ---
   const filteredEcr = useMemo(() => {
-    return ecrData
-      .filter((item) => {
-        if (searchDateFrom && item.date < searchDateFrom) return false;
-        if (searchDateTo && item.date > searchDateTo) return false;
-        if (searchStatus !== "all" && item.status !== searchStatus) return false;
-        if (searchChangeType !== "all" && item.changeType !== searchChangeType) return false;
-        if (searchKeyword) {
-          const kw = searchKeyword.toLowerCase();
-          const str = [item.id, item.target, item.requester, item.drawingNo].join(" ").toLowerCase();
-          if (!str.includes(kw)) return false;
-        }
-        return true;
-      })
-      .sort((a, b) => b.date.localeCompare(a.date));
-  }, [ecrData, searchDateFrom, searchDateTo, searchStatus, searchChangeType, searchKeyword]);
+    return applyFilters(ecrData, ecrFieldMap)
+      .sort((a: EcrItem, b: EcrItem) => b.date.localeCompare(a.date));
+  }, [ecrData, searchFilters]);
 
   const filteredEcn = useMemo(() => {
-    return ecnData
-      .filter((item) => {
-        if (searchDateFrom && item.date < searchDateFrom) return false;
-        if (searchDateTo && item.date > searchDateTo) return false;
-        if (searchStatus !== "all" && item.status !== searchStatus) return false;
-        if (searchKeyword) {
-          const kw = searchKeyword.toLowerCase();
-          const str = [item.id, item.target, item.designer, item.ecrNo].join(" ").toLowerCase();
-          if (!str.includes(kw)) return false;
-        }
-        return true;
-      })
-      .sort((a, b) => b.date.localeCompare(a.date));
-  }, [ecnData, searchDateFrom, searchDateTo, searchStatus, searchKeyword]);
+    return applyFilters(ecnData, ecnFieldMap)
+      .sort((a: EcnItem, b: EcnItem) => b.date.localeCompare(a.date));
+  }, [ecnData, searchFilters]);
 
   // --- Status Counts ---
   const ecrStatusCounts = useMemo(() => {
@@ -450,35 +497,21 @@ export default function DesignChangeManagementPage() {
   const handleTabSwitch = (tab: TabType) => {
     setCurrentTab(tab);
     setSelectedId(null);
-    setSearchStatus("all");
   };
 
-  // --- Search ---
-  const handleResetSearch = () => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(today.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-    setSearchStatus("all");
-    setSearchChangeType("all");
-    setSearchKeyword("");
-  };
-
-  const handleFilterByStatus = (status: string) => {
-    setSearchStatus(status);
+  const handleFilterByStatus = (_status: string) => {
+    // Status filter now handled by DynamicSearchFilter
   };
 
   // --- ECR/ECN Navigation ---
   const navigateToLink = (targetId: string) => {
+    setDetailOpen(false);
     if (targetId.startsWith("ECN")) {
       setCurrentTab("ecn");
       setSelectedId(targetId);
-      setSearchStatus("all");
     } else if (targetId.startsWith("ECR")) {
       setCurrentTab("ecr");
       setSelectedId(targetId);
-      setSearchStatus("all");
     }
   };
 
@@ -540,19 +573,19 @@ export default function DesignChangeManagementPage() {
 
   const handleSaveEcr = async () => {
     if (!ecrForm.changeType) {
-      toast.error("변경 유형을 선택하세요.");
+      toast.error("변경 유형을 선택해 주세요.");
       return;
     }
     if (!ecrForm.target?.trim()) {
-      toast.error("대상 품목/설비를 입력하세요.");
+      toast.error("대상 품목/설비를 입력해 주세요.");
       return;
     }
     if (!ecrForm.reason?.trim()) {
-      toast.error("변경 사유를 입력하세요.");
+      toast.error("변경 사유를 입력해 주세요.");
       return;
     }
     if (!ecrForm.content?.trim()) {
-      toast.error("변경 요구 내용을 입력하세요.");
+      toast.error("변경 요구 내용을 입력해 주세요.");
       return;
     }
 
@@ -581,11 +614,11 @@ export default function DesignChangeManagementPage() {
         apply_timing: ecrForm.applyTiming || "즉시",
       });
       if (res.success) {
-        toast.success("ECR이 수정되었습니다.");
+        toast.success("ECR이 수정되었어요.");
         setIsEcrModalOpen(false);
         fetchData();
       } else {
-        toast.error(res.message || "ECR 수정에 실패했습니다.");
+        toast.error(res.message || "ECR 수정에 실패했어요.");
       }
     } else {
       const res = await createDesignRequest({
@@ -606,11 +639,11 @@ export default function DesignChangeManagementPage() {
         history: [historyEntry],
       });
       if (res.success) {
-        toast.success("ECR이 등록되었습니다.");
+        toast.success("ECR이 등록되었어요.");
         setIsEcrModalOpen(false);
         fetchData();
       } else {
-        toast.error(res.message || "ECR 등록에 실패했습니다.");
+        toast.error(res.message || "ECR 등록에 실패했어요.");
       }
     }
   };
@@ -641,15 +674,15 @@ export default function DesignChangeManagementPage() {
 
   const handleSaveEcn = async () => {
     if (!ecnForm.after?.trim()) {
-      toast.error("변경 후(TO-BE) 내용을 입력하세요.");
+      toast.error("변경 후(TO-BE) 내용을 입력해 주세요.");
       return;
     }
     if (!ecnForm.applyDate) {
-      toast.error("적용일자를 입력하세요.");
+      toast.error("적용일자를 입력해 주세요.");
       return;
     }
     if (!ecnForm.ecrId) {
-      toast.error("관련 ECR 정보가 없습니다.");
+      toast.error("관련 ECR 정보가 없어요.");
       return;
     }
 
@@ -692,11 +725,11 @@ export default function DesignChangeManagementPage() {
         user_name: ecnForm.designer || "시스템",
         description: `${ecnNo} 발행`,
       });
-      toast.success("ECN이 발행되었습니다.");
+      toast.success("ECN이 발행되었어요.");
       setIsEcnModalOpen(false);
       fetchData();
     } else {
-      toast.error(res.message || "ECN 발행에 실패했습니다.");
+      toast.error(res.message || "ECN 발행에 실패했어요.");
     }
   };
 
@@ -709,19 +742,19 @@ export default function DesignChangeManagementPage() {
 
   const handleRejectSubmit = async () => {
     if (!rejectReason.trim()) {
-      toast.error("기각 사유를 입력하세요.");
+      toast.error("기각 사유를 입력해 주세요.");
       return;
     }
 
     const ecr = ecrData.find((r) => r.id === rejectTargetId);
     if (!ecr?._id) {
-      toast.error("ECR 정보를 찾을 수 없습니다.");
+      toast.error("ECR 정보를 찾을 수 없어요.");
       return;
     }
 
     const updateRes = await updateDesignRequest(ecr._id, { status: "기각", review_memo: rejectReason });
     if (!updateRes.success) {
-      toast.error(updateRes.message || "ECR 기각에 실패했습니다.");
+      toast.error(updateRes.message || "ECR 기각에 실패했어요.");
       return;
     }
     await addRequestHistory(ecr._id, {
@@ -730,571 +763,397 @@ export default function DesignChangeManagementPage() {
       user_name: "설계팀",
       description: rejectReason,
     });
-    toast.success("ECR이 기각되었습니다.");
+    toast.success("ECR이 기각되었어요.");
     setIsRejectModalOpen(false);
     fetchData();
   };
 
   // --- Stat Cards ---
   const ecrStatCards = [
-    { label: "요청접수", value: ecrStatusCounts["요청접수"] || 0, gradient: "from-indigo-500 to-blue-600", textColor: "text-white" },
-    { label: "영향도분석", value: ecrStatusCounts["영향도분석"] || 0, gradient: "from-amber-400 to-orange-500", textColor: "text-white" },
-    { label: "ECN발행", value: ecrStatusCounts["ECN발행"] || 0, gradient: "from-emerald-400 to-green-600", textColor: "text-white" },
+    { label: "요청접수", value: ecrStatusCounts["요청접수"] || 0, color: "text-info" },
+    { label: "영향도분석", value: ecrStatusCounts["영향도분석"] || 0, color: "text-warning" },
+    { label: "ECN발행", value: ecrStatusCounts["ECN발행"] || 0, color: "text-success" },
   ];
 
   const ecnStatCards = [
-    { label: "도면변경", value: ecnStatusCounts["도면변경"] || 0, gradient: "from-purple-400 to-violet-600", textColor: "text-white" },
-    { label: "통보완료", value: ecnStatusCounts["통보완료"] || 0, gradient: "from-teal-400 to-cyan-600", textColor: "text-white" },
-    { label: "적용완료", value: ecnStatusCounts["적용완료"] || 0, gradient: "from-emerald-400 to-green-600", textColor: "text-white" },
+    { label: "도면변경", value: ecnStatusCounts["도면변경"] || 0, color: "text-primary" },
+    { label: "통보완료", value: ecnStatusCounts["통보완료"] || 0, color: "text-info" },
+    { label: "적용완료", value: ecnStatusCounts["적용완료"] || 0, color: "text-success" },
   ];
 
   const currentStatCards = currentTab === "ecr" ? ecrStatCards : ecnStatCards;
   const currentList = currentTab === "ecr" ? filteredEcr : filteredEcn;
-  const currentStatuses = currentTab === "ecr" ? ECR_STATUSES : ECN_STATUSES;
+
+  const handleRowClick = (id: string) => {
+    setSelectedId(id);
+    setDetailOpen(true);
+  };
 
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4 relative">
+    <div className="flex flex-col h-full gap-3 p-3 relative">
       {loading && (
         <div className="absolute inset-0 bg-background/50 flex items-center justify-center z-50">
           <Loader2 className="h-8 w-8 animate-spin text-primary" />
         </div>
       )}
-      {/* 검색 섹션 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">기간</Label>
-            <div className="flex items-center gap-2">
-              <Input
-                type="date"
-                className="w-[140px] h-9"
-                value={searchDateFrom}
-                onChange={(e) => setSearchDateFrom(e.target.value)}
-              />
-              <span className="text-muted-foreground">~</span>
-              <Input
-                type="date"
-                className="w-[140px] h-9"
-                value={searchDateTo}
-                onChange={(e) => setSearchDateTo(e.target.value)}
-              />
-            </div>
-          </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">구분</Label>
-            <Select value={currentTab} onValueChange={(v) => handleTabSwitch(v as TabType)}>
-              <SelectTrigger className="w-[150px] h-9">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="ecr">ECR (변경요청)</SelectItem>
-                <SelectItem value="ecn">ECN (변경통지)</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+      {/* 탭 선택 + 검색 필터 */}
+      <div className="shrink-0 flex flex-col gap-2">
+        <div className="flex items-center gap-3 px-1">
+          <Select value={currentTab} onValueChange={(v) => handleTabSwitch(v as TabType)}>
+            <SelectTrigger className="w-[170px] h-9">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="ecr">ECR (변경요청)</SelectItem>
+              <SelectItem value="ecn">ECN (변경통지)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        {currentTab === "ecr" ? (
+          <DynamicSearchFilter
+            tableName="dsn_design_request"
+            filterId="c16-change-management-ecr"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={tsEcr.filterConfig}
+            dataCount={filteredEcr.length}
+          />
+        ) : (
+          <DynamicSearchFilter
+            tableName="dsn_ecn"
+            filterId="c16-change-management-ecn"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={tsEcn.filterConfig}
+            dataCount={filteredEcn.length}
+          />
+        )}
+      </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[130px] h-9">
-                <SelectValue placeholder="전체" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">상태 전체</SelectItem>
-                {currentStatuses.map((s) => (
-                  <SelectItem key={s} value={s}>
-                    {s}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
+      {/* 현황 카드 */}
+      <div className="grid grid-cols-3 gap-3 shrink-0">
+        {currentStatCards.map((card) => (
+          <button
+            key={card.label}
+            onClick={() => handleFilterByStatus(card.label)}
+            className="rounded-lg border bg-card px-3 py-2 text-left transition-colors hover:bg-accent/50"
+          >
+            <div className="text-[10px] text-muted-foreground">{card.label}</div>
+            <div className={cn("text-xl font-bold", card.color)}>{card.value}</div>
+          </button>
+        ))}
+      </div>
 
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold">
+            {currentTab === "ecr" ? "설계변경요청(ECR) 목록" : "설계변경통지(ECN) 목록"}
+          </h2>
+          <Badge variant="secondary" className="font-mono">{currentList.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
           {currentTab === "ecr" && (
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">변경유형</Label>
-              <Select value={searchChangeType} onValueChange={setSearchChangeType}>
-                <SelectTrigger className="w-[140px] h-9">
-                  <SelectValue placeholder="전체" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">변경유형 전체</SelectItem>
-                  {CHANGE_TYPES.map((t) => (
-                    <SelectItem key={t} value={t}>
-                      {t}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          )}
-
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">검색어</Label>
-            <Input
-              placeholder="ECR/ECN번호 / 품목 / 요청자"
-              className="w-[260px] h-9"
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-            />
-          </div>
-
-          <div className="flex-1" />
-
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
+            <Button size="sm" onClick={openEcrRegisterModal}>
+              <Plus className="w-4 h-4 mr-1.5" /> ECR 등록
             </Button>
-          </div>
-        </CardContent>
-      </Card>
+          )}
+          <Button variant="ghost" size="sm" onClick={() => (currentTab === "ecr" ? tsEcr : tsEcn).setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
 
-      {/* 메인 분할 레이아웃 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
-        <ResizablePanelGroup direction="horizontal">
-          {/* 왼쪽: 목록 */}
-          <ResizablePanel defaultSize={65} minSize={35}>
-            <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2">
-                  <ClipboardList className="w-4 h-4" />
-                  {currentTab === "ecr" ? "설계변경요청(ECR) 목록" : "설계변경통지(ECN) 목록"}
-                  <Badge variant="secondary" className="font-normal">
-                    {currentList.length}건
-                  </Badge>
-                </div>
-                {currentTab === "ecr" && (
-                  <Button size="sm" onClick={openEcrRegisterModal}>
-                    <Plus className="w-4 h-4 mr-1.5" /> ECR 등록
-                  </Button>
-                )}
-              </div>
+      {/* 테이블 영역 */}
+      <div className="flex-1 flex flex-col overflow-hidden border rounded-lg bg-card">
+        <div className="flex-1 overflow-auto">
+          {currentTab === "ecr" ? (
+            <EDataTable
+              columns={[
+                { key: "id", label: "ECR번호", width: "w-[140px]", render: (val: any) => <span className="font-semibold text-primary">{val}</span> },
+                { key: "changeType", label: "변경유형", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getChangeTypeStyle(val))}>{val}</span> },
+                { key: "status", label: "상태", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcrStatusStyle(val))}>{val}</span> },
+                { key: "urgency", label: "긴급", width: "w-[60px]", align: "center" as const, render: (val: any) => val === "긴급" ? <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-destructive/10 text-destructive border-destructive/20">긴급</span> : <span>-</span> },
+                { key: "target", label: "대상 품목/설비", width: "w-[200px]" },
+                { key: "drawingNo", label: "도면번호", width: "w-[150px]" },
+                { key: "reqDept", label: "요청부서", width: "w-[80px]" },
+                { key: "requester", label: "요청자", width: "w-[70px]" },
+                { key: "date", label: "요청일자", width: "w-[100px]" },
+                { key: "ecnNo", label: "관련 ECN", width: "w-[130px]", render: (val: any) => val ? <button className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-info/10 text-info border border-info/20 hover:bg-info/20 transition-colors" onClick={(e) => { e.stopPropagation(); navigateToLink(val); }}>{val} <ArrowRight className="w-3 h-3 inline" /></button> : <span>-</span> },
+              ] as EDataTableColumn<EcrItem>[]}
+              data={tsEcr.groupData(filteredEcr)}
+              rowKey={(row) => row.id}
+              selectedId={selectedId}
+              onSelect={(id) => { if (id) handleRowClick(id); }}
+              onRowClick={(row) => handleRowClick(row.id)}
+              emptyMessage="조건에 맞는 ECR이 없어요"
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+            />
+          ) : (
+            <EDataTable
+              columns={[
+                { key: "id", label: "ECN번호", width: "w-[140px]", render: (val: any) => <span className="font-semibold text-primary">{val}</span> },
+                { key: "status", label: "상태", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcnStatusStyle(val))}>{val}</span> },
+                { key: "target", label: "대상 품목/설비", width: "w-[200px]" },
+                { key: "drawingAfter", label: "도면 (변경 후)", width: "w-[160px]", render: (val: any) => <span className="text-[13px] text-success font-medium">{val}</span> },
+                { key: "designer", label: "설계담당", width: "w-[80px]" },
+                { key: "date", label: "발행일자", width: "w-[100px]" },
+                { key: "applyDate", label: "적용일자", width: "w-[100px]" },
+                { key: "notifyDepts", label: "통보 부서", width: "w-[140px]", render: (val: any) => <span className="text-[13px] text-muted-foreground">{Array.isArray(val) ? val.join(", ") : val}</span> },
+                { key: "ecrNo", label: "관련 ECR", width: "w-[130px]", render: (val: any) => <button className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-warning/10 text-warning border border-warning/20 hover:bg-warning/20 transition-colors" onClick={(e) => { e.stopPropagation(); navigateToLink(val); }}>{val} <ArrowRight className="w-3 h-3 inline" /></button> },
+              ] as EDataTableColumn<EcnItem>[]}
+              data={tsEcn.groupData(filteredEcn)}
+              rowKey={(row) => row.id}
+              selectedId={selectedId}
+              onSelect={(id) => { if (id) handleRowClick(id); }}
+              onRowClick={(row) => handleRowClick(row.id)}
+              emptyMessage="조건에 맞는 ECN이 없어요"
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+            />
+          )}
+        </div>
+      </div>
 
-              <div className="flex-1 overflow-auto">
-                {currentTab === "ecr" ? (
-                  <Table>
-                    <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                      <TableRow>
-                        <TableHead className="w-[50px] text-center">No</TableHead>
-                        <TableHead className="w-[140px]">ECR번호</TableHead>
-                        <TableHead className="w-[90px] text-center">변경유형</TableHead>
-                        <TableHead className="w-[90px] text-center">상태</TableHead>
-                        <TableHead className="w-[60px] text-center">긴급</TableHead>
-                        <TableHead className="w-[200px]">대상 품목/설비</TableHead>
-                        <TableHead className="w-[150px]">도면번호</TableHead>
-                        <TableHead className="w-[80px]">요청부서</TableHead>
-                        <TableHead className="w-[70px]">요청자</TableHead>
-                        <TableHead className="w-[100px]">요청일자</TableHead>
-                        <TableHead className="w-[130px]">관련 ECN</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {filteredEcr.length === 0 ? (
-                        <TableRow>
-                          <TableCell colSpan={11} className="h-32 text-center text-muted-foreground">
-                            <div className="flex flex-col items-center gap-2">
-                              <Inbox className="w-8 h-8 text-muted-foreground/50" />
-                              <span>조건에 맞는 ECR이 없습니다</span>
-                            </div>
-                          </TableCell>
-                        </TableRow>
+      {/* 상세 정보 다이얼로그 */}
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="max-w-[900px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{currentTab === "ecr" ? `ECR 상세 — ${selectedEcr?.id || ""}` : `ECN 상세 — ${selectedEcn?.id || ""}`}</DialogTitle>
+            <DialogDescription>{currentTab === "ecr" ? "설계변경요청의 상세 정보를 확인해요." : "설계변경통지의 상세 정보를 확인해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="space-y-5">
+          {/* ECR 상세 */}
+          {selectedEcr ? (
+            <>
+              <section>
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
+                  기본 정보
+                </h3>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">ECR번호</span>
+                    <span className="font-medium text-primary">{selectedEcr.id}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">상태</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcrStatusStyle(selectedEcr.status))}>
+                      {selectedEcr.status}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">변경 유형</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getChangeTypeStyle(selectedEcr.changeType))}>
+                      {selectedEcr.changeType}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">긴급도</span>
+                    <span>
+                      {selectedEcr.urgency === "긴급" ? (
+                        <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-destructive/10 text-destructive border-destructive/20">긴급</span>
                       ) : (
-                        filteredEcr.map((item, idx) => (
-                          <TableRow
-                            key={item.id}
-                            className={cn(
-                              "cursor-pointer hover:bg-muted/50 transition-colors",
-                              selectedId === item.id && "bg-primary/5"
-                            )}
-                            onClick={() => setSelectedId(item.id)}
-                          >
-                            <TableCell className="text-center text-muted-foreground">{idx + 1}</TableCell>
-                            <TableCell className="font-semibold text-primary">{item.id}</TableCell>
-                            <TableCell className="text-center">
-                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getChangeTypeStyle(item.changeType))}>
-                                {item.changeType}
-                              </span>
-                            </TableCell>
-                            <TableCell className="text-center">
-                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcrStatusStyle(item.status))}>
-                                {item.status}
-                              </span>
-                            </TableCell>
-                            <TableCell className="text-center">
-                              {item.urgency === "긴급" ? (
-                                <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-rose-100 text-rose-800 border-rose-200">
-                                  긴급
-                                </span>
-                              ) : (
-                                "-"
-                              )}
-                            </TableCell>
-                            <TableCell className="font-medium">{item.target}</TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{item.drawingNo}</TableCell>
-                            <TableCell>{item.reqDept}</TableCell>
-                            <TableCell>{item.requester}</TableCell>
-                            <TableCell>{item.date}</TableCell>
-                            <TableCell>
-                              {item.ecnNo ? (
-                                <button
-                                  className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200 transition-colors"
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    navigateToLink(item.ecnNo);
-                                  }}
-                                >
-                                  {item.ecnNo} <ArrowRight className="w-3 h-3 inline" />
-                                </button>
-                              ) : (
-                                "-"
-                              )}
-                            </TableCell>
-                          </TableRow>
-                        ))
+                        "보통"
                       )}
-                    </TableBody>
-                  </Table>
-                ) : (
-                  <Table>
-                    <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                      <TableRow>
-                        <TableHead className="w-[50px] text-center">No</TableHead>
-                        <TableHead className="w-[140px]">ECN번호</TableHead>
-                        <TableHead className="w-[90px] text-center">상태</TableHead>
-                        <TableHead className="w-[200px]">대상 품목/설비</TableHead>
-                        <TableHead className="w-[160px]">도면 (변경 후)</TableHead>
-                        <TableHead className="w-[80px]">설계담당</TableHead>
-                        <TableHead className="w-[100px]">발행일자</TableHead>
-                        <TableHead className="w-[100px]">적용일자</TableHead>
-                        <TableHead className="w-[140px]">통보 부서</TableHead>
-                        <TableHead className="w-[130px]">관련 ECR</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {filteredEcn.length === 0 ? (
-                        <TableRow>
-                          <TableCell colSpan={10} className="h-32 text-center text-muted-foreground">
-                            <div className="flex flex-col items-center gap-2">
-                              <Inbox className="w-8 h-8 text-muted-foreground/50" />
-                              <span>조건에 맞는 ECN이 없습니다</span>
-                            </div>
-                          </TableCell>
-                        </TableRow>
-                      ) : (
-                        filteredEcn.map((item, idx) => (
-                          <TableRow
-                            key={item.id}
-                            className={cn(
-                              "cursor-pointer hover:bg-muted/50 transition-colors",
-                              selectedId === item.id && "bg-primary/5"
-                            )}
-                            onClick={() => setSelectedId(item.id)}
-                          >
-                            <TableCell className="text-center text-muted-foreground">{idx + 1}</TableCell>
-                            <TableCell className="font-semibold text-primary">{item.id}</TableCell>
-                            <TableCell className="text-center">
-                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcnStatusStyle(item.status))}>
-                                {item.status}
-                              </span>
-                            </TableCell>
-                            <TableCell className="font-medium">{item.target}</TableCell>
-                            <TableCell className="text-xs text-emerald-600 font-medium">{item.drawingAfter}</TableCell>
-                            <TableCell>{item.designer}</TableCell>
-                            <TableCell>{item.date}</TableCell>
-                            <TableCell>{item.applyDate}</TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{item.notifyDepts.join(", ")}</TableCell>
-                            <TableCell>
-                              <button
-                                className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 transition-colors"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  navigateToLink(item.ecrNo);
-                                }}
-                              >
-                                {item.ecrNo} <ArrowRight className="w-3 h-3 inline" />
-                              </button>
-                            </TableCell>
-                          </TableRow>
-                        ))
-                      )}
-                    </TableBody>
-                  </Table>
-                )}
-              </div>
-            </div>
-          </ResizablePanel>
-
-          <ResizableHandle withHandle />
-
-          {/* 오른쪽: 상세 */}
-          <ResizablePanel defaultSize={35} minSize={20}>
-            <div className="flex flex-col h-full bg-card">
-              <div className="flex items-center justify-between p-3 border-b shrink-0">
-                <span className="font-semibold flex items-center gap-2">
-                  <FileText className="w-4 h-4" />
-                  상세 정보
-                </span>
-                {selectedEcr && (
-                  <div className="flex items-center gap-1.5">
-                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => openEcrEditModal(selectedEcr.id)}>
-                      <Pencil className="w-3 h-3 mr-1" /> 수정
-                    </Button>
-                    {selectedEcr.status === "영향도분석" && (
-                      <>
-                        <Button size="sm" className="h-7 text-xs" onClick={() => openEcnIssueModal(selectedEcr.id)}>
-                          <FileText className="w-3 h-3 mr-1" /> ECN 발행
-                        </Button>
-                        <Button variant="destructive" size="sm" className="h-7 text-xs" onClick={() => openRejectModal(selectedEcr.id)}>
-                          <XCircle className="w-3 h-3 mr-1" /> 기각
-                        </Button>
-                      </>
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
+                    <span className="font-medium">{selectedEcr.target}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">도면번호</span>
+                    <span>{selectedEcr.drawingNo}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">요청부서 / 요청자</span>
+                    <span>{selectedEcr.reqDept} / {selectedEcr.requester}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">요청일자</span>
+                    <span>{selectedEcr.date}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">희망 적용시점</span>
+                    <span>{selectedEcr.applyTiming}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">관련 ECN</span>
+                    {selectedEcr.ecnNo ? (
+                      <button
+                        className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-info/10 text-info border border-info/20 hover:bg-info/20 transition-colors"
+                        onClick={() => navigateToLink(selectedEcr.ecnNo)}
+                      >
+                        {selectedEcr.ecnNo} <ArrowRight className="w-3 h-3 inline" />
+                      </button>
+                    ) : (
+                      <span className="text-muted-foreground">미발행</span>
                     )}
                   </div>
-                )}
-              </div>
+                </div>
+              </section>
 
-              <div className="flex-1 overflow-auto p-4 space-y-5">
-                {/* 현황 카드 */}
-                <div className="grid grid-cols-3 gap-3">
-                  {currentStatCards.map((card) => (
-                    <button
-                      key={card.label}
-                      onClick={() => handleFilterByStatus(card.label)}
-                      className={cn(
-                        "rounded-xl p-4 text-center bg-linear-to-br transition-all hover:-translate-y-0.5 hover:shadow-md cursor-pointer",
-                        card.gradient,
-                        card.textColor
-                      )}
-                    >
-                      <div className="text-xs font-medium opacity-90 mb-1">{card.label}</div>
-                      <div className="text-2xl font-bold">{card.value}</div>
-                    </button>
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
+                  {selectedEcr.reason}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 요구 내용</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
+                  {selectedEcr.content}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">영향 범위</h3>
+                <div className="flex flex-wrap gap-1.5">
+                  {selectedEcr.impact.map((imp) => (
+                    <span key={imp} className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getImpactBadgeStyle(imp))}>
+                      {imp}
+                    </span>
                   ))}
                 </div>
+              </section>
 
-                {/* ECR 상세 */}
-                {selectedEcr ? (
-                  <div className="space-y-5">
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
-                        기본 정보
-                      </h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">ECR번호</span>
-                          <span className="font-medium text-primary">{selectedEcr.id}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">상태</span>
-                          <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcrStatusStyle(selectedEcr.status))}>
-                            {selectedEcr.status}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">변경 유형</span>
-                          <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getChangeTypeStyle(selectedEcr.changeType))}>
-                            {selectedEcr.changeType}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">긴급도</span>
-                          <span>
-                            {selectedEcr.urgency === "긴급" ? (
-                              <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-rose-100 text-rose-800 border-rose-200">긴급</span>
-                            ) : (
-                              "보통"
-                            )}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
-                          <span className="font-medium">{selectedEcr.target}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">도면번호</span>
-                          <span>{selectedEcr.drawingNo}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">요청부서 / 요청자</span>
-                          <span>{selectedEcr.reqDept} / {selectedEcr.requester}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">요청일자</span>
-                          <span>{selectedEcr.date}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">희망 적용시점</span>
-                          <span>{selectedEcr.applyTiming}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">관련 ECN</span>
-                          {selectedEcr.ecnNo ? (
-                            <button
-                              className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200 transition-colors"
-                              onClick={() => navigateToLink(selectedEcr.ecnNo)}
-                            >
-                              {selectedEcr.ecnNo} <ArrowRight className="w-3 h-3 inline" />
-                            </button>
-                          ) : (
-                            <span className="text-muted-foreground">미발행</span>
-                          )}
-                        </div>
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
-                        {selectedEcr.reason}
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">변경 요구 내용</h3>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
-                        {selectedEcr.content}
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">영향 범위</h3>
-                      <div className="flex flex-wrap gap-1.5">
-                        {selectedEcr.impact.map((imp) => (
-                          <span key={imp} className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getImpactBadgeStyle(imp))}>
-                            {imp}
-                          </span>
-                        ))}
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
-                      <Timeline history={selectedEcr.history} />
-                    </section>
+              <section>
+                <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
+                <Timeline history={selectedEcr.history} />
+              </section>
+            </>
+          ) : selectedEcn ? (
+            <>
+              <section>
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
+                  ECN 기본 정보
+                </h3>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">ECN번호</span>
+                    <span className="font-medium text-primary">{selectedEcn.id}</span>
                   </div>
-                ) : selectedEcn ? (
-                  <div className="space-y-5">
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
-                        ECN 기본 정보
-                      </h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">ECN번호</span>
-                          <span className="font-medium text-primary">{selectedEcn.id}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">상태</span>
-                          <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcnStatusStyle(selectedEcn.status))}>
-                            {selectedEcn.status}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
-                          <span className="font-medium">{selectedEcn.target}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">설계담당</span>
-                          <span>{selectedEcn.designer}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">발행일자</span>
-                          <span>{selectedEcn.date}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">적용일자</span>
-                          <span>{selectedEcn.applyDate}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">관련 ECR</span>
-                          <button
-                            className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 transition-colors"
-                            onClick={() => navigateToLink(selectedEcn.ecrNo)}
-                          >
-                            {selectedEcn.ecrNo} <ArrowRight className="w-3 h-3 inline" />
-                          </button>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">통보 부서</span>
-                          <span className="text-xs">{selectedEcn.notifyDepts.join(", ")}</span>
-                        </div>
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">변경 전/후 비교</h3>
-                      <div className="grid grid-cols-2 gap-3">
-                        <div className="bg-rose-50 p-3 rounded-md border border-rose-200">
-                          <div className="text-xs font-semibold text-rose-800 mb-1.5">
-                            변경 전 ({selectedEcn.drawingBefore})
-                          </div>
-                          <div className="text-sm whitespace-pre-wrap">{selectedEcn.before}</div>
-                        </div>
-                        <div className="bg-emerald-50 p-3 rounded-md border border-emerald-200">
-                          <div className="text-xs font-semibold text-emerald-800 mb-1.5">
-                            변경 후 ({selectedEcn.drawingAfter})
-                          </div>
-                          <div className="text-sm whitespace-pre-wrap">{selectedEcn.after}</div>
-                        </div>
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap">
-                        {selectedEcn.reason}
-                      </div>
-                      {selectedEcn.remark && (
-                        <p className="text-xs text-muted-foreground mt-2">비고: {selectedEcn.remark}</p>
-                      )}
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
-                      <Timeline history={selectedEcn.history} />
-                    </section>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">상태</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcnStatusStyle(selectedEcn.status))}>
+                      {selectedEcn.status}
+                    </span>
                   </div>
-                ) : (
-                  <div className="flex flex-col items-center justify-center py-10 text-center">
-                    <div className="w-14 h-14 rounded-full bg-muted flex items-center justify-center mb-3">
-                      <FileText className="w-7 h-7 text-muted-foreground" />
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
+                    <span className="font-medium">{selectedEcn.target}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">설계담당</span>
+                    <span>{selectedEcn.designer}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">발행일자</span>
+                    <span>{selectedEcn.date}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">적용일자</span>
+                    <span>{selectedEcn.applyDate}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">관련 ECR</span>
+                    <button
+                      className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-warning/10 text-warning border border-warning/20 hover:bg-warning/20 transition-colors"
+                      onClick={() => navigateToLink(selectedEcn.ecrNo)}
+                    >
+                      {selectedEcn.ecrNo} <ArrowRight className="w-3 h-3 inline" />
+                    </button>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">통보 부서</span>
+                    <span className="text-xs">{selectedEcn.notifyDepts.join(", ")}</span>
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 전/후 비교</h3>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="bg-destructive/5 p-3 rounded-md border border-destructive/20">
+                    <div className="text-xs font-semibold text-destructive mb-1.5">
+                      변경 전 ({selectedEcn.drawingBefore})
                     </div>
-                    <p className="text-sm text-muted-foreground">좌측 목록에서 항목을 선택하세요</p>
+                    <div className="text-sm whitespace-pre-wrap">{selectedEcn.before}</div>
                   </div>
+                  <div className="bg-success/5 p-3 rounded-md border border-success/20">
+                    <div className="text-xs font-semibold text-success mb-1.5">
+                      변경 후 ({selectedEcn.drawingAfter})
+                    </div>
+                    <div className="text-sm whitespace-pre-wrap">{selectedEcn.after}</div>
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap">
+                  {selectedEcn.reason}
+                </div>
+                {selectedEcn.remark && (
+                  <p className="text-xs text-muted-foreground mt-2">비고: {selectedEcn.remark}</p>
                 )}
-              </div>
-            </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
+                <Timeline history={selectedEcn.history} />
+              </section>
+            </>
+          ) : null}
+        </div>
+          </div>
+          <DialogFooter>
+            {selectedEcr && (
+              <>
+                <Button variant="outline" size="sm" onClick={() => { setDetailOpen(false); openEcrEditModal(selectedEcr.id); }}>
+                  <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                </Button>
+                {selectedEcr.status === "영향도분석" && (
+                  <>
+                    <Button size="sm" onClick={() => { setDetailOpen(false); openEcnIssueModal(selectedEcr.id); }}>
+                      <FileText className="w-3.5 h-3.5 mr-1" /> ECN 발행
+                    </Button>
+                    <Button variant="destructive" size="sm" onClick={() => { setDetailOpen(false); openRejectModal(selectedEcr.id); }}>
+                      <XCircle className="w-3.5 h-3.5 mr-1" /> 기각
+                    </Button>
+                  </>
+                )}
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* ECR 등록/수정 모달 */}
       <Dialog open={isEcrModalOpen} onOpenChange={setIsEcrModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[950px] max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">
-              {isEcrEditMode ? "설계변경요청(ECR) 수정" : "설계변경요청(ECR) 등록"}
-            </DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              {isEcrEditMode ? "ECR 정보를 수정합니다." : "새로운 설계변경요청을 등록합니다."}
-            </DialogDescription>
+            <DialogTitle>{isEcrEditMode ? "설계변경요청(ECR) 수정" : "설계변경요청(ECR) 등록"}</DialogTitle>
+            <DialogDescription>{isEcrEditMode ? "ECR 정보를 수정해요." : "새로운 설계변경요청을 등록해요."}</DialogDescription>
           </DialogHeader>
-
-          <div className="flex-1 overflow-auto">
-            <div className="flex flex-col md:flex-row gap-5">
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-5 p-6">
               {/* 좌측: 요청 정보 */}
               <div className="md:w-[380px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
                 <h3 className="text-sm font-semibold pb-2 border-b">변경 요청 정보</h3>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">ECR번호</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">ECR번호</Label>
                   <Input value={ecrForm.id || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
                 </div>
 
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-xs sm:text-sm">요청일자</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청일자</Label>
                     <Input
                       type="date"
                       value={ecrForm.date || ""}
@@ -1303,7 +1162,7 @@ export default function DesignChangeManagementPage() {
                     />
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">희망 적용시점</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">희망 적용시점</Label>
                     <Select value={ecrForm.applyTiming || "즉시"} onValueChange={(v) => setEcrForm((p) => ({ ...p, applyTiming: v }))}>
                       <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                         <SelectValue />
@@ -1319,7 +1178,7 @@ export default function DesignChangeManagementPage() {
 
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 유형 <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 유형 <span className="text-destructive">*</span></Label>
                     <Select value={ecrForm.changeType || ""} onValueChange={(v) => setEcrForm((p) => ({ ...p, changeType: v as ChangeType }))}>
                       <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                         <SelectValue placeholder="선택" />
@@ -1332,7 +1191,7 @@ export default function DesignChangeManagementPage() {
                     </Select>
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">긴급도</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">긴급도</Label>
                     <Select value={ecrForm.urgency || "보통"} onValueChange={(v) => setEcrForm((p) => ({ ...p, urgency: v as "보통" | "긴급" }))}>
                       <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                         <SelectValue />
@@ -1346,7 +1205,7 @@ export default function DesignChangeManagementPage() {
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">대상 품목/설비 <span className="text-destructive">*</span></Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 품목/설비 <span className="text-destructive">*</span></Label>
                   <Input
                     value={ecrForm.target || ""}
                     onChange={(e) => setEcrForm((p) => ({ ...p, target: e.target.value }))}
@@ -1356,7 +1215,7 @@ export default function DesignChangeManagementPage() {
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">대상 도면번호</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 도면번호</Label>
                   <Input
                     value={ecrForm.drawingNo || ""}
                     onChange={(e) => setEcrForm((p) => ({ ...p, drawingNo: e.target.value }))}
@@ -1367,7 +1226,7 @@ export default function DesignChangeManagementPage() {
 
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-xs sm:text-sm">요청부서</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청부서</Label>
                     <Select value={ecrForm.reqDept || ""} onValueChange={(v) => setEcrForm((p) => ({ ...p, reqDept: v }))}>
                       <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                         <SelectValue placeholder="선택" />
@@ -1380,7 +1239,7 @@ export default function DesignChangeManagementPage() {
                     </Select>
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">요청자</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청자</Label>
                     <Input
                       value={ecrForm.requester || ""}
                       onChange={(e) => setEcrForm((p) => ({ ...p, requester: e.target.value }))}
@@ -1397,27 +1256,27 @@ export default function DesignChangeManagementPage() {
                   <h3 className="text-sm font-semibold pb-2 border-b">변경 내용</h3>
 
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 사유 <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 사유 <span className="text-destructive">*</span></Label>
                     <Textarea
                       value={ecrForm.reason || ""}
                       onChange={(e) => setEcrForm((p) => ({ ...p, reason: e.target.value }))}
-                      placeholder="변경이 필요한 구체적인 사유를 기술하세요"
+                      placeholder="변경이 필요한 구체적인 사유를 기술해 주세요"
                       className="min-h-[80px] resize-y text-xs sm:text-sm"
                     />
                   </div>
 
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 요구 내용 <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 요구 내용 <span className="text-destructive">*</span></Label>
                     <Textarea
                       value={ecrForm.content || ""}
                       onChange={(e) => setEcrForm((p) => ({ ...p, content: e.target.value }))}
-                      placeholder="어떻게 변경해야 하는지 구체적으로 기술하세요"
+                      placeholder="어떻게 변경해야 하는지 구체적으로 기술해 주세요"
                       className="min-h-[80px] resize-y text-xs sm:text-sm"
                     />
                   </div>
 
                   <div>
-                    <Label className="text-xs sm:text-sm">영향 범위 (해당 항목 체크)</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">영향 범위 (해당 항목 체크)</Label>
                     <div className="grid grid-cols-3 gap-2 mt-2">
                       {IMPACT_OPTIONS.map((opt) => (
                         <label
@@ -1447,15 +1306,12 @@ export default function DesignChangeManagementPage() {
                   </div>
                 </div>
               </div>
-            </div>
+        </div>
           </div>
-
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setIsEcrModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button onClick={handleSaveEcr} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              <Save className="w-4 h-4 mr-2" /> 저장
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEcrModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveEcr}>
+              <Save className="w-4 h-4 mr-1.5" /> 저장
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -1463,31 +1319,30 @@ export default function DesignChangeManagementPage() {
 
       {/* ECN 발행 모달 */}
       <Dialog open={isEcnModalOpen} onOpenChange={setIsEcnModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[950px] max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">ECN 발행 (설계변경통지)</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">ECR 기반으로 설계변경통지를 발행합니다.</DialogDescription>
+            <DialogTitle>ECN 발행 (설계변경통지)</DialogTitle>
+            <DialogDescription>ECR 기반으로 설계변경통지를 발행해요.</DialogDescription>
           </DialogHeader>
-
-          <div className="flex-1 overflow-auto">
-            <div className="flex flex-col md:flex-row gap-5">
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-5 p-6">
               {/* 좌측 */}
               <div className="md:w-[380px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
                 <h3 className="text-sm font-semibold pb-2 border-b">ECN 기본 정보</h3>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">ECN번호</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">ECN번호</Label>
                   <Input value={ecnForm.id || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">관련 ECR번호</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">관련 ECR번호</Label>
                   <Input value={ecnForm.ecrNo || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
                 </div>
 
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-xs sm:text-sm">발행일자</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">발행일자</Label>
                     <Input
                       type="date"
                       value={ecnForm.date || ""}
@@ -1496,7 +1351,7 @@ export default function DesignChangeManagementPage() {
                     />
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">적용일자 <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">적용일자 <span className="text-destructive">*</span></Label>
                     <Input
                       type="date"
                       value={ecnForm.applyDate || ""}
@@ -1507,12 +1362,12 @@ export default function DesignChangeManagementPage() {
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">대상 품목/설비</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 품목/설비</Label>
                   <Input value={ecnForm.target || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">도면번호 (변경 후)</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">도면번호 (변경 후)</Label>
                   <Input
                     value={ecnForm.drawingAfter || ""}
                     onChange={(e) => setEcnForm((p) => ({ ...p, drawingAfter: e.target.value }))}
@@ -1522,7 +1377,7 @@ export default function DesignChangeManagementPage() {
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">설계 담당</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설계 담당</Label>
                   <Select value={ecnForm.designer || ""} onValueChange={(v) => setEcnForm((p) => ({ ...p, designer: v }))}>
                     <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                       <SelectValue placeholder="선택" />
@@ -1541,7 +1396,7 @@ export default function DesignChangeManagementPage() {
                 <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
                   <h3 className="text-sm font-semibold pb-2 border-b">변경 전/후 비교</h3>
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 전 (AS-IS)</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 전 (AS-IS)</Label>
                     <Textarea
                       value={ecnForm.before || ""}
                       onChange={(e) => setEcnForm((p) => ({ ...p, before: e.target.value }))}
@@ -1550,7 +1405,7 @@ export default function DesignChangeManagementPage() {
                     />
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 후 (TO-BE) <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 후 (TO-BE) <span className="text-destructive">*</span></Label>
                     <Textarea
                       value={ecnForm.after || ""}
                       onChange={(e) => setEcnForm((p) => ({ ...p, after: e.target.value }))}
@@ -1583,7 +1438,7 @@ export default function DesignChangeManagementPage() {
                 <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
                   <h3 className="text-sm font-semibold pb-2 border-b">변경 사유 및 비고</h3>
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 사유 요약</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 사유 요약</Label>
                     <Textarea
                       value={ecnForm.reason || ""}
                       readOnly
@@ -1591,7 +1446,7 @@ export default function DesignChangeManagementPage() {
                     />
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">비고</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">비고</Label>
                     <Textarea
                       value={ecnForm.remark || ""}
                       onChange={(e) => setEcnForm((p) => ({ ...p, remark: e.target.value }))}
@@ -1601,15 +1456,12 @@ export default function DesignChangeManagementPage() {
                   </div>
                 </div>
               </div>
-            </div>
+        </div>
           </div>
-
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setIsEcnModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button onClick={handleSaveEcn} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              <FileText className="w-4 h-4 mr-2" /> ECN 발행
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEcnModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveEcn}>
+              <FileText className="w-4 h-4 mr-1.5" /> ECN 발행
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -1624,17 +1476,17 @@ export default function DesignChangeManagementPage() {
               ECR 기각
             </DialogTitle>
             <DialogDescription className="text-xs sm:text-sm">
-              {rejectTargetId}을 기각 처리합니다.
+              {rejectTargetId}을 기각 처리해요.
             </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-3 sm:space-y-4">
             <div>
-              <Label className="text-xs sm:text-sm">기각 사유 <span className="text-destructive">*</span></Label>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">기각 사유 <span className="text-destructive">*</span></Label>
               <Textarea
                 value={rejectReason}
                 onChange={(e) => setRejectReason(e.target.value)}
-                placeholder="기각 사유를 상세히 입력해주세요"
+                placeholder="기각 사유를 상세히 입력해 주세요"
                 className="min-h-[100px] resize-y text-xs sm:text-sm"
               />
             </div>
@@ -1650,6 +1502,23 @@ export default function DesignChangeManagementPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <TableSettingsModal
+        open={tsEcr.open}
+        onOpenChange={tsEcr.setOpen}
+        tableName={tsEcr.tableName}
+        settingsId={tsEcr.settingsId}
+        defaultVisibleKeys={tsEcr.defaultVisibleKeys}
+        onSave={tsEcr.applySettings}
+      />
+      <TableSettingsModal
+        open={tsEcn.open}
+        onOpenChange={tsEcn.setOpen}
+        tableName={tsEcn.tableName}
+        settingsId={tsEcn.settingsId}
+        defaultVisibleKeys={tsEcn.defaultVisibleKeys}
+        onSave={tsEcn.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_29/design/design-request/page.tsx b/frontend/app/(main)/COMPANY_29/design/design-request/page.tsx
index 29ec9df9..e83c22b3 100644
--- a/frontend/app/(main)/COMPANY_29/design/design-request/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/design/design-request/page.tsx
@@ -2,27 +2,25 @@
 
 import React, { useState, useMemo, useCallback, useEffect } from "react";
 import {
-  Search,
-  RotateCcw,
   Plus,
   Pencil,
   Trash2,
   Calendar,
   Upload,
-  PointerIcon,
   Ruler,
-  ClipboardList,
   FileText,
   Loader2,
+  Inbox,
+  Save,
+  Settings2,
 } from "lucide-react";
+import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Select,
   SelectContent,
@@ -35,14 +33,9 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogDescription,
   DialogFooter,
+  DialogDescription,
 } from "@/components/ui/dialog";
-import {
-  ResizablePanelGroup,
-  ResizablePanel,
-  ResizableHandle,
-} from "@/components/ui/resizable";
 import {
   Table,
   TableBody,
@@ -51,12 +44,16 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import {
   getDesignRequestList,
   createDesignRequest,
   updateDesignRequest,
   deleteDesignRequest,
 } from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 
 // ========== 타입 ==========
 interface HistoryItem {
@@ -105,25 +102,25 @@ interface DesignRequest {
 const STATUS_STYLES: Record<string, string> = {
   신규접수: "bg-muted text-foreground",
   접수대기: "bg-muted text-foreground",
-  검토중: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
-  설계진행: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
-  설계검토: "bg-violet-100 text-violet-800 dark:bg-violet-900/30 dark:text-violet-300",
-  출도완료: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
-  반려: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
+  검토중: "bg-warning/10 text-warning",
+  설계진행: "bg-info/10 text-info",
+  설계검토: "bg-primary/10 text-primary",
+  출도완료: "bg-success/10 text-success",
+  반려: "bg-destructive/10 text-destructive",
   종료: "bg-muted text-muted-foreground",
 };
 
 const TYPE_STYLES: Record<string, string> = {
-  신규설계: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
-  유사설계: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
-  개조설계: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+  신규설계: "bg-info/10 text-info",
+  유사설계: "bg-success/10 text-success",
+  개조설계: "bg-warning/10 text-warning",
 };
 
 const PRIORITY_STYLES: Record<string, string> = {
-  긴급: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
-  높음: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+  긴급: "bg-destructive/10 text-destructive",
+  높음: "bg-warning/10 text-warning",
   보통: "bg-muted text-foreground",
-  낮음: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
+  낮음: "bg-success/10 text-success",
 };
 
 const STATUS_PROGRESS: Record<string, number> = {
@@ -138,16 +135,16 @@ const STATUS_PROGRESS: Record<string, number> = {
 };
 
 function getProgressColor(p: number) {
-  if (p >= 100) return "bg-emerald-500";
-  if (p >= 60) return "bg-amber-500";
-  if (p >= 20) return "bg-blue-500";
+  if (p >= 100) return "bg-success";
+  if (p >= 60) return "bg-warning";
+  if (p >= 20) return "bg-info";
   return "bg-muted";
 }
 
 function getProgressTextColor(p: number) {
-  if (p >= 100) return "text-emerald-500";
-  if (p >= 60) return "text-amber-500";
-  if (p >= 20) return "text-blue-500";
+  if (p >= 100) return "text-success";
+  if (p >= 60) return "text-warning";
+  if (p >= 20) return "text-info";
   return "text-muted-foreground";
 }
 
@@ -168,17 +165,30 @@ const INITIAL_FORM = {
   content: "",
 };
 
+// ========== Grid Columns ==========
+const DR_GRID_COLUMNS = [
+  { key: "request_no", label: "의뢰번호" },
+  { key: "design_type", label: "유형" },
+  { key: "status", label: "상태" },
+  { key: "priority", label: "우선순위" },
+  { key: "target_name", label: "설비/제품명" },
+  { key: "customer", label: "고객명" },
+  { key: "designer", label: "설계담당" },
+  { key: "due_date", label: "납기" },
+  { key: "progress", label: "진행률" },
+];
+
 // ========== 메인 컴포넌트 ==========
 export default function DesignRequestPage() {
+  const ts = useTableSettings("c16-design-request", "dsn_design_request", DR_GRID_COLUMNS);
   const [requests, setRequests] = useState<DesignRequest[]>([]);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [detailOpen, setDetailOpen] = useState(false);
 
-  const [filterStatus, setFilterStatus] = useState("");
-  const [filterType, setFilterType] = useState("");
-  const [filterPriority, setFilterPriority] = useState("");
-  const [filterKeyword, setFilterKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   const [modalOpen, setModalOpen] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
@@ -192,13 +202,6 @@ export default function DesignRequestPage() {
     setLoading(true);
     try {
       const params: Record<string, string> = { source_type: "dr" };
-      if (filterStatus && filterStatus !== "__all__") params.status = filterStatus;
-      if (filterType && filterType !== "__all__") {
-        // design_type은 서버에서 직접 필터링하지 않으므로 클라이언트에서 처리
-      }
-      if (filterPriority && filterPriority !== "__all__") params.priority = filterPriority;
-      if (filterKeyword) params.search = filterKeyword;
-
       const res = await getDesignRequestList(params);
       if (res.success && res.data) {
         setRequests(res.data);
@@ -210,20 +213,35 @@ export default function DesignRequestPage() {
     } finally {
       setLoading(false);
     }
-  }, [filterStatus, filterPriority, filterKeyword]);
+  }, []);
 
   useEffect(() => {
     fetchRequests();
   }, [fetchRequests]);
 
-  // 클라이언트 사이드 필터링 (design_type은 서버에서 지원하지 않으므로)
+  // 클라이언트 사이드 필터링 (DynamicSearchFilter)
   const filteredRequests = useMemo(() => {
-    let list = requests;
-    if (filterType && filterType !== "__all__") {
-      list = list.filter((item) => item.design_type === filterType);
-    }
-    return list;
-  }, [requests, filterType]);
+    if (searchFilters.length === 0) return requests;
+    return requests.filter((item) => {
+      for (const f of searchFilters) {
+        const val = item[f.columnName as keyof DesignRequest];
+        const strVal = val !== undefined && val !== null ? (Array.isArray(val) ? val.join(",") : String(val)) : "";
+        if (f.operator === "contains") {
+          if (!strVal.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (strVal !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(strVal)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && strVal < from) return false;
+          if (to && strVal > to) return false;
+        }
+      }
+      return true;
+    });
+  }, [requests, searchFilters]);
 
   const selectedItem = useMemo(() => {
     if (!selectedId) return null;
@@ -238,12 +256,6 @@ export default function DesignRequestPage() {
     };
   }, [requests]);
 
-  const handleResetFilter = useCallback(() => {
-    setFilterStatus("");
-    setFilterType("");
-    setFilterPriority("");
-    setFilterKeyword("");
-  }, []);
 
   // 채번: 기존 데이터 기반으로 다음 번호 생성
   const generateNextNo = useCallback(() => {
@@ -288,14 +300,15 @@ export default function DesignRequestPage() {
       drawing_no: selectedItem.drawing_no || "",
       content: selectedItem.content || "",
     });
+    setDetailOpen(false);
     setModalOpen(true);
   }, [selectedItem]);
 
   const handleSave = useCallback(async () => {
-    if (!form.target_name.trim()) { alert("설비/제품명을 입력하세요."); return; }
-    if (!form.design_type) { alert("의뢰 유형을 선택하세요."); return; }
-    if (!form.due_date) { alert("납기를 입력하세요."); return; }
-    if (!form.spec.trim()) { alert("요구사양을 입력하세요."); return; }
+    if (!form.target_name.trim()) { toast.error("설비/제품명을 입력해 주세요."); return; }
+    if (!form.design_type) { toast.error("의뢰 유형을 선택해 주세요."); return; }
+    if (!form.due_date) { toast.error("납기를 입력해 주세요."); return; }
+    if (!form.spec.trim()) { toast.error("요구사양을 입력해 주세요."); return; }
 
     setSaving(true);
     try {
@@ -334,6 +347,7 @@ export default function DesignRequestPage() {
       }
 
       if (res.success) {
+        toast.success(isEditMode ? "수정되었어요." : "등록되었어요.");
         setModalOpen(false);
         await fetchRequests();
         if (isEditMode && editingId) {
@@ -342,10 +356,10 @@ export default function DesignRequestPage() {
           setSelectedId(res.data.id);
         }
       } else {
-        alert(`저장 실패: ${res.message || "알 수 없는 오류"}`);
+        toast.error(res.message || "저장에 실패했어요.");
       }
     } catch (err: any) {
-      alert(`저장 중 오류가 발생했습니다: ${err.message}`);
+      toast.error("저장에 실패했어요.");
     } finally {
       setSaving(false);
     }
@@ -354,18 +368,20 @@ export default function DesignRequestPage() {
   const handleDelete = useCallback(async () => {
     if (!selectedId || !selectedItem) return;
     const displayNo = selectedItem.request_no || selectedId;
-    if (!confirm(`${displayNo} 설계의뢰를 삭제하시겠습니까?`)) return;
+    if (!confirm(`${displayNo} 설계의뢰를 삭제할까요?`)) return;
 
     try {
       const res = await deleteDesignRequest(selectedId);
       if (res.success) {
+        toast.success("삭제되었어요.");
         setSelectedId(null);
+        setDetailOpen(false);
         await fetchRequests();
       } else {
-        alert(`삭제 실패: ${res.message || "알 수 없는 오류"}`);
+        toast.error(res.message || "삭제에 실패했어요.");
       }
     } catch (err: any) {
-      alert(`삭제 중 오류가 발생했습니다: ${err.message}`);
+      toast.error("삭제에 실패했어요.");
     }
   }, [selectedId, selectedItem, fetchRequests]);
 
@@ -375,9 +391,9 @@ export default function DesignRequestPage() {
       const due = new Date(dueDate);
       const diff = Math.ceil((due.getTime() - today.getTime()) / 86400000);
       if (diff < 0) return { text: `${Math.abs(diff)}일 초과`, color: "text-destructive" };
-      if (diff === 0) return { text: "오늘", color: "text-amber-500" };
-      if (diff <= 7) return { text: `${diff}일 남음`, color: "text-amber-500" };
-      return { text: `${diff}일 남음`, color: "text-emerald-500" };
+      if (diff === 0) return { text: "오늘", color: "text-warning" };
+      if (diff <= 7) return { text: `${diff}일 남음`, color: "text-warning" };
+      return { text: `${diff}일 남음`, color: "text-success" };
     },
     [today]
   );
@@ -386,444 +402,370 @@ export default function DesignRequestPage() {
     return STATUS_PROGRESS[status] ?? 0;
   }, []);
 
+  const handleRowClick = useCallback((id: string) => {
+    setSelectedId(id);
+    setDetailOpen(true);
+  }, []);
+
   return (
-    <div className="flex h-full flex-col gap-2 p-3">
-      {/* 검색 섹션 */}
-      <div className="flex shrink-0 flex-wrap items-center gap-2 rounded-lg border bg-card px-3 py-2">
-        <Select value={filterStatus} onValueChange={setFilterStatus}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="상태 전체" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">상태 전체</SelectItem>
-            {["신규접수", "접수대기", "검토중", "설계진행", "설계검토", "출도완료", "반려", "종료"].map((s) => (
-              <SelectItem key={s} value={s}>{s}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Select value={filterType} onValueChange={setFilterType}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="유형 전체" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">유형 전체</SelectItem>
-            {["신규설계", "유사설계", "개조설계"].map((s) => (
-              <SelectItem key={s} value={s}>{s}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Select value={filterPriority} onValueChange={setFilterPriority}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="우선순위 전체" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">우선순위 전체</SelectItem>
-            {["긴급", "높음", "보통", "낮음"].map((s) => (
-              <SelectItem key={s} value={s}>{s}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <div className="relative">
-          <Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            value={filterKeyword}
-            onChange={(e) => setFilterKeyword(e.target.value)}
-            placeholder="의뢰번호 / 설비명 / 고객명 검색"
-            className="h-7 w-[240px] pl-7 text-xs"
-          />
-        </div>
-        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={handleResetFilter}>
-          <RotateCcw className="mr-1 h-3 w-3" />초기화
-        </Button>
-        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => fetchRequests()}>
-          <Search className="mr-1 h-3 w-3" />조회
-        </Button>
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 검색 필터 */}
+      <div className="shrink-0">
+        <DynamicSearchFilter
+          tableName="dsn_design_request"
+          filterId="c16-design-request"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredRequests.length}
+        />
       </div>
 
-      {/* 메인 영역 */}
-      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1 rounded-lg">
-        {/* 왼쪽: 목록 */}
-        <ResizablePanel defaultSize={55} minSize={30}>
-          <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
-            <div className="flex shrink-0 items-center justify-between border-b bg-muted/30 px-3 py-1.5">
-              <span className="text-sm font-bold">
-                <Ruler className="mr-1 inline h-4 w-4" />
-                설계의뢰 목록 (<span className="text-primary">{filteredRequests.length}</span>건)
-              </span>
-              <Button size="sm" className="h-7 text-xs" onClick={handleOpenRegister}>
-                <Plus className="mr-1 h-3 w-3" />설계의뢰 등록
-              </Button>
-            </div>
-            <ScrollArea className="flex-1">
-              {loading ? (
-                <div className="flex items-center justify-center py-16">
-                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                  <span className="ml-2 text-sm text-muted-foreground">불러오는 중...</span>
-                </div>
-              ) : (
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="w-[100px] text-[11px]">의뢰번호</TableHead>
-                      <TableHead className="w-[70px] text-center text-[11px]">유형</TableHead>
-                      <TableHead className="w-[70px] text-center text-[11px]">상태</TableHead>
-                      <TableHead className="w-[60px] text-center text-[11px]">우선순위</TableHead>
-                      <TableHead className="text-[11px]">설비/제품명</TableHead>
-                      <TableHead className="w-[90px] text-[11px]">고객명</TableHead>
-                      <TableHead className="w-[70px] text-[11px]">설계담당</TableHead>
-                      <TableHead className="w-[85px] text-[11px]">납기</TableHead>
-                      <TableHead className="w-[65px] text-center text-[11px]">진행률</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {filteredRequests.length === 0 && (
-                      <TableRow>
-                        <TableCell colSpan={9} className="py-12 text-center">
-                          <div className="flex flex-col items-center gap-1 text-muted-foreground">
-                            <Ruler className="h-8 w-8" />
-                            <span className="text-sm">등록된 설계의뢰가 없습니다</span>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    )}
-                    {filteredRequests.map((item) => {
-                      const progress = getProgress(item.status);
+      {/* 현황 카드 */}
+      <div className="grid grid-cols-3 gap-3 shrink-0">
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">접수대기</div>
+          <div className="text-xl font-bold text-info">{statusCounts.접수대기}</div>
+        </div>
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">설계진행</div>
+          <div className="text-xl font-bold text-warning">{statusCounts.설계진행}</div>
+        </div>
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">출도완료</div>
+          <div className="text-xl font-bold text-success">{statusCounts.출도완료}</div>
+        </div>
+      </div>
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold">설계의뢰 관리</h2>
+          <Badge variant="secondary" className="font-mono">{filteredRequests.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" onClick={handleOpenRegister}>
+            <Plus className="w-4 h-4 mr-1.5" /> 설계의뢰 등록
+          </Button>
+          <div className="mx-1 h-6 w-px bg-border" />
+          <Button variant="outline" size="sm" disabled={!selectedId} onClick={handleOpenEdit}>
+            <Pencil className="w-4 h-4 mr-1.5" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 테이블 영역 */}
+      <div className="flex-1 flex flex-col overflow-hidden border rounded-lg bg-card">
+        <EDataTable<DesignRequest>
+          columns={ts.visibleColumns.map((col): EDataTableColumn<DesignRequest> => ({
+            key: col.key,
+            label: col.label,
+            width: col.key === "request_no" ? "w-[100px]" : col.key === "design_type" ? "w-[70px]" : col.key === "status" ? "w-[70px]" : col.key === "priority" ? "w-[60px]" : col.key === "customer" ? "w-[90px]" : col.key === "designer" ? "w-[70px]" : col.key === "due_date" ? "w-[85px]" : col.key === "progress" ? "w-[65px]" : undefined,
+            align: (col.key === "design_type" || col.key === "status" || col.key === "priority" || col.key === "progress") ? "center" : undefined,
+            render: col.key === "request_no"
+              ? (val: any) => <span className="text-[11px] font-semibold text-primary">{val || "-"}</span>
+              : col.key === "design_type"
+              ? (val: any) => val ? <Badge className={cn("text-[9px]", TYPE_STYLES[val])}>{val}</Badge> : <span>-</span>
+              : col.key === "status"
+              ? (val: any) => <Badge className={cn("text-[9px]", STATUS_STYLES[val])}>{val}</Badge>
+              : col.key === "priority"
+              ? (val: any) => <Badge className={cn("text-[9px]", PRIORITY_STYLES[val])}>{val}</Badge>
+              : col.key === "progress"
+              ? (_val: any, row: DesignRequest) => {
+                  const progress = STATUS_PROGRESS[row.status] ?? 0;
+                  return (
+                    <div className="flex items-center gap-1.5">
+                      <div className="h-1.5 w-12 overflow-hidden rounded-full bg-muted">
+                        <div className={cn("h-full rounded-full transition-all", getProgressColor(progress))} style={{ width: `${progress}%` }} />
+                      </div>
+                      <span className={cn("text-[10px] font-semibold", getProgressTextColor(progress))}>{progress}%</span>
+                    </div>
+                  );
+                }
+              : undefined,
+          }))}
+          data={ts.groupData(filteredRequests)}
+          loading={loading}
+          emptyMessage="등록된 설계의뢰가 없어요"
+          selectedId={selectedId}
+          onSelect={(id) => setSelectedId(id)}
+          onRowClick={(row) => handleRowClick(row.id)}
+          draggableColumns={false}
+        />
+      </div>
+
+      {/* 상세 정보 다이얼로그 */}
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="max-w-[900px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{selectedItem ? `설계의뢰 상세 — ${selectedItem.request_no}` : "설계의뢰 상세"}</DialogTitle>
+            <DialogDescription>설계의뢰의 상세 정보를 확인해요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        {selectedItem && (
+          <div className="space-y-4">
+            {/* 기본 정보 */}
+            <div>
+              <div className="mb-2 text-xs font-bold">
+                <FileText className="mr-1 inline h-3.5 w-3.5" />기본 정보
+              </div>
+              <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-lg border bg-muted/10 p-3">
+                <InfoRow label="의뢰번호" value={<span className="font-semibold text-primary">{selectedItem.request_no || "-"}</span>} />
+                <InfoRow label="상태" value={<Badge className={cn("text-[10px]", STATUS_STYLES[selectedItem.status])}>{selectedItem.status}</Badge>} />
+                <InfoRow label="유형" value={selectedItem.design_type ? <Badge className={cn("text-[10px]", TYPE_STYLES[selectedItem.design_type])}>{selectedItem.design_type}</Badge> : "-"} />
+                <InfoRow label="우선순위" value={<Badge className={cn("text-[10px]", PRIORITY_STYLES[selectedItem.priority])}>{selectedItem.priority}</Badge>} />
+                <InfoRow label="설비/제품명" value={selectedItem.target_name || "-"} />
+                <InfoRow label="고객명" value={selectedItem.customer || "-"} />
+                <InfoRow label="의뢰부서 / 의뢰자" value={`${selectedItem.req_dept || "-"} / ${selectedItem.requester || "-"}`} />
+                <InfoRow label="설계담당" value={selectedItem.designer || "미배정"} />
+                <InfoRow label="의뢰일자" value={selectedItem.request_date || "-"} />
+                <InfoRow
+                  label="납기"
+                  value={
+                    selectedItem.due_date ? (
+                      <span>
+                        {selectedItem.due_date}{" "}
+                        <span className={cn("text-[11px]", getDueDateInfo(selectedItem.due_date).color)}>
+                          ({getDueDateInfo(selectedItem.due_date).text})
+                        </span>
+                      </span>
+                    ) : "-"
+                  }
+                />
+                <InfoRow label="수주번호" value={selectedItem.order_no || "-"} />
+                <InfoRow
+                  label="진행률"
+                  value={
+                    (() => {
+                      const progress = getProgress(selectedItem.status);
                       return (
-                        <TableRow
-                          key={item.id}
-                          className={cn("cursor-pointer", selectedId === item.id && "bg-accent")}
-                          onClick={() => setSelectedId(item.id)}
-                        >
-                          <TableCell className="text-[11px] font-semibold text-primary">{item.request_no || "-"}</TableCell>
-                          <TableCell className="text-center">
-                            {item.design_type ? (
-                              <Badge className={cn("text-[9px]", TYPE_STYLES[item.design_type])}>{item.design_type}</Badge>
-                            ) : "-"}
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <Badge className={cn("text-[9px]", STATUS_STYLES[item.status])}>{item.status}</Badge>
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <Badge className={cn("text-[9px]", PRIORITY_STYLES[item.priority])}>{item.priority}</Badge>
-                          </TableCell>
-                          <TableCell className="text-xs font-medium">{item.target_name || "-"}</TableCell>
-                          <TableCell className="text-[11px]">{item.customer || "-"}</TableCell>
-                          <TableCell className="text-[11px]">{item.designer || "-"}</TableCell>
-                          <TableCell className="text-[11px]">{item.due_date || "-"}</TableCell>
-                          <TableCell>
-                            <div className="flex items-center gap-1.5">
-                              <div className="h-1.5 w-12 overflow-hidden rounded-full bg-muted">
-                                <div className={cn("h-full rounded-full transition-all", getProgressColor(progress))} style={{ width: `${progress}%` }} />
-                              </div>
-                              <span className={cn("text-[10px] font-semibold", getProgressTextColor(progress))}>{progress}%</span>
-                            </div>
-                          </TableCell>
-                        </TableRow>
+                        <div className="flex items-center gap-2">
+                          <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
+                            <div className={cn("h-full rounded-full", getProgressColor(progress))} style={{ width: `${progress}%` }} />
+                          </div>
+                          <span className={cn("text-xs font-bold", getProgressTextColor(progress))}>{progress}%</span>
+                        </div>
                       );
-                    })}
-                  </TableBody>
-                </Table>
-              )}
-            </ScrollArea>
-          </div>
-        </ResizablePanel>
-
-        <ResizableHandle withHandle />
-
-        {/* 오른쪽: 상세 */}
-        <ResizablePanel defaultSize={45} minSize={25}>
-          <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
-            <div className="flex shrink-0 items-center justify-between border-b bg-muted/30 px-3 py-1.5">
-              <span className="text-sm font-bold">
-                <ClipboardList className="mr-1 inline h-4 w-4" />
-                상세 정보
-              </span>
-              {selectedItem && (
-                <div className="flex gap-1.5">
-                  <Button variant="outline" size="sm" className="h-6 text-[10px]" onClick={handleOpenEdit}>
-                    <Pencil className="mr-0.5 h-3 w-3" />수정
-                  </Button>
-                  <Button variant="outline" size="sm" className="h-6 text-[10px] text-destructive hover:text-destructive" onClick={handleDelete}>
-                    <Trash2 className="mr-0.5 h-3 w-3" />삭제
-                  </Button>
-                </div>
-              )}
+                    })()
+                  }
+                />
+              </div>
             </div>
-            <ScrollArea className="flex-1">
-              <div className="p-3">
-                {/* 상태 카드 */}
-                <div className="mb-3 grid grid-cols-3 gap-2">
-                  <Card
-                    className="cursor-pointer rounded-lg border px-3 py-2 shadow-none transition-colors hover:bg-accent/50"
-                    onClick={() => setFilterStatus("접수대기")}
-                  >
-                    <div className="text-[10px] text-muted-foreground">접수대기</div>
-                    <div className="text-xl font-bold text-blue-500">{statusCounts.접수대기}</div>
-                  </Card>
-                  <Card
-                    className="cursor-pointer rounded-lg border px-3 py-2 shadow-none transition-colors hover:bg-accent/50"
-                    onClick={() => setFilterStatus("설계진행")}
-                  >
-                    <div className="text-[10px] text-muted-foreground">설계진행</div>
-                    <div className="text-xl font-bold text-amber-500">{statusCounts.설계진행}</div>
-                  </Card>
-                  <Card
-                    className="cursor-pointer rounded-lg border px-3 py-2 shadow-none transition-colors hover:bg-accent/50"
-                    onClick={() => setFilterStatus("출도완료")}
-                  >
-                    <div className="text-[10px] text-muted-foreground">출도완료</div>
-                    <div className="text-xl font-bold text-emerald-500">{statusCounts.출도완료}</div>
-                  </Card>
-                </div>
 
-                {/* 상세 내용 */}
-                {!selectedItem ? (
-                  <div className="flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground">
-                    <PointerIcon className="h-8 w-8" />
-                    <span className="text-sm">좌측 목록에서 설계의뢰를 선택하세요</span>
+            {/* 요구사양 */}
+            <div>
+              <div className="mb-2 text-xs font-bold">
+                <FileText className="mr-1 inline h-3.5 w-3.5" />요구사양
+              </div>
+              <div className="rounded-lg border bg-muted/10 p-3">
+                <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed">{selectedItem.spec || "-"}</pre>
+                {selectedItem.drawing_no && (
+                  <div className="mt-2 text-xs">
+                    <span className="text-muted-foreground">참조 도면: </span>
+                    <span className="text-primary">{selectedItem.drawing_no}</span>
                   </div>
-                ) : (
-                  <div className="space-y-4">
-                    {/* 기본 정보 */}
-                    <div>
-                      <div className="mb-2 text-xs font-bold">
-                        <FileText className="mr-1 inline h-3.5 w-3.5" />기본 정보
-                      </div>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-lg border bg-muted/10 p-3">
-                        <InfoRow label="의뢰번호" value={<span className="font-semibold text-primary">{selectedItem.request_no || "-"}</span>} />
-                        <InfoRow label="상태" value={<Badge className={cn("text-[10px]", STATUS_STYLES[selectedItem.status])}>{selectedItem.status}</Badge>} />
-                        <InfoRow label="유형" value={selectedItem.design_type ? <Badge className={cn("text-[10px]", TYPE_STYLES[selectedItem.design_type])}>{selectedItem.design_type}</Badge> : "-"} />
-                        <InfoRow label="우선순위" value={<Badge className={cn("text-[10px]", PRIORITY_STYLES[selectedItem.priority])}>{selectedItem.priority}</Badge>} />
-                        <InfoRow label="설비/제품명" value={selectedItem.target_name || "-"} />
-                        <InfoRow label="고객명" value={selectedItem.customer || "-"} />
-                        <InfoRow label="의뢰부서 / 의뢰자" value={`${selectedItem.req_dept || "-"} / ${selectedItem.requester || "-"}`} />
-                        <InfoRow label="설계담당" value={selectedItem.designer || "미배정"} />
-                        <InfoRow label="의뢰일자" value={selectedItem.request_date || "-"} />
-                        <InfoRow
-                          label="납기"
-                          value={
-                            selectedItem.due_date ? (
-                              <span>
-                                {selectedItem.due_date}{" "}
-                                <span className={cn("text-[11px]", getDueDateInfo(selectedItem.due_date).color)}>
-                                  ({getDueDateInfo(selectedItem.due_date).text})
-                                </span>
-                              </span>
-                            ) : "-"
-                          }
-                        />
-                        <InfoRow label="수주번호" value={selectedItem.order_no || "-"} />
-                        <InfoRow
-                          label="진행률"
-                          value={
-                            (() => {
-                              const progress = getProgress(selectedItem.status);
-                              return (
-                                <div className="flex items-center gap-2">
-                                  <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
-                                    <div className={cn("h-full rounded-full", getProgressColor(progress))} style={{ width: `${progress}%` }} />
-                                  </div>
-                                  <span className={cn("text-xs font-bold", getProgressTextColor(progress))}>{progress}%</span>
-                                </div>
-                              );
-                            })()
-                          }
-                        />
-                      </div>
-                    </div>
-
-                    {/* 요구사양 */}
-                    <div>
-                      <div className="mb-2 text-xs font-bold">
-                        <FileText className="mr-1 inline h-3.5 w-3.5" />요구사양
-                      </div>
-                      <div className="rounded-lg border bg-muted/10 p-3">
-                        <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed">{selectedItem.spec || "-"}</pre>
-                        {selectedItem.drawing_no && (
-                          <div className="mt-2 text-xs">
-                            <span className="text-muted-foreground">참조 도면: </span>
-                            <span className="text-primary">{selectedItem.drawing_no}</span>
-                          </div>
-                        )}
-                        {selectedItem.content && (
-                          <div className="mt-1 text-xs">
-                            <span className="text-muted-foreground">비고: </span>{selectedItem.content}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* 진행 이력 */}
-                    {selectedItem.history && selectedItem.history.length > 0 && (
-                      <div>
-                        <div className="mb-2 text-xs font-bold">
-                          <Calendar className="mr-1 inline h-3.5 w-3.5" />진행 이력
-                        </div>
-                        <div className="space-y-0">
-                          {selectedItem.history.map((h, idx) => {
-                            const isLast = idx === selectedItem.history.length - 1;
-                            const isDone = h.step === "출도완료" || h.step === "종료";
-                            return (
-                              <div key={h.id || idx} className="flex gap-3">
-                                <div className="flex flex-col items-center">
-                                  <div
-                                    className={cn(
-                                      "mt-1 h-2.5 w-2.5 shrink-0 rounded-full border-2",
-                                      isLast && !isDone
-                                        ? "border-blue-500 bg-blue-500"
-                                        : isDone || !isLast
-                                          ? "border-emerald-500 bg-emerald-500"
-                                          : "border-muted-foreground bg-muted-foreground"
-                                    )}
-                                  />
-                                  {!isLast && <div className="w-px flex-1 bg-border" />}
-                                </div>
-                                <div className="pb-3">
-                                  <Badge className={cn("text-[9px]", STATUS_STYLES[h.step])}>{h.step}</Badge>
-                                  <div className="mt-0.5 text-xs">{h.description}</div>
-                                  <div className="text-[10px] text-muted-foreground">{h.history_date} · {h.user_name}</div>
-                                </div>
-                              </div>
-                            );
-                          })}
-                        </div>
-                      </div>
-                    )}
+                )}
+                {selectedItem.content && (
+                  <div className="mt-1 text-xs">
+                    <span className="text-muted-foreground">비고: </span>{selectedItem.content}
                   </div>
                 )}
               </div>
-            </ScrollArea>
+            </div>
+
+            {/* 진행 이력 */}
+            {selectedItem.history && selectedItem.history.length > 0 && (
+              <div>
+                <div className="mb-2 text-xs font-bold">
+                  <Calendar className="mr-1 inline h-3.5 w-3.5" />진행 이력
+                </div>
+                <div className="space-y-0">
+                  {selectedItem.history.map((h, idx) => {
+                    const isLast = idx === selectedItem.history.length - 1;
+                    const isDone = h.step === "출도완료" || h.step === "종료";
+                    return (
+                      <div key={h.id || idx} className="flex gap-3">
+                        <div className="flex flex-col items-center">
+                          <div
+                            className={cn(
+                              "mt-1 h-2.5 w-2.5 shrink-0 rounded-full border-2",
+                              isLast && !isDone
+                                ? "border-primary bg-primary"
+                                : isDone || !isLast
+                                  ? "border-success bg-success"
+                                  : "border-muted-foreground bg-muted-foreground"
+                            )}
+                          />
+                          {!isLast && <div className="w-px flex-1 bg-border" />}
+                        </div>
+                        <div className="pb-3">
+                          <Badge className={cn("text-[9px]", STATUS_STYLES[h.step])}>{h.step}</Badge>
+                          <div className="mt-0.5 text-xs">{h.description}</div>
+                          <div className="text-[10px] text-muted-foreground">{h.history_date} · {h.user_name}</div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
           </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
+        )}
+          </div>
+          <DialogFooter>
+            {selectedItem && (
+              <>
+                <Button variant="outline" size="sm" onClick={handleOpenEdit}>
+                  <Pencil className="mr-1 h-3.5 w-3.5" />수정
+                </Button>
+                <Button variant="outline" size="sm" className="text-destructive hover:text-destructive" onClick={handleDelete}>
+                  <Trash2 className="mr-1 h-3.5 w-3.5" />삭제
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 등록/수정 모달 */}
       <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[1100px]">
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
           <DialogHeader>
-            <DialogTitle className="text-lg">
-              {isEditMode ? <><Pencil className="mr-1.5 inline h-5 w-5" />설계의뢰 수정</> : <><Plus className="mr-1.5 inline h-5 w-5" />설계의뢰 등록</>}
-            </DialogTitle>
-            <DialogDescription className="text-sm">
-              {isEditMode ? "설계의뢰 정보를 수정합니다." : "새 설계의뢰를 등록합니다."}
-            </DialogDescription>
+            <DialogTitle>{isEditMode ? "설계의뢰 수정" : "설계의뢰 등록"}</DialogTitle>
+            <DialogDescription>{isEditMode ? "설계의뢰 정보를 수정해요." : "새 설계의뢰를 등록해요."}</DialogDescription>
           </DialogHeader>
-          <div className="flex gap-6">
-            {/* 좌측: 기본 정보 */}
-            <div className="w-[420px] shrink-0 space-y-4">
-              <div className="text-sm font-bold">
-                <FileText className="mr-1 inline h-4 w-4" />의뢰 기본 정보
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-6 p-6">
+          {/* 좌측: 기본 정보 */}
+          <div className="md:w-[420px] shrink-0 space-y-4">
+            <h3 className="text-sm font-semibold pb-2 border-b">의뢰 기본 정보</h3>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰번호</Label>
+              <Input value={form.request_no} readOnly className="h-9 bg-muted cursor-not-allowed" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰일자</Label>
+                <Input type="date" value={form.request_date} onChange={(e) => setForm((p) => ({ ...p, request_date: e.target.value }))} className="h-9" />
               </div>
               <div>
-                <Label className="text-sm">의뢰번호</Label>
-                <Input value={form.request_no} readOnly className="h-9 text-sm" />
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <Label className="text-sm">의뢰일자</Label>
-                  <Input type="date" value={form.request_date} onChange={(e) => setForm((p) => ({ ...p, request_date: e.target.value }))} className="h-9 text-sm" />
-                </div>
-                <div>
-                  <Label className="text-sm">납기 <span className="text-destructive">*</span></Label>
-                  <Input type="date" value={form.due_date} onChange={(e) => setForm((p) => ({ ...p, due_date: e.target.value }))} className="h-9 text-sm" />
-                </div>
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <Label className="text-sm">의뢰 유형 <span className="text-destructive">*</span></Label>
-                  <Select value={form.design_type} onValueChange={(v) => setForm((p) => ({ ...p, design_type: v }))}>
-                    <SelectTrigger className="h-9 text-sm" size="sm"><SelectValue placeholder="선택" /></SelectTrigger>
-                    <SelectContent>
-                      {["신규설계", "유사설계", "개조설계"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div>
-                  <Label className="text-sm">우선순위 <span className="text-destructive">*</span></Label>
-                  <Select value={form.priority} onValueChange={(v) => setForm((p) => ({ ...p, priority: v }))}>
-                    <SelectTrigger className="h-9 text-sm" size="sm"><SelectValue placeholder="선택" /></SelectTrigger>
-                    <SelectContent>
-                      {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-                    </SelectContent>
-                  </Select>
-                </div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">납기 <span className="text-destructive">*</span></Label>
+                <Input type="date" value={form.due_date} onChange={(e) => setForm((p) => ({ ...p, due_date: e.target.value }))} className="h-9" />
               </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-sm">설비/제품명 <span className="text-destructive">*</span></Label>
-                <Input value={form.target_name} onChange={(e) => setForm((p) => ({ ...p, target_name: e.target.value }))} placeholder="설비 또는 제품명 입력" className="h-9 text-sm" />
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <Label className="text-sm">의뢰부서</Label>
-                  <Select value={form.req_dept} onValueChange={(v) => setForm((p) => ({ ...p, req_dept: v }))}>
-                    <SelectTrigger className="h-9 text-sm" size="sm"><SelectValue placeholder="선택" /></SelectTrigger>
-                    <SelectContent>
-                      {["영업팀", "기획팀", "생산팀", "품질팀"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div>
-                  <Label className="text-sm">의뢰자</Label>
-                  <Input value={form.requester} onChange={(e) => setForm((p) => ({ ...p, requester: e.target.value }))} placeholder="의뢰자명" className="h-9 text-sm" />
-                </div>
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <Label className="text-sm">고객명</Label>
-                  <Input value={form.customer} onChange={(e) => setForm((p) => ({ ...p, customer: e.target.value }))} placeholder="고객/거래처명" className="h-9 text-sm" />
-                </div>
-                <div>
-                  <Label className="text-sm">수주번호</Label>
-                  <Input value={form.order_no} onChange={(e) => setForm((p) => ({ ...p, order_no: e.target.value }))} placeholder="관련 수주번호" className="h-9 text-sm" />
-                </div>
-              </div>
-              <div>
-                <Label className="text-sm">설계담당자</Label>
-                <Select value={form.designer} onValueChange={(v) => setForm((p) => ({ ...p, designer: v }))}>
-                  <SelectTrigger className="h-9 text-sm" size="sm"><SelectValue placeholder="선택" /></SelectTrigger>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰 유형 <span className="text-destructive">*</span></Label>
+                <Select value={form.design_type} onValueChange={(v) => setForm((p) => ({ ...p, design_type: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
                   <SelectContent>
-                    {["이설계", "박도면", "최기구", "김전장"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                    {["신규설계", "유사설계", "개조설계"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">우선순위 <span className="text-destructive">*</span></Label>
+                <Select value={form.priority} onValueChange={(v) => setForm((p) => ({ ...p, priority: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
                   </SelectContent>
                 </Select>
               </div>
             </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설비/제품명 <span className="text-destructive">*</span></Label>
+              <Input value={form.target_name} onChange={(e) => setForm((p) => ({ ...p, target_name: e.target.value }))} placeholder="설비 또는 제품명 입력" className="h-9" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰부서</Label>
+                <Select value={form.req_dept} onValueChange={(v) => setForm((p) => ({ ...p, req_dept: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["영업팀", "기획팀", "생산팀", "품질팀"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰자</Label>
+                <Input value={form.requester} onChange={(e) => setForm((p) => ({ ...p, requester: e.target.value }))} placeholder="의뢰자명" className="h-9" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">고객명</Label>
+                <Input value={form.customer} onChange={(e) => setForm((p) => ({ ...p, customer: e.target.value }))} placeholder="고객/거래처명" className="h-9" />
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">수주번호</Label>
+                <Input value={form.order_no} onChange={(e) => setForm((p) => ({ ...p, order_no: e.target.value }))} placeholder="관련 수주번호" className="h-9" />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설계담당자</Label>
+              <Select value={form.designer} onValueChange={(v) => setForm((p) => ({ ...p, designer: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  {["이설계", "박도면", "최기구", "김전장"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
 
-            {/* 우측: 상세 내용 */}
-            <div className="flex min-w-0 flex-1 flex-col gap-4">
-              <div className="text-sm font-bold">
-                <FileText className="mr-1 inline h-4 w-4" />요구사양 및 설명
-              </div>
-              <div className="flex-1">
-                <Label className="text-sm">요구사양 <span className="text-destructive">*</span></Label>
-                <Textarea
-                  value={form.spec}
-                  onChange={(e) => setForm((p) => ({ ...p, spec: e.target.value }))}
-                  placeholder={"고객 요구사양 또는 설비 사양을 상세히 기술하세요\n\n예시:\n- 작업 대상: SUS304 Φ20 파이프\n- 가공 방식: 자동 절단 + 면취\n- 생산 속도: 60EA/분\n- 치수 공차: ±0.1mm"}
-                  className="min-h-[180px] text-sm"
-                />
-              </div>
-              <div>
-                <Label className="text-sm">참조 도면번호</Label>
-                <Input value={form.drawing_no} onChange={(e) => setForm((p) => ({ ...p, drawing_no: e.target.value }))} placeholder="유사 설비명 또는 참조 도면번호" className="h-9 text-sm" />
-              </div>
-              <div>
-                <Label className="text-sm">비고</Label>
-                <Textarea value={form.content} onChange={(e) => setForm((p) => ({ ...p, content: e.target.value }))} placeholder="기타 참고 사항" className="min-h-[70px] text-sm" rows={3} />
-              </div>
-              <div>
-                <div className="text-sm font-bold">
-                  <Upload className="mr-1 inline h-4 w-4" />첨부파일
-                </div>
-                <div className="mt-1.5 cursor-pointer rounded-lg border-2 border-dashed p-5 text-center transition-colors hover:border-primary hover:bg-accent/50">
-                  <Upload className="mx-auto h-6 w-6 text-muted-foreground" />
-                  <div className="mt-1.5 text-sm text-muted-foreground">클릭하여 파일 첨부 (사양서, 도면, 사진 등)</div>
-                </div>
+          {/* 우측: 상세 내용 */}
+          <div className="flex min-w-0 flex-1 flex-col gap-4">
+            <h3 className="text-sm font-semibold pb-2 border-b">요구사양 및 설명</h3>
+            <div className="flex-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요구사양 <span className="text-destructive">*</span></Label>
+              <Textarea
+                value={form.spec}
+                onChange={(e) => setForm((p) => ({ ...p, spec: e.target.value }))}
+                placeholder={"고객 요구사양 또는 설비 사양을 상세히 기술해주세요\n\n예시:\n- 작업 대상: SUS304 Φ20 파이프\n- 가공 방식: 자동 절단 + 면취\n- 생산 속도: 60EA/분\n- 치수 공차: ±0.1mm"}
+                className="min-h-[180px]"
+              />
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">참조 도면번호</Label>
+              <Input value={form.drawing_no} onChange={(e) => setForm((p) => ({ ...p, drawing_no: e.target.value }))} placeholder="유사 설비명 또는 참조 도면번호" className="h-9" />
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">비고</Label>
+              <Textarea value={form.content} onChange={(e) => setForm((p) => ({ ...p, content: e.target.value }))} placeholder="기타 참고 사항" className="min-h-[70px]" rows={3} />
+            </div>
+            <div>
+              <h3 className="text-sm font-semibold pb-2 border-b mb-2">첨부파일</h3>
+              <div className="cursor-pointer rounded-lg border-2 border-dashed p-5 text-center transition-colors hover:border-primary hover:bg-accent/50">
+                <Upload className="mx-auto h-6 w-6 text-muted-foreground" />
+                <div className="mt-1.5 text-sm text-muted-foreground">클릭하여 파일 첨부 (사양서, 도면, 사진 등)</div>
               </div>
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setModalOpen(false)} className="h-10 px-6 text-sm" disabled={saving}>취소</Button>
-            <Button onClick={handleSave} className="h-10 px-6 text-sm" disabled={saving}>
-              {saving && <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />}
-              {saving ? "저장 중..." : "저장"}
+        </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setModalOpen(false)} disabled={saving}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_29/design/my-work/page.tsx b/frontend/app/(main)/COMPANY_29/design/my-work/page.tsx
index 5489e92d..8c136cb9 100644
--- a/frontend/app/(main)/COMPANY_29/design/my-work/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/design/my-work/page.tsx
@@ -2,7 +2,6 @@
 
 import React, { useState, useMemo, useCallback, useEffect } from "react";
 import {
-  BarChart3,
   Circle,
   CheckCircle2,
   AlertCircle,
@@ -39,7 +38,6 @@ import {
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
@@ -78,6 +76,7 @@ import {
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { useAuth } from "@/hooks/useAuth";
 import {
   getMyWork,
@@ -171,14 +170,14 @@ interface MyTask extends Task {
 
 // ========== 유틸 ==========
 const USER_INFO: Record<string, { role: string; color: string }> = {
-  최기구: { role: "기구설계 파트", color: "bg-blue-500" },
-  이설계: { role: "기구설계 파트", color: "bg-emerald-500" },
-  김전장: { role: "전장설계 파트", color: "bg-amber-500" },
-  박도면: { role: "기구설계 파트", color: "bg-violet-500" },
-  정SW: { role: "SW개발 파트", color: "bg-pink-500" },
-  한조립: { role: "조립/시운전 파트", color: "bg-red-500" },
-  박구매: { role: "구매/조달 파트", color: "bg-teal-500" },
-  팀장: { role: "설계팀 팀장", color: "bg-indigo-500" },
+  최기구: { role: "기구설계 파트", color: "bg-primary" },
+  이설계: { role: "기구설계 파트", color: "bg-chart-2" },
+  김전장: { role: "전장설계 파트", color: "bg-warning" },
+  박도면: { role: "기구설계 파트", color: "bg-chart-3" },
+  정SW: { role: "SW개발 파트", color: "bg-destructive" },
+  한조립: { role: "조립/시운전 파트", color: "bg-chart-1" },
+  박구매: { role: "구매/조달 파트", color: "bg-info" },
+  팀장: { role: "설계팀 팀장", color: "bg-success" },
 };
 
 const USERS = Object.keys(USER_INFO);
@@ -240,47 +239,46 @@ function getFileType(name: string): string {
 }
 
 function getProgressColor(p: number) {
-  if (p >= 80) return "text-emerald-500";
-  if (p >= 40) return "text-blue-500";
-  if (p > 0) return "text-amber-500";
+  if (p >= 80) return "text-success";
+  if (p >= 40) return "text-primary";
+  if (p > 0) return "text-warning";
   return "text-muted-foreground";
 }
 
 function getProgressBg(p: number) {
-  if (p >= 80) return "bg-emerald-500";
-  if (p >= 40) return "bg-blue-500";
-  if (p > 0) return "bg-amber-500";
+  if (p >= 80) return "bg-success";
+  if (p >= 40) return "bg-primary";
+  if (p > 0) return "bg-warning";
   return "bg-muted";
 }
 
 const STATUS_STYLES: Record<string, string> = {
   대기: "bg-muted text-foreground",
-  진행중: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
-  검토중:
-    "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
-  완료: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
-  지연: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
+  진행중: "bg-primary/10 text-primary",
+  검토중: "bg-warning/10 text-warning",
+  완료: "bg-success/10 text-success",
+  지연: "bg-destructive/10 text-destructive",
 };
 
 const PRIORITY_STYLES: Record<string, string> = {
-  긴급: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
-  높음: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+  긴급: "bg-destructive/10 text-destructive",
+  높음: "bg-warning/10 text-warning",
   보통: "bg-muted text-foreground",
-  낮음: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
+  낮음: "bg-success/10 text-success",
 };
 
 const PR_STATUS_STYLES: Record<string, string> = {
-  요청: "bg-red-100 text-red-800",
-  견적중: "bg-amber-100 text-amber-800",
-  발주완료: "bg-blue-100 text-blue-800",
-  입고완료: "bg-emerald-100 text-emerald-800",
+  요청: "bg-destructive/10 text-destructive",
+  견적중: "bg-warning/10 text-warning",
+  발주완료: "bg-primary/10 text-primary",
+  입고완료: "bg-success/10 text-success",
 };
 
 const CR_STATUS_STYLES: Record<string, string> = {
-  요청: "bg-amber-100 text-amber-800",
-  접수: "bg-amber-100 text-amber-800",
-  진행중: "bg-blue-100 text-blue-800",
-  완료: "bg-emerald-100 text-emerald-800",
+  요청: "bg-warning/10 text-warning",
+  접수: "bg-warning/10 text-warning",
+  진행중: "bg-primary/10 text-primary",
+  완료: "bg-success/10 text-success",
 };
 
 const CR_NEXT: Record<string, string> = {
@@ -445,7 +443,7 @@ export default function MyWorkPage() {
         setProjects([]);
       }
     } catch {
-      toast.error("업무 목록을 불러오는데 실패했습니다.");
+      toast.error("업무 목록을 불러오는데 실패했어요.");
       setProjects([]);
     } finally {
       setLoading(false);
@@ -585,12 +583,12 @@ export default function MyWorkPage() {
     if (!taskId) return;
     const res = await createSubItem(taskId, { name: newSiName.trim(), weight: w, progress: 0, status: "대기" });
     if (res.success) {
-      toast.success("수행항목이 추가되었습니다.");
+      toast.success("수행항목이 추가되었어요.");
       setNewSiName("");
       setNewSiWeight("");
       fetchMyWork();
     } else {
-      toast.error(res.message || "수행항목 추가에 실패했습니다.");
+      toast.error(res.message || "수행항목 추가에 실패했어요.");
     }
   }, [selectedTask, newSiName, newSiWeight, fetchMyWork]);
 
@@ -603,10 +601,10 @@ export default function MyWorkPage() {
       if (siId) {
         const res = await deleteSubItem(String(siId));
         if (res.success) {
-          toast.success("수행항목이 삭제되었습니다.");
+          toast.success("수행항목이 삭제되었어요.");
           fetchMyWork();
         } else {
-          toast.error(res.message || "수행항목 삭제에 실패했습니다.");
+          toast.error(res.message || "수행항목 삭제에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -636,10 +634,10 @@ export default function MyWorkPage() {
       if (siId) {
         const res = await updateSubItem(String(siId), { progress: newProgress, status: newStatus });
         if (res.success) {
-          toast.success("수행항목이 업데이트되었습니다.");
+          toast.success("수행항목이 업데이트되었어요.");
           fetchMyWork();
         } else {
-          toast.error(res.message || "수행항목 업데이트에 실패했습니다.");
+          toast.error(res.message || "수행항목 업데이트에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -673,7 +671,7 @@ export default function MyWorkPage() {
         if (res.success) {
           fetchMyWork();
         } else {
-          toast.error(res.message || "진행률 업데이트에 실패했습니다.");
+          toast.error(res.message || "진행률 업데이트에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -740,11 +738,11 @@ export default function MyWorkPage() {
           sub_item_id: siId ?? null,
         });
         if (res.success) {
-          toast.success("작업일지가 등록되었습니다.");
+          toast.success("작업일지가 등록되었어요.");
           setEditingLogIdx(-1);
           fetchMyWork();
         } else {
-          toast.error(res.message || "작업일지 등록에 실패했습니다.");
+          toast.error(res.message || "작업일지 등록에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -772,11 +770,11 @@ export default function MyWorkPage() {
       if (workLogId) {
         const res = await deleteWorkLog(String(workLogId));
         if (res.success) {
-          toast.success("작업일지가 삭제되었습니다.");
+          toast.success("작업일지가 삭제되었어요.");
           setEditingLogIdx(-1);
           fetchMyWork();
         } else {
-          toast.error(res.message || "작업일지 삭제에 실패했습니다.");
+          toast.error(res.message || "작업일지 삭제에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -845,11 +843,11 @@ export default function MyWorkPage() {
           status: pr.status,
         });
         if (!res.success) {
-          toast.error(res.message || "구매요청 등록에 실패했습니다.");
+          toast.error(res.message || "구매요청 등록에 실패했어요.");
           return;
         }
       }
-      if (newItems.length > 0) toast.success("구매요청이 등록되었습니다.");
+      if (newItems.length > 0) toast.success("구매요청이 등록되었어요.");
     }
     updateProjects((draft) => {
       for (const p of draft) {
@@ -890,11 +888,11 @@ export default function MyWorkPage() {
           due_date: cr.dueDate,
         });
         if (!res.success) {
-          toast.error(res.message || "협조요청 등록에 실패했습니다.");
+          toast.error(res.message || "협조요청 등록에 실패했어요.");
           return;
         }
       }
-      if (newItems.length > 0) toast.success("협조요청이 등록되었습니다.");
+      if (newItems.length > 0) toast.success("협조요청이 등록되었어요.");
     }
     updateProjects((draft) => {
       for (const p of draft) {
@@ -919,9 +917,9 @@ export default function MyWorkPage() {
 
   const kanbanConfig = [
     { key: "대기", icon: <Circle className="h-3.5 w-3.5" />, color: "border-muted-foreground/30", titleColor: "text-muted-foreground" },
-    { key: "진행중", icon: <Circle className="h-3.5 w-3.5 text-blue-500" />, color: "border-blue-500", titleColor: "text-blue-500" },
-    { key: "검토중", icon: <Circle className="h-3.5 w-3.5 text-amber-500" />, color: "border-amber-500", titleColor: "text-amber-500" },
-    { key: "완료", icon: <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />, color: "border-emerald-500", titleColor: "text-emerald-500" },
+    { key: "진행중", icon: <Circle className="h-3.5 w-3.5 text-primary" />, color: "border-primary", titleColor: "text-primary" },
+    { key: "검토중", icon: <Circle className="h-3.5 w-3.5 text-warning" />, color: "border-warning", titleColor: "text-warning" },
+    { key: "완료", icon: <CheckCircle2 className="h-3.5 w-3.5 text-success" />, color: "border-success", titleColor: "text-success" },
   ];
 
   // ===== 타임시트 =====
@@ -969,14 +967,18 @@ export default function MyWorkPage() {
   }
 
   return (
-    <div className="flex h-full flex-col gap-2 p-3">
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
       {/* 헤더 */}
       <div className="flex shrink-0 items-center justify-between">
         <div className="flex items-center gap-3">
-          <h1 className="text-xl font-bold">
-            <BarChart3 className="mr-1.5 inline h-5 w-5" />
-            내 업무 현황
-          </h1>
+          <div className="flex flex-col gap-0.5">
+            <div className="flex items-center gap-1 text-[11px] text-muted-foreground">
+              <span>설계관리</span>
+              <ChevronRight className="h-3 w-3" />
+              <span className="text-foreground">내업무현황</span>
+            </div>
+            <h1 className="text-lg font-bold leading-tight">내 업무 현황</h1>
+          </div>
           <div className="flex items-center gap-2 rounded-lg border bg-card px-2.5 py-1.5">
             <Avatar className="h-7 w-7">
               <AvatarFallback className={cn("text-xs font-bold text-white", USER_INFO[currentUser]?.color || "bg-primary")}>
@@ -1006,68 +1008,135 @@ export default function MyWorkPage() {
       </div>
 
       {/* 검색 필터 */}
-      <div className="flex shrink-0 flex-wrap items-center gap-2 rounded-lg border bg-card px-2.5 py-1.5">
-        <Select value={filterProject} onValueChange={setFilterProject}>
-          <SelectTrigger className="h-7 w-[130px] text-xs" size="xs"><SelectValue placeholder="전체 프로젝트" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">전체 프로젝트</SelectItem>
-            {projectList.map((p) => (
-              <SelectItem key={p.id} value={p.id}>{p.id} {p.name}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Select value={filterStatus} onValueChange={setFilterStatus}>
-          <SelectTrigger className="h-7 w-[100px] text-xs" size="xs"><SelectValue placeholder="전체 상태" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">전체 상태</SelectItem>
-            {["대기", "진행중", "검토중", "완료"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-          </SelectContent>
-        </Select>
-        <Select value={filterPriority} onValueChange={setFilterPriority}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="전체 우선순위" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">전체 우선순위</SelectItem>
-            {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-          </SelectContent>
-        </Select>
-        <Select value={filterCategory} onValueChange={setFilterCategory}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="전체 유형" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">전체 유형</SelectItem>
-            {["기구설계", "전장설계", "SW개발", "구매/조달", "조립/시운전", "검토/승인"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-          </SelectContent>
-        </Select>
-        <div className="relative">
-          <Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            value={filterKeyword}
-            onChange={(e) => setFilterKeyword(e.target.value)}
-            placeholder="업무명 검색..."
-            className="h-7 w-[120px] pl-7 text-xs"
-          />
+      <div className="shrink-0 rounded-lg border border-border bg-card px-5 py-4">
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] items-end gap-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트</span>
+            <Select value={filterProject} onValueChange={setFilterProject}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 프로젝트" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 프로젝트</SelectItem>
+                {projectList.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>{p.id} {p.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">진행상태</span>
+            <Select value={filterStatus} onValueChange={setFilterStatus}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 상태" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 상태</SelectItem>
+                {["대기", "진행중", "검토중", "완료"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">우선순위</span>
+            <Select value={filterPriority} onValueChange={setFilterPriority}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 우선순위" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 우선순위</SelectItem>
+                {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무유형</span>
+            <Select value={filterCategory} onValueChange={setFilterCategory}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 유형" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 유형</SelectItem>
+                {["기구설계", "전장설계", "SW개발", "구매/조달", "조립/시운전", "검토/승인"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">검색어</span>
+            <div className="relative">
+              <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={filterKeyword}
+                onChange={(e) => setFilterKeyword(e.target.value)}
+                placeholder="업무명 검색..."
+                className="h-9 pl-8 text-xs"
+              />
+            </div>
+          </div>
+          <div className="flex items-end justify-end gap-2">
+            <Button variant="outline" size="sm" className="h-9" onClick={handleResetFilter}>
+              <RotateCcw className="mr-1.5 h-4 w-4" />
+              초기화
+            </Button>
+          </div>
         </div>
-        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={handleResetFilter}>
-          <RotateCcw className="mr-1 h-3 w-3" />초기화
-        </Button>
       </div>
 
-      {/* 통계 카드 */}
-      <div className="grid shrink-0 grid-cols-5 gap-2">
-        {[
-          { icon: <ClipboardList className="h-4 w-4 text-blue-500" />, value: stats.total, label: "전체 업무", bg: "bg-blue-50 dark:bg-blue-900/20" },
-          { icon: <Circle className="h-4 w-4 text-amber-500" />, value: stats.progress, label: "진행중", bg: "bg-amber-50 dark:bg-amber-900/20" },
-          { icon: <CheckCircle2 className="h-4 w-4 text-emerald-500" />, value: stats.done, label: "완료", bg: "bg-emerald-50 dark:bg-emerald-900/20" },
-          { icon: <AlertCircle className="h-4 w-4 text-red-500" />, value: stats.delay, label: "지연", bg: "bg-red-50 dark:bg-red-900/20" },
-          { icon: <Clock className="h-4 w-4 text-violet-500" />, value: `${stats.weekHours}h`, label: "이번주 투입", bg: "bg-violet-50 dark:bg-violet-900/20" },
-        ].map((s, i) => (
-          <Card key={i} className="flex flex-row items-center gap-2 rounded-lg border px-3 py-2 shadow-none">
-            <div className={cn("flex h-8 w-8 items-center justify-center rounded-lg", s.bg)}>{s.icon}</div>
-            <div>
-              <div className="text-lg font-bold">{s.value}</div>
-              <div className="text-[11px] text-muted-foreground">{s.label}</div>
+      {/* 통계 요약 바 */}
+      <div className="shrink-0 rounded-lg border border-border bg-card px-5 py-3">
+        <div className="flex flex-wrap items-center gap-5">
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10">
+              <ClipboardList className="h-3.5 w-3.5 text-primary" />
             </div>
-          </Card>
-        ))}
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.total}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">전체</span>
+            </div>
+          </div>
+          <div className="h-4 w-px bg-border" />
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-warning/10">
+              <Circle className="h-3.5 w-3.5 text-warning" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.progress}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">진행중</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-success/10">
+              <CheckCircle2 className="h-3.5 w-3.5 text-success" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.done}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">완료</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className={cn("flex h-7 w-7 items-center justify-center rounded-md", stats.delay > 0 ? "bg-destructive/10" : "bg-muted")}>
+              <AlertCircle className={cn("h-3.5 w-3.5", stats.delay > 0 ? "text-destructive" : "text-muted-foreground")} />
+            </div>
+            <div className="leading-none">
+              <span className={cn("text-sm font-bold", stats.delay > 0 && "text-destructive")}>{stats.delay}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">지연</span>
+            </div>
+          </div>
+          <div className="h-4 w-px bg-border" />
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-info/10">
+              <Clock className="h-3.5 w-3.5 text-info" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.weekHours}h</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">이번주 투입</span>
+            </div>
+          </div>
+          <div className="ml-auto flex items-center gap-2">
+            <span className="rounded-full border border-primary/15 bg-primary/8 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+              {filteredTasks.length}건
+            </span>
+          </div>
+        </div>
       </div>
 
       {/* 메인 영역 */}
@@ -1075,11 +1144,14 @@ export default function MyWorkPage() {
         {/* 왼쪽: 업무 현황 */}
         <ResizablePanel defaultSize={45} minSize={25}>
           <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
-            <div className="flex shrink-0 items-center justify-between border-b bg-muted/30 px-3 py-1.5">
-              <span className="text-sm font-bold">
-                <ClipboardList className="mr-1 inline h-4 w-4" />
-                업무 현황
-              </span>
+            <div className="flex shrink-0 items-center justify-between border-b bg-muted/50 px-4 py-2.5">
+              <div className="flex items-center gap-2">
+                <ClipboardList className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-semibold">업무 현황</span>
+                <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                  {filteredTasks.length}건
+                </span>
+              </div>
               <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as any)}>
                 <TabsList className="h-7">
                   <TabsTrigger value="kanban" className="h-5 gap-1 px-2 text-[11px]">
@@ -1102,22 +1174,22 @@ export default function MyWorkPage() {
                       const tasks = kanbanCols[col.key] || [];
                       const extraCount = col.key === "대기" ? receivedCoops.length : 0;
                       return (
-                        <div key={col.key} className="flex flex-col rounded-lg bg-muted/50 p-2">
-                          <div className={cn("mb-2 flex items-center justify-between border-b-2 pb-1.5", col.color)}>
-                            <span className={cn("flex items-center gap-1 text-xs font-bold", col.titleColor)}>
+                        <div key={col.key} className="flex flex-col rounded-lg border bg-muted/30 p-2">
+                          <div className={cn("mb-2 flex items-center justify-between rounded-md border-l-[3px] bg-card px-2 py-1.5", col.color)}>
+                            <span className={cn("flex items-center gap-1.5 text-xs font-bold", col.titleColor)}>
                               {col.icon}{col.key}
                             </span>
-                            <Badge variant="outline" className="h-5 px-1.5 text-[10px]">{tasks.length + extraCount}</Badge>
+                            <span className="rounded-full border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] font-bold text-muted-foreground">{tasks.length + extraCount}</span>
                           </div>
                           <div className="flex flex-1 flex-col gap-1.5 overflow-y-auto">
                             {col.key === "대기" && receivedCoops.map((cr, i) => (
-                              <div key={`coop-${i}`} className="rounded-md border border-amber-200 bg-amber-50 p-2 dark:border-amber-900/50 dark:bg-amber-900/10">
-                                <div className="text-[10px] text-amber-600">
+                              <div key={`coop-${i}`} className="rounded-md border border-warning/30 bg-warning/10 p-2">
+                                <div className="text-[10px] text-warning">
                                   <Handshake className="mr-0.5 inline h-3 w-3" /> 협조 · {cr.fromUser}
                                 </div>
                                 <div className="text-xs font-semibold">{cr.title}</div>
                                 <div className="mt-0.5 text-[10px] text-muted-foreground">{cr.projectName}</div>
-                                <div className={cn("mt-0.5 text-[10px]", new Date(cr.dueDate) < today ? "font-semibold text-destructive" : "text-emerald-600")}>
+                                <div className={cn("mt-0.5 text-[10px]", new Date(cr.dueDate) < today ? "font-semibold text-destructive" : "text-success")}>
                                   <Calendar className="mr-0.5 inline h-3 w-3" />{cr.dueDate}
                                 </div>
                               </div>
@@ -1133,7 +1205,7 @@ export default function MyWorkPage() {
                                 <div
                                   key={`${t.projectId}-${t.name}`}
                                   className={cn(
-                                    "cursor-pointer rounded-md border bg-card p-2 transition-all hover:shadow-sm",
+                                    "cursor-pointer rounded-md border bg-card p-2 transition-all",
                                     isSelected && "border-primary ring-2 ring-primary/20"
                                   )}
                                   onClick={() => handleSelectTask(t.projectId, t.name)}
@@ -1150,7 +1222,7 @@ export default function MyWorkPage() {
                                     </div>
                                     <span className={cn("text-[10px] font-semibold", getProgressColor(t.progress))}>{t.progress}%</span>
                                   </div>
-                                  <div className={cn("mt-0.5 text-[10px]", isDelay ? "font-semibold text-destructive" : dd <= 3 ? "text-amber-500" : "text-emerald-600")}>
+                                  <div className={cn("mt-0.5 text-[10px]", isDelay ? "font-semibold text-destructive" : dd <= 3 ? "text-warning" : "text-success")}>
                                     <Calendar className="mr-0.5 inline h-3 w-3" />{dueText}
                                   </div>
                                   {(coopCount > 0 || attCount > 0) && (
@@ -1163,7 +1235,7 @@ export default function MyWorkPage() {
                               );
                             })}
                             {tasks.length === 0 && extraCount === 0 && (
-                              <div className="py-3 text-center text-[11px] text-muted-foreground">없음</div>
+                              <div className="py-3 text-center text-[11px] text-muted-foreground">업무가 없어요</div>
                             )}
                           </div>
                         </div>
@@ -1173,66 +1245,50 @@ export default function MyWorkPage() {
                 )}
 
                 {viewMode === "list" && (
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead className="w-[90px] text-[11px]">프로젝트</TableHead>
-                        <TableHead className="text-[11px]">업무명</TableHead>
-                        <TableHead className="w-[65px] text-[11px]">유형</TableHead>
-                        <TableHead className="w-[55px] text-center text-[11px]">상태</TableHead>
-                        <TableHead className="w-[80px] text-[11px]">종료일</TableHead>
-                        <TableHead className="w-[70px] text-[11px]">진행률</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {filteredTasks
-                        .sort((a, b) => {
-                          const ad = a.status !== "완료" && new Date(a.end) < today;
-                          const bd = b.status !== "완료" && new Date(b.end) < today;
-                          if (ad && !bd) return -1;
-                          if (!ad && bd) return 1;
-                          const ord: Record<string, number> = { 진행중: 0, 대기: 1, 검토중: 2, 완료: 3 };
-                          return (ord[a.status] ?? 9) - (ord[b.status] ?? 9);
-                        })
-                        .map((t) => {
-                          const isDelay = t.status !== "완료" && new Date(t.end) < today;
-                          const displayStatus = isDelay ? "지연" : t.status;
-                          const isSelected = selectedTaskKey === `${t.projectId}||${t.name}`;
-                          return (
-                            <TableRow
-                              key={`${t.projectId}-${t.name}`}
-                              className={cn("cursor-pointer", isSelected && "bg-accent")}
-                              onClick={() => handleSelectTask(t.projectId, t.name)}
-                            >
-                              <TableCell className="text-[10px]">
-                                <span className="font-semibold text-primary">{t.projectId}</span>
-                                <br />
-                                <span className="text-muted-foreground">{t.projectName}</span>
-                              </TableCell>
-                              <TableCell className="text-xs font-medium">{t.name}</TableCell>
-                              <TableCell className="text-[11px]">{t.category}</TableCell>
-                              <TableCell className="text-center">
-                                <Badge className={cn("text-[10px]", STATUS_STYLES[displayStatus])}>{displayStatus}</Badge>
-                              </TableCell>
-                              <TableCell className={cn("text-[11px]", isDelay && "font-semibold text-destructive")}>{t.end}</TableCell>
-                              <TableCell>
-                                <div className="flex items-center gap-1.5">
-                                  <div className="h-1 w-12 overflow-hidden rounded-full bg-muted">
-                                    <div className={cn("h-full rounded-full", getProgressBg(t.progress))} style={{ width: `${t.progress}%` }} />
-                                  </div>
-                                  <span className="text-[10px]">{t.progress}%</span>
-                                </div>
-                              </TableCell>
-                            </TableRow>
-                          );
-                        })}
-                      {filteredTasks.length === 0 && (
-                        <TableRow>
-                          <TableCell colSpan={6} className="py-8 text-center text-xs text-muted-foreground">검색 결과 없음</TableCell>
-                        </TableRow>
-                      )}
-                    </TableBody>
-                  </Table>
+                  <EDataTable
+                    columns={[
+                      { key: "projectId", label: "프로젝트", width: "w-[90px]", render: (_v, row) => (
+                        <div className="text-[10px]">
+                          <span className="font-semibold text-primary">{row.projectId}</span>
+                          <br />
+                          <span className="text-muted-foreground">{row.projectName}</span>
+                        </div>
+                      )},
+                      { key: "name", label: "업무명" },
+                      { key: "category", label: "유형", width: "w-[65px]" },
+                      { key: "status", label: "상태", width: "w-[55px]", align: "center", render: (_v, row) => {
+                        const isDelay = row.status !== "완료" && new Date(row.end) < today;
+                        const displayStatus = isDelay ? "지연" : row.status;
+                        return <Badge className={cn("text-[10px]", STATUS_STYLES[displayStatus])}>{displayStatus}</Badge>;
+                      }},
+                      { key: "end", label: "종료일", width: "w-[80px]", render: (v, row) => {
+                        const isDelay = row.status !== "완료" && new Date(row.end) < today;
+                        return <span className={cn("text-[11px]", isDelay && "font-semibold text-destructive")}>{v}</span>;
+                      }},
+                      { key: "progress", label: "진행률", width: "w-[70px]", sortable: true, render: (v) => (
+                        <div className="flex items-center gap-1.5">
+                          <div className="h-1 w-12 overflow-hidden rounded-full bg-muted">
+                            <div className={cn("h-full rounded-full", getProgressBg(v))} style={{ width: `${v}%` }} />
+                          </div>
+                          <span className="text-[10px]">{v}%</span>
+                        </div>
+                      )},
+                    ] as EDataTableColumn<MyTask>[]}
+                    data={[...filteredTasks].sort((a, b) => {
+                      const ad = a.status !== "완료" && new Date(a.end) < today;
+                      const bd = b.status !== "완료" && new Date(b.end) < today;
+                      if (ad && !bd) return -1;
+                      if (!ad && bd) return 1;
+                      const ord: Record<string, number> = { 진행중: 0, 대기: 1, 검토중: 2, 완료: 3 };
+                      return (ord[a.status] ?? 9) - (ord[b.status] ?? 9);
+                    })}
+                    rowKey={(row) => `${row.projectId}||${row.name}`}
+                    selectedId={selectedTaskKey}
+                    onRowClick={(row) => handleSelectTask(row.projectId, row.name)}
+                    emptyMessage="검색 결과가 없어요"
+                    showPagination={false}
+                    draggableColumns={false}
+                  />
                 )}
 
                 {viewMode === "timesheet" && (
@@ -1256,16 +1312,16 @@ export default function MyWorkPage() {
                       </span>
                     </div>
                     <Table>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead className="min-w-[120px] text-[11px]">프로젝트/업무</TableHead>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="min-w-[120px] text-[11px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">프로젝트/업무</TableHead>
                           {timesheetData.wds.map((d, i) => (
                             <TableHead
                               key={i}
                               className={cn(
                                 "text-center text-[10px]",
-                                i >= 5 && "bg-red-50 dark:bg-red-900/10",
-                                d.toDateString() === today.toDateString() && "bg-blue-50 text-primary dark:bg-blue-900/10"
+                                i >= 5 && "bg-destructive/5",
+                                d.toDateString() === today.toDateString() && "bg-primary/5 text-primary"
                               )}
                             >
                               {timesheetData.dn[i]}
@@ -1273,25 +1329,25 @@ export default function MyWorkPage() {
                               <span className="text-[9px]">{d.getMonth() + 1}/{d.getDate()}</span>
                             </TableHead>
                           ))}
-                          <TableHead className="text-center text-[11px] font-bold">합계</TableHead>
+                          <TableHead className="text-center text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">합계</TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
                         {Object.keys(timesheetData.ph).length === 0 && (
                           <TableRow>
-                            <TableCell colSpan={9} className="py-8 text-center text-xs text-muted-foreground">기록 없음</TableCell>
+                            <TableCell colSpan={9} className="py-8 text-center text-[13px] text-muted-foreground">기록이 없어요</TableCell>
                           </TableRow>
                         )}
                         {Object.values(timesheetData.ph).map((p) => (
                           <React.Fragment key={p.id}>
-                            <TableRow className="bg-muted/30">
+                            <TableRow className="bg-muted/50">
                               <TableCell className="text-[10px] font-bold text-primary">{p.id} {p.name}</TableCell>
                               {p.days.map((v, i) => (
-                                <TableCell key={i} className={cn("text-center text-[11px] font-semibold", i >= 5 && "bg-red-50 dark:bg-red-900/10", v > 0 ? "" : "text-muted-foreground/30")}>
+                                <TableCell key={i} className={cn("text-center text-[11px] font-semibold", i >= 5 && "bg-destructive/5", v > 0 ? "" : "text-muted-foreground/30")}>
                                   {v > 0 ? `${v}h` : "-"}
                                 </TableCell>
                               ))}
-                              <TableCell className="text-center text-xs font-bold text-primary">{p.total}h</TableCell>
+                              <TableCell className="text-center text-[13px] font-bold text-primary">{p.total}h</TableCell>
                             </TableRow>
                             {Object.entries(p.tasks).map(([tn, days]) => {
                               const tt = days.reduce((s, v) => s + v, 0);
@@ -1299,7 +1355,7 @@ export default function MyWorkPage() {
                                 <TableRow key={tn}>
                                   <TableCell className="pl-4 text-[10px] text-muted-foreground">└ {tn}</TableCell>
                                   {days.map((v, i) => (
-                                    <TableCell key={i} className={cn("text-center text-[10px]", i >= 5 && "bg-red-50 dark:bg-red-900/10", v > 0 ? "" : "text-muted-foreground/30")}>
+                                    <TableCell key={i} className={cn("text-center text-[10px]", i >= 5 && "bg-destructive/5", v > 0 ? "" : "text-muted-foreground/30")}>
                                       {v > 0 ? `${v}h` : "-"}
                                     </TableCell>
                                   ))}
@@ -1309,10 +1365,10 @@ export default function MyWorkPage() {
                             })}
                           </React.Fragment>
                         ))}
-                        <TableRow className="bg-blue-50 font-bold dark:bg-blue-900/10">
+                        <TableRow className="bg-primary/5 font-bold">
                           <TableCell className="text-[11px]">합계</TableCell>
                           {timesheetData.dt.map((v, i) => (
-                            <TableCell key={i} className={cn("text-center text-[11px]", i >= 5 && "bg-red-50 dark:bg-red-900/10", v > 0 ? "text-primary" : "text-muted-foreground/30")}>
+                            <TableCell key={i} className={cn("text-center text-[11px]", i >= 5 && "bg-destructive/5", v > 0 ? "text-primary" : "text-muted-foreground/30")}>
                               {v > 0 ? `${v}h` : "-"}
                             </TableCell>
                           ))}
@@ -1333,15 +1389,20 @@ export default function MyWorkPage() {
         <ResizablePanel defaultSize={55} minSize={30}>
           <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
             {!selectedTask ? (
-              <div className="flex h-full flex-col items-center justify-center gap-2 text-muted-foreground">
-                <PointerIcon className="h-8 w-8" />
-                <span className="text-sm">왼쪽에서 업무를 선택하세요</span>
+              <div className="flex h-full flex-col items-center justify-center gap-3 text-muted-foreground">
+                <div className="flex h-14 w-14 items-center justify-center rounded-full border-2 border-dashed border-border">
+                  <PointerIcon className="h-6 w-6 text-muted-foreground/50" />
+                </div>
+                <div className="text-center">
+                  <p className="text-sm font-medium">업무를 선택해주세요</p>
+                  <p className="text-xs text-muted-foreground/60">왼쪽 목록에서 업무를 클릭하면 상세 정보가 표시돼요</p>
+                </div>
               </div>
             ) : (
               <>
                 {/* 상세 헤더 */}
-                <div className="flex shrink-0 items-center justify-between border-b bg-muted/30 px-3 py-2">
-                  <span className="text-sm font-bold">{selectedTask.task.name}</span>
+                <div className="flex shrink-0 items-center justify-between border-b bg-muted/50 px-3 py-2">
+                  <h3 className="text-[13px] font-bold">{selectedTask.task.name}</h3>
                   <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => setSelectedTaskKey(null)}>
                     <X className="h-3.5 w-3.5" />
                   </Button>
@@ -1375,8 +1436,8 @@ export default function MyWorkPage() {
                   {/* 수행항목 */}
                   <ResizablePanel defaultSize={40} minSize={20}>
                     <div className="flex h-full flex-col">
-                      <div className="shrink-0 border-b bg-muted/30 px-3 py-1.5 text-xs font-bold">
-                        <ClipboardList className="mr-1 inline h-3.5 w-3.5" />수행항목
+                      <div className="shrink-0 border-b bg-muted/50 px-3 py-1.5">
+                        <h3 className="text-[13px] font-bold">수행항목</h3>
                       </div>
                       <ScrollArea className="flex-1">
                         {/* 추가 입력 */}
@@ -1408,7 +1469,7 @@ export default function MyWorkPage() {
                                 onClick={(e) => e.stopPropagation()}
                                 className="h-4 w-4"
                               />
-                              <span className={cn("min-w-0 flex-1 truncate text-xs font-semibold", done && "text-muted-foreground line-through")}>
+                              <span className={cn("min-w-0 flex-1 truncate text-[13px] font-semibold", done && "text-muted-foreground line-through")}>
                                 {si.name}
                               </span>
                               <Badge variant="outline" className="h-4 px-1 text-[9px]">{si.weight}%</Badge>
@@ -1426,7 +1487,7 @@ export default function MyWorkPage() {
 
                         {/* 요약 */}
                         {selectedTask.task.subItems.length > 0 && (
-                          <div className="flex items-center justify-between border-b bg-blue-50 px-2.5 py-1 text-[11px] dark:bg-blue-900/10">
+                          <div className="flex items-center justify-between border-b bg-primary/5 px-2.5 py-1 text-[11px]">
                             <span>
                               가중 진행률: <strong className="text-primary">{calcAutoProgress(selectedTask.task)}%</strong>
                               {selectedTask.task.subItems.reduce((s, i) => s + i.weight, 0) !== 100 && (
@@ -1462,8 +1523,8 @@ export default function MyWorkPage() {
                   {/* 수행기록 */}
                   <ResizablePanel defaultSize={60} minSize={30}>
                     <div className="flex h-full flex-col">
-                      <div className="shrink-0 border-b bg-muted/30 px-3 py-1.5 text-xs font-bold">
-                        <FileEdit className="mr-1 inline h-3.5 w-3.5" />수행기록
+                      <div className="shrink-0 border-b bg-muted/50 px-3 py-1.5">
+                        <h3 className="text-[13px] font-bold">수행기록</h3>
                       </div>
                       <ScrollArea className="flex-1">
                         {selectedSubItemId === "__unassigned__" ? (
@@ -1556,7 +1617,7 @@ export default function MyWorkPage() {
           </DialogHeader>
           <div className="space-y-2">
             {modalAttachments.map((f, i) => (
-              <div key={f.id} className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
+              <div key={f.id} className="flex items-center gap-2 rounded-md border bg-muted/50 p-2">
                 {getFileIcon(f.type)}
                 <div className="flex-1">
                   <div className="text-xs font-semibold">{f.name}</div>
@@ -1636,9 +1697,9 @@ export default function MyWorkPage() {
               </Button>
             </div>
             <div className="text-xs font-semibold">등록된 구매요청 ({modalPurchaseReqs.length})</div>
-            {modalPurchaseReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없습니다.</div>}
+            {modalPurchaseReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없어요.</div>}
             {modalPurchaseReqs.map((pr, i) => (
-              <div key={pr.id} className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
+              <div key={pr.id} className="flex items-center gap-2 rounded-md border bg-muted/50 p-2">
                 <ShoppingCart className="h-3.5 w-3.5" />
                 <strong className="text-xs">{pr.item}</strong>
                 <span className="text-[10px] text-muted-foreground">{pr.qty} {pr.unit}</span>
@@ -1698,9 +1759,9 @@ export default function MyWorkPage() {
               </Button>
             </div>
             <div className="text-xs font-semibold">등록된 협조요청 ({modalCoopReqs.length})</div>
-            {modalCoopReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없습니다.</div>}
+            {modalCoopReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없어요.</div>}
             {modalCoopReqs.map((cr, i) => (
-              <div key={cr.id} className="space-y-1 rounded-md border bg-muted/30 p-2">
+              <div key={cr.id} className="space-y-1 rounded-md border bg-muted/50 p-2">
                 <div className="flex items-center gap-2">
                   <Handshake className="h-3.5 w-3.5" />
                   <strong className="flex-1 text-xs">{cr.title}</strong>
@@ -1762,7 +1823,7 @@ function RenderLogs({ title, logs, editingLogIdx, editForm, setEditForm, onStart
       {logs.length === 0 && editingLogIdx !== -2 && (
         <div className="flex flex-col items-center justify-center gap-1 py-8 text-muted-foreground">
           <FileEdit className="h-6 w-6" />
-          <span className="text-xs">기록이 없습니다</span>
+          <span className="text-xs">기록이 없어요</span>
         </div>
       )}
       {logs.map((log) => {
@@ -1805,12 +1866,12 @@ function RenderLogs({ title, logs, editingLogIdx, editForm, setEditForm, onStart
                 </Badge>
               )}
               {prC > 0 && (
-                <Badge className="h-4 cursor-pointer gap-0.5 bg-amber-50 px-1 text-[9px] text-amber-800 hover:bg-amber-100 dark:bg-amber-900/20" onClick={(e) => { e.stopPropagation(); onOpenPr(idx); }}>
+                <Badge className="h-4 cursor-pointer gap-0.5 bg-warning/10 px-1 text-[9px] text-warning hover:bg-warning/20" onClick={(e) => { e.stopPropagation(); onOpenPr(idx); }}>
                   <ShoppingCart className="h-2.5 w-2.5" />{prC}
                 </Badge>
               )}
               {crC > 0 && (
-                <Badge className="h-4 cursor-pointer gap-0.5 bg-pink-50 px-1 text-[9px] text-pink-800 hover:bg-pink-100 dark:bg-pink-900/20" onClick={(e) => { e.stopPropagation(); onOpenCr(idx); }}>
+                <Badge className="h-4 cursor-pointer gap-0.5 bg-info/10 px-1 text-[9px] text-info hover:bg-info/20" onClick={(e) => { e.stopPropagation(); onOpenCr(idx); }}>
                   <Handshake className="h-2.5 w-2.5" />{crC}
                 </Badge>
               )}
@@ -1861,7 +1922,7 @@ interface EditLogRowProps {
 function EditLogRow({ logIdx, editForm, setEditForm, onSave, onCancel, onOpenAtt, onOpenPr, onOpenCr, attCount, prCount, crCount }: EditLogRowProps) {
   const hours = calcHours(editForm.startDt, editForm.endDt);
   return (
-    <div className="space-y-1.5 rounded-md border border-emerald-300 bg-emerald-50/50 p-2.5 dark:border-emerald-800 dark:bg-emerald-900/10">
+    <div className="space-y-1.5 rounded-md border border-primary/30 bg-primary/5 p-2.5">
       <div className="flex flex-wrap items-center gap-1.5">
         <Input type="datetime-local" value={editForm.startDt} onChange={(e) => setEditForm((p) => ({ ...p, startDt: e.target.value }))} className="h-6 w-[155px] text-[11px]" />
         <span className="text-xs text-muted-foreground">~</span>
@@ -1889,7 +1950,7 @@ function EditLogRow({ logIdx, editForm, setEditForm, onSave, onCancel, onOpenAtt
         </div>
         <div className="flex gap-1">
           <Button variant="outline" size="sm" className="h-5 px-2 text-[10px]" onClick={onCancel}>취소</Button>
-          <Button size="sm" className="h-5 bg-emerald-500 px-2 text-[10px] hover:bg-emerald-600" onClick={() => onSave(logIdx)}>저장</Button>
+          <Button size="sm" className="h-5 bg-success px-2 text-[10px] hover:bg-success/90" onClick={() => onSave(logIdx)}>저장</Button>
         </div>
       </div>
     </div>
diff --git a/frontend/app/(main)/COMPANY_29/design/project/page.tsx b/frontend/app/(main)/COMPANY_29/design/project/page.tsx
index 8f5d3799..7e66b696 100644
--- a/frontend/app/(main)/COMPANY_29/design/project/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/design/project/page.tsx
@@ -18,17 +18,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-  DialogDescription,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import {
@@ -38,7 +28,6 @@ import {
 } from "@/components/ui/resizable";
 import {
   Plus,
-  RotateCcw,
   Save,
   Pencil,
   Trash2,
@@ -50,9 +39,18 @@ import {
   Users,
   FileText,
   Loader2,
+  Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
 import {
   getProjectList,
   createProject,
@@ -62,6 +60,10 @@ import {
   updateTask,
   deleteTask,
 } from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 // --- Types ---
 type ProjectStatus = "진행중" | "계획" | "보류" | "완료";
@@ -186,36 +188,36 @@ function mapProject(p: any): Project {
   };
 }
 
-// --- 상태 색상 ---
+// --- 상태 색상 (CSS 변수 기반) ---
 const getStatusColor = (status: ProjectStatus) => {
   switch (status) {
     case "진행중":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "계획":
-      return "bg-slate-100 text-slate-800 border-slate-200";
+      return "bg-muted text-muted-foreground border-border";
     case "보류":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "완료":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-primary/15 text-primary border-primary/25";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getTaskStatusColor = (status: string) => {
   switch (status) {
     case "대기":
-      return "bg-gray-100 text-gray-700";
+      return "bg-muted text-muted-foreground";
     case "진행중":
-      return "bg-blue-100 text-blue-800";
+      return "bg-primary/10 text-primary";
     case "검토중":
-      return "bg-amber-100 text-amber-800";
+      return "bg-destructive/10 text-destructive";
     case "완료":
-      return "bg-emerald-100 text-emerald-800";
+      return "bg-primary/15 text-primary";
     case "지연":
-      return "bg-rose-100 text-rose-800";
+      return "bg-destructive/10 text-destructive";
     default:
-      return "bg-gray-100 text-gray-700";
+      return "bg-muted text-muted-foreground";
   }
 };
 
@@ -232,9 +234,9 @@ const getRelationLabel = (r: RelationType | null) => {
 const getRelationColor = (r: RelationType | null) => {
   if (!r) return "";
   const m: Record<RelationType, string> = {
-    sub: "bg-blue-100 text-blue-700",
-    depend: "bg-amber-100 text-amber-800",
-    related: "bg-purple-100 text-purple-700",
+    sub: "bg-primary/10 text-primary",
+    depend: "bg-destructive/10 text-destructive",
+    related: "bg-secondary text-secondary-foreground",
   };
   return m[r];
 };
@@ -249,10 +251,10 @@ const categoryIcons: Record<string, string> = {
 };
 
 const progressColor = (p: number) =>
-  p >= 80 ? "bg-emerald-500" : p >= 40 ? "bg-blue-500" : p > 0 ? "bg-amber-500" : "bg-gray-300";
+  p >= 80 ? "bg-primary" : p >= 40 ? "bg-primary/70" : p > 0 ? "bg-primary/40" : "bg-muted-foreground/30";
 
 const progressTextColor = (p: number) =>
-  p >= 80 ? "text-emerald-600" : p >= 40 ? "text-blue-600" : p > 0 ? "text-amber-600" : "text-gray-400";
+  p >= 80 ? "text-primary" : p >= 40 ? "text-primary/80" : p > 0 ? "text-primary/60" : "text-muted-foreground";
 
 // --- Helper functions ---
 function getChildren(projects: Project[], parentId: string): Project[] {
@@ -268,17 +270,29 @@ function getAllDescendants(projects: Project[], parentId: string): Project[] {
   return all;
 }
 
+// --- Grid Columns ---
+const PROJECT_GRID_COLUMNS = [
+  { key: "project_no", label: "프로젝트번호" },
+  { key: "status", label: "상태" },
+  { key: "name", label: "프로젝트명" },
+  { key: "pm", label: "PM" },
+  { key: "customer", label: "고객" },
+  { key: "start_date", label: "시작일" },
+  { key: "end_date", label: "종료예정" },
+  { key: "progress", label: "진행률" },
+  { key: "source_no", label: "원접수번호" },
+];
+
 // --- Component ---
 export default function DesignProjectPage() {
+  const ts = useTableSettings("c16-design-project", "dsn_project", PROJECT_GRID_COLUMNS);
   const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState(true);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>({});
 
-  // 검색
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchPM, setSearchPM] = useState("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 상세 탭
   const [detailTab, setDetailTab] = useState("wbs");
@@ -350,18 +364,40 @@ export default function DesignProjectPage() {
     }
   }, []);
 
+  // snake_case → camelCase 매핑 (DynamicSearchFilter의 columnName은 snake_case)
+  const fieldMap: Record<string, string> = {
+    project_no: "projectNo",
+    start_date: "startDate",
+    end_date: "endDate",
+    source_no: "sourceNo",
+  };
+  const getFieldValue = (obj: any, colName: string): string => {
+    const key = fieldMap[colName] || colName;
+    const val = obj[key];
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
   // 필터링
   const filteredProjects = useMemo(() => {
-    if (searchStatus === "all" && searchPM === "all" && !searchKeyword) return projects;
+    if (searchFilters.length === 0) return projects;
 
     const matched = new Set<string>();
     projects.forEach((p) => {
       let pass = true;
-      if (searchStatus !== "all" && p.status !== searchStatus) pass = false;
-      if (searchPM !== "all" && p.pm !== searchPM) pass = false;
-      if (searchKeyword) {
-        const str = [p.projectNo, p.name, p.customer, p.pm, p.sourceNo].join(" ").toLowerCase();
-        if (!str.includes(searchKeyword.toLowerCase())) pass = false;
+      for (const f of searchFilters) {
+        const val = getFieldValue(p, f.columnName);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) { pass = false; break; }
+        } else if (f.operator === "equals") {
+          if (val !== f.value) { pass = false; break; }
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) { pass = false; break; }
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) { pass = false; break; }
+          if (to && val > to) { pass = false; break; }
+        }
       }
       if (pass) matched.add(p.id);
     });
@@ -379,7 +415,7 @@ export default function DesignProjectPage() {
     });
 
     return projects.filter((p) => result.has(p.id));
-  }, [projects, searchStatus, searchPM, searchKeyword]);
+  }, [projects, searchFilters]);
 
   const selectedProject = useMemo(
     () => projects.find((p) => p.id === selectedId),
@@ -411,11 +447,6 @@ export default function DesignProjectPage() {
     }));
   };
 
-  const handleResetSearch = () => {
-    setSearchStatus("all");
-    setSearchPM("all");
-    setSearchKeyword("");
-  };
 
   // --- 프로젝트 모달 ---
   const openProjectModal = (editProject?: Project, presetParentId?: string) => {
@@ -666,209 +697,144 @@ export default function DesignProjectPage() {
   );
 
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4">
-      {/* 검색 섹션 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[110px] h-9"><SelectValue /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                <SelectItem value="진행중">진행중</SelectItem>
-                <SelectItem value="계획">계획</SelectItem>
-                <SelectItem value="보류">보류</SelectItem>
-                <SelectItem value="완료">완료</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">PM</Label>
-            <Select value={searchPM} onValueChange={setSearchPM}>
-              <SelectTrigger className="w-[110px] h-9"><SelectValue /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                <SelectItem value="이설계">이설계</SelectItem>
-                <SelectItem value="박도면">박도면</SelectItem>
-                <SelectItem value="최기구">최기구</SelectItem>
-                <SelectItem value="김전장">김전장</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">프로젝트/고객 검색</Label>
-            <Input
-              placeholder="프로젝트번호 / 프로젝트명 / 고객명"
-              className="w-[280px] h-9"
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-            />
-          </div>
-          <div className="flex-1" />
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+    <div className="flex flex-col h-[calc(100vh-4rem)] gap-3 p-3">
+      {/* 검색 필터 */}
+      <div className="shrink-0">
+        <DynamicSearchFilter
+          tableName="dsn_project"
+          filterId="c16-design-project"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredProjects.length}
+        />
+      </div>
 
       {/* 좌우 분할 메인 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
         <ResizablePanelGroup direction="horizontal">
           {/* 왼쪽: 프로젝트 목록 */}
-          <ResizablePanel defaultSize={selectedId ? 50 : 100} minSize={30}>
+          <ResizablePanel defaultSize={55} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2">
-                  <Rocket className="w-5 h-5" /> 프로젝트 목록
-                  <Badge variant="secondary" className="font-normal">{filteredProjects.length}건</Badge>
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold flex items-center gap-2">
+                  프로젝트 목록
+                  <span className="text-xs font-medium text-primary bg-primary/8 border border-primary/15 rounded-md px-1.5 py-0.5">{filteredProjects.length}건</span>
                 </div>
                 <Button size="sm" onClick={() => openProjectModal()}>
                   <Plus className="w-4 h-4 mr-1.5" /> 프로젝트 등록
                 </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
               </div>
 
               <div className="flex-1 overflow-auto">
-                <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                    <TableRow>
-                      <TableHead className="w-[160px]">프로젝트번호</TableHead>
-                      <TableHead className="w-[80px] text-center">상태</TableHead>
-                      <TableHead className="w-[200px]">프로젝트명</TableHead>
-                      <TableHead className="w-[70px]">PM</TableHead>
-                      <TableHead className="w-[80px]">고객</TableHead>
-                      <TableHead className="w-[90px]">시작일</TableHead>
-                      <TableHead className="w-[90px]">종료예정</TableHead>
-                      <TableHead className="w-[100px] text-center">진행률</TableHead>
-                      <TableHead className="w-[90px]">원접수번호</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {loading ? (
-                      <TableRow>
-                        <TableCell colSpan={9} className="h-32 text-center text-muted-foreground">
-                          <Loader2 className="w-10 h-10 mx-auto mb-2 animate-spin text-muted-foreground" />
-                          <div className="text-sm">로딩 중...</div>
-                        </TableCell>
-                      </TableRow>
-                    ) : treeRows.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={9} className="h-32 text-center text-muted-foreground">
-                          <Rocket className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
-                          조건에 맞는 프로젝트가 없습니다
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      treeRows.map(({ project: p, depth }) => {
-                        const hasChildren = filteredProjects.some((c) => c.parentId === p.id);
-                        const isExpanded = expandedIds[p.id] !== false;
-                        const childCount = getAllDescendants(projects, p.id).length;
-
-                        return (
-                          <TableRow
-                            key={p.id}
-                            className={cn(
-                              "cursor-pointer hover:bg-muted/50 transition-colors",
-                              selectedId === p.id && "bg-primary/5",
-                              depth === 1 && "bg-slate-50/50",
-                              depth >= 2 && "bg-violet-50/30"
-                            )}
-                            onClick={() => {
-                              setSelectedId(p.id);
-                              setDetailTab("wbs");
-                              fetchTaskDetails(p.id);
-                            }}
-                          >
-                            <TableCell>
-                              <div className="flex items-center gap-1" style={{ paddingLeft: depth * 20 }}>
-                                {hasChildren ? (
-                                  <button
-                                    className="p-0.5 rounded hover:bg-muted transition-transform"
-                                    onClick={(e) => { e.stopPropagation(); toggleExpand(p.id); }}
-                                  >
-                                    <ChevronRight className={cn("w-3.5 h-3.5 text-muted-foreground transition-transform", isExpanded && "rotate-90")} />
-                                  </button>
-                                ) : (
-                                  <span className="w-4" />
-                                )}
-                                <span className={cn("font-semibold text-xs", depth === 0 ? "text-primary" : depth === 1 ? "text-indigo-600" : "text-violet-600")}>
-                                  {p.projectNo}
-                                </span>
-                                {p.relation && (
-                                  <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(p.relation))}>
-                                    {getRelationLabel(p.relation)}
-                                  </span>
-                                )}
-                              </div>
-                            </TableCell>
-                            <TableCell className="text-center">
-                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(p.status))}>
-                                {p.status}
-                              </span>
-                            </TableCell>
-                            <TableCell className="font-medium text-sm">
-                              {p.name}
-                              {childCount > 0 && (
-                                <Badge variant="outline" className="ml-1.5 text-[10px] py-0 px-1.5 font-normal">
-                                  <FolderOpen className="w-3 h-3 mr-0.5" /> {childCount}
-                                </Badge>
-                              )}
-                            </TableCell>
-                            <TableCell className="text-xs">{p.pm}</TableCell>
-                            <TableCell className="text-xs">{p.customer}</TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{p.startDate}</TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{p.endDate}</TableCell>
-                            <TableCell>
-                              <div className="flex items-center gap-1.5">
-                                <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
-                                  <div className={cn("h-full rounded-full transition-all", progressColor(p.progress))} style={{ width: `${p.progress}%` }} />
-                                </div>
-                                <span className={cn("text-[11px] font-medium min-w-[28px] text-right", progressTextColor(p.progress))}>{p.progress}%</span>
-                              </div>
-                            </TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{p.sourceNo || "-"}</TableCell>
-                          </TableRow>
-                        );
-                      })
-                    )}
-                  </TableBody>
-                </Table>
+                <EDataTable
+                  columns={[
+                    { key: "projectNo", label: "프로젝트번호", width: "w-[160px]", render: (_val: any, row: any) => {
+                      const depth = row._depth ?? 0;
+                      const hasChildren = filteredProjects.some((c) => c.parentId === row.id);
+                      const isExpanded = expandedIds[row.id] !== false;
+                      return (
+                        <div className="flex items-center gap-1" style={{ paddingLeft: depth * 20 }}>
+                          {hasChildren ? (
+                            <button className="p-0.5 rounded hover:bg-muted transition-transform" onClick={(e) => { e.stopPropagation(); toggleExpand(row.id); }}>
+                              <ChevronRight className={cn("w-3.5 h-3.5 text-muted-foreground transition-transform", isExpanded && "rotate-90")} />
+                            </button>
+                          ) : (<span className="w-4" />)}
+                          <span className={cn("font-semibold text-xs", depth === 0 ? "text-primary" : depth === 1 ? "text-primary/80" : "text-primary/60")}>{row.projectNo}</span>
+                          {row.relation && (<span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(row.relation))}>{getRelationLabel(row.relation)}</span>)}
+                        </div>
+                      );
+                    }},
+                    { key: "status", label: "상태", width: "w-[80px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(val))}>{val}</span> },
+                    { key: "name", label: "프로젝트명", width: "w-[200px]", render: (val: any, row: any) => {
+                      const childCount = getAllDescendants(projects, row.id).length;
+                      return (<><span className="font-medium text-sm">{val}</span>{childCount > 0 && <Badge variant="outline" className="ml-1.5 text-[10px] py-0 px-1.5 font-normal"><FolderOpen className="w-3 h-3 mr-0.5" /> {childCount}</Badge>}</>);
+                    }},
+                    { key: "pm", label: "PM", width: "w-[70px]" },
+                    { key: "customer", label: "고객", width: "w-[80px]" },
+                    { key: "startDate", label: "시작일", width: "w-[90px]" },
+                    { key: "endDate", label: "종료예정", width: "w-[90px]" },
+                    { key: "progress", label: "진행률", width: "w-[100px]", align: "center" as const, render: (val: any) => (
+                      <div className="flex items-center gap-1.5">
+                        <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                          <div className={cn("h-full rounded-full transition-all", progressColor(val))} style={{ width: `${val}%` }} />
+                        </div>
+                        <span className={cn("text-[11px] font-medium min-w-[28px] text-right", progressTextColor(val))}>{val}%</span>
+                      </div>
+                    )},
+                    { key: "sourceNo", label: "원접수번호", width: "w-[90px]", render: (val: any) => <span className="text-[13px] text-muted-foreground">{val || "-"}</span> },
+                  ] as EDataTableColumn[]}
+                  data={ts.groupData(treeRows.map(({ project: p, depth }) => ({ ...p, _depth: depth })))}
+                  rowKey={(row) => row.id}
+                  loading={loading}
+                  emptyMessage="조건에 맞는 프로젝트가 없어요"
+                  selectedId={selectedId}
+                  onSelect={(id) => {
+                    if (id) {
+                      setSelectedId(id);
+                      setDetailTab("wbs");
+                      fetchTaskDetails(id);
+                    }
+                  }}
+                  onRowClick={(row) => {
+                    setSelectedId(row.id);
+                    setDetailTab("wbs");
+                    fetchTaskDetails(row.id);
+                  }}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
               </div>
             </div>
           </ResizablePanel>
 
-          {/* 오른쪽: 상세 */}
-          {selectedId && selectedProject && (
-            <>
-              <ResizableHandle withHandle />
-              <ResizablePanel defaultSize={50} minSize={30}>
-                <div className="flex flex-col h-full bg-card">
-                  {/* 상세 헤더 */}
-                  <div className="flex items-center justify-between p-3 border-b shrink-0">
-                    <span className="font-semibold text-sm flex items-center gap-2">
-                      <ClipboardList className="w-4 h-4" />
-                      {selectedProject.projectNo} - {selectedProject.name}
-                    </span>
-                    <div className="flex items-center gap-1.5">
-                      <Button size="sm" variant="default" className="h-7 text-xs" onClick={() => openTaskModal()}>
-                        <Plus className="w-3.5 h-3.5 mr-1" /> 업무 추가
-                      </Button>
-                      <Button size="sm" variant="default" className="h-7 text-xs bg-violet-600 hover:bg-violet-700" onClick={() => openProjectModal(undefined, selectedProject.id)}>
-                        <FolderOpen className="w-3.5 h-3.5 mr-1" /> 하위 프로젝트
-                      </Button>
-                      <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openProjectModal(selectedProject)}>
-                        <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
-                      </Button>
-                    </div>
-                  </div>
+          <ResizableHandle withHandle />
 
-                  <div className="flex-1 overflow-auto p-4 space-y-4">
+          {/* 오른쪽: 상세 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 상세 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                {selectedProject ? (
+                  <div className="text-[13px] font-bold flex items-center gap-2">
+                    {selectedProject.name}
+                    <Badge variant="outline" className="text-[11px] font-normal px-1.5 py-0">{selectedProject.projectNo}</Badge>
+                  </div>
+                ) : (
+                  <div className="text-[13px] font-bold flex items-center gap-2">
+                    <ClipboardList className="w-3.5 h-3.5" /> 프로젝트 상세
+                  </div>
+                )}
+                {selectedProject && (
+                  <div className="flex items-center gap-1.5">
+                    <Button size="sm" variant="default" className="h-7 text-xs" onClick={() => openTaskModal()}>
+                      <Plus className="w-3.5 h-3.5 mr-1" /> 업무 추가
+                    </Button>
+                    <Button size="sm" variant="secondary" className="h-7 text-xs" onClick={() => openProjectModal(undefined, selectedProject.id)}>
+                      <FolderOpen className="w-3.5 h-3.5 mr-1" /> 하위 프로젝트
+                    </Button>
+                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openProjectModal(selectedProject)}>
+                      <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {!selectedId || !selectedProject ? (
+                <div className="flex-1 flex items-center justify-center p-8">
+                  <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-12 py-10 text-center">
+                    <Rocket className="h-10 w-10 text-muted-foreground/40" />
+                    <p className="text-sm text-muted-foreground">좌측에서 프로젝트를 선택해주세요</p>
+                  </div>
+                </div>
+              ) : (
+              <div className="flex-1 overflow-auto p-3 space-y-3">
                     {/* 상위 프로젝트 링크 */}
                     {parentProject && (
                       <div
-                        className="flex items-center gap-2 px-3 py-2 bg-blue-50 rounded-md border-l-[3px] border-primary text-sm cursor-pointer hover:bg-blue-100 transition-colors"
+                        className="flex items-center gap-2 px-3 py-2 bg-primary/5 rounded-md border-l-[3px] border-primary text-sm cursor-pointer hover:bg-primary/10 transition-colors"
                         onClick={() => { setSelectedId(parentProject.id); setDetailTab("wbs"); fetchTaskDetails(parentProject.id); }}
                       >
                         <span className="text-muted-foreground">상위:</span>
@@ -882,56 +848,61 @@ export default function DesignProjectPage() {
                     )}
 
                     {/* 개요 카드 */}
-                    <div className="grid grid-cols-5 gap-3">
-                      {[
-                        { label: "전체 업무", value: taskStats.total, color: "text-primary" },
-                        { label: "완료", value: taskStats.completed, color: "text-emerald-600" },
-                        { label: "진행중", value: taskStats.inProgress, color: "text-amber-600" },
-                        { label: "지연", value: taskStats.delayed, color: "text-destructive" },
-                        { label: "하위 프로젝트", value: childProjects.length, color: "text-violet-600" },
-                      ].map((item) => (
-                        <div key={item.label} className="bg-muted/30 rounded-lg p-3 text-center border">
-                          <div className="text-[11px] text-muted-foreground mb-1">{item.label}</div>
-                          <div className={cn("text-2xl font-bold", item.color)}>{item.value}</div>
-                        </div>
-                      ))}
+                    <div className="space-y-1.5">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 현황</span>
+                      <div className="grid grid-cols-5 gap-2">
+                        {[
+                          { label: "전체 업무", value: taskStats.total, color: "text-primary", bg: "bg-primary/5 border-primary/10" },
+                          { label: "완료", value: taskStats.completed, color: "text-primary", bg: "bg-primary/5 border-primary/10" },
+                          { label: "진행중", value: taskStats.inProgress, color: "text-primary/80", bg: "bg-primary/5 border-primary/10" },
+                          { label: "지연", value: taskStats.delayed, color: "text-destructive", bg: "bg-destructive/5 border-destructive/10" },
+                          { label: "하위 프로젝트", value: childProjects.length, color: "text-foreground", bg: "bg-muted/40 border-border" },
+                        ].map((item) => (
+                          <div key={item.label} className={cn("rounded-lg p-2.5 text-center border transition-colors hover:opacity-80", item.bg)}>
+                            <div className="text-[10px] text-muted-foreground mb-0.5">{item.label}</div>
+                            <div className={cn("text-xl font-bold", item.color)}>{item.value}</div>
+                          </div>
+                        ))}
+                      </div>
                     </div>
 
                     {/* 탭 */}
-                    <Tabs value={detailTab} onValueChange={setDetailTab}>
-                      <TabsList className="w-full">
-                        <TabsTrigger value="wbs" className="flex-1 text-xs gap-1.5">
-                          <ClipboardList className="w-3.5 h-3.5" /> WBS
-                        </TabsTrigger>
-                        <TabsTrigger value="gantt" className="flex-1 text-xs gap-1.5">
-                          <BarChart3 className="w-3.5 h-3.5" /> 간트차트
-                        </TabsTrigger>
-                        <TabsTrigger value="team" className="flex-1 text-xs gap-1.5">
-                          <Users className="w-3.5 h-3.5" /> 팀원
-                        </TabsTrigger>
-                        <TabsTrigger value="subprojects" className="flex-1 text-xs gap-1.5">
-                          <FolderOpen className="w-3.5 h-3.5" /> 하위({childProjects.length})
-                        </TabsTrigger>
+                    <Tabs value={detailTab} onValueChange={setDetailTab} className="flex flex-col flex-1 overflow-hidden gap-0">
+                      <TabsList className="bg-card w-full justify-start rounded-none border-b border-border p-0 h-auto shrink-0">
+                        {[
+                          { value: "wbs", icon: <ClipboardList className="w-3.5 h-3.5" />, label: "WBS" },
+                          { value: "gantt", icon: <BarChart3 className="w-3.5 h-3.5" />, label: "간트차트" },
+                          { value: "team", icon: <Users className="w-3.5 h-3.5" />, label: "팀원" },
+                          { value: "subprojects", icon: <FolderOpen className="w-3.5 h-3.5" />, label: `하위(${childProjects.length})` },
+                        ].map((tab) => (
+                          <TabsTrigger
+                            key={tab.value}
+                            value={tab.value}
+                            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                          >
+                            {tab.icon} {tab.label}
+                          </TabsTrigger>
+                        ))}
                       </TabsList>
 
                       {/* WBS 탭 */}
-                      <TabsContent value="wbs" className="mt-4">
+                      <TabsContent value="wbs" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
                         {selectedProject.tasks.length === 0 ? (
-                          <div className="text-center py-10 text-muted-foreground">
-                            <ClipboardList className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
-                            <div className="text-sm">등록된 업무가 없습니다</div>
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <ClipboardList className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">등록된 업무가 없어요</span>
                           </div>
                         ) : (
                           <Table>
-                            <TableHeader>
-                              <TableRow>
-                                <TableHead className="w-[180px]">업무명</TableHead>
-                                <TableHead className="w-[70px]">담당자</TableHead>
-                                <TableHead className="w-[85px]">시작일</TableHead>
-                                <TableHead className="w-[85px]">종료일</TableHead>
-                                <TableHead className="w-[70px] text-center">상태</TableHead>
-                                <TableHead className="w-[90px] text-center">진행률</TableHead>
-                                <TableHead className="w-[80px] text-center">관리</TableHead>
+                            <TableHeader className="sticky top-0 z-10">
+                              <TableRow className="bg-muted hover:bg-muted">
+                                <TableHead className="w-[180px] text-[11px] uppercase tracking-wide">업무명</TableHead>
+                                <TableHead className="w-[70px] text-[11px] uppercase tracking-wide">담당자</TableHead>
+                                <TableHead className="w-[85px] text-[11px] uppercase tracking-wide">시작일</TableHead>
+                                <TableHead className="w-[85px] text-[11px] uppercase tracking-wide">종료일</TableHead>
+                                <TableHead className="w-[70px] text-center text-[11px] uppercase tracking-wide">상태</TableHead>
+                                <TableHead className="w-[90px] text-center text-[11px] uppercase tracking-wide">진행률</TableHead>
+                                <TableHead className="w-[80px] text-center text-[11px] uppercase tracking-wide">관리</TableHead>
                               </TableRow>
                             </TableHeader>
                             <TableBody>
@@ -953,10 +924,10 @@ export default function DesignProjectPage() {
                                       const displayStatus = isDelay ? "지연" : task.status;
                                       return (
                                         <TableRow key={task._idx}>
-                                          <TableCell className="pl-8 text-xs">{task.name}</TableCell>
-                                          <TableCell className="text-xs">{task.assignee}</TableCell>
-                                          <TableCell className="text-xs text-muted-foreground">{task.start}</TableCell>
-                                          <TableCell className={cn("text-xs", isDelay && "text-destructive font-semibold")}>{task.end}</TableCell>
+                                          <TableCell className="pl-8 text-[13px]">{task.name}</TableCell>
+                                          <TableCell className="text-[13px]">{task.assignee}</TableCell>
+                                          <TableCell className="text-[13px] text-muted-foreground">{task.start}</TableCell>
+                                          <TableCell className={cn("text-[13px]", isDelay && "text-destructive font-semibold")}>{task.end}</TableCell>
                                           <TableCell className="text-center">
                                             <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", getTaskStatusColor(displayStatus))}>
                                               {displayStatus}
@@ -995,11 +966,11 @@ export default function DesignProjectPage() {
                       </TabsContent>
 
                       {/* 간트차트 탭 */}
-                      <TabsContent value="gantt" className="mt-4">
+                      <TabsContent value="gantt" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
                         {selectedProject.tasks.length === 0 ? (
-                          <div className="text-center py-10 text-muted-foreground">
-                            <BarChart3 className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
-                            <div className="text-sm">업무를 등록하면 간트차트가 표시됩니다</div>
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <BarChart3 className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">업무를 등록하면 간트차트가 표시돼요</span>
                           </div>
                         ) : (
                           <GanttChart tasks={selectedProject.tasks} startDate={selectedProject.startDate} endDate={selectedProject.endDate} />
@@ -1007,22 +978,22 @@ export default function DesignProjectPage() {
                       </TabsContent>
 
                       {/* 팀원 탭 */}
-                      <TabsContent value="team" className="mt-4">
+                      <TabsContent value="team" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
                         {selectedProject.tasks.length === 0 ? (
-                          <div className="text-center py-10 text-muted-foreground">
-                            <Users className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
-                            <div className="text-sm">업무를 등록하면 팀원 현황이 표시됩니다</div>
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <Users className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">업무를 등록하면 팀원 현황이 표시돼요</span>
                           </div>
                         ) : (
                           <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                             {Object.entries(teamMembers).map(([name, tasks], idx) => {
                               const avgProg = Math.round(tasks.reduce((s, t) => s + t.progress, 0) / tasks.length);
                               const isPM = name === selectedProject.pm;
-                              const avatarColors = ["bg-primary", "bg-emerald-600", "bg-violet-600", "bg-amber-600"];
+                              const avatarColors = ["bg-primary", "bg-primary/80", "bg-primary/60", "bg-destructive/70"];
                               return (
                                 <div key={name} className="border rounded-lg p-4 hover:shadow-sm transition-shadow">
                                   <div className="flex items-center gap-3 mb-3">
-                                    <div className={cn("w-10 h-10 rounded-full flex items-center justify-center text-white font-bold", avatarColors[idx % 4])}>
+                                    <div className={cn("w-10 h-10 rounded-full flex items-center justify-center text-primary-foreground font-bold", avatarColors[idx % 4])}>
                                       {name.charAt(0)}
                                     </div>
                                     <div>
@@ -1063,7 +1034,7 @@ export default function DesignProjectPage() {
                       </TabsContent>
 
                       {/* 하위 프로젝트 탭 */}
-                      <TabsContent value="subprojects" className="mt-4">
+                      <TabsContent value="subprojects" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                           {childProjects.map((child) => {
                             const completedCount = child.tasks.filter((t) => t.status === "완료").length;
@@ -1113,44 +1084,47 @@ export default function DesignProjectPage() {
                       </TabsContent>
                     </Tabs>
                   </div>
-                </div>
-              </ResizablePanel>
-            </>
-          )}
+              )}
+            </div>
+          </ResizablePanel>
         </ResizablePanelGroup>
       </div>
 
       {/* 프로젝트 등록/수정 모달 */}
       <Dialog open={isProjectModalOpen} onOpenChange={setIsProjectModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">
-              {projects.some((p) => p.id === formProjectId) ? "프로젝트 수정" : formParentId ? "하위 프로젝트 등록" : "프로젝트 등록"}
+            <DialogTitle>
+              {projects.some((p) => p.id === formProjectId)
+                ? "프로젝트 수정"
+                : formParentId
+                ? "하위 프로젝트 등록"
+                : "프로젝트 등록"}
             </DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">프로젝트 기본 정보를 입력하세요.</DialogDescription>
+            <DialogDescription>프로젝트 기본 정보를 입력해주세요.</DialogDescription>
           </DialogHeader>
           <div className="space-y-3 sm:space-y-4">
             <div>
-              <Label className="text-xs sm:text-sm">프로젝트 번호</Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 번호</span>
               <Input value={formProjectNo || formProjectId} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted/50" />
             </div>
             <div>
-              <Label className="text-xs sm:text-sm">프로젝트명 <span className="text-destructive">*</span></Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트명 <span className="text-destructive">*</span></span>
               <Input value={formName} onChange={(e) => setFormName(e.target.value)} placeholder="프로젝트명" className="h-8 text-xs sm:h-10 sm:text-sm" />
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">시작일 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">시작일 <span className="text-destructive">*</span></span>
                 <Input type="date" value={formStartDate} onChange={(e) => setFormStartDate(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">종료예정일 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">종료예정일 <span className="text-destructive">*</span></span>
                 <Input type="date" value={formEndDate} onChange={(e) => setFormEndDate(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">PM <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">PM <span className="text-destructive">*</span></span>
                 <Select value={formPM || "none"} onValueChange={(v) => setFormPM(v === "none" ? "" : v)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="선택" /></SelectTrigger>
                   <SelectContent>
@@ -1163,13 +1137,13 @@ export default function DesignProjectPage() {
                 </Select>
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">고객</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">고객</span>
                 <Input value={formCustomer} onChange={(e) => setFormCustomer(e.target.value)} placeholder="고객/거래처명" className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">상위 프로젝트</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상위 프로젝트</span>
                 <Select value={formParentId || "none"} onValueChange={(v) => setFormParentId(v === "none" ? "" : v)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="없음" /></SelectTrigger>
                   <SelectContent>
@@ -1181,7 +1155,7 @@ export default function DesignProjectPage() {
                 </Select>
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">관계 유형</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">관계 유형</span>
                 <Select value={formRelation} onValueChange={(v) => setFormRelation(v as RelationType)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
                   <SelectContent>
@@ -1193,17 +1167,17 @@ export default function DesignProjectPage() {
               </div>
             </div>
             <div>
-              <Label className="text-xs sm:text-sm">원접수번호</Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">원접수번호</span>
               <Input value={formSourceNo} onChange={(e) => setFormSourceNo(e.target.value)} placeholder="DR-XXXX-XXXX" className="h-8 text-xs sm:h-10 sm:text-sm" />
             </div>
             <div>
-              <Label className="text-xs sm:text-sm">설명</Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">설명</span>
               <Textarea value={formDesc} onChange={(e) => setFormDesc(e.target.value)} placeholder="프로젝트 개요" rows={3} />
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setIsProjectModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
-            <Button onClick={handleSaveProject} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsProjectModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveProject}>
               <Save className="w-4 h-4 mr-1.5" /> 저장
             </Button>
           </DialogFooter>
@@ -1212,19 +1186,19 @@ export default function DesignProjectPage() {
 
       {/* 업무 등록/수정 모달 */}
       <Dialog open={isTaskModalOpen} onOpenChange={setIsTaskModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">{editingTaskIdx >= 0 ? "업무 수정" : "업무 등록"}</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">업무 정보를 입력하세요.</DialogDescription>
+            <DialogTitle>{editingTaskIdx >= 0 ? "업무 수정" : "업무 등록"}</DialogTitle>
+            <DialogDescription>업무 정보를 입력해주세요.</DialogDescription>
           </DialogHeader>
           <div className="space-y-3">
             <div>
-              <Label className="text-xs sm:text-sm">업무명 <span className="text-destructive">*</span></Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무명 <span className="text-destructive">*</span></span>
               <Input value={tName} onChange={(e) => setTName(e.target.value)} placeholder="업무명" className="h-8 text-xs sm:h-10 sm:text-sm" />
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">업무 유형</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무 유형</span>
                 <Select value={tCategory} onValueChange={setTCategory}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
                   <SelectContent>
@@ -1235,7 +1209,7 @@ export default function DesignProjectPage() {
                 </Select>
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">담당자 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자 <span className="text-destructive">*</span></span>
                 <Select value={tAssignee || "none"} onValueChange={(v) => setTAssignee(v === "none" ? "" : v)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="선택" /></SelectTrigger>
                   <SelectContent>
@@ -1249,17 +1223,17 @@ export default function DesignProjectPage() {
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">시작일 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">시작일 <span className="text-destructive">*</span></span>
                 <Input type="date" value={tStart} onChange={(e) => setTStart(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">종료일 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">종료일 <span className="text-destructive">*</span></span>
                 <Input type="date" value={tEnd} onChange={(e) => setTEnd(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">상태</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상태</span>
                 <Select value={tStatus} onValueChange={(v) => setTStatus(v as TaskStatus)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
                   <SelectContent>
@@ -1270,18 +1244,18 @@ export default function DesignProjectPage() {
                 </Select>
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">진행률 (%)</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">진행률 (%)</span>
                 <Input type="number" min={0} max={100} value={tProgress} onChange={(e) => setTProgress(Number(e.target.value))} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
             </div>
             <div>
-              <Label className="text-xs sm:text-sm">비고</Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">비고</span>
               <Textarea value={tRemark} onChange={(e) => setTRemark(e.target.value)} placeholder="비고 사항" rows={2} />
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setIsTaskModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
-            <Button onClick={handleSaveTask} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsTaskModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveTask}>
               <Save className="w-4 h-4 mr-1.5" /> 저장
             </Button>
           </DialogFooter>
@@ -1290,15 +1264,15 @@ export default function DesignProjectPage() {
 
       {/* 태스크 상세 모달 (수행기록/이슈) */}
       <Dialog open={isTaskDetailOpen} onOpenChange={setIsTaskDetailOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[700px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-3xl max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">{detailTask?.name || "업무 상세"}</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">업무 이력 및 이슈를 확인합니다.</DialogDescription>
+            <DialogTitle>{detailTask?.name || "업무 상세"}</DialogTitle>
+            <DialogDescription>업무 이력 및 이슈를 확인해주세요.</DialogDescription>
           </DialogHeader>
           {detailTask && (
             <>
               {/* 태스크 요약 */}
-              <div className="grid grid-cols-2 gap-2 bg-muted/30 p-3 rounded-lg border text-xs">
+              <div className="grid grid-cols-2 gap-2 bg-muted/20 p-3 rounded-lg border text-xs">
                 <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">유형</span><span className="font-medium">{detailTask.category}</span></div>
                 <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">담당자</span><span className="font-medium">{detailTask.assignee}</span></div>
                 <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">기간</span><span className="font-medium">{detailTask.start} ~ {detailTask.end}</span></div>
@@ -1320,11 +1294,14 @@ export default function DesignProjectPage() {
                 </TabsList>
 
                 <TabsContent value="log" className="mt-3">
-                  <div className="bg-blue-50 rounded-md p-2.5 mb-3 text-xs text-blue-800 border border-blue-100">
-                    수행기록 등록/수정은 <strong>내업무현황</strong> 메뉴에서 진행합니다.
+                  <div className="bg-primary/5 rounded-md p-2.5 mb-3 text-xs text-primary border border-primary/20">
+                    수행기록 등록/수정은 <strong>내업무현황</strong> 메뉴에서 진행해요.
                   </div>
                   {(!detailTask.workLogs || detailTask.workLogs.length === 0) ? (
-                    <div className="text-center py-8 text-muted-foreground text-sm">등록된 수행기록이 없습니다.</div>
+                    <div className="flex flex-col items-center gap-2 py-8 mx-auto max-w-xs border border-dashed border-border rounded-lg">
+                      <ClipboardList className="w-8 h-8 text-muted-foreground/30" />
+                      <span className="text-sm text-muted-foreground">등록된 수행기록이 없어요</span>
+                    </div>
                   ) : (
                     <div className="space-y-2 max-h-[300px] overflow-y-auto">
                       {[...detailTask.workLogs].sort((a, b) => b.date.localeCompare(a.date)).map((log, i) => {
@@ -1342,7 +1319,7 @@ export default function DesignProjectPage() {
                               <div className="flex gap-2 text-muted-foreground flex-wrap">
                                 <Badge variant="secondary" className="text-[10px] py-0">⏱ {log.hours}h</Badge>
                                 {log.progressBefore !== undefined && (
-                                  <Badge variant="outline" className="text-[10px] py-0 bg-emerald-50 text-emerald-700 border-emerald-200">
+                                  <Badge variant="outline" className="text-[10px] py-0 bg-primary/5 text-primary border-primary/20">
                                     📈 {log.progressBefore}% → {log.progressAfter}%
                                   </Badge>
                                 )}
@@ -1358,12 +1335,15 @@ export default function DesignProjectPage() {
 
                 <TabsContent value="issue" className="mt-3">
                   {(!detailTask.issues || detailTask.issues.length === 0) ? (
-                    <div className="text-center py-8 text-muted-foreground text-sm">등록된 이슈가 없습니다.</div>
+                    <div className="flex flex-col items-center gap-2 py-8 mx-auto max-w-xs border border-dashed border-border rounded-lg">
+                      <ClipboardList className="w-8 h-8 text-muted-foreground/30" />
+                      <span className="text-sm text-muted-foreground">등록된 이슈가 없어요</span>
+                    </div>
                   ) : (
                     <div className="space-y-2 max-h-[300px] overflow-y-auto">
                       {detailTask.issues.map((issue) => {
-                        const priorityColor = issue.priority === "긴급" ? "text-destructive" : issue.priority === "높음" ? "text-amber-600" : "text-muted-foreground";
-                        const statusBadge = issue.status === "해결" ? "bg-emerald-100 text-emerald-700" : issue.status === "진행중" ? "bg-blue-100 text-blue-700" : "bg-rose-100 text-rose-700";
+                        const priorityColor = issue.priority === "긴급" ? "text-destructive" : issue.priority === "높음" ? "text-destructive/70" : "text-muted-foreground";
+                        const statusBadge = issue.status === "해결" ? "bg-primary/10 text-primary" : issue.status === "진행중" ? "bg-primary/10 text-primary" : "bg-destructive/10 text-destructive";
                         return (
                           <div key={issue.id} className="border rounded-lg p-3">
                             <div className="flex items-center justify-between mb-1.5">
@@ -1389,10 +1369,19 @@ export default function DesignProjectPage() {
             </>
           )}
           <DialogFooter>
-            <Button variant="outline" onClick={() => setIsTaskDetailOpen(false)} className="h-8 text-xs sm:h-10 sm:text-sm">닫기</Button>
+            <Button variant="outline" onClick={() => setIsTaskDetailOpen(false)}>닫기</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
@@ -1423,12 +1412,12 @@ function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: s
   }
 
   const barColors: Record<string, string> = {
-    기구설계: "bg-blue-500",
-    전장설계: "bg-amber-500",
-    SW개발: "bg-violet-500",
-    "구매/조달": "bg-emerald-500",
-    "조립/시운전": "bg-rose-500",
-    "검토/승인": "bg-gray-400",
+    기구설계: "bg-primary",
+    전장설계: "bg-primary/80",
+    SW개발: "bg-primary/60",
+    "구매/조달": "bg-secondary-foreground/70",
+    "조립/시운전": "bg-destructive/70",
+    "검토/승인": "bg-muted-foreground",
   };
 
   const todayFromStart = Math.ceil((today.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24));
@@ -1465,8 +1454,8 @@ function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: s
                   key={i}
                   className={cn(
                     "text-center text-[10px] text-muted-foreground border-r py-1.5",
-                    isWeekend && "bg-rose-50",
-                    isToday && "bg-blue-50 text-primary font-bold"
+                    isWeekend && "bg-muted/30",
+                    isToday && "bg-primary/5 text-primary font-bold"
                   )}
                   style={{ minWidth: cellWidth }}
                 >
@@ -1485,7 +1474,7 @@ function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: s
           const taskDays = Math.max(1, Math.ceil((tEnd.getTime() - tStart.getTime()) / (1000 * 60 * 60 * 24)) + 1);
           const leftPos = useWeekly ? (dayFromStart / 7) * cellWidth : dayFromStart * cellWidth;
           const barWidth = useWeekly ? (taskDays / 7) * cellWidth : taskDays * cellWidth;
-          const barColor = barColors[task.category] || "bg-blue-500";
+          const barColor = barColors[task.category] || "bg-primary";
 
           return (
             <div key={i} className="flex border-b hover:bg-muted/30 min-h-[34px]">
@@ -1494,10 +1483,10 @@ function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: s
                 {dates.map((d, di) => {
                   const dow = d.getDay();
                   const isWeekend = (dow === 0 || dow === 6) && !useWeekly;
-                  return <div key={di} className={cn("border-r h-full", isWeekend && "bg-rose-50")} style={{ minWidth: cellWidth }} />;
+                  return <div key={di} className={cn("border-r h-full", isWeekend && "bg-muted/30")} style={{ minWidth: cellWidth }} />;
                 })}
                 <div
-                  className={cn("absolute h-5 rounded text-[10px] text-white flex items-center justify-center font-semibold", barColor)}
+                  className={cn("absolute h-5 rounded text-[10px] text-primary-foreground flex items-center justify-center font-semibold", barColor)}
                   style={{ left: leftPos, width: Math.max(barWidth, 16), top: "50%", transform: "translateY(-50%)" }}
                 >
                   {barWidth > 30 ? `${task.progress}%` : ""}
diff --git a/frontend/app/(main)/COMPANY_29/design/task-management/page.tsx b/frontend/app/(main)/COMPANY_29/design/task-management/page.tsx
index d68bb5a2..f5603e46 100644
--- a/frontend/app/(main)/COMPANY_29/design/task-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/design/task-management/page.tsx
@@ -1,15 +1,8 @@
 "use client";
 
-import React, { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import React, { useState, useMemo, useCallback, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import {
   Table,
   TableBody,
@@ -24,10 +17,9 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogFooter,
   DialogDescription,
+  DialogFooter,
 } from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import {
   ResizableHandle,
@@ -48,8 +40,6 @@ import {
   CommandList,
 } from "@/components/ui/command";
 import {
-  Search,
-  RotateCcw,
   RefreshCw,
   ClipboardList,
   Pencil,
@@ -58,7 +48,6 @@ import {
   XCircle,
   Rocket,
   Eye,
-  ChevronRight,
   ArrowRight,
   Check,
   ChevronsUpDown,
@@ -66,7 +55,9 @@ import {
   Loader2,
   User,
   Users,
+  Settings2,
 } from "lucide-react";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
 import {
@@ -77,6 +68,9 @@ import {
 } from "@/lib/api/design";
 import { getUserList } from "@/lib/api/user";
 import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 
 // --- Types ---
 type SourceType = "dr" | "ecr";
@@ -121,39 +115,39 @@ interface TaskItem {
 const getStatusVariant = (status: TaskStatus) => {
   switch (status) {
     case "신규접수":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "검토중":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-muted text-muted-foreground border-border";
     case "승인완료":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-primary/15 text-primary border-primary/25";
     case "반려":
-      return "bg-rose-100 text-rose-800 border-rose-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "프로젝트생성":
-      return "bg-violet-100 text-violet-800 border-violet-200";
+      return "bg-secondary text-secondary-foreground border-border";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getPriorityVariant = (priority: Priority) => {
   switch (priority) {
     case "긴급":
-      return "bg-rose-100 text-rose-800 border-rose-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "높음":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "보통":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-muted text-muted-foreground border-border";
     case "낮음":
-      return "bg-gray-100 text-gray-600 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
     default:
-      return "bg-gray-100 text-gray-600 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getSourceBadge = (type: SourceType) => {
   if (type === "dr")
-    return "bg-blue-100 text-blue-800 border-blue-200";
-  return "bg-amber-100 text-amber-800 border-amber-200";
+    return "bg-primary/10 text-primary border-primary/20";
+  return "bg-secondary text-secondary-foreground border-border";
 };
 
 const getStepIcon = (step: string) => {
@@ -216,11 +210,11 @@ const APPROVAL_STEPS = [
 
 // --- 현황 카드 설정 ---
 const STAT_CARDS: { label: string; status: TaskStatus; color: string; textColor: string }[] = [
-  { label: "신규접수", status: "신규접수", color: "from-indigo-500 to-purple-600", textColor: "text-white" },
-  { label: "검토중", status: "검토중", color: "from-amber-400 to-orange-500", textColor: "text-gray-900" },
-  { label: "승인완료", status: "승인완료", color: "from-cyan-400 to-blue-500", textColor: "text-white" },
-  { label: "반려", status: "반려", color: "from-rose-400 to-red-500", textColor: "text-white" },
-  { label: "프로젝트", status: "프로젝트생성", color: "from-violet-400 to-purple-500", textColor: "text-white" },
+  { label: "신규접수", status: "신규접수", color: "bg-primary", textColor: "text-primary-foreground" },
+  { label: "검토중", status: "검토중", color: "bg-muted border border-border", textColor: "text-foreground" },
+  { label: "승인완료", status: "승인완료", color: "bg-primary/80", textColor: "text-primary-foreground" },
+  { label: "반려", status: "반려", color: "bg-destructive", textColor: "text-destructive-foreground" },
+  { label: "프로젝트", status: "프로젝트생성", color: "bg-secondary", textColor: "text-secondary-foreground" },
 ];
 
 interface EmployeeOption {
@@ -229,7 +223,21 @@ interface EmployeeOption {
   deptName: string;
 }
 
+const TASK_GRID_COLUMNS = [
+  { key: "source_type", label: "구분" },
+  { key: "request_no", label: "접수번호" },
+  { key: "status", label: "상태" },
+  { key: "priority", label: "우선순위" },
+  { key: "target_name", label: "설비/품목명" },
+  { key: "req_dept", label: "의뢰부서" },
+  { key: "requester", label: "의뢰자" },
+  { key: "request_date", label: "접수일자" },
+  { key: "due_date", label: "희망납기" },
+  { key: "designer", label: "설계담당" },
+];
+
 export default function DesignTaskManagementPage() {
+  const ts = useTableSettings("c16-task-management", "dsn_design_request", TASK_GRID_COLUMNS);
   const { user, userName, loading: authLoading } = useAuth();
   const [allTasks, setAllTasks] = useState<TaskItem[]>([]);
   const [loading, setLoading] = useState(true);
@@ -272,11 +280,8 @@ export default function DesignTaskManagementPage() {
     fetchEmployees();
   }, [fetchTasks, fetchEmployees]);
 
-  // 검색 필터
-  const [searchStatus, setSearchStatus] = useState<string>("all");
-  const [searchPriority, setSearchPriority] = useState<string>("all");
-  const [searchReqDept, setSearchReqDept] = useState<string>("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 담당자 선택 모달 상태
   const [designerModalOpen, setDesignerModalOpen] = useState(false);
@@ -336,23 +341,51 @@ export default function DesignTaskManagementPage() {
     };
   }, [myRelatedTasks]);
 
+  // snake_case → camelCase 매핑 (DynamicSearchFilter의 columnName은 snake_case)
+  const taskFieldMap: Record<string, string> = {
+    source_type: "sourceType",
+    request_no: "id",
+    target_name: "targetName",
+    req_dept: "reqDept",
+    request_date: "date",
+    due_date: "dueDate",
+    approval_step: "approvalStep",
+    design_type: "designType",
+    drawing_no: "drawingNo",
+    change_type: "changeType",
+    review_memo: "reviewMemo",
+    project_id: "projectNo",
+  };
+  const getTaskFieldValue = (obj: any, colName: string): string => {
+    const key = taskFieldMap[colName] || colName;
+    const val = obj[key];
+    if (Array.isArray(val)) return val.join(",");
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
   // 필터링된 데이터
   const filteredData = useMemo(() => {
     return myRelatedTasks.filter((item) => {
       if (currentTab === "dr" && item.sourceType !== "dr") return false;
       if (currentTab === "ecr" && item.sourceType !== "ecr") return false;
-      if (searchStatus !== "all" && item.status !== searchStatus) return false;
-      if (searchPriority !== "all" && item.priority !== searchPriority) return false;
-      if (searchReqDept !== "all" && item.reqDept !== searchReqDept) return false;
-      if (searchKeyword) {
-        const str = [item.id, item.targetName, item.customer, item.requester, item.designer, item.reqDept]
-          .join(" ")
-          .toLowerCase();
-        if (!str.includes(searchKeyword.toLowerCase())) return false;
+      for (const f of searchFilters) {
+        const val = getTaskFieldValue(item, f.columnName);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (val !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) return false;
+          if (to && val > to) return false;
+        }
       }
       return true;
     });
-  }, [myRelatedTasks, currentTab, searchStatus, searchPriority, searchReqDept, searchKeyword]);
+  }, [myRelatedTasks, currentTab, searchFilters]);
 
   // 현황 통계
   const stats = useMemo(() => {
@@ -592,15 +625,8 @@ export default function DesignTaskManagementPage() {
     fetchTasks();
   }, [selectedTaskId, reviewMemoText, fetchTasks]);
 
-  const handleResetSearch = useCallback(() => {
-    setSearchStatus("all");
-    setSearchPriority("all");
-    setSearchReqDept("all");
-    setSearchKeyword("");
-  }, []);
-
-  const handleFilterByStatus = useCallback((status: TaskStatus) => {
-    setSearchStatus(status);
+  const handleFilterByStatus = useCallback((_status: TaskStatus) => {
+    // Status filter now handled by DynamicSearchFilter
   }, []);
 
   // 납기 남은 일수 계산
@@ -608,13 +634,13 @@ export default function DesignTaskManagementPage() {
     const due = new Date(dueDate);
     const today = new Date();
     const diffDays = Math.ceil((due.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
-    const color = diffDays < 0 ? "text-rose-600" : diffDays <= 7 ? "text-amber-600" : "text-emerald-600";
+    const color = diffDays < 0 ? "text-destructive" : diffDays <= 7 ? "text-primary" : "text-muted-foreground";
     const text = diffDays < 0 ? `${Math.abs(diffDays)}일 초과` : diffDays === 0 ? "오늘" : `${diffDays}일 남음`;
     return { color, text };
   };
 
   return (
-    <div className="flex h-full flex-col overflow-hidden bg-background">
+    <div className="flex h-[calc(100vh-4rem)] flex-col overflow-hidden bg-background">
       {/* 탭 바 */}
       <div className="flex items-center border-b-2 border-border bg-card px-5">
         {([
@@ -640,7 +666,7 @@ export default function DesignTaskManagementPage() {
             <span
               className={cn(
                 "min-w-[20px] rounded-full px-1.5 py-0.5 text-center text-[11px] font-bold",
-                tab.isNew ? "bg-rose-500 text-white" : "bg-muted text-muted-foreground"
+                tab.isNew ? "bg-destructive text-destructive-foreground" : "bg-muted text-muted-foreground"
               )}
             >
               {tab.count}
@@ -682,73 +708,22 @@ export default function DesignTaskManagementPage() {
               전체
             </button>
           </div>
-          <div className="flex items-center gap-1.5 rounded-full bg-emerald-50 px-3 py-1 text-xs text-emerald-600 dark:bg-emerald-950/30 dark:text-emerald-400">
-            <span className="h-2 w-2 animate-pulse rounded-full bg-emerald-500" />
+          <div className="flex items-center gap-1.5 rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">
+            <span className="h-2 w-2 animate-pulse rounded-full bg-primary" />
             실시간 동기화 중
           </div>
         </div>
       </div>
 
-      {/* 검색 섹션 */}
-      <div className="border-b border-border bg-card px-5 py-3">
-        <div className="flex flex-wrap items-center gap-3">
-          <div className="flex flex-1 flex-wrap items-center gap-3">
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="h-9 w-[130px] text-xs">
-                <SelectValue placeholder="상태 전체" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">상태 전체</SelectItem>
-                <SelectItem value="신규접수">신규접수</SelectItem>
-                <SelectItem value="검토중">검토중</SelectItem>
-                <SelectItem value="승인완료">승인완료</SelectItem>
-                <SelectItem value="반려">반려</SelectItem>
-                <SelectItem value="프로젝트생성">프로젝트생성</SelectItem>
-              </SelectContent>
-            </Select>
-            <Select value={searchPriority} onValueChange={setSearchPriority}>
-              <SelectTrigger className="h-9 w-[130px] text-xs">
-                <SelectValue placeholder="우선순위 전체" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">우선순위 전체</SelectItem>
-                <SelectItem value="긴급">긴급</SelectItem>
-                <SelectItem value="높음">높음</SelectItem>
-                <SelectItem value="보통">보통</SelectItem>
-                <SelectItem value="낮음">낮음</SelectItem>
-              </SelectContent>
-            </Select>
-            <Select value={searchReqDept} onValueChange={setSearchReqDept}>
-              <SelectTrigger className="h-9 w-[130px] text-xs">
-                <SelectValue placeholder="의뢰부서 전체" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">의뢰부서 전체</SelectItem>
-                <SelectItem value="영업팀">영업팀</SelectItem>
-                <SelectItem value="생산팀">생산팀</SelectItem>
-                <SelectItem value="품질팀">품질팀</SelectItem>
-                <SelectItem value="구매팀">구매팀</SelectItem>
-                <SelectItem value="기획팀">기획팀</SelectItem>
-                <SelectItem value="설계팀">설계팀</SelectItem>
-              </SelectContent>
-            </Select>
-            <div className="relative min-w-[280px]">
-              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                value={searchKeyword}
-                onChange={(e) => setSearchKeyword(e.target.value)}
-                placeholder="접수번호 / 설비명 / 품목명 / 고객명 검색"
-                className="h-9 pl-9 text-xs"
-              />
-            </div>
-          </div>
-          <div className="flex shrink-0 gap-2">
-            <Button size="sm" variant="outline" onClick={handleResetSearch}>
-              <RotateCcw className="mr-1 h-3.5 w-3.5" />
-              초기화
-            </Button>
-          </div>
-        </div>
+      {/* 검색 필터 */}
+      <div className="border-b border-border bg-card px-4 py-3">
+        <DynamicSearchFilter
+          tableName="dsn_design_request"
+          filterId="c16-task-management"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredData.length}
+        />
       </div>
 
       {/* 좌우 분할 패널 */}
@@ -757,98 +732,67 @@ export default function DesignTaskManagementPage() {
           {/* 왼쪽: 접수 목록 */}
           <ResizablePanel defaultSize={58} minSize={35}>
             <div className="flex h-full flex-col bg-card">
-              <div className="flex items-center justify-between border-b-2 border-border px-5 py-3">
-                <h2 className="text-base font-bold text-foreground">
-                  {myTasksOnly ? "내 관련 업무" : "접수 업무 목록"} ({filteredData.length}건)
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold flex items-center gap-2">
+                  {myTasksOnly ? "내 관련 업무" : "접수 업무 목록"}
+                  <span className="text-primary bg-primary/8 border border-primary/15 rounded-md px-1.5 py-0.5 text-[11px] font-semibold">{filteredData.length}건</span>
                   {myTasksOnly && (
-                    <span className="ml-2 text-xs font-normal text-muted-foreground">
+                    <span className="text-xs font-normal text-muted-foreground">
                       전체 {allTasks.length}건 중
                     </span>
                   )}
-                </h2>
+                </div>
                 <Button size="sm" variant="outline" onClick={fetchTasks} disabled={loading}>
                   {loading ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
                   동기화
                 </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
               </div>
-              <div className="flex-1 overflow-auto">
-                <Table>
-                  <TableHeader className="sticky top-0 z-10 bg-muted">
-                    <TableRow>
-                      <TableHead className="w-[60px] text-center text-xs">구분</TableHead>
-                      <TableHead className="w-[130px] text-xs">접수번호</TableHead>
-                      <TableHead className="w-[90px] text-center text-xs">상태</TableHead>
-                      <TableHead className="w-[80px] text-center text-xs">우선순위</TableHead>
-                      <TableHead className="min-w-[180px] text-xs">설비/품목명</TableHead>
-                      <TableHead className="w-[90px] text-xs">의뢰부서</TableHead>
-                      <TableHead className="w-[80px] text-xs">의뢰자</TableHead>
-                      <TableHead className="w-[100px] text-xs">접수일자</TableHead>
-                      <TableHead className="w-[100px] text-xs">희망납기</TableHead>
-                      <TableHead className="w-[80px] text-xs">설계담당</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {loading && allTasks.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={10}>
-                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-                            <Loader2 className="mb-2 h-10 w-10 animate-spin" />
-                            <span className="text-sm">로딩 중...</span>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ) : filteredData.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={10}>
-                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-                            <Inbox className="mb-2 h-10 w-10" />
-                            <span className="text-sm">조건에 맞는 업무가 없습니다</span>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      filteredData.map((item) => (
-                        <TableRow
-                          key={item.id}
-                          className={cn(
-                            "cursor-pointer transition-colors",
-                            selectedTaskId === item.dbId && "bg-primary/5",
-                            item.status === "신규접수" && "bg-amber-50/50 dark:bg-amber-950/10"
-                          )}
-                          onClick={() => handleSelectTask(item.dbId)}
-                        >
-                          <TableCell className="text-center">
-                            <Badge variant="outline" className={cn("text-[10px] font-bold", getSourceBadge(item.sourceType))}>
-                              {item.sourceType === "dr" ? "DR" : "ECR"}
-                            </Badge>
-                          </TableCell>
-                          <TableCell className={cn("text-xs font-semibold", item.sourceType === "dr" ? "text-blue-600" : "text-amber-600")}>
-                            {item.id}
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <Badge variant="outline" className={cn("text-[10px]", getStatusVariant(item.status))}>
-                              {item.status}
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <Badge variant="outline" className={cn("text-[10px]", getPriorityVariant(item.priority))}>
-                              {item.priority}
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="max-w-[200px] truncate text-xs font-medium">{item.targetName}</TableCell>
-                          <TableCell className="text-xs">{item.reqDept}</TableCell>
-                          <TableCell className="text-xs">{item.requester}</TableCell>
-                          <TableCell className="text-xs">{item.date}</TableCell>
-                          <TableCell className="text-xs">{item.dueDate}</TableCell>
-                          <TableCell className="text-xs">
-                            {item.designer || <span className="text-muted-foreground">미배정</span>}
-                          </TableCell>
-                        </TableRow>
-                      ))
-                    )}
-                  </TableBody>
-                </Table>
-              </div>
+              <EDataTable<TaskItem>
+                columns={ts.visibleColumns.map((col): EDataTableColumn<TaskItem> => ({
+                  key: col.key === "request_no" ? "id" : col.key === "target_name" ? "targetName" : col.key === "req_dept" ? "reqDept" : col.key === "request_date" ? "date" : col.key === "due_date" ? "dueDate" : col.key === "source_type" ? "sourceType" : col.key,
+                  label: col.label,
+                  width: col.key === "source_type" ? "w-[60px]" : col.key === "request_no" ? "w-[130px]" : col.key === "status" ? "w-[90px]" : col.key === "priority" ? "w-[80px]" : col.key === "target_name" ? "min-w-[180px]" : col.key === "req_dept" ? "w-[90px]" : col.key === "requester" ? "w-[80px]" : col.key === "request_date" ? "w-[100px]" : col.key === "due_date" ? "w-[100px]" : col.key === "designer" ? "w-[80px]" : undefined,
+                  align: (col.key === "source_type" || col.key === "status" || col.key === "priority") ? "center" : undefined,
+                  render: col.key === "source_type"
+                    ? (val: any, row: TaskItem) => (
+                        <Badge variant="outline" className={cn("text-[10px] font-bold", getSourceBadge(row.sourceType))}>
+                          {row.sourceType === "dr" ? "DR" : "ECR"}
+                        </Badge>
+                      )
+                    : col.key === "request_no"
+                    ? (val: any, row: TaskItem) => (
+                        <span className={cn("text-[13px] font-semibold", row.sourceType === "dr" ? "text-primary" : "text-secondary-foreground")}>
+                          {val}
+                        </span>
+                      )
+                    : col.key === "status"
+                    ? (val: any) => (
+                        <Badge variant="outline" className={cn("text-[10px]", getStatusVariant(val))}>
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "priority"
+                    ? (val: any) => (
+                        <Badge variant="outline" className={cn("text-[10px]", getPriorityVariant(val))}>
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "designer"
+                    ? (val: any) => val ? <span>{val}</span> : <span className="text-muted-foreground">미배정</span>
+                    : undefined,
+                }))}
+                data={ts.groupData(filteredData)}
+                loading={loading}
+                emptyMessage="조건에 맞는 업무가 없어요"
+                rowKey={(row) => row.dbId}
+                selectedId={selectedTaskId}
+                onSelect={(id) => handleSelectTask(id ?? "")}
+                draggableColumns={false}
+                showPagination={false}
+              />
             </div>
           </ResizablePanel>
 
@@ -857,45 +801,50 @@ export default function DesignTaskManagementPage() {
           {/* 오른쪽: 검토 및 승인 */}
           <ResizablePanel defaultSize={42} minSize={30}>
             <div className="flex h-full flex-col bg-card">
-              <div className="flex items-center justify-between border-b-2 border-border px-5 py-3">
-                <h2 className="text-base font-bold text-foreground">검토 및 승인</h2>
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold">검토 및 승인</div>
               </div>
-              <div className="flex-1 overflow-auto p-4">
-                {/* 현황 카드 */}
-                <div className="mb-4 grid grid-cols-5 gap-2">
-                  {STAT_CARDS.map((card) => (
-                    <button
-                      key={card.status}
-                      className={cn(
-                        "rounded-lg bg-linear-to-br p-3 text-center transition-all hover:-translate-y-0.5 hover:shadow-md",
-                        card.color, card.textColor
-                      )}
-                      onClick={() => handleFilterByStatus(card.status)}
-                    >
-                      <div className="text-xs font-medium opacity-90">{card.label}</div>
-                      <div className="text-2xl font-bold">{stats[card.status]}</div>
-                    </button>
-                  ))}
+              <div className="flex-1 overflow-auto p-3">
+                {/* 업무 현황 */}
+                <div className="mb-3 space-y-1.5">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무 현황</span>
+                  <div className="grid grid-cols-5 gap-2">
+                    {STAT_CARDS.map((card) => (
+                      <button
+                        key={card.status}
+                        className={cn(
+                          "rounded-lg p-2.5 text-center transition-all hover:-translate-y-0.5 hover:shadow-md",
+                          card.color, card.textColor
+                        )}
+                        onClick={() => handleFilterByStatus(card.status)}
+                      >
+                        <div className="text-[11px] font-medium opacity-90 leading-tight">{card.label}</div>
+                        <div className="text-xl font-bold mt-0.5">{stats[card.status]}</div>
+                      </button>
+                    ))}
+                  </div>
                 </div>
 
                 {/* 상세 정보 */}
                 {!selectedTask ? (
-                  <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
-                    <ChevronRight className="mb-2 h-10 w-10" />
-                    <span className="text-sm">좌측 목록에서 업무를 선택하세요</span>
+                  <div className="flex items-center justify-center p-6">
+                    <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-10 py-8 text-center">
+                      <Inbox className="h-10 w-10 text-muted-foreground/40" />
+                      <p className="text-sm text-muted-foreground">좌측에서 업무를 선택해주세요</p>
+                    </div>
                   </div>
                 ) : (
-                  <div className="space-y-4">
+                  <div className="space-y-3">
                     {/* 승인 프로세스 */}
-                    <div className="rounded-lg border border-sky-200 bg-sky-50/50 p-4 dark:border-sky-800 dark:bg-sky-950/20">
-                      <h3 className="mb-3 text-sm font-bold text-sky-700 dark:text-sky-400">승인 프로세스</h3>
+                    <div className="rounded-lg border border-border/80 bg-muted/30 p-3.5">
+                      <h3 className="mb-3 text-sm font-bold text-foreground">승인 프로세스</h3>
                       <div className="mb-3 flex items-center gap-1">
                         {APPROVAL_STEPS.map((s, idx) => {
                           let stepClass = "border-border bg-card text-muted-foreground";
                           if (selectedTask.status === "반려" && idx >= 2) {
-                            stepClass = idx === 2 ? "border-rose-400 bg-rose-50 text-rose-800 dark:bg-rose-950/30 dark:text-rose-300" : "border-border bg-card text-muted-foreground";
+                            stepClass = idx === 2 ? "border-destructive bg-destructive/5 text-destructive" : "border-border bg-card text-muted-foreground";
                           } else if (selectedTask.approvalStep > idx) {
-                            stepClass = "border-emerald-400 bg-emerald-50 text-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-300";
+                            stepClass = "border-primary bg-primary/5 text-primary";
                           } else if (selectedTask.approvalStep === idx) {
                             stepClass = "border-primary bg-primary/5 text-primary ring-2 ring-primary/10";
                           }
@@ -916,7 +865,7 @@ export default function DesignTaskManagementPage() {
                       <div className="flex flex-wrap gap-2">
                         {selectedTask.status === "신규접수" && (
                           <>
-                            <Button size="sm" className="bg-emerald-600 text-white hover:bg-emerald-700" onClick={() => handleOpenDesignerModal(selectedTask.dbId)}>
+                            <Button size="sm" variant="default" onClick={() => handleOpenDesignerModal(selectedTask.dbId)}>
                               <Eye className="mr-1 h-3.5 w-3.5" /> 검토 착수
                             </Button>
                             <Button size="sm" variant="destructive" onClick={() => handleOpenRejectModal(selectedTask.dbId)}>
@@ -926,7 +875,7 @@ export default function DesignTaskManagementPage() {
                         )}
                         {selectedTask.status === "검토중" && (
                           <>
-                            <Button size="sm" className="bg-emerald-600 text-white hover:bg-emerald-700" onClick={() => handleApprove(selectedTask.dbId)}>
+                            <Button size="sm" variant="default" onClick={() => handleApprove(selectedTask.dbId)}>
                               <CheckCircle2 className="mr-1 h-3.5 w-3.5" /> 내부 승인
                             </Button>
                             <Button size="sm" variant="destructive" onClick={() => handleOpenRejectModal(selectedTask.dbId)}>
@@ -935,7 +884,7 @@ export default function DesignTaskManagementPage() {
                           </>
                         )}
                         {selectedTask.status === "승인완료" && (
-                          <Button size="sm" className="bg-linear-to-r from-indigo-500 to-purple-600 text-white shadow-md hover:shadow-lg" onClick={() => handleOpenProjectModal(selectedTask.dbId)}>
+                          <Button size="sm" variant="default" onClick={() => handleOpenProjectModal(selectedTask.dbId)}>
                             <Rocket className="mr-1 h-3.5 w-3.5" /> 프로젝트 생성
                           </Button>
                         )}
@@ -948,14 +897,14 @@ export default function DesignTaskManagementPage() {
                     </div>
 
                     {/* 접수 정보 */}
-                    <div className="rounded-lg bg-muted/50 p-4">
-                      <h3 className="mb-3 border-b-2 border-border pb-2 text-sm font-semibold text-foreground">접수 정보</h3>
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">접수 정보</h3>
                       <div className="text-xs">
                         <table className="w-full border-collapse">
                           <tbody>
                             <tr>
                               <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">접수번호</td>
-                              <td className={cn("border border-muted px-2 py-1.5 font-semibold", selectedTask.sourceType === "dr" ? "text-blue-600" : "text-amber-600")}>
+                              <td className={cn("border border-muted px-2 py-1.5 font-semibold", selectedTask.sourceType === "dr" ? "text-primary" : "text-secondary-foreground")}>
                                 {selectedTask.id}
                               </td>
                               <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">구분</td>
@@ -1022,7 +971,7 @@ export default function DesignTaskManagementPage() {
                                     {selectedTask.impact ? (
                                       <div className="flex flex-wrap gap-1">
                                         {selectedTask.impact.map((i) => (
-                                          <Badge key={i} variant="outline" className="bg-blue-50 text-[10px] text-blue-700 dark:bg-blue-950/30 dark:text-blue-300">{i}</Badge>
+                                          <Badge key={i} variant="outline" className="bg-primary/5 text-[10px] text-primary">{i}</Badge>
                                         ))}
                                       </div>
                                     ) : "-"}
@@ -1047,8 +996,8 @@ export default function DesignTaskManagementPage() {
                     </div>
 
                     {/* 요구사양 / 변경사유 */}
-                    <div className="rounded-lg bg-muted/50 p-4">
-                      <h3 className="mb-3 border-b-2 border-border pb-2 text-sm font-semibold text-foreground">
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">
                         {selectedTask.sourceType === "dr" ? "요구사양" : "변경 사유"}
                       </h3>
                       <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed text-foreground">
@@ -1057,13 +1006,13 @@ export default function DesignTaskManagementPage() {
                     </div>
 
                     {/* 검토 메모 */}
-                    <div className="rounded-lg border border-amber-200 bg-amber-50/50 p-4 dark:border-amber-800 dark:bg-amber-950/20">
-                      <h3 className="mb-2 text-sm font-semibold text-amber-800 dark:text-amber-400">검토 의견 / 메모</h3>
+                    <div className="rounded-lg border border-primary/20 bg-primary/5 p-3.5">
+                      <h3 className="mb-2 text-sm font-semibold text-foreground">검토 의견 / 메모</h3>
                       <Textarea
                         value={reviewMemoText}
                         onChange={(e) => setReviewMemoText(e.target.value)}
-                        placeholder="검토 의견을 기록하세요..."
-                        className="min-h-[60px] border-amber-200 text-xs focus-visible:ring-amber-400 dark:border-amber-800"
+                        placeholder="검토 의견을 기록해주세요..."
+                        className="min-h-[60px] text-xs"
                       />
                       <div className="mt-2 text-right">
                         <Button size="sm" onClick={handleSaveReviewMemo}>
@@ -1073,16 +1022,16 @@ export default function DesignTaskManagementPage() {
                     </div>
 
                     {/* 처리 이력 */}
-                    <div className="rounded-lg bg-muted/50 p-4">
-                      <h3 className="mb-3 border-b-2 border-border pb-2 text-sm font-semibold text-foreground">처리 이력</h3>
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">처리 이력</h3>
                       <div className="relative pl-6">
                         <div className="absolute bottom-0 left-[7px] top-0 w-0.5 bg-border" />
                         {selectedTask.history.map((h, idx) => {
                           const isLast = idx === selectedTask.history.length - 1;
-                          let dotColor = "bg-emerald-500 ring-emerald-500";
+                          let dotColor = "bg-primary ring-primary";
                           if (isLast) {
-                            if (h.step === "반려") dotColor = "bg-rose-500 ring-rose-500";
-                            else if (h.step !== "프로젝트") dotColor = "bg-amber-500 ring-amber-500 animate-pulse";
+                            if (h.step === "반려") dotColor = "bg-destructive ring-destructive";
+                            else if (h.step !== "프로젝트") dotColor = "bg-primary ring-primary animate-pulse";
                           }
                           return (
                             <div key={idx} className={cn("relative pb-5", isLast && "pb-0")}>
@@ -1110,23 +1059,23 @@ export default function DesignTaskManagementPage() {
 
       {/* 설계 담당자 선택 모달 */}
       <Dialog open={designerModalOpen} onOpenChange={setDesignerModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">설계 담당자 배정</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">검토를 진행할 설계 담당자를 선택하세요.</DialogDescription>
+            <DialogTitle>설계 담당자 배정</DialogTitle>
+            <DialogDescription>검토를 진행할 설계 담당자를 선택해주세요.</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3 sm:space-y-4">
+          <div className="space-y-4">
             <div>
-              <Label className="text-xs sm:text-sm">
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                 설계 담당자 <span className="text-destructive">*</span>
-              </Label>
+              </span>
               <Popover open={designerComboOpen} onOpenChange={setDesignerComboOpen}>
                 <PopoverTrigger asChild>
                   <Button
                     variant="outline"
                     role="combobox"
                     aria-expanded={designerComboOpen}
-                    className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                    className="mt-1 h-9 w-full justify-between text-sm"
                   >
                     {designerModalValue
                       ? (() => {
@@ -1139,9 +1088,9 @@ export default function DesignTaskManagementPage() {
                 </PopoverTrigger>
                 <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
                   <Command>
-                    <CommandInput placeholder="이름, 부서로 검색..." className="text-xs sm:text-sm" />
+                    <CommandInput placeholder="이름, 부서로 검색..." />
                     <CommandList>
-                      <CommandEmpty className="py-3 text-center text-xs sm:text-sm">사원을 찾을 수 없습니다.</CommandEmpty>
+                      <CommandEmpty className="py-3 text-center text-sm">사원을 찾을 수 없어요.</CommandEmpty>
                       <CommandGroup>
                         {employees.map((emp) => (
                           <CommandItem
@@ -1151,7 +1100,6 @@ export default function DesignTaskManagementPage() {
                               setDesignerModalValue(emp.userId);
                               setDesignerComboOpen(false);
                             }}
-                            className="text-xs sm:text-sm"
                           >
                             <Check className={cn("mr-2 h-4 w-4", designerModalValue === emp.userId ? "opacity-100" : "opacity-0")} />
                             <UserCircle className="mr-2 h-4 w-4 text-muted-foreground" />
@@ -1168,177 +1116,173 @@ export default function DesignTaskManagementPage() {
               </Popover>
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setDesignerModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button onClick={handleConfirmDesigner} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              검토 착수
-            </Button>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDesignerModalOpen(false)}>취소</Button>
+            <Button onClick={handleConfirmDesigner}>검토 착수</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {/* 반려 사유 모달 */}
       <Dialog open={rejectModalOpen} onOpenChange={setRejectModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">반려 처리</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">반려 사유를 상세히 기술하세요.</DialogDescription>
+            <DialogTitle>반려 처리</DialogTitle>
+            <DialogDescription>반려 사유를 상세히 기술해주세요.</DialogDescription>
           </DialogHeader>
           <div className="space-y-3">
             <div>
-              <Label className="text-xs sm:text-sm">
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                 반려 사유 <span className="text-destructive">*</span>
-              </Label>
+              </span>
               <Textarea
                 value={rejectReason}
                 onChange={(e) => setRejectReason(e.target.value)}
-                placeholder="반려 사유를 상세히 기술하세요"
-                className="mt-1 min-h-[120px] text-xs sm:text-sm"
+                placeholder="반려 사유를 상세히 기술해주세요"
+                className="mt-1 min-h-[120px] text-sm"
               />
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setRejectModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button variant="destructive" onClick={handleConfirmReject} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              반려 확인
-            </Button>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRejectModalOpen(false)}>취소</Button>
+            <Button variant="destructive" onClick={handleConfirmReject}>반려 확인</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {/* 프로젝트 생성 모달 */}
       <Dialog open={projectModalOpen} onOpenChange={setProjectModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[700px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">설계 프로젝트 생성</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">프로젝트 기본 정보를 입력하세요.</DialogDescription>
+            <DialogTitle>설계 프로젝트 생성</DialogTitle>
+            <DialogDescription>프로젝트 기본 정보를 입력해주세요.</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3 sm:space-y-4">
-            <div className="rounded-lg bg-muted/50 p-4">
-              <h4 className="mb-3 border-b border-border pb-2 text-sm font-semibold">프로젝트 기본 정보</h4>
-              <div className="space-y-3">
+        <div className="space-y-4">
+          <div className="rounded-lg bg-muted/50 p-4">
+            <h4 className="mb-3 border-b border-border pb-2 text-sm font-semibold">프로젝트 기본 정보</h4>
+            <div className="space-y-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 번호</span>
+                <Input value={projectForm.projNo} readOnly className="mt-1 h-9 bg-muted text-sm" />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                  프로젝트명 <span className="text-destructive">*</span>
+                </span>
+                <Input
+                  value={projectForm.projName}
+                  onChange={(e) => setProjectForm((p) => ({ ...p, projName: e.target.value }))}
+                  placeholder="프로젝트명 입력"
+                  className="mt-1 h-9 text-sm"
+                />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">원 접수번호</span>
+                <Input value={projectForm.projSourceNo} readOnly className="mt-1 h-9 bg-muted text-sm" />
+              </div>
+              <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <Label className="text-xs sm:text-sm">프로젝트 번호</Label>
-                  <Input value={projectForm.projNo} readOnly className="mt-1 h-8 bg-muted text-xs sm:h-10 sm:text-sm" />
-                </div>
-                <div>
-                  <Label className="text-xs sm:text-sm">
-                    프로젝트명 <span className="text-destructive">*</span>
-                  </Label>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    시작일 <span className="text-destructive">*</span>
+                  </span>
                   <Input
-                    value={projectForm.projName}
-                    onChange={(e) => setProjectForm((p) => ({ ...p, projName: e.target.value }))}
-                    placeholder="프로젝트명 입력"
-                    className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                    type="date"
+                    value={projectForm.projStartDate}
+                    onChange={(e) => setProjectForm((p) => ({ ...p, projStartDate: e.target.value }))}
+                    className="mt-1 h-9 text-sm"
                   />
                 </div>
                 <div>
-                  <Label className="text-xs sm:text-sm">원 접수번호</Label>
-                  <Input value={projectForm.projSourceNo} readOnly className="mt-1 h-8 bg-muted text-xs sm:h-10 sm:text-sm" />
-                </div>
-                <div className="grid grid-cols-2 gap-3">
-                  <div>
-                    <Label className="text-xs sm:text-sm">
-                      시작일 <span className="text-destructive">*</span>
-                    </Label>
-                    <Input
-                      type="date"
-                      value={projectForm.projStartDate}
-                      onChange={(e) => setProjectForm((p) => ({ ...p, projStartDate: e.target.value }))}
-                      className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
-                    />
-                  </div>
-                  <div>
-                    <Label className="text-xs sm:text-sm">
-                      종료예정일 <span className="text-destructive">*</span>
-                    </Label>
-                    <Input
-                      type="date"
-                      value={projectForm.projEndDate}
-                      onChange={(e) => setProjectForm((p) => ({ ...p, projEndDate: e.target.value }))}
-                      className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
-                    />
-                  </div>
-                </div>
-                <div className="grid grid-cols-2 gap-3">
-                  <div>
-                    <Label className="text-xs sm:text-sm">
-                      PM <span className="text-destructive">*</span>
-                    </Label>
-                    <Popover open={pmComboOpen} onOpenChange={setPmComboOpen}>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant="outline"
-                          role="combobox"
-                          aria-expanded={pmComboOpen}
-                          className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
-                        >
-                          {projectForm.projPM
-                            ? employees.find((e) => e.userId === projectForm.projPM)?.userName || projectForm.projPM
-                            : "PM 선택"}
-                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
-                        <Command>
-                          <CommandInput placeholder="사원 검색..." className="text-xs sm:text-sm" />
-                          <CommandList>
-                            <CommandEmpty className="text-xs sm:text-sm py-3 text-center">사원을 찾을 수 없습니다.</CommandEmpty>
-                            <CommandGroup>
-                              {employees.map((emp) => (
-                                <CommandItem
-                                  key={emp.userId}
-                                  value={`${emp.userName} ${emp.deptName} ${emp.userId}`}
-                                  onSelect={() => {
-                                    setProjectForm((p) => ({ ...p, projPM: emp.userId }));
-                                    setPmComboOpen(false);
-                                  }}
-                                  className="text-xs sm:text-sm"
-                                >
-                                  <Check className={cn("mr-2 h-4 w-4", projectForm.projPM === emp.userId ? "opacity-100" : "opacity-0")} />
-                                  <div className="flex flex-col">
-                                    <span className="font-medium">{emp.userName}</span>
-                                    <span className="text-[10px] text-muted-foreground">{emp.deptName || "부서 미지정"}</span>
-                                  </div>
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                  <div>
-                    <Label className="text-xs sm:text-sm">고객명</Label>
-                    <Input value={projectForm.projCustomer} readOnly className="mt-1 h-8 bg-muted text-xs sm:h-10 sm:text-sm" />
-                  </div>
-                </div>
-                <div>
-                  <Label className="text-xs sm:text-sm">프로젝트 설명</Label>
-                  <Textarea
-                    value={projectForm.projDesc}
-                    onChange={(e) => setProjectForm((p) => ({ ...p, projDesc: e.target.value }))}
-                    placeholder="프로젝트 개요 및 목표를 기술하세요"
-                    className="mt-1 min-h-[80px] text-xs sm:text-sm"
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    종료예정일 <span className="text-destructive">*</span>
+                  </span>
+                  <Input
+                    type="date"
+                    value={projectForm.projEndDate}
+                    onChange={(e) => setProjectForm((p) => ({ ...p, projEndDate: e.target.value }))}
+                    className="mt-1 h-9 text-sm"
                   />
                 </div>
               </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    PM <span className="text-destructive">*</span>
+                  </span>
+                  <Popover open={pmComboOpen} onOpenChange={setPmComboOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={pmComboOpen}
+                        className="mt-1 h-9 w-full justify-between text-sm"
+                      >
+                        {projectForm.projPM
+                          ? employees.find((e) => e.userId === projectForm.projPM)?.userName || projectForm.projPM
+                          : "PM 선택"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                      <Command>
+                        <CommandInput placeholder="사원 검색..." />
+                        <CommandList>
+                          <CommandEmpty className="py-3 text-center text-sm">사원을 찾을 수 없어요.</CommandEmpty>
+                          <CommandGroup>
+                            {employees.map((emp) => (
+                              <CommandItem
+                                key={emp.userId}
+                                value={`${emp.userName} ${emp.deptName} ${emp.userId}`}
+                                onSelect={() => {
+                                  setProjectForm((p) => ({ ...p, projPM: emp.userId }));
+                                  setPmComboOpen(false);
+                                }}
+                              >
+                                <Check className={cn("mr-2 h-4 w-4", projectForm.projPM === emp.userId ? "opacity-100" : "opacity-0")} />
+                                <div className="flex flex-col">
+                                  <span className="font-medium">{emp.userName}</span>
+                                  <span className="text-[10px] text-muted-foreground">{emp.deptName || "부서 미지정"}</span>
+                                </div>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">고객명</span>
+                  <Input value={projectForm.projCustomer} readOnly className="mt-1 h-9 bg-muted text-sm" />
+                </div>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 설명</span>
+                <Textarea
+                  value={projectForm.projDesc}
+                  onChange={(e) => setProjectForm((p) => ({ ...p, projDesc: e.target.value }))}
+                  placeholder="프로젝트 개요 및 목표를 기술해주세요"
+                  className="mt-1 min-h-[80px] text-sm"
+                />
+              </div>
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setProjectModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button onClick={handleCreateProject} className="h-8 flex-1 bg-linear-to-r from-indigo-500 to-purple-600 text-xs text-white sm:h-10 sm:flex-none sm:text-sm">
-              프로젝트 생성
-            </Button>
+        </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setProjectModalOpen(false)}>취소</Button>
+            <Button onClick={handleCreateProject}>프로젝트 생성</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_29/equipment/info/page.tsx b/frontend/app/(main)/COMPANY_29/equipment/info/page.tsx
index 9bb5fede..cd53e9b1 100644
--- a/frontend/app/(main)/COMPANY_29/equipment/info/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/equipment/info/page.tsx
@@ -8,7 +8,7 @@
  * 점검항목 복사 기능 포함
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -20,56 +20,34 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import {
   Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
-  Wrench, ClipboardCheck, Package, Copy, Info, Settings2,
+  Inbox, ClipboardCheck, Package, Copy, Info, Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
-import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
 import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
 import { ImageUpload } from "@/components/common/ImageUpload";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const EQUIP_TABLE = "equipment_mng";
 const INSPECTION_TABLE = "equipment_inspection_item";
 const CONSUMABLE_TABLE = "equipment_consumable";
 
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "equipment_code", label: "설비코드", width: "w-[110px]" },
-  { key: "equipment_name", label: "설비명", minWidth: "min-w-[130px]" },
-  { key: "equipment_type", label: "설비유형", width: "w-[90px]" },
-  { key: "manufacturer", label: "제조사", width: "w-[100px]" },
-  { key: "installation_location", label: "설치장소", width: "w-[100px]" },
-  { key: "operation_status", label: "가동상태", width: "w-[80px]" },
+const GRID_COLUMNS_CONFIG = [
+  { key: "equipment_code", label: "설비코드" },
+  { key: "equipment_name", label: "설비명" },
+  { key: "equipment_type", label: "설비유형" },
+  { key: "manufacturer", label: "제조사" },
+  { key: "installation_location", label: "설치장소" },
+  { key: "operation_status", label: "가동상태" },
 ];
-
-const INSPECTION_COLUMNS: DataGridColumn[] = [
-  { key: "inspection_item", label: "점검항목", minWidth: "min-w-[120px]", editable: true },
-  { key: "inspection_cycle", label: "점검주기", width: "w-[80px]" },
-  { key: "inspection_method", label: "점검방법", width: "w-[80px]" },
-  { key: "lower_limit", label: "하한치", width: "w-[70px]", editable: true },
-  { key: "upper_limit", label: "상한치", width: "w-[70px]", editable: true },
-  { key: "unit", label: "단위", width: "w-[60px]", editable: true },
-  { key: "inspection_content", label: "점검내용", minWidth: "min-w-[150px]", editable: true },
-];
-
-const CONSUMABLE_COLUMNS: DataGridColumn[] = [
-  { key: "image_path", label: "이미지", width: "w-[50px]", renderType: "image", sortable: false, filterable: false },
-  { key: "consumable_name", label: "소모품명", minWidth: "min-w-[120px]", editable: true },
-  { key: "replacement_cycle", label: "교체주기", width: "w-[90px]", editable: true },
-  { key: "unit", label: "단위", width: "w-[60px]", editable: true },
-  { key: "specification", label: "규격", width: "w-[100px]", editable: true },
-  { key: "manufacturer", label: "제조사", width: "w-[100px]", editable: true },
-];
-
 export default function EquipmentInfoPage() {
   const { user } = useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
@@ -79,8 +57,6 @@ export default function EquipmentInfoPage() {
   const [equipLoading, setEquipLoading] = useState(false);
   const [equipCount, setEquipCount] = useState(0);
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
   const [selectedEquipId, setSelectedEquipId] = useState<string | null>(null);
 
   // 우측 탭
@@ -93,7 +69,7 @@ export default function EquipmentInfoPage() {
   // 카테고리
   const [catOptions, setCatOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
-  // 모달
+  // 설비 등록/수정 모달
   const [equipModalOpen, setEquipModalOpen] = useState(false);
   const [equipEditMode, setEquipEditMode] = useState(false);
   const [equipForm, setEquipForm] = useState<Record<string, any>>({});
@@ -103,11 +79,17 @@ export default function EquipmentInfoPage() {
   const [infoForm, setInfoForm] = useState<Record<string, any>>({});
   const [infoSaving, setInfoSaving] = useState(false);
 
+  // 점검항목 추가/수정 모달
   const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
   const [inspectionForm, setInspectionForm] = useState<Record<string, any>>({});
+  const [inspectionContinuous, setInspectionContinuous] = useState(false);
+  const [inspectionEditMode, setInspectionEditMode] = useState(false);
 
+  // 소모품 추가/수정 모달
   const [consumableModalOpen, setConsumableModalOpen] = useState(false);
   const [consumableForm, setConsumableForm] = useState<Record<string, any>>({});
+  const [consumableContinuous, setConsumableContinuous] = useState(false);
+  const [consumableEditMode, setConsumableEditMode] = useState(false);
   const [consumableItemOptions, setConsumableItemOptions] = useState<any[]>([]);
 
   // 점검항목 복사
@@ -122,14 +104,8 @@ export default function EquipmentInfoPage() {
   const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
   const [excelDetecting, setExcelDetecting] = useState(false);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
-
-  useEffect(() => {
-    const saved = loadTableSettings("equipment-info");
-    if (saved) applyTableSettings(saved);
-  }, []);
+  // 테이블 설정
+  const ts = useTableSettings("c16-equipment-info", EQUIP_TABLE, GRID_COLUMNS_CONFIG);
 
   // 카테고리 로드
   useEffect(() => {
@@ -143,14 +119,12 @@ export default function EquipmentInfoPage() {
         }
         return result;
       };
-      // equipment_mng 카테고리
       for (const col of ["equipment_type", "operation_status"]) {
         try {
           const res = await apiClient.get(`/table-categories/${EQUIP_TABLE}/${col}/values`);
           if (res.data?.success) optMap[col] = flatten(res.data.data || []);
         } catch { /* skip */ }
       }
-      // inspection 카테고리
       for (const col of ["inspection_cycle", "inspection_method"]) {
         try {
           const res = await apiClient.get(`/table-categories/${INSPECTION_TABLE}/${col}/values`);
@@ -167,6 +141,22 @@ export default function EquipmentInfoPage() {
     return catOptions[col]?.find((o) => o.code === code)?.label || code;
   };
 
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      equipment_code: { width: "w-[110px]" },
+      equipment_name: { minWidth: "min-w-[130px]", truncate: true, render: (v) => v || "-" },
+      equipment_type: { width: "w-[90px]", render: (v) => v || "-" },
+      manufacturer: { width: "w-[100px]", render: (v) => v || "-" },
+      installation_location: { width: "w-[100px]", render: (v) => v || "-" },
+      operation_status: { width: "w-[80px]", render: (v) => v || "-" },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
   // 설비 조회
   const fetchEquipments = useCallback(async () => {
     setEquipLoading(true);
@@ -213,7 +203,7 @@ export default function EquipmentInfoPage() {
   // 우측: 점검항목 조회
   useEffect(() => {
     if (!selectedEquip?.equipment_code) { setInspections([]); return; }
-    const fetch = async () => {
+    const fetchData = async () => {
       setInspectionLoading(true);
       try {
         const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
@@ -221,21 +211,16 @@ export default function EquipmentInfoPage() {
           dataFilter: { enabled: true, filters: [{ columnName: "equipment_code", operator: "equals", value: selectedEquip.equipment_code }] },
           autoFilter: true,
         });
-        const raw = res.data?.data?.data || res.data?.data?.rows || [];
-        setInspections(raw.map((r: any) => ({
-          ...r,
-          inspection_cycle: resolve("inspection_cycle", r.inspection_cycle),
-          inspection_method: resolve("inspection_method", r.inspection_method),
-        })));
+        setInspections(res.data?.data?.data || res.data?.data?.rows || []);
       } catch { setInspections([]); } finally { setInspectionLoading(false); }
     };
-    fetch();
-  }, [selectedEquip?.equipment_code, catOptions]);
+    fetchData();
+  }, [selectedEquip?.equipment_code]);
 
   // 우측: 소모품 조회
   useEffect(() => {
     if (!selectedEquip?.equipment_code) { setConsumables([]); return; }
-    const fetch = async () => {
+    const fetchData = async () => {
       setConsumableLoading(true);
       try {
         const res = await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/data`, {
@@ -246,7 +231,7 @@ export default function EquipmentInfoPage() {
         setConsumables(res.data?.data?.data || res.data?.data?.rows || []);
       } catch { setConsumables([]); } finally { setConsumableLoading(false); }
     };
-    fetch();
+    fetchData();
   }, [selectedEquip?.equipment_code]);
 
   // 새로고침 헬퍼
@@ -269,7 +254,7 @@ export default function EquipmentInfoPage() {
         await apiClient.put(`/table-management/tables/${EQUIP_TABLE}/edit`, { originalData: { id }, updatedData: fields });
         toast.success("수정되었습니다.");
       } else {
-        await apiClient.post(`/table-management/tables/${EQUIP_TABLE}/add`, fields);
+        await apiClient.post(`/table-management/tables/${EQUIP_TABLE}/add`, { id: crypto.randomUUID(), ...fields });
         toast.success("등록되었습니다.");
       }
       setEquipModalOpen(false); fetchEquipments();
@@ -289,17 +274,50 @@ export default function EquipmentInfoPage() {
   // 점검항목 추가
   const handleInspectionSave = async () => {
     if (!inspectionForm.inspection_item) { toast.error("점검항목명은 필수입니다."); return; }
+    if (!inspectionForm.inspection_cycle) { toast.error("점검주기는 필수입니다."); return; }
+    if (!inspectionForm.inspection_method) { toast.error("점검방법은 필수입니다."); return; }
+    const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+    const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+    if (isNumeric && !inspectionForm.unit) { toast.error("측정단위가 필수입니다."); return; }
+    // 기준값/오차범위 → 하한치/상한치 자동 계산
+    const saveData = { ...inspectionForm };
+    if (isNumeric && saveData.standard_value) {
+      const std = Number(saveData.standard_value) || 0;
+      const tol = Number(saveData.tolerance) || 0;
+      saveData.lower_limit = String(std - tol);
+      saveData.upper_limit = String(std + tol);
+    }
+    if (!isNumeric) {
+      saveData.unit = "";
+      saveData.standard_value = "";
+      saveData.tolerance = "";
+      saveData.lower_limit = "";
+      saveData.upper_limit = "";
+    }
     setSaving(true);
     try {
-      await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
-        ...inspectionForm, equipment_code: selectedEquip?.equipment_code,
-      });
-      toast.success("추가되었습니다."); setInspectionModalOpen(false); refreshRight();
+      if (inspectionEditMode) {
+        await apiClient.put(`/table-management/tables/${INSPECTION_TABLE}/edit`, {
+          originalData: { id: saveData.id }, updatedData: { ...saveData, equipment_code: selectedEquip?.equipment_code },
+        });
+        toast.success("수정되었습니다.");
+        setInspectionModalOpen(false);
+      } else {
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          id: crypto.randomUUID(), ...saveData, equipment_code: selectedEquip?.equipment_code,
+        });
+        toast.success("추가되었습니다.");
+        if (inspectionContinuous) {
+          setInspectionForm({});
+        } else {
+          setInspectionModalOpen(false);
+        }
+      }
+      refreshRight();
     } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
   };
 
-  // 소모품 추가
-  // 소모품 품목 로드 (item_info에서 type 또는 division 라벨이 "소모품"인 것)
+  // 소모품 품목 로드
   const loadConsumableItems = async () => {
     try {
       const flatten = (vals: any[]): any[] => {
@@ -307,22 +325,16 @@ export default function EquipmentInfoPage() {
         for (const v of vals) { r.push(v); if (v.children?.length) r.push(...flatten(v.children)); }
         return r;
       };
-
-      // type과 division 카테고리 모두에서 "소모품" 코드 찾기
       const [typeRes, divRes] = await Promise.all([
         apiClient.get(`/table-categories/item_info/type/values`),
         apiClient.get(`/table-categories/item_info/division/values`),
       ]);
       const consumableType = flatten(typeRes.data?.data || []).find((t: any) => t.valueLabel === "소모품");
       const consumableDiv = flatten(divRes.data?.data || []).find((t: any) => t.valueLabel === "소모품");
-
       if (!consumableType && !consumableDiv) { setConsumableItemOptions([]); return; }
-
-      // 두 필터 결과를 합산 (중복 제거)
       const filters: any[] = [];
       if (consumableType) filters.push({ columnName: "type", operator: "equals", value: consumableType.valueCode });
       if (consumableDiv) filters.push({ columnName: "division", operator: "equals", value: consumableDiv.valueCode });
-
       const results = await Promise.all(filters.map((f) =>
         apiClient.post(`/table-management/tables/item_info/data`, {
           page: 1, size: 500,
@@ -330,7 +342,6 @@ export default function EquipmentInfoPage() {
           autoFilter: true,
         })
       ));
-
       const allItems = new Map<string, any>();
       for (const res of results) {
         const rows = res.data?.data?.data || res.data?.data?.rows || [];
@@ -344,14 +355,28 @@ export default function EquipmentInfoPage() {
     if (!consumableForm.consumable_name) { toast.error("소모품명은 필수입니다."); return; }
     setSaving(true);
     try {
-      await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/add`, {
-        ...consumableForm, equipment_code: selectedEquip?.equipment_code,
-      });
-      toast.success("추가되었습니다."); setConsumableModalOpen(false); refreshRight();
+      if (consumableEditMode) {
+        await apiClient.put(`/table-management/tables/${CONSUMABLE_TABLE}/edit`, {
+          originalData: { id: consumableForm.id }, updatedData: { ...consumableForm, equipment_code: selectedEquip?.equipment_code },
+        });
+        toast.success("수정되었습니다.");
+        setConsumableModalOpen(false);
+      } else {
+        await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/add`, {
+          id: crypto.randomUUID(), ...consumableForm, equipment_code: selectedEquip?.equipment_code,
+        });
+        toast.success("추가되었습니다.");
+        if (consumableContinuous) {
+          setConsumableForm({});
+        } else {
+          setConsumableModalOpen(false);
+        }
+      }
+      refreshRight();
     } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
   };
 
-  // 점검항목 복사: 소스 설비 선택 시 점검항목 로드
+  // 점검항목 복사
   const loadCopyItems = async (equipCode: string) => {
     setCopySourceEquip(equipCode);
     setCopyChecked(new Set());
@@ -406,13 +431,22 @@ export default function EquipmentInfoPage() {
 
   return (
     <div className="flex h-full flex-col gap-3 p-3">
-      <DynamicSearchFilter tableName={EQUIP_TABLE} filterId="equipment-info" onFilterChange={setSearchFilters} dataCount={equipCount}
-        externalFilterConfig={filterConfig}
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>설비관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">설비정보</span>
+      </div>
+
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={EQUIP_TABLE}
+        filterId="c16-equipment-info"
+        onFilterChange={setSearchFilters}
+        dataCount={equipCount}
+        externalFilterConfig={ts.filterConfig}
         extraActions={
           <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
             <Button variant="outline" size="sm" className="h-9" disabled={excelDetecting}
               onClick={async () => {
                 setExcelDetecting(true);
@@ -431,24 +465,39 @@ export default function EquipmentInfoPage() {
         }
       />
 
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
         <ResizablePanelGroup direction="horizontal">
           {/* 좌측: 설비 목록 */}
           <ResizablePanel defaultSize={40} minSize={25}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Wrench className="w-4 h-4" /> 설비 목록 <Badge variant="secondary" className="font-normal">{equipCount}건</Badge>
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">설비 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{equipCount}건</span>
                 </div>
-                <div className="flex gap-1.5">
+                <div className="flex items-center gap-1.5">
                   <Button size="sm" onClick={openEquipRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
                   <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={openEquipEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
-                  <Button variant="destructive" size="sm" disabled={!selectedEquipId} onClick={handleEquipDelete}><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                  <div className="h-4 w-px bg-border" />
+                  <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={handleEquipDelete} className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                  <div className="h-4 w-px bg-border" />
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid gridId="equip-left" columns={LEFT_COLUMNS} data={equipments} loading={equipLoading}
-                selectedId={selectedEquipId} onSelect={setSelectedEquipId} onRowDoubleClick={() => openEquipEdit()}
-                emptyMessage="등록된 설비가 없습니다" />
+              <EDataTable
+                columns={mainTableColumns}
+                data={ts.groupData(equipments)}
+                loading={equipLoading}
+                emptyMessage="등록된 설비가 없어요"
+                selectedId={selectedEquipId}
+                onSelect={(id) => setSelectedEquipId(id)}
+                onRowDoubleClick={() => openEquipEdit()}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-equipment-info-main"
+              />
             </div>
           </ResizablePanel>
 
@@ -457,7 +506,7 @@ export default function EquipmentInfoPage() {
           {/* 우측: 탭 */}
           <ResizablePanel defaultSize={60} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-2 border-b bg-muted/10 shrink-0">
+              <div className="flex items-center justify-between p-2 border-b bg-muted/50 shrink-0">
                 <div className="flex items-center gap-1">
                   {([["info", "기본정보", Info], ["inspection", "점검항목", ClipboardCheck], ["consumable", "소모품", Package]] as const).map(([tab, label, Icon]) => (
                     <button key={tab} onClick={() => setRightTab(tab)}
@@ -473,7 +522,7 @@ export default function EquipmentInfoPage() {
                 <div className="flex gap-1.5">
                   {rightTab === "inspection" && (
                     <>
-                      <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setInspectionForm({}); setInspectionModalOpen(true); }}>
+                      <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setInspectionForm({}); setInspectionEditMode(false); setInspectionModalOpen(true); }}>
                         <Plus className="w-3.5 h-3.5 mr-1" /> 추가
                       </Button>
                       <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setCopySourceEquip(""); setCopyItems([]); setCopyChecked(new Set()); setCopyModalOpen(true); }}>
@@ -482,7 +531,7 @@ export default function EquipmentInfoPage() {
                     </>
                   )}
                   {rightTab === "consumable" && (
-                    <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setConsumableForm({}); loadConsumableItems(); setConsumableModalOpen(true); }}>
+                    <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setConsumableForm({}); setConsumableEditMode(false); loadConsumableItems(); setConsumableModalOpen(true); }}>
                       <Plus className="w-3.5 h-3.5 mr-1" /> 추가
                     </Button>
                   )}
@@ -490,7 +539,13 @@ export default function EquipmentInfoPage() {
               </div>
 
               {!selectedEquipId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">좌측에서 설비를 선택하세요</div>
+                <div className="flex-1 flex flex-col items-center justify-center gap-3 m-3 border-2 border-dashed rounded-lg text-center">
+                  <Inbox className="w-12 h-12 text-muted-foreground/40" />
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">설비를 선택해주세요</p>
+                    <p className="text-xs text-muted-foreground mt-1">좌측에서 설비를 선택하면 상세 정보가 표시돼요</p>
+                  </div>
+                </div>
               ) : rightTab === "info" ? (
                 <div className="p-4 overflow-auto">
                   <div className="flex justify-end mb-3">
@@ -525,7 +580,7 @@ export default function EquipmentInfoPage() {
                     </div>
                     <div className="space-y-1.5">
                       <Label className="text-sm">도입일자</Label>
-                      <FormDatePicker value={infoForm.introduction_date || ""} onChange={(v) => setInfoForm((p) => ({ ...p, introduction_date: v }))} placeholder="도입일자" />
+                      <Input type="date" value={infoForm.introduction_date || ""} onChange={(e) => setInfoForm((p) => ({ ...p, introduction_date: e.target.value }))} className="h-9" />
                     </div>
                     <div className="space-y-1.5">
                       <Label className="text-sm">가동상태</Label>
@@ -543,13 +598,92 @@ export default function EquipmentInfoPage() {
                   </div>
                 </div>
               ) : rightTab === "inspection" ? (
-                <DataGrid gridId="equip-inspection" columns={INSPECTION_COLUMNS} data={inspections} loading={inspectionLoading}
-                  showRowNumber={false} tableName={INSPECTION_TABLE} emptyMessage="점검항목이 없습니다"
-                  onCellEdit={() => refreshRight()} />
+                <div className="flex-1 overflow-auto">
+                  {inspectionLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : inspections.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <ClipboardCheck className="w-8 h-8 mb-2 opacity-40" />
+                      <p className="text-sm">점검항목이 없어요</p>
+                    </div>
+                  ) : (
+                    <Table noWrapper>
+                      <thead className="sticky top-0 z-10 bg-card">
+                        <TableRow>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검항목</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">하한치</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한치</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검내용</TableHead>
+                        </TableRow>
+                      </thead>
+                      <TableBody>
+                        {inspections.map((item) => (
+                          <TableRow key={item.id} className="cursor-pointer hover:bg-primary/5" onDoubleClick={() => {
+                            const std = item.standard_value || "";
+                            const tol = item.tolerance || "";
+                            setInspectionForm({ ...item, standard_value: std, tolerance: tol });
+                            setInspectionEditMode(true);
+                            setInspectionModalOpen(true);
+                          }}>
+                            <TableCell className="text-sm">{item.inspection_item || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
+                            <TableCell className="text-[13px]">{resolve("inspection_method", item.inspection_method)}</TableCell>
+                            <TableCell className="text-[13px]">{item.lower_limit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.upper_limit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.inspection_content || "-"}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
               ) : (
-                <DataGrid gridId="equip-consumable" columns={CONSUMABLE_COLUMNS} data={consumables} loading={consumableLoading}
-                  showRowNumber={false} tableName={CONSUMABLE_TABLE} emptyMessage="소모품이 없습니다"
-                  onCellEdit={() => refreshRight()} />
+                <div className="flex-1 overflow-auto">
+                  {consumableLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : consumables.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Package className="w-8 h-8 mb-2 opacity-40" />
+                      <p className="text-sm">소모품이 없어요</p>
+                    </div>
+                  ) : (
+                    <Table noWrapper>
+                      <thead className="sticky top-0 z-10 bg-card">
+                        <TableRow>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">소모품명</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">교체주기</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">제조사</TableHead>
+                        </TableRow>
+                      </thead>
+                      <TableBody>
+                        {consumables.map((item) => (
+                          <TableRow key={item.id} className="cursor-pointer hover:bg-primary/5" onDoubleClick={() => {
+                            setConsumableForm({ ...item });
+                            setConsumableEditMode(true);
+                            loadConsumableItems();
+                            setConsumableModalOpen(true);
+                          }}>
+                            <TableCell className="text-sm">{item.consumable_name || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.replacement_cycle || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.specification || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.manufacturer || "-"}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
               )}
             </div>
           </ResizablePanel>
@@ -557,67 +691,121 @@ export default function EquipmentInfoPage() {
       </div>
 
       {/* 설비 등록/수정 모달 */}
-      <FullscreenDialog open={equipModalOpen} onOpenChange={setEquipModalOpen}
-        title={equipEditMode ? "설비 수정" : "설비 등록"} description={equipEditMode ? "설비 정보를 수정합니다." : "새로운 설비를 등록합니다."}
-        defaultMaxWidth="max-w-2xl"
-        footer={<><Button variant="outline" onClick={() => setEquipModalOpen(false)}>취소</Button>
-          <Button onClick={handleEquipSave} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button></>}>
-        <div className="grid grid-cols-2 gap-4 py-4">
-          <div className="space-y-1.5"><Label className="text-sm">설비코드</Label>
-            <Input value={equipForm.equipment_code || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_code: e.target.value }))} placeholder="설비코드" className="h-9" disabled={equipEditMode} /></div>
-          <div className="space-y-1.5"><Label className="text-sm">설비명 <span className="text-destructive">*</span></Label>
-            <Input value={equipForm.equipment_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_name: e.target.value }))} placeholder="설비명" className="h-9" /></div>
-          <div className="space-y-1.5"><Label className="text-sm">설비유형</Label>
-            {catSelect("equipment_type", equipForm.equipment_type, (v) => setEquipForm((p) => ({ ...p, equipment_type: v })), "설비유형")}</div>
-          <div className="space-y-1.5"><Label className="text-sm">가동상태</Label>
-            {catSelect("operation_status", equipForm.operation_status, (v) => setEquipForm((p) => ({ ...p, operation_status: v })), "가동상태")}</div>
-          <div className="space-y-1.5"><Label className="text-sm">설치장소</Label>
-            <Input value={equipForm.installation_location || ""} onChange={(e) => setEquipForm((p) => ({ ...p, installation_location: e.target.value }))} placeholder="설치장소" className="h-9" /></div>
-          <div className="space-y-1.5"><Label className="text-sm">제조사</Label>
-            <Input value={equipForm.manufacturer || ""} onChange={(e) => setEquipForm((p) => ({ ...p, manufacturer: e.target.value }))} placeholder="제조사" className="h-9" /></div>
-          <div className="space-y-1.5"><Label className="text-sm">모델명</Label>
-            <Input value={equipForm.model_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, model_name: e.target.value }))} placeholder="모델명" className="h-9" /></div>
-          <div className="space-y-1.5"><Label className="text-sm">도입일자</Label>
-            <FormDatePicker value={equipForm.introduction_date || ""} onChange={(v) => setEquipForm((p) => ({ ...p, introduction_date: v }))} placeholder="도입일자" /></div>
-          <div className="space-y-1.5 col-span-2"><Label className="text-sm">비고</Label>
-            <Input value={equipForm.remarks || ""} onChange={(e) => setEquipForm((p) => ({ ...p, remarks: e.target.value }))} placeholder="비고" className="h-9" /></div>
-          <div className="space-y-1.5 col-span-2"><Label className="text-sm">이미지</Label>
-            <ImageUpload value={equipForm.image_path} onChange={(v) => setEquipForm((p) => ({ ...p, image_path: v }))}
-              tableName={EQUIP_TABLE} recordId={equipForm.id} columnName="image_path" /></div>
-        </div>
-      </FullscreenDialog>
+      <Dialog open={equipModalOpen} onOpenChange={setEquipModalOpen}>
+        <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{equipEditMode ? "설비 수정" : "설비 등록"}</DialogTitle>
+            <DialogDescription>{equipEditMode ? "설비 정보를 수정합니다." : "새로운 설비를 등록합니다."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+            <div className="grid grid-cols-2 gap-4 py-4">
+              <div className="space-y-1.5"><Label className="text-sm">설비코드</Label>
+                <Input value={equipForm.equipment_code || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_code: e.target.value }))} placeholder="설비코드" className="h-9" disabled={equipEditMode} /></div>
+              <div className="space-y-1.5"><Label className="text-sm">설비명 <span className="text-destructive">*</span></Label>
+                <Input value={equipForm.equipment_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_name: e.target.value }))} placeholder="설비명" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">설비유형</Label>
+                {catSelect("equipment_type", equipForm.equipment_type, (v) => setEquipForm((p) => ({ ...p, equipment_type: v })), "설비유형")}</div>
+              <div className="space-y-1.5"><Label className="text-sm">가동상태</Label>
+                {catSelect("operation_status", equipForm.operation_status, (v) => setEquipForm((p) => ({ ...p, operation_status: v })), "가동상태")}</div>
+              <div className="space-y-1.5"><Label className="text-sm">설치장소</Label>
+                <Input value={equipForm.installation_location || ""} onChange={(e) => setEquipForm((p) => ({ ...p, installation_location: e.target.value }))} placeholder="설치장소" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">제조사</Label>
+                <Input value={equipForm.manufacturer || ""} onChange={(e) => setEquipForm((p) => ({ ...p, manufacturer: e.target.value }))} placeholder="제조사" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">모델명</Label>
+                <Input value={equipForm.model_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, model_name: e.target.value }))} placeholder="모델명" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">도입일자</Label>
+                <Input type="date" value={equipForm.introduction_date || ""} onChange={(e) => setEquipForm((p) => ({ ...p, introduction_date: e.target.value }))} className="h-9" /></div>
+              <div className="space-y-1.5 col-span-2"><Label className="text-sm">비고</Label>
+                <Input value={equipForm.remarks || ""} onChange={(e) => setEquipForm((p) => ({ ...p, remarks: e.target.value }))} placeholder="비고" className="h-9" /></div>
+              <div className="space-y-1.5 col-span-2"><Label className="text-sm">이미지</Label>
+                <ImageUpload value={equipForm.image_path} onChange={(v) => setEquipForm((p) => ({ ...p, image_path: v }))}
+                  tableName={EQUIP_TABLE} recordId={equipForm.id} columnName="image_path" /></div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEquipModalOpen(false)}>취소</Button>
+            <Button onClick={handleEquipSave} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 점검항목 추가 모달 */}
       <Dialog open={inspectionModalOpen} onOpenChange={setInspectionModalOpen}>
         <DialogContent className="max-w-lg">
-          <DialogHeader><DialogTitle>점검항목 추가</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 점검항목을 추가합니다.</DialogDescription></DialogHeader>
+          <DialogHeader><DialogTitle>{inspectionEditMode ? "점검항목 수정" : "점검항목 추가"}</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 점검항목을 {inspectionEditMode ? "수정" : "추가"}합니다.</DialogDescription></DialogHeader>
           <div className="space-y-4 py-4">
-            <div className="space-y-1.5"><Label className="text-sm">점검항목 <span className="text-destructive">*</span></Label>
-              <Input value={inspectionForm.inspection_item || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_item: e.target.value }))} placeholder="점검항목" className="h-9" /></div>
             <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-1.5"><Label className="text-sm">점검주기</Label>
+              <div className="space-y-1.5"><Label className="text-sm">점검항목명 <span className="text-destructive">*</span></Label>
+                <Input value={inspectionForm.inspection_item || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_item: e.target.value }))} placeholder="예: 온도점검, 진동점검" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">점검주기 <span className="text-destructive">*</span></Label>
                 {catSelect("inspection_cycle", inspectionForm.inspection_cycle, (v) => setInspectionForm((p) => ({ ...p, inspection_cycle: v })), "점검주기")}</div>
-              <div className="space-y-1.5"><Label className="text-sm">점검방법</Label>
-                {catSelect("inspection_method", inspectionForm.inspection_method, (v) => setInspectionForm((p) => ({ ...p, inspection_method: v })), "점검방법")}</div>
-              <div className="space-y-1.5"><Label className="text-sm">하한치</Label>
-                <Input value={inspectionForm.lower_limit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, lower_limit: e.target.value }))} placeholder="하한치" className="h-9" /></div>
-              <div className="space-y-1.5"><Label className="text-sm">상한치</Label>
-                <Input value={inspectionForm.upper_limit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, upper_limit: e.target.value }))} placeholder="상한치" className="h-9" /></div>
-              <div className="space-y-1.5"><Label className="text-sm">단위</Label>
-                <Input value={inspectionForm.unit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, unit: e.target.value }))} placeholder="단위" className="h-9" /></div>
             </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1.5"><Label className="text-sm">점검방법 <span className="text-destructive">*</span></Label>
+                {catSelect("inspection_method", inspectionForm.inspection_method, (v) => {
+                  const label = resolve("inspection_method", v);
+                  const isNum = ["숫자", "치수검사"].includes(label) || ["숫자", "치수검사"].includes(v);
+                  if (!isNum) {
+                    setInspectionForm((p) => ({ ...p, inspection_method: v, unit: "", standard_value: "", tolerance: "", lower_limit: "", upper_limit: "" }));
+                  } else {
+                    setInspectionForm((p) => ({ ...p, inspection_method: v }));
+                  }
+                }, "점검방법")}</div>
+              {(() => {
+                const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+                const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+                if (!isNumeric) return null;
+                return (
+                  <div className="space-y-1.5"><Label className="text-sm">측정 단위 <span className="text-destructive">*</span></Label>
+                    <Input value={inspectionForm.unit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, unit: e.target.value }))} placeholder="예: ℃, mm, V" className="h-9" /></div>
+                );
+              })()}
+            </div>
+            {(() => {
+              const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+              const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+              if (!isNumeric) return null;
+              return (
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5"><Label className="text-sm">기준값</Label>
+                    <Input value={inspectionForm.standard_value || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, standard_value: e.target.value }))} placeholder="기준값 입력" className="h-9" type="number" /></div>
+                  <div className="space-y-1.5"><Label className="text-sm">±오차범위</Label>
+                    <Input value={inspectionForm.tolerance || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, tolerance: e.target.value }))} placeholder="허용 오차범위" className="h-9" type="number" /></div>
+                </div>
+              );
+            })()}
             <div className="space-y-1.5"><Label className="text-sm">점검내용</Label>
-              <Input value={inspectionForm.inspection_content || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_content: e.target.value }))} placeholder="점검내용" className="h-9" /></div>
+              <textarea
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={inspectionForm.inspection_content || ""}
+                onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_content: e.target.value }))}
+                placeholder="점검 항목 및 내용 입력"
+              /></div>
+            <div className="space-y-1.5"><Label className="text-sm">체크리스트 (선택사항)</Label>
+              <textarea
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={inspectionForm.checklist || ""}
+                onChange={(e) => setInspectionForm((p) => ({ ...p, checklist: e.target.value }))}
+                placeholder="점검 체크리스트 입력 (줄바꿈으로 구분)"
+              /></div>
           </div>
-          <DialogFooter><Button variant="outline" onClick={() => setInspectionModalOpen(false)}>취소</Button>
-            <Button onClick={handleInspectionSave} disabled={saving}><Save className="w-4 h-4 mr-1.5" /> 저장</Button></DialogFooter>
+          <DialogFooter className="flex items-center justify-between sm:justify-between">
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <Checkbox checked={inspectionContinuous} onCheckedChange={(c) => setInspectionContinuous(!!c)} />
+              저장 후 계속 입력
+            </label>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setInspectionModalOpen(false)}>취소</Button>
+              <Button onClick={handleInspectionSave} disabled={saving}><Save className="w-4 h-4 mr-1.5" /> 저장</Button>
+            </div>
+          </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {/* 소모품 추가 모달 */}
       <Dialog open={consumableModalOpen} onOpenChange={setConsumableModalOpen}>
         <DialogContent className="max-w-lg">
-          <DialogHeader><DialogTitle>소모품 추가</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 소모품을 추가합니다.</DialogDescription></DialogHeader>
+          <DialogHeader><DialogTitle>{consumableEditMode ? "소모품 수정" : "소모품 추가"}</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 소모품을 {consumableEditMode ? "수정" : "추가"}합니다.</DialogDescription></DialogHeader>
           <div className="grid grid-cols-2 gap-4 py-4">
             <div className="space-y-1.5 col-span-2"><Label className="text-sm">소모품명 <span className="text-destructive">*</span></Label>
               {consumableItemOptions.length > 0 ? (
@@ -659,17 +847,25 @@ export default function EquipmentInfoPage() {
               <ImageUpload value={consumableForm.image_path} onChange={(v) => setConsumableForm((p) => ({ ...p, image_path: v }))}
                 tableName={CONSUMABLE_TABLE} columnName="image_path" /></div>
           </div>
-          <DialogFooter><Button variant="outline" onClick={() => setConsumableModalOpen(false)}>취소</Button>
-            <Button onClick={handleConsumableSave} disabled={saving}><Save className="w-4 h-4 mr-1.5" /> 저장</Button></DialogFooter>
+          <DialogFooter className="flex items-center justify-between sm:justify-between">
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <Checkbox checked={consumableContinuous} onCheckedChange={(c) => setConsumableContinuous(!!c)} />
+              저장 후 계속 입력
+            </label>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setConsumableModalOpen(false)}>취소</Button>
+              <Button onClick={handleConsumableSave} disabled={saving}><Save className="w-4 h-4 mr-1.5" /> 저장</Button>
+            </div>
+          </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {/* 점검항목 복사 모달 */}
       <Dialog open={copyModalOpen} onOpenChange={setCopyModalOpen}>
-        <DialogContent className="max-w-2xl max-h-[70vh]">
+        <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden">
           <DialogHeader><DialogTitle>점검항목 복사</DialogTitle>
             <DialogDescription>다른 설비의 점검항목을 선택하여 {selectedEquip?.equipment_name}에 복사합니다.</DialogDescription></DialogHeader>
-          <div className="space-y-3">
+          <div className="space-y-3 flex-1 overflow-y-auto">
             <div className="space-y-1.5">
               <Label className="text-sm">소스 설비 선택</Label>
               <Select value={copySourceEquip} onValueChange={(v) => loadCopyItems(v)}>
@@ -685,31 +881,31 @@ export default function EquipmentInfoPage() {
               {copyLoading ? (
                 <div className="flex items-center justify-center py-8"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
               ) : copyItems.length === 0 ? (
-                <div className="text-center text-muted-foreground py-8 text-sm">{copySourceEquip ? "점검항목이 없습니다" : "설비를 선택하세요"}</div>
+                <div className="text-center text-muted-foreground py-8 text-sm">{copySourceEquip ? "점검항목이 없어요" : "설비를 선택해주세요"}</div>
               ) : (
-                <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10">
+                <Table noWrapper>
+                  <thead className="sticky top-0 z-10 bg-card">
                     <TableRow>
                       <TableHead className="w-[40px] text-center">
                         <input type="checkbox" checked={copyItems.length > 0 && copyChecked.size === copyItems.length}
                           onChange={(e) => { if (e.target.checked) setCopyChecked(new Set(copyItems.map((i) => i.id))); else setCopyChecked(new Set()); }} />
                       </TableHead>
-                      <TableHead>점검항목</TableHead><TableHead className="w-[80px]">점검주기</TableHead>
-                      <TableHead className="w-[80px]">점검방법</TableHead><TableHead className="w-[70px]">하한</TableHead>
-                      <TableHead className="w-[70px]">상한</TableHead><TableHead className="w-[60px]">단위</TableHead>
+                      <TableHead>점검항목</TableHead><TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead><TableHead className="w-[70px]">하한</TableHead>
+                      <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한</TableHead><TableHead className="w-[60px]">단위</TableHead>
                     </TableRow>
-                  </TableHeader>
+                  </thead>
                   <TableBody>
                     {copyItems.map((item) => (
                       <TableRow key={item.id} className={cn("cursor-pointer", copyChecked.has(item.id) && "bg-primary/5")}
                         onClick={() => setCopyChecked((prev) => { const n = new Set(prev); if (n.has(item.id)) n.delete(item.id); else n.add(item.id); return n; })}>
                         <TableCell className="text-center"><input type="checkbox" checked={copyChecked.has(item.id)} readOnly /></TableCell>
                         <TableCell className="text-sm">{item.inspection_item}</TableCell>
-                        <TableCell className="text-xs">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
-                        <TableCell className="text-xs">{resolve("inspection_method", item.inspection_method)}</TableCell>
-                        <TableCell className="text-xs">{item.lower_limit || "-"}</TableCell>
-                        <TableCell className="text-xs">{item.upper_limit || "-"}</TableCell>
-                        <TableCell className="text-xs">{item.unit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
+                        <TableCell className="text-[13px]">{resolve("inspection_method", item.inspection_method)}</TableCell>
+                        <TableCell className="text-[13px]">{item.lower_limit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{item.upper_limit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
                       </TableRow>
                     ))}
                   </TableBody>
@@ -738,12 +934,14 @@ export default function EquipmentInfoPage() {
           config={excelChainConfig} onSuccess={() => { fetchEquipments(); refreshRight(); }} />
       )}
 
+      {/* 테이블 설정 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={EQUIP_TABLE}
-        settingsId="equipment-info"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
 
       {ConfirmDialogComponent}
diff --git a/frontend/app/(main)/COMPANY_29/equipment/plc-settings/page.tsx b/frontend/app/(main)/COMPANY_29/equipment/plc-settings/page.tsx
new file mode 100644
index 00000000..4e94d293
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/equipment/plc-settings/page.tsx
@@ -0,0 +1,501 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, Pencil, Cpu, Settings2, Search, Inbox,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+
+/* ───── 테이블명 ───── */
+const DATATYPE_TABLE = "plc_data_type";
+
+const DATATYPE_COLUMNS = [
+  { key: "equipment_code", label: "설비코드" },
+  { key: "data_type", label: "데이터타입" },
+  { key: "unit", label: "단위" },
+  { key: "tag_address", label: "태그주소" },
+  { key: "collection_interval", label: "수집주기" },
+  { key: "lower_limit", label: "하한값" },
+  { key: "upper_limit", label: "상한값" },
+  { key: "is_active", label: "사용여부" },
+];
+const COLLECTION_TABLE = "plc_collection_config";
+const EQUIPMENT_TABLE = "equipment_mng";
+
+/* ───── Cron 한글 변환 ───── */
+const cronToKorean = (cron: string): string => {
+  if (!cron) return "";
+  const parts = cron.trim().split(/\s+/);
+  if (parts.length < 5) return cron;
+  const [min, hour] = parts;
+  if (min === "*" && hour === "*") return "매 분마다";
+  if (min !== "*" && hour === "*") return `매시 ${min}분마다`;
+  if (min === "0" && hour !== "*") return `매일 ${hour}시 정각`;
+  if (min === "*/5") return "5분마다";
+  if (min === "*/10") return "10분마다";
+  if (min === "*/30") return "30분마다";
+  return cron;
+};
+
+/* ───── 카테고리 flatten ───── */
+const flattenCategories = (vals: any[]): { code: string; label: string }[] => {
+  const result: { code: string; label: string }[] = [];
+  for (const v of vals) {
+    result.push({ code: v.valueCode, label: v.valueLabel });
+    if (v.children?.length) result.push(...flattenCategories(v.children));
+  }
+  return result;
+};
+
+export default function PlcSettingsPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-plc-settings", DATATYPE_TABLE, DATATYPE_COLUMNS);
+
+  const [activeTab, setActiveTab] = useState("datatype");
+
+  /* ───── PLC 데이터타입 ───── */
+  const [datatypes, setDatatypes] = useState<any[]>([]);
+  const [dtLoading, setDtLoading] = useState(false);
+  const [dtCount, setDtCount] = useState(0);
+  const [dtChecked, setDtChecked] = useState<string[]>([]);
+  const [dtModalOpen, setDtModalOpen] = useState(false);
+  const [dtEditMode, setDtEditMode] = useState(false);
+  const [dtForm, setDtForm] = useState<Record<string, any>>({});
+  const [dtSaving, setDtSaving] = useState(false);
+  const [dtKeyword, setDtKeyword] = useState("");
+
+  /* ───── 수집 설정 ───── */
+  const [configs, setConfigs] = useState<any[]>([]);
+  const [cfgLoading, setCfgLoading] = useState(false);
+  const [cfgCount, setCfgCount] = useState(0);
+  const [cfgChecked, setCfgChecked] = useState<string[]>([]);
+  const [cfgModalOpen, setCfgModalOpen] = useState(false);
+  const [cfgEditMode, setCfgEditMode] = useState(false);
+  const [cfgForm, setCfgForm] = useState<Record<string, any>>({});
+  const [cfgSaving, setCfgSaving] = useState(false);
+  const [cfgKeyword, setCfgKeyword] = useState("");
+
+  /* ───── FK + 카테고리 옵션 ───── */
+  const [equipOptions, setEquipOptions] = useState<{ code: string; label: string }[]>([]);
+  const [collectionTypeOptions, setCollectionTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const eqRes = await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/data`, { page: 1, size: 500, autoFilter: true });
+        const eqs = eqRes.data?.data?.data || eqRes.data?.data?.rows || [];
+        setEquipOptions(eqs.map((r: any) => ({ code: r.equipment_code, label: `${r.equipment_code} - ${r.equipment_name || ""}` })));
+      } catch { /* skip */ }
+      try {
+        const catRes = await apiClient.get(`/table-categories/${COLLECTION_TABLE}/collection_type/values`);
+        if (catRes.data?.data?.length > 0) {
+          setCollectionTypeOptions(flattenCategories(catRes.data.data));
+        }
+      } catch { /* skip */ }
+    };
+    load();
+  }, []);
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  const fetchDatatypes = useCallback(async (keyword?: string) => {
+    setDtLoading(true);
+    try {
+      const kw = keyword !== undefined ? keyword : dtKeyword;
+      const filters: any[] = [];
+      if (kw.trim()) filters.push({ columnName: "equipment_code", operator: "contains", value: kw.trim() });
+      const res = await apiClient.post(`/table-management/tables/${DATATYPE_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setDatatypes(rows);
+      setDtCount(rows.length);
+    } catch { toast.error("PLC 데이터타입 조회에 실패했어요"); }
+    finally { setDtLoading(false); }
+  }, [dtKeyword]);
+
+  const fetchConfigs = useCallback(async (keyword?: string) => {
+    setCfgLoading(true);
+    try {
+      const kw = keyword !== undefined ? keyword : cfgKeyword;
+      const filters: any[] = [];
+      if (kw.trim()) filters.push({ columnName: "config_name", operator: "contains", value: kw.trim() });
+      const res = await apiClient.post(`/table-management/tables/${COLLECTION_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setConfigs(rows);
+      setCfgCount(rows.length);
+    } catch { toast.error("수집 설정 조회에 실패했어요"); }
+    finally { setCfgLoading(false); }
+  }, [cfgKeyword]);
+
+  useEffect(() => { fetchDatatypes(); fetchConfigs(); }, []);
+
+  /* ═══════════════════ 데이터타입 CRUD ═══════════════════ */
+  const openDtCreate = () => { setDtForm({}); setDtEditMode(false); setDtModalOpen(true); };
+  const openDtEdit = (row: any) => { setDtForm({ ...row }); setDtEditMode(true); setDtModalOpen(true); };
+  const saveDt = async () => {
+    if (!dtForm.equipment_code) { toast.error("설비코드는 필수 입력이에요"); return; }
+    setDtSaving(true);
+    try {
+      if (dtEditMode) {
+        await apiClient.put(`/table-management/tables/${DATATYPE_TABLE}/edit`, {
+          originalData: { id: dtForm.id }, updatedData: dtForm,
+        });
+        toast.success("PLC 데이터타입을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${DATATYPE_TABLE}/add`, dtForm);
+        toast.success("PLC 데이터타입을 등록했어요");
+      }
+      setDtModalOpen(false);
+      fetchDatatypes();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setDtSaving(false); }
+  };
+  const deleteDt = async () => {
+    if (dtChecked.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("PLC 데이터타입 삭제", { description: `선택한 ${dtChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.` });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DATATYPE_TABLE}/delete`, {
+        data: dtChecked.map(id => ({ id })),
+      });
+      toast.success(`${dtChecked.length}건을 삭제했어요`);
+      setDtChecked([]);
+      fetchDatatypes();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ 수집 설정 CRUD ═══════════════════ */
+  const openCfgCreate = () => { setCfgForm({}); setCfgEditMode(false); setCfgModalOpen(true); };
+  const openCfgEdit = (row: any) => { setCfgForm({ ...row }); setCfgEditMode(true); setCfgModalOpen(true); };
+  const saveCfg = async () => {
+    if (!cfgForm.config_name) { toast.error("설정명은 필수 입력이에요"); return; }
+    setCfgSaving(true);
+    try {
+      if (cfgEditMode) {
+        await apiClient.put(`/table-management/tables/${COLLECTION_TABLE}/edit`, {
+          originalData: { id: cfgForm.id }, updatedData: cfgForm,
+        });
+        toast.success("수집 설정을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${COLLECTION_TABLE}/add`, cfgForm);
+        toast.success("수집 설정을 등록했어요");
+      }
+      setCfgModalOpen(false);
+      fetchConfigs();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setCfgSaving(false); }
+  };
+  const deleteCfg = async () => {
+    if (cfgChecked.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("수집 설정 삭제", { description: `선택한 ${cfgChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.` });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${COLLECTION_TABLE}/delete`, {
+        data: cfgChecked.map(id => ({ id })),
+      });
+      toast.success(`${cfgChecked.length}건을 삭제했어요`);
+      setCfgChecked([]);
+      fetchConfigs();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="rounded-lg border bg-card">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <div className="border-b px-3">
+            <TabsList className="bg-transparent h-auto p-0 gap-0">
+              <TabsTrigger
+                value="datatype"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-3 text-sm font-medium"
+              >
+                <Cpu className="w-4 h-4 mr-2" />
+                PLC 데이터타입
+                <Badge variant="secondary" className="ml-2 bg-primary/10 text-primary text-xs">{dtCount}</Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="collection"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-3 text-sm font-medium"
+              >
+                <Settings2 className="w-4 h-4 mr-2" />
+                수집 설정
+                <Badge variant="secondary" className="ml-2 bg-primary/10 text-primary text-xs">{cfgCount}</Badge>
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* ──── PLC 데이터타입 탭 ──── */}
+          <TabsContent value="datatype" className="p-3 mt-0">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    className="h-8 pl-8 w-56 text-sm"
+                    placeholder="설비코드 검색..."
+                    value={dtKeyword}
+                    onChange={(e) => setDtKeyword(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && fetchDatatypes(dtKeyword)}
+                  />
+                </div>
+                <Button size="sm" variant="outline" className="h-8" onClick={() => fetchDatatypes(dtKeyword)}>
+                  <Search className="w-3.5 h-3.5 mr-1" />검색
+                </Button>
+                <Button size="sm" variant="ghost" className="h-8" onClick={() => { setDtKeyword(""); fetchDatatypes(""); }}>
+                  초기화
+                </Button>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">{dtCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openDtCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = datatypes.find(r => dtChecked.includes(r.id));
+                  if (sel) openDtEdit(sel); else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={deleteDt}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <EDataTable
+                columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+                  key: col.key,
+                  label: col.label,
+                  align: col.key === "is_active" ? "center" : undefined,
+                  render: col.key === "is_active"
+                    ? (val: any) => <Badge variant={val ? "default" : "secondary"} className="text-xs">{val ? "사용" : "미사용"}</Badge>
+                    : undefined,
+                }))}
+                data={ts.groupData(datatypes)}
+                loading={dtLoading}
+                emptyMessage="등록된 PLC 데이터타입이 없어요"
+                showCheckbox
+                checkedIds={dtChecked}
+                onCheckedChange={setDtChecked}
+                onRowDoubleClick={(row) => openDtEdit(row)}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </TabsContent>
+
+          {/* ──── 수집 설정 탭 ──── */}
+          <TabsContent value="collection" className="p-3 mt-0">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    className="h-8 pl-8 w-56 text-sm"
+                    placeholder="설정명 검색..."
+                    value={cfgKeyword}
+                    onChange={(e) => setCfgKeyword(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && fetchConfigs(cfgKeyword)}
+                  />
+                </div>
+                <Button size="sm" variant="outline" className="h-8" onClick={() => fetchConfigs(cfgKeyword)}>
+                  <Search className="w-3.5 h-3.5 mr-1" />검색
+                </Button>
+                <Button size="sm" variant="ghost" className="h-8" onClick={() => { setCfgKeyword(""); fetchConfigs(""); }}>
+                  초기화
+                </Button>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">{cfgCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openCfgCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = configs.find(r => cfgChecked.includes(r.id));
+                  if (sel) openCfgEdit(sel); else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={deleteCfg}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+              </div>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <EDataTable
+                columns={[
+                  { key: "config_name", label: "설정명" },
+                  { key: "source_connection_id", label: "소스연결ID", width: "w-[110px]" },
+                  { key: "source_table", label: "소스테이블", width: "w-[120px]" },
+                  { key: "target_table", label: "대상테이블", width: "w-[120px]" },
+                  { key: "collection_type", label: "수집유형", width: "w-[90px]" },
+                  { key: "schedule_cron", label: "스케줄(Cron)", width: "w-[120px]", render: (val: any) => <span className="font-mono text-[13px]">{val}</span> },
+                  { key: "is_active", label: "사용여부", width: "w-[80px]", align: "center" as const, render: (val: any) => <Badge variant={val ? "default" : "secondary"} className="text-xs">{val ? "사용" : "미사용"}</Badge> },
+                ] as EDataTableColumn[]}
+                data={configs}
+                loading={cfgLoading}
+                emptyMessage="등록된 수집 설정이 없어요"
+                showCheckbox
+                checkedIds={cfgChecked}
+                onCheckedChange={setCfgChecked}
+                onRowDoubleClick={(row) => openCfgEdit(row)}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* ═══════════════════ PLC 데이터타입 모달 ═══════════════════ */}
+      <Dialog open={dtModalOpen} onOpenChange={setDtModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{dtEditMode ? "PLC 데이터타입 수정" : "PLC 데이터타입 등록"}</DialogTitle>
+            <DialogDescription>PLC 데이터타입 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">설비코드 <span className="text-destructive">*</span></Label>
+              <Select value={dtForm.equipment_code || ""} onValueChange={(v) => setDtForm(p => ({ ...p, equipment_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="설비를 선택해주세요" /></SelectTrigger>
+                <SelectContent>
+                  {equipOptions.map(o => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">데이터타입</Label>
+              <Input className="h-9" value={dtForm.data_type || ""} onChange={(e) => setDtForm(p => ({ ...p, data_type: e.target.value }))} placeholder="예: 온도, 압력" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">단위</Label>
+              <Input className="h-9" value={dtForm.unit || ""} onChange={(e) => setDtForm(p => ({ ...p, unit: e.target.value }))} placeholder="예: ℃, bar" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">태그주소</Label>
+              <Input className="h-9" value={dtForm.tag_address || ""} onChange={(e) => setDtForm(p => ({ ...p, tag_address: e.target.value }))} placeholder="예: D100" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">수집주기</Label>
+              <Input className="h-9" value={dtForm.collection_interval || ""} onChange={(e) => setDtForm(p => ({ ...p, collection_interval: e.target.value }))} placeholder="예: 1000ms" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">하한값</Label>
+              <Input className="h-9" type="number" value={dtForm.lower_limit ?? ""} onChange={(e) => setDtForm(p => ({ ...p, lower_limit: e.target.value }))} placeholder="하한값" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">상한값</Label>
+              <Input className="h-9" type="number" value={dtForm.upper_limit ?? ""} onChange={(e) => setDtForm(p => ({ ...p, upper_limit: e.target.value }))} placeholder="상한값" />
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <div className="flex items-center gap-2">
+                <Checkbox checked={dtForm.is_active ?? true} onCheckedChange={(v) => setDtForm(p => ({ ...p, is_active: !!v }))} />
+                <Label className="text-sm">사용</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDtModalOpen(false)}>취소</Button>
+            <Button onClick={saveDt} disabled={dtSaving}>
+              {dtSaving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 수집 설정 모달 ═══════════════════ */}
+      <Dialog open={cfgModalOpen} onOpenChange={setCfgModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{cfgEditMode ? "수집 설정 수정" : "수집 설정 등록"}</DialogTitle>
+            <DialogDescription>수집 설정 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">설정명 <span className="text-destructive">*</span></Label>
+              <Input className="h-9" value={cfgForm.config_name || ""} onChange={(e) => setCfgForm(p => ({ ...p, config_name: e.target.value }))} placeholder="설정명을 입력해주세요" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">소스연결ID</Label>
+              <Input className="h-9" value={cfgForm.source_connection_id || ""} onChange={(e) => setCfgForm(p => ({ ...p, source_connection_id: e.target.value }))} placeholder="소스연결ID" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">수집유형</Label>
+              {collectionTypeOptions.length > 0 ? (
+                <Select value={cfgForm.collection_type || ""} onValueChange={(v) => setCfgForm(p => ({ ...p, collection_type: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택해주세요" /></SelectTrigger>
+                  <SelectContent>
+                    {collectionTypeOptions.map(o => (
+                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <Input className="h-9" value={cfgForm.collection_type || ""} onChange={(e) => setCfgForm(p => ({ ...p, collection_type: e.target.value }))} placeholder="수집유형" />
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">소스테이블</Label>
+              <Input className="h-9" value={cfgForm.source_table || ""} onChange={(e) => setCfgForm(p => ({ ...p, source_table: e.target.value }))} placeholder="소스테이블명" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">대상테이블</Label>
+              <Input className="h-9" value={cfgForm.target_table || ""} onChange={(e) => setCfgForm(p => ({ ...p, target_table: e.target.value }))} placeholder="대상테이블명" />
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">스케줄 (Cron)</Label>
+              <Input className="h-9 font-mono text-sm" value={cfgForm.schedule_cron || ""} onChange={(e) => setCfgForm(p => ({ ...p, schedule_cron: e.target.value }))} placeholder="예: */5 * * * * (5분마다)" />
+              {cfgForm.schedule_cron && (
+                <p className="text-xs text-muted-foreground mt-1">{cronToKorean(cfgForm.schedule_cron)}</p>
+              )}
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <div className="flex items-center gap-2">
+                <Checkbox checked={cfgForm.is_active ?? true} onCheckedChange={(v) => setCfgForm(p => ({ ...p, is_active: !!v }))} />
+                <Label className="text-sm">사용</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCfgModalOpen(false)}>취소</Button>
+            <Button onClick={saveCfg} disabled={cfgSaving}>
+              {cfgSaving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/logistics/info/page.tsx b/frontend/app/(main)/COMPANY_29/logistics/info/page.tsx
new file mode 100644
index 00000000..543dd3dd
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/logistics/info/page.tsx
@@ -0,0 +1,905 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import {
+  Truck,
+  DollarSign,
+  FileText,
+  MapPin,
+  Car,
+  Plus,
+  Trash2,
+  Download,
+  Pencil,
+  RefreshCw,
+  Inbox,
+  Loader2,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// ========== 타입 & 상수 ==========
+type TabKey = "carrier" | "cost" | "contract" | "route" | "vehicle";
+
+interface TabColumnDef {
+  key: string;
+  label: string;
+  width?: string;
+  align?: "left" | "center" | "right";
+  formatNumber?: boolean;
+}
+
+interface FormFieldDef {
+  key: string;
+  label: string;
+  type: "text" | "number" | "select" | "smartselect" | "date";
+  required?: boolean;
+  referenceKey?: "carrier" | "route";
+  categoryKey?: string;
+  options?: { value: string; label: string }[];
+  placeholder?: string;
+}
+
+interface TabConfig {
+  key: TabKey;
+  label: string;
+  icon: React.ReactNode;
+  tableName: string;
+  columns: TabColumnDef[];
+  formFields: FormFieldDef[];
+  defaultSortColumn: string;
+}
+
+const TAB_CONFIGS: TabConfig[] = [
+  {
+    key: "carrier",
+    label: "운송업체",
+    icon: <Truck className="h-3.5 w-3.5" />,
+    tableName: "carrier_mng",
+    defaultSortColumn: "carrier_code",
+    columns: [
+      { key: "carrier_code", label: "업체코드", width: "120px" },
+      { key: "carrier_name", label: "업체명", width: "160px" },
+      { key: "carrier_type", label: "업체유형", width: "100px" },
+      { key: "contact_person", label: "담당자", width: "100px" },
+      { key: "contact_phone", label: "연락처", width: "130px" },
+      { key: "email", label: "이메일", width: "180px" },
+      { key: "address", label: "주소", width: "220px" },
+      { key: "rating", label: "등급", width: "70px", align: "center" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "carrier_code", label: "업체코드", type: "text", required: true, placeholder: "업체코드를 입력해주세요" },
+      { key: "carrier_name", label: "업체명", type: "text", required: true, placeholder: "업체명을 입력해주세요" },
+      { key: "carrier_type", label: "업체유형", type: "select", required: true, categoryKey: "carrier_mng:carrier_type", placeholder: "업체유형을 선택해주세요" },
+      { key: "contact_person", label: "담당자", type: "text", placeholder: "담당자명" },
+      { key: "contact_phone", label: "연락처", type: "text", placeholder: "예: 02-1234-5678" },
+      { key: "email", label: "이메일", type: "text", placeholder: "email@example.com" },
+      { key: "address", label: "주소", type: "text", placeholder: "주소를 입력해주세요" },
+      { key: "rating", label: "등급", type: "select", categoryKey: "carrier_mng:rating", placeholder: "등급을 선택해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "cost",
+    label: "물류비",
+    icon: <DollarSign className="h-3.5 w-3.5" />,
+    tableName: "logistics_cost_mng",
+    defaultSortColumn: "carrier_code",
+    columns: [
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "route_code", label: "구간코드", width: "120px" },
+      { key: "base_fee", label: "기본요금", width: "110px", align: "right", formatNumber: true },
+      { key: "unit", label: "단위", width: "70px", align: "center" },
+      { key: "unit_fee", label: "단가", width: "110px", align: "right", formatNumber: true },
+      { key: "min_weight", label: "최소중량", width: "100px", align: "right", formatNumber: true },
+      { key: "max_weight", label: "최대중량", width: "100px", align: "right", formatNumber: true },
+      { key: "delivery_days", label: "배송일수", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "route_code", label: "배송구간", type: "smartselect", required: true, referenceKey: "route" },
+      { key: "base_fee", label: "기본요금", type: "number", placeholder: "0" },
+      { key: "unit", label: "단위", type: "text", placeholder: "kg, 건 등" },
+      { key: "unit_fee", label: "단가", type: "number", placeholder: "0" },
+      { key: "min_weight", label: "최소중량", type: "number", placeholder: "0" },
+      { key: "max_weight", label: "최대중량", type: "number", placeholder: "0" },
+      { key: "delivery_days", label: "배송일수", type: "number", placeholder: "0" },
+    ],
+  },
+  {
+    key: "contract",
+    label: "계약서",
+    icon: <FileText className="h-3.5 w-3.5" />,
+    tableName: "carrier_contract_mng",
+    defaultSortColumn: "contract_no",
+    columns: [
+      { key: "contract_no", label: "계약번호", width: "130px" },
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "contract_start_date", label: "시작일", width: "110px" },
+      { key: "contract_end_date", label: "종료일", width: "110px" },
+      { key: "contract_amount", label: "계약금액", width: "130px", align: "right", formatNumber: true },
+      { key: "contact_person", label: "담당자", width: "100px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "contract_no", label: "계약번호", type: "text", required: true, placeholder: "계약번호를 입력해주세요" },
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "contract_start_date", label: "시작일", type: "date", required: true },
+      { key: "contract_end_date", label: "종료일", type: "date", required: true },
+      { key: "contract_amount", label: "계약금액", type: "number", placeholder: "0" },
+      { key: "contact_person", label: "담당자", type: "text", placeholder: "담당자명을 입력해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_contract_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "route",
+    label: "배송구간",
+    icon: <MapPin className="h-3.5 w-3.5" />,
+    tableName: "delivery_route_mng",
+    defaultSortColumn: "route_code",
+    columns: [
+      { key: "route_code", label: "구간코드", width: "120px" },
+      { key: "route_name", label: "구간명", width: "160px" },
+      { key: "departure", label: "출발지", width: "120px" },
+      { key: "destination", label: "도착지", width: "120px" },
+      { key: "distance_km", label: "거리(km)", width: "100px", align: "right", formatNumber: true },
+      { key: "avg_time_hours", label: "평균시간(h)", width: "100px", align: "right" },
+      { key: "route_type", label: "구간유형", width: "100px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "route_code", label: "구간코드", type: "text", required: true, placeholder: "구간코드를 입력해주세요" },
+      { key: "departure", label: "출발지", type: "text", required: true, placeholder: "출발지" },
+      { key: "destination", label: "도착지", type: "text", required: true, placeholder: "도착지" },
+      { key: "distance_km", label: "거리(km)", type: "number", placeholder: "0" },
+      { key: "avg_time_hours", label: "평균시간(h)", type: "number", placeholder: "0" },
+      { key: "route_type", label: "구간유형", type: "select", categoryKey: "delivery_route_mng:route_type", placeholder: "유형을 선택해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "delivery_route_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "vehicle",
+    label: "차량",
+    icon: <Car className="h-3.5 w-3.5" />,
+    tableName: "carrier_vehicle_mng",
+    defaultSortColumn: "vehicle_code",
+    columns: [
+      { key: "vehicle_code", label: "차량코드", width: "120px" },
+      { key: "vehicle_number", label: "차량번호", width: "120px" },
+      { key: "vehicle_type", label: "차량유형", width: "100px" },
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "load_capacity_kg", label: "적재용량(kg)", width: "120px", align: "right", formatNumber: true },
+      { key: "driver_name", label: "운전자", width: "100px" },
+      { key: "last_maintenance_date", label: "최종정비일", width: "110px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "vehicle_code", label: "차량코드", type: "text", required: true, placeholder: "차량코드를 입력해주세요" },
+      { key: "vehicle_number", label: "차량번호", type: "text", required: true, placeholder: "12가 3456" },
+      { key: "vehicle_type", label: "차량유형", type: "select", required: true, categoryKey: "carrier_vehicle_mng:vehicle_type", placeholder: "차량유형을 선택해주세요" },
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "load_capacity_kg", label: "적재용량(kg)", type: "number", placeholder: "0" },
+      { key: "driver_name", label: "운전자", type: "text", placeholder: "운전자명" },
+      { key: "last_maintenance_date", label: "최종정비일", type: "date" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_vehicle_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+];
+
+// 카테고리 계층 평탄화
+function flattenCategories(items: any[]): { value: string; label: string }[] {
+  const result: { value: string; label: string }[] = [];
+  function walk(arr: any[]) {
+    for (const item of arr) {
+      if (item.value || item.name) {
+        result.push({
+          value: item.value || item.name,
+          label: item.label || item.name || item.value,
+        });
+      }
+      if (item.children?.length) walk(item.children);
+    }
+  }
+  walk(items);
+  return result;
+}
+
+// 채번 대상 필드 매핑: tableName → 코드 필드 key
+const NUMBERING_FIELD_MAP: Record<string, string> = {
+  carrier_mng: "carrier_code",
+  delivery_route_mng: "route_code",
+  carrier_vehicle_mng: "vehicle_code",
+};
+
+// ========== 메인 컴포넌트 ==========
+export default function LogisticsInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 탭 상태
+  const [activeTab, setActiveTab] = useState<TabKey>("carrier");
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 탭별 독립 상태
+  const [tabData, setTabData] = useState<Record<TabKey, any[]>>({
+    carrier: [], cost: [], contract: [], route: [], vehicle: [],
+  });
+  const [tabLoading, setTabLoading] = useState<Record<TabKey, boolean>>({
+    carrier: false, cost: false, contract: false, route: false, vehicle: false,
+  });
+  const [tabChecked, setTabChecked] = useState<Record<TabKey, string[]>>({
+    carrier: [], cost: [], contract: [], route: [], vehicle: [],
+  });
+
+  // FK 참조 데이터 (캐싱)
+  const [carrierOptions, setCarrierOptions] = useState<{ code: string; label: string }[]>([]);
+  const [routeOptions, setRouteOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 카테고리 옵션 캐시
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { value: string; label: string }[]>>({});
+  const loadedCategories = useRef(new Set<string>());
+
+  // 모달 상태
+  const [formOpen, setFormOpen] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [editId, setEditId] = useState<string | null>(null);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 테이블 설정 (탭별)
+  const tsCarrier = useTableSettings("c16-logistics-carrier", TAB_CONFIGS[0].tableName, TAB_CONFIGS[0].columns);
+  const tsCost = useTableSettings("c16-logistics-cost", TAB_CONFIGS[1].tableName, TAB_CONFIGS[1].columns);
+  const tsContract = useTableSettings("c16-logistics-contract", TAB_CONFIGS[2].tableName, TAB_CONFIGS[2].columns);
+  const tsRoute = useTableSettings("c16-logistics-route", TAB_CONFIGS[3].tableName, TAB_CONFIGS[3].columns);
+  const tsVehicle = useTableSettings("c16-logistics-vehicle", TAB_CONFIGS[4].tableName, TAB_CONFIGS[4].columns);
+  const tsMap: Record<TabKey, typeof tsCarrier> = { carrier: tsCarrier, cost: tsCost, contract: tsContract, route: tsRoute, vehicle: tsVehicle };
+  const activeTs = tsMap[activeTab];
+
+  const activeConfig = useMemo(
+    () => TAB_CONFIGS.find((c) => c.key === activeTab)!,
+    [activeTab]
+  );
+
+  // 컬럼 가시성 헬퍼
+  const getVisibleColumns = (tabKey: TabKey) => tsMap[tabKey].visibleColumns;
+
+  // 클라이언트 사이드 필터링
+  const filteredData = useMemo(() => {
+    const data = tabData[activeTab];
+    if (searchFilters.length === 0) return data;
+    return data.filter((row) =>
+      searchFilters.every((f) => {
+        if (!f.value) return true;
+        const kw = f.value.toLowerCase();
+        if (f.columnName) {
+          return String(row[f.columnName] ?? "").toLowerCase().includes(kw);
+        }
+        return Object.values(row).some((v) => String(v ?? "").toLowerCase().includes(kw));
+      })
+    );
+  }, [tabData, activeTab, searchFilters]);
+
+  // FK 참조 데이터 로드
+  const loadReferences = useCallback(async () => {
+    try {
+      const [carrierRes, routeRes] = await Promise.all([
+        apiClient.post("/table-management/tables/carrier_mng/data", {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "carrier_code", order: "asc" },
+        }),
+        apiClient.post("/table-management/tables/delivery_route_mng/data", {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "route_code", order: "asc" },
+        }),
+      ]);
+      const carriers = carrierRes.data?.data?.data || carrierRes.data?.data?.rows || [];
+      setCarrierOptions(
+        carriers.map((r: any) => ({
+          code: r.carrier_code || "",
+          label: `${r.carrier_code} - ${r.carrier_name || ""}`,
+        }))
+      );
+      const routes = routeRes.data?.data?.data || routeRes.data?.data?.rows || [];
+      setRouteOptions(
+        routes.map((r: any) => ({
+          code: r.route_code || "",
+          label: `${r.route_code} - ${r.route_name || ""}`,
+        }))
+      );
+    } catch {
+      // FK 참조 로드 실패 시 무시
+    }
+  }, []);
+
+  useEffect(() => {
+    loadReferences();
+  }, [loadReferences]);
+
+  // 카테고리 옵션 로드
+  const loadCategoryOptions = useCallback(async (tableColumn: string) => {
+    if (loadedCategories.current.has(tableColumn)) return;
+    loadedCategories.current.add(tableColumn);
+    const [tableName, columnName] = tableColumn.split(":");
+    try {
+      const res = await apiClient.get(`/table-categories/${tableName}/${columnName}/values`);
+      const data = res.data?.data || [];
+      setCategoryOptions((prev) => ({
+        ...prev,
+        [tableColumn]: data.length > 0 ? flattenCategories(data) : [],
+      }));
+    } catch {
+      setCategoryOptions((prev) => ({ ...prev, [tableColumn]: [] }));
+    }
+  }, []);
+
+  // 활성 탭의 카테고리 로드
+  useEffect(() => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    config.formFields.forEach((f) => {
+      if (f.categoryKey) loadCategoryOptions(f.categoryKey);
+    });
+  }, [activeTab, loadCategoryOptions]);
+
+  // 데이터 조회
+  const fetchTabData = useCallback(async (tab: TabKey) => {
+    const config = TAB_CONFIGS.find((c) => c.key === tab);
+    if (!config) return;
+    setTabLoading((prev) => ({ ...prev, [tab]: true }));
+    try {
+      const res = await apiClient.post(
+        `/table-management/tables/${config.tableName}/data`,
+        {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: config.defaultSortColumn, order: "asc" },
+        }
+      );
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setTabData((prev) => ({ ...prev, [tab]: rows }));
+    } catch {
+      toast.error("데이터를 불러오는 데 실패했어요.");
+      setTabData((prev) => ({ ...prev, [tab]: [] }));
+    } finally {
+      setTabLoading((prev) => ({ ...prev, [tab]: false }));
+    }
+  }, []);
+
+  // 초기 데이터 로드 (탭 전환 시)
+  useEffect(() => {
+    fetchTabData(activeTab);
+  }, [activeTab, fetchTabData]);
+
+  // 탭 변경
+  const handleTabChange = useCallback((tab: string) => {
+    setActiveTab(tab as TabKey);
+    setSearchFilters([]);
+  }, []);
+
+  // 등록 모달 열기
+  const handleOpenAdd = useCallback(async () => {
+    setEditMode(false);
+    setEditId(null);
+    setFormData({});
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setFormOpen(true);
+
+    // 현재 탭의 채번 규칙 조회
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    const codeField = NUMBERING_FIELD_MAP[config.tableName];
+    if (!codeField) return; // 채번 대상이 아닌 탭
+
+    try {
+      const ruleRes = await apiClient.get(
+        `/numbering-rules/by-column/${config.tableName}/${codeField}`
+      );
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시 — 사용자가 직접 입력
+    }
+  }, [activeTab]);
+
+  // 수정 모달 열기
+  const handleOpenEdit = useCallback((row: any) => {
+    setEditMode(true);
+    setEditId(row.id ? String(row.id) : null);
+    setFormData({ ...row });
+    setFormOpen(true);
+  }, []);
+
+  // 저장
+  const handleSave = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+
+    // 필수값 검증 (등록 모드에서 채번 대상 코드 필드는 자동 할당이므로 스킵)
+    const numberingCodeField = NUMBERING_FIELD_MAP[config.tableName];
+    for (const field of config.formFields) {
+      if (!editMode && numberingRuleId && field.key === numberingCodeField) continue;
+      if (field.required && !formData[field.key]?.toString().trim()) {
+        toast.error(`${field.label}은(는) 필수 입력이에요.`);
+        return;
+      }
+    }
+
+    try {
+      // 배송구간: 출발지→도착지 로 구간명 자동 생성
+      const saveData = { ...formData };
+      if (activeTab === "route" && saveData.departure && saveData.destination) {
+        saveData.route_name = `${saveData.departure}→${saveData.destination}`;
+      }
+
+      if (editMode && editId) {
+        await apiClient.put(`/table-management/tables/${config.tableName}/edit`, {
+          originalData: { id: editId },
+          updatedData: saveData,
+        });
+        toast.success("수정이 완료되었어요.");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        const codeField = NUMBERING_FIELD_MAP[config.tableName];
+        if (codeField && numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            saveData[codeField] = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+
+        await apiClient.post(
+          `/table-management/tables/${config.tableName}/add`,
+          { id: crypto.randomUUID(), ...saveData }
+        );
+        toast.success("등록이 완료되었어요.");
+      }
+      setFormOpen(false);
+      fetchTabData(activeTab);
+      // FK 참조 테이블 변경 시 캐시 갱신
+      if (activeTab === "carrier" || activeTab === "route") {
+        loadReferences();
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    }
+  }, [activeTab, editMode, editId, formData, fetchTabData, loadReferences, numberingRuleId]);
+
+  // 삭제
+  const handleDelete = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    const ids = tabChecked[activeTab];
+    if (ids.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요.");
+      return;
+    }
+    const ok = await confirm(`선택한 ${ids.length}건을 삭제할까요?`, {
+      description: "삭제된 데이터는 복구할 수 없어요.",
+      variant: "destructive",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(
+        `/table-management/tables/${config.tableName}/delete`,
+        { data: ids.map((id) => ({ id })) }
+      );
+      toast.success(`${ids.length}건이 삭제되었어요.`);
+      setTabChecked((prev) => ({ ...prev, [activeTab]: [] }));
+      fetchTabData(activeTab);
+      if (activeTab === "carrier" || activeTab === "route") {
+        loadReferences();
+      }
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  }, [activeTab, tabChecked, confirm, fetchTabData, loadReferences]);
+
+  // 엑셀 다운로드 (필터된 데이터 기준)
+  const handleExcelDownload = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    if (filteredData.length === 0) {
+      toast.error("다운로드할 데이터가 없어요.");
+      return;
+    }
+    const exportData = filteredData.map((row) => {
+      const obj: Record<string, any> = {};
+      config.columns.forEach((col) => {
+        obj[col.label] = row[col.key] ?? "";
+      });
+      return obj;
+    });
+    await exportToExcel(exportData, `${config.label}.xlsx`, config.label);
+    toast.success("엑셀 다운로드가 완료되었어요.");
+  }, [activeTab, filteredData]);
+
+  // 폼 필드 변경
+  const updateFormField = useCallback((key: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [key]: value }));
+  }, []);
+
+  // 행 체크 토글
+  const toggleRowCheck = useCallback((tabKey: TabKey, rowId: string) => {
+    setTabChecked((prev) => {
+      const ids = prev[tabKey];
+      return {
+        ...prev,
+        [tabKey]: ids.includes(rowId) ? ids.filter((x) => x !== rowId) : [...ids, rowId],
+      };
+    });
+  }, []);
+
+  // 전체 체크 토글
+  const toggleAllCheck = useCallback((tabKey: TabKey, checked: boolean) => {
+    setTabChecked((prev) => ({
+      ...prev,
+      [tabKey]: checked ? tabData[tabKey].map((r: any) => String(r.id)) : [],
+    }));
+  }, [tabData]);
+
+  // 폼 필드 렌더
+  const renderFormField = useCallback(
+    (field: FormFieldDef) => {
+      const value = formData[field.key] ?? "";
+      // 현재 탭의 채번 대상 코드 필드인지 확인
+      const numberingCodeField = NUMBERING_FIELD_MAP[activeConfig.tableName];
+      const isNumberingTarget = !editMode && numberingRuleId && field.key === numberingCodeField;
+      // 수정 모드에서 코드/번호 필드는 읽기전용
+      const isCodeField =
+        editMode &&
+        field.type === "text" &&
+        (field.key.endsWith("_code") || field.key.endsWith("_no"));
+
+      switch (field.type) {
+        case "text":
+          // 등록 모드 + 채번 대상 필드: readOnly로 미리보기 코드 표시
+          if (isNumberingTarget) {
+            return (
+              <Input
+                value={previewCode || ""}
+                readOnly
+                placeholder="채번 조회 중..."
+                className="h-9 text-sm bg-muted text-muted-foreground"
+              />
+            );
+          }
+          return (
+            <Input
+              value={value}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              placeholder={field.placeholder}
+              readOnly={isCodeField}
+              className={cn(
+                "h-9 text-sm",
+                isCodeField && "bg-muted text-muted-foreground"
+              )}
+            />
+          );
+        case "number":
+          return (
+            <Input
+              type="number"
+              value={value}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              placeholder={field.placeholder}
+              className="h-9 text-sm"
+            />
+          );
+        case "select": {
+          const opts =
+            field.options ||
+            (field.categoryKey ? categoryOptions[field.categoryKey] : []) ||
+            [];
+          return (
+            <Select
+              value={String(value)}
+              onValueChange={(v) => updateFormField(field.key, v)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder={field.placeholder || "선택해주세요"} />
+              </SelectTrigger>
+              <SelectContent>
+                {opts.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          );
+        }
+        case "smartselect": {
+          // SmartSelect 대신 Select로 직접 구현
+          const opts =
+            field.referenceKey === "carrier" ? carrierOptions : routeOptions;
+          return (
+            <Select
+              value={String(value)}
+              onValueChange={(v) => updateFormField(field.key, v)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder={field.placeholder || "선택해주세요"} />
+              </SelectTrigger>
+              <SelectContent>
+                {opts.map((o) => (
+                  <SelectItem key={o.code} value={o.code}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          );
+        }
+        case "date":
+          return (
+            <Input
+              type="date"
+              value={value ? String(value).split("T")[0] : ""}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              className="h-9 text-sm"
+            />
+          );
+        default:
+          return null;
+      }
+    },
+    [formData, editMode, carrierOptions, routeOptions, categoryOptions, updateFormField, activeConfig, numberingRuleId, previewCode]
+  );
+
+  // ========== 렌더링 ==========
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={activeConfig.tableName}
+        filterId="c16-logistics-info"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={activeTs.filterConfig}
+        dataCount={filteredData.length}
+      />
+
+      {/* 탭 + 콘텐츠 영역 */}
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border bg-card"
+      >
+        <TabsList className="h-auto w-full shrink-0 justify-start gap-0 rounded-none border-b bg-muted/30 p-0">
+          {TAB_CONFIGS.map((tab) => (
+            <TabsTrigger
+              key={tab.key}
+              value={tab.key}
+              className="flex items-center gap-1.5 rounded-none border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-muted-foreground data-[state=active]:border-primary data-[state=active]:font-semibold data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              {tab.icon}
+              {tab.label}
+              <Badge
+                variant="outline"
+                className="ml-1 h-5 min-w-[22px] justify-center px-1.5 font-mono text-[10px]"
+              >
+                {tabData[tab.key]?.length || 0}
+              </Badge>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {TAB_CONFIGS.map((tab) => {
+          const displayData = tab.key === activeTab ? filteredData : tabData[tab.key];
+          const isAllChecked =
+            tabData[tab.key].length > 0 &&
+            tabData[tab.key].every((r: any) => tabChecked[tab.key].includes(String(r.id)));
+
+          return (
+            <TabsContent
+              key={tab.key}
+              value={tab.key}
+              className="m-0 flex flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
+            >
+              {/* 액션 바 */}
+              <div className="flex shrink-0 items-center justify-between border-b px-3 py-2">
+                <div className="flex items-center gap-2">
+                  <h2 className="text-sm font-bold">{tab.label} 목록</h2>
+                  <Badge className="bg-primary/10 font-mono text-[11px] text-primary">
+                    {tab.key === activeTab ? displayData.length : tabData[tab.key]?.length || 0}건
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" className="h-8 text-xs" onClick={handleOpenAdd}>
+                    <Plus className="mr-1 h-3.5 w-3.5" />
+                    등록
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs"
+                    disabled={tabChecked[tab.key].length !== 1}
+                    onClick={() => {
+                      const row = tabData[tab.key].find(
+                        (r: any) => String(r.id) === tabChecked[tab.key][0]
+                      );
+                      if (row) handleOpenEdit(row);
+                    }}
+                  >
+                    <Pencil className="mr-1 h-3.5 w-3.5" />
+                    수정
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs text-destructive hover:bg-destructive/10"
+                    disabled={tabChecked[tab.key].length === 0}
+                    onClick={handleDelete}
+                  >
+                    <Trash2 className="mr-1 h-3.5 w-3.5" />
+                    삭제
+                  </Button>
+                  <div className="mx-1 h-5 w-px bg-border" />
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs"
+                    onClick={handleExcelDownload}
+                  >
+                    <Download className="mr-1 h-3.5 w-3.5" />
+                    엑셀
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => fetchTabData(tab.key)}
+                  >
+                    <RefreshCw
+                      className={cn(
+                        "h-3.5 w-3.5",
+                        tabLoading[tab.key] && "animate-spin"
+                      )}
+                    />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => activeTs.setOpen(true)}
+                  >
+                    <Settings2 className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 테이블 영역 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={getVisibleColumns(tab.key).map((col): EDataTableColumn => ({
+                    key: col.key,
+                    label: col.label,
+                    align: col.align,
+                    formatNumber: col.formatNumber,
+                    truncate: true,
+                  }))}
+                  data={tsMap[tab.key].groupData(displayData)}
+                  rowKey={(row: any) => String(row.id)}
+                  loading={tabLoading[tab.key]}
+                  emptyMessage={`등록된 ${tab.label} 정보가 없어요`}
+                  showCheckbox
+                  checkedIds={tabChecked[tab.key]}
+                  onCheckedChange={(ids) => setTabChecked((prev) => ({ ...prev, [tab.key]: ids }))}
+                  onRowDoubleClick={(row) => handleOpenEdit(row)}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
+              </div>
+            </TabsContent>
+          );
+        })}
+      </Tabs>
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={formOpen} onOpenChange={setFormOpen}>
+        <DialogContent className="flex max-h-[85vh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[680px]">
+          <DialogHeader className="shrink-0 border-b px-6 py-4">
+            <DialogTitle>
+              {activeConfig.label} {editMode ? "수정" : "등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {editMode
+                ? `${activeConfig.label} 정보를 수정해주세요.`
+                : `새 ${activeConfig.label} 정보를 입력해주세요.`}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto p-6">
+            <div className="grid grid-cols-2 gap-4">
+              {activeConfig.formFields.map((field) => (
+                <div key={field.key} className="flex flex-col gap-1.5">
+                  <Label className="text-xs font-semibold text-muted-foreground">
+                    {field.label}
+                    {field.required && (
+                      <span className="ml-0.5 text-destructive">*</span>
+                    )}
+                  </Label>
+                  {renderFormField(field)}
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="shrink-0 border-t">
+            <div className="flex items-center justify-end gap-2 px-6 py-3">
+              <Button variant="outline" onClick={() => setFormOpen(false)}>
+                취소
+              </Button>
+              <Button onClick={handleSave}>
+                {editMode ? "수정" : "등록"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={activeTs.open}
+        onOpenChange={activeTs.setOpen}
+        tableName={activeTs.tableName}
+        settingsId={activeTs.settingsId}
+        defaultVisibleKeys={activeTs.defaultVisibleKeys}
+        onSave={activeTs.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/logistics/inventory/page.tsx b/frontend/app/(main)/COMPANY_29/logistics/inventory/page.tsx
new file mode 100644
index 00000000..7d2a96c6
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/logistics/inventory/page.tsx
@@ -0,0 +1,738 @@
+"use client";
+
+/**
+ * 재고현황 — 하드코딩 페이지 (Type B 마스터-디테일)
+ *
+ * 좌측: 재고 목록 (inventory_stock, item_info JOIN)
+ * 우측: 선택 품목의 재고 이동 이력 (inventory_history)
+ *
+ * ★ 재고 직접 등록/삭제 불가 — 입출고를 통해서만 변동, 조정만 가능
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Package,
+  Loader2,
+  Download,
+  ClipboardEdit,
+  History,
+  AlertTriangle,
+  RefreshCw,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { toast } from "sonner";
+import { exportToExcel } from "@/lib/utils/excelExport";
+
+const STOCK_TABLE = "inventory_stock";
+
+const STOCK_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "warehouse_code", label: "창고" },
+  { key: "location_code", label: "위치" },
+  { key: "current_qty", label: "현재수량", align: "right" as const },
+  { key: "safety_qty", label: "안전재고", align: "right" as const },
+  { key: "unit", label: "단위" },
+  { key: "status", label: "상태" },
+];
+const HISTORY_TABLE = "inventory_history";
+
+const getStatusVariant = (
+  status: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "정상":
+      return "default";
+    case "부족":
+      return "destructive";
+    case "과잉":
+      return "secondary";
+    default:
+      return "outline";
+  }
+};
+
+const getHistoryTypeVariant = (
+  type: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (type) {
+    case "입고":
+      return "default";
+    case "출고":
+      return "secondary";
+    case "조정":
+      return "outline";
+    case "입고취소":
+    case "이동":
+      return "destructive";
+    default:
+      return "outline";
+  }
+};
+
+export default function InventoryStatusPage() {
+  const { user } = useAuth();
+  const ts = useTableSettings("c16-inventory", STOCK_TABLE, STOCK_COLUMNS);
+
+  // 좌측: 재고 목록
+  const [stockItems, setStockItems] = useState<any[]>([]);
+  const [stockLoading, setStockLoading] = useState(false);
+  const [selectedStockId, setSelectedStockId] = useState<string | null>(null);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 이동 이력
+  const [historyItems, setHistoryItems] = useState<any[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+
+  // 조정 모달
+  const [adjustModalOpen, setAdjustModalOpen] = useState(false);
+  const [adjustForm, setAdjustForm] = useState<{
+    adjust_type: string;
+    adjust_qty: string;
+    reason: string;
+  }>({ adjust_type: "증가", adjust_qty: "", reason: "" });
+  const [adjustSaving, setAdjustSaving] = useState(false);
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["status", "unit"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${STOCK_TABLE}/${col}/values`
+          );
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setCategoryOptions(optMap);
+    };
+    load();
+  }, []);
+
+  // 재고 목록 조회
+  const fetchStock = useCallback(async () => {
+    setStockLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const [stockRes, itemRes, whRes] = await Promise.all([
+        apiClient.post(`/table-management/tables/${STOCK_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+          autoFilter: true,
+          sort: { columnName: "item_code", order: "asc" },
+        }),
+        apiClient.post(`/table-management/tables/item_info/data`, { page: 1, size: 500, autoFilter: true }),
+        apiClient.post(`/table-management/tables/warehouse_info/data`, { page: 1, size: 500, autoFilter: true }),
+      ]);
+      const raw = stockRes.data?.data?.data || stockRes.data?.data?.rows || [];
+      const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+      const warehouses = whRes.data?.data?.data || whRes.data?.data?.rows || [];
+      const itemMap = new Map(items.map((i: any) => [i.item_number || i.item_code, { name: i.item_name || "", unit: i.unit || "" }]));
+      const whMap = new Map(warehouses.map((w: any) => [w.warehouse_code, w.warehouse_name || w.warehouse_code]));
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const itemInfo = itemMap.get(r.item_code) as any;
+        return {
+          ...r,
+          item_name: itemInfo?.name || "",
+          unit: itemInfo?.unit || resolve("unit", r.unit),
+          warehouse_name: whMap.get(r.warehouse_code) || r.warehouse_code || "",
+          status: resolve("status", r.status),
+          _isLow: r.safety_qty && Number(r.current_qty) < Number(r.safety_qty),
+        };
+      });
+      setStockItems(data);
+    } catch {
+      toast.error("재고 목록을 불러오지 못했어요");
+    } finally {
+      setStockLoading(false);
+    }
+  }, [categoryOptions, searchFilters]);
+
+  useEffect(() => {
+    fetchStock();
+  }, [fetchStock]);
+
+  // 선택된 재고
+  const selectedStock = stockItems.find((s) => s.id === selectedStockId);
+
+  // 이력 조회
+  const fetchHistory = useCallback(async () => {
+    if (!selectedStock?.item_code) {
+      setHistoryItems([]);
+      return;
+    }
+    setHistoryLoading(true);
+    try {
+      const historyFilters: any[] = [
+        {
+          columnName: "item_code",
+          operator: "equals",
+          value: selectedStock.item_code,
+        },
+      ];
+      if (selectedStock.warehouse_code) {
+        historyFilters.push({
+          columnName: "warehouse_code",
+          operator: "equals",
+          value: selectedStock.warehouse_code,
+        });
+      }
+      const res = await apiClient.post(
+        `/table-management/tables/${HISTORY_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: { enabled: true, filters: historyFilters },
+          autoFilter: true,
+          sort: { columnName: "transaction_date", order: "desc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setHistoryItems(raw);
+    } catch {
+      toast.error("재고 이력을 불러오지 못했어요");
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, [selectedStock?.item_code, selectedStock?.warehouse_code]);
+
+  useEffect(() => {
+    fetchHistory();
+  }, [fetchHistory]);
+
+  // 재고 조정 저장
+  const handleAdjustSave = async () => {
+    if (!selectedStock) return;
+    const qty = Number(adjustForm.adjust_qty);
+    if (!qty || qty <= 0) {
+      toast.error("조정 수량을 입력해주세요");
+      return;
+    }
+    if (!adjustForm.reason.trim()) {
+      toast.error("조정 사유를 입력해주세요");
+      return;
+    }
+    setAdjustSaving(true);
+    try {
+      const changeQty = adjustForm.adjust_type === "증가" ? qty : -qty;
+      const afterQty = Number(selectedStock.current_qty || 0) + changeQty;
+
+      await apiClient.post(
+        `/table-management/tables/${HISTORY_TABLE}/add`,
+        {
+          id: crypto.randomUUID(),
+          item_code: selectedStock.item_code,
+          warehouse_code: selectedStock.warehouse_code || "",
+          location_code: selectedStock.location_code || "",
+          transaction_type: "조정",
+          transaction_date: new Date().toISOString(),
+          quantity: String(changeQty),
+          balance_qty: String(afterQty),
+          remark: adjustForm.reason.trim(),
+        }
+      );
+
+      await apiClient.put(
+        `/table-management/tables/${STOCK_TABLE}/edit`,
+        {
+          originalData: { id: selectedStock.id },
+          updatedData: { current_qty: afterQty },
+        }
+      );
+
+      toast.success("재고가 조정되었어요");
+      setAdjustModalOpen(false);
+      setAdjustForm({ adjust_type: "증가", adjust_qty: "", reason: "" });
+      fetchStock();
+    } catch {
+      toast.error("재고 조정에 실패했어요");
+    } finally {
+      setAdjustSaving(false);
+    }
+  };
+
+  // EDataTable 컬럼 정의
+  const stockColumns: EDataTableColumn[] = ts.visibleColumns.map((col) => {
+    const base: EDataTableColumn = { key: col.key, label: col.label, align: col.align };
+    if (col.key === "current_qty") {
+      return {
+        ...base,
+        align: "right" as const,
+        render: (val: any, row: any) => (
+          <span className="font-mono">
+            <span className={cn(row._isLow && "text-destructive font-bold")}>
+              {Number(row.current_qty || 0).toLocaleString()}
+            </span>
+            {row._isLow && (
+              <AlertTriangle className="inline h-3 w-3 text-destructive ml-1" />
+            )}
+          </span>
+        ),
+      };
+    }
+    if (col.key === "safety_qty") {
+      return {
+        ...base,
+        align: "right" as const,
+        formatNumber: true,
+      };
+    }
+    if (col.key === "status") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getStatusVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    return base;
+  });
+
+  // 엑셀 내보내기
+  const handleExcelExport = () => {
+    if (stockItems.length === 0) {
+      toast.error("내보낼 데이터가 없어요");
+      return;
+    }
+    exportToExcel(
+      stockItems.map((r) => ({
+        품목코드: r.item_code,
+        품명: r.item_name,
+        창고: r.warehouse_name || r.warehouse_code,
+        위치: r.location_code,
+        현재수량: r.current_qty,
+        안전재고: r.safety_qty,
+        단위: r.unit,
+        상태: r.status,
+      })),
+      "재고현황"
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3">
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={STOCK_TABLE}
+        filterId="c16-inventory"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={stockItems.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1 text-xs"
+              onClick={handleExcelExport}
+            >
+              <Download className="h-3.5 w-3.5" />
+              엑셀
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 패널 */}
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="flex-1 rounded-lg border bg-card"
+      >
+        {/* 좌측: 재고 목록 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+              <div className="flex items-center gap-2">
+                <span className="text-[13px] font-bold">재고 목록</span>
+                <Badge variant="default" className="rounded-full text-[11px]">
+                  {stockItems.length}건
+                </Badge>
+              </div>
+            </div>
+
+            <EDataTable
+              columns={stockColumns}
+              data={ts.groupData(stockItems)}
+              rowKey={(row) => row.id}
+              loading={stockLoading}
+              emptyMessage="등록된 재고가 없어요"
+              selectedId={selectedStockId}
+              onSelect={(id) => setSelectedStockId(id)}
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+              columnOrderKey="c16-inventory"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 상세 이력 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex flex-col h-full">
+            {!selectedStock ? (
+              <div className="flex flex-col items-center justify-center flex-1 m-5 border-2 border-dashed rounded-lg border-border">
+                <Package className="h-12 w-12 text-muted-foreground/40 mb-4" />
+                <p className="text-sm font-semibold text-muted-foreground">
+                  품목을 선택해주세요
+                </p>
+                <p className="text-xs text-muted-foreground/70 mt-1">
+                  좌측에서 품목을 선택하면 재고 이력이 표시돼요
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                  <div className="flex items-center gap-2">
+                    <History className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-[13px] font-bold">
+                      {selectedStock.item_name || selectedStock.item_code}
+                    </span>
+                    <Badge
+                      variant="outline"
+                      className="rounded-full text-[11px] font-mono"
+                    >
+                      {selectedStock.item_code}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-1.5 text-xs">
+                      <span className="text-muted-foreground">현재:</span>
+                      <span
+                        className={cn(
+                          "font-bold font-mono",
+                          selectedStock._isLow
+                            ? "text-destructive"
+                            : "text-foreground"
+                        )}
+                      >
+                        {Number(selectedStock.current_qty || 0).toLocaleString()}
+                      </span>
+                      {selectedStock._isLow && (
+                        <AlertTriangle className="h-3.5 w-3.5 text-destructive" />
+                      )}
+                    </div>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={() => {
+                        setAdjustForm({
+                          adjust_type: "증가",
+                          adjust_qty: "",
+                          reason: "",
+                        });
+                        setAdjustModalOpen(true);
+                      }}
+                    >
+                      <ClipboardEdit className="h-3.5 w-3.5" />
+                      재고 조정
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 재고 요약 카드 */}
+                <div className="grid grid-cols-4 gap-2 px-4 py-3 border-b">
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">현재수량</span>
+                    <span className="text-sm font-bold font-mono">
+                      {Number(selectedStock.current_qty || 0).toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">안전재고</span>
+                    <span className="text-sm font-bold font-mono">
+                      {Number(selectedStock.safety_qty || 0).toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">창고</span>
+                    <span className="text-sm font-bold truncate max-w-full">
+                      {selectedStock.warehouse_name || "-"}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">상태</span>
+                    <Badge
+                      variant={getStatusVariant(selectedStock.status)}
+                      className="text-[10px] mt-0.5"
+                    >
+                      {selectedStock.status || "-"}
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* 이력 서브헤더 */}
+                <div className="flex items-center justify-between px-4 py-2 border-b">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-semibold text-muted-foreground">
+                      재고 이동 이력
+                    </span>
+                    <Badge variant="secondary" className="rounded-full text-[10px]">
+                      {historyItems.length}건
+                    </Badge>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={fetchHistory}
+                  >
+                    <RefreshCw className="h-3 w-3" />
+                    새로고침
+                  </Button>
+                </div>
+
+                {/* 이력 테이블 */}
+                <div className="flex-1 overflow-auto">
+                  {historyLoading ? (
+                    <div className="flex items-center justify-center h-20">
+                      <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : historyItems.length === 0 ? (
+                    <div className="flex items-center justify-center h-20 text-xs text-muted-foreground">
+                      재고 이동 이력이 없어요
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="w-8 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">일자</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                          <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">변동수량</TableHead>
+                          <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이후수량</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                          <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사유</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">처리자</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {historyItems.map((h, idx) => (
+                          <TableRow key={h.id || idx} className="text-xs">
+                            <TableCell className="text-center text-muted-foreground">
+                              {idx + 1}
+                            </TableCell>
+                            <TableCell className="font-mono">
+                              {h.transaction_date ? String(h.transaction_date).slice(0, 10) : h.history_date || ""}
+                            </TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getHistoryTypeVariant(h.transaction_type || h.history_type)}
+                                className="text-[10px]"
+                              >
+                                {h.transaction_type || h.history_type}
+                              </Badge>
+                            </TableCell>
+                            <TableCell
+                              className={cn(
+                                "text-right font-mono",
+                                Number(h.quantity ?? h.change_qty) > 0
+                                  ? "text-primary"
+                                  : "text-destructive"
+                              )}
+                            >
+                              {Number(h.quantity ?? h.change_qty) > 0 ? "+" : ""}
+                              {Number(h.quantity ?? h.change_qty ?? 0).toLocaleString()}
+                            </TableCell>
+                            <TableCell className="text-right font-mono">
+                              {Number(h.balance_qty ?? h.after_qty ?? 0).toLocaleString()}
+                            </TableCell>
+                            <TableCell className="font-mono truncate max-w-[120px]">
+                              {h.reference_number || h.reference_no || ""}
+                            </TableCell>
+                            <TableCell className="truncate max-w-[150px]">
+                              {h.remark || h.reason || ""}
+                            </TableCell>
+                            <TableCell>{h.writer || h.created_by || ""}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 재고 조정 Dialog */}
+      <Dialog open={adjustModalOpen} onOpenChange={setAdjustModalOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>재고 조정</DialogTitle>
+            <DialogDescription>
+              {selectedStock
+                ? `${selectedStock.item_name || selectedStock.item_code} — 현재 수량: ${Number(selectedStock.current_qty || 0).toLocaleString()}`
+                : ""}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-2">
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 유형
+              </Label>
+              <Select
+                value={adjustForm.adjust_type}
+                onValueChange={(v) =>
+                  setAdjustForm((prev) => ({ ...prev, adjust_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="조정 유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="증가">증가 (입고 보정)</SelectItem>
+                  <SelectItem value="감소">감소 (출고 보정)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 수량
+              </Label>
+              <Input
+                type="number"
+                min={1}
+                placeholder="수량을 입력해주세요"
+                value={adjustForm.adjust_qty}
+                onChange={(e) =>
+                  setAdjustForm((prev) => ({
+                    ...prev,
+                    adjust_qty: e.target.value,
+                  }))
+                }
+              />
+              {adjustForm.adjust_qty && selectedStock && (
+                <p className="text-xs text-muted-foreground">
+                  조정 후 수량:{" "}
+                  <span className="font-mono font-bold">
+                    {(
+                      Number(selectedStock.current_qty || 0) +
+                      (adjustForm.adjust_type === "증가" ? 1 : -1) *
+                        Number(adjustForm.adjust_qty || 0)
+                    ).toLocaleString()}
+                  </span>
+                </p>
+              )}
+            </div>
+
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 사유 *
+              </Label>
+              <Textarea
+                placeholder="조정 사유를 입력해주세요"
+                rows={3}
+                value={adjustForm.reason}
+                onChange={(e) =>
+                  setAdjustForm((prev) => ({
+                    ...prev,
+                    reason: e.target.value,
+                  }))
+                }
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setAdjustModalOpen(false)}
+            >
+              취소
+            </Button>
+            <Button onClick={handleAdjustSave} disabled={adjustSaving}>
+              {adjustSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              조정하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/logistics/material-status/page.tsx b/frontend/app/(main)/COMPANY_29/logistics/material-status/page.tsx
index 6a921ead..eb87ba92 100644
--- a/frontend/app/(main)/COMPANY_29/logistics/material-status/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/logistics/material-status/page.tsx
@@ -10,7 +10,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Card, CardContent } from "@/components/ui/card";
+// Card 제거 — rounded-lg border bg-card 패턴 사용
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -29,6 +29,8 @@ import {
   AlertTriangle,
   CheckCircle2,
   Loader2,
+  Inbox,
+  Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
@@ -39,6 +41,17 @@ import {
   type MaterialData,
   type WarehouseData,
 } from "@/lib/api/materialStatus";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+
+const GRID_COLUMNS = [
+  { key: "plan_no", label: "계획번호" },
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "plan_qty", label: "수량" },
+  { key: "plan_date", label: "일자" },
+  { key: "status", label: "상태" },
+];
 
 const formatDate = (date: Date) => {
   const y = date.getFullYear();
@@ -60,16 +73,17 @@ const getStatusLabel = (status: string) => {
 
 const getStatusStyle = (status: string) => {
   const map: Record<string, string> = {
-    planned: "bg-amber-100 text-amber-700 border-amber-200",
-    pending: "bg-amber-100 text-amber-700 border-amber-200",
-    in_progress: "bg-blue-100 text-blue-700 border-blue-200",
-    completed: "bg-emerald-100 text-emerald-700 border-emerald-200",
-    cancelled: "bg-gray-100 text-gray-500 border-gray-200",
+    planned: "bg-secondary text-secondary-foreground border-border",
+    pending: "bg-secondary text-secondary-foreground border-border",
+    in_progress: "bg-primary/10 text-primary border-primary/20",
+    completed: "bg-accent text-accent-foreground border-accent/50",
+    cancelled: "bg-muted text-muted-foreground border-border",
   };
-  return map[status] || "bg-gray-100 text-gray-500 border-gray-200";
+  return map[status] || "bg-muted text-muted-foreground border-border";
 };
 
 export default function MaterialStatusPage() {
+  const ts = useTableSettings("c16-material-status", "work_instruction", GRID_COLUMNS);
   const today = new Date();
   const monthAgo = new Date(today);
   monthAgo.setMonth(today.getMonth() - 1);
@@ -193,33 +207,19 @@ export default function MaterialStatusPage() {
   }, [materials, materialSearch, showShortageOnly]);
 
   return (
-    <div className="flex h-[calc(100vh-4rem)] flex-col gap-4 bg-muted/30 p-4">
-      {/* 헤더 */}
-      <div className="shrink-0">
-        <div className="flex items-center gap-3">
-          <Package className="h-7 w-7 text-primary" />
-          <div>
-            <h1 className="text-2xl font-bold">자재현황</h1>
-            <p className="text-sm text-muted-foreground">
-              작업지시 대비 원자재 재고 현황
-            </p>
-          </div>
-        </div>
-      </div>
-
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
       {/* 검색 영역 */}
-      <Card className="shrink-0">
-        <CardContent className="flex flex-wrap items-end gap-3 p-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">기간</Label>
-            <div className="flex items-center gap-2">
+      <div className="shrink-0 flex flex-wrap items-end gap-3 rounded-lg border bg-card p-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">기간</span>
+            <div className="flex items-center gap-1.5">
               <Input
                 type="date"
                 className="h-9 w-[140px]"
                 value={searchDateFrom}
                 onChange={(e) => setSearchDateFrom(e.target.value)}
               />
-              <span className="text-muted-foreground">~</span>
+              <span className="text-muted-foreground/50 text-xs">~</span>
               <Input
                 type="date"
                 className="h-9 w-[140px]"
@@ -229,8 +229,8 @@ export default function MaterialStatusPage() {
             </div>
           </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">품목코드</Label>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목코드</span>
             <Input
               placeholder="품목코드"
               className="h-9 w-[140px]"
@@ -239,8 +239,8 @@ export default function MaterialStatusPage() {
             />
           </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">품목명</Label>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목명</span>
             <Input
               placeholder="품목명"
               className="h-9 w-[140px]"
@@ -251,14 +251,14 @@ export default function MaterialStatusPage() {
 
           <div className="flex-1" />
 
-          <div className="flex items-center gap-2">
+          <div className="flex items-end gap-2">
             <Button
               variant="outline"
               size="sm"
               className="h-9"
               onClick={handleResetSearch}
             >
-              <RotateCcw className="mr-2 h-4 w-4" />
+              <RotateCcw className="mr-1 h-4 w-4" />
               초기화
             </Button>
             <Button
@@ -268,24 +268,23 @@ export default function MaterialStatusPage() {
               disabled={workOrdersLoading}
             >
               {workOrdersLoading ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                <Loader2 className="mr-1 h-4 w-4 animate-spin" />
               ) : (
-                <Search className="mr-2 h-4 w-4" />
+                <Search className="mr-1 h-4 w-4" />
               )}
               검색
             </Button>
           </div>
-        </CardContent>
-      </Card>
+      </div>
 
       {/* 메인 콘텐츠 (좌우 분할) */}
-      <div className="flex-1 overflow-hidden rounded-lg border bg-background shadow-sm">
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
         <ResizablePanelGroup direction="horizontal">
           {/* 왼쪽: 작업지시 리스트 */}
           <ResizablePanel defaultSize={35} minSize={25}>
             <div className="flex h-full flex-col">
               {/* 패널 헤더 */}
-              <div className="flex items-center justify-between border-b bg-muted/10 p-3 shrink-0">
+              <div className="flex items-center justify-between border-b bg-muted/30 px-3 py-2.5 shrink-0">
                 <div className="flex items-center gap-2">
                   <Checkbox
                     checked={isAllChecked}
@@ -295,9 +294,9 @@ export default function MaterialStatusPage() {
                   <span className="text-sm font-semibold">작업지시 리스트</span>
                 </div>
                 <div className="flex items-center gap-2">
-                  <Badge variant="secondary" className="font-normal">
-                    {workOrders.length}
-                  </Badge>
+                  <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                    {workOrders.length}건
+                  </span>
                   <Button
                     size="sm"
                     className="h-8"
@@ -311,6 +310,9 @@ export default function MaterialStatusPage() {
                     )}
                     자재조회
                   </Button>
+                  <Button variant="ghost" size="sm" className="h-8" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="h-4 w-4" />
+                  </Button>
                 </div>
               </div>
 
@@ -320,80 +322,101 @@ export default function MaterialStatusPage() {
                   <div className="flex flex-col items-center justify-center py-12 text-center">
                     <Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
                     <p className="text-sm text-muted-foreground">
-                      작업지시를 조회하고 있습니다...
+                      작업지시를 조회하고 있어요...
                     </p>
                   </div>
                 ) : workOrders.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center py-12 text-center">
-                    <ClipboardList className="mb-3 h-10 w-10 text-muted-foreground/30" />
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Inbox className="h-10 w-10 text-muted-foreground/30" />
                     <p className="text-sm text-muted-foreground">
-                      작업지시가 없습니다
+                      조회된 작업지시가 없어요
                     </p>
                   </div>
                 ) : (
-                  workOrders.map((wo) => (
-                    <div
-                      key={wo.id}
-                      className={cn(
-                        "flex gap-3 rounded-lg border-2 p-3 transition-all cursor-pointer",
-                        "hover:border-primary hover:shadow-md hover:-translate-y-0.5",
-                        selectedWoId === wo.id
-                          ? "border-primary bg-primary/5 shadow-md"
-                          : "border-border"
-                      )}
-                      onClick={() => handleSelectWo(wo.id)}
-                    >
+                  ts.groupData(workOrders).map((wo) => {
+                    if ((wo as any)._isGroupSummary || (wo as any)._isGroupHeader) return null;
+                    return (
                       <div
-                        className="flex items-start pt-0.5"
-                        onClick={(e) => e.stopPropagation()}
+                        key={wo.id}
+                        className={cn(
+                          "flex gap-3 rounded-lg border p-3 transition-all cursor-pointer",
+                          "hover:border-primary/50 hover:shadow-sm",
+                          selectedWoId === wo.id
+                            ? "border-primary bg-primary/5 shadow-sm"
+                            : "border-border"
+                        )}
+                        onClick={() => handleSelectWo(wo.id)}
                       >
-                        <Checkbox
-                          checked={checkedWoIds.includes(wo.id)}
-                          onCheckedChange={(c) =>
-                            handleCheckWo(wo.id, c as boolean)
-                          }
-                        />
-                      </div>
-                      <div className="flex flex-1 flex-col gap-1.5">
-                        <div className="flex items-center gap-2">
-                          <span className="text-sm font-bold text-primary">
-                            {wo.plan_no || wo.work_order_no || `WO-${wo.id}`}
-                          </span>
-                          <span
-                            className={cn(
-                              "ml-auto rounded-md border px-2 py-0.5 text-[11px] font-semibold",
-                              getStatusStyle(wo.status)
+                        <div
+                          className="flex items-start pt-0.5"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Checkbox
+                            checked={checkedWoIds.includes(wo.id)}
+                            onCheckedChange={(c) =>
+                              handleCheckWo(wo.id, c as boolean)
+                            }
+                          />
+                        </div>
+                        <div className="flex flex-1 flex-col gap-1.5">
+                          <div className="flex items-center gap-2">
+                            {ts.isVisible("plan_no") && (
+                              <span className="text-sm font-bold text-primary">
+                                {wo.plan_no || wo.work_order_no || `WO-${wo.id}`}
+                              </span>
                             )}
-                          >
-                            {getStatusLabel(wo.status)}
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-1.5">
-                          <span className="text-sm font-semibold">
-                            {wo.item_name}
-                          </span>
-                          <span className="text-xs text-muted-foreground">
-                            ({wo.item_code})
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                          <span>수량:</span>
-                          <span className="font-semibold text-foreground">
-                            {Number(wo.plan_qty).toLocaleString()}개
-                          </span>
-                          <span className="mx-1">|</span>
-                          <span>일자:</span>
-                          <span className="font-semibold text-foreground">
-                            {wo.plan_date
-                              ? new Date(wo.plan_date)
-                                  .toISOString()
-                                  .slice(0, 10)
-                              : "-"}
-                          </span>
+                            {ts.isVisible("status") && (
+                              <span
+                                className={cn(
+                                  "ml-auto rounded-md border px-2 py-0.5 text-[11px] font-semibold",
+                                  getStatusStyle(wo.status)
+                                )}
+                              >
+                                {getStatusLabel(wo.status)}
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1.5">
+                            {ts.isVisible("item_name") && (
+                              <span className="text-sm font-semibold">
+                                {wo.item_name}
+                              </span>
+                            )}
+                            {ts.isVisible("item_code") && (
+                              <span className="text-xs text-muted-foreground">
+                                ({wo.item_code})
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                            {ts.isVisible("plan_qty") && (
+                              <>
+                                <span>수량:</span>
+                                <span className="font-semibold text-foreground">
+                                  {Number(wo.plan_qty).toLocaleString()}개
+                                </span>
+                              </>
+                            )}
+                            {ts.isVisible("plan_qty") && ts.isVisible("plan_date") && (
+                              <span className="mx-1">|</span>
+                            )}
+                            {ts.isVisible("plan_date") && (
+                              <>
+                                <span>일자:</span>
+                                <span className="font-semibold text-foreground">
+                                  {wo.plan_date
+                                    ? new Date(wo.plan_date)
+                                        .toISOString()
+                                        .slice(0, 10)
+                                    : "-"}
+                                </span>
+                              </>
+                            )}
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  ))
+                    );
+                  })
                 )}
               </div>
             </div>
@@ -405,21 +428,21 @@ export default function MaterialStatusPage() {
           <ResizablePanel defaultSize={65} minSize={35}>
             <div className="flex h-full flex-col">
               {/* 패널 헤더 */}
-              <div className="flex items-center gap-2 border-b bg-muted/10 p-3 shrink-0">
+              <div className="flex items-center gap-2 border-b bg-muted/30 px-3 py-2.5 shrink-0">
                 <Factory className="h-4 w-4 text-muted-foreground" />
                 <span className="text-sm font-semibold">원자재 재고 현황</span>
               </div>
 
               {/* 필터 */}
-              <div className="flex flex-wrap items-center gap-3 border-b bg-muted/5 px-4 py-3 shrink-0">
+              <div className="flex flex-wrap items-center gap-3 border-b bg-muted/30 px-4 py-2.5 shrink-0">
                 <Input
                   placeholder="원자재 검색"
-                  className="h-9 min-w-[150px] flex-1"
+                  className="h-8 min-w-[150px] flex-1 text-xs"
                   value={materialSearch}
                   onChange={(e) => setMaterialSearch(e.target.value)}
                 />
                 <Select value={warehouse} onValueChange={setWarehouse}>
-                  <SelectTrigger className="h-9 w-[200px]">
+                  <SelectTrigger className="h-8 w-[180px] text-xs">
                     <SelectValue placeholder="전체 창고" />
                   </SelectTrigger>
                   <SelectContent>
@@ -437,14 +460,14 @@ export default function MaterialStatusPage() {
                     ))}
                   </SelectContent>
                 </Select>
-                <label className="flex cursor-pointer items-center gap-2 text-sm font-medium">
+                <label className="flex cursor-pointer items-center gap-2 text-xs font-medium">
                   <Checkbox
                     checked={showShortageOnly}
                     onCheckedChange={(c) => setShowShortageOnly(c as boolean)}
                   />
                   <span>부족한 것만 보기</span>
                 </label>
-                <span className="ml-auto text-sm font-semibold text-muted-foreground">
+                <span className="ml-auto rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
                   {filteredMaterials.length}개 품목
                 </span>
               </div>
@@ -455,21 +478,21 @@ export default function MaterialStatusPage() {
                   <div className="flex flex-col items-center justify-center py-12 text-center">
                     <Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
                     <p className="text-sm text-muted-foreground">
-                      자재현황을 조회하고 있습니다...
+                      자재현황을 조회하고 있어요...
                     </p>
                   </div>
                 ) : materials.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center py-12 text-center">
-                    <Package className="mb-3 h-10 w-10 text-muted-foreground/30" />
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Inbox className="h-10 w-10 text-muted-foreground/30" />
                     <p className="text-sm text-muted-foreground">
                       작업지시를 선택하고 자재조회 버튼을 클릭해주세요
                     </p>
                   </div>
                 ) : filteredMaterials.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center py-12 text-center">
-                    <Package className="mb-3 h-10 w-10 text-muted-foreground/30" />
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Package className="h-10 w-10 text-muted-foreground/30" />
                     <p className="text-sm text-muted-foreground">
-                      조회된 원자재가 없습니다
+                      조회된 원자재가 없어요
                     </p>
                   </div>
                 ) : (
@@ -488,10 +511,10 @@ export default function MaterialStatusPage() {
                       <div
                         key={material.code}
                         className={cn(
-                          "rounded-lg border-2 p-3 transition-all hover:shadow-md hover:-translate-y-0.5",
+                          "rounded-lg border p-3 transition-all hover:shadow-sm",
                           isShortage
-                            ? "border-destructive/40 bg-destructive/2"
-                            : "border-emerald-300/50 bg-emerald-50/20"
+                            ? "border-destructive/30 bg-destructive/5"
+                            : "border-primary/15 bg-primary/5"
                         )}
                       >
                         {/* 메인 정보 라인 */}
@@ -508,7 +531,7 @@ export default function MaterialStatusPage() {
                           <span className="text-xs text-muted-foreground">
                             필요:
                           </span>
-                          <span className="text-xs font-semibold text-blue-600">
+                          <span className="text-xs font-semibold text-primary">
                             {material.required.toLocaleString()}
                             {material.unit}
                           </span>
@@ -540,7 +563,7 @@ export default function MaterialStatusPage() {
                               "text-xs font-semibold",
                               isShortage
                                 ? "text-destructive"
-                                : "text-emerald-600"
+                                : "text-primary"
                             )}
                           >
                             {Math.abs(shortage).toLocaleString()}
@@ -556,7 +579,7 @@ export default function MaterialStatusPage() {
                               부족
                             </span>
                           ) : (
-                            <span className="ml-auto inline-flex items-center gap-1 rounded-md border border-emerald-500 bg-emerald-500/10 px-2 py-0.5 text-[11px] font-semibold text-emerald-600">
+                            <span className="ml-auto inline-flex items-center gap-1 rounded-md border border-primary bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary">
                               <CheckCircle2 className="h-3 w-3" />
                               충분
                             </span>
@@ -592,6 +615,15 @@ export default function MaterialStatusPage() {
           </ResizablePanel>
         </ResizablePanelGroup>
       </div>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_29/logistics/outbound/page.tsx b/frontend/app/(main)/COMPANY_29/logistics/outbound/page.tsx
index b834b76a..c1ffbd40 100644
--- a/frontend/app/(main)/COMPANY_29/logistics/outbound/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/logistics/outbound/page.tsx
@@ -18,7 +18,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -31,23 +31,37 @@ import {
   Search,
   Plus,
   Trash2,
-  RotateCcw,
   Loader2,
   PackageOpen,
   X,
   Save,
   ChevronRight,
   ChevronLeft,
+  ChevronDown,
   ChevronsLeft,
   ChevronsRight,
+  Inbox,
+  Settings2,
+  Filter,
+  Check,
+  ArrowUp,
+  ArrowDown,
 } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+// API: /outbound/*
 import {
   getOutboundList,
   createOutbound,
+  updateOutbound,
   deleteOutbound,
   generateOutboundNumber,
   getOutboundWarehouses,
+  getOutboundLocations,
   getShipmentInstructionSources,
   getPurchaseOrderSources,
   getItemSources,
@@ -55,25 +69,26 @@ import {
   type ShipmentInstructionSource,
   type PurchaseOrderSource,
   type ItemSource,
+  type LocationOption,
   type WarehouseOption,
 } from "@/lib/api/outbound";
 
 // 출고유형 옵션
 const OUTBOUND_TYPES = [
-  { value: "판매출고", label: "판매출고", color: "bg-blue-100 text-blue-800" },
-  { value: "반품출고", label: "반품출고", color: "bg-pink-100 text-pink-800" },
-  { value: "기타출고", label: "기타출고", color: "bg-gray-100 text-gray-800" },
+  { value: "판매출고", label: "판매출고", color: "bg-primary/10 text-primary" },
+  { value: "반품출고", label: "반품출고", color: "bg-destructive/10 text-destructive" },
+  { value: "기타출고", label: "기타출고", color: "bg-muted text-muted-foreground" },
 ];
 
 const OUTBOUND_STATUS_OPTIONS = [
-  { value: "대기", label: "대기", color: "bg-amber-100 text-amber-800" },
-  { value: "출고완료", label: "출고완료", color: "bg-emerald-100 text-emerald-800" },
-  { value: "부분출고", label: "부분출고", color: "bg-amber-100 text-amber-800" },
-  { value: "출고취소", label: "출고취소", color: "bg-red-100 text-red-800" },
+  { value: "대기", label: "대기", color: "bg-secondary text-secondary-foreground" },
+  { value: "출고완료", label: "출고완료", color: "bg-primary/10 text-primary" },
+  { value: "부분출고", label: "부분출고", color: "bg-accent text-accent-foreground" },
+  { value: "출고취소", label: "출고취소", color: "bg-destructive/10 text-destructive" },
 ];
 
-const getTypeColor = (type: string) => OUTBOUND_TYPES.find((t) => t.value === type)?.color || "bg-gray-100 text-gray-800";
-const getStatusColor = (status: string) => OUTBOUND_STATUS_OPTIONS.find((s) => s.value === status)?.color || "bg-gray-100 text-gray-800";
+const getTypeColor = (type: string) => OUTBOUND_TYPES.find((t) => t.value === type)?.color || "bg-muted text-muted-foreground";
+const getStatusColor = (status: string) => OUTBOUND_STATUS_OPTIONS.find((s) => s.value === status)?.color || "bg-muted text-muted-foreground";
 
 // 소스 테이블 한글명 매핑
 const SOURCE_TYPE_LABEL: Record<string, string> = {
@@ -82,6 +97,144 @@ const SOURCE_TYPE_LABEL: Record<string, string> = {
   item_info: "품목",
 };
 
+const GRID_COLUMNS = [
+  { key: "outbound_number", label: "출고번호" },
+  { key: "outbound_type", label: "출고유형" },
+  { key: "outbound_date", label: "출고일" },
+  { key: "reference_number", label: "참조번호" },
+  { key: "source_type", label: "데이터출처" },
+  { key: "customer_name", label: "거래처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "outbound_qty", label: "출고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+  { key: "warehouse_name", label: "창고" },
+  { key: "outbound_status", label: "출고상태" },
+  { key: "remark", label: "비고" },
+];
+
+// 마스터 헤더 레이아웃 (출고번호 뒤)
+const MASTER_BODY_LAYOUT = [
+  { key: "outbound_type", label: "출고유형", colSpan: 1 },
+  { key: "outbound_date", label: "출고일", colSpan: 1 },
+  { key: "reference_number", label: "참조번호", colSpan: 1 },
+  { key: "customer_name", label: "거래처", colSpan: 1 },
+  { key: "warehouse_name", label: "창고", colSpan: 1 },
+  { key: "outbound_status", label: "출고상태", colSpan: 1 },
+  { key: "memo", label: "비고", colSpan: 1 },
+];
+
+// 디테일 헤더 컬럼
+const DETAIL_HEADER_COLS = [
+  { key: "source_type", label: "출처" },
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "specification", label: "규격" },
+  { key: "outbound_qty", label: "출고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+];
+
+// 마스터 필드 키 목록 (필터 분류용)
+const MASTER_KEYS = new Set(["outbound_number", ...MASTER_BODY_LAYOUT.map((c) => c.key)]);
+
+// 디테일 필드 키 매핑 (GRID_COLUMNS key → DETAIL_HEADER_COLS key)
+const DETAIL_KEY_MAP: Record<string, string> = {
+  source_type: "source_type",
+  item_number: "item_code",
+  item_name: "item_name",
+  spec: "specification",
+  outbound_qty: "outbound_qty",
+  unit_price: "unit_price",
+  total_amount: "total_amount",
+};
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 // 선택된 소스 아이템 (등록 모달에서 사용)
 interface SelectedSourceItem {
   key: string;
@@ -102,17 +255,45 @@ interface SelectedSourceItem {
 }
 
 export default function OutboundPage() {
+  const ts = useTableSettings("c16-outbound", "outbound_mng", GRID_COLUMNS);
+
+  // ts.visibleColumns 기반 마스터/디테일 컬럼 계산
+  const visibleMasterLayout = useMemo(() => {
+    const ordered: typeof MASTER_BODY_LAYOUT = [];
+    for (const vc of ts.visibleColumns) {
+      const m = MASTER_BODY_LAYOUT.find((ml) => ml.key === vc.key);
+      if (m) ordered.push(m);
+    }
+    return ordered.length > 0 ? ordered : MASTER_BODY_LAYOUT;
+  }, [ts.visibleColumns]);
+
+  const visibleDetailCols = useMemo(() => {
+    const ordered: typeof DETAIL_HEADER_COLS = [];
+    for (const vc of ts.visibleColumns) {
+      const detailKey = DETAIL_KEY_MAP[vc.key];
+      if (detailKey) {
+        const d = DETAIL_HEADER_COLS.find((dc) => dc.key === detailKey);
+        if (d) ordered.push(d);
+      }
+    }
+    return ordered.length > 0 ? ordered : DETAIL_HEADER_COLS;
+  }, [ts.visibleColumns]);
+
+  const TOTAL_COLS = 3 + visibleMasterLayout.length;
+
   // 목록 데이터
   const [data, setData] = useState<OutboundItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [checkedIds, setCheckedIds] = useState<string[]>([]);
 
   // 검색 필터
-  const [searchType, setSearchType] = useState("all");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 마스터-디테일 그룹 테이블 state
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+  const [closingOrders, setClosingOrders] = useState<Set<string>>(new Set());
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
 
   // 등록 모달
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -126,6 +307,10 @@ export default function OutboundPage() {
   const [selectedItems, setSelectedItems] = useState<SelectedSourceItem[]>([]);
   const [saving, setSaving] = useState(false);
 
+  // 수정 모드 (등록 모달을 재활용)
+  const [editMode, setEditMode] = useState(false);
+  const [editItemIds, setEditItemIds] = useState<string[]>([]);
+
   // 소스 데이터
   const [sourceKeyword, setSourceKeyword] = useState("");
   const [sourceLoading, setSourceLoading] = useState(false);
@@ -133,38 +318,37 @@ export default function OutboundPage() {
   const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrderSource[]>([]);
   const [items, setItems] = useState<ItemSource[]>([]);
   const [warehouses, setWarehouses] = useState<WarehouseOption[]>([]);
+  const [locations, setLocations] = useState<LocationOption[]>([]);
 
   // 소스 데이터 페이징 (클라이언트 사이드)
   const [sourcePage, setSourcePage] = useState(1);
   const [sourcePageSize, setSourcePageSize] = useState(20);
 
-  // 날짜 초기화
-  useEffect(() => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-  }, []);
-
   // 목록 조회
   const fetchList = useCallback(async () => {
     setLoading(true);
     try {
-      const res = await getOutboundList({
-        outbound_type: searchType !== "all" ? searchType : undefined,
-        outbound_status: searchStatus !== "all" ? searchStatus : undefined,
-        search_keyword: searchKeyword || undefined,
-        date_from: searchDateFrom || undefined,
-        date_to: searchDateTo || undefined,
-      });
+      const params: Record<string, string | undefined> = {};
+      for (const f of searchFilters) {
+        if (!f.value) continue;
+        if (f.columnName === "outbound_type") params.outbound_type = f.value;
+        else if (f.columnName === "outbound_status") params.outbound_status = f.value;
+        else if (f.columnName === "outbound_date" && f.operator === "between") {
+          const [from, to] = f.value.split("~").map((s) => s.trim());
+          if (from) params.date_from = from;
+          if (to) params.date_to = to;
+        } else {
+          params.search_keyword = f.value;
+        }
+      }
+      const res = await getOutboundList(params);
       if (res.success) setData(res.data);
     } catch {
       // ignore
     } finally {
       setLoading(false);
     }
-  }, [searchType, searchStatus, searchKeyword, searchDateFrom, searchDateTo]);
+  }, [searchFilters]);
 
   useEffect(() => {
     fetchList();
@@ -182,26 +366,146 @@ export default function OutboundPage() {
     })();
   }, []);
 
-  // 검색 초기화
-  const handleReset = () => {
-    setSearchType("all");
-    setSearchStatus("all");
-    setSearchKeyword("");
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
+  // --- 마스터-디테일 그룹핑, 필터, 정렬 ---
+
+  // outbound_number 기준 그룹핑 + 필터 + 정렬
+  const filteredGroups = useMemo(() => {
+    // 1차: outbound_number 기준 그룹핑
+    const allGroups: Record<string, { master: OutboundItem; details: OutboundItem[] }> = {};
+    for (const row of data) {
+      const key = row.outbound_number || "_no_number";
+      if (!allGroups[key]) {
+        allGroups[key] = { master: row, details: [] };
+      }
+      allGroups[key].details.push(row);
+    }
+
+    // 마스터 필터 / 디테일 필터 분리
+    const masterFilters: Record<string, Set<string>> = {};
+    const detailFilters: Record<string, Set<string>> = {};
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      if (MASTER_KEYS.has(colKey)) masterFilters[colKey] = values;
+      else detailFilters[colKey] = values;
+    }
+
+    // 2차: 마스터 필터 적용 (그룹 단위)
+    let entries = Object.entries(allGroups);
+    if (Object.keys(masterFilters).length > 0) {
+      entries = entries.filter(([, group]) =>
+        Object.entries(masterFilters).every(([colKey, values]) => {
+          const raw = (group.master as any)?.[colKey] ?? "";
+          return values.has(String(raw));
+        })
+      );
+    }
+
+    // 3차: 디테일 필터 적용 (행 단위)
+    if (Object.keys(detailFilters).length > 0) {
+      entries = entries
+        .map(([outNo, group]) => {
+          const filtered = group.details.filter((row) =>
+            Object.entries(detailFilters).every(([colKey, values]) => {
+              let cellVal = (row as any)[colKey] != null ? String((row as any)[colKey]) : "";
+              if (colKey === "source_type") cellVal = SOURCE_TYPE_LABEL[cellVal] || cellVal;
+              return values.has(cellVal);
+            })
+          );
+          return [outNo, { ...group, details: filtered }] as [string, typeof group];
+        })
+        .filter(([, group]) => group.details.length > 0);
+    }
+
+    // 4차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      if (MASTER_KEYS.has(key)) {
+        entries.sort(([, a], [, b]) => {
+          const av = (a.master as any)?.[key] ?? "";
+          const bv = (b.master as any)?.[key] ?? "";
+          const na = Number(av); const nb = Number(bv);
+          if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+          return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+        });
+      } else {
+        entries.forEach(([, group]) => {
+          group.details.sort((a, b) => {
+            let av: any = (a as any)[key] ?? "";
+            let bv: any = (b as any)[key] ?? "";
+            if (key === "source_type") { av = SOURCE_TYPE_LABEL[av] || av; bv = SOURCE_TYPE_LABEL[bv] || bv; }
+            const na = Number(av); const nb = Number(bv);
+            if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+            return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+          });
+        });
+      }
+    }
+
+    return Object.fromEntries(entries);
+  }, [data, headerFilters, sortState]);
+
+  // 마스터 컬럼별 고유값 (헤더 필터용)
+  const masterUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    const seenMasters = new Map<string, OutboundItem>();
+    data.forEach((row) => {
+      if (row.outbound_number && !seenMasters.has(row.outbound_number)) {
+        seenMasters.set(row.outbound_number, row);
+      }
+    });
+    const masters = Array.from(seenMasters.values());
+    for (const col of [{ key: "outbound_number", label: "출고번호" }, ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label }))]) {
+      const values = new Set<string>();
+      masters.forEach((m) => {
+        const val = (m as any)?.[col.key];
+        if (val !== null && val !== undefined && val !== "") values.add(String(val));
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 디테일 컬럼별 고유값 (디테일 서브헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of DETAIL_HEADER_COLS) {
+      const values = new Set<string>();
+      data.forEach((row) => {
+        let val = (row as any)[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "source_type") val = SOURCE_TYPE_LABEL[val] || val;
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
   };
 
-  // 체크박스
-  const allChecked = data.length > 0 && checkedIds.length === data.length;
-  const toggleCheckAll = () => {
-    setCheckedIds(allChecked ? [] : data.map((d) => d.id));
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
   };
-  const toggleCheck = (id: string) => {
-    setCheckedIds((prev) =>
-      prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
     );
   };
 
@@ -243,6 +547,8 @@ export default function OutboundPage() {
 
   const openRegisterModal = async () => {
     const defaultType = "판매출고";
+    setEditMode(false);
+    setEditItemIds([]);
     setModalOutboundType(defaultType);
     setModalOutboundDate(new Date().toISOString().split("T")[0]);
     setModalWarehouse("");
@@ -267,6 +573,45 @@ export default function OutboundPage() {
     }
   };
 
+  // 수정 모달 열기 (같은 출고번호 묶어서)
+  const openEditModal = (row: OutboundItem) => {
+    const outNo = row.outbound_number;
+    const grouped = data.filter((d) => d.outbound_number === outNo);
+    const first = grouped[0] || row;
+
+    setEditMode(true);
+    setEditItemIds(grouped.map((g) => g.id));
+    setModalOutboundNo(outNo);
+    setModalOutboundType(first.outbound_type || "판매출고");
+    setModalOutboundDate(first.outbound_date ? first.outbound_date.slice(0, 10) : "");
+    setModalWarehouse(first.warehouse_code || "");
+    setModalLocation(first.location_code || "");
+    setModalManager(first.manager_id || "");
+    setModalMemo(first.memo || "");
+    setSelectedItems(
+      grouped.map((g) => ({
+        key: g.id,
+        outbound_type: g.outbound_type || "",
+        reference_number: g.reference_number || "",
+        customer_code: g.customer_code || "",
+        customer_name: g.customer_name || "",
+        item_number: g.item_code || "",
+        item_name: g.item_name || "",
+        spec: g.specification || "",
+        material: g.material || "",
+        unit: g.unit || "",
+        outbound_qty: Number(g.outbound_qty) || 0,
+        unit_price: Number(g.unit_price) || 0,
+        total_amount: Number(g.total_amount) || 0,
+        source_type: g.source_type || "",
+        source_id: (g as any).source_id || "",
+      }))
+    );
+    setSourceKeyword("");
+    setIsModalOpen(true);
+    loadSourceData(first.outbound_type || "판매출고");
+  };
+
   const searchSourceData = useCallback(async () => {
     setSourcePage(1);
     await loadSourceData(modalOutboundType, sourceKeyword || undefined);
@@ -439,44 +784,102 @@ export default function OutboundPage() {
 
     setSaving(true);
     try {
-      const res = await createOutbound({
-        outbound_number: modalOutboundNo,
-        outbound_date: modalOutboundDate,
-        warehouse_code: modalWarehouse || undefined,
-        location_code: modalLocation || undefined,
-        manager_id: modalManager || undefined,
-        memo: modalMemo || undefined,
-        items: selectedItems.map((item) => ({
-          outbound_type: item.outbound_type,
-          reference_number: item.reference_number,
-          customer_code: item.customer_code,
-          customer_name: item.customer_name,
-          item_code: item.item_number,
-          item_name: item.item_name,
-          spec: item.spec,
-          material: item.material,
-          unit: item.unit,
-          outbound_qty: item.outbound_qty,
-          unit_price: item.unit_price,
-          total_amount: item.total_amount,
-          source_type: item.source_type,
-          source_id: item.source_id,
-          outbound_status: "출고완료",
-        })),
-      });
+      if (editMode) {
+        const currentKeys = new Set(selectedItems.map((i) => i.key));
+        // 삭제: editItemIds에 있지만 selectedItems에 없는 것
+        const toDelete = editItemIds.filter((id) => !currentKeys.has(id));
+        // 수정: editItemIds에도 있고 selectedItems에도 있는 것
+        const toUpdate = selectedItems.filter((i) => editItemIds.includes(i.key));
+        // 추가: editItemIds에 없는 새 아이템
+        const toCreate = selectedItems.filter((i) => !editItemIds.includes(i.key));
 
-      if (res.success) {
-        alert(res.message || "출고 등록 완료");
+        await Promise.all([
+          ...toDelete.map((id) => deleteOutbound(id)),
+          ...toUpdate.map((item) =>
+            updateOutbound(item.key, {
+              outbound_date: modalOutboundDate,
+              outbound_qty: item.outbound_qty,
+              unit_price: item.unit_price,
+              total_amount: item.total_amount,
+              warehouse_code: modalWarehouse || undefined,
+              location_code: modalLocation || undefined,
+              manager_id: modalManager || undefined,
+              memo: modalMemo || undefined,
+            } as any)
+          ),
+          ...(toCreate.length > 0
+            ? [createOutbound({
+                outbound_number: modalOutboundNo,
+                outbound_date: modalOutboundDate,
+                warehouse_code: modalWarehouse || undefined,
+                location_code: modalLocation || undefined,
+                manager_id: modalManager || undefined,
+                memo: modalMemo || undefined,
+                items: toCreate.map((item) => ({
+                  outbound_type: item.outbound_type,
+                  reference_number: item.reference_number,
+                  customer_code: item.customer_code,
+                  customer_name: item.customer_name,
+                  item_code: item.item_number,
+                  item_name: item.item_name,
+                  spec: item.spec,
+                  material: item.material,
+                  unit: item.unit,
+                  outbound_qty: item.outbound_qty,
+                  unit_price: item.unit_price,
+                  total_amount: item.total_amount,
+                  source_type: item.source_type,
+                  source_id: item.source_id,
+                  outbound_status: "출고완료",
+                })),
+              })]
+            : []),
+        ]);
+        toast.success("출고 정보를 수정했어요");
         setIsModalOpen(false);
         fetchList();
+      } else {
+        const res = await createOutbound({
+          outbound_number: modalOutboundNo,
+          outbound_date: modalOutboundDate,
+          warehouse_code: modalWarehouse || undefined,
+          location_code: modalLocation || undefined,
+          manager_id: modalManager || undefined,
+          memo: modalMemo || undefined,
+          items: selectedItems.map((item) => ({
+            outbound_type: item.outbound_type,
+            reference_number: item.reference_number,
+            customer_code: item.customer_code,
+            customer_name: item.customer_name,
+            item_code: item.item_number,
+            item_name: item.item_name,
+            spec: item.spec,
+            material: item.material,
+            unit: item.unit,
+            outbound_qty: item.outbound_qty,
+            unit_price: item.unit_price,
+            total_amount: item.total_amount,
+            source_type: item.source_type,
+            source_id: item.source_id,
+            outbound_status: "출고완료",
+          })),
+        });
+
+        if (res.success) {
+          toast.success(res.message || "출고 등록 완료");
+          setIsModalOpen(false);
+          fetchList();
+        }
       }
     } catch {
-      alert("출고 등록 중 오류가 발생했습니다.");
+      toast.error(editMode ? "수정에 실패했어요" : "출고 등록 중 오류가 발생했습니다.");
     } finally {
       setSaving(false);
     }
   };
 
+
+
   // 합계 계산
   const totalSummary = useMemo(() => {
     return {
@@ -487,228 +890,350 @@ export default function OutboundPage() {
   }, [selectedItems]);
 
   return (
-    <div className="flex h-full flex-col gap-4 p-4">
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
       {/* 검색 영역 */}
-      <div className="flex flex-wrap items-center gap-2 rounded-lg border bg-card p-4">
-        <Select value={searchType} onValueChange={setSearchType}>
-          <SelectTrigger className="h-9 w-[130px] text-xs">
-            <SelectValue placeholder="출고유형" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">전체 유형</SelectItem>
-            {OUTBOUND_TYPES.map((t) => (
-              <SelectItem key={t.value} value={t.value}>
-                {t.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Select value={searchStatus} onValueChange={setSearchStatus}>
-          <SelectTrigger className="h-9 w-[130px] text-xs">
-            <SelectValue placeholder="출고상태" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">전체 상태</SelectItem>
-            {OUTBOUND_STATUS_OPTIONS.map((s) => (
-              <SelectItem key={s.value} value={s.value}>
-                {s.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Input
-          placeholder="출고번호 / 품목명 / 참조번호 검색"
-          value={searchKeyword}
-          onChange={(e) => setSearchKeyword(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && fetchList()}
-          className="h-9 w-[240px] text-xs"
-        />
-
-        <div className="flex items-center gap-1">
-          <Input
-            type="date"
-            value={searchDateFrom}
-            onChange={(e) => setSearchDateFrom(e.target.value)}
-            className="h-9 w-[140px] text-xs"
-          />
-          <span className="text-muted-foreground text-xs">~</span>
-          <Input
-            type="date"
-            value={searchDateTo}
-            onChange={(e) => setSearchDateTo(e.target.value)}
-            className="h-9 w-[140px] text-xs"
-          />
-        </div>
-
-        <Button size="sm" onClick={fetchList} className="h-9">
-          <Search className="mr-1 h-4 w-4" />
-          조회
-        </Button>
-        <Button size="sm" variant="outline" onClick={handleReset} className="h-9">
-          <RotateCcw className="mr-1 h-4 w-4" />
-          초기화
-        </Button>
-
-        <div className="ml-auto flex gap-2">
-          <Button size="sm" onClick={openRegisterModal} className="h-9">
-            <Plus className="mr-1 h-4 w-4" />
-            출고 등록
-          </Button>
-          <Button
-            size="sm"
-            variant="destructive"
-            onClick={handleDelete}
-            disabled={checkedIds.length === 0}
-            className="h-9"
-          >
-            <Trash2 className="mr-1 h-4 w-4" />
-            삭제 ({checkedIds.length})
-          </Button>
-        </div>
-      </div>
+      <DynamicSearchFilter
+        tableName="outbound_mng"
+        filterId="c16-outbound"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={data.length}
+      />
 
       {/* 출고 목록 테이블 */}
-      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
-        <div className="flex items-center justify-between border-b px-4 py-3">
+      <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+        {/* 패널 헤더 */}
+        <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2.5 shrink-0">
           <div className="flex items-center gap-2">
-            <PackageOpen className="text-muted-foreground h-5 w-5" />
-            <h3 className="text-base font-semibold">출고 목록</h3>
-            <span className="text-muted-foreground text-sm">
-              총 {data.length}건
+            <PackageOpen className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-semibold">출고 목록</span>
+            <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+              {data.length}건
             </span>
           </div>
+          <div className="flex gap-2">
+            <Button size="sm" onClick={openRegisterModal} className="h-8">
+              <Plus className="mr-1 h-3.5 w-3.5" />
+              출고 등록
+            </Button>
+            <Button
+              size="sm"
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={checkedIds.length === 0}
+              className="h-8"
+            >
+              <Trash2 className="mr-1 h-3.5 w-3.5" />
+              삭제 ({checkedIds.length})
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-4 w-4" />
+            </Button>
+          </div>
         </div>
 
-        <div className="h-[calc(100%-52px)] overflow-auto">
-          <Table>
-            <TableHeader>
-              <TableRow className="bg-muted/50">
-                <TableHead className="w-[40px] text-center">
+        <div className="h-full overflow-auto">
+          <Table style={{ minWidth: `${216 + visibleMasterLayout.length * 120}px` }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "36px" }} />
+              <col style={{ width: "140px" }} />
+              {visibleMasterLayout.map((col) => (
+                <col key={col.key} style={{ width: ts.getWidth(col.key) ? `${ts.getWidth(col.key)}px` : undefined }} />
+              ))}
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
                   <Checkbox
-                    checked={allChecked}
-                    onCheckedChange={toggleCheckAll}
+                    checked={(() => {
+                      const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
                   />
                 </TableHead>
-                <TableHead className="w-[130px]">출고번호</TableHead>
-                <TableHead className="w-[90px]">출고유형</TableHead>
-                <TableHead className="w-[100px]">출고일</TableHead>
-                <TableHead className="w-[120px]">참조번호</TableHead>
-                <TableHead className="w-[80px]">데이터출처</TableHead>
-                <TableHead className="w-[120px]">거래처</TableHead>
-                <TableHead className="w-[100px]">품목코드</TableHead>
-                <TableHead className="min-w-[150px]">품목명</TableHead>
-                <TableHead className="w-[80px]">규격</TableHead>
-                <TableHead className="w-[80px] text-right">출고수량</TableHead>
-                <TableHead className="w-[90px] text-right">단가</TableHead>
-                <TableHead className="w-[100px] text-right">금액</TableHead>
-                <TableHead className="w-[100px]">창고</TableHead>
-                <TableHead className="w-[90px] text-center">출고상태</TableHead>
-                <TableHead className="w-[100px]">비고</TableHead>
+                <TableHead />
+                {/* 출고번호 */}
+                <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                  <div className="inline-flex items-center gap-1">
+                    <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort("outbound_number")}>
+                      <span className="truncate">출고번호</span>
+                      {sortState?.key === "outbound_number" && (
+                        sortState.direction === "asc"
+                          ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                          : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                      )}
+                    </div>
+                    {(masterUniqueValues["outbound_number"] || []).length > 0 && (
+                      <HeaderFilterPopover
+                        colKey="outbound_number" colLabel="출고번호"
+                        uniqueValues={masterUniqueValues["outbound_number"] || []}
+                        filterValues={headerFilters["outbound_number"] || new Set<string>()}
+                        onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                      />
+                    )}
+                  </div>
+                </TableHead>
+                {/* 마스터 필드 헤더 (ts.visibleColumns 순서) */}
+                {visibleMasterLayout.map((col) => (
+                  <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                    <div className="inline-flex items-center gap-1">
+                      <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                        <span className="truncate">{col.label}</span>
+                        {sortState?.key === col.key && (
+                          sortState.direction === "asc"
+                            ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                            : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                        )}
+                      </div>
+                      {(masterUniqueValues[col.key] || []).length > 0 && (
+                        <HeaderFilterPopover
+                          colKey={col.key} colLabel={col.label}
+                          uniqueValues={masterUniqueValues[col.key] || []}
+                          filterValues={headerFilters[col.key] || new Set<string>()}
+                          onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                        />
+                      )}
+                    </div>
+                  </TableHead>
+                ))}
               </TableRow>
             </TableHeader>
             <TableBody>
               {loading ? (
                 <TableRow>
-                  <TableCell colSpan={16} className="h-40 text-center">
-                    <Loader2 className="mx-auto h-6 w-6 animate-spin" />
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
                   </TableCell>
                 </TableRow>
-              ) : data.length === 0 ? (
+              ) : Object.keys(filteredGroups).length === 0 ? (
                 <TableRow>
-                  <TableCell
-                    colSpan={16}
-                    className="text-muted-foreground h-40 text-center"
-                  >
-                    <div className="flex flex-col items-center gap-2">
-                      <PackageOpen className="h-10 w-10 opacity-30" />
-                      <p>등록된 출고 내역이 없습니다</p>
-                      <p className="text-xs">
-                        &apos;출고 등록&apos; 버튼을 클릭하여 출고를 추가하세요
-                      </p>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <PackageOpen className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 출고 내역이 없어요</span>
                     </div>
                   </TableCell>
                 </TableRow>
               ) : (
-                data.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    className={cn(
-                      "cursor-pointer transition-colors",
-                      checkedIds.includes(row.id) && "bg-primary/5"
-                    )}
-                    onClick={() => toggleCheck(row.id)}
-                  >
-                    <TableCell
-                      className="text-center"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Checkbox
-                        checked={checkedIds.includes(row.id)}
-                        onCheckedChange={() => toggleCheck(row.id)}
-                      />
-                    </TableCell>
-                    <TableCell className="max-w-[130px] truncate font-medium" title={row.outbound_number}>
-                      {row.outbound_number}
-                    </TableCell>
-                    <TableCell>
-                      <Badge
-                        variant="outline"
-                        className={cn("text-[11px]", getTypeColor(row.outbound_type))}
-                      >
-                        {row.outbound_type || "-"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.outbound_date
-                        ? new Date(row.outbound_date).toLocaleDateString("ko-KR")
-                        : "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.reference_number || "-"}>
-                      {row.reference_number || "-"}
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.source_type
-                        ? SOURCE_TYPE_LABEL[row.source_type] || row.source_type
-                        : "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.customer_name || "-"}>
-                      {row.customer_name || "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[130px] truncate text-xs" title={row.item_code || "-"}>
-                      {row.item_code || "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[150px] truncate text-xs" title={row.item_name || "-"}>{row.item_name || "-"}</TableCell>
-                    <TableCell className="max-w-[100px] truncate text-xs" title={row.specification || "-"}>{row.specification || "-"}</TableCell>
-                    <TableCell className="text-right text-xs font-semibold">
-                      {Number(row.outbound_qty || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-right text-xs">
-                      {Number(row.unit_price || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-right text-xs font-semibold">
-                      {Number(row.total_amount || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.warehouse_name || row.warehouse_code || "-"}
-                    </TableCell>
-                    <TableCell className="text-center">
-                      <Badge
-                        variant="outline"
+                Object.entries(filteredGroups).map(([outboundNo, group]) => {
+                  const isExpanded = expandedOrders.has(outboundNo);
+                  const detailIds = group.details.map((d) => d.id);
+                  const allDetailChecked = detailIds.length > 0 && detailIds.every((id) => checkedIds.includes(id));
+                  const someDetailChecked = detailIds.some((id) => checkedIds.includes(id));
+                  const master = group.master;
+                  return (
+                    <React.Fragment key={outboundNo}>
+                      {/* 마스터 행 */}
+                      <TableRow
+                        style={{ borderTop: "2px solid hsl(var(--border))" }}
                         className={cn(
-                          "text-[11px]",
-                          getStatusColor(row.outbound_status)
+                          "cursor-pointer border-l-[3px] border-l-transparent font-semibold tree-master-row",
+                          allDetailChecked && "border-l-primary bg-primary/5"
                         )}
+                        onClick={() => {
+                          if (expandedOrders.has(outboundNo)) {
+                            setClosingOrders((prev) => new Set(prev).add(outboundNo));
+                            setTimeout(() => {
+                              setExpandedOrders((prev) => { const next = new Set(prev); next.delete(outboundNo); return next; });
+                              setClosingOrders((prev) => { const next = new Set(prev); next.delete(outboundNo); return next; });
+                            }, 200);
+                          } else {
+                            setExpandedOrders((prev) => new Set(prev).add(outboundNo));
+                          }
+                        }}
+                        onDoubleClick={() => openEditModal(group.details[0])}
                       >
-                        {row.outbound_status || "-"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.memo || "-"}>
-                      {row.memo || "-"}
-                    </TableCell>
-                  </TableRow>
-                ))
+                        <TableCell
+                          className="text-center cursor-pointer"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setCheckedIds((prev) => {
+                              if (allDetailChecked) return prev.filter((id) => !detailIds.includes(id));
+                              return [...new Set([...prev, ...detailIds])];
+                            });
+                          }}
+                        >
+                          <Checkbox
+                            checked={allDetailChecked}
+                            data-state={someDetailChecked && !allDetailChecked ? "indeterminate" : undefined}
+                            onCheckedChange={() => {}}
+                          />
+                        </TableCell>
+                        <TableCell className="text-center">
+                          {isExpanded
+                            ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            : <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          }
+                        </TableCell>
+                        {/* 출고번호 */}
+                        <TableCell className="font-mono whitespace-nowrap">
+                          {outboundNo}
+                          <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
+                        </TableCell>
+                        {/* 마스터 필드 (ts.visibleColumns 순서) */}
+                        {visibleMasterLayout.map((col) => {
+                          switch (col.key) {
+                            case "outbound_type": return (
+                              <TableCell key={col.key}>
+                                <Badge variant="outline" className={cn("text-[11px]", getTypeColor(master.outbound_type))}>
+                                  {master.outbound_type || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "outbound_date": return (
+                              <TableCell key={col.key} className="whitespace-nowrap text-[13px]">
+                                {master.outbound_date ? new Date(master.outbound_date).toLocaleDateString("ko-KR") : "-"}
+                              </TableCell>
+                            );
+                            case "reference_number": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.reference_number || ""}</span>
+                              </TableCell>
+                            );
+                            case "customer_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.customer_name || ""}</span>
+                              </TableCell>
+                            );
+                            case "warehouse_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
+                              </TableCell>
+                            );
+                            case "outbound_status": return (
+                              <TableCell key={col.key}>
+                                <Badge variant="outline" className={cn("text-[11px]", getStatusColor(master.outbound_status))}>
+                                  {master.outbound_status || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "memo": return (
+                              <TableCell key={col.key} className="text-muted-foreground">
+                                <span className="block truncate max-w-[120px]">{master.memo || ""}</span>
+                              </TableCell>
+                            );
+                            default: return <TableCell key={col.key} className="text-[13px]">{(master as any)[col.key] ?? ""}</TableCell>;
+                          }
+                        })}
+                      </TableRow>
+
+                      {/* 디테일 서브 헤더 (펼쳤을 때만) */}
+                      {isExpanded && (
+                        <TableRow
+                          className={cn(
+                            "border-l-[3px] border-l-primary/30 bg-muted/60",
+                            closingOrders.has(outboundNo) ? "tree-detail-row-closing" : "tree-detail-row",
+                          )}
+                        >
+                          <TableCell />
+                          <TableCell />
+                          <TableCell />
+                          {visibleDetailCols.map((col) => {
+                            const isRight = ["outbound_qty", "unit_price", "total_amount"].includes(col.key);
+                            const isSorted = sortState?.key === col.key;
+                            const uniqueVals = Array.from(new Set(
+                              group.details.map((d) => {
+                                let v = (d as any)[col.key];
+                                if (col.key === "source_type") v = SOURCE_TYPE_LABEL[v] || v;
+                                return v;
+                              }).filter((v: any) => v != null && v !== "").map(String)
+                            )).sort();
+                            const filterVals = headerFilters[col.key] || new Set<string>();
+                            return (
+                              <TableCell
+                                key={col.key}
+                                className={cn(
+                                  "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 select-none",
+                                  isRight && "text-right",
+                                )}
+                              >
+                                <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                                  <div
+                                    className="flex items-center gap-1 cursor-pointer min-w-0"
+                                    onClick={() => handleSort(col.key)}
+                                  >
+                                    <span className="truncate">{col.label}</span>
+                                    {isSorted && (
+                                      sortState!.direction === "asc"
+                                        ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                                        : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                                    )}
+                                  </div>
+                                  {uniqueVals.length > 0 && (
+                                    <HeaderFilterPopover
+                                      colKey={col.key} colLabel={col.label}
+                                      uniqueValues={uniqueVals} filterValues={filterVals}
+                                      onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                                    />
+                                  )}
+                                </div>
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                      )}
+
+                      {/* 디테일 행 (펼쳤을 때만) */}
+                      {isExpanded && group.details.map((row, detailIdx) => {
+                        const isClosing = closingOrders.has(outboundNo);
+                        const isChecked = checkedIds.includes(row.id);
+                        return (
+                          <TableRow
+                            key={`${row.id}-${detailIdx}`}
+                            className={cn(
+                              "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                              isClosing ? "tree-detail-row-closing" : "tree-detail-row",
+                              isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                            )}
+                            onClick={() => {
+                              setCheckedIds((prev) =>
+                                prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                              );
+                            }}
+                            onDoubleClick={() => openEditModal(row)}
+                          >
+                            <TableCell
+                              className="text-center cursor-pointer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                            >
+                              <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                            </TableCell>
+                            <TableCell className="relative">
+                              <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
+                            </TableCell>
+                            <TableCell />
+                            {visibleDetailCols.map((col) => {
+                              switch (col.key) {
+                                case "source_type": return <TableCell key={col.key} className="text-[13px]">{row.source_type ? (SOURCE_TYPE_LABEL[row.source_type] || row.source_type) : "-"}</TableCell>;
+                                case "item_code": return <TableCell key={col.key} className="font-mono text-[13px]">{row.item_code || ""}</TableCell>;
+                                case "item_name": return <TableCell key={col.key} className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>;
+                                case "specification": return <TableCell key={col.key} className="text-[13px] text-muted-foreground">{row.specification || ""}</TableCell>;
+                                case "outbound_qty": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.outbound_qty ? Number(row.outbound_qty).toLocaleString() : ""}</TableCell>;
+                                case "unit_price": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>;
+                                case "total_amount": return <TableCell key={col.key} className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>;
+                                default: return <TableCell key={col.key} className="text-[13px]">{(row as any)[col.key] ?? ""}</TableCell>;
+                              }
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                    </React.Fragment>
+                  );
+                })
               )}
             </TableBody>
           </Table>
@@ -716,56 +1241,16 @@ export default function OutboundPage() {
       </div>
 
       {/* 출고 등록 모달 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title="출고 등록"
-        description="출고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가하세요."
-        defaultMaxWidth="sm:max-w-[1600px]"
-        defaultWidth="w-[95vw]"
-        className="h-[90vh] p-0"
-        contentClassName="overflow-hidden flex flex-col"
-        footer={
-          <div className="flex w-full items-center justify-between px-6 py-3">
-            <div className="text-muted-foreground text-xs">
-              {selectedItems.length > 0 ? (
-                <>
-                  {totalSummary.count}건 | 수량 합계:{" "}
-                  {totalSummary.qty.toLocaleString()} | 금액 합계:{" "}
-                  {totalSummary.amount.toLocaleString()}원
-                </>
-              ) : (
-                "품목을 추가해주세요"
-              )}
-            </div>
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setIsModalOpen(false)}
-                className="h-9 text-sm"
-              >
-                취소
-              </Button>
-              <Button
-                onClick={handleSave}
-                disabled={saving || selectedItems.length === 0}
-                className="h-9 text-sm"
-              >
-                {saving ? (
-                  <Loader2 className="mr-1 h-4 w-4 animate-spin" />
-                ) : (
-                  <Save className="mr-1 h-4 w-4" />
-                )}
-                저장
-              </Button>
-            </div>
-          </div>
-        }
-      >
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="flex flex-col gap-0 p-0 sm:max-w-[1600px] w-[95vw] h-[90vh] overflow-hidden">
+          <DialogHeader className="shrink-0 border-b px-6 py-4">
+            <DialogTitle>{editMode ? "출고 수정" : "출고 등록"}</DialogTitle>
+            <DialogDescription>{editMode ? "출고 정보를 수정해주세요." : "출고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가해주세요."}</DialogDescription>
+          </DialogHeader>
 
           {/* 출고유형 선택 */}
-          <div className="flex items-center gap-4 border-b px-6 py-3">
-            <Label className="text-sm font-semibold">출고유형</Label>
+          <div className="flex shrink-0 items-center gap-4 border-b bg-muted/30 px-6 py-3">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고유형</span>
             <Select value={modalOutboundType} onValueChange={handleOutboundTypeChange}>
               <SelectTrigger className="h-9 w-[160px] text-sm">
                 <SelectValue />
@@ -780,10 +1265,10 @@ export default function OutboundPage() {
             </Select>
             <span className="text-muted-foreground ml-auto text-xs italic">
               {modalOutboundType === "판매출고"
-                ? "출하지시 데이터에서 출고 처리합니다."
+                ? "출하지시 데이터에서 출고 처리해요"
                 : modalOutboundType === "반품출고"
-                  ? "발주(입고) 데이터에서 반품 출고 처리합니다."
-                  : "품목 데이터를 직접 선택하여 출고 처리합니다."}
+                  ? "발주(입고) 데이터에서 반품 출고 처리해요"
+                  : "품목 데이터를 직접 선택하여 출고 처리해요"}
             </span>
           </div>
 
@@ -813,17 +1298,21 @@ export default function OutboundPage() {
                     </Button>
                   </div>
 
-                  <div className="flex items-center justify-between border-b px-4 py-2 shrink-0">
-                    <h4 className="text-muted-foreground text-xs font-semibold">
-                      {modalOutboundType === "판매출고"
-                        ? "미출고 출하지시 목록"
-                        : modalOutboundType === "반품출고"
-                          ? "입고된 발주 목록"
-                          : "품목 목록"}
-                    </h4>
-                    {sourceTotalCount > 0 && (
-                      <span className="text-muted-foreground text-[11px]">총 {sourceTotalCount}건</span>
-                    )}
+                  <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2 shrink-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                        {modalOutboundType === "판매출고"
+                          ? "미출고 출하지시 목록"
+                          : modalOutboundType === "반품출고"
+                            ? "입고된 발주 목록"
+                            : "품목 목록"}
+                      </span>
+                      {sourceTotalCount > 0 && (
+                        <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                          {sourceTotalCount}건
+                        </span>
+                      )}
+                    </div>
                   </div>
 
                   <div className="flex-1 overflow-auto">
@@ -899,20 +1388,20 @@ export default function OutboundPage() {
               <ResizablePanel defaultSize={40} minSize={25}>
                 <div className="flex h-full flex-col">
                   <div className="space-y-3 border-b bg-muted/30 px-4 py-3">
-                    <h4 className="text-sm font-semibold">출고 정보</h4>
+                    <h4 className="text-[13px] font-bold text-foreground">출고 정보</h4>
                     <div className="grid grid-cols-2 gap-3">
-                      <div>
-                        <Label className="text-[11px]">출고번호</Label>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고번호</span>
                         <Input
                           value={modalOutboundNo}
                           readOnly
-                          className="bg-muted h-8 text-xs"
+                          className="bg-muted cursor-not-allowed h-8 font-mono text-xs"
                         />
                       </div>
-                      <div>
-                        <Label className="text-[11px]">
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                           출고일 <span className="text-destructive">*</span>
-                        </Label>
+                        </span>
                         <Input
                           type="date"
                           value={modalOutboundDate}
@@ -920,9 +1409,17 @@ export default function OutboundPage() {
                           className="h-8 text-xs"
                         />
                       </div>
-                      <div>
-                        <Label className="text-[11px]">창고</Label>
-                        <Select value={modalWarehouse} onValueChange={setModalWarehouse}>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">창고</span>
+                        <Select value={modalWarehouse} onValueChange={(v) => {
+                          setModalWarehouse(v);
+                          setModalLocation("");
+                          if (v) {
+                            getOutboundLocations(v).then((r) => { if (r.success) setLocations(r.data); }).catch(() => {});
+                          } else {
+                            setLocations([]);
+                          }
+                        }}>
                           <SelectTrigger className="h-8 text-xs">
                             <SelectValue placeholder="창고 선택" />
                           </SelectTrigger>
@@ -935,17 +1432,24 @@ export default function OutboundPage() {
                           </SelectContent>
                         </Select>
                       </div>
-                      <div>
-                        <Label className="text-[11px]">위치</Label>
-                        <Input
-                          value={modalLocation}
-                          onChange={(e) => setModalLocation(e.target.value)}
-                          placeholder="위치 입력"
-                          className="h-8 text-xs"
-                        />
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">위치</span>
+                        <Select value={modalLocation || "__none__"} onValueChange={(v) => setModalLocation(v === "__none__" ? "" : v)}>
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="위치 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="__none__">위치 선택</SelectItem>
+                            {locations.map((l) => (
+                              <SelectItem key={l.location_code} value={l.location_code}>
+                                {l.location_name || l.location_code}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
                       </div>
-                      <div>
-                        <Label className="text-[11px]">담당자</Label>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자</span>
                         <Input
                           value={modalManager}
                           onChange={(e) => setModalManager(e.target.value)}
@@ -953,8 +1457,8 @@ export default function OutboundPage() {
                           className="h-8 text-xs"
                         />
                       </div>
-                      <div>
-                        <Label className="text-[11px]">메모</Label>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">메모</span>
                         <Input
                           value={modalMemo}
                           onChange={(e) => setModalMemo(e.target.value)}
@@ -966,25 +1470,29 @@ export default function OutboundPage() {
                   </div>
 
                   <div className="flex-1 overflow-auto px-4 py-2">
-                    <h4 className="text-muted-foreground mb-2 text-xs font-semibold">
-                      출고 처리 품목 ({selectedItems.length}건)
-                    </h4>
+                    <div className="mb-2 flex items-center gap-2">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고 처리 품목</span>
+                      <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                        {selectedItems.length}건
+                      </span>
+                    </div>
 
                     {selectedItems.length === 0 ? (
-                      <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-xs">
-                        <PackageOpen className="mb-2 h-8 w-8 opacity-30" />
+                      <div className="flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+                        <PackageOpen className="h-8 w-8 text-muted-foreground/30" />
                         좌측에서 품목을 선택하여 추가해주세요
                       </div>
                     ) : (
                       <Table>
-                        <TableHeader>
-                          <TableRow className="text-[11px]">
-                            <TableHead className="w-[30px] p-2">No</TableHead>
-                            <TableHead className="p-2">품목명</TableHead>
-                            <TableHead className="p-2">참조번호</TableHead>
-                            <TableHead className="w-[80px] p-2 text-right">수량</TableHead>
-                            <TableHead className="w-[80px] p-2 text-right">단가</TableHead>
-                            <TableHead className="w-[90px] p-2 text-right">금액</TableHead>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출고유형</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
                             <TableHead className="w-[30px] p-2" />
                           </TableRow>
                         </TableHeader>
@@ -992,6 +1500,11 @@ export default function OutboundPage() {
                           {selectedItems.map((item, idx) => (
                             <TableRow key={item.key} className="text-xs">
                               <TableCell className="p-2 text-center">{idx + 1}</TableCell>
+                              <TableCell className="p-2">
+                                <Badge variant="outline" className={cn("text-[10px]", getTypeColor(item.outbound_type))}>
+                                  {item.outbound_type || "-"}
+                                </Badge>
+                              </TableCell>
                               <TableCell className="max-w-[180px] p-2">
                                 <div className="flex flex-col">
                                   <span className="truncate font-medium" title={item.item_name}>
@@ -1022,7 +1535,7 @@ export default function OutboundPage() {
                                   min={0}
                                 />
                               </TableCell>
-                              <TableCell className="p-2 text-right text-xs font-semibold">
+                              <TableCell className="p-2 text-right text-[13px] font-semibold">
                                 {item.total_amount.toLocaleString()}
                               </TableCell>
                               <TableCell className="p-2 text-center">
@@ -1046,7 +1559,53 @@ export default function OutboundPage() {
             </ResizablePanelGroup>
           </div>
 
-      </FullscreenDialog>
+          <div className="shrink-0 border-t">
+            <div className="flex w-full items-center justify-between px-6 py-3">
+              <div className="text-muted-foreground text-xs">
+                {selectedItems.length > 0 ? (
+                  <>
+                    {totalSummary.count}건 | 수량 합계:{" "}
+                    {totalSummary.qty.toLocaleString()} | 금액 합계:{" "}
+                    {totalSummary.amount.toLocaleString()}원
+                  </>
+                ) : (
+                  "품목을 추가해주세요"
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsModalOpen(false)}
+                  className="h-9 text-sm"
+                >
+                  취소
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={saving || selectedItems.length === 0}
+                  className="h-9 text-sm"
+                >
+                  {saving ? (
+                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="mr-1 h-4 w-4" />
+                  )}
+                  저장
+                </Button>
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
@@ -1064,23 +1623,24 @@ function SourceShipmentInstructionTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 출하지시 데이터를 조회하세요
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 출하지시 데이터를 조회해주세요
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader>
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">출하지시번호</TableHead>
-          <TableHead className="p-2">출하일</TableHead>
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">계획수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">출고수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">미출고</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하지시번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하일</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출고수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">미출고</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -1123,7 +1683,7 @@ function SourceShipmentInstructionTable({
               <TableCell className="p-2 text-right">
                 {Number(si.ship_qty).toLocaleString()}
               </TableCell>
-              <TableCell className="p-2 text-right font-semibold text-blue-600">
+              <TableCell className="p-2 text-right font-semibold text-primary">
                 {Number(si.remain_qty).toLocaleString()}
               </TableCell>
             </TableRow>
@@ -1145,22 +1705,23 @@ function SourcePurchaseOrderTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 발주 데이터를 조회하세요
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 발주 데이터를 조회해주세요
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader>
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">발주번호</TableHead>
-          <TableHead className="p-2">공급처</TableHead>
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">발주수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">입고수량</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -1196,7 +1757,7 @@ function SourcePurchaseOrderTable({
               <TableCell className="p-2 text-right">
                 {Number(po.order_qty).toLocaleString()}
               </TableCell>
-              <TableCell className="p-2 text-right font-semibold text-blue-600">
+              <TableCell className="p-2 text-right font-semibold text-primary">
                 {Number(po.received_qty).toLocaleString()}
               </TableCell>
             </TableRow>
@@ -1218,22 +1779,23 @@ function SourceItemTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 품목 데이터를 조회하세요
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 품목 데이터를 조회해주세요
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader>
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[80px] p-2">규격</TableHead>
-          <TableHead className="w-[80px] p-2">재질</TableHead>
-          <TableHead className="w-[60px] p-2">단위</TableHead>
-          <TableHead className="w-[80px] p-2 text-right">기준가</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+          <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
diff --git a/frontend/app/(main)/COMPANY_29/logistics/packaging/page.tsx b/frontend/app/(main)/COMPANY_29/logistics/packaging/page.tsx
index 79059277..6ae340aa 100644
--- a/frontend/app/(main)/COMPANY_29/logistics/packaging/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/logistics/packaging/page.tsx
@@ -4,23 +4,18 @@ import React, { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Badge } from "@/components/ui/badge";
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from "@/components/ui/select";
 import {
   Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from "@/components/ui/table";
-import {
-  ResizableHandle, ResizablePanel, ResizablePanelGroup,
-} from "@/components/ui/resizable";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Command, CommandInput, CommandList, CommandEmpty, CommandItem } from "@/components/ui/command";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import {
-  Search, Plus, Trash2, RotateCcw, Loader2, Package, Box, X, Save, Edit2, Download, ChevronsUpDown, Check,
+  Plus, Trash2, Loader2, Package, Box, X, Save, Edit2, Download, ChevronsUpDown, Check, Inbox, Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
@@ -32,6 +27,19 @@ import {
   getItemsByDivision, getGeneralItems,
   type PkgUnit, type PkgUnitItem, type LoadingUnit, type LoadingUnitPkg, type ItemInfoForPkg,
 } from "@/lib/api/packaging";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "pkg_code", label: "품목코드" },
+  { key: "pkg_name", label: "포장명" },
+  { key: "pkg_type", label: "유형" },
+  { key: "size", label: "크기(mm)" },
+  { key: "max_weight", label: "최대중량" },
+  { key: "status", label: "상태" },
+];
 
 // --- 코드 → 라벨 매핑 ---
 const PKG_TYPE_LABEL: Record<string, string> = {
@@ -45,7 +53,7 @@ const LOADING_TYPE_LABEL: Record<string, string> = {
 };
 const STATUS_LABEL: Record<string, string> = { ACTIVE: "사용", INACTIVE: "미사용" };
 
-const getStatusColor = (s: string) => s === "ACTIVE" ? "bg-emerald-100 text-emerald-800" : "bg-gray-100 text-gray-600";
+const getStatusColor = (s: string) => s === "ACTIVE" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground";
 const fmtSize = (w: any, l: any, h: any) => {
   const vals = [w, l, h].map(v => Number(v) || 0);
   return vals.some(v => v > 0) ? vals.join("×") : "-";
@@ -62,11 +70,12 @@ function parseSpecDimensions(spec: string | null) {
 }
 
 export default function PackagingPage() {
+  const ts = useTableSettings("c16-packaging", "pkg_unit", GRID_COLUMNS);
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
   const [activeTab, setActiveTab] = useState<"packing" | "loading">("packing");
 
-  // 검색
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 포장재 데이터
   const [pkgUnits, setPkgUnits] = useState<PkgUnit[]>([]);
@@ -150,15 +159,21 @@ export default function PackagingPage() {
 
   // 검색 필터 적용
   const filteredPkgUnits = pkgUnits.filter((p) => {
-    if (!searchKeyword) return true;
-    const kw = searchKeyword.toLowerCase();
-    return (p.pkg_code?.toLowerCase().includes(kw) || p.pkg_name?.toLowerCase().includes(kw));
+    if (searchFilters.length === 0) return true;
+    return searchFilters.every((f) => {
+      if (!f.value) return true;
+      const kw = f.value.toLowerCase();
+      return Object.values(p).some((v) => String(v ?? "").toLowerCase().includes(kw));
+    });
   });
 
   const filteredLoadingUnits = loadingUnits.filter((l) => {
-    if (!searchKeyword) return true;
-    const kw = searchKeyword.toLowerCase();
-    return (l.loading_code?.toLowerCase().includes(kw) || l.loading_name?.toLowerCase().includes(kw));
+    if (searchFilters.length === 0) return true;
+    return searchFilters.every((f) => {
+      if (!f.value) return true;
+      const kw = f.value.toLowerCase();
+      return Object.values(l).some((v) => String(v ?? "").toLowerCase().includes(kw));
+    });
   });
 
   // --- 포장재 등록/수정 모달 ---
@@ -344,444 +359,498 @@ export default function PackagingPage() {
   };
 
   return (
-    <div className="flex h-full flex-col gap-3 p-4">
-      {/* 검색 바 */}
-      <div className="flex items-center gap-2 rounded-lg border bg-card p-3">
-        <Input
-          placeholder="포장코드 / 포장명 / 적재함명 검색"
-          value={searchKeyword}
-          onChange={(e) => setSearchKeyword(e.target.value)}
-          className="h-9 w-[280px] text-xs"
-        />
-        <Button size="sm" variant="outline" onClick={() => setSearchKeyword("")} className="h-9">
-          <RotateCcw className="mr-1 h-4 w-4" /> 초기화
-        </Button>
-      </div>
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-4">
 
-      {/* 탭 */}
-      <div className="flex gap-1 border-b">
-        {([["packing", "포장재 관리", filteredPkgUnits.length] as const, ["loading", "적재함 관리", filteredLoadingUnits.length] as const]).map(([tab, label, count]) => (
+      {/* 1. 필터 바 */}
+      <DynamicSearchFilter
+        tableName="pkg_unit"
+        filterId="c16-packaging"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={activeTab === "packing" ? filteredPkgUnits.length : filteredLoadingUnits.length}
+      />
+
+      {/* 2. 탭 바 */}
+      <div className="flex shrink-0 gap-1 border-b">
+        {(
+          [
+            ["packing", "포장재 관리", filteredPkgUnits.length],
+            ["loading", "적재함 관리", filteredLoadingUnits.length],
+          ] as const
+        ).map(([tab, label, count]) => (
           <button
             key={tab}
-            onClick={() => setActiveTab(tab)}
+            onClick={() => {
+              setActiveTab(tab);
+              if (tab === "packing") { setSelectedLoading(null); setLoadingPkgs([]); }
+              else { setSelectedPkg(null); setPkgItems([]); }
+            }}
             className={cn(
-              "flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px",
-              activeTab === tab ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"
+              "-mb-px flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors",
+              activeTab === tab
+                ? "border-primary text-primary"
+                : "border-transparent text-muted-foreground hover:text-foreground"
             )}
           >
             {tab === "packing" ? <Package className="h-4 w-4" /> : <Box className="h-4 w-4" />}
             {label}
-            <Badge variant="secondary" className="text-[10px] px-1.5">{count}</Badge>
+            <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+              {count}
+            </span>
           </button>
         ))}
       </div>
 
-      {/* 탭 콘텐츠 */}
-      <div className="flex-1 overflow-hidden">
-        {activeTab === "packing" ? (
-          <ResizablePanelGroup direction="horizontal" className="h-full rounded-lg border">
-            {/* 좌측: 포장재 목록 */}
-            <ResizablePanel defaultSize={45} minSize={30}>
-              <div className="flex h-full flex-col">
-                <div className="flex items-center justify-between border-b px-4 py-2.5">
-                  <span className="text-sm font-semibold">포장재 목록 <span className="text-muted-foreground font-normal">({filteredPkgUnits.length}건)</span></span>
-                  <div className="flex gap-1">
-                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openPkgModal("create")}>
-                      <Plus className="mr-1 h-3 w-3" /> 등록
-                    </Button>
-                  </div>
-                </div>
-                <div className="flex-1 overflow-auto">
-                  <Table>
-                    <TableHeader>
-                      <TableRow className="text-[11px] bg-muted/50">
-                        <TableHead className="p-2">품목코드</TableHead>
-                        <TableHead className="p-2">포장명</TableHead>
-                        <TableHead className="p-2 w-[70px]">유형</TableHead>
-                        <TableHead className="p-2 w-[90px]">크기(mm)</TableHead>
-                        <TableHead className="p-2 w-[70px] text-right">최대중량</TableHead>
-                        <TableHead className="p-2 w-[55px] text-center">상태</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {pkgLoading ? (
-                        <TableRow><TableCell colSpan={6} className="h-32 text-center"><Loader2 className="mx-auto h-5 w-5 animate-spin" /></TableCell></TableRow>
-                      ) : filteredPkgUnits.length === 0 ? (
-                        <TableRow><TableCell colSpan={6} className="h-32 text-center text-muted-foreground text-xs">등록된 포장재가 없습니다</TableCell></TableRow>
-                      ) : filteredPkgUnits.map((p) => (
-                        <TableRow
-                          key={p.id}
-                          className={cn("cursor-pointer text-xs", selectedPkg?.id === p.id && "bg-primary/5")}
-                          onClick={() => selectPkg(p)}
-                        >
-                          <TableCell className="p-2 font-medium truncate max-w-[100px]">{p.pkg_code}</TableCell>
-                          <TableCell className="p-2 truncate max-w-[120px]">{p.pkg_name}</TableCell>
-                          <TableCell className="p-2">{PKG_TYPE_LABEL[p.pkg_type] || p.pkg_type || "-"}</TableCell>
-                          <TableCell className="p-2 text-[10px]">{fmtSize(p.width_mm, p.length_mm, p.height_mm)}</TableCell>
-                          <TableCell className="p-2 text-right">{Number(p.max_load_kg || 0) > 0 ? `${p.max_load_kg}kg` : "-"}</TableCell>
-                          <TableCell className="p-2 text-center">
-                            <Badge variant="outline" className={cn("text-[10px]", getStatusColor(p.status))}>{STATUS_LABEL[p.status] || p.status}</Badge>
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </div>
-              </div>
-            </ResizablePanel>
-            <ResizableHandle withHandle />
-            {/* 우측: 상세 */}
-            <ResizablePanel defaultSize={55} minSize={30}>
-              {!selectedPkg ? (
-                <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
-                  <Package className="h-12 w-12 opacity-20 mb-2" />
-                  <p className="text-sm">좌측 목록에서 포장재를 선택하세요</p>
-                </div>
-              ) : (
-                <div className="flex h-full flex-col">
-                  {/* 요약 헤더 */}
-                  <div className="flex items-center justify-between border-b bg-blue-50 dark:bg-blue-950/20 px-4 py-3">
-                    <div className="flex items-center gap-3">
-                      <Package className="h-5 w-5 text-blue-600" />
-                      <div>
-                        <div className="font-bold text-sm">{selectedPkg.pkg_name}</div>
-                        <div className="text-[11px] text-muted-foreground">{selectedPkg.pkg_code} · {PKG_TYPE_LABEL[selectedPkg.pkg_type] || selectedPkg.pkg_type} · {fmtSize(selectedPkg.width_mm, selectedPkg.length_mm, selectedPkg.height_mm)}mm</div>
-                      </div>
-                    </div>
-                    <div className="flex gap-1">
-                      <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openPkgModal("edit")}>
-                        <Edit2 className="mr-1 h-3 w-3" /> 수정
-                      </Button>
-                      <Button size="sm" variant="destructive" className="h-7 text-xs" onClick={() => handleDeletePkg(selectedPkg)}>
-                        <Trash2 className="mr-1 h-3 w-3" /> 삭제
-                      </Button>
-                    </div>
-                  </div>
-                  {/* 매칭 품목 */}
-                  <div className="flex items-center justify-between px-4 py-2 border-b">
-                    <span className="text-xs font-semibold text-muted-foreground">매칭 품목 ({pkgItems.length}건)</span>
-                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openItemMatchModal}>
-                      <Plus className="mr-1 h-3 w-3" /> 품목 추가
-                    </Button>
-                  </div>
-                  <div className="flex-1 overflow-auto">
-                    {pkgItemsLoading ? (
-                      <div className="flex h-32 items-center justify-center"><Loader2 className="h-5 w-5 animate-spin" /></div>
-                    ) : pkgItems.length === 0 ? (
-                      <div className="flex h-32 items-center justify-center text-muted-foreground text-xs">매칭된 품목이 없습니다</div>
-                    ) : (
-                      <Table>
-                        <TableHeader>
-                          <TableRow className="text-[11px]">
-                            <TableHead className="p-2">품목코드</TableHead>
-                            <TableHead className="p-2">품목명</TableHead>
-                            <TableHead className="p-2 w-[70px]">규격</TableHead>
-                            <TableHead className="p-2 w-[50px]">단위</TableHead>
-                            <TableHead className="p-2 w-[80px] text-right">포장수량</TableHead>
-                            <TableHead className="p-2 w-[40px]" />
-                          </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                          {pkgItems.map((item) => (
-                            <TableRow key={item.id} className="text-xs">
-                              <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
-                              <TableCell className="p-2">{item.item_name || "-"}</TableCell>
-                              <TableCell className="p-2">{item.spec || "-"}</TableCell>
-                              <TableCell className="p-2">{item.unit || "EA"}</TableCell>
-                              <TableCell className="p-2 text-right font-semibold">{Number(item.pkg_qty).toLocaleString()}</TableCell>
-                              <TableCell className="p-2 text-center">
-                                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeletePkgItem(item)}>
-                                  <X className="h-3 w-3" />
-                                </Button>
-                              </TableCell>
-                            </TableRow>
-                          ))}
-                        </TableBody>
-                      </Table>
-                    )}
-                  </div>
-                </div>
-              )}
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        ) : (
-          /* 적재함 관리 탭 */
-          <ResizablePanelGroup direction="horizontal" className="h-full rounded-lg border">
-            <ResizablePanel defaultSize={45} minSize={30}>
-              <div className="flex h-full flex-col">
-                <div className="flex items-center justify-between border-b px-4 py-2.5">
-                  <span className="text-sm font-semibold">적재함 목록 <span className="text-muted-foreground font-normal">({filteredLoadingUnits.length}건)</span></span>
-                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openLoadModal("create")}>
-                    <Plus className="mr-1 h-3 w-3" /> 등록
-                  </Button>
-                </div>
-                <div className="flex-1 overflow-auto">
-                  <Table>
-                    <TableHeader>
-                      <TableRow className="text-[11px] bg-muted/50">
-                        <TableHead className="p-2">품목코드</TableHead>
-                        <TableHead className="p-2">적재함명</TableHead>
-                        <TableHead className="p-2 w-[80px]">유형</TableHead>
-                        <TableHead className="p-2 w-[90px]">크기(mm)</TableHead>
-                        <TableHead className="p-2 w-[70px] text-right">최대적재</TableHead>
-                        <TableHead className="p-2 w-[55px] text-center">상태</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {loadingLoading ? (
-                        <TableRow><TableCell colSpan={6} className="h-32 text-center"><Loader2 className="mx-auto h-5 w-5 animate-spin" /></TableCell></TableRow>
-                      ) : filteredLoadingUnits.length === 0 ? (
-                        <TableRow><TableCell colSpan={6} className="h-32 text-center text-muted-foreground text-xs">등록된 적재함이 없습니다</TableCell></TableRow>
-                      ) : filteredLoadingUnits.map((l) => (
-                        <TableRow
-                          key={l.id}
-                          className={cn("cursor-pointer text-xs", selectedLoading?.id === l.id && "bg-primary/5")}
-                          onClick={() => selectLoading(l)}
-                        >
-                          <TableCell className="p-2 font-medium truncate max-w-[100px]">{l.loading_code}</TableCell>
-                          <TableCell className="p-2 truncate max-w-[120px]">{l.loading_name}</TableCell>
-                          <TableCell className="p-2">{LOADING_TYPE_LABEL[l.loading_type] || l.loading_type || "-"}</TableCell>
-                          <TableCell className="p-2 text-[10px]">{fmtSize(l.width_mm, l.length_mm, l.height_mm)}</TableCell>
-                          <TableCell className="p-2 text-right">{Number(l.max_load_kg || 0) > 0 ? `${l.max_load_kg}kg` : "-"}</TableCell>
-                          <TableCell className="p-2 text-center">
-                            <Badge variant="outline" className={cn("text-[10px]", getStatusColor(l.status))}>{STATUS_LABEL[l.status] || l.status}</Badge>
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </div>
-              </div>
-            </ResizablePanel>
-            <ResizableHandle withHandle />
-            <ResizablePanel defaultSize={55} minSize={30}>
-              {!selectedLoading ? (
-                <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
-                  <Box className="h-12 w-12 opacity-20 mb-2" />
-                  <p className="text-sm">좌측 목록에서 적재함을 선택하세요</p>
-                </div>
-              ) : (
-                <div className="flex h-full flex-col">
-                  <div className="flex items-center justify-between border-b bg-green-50 dark:bg-green-950/20 px-4 py-3">
-                    <div className="flex items-center gap-3">
-                      <Box className="h-5 w-5 text-green-600" />
-                      <div>
-                        <div className="font-bold text-sm">{selectedLoading.loading_name}</div>
-                        <div className="text-[11px] text-muted-foreground">{selectedLoading.loading_code} · {LOADING_TYPE_LABEL[selectedLoading.loading_type] || selectedLoading.loading_type} · {fmtSize(selectedLoading.width_mm, selectedLoading.length_mm, selectedLoading.height_mm)}mm</div>
-                      </div>
-                    </div>
-                    <div className="flex gap-1">
-                      <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openLoadModal("edit")}><Edit2 className="mr-1 h-3 w-3" /> 수정</Button>
-                      <Button size="sm" variant="destructive" className="h-7 text-xs" onClick={() => handleDeleteLoading(selectedLoading)}><Trash2 className="mr-1 h-3 w-3" /> 삭제</Button>
-                    </div>
-                  </div>
-                  <div className="flex items-center justify-between px-4 py-2 border-b">
-                    <span className="text-xs font-semibold text-muted-foreground">적재 가능 포장단위 ({loadingPkgs.length}건)</span>
-                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openPkgMatchModal}><Plus className="mr-1 h-3 w-3" /> 포장단위 추가</Button>
-                  </div>
-                  <div className="flex-1 overflow-auto">
-                    {loadingPkgsLoading ? (
-                      <div className="flex h-32 items-center justify-center"><Loader2 className="h-5 w-5 animate-spin" /></div>
-                    ) : loadingPkgs.length === 0 ? (
-                      <div className="flex h-32 items-center justify-center text-muted-foreground text-xs">등록된 포장단위가 없습니다</div>
-                    ) : (
-                      <Table>
-                        <TableHeader>
-                          <TableRow className="text-[11px]">
-                            <TableHead className="p-2">포장코드</TableHead>
-                            <TableHead className="p-2">포장명</TableHead>
-                            <TableHead className="p-2 w-[70px]">유형</TableHead>
-                            <TableHead className="p-2 w-[80px] text-right">최대수량</TableHead>
-                            <TableHead className="p-2 w-[70px]">적재방향</TableHead>
-                            <TableHead className="p-2 w-[40px]" />
-                          </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                          {loadingPkgs.map((lp) => (
-                            <TableRow key={lp.id} className="text-xs">
-                              <TableCell className="p-2 font-medium">{lp.pkg_code}</TableCell>
-                              <TableCell className="p-2">{lp.pkg_name || "-"}</TableCell>
-                              <TableCell className="p-2">{PKG_TYPE_LABEL[lp.pkg_type || ""] || lp.pkg_type || "-"}</TableCell>
-                              <TableCell className="p-2 text-right font-semibold">{Number(lp.max_load_qty).toLocaleString()}</TableCell>
-                              <TableCell className="p-2">{lp.load_method || "-"}</TableCell>
-                              <TableCell className="p-2 text-center">
-                                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeleteLoadPkg(lp)}><X className="h-3 w-3" /></Button>
-                              </TableCell>
-                            </TableRow>
-                          ))}
-                        </TableBody>
-                      </Table>
-                    )}
-                  </div>
-                </div>
-              )}
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        )}
+      {/* 3. 액션 바 */}
+      <div className="flex shrink-0 items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold">
+            {activeTab === "packing" ? "포장재 목록" : "적재함 목록"}
+          </h3>
+          {(activeTab === "packing" ? pkgLoading : loadingLoading) && (
+            <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+          )}
+        </div>
+        <div className="flex items-center gap-1.5">
+          {activeTab === "packing" && selectedPkg && (
+            <>
+              <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openPkgModal("edit")}>
+                <Edit2 className="mr-1 h-3 w-3" /> 수정
+              </Button>
+              <Button
+                size="sm" variant="outline"
+                className="h-7 text-xs text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                onClick={() => handleDeletePkg(selectedPkg)}
+              >
+                <Trash2 className="mr-1 h-3 w-3" /> 삭제
+              </Button>
+              <div className="h-4 w-px bg-border" />
+            </>
+          )}
+          {activeTab === "loading" && selectedLoading && (
+            <>
+              <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openLoadModal("edit")}>
+                <Edit2 className="mr-1 h-3 w-3" /> 수정
+              </Button>
+              <Button
+                size="sm" variant="outline"
+                className="h-7 text-xs text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                onClick={() => handleDeleteLoading(selectedLoading)}
+              >
+                <Trash2 className="mr-1 h-3 w-3" /> 삭제
+              </Button>
+              <div className="h-4 w-px bg-border" />
+            </>
+          )}
+          <Button
+            size="sm"
+            onClick={() => activeTab === "packing" ? openPkgModal("create") : openLoadModal("create")}
+          >
+            <Plus className="mr-1 h-3.5 w-3.5" /> 등록
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
       </div>
 
-      {/* 포장재 등록/수정 모달 */}
-      <FullscreenDialog open={pkgModalOpen} onOpenChange={setPkgModalOpen}
-        title={pkgModalMode === "create" ? "포장재 등록" : "포장재 수정"}
-        description="품목정보에서 포장재를 선택하면 코드와 이름이 자동 연동됩니다."
-        footer={
-          <div className="flex gap-2">
-            <Button variant="outline" onClick={() => setPkgModalOpen(false)}>취소</Button>
-            <Button onClick={savePkgUnit} disabled={saving}>{saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장</Button>
+      {/* 4. 콘텐츠 영역 */}
+      {activeTab === "packing" ? (
+        <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+          {/* 포장재 목록 테이블 */}
+          <div className={cn("overflow-auto", selectedPkg ? "flex-[0_0_50%] border-b" : "flex-1")}>
+            <EDataTable
+              columns={ts.visibleColumns.map((col): EDataTableColumn<PkgUnit> => {
+                const renderMap: Record<string, Partial<EDataTableColumn<PkgUnit>>> = {
+                  pkg_type: { width: "w-[80px]", render: (v: any) => PKG_TYPE_LABEL[v] || v || "-" },
+                  size: { width: "w-[100px]", render: (_v: any, row: any) => fmtSize(row.width_mm, row.length_mm, row.height_mm) },
+                  max_weight: { width: "w-[80px]", align: "right", render: (v: any) => Number(v || 0) > 0 ? `${v}kg` : "-" },
+                  max_load_kg: { width: "w-[80px]", align: "right", render: (v: any) => Number(v || 0) > 0 ? `${v}kg` : "-" },
+                  status: { width: "w-[60px]", align: "center", render: (v: any) => (
+                    <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(v))}>
+                      {STATUS_LABEL[v] || v}
+                    </span>
+                  )},
+                };
+                return { key: col.key, label: col.label, ...renderMap[col.key] };
+              })}
+              data={ts.groupData(filteredPkgUnits)}
+              rowKey={(row) => String(row.id)}
+              loading={pkgLoading}
+              emptyMessage="등록된 포장재가 없어요"
+              selectedId={selectedPkg ? String(selectedPkg.id) : null}
+              onSelect={(id) => {
+                const pkg = filteredPkgUnits.find((p) => String(p.id) === id);
+                if (pkg) selectPkg(pkg);
+              }}
+              showPagination={false}
+              draggableColumns
+              columnOrderKey="c16-packaging-pkg"
+            />
           </div>
-        }
-      >
-        <div className="space-y-4 p-6">
-          {/* 품목정보 연결 */}
-          {pkgModalMode === "create" && (
-            <div className="rounded-lg border bg-blue-50 dark:bg-blue-950/20 p-4">
-              <Label className="text-xs font-semibold mb-2 block">품목정보 연결 (구분: 포장재)</Label>
-              <Popover open={pkgItemPopoverOpen} onOpenChange={setPkgItemPopoverOpen}>
-                <PopoverTrigger asChild>
-                  <Button variant="outline" role="combobox" className="w-full justify-between h-9 text-sm font-normal">
-                    {pkgForm.pkg_code
-                      ? `${pkgForm.pkg_name} (${pkgForm.pkg_code})`
-                      : "품목정보에서 포장재를 선택하세요"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+
+          {/* 매칭 품목 서브패널 */}
+          {selectedPkg && (
+            <>
+              <div className="flex shrink-0 items-center justify-between bg-muted/50 px-4 py-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">매칭 품목</span>
+                  <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+                    {pkgItems.length}건
+                  </span>
+                  <span className="max-w-[200px] truncate text-[11px] text-muted-foreground">
+                    — {selectedPkg.pkg_name}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openItemMatchModal}>
+                    <Plus className="mr-1 h-3 w-3" /> 품목 추가
                   </Button>
-                </PopoverTrigger>
-                <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
-                  <Command filter={(value, search) => {
-                    const item = pkgItemOptions.find((i) => i.id === value);
-                    if (!item) return 0;
-                    const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
-                    return target.includes(search.toLowerCase()) ? 1 : 0;
-                  }}>
-                    <CommandInput placeholder="품목코드 / 품목명 검색..." />
-                    <CommandList className="max-h-[200px]">
-                      <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
-                      {pkgItemOptions.map((item) => (
-                        <CommandItem key={item.id} value={item.id} onSelect={() => onPkgItemSelect(item)} className="text-xs">
-                          <Check className={cn("mr-2 h-3 w-3", pkgForm.pkg_code === item.item_number ? "opacity-100" : "opacity-0")} />
-                          <span className="font-medium">{item.item_name}</span>
-                          <span className="ml-2 text-muted-foreground">{item.item_number}</span>
-                          {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
-                        </CommandItem>
+                  <Button
+                    size="sm" variant="ghost" className="h-7 w-7 p-0 text-muted-foreground"
+                    onClick={() => { setSelectedPkg(null); setPkgItems([]); }}
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <div className="flex-1 overflow-auto">
+                {pkgItemsLoading ? (
+                  <div className="flex h-24 items-center justify-center">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : pkgItems.length === 0 ? (
+                  <div className="flex h-24 flex-col items-center justify-center gap-1.5">
+                    <Inbox className="h-5 w-5 text-muted-foreground/40" />
+                    <p className="text-xs text-muted-foreground">매칭된 품목이 없어요</p>
+                  </div>
+                ) : (
+                  <Table>
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                        <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장수량</TableHead>
+                        <TableHead className="p-2 w-[40px]" />
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {pkgItems.map((item) => (
+                        <TableRow key={item.id} className="text-xs">
+                          <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
+                          <TableCell className="p-2">{item.item_name || "-"}</TableCell>
+                          <TableCell className="p-2">{item.spec || "-"}</TableCell>
+                          <TableCell className="p-2">{item.unit || "EA"}</TableCell>
+                          <TableCell className="p-2 text-right font-semibold">{Number(item.pkg_qty).toLocaleString()}</TableCell>
+                          <TableCell className="p-2 text-center">
+                            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeletePkgItem(item)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
                       ))}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
+                    </TableBody>
+                  </Table>
+                )}
+              </div>
+            </>
           )}
-          <div className="grid grid-cols-2 gap-4">
-            <div><Label className="text-xs">품목코드</Label><Input value={pkgForm.pkg_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
-            <div><Label className="text-xs">포장명</Label><Input value={pkgForm.pkg_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
-            <div>
-              <Label className="text-xs">포장유형 <span className="text-destructive">*</span></Label>
-              <Select value={pkgForm.pkg_type || ""} onValueChange={(v) => setPkgForm((p) => ({ ...p, pkg_type: v }))}>
-                <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
-                <SelectContent>{Object.entries(PKG_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
-              </Select>
-            </div>
-            <div>
-              <Label className="text-xs">상태</Label>
-              <Select value={pkgForm.status || "ACTIVE"} onValueChange={(v) => setPkgForm((p) => ({ ...p, status: v }))}>
-                <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
-                <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
-              </Select>
-            </div>
-          </div>
-          <div>
-            <Label className="text-xs font-semibold">규격정보</Label>
-            <div className="grid grid-cols-3 gap-3 mt-2">
-              <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={pkgForm.width_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={pkgForm.length_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={pkgForm.height_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={pkgForm.self_weight_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-              <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={pkgForm.max_load_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-              <div><Label className="text-[10px]">내용적(L)</Label><Input type="number" value={pkgForm.volume_l || ""} onChange={(e) => setPkgForm((p) => ({ ...p, volume_l: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-            </div>
-          </div>
-          <div><Label className="text-xs">비고</Label><Input value={pkgForm.remarks || ""} onChange={(e) => setPkgForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
         </div>
-      </FullscreenDialog>
+      ) : (
+        /* 적재함 관리 탭 */
+        <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+          {/* 적재함 목록 테이블 */}
+          <div className={cn("overflow-auto", selectedLoading ? "flex-[0_0_50%] border-b" : "flex-1")}>
+            <Table>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted">
+                  <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">적재함명</TableHead>
+                  <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">크기(mm)</TableHead>
+                  <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대적재</TableHead>
+                  <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {loadingLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-32 text-center">
+                      <Loader2 className="mx-auto h-5 w-5 animate-spin text-muted-foreground" />
+                    </TableCell>
+                  </TableRow>
+                ) : filteredLoadingUnits.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-40 text-center">
+                      <div className="flex flex-col items-center justify-center gap-2">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-full border-2 border-dashed border-muted-foreground/20">
+                          <Inbox className="h-6 w-6 text-muted-foreground/40" />
+                        </div>
+                        <p className="text-xs text-muted-foreground">등록된 적재함이 없어요</p>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ) : filteredLoadingUnits.map((l) => (
+                  <TableRow
+                    key={l.id}
+                    className={cn(
+                      "cursor-pointer text-xs transition-colors",
+                      selectedLoading?.id === l.id ? "bg-primary/5" : "hover:bg-muted/50"
+                    )}
+                    onClick={() => selectLoading(l)}
+                  >
+                    <TableCell className="p-2 font-medium">{l.loading_code}</TableCell>
+                    <TableCell className="p-2">{l.loading_name}</TableCell>
+                    <TableCell className="p-2">{LOADING_TYPE_LABEL[l.loading_type] || l.loading_type || "-"}</TableCell>
+                    <TableCell className="p-2 text-[10px] tabular-nums">{fmtSize(l.width_mm, l.length_mm, l.height_mm)}</TableCell>
+                    <TableCell className="p-2 text-right">{Number(l.max_load_kg || 0) > 0 ? `${l.max_load_kg}kg` : "-"}</TableCell>
+                    <TableCell className="p-2 text-center">
+                      <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(l.status))}>
+                        {STATUS_LABEL[l.status] || l.status}
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          {/* 포장구성 서브패널 */}
+          {selectedLoading && (
+            <>
+              <div className="flex shrink-0 items-center justify-between bg-muted/50 px-4 py-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">적재 가능 포장단위</span>
+                  <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+                    {loadingPkgs.length}건
+                  </span>
+                  <span className="max-w-[200px] truncate text-[11px] text-muted-foreground">
+                    — {selectedLoading.loading_name}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openPkgMatchModal}>
+                    <Plus className="mr-1 h-3 w-3" /> 포장단위 추가
+                  </Button>
+                  <Button
+                    size="sm" variant="ghost" className="h-7 w-7 p-0 text-muted-foreground"
+                    onClick={() => { setSelectedLoading(null); setLoadingPkgs([]); }}
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <div className="flex-1 overflow-auto">
+                {loadingPkgsLoading ? (
+                  <div className="flex h-24 items-center justify-center">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : loadingPkgs.length === 0 ? (
+                  <div className="flex h-24 flex-col items-center justify-center gap-1.5">
+                    <Inbox className="h-5 w-5 text-muted-foreground/40" />
+                    <p className="text-xs text-muted-foreground">등록된 포장단위가 없어요</p>
+                  </div>
+                ) : (
+                  <Table>
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장코드</TableHead>
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장명</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                        <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대수량</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">적재방향</TableHead>
+                        <TableHead className="p-2 w-[40px]" />
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {loadingPkgs.map((lp) => (
+                        <TableRow key={lp.id} className="text-xs">
+                          <TableCell className="p-2 font-medium">{lp.pkg_code}</TableCell>
+                          <TableCell className="p-2">{lp.pkg_name || "-"}</TableCell>
+                          <TableCell className="p-2">{PKG_TYPE_LABEL[lp.pkg_type || ""] || lp.pkg_type || "-"}</TableCell>
+                          <TableCell className="p-2 text-right font-semibold">{Number(lp.max_load_qty).toLocaleString()}</TableCell>
+                          <TableCell className="p-2">{lp.load_method || "-"}</TableCell>
+                          <TableCell className="p-2 text-center">
+                            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeleteLoadPkg(lp)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* 포장재 등록/수정 모달 */}
+      <Dialog open={pkgModalOpen} onOpenChange={setPkgModalOpen}>
+        <DialogContent className="max-w-2xl" style={{ maxHeight: "90vh", overflowY: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{pkgModalMode === "create" ? "포장재 등록" : "포장재 수정"}</DialogTitle>
+            <DialogDescription>품목정보에서 포장재를 선택하면 코드와 이름이 자동 연동됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            {pkgModalMode === "create" && (
+              <div className="rounded-lg border bg-muted/50 p-4">
+                <Label className="mb-2 block text-xs font-semibold">품목정보 연결 (구분: 포장재)</Label>
+                <Popover open={pkgItemPopoverOpen} onOpenChange={setPkgItemPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" role="combobox" className="h-9 w-full justify-between text-sm font-normal">
+                      {pkgForm.pkg_code ? `${pkgForm.pkg_name} (${pkgForm.pkg_code})` : "품목정보에서 포장재를 선택하세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                    <Command filter={(value, search) => {
+                      const item = pkgItemOptions.find((i) => i.id === value);
+                      if (!item) return 0;
+                      const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
+                      return target.includes(search.toLowerCase()) ? 1 : 0;
+                    }}>
+                      <CommandInput placeholder="품목코드 / 품목명 검색..." />
+                      <CommandList className="max-h-[200px]">
+                        <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                        {pkgItemOptions.map((item) => (
+                          <CommandItem key={item.id} value={item.id} onSelect={() => onPkgItemSelect(item)} className="text-xs">
+                            <Check className={cn("mr-2 h-3 w-3", pkgForm.pkg_code === item.item_number ? "opacity-100" : "opacity-0")} />
+                            <span className="font-medium">{item.item_name}</span>
+                            <span className="ml-2 text-muted-foreground">{item.item_number}</span>
+                            {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
+                          </CommandItem>
+                        ))}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+            <div className="grid grid-cols-2 gap-4">
+              <div><Label className="text-xs">품목코드</Label><Input value={pkgForm.pkg_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div><Label className="text-xs">포장명</Label><Input value={pkgForm.pkg_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div>
+                <Label className="text-xs">포장유형 <span className="text-destructive">*</span></Label>
+                <Select value={pkgForm.pkg_type || ""} onValueChange={(v) => setPkgForm((p) => ({ ...p, pkg_type: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>{Object.entries(PKG_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">상태</Label>
+                <Select value={pkgForm.status || "ACTIVE"} onValueChange={(v) => setPkgForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold">규격정보</Label>
+              <div className="mt-2 grid grid-cols-3 gap-3">
+                <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={pkgForm.width_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={pkgForm.length_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={pkgForm.height_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={pkgForm.self_weight_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={pkgForm.max_load_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">내용적(L)</Label><Input type="number" value={pkgForm.volume_l || ""} onChange={(e) => setPkgForm((p) => ({ ...p, volume_l: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+              </div>
+            </div>
+            <div><Label className="text-xs">비고</Label><Input value={pkgForm.remarks || ""} onChange={(e) => setPkgForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setPkgModalOpen(false)}>취소</Button>
+            <Button onClick={savePkgUnit} disabled={saving}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 적재함 등록/수정 모달 */}
-      <FullscreenDialog open={loadModalOpen} onOpenChange={setLoadModalOpen}
-        title={loadModalMode === "create" ? "적재함 등록" : "적재함 수정"}
-        description="품목정보에서 적재함을 선택하면 코드와 이름이 자동 연동됩니다."
-        footer={
-          <div className="flex gap-2">
+      <Dialog open={loadModalOpen} onOpenChange={setLoadModalOpen}>
+        <DialogContent className="max-w-2xl" style={{ maxHeight: "90vh", overflowY: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{loadModalMode === "create" ? "적재함 등록" : "적재함 수정"}</DialogTitle>
+            <DialogDescription>품목정보에서 적재함을 선택하면 코드와 이름이 자동 연동됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            {loadModalMode === "create" && (
+              <div className="rounded-lg border bg-muted/50 p-4">
+                <Label className="mb-2 block text-xs font-semibold">품목정보 연결 (구분: 적재함)</Label>
+                <Popover open={loadItemPopoverOpen} onOpenChange={setLoadItemPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" role="combobox" className="h-9 w-full justify-between text-sm font-normal">
+                      {loadForm.loading_code ? `${loadForm.loading_name} (${loadForm.loading_code})` : "품목정보에서 적재함을 선택하세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                    <Command filter={(value, search) => {
+                      const item = loadItemOptions.find((i) => i.id === value);
+                      if (!item) return 0;
+                      const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
+                      return target.includes(search.toLowerCase()) ? 1 : 0;
+                    }}>
+                      <CommandInput placeholder="품목코드 / 품목명 검색..." />
+                      <CommandList className="max-h-[200px]">
+                        <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                        {loadItemOptions.map((item) => (
+                          <CommandItem key={item.id} value={item.id} onSelect={() => onLoadItemSelect(item)} className="text-xs">
+                            <Check className={cn("mr-2 h-3 w-3", loadForm.loading_code === item.item_number ? "opacity-100" : "opacity-0")} />
+                            <span className="font-medium">{item.item_name}</span>
+                            <span className="ml-2 text-muted-foreground">{item.item_number}</span>
+                            {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
+                          </CommandItem>
+                        ))}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+            <div className="grid grid-cols-2 gap-4">
+              <div><Label className="text-xs">적재함코드</Label><Input value={loadForm.loading_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div><Label className="text-xs">적재함명</Label><Input value={loadForm.loading_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div>
+                <Label className="text-xs">적재유형 <span className="text-destructive">*</span></Label>
+                <Select value={loadForm.loading_type || ""} onValueChange={(v) => setLoadForm((p) => ({ ...p, loading_type: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>{Object.entries(LOADING_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">상태</Label>
+                <Select value={loadForm.status || "ACTIVE"} onValueChange={(v) => setLoadForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold">규격정보</Label>
+              <div className="mt-2 grid grid-cols-3 gap-3">
+                <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={loadForm.width_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={loadForm.length_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={loadForm.height_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={loadForm.self_weight_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={loadForm.max_load_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대단수</Label><Input type="number" value={loadForm.max_stack || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_stack: e.target.value }))} className="h-9 text-xs" /></div>
+              </div>
+            </div>
+            <div><Label className="text-xs">비고</Label><Input value={loadForm.remarks || ""} onChange={(e) => setLoadForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
+          </div>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setLoadModalOpen(false)}>취소</Button>
-            <Button onClick={saveLoadingUnit} disabled={saving}>{saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장</Button>
-          </div>
-        }
-      >
-        <div className="space-y-4 p-6">
-          {loadModalMode === "create" && (
-            <div className="rounded-lg border bg-green-50 dark:bg-green-950/20 p-4">
-              <Label className="text-xs font-semibold mb-2 block">품목정보 연결 (구분: 적재함)</Label>
-              <Popover open={loadItemPopoverOpen} onOpenChange={setLoadItemPopoverOpen}>
-                <PopoverTrigger asChild>
-                  <Button variant="outline" role="combobox" className="w-full justify-between h-9 text-sm font-normal">
-                    {loadForm.loading_code
-                      ? `${loadForm.loading_name} (${loadForm.loading_code})`
-                      : "품목정보에서 적재함을 선택하세요"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
-                  <Command filter={(value, search) => {
-                    const item = loadItemOptions.find((i) => i.id === value);
-                    if (!item) return 0;
-                    const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
-                    return target.includes(search.toLowerCase()) ? 1 : 0;
-                  }}>
-                    <CommandInput placeholder="품목코드 / 품목명 검색..." />
-                    <CommandList className="max-h-[200px]">
-                      <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
-                      {loadItemOptions.map((item) => (
-                        <CommandItem key={item.id} value={item.id} onSelect={() => onLoadItemSelect(item)} className="text-xs">
-                          <Check className={cn("mr-2 h-3 w-3", loadForm.loading_code === item.item_number ? "opacity-100" : "opacity-0")} />
-                          <span className="font-medium">{item.item_name}</span>
-                          <span className="ml-2 text-muted-foreground">{item.item_number}</span>
-                          {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
-                        </CommandItem>
-                      ))}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
-          )}
-          <div className="grid grid-cols-2 gap-4">
-            <div><Label className="text-xs">적재함코드</Label><Input value={loadForm.loading_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
-            <div><Label className="text-xs">적재함명</Label><Input value={loadForm.loading_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
-            <div>
-              <Label className="text-xs">적재유형 <span className="text-destructive">*</span></Label>
-              <Select value={loadForm.loading_type || ""} onValueChange={(v) => setLoadForm((p) => ({ ...p, loading_type: v }))}>
-                <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
-                <SelectContent>{Object.entries(LOADING_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
-              </Select>
-            </div>
-            <div>
-              <Label className="text-xs">상태</Label>
-              <Select value={loadForm.status || "ACTIVE"} onValueChange={(v) => setLoadForm((p) => ({ ...p, status: v }))}>
-                <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
-                <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
-              </Select>
-            </div>
-          </div>
-          <div>
-            <Label className="text-xs font-semibold">규격정보</Label>
-            <div className="grid grid-cols-3 gap-3 mt-2">
-              <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={loadForm.width_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={loadForm.length_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={loadForm.height_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={loadForm.self_weight_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-              <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={loadForm.max_load_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-              <div><Label className="text-[10px]">최대단수</Label><Input type="number" value={loadForm.max_stack || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_stack: e.target.value }))} className="h-8 text-xs" /></div>
-            </div>
-          </div>
-          <div><Label className="text-xs">비고</Label><Input value={loadForm.remarks || ""} onChange={(e) => setLoadForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
-        </div>
-      </FullscreenDialog>
+            <Button onClick={saveLoadingUnit} disabled={saving}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 품목 추가 모달 (포장재 매칭) */}
       <Dialog open={itemMatchModalOpen} onOpenChange={setItemMatchModalOpen}>
@@ -791,7 +860,9 @@ export default function PackagingPage() {
             <DialogDescription>포장재에 매칭할 품목을 검색하여 추가합니다.</DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
-            <Input placeholder="품목코드 / 품목명 검색 (입력 시 자동 검색)" value={itemMatchKeyword}
+            <Input
+              placeholder="품목코드 / 품목명 검색 (입력 시 자동 검색)"
+              value={itemMatchKeyword}
               onChange={(e) => {
                 setItemMatchKeyword(e.target.value);
                 const kw = e.target.value;
@@ -803,30 +874,34 @@ export default function PackagingPage() {
                   } catch { /* ignore */ }
                 }, 300);
               }}
-              className="h-9 text-xs" />
-            <div className="max-h-[300px] overflow-auto border rounded">
+              className="h-9 text-xs"
+            />
+            <div className="max-h-[300px] overflow-auto rounded border">
               <Table>
-                <TableHeader>
-                  <TableRow className="text-[11px]">
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
                     <TableHead className="p-2 w-[30px]" />
-                    <TableHead className="p-2 w-[130px]">품목코드</TableHead>
-                    <TableHead className="p-2">품목명</TableHead>
-                    <TableHead className="p-2 w-[100px]">규격</TableHead>
-                    <TableHead className="p-2 w-[80px]">재질</TableHead>
-                    <TableHead className="p-2 w-[50px]">단위</TableHead>
+                    <TableHead className="w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                    <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {itemMatchResults.filter(i => !pkgItems.some(pi => pi.item_number === i.item_number)).length === 0 ? (
-                    <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground text-xs h-16">검색 결과가 없습니다</TableCell></TableRow>
+                    <TableRow><TableCell colSpan={6} className="h-16 text-center text-[13px] text-muted-foreground">검색 결과가 없습니다</TableCell></TableRow>
                   ) : itemMatchResults.filter(i => !pkgItems.some(pi => pi.item_number === i.item_number)).map((item) => (
-                    <TableRow key={item.id} className={cn("cursor-pointer text-xs", itemMatchSelected?.id === item.id && "bg-primary/10")}
-                      onClick={() => setItemMatchSelected(item)}>
+                    <TableRow
+                      key={item.id}
+                      className={cn("cursor-pointer text-xs", itemMatchSelected?.id === item.id && "bg-primary/10")}
+                      onClick={() => setItemMatchSelected(item)}
+                    >
                       <TableCell className="p-2 text-center">{itemMatchSelected?.id === item.id ? "✓" : ""}</TableCell>
-                      <TableCell className="p-2 font-medium truncate max-w-[130px]">{item.item_number}</TableCell>
-                      <TableCell className="p-2 truncate max-w-[200px]">{item.item_name}</TableCell>
-                      <TableCell className="p-2 truncate">{item.spec || "-"}</TableCell>
-                      <TableCell className="p-2 truncate">{item.material || "-"}</TableCell>
+                      <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
+                      <TableCell className="p-2">{item.item_name}</TableCell>
+                      <TableCell className="p-2">{item.spec || "-"}</TableCell>
+                      <TableCell className="p-2">{item.material || "-"}</TableCell>
                       <TableCell className="p-2">{item.unit || "EA"}</TableCell>
                     </TableRow>
                   ))}
@@ -836,17 +911,26 @@ export default function PackagingPage() {
             <div className="flex items-end gap-4">
               <div className="flex-1">
                 <Label className="text-xs">선택된 품목</Label>
-                <Input value={itemMatchSelected ? `${itemMatchSelected.item_name} (${itemMatchSelected.item_number})` : ""} readOnly className="h-9 bg-muted text-xs" />
+                <Input
+                  value={itemMatchSelected ? `${itemMatchSelected.item_name} (${itemMatchSelected.item_number})` : ""}
+                  readOnly className="h-9 bg-muted text-xs"
+                />
               </div>
               <div className="w-[120px]">
                 <Label htmlFor="pkg-item-match-qty" className="text-xs">포장수량(EA) <span className="text-destructive">*</span></Label>
-                <Input id="pkg-item-match-qty" type="number" value={itemMatchQty} onChange={(e) => setItemMatchQty(Number(e.target.value) || 0)} min={1} className="h-9 text-xs" />
+                <Input
+                  id="pkg-item-match-qty" type="number" value={itemMatchQty}
+                  onChange={(e) => setItemMatchQty(Number(e.target.value) || 0)}
+                  min={1} className="h-9 text-xs"
+                />
               </div>
             </div>
           </div>
           <DialogFooter>
             <Button type="button" variant="outline" onClick={() => setItemMatchModalOpen(false)}>취소</Button>
-            <Button type="button" data-action-type="custom" onClick={saveItemMatch} disabled={saving || !itemMatchSelected}>{saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가</Button>
+            <Button type="button" data-action-type="custom" onClick={saveItemMatch} disabled={saving || !itemMatchSelected}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -865,16 +949,16 @@ export default function PackagingPage() {
               onChange={(e) => setPkgMatchSearchKw(e.target.value)}
               className="h-9 text-xs"
             />
-            <div className="max-h-[300px] overflow-auto border rounded">
+            <div className="max-h-[300px] overflow-auto rounded border">
               <Table>
-                <TableHeader>
-                  <TableRow className="text-[11px]">
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
                     <TableHead className="p-2 w-[30px]" />
-                    <TableHead className="p-2 w-[120px]">포장코드</TableHead>
-                    <TableHead className="p-2">포장명</TableHead>
-                    <TableHead className="p-2 w-[70px]">유형</TableHead>
-                    <TableHead className="p-2 w-[100px]">크기(mm)</TableHead>
-                    <TableHead className="p-2 w-[80px] text-right">최대중량</TableHead>
+                    <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장코드</TableHead>
+                    <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장명</TableHead>
+                    <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">크기(mm)</TableHead>
+                    <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대중량</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -886,10 +970,13 @@ export default function PackagingPage() {
                       && (!kw || p.pkg_code?.toLowerCase().includes(kw) || p.pkg_name?.toLowerCase().includes(kw))
                     );
                     return filtered.length === 0 ? (
-                      <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground text-xs h-16">추가 가능한 포장단위가 없습니다</TableCell></TableRow>
+                      <TableRow><TableCell colSpan={6} className="h-16 text-center text-[13px] text-muted-foreground">추가 가능한 포장단위가 없습니다</TableCell></TableRow>
                     ) : filtered.map((p) => (
-                      <TableRow key={p.id} className={cn("cursor-pointer text-xs", pkgMatchSelected?.id === p.id && "bg-primary/10")}
-                        onClick={() => setPkgMatchSelected(p)}>
+                      <TableRow
+                        key={p.id}
+                        className={cn("cursor-pointer text-xs", pkgMatchSelected?.id === p.id && "bg-primary/10")}
+                        onClick={() => setPkgMatchSelected(p)}
+                      >
                         <TableCell className="p-2 text-center">{pkgMatchSelected?.id === p.id ? "✓" : ""}</TableCell>
                         <TableCell className="p-2 font-medium">{p.pkg_code}</TableCell>
                         <TableCell className="p-2">{p.pkg_name}</TableCell>
@@ -905,22 +992,42 @@ export default function PackagingPage() {
             <div className="flex items-end gap-4">
               <div className="w-[150px]">
                 <Label htmlFor="loading-pkg-match-qty" className="text-xs">최대적재수량 <span className="text-destructive">*</span></Label>
-                <Input id="loading-pkg-match-qty" type="number" value={pkgMatchQty} onChange={(e) => setPkgMatchQty(Number(e.target.value) || 0)} min={1} className="h-9 text-xs" />
+                <Input
+                  id="loading-pkg-match-qty" type="number" value={pkgMatchQty}
+                  onChange={(e) => setPkgMatchQty(Number(e.target.value) || 0)}
+                  min={1} className="h-9 text-xs"
+                />
               </div>
               <div className="flex-1">
                 <Label className="text-xs">적재방향</Label>
-                <Input value={pkgMatchMethod} onChange={(e) => setPkgMatchMethod(e.target.value)} placeholder="수직/수평/혼합" className="h-9 text-xs" />
+                <Input
+                  value={pkgMatchMethod}
+                  onChange={(e) => setPkgMatchMethod(e.target.value)}
+                  placeholder="수직/수평/혼합"
+                  className="h-9 text-xs"
+                />
               </div>
             </div>
           </div>
           <DialogFooter>
             <Button type="button" variant="outline" onClick={() => setPkgMatchModalOpen(false)}>취소</Button>
-            <Button type="button" data-action-type="custom" onClick={savePkgMatch} disabled={saving || !pkgMatchSelected}>{saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가</Button>
+            <Button type="button" data-action-type="custom" onClick={savePkgMatch} disabled={saving || !pkgMatchSelected}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_29/logistics/receiving/page.tsx b/frontend/app/(main)/COMPANY_29/logistics/receiving/page.tsx
index 6e493a5c..85cdc23c 100644
--- a/frontend/app/(main)/COMPANY_29/logistics/receiving/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/logistics/receiving/page.tsx
@@ -18,7 +18,14 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -31,17 +38,29 @@ import {
   Search,
   Plus,
   Trash2,
-  RotateCcw,
   Loader2,
-  Package,
+  Inbox,
   X,
   Save,
   ChevronRight,
+  ChevronDown,
   ChevronLeft,
   ChevronsLeft,
   ChevronsRight,
+  Settings2,
+  Filter,
+  Check,
+  ArrowUp,
+  ArrowDown,
 } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+// EDataTable 제거 — 마스터-디테일 그룹 테이블로 교체
+// API: /receiving/*
 import {
   getReceivingList,
   createReceiving,
@@ -58,22 +77,186 @@ import {
   type WarehouseOption,
 } from "@/lib/api/receiving";
 
+const GRID_COLUMNS = [
+  { key: "inbound_number", label: "입고번호" },
+  { key: "inbound_type", label: "입고유형" },
+  { key: "inbound_date", label: "입고일" },
+  { key: "reference_number", label: "참조번호" },
+  { key: "source_type", label: "데이터출처" },
+  { key: "supplier_name", label: "공급처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "inbound_qty", label: "입고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+  { key: "warehouse_name", label: "창고" },
+  { key: "inbound_status", label: "입고상태" },
+  { key: "remark", label: "비고" },
+];
+
+// 마스터 헤더 레이아웃 (입고번호 뒤, 디테일 7컬럼 위에 colSpan으로 맵핑)
+const MASTER_BODY_LAYOUT = [
+  { key: "inbound_type", label: "입고유형", colSpan: 1 },
+  { key: "inbound_date", label: "입고일", colSpan: 1 },
+  { key: "reference_number", label: "참조번호", colSpan: 1 },
+  { key: "supplier_name", label: "공급처", colSpan: 1 },
+  { key: "warehouse_name", label: "창고", colSpan: 1 },
+  { key: "inbound_status", label: "입고상태", colSpan: 1 },
+  { key: "memo", label: "비고", colSpan: 1 },
+];
+
+// 디테일 헤더 컬럼
+const DETAIL_HEADER_COLS = [
+  { key: "source_table", label: "출처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "inbound_qty", label: "입고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+];
+
+// 마스터 필드 키 목록 (필터 분류용)
+const MASTER_KEYS = new Set(["inbound_number", ...MASTER_BODY_LAYOUT.map((c) => c.key)]);
+
+// 디테일 필드 키 매핑 (GRID_COLUMNS key → DETAIL_HEADER_COLS key)
+const DETAIL_KEY_MAP: Record<string, string> = {
+  source_type: "source_table",
+  item_number: "item_number",
+  item_name: "item_name",
+  spec: "spec",
+  inbound_qty: "inbound_qty",
+  unit_price: "unit_price",
+  total_amount: "total_amount",
+};
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 // 입고유형 옵션
 const INBOUND_TYPES = [
-  { value: "구매입고", label: "구매입고", color: "bg-blue-100 text-blue-800" },
-  { value: "반품입고", label: "반품입고", color: "bg-pink-100 text-pink-800" },
-  { value: "기타입고", label: "기타입고", color: "bg-gray-100 text-gray-800" },
+  { value: "구매입고", label: "구매입고" },
+  { value: "외주입고", label: "외주입고" },
+  { value: "사급자재입고", label: "사급자재입고" },
+  { value: "반품입고", label: "반품입고" },
+  { value: "기타입고", label: "기타입고" },
 ];
 
+// 입고유형 카테고리 코드→라벨 매핑
+const INBOUND_TYPE_CODE_MAP: Record<string, string> = {
+  CAT_MLYTB8ON_A3AU: "구매입고",
+  CAT_MLYTBMH6_9AB7: "외주입고",
+  CAT_MLYTBSLW_5N81: "사급자재입고",
+  CAT_MLYTBGEV_N23U: "반품입고",
+  CAT_MLYTBYLU_0Z5T: "기타입고",
+};
+const resolveInboundType = (v: string) => INBOUND_TYPE_CODE_MAP[v] || v || "-";
+
 const INBOUND_STATUS_OPTIONS = [
-  { value: "대기", label: "대기", color: "bg-amber-100 text-amber-800" },
-  { value: "입고완료", label: "입고완료", color: "bg-emerald-100 text-emerald-800" },
-  { value: "부분입고", label: "부분입고", color: "bg-amber-100 text-amber-800" },
-  { value: "입고취소", label: "입고취소", color: "bg-red-100 text-red-800" },
+  { value: "대기", label: "대기" },
+  { value: "입고완료", label: "입고완료" },
+  { value: "부분입고", label: "부분입고" },
+  { value: "입고취소", label: "입고취소" },
 ];
 
-const getTypeColor = (type: string) => INBOUND_TYPES.find((t) => t.value === type)?.color || "bg-gray-100 text-gray-800";
-const getStatusColor = (status: string) => INBOUND_STATUS_OPTIONS.find((s) => s.value === status)?.color || "bg-gray-100 text-gray-800";
+const getTypeVariant = (type: string): "default" | "secondary" | "outline" => {
+  switch (type) {
+    case "구매입고": return "default";
+    case "반품입고": return "secondary";
+    default: return "outline";
+  }
+};
+
+const getStatusVariant = (status: string): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "입고완료": return "default";
+    case "부분입고": return "secondary";
+    case "입고취소": return "destructive";
+    default: return "outline";
+  }
+};
 
 // 소스 테이블 한글명 매핑
 const SOURCE_TABLE_LABEL: Record<string, string> = {
@@ -102,17 +285,45 @@ interface SelectedSourceItem {
 }
 
 export default function ReceivingPage() {
+  const ts = useTableSettings("c16-receiving", "inbound_mng", GRID_COLUMNS);
+
+  // ts.visibleColumns 기반 마스터/디테일 컬럼 계산
+  const visibleMasterLayout = useMemo(() => {
+    const ordered: typeof MASTER_BODY_LAYOUT = [];
+    for (const vc of ts.visibleColumns) {
+      const m = MASTER_BODY_LAYOUT.find((ml) => ml.key === vc.key);
+      if (m) ordered.push(m);
+    }
+    return ordered.length > 0 ? ordered : MASTER_BODY_LAYOUT;
+  }, [ts.visibleColumns]);
+
+  const visibleDetailCols = useMemo(() => {
+    const ordered: typeof DETAIL_HEADER_COLS = [];
+    for (const vc of ts.visibleColumns) {
+      const detailKey = DETAIL_KEY_MAP[vc.key];
+      if (detailKey) {
+        const d = DETAIL_HEADER_COLS.find((dc) => dc.key === detailKey);
+        if (d) ordered.push(d);
+      }
+    }
+    return ordered.length > 0 ? ordered : DETAIL_HEADER_COLS;
+  }, [ts.visibleColumns]);
+
+  const TOTAL_COLS = 3 + visibleMasterLayout.length;
+
   // 목록 데이터
   const [data, setData] = useState<InboundItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [checkedIds, setCheckedIds] = useState<string[]>([]);
 
   // 검색 필터
-  const [searchType, setSearchType] = useState("all");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 마스터-디테일 그룹 테이블
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+  const [closingOrders, setClosingOrders] = useState<Set<string>>(new Set());
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
 
   // 등록 모달
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -140,33 +351,44 @@ export default function ReceivingPage() {
   const [sourcePageSize, setSourcePageSize] = useState(20);
   const [sourceTotalCount, setSourceTotalCount] = useState(0);
 
-  // 날짜 초기화
+  // 구매관리 division 코드 (라벨 기준 조회)
+  const [purchaseDivisionCode, setPurchaseDivisionCode] = useState<string>("");
+
+  // 구매관리 division 코드 로드
   useEffect(() => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
+    // division 카테고리에서 "구매관리" 라벨의 코드 조회
+    apiClient.get("/table-categories/item_info/division/values").then((res) => {
+      const vals = res.data?.data || [];
+      const found = vals.find((v: any) => (v.value_label || v.label) === "구매관리");
+      if (found) setPurchaseDivisionCode(found.value_code || found.code);
+    }).catch(() => {});
   }, []);
 
   // 목록 조회
   const fetchList = useCallback(async () => {
     setLoading(true);
     try {
-      const res = await getReceivingList({
-        inbound_type: searchType !== "all" ? searchType : undefined,
-        inbound_status: searchStatus !== "all" ? searchStatus : undefined,
-        search_keyword: searchKeyword || undefined,
-        date_from: searchDateFrom || undefined,
-        date_to: searchDateTo || undefined,
-      });
+      const params: Record<string, string | undefined> = {};
+      for (const f of searchFilters) {
+        if (!f.value) continue;
+        if (f.columnName === "inbound_type") params.inbound_type = f.value;
+        else if (f.columnName === "inbound_status") params.inbound_status = f.value;
+        else if (f.columnName === "inbound_date" && f.operator === "between") {
+          const [from, to] = f.value.split("~").map((s) => s.trim());
+          if (from) params.date_from = from;
+          if (to) params.date_to = to;
+        } else {
+          params.search_keyword = f.value;
+        }
+      }
+      const res = await getReceivingList(params);
       if (res.success) setData(res.data);
     } catch {
       // 에러 무시
     } finally {
       setLoading(false);
     }
-  }, [searchType, searchStatus, searchKeyword, searchDateFrom, searchDateTo]);
+  }, [searchFilters]);
 
   useEffect(() => {
     fetchList();
@@ -184,26 +406,149 @@ export default function ReceivingPage() {
     })();
   }, []);
 
-  // 검색 초기화
-  const handleReset = () => {
-    setSearchType("all");
-    setSearchStatus("all");
-    setSearchKeyword("");
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
+  // 필터 + 정렬 적용된 데이터 -> 그룹핑
+  const filteredGroups = useMemo(() => {
+    // 1차: inbound_number 기준 그룹핑
+    const allGroups: Record<string, { master: InboundItem; details: InboundItem[] }> = {};
+    for (const row of data) {
+      const key = row.inbound_number || "_no_inbound";
+      if (!allGroups[key]) {
+        allGroups[key] = { master: row, details: [] };
+      }
+      allGroups[key].details.push(row);
+    }
+
+    // 마스터 필터 / 디테일 필터 분리
+    const masterFilters: Record<string, Set<string>> = {};
+    const detailFilters: Record<string, Set<string>> = {};
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      if (MASTER_KEYS.has(colKey)) masterFilters[colKey] = values;
+      else detailFilters[colKey] = values;
+    }
+
+    // 2차: 마스터 필터 적용 (그룹 단위)
+    let entries = Object.entries(allGroups);
+    if (Object.keys(masterFilters).length > 0) {
+      entries = entries.filter(([, group]) =>
+        Object.entries(masterFilters).every(([colKey, values]) => {
+          let raw = (group.master as any)?.[colKey] ?? "";
+          // 입고유형은 코드→라벨 변환된 값으로 비교
+          if (colKey === "inbound_type") raw = resolveInboundType(String(raw));
+          return values.has(String(raw));
+        })
+      );
+    }
+
+    // 3차: 디테일 필터 적용 (행 단위)
+    if (Object.keys(detailFilters).length > 0) {
+      entries = entries
+        .map(([inboundNo, group]) => {
+          const filtered = group.details.filter((row) =>
+            Object.entries(detailFilters).every(([colKey, values]) => {
+              let cellVal = (row as any)[colKey] != null ? String((row as any)[colKey]) : "";
+              if (colKey === "source_table") cellVal = SOURCE_TABLE_LABEL[cellVal] || cellVal;
+              return values.has(cellVal);
+            })
+          );
+          return [inboundNo, { ...group, details: filtered }] as [string, typeof group];
+        })
+        .filter(([, group]) => group.details.length > 0);
+    }
+
+    // 4차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      if (MASTER_KEYS.has(key)) {
+        entries.sort(([, a], [, b]) => {
+          let av: any = (a.master as any)?.[key] ?? "";
+          let bv: any = (b.master as any)?.[key] ?? "";
+          if (key === "inbound_type") { av = resolveInboundType(String(av)); bv = resolveInboundType(String(bv)); }
+          const na = Number(av); const nb = Number(bv);
+          if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+          return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+        });
+      } else {
+        entries.forEach(([, group]) => {
+          group.details.sort((a, b) => {
+            const av = (a as any)[key] ?? "";
+            const bv = (b as any)[key] ?? "";
+            const na = Number(av); const nb = Number(bv);
+            if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+            return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+          });
+        });
+      }
+    }
+
+    return Object.fromEntries(entries);
+  }, [data, headerFilters, sortState]);
+
+  // 마스터 컬럼별 고유값 (마스터 헤더 필터용)
+  const masterUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    const seenMasters = new Map<string, InboundItem>();
+    data.forEach((row) => {
+      if (row.inbound_number && !seenMasters.has(row.inbound_number)) {
+        seenMasters.set(row.inbound_number, row);
+      }
+    });
+    const masters = Array.from(seenMasters.values());
+    for (const col of [{ key: "inbound_number", label: "입고번호" }, ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label }))]) {
+      const values = new Set<string>();
+      masters.forEach((m) => {
+        let val = (m as any)?.[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "inbound_type") val = resolveInboundType(String(val));
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 디테일 컬럼별 고유값 (디테일 서브헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of DETAIL_HEADER_COLS) {
+      const values = new Set<string>();
+      data.forEach((row) => {
+        let val = (row as any)[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "source_table") val = SOURCE_TABLE_LABEL[val] || val;
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
   };
 
-  // 체크박스
-  const allChecked = data.length > 0 && checkedIds.length === data.length;
-  const toggleCheckAll = () => {
-    setCheckedIds(allChecked ? [] : data.map((d) => d.id));
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
   };
-  const toggleCheck = (id: string) => {
-    setCheckedIds((prev) =>
-      prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
     );
   };
 
@@ -243,7 +588,7 @@ export default function ReceivingPage() {
             setSourceTotalCount(res.totalCount || 0);
           }
         } else {
-          const res = await getItemSources(params);
+          const res = await getItemSources({ ...params, division: purchaseDivisionCode || undefined });
           if (res.success) {
             setItems(res.data);
             setSourceTotalCount(res.totalCount || 0);
@@ -484,228 +829,356 @@ export default function ReceivingPage() {
   }, [selectedItems]);
 
   return (
-    <div className="flex h-full flex-col gap-4 p-4">
-      {/* 검색 영역 */}
-      <div className="flex flex-wrap items-center gap-2 rounded-lg border bg-card p-4">
-        <Select value={searchType} onValueChange={setSearchType}>
-          <SelectTrigger className="h-9 w-[130px] text-xs">
-            <SelectValue placeholder="입고유형" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">전체 유형</SelectItem>
-            {INBOUND_TYPES.map((t) => (
-              <SelectItem key={t.value} value={t.value}>
-                {t.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Select value={searchStatus} onValueChange={setSearchStatus}>
-          <SelectTrigger className="h-9 w-[130px] text-xs">
-            <SelectValue placeholder="입고상태" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">전체 상태</SelectItem>
-            {INBOUND_STATUS_OPTIONS.map((s) => (
-              <SelectItem key={s.value} value={s.value}>
-                {s.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Input
-          placeholder="입고번호 / 품목명 / 참조번호 검색"
-          value={searchKeyword}
-          onChange={(e) => setSearchKeyword(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && fetchList()}
-          className="h-9 w-[240px] text-xs"
-        />
-
-        <div className="flex items-center gap-1">
-          <Input
-            type="date"
-            value={searchDateFrom}
-            onChange={(e) => setSearchDateFrom(e.target.value)}
-            className="h-9 w-[140px] text-xs"
-          />
-          <span className="text-muted-foreground text-xs">~</span>
-          <Input
-            type="date"
-            value={searchDateTo}
-            onChange={(e) => setSearchDateTo(e.target.value)}
-            className="h-9 w-[140px] text-xs"
-          />
-        </div>
-
-        <Button size="sm" onClick={fetchList} className="h-9">
-          <Search className="mr-1 h-4 w-4" />
-          조회
-        </Button>
-        <Button size="sm" variant="outline" onClick={handleReset} className="h-9">
-          <RotateCcw className="mr-1 h-4 w-4" />
-          초기화
-        </Button>
-
-        <div className="ml-auto flex gap-2">
-          <Button size="sm" onClick={openRegisterModal} className="h-9">
-            <Plus className="mr-1 h-4 w-4" />
-            입고 등록
-          </Button>
-          <Button
-            size="sm"
-            variant="destructive"
-            onClick={handleDelete}
-            disabled={checkedIds.length === 0}
-            className="h-9"
-          >
-            <Trash2 className="mr-1 h-4 w-4" />
-            삭제 ({checkedIds.length})
-          </Button>
-        </div>
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>물류관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">입고관리</span>
       </div>
 
-      {/* 입고 목록 테이블 */}
-      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
-        <div className="flex items-center justify-between border-b px-4 py-3">
+      {/* 검색 영역 */}
+      <DynamicSearchFilter
+        tableName="inbound_mng"
+        filterId="c16-receiving"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={data.length}
+        extraActions={
           <div className="flex items-center gap-2">
-            <Package className="text-muted-foreground h-5 w-5" />
-            <h3 className="text-base font-semibold">입고 목록</h3>
-            <span className="text-muted-foreground text-sm">
-              총 {data.length}건
+            <Button size="sm" onClick={openRegisterModal} className="h-9">
+              <Plus className="mr-1 h-4 w-4" />
+              입고 등록
+            </Button>
+            <div className="h-4 w-px bg-border" />
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={handleDelete}
+              disabled={checkedIds.length === 0}
+              className="h-9 text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+            >
+              <Trash2 className="mr-1 h-4 w-4" />
+              삭제 ({checkedIds.length})
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 입고 목록 테이블 (마스터-디테일 그룹) */}
+      <div className="flex-1 overflow-hidden rounded-lg border border-border bg-card">
+        <div className="flex items-center justify-between border-b bg-muted/50 px-4 py-2.5">
+          <div className="flex items-center gap-2">
+            <h3 className="text-[13px] font-bold">입고 목록</h3>
+            <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+              {Object.keys(filteredGroups).length}건
             </span>
           </div>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
         </div>
 
-        <div className="h-[calc(100%-52px)] overflow-auto">
-          <Table>
-            <TableHeader>
-              <TableRow className="bg-muted/50">
-                <TableHead className="w-[40px] text-center">
+        <div className="h-[calc(100%-44px)] overflow-auto">
+          <Table style={{ minWidth: `${216 + visibleMasterLayout.length * 120}px` }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "36px" }} />
+              <col style={{ width: "140px" }} />
+              {visibleMasterLayout.map((col) => (
+                <col key={col.key} style={{ width: ts.getWidth(col.key) ? `${ts.getWidth(col.key)}px` : undefined }} />
+              ))}
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
                   <Checkbox
-                    checked={allChecked}
-                    onCheckedChange={toggleCheckAll}
+                    checked={(() => {
+                      const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
                   />
                 </TableHead>
-                <TableHead className="w-[130px]">입고번호</TableHead>
-                <TableHead className="w-[90px]">입고유형</TableHead>
-                <TableHead className="w-[100px]">입고일</TableHead>
-                <TableHead className="w-[120px]">참조번호</TableHead>
-                <TableHead className="w-[80px]">데이터출처</TableHead>
-                <TableHead className="w-[120px]">공급처</TableHead>
-                <TableHead className="w-[100px]">품목코드</TableHead>
-                <TableHead className="min-w-[150px]">품목명</TableHead>
-                <TableHead className="w-[80px]">규격</TableHead>
-                <TableHead className="w-[80px] text-right">입고수량</TableHead>
-                <TableHead className="w-[90px] text-right">단가</TableHead>
-                <TableHead className="w-[100px] text-right">금액</TableHead>
-                <TableHead className="w-[100px]">창고</TableHead>
-                <TableHead className="w-[90px] text-center">입고상태</TableHead>
-                <TableHead className="w-[100px]">비고</TableHead>
+                <TableHead />
+                {/* 입고번호 (별도 컬럼) */}
+                <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                  <div className="inline-flex items-center gap-1">
+                    <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort("inbound_number")}>
+                      <span className="truncate">입고번호</span>
+                      {sortState?.key === "inbound_number" && (
+                        sortState.direction === "asc"
+                          ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                          : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                      )}
+                    </div>
+                    {(masterUniqueValues["inbound_number"] || []).length > 0 && (
+                      <HeaderFilterPopover
+                        colKey="inbound_number" colLabel="입고번호"
+                        uniqueValues={masterUniqueValues["inbound_number"] || []}
+                        filterValues={headerFilters["inbound_number"] || new Set<string>()}
+                        onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                      />
+                    )}
+                  </div>
+                </TableHead>
+                {/* 마스터 필드 헤더 (ts.visibleColumns 순서) */}
+                {visibleMasterLayout.map((col) => (
+                  <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                    <div className="inline-flex items-center gap-1">
+                      <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                        <span className="truncate">{col.label}</span>
+                        {sortState?.key === col.key && (
+                          sortState.direction === "asc"
+                            ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                            : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                        )}
+                      </div>
+                      {(masterUniqueValues[col.key] || []).length > 0 && (
+                        <HeaderFilterPopover
+                          colKey={col.key} colLabel={col.label}
+                          uniqueValues={masterUniqueValues[col.key] || []}
+                          filterValues={headerFilters[col.key] || new Set<string>()}
+                          onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                        />
+                      )}
+                    </div>
+                  </TableHead>
+                ))}
               </TableRow>
             </TableHeader>
             <TableBody>
               {loading ? (
                 <TableRow>
-                  <TableCell colSpan={16} className="h-40 text-center">
-                    <Loader2 className="mx-auto h-6 w-6 animate-spin" />
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
                   </TableCell>
                 </TableRow>
-              ) : data.length === 0 ? (
+              ) : Object.keys(filteredGroups).length === 0 ? (
                 <TableRow>
-                  <TableCell
-                    colSpan={16}
-                    className="text-muted-foreground h-40 text-center"
-                  >
-                    <div className="flex flex-col items-center gap-2">
-                      <Package className="h-10 w-10 opacity-30" />
-                      <p>등록된 입고 내역이 없습니다</p>
-                      <p className="text-xs">
-                        &apos;입고 등록&apos; 버튼을 클릭하여 입고를 추가하세요
-                      </p>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <Inbox className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 입고 내역이 없어요</span>
                     </div>
                   </TableCell>
                 </TableRow>
               ) : (
-                data.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    className={cn(
-                      "cursor-pointer transition-colors",
-                      checkedIds.includes(row.id) && "bg-primary/5"
-                    )}
-                    onClick={() => toggleCheck(row.id)}
-                  >
-                    <TableCell
-                      className="text-center"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Checkbox
-                        checked={checkedIds.includes(row.id)}
-                        onCheckedChange={() => toggleCheck(row.id)}
-                      />
-                    </TableCell>
-                    <TableCell className="max-w-[130px] truncate font-medium" title={row.inbound_number}>
-                      {row.inbound_number}
-                    </TableCell>
-                    <TableCell>
-                      <Badge
-                        variant="outline"
-                        className={cn("text-[11px]", getTypeColor(row.inbound_type))}
-                      >
-                        {row.inbound_type || "-"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.inbound_date
-                        ? new Date(row.inbound_date).toLocaleDateString("ko-KR")
-                        : "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.reference_number || "-"}>
-                      {row.reference_number || "-"}
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.source_table
-                        ? SOURCE_TABLE_LABEL[row.source_table] || row.source_table
-                        : "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.supplier_name || "-"}>
-                      {row.supplier_name || "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[130px] truncate text-xs" title={row.item_number || "-"}>
-                      {row.item_number || "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[150px] truncate text-xs" title={row.item_name || "-"}>{row.item_name || "-"}</TableCell>
-                    <TableCell className="max-w-[100px] truncate text-xs" title={row.spec || "-"}>{row.spec || "-"}</TableCell>
-                    <TableCell className="text-right text-xs font-semibold">
-                      {Number(row.inbound_qty || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-right text-xs">
-                      {Number(row.unit_price || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-right text-xs font-semibold">
-                      {Number(row.total_amount || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.warehouse_name || row.warehouse_code || "-"}
-                    </TableCell>
-                    <TableCell className="text-center">
-                      <Badge
-                        variant="outline"
+                Object.entries(filteredGroups).map(([inboundNo, group]) => {
+                  const isExpanded = expandedOrders.has(inboundNo);
+                  const detailIds = group.details.map((d) => d.id);
+                  const allDetailChecked = detailIds.length > 0 && detailIds.every((id) => checkedIds.includes(id));
+                  const someDetailChecked = detailIds.some((id) => checkedIds.includes(id));
+                  const master = group.master;
+                  return (
+                    <React.Fragment key={inboundNo}>
+                      {/* 마스터 행 */}
+                      <TableRow
+                        style={{ borderTop: "2px solid hsl(var(--border))" }}
                         className={cn(
-                          "text-[11px]",
-                          getStatusColor(row.inbound_status)
+                          "cursor-pointer border-l-[3px] border-l-transparent font-semibold tree-master-row",
+                          allDetailChecked && "border-l-primary bg-primary/5"
                         )}
+                        onClick={() => {
+                          if (expandedOrders.has(inboundNo)) {
+                            setClosingOrders((prev) => new Set(prev).add(inboundNo));
+                            setTimeout(() => {
+                              setExpandedOrders((prev) => { const next = new Set(prev); next.delete(inboundNo); return next; });
+                              setClosingOrders((prev) => { const next = new Set(prev); next.delete(inboundNo); return next; });
+                            }, 200);
+                          } else {
+                            setExpandedOrders((prev) => new Set(prev).add(inboundNo));
+                          }
+                        }}
                       >
-                        {row.inbound_status || "-"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.memo || "-"}>
-                      {row.memo || "-"}
-                    </TableCell>
-                  </TableRow>
-                ))
+                        <TableCell
+                          className="text-center cursor-pointer"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setCheckedIds((prev) => {
+                              if (allDetailChecked) return prev.filter((id) => !detailIds.includes(id));
+                              return [...new Set([...prev, ...detailIds])];
+                            });
+                          }}
+                        >
+                          <Checkbox
+                            checked={allDetailChecked}
+                            data-state={someDetailChecked && !allDetailChecked ? "indeterminate" : undefined}
+                            onCheckedChange={() => {}}
+                          />
+                        </TableCell>
+                        <TableCell className="text-center">
+                          {isExpanded
+                            ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            : <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          }
+                        </TableCell>
+                        {/* 입고번호 */}
+                        <TableCell className="font-mono whitespace-nowrap">
+                          {inboundNo}
+                          <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
+                        </TableCell>
+                        {/* 마스터 필드 (ts.visibleColumns 순서) */}
+                        {visibleMasterLayout.map((col) => {
+                          switch (col.key) {
+                            case "inbound_type": return (
+                              <TableCell key={col.key} className="text-[13px]">
+                                <Badge variant={getTypeVariant(resolveInboundType(master.inbound_type))} className="text-[11px]">
+                                  {resolveInboundType(master.inbound_type)}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "inbound_date": return (
+                              <TableCell key={col.key} className="text-[13px] whitespace-nowrap">
+                                {master.inbound_date ? new Date(master.inbound_date).toLocaleDateString("ko-KR") : "-"}
+                              </TableCell>
+                            );
+                            case "reference_number": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.reference_number || ""}</span>
+                              </TableCell>
+                            );
+                            case "supplier_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.supplier_name || ""}</span>
+                              </TableCell>
+                            );
+                            case "warehouse_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
+                              </TableCell>
+                            );
+                            case "inbound_status": return (
+                              <TableCell key={col.key} className="text-[13px]">
+                                <Badge variant={getStatusVariant(master.inbound_status)} className="text-[11px]">
+                                  {master.inbound_status || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "memo": return (
+                              <TableCell key={col.key} className="text-muted-foreground text-[13px]">
+                                <span className="block truncate max-w-[110px]">{master.memo || ""}</span>
+                              </TableCell>
+                            );
+                            default: return <TableCell key={col.key} className="text-[13px]">{(master as any)[col.key] ?? ""}</TableCell>;
+                          }
+                        })}
+                      </TableRow>
+
+                      {/* 디테일 서브 헤더 (펼쳤을 때만) */}
+                      {isExpanded && (
+                        <TableRow
+                          className={cn(
+                            "border-l-[3px] border-l-primary/30 bg-muted/60",
+                            closingOrders.has(inboundNo) ? "tree-detail-row-closing" : "tree-detail-row",
+                          )}
+                        >
+                          <TableCell />
+                          <TableCell />
+                          <TableCell />
+                          {visibleDetailCols.map((col) => {
+                            const isRight = ["inbound_qty", "unit_price", "total_amount"].includes(col.key);
+                            const isSorted = sortState?.key === col.key;
+                            const uniqueVals = Array.from(new Set(
+                              group.details.map((d) => {
+                                let v = (d as any)[col.key];
+                                if (col.key === "source_table") v = SOURCE_TABLE_LABEL[v] || v;
+                                return v;
+                              }).filter((v: any) => v != null && v !== "").map(String)
+                            )).sort();
+                            const filterVals = headerFilters[col.key] || new Set<string>();
+                            return (
+                              <TableCell
+                                key={col.key}
+                                className={cn(
+                                  "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 select-none",
+                                  isRight && "text-right",
+                                )}
+                              >
+                                <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                                  <div
+                                    className="flex items-center gap-1 cursor-pointer min-w-0"
+                                    onClick={() => handleSort(col.key)}
+                                  >
+                                    <span className="truncate">{col.label}</span>
+                                    {isSorted && (
+                                      sortState!.direction === "asc"
+                                        ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                                        : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                                    )}
+                                  </div>
+                                  {uniqueVals.length > 0 && (
+                                    <HeaderFilterPopover
+                                      colKey={col.key} colLabel={col.label}
+                                      uniqueValues={uniqueVals} filterValues={filterVals}
+                                      onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                                    />
+                                  )}
+                                </div>
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                      )}
+
+                      {/* 디테일 행 (펼쳤을 때만) */}
+                      {isExpanded && group.details.map((row, detailIdx) => {
+                        const isClosing = closingOrders.has(inboundNo);
+                        const isChecked = checkedIds.includes(row.id);
+                        return (
+                          <TableRow
+                            key={`${row.id}-${detailIdx}`}
+                            className={cn(
+                              "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                              isClosing ? "tree-detail-row-closing" : "tree-detail-row",
+                              isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                            )}
+                            onClick={() => {
+                              setCheckedIds((prev) =>
+                                prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                              );
+                            }}
+                          >
+                            <TableCell
+                              className="text-center cursor-pointer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                            >
+                              <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                            </TableCell>
+                            <TableCell className="relative">
+                              <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
+                            </TableCell>
+                            <TableCell />
+                            {visibleDetailCols.map((col) => {
+                              switch (col.key) {
+                                case "source_table": return <TableCell key={col.key} className="text-[13px]">{row.source_table ? SOURCE_TABLE_LABEL[row.source_table] || row.source_table : "-"}</TableCell>;
+                                case "item_number": return <TableCell key={col.key} className="font-mono text-[13px]">{row.item_number || ""}</TableCell>;
+                                case "item_name": return <TableCell key={col.key} className="text-[13px] max-w-[160px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>;
+                                case "spec": return <TableCell key={col.key} className="text-[13px] text-muted-foreground">{row.spec || ""}</TableCell>;
+                                case "inbound_qty": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.inbound_qty ? Number(row.inbound_qty).toLocaleString() : ""}</TableCell>;
+                                case "unit_price": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>;
+                                case "total_amount": return <TableCell key={col.key} className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>;
+                                default: return <TableCell key={col.key} className="text-[13px]">{(row as any)[col.key] ?? ""}</TableCell>;
+                              }
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                    </React.Fragment>
+                  );
+                })
               )}
             </TableBody>
           </Table>
@@ -713,56 +1186,19 @@ export default function ReceivingPage() {
       </div>
 
       {/* 입고 등록 모달 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title="입고 등록"
-        description="입고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가하세요."
-        defaultMaxWidth="sm:max-w-[1600px]"
-        defaultWidth="w-[95vw]"
-        className="h-[90vh] p-0"
-        contentClassName="overflow-hidden flex flex-col"
-        footer={
-          <div className="flex w-full items-center justify-between px-6 py-3">
-            <div className="text-muted-foreground text-xs">
-              {selectedItems.length > 0 ? (
-                <>
-                  {totalSummary.count}건 | 수량 합계:{" "}
-                  {totalSummary.qty.toLocaleString()} | 금액 합계:{" "}
-                  {totalSummary.amount.toLocaleString()}원
-                </>
-              ) : (
-                "품목을 추가해주세요"
-              )}
-            </div>
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setIsModalOpen(false)}
-                className="h-9 text-sm"
-              >
-                취소
-              </Button>
-              <Button
-                onClick={handleSave}
-                disabled={saving || selectedItems.length === 0}
-                className="h-9 text-sm"
-              >
-                {saving ? (
-                  <Loader2 className="mr-1 h-4 w-4 animate-spin" />
-                ) : (
-                  <Save className="mr-1 h-4 w-4" />
-                )}
-                저장
-              </Button>
-            </div>
-          </div>
-        }
-      >
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="sm:max-w-[1600px] w-[95vw] h-[90vh] p-0 flex flex-col overflow-hidden">
+          <DialogHeader className="shrink-0 px-6 pt-4 pb-2 border-b">
+            <DialogTitle>입고 등록</DialogTitle>
+            <DialogDescription>
+              입고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가해 주세요.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-hidden flex flex-col">
 
           {/* 입고유형 선택 */}
-          <div className="flex items-center gap-4 border-b px-6 py-3">
-            <Label className="text-sm font-semibold">입고유형</Label>
+          <div className="flex items-center gap-4 border-b bg-muted/30 px-6 py-2.5">
+            <Label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide">입고유형</Label>
             <Select value={modalInboundType} onValueChange={handleInboundTypeChange}>
               <SelectTrigger className="h-9 w-[160px] text-sm">
                 <SelectValue />
@@ -791,7 +1227,7 @@ export default function ReceivingPage() {
               <ResizablePanel defaultSize={60} minSize={35}>
                 <div className="flex h-full flex-col">
                   {/* 소스 검색 바 */}
-                  <div className="flex items-center gap-2 border-b px-4 py-3">
+                  <div className="flex items-center gap-2 border-b px-4 py-2.5">
                     <Input
                       placeholder={
                         modalInboundType === "구매입고"
@@ -803,23 +1239,28 @@ export default function ReceivingPage() {
                       value={sourceKeyword}
                       onChange={(e) => setSourceKeyword(e.target.value)}
                       onKeyDown={(e) => e.key === "Enter" && searchSourceData()}
-                      className="h-8 flex-1 text-xs"
+                      className="h-9 flex-1 text-xs"
                     />
-                    <Button size="sm" onClick={searchSourceData} className="h-8">
+                    <Button size="sm" onClick={searchSourceData} className="h-9">
                       <Search className="mr-1 h-3 w-3" />
                       검색
                     </Button>
                   </div>
 
                   {/* 소스 데이터 테이블 */}
-                  <div className="flex-1 overflow-auto px-4 py-2">
-                    <h4 className="text-muted-foreground mb-2 text-xs font-semibold">
-                      {modalInboundType === "구매입고"
-                        ? "미입고 발주 목록"
-                        : modalInboundType === "반품입고"
-                          ? "출하 목록"
-                          : "품목 목록"}
-                    </h4>
+                  <div className="flex-1 overflow-auto">
+                    <div className="flex items-center gap-2 px-4 py-2.5 bg-muted/50 border-b">
+                      <h4 className="text-[13px] font-bold">
+                        {modalInboundType === "구매입고"
+                          ? "미입고 발주 목록"
+                          : modalInboundType === "반품입고"
+                            ? "출하 목록"
+                            : "품목 목록"}
+                      </h4>
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {sourceTotalCount}건
+                      </span>
+                    </div>
 
                     {sourceLoading ? (
                       <div className="flex h-40 items-center justify-center">
@@ -848,7 +1289,7 @@ export default function ReceivingPage() {
 
                   {/* 페이징 */}
                   {sourceTotalCount > 0 && (
-                    <div className="flex shrink-0 items-center justify-between border-t bg-muted/10 px-4 py-2">
+                    <div className="flex shrink-0 items-center justify-between border-t bg-muted/30 px-4 py-2">
                       <div className="flex items-center gap-2">
                         <span className="text-muted-foreground text-[11px]">표시:</span>
                         <Input
@@ -901,31 +1342,31 @@ export default function ReceivingPage() {
                 <div className="flex h-full flex-col">
                   {/* 입고 정보 입력 */}
                   <div className="space-y-3 border-b bg-muted/30 px-4 py-3">
-                    <h4 className="text-sm font-semibold">입고 정보</h4>
+                    <h4 className="text-[13px] font-bold text-foreground">입고 정보</h4>
                     <div className="grid grid-cols-2 gap-3">
                       <div>
-                        <Label className="text-[11px]">입고번호</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">입고번호</Label>
                         <Input
                           value={modalInboundNo}
                           readOnly
-                          className="bg-muted h-8 text-xs"
+                          className="bg-muted h-9 text-xs"
                         />
                       </div>
                       <div>
-                        <Label className="text-[11px]">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">
                           입고일 <span className="text-destructive">*</span>
                         </Label>
                         <Input
                           type="date"
                           value={modalInboundDate}
                           onChange={(e) => setModalInboundDate(e.target.value)}
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                       <div>
-                        <Label className="text-[11px]">창고</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">창고</Label>
                         <Select value={modalWarehouse} onValueChange={setModalWarehouse}>
-                          <SelectTrigger className="h-8 text-xs">
+                          <SelectTrigger className="h-9 text-xs">
                             <SelectValue placeholder="창고 선택" />
                           </SelectTrigger>
                           <SelectContent>
@@ -938,62 +1379,65 @@ export default function ReceivingPage() {
                         </Select>
                       </div>
                       <div>
-                        <Label className="text-[11px]">위치</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">위치</Label>
                         <Input
                           value={modalLocation}
                           onChange={(e) => setModalLocation(e.target.value)}
                           placeholder="위치 입력"
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                       <div>
-                        <Label className="text-[11px]">검수자</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">검수자</Label>
                         <Input
                           value={modalInspector}
                           onChange={(e) => setModalInspector(e.target.value)}
                           placeholder="검수자"
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                       <div>
-                        <Label className="text-[11px]">담당자</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">담당자</Label>
                         <Input
                           value={modalManager}
                           onChange={(e) => setModalManager(e.target.value)}
                           placeholder="담당자"
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                       <div className="col-span-2">
-                        <Label className="text-[11px]">메모</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">메모</Label>
                         <Input
                           value={modalMemo}
                           onChange={(e) => setModalMemo(e.target.value)}
                           placeholder="메모"
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                     </div>
                   </div>
 
                   {/* 선택된 품목 테이블 */}
-                  <div className="flex-1 overflow-auto px-4 py-2">
-                    <h4 className="text-muted-foreground mb-2 text-xs font-semibold">
-                      입고 처리 품목 ({selectedItems.length}건)
-                    </h4>
+                  <div className="flex-1 overflow-auto">
+                    <div className="flex items-center gap-2 border-b bg-muted/50 px-4 py-2.5">
+                      <h4 className="text-[13px] font-bold">입고 처리 품목</h4>
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {selectedItems.length}건
+                      </span>
+                    </div>
 
                     {selectedItems.length === 0 ? (
-                      <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-xs">
-                        <Package className="mb-2 h-8 w-8 opacity-30" />
-                        좌측에서 품목을 선택하여 추가해주세요
+                      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+                        <Inbox className="h-8 w-8 opacity-30" />
+                        <p className="text-xs font-medium">좌측에서 품목을 선택하여 추가해 주세요</p>
                       </div>
                     ) : (
                       <Table>
-                        <TableHeader>
-                          <TableRow className="text-[11px]">
-                            <TableHead className="w-[30px] p-2">No</TableHead>
-                            <TableHead className="p-2">품목명</TableHead>
-                            <TableHead className="p-2">참조번호</TableHead>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
                             <TableHead className="w-[80px] p-2 text-right">
                               수량
                             </TableHead>
@@ -1054,7 +1498,7 @@ export default function ReceivingPage() {
                                   min={0}
                                 />
                               </TableCell>
-                              <TableCell className="p-2 text-right text-xs font-semibold">
+                              <TableCell className="p-2 text-right text-[13px] font-semibold">
                                 {item.total_amount.toLocaleString()}
                               </TableCell>
                               <TableCell className="p-2 text-center">
@@ -1078,7 +1522,54 @@ export default function ReceivingPage() {
             </ResizablePanelGroup>
           </div>
 
-      </FullscreenDialog>
+          </div>
+          <DialogFooter className="shrink-0 border-t px-0 py-0">
+            <div className="flex w-full items-center justify-between px-6 py-2.5">
+              <div className="text-muted-foreground text-xs">
+                {selectedItems.length > 0 ? (
+                  <span className="flex items-center gap-3">
+                    <span className="font-semibold text-foreground">{totalSummary.count}건</span>
+                    <span>수량 합계: <span className="font-medium text-foreground">{totalSummary.qty.toLocaleString()}</span></span>
+                    <span>금액 합계: <span className="font-medium text-foreground">{totalSummary.amount.toLocaleString()}원</span></span>
+                  </span>
+                ) : (
+                  "품목을 추가해 주세요"
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsModalOpen(false)}
+                  className="h-9 text-sm"
+                >
+                  취소
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={saving || selectedItems.length === 0}
+                  className="h-9 text-sm"
+                >
+                  {saving ? (
+                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="mr-1 h-4 w-4" />
+                  )}
+                  저장
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
@@ -1096,31 +1587,32 @@ function SourcePurchaseOrderTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 발주 데이터를 조회하세요
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 발주 데이터를 조회해 주세요</p>
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader className="sticky top-0 bg-background z-10">
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">발주번호</TableHead>
-          <TableHead className="p-2">공급처</TableHead>
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">발주수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">입고수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">미입고</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">미입고</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
-        {data.map((po) => {
+        {data.map((po, idx) => {
           const isSelected = selectedKeys.includes(`po-${po.id}`);
           return (
             <TableRow
-              key={po.id}
+              key={`${po.source_table || 'po'}-${po.id}-${idx}`}
               className={cn(
                 "cursor-pointer text-xs transition-colors",
                 isSelected && "bg-primary/5"
@@ -1153,7 +1645,7 @@ function SourcePurchaseOrderTable({
               <TableCell className="p-2 text-right">
                 {Number(po.received_qty).toLocaleString()}
               </TableCell>
-              <TableCell className="p-2 text-right font-semibold text-blue-600">
+              <TableCell className="p-2 text-right font-semibold text-primary">
                 {Number(po.remain_qty).toLocaleString()}
               </TableCell>
             </TableRow>
@@ -1175,22 +1667,23 @@ function SourceShipmentTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 출하 데이터를 조회하세요
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 출하 데이터를 조회해 주세요</p>
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader className="sticky top-0 bg-background z-10">
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">출하번호</TableHead>
-          <TableHead className="p-2">출하일</TableHead>
-          <TableHead className="p-2">거래처</TableHead>
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">출하수량</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하일</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하수량</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -1252,22 +1745,23 @@ function SourceItemTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 품목 데이터를 조회하세요
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 품목 데이터를 조회해 주세요</p>
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader className="sticky top-0 bg-background z-10">
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[80px] p-2">규격</TableHead>
-          <TableHead className="w-[80px] p-2">재질</TableHead>
-          <TableHead className="w-[60px] p-2">단위</TableHead>
-          <TableHead className="w-[80px] p-2 text-right">기준가</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+          <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
diff --git a/frontend/app/(main)/COMPANY_29/logistics/warehouse/page.tsx b/frontend/app/(main)/COMPANY_29/logistics/warehouse/page.tsx
new file mode 100644
index 00000000..96b3d47e
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/logistics/warehouse/page.tsx
@@ -0,0 +1,1608 @@
+"use client";
+
+/**
+ * 창고정보관리 — 하드코딩 페이지 (Type B 마스터-디테일)
+ *
+ * 좌측: 창고 목록 (warehouse_info)
+ * 우측: 선택 창고의 로케이션 목록 (warehouse_location)
+ *
+ * ★ 하위 위치가 있으면 창고 삭제 불가
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Plus,
+  Trash2,
+  Loader2,
+  Download,
+  MapPin,
+  Building2,
+  Settings2,
+  Layers,
+  Info,
+  Eye,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+
+const WAREHOUSE_TABLE = "warehouse_info";
+
+const WAREHOUSE_COLUMNS = [
+  { key: "warehouse_code", label: "창고코드" },
+  { key: "warehouse_name", label: "창고명" },
+  { key: "warehouse_type", label: "유형" },
+  { key: "manager", label: "관리자" },
+  { key: "status", label: "상태" },
+];
+const LOCATION_TABLE = "warehouse_location";
+
+const getStatusVariant = (
+  status: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "사용":
+    case "사용중":
+      return "default";
+    case "미사용":
+      return "secondary";
+    case "폐쇄":
+      return "destructive";
+    default:
+      return "outline";
+  }
+};
+
+const getTypeVariant = (
+  type: string
+): "default" | "secondary" | "outline" => {
+  switch (type) {
+    case "원자재":
+    case "일반":
+      return "default";
+    case "완제품":
+    case "보관":
+      return "secondary";
+    default:
+      return "outline";
+  }
+};
+
+export default function WarehouseManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-warehouse", WAREHOUSE_TABLE, WAREHOUSE_COLUMNS);
+
+  // 좌측: 창고 목록
+  const [warehouses, setWarehouses] = useState<any[]>([]);
+  const [warehouseLoading, setWarehouseLoading] = useState(false);
+  const [warehouseCount, setWarehouseCount] = useState(0);
+  const [selectedWarehouseId, setSelectedWarehouseId] = useState<string | null>(null);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 로케이션 목록
+  const [locations, setLocations] = useState<any[]>([]);
+  const [locationLoading, setLocationLoading] = useState(false);
+  const [locationCheckedIds, setLocationCheckedIds] = useState<string[]>([]);
+
+  // 모달: 창고 등록/수정
+  const [warehouseModalOpen, setWarehouseModalOpen] = useState(false);
+  const [warehouseEditMode, setWarehouseEditMode] = useState(false);
+  const [warehouseForm, setWarehouseForm] = useState<Record<string, any>>({});
+  const [warehouseSaving, setWarehouseSaving] = useState(false);
+
+  // 모달: 위치 등록/수정
+  const [locationModalOpen, setLocationModalOpen] = useState(false);
+  const [locationEditMode, setLocationEditMode] = useState(false);
+  const [locationForm, setLocationForm] = useState<Record<string, any>>({});
+  const [locationSaving, setLocationSaving] = useState(false);
+
+  // 위치코드 자동 채번
+  const [locNumberingRuleId, setLocNumberingRuleId] = useState<string | null>(null);
+  const [locPreviewCode, setLocPreviewCode] = useState<string | null>(null);
+  const [whNumberingRuleId, setWhNumberingRuleId] = useState<string | null>(null);
+  const [whPreviewCode, setWhPreviewCode] = useState<string | null>(null);
+
+  // 모달: 랙 구조 일괄 등록
+  const [rackModalOpen, setRackModalOpen] = useState(false);
+  const [rackFloor, setRackFloor] = useState("");
+  const [rackZone, setRackZone] = useState("");
+  const [rackConditions, setRackConditions] = useState<
+    { id: string; startRow: number; endRow: number; levels: number }[]
+  >([]);
+  const [rackLocationType, setRackLocationType] = useState("");
+  const [rackStatus, setRackStatus] = useState("");
+  const [rackPreview, setRackPreview] = useState<any[]>([]);
+  const [rackSaving, setRackSaving] = useState(false);
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+  const [locationCategoryOptions, setLocationCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+
+      const whOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["warehouse_type", "status"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${WAREHOUSE_TABLE}/${col}/values`
+          );
+          if (res.data?.success) whOpts[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setCategoryOptions(whOpts);
+
+      const locOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["location_type", "status", "floor", "zone"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${LOCATION_TABLE}/${col}/values`
+          );
+          if (res.data?.success) locOpts[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setLocationCategoryOptions(locOpts);
+    };
+    load();
+  }, []);
+
+  // 카테고리 코드→라벨 변환 헬퍼
+  const resolveCategory = useCallback(
+    (
+      optMap: Record<string, { code: string; label: string }[]>,
+      col: string,
+      code: string
+    ) => {
+      if (!code) return "";
+      return optMap[col]?.find((o) => o.code === code)?.label || code;
+    },
+    []
+  );
+
+  // 창고 목록 조회
+  const fetchWarehouses = useCallback(async () => {
+    setWarehouseLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(
+        `/table-management/tables/${WAREHOUSE_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+          autoFilter: true,
+          sort: { columnName: "warehouse_code", order: "asc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const data = raw.map((r: any) => ({
+        ...r,
+        warehouse_type: resolveCategory(categoryOptions, "warehouse_type", r.warehouse_type),
+        status: resolveCategory(categoryOptions, "status", r.status),
+      }));
+      setWarehouses(data);
+      setWarehouseCount(res.data?.data?.total || raw.length);
+    } catch {
+      toast.error("창고 목록을 불러오지 못했어요");
+    } finally {
+      setWarehouseLoading(false);
+    }
+  }, [categoryOptions, resolveCategory, searchFilters]);
+
+  useEffect(() => {
+    fetchWarehouses();
+  }, [fetchWarehouses]);
+
+  // 선택된 창고
+  const selectedWarehouse = warehouses.find((w) => w.id === selectedWarehouseId);
+
+  // 로케이션 조회
+  const fetchLocations = useCallback(async () => {
+    if (!selectedWarehouse?.warehouse_code) {
+      setLocations([]);
+      return;
+    }
+    setLocationLoading(true);
+    try {
+      const res = await apiClient.post(
+        `/table-management/tables/${LOCATION_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: {
+            enabled: true,
+            filters: [
+              {
+                columnName: "warehouse_code",
+                operator: "equals",
+                value: selectedWarehouse.warehouse_code,
+              },
+            ],
+          },
+          autoFilter: true,
+          sort: { columnName: "location_code", order: "asc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const data = raw.map((r: any) => ({
+        ...r,
+        location_type: resolveCategory(locationCategoryOptions, "location_type", r.location_type),
+        status: resolveCategory(locationCategoryOptions, "status", r.status),
+      }));
+      setLocations(data);
+    } catch {
+      toast.error("위치 목록을 불러오지 못했어요");
+    } finally {
+      setLocationLoading(false);
+    }
+  }, [selectedWarehouse?.warehouse_code, locationCategoryOptions, resolveCategory]);
+
+  useEffect(() => {
+    setLocationCheckedIds([]);
+    fetchLocations();
+  }, [fetchLocations]);
+
+  // 체크박스 헬퍼
+  const allLocationChecked =
+    locations.length > 0 && locationCheckedIds.length === locations.length;
+  const someLocationChecked =
+    locationCheckedIds.length > 0 && locationCheckedIds.length < locations.length;
+
+  const toggleAllLocations = (checked: boolean) => {
+    setLocationCheckedIds(checked ? locations.map((l) => l.id) : []);
+  };
+
+  const toggleLocation = (id: string, checked: boolean) => {
+    setLocationCheckedIds((prev) =>
+      checked ? [...prev, id] : prev.filter((i) => i !== id)
+    );
+  };
+
+  // ─── 창고 CRUD ───
+
+  const openWarehouseCreateModal = async () => {
+    setWarehouseEditMode(false);
+    setWarehouseForm({});
+    setWhNumberingRuleId(null);
+    setWhPreviewCode(null);
+    setWarehouseModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/warehouse_info/warehouse_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setWhNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setWhPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openWarehouseEditModal = (row: any) => {
+    setWarehouseEditMode(true);
+    setWarehouseForm({ ...row });
+    setWarehouseModalOpen(true);
+  };
+
+  const handleWarehouseSave = async () => {
+    if (!whNumberingRuleId && !warehouseForm.warehouse_code?.trim()) {
+      toast.error("창고코드를 입력해주세요");
+      return;
+    }
+    if (!warehouseForm.warehouse_name?.trim()) {
+      toast.error("창고명을 입력해주세요");
+      return;
+    }
+    setWarehouseSaving(true);
+    try {
+      let finalWarehouseCode = warehouseForm.warehouse_code?.trim() || "";
+      if (!warehouseEditMode && whNumberingRuleId) {
+        const allocRes = await allocateNumberingCode(whNumberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalWarehouseCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setWarehouseSaving(false);
+          return;
+        }
+      }
+      const fields = {
+        warehouse_code: finalWarehouseCode,
+        warehouse_name: warehouseForm.warehouse_name?.trim(),
+        warehouse_type: warehouseForm.warehouse_type || "",
+        manager: warehouseForm.manager || "",
+        address: warehouseForm.address || "",
+        status: warehouseForm.status || "",
+        description: warehouseForm.description || "",
+      };
+
+      // 신규 등록 시 창고코드 중복 체크
+      if (!warehouseEditMode) {
+        const dup = warehouses.find(w => w.warehouse_code === fields.warehouse_code);
+        if (dup) {
+          toast.error(`창고코드 "${fields.warehouse_code}"가 이미 존재해요`);
+          setWarehouseSaving(false);
+          return;
+        }
+      }
+
+      if (warehouseEditMode && warehouseForm.id) {
+        await apiClient.put(
+          `/table-management/tables/${WAREHOUSE_TABLE}/edit`,
+          {
+            originalData: { id: warehouseForm.id },
+            updatedData: fields,
+          }
+        );
+        toast.success("창고 정보가 수정되었어요");
+      } else {
+        await apiClient.post(
+          `/table-management/tables/${WAREHOUSE_TABLE}/add`,
+          { id: crypto.randomUUID(), ...fields }
+        );
+        toast.success("창고가 등록되었어요");
+      }
+      setWarehouseModalOpen(false);
+      fetchWarehouses();
+    } catch {
+      toast.error(warehouseEditMode ? "창고 수정에 실패했어요" : "창고 등록에 실패했어요");
+    } finally {
+      setWarehouseSaving(false);
+    }
+  };
+
+  const handleWarehouseDelete = async () => {
+    if (!selectedWarehouse) return;
+    if (locations.length > 0) {
+      toast.error("하위 위치가 있어 삭제할 수 없어요. 위치를 먼저 삭제해주세요.");
+      return;
+    }
+    const ok = await confirm(
+      `"${selectedWarehouse.warehouse_name}" 창고를 삭제할까요?`
+    );
+    if (!ok) return;
+    try {
+      await apiClient.delete(
+        `/table-management/tables/${WAREHOUSE_TABLE}/delete`,
+        { data: [{ id: selectedWarehouse.id }] }
+      );
+      toast.success("창고가 삭제되었어요");
+      setSelectedWarehouseId(null);
+      fetchWarehouses();
+    } catch {
+      toast.error("창고 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 위치 CRUD ───
+
+  const openLocationCreateModal = async () => {
+    setLocationEditMode(false);
+    setLocationForm({ warehouse_code: selectedWarehouse?.warehouse_code || "" });
+    setLocNumberingRuleId(null);
+    setLocPreviewCode(null);
+    setLocationModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/warehouse_location/location_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setLocNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setLocPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openLocationEditModal = (row: any) => {
+    setLocationEditMode(true);
+    setLocationForm({ ...row });
+    setLocationModalOpen(true);
+  };
+
+  const handleLocationSave = async () => {
+    if (!locNumberingRuleId && !locationForm.location_code?.trim()) {
+      toast.error("위치코드를 입력해주세요");
+      return;
+    }
+    if (!locationForm.location_name?.trim()) {
+      toast.error("위치명을 입력해주세요");
+      return;
+    }
+    setLocationSaving(true);
+    try {
+      let finalLocationCode = locationForm.location_code?.trim() || "";
+      if (!locationEditMode && locNumberingRuleId) {
+        const allocRes = await allocateNumberingCode(locNumberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalLocationCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setLocationSaving(false);
+          return;
+        }
+      }
+
+      const fields = {
+        warehouse_code: locationForm.warehouse_code || selectedWarehouse?.warehouse_code || "",
+        location_code: finalLocationCode,
+        location_name: locationForm.location_name?.trim(),
+        floor: locationForm.floor || "",
+        zone: locationForm.zone || "",
+        row_num: locationForm.row_num || "",
+        level_num: locationForm.level_num || "",
+        location_type: locationForm.location_type || "",
+        status: locationForm.status || "",
+      };
+
+      if (locationEditMode && locationForm.id) {
+        await apiClient.put(
+          `/table-management/tables/${LOCATION_TABLE}/edit`,
+          {
+            originalData: { id: locationForm.id },
+            updatedData: fields,
+          }
+        );
+        toast.success("위치 정보가 수정되었어요");
+      } else {
+        await apiClient.post(
+          `/table-management/tables/${LOCATION_TABLE}/add`,
+          { id: crypto.randomUUID(), ...fields }
+        );
+        toast.success("위치가 등록되었어요");
+      }
+      setLocationModalOpen(false);
+      fetchLocations();
+    } catch {
+      toast.error(locationEditMode ? "위치 수정에 실패했어요" : "위치 등록에 실패했어요");
+    } finally {
+      setLocationSaving(false);
+    }
+  };
+
+  const handleLocationDelete = async () => {
+    if (locationCheckedIds.length === 0) {
+      toast.error("삭제할 위치를 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`${locationCheckedIds.length}건의 위치를 삭제할까요?`);
+    if (!ok) return;
+    try {
+      for (const id of locationCheckedIds) {
+        await apiClient.delete(
+          `/table-management/tables/${LOCATION_TABLE}/delete`,
+          { data: [{ id }] }
+        );
+      }
+      toast.success(`${locationCheckedIds.length}건의 위치가 삭제되었어요`);
+      setLocationCheckedIds([]);
+      fetchLocations();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "위치 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 랙 구조 일괄 등록 ───
+
+  const openRackModal = () => {
+    setRackFloor("");
+    setRackZone("");
+    setRackConditions([]);
+    setRackLocationType("");
+    setRackStatus("");
+    setRackPreview([]);
+    setRackSaving(false);
+    setRackModalOpen(true);
+  };
+
+  const addRackCondition = () => {
+    const lastEnd = rackConditions.length > 0
+      ? rackConditions[rackConditions.length - 1].endRow
+      : 0;
+    setRackConditions((prev) => [
+      ...prev,
+      { id: crypto.randomUUID(), startRow: lastEnd + 1, endRow: lastEnd + 1, levels: 1 },
+    ]);
+  };
+
+  const updateRackCondition = (id: string, field: string, value: number) => {
+    setRackConditions((prev) =>
+      prev.map((c) => (c.id === id ? { ...c, [field]: value } : c))
+    );
+  };
+
+  const removeRackCondition = (id: string) => {
+    setRackConditions((prev) => prev.filter((c) => c.id !== id));
+  };
+
+  const generateRackPreview = () => {
+    if (!rackFloor.trim() || !rackZone.trim()) {
+      toast.error("층과 구역을 입력해주세요");
+      return;
+    }
+    if (rackConditions.length === 0) {
+      toast.error("조건을 1개 이상 추가해주세요");
+      return;
+    }
+    // 조건 유효성 검사
+    for (const cond of rackConditions) {
+      if (cond.startRow < 1 || cond.endRow < 1 || cond.levels < 1) {
+        toast.error("열 범위와 단 수는 1 이상이어야 합니다");
+        return;
+      }
+      if (cond.endRow < cond.startRow) {
+        toast.error("끝 열은 시작 열보다 크거나 같아야 합니다");
+        return;
+      }
+    }
+
+    const whCode = selectedWarehouse?.warehouse_code || "";
+    // 카테고리 코드→라벨 변환 (셀렉트에서 코드가 저장되므로)
+    const floorOpts = locationCategoryOptions["floor"] || [];
+    const zoneOpts = locationCategoryOptions["zone"] || [];
+    const floorLabel = floorOpts.find(o => o.code === rackFloor)?.label || rackFloor.trim();
+    const zoneLabel = zoneOpts.find(o => o.code === rackZone)?.label || rackZone.trim();
+    const floorCode = floorLabel.replace(/층$/, "");
+    const zoneCode = zoneLabel.replace(/구역$/, "");
+
+    // 기존 위치코드 Set (중복 체크용)
+    const existingCodes = new Set(locations.map((l: any) => l.location_code));
+    const seen = new Set<string>();
+    const items: any[] = [];
+    const duplicates: string[] = [];
+
+    for (const cond of rackConditions) {
+      for (let row = cond.startRow; row <= cond.endRow; row++) {
+        for (let level = 1; level <= cond.levels; level++) {
+          const rowStr = String(row).padStart(2, "0");
+          const locationCode = `${whCode}-${floorCode}${zoneCode}-${rowStr}-${level}`;
+          // 미리보기 내부 중복 제거
+          if (seen.has(locationCode)) continue;
+          seen.add(locationCode);
+          // 기존 DB 데이터와 중복 체크
+          if (existingCodes.has(locationCode)) {
+            duplicates.push(locationCode);
+            continue;
+          }
+          const locationName = `${zoneCode}구역-${rowStr}열-${level}단`;
+          items.push({
+            location_code: locationCode,
+            location_name: locationName,
+            warehouse_code: whCode,
+            floor: floorLabel,
+            zone: zoneLabel,
+            row_num: String(row),
+            level_num: String(level),
+            location_type: rackLocationType,
+            status: rackStatus,
+          });
+        }
+      }
+    }
+    if (duplicates.length > 0) {
+      toast.error(`이미 등록된 위치 ${duplicates.length}건이 제외되었어요 (예: ${duplicates.slice(0, 3).join(", ")})`);
+    }
+    setRackPreview(items);
+  };
+
+  const handleRackBulkSave = async () => {
+    if (rackPreview.length === 0) {
+      toast.error("미리보기를 먼저 생성해주세요");
+      return;
+    }
+    setRackSaving(true);
+    try {
+      let successCount = 0;
+      for (const item of rackPreview) {
+        await apiClient.post(
+          `/table-management/tables/${LOCATION_TABLE}/add`,
+          { id: crypto.randomUUID(), ...item }
+        );
+        successCount++;
+      }
+      toast.success(`${successCount}개의 위치가 등록되었어요`);
+      setRackModalOpen(false);
+      fetchLocations();
+    } catch (err) {
+      toast.error("일괄 등록 중 오류가 발생했어요");
+    } finally {
+      setRackSaving(false);
+    }
+  };
+
+  // 랙 조건별 통계
+  const getRackConditionCount = (cond: { startRow: number; endRow: number; levels: number }) => {
+    if (cond.endRow < cond.startRow || cond.startRow < 1 || cond.levels < 1) return 0;
+    return (cond.endRow - cond.startRow + 1) * cond.levels;
+  };
+
+  // 랙 미리보기 통계
+  const rackStats = {
+    totalLocations: rackPreview.length,
+    totalRows: rackConditions.reduce((acc, c) => {
+      if (c.endRow >= c.startRow && c.startRow >= 1) return acc + (c.endRow - c.startRow + 1);
+      return acc;
+    }, 0),
+    maxLevels: rackConditions.reduce((acc, c) => Math.max(acc, c.levels || 0), 0),
+  };
+
+  // EDataTable 컬럼 정의
+  const warehouseColumns: EDataTableColumn[] = ts.visibleColumns.map((col) => {
+    const base: EDataTableColumn = { key: col.key, label: col.label };
+    if (col.key === "warehouse_type") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getTypeVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    if (col.key === "status") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getStatusVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    return base;
+  });
+
+  // 엑셀 내보내기
+  const handleExcelExport = () => {
+    if (warehouses.length === 0) {
+      toast.error("내보낼 데이터가 없어요");
+      return;
+    }
+    exportToExcel(
+      warehouses.map((r) => ({
+        창고코드: r.warehouse_code,
+        창고명: r.warehouse_name,
+        유형: r.warehouse_type,
+        관리자: r.manager,
+        상태: r.status,
+      })),
+      "창고정보"
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={WAREHOUSE_TABLE}
+        filterId="c16-warehouse"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={warehouses.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1 text-xs"
+              onClick={handleExcelExport}
+            >
+              <Download className="h-3.5 w-3.5" />
+              엑셀
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 패널 */}
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="flex-1 rounded-lg border bg-card"
+      >
+        {/* 좌측: 창고 목록 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+              <div className="flex items-center gap-2">
+                <span className="text-[13px] font-bold">창고 목록</span>
+                <Badge variant="default" className="rounded-full text-[11px]">
+                  {warehouses.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Button
+                  size="sm"
+                  className="h-7 gap-1 text-xs"
+                  onClick={openWarehouseCreateModal}
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                  등록
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-7 gap-1 text-xs text-destructive hover:text-destructive"
+                  onClick={handleWarehouseDelete}
+                  disabled={!selectedWarehouse}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+
+            <EDataTable
+              columns={warehouseColumns}
+              data={ts.groupData(warehouses)}
+              rowKey={(row) => row.id}
+              loading={warehouseLoading}
+              emptyMessage="등록된 창고가 없어요"
+              selectedId={selectedWarehouseId}
+              onSelect={(id) => setSelectedWarehouseId(id)}
+              onRowDoubleClick={(row) => openWarehouseEditModal(row)}
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+              columnOrderKey="c16-warehouse"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 로케이션 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex flex-col h-full">
+            {!selectedWarehouse ? (
+              <div className="flex flex-col items-center justify-center flex-1 m-5 border-2 border-dashed rounded-lg border-border">
+                <Building2 className="h-12 w-12 text-muted-foreground/40 mb-4" />
+                <p className="text-sm font-semibold text-muted-foreground">
+                  창고를 선택해주세요
+                </p>
+                <p className="text-xs text-muted-foreground/70 mt-1">
+                  좌측에서 창고를 선택하면 위치 정보가 표시돼요
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                  <div className="flex items-center gap-2">
+                    <MapPin className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-[13px] font-bold">
+                      {selectedWarehouse.warehouse_name}
+                    </span>
+                    <Badge
+                      variant="outline"
+                      className="rounded-full text-[11px] font-mono"
+                    >
+                      {selectedWarehouse.warehouse_code}
+                    </Badge>
+                    <Badge variant="secondary" className="rounded-full text-[10px]">
+                      {locations.length}개 위치
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={openRackModal}
+                    >
+                      <Layers className="h-3.5 w-3.5" />
+                      랙 구조 등록
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs text-destructive hover:text-destructive"
+                      onClick={handleLocationDelete}
+                      disabled={locationCheckedIds.length === 0}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                      삭제
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 로케이션 테이블 */}
+                <div className="flex-1 overflow-auto">
+                  {locationLoading ? (
+                    <div className="flex items-center justify-center h-32">
+                      <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : locations.length === 0 ? (
+                    <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">
+                      등록된 위치가 없어요
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="w-10 text-center">
+                            <Checkbox
+                              checked={
+                                someLocationChecked
+                                  ? "indeterminate"
+                                  : allLocationChecked
+                              }
+                              onCheckedChange={(v) =>
+                                toggleAllLocations(v === true)
+                              }
+                              aria-label="전체 선택"
+                            />
+                          </TableHead>
+                          <TableHead className="w-8 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">위치코드</TableHead>
+                          <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">위치명</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">층</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">구역</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">열</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {locations.map((loc, idx) => (
+                          <TableRow
+                            key={loc.id}
+                            className={cn(
+                              "cursor-pointer text-xs",
+                              locationCheckedIds.includes(loc.id) && "bg-primary/5"
+                            )}
+                            onDoubleClick={() => openLocationEditModal(loc)}
+                          >
+                            <TableCell className="text-center">
+                              <Checkbox
+                                checked={locationCheckedIds.includes(loc.id)}
+                                onCheckedChange={(v) =>
+                                  toggleLocation(loc.id, v === true)
+                                }
+                                aria-label="행 선택"
+                              />
+                            </TableCell>
+                            <TableCell className="text-center text-muted-foreground">
+                              {idx + 1}
+                            </TableCell>
+                            <TableCell className="font-mono truncate max-w-[110px]">
+                              {loc.location_code}
+                            </TableCell>
+                            <TableCell className="truncate max-w-[120px]">
+                              {loc.location_name}
+                            </TableCell>
+                            <TableCell className="text-center">{loc.floor}</TableCell>
+                            <TableCell>{loc.zone}</TableCell>
+                            <TableCell className="text-center">{loc.row_num}</TableCell>
+                            <TableCell className="text-center">{loc.level_num}</TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getTypeVariant(loc.location_type)}
+                                className="text-[10px]"
+                              >
+                                {loc.location_type}
+                              </Badge>
+                            </TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getStatusVariant(loc.status)}
+                                className="text-[10px]"
+                              >
+                                {loc.status}
+                              </Badge>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 창고 등록/수정 Dialog */}
+      <Dialog open={warehouseModalOpen} onOpenChange={setWarehouseModalOpen}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle>
+              {warehouseEditMode ? "창고 수정" : "창고 등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {warehouseEditMode
+                ? "창고 정보를 수정해주세요"
+                : "새로운 창고를 등록해주세요"}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid grid-cols-2 gap-4 py-2">
+            {/* 창고코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                창고코드 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={warehouseEditMode ? (warehouseForm.warehouse_code || "") : (whPreviewCode || "")}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_code: e.target.value }))
+                }
+                placeholder={warehouseEditMode ? "" : (whNumberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                disabled={warehouseEditMode}
+                readOnly={!warehouseEditMode && !!whNumberingRuleId}
+              />
+            </div>
+            {/* 창고명 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                창고명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={warehouseForm.warehouse_name || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_name: e.target.value }))
+                }
+                placeholder="창고명을 입력해주세요"
+              />
+            </div>
+            {/* 유형 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">유형</Label>
+              <Select
+                value={warehouseForm.warehouse_type || ""}
+                onValueChange={(v) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["warehouse_type"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">관리자</Label>
+              <Input
+                value={warehouseForm.manager || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, manager: e.target.value }))
+                }
+                placeholder="관리자를 입력해주세요"
+              />
+            </div>
+            {/* 상태 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+              <Select
+                value={warehouseForm.status || ""}
+                onValueChange={(v) =>
+                  setWarehouseForm((prev) => ({ ...prev, status: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["status"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 주소 (전체 너비) */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">주소</Label>
+              <Input
+                value={warehouseForm.address || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, address: e.target.value }))
+                }
+                placeholder="주소를 입력해주세요"
+              />
+            </div>
+            {/* 비고 (전체 너비) */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">비고</Label>
+              <Input
+                value={warehouseForm.description || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, description: e.target.value }))
+                }
+                placeholder="비고를 입력해주세요"
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setWarehouseModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleWarehouseSave} disabled={warehouseSaving}>
+              {warehouseSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              {warehouseEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 위치 등록/수정 Dialog */}
+      <Dialog open={locationModalOpen} onOpenChange={setLocationModalOpen}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle>
+              {locationEditMode ? "위치 수정" : "위치 등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {locationEditMode
+                ? "위치 정보를 수정해주세요"
+                : `${selectedWarehouse?.warehouse_name || ""} 창고에 새 위치를 등록해주세요`}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid grid-cols-2 gap-4 py-2">
+            {/* 창고코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">창고코드</Label>
+              <Input value={locationForm.warehouse_code || ""} disabled />
+            </div>
+            {/* 위치코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                위치코드 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={locationEditMode ? (locationForm.location_code || "") : (locPreviewCode || "")}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, location_code: e.target.value }))
+                }
+                placeholder={locationEditMode ? "" : (locNumberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                disabled={locationEditMode}
+                readOnly={!locationEditMode && !!locNumberingRuleId}
+              />
+            </div>
+            {/* 위치명 */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                위치명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={locationForm.location_name || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, location_name: e.target.value }))
+                }
+                placeholder="위치명을 입력해주세요"
+              />
+            </div>
+            {/* 층 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">층</Label>
+              <Input
+                value={locationForm.floor || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, floor: e.target.value }))
+                }
+                placeholder="층을 입력해주세요"
+              />
+            </div>
+            {/* 구역 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">구역</Label>
+              <Input
+                value={locationForm.zone || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, zone: e.target.value }))
+                }
+                placeholder="구역을 입력해주세요"
+              />
+            </div>
+            {/* 열 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">열</Label>
+              <Input
+                value={locationForm.row_num || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, row_num: e.target.value }))
+                }
+                placeholder="열을 입력해주세요"
+              />
+            </div>
+            {/* 단 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">단</Label>
+              <Input
+                value={locationForm.level_num || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, level_num: e.target.value }))
+                }
+                placeholder="단을 입력해주세요"
+              />
+            </div>
+            {/* 위치유형 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">위치유형</Label>
+              <Select
+                value={locationForm.location_type || ""}
+                onValueChange={(v) =>
+                  setLocationForm((prev) => ({ ...prev, location_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="위치유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(locationCategoryOptions["location_type"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 상태 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+              <Select
+                value={locationForm.status || ""}
+                onValueChange={(v) =>
+                  setLocationForm((prev) => ({ ...prev, status: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(locationCategoryOptions["status"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setLocationModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleLocationSave} disabled={locationSaving}>
+              {locationSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              {locationEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 랙 구조 일괄 등록 Dialog */}
+      <Dialog open={rackModalOpen} onOpenChange={setRackModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-3xl p-0 !gap-0" style={{ maxHeight: "90vh", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+          <div className="px-6 pt-6 pb-3 shrink-0">
+            <DialogTitle className="flex items-center gap-2">
+              <Layers className="h-5 w-5" />
+              랙 구조 일괄 등록
+            </DialogTitle>
+            <DialogDescription className="mt-1">
+              {selectedWarehouse?.warehouse_name} ({selectedWarehouse?.warehouse_code}) 창고에 랙 구조를 일괄 등록합니다
+            </DialogDescription>
+          </div>
+
+          <div className="flex-1 overflow-y-auto min-h-0">
+            <div className="space-y-6 px-6 py-4">
+              {/* 기본 정보 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  📍 기본 정보
+                </h3>
+                <div className="grid grid-cols-3 gap-4">
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      창고 <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      value={`${selectedWarehouse?.warehouse_name || ""} (${selectedWarehouse?.warehouse_code || ""})`}
+                      disabled
+                    />
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      층 <span className="text-destructive">*</span>
+                    </Label>
+                    {(locationCategoryOptions["floor"] || []).length > 0 ? (
+                      <Select value={rackFloor} onValueChange={setRackFloor}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="층 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(locationCategoryOptions["floor"] || []).map((o) => (
+                            <SelectItem key={o.code} value={o.code}>
+                              {o.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={rackFloor}
+                        onChange={(e) => setRackFloor(e.target.value)}
+                        placeholder="예: B1, 1F, 2F"
+                      />
+                    )}
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      구역 <span className="text-destructive">*</span>
+                    </Label>
+                    {(locationCategoryOptions["zone"] || []).length > 0 ? (
+                      <Select value={rackZone} onValueChange={setRackZone}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="구역 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(locationCategoryOptions["zone"] || []).map((o) => (
+                            <SelectItem key={o.code} value={o.code}>
+                              {o.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={rackZone}
+                        onChange={(e) => setRackZone(e.target.value)}
+                        placeholder="예: A, B, C"
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* 랙 라인 구조 설정 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  📊 랙 라인 구조 설정
+                </h3>
+
+                {/* 안내 박스 */}
+                <div className="rounded-lg bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 p-3 mb-3">
+                  <div className="flex items-start gap-2">
+                    <Info className="h-4 w-4 text-blue-600 dark:text-blue-400 mt-0.5 shrink-0" />
+                    <div className="text-xs text-blue-700 dark:text-blue-300 space-y-0.5">
+                      <p>1. 조건 추가 버튼을 클릭하여 랙 라인 조건을 생성하세요</p>
+                      <p>2. 각 조건마다 열 범위와 단 수를 입력하세요</p>
+                      <p>3. 예시: 조건1(1~3열, 3단), 조건2(4~6열, 5단)</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-xs text-muted-foreground">
+                    {rackConditions.length}개 조건
+                  </span>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={addRackCondition}
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    조건 추가
+                  </Button>
+                </div>
+
+                {rackConditions.length === 0 ? (
+                  <div className="flex flex-col items-center justify-center py-8 border-2 border-dashed rounded-lg border-border">
+                    <Layers className="h-8 w-8 text-muted-foreground/40 mb-2" />
+                    <p className="text-sm text-muted-foreground mb-2">
+                      조건을 추가하여 랙 구조를 설정하세요
+                    </p>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={addRackCondition}
+                    >
+                      <Plus className="h-3.5 w-3.5" />
+                      첫 번째 조건 추가
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {rackConditions.map((cond, idx) => (
+                      <div
+                        key={cond.id}
+                        className="flex items-center gap-3 rounded-lg border p-3 bg-card"
+                      >
+                        <span className="text-xs font-bold text-muted-foreground w-10 shrink-0">
+                          조건{idx + 1}
+                        </span>
+                        <div className="flex items-center gap-1.5 flex-1">
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-20 text-center text-xs"
+                            value={cond.startRow || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "startRow", Number(e.target.value) || 0)
+                            }
+                            placeholder="시작"
+                          />
+                          <span className="text-xs text-muted-foreground">~</span>
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-20 text-center text-xs"
+                            value={cond.endRow || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "endRow", Number(e.target.value) || 0)
+                            }
+                            placeholder="끝"
+                          />
+                          <span className="text-xs text-muted-foreground">열,</span>
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-16 text-center text-xs"
+                            value={cond.levels || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "levels", Number(e.target.value) || 0)
+                            }
+                            placeholder="단"
+                          />
+                          <span className="text-xs text-muted-foreground">단</span>
+                        </div>
+                        {getRackConditionCount(cond) > 0 && (
+                          <Badge variant="secondary" className="text-[10px] shrink-0">
+                            {cond.startRow}열 ~ {cond.endRow}열 × {cond.levels}단 = {getRackConditionCount(cond)}개
+                          </Badge>
+                        )}
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-7 w-7 p-0 text-destructive hover:text-destructive shrink-0"
+                          onClick={() => removeRackCondition(cond.id)}
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* 공통 설정 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  ⚙️ 공통 설정
+                </h3>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      위치 유형
+                    </Label>
+                    <Select value={rackLocationType} onValueChange={setRackLocationType}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="위치유형 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(locationCategoryOptions["location_type"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>
+                            {o.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      사용 여부
+                    </Label>
+                    <Select value={rackStatus} onValueChange={setRackStatus}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="상태 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(locationCategoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>
+                            {o.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+
+              {/* 등록 미리보기 */}
+              <div>
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-sm font-bold flex items-center gap-1.5">
+                    👁️ 등록 미리보기
+                  </h3>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={generateRackPreview}
+                  >
+                    <Eye className="h-3.5 w-3.5" />
+                    미리보기 생성
+                  </Button>
+                </div>
+
+                {rackPreview.length > 0 && (
+                  <>
+                    {/* 통계 카드 */}
+                    <div className="grid grid-cols-3 gap-3 mb-3">
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">총 위치</p>
+                        <p className="text-lg font-bold">{rackStats.totalLocations}개</p>
+                      </div>
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">열 수</p>
+                        <p className="text-lg font-bold">{rackStats.totalRows}개</p>
+                      </div>
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">최대 단</p>
+                        <p className="text-lg font-bold">{rackStats.maxLevels}</p>
+                      </div>
+                    </div>
+
+                    {/* 미리보기 테이블 */}
+                    <div className="rounded-lg border overflow-hidden max-h-[300px] overflow-y-auto">
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-10 text-center text-[11px] font-bold text-muted-foreground">No</TableHead>
+                            <TableHead className="text-[11px] font-bold text-muted-foreground">위치코드</TableHead>
+                            <TableHead className="text-[11px] font-bold text-muted-foreground">위치명</TableHead>
+                            <TableHead className="w-14 text-center text-[11px] font-bold text-muted-foreground">층</TableHead>
+                            <TableHead className="w-14 text-center text-[11px] font-bold text-muted-foreground">구역</TableHead>
+                            <TableHead className="w-12 text-center text-[11px] font-bold text-muted-foreground">열</TableHead>
+                            <TableHead className="w-12 text-center text-[11px] font-bold text-muted-foreground">단</TableHead>
+                            <TableHead className="w-16 text-[11px] font-bold text-muted-foreground">유형</TableHead>
+                            <TableHead className="w-16 text-[11px] font-bold text-muted-foreground">비고</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {rackPreview.map((item, idx) => (
+                            <TableRow key={idx} className="text-xs">
+                              <TableCell className="text-center text-muted-foreground">
+                                {idx + 1}
+                              </TableCell>
+                              <TableCell className="font-mono">{item.location_code}</TableCell>
+                              <TableCell>{item.location_name}</TableCell>
+                              <TableCell className="text-center">{item.floor}</TableCell>
+                              <TableCell className="text-center">{item.zone}</TableCell>
+                              <TableCell className="text-center">{item.row_num}</TableCell>
+                              <TableCell className="text-center">{item.level_num}</TableCell>
+                              <TableCell>
+                                {resolveCategory(locationCategoryOptions, "location_type", item.location_type) || "-"}
+                              </TableCell>
+                              <TableCell>-</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </>
+                )}
+
+                {rackPreview.length === 0 && (
+                  <div className="flex flex-col items-center justify-center py-6 border-2 border-dashed rounded-lg border-border text-sm text-muted-foreground">
+                    위의 설정을 완료한 뒤 미리보기 생성 버튼을 클릭하세요
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2 px-6 py-4 border-t shrink-0 bg-background">
+            <Button variant="outline" onClick={() => setRackModalOpen(false)}>
+              취소
+            </Button>
+            <Button
+              onClick={handleRackBulkSave}
+              disabled={rackSaving || rackPreview.length === 0}
+            >
+              {rackSaving && <Loader2 className="h-4 w-4 animate-spin mr-1" />}
+              일괄 등록 ({rackPreview.length}건)
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/master-data/company/page.tsx b/frontend/app/(main)/COMPANY_29/master-data/company/page.tsx
new file mode 100644
index 00000000..9d7f2dea
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/master-data/company/page.tsx
@@ -0,0 +1,759 @@
+"use client";
+
+/**
+ * 회사관리 — Type D 탭 멀티뷰 (2탭)
+ *
+ * Tab 1: 회사정보 (company_mng 단일 레코드 폼)
+ * Tab 2: 부서관리 (dept_info 트리 + user_info 목록)
+ */
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Building2, Users, Pencil, Save, Loader2, Plus, Trash2,
+  Upload, X, Image as ImageIcon, ChevronRight, FolderOpen, Folder,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import * as departmentAPI from "@/lib/api/department";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { formatField, validateField, validateForm } from "@/lib/utils/validation";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const COMPANY_TABLE = "company_mng";
+const DEPT_TABLE = "dept_info";
+const USER_TABLE = "user_info";
+
+/* ── 트리 노드 타입 ── */
+interface DeptNode {
+  dept_code: string;
+  dept_name: string;
+  parent_dept_code: string | null;
+  status?: string;
+  children: DeptNode[];
+}
+
+export default function CompanyPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  /* ===================== Tab 1: 회사정보 ===================== */
+  const [companyData, setCompanyData] = useState<Record<string, any>>({});
+  const [companyForm, setCompanyForm] = useState<Record<string, any>>({});
+  const [companyLoading, setCompanyLoading] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  // 이미지 업로드 refs
+  const imageRef = useRef<HTMLInputElement>(null);
+  const logoRef = useRef<HTMLInputElement>(null);
+  const sealRef = useRef<HTMLInputElement>(null);
+
+  // 이미지 미리보기
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [logoPreview, setLogoPreview] = useState<string | null>(null);
+  const [sealPreview, setSealPreview] = useState<string | null>(null);
+
+  const fetchCompany = useCallback(async () => {
+    setCompanyLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${COMPANY_TABLE}/data`, {
+        page: 1, size: 1, autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      if (rows.length > 0) {
+        setCompanyData(rows[0]);
+        setCompanyForm(rows[0]);
+        if (rows[0].company_image) setImagePreview(rows[0].company_image);
+        if (rows[0].company_logo) setLogoPreview(rows[0].company_logo);
+        if (rows[0].company_seal) setSealPreview(rows[0].company_seal);
+      }
+    } catch {
+      toast.error("회사 정보를 불러오는데 실패했어요.");
+    } finally {
+      setCompanyLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchCompany(); }, [fetchCompany]);
+
+  const handleImageUpload = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    field: string,
+    setPreview: React.Dispatch<React.SetStateAction<string | null>>,
+  ) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result as string;
+      setPreview(result);
+      setCompanyForm((prev) => ({ ...prev, [field]: result }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleCompanySave = async () => {
+    if (!companyForm.company_name) {
+      toast.error("회사명은 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_at, updated_at, writer, created_date, updated_date, regdate, company_code, ...updatedData } = companyForm;
+
+      if (companyData.company_code) {
+        await apiClient.put(`/table-management/tables/${COMPANY_TABLE}/edit`, {
+          originalData: { company_code: companyData.company_code },
+          updatedData,
+        });
+      } else {
+        await apiClient.post(`/table-management/tables/${COMPANY_TABLE}/add`, { company_code, ...updatedData });
+      }
+      toast.success("회사 정보가 저장되었어요.");
+      setEditMode(false);
+      fetchCompany();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const cancelEdit = () => {
+    setCompanyForm(companyData);
+    setImagePreview(companyData.company_image || null);
+    setLogoPreview(companyData.company_logo || null);
+    setSealPreview(companyData.company_seal || null);
+    setEditMode(false);
+  };
+
+  /* ===================== Tab 2: 부서관리 ===================== */
+  const [depts, setDepts] = useState<any[]>([]);
+  const [deptTree, setDeptTree] = useState<DeptNode[]>([]);
+  const [deptLoading, setDeptLoading] = useState(false);
+  const [selectedDeptCode, setSelectedDeptCode] = useState<string | null>(null);
+  const [expandedDepts, setExpandedDepts] = useState<Set<string>>(new Set());
+
+  // 사원
+  const [members, setMembers] = useState<any[]>([]);
+  const [memberLoading, setMemberLoading] = useState(false);
+
+  // 부서 모달
+  const [deptModalOpen, setDeptModalOpen] = useState(false);
+  const [deptEditMode, setDeptEditMode] = useState(false);
+  const [deptForm, setDeptForm] = useState<Record<string, any>>({});
+  const [deptSaving, setDeptSaving] = useState(false);
+
+  // 채번
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 사원 모달
+  const [userModalOpen, setUserModalOpen] = useState(false);
+  const [userEditMode, setUserEditMode] = useState(false);
+  const [userForm, setUserForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+
+  // 트리 구성
+  const buildTree = (flatDepts: any[]): DeptNode[] => {
+    const map: Record<string, DeptNode> = {};
+    const roots: DeptNode[] = [];
+    flatDepts.forEach((d) => {
+      map[d.dept_code] = { ...d, children: [] };
+    });
+    flatDepts.forEach((d) => {
+      const node = map[d.dept_code];
+      if (d.parent_dept_code && map[d.parent_dept_code]) {
+        map[d.parent_dept_code].children.push(node);
+      } else {
+        roots.push(node);
+      }
+    });
+    return roots;
+  };
+
+  const fetchDepts = useCallback(async () => {
+    setDeptLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DEPT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setDepts(raw);
+      setDeptTree(buildTree(raw));
+      // 전부 펼치기
+      setExpandedDepts(new Set(raw.map((d: any) => d.dept_code)));
+    } catch {
+      toast.error("부서 목록을 불러오는데 실패했어요.");
+    } finally {
+      setDeptLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchDepts(); }, [fetchDepts]);
+
+  const selectedDept = depts.find((d) => d.dept_code === selectedDeptCode);
+
+  // 사원 조회
+  const fetchMembers = useCallback(async () => {
+    if (!selectedDeptCode) { setMembers([]); return; }
+    setMemberLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${USER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "dept_code", operator: "equals", value: selectedDeptCode }] },
+        autoFilter: true,
+      });
+      setMembers(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setMembers([]); } finally { setMemberLoading(false); }
+  }, [selectedDeptCode]);
+
+  useEffect(() => { fetchMembers(); }, [fetchMembers]);
+
+  // 트리 토글
+  const toggleExpand = (code: string) => {
+    setExpandedDepts((prev) => {
+      const next = new Set(prev);
+      if (next.has(code)) next.delete(code); else next.add(code);
+      return next;
+    });
+  };
+
+  // 부서 등록
+  const openDeptRegister = async () => {
+    setDeptForm({});
+    setDeptEditMode(false);
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setDeptModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/dept_info/dept_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openDeptEdit = () => {
+    if (!selectedDept) return;
+    setDeptForm({ ...selectedDept });
+    setDeptEditMode(true);
+    setDeptModalOpen(true);
+  };
+
+  const handleDeptSave = async () => {
+    if (!deptForm.dept_name) { toast.error("부서명은 필수예요."); return; }
+    const parentCode = (deptForm.parent_dept_code && deptForm.parent_dept_code !== "none") ? deptForm.parent_dept_code : null;
+    setDeptSaving(true);
+    try {
+      if (deptEditMode && deptForm.dept_code) {
+        const response = await departmentAPI.updateDepartment(deptForm.dept_code, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "수정에 실패했어요."); return; }
+        toast.success("수정되었어요.");
+      } else {
+        const companyCode = user?.companyCode || "";
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else { toast.error("채번 코드 할당에 실패했어요."); return; }
+        }
+        const response = await departmentAPI.createDepartment(companyCode, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+          dept_code: allocatedCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "등록에 실패했어요."); return; }
+        toast.success("등록되었어요.");
+      }
+      setDeptModalOpen(false);
+      fetchDepts();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setDeptSaving(false);
+    }
+  };
+
+  const handleDeptDelete = async () => {
+    if (!selectedDeptCode) return;
+    const ok = await confirm("부서를 삭제할까요?", {
+      description: "해당 부서에 소속된 사원 정보는 유지돼요.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      const response = await departmentAPI.deleteDepartment(selectedDeptCode);
+      if (!response.success) { toast.error((response as any).error || "삭제에 실패했어요."); return; }
+      toast.success((response as any).message || "삭제되었어요.");
+      setSelectedDeptCode(null);
+      fetchDepts();
+    } catch { toast.error("삭제에 실패했어요."); }
+  };
+
+  // 사원 추가/수정
+  const openUserModal = (editData?: any) => {
+    if (editData) {
+      setUserEditMode(true);
+      setUserForm({ ...editData, user_password: "" });
+    } else {
+      setUserEditMode(false);
+      setUserForm({ dept_code: selectedDeptCode || "", user_password: "" });
+    }
+    setFormErrors({});
+    setUserModalOpen(true);
+  };
+
+  const handleUserFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setUserForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => { const n = { ...prev }; if (error) n[field] = error; else delete n[field]; return n; });
+  };
+
+  const handleUserSave = async () => {
+    if (!userForm.user_id) { toast.error("사용자 ID는 필수예요."); return; }
+    if (!userForm.user_name) { toast.error("사용자 이름은 필수예요."); return; }
+    if (!userForm.dept_code) { toast.error("부서는 필수예요."); return; }
+    const errors = validateForm(userForm, ["cell_phone", "email"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) { toast.error("입력 형식을 확인해주세요."); return; }
+    setDeptSaving(true);
+    try {
+      const password = userForm.user_password || (!userEditMode ? "qlalfqjsgh11" : undefined);
+      await apiClient.post("/admin/users/with-dept", {
+        userInfo: {
+          user_id: userForm.user_id,
+          user_name: userForm.user_name,
+          user_name_eng: userForm.user_name_eng || undefined,
+          user_password: password || undefined,
+          email: userEditMode ? (userForm.email || null) : (userForm.email || undefined),
+          tel: userForm.tel || undefined,
+          cell_phone: userEditMode ? (userForm.cell_phone || null) : (userForm.cell_phone || undefined),
+          sabun: userEditMode ? (userForm.sabun || null) : (userForm.sabun || undefined),
+          position_name: userForm.position_name || undefined,
+          dept_code: userForm.dept_code || undefined,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name || undefined,
+          status: userForm.status || "active",
+        },
+        mainDept: userForm.dept_code ? {
+          dept_code: userForm.dept_code,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name,
+          position_name: userForm.position_name || undefined,
+        } : undefined,
+        isUpdate: userEditMode,
+      });
+      toast.success(userEditMode ? "사원 정보가 수정되었어요." : "사원이 추가되었어요.");
+      setUserModalOpen(false);
+      fetchMembers();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setDeptSaving(false);
+    }
+  };
+
+  // EDataTable 컬럼 정의 (사원 목록)
+  const companyMemberColumns: EDataTableColumn[] = [
+    { key: "sabun", label: "사번", width: "w-[80px]", render: (val: any) => <span className="text-[13px]">{val || "-"}</span> },
+    { key: "user_name", label: "이름", width: "w-[90px]" },
+    { key: "user_id", label: "사용자ID", width: "w-[100px]" },
+    { key: "position_name", label: "직급", width: "w-[80px]", render: (val: any) => <span>{val || "-"}</span> },
+    { key: "cell_phone", label: "휴대폰", width: "w-[120px]", render: (val: any) => <span>{val || "-"}</span> },
+    { key: "email", label: "이메일" },
+  ];
+
+  /* ── 트리 렌더 ── */
+  const renderTree = (nodes: DeptNode[], depth = 0) => {
+    return nodes.map((node) => {
+      const isExpanded = expandedDepts.has(node.dept_code);
+      const isSelected = selectedDeptCode === node.dept_code;
+      const hasChildren = node.children.length > 0;
+      return (
+        <div key={node.dept_code}>
+          <div
+            className={cn(
+              "flex items-center gap-1.5 px-3 py-2 cursor-pointer text-sm transition-colors hover:bg-accent",
+              isSelected && "bg-primary/10 text-primary font-semibold border-l-2 border-primary",
+              !isSelected && "border-l-2 border-transparent",
+            )}
+            style={{ paddingLeft: `${12 + depth * 20}px` }}
+            onClick={() => setSelectedDeptCode(isSelected ? null : node.dept_code)}
+          >
+            {hasChildren ? (
+              <button
+                className="p-0.5 rounded hover:bg-accent"
+                onClick={(e) => { e.stopPropagation(); toggleExpand(node.dept_code); }}
+              >
+                <ChevronRight className={cn("w-3.5 h-3.5 transition-transform", isExpanded && "rotate-90")} />
+              </button>
+            ) : (
+              <span className="w-4.5" />
+            )}
+            {isExpanded && hasChildren
+              ? <FolderOpen className="w-4 h-4 text-muted-foreground" />
+              : <Folder className="w-4 h-4 text-muted-foreground" />
+            }
+            <span className="truncate">{node.dept_name}</span>
+            {node.status === "inactive" && <Badge variant="outline" className="text-[10px] px-1 py-0">비활성</Badge>}
+          </div>
+          {isExpanded && hasChildren && renderTree(node.children, depth + 1)}
+        </div>
+      );
+    });
+  };
+
+  /* ── 이미지 업로드 박스 ── */
+  const ImageUploadBox = ({
+    label, preview, inputRef, field, setPreview,
+  }: {
+    label: string;
+    preview: string | null;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    field: string;
+    setPreview: React.Dispatch<React.SetStateAction<string | null>>;
+  }) => (
+    <div className="flex flex-col gap-2">
+      <Label className="text-sm font-medium">{label}</Label>
+      <div className="relative w-40 h-40 rounded-lg border-2 border-dashed border-border bg-muted/50 flex items-center justify-center overflow-hidden group">
+        {preview ? (
+          <>
+            <img src={preview} alt={label} className="w-full h-full object-contain" />
+            {editMode && (
+              <div className="absolute inset-0 bg-foreground/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                <Button size="sm" variant="secondary" className="h-7 text-xs" onClick={() => inputRef.current?.click()}>
+                  <Upload className="w-3 h-3 mr-1" /> 변경
+                </Button>
+                <Button size="sm" variant="destructive" className="h-7 text-xs" onClick={() => {
+                  setPreview(null);
+                  setCompanyForm((prev) => ({ ...prev, [field]: null }));
+                }}>
+                  <X className="w-3 h-3" />
+                </Button>
+              </div>
+            )}
+          </>
+        ) : (
+          <button
+            className="flex flex-col items-center gap-1.5 text-muted-foreground"
+            onClick={() => editMode && inputRef.current?.click()}
+            disabled={!editMode}
+          >
+            <ImageIcon className="w-8 h-8" />
+            <span className="text-xs">{editMode ? "이미지 업로드" : "이미지 없음"}</span>
+          </button>
+        )}
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={(e) => handleImageUpload(e, field, setPreview)}
+      />
+    </div>
+  );
+
+  return (
+    <div className="h-[calc(100vh-4rem)] flex flex-col overflow-hidden">
+      {/* 탭 컨테이너 */}
+      <Tabs defaultValue="company" className="flex flex-col h-full gap-0 min-h-0">
+        {/* 탭 헤더 — border-b 스타일 */}
+        <div className="shrink-0 border-b bg-background px-4">
+          <TabsList className="h-12 bg-transparent gap-1">
+            <TabsTrigger
+              value="company"
+              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 gap-1.5"
+            >
+              <Building2 className="w-4 h-4" /> 회사정보
+            </TabsTrigger>
+          </TabsList>
+        </div>
+
+        {/* ===================== Tab 1: 회사정보 ===================== */}
+        <TabsContent value="company" className="flex-1 overflow-auto mt-0 p-4">
+          <div className="border rounded-lg bg-card">
+            {/* 패널 헤더 */}
+            <div className="flex items-center justify-between px-6 py-3 border-b bg-muted/30">
+              <div className="font-semibold flex items-center gap-2 text-sm">
+                <Building2 className="w-4 h-4 text-muted-foreground" />
+                <span>회사 기본정보</span>
+              </div>
+              <div className="flex gap-1.5">
+                {editMode ? (
+                  <>
+                    <Button variant="outline" size="sm" onClick={cancelEdit}>취소</Button>
+                    <Button size="sm" onClick={handleCompanySave} disabled={saving}>
+                      {saving ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <Save className="w-3.5 h-3.5 mr-1" />}
+                      저장해요
+                    </Button>
+                  </>
+                ) : (
+                  <Button size="sm" onClick={() => setEditMode(true)}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {companyLoading ? (
+              <div className="flex items-center justify-center py-20">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : (
+              <div className="p-6 space-y-6">
+                {/* 기본 정보 섹션 제목 */}
+                <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  기본 정보
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+
+                {/* 기본 정보 그리드 (2열) */}
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">회사코드</Label>
+                    <Input value={companyForm.company_code || ""} className="h-9 bg-muted/50" disabled readOnly />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      회사명 <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      value={companyForm.company_name || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, company_name: e.target.value }))}
+                      placeholder="회사명을 입력해주세요"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">사업자등록번호</Label>
+                    <Input
+                      value={companyForm.business_registration_number || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, business_registration_number: e.target.value }))}
+                      placeholder="000-00-00000"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대표자명</Label>
+                    <Input
+                      value={companyForm.representative_name || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, representative_name: e.target.value }))}
+                      placeholder="대표자명"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대표전화</Label>
+                    <Input
+                      value={companyForm.representative_phone || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, representative_phone: e.target.value }))}
+                      placeholder="02-0000-0000"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">팩스</Label>
+                    <Input
+                      value={companyForm.fax || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, fax: e.target.value }))}
+                      placeholder="02-0000-0001"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">이메일</Label>
+                    <Input
+                      value={companyForm.email || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, email: e.target.value }))}
+                      placeholder="example@company.com"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">홈페이지</Label>
+                    <Input
+                      value={companyForm.website || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, website: e.target.value }))}
+                      placeholder="https://www.company.com"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="col-span-2 space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">주소</Label>
+                    <Input
+                      value={companyForm.address || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="회사 주소를 입력해주세요"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                </div>
+
+                {/* 이미지 섹션 */}
+                <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  이미지 관리
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <div className="flex gap-6">
+                  <ImageUploadBox label="회사 이미지" preview={imagePreview} inputRef={imageRef} field="company_image" setPreview={setImagePreview} />
+                  <ImageUploadBox label="회사 로고" preview={logoPreview} inputRef={logoRef} field="company_logo" setPreview={setLogoPreview} />
+                  <ImageUploadBox label="직인" preview={sealPreview} inputRef={sealRef} field="company_seal" setPreview={setSealPreview} />
+                </div>
+              </div>
+            )}
+          </div>
+        </TabsContent>
+
+      </Tabs>
+
+      {/* ── 부서 등록/수정 모달 ── */}
+      <Dialog open={deptModalOpen} onOpenChange={setDeptModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{deptEditMode ? "부서 수정" : "부서 등록"}</DialogTitle>
+            <DialogDescription>{deptEditMode ? "부서 정보를 수정해요." : "새로운 부서를 등록해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서코드</Label>
+              <Input
+                value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
+                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성됩니다")}
+                className="h-9" disabled readOnly
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서명 <span className="text-destructive">*</span></Label>
+              <Input
+                value={deptForm.dept_name || ""}
+                onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
+                placeholder="부서명" className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">상위부서</Label>
+              <Select value={deptForm.parent_dept_code || ""} onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="상위부서 선택 (선택사항)" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">없음</SelectItem>
+                  {depts.filter((d) => d.dept_code !== deptForm.dept_code).map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name} ({d.dept_code})</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeptModalOpen(false)}>취소</Button>
+            <Button onClick={handleDeptSave} disabled={deptSaving}>
+              {deptSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 사원 추가/수정 모달 ── */}
+      <Dialog open={userModalOpen} onOpenChange={setUserModalOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{userEditMode ? "사원 정보 수정" : "사원 추가"}</DialogTitle>
+            <DialogDescription>
+              {userEditMode
+                ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정해요.`
+                : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가해요.` : "사원을 추가해요."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-sm">사용자 ID <span className="text-destructive">*</span></Label>
+              <Input value={userForm.user_id || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
+                placeholder="사용자 ID" className="h-9" disabled={userEditMode} />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">이름 <span className="text-destructive">*</span></Label>
+              <Input value={userForm.user_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
+                placeholder="이름" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">사번</Label>
+              <Input value={userForm.sabun || ""} onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
+                placeholder="사번" className="h-9" autoComplete="off" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">비밀번호</Label>
+              <Input value={userForm.user_password || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
+                placeholder={userEditMode ? "변경 시에만 입력" : "미입력 시 qlalfqjsgh11"} className="h-9" type="password" autoComplete="new-password" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">직급</Label>
+              <Input value={userForm.position_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
+                placeholder="직급" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서 <span className="text-destructive">*</span></Label>
+              <Select value={userForm.dept_code || ""} onValueChange={(v) => setUserForm((p) => ({ ...p, dept_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="부서 선택" /></SelectTrigger>
+                <SelectContent>
+                  {depts.map((d) => <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">휴대폰</Label>
+              <Input value={userForm.cell_phone || ""} onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
+                placeholder="010-0000-0000" className={cn("h-9", formErrors.cell_phone && "border-destructive")} />
+              {formErrors.cell_phone && <p className="text-xs text-destructive">{formErrors.cell_phone}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">이메일</Label>
+              <Input value={userForm.email || ""} onChange={(e) => handleUserFormChange("email", e.target.value)}
+                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
+              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">입사일</Label>
+              <Input type="date" value={userForm.regdate || ""} onChange={(e) => setUserForm((p) => ({ ...p, regdate: e.target.value }))} className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">퇴사일</Label>
+              <Input type="date" value={userForm.end_date || ""} onChange={(e) => setUserForm((p) => ({ ...p, end_date: e.target.value }))} className="h-9" />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserModalOpen(false)}>취소</Button>
+            <Button onClick={handleUserSave} disabled={deptSaving}>
+              {deptSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/master-data/department/page.tsx b/frontend/app/(main)/COMPANY_29/master-data/department/page.tsx
index 5ffa7c7e..23f70f2b 100644
--- a/frontend/app/(main)/COMPANY_29/master-data/department/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/master-data/department/page.tsx
@@ -9,7 +9,7 @@
  * 모달: 부서 등록(dept_info), 사원 추가(user_info)
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -17,11 +17,14 @@ import { Badge } from "@/components/ui/badge";
 import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
 } from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
-  Building2, Users, Settings2,
+  Users, Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
@@ -29,46 +32,34 @@ import * as departmentAPI from "@/lib/api/department";
 import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 import { formatField, validateField, validateForm } from "@/lib/utils/validation";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const DEPT_TABLE = "dept_info";
 const USER_TABLE = "user_info";
-
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "dept_code", label: "부서코드", width: "w-[120px]" },
-  { key: "dept_name", label: "부서명", minWidth: "min-w-[150px]" },
-  { key: "parent_dept_code", label: "상위부서", width: "w-[100px]" },
-  { key: "status", label: "상태", width: "w-[70px]" },
-];
-
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "sabun", label: "사번", width: "w-[80px]" },
-  { key: "user_name", label: "이름", width: "w-[90px]" },
-  { key: "user_id", label: "사용자ID", width: "w-[100px]" },
-  { key: "position_name", label: "직급", width: "w-[80px]" },
-  { key: "cell_phone", label: "휴대폰", width: "w-[120px]" },
-  { key: "email", label: "이메일", minWidth: "min-w-[150px]" },
+const DEPT_COLUMNS = [
+  { key: "parent_dept_code", label: "상위부서" },
+  { key: "status", label: "상태" },
 ];
 
 export default function DepartmentPage() {
   const { user } = useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
 
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
   // 좌측: 부서
   const [depts, setDepts] = useState<any[]>([]);
   const [deptLoading, setDeptLoading] = useState(false);
   const [deptCount, setDeptCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
   const [selectedDeptId, setSelectedDeptId] = useState<string | null>(null);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
 
   // 우측: 사원
   const [members, setMembers] = useState<any[]>([]);
@@ -90,17 +81,14 @@ export default function DepartmentPage() {
   const [userForm, setUserForm] = useState<Record<string, any>>({});
   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
 
+  // 사원 탭 (재직중/퇴사)
+  const [memberTab, setMemberTab] = useState<"active" | "resigned">("active");
+
   // 엑셀
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
-
-  useEffect(() => {
-    const saved = loadTableSettings("department");
-    if (saved) applyTableSettings(saved);
-  }, []);
+  // 테이블 설정
+  const ts = useTableSettings("c16-department", DEPT_TABLE, DEPT_COLUMNS);
 
   // 부서 조회
   const fetchDepts = useCallback(async () => {
@@ -244,7 +232,7 @@ export default function DepartmentPage() {
     } catch { toast.error("삭제에 실패했습니다."); }
   };
 
-  // 사원 추가
+  // 사원 추가/수정
   const openUserModal = (editData?: any) => {
     if (editData) {
       setUserEditMode(true);
@@ -291,6 +279,7 @@ export default function DepartmentPage() {
           dept_code: userForm.dept_code || undefined,
           dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name || undefined,
           status: userForm.status || "active",
+          end_date: userForm.end_date || null,
         },
         mainDept: userForm.dept_code ? {
           dept_code: userForm.dept_code,
@@ -319,88 +308,254 @@ export default function DepartmentPage() {
     toast.success("다운로드 완료");
   };
 
+  // 퇴사일 기반 재직/퇴사 분리
+  const _now = new Date();
+  const today = `${_now.getFullYear()}-${String(_now.getMonth() + 1).padStart(2, "0")}-${String(_now.getDate()).padStart(2, "0")}`;
+  const activeMembers = members.filter((m) => !m.end_date || m.end_date.substring(0, 10) >= today);
+  const resignedMembers = members.filter((m) => m.end_date && m.end_date.substring(0, 10) < today);
+
+  // EDataTable 컬럼 정의 (부서 목록) — ts.visibleColumns 순서를 따름
+  const deptColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      dept_code: { width: "w-[120px]" },
+      dept_name: { minWidth: "min-w-[140px]" },
+      parent_dept_code: {
+        width: "w-[110px]",
+        render: (val: any) => <span className="text-[13px] text-muted-foreground">{val || "\u2014"}</span>,
+      },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "active" ? "default" : "outline"}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val === "active" ? "활성" : (val || "\u2014")}
+            </Badge>
+          ) : null,
+      },
+    };
+    // dept_code, dept_name은 항상 표시 (DEPT_COLUMNS에 포함되지 않으므로 visibleColumns에 없음)
+    const fixedCols: EDataTableColumn[] = [
+      { key: "dept_code", label: "부서코드", ...colProps["dept_code"] },
+      { key: "dept_name", label: "부서명", ...colProps["dept_name"] },
+    ];
+    const dynamicCols = ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+    return [...fixedCols, ...dynamicCols];
+  }, [ts.visibleColumns]);
+
   return (
-    <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 바 */}
       <DynamicSearchFilter
         tableName={DEPT_TABLE}
-        filterId="department"
+        filterId="c16-department"
         onFilterChange={setSearchFilters}
         dataCount={deptCount}
-        externalFilterConfig={filterConfig}
+        externalFilterConfig={ts.filterConfig}
         extraActions={
           <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
+            <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+              엑셀 업로드
             </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
+            <Button variant="outline" size="sm" className="h-8" onClick={() => void handleExcelDownload()}>
               <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
             </Button>
           </div>
         }
       />
 
-      {/* 분할 패널 */}
+      {/* 마스터-디테일 분할 패널 */}
       <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
         <ResizablePanelGroup direction="horizontal">
-          {/* 좌측: 부서 */}
+          {/* 좌측: 부서 목록 */}
           <ResizablePanel defaultSize={40} minSize={25}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Building2 className="w-4 h-4" /> 부서
-                  <Badge variant="secondary" className="font-normal">{deptCount}건</Badge>
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-3 border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">부서 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {deptCount}건
+                  </span>
                 </div>
                 <div className="flex gap-1.5">
-                  <Button size="sm" onClick={openDeptRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
-                  <Button variant="outline" size="sm" disabled={!selectedDeptCode} onClick={openDeptEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
-                  <Button variant="destructive" size="sm" disabled={!selectedDeptCode} onClick={handleDeptDelete}><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                  <Button size="sm" onClick={() => void openDeptRegister()}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedDeptCode} onClick={openDeptEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedDeptCode} onClick={() => void handleDeptDelete()}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid
-                gridId="dept-left"
-                columns={LEFT_COLUMNS}
-                data={depts}
+
+              {/* 부서 테이블 */}
+              <EDataTable
+                columns={deptColumns}
+                data={ts.groupData(depts)}
+                rowKey={(row) => row.id}
                 loading={deptLoading}
+                emptyMessage="등록된 부서가 없어요"
                 selectedId={selectedDeptId}
-                onSelect={(id) => {
-                  setSelectedDeptId((prev) => (prev === id ? null : id));
-                }}
+                onSelect={(id) => setSelectedDeptId(id)}
                 onRowDoubleClick={() => openDeptEdit()}
-                emptyMessage="등록된 부서가 없습니다"
+                showRowNumber
+                showPagination={false}
+                draggableColumns={false}
+                columnOrderKey="c16-department"
               />
             </div>
           </ResizablePanel>
 
           <ResizableHandle withHandle />
 
-          {/* 우측: 사원 */}
+          {/* 우측: 사원 목록 */}
           <ResizablePanel defaultSize={60} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Users className="w-4 h-4" />
-                  {selectedDept ? "부서 인원" : "전체 사원"}
-                  {selectedDept && <Badge variant="outline" className="font-normal">{selectedDept.dept_name}</Badge>}
-                  {members.length > 0 && <Badge variant="secondary" className="font-normal">{members.length}명</Badge>}
+              {!selectedDeptId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">부서를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 부서를 선택하면 소속 사원 목록이 표시돼요</div>
+                  </div>
                 </div>
-                <Button variant="outline" size="sm" onClick={() => openUserModal()}>
-                  <Plus className="w-3.5 h-3.5 mr-1" /> 사원 추가
-                </Button>
-              </div>
-              <DataGrid
-                gridId="dept-right"
-                columns={RIGHT_COLUMNS}
-                data={members}
-                loading={memberLoading}
-                showRowNumber={false}
-                tableName={USER_TABLE}
-                emptyMessage={selectedDeptCode ? "소속 사원이 없습니다" : "등록된 사원이 없습니다"}
-                onRowDoubleClick={(row) => openUserModal(row)}
-              />
+              ) : (
+                <>
+                  {/* 디테일 헤더 */}
+                  <div className="flex items-center gap-3 px-4 py-3 border-b bg-muted shrink-0">
+                    <span className="text-[13px] font-bold">{selectedDept?.dept_name || "-"}</span>
+                    <span className="font-mono text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                      {selectedDept?.dept_code || "-"}
+                    </span>
+                    <div className="ml-auto">
+                      <Button variant="outline" size="sm" onClick={() => openUserModal()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        사원 추가
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 재직/퇴사 탭 */}
+                  <div className="flex border-b border-border px-4 shrink-0 bg-muted">
+                    <button
+                      onClick={() => setMemberTab("active")}
+                      className={cn("px-4 py-2.5 text-xs font-semibold border-b-2 transition-colors",
+                        memberTab === "active" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+                      )}
+                    >
+                      재직중
+                      {activeMembers.length > 0 && (
+                        <Badge variant="secondary" className="ml-1.5 text-[10px] px-1.5 py-0">{activeMembers.length}</Badge>
+                      )}
+                    </button>
+                    <button
+                      onClick={() => setMemberTab("resigned")}
+                      className={cn("px-4 py-2.5 text-xs font-semibold border-b-2 transition-colors",
+                        memberTab === "resigned" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+                      )}
+                    >
+                      퇴사
+                      {resignedMembers.length > 0 && (
+                        <Badge variant="secondary" className="ml-1.5 text-[10px] px-1.5 py-0">{resignedMembers.length}</Badge>
+                      )}
+                    </button>
+                  </div>
+
+                  <div className="flex-1 overflow-auto">
+                    {memberLoading ? (
+                      <div className="flex flex-col items-center justify-center py-12">
+                        <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                      </div>
+                    ) : memberTab === "active" ? (
+                      activeMembers.length === 0 ? (
+                        <div className="text-center py-8 text-muted-foreground text-sm">재직중인 사원이 없어요</div>
+                      ) : (
+                        <Table noWrapper>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center px-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사번</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이름</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사용자ID</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">직급</TableHead>
+                              <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">휴대폰</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {activeMembers.map((member, idx) => (
+                              <TableRow
+                                key={member.id || member.user_id}
+                                className="cursor-pointer select-none hover:bg-muted/50"
+                                onDoubleClick={() => openUserModal(member)}
+                              >
+                                <TableCell className="text-center text-[13px] text-muted-foreground px-2">{idx + 1}</TableCell>
+                                <TableCell className="font-mono text-[13px] text-muted-foreground">{member.sabun || "—"}</TableCell>
+                                <TableCell className="text-sm font-medium">{member.user_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.user_id}</TableCell>
+                                <TableCell className="text-[13px]">{member.position_name || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.cell_phone || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.email || "—"}</TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      )
+                    ) : (
+                      resignedMembers.length === 0 ? (
+                        <div className="text-center py-8 text-muted-foreground text-sm">퇴사한 사원이 없어요</div>
+                      ) : (
+                        <Table noWrapper>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center px-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사번</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이름</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사용자ID</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">직급</TableHead>
+                              <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">휴대폰</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">퇴사일</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {resignedMembers.map((member, idx) => (
+                              <TableRow
+                                key={member.id || member.user_id}
+                                className="cursor-pointer select-none hover:bg-muted/50"
+                                onDoubleClick={() => openUserModal(member)}
+                              >
+                                <TableCell className="text-center text-[13px] text-muted-foreground px-2">{idx + 1}</TableCell>
+                                <TableCell className="font-mono text-[13px] text-muted-foreground">{member.sabun || "—"}</TableCell>
+                                <TableCell className="text-sm font-medium">{member.user_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.user_id}</TableCell>
+                                <TableCell className="text-[13px]">{member.position_name || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.cell_phone || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.email || "—"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.end_date ? member.end_date.substring(0, 10) : "—"}</TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      )
+                    )}
+                  </div>
+                </>
+              )}
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>
@@ -413,22 +568,37 @@ export default function DepartmentPage() {
             <DialogTitle>{deptEditMode ? "부서 수정" : "부서 등록"}</DialogTitle>
             <DialogDescription>{deptEditMode ? "부서 정보를 수정합니다." : "새로운 부서를 등록합니다."}</DialogDescription>
           </DialogHeader>
-          <div className="space-y-4 py-4">
+          <div className="space-y-4 py-2">
             <div className="space-y-1.5">
-              <Label className="text-sm">부서코드</Label>
-              <Input value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
-                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성됩니다")}
-                className="h-9" disabled readOnly />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">부서코드</span>
+              <Input
+                value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
+                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                className="h-9"
+                disabled
+                readOnly
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">부서명 <span className="text-destructive">*</span></Label>
-              <Input value={deptForm.dept_name || ""} onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
-                placeholder="부서명" className="h-9" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                부서명 <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={deptForm.dept_name || ""}
+                onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
+                placeholder="부서명을 입력해 주세요"
+                className="h-9"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">상위부서</Label>
-              <Select value={deptForm.parent_dept_code || ""} onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}>
-                <SelectTrigger className="h-9"><SelectValue placeholder="상위부서 선택 (선택사항)" /></SelectTrigger>
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상위부서</span>
+              <Select
+                value={deptForm.parent_dept_code || ""}
+                onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="상위부서 선택 (선택사항)" />
+                </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="none">없음</SelectItem>
                   {depts.filter((d) => d.dept_code !== deptForm.dept_code).map((d) => (
@@ -440,85 +610,153 @@ export default function DepartmentPage() {
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setDeptModalOpen(false)}>취소</Button>
-            <Button onClick={handleDeptSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+            <Button onClick={() => void handleDeptSave()} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* 사원 추가 모달 */}
+      {/* 사원 추가/수정 모달 */}
       <Dialog open={userModalOpen} onOpenChange={setUserModalOpen}>
         <DialogContent className="max-w-2xl">
           <DialogHeader>
             <DialogTitle>{userEditMode ? "사원 정보 수정" : "사원 추가"}</DialogTitle>
-            <DialogDescription>{userEditMode ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정합니다.` : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가합니다.` : "사원을 추가합니다."}</DialogDescription>
+            <DialogDescription>
+              {userEditMode
+                ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정합니다.`
+                : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가합니다.` : "사원을 추가합니다."}
+            </DialogDescription>
           </DialogHeader>
-          <div className="grid grid-cols-2 gap-4 py-4">
+          <div className="grid grid-cols-2 gap-4 py-2">
             <div className="space-y-1.5">
-              <Label className="text-sm">사용자 ID <span className="text-destructive">*</span></Label>
-              <Input value={userForm.user_id || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
-                placeholder="사용자 ID" className="h-9" disabled={userEditMode} />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                사용자 ID <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={userForm.user_id || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
+                placeholder="사용자 ID를 입력해 주세요"
+                className="h-9"
+                disabled={userEditMode}
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">이름 <span className="text-destructive">*</span></Label>
-              <Input value={userForm.user_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
-                placeholder="이름" className="h-9" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                이름 <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={userForm.user_name || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
+                placeholder="이름을 입력해 주세요"
+                className="h-9"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">사번</Label>
-              <Input value={userForm.sabun || ""} onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
-                placeholder="사번" className="h-9" autoComplete="off" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">사번</span>
+              <Input
+                value={userForm.sabun || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
+                placeholder="사번"
+                className="h-9"
+                autoComplete="off"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">비밀번호</Label>
-              <Input value={userForm.user_password || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
-                placeholder={userEditMode ? "변경 시에만 입력" : "미입력 시 qlalfqjsgh11"} className="h-9" type="password" autoComplete="new-password" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">비밀번호</span>
+              <Input
+                value={userForm.user_password || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
+                placeholder={userEditMode ? "변경 시에만 입력해 주세요" : "미입력 시 기본값이 설정돼요"}
+                className="h-9"
+                type="password"
+                autoComplete="new-password"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">직급</Label>
-              <Input value={userForm.position_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
-                placeholder="직급" className="h-9" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">직급</span>
+              <Input
+                value={userForm.position_name || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
+                placeholder="직급"
+                className="h-9"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">부서 <span className="text-destructive">*</span></Label>
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                부서 <span className="text-destructive">*</span>
+              </span>
               <Select value={userForm.dept_code || ""} onValueChange={(v) => setUserForm((p) => ({ ...p, dept_code: v }))}>
-                <SelectTrigger className="h-9"><SelectValue placeholder="부서 선택" /></SelectTrigger>
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="부서를 선택해 주세요" />
+                </SelectTrigger>
                 <SelectContent>
-                  {depts.map((d) => <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>)}
+                  {depts.map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">휴대폰</Label>
-              <Input value={userForm.cell_phone || ""} onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
-                placeholder="010-0000-0000" className={cn("h-9", formErrors.cell_phone && "border-destructive")} />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">휴대폰</span>
+              <Input
+                value={userForm.cell_phone || ""}
+                onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
+                placeholder="010-0000-0000"
+                className={cn("h-9", formErrors.cell_phone && "border-destructive")}
+              />
               {formErrors.cell_phone && <p className="text-xs text-destructive">{formErrors.cell_phone}</p>}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">이메일</Label>
-              <Input value={userForm.email || ""} onChange={(e) => handleUserFormChange("email", e.target.value)}
-                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">이메일</span>
+              <Input
+                value={userForm.email || ""}
+                onChange={(e) => handleUserFormChange("email", e.target.value)}
+                placeholder="example@email.com"
+                className={cn("h-9", formErrors.email && "border-destructive")}
+              />
               {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">입사일</Label>
-              <FormDatePicker value={userForm.regdate || ""} onChange={(v) => setUserForm((p) => ({ ...p, regdate: v }))} placeholder="입사일" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">입사일</span>
+              <Input
+                type="date"
+                value={userForm.regdate ? userForm.regdate.substring(0, 10) : ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, regdate: e.target.value }))}
+                className="h-9"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">퇴사일</Label>
-              <FormDatePicker value={userForm.end_date || ""} onChange={(v) => setUserForm((p) => ({ ...p, end_date: v }))} placeholder="퇴사일" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">퇴사일</span>
+              <Input
+                type="date"
+                value={userForm.end_date ? userForm.end_date.substring(0, 10) : ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, end_date: e.target.value }))}
+                className="h-9"
+              />
             </div>
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setUserModalOpen(false)}>취소</Button>
-            <Button onClick={handleUserSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+            <Button onClick={() => void handleUserSave()} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
       {/* 엑셀 업로드 */}
       <ExcelUploadModal
         open={excelUploadOpen}
@@ -529,14 +767,6 @@ export default function DepartmentPage() {
       />
 
       {ConfirmDialogComponent}
-
-      <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={DEPT_TABLE}
-        settingsId="department"
-        onSave={applyTableSettings}
-      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_29/master-data/item-info/page.tsx b/frontend/app/(main)/COMPANY_29/master-data/item-info/page.tsx
index e525f9cd..375fd900 100644
--- a/frontend/app/(main)/COMPANY_29/master-data/item-info/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/master-data/item-info/page.tsx
@@ -3,47 +3,162 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import {
-  Plus, Trash2, RotateCcw, Save, Search, Loader2, FileSpreadsheet, Download,
-  Package, Pencil, Copy,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  Pencil, Copy, Settings2, Check, ChevronsUpDown,
 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { ImageUpload } from "@/components/common/ImageUpload";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
-import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
-import { exportToExcel } from "@/lib/utils/excelExport";
 import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
 import { toast } from "sonner";
 
-// 테이블 컬럼 정의
-const TABLE_COLUMNS = [
-  { key: "item_number", label: "품목코드", width: "w-[120px]" },
-  { key: "item_name", label: "품명", width: "min-w-[150px]" },
-  { key: "division", label: "관리품목", width: "w-[100px]" },
-  { key: "type", label: "품목구분", width: "w-[100px]" },
-  { key: "size", label: "규격", width: "w-[100px]" },
-  { key: "unit", label: "단위", width: "w-[80px]" },
-  { key: "material", label: "재질", width: "w-[100px]" },
-  { key: "status", label: "상태", width: "w-[80px]" },
-  { key: "selling_price", label: "판매가격", width: "w-[100px]" },
-  { key: "standard_price", label: "기준단가", width: "w-[100px]" },
-  { key: "weight", label: "중량", width: "w-[80px]" },
-  { key: "inventory_unit", label: "재고단위", width: "w-[80px]" },
-  { key: "user_type01", label: "대분류", width: "w-[100px]" },
-  { key: "user_type02", label: "중분류", width: "w-[100px]" },
+// 검색 가능한 카테고리 콤보박스
+function CategoryCombobox({ options, value, onChange, placeholder }: {
+  options: { code: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selected = options.find((o) => o.code === value);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
+          <span className="truncate">{selected?.label || <span className="text-muted-foreground">{placeholder}</span>}</span>
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8" />
+          <CommandList>
+            <CommandEmpty>검색 결과가 없어요</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {options.map((opt) => (
+                <CommandItem key={opt.code} value={opt.label} onSelect={() => { onChange(opt.code); setOpen(false); }}>
+                  <Check className={cn("mr-2 h-3.5 w-3.5", value === opt.code ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 다중 선택 카테고리 콤보박스
+function MultiCategoryCombobox({ options, value, onChange, placeholder }: {
+  options: { code: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selectedCodes = value ? value.split(",").map((c) => c.trim()).filter(Boolean) : [];
+  const selectedLabels = selectedCodes.map((code) => options.find((o) => o.code === code)?.label || code).filter(Boolean);
+
+  const toggle = (code: string) => {
+    const next = selectedCodes.includes(code)
+      ? selectedCodes.filter((c) => c !== code)
+      : [...selectedCodes, code];
+    onChange(next.join(","));
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
+          <span className="truncate">
+            {selectedLabels.length > 0
+              ? selectedLabels.join(", ")
+              : <span className="text-muted-foreground">{placeholder}</span>}
+          </span>
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8" />
+          <CommandList>
+            <CommandEmpty>검색 결과가 없어요</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {options.map((opt) => (
+                <CommandItem key={opt.code} value={opt.label} onSelect={() => toggle(opt.code)}>
+                  <Check className={cn("mr-2 h-3.5 w-3.5", selectedCodes.includes(opt.code) ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const TABLE_NAME = "item_info";
+
+const GRID_COLUMNS = [
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "image", label: "이미지", type: "image" },
+  { key: "division", label: "관리품목" },
+  { key: "type", label: "품목구분" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "material", label: "재질" },
+  { key: "status", label: "상태" },
+  { key: "selling_price", label: "판매가격", align: "right" as const, formatNumber: true },
+  { key: "standard_price", label: "기준단가", align: "right" as const, formatNumber: true },
+  { key: "weight", label: "중량", align: "right" as const },
+  { key: "inventory_unit", label: "재고단위" },
+  { key: "user_type01", label: "대분류" },
+  { key: "user_type02", label: "중분류" },
+  { key: "lead_time", label: "생산 리드타임(일)", align: "right" as const },
 ];
 
-// 등록 모달 필드 정의
 const FORM_FIELDS = [
   { key: "item_number", label: "품목코드", type: "text", required: true, disabled: true, placeholder: "자동 채번" },
   { key: "item_name", label: "품명", type: "text", required: true },
-  { key: "division", label: "관리품목", type: "category" },
+  { key: "division", label: "관리품목", type: "multi-category" },
   { key: "type", label: "품목구분", type: "category" },
   { key: "size", label: "규격", type: "text" },
   { key: "unit", label: "단위", type: "category" },
@@ -58,22 +173,25 @@ const FORM_FIELDS = [
   { key: "currency_code", label: "통화", type: "category" },
   { key: "user_type01", label: "대분류", type: "category" },
   { key: "user_type02", label: "중분류", type: "category" },
+  { key: "lead_time", label: "생산 리드타임(일)", type: "text", placeholder: "숫자 입력 (예: 7)" },
+  { key: "image", label: "품목 이미지", type: "image" },
   { key: "meno", label: "메모", type: "textarea" },
 ];
 
-const TABLE_NAME = "item_info";
+const CATEGORY_COLUMNS = [
+  "division", "type", "unit", "material", "status",
+  "inventory_unit", "currency_code", "user_type01", "user_type02",
+];
 
 export default function ItemInfoPage() {
   const { user } = useAuth();
+  const ts = useTableSettings("c16-item-info", TABLE_NAME, GRID_COLUMNS);
   const [items, setItems] = useState<any[]>([]);
+  const [rawItems, setRawItems] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
-  const [totalCount, setTotalCount] = useState(0);
 
-  // 검색
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [searchDivision, setSearchDivision] = useState("all");
-  const [searchType, setSearchType] = useState("all");
-  const [searchStatus, setSearchStatus] = useState("all");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 모달
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -91,10 +209,7 @@ export default function ItemInfoPage() {
   // 선택된 행
   const [selectedId, setSelectedId] = useState<string | null>(null);
 
-  // 카테고리 컬럼 목록
-  const CATEGORY_COLUMNS = ["division", "type", "unit", "material", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
-
-  // 카테고리 옵션 로드 (table_name + column_name 기반)
+  // 카테고리 옵션 로드
   useEffect(() => {
     const loadCategories = async () => {
       try {
@@ -130,33 +245,28 @@ export default function ItemInfoPage() {
   const fetchItems = useCallback(async () => {
     setLoading(true);
     try {
-      const filters: any[] = [];
-      if (searchKeyword) {
-        filters.push({ columnName: "item_name", operator: "contains", value: searchKeyword });
-      }
-      if (searchDivision !== "all") {
-        filters.push({ columnName: "division", operator: "equals", value: searchDivision });
-      }
-      if (searchType !== "all") {
-        filters.push({ columnName: "type", operator: "equals", value: searchType });
-      }
-      if (searchStatus !== "all") {
-        filters.push({ columnName: "status", operator: "equals", value: searchStatus });
-      }
-
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
       const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
         page: 1,
-        size: 500,
+        size: 99999,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
       });
 
       const raw = res.data?.data?.data || res.data?.data?.rows || [];
-      // 카테고리 코드→라벨 변환
       const resolve = (col: string, code: string) => {
         if (!code) return "";
+        // 쉼표 구분 다중값 지원
+        if (code.includes(",")) {
+          return code.split(",").map((c) => {
+            const trimmed = c.trim();
+            if (!trimmed || trimmed === "s") return "";
+            return categoryOptions[col]?.find((o) => o.code === trimmed)?.label || trimmed;
+          }).filter(Boolean).join(", ");
+        }
         return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
       };
+      setRawItems(raw);
       const data = raw.map((r: any) => {
         const converted = { ...r };
         for (const col of CATEGORY_COLUMNS) {
@@ -165,81 +275,89 @@ export default function ItemInfoPage() {
         return converted;
       });
       setItems(data);
-      setTotalCount(res.data?.data?.total || raw.length);
     } catch (err) {
       console.error("품목 조회 실패:", err);
-      toast.error("품목 목록을 불러오는데 실패했습니다.");
+      toast.error("품목 목록을 불러오는데 실패했어요.");
     } finally {
       setLoading(false);
     }
-  }, [searchKeyword, searchDivision, searchType, searchStatus, categoryOptions]);
+  }, [categoryOptions, searchFilters]);
 
   useEffect(() => {
     fetchItems();
   }, [fetchItems]);
 
-  // 카테고리 코드 → 라벨 변환
-  const getCategoryLabel = (columnName: string, code: string) => {
-    if (!code) return "";
-    const opts = categoryOptions[columnName];
-    if (!opts) return code;
-    const found = opts.find((o) => o.code === code);
-    return found?.label || code;
+  // 채번 미리보기 로드
+  const loadNumberingPreview = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${TABLE_NAME}/item_number`);
+      const rule = ruleRes.data?.data;
+      if (rule?.ruleId) {
+        const previewRes = await apiClient.post(`/numbering-rules/${rule.ruleId}/preview`, { formData: {} });
+        return previewRes.data?.data?.generatedCode || "";
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+    return "";
   };
 
   // 등록 모달 열기
-  const openRegisterModal = () => {
+  const openRegisterModal = async () => {
     setFormData({});
     setIsEditMode(false);
     setEditId(null);
     setIsModalOpen(true);
+    // 채번 컬럼 자동 로드
+    const code = await loadNumberingPreview();
+    if (code) setFormData(prev => ({ ...prev, item_number: code }));
   };
 
   // 수정 모달 열기
   const openEditModal = (item: any) => {
-    setFormData({ ...item });
+    const raw = rawItems.find((r) => r.id === item.id) || item;
+    setFormData({ ...raw });
     setIsEditMode(true);
     setEditId(item.id);
     setIsModalOpen(true);
   };
 
   // 복사 모달 열기
-  const openCopyModal = (item: any) => {
-    const { id, item_number, created_date, updated_date, writer, ...rest } = item;
+  const openCopyModal = async (item: any) => {
+    const raw = rawItems.find((r) => r.id === item.id) || item;
+    const { id, item_number, created_date, updated_date, writer, ...rest } = raw;
     setFormData(rest);
     setIsEditMode(false);
     setEditId(null);
+    const code = await loadNumberingPreview();
+    if (code) setFormData(prev => ({ ...prev, item_number: code }));
     setIsModalOpen(true);
   };
 
   // 저장
   const handleSave = async () => {
     if (!formData.item_name) {
-      toast.error("품명은 필수 입력입니다.");
+      toast.error("품명은 필수 입력이에요.");
       return;
     }
 
     setSaving(true);
     try {
       if (isEditMode && editId) {
-        // 수정
         const { id, created_date, updated_date, writer, company_code, ...updateFields } = formData;
         await apiClient.put(`/table-management/tables/${TABLE_NAME}/edit`, {
           originalData: { id: editId },
           updatedData: updateFields,
         });
-        toast.success("수정되었습니다.");
+        toast.success("수정되었어요.");
       } else {
-        // 등록
         const { id, created_date, updated_date, ...insertFields } = formData;
-        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, insertFields);
-        toast.success("등록되었습니다.");
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, { id: crypto.randomUUID(), ...insertFields });
+        toast.success("등록되었어요.");
       }
       setIsModalOpen(false);
       fetchItems();
     } catch (err: any) {
       console.error("저장 실패:", err);
-      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
     } finally {
       setSaving(false);
     }
@@ -248,34 +366,34 @@ export default function ItemInfoPage() {
   // 삭제
   const handleDelete = async () => {
     if (!selectedId) {
-      toast.error("삭제할 품목을 선택해주세요.");
+      toast.error("삭제할 품목을 선택해 주세요.");
       return;
     }
-    if (!confirm("선택한 품목을 삭제하시겠습니까?")) return;
+    if (!confirm("선택한 품목을 삭제할까요?")) return;
 
     try {
       await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
         data: [{ id: selectedId }],
       });
-      toast.success("삭제되었습니다.");
+      toast.success("삭제되었어요.");
       setSelectedId(null);
       fetchItems();
     } catch (err) {
       console.error("삭제 실패:", err);
-      toast.error("삭제에 실패했습니다.");
+      toast.error("삭제에 실패했어요.");
     }
   };
 
   // 엑셀 다운로드
   const handleExcelDownload = async () => {
     if (items.length === 0) {
-      toast.error("다운로드할 데이터가 없습니다.");
+      toast.error("다운로드할 데이터가 없어요.");
       return;
     }
     const exportData = items.map((item) => {
       const row: Record<string, any> = {};
-      for (const col of TABLE_COLUMNS) {
-        row[col.label] = getCategoryLabel(col.key, item[col.key]) || item[col.key] || "";
+      for (const col of GRID_COLUMNS) {
+        row[col.label] = item[col.key] || "";
       }
       return row;
     });
@@ -283,225 +401,186 @@ export default function ItemInfoPage() {
     toast.success("엑셀 다운로드 완료");
   };
 
-  // 검색 초기화
-  const handleResetSearch = () => {
-    setSearchKeyword("");
-    setSearchDivision("all");
-    setSearchType("all");
-    setSearchStatus("all");
-  };
-
-  // 카테고리 셀렉트 렌더링
-  const renderCategorySelect = (field: typeof FORM_FIELDS[0]) => {
-    const options = categoryOptions[field.key] || [];
-    return (
-      <Select
-        value={formData[field.key] || ""}
-        onValueChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
-      >
-        <SelectTrigger className="h-9 text-sm">
-          <SelectValue placeholder={`${field.label} 선택`} />
-        </SelectTrigger>
-        <SelectContent>
-          {options.map((opt) => (
-            <SelectItem key={opt.code} value={opt.code}>
-              {opt.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    );
-  };
-
   return (
-    <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">품명/품목코드</Label>
-            <Input
-              placeholder="검색"
-              className="w-[180px] h-9"
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && fetchItems()}
-            />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">관리품목</Label>
-            <Select value={searchDivision} onValueChange={setSearchDivision}>
-              <SelectTrigger className="w-[120px] h-9"><SelectValue placeholder="전체" /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                {(categoryOptions["division"] || []).map((o) => (
-                  <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">품목구분</Label>
-            <Select value={searchType} onValueChange={setSearchType}>
-              <SelectTrigger className="w-[120px] h-9"><SelectValue placeholder="전체" /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                {(categoryOptions["type"] || []).map((o) => (
-                  <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[110px] h-9"><SelectValue placeholder="전체" /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                {(categoryOptions["status"] || []).map((o) => (
-                  <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex-1" />
-          <div className="flex items-center gap-2">
-            {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+    <div className="flex h-full flex-col gap-0">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={TABLE_NAME}
+        filterId="c16-item-info"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+      />
 
-      {/* 메인 테이블 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm flex flex-col">
-        <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-          <div className="font-semibold flex items-center gap-2 text-sm">
-            <Package className="w-5 h-5" /> 품목 목록
-            <Badge variant="secondary" className="font-normal">{totalCount}건</Badge>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
-              <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
-            </Button>
-            <Button size="sm" onClick={openRegisterModal}>
-              <Plus className="w-4 h-4 mr-1.5" /> 품목 등록
-            </Button>
-            <Button variant="outline" size="sm" disabled={!selectedId} onClick={() => {
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between px-4 py-2.5 border-b">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-semibold">품목 관리</span>
+          <Badge variant="secondary" className="font-mono text-xs">{items.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
+          </Button>
+          <div className="mx-1 h-5 w-px bg-border" />
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4 mr-1.5" /> 품목 등록
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!selectedId}
+            onClick={() => {
               const item = items.find((i) => i.id === selectedId);
               if (item) openCopyModal(item);
-            }}>
-              <Copy className="w-4 h-4 mr-1.5" /> 복사
-            </Button>
-            <Button variant="outline" size="sm" disabled={!selectedId} onClick={() => {
+            }}
+          >
+            <Copy className="w-4 h-4 mr-1.5" /> 복사
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!selectedId}
+            onClick={() => {
               const item = items.find((i) => i.id === selectedId);
               if (item) openEditModal(item);
-            }}>
-              <Pencil className="w-4 h-4 mr-1.5" /> 수정
-            </Button>
-            <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
-              <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
-            </Button>
-          </div>
-        </div>
-
-        <div className="flex-1 overflow-auto">
-          {loading ? (
-            <div className="flex items-center justify-center h-32">
-              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-            </div>
-          ) : items.length === 0 ? (
-            <div className="flex flex-col items-center justify-center h-32 text-muted-foreground gap-2">
-              <Package className="w-8 h-8 opacity-50" />
-              <span>등록된 품목이 없습니다</span>
-            </div>
-          ) : (
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">No</TableHead>
-                  {TABLE_COLUMNS.map((col) => (
-                    <TableHead key={col.key} className={col.width}>{col.label}</TableHead>
-                  ))}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {items.map((item, idx) => (
-                  <TableRow
-                    key={item.id}
-                    className={cn("cursor-pointer", selectedId === item.id && "bg-primary/5")}
-                    onClick={() => setSelectedId(item.id)}
-                    onDoubleClick={() => openEditModal(item)}
-                  >
-                    <TableCell className="text-center text-xs text-muted-foreground">{idx + 1}</TableCell>
-                    {TABLE_COLUMNS.map((col) => (
-                      <TableCell key={col.key} className="text-sm">
-                        {["division", "type", "unit", "material", "status", "inventory_unit", "user_type01", "user_type02", "currency_code"].includes(col.key)
-                          ? getCategoryLabel(col.key, item[col.key])
-                          : item[col.key] || ""}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
+            }}
+          >
+            <Pencil className="w-4 h-4 mr-1.5" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
         </div>
       </div>
 
+      {/* 메인 테이블 */}
+      <EDataTable
+        columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+          key: col.key,
+          label: col.label,
+          align: (col as any).type === "image" ? "center" : col.align as "left" | "center" | "right" | undefined,
+          formatNumber: (col as any).formatNumber,
+          width: (col as any).type === "image" ? "w-[50px]" : undefined,
+          render: (col as any).type === "image" ? (val: any) => (
+            val ? (
+              <img src={String(val).startsWith("http") || String(val).startsWith("/") ? val : `/api/files/preview/${val}`} alt="" className="h-8 w-8 rounded object-cover border border-border mx-auto" onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
+            ) : <div className="h-8 w-8 rounded bg-muted mx-auto" />
+          ) : undefined,
+        }))}
+        data={ts.groupData(items)}
+        loading={loading}
+        emptyMessage="등록된 품목이 없어요"
+        selectedId={selectedId}
+        onSelect={(id) => setSelectedId(id)}
+        onRowDoubleClick={(row) => openEditModal(row)}
+        showRowNumber
+        draggableColumns={false}
+      />
+
       {/* 등록/수정 모달 */}
       <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-        <DialogContent className="max-w-2xl max-h-[90vh] overflow-auto">
-          <DialogHeader>
+        <DialogContent className="sm:max-w-[600px] w-[95vw] max-h-[90vh] flex flex-col p-0 overflow-hidden">
+          <DialogHeader className="shrink-0 px-6 pt-5 pb-3 border-b">
             <DialogTitle>{isEditMode ? "품목 수정" : "품목 등록"}</DialogTitle>
             <DialogDescription>
-              {isEditMode ? "품목 정보를 수정합니다." : "새로운 품목을 등록합니다."}
+              {isEditMode ? "품목 정보를 수정해요." : "새로운 품목을 등록해요."}
             </DialogDescription>
           </DialogHeader>
 
-          <div className="grid grid-cols-2 gap-4 py-4">
-            {FORM_FIELDS.map((field) => (
-              <div key={field.key} className={cn("space-y-1.5", field.type === "textarea" && "col-span-2")}>
-                <Label className="text-sm">
-                  {field.label}
-                  {field.required && <span className="text-destructive ml-1">*</span>}
-                </Label>
-                {field.type === "category" ? (
-                  renderCategorySelect(field)
-                ) : field.type === "textarea" ? (
-                  <Textarea
-                    value={formData[field.key] || ""}
-                    onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
-                    placeholder={field.label}
-                    rows={3}
-                  />
-                ) : (
-                  <Input
-                    value={formData[field.key] || ""}
-                    onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
-                    placeholder={field.placeholder || (field.disabled ? "자동 채번" : field.label)}
-                    disabled={field.disabled && !isEditMode}
-                    className="h-9"
-                  />
-                )}
-              </div>
-            ))}
+          <div className="flex-1 overflow-y-auto">
+            <div className="grid grid-cols-2 gap-4 p-6">
+              {FORM_FIELDS.map((field) => (
+                <div
+                  key={field.key}
+                  className={cn("space-y-1.5", (field.type === "textarea" || field.type === "image") && "col-span-2")}
+                >
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    {field.label}
+                    {field.required && <span className="text-destructive ml-1">*</span>}
+                  </Label>
+                  {field.type === "image" ? (
+                    <ImageUpload
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      tableName={TABLE_NAME}
+                      recordId={formData.id || ""}
+                      columnName={field.key}
+                      height="h-32"
+                    />
+                  ) : field.type === "multi-category" ? (
+                    <MultiCategoryCombobox
+                      options={categoryOptions[field.key] || []}
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      placeholder={`${field.label} 선택`}
+                    />
+                  ) : field.type === "category" ? (
+                    <CategoryCombobox
+                      options={categoryOptions[field.key] || []}
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      placeholder={`${field.label} 선택`}
+                    />
+                  ) : field.type === "textarea" ? (
+                    <Textarea
+                      value={formData[field.key] || ""}
+                      onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                      placeholder={field.label}
+                      rows={3}
+                    />
+                  ) : ["selling_price", "standard_price"].includes(field.key) ? (
+                    <Input
+                      value={formData[field.key] ? Number(String(formData[field.key]).replace(/,/g, "")).toLocaleString() : ""}
+                      onChange={(e) => {
+                        const raw = e.target.value.replace(/[^\d.-]/g, "");
+                        setFormData((prev) => ({ ...prev, [field.key]: raw }));
+                      }}
+                      placeholder={field.placeholder || field.label}
+                      className="h-9 text-right"
+                    />
+                  ) : (
+                    <Input
+                      value={formData[field.key] || ""}
+                      onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                      placeholder={field.placeholder || (field.disabled ? "자동 채번" : field.label)}
+                      disabled={field.disabled && !isEditMode}
+                      className="h-9"
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
           </div>
 
-          <DialogFooter>
+          <DialogFooter className="shrink-0 border-t px-6 py-3">
             <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
             <Button onClick={handleSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {saving
+                ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+                : <Save className="w-4 h-4 mr-1.5" />
+              }
               저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
       {/* 엑셀 업로드 모달 */}
       <ExcelUploadModal
         open={excelUploadOpen}
diff --git a/frontend/app/(main)/COMPANY_29/master-data/options/page.tsx b/frontend/app/(main)/COMPANY_29/master-data/options/page.tsx
new file mode 100644
index 00000000..7506ad94
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/master-data/options/page.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { Settings2, Tags, Hash } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { CategoryColumnList } from "@/components/table-category/CategoryColumnList";
+import { CategoryValueManager } from "@/components/table-category/CategoryValueManager";
+import { NumberingRuleDesigner } from "@/components/numbering-rule/NumberingRuleDesigner";
+
+const TABS = [
+  { id: "category", label: "카테고리 설정", icon: Tags },
+  { id: "numbering", label: "코드 설정", icon: Hash },
+] as const;
+
+type TabId = (typeof TABS)[number]["id"];
+
+export default function OptionsSettingPage() {
+  const [activeTab, setActiveTab] = useState<TabId>("category");
+
+  const [selectedColumn, setSelectedColumn] = useState<string | null>(null);
+  const [selectedColumnLabel, setSelectedColumnLabel] = useState("");
+  const [selectedTableName, setSelectedTableName] = useState("");
+
+  const [leftWidth, setLeftWidth] = useState(340);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = useCallback(() => {
+    setIsDragging(true);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      setLeftWidth(Math.max(260, Math.min(500, e.clientX - rect.left)));
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
+
+  return (
+    <div className="flex h-full flex-col p-3 gap-3">
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <Settings2 className="h-4 w-4 text-primary" />
+          <h1 className="text-sm font-semibold">옵션 설정</h1>
+        </div>
+        <div className="flex bg-muted rounded-md p-0.5 gap-0.5">
+          {TABS.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  "flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-all",
+                  activeTab === tab.id
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <Icon className="h-3.5 w-3.5" />
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0">
+        {activeTab === "category" && (
+          <div ref={containerRef} className="flex h-full">
+            <div
+              style={{ width: leftWidth }}
+              className="shrink-0 border rounded-lg bg-card overflow-hidden"
+            >
+              <CategoryColumnList
+                tableName=""
+                selectedColumn={selectedColumn}
+                onColumnSelect={(uniqueKey, label, tableName) => {
+                  setSelectedColumn(uniqueKey);
+                  setSelectedColumnLabel(label);
+                  setSelectedTableName(tableName);
+                }}
+              />
+            </div>
+
+            <div
+              onMouseDown={handleMouseDown}
+              className={cn(
+                "w-1.5 mx-0.5 cursor-col-resize rounded-full transition-colors shrink-0",
+                isDragging ? "bg-primary" : "bg-border hover:bg-primary/50"
+              )}
+            />
+
+            <div className="flex-1 min-w-0 border rounded-lg bg-card overflow-hidden">
+              {selectedColumn && selectedTableName ? (
+                <CategoryValueManager
+                  tableName={selectedTableName}
+                  columnName={selectedColumn.includes(".") ? selectedColumn.split(".").pop()! : selectedColumn}
+                  columnLabel={selectedColumnLabel}
+                />
+              ) : (
+                <div className="flex h-full items-center justify-center">
+                  <div className="text-center space-y-2">
+                    <Tags className="h-8 w-8 mx-auto text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">좌측에서 카테고리 컬럼을 선택해주세요</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {activeTab === "numbering" && (
+          <div className="h-full border rounded-lg bg-card overflow-auto">
+            <NumberingRuleDesigner />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/mold/info/page.tsx b/frontend/app/(main)/COMPANY_29/mold/info/page.tsx
new file mode 100644
index 00000000..dcd92eac
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/mold/info/page.tsx
@@ -0,0 +1,1450 @@
+"use client";
+
+/**
+ * 금형정보 — Type E 카드리스트형
+ *
+ * 좌측: 금형 카드 리스트 (이미지 + 코드 + 이름 + 유형뱃지 + 수명진행률)
+ * 우측: 금형 상세 + 탭 3개 (일련번호 / 점검항목 / 부품)
+ * 전용 API: /molds/*
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Plus, Trash2, Loader2, Pencil, Box, Inbox, Search,
+  Wrench, ClipboardCheck, Package, LayoutGrid, List,
+  Image as ImageIcon, Upload, X as XIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+
+// ─── API base ───
+const API = "/mold";
+
+// ─── 상태/유형 매핑 ───
+const STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  ACTIVE: { label: "사용중", variant: "default" },
+  INSPECTION: { label: "점검중", variant: "secondary" },
+  REPAIR: { label: "수리중", variant: "outline" },
+  DISPOSED: { label: "폐기", variant: "destructive" },
+};
+
+const SERIAL_STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  IN_USE: { label: "사용중", variant: "default" },
+  STORED: { label: "보관중", variant: "secondary" },
+  REPAIR: { label: "수리중", variant: "outline" },
+  DISPOSED: { label: "폐기", variant: "destructive" },
+};
+
+// ─── 수명 진행률 색상 ───
+function getProgressColor(pct: number) {
+  if (pct < 60) return "bg-success";
+  if (pct < 85) return "bg-warning";
+  return "bg-destructive";
+}
+
+function getProgressTextColor(pct: number) {
+  if (pct < 60) return "text-success";
+  if (pct < 85) return "text-warning";
+  return "text-destructive";
+}
+
+export default function MoldInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // ─── 좌측: 금형 목록 ───
+  const [molds, setMolds] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedMoldCode, setSelectedMoldCode] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<"list" | "grid">("list");
+
+  // ─── 검색 필터 ───
+  const [filterCode, setFilterCode] = useState("");
+  const [filterName, setFilterName] = useState("");
+  const [filterType, setFilterType] = useState("");
+  const [filterStatus, setFilterStatus] = useState("");
+
+  // ─── 우측: 상세 ───
+  const [detail, setDetail] = useState<any>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [serialSummary, setSerialSummary] = useState<any>(null);
+  const [rightTab, setRightTab] = useState("serial");
+
+  // ─── 일련번호 ───
+  const [serials, setSerials] = useState<any[]>([]);
+  const [serialLoading, setSerialLoading] = useState(false);
+
+  // ─── 점검항목 ───
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspectionLoading, setInspectionLoading] = useState(false);
+
+  // ─── 부품 ───
+  const [parts, setParts] = useState<any[]>([]);
+  const [partLoading, setPartLoading] = useState(false);
+
+  // ─── 모달 ───
+  const [moldModalOpen, setMoldModalOpen] = useState(false);
+  const [moldEditMode, setMoldEditMode] = useState(false);
+  const [moldForm, setMoldForm] = useState<Record<string, any>>({});
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [moldImagePreview, setMoldImagePreview] = useState<string | null>(null);
+  const moldImageRef = React.useRef<HTMLInputElement>(null);
+
+  const [serialModalOpen, setSerialModalOpen] = useState(false);
+  const [serialForm, setSerialForm] = useState<Record<string, any>>({});
+
+  const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
+  const [inspectionForm, setInspectionForm] = useState<Record<string, any>>({});
+
+  const [partModalOpen, setPartModalOpen] = useState(false);
+  const [partForm, setPartForm] = useState<Record<string, any>>({});
+
+  // ─── 금형 목록 조회 ───
+  const fetchMolds = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      if (filterCode) params.mold_code = filterCode;
+      if (filterName) params.mold_name = filterName;
+      if (filterType) params.mold_type = filterType;
+      if (filterStatus) params.operation_status = filterStatus;
+
+      const res = await apiClient.get(API, { params });
+      setMolds(res.data?.data || []);
+    } catch {
+      toast.error("금형 목록을 불러올 수 없어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [filterCode, filterName, filterType, filterStatus]);
+
+  useEffect(() => { fetchMolds(); }, [fetchMolds]);
+
+  // ─── 금형 상세 + 하위 데이터 ───
+  const fetchDetail = useCallback(async (code: string) => {
+    setDetailLoading(true);
+    try {
+      const [detailRes, summaryRes] = await Promise.all([
+        apiClient.get(`${API}/${code}`),
+        apiClient.get(`${API}/${code}/serial-summary`),
+      ]);
+      setDetail(detailRes.data?.data || null);
+      setSerialSummary(summaryRes.data?.data || null);
+    } catch {
+      toast.error("금형 상세를 불러올 수 없어요.");
+    } finally {
+      setDetailLoading(false);
+    }
+  }, []);
+
+  const fetchSerials = useCallback(async (code: string) => {
+    setSerialLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/serials`);
+      setSerials(res.data?.data || []);
+    } catch {
+      toast.error("일련번호를 불러올 수 없어요.");
+    } finally {
+      setSerialLoading(false);
+    }
+  }, []);
+
+  const fetchInspections = useCallback(async (code: string) => {
+    setInspectionLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/inspections`);
+      setInspections(res.data?.data || []);
+    } catch {
+      toast.error("점검항목을 불러올 수 없어요.");
+    } finally {
+      setInspectionLoading(false);
+    }
+  }, []);
+
+  const fetchParts = useCallback(async (code: string) => {
+    setPartLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/parts`);
+      setParts(res.data?.data || []);
+    } catch {
+      toast.error("부품을 불러올 수 없어요.");
+    } finally {
+      setPartLoading(false);
+    }
+  }, []);
+
+  // 금형 선택
+  const handleSelectMold = useCallback((code: string) => {
+    setSelectedMoldCode(code);
+    setRightTab("serial");
+    fetchDetail(code);
+    fetchSerials(code);
+    fetchInspections(code);
+    fetchParts(code);
+  }, [fetchDetail, fetchSerials, fetchInspections, fetchParts]);
+
+  // 탭 변경 시 재조회
+  useEffect(() => {
+    if (!selectedMoldCode) return;
+    if (rightTab === "serial") fetchSerials(selectedMoldCode);
+    else if (rightTab === "inspection") fetchInspections(selectedMoldCode);
+    else if (rightTab === "part") fetchParts(selectedMoldCode);
+  }, [rightTab, selectedMoldCode, fetchSerials, fetchInspections, fetchParts]);
+
+  // ─── 금형 CRUD ───
+  const handleOpenRegister = async () => {
+    setMoldEditMode(false);
+    setMoldForm({});
+    setMoldImagePreview(null);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setMoldModalOpen(true);
+
+    // 채번 규칙 조회 (mold_mng.mold_code)
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/mold_mng/mold_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시 — 수동 입력 모드
+    }
+  };
+
+  const handleOpenEdit = () => {
+    if (!detail) return;
+    setMoldEditMode(true);
+    setMoldForm({ ...detail });
+    setMoldImagePreview(detail.image_path || null);
+    setMoldModalOpen(true);
+  };
+
+  const handleMoldImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result as string;
+      setMoldImagePreview(result);
+      setMoldForm((prev) => ({ ...prev, image_path: result }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleSaveMold = async () => {
+    // 등록 모드에서 채번이 없으면 수동 입력 필수
+    if (!moldEditMode && !numberingRuleId && !moldForm.mold_code) {
+      toast.error("금형코드와 금형명은 필수예요.");
+      return;
+    }
+    if (!moldForm.mold_name) {
+      toast.error("금형명은 필수예요.");
+      return;
+    }
+    if (moldEditMode && !moldForm.mold_code) {
+      toast.error("금형코드가 없어요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      if (moldEditMode) {
+        await apiClient.put(`${API}/${moldForm.mold_code}`, moldForm);
+        toast.success("금형이 수정되었어요.");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let saveData = { ...moldForm };
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            saveData.mold_code = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했어요.");
+            return;
+          }
+        }
+        await apiClient.post(API, saveData);
+        toast.success("금형이 등록되었어요.");
+      }
+      setMoldModalOpen(false);
+      fetchMolds();
+      if (moldEditMode && selectedMoldCode === moldForm.mold_code) {
+        fetchDetail(moldForm.mold_code);
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteMold = async () => {
+    if (!selectedMoldCode || !detail) return;
+    const ok = await confirm(
+      "금형을 삭제하시겠어요?",
+      { description: `"${detail.mold_name}" 금형과 하위 일련번호, 점검항목, 부품이 모두 삭제돼요.`, variant: "destructive" },
+    );
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/${selectedMoldCode}`);
+      toast.success("금형이 삭제되었어요.");
+      setSelectedMoldCode(null);
+      setDetail(null);
+      fetchMolds();
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 일련번호 CRUD ───
+  const handleSaveSerial = async () => {
+    if (!selectedMoldCode) return;
+    setSaving(true);
+    try {
+      if (serialForm.id) {
+        await apiClient.put(`${API}/serials/${serialForm.id}`, serialForm);
+        toast.success("일련번호가 수정되었어요.");
+      } else {
+        await apiClient.post(`${API}/${selectedMoldCode}/serials`, serialForm);
+        toast.success("일련번호가 등록되었어요.");
+      }
+      setSerialModalOpen(false);
+      setSerialForm({});
+      fetchSerials(selectedMoldCode);
+      fetchDetail(selectedMoldCode);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteSerial = async (id: number) => {
+    const ok = await confirm("이 일련번호를 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/serials/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) {
+        fetchSerials(selectedMoldCode);
+        fetchDetail(selectedMoldCode);
+      }
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 점검항목 CRUD ───
+  const handleAddInspection = async () => {
+    if (!selectedMoldCode) return;
+    if (!inspectionForm.inspection_item) {
+      toast.error("점검항목명은 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      await apiClient.post(`${API}/${selectedMoldCode}/inspections`, inspectionForm);
+      toast.success("점검항목이 등록되었어요.");
+      setInspectionModalOpen(false);
+      setInspectionForm({});
+      fetchInspections(selectedMoldCode);
+    } catch {
+      toast.error("등록에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteInspection = async (id: number) => {
+    const ok = await confirm("이 점검항목을 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/inspections/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) fetchInspections(selectedMoldCode);
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 부품 CRUD ───
+  const handleAddPart = async () => {
+    if (!selectedMoldCode) return;
+    if (!partForm.part_name) {
+      toast.error("부품명은 필수예요.");
+      return;
+    }
+    if (!partForm.replacement_cycle) {
+      toast.error("교체주기는 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      await apiClient.post(`${API}/${selectedMoldCode}/parts`, partForm);
+      toast.success("부품이 등록되었어요.");
+      setPartModalOpen(false);
+      setPartForm({});
+      fetchParts(selectedMoldCode);
+    } catch {
+      toast.error("등록에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeletePart = async (id: number) => {
+    const ok = await confirm("이 부품을 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/parts/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) fetchParts(selectedMoldCode);
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 수명 진행률 계산 ───
+  const calcLifePct = (mold: any) => {
+    const max = Number(mold.shot_count) || 0;
+    const current = Number(mold.current_shot_count) || 0;
+    if (max <= 0) return 0;
+    return Math.min(Math.round((current / max) * 100), 100);
+  };
+
+  // ─── 카드 렌더링 ───
+  const renderCard = (mold: any) => {
+    const pct = calcLifePct(mold);
+    const st = STATUS_MAP[mold.operation_status] || { label: mold.operation_status || "-", variant: "secondary" as const };
+    const isSelected = selectedMoldCode === mold.mold_code;
+
+    return (
+      <div
+        key={mold.mold_code}
+        onClick={() => handleSelectMold(mold.mold_code)}
+        className={cn(
+          "rounded-lg border cursor-pointer transition-all overflow-hidden",
+          "hover:shadow-md hover:-translate-y-0.5",
+          isSelected
+            ? "border-primary ring-2 ring-primary/25"
+            : "border-border hover:border-border",
+          viewMode === "list" ? "flex flex-row" : "",
+        )}
+      >
+        {/* 이미지 영역 */}
+        <div className={cn(
+          "bg-muted flex items-center justify-center relative",
+          viewMode === "list"
+            ? "w-[120px] min-w-[120px] min-h-[100px]"
+            : "h-[160px]",
+        )}>
+          {mold.image_path ? (
+            <img
+              src={mold.image_path}
+              alt={mold.mold_name}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <Box className="w-8 h-8 text-muted-foreground/50" />
+          )}
+          <div className="absolute top-2 right-2">
+            <Badge variant={st.variant} className="text-[10px]">{st.label}</Badge>
+          </div>
+        </div>
+
+        {/* 본문 */}
+        <div className={cn("flex-1 p-3", viewMode === "list" && "flex items-center gap-4")}>
+          <div className="flex-1 min-w-0">
+            <p className="text-xs text-muted-foreground font-mono truncate">{mold.mold_code}</p>
+            <p className="text-sm font-semibold truncate">{mold.mold_name}</p>
+            {mold.mold_type && (
+              <Badge variant="outline" className="text-[10px] mt-1">{mold.mold_type}</Badge>
+            )}
+          </div>
+
+          {/* 수명 진행률 */}
+          <div className={cn("mt-2", viewMode === "list" && "mt-0 min-w-[140px]")}>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-[11px] text-muted-foreground">수명</span>
+              <span className={cn("text-[11px] font-mono font-semibold", getProgressTextColor(pct))}>
+                {pct}%
+              </span>
+            </div>
+            <div className="h-1 bg-muted rounded-full overflow-hidden">
+              <div
+                className={cn("h-full rounded-full transition-all", getProgressColor(pct))}
+                style={{ width: `${pct}%` }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // ─── 선택 금형 상세 ───
+  const selectedMold = detail;
+  const lifePct = selectedMold ? calcLifePct(selectedMold) : 0;
+
+  return (
+    <div className="flex flex-col h-full p-3 gap-3 overflow-hidden">
+      {ConfirmDialogComponent}
+
+      {/* 검색 필터 */}
+      <div className="rounded-lg border bg-card p-3">
+        <div className="flex flex-wrap items-end gap-3">
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형코드</Label>
+            <Input
+              className="h-9 w-[160px] text-sm"
+              placeholder="코드를 입력해주세요"
+              value={filterCode}
+              onChange={(e) => setFilterCode(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형명</Label>
+            <Input
+              className="h-9 w-[160px] text-sm"
+              placeholder="금형명을 입력해주세요"
+              value={filterName}
+              onChange={(e) => setFilterName(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형유형</Label>
+            <Select value={filterType || "__all__"} onValueChange={(v) => setFilterType(v === "__all__" ? "" : v)}>
+              <SelectTrigger className="h-9 w-[140px] text-sm">
+                <SelectValue placeholder="전체" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체</SelectItem>
+                <SelectItem value="사출금형">사출금형</SelectItem>
+                <SelectItem value="프레스금형">프레스금형</SelectItem>
+                <SelectItem value="다이캐스팅">다이캐스팅</SelectItem>
+                <SelectItem value="단조금형">단조금형</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">상태</Label>
+            <Select value={filterStatus || "__all__"} onValueChange={(v) => setFilterStatus(v === "__all__" ? "" : v)}>
+              <SelectTrigger className="h-9 w-[140px] text-sm">
+                <SelectValue placeholder="전체" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체</SelectItem>
+                <SelectItem value="ACTIVE">사용중</SelectItem>
+                <SelectItem value="INSPECTION">점검중</SelectItem>
+                <SelectItem value="REPAIR">수리중</SelectItem>
+                <SelectItem value="DISPOSED">폐기</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <Button size="sm" className="h-9" onClick={fetchMolds}>
+            <Search className="w-4 h-4 mr-1" />
+            조회
+          </Button>
+        </div>
+      </div>
+
+      {/* 메인 분할 패널 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 rounded-lg border bg-card overflow-hidden">
+        {/* ─── 좌측: 카드 리스트 ─── */}
+        <ResizablePanel defaultSize={35} minSize={20} maxSize={50}>
+          <div className="flex flex-col h-full">
+            {/* 패널 헤더 */}
+            <div className="flex items-center justify-between px-4 py-3 border-b">
+              <div className="flex items-center gap-2">
+                <h3 className="text-sm font-semibold">금형 목록</h3>
+                <span className="text-xs font-mono font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full">
+                  {molds.length}
+                </span>
+              </div>
+              <div className="flex items-center gap-1.5">
+                {/* 뷰 토글 */}
+                <div className="flex border rounded overflow-hidden">
+                  <button
+                    onClick={() => setViewMode("grid")}
+                    className={cn(
+                      "p-1.5 transition-colors",
+                      viewMode === "grid"
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground/50 hover:text-muted-foreground hover:bg-accent",
+                    )}
+                  >
+                    <LayoutGrid className="w-3.5 h-3.5" />
+                  </button>
+                  <button
+                    onClick={() => setViewMode("list")}
+                    className={cn(
+                      "p-1.5 transition-colors border-l",
+                      viewMode === "list"
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground/50 hover:text-muted-foreground hover:bg-accent",
+                    )}
+                  >
+                    <List className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+                <Button size="sm" className="h-8" onClick={handleOpenRegister}>
+                  <Plus className="w-4 h-4 mr-1" />
+                  등록
+                </Button>
+              </div>
+            </div>
+
+            {/* 카드 스크롤 영역 */}
+            <div className="flex-1 overflow-y-auto p-2">
+              {loading ? (
+                <div className="flex items-center justify-center h-40">
+                  <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : molds.length === 0 ? (
+                <div className="flex flex-col items-center justify-center h-40 gap-2 text-muted-foreground">
+                  <Inbox className="w-10 h-10 opacity-40" />
+                  <p className="text-sm">등록된 금형이 없어요.</p>
+                </div>
+              ) : (
+                <div className={cn(
+                  "grid gap-2",
+                  viewMode === "grid"
+                    ? "grid-cols-[repeat(auto-fill,minmax(200px,1fr))]"
+                    : "grid-cols-1",
+                )}>
+                  {molds.map(renderCard)}
+                </div>
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* ─── 우측: 상세 ─── */}
+        <ResizablePanel defaultSize={65} minSize={40}>
+          <div className="flex flex-col h-full overflow-y-auto">
+            {!selectedMoldCode ? (
+              <div className="flex flex-col items-center justify-center h-full gap-3 text-muted-foreground">
+                <Box className="w-14 h-14 opacity-30" />
+                <p className="text-sm font-medium">좌측에서 금형을 선택해주세요</p>
+                <p className="text-xs text-muted-foreground/60">금형을 선택하면 상세 정보를 확인할 수 있어요</p>
+              </div>
+            ) : detailLoading ? (
+              <div className="flex items-center justify-center h-full">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : selectedMold ? (
+              <div className="p-5">
+                {/* 상세 헤더 */}
+                <div className="flex gap-5 pb-5 border-b mb-4">
+                  {/* 이미지 */}
+                  <div className="w-[200px] min-w-[200px] h-[200px] bg-muted rounded-lg flex items-center justify-center border">
+                    {selectedMold.image_path ? (
+                      <img
+                        src={selectedMold.image_path}
+                        alt={selectedMold.mold_name}
+                        className="w-full h-full object-cover rounded-lg"
+                      />
+                    ) : (
+                      <ImageIcon className="w-16 h-16 text-muted-foreground/40" />
+                    )}
+                  </div>
+
+                  {/* 메타 정보 */}
+                  <div className="flex-1 flex flex-col justify-center min-w-0">
+                    <p className="text-xs text-muted-foreground font-mono mb-1">{selectedMold.mold_code}</p>
+                    <h2 className="text-xl font-bold mb-2 truncate">{selectedMold.mold_name}</h2>
+                    <div className="flex gap-1.5 mb-4 flex-wrap">
+                      {selectedMold.mold_type && (
+                        <Badge variant="outline">{selectedMold.mold_type}</Badge>
+                      )}
+                      {selectedMold.category && (
+                        <Badge variant="secondary">{selectedMold.category}</Badge>
+                      )}
+                      <Badge variant={STATUS_MAP[selectedMold.operation_status]?.variant || "secondary"}>
+                        {STATUS_MAP[selectedMold.operation_status]?.label || selectedMold.operation_status || "-"}
+                      </Badge>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-x-5 gap-y-2 text-sm">
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">제조사</span>
+                        <p className="text-foreground">{selectedMold.manufacturer || "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">제작일</span>
+                        <p className="text-foreground">{selectedMold.manufacturing_date || "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">캐비티수</span>
+                        <p className="text-foreground font-mono">{selectedMold.cavity_count ?? "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">수량</span>
+                        <p className="text-foreground font-mono">{selectedMold.mold_quantity ?? "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">최대수명</span>
+                        <p className="text-foreground font-mono">{Number(selectedMold.shot_count || 0).toLocaleString()}회</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">보증수명</span>
+                        <p className="text-foreground font-mono">{Number(selectedMold.warranty_shot_count || 0).toLocaleString()}회</p>
+                      </div>
+                    </div>
+
+                    {/* 수명 진행률 바 */}
+                    <div className="mt-3">
+                      <div className="flex items-center justify-between mb-1">
+                        <span className="text-xs text-muted-foreground">수명 사용률</span>
+                        <span className={cn("text-sm font-mono font-semibold", getProgressTextColor(lifePct))}>
+                          {lifePct}%
+                        </span>
+                      </div>
+                      <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                        <div
+                          className={cn("h-full rounded-full transition-all", getProgressColor(lifePct))}
+                          style={{ width: `${lifePct}%` }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 액션 버튼 */}
+                  <div className="flex flex-col gap-2 flex-shrink-0">
+                    <Button variant="outline" size="sm" className="h-8" onClick={handleOpenEdit}>
+                      <Pencil className="w-3.5 h-3.5 mr-1" />
+                      수정
+                    </Button>
+                    <Button variant="outline" size="sm" className="h-8 text-destructive hover:text-destructive" onClick={handleDeleteMold}>
+                      <Trash2 className="w-3.5 h-3.5 mr-1" />
+                      삭제
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 탭 3개 */}
+                <Tabs value={rightTab} onValueChange={setRightTab}>
+                  <TabsList className="w-full justify-start border-b rounded-none bg-transparent h-auto p-0">
+                    <TabsTrigger
+                      value="serial"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <Wrench className="w-4 h-4 mr-1.5" />
+                      일련번호
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {serials.length}
+                      </span>
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="inspection"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <ClipboardCheck className="w-4 h-4 mr-1.5" />
+                      점검항목
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {inspections.length}
+                      </span>
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="part"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <Package className="w-4 h-4 mr-1.5" />
+                      부품
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {parts.length}
+                      </span>
+                    </TabsTrigger>
+                  </TabsList>
+
+                  {/* ─── 탭1: 일련번호 ─── */}
+                  <TabsContent value="serial" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">
+                        {serialSummary && (
+                          <>
+                            사용중 {serialSummary.in_use || 0} · 보관중 {serialSummary.stored || 0} · 수리중 {serialSummary.repair || 0} · 폐기 {serialSummary.disposed || 0}
+                          </>
+                        )}
+                      </span>
+                      <Button size="sm" className="h-8" onClick={() => { setSerialForm({}); setSerialModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        일련번호 등록
+                      </Button>
+                    </div>
+                    {serialLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : serials.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <Wrench className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 일련번호가 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">일련번호</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[200px]">샷수 현황</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">보관위치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                              <TableHead className="text-xs w-[80px]">작업</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {serials.map((s: any) => {
+                              const ss = SERIAL_STATUS_MAP[s.status] || { label: s.status || "-", variant: "secondary" as const };
+                              const maxShot = detail?.shot_count || 0;
+                              const curShot = s.current_shot_count || 0;
+                              const pct = maxShot > 0 ? Math.min(Math.round((curShot / maxShot) * 100), 100) : 0;
+                              return (
+                                <TableRow key={s.id}>
+                                  <TableCell className="text-[13px] font-mono font-semibold">{s.serial_number}</TableCell>
+                                  <TableCell>
+                                    <Badge variant={ss.variant} className="text-[10px]">{ss.label}</Badge>
+                                  </TableCell>
+                                  <TableCell>
+                                    {maxShot > 0 ? (
+                                      <div className="space-y-1">
+                                        <div className="flex items-center gap-2">
+                                          <div className="flex-1 h-3 bg-muted rounded-full overflow-hidden">
+                                            <div
+                                              className={cn("h-full rounded-full transition-all", getProgressColor(pct))}
+                                              style={{ width: `${pct}%` }}
+                                            />
+                                          </div>
+                                          <span className={cn("text-xs font-bold min-w-[36px] text-right", getProgressTextColor(pct))}>
+                                            {pct}%
+                                          </span>
+                                        </div>
+                                        <p className="text-[11px] text-muted-foreground">
+                                          {curShot.toLocaleString()} / {maxShot.toLocaleString()}
+                                        </p>
+                                      </div>
+                                    ) : (
+                                      <span className="text-xs text-muted-foreground">-</span>
+                                    )}
+                                  </TableCell>
+                                  <TableCell className="text-[13px]">{s.storage_location || "-"}</TableCell>
+                                  <TableCell className="text-[13px] text-muted-foreground">{s.remarks || "-"}</TableCell>
+                                  <TableCell>
+                                    <div className="flex items-center gap-1">
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-7 w-7 p-0"
+                                        onClick={() => {
+                                          setSerialForm(s);
+                                          setSerialModalOpen(true);
+                                        }}
+                                      >
+                                        <Pencil className="w-3.5 h-3.5" />
+                                      </Button>
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                        onClick={() => handleDeleteSerial(s.id)}
+                                      >
+                                        <Trash2 className="w-3.5 h-3.5" />
+                                      </Button>
+                                    </div>
+                                  </TableCell>
+                                </TableRow>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+
+                  {/* ─── 탭2: 점검항목 ─── */}
+                  <TabsContent value="inspection" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">점검항목 목록</span>
+                      <Button size="sm" className="h-8" onClick={() => { setInspectionForm({}); setInspectionModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        점검항목 등록
+                      </Button>
+                    </div>
+                    {inspectionLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : inspections.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <ClipboardCheck className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 점검항목이 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검항목</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">하한치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                              <TableHead className="text-xs w-[60px]" />
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {inspections.map((ins: any) => (
+                              <TableRow key={ins.id}>
+                                <TableCell className="text-[13px] font-medium">{ins.inspection_item}</TableCell>
+                                <TableCell className="text-[13px]">{ins.inspection_cycle || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{ins.inspection_method || "-"}</TableCell>
+                                <TableCell className="text-[13px] font-mono">{ins.lower_limit || "-"}</TableCell>
+                                <TableCell className="text-[13px] font-mono">{ins.upper_limit || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{ins.unit || "-"}</TableCell>
+                                <TableCell>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                    onClick={() => handleDeleteInspection(ins.id)}
+                                  >
+                                    <Trash2 className="w-3.5 h-3.5" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+
+                  {/* ─── 탭3: 부품 ─── */}
+                  <TabsContent value="part" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">부품 목록</span>
+                      <Button size="sm" className="h-8" onClick={() => { setPartForm({}); setPartModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        부품 등록
+                      </Button>
+                    </div>
+                    {partLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : parts.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <Package className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 부품이 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부품명</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">교체주기</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">제조사</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                              <TableHead className="text-xs w-[60px]" />
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {parts.map((p: any) => (
+                              <TableRow key={p.id}>
+                                <TableCell className="text-[13px] font-medium">{p.part_name}</TableCell>
+                                <TableCell className="text-[13px]">{p.replacement_cycle || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.unit || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.specification || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.manufacturer || "-"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{p.remarks || "-"}</TableCell>
+                                <TableCell>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                    onClick={() => handleDeletePart(p.id)}
+                                  >
+                                    <Trash2 className="w-3.5 h-3.5" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+                </Tabs>
+              </div>
+            ) : null}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 금형 등록/수정 모달 ========== */}
+      <Dialog open={moldModalOpen} onOpenChange={setMoldModalOpen}>
+        <DialogContent className="max-w-3xl overflow-y-auto" style={{ maxHeight: "90vh" }}>
+          <DialogHeader>
+            <DialogTitle>{moldEditMode ? "금형 수정" : "금형 등록"}</DialogTitle>
+            <DialogDescription>금형 기본 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형코드 <span className="text-destructive">*</span></Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldEditMode ? (moldForm.mold_code || "") : (numberingRuleId ? (previewCode || "") : (moldForm.mold_code || ""))}
+                  onChange={(e) => {
+                    if (!moldEditMode && !numberingRuleId) {
+                      setMoldForm({ ...moldForm, mold_code: e.target.value });
+                    }
+                  }}
+                  readOnly={moldEditMode || !!numberingRuleId}
+                  placeholder={moldEditMode ? "" : (numberingRuleId ? (previewCode ? "" : "자동 생성 중...") : "금형코드를 입력해주세요")}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형명 <span className="text-destructive">*</span></Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.mold_name || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, mold_name: e.target.value })}
+                  placeholder="금형명을 입력해주세요"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형유형</Label>
+                <Select
+                  value={moldForm.mold_type || ""}
+                  onValueChange={(v) => setMoldForm({ ...moldForm, mold_type: v })}
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="사출금형">사출금형</SelectItem>
+                    <SelectItem value="프레스금형">프레스금형</SelectItem>
+                    <SelectItem value="다이캐스팅">다이캐스팅</SelectItem>
+                    <SelectItem value="단조금형">단조금형</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">카테고리</Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.category || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, category: e.target.value })}
+                  placeholder="카테고리"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">제조사</Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.manufacturer || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, manufacturer: e.target.value })}
+                  placeholder="제조사"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">제작일</Label>
+                <Input
+                  type="date"
+                  className="h-9 text-sm"
+                  value={moldForm.manufacturing_date || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, manufacturing_date: e.target.value })}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">캐비티수</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.cavity_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, cavity_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">최대수명 (샷수)</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.shot_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, shot_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형수량</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.mold_quantity ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, mold_quantity: e.target.value })}
+                  min={1}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">가동상태</Label>
+                <Select
+                  value={moldForm.operation_status || ""}
+                  onValueChange={(v) => setMoldForm({ ...moldForm, operation_status: v })}
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="ACTIVE">사용중</SelectItem>
+                    <SelectItem value="INSPECTION">점검중</SelectItem>
+                    <SelectItem value="REPAIR">수리중</SelectItem>
+                    <SelectItem value="DISPOSED">폐기</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">보증수명 (샷수)</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.warranty_shot_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, warranty_shot_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형 이미지</Label>
+                <div className="relative w-full h-32 rounded-lg border-2 border-dashed border-border bg-muted/50 flex items-center justify-center overflow-hidden group">
+                  {moldImagePreview ? (
+                    <>
+                      <img src={moldImagePreview} alt="금형 이미지" className="w-full h-full object-contain" />
+                      <div className="absolute inset-0 bg-foreground/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                        <Button size="sm" variant="secondary" className="h-7 text-xs" type="button" onClick={() => moldImageRef.current?.click()}>
+                          <Upload className="w-3 h-3 mr-1" /> 변경
+                        </Button>
+                        <Button size="sm" variant="destructive" className="h-7 text-xs" type="button" onClick={() => {
+                          setMoldImagePreview(null);
+                          setMoldForm((prev) => ({ ...prev, image_path: null }));
+                        }}>
+                          <XIcon className="w-3 h-3" />
+                        </Button>
+                      </div>
+                    </>
+                  ) : (
+                    <button
+                      type="button"
+                      className="flex flex-col items-center gap-1.5 text-muted-foreground"
+                      onClick={() => moldImageRef.current?.click()}
+                    >
+                      <ImageIcon className="w-8 h-8" />
+                      <span className="text-xs">이미지 업로드</span>
+                    </button>
+                  )}
+                </div>
+                <input
+                  ref={moldImageRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleMoldImageUpload}
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setMoldModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleSaveMold} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              {moldEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 일련번호 등록/수정 모달 ========== */}
+      <Dialog open={serialModalOpen} onOpenChange={setSerialModalOpen}>
+        <DialogContent className="sm:max-w-[480px]">
+          <DialogHeader>
+            <DialogTitle>{serialForm.id ? "일련번호 수정" : "일련번호 등록"}</DialogTitle>
+            <DialogDescription>{serialForm.id ? `${serialForm.serial_number} 정보를 수정해요.` : "일련번호는 자동으로 채번돼요."}</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">상태</Label>
+              <Select
+                value={serialForm.status || "STORED"}
+                onValueChange={(v) => setSerialForm({ ...serialForm, status: v })}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="IN_USE">사용중</SelectItem>
+                  <SelectItem value="STORED">보관중</SelectItem>
+                  <SelectItem value="REPAIR">수리중</SelectItem>
+                  <SelectItem value="DISPOSED">폐기</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">현재 샷수</Label>
+              <Input
+                type="number"
+                className="h-9 text-sm font-mono"
+                value={serialForm.current_shot_count ?? ""}
+                onChange={(e) => setSerialForm({ ...serialForm, current_shot_count: e.target.value ? Number(e.target.value) : null })}
+                placeholder="0"
+                min={0}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">보관위치</Label>
+              <Input
+                className="h-9 text-sm"
+                value={serialForm.storage_location || ""}
+                onChange={(e) => setSerialForm({ ...serialForm, storage_location: e.target.value })}
+                placeholder="보관위치"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">비고</Label>
+              <Input
+                className="h-9 text-sm"
+                value={serialForm.remarks || ""}
+                onChange={(e) => setSerialForm({ ...serialForm, remarks: e.target.value })}
+                placeholder="비고"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setSerialModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleSaveSerial} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              {serialForm.id ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 점검항목 등록 모달 ========== */}
+      <Dialog open={inspectionModalOpen} onOpenChange={setInspectionModalOpen}>
+        <DialogContent className="sm:max-w-[560px]">
+          <DialogHeader>
+            <DialogTitle>점검항목 등록</DialogTitle>
+            <DialogDescription>금형 점검항목을 등록해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">점검항목명 <span className="text-destructive">*</span></Label>
+              <Input
+                className="h-9 text-sm"
+                value={inspectionForm.inspection_item || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_item: e.target.value })}
+                placeholder="점검항목명"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">점검주기</Label>
+              <Input
+                className="h-9 text-sm"
+                value={inspectionForm.inspection_cycle || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_cycle: e.target.value })}
+                placeholder="예: 월 1회"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">점검방법 <span className="text-destructive">*</span></Label>
+              <Select
+                value={inspectionForm.inspection_method || ""}
+                onValueChange={(v) => {
+                  const updated: Record<string, any> = { ...inspectionForm, inspection_method: v };
+                  if (v !== "숫자") {
+                    updated.lower_limit = "";
+                    updated.upper_limit = "";
+                    updated.unit = "";
+                  }
+                  setInspectionForm(updated);
+                }}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue placeholder="선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="숫자">숫자</SelectItem>
+                  <SelectItem value="텍스트">텍스트</SelectItem>
+                  <SelectItem value="합격/불합격">합격/불합격</SelectItem>
+                  <SelectItem value="양호/불량">양호/불량</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            {inspectionForm.inspection_method === "숫자" && (
+              <>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">기준값</Label>
+                  <Input
+                    type="number"
+                    className="h-9 text-sm font-mono"
+                    value={inspectionForm.lower_limit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, lower_limit: e.target.value })}
+                    placeholder="기준값"
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">±오차범위</Label>
+                  <Input
+                    type="number"
+                    className="h-9 text-sm font-mono"
+                    value={inspectionForm.upper_limit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, upper_limit: e.target.value })}
+                    placeholder="허용 오차"
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">단위</Label>
+                  <Input
+                    className="h-9 text-sm"
+                    value={inspectionForm.unit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, unit: e.target.value })}
+                    placeholder="mm, ℃ 등"
+                  />
+                </div>
+              </>
+            )}
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">점검내용</Label>
+              <textarea
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 resize-y"
+                value={inspectionForm.inspection_content || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_content: e.target.value })}
+                placeholder="상세 내용"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setInspectionModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleAddInspection} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              등록하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 부품 등록 모달 ========== */}
+      <Dialog open={partModalOpen} onOpenChange={setPartModalOpen}>
+        <DialogContent className="sm:max-w-[560px]">
+          <DialogHeader>
+            <DialogTitle>부품 등록</DialogTitle>
+            <DialogDescription>금형 부품을 등록해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">부품명 <span className="text-destructive">*</span></Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.part_name || ""}
+                onChange={(e) => setPartForm({ ...partForm, part_name: e.target.value })}
+                placeholder="부품명"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">교체주기 <span className="text-destructive">*</span></Label>
+              <Select
+                value={partForm.replacement_cycle || ""}
+                onValueChange={(v) => setPartForm({ ...partForm, replacement_cycle: v })}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue placeholder="선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1만 샷">1만 샷</SelectItem>
+                  <SelectItem value="5만 샷">5만 샷</SelectItem>
+                  <SelectItem value="10만 샷">10만 샷</SelectItem>
+                  <SelectItem value="월 1회">월 1회</SelectItem>
+                  <SelectItem value="3개월">3개월</SelectItem>
+                  <SelectItem value="6개월">6개월</SelectItem>
+                  <SelectItem value="1년">1년</SelectItem>
+                  <SelectItem value="수시">수시</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">단위</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.unit || ""}
+                onChange={(e) => setPartForm({ ...partForm, unit: e.target.value })}
+                placeholder="EA, SET 등"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">규격</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.specification || ""}
+                onChange={(e) => setPartForm({ ...partForm, specification: e.target.value })}
+                placeholder="규격"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">제조사</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.manufacturer || ""}
+                onChange={(e) => setPartForm({ ...partForm, manufacturer: e.target.value })}
+                placeholder="제조사"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">비고</Label>
+              <textarea
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 resize-y"
+                value={partForm.remarks || ""}
+                onChange={(e) => setPartForm({ ...partForm, remarks: e.target.value })}
+                placeholder="비고"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setPartModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleAddPart} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              등록하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/monitoring/equipment/page.tsx b/frontend/app/(main)/COMPANY_29/monitoring/equipment/page.tsx
new file mode 100644
index 00000000..ccb5aaf6
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/monitoring/equipment/page.tsx
@@ -0,0 +1,575 @@
+"use client";
+
+/**
+ * 설비운영모니터링 — 하드코딩 페이지
+ *
+ * 설비(equipment_mng) 목록 + 작업지시(work_instruction) 연결
+ * 실시간 카드 그리드 형태 모니터링 대시보드
+ */
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Wrench,
+  Zap,
+  Pause,
+  Power,
+} from "lucide-react";
+
+/* ───── 상태 정의 ───── */
+
+type OperationStatus = "running" | "idle" | "maintenance" | "off" | "unknown";
+
+interface StatusConfig {
+  label: string;
+  color: string;
+  bg: string;
+  border: string;
+  bar: string;
+  icon: React.ReactNode;
+  badgeBg: string;
+  badgeText: string;
+  cardGlow: string;
+}
+
+const STATUS_MAP: Record<OperationStatus, StatusConfig> = {
+  running: {
+    label: "가동중",
+    color: "text-emerald-400",
+    bg: "bg-emerald-500/10",
+    border: "border-emerald-500/30",
+    bar: "bg-emerald-400",
+    icon: <Zap className="h-4 w-4" />,
+    badgeBg: "bg-emerald-500/20",
+    badgeText: "text-emerald-300",
+    cardGlow: "shadow-emerald-500/5",
+  },
+  idle: {
+    label: "대기",
+    color: "text-amber-400",
+    bg: "bg-amber-500/10",
+    border: "border-amber-500/30",
+    bar: "bg-amber-400",
+    icon: <Pause className="h-4 w-4" />,
+    badgeBg: "bg-amber-500/20",
+    badgeText: "text-amber-300",
+    cardGlow: "shadow-amber-500/5",
+  },
+  maintenance: {
+    label: "점검/수리",
+    color: "text-red-400",
+    bg: "bg-red-500/10",
+    border: "border-red-500/30",
+    bar: "bg-red-400",
+    icon: <Wrench className="h-4 w-4" />,
+    badgeBg: "bg-red-500/20",
+    badgeText: "text-red-300",
+    cardGlow: "shadow-red-500/5",
+  },
+  off: {
+    label: "비가동",
+    color: "text-gray-400",
+    bg: "bg-gray-500/10",
+    border: "border-gray-500/30",
+    bar: "bg-gray-500",
+    icon: <Power className="h-4 w-4" />,
+    badgeBg: "bg-gray-500/20",
+    badgeText: "text-gray-400",
+    cardGlow: "shadow-gray-500/5",
+  },
+  unknown: {
+    label: "미설정",
+    color: "text-gray-500",
+    bg: "bg-gray-500/10",
+    border: "border-gray-600/30",
+    bar: "bg-gray-600",
+    icon: <Power className="h-4 w-4" />,
+    badgeBg: "bg-gray-600/20",
+    badgeText: "text-gray-500",
+    cardGlow: "",
+  },
+};
+
+/** operation_status 값 → 내부 키 매핑 */
+function resolveStatus(raw: string | null | undefined): OperationStatus {
+  if (!raw) return "unknown";
+  const v = raw.trim().toLowerCase();
+  if (["running", "가동", "가동중"].includes(v)) return "running";
+  if (["idle", "대기"].includes(v)) return "idle";
+  if (["maintenance", "점검", "수리", "점검/수리", "점검중"].includes(v)) return "maintenance";
+  if (["off", "비가동", "정지"].includes(v)) return "off";
+  return "unknown";
+}
+
+/* ───── 타입 ───── */
+
+interface Equipment {
+  id: string;
+  equipment_code: string;
+  equipment_name: string;
+  equipment_type: string;
+  installation_location: string;
+  operation_status: string;
+  manufacturer: string;
+  model_name: string;
+  image_path: string;
+}
+
+interface WorkInstruction {
+  id: string;
+  instruction_number: string;
+  item_name: string;
+  equipment_id: string;
+  worker_name: string;
+  status: string;
+}
+
+/* ───── 컴포넌트 ───── */
+
+export default function EquipmentMonitoringPage() {
+  const [equipments, setEquipments] = useState<Equipment[]>([]);
+  const [workInstructions, setWorkInstructions] = useState<WorkInstruction[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [filterStatus, setFilterStatus] = useState<OperationStatus | "all">("all");
+  const autoRefreshRef = useRef(autoRefresh);
+
+  // autoRefreshRef 동기화
+  useEffect(() => {
+    autoRefreshRef.current = autoRefresh;
+  }, [autoRefresh]);
+
+  /* ── 시간 업데이트 ── */
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* ── 데이터 fetch ── */
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      const [equipRes, wiRes] = await Promise.all([
+        apiClient.post("/table-management/tables/equipment_mng/data", {
+          autoFilter: true,
+          page: 1,
+          size: 500,
+        }),
+        apiClient.get("/work-instruction/list").catch(() => ({ data: { data: [] } })),
+      ]);
+
+      const eqRows: Equipment[] = equipRes.data?.data?.rows ?? equipRes.data?.rows ?? [];
+      setEquipments(eqRows);
+
+      const wiRows: WorkInstruction[] = wiRes.data?.data ?? wiRes.data?.rows ?? [];
+      setWorkInstructions(wiRows);
+    } catch (err) {
+      console.error("설비 모니터링 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ── 자동 갱신 (30초) ── */
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (autoRefreshRef.current) fetchData();
+    }, 30000);
+    return () => clearInterval(interval);
+  }, [fetchData]);
+
+  /* ── 요약 통계 ── */
+  const stats = useMemo(() => {
+    const counts: Record<OperationStatus, number> = {
+      running: 0,
+      idle: 0,
+      maintenance: 0,
+      off: 0,
+      unknown: 0,
+    };
+    equipments.forEach((eq) => {
+      const s = resolveStatus(eq.operation_status);
+      counts[s]++;
+    });
+    return { total: equipments.length, ...counts };
+  }, [equipments]);
+
+  /* ── 필터된 설비 ── */
+  const filteredEquipments = useMemo(() => {
+    if (filterStatus === "all") return equipments;
+    return equipments.filter((eq) => resolveStatus(eq.operation_status) === filterStatus);
+  }, [equipments, filterStatus]);
+
+  /* ── 설비별 작업지시 맵 ── */
+  const wiMap = useMemo(() => {
+    const map: Record<string, WorkInstruction[]> = {};
+    workInstructions.forEach((wi) => {
+      if (wi.equipment_id) {
+        if (!map[wi.equipment_id]) map[wi.equipment_id] = [];
+        map[wi.equipment_id].push(wi);
+      }
+    });
+    return map;
+  }, [workInstructions]);
+
+  /* ── 가동률 (모킹 — 센서 미연동) ── */
+  const getUtilization = (eq: Equipment): number | null => {
+    const s = resolveStatus(eq.operation_status);
+    if (s === "running") return 75 + Math.floor(Math.random() * 20); // 75~94
+    if (s === "idle") return 20 + Math.floor(Math.random() * 30); // 20~49
+    if (s === "maintenance") return 0;
+    if (s === "off") return 0;
+    return null;
+  };
+
+  /* ── 요약 카드 배열 ── */
+  const summaryCards: {
+    label: string;
+    count: number;
+    status: OperationStatus | "total";
+    color: string;
+    bg: string;
+    border: string;
+    icon: React.ReactNode;
+  }[] = [
+    {
+      label: "전체설비",
+      count: stats.total,
+      status: "total",
+      color: "text-blue-400",
+      bg: "bg-blue-500/10",
+      border: "border-blue-500/30",
+      icon: <Inbox className="h-5 w-5" />,
+    },
+    {
+      label: "가동중",
+      count: stats.running,
+      status: "running",
+      color: "text-emerald-400",
+      bg: "bg-emerald-500/10",
+      border: "border-emerald-500/30",
+      icon: <Zap className="h-5 w-5" />,
+    },
+    {
+      label: "대기",
+      count: stats.idle,
+      status: "idle",
+      color: "text-amber-400",
+      bg: "bg-amber-500/10",
+      border: "border-amber-500/30",
+      icon: <Pause className="h-5 w-5" />,
+    },
+    {
+      label: "점검/수리",
+      count: stats.maintenance,
+      status: "maintenance",
+      color: "text-red-400",
+      bg: "bg-red-500/10",
+      border: "border-red-500/30",
+      icon: <Wrench className="h-5 w-5" />,
+    },
+    {
+      label: "비가동",
+      count: stats.off + stats.unknown,
+      status: "off",
+      color: "text-gray-400",
+      bg: "bg-gray-500/10",
+      border: "border-gray-500/30",
+      icon: <Power className="h-5 w-5" />,
+    },
+  ];
+
+  /* ── 필터 pill ── */
+  const filterPills: { label: string; value: OperationStatus | "all"; color: string }[] = [
+    { label: "전체", value: "all", color: "bg-blue-500/20 text-blue-300 hover:bg-blue-500/30" },
+    { label: "가동중", value: "running", color: "bg-emerald-500/20 text-emerald-300 hover:bg-emerald-500/30" },
+    { label: "대기", value: "idle", color: "bg-amber-500/20 text-amber-300 hover:bg-amber-500/30" },
+    { label: "점검/수리", value: "maintenance", color: "bg-red-500/20 text-red-300 hover:bg-red-500/30" },
+    { label: "비가동", value: "off", color: "bg-gray-500/20 text-gray-300 hover:bg-gray-500/30" },
+  ];
+
+  /* ── 포맷 ── */
+  const formatTime = (d: Date) =>
+    d.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
+  const formatDate = (d: Date) =>
+    d.toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", weekday: "short" });
+
+  /* ────────────── 렌더 ────────────── */
+
+  return (
+    <div className="min-h-screen bg-gray-950 text-white p-4 md:p-6 space-y-5">
+      {/* ── 헤더 ── */}
+      <header className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <div className="h-8 w-1.5 rounded-full bg-amber-400" />
+          <h1 className="text-2xl font-bold tracking-tight">설비운영모니터링</h1>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* 현재 시간 */}
+          <div className="flex items-center gap-2 text-sm text-gray-400 bg-gray-800/60 rounded-lg px-3 py-1.5 border border-gray-700/50">
+            <Clock className="h-4 w-4" />
+            <span className="font-mono">{formatDate(currentTime)}</span>
+            <span className="font-mono text-white">{formatTime(currentTime)}</span>
+          </div>
+
+          {/* 자동갱신 토글 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn(
+              "border-gray-700 text-xs gap-1.5",
+              autoRefresh
+                ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20"
+                : "bg-gray-800 text-gray-400 hover:bg-gray-700"
+            )}
+            onClick={() => setAutoRefresh((v) => !v)}
+          >
+            <span className={cn("h-1.5 w-1.5 rounded-full", autoRefresh ? "bg-emerald-400 animate-pulse" : "bg-gray-600")} />
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+
+          {/* 새로고침 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-gray-700 bg-gray-800 text-gray-300 hover:bg-gray-700 gap-1.5"
+            onClick={fetchData}
+            disabled={loading}
+          >
+            <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+            새로고침
+          </Button>
+        </div>
+      </header>
+
+      {/* ── 요약 카드 5개 ── */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
+        {summaryCards.map((card) => (
+          <button
+            key={card.label}
+            onClick={() =>
+              setFilterStatus(card.status === "total" ? "all" : (card.status as OperationStatus))
+            }
+            className={cn(
+              "relative flex items-center gap-3 rounded-xl border px-4 py-3 transition-all hover:scale-[1.02]",
+              card.bg,
+              card.border,
+              "hover:shadow-lg"
+            )}
+          >
+            <div className={cn("flex items-center justify-center rounded-lg p-2", card.bg, card.color)}>
+              {card.icon}
+            </div>
+            <div className="text-left">
+              <p className="text-xs text-gray-500">{card.label}</p>
+              <p className={cn("text-2xl font-bold tabular-nums", card.color)}>{card.count}</p>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {/* ── 필터 pill ── */}
+      <div className="flex flex-wrap gap-2">
+        {filterPills.map((pill) => (
+          <button
+            key={pill.value}
+            onClick={() => setFilterStatus(pill.value)}
+            className={cn(
+              "rounded-full px-4 py-1.5 text-sm font-medium transition-all",
+              filterStatus === pill.value
+                ? cn(pill.color, "ring-1 ring-white/20")
+                : "bg-gray-800/60 text-gray-500 hover:text-gray-300 hover:bg-gray-800"
+            )}
+          >
+            {pill.label}
+          </button>
+        ))}
+        <span className="ml-auto text-sm text-gray-600 self-center">
+          {filteredEquipments.length}대 표시
+        </span>
+      </div>
+
+      {/* ── 로딩 ── */}
+      {loading && equipments.length === 0 && (
+        <div className="flex items-center justify-center py-20">
+          <Loader2 className="h-8 w-8 animate-spin text-gray-600" />
+          <span className="ml-3 text-gray-500">설비 데이터를 불러오는 중...</span>
+        </div>
+      )}
+
+      {/* ── 데이터 없음 ── */}
+      {!loading && equipments.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-gray-600">
+          <Inbox className="h-12 w-12 mb-3" />
+          <p className="text-lg">등록된 설비가 없습니다.</p>
+        </div>
+      )}
+
+      {/* ── 설비 카드 그리드 ── */}
+      {filteredEquipments.length > 0 && (
+        <div
+          className="grid gap-4"
+          style={{ gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))" }}
+        >
+          {filteredEquipments.map((eq) => {
+            const status = resolveStatus(eq.operation_status);
+            const cfg = STATUS_MAP[status];
+            const utilization = getUtilization(eq);
+            const eqWIs = wiMap[eq.id] ?? [];
+
+            return (
+              <div
+                key={eq.id}
+                className={cn(
+                  "relative overflow-hidden rounded-xl border bg-gray-900/80 backdrop-blur transition-all hover:shadow-lg",
+                  cfg.border,
+                  cfg.cardGlow
+                )}
+              >
+                {/* 좌측 색상 바 */}
+                <div className={cn("absolute left-0 top-0 bottom-0 w-1 rounded-l-xl", cfg.bar)} />
+
+                {/* 상단: 설비명 + 상태 배지 */}
+                <div className="flex items-start justify-between px-4 pt-3 pb-2 pl-5">
+                  <div className="min-w-0 flex-1">
+                    <h3 className="text-base font-semibold text-white truncate">
+                      {eq.equipment_name || "이름 없음"}
+                    </h3>
+                    <p className="text-xs text-gray-500 mt-0.5 truncate">
+                      {eq.equipment_type || "-"} · {eq.installation_location || "-"}
+                    </p>
+                  </div>
+                  <Badge
+                    className={cn(
+                      "ml-2 shrink-0 border-0 gap-1 text-xs font-medium",
+                      cfg.badgeBg,
+                      cfg.badgeText
+                    )}
+                  >
+                    {cfg.icon}
+                    {cfg.label}
+                  </Badge>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 정보 그리드 */}
+                <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 px-4 pl-5 py-2.5 text-sm">
+                  <div>
+                    <span className="text-gray-500 text-xs">금일 가동시간</span>
+                    <p className="text-white font-medium">-</p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">생산수량</span>
+                    <p className="text-white font-medium">-</p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">작업자</span>
+                    <p className="text-white font-medium">
+                      {eqWIs.length > 0 && eqWIs[0].worker_name
+                        ? eqWIs[0].worker_name
+                        : "-"}
+                    </p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">설비코드</span>
+                    <p className="text-white font-medium truncate">{eq.equipment_code || "-"}</p>
+                  </div>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 가동률 프로그레스 */}
+                <div className="px-4 pl-5 py-2.5">
+                  <div className="flex items-center justify-between text-xs mb-1.5">
+                    <span className="text-gray-500">가동률</span>
+                    <span className={cn("font-bold tabular-nums", utilization !== null ? cfg.color : "text-gray-600")}>
+                      {utilization !== null ? `${utilization}%` : "-"}
+                    </span>
+                  </div>
+                  <div className="h-2 w-full rounded-full bg-gray-800 overflow-hidden">
+                    {utilization !== null && (
+                      <div
+                        className={cn("h-full rounded-full transition-all duration-700", cfg.bar)}
+                        style={{ width: `${utilization}%` }}
+                      />
+                    )}
+                  </div>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 현재 작업지시 */}
+                <div className="px-4 pl-5 py-2.5">
+                  <p className="text-xs text-gray-500 mb-1">현재 작업지시</p>
+                  {eqWIs.length > 0 ? (
+                    <div className="space-y-1">
+                      {eqWIs.slice(0, 2).map((wi) => (
+                        <div key={wi.id} className="flex items-center gap-2 text-sm">
+                          <span className="text-blue-400 font-mono text-xs shrink-0">
+                            {wi.instruction_number || "-"}
+                          </span>
+                          <span className="text-gray-300 truncate">
+                            {wi.item_name || "-"}
+                          </span>
+                        </div>
+                      ))}
+                      {eqWIs.length > 2 && (
+                        <p className="text-xs text-gray-600">+{eqWIs.length - 2}건 더</p>
+                      )}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-gray-600 italic">배정된 작업 없음</p>
+                  )}
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 센서 데이터 (PLC 미연동) */}
+                <div className="flex items-center gap-4 px-4 pl-5 py-2.5 text-xs">
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">온도</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">압력</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">RPM</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* 필터 결과 없음 */}
+      {!loading && equipments.length > 0 && filteredEquipments.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 text-gray-600">
+          <Inbox className="h-10 w-10 mb-2" />
+          <p>해당 상태의 설비가 없습니다.</p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/monitoring/production/page.tsx b/frontend/app/(main)/COMPANY_29/monitoring/production/page.tsx
new file mode 100644
index 00000000..fb8aa24b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/monitoring/production/page.tsx
@@ -0,0 +1,504 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Timer,
+  CheckCircle2,
+  AlertTriangle,
+  TrendingUp,
+  Play,
+  Pause,
+} from "lucide-react";
+
+// ─── 타입 정의 ─────────────────────────────────────────────
+interface WorkInstructionDetail {
+  item_name?: string;
+  spec?: string;
+  customer_name?: string;
+}
+
+interface WorkInstruction {
+  id: string;
+  wi_id?: string;
+  work_instruction_no: string;
+  status: string; // 일반 / 긴급
+  qty: number;
+  completed_qty: number;
+  start_date: string | null;
+  end_date: string | null;
+  worker: string | null;
+  equipment_id: string | null;
+  equipment_name?: string | null;
+  details?: WorkInstructionDetail[];
+}
+
+interface ProcessStep {
+  wo_id: string;
+  process_name: string;
+  status: string; // acceptable / completed
+  seq_no: number;
+}
+
+type FilterTab = "전체" | "대기" | "진행중" | "완료";
+
+// ─── 유틸리티 ──────────────────────────────────────────────
+function formatDate(dateStr: string | null | undefined): string {
+  if (!dateStr) return "-";
+  try {
+    const d = new Date(dateStr);
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+  } catch {
+    return dateStr;
+  }
+}
+
+function formatTime(date: Date): string {
+  const h = String(date.getHours()).padStart(2, "0");
+  const m = String(date.getMinutes()).padStart(2, "0");
+  const s = String(date.getSeconds()).padStart(2, "0");
+  return `${h}:${m}:${s}`;
+}
+
+// 작업지시별 공정현황으로 진행상태 계산
+function computeProgress(
+  wiId: string,
+  processMap: Map<string, ProcessStep[]>
+): "대기" | "진행중" | "완료" {
+  const steps = processMap.get(wiId);
+  if (!steps || steps.length === 0) return "대기";
+  const completedCount = steps.filter((s) => s.status === "completed").length;
+  if (completedCount === 0) return "대기";
+  if (completedCount === steps.length) return "완료";
+  return "진행중";
+}
+
+// ─── 메인 컴포넌트 ────────────────────────────────────────
+export default function ProductionMonitoringPage() {
+  const [workInstructions, setWorkInstructions] = useState<WorkInstruction[]>([]);
+  const [processMap, setProcessMap] = useState<Map<string, ProcessStep[]>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [activeTab, setActiveTab] = useState<FilterTab>("전체");
+
+  // ─── 실시간 시계 ─────────────────────────────────────────
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // ─── 데이터 로드 ─────────────────────────────────────────
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+
+      // 작업지시 목록 조회
+      const wiRes = await apiClient.get("/work-instruction/list");
+      const wiRaw: WorkInstruction[] =
+        wiRes.data?.success && Array.isArray(wiRes.data.data) ? wiRes.data.data : [];
+      // 작업지시번호 기준 중복 제거 (디테일 JOIN으로 중복 발생 가능)
+      const seen = new Set<string>();
+      const wiData = wiRaw.filter((wi) => {
+        const key = wi.work_instruction_no || wi.id;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+      setWorkInstructions(wiData);
+
+      // 공정현황 조회 (실패해도 작업지시는 표시)
+      try {
+        const procRes = await apiClient.post("/table-management/tables/work_order_process/data", {
+          page: 1, size: 1000, autoFilter: true,
+        });
+        const rows: ProcessStep[] = procRes.data?.data?.data || procRes.data?.data?.rows || procRes.data?.data || [];
+
+        // wo_id별로 그룹핑 후, 같은 seq_no+process_name은 1건으로 합침 (배치 실행 이력 중복 제거)
+        const rawMap = new Map<string, ProcessStep[]>();
+        rows.forEach((row) => {
+          const key = String(row.wo_id);
+          if (!rawMap.has(key)) rawMap.set(key, []);
+          rawMap.get(key)!.push(row);
+        });
+
+        const map = new Map<string, ProcessStep[]>();
+        rawMap.forEach((steps, woId) => {
+          // seq_no + process_name 기준으로 대표 1건만 (completed 우선)
+          const grouped = new Map<string, ProcessStep>();
+          for (const s of steps) {
+            const gk = `${s.seq_no}_${s.process_name}`;
+            const existing = grouped.get(gk);
+            if (!existing || (s.status === "completed" && existing.status !== "completed")) {
+              grouped.set(gk, s);
+            }
+          }
+          const deduped = Array.from(grouped.values()).sort((a, b) => (a.seq_no ?? 0) - (b.seq_no ?? 0));
+          map.set(woId, deduped);
+        });
+        setProcessMap(map);
+      } catch {
+        // 공정현황 조회 실패 → 빈 맵 유지
+        setProcessMap(new Map());
+      }
+    } catch (err) {
+      console.error("생산모니터링 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // ─── 자동갱신 (30초) ─────────────────────────────────────
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const timer = setInterval(fetchData, 30000);
+    return () => clearInterval(timer);
+  }, [autoRefresh, fetchData]);
+
+  // ─── 통계 계산 ───────────────────────────────────────────
+  const stats = useMemo(() => {
+    let waiting = 0;
+    let inProgress = 0;
+    let completed = 0;
+    let totalQty = 0;
+    let completedQty = 0;
+
+    workInstructions.forEach((wi) => {
+      const progress = computeProgress(wi.wi_id || wi.id, processMap);
+      if (progress === "대기") waiting++;
+      else if (progress === "진행중") inProgress++;
+      else completed++;
+      totalQty += Number((wi as any).total_qty || wi.qty || 0);
+      completedQty += Number(wi.completed_qty) || 0;
+    });
+
+    const achievementRate = totalQty > 0 ? Math.round((completedQty / totalQty) * 100) : 0;
+
+    return { waiting, inProgress, completed, achievementRate };
+  }, [workInstructions, processMap]);
+
+  // ─── 필터링된 작업 목록 ──────────────────────────────────
+  const filteredInstructions = useMemo(() => {
+    return workInstructions.filter((wi) => {
+      if (activeTab === "전체") return true;
+      const progress = computeProgress(wi.wi_id || wi.id, processMap);
+      return progress === activeTab;
+    });
+  }, [workInstructions, processMap, activeTab]);
+
+  // ─── 렌더링 ──────────────────────────────────────────────
+  return (
+    <div className="flex flex-col h-full min-h-0 bg-background p-4 gap-4 overflow-auto">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between flex-shrink-0">
+        <h1 className="text-2xl font-bold text-foreground">생산모니터링</h1>
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5 text-muted-foreground text-sm">
+            <Clock className="w-4 h-4" />
+            <span className="font-mono">{formatTime(currentTime)}</span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={loading}
+            className="gap-1.5"
+          >
+            <RefreshCw className={cn("w-4 h-4", loading && "animate-spin")} />
+            새로고침
+          </Button>
+          <Button
+            variant={autoRefresh ? "default" : "outline"}
+            size="sm"
+            onClick={() => setAutoRefresh(!autoRefresh)}
+            className="gap-1.5"
+          >
+            {autoRefresh ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+        </div>
+      </div>
+
+      {/* 요약 카드 */}
+      <div className="grid grid-cols-4 gap-4 flex-shrink-0">
+        <SummaryCard
+          icon={<Timer className="w-5 h-5" />}
+          label="대기중"
+          value={stats.waiting}
+          colorClass="text-amber-500 bg-amber-500/10 border-amber-500/20"
+        />
+        <SummaryCard
+          icon={<Loader2 className="w-5 h-5" />}
+          label="진행중"
+          value={stats.inProgress}
+          colorClass="text-blue-500 bg-blue-500/10 border-blue-500/20"
+        />
+        <SummaryCard
+          icon={<CheckCircle2 className="w-5 h-5" />}
+          label="완료"
+          value={stats.completed}
+          colorClass="text-emerald-500 bg-emerald-500/10 border-emerald-500/20"
+        />
+        <SummaryCard
+          icon={<TrendingUp className="w-5 h-5" />}
+          label="달성율"
+          value={`${stats.achievementRate}%`}
+          colorClass="text-purple-500 bg-purple-500/10 border-purple-500/20"
+        />
+      </div>
+
+      {/* 탭 필터 */}
+      <div className="flex items-center gap-2 flex-shrink-0">
+        {(["전체", "대기", "진행중", "완료"] as FilterTab[]).map((tab) => (
+          <Button
+            key={tab}
+            variant={activeTab === tab ? "default" : "outline"}
+            size="sm"
+            onClick={() => setActiveTab(tab)}
+            className={cn(
+              "min-w-[64px]",
+              activeTab === tab && tab === "대기" && "bg-amber-500 hover:bg-amber-600 text-white",
+              activeTab === tab && tab === "진행중" && "bg-blue-500 hover:bg-blue-600 text-white",
+              activeTab === tab && tab === "완료" && "bg-emerald-500 hover:bg-emerald-600 text-white"
+            )}
+          >
+            {tab}
+            {tab === "전체" && ` (${workInstructions.length})`}
+            {tab === "대기" && ` (${stats.waiting})`}
+            {tab === "진행중" && ` (${stats.inProgress})`}
+            {tab === "완료" && ` (${stats.completed})`}
+          </Button>
+        ))}
+      </div>
+
+      {/* 로딩 상태 */}
+      {loading && workInstructions.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <Loader2 className="w-10 h-10 animate-spin mb-3" />
+          <span className="text-sm">데이터를 불러오는 중입니다...</span>
+        </div>
+      )}
+
+      {/* 빈 상태 */}
+      {!loading && filteredInstructions.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <Inbox className="w-12 h-12 mb-3" />
+          <span className="text-sm">
+            {activeTab === "전체"
+              ? "등록된 작업지시가 없습니다."
+              : `"${activeTab}" 상태의 작업지시가 없습니다.`}
+          </span>
+        </div>
+      )}
+
+      {/* 작업 카드 그리드 */}
+      {filteredInstructions.length > 0 && (
+        <div
+          className="grid gap-4 flex-1"
+          style={{ gridTemplateColumns: "repeat(auto-fill, minmax(420px, 1fr))" }}
+        >
+          {filteredInstructions.map((wi, idx) => (
+            <WorkCard
+              key={wi.id || `wi-${idx}`}
+              instruction={wi}
+              steps={processMap.get(wi.wi_id || wi.id) || []}
+              progress={computeProgress(wi.wi_id || wi.id, processMap)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── 요약 카드 ─────────────────────────────────────────────
+function SummaryCard({
+  icon,
+  label,
+  value,
+  colorClass,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: number | string;
+  colorClass: string;
+}) {
+  return (
+    <div className="bg-card border rounded-lg p-4 flex items-center gap-4">
+      <div className={cn("p-2.5 rounded-lg border", colorClass)}>{icon}</div>
+      <div className="flex flex-col">
+        <span className="text-xs text-muted-foreground">{label}</span>
+        <span className="text-2xl font-bold text-foreground">{value}</span>
+      </div>
+    </div>
+  );
+}
+
+// ─── 작업 카드 ─────────────────────────────────────────────
+function WorkCard({
+  instruction: wi,
+  steps,
+  progress,
+}: {
+  instruction: WorkInstruction;
+  steps: ProcessStep[];
+  progress: "대기" | "진행중" | "완료";
+}) {
+  // API 응답은 flat 구조 (details 배열 아님)
+  const itemName = (wi as any).item_name || "-";
+  const spec = (wi as any).item_spec || "-";
+  const customerName = (wi as any).customer_name || "-";
+
+  // 진척률 (total_qty 또는 qty)
+  const totalQty = Number((wi as any).total_qty || wi.qty || 0);
+  const completedQty = Number(wi.completed_qty || 0);
+  const progressPercent = totalQty > 0 ? Math.min(100, Math.round((completedQty / totalQty) * 100)) : 0;
+
+  // 공정 현황 계산
+  const completedSteps = steps.filter((s) => s.status === "completed").length;
+  const currentStep = steps.find((s) => s.status !== "completed");
+
+  // 프로그레스바 색상
+  const barColor =
+    progressPercent >= 100
+      ? "bg-emerald-500"
+      : progressPercent >= 50
+        ? "bg-blue-500"
+        : "bg-amber-500";
+
+  // 상태 배지 스타일
+  const statusBadge: Record<string, string> = {
+    "대기": "bg-amber-500/10 text-amber-500 border-amber-500/30",
+    "진행중": "bg-blue-500/10 text-blue-500 border-blue-500/30",
+    "완료": "bg-emerald-500/10 text-emerald-500 border-emerald-500/30",
+  };
+
+  const isUrgent = wi.status === "긴급";
+
+  return (
+    <div className="bg-card border rounded-lg overflow-hidden flex flex-col">
+      {/* 카드 헤더 */}
+      <div className="flex items-center justify-between px-4 py-3 border-b bg-muted/30">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-sm text-foreground">
+            {wi.work_instruction_no}
+          </span>
+          {isUrgent && (
+            <Badge
+              variant="outline"
+              className="bg-red-500/10 text-red-500 border-red-500/30 text-xs gap-1"
+            >
+              <AlertTriangle className="w-3 h-3" />
+              긴급
+            </Badge>
+          )}
+        </div>
+        <Badge variant="outline" className={cn("text-xs", statusBadge[progress])}>
+          {progress}
+        </Badge>
+      </div>
+
+      {/* 카드 본문 - 정보 */}
+      <div className="px-4 py-3 grid grid-cols-2 gap-x-4 gap-y-1.5 text-sm border-b">
+        <InfoRow label="품목명" value={itemName} />
+        <InfoRow label="규격" value={spec} />
+        <InfoRow label="거래처" value={customerName} />
+        <InfoRow label="작업자" value={wi.worker || "-"} />
+        <InfoRow label="납기일" value={formatDate(wi.end_date)} />
+        <InfoRow label="설비" value={wi.equipment_name || wi.equipment_id || "-"} />
+      </div>
+
+      {/* 공정현황 */}
+      <div className="px-4 py-3 border-b">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs text-muted-foreground font-medium">공정현황</span>
+          {steps.length > 0 && (
+            <span className="text-xs text-muted-foreground">
+              완료 {completedSteps}/{steps.length}
+              {currentStep && (
+                <span>
+                  {" "}
+                  · 현재: <span className="text-blue-400">{currentStep.process_name}</span>
+                </span>
+              )}
+            </span>
+          )}
+        </div>
+        {steps.length > 0 ? (
+          <div className="flex gap-1 flex-wrap">
+            {steps.map((step, idx) => {
+              const isDone = step.status === "completed";
+              const isCurrent = !isDone && idx === completedSteps;
+              return (
+                <span
+                  key={`${step.wo_id}-${step.seq_no}-${idx}`}
+                  className={cn(
+                    "px-2 py-0.5 rounded text-xs font-medium transition-all",
+                    isDone && "bg-emerald-500/20 text-emerald-400",
+                    isCurrent && "bg-blue-500/20 text-blue-400 animate-pulse",
+                    !isDone && !isCurrent && "bg-muted text-muted-foreground"
+                  )}
+                >
+                  {step.process_name}
+                </span>
+              );
+            })}
+          </div>
+        ) : (
+          <span className="text-xs text-muted-foreground">공정 정보 없음</span>
+        )}
+      </div>
+
+      {/* 프로그레스바 */}
+      <div className="px-4 py-3">
+        <div className="flex items-center justify-between mb-1.5">
+          <span className="text-xs text-muted-foreground">
+            {completedQty} / {totalQty}
+          </span>
+          <span
+            className={cn(
+              "text-xs font-bold",
+              progressPercent >= 100
+                ? "text-emerald-500"
+                : progressPercent >= 50
+                  ? "text-blue-500"
+                  : "text-amber-500"
+            )}
+          >
+            {progressPercent}%
+          </span>
+        </div>
+        <div className="w-full h-2.5 bg-muted rounded-full overflow-hidden">
+          <div
+            className={cn("h-full rounded-full transition-all duration-500", barColor)}
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── 정보 행 ───────────────────────────────────────────────
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center gap-1.5 min-w-0">
+      <span className="text-muted-foreground shrink-0">{label}:</span>
+      <span className="text-foreground truncate">{value}</span>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/monitoring/quality/page.tsx b/frontend/app/(main)/COMPANY_29/monitoring/quality/page.tsx
new file mode 100644
index 00000000..b0135bbe
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/monitoring/quality/page.tsx
@@ -0,0 +1,512 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Search,
+  ClipboardCheck,
+} from "lucide-react";
+
+/* ───── 타입 ───── */
+interface ProcessRow {
+  id: number;
+  wo_id: number;
+  process_code: string;
+  process_name: string;
+  status: string;
+  plan_qty: number;
+  input_qty: number;
+  good_qty: number;
+  defect_qty: number;
+  started_at: string | null;
+  completed_at: string | null;
+  worker_name: string;
+}
+
+interface InspectionRow {
+  no: number;
+  inspectionNo: string;
+  inspectionType: string;
+  itemName: string;
+  spec: string;
+  inspectionQty: number;
+  goodQty: number;
+  defectQty: number;
+  defectRate: number;
+  result: "합격" | "불합격" | "대기";
+  inspectorName: string;
+  inspectedAt: string;
+  remark: string;
+}
+
+/* ───── 탭 정의 ───── */
+const TABS = [
+  { key: "all", label: "전체" },
+  { key: "process", label: "공정검사" },
+  { key: "incoming", label: "입고검사" },
+  { key: "shipping", label: "출하검사" },
+] as const;
+type TabKey = (typeof TABS)[number]["key"];
+
+/* ───── 유틸 ───── */
+const fmt = (n: number) => n.toLocaleString("ko-KR");
+const pct = (n: number) =>
+  `${n.toFixed(1)}%`;
+
+const badgeVariant = (
+  type: "result" | "type" | "defectRate",
+  value: string | number,
+) => {
+  if (type === "result") {
+    if (value === "합격")
+      return "bg-emerald-100 text-emerald-700 border-emerald-200";
+    if (value === "불합격") return "bg-red-100 text-red-700 border-red-200";
+    return "bg-amber-100 text-amber-700 border-amber-200";
+  }
+  if (type === "type") {
+    if (value === "공정검사")
+      return "bg-purple-100 text-purple-700 border-purple-200";
+    if (value === "입고검사") return "bg-blue-100 text-blue-700 border-blue-200";
+    return "bg-emerald-100 text-emerald-700 border-emerald-200";
+  }
+  // defectRate
+  const rate = typeof value === "number" ? value : parseFloat(String(value));
+  if (rate > 3) return "text-red-600 font-semibold";
+  if (rate >= 1) return "text-amber-600 font-semibold";
+  return "text-emerald-600";
+};
+
+/* ───── 컴포넌트 ───── */
+export default function QualityMonitoringPage() {
+  const [processData, setProcessData] = useState<ProcessRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [activeTab, setActiveTab] = useState<TabKey>("all");
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  /* ───── 시계 ───── */
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* ───── 데이터 조회 ───── */
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await apiClient.post(
+        "/table-management/tables/work_order_process/data",
+        { autoFilter: true },
+      );
+      const rows: ProcessRow[] = res.data?.data?.rows ?? res.data?.rows ?? [];
+      setProcessData(rows);
+    } catch (err) {
+      console.error("품질점검현황 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ───── 자동 갱신 ───── */
+  useEffect(() => {
+    if (autoRefresh) {
+      intervalRef.current = setInterval(fetchData, 30_000);
+    }
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [autoRefresh, fetchData]);
+
+  /* ───── 검사 행 변환 ───── */
+  const inspectionRows: InspectionRow[] = useMemo(() => {
+    const today = new Date().toISOString().slice(0, 10);
+
+    return processData
+      .filter((r) => {
+        // 금일 데이터만
+        const dt = r.completed_at || r.started_at || "";
+        return dt.slice(0, 10) === today;
+      })
+      .map((r, idx) => {
+        const inspQty = r.input_qty || r.plan_qty || 0;
+        const goodQty = r.good_qty ?? 0;
+        const defectQty = r.defect_qty ?? 0;
+        const defectRate = inspQty > 0 ? (defectQty / inspQty) * 100 : 0;
+        const result: InspectionRow["result"] =
+          r.status !== "completed"
+            ? "대기"
+            : defectQty > 0
+              ? "불합격"
+              : "합격";
+
+        return {
+          no: idx + 1,
+          inspectionNo: `QC-${String(r.id).padStart(8, "0").slice(0, 8)}`,
+          inspectionType: "공정검사",
+          itemName: r.process_name || "-",
+          spec: r.process_code || "-",
+          inspectionQty: inspQty,
+          goodQty,
+          defectQty,
+          defectRate,
+          result,
+          inspectorName: r.worker_name || "-",
+          inspectedAt: r.completed_at || r.started_at || "-",
+          remark: "",
+        };
+      });
+  }, [processData]);
+
+  /* ───── 탭 필터링 ───── */
+  const filteredRows = useMemo(() => {
+    if (activeTab === "all" || activeTab === "process") return inspectionRows;
+    // 입고/출하는 데이터 없음
+    return [];
+  }, [activeTab, inspectionRows]);
+
+  /* ───── 요약 통계 ───── */
+  const summary = useMemo(() => {
+    const total = inspectionRows.length;
+    const passed = inspectionRows.filter((r) => r.result === "합격").length;
+    const failed = inspectionRows.filter((r) => r.result === "불합격").length;
+    const pending = inspectionRows.filter((r) => r.result === "대기").length;
+    const passRate = total > 0 ? (passed / total) * 100 : 0;
+    return { total, passed, failed, pending, passRate };
+  }, [inspectionRows]);
+
+  /* ───── 요약 카드 정의 ───── */
+  const summaryCards = [
+    {
+      label: "금일 검사건수",
+      value: fmt(summary.total),
+      sub: "건",
+      color: "from-slate-500 to-slate-600",
+      textColor: "text-white",
+    },
+    {
+      label: "합격",
+      value: fmt(summary.passed),
+      sub: "건",
+      color: "from-emerald-500 to-emerald-600",
+      textColor: "text-white",
+    },
+    {
+      label: "불합격",
+      value: fmt(summary.failed),
+      sub: "건",
+      color: "from-red-500 to-red-600",
+      textColor: "text-white",
+    },
+    {
+      label: "검사대기",
+      value: fmt(summary.pending),
+      sub: "건",
+      color: "from-amber-500 to-amber-600",
+      textColor: "text-white",
+    },
+    {
+      label: "합격률",
+      value: pct(summary.passRate),
+      sub: "",
+      color: "from-purple-500 to-purple-600",
+      textColor: "text-white",
+    },
+  ];
+
+  /* ───── 렌더링 ───── */
+  return (
+    <div className="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
+      {/* ── 헤더 ── */}
+      <div className="flex items-center justify-between px-6 py-4 bg-white dark:bg-gray-800 border-b">
+        <div className="flex items-center gap-3">
+          <ClipboardCheck className="h-6 w-6 text-emerald-600" />
+          <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+            품질점검현황{" "}
+            <span className="text-emerald-600">모니터링</span>
+          </h1>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            <Clock className="h-4 w-4" />
+            <span className="font-mono">
+              {currentTime.toLocaleString("ko-KR", {
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit",
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+                hour12: false,
+              })}
+            </span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={loading}
+          >
+            {loading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+            <span className="ml-1">새로고침</span>
+          </Button>
+          <Button
+            variant={autoRefresh ? "default" : "outline"}
+            size="sm"
+            onClick={() => setAutoRefresh((p) => !p)}
+            className={cn(
+              autoRefresh &&
+                "bg-emerald-600 hover:bg-emerald-700 text-white",
+            )}
+          >
+            <Clock className="h-4 w-4 mr-1" />
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+        </div>
+      </div>
+
+      {/* ── 본문 ── */}
+      <div className="flex-1 overflow-auto p-6 space-y-6">
+        {/* 요약 카드 */}
+        <div className="grid grid-cols-5 gap-4">
+          {summaryCards.map((card) => (
+            <div
+              key={card.label}
+              className={cn(
+                "rounded-xl bg-gradient-to-br p-5 shadow-md",
+                card.color,
+              )}
+            >
+              <p className="text-sm font-medium text-white/80">
+                {card.label}
+              </p>
+              <p className={cn("mt-2 text-3xl font-bold", card.textColor)}>
+                {card.value}
+                {card.sub && (
+                  <span className="ml-1 text-base font-normal text-white/70">
+                    {card.sub}
+                  </span>
+                )}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* 검사유형 탭 */}
+        <div className="flex items-center gap-2">
+          {TABS.map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={cn(
+                "px-4 py-1.5 rounded-full text-sm font-medium transition-colors",
+                activeTab === tab.key
+                  ? "bg-emerald-600 text-white shadow"
+                  : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border",
+              )}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* 테이블 영역 */}
+        <div className="bg-white dark:bg-gray-800 rounded-xl shadow border overflow-hidden">
+          {/* 입고/출하 준비중 */}
+          {(activeTab === "incoming" || activeTab === "shipping") ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Search className="h-12 w-12 mb-4 opacity-40" />
+              <p className="text-lg font-medium">준비중</p>
+              <p className="text-sm mt-1">
+                {activeTab === "incoming" ? "입고검사" : "출하검사"} 데이터는
+                아직 지원되지 않습니다.
+              </p>
+            </div>
+          ) : loading && filteredRows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Loader2 className="h-10 w-10 animate-spin mb-4" />
+              <p>데이터를 불러오는 중...</p>
+            </div>
+          ) : filteredRows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Inbox className="h-12 w-12 mb-4 opacity-40" />
+              <p className="text-lg font-medium">금일 검사 데이터가 없습니다</p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow className="bg-gray-50 dark:bg-gray-700/50">
+                    <TableHead className="w-[50px] text-center">No</TableHead>
+                    <TableHead className="min-w-[120px]">검사번호</TableHead>
+                    <TableHead className="min-w-[90px] text-center">
+                      검사유형
+                    </TableHead>
+                    <TableHead className="min-w-[140px]">품목명</TableHead>
+                    <TableHead className="min-w-[100px]">규격</TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      검사수량
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      합격수량
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      불합격수량
+                    </TableHead>
+                    <TableHead className="min-w-[70px] text-right">
+                      불량율
+                    </TableHead>
+                    <TableHead className="min-w-[160px] text-center">
+                      검사결과
+                    </TableHead>
+                    <TableHead className="min-w-[70px] text-center">
+                      판정
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-center">
+                      검사자
+                    </TableHead>
+                    <TableHead className="min-w-[150px]">검사일시</TableHead>
+                    <TableHead className="min-w-[100px]">비고</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredRows.map((row) => {
+                    const goodPct =
+                      row.inspectionQty > 0
+                        ? (row.goodQty / row.inspectionQty) * 100
+                        : 0;
+                    const defectPct =
+                      row.inspectionQty > 0
+                        ? (row.defectQty / row.inspectionQty) * 100
+                        : 0;
+
+                    return (
+                      <TableRow
+                        key={row.no}
+                        className="hover:bg-gray-50 dark:hover:bg-gray-700/30"
+                      >
+                        <TableCell className="text-center text-sm text-gray-500">
+                          {row.no}
+                        </TableCell>
+                        <TableCell className="font-mono text-sm">
+                          {row.inspectionNo}
+                        </TableCell>
+                        <TableCell className="text-center">
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-xs",
+                              badgeVariant("type", row.inspectionType),
+                            )}
+                          >
+                            {row.inspectionType}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-sm font-medium">
+                          {row.itemName}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-500">
+                          {row.spec}
+                        </TableCell>
+                        <TableCell className="text-right text-sm">
+                          {fmt(row.inspectionQty)}
+                        </TableCell>
+                        <TableCell className="text-right text-sm text-emerald-600">
+                          {fmt(row.goodQty)}
+                        </TableCell>
+                        <TableCell className="text-right text-sm text-red-600">
+                          {fmt(row.defectQty)}
+                        </TableCell>
+                        <TableCell
+                          className={cn(
+                            "text-right text-sm",
+                            badgeVariant("defectRate", row.defectRate),
+                          )}
+                        >
+                          {pct(row.defectRate)}
+                        </TableCell>
+                        {/* 검사결과 프로그레스바 */}
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <div className="flex-1 h-3 bg-gray-100 dark:bg-gray-600 rounded-full overflow-hidden flex">
+                              <div
+                                className="h-full bg-emerald-500 transition-all"
+                                style={{ width: `${goodPct}%` }}
+                              />
+                              <div
+                                className="h-full bg-red-500 transition-all"
+                                style={{ width: `${defectPct}%` }}
+                              />
+                            </div>
+                            <span className="text-xs text-gray-400 whitespace-nowrap w-[42px] text-right">
+                              {pct(goodPct)}
+                            </span>
+                          </div>
+                        </TableCell>
+                        {/* 판정 배지 */}
+                        <TableCell className="text-center">
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-xs",
+                              badgeVariant("result", row.result),
+                            )}
+                          >
+                            {row.result}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-center text-sm">
+                          {row.inspectorName}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-500">
+                          {row.inspectedAt !== "-"
+                            ? new Date(row.inspectedAt).toLocaleString(
+                                "ko-KR",
+                                {
+                                  month: "2-digit",
+                                  day: "2-digit",
+                                  hour: "2-digit",
+                                  minute: "2-digit",
+                                  hour12: false,
+                                },
+                              )
+                            : "-"}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-400">
+                          {row.remark || "-"}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/outsourcing/subcontractor-item/page.tsx b/frontend/app/(main)/COMPANY_29/outsourcing/subcontractor-item/page.tsx
index 08c8f7bb..ad6622da 100644
--- a/frontend/app/(main)/COMPANY_29/outsourcing/subcontractor-item/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/outsourcing/subcontractor-item/page.tsx
@@ -9,7 +9,7 @@
  * 외주업체관리와 양방향 연동 (같은 subcontractor_item_mapping 테이블)
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -20,46 +20,35 @@ import {
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Plus, Save, Loader2, FileSpreadsheet, Download, Pencil, Package, Users, Search, Settings2 } from "lucide-react";
+import { Plus, Save, Loader2, FileSpreadsheet, Download, Pencil, Inbox, Search, RotateCcw, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const ITEM_TABLE = "item_info";
 const MAPPING_TABLE = "subcontractor_item_mapping";
 const SUBCONTRACTOR_TABLE = "subcontractor_mng";
 
-// 좌측: 품목 컬럼
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "item_number", label: "품번", width: "w-[110px]" },
-  { key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
-  { key: "size", label: "규격", width: "w-[90px]" },
-  { key: "unit", label: "단위", width: "w-[60px]" },
-  { key: "standard_price", label: "기준단가", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "selling_price", label: "판매가격", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
-  { key: "status", label: "상태", width: "w-[60px]" },
-];
+const formatNum = (v: any) => (v == null || v === "" ? "-" : Number(v).toLocaleString());
 
-// 우측: 외주업체 정보 컬럼
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "subcontractor_code", label: "외주업체코드", width: "w-[110px]" },
-  { key: "subcontractor_name", label: "외주업체명", minWidth: "min-w-[120px]" },
-  { key: "subcontractor_item_code", label: "외주품번", width: "w-[100px]" },
-  { key: "subcontractor_item_name", label: "외주품명", width: "w-[100px]" },
-  { key: "base_price", label: "기준가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "calculated_price", label: "단가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
+const GRID_COLUMNS_CONFIG = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "selling_price", label: "판매가격" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
 ];
-
 export default function SubcontractorItemPage() {
   const { user } = useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
@@ -68,9 +57,8 @@ export default function SubcontractorItemPage() {
   const [items, setItems] = useState<any[]>([]);
   const [itemLoading, setItemLoading] = useState(false);
   const [itemCount, setItemCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
+  const [inputKeyword, setInputKeyword] = useState("");
+  const [searchKeyword, setSearchKeyword] = useState("");
   const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
 
   // 우측: 외주업체
@@ -95,14 +83,8 @@ export default function SubcontractorItemPage() {
   // 엑셀
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
-
-  useEffect(() => {
-    const saved = loadTableSettings("subcontractor-item");
-    if (saved) applyTableSettings(saved);
-  }, []);
+  // 테이블 설정
+  const ts = useTableSettings("c16-subcontractor-item", ITEM_TABLE, GRID_COLUMNS_CONFIG);
 
   // 카테고리 로드
   useEffect(() => {
@@ -132,6 +114,24 @@ export default function SubcontractorItemPage() {
     return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
   };
 
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      item_number: { width: "w-[110px]" },
+      item_name: { minWidth: "min-w-[130px]", render: (v) => v || "-" },
+      size: { width: "w-[90px]", render: (v) => v || "-" },
+      unit: { width: "w-[60px]", render: (v) => v || "-" },
+      standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
+      selling_price: { width: "w-[90px]", align: "right", formatNumber: true },
+      currency_code: { width: "w-[50px]", render: (v) => v || "-" },
+      status: { width: "w-[60px]", render: (v) => v || "-" },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
   // 좌측: 품목 조회 (division이 "외주관리"인 품목만 필터링)
   const outsourcingDivisionCode = categoryOptions["division"]?.find(
     (o) => o.label === "외주관리" || o.label === "외주" || o.label.includes("외주")
@@ -140,11 +140,13 @@ export default function SubcontractorItemPage() {
   const fetchItems = useCallback(async () => {
     setItemLoading(true);
     try {
-      const filters: any[] = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
-      // division = 외주관리 필터 추가
+      const filters: any[] = [];
       if (outsourcingDivisionCode) {
         filters.push({ columnName: "division", operator: "equals", value: outsourcingDivisionCode });
       }
+      if (searchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: searchKeyword });
+      }
       const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
@@ -167,7 +169,7 @@ export default function SubcontractorItemPage() {
     } finally {
       setItemLoading(false);
     }
-  }, [searchFilters, categoryOptions, outsourcingDivisionCode]);
+  }, [searchKeyword, categoryOptions, outsourcingDivisionCode]);
 
   useEffect(() => { fetchItems(); }, [fetchItems]);
 
@@ -181,7 +183,6 @@ export default function SubcontractorItemPage() {
     const fetchSubcontractorItems = async () => {
       setSubcontractorLoading(true);
       try {
-        // subcontractor_item_mapping에서 해당 품목의 매핑 조회
         const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
           page: 1, size: 500,
           dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
@@ -189,7 +190,6 @@ export default function SubcontractorItemPage() {
         });
         const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
 
-        // subcontractor_id → subcontractor_mng 조인 (외주업체명)
         const subIds = [...new Set(mappings.map((m: any) => m.subcontractor_id).filter(Boolean))];
         let subMap: Record<string, any> = {};
         if (subIds.length > 0) {
@@ -231,7 +231,6 @@ export default function SubcontractorItemPage() {
         autoFilter: true,
       });
       const all = res.data?.data?.data || res.data?.data?.rows || [];
-      // 이미 등록된 외주업체 제외
       const existing = new Set(subcontractorItems.map((s: any) => s.subcontractor_id || s.subcontractor_code));
       setSubSearchResults(all.filter((s: any) => !existing.has(s.subcontractor_code)));
     } catch { /* skip */ } finally { setSubSearchLoading(false); }
@@ -244,6 +243,7 @@ export default function SubcontractorItemPage() {
     try {
       for (const sub of selected) {
         await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+          id: crypto.randomUUID(),
           subcontractor_id: sub.subcontractor_code,
           item_id: selectedItem.item_number,
         });
@@ -251,7 +251,6 @@ export default function SubcontractorItemPage() {
       toast.success(`${selected.length}개 외주업체가 추가되었습니다.`);
       setSubCheckedIds(new Set());
       setSubSelectOpen(false);
-      // 우측 새로고침
       const sid = selectedItemId;
       setSelectedItemId(null);
       setTimeout(() => setSelectedItemId(sid), 50);
@@ -300,56 +299,74 @@ export default function SubcontractorItemPage() {
     toast.success("다운로드 완료");
   };
 
+  const handleSearch = () => setSearchKeyword(inputKeyword);
+
   return (
     <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
-      <DynamicSearchFilter
-        tableName={ITEM_TABLE}
-        filterId="subcontractor-item"
-        onFilterChange={setSearchFilters}
-        dataCount={itemCount}
-        externalFilterConfig={filterConfig}
-        extraActions={
-          <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
-              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
-            </Button>
-          </div>
-        }
-      />
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>외주관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">외주품목정보</span>
+      </div>
+
+      {/* 검색 바 */}
+      <div className="flex items-center gap-2 px-4 py-3 bg-card border rounded-lg shrink-0">
+        <span className="text-[11px] font-semibold text-muted-foreground whitespace-nowrap">품명</span>
+        <Input
+          className="h-9 w-[200px]"
+          placeholder="품명 검색"
+          value={inputKeyword}
+          onChange={(e) => setInputKeyword(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+        />
+        <Button variant="outline" size="sm" className="h-9" onClick={() => { setInputKeyword(""); setSearchKeyword(""); }}>
+          <RotateCcw className="w-3.5 h-3.5 mr-1" /> 초기화
+        </Button>
+        <Button size="sm" className="h-9" onClick={handleSearch}>
+          <Search className="w-3.5 h-3.5 mr-1" /> 조회
+        </Button>
+        <div className="ml-auto flex gap-1.5">
+          <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
 
       {/* 분할 패널 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
         <ResizablePanelGroup direction="horizontal">
           {/* 좌측: 외주품목 목록 */}
           <ResizablePanel defaultSize={55} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Package className="w-4 h-4" /> 외주품목 목록
-                  <Badge variant="secondary" className="font-normal">{itemCount}건</Badge>
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">외주품목 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{itemCount}건</span>
                 </div>
-                <div className="flex gap-1.5">
+                <div className="flex items-center gap-1.5">
                   <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
                     <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
                   </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid
-                gridId="subcontractor-item-left"
-                columns={LEFT_COLUMNS}
-                data={items}
+              <EDataTable
+                columns={mainTableColumns}
+                data={ts.groupData(items)}
                 loading={itemLoading}
+                emptyMessage="등록된 외주품목이 없어요"
                 selectedId={selectedItemId}
-                onSelect={setSelectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
                 onRowDoubleClick={() => openEditItem()}
-                emptyMessage="등록된 외주품목이 없습니다"
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-subcontractor-item-main"
               />
             </div>
           </ResizablePanel>
@@ -359,9 +376,9 @@ export default function SubcontractorItemPage() {
           {/* 우측: 외주업체 정보 */}
           <ResizablePanel defaultSize={45} minSize={25}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Users className="w-4 h-4" /> 외주업체 정보
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">외주업체 정보</h3>
                   {selectedItem && <Badge variant="outline" className="font-normal">{selectedItem.item_name}</Badge>}
                 </div>
                 <Button variant="outline" size="sm" disabled={!selectedItemId}
@@ -370,18 +387,51 @@ export default function SubcontractorItemPage() {
                 </Button>
               </div>
               {!selectedItemId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
-                  좌측에서 품목을 선택하세요
+                <div className="flex-1 flex flex-col items-center justify-center gap-3 m-3 border-2 border-dashed rounded-lg text-center">
+                  <Inbox className="w-12 h-12 text-muted-foreground/40" />
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">품목을 선택해주세요</p>
+                    <p className="text-xs text-muted-foreground mt-1">좌측에서 품목을 선택하면 외주업체 정보가 표시돼요</p>
+                  </div>
+                </div>
+              ) : subcontractorLoading ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : subcontractorItems.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                  <Inbox className="w-8 h-8 mb-2 opacity-40" />
+                  <p className="text-sm">등록된 외주업체가 없어요</p>
                 </div>
               ) : (
-                <DataGrid
-                  gridId="subcontractor-item-right"
-                  columns={RIGHT_COLUMNS}
-                  data={subcontractorItems}
-                  loading={subcontractorLoading}
-                  showRowNumber={false}
-                  emptyMessage="등록된 외주업체가 없습니다"
-                />
+                <div className="flex-1 overflow-auto">
+                  <Table noWrapper>
+                    <thead className="sticky top-0 z-10 bg-card">
+                      <TableRow>
+                        <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
+                        <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
+                        <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품번</TableHead>
+                        <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품명</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                        <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                      </TableRow>
+                    </thead>
+                    <TableBody>
+                      {subcontractorItems.map((item, idx) => (
+                        <TableRow key={item.id || idx}>
+                          <TableCell className="text-[13px] font-mono">{item.subcontractor_code || "-"}</TableCell>
+                          <TableCell className="text-sm">{item.subcontractor_name || "-"}</TableCell>
+                          <TableCell className="text-[13px]">{item.subcontractor_item_code || "-"}</TableCell>
+                          <TableCell className="text-[13px]">{item.subcontractor_item_name || "-"}</TableCell>
+                          <TableCell className="text-[13px] text-right font-mono">{formatNum(item.base_price)}</TableCell>
+                          <TableCell className="text-[13px] text-right font-mono">{formatNum(item.calculated_price)}</TableCell>
+                          <TableCell className="text-[13px]">{item.currency_code || "-"}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
               )}
             </div>
           </ResizablePanel>
@@ -389,68 +439,64 @@ export default function SubcontractorItemPage() {
       </div>
 
       {/* 품목 수정 모달 */}
-      <FullscreenDialog
-        open={editItemOpen}
-        onOpenChange={setEditItemOpen}
-        title="외주품목 수정"
-        description={`${editItemForm.item_number || ""} — ${editItemForm.item_name || ""}`}
-        defaultMaxWidth="max-w-2xl"
-        footer={
-          <>
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>외주품목 수정</DialogTitle>
+            <DialogDescription>{editItemForm.item_number || ""} — {editItemForm.item_name || ""}</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-sm text-muted-foreground">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+            <div className="col-span-2 border-t my-2" />
+            <div className="space-y-1.5">
+              <Label className="text-sm">판매가격</Label>
+              <Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
+                placeholder="판매가격" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">기준단가</Label>
+              <Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">통화</Label>
+              <Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
             <Button onClick={handleEditSave} disabled={saving}>
               {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
             </Button>
-          </>
-        }
-      >
-        <div className="grid grid-cols-2 gap-4 py-4">
-          {[
-            { key: "item_number", label: "품목코드" },
-            { key: "item_name", label: "품명" },
-            { key: "size", label: "규격" },
-            { key: "unit", label: "단위" },
-            { key: "material", label: "재질" },
-            { key: "status", label: "상태" },
-          ].map((f) => (
-            <div key={f.key} className="space-y-1.5">
-              <Label className="text-sm text-muted-foreground">{f.label}</Label>
-              <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
-            </div>
-          ))}
-
-          <div className="col-span-2 border-t my-2" />
-
-          <div className="space-y-1.5">
-            <Label className="text-sm">판매가격</Label>
-            <Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
-              placeholder="판매가격" className="h-9" />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-sm">기준단가</Label>
-            <Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
-              placeholder="기준단가" className="h-9" />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-sm">통화</Label>
-            <Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
-              <SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
-              <SelectContent>
-                {(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </FullscreenDialog>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 외주업체 추가 모달 */}
       <Dialog open={subSelectOpen} onOpenChange={setSubSelectOpen}>
-        <DialogContent className="max-w-2xl max-h-[70vh]">
+        <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden">
           <DialogHeader>
             <DialogTitle>외주업체 선택</DialogTitle>
-            <DialogDescription>품목에 추가할 외주업체를 선택하세요.</DialogDescription>
+            <DialogDescription>품목에 추가할 외주업체를 선택해주세요.</DialogDescription>
           </DialogHeader>
-          <div className="flex gap-2 mb-3">
+          <div className="flex gap-2">
             <Input placeholder="외주업체명 검색" value={subSearchKeyword}
               onChange={(e) => setSubSearchKeyword(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && searchSubcontractors()}
@@ -459,9 +505,9 @@ export default function SubcontractorItemPage() {
               {subSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
             </Button>
           </div>
-          <div className="overflow-auto max-h-[350px] border rounded-lg">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
+          <div className="flex-1 overflow-auto border rounded-lg">
+            <Table noWrapper>
+              <thead className="sticky top-0 z-10 bg-card">
                 <TableRow>
                   <TableHead className="w-[40px] text-center">
                     <input type="checkbox"
@@ -471,15 +517,15 @@ export default function SubcontractorItemPage() {
                         else setSubCheckedIds(new Set());
                       }} />
                   </TableHead>
-                  <TableHead className="w-[110px]">외주업체코드</TableHead>
-                  <TableHead className="min-w-[130px]">외주업체명</TableHead>
-                  <TableHead className="w-[80px]">거래유형</TableHead>
-                  <TableHead className="w-[80px]">담당자</TableHead>
+                  <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
+                  <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
+                  <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래유형</TableHead>
+                  <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
                 </TableRow>
-              </TableHeader>
+              </thead>
               <TableBody>
                 {subSearchResults.length === 0 ? (
-                  <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
+                  <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없어요</TableCell></TableRow>
                 ) : subSearchResults.map((s) => (
                   <TableRow key={s.id} className={cn("cursor-pointer", subCheckedIds.has(s.id) && "bg-primary/5")}
                     onClick={() => setSubCheckedIds((prev) => {
@@ -488,10 +534,10 @@ export default function SubcontractorItemPage() {
                       return next;
                     })}>
                     <TableCell className="text-center"><input type="checkbox" checked={subCheckedIds.has(s.id)} readOnly /></TableCell>
-                    <TableCell className="text-xs">{s.subcontractor_code}</TableCell>
+                    <TableCell className="text-[13px]">{s.subcontractor_code}</TableCell>
                     <TableCell className="text-sm">{s.subcontractor_name}</TableCell>
-                    <TableCell className="text-xs">{s.division}</TableCell>
-                    <TableCell className="text-xs">{s.contact_person}</TableCell>
+                    <TableCell className="text-[13px]">{s.division}</TableCell>
+                    <TableCell className="text-[13px]">{s.contact_person}</TableCell>
                   </TableRow>
                 ))}
               </TableBody>
@@ -520,12 +566,14 @@ export default function SubcontractorItemPage() {
         onSuccess={() => fetchItems()}
       />
 
+      {/* 테이블 설정 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={ITEM_TABLE}
-        settingsId="subcontractor-item"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
 
       {ConfirmDialogComponent}
diff --git a/frontend/app/(main)/COMPANY_29/outsourcing/subcontractor/page.tsx b/frontend/app/(main)/COMPANY_29/outsourcing/subcontractor/page.tsx
index eadb3a2a..934c03c5 100644
--- a/frontend/app/(main)/COMPANY_29/outsourcing/subcontractor/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/outsourcing/subcontractor/page.tsx
@@ -1,103 +1,95 @@
 "use client";
 
-/**
- * 외주업체관리 — 하드코딩 페이지
- *
- * 좌측: 외주업체 목록 (subcontractor_mng)
- * 우측: 선택한 외주업체의 품목별 단가 정보 (subcontractor_item_prices, entity join → item_info)
- *
- * 모달:
- * - 외주업체 등록/수정 (subcontractor_mng)
- * - 품목 추가 (item_info 검색 → subcontractor_item_mapping + subcontractor_item_prices)
- */
-
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
-import {
-  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
-} from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import {
   Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
-  Wrench, Package, Search, X, Settings2,
+  Wrench, Package, Search, X, RefreshCw, Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
-import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
 import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { validateField, validateForm, formatField } from "@/lib/utils/validation";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const SUBCONTRACTOR_TABLE = "subcontractor_mng";
 const MAPPING_TABLE = "subcontractor_item_mapping";
 const PRICE_TABLE = "subcontractor_item_prices";
 
-// 좌측: 외주업체 목록 컬럼
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "subcontractor_code", label: "외주업체코드", width: "w-[110px]" },
-  { key: "subcontractor_name", label: "외주업체명", minWidth: "min-w-[120px]" },
-  { key: "division", label: "거래유형", width: "w-[80px]" },
-  { key: "contact_person", label: "담당자", width: "w-[80px]" },
-  { key: "contact_phone", label: "전화번호", width: "w-[110px]" },
-  { key: "business_number", label: "사업자번호", width: "w-[110px]" },
-  { key: "email", label: "이메일", width: "w-[130px]" },
-  { key: "status", label: "상태", width: "w-[60px]" },
+const GRID_COLUMNS_CONFIG = [
+  { key: "subcontractor_code", label: "외주사코드" },
+  { key: "subcontractor_name", label: "외주사명" },
+  { key: "division", label: "업체 유형" },
+  { key: "status", label: "상태" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "담당자 전화번호" },
+  { key: "contact_email", label: "담당자 이메일" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "phone", label: "전화번호" },
+  { key: "fax", label: "팩스" },
+  { key: "representative", label: "대표자명" },
+  { key: "grade", label: "등급" },
+  { key: "process_type", label: "공정 유형" },
+  { key: "payment_terms", label: "결제 조건" },
+  { key: "remarks", label: "비고" },
+  { key: "writer", label: "작성자" },
+  { key: "created_date", label: "생성일시" },
+  { key: "updated_date", label: "수정일시" },
 ];
-
-// 우측: 품목별 단가 컬럼
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "item_number", label: "품목코드", width: "w-[100px]" },
-  { key: "item_name", label: "품명", minWidth: "min-w-[100px]" },
-  { key: "subcontractor_item_code", label: "외주품번", width: "w-[100px]" },
-  { key: "subcontractor_item_name", label: "외주품명", width: "w-[100px]" },
-  { key: "base_price_type", label: "기준유형", width: "w-[80px]" },
-  { key: "base_price", label: "기준가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "discount_type", label: "할인유형", width: "w-[70px]" },
-  { key: "discount_value", label: "할인값", width: "w-[60px]", align: "right" },
-  { key: "calculated_price", label: "단가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
-];
-
 export default function SubcontractorManagementPage() {
-  const { user } = useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
 
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
   // 좌측: 외주업체 목록
   const [subcontractors, setSubcontractors] = useState<any[]>([]);
   const [subcontractorLoading, setSubcontractorLoading] = useState(false);
   const [subcontractorCount, setSubcontractorCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
   const [selectedSubcontractorId, setSelectedSubcontractorId] = useState<string | null>(null);
 
   // 우측: 품목 단가
   const [priceItems, setPriceItems] = useState<any[]>([]);
   const [priceLoading, setPriceLoading] = useState(false);
 
-  // 품목 편집 데이터 (더블클릭 시 — 상세 입력 모달 재활용)
+  // 품목 편집 데이터
   const [editItemData, setEditItemData] = useState<any>(null);
 
-  // 모달
+  // 외주업체 등록/수정 모달
   const [subcontractorModalOpen, setSubcontractorModalOpen] = useState(false);
   const [subcontractorEditMode, setSubcontractorEditMode] = useState(false);
   const [subcontractorForm, setSubcontractorForm] = useState<Record<string, any>>({});
   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
   const [saving, setSaving] = useState(false);
 
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
   // 품목 추가 모달 (1단계: 검색/선택)
   const [itemSelectOpen, setItemSelectOpen] = useState(false);
   const [itemSearchKeyword, setItemSearchKeyword] = useState("");
@@ -105,19 +97,18 @@ export default function SubcontractorManagementPage() {
   const [itemSearchLoading, setItemSearchLoading] = useState(false);
   const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
 
-  // 품목 상세 입력 모달 (2단계: 외주 품번/품명 + 단가)
+  // 품목 상세 입력 모달 (2단계)
   const [itemDetailOpen, setItemDetailOpen] = useState(false);
   const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
-  // 품목별 외주 품번/품명 (다중)
-  const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; subcontractor_item_code: string; subcontractor_item_name: string }>>>({});
-  // 품목별 단가 목록
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{
+    _id: string; subcontractor_item_code: string; subcontractor_item_name: string;
+  }>>>({});
   const [itemPrices, setItemPrices] = useState<Record<string, Array<{
     _id: string; start_date: string; end_date: string; currency_code: string;
     base_price_type: string; base_price: string; discount_type: string;
     discount_value: string; rounding_type: string; rounding_unit_value: string;
     calculated_price: string;
   }>>>({});
-  // 단가 카테고리 옵션
   const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
   // 엑셀
@@ -125,6 +116,10 @@ export default function SubcontractorManagementPage() {
   const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
   const [excelDetecting, setExcelDetecting] = useState(false);
 
+  // 테이블 설정
+  const DEFAULT_VISIBLE_KEYS = ["subcontractor_code", "subcontractor_name", "division", "status", "contact_person", "contact_phone"];
+  const ts = useTableSettings("c16-subcontractor-v2", SUBCONTRACTOR_TABLE, GRID_COLUMNS_CONFIG, DEFAULT_VISIBLE_KEYS);
+
   // 카테고리
   const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
@@ -148,7 +143,6 @@ export default function SubcontractorManagementPage() {
       }
       setCategoryOptions(optMap);
 
-      // 단가 카테고리
       const priceOpts: Record<string, { code: string; label: string }[]> = {};
       for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
         try {
@@ -161,41 +155,57 @@ export default function SubcontractorManagementPage() {
     load();
   }, []);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
 
-  useEffect(() => {
-    const saved = loadTableSettings("subcontractor-mng");
-    if (saved) applyTableSettings(saved);
-  }, []);
+  // 셀 렌더링 헬퍼
+  const renderCellValue = (row: any, key: string) => {
+    const val = key === "division" ? (row.division_label || row.division)
+      : key === "status" ? (row.status_label || row.status)
+      : row[key];
+    if (!val) return "-";
+    if (key === "subcontractor_code") return <span className="text-primary">{val}</span>;
+    if (key === "division") return <Badge variant="secondary" className="text-[10px] px-1.5 py-0">{val}</Badge>;
+    if (key === "status") return <Badge variant="outline" className="text-[10px] px-1.5 py-0">{val}</Badge>;
+    if (key === "subcontractor_name") return <span className="font-medium">{val}</span>;
+    return val;
+  };
+
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      render: (value: any, row: any) => renderCellValue(row, col.key),
+    }));
+  }, [ts.visibleColumns, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // 외주업체 목록 조회
   const fetchSubcontractors = useCallback(async () => {
     setSubcontractorLoading(true);
     try {
       const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+
       const res = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
       });
       const raw = res.data?.data?.data || res.data?.data?.rows || [];
-      // 카테고리 코드→라벨 변환
       const resolve = (col: string, code: string) => {
         if (!code) return "";
         return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
       };
       const data = raw.map((r: any) => ({
         ...r,
-        division: resolve("division", r.division),
-        status: resolve("status", r.status),
+        division_label: resolve("division", r.division),
+        status_label: resolve("status", r.status),
       }));
       setSubcontractors(data);
       setSubcontractorCount(res.data?.data?.total || raw.length);
     } catch (err) {
-      console.error("외주업체 조회 실패:", err);
-      toast.error("외주업체 목록을 불러오는데 실패했습니다.");
+      toast.error("외주업체 목록을 불러오지 못했어요");
     } finally {
       setSubcontractorLoading(false);
     }
@@ -203,15 +213,15 @@ export default function SubcontractorManagementPage() {
 
   useEffect(() => { fetchSubcontractors(); }, [fetchSubcontractors]);
 
-  // 선택된 외주업체의 품목 단가 조회
+  // 선택된 외주업체
   const selectedSubcontractor = subcontractors.find((c) => c.id === selectedSubcontractorId);
 
+  // 선택된 외주업체의 품목 단가 조회
   useEffect(() => {
     if (!selectedSubcontractor?.subcontractor_code) { setPriceItems([]); return; }
     const fetchItems = async () => {
       setPriceLoading(true);
       try {
-        // 1. subcontractor_item_mapping 조회 (품목 매핑 — 기본 데이터)
         const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
           page: 1, size: 500,
           dataFilter: { enabled: true, filters: [
@@ -221,7 +231,6 @@ export default function SubcontractorManagementPage() {
         });
         const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
 
-        // 2. item_id → item_info 조인 (품명 등)
         const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
         let itemMap: Record<string, any> = {};
         if (itemIds.length > 0) {
@@ -237,7 +246,6 @@ export default function SubcontractorManagementPage() {
           } catch { /* skip */ }
         }
 
-        // 3. subcontractor_item_prices 조회 (단가 — 있으면 보강)
         let priceMap: Record<string, any> = {};
         if (mappings.length > 0) {
           try {
@@ -249,7 +257,6 @@ export default function SubcontractorManagementPage() {
               autoFilter: true,
             });
             const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
-            // item_id별 최신 단가 매핑
             for (const p of prices) {
               const key = p.item_id;
               if (!priceMap[key] || (p.start_date && (!priceMap[key].start_date || p.start_date > priceMap[key].start_date))) {
@@ -259,7 +266,6 @@ export default function SubcontractorManagementPage() {
           } catch { /* skip */ }
         }
 
-        // 4. 매핑 + 품목정보 + 단가 병합 + 카테고리 코드→라벨
         const priceResolve = (col: string, code: string) => {
           if (!code) return "";
           return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
@@ -281,25 +287,38 @@ export default function SubcontractorManagementPage() {
           };
         }));
       } catch (err) {
-        console.error("품목 조회 실패:", err);
+        // 품목 조회 실패 시 무시
       } finally {
         setPriceLoading(false);
       }
     };
     fetchItems();
-  }, [selectedSubcontractor?.subcontractor_code]);
+  }, [selectedSubcontractor?.subcontractor_code, priceCategoryOptions]);
 
-  const getCategoryLabel = (col: string, code: string) => {
-    if (!code) return "";
-    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
-  };
-
-  // 외주업체 등록 모달
-  const openSubcontractorRegister = () => {
+  // 외주업체 등록 모달 열기
+  const openSubcontractorRegister = async () => {
     setSubcontractorForm({});
     setFormErrors({});
     setSubcontractorEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
     setSubcontractorModalOpen(true);
+
+    // 채번 규칙 조회 (subcontractor_mng.subcontractor_code)
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/subcontractor_mng/subcontractor_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시
+    }
   };
 
   const openSubcontractorEdit = () => {
@@ -310,7 +329,6 @@ export default function SubcontractorManagementPage() {
     setSubcontractorModalOpen(true);
   };
 
-  // 폼 필드 변경 시 자동 포맷팅 + 실시간 검증
   const handleFormChange = (field: string, value: string) => {
     const formatted = formatField(field, value);
     setSubcontractorForm((prev) => ({ ...prev, [field]: formatted }));
@@ -323,9 +341,8 @@ export default function SubcontractorManagementPage() {
   };
 
   const handleSubcontractorSave = async () => {
-    if (!subcontractorForm.subcontractor_name) { toast.error("외주업체명은 필수입니다."); return; }
-    if (!subcontractorForm.status) { toast.error("상태는 필수입니다."); return; }
-    // 폼 검증
+    if (!subcontractorForm.subcontractor_name) { toast.error("외주업체명은 필수예요"); return; }
+    if (!subcontractorForm.status) { toast.error("상태는 필수예요"); return; }
     const errors = validateForm(subcontractorForm, ["contact_phone", "email", "business_number"]);
     setFormErrors(errors);
     if (Object.keys(errors).length > 0) {
@@ -334,20 +351,32 @@ export default function SubcontractorManagementPage() {
     }
     setSaving(true);
     try {
-      const { id, created_date, updated_date, writer, company_code, ...fields } = subcontractorForm;
+      const { id, created_date, updated_date, writer, company_code, division_label, status_label, ...fields } = subcontractorForm;
       if (subcontractorEditMode && id) {
         await apiClient.put(`/table-management/tables/${SUBCONTRACTOR_TABLE}/edit`, {
           originalData: { id }, updatedData: fields,
         });
-        toast.success("수정되었습니다.");
+        toast.success("수정되었어요");
       } else {
-        await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/add`, fields);
-        toast.success("등록되었습니다.");
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+        const saveFields = allocatedCode ? { ...fields, subcontractor_code: allocatedCode } : fields;
+        await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/add`, { id: crypto.randomUUID(), ...saveFields });
+        toast.success("등록되었어요");
       }
       setSubcontractorModalOpen(false);
       fetchSubcontractors();
     } catch (err: any) {
-      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+      toast.error(err.response?.data?.message || "저장에 실패했어요");
     } finally {
       setSaving(false);
     }
@@ -356,8 +385,8 @@ export default function SubcontractorManagementPage() {
   // 외주업체 삭제
   const handleSubcontractorDelete = async () => {
     if (!selectedSubcontractorId) return;
-    const ok = await confirm("외주업체를 삭제하시겠습니까?", {
-      description: "관련된 품목 매핑, 단가 정보도 함께 삭제됩니다.",
+    const ok = await confirm("외주업체를 삭제할까요?", {
+      description: "관련된 품목 매핑, 단가 정보도 함께 삭제돼요",
       variant: "destructive", confirmText: "삭제",
     });
     if (!ok) return;
@@ -365,10 +394,10 @@ export default function SubcontractorManagementPage() {
       await apiClient.delete(`/table-management/tables/${SUBCONTRACTOR_TABLE}/delete`, {
         data: [{ id: selectedSubcontractorId }],
       });
-      toast.success("삭제되었습니다.");
+      toast.success("삭제되었어요");
       setSelectedSubcontractorId(null);
       fetchSubcontractors();
-    } catch { toast.error("삭제에 실패했습니다."); }
+    } catch { toast.error("삭제에 실패했어요"); }
   };
 
   // 품목 검색
@@ -378,23 +407,26 @@ export default function SubcontractorManagementPage() {
       const filters: any[] = [];
       if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
-        page: 1, size: 50,
+        page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
       });
       const allItems = res.data?.data?.data || res.data?.data?.rows || [];
-      // 이미 등록된 품목 제외
       const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
-      setItemSearchResults(allItems.filter((item: any) => !existingItemIds.has(item.item_number) && !existingItemIds.has(item.id)));
+      const OUTSOURCING_CODE = "CAT_MMDJB7R4_TO3T";
+      setItemSearchResults(allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        const div = item.division || "";
+        return div.includes(OUTSOURCING_CODE) || div.includes("외주");
+      }));
     } catch { /* skip */ } finally { setItemSearchLoading(false); }
   };
 
   // 품목 선택 완료 → 상세 입력 모달로 전환
   const goToItemDetail = () => {
     const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
-    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+    if (selected.length === 0) { toast.error("품목을 선택해주세요"); return; }
     setSelectedItemsForDetail(selected);
-    // 초기 매핑/단가 데이터 세팅
     const mappings: typeof itemMappings = {};
     const prices: typeof itemPrices = {};
     for (const item of selected) {
@@ -410,11 +442,11 @@ export default function SubcontractorManagementPage() {
     }
     setItemMappings(mappings);
     setItemPrices(prices);
+    setEditItemData(null);
     setItemSelectOpen(false);
     setItemDetailOpen(true);
   };
 
-  // 외주 품번/품명 행 추가
   const addMappingRow = (itemKey: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -422,7 +454,6 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 외주 품번/품명 행 삭제
   const removeMappingRow = (itemKey: string, rowId: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -430,7 +461,6 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 외주 품번/품명 행 수정
   const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -438,7 +468,6 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 단가 행 추가
   const addPriceRow = (itemKey: string) => {
     setItemPrices((prev) => ({
       ...prev,
@@ -452,7 +481,6 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 단가 행 삭제
   const removePriceRow = (itemKey: string, rowId: string) => {
     setItemPrices((prev) => ({
       ...prev,
@@ -460,21 +488,19 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 단가 행 값 변경
   const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
     setItemPrices((prev) => ({
       ...prev,
       [itemKey]: (prev[itemKey] || []).map((r) => {
         if (r._id !== rowId) return r;
         const updated = { ...r, [field]: value };
-        // 단가 자동 계산: base_price - discount
         if (["base_price", "discount_type", "discount_value"].includes(field)) {
           const bp = Number(updated.base_price) || 0;
           const dv = Number(updated.discount_value) || 0;
           const dt = updated.discount_type;
           let calc = bp;
-          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100); // 할인율
-          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv; // 할인금액
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
           updated.calculated_price = String(Math.round(calc));
         }
         return updated;
@@ -482,12 +508,9 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 품목 상세 저장 (mapping + prices 일괄)
-  // 우측 품목 편집 열기 — 등록과 동일한 상세 입력 모달을 재활용
+  // 우측 품목 편집 열기 — 해당 item_number의 모든 매핑+단가를 로드
   const openEditItem = async (row: any) => {
     const itemKey = row.item_number || row.item_id;
-
-    // item_info에서 품목 정보 조회
     let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
     try {
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
@@ -499,29 +522,50 @@ export default function SubcontractorManagementPage() {
       if (found) itemInfo = found;
     } catch { /* skip */ }
 
-    // 기존 매핑 데이터 → 외주 품번/품명
-    const mappingRows = [{
-      _id: `m_existing_${row.id}`,
-      subcontractor_item_code: row.subcontractor_item_code || "",
-      subcontractor_item_name: row.subcontractor_item_name || "",
-    }].filter((m) => m.subcontractor_item_code || m.subcontractor_item_name);
+    // 같은 item_number를 가진 모든 priceItems 행에서 매핑 정보 추출
+    const allRowsForItem = priceItems.filter((p: any) => (p.item_number || p.item_id) === itemKey);
+    const allMappingIds = allRowsForItem.map((r: any) => r.id).filter(Boolean);
 
-    // 기존 단가 데이터
-    const priceRows = [{
-      _id: `p_existing_${row.id}`,
-      start_date: row.start_date || "",
-      end_date: row.end_date || "",
-      currency_code: row.currency_code || "CAT_MLAMDKVN_PZJI",
-      base_price_type: row.base_price_type || "CAT_MLAMFGFT_4RZW",
-      base_price: row.base_price ? String(row.base_price) : "",
-      discount_type: row.discount_type || "",
-      discount_value: row.discount_value ? String(row.discount_value) : "",
-      rounding_type: row.rounding_type || "",
-      rounding_unit_value: row.rounding_unit_value || "",
-      calculated_price: row.calculated_price ? String(row.calculated_price) : "",
-    }].filter((p) => p.base_price || p.start_date);
+    const mappingRows = allRowsForItem
+      .filter((r: any) => r.subcontractor_item_code || r.subcontractor_item_name)
+      .map((r: any) => ({
+        _id: `m_existing_${r.id}`,
+        subcontractor_item_code: r.subcontractor_item_code || "",
+        subcontractor_item_name: r.subcontractor_item_name || "",
+      }));
+
+    // 서버에서 이 item+subcontractor의 모든 단가를 raw 코드로 가져오기
+    let priceRows: Array<{
+      _id: string; start_date: string; end_date: string; currency_code: string;
+      base_price_type: string; base_price: string; discount_type: string;
+      discount_value: string; rounding_type: string; rounding_unit_value: string;
+      calculated_price: string;
+    }> = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor!.subcontractor_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]},
+        autoFilter: true,
+      });
+      const rawPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = rawPrices.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date || "",
+        end_date: p.end_date || "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
 
-    // 빈 단가 행이 없으면 하나 추가
     if (priceRows.length === 0) {
       priceRows.push({
         _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
@@ -533,7 +577,8 @@ export default function SubcontractorManagementPage() {
     setSelectedItemsForDetail([itemInfo]);
     setItemMappings({ [itemKey]: mappingRows });
     setItemPrices({ [itemKey]: priceRows });
-    setEditItemData(row); // 편집 모드 표시용
+    // editItemData에 원본 매핑 ID 목록 저장 (삭제 시 사용)
+    setEditItemData({ ...row, _allMappingIds: allMappingIds });
     setItemDetailOpen(true);
   };
 
@@ -547,25 +592,21 @@ export default function SubcontractorManagementPage() {
         const mappingRows = itemMappings[itemKey] || [];
 
         if (isEditingExisting && editItemData?.id) {
-          // 편집 모드: 기존 mapping UPDATE
-          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
-            originalData: { id: editItemData.id },
-            updatedData: {
-              subcontractor_item_code: mappingRows[0]?.subcontractor_item_code || "",
-              subcontractor_item_name: mappingRows[0]?.subcontractor_item_name || "",
-              base_price: null, // prices 테이블로 이동
-              discount_type: null,
-              discount_value: null,
-              calculated_price: null,
-            },
-          });
+          // 1) 기존 매핑 모두 삭제
+          const allMappingIds: string[] = editItemData._allMappingIds || [editItemData.id];
+          if (allMappingIds.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: allMappingIds.map((mid: string) => ({ id: mid })),
+            });
+          }
 
-          // 기존 prices 삭제 후 재등록
+          // 2) 기존 단가 모두 삭제 (subcontractor_id + item_id 기준)
           try {
             const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
-              page: 1, size: 100,
+              page: 1, size: 500,
               dataFilter: { enabled: true, filters: [
-                { columnName: "mapping_id", operator: "equals", value: editItemData.id },
+                { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor.subcontractor_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
               ]}, autoFilter: true,
             });
             const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
@@ -576,13 +617,39 @@ export default function SubcontractorManagementPage() {
             }
           } catch { /* skip */ }
 
-          // 새 prices INSERT
-          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+          // 3) 모든 매핑 재삽입
+          let firstMappingId: string | null = null;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const newId = crypto.randomUUID();
+            if (mi === 0) firstMappingId = newId;
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: newId,
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              subcontractor_item_code: mappingRows[mi].subcontractor_item_code || "",
+              subcontractor_item_name: mappingRows[mi].subcontractor_item_name || "",
+            });
+          }
+          // 매핑이 비어있으면 빈 매핑 1개 생성 (item_id 연결 유지)
+          if (mappingRows.length === 0) {
+            firstMappingId = crypto.randomUUID();
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: firstMappingId,
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              subcontractor_item_code: "",
+              subcontractor_item_name: "",
+            });
+          }
+
+          // 4) 모든 단가 재삽입
+          const filteredPriceRows = (itemPrices[itemKey] || []).filter((p) =>
             (p.base_price && Number(p.base_price) > 0) || p.start_date
           );
-          for (const price of priceRows) {
+          for (const price of filteredPriceRows) {
             await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
-              mapping_id: editItemData.id,
+              id: crypto.randomUUID(),
+              mapping_id: firstMappingId || "",
               subcontractor_id: selectedSubcontractor.subcontractor_code,
               item_id: itemKey,
               start_date: price.start_date || null, end_date: price.end_date || null,
@@ -594,9 +661,9 @@ export default function SubcontractorManagementPage() {
             });
           }
         } else {
-          // 신규 등록 모드
           let mappingId: string | null = null;
           const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
             subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
             subcontractor_item_code: mappingRows[0]?.subcontractor_item_code || "",
             subcontractor_item_name: mappingRows[0]?.subcontractor_item_name || "",
@@ -605,6 +672,7 @@ export default function SubcontractorManagementPage() {
 
           for (let mi = 1; mi < mappingRows.length; mi++) {
             await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
               subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
               subcontractor_item_code: mappingRows[mi].subcontractor_item_code || "",
               subcontractor_item_name: mappingRows[mi].subcontractor_item_name || "",
@@ -616,6 +684,7 @@ export default function SubcontractorManagementPage() {
           );
           for (const price of priceRows) {
             await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
               mapping_id: mappingId || "", subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
               start_date: price.start_date || null, end_date: price.end_date || null,
               currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
@@ -627,16 +696,15 @@ export default function SubcontractorManagementPage() {
           }
         }
       }
-      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedItemsForDetail.length}개 품목이 추가되었습니다.`);
+      toast.success(isEditingExisting ? "수정되었어요" : `${selectedItemsForDetail.length}개 품목이 추가되었어요`);
       setItemDetailOpen(false);
       setEditItemData(null);
       setItemCheckedIds(new Set());
-      // 우측 새로고침
       const cid = selectedSubcontractorId;
       setSelectedSubcontractorId(null);
       setTimeout(() => setSelectedSubcontractorId(cid), 50);
     } catch (err: any) {
-      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+      toast.error(err.response?.data?.message || "저장에 실패했어요");
     } finally {
       setSaving(false);
     }
@@ -647,7 +715,6 @@ export default function SubcontractorManagementPage() {
     if (subcontractors.length === 0) return;
     toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
     try {
-      // 전체 외주업체의 품목 매핑 + 단가 조회
       const allMappings: any[] = [];
       const subCodes = subcontractors.map((c) => c.subcontractor_code).filter(Boolean);
 
@@ -657,7 +724,6 @@ export default function SubcontractorManagementPage() {
         });
         const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
 
-        // item_id → item_info 조인
         const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
         let itemMap: Record<string, any> = {};
         if (itemIds.length > 0) {
@@ -679,12 +745,10 @@ export default function SubcontractorManagementPage() {
         }
       }
 
-      // 외주업체 + 품목 플랫 데이터 생성
       const rows: Record<string, any>[] = [];
       for (const c of subcontractors) {
         const subMappings = allMappings.filter((m) => m.subcontractor_id === c.subcontractor_code);
         if (subMappings.length === 0) {
-          // 품목 없는 외주업체도 1행
           rows.push({
             외주업체코드: c.subcontractor_code, 외주업체명: c.subcontractor_name,
             거래유형: getCategoryLabel("division", c.division),
@@ -717,15 +781,14 @@ export default function SubcontractorManagementPage() {
       toast.success(`${rows.length}행 다운로드 완료`);
     } catch (err) {
       toast.dismiss("excel-dl");
-      console.error("엑셀 다운로드 실패:", err);
-      toast.error("다운로드에 실패했습니다.");
+      toast.error("다운로드에 실패했어요");
     }
   };
 
   // 셀렉트 렌더링
   const renderSelect = (field: string, value: string, onChange: (v: string) => void, placeholder: string) => (
     <Select value={value || ""} onValueChange={onChange}>
-      <SelectTrigger className="h-9"><SelectValue placeholder={placeholder} /></SelectTrigger>
+      <SelectTrigger className="h-9 text-sm"><SelectValue placeholder={placeholder} /></SelectTrigger>
       <SelectContent>
         {(categoryOptions[field] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
       </SelectContent>
@@ -734,19 +797,26 @@ export default function SubcontractorManagementPage() {
 
   return (
     <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>외주관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="font-medium text-foreground">외주사관리</span>
+      </nav>
+
+      {/* 검색 필터 바 */}
       <DynamicSearchFilter
         tableName={SUBCONTRACTOR_TABLE}
-        filterId="subcontractor-mng"
+        filterId="c16-subcontractor"
         onFilterChange={setSearchFilters}
         dataCount={subcontractorCount}
-        externalFilterConfig={filterConfig}
+        externalFilterConfig={ts.filterConfig}
         extraActions={
-          <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" disabled={excelDetecting}
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={excelDetecting}
               onClick={async () => {
                 setExcelDetecting(true);
                 try {
@@ -758,217 +828,370 @@ export default function SubcontractorManagementPage() {
                     toast.error(result.message || "테이블 구조 분석 실패");
                   }
                 } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
-              }}>
-              {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />} 엑셀 업로드
+              }}
+            >
+              {excelDetecting
+                ? <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                : <FileSpreadsheet className="mr-1.5 h-4 w-4" />}
+              엑셀업로드
             </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
-              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+              <Download className="mr-1.5 h-4 w-4" />
+              엑셀다운로드
             </Button>
           </div>
         }
       />
 
-      {/* 분할 패널 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
-        <ResizablePanelGroup direction="horizontal">
-          {/* 좌측: 외주업체 목록 */}
-          <ResizablePanel defaultSize={55} minSize={30}>
-            <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Wrench className="w-4 h-4" /> 외주업체 목록
-                  <Badge variant="secondary" className="font-normal">{subcontractorCount}건</Badge>
-                </div>
-                <div className="flex gap-1.5">
-                  <Button size="sm" onClick={openSubcontractorRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
-                  <Button variant="outline" size="sm" disabled={!selectedSubcontractorId} onClick={openSubcontractorEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
-                  <Button variant="destructive" size="sm" disabled={!selectedSubcontractorId} onClick={handleSubcontractorDelete}><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
-                </div>
+      {/* 마스터-디테일 분할 패널 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg">
+
+        {/* 좌측: 외주업체 목록 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-3 shrink-0">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-semibold">외주업체 목록</span>
+                <Badge variant="outline" className="text-xs px-1.5 py-0">{subcontractorCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Button size="sm" onClick={openSubcontractorRegister}>
+                  <Plus className="h-3.5 w-3.5 mr-1" /> 등록
+                </Button>
+                <Button variant="outline" size="sm" disabled={!selectedSubcontractorId} onClick={openSubcontractorEdit}>
+                  <Pencil className="h-3.5 w-3.5 mr-1" /> 수정
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={!selectedSubcontractorId}
+                  onClick={handleSubcontractorDelete}
+                  className="text-destructive border-destructive/20 hover:bg-destructive/10"
+                >
+                  <Trash2 className="h-3.5 w-3.5 mr-1" /> 삭제
+                </Button>
+                <Button variant="ghost" size="sm" onClick={fetchSubcontractors} disabled={subcontractorLoading}>
+                  {subcontractorLoading
+                    ? <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    : <RefreshCw className="h-3.5 w-3.5" />}
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                  <Settings2 className="h-3.5 w-3.5" />
+                </Button>
               </div>
-              <DataGrid
-                gridId="subcontractor-left"
-                columns={LEFT_COLUMNS}
-                data={subcontractors}
-                loading={subcontractorLoading}
-                selectedId={selectedSubcontractorId}
-                onSelect={setSelectedSubcontractorId}
-                onRowDoubleClick={() => openSubcontractorEdit()}
-                tableName={SUBCONTRACTOR_TABLE}
-                emptyMessage="등록된 외주업체가 없습니다"
-              />
             </div>
-          </ResizablePanel>
+            <EDataTable
+              columns={mainTableColumns}
+              data={ts.groupData(subcontractors)}
+              loading={subcontractorLoading}
+              emptyMessage="등록된 외주업체가 없어요"
+              selectedId={selectedSubcontractorId}
+              onSelect={(id) => setSelectedSubcontractorId(id)}
+              onRowDoubleClick={() => openSubcontractorEdit()}
+              showPagination={true}
+              draggableColumns={false}
+              columnOrderKey="c16-subcontractor-main"
+            />
+          </div>
+        </ResizablePanel>
 
-          <ResizableHandle withHandle />
+        <ResizableHandle withHandle />
 
-          {/* 우측: 품목 정보 */}
-          <ResizablePanel defaultSize={45} minSize={25}>
-            <div className="flex flex-col h-full">
-              {/* 헤더 */}
-              <div className="flex items-center justify-between p-2 border-b bg-muted/10 shrink-0">
-                <div className="flex items-center gap-1">
-                  <span className="px-3 py-1.5 text-sm font-medium flex items-center">
-                    <Package className="w-3.5 h-3.5 inline mr-1" />품목 정보
-                  </span>
-                  {selectedSubcontractor && <Badge variant="outline" className="font-normal ml-2 text-xs">{selectedSubcontractor.subcontractor_name}</Badge>}
-                </div>
-                <div className="flex gap-1.5">
-                  <Button variant="outline" size="sm" disabled={!selectedSubcontractorId}
-                    onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
-                    <Plus className="w-3.5 h-3.5 mr-1" /> 품목 추가
-                  </Button>
-                </div>
+        {/* 우측: 품목 정보 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-3 shrink-0">
+              <div className="flex items-center gap-2">
+                {selectedSubcontractor ? (
+                  <>
+                    <span className="text-sm font-semibold">{selectedSubcontractor.subcontractor_name}</span>
+                    <Badge variant="outline" className="text-[10px] px-1.5 py-0">{selectedSubcontractor.subcontractor_code}</Badge>
+                  </>
+                ) : (
+                  <>
+                    <Package className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-semibold">품목 정보</span>
+                  </>
+                )}
               </div>
-
-              {/* 콘텐츠 */}
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!selectedSubcontractorId}
+                onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}
+              >
+                <Plus className="h-3.5 w-3.5 mr-1" /> 품목 추가
+              </Button>
+            </div>
+            <div className="flex-1 overflow-auto">
               {!selectedSubcontractorId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
-                  좌측에서 외주업체를 선택하세요
+                <div className="flex items-center justify-center h-full">
+                  <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-12 py-10 text-center">
+                    <Wrench className="h-10 w-10 text-muted-foreground opacity-30" />
+                    <p className="text-sm text-muted-foreground">좌측에서 외주사를 선택해주세요</p>
+                  </div>
+                </div>
+              ) : priceLoading ? (
+                <div className="flex items-center justify-center py-16">
+                  <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                </div>
+              ) : priceItems.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+                  <Package className="h-12 w-12 mb-3 opacity-30" />
+                  <p className="text-sm font-medium">등록된 품목이 없어요</p>
                 </div>
               ) : (
-                <DataGrid
-                  gridId="subcontractor-right-items"
-                  columns={RIGHT_COLUMNS}
-                  data={priceItems}
-                  loading={priceLoading}
-                  showRowNumber={false}
-                  tableName={MAPPING_TABLE}
-                  emptyMessage="등록된 품목이 없습니다"
-                  onRowDoubleClick={(row) => openEditItem(row)}
-                />
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품번</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품명</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {(() => {
+                      // item_number 기준 그룹화 (순서 유지)
+                      const grouped: { itemNumber: string; rows: any[] }[] = [];
+                      const groupMap = new Map<string, any[]>();
+                      for (const item of priceItems) {
+                        const key = item.item_number || item.item_id || item.id;
+                        if (!groupMap.has(key)) {
+                          const rows: any[] = [];
+                          groupMap.set(key, rows);
+                          grouped.push({ itemNumber: key, rows });
+                        }
+                        groupMap.get(key)!.push(item);
+                      }
+                      return grouped.map((group, gIdx) =>
+                        group.rows.map((item, rowIdx) => (
+                          <TableRow
+                            key={item.id}
+                            className={cn(
+                              "cursor-pointer hover:bg-muted/50",
+                              rowIdx === 0 && gIdx > 0 && "border-t-2 border-t-border/60"
+                            )}
+                            onDoubleClick={() => openEditItem(item)}
+                          >
+                            <TableCell className="text-[13px] text-primary">
+                              {rowIdx === 0 ? item.item_number : ""}
+                            </TableCell>
+                            <TableCell className="text-[13px]">
+                              {rowIdx === 0 ? item.item_name : ""}
+                            </TableCell>
+                            <TableCell className="text-[13px]">{item.subcontractor_item_code || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.subcontractor_item_name || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.base_price_type || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right">{item.base_price ? Number(item.base_price).toLocaleString() : "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.discount_type || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right">{item.discount_value || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right font-semibold">{item.calculated_price ? Number(item.calculated_price).toLocaleString() : "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.currency_code || "-"}</TableCell>
+                          </TableRow>
+                        ))
+                      );
+                    })()}
+                  </TableBody>
+                </Table>
               )}
             </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 모달들 ========== */}
 
       {/* 외주업체 등록/수정 모달 */}
       <Dialog open={subcontractorModalOpen} onOpenChange={setSubcontractorModalOpen}>
-        <DialogContent className="max-w-2xl">
+        <DialogContent className="max-w-[95vw] sm:max-w-[680px] max-h-[85vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>{subcontractorEditMode ? "외주업체 수정" : "외주업체 등록"}</DialogTitle>
-            <DialogDescription>{subcontractorEditMode ? "외주업체 정보를 수정합니다." : "새로운 외주업체를 등록합니다."}</DialogDescription>
+            <DialogDescription>
+              {subcontractorEditMode ? "외주업체 정보를 수정해요." : "새로운 외주업체를 등록해요."}
+            </DialogDescription>
           </DialogHeader>
           <div className="grid grid-cols-2 gap-4 py-4">
             <div className="space-y-1.5">
-              <Label className="text-sm">외주업체 코드</Label>
-              <Input value={subcontractorForm.subcontractor_code || ""} onChange={(e) => setSubcontractorForm((p) => ({ ...p, subcontractor_code: e.target.value }))}
-                placeholder="외주업체 코드" className="h-9" disabled={subcontractorEditMode} />
+              <Label className="text-xs">외주업체 코드</Label>
+              <Input
+                value={subcontractorEditMode ? (subcontractorForm.subcontractor_code || "") : (previewCode || subcontractorForm.subcontractor_code || "")}
+                onChange={(e) => {
+                  if (!subcontractorEditMode && !numberingRuleId) {
+                    setSubcontractorForm((p) => ({ ...p, subcontractor_code: e.target.value }));
+                  }
+                }}
+                placeholder={numberingRuleId && !subcontractorEditMode ? "자동 생성돼요" : "외주업체 코드"}
+                className="h-9 text-sm"
+                readOnly={!!numberingRuleId && !subcontractorEditMode}
+                disabled={subcontractorEditMode}
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">외주업체명 <span className="text-destructive">*</span></Label>
-              <Input value={subcontractorForm.subcontractor_name || ""} onChange={(e) => setSubcontractorForm((p) => ({ ...p, subcontractor_name: e.target.value }))}
-                placeholder="외주업체명" className="h-9" />
+              <Label className="text-xs">외주업체명 <span className="text-destructive">*</span></Label>
+              <Input
+                value={subcontractorForm.subcontractor_name || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, subcontractor_name: e.target.value }))}
+                placeholder="외주업체명"
+                className="h-9 text-sm"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">거래 유형</Label>
+              <Label className="text-xs">거래 유형</Label>
               {renderSelect("division", subcontractorForm.division, (v) => setSubcontractorForm((p) => ({ ...p, division: v })), "거래 유형")}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+              <Label className="text-xs">상태 <span className="text-destructive">*</span></Label>
               {renderSelect("status", subcontractorForm.status, (v) => setSubcontractorForm((p) => ({ ...p, status: v })), "상태")}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">담당자</Label>
-              <Input value={subcontractorForm.contact_person || ""} onChange={(e) => setSubcontractorForm((p) => ({ ...p, contact_person: e.target.value }))}
-                placeholder="담당자" className="h-9" />
+              <Label className="text-xs">담당자</Label>
+              <Input
+                value={subcontractorForm.contact_person || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, contact_person: e.target.value }))}
+                placeholder="담당자"
+                className="h-9 text-sm"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">전화번호</Label>
-              <Input value={subcontractorForm.contact_phone || ""} onChange={(e) => handleFormChange("contact_phone", e.target.value)}
-                placeholder="010-0000-0000" className={cn("h-9", formErrors.contact_phone && "border-destructive")} />
+              <Label className="text-xs">전화번호</Label>
+              <Input
+                value={subcontractorForm.contact_phone || ""}
+                onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                placeholder="010-0000-0000"
+                className={cn("h-9 text-sm", formErrors.contact_phone && "border-destructive")}
+              />
               {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">이메일</Label>
-              <Input value={subcontractorForm.email || ""} onChange={(e) => handleFormChange("email", e.target.value)}
-                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
+              <Label className="text-xs">이메일</Label>
+              <Input
+                value={subcontractorForm.email || ""}
+                onChange={(e) => handleFormChange("email", e.target.value)}
+                placeholder="example@email.com"
+                className={cn("h-9 text-sm", formErrors.email && "border-destructive")}
+              />
               {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">사업자번호</Label>
-              <Input value={subcontractorForm.business_number || ""} onChange={(e) => handleFormChange("business_number", e.target.value)}
-                placeholder="000-00-00000" className={cn("h-9", formErrors.business_number && "border-destructive")} />
+              <Label className="text-xs">사업자번호</Label>
+              <Input
+                value={subcontractorForm.business_number || ""}
+                onChange={(e) => handleFormChange("business_number", e.target.value)}
+                placeholder="000-00-00000"
+                className={cn("h-9 text-sm", formErrors.business_number && "border-destructive")}
+              />
               {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
             </div>
             <div className="space-y-1.5 col-span-2">
-              <Label className="text-sm">주소</Label>
-              <Input value={subcontractorForm.address || ""} onChange={(e) => setSubcontractorForm((p) => ({ ...p, address: e.target.value }))}
-                placeholder="주소" className="h-9" />
+              <Label className="text-xs">주소</Label>
+              <Input
+                value={subcontractorForm.address || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, address: e.target.value }))}
+                placeholder="주소"
+                className="h-9 text-sm"
+              />
             </div>
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setSubcontractorModalOpen(false)}>취소</Button>
             <Button onClick={handleSubcontractorSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+              {saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <Save className="h-4 w-4 mr-1.5" />}
+              저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* 품목 추가 모달 */}
+      {/* 품목 추가 모달 (1단계: 검색/선택) */}
       <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
-        <DialogContent className="max-w-3xl max-h-[70vh]" onInteractOutside={(e) => e.preventDefault()}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[780px] max-h-[85vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>품목 선택</DialogTitle>
-            <DialogDescription>외주업체에 추가할 품목을 선택하세요.</DialogDescription>
+            <DialogDescription>외주업체에 추가할 품목을 선택해요.</DialogDescription>
           </DialogHeader>
-          <div className="flex gap-2 mb-3">
-            <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
-              onChange={(e) => setItemSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && searchItems()}
-              className="h-9 flex-1" />
-            <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
-              {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
-            </Button>
-          </div>
-          <div className="overflow-auto max-h-[350px] border rounded-lg">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">
-                    <input type="checkbox"
-                      checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
-                      onChange={(e) => {
-                        if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
-                        else setItemCheckedIds(new Set());
-                      }} />
-                  </TableHead>
-                  <TableHead className="w-[120px]">품목코드</TableHead>
-                  <TableHead className="min-w-[140px]">품명</TableHead>
-                  <TableHead className="w-[100px]">규격</TableHead>
-                  <TableHead className="w-[100px]">재질</TableHead>
-                  <TableHead className="w-[60px]">단위</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {itemSearchResults.length === 0 ? (
-                  <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
-                ) : itemSearchResults.map((item) => (
-                  <TableRow key={item.id} className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
-                    onClick={() => setItemCheckedIds((prev) => {
-                      const next = new Set(prev);
-                      if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
-                      return next;
-                    })}>
-                    <TableCell className="text-center"><input type="checkbox" checked={itemCheckedIds.has(item.id)} readOnly /></TableCell>
-                    <TableCell className="text-xs max-w-[120px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
-                    <TableCell className="text-sm">{item.item_name}</TableCell>
-                    <TableCell className="text-xs">{item.size}</TableCell>
-                    <TableCell className="text-xs">{item.material}</TableCell>
-                    <TableCell className="text-xs">{item.unit}</TableCell>
+          <div className="space-y-3">
+            <div className="flex gap-2">
+              <Input
+                placeholder="품명/품목코드 검색"
+                value={itemSearchKeyword}
+                onChange={(e) => setItemSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchItems()}
+                className="h-9 flex-1 text-sm"
+              />
+              <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+                {itemSearchLoading
+                  ? <Loader2 className="h-4 w-4 animate-spin" />
+                  : <><Search className="h-4 w-4 mr-1" />조회</>}
+              </Button>
+            </div>
+            <div className="overflow-auto max-h-[350px] rounded-md border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[40px] text-center">
+                      <input
+                        type="checkbox"
+                        checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                        onChange={(e) => {
+                          if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                          else setItemCheckedIds(new Set());
+                        }}
+                        className="h-4 w-4"
+                      />
+                    </TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+                </TableHeader>
+                <TableBody>
+                  {itemSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : itemSearchResults.map((item) => (
+                    <TableRow
+                      key={item.id}
+                      className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                      onClick={() => setItemCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <input type="checkbox" checked={itemCheckedIds.has(item.id)} readOnly className="h-4 w-4" />
+                      </TableCell>
+                      <TableCell className="text-[13px]">{item.item_number}</TableCell>
+                      <TableCell className="text-[13px]">{item.item_name}</TableCell>
+                      <TableCell className="text-[13px]">{item.size}</TableCell>
+                      <TableCell className="text-[13px]">{item.material}</TableCell>
+                      <TableCell className="text-[13px]">{item.unit}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
           </div>
           <DialogFooter>
-            <div className="flex items-center gap-2 w-full justify-between">
+            <div className="flex items-center justify-between w-full">
               <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
               <div className="flex gap-2">
                 <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
                 <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
-                  <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+                  <Plus className="h-4 w-4 mr-1" />
+                  {itemCheckedIds.size}개 다음
                 </Button>
               </div>
             </div>
@@ -977,26 +1200,16 @@ export default function SubcontractorManagementPage() {
       </Dialog>
 
       {/* 품목 상세정보 입력 모달 (2단계) */}
-      <FullscreenDialog
-        open={itemDetailOpen}
-        onOpenChange={setItemDetailOpen}
-        title={`품목 상세정보 ${editItemData ? "수정" : "입력"} — ${selectedSubcontractor?.subcontractor_name || ""}`}
-        description={editItemData ? "외주 품번/품명과 기간별 단가를 수정합니다." : "선택한 품목의 외주 품번/품명과 기간별 단가를 설정합니다."}
-        defaultMaxWidth="max-w-[1100px]"
-        footer={
-          <>
-            <Button variant="outline" onClick={() => {
-              setItemDetailOpen(false);
-              if (!editItemData) setItemSelectOpen(true); // 신규일 때만 품목 선택으로 돌아감
-              setEditItemData(null);
-            }}>{editItemData ? "취소" : "← 이전"}</Button>
-            <Button onClick={handleItemDetailSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 품목 추가 완료
-            </Button>
-          </>
-        }
-      >
-
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedSubcontractor?.subcontractor_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData ? "외주 품번/품명과 기간별 단가를 수정해요" : "선택한 품목의 외주 품번/품명과 기간별 단가를 설정해요"}
+            </DialogDescription>
+          </DialogHeader>
           <div className="space-y-6 py-2">
             {selectedItemsForDetail.map((item, idx) => {
               const itemKey = item.item_number || item.id;
@@ -1007,13 +1220,13 @@ export default function SubcontractorManagementPage() {
                 <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
                   {/* 품목 헤더 */}
                   <div className="px-5 py-3 bg-muted/30 border-b">
-                    <div className="font-bold">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="font-semibold text-sm">{idx + 1}. {item.item_name || itemKey}</div>
                     <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
                   </div>
 
                   <div className="flex gap-4 p-4">
-                    {/* 좌: 외주 품번/품명 (다중) */}
-                    <div className="flex-1 border rounded-lg p-4 bg-blue-50/30 dark:bg-blue-950/10">
+                    {/* 좌: 외주 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/20">
                       <div className="flex items-center justify-between mb-3">
                         <span className="text-sm font-semibold">외주 품번/품명 관리</span>
                         <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
@@ -1022,18 +1235,23 @@ export default function SubcontractorManagementPage() {
                       </div>
                       <div className="space-y-2">
                         {mappingRows.length === 0 ? (
-                          <div className="text-xs text-muted-foreground py-2">입력된 외주 품번이 없습니다</div>
+                          <div className="text-xs text-muted-foreground py-2">입력된 외주 품번이 없어요</div>
                         ) : mappingRows.map((mRow, mIdx) => (
                           <div key={mRow._id} className="flex gap-2 items-center">
                             <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
-                            <Input value={mRow.subcontractor_item_code}
+                            <Input
+                              value={mRow.subcontractor_item_code}
                               onChange={(e) => updateMappingRow(itemKey, mRow._id, "subcontractor_item_code", e.target.value)}
-                              placeholder="외주 품번" className="h-8 text-sm flex-1" />
-                            <Input value={mRow.subcontractor_item_name}
+                              placeholder="외주 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.subcontractor_item_name}
                               onChange={(e) => updateMappingRow(itemKey, mRow._id, "subcontractor_item_name", e.target.value)}
-                              placeholder="외주 품명" className="h-8 text-sm flex-1" />
-                            <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
-                              onClick={() => removeMappingRow(itemKey, mRow._id)}>
+                              placeholder="외주 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0" onClick={() => removeMappingRow(itemKey, mRow._id)}>
                               <X className="h-3 w-3" />
                             </Button>
                           </div>
@@ -1042,39 +1260,41 @@ export default function SubcontractorManagementPage() {
                     </div>
 
                     {/* 우: 기간별 단가 */}
-                    <div className="flex-1 border rounded-lg p-4 bg-amber-50/30 dark:bg-amber-950/10">
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/20">
                       <div className="flex items-center justify-between mb-3">
                         <span className="text-sm font-semibold">기간별 단가 설정</span>
                         <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
                           <Plus className="h-3 w-3 mr-1" /> 단가 추가
                         </Button>
                       </div>
-
                       <div className="space-y-3">
                         {prices.map((price, pIdx) => (
                           <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
                             <div className="flex items-center justify-between">
                               <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
                               {prices.length > 1 && (
-                                <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
-                                  onClick={() => removePriceRow(itemKey, price._id)}>
+                                <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive" onClick={() => removePriceRow(itemKey, price._id)}>
                                   <X className="h-3 w-3" />
                                 </Button>
                               )}
                             </div>
                             {/* 기간 */}
                             <div className="flex gap-2 items-center">
-                              <div className="flex-1">
-                                <FormDatePicker value={price.start_date}
-                                  onChange={(v) => updatePriceRow(itemKey, price._id, "start_date", v)} placeholder="시작일" />
-                              </div>
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
                               <span className="text-xs text-muted-foreground">~</span>
-                              <div className="flex-1">
-                                <FormDatePicker value={price.end_date}
-                                  onChange={(v) => updatePriceRow(itemKey, price._id, "end_date", v)} placeholder="종료일" />
-                              </div>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
                               <div className="w-[80px]">
-                                <Select value={price.currency_code} onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}>
+                                <Select value={price.currency_code || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}>
                                   <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="통화" /></SelectTrigger>
                                   <SelectContent>
                                     {(priceCategoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
@@ -1085,30 +1305,36 @@ export default function SubcontractorManagementPage() {
                             {/* 기준가/할인/반올림 */}
                             <div className="flex gap-2 items-center">
                               <div className="w-[90px]">
-                                <Select value={price.base_price_type} onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준" /></SelectTrigger>
+                                <Select value={price.base_price_type || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
                                   <SelectContent>
                                     {(priceCategoryOptions["base_price_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
                                   </SelectContent>
                                 </Select>
                               </div>
-                              <Input value={price.base_price}
+                              <Input
+                                value={price.base_price}
                                 onChange={(e) => updatePriceRow(itemKey, price._id, "base_price", e.target.value)}
-                                className="h-8 text-xs text-right flex-1" placeholder="기준가" />
+                                className="h-8 text-xs text-right flex-1"
+                                placeholder="기준가"
+                              />
                               <div className="w-[90px]">
-                                <Select value={price.discount_type} onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <Select value={price.discount_type || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인유형" /></SelectTrigger>
                                   <SelectContent>
                                     <SelectItem value="none">할인없음</SelectItem>
                                     {(priceCategoryOptions["discount_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
                                   </SelectContent>
                                 </Select>
                               </div>
-                              <Input value={price.discount_value}
+                              <Input
+                                value={price.discount_value}
                                 onChange={(e) => updatePriceRow(itemKey, price._id, "discount_value", e.target.value)}
-                                className="h-8 text-xs text-right w-[60px]" placeholder="0" />
+                                className="h-8 text-xs text-right w-[60px]"
+                                placeholder="0"
+                              />
                               <div className="w-[90px]">
-                                <Select value={price.rounding_unit_value} onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}>
+                                <Select value={price.rounding_unit_value || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}>
                                   <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
                                   <SelectContent>
                                     {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
@@ -1116,7 +1342,7 @@ export default function SubcontractorManagementPage() {
                                 </Select>
                               </div>
                             </div>
-                            {/* 계산된 단가 표시 */}
+                            {/* 계산 단가 표시 */}
                             <div className="flex items-center justify-end gap-2 pt-1 border-t">
                               <span className="text-xs text-muted-foreground">계산 단가:</span>
                               <span className="font-bold text-sm">{price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}</span>
@@ -1130,8 +1356,24 @@ export default function SubcontractorManagementPage() {
               );
             })}
           </div>
-
-      </FullscreenDialog>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <Save className="h-4 w-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 엑셀 업로드 (멀티테이블) */}
       {excelChainConfig && (
@@ -1144,7 +1386,6 @@ export default function SubcontractorManagementPage() {
           config={excelChainConfig}
           onSuccess={() => {
             fetchSubcontractors();
-            // 우측 새로고침
             const cid = selectedSubcontractorId;
             setSelectedSubcontractorId(null);
             setTimeout(() => setSelectedSubcontractorId(cid), 50);
@@ -1152,12 +1393,15 @@ export default function SubcontractorManagementPage() {
         />
       )}
 
+      {/* 테이블 설정 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={SUBCONTRACTOR_TABLE}
-        settingsId="subcontractor-mng"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        includeAutoColumns={["created_date", "updated_date", "writer"]}
+        onSave={ts.applySettings}
       />
 
       {ConfirmDialogComponent}
diff --git a/frontend/app/(main)/COMPANY_29/production/bom/page.tsx b/frontend/app/(main)/COMPANY_29/production/bom/page.tsx
new file mode 100644
index 00000000..0563f47b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/production/bom/page.tsx
@@ -0,0 +1,2521 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  ChevronRight,
+  ChevronDown,
+  ChevronsDown,
+  ChevronsUp,
+  Plus,
+  Trash2,
+  Search,
+  Loader2,
+  Inbox,
+  Upload,
+  Download,
+  GitBranch,
+  History,
+  CheckCircle2,
+  RotateCcw,
+  X,
+  FileText,
+  Play,
+  Copy,
+  Settings2,
+  Save,
+  Package,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// ─── 상수 ───────────────────────────────────────
+const BOM_TABLE = "bom";
+const BOM_DETAIL_TABLE = "bom_detail";
+
+const BOM_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "bom_type", label: "BOM 유형" },
+  { key: "version", label: "버전" },
+  { key: "effective_date", label: "유효시작일" },
+  { key: "status", label: "상태" },
+];
+
+
+const STATUS_MAP: Record<string, { label: string; className: string }> = {
+  active: { label: "활성", className: "bg-success/10 text-success" },
+  draft: { label: "초안", className: "bg-warning/10 text-warning" },
+  expired: { label: "만료", className: "bg-destructive/10 text-destructive" },
+  inactive: { label: "비활성", className: "bg-muted text-muted-foreground" },
+};
+
+const VERSION_STATUS_MAP: Record<string, { label: string; className: string }> = {
+  active: { label: "사용중", className: "bg-success/10 text-success" },
+  developing: { label: "개발중", className: "bg-warning/10 text-warning" },
+  inactive: { label: "비활성", className: "bg-muted text-muted-foreground" },
+};
+
+const BOM_TYPE_OPTIONS = [
+  { code: "production", label: "생산 BOM" },
+  { code: "design", label: "설계 BOM" },
+  { code: "cost", label: "원가 BOM" },
+];
+
+// ─── 인터페이스 ─────────────────────────────────
+interface BomRow {
+  id: string;
+  item_id?: string;
+  item_code?: string;
+  item_name?: string;
+  bom_type?: string;
+  version?: string;
+  base_qty?: string;
+  unit?: string;
+  status?: string;
+  effective_date?: string;
+  expiry_date?: string;
+  remark?: string;
+  current_version_id?: string;
+  [key: string]: any;
+}
+
+interface BomDetail {
+  id: string;
+  bom_id: string;
+  version_id?: string;
+  parent_detail_id?: string | null;
+  child_item_id?: string;
+  item_number?: string;
+  item_name?: string;
+  item_type?: string;
+  quantity?: string;
+  unit?: string;
+  process_type?: string;
+  loss_rate?: string;
+  remark?: string;
+  level?: string;
+  seq_no?: string;
+  spec?: string;
+  writer?: string;
+  updated_date?: string;
+  [key: string]: any;
+}
+
+interface BomVersion {
+  id: string;
+  bom_id: string;
+  version_name: string;
+  revision?: number;
+  status: string;
+  created_by?: string;
+  created_date?: string;
+  detail_count?: number;
+}
+
+interface BomHistoryEntry {
+  id: string;
+  bom_id: string;
+  revision?: string;
+  version?: string;
+  change_type: string;
+  change_description?: string;
+  changed_by?: string;
+  changed_date?: string;
+}
+
+interface TreeNode extends BomDetail {
+  children: TreeNode[];
+  expanded?: boolean;
+  _isNew?: boolean;        // 신규 노드 (DB에 없음)
+  _isModified?: boolean;   // 수정된 노드
+  _tempId?: string;        // 임시 ID
+  _level?: number;         // flattenTree에서 사용
+  _isVirtualRoot?: boolean; // 가상 루트(BOM 마스터) 노드
+}
+
+// ─── 트리 구성 헬퍼 ─────────────────────────────
+function buildTree(details: BomDetail[]): TreeNode[] {
+  const nodeMap = new Map<string, TreeNode>();
+  const roots: TreeNode[] = [];
+
+  for (const d of details) {
+    nodeMap.set(d.id, { ...d, children: [], expanded: true });
+  }
+
+  for (const d of details) {
+    const node = nodeMap.get(d.id)!;
+    if (d.parent_detail_id && nodeMap.has(d.parent_detail_id)) {
+      nodeMap.get(d.parent_detail_id)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+
+  return roots;
+}
+
+function flattenTree(nodes: TreeNode[], level = 0): (TreeNode & { _level: number })[] {
+  const result: (TreeNode & { _level: number })[] = [];
+  for (const node of nodes) {
+    result.push({ ...node, _level: level });
+    if (node.expanded && node.children.length > 0) {
+      result.push(...flattenTree(node.children, level + 1));
+    }
+  }
+  return result;
+}
+
+// ─── 타입 뱃지 색상 ────────────────────────────
+// BOM 이력 변경 유형 색상
+const CHANGE_TYPE_STYLE: Record<string, string> = {
+  "등록": "bg-primary/10 text-primary ring-primary/20",
+  "수정": "bg-amber-50 text-amber-600 ring-amber-200",
+  "추가": "bg-emerald-50 text-emerald-600 ring-emerald-200",
+  "삭제": "bg-destructive/10 text-destructive ring-red-200",
+  "버전변경": "bg-blue-50 text-blue-600 ring-blue-200",
+  "excel_upload": "bg-blue-50 text-blue-600 ring-blue-200",
+};
+const CHANGE_TYPE_OPTIONS = ["등록", "수정", "추가", "삭제", "버전변경", "기타"];
+
+function getItemTypeBadge(type?: string) {
+  switch (type) {
+    case "원자재":
+    case "raw":
+      return { label: "원자재", className: "bg-success/10 text-success border-success/20" };
+    case "반제품":
+    case "semi":
+      return { label: "반제품", className: "bg-warning/10 text-warning border-warning/20" };
+    case "완제품":
+    case "finished":
+      return { label: "완제품", className: "bg-primary/10 text-primary border-primary/20" };
+    default:
+      return { label: type || "-", className: "bg-muted text-muted-foreground" };
+  }
+}
+
+// ─── 메인 컴포넌트 ──────────────────────────────
+export default function BomManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-bom", BOM_TABLE, BOM_COLUMNS);
+
+  // BOM 목록 상태
+  const [bomList, setBomList] = useState<BomRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [selectedBomId, setSelectedBomId] = useState<string | null>(null);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+
+  // 상세 데이터
+  const [bomHeader, setBomHeader] = useState<BomRow | null>(null);
+  const [bomDetails, setBomDetails] = useState<BomDetail[]>([]);
+  const [treeNodes, setTreeNodes] = useState<TreeNode[]>([]);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  // 트리 토글
+  const [treeDirection, setTreeDirection] = useState<"forward" | "reverse">("forward");
+  const [treeBasis, setTreeBasis] = useState<"material" | "process">("material");
+
+  // 버전 관리
+  const [versions, setVersions] = useState<BomVersion[]>([]);
+  const [currentVersionId, setCurrentVersionId] = useState<string | null>(null);
+  const [versionLoading, setVersionLoading] = useState(false);
+  const [newVersionName, setNewVersionName] = useState("");
+  const [showNewVersionDialog, setShowNewVersionDialog] = useState(false);
+
+  // 이력 관리
+  const [historyList, setHistoryList] = useState<BomHistoryEntry[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [showHistoryDialog, setShowHistoryDialog] = useState(false);
+  const [newHistory, setNewHistory] = useState({ change_type: "", change_description: "" });
+
+  // 등록 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [masterForm, setMasterForm] = useState<Record<string, any>>({
+    item_id: "",
+    item_code: "",
+    item_name: "",
+    bom_type: "",
+    base_qty: "1",
+    unit: "",
+    version: "1.0",
+    status: "draft",
+    effective_date: "",
+    expiry_date: "",
+    remark: "",
+  });
+  const [modalDetailRows, setModalDetailRows] = useState<any[]>([]);
+
+  // 품목 검색 모달
+  const [showItemSearchModal, setShowItemSearchModal] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSearchTarget, setItemSearchTarget] = useState<"master" | "detail">("master");
+
+  // 엑셀 업로드
+  const [showExcelUpload, setShowExcelUpload] = useState(false);
+  const [excelFile, setExcelFile] = useState<File | null>(null);
+  const [excelUploading, setExcelUploading] = useState(false);
+
+  // 우측 탭
+  const [rightTab, setRightTab] = useState<"tree" | "version" | "history">("tree");
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 트리 편집 state
+  const [editingTree, setEditingTree] = useState<TreeNode[]>([]);
+  const [treeHasChanges, setTreeHasChanges] = useState(false);
+
+  // 공정 마스터 목록
+  const [processOptions, setProcessOptions] = useState<{ code: string; label: string }[]>([]);
+  useEffect(() => {
+    apiClient.get("/process-info/processes?useYn=Y").then((res) => {
+      const list = res.data?.data || [];
+      setProcessOptions(list.map((p: any) => ({ code: p.process_code, label: `${p.process_name} (${p.process_code})` })));
+    }).catch(() => {});
+  }, []);
+
+  // 트리뷰 행 선택 / 수정 모달
+  const [selectedTreeNodeId, setSelectedTreeNodeId] = useState<string | null>(null);
+  const [editingNodeId, setEditingNodeId] = useState<string | null>(null);
+  const [treeEditModalOpen, setTreeEditModalOpen] = useState(false);
+  const [treeEditTarget, setTreeEditTarget] = useState<TreeNode | null>(null);
+  const [treeEditForm, setTreeEditForm] = useState<Record<string, any>>({});
+
+  // 역전개 (Where Used)
+  const [treeViewMode, setTreeViewMode] = useState<"forward" | "reverse">("forward");
+  const [whereUsedData, setWhereUsedData] = useState<any[]>([]);
+  const [whereUsedLoading, setWhereUsedLoading] = useState(false);
+  const [originalDetailIds, setOriginalDetailIds] = useState<Set<string>>(new Set());
+  const [addTargetParentId, setAddTargetParentId] = useState<string | null>(null);
+  const [treeItemSearchOpen, setTreeItemSearchOpen] = useState(false);
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+  // ─── 데이터 로드 ──────────────────────────────
+  const fetchBomList = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+
+      const res = await apiClient.post(`/table-management/tables/${BOM_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "created_at", order: "desc" },
+      });
+
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setBomList(rows);
+      setTotalCount(rows.length);
+    } catch (err: any) {
+      toast.error("BOM 목록 조회에 실패했어요");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchBomList();
+  }, [fetchBomList]);
+
+  // 카테고리 옵션 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      try {
+        const columns = ["bom_type", "status"];
+        const detailColumns = ["process_type"];
+        const results: Record<string, { code: string; label: string }[]> = {};
+
+        for (const col of columns) {
+          try {
+            const res = await apiClient.get(`/table-categories/${BOM_TABLE}/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              const flatten = (items: any[]): { code: string; label: string }[] => {
+                const result: { code: string; label: string }[] = [];
+                for (const item of items) {
+                  result.push({ code: item.value || item.code, label: item.label || item.value });
+                  if (item.children?.length) {
+                    result.push(...flatten(item.children));
+                  }
+                }
+                return result;
+              };
+              results[col] = flatten(res.data.data);
+            }
+          } catch {}
+        }
+
+        // bom_detail 테이블의 카테고리
+        for (const col of detailColumns) {
+          try {
+            const res = await apiClient.get(`/table-categories/bom_detail/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              const flatten = (items: any[]): { code: string; label: string }[] => {
+                const result: { code: string; label: string }[] = [];
+                for (const item of items) {
+                  result.push({ code: item.value || item.code, label: item.label || item.value });
+                  if (item.children?.length) result.push(...flatten(item.children));
+                }
+                return result;
+              };
+              results[col] = flatten(res.data.data);
+            }
+          } catch {}
+        }
+
+        // item_info의 division 카테고리
+        try {
+          const res = await apiClient.get(`/table-categories/item_info/division/values`);
+          if (res.data?.data?.length > 0) {
+            const flatten = (items: any[]): { code: string; label: string }[] => {
+              const result: { code: string; label: string }[] = [];
+              for (const item of items) {
+                result.push({ code: item.valueCode || item.value || item.code, label: item.valueLabel || item.label || item.value });
+                if (item.children?.length) result.push(...flatten(item.children));
+              }
+              return result;
+            };
+            results["division"] = flatten(res.data.data);
+          }
+        } catch {}
+
+        setCategoryOptions(results);
+      } catch {}
+    };
+    loadCategories();
+  }, []);
+
+  // ─── BOM 상세 로드 ────────────────────────────
+  const fetchBomDetail = useCallback(async (bomId: string) => {
+    setDetailLoading(true);
+    try {
+      // 헤더 조회
+      const headerRes = await apiClient.get(`/bom/${bomId}/header`);
+      const header = headerRes.data?.data || headerRes.data;
+      setBomHeader(header);
+      setCurrentVersionId(header?.current_version_id || null);
+
+      // 디테일 조회 (현재 버전)
+      const versionId = header?.current_version_id;
+      const detailFilters: any[] = [{ columnName: "bom_id", operator: "equals", value: bomId }];
+      if (versionId) {
+        detailFilters.push({ columnName: "version_id", operator: "equals", value: versionId });
+      }
+
+      const detailRes = await apiClient.post(`/table-management/tables/${BOM_DETAIL_TABLE}/data`, {
+        page: 1,
+        size: 1000,
+        dataFilter: { enabled: true, filters: detailFilters },
+        sort: { columnName: "parent_detail_id", order: "asc" },
+      });
+
+      let details = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+
+      // item_info 조인을 위해 child_item_id 수집
+      const itemIds = [...new Set(details.map((d: any) => d.child_item_id).filter(Boolean))];
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1,
+            size: 1000,
+            dataFilter: {
+              enabled: true,
+              filters: [{ columnName: "id", operator: "in", value: itemIds }],
+            },
+          });
+          const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+          const itemMap = new Map(items.map((i: any) => [i.id, i]));
+
+          details = details.map((d: any) => {
+            const item = itemMap.get(d.child_item_id) as any;
+            const divisionRaw = item?.division || "";
+            // 카테고리 코드 → 라벨 변환 (쉼표 구분 다중값 지원)
+            const divisionLabel = divisionRaw.split(",").map((code: string) => {
+              const c = code.trim();
+              return categoryOptions["division"]?.find((o) => o.code === c)?.label || c;
+            }).filter((v: string) => v && v !== "s").join(", ");
+            return {
+              ...d,
+              item_number: item?.item_number || "",
+              item_name: item?.item_name || "",
+              item_type: divisionLabel,
+              unit: d.unit || item?.unit || "",
+              spec: item?.size || item?.spec || "",
+              writer: d.writer || "",
+              updated_date: d.updated_at || d.updated_date || "",
+            };
+          });
+        } catch {}
+      }
+
+      setBomDetails(details);
+      const tree = buildTree(details);
+      setTreeNodes(tree);
+
+      // 편집용 트리 동기화
+      setEditingTree(buildTree(details));
+      setOriginalDetailIds(new Set(details.map((d: any) => d.id)));
+      setTreeHasChanges(false);
+      // 기본 전개: 모든 노드 + 가상 루트 펼침
+      const allIds = new Set<string>();
+      if (header?.id) allIds.add(`__root_${header.id}`);
+      const collectIds = (nodes: TreeNode[]) => {
+        for (const n of nodes) {
+          allIds.add(n.id || "");
+          if (n.children.length > 0) collectIds(n.children);
+        }
+      };
+      collectIds(tree);
+      setExpandedNodes(allIds);
+    } catch (err: any) {
+      toast.error("BOM 상세 조회에 실패했어요");
+    } finally {
+      setDetailLoading(false);
+    }
+  }, [categoryOptions]);
+
+  // 버전 목록 로드
+  const fetchVersions = useCallback(async (bomId: string) => {
+    setVersionLoading(true);
+    try {
+      const res = await apiClient.get(`/bom/${bomId}/versions`);
+      const resData = res.data;
+      setVersions(resData?.data || []);
+      setCurrentVersionId(resData?.currentVersionId || null);
+    } catch (err: any) {
+      toast.error("버전 목록 조회에 실패했어요");
+    } finally {
+      setVersionLoading(false);
+    }
+  }, []);
+
+  // 이력 목록 로드
+  const fetchHistory = useCallback(async (bomId: string) => {
+    setHistoryLoading(true);
+    try {
+      const res = await apiClient.get(`/bom/${bomId}/history`);
+      setHistoryList(res.data?.data || []);
+    } catch (err: any) {
+      toast.error("이력 조회에 실패했어요");
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, []);
+
+  // BOM 선택 시 상세 로드
+  useEffect(() => {
+    if (selectedBomId) {
+      fetchBomDetail(selectedBomId);
+      if (rightTab === "version") fetchVersions(selectedBomId);
+      if (rightTab === "history") fetchHistory(selectedBomId);
+    } else {
+      setBomHeader(null);
+      setBomDetails([]);
+      setTreeNodes([]);
+      setEditingTree([]);
+      setTreeHasChanges(false);
+      setOriginalDetailIds(new Set());
+      setExpandedNodes(new Set());
+      setVersions([]);
+      setHistoryList([]);
+    }
+  }, [selectedBomId, fetchBomDetail, fetchVersions, fetchHistory, rightTab]);
+
+  // ─── 트리 토글 핸들러 ─────────────────────────
+  const toggleTreeNode = useCallback((nodeId: string) => {
+    const toggle = (nodes: TreeNode[]): TreeNode[] =>
+      nodes.map((n) =>
+        n.id === nodeId
+          ? { ...n, expanded: !n.expanded }
+          : { ...n, children: toggle(n.children) }
+      );
+    setTreeNodes((prev) => toggle(prev));
+  }, []);
+
+  const flatTree = useMemo(() => flattenTree(treeNodes), [treeNodes]);
+
+  // ─── 트리 편집 헬퍼 ──────────────────────────
+
+  // 트리 노드 토글 (펼침/접음)
+  const toggleEditTreeNode = useCallback((nodeId: string) => {
+    setExpandedNodes((prev) => {
+      const next = new Set(prev);
+      if (next.has(nodeId)) next.delete(nodeId);
+      else next.add(nodeId);
+      return next;
+    });
+  }, []);
+
+  // 전체 펼침
+  const expandAll = useCallback(() => {
+    const allIds = new Set<string>();
+    if (bomHeader?.id) allIds.add(`__root_${bomHeader.id}`);
+    const collect = (nodes: TreeNode[]) => {
+      for (const n of nodes) {
+        allIds.add(n.id || n._tempId || "");
+        if (n.children.length > 0) collect(n.children);
+      }
+    };
+    collect(editingTree);
+    setExpandedNodes(allIds);
+  }, [editingTree, bomHeader]);
+
+  // 역전개 (Where Used) 조회 — 현재 BOM 품목이 어디에 사용되는지
+  const fetchWhereUsed = useCallback(async () => {
+    if (!bomHeader?.item_code && !bomHeader?.item_id) return;
+    setWhereUsedLoading(true);
+    try {
+      // bom_detail에서 child_item_id가 현재 품목인 행 조회
+      const itemId = bomHeader.item_id || bomHeader.id;
+      const res = await apiClient.post(`/table-management/tables/bom_detail/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "child_item_id", operator: "equals", value: itemId }] },
+        autoFilter: true,
+      });
+      const details = res.data?.data?.data || res.data?.data?.rows || [];
+
+      // 각 bom_id로 BOM 마스터 정보 조회
+      const bomIds = [...new Set(details.map((d: any) => d.bom_id).filter(Boolean))];
+      const results: any[] = [];
+      for (const bomId of bomIds) {
+        try {
+          const bomRes = await apiClient.post(`/table-management/tables/bom/data`, {
+            page: 1, size: 1,
+            dataFilter: { enabled: true, filters: [{ columnName: "id", operator: "equals", value: bomId }] },
+            autoFilter: true,
+          });
+          const bom = (bomRes.data?.data?.data || bomRes.data?.data?.rows || [])[0];
+          if (bom) {
+            const detail = details.find((d: any) => d.bom_id === bomId);
+            results.push({
+              bom_id: bomId,
+              item_code: bom.item_code || bom.item_number || "",
+              item_name: bom.item_name || "",
+              quantity: detail?.quantity || "1",
+              unit: detail?.unit || "",
+              process_type: detail?.process_type || "",
+            });
+          }
+        } catch {}
+      }
+      setWhereUsedData(results);
+    } catch {
+      setWhereUsedData([]);
+    } finally {
+      setWhereUsedLoading(false);
+    }
+  }, [bomHeader]);
+
+  // 전체 접음
+  const collapseAll = useCallback(() => {
+    // 루트는 항상 펼침 유지, 나머지만 접음
+    const rootOnly = new Set<string>();
+    if (bomHeader?.id) rootOnly.add(`__root_${bomHeader.id}`);
+    setExpandedNodes(rootOnly);
+  }, [bomHeader]);
+
+  // 편집 트리 평탄화 (useMemo) — 가상 루트(BOM 마스터) 포함
+  const editingFlatTree = useMemo(() => {
+    const result: TreeNode[] = [];
+    // 가상 루트 (BOM 마스터)
+    if (bomHeader) {
+      const rootId = `__root_${bomHeader.id}`;
+      result.push({
+        id: rootId,
+        bom_id: bomHeader.id,
+        _tempId: undefined,
+        _isNew: false,
+        _isModified: false,
+        _level: 0,
+        _isVirtualRoot: true,
+        item_number: bomHeader.item_code || bomHeader.item_number || "",
+        item_name: bomHeader.item_name || "",
+        quantity: bomHeader.base_qty || "1",
+        unit: bomHeader.unit || "",
+        process_type: "",
+        loss_rate: "",
+        remark: bomHeader.remark || "",
+        spec: "",
+        writer: "",
+        updated_date: "",
+        item_type: "",
+        children: editingTree,
+      } as any);
+    }
+    // 하위 노드 평탄화 (레벨 +1)
+    const flatten = (nodes: TreeNode[], level: number) => {
+      for (const node of nodes) {
+        const nodeKey = node.id || node._tempId || "";
+        result.push({ ...node, _level: level });
+        if (node.children.length > 0 && expandedNodes.has(nodeKey)) {
+          flatten(node.children, level + 1);
+        }
+      }
+    };
+    const rootId = bomHeader ? `__root_${bomHeader.id}` : "";
+    if (!bomHeader || expandedNodes.has(rootId)) {
+      flatten(editingTree, bomHeader ? 1 : 0);
+    }
+    return result;
+  }, [editingTree, expandedNodes, bomHeader]);
+
+  // 트리에서 노드를 찾아서 업데이트
+  const updateTreeNode = (tree: TreeNode[], nodeId: string, updater: (node: TreeNode) => TreeNode): TreeNode[] => {
+    return tree.map(node => {
+      if ((node.id || node._tempId) === nodeId) return updater(node);
+      if (node.children.length > 0) return { ...node, children: updateTreeNode(node.children, nodeId, updater) };
+      return node;
+    });
+  };
+
+  // 트리에서 노드 삭제 (하위 포함)
+  const removeTreeNode = (tree: TreeNode[], nodeId: string): TreeNode[] => {
+    return tree.filter(node => {
+      if ((node.id || node._tempId) === nodeId) return false;
+      if (node.children.length > 0) node.children = removeTreeNode(node.children, nodeId);
+      return true;
+    });
+  };
+
+  // 트리에 자식 노드 추가
+  const addChildToNode = (tree: TreeNode[], parentId: string | null, newNode: TreeNode): TreeNode[] => {
+    if (parentId === null) return [...tree, newNode];
+    return tree.map(node => {
+      const nodeKey = node.id || node._tempId;
+      if (nodeKey === parentId) {
+        return { ...node, children: [...node.children, newNode], expanded: true };
+      }
+      if (node.children.length > 0) return { ...node, children: addChildToNode(node.children, parentId, newNode) };
+      return node;
+    });
+  };
+
+  // 노드 찾기 헬퍼
+  const findNodeById = (nodes: TreeNode[], id: string): TreeNode | null => {
+    for (const node of nodes) {
+      if ((node.id || node._tempId) === id) return node;
+      const found = findNodeById(node.children, id);
+      if (found) return found;
+    }
+    return null;
+  };
+
+  // 인라인 필드 변경
+  const handleTreeFieldChange = (nodeId: string, field: string, value: string) => {
+    setEditingTree(prev => updateTreeNode(prev, nodeId, node => ({
+      ...node, [field]: value, _isModified: !node._isNew ? true : node._isModified,
+    })));
+    setTreeHasChanges(true);
+  };
+
+  // 노드 삭제
+  const handleTreeDeleteNode = async (nodeId: string) => {
+    if (!await confirm("이 품목과 하위 품목을 삭제할까요?", { variant: "destructive" })) return;
+    setEditingTree(prev => removeTreeNode(prev, nodeId));
+    setTreeHasChanges(true);
+  };
+
+  // 하위 품목 추가 시작
+  const handleTreeAddChild = (parentId: string | null) => {
+    setAddTargetParentId(parentId);
+    setTreeItemSearchOpen(true);
+    searchItems("");
+  };
+
+  // 트리 품목 선택 완료 (트리에 추가)
+  const handleTreeItemSelect = (item: any) => {
+    // 1. 자기 자신 추가 방지 (BOM 마스터 품목과 동일한 품목)
+    if (bomHeader && (item.id === bomHeader.item_id || item.item_number === bomHeader.item_code)) {
+      toast.error("자기 자신을 BOM에 추가할 수 없습니다");
+      return;
+    }
+
+    // 2. 같은 경로에 동일 품목 중복 방지 (조상 노드에 같은 품목이 있으면 순환)
+    const getAncestorItemIds = (tree: TreeNode[], targetId: string | null): Set<string> => {
+      const ids = new Set<string>();
+      if (!targetId) return ids;
+      const collectPath = (nodes: TreeNode[], path: TreeNode[]): boolean => {
+        for (const n of nodes) {
+          const nk = n.id || n._tempId || "";
+          if (nk === targetId) {
+            path.forEach(p => { if (p.child_item_id) ids.add(p.child_item_id); });
+            if (n.child_item_id) ids.add(n.child_item_id);
+            return true;
+          }
+          if (n.children.length > 0 && collectPath(n.children, [...path, n])) return true;
+        }
+        return false;
+      };
+      collectPath(tree, []);
+      return ids;
+    };
+    const ancestorIds = getAncestorItemIds(editingTree, addTargetParentId);
+    if (ancestorIds.has(item.id)) {
+      toast.error("상위 경로에 이미 동일 품목이 있어 순환 참조가 발생합니다");
+      return;
+    }
+
+    const tempId = `temp_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+    const parentNode = addTargetParentId ? findNodeById(editingTree, addTargetParentId) : null;
+    const newLevel = parentNode ? ((parentNode._level ?? parentNode.level ?? 0) as number) + 1 : 0;
+
+    const newNode: TreeNode = {
+      id: "",
+      _tempId: tempId,
+      _isNew: true,
+      bom_id: selectedBomId || "",
+      parent_detail_id: addTargetParentId,
+      child_item_id: item.id,
+      item_number: item.item_number || "",
+      item_name: item.item_name || "",
+      item_type: item.division || "",
+      level: String(newLevel),
+      quantity: "1",
+      unit: item.unit || "",
+      process_type: "",
+      loss_rate: "0",
+      remark: "",
+      children: [],
+      expanded: true,
+    };
+
+    setEditingTree(prev => addChildToNode(prev, addTargetParentId, newNode));
+    setExpandedNodes(prev => {
+      const next = new Set(prev);
+      next.add(tempId);
+      if (addTargetParentId) next.add(addTargetParentId);
+      return next;
+    });
+    setTreeHasChanges(true);
+    setTreeItemSearchOpen(false);
+  };
+
+  // ─── 트리 저장 ────────────────────────────────
+  const handleSaveTree = async () => {
+    if (!selectedBomId || !treeHasChanges) return;
+
+    setSaving(true);
+    try {
+      // 1. version_id 확보
+      let versionId = currentVersionId;
+      if (!versionId) {
+        const initRes = await apiClient.post(`/bom/${selectedBomId}/initialize-version`, {});
+        versionId = initRes.data?.data?.versionId;
+      }
+
+      // 2. 트리 평탄화
+      const flatNodes: any[] = [];
+      const flattenForSave = (nodes: TreeNode[], parentId: string | null, level: number) => {
+        nodes.forEach((node, idx) => {
+          const nodeKey = node.id || node._tempId || "";
+          flatNodes.push({
+            ...node,
+            _nodeKey: nodeKey,
+            parent_detail_id: parentId,
+            level: String(level),
+            seq_no: String(idx + 1),
+            bom_id: selectedBomId,
+            version_id: versionId,
+          });
+          if (node.children.length > 0) flattenForSave(node.children, nodeKey, level + 1);
+        });
+      };
+      flattenForSave(editingTree, null, 0);
+
+      // 3. 분류: INSERT / UPDATE / DELETE
+      const currentIds = new Set(flatNodes.filter(n => n.id && !n._isNew).map(n => n.id));
+      const toDelete = [...originalDetailIds].filter(id => !currentIds.has(id));
+      const toInsert = flatNodes.filter(n => n._isNew);
+      const toUpdate = flatNodes.filter(n => n.id && !n._isNew && n._isModified);
+
+      // 4. DELETE
+      if (toDelete.length > 0) {
+        await apiClient.delete(`/table-management/tables/bom_detail/delete`, {
+          data: toDelete.map(id => ({ id })),
+        });
+      }
+
+      // 5. INSERT (순서 중요: 부모 먼저)
+      const tempToRealId: Record<string, string> = {};
+      for (const node of toInsert) {
+        let parentId = node.parent_detail_id;
+        if (parentId && tempToRealId[parentId]) parentId = tempToRealId[parentId];
+
+        const newId = crypto.randomUUID();
+        const res = await apiClient.post(`/table-management/tables/bom_detail/add`, {
+          id: newId,
+          bom_id: selectedBomId,
+          version_id: versionId,
+          parent_detail_id: parentId && !parentId.startsWith("temp_") ? parentId : null,
+          child_item_id: node.child_item_id,
+          level: node.level,
+          seq_no: node.seq_no,
+          quantity: node.quantity || "1",
+          unit: node.unit || "",
+          process_type: node.process_type || "",
+          loss_rate: node.loss_rate || "0",
+          remark: node.remark || "",
+          writer: user?.userId || "",
+          company_code: user?.company_code || "",
+        });
+
+        const realId = res.data?.data?.id || newId;
+        if (node._tempId) tempToRealId[node._tempId] = realId;
+      }
+
+      // 6. INSERT된 노드의 자식들 parent_detail_id 업데이트
+      for (const node of toInsert) {
+        if (!node._tempId) continue;
+        const childNodes = flatNodes.filter(n => n.parent_detail_id === node._tempId);
+        for (const child of childNodes) {
+          if (child.id && !child._isNew && tempToRealId[node._tempId]) {
+            await apiClient.put(`/table-management/tables/bom_detail/edit`, {
+              originalData: { id: child.id },
+              updatedData: { parent_detail_id: tempToRealId[node._tempId] },
+            });
+          }
+        }
+      }
+
+      // 7. UPDATE
+      for (const node of toUpdate) {
+        let parentId = node.parent_detail_id;
+        if (parentId && tempToRealId[parentId]) parentId = tempToRealId[parentId];
+
+        await apiClient.put(`/table-management/tables/bom_detail/edit`, {
+          originalData: { id: node.id },
+          updatedData: {
+            bom_id: selectedBomId,
+            version_id: versionId,
+            quantity: node.quantity,
+            unit: node.unit,
+            process_type: node.process_type,
+            loss_rate: node.loss_rate,
+            remark: node.remark,
+            level: node.level,
+            seq_no: node.seq_no,
+            parent_detail_id: parentId,
+          },
+        });
+      }
+
+      // 이력 자동 기록 (변경 내용 상세)
+      const historyParts: string[] = [];
+      // 추가된 품목
+      for (const n of toInsert) {
+        historyParts.push(`${n.item_number || "품목"} 추가 (소요량: ${n.quantity || 1})`);
+      }
+      // 수정된 품목 (변경 전후 비교)
+      for (const n of toUpdate) {
+        const orig = bomDetails.find((d: any) => d.id === n.id);
+        if (orig) {
+          const changes: string[] = [];
+          if (String(orig.quantity || "") !== String(n.quantity || "")) changes.push(`소요량 ${orig.quantity || "-"} → ${n.quantity || "-"}`);
+          if (String(orig.process_type || "") !== String(n.process_type || "")) changes.push(`공정 변경`);
+          if (String(orig.loss_rate || "") !== String(n.loss_rate || "")) changes.push(`손실율 ${orig.loss_rate || "0"} → ${n.loss_rate || "0"}`);
+          if (String(orig.remark || "") !== String(n.remark || "")) changes.push(`비고 변경`);
+          if (changes.length > 0) historyParts.push(`${n.item_number || "품목"}: ${changes.join(", ")}`);
+        }
+      }
+      // 삭제된 품목
+      for (const id of toDelete) {
+        const orig = bomDetails.find((d: any) => d.id === id);
+        historyParts.push(`${orig?.item_number || "품목"} 삭제`);
+      }
+      if (historyParts.length > 0) {
+        apiClient.post(`/bom/${selectedBomId}/history`, {
+          change_type: historyParts.some(p => p.includes("추가")) ? "추가" : historyParts.some(p => p.includes("삭제")) ? "삭제" : "수정",
+          change_description: historyParts.join("; "),
+        }).catch(() => {});
+      }
+
+      toast.success("BOM 트리가 저장되었어요");
+      setTreeHasChanges(false);
+      fetchBomDetail(selectedBomId);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "트리 저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ─── BOM 삭제 ────────────────────────────────
+  const handleDeleteBom = async () => {
+    if (checkedIds.length === 0) {
+      toast.error("삭제할 BOM을 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`선택한 ${checkedIds.length}건의 BOM을 삭제할까요?`);
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${BOM_TABLE}/delete`, {
+        data: checkedIds.map((id) => ({ id })),
+      });
+      toast.success("BOM이 삭제되었어요");
+      setCheckedIds([]);
+      setSelectedBomId(null);
+      fetchBomList();
+    } catch {
+      toast.error("BOM 삭제에 실패했어요");
+    }
+  };
+
+  // ─── BOM 등록/수정 ───────────────────────────
+  const openCreateModal = () => {
+    setIsEditMode(false);
+    setMasterForm({
+      item_id: "",
+      item_code: "",
+      item_name: "",
+      bom_type: "",
+      base_qty: "1",
+      unit: "",
+      version: "1.0",
+      status: "draft",
+      effective_date: "",
+      expiry_date: "",
+      remark: "",
+    });
+    setModalDetailRows([]);
+    setIsModalOpen(true);
+  };
+
+  const openEditModal = () => {
+    if (!bomHeader) return;
+    setIsEditMode(true);
+    setMasterForm({
+      id: bomHeader.id,
+      item_id: bomHeader.item_id || "",
+      item_code: bomHeader.item_code || bomHeader.item_number || "",
+      item_name: bomHeader.item_name || "",
+      bom_type: bomHeader.bom_type || "",
+      base_qty: bomHeader.base_qty || "1",
+      unit: bomHeader.unit || "",
+      version: bomHeader.version || "1.0",
+      status: bomHeader.status || "draft",
+      effective_date: bomHeader.effective_date || "",
+      expiry_date: bomHeader.expiry_date || "",
+      remark: bomHeader.remark || "",
+    });
+
+    setModalDetailRows(
+      bomDetails.map((d, i) => ({
+        _idx: i,
+        child_item_id: d.child_item_id || "",
+        item_number: d.item_number || "",
+        item_name: d.item_name || "",
+        quantity: d.quantity || "1",
+        unit: d.unit || "",
+        process_type: d.process_type || "",
+        loss_rate: d.loss_rate || "0",
+        remark: d.remark || "",
+      }))
+    );
+    setIsModalOpen(true);
+  };
+
+  const handleSaveBom = async () => {
+    if (!masterForm.item_id) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+    if (!masterForm.bom_type) {
+      toast.error("BOM 유형을 선택해주세요");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const bomFields: Record<string, any> = {
+        item_id: masterForm.item_id,
+        item_code: masterForm.item_code,
+        item_name: masterForm.item_name,
+        bom_type: masterForm.bom_type,
+        base_qty: masterForm.base_qty || "1",
+        unit: masterForm.unit || "",
+        version: masterForm.version || "1.0",
+        status: masterForm.status || "draft",
+        effective_date: masterForm.effective_date || null,
+        expiry_date: masterForm.expiry_date || null,
+        remark: masterForm.remark || "",
+        writer: user?.userId || "",
+        company_code: user?.company_code || "",
+      };
+
+      let bomId: string;
+
+      if (isEditMode && masterForm.id) {
+        await apiClient.put(`/table-management/tables/${BOM_TABLE}/edit`, {
+          originalData: { id: masterForm.id },
+          updatedData: bomFields,
+        });
+        bomId = masterForm.id;
+      } else {
+        const res = await apiClient.post(`/table-management/tables/${BOM_TABLE}/add`, { id: crypto.randomUUID(), ...bomFields });
+        bomId = res.data?.data?.id || res.data?.id;
+      }
+
+      // 초기 버전 생성 (신규 BOM)
+      if (!isEditMode && bomId) {
+        try {
+          await apiClient.post(`/bom/${bomId}/initialize-version`, {});
+        } catch {}
+      }
+
+      // 디테일 저장: 기존 삭제 후 재등록
+      if (isEditMode && masterForm.id) {
+        const existingDetails = bomDetails.filter((d) => d.bom_id === bomId);
+        if (existingDetails.length > 0) {
+          await apiClient.delete(`/table-management/tables/${BOM_DETAIL_TABLE}/delete`, {
+            data: existingDetails.map((d) => ({ id: d.id })),
+          });
+        }
+      }
+
+      // 현재 버전 ID 가져오기
+      let versionId = currentVersionId;
+      if (!versionId && bomId) {
+        try {
+          const verRes = await apiClient.get(`/bom/${bomId}/versions`);
+          const verData = verRes.data?.data || verRes.data;
+          versionId = verData?.currentVersionId || null;
+        } catch {}
+      }
+
+      for (let i = 0; i < modalDetailRows.length; i++) {
+        const row = modalDetailRows[i];
+        if (!row.child_item_id) continue;
+        await apiClient.post(`/table-management/tables/${BOM_DETAIL_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          bom_id: bomId,
+          version_id: versionId || null,
+          parent_detail_id: null,
+          child_item_id: row.child_item_id,
+          quantity: row.quantity || "1",
+          unit: row.unit || "",
+          process_type: row.process_type || "",
+          loss_rate: row.loss_rate || "0",
+          remark: row.remark || "",
+          level: "0",
+          seq_no: String(i + 1),
+          writer: user?.userId || "",
+          company_code: user?.company_code || "",
+        });
+      }
+
+      toast.success(isEditMode ? "BOM이 수정되었어요" : "BOM이 등록되었어요");
+      setIsModalOpen(false);
+      fetchBomList();
+      if (bomId) {
+        setSelectedBomId(bomId);
+        fetchBomDetail(bomId);
+        fetchVersions(bomId);
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "BOM 저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ─── 품목 검색 ───────────────────────────────
+  const searchItems = async (keyword?: string) => {
+    const kw = (keyword ?? itemSearchKeyword).trim();
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (kw) {
+        filters.push({ columnName: "item_name", operator: "contains", value: kw });
+      }
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1,
+        size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      let rows = res.data?.data?.data || res.data?.data?.rows || [];
+
+      // 키워드가 있고 품명으로 못 찾으면 품목코드로 재시도
+      if (kw && rows.length === 0) {
+        const res2 = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 50,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "contains", value: kw }] },
+          autoFilter: true,
+        });
+        rows = res2.data?.data?.data || res2.data?.data?.rows || [];
+      }
+      setItemSearchResults(rows);
+    } catch {
+      toast.error("품목 검색에 실패했어요");
+    } finally {
+      setItemSearchLoading(false);
+    }
+  };
+
+  const selectItem = (item: any) => {
+    if (itemSearchTarget === "master") {
+      setMasterForm((prev) => ({
+        ...prev,
+        item_id: item.id,
+        item_code: item.item_number || "",
+        item_name: item.item_name || "",
+        unit: item.unit || prev.unit,
+      }));
+      setShowItemSearchModal(false);
+    } else {
+      setModalDetailRows((prev) => [
+        ...prev,
+        {
+          _idx: prev.length,
+          child_item_id: item.id,
+          item_number: item.item_number || "",
+          item_name: item.item_name || "",
+          quantity: "1",
+          unit: item.unit || "",
+          process_type: "",
+          loss_rate: "0",
+          remark: "",
+        },
+      ]);
+      setShowItemSearchModal(false);
+    }
+    setItemSearchKeyword("");
+    setItemSearchResults([]);
+  };
+
+  // ─── 버전 관리 ───────────────────────────────
+  const handleCreateVersion = async () => {
+    if (!selectedBomId) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions`, {
+        versionName: newVersionName.trim() || undefined,
+      });
+      apiClient.post(`/bom/${selectedBomId}/history`, { change_type: "버전변경", change_description: `새 버전 생성: ${newVersionName.trim() || "자동"}` }).catch(() => {});
+      toast.success("새 버전이 생성되었어요");
+      setShowNewVersionDialog(false);
+      setNewVersionName("");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 생성에 실패했어요");
+    }
+  };
+
+  const handleLoadVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions/${versionId}/load`);
+      toast.success("버전을 불러왔어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 불러오기에 실패했어요");
+    }
+  };
+
+  const handleActivateVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    const ok = await confirm("이 버전을 사용 확정할까요? 기존 활성 버전은 비활성 처리돼요.");
+    if (!ok) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions/${versionId}/activate`);
+      apiClient.post(`/bom/${selectedBomId}/history`, { change_type: "버전변경", change_description: `버전 사용 확정` }).catch(() => {});
+      toast.success("버전이 사용 확정되었어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 확정에 실패했어요");
+    }
+  };
+
+  const handleDeleteVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    const ok = await confirm("이 버전을 삭제할까요? 관련 디테일 데이터도 함께 삭제돼요.");
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/bom/${selectedBomId}/versions/${versionId}`);
+      toast.success("버전이 삭제되었어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 이력 관리 ───────────────────────────────
+  const handleAddHistory = async () => {
+    if (!selectedBomId) return;
+    if (!newHistory.change_type) {
+      toast.error("변경 유형을 입력해주세요");
+      return;
+    }
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/history`, {
+        change_type: newHistory.change_type,
+        change_description: newHistory.change_description,
+        changed_by: user?.userId || "",
+      });
+      toast.success("이력이 추가되었어요");
+      setShowHistoryDialog(false);
+      setNewHistory({ change_type: "", change_description: "" });
+      fetchHistory(selectedBomId);
+    } catch (err: any) {
+      toast.error("이력 추가에 실패했어요");
+    }
+  };
+
+  // ─── 엑셀 업로드 ────────────────────────────
+  const handleExcelUpload = async () => {
+    if (!excelFile) {
+      toast.error("엑셀 파일을 선택해주세요");
+      return;
+    }
+    setExcelUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", excelFile);
+
+      const endpoint = selectedBomId
+        ? `/bom/${selectedBomId}/excel-upload-version`
+        : `/bom/excel-upload`;
+
+      const res = await apiClient.post(endpoint, formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+
+      const result = res.data?.data || res.data;
+      if (result?.success) {
+        toast.success(`엑셀 업로드 완료 (${result.insertedCount}건 등록)`);
+        setShowExcelUpload(false);
+        setExcelFile(null);
+        fetchBomList();
+        if (result.createdBomId) {
+          setSelectedBomId(result.createdBomId);
+        }
+      } else {
+        toast.error(result?.errors?.join("\n") || "엑셀 업로드에 실패했어요");
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "엑셀 업로드에 실패했어요");
+    } finally {
+      setExcelUploading(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (!selectedBomId) {
+      toast.error("BOM을 선택해주세요");
+      return;
+    }
+    try {
+      const res = await apiClient.get(`/bom/${selectedBomId}/excel-download`);
+      const data = res.data?.data || [];
+      if (data.length === 0) {
+        toast.error("다운로드할 데이터가 없어요");
+        return;
+      }
+      exportToExcel(data, `BOM_${bomHeader?.item_code || selectedBomId}`);
+      toast.success("엑셀 다운로드를 시작했어요");
+    } catch {
+      toast.error("엑셀 다운로드에 실패했어요");
+    }
+  };
+
+  // ─── 상태 뱃지 렌더 ───────────────────────────
+  const renderStatusBadge = (status?: string) => {
+    const info = STATUS_MAP[status || ""] || { label: status || "-", className: "bg-muted text-muted-foreground" };
+    return (
+      <span className={cn("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium", info.className)}>
+        <span className="w-1.5 h-1.5 rounded-full bg-current" />
+        {info.label}
+      </span>
+    );
+  };
+
+  // ─── 렌더링 ──────────────────────────────────
+  return (
+    <div className="flex flex-col h-full">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 px-5 py-3 text-xs text-muted-foreground bg-muted/50 border-b shrink-0">
+        <span>생산관리</span>
+        <ChevronRight className="w-3.5 h-3.5 text-muted-foreground/50" />
+        <span className="font-semibold text-foreground">BOM 관리</span>
+      </nav>
+
+      {/* 검색 필터 */}
+      <div className="px-4 py-2.5 border-b bg-muted/50 shrink-0">
+        <DynamicSearchFilter
+          tableName={BOM_TABLE}
+          filterId="c16-bom"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={totalCount}
+          extraActions={
+            <div className="flex items-center gap-2">
+              <Button size="sm" variant="outline" className="h-8 text-xs" onClick={() => setShowExcelUpload(true)}>
+                <Upload className="w-3.5 h-3.5 mr-1.5" />
+                엑셀 업로드
+              </Button>
+              <Button size="sm" variant="outline" className="h-8 text-xs" onClick={handleExcelDownload} disabled={!selectedBomId}>
+                <Download className="w-3.5 h-3.5 mr-1.5" />
+                엑셀 다운로드
+              </Button>
+            </div>
+          }
+        />
+      </div>
+
+      {/* 메인 콘텐츠: 좌우 분할 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card mx-3 mb-3">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: BOM 목록 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold text-foreground">BOM 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {totalCount}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" onClick={openCreateModal}>
+                    <Plus className="w-3.5 h-3.5 mr-1" />
+                    등록
+                  </Button>
+                  <div className="w-px h-4 bg-border mx-0.5" />
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                    onClick={handleDeleteBom}
+                    disabled={checkedIds.length === 0}
+                  >
+                    <Trash2 className="w-3.5 h-3.5 mr-1" />
+                    삭제
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* BOM 목록 테이블 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+                    key: col.key,
+                    label: col.label,
+                    render: col.key === "item_code"
+                      ? (_val: any, row: any) => <span className="font-mono text-[13px]">{row.item_code || row.item_number || "-"}</span>
+                      : col.key === "bom_type"
+                      ? (_val: any, row: any) => <span className="text-[13px]">{BOM_TYPE_OPTIONS.find((o) => o.code === row.bom_type)?.label || row.bom_type || "-"}</span>
+                      : col.key === "status"
+                      ? (_val: any, row: any) => renderStatusBadge(row.status)
+                      : undefined,
+                  }))}
+                  data={ts.groupData(bomList)}
+                  loading={loading}
+                  emptyMessage="등록된 BOM이 없어요"
+                  showCheckbox
+                  checkedIds={checkedIds}
+                  onCheckedChange={setCheckedIds}
+                  selectedId={selectedBomId}
+                  onSelect={(id) => setSelectedBomId(id)}
+                  onRowClick={(row) => setSelectedBomId(row.id)}
+                  showPagination
+                  draggableColumns={false}
+                  columnOrderKey="c16-bom"
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 상세 + 트리뷰 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            {!selectedBomId ? (
+              <div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
+                <Inbox className="w-10 h-10 text-muted-foreground/40" />
+                <p className="text-sm">좌측에서 BOM을 선택해주세요</p>
+              </div>
+            ) : (
+              <div className="flex flex-col h-full">
+                {/* 상세 카드 */}
+                <div className="border-b shrink-0">
+                  <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                    <h3 className="text-[13px] font-bold text-foreground">BOM 상세정보</h3>
+                    <Button size="sm" variant="ghost" onClick={openEditModal}>
+                      <FileText className="w-3.5 h-3.5 mr-1" />
+                      편집
+                    </Button>
+                  </div>
+                  {detailLoading ? (
+                    <div className="flex items-center justify-center py-8">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : bomHeader ? (
+                    <div className="grid grid-cols-2 text-sm">
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">품목코드</span>
+                        <span className="font-mono text-xs">{bomHeader.item_code || bomHeader.item_number || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">품명</span>
+                        <span className="text-xs">{bomHeader.item_name || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">BOM 유형</span>
+                        <span className="text-xs">{BOM_TYPE_OPTIONS.find((o) => o.code === bomHeader.bom_type)?.label || bomHeader.bom_type || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">버전</span>
+                        <span className="text-xs">{bomHeader.version || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">기준수량</span>
+                        <span className="text-xs">{bomHeader.base_qty || "1"} {bomHeader.unit || ""}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">상태</span>
+                        {renderStatusBadge(bomHeader.status)}
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 col-span-2">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">메모</span>
+                        <span className="text-xs text-muted-foreground">{bomHeader.remark || "-"}</span>
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+
+                {/* 하단 탭: 트리뷰 / 버전 / 이력 */}
+                <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+                  <Tabs value={rightTab} onValueChange={(v) => {
+                    setRightTab(v as any);
+                    if (v === "version" && selectedBomId) fetchVersions(selectedBomId);
+                    if (v === "history" && selectedBomId) fetchHistory(selectedBomId);
+                  }}>
+                    <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/50 shrink-0">
+                      <TabsList className="h-8">
+                        <TabsTrigger value="tree" className="text-xs px-3 h-7">
+                          <GitBranch className="w-3.5 h-3.5 mr-1" />
+                          트리뷰
+                        </TabsTrigger>
+                        <TabsTrigger value="version" className="text-xs px-3 h-7">
+                          <Copy className="w-3.5 h-3.5 mr-1" />
+                          버전
+                        </TabsTrigger>
+                        <TabsTrigger value="history" className="text-xs px-3 h-7">
+                          <History className="w-3.5 h-3.5 mr-1" />
+                          이력
+                        </TabsTrigger>
+                      </TabsList>
+
+                    </div>
+
+                    {/* 트리뷰 탭 */}
+                    <TabsContent value="tree" className="flex-1 overflow-auto p-0 m-0">
+                      {/* 상단 액션바 */}
+                      <div className="flex items-center justify-between border-b px-3 py-2 bg-muted/30">
+                        <div className="flex items-center gap-2">
+                          <Button size="sm" variant="outline" onClick={() => handleTreeAddChild(null)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />루트 품목 추가
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => {
+                              if (selectedTreeNodeId && !selectedTreeNodeId.startsWith("__root_")) {
+                                handleTreeAddChild(selectedTreeNodeId);
+                              }
+                            }}
+                            disabled={!selectedTreeNodeId || selectedTreeNodeId.startsWith("__root_")}
+                          >
+                            <Plus className="w-3.5 h-3.5 mr-1" />하위 품목 추가
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                            onClick={() => {
+                              if (selectedTreeNodeId && !selectedTreeNodeId.startsWith("__root_")) {
+                                handleTreeDeleteNode(selectedTreeNodeId);
+                                setSelectedTreeNodeId(null);
+                                setEditingNodeId(null);
+                              }
+                            }}
+                            disabled={!selectedTreeNodeId || selectedTreeNodeId.startsWith("__root_")}
+                          >
+                            <Trash2 className="w-3.5 h-3.5 mr-1" />선택 삭제
+                          </Button>
+                          <div className="w-px h-5 bg-border" />
+                          <div className="flex overflow-hidden rounded-md border">
+                            <button onClick={() => { setTreeViewMode("forward"); }} className={cn("h-7 px-2.5 text-[11px] font-medium transition-colors", treeViewMode === "forward" ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-muted")}>
+                              정전개
+                            </button>
+                            <button onClick={() => { setTreeViewMode("reverse"); fetchWhereUsed(); }} className={cn("h-7 border-l px-2.5 text-[11px] font-medium transition-colors", treeViewMode === "reverse" ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-muted")}>
+                              역전개
+                            </button>
+                          </div>
+                          {treeViewMode === "forward" && (
+                            <>
+                              <Button size="sm" variant="ghost" onClick={expandAll}>
+                                <ChevronsDown className="w-3.5 h-3.5 mr-1" />펼침
+                              </Button>
+                              <Button size="sm" variant="ghost" onClick={collapseAll}>
+                                <ChevronsUp className="w-3.5 h-3.5 mr-1" />접음
+                              </Button>
+                            </>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2">
+                          {treeHasChanges && <Badge variant="secondary" className="text-warning">변경됨</Badge>}
+                          <Button size="sm" onClick={handleSaveTree} disabled={!treeHasChanges || saving}>
+                            {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin mr-1" /> : <Save className="w-3.5 h-3.5 mr-1" />}
+                            저장
+                          </Button>
+                        </div>
+                      </div>
+
+                      {/* 역전개 (Where Used) 뷰 */}
+                      {treeViewMode === "reverse" ? (
+                        <div className="flex-1 overflow-auto">
+                          {whereUsedLoading ? (
+                            <div className="flex h-40 items-center justify-center">
+                              <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                            </div>
+                          ) : (
+                            <div className="p-4">
+                              <div className="flex items-center gap-2 mb-4">
+                                <Package className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-sm font-semibold">{bomHeader?.item_name || ""}</span>
+                                <span className="font-mono text-xs text-muted-foreground">({bomHeader?.item_code || ""})</span>
+                              </div>
+                              <div className="text-xs text-muted-foreground mb-3">사용처 (Where Used)</div>
+                              {whereUsedData.length === 0 ? (
+                                <div className="flex flex-col items-center justify-center h-32 text-muted-foreground gap-2">
+                                  <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                                  <p className="text-xs">이 품목을 사용하는 BOM이 없습니다</p>
+                                </div>
+                              ) : (
+                                <div className="space-y-2">
+                                  {whereUsedData.map((wu, idx) => (
+                                    <div key={idx} className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent/50 cursor-pointer" onClick={() => {
+                                      // 해당 BOM 선택
+                                      setSelectedBomId(wu.bom_id);
+                                      setTreeViewMode("forward");
+                                    }}>
+                                      <Package className="h-4 w-4 text-primary shrink-0" />
+                                      <div className="min-w-0 flex-1">
+                                        <div className="flex items-center gap-2">
+                                          <span className="text-sm font-semibold">{wu.item_name}</span>
+                                          <span className="font-mono text-[11px] text-muted-foreground">({wu.item_code})</span>
+                                        </div>
+                                        <div className="mt-0.5 flex gap-3 text-[11px] text-muted-foreground">
+                                          <span>소요량: <b className="text-foreground">{wu.quantity}</b> {wu.unit}</span>
+                                          {wu.process_type && <span>공정: <b className="text-foreground">{wu.process_type}</b></span>}
+                                        </div>
+                                      </div>
+                                      <ChevronRight className="h-4 w-4 text-muted-foreground/50 shrink-0" />
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      ) : editingFlatTree.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center h-40 text-muted-foreground gap-2">
+                          <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                          <p className="text-xs">등록된 하위 품목이 없습니다</p>
+                          <Button size="sm" variant="outline" onClick={() => handleTreeAddChild(null)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />첫 품목 추가
+                          </Button>
+                        </div>
+                      ) : (
+                        <table className="w-full border-collapse text-xs" style={{ minWidth: "1100px" }}>
+                          <colgroup><col style={{ width: "60px" }} /><col style={{ width: "140px" }} /><col /><col style={{ width: "70px" }} /><col style={{ width: "50px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "150px" }} /><col style={{ width: "80px" }} /></colgroup>
+                          <thead className="sticky top-0 z-10">
+                            <tr className="border-b bg-muted">
+                              <th className="px-2 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">레벨</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">품번</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">품명</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">소요량</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">단위</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">공정구분</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">규격</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">비고</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">작성자</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">수정일시</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">관리품목</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {editingFlatTree.map((node) => {
+                              const nodeKey = node.id || node._tempId || "";
+                              const isVirtualRoot = (node as any)._isVirtualRoot === true;
+                              const typeBadge = getItemTypeBadge(node.item_type);
+                              const hasChildren = isVirtualRoot ? editingTree.length > 0 : node.children.length > 0;
+                              const isExpanded = expandedNodes.has(nodeKey);
+                              const isSelected = selectedTreeNodeId === nodeKey;
+                              const isEditing = editingNodeId === nodeKey && !isVirtualRoot;
+                              const level = node._level || 0;
+
+                              const depthBarColor = isVirtualRoot ? "bg-primary/70"
+                                : level === 1 ? "bg-emerald-400"
+                                : level === 2 ? "bg-amber-400"
+                                : level >= 3 ? "bg-purple-400" : "bg-muted/60";
+
+                              const depthBg = isVirtualRoot
+                                ? "border-border bg-primary/10 font-medium hover:bg-primary/20"
+                                : isSelected
+                                  ? "border-border bg-primary/5"
+                                  : level === 1 ? "border-border bg-background hover:bg-muted/60"
+                                  : level >= 2 ? "border-border bg-muted/40 hover:bg-muted/50"
+                                  : "border-border bg-background hover:bg-muted/60";
+
+                              return (
+                                <tr
+                                  key={nodeKey}
+                                  className={cn("group cursor-pointer border-b transition-colors", depthBg)}
+                                  onClick={() => {
+                                    if (editingNodeId && editingNodeId !== nodeKey) setEditingNodeId(null);
+                                    setSelectedTreeNodeId(nodeKey);
+                                    if (hasChildren) toggleEditTreeNode(nodeKey);
+                                  }}
+                                  onDoubleClick={() => {
+                                    if (!isVirtualRoot) {
+                                      setTreeEditTarget(node);
+                                      setTreeEditForm({ quantity: node.quantity || "1", unit: node.unit || "", process_type: node.process_type || "", loss_rate: node.loss_rate || "0", spec: node.spec || "", material: node.material || "", remark: node.remark || "" });
+                                      setTreeEditModalOpen(true);
+                                    }
+                                  }}
+                                >
+                                  {/* 레벨 + 좌측 색상바 + 토글 */}
+                                  <td className="relative px-1 py-2" style={{ paddingLeft: `${level * 16 + 8}px` }}>
+                                    <div className={cn("absolute left-0 top-0 h-full w-[3px]", depthBarColor)} />
+                                    <div className="flex items-center gap-1">
+                                      <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
+                                        {hasChildren ? (
+                                          isExpanded ? <ChevronDown className={cn("h-3.5 w-3.5", isVirtualRoot ? "text-primary" : "text-muted-foreground/70")} />
+                                          : <ChevronRight className={cn("h-3.5 w-3.5", isVirtualRoot ? "text-primary" : "text-muted-foreground/70")} />
+                                        ) : (
+                                          <span className="h-1 w-1 rounded-full bg-muted-foreground/40" />
+                                        )}
+                                      </span>
+                                      <span className="text-[11px]">{level}</span>
+                                    </div>
+                                  </td>
+                                  {/* 품번 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">
+                                    <span className={cn("font-mono text-[11px]", isVirtualRoot && "font-bold text-foreground")}>
+                                      {node.item_number || "-"}
+                                    </span>
+                                  </td>
+                                  {/* 품명 */}
+                                  <td className={cn("overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2", isVirtualRoot && "font-bold")}>
+                                    {node.item_name || "-"}
+                                  </td>
+                                  {/* 소요량 */}
+                                  <td className="px-3 py-2 text-center">{isVirtualRoot ? (bomHeader?.base_qty || "1") : (node.quantity || "-")}</td>
+                                  {/* 단위 */}
+                                  <td className="px-3 py-2 text-center">{isVirtualRoot ? "-" : (node.unit || "-")}</td>
+                                  {/* 공정구분 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.process_type || "-")}</td>
+                                  {/* 규격 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.spec || "-")}</td>
+                                  {/* 비고 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.remark || "-")}</td>
+                                  {/* 작성자 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 text-muted-foreground">{isVirtualRoot ? "-" : (node.writer || "-")}</td>
+                                  {/* 수정일시 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 text-muted-foreground">
+                                    {isVirtualRoot ? "-" : (node.updated_date ? new Date(node.updated_date).toLocaleString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }) : "-")}
+                                  </td>
+                                  {/* 관리품목 */}
+                                  <td className="px-2 py-2" style={{ minWidth: "150px" }}>
+                                    {isVirtualRoot ? <span className="text-center block">-</span> : (
+                                      node.item_type ? (
+                                        <div className="flex flex-row items-center gap-1 flex-nowrap">{node.item_type.split(",").map((t: string, i: number) => {
+                                          const trimmed = t.trim();
+                                          if (!trimmed) return null;
+                                          return <span key={i} className="shrink-0 rounded px-1 py-0.5 text-[9px] font-medium bg-muted text-muted-foreground">{trimmed}</span>;
+                                        })}</div>
+                                      ) : "-"
+                                    )}
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      )}
+                    </TabsContent>
+
+                    {/* 버전 탭 */}
+                    <TabsContent value="version" className="flex-1 overflow-auto m-0">
+                      <div className="p-3">
+                        <div className="flex items-center justify-between mb-3">
+                          <span className="text-xs text-muted-foreground">
+                            {versions.length}개 버전
+                          </span>
+                          <Button size="sm" onClick={() => setShowNewVersionDialog(true)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />
+                            새 버전
+                          </Button>
+                        </div>
+                        {versionLoading ? (
+                          <div className="flex items-center justify-center py-8">
+                            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                          </div>
+                        ) : versions.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                            <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                            <p className="text-xs">버전 데이터가 없어요</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-2">
+                            {versions.map((ver) => {
+                              const isActive = ver.id === currentVersionId;
+                              const statusInfo = VERSION_STATUS_MAP[ver.status] || { label: ver.status, className: "bg-muted text-muted-foreground" };
+                              return (
+                                <div
+                                  key={ver.id}
+                                  className={cn(
+                                    "flex items-center justify-between p-3 rounded-lg border transition-colors",
+                                    isActive ? "border-primary/30 bg-primary/5" : "hover:bg-muted/50"
+                                  )}
+                                >
+                                  <div className="flex items-center gap-3">
+                                    <div className="flex flex-col gap-0.5">
+                                      <div className="flex items-center gap-2">
+                                        <span className="text-sm font-semibold">{ver.version_name}</span>
+                                        <span className={cn("text-[10px] font-medium px-1.5 py-0.5 rounded-full", statusInfo.className)}>
+                                          {statusInfo.label}
+                                        </span>
+                                        {isActive && (
+                                          <Badge variant="outline" className="text-[10px] h-4 border-primary/30 text-primary">
+                                            현재
+                                          </Badge>
+                                        )}
+                                      </div>
+                                      <span className="text-[11px] text-muted-foreground">
+                                        {ver.detail_count || 0}개 구성품 · {ver.created_date ? new Date(ver.created_date).toLocaleDateString("ko-KR") : "-"}
+                                      </span>
+                                    </div>
+                                  </div>
+                                  <div className="flex items-center gap-1">
+                                    {!isActive && (
+                                      <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => handleLoadVersion(ver.id)}>
+                                        <RotateCcw className="w-3 h-3 mr-1" />
+                                        불러오기
+                                      </Button>
+                                    )}
+                                    {ver.status !== "active" && (
+                                      <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => handleActivateVersion(ver.id)}>
+                                        <CheckCircle2 className="w-3 h-3 mr-1" />
+                                        확정
+                                      </Button>
+                                    )}
+                                    {ver.status !== "active" && (
+                                      <Button
+                                        size="sm"
+                                        variant="ghost"
+                                        className="h-7 text-xs text-destructive hover:text-destructive"
+                                        onClick={() => handleDeleteVersion(ver.id)}
+                                      >
+                                        <Trash2 className="w-3 h-3" />
+                                      </Button>
+                                    )}
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    </TabsContent>
+
+                    {/* 이력 탭 */}
+                    <TabsContent value="history" className="flex-1 overflow-auto m-0">
+                      <div className="p-3">
+                        <div className="flex items-center justify-between mb-3">
+                          <span className="text-xs text-muted-foreground">
+                            {historyList.length}건 이력
+                          </span>
+                        </div>
+                        {historyLoading ? (
+                          <div className="flex items-center justify-center py-8">
+                            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                          </div>
+                        ) : historyList.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                            <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                            <p className="text-xs">이력 데이터가 없어요</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-2">
+                            {historyList.map((entry) => {
+                              const typeStyle = CHANGE_TYPE_STYLE[entry.change_type] || "bg-muted text-muted-foreground ring-border";
+                              return (
+                                <div key={entry.id} className="p-3 rounded-lg border hover:bg-muted/50 transition-colors">
+                                  <div className="flex items-center justify-between mb-1">
+                                    <div className="flex items-center gap-2">
+                                      <span className={cn("inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium ring-1 ring-inset", typeStyle)}>
+                                        {entry.change_type}
+                                      </span>
+                                      {(entry.revision || entry.version) && (
+                                        <span className="text-[10px] text-muted-foreground">
+                                          {entry.revision && `차수 ${entry.revision}`}{entry.revision && entry.version && " / "}{entry.version && `v${entry.version}`}
+                                        </span>
+                                      )}
+                                    </div>
+                                    <span className="text-[10px] text-muted-foreground">
+                                      {entry.changed_date ? new Date(entry.changed_date).toLocaleString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }) : "-"}
+                                    </span>
+                                  </div>
+                                  <p className="text-xs mt-1">{entry.change_description || "-"}</p>
+                                  {entry.changed_by && (
+                                    <span className="text-[10px] text-muted-foreground/60 mt-1 block">
+                                      {entry.changed_by}
+                                    </span>
+                                  )}
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </div>
+              </div>
+            )}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ─── BOM 등록/수정 모달 ─────────────────── */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto" onPointerDownOutside={(e) => { if (showItemSearchModal) e.preventDefault(); }}>
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "BOM 수정" : "BOM 등록"}</DialogTitle>
+            <DialogDescription>{isEditMode ? "BOM 정보를 수정해요" : "새로운 BOM을 등록해요"}</DialogDescription>
+          </DialogHeader>
+        <div className="space-y-6">
+          {/* 기본정보 */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                품목 <span className="text-destructive">*</span>
+              </Label>
+              <div className="flex gap-2">
+                <Input
+                  className="h-9 flex-1"
+                  value={masterForm.item_code ? `${masterForm.item_code} - ${masterForm.item_name}` : ""}
+                  placeholder="품목을 검색해주세요"
+                  readOnly
+                  onClick={() => {
+                    setItemSearchTarget("master");
+                    setItemSearchKeyword("");
+                    setShowItemSearchModal(true);
+                    searchItems("");
+                  }}
+                />
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="h-9 px-3"
+                  onClick={() => {
+                    setItemSearchTarget("master");
+                    setItemSearchKeyword("");
+                    setShowItemSearchModal(true);
+                    searchItems("");
+                  }}
+                >
+                  <Search className="w-3.5 h-3.5" />
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                BOM 유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={masterForm.bom_type || ""} onValueChange={(v) => setMasterForm((prev) => ({ ...prev, bom_type: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  {BOM_TYPE_OPTIONS.map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">기준수량</Label>
+              <Input
+                className="h-9"
+                type="number"
+                value={masterForm.base_qty}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, base_qty: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">단위</Label>
+              <Input
+                className="h-9"
+                value={masterForm.unit}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, unit: e.target.value }))}
+                placeholder="EA"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                버전 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={masterForm.version}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, version: e.target.value }))}
+                placeholder="1.0"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">상태</Label>
+              <Select value={masterForm.status || "draft"} onValueChange={(v) => setMasterForm((prev) => ({ ...prev, status: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="draft">초안</SelectItem>
+                  <SelectItem value="active">활성</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                유효 시작일 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={masterForm.effective_date || ""}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, effective_date: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">유효 종료일</Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={masterForm.expiry_date || ""}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, expiry_date: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs font-medium">메모</Label>
+              <Textarea
+                className="min-h-[60px] resize-none"
+                value={masterForm.remark}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, remark: e.target.value }))}
+                placeholder="메모를 입력해주세요"
+              />
+            </div>
+          </div>
+
+          {/* BOM 구성품목 */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <h4 className="text-sm font-semibold">BOM 구성품목</h4>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  setItemSearchTarget("detail");
+                  setItemSearchKeyword("");
+                  setShowItemSearchModal(true);
+                  searchItems("");
+                }}
+              >
+                <Plus className="w-3.5 h-3.5 mr-1" />
+                품목 추가
+              </Button>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                    <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                    <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공정유형</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">손실율(%)</TableHead>
+                    <TableHead className="w-[40px]" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {modalDetailRows.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={8} className="text-center py-8 text-muted-foreground text-[13px]">
+                        구성품목을 추가해주세요
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    modalDetailRows.map((row, idx) => (
+                      <TableRow key={idx}>
+                        <TableCell className="text-center text-muted-foreground text-[13px]">{idx + 1}</TableCell>
+                        <TableCell className="font-mono text-[13px]">{row.item_number}</TableCell>
+                        <TableCell className="text-[13px]">{row.item_name}</TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[70px] text-xs"
+                            type="number"
+                            value={row.quantity}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].quantity = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell className="text-[13px]">{row.unit}</TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[90px] text-xs"
+                            value={row.process_type}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].process_type = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                            placeholder="공정"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[70px] text-xs"
+                            type="number"
+                            value={row.loss_rate}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].loss_rate = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                            onClick={() => setModalDetailRows((prev) => prev.filter((_, i) => i !== idx))}
+                          >
+                            <X className="w-3.5 h-3.5" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)} disabled={saving}>
+              취소
+            </Button>
+            <Button onClick={handleSaveBom} disabled={saving}>
+              {saving && <Loader2 className="w-3.5 h-3.5 animate-spin mr-1.5" />}
+              {isEditMode ? "수정" : "등록"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 품목 검색 모달 ──────────────────────── */}
+      <Dialog open={showItemSearchModal} onOpenChange={setShowItemSearchModal}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>품목 검색</DialogTitle>
+            <DialogDescription>품목코드 또는 품명으로 검색해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              className="h-9 flex-1"
+              placeholder="품목코드 또는 품명 입력"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+            />
+            <Button size="sm" className="h-9" onClick={() => searchItems()} disabled={itemSearchLoading}>
+              {itemSearchLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}
+            </Button>
+          </div>
+          <div className="max-h-[300px] overflow-auto border rounded-lg">
+            {itemSearchResults.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground gap-1">
+                <Search className="w-6 h-6 text-muted-foreground/40" />
+                <p className="text-xs">검색어를 입력해주세요</p>
+              </div>
+            ) : (
+              itemSearchResults.map((item) => {
+                const badge = getItemTypeBadge(item.division);
+                return (
+                  <div
+                    key={item.id}
+                    className="flex items-center gap-3 px-3 py-2 border-b last:border-b-0 hover:bg-accent cursor-pointer transition-colors"
+                    onClick={() => selectItem(item)}
+                  >
+                    <span className={cn("text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0", badge.className)}>
+                      {badge.label}
+                    </span>
+                    <span className="font-mono text-[11px] text-muted-foreground">{item.item_number}</span>
+                    <span className="text-xs">{item.item_name}</span>
+                    <span className="ml-auto text-[11px] text-muted-foreground">{item.unit || ""}</span>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 품목 수정 모달 (더블클릭) ─────────────────── */}
+      <Dialog open={treeEditModalOpen} onOpenChange={setTreeEditModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>품목 수정</DialogTitle>
+            <DialogDescription>선택한 품목의 BOM 구성 정보를 수정합니다</DialogDescription>
+          </DialogHeader>
+          {treeEditTarget && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">품목코드</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditTarget.item_number || ""} readOnly />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">품목명</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditTarget.item_name || ""} readOnly />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">구성수량 <span className="text-destructive">*</span></Label>
+                  <Input className="h-9" type="number" value={treeEditForm.quantity || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, quantity: e.target.value }))} />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">단위</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.unit || "-"} readOnly />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">공정</Label>
+                  <Select value={treeEditForm.process_type || ""} onValueChange={(v) => setTreeEditForm((p) => ({ ...p, process_type: v }))}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="공정 선택" /></SelectTrigger>
+                    <SelectContent>
+                      {processOptions.map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">로스율 (%)</Label>
+                  <Input className="h-9" type="number" value={treeEditForm.loss_rate || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, loss_rate: e.target.value }))} />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">규격</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.spec || "-"} readOnly />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">재질</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.material || "-"} readOnly />
+                </div>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold text-muted-foreground">메모</Label>
+                <textarea className="flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm" value={treeEditForm.remark || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, remark: e.target.value }))} placeholder="비고 사항을 입력하세요" />
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setTreeEditModalOpen(false)}>취소</Button>
+            <Button onClick={() => {
+              if (treeEditTarget) {
+                const nodeKey = treeEditTarget.id || treeEditTarget._tempId || "";
+                setEditingTree(prev => updateTreeNode(prev, nodeKey, node => ({
+                  ...node,
+                  quantity: treeEditForm.quantity || "1",
+                  process_type: treeEditForm.process_type || "",
+                  loss_rate: treeEditForm.loss_rate || "0",
+                  remark: treeEditForm.remark || "",
+                  _isModified: !node._isNew ? true : node._isModified,
+                })));
+                setTreeHasChanges(true);
+              }
+              setTreeEditModalOpen(false);
+            }}>저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 트리 품목 검색 모달 ─────────────────── */}
+      <Dialog open={treeItemSearchOpen} onOpenChange={setTreeItemSearchOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>품목 검색 (트리 추가)</DialogTitle>
+            <DialogDescription>추가할 품목을 검색해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              className="h-9 flex-1"
+              placeholder="품목코드 또는 품명 입력"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+            />
+            <Button size="sm" className="h-9" onClick={() => searchItems()} disabled={itemSearchLoading}>
+              {itemSearchLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}
+            </Button>
+          </div>
+          <div className="max-h-[300px] overflow-auto border rounded-lg">
+            {itemSearchResults.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground gap-1">
+                <Search className="w-6 h-6 text-muted-foreground/40" />
+                <p className="text-xs">검색어를 입력해주세요</p>
+              </div>
+            ) : (
+              itemSearchResults.filter((item) => {
+                // 자기 자신 제외
+                if (bomHeader && (item.id === bomHeader.item_id || item.item_number === bomHeader.item_code)) return false;
+                // 조상 경로 순환 참조 제외
+                if (addTargetParentId) {
+                  const collectAncestorIds = (nodes: TreeNode[], targetId: string, path: string[]): string[] | null => {
+                    for (const n of nodes) {
+                      const nk = n.id || n._tempId || "";
+                      if (nk === targetId) return [...path, n.child_item_id || ""];
+                      if (n.children.length > 0) {
+                        const r = collectAncestorIds(n.children, targetId, [...path, n.child_item_id || ""]);
+                        if (r) return r;
+                      }
+                    }
+                    return null;
+                  };
+                  const ancestors = collectAncestorIds(editingTree, addTargetParentId, []);
+                  if (ancestors && ancestors.includes(item.id)) return false;
+                }
+                return true;
+              }).map((item) => {
+                const badge = getItemTypeBadge(item.division);
+                return (
+                  <div
+                    key={item.id}
+                    className="flex items-center gap-3 px-3 py-2 border-b last:border-b-0 hover:bg-accent cursor-pointer transition-colors"
+                    onClick={() => handleTreeItemSelect(item)}
+                  >
+                    <span className={cn("text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0", badge.className)}>
+                      {badge.label}
+                    </span>
+                    <span className="font-mono text-[11px] text-muted-foreground">{item.item_number}</span>
+                    <span className="text-xs">{item.item_name}</span>
+                    <span className="ml-auto text-[11px] text-muted-foreground">{item.unit || ""}</span>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 새 버전 생성 다이얼로그 ────────────── */}
+      <Dialog open={showNewVersionDialog} onOpenChange={setShowNewVersionDialog}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>새 버전 생성</DialogTitle>
+            <DialogDescription>현재 버전의 데이터를 복사하여 새 버전을 만들어요</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-xs font-medium">버전명 (비워두면 자동 채번)</Label>
+            <Input
+              className="h-9"
+              value={newVersionName}
+              onChange={(e) => setNewVersionName(e.target.value)}
+              placeholder="예: 2.0"
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowNewVersionDialog(false)}>
+              취소
+            </Button>
+            <Button onClick={handleCreateVersion}>
+              <Plus className="w-3.5 h-3.5 mr-1" />
+              생성
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 이력 추가 다이얼로그 ───────────────── */}
+      <Dialog open={showHistoryDialog} onOpenChange={setShowHistoryDialog}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>이력 추가</DialogTitle>
+            <DialogDescription>BOM 변경 이력을 기록해요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                변경 유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={newHistory.change_type} onValueChange={(v) => setNewHistory((prev) => ({ ...prev, change_type: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="변경 유형 선택" /></SelectTrigger>
+                <SelectContent>
+                  {CHANGE_TYPE_OPTIONS.map((t) => (
+                    <SelectItem key={t} value={t}>{t}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">변경 내용</Label>
+              <Textarea
+                className="min-h-[80px] resize-none"
+                value={newHistory.change_description}
+                onChange={(e) => setNewHistory((prev) => ({ ...prev, change_description: e.target.value }))}
+                placeholder="변경 내용을 입력해주세요"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowHistoryDialog(false)}>
+              취소
+            </Button>
+            <Button onClick={handleAddHistory}>
+              <Plus className="w-3.5 h-3.5 mr-1" />
+              추가
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 엑셀 업로드 다이얼로그 ────────────── */}
+      <Dialog open={showExcelUpload} onOpenChange={setShowExcelUpload}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>BOM 엑셀 업로드</DialogTitle>
+            <DialogDescription>
+              {selectedBomId
+                ? "선택한 BOM에 새 버전을 엑셀로 생성해요"
+                : "엑셀 파일로 새 BOM을 생성해요"}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="border-2 border-dashed rounded-lg p-6 text-center">
+              <input
+                type="file"
+                accept=".xlsx,.xls"
+                className="hidden"
+                id="excel-file-input"
+                onChange={(e) => setExcelFile(e.target.files?.[0] || null)}
+              />
+              <label htmlFor="excel-file-input" className="cursor-pointer">
+                <Upload className="w-8 h-8 mx-auto mb-2 text-muted-foreground/40" />
+                <p className="text-sm text-muted-foreground mb-1">
+                  {excelFile ? excelFile.name : "클릭하여 파일을 선택해주세요"}
+                </p>
+                <p className="text-[10px] text-muted-foreground/60">.xlsx, .xls 형식</p>
+              </label>
+            </div>
+            <div className="bg-muted/50 rounded-lg p-3 text-xs text-muted-foreground space-y-1">
+              <p className="font-medium text-foreground">엑셀 형식 안내</p>
+              <p>레벨 0: BOM 마스터 (최상위 품목)</p>
+              <p>레벨 1: 직접 자품목</p>
+              <p>레벨 2+: 자품목의 자품목</p>
+              <p>필수 컬럼: level, item_number, quantity</p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setShowExcelUpload(false); setExcelFile(null); }}>
+              취소
+            </Button>
+            <Button onClick={handleExcelUpload} disabled={!excelFile || excelUploading}>
+              {excelUploading && <Loader2 className="w-3.5 h-3.5 animate-spin mr-1.5" />}
+              업로드
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/production/plan-management/page.tsx b/frontend/app/(main)/COMPANY_29/production/plan-management/page.tsx
index a49555b6..546ed739 100644
--- a/frontend/app/(main)/COMPANY_29/production/plan-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/production/plan-management/page.tsx
@@ -80,13 +80,13 @@ import TimelineScheduler, {
   type ZoomLevel,
   type StatusColor,
 } from "@/components/common/TimelineScheduler";
-import { DynamicSearchFilter, type FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 import { apiClient } from "@/lib/api/client";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 
 // ─── 상수 ───
 
@@ -104,6 +104,19 @@ const STATUS_LABEL: Record<string, string> = {
   completed: "완료",
 };
 
+// 수주 테이블 컬럼 설정
+const ORDER_COLUMNS = [
+  { key: "total_order_qty", label: "총수주량" },
+  { key: "total_ship_qty", label: "출고량" },
+  { key: "total_balance_qty", label: "잔량" },
+  { key: "current_stock", label: "현재고" },
+  { key: "safety_stock", label: "안전재고" },
+  { key: "existing_plan_qty", label: "기생산계획량" },
+  { key: "in_progress_qty", label: "생산진행" },
+  { key: "required_plan_qty", label: "필요생산계획" },
+  { key: "lead_time", label: "리드타임(일)" },
+];
+
 // ========== 메인 컴포넌트 ==========
 
 export default function ProductionPlanManagementPage() {
@@ -126,7 +139,7 @@ export default function ProductionPlanManagementPage() {
   const [stockItems, setStockItems] = useState<StockShortageItem[]>([]);
   const [finishedPlans, setFinishedPlans] = useState<ProductionPlan[]>([]);
   const [semiPlans, setSemiPlans] = useState<ProductionPlan[]>([]);
-  const [equipmentList, setEquipmentList] = useState<{ equipment_id: string; equipment_name: string }[]>([]);
+  const [equipmentList, setEquipmentList] = useState<{ id: string; equipment_code: string; equipment_name: string }[]>([]);
 
   // 선택/토글 상태
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
@@ -134,15 +147,15 @@ export default function ProductionPlanManagementPage() {
   const [filterUnplannedOrdersOnly, setFilterUnplannedOrdersOnly] = useState(false);
   const [selectedStockItems, setSelectedStockItems] = useState<Set<string>>(new Set());
 
-  // 검색 필터 (DynamicSearchFilter에서 사용)
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
   const [searchItemCode, setSearchItemCode] = useState("");
   const [searchStatus, setSearchStatus] = useState("all");
   const [searchStartDate, setSearchStartDate] = useState("");
   const [searchEndDate, setSearchEndDate] = useState("");
 
+  // 테이블 설정
+  const ts = useTableSettings("c16-plan-management", "sales_order_mng", ORDER_COLUMNS);
+
   // 타임라인 옵션
   const [recalculateUnstarted, setRecalculateUnstarted] = useState(true);
   const [finishedZoom, setFinishedZoom] = useState<ZoomLevel>("week");
@@ -256,39 +269,33 @@ export default function ProductionPlanManagementPage() {
 
   // ========== DynamicSearchFilter 콜백 ==========
 
-  const handleSearchFilterChange = useCallback(
-    (filters: FilterValue[]) => {
-      setSearchFilters(filters);
-      // 필터에서 주요 값 추출
-      let itemCode = "";
-      let status = "all";
-      let startDate = "";
-      let endDate = "";
-      for (const f of filters) {
-        if (f.columnName === "item_code" && f.value) itemCode = f.value;
-        if (f.columnName === "status" && f.value) status = f.value;
-        if (f.columnName === "start_date" && f.value) {
-          const [s, e] = f.value.split(",");
-          if (s) startDate = s;
-          if (e) endDate = e;
-        }
+  const handleSearchFilterChange = useCallback((filters: FilterValue[]) => {
+    setSearchFilters(filters);
+    let itemCode = "";
+    let status = "all";
+    let startDate = "";
+    let endDate = "";
+    for (const f of filters) {
+      if (f.columnName === "item_code" && f.value) itemCode = f.value;
+      if (f.columnName === "status" && f.value) status = f.value;
+      if (f.columnName === "start_date" && f.operator === "between" && f.value) {
+        const [s, e] = f.value.split("|");
+        if (s) startDate = s;
+        if (e) endDate = e;
       }
-      setSearchItemCode(itemCode);
-      setSearchStatus(status);
-      setSearchStartDate(startDate);
-      setSearchEndDate(endDate);
-    },
-    []
-  );
-
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
+    }
+    setSearchItemCode(itemCode);
+    setSearchStatus(status || "all");
+    setSearchStartDate(startDate);
+    setSearchEndDate(endDate);
   }, []);
 
   useEffect(() => {
-    const saved = loadTableSettings("production-plan");
-    if (saved) applyTableSettings(saved);
-  }, []);
+    if (searchFilters.length > 0) {
+      fetchOrderSummary();
+      fetchPlans();
+    }
+  }, [searchItemCode, searchStatus, searchStartDate, searchEndDate]);
 
   // ========== 토글/선택 핸들러 ==========
 
@@ -652,7 +659,7 @@ export default function ProductionPlanManagementPage() {
     setModalManager((plan as any).manager_name || "");
     setModalWorkOrderNo((plan as any).work_order_no || "");
     setModalRemarks(plan.remarks || "");
-    setModalEquipmentId(plan.equipment_id ? String(plan.equipment_id) : "");
+    setModalEquipmentId((plan as any).equipment_code || (plan.equipment_id ? String(plan.equipment_id) : ""));
     setScheduleModalOpen(true);
   }, []);
 
@@ -912,29 +919,26 @@ export default function ProductionPlanManagementPage() {
   // 숫자 포맷
   const formatNumber = (num: number | string) => Number(num).toLocaleString();
 
+  // (컬럼 표시는 ts.visibleColumns 순서를 따름)
+
   return (
-    <div className={cn("flex flex-col bg-muted/30 gap-4", isFullscreen ? "fixed inset-0 z-50 p-4" : "h-[calc(100vh-4rem)] p-5")}>
+    <div className={cn("flex flex-col gap-3", isFullscreen ? "fixed inset-0 z-50 bg-background p-4" : "h-full p-3")}>
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>생산관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="font-medium text-foreground">생산계획</span>
+      </nav>
+
       {/* 상단 바 */}
-      <div className="shrink-0 rounded-lg border bg-background p-4 shadow-sm">
-        <div className="flex items-center justify-between gap-3">
-          <DynamicSearchFilter
-            tableName="production_plan_mng"
-            filterId="production-plan"
-            onFilterChange={handleSearchFilterChange}
-            dataCount={finishedPlans.length + semiPlans.length}
-            externalFilterConfig={filterConfig}
-            extraActions={
-              <Button size="sm" onClick={handleSearch}>
-                <RefreshCw className="mr-1.5 h-4 w-4" />
-                조회
-              </Button>
-            }
-          />
-          <div className="flex items-center gap-2 shrink-0">
-            <Button variant="outline" size="sm" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="text-emerald-600 dark:text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/10" onClick={() => setExcelUploadOpen(true)}>
+      <DynamicSearchFilter
+        tableName="sales_order_mng"
+        filterId="c16-plan-management"
+        onFilterChange={handleSearchFilterChange}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" className="text-success border-success/30 hover:bg-success/10" onClick={() => setExcelUploadOpen(true)}>
               <Upload className="mr-1.5 h-4 w-4" />
               엑셀업로드
             </Button>
@@ -946,14 +950,14 @@ export default function ProductionPlanManagementPage() {
               {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
             </Button>
           </div>
-        </div>
-      </div>
+        }
+      />
 
       {/* 데이터 섹션 */}
       <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg">
         {/* 왼쪽 패널 */}
         <ResizablePanel defaultSize={45} minSize={25}>
-          <div className="flex h-full flex-col rounded-lg border bg-background shadow-sm">
+          <div className="flex h-full flex-col rounded-lg border bg-card">
             <Tabs value={leftTab} onValueChange={setLeftTab} className="flex h-full flex-col">
               <div className="shrink-0 border-b bg-muted/30 px-5">
                 <TabsList className="h-11 bg-transparent gap-1">
@@ -984,7 +988,7 @@ export default function ProductionPlanManagementPage() {
                       />
                       <span className="font-medium text-foreground">계획에 없는 품목만</span>
                     </label>
-                    <Button size="sm" variant="outline" className="text-emerald-600 dark:text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/10" onClick={() => setOrderImportModalOpen(true)}>
+                    <Button size="sm" variant="outline" className="text-success border-success/30 hover:bg-success/10" onClick={() => setOrderImportModalOpen(true)}>
                       <Download className="mr-1 h-3.5 w-3.5" />
                       불러오기
                     </Button>
@@ -996,6 +1000,9 @@ export default function ProductionPlanManagementPage() {
                       {loadingOrders ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
                       새로고침
                     </Button>
+                    <Button size="sm" variant="ghost" onClick={() => ts.setOpen(true)}>
+                      <Settings2 className="h-3.5 w-3.5" />
+                    </Button>
                   </div>
                 </div>
                 <div className="flex-1 overflow-auto p-4">
@@ -1010,29 +1017,75 @@ export default function ProductionPlanManagementPage() {
                     </div>
                   ) : (
                     <div className="overflow-x-auto rounded-md border">
-                      <Table>
-                        <TableHeader>
-                          <TableRow className="bg-muted/50">
+                      {(() => {
+                        // 디테일 행에서 개별 값을 표시하는 컬럼 매핑
+                        const DETAIL_VALUE_MAP: Record<string, string> = {
+                          total_order_qty: "order_qty",
+                          total_ship_qty: "ship_qty",
+                          total_balance_qty: "balance_qty",
+                        };
+
+                        // 그룹 행에서 특수 렌더링이 필요한 컬럼
+                        const renderGroupCell = (col: { key: string }, item: any) => {
+                          if (col.key === "required_plan_qty") {
+                            return (
+                              <TableCell key={col.key} style={ts.thStyle(col.key)} className={cn("text-[13px] text-right font-bold", Number(item.required_plan_qty) > 0 ? "text-destructive" : "text-success")} onClick={() => toggleItemExpand(item.item_code)}>
+                                {formatNumber(item.required_plan_qty)}
+                              </TableCell>
+                            );
+                          }
+                          if (col.key === "lead_time") {
+                            return (
+                              <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
+                                {Number(item.lead_time) > 0 ? `${item.lead_time}일` : "-"}
+                              </TableCell>
+                            );
+                          }
+                          return (
+                            <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
+                              {formatNumber(item[col.key])}
+                            </TableCell>
+                          );
+                        };
+
+                        return (
+                      <Table style={{ tableLayout: "fixed" }}>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
                             <TableHead className="w-[30px]">
                               <Checkbox checked={selectedItemGroups.size === orderItems.length && orderItems.length > 0} onCheckedChange={(c) => toggleAllItemGroups(!!c)} className="h-4 w-4" />
                             </TableHead>
                             <TableHead className="w-[40px]" />
-                            <TableHead className="text-xs font-semibold whitespace-nowrap">품목코드</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap">품목명</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">총수주량</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">출고량</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">잔량</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">현재고</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">안전재고</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">기생산계획량</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">생산진행</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">필요생산계획</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">리드타임(일)</TableHead>
+                            <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                            <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            {ts.visibleColumns.map((col) => (
+                              <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                                {col.label}
+                              </TableHead>
+                            ))}
                           </TableRow>
                         </TableHeader>
                         <TableBody>
-                          {orderItems.map((item) => (
-                            <React.Fragment key={item.item_code}>
+                          {ts.groupData(orderItems).map((item, rowIdx) => {
+                            if (item._isGroupSummary) {
+                              return (
+                                <TableRow key={`summary-${rowIdx}`} className="bg-muted/60 font-semibold border-t border-primary/20">
+                                  <TableCell />
+                                  <TableCell />
+                                  <TableCell colSpan={2} />
+                                  {ts.visibleColumns.map((col) => {
+                                    const v = (item as any)[col.key];
+                                    return (
+                                    <TableCell key={col.key} style={ts.thStyle(col.key)} className={typeof v === "number" ? "text-right font-mono text-[13px]" : "text-[13px] text-primary"}>
+                                      {typeof v === "number" ? Number(v).toLocaleString() : (v || "")}
+                                    </TableCell>
+                                    );
+                                  })}
+                                </TableRow>
+                              );
+                            }
+                            return (
+                            <React.Fragment key={item.item_code || rowIdx}>
                               <TableRow className={cn("cursor-pointer border-t-2 border-t-primary/30 bg-primary/5 font-semibold hover:bg-primary/10", selectedItemGroups.has(item.item_code) && "bg-primary/10")}>
                                 <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
                                   <Checkbox checked={selectedItemGroups.has(item.item_code)} onCheckedChange={() => toggleItemGroupSelect(item.item_code)} className="h-4 w-4" />
@@ -1040,23 +1093,16 @@ export default function ProductionPlanManagementPage() {
                                 <TableCell className="text-center" onClick={() => toggleItemExpand(item.item_code)}>
                                   <ChevronRight className={cn("h-4 w-4 transition-transform duration-200", expandedItems.has(item.item_code) && "rotate-90")} />
                                 </TableCell>
-                                <TableCell className="text-xs text-primary" onClick={() => toggleItemExpand(item.item_code)}>{item.item_code}</TableCell>
-                                <TableCell className="text-xs text-primary" onClick={() => toggleItemExpand(item.item_code)}>{item.item_name}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.total_order_qty)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.total_ship_qty)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.total_balance_qty)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.current_stock)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.safety_stock)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.existing_plan_qty)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.in_progress_qty)}</TableCell>
-                                <TableCell className={cn("text-xs text-right font-bold", Number(item.required_plan_qty) > 0 ? "text-destructive" : "text-emerald-600 dark:text-emerald-400")} onClick={() => toggleItemExpand(item.item_code)}>
-                                  {formatNumber(item.required_plan_qty)}
-                                </TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
-                                  {Number(item.lead_time) > 0 ? `${item.lead_time}일` : "-"}
-                                </TableCell>
+                                <TableCell style={{ width: "140px", minWidth: "140px" }} className="text-[13px] text-primary truncate" onClick={() => toggleItemExpand(item.item_code)}>{item.item_code}</TableCell>
+                                <TableCell style={{ width: "140px", minWidth: "140px" }} className="text-[13px] text-primary truncate" onClick={() => toggleItemExpand(item.item_code)}>{item.item_name}</TableCell>
+                                {ts.visibleColumns.map((col) => renderGroupCell(col, item))}
                               </TableRow>
-                              {expandedItems.has(item.item_code) && item.orders?.map((detail) => (
+                              {expandedItems.has(item.item_code) && item.orders?.map((detail: any) => {
+                                let remainColSpan = 0;
+                                for (const col of ts.visibleColumns) {
+                                  if (!DETAIL_VALUE_MAP[col.key]) remainColSpan++;
+                                }
+                                return (
                                 <TableRow key={detail.id || detail.order_no} className="cursor-pointer hover:bg-muted/50">
                                   <TableCell />
                                   <TableCell />
@@ -1071,18 +1117,28 @@ export default function ProductionPlanManagementPage() {
                                       </Badge>
                                     </div>
                                   </TableCell>
-                                  <TableCell className="text-xs text-right">{formatNumber(detail.order_qty)}</TableCell>
-                                  <TableCell className="text-xs text-right">{formatNumber(detail.ship_qty)}</TableCell>
-                                  <TableCell className="text-xs text-right">{formatNumber(detail.balance_qty)}</TableCell>
-                                  <TableCell colSpan={6} className="text-xs text-muted-foreground">
-                                    납기일: {detail.due_date || "-"}
-                                  </TableCell>
+                                  {ts.visibleColumns.map((col) => {
+                                    const detailKey = DETAIL_VALUE_MAP[col.key];
+                                    if (detailKey) {
+                                      return <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right">{formatNumber(detail[detailKey])}</TableCell>;
+                                    }
+                                    return null;
+                                  })}
+                                  {remainColSpan > 0 && (
+                                    <TableCell colSpan={remainColSpan} className="text-[13px] text-muted-foreground">
+                                      납기일: {detail.due_date || "-"}
+                                    </TableCell>
+                                  )}
                                 </TableRow>
-                              ))}
+                                );
+                              })}
                             </React.Fragment>
-                          ))}
+                            );
+                          })}
                         </TableBody>
                       </Table>
+                        );
+                      })()}
                     </div>
                   )}
                 </div>
@@ -1093,7 +1149,7 @@ export default function ProductionPlanManagementPage() {
                 <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
                   <span className="text-base font-semibold">안전재고 부족 품목</span>
                   <div className="flex items-center gap-2">
-                    <Button size="sm" variant="outline" className="text-emerald-600 dark:text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/10" onClick={() => setStockImportModalOpen(true)}>
+                    <Button size="sm" variant="outline" className="text-success border-success/30 hover:bg-success/10" onClick={() => setStockImportModalOpen(true)}>
                       <Download className="mr-1 h-3.5 w-3.5" />
                       불러오기
                     </Button>
@@ -1120,18 +1176,18 @@ export default function ProductionPlanManagementPage() {
                   ) : (
                     <div className="overflow-x-auto rounded-md border">
                       <Table>
-                        <TableHeader>
-                          <TableRow className="bg-muted/50">
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
                             <TableHead className="w-[30px]">
                               <Checkbox checked={selectedStockItems.size === stockItems.length && stockItems.length > 0} onCheckedChange={(c) => toggleAllStockItems(!!c)} className="h-4 w-4" />
                             </TableHead>
-                            <TableHead className="text-xs font-semibold">품목코드</TableHead>
-                            <TableHead className="text-xs font-semibold">품목명</TableHead>
-                            <TableHead className="text-xs font-semibold text-right">현재고</TableHead>
-                            <TableHead className="text-xs font-semibold text-right">안전재고</TableHead>
-                            <TableHead className="text-xs font-semibold text-right">부족수량</TableHead>
-                            <TableHead className="text-xs font-semibold text-right">권장생산량</TableHead>
-                            <TableHead className="text-xs font-semibold">최종입고일</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">현재고</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">안전재고</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부족수량</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">권장생산량</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최종입고일</TableHead>
                           </TableRow>
                         </TableHeader>
                         <TableBody>
@@ -1140,13 +1196,13 @@ export default function ProductionPlanManagementPage() {
                               <TableCell>
                                 <Checkbox checked={selectedStockItems.has(stock.item_code)} onCheckedChange={() => toggleStockItem(stock.item_code)} className="h-4 w-4" />
                               </TableCell>
-                              <TableCell className="text-xs">{stock.item_code}</TableCell>
-                              <TableCell className="text-xs">{stock.item_name}</TableCell>
-                              <TableCell className="text-xs text-right">{formatNumber(stock.current_qty)}</TableCell>
-                              <TableCell className="text-xs text-right">{formatNumber(stock.safety_qty)}</TableCell>
-                              <TableCell className="text-xs text-right font-semibold text-destructive">{formatNumber(stock.shortage_qty)}</TableCell>
-                              <TableCell className="text-xs text-right font-semibold text-emerald-600 dark:text-emerald-400">{formatNumber(stock.recommended_qty)}</TableCell>
-                              <TableCell className="text-xs">{stock.last_in_date || "-"}</TableCell>
+                              <TableCell className="text-[13px]">{stock.item_code}</TableCell>
+                              <TableCell className="text-[13px]">{stock.item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right">{formatNumber(stock.current_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right">{formatNumber(stock.safety_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold text-destructive">{formatNumber(stock.shortage_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold text-success">{formatNumber(stock.recommended_qty)}</TableCell>
+                              <TableCell className="text-[13px]">{stock.last_in_date || "-"}</TableCell>
                             </TableRow>
                           ))}
                         </TableBody>
@@ -1163,7 +1219,7 @@ export default function ProductionPlanManagementPage() {
 
         {/* 오른쪽 패널 — 타임라인 */}
         <ResizablePanel defaultSize={55} minSize={30}>
-          <div className="flex h-full flex-col rounded-lg border bg-background shadow-sm">
+          <div className="flex h-full flex-col rounded-lg border bg-card">
             <Tabs value={rightTab} onValueChange={setRightTab} className="flex h-full flex-col">
               <div className="shrink-0 border-b bg-muted/30 px-5">
                 <TabsList className="h-11 bg-transparent gap-1">
@@ -1278,7 +1334,7 @@ export default function ProductionPlanManagementPage() {
                         </label>
                       </div>
                     </div>
-                    <div className="flex-1 rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-4">
+                    <div className="flex-1 rounded-lg border border-warning/20 bg-warning/5 p-4">
                       <p className="font-semibold text-foreground text-sm mb-2">반제품 계획 안내</p>
                       <ul className="text-xs text-foreground space-y-1 leading-relaxed">
                         <li>완제품 생산계획 기준으로 필요한 반제품 계획 자동 생성</li>
@@ -1335,15 +1391,15 @@ export default function ProductionPlanManagementPage() {
                 <div className="grid grid-cols-2 gap-3">
                   <div>
                     <Label className="text-xs">품목코드</Label>
-                    <Input value={selectedPlan.item_code} readOnly className="h-8 text-xs bg-muted/50" />
+                    <Input value={selectedPlan.item_code} readOnly className="h-9 text-xs bg-muted/50" />
                   </div>
                   <div>
                     <Label className="text-xs">품목명</Label>
-                    <Input value={selectedPlan.item_name || ""} readOnly className="h-8 text-xs bg-muted/50" />
+                    <Input value={selectedPlan.item_name || ""} readOnly className="h-9 text-xs bg-muted/50" />
                   </div>
                   <div>
                     <Label className="text-xs">계획번호</Label>
-                    <Input value={selectedPlan.plan_no || ""} readOnly className="h-8 text-xs bg-muted/50" />
+                    <Input value={selectedPlan.plan_no || ""} readOnly className="h-9 text-xs bg-muted/50" />
                   </div>
                   <div>
                     <Label className="text-xs">상태</Label>
@@ -1359,39 +1415,39 @@ export default function ProductionPlanManagementPage() {
                 <div className="grid grid-cols-2 gap-3">
                   <div>
                     <Label className="text-xs">총 생산수량</Label>
-                    <Input type="number" value={modalQuantity} onChange={(e) => setModalQuantity(Number(e.target.value))} className="h-8 text-xs" min={0} />
+                    <Input type="number" value={modalQuantity} onChange={(e) => setModalQuantity(Number(e.target.value))} className="h-9 text-xs" min={0} />
                   </div>
                   <div>
                     <Label className="text-xs">설비</Label>
                     <Select value={modalEquipmentId} onValueChange={setModalEquipmentId}>
-                      <SelectTrigger className="h-8 text-xs">
+                      <SelectTrigger className="h-9 text-xs">
                         <SelectValue placeholder="설비 선택" />
                       </SelectTrigger>
                       <SelectContent>
                         <SelectItem value="none">미지정</SelectItem>
                         {equipmentList.map((eq) => (
-                          <SelectItem key={eq.equipment_id} value={String(eq.equipment_id)}>
-                            {eq.equipment_name} ({eq.equipment_id})
+                          <SelectItem key={eq.id} value={eq.equipment_code || eq.id}>
+                            {eq.equipment_name} ({eq.equipment_code})
                           </SelectItem>
                         ))}
                       </SelectContent>
                     </Select>
                   </div>
                 </div>
-                <div className="mt-3 rounded-lg border border-emerald-500/20 bg-emerald-500/5 p-3">
+                <div className="mt-3 rounded-lg border border-success/20 bg-success/5 p-3">
                   <p className="text-xs font-semibold text-foreground mb-2">계획 기간 설정</p>
                   <div className="grid grid-cols-3 gap-3">
                     <div>
                       <Label className="text-[11px] text-muted-foreground">시작일</Label>
-                      <FormDatePicker value={modalStartDate} onChange={setModalStartDate} placeholder="시작일" />
+                      <Input type="date" value={modalStartDate} onChange={(e) => setModalStartDate(e.target.value)} className="h-9 text-xs" />
                     </div>
                     <div>
                       <Label className="text-[11px] text-muted-foreground">종료일</Label>
-                      <FormDatePicker value={modalEndDate} onChange={setModalEndDate} placeholder="종료일" />
+                      <Input type="date" value={modalEndDate} onChange={(e) => setModalEndDate(e.target.value)} className="h-9 text-xs" />
                     </div>
                     <div>
                       <Label className="text-[11px] text-muted-foreground">생산 기간</Label>
-                      <div className="flex h-8 items-center justify-center rounded-md border bg-background text-xs font-semibold text-primary">
+                      <div className="flex h-9 items-center justify-center rounded-md border bg-muted/50 text-xs font-semibold text-primary">
                         {modalStartDate && modalEndDate
                           ? `${Math.ceil((new Date(modalEndDate).getTime() - new Date(modalStartDate).getTime()) / (1000 * 60 * 60 * 24) + 1)}일`
                           : "-"}
@@ -1401,7 +1457,7 @@ export default function ProductionPlanManagementPage() {
                 </div>
               </div>
 
-              <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-4">
+              <div className="rounded-lg border border-warning/20 bg-warning/5 p-4">
                 <div className="flex items-center justify-between mb-2">
                   <p className="text-sm font-semibold flex items-center gap-1.5">
                     <Scissors className="h-4 w-4" />
@@ -1409,7 +1465,8 @@ export default function ProductionPlanManagementPage() {
                   </p>
                   <Button
                     size="sm"
-                    className="h-7 text-xs bg-gradient-to-br from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700"
+                    variant="warning"
+                    className="h-7 text-xs"
                     onClick={() => {
                       const qty = Math.floor(modalQuantity / 2);
                       if (qty > 0) handleSplitSchedule(qty);
@@ -1426,15 +1483,15 @@ export default function ProductionPlanManagementPage() {
                 <div className="grid grid-cols-2 gap-3">
                   <div>
                     <Label className="text-xs">담당자</Label>
-                    <Input value={modalManager} onChange={(e) => setModalManager(e.target.value)} className="h-8 text-xs" placeholder="담당자명" />
+                    <Input value={modalManager} onChange={(e) => setModalManager(e.target.value)} className="h-9 text-xs" placeholder="담당자명" />
                   </div>
                   <div>
                     <Label className="text-xs">작업지시번호</Label>
-                    <Input value={modalWorkOrderNo} onChange={(e) => setModalWorkOrderNo(e.target.value)} className="h-8 text-xs" placeholder="자동생성" />
+                    <Input value={modalWorkOrderNo} onChange={(e) => setModalWorkOrderNo(e.target.value)} className="h-9 text-xs" placeholder="자동생성" />
                   </div>
                   <div className="col-span-2">
                     <Label className="text-xs">비고</Label>
-                    <Input value={modalRemarks} onChange={(e) => setModalRemarks(e.target.value)} className="h-8 text-xs" placeholder="비고사항 입력" />
+                    <Input value={modalRemarks} onChange={(e) => setModalRemarks(e.target.value)} className="h-9 text-xs" placeholder="비고사항 입력" />
                   </div>
                 </div>
               </div>
@@ -1442,7 +1499,7 @@ export default function ProductionPlanManagementPage() {
           )}
 
           <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="destructive" onClick={handleDeletePlan} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+            <Button variant="outline" onClick={handleDeletePlan} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10">
               <Trash2 className="mr-1 h-3.5 w-3.5" />
               삭제
             </Button>
@@ -1498,9 +1555,9 @@ export default function ProductionPlanManagementPage() {
               </div>
             </div>
 
-            <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-3">
+            <div className="rounded-lg border border-warning/20 bg-warning/5 p-3">
               <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
-                <AlertTriangle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+                <AlertTriangle className="h-4 w-4 text-warning" />
                 주의사항
               </p>
               <ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside leading-relaxed">
@@ -1579,9 +1636,9 @@ export default function ProductionPlanManagementPage() {
               </div>
             </div>
 
-            <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-3">
+            <div className="rounded-lg border border-warning/20 bg-warning/5 p-3">
               <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
-                <AlertTriangle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+                <AlertTriangle className="h-4 w-4 text-warning" />
                 주의사항
               </p>
               <ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside leading-relaxed">
@@ -1636,11 +1693,11 @@ export default function ProductionPlanManagementPage() {
                   <p className="text-2xl font-bold text-foreground">{previewData.summary?.total ?? 0}</p>
                   <p className="text-xs text-muted-foreground mt-1">총 계획</p>
                 </div>
-                <div className="rounded-lg border bg-emerald-500/10 p-3 text-center">
+                <div className="rounded-lg border bg-success/10 p-3 text-center">
                   <p className="text-2xl font-bold text-foreground">{previewData.summary?.new_count ?? 0}</p>
                   <p className="text-xs text-muted-foreground mt-1">신규 생성</p>
                 </div>
-                <div className="rounded-lg border bg-yellow-500/10 p-3 text-center">
+                <div className="rounded-lg border bg-warning/10 p-3 text-center">
                   <p className="text-2xl font-bold text-foreground">{previewData.summary?.kept_count ?? 0}</p>
                   <p className="text-xs text-muted-foreground mt-1">유지됨</p>
                 </div>
@@ -1652,29 +1709,29 @@ export default function ProductionPlanManagementPage() {
 
               {(previewData.schedules?.length || 0) > 0 && (
                 <div>
-                  <p className="text-sm font-semibold mb-2 text-emerald-600 dark:text-emerald-400 flex items-center gap-1.5">
+                  <p className="text-sm font-semibold mb-2 text-success flex items-center gap-1.5">
                     <Zap className="h-4 w-4" />
                     신규 생성 ({previewData.schedules?.length || 0}건)
                   </p>
-                  <div className="rounded-md border border-emerald-500/20 overflow-x-auto">
+                  <div className="rounded-md border border-success/20 overflow-x-auto">
                     <Table>
-                      <TableHeader>
-                        <TableRow className="bg-emerald-500/5">
-                          <TableHead className="text-xs font-semibold">품목코드</TableHead>
-                          <TableHead className="text-xs font-semibold">품목명</TableHead>
-                          <TableHead className="text-xs font-semibold text-right">수량</TableHead>
-                          <TableHead className="text-xs font-semibold">시작일</TableHead>
-                          <TableHead className="text-xs font-semibold">종료일</TableHead>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">시작일</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">종료일</TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
                         {(previewData.schedules || []).map((s: any, idx: number) => (
                           <TableRow key={`new-${idx}`}>
-                            <TableCell className="text-xs">{s.item_code}</TableCell>
-                            <TableCell className="text-xs">{s.item_name}</TableCell>
-                            <TableCell className="text-xs text-right">{formatNumber(s.plan_qty || s.required_qty)}</TableCell>
-                            <TableCell className="text-xs">{s.start_date?.split("T")[0]}</TableCell>
-                            <TableCell className="text-xs">{s.end_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty || s.required_qty)}</TableCell>
+                            <TableCell className="text-[13px]">{s.start_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.end_date?.split("T")[0]}</TableCell>
                           </TableRow>
                         ))}
                       </TableBody>
@@ -1691,25 +1748,25 @@ export default function ProductionPlanManagementPage() {
                   </p>
                   <div className="rounded-md border border-destructive/20 overflow-x-auto">
                     <Table>
-                      <TableHeader>
-                        <TableRow className="bg-destructive/5">
-                          <TableHead className="text-xs font-semibold">계획번호</TableHead>
-                          <TableHead className="text-xs font-semibold">품목코드</TableHead>
-                          <TableHead className="text-xs font-semibold">품목명</TableHead>
-                          <TableHead className="text-xs font-semibold text-right">수량</TableHead>
-                          <TableHead className="text-xs font-semibold">시작일</TableHead>
-                          <TableHead className="text-xs font-semibold">종료일</TableHead>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">시작일</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">종료일</TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
                         {(previewData.deletedSchedules || []).map((s: any, idx: number) => (
                           <TableRow key={`del-${idx}`} className="text-destructive/80">
-                            <TableCell className="text-xs">{s.plan_no || "-"}</TableCell>
-                            <TableCell className="text-xs">{s.item_code}</TableCell>
-                            <TableCell className="text-xs">{s.item_name}</TableCell>
-                            <TableCell className="text-xs text-right">{formatNumber(s.plan_qty)}</TableCell>
-                            <TableCell className="text-xs">{s.start_date?.split("T")[0]}</TableCell>
-                            <TableCell className="text-xs">{s.end_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.plan_no || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty)}</TableCell>
+                            <TableCell className="text-[13px]">{s.start_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.end_date?.split("T")[0]}</TableCell>
                           </TableRow>
                         ))}
                       </TableBody>
@@ -1720,29 +1777,29 @@ export default function ProductionPlanManagementPage() {
 
               {(previewData.keptSchedules?.length || 0) > 0 && (
                 <div>
-                  <p className="text-sm font-semibold mb-2 text-yellow-600 dark:text-yellow-400 flex items-center gap-1.5">
+                  <p className="text-sm font-semibold mb-2 text-warning flex items-center gap-1.5">
                     <Package className="h-4 w-4" />
                     유지됨 ({previewData.keptSchedules?.length || 0}건)
                   </p>
-                  <div className="rounded-md border border-yellow-500/20 overflow-x-auto">
+                  <div className="rounded-md border border-warning/20 overflow-x-auto">
                     <Table>
-                      <TableHeader>
-                        <TableRow className="bg-yellow-500/5">
-                          <TableHead className="text-xs font-semibold">계획번호</TableHead>
-                          <TableHead className="text-xs font-semibold">품목코드</TableHead>
-                          <TableHead className="text-xs font-semibold">품목명</TableHead>
-                          <TableHead className="text-xs font-semibold text-right">수량</TableHead>
-                          <TableHead className="text-xs font-semibold">상태</TableHead>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
                         {(previewData.keptSchedules || []).map((s: any, idx: number) => (
                           <TableRow key={`kept-${idx}`}>
-                            <TableCell className="text-xs">{s.plan_no || "-"}</TableCell>
-                            <TableCell className="text-xs">{s.item_code}</TableCell>
-                            <TableCell className="text-xs">{s.item_name}</TableCell>
-                            <TableCell className="text-xs text-right">{formatNumber(s.plan_qty)}</TableCell>
-                            <TableCell className="text-xs">
+                            <TableCell className="text-[13px]">{s.plan_no || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty)}</TableCell>
+                            <TableCell className="text-[13px]">
                               <Badge variant="outline" className="text-[10px]">{STATUS_LABEL[s.status] || s.status}</Badge>
                             </TableCell>
                           </TableRow>
@@ -1776,16 +1833,18 @@ export default function ProductionPlanManagementPage() {
         }}
       />
 
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
       {/* ConfirmDialog 렌더 */}
       {ConfirmDialogComponent}
-
-      <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName="production_plan_mng"
-        settingsId="production-plan"
-        onSave={applyTableSettings}
-      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_29/production/process-info/ItemRoutingTab.tsx b/frontend/app/(main)/COMPANY_29/production/process-info/ItemRoutingTab.tsx
index 655b9c69..a5b136c2 100644
--- a/frontend/app/(main)/COMPANY_29/production/process-info/ItemRoutingTab.tsx
+++ b/frontend/app/(main)/COMPANY_29/production/process-info/ItemRoutingTab.tsx
@@ -5,7 +5,15 @@ import { GitBranch, Loader2, PackagePlus, Pencil, Plus, Save, Search, Star, Tras
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import {
   Dialog,
   DialogContent,
@@ -14,11 +22,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import {
   createRoutingVersion,
   getProcessList,
@@ -90,7 +93,6 @@ export function ItemRoutingTab() {
   const [formOutsource, setFormOutsource] = useState("");
   const [detailSubmitting, setDetailSubmitting] = useState(false);
 
-  // 품목 등록 모달 state
   const [registerDialogOpen, setRegisterDialogOpen] = useState(false);
   const [registerSearch, setRegisterSearch] = useState("");
   const [registerSearchDebounced, setRegisterSearchDebounced] = useState("");
@@ -116,7 +118,7 @@ export function ItemRoutingTab() {
       if (res.success && res.data) {
         setItems(res.data);
       } else {
-        toast.error(res.message || "품목 목록을 불러오지 못했습니다.");
+        toast.error(res.message || "품목 목록을 불러오지 못했어요");
         setItems([]);
       }
     } finally {
@@ -133,7 +135,7 @@ export function ItemRoutingTab() {
     try {
       const procRes = await getProcessList({ useYn: "Y" });
       if (!procRes.success || !procRes.data) {
-        toast.error(procRes.message || "공정 목록을 불러오지 못했습니다.");
+        toast.error(procRes.message || "공정 목록을 불러오지 못했어요");
         setProcesses([]);
         return;
       }
@@ -147,7 +149,6 @@ export function ItemRoutingTab() {
     void loadProcesses();
   }, [loadProcesses]);
 
-  // 등록 모달 품목 검색
   const loadRegisterItems = useCallback(async (search: string) => {
     setRegisterLoading(true);
     try {
@@ -167,12 +168,11 @@ export function ItemRoutingTab() {
     void loadRegisterItems(registerSearchDebounced);
   }, [registerSearchDebounced, registerDialogOpen, loadRegisterItems]);
 
-  // 이미 등록된 품목인지 판별 (item_code 기준)
   const registeredItemCodes = useMemo(() => new Set(items.map((i) => i.item_code)), [items]);
 
   const handleRegisterItems = async () => {
     if (registerSelectedIds.size === 0) {
-      toast.error("등록할 품목을 선택하세요.");
+      toast.error("등록할 품목을 선택해주세요");
       return;
     }
     setRegisterSubmitting(true);
@@ -184,13 +184,13 @@ export function ItemRoutingTab() {
       }));
       const res = await registerItemsBatch(batchItems);
       if (res.success) {
-        toast.success(`${batchItems.length}건 품목이 등록되었습니다.`);
+        toast.success(`${batchItems.length}건 품목이 등록되었어요`);
         setRegisterDialogOpen(false);
         setRegisterSearch("");
         setRegisterSelectedIds(new Set());
         void loadItems(debouncedSearch);
       } else {
-        toast.error(res.message || "품목 등록에 실패했습니다.");
+        toast.error(res.message || "품목 등록에 실패했어요");
       }
     } finally {
       setRegisterSubmitting(false);
@@ -206,7 +206,7 @@ export function ItemRoutingTab() {
     try {
       const res = await getRoutingVersions(item.item_code);
       if (!res.success || !res.data) {
-        toast.error(res.message || "라우팅 버전을 불러오지 못했습니다.");
+        toast.error(res.message || "라우팅 버전을 불러오지 못했어요");
         return;
       }
       const list = res.data.map((v) => ({ ...v, is_default: normalizeDefaultFlag(v) }));
@@ -233,7 +233,7 @@ export function ItemRoutingTab() {
       if (res.success && res.data) {
         setDetails(sortDetailsBySeq(res.data));
       } else {
-        toast.error(res.message || "라우팅 공정을 불러오지 못했습니다.");
+        toast.error(res.message || "라우팅 공정을 불러오지 못했어요");
         setDetails([]);
       }
     } finally {
@@ -253,7 +253,7 @@ export function ItemRoutingTab() {
 
   const openAddDetailDialog = () => {
     if (!selectedVersionId) {
-      toast.error("먼저 라우팅 버전을 선택하세요.");
+      toast.error("먼저 라우팅 버전을 선택해주세요");
       return;
     }
     setDetailDialogMode("add");
@@ -271,17 +271,17 @@ export function ItemRoutingTab() {
 
   const openEditDetailDialog = () => {
     if (!selectedVersionId) {
-      toast.error("먼저 라우팅 버전을 선택하세요.");
+      toast.error("먼저 라우팅 버전을 선택해주세요");
       return;
     }
     if (selectedDetailIds.size !== 1) {
-      toast.error("수정할 공정 한 건만 선택하세요.");
+      toast.error("수정할 공정 한 건만 선택해주세요");
       return;
     }
     const id = [...selectedDetailIds][0];
     const row = details.find((d) => d.id === id);
     if (!row) {
-      toast.error("선택한 공정을 찾을 수 없습니다.");
+      toast.error("선택한 공정을 찾을 수 없어요");
       return;
     }
     setDetailDialogMode("edit");
@@ -299,17 +299,17 @@ export function ItemRoutingTab() {
   const submitDetailForm = () => {
     if (!selectedVersionId) return;
     if (!formProcessCode) {
-      toast.error("공정을 선택하세요.");
+      toast.error("공정을 선택해주세요");
       return;
     }
     const seq = parseInt(formSeqNo, 10);
     if (Number.isNaN(seq) || seq < 1) {
-      toast.error("올바른 순번을 입력하세요.");
+      toast.error("올바른 순번을 입력해주세요");
       return;
     }
     const st = formStandardTime.trim();
     if (st !== "" && Number.isNaN(Number(st))) {
-      toast.error("표준작업시간은 숫자로 입력하세요.");
+      toast.error("표준작업시간은 숫자로 입력해주세요");
       return;
     }
     const proc = processes.find((p) => p.process_code === formProcessCode);
@@ -331,7 +331,7 @@ export function ItemRoutingTab() {
           outsource_supplier: outsource,
         };
         setDetails((prev) => sortDetailsBySeq([...prev, newRow]));
-        toast.success("공정이 추가되었습니다. 저장을 눌러 반영하세요.");
+        toast.success("공정이 추가되었어요. 저장을 눌러 반영해주세요");
       } else if (editingDetailId) {
         setDetails((prev) =>
           sortDetailsBySeq(
@@ -352,7 +352,7 @@ export function ItemRoutingTab() {
             ),
           ),
         );
-        toast.success("공정이 수정되었습니다. 저장을 눌러 반영하세요.");
+        toast.success("공정이 수정되었어요. 저장을 눌러 반영해주세요");
       }
       setDetailDialogOpen(false);
     } finally {
@@ -362,36 +362,17 @@ export function ItemRoutingTab() {
 
   const deleteSelectedDetails = () => {
     if (selectedDetailIds.size === 0) {
-      toast.error("삭제할 공정을 선택하세요.");
+      toast.error("삭제할 공정을 선택해주세요");
       return;
     }
     setDetails((prev) => prev.filter((d) => !selectedDetailIds.has(d.id)));
     setSelectedDetailIds(new Set());
-    toast.success("선택한 공정이 목록에서 제거되었습니다. 저장을 눌러 반영하세요.");
+    toast.success("선택한 공정이 제거되었어요. 저장을 눌러 반영해주세요");
   };
 
-  const toggleDetailSelected = (id: string, checked: boolean) => {
-    setSelectedDetailIds((prev) => {
-      const next = new Set(prev);
-      if (checked) next.add(id);
-      else next.delete(id);
-      return next;
-    });
-  };
-
-  const toggleAllDetails = (checked: boolean) => {
-    if (!checked) {
-      setSelectedDetailIds(new Set());
-      return;
-    }
-    setSelectedDetailIds(new Set(details.map((d) => d.id)));
-  };
-
-  const allDetailsSelected = details.length > 0 && details.every((d) => selectedDetailIds.has(d.id));
-
   const persistDetails = async () => {
     if (!selectedVersionId) {
-      toast.error("저장할 버전이 없습니다.");
+      toast.error("저장할 버전이 없어요");
       return;
     }
     const payload = details.map((d) => ({
@@ -408,10 +389,10 @@ export function ItemRoutingTab() {
     try {
       const res = await saveRoutingDetails(selectedVersionId, payload);
       if (res.success) {
-        toast.success("저장되었습니다.");
+        toast.success("저장되었어요");
         await loadDetails(selectedVersionId);
       } else {
-        toast.error(res.message || "저장에 실패했습니다.");
+        toast.error(res.message || "저장에 실패했어요");
       }
     } finally {
       setSaving(false);
@@ -422,7 +403,7 @@ export function ItemRoutingTab() {
     if (!selectedItem) return;
     const name = versionName.trim();
     if (!name) {
-      toast.error("버전명을 입력하세요.");
+      toast.error("버전명을 입력해주세요");
       return;
     }
     setVersionSubmitting(true);
@@ -434,7 +415,7 @@ export function ItemRoutingTab() {
         is_default: versionIsDefault || undefined,
       });
       if (res.success && res.data) {
-        toast.success("버전이 추가되었습니다.");
+        toast.success("버전이 추가되었어요");
         setVersionDialogOpen(false);
         setVersionName("");
         setVersionDescription("");
@@ -442,62 +423,77 @@ export function ItemRoutingTab() {
         const created = res.data as RoutingVersion;
         await loadVersions(selectedItem, created?.id);
       } else {
-        toast.error(res.message || "버전 추가에 실패했습니다.");
+        toast.error(res.message || "버전 추가에 실패했어요");
       }
     } finally {
       setVersionSubmitting(false);
     }
   };
 
+  const detailsGridData = useMemo(
+    () =>
+      details.map((d) => ({
+        ...d,
+        process_display: d.process_name || d.process_code,
+        outsource_display: d.outsource_supplier || "—",
+      })),
+    [details],
+  );
+
   return (
-    <div className="flex min-h-[420px] w-full flex-1 flex-col md:min-h-[560px]">
-      <ResizablePanelGroup
-        direction="horizontal"
-        className="border-border flex min-h-[420px] flex-1 rounded-lg border md:min-h-[560px]"
-      >
-        <ResizablePanel defaultSize={30} minSize={18} className="min-w-0">
-          <div className="flex h-full flex-col gap-3 p-3 sm:p-4">
-            <div className="flex items-center gap-2">
-              <div className="relative flex-1">
-                <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 sm:h-4 sm:w-4" />
-              <Input
-                value={searchInput}
-                onChange={(e) => setSearchInput(e.target.value)}
-                placeholder="품목코드 / 품목명 검색"
-                className="focus-visible:ring-ring h-8 pl-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:pl-9 sm:text-sm"
-                aria-label="품목 검색"
-              />
+    <div className="flex h-full flex-col">
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+        {/* 좌측: 등록 품목 */}
+        <ResizablePanel defaultSize={30} minSize={18}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <PackagePlus className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">등록 품목</span>
+              <Badge variant="secondary" className="font-mono text-xs">
+                {items.length}건
+              </Badge>
+              <div className="ml-auto">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setRegisterSearch("");
+                    setRegisterSelectedIds(new Set());
+                    setRegisterItems([]);
+                    setRegisterDialogOpen(true);
+                  }}
+                >
+                  <Plus className="mr-1 h-3.5 w-3.5" />
+                  품목 등록
+                </Button>
               </div>
-              <Button
-                type="button"
-                size="icon"
-                variant="outline"
-                className="h-8 w-8 shrink-0 sm:h-10 sm:w-10"
-                onClick={() => {
-                  setRegisterSearch("");
-                  setRegisterSelectedIds(new Set());
-                  setRegisterItems([]);
-                  setRegisterDialogOpen(true);
-                }}
-                title="품목 등록"
-              >
-                <PackagePlus className="h-4 w-4" />
-              </Button>
             </div>
-            <div className="min-h-0 flex-1 overflow-hidden">
+
+            <div className="border-b px-3 py-2">
+              <div className="relative">
+                <Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  value={searchInput}
+                  onChange={(e) => setSearchInput(e.target.value)}
+                  placeholder="품목코드 / 품목명 검색"
+                  className="h-8 pl-8 text-xs"
+                  aria-label="품목 검색"
+                />
+              </div>
+            </div>
+
+            <div className="min-h-0 flex-1 overflow-auto p-3">
               {itemsLoading ? (
-                <div className="text-muted-foreground flex h-40 items-center justify-center gap-2 text-xs sm:text-sm">
-                  <Loader2 className="text-primary h-5 w-5 animate-spin" />
-                  불러오는 중...
+                <div className="flex items-center justify-center gap-2 py-12 text-muted-foreground">
+                  <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                  <span className="text-sm">불러오는 중...</span>
                 </div>
               ) : items.length === 0 ? (
-                <div className="flex flex-col items-center justify-center gap-3 px-1 py-10">
-                  <p className="text-muted-foreground text-center text-xs sm:text-sm">등록된 품목이 없습니다.</p>
+                <div className="flex flex-col items-center justify-center gap-3 py-12">
+                  <p className="text-sm text-muted-foreground">등록된 품목이 없어요</p>
                   <Button
-                    type="button"
-                    variant="outline"
+                    variant="ghost"
                     size="sm"
-                    className="gap-1 text-xs"
                     onClick={() => {
                       setRegisterSearch("");
                       setRegisterSelectedIds(new Set());
@@ -505,12 +501,12 @@ export function ItemRoutingTab() {
                       setRegisterDialogOpen(true);
                     }}
                   >
-                    <PackagePlus className="h-3.5 w-3.5" />
+                    <PackagePlus className="mr-1 h-3.5 w-3.5" />
                     품목 등록하기
                   </Button>
                 </div>
               ) : (
-                <div className="flex h-full max-h-[calc(100vh-16rem)] flex-col gap-2 overflow-y-auto pr-1">
+                <div className="space-y-2">
                   {items.map((item) => {
                     const active = selectedItem?.id === item.id;
                     return (
@@ -519,15 +515,13 @@ export function ItemRoutingTab() {
                         type="button"
                         onClick={() => setSelectedItem(item)}
                         className={cn(
-                          "focus-visible:ring-ring w-full rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-offset-2",
-                          "border-border bg-card hover:bg-accent/50 shadow-sm",
-                          active && "border-primary ring-ring/30 ring-2",
+                          "w-full rounded-lg border p-3 text-left transition-colors",
+                          "border-border bg-card hover:bg-muted/30",
+                          active && "border-primary ring-2 ring-ring/30",
                         )}
                       >
-                        <p className="text-foreground text-xs font-medium sm:text-sm">{item.item_code}</p>
-                        <p className="text-muted-foreground mt-0.5 line-clamp-2 text-[11px] sm:text-xs">
-                          {item.item_name}
-                        </p>
+                        <p className="text-sm font-medium text-foreground">{item.item_code}</p>
+                        <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">{item.item_name}</p>
                       </button>
                     );
                   })}
@@ -539,73 +533,72 @@ export function ItemRoutingTab() {
 
         <ResizableHandle withHandle />
 
-        <ResizablePanel defaultSize={70} minSize={35} className="min-w-0">
-          <div className="flex h-full min-h-0 flex-col">
+        {/* 우측: 버전 + 라우팅 상세 */}
+        <ResizablePanel defaultSize={70} minSize={35}>
+          <div className="flex h-full flex-col">
             {!selectedItem ? (
-              <div className="text-muted-foreground flex flex-1 flex-col items-center justify-center gap-2 px-4 text-center text-xs sm:text-sm">
-                <GitBranch className="h-8 w-8 opacity-50" aria-hidden />
-                좌측에서 품목을 선택하면 라우팅을 관리할 수 있습니다.
+              <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+                <GitBranch className="h-10 w-10 opacity-40" />
+                <p className="text-sm font-medium text-foreground">좌측에서 품목을 선택해주세요</p>
+                <p className="max-w-xs text-xs">품목을 선택하면 라우팅 버전과 공정을 관리할 수 있어요</p>
               </div>
             ) : (
               <>
-                <div className="border-border flex shrink-0 flex-col gap-3 border-b p-3 sm:p-4">
-                  <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                    <div className="min-w-0">
-                      <p className="text-foreground text-xs font-semibold sm:text-sm">{selectedItem.item_name}</p>
-                      <p className="text-muted-foreground mt-0.5 text-[11px] sm:text-xs">
-                        품목코드 {selectedItem.item_code}
-                      </p>
-                    </div>
-                    <div className="flex shrink-0 gap-2">
-                      <Button
-                        type="button"
-                        size="sm"
-                        variant="destructive"
-                        className="h-8 gap-1 text-xs sm:h-9 sm:text-sm"
-                        onClick={async () => {
-                          if (!selectedItem.registered_id) return;
-                          const res = await unregisterItem(selectedItem.registered_id);
-                          if (res.success) {
-                            toast.success("품목 등록이 해제되었습니다.");
-                            setSelectedItem(null);
-                            void loadItems(debouncedSearch);
-                          } else {
-                            toast.error(res.message || "등록 해제에 실패했습니다.");
-                          }
-                        }}
-                      >
-                        <Trash2 className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
-                        등록 해제
-                      </Button>
-                      <Button
-                        type="button"
-                        size="sm"
-                        className="h-8 gap-1 text-xs sm:h-9 sm:text-sm"
-                        onClick={() => {
-                          setVersionName("");
-                          setVersionDescription("");
-                          setVersionIsDefault(false);
-                          setVersionDialogOpen(true);
-                        }}
-                      >
-                        <Plus className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
-                        버전 추가
-                      </Button>
-                    </div>
+                {/* 패널 헤더 */}
+                <div className="flex items-center gap-3 border-b bg-muted/30 px-4 py-2">
+                  <GitBranch className="h-4 w-4 shrink-0 text-muted-foreground" />
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-semibold">{selectedItem.item_name}</p>
+                    <p className="text-xs text-muted-foreground">품목코드 {selectedItem.item_code}</p>
                   </div>
+                  <div className="flex shrink-0 gap-2">
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={async () => {
+                        if (!selectedItem.registered_id) return;
+                        const res = await unregisterItem(selectedItem.registered_id);
+                        if (res.success) {
+                          toast.success("품목 등록이 해제되었어요");
+                          setSelectedItem(null);
+                          void loadItems(debouncedSearch);
+                        } else {
+                          toast.error(res.message || "등록 해제에 실패했어요");
+                        }
+                      }}
+                    >
+                      <Trash2 className="mr-1 h-3.5 w-3.5" />
+                      등록 해제
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={() => {
+                        setVersionName("");
+                        setVersionDescription("");
+                        setVersionIsDefault(false);
+                        setVersionDialogOpen(true);
+                      }}
+                    >
+                      <Plus className="mr-1 h-3.5 w-3.5" />
+                      버전 추가
+                    </Button>
+                  </div>
+                </div>
 
-                  <div className="flex flex-wrap items-center gap-2">
-                    {versionsLoading ? (
-                      <div className="text-muted-foreground flex items-center gap-2 text-xs sm:text-sm">
-                        <Loader2 className="text-primary h-4 w-4 animate-spin" />
-                        버전 불러오는 중...
-                      </div>
-                    ) : versions.length === 0 ? (
-                      <p className="text-muted-foreground text-xs sm:text-sm">
-                        등록된 버전이 없습니다. 버전을 추가하세요.
-                      </p>
-                    ) : (
-                      versions.map((v) => {
+                {/* 버전 pills */}
+                <div className="border-b bg-muted/30 px-4 py-2">
+                  {versionsLoading ? (
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Loader2 className="h-4 w-4 animate-spin text-primary" />
+                      버전 불러오는 중...
+                    </div>
+                  ) : versions.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">
+                      등록된 버전이 없어요. 버전을 추가해주세요.
+                    </p>
+                  ) : (
+                    <div className="flex flex-wrap items-center gap-2">
+                      {versions.map((v) => {
                         const selected = v.id === selectedVersionId;
                         const def = normalizeDefaultFlag(v);
                         return (
@@ -614,7 +607,7 @@ export function ItemRoutingTab() {
                             type="button"
                             onClick={() => setSelectedVersionId(v.id)}
                             className={cn(
-                              "focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm",
+                              "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors",
                               selected
                                 ? "border-primary bg-primary text-primary-foreground"
                                 : "border-border bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -623,7 +616,7 @@ export function ItemRoutingTab() {
                             {def && (
                               <Star
                                 className={cn(
-                                  "h-3.5 w-3.5 sm:h-4 sm:w-4",
+                                  "h-3.5 w-3.5",
                                   selected ? "fill-primary-foreground" : "fill-warning text-warning",
                                 )}
                                 aria-label="기본 버전"
@@ -632,136 +625,88 @@ export function ItemRoutingTab() {
                             {v.version_name}
                           </button>
                         );
-                      })
+                      })}
+                    </div>
+                  )}
+                </div>
+
+                {/* 액션 바 */}
+                <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-semibold">라우팅 공정</span>
+                    <Badge variant="secondary" className="font-mono text-xs">
+                      {details.length}건
+                    </Badge>
+                  </div>
+                  <div className="flex gap-2">
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={openAddDetailDialog}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Plus className="mr-1 h-3.5 w-3.5" />
+                    공정 추가
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={openEditDetailDialog}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Pencil className="mr-1 h-3.5 w-3.5" />
+                    수정
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={deleteSelectedDetails}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Trash2 className="mr-1 h-3.5 w-3.5" />
+                    선택 삭제
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={() => void persistDetails()}
+                    disabled={!selectedVersionId || detailsLoading || saving}
+                  >
+                    {saving ? (
+                      <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Save className="mr-1 h-3.5 w-3.5" />
                     )}
+                    저장
+                  </Button>
                   </div>
                 </div>
 
-                <div className="flex min-h-0 flex-1 flex-col gap-3 p-3 sm:p-4">
-                  <div className="flex flex-wrap gap-2">
-                    <Button
-                      type="button"
-                      variant="secondary"
-                      size="sm"
-                      className="h-8 text-xs sm:h-9 sm:text-sm"
-                      onClick={openAddDetailDialog}
-                      disabled={!selectedVersionId || detailsLoading}
-                    >
-                      <Plus className="mr-1 h-3.5 w-3.5" />
-                      공정 추가
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="secondary"
-                      size="sm"
-                      className="h-8 text-xs sm:h-9 sm:text-sm"
-                      onClick={openEditDetailDialog}
-                      disabled={!selectedVersionId || detailsLoading}
-                    >
-                      <Pencil className="mr-1 h-3.5 w-3.5" />
-                      수정
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      className="h-8 text-xs sm:h-9 sm:text-sm"
-                      onClick={deleteSelectedDetails}
-                      disabled={!selectedVersionId || detailsLoading}
-                    >
-                      <Trash2 className="mr-1 h-3.5 w-3.5" />
-                      선택 삭제
-                    </Button>
-                    <Button
-                      type="button"
-                      size="sm"
-                      className="h-8 text-xs sm:h-9 sm:text-sm"
-                      onClick={() => void persistDetails()}
-                      disabled={!selectedVersionId || detailsLoading || saving}
-                    >
-                      {saving ? (
-                        <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
-                      ) : (
-                        <Save className="mr-1 h-3.5 w-3.5" />
-                      )}
-                      저장
-                    </Button>
-                  </div>
-
-                  <div className="border-border min-h-0 flex-1 overflow-hidden rounded-md border">
-                    {detailsLoading ? (
-                      <div className="text-muted-foreground flex h-48 items-center justify-center gap-2 text-xs sm:text-sm">
-                        <Loader2 className="text-primary h-5 w-5 animate-spin" />
-                        공정 순서 불러오는 중...
-                      </div>
-                    ) : !selectedVersionId ? (
-                      <p className="text-muted-foreground p-6 text-center text-xs sm:text-sm">버전을 선택하세요.</p>
-                    ) : (
-                      <div className="h-full max-h-[calc(100vh-20rem)] overflow-auto">
-                        <Table>
-                          <TableHeader>
-                            <TableRow className="hover:bg-transparent">
-                              <TableHead className="w-10">
-                                <Checkbox
-                                  checked={allDetailsSelected}
-                                  onCheckedChange={(c) => toggleAllDetails(c === true)}
-                                  aria-label="전체 선택"
-                                  className="focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2"
-                                />
-                              </TableHead>
-                              <TableHead className="text-xs sm:text-sm">순번</TableHead>
-                              <TableHead className="text-xs sm:text-sm">공정명</TableHead>
-                              <TableHead className="text-xs sm:text-sm">필수</TableHead>
-                              <TableHead className="text-xs sm:text-sm">순서고정</TableHead>
-                              <TableHead className="text-xs sm:text-sm">작업구분</TableHead>
-                              <TableHead className="text-xs sm:text-sm">표준시간</TableHead>
-                              <TableHead className="text-xs sm:text-sm">외주업체</TableHead>
-                            </TableRow>
-                          </TableHeader>
-                          <TableBody>
-                            {details.length === 0 ? (
-                              <TableRow>
-                                <TableCell
-                                  colSpan={8}
-                                  className="text-muted-foreground py-10 text-center text-xs sm:text-sm"
-                                >
-                                  등록된 공정이 없습니다.
-                                </TableCell>
-                              </TableRow>
-                            ) : (
-                              details.map((row) => (
-                                <TableRow key={row.id}>
-                                  <TableCell>
-                                    <Checkbox
-                                      checked={selectedDetailIds.has(row.id)}
-                                      onCheckedChange={(c) => toggleDetailSelected(row.id, c === true)}
-                                      aria-label={`${row.process_name || row.process_code} 선택`}
-                                      className="focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2"
-                                    />
-                                  </TableCell>
-                                  <TableCell className="text-xs sm:text-sm">{row.seq_no}</TableCell>
-                                  <TableCell className="text-xs sm:text-sm">
-                                    {row.process_name || row.process_code}
-                                  </TableCell>
-                                  <TableCell className="text-xs sm:text-sm">
-                                    {row.is_required === "N" ? "N" : "Y"}
-                                  </TableCell>
-                                  <TableCell className="text-xs sm:text-sm">
-                                    {row.is_fixed_order === "N" ? "N" : "Y"}
-                                  </TableCell>
-                                  <TableCell className="text-xs sm:text-sm">{row.work_type}</TableCell>
-                                  <TableCell className="text-xs sm:text-sm">{row.standard_time}</TableCell>
-                                  <TableCell className="max-w-[140px] truncate text-xs sm:text-sm">
-                                    {row.outsource_supplier || "—"}
-                                  </TableCell>
-                                </TableRow>
-                              ))
-                            )}
-                          </TableBody>
-                        </Table>
-                      </div>
-                    )}
-                  </div>
+                {/* 라우팅 공정 테이블 */}
+                <div className="min-h-0 flex-1 overflow-auto">
+                  {!selectedVersionId ? (
+                    <p className="py-8 text-center text-sm text-muted-foreground">버전을 선택해주세요</p>
+                  ) : (
+                    <EDataTable
+                      columns={[
+                        { key: "seq_no", label: "순번", width: "w-[80px]", align: "center" as const },
+                        { key: "process_display", label: "공정명" },
+                        { key: "is_required", label: "필수", width: "w-[80px]", align: "center" as const },
+                        { key: "is_fixed_order", label: "순서고정", width: "w-[90px]", align: "center" as const },
+                        { key: "work_type", label: "작업구분", width: "w-[100px]" },
+                        { key: "standard_time", label: "표준시간", width: "w-[90px]", align: "right" as const },
+                        { key: "outsource_display", label: "외주업체" },
+                      ] as EDataTableColumn[]}
+                      data={detailsGridData}
+                      rowKey={(row) => row.id}
+                      loading={detailsLoading}
+                      emptyMessage="등록된 공정이 없어요"
+                      showCheckbox
+                      checkedIds={Array.from(selectedDetailIds)}
+                      onCheckedChange={(ids) => setSelectedDetailIds(new Set(ids))}
+                      showPagination={false}
+                      draggableColumns={false}
+                    />
+                  )}
                 </div>
               </>
             )}
@@ -769,37 +714,32 @@ export function ItemRoutingTab() {
         </ResizablePanel>
       </ResizablePanelGroup>
 
+      {/* 버전 추가 모달 */}
       <Dialog open={versionDialogOpen} onOpenChange={setVersionDialogOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">라우팅 버전 추가</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              선택한 품목에 새 라우팅 버전을 추가합니다.
-            </DialogDescription>
+            <DialogTitle>라우팅 버전 추가</DialogTitle>
+            <DialogDescription>선택한 품목에 새 라우팅 버전을 추가해요</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3 sm:space-y-4">
-            <div>
-              <Label htmlFor="versionName" className="text-xs sm:text-sm">
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 버전명 <span className="text-destructive">*</span>
               </Label>
               <Input
-                id="versionName"
                 value={versionName}
                 onChange={(e) => setVersionName(e.target.value)}
                 placeholder="예: Rev.A"
-                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
-            <div>
-              <Label htmlFor="versionDesc" className="text-xs sm:text-sm">
-                설명
-              </Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설명</Label>
               <Input
-                id="versionDesc"
                 value={versionDescription}
                 onChange={(e) => setVersionDescription(e.target.value)}
                 placeholder="선택 입력"
-                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
             <div className="flex items-center gap-2">
@@ -807,178 +747,131 @@ export function ItemRoutingTab() {
                 id="versionDefault"
                 checked={versionIsDefault}
                 onCheckedChange={(c) => setVersionIsDefault(c === true)}
-                className="focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2"
               />
-              <Label htmlFor="versionDefault" className="text-xs font-normal sm:text-sm">
+              <Label htmlFor="versionDefault" className="text-sm font-normal">
                 기본 버전으로 설정
               </Label>
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setVersionDialogOpen(false)}
-              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
-            >
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setVersionDialogOpen(false)} disabled={versionSubmitting}>
               취소
             </Button>
-            <Button
-              type="button"
-              onClick={() => void submitNewVersion()}
-              disabled={versionSubmitting}
-              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
-            >
-              {versionSubmitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              추가
+            <Button onClick={() => void submitNewVersion()} disabled={versionSubmitting}>
+              {versionSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              추가해요
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
+      {/* 공정 추가/수정 모달 */}
       <Dialog open={detailDialogOpen} onOpenChange={setDetailDialogOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">
-              {detailDialogMode === "add" ? "공정 추가" : "공정 수정"}
-            </DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              라우팅 공정 순서에 반영할 내용을 입력합니다. 적용 후 저장을 눌러주세요.
-            </DialogDescription>
+            <DialogTitle>{detailDialogMode === "add" ? "공정 추가" : "공정 수정"}</DialogTitle>
+            <DialogDescription>라우팅 공정 순서에 반영할 내용을 입력해주세요</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3 sm:space-y-4">
-            <div>
-              <Label className="text-xs sm:text-sm">
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 공정 <span className="text-destructive">*</span>
               </Label>
               <Select value={formProcessCode} onValueChange={setFormProcessCode}>
-                <SelectTrigger
-                  className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
-                  aria-label="공정 선택"
-                >
+                <SelectTrigger className="h-9" size="sm">
                   <SelectValue placeholder={processesLoading ? "불러오는 중..." : "공정 선택"} />
                 </SelectTrigger>
                 <SelectContent>
                   {processes.map((p) => (
-                    <SelectItem key={p.id} value={p.process_code} className="text-xs sm:text-sm">
+                    <SelectItem key={p.id} value={p.process_code}>
                       {p.process_name} ({p.process_code})
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
-            <div>
-              <Label htmlFor="seqNo" className="text-xs sm:text-sm">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 순번 <span className="text-destructive">*</span>
               </Label>
               <Input
-                id="seqNo"
                 type="number"
                 min={1}
                 value={formSeqNo}
                 onChange={(e) => setFormSeqNo(e.target.value)}
-                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-              <div>
-                <Label className="text-xs sm:text-sm">필수여부</Label>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">필수여부</Label>
                 <Select value={formRequired} onValueChange={setFormRequired}>
-                  <SelectTrigger className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm">
+                  <SelectTrigger className="h-9" size="sm">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="Y" className="text-xs sm:text-sm">
-                      Y
-                    </SelectItem>
-                    <SelectItem value="N" className="text-xs sm:text-sm">
-                      N
-                    </SelectItem>
+                    <SelectItem value="Y">Y</SelectItem>
+                    <SelectItem value="N">N</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
-              <div>
-                <Label className="text-xs sm:text-sm">순서고정여부</Label>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">순서고정여부</Label>
                 <Select value={formFixedOrder} onValueChange={setFormFixedOrder}>
-                  <SelectTrigger className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm">
+                  <SelectTrigger className="h-9" size="sm">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="Y" className="text-xs sm:text-sm">
-                      Y
-                    </SelectItem>
-                    <SelectItem value="N" className="text-xs sm:text-sm">
-                      N
-                    </SelectItem>
+                    <SelectItem value="Y">Y</SelectItem>
+                    <SelectItem value="N">N</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
             </div>
-            <div>
-              <Label className="text-xs sm:text-sm">작업구분</Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">작업구분</Label>
               <Select value={formWorkType} onValueChange={setFormWorkType}>
-                <SelectTrigger className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm">
+                <SelectTrigger className="h-9" size="sm">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="내부" className="text-xs sm:text-sm">
-                    내부
-                  </SelectItem>
-                  <SelectItem value="외주" className="text-xs sm:text-sm">
-                    외주
-                  </SelectItem>
-                  <SelectItem value="선택가능" className="text-xs sm:text-sm">
-                    선택가능
-                  </SelectItem>
+                  <SelectItem value="내부">내부</SelectItem>
+                  <SelectItem value="외주">외주</SelectItem>
+                  <SelectItem value="선택가능">선택가능</SelectItem>
                 </SelectContent>
               </Select>
             </div>
-            <div>
-              <Label htmlFor="stdTime" className="text-xs sm:text-sm">
-                표준작업시간(분)
-              </Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">표준작업시간(분)</Label>
               <Input
-                id="stdTime"
                 type="number"
                 min={0}
                 step={1}
                 value={formStandardTime}
                 onChange={(e) => setFormStandardTime(e.target.value)}
                 placeholder="0"
-                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
             {showOutsourceField && (
-              <div>
-                <Label htmlFor="outsource" className="text-xs sm:text-sm">
-                  외주업체
-                </Label>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">외주업체</Label>
                 <Input
-                  id="outsource"
                   value={formOutsource}
                   onChange={(e) => setFormOutsource(e.target.value)}
                   placeholder="외주 업체명"
-                  className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                  className="h-9"
                 />
               </div>
             )}
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setDetailDialogOpen(false)}
-              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
-            >
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDetailDialogOpen(false)} disabled={detailSubmitting}>
               취소
             </Button>
-            <Button
-              type="button"
-              onClick={submitDetailForm}
-              disabled={detailSubmitting}
-              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
-            >
-              {detailSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : "확인"}
+            <Button onClick={submitDetailForm} disabled={detailSubmitting}>
+              {detailSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              확인
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -986,123 +879,113 @@ export function ItemRoutingTab() {
 
       {/* 품목 등록 모달 */}
       <Dialog open={registerDialogOpen} onOpenChange={setRegisterDialogOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+        <DialogContent className="max-w-2xl">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">품목 등록</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              라우팅에 추가할 품목을 검색하고 선택하세요.
-            </DialogDescription>
+            <DialogTitle>품목 등록</DialogTitle>
+            <DialogDescription>라우팅에 추가할 품목을 검색하고 선택해주세요</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3">
-            <div className="relative">
-              <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
-              <Input
-                value={registerSearch}
-                onChange={(e) => setRegisterSearch(e.target.value)}
-                placeholder="품목코드 / 품목명으로 검색"
-                className="h-8 pl-8 text-xs sm:h-10 sm:pl-9 sm:text-sm"
-                aria-label="품목 검색"
-              />
-            </div>
-            <div className="max-h-[300px] overflow-y-auto rounded-md border">
-              {registerLoading ? (
-                <div className="text-muted-foreground flex h-32 items-center justify-center gap-2 text-xs sm:text-sm">
-                  <Loader2 className="text-primary h-5 w-5 animate-spin" />
-                  검색 중...
-                </div>
-              ) : registerItems.length === 0 ? (
-                <p className="text-muted-foreground py-8 text-center text-xs sm:text-sm">
-                  {registerSearchDebounced ? "검색 결과가 없습니다." : "품목을 검색하세요."}
-                </p>
-              ) : (
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="w-10 text-center">
-                        <Checkbox
-                          checked={
-                            registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number)).length > 0 &&
-                            registerItems
-                              .filter((ri) => !registeredItemCodes.has(ri.item_number))
-                              .every((ri) => registerSelectedIds.has(ri.id))
-                          }
-                          onCheckedChange={(checked) => {
-                            const next = new Set(registerSelectedIds);
-                            const available = registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number));
-                            if (checked) {
-                              available.forEach((ri) => next.add(ri.id));
-                            } else {
-                              available.forEach((ri) => next.delete(ri.id));
-                            }
-                            setRegisterSelectedIds(next);
-                          }}
-                        />
-                      </TableHead>
-                      <TableHead className="text-xs sm:text-sm">품목코드</TableHead>
-                      <TableHead className="text-xs sm:text-sm">품목명</TableHead>
-                      <TableHead className="text-xs sm:text-sm">상태</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {registerItems.map((ri) => {
-                      const alreadyRegistered = registeredItemCodes.has(ri.item_number);
-                      return (
-                        <TableRow
-                          key={ri.id}
-                          className={cn(alreadyRegistered && "opacity-50")}
-                        >
-                          <TableCell className="text-center">
-                            <Checkbox
-                              checked={registerSelectedIds.has(ri.id)}
-                              disabled={alreadyRegistered}
-                              onCheckedChange={(checked) => {
-                                const next = new Set(registerSelectedIds);
-                                if (checked) next.add(ri.id);
-                                else next.delete(ri.id);
-                                setRegisterSelectedIds(next);
-                              }}
-                            />
-                          </TableCell>
-                          <TableCell className="text-xs sm:text-sm">{ri.item_number}</TableCell>
-                          <TableCell className="text-xs sm:text-sm">{ri.item_name}</TableCell>
-                          <TableCell className="text-xs sm:text-sm">
-                            {alreadyRegistered ? (
-                              <span className="text-muted-foreground">등록됨</span>
-                            ) : (
-                              <span className="text-primary">미등록</span>
-                            )}
-                          </TableCell>
-                        </TableRow>
-                      );
-                    })}
-                  </TableBody>
-                </Table>
-              )}
-            </div>
-            {registerSelectedIds.size > 0 && (
-              <p className="text-muted-foreground text-xs">
-                {registerSelectedIds.size}건 선택됨
+        <div className="space-y-3">
+          <div className="relative">
+            <Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={registerSearch}
+              onChange={(e) => setRegisterSearch(e.target.value)}
+              placeholder="품목코드 / 품목명으로 검색"
+              className="h-9 pl-8 text-xs"
+              aria-label="품목 검색"
+            />
+          </div>
+          <div className="max-h-[400px] overflow-auto rounded-md border">
+            {registerLoading ? (
+              <div className="flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground">
+                <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                검색 중...
+              </div>
+            ) : registerItems.length === 0 ? (
+              <p className="py-8 text-center text-sm text-muted-foreground">
+                {registerSearchDebounced ? "검색 결과가 없어요" : "품목을 검색해주세요"}
               </p>
+            ) : (
+              <Table>
+                <TableHeader className="sticky top-0 bg-background z-10">
+                  <TableRow>
+                    <TableHead className="w-10 text-center text-muted-foreground">
+                      <Checkbox
+                        checked={
+                          registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number)).length > 0 &&
+                          registerItems
+                            .filter((ri) => !registeredItemCodes.has(ri.item_number))
+                            .every((ri) => registerSelectedIds.has(ri.id))
+                        }
+                        onCheckedChange={(checked) => {
+                          const next = new Set(registerSelectedIds);
+                          const available = registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number));
+                          if (checked) {
+                            available.forEach((ri) => next.add(ri.id));
+                          } else {
+                            available.forEach((ri) => next.delete(ri.id));
+                          }
+                          setRegisterSelectedIds(next);
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="text-xs text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-xs text-muted-foreground">품목명</TableHead>
+                    <TableHead className="text-xs text-muted-foreground">상태</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {registerItems.map((ri) => {
+                    const alreadyRegistered = registeredItemCodes.has(ri.item_number);
+                    return (
+                      <TableRow key={ri.id} className={cn("hover:bg-muted/30", alreadyRegistered && "opacity-50")}>
+                        <TableCell className="text-center">
+                          <Checkbox
+                            checked={registerSelectedIds.has(ri.id)}
+                            disabled={alreadyRegistered}
+                            onCheckedChange={(checked) => {
+                              const next = new Set(registerSelectedIds);
+                              if (checked) next.add(ri.id);
+                              else next.delete(ri.id);
+                              setRegisterSelectedIds(next);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell className="text-xs">{ri.item_number}</TableCell>
+                        <TableCell className="text-xs">{ri.item_name}</TableCell>
+                        <TableCell className="text-xs">
+                          {alreadyRegistered ? (
+                            <span className="text-muted-foreground">등록됨</span>
+                          ) : (
+                            <span className="text-primary">미등록</span>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
             )}
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setRegisterDialogOpen(false)}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
-              취소
-            </Button>
-            <Button
-              type="button"
-              onClick={handleRegisterItems}
-              disabled={registerSubmitting || registerSelectedIds.size === 0}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
-              {registerSubmitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              등록 ({registerSelectedIds.size}건)
-            </Button>
+          </div>
+          <DialogFooter className="flex-row items-center justify-between sm:justify-between">
+            {registerSelectedIds.size > 0 ? (
+              <p className="text-xs text-muted-foreground">{registerSelectedIds.size}건 선택됨</p>
+            ) : (
+              <div />
+            )}
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setRegisterDialogOpen(false)}>
+                취소
+              </Button>
+              <Button
+                onClick={() => void handleRegisterItems()}
+                disabled={registerSubmitting || registerSelectedIds.size === 0}
+              >
+                {registerSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                등록 ({registerSelectedIds.size}건)
+              </Button>
+            </div>
           </DialogFooter>
         </DialogContent>
       </Dialog>
diff --git a/frontend/app/(main)/COMPANY_29/production/process-info/ProcessMasterTab.tsx b/frontend/app/(main)/COMPANY_29/production/process-info/ProcessMasterTab.tsx
index c2fb249d..cfbee962 100644
--- a/frontend/app/(main)/COMPANY_29/production/process-info/ProcessMasterTab.tsx
+++ b/frontend/app/(main)/COMPANY_29/production/process-info/ProcessMasterTab.tsx
@@ -22,8 +22,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Card, CardContent } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -47,8 +45,8 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { cn } from "@/lib/utils";
+import { Checkbox } from "@/components/ui/checkbox";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import {
   getProcessList,
   createProcess,
@@ -61,7 +59,7 @@ import {
   type ProcessMaster,
   type ProcessEquipment,
   type Equipment,
-} from "@/lib/api/processInfo";
+} from "@/lib/api/processInfo"; // API: /process-info/*
 import { getCategoryValues } from "@/lib/api/tableCategoryValue";
 
 const ALL_VALUE = "__all__";
@@ -121,7 +119,7 @@ export function ProcessMasterTab() {
         useYn: filterUseYn === ALL_VALUE ? undefined : filterUseYn,
       });
       if (!res.success) {
-        toast.error(res.message || "공정 목록을 불러오지 못했습니다.");
+        toast.error(res.message || "공정 목록을 불러오지 못했어요");
         return;
       }
       setProcesses(res.data ?? []);
@@ -135,12 +133,12 @@ export function ProcessMasterTab() {
     try {
       const [procRes, eqRes] = await Promise.all([getProcessList(), getEquipmentList()]);
       if (!procRes.success) {
-        toast.error(procRes.message || "공정 목록을 불러오지 못했습니다.");
+        toast.error(procRes.message || "공정 목록을 불러오지 못했어요");
       } else {
         setProcesses(procRes.data ?? []);
       }
       if (!eqRes.success) {
-        toast.error(eqRes.message || "설비 목록을 불러오지 못했습니다.");
+        toast.error(eqRes.message || "설비 목록을 불러오지 못했어요");
       } else {
         setEquipmentMaster(eqRes.data ?? []);
       }
@@ -187,7 +185,7 @@ export function ProcessMasterTab() {
       const res = await getProcessEquipments(selectedProcess.process_code);
       if (cancelled) return;
       if (!res.success) {
-        toast.error(res.message || "공정 설비를 불러오지 못했습니다.");
+        toast.error(res.message || "공정 설비를 불러오지 못했어요");
         setProcessEquipments([]);
       } else {
         setProcessEquipments(res.data ?? []);
@@ -199,28 +197,6 @@ export function ProcessMasterTab() {
     };
   }, [selectedProcess?.process_code]);
 
-  const allSelected = useMemo(() => {
-    if (processes.length === 0) return false;
-    return processes.every((p) => selectedIds.has(p.id));
-  }, [processes, selectedIds]);
-
-  const toggleAll = (checked: boolean) => {
-    if (checked) {
-      setSelectedIds(new Set(processes.map((p) => p.id)));
-    } else {
-      setSelectedIds(new Set());
-    }
-  };
-
-  const toggleOne = (id: string, checked: boolean) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      if (checked) next.add(id);
-      else next.delete(id);
-      return next;
-    });
-  };
-
   const handleResetFilters = () => {
     setFilterCode("");
     setFilterName("");
@@ -246,7 +222,7 @@ export function ProcessMasterTab() {
 
   const openEdit = () => {
     if (!selectedProcess) {
-      toast.message("수정할 공정을 좌측 목록에서 선택하세요.");
+      toast.message("수정할 공정을 좌측 목록에서 선택해주세요");
       return;
     }
     setFormMode("edit");
@@ -262,7 +238,7 @@ export function ProcessMasterTab() {
 
   const submitForm = async () => {
     if (!formProcessName.trim()) {
-      toast.error("공정명을 입력하세요.");
+      toast.error("공정명을 입력해주세요");
       return;
     }
 
@@ -277,10 +253,10 @@ export function ProcessMasterTab() {
           use_yn: formUseYn,
         });
         if (!res.success || !res.data) {
-          toast.error(res.message || "등록에 실패했습니다.");
+          toast.error(res.message || "등록에 실패했어요");
           return;
         }
-        toast.success("공정이 등록되었습니다.");
+        toast.success("공정이 등록되었어요");
         setFormOpen(false);
         await loadProcesses();
         setSelectedProcess(res.data);
@@ -294,10 +270,10 @@ export function ProcessMasterTab() {
           use_yn: formUseYn,
         });
         if (!res.success || !res.data) {
-          toast.error(res.message || "수정에 실패했습니다.");
+          toast.error(res.message || "수정에 실패했어요");
           return;
         }
-        toast.success("공정이 수정되었습니다.");
+        toast.success("공정이 수정되었어요");
         setFormOpen(false);
         await loadProcesses();
         setSelectedProcess(res.data);
@@ -309,7 +285,7 @@ export function ProcessMasterTab() {
 
   const openDelete = () => {
     if (selectedIds.size === 0) {
-      toast.message("삭제할 공정을 체크박스로 선택하세요.");
+      toast.message("삭제할 공정을 체크박스로 선택해주세요");
       return;
     }
     setDeleteOpen(true);
@@ -321,10 +297,10 @@ export function ProcessMasterTab() {
     try {
       const res = await deleteProcesses(ids);
       if (!res.success) {
-        toast.error(res.message || "삭제에 실패했습니다.");
+        toast.error(res.message || "삭제에 실패했어요");
         return;
       }
-      toast.success(`${ids.length}건 삭제되었습니다.`);
+      toast.success(`${ids.length}건 삭제되었어요`);
       setDeleteOpen(false);
       setSelectedIds(new Set());
       if (selectedProcess && ids.includes(selectedProcess.id)) {
@@ -344,7 +320,7 @@ export function ProcessMasterTab() {
   const handleAddEquipment = async () => {
     if (!selectedProcess) return;
     if (!equipmentPick) {
-      toast.message("추가할 설비를 선택하세요.");
+      toast.message("추가할 설비를 선택해주세요");
       return;
     }
     setAddingEquipment(true);
@@ -354,10 +330,10 @@ export function ProcessMasterTab() {
         equipment_code: equipmentPick,
       });
       if (!res.success) {
-        toast.error(res.message || "설비 추가에 실패했습니다.");
+        toast.error(res.message || "설비 추가에 실패했어요");
         return;
       }
-      toast.success("설비가 등록되었습니다.");
+      toast.success("설비가 등록되었어요");
       setEquipmentPick("");
       const listRes = await getProcessEquipments(selectedProcess.process_code);
       if (listRes.success && listRes.data) setProcessEquipments(listRes.data);
@@ -369,10 +345,10 @@ export function ProcessMasterTab() {
   const handleRemoveEquipment = async (row: ProcessEquipment) => {
     const res = await removeProcessEquipment(row.id);
     if (!res.success) {
-      toast.error(res.message || "설비 제거에 실패했습니다.");
+      toast.error(res.message || "설비 제거에 실패했어요");
       return;
     }
-    toast.success("설비가 제거되었습니다.");
+    toast.success("설비가 제거되었어요");
     if (selectedProcess) {
       const listRes = await getProcessEquipments(selectedProcess.process_code);
       if (listRes.success && listRes.data) setProcessEquipments(listRes.data);
@@ -381,260 +357,162 @@ export function ProcessMasterTab() {
 
   const listBusy = loadingInitial || loadingList;
 
+  // 표시용 데이터
+  const processGridData = useMemo(
+    () =>
+      processes.map((p) => ({
+        ...p,
+        process_type_display: getProcessTypeLabel(p.process_type),
+        use_yn_display: p.use_yn === "Y" ? "사용" : "미사용",
+      })),
+    [processes, getProcessTypeLabel]
+  );
+
   return (
-    <div className="flex min-h-[560px] flex-1 flex-col gap-3">
-      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1 rounded-lg">
+    <div className="flex h-full flex-col">
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+        {/* 좌측: 공정 목록 */}
         <ResizablePanel defaultSize={50} minSize={30}>
-          <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border bg-card shadow-sm">
-            <div className="flex shrink-0 flex-col gap-2 border-b bg-muted/30 p-3 sm:p-4">
-              <div className="flex flex-wrap items-center gap-2">
-                <Settings className="h-4 w-4 text-muted-foreground" aria-hidden />
-                <span className="text-sm font-semibold sm:text-base">공정 마스터</span>
-              </div>
-              <div className="flex flex-wrap items-end gap-2">
-                <div className="space-y-1">
-                  <Label className="text-xs sm:text-sm">공정코드</Label>
-                  <Input
-                    value={filterCode}
-                    onChange={(e) => setFilterCode(e.target.value)}
-                    placeholder="코드"
-                    className="h-8 w-[120px] text-xs sm:h-10 sm:w-[140px] sm:text-sm"
-                  />
-                </div>
-                <div className="space-y-1">
-                  <Label className="text-xs sm:text-sm">공정명</Label>
-                  <Input
-                    value={filterName}
-                    onChange={(e) => setFilterName(e.target.value)}
-                    placeholder="이름"
-                    className="h-8 w-[120px] text-xs sm:h-10 sm:w-[160px] sm:text-sm"
-                  />
-                </div>
-                <div className="space-y-1">
-                  <Label className="text-xs sm:text-sm">공정유형</Label>
-                  <Select value={filterType} onValueChange={setFilterType}>
-                    <SelectTrigger className="h-8 w-[120px] text-xs sm:h-10 sm:w-[130px] sm:text-sm">
-                      <SelectValue placeholder="전체" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value={ALL_VALUE} className="text-xs sm:text-sm">
-                        전체
-                      </SelectItem>
-                      {processTypeOptions.map((o, idx) => (
-                        <SelectItem key={`pt-filter-${idx}`} value={o.valueCode} className="text-xs sm:text-sm">
-                          {o.valueLabel}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-1">
-                  <Label className="text-xs sm:text-sm">사용여부</Label>
-                  <Select value={filterUseYn} onValueChange={setFilterUseYn}>
-                    <SelectTrigger className="h-8 w-[100px] text-xs sm:h-10 sm:w-[110px] sm:text-sm">
-                      <SelectValue placeholder="전체" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value={ALL_VALUE} className="text-xs sm:text-sm">
-                        전체
-                      </SelectItem>
-                      <SelectItem value="Y" className="text-xs sm:text-sm">사용</SelectItem>
-                      <SelectItem value="N" className="text-xs sm:text-sm">미사용</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={handleResetFilters}
-                >
-                  <RotateCcw className="mr-1 h-3.5 w-3.5" />
-                  초기화
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={handleSearch}
-                  disabled={listBusy}
-                >
-                  <Search className="mr-1 h-3.5 w-3.5" />
-                  조회
-                </Button>
-              </div>
-              <div className="flex flex-wrap gap-2">
-                <Button
-                  type="button"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={openAdd}
-                >
-                  <Plus className="mr-1 h-3.5 w-3.5" />
-                  공정 추가
-                </Button>
-                <Button
-                  type="button"
-                  variant="secondary"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={openEdit}
-                >
-                  <Pencil className="mr-1 h-3.5 w-3.5" />
-                  수정
-                </Button>
-                <Button
-                  type="button"
-                  variant="destructive"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={openDelete}
-                >
-                  <Trash2 className="mr-1 h-3.5 w-3.5" />
-                  삭제
-                </Button>
-              </div>
+          <div className="flex h-full flex-col">
+            {/* 패널 헤더 */}
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">공정 마스터</span>
+              <Badge variant="secondary" className="font-mono text-xs">
+                {processes.length}건
+              </Badge>
             </div>
 
-            <ScrollArea className="min-h-0 flex-1">
-              <div className="p-2 sm:p-3">
-                {listBusy ? (
-                  <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
-                    <Loader2 className="h-8 w-8 animate-spin" />
-                    <p className="mt-2 text-xs sm:text-sm">불러오는 중...</p>
-                  </div>
-                ) : (
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead className="w-10 text-center">
-                          <Checkbox
-                            checked={allSelected}
-                            onCheckedChange={(v) => toggleAll(v === true)}
-                            aria-label="전체 선택"
-                            className="mx-auto"
-                          />
-                        </TableHead>
-                        <TableHead className="text-xs sm:text-sm">공정코드</TableHead>
-                        <TableHead className="text-xs sm:text-sm">공정명</TableHead>
-                        <TableHead className="text-xs sm:text-sm">공정유형</TableHead>
-                        <TableHead className="text-right text-xs sm:text-sm">표준시간(분)</TableHead>
-                        <TableHead className="text-right text-xs sm:text-sm">작업인원</TableHead>
-                        <TableHead className="text-center text-xs sm:text-sm">사용여부</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {processes.length === 0 ? (
-                        <TableRow>
-                          <TableCell colSpan={7} className="py-12 text-center text-muted-foreground">
-                            <p className="text-xs sm:text-sm">조회된 공정이 없습니다.</p>
-                          </TableCell>
-                        </TableRow>
-                      ) : (
-                        processes.map((row) => (
-                          <TableRow
-                            key={row.id}
-                            className={cn(
-                              "cursor-pointer transition-colors",
-                              selectedProcess?.id === row.id && "bg-accent"
-                            )}
-                            onClick={() => setSelectedProcess(row)}
-                          >
-                            <TableCell
-                              className="text-center"
-                              onClick={(e) => e.stopPropagation()}
-                            >
-                              <Checkbox
-                                checked={selectedIds.has(row.id)}
-                                onCheckedChange={(v) => toggleOne(row.id, v === true)}
-                                aria-label={`${row.process_code} 선택`}
-                                className="mx-auto"
-                              />
-                            </TableCell>
-                            <TableCell className="text-xs font-medium sm:text-sm">
-                              {row.process_code}
-                            </TableCell>
-                            <TableCell className="text-xs sm:text-sm">{row.process_name}</TableCell>
-                            <TableCell className="text-xs sm:text-sm">
-                              <Badge variant="secondary" className="text-[10px] sm:text-xs">
-                                {getProcessTypeLabel(row.process_type)}
-                              </Badge>
-                            </TableCell>
-                            <TableCell className="text-right text-xs sm:text-sm">
-                              {row.standard_time ?? "-"}
-                            </TableCell>
-                            <TableCell className="text-right text-xs sm:text-sm">
-                              {row.worker_count ?? "-"}
-                            </TableCell>
-                            <TableCell className="text-center text-xs sm:text-sm">
-                              <Badge
-                                variant={row.use_yn === "N" ? "outline" : "default"}
-                                className="text-[10px] sm:text-xs"
-                              >
-                                {row.use_yn === "Y" ? "사용" : "미사용"}
-                              </Badge>
-                            </TableCell>
-                          </TableRow>
-                        ))
-                      )}
-                    </TableBody>
-                  </Table>
-                )}
-              </div>
-            </ScrollArea>
+            {/* 필터 바 */}
+            <div className="flex flex-wrap items-center gap-2 border-b px-3 py-2">
+              <Input value={filterCode} onChange={(e) => setFilterCode(e.target.value)} placeholder="공정코드" className="h-8 w-[110px] text-xs" />
+              <Input value={filterName} onChange={(e) => setFilterName(e.target.value)} placeholder="공정명" className="h-8 w-[130px] text-xs" />
+              <Select value={filterType} onValueChange={setFilterType}>
+                <SelectTrigger className="h-8 w-[110px] text-xs">
+                  <SelectValue placeholder="유형 전체" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>전체</SelectItem>
+                  {processTypeOptions.map((o, idx) => (
+                    <SelectItem key={`pt-filter-${idx}`} value={o.valueCode}>{o.valueLabel}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select value={filterUseYn} onValueChange={setFilterUseYn}>
+                <SelectTrigger className="h-8 w-[100px] text-xs">
+                  <SelectValue placeholder="사용 전체" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>전체</SelectItem>
+                  <SelectItem value="Y">사용</SelectItem>
+                  <SelectItem value="N">미사용</SelectItem>
+                </SelectContent>
+              </Select>
+              <div className="flex-1" />
+              {listBusy && <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />}
+              <Button size="sm" className="h-8 gap-1 text-xs" onClick={handleSearch} disabled={listBusy}>
+                <Search className="h-3 w-3" />조회
+              </Button>
+              <Button variant="ghost" size="sm" className="h-8 gap-1 text-xs text-muted-foreground" onClick={handleResetFilters}>
+                <RotateCcw className="h-3 w-3" />초기화
+              </Button>
+            </div>
+
+            {/* 액션 바 */}
+            <div className="flex items-center justify-end gap-2 border-b bg-muted/30 px-4 py-2">
+              <Button size="sm" onClick={openAdd}>
+                <Plus className="mr-1 h-3.5 w-3.5" />
+                공정 추가
+              </Button>
+              <Button variant="secondary" size="sm" onClick={openEdit}>
+                <Pencil className="mr-1 h-3.5 w-3.5" />
+                수정
+              </Button>
+              <Button variant="destructive" size="sm" onClick={openDelete}>
+                <Trash2 className="mr-1 h-3.5 w-3.5" />
+                삭제
+              </Button>
+            </div>
+
+            {/* 공정 목록 테이블 */}
+            <div className="min-h-0 flex-1 overflow-auto">
+              <EDataTable
+                columns={[
+                  { key: "process_code", label: "공정코드", width: "w-[130px]", render: (val: any) => <span className="font-mono text-xs">{val}</span> },
+                  { key: "process_name", label: "공정명" },
+                  { key: "process_type_display", label: "공정유형", width: "w-[120px]" },
+                  { key: "standard_time", label: "표준시간(분)", width: "w-[110px]", align: "right" as const },
+                  { key: "worker_count", label: "작업인원", width: "w-[90px]", align: "right" as const },
+                  { key: "use_yn_display", label: "사용여부", width: "w-[90px]", align: "center" as const },
+                ] as EDataTableColumn[]}
+                data={processGridData}
+                rowKey={(row) => row.id}
+                loading={listBusy}
+                emptyMessage="조회된 공정이 없어요"
+                selectedId={selectedProcess?.id ?? null}
+                onSelect={(id) => {
+                  const proc = processes.find((p) => p.id === id);
+                  setSelectedProcess(proc || null);
+                }}
+                onRowClick={(row) => {
+                  const proc = processes.find((p) => p.id === row.id);
+                  setSelectedProcess(proc || null);
+                }}
+                showCheckbox
+                checkedIds={Array.from(selectedIds)}
+                onCheckedChange={(ids) => setSelectedIds(new Set(ids))}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
           </div>
         </ResizablePanel>
 
         <ResizableHandle withHandle />
 
+        {/* 우측: 공정별 설비 */}
         <ResizablePanel defaultSize={50} minSize={30}>
-          <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border bg-card shadow-sm">
-            <div className="flex shrink-0 items-center gap-2 border-b bg-muted/30 px-3 py-2 sm:px-4 sm:py-3">
-              <Wrench className="h-4 w-4 text-muted-foreground" aria-hidden />
+          <div className="flex h-full flex-col">
+            {/* 패널 헤더 */}
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <Wrench className="h-4 w-4 text-muted-foreground" />
               <div className="min-w-0 flex-1">
-                <p className="truncate text-sm font-semibold sm:text-base">공정별 사용설비</p>
+                <p className="truncate text-sm font-semibold">공정별 사용설비</p>
                 {selectedProcess ? (
-                  <p className="truncate text-xs text-muted-foreground sm:text-sm">
-                    {selectedProcess.process_name}{" "}
-                    <span className="text-muted-foreground/80">({selectedProcess.process_code})</span>
+                  <p className="truncate text-xs text-muted-foreground">
+                    {selectedProcess.process_name} ({selectedProcess.process_code})
                   </p>
                 ) : (
-                  <p className="text-xs text-muted-foreground sm:text-sm">공정 미선택</p>
+                  <p className="text-xs text-muted-foreground">공정을 선택해주세요</p>
                 )}
               </div>
             </div>
 
             {!selectedProcess ? (
-              <div className="flex flex-1 flex-col items-center justify-center gap-2 px-4 py-12 text-center text-muted-foreground">
+              <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
                 <Settings className="h-10 w-10 opacity-40" />
-                <p className="text-sm font-medium text-foreground">좌측에서 공정을 선택하세요</p>
-                <p className="max-w-xs text-xs sm:text-sm">
-                  목록 행을 클릭하면 이 공정에 연결된 설비를 관리할 수 있습니다.
+                <p className="text-sm font-medium text-foreground">좌측에서 공정을 선택해주세요</p>
+                <p className="max-w-xs text-xs">
+                  목록 행을 클릭하면 이 공정에 연결된 설비를 관리할 수 있어요
                 </p>
               </div>
             ) : (
-              <div className="flex min-h-0 flex-1 flex-col gap-3 p-3 sm:p-4">
-                <div className="flex flex-wrap items-end gap-2">
-                  <div className="min-w-0 flex-1 space-y-1 sm:max-w-xs">
-                    <Label className="text-xs sm:text-sm">설비 선택</Label>
+              <div className="flex min-h-0 flex-1 flex-col gap-3 p-4">
+                <div className="flex items-end gap-2">
+                  <div className="min-w-0 flex-1 space-y-1">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설비 선택</Label>
                     <Select
                       key={selectedProcess.id}
                       value={equipmentPick || undefined}
                       onValueChange={setEquipmentPick}
                       disabled={addingEquipment || availableEquipments.length === 0}
                     >
-                      <SelectTrigger className="h-8 w-full text-xs sm:h-10 sm:text-sm">
-                        <SelectValue placeholder="설비를 선택하세요" />
+                      <SelectTrigger className="h-9" size="sm">
+                        <SelectValue placeholder="설비를 선택해주세요" />
                       </SelectTrigger>
                       <SelectContent>
                         {availableEquipments.map((eq) => (
-                          <SelectItem
-                            key={eq.id}
-                            value={eq.equipment_code}
-                            className="text-xs sm:text-sm"
-                          >
+                          <SelectItem key={eq.id} value={eq.equipment_code}>
                             {eq.equipment_code} · {eq.equipment_name}
                           </SelectItem>
                         ))}
@@ -642,9 +520,7 @@ export function ProcessMasterTab() {
                     </Select>
                   </div>
                   <Button
-                    type="button"
                     size="sm"
-                    className="h-8 text-xs sm:h-10 sm:text-sm"
                     onClick={() => void handleAddEquipment()}
                     disabled={addingEquipment || !equipmentPick}
                   >
@@ -657,47 +533,31 @@ export function ProcessMasterTab() {
                   </Button>
                 </div>
 
-                <div className="min-h-0 flex-1">
+                <div className="min-h-0 flex-1 overflow-auto">
                   {loadingEquipments ? (
                     <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
                       <Loader2 className="h-7 w-7 animate-spin" />
-                      <p className="mt-2 text-xs sm:text-sm">설비 목록 불러오는 중...</p>
+                      <p className="mt-2 text-sm">설비 목록을 불러오고 있어요...</p>
                     </div>
                   ) : processEquipments.length === 0 ? (
-                    <p className="py-8 text-center text-xs text-muted-foreground sm:text-sm">
-                      등록된 설비가 없습니다. 상단에서 설비를 추가하세요.
+                    <p className="py-8 text-center text-sm text-muted-foreground">
+                      등록된 설비가 없어요. 상단에서 설비를 추가해주세요.
                     </p>
                   ) : (
-                    <ScrollArea className="h-[min(420px,calc(100vh-20rem))] pr-3">
-                      <ul className="space-y-2">
-                        {processEquipments.map((pe) => (
-                          <li key={pe.id}>
-                            <Card className="rounded-lg border bg-card text-card-foreground shadow-sm">
-                              <CardContent className="flex items-center gap-3 p-3 sm:p-4">
-                                <div className="min-w-0 flex-1">
-                                  <p className="truncate text-xs font-medium sm:text-sm">
-                                    {pe.equipment_code}
-                                  </p>
-                                  <p className="truncate text-xs text-muted-foreground sm:text-sm">
-                                    {pe.equipment_name || "설비명 없음"}
-                                  </p>
-                                </div>
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  size="sm"
-                                  className="h-8 shrink-0 text-xs sm:h-9 sm:text-sm"
-                                  onClick={() => void handleRemoveEquipment(pe)}
-                                >
-                                  <Trash2 className="mr-1 h-3.5 w-3.5" />
-                                  제거
-                                </Button>
-                              </CardContent>
-                            </Card>
-                          </li>
-                        ))}
-                      </ul>
-                    </ScrollArea>
+                    <ul className="space-y-2">
+                      {processEquipments.map((pe) => (
+                        <li key={pe.id} className="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:bg-muted/30">
+                          <div className="min-w-0 flex-1">
+                            <p className="truncate text-sm font-medium">{pe.equipment_code}</p>
+                            <p className="truncate text-xs text-muted-foreground">{pe.equipment_name || "설비명 없음"}</p>
+                          </div>
+                          <Button variant="ghost" size="sm" onClick={() => void handleRemoveEquipment(pe)}>
+                            <Trash2 className="mr-1 h-3.5 w-3.5" />
+                            제거
+                          </Button>
+                        </li>
+                      ))}
+                    </ul>
                   )}
                 </div>
               </div>
@@ -706,136 +566,95 @@ export function ProcessMasterTab() {
         </ResizablePanel>
       </ResizablePanelGroup>
 
+      {/* 공정 등록/수정 모달 */}
       <Dialog open={formOpen} onOpenChange={setFormOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-lg">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">
-              {formMode === "add" ? "공정 추가" : "공정 수정"}
-            </DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              공정 마스터 정보를 입력합니다. 표준시간과 작업인원은 숫자로 입력하세요.
-            </DialogDescription>
+            <DialogTitle>{formMode === "add" ? "공정 추가" : "공정 수정"}</DialogTitle>
+            <DialogDescription>공정 마스터 정보를 입력해주세요</DialogDescription>
           </DialogHeader>
-
-          <div className="space-y-3 sm:space-y-4">
-            <div>
-              <Label htmlFor="pm-process-name" className="text-xs sm:text-sm">
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 공정명 <span className="text-destructive">*</span>
               </Label>
               <Input
-                id="pm-process-name"
                 value={formProcessName}
                 onChange={(e) => setFormProcessName(e.target.value)}
-                placeholder="공정명"
-                className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                placeholder="공정명을 입력해주세요"
+                className="h-9"
               />
             </div>
-            <div>
-              <Label className="text-xs sm:text-sm">공정유형</Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">공정유형</Label>
               <Select value={formProcessType} onValueChange={setFormProcessType}>
-                <SelectTrigger className="mt-1 h-8 text-xs sm:h-10 sm:text-sm">
-                  <SelectValue placeholder="선택하세요" />
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder="선택해주세요" />
                 </SelectTrigger>
                 <SelectContent>
                   {processTypeOptions.map((o, idx) => (
-                    <SelectItem key={`pt-form-${idx}`} value={o.valueCode} className="text-xs sm:text-sm">
-                      {o.valueLabel}
-                    </SelectItem>
+                    <SelectItem key={`pt-form-${idx}`} value={o.valueCode}>{o.valueLabel}</SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
-            <div>
-              <Label htmlFor="pm-standard-time" className="text-xs sm:text-sm">
-                표준작업시간(분)
-              </Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">표준작업시간(분)</Label>
               <Input
-                id="pm-standard-time"
                 value={formStandardTime}
                 onChange={(e) => setFormStandardTime(e.target.value)}
                 placeholder="0"
                 inputMode="numeric"
-                className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
-            <div>
-              <Label htmlFor="pm-worker-count" className="text-xs sm:text-sm">
-                작업인원수
-              </Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">작업인원수</Label>
               <Input
-                id="pm-worker-count"
                 value={formWorkerCount}
                 onChange={(e) => setFormWorkerCount(e.target.value)}
                 placeholder="0"
                 inputMode="numeric"
-                className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
-            <div>
-              <Label className="text-xs sm:text-sm">사용여부</Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">사용여부</Label>
               <Select value={formUseYn} onValueChange={setFormUseYn}>
-                <SelectTrigger className="mt-1 h-8 text-xs sm:h-10 sm:text-sm">
-                  <SelectValue placeholder="선택하세요" />
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder="선택해주세요" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="Y" className="text-xs sm:text-sm">사용</SelectItem>
-                  <SelectItem value="N" className="text-xs sm:text-sm">미사용</SelectItem>
+                  <SelectItem value="Y">사용</SelectItem>
+                  <SelectItem value="N">미사용</SelectItem>
                 </SelectContent>
               </Select>
             </div>
           </div>
-
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setFormOpen(false)}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-              disabled={savingForm}
-            >
-              취소
-            </Button>
-            <Button
-              type="button"
-              onClick={() => void submitForm()}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-              disabled={savingForm}
-            >
-              {savingForm ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              저장
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setFormOpen(false)} disabled={savingForm}>취소</Button>
+            <Button onClick={() => void submitForm()} disabled={savingForm}>
+              {savingForm && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              저장해요
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
+      {/* 삭제 확인 */}
       <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="sm:max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">공정 삭제</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              선택한 {selectedIds.size}건의 공정을 삭제합니다. 연결된 공정-설비 매핑도 함께 삭제됩니다. 이 작업은
-              되돌릴 수 없습니다.
+            <DialogTitle>공정 삭제</DialogTitle>
+            <DialogDescription>
+              선택한 {selectedIds.size}건의 공정을 삭제해요. 연결된 공정-설비 매핑도 함께 삭제돼요. 이 작업은 되돌릴 수 없어요.
             </DialogDescription>
           </DialogHeader>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setDeleteOpen(false)}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-              disabled={deleting}
-            >
-              취소
-            </Button>
-            <Button
-              type="button"
-              variant="destructive"
-              onClick={() => void confirmDelete()}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-              disabled={deleting}
-            >
-              {deleting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              삭제
+          <DialogFooter className="gap-2">
+            <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>취소</Button>
+            <Button variant="destructive" onClick={() => void confirmDelete()} disabled={deleting}>
+              {deleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              삭제해요
             </Button>
           </DialogFooter>
         </DialogContent>
diff --git a/frontend/app/(main)/COMPANY_29/production/process-info/page.tsx b/frontend/app/(main)/COMPANY_29/production/process-info/page.tsx
index f9f8e352..a7b81550 100644
--- a/frontend/app/(main)/COMPANY_29/production/process-info/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/production/process-info/page.tsx
@@ -1,56 +1,223 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import { Settings, GitBranch, ClipboardList } from "lucide-react";
+import {
+  Settings,
+  GitBranch,
+  ClipboardList,
+  ChevronRight,
+  Factory,
+  Keyboard,
+  Plus,
+  Pencil,
+  Trash2,
+  List,
+  Settings2,
+} from "lucide-react";
 import { ProcessMasterTab } from "./ProcessMasterTab";
 import { ItemRoutingTab } from "./ItemRoutingTab";
 import { ProcessWorkStandardTab } from "./ProcessWorkStandardTab";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+
+const GRID_COLUMNS = [
+  { key: "process_code", label: "공정코드" },
+  { key: "process_name", label: "공정명" },
+  { key: "process_type", label: "공정유형" },
+  { key: "standard_time", label: "표준시간(분)" },
+  { key: "worker_count", label: "작업인원" },
+  { key: "use_yn", label: "사용여부" },
+];
+
+const TAB_META = [
+  {
+    value: "process",
+    label: "공정 마스터",
+    shortLabel: "공정",
+    description: "공정코드/유형/표준시간/사용설비 관리",
+    detailDesc: "공정코드, 공정유형, 표준시간을 등록하고 사용 설비를 매핑합니다.",
+    icon: Settings,
+    color: "text-blue-500",
+    badgeColor: "bg-blue-50 text-blue-700 ring-blue-600/20",
+    shortcut: "1",
+    actions: ["공정 등록", "공정 수정", "공정 삭제", "설비 연결"],
+  },
+  {
+    value: "routing",
+    label: "품목별 라우팅",
+    shortLabel: "라우팅",
+    description: "품목 라우팅 버전 및 공정 순서 관리",
+    detailDesc: "품목별 생산 라우팅 버전을 관리하고 공정 순서 및 소요시간을 설정합니다.",
+    icon: GitBranch,
+    color: "text-emerald-500",
+    badgeColor: "bg-emerald-50 text-emerald-700 ring-emerald-600/20",
+    shortcut: "2",
+    actions: ["버전 생성", "공정 순서 설정", "품목 등록", "품목 해제"],
+  },
+  {
+    value: "workstandard",
+    label: "공정 작업기준",
+    shortLabel: "작업기준",
+    description: "공정별 작업기준서 및 작업 표준 관리",
+    detailDesc: "공정별 작업기준서를 등록하고 작업 표준을 문서화하여 품질을 관리합니다.",
+    icon: ClipboardList,
+    color: "text-violet-500",
+    badgeColor: "bg-violet-50 text-violet-700 ring-violet-600/20",
+    shortcut: "3",
+    actions: ["기준서 등록", "기준서 수정", "기준서 삭제", "작업 표준 관리"],
+  },
+] as const;
+
+type TabValue = (typeof TAB_META)[number]["value"];
+
+const ACTION_ICONS = [Plus, Pencil, Trash2, List] as const;
 
 export default function ProcessInfoPage() {
-  const [activeTab, setActiveTab] = useState("process");
+  const ts = useTableSettings("c16-process-info", "process_mst", GRID_COLUMNS);
+  const [activeTab, setActiveTab] = useState<TabValue>("process");
+  const [showShortcutHint, setShowShortcutHint] = useState(false);
+
+  const activeMeta = TAB_META.find((t) => t.value === activeTab)!;
+
+  const handleTabChange = useCallback((value: string) => {
+    setActiveTab(value as TabValue);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!e.altKey) return;
+      const tabByShortcut = TAB_META.find((t) => t.shortcut === e.key);
+      if (tabByShortcut) {
+        e.preventDefault();
+        setActiveTab(tabByShortcut.value);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
 
   return (
     <div className="flex h-[calc(100vh-4rem)] flex-col bg-muted/30">
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="flex h-full flex-col">
+      {/* 페이지 헤더 */}
+      <div className="shrink-0 border-b bg-background px-6 py-3">
+        <nav
+          className="mb-1 flex items-center gap-1 text-xs text-muted-foreground"
+          aria-label="breadcrumb"
+        >
+          <Factory className="h-3 w-3" />
+          <span>생산관리</span>
+          <ChevronRight className="h-3 w-3 opacity-50" />
+          <span className="font-medium text-foreground">공정정보관리</span>
+        </nav>
+        <div className="flex items-center justify-between">
+          <div className="flex items-baseline gap-2">
+            <h1 className="text-base font-semibold text-foreground">공정정보관리</h1>
+            <span className="text-xs text-muted-foreground">{activeMeta.description}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+            <button
+              type="button"
+              className="flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              onClick={() => setShowShortcutHint((v) => !v)}
+              aria-label="키보드 단축키 보기"
+            >
+              <Keyboard className="h-3 w-3" />
+              <span>단축키</span>
+            </button>
+          </div>
+        </div>
+        {showShortcutHint && (
+          <div className="mt-2 flex items-center gap-3 rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground">
+            <span className="font-medium text-foreground">탭 전환:</span>
+            {TAB_META.map((t) => (
+              <span key={t.value} className="flex items-center gap-1">
+                <kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-mono text-[10px]">
+                  Alt+{t.shortcut}
+                </kbd>
+                <span>{t.shortLabel}</span>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex min-h-0 flex-1 flex-col"
+      >
+        {/* 탭 네비게이션 */}
         <div className="shrink-0 border-b bg-background px-4">
           <TabsList className="h-12 bg-transparent gap-1">
-            <TabsTrigger
-              value="process"
-              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4"
-            >
-              <Settings className="mr-2 h-4 w-4" />
-              공정 마스터
-            </TabsTrigger>
-            <TabsTrigger
-              value="routing"
-              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4"
-            >
-              <GitBranch className="mr-2 h-4 w-4" />
-              품목별 라우팅
-            </TabsTrigger>
-            <TabsTrigger
-              value="workstandard"
-              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4"
-            >
-              <ClipboardList className="mr-2 h-4 w-4" />
-              공정 작업기준
-            </TabsTrigger>
+            {TAB_META.map(({ value, label, icon: Icon, shortcut }) => (
+              <TabsTrigger
+                key={value}
+                value={value}
+                className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 gap-1.5"
+                aria-label={`${label} (Alt+${shortcut})`}
+              >
+                <Icon className="h-4 w-4" />
+                {label}
+              </TabsTrigger>
+            ))}
           </TabsList>
         </div>
 
-        <TabsContent value="process" className="flex-1 overflow-hidden mt-0">
+        {/* 탭 설명 배너 */}
+        <div className="shrink-0 border-b bg-background/60 px-6 py-2">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span
+                className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset ${activeMeta.badgeColor}`}
+              >
+                {activeMeta.shortLabel}
+              </span>
+              <span className="text-xs text-muted-foreground">{activeMeta.detailDesc}</span>
+            </div>
+            <div className="hidden items-center gap-2 sm:flex">
+              {activeMeta.actions.map((action, i) => {
+                const ActionIcon = ACTION_ICONS[i % ACTION_ICONS.length];
+                return (
+                  <span
+                    key={action}
+                    className="flex items-center gap-1 text-xs text-muted-foreground/70"
+                  >
+                    <ActionIcon className="h-3 w-3" />
+                    {action}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* 탭 컨텐츠 */}
+        <TabsContent value="process" className="min-h-0 flex-1 overflow-hidden mt-0">
           <ProcessMasterTab />
         </TabsContent>
 
-        <TabsContent value="routing" className="flex-1 overflow-hidden mt-0">
+        <TabsContent value="routing" className="min-h-0 flex-1 overflow-hidden mt-0">
           <ItemRoutingTab />
         </TabsContent>
 
-        <TabsContent value="workstandard" className="flex-1 overflow-hidden mt-0">
+        <TabsContent value="workstandard" className="min-h-0 flex-1 overflow-hidden mt-0">
           <ProcessWorkStandardTab />
         </TabsContent>
       </Tabs>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_29/production/work-instruction/WorkStandardEditModal.tsx b/frontend/app/(main)/COMPANY_29/production/work-instruction/WorkStandardEditModal.tsx
index 6f042bd0..d9167dcb 100644
--- a/frontend/app/(main)/COMPANY_29/production/work-instruction/WorkStandardEditModal.tsx
+++ b/frontend/app/(main)/COMPANY_29/production/work-instruction/WorkStandardEditModal.tsx
@@ -11,7 +11,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
 import {
   Loader2, Save, RotateCcw, Plus, Trash2, Pencil, ClipboardCheck,
-  ChevronRight, GripVertical, AlertCircle,
+  GripVertical, AlertCircle, ClipboardList,
 } from "lucide-react";
 import { toast } from "sonner";
 import {
@@ -30,9 +30,9 @@ interface WorkStandardEditModalProps {
 }
 
 const PHASES = [
-  { key: "PRE", label: "사전작업" },
-  { key: "MAIN", label: "본작업" },
-  { key: "POST", label: "후작업" },
+  { key: "PRE", label: "작업 전 (Pre-Work)" },
+  { key: "IN", label: "작업 중 (In-Work)" },
+  { key: "POST", label: "작업 후 (Post-Work)" },
 ];
 
 const DETAIL_TYPES = [
@@ -47,6 +47,53 @@ const DETAIL_TYPES = [
   { value: "material_input", label: "자재투입" },
 ];
 
+const INPUT_TYPES = [
+  { value: "text", label: "텍스트" },
+  { value: "number", label: "숫자" },
+  { value: "date", label: "날짜" },
+  { value: "textarea", label: "장문 텍스트" },
+];
+
+const UNIT_OPTIONS = [
+  "mm", "cm", "m", "μm", "℃", "℉", "bar", "Pa", "MPa", "psi",
+  "RPM", "kg", "N", "N·m", "m/s", "m/min", "A", "V", "kW", "%",
+  "L/min", "Hz", "dB", "ea", "g", "mg", "ml", "L",
+];
+
+const getDetailTypeLabel = (type: string) =>
+  DETAIL_TYPES.find(d => d.value === type)?.label || type;
+
+const getContentSummary = (detail: WIWorkItemDetail): string => {
+  const type = detail.detail_type;
+  if (type === "inspection") {
+    const parts = [detail.content];
+    if (detail.inspection_method) parts.push(`[${detail.inspection_method}]`);
+    if (detail.base_value) {
+      parts.push(`(기준: ${detail.base_value}${detail.tolerance ? ` ±${detail.tolerance}` : ""} ${detail.unit || ""})`);
+    }
+    return parts.join(" ");
+  }
+  if (type === "procedure" && detail.duration_minutes) {
+    return `${detail.content} (${detail.duration_minutes}분)`;
+  }
+  if (type === "input" && detail.input_type) {
+    const typeMap: Record<string, string> = { text: "텍스트", number: "숫자", date: "날짜", textarea: "장문" };
+    return `${detail.content} [${typeMap[detail.input_type] || detail.input_type}]`;
+  }
+  if (type === "lookup") return "품목 등록 문서 (자동 연동)";
+  if (type === "equip_inspection") return detail.content || "설비점검";
+  if (type === "equip_condition") {
+    const parts = [detail.content];
+    if (detail.condition_base_value) {
+      parts.push(`(기준: ${detail.condition_base_value}${detail.condition_tolerance ? ` ±${detail.condition_tolerance}` : ""} ${detail.condition_unit || ""})`);
+    }
+    return parts.join(" ");
+  }
+  if (type === "production_result") return "작업수량 / 불량수량 / 양품수량";
+  if (type === "material_input") return "BOM 구성 자재 (자동 연동)";
+  return detail.content || "-";
+};
+
 export function WorkStandardEditModal({
   open,
   onClose,
@@ -61,20 +108,22 @@ export function WorkStandardEditModal({
   const [processes, setProcesses] = useState<WIWorkStandardProcess[]>([]);
   const [isCustom, setIsCustom] = useState(false);
   const [selectedProcessIdx, setSelectedProcessIdx] = useState(0);
-  const [selectedPhase, setSelectedPhase] = useState("PRE");
-  const [selectedWorkItemId, setSelectedWorkItemId] = useState<string | null>(null);
+  const [selectedWorkItemIdByPhase, setSelectedWorkItemIdByPhase] = useState<Record<string, string | null>>({});
   const [dirty, setDirty] = useState(false);
 
-  // 작업항목 추가 모달
+  // 작업항목 추가/수정 모달
   const [addItemOpen, setAddItemOpen] = useState(false);
+  const [addItemPhase, setAddItemPhase] = useState("PRE");
   const [addItemTitle, setAddItemTitle] = useState("");
   const [addItemRequired, setAddItemRequired] = useState("Y");
+  const [editingWorkItem, setEditingWorkItem] = useState<WIWorkItem | null>(null);
 
-  // 상세 추가 모달
-  const [addDetailOpen, setAddDetailOpen] = useState(false);
-  const [addDetailType, setAddDetailType] = useState("checklist");
-  const [addDetailContent, setAddDetailContent] = useState("");
-  const [addDetailRequired, setAddDetailRequired] = useState("N");
+  // 상세 추가/수정 모달
+  const [detailModalOpen, setDetailModalOpen] = useState(false);
+  const [detailModalMode, setDetailModalMode] = useState<"add" | "edit">("add");
+  const [detailModalPhase, setDetailModalPhase] = useState("PRE");
+  const [detailFormData, setDetailFormData] = useState<Partial<WIWorkItemDetail>>({});
+  const [editingDetail, setEditingDetail] = useState<WIWorkItemDetail | null>(null);
 
   // 데이터 로드
   const loadData = useCallback(async () => {
@@ -86,8 +135,7 @@ export function WorkStandardEditModal({
         setProcesses(res.data.processes);
         setIsCustom(res.data.isCustom);
         setSelectedProcessIdx(0);
-        setSelectedPhase("PRE");
-        setSelectedWorkItemId(null);
+        setSelectedWorkItemIdByPhase({});
         setDirty(false);
       }
     } catch (err) {
@@ -102,15 +150,18 @@ export function WorkStandardEditModal({
   }, [open, loadData]);
 
   const currentProcess = processes[selectedProcessIdx] || null;
-  const currentWorkItems = useMemo(() => {
-    if (!currentProcess) return [];
-    return currentProcess.workItems.filter(wi => wi.work_phase === selectedPhase);
-  }, [currentProcess, selectedPhase]);
 
-  const selectedWorkItem = useMemo(() => {
-    if (!selectedWorkItemId || !currentProcess) return null;
-    return currentProcess.workItems.find(wi => wi.id === selectedWorkItemId) || null;
-  }, [selectedWorkItemId, currentProcess]);
+  // Phase별 작업항목 그룹핑 (MAIN을 IN으로 매핑)
+  const workItemsByPhase = useMemo(() => {
+    if (!currentProcess) return {};
+    const map: Record<string, WIWorkItem[]> = {};
+    for (const phase of PHASES) {
+      map[phase.key] = currentProcess.workItems.filter(
+        wi => wi.work_phase === phase.key || (phase.key === "IN" && wi.work_phase === "MAIN")
+      );
+    }
+    return map;
+  }, [currentProcess]);
 
   // 커스텀 복사 확인 후 수정
   const ensureCustom = useCallback(async () => {
@@ -128,40 +179,76 @@ export function WorkStandardEditModal({
     return false;
   }, [isCustom, workInstructionNo, routingVersionId, loadData]);
 
-  // 작업항목 추가
-  const handleAddWorkItem = useCallback(async () => {
+  // 작업항목 추가 모달 열기
+  const openAddWorkItem = useCallback((phaseKey: string) => {
+    setAddItemPhase(phaseKey);
+    setAddItemTitle("");
+    setAddItemRequired("Y");
+    setEditingWorkItem(null);
+    setAddItemOpen(true);
+  }, []);
+
+  // 작업항목 수정 모달 열기
+  const openEditWorkItem = useCallback((item: WIWorkItem) => {
+    setAddItemPhase(item.work_phase);
+    setAddItemTitle(item.title);
+    setAddItemRequired(item.is_required);
+    setEditingWorkItem(item);
+    setAddItemOpen(true);
+  }, []);
+
+  // 작업항목 추가/수정 처리
+  const handleSaveWorkItem = useCallback(async () => {
     if (!addItemTitle.trim()) { toast.error("제목을 입력하세요"); return; }
     const ok = await ensureCustom();
     if (!ok || !currentProcess) return;
 
-    const newItem: WIWorkItem = {
-      id: `temp-${Date.now()}`,
-      routing_detail_id: currentProcess.routing_detail_id,
-      work_phase: selectedPhase,
-      title: addItemTitle.trim(),
-      is_required: addItemRequired,
-      sort_order: currentWorkItems.length + 1,
-      details: [],
-    };
-
-    setProcesses(prev => {
-      const next = [...prev];
-      next[selectedProcessIdx] = {
-        ...next[selectedProcessIdx],
-        workItems: [...next[selectedProcessIdx].workItems, newItem],
+    if (editingWorkItem) {
+      // 수정
+      setProcesses(prev => {
+        const next = [...prev];
+        const workItems = [...next[selectedProcessIdx].workItems];
+        const idx = workItems.findIndex(wi => wi.id === editingWorkItem.id);
+        if (idx >= 0) {
+          workItems[idx] = { ...workItems[idx], title: addItemTitle.trim(), is_required: addItemRequired };
+        }
+        next[selectedProcessIdx] = { ...next[selectedProcessIdx], workItems };
+        return next;
+      });
+    } else {
+      // 추가
+      const phaseKey = addItemPhase === "IN" ? "IN" : addItemPhase;
+      const phaseItems = currentProcess.workItems.filter(
+        wi => wi.work_phase === phaseKey || (phaseKey === "IN" && wi.work_phase === "MAIN")
+      );
+      const newItem: WIWorkItem = {
+        id: `temp-${Date.now()}`,
+        routing_detail_id: currentProcess.routing_detail_id,
+        work_phase: phaseKey,
+        title: addItemTitle.trim(),
+        is_required: addItemRequired,
+        sort_order: phaseItems.length + 1,
+        details: [],
       };
-      return next;
-    });
 
-    setAddItemTitle("");
-    setAddItemRequired("Y");
+      setProcesses(prev => {
+        const next = [...prev];
+        next[selectedProcessIdx] = {
+          ...next[selectedProcessIdx],
+          workItems: [...next[selectedProcessIdx].workItems, newItem],
+        };
+        return next;
+      });
+
+      setSelectedWorkItemIdByPhase(prev => ({ ...prev, [addItemPhase]: newItem.id! }));
+    }
+
     setAddItemOpen(false);
     setDirty(true);
-    setSelectedWorkItemId(newItem.id!);
-  }, [addItemTitle, addItemRequired, ensureCustom, currentProcess, selectedPhase, currentWorkItems, selectedProcessIdx]);
+  }, [addItemTitle, addItemRequired, addItemPhase, ensureCustom, currentProcess, selectedProcessIdx, editingWorkItem]);
 
   // 작업항목 삭제
-  const handleDeleteWorkItem = useCallback(async (id: string) => {
+  const handleDeleteWorkItem = useCallback(async (id: string, phaseKey: string) => {
     const ok = await ensureCustom();
     if (!ok) return;
 
@@ -173,37 +260,82 @@ export function WorkStandardEditModal({
       };
       return next;
     });
-    if (selectedWorkItemId === id) setSelectedWorkItemId(null);
+    if (selectedWorkItemIdByPhase[phaseKey] === id) {
+      setSelectedWorkItemIdByPhase(prev => ({ ...prev, [phaseKey]: null }));
+    }
     setDirty(true);
-  }, [ensureCustom, selectedProcessIdx, selectedWorkItemId]);
+  }, [ensureCustom, selectedProcessIdx, selectedWorkItemIdByPhase]);
 
-  // 상세 추가
-  const handleAddDetail = useCallback(async () => {
-    if (!addDetailContent.trim() && addDetailType !== "production_result" && addDetailType !== "material_input") {
+  // 상세 추가 모달 열기
+  const openAddDetail = useCallback((phaseKey: string) => {
+    setDetailModalPhase(phaseKey);
+    setDetailModalMode("add");
+    setEditingDetail(null);
+    setDetailFormData({
+      detail_type: DETAIL_TYPES[0].value,
+      content: "",
+      is_required: "Y",
+    });
+    setDetailModalOpen(true);
+  }, []);
+
+  // 상세 수정 모달 열기
+  const openEditDetail = useCallback((detail: WIWorkItemDetail, phaseKey: string) => {
+    setDetailModalPhase(phaseKey);
+    setDetailModalMode("edit");
+    setEditingDetail(detail);
+    setDetailFormData({ ...detail });
+    setDetailModalOpen(true);
+  }, []);
+
+  // 상세 추가/수정 처리
+  const handleSaveDetail = useCallback(async () => {
+    const type = detailFormData.detail_type || "";
+    if (!type) return;
+
+    // 유효성 검사 (내용이 필요한 유형)
+    const needsContent = ["checklist", "procedure", "input", "equip_condition"];
+    if (needsContent.includes(type) && !detailFormData.content?.trim()) {
       toast.error("내용을 입력하세요");
       return;
     }
-    if (!selectedWorkItemId) return;
+    if (type === "inspection" && !detailFormData.content?.trim()) {
+      toast.error("검사 항목명을 입력하세요");
+      return;
+    }
+
+    const workItemId = selectedWorkItemIdByPhase[detailModalPhase];
+    if (!workItemId) return;
     const ok = await ensureCustom();
     if (!ok) return;
 
-    const content = addDetailContent.trim() ||
-      DETAIL_TYPES.find(d => d.value === addDetailType)?.label || addDetailType;
-
-    const newDetail: WIWorkItemDetail = {
-      id: `temp-detail-${Date.now()}`,
-      work_item_id: selectedWorkItemId,
-      detail_type: addDetailType,
-      content,
-      is_required: addDetailRequired,
-      sort_order: (selectedWorkItem?.details?.length || 0) + 1,
-    };
+    // content 자동 설정 (UI에서 직접 입력이 없는 유형들)
+    const submitData = { ...detailFormData };
+    if (type === "lookup") submitData.content = submitData.content || "품목 등록 문서 (자동 연동)";
+    if (type === "equip_inspection") submitData.content = submitData.content || "설비점검";
+    if (type === "production_result") submitData.content = submitData.content || "작업수량 / 불량수량 / 양품수량";
+    if (type === "material_input") submitData.content = submitData.content || "BOM 구성 자재 (자동 연동)";
 
     setProcesses(prev => {
       const next = [...prev];
       const workItems = [...next[selectedProcessIdx].workItems];
-      const wiIdx = workItems.findIndex(wi => wi.id === selectedWorkItemId);
-      if (wiIdx >= 0) {
+      const wiIdx = workItems.findIndex(wi => wi.id === workItemId);
+      if (wiIdx < 0) return prev;
+
+      if (detailModalMode === "edit" && editingDetail) {
+        // 수정
+        const details = (workItems[wiIdx].details || []).map(d =>
+          d.id === editingDetail.id ? { ...d, ...submitData } : d
+        );
+        workItems[wiIdx] = { ...workItems[wiIdx], details };
+      } else {
+        // 추가
+        const newDetail: WIWorkItemDetail = {
+          ...submitData,
+          id: `temp-detail-${Date.now()}`,
+          work_item_id: workItemId,
+          sort_order: (workItems[wiIdx].details?.length || 0) + 1,
+        };
         workItems[wiIdx] = {
           ...workItems[wiIdx],
           details: [...(workItems[wiIdx].details || []), newDetail],
@@ -214,23 +346,21 @@ export function WorkStandardEditModal({
       return next;
     });
 
-    setAddDetailContent("");
-    setAddDetailType("checklist");
-    setAddDetailRequired("N");
-    setAddDetailOpen(false);
+    setDetailModalOpen(false);
     setDirty(true);
-  }, [addDetailContent, addDetailType, addDetailRequired, selectedWorkItemId, selectedWorkItem, ensureCustom, selectedProcessIdx]);
+  }, [detailFormData, detailModalPhase, detailModalMode, editingDetail, selectedWorkItemIdByPhase, ensureCustom, selectedProcessIdx]);
 
   // 상세 삭제
-  const handleDeleteDetail = useCallback(async (detailId: string) => {
-    if (!selectedWorkItemId) return;
+  const handleDeleteDetail = useCallback(async (detailId: string, phaseKey: string) => {
+    const workItemId = selectedWorkItemIdByPhase[phaseKey];
+    if (!workItemId) return;
     const ok = await ensureCustom();
     if (!ok) return;
 
     setProcesses(prev => {
       const next = [...prev];
       const workItems = [...next[selectedProcessIdx].workItems];
-      const wiIdx = workItems.findIndex(wi => wi.id === selectedWorkItemId);
+      const wiIdx = workItems.findIndex(wi => wi.id === workItemId);
       if (wiIdx >= 0) {
         workItems[wiIdx] = {
           ...workItems[wiIdx],
@@ -242,7 +372,7 @@ export function WorkStandardEditModal({
       return next;
     });
     setDirty(true);
-  }, [selectedWorkItemId, ensureCustom, selectedProcessIdx]);
+  }, [selectedWorkItemIdByPhase, ensureCustom, selectedProcessIdx]);
 
   // 저장
   const handleSave = useCallback(async () => {
@@ -285,8 +415,9 @@ export function WorkStandardEditModal({
     }
   }, [workInstructionNo, loadData]);
 
-  const getDetailTypeLabel = (type: string) =>
-    DETAIL_TYPES.find(d => d.value === type)?.label || type;
+  const updateDetailField = (field: string, value: unknown) => {
+    setDetailFormData(prev => ({ ...prev, [field]: value }));
+  };
 
   return (
     <Dialog open={open} onOpenChange={v => { if (!v) onClose(); }}>
@@ -324,7 +455,7 @@ export function WorkStandardEditModal({
                   className={cn("text-xs shrink-0 h-8", selectedProcessIdx === idx && "shadow-sm")}
                   onClick={() => {
                     setSelectedProcessIdx(idx);
-                    setSelectedWorkItemId(null);
+                    setSelectedWorkItemIdByPhase({});
                   }}
                 >
                   <span className="mr-1.5 font-mono text-[10px] opacity-70">{proc.seq_no}.</span>
@@ -336,120 +467,185 @@ export function WorkStandardEditModal({
               ))}
             </div>
 
-            {/* 작업 단계 탭 */}
-            <div className="flex items-center gap-1 px-4 py-2 border-b shrink-0">
+            {/* Phase별 세로 섹션 */}
+            <div className="flex-1 overflow-y-auto space-y-4 p-4">
               {PHASES.map(phase => {
-                const count = currentProcess?.workItems.filter(wi => wi.work_phase === phase.key).length || 0;
+                const phaseItems = workItemsByPhase[phase.key] || [];
+                const selectedWiId = selectedWorkItemIdByPhase[phase.key] || null;
+                const selectedWi = phaseItems.find(wi => wi.id === selectedWiId) || null;
+
                 return (
-                  <Button
-                    key={phase.key}
-                    variant={selectedPhase === phase.key ? "secondary" : "ghost"}
-                    size="sm"
-                    className="text-xs h-7"
-                    onClick={() => { setSelectedPhase(phase.key); setSelectedWorkItemId(null); }}
-                  >
-                    {phase.label}
-                    {count > 0 && <Badge variant="outline" className="ml-1 text-[10px] h-4 px-1">{count}</Badge>}
-                  </Button>
-                );
-              })}
-            </div>
-
-            {/* 작업항목 + 상세 split */}
-            <div className="flex-1 flex overflow-hidden">
-              {/* 좌측: 작업항목 목록 */}
-              <div className="w-[280px] shrink-0 border-r flex flex-col overflow-hidden">
-                <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/20 shrink-0">
-                  <span className="text-xs font-semibold">작업항목</span>
-                  <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => { setAddItemTitle(""); setAddItemOpen(true); }}>
-                    <Plus className="w-3.5 h-3.5" />
-                  </Button>
-                </div>
-                <div className="flex-1 overflow-y-auto p-2 space-y-1">
-                  {currentWorkItems.length === 0 ? (
-                    <div className="text-xs text-muted-foreground text-center py-6">작업항목이 없습니다</div>
-                  ) : currentWorkItems.map((wi) => (
-                    <div
-                      key={wi.id}
-                      className={cn(
-                        "group rounded-md border p-2.5 cursor-pointer transition-colors",
-                        selectedWorkItemId === wi.id ? "border-primary bg-primary/5" : "hover:bg-muted/50"
-                      )}
-                      onClick={() => setSelectedWorkItemId(wi.id!)}
-                    >
-                      <div className="flex items-start justify-between gap-1">
-                        <div className="min-w-0 flex-1">
-                          <div className="text-xs font-medium truncate">{wi.title}</div>
-                          <div className="flex items-center gap-1.5 mt-1">
-                            {wi.is_required === "Y" && <Badge variant="destructive" className="text-[9px] h-4 px-1">필수</Badge>}
-                            <span className="text-[10px] text-muted-foreground">상세 {wi.details?.length || wi.detail_count || 0}건</span>
-                          </div>
-                        </div>
-                        <Button
-                          variant="ghost" size="icon"
-                          className="h-5 w-5 opacity-0 group-hover:opacity-100 shrink-0"
-                          onClick={e => { e.stopPropagation(); handleDeleteWorkItem(wi.id!); }}
-                        >
-                          <Trash2 className="w-3 h-3 text-destructive" />
-                        </Button>
+                  <div key={phase.key} className="rounded-lg border bg-card">
+                    {/* 섹션 헤더 */}
+                    <div className="flex items-center justify-between border-b px-4 py-2.5">
+                      <div className="flex items-center gap-2">
+                        <h3 className="text-sm font-semibold">{phase.label}</h3>
+                        <Badge variant="secondary" className="h-5 rounded-full px-2 text-[10px]">
+                          {phaseItems.length}개 항목
+                        </Badge>
                       </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-              {/* 우측: 상세 목록 */}
-              <div className="flex-1 flex flex-col overflow-hidden">
-                {!selectedWorkItem ? (
-                  <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
-                    <ChevronRight className="w-8 h-8 mb-2 opacity-20" />
-                    <p className="text-xs">좌측에서 작업항목을 선택하세요</p>
-                  </div>
-                ) : (
-                  <>
-                    <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/20 shrink-0">
-                      <div>
-                        <span className="text-xs font-semibold">{selectedWorkItem.title}</span>
-                        <span className="text-[10px] text-muted-foreground ml-2">상세 항목</span>
-                      </div>
-                      <Button variant="ghost" size="sm" className="h-6 text-xs" onClick={() => { setAddDetailContent(""); setAddDetailType("checklist"); setAddDetailOpen(true); }}>
-                        <Plus className="w-3 h-3 mr-1" /> 상세 추가
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-7 gap-1 text-xs"
+                        onClick={() => openAddWorkItem(phase.key)}
+                      >
+                        <Plus className="h-3 w-3" />
+                        작업항목 추가
                       </Button>
                     </div>
-                    <div className="flex-1 overflow-y-auto p-3 space-y-2">
-                      {(!selectedWorkItem.details || selectedWorkItem.details.length === 0) ? (
-                        <div className="text-xs text-muted-foreground text-center py-8">상세 항목이 없습니다</div>
-                      ) : selectedWorkItem.details.map((detail, dIdx) => (
-                        <div key={detail.id || dIdx} className="group flex items-start gap-2 rounded-md border p-3 hover:bg-muted/30">
-                          <GripVertical className="w-3.5 h-3.5 mt-0.5 text-muted-foreground/30 shrink-0" />
-                          <div className="flex-1 min-w-0">
-                            <div className="flex items-center gap-2">
-                              <Badge variant="outline" className="text-[10px] h-4 px-1.5 shrink-0">
-                                {getDetailTypeLabel(detail.detail_type || "checklist")}
-                              </Badge>
-                              {detail.is_required === "Y" && <Badge variant="destructive" className="text-[9px] h-4 px-1">필수</Badge>}
-                            </div>
-                            <p className="text-xs mt-1 break-all">{detail.content || "-"}</p>
-                            {detail.remark && <p className="text-[10px] text-muted-foreground mt-0.5">{detail.remark}</p>}
-                            {detail.detail_type === "inspection" && (detail.lower_limit || detail.upper_limit) && (
-                              <div className="text-[10px] text-muted-foreground mt-1">
-                                범위: {detail.lower_limit || "-"} ~ {detail.upper_limit || "-"} {detail.unit || ""}
-                              </div>
-                            )}
+
+                    {/* 좌우 분할 */}
+                    <div className="flex min-h-[140px]">
+                      {/* 좌측: 240px 작업항목 카드 */}
+                      <div className="w-[240px] shrink-0 border-r p-2">
+                        {phaseItems.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-6 text-center">
+                            <ClipboardList className="mb-1 h-6 w-6 text-muted-foreground/40" />
+                            <p className="text-[11px] text-muted-foreground">등록된 항목이 없습니다</p>
                           </div>
-                          <Button
-                            variant="ghost" size="icon"
-                            className="h-5 w-5 opacity-0 group-hover:opacity-100 shrink-0"
-                            onClick={() => handleDeleteDetail(detail.id!)}
-                          >
-                            <Trash2 className="w-3 h-3 text-destructive" />
-                          </Button>
-                        </div>
-                      ))}
+                        ) : (
+                          <div className="space-y-1.5">
+                            {phaseItems.map(item => (
+                              <div
+                                key={item.id}
+                                onClick={() => setSelectedWorkItemIdByPhase(prev => ({ ...prev, [phase.key]: item.id! }))}
+                                className={cn(
+                                  "group flex cursor-pointer items-start gap-2 rounded-lg border p-3 transition-all",
+                                  "hover:border-primary/30 hover:shadow-sm",
+                                  selectedWiId === item.id
+                                    ? "border-primary bg-primary/5 shadow-sm"
+                                    : "border-border bg-card"
+                                )}
+                              >
+                                <GripVertical className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground/50" />
+                                <div className="min-w-0 flex-1">
+                                  <div className="flex items-center gap-2">
+                                    <span className="truncate text-sm font-medium">{item.title}</span>
+                                  </div>
+                                  <div className="mt-1 flex items-center gap-2">
+                                    <Badge variant="secondary" className="h-5 px-1.5 text-[10px] font-normal">
+                                      {item.details?.length || item.detail_count || 0}개
+                                    </Badge>
+                                    <Badge
+                                      variant={item.is_required === "Y" ? "default" : "outline"}
+                                      className="h-5 px-1.5 text-[10px] font-normal"
+                                    >
+                                      {item.is_required === "Y" ? "필수" : "선택"}
+                                    </Badge>
+                                  </div>
+                                </div>
+                                <div className="flex shrink-0 gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+                                  <Button
+                                    variant="ghost" size="icon" className="h-6 w-6"
+                                    onClick={e => { e.stopPropagation(); openEditWorkItem(item); }}
+                                  >
+                                    <Pencil className="h-3 w-3" />
+                                  </Button>
+                                  <Button
+                                    variant="ghost" size="icon" className="h-6 w-6 text-destructive hover:text-destructive"
+                                    onClick={e => { e.stopPropagation(); handleDeleteWorkItem(item.id!, phase.key); }}
+                                  >
+                                    <Trash2 className="h-3 w-3" />
+                                  </Button>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+
+                      {/* 우측: 상세 테이블 */}
+                      <div className="flex-1 flex flex-col">
+                        {!selectedWi ? (
+                          <div className="flex h-full flex-col items-center justify-center text-center">
+                            <p className="text-sm text-muted-foreground">왼쪽에서 항목을 선택하세요</p>
+                          </div>
+                        ) : (
+                          <>
+                            {/* 상세 헤더 */}
+                            <div className="flex items-center justify-between border-b px-4 py-2">
+                              <div className="flex items-center gap-2">
+                                <span className="text-sm font-semibold">{selectedWi.title}</span>
+                                <Badge variant="secondary" className="text-[10px]">
+                                  {selectedWi.details?.length || 0}개
+                                </Badge>
+                              </div>
+                              <Button
+                                variant="outline" size="sm" className="h-7 gap-1 text-xs"
+                                onClick={() => openAddDetail(phase.key)}
+                              >
+                                <Plus className="h-3 w-3" />
+                                상세 추가
+                              </Button>
+                            </div>
+
+                            {/* 테이블 */}
+                            <div className="flex-1 overflow-y-auto">
+                              <table className="w-full text-xs">
+                                <thead className="sticky top-0 bg-muted/50">
+                                  <tr className="border-b">
+                                    <th className="w-12 px-2 py-2 text-center font-medium text-muted-foreground">순서</th>
+                                    <th className="w-20 px-2 py-2 text-left font-medium text-muted-foreground">유형</th>
+                                    <th className="px-2 py-2 text-left font-medium text-muted-foreground">내용</th>
+                                    <th className="w-14 px-2 py-2 text-center font-medium text-muted-foreground">필수</th>
+                                    <th className="w-16 px-2 py-2 text-center font-medium text-muted-foreground">관리</th>
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                  {(selectedWi.details || []).map((detail, idx) => (
+                                    <tr key={detail.id || idx} className="border-b transition-colors hover:bg-muted/30">
+                                      <td className="px-2 py-1.5 text-center text-muted-foreground">{idx + 1}</td>
+                                      <td className="px-2 py-1.5">
+                                        <Badge variant="outline" className="text-[10px] font-normal">
+                                          {getDetailTypeLabel(detail.detail_type || "checklist")}
+                                        </Badge>
+                                      </td>
+                                      <td className="px-2 py-1.5">{getContentSummary(detail)}</td>
+                                      <td className="px-2 py-1.5 text-center">
+                                        <Badge
+                                          variant={detail.is_required === "Y" ? "default" : "secondary"}
+                                          className="text-[10px] font-normal"
+                                        >
+                                          {detail.is_required === "Y" ? "필수" : "선택"}
+                                        </Badge>
+                                      </td>
+                                      <td className="px-2 py-1.5 text-center">
+                                        <div className="flex justify-center gap-0.5">
+                                          <Button
+                                            variant="ghost" size="icon" className="h-6 w-6"
+                                            onClick={() => openEditDetail(detail, phase.key)}
+                                          >
+                                            <Pencil className="h-3 w-3" />
+                                          </Button>
+                                          <Button
+                                            variant="ghost" size="icon" className="h-6 w-6 text-destructive hover:text-destructive"
+                                            onClick={() => handleDeleteDetail(detail.id!, phase.key)}
+                                          >
+                                            <Trash2 className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </td>
+                                    </tr>
+                                  ))}
+                                </tbody>
+                              </table>
+
+                              {(!selectedWi.details || selectedWi.details.length === 0) && (
+                                <div className="flex flex-col items-center justify-center py-8 text-center">
+                                  <p className="text-xs text-muted-foreground">
+                                    상세 항목이 없습니다. &quot;상세 추가&quot; 버튼을 클릭하여 추가하세요.
+                                  </p>
+                                </div>
+                              )}
+                            </div>
+                          </>
+                        )}
+                      </div>
                     </div>
-                  </>
-                )}
-              </div>
+                  </div>
+                );
+              })}
             </div>
           </div>
         )}
@@ -471,13 +667,15 @@ export function WorkStandardEditModal({
           </div>
         </DialogFooter>
 
-        {/* 작업항목 추가 다이얼로그 */}
+        {/* 작업항목 추가/수정 다이얼로그 */}
         <Dialog open={addItemOpen} onOpenChange={setAddItemOpen}>
           <DialogContent className="max-w-[95vw] sm:max-w-[400px]" onClick={e => e.stopPropagation()}>
             <DialogHeader>
-              <DialogTitle className="text-base">작업항목 추가</DialogTitle>
+              <DialogTitle className="text-base">
+                작업항목 {editingWorkItem ? "수정" : "추가"}
+              </DialogTitle>
               <DialogDescription className="text-xs">
-                {PHASES.find(p => p.key === selectedPhase)?.label} 단계에 작업항목을 추가합니다.
+                {PHASES.find(p => p.key === addItemPhase)?.label} 단계에 작업항목을 {editingWorkItem ? "수정" : "추가"}합니다.
               </DialogDescription>
             </DialogHeader>
             <div className="space-y-3">
@@ -492,25 +690,39 @@ export function WorkStandardEditModal({
             </div>
             <DialogFooter className="gap-2">
               <Button variant="outline" size="sm" onClick={() => setAddItemOpen(false)}>취소</Button>
-              <Button size="sm" onClick={handleAddWorkItem}>추가</Button>
+              <Button size="sm" onClick={handleSaveWorkItem}>{editingWorkItem ? "수정" : "추가"}</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>
 
-        {/* 상세 추가 다이얼로그 */}
-        <Dialog open={addDetailOpen} onOpenChange={setAddDetailOpen}>
-          <DialogContent className="max-w-[95vw] sm:max-w-[450px]" onClick={e => e.stopPropagation()}>
+        {/* 상세 추가/수정 다이얼로그 (유형별 동적 필드) */}
+        <Dialog open={detailModalOpen} onOpenChange={v => { if (!v) setDetailModalOpen(false); }}>
+          <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
             <DialogHeader>
-              <DialogTitle className="text-base">상세 항목 추가</DialogTitle>
+              <DialogTitle className="text-base">
+                상세 항목 {detailModalMode === "add" ? "추가" : "수정"}
+              </DialogTitle>
               <DialogDescription className="text-xs">
-                "{selectedWorkItem?.title}"에 상세 항목을 추가합니다.
+                상세 항목의 유형을 선택하고 내용을 입력하세요
               </DialogDescription>
             </DialogHeader>
-            <div className="space-y-3">
+
+            <div className="space-y-4">
+              {/* 유형 선택 */}
               <div>
-                <Label className="text-xs">유형</Label>
-                <Select value={addDetailType} onValueChange={setAddDetailType}>
-                  <SelectTrigger className="h-8 text-xs mt-1"><SelectValue /></SelectTrigger>
+                <Label className="text-xs">유형 <span className="text-destructive">*</span></Label>
+                <Select
+                  value={detailFormData.detail_type || ""}
+                  onValueChange={v => {
+                    setDetailFormData({
+                      detail_type: v,
+                      is_required: detailFormData.is_required || "Y",
+                    });
+                  }}
+                >
+                  <SelectTrigger className="mt-1 h-8 text-xs">
+                    <SelectValue placeholder="선택하세요" />
+                  </SelectTrigger>
                   <SelectContent>
                     {DETAIL_TYPES.map(dt => (
                       <SelectItem key={dt.value} value={dt.value} className="text-xs">{dt.label}</SelectItem>
@@ -518,18 +730,274 @@ export function WorkStandardEditModal({
                   </SelectContent>
                 </Select>
               </div>
-              <div>
-                <Label className="text-xs">내용</Label>
-                <Input value={addDetailContent} onChange={e => setAddDetailContent(e.target.value)} placeholder="상세 내용 입력" className="h-8 text-xs mt-1" />
-              </div>
-              <div className="flex items-center gap-2">
-                <Checkbox checked={addDetailRequired === "Y"} onCheckedChange={v => setAddDetailRequired(v ? "Y" : "N")} />
-                <Label className="text-xs">필수 항목</Label>
-              </div>
+
+              {/* 체크리스트 */}
+              {detailFormData.detail_type === "checklist" && (
+                <div>
+                  <Label className="text-xs">체크 내용 <span className="text-destructive">*</span></Label>
+                  <Input
+                    value={detailFormData.content || ""}
+                    onChange={e => updateDetailField("content", e.target.value)}
+                    placeholder="예: 전원 상태 확인"
+                    className="mt-1 h-8 text-xs"
+                  />
+                </div>
+              )}
+
+              {/* 검사항목 */}
+              {detailFormData.detail_type === "inspection" && (
+                <>
+                  <div>
+                    <Label className="text-xs">검사 항목명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="예: 외경 치수"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <Label className="text-xs">검사 방법</Label>
+                      <Input
+                        value={detailFormData.inspection_method || ""}
+                        onChange={e => updateDetailField("inspection_method", e.target.value)}
+                        placeholder="예: 마이크로미터"
+                        className="mt-1 h-8 text-xs"
+                      />
+                    </div>
+                    <div>
+                      <Label className="text-xs">단위</Label>
+                      <Select
+                        value={detailFormData.unit || ""}
+                        onValueChange={v => updateDetailField("unit", v)}
+                      >
+                        <SelectTrigger className="mt-1 h-8 text-xs">
+                          <SelectValue placeholder="단위 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {UNIT_OPTIONS.map(u => (
+                            <SelectItem key={u} value={u}>{u}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="rounded-lg border bg-muted/30 p-3">
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.base_value || ""}
+                          onChange={e => updateDetailField("base_value", e.target.value)}
+                          placeholder="기준값"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                      <span className="text-sm font-semibold text-muted-foreground">&plusmn;</span>
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.tolerance || ""}
+                          onChange={e => updateDetailField("tolerance", e.target.value)}
+                          placeholder="오차범위"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {/* 작업절차 */}
+              {detailFormData.detail_type === "procedure" && (
+                <>
+                  <div>
+                    <Label className="text-xs">작업 내용 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="예: 자재 투입"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs">소요 시간 (분)</Label>
+                    <Input
+                      type="number"
+                      value={detailFormData.duration_minutes ?? ""}
+                      onChange={e => updateDetailField("duration_minutes", e.target.value ? Number(e.target.value) : undefined)}
+                      placeholder="예: 5"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                </>
+              )}
+
+              {/* 직접입력 */}
+              {detailFormData.detail_type === "input" && (
+                <>
+                  <div>
+                    <Label className="text-xs">입력 항목명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="예: 작업자 의견"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs">입력 타입</Label>
+                    <Select
+                      value={detailFormData.input_type || "text"}
+                      onValueChange={v => updateDetailField("input_type", v)}
+                    >
+                      <SelectTrigger className="mt-1 h-8 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {INPUT_TYPES.map(t => (
+                          <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </>
+              )}
+
+              {/* 문서참조 */}
+              {detailFormData.detail_type === "lookup" && (
+                <div className="flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2.5">
+                  <span className="text-xs text-blue-800">
+                    해당 품목에 등록된 문서를 자동으로 불러옵니다.
+                  </span>
+                </div>
+              )}
+
+              {/* 설비점검 */}
+              {detailFormData.detail_type === "equip_inspection" && (
+                <div>
+                  <Label className="text-xs">점검 내용</Label>
+                  <Input
+                    value={detailFormData.content || ""}
+                    onChange={e => updateDetailField("content", e.target.value)}
+                    placeholder="예: 설비 가동 전 안전 점검"
+                    className="mt-1 h-8 text-xs"
+                  />
+                </div>
+              )}
+
+              {/* 설비조건 */}
+              {detailFormData.detail_type === "equip_condition" && (
+                <>
+                  <div>
+                    <Label className="text-xs">조건명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="조건명 (예: 온도, 압력, RPM)"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div className="rounded-lg border bg-muted/30 p-3 space-y-3">
+                    <div className="flex gap-2">
+                      <div className="flex-[0.6]">
+                        <Select
+                          value={detailFormData.condition_unit || ""}
+                          onValueChange={v => updateDetailField("condition_unit", v)}
+                        >
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="단위" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {UNIT_OPTIONS.map(u => (
+                              <SelectItem key={u} value={u}>{u}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.condition_base_value || ""}
+                          onChange={e => updateDetailField("condition_base_value", e.target.value)}
+                          placeholder="기준값"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                      <span className="text-sm font-semibold text-muted-foreground">&plusmn;</span>
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.condition_tolerance || ""}
+                          onChange={e => updateDetailField("condition_tolerance", e.target.value)}
+                          placeholder="오차범위"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {/* 실적등록 */}
+              {detailFormData.detail_type === "production_result" && (
+                <div className="rounded-lg border border-sky-200 bg-sky-50 p-3">
+                  <p className="text-xs font-semibold text-sky-800">작업수량 / 불량수량 / 양품수량</p>
+                  <p className="mt-1 text-[11px] text-muted-foreground">실적 입력 항목이 자동으로 생성됩니다.</p>
+                </div>
+              )}
+
+              {/* 자재투입 */}
+              {detailFormData.detail_type === "material_input" && (
+                <div className="rounded-lg border border-sky-200 bg-sky-50 p-3">
+                  <p className="text-xs font-semibold text-sky-800">BOM 구성 자재 (자동 연동)</p>
+                  <p className="mt-1 text-[11px] text-muted-foreground">품목에 등록된 BOM 구성 자재가 자동으로 적용됩니다.</p>
+                </div>
+              )}
+
+              {/* 필수 여부 (모든 유형 공통) */}
+              {detailFormData.detail_type && (
+                <div>
+                  <Label className="text-xs">필수 여부</Label>
+                  <Select
+                    value={detailFormData.is_required || "Y"}
+                    onValueChange={v => updateDetailField("is_required", v)}
+                  >
+                    <SelectTrigger className="mt-1 h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y">필수</SelectItem>
+                      <SelectItem value="N">선택</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+
+              {/* 비고 (모든 유형 공통) */}
+              {detailFormData.detail_type && (
+                <div>
+                  <Label className="text-xs">비고</Label>
+                  <Input
+                    value={detailFormData.remark || ""}
+                    onChange={e => updateDetailField("remark", e.target.value)}
+                    placeholder="비고 입력"
+                    className="mt-1 h-8 text-xs"
+                  />
+                </div>
+              )}
             </div>
+
             <DialogFooter className="gap-2">
-              <Button variant="outline" size="sm" onClick={() => setAddDetailOpen(false)}>취소</Button>
-              <Button size="sm" onClick={handleAddDetail}>추가</Button>
+              <Button variant="outline" size="sm" onClick={() => setDetailModalOpen(false)}>취소</Button>
+              <Button size="sm" onClick={handleSaveDetail}>{detailModalMode === "add" ? "추가" : "수정"}</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>
diff --git a/frontend/app/(main)/COMPANY_29/production/work-instruction/page.tsx b/frontend/app/(main)/COMPANY_29/production/work-instruction/page.tsx
index 369eac6a..08ace7ec 100644
--- a/frontend/app/(main)/COMPANY_29/production/work-instruction/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/production/work-instruction/page.tsx
@@ -1,37 +1,56 @@
 "use client";
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useMemo, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
-import { Plus, Trash2, RotateCcw, Save, X, ChevronLeft, ChevronRight, Search, Loader2, Wrench, Pencil, CheckCircle2, ArrowRight, Check, ChevronsUpDown, ClipboardCheck } from "lucide-react";
+import { Plus, Trash2, Save, X, ChevronLeft, ChevronRight, Search, Loader2, Wrench, Pencil, CheckCircle2, ArrowRight, Check, ChevronsUpDown, ClipboardCheck, Inbox, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
+// API: /work-instruction/*
 import {
   getWorkInstructionList, previewWorkInstructionNo, saveWorkInstruction, deleteWorkInstructions,
   getWIItemSource, getWISalesOrderSource, getWIProductionPlanSource, getEquipmentList, getEmployeeList,
   getRoutingVersions, RoutingVersionData,
 } from "@/lib/api/workInstruction";
 import { WorkStandardEditModal } from "./WorkStandardEditModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "work_instruction_no", label: "작업지시번호" },
+  { key: "status", label: "상태" },
+  { key: "progress", label: "진행현황" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "qty", label: "수량" },
+  { key: "equipment", label: "설비" },
+  { key: "routing", label: "라우팅" },
+  { key: "work_team", label: "작업조" },
+  { key: "worker", label: "작업자" },
+  { key: "start_date", label: "시작일" },
+  { key: "end_date", label: "완료일" },
+  { key: "actions", label: "작업" },
+];
 
 type SourceType = "production" | "order" | "item";
 
 const STATUS_BADGE: Record<string, { label: string; cls: string }> = {
-  "일반": { label: "일반", cls: "bg-blue-100 text-blue-800 border-blue-200" },
-  "긴급": { label: "긴급", cls: "bg-red-100 text-red-800 border-red-200" },
+  "일반": { label: "일반", cls: "bg-primary/10 text-primary border-primary/20" },
+  "긴급": { label: "긴급", cls: "bg-destructive/10 text-destructive border-destructive/20" },
 };
 const PROGRESS_BADGE: Record<string, { label: string; cls: string }> = {
-  "대기": { label: "대기", cls: "bg-amber-100 text-amber-800" },
-  "진행중": { label: "진행중", cls: "bg-blue-100 text-blue-800" },
-  "완료": { label: "완료", cls: "bg-emerald-100 text-emerald-800" },
+  "대기": { label: "대기", cls: "bg-warning/10 text-warning" },
+  "진행중": { label: "진행중", cls: "bg-primary/10 text-primary" },
+  "완료": { label: "완료", cls: "bg-success/10 text-success" },
 };
 
 interface EquipmentOption { id: string; equipment_code: string; equipment_name: string; }
@@ -39,21 +58,18 @@ interface EmployeeOption { user_id: string; user_name: string; dept_name: string
 interface SelectedItem {
   itemCode: string; itemName: string; spec: string; qty: number; remark: string;
   sourceType: SourceType; sourceTable: string; sourceId: string | number;
+  routing?: string; routingOptions?: RoutingVersionData[];
 }
 
 export default function WorkInstructionPage() {
+  const ts = useTableSettings("c16-work-instruction", "work_instruction", GRID_COLUMNS);
   const [orders, setOrders] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [equipmentOptions, setEquipmentOptions] = useState<EquipmentOption[]>([]);
   const [employeeOptions, setEmployeeOptions] = useState<EmployeeOption[]>([]);
 
   // 검색
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [debouncedKeyword, setDebouncedKeyword] = useState("");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchProgress, setSearchProgress] = useState("all");
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 1단계: 등록 모달
   const [isRegModalOpen, setIsRegModalOpen] = useState(false);
@@ -119,9 +135,6 @@ export default function WorkInstructionPage() {
   const [wsModalItemName, setWsModalItemName] = useState("");
   const [wsModalItemCode, setWsModalItemCode] = useState("");
 
-  useEffect(() => { const t = setTimeout(() => setDebouncedKeyword(searchKeyword), 500); return () => clearTimeout(t); }, [searchKeyword]);
-
-
   useEffect(() => {
     getEquipmentList().then(r => { if (r.success) setEquipmentOptions(r.data || []); });
     getEmployeeList().then(r => { if (r.success) setEmployeeOptions(r.data || []); });
@@ -131,23 +144,28 @@ export default function WorkInstructionPage() {
     setLoading(true);
     try {
       const params: any = {};
-      if (searchDateFrom) params.dateFrom = searchDateFrom;
-      if (searchDateTo) params.dateTo = searchDateTo;
-      if (searchStatus !== "all") params.status = searchStatus;
-      if (searchProgress !== "all") params.progressStatus = searchProgress;
-      if (debouncedKeyword.trim()) params.keyword = debouncedKeyword.trim();
+      for (const f of searchFilters) {
+        if (f.columnName === "start_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split("|");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status" && f.value) {
+          params.status = f.value;
+        } else if (f.columnName === "progress" && f.value) {
+          params.progressStatus = f.value;
+        } else if (f.columnName === "work_instruction_no" && f.value) {
+          params.keyword = f.value;
+        } else if (f.columnName === "item_name" && f.value) {
+          params.keyword = f.value;
+        }
+      }
       const r = await getWorkInstructionList(params);
       if (r.success) setOrders(r.data || []);
     } catch {} finally { setLoading(false); }
-  }, [searchDateFrom, searchDateTo, searchStatus, searchProgress, debouncedKeyword]);
+  }, [searchFilters]);
 
   useEffect(() => { fetchOrders(); }, [fetchOrders]);
 
-  const handleResetSearch = () => {
-    setSearchKeyword(""); setDebouncedKeyword(""); setSearchStatus("all"); setSearchProgress("all");
-    setSearchDateFrom(""); setSearchDateTo("");
-  };
-
   // ─── 1단계 등록 ───
   const openRegModal = () => {
     setRegSourceType("production"); setRegSourceData([]); setRegKeyword(""); setRegCheckedIds(new Set());
@@ -206,14 +224,17 @@ export default function WorkInstructionPage() {
     setConfirmRouting(""); setConfirmRoutingOptions([]);
     previewWorkInstructionNo().then(r => { if (r.success) setConfirmWiNo(r.instructionNo); else setConfirmWiNo("(자동생성)"); }).catch(() => setConfirmWiNo("(자동생성)"));
 
-    // 첫 번째 품목의 라우팅 로드
-    const firstItem = items.length > 0 ? items[0] : null;
-    if (firstItem) {
-      getRoutingVersions("__new__", firstItem.itemCode).then(r => {
+    // 품목별 라우팅 옵션 로드
+    const finalItems = regMergeSameItem ? Array.from(new Map(items.map(i => [i.itemCode, i])).values()) : items;
+    const uniqueItemCodes = [...new Set(finalItems.map(i => i.itemCode).filter(Boolean))];
+    for (const ic of uniqueItemCodes) {
+      getRoutingVersions("__new__", ic).then(r => {
         if (r.success && r.data) {
-          setConfirmRoutingOptions(r.data);
-          const defaultRouting = r.data.find(rv => rv.is_default);
-          if (defaultRouting) setConfirmRouting(defaultRouting.id);
+          setConfirmItems(prev => prev.map(it => {
+            if (it.itemCode !== ic) return it;
+            const defaultRv = r.data.find(rv => rv.is_default);
+            return { ...it, routingOptions: r.data, routing: defaultRv?.id || "" };
+          }));
         }
       }).catch(() => {});
     }
@@ -242,7 +263,7 @@ export default function WorkInstructionPage() {
         status: confirmStatus, startDate: confirmStartDate, endDate: confirmEndDate,
         equipmentId: confirmEquipmentId, workTeam: confirmWorkTeam, worker: confirmWorker,
         routing: confirmRouting || null,
-        items: confirmItems.map(i => ({ itemNumber: i.itemCode, itemCode: i.itemCode, qty: String(i.qty), remark: i.remark, sourceTable: i.sourceTable, sourceId: String(i.sourceId), partCode: i.itemCode })),
+        items: confirmItems.map(i => ({ itemNumber: i.itemCode, itemCode: i.itemCode, qty: String(i.qty), remark: i.remark, sourceTable: i.sourceTable, sourceId: String(i.sourceId), partCode: i.itemCode, routing: i.routing || null })),
       };
       const r = await saveWorkInstruction(payload);
       if (r.success) { setIsConfirmModalOpen(false); fetchOrders(); alert("작업지시가 등록되었습니다."); }
@@ -258,21 +279,35 @@ export default function WorkInstructionPage() {
     setEditStartDate(order.start_date || ""); setEditEndDate(order.end_date || "");
     setEditEquipmentId(order.equipment_id || ""); setEditWorkTeam(order.work_team || "");
     setEditWorker(order.worker || ""); setEditRemark(order.wi_remark || "");
-    setEditItems(relatedDetails.map((d: any) => ({
+    const items: SelectedItem[] = relatedDetails.map((d: any) => ({
       itemCode: d.item_number || d.part_code || "", itemName: d.item_name || "", spec: d.item_spec || "",
       qty: Number(d.detail_qty || 0), remark: d.detail_remark || "",
       sourceType: (d.source_table === "sales_order_detail" ? "order" : d.source_table === "production_plan_mng" ? "production" : "item") as SourceType,
       sourceTable: d.source_table || "item_info", sourceId: d.source_id || "",
-    })));
+      routing: d.detail_routing_version_id || order.routing_version_id || "",
+      routingOptions: [],
+    }));
+    setEditItems(items);
     setAddQty(""); setAddEquipment(""); setAddWorkTeam(""); setAddWorker("");
     setEditRouting(order.routing_version_id || "");
     setEditRoutingOptions([]);
 
-    // 라우팅 옵션 로드
-    const itemCode = order.item_number || order.part_code || "";
-    if (itemCode) {
-      getRoutingVersions(wiNo, itemCode).then(r => {
-        if (r.success && r.data) setEditRoutingOptions(r.data);
+    // 품목별 라우팅 옵션 로드
+    const uniqueItemCodes = [...new Set(items.map(i => i.itemCode).filter(Boolean))];
+    for (const ic of uniqueItemCodes) {
+      getRoutingVersions(wiNo, ic).then(r => {
+        if (r.success && r.data) {
+          setEditItems(prev => prev.map(it => {
+            if (it.itemCode !== ic) return it;
+            const opts = r.data;
+            const hasRouting = it.routing && opts.some(rv => rv.id === it.routing);
+            return {
+              ...it,
+              routingOptions: opts,
+              routing: hasRouting ? it.routing : (opts.find(rv => rv.is_default)?.id || it.routing || ""),
+            };
+          }));
+        }
       }).catch(() => {});
     }
 
@@ -296,7 +331,7 @@ export default function WorkInstructionPage() {
         id: editOrder.wi_id, status: editStatus, startDate: editStartDate, endDate: editEndDate,
         equipmentId: editEquipmentId, workTeam: editWorkTeam, worker: editWorker, remark: editRemark,
         routing: editRouting || null,
-        items: editItems.map(i => ({ itemNumber: i.itemCode, itemCode: i.itemCode, qty: String(i.qty), remark: i.remark, sourceTable: i.sourceTable, sourceId: String(i.sourceId), partCode: i.itemCode })),
+        items: editItems.map(i => ({ itemNumber: i.itemCode, itemCode: i.itemCode, qty: String(i.qty), remark: i.remark, sourceTable: i.sourceTable, sourceId: String(i.sourceId), partCode: i.itemCode, routing: i.routing || null })),
       };
       const r = await saveWorkInstruction(payload);
       if (r.success) { setIsEditModalOpen(false); fetchOrders(); alert("수정되었습니다."); }
@@ -377,157 +412,121 @@ export default function WorkInstructionPage() {
   );
 
   return (
-    <div className="flex flex-col h-full gap-4 p-4">
-      {/* 검색 */}
-      <Card>
-        <CardContent className="p-4">
-          <div className="flex flex-wrap items-end gap-4">
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">작업기간</Label>
-              <div className="flex items-center gap-2">
-                <div className="w-[150px]"><FormDatePicker value={searchDateFrom} onChange={setSearchDateFrom} placeholder="시작일" /></div>
-                <span className="text-muted-foreground">~</span>
-                <div className="w-[150px]"><FormDatePicker value={searchDateTo} onChange={setSearchDateTo} placeholder="종료일" /></div>
-              </div>
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">검색</Label>
-              <Input placeholder="작업지시번호/품목명" value={searchKeyword} onChange={e => setSearchKeyword(e.target.value)} className="h-9 w-[200px]" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">상태</Label>
-              <Select value={searchStatus} onValueChange={setSearchStatus}>
-                <SelectTrigger className="h-9 w-[120px]"><SelectValue /></SelectTrigger>
-                <SelectContent><SelectItem value="all">전체</SelectItem><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">진행현황</Label>
-              <Select value={searchProgress} onValueChange={setSearchProgress}>
-                <SelectTrigger className="h-9 w-[130px]"><SelectValue /></SelectTrigger>
-                <SelectContent><SelectItem value="all">전체</SelectItem><SelectItem value="대기">대기</SelectItem><SelectItem value="진행중">진행중</SelectItem><SelectItem value="완료">완료</SelectItem></SelectContent>
-              </Select>
-            </div>
-            <div className="flex-1" />
-            <div className="flex items-center gap-2">
-              {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
-              <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}><RotateCcw className="w-4 h-4 mr-1.5" /> 초기화</Button>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+    <div className="flex flex-col h-[calc(100vh-4rem)] p-3 gap-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName="work_instruction"
+        filterId="c16-work-instruction"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={new Set(orders.map(o => o.work_instruction_no)).size}
+      />
 
       {/* 메인 테이블 */}
-      <Card className="flex-1 flex flex-col overflow-hidden">
-        <CardContent className="p-0 flex flex-col flex-1 overflow-hidden">
-          <div className="flex items-center justify-between p-4 border-b">
-            <h3 className="text-sm font-semibold flex items-center gap-2">
-              <Wrench className="w-4 h-4" /> 작업지시 목록
-              <Badge variant="secondary" className="text-xs">{new Set(orders.map(o => o.work_instruction_no)).size}건 ({orders.length}행)</Badge>
-            </h3>
-            <Button size="sm" onClick={openRegModal}><Plus className="w-4 h-4 mr-1.5" /> 작업지시 등록</Button>
+      <div className="flex-1 overflow-hidden border bg-card rounded-lg flex flex-col">
+        <div className="flex flex-col h-full">
+          {/* 패널 헤더 */}
+          <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/30 shrink-0">
+            <div className="flex items-center gap-2">
+              <Wrench className="w-4 h-4 text-muted-foreground" />
+              <span className="text-[13px] font-bold text-foreground">작업지시 목록</span>
+              <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                {new Set(orders.map(o => o.work_instruction_no)).size}건 ({orders.length}행)
+              </span>
+              {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button size="sm" onClick={openRegModal}>
+                <Plus className="w-3.5 h-3.5" /> 작업지시 등록
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                <Settings2 className="h-4 w-4" />
+              </Button>
+            </div>
           </div>
-          <div className="flex-1 overflow-auto">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
-                <TableRow>
-                  <TableHead className="w-[150px]">작업지시번호</TableHead>
-                  <TableHead className="w-[70px] text-center">상태</TableHead>
-                  <TableHead className="w-[100px] text-center">진행현황</TableHead>
-                  <TableHead>품목명</TableHead>
-                  <TableHead className="w-[100px]">규격</TableHead>
-                  <TableHead className="w-[80px] text-right">수량</TableHead>
-                  <TableHead className="w-[120px]">설비</TableHead>
-                  <TableHead className="w-[120px]">라우팅</TableHead>
-                  <TableHead className="w-[80px] text-center">작업조</TableHead>
-                  <TableHead className="w-[100px]">작업자</TableHead>
-                  <TableHead className="w-[100px] text-center">시작일</TableHead>
-                  <TableHead className="w-[100px] text-center">완료일</TableHead>
-                  <TableHead className="w-[150px] text-center">작업</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {loading ? (
-                  <TableRow><TableCell colSpan={13} className="text-center py-12"><Loader2 className="w-6 h-6 animate-spin mx-auto text-muted-foreground" /></TableCell></TableRow>
-                ) : orders.length === 0 ? (
-                  <TableRow><TableCell colSpan={13} className="text-center py-12 text-muted-foreground">작업지시가 없습니다</TableCell></TableRow>
-                ) : orders.map((o, rowIdx) => {
-                  const pct = getProgress(o);
-                  const pLabel = getProgressLabel(o);
-                  const pBadge = PROGRESS_BADGE[pLabel] || PROGRESS_BADGE["대기"];
-                  const sBadge = STATUS_BADGE[o.status] || STATUS_BADGE["일반"];
-                  const isFirstOfGroup = Number(o.detail_seq) === 1;
+
+          {/* 테이블 */}
+          <EDataTable
+            columns={[
+              { key: "work_instruction_no", label: "작업지시번호", width: "w-[150px]", render: (_v, row) => <span className="font-mono text-[13px] font-medium">{getDisplayNo(row)}</span> },
+              { key: "status", label: "상태", width: "w-[70px]", align: "center", render: (v) => {
+                const sBadge = STATUS_BADGE[v] || STATUS_BADGE["일반"];
+                return <Badge variant="outline" className={cn("text-[10px]", sBadge.cls)}>{sBadge.label}</Badge>;
+              }},
+              { key: "progress", label: "진행현황", width: "w-[100px]", align: "center", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return <span className="text-[10px] text-muted-foreground">↑</span>;
+                const pct = getProgress(row);
+                const pLabel = getProgressLabel(row);
+                const pBadge = PROGRESS_BADGE[pLabel] || PROGRESS_BADGE["대기"];
+                return (
+                  <div className="flex flex-col items-center gap-1">
+                    <Badge variant="secondary" className={cn("text-[10px]", pBadge.cls)}>{pBadge.label}</Badge>
+                    <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
+                      <div className={cn("h-full rounded-full transition-all", pct >= 100 ? "bg-success" : pct > 0 ? "bg-primary" : "bg-muted-foreground/30")} style={{ width: `${pct}%` }} />
+                    </div>
+                    <span className="text-[10px] text-muted-foreground">{pct}%</span>
+                  </div>
+                );
+              }},
+              { key: "item_name", label: "품목명", render: (_v, row) => row.item_name || row.item_number || "-" },
+              { key: "item_spec", label: "규격", width: "w-[100px]" },
+              { key: "detail_qty", label: "수량", width: "w-[80px]", align: "right", formatNumber: true },
+              { key: "equipment_name", label: "설비", width: "w-[120px]", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "routing", label: "라우팅", width: "w-[120px]", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return "";
+                if (row.routing_version_id) {
                   return (
-                    <TableRow key={`${o.wi_id}-${o.detail_id}`} className="hover:bg-muted/50">
-                      <TableCell className="font-mono text-xs font-medium">{getDisplayNo(o)}</TableCell>
-                      <TableCell className="text-center"><Badge variant="outline" className={cn("text-[10px]", sBadge.cls)}>{sBadge.label}</Badge></TableCell>
-                      <TableCell className="text-center">
-                        {isFirstOfGroup ? (
-                          <div className="flex flex-col items-center gap-1">
-                            <Badge variant="secondary" className={cn("text-[10px]", pBadge.cls)}>{pBadge.label}</Badge>
-                            <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
-                              <div className={cn("h-full rounded-full transition-all", pct >= 100 ? "bg-emerald-500" : pct > 0 ? "bg-blue-500" : "bg-gray-300")} style={{ width: `${pct}%` }} />
-                            </div>
-                            <span className="text-[10px] text-muted-foreground">{pct}%</span>
-                          </div>
-                        ) : <span className="text-[10px] text-muted-foreground">↑</span>}
-                      </TableCell>
-                      <TableCell className="text-sm">{o.item_name || o.item_number || "-"}</TableCell>
-                      <TableCell className="text-xs">{o.item_spec || "-"}</TableCell>
-                      <TableCell className="text-right text-xs font-medium">{Number(o.detail_qty || 0).toLocaleString()}</TableCell>
-                      <TableCell className="text-xs">{isFirstOfGroup ? (o.equipment_name || "-") : ""}</TableCell>
-                      <TableCell className="text-xs">
-                        {isFirstOfGroup ? (
-                          o.routing_version_id ? (
-                            <button
-                              className="text-primary underline underline-offset-2 hover:text-primary/80 cursor-pointer text-xs text-left"
-                              onClick={e => {
-                                e.stopPropagation();
-                                openWorkStandardModal(
-                                  o.work_instruction_no,
-                                  o.routing_version_id,
-                                  o.routing_name || "",
-                                  o.item_name || o.item_number || "",
-                                  o.item_number || ""
-                                );
-                              }}
-                            >
-                              {o.routing_name || "라우팅"} <ClipboardCheck className="w-3 h-3 inline ml-0.5" />
-                            </button>
-                          ) : <span className="text-muted-foreground">-</span>
-                        ) : ""}
-                      </TableCell>
-                      <TableCell className="text-center text-xs">{isFirstOfGroup ? (o.work_team || "-") : ""}</TableCell>
-                      <TableCell className="text-xs">{isFirstOfGroup ? getWorkerName(o.worker) : ""}</TableCell>
-                      <TableCell className="text-center text-xs">{isFirstOfGroup ? (o.start_date || "-") : ""}</TableCell>
-                      <TableCell className="text-center text-xs">{isFirstOfGroup ? (o.end_date || "-") : ""}</TableCell>
-                      <TableCell className="text-center">
-                        {isFirstOfGroup && (
-                          <div className="flex items-center justify-center gap-1">
-                            <Button variant="outline" size="sm" className="h-7 text-xs px-2" onClick={() => openEditModal(o)}><Pencil className="w-3 h-3 mr-1" /> 수정</Button>
-                            <Button variant="outline" size="sm" className="h-7 text-xs px-2 text-destructive border-destructive/30 hover:bg-destructive/10" onClick={() => handleDelete(o.wi_id)}><Trash2 className="w-3 h-3 mr-1" /> 삭제</Button>
-                          </div>
-                        )}
-                      </TableCell>
-                    </TableRow>
+                    <button
+                      className="text-primary underline underline-offset-2 hover:text-primary/80 cursor-pointer text-xs text-left"
+                      onClick={e => {
+                        e.stopPropagation();
+                        openWorkStandardModal(row.work_instruction_no, row.routing_version_id, row.routing_name || "", row.item_name || row.item_number || "", row.item_number || "");
+                      }}
+                    >
+                      {row.routing_name || "라우팅"} <ClipboardCheck className="w-3 h-3 inline ml-0.5" />
+                    </button>
                   );
-                })}
-              </TableBody>
-            </Table>
-          </div>
-        </CardContent>
-      </Card>
+                }
+                return <span className="text-muted-foreground">-</span>;
+              }},
+              { key: "work_team", label: "작업조", width: "w-[80px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "worker", label: "작업자", width: "w-[100px]", render: (v, row) => Number(row.detail_seq) === 1 ? getWorkerName(v) : "" },
+              { key: "start_date", label: "시작일", width: "w-[100px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "end_date", label: "완료일", width: "w-[100px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "actions", label: "작업", width: "w-[150px]", align: "center", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return null;
+                return (
+                  <div className="flex items-center justify-center gap-1">
+                    <Button variant="ghost" size="sm" className="h-7 text-xs px-2" onClick={() => openEditModal(row)}><Pencil className="w-3 h-3" /> 수정</Button>
+                    <Button variant="ghost" size="sm" className="h-7 text-xs px-2 text-destructive hover:text-destructive" onClick={() => handleDelete(row.wi_id)}><Trash2 className="w-3 h-3" /></Button>
+                  </div>
+                );
+              }},
+            ] as EDataTableColumn[]}
+            data={ts.groupData(orders)}
+            rowKey={(row) => `${row.wi_id}-${row.detail_id}`}
+            loading={loading}
+            emptyMessage="등록된 작업지시가 없어요"
+            showPagination
+            draggableColumns
+            columnOrderKey="c16-work-instruction"
+          />
+        </div>
+      </div>
 
       {/* ── 1단계: 등록 모달 ── */}
       <Dialog open={isRegModalOpen} onOpenChange={setIsRegModalOpen}>
         <DialogContent className="max-w-[95vw] sm:max-w-[1200px] h-[80vh] flex flex-col p-0 gap-0">
           <DialogHeader className="px-6 py-4 border-b shrink-0">
             <DialogTitle className="text-base flex items-center gap-2"><Plus className="w-4 h-4" /> 작업지시 등록</DialogTitle>
-            <DialogDescription className="text-xs">근거를 선택하고 품목을 체크한 후 "작업지시 적용" 버튼을 눌러주세요.</DialogDescription>
+            <DialogDescription className="text-xs text-muted-foreground">근거를 선택하고 품목을 체크한 후 "작업지시 적용" 버튼을 눌러주세요.</DialogDescription>
           </DialogHeader>
 
           <div className="px-6 py-3 border-b bg-muted/30 flex items-center gap-3 flex-wrap shrink-0">
-            <Label className="text-sm font-semibold whitespace-nowrap">근거:</Label>
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground whitespace-nowrap">근거</span>
             <Select value={regSourceType} onValueChange={v => setRegSourceType(v as SourceType)}>
               <SelectTrigger className="h-9 w-[160px]"><SelectValue placeholder="선택" /></SelectTrigger>
               <SelectContent><SelectItem value="production">생산계획</SelectItem><SelectItem value="order">수주</SelectItem><SelectItem value="item">품목정보</SelectItem></SelectContent>
@@ -542,25 +541,37 @@ export default function WorkInstructionPage() {
             <div className="flex-1" />
             <label className="flex items-center gap-1.5 cursor-pointer select-none">
               <Checkbox checked={regMergeSameItem} onCheckedChange={v => setRegMergeSameItem(!!v)} />
-              <span className="text-sm font-semibold">동일품목 합산</span>
+              <span className="text-xs font-semibold text-foreground">동일품목 합산</span>
             </label>
           </div>
 
           <div className="flex-1 overflow-auto px-6 py-4">
             {!regSourceType ? (
-              <div className="flex flex-col items-center justify-center h-full text-muted-foreground text-sm">근거를 선택하고 검색해주세요</div>
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-12 h-12 flex items-center justify-center mb-4">
+                  <Search className="w-6 h-6 text-muted-foreground/40" />
+                </div>
+                <p className="text-sm font-medium text-muted-foreground mb-1">근거를 선택해주세요</p>
+                <p className="text-xs text-muted-foreground/60">근거를 선택하고 검색하면 품목이 표시돼요</p>
+              </div>
             ) : regSourceLoading ? (
               <div className="flex items-center justify-center h-full"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
             ) : regSourceData.length === 0 ? (
-              <div className="flex flex-col items-center justify-center h-full text-muted-foreground text-sm">데이터가 없습니다</div>
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-12 h-12 flex items-center justify-center mb-4">
+                  <Inbox className="w-6 h-6 text-muted-foreground/40" />
+                </div>
+                <p className="text-sm font-medium text-muted-foreground mb-1">검색 결과가 없어요</p>
+                <p className="text-xs text-muted-foreground/60">다른 키워드로 검색해주세요</p>
+              </div>
             ) : (
               <Table>
-                <TableHeader className="sticky top-0 bg-background z-10">
-                  <TableRow>
-                    <TableHead className="w-[50px] text-center"><Checkbox checked={regSourceData.length > 0 && regCheckedIds.size === regSourceData.length} onCheckedChange={toggleRegAll} /></TableHead>
-                    {regSourceType === "item" && <><TableHead className="w-[120px]">품목코드</TableHead><TableHead>품목명</TableHead><TableHead className="w-[120px]">규격</TableHead></>}
-                    {regSourceType === "order" && <><TableHead className="w-[110px]">수주번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[100px]">규격</TableHead><TableHead className="w-[80px] text-right">수량</TableHead><TableHead className="w-[100px]">납기일</TableHead></>}
-                    {regSourceType === "production" && <><TableHead className="w-[110px]">계획번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[80px] text-right">계획수량</TableHead><TableHead className="w-[90px]">시작일</TableHead><TableHead className="w-[90px]">완료일</TableHead><TableHead className="w-[100px]">설비</TableHead></>}
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground"><Checkbox checked={regSourceData.length > 0 && regCheckedIds.size === regSourceData.length} onCheckedChange={toggleRegAll} /></TableHead>
+                    {regSourceType === "item" && <><TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead><TableHead>품목명</TableHead><TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead></>}
+                    {regSourceType === "order" && <><TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수주번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[100px]">규격</TableHead><TableHead className="w-[80px] text-right">수량</TableHead><TableHead className="w-[100px]">납기일</TableHead></>}
+                    {regSourceType === "production" && <><TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[80px] text-right">계획수량</TableHead><TableHead className="w-[90px]">시작일</TableHead><TableHead className="w-[90px]">완료일</TableHead><TableHead className="w-[100px]">설비</TableHead></>}
                   </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -568,11 +579,11 @@ export default function WorkInstructionPage() {
                     const id = getRegId(item);
                     const checked = regCheckedIds.has(id);
                     return (
-                      <TableRow key={`${regSourceType}-${id}-${idx}`} className={cn("cursor-pointer hover:bg-muted/50", checked && "bg-primary/5")} onClick={() => toggleRegItem(id)}>
+                      <TableRow key={`${regSourceType}-${id}-${idx}`} className={cn("cursor-pointer hover:bg-muted/30", checked && "bg-primary/5")} onClick={() => toggleRegItem(id)}>
                         <TableCell className="text-center" onClick={e => e.stopPropagation()}><Checkbox checked={checked} onCheckedChange={() => toggleRegItem(id)} /></TableCell>
-                        {regSourceType === "item" && <><TableCell className="text-xs font-medium">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-xs">{item.spec || "-"}</TableCell></>}
-                        {regSourceType === "order" && <><TableCell className="text-xs">{item.order_no}</TableCell><TableCell className="text-xs">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-xs">{item.spec || "-"}</TableCell><TableCell className="text-right text-xs">{Number(item.qty || 0).toLocaleString()}</TableCell><TableCell className="text-xs">{item.due_date || "-"}</TableCell></>}
-                        {regSourceType === "production" && <><TableCell className="text-xs">{item.plan_no}</TableCell><TableCell className="text-xs">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-right text-xs">{Number(item.plan_qty || 0).toLocaleString()}</TableCell><TableCell className="text-xs">{item.start_date ? String(item.start_date).split("T")[0] : "-"}</TableCell><TableCell className="text-xs">{item.end_date ? String(item.end_date).split("T")[0] : "-"}</TableCell><TableCell className="text-xs">{item.equipment_name || "-"}</TableCell></>}
+                        {regSourceType === "item" && <><TableCell className="text-[13px] font-medium">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-[13px]">{item.spec || "-"}</TableCell></>}
+                        {regSourceType === "order" && <><TableCell className="text-[13px]">{item.order_no}</TableCell><TableCell className="text-[13px]">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-[13px]">{item.spec || "-"}</TableCell><TableCell className="text-right text-[13px]">{Number(item.qty || 0).toLocaleString()}</TableCell><TableCell className="text-[13px]">{item.due_date || "-"}</TableCell></>}
+                        {regSourceType === "production" && <><TableCell className="text-[13px]">{item.plan_no}</TableCell><TableCell className="text-[13px]">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-right text-[13px]">{Number(item.plan_qty || 0).toLocaleString()}</TableCell><TableCell className="text-[13px]">{item.start_date ? String(item.start_date).split("T")[0] : "-"}</TableCell><TableCell className="text-[13px]">{item.end_date ? String(item.end_date).split("T")[0] : "-"}</TableCell><TableCell className="text-[13px]">{item.equipment_name || "-"}</TableCell></>}
                       </TableRow>
                     );
                   })}
@@ -585,9 +596,9 @@ export default function WorkInstructionPage() {
             <div className="px-6 py-2 border-t bg-muted/10 flex items-center justify-between shrink-0">
               <span className="text-xs text-muted-foreground">총 {regTotalCount}건 (선택: {regCheckedIds.size}건)</span>
               <div className="flex items-center gap-1">
-                <Button variant="outline" size="icon" className="h-7 w-7" disabled={regPage <= 1} onClick={() => { const p = regPage - 1; setRegPage(p); fetchRegSource(p); }}><ChevronLeft className="w-3.5 h-3.5" /></Button>
+                <Button variant="ghost" size="icon" className="h-7 w-7" disabled={regPage <= 1} onClick={() => { const p = regPage - 1; setRegPage(p); fetchRegSource(p); }}><ChevronLeft className="w-3.5 h-3.5" /></Button>
                 <span className="text-xs font-medium px-2">{regPage} / {totalRegPages}</span>
-                <Button variant="outline" size="icon" className="h-7 w-7" disabled={regPage >= totalRegPages} onClick={() => { const p = regPage + 1; setRegPage(p); fetchRegSource(p); }}><ChevronRight className="w-3.5 h-3.5" /></Button>
+                <Button variant="ghost" size="icon" className="h-7 w-7" disabled={regPage >= totalRegPages} onClick={() => { const p = regPage + 1; setRegPage(p); fetchRegSource(p); }}><ChevronRight className="w-3.5 h-3.5" /></Button>
               </div>
             </div>
           )}
@@ -601,61 +612,78 @@ export default function WorkInstructionPage() {
 
       {/* ── 2단계: 확인 모달 ── */}
       <Dialog open={isConfirmModalOpen} onOpenChange={setIsConfirmModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[1000px] max-h-[90vh] flex flex-col p-0 gap-0">
-          <DialogHeader className="px-6 py-4 border-b shrink-0">
-            <DialogTitle className="text-base flex items-center gap-2"><CheckCircle2 className="w-4 h-4" /> 작업지시 적용 확인</DialogTitle>
-            <DialogDescription className="text-xs">기본 정보를 입력하고 "최종 적용" 버튼을 눌러주세요.</DialogDescription>
+        <DialogContent className="max-w-[1100px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>작업지시 적용 확인</DialogTitle>
+            <DialogDescription>기본 정보를 입력하고 '최종 적용' 버튼을 눌러주세요.</DialogDescription>
           </DialogHeader>
-          <div className="flex-1 overflow-auto p-6 space-y-5">
+          <div className="flex-1 overflow-y-auto">
+          <div className="space-y-5">
             <div className="bg-muted/30 border rounded-lg p-5">
-              <h4 className="text-sm font-semibold mb-4">작업지시 기본 정보</h4>
-              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-                <div className="space-y-1.5"><Label className="text-xs">작업지시번호</Label><Input value={confirmWiNo} readOnly className="h-9 bg-muted/50 text-muted-foreground" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">상태</Label>
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground">작업지시 기본 정보</h4>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-3">
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업지시번호</Label><Input value={confirmWiNo} readOnly className="h-9 bg-muted cursor-not-allowed font-mono" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
                   <Select value={confirmStatus} onValueChange={setConfirmStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select>
                 </div>
-                <div className="space-y-1.5"><Label className="text-xs">시작일</Label><FormDatePicker value={confirmStartDate} onChange={setConfirmStartDate} placeholder="시작일" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">완료예정일</Label><FormDatePicker value={confirmEndDate} onChange={setConfirmEndDate} placeholder="완료예정일" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">설비</Label>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">시작일</Label><Input type="date" value={confirmStartDate} onChange={(e) => setConfirmStartDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">완료예정일</Label><Input type="date" value={confirmEndDate} onChange={(e) => setConfirmEndDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">설비</Label>
                   <Select value={nv(confirmEquipmentId)} onValueChange={v => setConfirmEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비 선택" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select>
                 </div>
-                <div className="space-y-1.5"><Label className="text-xs">작업조</Label>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업조</Label>
                   <Select value={nv(confirmWorkTeam)} onValueChange={v => setConfirmWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select>
                 </div>
-                <div className="space-y-1.5"><Label className="text-xs">작업자</Label>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업자</Label>
                   <WorkerCombobox value={confirmWorker} onChange={setConfirmWorker} open={confirmWorkerOpen} onOpenChange={setConfirmWorkerOpen} />
                 </div>
-                <div className="space-y-1.5"><Label className="text-xs">라우팅</Label>
-                  <Select value={nv(confirmRouting)} onValueChange={v => setConfirmRouting(fromNv(v))}>
-                    <SelectTrigger className="h-9"><SelectValue placeholder="라우팅 선택" /></SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="none">선택 안 함</SelectItem>
-                      {confirmRoutingOptions.map(rv => (
-                        <SelectItem key={rv.id} value={rv.id}>
-                          {rv.version_name || "라우팅"} {rv.is_default ? "(기본)" : ""} - {rv.processes.length}공정
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">비고</Label><Input className="h-9" placeholder="비고를 입력해주세요" /></div>
               </div>
             </div>
             <div className="border rounded-lg p-5">
-              <h4 className="text-sm font-semibold mb-3">품목 목록</h4>
-              <div className="max-h-[300px] overflow-auto">
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground mb-3">품목 목록</h4>
+              <div className="overflow-auto">
                 <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10">
-                    <TableRow><TableHead className="w-[60px]">순번</TableHead><TableHead className="w-[120px]">품목코드</TableHead><TableHead>품목명</TableHead><TableHead className="w-[100px]">규격</TableHead><TableHead className="w-[100px]">수량</TableHead><TableHead>비고</TableHead><TableHead className="w-[60px]" /></TableRow>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">순번</TableHead>
+                      <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                      <TableHead className="w-[180px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">라우팅</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                      <TableHead className="w-[40px]" />
+                    </TableRow>
                   </TableHeader>
                   <TableBody>
                     {confirmItems.map((item, idx) => (
                       <TableRow key={idx}>
-                        <TableCell className="text-xs text-center">{idx + 1}</TableCell>
-                        <TableCell className="text-xs font-medium">{item.itemCode}</TableCell>
+                        <TableCell className="text-[13px] text-center">{idx + 1}</TableCell>
+                        <TableCell className="text-[13px] font-medium">{item.itemCode}</TableCell>
                         <TableCell className="text-sm">{item.itemName || item.itemCode}</TableCell>
-                        <TableCell className="text-xs">{item.spec || "-"}</TableCell>
-                        <TableCell><Input type="number" className="h-7 text-xs w-20" value={item.qty} onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
-                        <TableCell><Input className="h-7 text-xs" value={item.remark} placeholder="비고" onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
+                        <TableCell className="text-[13px]">{item.spec || "-"}</TableCell>
+                        <TableCell><Input type="number" className="h-7 text-[13px] w-20" value={item.qty} onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
+                        <TableCell>
+                          <Select
+                            value={nv(item.routing || "")}
+                            onValueChange={v => {
+                              const val = fromNv(v);
+                              setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, routing: val } : it));
+                            }}
+                          >
+                            <SelectTrigger className="h-7 text-xs"><SelectValue placeholder="라우팅" /></SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="none">선택 안 함</SelectItem>
+                              {(item.routingOptions || []).map((rv: RoutingVersionData) => (
+                                <SelectItem key={rv.id} value={rv.id}>
+                                  {rv.version_name || "라우팅"} {rv.is_default ? "(기본)" : ""} - {rv.processes.length}공정
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </TableCell>
+                        <TableCell><Input className="h-7 text-[13px]" value={item.remark} placeholder="비고" onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
                         <TableCell><Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setConfirmItems(prev => prev.filter((_, i) => i !== idx))}><X className="w-3 h-3 text-destructive" /></Button></TableCell>
                       </TableRow>
                     ))}
@@ -664,7 +692,8 @@ export default function WorkInstructionPage() {
               </div>
             </div>
           </div>
-          <DialogFooter className="px-6 py-3 border-t shrink-0">
+          </div>
+          <DialogFooter>
             <Button variant="outline" onClick={() => { setIsConfirmModalOpen(false); setIsRegModalOpen(true); }}><ChevronLeft className="w-4 h-4 mr-1" /> 이전</Button>
             <Button variant="outline" onClick={() => setIsConfirmModalOpen(false)}>취소</Button>
             <Button onClick={finalizeRegistration} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <CheckCircle2 className="w-4 h-4 mr-1.5" />} 최종 적용</Button>
@@ -673,83 +702,101 @@ export default function WorkInstructionPage() {
       </Dialog>
 
       {/* ── 수정 모달 ── */}
-      <Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[1100px] max-h-[90vh] flex flex-col p-0 gap-0">
-          <DialogHeader className="px-6 py-4 border-b shrink-0">
-            <DialogTitle className="text-base flex items-center gap-2"><Wrench className="w-4 h-4" /> 작업지시 관리 - {editOrder?.work_instruction_no}</DialogTitle>
-            <DialogDescription className="text-xs">품목을 추가/삭제하고 정보를 수정하세요.</DialogDescription>
+      <Dialog open={isEditModalOpen} onOpenChange={(v) => { if (!v && wsModalOpen) return; setIsEditModalOpen(v); }}>
+        <DialogContent className="max-w-[1100px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{`작업지시 관리 - ${editOrder?.work_instruction_no || ""}`}</DialogTitle>
+            <DialogDescription>품목을 추가/삭제하고 정보를 수정해주세요.</DialogDescription>
           </DialogHeader>
-          <div className="flex-1 overflow-auto p-6 space-y-5">
+          <div className="flex-1 overflow-y-auto">
+          <div className="space-y-5">
             <div className="bg-muted/30 border rounded-lg p-5">
-              <h4 className="text-sm font-semibold mb-4">기본 정보</h4>
-              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-                <div className="space-y-1.5"><Label className="text-xs">상태</Label><Select value={editStatus} onValueChange={setEditStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select></div>
-                <div className="space-y-1.5"><Label className="text-xs">시작일</Label><FormDatePicker value={editStartDate} onChange={setEditStartDate} placeholder="시작일" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">완료예정일</Label><FormDatePicker value={editEndDate} onChange={setEditEndDate} placeholder="완료예정일" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">설비</Label><Select value={nv(editEquipmentId)} onValueChange={v => setEditEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select></div>
-                <div className="space-y-1.5"><Label className="text-xs">작업조</Label><Select value={nv(editWorkTeam)} onValueChange={v => setEditWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select></div>
-                <div className="space-y-1.5"><Label className="text-xs">작업자</Label>
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground">기본 정보</h4>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-3">
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">상태</Label><Select value={editStatus} onValueChange={setEditStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">시작일</Label><Input type="date" value={editStartDate} onChange={(e) => setEditStartDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">완료예정일</Label><Input type="date" value={editEndDate} onChange={(e) => setEditEndDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">설비</Label><Select value={nv(editEquipmentId)} onValueChange={v => setEditEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비 선택" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업조</Label><Select value={nv(editWorkTeam)} onValueChange={v => setEditWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업자</Label>
                   <WorkerCombobox value={editWorker} onChange={setEditWorker} open={editWorkerOpen} onOpenChange={setEditWorkerOpen} />
                 </div>
-                <div className="space-y-1.5"><Label className="text-xs">라우팅</Label>
-                  <Select value={nv(editRouting)} onValueChange={v => setEditRouting(fromNv(v))}>
-                    <SelectTrigger className="h-9"><SelectValue placeholder="라우팅 선택" /></SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="none">선택 안 함</SelectItem>
-                      {editRoutingOptions.map(rv => (
-                        <SelectItem key={rv.id} value={rv.id}>
-                          {rv.version_name || "라우팅"} {rv.is_default ? "(기본)" : ""} - {rv.processes.length}공정
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-1.5"><Label className="text-xs">공정작업기준</Label>
-                  <Button
-                    variant="outline"
-                    className="h-9 w-full text-xs"
-                    disabled={!editRouting}
-                    onClick={() => {
-                      if (!editOrder || !editRouting) return;
-                      const rv = editRoutingOptions.find(r => r.id === editRouting);
-                      openWorkStandardModal(
-                        editOrder.work_instruction_no,
-                        editRouting,
-                        rv?.version_name || "",
-                        editOrder.item_name || editOrder.item_number || "",
-                        editOrder.item_number || ""
-                      );
-                    }}
-                  >
-                    <ClipboardCheck className="w-3.5 h-3.5 mr-1.5" /> 작업기준 수정
-                  </Button>
-                </div>
-                <div className="space-y-1.5 col-span-2"><Label className="text-xs">비고</Label><Input value={editRemark} onChange={e => setEditRemark(e.target.value)} className="h-9" placeholder="비고" /></div>
+                <div className="space-y-1 col-span-2"><Label className="text-[11px] font-semibold text-muted-foreground">비고</Label><Input value={editRemark} onChange={e => setEditRemark(e.target.value)} className="h-9" placeholder="비고를 입력해주세요" /></div>
               </div>
             </div>
 
-            {/* 품목 테이블 */}
+            {/* 품목 테이블 — 라우팅/공정작업기준을 품목별로 표시 */}
             <div className="border rounded-lg overflow-hidden">
-              <div className="flex items-center justify-between p-3 bg-muted/20 border-b">
-                <span className="text-sm font-semibold">작업지시 항목</span>
-                <span className="text-xs text-muted-foreground">{editItems.length}건</span>
+              <div className="flex items-center justify-between px-4 py-2.5 bg-muted/30 border-b">
+                <span className="text-[13px] font-bold text-foreground">작업지시 항목</span>
+                <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{editItems.length}건</span>
               </div>
-              <div className="max-h-[280px] overflow-auto">
+              <div className="overflow-auto">
                 <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10">
-                    <TableRow><TableHead className="w-[60px]">순번</TableHead><TableHead className="w-[120px]">품목코드</TableHead><TableHead>품목명</TableHead><TableHead className="w-[100px]">규격</TableHead><TableHead className="w-[100px] text-right">수량</TableHead><TableHead>비고</TableHead><TableHead className="w-[60px]" /></TableRow>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">순번</TableHead>
+                      <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                      <TableHead className="w-[180px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">라우팅</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공정작업기준</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                      <TableHead className="w-[40px]" />
+                    </TableRow>
                   </TableHeader>
                   <TableBody>
                     {editItems.length === 0 ? (
-                      <TableRow><TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">품목이 없습니다</TableCell></TableRow>
+                      <TableRow><TableCell colSpan={9} className="text-center py-8 text-sm text-muted-foreground">등록된 품목이 없어요</TableCell></TableRow>
                     ) : editItems.map((item, idx) => (
                       <TableRow key={idx}>
-                        <TableCell className="text-xs text-center">{idx + 1}</TableCell>
-                        <TableCell className="text-xs font-medium">{item.itemCode}</TableCell>
-                        <TableCell className="text-xs max-w-[180px] truncate" title={item.itemName}>{item.itemName || "-"}</TableCell>
-                        <TableCell className="text-xs max-w-[100px] truncate" title={item.spec}>{item.spec || "-"}</TableCell>
-                        <TableCell className="text-right"><Input type="number" className="h-7 text-xs w-20 ml-auto" value={item.qty} onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
-                        <TableCell><Input className="h-7 text-xs" value={item.remark} placeholder="비고" onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
+                        <TableCell className="text-[13px] text-center">{idx + 1}</TableCell>
+                        <TableCell className="text-[13px] font-medium">{item.itemCode}</TableCell>
+                        <TableCell className="text-[13px] max-w-[150px] truncate" title={item.itemName}>{item.itemName || "-"}</TableCell>
+                        <TableCell className="text-[13px] truncate" title={item.spec}>{item.spec || "-"}</TableCell>
+                        <TableCell className="text-right"><Input type="number" className="h-7 text-[13px] w-20 ml-auto" value={item.qty} onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
+                        <TableCell>
+                          <Select
+                            value={nv(item.routing || "")}
+                            onValueChange={v => {
+                              const val = fromNv(v);
+                              setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, routing: val } : it));
+                            }}
+                          >
+                            <SelectTrigger className="h-7 text-xs"><SelectValue placeholder="라우팅" /></SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="none">선택 안 함</SelectItem>
+                              {(item.routingOptions || []).map((rv: RoutingVersionData) => (
+                                <SelectItem key={rv.id} value={rv.id}>
+                                  {rv.version_name || "라우팅"} {rv.is_default ? "(기본)" : ""} - {rv.processes.length}공정
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 text-xs"
+                            disabled={!item.routing}
+                            onClick={() => {
+                              if (!editOrder || !item.routing) return;
+                              const rv = (item.routingOptions || []).find((r: RoutingVersionData) => r.id === item.routing);
+                              openWorkStandardModal(
+                                editOrder.work_instruction_no,
+                                item.routing,
+                                rv?.version_name || "",
+                                item.itemName || item.itemCode || "",
+                                item.itemCode || ""
+                              );
+                            }}
+                          >
+                            <ClipboardCheck className="w-3 h-3 mr-1" /> 수정
+                          </Button>
+                        </TableCell>
+                        <TableCell><Input className="h-7 text-[13px]" value={item.remark} placeholder="비고" onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
                         <TableCell><Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setEditItems(prev => prev.filter((_, i) => i !== idx))}><X className="w-3 h-3 text-destructive" /></Button></TableCell>
                       </TableRow>
                     ))}
@@ -757,14 +804,15 @@ export default function WorkInstructionPage() {
                 </Table>
               </div>
               {editItems.length > 0 && (
-                <div className="p-3 border-t bg-muted/20 flex items-center justify-between">
-                  <span className="text-sm font-semibold">총 수량</span>
-                  <span className="text-lg font-bold text-primary">{editItems.reduce((s, i) => s + i.qty, 0).toLocaleString()} EA</span>
+                <div className="px-4 py-2.5 border-t bg-muted/30 flex items-center justify-between">
+                  <span className="text-[13px] font-bold text-foreground">총 수량</span>
+                  <span className="text-lg font-bold font-mono text-primary">{editItems.reduce((s, i) => s + i.qty, 0).toLocaleString()} EA</span>
                 </div>
               )}
             </div>
           </div>
-          <DialogFooter className="px-6 py-3 border-t shrink-0">
+          </div>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setIsEditModalOpen(false)}>취소</Button>
             <Button onClick={saveEdit} disabled={editSaving}>{editSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button>
           </DialogFooter>
@@ -781,6 +829,15 @@ export default function WorkInstructionPage() {
         itemName={wsModalItemName}
         itemCode={wsModalItemCode}
       />
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_29/purchase/order/page.tsx b/frontend/app/(main)/COMPANY_29/purchase/order/page.tsx
new file mode 100644
index 00000000..1bc3bc88
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/purchase/order/page.tsx
@@ -0,0 +1,1287 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  ClipboardList, Pencil, Search, X, Package, ChevronDown,
+  ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const MASTER_TABLE = "purchase_order_mng";
+const DETAIL_TABLE = "purchase_detail";
+
+const formatNumber = (val: string) => {
+  const num = val.replace(/[^\d.-]/g, "");
+  if (!num) return "";
+  const parts = num.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+const parseNumber = (val: string) => val.replace(/,/g, "");
+
+const STATUS_OPTIONS = [
+  { code: "작성중", label: "작성중" },
+  { code: "발주확정", label: "발주확정" },
+  { code: "입고완료", label: "입고완료" },
+  { code: "취소", label: "취소" },
+];
+
+const STATUS_BADGE_CLASS: Record<string, string> = {
+  "작성중": "bg-warning/10 text-warning border-warning/20",
+  "발주확정": "bg-primary/10 text-primary border-primary/20",
+  "입고완료": "bg-success/10 text-success border-success/20",
+  "취소": "bg-destructive/10 text-destructive border-destructive/20",
+};
+
+const EXCEL_COLUMNS = [
+  { key: "purchase_no", label: "발주번호" },
+  { key: "order_date", label: "발주일" },
+  { key: "supplier_name", label: "공급업체명" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "order_qty", label: "발주수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "amount", label: "금액" },
+  { key: "due_date", label: "납기일" },
+];
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "purchase_no", label: "발주번호" },
+  { key: "order_date", label: "발주일" },
+  { key: "supplier_name", label: "공급업체" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "spec", label: "규격" },
+  { key: "order_qty", label: "발주수량" },
+  { key: "received_qty", label: "입고수량" },
+  { key: "remain_qty", label: "잔량" },
+  { key: "unit_price", label: "단가" },
+  { key: "amount", label: "금액" },
+  { key: "due_date", label: "납기일" },
+  { key: "status", label: "상태" },
+  { key: "memo", label: "메모" },
+];
+
+export default function PurchaseOrderPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const [orders, setOrders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [masterForm, setMasterForm] = useState<Record<string, any>>({});
+  const [detailRows, setDetailRows] = useState<any[]>([]);
+
+  // 품목 선택 모달
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSelectedMap, setItemSelectedMap] = useState<Map<string, any>>(new Map());
+  const [itemSearchDivision, setItemSearchDivision] = useState("all");
+  const [itemPage, setItemPage] = useState(1);
+  const [itemPageSize, setItemPageSize] = useState(20);
+  const [itemTotalPages, setItemTotalPages] = useState(0);
+  const [itemTotal, setItemTotal] = useState(0);
+  const [itemPageInput, setItemPageInput] = useState("1");
+
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-purchase-order", DETAIL_TABLE, GRID_COLUMNS_CONFIG);
+
+  const isReadOnly = masterForm.status === "입고완료" || masterForm.status === "취소";
+
+  // 카테고리 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      const catColumns = ["input_mode", "price_mode"];
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      const dedup = (items: { code: string; label: string }[]) => {
+        const seen = new Set<string>();
+        return items.filter((item) => {
+          const key = item.label.replace(/\s/g, "");
+          if (seen.has(key)) return false;
+          seen.add(key);
+          return true;
+        });
+      };
+      await Promise.all(
+        catColumns.map(async (col) => {
+          try {
+            const res = await apiClient.get(`/table-categories/${MASTER_TABLE}/${col}/values`);
+            if (res.data?.success && res.data.data?.length > 0) {
+              optMap[col] = dedup(flatten(res.data.data));
+            }
+          } catch { /* skip */ }
+        })
+      );
+      try {
+        const suppRes = await apiClient.post(`/table-management/tables/supplier_mng/data`, {
+          page: 1, size: 500, autoFilter: true,
+        });
+        const supps = suppRes.data?.data?.data || suppRes.data?.data?.rows || [];
+        optMap["supplier_code"] = supps.map((s: any) => ({
+          code: s.supplier_code,
+          label: `${s.supplier_name} (${s.supplier_code})`,
+        }));
+      } catch { /* skip */ }
+      try {
+        const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
+          page: 1, size: 500, autoFilter: true,
+        });
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        optMap["manager"] = users.map((u: any) => ({
+          code: u.user_id || u.id,
+          label: `${u.user_name || u.name || u.user_id}${u.position_name ? ` (${u.position_name})` : ""}`,
+        }));
+      } catch { /* skip */ }
+      for (const col of ["unit", "material", "division"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/item_info/${col}/values`);
+          if (res.data?.success && res.data.data?.length > 0) {
+            optMap[`item_${col}`] = flatten(res.data.data);
+          }
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+      const divs = optMap["item_division"] || [];
+      const purchaseDiv = divs.find((o) => o.label === "구매관리")
+        || divs.find((o) => o.label === "원자재")
+        || divs.find((o) => o.label === "부자재");
+      if (purchaseDiv) setItemSearchDivision(purchaseDiv.code);
+    };
+    loadCategories();
+  }, []);
+
+  // 마스터 테이블 컬럼 (supplier_name, order_date 등)
+  const MASTER_COLUMNS = new Set(["supplier_name", "supplier_code", "order_date", "status"]);
+
+  // 데이터 조회
+  const fetchOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      // searchFilters를 detail / master로 분리
+      const detailFilters: any[] = [];
+      const masterExtraFilters: any[] = [];
+      for (const f of searchFilters) {
+        const filter = { columnName: f.columnName, operator: f.operator, value: f.value };
+        if (MASTER_COLUMNS.has(f.columnName)) {
+          masterExtraFilters.push(filter);
+        } else {
+          detailFilters.push(filter);
+        }
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: detailFilters.length > 0 ? { enabled: true, filters: detailFilters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "purchase_no", order: "desc" },
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+
+      const purchaseNos = [...new Set(rows.map((r: any) => r.purchase_no).filter(Boolean))];
+      let masterMap: Record<string, any> = {};
+      if (purchaseNos.length > 0) {
+        try {
+          const masterFilters: any[] = [{ columnName: "purchase_no", operator: "in", value: purchaseNos }, ...masterExtraFilters];
+          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: purchaseNos.length + 10,
+            dataFilter: { enabled: true, filters: masterFilters },
+            autoFilter: true,
+          });
+          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+          for (const m of masters) masterMap[m.purchase_no] = m;
+        } catch { /* skip */ }
+      }
+
+      const itemCodes = [...new Set(rows.map((r: any) => r.item_code).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemCodes.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemCodes.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+            autoFilter: true,
+          });
+          const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+          for (const item of items) itemMap[item.item_number] = item;
+        } catch { /* skip */ }
+      }
+
+      const resolveLabel = (key: string, code: string) => {
+        if (!code) return "";
+        const opts = categoryOptions[key];
+        if (!opts) return code;
+        return opts.find((o) => o.code === code)?.label || code;
+      };
+
+      const hasMasterFilters = masterExtraFilters.length > 0;
+      const data = rows
+        .filter((row: any) => {
+          const master = masterMap[row.purchase_no];
+          if (hasMasterFilters && !master) return false;
+          return true;
+        })
+        .map((row: any) => {
+          const item = itemMap[row.item_code];
+          const master = masterMap[row.purchase_no];
+          const rawUnit = row.unit || item?.unit || "";
+          return {
+            ...row,
+            item_name: row.item_name || item?.item_name || "",
+            spec: row.spec || item?.size || "",
+            unit: resolveLabel("item_unit", rawUnit) || rawUnit,
+            status: master?.status || "",
+            supplier_name: master?.supplier_name || "",
+            order_date: master?.order_date || "",
+            memo: row.memo || master?.memo || "",
+          };
+        });
+
+      setOrders(data);
+      setTotalCount(data.length);
+    } catch {
+      toast.error("발주 목록을 불러오는데 실패했어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters, categoryOptions]);
+
+  useEffect(() => { fetchOrders(); }, [fetchOrders]);
+
+  // purchase_no 기준 그룹핑
+  const orderGroups = useMemo(() => {
+    const map: Record<string, { master: any; details: any[] }> = {};
+    for (const row of orders) {
+      const key = row.purchase_no || row.id;
+      if (!map[key]) {
+        map[key] = {
+          master: { purchase_no: row.purchase_no, order_date: row.order_date, supplier_name: row.supplier_name, status: row.status, memo: row.memo },
+          details: [],
+        };
+      }
+      map[key].details.push(row);
+    }
+    return map;
+  }, [orders]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    const found = categoryOptions[col]?.find((o) => o.code === code);
+    return found?.label || code;
+  };
+
+  // 등록 모달 열기
+  const openRegisterModal = () => {
+    const defaultInputMode = categoryOptions["input_mode"]?.[0]?.code || "";
+    const defaultPriceMode = categoryOptions["price_mode"]?.[0]?.code || "";
+    setMasterForm({
+      input_mode: defaultInputMode,
+      price_mode: defaultPriceMode,
+      manager: user?.userId || "",
+      order_date: new Date().toISOString().split("T")[0],
+      status: "작성중",
+    });
+    setDetailRows([]);
+    setIsEditMode(false);
+    setIsModalOpen(true);
+  };
+
+  // 수정 모달 열기
+  const openEditModal = async (purchaseNo: string) => {
+    try {
+      const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+        autoFilter: true,
+      });
+      const masterData = (masterRes.data?.data?.data || masterRes.data?.data?.rows || [])[0];
+
+      const detailRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+        autoFilter: true,
+      });
+      const detailData = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+
+      setMasterForm(masterData || {});
+      setDetailRows(detailData.map((d: any, i: number) => ({ ...d, _id: d.id || `row_${i}` })));
+      setIsEditMode(true);
+      setIsModalOpen(true);
+    } catch {
+      toast.error("발주 정보를 불러오는데 실패했어요.");
+    }
+  };
+
+  // 삭제 (다중 선택)
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.error("삭제할 발주를 선택해주세요."); return; }
+    const selectedItems = orders.filter((o) => checkedIds.includes(o.id));
+    const purchaseNos = [...new Set(selectedItems.map((o) => o.purchase_no))];
+    const ok = await confirm(`${checkedIds.length}건의 발주 데이터를 삭제하시겠어요?`, {
+      description: "삭제된 데이터는 복구할 수 없어요.",
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+        data: checkedIds.map((id) => ({ id })),
+      });
+      for (const purchaseNo of purchaseNos) {
+        const remaining = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+          autoFilter: true,
+        });
+        const remainRows = remaining.data?.data?.data || remaining.data?.data?.rows || [];
+        if (remainRows.length === 0) {
+          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: 1,
+            dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+            autoFilter: true,
+          });
+          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+          if (masters.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
+              data: masters.map((m: any) => ({ id: m.id })),
+            });
+          }
+        }
+      }
+      toast.success("삭제되었어요.");
+      setCheckedIds([]);
+      fetchOrders();
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // 저장 (마스터 + 디테일)
+  const handleSave = async () => {
+    if (detailRows.length === 0) {
+      toast.error("품목을 1개 이상 추가해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, created_by, updated_by, ...masterFields } = masterForm;
+
+      if (isEditMode && id) {
+        await apiClient.put(`/table-management/tables/${MASTER_TABLE}/edit`, {
+          originalData: { id },
+          updatedData: masterFields,
+        });
+        const existingDetails = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 100,
+          dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: masterForm.purchase_no }] },
+          autoFilter: true,
+        });
+        const existings = existingDetails.data?.data?.data || existingDetails.data?.data?.rows || [];
+        if (existings.length > 0) {
+          await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+            data: existings.map((d: any) => ({ id: d.id })),
+          });
+        }
+        for (const [idx, row] of detailRows.entries()) {
+          const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
+          await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            ...detailFields,
+            purchase_no: masterForm.purchase_no,
+            seq_no: idx + 1,
+          });
+        }
+      } else {
+        const { purchase_no: _pn, ...fieldsWithoutPurchaseNo } = masterFields;
+        const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/add`, { id: crypto.randomUUID(), ...fieldsWithoutPurchaseNo });
+        const createdData = masterRes.data?.data;
+        let purchaseNo = createdData?.purchase_no;
+        if (!purchaseNo) {
+          const queryRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: 1,
+            sort: { columnName: "created_date", order: "desc" },
+            autoFilter: true,
+          });
+          const records = queryRes.data?.data?.data || queryRes.data?.data?.rows || [];
+          purchaseNo = records[0]?.purchase_no;
+        }
+        if (!purchaseNo) {
+          toast.error("발주번호를 가져올 수 없어요. 다시 시도해주세요.");
+          return;
+        }
+        for (const [idx, row] of detailRows.entries()) {
+          const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
+          await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            ...detailFields,
+            purchase_no: purchaseNo,
+            seq_no: idx + 1,
+          });
+        }
+      }
+
+      toast.success(isEditMode ? "수정되었어요." : "등록되었어요.");
+      setIsModalOpen(false);
+      fetchOrders();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 검색
+  const searchItems = async (page?: number, size?: number) => {
+    const p = page ?? itemPage;
+    const s = size ?? itemPageSize;
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      }
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      let allRows = resData?.data || resData?.rows || [];
+      if (itemSearchDivision !== "all") {
+        const divLabel = categoryOptions["item_division"]?.find((o) => o.code === itemSearchDivision)?.label || "";
+        allRows = allRows.filter((item: any) => {
+          const div = item.division || "";
+          return div.includes(itemSearchDivision) || (divLabel && div.includes(divLabel));
+        });
+      }
+      const total = allRows.length;
+      const start = (p - 1) * s;
+      setItemSearchResults(allRows.slice(start, start + s));
+      setItemTotal(total);
+      setItemTotalPages(Math.max(1, Math.ceil(total / s)));
+    } catch { /* skip */ } finally {
+      setItemSearchLoading(false);
+    }
+  };
+
+  const handleItemPageChange = (newPage: number) => {
+    if (newPage < 1 || newPage > itemTotalPages) return;
+    setItemPage(newPage);
+    setItemPageInput(String(newPage));
+    searchItems(newPage);
+  };
+
+  const commitItemPageInput = () => {
+    const parsed = parseInt(itemPageInput, 10);
+    if (isNaN(parsed) || itemPageInput.trim() === "") {
+      setItemPageInput(String(itemPage));
+      return;
+    }
+    const clamped = Math.max(1, Math.min(parsed, itemTotalPages || 1));
+    if (clamped !== itemPage) handleItemPageChange(clamped);
+    setItemPageInput(String(clamped));
+  };
+
+  const triggerNewSearch = () => {
+    setItemPage(1);
+    setItemPageInput("1");
+    searchItems(1);
+  };
+
+  const addSelectedItemsToDetail = async () => {
+    const selected = Array.from(itemSelectedMap.values());
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+
+    const supplierCode = masterForm.supplier_code;
+    const isStandard = masterForm.price_mode === "standard";
+    const isSupplier = masterForm.price_mode === "supplier";
+    let supplierPriceMap: Record<string, string> = {};
+    if (isSupplier && supplierCode) {
+      try {
+        const itemIds = selected.map((item) => item.item_number || item.id);
+        const res = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: {
+            enabled: true,
+            filters: [
+              { columnName: "supplier_id", operator: "equals", value: supplierCode },
+              { columnName: "item_id", operator: "in", value: itemIds },
+            ],
+          },
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) supplierPriceMap[p.item_id] = String(price);
+        }
+      } catch { /* skip */ }
+    }
+
+    const newRows = selected.map((item) => {
+      const itemCode = item.item_number || item.id;
+      let unitPrice = "";
+      if (isStandard) {
+        unitPrice = item.purchase_price || item.standard_price || "";
+      } else if (isSupplier && supplierCode) {
+        unitPrice = supplierPriceMap[itemCode] || "";
+      }
+      return {
+        _id: `new_${Date.now()}_${Math.random()}`,
+        item_code: itemCode,
+        item_name: item.item_name,
+        spec: item.size || "",
+        material: getCategoryLabel("item_material", item.material) || item.material || "",
+        unit: getCategoryLabel("item_unit", item.unit) || item.unit || "",
+        order_qty: "",
+        received_qty: "0",
+        remain_qty: "0",
+        unit_price: unitPrice,
+        amount: "",
+        due_date: "",
+        memo: "",
+      };
+    });
+
+    setDetailRows((prev) => [...prev, ...newRows]);
+    toast.success(`${selected.length}개 품목이 추가되었어요.`);
+    setItemSelectedMap(new Map());
+    setItemSelectOpen(false);
+  };
+
+  // 단가 재계산: 단가방식/공급업체 변경 시 기존 품목 단가 갱신
+  const recalcPrices = useCallback(async (priceMode: string, supplierCode: string) => {
+    if (detailRows.length === 0) return;
+    const isStandard = priceMode === "standard";
+    const isSupplier = priceMode === "supplier";
+
+    if (isStandard) {
+      const itemCodes = detailRows.map((r) => r.item_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+          autoFilter: true,
+        });
+        const items = res.data?.data?.data || res.data?.data?.rows || [];
+        const priceMap: Record<string, string> = {};
+        for (const item of items) {
+          const price = item.purchase_price || item.standard_price || "";
+          if (price) priceMap[item.item_number] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.item_code] || "";
+          const qty = parseFloat(row.order_qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    } else if (isSupplier && supplierCode) {
+      const itemCodes = detailRows.map((r) => r.item_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_id", operator: "equals", value: supplierCode },
+            { columnName: "item_id", operator: "in", value: itemCodes },
+          ]},
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        const priceMap: Record<string, string> = {};
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) priceMap[p.item_id] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.item_code] || "";
+          const qty = parseFloat(row.order_qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    }
+  }, [detailRows]);
+
+  const updateDetailRow = (idx: number, field: string, value: string) => {
+    setDetailRows((prev) => {
+      const next = [...prev];
+      next[idx] = { ...next[idx], [field]: value };
+      if (field === "order_qty" || field === "unit_price") {
+        const qty = parseFloat(field === "order_qty" ? value : next[idx].order_qty) || 0;
+        const price = parseFloat(field === "unit_price" ? value : next[idx].unit_price) || 0;
+        next[idx].amount = (qty * price).toString();
+        const received = parseFloat(next[idx].received_qty) || 0;
+        next[idx].remain_qty = (qty - received).toString();
+      }
+      return next;
+    });
+  };
+
+  const removeDetailRow = (idx: number) => {
+    setDetailRows((prev) => prev.filter((_, i) => i !== idx));
+  };
+
+  const handleExcelDownload = async () => {
+    if (orders.length === 0) { toast.error("다운로드할 데이터가 없어요."); return; }
+    const data = orders.map((o) => {
+      const row: Record<string, any> = {};
+      for (const col of EXCEL_COLUMNS) row[col.label] = o[col.key] || "";
+      return row;
+    });
+    await exportToExcel(data, "발주관리.xlsx", "발주목록");
+    toast.success("다운로드 완료");
+  };
+
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={DETAIL_TABLE}
+        filterId="c16-purchase-order"
+        onFilterChange={setSearchFilters}
+        dataCount={totalCount}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between flex-wrap gap-3">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-bold">발주 목록</h2>
+          <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+            {totalCount}건
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4 mr-1" /> 발주 등록
+          </Button>
+          <Button variant="outline" size="sm" disabled={checkedIds.length !== 1} onClick={() => {
+            const item = orders.find((o) => o.id === checkedIds[0]);
+            if (item) openEditModal(item.purchase_no);
+          }}>
+            <Pencil className="w-4 h-4 mr-1" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1" /> 삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4 mr-1" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4 mr-1" /> 엑셀
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+            <Settings2 className="w-4 h-4 mr-1" /> 설정
+          </Button>
+        </div>
+      </div>
+
+      {/* 데이터 테이블 — 아코디언 그룹핑 */}
+      <div className="flex-1 overflow-auto border rounded-lg bg-card">
+        {loading ? (
+          <div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
+        ) : Object.keys(orderGroups).length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+            <Package className="h-10 w-10 mb-2 opacity-30" />
+            <p className="text-sm">등록된 발주가 없어요</p>
+          </div>
+        ) : (
+          (() => {
+            const MASTER_KEYS = new Set(["purchase_no", "order_date", "supplier_name", "status", "memo"]);
+            const numCols = new Set(["order_qty", "received_qty", "remain_qty", "unit_price", "amount"]);
+
+            // ts.visibleColumns 순서를 따르되, 마스터/디테일 컬럼을 분리
+            // 고정 컬럼(품목수)은 마스터 선행 컬럼 뒤에 배치
+            const leadingMaster: typeof ts.visibleColumns = [];
+            const detailCols: typeof ts.visibleColumns = [];
+            const trailingMaster: typeof ts.visibleColumns = [];
+            let passedFirstDetail = false;
+            for (const col of ts.visibleColumns) {
+              if (MASTER_KEYS.has(col.key)) {
+                if (passedFirstDetail) trailingMaster.push(col);
+                else leadingMaster.push(col);
+              } else {
+                passedFirstDetail = true;
+                detailCols.push(col);
+              }
+            }
+
+            const renderDetailCell = (row: any, key: string) => {
+              const val = row[key];
+              if (key === "status") return val ? <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[val] || "")}>{val}</span> : "-";
+              if (numCols.has(key)) return <span className="font-mono">{val ? Number(val).toLocaleString() : "0"}</span>;
+              return val || "-";
+            };
+
+            const renderMasterHead = (col: { key: string; label: string }) => (
+              <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground", col.key === "status" && "text-center")}>
+                {col.label}
+              </TableHead>
+            );
+
+            const renderMasterCell = (col: { key: string }, m: any, purchaseNo: string) => {
+              if (col.key === "purchase_no") return <TableCell key={col.key} className="text-sm font-semibold text-primary">{purchaseNo}</TableCell>;
+              if (col.key === "order_date") return <TableCell key={col.key} className="text-sm">{m.order_date ? new Date(m.order_date).toLocaleDateString("ko-KR") : "-"}</TableCell>;
+              if (col.key === "supplier_name") return <TableCell key={col.key} className="text-sm">{m.supplier_name || "-"}</TableCell>;
+              if (col.key === "status") return <TableCell key={col.key} className="text-center">{m.status && <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[m.status] || "")}>{m.status}</span>}</TableCell>;
+              if (col.key === "memo") return <TableCell key={col.key} className="text-sm text-muted-foreground max-w-[120px] truncate">{m.memo || ""}</TableCell>;
+              return <TableCell key={col.key} />;
+            };
+
+            return (
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-8" />
+                    <TableHead className="w-10" />
+                    {leadingMaster.map(renderMasterHead)}
+                    <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground text-center">품목수</TableHead>
+                    {detailCols.map(col => (
+                      <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground", numCols.has(col.key) && "text-right")}>
+                        {col.label}{col.key === "order_qty" || col.key === "amount" ? " 합계" : ""}
+                      </TableHead>
+                    ))}
+                    {trailingMaster.map(renderMasterHead)}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {Object.entries(orderGroups).map(([purchaseNo, group]) => {
+                    const isExpanded = expandedOrders.has(purchaseNo);
+                    const detailIds = group.details.map(d => d.id);
+                    const allChecked = detailIds.length > 0 && detailIds.every(id => checkedIds.includes(id));
+                    const someChecked = detailIds.some(id => checkedIds.includes(id));
+                    const m = group.master;
+                    const totalQty = group.details.reduce((s, d) => s + (Number(d.order_qty) || 0), 0);
+                    const totalAmt = group.details.reduce((s, d) => s + (Number(d.amount) || 0), 0);
+                    return (
+                      <React.Fragment key={purchaseNo}>
+                        <TableRow
+                          style={{ borderTop: "2px solid hsl(var(--border))" }}
+                          className={cn("cursor-pointer border-l-[3px] border-l-transparent font-semibold", allChecked && "border-l-primary bg-primary/5")}
+                          onClick={() => setExpandedOrders(prev => { const next = new Set(prev); if (next.has(purchaseNo)) next.delete(purchaseNo); else next.add(purchaseNo); return next; })}
+                          onDoubleClick={() => openEditModal(purchaseNo)}
+                        >
+                          <TableCell className="text-center p-2">
+                            <ChevronDown className={cn("w-4 h-4 transition-transform text-muted-foreground", !isExpanded && "-rotate-90")} />
+                          </TableCell>
+                          <TableCell className="text-center p-2" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => allChecked ? prev.filter(id => !detailIds.includes(id)) : [...new Set([...prev, ...detailIds])]); }}>
+                            <Checkbox checked={allChecked} data-state={someChecked && !allChecked ? "indeterminate" : undefined} onCheckedChange={() => {}} />
+                          </TableCell>
+                          {leadingMaster.map(col => renderMasterCell(col, m, purchaseNo))}
+                          <TableCell className="text-sm text-center"><Badge variant="secondary" className="text-[10px]">{group.details.length}건</Badge></TableCell>
+                          {detailCols.map(col => (
+                            <TableCell key={col.key} className={cn("text-sm", numCols.has(col.key) && "text-right font-mono")}>
+                              {col.key === "order_qty" ? totalQty.toLocaleString()
+                                : col.key === "amount" ? totalAmt.toLocaleString()
+                                : ""}
+                            </TableCell>
+                          ))}
+                          {trailingMaster.map(col => renderMasterCell(col, m, purchaseNo))}
+                        </TableRow>
+                        {isExpanded && group.details.map((row) => (
+                          <TableRow key={row.id} className="bg-muted/30 text-xs">
+                            <TableCell />
+                            <TableCell className="text-center" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => prev.includes(row.id) ? prev.filter(id => id !== row.id) : [...prev, row.id]); }}>
+                              <Checkbox checked={checkedIds.includes(row.id)} onCheckedChange={() => {}} />
+                            </TableCell>
+                            {leadingMaster.map(col => <TableCell key={col.key} />)}
+                            <TableCell />
+                            {detailCols.map(col => (
+                              <TableCell key={col.key} className={cn(numCols.has(col.key) && "text-right")}>
+                                {renderDetailCell(row, col.key)}
+                              </TableCell>
+                            ))}
+                            {trailingMaster.map(col => <TableCell key={col.key} />)}
+                          </TableRow>
+                        ))}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            );
+          })()
+        )}
+        <div className="px-4 py-2 border-t text-xs text-muted-foreground">
+          전체 {Object.keys(orderGroups).length}건 (발주 기준) / {orders.length}건 (품목 기준)
+        </div>
+      </div>
+
+      {/* 발주 등록/수정 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent
+          className="max-w-[95vw] w-[1200px]"
+          style={{ maxHeight: "90vh", display: "flex", flexDirection: "column" }}
+        >
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? (isReadOnly ? "발주 상세" : "발주 수정") : "발주 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? (isReadOnly ? "발주 상세 정보를 확인해요." : "발주 정보를 수정해요.") : "새로운 발주를 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-y-auto">
+            <div className="space-y-6 py-2 pr-1">
+              {/* 기본 정보 */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  기본 정보
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <div className="grid grid-cols-4 gap-3.5">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">발주번호</Label>
+                    <Input value={masterForm.purchase_no || ""} placeholder={isEditMode ? "" : "자동생성"} className="h-9" disabled />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">발주일 <span className="text-destructive">*</span></Label>
+                    <Input
+                      type="date"
+                      value={masterForm.order_date || ""}
+                      onChange={(e) => setMasterForm((p) => ({ ...p, order_date: e.target.value }))}
+                      className="h-9"
+                      disabled={isReadOnly}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">상태</Label>
+                    {isReadOnly ? (
+                      <div className="flex items-center h-9">
+                        <span className={cn("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold", STATUS_BADGE_CLASS[masterForm.status] || "")}>
+                          {masterForm.status}
+                        </span>
+                      </div>
+                    ) : (
+                      <Select value={masterForm.status || "작성중"} onValueChange={(v) => setMasterForm((p) => ({ ...p, status: v }))}>
+                        <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          {STATUS_OPTIONS.map((s) => (
+                            <SelectItem key={s.code} value={s.code}>{s.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">입력방식</Label>
+                    <Select value={masterForm.input_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, input_mode: v }))} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["input_mode"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">단가방식</Label>
+                    <Select value={masterForm.price_mode || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, price_mode: v })); recalcPrices(v, masterForm.supplier_code || ""); }} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["price_mode"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">담당자</Label>
+                    <Select value={masterForm.manager || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager: v }))} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="담당자 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["manager"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+
+              {/* 공급업체 / 담당자 — 입력방식이 '공급업체 우선'일 때만 표시 */}
+              {masterForm.input_mode === "supplierFirst" && (
+              <div className="p-4 bg-muted/50 border border-dashed border-border rounded-lg space-y-3">
+                <div className="text-xs font-semibold text-primary flex items-center gap-1.5">
+                  <ClipboardList className="w-3.5 h-3.5" /> 공급업체 정보
+                </div>
+                <div className="grid grid-cols-2 gap-3.5">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">공급업체</Label>
+                    <Select
+                      value={masterForm.supplier_code || ""}
+                      onValueChange={(v) => {
+                        const supp = categoryOptions["supplier_code"]?.find((o) => o.code === v);
+                        const name = supp?.label.replace(` (${v})`, "") || "";
+                        setMasterForm((p) => ({ ...p, supplier_code: v, supplier_name: name }));
+                        recalcPrices(masterForm.price_mode || "", v);
+                      }}
+                      disabled={isReadOnly}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="공급업체 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["supplier_code"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+              )}
+
+              {/* 품목 내역 */}
+              <div className="space-y-2.5">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                    <Package className="w-4 h-4" /> 품목 내역
+                    <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                      {detailRows.length}
+                    </span>
+                  </div>
+                  {!isReadOnly && (
+                    <Button size="sm" onClick={() => {
+                      setItemSelectedMap(new Map());
+                      setItemPage(1);
+                      setItemPageInput("1");
+                      setItemSearchKeyword("");
+                      setItemSelectOpen(true);
+                      searchItems(1);
+                    }}>
+                      <Plus className="w-4 h-4 mr-1" /> 품목 추가
+                    </Button>
+                  )}
+                </div>
+                {detailRows.length === 0 ? (
+                  <div className="flex flex-col items-center gap-2 py-8 border border-dashed border-border rounded-lg text-muted-foreground">
+                    <Package className="w-8 h-8 opacity-40" />
+                    <span className="text-sm">아직 추가된 품목이 없어요. 위 버튼으로 품목을 추가해주세요.</span>
+                  </div>
+                ) : (
+                  <div className="border rounded-lg overflow-x-auto">
+                    <Table className="table-fixed">
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          {!isReadOnly && <TableHead className="w-[40px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground"></TableHead>}
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                          {masterForm.input_mode === "itemFirst" && (
+                            <TableHead className="w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체</TableHead>
+                          )}
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">잔량</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
+                          <TableHead className="w-[160px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {detailRows.map((row, idx) => (
+                          <TableRow key={row._id || idx}>
+                            {!isReadOnly && (
+                              <TableCell>
+                                <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-muted-foreground/50 hover:text-destructive hover:bg-destructive/5" onClick={() => removeDetailRow(idx)}>
+                                  <X className="w-3.5 h-3.5" />
+                                </Button>
+                              </TableCell>
+                            )}
+                            <TableCell className="text-[13px] font-mono max-w-[120px]"><span className="block truncate" title={row.item_code}>{row.item_code}</span></TableCell>
+                            <TableCell className="text-[13px] max-w-[120px]"><span className="block truncate" title={row.item_name}>{row.item_name}</span></TableCell>
+                            {masterForm.input_mode === "itemFirst" && (
+                              <TableCell>
+                                {isReadOnly ? (
+                                  <span className="text-xs">{(categoryOptions["supplier_code"] || []).find(o => o.code === row.supplier_code)?.label || row.supplier_code || "-"}</span>
+                                ) : (
+                                  <Select value={row.supplier_code || ""} onValueChange={(v) => {
+                                    const supp = categoryOptions["supplier_code"]?.find(o => o.code === v);
+                                    const name = supp?.label.replace(` (${v})`, "") || "";
+                                    updateDetailRow(idx, "supplier_code", v);
+                                    updateDetailRow(idx, "supplier_name", name);
+                                  }}>
+                                    <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="공급업체" /></SelectTrigger>
+                                    <SelectContent>
+                                      {(categoryOptions["supplier_code"] || []).map(o => (
+                                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                )}
+                              </TableCell>
+                            )}
+                            <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                            <TableCell className="text-[13px]">{row.unit}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs text-right font-mono block">{row.order_qty ? Number(row.order_qty).toLocaleString() : ""}</span>
+                              ) : (
+                                <Input value={formatNumber(row.order_qty || "")} onChange={(e) => updateDetailRow(idx, "order_qty", parseNumber(e.target.value))} className="h-8 text-xs text-right font-mono" />
+                              )}
+                            </TableCell>
+                            <TableCell className="text-[13px] text-right font-mono text-muted-foreground">{row.received_qty ? Number(row.received_qty).toLocaleString() : "0"}</TableCell>
+                            <TableCell className="text-[13px] text-right font-mono">{row.remain_qty ? Number(row.remain_qty).toLocaleString() : "0"}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs text-right font-mono block">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</span>
+                              ) : (
+                                <Input value={formatNumber(row.unit_price || "")} onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))} className="h-8 text-xs text-right font-mono" />
+                              )}
+                            </TableCell>
+                            <TableCell className="text-[13px] text-right font-mono font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs">{row.due_date}</span>
+                              ) : (
+                                <Input type="date" value={row.due_date || ""} onChange={(e) => updateDetailRow(idx, "due_date", e.target.value)} className="h-8 text-xs" />
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs">{row.memo}</span>
+                              ) : (
+                                <Input value={row.memo || ""} onChange={(e) => updateDetailRow(idx, "memo", e.target.value)} className="h-8 text-xs" />
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                )}
+              </div>
+
+              {/* 비고 */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  비고
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <Input
+                  value={masterForm.memo || ""}
+                  onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
+                  placeholder="특이사항이나 메모를 입력해주세요"
+                  className="h-9"
+                  disabled={isReadOnly}
+                />
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter className="border-t pt-3 mt-2">
+            {isReadOnly ? (
+              <Button variant="outline" onClick={() => setIsModalOpen(false)}>닫기</Button>
+            ) : (
+              <>
+                <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+                <Button onClick={handleSave} disabled={saving}>
+                  {saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />} 저장
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+
+          {/* 품목 선택 모달 (중첩) */}
+          <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+            <DialogContent className="max-w-3xl" style={{ maxHeight: "70vh", display: "flex", flexDirection: "column" }} onInteractOutside={(e) => e.preventDefault()}>
+              <DialogHeader>
+                <DialogTitle>품목 선택</DialogTitle>
+                <DialogDescription>발주에 추가할 품목을 선택 후 하단 버튼을 눌러주세요.</DialogDescription>
+              </DialogHeader>
+              <div className="flex gap-2">
+                <Input
+                  placeholder="품명/품목코드 검색"
+                  value={itemSearchKeyword}
+                  onChange={(e) => setItemSearchKeyword(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && triggerNewSearch()}
+                  className="h-9 flex-1"
+                />
+                <Select value={itemSearchDivision} onValueChange={setItemSearchDivision}>
+                  <SelectTrigger className="h-9 w-[130px]"><SelectValue placeholder="관리품목" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">전체</SelectItem>
+                    {(categoryOptions["item_division"] || []).map((o) => (
+                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button size="sm" onClick={triggerNewSearch} disabled={itemSearchLoading} className="h-9">
+                  {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" />조회</>}
+                </Button>
+              </div>
+              <div className="flex-1 overflow-auto border rounded-lg">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[40px] text-center">
+                        <input type="checkbox"
+                          checked={itemSearchResults.length > 0 && itemSearchResults.every((i) => itemSelectedMap.has(i.id))}
+                          onChange={(e) => {
+                            setItemSelectedMap((prev) => {
+                              const next = new Map(prev);
+                              if (e.target.checked) itemSearchResults.forEach((i) => next.set(i.id, i));
+                              else itemSearchResults.forEach((i) => next.delete(i.id));
+                              return next;
+                            });
+                          }} />
+                      </TableHead>
+                      <TableHead className="w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                      <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {itemSearchResults.length === 0 ? (
+                      <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없어요</TableCell></TableRow>
+                    ) : itemSearchResults.map((item) => (
+                      <TableRow key={item.id} className={cn("cursor-pointer", itemSelectedMap.has(item.id) && "bg-primary/5")}
+                        onClick={() => setItemSelectedMap((prev) => {
+                          const next = new Map(prev);
+                          if (next.has(item.id)) next.delete(item.id); else next.set(item.id, item);
+                          return next;
+                        })}>
+                        <TableCell className="text-center">
+                          <input type="checkbox" checked={itemSelectedMap.has(item.id)} readOnly />
+                        </TableCell>
+                        <TableCell className="text-[13px] max-w-[130px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
+                        <TableCell className="text-sm max-w-[150px]"><span className="block truncate" title={item.item_name}>{item.item_name}</span></TableCell>
+                        <TableCell className="text-[13px]">{item.size}</TableCell>
+                        <TableCell className="text-[13px]">{categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}</TableCell>
+                        <TableCell className="text-[13px]">{categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <div className="flex items-center justify-between border-t pt-2">
+                <div className="flex items-center gap-1">
+                  <span className="text-xs text-muted-foreground">표시:</span>
+                  <input type="number" min={1} max={200} value={itemPageSize}
+                    onChange={(e) => {
+                      const v = Math.min(200, Math.max(1, Number(e.target.value) || 20));
+                      setItemPageSize(v);
+                      setItemPage(1);
+                      setItemPageInput("1");
+                      searchItems(1, v);
+                    }}
+                    className="h-7 w-14 rounded-md border px-1 text-center text-xs" />
+                </div>
+                <div className="flex items-center gap-1">
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(1)} disabled={itemPage === 1 || itemSearchLoading}>
+                    <ChevronsLeft className="h-3 w-3" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemPage - 1)} disabled={itemPage === 1 || itemSearchLoading}>
+                    <ChevronLeft className="h-3 w-3" />
+                  </Button>
+                  <input type="text" inputMode="numeric" value={itemPageInput}
+                    onChange={(e) => setItemPageInput(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === "Enter") { commitItemPageInput(); (e.target as HTMLInputElement).blur(); } }}
+                    onBlur={commitItemPageInput}
+                    onFocus={(e) => e.target.select()}
+                    className="h-7 w-10 rounded-md border px-1 text-center text-xs" />
+                  <span className="text-xs text-muted-foreground">/ {itemTotalPages || 1}</span>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemPage + 1)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
+                    <ChevronRight className="h-3 w-3" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemTotalPages)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
+                    <ChevronsRight className="h-3 w-3" />
+                  </Button>
+                </div>
+                <span className="text-xs text-muted-foreground">총 {itemTotal}건</span>
+              </div>
+              <DialogFooter>
+                <div className="flex items-center gap-2 w-full justify-between">
+                  <span className="text-sm text-muted-foreground">{itemSelectedMap.size}개 선택됨</span>
+                  <div className="flex gap-2">
+                    <Button variant="outline" onClick={() => { setItemSelectedMap(new Map()); setItemSelectOpen(false); }}>취소</Button>
+                    <Button onClick={addSelectedItemsToDetail} disabled={itemSelectedMap.size === 0}>
+                      <Plus className="w-4 h-4 mr-1" /> {itemSelectedMap.size}개 추가
+                    </Button>
+                  </div>
+                </div>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={DETAIL_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchOrders()}
+      />
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/purchase/purchase-item/page.tsx b/frontend/app/(main)/COMPANY_29/purchase/purchase-item/page.tsx
new file mode 100644
index 00000000..7f211a88
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/purchase/purchase-item/page.tsx
@@ -0,0 +1,1244 @@
+"use client";
+
+/**
+ * 구매품목관리 — Type B 마스터-디테일 리디자인
+ *
+ * 좌측: 구매품목 목록 (item_info, 구매 관련 필터)
+ * 우측: 선택한 품목의 공급업체 정보 (supplier_item_mapping → supplier_mng 조인)
+ *
+ * 공급업체관리와 양방향 연동 (같은 supplier_item_mapping 테이블)
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Search, X, Settings2, Package } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const ITEM_TABLE = "item_info";
+const MAPPING_TABLE = "supplier_item_mapping";
+const SUPPLIER_TABLE = "supplier_mng";
+
+// 숫자 포맷 헬퍼
+const formatNum = (val: any): string => {
+  if (val === null || val === undefined || val === "") return "";
+  const n = Number(val);
+  return isNaN(n) ? String(val) : n.toLocaleString();
+};
+
+const ITEM_GRID_COLUMNS = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "standard_price", label: "구매단가" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
+];
+
+export default function PurchaseItemPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-purchase-item", ITEM_TABLE, ITEM_GRID_COLUMNS);
+
+  // 좌측: 품목
+  const [items, setItems] = useState<any[]>([]);
+  const [itemLoading, setItemLoading] = useState(false);
+  const [itemCount, setItemCount] = useState(0);
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 공급업체
+  const [supplierItems, setSupplierItems] = useState<any[]>([]);
+  const [supplierLoading, setSupplierLoading] = useState(false);
+  const [supplierCheckedIds, setSupplierCheckedIds] = useState<string[]>([]);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string; isDefault?: boolean }[]>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 공급업체 추가 모달
+  const [suppSelectOpen, setSuppSelectOpen] = useState(false);
+  const [suppSearchKeyword, setSuppSearchKeyword] = useState("");
+  const [suppSearchResults, setSuppSearchResults] = useState<any[]>([]);
+  const [suppSearchLoading, setSuppSearchLoading] = useState(false);
+  const [suppCheckedIds, setSuppCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 수정 모달
+  const [editItemOpen, setEditItemOpen] = useState(false);
+  const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+
+  // 공급업체 상세 입력 모달 (공급업체 품번/품명 + 단가)
+  const [suppDetailOpen, setSuppDetailOpen] = useState(false);
+  const [selectedSuppsForDetail, setSelectedSuppsForDetail] = useState<any[]>([]);
+  const [suppMappings, setSuppMappings] = useState<Record<string, Array<{ _id: string; supplier_item_code: string; supplier_item_name: string }>>>({});
+  const [suppPrices, setSuppPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [editSuppData, setEditSuppData] = useState<any>(null);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string; isDefault?: boolean }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string; isDefault?: boolean }[] => {
+        const result: { code: string; label: string; isDefault?: boolean }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel, isDefault: v.isDefault });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      // 단가 카테고리
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/supplier_item_prices/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 좌측: 품목 조회
+  const fetchItems = useCallback(async () => {
+    setItemLoading(true);
+    try {
+      const filters: { columnName: string; operator: string; value: any }[] = [];
+
+      // 구매품목/영업관리 division 필터 (다중값 컬럼이므로 contains로 매칭)
+      filters.push({ columnName: "division", operator: "contains", value: "s" });
+
+      // DynamicSearchFilter에서 전달된 필터 추가
+      for (const f of searchFilters) {
+        filters.push({ columnName: f.columnName, operator: f.operator, value: f.value });
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const CATS = ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+      setItemCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setItemLoading(false);
+    }
+  }, [searchFilters, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => { fetchItems(); }, [fetchItems]);
+
+  // 선택된 품목
+  const selectedItem = items.find((i) => i.id === selectedItemId);
+
+  // 우측: 공급업체 목록 조회
+  useEffect(() => {
+    if (!selectedItem?.item_number) { setSupplierItems([]); setSupplierCheckedIds([]); return; }
+    setSupplierCheckedIds([]);
+    const itemKey = selectedItem.item_number;
+    const fetchSupplierItems = async () => {
+      setSupplierLoading(true);
+      try {
+        // 1. supplier_item_mapping에서 해당 품목의 매핑 조회
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
+          autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        // 2. supplier_id → supplier_mng 조인 (공급업체명)
+        const custIds = [...new Set(mappings.map((m: any) => m.supplier_id).filter(Boolean))];
+        let custMap: Record<string, any> = {};
+        if (custIds.length > 0) {
+          try {
+            const custRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+              page: 1, size: custIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "in", value: custIds }] },
+              autoFilter: true,
+            });
+            for (const c of (custRes.data?.data?.data || custRes.data?.data?.rows || [])) {
+              custMap[c.supplier_code] = c;
+            }
+          } catch { /* skip */ }
+        }
+
+        // 3. supplier_item_prices 조회 (단가 정보)
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        // 4. 공급업체별 중복 제거 + 오늘 날짜 기준 단가 매칭
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o: any) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+        const seenCustIds = new Set<string>();
+        const sortedMappings = [...mappings].sort((a: any, b: any) => (a.supplier_id || "").localeCompare(b.supplier_id || ""));
+
+        setSupplierItems(sortedMappings.map((m: any) => {
+          const custKey = m.supplier_id || "";
+          const isFirstOfGroup = !seenCustIds.has(custKey);
+          if (custKey) seenCustIds.add(custKey);
+
+          const custPriceList = allPrices.filter((p: any) => p.supplier_id === custKey);
+          const todayPrice = custPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || custPriceList[0] || {};
+
+          return {
+            ...m,
+            supplier_code: isFirstOfGroup ? custKey : "",
+            supplier_name: isFirstOfGroup ? (custMap[custKey]?.supplier_name || "") : "",
+            supplier_item_code: m.supplier_item_code || "",
+            supplier_item_name: m.supplier_item_name || "",
+            base_price: todayPrice.base_price || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+        }));
+      } catch (err) {
+        console.error("공급업체 조회 실패:", err);
+      } finally {
+        setSupplierLoading(false);
+      }
+    };
+    fetchSupplierItems();
+  }, [selectedItem?.item_number, priceCategoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 공급업체 검색
+  const searchSuppliers = async () => {
+    setSuppSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (suppSearchKeyword) filters.push({ columnName: "supplier_name", operator: "contains", value: suppSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const all = res.data?.data?.data || res.data?.data?.rows || [];
+      // 이미 등록된 공급업체 제외
+      const existing = new Set(supplierItems.map((c: any) => c.supplier_id || c.supplier_code));
+      setSuppSearchResults(all.filter((c: any) => !existing.has(c.supplier_code)));
+    } catch { /* skip */ } finally { setSuppSearchLoading(false); }
+  };
+
+  // 공급업체 선택 → 상세 모달로 이동
+  const goToSuppDetail = () => {
+    const selected = suppSearchResults.filter((c) => suppCheckedIds.has(c.id));
+    if (selected.length === 0) { toast.error("공급업체를 선택해주세요."); return; }
+    setSelectedSuppsForDetail(selected);
+    const mappings: typeof suppMappings = {};
+    const prices: typeof suppPrices = {};
+    for (const cust of selected) {
+      const key = cust.supplier_code || cust.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: selectedItem?.standard_price || selectedItem?.standard_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: selectedItem?.standard_price || selectedItem?.standard_price || "",
+      }];
+    }
+    setSuppMappings(mappings);
+    setSuppPrices(prices);
+    setSuppSelectOpen(false);
+    setSuppDetailOpen(true);
+  };
+
+  const addMappingRow = (custKey: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, supplier_item_code: "", supplier_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (custKey: string, rowId: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updateMappingRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  const addPriceRow = (custKey: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (custKey: string, rowId: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1;
+          if (roundLabel === "반올림") calc = Math.round(calc / unit) * unit;
+          else if (roundLabel === "절삭") calc = Math.floor(calc / unit) * unit;
+          else if (roundLabel === "올림") calc = Math.ceil(calc / unit) * unit;
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  const openEditSupp = async (row: any) => {
+    const custKey = row.supplier_code || row.supplier_id;
+
+    // supplier_mng에서 공급업체 정보 조회
+    let custInfo: any = { supplier_code: custKey, supplier_name: row.supplier_name || "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/supplier_mng/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: custKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) custInfo = found;
+    } catch { /* skip */ }
+
+    const mappingRows = [{
+      _id: `m_existing_${row.id}`,
+      supplier_item_code: row.supplier_item_code || "",
+      supplier_item_name: row.supplier_item_name || "",
+    }].filter((m) => m.supplier_item_code || m.supplier_item_name);
+
+    const priceRows = [{
+      _id: `p_existing_${row.id}`,
+      start_date: row.start_date || "",
+      end_date: row.end_date || "",
+      currency_code: row.currency_code || "CAT_MLAMDKVN_PZJI",
+      base_price_type: row.base_price_type || "CAT_MLAMFGFT_4RZW",
+      base_price: row.base_price ? String(row.base_price) : "",
+      discount_type: row.discount_type || "",
+      discount_value: row.discount_value ? String(row.discount_value) : "",
+      rounding_type: row.rounding_type || "",
+      rounding_unit_value: row.rounding_unit_value || "",
+      calculated_price: row.calculated_price ? String(row.calculated_price) : "",
+    }].filter((p) => p.base_price || p.start_date);
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedSuppsForDetail([custInfo]);
+    setSuppMappings({ [custKey]: mappingRows });
+    setSuppPrices({ [custKey]: priceRows });
+    setEditSuppData(row);
+    setSuppDetailOpen(true);
+  };
+
+  const handleSuppDetailSave = async () => {
+    if (!selectedItem) return;
+    const isEditingExisting = !!editSuppData;
+    setSaving(true);
+    try {
+      for (const cust of selectedSuppsForDetail) {
+        const custKey = cust.supplier_code || cust.id;
+        const mappingRows = suppMappings[custKey] || [];
+
+        if (isEditingExisting && editSuppData?.id) {
+          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+            originalData: { id: editSuppData.id },
+            updatedData: {
+              supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+              supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+            },
+          });
+
+          // 기존 prices 삭제 후 재등록
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "mapping_id", operator: "equals", value: editSuppData.id },
+              ]}, autoFilter: true,
+            });
+            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+            if (existing.length > 0) {
+              await apiClient.delete(`/table-management/tables/supplier_item_prices/delete`, {
+                data: existing.map((p: any) => ({ id: p.id })),
+              });
+            }
+          } catch { /* skip */ }
+
+          const priceRows = (suppPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/supplier_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: editSuppData.id,
+              supplier_id: custKey,
+              item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        } else {
+          // 신규 등록
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            supplier_id: custKey, item_id: selectedItem.item_number,
+            supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+            supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+          });
+          const mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              supplier_id: custKey, item_id: selectedItem.item_number,
+              supplier_item_code: mappingRows[mi].supplier_item_code || "",
+              supplier_item_name: mappingRows[mi].supplier_item_name || "",
+            });
+          }
+
+          const priceRows = (suppPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/supplier_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", supplier_id: custKey, item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedSuppsForDetail.length}개 공급업체가 추가되었습니다.`);
+      setSuppDetailOpen(false);
+      setEditSuppData(null);
+      setSuppCheckedIds(new Set());
+      // 우측 새로고침
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 수정
+  const openEditItem = () => {
+    if (!selectedItem) return;
+    setEditItemForm({ ...selectedItem });
+    setEditItemOpen(true);
+  };
+
+  const handleEditSave = async () => {
+    if (!editItemForm.id) return;
+    setSaving(true);
+    try {
+      await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
+        originalData: { id: editItemForm.id },
+        updatedData: {
+          standard_price: editItemForm.standard_price || null,
+          currency_code: editItemForm.currency_code || null,
+        },
+      });
+      toast.success("수정되었습니다.");
+      setEditItemOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "수정에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 우측: 공급업체 매핑 삭제
+  const handleSupplierMappingDelete = async () => {
+    if (supplierCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${supplierCheckedIds.length}개 공급업체 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      // 관련 단가 삭제
+      for (const mappingId of supplierCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/supplier_item_prices/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      // 매핑 삭제
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: supplierCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${supplierCheckedIds.length}개 공급업체 매핑이 삭제되었습니다.`);
+      setSupplierCheckedIds([]);
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) return;
+    const data = items.map((i) => ({
+      품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
+      기준단가: i.standard_price, 구매단가: i.standard_price, 통화: i.currency_code, 상태: i.status,
+    }));
+    await exportToExcel(data, "구매품목관리.xlsx", "구매품목");
+    toast.success("다운로드 완료");
+  };
+
+  // EDataTable 컬럼 정의 (구매품목) — ts.visibleColumns 기반
+  const COLUMN_RENDER_MAP: Record<string, Partial<EDataTableColumn>> = {
+    item_number: { width: "w-[110px]" },
+    item_name: { minWidth: "min-w-[130px]" },
+    size: { width: "w-[80px]" },
+    unit: { width: "w-[60px]" },
+    standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
+    currency_code: { width: "w-[50px]" },
+    status: { width: "w-[60px]" },
+  };
+  const itemColumns: EDataTableColumn[] = ts.visibleColumns.map((col): EDataTableColumn => ({
+    key: col.key,
+    label: col.label,
+    ...COLUMN_RENDER_MAP[col.key],
+  }));
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ITEM_TABLE}
+        filterId="c16-purchase-item"
+        onFilterChange={setSearchFilters}
+        dataCount={items.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" />
+            엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 구매품목 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">구매품목 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {itemCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={itemColumns}
+                data={ts.groupData(items)}
+                rowKey={(row) => row.id}
+                loading={itemLoading}
+                emptyMessage="등록된 구매품목이 없어요"
+                selectedId={selectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
+                onRowDoubleClick={() => openEditItem()}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-purchase-item"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedItemId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Package className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">품목을 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 품목을 선택하면 공급업체 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 공급업체별 단가 헤더 */}
+                  <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 px-4">
+                    <div className="flex items-center gap-2.5">
+                      <Package className="w-3.5 h-3.5 text-muted-foreground" />
+                      <span className="text-[13px] font-bold">공급업체별 단가</span>
+                      <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">
+                        {supplierItems.length}
+                      </Badge>
+                    </div>
+                    <div className="flex gap-1.5">
+                      <Button
+                        size="sm"
+                        onClick={() => { setSuppCheckedIds(new Set()); setSuppSelectOpen(true); searchSuppliers(); }}
+                      >
+                        <Plus className="w-3.5 h-3.5" /> 공급업체 추가
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={supplierCheckedIds.length === 0}
+                        onClick={handleSupplierMappingDelete}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" /> 삭제
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 공급업체 테이블 */}
+                  <div className="flex-1 min-h-0 overflow-auto pt-px">
+                    {supplierLoading ? (
+                      <div className="flex items-center justify-center h-full">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : supplierItems.length === 0 ? (
+                      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+                        등록된 공급업체가 없어요
+                      </div>
+                    ) : (
+                      <Table noWrapper>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted h-10">
+                            <TableHead className="w-[40px] text-center px-2">
+                              <input
+                                type="checkbox"
+                                className="rounded"
+                                checked={supplierItems.length > 0 && supplierCheckedIds.length === supplierItems.length}
+                                onChange={(e) => {
+                                  if (e.target.checked) setSupplierCheckedIds(supplierItems.map((c) => c.id));
+                                  else setSupplierCheckedIds([]);
+                                }}
+                              />
+                            </TableHead>
+                            <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체코드</TableHead>
+                            <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품번</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품명</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {supplierItems.map((row) => (
+                            <TableRow
+                              key={row.id}
+                              className={cn(
+                                "cursor-pointer h-[41px]",
+                                supplierCheckedIds.includes(row.id) ? "bg-primary/5 border-l-[3px] border-l-primary" : "border-l-[3px] border-l-transparent"
+                              )}
+                              onDoubleClick={() => openEditSupp(row)}
+                            >
+                              <TableCell
+                                className="text-center px-2"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setSupplierCheckedIds((prev) =>
+                                    prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                  );
+                                }}
+                              >
+                                <input type="checkbox" className="rounded" checked={supplierCheckedIds.includes(row.id)} readOnly />
+                              </TableCell>
+                              <TableCell className="text-[13px] font-mono text-muted-foreground">{row.supplier_code}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_name}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_item_code}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right">
+                                {row.base_price ? Number(row.base_price).toLocaleString() : ""}
+                              </TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold">
+                                {row.calculated_price ? Number(row.calculated_price).toLocaleString() : ""}
+                              </TableCell>
+                              <TableCell className="text-[13px]">{row.currency_code}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 품목 수정 모달 ── */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>구매품목 수정</DialogTitle>
+            <DialogDescription>
+              {editItemForm.item_number || ""} — {editItemForm.item_name || ""}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {/* 품목 기본정보 (읽기 전용) */}
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-sm">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+
+            <div className="col-span-2 border-t my-1" />
+
+            {/* 구매 설정 (수정 가능) */}
+            <div className="space-y-1.5">
+              <Label className="text-sm">구매단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="구매단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">기준단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">통화</Label>
+              <Select
+                value={editItemForm.currency_code || ""}
+                onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="통화를 선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 공급업체 검색 및 추가 모달 ── */}
+      <Dialog open={suppSelectOpen} onOpenChange={setSuppSelectOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>공급업체 검색 및 추가</DialogTitle>
+            <DialogDescription>품목에 추가할 공급업체를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 py-2">
+            {/* 검색바 */}
+            <div className="flex gap-2">
+              <Input
+                placeholder="공급업체명으로 검색해주세요"
+                value={suppSearchKeyword}
+                onChange={(e) => setSuppSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchSuppliers()}
+                className="h-9 flex-1"
+              />
+              <Button size="sm" onClick={searchSuppliers} disabled={suppSearchLoading} className="h-9">
+                {suppSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
+              </Button>
+            </div>
+            {/* 검색 결과 테이블 */}
+            <div className="overflow-auto max-h-[350px] border rounded-lg">
+              <Table noWrapper>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="sticky top-0 bg-card w-[40px] text-center">
+                      <Checkbox
+                        checked={suppSearchResults.length > 0 && suppCheckedIds.size === suppSearchResults.length}
+                        onCheckedChange={(checked) => {
+                          if (checked === true) setSuppCheckedIds(new Set(suppSearchResults.map((c) => c.id)));
+                          else setSuppCheckedIds(new Set());
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[110px]">공급업체코드</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[130px]">공급업체명</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">거래유형</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">담당자</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {suppSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : suppSearchResults.map((c) => (
+                    <TableRow
+                      key={c.id}
+                      className={cn("cursor-pointer", suppCheckedIds.has(c.id) && "bg-primary/[0.08]")}
+                      onClick={() => setSuppCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <Checkbox
+                          checked={suppCheckedIds.has(c.id)}
+                          onCheckedChange={(checked) => {
+                            setSuppCheckedIds((prev) => {
+                              const next = new Set(prev);
+                              if (checked === true) next.add(c.id); else next.delete(c.id);
+                              return next;
+                            });
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell className="text-[13px] font-mono text-muted-foreground">{c.supplier_code}</TableCell>
+                      <TableCell className="text-sm font-medium text-foreground">{c.supplier_name}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.division}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.contact_person}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{suppCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setSuppSelectOpen(false)}>취소</Button>
+                <Button onClick={goToSuppDetail} disabled={suppCheckedIds.size === 0}>
+                  <Plus className="w-4 h-4" />
+                  {suppCheckedIds.size}개 다음
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 공급업체 상세 입력/수정 모달 ── */}
+      <Dialog open={suppDetailOpen} onOpenChange={setSuppDetailOpen}>
+        <DialogContent className="max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              공급업체 상세정보 {editSuppData ? "수정" : "입력"} — {selectedItem?.item_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editSuppData ? "공급업체 품번/품명과 기간별 단가를 수정해주세요." : "선택한 공급업체의 품번/품명과 기간별 단가를 설정해주세요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-6 py-2">
+            {selectedSuppsForDetail.map((cust, idx) => {
+              const custKey = cust.supplier_code || cust.id;
+              const mappingRows = suppMappings[custKey] || [];
+              const prices = suppPrices[custKey] || [];
+
+              return (
+                <div key={custKey} className="border rounded-lg overflow-hidden">
+                  {/* 공급업체 헤더 */}
+                  <div className="flex items-center gap-2.5 px-4 py-3 bg-muted border-b">
+                    <span className="text-[13px] font-bold text-foreground">{idx + 1}. {cust.supplier_name || custKey}</span>
+                    <span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">
+                      {custKey}
+                    </span>
+                  </div>
+
+                  <div className="flex gap-4 p-4 bg-card">
+                    {/* 좌: 공급업체 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/50">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">공급업체 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 공급업체 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.supplier_item_code}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "supplier_item_code", e.target.value)}
+                              placeholder="공급업체 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.supplier_item_name}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "supplier_item_name", e.target.value)}
+                              placeholder="공급업체 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button
+                              variant="ghost" size="sm"
+                              className="h-7 w-7 p-0 text-destructive shrink-0"
+                              onClick={() => removeMappingRow(custKey, mRow._id)}
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/30">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button
+                                  variant="ghost" size="sm"
+                                  className="h-6 w-6 p-0 text-destructive"
+                                  onClick={() => removePriceRow(custKey, price._id)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="통화" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "base_price", raw);
+                                }}
+                                className="h-8 text-xs text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-8 text-xs text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm text-foreground">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setSuppDetailOpen(false);
+                if (!editSuppData) setSuppSelectOpen(true);
+                setEditSuppData(null);
+              }}
+            >
+              {editSuppData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleSuppDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={ITEM_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchItems()}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/purchase/supplier/page.tsx b/frontend/app/(main)/COMPANY_29/purchase/supplier/page.tsx
new file mode 100644
index 00000000..521f770e
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/purchase/supplier/page.tsx
@@ -0,0 +1,2759 @@
+"use client";
+
+/**
+ * 공급업체관리 — Type B 마스터-디테일 레이아웃 (리디자인)
+ *
+ * 좌측: 공급업체 목록 (supplier_mng)
+ * 우측: 품목별 단가 + 납품처 정보 탭
+ *
+ * 모달:
+ * - 공급업체 등록/수정 (supplier_mng)
+ * - 품목 추가 (item_info 검색 → supplier_item_mapping + supplier_item_prices)
+ * - 납품처 등록 (delivery_destination)
+ */
+
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Users, Package, MapPin, Search, X, Tag, Coins, Settings2, GripVertical,
+  ChevronRight, ChevronDown,
+} from "lucide-react";
+import {
+  DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { validateField, validateForm, formatField } from "@/lib/utils/validation";
+import { getAvailableNumberingRulesForScreen, previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const SUPPLIER_TABLE = "supplier_mng";
+const MAPPING_TABLE = "supplier_item_mapping";
+const PRICE_TABLE = "supplier_item_prices";
+const DELIVERY_TABLE = "delivery_destination";
+const CONTACT_TABLE = "supplier_contact";
+
+const SUPPLIER_GRID_COLUMNS = [
+  { key: "supplier_code", label: "공급업체코드" },
+  { key: "supplier_name", label: "공급업체명" },
+  { key: "division", label: "공급업체유형" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "전화번호" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "status", label: "상태" },
+];
+
+function SortableMappingRow({ id, children }: { id: string; children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform), transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+  return (
+    <div ref={setNodeRef} style={style} className="flex gap-2 items-center">
+      <div {...attributes} {...listeners} className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0">
+        <GripVertical className="h-3.5 w-3.5" />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default function SupplierManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-supplier", SUPPLIER_TABLE, SUPPLIER_GRID_COLUMNS);
+  const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 공급업체 목록
+  const [suppliers, setSuppliers] = useState<any[]>([]);
+  const [rawSuppliers, setRawSuppliers] = useState<any[]>([]);
+  const [supplierLoading, setSupplierLoading] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
+  const [mainContactMap, setMainContactMap] = useState<Record<string, any>>({});
+  const [supplierCount, setSupplierCount] = useState(0);
+  const [selectedSupplierId, setSelectedSupplierId] = useState<string | null>(null);
+
+  // 우측: 탭
+  const [rightTab, setRightTab] = useState<"items" | "delivery">("items");
+  // 우측: 품목 단가
+  const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceGroups, setPriceGroups] = useState<Record<string, { master: any; details: any[] }>>({});
+  const [priceLoading, setPriceLoading] = useState(false);
+  const [priceCheckedIds, setPriceCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [collapsedPriceCards, setCollapsedPriceCards] = useState<Set<string>>(new Set());
+  // 우측: 납품처
+  const [deliveryItems, setDeliveryItems] = useState<any[]>([]);
+  const [deliveryLoading, setDeliveryLoading] = useState(false);
+
+  // 품목 편집 데이터 (더블클릭 시 상세 입력 모달 재활용)
+  const [editItemData, setEditItemData] = useState<any>(null);
+  const savingRef = useRef(false);
+
+  // 거래처 모달
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [supplierEditMode, setSupplierEditMode] = useState(false);
+  const [supplierForm, setSupplierForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 품목 추가 모달 (1단계: 검색/선택)
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemTotalCount, setItemTotalCount] = useState(0);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 상세 입력 모달 (2단계: 거래처 품번/품명 + 단가)
+  const [itemDetailOpen, setItemDetailOpen] = useState(false);
+  const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; supplier_item_code: string; supplier_item_name: string }>>>({});
+  const [itemPrices, setItemPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 거래처 모달 탭
+  const [supplierModalTab, setSupplierModalTab] = useState<"basic" | "contacts" | "delivery">("basic");
+  // 담당자 (supplier_contact) - 모달 내
+  const [modalContacts, setModalContacts] = useState<any[]>([]);
+  const [modalContactLoading, setModalContactLoading] = useState(false);
+  const [modalContactForm, setModalContactForm] = useState<Record<string, any>>({});
+  const [modalContactEditId, setModalContactEditId] = useState<string | null>(null);
+  const [modalContactFormOpen, setModalContactFormOpen] = useState(false);
+  const [modalContactSaving, setModalContactSaving] = useState(false);
+  // 납품처 (delivery_destination) - 모달 내
+  const [modalDeliveries, setModalDeliveries] = useState<any[]>([]);
+  const [modalDeliveryLoading, setModalDeliveryLoading] = useState(false);
+  const [modalDeliveryForm, setModalDeliveryForm] = useState<Record<string, any>>({});
+  const [modalDeliveryEditId, setModalDeliveryEditId] = useState<string | null>(null);
+  const [modalDeliveryFormOpen, setModalDeliveryFormOpen] = useState(false);
+  const [modalDeliverySaving, setModalDeliverySaving] = useState(false);
+  const [modalDeliveryFormErrors, setModalDeliveryFormErrors] = useState<Record<string, string>>({});
+
+  const [continuousInput, setContinuousInput] = useState(false);
+
+  // 세금유형 (기본정보 탭 내)
+  const [taxTypeRows, setTaxTypeRows] = useState<{ _id: string; tax_type_name: string; rate: string }[]>([]);
+  const [taxTypeOptions, setTaxTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [employeeOptions, setEmployeeOptions] = useState<{ user_id: string; user_name: string; position_name?: string }[]>([]);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const flatten = (vals: any[]): { code: string; label: string }[] => {
+      const result: { code: string; label: string }[] = [];
+      for (const v of vals) {
+        result.push({ code: v.valueCode, label: v.valueLabel });
+        if (v.children?.length) result.push(...flatten(v.children));
+      }
+      return result;
+    };
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["division", "status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${SUPPLIER_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${PRICE_TABLE}/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+
+      // 세금유형 카테고리
+      try {
+        const taxRes = await apiClient.get(`/table-categories/supplier_tax_type/tax_type_name/values`);
+        if (taxRes.data?.success) setTaxTypeOptions(flatten(taxRes.data.data || []));
+      } catch { /* skip */ }
+    };
+    load();
+    apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true })
+      .then((res) => {
+        const users = res.data?.data?.data || res.data?.data?.rows || [];
+        setEmployeeOptions(users.map((u: any) => ({
+          user_id: u.user_id, user_name: u.user_name || u.user_id, position_name: u.position_name,
+        })));
+      }).catch(() => {});
+  }, []);
+
+  // 공급업체 목록 조회
+  const fetchSuppliers = useCallback(async () => {
+    setSupplierLoading(true);
+    try {
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
+      const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "supplier_code", order: "desc" },
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setRawSuppliers(raw);
+
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const mainContact = mainContactMap[r.id];
+        return {
+          ...r,
+          division: resolve("division", r.division),
+          status: resolve("status", r.status),
+          contact_person: mainContact?.contact_name || "",
+          contact_phone: mainContact?.contact_phone || "",
+          email: mainContact?.contact_email || "",
+        };
+      });
+      // 공급업체코드 숫자 기준 내림차순 정렬
+      data.sort((a: any, b: any) => {
+        const aNum = parseInt((a.supplier_code || "").replace(/\D/g, ""), 10) || 0;
+        const bNum = parseInt((b.supplier_code || "").replace(/\D/g, ""), 10) || 0;
+        return bNum - aNum;
+      });
+      setSuppliers(data);
+      setSupplierCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("거래처 조회 실패:", err);
+      toast.error("공급업체 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setSupplierLoading(false);
+    }
+  }, [searchFilters, categoryOptions, employeeOptions, mainContactMap]);
+
+  useEffect(() => { fetchSuppliers(); }, [fetchSuppliers]);
+
+  // 메인 담당자 조회 (최초 1번 + 저장 후 갱신)
+  const fetchMainContacts = useCallback(async () => {
+    try {
+      const contactRes = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+        dataFilter: { enabled: true, filters: [{ columnName: "is_main", operator: "equals", value: "Y" }] },
+      });
+      const allContacts = contactRes.data?.data?.data || contactRes.data?.data?.rows || [];
+      const map: Record<string, any> = {};
+      for (const c of allContacts) {
+        if ((c.is_main === "Y" || c.is_main === true) && c.supplier_id) {
+          map[c.supplier_id] = c;
+        }
+      }
+      setMainContactMap(map);
+    } catch { /* skip */ }
+  }, []);
+
+  useEffect(() => { fetchMainContacts(); }, [fetchMainContacts]);
+
+  const selectedSupplier = suppliers.find((c) => c.id === selectedSupplierId);
+
+  // 선택된 공급업체의 품목 단가 조회
+  useEffect(() => {
+    if (!selectedSupplier?.supplier_code) { setPriceItems([]); setPriceCheckedIds([]); return; }
+    setPriceCheckedIds([]);
+    const fetchItems = async () => {
+      setPriceLoading(true);
+      try {
+        const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+          ]},
+          autoFilter: true,
+        });
+        const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+
+        // 품목 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
+        const grouped: Record<string, { master: any; details: any[] }> = {};
+        const flatItems: any[] = [];
+        const seenItemIds = new Set<string>();
+        for (const m of mappings) {
+          const itemKey = m.item_id || "";
+          if (seenItemIds.has(itemKey)) continue; // 품목당 첫 매핑만 마스터
+          seenItemIds.add(itemKey);
+
+          const itemInfo = itemMap[itemKey] || {};
+          const itemPriceList = allPrices
+            .filter((p: any) => p.item_id === itemKey)
+            .sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
+          const todayPrice = itemPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || itemPriceList[0] || {};
+
+          const masterRow = {
+            ...m,
+            item_number: itemKey,
+            item_name: itemInfo.item_name || "",
+            base_price_type: priceResolve("base_price_type", todayPrice.base_price_type || ""),
+            base_price: todayPrice.base_price || "",
+            discount_type: priceResolve("discount_type", todayPrice.discount_type || ""),
+            discount_value: todayPrice.discount_value || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+
+          // 단가 리스트 (라벨 변환)
+          const priceDetails = itemPriceList.map((p: any) => ({
+            ...p,
+            base_price_type_label: priceResolve("base_price_type", p.base_price_type || ""),
+            discount_type_label: priceResolve("discount_type", p.discount_type || ""),
+            currency_label: priceResolve("currency_code", p.currency_code || ""),
+            is_current: (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today),
+          }));
+
+          grouped[itemKey] = { master: masterRow, details: priceDetails };
+          flatItems.push(masterRow);
+        }
+        setPriceGroups(grouped);
+        setPriceItems(flatItems);
+      } catch (err) {
+        console.error("품목 조회 실패:", err);
+      } finally {
+        setPriceLoading(false);
+      }
+    };
+    fetchItems();
+  }, [selectedSupplier?.supplier_code]);
+
+  // 납품처 조회
+  useEffect(() => {
+    if (!selectedSupplier?.supplier_code) { setDeliveryItems([]); return; }
+    const fetchDelivery = async () => {
+      setDeliveryLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_code", operator: "equals", value: selectedSupplier.supplier_code },
+          ]},
+          autoFilter: true,
+        });
+        setDeliveryItems(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setDeliveryItems([]); } finally { setDeliveryLoading(false); }
+    };
+    fetchDelivery();
+  }, [selectedSupplier?.supplier_code]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 모달 내 담당자 목록 조회
+  const fetchModalContacts = useCallback(async (supplierId: string) => {
+    setModalContactLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      setModalContacts(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalContacts([]); } finally { setModalContactLoading(false); }
+  }, []);
+
+  // 모달 내 납품처 목록 조회
+  const fetchModalDeliveries = useCallback(async (supplierCode: string) => {
+    setModalDeliveryLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: supplierCode }] },
+        autoFilter: true,
+      });
+      setModalDeliveries(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalDeliveries([]); } finally { setModalDeliveryLoading(false); }
+  }, []);
+
+  // 담당자 저장 (등록/수정)
+  const handleModalContactSave = async () => {
+    if (!modalContactForm.contact_name) { toast.error("담당자명은 필수입니다."); return; }
+    if (modalContactEditId) {
+      // 수정 — 로컬 리스트에서 교체 + 메인 설정 시 다른 메인 해제
+      const isSettingMain = modalContactForm.is_main === "Y" || modalContactForm.is_main === true;
+      setModalContacts((prev) => prev.map((c) =>
+        (c._localId || c.id) === modalContactEditId
+          ? { ...c, ...modalContactForm }
+          : isSettingMain ? { ...c, is_main: "N" } : c
+      ));
+    } else {
+      // 추가 — 로컬 리스트에 카드 추가
+      setModalContacts((prev) => [...prev, {
+        ...modalContactForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalContactFormOpen(false);
+    setModalContactForm({});
+    setModalContactEditId(null);
+  };
+
+  // 담당자 삭제
+  const handleModalContactDelete = (contactId: string) => {
+    setModalContacts((prev) => prev.filter((c) => (c._localId || c.id) !== contactId));
+  };
+
+  // 납품처 자동채번 유틸
+  const generateDeliveryCode = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DELIVERY_TABLE}/destination_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        const allRes = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "destination_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const match = (row.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        // 로컬에 추가된 것도 포함
+        for (const d of modalDeliveries) {
+          const match = (d.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLen = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          return prefix + String(maxSeq + 1).padStart(seqLen, "0");
+        }
+      }
+    } catch { /* skip */ }
+    return "";
+  };
+
+  // 납품처 저장 (모달 내)
+  const handleModalDeliverySave = async () => {
+    if (!modalDeliveryForm.destination_name) { toast.error("납품처명은 필수입니다."); return; }
+    if (modalDeliveryEditId) {
+      const isSettingMain = modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true;
+      setModalDeliveries((prev) => prev.map((d) =>
+        (d._localId || d.id) === modalDeliveryEditId
+          ? { ...d, ...modalDeliveryForm }
+          : isSettingMain ? { ...d, is_default: "N" } : d
+      ));
+    } else {
+      setModalDeliveries((prev) => [...prev, {
+        ...modalDeliveryForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalDeliveryFormOpen(false);
+    setModalDeliveryForm({});
+    setModalDeliveryEditId(null);
+    setModalDeliveryFormErrors({});
+  };
+
+  const handleModalDeliveryDelete = (deliveryId: string) => {
+    setModalDeliveries((prev) => prev.filter((d) => (d._localId || d.id) !== deliveryId));
+  };
+
+  // 공급업체 등록 모달 열기
+  const openSupplierRegister = async () => {
+    setSupplierForm({});
+    setFormErrors({});
+    setSupplierEditMode(false);
+    setSupplierModalTab("basic");
+    setModalContacts([]);
+    setModalDeliveries([]);
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setTaxTypeRows([]);
+    setSupplierModalOpen(true);
+    // 공급업체 코드 자동 채번 — 기존 데이터 max값 기반
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${SUPPLIER_TABLE}/supplier_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        // 기존 데이터에서 CUST-XXX 패턴의 최대 순번 조회
+        const allRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "supplier_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const code = row.supplier_code || "";
+          const match = code.match(/(\d+)$/);
+          if (match) {
+            const seq = parseInt(match[1], 10);
+            if (seq > maxSeq) maxSeq = seq;
+          }
+        }
+        // preview로 접두어 패턴 가져오기
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLength = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          const nextSeq = maxSeq + 1;
+          const nextCode = prefix + String(nextSeq).padStart(seqLength, "0");
+          setSupplierForm((prev) => ({ ...prev, supplier_code: nextCode, _numberingRuleId: ruleId }));
+        }
+      }
+    } catch { /* skip */ }
+  };
+
+  const openSupplierEdit = () => {
+    if (!selectedSupplier) return;
+    const rawData = rawSuppliers.find((c) => c.id === selectedSupplierId);
+    setSupplierForm({ ...(rawData || selectedSupplier) });
+    setFormErrors({});
+    setSupplierEditMode(true);
+    setSupplierModalTab("basic");
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setModalContactForm({});
+    setModalDeliveryForm({});
+    setModalContactEditId(null);
+    setModalDeliveryEditId(null);
+    // 수정 모드에서는 바로 조회
+    const code = (rawData || selectedSupplier).supplier_code;
+    const id = (rawData || selectedSupplier).id;
+    if (id) {
+      fetchModalContacts(id);
+      // 세금유형 로드
+      apiClient.post(`/table-management/tables/supplier_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: id }] },
+        autoFilter: true,
+      }).then((res: any) => {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        setTaxTypeRows(rows.map((r: any) => ({ _id: r.id, tax_type_name: r.tax_type_name || "", rate: String(r.rate || "") })));
+      }).catch(() => setTaxTypeRows([]));
+    }
+    if (code) fetchModalDeliveries(code);
+    setSupplierModalOpen(true);
+  };
+
+  // 폼 필드 변경 시 자동 포맷팅 + 실시간 검증
+  const handleFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setSupplierForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => {
+      const next = { ...prev };
+      if (error) next[field] = error; else delete next[field];
+      return next;
+    });
+  };
+
+  // 세금유형/담당자/납품처를 한번에 저장하는 헬퍼
+  const saveSubTables = async (supplierId: string, supplierCode: string) => {
+    // 세금유형 — 기존 삭제 후 재생성
+    try {
+      const existTax = await apiClient.post(`/table-management/tables/supplier_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      const existRows = existTax.data?.data?.data || existTax.data?.data?.rows || [];
+      if (existRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/supplier_tax_type/delete`, {
+          data: existRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+      for (const t of taxTypeRows.filter((r) => r.tax_type_name)) {
+        await apiClient.post(`/table-management/tables/supplier_tax_type/add`, {
+          id: crypto.randomUUID(), supplier_id: supplierId,
+          tax_type_name: t.tax_type_name, tax_type_id: t.tax_type_name,
+          rate: t.rate ? Number(t.rate) : 0,
+        });
+      }
+    } catch { /* skip */ }
+
+    // 담당자 — 기존 삭제 후 전체 재생성
+    try {
+      const existContacts = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      const existCRows = existContacts.data?.data?.data || existContacts.data?.data?.rows || [];
+      if (existCRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${CONTACT_TABLE}/delete`, {
+          data: existCRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const c of modalContacts) {
+      try {
+        await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/add`, {
+          id: crypto.randomUUID(), supplier_id: supplierId,
+          contact_name: c.contact_name || "", contact_phone: c.contact_phone || "",
+          contact_email: c.contact_email || "", department: c.department || "",
+          is_main: c.is_main || "N", memo: c.memo || "",
+        });
+      } catch { /* skip */ }
+    }
+
+    // 납품처 — 기존 삭제 후 전체 재생성
+    try {
+      const existDeliveries = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: supplierCode }] },
+        autoFilter: true,
+      });
+      const existDRows = existDeliveries.data?.data?.data || existDeliveries.data?.data?.rows || [];
+      if (existDRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
+          data: existDRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const d of modalDeliveries) {
+      try {
+        await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
+          id: crypto.randomUUID(), supplier_code: supplierCode,
+          destination_code: d.destination_code || "", destination_name: d.destination_name || "",
+          address: d.address || "", manager_name: d.manager_name || "",
+          phone: d.phone || "", memo: d.memo || "", is_default: d.is_default || "N",
+        });
+      } catch { /* skip */ }
+    }
+  };
+
+  const handleSupplierSave = async () => {
+    if (!supplierForm.supplier_name) { toast.error("공급업체명은 필수입니다."); return; }
+    if (!supplierForm.status) { toast.error("상태는 필수입니다."); return; }
+    const errors = validateForm(supplierForm, ["contact_phone", "email", "business_number"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) {
+      toast.error("입력 형식을 확인해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, _numberingRuleId, ...fields } = supplierForm;
+      const cleanFields: Record<string, any> = {};
+      for (const [key, value] of Object.entries(fields)) {
+        cleanFields[key] = value === "" ? null : value;
+      }
+
+      if (supplierEditMode && id) {
+        // 수정
+        await apiClient.put(`/table-management/tables/${SUPPLIER_TABLE}/edit`, {
+          originalData: { id }, updatedData: cleanFields,
+        });
+        await saveSubTables(id, cleanFields.supplier_code || supplierForm.supplier_code);
+        toast.success("저장되었습니다.");
+      } else {
+        // 신규 등록
+        await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/add`, cleanFields);
+        // id 획득
+        const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: cleanFields.supplier_code }] },
+          autoFilter: true,
+        });
+        const newRow = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+        if (newRow?.id) {
+          await saveSubTables(newRow.id, cleanFields.supplier_code);
+        }
+        toast.success("공급업체가 등록되었습니다.");
+      }
+
+      fetchSuppliers();
+      fetchMainContacts();
+      if (!supplierEditMode && continuousInput) {
+        // 연속입력 — 폼 초기화하고 모달 유지
+        setSupplierForm({});
+        setModalContacts([]);
+        setModalDeliveries([]);
+        setTaxTypeRows([]);
+        setSupplierModalTab("basic");
+        // 새 코드 채번
+        try {
+          const ruleRes = await apiClient.get(`/numbering-rules/by-column/${SUPPLIER_TABLE}/supplier_code`);
+          const ruleData = ruleRes.data;
+          if (ruleData?.success && ruleData?.data?.ruleId) {
+            const ruleId = ruleData.data.ruleId;
+            const allRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, { page: 1, size: 500, autoFilter: true, sort: { columnName: "supplier_code", order: "desc" } });
+            const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+            let maxSeq = 0;
+            for (const row of allRows) { const match = (row.supplier_code || "").match(/(\d+)$/); if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; } }
+            const previewRes = await previewNumberingCode(ruleId);
+            if (previewRes.success && previewRes.data?.generatedCode) {
+              const prefix = previewRes.data.generatedCode.replace(/\d+$/, "");
+              const seqLen = (previewRes.data.generatedCode.match(/(\d+)$/) || ["", "001"])[1].length;
+              setSupplierForm({ supplier_code: prefix + String(maxSeq + 1).padStart(seqLen, "0") });
+            }
+          }
+        } catch { /* skip */ }
+        toast.success("등록 완료. 다음 공급업체를 입력하세요.");
+      } else {
+        setSupplierModalOpen(false);
+        // 우측 패널 갱신
+        if (selectedSupplierId) {
+          const cid = selectedSupplierId;
+          setSelectedSupplierId(null);
+          setTimeout(() => setSelectedSupplierId(cid), 50);
+        }
+      }
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 공급업체 삭제
+  const handleSupplierDelete = async () => {
+    if (!selectedSupplierId) return;
+    const ok = await confirm("공급업체를 삭제하시겠습니까?", {
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${SUPPLIER_TABLE}/delete`, {
+        data: [{ id: selectedSupplierId }],
+      });
+      toast.success("삭제되었습니다.");
+      setSelectedSupplierId(null);
+      fetchSuppliers();
+    } catch { toast.error("삭제에 실패했습니다."); }
+  };
+
+  // 품목 검색
+  const searchItems = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const allItems = res.data?.data?.data || res.data?.data?.rows || [];
+      setItemTotalCount(allItems.length);
+      const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
+      const PURCHASE_CODES = ["s"]; // 구매관리 카테고리 코드
+      setItemSearchResults(allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        const divCodes = (item.division || "").split(",").map((c: string) => c.trim());
+        return divCodes.some((code: string) => PURCHASE_CODES.includes(code));
+      }));
+    } catch { /* skip */ } finally { setItemSearchLoading(false); }
+  };
+
+  // 품목 선택 완료 → 상세 입력 모달로 전환
+  const goToItemDetail = () => {
+    const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+    setSelectedItemsForDetail(selected);
+    const mappings: typeof itemMappings = {};
+    const prices: typeof itemPrices = {};
+    for (const item of selected) {
+      const key = item.item_number || item.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: item.standard_price || item.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: item.standard_price || item.selling_price || "",
+      }];
+    }
+    setItemMappings(mappings);
+    setItemPrices(prices);
+    setItemSelectOpen(false);
+    setItemDetailOpen(true);
+  };
+
+  // 거래처 품번/품명 행 추가
+  const addMappingRow = (itemKey: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, supplier_item_code: "", supplier_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (itemKey: string, rowId: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const handleMappingDragEnd = (itemKey: string, event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setItemMappings((prev) => {
+      const arr = [...(prev[itemKey] || [])];
+      const oldIdx = arr.findIndex((r) => r._id === active.id);
+      const newIdx = arr.findIndex((r) => r._id === over.id);
+      return { ...prev, [itemKey]: arrayMove(arr, oldIdx, newIdx) };
+    });
+  };
+
+  const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  // 단가 행 추가
+  const addPriceRow = (itemKey: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (itemKey: string, rowId: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1; // "10원" → 10, "100원" → 100
+          if (roundLabel === "반올림") {
+            calc = Math.round(calc / unit) * unit;
+          } else if (roundLabel === "절삭") {
+            calc = Math.floor(calc / unit) * unit;
+          } else if (roundLabel === "올림") {
+            calc = Math.ceil(calc / unit) * unit;
+          }
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  // 품목 편집 열기
+  const openEditItem = async (row: any) => {
+    const itemKey = row.item_number || row.item_id;
+    let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "equals", value: itemKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) itemInfo = found;
+    } catch { /* skip */ }
+
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "supplier_id", operator: "equals", value: selectedSupplier!.supplier_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.supplier_item_code || m.supplier_item_name)
+        .map((m: any) => ({
+          _id: `m_existing_${m.id}`,
+          supplier_item_code: m.supplier_item_code || "",
+          supplier_item_name: m.supplier_item_name || "",
+        }));
+    } catch { /* skip */ }
+
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "supplier_id", operator: "equals", value: selectedSupplier!.supplier_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date ? String(p.start_date).split("T")[0] : "",
+        end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedItemsForDetail([itemInfo]);
+    setItemMappings({ [itemKey]: mappingRows });
+    setItemPrices({ [itemKey]: priceRows });
+    setEditItemData(row);
+    setItemDetailOpen(true);
+  };
+
+  const handleItemDetailSave = async () => {
+    if (!selectedSupplier) return;
+    if (savingRef.current) return;
+    savingRef.current = true;
+    const isEditingExisting = !!editItemData;
+    setSaving(true);
+    try {
+      for (const item of selectedItemsForDetail) {
+        const itemKey = item.item_number || item.id;
+        const mappingRows = itemMappings[itemKey] || [];
+
+        if (isEditingExisting && editItemData?.id) {
+          // 기존 매핑 조회
+          let existingMaps: any[] = [];
+          try {
+            const existingMappings = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingMaps = existingMappings.data?.data?.data || existingMappings.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 매핑 upsert: 기존 것은 update, 새 것은 insert, 남은 것은 delete
+          const usedExistingIds = new Set<string>();
+          let firstMappingId: string | null = editItemData.id;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const existMap = existingMaps[mi];
+            if (existMap) {
+              // update
+              await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+                originalData: { id: existMap.id },
+                updatedData: {
+                  supplier_item_code: mappingRows[mi].supplier_item_code || "",
+                  supplier_item_name: mappingRows[mi].supplier_item_name || "",
+                },
+              });
+              usedExistingIds.add(existMap.id);
+              if (mi === 0) firstMappingId = existMap.id;
+            } else {
+              // insert
+              const mRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+                id: crypto.randomUUID(),
+                supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+                supplier_item_code: mappingRows[mi].supplier_item_code || "",
+                supplier_item_name: mappingRows[mi].supplier_item_name || "",
+              });
+              if (mi === 0 && !firstMappingId) firstMappingId = mRes.data?.data?.id || null;
+            }
+          }
+          // 초과분 delete
+          const toDeleteMaps = existingMaps.filter((m) => !usedExistingIds.has(m.id));
+          if (toDeleteMaps.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: toDeleteMaps.map((m: any) => ({ id: m.id })),
+            });
+          }
+
+          // 기존 단가 조회
+          let existingPriceRows: any[] = [];
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingPriceRows = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 단가 upsert
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          const usedPriceIds = new Set<string>();
+          for (let pi = 0; pi < priceRows.length; pi++) {
+            const price = priceRows[pi];
+            const priceData = {
+              mapping_id: firstMappingId || editItemData.id,
+              supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            };
+            const existPrice = existingPriceRows[pi];
+            if (existPrice) {
+              await apiClient.put(`/table-management/tables/${PRICE_TABLE}/edit`, {
+                originalData: { id: existPrice.id },
+                updatedData: priceData,
+              });
+              usedPriceIds.add(existPrice.id);
+            } else {
+              await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+                id: crypto.randomUUID(), ...priceData,
+              });
+            }
+          }
+          // 초과분 delete
+          const toDeletePrices = existingPriceRows.filter((p) => !usedPriceIds.has(p.id));
+          if (toDeletePrices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: toDeletePrices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } else {
+          if (!mappingRows.length || !mappingRows[0]?.supplier_item_code) {
+            const existingCheck = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 1,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            if ((existingCheck.data?.data?.data || existingCheck.data?.data?.rows || []).length > 0) {
+              toast.warning(`${item.item_name || itemKey} 품목은 이미 등록되어 있습니다.`);
+              continue;
+            }
+          }
+
+          let mappingId: string | null = null;
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+            supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+            supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+          });
+          mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              supplier_item_code: mappingRows[mi].supplier_item_code || "",
+              supplier_item_name: mappingRows[mi].supplier_item_name || "",
+            });
+          }
+
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedItemsForDetail.length}개 품목이 추가되었습니다.`);
+      setItemDetailOpen(false);
+      setEditItemData(null);
+      setItemCheckedIds(new Set());
+      const cid = selectedSupplierId;
+      setSelectedSupplierId(null);
+      setTimeout(() => setSelectedSupplierId(cid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+      savingRef.current = false;
+    }
+  };
+
+  // 품목 매핑 삭제
+  const handlePriceItemDelete = async () => {
+    if (priceCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${priceCheckedIds.length}개 품목 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      for (const mappingId of priceCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: priceCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${priceCheckedIds.length}개 품목 매핑이 삭제되었습니다.`);
+      setPriceCheckedIds([]);
+      const cid = selectedSupplierId;
+      setSelectedSupplierId(null);
+      setTimeout(() => setSelectedSupplierId(cid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // EDataTable 컬럼 정의 (공급업체 목록) — ts.visibleColumns 순서를 따름
+  const supplierColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      supplier_code: { width: "w-[120px]" },
+      supplier_name: { minWidth: "min-w-[140px]" },
+      division: {
+        width: "w-[80px]",
+        render: (val: any) =>
+          val ? (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
+              {val}
+            </Badge>
+          ) : null,
+      },
+      contact_person: { width: "w-[80px]" },
+      contact_phone: { width: "w-[120px]" },
+      email: { width: "w-[160px]" },
+      business_number: { width: "w-[120px]" },
+      address: { minWidth: "min-w-[150px]" },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val}
+            </Badge>
+          ) : null,
+      },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (suppliers.length === 0) return;
+    toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
+    try {
+      const allMappings: any[] = [];
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 5000, autoFilter: true,
+      });
+      const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemIds.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+            autoFilter: true,
+          });
+          for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+            itemMap[item.item_number] = item;
+          }
+        } catch { /* skip */ }
+      }
+      for (const m of mappings) {
+        const itemInfo = itemMap[m.item_id] || {};
+        allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
+      }
+
+      const rows: Record<string, any>[] = [];
+      for (const c of suppliers) {
+        const suppMappings = allMappings.filter((m) => m.supplier_id === c.supplier_code);
+        if (suppMappings.length === 0) {
+          rows.push({
+            공급업체코드: c.supplier_code, 공급업체명: c.supplier_name,
+            공급업체유형: getCategoryLabel("division", c.division),
+            담당자: c.contact_person, 전화번호: c.contact_phone,
+            사업자번호: c.business_number, 이메일: c.email,
+            상태: getCategoryLabel("status", c.status),
+            품목코드: "", 품명: "", 규격: "",
+            공급업체품번: "", 공급업체품명: "",
+            기준가: "", 할인유형: "", 할인값: "", 단가: "", 통화: "",
+          });
+        } else {
+          for (const m of suppMappings) {
+            rows.push({
+              공급업체코드: c.supplier_code, 공급업체명: c.supplier_name,
+              공급업체유형: getCategoryLabel("division", c.division),
+              담당자: c.contact_person, 전화번호: c.contact_phone,
+              사업자번호: c.business_number, 이메일: c.email,
+              상태: getCategoryLabel("status", c.status),
+              품목코드: m.item_id || "", 품명: m.item_name || "", 규격: m.item_spec || "",
+              공급업체품번: m.supplier_item_code || "", 공급업체품명: m.supplier_item_name || "",
+              기준가: m.base_price || "", 할인유형: m.discount_type || "", 할인값: m.discount_value || "",
+              단가: m.calculated_price || "", 통화: m.currency_code || "",
+            });
+          }
+        }
+      }
+      await exportToExcel(rows, "공급업체관리.xlsx", "거래처+품목");
+      toast.dismiss("excel-dl");
+      toast.success(`${rows.length}행 다운로드 완료`);
+    } catch (err) {
+      toast.dismiss("excel-dl");
+      toast.error("다운로드에 실패했습니다.");
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={SUPPLIER_TABLE}
+        filterId="c16-supplier"
+        onFilterChange={setSearchFilters}
+        dataCount={suppliers.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button
+            variant="outline" size="sm" className="h-8" disabled={excelDetecting}
+            onClick={async () => {
+              setExcelDetecting(true);
+              try {
+                const result = await autoDetectMultiTableConfig(SUPPLIER_TABLE);
+                if (result.success && result.data) {
+                  setExcelChainConfig(result.data);
+                  setExcelUploadOpen(true);
+                } else {
+                  toast.error(result.message || "테이블 구조 분석 실패");
+                }
+              } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+            }}
+          >
+            {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />}
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 공급업체 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">공급업체 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {supplierCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <label className="flex items-center gap-1.5 cursor-pointer mr-1">
+                    <input type="checkbox" checked={showInactive} onChange={(e) => setShowInactive(e.target.checked)} className="rounded" />
+                    <span className="text-[11px] text-muted-foreground">거래정지 포함</span>
+                  </label>
+                  <Button size="sm" onClick={openSupplierRegister}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedSupplierId} onClick={openSupplierEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedSupplierId} onClick={handleSupplierDelete}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={supplierColumns}
+                data={ts.groupData(showInactive ? suppliers : suppliers.filter((c) => c.status !== "거래정지"))}
+                rowKey={(row) => row.id}
+                loading={supplierLoading}
+                emptyMessage="등록된 공급업체가 없어요"
+                selectedId={selectedSupplierId}
+                onSelect={(id) => setSelectedSupplierId(id)}
+                onRowDoubleClick={(row) => { setSelectedSupplierId(row.id); openSupplierEdit(); }}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-supplier"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedSupplierId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">공급업체를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 공급업체를 선택하면 상세 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 탭 + 버튼 통합 헤더 */}
+                  <Tabs
+                    value={rightTab}
+                    onValueChange={(v) => setRightTab(v as "items" | "delivery")}
+                    className="flex flex-col flex-1 overflow-hidden gap-0"
+                  >
+                    <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                      <TabsList className="bg-transparent h-auto p-0 rounded-none">
+                        <TabsTrigger
+                          value="items"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <Package className="w-3.5 h-3.5" /> 공급업체별 품목정보
+                          {Object.keys(priceGroups).length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{Object.keys(priceGroups).length}</Badge>
+                          )}
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="delivery"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <MapPin className="w-3.5 h-3.5" /> 납품처 정보
+                          {deliveryItems.length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{deliveryItems.length}</Badge>
+                          )}
+                        </TabsTrigger>
+                      </TabsList>
+                      <div className="flex gap-1.5">
+                        {rightTab === "items" ? (
+                          <>
+                            <Button size="sm" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
+                              <Plus className="w-3.5 h-3.5" /> 품목 추가
+                            </Button>
+                            <Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0} onClick={handlePriceItemDelete}>
+                              <Trash2 className="w-3.5 h-3.5" /> 삭제
+                            </Button>
+                          </>
+                        ) : (
+                          <Button size="sm" variant="outline" onClick={openSupplierEdit}>
+                            <Pencil className="w-3.5 h-3.5 mr-1" /> 공급업체 수정에서 관리
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 품목정보 탭 */}
+                    <TabsContent value="items" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[40px] text-center px-2">
+                                <input
+                                  type="checkbox"
+                                  className="rounded"
+                                  checked={priceItems.length > 0 && priceCheckedIds.length === priceItems.length}
+                                  onChange={(e) => setPriceCheckedIds(e.target.checked ? priceItems.map((p) => p.id) : [])}
+                                />
+                              </TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                              <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품번</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품명</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                              <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                              <TableHead className="w-[60px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                              <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {priceLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.keys(priceGroups).length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 품목이 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.entries(priceGroups).map(([itemKey, group]) => {
+                              const isExpanded = expandedItems.has(itemKey);
+                              const m = group.master;
+                              const isChecked = priceCheckedIds.includes(m.id);
+                              return (
+                                <React.Fragment key={itemKey}>
+                                  {/* 마스터 행 */}
+                                  <TableRow
+                                    className={cn(
+                                      "cursor-pointer border-l-[3px] border-l-transparent h-[41px]",
+                                      isChecked && "bg-primary/5 border-l-primary"
+                                    )}
+                                    onClick={() => {
+                                      setExpandedItems((prev) => {
+                                        const next = new Set(prev);
+                                        if (next.has(itemKey)) next.delete(itemKey); else next.add(itemKey);
+                                        return next;
+                                      });
+                                    }}
+                                    onDoubleClick={() => openEditItem(m)}
+                                  >
+                                    <TableCell
+                                      className="text-center px-2"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        setPriceCheckedIds((prev) =>
+                                          prev.includes(m.id) ? prev.filter((id) => id !== m.id) : [...prev, m.id]
+                                        );
+                                      }}
+                                    >
+                                      <input type="checkbox" className="rounded" checked={isChecked} readOnly />
+                                    </TableCell>
+                                    <TableCell className="text-[13px] font-mono">
+                                      <div className="flex items-center gap-1">
+                                        {isExpanded
+                                          ? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                          : <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                        }
+                                        {m.item_number}
+                                      </div>
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.supplier_item_code}</TableCell>
+                                    <TableCell className="text-[13px]">{m.supplier_item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.base_price_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">
+                                      {m.base_price ? Number(m.base_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.discount_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">{m.discount_value ? Number(m.discount_value).toLocaleString() : ""}</TableCell>
+                                    <TableCell className="text-[13px] text-right font-semibold">
+                                      {m.calculated_price ? Number(m.calculated_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.currency_code}</TableCell>
+                                  </TableRow>
+
+                                  {/* 현재 단가 카드 (펼쳤을 때) */}
+                                  {isExpanded && (() => {
+                                    const cp = group.details.find((p) => p.is_current) || group.details[0];
+                                    if (!cp) return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="py-3 px-4 text-xs text-muted-foreground">등록된 단가가 없어요</TableCell>
+                                      </TableRow>
+                                    );
+                                    return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="px-4 py-3">
+                                          <div className="border border-primary/20 rounded-lg bg-card overflow-hidden">
+                                            {/* 카드 헤더 */}
+                                            <div className="flex items-center justify-between px-4 py-2 bg-primary/[0.04] border-b border-primary/10">
+                                              <div className="flex items-center gap-2">
+                                                <Coins className="w-3.5 h-3.5 text-primary" />
+                                                <span className="text-xs font-semibold">적용 단가</span>
+                                                <Badge variant="secondary" className="text-[9px] px-1.5 py-0 bg-primary/10 text-primary">현재</Badge>
+                                              </div>
+                                              {group.details.length > 1 && (
+                                                <span className="text-[10px] text-muted-foreground">전체 {group.details.length}건 중</span>
+                                              )}
+                                            </div>
+                                            {/* 카드 내용 */}
+                                            <div className="px-5 py-3.5 flex items-end gap-0 text-[13px]">
+                                              <div className="flex flex-col pr-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기간</span>
+                                                <span className="font-mono text-muted-foreground text-xs">
+                                                  {cp.start_date ? String(cp.start_date).split("T")[0] : "—"} ~ {cp.end_date ? String(cp.end_date).split("T")[0] : "—"}
+                                                </span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준유형</span>
+                                                <span>{cp.base_price_type_label || "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준가</span>
+                                                <span className="font-mono font-medium">{cp.base_price ? Number(cp.base_price).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인유형</span>
+                                                <span>{cp.discount_type_label && cp.discount_type_label !== "할인없음" ? cp.discount_type_label : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인값</span>
+                                                <span className="font-mono">{cp.discount_value ? Number(cp.discount_value).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">단수처리</span>
+                                                <span>
+                                                  {cp.rounding_unit_value
+                                                    ? (priceCategoryOptions["rounding_unit_value"]?.find((o) => o.code === cp.rounding_unit_value)?.label || cp.rounding_unit_value)
+                                                    : "-"}
+                                                </span>
+                                              </div>
+                                              <span className="text-primary/50 px-4 pb-0.5 text-lg">→</span>
+                                              <div className="flex flex-col pl-1">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">계산단가</span>
+                                                <span className="text-base font-bold font-mono text-foreground">
+                                                  {(cp.calculated_price || cp.unit_price) ? Number(cp.calculated_price || cp.unit_price).toLocaleString() : "-"}
+                                                  <span className="text-xs font-normal text-muted-foreground ml-1.5">{cp.currency_label}</span>
+                                                </span>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })()}
+                                </React.Fragment>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+
+                    {/* 납품처 탭 */}
+                    <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                              <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                              <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                              <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {deliveryLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 납품처가 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.map((d) => (
+                              <TableRow key={d.id} className="h-[41px]">
+                                <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                                <TableCell className="text-sm">{d.destination_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                                <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                                <TableCell className="text-[13px]">{d.phone}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                                <TableCell className="text-center">
+                                  {d.is_default && (
+                                    <Badge variant="default" className="text-[10px] px-1.5 py-0 h-5">메인</Badge>
+                                  )}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 모달: 공급업체 등록/수정 (3탭) ── */}
+      <Dialog open={supplierModalOpen} onOpenChange={(open) => {
+        if (!open && isConfirmOpenRef.current) return;
+        setSupplierModalOpen(open);
+        if (!open) {
+          setModalContactFormOpen(false);
+          setModalDeliveryFormOpen(false);
+          setModalContactForm({});
+          setModalDeliveryForm({});
+          setModalContactEditId(null);
+          setModalDeliveryEditId(null);
+          fetchSuppliers();
+          if (supplierForm.supplier_code) {
+            const cid = selectedSupplierId;
+            setSelectedSupplierId(null);
+            setTimeout(() => setSelectedSupplierId(cid), 50);
+          }
+        }
+      }}>
+        <DialogContent className="max-w-4xl h-[85vh] flex flex-col overflow-hidden p-0">
+          <DialogHeader className="px-6 pt-5 pb-0 shrink-0">
+            <DialogTitle>{supplierEditMode ? "공급업체 수정" : "공급업체 등록"}</DialogTitle>
+            <DialogDescription>
+              {supplierEditMode ? "공급업체 정보를 수정합니다." : "새 공급업체를 등록합니다."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <Tabs value={supplierModalTab} onValueChange={(v: any) => setSupplierModalTab(v)} className="flex flex-col flex-1 overflow-hidden">
+            <div className="shrink-0">
+              <TabsList className="bg-transparent w-full h-auto p-0 rounded-none gap-0">
+                <TabsTrigger value="basic" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  기본정보
+                </TabsTrigger>
+                <TabsTrigger value="contacts" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  담당자 관리
+                  {modalContacts.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalContacts.length}</span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="delivery" className="flex-1 rounded-none py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  납품처 관리
+                  {modalDeliveries.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalDeliveries.length}</span>
+                  )}
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            {/* 기본정보 탭 */}
+            <TabsContent value="basic" className="flex-1 overflow-y-auto mt-0">
+              <div className="px-6 py-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체 코드</Label>
+                    <Input
+                      value={supplierForm.supplier_code || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, supplier_code: e.target.value }))}
+                      placeholder={supplierEditMode ? "" : "자동 생성"}
+                      className={cn("h-9 font-mono", !supplierEditMode && supplierForm.supplier_code && "bg-muted")}
+                      readOnly={!supplierEditMode && !!supplierForm.supplier_code}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={supplierForm.supplier_name || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, supplier_name: e.target.value }))}
+                      placeholder="공급업체명"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체 유형</Label>
+                    <Select
+                      value={supplierForm.division || "__none__"}
+                      onValueChange={(v) => setSupplierForm((p) => ({ ...p, division: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="공급업체 유형" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["division"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+                    <Select
+                      value={supplierForm.status || "__none__"}
+                      onValueChange={(v) => setSupplierForm((p) => ({ ...p, status: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="상태" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체담당자</Label>
+                    <Input
+                      value={supplierForm.contact_person || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, contact_person: e.target.value }))}
+                      placeholder="공급업체담당자"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">전화번호</Label>
+                    <Input
+                      value={supplierForm.contact_phone || ""}
+                      onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                      placeholder="010-0000-0000"
+                      className={cn("h-9", formErrors.contact_phone && "border-destructive")}
+                    />
+                    {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">이메일</Label>
+                    <Input
+                      value={supplierForm.email || ""}
+                      onChange={(e) => handleFormChange("email", e.target.value)}
+                      placeholder="example@email.com"
+                      className={cn("h-9", formErrors.email && "border-destructive")}
+                    />
+                    {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">사업자번호</Label>
+                    <Input
+                      value={supplierForm.business_number || ""}
+                      onChange={(e) => handleFormChange("business_number", e.target.value)}
+                      placeholder="000-00-00000"
+                      className={cn("h-9", formErrors.business_number && "border-destructive")}
+                    />
+                    {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+                  </div>
+                  <div className="space-y-1.5 col-span-2">
+                    <Label className="text-sm">주소</Label>
+                    <Input
+                      value={supplierForm.address || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="주소"
+                      className="h-9"
+                    />
+                  </div>
+                </div>
+
+                {/* 세금유형 */}
+                <div className="mt-4 pt-4 border-t">
+                  <div className="flex items-center justify-between mb-2">
+                    <Label className="text-sm font-semibold flex items-center gap-1.5">
+                      <Coins className="w-3.5 h-3.5 text-primary" /> 세금유형
+                    </Label>
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => {
+                      setTaxTypeRows((prev) => [...prev, { _id: `tax_${Date.now()}_${Math.random()}`, tax_type_name: "", rate: "" }]);
+                    }}>
+                      <Plus className="h-3 w-3 mr-1" /> 추가
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    {taxTypeRows.map((row, idx) => (
+                      <div key={row._id} className="flex gap-2 items-center">
+                        <span className="text-xs text-muted-foreground w-4 shrink-0">{idx + 1}</span>
+                        <Select value={row.tax_type_name} onValueChange={(v) => {
+                          setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, tax_type_name: v } : r));
+                        }}>
+                          <SelectTrigger className="h-9 text-[13px] flex-1"><SelectValue placeholder="세금유형 선택" /></SelectTrigger>
+                          <SelectContent>
+                            {taxTypeOptions.map((o) => (
+                              <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <Input
+                          value={row.rate}
+                          onChange={(e) => {
+                            const v = e.target.value.replace(/[^\d.]/g, "");
+                            setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, rate: v } : r));
+                          }}
+                          placeholder="세율 %"
+                          className="h-9 text-[13px] w-[80px] text-right"
+                        />
+                        <span className="text-xs text-muted-foreground">%</span>
+                        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                          onClick={() => setTaxTypeRows((prev) => prev.filter((r) => r._id !== row._id))}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* 담당자 관리 탭 */}
+            <TabsContent value="contacts" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 담당자 목록 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    담당자 {modalContacts.length}명
+                  </span>
+                  <Button size="sm" onClick={() => {
+                    setModalContactForm({});
+                    setModalContactEditId(null);
+                    setModalContactFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 담당자 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalContactLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalContacts.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Users className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 담당자가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자명</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부서</TableHead>
+                          <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalContacts].sort((a, b) => {
+                          const aMain = a.is_main === "Y" || a.is_main === true ? 0 : 1;
+                          const bMain = b.is_main === "Y" || b.is_main === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((c) => (
+                          <TableRow key={c._localId || c.id} className="h-[41px]">
+                            <TableCell className="text-sm font-medium">{c.contact_name}</TableCell>
+                            <TableCell className="text-[13px]">{c.contact_phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.contact_email}</TableCell>
+                            <TableCell className="text-[13px]">{c.department}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (c.is_main === "Y" || c.is_main === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = c.is_main === "Y" || c.is_main === true;
+                                  if (isCurrentMain) {
+                                    // 메인 해제
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id) ? { ...item, is_main: "N" } : item
+                                    ));
+                                  } else {
+                                    // 메인 설정 — 기존 메인이 있으면 확인
+                                    const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== (c._localId || c.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id)
+                                        ? { ...item, is_main: "Y" }
+                                        : { ...item, is_main: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(c.is_main === "Y" || c.is_main === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalContactForm({ ...c });
+                                    setModalContactEditId(c._localId || c.id);
+                                    setModalContactFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalContactDelete(c._localId || c.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 담당자 폼 (인라인) */}
+                {modalContactFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalContactEditId ? "담당자 수정" : "담당자 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalContactForm.contact_name || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_name: e.target.value }))}
+                          placeholder="담당자명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalContactForm.contact_phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalContactForm((p) => ({ ...p, contact_phone: formatted }));
+                          }}
+                          placeholder="010-0000-0000"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">이메일</Label>
+                        <Input
+                          value={modalContactForm.contact_email || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_email: e.target.value }))}
+                          placeholder="example@email.com"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">부서</Label>
+                        <Input
+                          value={modalContactForm.department || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, department: e.target.value }))}
+                          placeholder="부서명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalContactForm.memo || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalContactForm.is_main === "Y" || modalContactForm.is_main === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== modalContactEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalContacts((prev) => prev.map((item) => ({ ...item, is_main: "N" })));
+                                }
+                                setModalContactForm((p) => ({ ...p, is_main: "Y" }));
+                              } else {
+                                setModalContactForm((p) => ({ ...p, is_main: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 담당자</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalContactFormOpen(false); setModalContactForm({}); setModalContactEditId(null); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalContactSave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalContactEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            {/* ── 탭3: 납품처 관리 ── */}
+            <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 납품처 목록 헤더 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    납품처 {modalDeliveries.length}개
+                  </span>
+                  <Button size="sm" onClick={async () => {
+                    const code = await generateDeliveryCode();
+                    setModalDeliveryForm({ destination_code: code });
+                    setModalDeliveryEditId(null);
+                    setModalDeliveryFormErrors({});
+                    setModalDeliveryFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalDeliveryLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalDeliveries.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <MapPin className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 납품처가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalDeliveries].sort((a, b) => {
+                          const aMain = a.is_default === "Y" || a.is_default === true ? 0 : 1;
+                          const bMain = b.is_default === "Y" || b.is_default === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((d) => (
+                          <TableRow key={d._localId || d.id || d.destination_code} className="h-[41px]">
+                            <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                            <TableCell className="text-sm">{d.destination_name}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                            <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                            <TableCell className="text-[13px]">{d.phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (d.is_default === "Y" || d.is_default === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = d.is_default === "Y" || d.is_default === true;
+                                  if (isCurrentMain) {
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id) ? { ...item, is_default: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== (d._localId || d.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id)
+                                        ? { ...item, is_default: "Y" }
+                                        : { ...item, is_default: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(d.is_default === "Y" || d.is_default === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalDeliveryForm({ ...d });
+                                    setModalDeliveryEditId(d._localId || d.id);
+                                    setModalDeliveryFormErrors({});
+                                    setModalDeliveryFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalDeliveryDelete(d._localId || d.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 납품처 폼 (인라인) */}
+                {modalDeliveryFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalDeliveryEditId ? "납품처 수정" : "납품처 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처코드</Label>
+                        <Input
+                          value={modalDeliveryForm.destination_code || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
+                          placeholder="자동 생성"
+                          className={cn("h-8 text-sm font-mono", modalDeliveryForm.destination_code && "bg-muted")}
+                          readOnly={!!modalDeliveryForm.destination_code && !modalDeliveryEditId}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalDeliveryForm.destination_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
+                          placeholder="납품처명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자</Label>
+                        <Input
+                          value={modalDeliveryForm.manager_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
+                          placeholder="담당자"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 col-span-2">
+                        <Label className="text-xs">주소</Label>
+                        <Input
+                          value={modalDeliveryForm.address || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, address: e.target.value }))}
+                          placeholder="주소"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalDeliveryForm.phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalDeliveryForm((p) => ({ ...p, phone: formatted }));
+                            const err = validateField("phone", formatted);
+                            setModalDeliveryFormErrors((p) => {
+                              const n = { ...p };
+                              if (err) n.phone = err; else delete n.phone;
+                              return n;
+                            });
+                          }}
+                          placeholder="010-0000-0000"
+                          className={cn("h-8 text-sm", modalDeliveryFormErrors.phone && "border-destructive")}
+                        />
+                        {modalDeliveryFormErrors.phone && <p className="text-xs text-destructive">{modalDeliveryFormErrors.phone}</p>}
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalDeliveryForm.memo || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== modalDeliveryEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalDeliveries((prev) => prev.map((item) => ({ ...item, is_default: "N" })));
+                                }
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "Y" }));
+                              } else {
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 납품처로 설정</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalDeliveryFormOpen(false); setModalDeliveryForm({}); setModalDeliveryEditId(null); setModalDeliveryFormErrors({}); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalDeliverySave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalDeliveryEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+          <div className="border-t px-6 py-3 flex items-center gap-2 shrink-0">
+            {!supplierEditMode && (
+              <label className="flex items-center gap-2 cursor-pointer mr-auto">
+                <input type="checkbox" checked={continuousInput} onChange={(e) => setContinuousInput(e.target.checked)} className="rounded" />
+                <span className="text-sm font-medium">연속입력</span>
+              </label>
+            )}
+            <Button variant="outline" onClick={() => setSupplierModalOpen(false)}>닫기</Button>
+            <Button onClick={handleSupplierSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {supplierEditMode ? "저장" : "등록"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 선택 (1단계) ── */}
+      <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>품목 선택</DialogTitle>
+            <DialogDescription>공급업체에 추가할 품목을 선택하세요. (전체: {itemTotalCount}건 / 대상: {itemSearchResults.length}건{itemCheckedIds.size > 0 ? ` / 선택: ${itemCheckedIds.size}건` : ""})</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              placeholder="품명/품목코드 검색"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+              className="h-9 flex-1"
+            />
+            <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+              {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+            </Button>
+          </div>
+          <div className="overflow-auto max-h-[350px] border rounded-lg">
+            <Table noWrapper>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted h-10">
+                  <TableHead className="w-[40px] text-center px-2">
+                    <input
+                      type="checkbox"
+                      className="rounded"
+                      checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                      onChange={(e) => {
+                        if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                        else setItemCheckedIds(new Set());
+                      }}
+                    />
+                  </TableHead>
+                  <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="min-w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                  <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {itemSearchResults.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                      검색 결과가 없어요
+                    </TableCell>
+                  </TableRow>
+                ) : itemSearchResults.map((item) => (
+                  <TableRow
+                    key={item.id}
+                    className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                    onClick={() => setItemCheckedIds((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                      return next;
+                    })}
+                  >
+                    <TableCell className="text-center px-2">
+                      <input type="checkbox" className="rounded" checked={itemCheckedIds.has(item.id)} readOnly />
+                    </TableCell>
+                    <TableCell className="text-[13px] font-mono">
+                      <span className="block truncate" title={item.item_number}>{item.item_number}</span>
+                    </TableCell>
+                    <TableCell className="text-sm">{item.item_name}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.size}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.material}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.unit}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <DialogFooter className="flex items-center justify-between w-full">
+            <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+              <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 상세 입력 (2단계) ── */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedSupplier?.supplier_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData
+                ? "거래처 품번/품명과 기간별 단가를 수정합니다."
+                : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2 flex-1 overflow-y-auto">
+            {selectedItemsForDetail.map((item, idx) => {
+              const itemKey = item.item_number || item.id;
+              const mappingRows = itemMappings[itemKey] || [];
+              const prices = itemPrices[itemKey] || [];
+
+              return (
+                <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
+                  {/* 품목 헤더 */}
+                  <div className="px-5 py-3 bg-muted/30 border-b">
+                    <div className="font-bold">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
+                  </div>
+
+                  <div className="flex gap-4 p-5 items-stretch">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Tag className="w-3.5 h-3.5 text-primary" /> 거래처 품번/품명 관리
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 품번 추가
+                        </Button>
+                      </div>
+                      <div className="border-2 border-foreground/20 rounded-lg bg-background p-3 space-y-2 min-h-[200px] max-h-[350px] overflow-y-auto flex-1">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : (
+                          <DndContext
+                            sensors={dndSensors}
+                            collisionDetection={closestCenter}
+                            onDragEnd={(e) => handleMappingDragEnd(itemKey, e)}
+                          >
+                            <SortableContext items={mappingRows.map((r) => r._id)} strategy={verticalListSortingStrategy}>
+                              {mappingRows.map((mRow, mIdx) => (
+                                <SortableMappingRow key={mRow._id} id={mRow._id}>
+                                  <span className="text-xs text-muted-foreground/50 font-mono w-4 shrink-0 text-center">{mIdx + 1}</span>
+                                  <Input
+                                    value={mRow.supplier_item_code}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "supplier_item_code", e.target.value)}
+                                    placeholder="거래처 품번"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Input
+                                    value={mRow.supplier_item_name}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "supplier_item_name", e.target.value)}
+                                    placeholder="거래처 품명"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Button
+                                    variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                                    onClick={() => removeMappingRow(itemKey, mRow._id)}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                </SortableMappingRow>
+                              ))}
+                            </SortableContext>
+                          </DndContext>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Coins className="w-3.5 h-3.5 text-primary" /> 기간별 단가 설정
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3 flex-1 overflow-y-auto max-h-[350px]">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border-2 border-foreground/20 rounded-lg bg-background overflow-hidden">
+                            <div
+                              className="flex items-center justify-between px-4 py-2.5 cursor-pointer hover:bg-muted/50 transition-colors"
+                              onClick={() => setCollapsedPriceCards((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(price._id)) next.delete(price._id); else next.add(price._id);
+                                return next;
+                              })}
+                            >
+                              <div className="flex items-center gap-2">
+                                {collapsedPriceCards.has(price._id)
+                                  ? <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                                  : <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                                }
+                                <span className="text-[13px] font-semibold text-muted-foreground">단가 {pIdx + 1}</span>
+                                {collapsedPriceCards.has(price._id) && price.calculated_price && (
+                                  <span className="text-xs text-muted-foreground ml-2">
+                                    {price.start_date || "—"} ~ {price.end_date || "—"} · <span className="font-mono font-bold text-foreground">{Number(price.calculated_price).toLocaleString()}</span> {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                  </span>
+                                )}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                {prices.length > 1 && (
+                                  <Button
+                                    variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
+                                    onClick={(e) => { e.stopPropagation(); removePriceRow(itemKey, price._id); }}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                )}
+                              </div>
+                            </div>
+                            {!collapsedPriceCards.has(price._id) && <div className="px-4 pb-4 space-y-2.5">
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">시작일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.start_date}
+                                  onChange={(e) => {
+                                    const v = e.target.value;
+                                    updatePriceRow(itemKey, price._id, "start_date", v);
+                                    if (price.end_date && v > price.end_date) {
+                                      updatePriceRow(itemKey, price._id, "end_date", v);
+                                    }
+                                  }}
+                                  max={price.end_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <span className="text-xs text-muted-foreground mt-4">~</span>
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">종료일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.end_date}
+                                  onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                  min={price.start_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <div className="w-[80px]">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">&nbsp;</Label>
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="통화" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "base_price", raw);
+                                }}
+                                className="h-9 text-[13px] text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-9 text-[13px] text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-1.5 pt-2 border-t">
+                              <span className="text-[13px] text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-base font-mono">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                              {price.calculated_price && price.currency_code && (
+                                <span className="text-[13px] text-muted-foreground">
+                                  {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                </span>
+                              )}
+                            </div>
+                            </div>}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal
+          open={excelUploadOpen}
+          onOpenChange={(open) => {
+            setExcelUploadOpen(open);
+            if (!open) setExcelChainConfig(null);
+          }}
+          config={excelChainConfig}
+          onSuccess={() => {
+            fetchSuppliers();
+            const cid = selectedSupplierId;
+            setSelectedSupplierId(null);
+            setTimeout(() => setSelectedSupplierId(cid), 50);
+          }}
+        />
+      )}
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/quality/inspection/page.tsx b/frontend/app/(main)/COMPANY_29/quality/inspection/page.tsx
new file mode 100644
index 00000000..cacd9d02
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/quality/inspection/page.tsx
@@ -0,0 +1,1703 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Plus,
+  Trash2,
+  Save,
+  Loader2,
+  Pencil,
+  ClipboardCheck,
+  AlertTriangle,
+  Wrench,
+  Search,
+  Inbox,
+  Settings2,
+} from "lucide-react";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+/* ───── 테이블명 ───── */
+const INSPECTION_TABLE = "inspection_standard";
+
+const INSPECTION_COLUMNS = [
+  { key: "inspection_code", label: "검사코드" },
+  { key: "inspection_type", label: "검사유형" },
+  { key: "inspection_criteria", label: "검사기준" },
+  { key: "inspection_item", label: "검사항목" },
+  { key: "inspection_method", label: "검사방법" },
+  { key: "judgment_criteria", label: "판단기준" },
+  { key: "unit", label: "단위" },
+  { key: "apply_type", label: "적용구분" },
+  { key: "manager", label: "관리자" },
+];
+const DEFECT_TABLE = "defect_standard_mng";
+const EQUIPMENT_TABLE = "inspection_equipment_mng";
+
+/* ───── 카테고리 flatten ───── */
+const flattenCategories = (vals: any[]): { code: string; label: string }[] => {
+  const result: { code: string; label: string }[] = [];
+  for (const v of vals) {
+    result.push({ code: v.valueCode, label: v.valueLabel });
+    if (v.children?.length) result.push(...flattenCategories(v.children));
+  }
+  return result;
+};
+
+export default function InspectionManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-inspection", INSPECTION_TABLE, INSPECTION_COLUMNS);
+
+  const [activeTab, setActiveTab] = useState("inspection");
+
+  /* ───── 검사기준 ───── */
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspLoading, setInspLoading] = useState(false);
+  const [inspCount, setInspCount] = useState(0);
+  const [inspChecked, setInspChecked] = useState<string[]>([]);
+  const [inspModalOpen, setInspModalOpen] = useState(false);
+  const [inspEditMode, setInspEditMode] = useState(false);
+  const [inspForm, setInspForm] = useState<Record<string, any>>({});
+  const [inspSaving, setInspSaving] = useState(false);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  /* ───── 불량관리 ───── */
+  const [defects, setDefects] = useState<any[]>([]);
+  const [defLoading, setDefLoading] = useState(false);
+  const [defCount, setDefCount] = useState(0);
+  const [defChecked, setDefChecked] = useState<string[]>([]);
+  const [defModalOpen, setDefModalOpen] = useState(false);
+  const [defEditMode, setDefEditMode] = useState(false);
+  const [defForm, setDefForm] = useState<Record<string, any>>({});
+  const [defSaving, setDefSaving] = useState(false);
+  const [defKeyword, setDefKeyword] = useState("");
+
+  /* ───── 검사장비 ───── */
+  const [equipments, setEquipments] = useState<any[]>([]);
+  const [eqLoading, setEqLoading] = useState(false);
+  const [eqCount, setEqCount] = useState(0);
+  const [eqChecked, setEqChecked] = useState<string[]>([]);
+  const [eqModalOpen, setEqModalOpen] = useState(false);
+  const [eqEditMode, setEqEditMode] = useState(false);
+  const [eqForm, setEqForm] = useState<Record<string, any>>({});
+  const [eqSaving, setEqSaving] = useState(false);
+  const [eqKeyword, setEqKeyword] = useState("");
+
+  /* ───── 채번 ───── */
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  /* ───── 카테고리 옵션 ───── */
+  const [catOptions, setCatOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [userOptions, setUserOptions] = useState<{ code: string; label: string }[]>([]);
+
+  /* ═══════════════════ 카테고리 로드 ═══════════════════ */
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const catList = [
+        { table: INSPECTION_TABLE, col: "inspection_type" },
+        { table: INSPECTION_TABLE, col: "apply_type" },
+        { table: INSPECTION_TABLE, col: "inspection_method" },
+        { table: INSPECTION_TABLE, col: "judgment_criteria" },
+        { table: INSPECTION_TABLE, col: "unit" },
+        { table: DEFECT_TABLE, col: "defect_type" },
+        { table: DEFECT_TABLE, col: "severity" },
+        { table: DEFECT_TABLE, col: "inspection_type" },
+        { table: DEFECT_TABLE, col: "is_active" },
+        { table: EQUIPMENT_TABLE, col: "equipment_type" },
+        { table: EQUIPMENT_TABLE, col: "equipment_status" },
+      ];
+      await Promise.all(
+        catList.map(async ({ table, col }) => {
+          try {
+            const res = await apiClient.get(`/table-categories/${table}/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              optMap[`${table}.${col}`] = flattenCategories(res.data.data);
+            }
+          } catch {
+            /* skip */
+          }
+        }),
+      );
+      setCatOptions(optMap);
+      // 사용자 목록 로드
+      try {
+        const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
+          page: 1,
+          size: 500,
+          autoFilter: true,
+        });
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        setUserOptions(
+          users.map((u: any) => ({
+            code: u.user_id || u.id,
+            label: `${u.user_name || u.name || u.user_id}${u.dept_name ? ` (${u.dept_name})` : ""}`,
+          })),
+        );
+      } catch {
+        /* skip */
+      }
+    };
+    load();
+  }, []);
+
+  const getCatLabel = (table: string, col: string, code: string) => {
+    if (!code) return "";
+    const opts = catOptions[`${table}.${col}`];
+    if (!opts) return code;
+    // 쉼표 구분 다중 코드 지원
+    if (code.includes(",")) {
+      return code
+        .split(",")
+        .filter(Boolean)
+        .map((c) => opts.find((o) => o.code === c)?.label || c)
+        .join(", ");
+    }
+    return opts.find((o) => o.code === code)?.label || code;
+  };
+
+  const inspTableColumns = useMemo<EDataTableColumn[]>(() => {
+    return ts.visibleColumns.map((col) => {
+      const base: EDataTableColumn = { key: col.key, label: col.label };
+      if (["inspection_type", "inspection_method", "judgment_criteria", "unit", "apply_type"].includes(col.key)) {
+        base.render = (v: any, row: any) => getCatLabel(INSPECTION_TABLE, col.key, row[col.key]);
+      }
+      return base;
+    });
+  }, [ts.visibleColumns, catOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  // 다중값 컬럼 (쉼표 구분 저장) — 서버 equals 대신 contains 사용
+  const MULTI_VALUE_COLUMNS = ["inspection_type"];
+
+  const fetchInspections = useCallback(async () => {
+    setInspLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({
+        columnName: f.columnName,
+        operator: MULTI_VALUE_COLUMNS.includes(f.columnName) ? "contains" : f.operator,
+        value: f.value,
+      }));
+      const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setInspections(rows);
+      setInspCount(rows.length);
+    } catch {
+      toast.error("검사기준 조회에 실패했어요");
+    } finally {
+      setInspLoading(false);
+    }
+  }, [searchFilters]);
+
+  const fetchDefects = useCallback(async () => {
+    setDefLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DEFECT_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setDefects(rows);
+      setDefCount(rows.length);
+    } catch {
+      toast.error("불량관리 조회에 실패했어요");
+    } finally {
+      setDefLoading(false);
+    }
+  }, []);
+
+  const fetchEquipments = useCallback(async () => {
+    setEqLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setEquipments(rows);
+      setEqCount(rows.length);
+    } catch {
+      toast.error("검사장비 조회에 실패했어요");
+    } finally {
+      setEqLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchInspections();
+  }, [fetchInspections]);
+  useEffect(() => {
+    fetchDefects();
+    fetchEquipments();
+  }, []);
+
+  /* ───── 클라이언트 필터 ───── */
+  const filteredDefects = defKeyword.trim()
+    ? defects.filter(
+        (r) =>
+          (r.defect_name || "").toLowerCase().includes(defKeyword.toLowerCase()) ||
+          (r.defect_type || "").toLowerCase().includes(defKeyword.toLowerCase()),
+      )
+    : defects;
+
+  const filteredEquipments = eqKeyword.trim()
+    ? equipments.filter(
+        (r) =>
+          (r.equipment_name || "").toLowerCase().includes(eqKeyword.toLowerCase()) ||
+          (r.model_name || "").toLowerCase().includes(eqKeyword.toLowerCase()),
+      )
+    : equipments;
+
+  /* ═══════════════════ 검사기준 CRUD ═══════════════════ */
+  const openInspCreate = async () => {
+    setInspForm({});
+    setInspEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setInspModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${INSPECTION_TABLE}/inspection_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+  const openInspEdit = (row: any) => {
+    setInspForm({ ...row });
+    setInspEditMode(true);
+    setInspModalOpen(true);
+  };
+  const saveInspection = async () => {
+    if (!numberingRuleId && !inspForm.inspection_code) {
+      toast.error("검사코드는 필수예요");
+      return;
+    }
+    if (!inspForm.inspection_type) {
+      toast.error("유형을 1개 이상 선택해주세요");
+      return;
+    }
+    if (!inspForm.inspection_criteria) {
+      toast.error("검사기준은 필수예요");
+      return;
+    }
+    if (!inspForm.inspection_item) {
+      toast.error("검사항목은 필수예요");
+      return;
+    }
+    if (!inspForm.judgment_criteria) {
+      toast.error("판단기준은 필수예요");
+      return;
+    }
+    setInspSaving(true);
+    try {
+      let finalCode = inspForm.inspection_code || "";
+      if (!inspEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setInspSaving(false);
+          return;
+        }
+      }
+      if (inspEditMode) {
+        await apiClient.put(`/table-management/tables/${INSPECTION_TABLE}/edit`, {
+          originalData: { id: inspForm.id },
+          updatedData: inspForm,
+        });
+        toast.success("검사기준을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          ...inspForm,
+          inspection_code: finalCode,
+        });
+        toast.success("검사기준을 등록했어요");
+      }
+      setInspModalOpen(false);
+      fetchInspections();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setInspSaving(false);
+    }
+  };
+  const deleteInspections = async () => {
+    if (inspChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("검사기준 삭제", {
+      description: `선택한 ${inspChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${INSPECTION_TABLE}/delete`, {
+        data: inspChecked.map((id) => ({ id })),
+      });
+      toast.success(`${inspChecked.length}건을 삭제했어요`);
+      setInspChecked([]);
+      fetchInspections();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ 불량관리 CRUD ═══════════════════ */
+  const openDefCreate = async () => {
+    setDefForm({});
+    setDefEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setDefModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DEFECT_TABLE}/defect_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+  const openDefEdit = (row: any) => {
+    setDefForm({ ...row });
+    setDefEditMode(true);
+    setDefModalOpen(true);
+  };
+  const saveDefect = async () => {
+    if (!numberingRuleId && !defForm.defect_code) {
+      toast.error("불량코드는 필수예요");
+      return;
+    }
+    if (!defForm.defect_type) {
+      toast.error("불량유형은 필수예요");
+      return;
+    }
+    if (!defForm.defect_name) {
+      toast.error("불량명은 필수예요");
+      return;
+    }
+    if (!defForm.severity) {
+      toast.error("심각도는 필수예요");
+      return;
+    }
+    if (!defForm.defect_content) {
+      toast.error("불량내용은 필수예요");
+      return;
+    }
+    if (!defForm.inspection_type) {
+      toast.error("검사유형을 1개 이상 선택해주세요");
+      return;
+    }
+    setDefSaving(true);
+    try {
+      let finalCode = defForm.defect_code || "";
+      if (!defEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setDefSaving(false);
+          return;
+        }
+      }
+      if (defEditMode) {
+        await apiClient.put(`/table-management/tables/${DEFECT_TABLE}/edit`, {
+          originalData: { id: defForm.id },
+          updatedData: defForm,
+        });
+        toast.success("불량유형을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${DEFECT_TABLE}/add`, { id: crypto.randomUUID(), ...defForm, defect_code: finalCode });
+        toast.success("불량유형을 등록했어요");
+      }
+      setDefModalOpen(false);
+      fetchDefects();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setDefSaving(false);
+    }
+  };
+  const deleteDefects = async () => {
+    if (defChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("불량유형 삭제", {
+      description: `선택한 ${defChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DEFECT_TABLE}/delete`, {
+        data: defChecked.map((id) => ({ id })),
+      });
+      toast.success(`${defChecked.length}건을 삭제했어요`);
+      setDefChecked([]);
+      fetchDefects();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ 검사장비 CRUD ═══════════════════ */
+  const openEqCreate = async () => {
+    setEqForm({
+      calibration_period: "12",
+      equipment_status: "NORMAL",
+    });
+    setEqEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setEqModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${EQUIPMENT_TABLE}/equipment_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      } else {
+        // 채번 규칙 없으면 기존 수동 채번 fallback
+        const maxNum =
+          equipments
+            .map((e: any) => e.equipment_code || "")
+            .filter((c: string) => /^EQP-\d+$/.test(c))
+            .map((c: string) => parseInt(c.replace("EQP-", ""), 10))
+            .sort((a: number, b: number) => b - a)[0] || 0;
+        setEqForm((p) => ({ ...p, equipment_code: `EQP-${String(maxNum + 1).padStart(3, "0")}` }));
+      }
+    } catch {
+      // 채번 규칙 조회 실패 시 기존 수동 채번 fallback
+      const maxNum =
+        equipments
+          .map((e: any) => e.equipment_code || "")
+          .filter((c: string) => /^EQP-\d+$/.test(c))
+          .map((c: string) => parseInt(c.replace("EQP-", ""), 10))
+          .sort((a: number, b: number) => b - a)[0] || 0;
+      setEqForm((p) => ({ ...p, equipment_code: `EQP-${String(maxNum + 1).padStart(3, "0")}` }));
+    }
+  };
+  const openEqEdit = (row: any) => {
+    setEqForm({ ...row });
+    setEqEditMode(true);
+    setEqModalOpen(true);
+  };
+  const saveEquipment = async () => {
+    if (!numberingRuleId && !eqForm.equipment_code) {
+      toast.error("장비코드는 필수예요");
+      return;
+    }
+    if (!eqForm.equipment_name) {
+      toast.error("장비명은 필수예요");
+      return;
+    }
+    if (!eqForm.equipment_type) {
+      toast.error("장비유형은 필수예요");
+      return;
+    }
+    setEqSaving(true);
+    try {
+      let finalCode = eqForm.equipment_code || "";
+      if (!eqEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setEqSaving(false);
+          return;
+        }
+      }
+      if (eqEditMode) {
+        await apiClient.put(`/table-management/tables/${EQUIPMENT_TABLE}/edit`, {
+          originalData: { id: eqForm.id },
+          updatedData: eqForm,
+        });
+        toast.success("검사장비를 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/add`, { id: crypto.randomUUID(), ...eqForm, equipment_code: finalCode });
+        toast.success("검사장비를 등록했어요");
+      }
+      setEqModalOpen(false);
+      fetchEquipments();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setEqSaving(false);
+    }
+  };
+  const deleteEquipments = async () => {
+    if (eqChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("검사장비 삭제", {
+      description: `선택한 ${eqChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${EQUIPMENT_TABLE}/delete`, {
+        data: eqChecked.map((id) => ({ id })),
+      });
+      toast.success(`${eqChecked.length}건을 삭제했어요`);
+      setEqChecked([]);
+      fetchEquipments();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="bg-card rounded-lg border">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <div className="border-b px-3">
+            <TabsList className="h-auto gap-0 bg-transparent p-0">
+              <TabsTrigger
+                value="inspection"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <ClipboardCheck className="mr-2 h-4 w-4" />
+                검사기준
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {inspCount}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="defect"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <AlertTriangle className="mr-2 h-4 w-4" />
+                불량관리
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {defCount}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="equipment"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <Wrench className="mr-2 h-4 w-4" />
+                검사장비
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {eqCount}
+                </Badge>
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* ──── 검사기준 탭 ──── */}
+          <TabsContent value="inspection" className="mt-0 p-3">
+            <div className="mb-3">
+              <DynamicSearchFilter
+                tableName={INSPECTION_TABLE}
+                filterId="c16-inspection"
+                onFilterChange={setSearchFilters}
+                externalFilterConfig={ts.filterConfig}
+                dataCount={inspCount}
+                extraActions={
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" onClick={openInspCreate}>
+                      <Plus className="mr-1 h-4 w-4" />
+                      등록
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        const sel = inspections.find((r) => inspChecked.includes(r.id));
+                        if (sel) openInspEdit(sel);
+                        else toast.error("수정할 항목을 선택해주세요");
+                      }}
+                    >
+                      <Pencil className="mr-1 h-4 w-4" />
+                      수정
+                    </Button>
+                    <Button size="sm" variant="destructive" onClick={deleteInspections}>
+                      <Trash2 className="mr-1 h-4 w-4" />
+                      삭제
+                    </Button>
+                    <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                      <Settings2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                }
+              />
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <EDataTable
+                columns={inspTableColumns}
+                data={ts.groupData(inspections)}
+                loading={inspLoading}
+                emptyMessage="등록된 검사기준이 없어요"
+                showCheckbox={true}
+                checkedIds={inspChecked}
+                onCheckedChange={setInspChecked}
+                onRowDoubleClick={(row) => openInspEdit(row)}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-inspection-main"
+              />
+            </div>
+          </TabsContent>
+
+          {/* ──── 불량관리 탭 ──── */}
+          <TabsContent value="defect" className="mt-0 p-3">
+            <div className="mb-3 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="text-muted-foreground absolute top-2 left-2.5 h-3.5 w-3.5" />
+                  <Input
+                    className="h-8 w-56 pl-8 text-sm"
+                    placeholder="불량명 검색..."
+                    value={defKeyword}
+                    onChange={(e) => setDefKeyword(e.target.value)}
+                  />
+                </div>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">
+                  {filteredDefects.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openDefCreate}>
+                  <Plus className="mr-1 h-4 w-4" />
+                  등록
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const sel = defects.find((r) => defChecked.includes(r.id));
+                    if (sel) openDefEdit(sel);
+                    else toast.error("수정할 항목을 선택해주세요");
+                  }}
+                >
+                  <Pencil className="mr-1 h-4 w-4" />
+                  수정
+                </Button>
+                <Button size="sm" variant="destructive" onClick={deleteDefects}>
+                  <Trash2 className="mr-1 h-4 w-4" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={filteredDefects.length > 0 && defChecked.length === filteredDefects.length}
+                        onCheckedChange={(v) => setDefChecked(v ? filteredDefects.map((r) => r.id) : [])}
+                      />
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량코드
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량내용
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      심각도
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      검사유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      적용대상
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      사용여부
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      등록일
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      관리자
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      비고
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {defLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={12} className="py-8 text-center">
+                        <Loader2 className="text-muted-foreground mx-auto h-5 w-5 animate-spin" />
+                      </TableCell>
+                    </TableRow>
+                  ) : filteredDefects.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={12} className="text-muted-foreground py-10 text-center">
+                        <Inbox className="mx-auto mb-2 h-8 w-8 opacity-40" />
+                        <p className="text-sm">등록된 불량유형이 없어요</p>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredDefects.map((row) => {
+                      const severityLabel = getCatLabel(DEFECT_TABLE, "severity", row.severity);
+                      const severityColor =
+                        severityLabel === "치명적"
+                          ? "destructive"
+                          : severityLabel === "심각"
+                            ? "destructive"
+                            : severityLabel === "보통"
+                              ? "secondary"
+                              : "outline";
+                      return (
+                        <TableRow
+                          key={row.id}
+                          className={cn("cursor-pointer", defChecked.includes(row.id) && "bg-primary/5")}
+                          onClick={() =>
+                            setDefChecked((prev) =>
+                              prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id],
+                            )
+                          }
+                          onDoubleClick={() => openDefEdit(row)}
+                        >
+                          <TableCell onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                              checked={defChecked.includes(row.id)}
+                              onCheckedChange={(v) =>
+                                setDefChecked((prev) => (v ? [...prev, row.id] : prev.filter((id) => id !== row.id)))
+                              }
+                            />
+                          </TableCell>
+                          <TableCell className="font-semibold">{row.defect_code || "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant="secondary" className="text-[10px]">
+                              {getCatLabel(DEFECT_TABLE, "defect_type", row.defect_type)}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>{row.defect_name || "-"}</TableCell>
+                          <TableCell className="text-muted-foreground max-w-[200px] truncate">
+                            {row.defect_content || "-"}
+                          </TableCell>
+                          <TableCell>
+                            <Badge variant={severityColor as any} className="text-[10px]">
+                              {severityLabel || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-wrap gap-1">
+                              {row.inspection_type
+                                ? row.inspection_type
+                                    .split(",")
+                                    .filter(Boolean)
+                                    .map((c: string) => (
+                                      <Badge key={c} variant="outline" className="text-[10px]">
+                                        {getCatLabel(DEFECT_TABLE, "inspection_type", c)}
+                                      </Badge>
+                                    ))
+                                : "-"}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-wrap gap-1">
+                              {row.apply_target
+                                ? row.apply_target
+                                    .split(",")
+                                    .filter(Boolean)
+                                    .map((t: string) => (
+                                      <Badge key={t} variant="outline" className="text-[10px]">
+                                        {t}
+                                      </Badge>
+                                    ))
+                                : "-"}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <Badge
+                              variant={
+                                getCatLabel(DEFECT_TABLE, "is_active", row.is_active) === "사용"
+                                  ? "default"
+                                  : "secondary"
+                              }
+                              className="text-[10px]"
+                            >
+                              {getCatLabel(DEFECT_TABLE, "is_active", row.is_active) || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-muted-foreground">
+                            {row.reg_date || (row.created_date ? row.created_date.slice(0, 10) : "-")}
+                          </TableCell>
+                          <TableCell>{row.manager_id || "-"}</TableCell>
+                          <TableCell className="text-muted-foreground">{row.remarks || "-"}</TableCell>
+                        </TableRow>
+                      );
+                    })
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+
+          {/* ──── 검사장비 탭 ──── */}
+          <TabsContent value="equipment" className="mt-0 p-3">
+            <div className="mb-3 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="text-muted-foreground absolute top-2 left-2.5 h-3.5 w-3.5" />
+                  <Input
+                    className="h-8 w-56 pl-8 text-sm"
+                    placeholder="장비명 검색..."
+                    value={eqKeyword}
+                    onChange={(e) => setEqKeyword(e.target.value)}
+                  />
+                </div>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">
+                  {filteredEquipments.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openEqCreate}>
+                  <Plus className="mr-1 h-4 w-4" />
+                  등록
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const sel = equipments.find((r) => eqChecked.includes(r.id));
+                    if (sel) openEqEdit(sel);
+                    else toast.error("수정할 항목을 선택해주세요");
+                  }}
+                >
+                  <Pencil className="mr-1 h-4 w-4" />
+                  수정
+                </Button>
+                <Button size="sm" variant="destructive" onClick={deleteEquipments}>
+                  <Trash2 className="mr-1 h-4 w-4" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={filteredEquipments.length > 0 && eqChecked.length === filteredEquipments.length}
+                        onCheckedChange={(v) => setEqChecked(v ? filteredEquipments.map((r) => r.id) : [])}
+                      />
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비코드
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      모델명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      제조사
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      설치장소
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      최근교정일
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      교정주기(개월)
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비상태
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      담당자
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {eqLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={11} className="py-8 text-center">
+                        <Loader2 className="text-muted-foreground mx-auto h-5 w-5 animate-spin" />
+                      </TableCell>
+                    </TableRow>
+                  ) : filteredEquipments.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={11} className="text-muted-foreground py-10 text-center">
+                        <Inbox className="mx-auto mb-2 h-8 w-8 opacity-40" />
+                        <p className="text-sm">등록된 검사장비가 없어요</p>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredEquipments.map((row) => {
+                      const statusLabel = getCatLabel(EQUIPMENT_TABLE, "equipment_status", row.equipment_status);
+                      const statusColor =
+                        statusLabel === "정상" ? "default" : statusLabel === "폐기" ? "destructive" : "secondary";
+                      return (
+                        <TableRow
+                          key={row.id}
+                          className={cn("cursor-pointer", eqChecked.includes(row.id) && "bg-primary/5")}
+                          onClick={() =>
+                            setEqChecked((prev) =>
+                              prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id],
+                            )
+                          }
+                          onDoubleClick={() => openEqEdit(row)}
+                        >
+                          <TableCell onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                              checked={eqChecked.includes(row.id)}
+                              onCheckedChange={(v) =>
+                                setEqChecked((prev) => (v ? [...prev, row.id] : prev.filter((id) => id !== row.id)))
+                              }
+                            />
+                          </TableCell>
+                          <TableCell className="text-primary font-semibold">{row.equipment_code || "-"}</TableCell>
+                          <TableCell>{row.equipment_name || "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant="secondary" className="text-[10px]">
+                              {getCatLabel(EQUIPMENT_TABLE, "equipment_type", row.equipment_type) || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>{row.model_name || "-"}</TableCell>
+                          <TableCell>{row.manufacturer || "-"}</TableCell>
+                          <TableCell>{row.installation_location || "-"}</TableCell>
+                          <TableCell>{row.last_calibration_date || "-"}</TableCell>
+                          <TableCell>{row.calibration_period ? `${row.calibration_period}개월` : "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant={statusColor as any} className="text-[10px]">
+                              {statusLabel || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>
+                            {userOptions.find((u) => u.code === row.manager_id)?.label || row.manager_id || "-"}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* ═══════════════════ 검사기준 모달 ═══════════════════ */}
+      <Dialog open={inspModalOpen} onOpenChange={setInspModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[640px]">
+          <DialogHeader>
+            <DialogTitle>{inspEditMode ? "검사기준 수정" : "검사기준 등록"}</DialogTitle>
+            <DialogDescription>검사기준 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            {/* 검사코드 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사코드 <span className="text-destructive">*</span>
+              </Label>
+              {!inspEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : inspEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={inspForm.inspection_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={inspForm.inspection_code || ""}
+                  onChange={(e) => setInspForm((p) => ({ ...p, inspection_code: e.target.value }))}
+                  placeholder="검사코드 입력"
+                />
+              )}
+            </div>
+            {/* 유형 (다중선택) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                유형 <span className="text-destructive">*</span> (다중선택)
+              </Label>
+              <div className="flex flex-wrap gap-3 pt-1">
+                {(catOptions[`${INSPECTION_TABLE}.inspection_type`] || []).map((o) => {
+                  const types: string[] = inspForm.inspection_type
+                    ? inspForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  const checked = types.includes(o.code);
+                  return (
+                    <div key={o.code} className="flex items-center gap-1.5">
+                      <Checkbox
+                        checked={checked}
+                        onCheckedChange={(v) => {
+                          const next = v ? [...types, o.code] : types.filter((t) => t !== o.code);
+                          setInspForm((p) => ({ ...p, inspection_type: next.join(",") }));
+                        }}
+                      />
+                      <Label className="cursor-pointer text-sm">{o.label}</Label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            {/* 검사기준 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사기준 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={inspForm.inspection_criteria || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, inspection_criteria: e.target.value }))}
+                placeholder="검사기준 입력"
+              />
+            </div>
+            {/* 기준상세 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">기준상세</Label>
+              <Input
+                className="h-9"
+                value={inspForm.criteria_detail || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, criteria_detail: e.target.value }))}
+                placeholder="기준상세 입력"
+              />
+            </div>
+            {/* 검사항목 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사항목 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={inspForm.inspection_item || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, inspection_item: e.target.value }))}
+                placeholder="검사항목 입력"
+              />
+            </div>
+            {/* 검사방법 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">검사방법</Label>
+              <Select
+                value={inspForm.inspection_method || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, inspection_method: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.inspection_method`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 판단기준 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                판단기준 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={inspForm.judgment_criteria || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, judgment_criteria: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.judgment_criteria`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 단위 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">단위</Label>
+              <Select
+                value={inspForm.unit || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, unit: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.unit`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 적용구분 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">적용구분</Label>
+              <Select
+                value={inspForm.apply_type || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, apply_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.apply_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">관리자</Label>
+              <Select
+                value={inspForm.manager || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, manager: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 비고 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                value={inspForm.remark || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, remark: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setInspModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveInspection} disabled={inspSaving}>
+              {inspSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 불량관리 모달 ═══════════════════ */}
+      <Dialog open={defModalOpen} onOpenChange={setDefModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[640px]">
+          <DialogHeader>
+            <DialogTitle>{defEditMode ? "불량유형 수정" : "불량유형 등록"}</DialogTitle>
+            <DialogDescription>불량유형 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            {/* 불량코드 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량코드 <span className="text-destructive">*</span>
+              </Label>
+              {!defEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : defEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={defForm.defect_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={defForm.defect_code || ""}
+                  onChange={(e) => setDefForm((p) => ({ ...p, defect_code: e.target.value }))}
+                  placeholder="불량코드 입력"
+                />
+              )}
+            </div>
+            {/* 불량유형 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={defForm.defect_type || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, defect_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.defect_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 불량명 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={defForm.defect_name || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, defect_name: e.target.value }))}
+                placeholder="불량명 입력"
+              />
+            </div>
+            {/* 심각도 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                심각도 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={defForm.severity || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, severity: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.severity`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 불량내용 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량내용 <span className="text-destructive">*</span>
+              </Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={defForm.defect_content || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, defect_content: e.target.value }))}
+                placeholder="불량 상세 내용 및 정의를 입력하세요"
+                rows={3}
+              />
+            </div>
+            {/* 검사유형 (다중선택) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사유형 <span className="text-destructive">*</span> (다중선택)
+              </Label>
+              <div className="flex flex-wrap gap-3 rounded-md border p-3">
+                {(catOptions[`${DEFECT_TABLE}.inspection_type`] || []).map((o) => {
+                  const types: string[] = defForm.inspection_type
+                    ? defForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  const checked = types.includes(o.code);
+                  return (
+                    <div key={o.code} className="flex items-center gap-1.5">
+                      <Checkbox
+                        checked={checked}
+                        onCheckedChange={(v) => {
+                          const next = v ? [...types, o.code] : types.filter((t) => t !== o.code);
+                          setDefForm((p) => ({ ...p, inspection_type: next.join(","), apply_target: "" }));
+                        }}
+                      />
+                      <Label className="cursor-pointer text-sm">{o.label}</Label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            {/* 적용대상 (다중선택, 검사유형별 동적) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">적용대상 (다중선택)</Label>
+              <div className="min-h-[60px] rounded-md border p-3">
+                {(() => {
+                  const selectedTypes = defForm.inspection_type
+                    ? defForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  if (selectedTypes.length === 0)
+                    return <p className="text-muted-foreground text-xs">검사유형을 먼저 선택하세요</p>;
+                  const typeTargetMap: Record<string, string[]> = {};
+                  const defInspOpts = catOptions[`${DEFECT_TABLE}.inspection_type`] || [];
+                  for (const code of selectedTypes) {
+                    const label = defInspOpts.find((o) => o.code === code)?.label || "";
+                    if (label.includes("수입"))
+                      typeTargetMap[label] = ["구매입고", "외주입고", "반품입고", "무상입고", "기타입고"];
+                    else if (label.includes("공정"))
+                      typeTargetMap[label] = ["가공", "조립", "도장", "열처리", "표면처리", "용접"];
+                    else if (label.includes("출하"))
+                      typeTargetMap[label] = ["국내출하", "수출출하", "반품출하", "샘플출하"];
+                    else if (label.includes("최종")) typeTargetMap[label] = ["완제품", "반제품", "부품"];
+                  }
+                  const targets: string[] = defForm.apply_target ? defForm.apply_target.split(",").filter(Boolean) : [];
+                  return Object.entries(typeTargetMap).map(([typeName, opts]) => (
+                    <div key={typeName} className="mb-2 last:mb-0">
+                      <p className="mb-2 border-b pb-1 text-xs font-semibold">{typeName}</p>
+                      <div className="flex flex-wrap gap-3">
+                        {opts.map((t) => (
+                          <div key={t} className="flex items-center gap-1.5">
+                            <Checkbox
+                              checked={targets.includes(t)}
+                              onCheckedChange={(v) => {
+                                const next = v ? [...targets, t] : targets.filter((x) => x !== t);
+                                setDefForm((p) => ({ ...p, apply_target: next.join(",") }));
+                              }}
+                            />
+                            <Label className="cursor-pointer text-sm">{t}</Label>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ));
+                })()}
+              </div>
+            </div>
+            {/* 사용여부 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">사용여부</Label>
+              <Select
+                value={defForm.is_active || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.is_active`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">관리자</Label>
+              <Select
+                value={defForm.manager_id || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, manager_id: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 비고 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={defForm.remarks || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, remarks: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDefModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveDefect} disabled={defSaving}>
+              {defSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 검사장비 모달 ═══════════════════ */}
+      <Dialog open={eqModalOpen} onOpenChange={setEqModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[720px]">
+          <DialogHeader>
+            <DialogTitle>{eqEditMode ? "장비 수정" : "장비 등록"}</DialogTitle>
+            <DialogDescription>검사장비 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-3 gap-4">
+            {/* Row 1: 장비코드, 장비명, 장비유형 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비코드 <span className="text-destructive">*</span>
+              </Label>
+              {!eqEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : eqEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={eqForm.equipment_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={eqForm.equipment_code || ""}
+                  onChange={(e) => setEqForm((p) => ({ ...p, equipment_code: e.target.value }))}
+                  placeholder="장비코드"
+                />
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={eqForm.equipment_name || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, equipment_name: e.target.value }))}
+                placeholder="장비명 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={eqForm.equipment_type || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, equipment_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="장비유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">장비유형 선택</SelectItem>
+                  {(catOptions[`${EQUIPMENT_TABLE}.equipment_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* Row 2: 모델명, 제조사, 시리얼번호 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">모델명</Label>
+              <Input
+                className="h-9"
+                value={eqForm.model_name || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, model_name: e.target.value }))}
+                placeholder="모델명 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">제조사</Label>
+              <Input
+                className="h-9"
+                value={eqForm.manufacturer || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, manufacturer: e.target.value }))}
+                placeholder="제조사 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">시리얼번호</Label>
+              <Input
+                className="h-9"
+                value={eqForm.serial_number || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, serial_number: e.target.value }))}
+                placeholder="시리얼번호 입력"
+              />
+            </div>
+            {/* Row 3: 설치장소, 최근교정일, 교정주기 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">설치장소</Label>
+              <Input
+                className="h-9"
+                value={eqForm.installation_location || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, installation_location: e.target.value }))}
+                placeholder="설치장소 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">최근교정일</Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={eqForm.last_calibration_date || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, last_calibration_date: e.target.value }))}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">교정주기 (개월)</Label>
+              <Input
+                type="number"
+                className="h-9"
+                value={eqForm.calibration_period || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, calibration_period: e.target.value }))}
+                placeholder="12"
+              />
+            </div>
+            {/* Row 4: 장비상태, 담당자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">장비상태</Label>
+              <Select
+                value={eqForm.equipment_status || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, equipment_status: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="장비상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">장비상태 선택</SelectItem>
+                  {(catOptions[`${EQUIPMENT_TABLE}.equipment_status`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">담당자</Label>
+              <Select
+                value={eqForm.manager_id || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, manager_id: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="담당자 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">담당자 선택</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div />
+            {/* Row 5: 비고 (full width) */}
+            <div className="col-span-3 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={eqForm.remarks || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, remarks: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEqModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveEquipment} disabled={eqSaving}>
+              {eqSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/quality/item-inspection/page.tsx b/frontend/app/(main)/COMPANY_29/quality/item-inspection/page.tsx
new file mode 100644
index 00000000..2c0e1338
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/quality/item-inspection/page.tsx
@@ -0,0 +1,733 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, Pencil, Inbox, Settings2, Search, ChevronDown,
+} from "lucide-react";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const TABLE_NAME = "item_inspection_info";
+
+const GRID_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "inspection_type", label: "검사유형" },
+  { key: "item_count", label: "항목수" },
+  { key: "is_active", label: "사용여부" },
+];
+const ITEM_TABLE = "item_info";
+const INSPECTION_TABLE = "inspection_standard";
+
+const INSPECTION_TYPES = [
+  { key: "incoming_inspection", label: "수입검사", matchLabels: ["수입검사", "입고검사", "수입", "입고"] },
+  { key: "outgoing_inspection", label: "출하검사", matchLabels: ["출하검사", "출고검사", "출하", "출고"] },
+  { key: "process_inspection", label: "공정검사", matchLabels: ["공정검사", "공정"] },
+  { key: "final_inspection", label: "최종검사", matchLabels: ["최종검사", "최종", "완제품검사"] },
+] as const;
+
+type InspectionRow = {
+  id: string;
+  inspection_standard_id: string;
+  inspection_detail: string;
+  inspection_method: string;
+  apply_process: string;
+  acceptance_criteria: string;
+  is_required: boolean;
+};
+
+export default function ItemInspectionInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-item-inspection", TABLE_NAME, GRID_COLUMNS);
+
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [form, setForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  /* FK 옵션 */
+  const [itemOptions, setItemOptions] = useState<{ code: string; name: string; item_type: string; unit: string }[]>([]);
+  const [inspOptions, setInspOptions] = useState<{ code: string; label: string; detail: string; method: string; types: string[] }[]>([]);
+  const [inspTypeCatOptions, setInspTypeCatOptions] = useState<{ code: string; label: string }[]>([]);
+  const [userOptions, setUserOptions] = useState<{ code: string; label: string }[]>([]);
+
+  /* 검사유형별 검사항목 rows */
+  const [inspectionRows, setInspectionRows] = useState<Record<string, InspectionRow[]>>({});
+  const [collapsedTypes, setCollapsedTypes] = useState<Record<string, boolean>>({});
+
+  /* 품목 선택 모달 */
+  const [itemModalOpen, setItemModalOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [filteredItems, setFilteredItems] = useState<typeof itemOptions>([]);
+
+  /* ═══════════════════ FK 옵션 로드 ═══════════════════ */
+  useEffect(() => {
+    const loadOptions = async () => {
+      try {
+        const [itemRes, inspRes, userRes] = await Promise.all([
+          apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, { page: 1, size: 500, autoFilter: true }),
+          apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, { page: 1, size: 500, autoFilter: true }),
+          apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true }),
+        ]);
+        const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+        setItemOptions(items.map((r: any) => ({
+          code: r.item_number || r.item_code || "",
+          name: r.item_name || "",
+          item_type: r.type || r.item_type || "",
+          unit: r.unit || "",
+        })));
+
+        const insps = inspRes.data?.data?.data || inspRes.data?.data?.rows || [];
+        setInspOptions(insps.map((r: any) => ({
+          code: r.id,
+          label: r.inspection_criteria || r.inspection_standard || r.id,
+          detail: r.inspection_item || r.inspection_criteria || "",
+          method: r.inspection_method || "",
+          types: r.inspection_type ? r.inspection_type.split(",").filter(Boolean) : [],
+        })));
+
+        // 검사유형 카테고리 값 로드 (코드→라벨 매핑용)
+        try {
+          const catRes = await apiClient.get(`/table-categories/${INSPECTION_TABLE}/inspection_type/values`);
+          const flatCats: { code: string; label: string }[] = [];
+          const flatten = (arr: any[]) => { for (const v of arr) { flatCats.push({ code: v.valueCode, label: v.valueLabel }); if (v.children?.length) flatten(v.children); } };
+          if (catRes.data?.data?.length) flatten(catRes.data.data);
+          setInspTypeCatOptions(flatCats);
+        } catch { /* skip */ }
+
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        setUserOptions(users.map((u: any) => ({
+          code: u.user_id || u.id,
+          label: `${u.user_name || u.name || u.user_id}${u.dept_name ? ` (${u.dept_name})` : ""}`,
+        })));
+      } catch { /* skip */ }
+    };
+    loadOptions();
+  }, []);
+
+  /* ═══════════════════ 품목 선택 모달 ═══════════════════ */
+  const openItemModal = () => {
+    setItemSearchKeyword("");
+    setFilteredItems(itemOptions);
+    setItemModalOpen(true);
+  };
+
+  const handleItemSearch = () => {
+    const kw = itemSearchKeyword.trim().toLowerCase();
+    if (!kw) { setFilteredItems(itemOptions); return; }
+    setFilteredItems(itemOptions.filter(o =>
+      o.code.toLowerCase().includes(kw) || o.name.toLowerCase().includes(kw)
+    ));
+  };
+
+  const selectItem = (item: typeof itemOptions[0]) => {
+    setForm(p => ({ ...p, item_code: item.code, item_name: item.name }));
+    setItemModalOpen(false);
+  };
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setData(rows);
+      setTotalCount(rows.length);
+    } catch {
+      toast.error("품목검사정보 조회에 실패했어요");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => { fetchData(); }, [fetchData]);
+
+  // item_code별 그룹핑
+  const groupedData = useMemo(() => {
+    const map: Record<string, { item_code: string; item_name: string; is_active: string; types: string[]; rows: any[] }> = {};
+    for (const row of data) {
+      const key = row.item_code || row.id;
+      if (!map[key]) {
+        map[key] = { item_code: row.item_code, item_name: row.item_name, is_active: row.is_active || "", types: [], rows: [] };
+      }
+      map[key].rows.push(row);
+      if (row.inspection_type && !map[key].types.includes(row.inspection_type)) {
+        map[key].types.push(row.inspection_type);
+      }
+    }
+    return Object.values(map);
+  }, [data]);
+
+  // 검사기준 ID → 라벨 resolve
+  const resolveInspLabel = useCallback((id: string) => {
+    const opt = inspOptions.find(o => o.code === id);
+    return opt?.label || id || "-";
+  }, [inspOptions]);
+
+  /* ═══════════════════ CRUD ═══════════════════ */
+  const openCreate = () => { setForm({}); setEditMode(false); setInspectionRows({}); setCollapsedTypes({}); setModalOpen(true); };
+  const openEdit = async (row: any) => {
+    setForm({ ...row });
+    setEditMode(true);
+    setCollapsedTypes({});
+
+    // 같은 item_code의 모든 검사항목 행을 조회하여 유형별로 분류
+    try {
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_code", operator: "equals", value: row.item_code }] },
+        autoFilter: true,
+      });
+      const allRows = res.data?.data?.data || res.data?.data?.rows || [];
+      const rowMap: Record<string, InspectionRow[]> = {};
+      const typeFlags: Record<string, boolean> = {};
+
+      for (const r of allRows) {
+        const inspType = r.inspection_type || "";
+        // 카테고리 코드/라벨로 INSPECTION_TYPES 키 매칭
+        const matched = INSPECTION_TYPES.find(t =>
+          t.matchLabels.some(ml => inspType.includes(ml)) ||
+          inspTypeCatOptions.some(cat => inspType.includes(cat.code) && t.matchLabels.some(ml => cat.label.includes(ml)))
+        );
+        const typeKey = matched?.key || "";
+        if (!typeKey) continue;
+        typeFlags[typeKey] = true;
+        if (!rowMap[typeKey]) rowMap[typeKey] = [];
+        rowMap[typeKey].push({
+          id: r.id,
+          inspection_standard_id: r.inspection_standard_id || "",
+          inspection_detail: r.inspection_item_name || r.inspection_standard || "",
+          inspection_method: r.inspection_method || "",
+          apply_process: "",
+          acceptance_criteria: r.pass_criteria || "",
+          is_required: r.is_required === "true" || r.is_required === true,
+        });
+      }
+
+      setInspectionRows(rowMap);
+      setForm(p => ({ ...p, ...typeFlags }));
+    } catch {
+      setInspectionRows({});
+    }
+    setModalOpen(true);
+  };
+
+  /* ═══════════════════ 검사항목 행 관리 ═══════════════════ */
+  const addInspRow = (typeKey: string) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: [...(prev[typeKey] || []), {
+        id: crypto.randomUUID(),
+        inspection_standard_id: "",
+        inspection_detail: "",
+        inspection_method: "",
+        apply_process: "",
+        acceptance_criteria: "",
+        is_required: false,
+      }],
+    }));
+  };
+
+  const removeInspRow = (typeKey: string, rowId: string) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: (prev[typeKey] || []).filter(r => r.id !== rowId),
+    }));
+  };
+
+  const updateInspRow = (typeKey: string, rowId: string, field: string, value: any) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: (prev[typeKey] || []).map(r => {
+        if (r.id !== rowId) return r;
+        if (field === "inspection_standard_id") {
+          const opt = inspOptions.find(o => o.code === value);
+          return { ...r, inspection_standard_id: value, inspection_detail: opt?.detail || "", inspection_method: opt?.method || "" };
+        }
+        return { ...r, [field]: value };
+      }),
+    }));
+  };
+
+  /** 검사유형 키에 매칭되는 검사기준만 필터링 */
+  const getFilteredInspOptions = (typeKey: string) => {
+    const typeDef = INSPECTION_TYPES.find(t => t.key === typeKey);
+    if (!typeDef) return inspOptions;
+    // matchLabels와 카테고리 라벨을 비교하여 해당 카테고리 코드를 찾음
+    const matchCodes = inspTypeCatOptions
+      .filter(cat => typeDef.matchLabels.some(ml => cat.label.includes(ml)))
+      .map(cat => cat.code);
+    if (matchCodes.length === 0) return inspOptions;
+    return inspOptions.filter(opt => opt.types.some(t => matchCodes.includes(t)));
+  };
+
+  const toggleCollapse = (typeKey: string) => {
+    setCollapsedTypes(prev => ({ ...prev, [typeKey]: !prev[typeKey] }));
+  };
+
+  const handleSave = async () => {
+    if (!form.item_code) { toast.error("품목코드는 필수 입력이에요"); return; }
+    setSaving(true);
+    try {
+      // 기존 행 삭제 (수정 모드)
+      if (editMode) {
+        const existRes = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_code", operator: "equals", value: form.item_code }] },
+          autoFilter: true,
+        });
+        const existing = existRes.data?.data?.data || existRes.data?.data?.rows || [];
+        if (existing.length > 0) {
+          await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+            data: existing.map((r: any) => ({ id: r.id })),
+          });
+        }
+      }
+
+      // 검사유형별 항목을 개별 행으로 INSERT
+      const enabledTypes = INSPECTION_TYPES.filter(t => !!form[t.key]);
+      const rows: any[] = [];
+      for (const t of enabledTypes) {
+        const typeLabel = t.label;
+        const typeRows = inspectionRows[t.key] || [];
+        if (typeRows.length === 0) {
+          // 유형만 체크하고 항목 없는 경우에도 1행 생성
+          rows.push({
+            id: crypto.randomUUID(),
+            item_code: form.item_code,
+            item_name: form.item_name,
+            inspection_type: typeLabel,
+            is_active: form.is_active || "사용",
+            manager_id: form.manager_id || "",
+            memo: form.remarks || "",
+          });
+        } else {
+          for (const r of typeRows) {
+            rows.push({
+              id: crypto.randomUUID(),
+              item_code: form.item_code,
+              item_name: form.item_name,
+              inspection_type: typeLabel,
+              inspection_standard_id: r.inspection_standard_id || "",
+              inspection_item_name: r.inspection_detail || "",
+              inspection_method: r.inspection_method || "",
+              pass_criteria: r.acceptance_criteria || "",
+              is_required: r.is_required ? "true" : "false",
+              is_active: form.is_active || "사용",
+              manager_id: form.manager_id || "",
+              memo: form.remarks || "",
+            });
+          }
+        }
+      }
+
+      for (const row of rows) {
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, row);
+      }
+
+      toast.success(editMode ? "품목검사정보를 수정했어요" : "품목검사정보를 등록했어요");
+      setModalOpen(false);
+      fetchData();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setSaving(false); }
+  };
+
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("품목검사정보 삭제", {
+      description: `선택한 ${checkedIds.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+        data: checkedIds.map(id => ({ id })),
+      });
+      toast.success(`${checkedIds.length}건을 삭제했어요`);
+      setCheckedIds([]);
+      fetchData();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="rounded-lg border bg-card">
+        <div className="px-3 py-2.5 border-b bg-muted/50">
+          <DynamicSearchFilter
+            tableName={TABLE_NAME}
+            filterId="c16-item-inspection"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={ts.filterConfig}
+            dataCount={totalCount}
+            extraActions={
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = data.find(r => checkedIds.includes(r.id));
+                  if (sel) {
+                    const group = groupedData.find(g => g.item_code === sel.item_code);
+                    openEdit(group?.rows[0] || sel);
+                  } else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={handleDelete}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+            }
+          />
+        </div>
+        <div className="p-3 overflow-auto">
+          {loading ? (
+            <div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
+          ) : groupedData.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+              <Inbox className="h-10 w-10 mb-2 opacity-30" />
+              <p className="text-sm">등록된 품목검사정보가 없어요</p>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted">
+                  <TableHead className="w-10" />
+                  <TableHead className="w-10"><Checkbox checked={groupedData.length > 0 && checkedIds.length === data.length} onCheckedChange={(v) => setCheckedIds(v ? data.map(r => r.id) : [])} /></TableHead>
+                  {ts.visibleColumns.map((col) => (
+                    <TableHead key={col.key} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground" style={ts.thStyle(col.key)}>
+                      {col.label}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {ts.groupData(groupedData).map((group) => {
+                  if ((group as any)._isGroupSummary || (group as any)._isGroupHeader) return null;
+                  const isExpanded = expandedItems.has(group.item_code);
+                  const groupIds = group.rows.map((r: any) => r.id);
+                  const allChecked = groupIds.every((id: string) => checkedIds.includes(id));
+                  const renderCell = (key: string) => {
+                    switch (key) {
+                      case "item_code": return <TableCell key={key} className="text-sm font-medium text-primary">{group.item_code}</TableCell>;
+                      case "item_name": return <TableCell key={key} className="text-sm">{group.item_name}</TableCell>;
+                      case "inspection_type": return (
+                        <TableCell key={key}>
+                          <div className="flex gap-1 flex-wrap">
+                            {group.types.map((t: string) => <Badge key={t} variant="secondary" className="text-[10px]">{t}</Badge>)}
+                          </div>
+                        </TableCell>
+                      );
+                      case "item_count": return <TableCell key={key} className="text-sm text-center">{group.rows.filter((r: any) => r.inspection_standard_id).length}</TableCell>;
+                      case "is_active": return (
+                        <TableCell key={key}>
+                          <Badge variant={group.is_active === "사용" || group.is_active === "true" ? "default" : "secondary"} className="text-[10px]">
+                            {group.is_active === "사용" || group.is_active === "true" ? "사용" : "미사용"}
+                          </Badge>
+                        </TableCell>
+                      );
+                      default: return <TableCell key={key}>{(group as any)[key] ?? ""}</TableCell>;
+                    }
+                  };
+                  return (
+                    <React.Fragment key={group.item_code}>
+                      <TableRow
+                        className={cn("cursor-pointer border-l-2 border-l-transparent", allChecked && "border-l-primary bg-primary/5")}
+                        onClick={() => setExpandedItems(prev => { const next = new Set(prev); if (next.has(group.item_code)) next.delete(group.item_code); else next.add(group.item_code); return next; })}
+                        onDoubleClick={() => openEdit(group.rows[0])}
+                      >
+                        <TableCell className="text-center p-2">
+                          <ChevronDown className={cn("w-4 h-4 transition-transform text-muted-foreground", !isExpanded && "-rotate-90")} />
+                        </TableCell>
+                        <TableCell className="text-center p-2" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => allChecked ? prev.filter(id => !groupIds.includes(id)) : [...new Set([...prev, ...groupIds])]); }}>
+                          <Checkbox checked={allChecked} onCheckedChange={() => {}} />
+                        </TableCell>
+                        {ts.visibleColumns.map((col) => renderCell(col.key))}
+                      </TableRow>
+                      {isExpanded && group.rows.filter((r: any) => r.inspection_standard_id).map((row: any) => (
+                        <TableRow key={row.id} className="bg-muted/30 text-xs">
+                          <TableCell />
+                          <TableCell />
+                          <TableCell className="pl-6 text-muted-foreground">{row.inspection_type}</TableCell>
+                          <TableCell>{resolveInspLabel(row.inspection_standard_id)}</TableCell>
+                          <TableCell>{row.inspection_item_name || "-"}</TableCell>
+                          <TableCell>{row.inspection_method || "-"}</TableCell>
+                          <TableCell>{row.pass_criteria || "-"}</TableCell>
+                        </TableRow>
+                      ))}
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+          <div className="mt-2 text-xs text-muted-foreground">전체 {groupedData.length}건 (품목 기준)</div>
+        </div>
+      </div>
+
+      {/* ═══════════════════ 등록/수정 모달 (품목선택 뷰 포함) ═══════════════════ */}
+      <Dialog open={modalOpen} onOpenChange={(open) => { if (!open) setItemModalOpen(false); setModalOpen(open); }}>
+        <DialogContent className={cn("max-w-[95vw] max-h-[85vh] overflow-y-auto", itemModalOpen ? "sm:max-w-xl" : "sm:max-w-4xl")}>
+          {itemModalOpen ? (
+            <>
+              <DialogHeader>
+                <DialogTitle>품목 선택</DialogTitle>
+                <DialogDescription>품목코드 또는 품목명으로 검색</DialogDescription>
+              </DialogHeader>
+              <div className="flex gap-2">
+                <Input
+                  className="h-9 flex-1"
+                  placeholder="품목코드 또는 품목명으로 검색"
+                  value={itemSearchKeyword}
+                  onChange={(e) => setItemSearchKeyword(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === "Enter") handleItemSearch(); }}
+                />
+                <Button size="sm" className="h-9" onClick={handleItemSearch}>
+                  <Search className="w-4 h-4 mr-1" />검색
+                </Button>
+              </div>
+              <div className="border rounded-lg overflow-auto max-h-[50vh]">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="text-[11px] font-bold">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold">품목명</TableHead>
+                      <TableHead className="text-[11px] font-bold">품목유형</TableHead>
+                      <TableHead className="text-[11px] font-bold">단위</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredItems.length === 0 ? (
+                      <TableRow><TableCell colSpan={4} className="text-center py-8 text-muted-foreground text-sm">검색 결과가 없어요</TableCell></TableRow>
+                    ) : filteredItems.map((item) => (
+                      <TableRow
+                        key={item.code}
+                        className="cursor-pointer hover:bg-primary/5"
+                        onClick={() => selectItem(item)}
+                      >
+                        <TableCell className="text-sm">{item.code}</TableCell>
+                        <TableCell className="text-sm">{item.name}</TableCell>
+                        <TableCell className="text-sm">{item.item_type}</TableCell>
+                        <TableCell className="text-sm">{item.unit}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setItemModalOpen(false)}>취소</Button>
+              </DialogFooter>
+            </>
+          ) : (
+            <>
+              <DialogHeader>
+                <DialogTitle>{editMode ? "품목검사정보 수정" : "품목검사정보 등록"}</DialogTitle>
+                <DialogDescription className="sr-only">품목검사정보를 등록합니다</DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4">
+                {/* 품목 정보 */}
+                <div className="space-y-3">
+                  <h4 className="text-sm font-semibold flex items-center gap-1.5">📦 품목 정보</h4>
+                  <div className="flex items-end gap-2">
+                    <div className="space-y-1.5 flex-1">
+                      <Label className="text-xs font-semibold text-muted-foreground">품목코드 <span className="text-destructive">*</span></Label>
+                      <Input className="h-9 bg-muted" value={form.item_code || ""} readOnly placeholder="품목코드" />
+                    </div>
+                    <div className="space-y-1.5 flex-1">
+                      <Label className="text-xs font-semibold text-muted-foreground">품목명 <span className="text-destructive">*</span></Label>
+                      <Input className="h-9 bg-muted" value={form.item_name || ""} readOnly placeholder="품목명" />
+                    </div>
+                    <Button type="button" variant="outline" size="sm" className="h-9 px-3 shrink-0" onClick={openItemModal}>
+                      <Search className="w-4 h-4 mr-1" />품목선택
+                    </Button>
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-1.5">
+                      <Label className="text-xs font-semibold text-muted-foreground">사용여부</Label>
+                      <Select value={form.is_active === false ? "N" : "Y"} onValueChange={(v) => setForm(p => ({ ...p, is_active: v === "Y" }))}>
+                        <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">사용</SelectItem>
+                          <SelectItem value="N">미사용</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-xs font-semibold text-muted-foreground">관리자</Label>
+                      <Select value={form.manager || ""} onValueChange={(v) => setForm(p => ({ ...p, manager: v }))}>
+                        <SelectTrigger className="h-9"><SelectValue placeholder="관리자 선택" /></SelectTrigger>
+                        <SelectContent>
+                          {userOptions.map(o => (
+                            <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold text-muted-foreground">비고</Label>
+                    <textarea
+                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                      value={form.remarks || ""}
+                      onChange={(e) => setForm(p => ({ ...p, remarks: e.target.value }))}
+                      placeholder="비고 사항"
+                    />
+                  </div>
+                </div>
+                {/* 검사유형 선택 */}
+                <div className="space-y-3">
+                  <h4 className="text-sm font-semibold flex items-center gap-1.5">✅ 검사유형 선택</h4>
+                  <div className="flex flex-wrap gap-4">
+                    {INSPECTION_TYPES.map(({ key, label }) => (
+                      <div key={key} className="flex items-center gap-1.5">
+                        <Checkbox
+                          checked={!!form[key]}
+                          onCheckedChange={(v) => setForm(p => ({ ...p, [key]: !!v }))}
+                        />
+                        <Label className="text-sm cursor-pointer">{label}</Label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                {/* 검사유형별 검사항목 설정 */}
+                {INSPECTION_TYPES.filter(t => !!form[t.key]).map(({ key, label }) => (
+                  <div key={key} className="space-y-2">
+                    <button
+                      type="button"
+                      className="w-full flex items-center gap-2 py-2 px-3 rounded-md border bg-muted/50 hover:bg-muted text-left"
+                      onClick={() => toggleCollapse(key)}
+                    >
+                      <Badge variant="default" className="text-xs">{label}</Badge>
+                      <span className="text-sm font-medium">검사항목 설정</span>
+                      <ChevronDown className={cn("w-4 h-4 ml-auto transition-transform", collapsedTypes[key] && "-rotate-90")} />
+                    </button>
+                    {!collapsedTypes[key] && (
+                      <div className="space-y-2 pl-1">
+                        <div className="flex items-center justify-between">
+                          <span className="text-xs font-semibold text-muted-foreground">검사항목 목록</span>
+                          <Button type="button" size="sm" variant="outline" className="h-7 text-xs" onClick={() => addInspRow(key)}>
+                            <Plus className="w-3 h-3 mr-1" />항목추가
+                          </Button>
+                        </div>
+                        <div className="border rounded-lg overflow-hidden">
+                          <Table>
+                            <TableHeader>
+                              <TableRow className="bg-muted/50 hover:bg-muted/50">
+                                <TableHead className="text-[10px] font-bold w-[170px]">검사기준 선택</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[130px]">검사기준 상세</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[90px]">검사방법</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[100px]">적용공정</TableHead>
+                                <TableHead className="text-[10px] font-bold">합격기준 (판단기준별)</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[40px]">필수</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[36px]" />
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                              {(!inspectionRows[key] || inspectionRows[key].length === 0) ? (
+                                <TableRow><TableCell colSpan={7} className="text-center py-4 text-xs text-muted-foreground">항목추가 버튼으로 검사항목을 추가하세요</TableCell></TableRow>
+                              ) : inspectionRows[key].map((row) => (
+                                <TableRow key={row.id}>
+                                  <TableCell className="p-1">
+                                    <Select value={row.inspection_standard_id || ""} onValueChange={(v) => updateInspRow(key, row.id, "inspection_standard_id", v)}>
+                                      <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="검사기준 선택" /></SelectTrigger>
+                                      <SelectContent>
+                                        {getFilteredInspOptions(key).map(o => (
+                                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input className="h-8 text-xs bg-muted" value={row.inspection_detail} readOnly placeholder="검사기준 상세" />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input className="h-8 text-xs bg-muted" value={row.inspection_method} readOnly placeholder="선택" />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Select value={row.apply_process || ""} onValueChange={(v) => updateInspRow(key, row.id, "apply_process", v)}>
+                                      <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="공정 선택" /></SelectTrigger>
+                                      <SelectContent>
+                                        <SelectItem value="incoming">입고</SelectItem>
+                                        <SelectItem value="process">공정</SelectItem>
+                                        <SelectItem value="outgoing">출고</SelectItem>
+                                        <SelectItem value="final">최종</SelectItem>
+                                      </SelectContent>
+                                    </Select>
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input
+                                      className="h-8 text-xs"
+                                      value={row.acceptance_criteria}
+                                      onChange={(e) => updateInspRow(key, row.id, "acceptance_criteria", e.target.value)}
+                                      placeholder={row.inspection_standard_id ? "합격기준 입력" : "검사기준을 먼저 선택하세요"}
+                                      disabled={!row.inspection_standard_id}
+                                    />
+                                  </TableCell>
+                                  <TableCell className="p-1 text-center">
+                                    <Checkbox checked={row.is_required} onCheckedChange={(v) => updateInspRow(key, row.id, "is_required", !!v)} />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Button type="button" variant="destructive" size="sm" className="h-7 w-7 p-0" onClick={() => removeInspRow(key, row.id)}>
+                                      <Trash2 className="w-3.5 h-3.5" />
+                                    </Button>
+                                  </TableCell>
+                                </TableRow>
+                              ))}
+                            </TableBody>
+                          </Table>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setModalOpen(false)}>취소</Button>
+                <Button onClick={handleSave} disabled={saving}>
+                  {saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+                  저장
+                </Button>
+              </DialogFooter>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/sales/claim/page.tsx b/frontend/app/(main)/COMPANY_29/sales/claim/page.tsx
index 86ba092d..a2c89599 100644
--- a/frontend/app/(main)/COMPANY_29/sales/claim/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/sales/claim/page.tsx
@@ -10,14 +10,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -39,11 +31,26 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import {
   Download,
   Plus,
   Save,
-  BarChart3,
   ClipboardList,
   Inbox,
   Check,
@@ -51,21 +58,36 @@ import {
   Loader2,
   FileSpreadsheet,
   Trash2,
+  Pencil,
+  FileText,
+  Wrench,
+  Settings2,
 } from "lucide-react";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 
 // --- 상수 ---
 const TABLE_NAME = "claim_mng";
 
+const GRID_COLUMNS = [
+  { key: "claim_no", label: "클레임번호" },
+  { key: "claim_date", label: "접수일자" },
+  { key: "claim_type", label: "유형" },
+  { key: "claim_status", label: "상태" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "manager_name", label: "담당자" },
+  { key: "claim_content", label: "클레임 내용" },
+];
+
 type ClaimType = "불량" | "교환" | "반품" | "배송지연" | "기타";
 type ClaimStatus = "접수" | "처리중" | "완료" | "취소";
 
@@ -99,35 +121,25 @@ interface SalesOrderOption {
   status: string;
 }
 
-const getClaimTypeStyle = (type: string) => {
-  switch (type) {
-    case "불량":
-      return "bg-rose-100 text-rose-800 border-rose-200";
-    case "교환":
-      return "bg-amber-100 text-amber-800 border-amber-200";
-    case "반품":
-      return "bg-blue-100 text-blue-800 border-blue-200";
-    case "배송지연":
-      return "bg-indigo-100 text-indigo-800 border-indigo-200";
-    case "기타":
-      return "bg-gray-100 text-gray-800 border-gray-200";
-    default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+// Badge variant 매핑 (CSS 변수 기반)
+const getClaimStatusVariant = (status: string) => {
+  switch (status) {
+    case "접수": return "default" as const;
+    case "처리중": return "secondary" as const;
+    case "완료": return "outline" as const;
+    case "취소": return "destructive" as const;
+    default: return "secondary" as const;
   }
 };
 
-const getClaimStatusStyle = (status: string) => {
-  switch (status) {
-    case "접수":
-      return "bg-blue-100 text-blue-800 border-blue-200";
-    case "처리중":
-      return "bg-amber-100 text-amber-800 border-amber-200";
-    case "완료":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
-    case "취소":
-      return "bg-rose-100 text-rose-800 border-rose-200";
-    default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+const getClaimTypeVariant = (type: string) => {
+  switch (type) {
+    case "불량": return "destructive" as const;
+    case "교환": return "warning" as const;
+    case "반품": return "default" as const;
+    case "배송지연": return "secondary" as const;
+    case "기타": return "outline" as const;
+    default: return "outline" as const;
   }
 };
 
@@ -135,15 +147,16 @@ const CLAIM_TYPES: ClaimType[] = ["불량", "교환", "반품", "배송지연",
 const CLAIM_STATUSES: ClaimStatus[] = ["접수", "처리중", "완료", "취소"];
 
 export default function ClaimManagementPage() {
-  const { user } = useAuth();
+  useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-claim", TABLE_NAME, GRID_COLUMNS);
 
   const [data, setData] = useState<ClaimRow[]>([]);
   const [loading, setLoading] = useState(false);
   const [totalCount, setTotalCount] = useState(0);
   const [selectedClaimNo, setSelectedClaimNo] = useState<string | null>(null);
 
-  // 검색 필터 (DynamicSearchFilter)
+  // 검색 필터 (DynamicSearchFilter에서 관리)
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 엑셀 업로드
@@ -165,11 +178,11 @@ export default function ClaimManagementPage() {
   const [customersLoading, setCustomersLoading] = useState(false);
   const [ordersLoading, setOrdersLoading] = useState(false);
 
-  // --- 데이터 조회 (table-management API + autoFilter로 멀티테넌시 자동 적용) ---
+  // --- 데이터 조회 (서버사이드 필터 + autoFilter 멀티테넌시) ---
   const fetchData = useCallback(async () => {
     setLoading(true);
     try {
-      const filters: any[] = searchFilters.map((f) => ({
+      const filters = searchFilters.map(f => ({
         columnName: f.columnName,
         operator: f.operator,
         value: f.value,
@@ -179,15 +192,14 @@ export default function ClaimManagementPage() {
         page: 1,
         size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
-        autoFilter: true, // company_code 자동 필터링
+        autoFilter: true,
         sort: { columnName: "claim_date", order: "desc" },
       });
 
       const rows: ClaimRow[] = res.data?.data?.data || res.data?.data?.rows || [];
       setData(rows);
       setTotalCount(res.data?.data?.total || rows.length);
-    } catch (err) {
-      console.error("클레임 조회 실패:", err);
+    } catch {
       toast.error("클레임 목록을 불러오는데 실패했습니다.");
     } finally {
       setLoading(false);
@@ -198,6 +210,7 @@ export default function ClaimManagementPage() {
     fetchData();
   }, [fetchData]);
 
+
   // 거래처 목록 조회 (autoFilter로 멀티테넌시 적용)
   const fetchCustomers = useCallback(async (force = false) => {
     if (!force && customers.length > 0) return;
@@ -206,7 +219,7 @@ export default function ClaimManagementPage() {
       const res = await apiClient.post("/table-management/tables/customer_mng/data", {
         page: 1,
         size: 9999,
-        autoFilter: { enabled: true },
+        autoFilter: true,
       });
       const rows = res.data?.data?.data || res.data?.data?.rows;
       if (res.data?.success && Array.isArray(rows)) {
@@ -216,8 +229,8 @@ export default function ClaimManagementPage() {
         }));
         setCustomers(list);
       }
-    } catch (e) {
-      console.error("거래처 목록 조회 실패:", e);
+    } catch {
+      /* skip */
     } finally {
       setCustomersLoading(false);
     }
@@ -231,7 +244,7 @@ export default function ClaimManagementPage() {
       const res = await apiClient.post("/table-management/tables/sales_order_mng/data", {
         page: 1,
         size: 9999,
-        autoFilter: { enabled: true },
+        autoFilter: true,
       });
       const rows = res.data?.data?.data || res.data?.data?.rows;
       if (res.data?.success && Array.isArray(rows)) {
@@ -249,8 +262,8 @@ export default function ClaimManagementPage() {
         }
         setSalesOrders(list);
       }
-    } catch (e) {
-      console.error("수주 목록 조회 실패:", e);
+    } catch {
+      /* skip */
     } finally {
       setOrdersLoading(false);
     }
@@ -325,27 +338,24 @@ export default function ClaimManagementPage() {
 
     setSaving(true);
     try {
-      // company_code, writer, created_date 등 시스템 필드는 제외 (백엔드가 자동 주입)
       const { id, company_code, writer, created_date, updated_date, created_by, updated_by, ...saveFields } = formData as any;
 
       if (isEditMode && id) {
-        // 수정
         await apiClient.put(`/table-management/tables/${TABLE_NAME}/edit`, {
           originalData: { id },
           updatedData: saveFields,
         });
-        toast.success("클레임이 수정되었습니다.");
+        toast.success("클레임이 수정되었어요.");
       } else {
-        // 등록
         await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, saveFields);
-        toast.success("클레임이 등록되었습니다.");
+        toast.success("클레임이 등록되었어요.");
       }
 
       setIsModalOpen(false);
-      fetchData(); // 목록 새로고침
+      fetchData();
     } catch (err: any) {
       console.error("클레임 저장 실패:", err);
-      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
     } finally {
       setSaving(false);
     }
@@ -366,19 +376,19 @@ export default function ClaimManagementPage() {
       await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
         data: [{ id: claim.id }],
       });
-      toast.success("클레임이 삭제되었습니다.");
+      toast.success("클레임이 삭제되었어요.");
       if (selectedClaimNo === claimNo) setSelectedClaimNo(null);
       fetchData();
     } catch (err: any) {
       console.error("클레임 삭제 실패:", err);
-      toast.error(err.response?.data?.message || "삭제에 실패했습니다.");
+      toast.error(err.response?.data?.message || "삭제에 실패했어요.");
     }
   };
 
   // 엑셀 다운로드
   const handleExcelDownload = async () => {
     if (data.length === 0) {
-      toast.error("다운로드할 데이터가 없습니다.");
+      toast.error("다운로드할 데이터가 없어요.");
       return;
     }
     try {
@@ -398,7 +408,7 @@ export default function ClaimManagementPage() {
       toast.success("엑셀 다운로드 완료");
     } catch (err) {
       console.error("엑셀 다운로드 실패:", err);
-      toast.error("엑셀 다운로드에 실패했습니다.");
+      toast.error("엑셀 다운로드에 실패했어요.");
     }
   };
 
@@ -407,306 +417,211 @@ export default function ClaimManagementPage() {
     [data, selectedClaimNo]
   );
 
-  const statCards: {
-    label: string;
-    value: number;
-    gradient: string;
-    textColor: string;
-  }[] = [
-    {
-      label: "접수",
-      value: statusCounts["접수"],
-      gradient: "from-indigo-500 to-purple-600",
-      textColor: "text-white",
-    },
-    {
-      label: "처리중",
-      value: statusCounts["처리중"],
-      gradient: "from-amber-400 to-orange-500",
-      textColor: "text-white",
-    },
-    {
-      label: "완료",
-      value: statusCounts["완료"],
-      gradient: "from-cyan-400 to-blue-500",
-      textColor: "text-white",
-    },
-    {
-      label: "취소",
-      value: statusCounts["취소"],
-      gradient: "from-slate-300 to-slate-400",
-      textColor: "text-slate-800",
-    },
-  ];
-
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4">
-      {/* 검색 섹션 — DynamicSearchFilter 사용 */}
+    <div className="flex flex-col h-[calc(100vh-4rem)] overflow-hidden">
+      {/* 검색 필터 (DynamicSearchFilter) */}
       <DynamicSearchFilter
         tableName={TABLE_NAME}
-        filterId="sales-claim"
+        filterId="c16-claim"
         onFilterChange={setSearchFilters}
-        dataCount={totalCount}
+        dataCount={data.length}
+        externalFilterConfig={ts.filterConfig}
       />
 
-      {/* 메인 분할 레이아웃 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
-        <ResizablePanelGroup direction="horizontal">
-          {/* 왼쪽: 클레임 목록 */}
+      {/* ───── 메인 분할 레이아웃 ───── */}
+      <div className="flex-1 overflow-hidden">
+        <ResizablePanelGroup direction="horizontal" className="h-full">
+          {/* ── 좌측: 클레임 목록 (65%) ── */}
           <ResizablePanel defaultSize={65} minSize={35}>
-            <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2">
-                  <ClipboardList className="w-4 h-4" />
-                  클레임 목록
-                  <Badge variant="secondary" className="font-normal">
-                    {totalCount}건
-                  </Badge>
-                  {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
-                </div>
+            <div className="flex flex-col h-full bg-card">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
                 <div className="flex items-center gap-2">
+                  <ClipboardList className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-[13px] font-bold text-foreground">클레임 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {data.length}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <div className="flex items-center gap-1.5">
                   <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
-                    <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
+                    <FileSpreadsheet className="w-3.5 h-3.5" />
+                    업로드
                   </Button>
                   <Button variant="outline" size="sm" onClick={handleExcelDownload}>
-                    <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
+                    <Download className="w-3.5 h-3.5" />
+                    다운로드
                   </Button>
                   <Button size="sm" onClick={openRegisterModal}>
-                    <Plus className="w-4 h-4 mr-1.5" /> 클레임 등록
+                    <Plus className="w-3.5 h-3.5" />
+                    등록
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="h-4 w-4" />
                   </Button>
                 </div>
               </div>
 
-              <div className="flex-1 overflow-auto">
-                <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                    <TableRow>
-                      <TableHead className="w-[50px] text-center">No</TableHead>
-                      <TableHead className="w-[130px]">클레임번호</TableHead>
-                      <TableHead className="w-[110px]">접수일자</TableHead>
-                      <TableHead className="w-[90px] text-center">유형</TableHead>
-                      <TableHead className="w-[90px] text-center">상태</TableHead>
-                      <TableHead className="w-[150px]">거래처명</TableHead>
-                      <TableHead className="w-[100px]">담당자</TableHead>
-                      <TableHead className="w-[120px]">수주번호</TableHead>
-                      <TableHead>클레임 내용</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {data.length === 0 ? (
-                      <TableRow>
-                        <TableCell
-                          colSpan={9}
-                          className="h-32 text-center text-muted-foreground"
-                        >
-                          <div className="flex flex-col items-center gap-2">
-                            <Inbox className="w-8 h-8 text-muted-foreground/50" />
-                            <span>{loading ? "데이터를 불러오는 중..." : "등록된 클레임이 없습니다"}</span>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      data.map((claim, idx) => (
-                        <TableRow
-                          key={claim.id}
-                          className={cn(
-                            "cursor-pointer hover:bg-muted/50 transition-colors",
-                            selectedClaimNo === claim.claim_no && "bg-primary/5"
-                          )}
-                          onClick={() => handleRowClick(claim.claim_no)}
-                          onDoubleClick={() => openEditModal(claim.claim_no)}
-                        >
-                          <TableCell className="text-center text-muted-foreground">
-                            {idx + 1}
-                          </TableCell>
-                          <TableCell className="font-medium">
-                            {claim.claim_no}
-                          </TableCell>
-                          <TableCell>{claim.claim_date}</TableCell>
-                          <TableCell className="text-center">
-                            <span
-                              className={cn(
-                                "px-2 py-1 rounded-full text-[11px] font-medium border",
-                                getClaimTypeStyle(claim.claim_type)
-                              )}
-                            >
-                              {claim.claim_type}
-                            </span>
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <span
-                              className={cn(
-                                "px-2 py-1 rounded-full text-[11px] font-medium border",
-                                getClaimStatusStyle(claim.claim_status)
-                              )}
-                            >
-                              {claim.claim_status}
-                            </span>
-                          </TableCell>
-                          <TableCell>{claim.customer_name}</TableCell>
-                          <TableCell>{claim.manager_name || "-"}</TableCell>
-                          <TableCell className="text-muted-foreground text-xs">
-                            {claim.order_no || "-"}
-                          </TableCell>
-                          <TableCell className="text-xs text-muted-foreground truncate max-w-[300px]">
-                            {claim.claim_content || "-"}
-                          </TableCell>
-                        </TableRow>
-                      ))
-                    )}
-                  </TableBody>
-                </Table>
-              </div>
+              {/* 테이블 */}
+              <EDataTable
+                columns={ts.visibleColumns.map((col): EDataTableColumn<ClaimRow> => ({
+                  key: col.key,
+                  label: col.label,
+                  align: col.key === "claim_type" || col.key === "claim_status" ? "center" : undefined,
+                  render: col.key === "claim_type"
+                    ? (val: any) => (
+                        <Badge variant={getClaimTypeVariant(val)} className="text-[10px] px-1.5 py-0">
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "claim_status"
+                    ? (val: any) => (
+                        <Badge variant={getClaimStatusVariant(val)} className="text-[10px] px-1.5 py-0">
+                          {val}
+                        </Badge>
+                      )
+                    : undefined,
+                }))}
+                data={ts.groupData(data)}
+                loading={loading}
+                emptyMessage="등록된 클레임이 없어요"
+                rowKey={(row) => String(row.id)}
+                selectedId={selectedClaimNo ? String(data.find(c => c.claim_no === selectedClaimNo)?.id ?? "") : null}
+                onSelect={(id) => {
+                  const claim = data.find(c => String(c.id) === id);
+                  handleRowClick(claim?.claim_no ?? "");
+                }}
+                onRowDoubleClick={(row) => openEditModal(row.claim_no)}
+                showRowNumber
+                draggableColumns={false}
+              />
             </div>
           </ResizablePanel>
 
           <ResizableHandle withHandle />
 
-          {/* 오른쪽: 처리 현황 */}
+          {/* ── 우측: 클레임 상세 (35%) ── */}
           <ResizablePanel defaultSize={35} minSize={20}>
-            <div className="flex flex-col h-full bg-card">
-              <div className="flex items-center justify-between p-3 border-b shrink-0">
-                <span className="font-semibold flex items-center gap-2">
-                  <BarChart3 className="w-4 h-4" />
-                  처리 현황
-                </span>
+            <div className="flex flex-col h-full bg-card border-l">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="flex items-center gap-2">
+                  <ClipboardList className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-[13px] font-bold text-foreground">클레임 상세</span>
+                  {selectedClaim && (
+                    <span className="text-[11px] font-mono text-muted-foreground">{selectedClaim.claim_no}</span>
+                  )}
+                </div>
+                {selectedClaim && (
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => openEditModal(selectedClaim.claim_no)}
+                    >
+                      <Pencil className="w-3.5 h-3.5" />
+                      수정
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="text-destructive hover:text-destructive"
+                      onClick={() => handleDelete(selectedClaim.claim_no)}
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </Button>
+                  </div>
+                )}
               </div>
 
-              <div className="flex-1 overflow-auto p-4 space-y-5">
-                {/* 상태별 카드 */}
-                <div className="grid grid-cols-2 gap-3">
-                  {statCards.map((card) => (
-                    <div
-                      key={card.label}
-                      className={cn(
-                        "rounded-xl p-5 text-center bg-linear-to-br transition-all hover:-translate-y-0.5 hover:shadow-md",
-                        card.gradient,
-                        card.textColor
-                      )}
-                    >
-                      <div className="text-sm font-medium opacity-90 mb-2">
-                        {card.label}
-                      </div>
-                      <div className="text-4xl font-bold">{card.value}</div>
-                    </div>
-                  ))}
-                </div>
+              {/* 상태별 요약 카운트 */}
+              <div className="flex items-center gap-3 px-4 py-2 border-b bg-muted/20 shrink-0">
+                {([
+                  { label: "접수", count: statusCounts["접수"], variant: "default" as const },
+                  { label: "처리중", count: statusCounts["처리중"], variant: "secondary" as const },
+                  { label: "완료", count: statusCounts["완료"], variant: "outline" as const },
+                  { label: "취소", count: statusCounts["취소"], variant: "destructive" as const },
+                ]).map((item) => (
+                  <div key={item.label} className="flex items-center gap-1">
+                    <Badge variant={item.variant} className="text-[10px] px-1.5 py-0">
+                      {item.label}
+                    </Badge>
+                    <span className="text-sm font-bold tabular-nums text-foreground">{item.count}</span>
+                  </div>
+                ))}
+              </div>
 
-                {/* 선택된 클레임 상세 */}
+              {/* 상세 컨텐츠 */}
+              <div className="flex-1 overflow-auto">
                 {selectedClaim ? (
-                  <div className="space-y-4">
-                    <h3 className="text-sm font-semibold flex items-center gap-2 pt-2 border-t">
-                      <ClipboardList className="w-4 h-4" />
-                      클레임 상세 - {selectedClaim.claim_no}
-                    </h3>
-
-                    <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div className="p-4 space-y-4">
+                    {/* 기본 정보 그리드 */}
+                    <div className="grid grid-cols-2 gap-x-4 gap-y-3">
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          클레임번호
-                        </span>
-                        <span className="font-medium">
-                          {selectedClaim.claim_no}
-                        </span>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">접수일자</p>
+                        <p className="text-sm text-foreground">{selectedClaim.claim_date}</p>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          접수일자
-                        </span>
-                        <span>{selectedClaim.claim_date}</span>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">담당자</p>
+                        <p className="text-sm text-foreground">{selectedClaim.manager_name || "-"}</p>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          유형
-                        </span>
-                        <span
-                          className={cn(
-                            "px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block",
-                            getClaimTypeStyle(selectedClaim.claim_type)
-                          )}
-                        >
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">유형</p>
+                        <Badge variant={getClaimTypeVariant(selectedClaim.claim_type)} className="text-[11px]">
                           {selectedClaim.claim_type}
-                        </span>
+                        </Badge>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          상태
-                        </span>
-                        <span
-                          className={cn(
-                            "px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block",
-                            getClaimStatusStyle(selectedClaim.claim_status)
-                          )}
-                        >
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">상태</p>
+                        <Badge variant={getClaimStatusVariant(selectedClaim.claim_status)} className="text-[11px]">
                           {selectedClaim.claim_status}
-                        </span>
+                        </Badge>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          거래처명
-                        </span>
-                        <span>{selectedClaim.customer_name}</span>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">거래처명</p>
+                        <p className="text-sm font-medium text-foreground">{selectedClaim.customer_name}</p>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          담당자
-                        </span>
-                        <span>{selectedClaim.manager_name || "-"}</span>
-                      </div>
-                      <div className="col-span-2">
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          수주번호
-                        </span>
-                        <span className="text-muted-foreground">
-                          {selectedClaim.order_no || "-"}
-                        </span>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주번호</p>
+                        <p className="text-sm font-mono text-muted-foreground">{selectedClaim.order_no || "-"}</p>
                       </div>
                     </div>
 
+                    <div className="border-t" />
+
+                    {/* 클레임 내용 */}
                     <div>
-                      <span className="text-muted-foreground text-xs block mb-1">
-                        클레임 내용
-                      </span>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[60px]">
+                      <div className="flex items-center gap-1.5 mb-1.5">
+                        <FileText className="w-3.5 h-3.5 text-muted-foreground" />
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">클레임 내용</p>
+                      </div>
+                      <div className="rounded-md border bg-muted/30 p-3 text-sm text-foreground whitespace-pre-wrap min-h-[60px]">
                         {selectedClaim.claim_content || "-"}
                       </div>
                     </div>
 
+                    {/* 처리 내용 */}
                     <div>
-                      <span className="text-muted-foreground text-xs block mb-1">
-                        처리 내용
-                      </span>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[60px]">
+                      <div className="flex items-center gap-1.5 mb-1.5">
+                        <Wrench className="w-3.5 h-3.5 text-muted-foreground" />
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">처리 내용</p>
+                      </div>
+                      <div className="rounded-md border bg-muted/30 p-3 text-sm text-foreground whitespace-pre-wrap min-h-[60px]">
                         {selectedClaim.process_content || "-"}
                       </div>
                     </div>
-
-                    <div className="flex gap-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="flex-1"
-                        onClick={() => openEditModal(selectedClaim.claim_no)}
-                      >
-                        <Save className="w-4 h-4 mr-2" /> 수정
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="text-destructive hover:text-destructive"
-                        onClick={() => handleDelete(selectedClaim.claim_no)}
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </Button>
-                    </div>
                   </div>
                 ) : (
-                  <div className="flex flex-col items-center justify-center py-10 text-center">
-                    <div className="w-14 h-14 rounded-full bg-muted flex items-center justify-center mb-3">
-                      <BarChart3 className="w-7 h-7 text-muted-foreground" />
+                  <div className="flex flex-col items-center justify-center h-full text-center p-8">
+                    <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-14 h-14 flex items-center justify-center mb-4">
+                      <Inbox className="w-7 h-7 text-muted-foreground/30" />
                     </div>
-                    <p className="text-sm text-muted-foreground">
-                      클레임을 선택하면 상세 정보가 표시됩니다
+                    <p className="text-sm font-medium text-muted-foreground mb-1">
+                      좌측에서 클레임을 선택해주세요
+                    </p>
+                    <p className="text-xs text-muted-foreground/60">
+                      클레임을 선택하면 상세 정보가 표시돼요
                     </p>
                   </div>
                 )}
@@ -716,310 +631,279 @@ export default function ClaimManagementPage() {
         </ResizablePanelGroup>
       </div>
 
-      {/* 클레임 등록/수정 모달 — FullscreenDialog 사용 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title={isEditMode ? "클레임 수정" : "클레임 등록"}
-        description={isEditMode ? "클레임 정보를 수정합니다." : "새로운 클레임을 등록합니다."}
-        defaultMaxWidth="max-w-[900px]"
-        footer={
-          <div className="flex gap-2 w-full sm:w-auto">
-            <Button
-              variant="outline"
-              onClick={() => setIsModalOpen(false)}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
+      {/* ───── 클레임 등록/수정 모달 ───── */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[900px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "클레임 수정" : "클레임 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? "클레임 정보를 수정해요." : "새로운 클레임을 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex flex-col md:flex-row gap-4 py-2">
+            {/* 왼쪽: 기본 정보 */}
+            <div className="md:w-[320px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border">
+              <h3 className="text-[13px] font-bold pb-2 border-b text-foreground">기본 정보</h3>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_no" className="text-[11px] font-semibold text-muted-foreground">클레임번호</Label>
+                <Input
+                  id="claim_no"
+                  value={formData.claim_no || ""}
+                  readOnly
+                  className="h-9 text-sm bg-muted cursor-not-allowed font-mono"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_date" className="text-[11px] font-semibold text-muted-foreground">접수일자</Label>
+                <Input
+                  id="claim_date"
+                  type="date"
+                  value={formData.claim_date || ""}
+                  onChange={(e) => handleFormChange("claim_date", e.target.value)}
+                  className="h-9 text-sm"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_type" className="text-[11px] font-semibold text-muted-foreground">
+                  클레임 유형 <span className="text-destructive">*</span>
+                </Label>
+                <Select
+                  value={formData.claim_type || ""}
+                  onValueChange={(v) => handleFormChange("claim_type", v)}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue placeholder="유형을 선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CLAIM_TYPES.map((t) => (
+                      <SelectItem key={t} value={t}>{t}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_status" className="text-[11px] font-semibold text-muted-foreground">처리 상태</Label>
+                <Select
+                  value={formData.claim_status || "접수"}
+                  onValueChange={(v) => handleFormChange("claim_status", v)}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CLAIM_STATUSES.map((s) => (
+                      <SelectItem key={s} value={s}>{s}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <Label className="text-[11px] font-semibold text-muted-foreground">
+                  거래처명 <span className="text-destructive">*</span>
+                </Label>
+                <Popover open={customerOpen} onOpenChange={setCustomerOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={customerOpen}
+                      className="h-9 w-full justify-between font-normal"
+                      onClick={() => fetchCustomers(false)}
+                    >
+                      {formData.customer_name || "거래처를 선택해주세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput placeholder="거래처 검색..." />
+                      <CommandList>
+                        {customersLoading ? (
+                          <div className="flex items-center justify-center py-6">
+                            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                            <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
+                          </div>
+                        ) : (
+                          <>
+                            <CommandEmpty className="py-4 text-center text-sm">
+                              거래처를 찾을 수 없어요.
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {customers.map((cust) => (
+                                <CommandItem
+                                  key={cust.customerCode}
+                                  value={`${cust.customerCode} ${cust.customerName}`}
+                                  onSelect={() => {
+                                    setFormData((prev) => ({
+                                      ...prev,
+                                      customer_code: cust.customerCode,
+                                      customer_name: cust.customerName,
+                                    }));
+                                    setCustomerOpen(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      formData.customer_code === cust.customerCode
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col min-w-0">
+                                    <span className="font-medium truncate">{cust.customerName}</span>
+                                    <span className="text-[10px] text-muted-foreground">{cust.customerCode}</span>
+                                  </div>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="manager_name" className="text-[11px] font-semibold text-muted-foreground">담당자</Label>
+                <Input
+                  id="manager_name"
+                  value={formData.manager_name || ""}
+                  onChange={(e) => handleFormChange("manager_name", e.target.value)}
+                  placeholder="담당자를 입력해주세요"
+                  className="h-9"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label className="text-[11px] font-semibold text-muted-foreground">수주번호</Label>
+                <Popover open={orderOpen} onOpenChange={setOrderOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={orderOpen}
+                      className="h-9 w-full justify-between font-normal"
+                      onClick={() => fetchSalesOrders(false)}
+                    >
+                      {formData.order_no || "수주번호를 선택해주세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput placeholder="수주번호 검색..." />
+                      <CommandList>
+                        {ordersLoading ? (
+                          <div className="flex items-center justify-center py-6">
+                            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                            <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
+                          </div>
+                        ) : (
+                          <>
+                            <CommandEmpty className="py-4 text-center text-sm">
+                              수주번호를 찾을 수 없어요.
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {salesOrders.map((order) => (
+                                <CommandItem
+                                  key={order.orderNo}
+                                  value={`${order.orderNo} ${order.partnerName}`}
+                                  onSelect={() => {
+                                    setFormData((prev) => ({
+                                      ...prev,
+                                      order_no: order.orderNo,
+                                    }));
+                                    setOrderOpen(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      formData.order_no === order.orderNo
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col min-w-0">
+                                    <span className="font-medium truncate">{order.orderNo}</span>
+                                    <span className="text-[10px] text-muted-foreground">
+                                      {order.status}
+                                      {order.partnerName ? ` | ${order.partnerName}` : ""}
+                                    </span>
+                                  </div>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+
+            {/* 오른쪽: 상세 내용 */}
+            <div className="flex-1 space-y-3 bg-muted/30 p-4 rounded-lg border min-w-0">
+              <h3 className="text-[13px] font-bold pb-2 border-b text-foreground">클레임 상세 내용</h3>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_content" className="text-[11px] font-semibold text-muted-foreground">
+                  클레임 내용 <span className="text-destructive">*</span>
+                </Label>
+                <Textarea
+                  id="claim_content"
+                  value={formData.claim_content || ""}
+                  onChange={(e) => handleFormChange("claim_content", e.target.value)}
+                  placeholder="클레임 내용을 상세히 입력해주세요"
+                  className="min-h-[200px] resize-y text-sm"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="process_content" className="text-[11px] font-semibold text-muted-foreground">처리 내용</Label>
+                <Textarea
+                  id="process_content"
+                  value={formData.process_content || ""}
+                  onChange={(e) => handleFormChange("process_content", e.target.value)}
+                  placeholder="처리 내용을 입력해주세요"
+                  className="min-h-[150px] resize-y text-sm"
+                />
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>
               취소
             </Button>
-            <Button
-              onClick={handleSave}
-              disabled={saving}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
+            <Button onClick={handleSave} disabled={saving}>
               {saving ? (
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                <Loader2 className="w-4 h-4 animate-spin" />
               ) : (
-                <Save className="w-4 h-4 mr-2" />
+                <Save className="w-4 h-4" />
               )}
               저장
             </Button>
-          </div>
-        }
-      >
-        <div className="flex flex-col md:flex-row gap-5">
-          {/* 왼쪽: 기본 정보 */}
-          <div className="md:w-[340px] shrink-0 space-y-4 bg-muted/30 p-4 rounded-lg border border-border/50">
-            <h3 className="text-sm font-semibold pb-2 border-b">
-              클레임 기본 정보
-            </h3>
-
-            <div>
-              <Label htmlFor="claim_no" className="text-xs sm:text-sm">
-                클레임번호
-              </Label>
-              <Input
-                id="claim_no"
-                value={formData.claim_no || ""}
-                readOnly
-                className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed"
-              />
-            </div>
-
-            <div>
-              <Label htmlFor="claim_date" className="text-xs sm:text-sm">
-                접수일자
-              </Label>
-              <FormDatePicker
-                value={formData.claim_date || ""}
-                onChange={(v) => handleFormChange("claim_date", v)}
-                placeholder="접수일자"
-              />
-            </div>
-
-            <div>
-              <Label htmlFor="claim_type" className="text-xs sm:text-sm">
-                클레임 유형 <span className="text-destructive">*</span>
-              </Label>
-              <Select
-                value={formData.claim_type || ""}
-                onValueChange={(v) => handleFormChange("claim_type", v)}
-              >
-                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                  <SelectValue placeholder="선택" />
-                </SelectTrigger>
-                <SelectContent>
-                  {CLAIM_TYPES.map((t) => (
-                    <SelectItem key={t} value={t}>
-                      {t}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div>
-              <Label htmlFor="claim_status" className="text-xs sm:text-sm">
-                처리 상태
-              </Label>
-              <Select
-                value={formData.claim_status || "접수"}
-                onValueChange={(v) => handleFormChange("claim_status", v)}
-              >
-                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {CLAIM_STATUSES.map((s) => (
-                    <SelectItem key={s} value={s}>
-                      {s}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div>
-              <Label className="text-xs sm:text-sm">
-                거래처명 <span className="text-destructive">*</span>
-              </Label>
-              <Popover open={customerOpen} onOpenChange={setCustomerOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={customerOpen}
-                    className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm font-normal"
-                    onClick={() => fetchCustomers(false)}
-                  >
-                    {formData.customer_name || "거래처 선택"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent
-                  className="p-0"
-                  style={{ width: "var(--radix-popover-trigger-width)" }}
-                  align="start"
-                >
-                  <Command>
-                    <CommandInput
-                      placeholder="거래처 검색..."
-                      className="text-xs sm:text-sm"
-                    />
-                    <CommandList>
-                      {customersLoading ? (
-                        <div className="flex items-center justify-center py-6">
-                          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-                          <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
-                        </div>
-                      ) : (
-                        <>
-                          <CommandEmpty className="text-xs sm:text-sm py-4 text-center">
-                            거래처를 찾을 수 없습니다.
-                          </CommandEmpty>
-                          <CommandGroup>
-                            {customers.map((cust) => (
-                              <CommandItem
-                                key={cust.customerCode}
-                                value={`${cust.customerCode} ${cust.customerName}`}
-                                onSelect={() => {
-                                  setFormData((prev) => ({
-                                    ...prev,
-                                    customer_code: cust.customerCode,
-                                    customer_name: cust.customerName,
-                                  }));
-                                  setCustomerOpen(false);
-                                }}
-                                className="text-xs sm:text-sm"
-                              >
-                                <Check
-                                  className={cn(
-                                    "mr-2 h-4 w-4",
-                                    formData.customer_code === cust.customerCode
-                                      ? "opacity-100"
-                                      : "opacity-0"
-                                  )}
-                                />
-                                <div className="flex flex-col">
-                                  <span className="font-medium">{cust.customerName}</span>
-                                  <span className="text-[10px] text-muted-foreground">
-                                    {cust.customerCode}
-                                  </span>
-                                </div>
-                              </CommandItem>
-                            ))}
-                          </CommandGroup>
-                        </>
-                      )}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
-
-            <div>
-              <Label htmlFor="manager_name" className="text-xs sm:text-sm">
-                담당자
-              </Label>
-              <Input
-                id="manager_name"
-                value={formData.manager_name || ""}
-                onChange={(e) => handleFormChange("manager_name", e.target.value)}
-                className="h-8 text-xs sm:h-10 sm:text-sm"
-              />
-            </div>
-
-            <div>
-              <Label className="text-xs sm:text-sm">수주번호</Label>
-              <Popover open={orderOpen} onOpenChange={setOrderOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={orderOpen}
-                    className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm font-normal"
-                    onClick={() => fetchSalesOrders(false)}
-                  >
-                    {formData.order_no || "수주번호 선택"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent
-                  className="p-0"
-                  style={{ width: "var(--radix-popover-trigger-width)" }}
-                  align="start"
-                >
-                  <Command>
-                    <CommandInput
-                      placeholder="수주번호 검색..."
-                      className="text-xs sm:text-sm"
-                    />
-                    <CommandList>
-                      {ordersLoading ? (
-                        <div className="flex items-center justify-center py-6">
-                          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-                          <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
-                        </div>
-                      ) : (
-                        <>
-                          <CommandEmpty className="text-xs sm:text-sm py-4 text-center">
-                            수주번호를 찾을 수 없습니다.
-                          </CommandEmpty>
-                          <CommandGroup>
-                            {salesOrders.map((order) => (
-                              <CommandItem
-                                key={order.orderNo}
-                                value={`${order.orderNo} ${order.partnerName}`}
-                                onSelect={() => {
-                                  setFormData((prev) => ({
-                                    ...prev,
-                                    order_no: order.orderNo,
-                                  }));
-                                  setOrderOpen(false);
-                                }}
-                                className="text-xs sm:text-sm"
-                              >
-                                <Check
-                                  className={cn(
-                                    "mr-2 h-4 w-4",
-                                    formData.order_no === order.orderNo
-                                      ? "opacity-100"
-                                      : "opacity-0"
-                                  )}
-                                />
-                                <div className="flex flex-col">
-                                  <span className="font-medium">{order.orderNo}</span>
-                                  <span className="text-[10px] text-muted-foreground">
-                                    {order.status}
-                                    {order.partnerName ? ` | ${order.partnerName}` : ""}
-                                  </span>
-                                </div>
-                              </CommandItem>
-                            ))}
-                          </CommandGroup>
-                        </>
-                      )}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
-          </div>
-
-          {/* 오른쪽: 상세 내용 */}
-          <div className="flex-1 space-y-4 bg-muted/30 p-4 rounded-lg border border-border/50 min-w-0">
-            <h3 className="text-sm font-semibold pb-2 border-b">
-              클레임 상세 내용
-            </h3>
-
-            <div className="flex flex-col flex-1">
-              <Label htmlFor="claim_content" className="text-xs sm:text-sm">
-                클레임 내용 <span className="text-destructive">*</span>
-              </Label>
-              <Textarea
-                id="claim_content"
-                value={formData.claim_content || ""}
-                onChange={(e) => handleFormChange("claim_content", e.target.value)}
-                placeholder="클레임 내용을 상세히 입력해주세요"
-                className="min-h-[200px] resize-y text-xs sm:text-sm"
-              />
-            </div>
-
-            <div>
-              <Label htmlFor="process_content" className="text-xs sm:text-sm">
-                처리 내용
-              </Label>
-              <Textarea
-                id="process_content"
-                value={formData.process_content || ""}
-                onChange={(e) => handleFormChange("process_content", e.target.value)}
-                placeholder="처리 내용을 입력해주세요"
-                className="min-h-[150px] resize-y text-xs sm:text-sm"
-              />
-            </div>
-          </div>
-        </div>
-      </FullscreenDialog>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 엑셀 업로드 모달 */}
       <ExcelUploadModal
@@ -1028,12 +912,21 @@ export default function ClaimManagementPage() {
         tableName={TABLE_NAME}
         onSuccess={() => {
           fetchData();
-          toast.success("엑셀 업로드가 완료되었습니다.");
+          toast.success("엑셀 업로드가 완료되었어요.");
         }}
       />
 
       {/* 확인 다이얼로그 */}
       {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_29/sales/customer/page.tsx b/frontend/app/(main)/COMPANY_29/sales/customer/page.tsx
index 80995df0..61e1269d 100644
--- a/frontend/app/(main)/COMPANY_29/sales/customer/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/sales/customer/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 /**
- * 거래처관리 — 하드코딩 페이지
+ * 거래처관리 — Type B 마스터-디테일 레이아웃 (리디자인)
  *
  * 좌측: 거래처 목록 (customer_mng)
- * 우측: 선택한 거래처의 품목별 단가 정보 (customer_item_prices, entity join → item_info)
+ * 우측: 품목별 단가 + 납품처 정보 탭
  *
  * 모달:
  * - 거래처 등록/수정 (customer_mng)
@@ -12,98 +12,111 @@
  * - 납품처 등록 (delivery_destination)
  */
 
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
-import {
-  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
-} from "@/components/ui/dialog";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Label } from "@/components/ui/label";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
 import {
   Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
-  Users, Package, MapPin, Search, X, Maximize2, Minimize2, Settings2,
+  Users, Package, MapPin, Search, X, Tag, Coins, Settings2, GripVertical,
+  ChevronRight, ChevronDown,
 } from "lucide-react";
+import {
+  DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
 import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { validateField, validateForm, formatField } from "@/lib/utils/validation";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
+import { getAvailableNumberingRulesForScreen, previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const CUSTOMER_TABLE = "customer_mng";
 const MAPPING_TABLE = "customer_item_mapping";
 const PRICE_TABLE = "customer_item_prices";
 const DELIVERY_TABLE = "delivery_destination";
+const CONTACT_TABLE = "customer_contact";
 
-// 좌측: 거래처 목록 컬럼
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "customer_code", label: "거래처코드", width: "w-[110px]" },
-  { key: "customer_name", label: "거래처명", minWidth: "min-w-[120px]" },
-  { key: "division", label: "거래유형", width: "w-[80px]" },
-  { key: "contact_person", label: "거래처담당자", width: "w-[90px]" },
-  { key: "internal_manager", label: "사내담당자", width: "w-[90px]" },
-  { key: "contact_phone", label: "전화번호", width: "w-[110px]" },
-  { key: "business_number", label: "사업자번호", width: "w-[110px]" },
-  { key: "email", label: "이메일", width: "w-[130px]" },
-  { key: "address", label: "주소", minWidth: "min-w-[150px]" },
-  { key: "status", label: "상태", width: "w-[60px]" },
+const CUSTOMER_GRID_COLUMNS = [
+  { key: "customer_code", label: "거래처코드" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "division", label: "거래유형" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "전화번호" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "status", label: "상태" },
 ];
 
-// 우측: 품목별 단가 컬럼
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "item_number", label: "품목코드", width: "w-[100px]" },
-  { key: "item_name", label: "품명", minWidth: "min-w-[100px]" },
-  { key: "customer_item_code", label: "거래처품번", width: "w-[100px]" },
-  { key: "customer_item_name", label: "거래처품명", width: "w-[100px]" },
-  { key: "base_price_type", label: "기준유형", width: "w-[80px]" },
-  { key: "base_price", label: "기준가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "discount_type", label: "할인유형", width: "w-[70px]" },
-  { key: "discount_value", label: "할인값", width: "w-[60px]", align: "right" },
-  { key: "calculated_price", label: "단가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
-];
+function SortableMappingRow({ id, children }: { id: string; children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform), transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+  return (
+    <div ref={setNodeRef} style={style} className="flex gap-2 items-center">
+      <div {...attributes} {...listeners} className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0">
+        <GripVertical className="h-3.5 w-3.5" />
+      </div>
+      {children}
+    </div>
+  );
+}
 
 export default function CustomerManagementPage() {
   const { user } = useAuth();
-  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-customer", CUSTOMER_TABLE, CUSTOMER_GRID_COLUMNS);
+  const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 좌측: 거래처 목록
   const [customers, setCustomers] = useState<any[]>([]);
   const [rawCustomers, setRawCustomers] = useState<any[]>([]);
   const [customerLoading, setCustomerLoading] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
+  const [mainContactMap, setMainContactMap] = useState<Record<string, any>>({});
   const [customerCount, setCustomerCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [gridColumns, setGridColumns] = useState<DataGridColumn[]>(LEFT_COLUMNS);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
   const [selectedCustomerId, setSelectedCustomerId] = useState<string | null>(null);
 
   // 우측: 탭
   const [rightTab, setRightTab] = useState<"items" | "delivery">("items");
   // 우측: 품목 단가
   const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceGroups, setPriceGroups] = useState<Record<string, { master: any; details: any[] }>>({});
   const [priceLoading, setPriceLoading] = useState(false);
+  const [priceCheckedIds, setPriceCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [collapsedPriceCards, setCollapsedPriceCards] = useState<Set<string>>(new Set());
   // 우측: 납품처
   const [deliveryItems, setDeliveryItems] = useState<any[]>([]);
-
-  // 품목 편집 데이터 (더블클릭 시 — 상세 입력 모달 재활용)
-  const [editItemData, setEditItemData] = useState<any>(null);
-  const savingRef = useRef(false);
   const [deliveryLoading, setDeliveryLoading] = useState(false);
 
-  // 모달
+  // 품목 편집 데이터 (더블클릭 시 상세 입력 모달 재활용)
+  const [editItemData, setEditItemData] = useState<any>(null);
+  const savingRef = useRef(false);
+
+  // 거래처 모달
   const [customerModalOpen, setCustomerModalOpen] = useState(false);
   const [customerEditMode, setCustomerEditMode] = useState(false);
   const [customerForm, setCustomerForm] = useState<Record<string, any>>({});
@@ -114,27 +127,45 @@ export default function CustomerManagementPage() {
   const [itemSelectOpen, setItemSelectOpen] = useState(false);
   const [itemSearchKeyword, setItemSearchKeyword] = useState("");
   const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemTotalCount, setItemTotalCount] = useState(0);
   const [itemSearchLoading, setItemSearchLoading] = useState(false);
   const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
 
   // 품목 상세 입력 모달 (2단계: 거래처 품번/품명 + 단가)
   const [itemDetailOpen, setItemDetailOpen] = useState(false);
   const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
-  // 품목별 거래처 품번/품명 (다중)
   const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; customer_item_code: string; customer_item_name: string }>>>({});
-  // 품목별 단가 목록
   const [itemPrices, setItemPrices] = useState<Record<string, Array<{
     _id: string; start_date: string; end_date: string; currency_code: string;
     base_price_type: string; base_price: string; discount_type: string;
     discount_value: string; rounding_type: string; rounding_unit_value: string;
     calculated_price: string;
   }>>>({});
-  // 단가 카테고리 옵션
   const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
-  // 납품처 모달
-  const [deliveryModalOpen, setDeliveryModalOpen] = useState(false);
-  const [deliveryForm, setDeliveryForm] = useState<Record<string, any>>({});
+  // 거래처 모달 탭
+  const [customerModalTab, setCustomerModalTab] = useState<"basic" | "contacts" | "delivery">("basic");
+  // 담당자 (customer_contact) - 모달 내
+  const [modalContacts, setModalContacts] = useState<any[]>([]);
+  const [modalContactLoading, setModalContactLoading] = useState(false);
+  const [modalContactForm, setModalContactForm] = useState<Record<string, any>>({});
+  const [modalContactEditId, setModalContactEditId] = useState<string | null>(null);
+  const [modalContactFormOpen, setModalContactFormOpen] = useState(false);
+  const [modalContactSaving, setModalContactSaving] = useState(false);
+  // 납품처 (delivery_destination) - 모달 내
+  const [modalDeliveries, setModalDeliveries] = useState<any[]>([]);
+  const [modalDeliveryLoading, setModalDeliveryLoading] = useState(false);
+  const [modalDeliveryForm, setModalDeliveryForm] = useState<Record<string, any>>({});
+  const [modalDeliveryEditId, setModalDeliveryEditId] = useState<string | null>(null);
+  const [modalDeliveryFormOpen, setModalDeliveryFormOpen] = useState(false);
+  const [modalDeliverySaving, setModalDeliverySaving] = useState(false);
+  const [modalDeliveryFormErrors, setModalDeliveryFormErrors] = useState<Record<string, string>>({});
+
+  const [continuousInput, setContinuousInput] = useState(false);
+
+  // 세금유형 (기본정보 탭 내)
+  const [taxTypeRows, setTaxTypeRows] = useState<{ _id: string; tax_type_name: string; rate: string }[]>([]);
+  const [taxTypeOptions, setTaxTypeOptions] = useState<{ code: string; label: string }[]>([]);
 
   // 엑셀
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
@@ -143,21 +174,21 @@ export default function CustomerManagementPage() {
 
   // 카테고리
   const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
-  // 사원 목록 (사내담당자 선택용)
   const [employeeOptions, setEmployeeOptions] = useState<{ user_id: string; user_name: string; position_name?: string }[]>([]);
 
+
   // 카테고리 로드
   useEffect(() => {
+    const flatten = (vals: any[]): { code: string; label: string }[] => {
+      const result: { code: string; label: string }[] = [];
+      for (const v of vals) {
+        result.push({ code: v.valueCode, label: v.valueLabel });
+        if (v.children?.length) result.push(...flatten(v.children));
+      }
+      return result;
+    };
     const load = async () => {
       const optMap: Record<string, { code: string; label: string }[]> = {};
-      const flatten = (vals: any[]): { code: string; label: string }[] => {
-        const result: { code: string; label: string }[] = [];
-        for (const v of vals) {
-          result.push({ code: v.valueCode, label: v.valueLabel });
-          if (v.children?.length) result.push(...flatten(v.children));
-        }
-        return result;
-      };
       for (const col of ["division", "status"]) {
         try {
           const res = await apiClient.get(`/table-categories/${CUSTOMER_TABLE}/${col}/values`);
@@ -166,7 +197,6 @@ export default function CustomerManagementPage() {
       }
       setCategoryOptions(optMap);
 
-      // 단가 카테고리
       const priceOpts: Record<string, { code: string; label: string }[]> = {};
       for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
         try {
@@ -175,9 +205,14 @@ export default function CustomerManagementPage() {
         } catch { /* skip */ }
       }
       setPriceCategoryOptions(priceOpts);
+
+      // 세금유형 카테고리
+      try {
+        const taxRes = await apiClient.get(`/table-categories/customer_tax_type/tax_type_name/values`);
+        if (taxRes.data?.success) setTaxTypeOptions(flatten(taxRes.data.data || []));
+      } catch { /* skip */ }
     };
     load();
-    // 사원 목록 로드
     apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true })
       .then((res) => {
         const users = res.data?.data?.data || res.data?.data?.rows || [];
@@ -187,57 +222,46 @@ export default function CustomerManagementPage() {
       }).catch(() => {});
   }, []);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    // 컬럼 표시/숨김/순서/너비
-    const colMap = new Map(LEFT_COLUMNS.map((c) => [c.key, c]));
-    const applied: DataGridColumn[] = [];
-    for (const cs of settings.columns) {
-      if (!cs.visible) continue;
-      const orig = colMap.get(cs.columnName);
-      if (orig) {
-        applied.push({ ...orig, width: `w-[${cs.width}px]`, minWidth: undefined });
-      }
-    }
-    const settingKeys = new Set(settings.columns.map((c) => c.columnName));
-    for (const col of LEFT_COLUMNS) {
-      if (!settingKeys.has(col.key)) applied.push(col);
-    }
-    setGridColumns(applied.length > 0 ? applied : LEFT_COLUMNS);
-    // 필터 설정
-    setFilterConfig(settings.filters);
-  }, []);
-
-  useEffect(() => {
-    const saved = loadTableSettings("customer-mng");
-    if (saved) applyTableSettings(saved);
-  }, []);
-
   // 거래처 목록 조회
   const fetchCustomers = useCallback(async () => {
     setCustomerLoading(true);
     try {
-      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
       const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
+        sort: { columnName: "customer_code", order: "desc" },
       });
       const raw = res.data?.data?.data || res.data?.data?.rows || [];
-      // raw 데이터 보관 (수정 시 원본 카테고리 코드 사용)
       setRawCustomers(raw);
-      // 카테고리 코드→라벨 변환
+
       const resolve = (col: string, code: string) => {
         if (!code) return "";
         return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
       };
-      const data = raw.map((r: any) => ({
-        ...r,
-        division: resolve("division", r.division),
-        status: resolve("status", r.status),
-        internal_manager: r.internal_manager
-          ? (employeeOptions.find((e) => e.user_id === r.internal_manager)?.user_name || r.internal_manager)
-          : "",
-      }));
+      const data = raw.map((r: any) => {
+        const mainContact = mainContactMap[r.id];
+        return {
+          ...r,
+          division: resolve("division", r.division),
+          status: resolve("status", r.status),
+          contact_person: mainContact?.contact_name || "",
+          contact_phone: mainContact?.contact_phone || "",
+          email: mainContact?.contact_email || "",
+        };
+      });
+      // 거래처코드 숫자 기준 내림차순 정렬
+      data.sort((a: any, b: any) => {
+        const aNum = parseInt((a.customer_code || "").replace(/\D/g, ""), 10) || 0;
+        const bNum = parseInt((b.customer_code || "").replace(/\D/g, ""), 10) || 0;
+        return bNum - aNum;
+      });
       setCustomers(data);
       setCustomerCount(res.data?.data?.total || raw.length);
     } catch (err) {
@@ -246,19 +270,39 @@ export default function CustomerManagementPage() {
     } finally {
       setCustomerLoading(false);
     }
-  }, [searchFilters, categoryOptions, employeeOptions]);
+  }, [searchFilters, categoryOptions, employeeOptions, mainContactMap]);
 
   useEffect(() => { fetchCustomers(); }, [fetchCustomers]);
 
-  // 선택된 거래처의 품목 단가 조회
+  // 메인 담당자 조회 (최초 1번 + 저장 후 갱신)
+  const fetchMainContacts = useCallback(async () => {
+    try {
+      const contactRes = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+        dataFilter: { enabled: true, filters: [{ columnName: "is_main", operator: "equals", value: "Y" }] },
+      });
+      const allContacts = contactRes.data?.data?.data || contactRes.data?.data?.rows || [];
+      const map: Record<string, any> = {};
+      for (const c of allContacts) {
+        if ((c.is_main === "Y" || c.is_main === true) && c.customer_id) {
+          map[c.customer_id] = c;
+        }
+      }
+      setMainContactMap(map);
+    } catch { /* skip */ }
+  }, []);
+
+  useEffect(() => { fetchMainContacts(); }, [fetchMainContacts]);
+
   const selectedCustomer = customers.find((c) => c.id === selectedCustomerId);
 
+  // 선택된 거래처의 품목 단가 조회
   useEffect(() => {
-    if (!selectedCustomer?.customer_code) { setPriceItems([]); return; }
+    if (!selectedCustomer?.customer_code) { setPriceItems([]); setPriceCheckedIds([]); return; }
+    setPriceCheckedIds([]);
     const fetchItems = async () => {
       setPriceLoading(true);
       try {
-        // 1. customer_item_mapping 조회 (품목 매핑 — 기본 데이터)
         const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
           page: 1, size: 500,
           dataFilter: { enabled: true, filters: [
@@ -268,7 +312,6 @@ export default function CustomerManagementPage() {
         });
         const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
 
-        // 2. item_id → item_info 조인 (품명 등)
         const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
         let itemMap: Record<string, any> = {};
         if (itemIds.length > 0) {
@@ -284,7 +327,6 @@ export default function CustomerManagementPage() {
           } catch { /* skip */ }
         }
 
-        // 3. customer_item_prices 조회
         let allPrices: any[] = [];
         if (mappings.length > 0) {
           try {
@@ -299,33 +341,34 @@ export default function CustomerManagementPage() {
           } catch { /* skip */ }
         }
 
-        // 4. 매핑별 행 생성 + 오늘 날짜 기준 단가 + 같은 품목 첫 행만 품목코드/품명 표시
         const priceResolve = (col: string, code: string) => {
           if (!code) return "";
           return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
         };
-        const today = new Date().toISOString().split("T")[0];
+        const now = new Date();
+        const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+
+        // 품목 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
+        const grouped: Record<string, { master: any; details: any[] }> = {};
+        const flatItems: any[] = [];
         const seenItemIds = new Set<string>();
-
-        // item_id로 정렬하여 같은 품목끼리 묶기
-        const sortedMappings = [...mappings].sort((a: any, b: any) => (a.item_id || "").localeCompare(b.item_id || ""));
-
-        setPriceItems(sortedMappings.map((m: any) => {
+        for (const m of mappings) {
           const itemKey = m.item_id || "";
-          const itemInfo = itemMap[itemKey] || {};
-          const isFirstOfGroup = !seenItemIds.has(itemKey);
-          if (itemKey) seenItemIds.add(itemKey);
+          if (seenItemIds.has(itemKey)) continue; // 품목당 첫 매핑만 마스터
+          seenItemIds.add(itemKey);
 
-          // 오늘 날짜에 해당하는 단가
-          const itemPriceList = allPrices.filter((p: any) => p.item_id === itemKey);
+          const itemInfo = itemMap[itemKey] || {};
+          const itemPriceList = allPrices
+            .filter((p: any) => p.item_id === itemKey)
+            .sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
           const todayPrice = itemPriceList.find((p: any) =>
             (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
           ) || itemPriceList[0] || {};
 
-          return {
+          const masterRow = {
             ...m,
-            item_number: isFirstOfGroup ? itemKey : "",
-            item_name: isFirstOfGroup ? (itemInfo.item_name || "") : "",
+            item_number: itemKey,
+            item_name: itemInfo.item_name || "",
             base_price_type: priceResolve("base_price_type", todayPrice.base_price_type || ""),
             base_price: todayPrice.base_price || "",
             discount_type: priceResolve("discount_type", todayPrice.discount_type || ""),
@@ -333,7 +376,21 @@ export default function CustomerManagementPage() {
             calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
             currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
           };
-        }));
+
+          // 단가 리스트 (라벨 변환)
+          const priceDetails = itemPriceList.map((p: any) => ({
+            ...p,
+            base_price_type_label: priceResolve("base_price_type", p.base_price_type || ""),
+            discount_type_label: priceResolve("discount_type", p.discount_type || ""),
+            currency_label: priceResolve("currency_code", p.currency_code || ""),
+            is_current: (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today),
+          }));
+
+          grouped[itemKey] = { master: masterRow, details: priceDetails };
+          flatItems.push(masterRow);
+        }
+        setPriceGroups(grouped);
+        setPriceItems(flatItems);
       } catch (err) {
         console.error("품목 조회 실패:", err);
       } finally {
@@ -367,21 +424,198 @@ export default function CustomerManagementPage() {
     return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
   };
 
-  // 거래처 등록 모달
-  const openCustomerRegister = () => {
+  // 모달 내 담당자 목록 조회
+  const fetchModalContacts = useCallback(async (customerId: string) => {
+    setModalContactLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      setModalContacts(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalContacts([]); } finally { setModalContactLoading(false); }
+  }, []);
+
+  // 모달 내 납품처 목록 조회
+  const fetchModalDeliveries = useCallback(async (customerCode: string) => {
+    setModalDeliveryLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
+        autoFilter: true,
+      });
+      setModalDeliveries(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalDeliveries([]); } finally { setModalDeliveryLoading(false); }
+  }, []);
+
+  // 담당자 저장 (등록/수정)
+  const handleModalContactSave = async () => {
+    if (!modalContactForm.contact_name) { toast.error("담당자명은 필수입니다."); return; }
+    if (modalContactEditId) {
+      // 수정 — 로컬 리스트에서 교체 + 메인 설정 시 다른 메인 해제
+      const isSettingMain = modalContactForm.is_main === "Y" || modalContactForm.is_main === true;
+      setModalContacts((prev) => prev.map((c) =>
+        (c._localId || c.id) === modalContactEditId
+          ? { ...c, ...modalContactForm }
+          : isSettingMain ? { ...c, is_main: "N" } : c
+      ));
+    } else {
+      // 추가 — 로컬 리스트에 카드 추가
+      setModalContacts((prev) => [...prev, {
+        ...modalContactForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalContactFormOpen(false);
+    setModalContactForm({});
+    setModalContactEditId(null);
+  };
+
+  // 담당자 삭제
+  const handleModalContactDelete = (contactId: string) => {
+    setModalContacts((prev) => prev.filter((c) => (c._localId || c.id) !== contactId));
+  };
+
+  // 납품처 자동채번 유틸
+  const generateDeliveryCode = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DELIVERY_TABLE}/destination_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        const allRes = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "destination_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const match = (row.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        // 로컬에 추가된 것도 포함
+        for (const d of modalDeliveries) {
+          const match = (d.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLen = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          return prefix + String(maxSeq + 1).padStart(seqLen, "0");
+        }
+      }
+    } catch { /* skip */ }
+    return "";
+  };
+
+  // 납품처 저장 (모달 내)
+  const handleModalDeliverySave = async () => {
+    if (!modalDeliveryForm.destination_name) { toast.error("납품처명은 필수입니다."); return; }
+    if (modalDeliveryEditId) {
+      const isSettingMain = modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true;
+      setModalDeliveries((prev) => prev.map((d) =>
+        (d._localId || d.id) === modalDeliveryEditId
+          ? { ...d, ...modalDeliveryForm }
+          : isSettingMain ? { ...d, is_default: "N" } : d
+      ));
+    } else {
+      setModalDeliveries((prev) => [...prev, {
+        ...modalDeliveryForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalDeliveryFormOpen(false);
+    setModalDeliveryForm({});
+    setModalDeliveryEditId(null);
+    setModalDeliveryFormErrors({});
+  };
+
+  const handleModalDeliveryDelete = (deliveryId: string) => {
+    setModalDeliveries((prev) => prev.filter((d) => (d._localId || d.id) !== deliveryId));
+  };
+
+  // 거래처 등록 모달 열기
+  const openCustomerRegister = async () => {
     setCustomerForm({});
     setFormErrors({});
     setCustomerEditMode(false);
+    setCustomerModalTab("basic");
+    setModalContacts([]);
+    setModalDeliveries([]);
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setTaxTypeRows([]);
     setCustomerModalOpen(true);
+    // 거래처 코드 자동 채번 — 기존 데이터 max값 기반
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${CUSTOMER_TABLE}/customer_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        // 기존 데이터에서 CUST-XXX 패턴의 최대 순번 조회
+        const allRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "customer_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const code = row.customer_code || "";
+          const match = code.match(/(\d+)$/);
+          if (match) {
+            const seq = parseInt(match[1], 10);
+            if (seq > maxSeq) maxSeq = seq;
+          }
+        }
+        // preview로 접두어 패턴 가져오기
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLength = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          const nextSeq = maxSeq + 1;
+          const nextCode = prefix + String(nextSeq).padStart(seqLength, "0");
+          setCustomerForm((prev) => ({ ...prev, customer_code: nextCode, _numberingRuleId: ruleId }));
+        }
+      }
+    } catch { /* skip */ }
   };
 
   const openCustomerEdit = () => {
     if (!selectedCustomer) return;
-    // raw 데이터에서 원본 카테고리 코드 가져오기 (라벨 변환 전 데이터)
     const rawData = rawCustomers.find((c) => c.id === selectedCustomerId);
     setCustomerForm({ ...(rawData || selectedCustomer) });
     setFormErrors({});
     setCustomerEditMode(true);
+    setCustomerModalTab("basic");
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setModalContactForm({});
+    setModalDeliveryForm({});
+    setModalContactEditId(null);
+    setModalDeliveryEditId(null);
+    // 수정 모드에서는 바로 조회
+    const code = (rawData || selectedCustomer).customer_code;
+    const id = (rawData || selectedCustomer).id;
+    if (id) {
+      fetchModalContacts(id);
+      // 세금유형 로드
+      apiClient.post(`/table-management/tables/customer_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: id }] },
+        autoFilter: true,
+      }).then((res: any) => {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        setTaxTypeRows(rows.map((r: any) => ({ _id: r.id, tax_type_name: r.tax_type_name || "", rate: String(r.rate || "") })));
+      }).catch(() => setTaxTypeRows([]));
+    }
+    if (code) fetchModalDeliveries(code);
     setCustomerModalOpen(true);
   };
 
@@ -397,10 +631,84 @@ export default function CustomerManagementPage() {
     });
   };
 
+  // 세금유형/담당자/납품처를 한번에 저장하는 헬퍼
+  const saveSubTables = async (customerId: string, customerCode: string) => {
+    // 세금유형 — 기존 삭제 후 재생성
+    try {
+      const existTax = await apiClient.post(`/table-management/tables/customer_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      const existRows = existTax.data?.data?.data || existTax.data?.data?.rows || [];
+      if (existRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/customer_tax_type/delete`, {
+          data: existRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+      for (const t of taxTypeRows.filter((r) => r.tax_type_name)) {
+        await apiClient.post(`/table-management/tables/customer_tax_type/add`, {
+          id: crypto.randomUUID(), customer_id: customerId,
+          tax_type_name: t.tax_type_name, tax_type_id: t.tax_type_name,
+          rate: t.rate ? Number(t.rate) : 0,
+        });
+      }
+    } catch { /* skip */ }
+
+    // 담당자 — 기존 삭제 후 전체 재생성
+    try {
+      const existContacts = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      const existCRows = existContacts.data?.data?.data || existContacts.data?.data?.rows || [];
+      if (existCRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${CONTACT_TABLE}/delete`, {
+          data: existCRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const c of modalContacts) {
+      try {
+        await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/add`, {
+          id: crypto.randomUUID(), customer_id: customerId,
+          contact_name: c.contact_name || "", contact_phone: c.contact_phone || "",
+          contact_email: c.contact_email || "", department: c.department || "",
+          is_main: c.is_main || "N", memo: c.memo || "",
+        });
+      } catch { /* skip */ }
+    }
+
+    // 납품처 — 기존 삭제 후 전체 재생성
+    try {
+      const existDeliveries = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
+        autoFilter: true,
+      });
+      const existDRows = existDeliveries.data?.data?.data || existDeliveries.data?.data?.rows || [];
+      if (existDRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
+          data: existDRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const d of modalDeliveries) {
+      try {
+        await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
+          id: crypto.randomUUID(), customer_code: customerCode,
+          destination_code: d.destination_code || "", destination_name: d.destination_name || "",
+          address: d.address || "", manager_name: d.manager_name || "",
+          phone: d.phone || "", memo: d.memo || "", is_default: d.is_default || "N",
+        });
+      } catch { /* skip */ }
+    }
+  };
+
   const handleCustomerSave = async () => {
     if (!customerForm.customer_name) { toast.error("거래처명은 필수입니다."); return; }
     if (!customerForm.status) { toast.error("상태는 필수입니다."); return; }
-    // 폼 검증
     const errors = validateForm(customerForm, ["contact_phone", "email", "business_number"]);
     setFormErrors(errors);
     if (Object.keys(errors).length > 0) {
@@ -409,23 +717,72 @@ export default function CustomerManagementPage() {
     }
     setSaving(true);
     try {
-      const { id, created_date, updated_date, writer, company_code, ...fields } = customerForm;
-      // 빈 문자열을 null로 변환 (DB 타입 호환)
+      const { id, created_date, updated_date, writer, company_code, _numberingRuleId, ...fields } = customerForm;
       const cleanFields: Record<string, any> = {};
       for (const [key, value] of Object.entries(fields)) {
         cleanFields[key] = value === "" ? null : value;
       }
+
       if (customerEditMode && id) {
+        // 수정
         await apiClient.put(`/table-management/tables/${CUSTOMER_TABLE}/edit`, {
           originalData: { id }, updatedData: cleanFields,
         });
-        toast.success("수정되었습니다.");
+        await saveSubTables(id, cleanFields.customer_code || customerForm.customer_code);
+        toast.success("저장되었습니다.");
       } else {
+        // 신규 등록
         await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/add`, cleanFields);
-        toast.success("등록되었습니다.");
+        // id 획득
+        const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: cleanFields.customer_code }] },
+          autoFilter: true,
+        });
+        const newRow = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+        if (newRow?.id) {
+          await saveSubTables(newRow.id, cleanFields.customer_code);
+        }
+        toast.success("거래처가 등록되었습니다.");
       }
-      setCustomerModalOpen(false);
+
       fetchCustomers();
+      fetchMainContacts();
+      if (!customerEditMode && continuousInput) {
+        // 연속입력 — 폼 초기화하고 모달 유지
+        setCustomerForm({});
+        setModalContacts([]);
+        setModalDeliveries([]);
+        setTaxTypeRows([]);
+        setCustomerModalTab("basic");
+        // 새 코드 채번
+        try {
+          const ruleRes = await apiClient.get(`/numbering-rules/by-column/${CUSTOMER_TABLE}/customer_code`);
+          const ruleData = ruleRes.data;
+          if (ruleData?.success && ruleData?.data?.ruleId) {
+            const ruleId = ruleData.data.ruleId;
+            const allRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, { page: 1, size: 500, autoFilter: true, sort: { columnName: "customer_code", order: "desc" } });
+            const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+            let maxSeq = 0;
+            for (const row of allRows) { const match = (row.customer_code || "").match(/(\d+)$/); if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; } }
+            const previewRes = await previewNumberingCode(ruleId);
+            if (previewRes.success && previewRes.data?.generatedCode) {
+              const prefix = previewRes.data.generatedCode.replace(/\d+$/, "");
+              const seqLen = (previewRes.data.generatedCode.match(/(\d+)$/) || ["", "001"])[1].length;
+              setCustomerForm({ customer_code: prefix + String(maxSeq + 1).padStart(seqLen, "0") });
+            }
+          }
+        } catch { /* skip */ }
+        toast.success("등록 완료. 다음 거래처를 입력하세요.");
+      } else {
+        setCustomerModalOpen(false);
+        // 우측 패널 갱신
+        if (selectedCustomerId) {
+          const cid = selectedCustomerId;
+          setSelectedCustomerId(null);
+          setTimeout(() => setSelectedCustomerId(cid), 50);
+        }
+      }
     } catch (err: any) {
       toast.error(err.response?.data?.message || "저장에 실패했습니다.");
     } finally {
@@ -437,7 +794,6 @@ export default function CustomerManagementPage() {
   const handleCustomerDelete = async () => {
     if (!selectedCustomerId) return;
     const ok = await confirm("거래처를 삭제하시겠습니까?", {
-      description: "관련된 품목 매핑, 단가, 납품처 정보도 함께 삭제됩니다.",
       variant: "destructive", confirmText: "삭제",
     });
     if (!ok) return;
@@ -455,19 +811,26 @@ export default function CustomerManagementPage() {
   const searchItems = async () => {
     setItemSearchLoading(true);
     try {
-      const filters: any[] = [];
+      const filters: any[] = [
+        { columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" },
+      ];
       if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
-      // 영업관리/판매품 division 필터 (다중값 contains 매칭)
-      filters.push({ columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" });
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
-        page: 1, size: 50,
-        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters },
         autoFilter: true,
       });
       const allItems = res.data?.data?.data || res.data?.data?.rows || [];
-      // 이미 등록된 품목 제외
+      setItemTotalCount(allItems.length);
       const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
-      setItemSearchResults(allItems.filter((item: any) => !existingItemIds.has(item.item_number) && !existingItemIds.has(item.id)));
+      const seenNumbers = new Set<string>();
+      const deduped = allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        if (item.item_number && seenNumbers.has(item.item_number)) return false;
+        if (item.item_number) seenNumbers.add(item.item_number);
+        return true;
+      });
+      setItemSearchResults(deduped);
     } catch { /* skip */ } finally { setItemSearchLoading(false); }
   };
 
@@ -476,7 +839,6 @@ export default function CustomerManagementPage() {
     const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
     if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
     setSelectedItemsForDetail(selected);
-    // 초기 매핑/단가 데이터 세팅
     const mappings: typeof itemMappings = {};
     const prices: typeof itemPrices = {};
     for (const item of selected) {
@@ -504,7 +866,6 @@ export default function CustomerManagementPage() {
     }));
   };
 
-  // 거래처 품번/품명 행 삭제
   const removeMappingRow = (itemKey: string, rowId: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -512,7 +873,17 @@ export default function CustomerManagementPage() {
     }));
   };
 
-  // 거래처 품번/품명 행 수정
+  const handleMappingDragEnd = (itemKey: string, event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setItemMappings((prev) => {
+      const arr = [...(prev[itemKey] || [])];
+      const oldIdx = arr.findIndex((r) => r._id === active.id);
+      const newIdx = arr.findIndex((r) => r._id === over.id);
+      return { ...prev, [itemKey]: arrayMove(arr, oldIdx, newIdx) };
+    });
+  };
+
   const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -534,7 +905,6 @@ export default function CustomerManagementPage() {
     }));
   };
 
-  // 단가 행 삭제
   const removePriceRow = (itemKey: string, rowId: string) => {
     setItemPrices((prev) => ({
       ...prev,
@@ -542,34 +912,44 @@ export default function CustomerManagementPage() {
     }));
   };
 
-  // 단가 행 값 변경
   const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
     setItemPrices((prev) => ({
       ...prev,
       [itemKey]: (prev[itemKey] || []).map((r) => {
         if (r._id !== rowId) return r;
         const updated = { ...r, [field]: value };
-        // 단가 자동 계산: base_price - discount
-        if (["base_price", "discount_type", "discount_value"].includes(field)) {
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
           const bp = Number(updated.base_price) || 0;
           const dv = Number(updated.discount_value) || 0;
           const dt = updated.discount_type;
           let calc = bp;
-          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100); // 할인율
-          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv; // 할인금액
-          updated.calculated_price = String(Math.round(calc));
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1; // "10원" → 10, "100원" → 100
+          if (roundLabel === "반올림") {
+            calc = Math.round(calc / unit) * unit;
+          } else if (roundLabel === "절삭") {
+            calc = Math.floor(calc / unit) * unit;
+          } else if (roundLabel === "올림") {
+            calc = Math.ceil(calc / unit) * unit;
+          }
+          updated.calculated_price = String(Math.floor(calc));
         }
         return updated;
       }),
     }));
   };
 
-  // 품목 상세 저장 (mapping + prices 일괄)
-  // 우측 품목 편집 열기 — 등록과 동일한 상세 입력 모달을 재활용
+  // 품목 편집 열기
   const openEditItem = async (row: any) => {
     const itemKey = row.item_number || row.item_id;
-
-    // item_info에서 품목 정보 조회
     let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
     try {
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
@@ -581,7 +961,6 @@ export default function CustomerManagementPage() {
       if (found) itemInfo = found;
     } catch { /* skip */ }
 
-    // DB에서 해당 품목의 모든 매핑 조회
     let mappingRows: any[] = [];
     try {
       const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
@@ -601,7 +980,6 @@ export default function CustomerManagementPage() {
         }));
     } catch { /* skip */ }
 
-    // DB에서 해당 품목의 모든 기간별 단가 조회
     let priceRows: any[] = [];
     try {
       const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
@@ -627,7 +1005,6 @@ export default function CustomerManagementPage() {
       }));
     } catch { /* skip */ }
 
-    // 빈 단가 행이 없으면 하나 추가
     if (priceRows.length === 0) {
       priceRows.push({
         _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
@@ -639,7 +1016,7 @@ export default function CustomerManagementPage() {
     setSelectedItemsForDetail([itemInfo]);
     setItemMappings({ [itemKey]: mappingRows });
     setItemPrices({ [itemKey]: priceRows });
-    setEditItemData(row); // 편집 모드 표시용
+    setEditItemData(row);
     setItemDetailOpen(true);
   };
 
@@ -655,44 +1032,77 @@ export default function CustomerManagementPage() {
         const mappingRows = itemMappings[itemKey] || [];
 
         if (isEditingExisting && editItemData?.id) {
-          // 편집 모드: 기존 mapping UPDATE
-          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
-            originalData: { id: editItemData.id },
-            updatedData: {
-              customer_item_code: mappingRows[0]?.customer_item_code || "",
-              customer_item_name: mappingRows[0]?.customer_item_name || "",
-              base_price: null, // prices 테이블로 이동
-              discount_type: null,
-              discount_value: null,
-              calculated_price: null,
-            },
-          });
+          // 기존 매핑 조회
+          let existingMaps: any[] = [];
+          try {
+            const existingMappings = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingMaps = existingMappings.data?.data?.data || existingMappings.data?.data?.rows || [];
+          } catch { /* skip */ }
 
-          // 기존 prices 삭제 후 재등록
+          // 매핑 upsert: 기존 것은 update, 새 것은 insert, 남은 것은 delete
+          const usedExistingIds = new Set<string>();
+          let firstMappingId: string | null = editItemData.id;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const existMap = existingMaps[mi];
+            if (existMap) {
+              // update
+              await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+                originalData: { id: existMap.id },
+                updatedData: {
+                  customer_item_code: mappingRows[mi].customer_item_code || "",
+                  customer_item_name: mappingRows[mi].customer_item_name || "",
+                },
+              });
+              usedExistingIds.add(existMap.id);
+              if (mi === 0) firstMappingId = existMap.id;
+            } else {
+              // insert
+              const mRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+                id: crypto.randomUUID(),
+                customer_id: selectedCustomer.customer_code, item_id: itemKey,
+                customer_item_code: mappingRows[mi].customer_item_code || "",
+                customer_item_name: mappingRows[mi].customer_item_name || "",
+              });
+              if (mi === 0 && !firstMappingId) firstMappingId = mRes.data?.data?.id || null;
+            }
+          }
+          // 초과분 delete
+          const toDeleteMaps = existingMaps.filter((m) => !usedExistingIds.has(m.id));
+          if (toDeleteMaps.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: toDeleteMaps.map((m: any) => ({ id: m.id })),
+            });
+          }
+
+          // 기존 단가 조회
+          let existingPriceRows: any[] = [];
           try {
             const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
               page: 1, size: 100,
               dataFilter: { enabled: true, filters: [
-                { columnName: "mapping_id", operator: "equals", value: editItemData.id },
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
               ]}, autoFilter: true,
             });
-            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
-            if (existing.length > 0) {
-              await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
-                data: existing.map((p: any) => ({ id: p.id })),
-              });
-            }
+            existingPriceRows = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
           } catch { /* skip */ }
 
-          // 새 prices INSERT
+          // 단가 upsert
           const priceRows = (itemPrices[itemKey] || []).filter((p) =>
             (p.base_price && Number(p.base_price) > 0) || p.start_date
           );
-          for (const price of priceRows) {
-            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
-              mapping_id: editItemData.id,
-              customer_id: selectedCustomer.customer_code,
-              item_id: itemKey,
+          const usedPriceIds = new Set<string>();
+          for (let pi = 0; pi < priceRows.length; pi++) {
+            const price = priceRows[pi];
+            const priceData = {
+              mapping_id: firstMappingId || editItemData.id,
+              customer_id: selectedCustomer.customer_code, item_id: itemKey,
               start_date: price.start_date || null, end_date: price.end_date || null,
               currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
               base_price: price.base_price ? Number(price.base_price) : null,
@@ -700,10 +1110,28 @@ export default function CustomerManagementPage() {
               discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
               rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
               calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            };
+            const existPrice = existingPriceRows[pi];
+            if (existPrice) {
+              await apiClient.put(`/table-management/tables/${PRICE_TABLE}/edit`, {
+                originalData: { id: existPrice.id },
+                updatedData: priceData,
+              });
+              usedPriceIds.add(existPrice.id);
+            } else {
+              await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+                id: crypto.randomUUID(), ...priceData,
+              });
+            }
+          }
+          // 초과분 delete
+          const toDeletePrices = existingPriceRows.filter((p) => !usedPriceIds.has(p.id));
+          if (toDeletePrices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: toDeletePrices.map((p: any) => ({ id: p.id })),
             });
           }
         } else {
-          // 신규 등록 모드 — 거래처 품번이 없는 경우만 중복 체크
           if (!mappingRows.length || !mappingRows[0]?.customer_item_code) {
             const existingCheck = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
               page: 1, size: 1,
@@ -720,6 +1148,7 @@ export default function CustomerManagementPage() {
 
           let mappingId: string | null = null;
           const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
             customer_id: selectedCustomer.customer_code, item_id: itemKey,
             customer_item_code: mappingRows[0]?.customer_item_code || "",
             customer_item_name: mappingRows[0]?.customer_item_name || "",
@@ -728,6 +1157,7 @@ export default function CustomerManagementPage() {
 
           for (let mi = 1; mi < mappingRows.length; mi++) {
             await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
               customer_id: selectedCustomer.customer_code, item_id: itemKey,
               customer_item_code: mappingRows[mi].customer_item_code || "",
               customer_item_name: mappingRows[mi].customer_item_name || "",
@@ -739,6 +1169,7 @@ export default function CustomerManagementPage() {
           );
           for (const price of priceRows) {
             await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
               mapping_id: mappingId || "", customer_id: selectedCustomer.customer_code, item_id: itemKey,
               start_date: price.start_date || null, end_date: price.end_date || null,
               currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
@@ -755,7 +1186,6 @@ export default function CustomerManagementPage() {
       setItemDetailOpen(false);
       setEditItemData(null);
       setItemCheckedIds(new Set());
-      // 우측 새로고침
       const cid = selectedCustomerId;
       setSelectedCustomerId(null);
       setTimeout(() => setSelectedCustomerId(cid), 50);
@@ -767,68 +1197,115 @@ export default function CustomerManagementPage() {
     }
   };
 
-  // 납품처 저장
-  const handleDeliverySave = async () => {
-    if (!deliveryForm.destination_name || !selectedCustomer) return;
+  // 품목 매핑 삭제
+  const handlePriceItemDelete = async () => {
+    if (priceCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${priceCheckedIds.length}개 품목 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
     try {
-      await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
-        ...deliveryForm,
-        customer_code: selectedCustomer.customer_code,
+      for (const mappingId of priceCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: priceCheckedIds.map((id) => ({ id })),
       });
-      toast.success("납품처가 등록되었습니다.");
-      setDeliveryModalOpen(false);
-      // 납품처 목록 새로고침
+      toast.success(`${priceCheckedIds.length}개 품목 매핑이 삭제되었습니다.`);
+      setPriceCheckedIds([]);
       const cid = selectedCustomerId;
       setSelectedCustomerId(null);
       setTimeout(() => setSelectedCustomerId(cid), 50);
-    } catch (err: any) {
-      toast.error(err.response?.data?.message || "납품처 등록에 실패했습니다.");
+    } catch {
+      toast.error("삭제에 실패했습니다.");
     }
   };
 
+  // EDataTable 컬럼 정의 (거래처 목록) — ts.visibleColumns 순서를 따름
+  const customerColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      customer_code: { width: "w-[120px]" },
+      customer_name: { minWidth: "min-w-[140px]" },
+      division: {
+        width: "w-[80px]",
+        render: (val: any) =>
+          val ? (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
+              {val}
+            </Badge>
+          ) : null,
+      },
+      contact_person: { width: "w-[80px]" },
+      contact_phone: { width: "w-[120px]" },
+      email: { width: "w-[160px]" },
+      business_number: { width: "w-[120px]" },
+      address: { minWidth: "min-w-[150px]" },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val}
+            </Badge>
+          ) : null,
+      },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
   // 엑셀 다운로드
   const handleExcelDownload = async () => {
     if (customers.length === 0) return;
     toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
     try {
-      // 전체 거래처의 품목 매핑 + 단가 조회
       const allMappings: any[] = [];
-      const custCodes = customers.map((c) => c.customer_code).filter(Boolean);
-
-      if (custCodes.length > 0) {
-        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
-          page: 1, size: 5000, autoFilter: true,
-        });
-        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
-
-        // item_id → item_info 조인
-        const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
-        let itemMap: Record<string, any> = {};
-        if (itemIds.length > 0) {
-          try {
-            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
-              page: 1, size: itemIds.length + 10,
-              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
-              autoFilter: true,
-            });
-            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
-              itemMap[item.item_number] = item;
-            }
-          } catch { /* skip */ }
-        }
-
-        for (const m of mappings) {
-          const itemInfo = itemMap[m.item_id] || {};
-          allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
-        }
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 5000, autoFilter: true,
+      });
+      const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemIds.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+            autoFilter: true,
+          });
+          for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+            itemMap[item.item_number] = item;
+          }
+        } catch { /* skip */ }
+      }
+      for (const m of mappings) {
+        const itemInfo = itemMap[m.item_id] || {};
+        allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
       }
 
-      // 거래처 + 품목 플랫 데이터 생성
       const rows: Record<string, any>[] = [];
       for (const c of customers) {
         const custMappings = allMappings.filter((m) => m.customer_id === c.customer_code);
         if (custMappings.length === 0) {
-          // 품목 없는 거래처도 1행
           rows.push({
             거래처코드: c.customer_code, 거래처명: c.customer_name,
             거래유형: getCategoryLabel("division", c.division),
@@ -855,342 +1332,1140 @@ export default function CustomerManagementPage() {
           }
         }
       }
-
       await exportToExcel(rows, "거래처관리.xlsx", "거래처+품목");
       toast.dismiss("excel-dl");
       toast.success(`${rows.length}행 다운로드 완료`);
     } catch (err) {
       toast.dismiss("excel-dl");
-      console.error("엑셀 다운로드 실패:", err);
       toast.error("다운로드에 실패했습니다.");
     }
   };
 
-  // 셀렉트 렌더링
-  const renderSelect = (field: string, value: string, onChange: (v: string) => void, placeholder: string) => (
-    <Select value={value || "__none__"} onValueChange={(v) => onChange(v === "__none__" ? "" : v)}>
-      <SelectTrigger className="h-9"><SelectValue placeholder={placeholder} /></SelectTrigger>
-      <SelectContent>
-        <SelectItem value="__none__">선택 안 함</SelectItem>
-        {(categoryOptions[field] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-      </SelectContent>
-    </Select>
-  );
-
   return (
-    <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
       <DynamicSearchFilter
         tableName={CUSTOMER_TABLE}
-        filterId="customer-mng"
+        filterId="c16-customer"
         onFilterChange={setSearchFilters}
-        dataCount={customerCount}
-        externalFilterConfig={filterConfig}
-        extraActions={
-          <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" disabled={excelDetecting}
-              onClick={async () => {
-                setExcelDetecting(true);
-                try {
-                  const result = await autoDetectMultiTableConfig(CUSTOMER_TABLE);
-                  if (result.success && result.data) {
-                    setExcelChainConfig(result.data);
-                    setExcelUploadOpen(true);
-                  } else {
-                    toast.error(result.message || "테이블 구조 분석 실패");
-                  }
-                } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
-              }}>
-              {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />} 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
-              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
-            </Button>
-          </div>
-        }
+        dataCount={customers.length}
+        externalFilterConfig={ts.filterConfig}
       />
 
-      {/* 분할 패널 */}
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button
+            variant="outline" size="sm" className="h-8" disabled={excelDetecting}
+            onClick={async () => {
+              setExcelDetecting(true);
+              try {
+                const result = await autoDetectMultiTableConfig(CUSTOMER_TABLE);
+                if (result.success && result.data) {
+                  setExcelChainConfig(result.data);
+                  setExcelUploadOpen(true);
+                } else {
+                  toast.error(result.message || "테이블 구조 분석 실패");
+                }
+              } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+            }}
+          >
+            {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />}
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
       <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
         <ResizablePanelGroup direction="horizontal">
           {/* 좌측: 거래처 목록 */}
           <ResizablePanel defaultSize={55} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Users className="w-4 h-4" /> 거래처 목록
-                  <Badge variant="secondary" className="font-normal">{customerCount}건</Badge>
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">거래처 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {customerCount}건
+                  </span>
                 </div>
-                <div className="flex gap-1.5">
-                  <Button size="sm" onClick={openCustomerRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
-                  <Button variant="outline" size="sm" disabled={!selectedCustomerId} onClick={openCustomerEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
-                  <Button variant="destructive" size="sm" disabled={!selectedCustomerId} onClick={handleCustomerDelete}><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                <div className="flex items-center gap-1.5">
+                  <label className="flex items-center gap-1.5 cursor-pointer mr-1">
+                    <input type="checkbox" checked={showInactive} onChange={(e) => setShowInactive(e.target.checked)} className="rounded" />
+                    <span className="text-[11px] text-muted-foreground">거래정지 포함</span>
+                  </label>
+                  <Button size="sm" onClick={openCustomerRegister}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedCustomerId} onClick={openCustomerEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedCustomerId} onClick={handleCustomerDelete}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid
-                gridId="customer-left"
-                columns={gridColumns}
-                data={customers}
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={customerColumns}
+                data={ts.groupData(showInactive ? customers : customers.filter((c) => c.status !== "거래정지"))}
+                rowKey={(row) => row.id}
                 loading={customerLoading}
+                emptyMessage="등록된 거래처가 없어요"
                 selectedId={selectedCustomerId}
-                onSelect={setSelectedCustomerId}
-                onRowDoubleClick={() => openCustomerEdit()}
-                tableName={CUSTOMER_TABLE}
-                emptyMessage="등록된 거래처가 없습니다"
+                onSelect={(id) => setSelectedCustomerId(id)}
+                onRowDoubleClick={(row) => { setSelectedCustomerId(row.id); openCustomerEdit(); }}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-customer"
               />
             </div>
           </ResizablePanel>
 
           <ResizableHandle withHandle />
 
-          {/* 우측: 탭 (품목 정보 / 납품처) */}
+          {/* 우측: 디테일 패널 */}
           <ResizablePanel defaultSize={45} minSize={25}>
             <div className="flex flex-col h-full">
-              {/* 탭 헤더 */}
-              <div className="flex items-center justify-between p-2 border-b bg-muted/10 shrink-0">
-                <div className="flex items-center gap-1">
-                  <button onClick={() => setRightTab("items")}
-                    className={cn("px-3 py-1.5 text-sm rounded-md transition-colors",
-                      rightTab === "items" ? "bg-primary text-primary-foreground font-medium" : "hover:bg-muted text-muted-foreground")}>
-                    <Package className="w-3.5 h-3.5 inline mr-1" />품목 정보
-                  </button>
-                  <button onClick={() => setRightTab("delivery")}
-                    className={cn("px-3 py-1.5 text-sm rounded-md transition-colors",
-                      rightTab === "delivery" ? "bg-primary text-primary-foreground font-medium" : "hover:bg-muted text-muted-foreground")}>
-                    <MapPin className="w-3.5 h-3.5 inline mr-1" />납품처
-                    {deliveryItems.length > 0 && <Badge variant="secondary" className="ml-1 text-[10px] px-1">{deliveryItems.length}</Badge>}
-                  </button>
-                  {selectedCustomer && <Badge variant="outline" className="font-normal ml-2 text-xs">{selectedCustomer.customer_name}</Badge>}
-                </div>
-                <div className="flex gap-1.5">
-                  {rightTab === "items" && (
-                    <Button variant="outline" size="sm" disabled={!selectedCustomerId}
-                      onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
-                      <Plus className="w-3.5 h-3.5 mr-1" /> 품목 추가
-                    </Button>
-                  )}
-                  {rightTab === "delivery" && (
-                    <Button variant="outline" size="sm" disabled={!selectedCustomerId}
-                      onClick={() => { setDeliveryForm({}); setDeliveryModalOpen(true); }}>
-                      <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 등록
-                    </Button>
-                  )}
-                </div>
-              </div>
-
-              {/* 탭 콘텐츠 */}
               {!selectedCustomerId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
-                  좌측에서 거래처를 선택하세요
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">거래처를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 거래처를 선택하면 상세 정보가 표시돼요</div>
+                  </div>
                 </div>
-              ) : rightTab === "items" ? (
-                <DataGrid
-                  gridId="customer-right-items"
-                  columns={RIGHT_COLUMNS}
-                  data={priceItems}
-                  loading={priceLoading}
-                  showRowNumber={false}
-                  tableName={MAPPING_TABLE}
-                  emptyMessage="등록된 품목이 없습니다"
-                  onRowDoubleClick={(row) => openEditItem(row)}
-                />
               ) : (
-                <DataGrid
-                  gridId="customer-right-delivery"
-                  columns={[
-                    { key: "destination_code", label: "납품처코드", width: "w-[110px]" },
-                    { key: "destination_name", label: "납품처명", minWidth: "min-w-[130px]" },
-                    { key: "address", label: "주소", minWidth: "min-w-[150px]" },
-                    { key: "manager_name", label: "담당자", width: "w-[80px]" },
-                    { key: "phone", label: "전화번호", width: "w-[110px]" },
-                    { key: "memo", label: "메모", width: "w-[100px]" },
-                    { key: "is_default", label: "기본", width: "w-[50px]" },
-                  ]}
-                  data={deliveryItems}
-                  loading={deliveryLoading}
-                  showRowNumber={false}
-                  tableName={DELIVERY_TABLE}
-                  emptyMessage="등록된 납품처가 없습니다"
-                />
+                <>
+                  {/* 탭 + 버튼 통합 헤더 */}
+                  <Tabs
+                    value={rightTab}
+                    onValueChange={(v) => setRightTab(v as "items" | "delivery")}
+                    className="flex flex-col flex-1 overflow-hidden gap-0"
+                  >
+                    <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                      <TabsList className="bg-transparent h-auto p-0 rounded-none">
+                        <TabsTrigger
+                          value="items"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <Package className="w-3.5 h-3.5" /> 거래처별 품목정보
+                          {Object.keys(priceGroups).length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{Object.keys(priceGroups).length}</Badge>
+                          )}
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="delivery"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <MapPin className="w-3.5 h-3.5" /> 납품처 정보
+                          {deliveryItems.length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{deliveryItems.length}</Badge>
+                          )}
+                        </TabsTrigger>
+                      </TabsList>
+                      <div className="flex gap-1.5">
+                        {rightTab === "items" ? (
+                          <>
+                            <Button size="sm" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
+                              <Plus className="w-3.5 h-3.5" /> 품목 추가
+                            </Button>
+                            <Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0} onClick={handlePriceItemDelete}>
+                              <Trash2 className="w-3.5 h-3.5" /> 삭제
+                            </Button>
+                          </>
+                        ) : (
+                          <Button size="sm" variant="outline" onClick={openCustomerEdit}>
+                            <Pencil className="w-3.5 h-3.5 mr-1" /> 거래처 수정에서 관리
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 품목정보 탭 */}
+                    <TabsContent value="items" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[40px] text-center px-2">
+                                <input
+                                  type="checkbox"
+                                  className="rounded"
+                                  checked={priceItems.length > 0 && priceCheckedIds.length === priceItems.length}
+                                  onChange={(e) => setPriceCheckedIds(e.target.checked ? priceItems.map((p) => p.id) : [])}
+                                />
+                              </TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                              <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품번</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품명</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                              <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                              <TableHead className="w-[60px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                              <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {priceLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.keys(priceGroups).length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 품목이 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.entries(priceGroups).map(([itemKey, group]) => {
+                              const isExpanded = expandedItems.has(itemKey);
+                              const m = group.master;
+                              const isChecked = priceCheckedIds.includes(m.id);
+                              return (
+                                <React.Fragment key={itemKey}>
+                                  {/* 마스터 행 */}
+                                  <TableRow
+                                    className={cn(
+                                      "cursor-pointer border-l-[3px] border-l-transparent h-[41px]",
+                                      isChecked && "bg-primary/5 border-l-primary"
+                                    )}
+                                    onClick={() => {
+                                      setExpandedItems((prev) => {
+                                        const next = new Set(prev);
+                                        if (next.has(itemKey)) next.delete(itemKey); else next.add(itemKey);
+                                        return next;
+                                      });
+                                    }}
+                                    onDoubleClick={() => openEditItem(m)}
+                                  >
+                                    <TableCell
+                                      className="text-center px-2"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        setPriceCheckedIds((prev) =>
+                                          prev.includes(m.id) ? prev.filter((id) => id !== m.id) : [...prev, m.id]
+                                        );
+                                      }}
+                                    >
+                                      <input type="checkbox" className="rounded" checked={isChecked} readOnly />
+                                    </TableCell>
+                                    <TableCell className="text-[13px] font-mono">
+                                      <div className="flex items-center gap-1">
+                                        {isExpanded
+                                          ? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                          : <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                        }
+                                        {m.item_number}
+                                      </div>
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.customer_item_code}</TableCell>
+                                    <TableCell className="text-[13px]">{m.customer_item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.base_price_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">
+                                      {m.base_price ? Number(m.base_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.discount_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">{m.discount_value ? Number(m.discount_value).toLocaleString() : ""}</TableCell>
+                                    <TableCell className="text-[13px] text-right font-semibold">
+                                      {m.calculated_price ? Number(m.calculated_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.currency_code}</TableCell>
+                                  </TableRow>
+
+                                  {/* 현재 단가 카드 (펼쳤을 때) */}
+                                  {isExpanded && (() => {
+                                    const cp = group.details.find((p) => p.is_current) || group.details[0];
+                                    if (!cp) return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="py-3 px-4 text-xs text-muted-foreground">등록된 단가가 없어요</TableCell>
+                                      </TableRow>
+                                    );
+                                    return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="px-4 py-3">
+                                          <div className="border border-primary/20 rounded-lg bg-card overflow-hidden">
+                                            {/* 카드 헤더 */}
+                                            <div className="flex items-center justify-between px-4 py-2 bg-primary/[0.04] border-b border-primary/10">
+                                              <div className="flex items-center gap-2">
+                                                <Coins className="w-3.5 h-3.5 text-primary" />
+                                                <span className="text-xs font-semibold">적용 단가</span>
+                                                <Badge variant="secondary" className="text-[9px] px-1.5 py-0 bg-primary/10 text-primary">현재</Badge>
+                                              </div>
+                                              {group.details.length > 1 && (
+                                                <span className="text-[10px] text-muted-foreground">전체 {group.details.length}건 중</span>
+                                              )}
+                                            </div>
+                                            {/* 카드 내용 */}
+                                            <div className="px-5 py-3.5 flex items-end gap-0 text-[13px]">
+                                              <div className="flex flex-col pr-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기간</span>
+                                                <span className="font-mono text-muted-foreground text-xs">
+                                                  {cp.start_date ? String(cp.start_date).split("T")[0] : "—"} ~ {cp.end_date ? String(cp.end_date).split("T")[0] : "—"}
+                                                </span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준유형</span>
+                                                <span>{cp.base_price_type_label || "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준가</span>
+                                                <span className="font-mono font-medium">{cp.base_price ? Number(cp.base_price).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인유형</span>
+                                                <span>{cp.discount_type_label && cp.discount_type_label !== "할인없음" ? cp.discount_type_label : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인값</span>
+                                                <span className="font-mono">{cp.discount_value ? Number(cp.discount_value).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">단수처리</span>
+                                                <span>
+                                                  {cp.rounding_unit_value
+                                                    ? (priceCategoryOptions["rounding_unit_value"]?.find((o) => o.code === cp.rounding_unit_value)?.label || cp.rounding_unit_value)
+                                                    : "-"}
+                                                </span>
+                                              </div>
+                                              <span className="text-primary/50 px-4 pb-0.5 text-lg">→</span>
+                                              <div className="flex flex-col pl-1">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">계산단가</span>
+                                                <span className="text-base font-bold font-mono text-foreground">
+                                                  {(cp.calculated_price || cp.unit_price) ? Number(cp.calculated_price || cp.unit_price).toLocaleString() : "-"}
+                                                  <span className="text-xs font-normal text-muted-foreground ml-1.5">{cp.currency_label}</span>
+                                                </span>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })()}
+                                </React.Fragment>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+
+                    {/* 납품처 탭 */}
+                    <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                              <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                              <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                              <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {deliveryLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 납품처가 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.map((d) => (
+                              <TableRow key={d.id} className="h-[41px]">
+                                <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                                <TableCell className="text-sm">{d.destination_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                                <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                                <TableCell className="text-[13px]">{d.phone}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                                <TableCell className="text-center">
+                                  {d.is_default && (
+                                    <Badge variant="default" className="text-[10px] px-1.5 py-0 h-5">메인</Badge>
+                                  )}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </>
               )}
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>
       </div>
 
-      {/* 거래처 등록/수정 모달 */}
-      <Dialog open={customerModalOpen} onOpenChange={setCustomerModalOpen}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
+      {/* ── 모달: 거래처 등록/수정 (3탭) ── */}
+      <Dialog open={customerModalOpen} onOpenChange={(open) => {
+        if (!open && isConfirmOpenRef.current) return;
+        setCustomerModalOpen(open);
+        if (!open) {
+          setModalContactFormOpen(false);
+          setModalDeliveryFormOpen(false);
+          setModalContactForm({});
+          setModalDeliveryForm({});
+          setModalContactEditId(null);
+          setModalDeliveryEditId(null);
+          fetchCustomers();
+          if (customerForm.customer_code) {
+            const cid = selectedCustomerId;
+            setSelectedCustomerId(null);
+            setTimeout(() => setSelectedCustomerId(cid), 50);
+          }
+        }
+      }}>
+        <DialogContent className="max-w-4xl h-[85vh] flex flex-col overflow-hidden p-0">
+          <DialogHeader className="px-6 pt-5 pb-0 shrink-0">
             <DialogTitle>{customerEditMode ? "거래처 수정" : "거래처 등록"}</DialogTitle>
-            <DialogDescription>{customerEditMode ? "거래처 정보를 수정합니다." : "새로운 거래처를 등록합니다."}</DialogDescription>
+            <DialogDescription>
+              {customerEditMode ? "거래처 정보를 수정합니다." : "새로운 거래처를 등록합니다."}
+            </DialogDescription>
           </DialogHeader>
-          <div className="grid grid-cols-2 gap-4 py-4">
-            <div className="space-y-1.5">
-              <Label className="text-sm">거래처 코드</Label>
-              <Input value={customerForm.customer_code || ""} onChange={(e) => setCustomerForm((p) => ({ ...p, customer_code: e.target.value }))}
-                placeholder="거래처 코드" className="h-9" disabled={customerEditMode} />
+
+          <Tabs value={customerModalTab} onValueChange={(v: any) => setCustomerModalTab(v)} className="flex flex-col flex-1 overflow-hidden">
+            <div className="shrink-0">
+              <TabsList className="bg-transparent w-full h-auto p-0 rounded-none gap-0">
+                <TabsTrigger value="basic" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  기본정보
+                </TabsTrigger>
+                <TabsTrigger value="contacts" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  담당자 관리
+                  {modalContacts.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalContacts.length}</span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="delivery" className="flex-1 rounded-none py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  납품처 관리
+                  {modalDeliveries.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalDeliveries.length}</span>
+                  )}
+                </TabsTrigger>
+              </TabsList>
             </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">거래처명 <span className="text-destructive">*</span></Label>
-              <Input value={customerForm.customer_name || ""} onChange={(e) => setCustomerForm((p) => ({ ...p, customer_name: e.target.value }))}
-                placeholder="거래처명" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">거래 유형</Label>
-              {renderSelect("division", customerForm.division, (v) => setCustomerForm((p) => ({ ...p, division: v })), "거래 유형")}
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
-              {renderSelect("status", customerForm.status, (v) => setCustomerForm((p) => ({ ...p, status: v })), "상태")}
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">거래처담당자</Label>
-              <Input value={customerForm.contact_person || ""} onChange={(e) => setCustomerForm((p) => ({ ...p, contact_person: e.target.value }))}
-                placeholder="거래처담당자" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">사내담당자</Label>
-              <Select value={customerForm.internal_manager || "__none__"} onValueChange={(v) => setCustomerForm((p) => ({ ...p, internal_manager: v === "__none__" ? "" : v }))}>
-                <SelectTrigger className="h-9"><SelectValue placeholder="사내담당자 선택" /></SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="__none__">선택 안 함</SelectItem>
-                  {employeeOptions.map((emp) => (
-                    <SelectItem key={emp.user_id} value={emp.user_id}>
-                      {emp.user_name}{emp.position_name ? ` (${emp.position_name})` : ""}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">전화번호</Label>
-              <Input value={customerForm.contact_phone || ""} onChange={(e) => handleFormChange("contact_phone", e.target.value)}
-                placeholder="010-0000-0000" className={cn("h-9", formErrors.contact_phone && "border-destructive")} />
-              {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">이메일</Label>
-              <Input value={customerForm.email || ""} onChange={(e) => handleFormChange("email", e.target.value)}
-                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
-              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">사업자번호</Label>
-              <Input value={customerForm.business_number || ""} onChange={(e) => handleFormChange("business_number", e.target.value)}
-                placeholder="000-00-00000" className={cn("h-9", formErrors.business_number && "border-destructive")} />
-              {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
-            </div>
-            <div className="space-y-1.5 col-span-2">
-              <Label className="text-sm">주소</Label>
-              <Input value={customerForm.address || ""} onChange={(e) => setCustomerForm((p) => ({ ...p, address: e.target.value }))}
-                placeholder="주소" className="h-9" />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setCustomerModalOpen(false)}>취소</Button>
+
+            {/* 기본정보 탭 */}
+            <TabsContent value="basic" className="flex-1 overflow-y-auto mt-0">
+              <div className="px-6 py-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처 코드</Label>
+                    <Input
+                      value={customerForm.customer_code || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, customer_code: e.target.value }))}
+                      placeholder={customerEditMode ? "" : "자동 생성"}
+                      className={cn("h-9 font-mono", !customerEditMode && customerForm.customer_code && "bg-muted")}
+                      readOnly={!customerEditMode && !!customerForm.customer_code}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={customerForm.customer_name || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, customer_name: e.target.value }))}
+                      placeholder="거래처명"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래 유형</Label>
+                    <Select
+                      value={customerForm.division || "__none__"}
+                      onValueChange={(v) => setCustomerForm((p) => ({ ...p, division: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="거래 유형" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["division"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+                    <Select
+                      value={customerForm.status || "__none__"}
+                      onValueChange={(v) => setCustomerForm((p) => ({ ...p, status: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="상태" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처담당자</Label>
+                    <Input
+                      value={customerForm.contact_person || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, contact_person: e.target.value }))}
+                      placeholder="거래처담당자"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">전화번호</Label>
+                    <Input
+                      value={customerForm.contact_phone || ""}
+                      onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                      placeholder="010-0000-0000"
+                      className={cn("h-9", formErrors.contact_phone && "border-destructive")}
+                    />
+                    {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">이메일</Label>
+                    <Input
+                      value={customerForm.email || ""}
+                      onChange={(e) => handleFormChange("email", e.target.value)}
+                      placeholder="example@email.com"
+                      className={cn("h-9", formErrors.email && "border-destructive")}
+                    />
+                    {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">사업자번호</Label>
+                    <Input
+                      value={customerForm.business_number || ""}
+                      onChange={(e) => handleFormChange("business_number", e.target.value)}
+                      placeholder="000-00-00000"
+                      className={cn("h-9", formErrors.business_number && "border-destructive")}
+                    />
+                    {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+                  </div>
+                  <div className="space-y-1.5 col-span-2">
+                    <Label className="text-sm">주소</Label>
+                    <Input
+                      value={customerForm.address || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="주소"
+                      className="h-9"
+                    />
+                  </div>
+                </div>
+
+                {/* 세금유형 */}
+                <div className="mt-4 pt-4 border-t">
+                  <div className="flex items-center justify-between mb-2">
+                    <Label className="text-sm font-semibold flex items-center gap-1.5">
+                      <Coins className="w-3.5 h-3.5 text-primary" /> 세금유형
+                    </Label>
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => {
+                      setTaxTypeRows((prev) => [...prev, { _id: `tax_${Date.now()}_${Math.random()}`, tax_type_name: "", rate: "" }]);
+                    }}>
+                      <Plus className="h-3 w-3 mr-1" /> 추가
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    {taxTypeRows.map((row, idx) => (
+                      <div key={row._id} className="flex gap-2 items-center">
+                        <span className="text-xs text-muted-foreground w-4 shrink-0">{idx + 1}</span>
+                        <Select value={row.tax_type_name} onValueChange={(v) => {
+                          setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, tax_type_name: v } : r));
+                        }}>
+                          <SelectTrigger className="h-9 text-[13px] flex-1"><SelectValue placeholder="세금유형 선택" /></SelectTrigger>
+                          <SelectContent>
+                            {taxTypeOptions.map((o) => (
+                              <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <Input
+                          value={row.rate}
+                          onChange={(e) => {
+                            const v = e.target.value.replace(/[^\d.]/g, "");
+                            setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, rate: v } : r));
+                          }}
+                          placeholder="세율 %"
+                          className="h-9 text-[13px] w-[80px] text-right"
+                        />
+                        <span className="text-xs text-muted-foreground">%</span>
+                        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                          onClick={() => setTaxTypeRows((prev) => prev.filter((r) => r._id !== row._id))}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* 담당자 관리 탭 */}
+            <TabsContent value="contacts" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 담당자 목록 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    담당자 {modalContacts.length}명
+                  </span>
+                  <Button size="sm" onClick={() => {
+                    setModalContactForm({});
+                    setModalContactEditId(null);
+                    setModalContactFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 담당자 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalContactLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalContacts.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Users className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 담당자가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자명</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부서</TableHead>
+                          <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalContacts].sort((a, b) => {
+                          const aMain = a.is_main === "Y" || a.is_main === true ? 0 : 1;
+                          const bMain = b.is_main === "Y" || b.is_main === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((c) => (
+                          <TableRow key={c._localId || c.id} className="h-[41px]">
+                            <TableCell className="text-sm font-medium">{c.contact_name}</TableCell>
+                            <TableCell className="text-[13px]">{c.contact_phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.contact_email}</TableCell>
+                            <TableCell className="text-[13px]">{c.department}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (c.is_main === "Y" || c.is_main === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = c.is_main === "Y" || c.is_main === true;
+                                  if (isCurrentMain) {
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id) ? { ...item, is_main: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== (c._localId || c.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id)
+                                        ? { ...item, is_main: "Y" }
+                                        : { ...item, is_main: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(c.is_main === "Y" || c.is_main === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalContactForm({ ...c });
+                                    setModalContactEditId(c._localId || c.id);
+                                    setModalContactFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalContactDelete(c._localId || c.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 담당자 폼 (인라인) */}
+                {modalContactFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalContactEditId ? "담당자 수정" : "담당자 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalContactForm.contact_name || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_name: e.target.value }))}
+                          placeholder="담당자명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalContactForm.contact_phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalContactForm((p) => ({ ...p, contact_phone: formatted }));
+                          }}
+                          placeholder="010-0000-0000"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">이메일</Label>
+                        <Input
+                          value={modalContactForm.contact_email || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_email: e.target.value }))}
+                          placeholder="example@email.com"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">부서</Label>
+                        <Input
+                          value={modalContactForm.department || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, department: e.target.value }))}
+                          placeholder="부서명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalContactForm.memo || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalContactForm.is_main === "Y" || modalContactForm.is_main === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== modalContactEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalContacts((prev) => prev.map((item) => ({ ...item, is_main: "N" })));
+                                }
+                                setModalContactForm((p) => ({ ...p, is_main: "Y" }));
+                              } else {
+                                setModalContactForm((p) => ({ ...p, is_main: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 담당자</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalContactFormOpen(false); setModalContactForm({}); setModalContactEditId(null); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalContactSave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalContactEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            {/* ── 탭3: 납품처 관리 ── */}
+            <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 납품처 목록 헤더 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    납품처 {modalDeliveries.length}개
+                  </span>
+                  <Button size="sm" onClick={async () => {
+                    const code = await generateDeliveryCode();
+                    setModalDeliveryForm({ destination_code: code });
+                    setModalDeliveryEditId(null);
+                    setModalDeliveryFormErrors({});
+                    setModalDeliveryFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalDeliveryLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalDeliveries.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <MapPin className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 납품처가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalDeliveries].sort((a, b) => {
+                          const aMain = a.is_default === "Y" || a.is_default === true ? 0 : 1;
+                          const bMain = b.is_default === "Y" || b.is_default === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((d) => (
+                          <TableRow key={d._localId || d.id || d.destination_code} className="h-[41px]">
+                            <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                            <TableCell className="text-sm">{d.destination_name}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                            <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                            <TableCell className="text-[13px]">{d.phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (d.is_default === "Y" || d.is_default === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = d.is_default === "Y" || d.is_default === true;
+                                  if (isCurrentMain) {
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id) ? { ...item, is_default: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== (d._localId || d.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id)
+                                        ? { ...item, is_default: "Y" }
+                                        : { ...item, is_default: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(d.is_default === "Y" || d.is_default === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalDeliveryForm({ ...d });
+                                    setModalDeliveryEditId(d._localId || d.id);
+                                    setModalDeliveryFormErrors({});
+                                    setModalDeliveryFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalDeliveryDelete(d._localId || d.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 납품처 폼 (인라인) */}
+                {modalDeliveryFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalDeliveryEditId ? "납품처 수정" : "납품처 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처코드</Label>
+                        <Input
+                          value={modalDeliveryForm.destination_code || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
+                          placeholder="자동 생성"
+                          className={cn("h-8 text-sm font-mono", modalDeliveryForm.destination_code && "bg-muted")}
+                          readOnly={!!modalDeliveryForm.destination_code && !modalDeliveryEditId}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalDeliveryForm.destination_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
+                          placeholder="납품처명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자</Label>
+                        <Input
+                          value={modalDeliveryForm.manager_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
+                          placeholder="담당자"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 col-span-2">
+                        <Label className="text-xs">주소</Label>
+                        <Input
+                          value={modalDeliveryForm.address || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, address: e.target.value }))}
+                          placeholder="주소"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalDeliveryForm.phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalDeliveryForm((p) => ({ ...p, phone: formatted }));
+                            const err = validateField("phone", formatted);
+                            setModalDeliveryFormErrors((p) => {
+                              const n = { ...p };
+                              if (err) n.phone = err; else delete n.phone;
+                              return n;
+                            });
+                          }}
+                          placeholder="010-0000-0000"
+                          className={cn("h-8 text-sm", modalDeliveryFormErrors.phone && "border-destructive")}
+                        />
+                        {modalDeliveryFormErrors.phone && <p className="text-xs text-destructive">{modalDeliveryFormErrors.phone}</p>}
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalDeliveryForm.memo || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== modalDeliveryEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalDeliveries((prev) => prev.map((item) => ({ ...item, is_default: "N" })));
+                                }
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "Y" }));
+                              } else {
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 납품처로 설정</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalDeliveryFormOpen(false); setModalDeliveryForm({}); setModalDeliveryEditId(null); setModalDeliveryFormErrors({}); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalDeliverySave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalDeliveryEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+          <div className="border-t px-6 py-3 flex items-center gap-2 shrink-0">
+            {!customerEditMode && (
+              <label className="flex items-center gap-2 cursor-pointer mr-auto">
+                <input type="checkbox" checked={continuousInput} onChange={(e) => setContinuousInput(e.target.checked)} className="rounded" />
+                <span className="text-sm font-medium">연속입력</span>
+              </label>
+            )}
+            <Button variant="outline" onClick={() => setCustomerModalOpen(false)}>닫기</Button>
             <Button onClick={handleCustomerSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {customerEditMode ? "저장" : "등록"}
             </Button>
-          </DialogFooter>
+          </div>
         </DialogContent>
       </Dialog>
 
-      {/* 품목 추가 모달 */}
+      {/* ── 모달: 품목 선택 (1단계) ── */}
       <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
-        <DialogContent className="max-w-3xl max-h-[70vh]" onInteractOutside={(e) => e.preventDefault()}>
+        <DialogContent className="max-w-3xl">
           <DialogHeader>
             <DialogTitle>품목 선택</DialogTitle>
-            <DialogDescription>거래처에 추가할 품목을 선택하세요.</DialogDescription>
+            <DialogDescription>거래처에 추가할 품목을 선택하세요. (전체: {itemTotalCount}건 / 대상: {itemSearchResults.length}건{itemCheckedIds.size > 0 ? ` / 선택: ${itemCheckedIds.size}건` : ""})</DialogDescription>
           </DialogHeader>
           <div className="flex gap-2 mb-3">
-            <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
+            <Input
+              placeholder="품명/품목코드 검색"
+              value={itemSearchKeyword}
               onChange={(e) => setItemSearchKeyword(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && searchItems()}
-              className="h-9 flex-1" />
+              className="h-9 flex-1"
+            />
             <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
               {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
             </Button>
           </div>
           <div className="overflow-auto max-h-[350px] border rounded-lg">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">
-                    <input type="checkbox"
+            <Table noWrapper>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted h-10">
+                  <TableHead className="w-[40px] text-center px-2">
+                    <input
+                      type="checkbox"
+                      className="rounded"
                       checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
                       onChange={(e) => {
                         if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
                         else setItemCheckedIds(new Set());
-                      }} />
+                      }}
+                    />
                   </TableHead>
-                  <TableHead className="w-[120px]">품목코드</TableHead>
-                  <TableHead className="min-w-[140px]">품명</TableHead>
-                  <TableHead className="w-[100px]">규격</TableHead>
-                  <TableHead className="w-[100px]">재질</TableHead>
-                  <TableHead className="w-[60px]">단위</TableHead>
+                  <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="min-w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                  <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {itemSearchResults.length === 0 ? (
-                  <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                      검색 결과가 없어요
+                    </TableCell>
+                  </TableRow>
                 ) : itemSearchResults.map((item) => (
-                  <TableRow key={item.id} className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                  <TableRow
+                    key={item.id}
+                    className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
                     onClick={() => setItemCheckedIds((prev) => {
                       const next = new Set(prev);
                       if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
                       return next;
-                    })}>
-                    <TableCell className="text-center"><input type="checkbox" checked={itemCheckedIds.has(item.id)} readOnly /></TableCell>
-                    <TableCell className="text-xs max-w-[120px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
+                    })}
+                  >
+                    <TableCell className="text-center px-2">
+                      <input type="checkbox" className="rounded" checked={itemCheckedIds.has(item.id)} readOnly />
+                    </TableCell>
+                    <TableCell className="text-[13px] font-mono">
+                      <span className="block truncate" title={item.item_number}>{item.item_number}</span>
+                    </TableCell>
                     <TableCell className="text-sm">{item.item_name}</TableCell>
-                    <TableCell className="text-xs">{item.size}</TableCell>
-                    <TableCell className="text-xs">{item.material}</TableCell>
-                    <TableCell className="text-xs">{item.unit}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.size}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.material}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.unit}</TableCell>
                   </TableRow>
                 ))}
               </TableBody>
             </Table>
           </div>
-          <DialogFooter>
-            <div className="flex items-center gap-2 w-full justify-between">
-              <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
-              <div className="flex gap-2">
-                <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
-                <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
-                  <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
-                </Button>
-              </div>
+          <DialogFooter className="flex items-center justify-between w-full">
+            <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+              <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+              </Button>
             </div>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* 품목 상세정보 입력 모달 (2단계) */}
-      <FullscreenDialog
-        open={itemDetailOpen}
-        onOpenChange={setItemDetailOpen}
-        title={`📋 품목 상세정보 ${editItemData ? "수정" : "입력"} — ${selectedCustomer?.customer_name || ""}`}
-        description={editItemData ? "거래처 품번/품명과 기간별 단가를 수정합니다." : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
-        defaultMaxWidth="max-w-[1100px]"
-        footer={
-          <>
-            <Button variant="outline" onClick={() => {
-              setItemDetailOpen(false);
-              if (!editItemData) setItemSelectOpen(true); // 신규일 때만 품목 선택으로 돌아감
-              setEditItemData(null);
-            }}>{editItemData ? "취소" : "← 이전"}</Button>
-            <Button onClick={handleItemDetailSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 품목 추가 완료
-            </Button>
-          </>
-        }
-      >
-
-          <div className="space-y-6 py-2">
+      {/* ── 모달: 품목 상세 입력 (2단계) ── */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedCustomer?.customer_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData
+                ? "거래처 품번/품명과 기간별 단가를 수정합니다."
+                : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2 flex-1 overflow-y-auto">
             {selectedItemsForDetail.map((item, idx) => {
               const itemKey = item.item_number || item.id;
               const mappingRows = itemMappings[itemKey] || [];
@@ -1204,124 +2479,227 @@ export default function CustomerManagementPage() {
                     <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
                   </div>
 
-                  <div className="flex gap-4 p-4">
-                    {/* 좌: 거래처 품번/품명 (다중) */}
-                    <div className="flex-1 border rounded-lg p-4 bg-blue-50/30 dark:bg-blue-950/10">
-                      <div className="flex items-center justify-between mb-3">
-                        <span className="text-sm font-semibold">🏷 거래처 품번/품명 관리</span>
+                  <div className="flex gap-4 p-5 items-stretch">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Tag className="w-3.5 h-3.5 text-primary" /> 거래처 품번/품명 관리
+                        </span>
                         <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
                           <Plus className="h-3 w-3 mr-1" /> 품번 추가
                         </Button>
                       </div>
-                      <div className="space-y-2">
+                      <div className="border-2 border-foreground/20 rounded-lg bg-background p-3 space-y-2 min-h-[200px] max-h-[350px] overflow-y-auto flex-1">
                         {mappingRows.length === 0 ? (
-                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없습니다</div>
-                        ) : (<>
-                          <div className="flex gap-2 items-center text-[10px] text-muted-foreground font-medium">
-                            <span className="w-4 shrink-0"></span>
-                            <span className="flex-1">거래처 품번</span>
-                            <span className="flex-1">거래처 품명</span>
-                            <span className="w-7 shrink-0"></span>
-                          </div>
-                          {mappingRows.map((mRow, mIdx) => (
-                          <div key={mRow._id} className="flex gap-2 items-center">
-                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
-                            <Input value={mRow.customer_item_code}
-                              onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_code", e.target.value)}
-                              placeholder="거래처 품번" className="h-8 text-sm flex-1" />
-                            <Input value={mRow.customer_item_name}
-                              onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_name", e.target.value)}
-                              placeholder="거래처 품명" className="h-8 text-sm flex-1" />
-                            <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
-                              onClick={() => removeMappingRow(itemKey, mRow._id)}>
-                              <X className="h-3 w-3" />
-                            </Button>
-                          </div>
-                        ))}
-                        </>)}
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : (
+                          <DndContext
+                            sensors={dndSensors}
+                            collisionDetection={closestCenter}
+                            onDragEnd={(e) => handleMappingDragEnd(itemKey, e)}
+                          >
+                            <SortableContext items={mappingRows.map((r) => r._id)} strategy={verticalListSortingStrategy}>
+                              {mappingRows.map((mRow, mIdx) => (
+                                <SortableMappingRow key={mRow._id} id={mRow._id}>
+                                  <span className="text-xs text-muted-foreground/50 font-mono w-4 shrink-0 text-center">{mIdx + 1}</span>
+                                  <Input
+                                    value={mRow.customer_item_code}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_code", e.target.value)}
+                                    placeholder="거래처 품번"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Input
+                                    value={mRow.customer_item_name}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_name", e.target.value)}
+                                    placeholder="거래처 품명"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Button
+                                    variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                                    onClick={() => removeMappingRow(itemKey, mRow._id)}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                </SortableMappingRow>
+                              ))}
+                            </SortableContext>
+                          </DndContext>
+                        )}
                       </div>
                     </div>
 
                     {/* 우: 기간별 단가 */}
-                    <div className="flex-1 border rounded-lg p-4 bg-amber-50/30 dark:bg-amber-950/10">
-                      <div className="flex items-center justify-between mb-3">
-                        <span className="text-sm font-semibold">💰 기간별 단가 설정</span>
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Coins className="w-3.5 h-3.5 text-primary" /> 기간별 단가 설정
+                        </span>
                         <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
                           <Plus className="h-3 w-3 mr-1" /> 단가 추가
                         </Button>
                       </div>
-
-                      <div className="space-y-3">
+                      <div className="space-y-3 flex-1 overflow-y-auto max-h-[350px]">
                         {prices.map((price, pIdx) => (
-                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
-                            <div className="flex items-center justify-between">
-                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
-                              {prices.length > 1 && (
-                                <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
-                                  onClick={() => removePriceRow(itemKey, price._id)}>
-                                  <X className="h-3 w-3" />
-                                </Button>
-                              )}
+                          <div key={price._id} className="border-2 border-foreground/20 rounded-lg bg-background overflow-hidden">
+                            <div
+                              className="flex items-center justify-between px-4 py-2.5 cursor-pointer hover:bg-muted/50 transition-colors"
+                              onClick={() => setCollapsedPriceCards((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(price._id)) next.delete(price._id); else next.add(price._id);
+                                return next;
+                              })}
+                            >
+                              <div className="flex items-center gap-2">
+                                {collapsedPriceCards.has(price._id)
+                                  ? <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                                  : <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                                }
+                                <span className="text-[13px] font-semibold text-muted-foreground">단가 {pIdx + 1}</span>
+                                {collapsedPriceCards.has(price._id) && price.calculated_price && (
+                                  <span className="text-xs text-muted-foreground ml-2">
+                                    {price.start_date || "—"} ~ {price.end_date || "—"} · <span className="font-mono font-bold text-foreground">{Number(price.calculated_price).toLocaleString()}</span> {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                  </span>
+                                )}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                {prices.length > 1 && (
+                                  <Button
+                                    variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
+                                    onClick={(e) => { e.stopPropagation(); removePriceRow(itemKey, price._id); }}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                )}
+                              </div>
                             </div>
-                            {/* 기간 */}
+                            {!collapsedPriceCards.has(price._id) && <div className="px-4 pb-4 space-y-2.5">
+                            {/* 기간 + 통화 */}
                             <div className="flex gap-2 items-center">
                               <div className="flex-1">
-                                <FormDatePicker value={price.start_date}
-                                  onChange={(v) => updatePriceRow(itemKey, price._id, "start_date", v)} placeholder="시작일" />
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">시작일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.start_date}
+                                  onChange={(e) => {
+                                    const v = e.target.value;
+                                    updatePriceRow(itemKey, price._id, "start_date", v);
+                                    if (price.end_date && v > price.end_date) {
+                                      updatePriceRow(itemKey, price._id, "end_date", v);
+                                    }
+                                  }}
+                                  max={price.end_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
                               </div>
-                              <span className="text-xs text-muted-foreground">~</span>
+                              <span className="text-xs text-muted-foreground mt-4">~</span>
                               <div className="flex-1">
-                                <FormDatePicker value={price.end_date}
-                                  onChange={(v) => updatePriceRow(itemKey, price._id, "end_date", v)} placeholder="종료일" />
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">종료일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.end_date}
+                                  onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                  min={price.start_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
                               </div>
                               <div className="w-[80px]">
-                                <Select value={price.currency_code} onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="통화" /></SelectTrigger>
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">&nbsp;</Label>
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="통화" /></SelectTrigger>
                                   <SelectContent>
-                                    {(priceCategoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
                                   </SelectContent>
                                 </Select>
                               </div>
                             </div>
-                            {/* 기준가/할인/반올림 */}
-                            <div className="flex gap-2 items-center">
-                              <div className="w-[90px]">
-                                <Select value={price.base_price_type} onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준" /></SelectTrigger>
-                                  <SelectContent>
-                                    {(priceCategoryOptions["base_price_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-                                  </SelectContent>
-                                </Select>
-                              </div>
-                              <Input value={price.base_price}
-                                onChange={(e) => updatePriceRow(itemKey, price._id, "base_price", e.target.value)}
-                                className="h-8 text-xs text-right flex-1" placeholder="기준가" />
-                              <div className="w-[90px]">
-                                <Select value={price.discount_type} onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
-                                  <SelectContent>
-                                    <SelectItem value="none">할인없음</SelectItem>
-                                    {(priceCategoryOptions["discount_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-                                  </SelectContent>
-                                </Select>
-                              </div>
-                              <Input value={price.discount_value}
-                                onChange={(e) => updatePriceRow(itemKey, price._id, "discount_value", e.target.value)}
-                                className="h-8 text-xs text-right w-[60px]" placeholder="0" />
-                              <div className="w-[90px]">
-                                <Select value={price.rounding_unit_value} onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
-                                  <SelectContent>
-                                    {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-                                  </SelectContent>
-                                </Select>
-                              </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "base_price", raw);
+                                }}
+                                className="h-9 text-[13px] text-right col-span-3"
+                                placeholder="기준가"
+                              />
                             </div>
-                            {/* 계산된 단가 표시 */}
-                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
-                              <span className="text-xs text-muted-foreground">계산 단가:</span>
-                              <span className="font-bold text-sm">{price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}</span>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-9 text-[13px] text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
                             </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-1.5 pt-2 border-t">
+                              <span className="text-[13px] text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-base font-mono">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                              {price.calculated_price && price.currency_code && (
+                                <span className="text-[13px] text-muted-foreground">
+                                  {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                </span>
+                              )}
+                            </div>
+                            </div>}
                           </div>
                         ))}
                       </div>
@@ -1331,57 +2709,21 @@ export default function CustomerManagementPage() {
               );
             })}
           </div>
-
-      </FullscreenDialog>
-
-      {/* 납품처 등록 모달 */}
-      <Dialog open={deliveryModalOpen} onOpenChange={setDeliveryModalOpen}>
-        <DialogContent className="max-w-lg">
-          <DialogHeader>
-            <DialogTitle>납품처 등록</DialogTitle>
-            <DialogDescription>{selectedCustomer?.customer_name}의 납품처를 등록합니다.</DialogDescription>
-          </DialogHeader>
-          <div className="grid grid-cols-2 gap-4 py-4">
-            <div className="space-y-1.5">
-              <Label className="text-sm">납품처코드</Label>
-              <Input value={deliveryForm.destination_code || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
-                placeholder="납품처코드" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">납품처명 <span className="text-destructive">*</span></Label>
-              <Input value={deliveryForm.destination_name || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
-                placeholder="납품처명" className="h-9" />
-            </div>
-            <div className="space-y-1.5 col-span-2">
-              <Label className="text-sm">주소</Label>
-              <Input value={deliveryForm.address || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, address: e.target.value }))}
-                placeholder="주소" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">담당자</Label>
-              <Input value={deliveryForm.manager_name || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
-                placeholder="담당자" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">전화번호</Label>
-              <Input value={deliveryForm.phone || ""} onChange={(e) => {
-                const formatted = formatField("phone", e.target.value);
-                setDeliveryForm((p) => ({ ...p, phone: formatted }));
-                const err = validateField("phone", formatted);
-                setFormErrors((p) => { const n = { ...p }; if (err) n.delivery_phone = err; else delete n.delivery_phone; return n; });
-              }}
-                placeholder="010-0000-0000" className={cn("h-9", formErrors.delivery_phone && "border-destructive")} />
-              {formErrors.delivery_phone && <p className="text-xs text-destructive">{formErrors.delivery_phone}</p>}
-            </div>
-            <div className="space-y-1.5 col-span-2">
-              <Label className="text-sm">메모</Label>
-              <Input value={deliveryForm.memo || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
-                placeholder="메모" className="h-9" />
-            </div>
-          </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setDeliveryModalOpen(false)}>취소</Button>
-            <Button onClick={handleDeliverySave}><Save className="w-4 h-4 mr-1.5" /> 저장</Button>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -1397,7 +2739,6 @@ export default function CustomerManagementPage() {
           config={excelChainConfig}
           onSuccess={() => {
             fetchCustomers();
-            // 우측 새로고침
             const cid = selectedCustomerId;
             setSelectedCustomerId(null);
             setTimeout(() => setSelectedCustomerId(cid), 50);
@@ -1405,12 +2746,14 @@ export default function CustomerManagementPage() {
         />
       )}
 
+      {/* 테이블 설정 모달 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={CUSTOMER_TABLE}
-        settingsId="customer-mng"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
 
       {ConfirmDialogComponent}
diff --git a/frontend/app/(main)/COMPANY_29/sales/order/page.tsx b/frontend/app/(main)/COMPANY_29/sales/order/page.tsx
index 0b889292..f9a358d4 100644
--- a/frontend/app/(main)/COMPANY_29/sales/order/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/sales/order/page.tsx
@@ -1,21 +1,22 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-// Card, CardContent 제거 — DynamicSearchFilter가 대체
-import { Badge } from "@/components/ui/badge";
 import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
-  Plus, Trash2, RotateCcw, Save, Loader2, FileSpreadsheet, Download,
-  ClipboardList, Pencil, Search, X, Maximize2, Minimize2, Truck, Settings2,
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  ClipboardList, Pencil, Search, X, Truck, Package,
   ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,
+  Settings2, RotateCcw, Filter, Check, ArrowUp, ArrowDown,
 } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
@@ -23,17 +24,15 @@ import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
 import { ShippingPlanBatchModal } from "@/components/common/ShippingPlanBatchModal";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { SmartSelect } from "@/components/common/SmartSelect";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 
 const DETAIL_TABLE = "sales_order_detail";
+const MASTER_TABLE = "sales_order_mng";
 
-// 천단위 구분자 표시용 (입력 중에는 콤마 포함 표시, 저장 시 숫자만)
+// 천단위 구분자 표시용
 const formatNumber = (val: string) => {
   const num = val.replace(/[^\d.-]/g, "");
   if (!num) return "";
@@ -42,28 +41,116 @@ const formatNumber = (val: string) => {
   return parts.join(".");
 };
 const parseNumber = (val: string) => val.replace(/,/g, "");
-const MASTER_TABLE = "sales_order_mng";
 
-// 메인 목록 테이블 컬럼 (sales_order_detail 기준)
-const GRID_COLUMNS: DataGridColumn[] = [
-  { key: "order_no", label: "수주번호", width: "w-[120px]" },
-  { key: "part_code", label: "품번", width: "w-[120px]", editable: true },
-  { key: "part_name", label: "품명", width: "w-[150px]", editable: true },
-  { key: "spec", label: "규격", width: "w-[120px]", editable: true },
-  { key: "unit", label: "단위", width: "w-[70px]", editable: true },
-  { key: "qty", label: "수량", width: "w-[90px]", editable: true, inputType: "number", formatNumber: true, align: "right" },
-  { key: "ship_qty", label: "출하수량", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "balance_qty", label: "잔량", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "unit_price", label: "단가", width: "w-[100px]", editable: true, inputType: "number", formatNumber: true, align: "right" },
-  { key: "amount", label: "금액", width: "w-[110px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[70px]" },
-  { key: "due_date", label: "납기일", width: "w-[110px]" },
-  { key: "memo", label: "메모", width: "w-[100px]", editable: true },
+// 플랫 테이블 컬럼 정의 (마스터+디테일 통합)
+const FLAT_COLUMNS = [
+  { key: "order_no", label: "수주번호", source: "master" },
+  { key: "partner_id", label: "거래처", source: "master" },
+  { key: "order_date", label: "수주일", source: "master" },
+  { key: "part_code", label: "품번", source: "detail" },
+  { key: "part_name", label: "품명", source: "detail" },
+  { key: "spec", label: "규격", source: "detail" },
+  { key: "unit", label: "단위", source: "detail" },
+  { key: "qty", label: "수량", source: "detail" },
+  { key: "ship_qty", label: "출하수량", source: "detail" },
+  { key: "balance_qty", label: "잔량", source: "detail" },
+  { key: "unit_price", label: "단가", source: "detail" },
+  { key: "amount", label: "금액", source: "detail" },
+  { key: "due_date", label: "납기일", source: "detail" },
+  { key: "memo", label: "메모", source: "master" },
 ];
 
-// 조건부 레이어 설정 (input_mode, sell_mode에 따라 표시 필드가 달라짐)
-// Zone 10: input_mode → 공급업체우선(CAT_MLZWPH5R_983R) / 품목우선(CAT_MLZWPUQC_PB8Z)
-// Zone 17: sell_mode → 해외판매(CAT_MLZWFF2Z_BQCV)
+const DETAIL_HEADER_COLS = FLAT_COLUMNS.filter((c) => c.source === "detail");
+
+// 필터용 전체 키
+const GRID_COLUMNS_CONFIG = FLAT_COLUMNS.map(({ key, label }) => ({ key, label }));
+
+// 총 컬럼 수: 체크박스(1) + 플랫 컬럼(14) = 15
+const TOTAL_COLS = 15;
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
 
 export default function SalesOrderPage() {
   const { user } = useAuth();
@@ -77,13 +164,13 @@ export default function SalesOrderPage() {
 
   // 모달
   const [isModalOpen, setIsModalOpen] = useState(false);
-  // isModalFullscreen 제거됨 — FullscreenDialog 사용
   const [isEditMode, setIsEditMode] = useState(false);
   const [saving, setSaving] = useState(false);
   const [masterForm, setMasterForm] = useState<Record<string, any>>({});
   const [detailRows, setDetailRows] = useState<any[]>([]);
+  const [allowPriceEdit, setAllowPriceEdit] = useState(true);
 
-  // 품목 선택 모달 (리피터에서 품목 추가용)
+  // 품목 선택 모달
   const [itemSelectOpen, setItemSelectOpen] = useState(false);
   const [itemSearchKeyword, setItemSearchKeyword] = useState("");
   const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
@@ -108,38 +195,15 @@ export default function SalesOrderPage() {
   // 체크된 행 (다중선택)
   const [checkedIds, setCheckedIds] = useState<string[]>([]);
 
+  // 납품처 목록
+  const [deliveryOptions, setDeliveryOptions] = useState<{ code: string; label: string }[]>([]);
+
   // 테이블 설정
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [gridColumns, setGridColumns] = useState<DataGridColumn[]>(GRID_COLUMNS);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
+  const ts = useTableSettings("c16-sales-order", DETAIL_TABLE, GRID_COLUMNS_CONFIG);
 
-  // 테이블 설정 적용 (컬럼 + 필터)
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    // 컬럼 표시/숨김/순서/너비
-    const colMap = new Map(GRID_COLUMNS.map((c) => [c.key, c]));
-    const applied: DataGridColumn[] = [];
-    for (const cs of settings.columns) {
-      if (!cs.visible) continue;
-      const orig = colMap.get(cs.columnName);
-      if (orig) {
-        applied.push({ ...orig, width: `w-[${cs.width}px]`, minWidth: undefined });
-      }
-    }
-    const settingKeys = new Set(settings.columns.map((c) => c.columnName));
-    for (const col of GRID_COLUMNS) {
-      if (!settingKeys.has(col.key)) applied.push(col);
-    }
-    setGridColumns(applied.length > 0 ? applied : GRID_COLUMNS);
-
-    // 필터 설정 → DynamicSearchFilter에 전달
-    setFilterConfig(settings.filters);
-  }, []);
-
-  // 마운트 시 저장된 설정 복원
-  useEffect(() => {
-    const saved = loadTableSettings("sales-order");
-    if (saved) applyTableSettings(saved);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  // 헤더 필터 & 정렬
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
 
   // 카테고리 로드
   useEffect(() => {
@@ -154,7 +218,6 @@ export default function SalesOrderPage() {
         }
         return result;
       };
-      // 라벨 치환 + 중복 제거 (같은 label이면 첫 번째만 유지)
       const LABEL_REPLACE: Record<string, string> = {
         "공급업체 우선": "거래처 우선",
         "공급업체우선": "거래처 우선",
@@ -180,7 +243,7 @@ export default function SalesOrderPage() {
           } catch { /* skip */ }
         })
       );
-      // 거래처 목록도 로드
+      // 거래처 목록
       try {
         const custRes = await apiClient.post(`/table-management/tables/customer_mng/data`, {
           page: 1, size: 500, autoFilter: true,
@@ -188,7 +251,7 @@ export default function SalesOrderPage() {
         const custs = custRes.data?.data?.data || custRes.data?.data?.rows || [];
         optMap["partner_id"] = custs.map((c: any) => ({ code: c.customer_code, label: `${c.customer_name} (${c.customer_code})` }));
       } catch { /* skip */ }
-      // 사용자 목록 로드 (담당자 선택용)
+      // 사용자 목록
       try {
         const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
           page: 1, size: 500, autoFilter: true,
@@ -199,7 +262,7 @@ export default function SalesOrderPage() {
           label: `${u.user_name || u.name || u.user_id}${u.position_name ? ` (${u.position_name})` : ""}`,
         }));
       } catch { /* skip */ }
-      // item_info 카테고리도 로드 (unit, material 등 코드→라벨 변환용)
+      // item_info 카테고리
       for (const col of ["unit", "material", "division", "type"]) {
         try {
           const res = await apiClient.get(`/table-categories/item_info/${col}/values`);
@@ -209,6 +272,12 @@ export default function SalesOrderPage() {
         } catch { /* skip */ }
       }
       setCategoryOptions(optMap);
+      // division 기본값
+      const divs = optMap["item_division"] || [];
+      const salesDiv = divs.find((o: any) => o.label === "영업관리")
+        || divs.find((o: any) => o.label === "제품")
+        || divs.find((o: any) => o.label === "판매품");
+      if (salesDiv) setItemSearchDivision(salesDiv.code);
     };
     loadCategories();
   }, []);
@@ -217,11 +286,12 @@ export default function SalesOrderPage() {
   const fetchOrders = useCallback(async () => {
     setLoading(true);
     try {
-      const filters: any[] = searchFilters.map((f) => ({
+      const filters = searchFilters.map(f => ({
         columnName: f.columnName,
         operator: f.operator,
         value: f.value,
       }));
+
       const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
@@ -230,7 +300,7 @@ export default function SalesOrderPage() {
       });
       const rows = res.data?.data?.data || res.data?.data?.rows || [];
 
-      // order_no → sales_order_mng 조인 (memo 등 마스터 필드 보강)
+      // order_no → sales_order_mng 조인
       const orderNos = [...new Set(rows.map((r: any) => r.order_no).filter(Boolean))];
       let masterMap: Record<string, any> = {};
       if (orderNos.length > 0) {
@@ -241,13 +311,11 @@ export default function SalesOrderPage() {
             autoFilter: true,
           });
           const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
-          for (const m of masters) {
-            masterMap[m.order_no] = m;
-          }
+          for (const m of masters) masterMap[m.order_no] = m;
         } catch { /* skip */ }
       }
 
-      // part_code → item_info 조인 (품명/규격이 비어있는 경우 보강)
+      // part_code → item_info 조인
       const partCodes = [...new Set(rows.map((r: any) => r.part_code).filter(Boolean))];
       let itemMap: Record<string, any> = {};
       if (partCodes.length > 0) {
@@ -258,9 +326,7 @@ export default function SalesOrderPage() {
             autoFilter: true,
           });
           const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
-          for (const item of items) {
-            itemMap[item.item_number] = item;
-          }
+          for (const item of items) itemMap[item.item_number] = item;
         } catch { /* skip */ }
       }
 
@@ -279,8 +345,10 @@ export default function SalesOrderPage() {
           ...row,
           part_name: row.part_name || item?.item_name || "",
           spec: row.spec || item?.size || "",
+          material: row.material || (item ? (resolveLabel("item_material", item.material) || item.material || "") : ""),
           unit: resolveLabel("item_unit", rawUnit) || rawUnit,
           memo: row.memo || master?.memo || "",
+          _master: master || {},
         };
       });
 
@@ -295,16 +363,103 @@ export default function SalesOrderPage() {
 
   useEffect(() => { fetchOrders(); }, [fetchOrders]);
 
+  // 카테고리 코드→라벨 변환
+  const resolveLabel = useCallback((key: string, code: string) => {
+    if (!code) return "";
+    if (key === "partner_id" || key === "manager_id" || key === "price_mode") {
+      return categoryOptions[key]?.find((o) => o.code === code)?.label || code;
+    }
+    return code;
+  }, [categoryOptions]);
+
+  // 플랫 행 생성 (마스터 필드를 각 디테일 행에 병합)
+  const flatRows = useMemo(() => {
+    return orders.map((row) => {
+      const master = row._master || {};
+      return {
+        ...row,
+        partner_id: resolveLabel("partner_id", master.partner_id || row.partner_id || ""),
+        order_date: master.order_date || row.order_date || "",
+        memo: row.memo || master.memo || "",
+      };
+    });
+  }, [orders, resolveLabel]);
+
+  // 컬럼별 고유값 (헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of FLAT_COLUMNS) {
+      const values = new Set<string>();
+      flatRows.forEach((row) => {
+        const val = row[col.key];
+        if (val !== null && val !== undefined && val !== "") values.add(String(val));
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [flatRows]);
+
+  // 필터 + 정렬 적용된 플랫 데이터
+  const filteredFlatRows = useMemo(() => {
+    let rows = [...flatRows];
+
+    // 1차: 헤더 필터 적용
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      rows = rows.filter((row) => {
+        const cellVal = row[colKey] != null ? String(row[colKey]) : "";
+        return values.has(cellVal);
+      });
+    }
+
+    // 2차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      rows.sort((a, b) => {
+        const av = a[key] ?? "";
+        const bv = b[key] ?? "";
+        const na = Number(av); const nb = Number(bv);
+        if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+        return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+      });
+    }
+
+    return rows;
+  }, [flatRows, headerFilters, sortState]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
+  };
+
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
+  };
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
+    );
+  };
+
   const getCategoryLabel = (col: string, code: string) => {
     if (!code) return "";
     const found = categoryOptions[col]?.find((o) => o.code === code);
     return found?.label || code;
   };
 
-  // 등록 모달 열기
-  // 납품처 목록 (거래처 선택 시 조회)
-  const [deliveryOptions, setDeliveryOptions] = useState<{ code: string; label: string }[]>([]);
-
   const loadDeliveryOptions = async (customerCode: string) => {
     if (!customerCode) { setDeliveryOptions([]); return; }
     try {
@@ -321,22 +476,24 @@ export default function SalesOrderPage() {
     } catch { setDeliveryOptions([]); }
   };
 
+  // 등록 모달 열기
   const openRegisterModal = () => {
-    // 기본값: 각 카테고리의 첫 번째 옵션
     const defaultSellMode = categoryOptions["sell_mode"]?.[0]?.code || "";
     const defaultInputMode = categoryOptions["input_mode"]?.[0]?.code || "";
     const defaultPriceMode = categoryOptions["price_mode"]?.[0]?.code || "";
-    setMasterForm({ input_mode: defaultInputMode, sell_mode: defaultSellMode, price_mode: defaultPriceMode, manager_id: user?.userId || "", order_date: new Date().toISOString().split("T")[0] });
+    setMasterForm({
+      input_mode: defaultInputMode, sell_mode: defaultSellMode, price_mode: defaultPriceMode,
+      manager_id: user?.userId || "", order_date: new Date().toISOString().split("T")[0],
+    });
     setDetailRows([]);
     setDeliveryOptions([]);
     setIsEditMode(false);
     setIsModalOpen(true);
   };
 
-  // 수정 모달 열기 (order_no로 마스터 + 디테일 조회)
+  // 수정 모달 열기
   const openEditModal = async (orderNo: string) => {
     try {
-      // 마스터 조회
       const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
         page: 1, size: 1,
         dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
@@ -344,7 +501,6 @@ export default function SalesOrderPage() {
       });
       const masterData = (masterRes.data?.data?.data || masterRes.data?.data?.rows || [])[0];
 
-      // 디테일 조회
       const detailRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
         page: 1, size: 100,
         dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
@@ -361,42 +517,29 @@ export default function SalesOrderPage() {
     }
   };
 
-  // 삭제 (다중 선택)
+  // 삭제 (마스터 단위)
   const handleDelete = async () => {
     if (checkedIds.length === 0) { toast.error("삭제할 수주를 선택해주세요."); return; }
     const selectedItems = orders.filter((o) => checkedIds.includes(o.id));
     const orderNos = [...new Set(selectedItems.map((o) => o.order_no))];
-    const ok = await confirm(`${checkedIds.length}건의 수주 데이터를 삭제하시겠습니까?`, {
+    const ok = await confirm(`${orderNos.length}건의 수주를 삭제하시겠습니까?`, {
       description: "삭제된 데이터는 복구할 수 없습니다.",
       variant: "destructive",
       confirmText: "삭제",
     });
     if (!ok) return;
     try {
-      // 선택된 디테일 행 삭제
-      await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
-        data: checkedIds.map((id) => ({ id })),
-      });
-      // 해당 수주번호의 남은 디테일이 없으면 마스터도 삭제
       for (const orderNo of orderNos) {
-        const remaining = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
           page: 1, size: 1,
           dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
           autoFilter: true,
         });
-        const rows = remaining.data?.data?.data || remaining.data?.data?.rows || [];
-        if (rows.length === 0) {
-          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
-            page: 1, size: 1,
-            dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
-            autoFilter: true,
+        const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+        if (masters.length > 0) {
+          await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
+            data: masters.map((m: any) => ({ id: m.id })),
           });
-          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
-          if (masters.length > 0) {
-            await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
-              data: masters.map((m: any) => ({ id: m.id })),
-            });
-          }
         }
       }
       toast.success("삭제되었습니다.");
@@ -417,18 +560,14 @@ export default function SalesOrderPage() {
       toast.error("품목을 1개 이상 추가해주세요.");
       return;
     }
-
     setSaving(true);
     try {
       const { id, created_date, updated_date, writer, company_code, created_by, updated_by, ...masterFields } = masterForm;
-
       if (isEditMode && id) {
-        // 마스터 수정
         await apiClient.put(`/table-management/tables/${MASTER_TABLE}/edit`, {
           originalData: { id },
           updatedData: masterFields,
         });
-        // 기존 디테일 삭제 후 재삽입
         const existingDetails = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
           page: 1, size: 100,
           dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: masterForm.order_no }] },
@@ -441,19 +580,16 @@ export default function SalesOrderPage() {
           });
         }
       } else {
-        // 마스터 등록
         await apiClient.post(`/table-management/tables/${MASTER_TABLE}/add`, masterFields);
       }
-
-      // 디테일 등록
       for (const row of detailRows) {
         const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
         await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
           ...detailFields,
+          id: crypto.randomUUID(),
           order_no: masterForm.order_no,
         });
       }
-
       toast.success(isEditMode ? "수정되었습니다." : "등록되었습니다.");
       setIsModalOpen(false);
       fetchOrders();
@@ -464,29 +600,34 @@ export default function SalesOrderPage() {
     }
   };
 
-  // 품목 검색 (리피터에서 추가)
+  // 품목 검색
   const searchItems = async (page?: number, size?: number) => {
     const p = page ?? itemPage;
     const s = size ?? itemPageSize;
     setItemSearchLoading(true);
     try {
       const filters: any[] = [];
-      if (itemSearchKeyword) {
-        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
-      }
-      // division 필터는 다중값(쉼표 구분)이므로 contains로 부분 매칭
-      if (itemSearchDivision !== "all") {
-        filters.push({ columnName: "division", operator: "contains", value: itemSearchDivision });
-      }
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
-        page: p, size: s,
+        page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
       });
       const resData = res.data?.data;
-      setItemSearchResults(resData?.data || resData?.rows || []);
-      setItemTotal(resData?.total || 0);
-      setItemTotalPages(resData?.totalPages || Math.ceil((resData?.total || 0) / s));
+      let allRows = resData?.data || resData?.rows || [];
+      // 관리품목 필터 (코드/라벨 혼재 대응)
+      if (itemSearchDivision !== "all") {
+        const divLabel = categoryOptions["item_division"]?.find((o) => o.code === itemSearchDivision)?.label || "";
+        allRows = allRows.filter((item: any) => {
+          const div = item.division || "";
+          return div.includes(itemSearchDivision) || (divLabel && div.includes(divLabel));
+        });
+      }
+      const total = allRows.length;
+      const start = (p - 1) * s;
+      setItemSearchResults(allRows.slice(start, start + s));
+      setItemTotal(total);
+      setItemTotalPages(Math.max(1, Math.ceil(total / s)));
     } catch { /* skip */ } finally {
       setItemSearchLoading(false);
     }
@@ -501,10 +642,7 @@ export default function SalesOrderPage() {
 
   const commitItemPageInput = () => {
     const parsed = parseInt(itemPageInput, 10);
-    if (isNaN(parsed) || itemPageInput.trim() === "") {
-      setItemPageInput(String(itemPage));
-      return;
-    }
+    if (isNaN(parsed) || itemPageInput.trim() === "") { setItemPageInput(String(itemPage)); return; }
     const clamped = Math.max(1, Math.min(parsed, itemTotalPages || 1));
     if (clamped !== itemPage) handleItemPageChange(clamped);
     setItemPageInput(String(clamped));
@@ -520,18 +658,15 @@ export default function SalesOrderPage() {
     const selected = Array.from(itemSelectedMap.values());
     if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
 
-    // 단가방식에 따라 단가 조회
     const isStandardPrice = masterForm.price_mode === "CAT_MM0BUZKL_HJ7U" || masterForm.price_mode === "CAT_MLKG792S_54WJ";
     const isCustomerPrice = masterForm.price_mode === "CAT_MM0BV3OS_41DX" || masterForm.price_mode === "CAT_MLKG7D8K_N8SI";
     const partnerId = masterForm.partner_id;
-    const today = new Date().toISOString().split("T")[0];
 
-    // 거래처별 단가 조회 (선택된 품목들에 대해)
     let customerPriceMap: Record<string, string> = {};
     if (isCustomerPrice && partnerId) {
       try {
         const itemIds = selected.map((item) => item.item_number || item.id);
-        const res = await apiClient.post(`/table-management/tables/customer_item_mapping/data`, {
+        const res = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
           page: 1, size: 500,
           dataFilter: {
             enabled: true,
@@ -542,41 +677,42 @@ export default function SalesOrderPage() {
           },
           autoFilter: true,
         });
-        const mappings = res.data?.data?.data || res.data?.data?.rows || [];
-        for (const m of mappings) {
-          // calculated_price 우선, 없으면 current_unit_price
-          const price = m.calculated_price || m.current_unit_price || "";
-          if (price) customerPriceMap[m.item_id] = String(price);
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        for (const p of prices) {
+          const start = p.start_date || "";
+          const end = p.end_date || "";
+          if (start && start > today) continue;
+          if (end && end < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) {
+            const existing = customerPriceMap[p.item_id];
+            if (!existing || Number(price) > 0) customerPriceMap[p.item_id] = String(price);
+          }
         }
-      } catch (err) {
-        // 단가 조회 실패 시 무시
-      }
+      } catch { /* skip */ }
     }
 
     const newRows = selected.map((item) => {
       const itemCode = item.item_number || item.id;
       let unitPrice = "";
-
       if (isStandardPrice) {
-        // 기준단가: item_info의 standard_price 또는 selling_price
         unitPrice = item.standard_price || item.selling_price || "";
       } else if (isCustomerPrice && partnerId) {
-        // 거래처별 단가
         unitPrice = customerPriceMap[itemCode] || "";
       }
-
       return {
         _id: `new_${Date.now()}_${Math.random()}`,
         part_code: itemCode,
         part_name: item.item_name,
         spec: item.size || "",
         material: getCategoryLabel("item_material", item.material) || item.material || "",
+        packing_material: "",
         unit: getCategoryLabel("item_unit", item.unit) || item.unit || "",
-        qty: "",
-        standard_price: item.standard_price || "",
+        qty: "1",
+        pack_qty: "0",
         unit_price: unitPrice,
-        amount: "",
-        currency_code: item.currency_code || "",
+        amount: unitPrice ? String(1 * parseFloat(unitPrice)) : "",
         due_date: "",
       };
     });
@@ -587,11 +723,73 @@ export default function SalesOrderPage() {
     setItemSelectOpen(false);
   };
 
+  // 단가 재계산: 단가방식/거래처 변경 시 기존 품목 단가 갱신
+  const recalcPrices = useCallback(async (priceMode: string, partnerId: string) => {
+    if (detailRows.length === 0) return;
+    const STANDARD_CODES = ["CAT_MM0BUZKL_HJ7U", "CAT_MLKG792S_54WJ"];
+    const CUSTOMER_CODES = ["CAT_MM0BV3OS_41DX", "CAT_MLKG7D8K_N8SI"];
+    const isStandard = STANDARD_CODES.includes(priceMode);
+    const isCustomer = CUSTOMER_CODES.includes(priceMode);
+
+    if (isStandard) {
+      // 품목 기준단가 조회
+      const itemCodes = detailRows.map((r) => r.part_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+          autoFilter: true,
+        });
+        const items = res.data?.data?.data || res.data?.data?.rows || [];
+        const priceMap: Record<string, string> = {};
+        for (const item of items) {
+          const price = item.standard_price || item.selling_price || "";
+          if (price) priceMap[item.item_number] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.part_code] || "";
+          const qty = parseFloat(row.qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    } else if (isCustomer && partnerId) {
+      // 거래처별 단가 조회
+      const itemCodes = detailRows.map((r) => r.part_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "customer_id", operator: "equals", value: partnerId },
+            { columnName: "item_id", operator: "in", value: itemCodes },
+          ]},
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        const priceMap: Record<string, string> = {};
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) priceMap[p.item_id] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.part_code] || "";
+          const qty = parseFloat(row.qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    }
+  }, [detailRows]);
+
   const updateDetailRow = (idx: number, field: string, value: string) => {
     setDetailRows((prev) => {
       const next = [...prev];
       next[idx] = { ...next[idx], [field]: value };
-      // 수량 × 단가 = 금액 자동 계산
       if (field === "qty" || field === "unit_price") {
         const qty = parseFloat(field === "qty" ? value : next[idx].qty) || 0;
         const price = parseFloat(field === "unit_price" ? value : next[idx].unit_price) || 0;
@@ -605,17 +803,21 @@ export default function SalesOrderPage() {
     setDetailRows((prev) => prev.filter((_, i) => i !== idx));
   };
 
-  // input_mode 값으로 레이어 판단
-  // 거래처 우선 (구: 공급업체 우선) - 두 코드 모두 지원
+  // 조건부 레이어 판단
   const isSupplierFirst = masterForm.input_mode === "CAT_MLZWPH5R_983R" || masterForm.input_mode === "CAT_MLKG5KP8_C39W";
-  const isItemFirst = masterForm.input_mode === "CAT_MLZWPUQC_PB8Z" || masterForm.input_mode === "CAT_MLKG5FZO_HS1B";
   const isOverseas = masterForm.sell_mode === "CAT_MLZWFF2Z_BQCV" || masterForm.sell_mode === "CAT_MLKGAR2W_HAPO";
 
   const handleExcelDownload = async () => {
     if (orders.length === 0) { toast.error("다운로드할 데이터가 없습니다."); return; }
+    const cols = ["order_no","part_code","part_name","spec","unit","qty","ship_qty","balance_qty","unit_price","amount","currency_code","due_date","memo"];
+    const labels: Record<string, string> = {
+      order_no:"수주번호",part_code:"품번",part_name:"품명",spec:"규격",unit:"단위",
+      qty:"수량",ship_qty:"출하수량",balance_qty:"잔량",unit_price:"단가",
+      amount:"금액",currency_code:"통화",due_date:"납기일",memo:"메모",
+    };
     const data = orders.map((o) => {
       const row: Record<string, any> = {};
-      for (const col of GRID_COLUMNS) row[col.label] = o[col.key] || "";
+      for (const col of cols) row[labels[col]] = o[col] || "";
       return row;
     });
     await exportToExcel(data, "수주관리.xlsx", "수주목록");
@@ -624,260 +826,603 @@ export default function SalesOrderPage() {
 
   return (
     <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 필터 (사용자 설정 가능) */}
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground">
+        <span>영업관리</span>
+        <span className="opacity-40">/</span>
+        <span className="font-medium text-foreground">수주관리</span>
+      </nav>
+
+      {/* 검색 필터 (DynamicSearchFilter) */}
       <DynamicSearchFilter
         tableName={DETAIL_TABLE}
-        filterId="sales-order"
+        filterId="c16-sales-order"
         onFilterChange={setSearchFilters}
-        dataCount={totalCount}
-        externalFilterConfig={filterConfig}
+        dataCount={orders.length}
+        externalFilterConfig={ts.filterConfig}
       />
 
-      {/* 메인 테이블 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm flex flex-col">
-        <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-          <div className="font-semibold flex items-center gap-2 text-sm">
-            <ClipboardList className="w-5 h-5" /> 수주 목록
-            <Badge variant="secondary" className="font-normal">{totalCount}건</Badge>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
-              <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
-            </Button>
-            <Button size="sm" onClick={openRegisterModal}>
-              <Plus className="w-4 h-4 mr-1.5" /> 수주 등록
-            </Button>
-            <Button variant="outline" size="sm" disabled={checkedIds.length !== 1} onClick={() => {
+      {/* 액션 바 */}
+      <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-bold">수주 목록</h2>
+          <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+            {totalCount}건
+          </span>
+        </div>
+        <div className="flex items-center gap-2 overflow-x-auto">
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4" /> 등록
+          </Button>
+          <Button
+            variant="outline" size="sm"
+            disabled={checkedIds.length !== 1}
+            onClick={() => {
               const item = orders.find((o) => o.id === checkedIds[0]);
               if (item) openEditModal(item.order_no);
-            }}>
-              <Pencil className="w-4 h-4 mr-1.5" /> 수정
-            </Button>
-            <Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDelete}>
-              <Trash2 className="w-4 h-4 mr-1.5" /> 삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
-            </Button>
-            <Button variant="outline" size="sm" disabled={checkedIds.length === 0} onClick={() => setShippingPlanOpen(true)}>
-              <Truck className="w-4 h-4 mr-1.5" /> 출하계획 {checkedIds.length > 0 && `(${checkedIds.length})`}
-            </Button>
-            <Button variant="outline" size="sm" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-          </div>
+            }}
+          >
+            <Pencil className="w-4 h-4" /> 수정
+          </Button>
+          <Button
+            variant="outline" size="sm"
+            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10 hover:text-destructive"
+            disabled={checkedIds.length === 0}
+            onClick={handleDelete}
+          >
+            <Trash2 className="w-4 h-4" /> 삭제{checkedIds.length > 0 && ` (${checkedIds.length})`}
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4" /> 엑셀
+          </Button>
+          <Button variant="outline" size="sm" disabled={checkedIds.length === 0} onClick={() => setShippingPlanOpen(true)}>
+            <Truck className="w-4 h-4" /> 출하계획{checkedIds.length > 0 && ` (${checkedIds.length})`}
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+            <Settings2 className="w-4 h-4" /> 설정
+          </Button>
         </div>
+      </div>
 
-        <DataGrid
-          gridId="sales-order"
-          columns={gridColumns}
-          data={orders}
-          loading={loading}
-          showCheckbox
-          showRowNumber={false}
-          checkedIds={checkedIds}
-          onCheckedChange={setCheckedIds}
-          onRowDoubleClick={(row) => openEditModal(row.order_no)}
-          tableName={DETAIL_TABLE}
-          emptyMessage="등록된 수주가 없습니다"
-          onCellEdit={() => fetchOrders()}
-        />
+      {/* 데이터 테이블 (플랫 리스트) */}
+      <div className="flex-1 overflow-hidden rounded-lg border border-border bg-card">
+        <div className="h-full overflow-auto">
+          <Table style={{ minWidth: "1500px" }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "100px" }} />
+              <col style={{ width: "120px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "70px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "90px" }} />
+              <col style={{ width: "110px" }} />
+              <col style={{ width: "100px" }} />
+              <col style={{ width: "120px" }} />
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = filteredFlatRows.map((r) => r.id);
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
+                  <Checkbox
+                    checked={(() => {
+                      const allFilteredIds = filteredFlatRows.map((r) => r.id);
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
+                  />
+                </TableHead>
+                {FLAT_COLUMNS.map((col) => {
+                  const isRight = ["qty", "ship_qty", "balance_qty", "unit_price", "amount"].includes(col.key);
+                  return (
+                    <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none", isRight && "text-right")}>
+                      <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                        <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                          <span className="truncate">{col.label}</span>
+                          {sortState?.key === col.key && (
+                            sortState.direction === "asc"
+                              ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                              : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                          )}
+                        </div>
+                        {(columnUniqueValues[col.key] || []).length > 0 && (
+                          <HeaderFilterPopover
+                            colKey={col.key} colLabel={col.label}
+                            uniqueValues={columnUniqueValues[col.key] || []}
+                            filterValues={headerFilters[col.key] || new Set<string>()}
+                            onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                          />
+                        )}
+                      </div>
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
+                  </TableCell>
+                </TableRow>
+              ) : filteredFlatRows.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <ClipboardList className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 수주가 없어요</span>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                filteredFlatRows.map((row) => {
+                  const isChecked = checkedIds.includes(row.id);
+                  return (
+                    <TableRow
+                      key={row.id}
+                      className={cn(
+                        "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                        isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                      )}
+                      onClick={() => {
+                        setCheckedIds((prev) =>
+                          prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                        );
+                      }}
+                      onDoubleClick={() => openEditModal(row.order_no)}
+                    >
+                      <TableCell
+                        className="text-center cursor-pointer"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setCheckedIds((prev) =>
+                            prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                          );
+                        }}
+                      >
+                        <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                      </TableCell>
+                      <TableCell className="font-mono whitespace-nowrap text-[13px]">{row.order_no}</TableCell>
+                      <TableCell className="text-[13px] truncate max-w-[140px]"><span className="block truncate">{row.partner_id || ""}</span></TableCell>
+                      <TableCell className="whitespace-nowrap text-[13px]">{row.order_date || ""}</TableCell>
+                      <TableCell className="font-mono text-[13px]">{row.part_code}</TableCell>
+                      <TableCell className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.part_name}>{row.part_name}</span></TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                      <TableCell className="text-[13px]">{row.unit}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.qty ? Number(row.qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px] text-muted-foreground">{row.ship_qty ? Number(row.ship_qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.balance_qty ? Number(row.balance_qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px] font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-[13px]">{row.due_date || ""}</TableCell>
+                      <TableCell className="text-muted-foreground"><span className="block truncate max-w-[120px]">{row.memo || ""}</span></TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
       </div>
 
       {/* 수주 등록/수정 모달 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title={isEditMode ? "수주 수정" : "수주 등록"}
-        description={isEditMode ? "수주 정보를 수정합니다." : "새로운 수주를 등록합니다."}
-        footer={
-          <>
-            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
-            <Button onClick={handleSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
-            </Button>
-          </>
-        }
-      >
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="flex flex-col gap-0 p-0 max-w-5xl w-full" style={{ maxHeight: "85vh" }}>
+          <DialogHeader className="shrink-0 border-b border-border px-6 py-5">
+            <DialogTitle className="text-[17px] font-bold">
+              {isEditMode ? "수주 수정" : "수주 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-sm text-muted-foreground">
+              {isEditMode ? "수주 정보를 수정합니다." : "새로운 수주를 등록합니다."}
+            </DialogDescription>
+          </DialogHeader>
 
-          <div className="space-y-4 py-2">
-            {/* 기본 레이어 (항상 표시) */}
-            <div className="grid grid-cols-4 gap-4">
-              <div className="space-y-1.5">
-                <Label className="text-sm">수주번호 <span className="text-destructive">*</span></Label>
-                <Input value={masterForm.order_no || ""} onChange={(e) => setMasterForm((p) => ({ ...p, order_no: e.target.value }))}
-                  placeholder="수주번호" className="h-9" disabled={isEditMode} />
+          <div className="flex-1 overflow-y-auto px-6 py-5 space-y-6">
+            {/* 기본 정보 섹션 */}
+            <div className="space-y-3">
+              <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                기본 정보
+                <div className="flex-1 h-px bg-border" />
               </div>
-              <div className="space-y-1.5">
-                <Label className="text-sm">수주일</Label>
-                <FormDatePicker value={masterForm.order_date || ""} onChange={(v) => setMasterForm((p) => ({ ...p, order_date: v }))} placeholder="수주일" />
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-sm">판매 유형</Label>
-                <SmartSelect options={categoryOptions["sell_mode"] || []} value={masterForm.sell_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, sell_mode: v }))} placeholder="선택" />
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-sm">입력방식</Label>
-                <SmartSelect options={categoryOptions["input_mode"] || []} value={masterForm.input_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, input_mode: v }))} placeholder="선택" />
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-sm">단가방식</Label>
-                <SmartSelect options={categoryOptions["price_mode"] || []} value={masterForm.price_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, price_mode: v }))} placeholder="선택" />
+              <div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    수주번호 <span className="text-destructive">*</span>
+                  </Label>
+                  <Input
+                    value={masterForm.order_no || ""}
+                    onChange={(e) => setMasterForm((p) => ({ ...p, order_no: e.target.value }))}
+                    placeholder="수주번호" className="h-9" disabled={isEditMode}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    수주일 <span className="text-destructive">*</span>
+                  </Label>
+                  <Input
+                    type="date"
+                    value={masterForm.order_date || ""}
+                    onChange={(e) => setMasterForm((p) => ({ ...p, order_date: e.target.value }))}
+                    className="h-9"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    판매유형 <span className="text-destructive">*</span>
+                  </Label>
+                  <Select value={masterForm.sell_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, sell_mode: v }))}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                    <SelectContent>
+                      {(categoryOptions["sell_mode"] || []).map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">입력방식</Label>
+                  <Select value={masterForm.input_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, input_mode: v }))}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                    <SelectContent>
+                      {(categoryOptions["input_mode"] || []).map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">단가방식</Label>
+                  <Select value={masterForm.price_mode || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, price_mode: v })); recalcPrices(v, masterForm.partner_id || ""); }}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                    <SelectContent>
+                      {(categoryOptions["price_mode"] || []).map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex items-end pb-1">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <Checkbox checked={allowPriceEdit} onCheckedChange={(v) => setAllowPriceEdit(!!v)} />
+                    <span className="text-sm font-medium">단가 수정 허용</span>
+                  </label>
+                </div>
               </div>
             </div>
 
-            {/* 레이어 2: 거래처 우선 (거래처, 담당자, 납품처, 납품장소) */}
+            {/* 거래처 우선 조건부 레이어 */}
             {isSupplierFirst && (
-              <div className="grid grid-cols-4 gap-4 border-t pt-4">
-                <div className="space-y-1.5">
-                  <Label className="text-sm">거래처</Label>
-                  <SmartSelect options={categoryOptions["partner_id"] || []} value={masterForm.partner_id || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, partner_id: v, delivery_partner_id: "" })); loadDeliveryOptions(v); }} placeholder="거래처 선택" />
+              <div className="rounded-lg border border-dashed border-border bg-muted/50 p-4 space-y-3">
+                <div className="flex items-center gap-1.5 text-xs font-semibold text-primary">
+                  <ClipboardList className="w-3.5 h-3.5" /> 거래처 정보
                 </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">담당자</Label>
-                  <SmartSelect options={categoryOptions["manager_id"] || []} value={masterForm.manager_id || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager_id: v }))} placeholder="담당자 선택" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">납품처</Label>
-                  {deliveryOptions.length > 0 ? (
-                    <SmartSelect options={deliveryOptions} value={masterForm.delivery_partner_id || ""} onValueChange={(v) => {
-                      setMasterForm((p) => ({ ...p, delivery_partner_id: v }));
-                      const found = deliveryOptions.find((o) => o.code === v);
-                      if (found) {
-                        const addr = found.label.match(/\((.+)\)$/)?.[1] || "";
-                        if (addr) setMasterForm((p) => ({ ...p, delivery_partner_id: v, delivery_address: addr }));
-                      }
-                    }} placeholder="납품처 선택" />
-                  ) : (
-                    <Input value={masterForm.delivery_partner_id || ""} onChange={(e) => setMasterForm((p) => ({ ...p, delivery_partner_id: e.target.value }))}
-                      placeholder={masterForm.partner_id ? "등록된 납품처 없음" : "거래처를 먼저 선택하세요"} className="h-9" disabled={!masterForm.partner_id} />
-                  )}
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">납품장소</Label>
-                  <Input value={masterForm.delivery_address || ""} onChange={(e) => setMasterForm((p) => ({ ...p, delivery_address: e.target.value }))}
-                    placeholder="납품장소" className="h-9" />
+                <div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">거래처</Label>
+                    <Select
+                      value={masterForm.partner_id || ""}
+                      onValueChange={(v) => { setMasterForm((p) => ({ ...p, partner_id: v, delivery_partner_id: "" })); loadDeliveryOptions(v); recalcPrices(masterForm.price_mode || "", v); }}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="거래처 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["partner_id"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자</Label>
+                    <Select value={masterForm.manager_id || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager_id: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="담당자 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["manager_id"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">납품처</Label>
+                    {deliveryOptions.length > 0 ? (
+                      <Select
+                        value={masterForm.delivery_partner_id || ""}
+                        onValueChange={(v) => {
+                          setMasterForm((p) => ({ ...p, delivery_partner_id: v }));
+                          const found = deliveryOptions.find((o) => o.code === v);
+                          if (found) {
+                            const addr = found.label.match(/\((.+)\)$/)?.[1] || "";
+                            if (addr) setMasterForm((p) => ({ ...p, delivery_partner_id: v, delivery_address: addr }));
+                          }
+                        }}
+                      >
+                        <SelectTrigger className="h-9"><SelectValue placeholder="납품처 선택" /></SelectTrigger>
+                        <SelectContent>
+                          {deliveryOptions.map((o) => (
+                            <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={masterForm.delivery_partner_id || ""}
+                        onChange={(e) => setMasterForm((p) => ({ ...p, delivery_partner_id: e.target.value }))}
+                        placeholder={masterForm.partner_id ? "등록된 납품처 없음" : "거래처를 먼저 선택해주세요"}
+                        className="h-9" disabled={!masterForm.partner_id}
+                      />
+                    )}
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">납품장소</Label>
+                    <Input
+                      value={masterForm.delivery_address || ""}
+                      onChange={(e) => setMasterForm((p) => ({ ...p, delivery_address: e.target.value }))}
+                      placeholder="납품장소" className="h-9"
+                    />
+                  </div>
                 </div>
               </div>
             )}
 
-            {/* 레이어 4: 해외판매 (인코텀즈, 결제조건, 통화, 선적항, 도착항, HS코드) */}
+            {/* 해외판매 조건부 레이어 */}
             {isOverseas && (
-              <div className="grid grid-cols-3 gap-4 border-t pt-4">
-                <div className="space-y-1.5">
-                  <Label className="text-sm">인코텀즈</Label>
-                  <SmartSelect options={categoryOptions["incoterms"] || []} value={masterForm.incoterms || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, incoterms: v }))} placeholder="선택" />
+              <div className="rounded-lg border border-dashed border-border bg-muted/50 p-4 space-y-3">
+                <div className="flex items-center gap-1.5 text-xs font-semibold text-primary">
+                  해외판매 추가 정보
                 </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">결제조건</Label>
-                  <SmartSelect options={categoryOptions["payment_term"] || []} value={masterForm.payment_term || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, payment_term: v }))} placeholder="선택" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">통화</Label>
-                  <Input value={masterForm.currency || ""} onChange={(e) => setMasterForm((p) => ({ ...p, currency: e.target.value }))}
-                    placeholder="KRW" className="h-9" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">선적항</Label>
-                  <Input value={masterForm.port_of_loading || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_loading: e.target.value }))}
-                    className="h-9" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">도착항</Label>
-                  <Input value={masterForm.port_of_discharge || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_discharge: e.target.value }))}
-                    className="h-9" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">HS Code</Label>
-                  <Input value={masterForm.hs_code || ""} onChange={(e) => setMasterForm((p) => ({ ...p, hs_code: e.target.value }))}
-                    className="h-9" />
+                <div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-3">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">인코텀즈</Label>
+                    <Select value={masterForm.incoterms || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, incoterms: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["incoterms"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">결제조건</Label>
+                    <Select value={masterForm.payment_term || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, payment_term: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["payment_term"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">통화</Label>
+                    <Select value={masterForm.currency || "KRW"} onValueChange={(v) => setMasterForm((p) => ({ ...p, currency: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="통화 선택" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="KRW">KRW (원)</SelectItem>
+                        <SelectItem value="USD">USD (달러)</SelectItem>
+                        <SelectItem value="EUR">EUR (유로)</SelectItem>
+                        <SelectItem value="JPY">JPY (엔)</SelectItem>
+                        <SelectItem value="CNY">CNY (위안)</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">선적항</Label>
+                    <Input value={masterForm.port_of_loading || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_loading: e.target.value }))} className="h-9" />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">도착항</Label>
+                    <Input value={masterForm.port_of_discharge || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_discharge: e.target.value }))} className="h-9" />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">HS Code</Label>
+                    <Input value={masterForm.hs_code || ""} onChange={(e) => setMasterForm((p) => ({ ...p, hs_code: e.target.value }))} className="h-9 font-mono text-xs" />
+                  </div>
                 </div>
               </div>
             )}
 
-            {/* 리피터 그리드 (품목 목록) — 레이어 2,3 공통 */}
-            <div className="border rounded-lg">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10">
-                <span className="text-sm font-semibold">수주 품목</span>
-                <Button size="sm" variant="outline" onClick={() => { setItemSelectedMap(new Map()); setItemPage(1); setItemPageInput("1"); setItemSearchKeyword(""); setItemSelectOpen(true); searchItems(1); }}>
-                  <Plus className="w-4 h-4 mr-1" /> 품목 추가
+            {/* 품목 내역 리피터 */}
+            <div className="space-y-2.5">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  <Package className="w-4 h-4" /> 품목 내역
+                  <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                    {detailRows.length}
+                  </span>
+                </div>
+                <Button size="sm" onClick={() => {
+                  setItemSelectedMap(new Map());
+                  setItemPage(1);
+                  setItemPageInput("1");
+                  setItemSearchKeyword("");
+                  setItemSelectOpen(true);
+                  searchItems(1);
+                }}>
+                  <Plus className="w-4 h-4" /> 품목 추가
                 </Button>
               </div>
-              <div className="overflow-auto max-h-[300px]">
-                <Table className="table-fixed">
-                  <TableHeader className="sticky top-0 bg-background z-10">
-                    <TableRow>
-                      <TableHead className="w-[40px]"></TableHead>
-                      <TableHead className="w-[120px]">품번</TableHead>
-                      <TableHead className="w-[120px]">품명</TableHead>
-                      <TableHead className="w-[80px]">규격</TableHead>
-                      <TableHead className="w-[60px]">단위</TableHead>
-                      <TableHead className="w-[100px]">기준단가</TableHead>
-                      <TableHead className="w-[90px]">수량</TableHead>
-                      <TableHead className="w-[100px]">단가</TableHead>
-                      <TableHead className="w-[100px]">금액</TableHead>
-                      <TableHead className="w-[70px]">통화</TableHead>
-                      <TableHead className="w-[160px]">납기일</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {detailRows.length === 0 ? (
-                      <TableRow><TableCell colSpan={11} className="text-center text-muted-foreground py-8">품목을 추가해주세요</TableCell></TableRow>
-                    ) : detailRows.map((row, idx) => (
-                      <TableRow key={row._id || idx}>
-                        <TableCell>
-                          <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive" onClick={() => removeDetailRow(idx)}>
-                            <X className="w-3.5 h-3.5" />
-                          </Button>
-                        </TableCell>
-                        <TableCell className="text-xs max-w-[120px]"><span className="block truncate" title={row.part_code}>{row.part_code}</span></TableCell>
-                        <TableCell className="text-xs max-w-[120px]"><span className="block truncate" title={row.part_name}>{row.part_name}</span></TableCell>
-                        <TableCell className="text-xs">{row.spec}</TableCell>
-                        <TableCell className="text-xs">{row.unit}</TableCell>
-                        <TableCell className="text-sm text-right text-muted-foreground">{row.standard_price ? Number(row.standard_price).toLocaleString() : ""}</TableCell>
-                        <TableCell>
-                          <Input value={formatNumber(row.qty || "")} onChange={(e) => updateDetailRow(idx, "qty", parseNumber(e.target.value))}
-                            className="h-8 text-sm text-right" />
-                        </TableCell>
-                        <TableCell>
-                          <Input value={formatNumber(row.unit_price || "")} onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))}
-                            className="h-8 text-sm text-right" />
-                        </TableCell>
-                        <TableCell className="text-sm text-right font-medium">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
-                        <TableCell>
-                          <Input value={row.currency_code || ""} onChange={(e) => updateDetailRow(idx, "currency_code", e.target.value)}
-                            className="h-8 text-sm" />
-                        </TableCell>
-                        <TableCell>
-                          <FormDatePicker value={row.due_date || ""} onChange={(v) => updateDetailRow(idx, "due_date", v)} placeholder="납기일" />
-                        </TableCell>
+              {detailRows.length === 0 ? (
+                <div className="flex flex-col items-center gap-2 rounded-lg border border-dashed border-border py-8 text-muted-foreground">
+                  <Package className="h-8 w-8 opacity-40" />
+                  <span className="text-sm">아직 추가된 품목이 없어요. 위 버튼으로 품목을 추가해주세요.</span>
+                </div>
+              ) : (
+                <div className="overflow-x-auto rounded-lg border border-border">
+                  <Table noWrapper className="min-w-max w-full">
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="w-10 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                        <TableHead className="w-28 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                        <TableHead className="w-32 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                        <TableHead className="w-20 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                        <TableHead className="w-20 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                        <TableHead className="w-24 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장재</TableHead>
+                        <TableHead className="w-20 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                        <TableHead className="w-20 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                        <TableHead className="w-20 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장수량</TableHead>
+                        <TableHead className="w-24 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                        <TableHead className="w-24 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
+                        <TableHead className="w-32 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>
+                        <TableHead className="w-24 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">분할/삭제</TableHead>
                       </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </div>
+                    </TableHeader>
+                    <TableBody>
+                      {detailRows.map((row, idx) => (
+                        <TableRow key={row._id || idx}>
+                          <TableCell className="text-center font-mono text-[13px] text-muted-foreground/50">{idx + 1}</TableCell>
+                          <TableCell className="max-w-[112px]">
+                            <span className="block truncate font-mono text-[13px]" title={row.part_code}>{row.part_code}</span>
+                          </TableCell>
+                          <TableCell className="max-w-[128px]">
+                            <span className="block truncate text-[13px]" title={row.part_name}>{row.part_name}</span>
+                          </TableCell>
+                          <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                          <TableCell className="text-[13px] text-muted-foreground">{row.material}</TableCell>
+                          <TableCell>
+                            <Input
+                              value={row.packing_material || ""}
+                              onChange={(e) => updateDetailRow(idx, "packing_material", e.target.value)}
+                              placeholder="포장재"
+                              className="h-8 text-xs"
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Select value={row.unit || ""} onValueChange={(v) => updateDetailRow(idx, "unit", v)}>
+                              <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                              <SelectContent>
+                                {(categoryOptions["item_unit"] || []).map((o) => (
+                                  <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="number"
+                              min="1"
+                              value={row.qty || "1"}
+                              onChange={(e) => updateDetailRow(idx, "qty", e.target.value)}
+                              className="h-8 text-xs text-right font-mono w-16"
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="number"
+                              min="0"
+                              value={row.pack_qty || "0"}
+                              onChange={(e) => updateDetailRow(idx, "pack_qty", e.target.value)}
+                              className="h-8 text-xs text-right font-mono w-16"
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              value={formatNumber(row.unit_price || "")}
+                              onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))}
+                              readOnly={!allowPriceEdit}
+                              className={cn("h-8 text-xs text-right font-mono w-20", !allowPriceEdit && "bg-muted cursor-not-allowed")}
+                            />
+                          </TableCell>
+                          <TableCell className="text-right font-mono text-[13px] font-semibold">
+                            {row.amount ? Number(row.amount).toLocaleString() : "0"}
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="date"
+                              value={row.due_date || ""}
+                              onChange={(e) => updateDetailRow(idx, "due_date", e.target.value)}
+                              className="h-8 text-xs"
+                            />
+                          </TableCell>
+                          <TableCell className="text-center">
+                            <div className="flex items-center gap-1 justify-center">
+                              <Button
+                                variant="default" size="sm"
+                                className="h-7 px-2 text-[11px] bg-emerald-500 hover:bg-emerald-600 text-white"
+                                onClick={() => {
+                                  setDetailRows((prev) => {
+                                    const next = [...prev];
+                                    const newRow = { ...next[idx], _id: `split_${Date.now()}_${Math.random()}` };
+                                    next.splice(idx + 1, 0, newRow);
+                                    return next;
+                                  });
+                                  toast.success("행이 분할되었어요");
+                                }}
+                              >
+                                분할
+                              </Button>
+                              <Button
+                                variant="ghost" size="sm"
+                                className="h-7 w-7 p-0 text-muted-foreground/50 hover:text-destructive hover:bg-destructive/5"
+                                onClick={() => removeDetailRow(idx)}
+                              >
+                                <X className="w-3.5 h-3.5" />
+                              </Button>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
             </div>
 
-            {/* 메모 */}
-            <div className="space-y-1.5">
-              <Label className="text-sm">메모</Label>
-              <Input value={masterForm.memo || ""} onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
-                placeholder="메모" className="h-9" />
+            {/* 비고 */}
+            <div className="space-y-3">
+              <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                비고
+                <div className="flex-1 h-px bg-border" />
+              </div>
+              <textarea
+                value={masterForm.memo || ""}
+                onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
+                placeholder="특이사항이나 메모를 입력해주세요"
+                rows={3}
+                className="w-full rounded-md border border-input bg-muted px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring/25 resize-vertical min-h-[80px]"
+              />
             </div>
           </div>
 
-          {/* 품목 선택 모달 (등록 모달 내부에 중첩) */}
+          <DialogFooter className="shrink-0 border-t border-border px-6 py-4">
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />} 저장
+            </Button>
+          </DialogFooter>
+
+          {/* 품목 선택 중첩 모달 */}
           <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
-            <DialogContent className="max-w-3xl max-h-[70vh]" onInteractOutside={(e) => e.preventDefault()}>
+            <DialogContent className="max-w-3xl" style={{ maxHeight: "70vh" }} onInteractOutside={(e) => e.preventDefault()}>
               <DialogHeader>
                 <DialogTitle>품목 선택</DialogTitle>
                 <DialogDescription>수주에 추가할 품목을 선택 후 하단 버튼을 눌러주세요.</DialogDescription>
               </DialogHeader>
               <div className="flex gap-2 mb-3">
-                <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
+                <Input
+                  placeholder="품명/품목코드 검색"
+                  value={itemSearchKeyword}
                   onChange={(e) => setItemSearchKeyword(e.target.value)}
                   onKeyDown={(e) => e.key === "Enter" && triggerNewSearch()}
-                  className="h-9 flex-1" />
+                  className="h-9 flex-1"
+                />
                 <Select value={itemSearchDivision} onValueChange={setItemSearchDivision}>
                   <SelectTrigger className="h-9 w-[130px]"><SelectValue placeholder="관리품목" /></SelectTrigger>
                   <SelectContent>
@@ -888,15 +1433,16 @@ export default function SalesOrderPage() {
                   </SelectContent>
                 </Select>
                 <Button size="sm" onClick={triggerNewSearch} disabled={itemSearchLoading} className="h-9">
-                  {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+                  {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" />조회</>}
                 </Button>
               </div>
-              <div className="overflow-auto max-h-[320px] border rounded-lg">
-                <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10">
-                    <TableRow>
-                      <TableHead className="w-[40px] text-center">
-                        <input type="checkbox"
+              <div className="overflow-auto rounded-lg border border-border" style={{ maxHeight: "320px" }}>
+                <Table noWrapper>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-10 text-center">
+                        <input
+                          type="checkbox"
                           checked={itemSearchResults.length > 0 && itemSearchResults.every((i) => itemSelectedMap.has(i.id))}
                           onChange={(e) => {
                             setItemSelectedMap((prev) => {
@@ -905,33 +1451,47 @@ export default function SalesOrderPage() {
                               else itemSearchResults.forEach((i) => next.delete(i.id));
                               return next;
                             });
-                          }} />
+                          }}
+                        />
                       </TableHead>
-                      <TableHead className="w-[130px]">품목코드</TableHead>
-                      <TableHead className="min-w-[150px]">품명</TableHead>
-                      <TableHead className="w-[100px]">규격</TableHead>
-                      <TableHead className="w-[100px]">재질</TableHead>
-                      <TableHead className="w-[60px]">단위</TableHead>
+                      <TableHead className="w-32 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="w-24 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-24 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                      <TableHead className="w-16 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
                     {itemSearchResults.length === 0 ? (
-                      <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
+                      <TableRow>
+                        <TableCell colSpan={6} className="py-8 text-center text-muted-foreground">검색 결과가 없어요</TableCell>
+                      </TableRow>
                     ) : itemSearchResults.map((item) => (
-                      <TableRow key={item.id} className={cn("cursor-pointer", itemSelectedMap.has(item.id) && "bg-primary/5")}
+                      <TableRow
+                        key={item.id}
+                        className={cn("cursor-pointer", itemSelectedMap.has(item.id) && "bg-primary/5")}
                         onClick={() => setItemSelectedMap((prev) => {
                           const next = new Map(prev);
                           if (next.has(item.id)) next.delete(item.id); else next.set(item.id, item);
                           return next;
-                        })}>
+                        })}
+                      >
                         <TableCell className="text-center">
                           <input type="checkbox" checked={itemSelectedMap.has(item.id)} readOnly />
                         </TableCell>
-                        <TableCell className="text-xs max-w-[130px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
-                        <TableCell className="text-sm max-w-[150px]"><span className="block truncate" title={item.item_name}>{item.item_name}</span></TableCell>
-                        <TableCell className="text-xs">{item.size}</TableCell>
-                        <TableCell className="text-xs">{categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}</TableCell>
-                        <TableCell className="text-xs">{categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}</TableCell>
+                        <TableCell className="max-w-[128px]">
+                          <span className="block truncate text-[13px]" title={item.item_number}>{item.item_number}</span>
+                        </TableCell>
+                        <TableCell className="max-w-[150px]">
+                          <span className="block truncate text-sm" title={item.item_name}>{item.item_name}</span>
+                        </TableCell>
+                        <TableCell className="text-[13px]">{item.size}</TableCell>
+                        <TableCell className="text-[13px]">
+                          {categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}
+                        </TableCell>
+                        <TableCell className="text-[13px]">
+                          {categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}
+                        </TableCell>
                       </TableRow>
                     ))}
                   </TableBody>
@@ -940,7 +1500,8 @@ export default function SalesOrderPage() {
               <div className="flex items-center justify-between w-full border-t pt-2">
                 <div className="flex items-center gap-1">
                   <span className="text-xs text-muted-foreground">표시:</span>
-                  <input type="number" min={1} max={200} value={itemPageSize}
+                  <input
+                    type="number" min={1} max={200} value={itemPageSize}
                     onChange={(e) => {
                       const v = Math.min(200, Math.max(1, Number(e.target.value) || 20));
                       setItemPageSize(v);
@@ -948,7 +1509,8 @@ export default function SalesOrderPage() {
                       setItemPageInput("1");
                       searchItems(1, v);
                     }}
-                    className="h-7 w-14 rounded-md border px-1 text-center text-xs" />
+                    className="h-7 w-14 rounded-md border px-1 text-center text-xs"
+                  />
                 </div>
                 <div className="flex items-center gap-1">
                   <Button variant="outline" size="sm" className="h-7 w-7 p-0"
@@ -959,12 +1521,14 @@ export default function SalesOrderPage() {
                     onClick={() => handleItemPageChange(itemPage - 1)} disabled={itemPage === 1 || itemSearchLoading}>
                     <ChevronLeft className="h-3 w-3" />
                   </Button>
-                  <input type="text" inputMode="numeric" value={itemPageInput}
+                  <input
+                    type="text" inputMode="numeric" value={itemPageInput}
                     onChange={(e) => setItemPageInput(e.target.value)}
                     onKeyDown={(e) => { if (e.key === "Enter") { commitItemPageInput(); (e.target as HTMLInputElement).blur(); } }}
                     onBlur={commitItemPageInput}
                     onFocus={(e) => e.target.select()}
-                    className="h-7 w-10 rounded-md border px-1 text-center text-xs" />
+                    className="h-7 w-10 rounded-md border px-1 text-center text-xs"
+                  />
                   <span className="text-xs text-muted-foreground">/ {itemTotalPages || 1}</span>
                   <Button variant="outline" size="sm" className="h-7 w-7 p-0"
                     onClick={() => handleItemPageChange(itemPage + 1)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
@@ -978,19 +1542,20 @@ export default function SalesOrderPage() {
                 <span className="text-xs text-muted-foreground">총 {itemTotal}건</span>
               </div>
               <DialogFooter>
-                <div className="flex items-center gap-2 w-full justify-between">
+                <div className="flex w-full items-center justify-between">
                   <span className="text-sm text-muted-foreground">{itemSelectedMap.size}개 선택됨</span>
                   <div className="flex gap-2">
                     <Button variant="outline" onClick={() => { setItemSelectedMap(new Map()); setItemSelectOpen(false); }}>취소</Button>
                     <Button onClick={addSelectedItemsToDetail} disabled={itemSelectedMap.size === 0}>
-                      <Plus className="w-4 h-4 mr-1" /> {itemSelectedMap.size}개 추가
+                      <Plus className="w-4 h-4 mr-1" />{itemSelectedMap.size}개 추가
                     </Button>
                   </div>
                 </div>
               </DialogFooter>
             </DialogContent>
           </Dialog>
-      </FullscreenDialog>
+        </DialogContent>
+      </Dialog>
 
       {/* 출하계획 동시 등록 모달 */}
       <ShippingPlanBatchModal
@@ -1011,11 +1576,12 @@ export default function SalesOrderPage() {
 
       {/* 테이블 설정 모달 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={DETAIL_TABLE}
-        settingsId="sales-order"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
 
       {/* 공통 확인 다이얼로그 */}
diff --git a/frontend/app/(main)/COMPANY_29/sales/quote/page.tsx b/frontend/app/(main)/COMPANY_29/sales/quote/page.tsx
new file mode 100644
index 00000000..18e106c9
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_29/sales/quote/page.tsx
@@ -0,0 +1,995 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, FileText,
+} from "lucide-react";
+import { apiClient } from "@/lib/api/client";
+import { reportApi } from "@/lib/api/reportApi";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import {
+  ResizablePanelGroup, ResizablePanel, ResizableHandle,
+} from "@/components/ui/resizable";
+import { ReportInlineViewer } from "@/components/report/ReportInlineViewer";
+import { ReportMaster, ComponentConfig } from "@/types/report";
+
+const MASTER_TABLE = "quote_mng";
+
+const fmt = (val: string) => {
+  const num = val.replace(/[^\d.-]/g, "");
+  if (!num) return "";
+  const parts = num.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+const pn = (val: string) => val.replace(/,/g, "");
+
+const GRID_COLUMNS: DataGridColumn[] = [
+  { key: "quote_no", label: "견적번호", width: "w-[120px]" },
+  { key: "customer_name", label: "거래처명", width: "w-[150px]" },
+  { key: "quote_date", label: "견적일자", width: "w-[110px]" },
+  { key: "valid_until", label: "유효기한", width: "w-[110px]" },
+  { key: "total_amount", label: "견적금액", width: "w-[120px]", formatNumber: true, align: "right" },
+  { key: "status_label", label: "상태", width: "w-[90px]" },
+  { key: "manager", label: "담당자", width: "w-[100px]" },
+  { key: "domestic_type", label: "국내/국외", width: "w-[90px]" },
+];
+
+const STATUS_MAP: Record<string, string> = {
+  draft: "작성중", pending: "검토중", approved: "승인", rejected: "반려", converted: "수주전환",
+};
+
+const EMPTY_ITEM = {
+  item_code: "", item_name: "", spec: "", qty: "1", unit: "EA",
+  request_length: "", unit_price: "0", supply_amount: "0", vat_amount: "0", total_amount: "0", notes: "",
+};
+
+export default function QuoteManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  const [quotes, setQuotes] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [selectedRow, setSelectedRow] = useState<any | null>(null);
+
+  // 컴포넌트 클릭 편집 모달
+  const [editComp, setEditComp] = useState<ComponentConfig | null>(null);
+  const [editValues, setEditValues] = useState<Record<string, string>>({});
+  const [items, setItems] = useState<(typeof EMPTY_ITEM)[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // 기본정보 모달
+  const [basicInfoOpen, setBasicInfoOpen] = useState(false);
+  const [basicForm, setBasicForm] = useState({ quote_date: "", valid_until: "", status: "draft" });
+
+  // 엑셀 / 리포트
+  const [excelOpen, setExcelOpen] = useState(false);
+  const [reportList, setReportList] = useState<ReportMaster[]>([]);
+  const [selectedReportId, setSelectedReportId] = useState<string | null>(null);
+  const [reportKey, setReportKey] = useState(0);
+
+  // 품목 검색
+  const [itemSearchOpen, setItemSearchOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSelectedMap, setItemSelectedMap] = useState<Map<string, any>>(new Map());
+
+  // 거래처 검색
+  const [custSearchOpen, setCustSearchOpen] = useState(false);
+  const [custSearchKeyword, setCustSearchKeyword] = useState("");
+  const [custSearchResults, setCustSearchResults] = useState<any[]>([]);
+  const [custSearchLoading, setCustSearchLoading] = useState(false);
+
+  // 사원(담당자) 검색
+  const [userSearchOpen, setUserSearchOpen] = useState(false);
+  const [userSearchKeyword, setUserSearchKeyword] = useState("");
+  const [userSearchResults, setUserSearchResults] = useState<any[]>([]);
+  const [userSearchLoading, setUserSearchLoading] = useState(false);
+
+  // ── 데이터 로드 ──
+
+  const mapRow = (r: any) => ({
+    ...r, id: String(r.objid), status_label: STATUS_MAP[r.status] ?? r.status, total_amount: Number(r.total_amount || 0),
+  });
+
+  const fetchQuotes = useCallback(async () => {
+    if (!user) return;
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      searchFilters.forEach((f) => { if (f.value) params[f.columnName] = f.value; });
+      const res = await apiClient.get("/quotes/list", { params });
+      const mapped = (res.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+    } catch { toast.error("견적 목록 조회 실패"); }
+    finally { setLoading(false); }
+  }, [user, searchFilters]);
+
+  useEffect(() => { fetchQuotes(); }, [fetchQuotes]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await reportApi.getReports({ page: 1, limit: 100 });
+        if (res.success) {
+          const items = res.data.items ?? [];
+          setReportList(items);
+          if (items.length > 0 && !selectedReportId) setSelectedReportId(items[0].report_id);
+        }
+      } catch { /* 무시 */ }
+    })();
+  }, []);
+
+  // ── "신규" → DB에 draft 즉시 생성 → 자동 선택 ──
+
+  const handleCreate = async () => {
+    try {
+      const numRes = await apiClient.get("/quotes/generate-number");
+      const quoteNo = numRes.data?.data?.quoteNo ?? "";
+      const createRes = await apiClient.post("/quotes", {
+        quote_no: quoteNo,
+        quote_date: new Date().toISOString().split("T")[0],
+        status: "draft",
+        customer_name: "",
+        items: [],
+      });
+      toast.success("신규 견적이 생성되었습니다. 우측 양식에서 각 영역을 클릭하여 입력하세요.");
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+
+      const newObjid = createRes.data?.data?.objid;
+      const newRow = newObjid ? mapped.find((r: any) => r.objid === newObjid) : mapped[0];
+      if (newRow) setSelectedRow(newRow);
+    } catch { toast.error("견적 생성 실패"); }
+  };
+
+  // ── 삭제 ──
+
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.info("삭제할 견적을 선택하세요."); return; }
+    const ok = await confirm(`${checkedIds.length}건의 견적을 삭제하시겠습니까?`, { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      for (const id of checkedIds) await apiClient.delete(`/quotes/${id}`);
+      toast.success("삭제 완료");
+      setCheckedIds([]);
+      setSelectedRow(null);
+      fetchQuotes();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // ── 컴포넌트 클릭 → 편집 모달 ──
+
+  const handleComponentClick = async (comp: ComponentConfig) => {
+    if (!selectedRow) return;
+    setEditComp(comp);
+
+    if (comp.type === "table") {
+      // 테이블 → 품목 편집
+      try {
+        const res = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const d = res.data?.data;
+        setItems(
+          (d?.items || []).length > 0
+            ? d.items.map((it: any) => ({
+                item_code: it.item_code || "", item_name: it.item_name || "", spec: it.spec || "",
+                qty: String(it.qty ?? 1), unit: it.unit || "EA",
+                request_length: it.request_length ? String(it.request_length) : "",
+                unit_price: String(it.unit_price ?? 0), supply_amount: String(it.supply_amount ?? 0),
+                vat_amount: String(it.vat_amount ?? 0), total_amount: String(it.total_amount ?? 0),
+                notes: it.notes || "",
+              }))
+            : [{ ...EMPTY_ITEM }],
+        );
+      } catch { setItems([{ ...EMPTY_ITEM }]); }
+    } else if (comp.type === "card") {
+      const cardItems = (comp as any).cardItems ?? [];
+      // 우측 카드 (회사정보 + 담당자) → 담당자 선택
+      const hasCompanyField = cardItems.some((ci: any) =>
+        ["company_name_self", "ceo_self", "biz_no_self", "address_self"].includes(ci.fieldName || "")
+      );
+      if (hasCompanyField) {
+        setUserSearchKeyword("");
+        setUserSearchResults([]);
+        setUserSearchOpen(true);
+        searchUsers();
+        return;
+      }
+      // 좌측 카드 (거래처) → 거래처 검색
+      const hasCustomerField = cardItems.some((ci: any) =>
+        ["customer_name", "customer_ceo", "customer_biz_no"].includes(ci.fieldName || "")
+      );
+      if (hasCustomerField) {
+        setCustSearchKeyword("");
+        setCustSearchResults([]);
+        setCustSearchOpen(true);
+        searchCustomers();
+        return;
+      }
+      // 기타 카드
+      const vals: Record<string, string> = {};
+      cardItems.forEach((ci: any) => {
+        if (ci.fieldName) vals[ci.fieldName] = selectedRow[ci.fieldName] ?? ci.value ?? "";
+      });
+      setEditValues(vals);
+    } else if (comp.type === "text" || comp.type === "label") {
+      // 텍스트 → 기본정보 모달 하나로 통합
+      const basicFields = ["quote_no", "quote_date", "valid_until", "status"];
+      if (comp.fieldName && basicFields.includes(comp.fieldName)) {
+        // 기본정보 모달
+        const detail = await apiClient.get(`/quotes/${selectedRow.objid}`).then(r => r.data?.data).catch(() => null);
+        setBasicForm({
+          quote_date: detail?.quote_date || "",
+          valid_until: detail?.valid_until || "",
+          status: detail?.status || "draft",
+        });
+        setBasicInfoOpen(true);
+        setEditComp(null);
+        return;
+      }
+      // 기타 텍스트 (제목 등)
+      toast.info("이 영역은 리포트 디자이너에서 수정하세요.");
+      setEditComp(null);
+      return;
+    } else if (comp.type === "calculation") {
+      // 계산은 읽기 전용 안내
+      toast.info("계산 컴포넌트는 품목 데이터에서 자동 계산됩니다.");
+      setEditComp(null);
+    } else if (comp.type === "signature" || comp.type === "stamp") {
+      toast.info("서명/도장은 리포트 디자이너에서 설정하세요.");
+      setEditComp(null);
+    } else {
+      setEditValues({});
+    }
+  };
+
+  // ── 컴포넌트 편집 저장 ──
+
+  const handleEditSave = async () => {
+    if (!selectedRow || !editComp) return;
+    setSaving(true);
+    try {
+      if (editComp.type === "table") {
+        // 품목 저장 — 기존 견적 데이터 불러와서 품목만 교체
+        const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const existing = detailRes.data?.data ?? {};
+        const payload = {
+          ...existing,
+          items: items.filter((it) => it.item_name).map((it) => ({
+            item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+            qty: Number(pn(it.qty)) || 0, unit: it.unit,
+            request_length: it.request_length ? Number(it.request_length) : null,
+            unit_price: Number(pn(it.unit_price)) || 0,
+            supply_amount: Number(pn(it.supply_amount)) || 0,
+            vat_amount: Number(pn(it.vat_amount)) || 0,
+            total_amount: Number(pn(it.total_amount)) || 0,
+            notes: it.notes,
+          })),
+        };
+        await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      } else {
+        // 텍스트/카드 → 해당 필드만 업데이트
+        const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const existing = detailRes.data?.data ?? {};
+        const payload = { ...existing, ...editValues };
+        // items는 기존 유지
+        payload.items = (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0),
+          notes: it.notes,
+        }));
+        await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      }
+
+      toast.success("저장되었습니다.");
+      setEditComp(null);
+
+      // 목록 + 리포트 갱신
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 거래처 검색 ──
+
+  const searchCustomers = async () => {
+    setCustSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (custSearchKeyword) {
+        filters.push({ columnName: "customer_name", operator: "contains", value: custSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/customer_mng/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setCustSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("거래처 조회 실패"); }
+    finally { setCustSearchLoading(false); }
+  };
+
+  const selectCustomer = async (cust: any) => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        customer_objid: cust.objid || null,
+        customer_name: cust.customer_name || "",
+        customer_ceo: cust.contact_person || "",
+        customer_biz_no: cust.business_number || "",
+        customer_address: cust.address || "",
+        customer_contact: cust.contact_person || "",
+        customer_phone: cust.contact_phone || "",
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success(`${payload.customer_name} 거래처 적용 완료`);
+      setCustSearchOpen(false);
+      setEditComp(null);
+
+      // 목록 + 리포트 갱신
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 기본정보 저장 ──
+
+  const handleBasicInfoSave = async () => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        quote_date: basicForm.quote_date,
+        valid_until: basicForm.valid_until,
+        status: basicForm.status,
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success("기본정보 저장 완료");
+      setBasicInfoOpen(false);
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 사원(담당자) 검색 ──
+
+  const searchUsers = async () => {
+    setUserSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (userSearchKeyword) {
+        filters.push({ columnName: "user_name", operator: "contains", value: userSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/user_info/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setUserSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("사원 조회 실패"); }
+    finally { setUserSearchLoading(false); }
+  };
+
+  const selectUser = async (usr: any) => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        manager: usr.user_name || "",
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success(`담당자: ${payload.manager} 적용`);
+      setUserSearchOpen(false);
+      setEditComp(null);
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 품목 검색 ──
+
+  const searchItemInfo = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/item_info/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setItemSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("품목 조회 실패"); }
+    finally { setItemSearchLoading(false); }
+  };
+
+  const toggleItemSelect = (row: any) => {
+    const key = row.item_number || row.objid || row.id;
+    setItemSelectedMap((prev) => {
+      const next = new Map(prev);
+      if (next.has(key)) next.delete(key); else next.set(key, row);
+      return next;
+    });
+  };
+
+  const addSelectedItemsToQuote = () => {
+    const selected = Array.from(itemSelectedMap.values());
+    if (selected.length === 0) { toast.info("품목을 선택하세요."); return; }
+    const newItems = selected.map((item) => calcItem({
+      item_code: item.item_number || item.item_code || "",
+      item_name: item.item_name || "",
+      spec: item.spec || item.standard || "",
+      qty: "1",
+      unit: item.unit || "EA",
+      request_length: "",
+      unit_price: String(item.selling_price || item.standard_price || 0),
+      supply_amount: "0",
+      vat_amount: "0",
+      total_amount: "0",
+      notes: "",
+    }));
+    setItems((prev) => [...prev, ...newItems]);
+    setItemSearchOpen(false);
+    setItemSelectedMap(new Map());
+    setItemSearchKeyword("");
+    toast.success(`${selected.length}건 품목 추가`);
+  };
+
+  // ── 품목 계산 ──
+
+  const calcItem = (item: typeof EMPTY_ITEM) => {
+    const qty = Number(pn(item.qty)) || 0;
+    const price = Number(pn(item.unit_price)) || 0;
+    const supply = qty * price;
+    const vat = Math.round(supply * 0.1);
+    return { ...item, supply_amount: String(supply), vat_amount: String(vat), total_amount: String(supply + vat) };
+  };
+  const updateItem = (idx: number, field: string, value: string) => {
+    setItems((prev) => {
+      const next = [...prev];
+      next[idx] = { ...next[idx], [field]: value };
+      if (field === "qty" || field === "unit_price") next[idx] = calcItem(next[idx]);
+      return next;
+    });
+  };
+  const addItem = () => setItems((prev) => [...prev, { ...EMPTY_ITEM }]);
+  const removeItem = (idx: number) => setItems((prev) => prev.filter((_, i) => i !== idx));
+  const totalSupply = items.reduce((s, it) => s + (Number(pn(it.supply_amount)) || 0), 0);
+  const totalVat = items.reduce((s, it) => s + (Number(pn(it.vat_amount)) || 0), 0);
+  const totalAmount = totalSupply + totalVat;
+
+  // ── 행 클릭 ──
+
+  const handleRowClick = (row: any) => setSelectedRow(row);
+
+  const contextParams = selectedRow
+    ? { "$1": selectedRow.objid, "$2": user?.companyCode || "COMPANY_7", objid: selectedRow.objid, quote_no: selectedRow.quote_no, customer_name: selectedRow.customer_name, quote_date: selectedRow.quote_date }
+    : undefined;
+
+  // ── 편집 모달 제목/타입 판별 ──
+
+  const getModalTitle = () => {
+    if (!editComp) return "";
+    if (editComp.type === "table") return "견적 품목";
+    if (editComp.type === "card") {
+      const items = (editComp as any).cardItems ?? [];
+      const title = (editComp as any).headerText || (editComp as any).title || "";
+      if (title) return title;
+      if (items.length > 0) return items[0].label ?? "카드 정보";
+      return "카드 정보";
+    }
+    if (editComp.type === "text" || editComp.type === "label") {
+      if (editComp.fieldName) return editComp.fieldName;
+      return "텍스트 편집";
+    }
+    return editComp.type;
+  };
+
+  // ── JSX ──
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      <DynamicSearchFilter tableName={MASTER_TABLE} filterId="quote-mng-filter"
+        onFilterChange={(filters) => setSearchFilters(filters)} dataCount={totalCount} />
+
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg border">
+        {/* 좌측: 견적 목록 */}
+        <ResizablePanel defaultSize={55} minSize={35}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center justify-between border-b bg-white px-3 py-2">
+              <span className="text-sm font-semibold text-gray-700">
+                견적 목록 <span className="text-gray-400">{totalCount}건</span>
+              </span>
+              <div className="flex items-center gap-1.5">
+                <Button variant="outline" size="sm" className="gap-1 text-xs" onClick={() => setExcelOpen(true)}>
+                  <FileSpreadsheet className="h-3.5 w-3.5" /> 업로드
+                </Button>
+                <Button variant="outline" size="sm" className="gap-1 text-xs"
+                  onClick={() => quotes.length > 0 ? exportToExcel(quotes, "견적목록.xlsx", "견적목록") : toast.info("데이터 없음")}>
+                  <Download className="h-3.5 w-3.5" /> 다운로드
+                </Button>
+                <Button size="sm" className="gap-1 text-xs" onClick={handleCreate}>
+                  <Plus className="h-3.5 w-3.5" /> 신규
+                </Button>
+                <Button variant="destructive" size="sm" className="gap-1 text-xs" onClick={handleDelete}>
+                  <Trash2 className="h-3.5 w-3.5" /> 삭제
+                </Button>
+              </div>
+            </div>
+            <div className="flex-1 overflow-hidden">
+              <DataGrid gridId="quote-mng" columns={GRID_COLUMNS} data={quotes} showCheckbox tableName={MASTER_TABLE}
+                checkedIds={checkedIds} onCheckedChange={setCheckedIds}
+                onRowClick={handleRowClick} selectedId={selectedRow?.objid ? String(selectedRow.objid) : null} />
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 리포트 뷰어 — 컴포넌트 클릭 가능 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center gap-2 border-b bg-white px-3 py-2">
+              <FileText className="h-4 w-4 text-gray-500" />
+              <span className="text-sm font-semibold text-gray-700">견적서</span>
+              <Select value={selectedReportId ?? ""} onValueChange={(v) => setSelectedReportId(v || null)}>
+                <SelectTrigger className="ml-auto h-7 w-[180px] text-xs">
+                  <SelectValue placeholder="리포트 양식 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {reportList.map((r) => (
+                    <SelectItem key={r.report_id} value={r.report_id} className="text-xs">
+                      {r.report_name_kor || r.report_name_eng || r.report_id}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex-1 overflow-hidden">
+              {!selectedRow ? (
+                <div className="flex h-full items-center justify-center text-center text-gray-400">
+                  <div>
+                    <FileText className="mx-auto mb-3 h-12 w-12 opacity-30" />
+                    <p className="text-sm font-medium">견적을 선택해주세요</p>
+                    <p className="mt-1 text-xs text-gray-300">&quot;신규&quot; 버튼으로 생성하거나 좌측에서 선택하세요.</p>
+                  </div>
+                </div>
+              ) : !selectedReportId ? (
+                <div className="flex h-full items-center justify-center text-center text-gray-400">
+                  <div>
+                    <FileText className="mx-auto mb-3 h-12 w-12 opacity-30" />
+                    <p className="text-sm font-medium">리포트 양식을 선택해주세요</p>
+                  </div>
+                </div>
+              ) : (
+                <ReportInlineViewer
+                  key={reportKey}
+                  reportId={selectedReportId}
+                  contextParams={contextParams}
+                  onComponentClick={handleComponentClick}
+                />
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ═══ 컴포넌트 클릭 편집 모달 (동적) ═══ */}
+
+      {/* 텍스트/카드 편집 모달 */}
+      <Dialog open={!!editComp && editComp.type !== "table"} onOpenChange={(o) => !o && setEditComp(null)}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{getModalTitle()}</DialogTitle>
+            <DialogDescription>값을 수정한 후 저장 버튼을 누르세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-3">
+            {Object.entries(editValues).map(([key, val]) => (
+              <div key={key}>
+                <Label className="text-xs">{key}</Label>
+                {val.length > 60 ? (
+                  <Textarea className="mt-1" rows={3} value={val}
+                    onChange={(e) => setEditValues((p) => ({ ...p, [key]: e.target.value }))} />
+                ) : (
+                  <Input className="mt-1" value={val}
+                    onChange={(e) => setEditValues((p) => ({ ...p, [key]: e.target.value }))} />
+                )}
+              </div>
+            ))}
+            {Object.keys(editValues).length === 0 && (
+              <p className="text-sm text-gray-400">이 컴포넌트에 편집 가능한 필드가 없습니다.</p>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditComp(null)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving || Object.keys(editValues).length === 0} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블(품목) 편집 모달 */}
+      <Dialog open={!!editComp && editComp.type === "table"} onOpenChange={(o) => { if (!o && itemSearchOpen) return; if (!o) setEditComp(null); }}>
+        <DialogContent className="flex max-h-[80vh] max-w-4xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>견적 품목</DialogTitle>
+            <DialogDescription>품목을 추가/수정합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-auto">
+            <div className="mb-3 flex gap-2">
+              <Button size="sm" className="gap-1 text-xs" onClick={() => { setItemSelectedMap(new Map()); setItemSearchResults([]); setItemSearchKeyword(""); setItemSearchOpen(true); searchItemInfo(); }}>
+                <Plus className="h-3.5 w-3.5" /> 품목 검색/추가
+              </Button>
+              <Button variant="outline" size="sm" className="gap-1 text-xs" onClick={addItem}>
+                <Plus className="h-3.5 w-3.5" /> 빈 행 추가
+              </Button>
+            </div>
+            <div className="overflow-auto rounded border">
+              <table className="w-full text-xs">
+                <thead className="sticky top-0 bg-gray-50">
+                  <tr>
+                    <th className="w-8 px-2 py-2 text-center">#</th>
+                    <th className="px-2 py-2 text-left">품목코드</th>
+                    <th className="px-2 py-2 text-left">품목명</th>
+                    <th className="px-2 py-2 text-left">규격</th>
+                    <th className="w-20 px-2 py-2 text-right">수량</th>
+                    <th className="w-16 px-2 py-2 text-center">단위</th>
+                    <th className="w-24 px-2 py-2 text-right">단가</th>
+                    <th className="w-24 px-2 py-2 text-right">공급가액</th>
+                    <th className="w-20 px-2 py-2 text-right">부가세</th>
+                    <th className="w-24 px-2 py-2 text-right">합계</th>
+                    <th className="w-8" />
+                  </tr>
+                </thead>
+                <tbody>
+                  {items.map((item, idx) => (
+                    <tr key={idx} className="border-t">
+                      <td className="px-2 py-1 text-center text-gray-400">{idx + 1}</td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.item_code} onChange={(e) => updateItem(idx, "item_code", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.item_name} onChange={(e) => updateItem(idx, "item_name", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.spec} onChange={(e) => updateItem(idx, "spec", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-right text-xs" value={fmt(item.qty)} onChange={(e) => updateItem(idx, "qty", pn(e.target.value))} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-center text-xs" value={item.unit} onChange={(e) => updateItem(idx, "unit", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-right text-xs" value={fmt(item.unit_price)} onChange={(e) => updateItem(idx, "unit_price", pn(e.target.value))} /></td>
+                      <td className="px-2 py-1 text-right">{fmt(item.supply_amount)}</td>
+                      <td className="px-2 py-1 text-right">{fmt(item.vat_amount)}</td>
+                      <td className="px-2 py-1 text-right font-medium">{fmt(item.total_amount)}</td>
+                      <td className="px-1 py-1">
+                        <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => removeItem(idx)}>
+                          <Trash2 className="h-3 w-3 text-red-400" />
+                        </Button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className="mt-3 rounded bg-gray-50 p-3 text-sm">
+              <div className="flex justify-between"><span>공급가액</span><span>{fmt(String(totalSupply))}원</span></div>
+              <div className="flex justify-between"><span>부가세</span><span>{fmt(String(totalVat))}원</span></div>
+              <div className="flex justify-between border-t pt-2 font-bold"><span>합계금액</span><span>{fmt(String(totalAmount))}원</span></div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditComp(null)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 기본정보 모달 ═══ */}
+      <Dialog open={basicInfoOpen} onOpenChange={setBasicInfoOpen}>
+        <DialogContent className="max-w-md" onOpenAutoFocus={(e) => e.preventDefault()}>
+          <DialogHeader>
+            <DialogTitle>기본 정보</DialogTitle>
+            <DialogDescription>견적 기본 정보를 수정합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label className="text-xs">견적번호</Label>
+              <Input className="mt-1" value={selectedRow?.quote_no || ""} disabled />
+            </div>
+            <div>
+              <Label className="text-xs">견적일자 *</Label>
+              <div className="mt-1">
+                <FormDatePicker value={basicForm.quote_date} onChange={(v) => setBasicForm((p) => ({ ...p, quote_date: v }))} />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">유효기한 *</Label>
+              <div className="mt-1">
+                <FormDatePicker value={basicForm.valid_until} onChange={(v) => setBasicForm((p) => ({ ...p, valid_until: v }))} />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">상태</Label>
+              <Select value={basicForm.status} onValueChange={(v) => setBasicForm((p) => ({ ...p, status: v }))}>
+                <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {Object.entries(STATUS_MAP).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setBasicInfoOpen(false)}>취소</Button>
+            <Button onClick={handleBasicInfoSave} disabled={saving} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 담당자(사원) 검색 모달 ═══ */}
+      <Dialog open={userSearchOpen} onOpenChange={setUserSearchOpen}>
+        <DialogContent className="flex max-h-[70vh] max-w-lg flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>담당자 선택</DialogTitle>
+            <DialogDescription>담당자를 검색하여 선택하세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="이름 검색" value={userSearchKeyword}
+              onChange={(e) => setUserSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchUsers()} className="text-sm" />
+            <Button onClick={searchUsers} disabled={userSearchLoading} className="shrink-0">
+              {userSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left">이름</th>
+                  <th className="px-3 py-2 text-left">부서</th>
+                  <th className="px-3 py-2 text-left">직위</th>
+                  <th className="w-16 px-2 py-2 text-center">선택</th>
+                </tr>
+              </thead>
+              <tbody>
+                {userSearchResults.length === 0 ? (
+                  <tr><td colSpan={4} className="px-4 py-8 text-center text-gray-400">
+                    {userSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : userSearchResults.map((row, i) => (
+                  <tr key={row.objid || row.user_id || i} className="cursor-pointer border-t hover:bg-blue-50"
+                    onClick={() => selectUser(row)}>
+                    <td className="px-3 py-2 font-medium">{row.user_name || "-"}</td>
+                    <td className="px-3 py-2">{row.department || row.dept_name || "-"}</td>
+                    <td className="px-3 py-2">{row.position || row.rank || "-"}</td>
+                    <td className="px-2 py-2 text-center">
+                      <Button size="sm" variant="outline" className="h-6 text-xs"
+                        onClick={(e) => { e.stopPropagation(); selectUser(row); }}>선택</Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserSearchOpen(false)}>취소</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 거래처 검색 모달 ═══ */}
+      <Dialog open={custSearchOpen} onOpenChange={setCustSearchOpen}>
+        <DialogContent className="flex max-h-[80vh] max-w-2xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>거래처 검색</DialogTitle>
+            <DialogDescription>거래처를 검색하여 선택하세요. 선택하면 자동으로 적용됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="거래처명 검색" value={custSearchKeyword}
+              onChange={(e) => setCustSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchCustomers()} className="text-sm" />
+            <Button onClick={searchCustomers} disabled={custSearchLoading} className="shrink-0 gap-1">
+              {custSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left">거래처명</th>
+                  <th className="px-3 py-2 text-left">대표자</th>
+                  <th className="px-3 py-2 text-left">사업자번호</th>
+                  <th className="px-3 py-2 text-left">연락처</th>
+                  <th className="w-16 px-2 py-2 text-center">선택</th>
+                </tr>
+              </thead>
+              <tbody>
+                {custSearchResults.length === 0 ? (
+                  <tr><td colSpan={5} className="px-4 py-8 text-center text-gray-400">
+                    {custSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : custSearchResults.map((row, i) => (
+                  <tr key={row.objid || i} className="cursor-pointer border-t hover:bg-blue-50"
+                    onClick={() => selectCustomer(row)}>
+                    <td className="px-3 py-2 font-medium">{row.customer_name || "-"}</td>
+                    <td className="px-3 py-2">{row.contact_person || "-"}</td>
+                    <td className="px-3 py-2">{row.business_number || "-"}</td>
+                    <td className="px-3 py-2">{row.contact_phone || "-"}</td>
+                    <td className="px-2 py-2 text-center">
+                      <Button size="sm" variant="outline" className="h-6 text-xs"
+                        onClick={(e) => { e.stopPropagation(); selectCustomer(row); }}>선택</Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCustSearchOpen(false)}>취소</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 품목 검색 모달 ═══ */}
+      <Dialog open={itemSearchOpen} onOpenChange={setItemSearchOpen}>
+        <DialogContent className="flex max-h-[80vh] max-w-3xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>품목 검색</DialogTitle>
+            <DialogDescription>추가할 품목을 검색하여 선택하세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItemInfo()} className="text-sm" />
+            <Button onClick={searchItemInfo} disabled={itemSearchLoading} className="shrink-0 gap-1">
+              {itemSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="w-10 px-2 py-2 text-center">선택</th>
+                  <th className="px-2 py-2 text-left">품목코드</th>
+                  <th className="px-2 py-2 text-left">품명</th>
+                  <th className="px-2 py-2 text-left">규격</th>
+                  <th className="w-16 px-2 py-2 text-center">단위</th>
+                  <th className="w-24 px-2 py-2 text-right">단가</th>
+                </tr>
+              </thead>
+              <tbody>
+                {itemSearchResults.length === 0 ? (
+                  <tr><td colSpan={6} className="px-4 py-8 text-center text-gray-400">
+                    {itemSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : itemSearchResults.map((row, i) => {
+                  const key = row.item_number || row.objid || row.id || i;
+                  const checked = itemSelectedMap.has(key);
+                  return (
+                    <tr key={key} className={`cursor-pointer border-t ${checked ? "bg-blue-50" : "hover:bg-gray-50"}`}
+                      onClick={() => toggleItemSelect(row)}>
+                      <td className="px-2 py-1.5 text-center">
+                        <input type="checkbox" checked={checked} readOnly className="accent-blue-500" />
+                      </td>
+                      <td className="px-2 py-1.5">{row.item_number || row.item_code || "-"}</td>
+                      <td className="px-2 py-1.5">{row.item_name || "-"}</td>
+                      <td className="px-2 py-1.5">{row.spec || row.standard || "-"}</td>
+                      <td className="px-2 py-1.5 text-center">{row.unit || "EA"}</td>
+                      <td className="px-2 py-1.5 text-right">{fmt(String(row.selling_price || row.standard_price || 0))}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter className="flex items-center justify-between">
+            <span className="text-xs text-gray-500">선택: {itemSelectedMap.size}건</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSearchOpen(false)}>취소</Button>
+              <Button onClick={addSelectedItemsToQuote} disabled={itemSelectedMap.size === 0} className="gap-1">
+                <Plus className="h-4 w-4" /> 선택 품목 추가
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ExcelUploadModal open={excelOpen} onOpenChange={setExcelOpen} tableName={MASTER_TABLE} />
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_29/sales/sales-item/page.tsx b/frontend/app/(main)/COMPANY_29/sales/sales-item/page.tsx
index a2fcd9a9..d02bfef5 100644
--- a/frontend/app/(main)/COMPANY_29/sales/sales-item/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/sales/sales-item/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 /**
- * 판매품목정보 — 하드코딩 페이지
+ * 판매품목정보 — Type B 마스터-디테일 리디자인
  *
  * 좌측: 판매품목 목록 (item_info, 판매 관련 필터)
  * 우측: 선택한 품목의 거래처 정보 (customer_item_mapping → customer_mng 조인)
@@ -12,76 +12,70 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Badge } from "@/components/ui/badge";
-import {
-  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Package, Users, Search, X, Settings2 } from "lucide-react";
+import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Users, Package, Search, X, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const ITEM_TABLE = "item_info";
 const MAPPING_TABLE = "customer_item_mapping";
 const CUSTOMER_TABLE = "customer_mng";
 
-// 좌측: 판매품목 컬럼
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "item_number", label: "품번", width: "w-[110px]" },
-  { key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
-  { key: "size", label: "규격", width: "w-[90px]" },
-  { key: "unit", label: "단위", width: "w-[60px]" },
-  { key: "standard_price", label: "기준단가", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "selling_price", label: "판매가격", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
-  { key: "status", label: "상태", width: "w-[60px]" },
-];
+// 숫자 포맷 헬퍼
+const formatNum = (val: any): string => {
+  if (val === null || val === undefined || val === "") return "";
+  const n = Number(val);
+  return isNaN(n) ? String(val) : n.toLocaleString();
+};
 
-// 우측: 거래처 정보 컬럼
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "customer_code", label: "거래처코드", width: "w-[110px]" },
-  { key: "customer_name", label: "거래처명", minWidth: "min-w-[120px]" },
-  { key: "customer_item_code", label: "거래처품번", width: "w-[100px]" },
-  { key: "customer_item_name", label: "거래처품명", width: "w-[100px]" },
-  { key: "base_price", label: "기준가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "calculated_price", label: "단가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
+const ITEM_GRID_COLUMNS = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "selling_price", label: "판매가격" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
 ];
 
 export default function SalesItemPage() {
   const { user } = useAuth();
-  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-sales-item", ITEM_TABLE, ITEM_GRID_COLUMNS);
 
   // 좌측: 품목
   const [items, setItems] = useState<any[]>([]);
   const [itemLoading, setItemLoading] = useState(false);
   const [itemCount, setItemCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
   const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
 
-  // 테이블 설정
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 우측: 거래처
   const [customerItems, setCustomerItems] = useState<any[]>([]);
   const [customerLoading, setCustomerLoading] = useState(false);
+  const [customerCheckedIds, setCustomerCheckedIds] = useState<string[]>([]);
 
   // 카테고리
   const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string; isDefault?: boolean }[]>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
   // 거래처 추가 모달
   const [custSelectOpen, setCustSelectOpen] = useState(false);
@@ -98,6 +92,7 @@ export default function SalesItemPage() {
   // 엑셀
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
 
+
   // 거래처 상세 입력 모달 (거래처 품번/품명 + 단가)
   const [custDetailOpen, setCustDetailOpen] = useState(false);
   const [selectedCustsForDetail, setSelectedCustsForDetail] = useState<any[]>([]);
@@ -108,19 +103,8 @@ export default function SalesItemPage() {
     discount_value: string; rounding_type: string; rounding_unit_value: string;
     calculated_price: string;
   }>>>({});
-  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
   const [editCustData, setEditCustData] = useState<any>(null);
 
-  // 테이블 설정 적용 (필터)
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
-
-  // 마운트 시 저장된 설정 복원
-  useEffect(() => {
-    const saved = loadTableSettings("sales-item");
-    if (saved) applyTableSettings(saved);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // 카테고리 로드
   useEffect(() => {
@@ -164,11 +148,16 @@ export default function SalesItemPage() {
   const fetchItems = useCallback(async () => {
     setItemLoading(true);
     try {
-      const filters: { columnName: string; operator: string; value: any }[] = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const filters: { columnName: string; operator: string; value: any }[] = [];
 
       // 판매품목/영업관리 division 필터 (다중값 컬럼이므로 contains로 매칭)
       filters.push({ columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" });
 
+      // DynamicSearchFilter에서 전달된 필터 추가
+      for (const f of searchFilters) {
+        filters.push({ columnName: f.columnName, operator: f.operator, value: f.value });
+      }
+
       const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
@@ -191,7 +180,7 @@ export default function SalesItemPage() {
     } finally {
       setItemLoading(false);
     }
-  }, [searchFilters, categoryOptions]);
+  }, [searchFilters, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => { fetchItems(); }, [fetchItems]);
 
@@ -200,12 +189,13 @@ export default function SalesItemPage() {
 
   // 우측: 거래처 목록 조회
   useEffect(() => {
-    if (!selectedItem?.item_number) { setCustomerItems([]); return; }
+    if (!selectedItem?.item_number) { setCustomerItems([]); setCustomerCheckedIds([]); return; }
+    setCustomerCheckedIds([]);
     const itemKey = selectedItem.item_number;
     const fetchCustomerItems = async () => {
       setCustomerLoading(true);
       try {
-        // customer_item_mapping에서 해당 품목의 매핑 조회
+        // 1. customer_item_mapping에서 해당 품목의 매핑 조회
         const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
           page: 1, size: 500,
           dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
@@ -213,7 +203,7 @@ export default function SalesItemPage() {
         });
         const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
 
-        // customer_id → customer_mng 조인 (거래처명)
+        // 2. customer_id → customer_mng 조인 (거래처명)
         const custIds = [...new Set(mappings.map((m: any) => m.customer_id).filter(Boolean))];
         let custMap: Record<string, any> = {};
         if (custIds.length > 0) {
@@ -229,11 +219,51 @@ export default function SalesItemPage() {
           } catch { /* skip */ }
         }
 
-        setCustomerItems(mappings.map((m: any) => ({
-          ...m,
-          customer_code: m.customer_id,
-          customer_name: custMap[m.customer_id]?.customer_name || "",
-        })));
+        // 3. customer_item_prices 조회 (단가 정보)
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        // 4. 거래처별 중복 제거 + 오늘 날짜 기준 단가 매칭
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o: any) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+        const seenCustIds = new Set<string>();
+        const sortedMappings = [...mappings].sort((a: any, b: any) => (a.customer_id || "").localeCompare(b.customer_id || ""));
+
+        setCustomerItems(sortedMappings.map((m: any) => {
+          const custKey = m.customer_id || "";
+          const isFirstOfGroup = !seenCustIds.has(custKey);
+          if (custKey) seenCustIds.add(custKey);
+
+          const custPriceList = allPrices.filter((p: any) => p.customer_id === custKey);
+          const todayPrice = custPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || custPriceList[0] || {};
+
+          return {
+            ...m,
+            customer_code: isFirstOfGroup ? custKey : "",
+            customer_name: isFirstOfGroup ? (custMap[custKey]?.customer_name || "") : "",
+            customer_item_code: m.customer_item_code || "",
+            customer_item_name: m.customer_item_name || "",
+            base_price: todayPrice.base_price || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+        }));
       } catch (err) {
         console.error("거래처 조회 실패:", err);
       } finally {
@@ -241,7 +271,7 @@ export default function SalesItemPage() {
       }
     };
     fetchCustomerItems();
-  }, [selectedItem?.item_number]);
+  }, [selectedItem?.item_number, priceCategoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // 거래처 검색
   const searchCustomers = async () => {
@@ -332,14 +362,25 @@ export default function SalesItemPage() {
       [custKey]: (prev[custKey] || []).map((r) => {
         if (r._id !== rowId) return r;
         const updated = { ...r, [field]: value };
-        if (["base_price", "discount_type", "discount_value"].includes(field)) {
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
           const bp = Number(updated.base_price) || 0;
           const dv = Number(updated.discount_value) || 0;
           const dt = updated.discount_type;
           let calc = bp;
           if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
           else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
-          updated.calculated_price = String(Math.round(calc));
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1;
+          if (roundLabel === "반올림") calc = Math.round(calc / unit) * unit;
+          else if (roundLabel === "절삭") calc = Math.floor(calc / unit) * unit;
+          else if (roundLabel === "올림") calc = Math.ceil(calc / unit) * unit;
+          updated.calculated_price = String(Math.floor(calc));
         }
         return updated;
       }),
@@ -361,32 +402,41 @@ export default function SalesItemPage() {
       if (found) custInfo = found;
     } catch { /* skip */ }
 
-    const mappingRows = [{
-      _id: `m_existing_${row.id}`,
-      customer_item_code: row.customer_item_code || "",
-      customer_item_name: row.customer_item_name || "",
-    }].filter((m) => m.customer_item_code || m.customer_item_name);
-
-    const priceRows = [{
-      _id: `p_existing_${row.id}`,
-      start_date: row.start_date || "",
-      end_date: row.end_date || "",
-      currency_code: row.currency_code || "CAT_MLAMDKVN_PZJI",
-      base_price_type: row.base_price_type || "CAT_MLAMFGFT_4RZW",
-      base_price: row.base_price ? String(row.base_price) : "",
-      discount_type: row.discount_type || "",
-      discount_value: row.discount_value ? String(row.discount_value) : "",
-      rounding_type: row.rounding_type || "",
-      rounding_unit_value: row.rounding_unit_value || "",
-      calculated_price: row.calculated_price ? String(row.calculated_price) : "",
-    }].filter((p) => p.base_price || p.start_date);
-
-    if (priceRows.length === 0) {
-      priceRows.push({
-        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
-        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
-        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/customer_item_mapping/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: custKey },
+          { columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
+        ]}, autoFilter: true,
       });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.customer_item_code || m.customer_item_name)
+        .map((m: any) => ({ _id: `m_existing_${m.id}`, customer_item_code: m.customer_item_code || "", customer_item_name: m.customer_item_name || "" }));
+    } catch { /* skip */ }
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: custKey },
+          { columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`, start_date: p.start_date ? String(p.start_date).split("T")[0] : "", end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI", base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "", discount_type: p.discount_type || "", discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "", rounding_unit_value: p.rounding_unit_value || "", calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+    if (priceRows.length === 0) {
+      priceRows.push({ _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "" });
     }
 
     setSelectedCustsForDetail([custInfo]);
@@ -435,6 +485,7 @@ export default function SalesItemPage() {
           );
           for (const price of priceRows) {
             await apiClient.post(`/table-management/tables/customer_item_prices/add`, {
+              id: crypto.randomUUID(),
               mapping_id: editCustData.id,
               customer_id: custKey,
               item_id: selectedItem.item_number,
@@ -449,6 +500,7 @@ export default function SalesItemPage() {
         } else {
           // 신규 등록
           const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
             customer_id: custKey, item_id: selectedItem.item_number,
             customer_item_code: mappingRows[0]?.customer_item_code || "",
             customer_item_name: mappingRows[0]?.customer_item_name || "",
@@ -457,6 +509,7 @@ export default function SalesItemPage() {
 
           for (let mi = 1; mi < mappingRows.length; mi++) {
             await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
               customer_id: custKey, item_id: selectedItem.item_number,
               customer_item_code: mappingRows[mi].customer_item_code || "",
               customer_item_name: mappingRows[mi].customer_item_name || "",
@@ -468,6 +521,7 @@ export default function SalesItemPage() {
           );
           for (const price of priceRows) {
             await apiClient.post(`/table-management/tables/customer_item_prices/add`, {
+              id: crypto.randomUUID(),
               mapping_id: mappingId || "", customer_id: custKey, item_id: selectedItem.item_number,
               start_date: price.start_date || null, end_date: price.end_date || null,
               currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
@@ -523,6 +577,45 @@ export default function SalesItemPage() {
     }
   };
 
+  // 우측: 거래처 매핑 삭제
+  const handleCustomerMappingDelete = async () => {
+    if (customerCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${customerCheckedIds.length}개 거래처 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      // 관련 단가 삭제
+      for (const mappingId of customerCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/customer_item_prices/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      // 매핑 삭제
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: customerCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${customerCheckedIds.length}개 거래처 매핑이 삭제되었습니다.`);
+      setCustomerCheckedIds([]);
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
   // 엑셀 다운로드
   const handleExcelDownload = async () => {
     if (items.length === 0) return;
@@ -534,205 +627,355 @@ export default function SalesItemPage() {
     toast.success("다운로드 완료");
   };
 
+  // EDataTable 컬럼 정의 (판매품목)
+  const itemColumns: EDataTableColumn[] = [
+    { key: "item_number", label: "품번", width: "w-[110px]" },
+    { key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
+    { key: "size", label: "규격", width: "w-[80px]" },
+    { key: "unit", label: "단위", width: "w-[60px]" },
+    { key: "standard_price", label: "기준단가", width: "w-[90px]", align: "right", formatNumber: true },
+    { key: "selling_price", label: "판매가격", width: "w-[90px]", align: "right", formatNumber: true },
+    { key: "currency_code", label: "통화", width: "w-[50px]" },
+    { key: "status", label: "상태", width: "w-[60px]" },
+  ];
+
   return (
-    <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
       <DynamicSearchFilter
         tableName={ITEM_TABLE}
-        filterId="sales-item"
+        filterId="c16-sales-item"
         onFilterChange={setSearchFilters}
-        dataCount={itemCount}
-        externalFilterConfig={filterConfig}
-        extraActions={
-          <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
-              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
-            </Button>
-          </div>
-        }
+        dataCount={items.length}
+        externalFilterConfig={ts.filterConfig}
       />
 
-      {/* 분할 패널 */}
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" />
+            엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
       <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
         <ResizablePanelGroup direction="horizontal">
-          {/* 좌측: 판매품목 */}
+
+          {/* 좌측: 판매품목 목록 */}
           <ResizablePanel defaultSize={55} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Package className="w-4 h-4" /> 판매품목 목록
-                  <Badge variant="secondary" className="font-normal">{itemCount}건</Badge>
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">판매품목 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {itemCount}건
+                  </span>
                 </div>
-                <div className="flex gap-1.5">
+                <div className="flex items-center gap-1.5">
                   <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
                     <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
                   </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid
-                gridId="sales-item-left"
-                columns={LEFT_COLUMNS}
-                data={items}
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={itemColumns}
+                data={ts.groupData(items)}
+                rowKey={(row) => row.id}
                 loading={itemLoading}
+                emptyMessage="등록된 판매품목이 없어요"
                 selectedId={selectedItemId}
-                onSelect={setSelectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
                 onRowDoubleClick={() => openEditItem()}
-                emptyMessage="등록된 판매품목이 없습니다"
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-sales-item"
               />
             </div>
           </ResizablePanel>
 
           <ResizableHandle withHandle />
 
-          {/* 우측: 거래처 정보 */}
+          {/* 우측: 디테일 패널 */}
           <ResizablePanel defaultSize={45} minSize={25}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Users className="w-4 h-4" /> 거래처 정보
-                  {selectedItem && <Badge variant="outline" className="font-normal">{selectedItem.item_name}</Badge>}
-                </div>
-                <Button variant="outline" size="sm" disabled={!selectedItemId}
-                  onClick={() => { setCustCheckedIds(new Set()); setCustSelectOpen(true); searchCustomers(); }}>
-                  <Plus className="w-3.5 h-3.5 mr-1" /> 거래처 추가
-                </Button>
-              </div>
               {!selectedItemId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
-                  좌측에서 품목을 선택하세요
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Package className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">품목을 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 품목을 선택하면 상세 정보가 표시돼요</div>
+                  </div>
                 </div>
               ) : (
-                <DataGrid
-                  gridId="sales-item-right"
-                  columns={RIGHT_COLUMNS}
-                  data={customerItems}
-                  loading={customerLoading}
-                  showRowNumber={false}
-                  emptyMessage="등록된 거래처가 없습니다"
-                  onRowDoubleClick={(row) => openEditCust(row)}
-                />
+                <>
+                  {/* 거래처별 단가 헤더 */}
+                  <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                    <div className="flex items-center gap-2.5 px-4">
+                      <Users className="w-3.5 h-3.5 text-muted-foreground" />
+                      <span className="text-xs font-semibold">거래처별 단가</span>
+                      {customerItems.length > 0 && (
+                        <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{customerItems.length}</Badge>
+                      )}
+                    </div>
+                    <div className="flex gap-1.5">
+                      <Button
+                        size="sm"
+                        onClick={() => { setCustCheckedIds(new Set()); setCustSelectOpen(true); searchCustomers(); }}
+                      >
+                        <Plus className="w-3.5 h-3.5" /> 거래처 추가
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={customerCheckedIds.length === 0}
+                        onClick={handleCustomerMappingDelete}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" /> 삭제
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 거래처 테이블 */}
+                  <div className="flex-1 min-h-0 overflow-auto pt-px">
+                    {customerLoading ? (
+                      <div className="flex items-center justify-center h-full">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : customerItems.length === 0 ? (
+                      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+                        등록된 거래처가 없어요
+                      </div>
+                    ) : (
+                      <Table noWrapper>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted h-10">
+                            <TableHead className="w-[40px] text-center px-2">
+                              <Checkbox
+                                checked={customerItems.length > 0 && customerCheckedIds.length === customerItems.length}
+                                onCheckedChange={(checked) => {
+                                  if (checked === true) setCustomerCheckedIds(customerItems.map((c) => c.id));
+                                  else setCustomerCheckedIds([]);
+                                }}
+                              />
+                            </TableHead>
+                            <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처코드</TableHead>
+                            <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품번</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품명</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {customerItems.map((row) => (
+                            <TableRow
+                              key={row.id}
+                              className={cn(
+                                "cursor-pointer h-[41px]",
+                                customerCheckedIds.includes(row.id) ? "bg-primary/[0.08]" : "hover:bg-accent"
+                              )}
+                              onClick={() => {
+                                setCustomerCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                              onDoubleClick={() => openEditCust(row)}
+                            >
+                              <TableCell className="text-center px-2">
+                                <Checkbox
+                                  checked={customerCheckedIds.includes(row.id)}
+                                  onCheckedChange={() => {}}
+                                />
+                              </TableCell>
+                              <TableCell className="text-[13px] font-mono text-muted-foreground">{row.customer_code}</TableCell>
+                              <TableCell className="text-sm text-foreground">{row.customer_name}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.customer_item_code}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.customer_item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right font-mono text-muted-foreground">{formatNum(row.base_price)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-mono text-foreground font-semibold">{formatNum(row.calculated_price)}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.currency_code}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </>
               )}
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>
       </div>
 
-      {/* 품목 수정 모달 */}
-      <FullscreenDialog
-        open={editItemOpen}
-        onOpenChange={setEditItemOpen}
-        title="판매품목 수정"
-        description={`${editItemForm.item_number || ""} — ${editItemForm.item_name || ""}`}
-        defaultMaxWidth="max-w-2xl"
-        footer={
-          <>
+      {/* ── 품목 수정 모달 ── */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>판매품목 수정</DialogTitle>
+            <DialogDescription>
+              {editItemForm.item_number || ""} — {editItemForm.item_name || ""}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {/* 품목 기본정보 (읽기 전용) */}
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+
+            <div className="col-span-2 border-t my-1" />
+
+            {/* 판매 설정 (수정 가능) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">판매가격</Label>
+              <Input
+                value={editItemForm.selling_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
+                placeholder="판매가격을 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">기준단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">통화</Label>
+              <Select
+                value={editItemForm.currency_code || ""}
+                onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="통화를 선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
             <Button onClick={handleEditSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
             </Button>
-          </>
-        }
-      >
-        <div className="grid grid-cols-2 gap-4 py-4">
-          {/* 품목 기본정보 (읽기 전용) */}
-          {[
-            { key: "item_number", label: "품목코드" },
-            { key: "item_name", label: "품명" },
-            { key: "size", label: "규격" },
-            { key: "unit", label: "단위" },
-            { key: "material", label: "재질" },
-            { key: "status", label: "상태" },
-          ].map((f) => (
-            <div key={f.key} className="space-y-1.5">
-              <Label className="text-sm text-muted-foreground">{f.label}</Label>
-              <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
-            </div>
-          ))}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
-          <div className="col-span-2 border-t my-2" />
-
-          {/* 판매 설정 (수정 가능) */}
-          <div className="space-y-1.5">
-            <Label className="text-sm">판매가격</Label>
-            <Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
-              placeholder="판매가격" className="h-9" />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-sm">기준단가</Label>
-            <Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
-              placeholder="기준단가" className="h-9" />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-sm">통화</Label>
-            <Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
-              <SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
-              <SelectContent>
-                {(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </FullscreenDialog>
-
-      {/* 거래처 추가 모달 */}
+      {/* ── 거래처 검색 및 추가 모달 ── */}
       <Dialog open={custSelectOpen} onOpenChange={setCustSelectOpen}>
-        <DialogContent className="max-w-2xl max-h-[70vh]">
+        <DialogContent className="max-w-2xl">
           <DialogHeader>
-            <DialogTitle>거래처 선택</DialogTitle>
-            <DialogDescription>품목에 추가할 거래처를 선택하세요.</DialogDescription>
+            <DialogTitle>거래처 검색 및 추가</DialogTitle>
+            <DialogDescription>품목에 추가할 거래처를 선택해주세요.</DialogDescription>
           </DialogHeader>
-          <div className="flex gap-2 mb-3">
-            <Input placeholder="거래처명 검색" value={custSearchKeyword}
-              onChange={(e) => setCustSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && searchCustomers()}
-              className="h-9 flex-1" />
-            <Button size="sm" onClick={searchCustomers} disabled={custSearchLoading} className="h-9">
-              {custSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
-            </Button>
-          </div>
-          <div className="overflow-auto max-h-[350px] border rounded-lg">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">
-                    <input type="checkbox"
-                      checked={custSearchResults.length > 0 && custCheckedIds.size === custSearchResults.length}
-                      onChange={(e) => {
-                        if (e.target.checked) setCustCheckedIds(new Set(custSearchResults.map((c) => c.id)));
-                        else setCustCheckedIds(new Set());
-                      }} />
-                  </TableHead>
-                  <TableHead className="w-[110px]">거래처코드</TableHead>
-                  <TableHead className="min-w-[130px]">거래처명</TableHead>
-                  <TableHead className="w-[80px]">거래유형</TableHead>
-                  <TableHead className="w-[80px]">담당자</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {custSearchResults.length === 0 ? (
-                  <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
-                ) : custSearchResults.map((c) => (
-                  <TableRow key={c.id} className={cn("cursor-pointer", custCheckedIds.has(c.id) && "bg-primary/5")}
-                    onClick={() => setCustCheckedIds((prev) => {
-                      const next = new Set(prev);
-                      if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
-                      return next;
-                    })}>
-                    <TableCell className="text-center"><input type="checkbox" checked={custCheckedIds.has(c.id)} readOnly /></TableCell>
-                    <TableCell className="text-xs">{c.customer_code}</TableCell>
-                    <TableCell className="text-sm">{c.customer_name}</TableCell>
-                    <TableCell className="text-xs">{c.division}</TableCell>
-                    <TableCell className="text-xs">{c.contact_person}</TableCell>
+          <div className="space-y-3 py-2">
+            {/* 검색바 */}
+            <div className="flex gap-2">
+              <Input
+                placeholder="거래처명으로 검색해주세요"
+                value={custSearchKeyword}
+                onChange={(e) => setCustSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchCustomers()}
+                className="h-9 flex-1"
+              />
+              <Button size="sm" onClick={searchCustomers} disabled={custSearchLoading} className="h-9">
+                {custSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
+              </Button>
+            </div>
+            {/* 검색 결과 테이블 */}
+            <div className="overflow-auto max-h-[350px] border rounded-lg">
+              <Table noWrapper>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="sticky top-0 bg-card w-[40px] text-center">
+                      <Checkbox
+                        checked={custSearchResults.length > 0 && custCheckedIds.size === custSearchResults.length}
+                        onCheckedChange={(checked) => {
+                          if (checked === true) setCustCheckedIds(new Set(custSearchResults.map((c) => c.id)));
+                          else setCustCheckedIds(new Set());
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[110px]">거래처코드</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[130px]">거래처명</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">거래유형</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">담당자</TableHead>
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+                </TableHeader>
+                <TableBody>
+                  {custSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : custSearchResults.map((c) => (
+                    <TableRow
+                      key={c.id}
+                      className={cn("cursor-pointer", custCheckedIds.has(c.id) && "bg-primary/[0.08]")}
+                      onClick={() => setCustCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <Checkbox
+                          checked={custCheckedIds.has(c.id)}
+                          onCheckedChange={(checked) => {
+                            setCustCheckedIds((prev) => {
+                              const next = new Set(prev);
+                              if (checked === true) next.add(c.id); else next.delete(c.id);
+                              return next;
+                            });
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell className="text-[13px] font-mono text-muted-foreground">{c.customer_code}</TableCell>
+                      <TableCell className="text-sm font-medium text-foreground">{c.customer_name}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.division}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.contact_person}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
           </div>
           <DialogFooter>
             <div className="flex items-center gap-2 w-full justify-between">
@@ -740,7 +983,8 @@ export default function SalesItemPage() {
               <div className="flex gap-2">
                 <Button variant="outline" onClick={() => setCustSelectOpen(false)}>취소</Button>
                 <Button onClick={goToCustDetail} disabled={custCheckedIds.size === 0}>
-                  <Plus className="w-4 h-4 mr-1" /> {custCheckedIds.size}개 다음
+                  <Plus className="w-4 h-4" />
+                  {custCheckedIds.size}개 다음
                 </Button>
               </div>
             </div>
@@ -748,155 +992,243 @@ export default function SalesItemPage() {
         </DialogContent>
       </Dialog>
 
-      {/* 거래처 상세 입력/수정 모달 */}
-      <FullscreenDialog
-        open={custDetailOpen}
-        onOpenChange={setCustDetailOpen}
-        title={`📋 거래처 상세정보 ${editCustData ? "수정" : "입력"} — ${selectedItem?.item_name || ""}`}
-        description={editCustData ? "거래처 품번/품명과 기간별 단가를 수정합니다." : "선택한 거래처의 품번/품명과 기간별 단가를 설정합니다."}
-        defaultMaxWidth="max-w-[1100px]"
-        footer={
-          <>
-            <Button variant="outline" onClick={() => {
-              setCustDetailOpen(false);
-              if (!editCustData) setCustSelectOpen(true);
-              setEditCustData(null);
-            }}>{editCustData ? "취소" : "← 이전"}</Button>
-            <Button onClick={handleCustDetailSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
-            </Button>
-          </>
-        }
-      >
-        <div className="space-y-6 py-2">
-          {selectedCustsForDetail.map((cust, idx) => {
-            const custKey = cust.customer_code || cust.id;
-            const mappingRows = custMappings[custKey] || [];
-            const prices = custPrices[custKey] || [];
+      {/* ── 거래처 상세 입력/수정 모달 ── */}
+      <Dialog open={custDetailOpen} onOpenChange={setCustDetailOpen}>
+        <DialogContent className="max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              거래처 상세정보 {editCustData ? "수정" : "입력"} — {selectedItem?.item_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editCustData ? "거래처 품번/품명과 기간별 단가를 수정해주세요." : "선택한 거래처의 품번/품명과 기간별 단가를 설정해주세요."}
+            </DialogDescription>
+          </DialogHeader>
 
-            return (
-              <div key={custKey} className="border rounded-xl overflow-hidden bg-card">
-                <div className="px-5 py-3 bg-muted/30 border-b">
-                  <div className="font-bold">{idx + 1}. {cust.customer_name || custKey}</div>
-                  <div className="text-xs text-muted-foreground">{custKey}</div>
-                </div>
+          <div className="space-y-6 py-2">
+            {selectedCustsForDetail.map((cust, idx) => {
+              const custKey = cust.customer_code || cust.id;
+              const mappingRows = custMappings[custKey] || [];
+              const prices = custPrices[custKey] || [];
 
-                <div className="flex gap-4 p-4">
-                  {/* 좌: 거래처 품번/품명 */}
-                  <div className="flex-1 border rounded-lg p-4 bg-blue-50/30 dark:bg-blue-950/10">
-                    <div className="flex items-center justify-between mb-3">
-                      <span className="text-sm font-semibold">거래처 품번/품명 관리</span>
-                      <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
-                        <Plus className="h-3 w-3 mr-1" /> 품번 추가
-                      </Button>
-                    </div>
-                    <div className="space-y-2">
-                      {mappingRows.length === 0 ? (
-                        <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없습니다</div>
-                      ) : mappingRows.map((mRow, mIdx) => (
-                        <div key={mRow._id} className="flex gap-2 items-center">
-                          <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
-                          <Input value={mRow.customer_item_code}
-                            onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_code", e.target.value)}
-                            placeholder="거래처 품번" className="h-8 text-sm flex-1" />
-                          <Input value={mRow.customer_item_name}
-                            onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_name", e.target.value)}
-                            placeholder="거래처 품명" className="h-8 text-sm flex-1" />
-                          <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
-                            onClick={() => removeMappingRow(custKey, mRow._id)}>
-                            <X className="h-3 w-3" />
-                          </Button>
-                        </div>
-                      ))}
-                    </div>
+              return (
+                <div key={custKey} className="border rounded-lg overflow-hidden">
+                  {/* 거래처 헤더 */}
+                  <div className="flex items-center gap-2.5 px-4 py-3 bg-muted border-b">
+                    <span className="text-[13px] font-bold text-foreground">{idx + 1}. {cust.customer_name || custKey}</span>
+                    <span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">
+                      {custKey}
+                    </span>
                   </div>
 
-                  {/* 우: 기간별 단가 */}
-                  <div className="flex-1 border rounded-lg p-4 bg-amber-50/30 dark:bg-amber-950/10">
-                    <div className="flex items-center justify-between mb-3">
-                      <span className="text-sm font-semibold">기간별 단가 설정</span>
-                      <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
-                        <Plus className="h-3 w-3 mr-1" /> 단가 추가
-                      </Button>
+                  <div className="flex gap-4 p-4 bg-card">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/50">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">거래처 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.customer_item_code}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_code", e.target.value)}
+                              placeholder="거래처 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.customer_item_name}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_name", e.target.value)}
+                              placeholder="거래처 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button
+                              variant="ghost" size="sm"
+                              className="h-7 w-7 p-0 text-destructive shrink-0"
+                              onClick={() => removeMappingRow(custKey, mRow._id)}
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
                     </div>
-                    <div className="space-y-3">
-                      {prices.map((price, pIdx) => (
-                        <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
-                          <div className="flex items-center justify-between">
-                            <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
-                            {prices.length > 1 && (
-                              <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
-                                onClick={() => removePriceRow(custKey, price._id)}>
-                                <X className="h-3 w-3" />
-                              </Button>
-                            )}
-                          </div>
-                          <div className="flex gap-2 items-center">
-                            <div className="flex-1">
-                              <FormDatePicker value={price.start_date}
-                                onChange={(v) => updatePriceRow(custKey, price._id, "start_date", v)} placeholder="시작일" />
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/30">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button
+                                  variant="ghost" size="sm"
+                                  className="h-6 w-6 p-0 text-destructive"
+                                  onClick={() => removePriceRow(custKey, price._id)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
                             </div>
-                            <span className="text-xs text-muted-foreground">~</span>
-                            <div className="flex-1">
-                              <FormDatePicker value={price.end_date}
-                                onChange={(v) => updatePriceRow(custKey, price._id, "end_date", v)} placeholder="종료일" />
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="통화" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
                             </div>
-                            <div className="w-[80px]">
-                              <Select value={price.currency_code} onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}>
-                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="통화" /></SelectTrigger>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
                                 <SelectContent>
-                                  {(priceCategoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
                                 </SelectContent>
                               </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "base_price", raw);
+                                }}
+                                className="h-8 text-xs text-right col-span-3"
+                                placeholder="기준가"
+                              />
                             </div>
-                          </div>
-                          <div className="flex gap-2 items-center">
-                            <div className="w-[90px]">
-                              <Select value={price.base_price_type} onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}>
-                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준" /></SelectTrigger>
-                                <SelectContent>
-                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-                                </SelectContent>
-                              </Select>
-                            </div>
-                            <Input value={price.base_price}
-                              onChange={(e) => updatePriceRow(custKey, price._id, "base_price", e.target.value)}
-                              className="h-8 text-xs text-right flex-1" placeholder="기준가" />
-                            <div className="w-[90px]">
-                              <Select value={price.discount_type} onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}
+                              >
                                 <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
                                 <SelectContent>
                                   <SelectItem value="none">할인없음</SelectItem>
-                                  {(priceCategoryOptions["discount_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
                                 </SelectContent>
                               </Select>
-                            </div>
-                            <Input value={price.discount_value}
-                              onChange={(e) => updatePriceRow(custKey, price._id, "discount_value", e.target.value)}
-                              className="h-8 text-xs text-right w-[60px]" placeholder="0" />
-                            <div className="w-[90px]">
-                              <Select value={price.rounding_unit_value} onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-8 text-xs text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}
+                              >
                                 <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
                                 <SelectContent>
-                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
                                 </SelectContent>
                               </Select>
                             </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm text-foreground">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                            </div>
                           </div>
-                          <div className="flex items-center justify-end gap-2 pt-1 border-t">
-                            <span className="text-xs text-muted-foreground">계산 단가:</span>
-                            <span className="font-bold text-sm">{price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}</span>
-                          </div>
-                        </div>
-                      ))}
+                        ))}
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            );
-          })}
-        </div>
-      </FullscreenDialog>
+              );
+            })}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setCustDetailOpen(false);
+                if (!editCustData) setCustSelectOpen(true);
+                setEditCustData(null);
+              }}
+            >
+              {editCustData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleCustDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
 
       {/* 엑셀 업로드 */}
       <ExcelUploadModal
@@ -908,14 +1240,6 @@ export default function SalesItemPage() {
       />
 
       {ConfirmDialogComponent}
-
-      <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={ITEM_TABLE}
-        settingsId="sales-item"
-        onSave={applyTableSettings}
-      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_29/sales/shipping-order/page.tsx b/frontend/app/(main)/COMPANY_29/sales/shipping-order/page.tsx
index 5ff26159..2ed29b40 100644
--- a/frontend/app/(main)/COMPANY_29/sales/shipping-order/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/sales/shipping-order/page.tsx
@@ -1,20 +1,17 @@
 "use client";
 
-import React, { useState, useMemo, useEffect, useCallback, useRef } from "react";
+import React, { useState, useMemo, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Plus, Trash2, RotateCcw, Save, X, ChevronDown, ChevronRight, ChevronLeft, ChevronsLeft, ChevronsRight, Truck, Search, Loader2, FileSpreadsheet } from "lucide-react";
+import { Plus, Trash2, Save, X, ChevronDown, ChevronRight, ChevronLeft, ChevronsLeft, ChevronsRight, Search, Loader2, FileSpreadsheet, Inbox, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 import {
   getShippingOrderList,
   saveShippingOrder,
@@ -25,7 +22,25 @@ import {
   getItemSource,
 } from "@/lib/api/shipping";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "instruction_no", label: "출하지시번호" },
+  { key: "ship_date", label: "출하일자" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "transport_company", label: "운송업체" },
+  { key: "vehicle_no", label: "차량번호" },
+  { key: "driver_name", label: "기사명" },
+  { key: "status", label: "상태" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "qty", label: "수량" },
+  { key: "source_type", label: "소스" },
+  { key: "remark", label: "비고" },
+];
 
 type DataSourceType = "shipmentPlan" | "salesOrder" | "itemInfo";
 
@@ -40,19 +55,19 @@ const getStatusLabel = (s: string) => STATUS_OPTIONS.find(o => o.value === s)?.l
 
 const getStatusColor = (s: string) => {
   switch (s) {
-    case "READY": return "bg-amber-100 text-amber-800 border-amber-200";
-    case "IN_PROGRESS": return "bg-blue-100 text-blue-800 border-blue-200";
-    case "COMPLETED": return "bg-emerald-100 text-emerald-800 border-emerald-200";
-    default: return "bg-gray-100 text-gray-800 border-gray-200";
+    case "READY": return "bg-warning/10 text-warning";
+    case "IN_PROGRESS": return "bg-primary/10 text-primary";
+    case "COMPLETED": return "bg-success/10 text-success";
+    default: return "bg-muted text-muted-foreground";
   }
 };
 
 const getSourceBadge = (s: string) => {
   switch (s) {
-    case "shipmentPlan": return { label: "출하계획", cls: "bg-blue-100 text-blue-700" };
-    case "salesOrder": return { label: "수주", cls: "bg-emerald-100 text-emerald-700" };
-    case "itemInfo": return { label: "품목", cls: "bg-purple-100 text-purple-700" };
-    default: return { label: s, cls: "bg-gray-100 text-gray-700" };
+    case "shipmentPlan": return { label: "출하계획", cls: "bg-primary/10 text-primary" };
+    case "salesOrder": return { label: "수주", cls: "bg-success/10 text-success" };
+    case "itemInfo": return { label: "품목", cls: "bg-secondary text-secondary-foreground" };
+    default: return { label: s, cls: "bg-muted text-muted-foreground" };
   }
 };
 
@@ -73,18 +88,14 @@ interface SelectedItem {
 }
 
 export default function ShippingOrderPage() {
+  const ts = useTableSettings("c16-shipping-order", "shipment_instruction", GRID_COLUMNS);
   const [orders, setOrders] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [checkedIds, setCheckedIds] = useState<number[]>([]);
+  const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
 
-  // 검색
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [searchCustomer, setSearchCustomer] = useState("");
-  const [debouncedKeyword, setDebouncedKeyword] = useState("");
-  const [debouncedCustomer, setDebouncedCustomer] = useState("");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 엑셀 업로드
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
@@ -120,36 +131,25 @@ export default function ShippingOrderPage() {
   const [sourcePageSize, setSourcePageSize] = useState(20);
   const [sourceTotalCount, setSourceTotalCount] = useState(0);
 
-  // 텍스트 입력 debounce (500ms)
-  useEffect(() => {
-    const t = setTimeout(() => setDebouncedKeyword(searchKeyword), 500);
-    return () => clearTimeout(t);
-  }, [searchKeyword]);
-
-  useEffect(() => {
-    const t = setTimeout(() => setDebouncedCustomer(searchCustomer), 500);
-    return () => clearTimeout(t);
-  }, [searchCustomer]);
-
-  // 초기 날짜
-  useEffect(() => {
-    const today = new Date();
-    const from = new Date(today);
-    from.setMonth(from.getMonth() - 1);
-    setSearchDateFrom(from.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-  }, []);
 
   // 데이터 조회
   const fetchOrders = useCallback(async () => {
     setLoading(true);
     try {
       const params: any = {};
-      if (searchDateFrom) params.dateFrom = searchDateFrom;
-      if (searchDateTo) params.dateTo = searchDateTo;
-      if (searchStatus !== "all") params.status = searchStatus;
-      if (debouncedCustomer.trim()) params.customer = debouncedCustomer.trim();
-      if (debouncedKeyword.trim()) params.keyword = debouncedKeyword.trim();
+      for (const f of searchFilters) {
+        if (f.columnName === "ship_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split(",");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status") {
+          params.status = f.value;
+        } else if (f.columnName === "customer_name") {
+          params.customer = f.value;
+        } else {
+          params.keyword = f.value;
+        }
+      }
 
       const result = await getShippingOrderList(params);
       if (result.success) setOrders(result.data || []);
@@ -158,10 +158,10 @@ export default function ShippingOrderPage() {
     } finally {
       setLoading(false);
     }
-  }, [searchDateFrom, searchDateTo, searchStatus, debouncedCustomer, debouncedKeyword]);
+  }, [searchFilters]);
 
   useEffect(() => {
-    if (searchDateFrom && searchDateTo) fetchOrders();
+    fetchOrders();
   }, [fetchOrders]);
 
   // 소스 데이터 조회
@@ -202,24 +202,6 @@ export default function ShippingOrderPage() {
     }
   }, [isModalOpen, dataSource]);
 
-  // 핸들러
-  const handleResetSearch = () => {
-    setSearchKeyword("");
-    setSearchCustomer("");
-    setDebouncedKeyword("");
-    setDebouncedCustomer("");
-    setSearchStatus("all");
-    const today = new Date();
-    const from = new Date(today);
-    from.setMonth(from.getMonth() - 1);
-    setSearchDateFrom(from.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-  };
-
-  const handleCheckAll = (checked: boolean) => {
-    setCheckedIds(checked ? orders.map((o: any) => o.id) : []);
-  };
-
   const handleDeleteSelected = async () => {
     if (checkedIds.length === 0) return;
     if (!confirm(`선택한 ${checkedIds.length}개의 출하지시를 삭제하시겠습니까?`)) return;
@@ -228,7 +210,7 @@ export default function ShippingOrderPage() {
       if (result.success) {
         setCheckedIds([]);
         fetchOrders();
-        alert("삭제되었습니다.");
+        alert("삭제되었어요.");
       }
     } catch (err: any) {
       alert(err.message || "삭제 실패");
@@ -256,7 +238,6 @@ export default function ShippingOrderPage() {
       const items = order.items || [];
       setSelectedItems(items.filter((it: any) => it.id).map((it: any) => {
         const srcType = it.source_type || "shipmentPlan";
-        // 소스 데이터와 매칭할 수 있도록 원래 소스 id를 사용
         let sourceId: string | number = it.id;
         if (srcType === "shipmentPlan" && it.shipment_plan_id) sourceId = it.shipment_plan_id;
         else if (srcType === "salesOrder" && it.detail_id) sourceId = it.detail_id;
@@ -313,12 +294,10 @@ export default function ShippingOrderPage() {
       : item.item_code;
 
     const exists = selectedItems.findIndex(s => {
-      // 같은 소스 타입에서 id 매칭
       if (s.sourceType === dataSource) {
         if (dataSource === "itemInfo") return s.itemCode === key;
         return String(s.id) === String(key);
       }
-      // 다른 소스 타입이라도 원래 소스 id로 매칭
       if (dataSource === "shipmentPlan" && s.shipmentPlanId) return String(s.shipmentPlanId) === String(item.id);
       if (dataSource === "salesOrder" && s.detailId) return String(s.detailId) === String(item.id);
       return false;
@@ -384,7 +363,7 @@ export default function ShippingOrderPage() {
           spec: item.spec,
           material: item.material,
           orderQty: item.orderQty,
-          planQty: item.planQty,
+          planQty: item.orderQty,
           shipQty: 0,
           sourceType: item.sourceType,
           shipmentPlanId: item.shipmentPlanId,
@@ -397,7 +376,7 @@ export default function ShippingOrderPage() {
       if (result.success) {
         setIsModalOpen(false);
         fetchOrders();
-        alert(isEditMode ? "출하지시가 수정되었습니다." : "출하지시가 등록되었습니다.");
+        alert(isEditMode ? "출하지시가 수정되었어요." : "출하지시가 등록되었어요.");
       } else {
         alert(result.message || "저장 실패");
       }
@@ -410,6 +389,70 @@ export default function ShippingOrderPage() {
 
   const formatDate = (d: string) => d ? d.split("T")[0] : "-";
 
+  // 출하지시 데이터를 플랫한 행 목록으로 변환 (EDataTable용)
+  const flattenedOrders = useMemo(() => {
+    const rows: any[] = [];
+    for (const order of orders) {
+      const items = Array.isArray(order.items) ? order.items.filter((it: any) => it.id) : [];
+      if (items.length === 0) {
+        rows.push({
+          _rowId: String(order.id),
+          _orderId: order.id,
+          _order: order,
+          instruction_no: order.instruction_no,
+          ship_date: formatDate(order.instruction_date),
+          customer_name: order.customer_name || "-",
+          transport_company: order.carrier_name || "-",
+          vehicle_no: order.vehicle_no || "-",
+          driver_name: order.driver_name || "-",
+          status: order.status,
+          item_code: "-",
+          item_name: "-",
+          qty: 0,
+          source_type: "-",
+          remark: order.memo || "-",
+        });
+      } else {
+        items.forEach((item: any, idx: number) => {
+          rows.push({
+            _rowId: `${order.id}-${item.id}`,
+            _orderId: order.id,
+            _order: order,
+            instruction_no: idx === 0 ? order.instruction_no : "",
+            ship_date: idx === 0 ? formatDate(order.instruction_date) : "",
+            customer_name: idx === 0 ? (order.customer_name || "-") : "",
+            transport_company: idx === 0 ? (order.carrier_name || "-") : "",
+            vehicle_no: idx === 0 ? (order.vehicle_no || "-") : "",
+            driver_name: idx === 0 ? (order.driver_name || "-") : "",
+            status: idx === 0 ? order.status : "",
+            item_code: item.item_code || "",
+            item_name: item.item_name || "",
+            qty: Number(item.order_qty || 0),
+            source_type: item.source_type || "",
+            remark: idx === 0 ? (order.memo || "-") : "",
+          });
+        });
+      }
+    }
+    return rows;
+  }, [orders]);
+
+  // checkedIds를 order.id 기준으로 관리하므로 _orderId로 매핑
+  const flatCheckedRowIds = useMemo(() => {
+    return flattenedOrders
+      .filter((r) => checkedIds.includes(r._orderId))
+      .map((r) => r._rowId);
+  }, [flattenedOrders, checkedIds]);
+
+  const handleFlatCheckedChange = useCallback((rowIds: string[]) => {
+    const orderIds = new Set<number>();
+    for (const rowId of rowIds) {
+      const row = flattenedOrders.find((r) => r._rowId === rowId);
+      if (row) orderIds.add(row._orderId);
+    }
+    setCheckedIds(Array.from(orderIds));
+  }, [flattenedOrders]);
+
   const dataSourceTitle: Record<DataSourceType, string> = {
     shipmentPlan: "출하계획 목록",
     salesOrder: "수주정보 목록",
@@ -417,272 +460,213 @@ export default function ShippingOrderPage() {
   };
 
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4">
-      {/* 검색 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">출하지시번호</Label>
-            <Input placeholder="검색" className="w-[160px] h-9" value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSearch()} />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">거래처</Label>
-            <Input placeholder="거래처 검색" className="w-[140px] h-9" value={searchCustomer}
-              onChange={(e) => setSearchCustomer(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSearch()} />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[110px] h-9"><SelectValue placeholder="전체" /></SelectTrigger>
-              <SelectContent>
-                {STATUS_OPTIONS.map(o => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">출하일자</Label>
-            <div className="flex items-center gap-2">
-              <div className="w-[160px]">
-                <FormDatePicker value={searchDateFrom} onChange={setSearchDateFrom} placeholder="시작일" />
-              </div>
-              <span className="text-muted-foreground">~</span>
-              <div className="w-[160px]">
-                <FormDatePicker value={searchDateTo} onChange={setSearchDateTo} placeholder="종료일" />
-              </div>
-            </div>
-          </div>
-          <div className="flex-1" />
-          <div className="flex items-center gap-2">
-            {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+    <div className="flex flex-col h-full p-4 gap-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>영업관리</span>
+        <span className="text-muted-foreground/40">/</span>
+        <span className="font-semibold text-foreground">출하지시</span>
+      </nav>
 
-      {/* 메인 테이블 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm flex flex-col">
-        <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-          <div className="font-semibold flex items-center gap-2 text-sm">
-            <Truck className="w-5 h-5" /> 출하지시 관리
-            <Badge variant="secondary" className="font-normal">{orders.length}건</Badge>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
-            </Button>
-            <Button size="sm" onClick={() => openModal()}>
-              <Plus className="w-4 h-4 mr-1.5" /> 출하지시 등록
-            </Button>
-            <Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDeleteSelected}>
-              <Trash2 className="w-4 h-4 mr-1.5" /> 선택삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
-            </Button>
-          </div>
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ts.tableName}
+        filterId="c16-shipping-order"
+        onFilterChange={setSearchFilters}
+        dataCount={orders.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between flex-wrap gap-3 shrink-0">
+        <div className="flex items-center gap-2">
+          <h2 className="text-[15px] font-bold text-foreground">출하지시 관리</h2>
+          <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+            {orders.length}건
+          </span>
+          {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
         </div>
-
-        <div className="flex-1 overflow-auto">
-          {loading ? (
-            <div className="flex items-center justify-center h-32">
-              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-            </div>
-          ) : (
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">
-                    <Checkbox checked={orders.length > 0 && checkedIds.length === orders.length} onCheckedChange={handleCheckAll} />
-                  </TableHead>
-                  <TableHead className="w-[140px]">출하지시번호</TableHead>
-                  <TableHead className="w-[100px] text-center">출하일자</TableHead>
-                  <TableHead className="w-[120px]">거래처명</TableHead>
-                  <TableHead className="w-[100px]">운송업체</TableHead>
-                  <TableHead className="w-[90px]">차량번호</TableHead>
-                  <TableHead className="w-[80px]">기사명</TableHead>
-                  <TableHead className="w-[80px] text-center">상태</TableHead>
-                  <TableHead className="w-[100px]">품번</TableHead>
-                  <TableHead className="w-[130px]">품명</TableHead>
-                  <TableHead className="w-[70px] text-right">수량</TableHead>
-                  <TableHead className="w-[80px] text-center">소스</TableHead>
-                  <TableHead>비고</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {orders.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={13} className="h-40 text-center text-muted-foreground">
-                      <div className="flex flex-col items-center gap-2">
-                        <Truck className="w-12 h-12 text-muted-foreground/30" />
-                        <div className="font-medium">등록된 출하지시가 없습니다</div>
-                        <div className="text-sm">출하지시 등록 버튼으로 등록하세요</div>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ) : (
-                  orders.map((order: any) => {
-                    const items = Array.isArray(order.items) ? order.items.filter((it: any) => it.id) : [];
-                    if (items.length === 0) {
-                      return (
-                        <TableRow key={order.id} className="cursor-pointer hover:bg-muted/50" onClick={() => openModal(order)}>
-                          <TableCell className="text-center" onClick={e => e.stopPropagation()}>
-                            <Checkbox checked={checkedIds.includes(order.id)} onCheckedChange={(c) => {
-                              if (c) setCheckedIds(p => [...p, order.id]);
-                              else setCheckedIds(p => p.filter(i => i !== order.id));
-                            }} />
-                          </TableCell>
-                          <TableCell className="font-medium">{order.instruction_no}</TableCell>
-                          <TableCell className="text-center">{formatDate(order.instruction_date)}</TableCell>
-                          <TableCell>{order.customer_name || "-"}</TableCell>
-                          <TableCell>{order.carrier_name || "-"}</TableCell>
-                          <TableCell>{order.vehicle_no || "-"}</TableCell>
-                          <TableCell>{order.driver_name || "-"}</TableCell>
-                          <TableCell className="text-center">
-                            <span className={cn("px-2 py-1 rounded-full text-[11px] font-medium border", getStatusColor(order.status))}>{getStatusLabel(order.status)}</span>
-                          </TableCell>
-                          <TableCell>-</TableCell>
-                          <TableCell>-</TableCell>
-                          <TableCell className="text-right">0</TableCell>
-                          <TableCell className="text-center">-</TableCell>
-                          <TableCell className="text-xs text-muted-foreground truncate max-w-[100px]">{order.memo || "-"}</TableCell>
-                        </TableRow>
-                      );
-                    }
-                    return items.map((item: any, itemIdx: number) => (
-                      <TableRow key={`${order.id}-${item.id}`} className="cursor-pointer hover:bg-muted/50" onClick={() => openModal(order)}>
-                        <TableCell className="text-center" onClick={e => e.stopPropagation()}>
-                          {itemIdx === 0 && <Checkbox checked={checkedIds.includes(order.id)} onCheckedChange={(c) => {
-                            if (c) setCheckedIds(p => [...p, order.id]);
-                            else setCheckedIds(p => p.filter(i => i !== order.id));
-                          }} />}
-                        </TableCell>
-                        <TableCell className="font-medium">{itemIdx === 0 ? order.instruction_no : ""}</TableCell>
-                        <TableCell className="text-center">{itemIdx === 0 ? formatDate(order.instruction_date) : ""}</TableCell>
-                        <TableCell>{itemIdx === 0 ? (order.customer_name || "-") : ""}</TableCell>
-                        <TableCell>{itemIdx === 0 ? (order.carrier_name || "-") : ""}</TableCell>
-                        <TableCell>{itemIdx === 0 ? (order.vehicle_no || "-") : ""}</TableCell>
-                        <TableCell>{itemIdx === 0 ? (order.driver_name || "-") : ""}</TableCell>
-                        <TableCell className="text-center">
-                          {itemIdx === 0 && <span className={cn("px-2 py-1 rounded-full text-[11px] font-medium border", getStatusColor(order.status))}>{getStatusLabel(order.status)}</span>}
-                        </TableCell>
-                        <TableCell className="text-xs text-muted-foreground">{item.item_code}</TableCell>
-                        <TableCell className="font-medium text-sm">{item.item_name}</TableCell>
-                        <TableCell className="text-right">{Number(item.order_qty || 0).toLocaleString()}</TableCell>
-                        <TableCell className="text-center">
-                          {(() => { const b = getSourceBadge(item.source_type || ""); return <span className={cn("px-2 py-0.5 rounded-full text-[10px]", b.cls)}>{b.label}</span>; })()}
-                        </TableCell>
-                        <TableCell className="text-xs text-muted-foreground truncate max-w-[100px]">{itemIdx === 0 ? (order.memo || "-") : ""}</TableCell>
-                      </TableRow>
-                    ));
-                  })
-                )}
-              </TableBody>
-            </Table>
-          )}
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5" />
+            엑셀 업로드
+          </Button>
+          <Button size="sm" onClick={() => openModal()}>
+            <Plus className="w-3.5 h-3.5" />
+            출하지시 등록
+          </Button>
+          <div className="w-px h-5 bg-border" />
+          <Button
+            variant="outline"
+            size="sm"
+            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+            disabled={checkedIds.length === 0}
+            onClick={handleDeleteSelected}
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+            선택삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
+          </Button>
+          <div className="w-px h-5 bg-border" />
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
         </div>
       </div>
 
+      {/* 메인 테이블 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card flex flex-col">
+        <EDataTable
+          columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+            key: col.key,
+            label: col.label,
+            align: col.key === "qty" ? "right" : col.key === "status" || col.key === "source_type" || col.key === "ship_date" ? "center" : undefined,
+            formatNumber: col.key === "qty",
+            sortable: false,
+            filterable: false,
+            render: col.key === "status"
+              ? (val: any) => val ? (
+                  <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(val))}>
+                    {getStatusLabel(val)}
+                  </span>
+                ) : null
+              : col.key === "source_type"
+              ? (val: any) => {
+                  if (!val || val === "-") return <span>-</span>;
+                  const b = getSourceBadge(val);
+                  return <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", b.cls)}>{b.label}</span>;
+                }
+              : undefined,
+          }))}
+          data={ts.groupData(flattenedOrders)}
+          rowKey={(row) => row._rowId}
+          loading={loading}
+          emptyMessage="등록된 출하지시가 없어요"
+          showCheckbox
+          checkedIds={flatCheckedRowIds}
+          onCheckedChange={handleFlatCheckedChange}
+          selectedId={selectedOrderId != null ? String(selectedOrderId) : null}
+          onRowClick={(row) => setSelectedOrderId(row._orderId)}
+          onRowDoubleClick={(row) => openModal(row._order)}
+          showPagination
+          draggableColumns={false}
+          columnOrderKey="c16-shipping-order"
+        />
+      </div>
+
       {/* 등록/수정 모달 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title={isEditMode ? "출하지시 수정" : "출하지시 등록"}
-        description={isEditMode ? "출하지시 정보를 수정합니다." : "왼쪽에서 데이터를 선택하고 오른쪽에서 출하지시 정보를 입력하세요."}
-        defaultMaxWidth="max-w-[90vw]"
-        defaultWidth="w-[1400px]"
-        className="h-[90vh]"
-        contentClassName="overflow-hidden flex flex-col"
-        footer={
-          <>
-            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
-            <Button onClick={handleSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
-            </Button>
-          </>
-        }
-      >
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[90vw] w-[1400px] h-[90vh] flex flex-col overflow-hidden p-0 gap-0">
+          <DialogHeader className="px-4 py-3 border-b shrink-0">
+            <DialogTitle className="text-[15px] font-bold">
+              {isEditMode ? "출하지시 수정" : "출하지시 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-xs text-muted-foreground mt-0.5">
+              {isEditMode ? "출하지시 정보를 수정해요." : "왼쪽에서 데이터를 선택하고 오른쪽에서 출하지시 정보를 입력해요."}
+            </DialogDescription>
+          </DialogHeader>
 
           <div className="flex-1 overflow-hidden">
             <ResizablePanelGroup direction="horizontal">
               {/* 왼쪽: 데이터 소스 */}
               <ResizablePanel defaultSize={55} minSize={30}>
                 <div className="flex flex-col h-full">
-                  <div className="p-3 border-b bg-muted/30 flex flex-wrap items-center gap-2 shrink-0">
+                  {/* 소스 검색 헤더 */}
+                  <div className="px-4 py-2 border-b bg-muted/50 flex flex-wrap items-center gap-2 shrink-0">
                     <Select value={dataSource} onValueChange={(v) => setDataSource(v as DataSourceType)}>
-                      <SelectTrigger className="w-[130px] h-8 text-xs"><SelectValue /></SelectTrigger>
+                      <SelectTrigger className="w-[120px] h-9 text-xs"><SelectValue /></SelectTrigger>
                       <SelectContent>
                         <SelectItem value="shipmentPlan">출하계획</SelectItem>
                         <SelectItem value="salesOrder">수주정보</SelectItem>
                         <SelectItem value="itemInfo">품목정보</SelectItem>
                       </SelectContent>
                     </Select>
-                    <Input placeholder="품번, 품명 검색" className="flex-1 h-8 text-xs min-w-[120px]"
-                      value={sourceKeyword} onChange={(e) => setSourceKeyword(e.target.value)}
-                      onKeyDown={(e) => { if (e.key === "Enter") { setSourcePage(1); fetchSourceData(1); }}} />
-                    <Button size="sm" className="h-8 text-xs" onClick={() => { setSourcePage(1); fetchSourceData(1); }} disabled={sourceLoading}>
+                    <Input
+                      placeholder="품번, 품명 검색"
+                      className="flex-1 h-9 text-xs min-w-[120px]"
+                      value={sourceKeyword}
+                      onChange={(e) => setSourceKeyword(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") { setSourcePage(1); fetchSourceData(1); }
+                      }}
+                    />
+                    <Button
+                      size="sm"
+                      className="h-8 text-xs"
+                      onClick={() => { setSourcePage(1); fetchSourceData(1); }}
+                      disabled={sourceLoading}
+                    >
                       {sourceLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Search className="w-3 h-3" />}
                       <span className="ml-1">조회</span>
                     </Button>
                   </div>
 
-                  <div className="px-4 py-2 flex items-center justify-between border-b shrink-0">
-                    <div className="text-sm font-medium">
-                      {dataSourceTitle[dataSource]}
-                      <span className="text-muted-foreground ml-2 font-normal">
-                        선택: <span className="text-primary font-semibold">{selectedItems.length}</span>개
-                      </span>
-                    </div>
+                  {/* 소스 서브 헤더 */}
+                  <div className="px-3 py-1.5 flex items-center gap-2 border-b bg-muted/30 shrink-0">
+                    <span className="text-[13px] font-bold text-foreground">{dataSourceTitle[dataSource]}</span>
+                    <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                      선택 {selectedItems.length}개
+                    </span>
                   </div>
 
+                  {/* 소스 테이블 */}
                   <div className="flex-1 overflow-auto">
                     {sourceLoading ? (
-                      <div className="flex items-center justify-center py-12"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
+                      <div className="flex items-center justify-center py-12">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
                     ) : sourceData.length === 0 ? (
-                      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-                        <div className="text-sm">조회 버튼을 눌러 데이터를 불러오세요</div>
+                      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                        <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
+                          <Search className="w-5 h-5 text-muted-foreground/30" />
+                        </div>
+                        <p className="text-sm">조회 버튼을 눌러 데이터를 불러와주세요</p>
                       </div>
                     ) : (
                       <Table>
-                        <TableHeader className="sticky top-0 bg-background z-10">
-                          <TableRow>
-                            <TableHead className="w-[40px] text-center">선택</TableHead>
-                            <TableHead className="w-[100px]">품번</TableHead>
-                            <TableHead>품명</TableHead>
-                            <TableHead className="w-[100px]">규격</TableHead>
-                            <TableHead className="w-[100px]">거래처</TableHead>
-                            <TableHead className="w-[70px] text-right">수량</TableHead>
-                            {dataSource === "shipmentPlan" && <TableHead className="w-[70px] text-center">상태</TableHead>}
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">선택</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                            <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처</TableHead>
+                            <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                            {dataSource === "shipmentPlan" && <TableHead className="w-[70px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
                           </TableRow>
                         </TableHeader>
                         <TableBody>
                           {sourceData.map((item: any, idx: number) => {
                             const itemId = dataSource === "itemInfo" ? item.item_code : item.id;
                             const isSelected = selectedItems.some(s => {
-                              // 같은 소스 타입에서 id 매칭
                               if (s.sourceType === dataSource) {
                                 if (dataSource === "itemInfo") return s.itemCode === itemId;
                                 return String(s.id) === String(itemId);
                               }
-                              // 다른 소스 타입이라도 같은 품번이면 중복 방지
                               if (dataSource === "shipmentPlan" && s.shipmentPlanId) return String(s.shipmentPlanId) === String(item.id);
                               if (dataSource === "salesOrder" && s.detailId) return String(s.detailId) === String(item.id);
                               return false;
                             });
                             return (
-                              <TableRow key={`${dataSource}-${itemId}-${idx}`} className={cn("cursor-pointer hover:bg-muted/50", isSelected && "bg-primary/5")} onClick={() => toggleSourceItem(item)}>
+                              <TableRow
+                                key={`${dataSource}-${itemId}-${idx}`}
+                                className={cn("cursor-pointer transition-colors", isSelected && "bg-primary/5")}
+                                onClick={() => toggleSourceItem(item)}
+                              >
                                 <TableCell className="text-center" onClick={e => e.stopPropagation()}>
                                   <Checkbox checked={isSelected} onCheckedChange={() => toggleSourceItem(item)} />
                                 </TableCell>
-                                <TableCell className="text-xs">{item.item_code || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{item.item_code || "-"}</TableCell>
                                 <TableCell className="text-sm font-medium">{item.item_name || "-"}</TableCell>
-                                <TableCell className="text-xs text-muted-foreground">{item.spec || "-"}</TableCell>
-                                <TableCell className="text-xs">{item.customer_name || "-"}</TableCell>
-                                <TableCell className="text-right text-xs">{Number(item.plan_qty || item.qty || item.balance_qty || 0).toLocaleString()}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{item.spec || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{item.customer_name || "-"}</TableCell>
+                                <TableCell className="text-right text-[13px]">
+                                  {Number(item.plan_qty || item.qty || item.balance_qty || 0).toLocaleString()}
+                                </TableCell>
                                 {dataSource === "shipmentPlan" && (
                                   <TableCell className="text-center">
-                                    <Badge variant="secondary" className="text-[10px]">{getStatusLabel(item.status)}</Badge>
+                                    <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", getStatusColor(item.status))}>
+                                      {getStatusLabel(item.status)}
+                                    </span>
                                   </TableCell>
                                 )}
                               </TableRow>
@@ -695,7 +679,7 @@ export default function ShippingOrderPage() {
 
                   {/* 페이징 */}
                   {sourceTotalCount > 0 && (
-                    <div className="px-4 py-2 border-t bg-muted/10 flex items-center justify-between shrink-0">
+                    <div className="px-3 py-1.5 border-t bg-muted/30 flex items-center justify-between shrink-0">
                       <div className="flex items-center gap-2">
                         <span className="text-muted-foreground text-[11px]">표시:</span>
                         <Input
@@ -709,9 +693,7 @@ export default function ShippingOrderPage() {
                           }}
                           className="h-7 w-[60px] text-center text-[11px]"
                         />
-                        <span className="text-muted-foreground text-[11px]">
-                          총 {sourceTotalCount}건
-                        </span>
+                        <span className="text-muted-foreground text-[11px]">총 {sourceTotalCount}건</span>
                       </div>
                       <div className="flex items-center gap-1">
                         <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
@@ -722,12 +704,16 @@ export default function ShippingOrderPage() {
                           onClick={() => { const p = sourcePage - 1; setSourcePage(p); fetchSourceData(p); }}>
                           <ChevronLeft className="w-3.5 h-3.5" />
                         </Button>
-                        <span className="text-xs font-medium px-2">{sourcePage} / {Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize))}</span>
-                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                        <span className="text-xs font-medium px-2">
+                          {sourcePage} / {Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize))}
+                        </span>
+                        <Button variant="outline" size="icon" className="h-7 w-7"
+                          disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
                           onClick={() => { const p = sourcePage + 1; setSourcePage(p); fetchSourceData(p); }}>
                           <ChevronRight className="w-3.5 h-3.5" />
                         </Button>
-                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                        <Button variant="outline" size="icon" className="h-7 w-7"
+                          disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
                           onClick={() => { const p = Math.ceil(sourceTotalCount / sourcePageSize); setSourcePage(p); fetchSourceData(p); }}>
                           <ChevronsRight className="w-3.5 h-3.5" />
                         </Button>
@@ -741,25 +727,32 @@ export default function ShippingOrderPage() {
 
               {/* 오른쪽: 폼 */}
               <ResizablePanel defaultSize={45} minSize={30}>
-                <div className="flex flex-col h-full overflow-auto p-5 bg-muted/20 gap-5">
+                <div className="flex flex-col h-full overflow-auto p-4 gap-4">
                   {/* 기본 정보 */}
-                  <div className="bg-background border rounded-lg p-5 shrink-0">
-                    <h3 className="text-sm font-semibold mb-4">기본 정보</h3>
-                    <div className="grid grid-cols-2 gap-4">
-                      <div className="space-y-1.5">
-                        <Label className="text-xs">출하지시번호</Label>
+                  <div className="border rounded-lg p-4 shrink-0">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-3">기본 정보</p>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">출하지시번호</Label>
                         <Input value={formOrderNumber} readOnly className="h-9 bg-muted/50 text-muted-foreground" />
                       </div>
-                      <div className="space-y-1.5">
-                        <Label className="text-xs">출하지시일 <span className="text-destructive">*</span></Label>
-                        <FormDatePicker value={formOrderDate} onChange={setFormOrderDate} placeholder="날짜 선택" />
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">
+                          출하지시일 <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                          type="date"
+                          className="h-9"
+                          value={formOrderDate}
+                          onChange={(e) => setFormOrderDate(e.target.value)}
+                        />
                       </div>
-                      <div className="space-y-1.5">
-                        <Label className="text-xs">거래처</Label>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">거래처</Label>
                         <Input value={formCustomer} readOnly placeholder="품목 선택 시 자동" className="h-9 bg-muted/50" />
                       </div>
-                      <div className="space-y-1.5">
-                        <Label className="text-xs">상태</Label>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
                         <Select value={formStatus} onValueChange={setFormStatus}>
                           <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
                           <SelectContent>
@@ -773,45 +766,80 @@ export default function ShippingOrderPage() {
                   </div>
 
                   {/* 운송 정보 */}
-                  <div className="bg-amber-50 border border-amber-200 rounded-lg overflow-hidden shrink-0">
-                    <button className="w-full px-5 py-3 flex items-center justify-between text-left" onClick={() => setIsTransportCollapsed(!isTransportCollapsed)}>
-                      <h3 className="text-sm font-semibold text-amber-900 flex items-center gap-2">
-                        <Truck className="w-4 h-4" /> 운송 정보 <span className="text-[11px] font-normal text-muted-foreground">(선택사항)</span>
-                      </h3>
-                      {isTransportCollapsed ? <ChevronRight className="w-4 h-4 text-amber-700" /> : <ChevronDown className="w-4 h-4 text-amber-700" />}
+                  <div className="bg-muted/50 border rounded-lg overflow-hidden shrink-0">
+                    <button
+                      className="w-full px-4 py-2.5 flex items-center justify-between text-left"
+                      onClick={() => setIsTransportCollapsed(!isTransportCollapsed)}
+                    >
+                      <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2">
+                        운송 정보 <span className="text-[10px] font-normal">(선택사항)</span>
+                      </p>
+                      {isTransportCollapsed
+                        ? <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />
+                        : <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+                      }
                     </button>
                     {!isTransportCollapsed && (
-                      <div className="px-5 pb-4 grid grid-cols-3 gap-3">
-                        <div className="space-y-1.5"><Label className="text-xs">운송업체</Label><Input value={formCarrier} onChange={(e) => setFormCarrier(e.target.value)} className="h-9" /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">차량번호</Label><Input value={formVehicle} onChange={(e) => setFormVehicle(e.target.value)} className="h-9" /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">기사명</Label><Input value={formDriver} onChange={(e) => setFormDriver(e.target.value)} className="h-9" /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">연락처</Label><Input value={formDriverPhone} onChange={(e) => setFormDriverPhone(e.target.value)} className="h-9" /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">도착예정일시</Label><FormDatePicker value={formArrival} onChange={setFormArrival} placeholder="도착예정일시" includeTime /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">배송지</Label><Input value={formAddress} onChange={(e) => setFormAddress(e.target.value)} className="h-9" /></div>
+                      <div className="px-4 pb-3 grid grid-cols-3 gap-3">
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">운송업체</Label>
+                          <Input value={formCarrier} onChange={(e) => setFormCarrier(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">차량번호</Label>
+                          <Input value={formVehicle} onChange={(e) => setFormVehicle(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">기사명</Label>
+                          <Input value={formDriver} onChange={(e) => setFormDriver(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">연락처</Label>
+                          <Input value={formDriverPhone} onChange={(e) => setFormDriverPhone(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">도착예정일시</Label>
+                          <Input
+                            type="datetime-local"
+                            className="h-9"
+                            value={formArrival}
+                            onChange={(e) => setFormArrival(e.target.value)}
+                          />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">배송지</Label>
+                          <Input value={formAddress} onChange={(e) => setFormAddress(e.target.value)} className="h-9" />
+                        </div>
                       </div>
                     )}
                   </div>
 
                   {/* 선택된 품목 */}
-                  <div className="bg-background border rounded-lg p-5 flex-1 flex flex-col min-h-[200px]">
-                    <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
-                      선택된 품목 <Badge variant="default" className="text-[10px]">{selectedItems.length}</Badge>
-                    </h3>
+                  <div className="border rounded-lg p-4 flex-1 flex flex-col min-h-[200px]">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-2 flex items-center gap-2">
+                      선택된 품목
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {selectedItems.length}
+                      </span>
+                    </p>
                     <div className="flex-1 overflow-auto min-h-0">
                       {selectedItems.length === 0 ? (
-                        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
-                          <div className="text-sm">왼쪽에서 데이터를 선택하세요</div>
+                        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground border-2 border-dashed rounded-lg gap-2">
+                          <div className="w-10 h-10 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
+                            <Inbox className="w-4 h-4 text-muted-foreground/30" />
+                          </div>
+                          <p className="text-sm">왼쪽에서 데이터를 선택해주세요</p>
                         </div>
                       ) : (
                         <Table>
-                          <TableHeader className="sticky top-0 bg-background z-10">
-                            <TableRow>
-                              <TableHead className="w-[40px] text-center">소스</TableHead>
-                              <TableHead className="w-[90px]">품번</TableHead>
-                              <TableHead>품명</TableHead>
-                              <TableHead className="w-[90px] text-center">출하수량</TableHead>
-                              <TableHead className="w-[70px] text-right">계획수량</TableHead>
-                              <TableHead className="w-[40px] text-center">삭제</TableHead>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">소스</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                              <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[90px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하수량</TableHead>
+                              <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획수량</TableHead>
+                              <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">삭제</TableHead>
                             </TableRow>
                           </TableHeader>
                           <TableBody>
@@ -820,15 +848,24 @@ export default function ShippingOrderPage() {
                               return (
                                 <TableRow key={`${item.sourceType}-${item.id}-${idx}`}>
                                   <TableCell className="text-center">
-                                    <span className={cn("px-1.5 py-0.5 rounded text-[10px]", b.cls)}>{b.label.charAt(0)}</span>
+                                    <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", b.cls)}>
+                                      {b.label.charAt(0)}
+                                    </span>
                                   </TableCell>
-                                  <TableCell className="text-xs">{item.itemCode}</TableCell>
+                                  <TableCell className="text-[13px]">{item.itemCode}</TableCell>
                                   <TableCell className="text-sm font-medium">{item.itemName}</TableCell>
                                   <TableCell className="text-center">
-                                    <Input type="number" value={item.orderQty} onChange={(e) => updateOrderQty(idx, parseInt(e.target.value) || 0)}
-                                      min={1} className="h-7 w-[70px] text-xs text-right mx-auto" />
+                                    <Input
+                                      type="number"
+                                      value={item.orderQty}
+                                      onChange={(e) => updateOrderQty(idx, parseInt(e.target.value) || 0)}
+                                      min={1}
+                                      className="h-7 w-[70px] text-xs text-right mx-auto"
+                                    />
+                                  </TableCell>
+                                  <TableCell className="text-right text-[13px]">
+                                    {item.planQty ? item.planQty.toLocaleString() : "-"}
                                   </TableCell>
-                                  <TableCell className="text-right text-xs">{item.planQty ? item.planQty.toLocaleString() : "-"}</TableCell>
                                   <TableCell className="text-center">
                                     <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => removeSelectedItem(idx)}>
                                       <X className="w-3.5 h-3.5 text-destructive" />
@@ -844,25 +881,47 @@ export default function ShippingOrderPage() {
                   </div>
 
                   {/* 메모 */}
-                  <div className="bg-background border rounded-lg p-5 shrink-0">
-                    <h3 className="text-sm font-semibold mb-3">메모</h3>
-                    <Textarea value={formMemo} onChange={(e) => setFormMemo(e.target.value)} placeholder="출하지시 관련 메모" rows={2} className="resize-y" />
+                  <div className="border rounded-lg p-4 shrink-0">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-2">메모</p>
+                    <Textarea
+                      value={formMemo}
+                      onChange={(e) => setFormMemo(e.target.value)}
+                      placeholder="출하지시 관련 메모를 입력해주세요"
+                      rows={2}
+                      className="resize-y"
+                    />
                   </div>
                 </div>
               </ResizablePanel>
             </ResizablePanelGroup>
           </div>
 
-      </FullscreenDialog>
+          {/* 모달 하단 버튼 */}
+          <div className="flex items-center justify-end gap-2 px-4 py-3 border-t shrink-0">
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
 
       {/* 엑셀 업로드 모달 */}
       <ExcelUploadModal
         open={excelUploadOpen}
         onOpenChange={setExcelUploadOpen}
-        tableName="shipment_instruction"
-        onSuccess={() => {
-          fetchOrders();
-        }}
+        tableName="shipping-order"
+        onSuccess={() => { fetchOrders(); }}
+      />
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
     </div>
   );
diff --git a/frontend/app/(main)/COMPANY_29/sales/shipping-plan/page.tsx b/frontend/app/(main)/COMPANY_29/sales/shipping-plan/page.tsx
index e77e7066..747ac23d 100644
--- a/frontend/app/(main)/COMPANY_29/sales/shipping-plan/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/sales/shipping-plan/page.tsx
@@ -3,21 +3,34 @@
 import React, { useState, useMemo, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Search, Download, X, Save, Ban, RotateCcw, Loader2 } from "lucide-react";
+import { X, Save, Loader2, Inbox, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
   getShipmentPlanList,
   updateShipmentPlan,
   type ShipmentPlanListItem,
 } from "@/lib/api/shipping";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "order_no", label: "수주번호" },
+  { key: "due_date", label: "납기일" },
+  { key: "customer_name", label: "거래처" },
+  { key: "part_code", label: "품목코드" },
+  { key: "part_name", label: "품목명" },
+  { key: "order_qty", label: "수주수량" },
+  { key: "plan_qty", label: "계획수량" },
+  { key: "plan_date", label: "계획일" },
+  { key: "status", label: "상태" },
+];
 
 const STATUS_OPTIONS = [
   { value: "all", label: "전체" },
@@ -36,28 +49,25 @@ const getStatusLabel = (status: string) => {
 
 const getStatusColor = (status: string) => {
   switch (status) {
-    case "READY": return "bg-blue-100 text-blue-800 border-blue-200";
-    case "CONFIRMED": return "bg-indigo-100 text-indigo-800 border-indigo-200";
-    case "SHIPPING": return "bg-amber-100 text-amber-800 border-amber-200";
-    case "COMPLETED": return "bg-emerald-100 text-emerald-800 border-emerald-200";
-    case "CANCEL_REQUEST": return "bg-rose-100 text-rose-800 border-rose-200";
-    case "CANCELLED": return "bg-slate-100 text-slate-800 border-slate-200";
-    default: return "bg-gray-100 text-gray-800 border-gray-200";
+    case "READY": return "bg-primary/10 text-primary";
+    case "CONFIRMED": return "bg-secondary text-secondary-foreground";
+    case "SHIPPING": return "bg-warning/10 text-warning";
+    case "COMPLETED": return "bg-success/10 text-success";
+    case "CANCEL_REQUEST": return "bg-destructive/10 text-destructive";
+    case "CANCELLED": return "bg-muted text-muted-foreground";
+    default: return "bg-muted text-muted-foreground";
   }
 };
 
 export default function ShippingPlanPage() {
+  const ts = useTableSettings("c16-shipping-plan", "shipment_plan", GRID_COLUMNS);
   const [data, setData] = useState<ShipmentPlanListItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [selectedId, setSelectedId] = useState<number | null>(null);
   const [checkedIds, setCheckedIds] = useState<number[]>([]);
 
-  // 검색
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchCustomer, setSearchCustomer] = useState("");
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 상세 패널 편집
   const [editPlanQty, setEditPlanQty] = useState("");
@@ -66,28 +76,25 @@ export default function ShippingPlanPage() {
   const [isDetailChanged, setIsDetailChanged] = useState(false);
   const [saving, setSaving] = useState(false);
 
-  // 날짜 초기화
-  useEffect(() => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    const oneMonthLater = new Date(today);
-    oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
-
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(oneMonthLater.toISOString().split("T")[0]);
-  }, []);
 
   // 데이터 조회
   const fetchData = useCallback(async () => {
     setLoading(true);
     try {
       const params: any = {};
-      if (searchDateFrom) params.dateFrom = searchDateFrom;
-      if (searchDateTo) params.dateTo = searchDateTo;
-      if (searchStatus !== "all") params.status = searchStatus;
-      if (searchCustomer.trim()) params.customer = searchCustomer.trim();
-      if (searchKeyword.trim()) params.keyword = searchKeyword.trim();
+      for (const f of searchFilters) {
+        if (f.columnName === "plan_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split(",");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status") {
+          params.status = f.value;
+        } else if (f.columnName === "customer_name") {
+          params.customer = f.value;
+        } else {
+          params.keyword = f.value;
+        }
+      }
 
       const result = await getShipmentPlanList(params);
       if (result.success) {
@@ -98,37 +105,21 @@ export default function ShippingPlanPage() {
     } finally {
       setLoading(false);
     }
-  }, [searchDateFrom, searchDateTo, searchStatus, searchCustomer, searchKeyword]);
+  }, [searchFilters]);
 
-  // 초기 로드 + 검색 시 자동 조회
+  // searchFilters 변경 시 자동 조회
   useEffect(() => {
-    if (searchDateFrom && searchDateTo) {
-      fetchData();
-    }
-  }, [searchDateFrom, searchDateTo]);
-
-  const handleSearch = () => fetchData();
-
-  const handleResetSearch = () => {
-    setSearchStatus("all");
-    setSearchCustomer("");
-    setSearchKeyword("");
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    const oneMonthLater = new Date(today);
-    oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(oneMonthLater.toISOString().split("T")[0]);
-  };
+    fetchData();
+  }, [fetchData]);
 
   const selectedPlan = useMemo(() => data.find(p => p.id === selectedId), [data, selectedId]);
 
   const groupedData = useMemo(() => {
-    const orderMap = new Map<string, ShipmentPlanListItem[]>();
+    const grouped = ts.groupData(data);
+    const orderMap = new Map<string, any[]>();
     const orderKeys: string[] = [];
-    data.forEach(plan => {
-      const key = plan.order_no || `_no_order_${plan.id}`;
+    grouped.forEach(plan => {
+      const key = (plan as any)._isGroupSummary ? `_summary_${orderKeys.length}` : (plan.order_no || `_no_order_${plan.id}`);
       if (!orderMap.has(key)) {
         orderMap.set(key, []);
         orderKeys.push(key);
@@ -139,7 +130,7 @@ export default function ShippingPlanPage() {
       orderNo: key,
       plans: orderMap.get(key)!,
     }));
-  }, [data]);
+  }, [data, ts.groupData]);
 
   const handleRowClick = (plan: ShipmentPlanListItem) => {
     if (isDetailChanged && selectedId !== plan.id) {
@@ -160,20 +151,12 @@ export default function ShippingPlanPage() {
     }
   };
 
-  const handleCheck = (id: number, checked: boolean) => {
-    if (checked) {
-      setCheckedIds(prev => [...prev, id]);
-    } else {
-      setCheckedIds(prev => prev.filter(i => i !== id));
-    }
-  };
-
   const handleSaveDetail = async () => {
     if (!selectedId || !selectedPlan) return;
 
     const qty = Number(editPlanQty);
     if (qty <= 0) {
-      alert("계획수량은 0보다 커야 합니다.");
+      alert("계획수량은 0보다 커야 해요.");
       return;
     }
     if (!editPlanDate) {
@@ -190,7 +173,7 @@ export default function ShippingPlanPage() {
       });
       if (result.success) {
         setIsDetailChanged(false);
-        alert("저장되었습니다.");
+        alert("저장되었어요.");
         fetchData();
       } else {
         alert(result.message || "저장 실패");
@@ -213,345 +196,259 @@ export default function ShippingPlanPage() {
   };
 
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4">
-      {/* 검색 영역 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">출하계획일</Label>
-            <div className="flex items-center gap-2">
-              <Input
-                type="date"
-                className="w-[140px] h-9"
-                value={searchDateFrom}
-                onChange={(e) => setSearchDateFrom(e.target.value)}
-              />
-              <span className="text-muted-foreground">~</span>
-              <Input
-                type="date"
-                className="w-[140px] h-9"
-                value={searchDateTo}
-                onChange={(e) => setSearchDateTo(e.target.value)}
-              />
-            </div>
-          </div>
+    <div className="flex flex-col h-full p-4 gap-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>영업관리</span>
+        <span className="text-muted-foreground/40">/</span>
+        <span className="font-semibold text-foreground">출하계획</span>
+      </nav>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[120px] h-9">
-                <SelectValue placeholder="전체" />
-              </SelectTrigger>
-              <SelectContent>
-                {STATUS_OPTIONS.map(o => (
-                  <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName="shipment_plan"
+        filterId="c16-shipping-plan"
+        onFilterChange={setSearchFilters}
+        dataCount={data.length}
+        externalFilterConfig={ts.filterConfig}
+      />
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">거래처</Label>
-            <Input
-              placeholder="거래처 검색"
-              className="w-[150px] h-9"
-              value={searchCustomer}
-              onChange={(e) => setSearchCustomer(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-            />
-          </div>
-
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">수주번호/품목</Label>
-            <Input
-              placeholder="수주번호 / 품목 검색"
-              className="w-[220px] h-9"
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-            />
-          </div>
-
-          <div className="flex-1" />
-
-          <div className="flex items-center gap-2">
-            <Button size="sm" className="h-9" onClick={handleSearch} disabled={loading}>
-              {loading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Search className="w-4 h-4 mr-2" />}
-              조회
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* 테이블 + 상세 패널 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+      {/* 마스터-디테일 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
         <ResizablePanelGroup direction="horizontal">
-          <ResizablePanel defaultSize={selectedId ? 65 : 100} minSize={30}>
+          {/* 좌측: 출하계획 목록 */}
+          <ResizablePanel defaultSize={60} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  출하계획 목록
-                  <Badge variant="secondary" className="font-normal">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-bold text-foreground">출하계획 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
                     {data.length}건
-                  </Badge>
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
                 </div>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
               </div>
 
+              {/* 테이블 */}
               <div className="flex-1 overflow-auto">
-                {loading ? (
-                  <div className="flex items-center justify-center h-32">
-                    <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-                  </div>
-                ) : (
-                  <Table>
-                    <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                      <TableRow>
-                        <TableHead className="w-[40px] text-center">
-                          <Checkbox
-                            checked={data.length > 0 && checkedIds.length === data.filter(p => p.status !== "CANCELLED").length}
-                            onCheckedChange={handleCheckAll}
-                          />
-                        </TableHead>
-                        <TableHead className="w-[10%]">수주번호</TableHead>
-                        <TableHead className="w-[8%] text-center">납기일</TableHead>
-                        <TableHead className="w-[12%]">거래처</TableHead>
-                        <TableHead className="w-[20%]">품목코드</TableHead>
-                        <TableHead className="w-[20%]">품목명</TableHead>
-                        <TableHead className="w-[7%] text-right">수주수량</TableHead>
-                        <TableHead className="w-[7%] text-right">계획수량</TableHead>
-                        <TableHead className="w-[8%] text-center">출하계획일</TableHead>
-                        <TableHead className="w-[6%] text-center">상태</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {groupedData.length === 0 ? (
-                        <TableRow>
-                          <TableCell colSpan={10} className="h-32 text-center text-muted-foreground">
-                            출하계획이 없습니다.
-                          </TableCell>
-                        </TableRow>
-                      ) : (
-                        groupedData.map((group) =>
-                          group.plans.map((plan, planIdx) => (
-                            <TableRow
-                              key={plan.id}
-                              className={cn(
-                                "cursor-pointer hover:bg-muted/50 transition-colors",
-                                selectedId === plan.id && "bg-primary/5",
-                                plan.status === "CANCELLED" && "opacity-60 bg-slate-50",
-                                planIdx === 0 && "border-t-2 border-t-border"
-                              )}
-                              onClick={() => handleRowClick(plan)}
-                            >
-                              <TableCell className="text-center" onClick={e => e.stopPropagation()}>
-                                {planIdx === 0 && (
-                                  <Checkbox
-                                    checked={group.plans.every(p => checkedIds.includes(p.id))}
-                                    onCheckedChange={(c) => {
-                                      if (c) {
-                                        setCheckedIds(prev => [...new Set([...prev, ...group.plans.filter(p => p.status !== "CANCELLED").map(p => p.id)])]);
-                                      } else {
-                                        setCheckedIds(prev => prev.filter(id => !group.plans.some(p => p.id === id)));
-                                      }
-                                    }}
-                                  />
-                                )}
-                              </TableCell>
-                              <TableCell className="font-medium">
-                                {planIdx === 0 ? (plan.order_no || "-") : ""}
-                              </TableCell>
-                              <TableCell className="text-center">
-                                {planIdx === 0 ? formatDate(plan.due_date) : ""}
-                              </TableCell>
-                              <TableCell>
-                                {planIdx === 0 ? (plan.customer_name || "-") : ""}
-                              </TableCell>
-                              <TableCell className="text-muted-foreground text-xs">{plan.part_code || "-"}</TableCell>
-                              <TableCell className="font-medium">{plan.part_name || "-"}</TableCell>
-                              <TableCell className="text-right">{formatNumber(plan.order_qty)}</TableCell>
-                              <TableCell className="text-right font-semibold text-primary">{formatNumber(plan.plan_qty)}</TableCell>
-                              <TableCell className="text-center">{formatDate(plan.plan_date)}</TableCell>
-                              <TableCell className="text-center">
-                                <span className={cn("px-2 py-1 rounded-full text-[11px] font-medium border", getStatusColor(plan.status))}>
-                                  {getStatusLabel(plan.status)}
-                                </span>
-                              </TableCell>
-                            </TableRow>
-                          ))
-                        )
-                      )}
-                    </TableBody>
-                  </Table>
-                )}
+                <EDataTable
+                  columns={[
+                    { key: "order_no", label: "수주번호", render: (val: any) => <span className="font-medium text-sm">{val || "-"}</span> },
+                    { key: "due_date", label: "납기일", align: "center" as const, render: (val: any) => <span className="text-sm">{formatDate(val)}</span> },
+                    { key: "customer_name", label: "거래처", render: (val: any) => <span className="text-sm">{val || "-"}</span> },
+                    { key: "part_code", label: "품목코드", render: (val: any) => <span className="text-muted-foreground text-[13px]">{val || "-"}</span> },
+                    { key: "part_name", label: "품목명", render: (val: any) => <span className="font-medium text-sm">{val || "-"}</span> },
+                    { key: "order_qty", label: "수주수량", align: "right" as const, formatNumber: true },
+                    { key: "plan_qty", label: "계획수량", align: "right" as const, render: (val: any) => <span className="font-semibold text-primary text-sm">{formatNumber(val)}</span> },
+                    { key: "plan_date", label: "계획일", align: "center" as const, render: (val: any) => <span className="text-sm">{formatDate(val)}</span> },
+                    { key: "status", label: "상태", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(val))}>{getStatusLabel(val)}</span> },
+                  ] as EDataTableColumn<ShipmentPlanListItem>[]}
+                  data={data}
+                  rowKey={(row) => String(row.id)}
+                  loading={loading}
+                  emptyMessage="출하계획이 없어요"
+                  selectedId={selectedId !== null ? String(selectedId) : null}
+                  onSelect={(id) => {
+                    if (id) {
+                      const plan = data.find(p => String(p.id) === id);
+                      if (plan) handleRowClick(plan);
+                    }
+                  }}
+                  onRowClick={(row) => handleRowClick(row)}
+                  showCheckbox
+                  checkedIds={checkedIds.map(String)}
+                  onCheckedChange={(ids) => setCheckedIds(ids.map(Number))}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
               </div>
             </div>
           </ResizablePanel>
 
-          {/* 상세 패널 */}
-          {selectedId && selectedPlan && (
-            <>
-              <ResizableHandle withHandle />
-              <ResizablePanel defaultSize={35} minSize={25}>
-                <div className="flex flex-col h-full bg-card">
-                  <div className="flex items-center justify-between p-3 border-b shrink-0">
-                    <span className="font-semibold text-sm">
-                      {selectedPlan.shipment_plan_no || `#${selectedPlan.id}`}
-                    </span>
-                    <div className="flex items-center gap-2">
-                      <Button
-                        size="sm"
-                        onClick={handleSaveDetail}
-                        disabled={!isDetailChanged || saving}
-                        className={cn(isDetailChanged ? "bg-primary" : "bg-muted text-muted-foreground")}
-                      >
-                        {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
-                        저장
-                      </Button>
-                      <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setSelectedId(null)}>
-                        <X className="w-4 h-4" />
-                      </Button>
+          <ResizableHandle withHandle />
+
+          {/* 우측: 상세 패널 */}
+          <ResizablePanel defaultSize={40} minSize={20}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-bold text-foreground">출하계획 상세</span>
+                  {selectedPlan && (
+                    <span className="text-[11px] font-mono text-muted-foreground">{selectedPlan.shipment_plan_no}</span>
+                  )}
+                </div>
+                {selectedPlan && (
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      size="sm"
+                      onClick={handleSaveDetail}
+                      disabled={!isDetailChanged || saving}
+                      variant={isDetailChanged ? "default" : "secondary"}
+                    >
+                      {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
+                      저장
+                    </Button>
+                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setSelectedId(null)}>
+                      <X className="w-3.5 h-3.5" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {/* 상세 컨텐츠 */}
+              {selectedPlan ? (
+                <div className="flex-1 overflow-auto p-4 space-y-4">
+                  {/* 기본 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">상태</p>
+                      <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium inline-block", getStatusColor(selectedPlan.status))}>
+                        {getStatusLabel(selectedPlan.status)}
+                      </span>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주번호</p>
+                      <p className="text-sm font-mono text-muted-foreground">{selectedPlan.order_no || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">거래처</p>
+                      <p className="text-sm font-medium text-foreground">{selectedPlan.customer_name || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">납기일</p>
+                      <p className="text-sm text-foreground">{formatDate(selectedPlan.due_date)}</p>
                     </div>
                   </div>
 
-                  <div className="flex-1 overflow-auto p-4 space-y-6">
-                    {/* 기본 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">기본 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">상태</span>
-                          <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getStatusColor(selectedPlan.status))}>
-                            {getStatusLabel(selectedPlan.status)}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">수주번호</span>
-                          <span>{selectedPlan.order_no || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">거래처</span>
-                          <span>{selectedPlan.customer_name || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">등록일</span>
-                          <span>{formatDate(selectedPlan.created_date)}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">납기일</span>
-                          <span>{formatDate(selectedPlan.due_date)}</span>
-                        </div>
-                      </div>
-                    </section>
+                  <div className="border-t" />
 
-                    {/* 품목 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">품목 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm bg-muted/30 p-3 rounded-md border border-border/50">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">품목코드</span>
-                          <span>{selectedPlan.part_code || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">품목명</span>
-                          <span className="font-medium">{selectedPlan.part_name || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">규격</span>
-                          <span>{selectedPlan.spec || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">재질</span>
-                          <span>{selectedPlan.material || "-"}</span>
-                        </div>
+                  {/* 품목 정보 */}
+                  <div>
+                    <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-2">품목 정보</p>
+                    <div className="grid grid-cols-2 gap-3 bg-muted/30 border rounded-md p-3">
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">품목코드</p>
+                        <p className="text-sm font-mono text-muted-foreground">{selectedPlan.part_code || "-"}</p>
                       </div>
-                    </section>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">품목명</p>
+                        <p className="text-sm font-medium text-foreground">{selectedPlan.part_name || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">규격</p>
+                        <p className="text-sm text-foreground">{selectedPlan.spec || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">재질</p>
+                        <p className="text-sm text-foreground">{selectedPlan.material || "-"}</p>
+                      </div>
+                    </div>
+                  </div>
 
-                    {/* 수량 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">수량 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-4 text-sm">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">수주수량</span>
-                          <span>{formatNumber(selectedPlan.order_qty)}</span>
-                        </div>
-                        <div>
-                          <Label className="text-muted-foreground text-xs block mb-1">계획수량</Label>
-                          <Input
-                            type="number"
-                            className="h-8"
-                            value={editPlanQty}
-                            onChange={(e) => { setEditPlanQty(e.target.value); setIsDetailChanged(true); }}
-                            disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
-                          />
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">출하수량</span>
-                          <span>{formatNumber(selectedPlan.shipped_qty)}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">잔여수량</span>
-                          <span className={cn("font-semibold",
-                            (Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty)) > 0
-                              ? "text-destructive"
-                              : "text-emerald-600"
-                          )}>
-                            {formatNumber(Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty))}
-                          </span>
-                        </div>
-                      </div>
-                    </section>
+                  <div className="border-t" />
 
-                    {/* 출하 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">출하 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-4 text-sm">
-                        <div className="col-span-2">
-                          <Label className="text-muted-foreground text-xs block mb-1">출하계획일</Label>
-                          <Input
-                            type="date"
-                            className="h-8"
-                            value={editPlanDate}
-                            onChange={(e) => { setEditPlanDate(e.target.value); setIsDetailChanged(true); }}
-                            disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
-                          />
-                        </div>
-                        <div className="col-span-2">
-                          <Label className="text-muted-foreground text-xs block mb-1">비고</Label>
-                          <Textarea
-                            className="min-h-[80px] resize-y"
-                            value={editMemo}
-                            onChange={(e) => { setEditMemo(e.target.value); setIsDetailChanged(true); }}
-                            disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
-                            placeholder="비고 입력"
-                          />
-                        </div>
-                      </div>
-                    </section>
+                  {/* 수량 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주수량</p>
+                      <p className="text-sm text-foreground">{formatNumber(selectedPlan.order_qty)}</p>
+                    </div>
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">계획수량</Label>
+                      <Input
+                        type="number"
+                        className="h-9"
+                        value={editPlanQty}
+                        onChange={(e) => { setEditPlanQty(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                      />
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">출하수량</p>
+                      <p className="text-sm text-foreground">{formatNumber(selectedPlan.shipped_qty)}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">잔여수량</p>
+                      <p className={cn(
+                        "font-semibold text-sm",
+                        (Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty)) > 0
+                          ? "text-destructive"
+                          : "text-success"
+                      )}>
+                        {formatNumber(Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty))}
+                      </p>
+                    </div>
+                  </div>
 
-                    {/* 등록자 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">등록 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm text-muted-foreground">
-                        <div>
-                          <span className="text-xs block mb-1">등록자</span>
-                          <span className="text-foreground">{selectedPlan.created_by || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-xs block mb-1">등록일시</span>
-                          <span className="text-foreground">{selectedPlan.created_date ? new Date(selectedPlan.created_date).toLocaleString("ko-KR") : "-"}</span>
-                        </div>
-                      </div>
-                    </section>
+                  <div className="border-t" />
+
+                  {/* 출하 정보 */}
+                  <div className="space-y-3">
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">출하계획일</Label>
+                      <Input
+                        type="date"
+                        className="h-9"
+                        value={editPlanDate}
+                        onChange={(e) => { setEditPlanDate(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                      />
+                    </div>
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">비고</Label>
+                      <Textarea
+                        className="min-h-[80px] resize-y text-sm"
+                        value={editMemo}
+                        onChange={(e) => { setEditMemo(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                        placeholder="비고를 입력해주세요"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 등록 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">등록자</p>
+                      <p className="text-sm text-foreground">{selectedPlan.created_by || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">등록일시</p>
+                      <p className="text-sm text-foreground">
+                        {selectedPlan.created_date ? new Date(selectedPlan.created_date).toLocaleString("ko-KR") : "-"}
+                      </p>
+                    </div>
                   </div>
                 </div>
-              </ResizablePanel>
-            </>
-          )}
+              ) : (
+                <div className="flex flex-col items-center justify-center h-full text-center p-8 text-muted-foreground">
+                  <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center mb-4">
+                    <Inbox className="w-6 h-6 text-muted-foreground/30" />
+                  </div>
+                  <p className="text-sm font-medium">좌측에서 출하계획을 선택해주세요</p>
+                  <p className="text-xs text-muted-foreground/60 mt-1">선택하면 상세 정보가 표시돼요</p>
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
         </ResizablePanelGroup>
       </div>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_30/design/change-management/page.tsx b/frontend/app/(main)/COMPANY_30/design/change-management/page.tsx
new file mode 100644
index 00000000..39f06769
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/design/change-management/page.tsx
@@ -0,0 +1,1524 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Plus,
+  Save,
+  Inbox,
+  Pencil,
+  FileText,
+  XCircle,
+  ArrowRight,
+  Paperclip,
+  Upload,
+  Loader2,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  getDesignRequestList,
+  createDesignRequest,
+  updateDesignRequest,
+  addRequestHistory,
+  getEcnList,
+  createEcn,
+  updateEcn,
+} from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// --- Types ---
+type ChangeType = "설계오류" | "원가절감" | "고객요청" | "공정개선" | "법규대응";
+type EcrStatus = "요청접수" | "영향도분석" | "ECN발행" | "기각";
+type EcnStatus = "ECN발행" | "도면변경" | "통보완료" | "적용완료";
+type TabType = "ecr" | "ecn";
+
+interface EcrHistory {
+  status: string;
+  date: string;
+  user: string;
+  desc: string;
+}
+
+interface EcrItem {
+  id: string;
+  _id?: string;
+  date: string;
+  changeType: ChangeType;
+  urgency: "보통" | "긴급";
+  status: EcrStatus;
+  target: string;
+  drawingNo: string;
+  reqDept: string;
+  requester: string;
+  reason: string;
+  content: string;
+  impact: string[];
+  applyTiming: string;
+  ecnNo: string;
+  history: EcrHistory[];
+}
+
+interface EcnItem {
+  id: string;
+  _id?: string;
+  ecrNo: string;
+  ecrId?: string;
+  date: string;
+  applyDate: string;
+  status: EcnStatus;
+  target: string;
+  drawingBefore: string;
+  drawingAfter: string;
+  designer: string;
+  before: string;
+  after: string;
+  reason: string;
+  notifyDepts: string[];
+  remark: string;
+  history: EcrHistory[];
+}
+
+// --- Style Helpers ---
+const getChangeTypeStyle = (type: ChangeType) => {
+  switch (type) {
+    case "설계오류":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "원가절감":
+      return "bg-success/10 text-success border-success/20";
+    case "고객요청":
+      return "bg-info/10 text-info border-info/20";
+    case "공정개선":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "법규대응":
+      return "bg-primary/10 text-primary border-primary/20";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getEcrStatusStyle = (status: EcrStatus) => {
+  switch (status) {
+    case "요청접수":
+      return "bg-info/10 text-info border-info/20";
+    case "영향도분석":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "ECN발행":
+      return "bg-success/10 text-success border-success/20";
+    case "기각":
+      return "bg-muted text-muted-foreground border-border";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getEcnStatusStyle = (status: EcnStatus) => {
+  switch (status) {
+    case "ECN발행":
+      return "bg-info/10 text-info border-info/20";
+    case "도면변경":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "통보완료":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "적용완료":
+      return "bg-success/10 text-success border-success/20";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getImpactBadgeStyle = (impact: string) => {
+  switch (impact) {
+    case "BOM":
+      return "bg-info/10 text-info border-info/20";
+    case "공정":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "금형":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "검사기준":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "구매":
+    case "원가":
+      return "bg-success/10 text-success border-success/20";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getTimelineStatusStyle = (status: string) => {
+  switch (status) {
+    case "기각":
+      return "bg-muted text-muted-foreground border-border";
+    case "적용완료":
+    case "ECN발행":
+      return "bg-success/10 text-success border-success/20";
+    case "영향도분석":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "도면변경":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "통보완료":
+      return "bg-info/10 text-info border-info/20";
+    default:
+      return "bg-info/10 text-info border-info/20";
+  }
+};
+
+// --- Constants ---
+const CHANGE_TYPES: ChangeType[] = ["설계오류", "원가절감", "고객요청", "공정개선", "법규대응"];
+const ECR_STATUSES: EcrStatus[] = ["요청접수", "영향도분석", "ECN발행", "기각"];
+const ECN_STATUSES: EcnStatus[] = ["ECN발행", "도면변경", "통보완료", "적용완료"];
+const DEPARTMENTS = ["품질팀", "생산팀", "영업팀", "구매팀", "설계팀"];
+const DESIGNERS = ["이설계", "박도면", "최기구", "김전장"];
+const IMPACT_OPTIONS = [
+  { key: "BOM", label: "BOM 변경" },
+  { key: "공정", label: "공정 변경" },
+  { key: "금형", label: "금형 변경" },
+  { key: "검사기준", label: "검사기준 변경" },
+  { key: "구매", label: "구매 변경" },
+  { key: "원가", label: "원가 영향" },
+];
+const NOTIFY_DEPTS = [
+  { key: "생산팀", label: "생산팀" },
+  { key: "품질팀", label: "품질팀" },
+  { key: "구매팀", label: "구매팀" },
+  { key: "영업팀", label: "영업팀" },
+  { key: "물류팀", label: "물류팀" },
+  { key: "금형팀", label: "금형팀" },
+];
+
+// --- API Response Mapping ---
+function mapEcrFromApi(raw: any): EcrItem {
+  const history = (raw.history || []).map((h: any) => ({
+    status: h.step || h.status || "",
+    date: h.history_date || "",
+    user: h.user_name || "",
+    desc: h.description || "",
+  }));
+  return {
+    id: raw.request_no || raw.id || "",
+    _id: raw.id,
+    date: raw.request_date || "",
+    changeType: (raw.change_type as ChangeType) || "설계오류",
+    urgency: (raw.urgency as "보통" | "긴급") || "보통",
+    status: (raw.status as EcrStatus) || "요청접수",
+    target: raw.target_name || "",
+    drawingNo: raw.drawing_no || "",
+    reqDept: raw.req_dept || "",
+    requester: raw.requester || "",
+    reason: raw.reason || "",
+    content: raw.content || "",
+    impact: Array.isArray(raw.impact) ? raw.impact : [],
+    applyTiming: raw.apply_timing || "",
+    ecnNo: raw.ecn_no || "",
+    history,
+  };
+}
+
+function mapEcnFromApi(raw: any, ecrData: EcrItem[]): EcnItem {
+  const history = (raw.history || []).map((h: any) => ({
+    status: h.status || "",
+    date: h.history_date || "",
+    user: h.user_name || "",
+    desc: h.description || "",
+  }));
+  const ecrNo = raw.ecr_id
+    ? ecrData.find((e) => e._id === raw.ecr_id)?.id ?? raw.ecr_id
+    : "";
+  return {
+    id: raw.ecn_no || raw.id || "",
+    _id: raw.id,
+    ecrNo,
+    ecrId: raw.ecr_id,
+    date: raw.ecn_date || "",
+    applyDate: raw.apply_date || "",
+    status: (raw.status as EcnStatus) || "ECN발행",
+    target: raw.target || "",
+    drawingBefore: raw.drawing_before || "",
+    drawingAfter: raw.drawing_after || "",
+    designer: raw.designer || "",
+    before: raw.before_content || "",
+    after: raw.after_content || "",
+    reason: raw.reason || "",
+    notifyDepts: Array.isArray(raw.notify_depts) ? raw.notify_depts : [],
+    remark: raw.remark || "",
+    history,
+  };
+}
+
+// --- Timeline Component ---
+function Timeline({ history }: { history: EcrHistory[] }) {
+  return (
+    <div className="space-y-0">
+      {history.map((h, idx) => {
+        const isLast = idx === history.length - 1;
+        const isRejected = h.status === "기각";
+        const isCompleted = h.status === "적용완료";
+        return (
+          <div key={idx} className="flex gap-3 relative">
+            <div className="flex flex-col items-center">
+              <div
+                className={cn(
+                  "w-3 h-3 rounded-full border-2 mt-1.5 shrink-0",
+                  isLast && isRejected
+                    ? "bg-destructive border-destructive/60"
+                    : isLast && isCompleted
+                      ? "bg-success border-success/60"
+                      : isLast
+                        ? "bg-primary border-primary/50 ring-4 ring-primary/10"
+                        : "bg-success border-success/60"
+                )}
+              />
+              {!isLast && (
+                <div className="w-px flex-1 bg-border min-h-[24px]" />
+              )}
+            </div>
+            <div className="pb-4 min-w-0">
+              <div className="flex items-center gap-2 mb-0.5">
+                <span
+                  className={cn(
+                    "px-2 py-0.5 rounded-full text-[10px] font-medium border",
+                    getTimelineStatusStyle(h.status)
+                  )}
+                >
+                  {h.status}
+                </span>
+              </div>
+              <p className="text-xs text-foreground">{h.desc}</p>
+              <p className="text-[11px] text-muted-foreground mt-0.5">
+                {h.date} · {h.user}
+              </p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// --- Grid Columns ---
+const ECR_GRID_COLUMNS = [
+  { key: "request_no", label: "ECR번호" },
+  { key: "change_type", label: "변경유형" },
+  { key: "status", label: "상태" },
+  { key: "urgency", label: "긴급" },
+  { key: "target_name", label: "대상 품목/설비" },
+  { key: "drawing_no", label: "도면번호" },
+  { key: "req_dept", label: "요청부서" },
+  { key: "requester", label: "요청자" },
+  { key: "request_date", label: "요청일자" },
+  { key: "ecn_no", label: "관련 ECN" },
+];
+
+const ECN_GRID_COLUMNS = [
+  { key: "ecn_no", label: "ECN번호" },
+  { key: "status", label: "상태" },
+  { key: "target", label: "대상 품목/설비" },
+  { key: "drawing_after", label: "도면 (변경 후)" },
+  { key: "designer", label: "설계담당" },
+  { key: "ecn_date", label: "발행일자" },
+  { key: "apply_date", label: "적용일자" },
+  { key: "notify_depts", label: "통보 부서" },
+  { key: "ecr_id", label: "관련 ECR" },
+];
+
+// --- Main Component ---
+export default function DesignChangeManagementPage() {
+  const tsEcr = useTableSettings("c16-change-management-ecr", "dsn_design_request", ECR_GRID_COLUMNS);
+  const tsEcn = useTableSettings("c16-change-management-ecn", "dsn_ecn", ECN_GRID_COLUMNS);
+  const [currentTab, setCurrentTab] = useState<TabType>("ecr");
+  const [ecrData, setEcrData] = useState<EcrItem[]>([]);
+  const [ecnData, setEcnData] = useState<EcnItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // ECR 모달
+  const [isEcrModalOpen, setIsEcrModalOpen] = useState(false);
+  const [isEcrEditMode, setIsEcrEditMode] = useState(false);
+  const [ecrForm, setEcrForm] = useState<Partial<EcrItem>>({});
+  const [ecrImpactChecks, setEcrImpactChecks] = useState<Record<string, boolean>>({});
+
+  // ECN 모달
+  const [isEcnModalOpen, setIsEcnModalOpen] = useState(false);
+  const [ecnForm, setEcnForm] = useState<Partial<EcnItem>>({});
+  const [ecnNotifyChecks, setEcnNotifyChecks] = useState<Record<string, boolean>>({});
+
+  // 기각 모달
+  const [isRejectModalOpen, setIsRejectModalOpen] = useState(false);
+  const [rejectReason, setRejectReason] = useState("");
+  const [rejectTargetId, setRejectTargetId] = useState("");
+
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [ecrRes, ecnRes] = await Promise.all([
+        getDesignRequestList({ source_type: "ecr" }),
+        getEcnList(),
+      ]);
+      if (ecrRes.success && ecrRes.data) {
+        setEcrData((ecrRes.data as any[]).map(mapEcrFromApi));
+      }
+      if (ecnRes.success && ecnRes.data) {
+        const ecrList = ecrRes.success && ecrRes.data ? (ecrRes.data as any[]).map(mapEcrFromApi) : [];
+        setEcnData((ecnRes.data as any[]).map((r) => mapEcnFromApi(r, ecrList)));
+      }
+    } catch {
+      toast.error("데이터를 불러오는데 실패했어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // snake_case → camelCase 매핑 (ECR)
+  const ecrFieldMap: Record<string, string> = {
+    request_no: "id",
+    request_date: "date",
+    change_type: "changeType",
+    target_name: "target",
+    drawing_no: "drawingNo",
+    req_dept: "reqDept",
+    ecn_no: "ecnNo",
+    apply_timing: "applyTiming",
+  };
+  // snake_case → camelCase 매핑 (ECN)
+  const ecnFieldMap: Record<string, string> = {
+    ecn_no: "id",
+    ecn_date: "date",
+    apply_date: "applyDate",
+    drawing_before: "drawingBefore",
+    drawing_after: "drawingAfter",
+    ecr_id: "ecrNo",
+    notify_depts: "notifyDepts",
+  };
+  const getFieldValue = (obj: any, colName: string, map: Record<string, string>): string => {
+    const key = map[colName] || colName;
+    const val = obj[key];
+    if (Array.isArray(val)) return val.join(",");
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
+  const applyFilters = (items: any[], map: Record<string, string>) => {
+    if (searchFilters.length === 0) return items;
+    return items.filter((item) => {
+      for (const f of searchFilters) {
+        const val = getFieldValue(item, f.columnName, map);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (val !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) return false;
+          if (to && val > to) return false;
+        }
+      }
+      return true;
+    });
+  };
+
+  // --- Filtered Data ---
+  const filteredEcr = useMemo(() => {
+    return applyFilters(ecrData, ecrFieldMap)
+      .sort((a: EcrItem, b: EcrItem) => b.date.localeCompare(a.date));
+  }, [ecrData, searchFilters]);
+
+  const filteredEcn = useMemo(() => {
+    return applyFilters(ecnData, ecnFieldMap)
+      .sort((a: EcnItem, b: EcnItem) => b.date.localeCompare(a.date));
+  }, [ecnData, searchFilters]);
+
+  // --- Status Counts ---
+  const ecrStatusCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    ECR_STATUSES.forEach((s) => (counts[s] = ecrData.filter((r) => r.status === s).length));
+    return counts;
+  }, [ecrData]);
+
+  const ecnStatusCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    ECN_STATUSES.forEach((s) => (counts[s] = ecnData.filter((r) => r.status === s).length));
+    return counts;
+  }, [ecnData]);
+
+  // --- Selected Items ---
+  const selectedEcr = useMemo(
+    () => (currentTab === "ecr" ? ecrData.find((r) => r.id === selectedId) : null),
+    [ecrData, selectedId, currentTab]
+  );
+  const selectedEcn = useMemo(
+    () => (currentTab === "ecn" ? ecnData.find((r) => r.id === selectedId) : null),
+    [ecnData, selectedId, currentTab]
+  );
+
+  // --- Tab Switch ---
+  const handleTabSwitch = (tab: TabType) => {
+    setCurrentTab(tab);
+    setSelectedId(null);
+  };
+
+  const handleFilterByStatus = (_status: string) => {
+    // Status filter now handled by DynamicSearchFilter
+  };
+
+  // --- ECR/ECN Navigation ---
+  const navigateToLink = (targetId: string) => {
+    setDetailOpen(false);
+    if (targetId.startsWith("ECN")) {
+      setCurrentTab("ecn");
+      setSelectedId(targetId);
+    } else if (targetId.startsWith("ECR")) {
+      setCurrentTab("ecr");
+      setSelectedId(targetId);
+    }
+  };
+
+  // --- ECR Number Generator ---
+  const generateEcrNo = useCallback(() => {
+    const year = new Date().getFullYear();
+    const prefix = `ECR-${year}-`;
+    const existing = ecrData.filter((r) => r.id.startsWith(prefix));
+    const maxNum = existing.reduce((max, r) => {
+      const num = parseInt(r.id.split("-")[2]);
+      return num > max ? num : max;
+    }, 0);
+    return `${prefix}${String(maxNum + 1).padStart(4, "0")}`;
+  }, [ecrData]);
+
+  const generateEcnNo = useCallback(() => {
+    const year = new Date().getFullYear();
+    const prefix = `ECN-${year}-`;
+    const existing = ecnData.filter((r) => r.id.startsWith(prefix));
+    const maxNum = existing.reduce((max, r) => {
+      const num = parseInt(r.id.split("-")[2]);
+      return num > max ? num : max;
+    }, 0);
+    return `${prefix}${String(maxNum + 1).padStart(4, "0")}`;
+  }, [ecnData]);
+
+  // --- ECR Modal ---
+  const openEcrRegisterModal = () => {
+    setIsEcrEditMode(false);
+    setEcrForm({
+      id: generateEcrNo(),
+      date: new Date().toISOString().split("T")[0],
+      changeType: undefined,
+      urgency: "보통",
+      target: "",
+      drawingNo: "",
+      reqDept: "",
+      requester: "",
+      reason: "",
+      content: "",
+      applyTiming: "즉시",
+    });
+    setEcrImpactChecks({});
+    setIsEcrModalOpen(true);
+  };
+
+  const openEcrEditModal = (id: string) => {
+    const item = ecrData.find((r) => r.id === id);
+    if (!item) return;
+    setIsEcrEditMode(true);
+    setEcrForm({ ...item });
+    const checks: Record<string, boolean> = {};
+    IMPACT_OPTIONS.forEach((opt) => {
+      checks[opt.key] = item.impact.includes(opt.key);
+    });
+    setEcrImpactChecks(checks);
+    setIsEcrModalOpen(true);
+  };
+
+  const handleSaveEcr = async () => {
+    if (!ecrForm.changeType) {
+      toast.error("변경 유형을 선택해 주세요.");
+      return;
+    }
+    if (!ecrForm.target?.trim()) {
+      toast.error("대상 품목/설비를 입력해 주세요.");
+      return;
+    }
+    if (!ecrForm.reason?.trim()) {
+      toast.error("변경 사유를 입력해 주세요.");
+      return;
+    }
+    if (!ecrForm.content?.trim()) {
+      toast.error("변경 요구 내용을 입력해 주세요.");
+      return;
+    }
+
+    const impact = IMPACT_OPTIONS.filter((opt) => ecrImpactChecks[opt.key]).map((opt) => opt.key);
+    const reqDate = ecrForm.date || new Date().toISOString().split("T")[0];
+    const historyEntry = {
+      step: "요청접수",
+      history_date: reqDate,
+      user_name: ecrForm.requester || "시스템",
+      description: `${ecrForm.reqDept || ""}에서 ECR 등록`,
+    };
+
+    if (isEcrEditMode && ecrForm._id) {
+      const res = await updateDesignRequest(ecrForm._id, {
+        request_no: ecrForm.id,
+        request_date: reqDate,
+        change_type: ecrForm.changeType,
+        urgency: ecrForm.urgency || "보통",
+        target_name: ecrForm.target,
+        drawing_no: ecrForm.drawingNo || "",
+        req_dept: ecrForm.reqDept || "",
+        requester: ecrForm.requester || "",
+        reason: ecrForm.reason,
+        content: ecrForm.content,
+        impact,
+        apply_timing: ecrForm.applyTiming || "즉시",
+      });
+      if (res.success) {
+        toast.success("ECR이 수정되었어요.");
+        setIsEcrModalOpen(false);
+        fetchData();
+      } else {
+        toast.error(res.message || "ECR 수정에 실패했어요.");
+      }
+    } else {
+      const res = await createDesignRequest({
+        request_no: ecrForm.id || generateEcrNo(),
+        source_type: "ecr",
+        request_date: reqDate,
+        change_type: ecrForm.changeType,
+        urgency: ecrForm.urgency || "보통",
+        status: "요청접수",
+        target_name: ecrForm.target,
+        drawing_no: ecrForm.drawingNo || "",
+        req_dept: ecrForm.reqDept || "",
+        requester: ecrForm.requester || "",
+        reason: ecrForm.reason,
+        content: ecrForm.content,
+        impact,
+        apply_timing: ecrForm.applyTiming || "즉시",
+        history: [historyEntry],
+      });
+      if (res.success) {
+        toast.success("ECR이 등록되었어요.");
+        setIsEcrModalOpen(false);
+        fetchData();
+      } else {
+        toast.error(res.message || "ECR 등록에 실패했어요.");
+      }
+    }
+  };
+
+  // --- ECN Modal ---
+  const openEcnIssueModal = (ecrId: string) => {
+    const ecr = ecrData.find((r) => r.id === ecrId);
+    if (!ecr) return;
+
+    setEcnForm({
+      id: generateEcnNo(),
+      ecrNo: ecrId,
+      ecrId: ecr._id,
+      date: new Date().toISOString().split("T")[0],
+      target: ecr.target,
+      reason: ecr.reason,
+      drawingBefore: ecr.drawingNo,
+      drawingAfter: "",
+      designer: "",
+      before: "",
+      after: "",
+      applyDate: "",
+      remark: "",
+    });
+    setEcnNotifyChecks({});
+    setIsEcnModalOpen(true);
+  };
+
+  const handleSaveEcn = async () => {
+    if (!ecnForm.after?.trim()) {
+      toast.error("변경 후(TO-BE) 내용을 입력해 주세요.");
+      return;
+    }
+    if (!ecnForm.applyDate) {
+      toast.error("적용일자를 입력해 주세요.");
+      return;
+    }
+    if (!ecnForm.ecrId) {
+      toast.error("관련 ECR 정보가 없어요.");
+      return;
+    }
+
+    const notifyDepts = NOTIFY_DEPTS.filter((d) => ecnNotifyChecks[d.key]).map((d) => d.key);
+    const ecnDate = ecnForm.date || new Date().toISOString().split("T")[0];
+    const historyEntry = {
+      status: "ECN발행",
+      history_date: ecnDate,
+      user_name: ecnForm.designer || "시스템",
+      description: "ECN 발행",
+    };
+
+    const ecnNo = ecnForm.id || generateEcnNo();
+    const res = await createEcn({
+      ecn_no: ecnNo,
+      ecr_id: ecnForm.ecrId,
+      ecn_date: ecnDate,
+      apply_date: ecnForm.applyDate,
+      status: "ECN발행",
+      target: ecnForm.target || "",
+      drawing_before: ecnForm.drawingBefore || "",
+      drawing_after: ecnForm.drawingAfter || "(미정)",
+      designer: ecnForm.designer || "",
+      before_content: ecnForm.before || "",
+      after_content: ecnForm.after || "",
+      reason: ecnForm.reason || "",
+      remark: ecnForm.remark || "",
+      notify_depts: notifyDepts,
+      history: [historyEntry],
+    });
+
+    if (res.success) {
+      await updateDesignRequest(ecnForm.ecrId!, {
+        status: "ECN발행",
+        ecn_no: ecnNo,
+      });
+      await addRequestHistory(ecnForm.ecrId!, {
+        step: "ECN발행",
+        history_date: ecnDate,
+        user_name: ecnForm.designer || "시스템",
+        description: `${ecnNo} 발행`,
+      });
+      toast.success("ECN이 발행되었어요.");
+      setIsEcnModalOpen(false);
+      fetchData();
+    } else {
+      toast.error(res.message || "ECN 발행에 실패했어요.");
+    }
+  };
+
+  // --- ECR Reject ---
+  const openRejectModal = (id: string) => {
+    setRejectTargetId(id);
+    setRejectReason("");
+    setIsRejectModalOpen(true);
+  };
+
+  const handleRejectSubmit = async () => {
+    if (!rejectReason.trim()) {
+      toast.error("기각 사유를 입력해 주세요.");
+      return;
+    }
+
+    const ecr = ecrData.find((r) => r.id === rejectTargetId);
+    if (!ecr?._id) {
+      toast.error("ECR 정보를 찾을 수 없어요.");
+      return;
+    }
+
+    const updateRes = await updateDesignRequest(ecr._id, { status: "기각", review_memo: rejectReason });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "ECR 기각에 실패했어요.");
+      return;
+    }
+    await addRequestHistory(ecr._id, {
+      step: "기각",
+      history_date: new Date().toISOString().split("T")[0],
+      user_name: "설계팀",
+      description: rejectReason,
+    });
+    toast.success("ECR이 기각되었어요.");
+    setIsRejectModalOpen(false);
+    fetchData();
+  };
+
+  // --- Stat Cards ---
+  const ecrStatCards = [
+    { label: "요청접수", value: ecrStatusCounts["요청접수"] || 0, color: "text-info" },
+    { label: "영향도분석", value: ecrStatusCounts["영향도분석"] || 0, color: "text-warning" },
+    { label: "ECN발행", value: ecrStatusCounts["ECN발행"] || 0, color: "text-success" },
+  ];
+
+  const ecnStatCards = [
+    { label: "도면변경", value: ecnStatusCounts["도면변경"] || 0, color: "text-primary" },
+    { label: "통보완료", value: ecnStatusCounts["통보완료"] || 0, color: "text-info" },
+    { label: "적용완료", value: ecnStatusCounts["적용완료"] || 0, color: "text-success" },
+  ];
+
+  const currentStatCards = currentTab === "ecr" ? ecrStatCards : ecnStatCards;
+  const currentList = currentTab === "ecr" ? filteredEcr : filteredEcn;
+
+  const handleRowClick = (id: string) => {
+    setSelectedId(id);
+    setDetailOpen(true);
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3 relative">
+      {loading && (
+        <div className="absolute inset-0 bg-background/50 flex items-center justify-center z-50">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        </div>
+      )}
+
+      {/* 탭 선택 + 검색 필터 */}
+      <div className="shrink-0 flex flex-col gap-2">
+        <div className="flex items-center gap-3 px-1">
+          <Select value={currentTab} onValueChange={(v) => handleTabSwitch(v as TabType)}>
+            <SelectTrigger className="w-[170px] h-9">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="ecr">ECR (변경요청)</SelectItem>
+              <SelectItem value="ecn">ECN (변경통지)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        {currentTab === "ecr" ? (
+          <DynamicSearchFilter
+            tableName="dsn_design_request"
+            filterId="c16-change-management-ecr"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={tsEcr.filterConfig}
+            dataCount={filteredEcr.length}
+          />
+        ) : (
+          <DynamicSearchFilter
+            tableName="dsn_ecn"
+            filterId="c16-change-management-ecn"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={tsEcn.filterConfig}
+            dataCount={filteredEcn.length}
+          />
+        )}
+      </div>
+
+      {/* 현황 카드 */}
+      <div className="grid grid-cols-3 gap-3 shrink-0">
+        {currentStatCards.map((card) => (
+          <button
+            key={card.label}
+            onClick={() => handleFilterByStatus(card.label)}
+            className="rounded-lg border bg-card px-3 py-2 text-left transition-colors hover:bg-accent/50"
+          >
+            <div className="text-[10px] text-muted-foreground">{card.label}</div>
+            <div className={cn("text-xl font-bold", card.color)}>{card.value}</div>
+          </button>
+        ))}
+      </div>
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold">
+            {currentTab === "ecr" ? "설계변경요청(ECR) 목록" : "설계변경통지(ECN) 목록"}
+          </h2>
+          <Badge variant="secondary" className="font-mono">{currentList.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          {currentTab === "ecr" && (
+            <Button size="sm" onClick={openEcrRegisterModal}>
+              <Plus className="w-4 h-4 mr-1.5" /> ECR 등록
+            </Button>
+          )}
+          <Button variant="ghost" size="sm" onClick={() => (currentTab === "ecr" ? tsEcr : tsEcn).setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 테이블 영역 */}
+      <div className="flex-1 flex flex-col overflow-hidden border rounded-lg bg-card">
+        <div className="flex-1 overflow-auto">
+          {currentTab === "ecr" ? (
+            <EDataTable
+              columns={[
+                { key: "id", label: "ECR번호", width: "w-[140px]", render: (val: any) => <span className="font-semibold text-primary">{val}</span> },
+                { key: "changeType", label: "변경유형", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getChangeTypeStyle(val))}>{val}</span> },
+                { key: "status", label: "상태", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcrStatusStyle(val))}>{val}</span> },
+                { key: "urgency", label: "긴급", width: "w-[60px]", align: "center" as const, render: (val: any) => val === "긴급" ? <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-destructive/10 text-destructive border-destructive/20">긴급</span> : <span>-</span> },
+                { key: "target", label: "대상 품목/설비", width: "w-[200px]" },
+                { key: "drawingNo", label: "도면번호", width: "w-[150px]" },
+                { key: "reqDept", label: "요청부서", width: "w-[80px]" },
+                { key: "requester", label: "요청자", width: "w-[70px]" },
+                { key: "date", label: "요청일자", width: "w-[100px]" },
+                { key: "ecnNo", label: "관련 ECN", width: "w-[130px]", render: (val: any) => val ? <button className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-info/10 text-info border border-info/20 hover:bg-info/20 transition-colors" onClick={(e) => { e.stopPropagation(); navigateToLink(val); }}>{val} <ArrowRight className="w-3 h-3 inline" /></button> : <span>-</span> },
+              ] as EDataTableColumn<EcrItem>[]}
+              data={tsEcr.groupData(filteredEcr)}
+              rowKey={(row) => row.id}
+              selectedId={selectedId}
+              onSelect={(id) => { if (id) handleRowClick(id); }}
+              onRowClick={(row) => handleRowClick(row.id)}
+              emptyMessage="조건에 맞는 ECR이 없어요"
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+            />
+          ) : (
+            <EDataTable
+              columns={[
+                { key: "id", label: "ECN번호", width: "w-[140px]", render: (val: any) => <span className="font-semibold text-primary">{val}</span> },
+                { key: "status", label: "상태", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcnStatusStyle(val))}>{val}</span> },
+                { key: "target", label: "대상 품목/설비", width: "w-[200px]" },
+                { key: "drawingAfter", label: "도면 (변경 후)", width: "w-[160px]", render: (val: any) => <span className="text-[13px] text-success font-medium">{val}</span> },
+                { key: "designer", label: "설계담당", width: "w-[80px]" },
+                { key: "date", label: "발행일자", width: "w-[100px]" },
+                { key: "applyDate", label: "적용일자", width: "w-[100px]" },
+                { key: "notifyDepts", label: "통보 부서", width: "w-[140px]", render: (val: any) => <span className="text-[13px] text-muted-foreground">{Array.isArray(val) ? val.join(", ") : val}</span> },
+                { key: "ecrNo", label: "관련 ECR", width: "w-[130px]", render: (val: any) => <button className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-warning/10 text-warning border border-warning/20 hover:bg-warning/20 transition-colors" onClick={(e) => { e.stopPropagation(); navigateToLink(val); }}>{val} <ArrowRight className="w-3 h-3 inline" /></button> },
+              ] as EDataTableColumn<EcnItem>[]}
+              data={tsEcn.groupData(filteredEcn)}
+              rowKey={(row) => row.id}
+              selectedId={selectedId}
+              onSelect={(id) => { if (id) handleRowClick(id); }}
+              onRowClick={(row) => handleRowClick(row.id)}
+              emptyMessage="조건에 맞는 ECN이 없어요"
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* 상세 정보 다이얼로그 */}
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="max-w-[900px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{currentTab === "ecr" ? `ECR 상세 — ${selectedEcr?.id || ""}` : `ECN 상세 — ${selectedEcn?.id || ""}`}</DialogTitle>
+            <DialogDescription>{currentTab === "ecr" ? "설계변경요청의 상세 정보를 확인해요." : "설계변경통지의 상세 정보를 확인해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="space-y-5">
+          {/* ECR 상세 */}
+          {selectedEcr ? (
+            <>
+              <section>
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
+                  기본 정보
+                </h3>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">ECR번호</span>
+                    <span className="font-medium text-primary">{selectedEcr.id}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">상태</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcrStatusStyle(selectedEcr.status))}>
+                      {selectedEcr.status}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">변경 유형</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getChangeTypeStyle(selectedEcr.changeType))}>
+                      {selectedEcr.changeType}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">긴급도</span>
+                    <span>
+                      {selectedEcr.urgency === "긴급" ? (
+                        <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-destructive/10 text-destructive border-destructive/20">긴급</span>
+                      ) : (
+                        "보통"
+                      )}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
+                    <span className="font-medium">{selectedEcr.target}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">도면번호</span>
+                    <span>{selectedEcr.drawingNo}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">요청부서 / 요청자</span>
+                    <span>{selectedEcr.reqDept} / {selectedEcr.requester}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">요청일자</span>
+                    <span>{selectedEcr.date}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">희망 적용시점</span>
+                    <span>{selectedEcr.applyTiming}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">관련 ECN</span>
+                    {selectedEcr.ecnNo ? (
+                      <button
+                        className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-info/10 text-info border border-info/20 hover:bg-info/20 transition-colors"
+                        onClick={() => navigateToLink(selectedEcr.ecnNo)}
+                      >
+                        {selectedEcr.ecnNo} <ArrowRight className="w-3 h-3 inline" />
+                      </button>
+                    ) : (
+                      <span className="text-muted-foreground">미발행</span>
+                    )}
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
+                  {selectedEcr.reason}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 요구 내용</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
+                  {selectedEcr.content}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">영향 범위</h3>
+                <div className="flex flex-wrap gap-1.5">
+                  {selectedEcr.impact.map((imp) => (
+                    <span key={imp} className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getImpactBadgeStyle(imp))}>
+                      {imp}
+                    </span>
+                  ))}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
+                <Timeline history={selectedEcr.history} />
+              </section>
+            </>
+          ) : selectedEcn ? (
+            <>
+              <section>
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
+                  ECN 기본 정보
+                </h3>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">ECN번호</span>
+                    <span className="font-medium text-primary">{selectedEcn.id}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">상태</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcnStatusStyle(selectedEcn.status))}>
+                      {selectedEcn.status}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
+                    <span className="font-medium">{selectedEcn.target}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">설계담당</span>
+                    <span>{selectedEcn.designer}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">발행일자</span>
+                    <span>{selectedEcn.date}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">적용일자</span>
+                    <span>{selectedEcn.applyDate}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">관련 ECR</span>
+                    <button
+                      className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-warning/10 text-warning border border-warning/20 hover:bg-warning/20 transition-colors"
+                      onClick={() => navigateToLink(selectedEcn.ecrNo)}
+                    >
+                      {selectedEcn.ecrNo} <ArrowRight className="w-3 h-3 inline" />
+                    </button>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">통보 부서</span>
+                    <span className="text-xs">{selectedEcn.notifyDepts.join(", ")}</span>
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 전/후 비교</h3>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="bg-destructive/5 p-3 rounded-md border border-destructive/20">
+                    <div className="text-xs font-semibold text-destructive mb-1.5">
+                      변경 전 ({selectedEcn.drawingBefore})
+                    </div>
+                    <div className="text-sm whitespace-pre-wrap">{selectedEcn.before}</div>
+                  </div>
+                  <div className="bg-success/5 p-3 rounded-md border border-success/20">
+                    <div className="text-xs font-semibold text-success mb-1.5">
+                      변경 후 ({selectedEcn.drawingAfter})
+                    </div>
+                    <div className="text-sm whitespace-pre-wrap">{selectedEcn.after}</div>
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap">
+                  {selectedEcn.reason}
+                </div>
+                {selectedEcn.remark && (
+                  <p className="text-xs text-muted-foreground mt-2">비고: {selectedEcn.remark}</p>
+                )}
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
+                <Timeline history={selectedEcn.history} />
+              </section>
+            </>
+          ) : null}
+        </div>
+          </div>
+          <DialogFooter>
+            {selectedEcr && (
+              <>
+                <Button variant="outline" size="sm" onClick={() => { setDetailOpen(false); openEcrEditModal(selectedEcr.id); }}>
+                  <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                </Button>
+                {selectedEcr.status === "영향도분석" && (
+                  <>
+                    <Button size="sm" onClick={() => { setDetailOpen(false); openEcnIssueModal(selectedEcr.id); }}>
+                      <FileText className="w-3.5 h-3.5 mr-1" /> ECN 발행
+                    </Button>
+                    <Button variant="destructive" size="sm" onClick={() => { setDetailOpen(false); openRejectModal(selectedEcr.id); }}>
+                      <XCircle className="w-3.5 h-3.5 mr-1" /> 기각
+                    </Button>
+                  </>
+                )}
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ECR 등록/수정 모달 */}
+      <Dialog open={isEcrModalOpen} onOpenChange={setIsEcrModalOpen}>
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{isEcrEditMode ? "설계변경요청(ECR) 수정" : "설계변경요청(ECR) 등록"}</DialogTitle>
+            <DialogDescription>{isEcrEditMode ? "ECR 정보를 수정해요." : "새로운 설계변경요청을 등록해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-5 p-6">
+              {/* 좌측: 요청 정보 */}
+              <div className="md:w-[380px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                <h3 className="text-sm font-semibold pb-2 border-b">변경 요청 정보</h3>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">ECR번호</Label>
+                  <Input value={ecrForm.id || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청일자</Label>
+                    <Input
+                      type="date"
+                      value={ecrForm.date || ""}
+                      onChange={(e) => setEcrForm((p) => ({ ...p, date: e.target.value }))}
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">희망 적용시점</Label>
+                    <Select value={ecrForm.applyTiming || "즉시"} onValueChange={(v) => setEcrForm((p) => ({ ...p, applyTiming: v }))}>
+                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="즉시">즉시 적용</SelectItem>
+                        <SelectItem value="재고소진후">재고 소진 후</SelectItem>
+                        <SelectItem value="특정일자">특정 일자</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 유형 <span className="text-destructive">*</span></Label>
+                    <Select value={ecrForm.changeType || ""} onValueChange={(v) => setEcrForm((p) => ({ ...p, changeType: v as ChangeType }))}>
+                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {CHANGE_TYPES.map((t) => (
+                          <SelectItem key={t} value={t}>{t}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">긴급도</Label>
+                    <Select value={ecrForm.urgency || "보통"} onValueChange={(v) => setEcrForm((p) => ({ ...p, urgency: v as "보통" | "긴급" }))}>
+                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="보통">보통</SelectItem>
+                        <SelectItem value="긴급">긴급</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 품목/설비 <span className="text-destructive">*</span></Label>
+                  <Input
+                    value={ecrForm.target || ""}
+                    onChange={(e) => setEcrForm((p) => ({ ...p, target: e.target.value }))}
+                    placeholder="품목코드 / 설비명"
+                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                  />
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 도면번호</Label>
+                  <Input
+                    value={ecrForm.drawingNo || ""}
+                    onChange={(e) => setEcrForm((p) => ({ ...p, drawingNo: e.target.value }))}
+                    placeholder="DWG-XXX-XXX"
+                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청부서</Label>
+                    <Select value={ecrForm.reqDept || ""} onValueChange={(v) => setEcrForm((p) => ({ ...p, reqDept: v }))}>
+                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {DEPARTMENTS.map((d) => (
+                          <SelectItem key={d} value={d}>{d}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청자</Label>
+                    <Input
+                      value={ecrForm.requester || ""}
+                      onChange={(e) => setEcrForm((p) => ({ ...p, requester: e.target.value }))}
+                      placeholder="요청자명"
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* 우측: 변경 내용 */}
+              <div className="flex-1 min-w-0 flex flex-col gap-4">
+                <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50 flex-1">
+                  <h3 className="text-sm font-semibold pb-2 border-b">변경 내용</h3>
+
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 사유 <span className="text-destructive">*</span></Label>
+                    <Textarea
+                      value={ecrForm.reason || ""}
+                      onChange={(e) => setEcrForm((p) => ({ ...p, reason: e.target.value }))}
+                      placeholder="변경이 필요한 구체적인 사유를 기술해 주세요"
+                      className="min-h-[80px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 요구 내용 <span className="text-destructive">*</span></Label>
+                    <Textarea
+                      value={ecrForm.content || ""}
+                      onChange={(e) => setEcrForm((p) => ({ ...p, content: e.target.value }))}
+                      placeholder="어떻게 변경해야 하는지 구체적으로 기술해 주세요"
+                      className="min-h-[80px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">영향 범위 (해당 항목 체크)</Label>
+                    <div className="grid grid-cols-3 gap-2 mt-2">
+                      {IMPACT_OPTIONS.map((opt) => (
+                        <label
+                          key={opt.key}
+                          className="flex items-center gap-2 px-3 py-2 bg-background border rounded-md text-xs cursor-pointer hover:bg-muted/50 transition-colors"
+                        >
+                          <Checkbox
+                            checked={!!ecrImpactChecks[opt.key]}
+                            onCheckedChange={(c) =>
+                              setEcrImpactChecks((prev) => ({ ...prev, [opt.key]: !!c }))
+                            }
+                          />
+                          {opt.label}
+                        </label>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="space-y-2 bg-muted/30 p-4 rounded-lg border border-border/50">
+                  <h3 className="text-sm font-semibold pb-2 border-b flex items-center gap-2">
+                    <Paperclip className="w-3.5 h-3.5" /> 첨부파일
+                  </h3>
+                  <div className="border-2 border-dashed border-border rounded-md p-4 text-center text-xs text-muted-foreground cursor-pointer hover:border-primary/50 hover:bg-muted/30 transition-colors">
+                    <Upload className="w-5 h-5 mx-auto mb-1.5 text-muted-foreground" />
+                    클릭하여 파일 첨부 (불량 사진, 참고 도면 등)
+                  </div>
+                </div>
+              </div>
+        </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEcrModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveEcr}>
+              <Save className="w-4 h-4 mr-1.5" /> 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ECN 발행 모달 */}
+      <Dialog open={isEcnModalOpen} onOpenChange={setIsEcnModalOpen}>
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>ECN 발행 (설계변경통지)</DialogTitle>
+            <DialogDescription>ECR 기반으로 설계변경통지를 발행해요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-5 p-6">
+              {/* 좌측 */}
+              <div className="md:w-[380px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                <h3 className="text-sm font-semibold pb-2 border-b">ECN 기본 정보</h3>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">ECN번호</Label>
+                  <Input value={ecnForm.id || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">관련 ECR번호</Label>
+                  <Input value={ecnForm.ecrNo || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">발행일자</Label>
+                    <Input
+                      type="date"
+                      value={ecnForm.date || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, date: e.target.value }))}
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">적용일자 <span className="text-destructive">*</span></Label>
+                    <Input
+                      type="date"
+                      value={ecnForm.applyDate || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, applyDate: e.target.value }))}
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 품목/설비</Label>
+                  <Input value={ecnForm.target || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">도면번호 (변경 후)</Label>
+                  <Input
+                    value={ecnForm.drawingAfter || ""}
+                    onChange={(e) => setEcnForm((p) => ({ ...p, drawingAfter: e.target.value }))}
+                    placeholder="변경된 도면번호 (Rev 포함)"
+                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                  />
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설계 담당</Label>
+                  <Select value={ecnForm.designer || ""} onValueChange={(v) => setEcnForm((p) => ({ ...p, designer: v }))}>
+                    <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                      <SelectValue placeholder="선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {DESIGNERS.map((d) => (
+                        <SelectItem key={d} value={d}>{d}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              {/* 우측 */}
+              <div className="flex-1 min-w-0 flex flex-col gap-4">
+                <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                  <h3 className="text-sm font-semibold pb-2 border-b">변경 전/후 비교</h3>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 전 (AS-IS)</Label>
+                    <Textarea
+                      value={ecnForm.before || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, before: e.target.value }))}
+                      placeholder="변경 전 상태/사양/치수 등"
+                      className="min-h-[80px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 후 (TO-BE) <span className="text-destructive">*</span></Label>
+                    <Textarea
+                      value={ecnForm.after || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, after: e.target.value }))}
+                      placeholder="변경 후 상태/사양/치수 등"
+                      className="min-h-[80px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                  <h3 className="text-sm font-semibold pb-2 border-b">통보 대상 부서</h3>
+                  <div className="grid grid-cols-3 gap-2">
+                    {NOTIFY_DEPTS.map((dept) => (
+                      <label
+                        key={dept.key}
+                        className="flex items-center gap-2 px-3 py-2 bg-background border rounded-md text-xs cursor-pointer hover:bg-muted/50 transition-colors"
+                      >
+                        <Checkbox
+                          checked={!!ecnNotifyChecks[dept.key]}
+                          onCheckedChange={(c) =>
+                            setEcnNotifyChecks((prev) => ({ ...prev, [dept.key]: !!c }))
+                          }
+                        />
+                        {dept.label}
+                      </label>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                  <h3 className="text-sm font-semibold pb-2 border-b">변경 사유 및 비고</h3>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 사유 요약</Label>
+                    <Textarea
+                      value={ecnForm.reason || ""}
+                      readOnly
+                      className="min-h-[60px] resize-y text-xs sm:text-sm bg-muted cursor-not-allowed"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">비고</Label>
+                    <Textarea
+                      value={ecnForm.remark || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, remark: e.target.value }))}
+                      placeholder="추가 참고사항"
+                      className="min-h-[60px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+                </div>
+              </div>
+        </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEcnModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveEcn}>
+              <FileText className="w-4 h-4 mr-1.5" /> ECN 발행
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 기각 모달 */}
+      <Dialog open={isRejectModalOpen} onOpenChange={setIsRejectModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg flex items-center gap-2">
+              <XCircle className="w-5 h-5 text-destructive" />
+              ECR 기각
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              {rejectTargetId}을 기각 처리해요.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 sm:space-y-4">
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">기각 사유 <span className="text-destructive">*</span></Label>
+              <Textarea
+                value={rejectReason}
+                onChange={(e) => setRejectReason(e.target.value)}
+                placeholder="기각 사유를 상세히 입력해 주세요"
+                className="min-h-[100px] resize-y text-xs sm:text-sm"
+              />
+            </div>
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setIsRejectModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              취소
+            </Button>
+            <Button variant="destructive" onClick={handleRejectSubmit} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              <XCircle className="w-4 h-4 mr-2" /> 기각 처리
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={tsEcr.open}
+        onOpenChange={tsEcr.setOpen}
+        tableName={tsEcr.tableName}
+        settingsId={tsEcr.settingsId}
+        defaultVisibleKeys={tsEcr.defaultVisibleKeys}
+        onSave={tsEcr.applySettings}
+      />
+      <TableSettingsModal
+        open={tsEcn.open}
+        onOpenChange={tsEcn.setOpen}
+        tableName={tsEcn.tableName}
+        settingsId={tsEcn.settingsId}
+        defaultVisibleKeys={tsEcn.defaultVisibleKeys}
+        onSave={tsEcn.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/design/design-request/page.tsx b/frontend/app/(main)/COMPANY_30/design/design-request/page.tsx
new file mode 100644
index 00000000..e83c22b3
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/design/design-request/page.tsx
@@ -0,0 +1,781 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import {
+  Plus,
+  Pencil,
+  Trash2,
+  Calendar,
+  Upload,
+  Ruler,
+  FileText,
+  Loader2,
+  Inbox,
+  Save,
+  Settings2,
+} from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import {
+  getDesignRequestList,
+  createDesignRequest,
+  updateDesignRequest,
+  deleteDesignRequest,
+} from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+
+// ========== 타입 ==========
+interface HistoryItem {
+  id?: string;
+  step: string;
+  history_date: string;
+  user_name: string;
+  description: string;
+}
+
+interface DesignRequest {
+  id: string;
+  request_no: string;
+  source_type: string;
+  request_date: string;
+  due_date: string;
+  design_type: string;
+  priority: string;
+  status: string;
+  approval_step: string;
+  target_name: string;
+  customer: string;
+  req_dept: string;
+  requester: string;
+  designer: string;
+  order_no: string;
+  spec: string;
+  change_type: string;
+  drawing_no: string;
+  urgency: string;
+  reason: string;
+  content: string;
+  apply_timing: string;
+  review_memo: string;
+  project_id: string;
+  ecn_no: string;
+  created_date: string;
+  updated_date: string;
+  writer: string;
+  company_code: string;
+  history: HistoryItem[];
+  impact: string[];
+}
+
+// ========== 스타일 맵 ==========
+const STATUS_STYLES: Record<string, string> = {
+  신규접수: "bg-muted text-foreground",
+  접수대기: "bg-muted text-foreground",
+  검토중: "bg-warning/10 text-warning",
+  설계진행: "bg-info/10 text-info",
+  설계검토: "bg-primary/10 text-primary",
+  출도완료: "bg-success/10 text-success",
+  반려: "bg-destructive/10 text-destructive",
+  종료: "bg-muted text-muted-foreground",
+};
+
+const TYPE_STYLES: Record<string, string> = {
+  신규설계: "bg-info/10 text-info",
+  유사설계: "bg-success/10 text-success",
+  개조설계: "bg-warning/10 text-warning",
+};
+
+const PRIORITY_STYLES: Record<string, string> = {
+  긴급: "bg-destructive/10 text-destructive",
+  높음: "bg-warning/10 text-warning",
+  보통: "bg-muted text-foreground",
+  낮음: "bg-success/10 text-success",
+};
+
+const STATUS_PROGRESS: Record<string, number> = {
+  신규접수: 0,
+  접수대기: 0,
+  검토중: 20,
+  설계진행: 50,
+  설계검토: 80,
+  출도완료: 100,
+  반려: 0,
+  종료: 100,
+};
+
+function getProgressColor(p: number) {
+  if (p >= 100) return "bg-success";
+  if (p >= 60) return "bg-warning";
+  if (p >= 20) return "bg-info";
+  return "bg-muted";
+}
+
+function getProgressTextColor(p: number) {
+  if (p >= 100) return "text-success";
+  if (p >= 60) return "text-warning";
+  if (p >= 20) return "text-info";
+  return "text-muted-foreground";
+}
+
+const INITIAL_FORM = {
+  request_no: "",
+  request_date: "",
+  due_date: "",
+  design_type: "",
+  priority: "보통",
+  target_name: "",
+  customer: "",
+  req_dept: "",
+  requester: "",
+  designer: "",
+  order_no: "",
+  spec: "",
+  drawing_no: "",
+  content: "",
+};
+
+// ========== Grid Columns ==========
+const DR_GRID_COLUMNS = [
+  { key: "request_no", label: "의뢰번호" },
+  { key: "design_type", label: "유형" },
+  { key: "status", label: "상태" },
+  { key: "priority", label: "우선순위" },
+  { key: "target_name", label: "설비/제품명" },
+  { key: "customer", label: "고객명" },
+  { key: "designer", label: "설계담당" },
+  { key: "due_date", label: "납기" },
+  { key: "progress", label: "진행률" },
+];
+
+// ========== 메인 컴포넌트 ==========
+export default function DesignRequestPage() {
+  const ts = useTableSettings("c16-design-request", "dsn_design_request", DR_GRID_COLUMNS);
+  const [requests, setRequests] = useState<DesignRequest[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [detailOpen, setDetailOpen] = useState(false);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [form, setForm] = useState(INITIAL_FORM);
+
+  const today = useMemo(() => new Date(), []);
+
+  // 데이터 조회
+  const fetchRequests = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string> = { source_type: "dr" };
+      const res = await getDesignRequestList(params);
+      if (res.success && res.data) {
+        setRequests(res.data);
+      } else {
+        setRequests([]);
+      }
+    } catch {
+      setRequests([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchRequests();
+  }, [fetchRequests]);
+
+  // 클라이언트 사이드 필터링 (DynamicSearchFilter)
+  const filteredRequests = useMemo(() => {
+    if (searchFilters.length === 0) return requests;
+    return requests.filter((item) => {
+      for (const f of searchFilters) {
+        const val = item[f.columnName as keyof DesignRequest];
+        const strVal = val !== undefined && val !== null ? (Array.isArray(val) ? val.join(",") : String(val)) : "";
+        if (f.operator === "contains") {
+          if (!strVal.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (strVal !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(strVal)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && strVal < from) return false;
+          if (to && strVal > to) return false;
+        }
+      }
+      return true;
+    });
+  }, [requests, searchFilters]);
+
+  const selectedItem = useMemo(() => {
+    if (!selectedId) return null;
+    return requests.find((r) => r.id === selectedId) || null;
+  }, [selectedId, requests]);
+
+  const statusCounts = useMemo(() => {
+    return {
+      접수대기: requests.filter((r) => r.status === "접수대기" || r.status === "신규접수").length,
+      설계진행: requests.filter((r) => r.status === "설계진행").length,
+      출도완료: requests.filter((r) => r.status === "출도완료").length,
+    };
+  }, [requests]);
+
+
+  // 채번: 기존 데이터 기반으로 다음 번호 생성
+  const generateNextNo = useCallback(() => {
+    const year = new Date().getFullYear();
+    const existing = requests.filter((r) => r.request_no?.startsWith(`DR-${year}-`));
+    const maxNum = existing.reduce((max, r) => {
+      const parts = r.request_no?.split("-");
+      const num = parts?.length >= 3 ? parseInt(parts[2]) : 0;
+      return num > max ? num : max;
+    }, 0);
+    return `DR-${year}-${String(maxNum + 1).padStart(4, "0")}`;
+  }, [requests]);
+
+  const handleOpenRegister = useCallback(() => {
+    setIsEditMode(false);
+    setEditingId(null);
+    setForm({
+      ...INITIAL_FORM,
+      request_no: generateNextNo(),
+      request_date: new Date().toISOString().split("T")[0],
+    });
+    setModalOpen(true);
+  }, [generateNextNo]);
+
+  const handleOpenEdit = useCallback(() => {
+    if (!selectedItem) return;
+    setIsEditMode(true);
+    setEditingId(selectedItem.id);
+    setForm({
+      request_no: selectedItem.request_no || "",
+      request_date: selectedItem.request_date || "",
+      due_date: selectedItem.due_date || "",
+      design_type: selectedItem.design_type || "",
+      priority: selectedItem.priority || "보통",
+      target_name: selectedItem.target_name || "",
+      customer: selectedItem.customer || "",
+      req_dept: selectedItem.req_dept || "",
+      requester: selectedItem.requester || "",
+      designer: selectedItem.designer || "",
+      order_no: selectedItem.order_no || "",
+      spec: selectedItem.spec || "",
+      drawing_no: selectedItem.drawing_no || "",
+      content: selectedItem.content || "",
+    });
+    setDetailOpen(false);
+    setModalOpen(true);
+  }, [selectedItem]);
+
+  const handleSave = useCallback(async () => {
+    if (!form.target_name.trim()) { toast.error("설비/제품명을 입력해 주세요."); return; }
+    if (!form.design_type) { toast.error("의뢰 유형을 선택해 주세요."); return; }
+    if (!form.due_date) { toast.error("납기를 입력해 주세요."); return; }
+    if (!form.spec.trim()) { toast.error("요구사양을 입력해 주세요."); return; }
+
+    setSaving(true);
+    try {
+      const payload = {
+        request_no: form.request_no,
+        source_type: "dr",
+        request_date: form.request_date,
+        due_date: form.due_date,
+        design_type: form.design_type,
+        priority: form.priority,
+        target_name: form.target_name,
+        customer: form.customer,
+        req_dept: form.req_dept,
+        requester: form.requester,
+        designer: form.designer,
+        order_no: form.order_no,
+        spec: form.spec,
+        drawing_no: form.drawing_no,
+        content: form.content,
+      };
+
+      let res;
+      if (isEditMode && editingId) {
+        res = await updateDesignRequest(editingId, payload);
+      } else {
+        res = await createDesignRequest({
+          ...payload,
+          status: "신규접수",
+          history: [{
+            step: "신규접수",
+            history_date: form.request_date || new Date().toISOString().split("T")[0],
+            user_name: form.requester || "시스템",
+            description: `${form.req_dept || ""}에서 설계의뢰 등록`,
+          }],
+        });
+      }
+
+      if (res.success) {
+        toast.success(isEditMode ? "수정되었어요." : "등록되었어요.");
+        setModalOpen(false);
+        await fetchRequests();
+        if (isEditMode && editingId) {
+          setSelectedId(editingId);
+        } else if (res.data?.id) {
+          setSelectedId(res.data.id);
+        }
+      } else {
+        toast.error(res.message || "저장에 실패했어요.");
+      }
+    } catch (err: any) {
+      toast.error("저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  }, [form, isEditMode, editingId, fetchRequests]);
+
+  const handleDelete = useCallback(async () => {
+    if (!selectedId || !selectedItem) return;
+    const displayNo = selectedItem.request_no || selectedId;
+    if (!confirm(`${displayNo} 설계의뢰를 삭제할까요?`)) return;
+
+    try {
+      const res = await deleteDesignRequest(selectedId);
+      if (res.success) {
+        toast.success("삭제되었어요.");
+        setSelectedId(null);
+        setDetailOpen(false);
+        await fetchRequests();
+      } else {
+        toast.error(res.message || "삭제에 실패했어요.");
+      }
+    } catch (err: any) {
+      toast.error("삭제에 실패했어요.");
+    }
+  }, [selectedId, selectedItem, fetchRequests]);
+
+  const getDueDateInfo = useCallback(
+    (dueDate: string) => {
+      if (!dueDate) return { text: "-", color: "text-muted-foreground" };
+      const due = new Date(dueDate);
+      const diff = Math.ceil((due.getTime() - today.getTime()) / 86400000);
+      if (diff < 0) return { text: `${Math.abs(diff)}일 초과`, color: "text-destructive" };
+      if (diff === 0) return { text: "오늘", color: "text-warning" };
+      if (diff <= 7) return { text: `${diff}일 남음`, color: "text-warning" };
+      return { text: `${diff}일 남음`, color: "text-success" };
+    },
+    [today]
+  );
+
+  const getProgress = useCallback((status: string) => {
+    return STATUS_PROGRESS[status] ?? 0;
+  }, []);
+
+  const handleRowClick = useCallback((id: string) => {
+    setSelectedId(id);
+    setDetailOpen(true);
+  }, []);
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 검색 필터 */}
+      <div className="shrink-0">
+        <DynamicSearchFilter
+          tableName="dsn_design_request"
+          filterId="c16-design-request"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredRequests.length}
+        />
+      </div>
+
+      {/* 현황 카드 */}
+      <div className="grid grid-cols-3 gap-3 shrink-0">
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">접수대기</div>
+          <div className="text-xl font-bold text-info">{statusCounts.접수대기}</div>
+        </div>
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">설계진행</div>
+          <div className="text-xl font-bold text-warning">{statusCounts.설계진행}</div>
+        </div>
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">출도완료</div>
+          <div className="text-xl font-bold text-success">{statusCounts.출도완료}</div>
+        </div>
+      </div>
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold">설계의뢰 관리</h2>
+          <Badge variant="secondary" className="font-mono">{filteredRequests.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" onClick={handleOpenRegister}>
+            <Plus className="w-4 h-4 mr-1.5" /> 설계의뢰 등록
+          </Button>
+          <div className="mx-1 h-6 w-px bg-border" />
+          <Button variant="outline" size="sm" disabled={!selectedId} onClick={handleOpenEdit}>
+            <Pencil className="w-4 h-4 mr-1.5" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 테이블 영역 */}
+      <div className="flex-1 flex flex-col overflow-hidden border rounded-lg bg-card">
+        <EDataTable<DesignRequest>
+          columns={ts.visibleColumns.map((col): EDataTableColumn<DesignRequest> => ({
+            key: col.key,
+            label: col.label,
+            width: col.key === "request_no" ? "w-[100px]" : col.key === "design_type" ? "w-[70px]" : col.key === "status" ? "w-[70px]" : col.key === "priority" ? "w-[60px]" : col.key === "customer" ? "w-[90px]" : col.key === "designer" ? "w-[70px]" : col.key === "due_date" ? "w-[85px]" : col.key === "progress" ? "w-[65px]" : undefined,
+            align: (col.key === "design_type" || col.key === "status" || col.key === "priority" || col.key === "progress") ? "center" : undefined,
+            render: col.key === "request_no"
+              ? (val: any) => <span className="text-[11px] font-semibold text-primary">{val || "-"}</span>
+              : col.key === "design_type"
+              ? (val: any) => val ? <Badge className={cn("text-[9px]", TYPE_STYLES[val])}>{val}</Badge> : <span>-</span>
+              : col.key === "status"
+              ? (val: any) => <Badge className={cn("text-[9px]", STATUS_STYLES[val])}>{val}</Badge>
+              : col.key === "priority"
+              ? (val: any) => <Badge className={cn("text-[9px]", PRIORITY_STYLES[val])}>{val}</Badge>
+              : col.key === "progress"
+              ? (_val: any, row: DesignRequest) => {
+                  const progress = STATUS_PROGRESS[row.status] ?? 0;
+                  return (
+                    <div className="flex items-center gap-1.5">
+                      <div className="h-1.5 w-12 overflow-hidden rounded-full bg-muted">
+                        <div className={cn("h-full rounded-full transition-all", getProgressColor(progress))} style={{ width: `${progress}%` }} />
+                      </div>
+                      <span className={cn("text-[10px] font-semibold", getProgressTextColor(progress))}>{progress}%</span>
+                    </div>
+                  );
+                }
+              : undefined,
+          }))}
+          data={ts.groupData(filteredRequests)}
+          loading={loading}
+          emptyMessage="등록된 설계의뢰가 없어요"
+          selectedId={selectedId}
+          onSelect={(id) => setSelectedId(id)}
+          onRowClick={(row) => handleRowClick(row.id)}
+          draggableColumns={false}
+        />
+      </div>
+
+      {/* 상세 정보 다이얼로그 */}
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="max-w-[900px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{selectedItem ? `설계의뢰 상세 — ${selectedItem.request_no}` : "설계의뢰 상세"}</DialogTitle>
+            <DialogDescription>설계의뢰의 상세 정보를 확인해요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        {selectedItem && (
+          <div className="space-y-4">
+            {/* 기본 정보 */}
+            <div>
+              <div className="mb-2 text-xs font-bold">
+                <FileText className="mr-1 inline h-3.5 w-3.5" />기본 정보
+              </div>
+              <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-lg border bg-muted/10 p-3">
+                <InfoRow label="의뢰번호" value={<span className="font-semibold text-primary">{selectedItem.request_no || "-"}</span>} />
+                <InfoRow label="상태" value={<Badge className={cn("text-[10px]", STATUS_STYLES[selectedItem.status])}>{selectedItem.status}</Badge>} />
+                <InfoRow label="유형" value={selectedItem.design_type ? <Badge className={cn("text-[10px]", TYPE_STYLES[selectedItem.design_type])}>{selectedItem.design_type}</Badge> : "-"} />
+                <InfoRow label="우선순위" value={<Badge className={cn("text-[10px]", PRIORITY_STYLES[selectedItem.priority])}>{selectedItem.priority}</Badge>} />
+                <InfoRow label="설비/제품명" value={selectedItem.target_name || "-"} />
+                <InfoRow label="고객명" value={selectedItem.customer || "-"} />
+                <InfoRow label="의뢰부서 / 의뢰자" value={`${selectedItem.req_dept || "-"} / ${selectedItem.requester || "-"}`} />
+                <InfoRow label="설계담당" value={selectedItem.designer || "미배정"} />
+                <InfoRow label="의뢰일자" value={selectedItem.request_date || "-"} />
+                <InfoRow
+                  label="납기"
+                  value={
+                    selectedItem.due_date ? (
+                      <span>
+                        {selectedItem.due_date}{" "}
+                        <span className={cn("text-[11px]", getDueDateInfo(selectedItem.due_date).color)}>
+                          ({getDueDateInfo(selectedItem.due_date).text})
+                        </span>
+                      </span>
+                    ) : "-"
+                  }
+                />
+                <InfoRow label="수주번호" value={selectedItem.order_no || "-"} />
+                <InfoRow
+                  label="진행률"
+                  value={
+                    (() => {
+                      const progress = getProgress(selectedItem.status);
+                      return (
+                        <div className="flex items-center gap-2">
+                          <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
+                            <div className={cn("h-full rounded-full", getProgressColor(progress))} style={{ width: `${progress}%` }} />
+                          </div>
+                          <span className={cn("text-xs font-bold", getProgressTextColor(progress))}>{progress}%</span>
+                        </div>
+                      );
+                    })()
+                  }
+                />
+              </div>
+            </div>
+
+            {/* 요구사양 */}
+            <div>
+              <div className="mb-2 text-xs font-bold">
+                <FileText className="mr-1 inline h-3.5 w-3.5" />요구사양
+              </div>
+              <div className="rounded-lg border bg-muted/10 p-3">
+                <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed">{selectedItem.spec || "-"}</pre>
+                {selectedItem.drawing_no && (
+                  <div className="mt-2 text-xs">
+                    <span className="text-muted-foreground">참조 도면: </span>
+                    <span className="text-primary">{selectedItem.drawing_no}</span>
+                  </div>
+                )}
+                {selectedItem.content && (
+                  <div className="mt-1 text-xs">
+                    <span className="text-muted-foreground">비고: </span>{selectedItem.content}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* 진행 이력 */}
+            {selectedItem.history && selectedItem.history.length > 0 && (
+              <div>
+                <div className="mb-2 text-xs font-bold">
+                  <Calendar className="mr-1 inline h-3.5 w-3.5" />진행 이력
+                </div>
+                <div className="space-y-0">
+                  {selectedItem.history.map((h, idx) => {
+                    const isLast = idx === selectedItem.history.length - 1;
+                    const isDone = h.step === "출도완료" || h.step === "종료";
+                    return (
+                      <div key={h.id || idx} className="flex gap-3">
+                        <div className="flex flex-col items-center">
+                          <div
+                            className={cn(
+                              "mt-1 h-2.5 w-2.5 shrink-0 rounded-full border-2",
+                              isLast && !isDone
+                                ? "border-primary bg-primary"
+                                : isDone || !isLast
+                                  ? "border-success bg-success"
+                                  : "border-muted-foreground bg-muted-foreground"
+                            )}
+                          />
+                          {!isLast && <div className="w-px flex-1 bg-border" />}
+                        </div>
+                        <div className="pb-3">
+                          <Badge className={cn("text-[9px]", STATUS_STYLES[h.step])}>{h.step}</Badge>
+                          <div className="mt-0.5 text-xs">{h.description}</div>
+                          <div className="text-[10px] text-muted-foreground">{h.history_date} · {h.user_name}</div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+          </div>
+          <DialogFooter>
+            {selectedItem && (
+              <>
+                <Button variant="outline" size="sm" onClick={handleOpenEdit}>
+                  <Pencil className="mr-1 h-3.5 w-3.5" />수정
+                </Button>
+                <Button variant="outline" size="sm" className="text-destructive hover:text-destructive" onClick={handleDelete}>
+                  <Trash2 className="mr-1 h-3.5 w-3.5" />삭제
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "설계의뢰 수정" : "설계의뢰 등록"}</DialogTitle>
+            <DialogDescription>{isEditMode ? "설계의뢰 정보를 수정해요." : "새 설계의뢰를 등록해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-6 p-6">
+          {/* 좌측: 기본 정보 */}
+          <div className="md:w-[420px] shrink-0 space-y-4">
+            <h3 className="text-sm font-semibold pb-2 border-b">의뢰 기본 정보</h3>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰번호</Label>
+              <Input value={form.request_no} readOnly className="h-9 bg-muted cursor-not-allowed" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰일자</Label>
+                <Input type="date" value={form.request_date} onChange={(e) => setForm((p) => ({ ...p, request_date: e.target.value }))} className="h-9" />
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">납기 <span className="text-destructive">*</span></Label>
+                <Input type="date" value={form.due_date} onChange={(e) => setForm((p) => ({ ...p, due_date: e.target.value }))} className="h-9" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰 유형 <span className="text-destructive">*</span></Label>
+                <Select value={form.design_type} onValueChange={(v) => setForm((p) => ({ ...p, design_type: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["신규설계", "유사설계", "개조설계"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">우선순위 <span className="text-destructive">*</span></Label>
+                <Select value={form.priority} onValueChange={(v) => setForm((p) => ({ ...p, priority: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설비/제품명 <span className="text-destructive">*</span></Label>
+              <Input value={form.target_name} onChange={(e) => setForm((p) => ({ ...p, target_name: e.target.value }))} placeholder="설비 또는 제품명 입력" className="h-9" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰부서</Label>
+                <Select value={form.req_dept} onValueChange={(v) => setForm((p) => ({ ...p, req_dept: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["영업팀", "기획팀", "생산팀", "품질팀"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰자</Label>
+                <Input value={form.requester} onChange={(e) => setForm((p) => ({ ...p, requester: e.target.value }))} placeholder="의뢰자명" className="h-9" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">고객명</Label>
+                <Input value={form.customer} onChange={(e) => setForm((p) => ({ ...p, customer: e.target.value }))} placeholder="고객/거래처명" className="h-9" />
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">수주번호</Label>
+                <Input value={form.order_no} onChange={(e) => setForm((p) => ({ ...p, order_no: e.target.value }))} placeholder="관련 수주번호" className="h-9" />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설계담당자</Label>
+              <Select value={form.designer} onValueChange={(v) => setForm((p) => ({ ...p, designer: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  {["이설계", "박도면", "최기구", "김전장"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* 우측: 상세 내용 */}
+          <div className="flex min-w-0 flex-1 flex-col gap-4">
+            <h3 className="text-sm font-semibold pb-2 border-b">요구사양 및 설명</h3>
+            <div className="flex-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요구사양 <span className="text-destructive">*</span></Label>
+              <Textarea
+                value={form.spec}
+                onChange={(e) => setForm((p) => ({ ...p, spec: e.target.value }))}
+                placeholder={"고객 요구사양 또는 설비 사양을 상세히 기술해주세요\n\n예시:\n- 작업 대상: SUS304 Φ20 파이프\n- 가공 방식: 자동 절단 + 면취\n- 생산 속도: 60EA/분\n- 치수 공차: ±0.1mm"}
+                className="min-h-[180px]"
+              />
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">참조 도면번호</Label>
+              <Input value={form.drawing_no} onChange={(e) => setForm((p) => ({ ...p, drawing_no: e.target.value }))} placeholder="유사 설비명 또는 참조 도면번호" className="h-9" />
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">비고</Label>
+              <Textarea value={form.content} onChange={(e) => setForm((p) => ({ ...p, content: e.target.value }))} placeholder="기타 참고 사항" className="min-h-[70px]" rows={3} />
+            </div>
+            <div>
+              <h3 className="text-sm font-semibold pb-2 border-b mb-2">첨부파일</h3>
+              <div className="cursor-pointer rounded-lg border-2 border-dashed p-5 text-center transition-colors hover:border-primary hover:bg-accent/50">
+                <Upload className="mx-auto h-6 w-6 text-muted-foreground" />
+                <div className="mt-1.5 text-sm text-muted-foreground">클릭하여 파일 첨부 (사양서, 도면, 사진 등)</div>
+              </div>
+            </div>
+          </div>
+        </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setModalOpen(false)} disabled={saving}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
+
+// ========== 정보 행 서브컴포넌트 ==========
+function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex items-start gap-1">
+      <span className="min-w-[80px] shrink-0 text-[11px] text-muted-foreground">{label}</span>
+      <span className="text-xs font-medium">{value}</span>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/design/my-work/page.tsx b/frontend/app/(main)/COMPANY_30/design/my-work/page.tsx
new file mode 100644
index 00000000..8c136cb9
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/design/my-work/page.tsx
@@ -0,0 +1,1958 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import {
+  Circle,
+  CheckCircle2,
+  AlertCircle,
+  Clock,
+  LayoutGrid,
+  List,
+  Timer,
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  ChevronUp,
+  Plus,
+  Trash2,
+  Paperclip,
+  ShoppingCart,
+  Handshake,
+  FileText,
+  Image as ImageIcon,
+  Ruler,
+  Box,
+  FolderOpen,
+  Upload,
+  X,
+  Pencil,
+  Calendar,
+  Search,
+  RotateCcw,
+  ClipboardList,
+  FileEdit,
+  Inbox,
+  Loader2,
+  PointerIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Progress } from "@/components/ui/progress";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Slider } from "@/components/ui/slider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { useAuth } from "@/hooks/useAuth";
+import {
+  getMyWork,
+  updateTask,
+  createWorkLog,
+  deleteWorkLog,
+  createSubItem,
+  updateSubItem,
+  deleteSubItem,
+  createPurchaseReq,
+  createCoopReq,
+  addCoopResponse,
+} from "@/lib/api/design";
+
+// ========== 타입 ==========
+interface SubItem {
+  id: number | string;
+  _id?: string;
+  name: string;
+  weight: number;
+  progress: number;
+  status: string;
+}
+interface Attachment {
+  id: number;
+  name: string;
+  type: string;
+  size: string;
+}
+interface PurchaseReq {
+  id: number | string;
+  _id?: string;
+  item: string;
+  qty: number;
+  unit: string;
+  reason: string;
+  status: string;
+}
+interface CoopResponse {
+  date: string;
+  user: string;
+  content: string;
+}
+interface CoopReq {
+  id: string;
+  _id?: string;
+  toUser: string;
+  toDept: string;
+  title: string;
+  desc: string;
+  status: string;
+  dueDate: string;
+  responses: CoopResponse[];
+}
+interface WorkLog {
+  _id?: string;
+  startDt: string;
+  endDt: string;
+  hours: number;
+  desc: string;
+  subItemId: number | string | null;
+  attachments: Attachment[];
+  purchaseReqs: PurchaseReq[];
+  coopReqs: CoopReq[];
+}
+interface Task {
+  _id?: string;
+  name: string;
+  category: string;
+  assignee: string;
+  start: string;
+  end: string;
+  status: string;
+  progress: number;
+  priority: string;
+  subItems: SubItem[];
+  workLogs: WorkLog[];
+}
+interface Project {
+  id: string;
+  project_id?: string;
+  name: string;
+  customer: string;
+  status: string;
+  tasks: Task[];
+}
+interface MyTask extends Task {
+  projectId: string;
+  projectName: string;
+}
+
+// ========== 유틸 ==========
+const USER_INFO: Record<string, { role: string; color: string }> = {
+  최기구: { role: "기구설계 파트", color: "bg-primary" },
+  이설계: { role: "기구설계 파트", color: "bg-chart-2" },
+  김전장: { role: "전장설계 파트", color: "bg-warning" },
+  박도면: { role: "기구설계 파트", color: "bg-chart-3" },
+  정SW: { role: "SW개발 파트", color: "bg-destructive" },
+  한조립: { role: "조립/시운전 파트", color: "bg-chart-1" },
+  박구매: { role: "구매/조달 파트", color: "bg-info" },
+  팀장: { role: "설계팀 팀장", color: "bg-success" },
+};
+
+const USERS = Object.keys(USER_INFO);
+
+function calcHours(s: string, e: string): number {
+  if (!s || !e) return 0;
+  const d = (new Date(e).getTime() - new Date(s).getTime()) / 3600000;
+  return d > 0 ? Math.round(d * 10) / 10 : 0;
+}
+
+function calcAutoProgress(task: Task): number {
+  if (!task.subItems?.length) return task.progress;
+  const tw = task.subItems.reduce((s, i) => s + i.weight, 0);
+  if (!tw) return 0;
+  return Math.round(
+    task.subItems.reduce((s, i) => s + (i.progress * i.weight) / tw, 0)
+  );
+}
+
+function fmtDtShort(dt: string) {
+  if (!dt) return "";
+  return dt.substring(5, 10) + " " + dt.substring(11, 16);
+}
+
+function getWeekStart(d: Date): Date {
+  const r = new Date(d);
+  const day = r.getDay();
+  r.setDate(r.getDate() - day + (day === 0 ? -6 : 1));
+  r.setHours(0, 0, 0, 0);
+  return r;
+}
+
+function getFileIcon(type: string) {
+  switch (type) {
+    case "image":
+      return <ImageIcon className="h-4 w-4" />;
+    case "drawing":
+      return <Ruler className="h-4 w-4" />;
+    case "3d":
+      return <Box className="h-4 w-4" />;
+    case "document":
+      return <FileText className="h-4 w-4" />;
+    default:
+      return <FolderOpen className="h-4 w-4" />;
+  }
+}
+
+function getFileType(name: string): string {
+  const ext = (name.split(".").pop() || "").toLowerCase();
+  if (["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(ext))
+    return "image";
+  if (["dwg", "dxf"].includes(ext)) return "drawing";
+  if (["step", "stp", "igs", "stl"].includes(ext)) return "3d";
+  if (
+    ["pdf", "doc", "docx", "xlsx", "xls", "pptx", "txt", "csv"].includes(ext)
+  )
+    return "document";
+  return "other";
+}
+
+function getProgressColor(p: number) {
+  if (p >= 80) return "text-success";
+  if (p >= 40) return "text-primary";
+  if (p > 0) return "text-warning";
+  return "text-muted-foreground";
+}
+
+function getProgressBg(p: number) {
+  if (p >= 80) return "bg-success";
+  if (p >= 40) return "bg-primary";
+  if (p > 0) return "bg-warning";
+  return "bg-muted";
+}
+
+const STATUS_STYLES: Record<string, string> = {
+  대기: "bg-muted text-foreground",
+  진행중: "bg-primary/10 text-primary",
+  검토중: "bg-warning/10 text-warning",
+  완료: "bg-success/10 text-success",
+  지연: "bg-destructive/10 text-destructive",
+};
+
+const PRIORITY_STYLES: Record<string, string> = {
+  긴급: "bg-destructive/10 text-destructive",
+  높음: "bg-warning/10 text-warning",
+  보통: "bg-muted text-foreground",
+  낮음: "bg-success/10 text-success",
+};
+
+const PR_STATUS_STYLES: Record<string, string> = {
+  요청: "bg-destructive/10 text-destructive",
+  견적중: "bg-warning/10 text-warning",
+  발주완료: "bg-primary/10 text-primary",
+  입고완료: "bg-success/10 text-success",
+};
+
+const CR_STATUS_STYLES: Record<string, string> = {
+  요청: "bg-warning/10 text-warning",
+  접수: "bg-warning/10 text-warning",
+  진행중: "bg-primary/10 text-primary",
+  완료: "bg-success/10 text-success",
+};
+
+const CR_NEXT: Record<string, string> = {
+  요청: "접수",
+  접수: "진행중",
+  진행중: "완료",
+};
+
+// ========== API 응답 매핑 ==========
+function mapApiTaskToTask(api: any): Task {
+  const subItems: SubItem[] = (api.sub_items || []).map((s: any) => ({
+    id: s.id,
+    _id: String(s.id),
+    name: s.name || "",
+    weight: Number(s.weight) || 0,
+    progress: Number(s.progress) || 0,
+    status: s.status || "대기",
+  }));
+  const workLogs: WorkLog[] = (api.work_logs || []).map((w: any) => {
+    const attachments: Attachment[] = (w.attachments || []).map((a: any) => ({
+      id: a.id ?? a.file_name?.length ?? 0,
+      name: a.file_name || a.name || "",
+      type: a.file_type || getFileType(a.file_name || ""),
+      size: a.file_size || a.size || "",
+    }));
+    const purchaseReqs: PurchaseReq[] = (w.purchase_reqs || []).map((pr: any) => ({
+      id: pr.id,
+      _id: pr.id ? String(pr.id) : undefined,
+      item: pr.item || "",
+      qty: Number(pr.qty) || 1,
+      unit: pr.unit || "EA",
+      reason: pr.reason || "",
+      status: pr.status || "요청",
+    }));
+    const coopReqs: CoopReq[] = (w.coop_reqs || []).map((c: any) => ({
+      id: c.id || `CR-${String(c.id)}`,
+      _id: c.id ? String(c.id) : undefined,
+      toUser: c.to_user || "",
+      toDept: c.to_dept || "",
+      title: c.title || "",
+      desc: c.description || c.desc || "",
+      status: c.status || "요청",
+      dueDate: c.due_date || "",
+      responses: (c.responses || []).map((r: any) => ({
+        date: r.response_date || r.date || "",
+        user: r.user_name || r.user || "",
+        content: r.content || "",
+      })),
+    }));
+    return {
+      _id: w.id ? String(w.id) : undefined,
+      startDt: w.start_dt || "",
+      endDt: w.end_dt || "",
+      hours: Number(w.hours) || 0,
+      desc: w.description || w.desc || "",
+      subItemId: w.sub_item_id ?? null,
+      attachments,
+      purchaseReqs,
+      coopReqs,
+    };
+  });
+  return {
+    _id: api.id ? String(api.id) : undefined,
+    name: api.name || "",
+    category: api.category || "",
+    assignee: api.assignee || "",
+    start: api.start_date || api.start || "",
+    end: api.end_date || api.end || "",
+    status: api.status || "대기",
+    progress: Number(api.progress) || 0,
+    priority: api.priority || "보통",
+    subItems,
+    workLogs,
+  };
+}
+
+function mapApiTasksToProjects(apiTasks: any[]): Project[] {
+  const projectMap = new Map<string, Project>();
+  for (const api of apiTasks) {
+    const pId = api.project_id || api.project_no;
+    const pNo = api.project_no || api.project_id || "";
+    if (!projectMap.has(pId)) {
+      projectMap.set(pId, {
+        id: pNo,
+        project_id: pId,
+        name: api.project_name || "",
+        customer: api.project_customer || "",
+        status: api.project_status || "진행중",
+        tasks: [],
+      });
+    }
+    projectMap.get(pId)!.tasks.push(mapApiTaskToTask(api));
+  }
+  return Array.from(projectMap.values());
+}
+
+// ========== 메인 컴포넌트 ==========
+export default function MyWorkPage() {
+  const { userName } = useAuth();
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentUser, setCurrentUser] = useState(userName || "최기구");
+  const [viewMode, setViewMode] = useState<"kanban" | "list" | "timesheet">("kanban");
+  const [timesheetWeekOffset, setTimesheetWeekOffset] = useState(0);
+
+  // 필터
+  const [filterProject, setFilterProject] = useState("");
+  const [filterStatus, setFilterStatus] = useState("");
+  const [filterPriority, setFilterPriority] = useState("");
+  const [filterCategory, setFilterCategory] = useState("");
+  const [filterKeyword, setFilterKeyword] = useState("");
+
+  // 선택된 업무
+  const [selectedTaskKey, setSelectedTaskKey] = useState<string | null>(null);
+  const [selectedSubItemId, setSelectedSubItemId] = useState<number | string>("__unassigned__");
+
+  // 편집 상태
+  const [editingLogIdx, setEditingLogIdx] = useState<number>(-1);
+  const [editForm, setEditForm] = useState({ startDt: "", endDt: "", desc: "" });
+
+  // 수행항목 추가
+  const [newSiName, setNewSiName] = useState("");
+  const [newSiWeight, setNewSiWeight] = useState("");
+
+  // 모달
+  const [attModalOpen, setAttModalOpen] = useState(false);
+  const [prModalOpen, setPrModalOpen] = useState(false);
+  const [crModalOpen, setCrModalOpen] = useState(false);
+  const [modalLogIdx, setModalLogIdx] = useState(-1);
+  const [modalAttachments, setModalAttachments] = useState<Attachment[]>([]);
+  const [modalPurchaseReqs, setModalPurchaseReqs] = useState<PurchaseReq[]>([]);
+  const [modalCoopReqs, setModalCoopReqs] = useState<CoopReq[]>([]);
+
+  // 구매요청 폼
+  const [prForm, setPrForm] = useState({ item: "", qty: "1", unit: "EA", reason: "", status: "요청" });
+  // 협조요청 폼
+  const [crForm, setCrForm] = useState({ title: "", toUser: "", desc: "", dueDate: "" });
+
+  const today = useMemo(() => new Date(), []);
+  const todayStr = useMemo(() => {
+    const dn = ["일", "월", "화", "수", "목", "금", "토"];
+    return `${today.getFullYear()}.${String(today.getMonth() + 1).padStart(2, "0")}.${String(today.getDate()).padStart(2, "0")} (${dn[today.getDay()]})`;
+  }, [today]);
+
+  const projectsRef = React.useRef<Project[]>([]);
+  projectsRef.current = projects;
+
+  const fetchMyWork = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: { status?: string; project_id?: string } = {};
+      if (filterStatus && filterStatus !== "__all__") params.status = filterStatus;
+      if (filterProject && filterProject !== "__all__") {
+        const proj = projectsRef.current.find((p) => p.id === filterProject || p.project_id === filterProject);
+        if (proj?.project_id) params.project_id = proj.project_id;
+        else params.project_id = filterProject;
+      }
+      const res = await getMyWork(params);
+      if (res.success && res.data) {
+        setProjects(mapApiTasksToProjects(res.data));
+      } else {
+        setProjects([]);
+      }
+    } catch {
+      toast.error("업무 목록을 불러오는데 실패했어요.");
+      setProjects([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [filterStatus, filterProject]);
+
+  useEffect(() => {
+    if (userName) setCurrentUser(userName);
+  }, [userName]);
+
+  useEffect(() => {
+    fetchMyWork();
+  }, [fetchMyWork]);
+
+  const projectList = useMemo(() => {
+    const ids = new Set<string>();
+    projects.forEach((p) => ids.add(`${p.id}|${p.name}`));
+    return Array.from(ids).map((v) => {
+      const [id, name] = v.split("|");
+      return { id, name };
+    });
+  }, [projects]);
+
+  // 내 업무 목록
+  const myTasks = useMemo<MyTask[]>(() => {
+    const tasks: MyTask[] = [];
+    projects.forEach((p) =>
+      p.tasks.forEach((t) => {
+        if (t.assignee === currentUser)
+          tasks.push({ ...t, projectId: p.id, projectName: p.name });
+      })
+    );
+    return tasks;
+  }, [projects, currentUser]);
+
+  // 필터링된 업무
+  const filteredTasks = useMemo(() => {
+    return myTasks.filter((t) => {
+      if (filterProject && filterProject !== "__all__" && t.projectId !== filterProject) return false;
+      if (filterStatus && filterStatus !== "__all__" && t.status !== filterStatus) return false;
+      if (filterPriority && filterPriority !== "__all__" && (t.priority || "보통") !== filterPriority) return false;
+      if (filterCategory && filterCategory !== "__all__" && t.category !== filterCategory) return false;
+      if (filterKeyword && !t.name.toLowerCase().includes(filterKeyword.toLowerCase()) && !t.projectName.toLowerCase().includes(filterKeyword.toLowerCase())) return false;
+      return true;
+    });
+  }, [myTasks, filterProject, filterStatus, filterPriority, filterCategory, filterKeyword]);
+
+  // 수신된 협조요청
+  const receivedCoops = useMemo(() => {
+    const coops: (CoopReq & { projectId: string; projectName: string; taskName: string; fromUser: string })[] = [];
+    projects.forEach((p) =>
+      p.tasks.forEach((t) =>
+        (t.workLogs || []).forEach((wl) =>
+          (wl.coopReqs || []).forEach((cr) => {
+            if (cr.toUser === currentUser && cr.status !== "완료")
+              coops.push({ ...cr, projectId: p.id, projectName: p.name, taskName: t.name, fromUser: t.assignee });
+          })
+        )
+      )
+    );
+    return coops;
+  }, [projects, currentUser]);
+
+  // 선택된 업무 참조
+  const selectedTask = useMemo(() => {
+    if (!selectedTaskKey) return null;
+    const [pid, tname] = selectedTaskKey.split("||");
+    for (const p of projects) {
+      if (p.id === pid) {
+        const t = p.tasks.find((task) => task.name === tname);
+        if (t) return { task: t, projectId: p.id, projectName: p.name };
+      }
+    }
+    return null;
+  }, [selectedTaskKey, projects]);
+
+  // 통계
+  const stats = useMemo(() => {
+    const total = myTasks.length + receivedCoops.length;
+    const progress = myTasks.filter((t) => t.status === "진행중").length;
+    const done = myTasks.filter((t) => t.status === "완료").length;
+    const delay = myTasks.filter((t) => t.status !== "완료" && new Date(t.end) < today).length;
+    const ws = getWeekStart(today);
+    const we = new Date(ws);
+    we.setDate(we.getDate() + 6);
+    let wh = 0;
+    myTasks.forEach((t) =>
+      (t.workLogs || []).forEach((l) => {
+        const ld = new Date(l.startDt);
+        if (ld >= ws && ld <= we) wh += l.hours;
+      })
+    );
+    return { total, progress, done, delay, weekHours: wh };
+  }, [myTasks, receivedCoops, today]);
+
+  const handleSelectTask = useCallback((pid: string, tname: string) => {
+    setSelectedTaskKey(`${pid}||${tname}`);
+    setEditingLogIdx(-1);
+    setSelectedSubItemId("__unassigned__");
+  }, []);
+
+  const handleResetFilter = useCallback(() => {
+    setFilterProject("");
+    setFilterStatus("");
+    setFilterPriority("");
+    setFilterCategory("");
+    setFilterKeyword("");
+  }, []);
+
+  // 업무 데이터 변경 헬퍼
+  const updateProjects = useCallback((updater: (draft: Project[]) => void) => {
+    setProjects((prev) => {
+      const copy = JSON.parse(JSON.stringify(prev));
+      updater(copy);
+      return copy;
+    });
+  }, []);
+
+  const getTaskRef = useCallback(
+    (projectId: string, taskName: string) => {
+      for (const p of projects) {
+        if (p.id === projectId) {
+          return p.tasks.find((t) => t.name === taskName) || null;
+        }
+      }
+      return null;
+    },
+    [projects]
+  );
+
+  // 수행항목 추가
+  const handleAddSubItem = useCallback(async () => {
+    if (!selectedTask || !newSiName.trim()) return;
+    const w = parseInt(newSiWeight) || 0;
+    if (w <= 0) return;
+    const taskId = selectedTask.task._id;
+    if (!taskId) return;
+    const res = await createSubItem(taskId, { name: newSiName.trim(), weight: w, progress: 0, status: "대기" });
+    if (res.success) {
+      toast.success("수행항목이 추가되었어요.");
+      setNewSiName("");
+      setNewSiWeight("");
+      fetchMyWork();
+    } else {
+      toast.error(res.message || "수행항목 추가에 실패했어요.");
+    }
+  }, [selectedTask, newSiName, newSiWeight, fetchMyWork]);
+
+  // 수행항목 삭제
+  const handleDeleteSubItem = useCallback(
+    async (idx: number) => {
+      if (!selectedTask) return;
+      const si = selectedTask.task.subItems[idx];
+      const siId = si?._id ?? si?.id;
+      if (siId) {
+        const res = await deleteSubItem(String(siId));
+        if (res.success) {
+          toast.success("수행항목이 삭제되었어요.");
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "수행항목 삭제에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t) {
+                t.subItems.splice(idx, 1);
+                t.progress = calcAutoProgress(t);
+              }
+            }
+          }
+        });
+      }
+    },
+    [selectedTask, updateProjects, fetchMyWork]
+  );
+
+  // 수행항목 체크 토글
+  const handleToggleSubCheck = useCallback(
+    async (idx: number) => {
+      if (!selectedTask) return;
+      const si = selectedTask.task.subItems[idx];
+      const siId = si?._id ?? si?.id;
+      const newProgress = (si?.progress ?? 0) >= 100 ? 0 : 100;
+      const newStatus = newProgress >= 100 ? "완료" : "대기";
+      if (siId) {
+        const res = await updateSubItem(String(siId), { progress: newProgress, status: newStatus });
+        if (res.success) {
+          toast.success("수행항목이 업데이트되었어요.");
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "수행항목 업데이트에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t && t.subItems[idx]) {
+                t.subItems[idx].progress = newProgress;
+                t.subItems[idx].status = newStatus;
+                t.progress = calcAutoProgress(t);
+              }
+            }
+          }
+        });
+      }
+    },
+    [selectedTask, updateProjects, fetchMyWork]
+  );
+
+  // 수행항목 진행률 변경
+  const handleUpdateSubProgress = useCallback(
+    async (siId: number | string, val: number) => {
+      if (!selectedTask) return;
+      const si = selectedTask.task.subItems.find((s) => s.id === siId || s._id === String(siId));
+      const apiId = si?._id ?? si?.id;
+      if (apiId) {
+        const res = await updateSubItem(String(apiId), {
+          progress: val,
+          status: val >= 100 ? "완료" : val > 0 ? "진행중" : "대기",
+        });
+        if (res.success) {
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "진행률 업데이트에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t) {
+                const subSi = t.subItems.find((s) => s.id === siId || s._id === String(siId));
+                if (subSi) {
+                  subSi.progress = val;
+                  subSi.status = val >= 100 ? "완료" : val > 0 ? "진행중" : "대기";
+                  t.progress = calcAutoProgress(t);
+                }
+              }
+            }
+          }
+        });
+      }
+    },
+    [selectedTask, updateProjects, fetchMyWork]
+  );
+
+  // 수행기록 편집 시작
+  const handleStartEdit = useCallback(
+    (idx: number) => {
+      if (!selectedTask) return;
+      const log = selectedTask.task.workLogs[idx];
+      if (log) {
+        setEditForm({ startDt: log.startDt, endDt: log.endDt, desc: log.desc });
+      }
+      setEditingLogIdx(idx);
+    },
+    [selectedTask]
+  );
+
+  // 새 기록 추가 시작
+  const handleStartNewLog = useCallback(
+    (siId: number | string | null) => {
+      const now = new Date();
+      const ds = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+      setEditForm({ startDt: `${ds}T08:00`, endDt: `${ds}T17:00`, desc: "" });
+      setEditingLogIdx(-2);
+      if (siId === null) setSelectedSubItemId("__unassigned__");
+      else setSelectedSubItemId(siId);
+    },
+    []
+  );
+
+  // 기록 저장
+  const handleSaveLog = useCallback(
+    async (logIdx: number, siId: number | string | null) => {
+      if (!selectedTask) return;
+      if (!editForm.startDt || !editForm.endDt || !editForm.desc.trim()) return;
+      const hours = calcHours(editForm.startDt, editForm.endDt);
+      if (hours <= 0) return;
+      const taskId = selectedTask.task._id;
+      if (!taskId) return;
+      if (logIdx < 0) {
+        const res = await createWorkLog(taskId, {
+          start_dt: editForm.startDt,
+          end_dt: editForm.endDt,
+          hours,
+          description: editForm.desc.trim(),
+          sub_item_id: siId ?? null,
+        });
+        if (res.success) {
+          toast.success("작업일지가 등록되었어요.");
+          setEditingLogIdx(-1);
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "작업일지 등록에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t) {
+                t.workLogs[logIdx] = { ...t.workLogs[logIdx], startDt: editForm.startDt, endDt: editForm.endDt, hours, desc: editForm.desc.trim(), subItemId: siId, attachments: t.workLogs[logIdx].attachments || [], purchaseReqs: t.workLogs[logIdx].purchaseReqs || [], coopReqs: t.workLogs[logIdx].coopReqs || [] };
+              }
+            }
+          }
+        });
+        setEditingLogIdx(-1);
+      }
+    },
+    [selectedTask, editForm, updateProjects, fetchMyWork]
+  );
+
+  // 기록 삭제
+  const handleDeleteLog = useCallback(
+    async (idx: number) => {
+      if (!selectedTask) return;
+      const log = selectedTask.task.workLogs[idx];
+      const workLogId = log?._id;
+      if (workLogId) {
+        const res = await deleteWorkLog(String(workLogId));
+        if (res.success) {
+          toast.success("작업일지가 삭제되었어요.");
+          setEditingLogIdx(-1);
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "작업일지 삭제에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t) t.workLogs.splice(idx, 1);
+            }
+          }
+        });
+        setEditingLogIdx(-1);
+      }
+    },
+    [selectedTask, updateProjects, fetchMyWork]
+  );
+
+  // 모달: 첨부파일
+  const openAttModal = useCallback(
+    (logIdx: number) => {
+      if (!selectedTask) return;
+      setModalLogIdx(logIdx);
+      const atts = logIdx >= 0 ? [...(selectedTask.task.workLogs[logIdx]?.attachments || [])] : [];
+      setModalAttachments(atts);
+      setAttModalOpen(true);
+    },
+    [selectedTask]
+  );
+
+  const saveAttModal = useCallback(() => {
+    if (!selectedTask || modalLogIdx < 0) return;
+    updateProjects((draft) => {
+      for (const p of draft) {
+        if (p.id === selectedTask.projectId) {
+          const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+          if (t && t.workLogs[modalLogIdx]) t.workLogs[modalLogIdx].attachments = [...modalAttachments];
+        }
+      }
+    });
+    setAttModalOpen(false);
+  }, [selectedTask, modalLogIdx, modalAttachments, updateProjects]);
+
+  // 모달: 구매요청
+  const openPrModal = useCallback(
+    (logIdx: number) => {
+      if (!selectedTask) return;
+      setModalLogIdx(logIdx);
+      const prs = logIdx >= 0 ? [...(selectedTask.task.workLogs[logIdx]?.purchaseReqs || []).map((p) => ({ ...p }))] : [];
+      setModalPurchaseReqs(prs);
+      setPrModalOpen(true);
+    },
+    [selectedTask]
+  );
+
+  const savePrModal = useCallback(async () => {
+    if (!selectedTask || modalLogIdx < 0) return;
+    const workLog = selectedTask.task.workLogs[modalLogIdx];
+    const workLogId = workLog?._id;
+    if (workLogId) {
+      const newItems = modalPurchaseReqs.filter((pr) => !pr._id);
+      for (const pr of newItems) {
+        const res = await createPurchaseReq(String(workLogId), {
+          item: pr.item,
+          qty: pr.qty,
+          unit: pr.unit,
+          reason: pr.reason,
+          status: pr.status,
+        });
+        if (!res.success) {
+          toast.error(res.message || "구매요청 등록에 실패했어요.");
+          return;
+        }
+      }
+      if (newItems.length > 0) toast.success("구매요청이 등록되었어요.");
+    }
+    updateProjects((draft) => {
+      for (const p of draft) {
+        if (p.id === selectedTask.projectId) {
+          const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+          if (t && t.workLogs[modalLogIdx]) t.workLogs[modalLogIdx].purchaseReqs = [...modalPurchaseReqs];
+        }
+      }
+    });
+    setPrModalOpen(false);
+    if (workLogId && newItems.length > 0) fetchMyWork();
+  }, [selectedTask, modalLogIdx, modalPurchaseReqs, updateProjects, fetchMyWork]);
+
+  // 모달: 협조요청
+  const openCrModal = useCallback(
+    (logIdx: number) => {
+      if (!selectedTask) return;
+      setModalLogIdx(logIdx);
+      const crs = logIdx >= 0 ? [...(selectedTask.task.workLogs[logIdx]?.coopReqs || []).map((c) => ({ ...c, responses: [...(c.responses || [])] }))] : [];
+      setModalCoopReqs(crs);
+      setCrModalOpen(true);
+    },
+    [selectedTask]
+  );
+
+  const saveCrModal = useCallback(async () => {
+    if (!selectedTask || modalLogIdx < 0) return;
+    const workLog = selectedTask.task.workLogs[modalLogIdx];
+    const workLogId = workLog?._id;
+    if (workLogId) {
+      const newItems = modalCoopReqs.filter((cr) => !cr._id);
+      for (const cr of newItems) {
+        const res = await createCoopReq(String(workLogId), {
+          to_user: cr.toUser,
+          to_dept: cr.toDept,
+          title: cr.title,
+          description: cr.desc,
+          due_date: cr.dueDate,
+        });
+        if (!res.success) {
+          toast.error(res.message || "협조요청 등록에 실패했어요.");
+          return;
+        }
+      }
+      if (newItems.length > 0) toast.success("협조요청이 등록되었어요.");
+    }
+    updateProjects((draft) => {
+      for (const p of draft) {
+        if (p.id === selectedTask.projectId) {
+          const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+          if (t && t.workLogs[modalLogIdx]) t.workLogs[modalLogIdx].coopReqs = [...modalCoopReqs];
+        }
+      }
+    });
+    setCrModalOpen(false);
+    if (workLogId && modalCoopReqs.filter((cr) => !cr._id).length > 0) fetchMyWork();
+  }, [selectedTask, modalLogIdx, modalCoopReqs, updateProjects, fetchMyWork]);
+
+  // ===== 칸반 보드 =====
+  const kanbanCols = useMemo(() => {
+    const cols: Record<string, MyTask[]> = { 대기: [], 진행중: [], 검토중: [], 완료: [] };
+    filteredTasks.forEach((t) => {
+      if (cols[t.status]) cols[t.status].push(t);
+    });
+    return cols;
+  }, [filteredTasks]);
+
+  const kanbanConfig = [
+    { key: "대기", icon: <Circle className="h-3.5 w-3.5" />, color: "border-muted-foreground/30", titleColor: "text-muted-foreground" },
+    { key: "진행중", icon: <Circle className="h-3.5 w-3.5 text-primary" />, color: "border-primary", titleColor: "text-primary" },
+    { key: "검토중", icon: <Circle className="h-3.5 w-3.5 text-warning" />, color: "border-warning", titleColor: "text-warning" },
+    { key: "완료", icon: <CheckCircle2 className="h-3.5 w-3.5 text-success" />, color: "border-success", titleColor: "text-success" },
+  ];
+
+  // ===== 타임시트 =====
+  const timesheetData = useMemo(() => {
+    const ws = getWeekStart(today);
+    ws.setDate(ws.getDate() + timesheetWeekOffset * 7);
+    const we = new Date(ws);
+    we.setDate(we.getDate() + 6);
+    const dn = ["월", "화", "수", "목", "금", "토", "일"];
+    const wds: Date[] = [];
+    for (let i = 0; i < 7; i++) {
+      const d = new Date(ws);
+      d.setDate(d.getDate() + i);
+      wds.push(d);
+    }
+    const ph: Record<string, { id: string; name: string; days: number[]; total: number; tasks: Record<string, number[]> }> = {};
+    myTasks.forEach((t) => {
+      const k = `${t.projectId}|${t.projectName}`;
+      if (!ph[k]) ph[k] = { id: t.projectId, name: t.projectName, days: [0, 0, 0, 0, 0, 0, 0], total: 0, tasks: {} };
+      (t.workLogs || []).forEach((l) => {
+        const ld = new Date(l.startDt);
+        const di = wds.findIndex((d) => d.toDateString() === ld.toDateString());
+        if (di >= 0) {
+          ph[k].days[di] += l.hours;
+          ph[k].total += l.hours;
+          if (!ph[k].tasks[t.name]) ph[k].tasks[t.name] = [0, 0, 0, 0, 0, 0, 0];
+          ph[k].tasks[t.name][di] += l.hours;
+        }
+      });
+    });
+    const dt = [0, 0, 0, 0, 0, 0, 0];
+    Object.values(ph).forEach((p) => p.days.forEach((h, i) => (dt[i] += h)));
+    const gt = dt.reduce((s, h) => s + h, 0);
+    return { ws, we, dn, wds, ph, dt, gt };
+  }, [myTasks, today, timesheetWeekOffset]);
+
+  // ========== 렌더링 ==========
+  if (loading && projects.length === 0) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 p-3">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        <span className="text-sm text-muted-foreground">업무 목록을 불러오는 중...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 헤더 */}
+      <div className="flex shrink-0 items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="flex flex-col gap-0.5">
+            <div className="flex items-center gap-1 text-[11px] text-muted-foreground">
+              <span>설계관리</span>
+              <ChevronRight className="h-3 w-3" />
+              <span className="text-foreground">내업무현황</span>
+            </div>
+            <h1 className="text-lg font-bold leading-tight">내 업무 현황</h1>
+          </div>
+          <div className="flex items-center gap-2 rounded-lg border bg-card px-2.5 py-1.5">
+            <Avatar className="h-7 w-7">
+              <AvatarFallback className={cn("text-xs font-bold text-white", USER_INFO[currentUser]?.color || "bg-primary")}>
+                {currentUser.charAt(0)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="leading-tight">
+              <div className="text-xs font-semibold">{currentUser}</div>
+              <div className="text-[10px] text-muted-foreground">{USER_INFO[currentUser]?.role}</div>
+            </div>
+            <Select value={currentUser} onValueChange={(v) => { setCurrentUser(v); setSelectedTaskKey(null); }}>
+              <SelectTrigger className="h-6 w-20 border-0 bg-transparent text-xs text-primary" size="xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {USERS.map((u) => (
+                  <SelectItem key={u} value={u}>{u}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <div className="flex items-center gap-1.5 rounded-lg border bg-card px-2.5 py-1.5 text-xs text-muted-foreground">
+          <Calendar className="h-3.5 w-3.5" />
+          {todayStr}
+        </div>
+      </div>
+
+      {/* 검색 필터 */}
+      <div className="shrink-0 rounded-lg border border-border bg-card px-5 py-4">
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] items-end gap-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트</span>
+            <Select value={filterProject} onValueChange={setFilterProject}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 프로젝트" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 프로젝트</SelectItem>
+                {projectList.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>{p.id} {p.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">진행상태</span>
+            <Select value={filterStatus} onValueChange={setFilterStatus}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 상태" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 상태</SelectItem>
+                {["대기", "진행중", "검토중", "완료"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">우선순위</span>
+            <Select value={filterPriority} onValueChange={setFilterPriority}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 우선순위" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 우선순위</SelectItem>
+                {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무유형</span>
+            <Select value={filterCategory} onValueChange={setFilterCategory}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 유형" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 유형</SelectItem>
+                {["기구설계", "전장설계", "SW개발", "구매/조달", "조립/시운전", "검토/승인"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">검색어</span>
+            <div className="relative">
+              <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={filterKeyword}
+                onChange={(e) => setFilterKeyword(e.target.value)}
+                placeholder="업무명 검색..."
+                className="h-9 pl-8 text-xs"
+              />
+            </div>
+          </div>
+          <div className="flex items-end justify-end gap-2">
+            <Button variant="outline" size="sm" className="h-9" onClick={handleResetFilter}>
+              <RotateCcw className="mr-1.5 h-4 w-4" />
+              초기화
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* 통계 요약 바 */}
+      <div className="shrink-0 rounded-lg border border-border bg-card px-5 py-3">
+        <div className="flex flex-wrap items-center gap-5">
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10">
+              <ClipboardList className="h-3.5 w-3.5 text-primary" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.total}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">전체</span>
+            </div>
+          </div>
+          <div className="h-4 w-px bg-border" />
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-warning/10">
+              <Circle className="h-3.5 w-3.5 text-warning" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.progress}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">진행중</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-success/10">
+              <CheckCircle2 className="h-3.5 w-3.5 text-success" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.done}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">완료</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className={cn("flex h-7 w-7 items-center justify-center rounded-md", stats.delay > 0 ? "bg-destructive/10" : "bg-muted")}>
+              <AlertCircle className={cn("h-3.5 w-3.5", stats.delay > 0 ? "text-destructive" : "text-muted-foreground")} />
+            </div>
+            <div className="leading-none">
+              <span className={cn("text-sm font-bold", stats.delay > 0 && "text-destructive")}>{stats.delay}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">지연</span>
+            </div>
+          </div>
+          <div className="h-4 w-px bg-border" />
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-info/10">
+              <Clock className="h-3.5 w-3.5 text-info" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.weekHours}h</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">이번주 투입</span>
+            </div>
+          </div>
+          <div className="ml-auto flex items-center gap-2">
+            <span className="rounded-full border border-primary/15 bg-primary/8 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+              {filteredTasks.length}건
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* 메인 영역 */}
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1 rounded-lg">
+        {/* 왼쪽: 업무 현황 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
+            <div className="flex shrink-0 items-center justify-between border-b bg-muted/50 px-4 py-2.5">
+              <div className="flex items-center gap-2">
+                <ClipboardList className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-semibold">업무 현황</span>
+                <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                  {filteredTasks.length}건
+                </span>
+              </div>
+              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as any)}>
+                <TabsList className="h-7">
+                  <TabsTrigger value="kanban" className="h-5 gap-1 px-2 text-[11px]">
+                    <LayoutGrid className="h-3 w-3" />보드
+                  </TabsTrigger>
+                  <TabsTrigger value="list" className="h-5 gap-1 px-2 text-[11px]">
+                    <List className="h-3 w-3" />목록
+                  </TabsTrigger>
+                  <TabsTrigger value="timesheet" className="h-5 gap-1 px-2 text-[11px]">
+                    <Timer className="h-3 w-3" />타임시트
+                  </TabsTrigger>
+                </TabsList>
+              </Tabs>
+            </div>
+            <ScrollArea className="flex-1">
+              <div className="p-2">
+                {viewMode === "kanban" && (
+                  <div className="grid grid-cols-4 gap-2">
+                    {kanbanConfig.map((col) => {
+                      const tasks = kanbanCols[col.key] || [];
+                      const extraCount = col.key === "대기" ? receivedCoops.length : 0;
+                      return (
+                        <div key={col.key} className="flex flex-col rounded-lg border bg-muted/30 p-2">
+                          <div className={cn("mb-2 flex items-center justify-between rounded-md border-l-[3px] bg-card px-2 py-1.5", col.color)}>
+                            <span className={cn("flex items-center gap-1.5 text-xs font-bold", col.titleColor)}>
+                              {col.icon}{col.key}
+                            </span>
+                            <span className="rounded-full border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] font-bold text-muted-foreground">{tasks.length + extraCount}</span>
+                          </div>
+                          <div className="flex flex-1 flex-col gap-1.5 overflow-y-auto">
+                            {col.key === "대기" && receivedCoops.map((cr, i) => (
+                              <div key={`coop-${i}`} className="rounded-md border border-warning/30 bg-warning/10 p-2">
+                                <div className="text-[10px] text-warning">
+                                  <Handshake className="mr-0.5 inline h-3 w-3" /> 협조 · {cr.fromUser}
+                                </div>
+                                <div className="text-xs font-semibold">{cr.title}</div>
+                                <div className="mt-0.5 text-[10px] text-muted-foreground">{cr.projectName}</div>
+                                <div className={cn("mt-0.5 text-[10px]", new Date(cr.dueDate) < today ? "font-semibold text-destructive" : "text-success")}>
+                                  <Calendar className="mr-0.5 inline h-3 w-3" />{cr.dueDate}
+                                </div>
+                              </div>
+                            ))}
+                            {tasks.map((t) => {
+                              const isDelay = t.status !== "완료" && new Date(t.end) < today;
+                              const dd = Math.ceil((new Date(t.end).getTime() - today.getTime()) / 86400000);
+                              const dueText = isDelay ? `${Math.abs(dd)}일 초과` : dd === 0 ? "오늘" : dd <= 3 ? `D-${dd}` : t.end;
+                              const attCount = (t.workLogs || []).reduce((n, wl) => n + (wl.attachments || []).length, 0);
+                              const coopCount = (t.workLogs || []).reduce((n, wl) => n + (wl.coopReqs || []).filter((c) => c.status !== "완료").length, 0);
+                              const isSelected = selectedTaskKey === `${t.projectId}||${t.name}`;
+                              return (
+                                <div
+                                  key={`${t.projectId}-${t.name}`}
+                                  className={cn(
+                                    "cursor-pointer rounded-md border bg-card p-2 transition-all",
+                                    isSelected && "border-primary ring-2 ring-primary/20"
+                                  )}
+                                  onClick={() => handleSelectTask(t.projectId, t.name)}
+                                >
+                                  <div className="text-[10px] text-muted-foreground">{t.projectId} · {t.projectName}</div>
+                                  <div className="text-xs font-semibold">{t.name}</div>
+                                  <div className="mt-1 flex items-center justify-between">
+                                    <Badge className={cn("h-4 px-1.5 text-[9px]", PRIORITY_STYLES[t.priority || "보통"])}>{t.priority || "보통"}</Badge>
+                                    <span className="text-[10px] text-muted-foreground">{t.category}</span>
+                                  </div>
+                                  <div className="mt-1 flex items-center gap-1.5">
+                                    <div className="h-1 flex-1 overflow-hidden rounded-full bg-muted">
+                                      <div className={cn("h-full rounded-full", getProgressBg(t.progress))} style={{ width: `${t.progress}%` }} />
+                                    </div>
+                                    <span className={cn("text-[10px] font-semibold", getProgressColor(t.progress))}>{t.progress}%</span>
+                                  </div>
+                                  <div className={cn("mt-0.5 text-[10px]", isDelay ? "font-semibold text-destructive" : dd <= 3 ? "text-warning" : "text-success")}>
+                                    <Calendar className="mr-0.5 inline h-3 w-3" />{dueText}
+                                  </div>
+                                  {(coopCount > 0 || attCount > 0) && (
+                                    <div className="mt-1 flex gap-1">
+                                      {coopCount > 0 && <Badge variant="outline" className="h-4 gap-0.5 px-1 text-[9px]"><Handshake className="h-2.5 w-2.5" />{coopCount}</Badge>}
+                                      {attCount > 0 && <Badge variant="outline" className="h-4 gap-0.5 px-1 text-[9px]"><Paperclip className="h-2.5 w-2.5" />{attCount}</Badge>}
+                                    </div>
+                                  )}
+                                </div>
+                              );
+                            })}
+                            {tasks.length === 0 && extraCount === 0 && (
+                              <div className="py-3 text-center text-[11px] text-muted-foreground">업무가 없어요</div>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+
+                {viewMode === "list" && (
+                  <EDataTable
+                    columns={[
+                      { key: "projectId", label: "프로젝트", width: "w-[90px]", render: (_v, row) => (
+                        <div className="text-[10px]">
+                          <span className="font-semibold text-primary">{row.projectId}</span>
+                          <br />
+                          <span className="text-muted-foreground">{row.projectName}</span>
+                        </div>
+                      )},
+                      { key: "name", label: "업무명" },
+                      { key: "category", label: "유형", width: "w-[65px]" },
+                      { key: "status", label: "상태", width: "w-[55px]", align: "center", render: (_v, row) => {
+                        const isDelay = row.status !== "완료" && new Date(row.end) < today;
+                        const displayStatus = isDelay ? "지연" : row.status;
+                        return <Badge className={cn("text-[10px]", STATUS_STYLES[displayStatus])}>{displayStatus}</Badge>;
+                      }},
+                      { key: "end", label: "종료일", width: "w-[80px]", render: (v, row) => {
+                        const isDelay = row.status !== "완료" && new Date(row.end) < today;
+                        return <span className={cn("text-[11px]", isDelay && "font-semibold text-destructive")}>{v}</span>;
+                      }},
+                      { key: "progress", label: "진행률", width: "w-[70px]", sortable: true, render: (v) => (
+                        <div className="flex items-center gap-1.5">
+                          <div className="h-1 w-12 overflow-hidden rounded-full bg-muted">
+                            <div className={cn("h-full rounded-full", getProgressBg(v))} style={{ width: `${v}%` }} />
+                          </div>
+                          <span className="text-[10px]">{v}%</span>
+                        </div>
+                      )},
+                    ] as EDataTableColumn<MyTask>[]}
+                    data={[...filteredTasks].sort((a, b) => {
+                      const ad = a.status !== "완료" && new Date(a.end) < today;
+                      const bd = b.status !== "완료" && new Date(b.end) < today;
+                      if (ad && !bd) return -1;
+                      if (!ad && bd) return 1;
+                      const ord: Record<string, number> = { 진행중: 0, 대기: 1, 검토중: 2, 완료: 3 };
+                      return (ord[a.status] ?? 9) - (ord[b.status] ?? 9);
+                    })}
+                    rowKey={(row) => `${row.projectId}||${row.name}`}
+                    selectedId={selectedTaskKey}
+                    onRowClick={(row) => handleSelectTask(row.projectId, row.name)}
+                    emptyMessage="검색 결과가 없어요"
+                    showPagination={false}
+                    draggableColumns={false}
+                  />
+                )}
+
+                {viewMode === "timesheet" && (
+                  <div>
+                    <div className="mb-2 flex items-center gap-2">
+                      <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setTimesheetWeekOffset((p) => p - 1)}>
+                        <ChevronLeft className="h-3 w-3" />
+                      </Button>
+                      <span className="text-sm font-semibold">
+                        <Calendar className="mr-1 inline h-3.5 w-3.5" />
+                        {timesheetData.ws.getMonth() + 1}/{timesheetData.ws.getDate()} ~ {timesheetData.we.getMonth() + 1}/{timesheetData.we.getDate()}
+                      </span>
+                      <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setTimesheetWeekOffset((p) => p + 1)}>
+                        <ChevronRight className="h-3 w-3" />
+                      </Button>
+                      {timesheetWeekOffset !== 0 && (
+                        <Button variant="outline" size="sm" className="h-7 text-xs text-primary" onClick={() => setTimesheetWeekOffset(0)}>이번주</Button>
+                      )}
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        총 <strong className="text-primary">{timesheetData.gt}h</strong>
+                      </span>
+                    </div>
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="min-w-[120px] text-[11px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">프로젝트/업무</TableHead>
+                          {timesheetData.wds.map((d, i) => (
+                            <TableHead
+                              key={i}
+                              className={cn(
+                                "text-center text-[10px]",
+                                i >= 5 && "bg-destructive/5",
+                                d.toDateString() === today.toDateString() && "bg-primary/5 text-primary"
+                              )}
+                            >
+                              {timesheetData.dn[i]}
+                              <br />
+                              <span className="text-[9px]">{d.getMonth() + 1}/{d.getDate()}</span>
+                            </TableHead>
+                          ))}
+                          <TableHead className="text-center text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">합계</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {Object.keys(timesheetData.ph).length === 0 && (
+                          <TableRow>
+                            <TableCell colSpan={9} className="py-8 text-center text-[13px] text-muted-foreground">기록이 없어요</TableCell>
+                          </TableRow>
+                        )}
+                        {Object.values(timesheetData.ph).map((p) => (
+                          <React.Fragment key={p.id}>
+                            <TableRow className="bg-muted/50">
+                              <TableCell className="text-[10px] font-bold text-primary">{p.id} {p.name}</TableCell>
+                              {p.days.map((v, i) => (
+                                <TableCell key={i} className={cn("text-center text-[11px] font-semibold", i >= 5 && "bg-destructive/5", v > 0 ? "" : "text-muted-foreground/30")}>
+                                  {v > 0 ? `${v}h` : "-"}
+                                </TableCell>
+                              ))}
+                              <TableCell className="text-center text-[13px] font-bold text-primary">{p.total}h</TableCell>
+                            </TableRow>
+                            {Object.entries(p.tasks).map(([tn, days]) => {
+                              const tt = days.reduce((s, v) => s + v, 0);
+                              return (
+                                <TableRow key={tn}>
+                                  <TableCell className="pl-4 text-[10px] text-muted-foreground">└ {tn}</TableCell>
+                                  {days.map((v, i) => (
+                                    <TableCell key={i} className={cn("text-center text-[10px]", i >= 5 && "bg-destructive/5", v > 0 ? "" : "text-muted-foreground/30")}>
+                                      {v > 0 ? `${v}h` : "-"}
+                                    </TableCell>
+                                  ))}
+                                  <TableCell className="text-center text-[10px] font-semibold">{tt}h</TableCell>
+                                </TableRow>
+                              );
+                            })}
+                          </React.Fragment>
+                        ))}
+                        <TableRow className="bg-primary/5 font-bold">
+                          <TableCell className="text-[11px]">합계</TableCell>
+                          {timesheetData.dt.map((v, i) => (
+                            <TableCell key={i} className={cn("text-center text-[11px]", i >= 5 && "bg-destructive/5", v > 0 ? "text-primary" : "text-muted-foreground/30")}>
+                              {v > 0 ? `${v}h` : "-"}
+                            </TableCell>
+                          ))}
+                          <TableCell className="text-center text-sm font-bold text-primary">{timesheetData.gt}h</TableCell>
+                        </TableRow>
+                      </TableBody>
+                    </Table>
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 오른쪽: 상세 패널 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
+            {!selectedTask ? (
+              <div className="flex h-full flex-col items-center justify-center gap-3 text-muted-foreground">
+                <div className="flex h-14 w-14 items-center justify-center rounded-full border-2 border-dashed border-border">
+                  <PointerIcon className="h-6 w-6 text-muted-foreground/50" />
+                </div>
+                <div className="text-center">
+                  <p className="text-sm font-medium">업무를 선택해주세요</p>
+                  <p className="text-xs text-muted-foreground/60">왼쪽 목록에서 업무를 클릭하면 상세 정보가 표시돼요</p>
+                </div>
+              </div>
+            ) : (
+              <>
+                {/* 상세 헤더 */}
+                <div className="flex shrink-0 items-center justify-between border-b bg-muted/50 px-3 py-2">
+                  <h3 className="text-[13px] font-bold">{selectedTask.task.name}</h3>
+                  <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => setSelectedTaskKey(null)}>
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+
+                {/* 업무 정보 바 */}
+                <div className="shrink-0 border-b bg-muted/10 px-3 py-2">
+                  <div className="grid grid-cols-[auto_1fr_auto_1fr] gap-x-3 gap-y-0.5 text-xs">
+                    <span className="text-muted-foreground">프로젝트</span>
+                    <span className="font-semibold text-primary">{selectedTask.projectId} {selectedTask.projectName}</span>
+                    <span className="text-muted-foreground">상태</span>
+                    <span className="flex items-center gap-1.5">
+                      <Badge className={cn("text-[10px]", STATUS_STYLES[selectedTask.task.status])}>{selectedTask.task.status}</Badge>
+                      {selectedTask.task.subItems.length > 0 && <Badge variant="outline" className="text-[9px]">자동</Badge>}
+                    </span>
+                    <span className="text-muted-foreground">유형</span>
+                    <span className="font-semibold">{selectedTask.task.category}</span>
+                    <span className="text-muted-foreground">기간</span>
+                    <span className="font-semibold">{selectedTask.task.start} ~ {selectedTask.task.end}</span>
+                  </div>
+                  <div className="mt-1.5 flex items-center gap-2">
+                    <Progress value={selectedTask.task.subItems.length > 0 ? calcAutoProgress(selectedTask.task) : selectedTask.task.progress} className="h-1.5 flex-1" />
+                    <span className={cn("text-sm font-bold", getProgressColor(selectedTask.task.subItems.length > 0 ? calcAutoProgress(selectedTask.task) : selectedTask.task.progress))}>
+                      {selectedTask.task.subItems.length > 0 ? calcAutoProgress(selectedTask.task) : selectedTask.task.progress}%
+                    </span>
+                  </div>
+                </div>
+
+                {/* 수행항목 + 기록 분할 */}
+                <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+                  {/* 수행항목 */}
+                  <ResizablePanel defaultSize={40} minSize={20}>
+                    <div className="flex h-full flex-col">
+                      <div className="shrink-0 border-b bg-muted/50 px-3 py-1.5">
+                        <h3 className="text-[13px] font-bold">수행항목</h3>
+                      </div>
+                      <ScrollArea className="flex-1">
+                        {/* 추가 입력 */}
+                        <div className="flex gap-1 border-b bg-muted/10 p-2">
+                          <Input value={newSiName} onChange={(e) => setNewSiName(e.target.value)} placeholder="수행항목 추가..." className="h-6 flex-1 text-xs" />
+                          <Input value={newSiWeight} onChange={(e) => setNewSiWeight(e.target.value)} placeholder="%" type="number" className="h-6 w-10 text-xs" min={1} max={100} />
+                          <Button size="sm" className="h-6 px-2 text-[10px]" onClick={handleAddSubItem}>
+                            <Plus className="mr-0.5 h-3 w-3" />추가
+                          </Button>
+                        </div>
+
+                        {/* 수행항목 리스트 */}
+                        {selectedTask.task.subItems.map((si, idx) => {
+                          const done = si.progress >= 100;
+                          const siLogs = selectedTask.task.workLogs.filter((wl) => wl.subItemId == si.id || String(wl.subItemId) === String(si.id));
+                          const isSelected = selectedSubItemId === si.id;
+                          return (
+                            <div
+                              key={si.id}
+                              className={cn(
+                                "flex cursor-pointer items-center gap-1.5 border-b px-2.5 py-1.5 transition-colors hover:bg-accent/50",
+                                isSelected && "border-l-2 border-l-primary bg-accent"
+                              )}
+                              onClick={() => { setSelectedSubItemId(si.id); setEditingLogIdx(-1); }}
+                            >
+                              <Checkbox
+                                checked={done}
+                                onCheckedChange={() => handleToggleSubCheck(idx)}
+                                onClick={(e) => e.stopPropagation()}
+                                className="h-4 w-4"
+                              />
+                              <span className={cn("min-w-0 flex-1 truncate text-[13px] font-semibold", done && "text-muted-foreground line-through")}>
+                                {si.name}
+                              </span>
+                              <Badge variant="outline" className="h-4 px-1 text-[9px]">{si.weight}%</Badge>
+                              <div className="h-1 w-10 overflow-hidden rounded-full bg-muted">
+                                <div className={cn("h-full rounded-full", getProgressBg(si.progress))} style={{ width: `${si.progress}%` }} />
+                              </div>
+                              <span className={cn("min-w-[28px] text-right text-[10px] font-bold", getProgressColor(si.progress))}>{si.progress}%</span>
+                              <span className="min-w-[16px] text-center text-[10px] text-muted-foreground">{siLogs.length}</span>
+                              <Button variant="ghost" size="sm" className="h-5 w-5 p-0 opacity-20 hover:opacity-100" onClick={(e) => { e.stopPropagation(); handleDeleteSubItem(idx); }}>
+                                <Trash2 className="h-3 w-3" />
+                              </Button>
+                            </div>
+                          );
+                        })}
+
+                        {/* 요약 */}
+                        {selectedTask.task.subItems.length > 0 && (
+                          <div className="flex items-center justify-between border-b bg-primary/5 px-2.5 py-1 text-[11px]">
+                            <span>
+                              가중 진행률: <strong className="text-primary">{calcAutoProgress(selectedTask.task)}%</strong>
+                              {selectedTask.task.subItems.reduce((s, i) => s + i.weight, 0) !== 100 && (
+                                <span className="text-destructive"> (합계:{selectedTask.task.subItems.reduce((s, i) => s + i.weight, 0)}%)</span>
+                              )}
+                            </span>
+                            <span className="text-muted-foreground">
+                              {selectedTask.task.subItems.filter((i) => i.progress >= 100).length}/{selectedTask.task.subItems.length}
+                            </span>
+                          </div>
+                        )}
+
+                        {/* 일반 수행기록 */}
+                        <div
+                          className={cn(
+                            "flex cursor-pointer items-center gap-1.5 border-t px-2.5 py-1.5 text-xs font-bold text-muted-foreground transition-colors hover:bg-accent/50",
+                            selectedSubItemId === "__unassigned__" && "border-l-2 border-l-primary bg-accent"
+                          )}
+                          onClick={() => { setSelectedSubItemId("__unassigned__"); setEditingLogIdx(-1); }}
+                        >
+                          <FileEdit className="h-3.5 w-3.5" />
+                          일반 수행기록
+                          <span className="ml-1 text-[10px] font-normal text-muted-foreground">
+                            ({selectedTask.task.workLogs.filter((wl) => !wl.subItemId).length}건)
+                          </span>
+                        </div>
+                      </ScrollArea>
+                    </div>
+                  </ResizablePanel>
+
+                  <ResizableHandle />
+
+                  {/* 수행기록 */}
+                  <ResizablePanel defaultSize={60} minSize={30}>
+                    <div className="flex h-full flex-col">
+                      <div className="shrink-0 border-b bg-muted/50 px-3 py-1.5">
+                        <h3 className="text-[13px] font-bold">수행기록</h3>
+                      </div>
+                      <ScrollArea className="flex-1">
+                        {selectedSubItemId === "__unassigned__" ? (
+                          <RenderLogs
+                            title="일반 수행기록"
+                            logs={selectedTask.task.workLogs
+                              .map((wl, i) => ({ ...wl, _idx: i }))
+                              .filter((wl) => !wl.subItemId)
+                              .sort((a, b) => b.startDt.localeCompare(a.startDt))}
+                            editingLogIdx={editingLogIdx}
+                            editForm={editForm}
+                            setEditForm={setEditForm}
+                            onStartEdit={handleStartEdit}
+                            onStartNew={() => handleStartNewLog(null)}
+                            onSave={(logIdx) => handleSaveLog(logIdx, null)}
+                            onCancel={() => setEditingLogIdx(-1)}
+                            onDelete={handleDeleteLog}
+                            onOpenAtt={openAttModal}
+                            onOpenPr={openPrModal}
+                            onOpenCr={openCrModal}
+                          />
+                        ) : (
+                          (() => {
+                            const si = selectedTask.task.subItems.find((s) => s.id === selectedSubItemId);
+                            if (!si) return (
+                              <div className="flex h-full flex-col items-center justify-center gap-1 text-muted-foreground">
+                                <PointerIcon className="h-6 w-6" />
+                                <span className="text-xs">왼쪽에서 수행항목을 선택하세요</span>
+                              </div>
+                            );
+                            const siLogs = selectedTask.task.workLogs
+                              .map((wl, i) => ({ ...wl, _idx: i }))
+                              .filter((wl) => wl.subItemId == si.id || String(wl.subItemId) === String(si.id))
+                              .sort((a, b) => b.startDt.localeCompare(a.startDt));
+                            return (
+                              <>
+                                <div className="border-b bg-muted/10 p-2.5">
+                                  <div className="flex items-center gap-2">
+                                    <span className="text-sm font-bold">{si.name}</span>
+                                    <Badge variant="outline" className="text-[9px]">{si.weight}%</Badge>
+                                  </div>
+                                  <div className="mt-1.5 flex items-center gap-2">
+                                    <Slider
+                                      className="flex-1"
+                                      value={[si.progress]}
+                                      min={0}
+                                      max={100}
+                                      step={5}
+                                      onValueChange={([v]) => handleUpdateSubProgress(si.id, v)}
+                                    />
+                                    <span className={cn("min-w-[32px] text-right text-xs font-bold", getProgressColor(si.progress))}>{si.progress}%</span>
+                                  </div>
+                                  <div className="mt-0.5 text-[10px] text-muted-foreground">{siLogs.length}건의 기록</div>
+                                </div>
+                                <RenderLogs
+                                  title={si.name}
+                                  logs={siLogs}
+                                  editingLogIdx={editingLogIdx}
+                                  editForm={editForm}
+                                  setEditForm={setEditForm}
+                                  onStartEdit={handleStartEdit}
+                                  onStartNew={() => handleStartNewLog(si.id)}
+                                  onSave={(logIdx) => handleSaveLog(logIdx, si.id)}
+                                  onCancel={() => setEditingLogIdx(-1)}
+                                  onDelete={handleDeleteLog}
+                                  onOpenAtt={openAttModal}
+                                  onOpenPr={openPrModal}
+                                  onOpenCr={openCrModal}
+                                />
+                              </>
+                            );
+                          })()
+                        )}
+                      </ScrollArea>
+                    </div>
+                  </ResizablePanel>
+                </ResizablePanelGroup>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 첨부파일 모달 */}
+      <Dialog open={attModalOpen} onOpenChange={setAttModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="text-base"><Paperclip className="mr-1.5 inline h-4 w-4" />첨부파일 ({modalAttachments.length})</DialogTitle>
+            <DialogDescription className="text-xs">파일을 추가하거나 삭제할 수 있습니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-2">
+            {modalAttachments.map((f, i) => (
+              <div key={f.id} className="flex items-center gap-2 rounded-md border bg-muted/50 p-2">
+                {getFileIcon(f.type)}
+                <div className="flex-1">
+                  <div className="text-xs font-semibold">{f.name}</div>
+                  <div className="text-[10px] text-muted-foreground">{f.type} · {f.size}</div>
+                </div>
+                <Button variant="outline" size="sm" className="h-6 text-[10px] text-destructive" onClick={() => setModalAttachments((p) => p.filter((_, idx) => idx !== i))}>삭제</Button>
+              </div>
+            ))}
+            <div
+              className="cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors hover:border-primary hover:bg-accent/50"
+              onClick={() => {
+                const name = prompt("파일명 (예: photo.jpg, drawing.dwg)");
+                if (!name) return;
+                setModalAttachments((p) => [...p, { id: Date.now(), name, type: getFileType(name), size: `${(Math.random() * 10 + 0.5).toFixed(1)}MB` }]);
+              }}
+            >
+              <Upload className="mx-auto h-5 w-5 text-muted-foreground" />
+              <div className="mt-1 text-xs text-muted-foreground">클릭하여 파일 추가</div>
+            </div>
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setAttModalOpen(false)} className="h-8 text-xs">닫기</Button>
+            <Button onClick={saveAttModal} className="h-8 text-xs">저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 구매요청 모달 */}
+      <Dialog open={prModalOpen} onOpenChange={setPrModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="text-base"><ShoppingCart className="mr-1.5 inline h-4 w-4" />구매요청 관리</DialogTitle>
+            <DialogDescription className="text-xs">구매요청을 등록하고 관리합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="grid grid-cols-2 gap-2">
+              <div>
+                <Label className="text-xs">자재명 *</Label>
+                <Input value={prForm.item} onChange={(e) => setPrForm((p) => ({ ...p, item: e.target.value }))} placeholder="예: LM가이드 HSR15-R" className="h-7 text-xs" />
+              </div>
+              <div className="grid grid-cols-2 gap-1">
+                <div>
+                  <Label className="text-xs">수량</Label>
+                  <Input value={prForm.qty} onChange={(e) => setPrForm((p) => ({ ...p, qty: e.target.value }))} type="number" className="h-7 text-xs" min={1} />
+                </div>
+                <div>
+                  <Label className="text-xs">단위</Label>
+                  <Select value={prForm.unit} onValueChange={(v) => setPrForm((p) => ({ ...p, unit: v }))}>
+                    <SelectTrigger className="h-7 text-xs" size="xs"><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      {["EA", "SET", "BOX", "M", "KG"].map((u) => (<SelectItem key={u} value={u}>{u}</SelectItem>))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">사유</Label>
+              <Input value={prForm.reason} onChange={(e) => setPrForm((p) => ({ ...p, reason: e.target.value }))} placeholder="구매 사유 입력" className="h-7 text-xs" />
+            </div>
+            <div className="flex items-end gap-2">
+              <div className="flex-1">
+                <Label className="text-xs">상태</Label>
+                <Select value={prForm.status} onValueChange={(v) => setPrForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-7 text-xs" size="xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {["요청", "견적중", "발주완료", "입고완료"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <Button size="sm" className="h-7 text-xs" onClick={() => {
+                if (!prForm.item.trim()) return;
+                setModalPurchaseReqs((p) => [...p, { id: Date.now(), item: prForm.item.trim(), qty: parseInt(prForm.qty) || 1, unit: prForm.unit, reason: prForm.reason, status: prForm.status }]);
+                setPrForm((p) => ({ ...p, item: "", reason: "" }));
+              }}>
+                <Plus className="mr-0.5 h-3 w-3" />추가
+              </Button>
+            </div>
+            <div className="text-xs font-semibold">등록된 구매요청 ({modalPurchaseReqs.length})</div>
+            {modalPurchaseReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없어요.</div>}
+            {modalPurchaseReqs.map((pr, i) => (
+              <div key={pr.id} className="flex items-center gap-2 rounded-md border bg-muted/50 p-2">
+                <ShoppingCart className="h-3.5 w-3.5" />
+                <strong className="text-xs">{pr.item}</strong>
+                <span className="text-[10px] text-muted-foreground">{pr.qty} {pr.unit}</span>
+                {pr.reason && <span className="text-[10px] text-muted-foreground">{pr.reason}</span>}
+                <Badge className={cn("text-[9px]", PR_STATUS_STYLES[pr.status])}>{pr.status}</Badge>
+                <Button variant="ghost" size="sm" className="ml-auto h-5 w-5 p-0 opacity-30 hover:opacity-100" onClick={() => setModalPurchaseReqs((p) => p.filter((_, idx) => idx !== i))}>
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
+            ))}
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setPrModalOpen(false)} className="h-8 text-xs">닫기</Button>
+            <Button onClick={savePrModal} className="h-8 text-xs">저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 협조요청 모달 */}
+      <Dialog open={crModalOpen} onOpenChange={setCrModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="text-base"><Handshake className="mr-1.5 inline h-4 w-4" />협조요청 관리</DialogTitle>
+            <DialogDescription className="text-xs">협조요청을 등록하고 관리합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <Label className="text-xs">요청 제목 *</Label>
+              <Input value={crForm.title} onChange={(e) => setCrForm((p) => ({ ...p, title: e.target.value }))} placeholder="협조 요청 제목" className="h-7 text-xs" />
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <div>
+                <Label className="text-xs">대상자 *</Label>
+                <Select value={crForm.toUser} onValueChange={(v) => setCrForm((p) => ({ ...p, toUser: v }))}>
+                  <SelectTrigger className="h-7 text-xs" size="xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {USERS.filter((u) => u !== currentUser).map((u) => (<SelectItem key={u} value={u}>{u} ({USER_INFO[u].role})</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">기한</Label>
+                <Input type="date" value={crForm.dueDate} onChange={(e) => setCrForm((p) => ({ ...p, dueDate: e.target.value }))} className="h-7 text-xs" />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">요청 내용</Label>
+              <Textarea value={crForm.desc} onChange={(e) => setCrForm((p) => ({ ...p, desc: e.target.value }))} placeholder="상세 요청 내용" className="min-h-[50px] text-xs" rows={2} />
+            </div>
+            <div className="text-right">
+              <Button size="sm" className="h-7 text-xs" onClick={() => {
+                if (!crForm.title.trim() || !crForm.toUser) return;
+                setModalCoopReqs((p) => [...p, { id: `CR-${Date.now()}`, toUser: crForm.toUser, toDept: USER_INFO[crForm.toUser]?.role || "", title: crForm.title.trim(), desc: crForm.desc, status: "요청", dueDate: crForm.dueDate, responses: [] }]);
+                setCrForm((p) => ({ ...p, title: "", desc: "" }));
+              }}>
+                <Plus className="mr-0.5 h-3 w-3" />추가
+              </Button>
+            </div>
+            <div className="text-xs font-semibold">등록된 협조요청 ({modalCoopReqs.length})</div>
+            {modalCoopReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없어요.</div>}
+            {modalCoopReqs.map((cr, i) => (
+              <div key={cr.id} className="space-y-1 rounded-md border bg-muted/50 p-2">
+                <div className="flex items-center gap-2">
+                  <Handshake className="h-3.5 w-3.5" />
+                  <strong className="flex-1 text-xs">{cr.title}</strong>
+                  <span className="text-[10px] text-muted-foreground">{cr.toUser} ({cr.toDept})</span>
+                  <Badge className={cn("text-[9px]", CR_STATUS_STYLES[cr.status])}>{cr.status}</Badge>
+                  <Button variant="ghost" size="sm" className="h-5 w-5 p-0 opacity-30 hover:opacity-100" onClick={() => setModalCoopReqs((p) => p.filter((_, idx) => idx !== i))}>
+                    <Trash2 className="h-3 w-3" />
+                  </Button>
+                </div>
+                {cr.desc && <div className="pl-5 text-[11px] text-muted-foreground">{cr.desc}</div>}
+                <div className="pl-5 text-[10px] text-muted-foreground">기한: {cr.dueDate}</div>
+                {(cr.responses || []).map((r, ri) => (
+                  <div key={ri} className="pl-5 text-[10px] text-muted-foreground">
+                    <strong className="text-primary">{r.user}</strong>: {r.content} <span className="text-muted-foreground">({r.date})</span>
+                  </div>
+                ))}
+                {cr.toUser === currentUser && cr.status !== "완료" && CR_NEXT[cr.status] && (
+                  <div className="pl-5">
+                    <Button size="sm" className="h-5 px-2 text-[10px]" onClick={() => {
+                      setModalCoopReqs((p) => p.map((c, idx) => idx === i ? { ...c, status: CR_NEXT[c.status] || c.status } : c));
+                    }}>
+                      {CR_NEXT[cr.status]}
+                    </Button>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setCrModalOpen(false)} className="h-8 text-xs">닫기</Button>
+            <Button onClick={saveCrModal} className="h-8 text-xs">저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+// ========== 수행기록 렌더 서브컴포넌트 ==========
+interface RenderLogsProps {
+  title: string;
+  logs: (WorkLog & { _idx: number })[];
+  editingLogIdx: number;
+  editForm: { startDt: string; endDt: string; desc: string };
+  setEditForm: React.Dispatch<React.SetStateAction<{ startDt: string; endDt: string; desc: string }>>;
+  onStartEdit: (idx: number) => void;
+  onStartNew: () => void;
+  onSave: (logIdx: number) => void;
+  onCancel: () => void;
+  onDelete: (idx: number) => void;
+  onOpenAtt: (idx: number) => void;
+  onOpenPr: (idx: number) => void;
+  onOpenCr: (idx: number) => void;
+}
+
+function RenderLogs({ title, logs, editingLogIdx, editForm, setEditForm, onStartEdit, onStartNew, onSave, onCancel, onDelete, onOpenAtt, onOpenPr, onOpenCr }: RenderLogsProps) {
+  return (
+    <div>
+      {logs.length === 0 && editingLogIdx !== -2 && (
+        <div className="flex flex-col items-center justify-center gap-1 py-8 text-muted-foreground">
+          <FileEdit className="h-6 w-6" />
+          <span className="text-xs">기록이 없어요</span>
+        </div>
+      )}
+      {logs.map((log) => {
+        const idx = log._idx;
+        if (editingLogIdx === idx) {
+          return (
+            <EditLogRow
+              key={idx}
+              logIdx={idx}
+              editForm={editForm}
+              setEditForm={setEditForm}
+              onSave={onSave}
+              onCancel={onCancel}
+              onOpenAtt={onOpenAtt}
+              onOpenPr={onOpenPr}
+              onOpenCr={onOpenCr}
+              attCount={(log.attachments || []).length}
+              prCount={(log.purchaseReqs || []).length}
+              crCount={(log.coopReqs || []).length}
+            />
+          );
+        }
+        const attC = (log.attachments || []).length;
+        const prC = (log.purchaseReqs || []).length;
+        const crC = (log.coopReqs || []).length;
+        return (
+          <div
+            key={idx}
+            className="flex cursor-pointer items-center gap-1.5 border-b px-2.5 py-1.5 text-xs transition-colors hover:bg-accent/50"
+            onClick={() => onStartEdit(idx)}
+            title="클릭하여 수정"
+          >
+            <span className="min-w-[75px] text-[11px] text-muted-foreground">{fmtDtShort(log.startDt)}~{log.endDt.substring(11, 16)}</span>
+            <Badge variant="outline" className="h-4 min-w-[26px] justify-center px-1 text-[10px] font-bold text-primary">{log.hours}h</Badge>
+            <span className="min-w-0 flex-1 truncate">{log.desc}</span>
+            <div className="flex gap-1">
+              {attC > 0 && (
+                <Badge variant="outline" className="h-4 cursor-pointer gap-0.5 px-1 text-[9px] hover:border-primary" onClick={(e) => { e.stopPropagation(); onOpenAtt(idx); }}>
+                  <Paperclip className="h-2.5 w-2.5" />{attC}
+                </Badge>
+              )}
+              {prC > 0 && (
+                <Badge className="h-4 cursor-pointer gap-0.5 bg-warning/10 px-1 text-[9px] text-warning hover:bg-warning/20" onClick={(e) => { e.stopPropagation(); onOpenPr(idx); }}>
+                  <ShoppingCart className="h-2.5 w-2.5" />{prC}
+                </Badge>
+              )}
+              {crC > 0 && (
+                <Badge className="h-4 cursor-pointer gap-0.5 bg-info/10 px-1 text-[9px] text-info hover:bg-info/20" onClick={(e) => { e.stopPropagation(); onOpenCr(idx); }}>
+                  <Handshake className="h-2.5 w-2.5" />{crC}
+                </Badge>
+              )}
+            </div>
+            <Button variant="ghost" size="sm" className="h-5 w-5 p-0 opacity-20 hover:opacity-100" onClick={(e) => { e.stopPropagation(); onDelete(idx); }}>
+              <Trash2 className="h-3 w-3" />
+            </Button>
+          </div>
+        );
+      })}
+      {editingLogIdx === -2 && (
+        <EditLogRow
+          logIdx={-1}
+          editForm={editForm}
+          setEditForm={setEditForm}
+          onSave={onSave}
+          onCancel={onCancel}
+          onOpenAtt={onOpenAtt}
+          onOpenPr={onOpenPr}
+          onOpenCr={onOpenCr}
+          attCount={0}
+          prCount={0}
+          crCount={0}
+        />
+      )}
+      <Button variant="outline" size="sm" className="m-2 h-6 border-dashed text-[10px] text-muted-foreground" onClick={onStartNew}>
+        <Plus className="mr-0.5 h-3 w-3" />기록 추가
+      </Button>
+    </div>
+  );
+}
+
+// ========== 편집 행 ==========
+interface EditLogRowProps {
+  logIdx: number;
+  editForm: { startDt: string; endDt: string; desc: string };
+  setEditForm: React.Dispatch<React.SetStateAction<{ startDt: string; endDt: string; desc: string }>>;
+  onSave: (logIdx: number) => void;
+  onCancel: () => void;
+  onOpenAtt: (idx: number) => void;
+  onOpenPr: (idx: number) => void;
+  onOpenCr: (idx: number) => void;
+  attCount: number;
+  prCount: number;
+  crCount: number;
+}
+
+function EditLogRow({ logIdx, editForm, setEditForm, onSave, onCancel, onOpenAtt, onOpenPr, onOpenCr, attCount, prCount, crCount }: EditLogRowProps) {
+  const hours = calcHours(editForm.startDt, editForm.endDt);
+  return (
+    <div className="space-y-1.5 rounded-md border border-primary/30 bg-primary/5 p-2.5">
+      <div className="flex flex-wrap items-center gap-1.5">
+        <Input type="datetime-local" value={editForm.startDt} onChange={(e) => setEditForm((p) => ({ ...p, startDt: e.target.value }))} className="h-6 w-[155px] text-[11px]" />
+        <span className="text-xs text-muted-foreground">~</span>
+        <Input type="datetime-local" value={editForm.endDt} onChange={(e) => setEditForm((p) => ({ ...p, endDt: e.target.value }))} className="h-6 w-[155px] text-[11px]" />
+        <span className="min-w-[30px] text-xs font-semibold text-primary">{hours}h</span>
+      </div>
+      <Textarea
+        value={editForm.desc}
+        onChange={(e) => setEditForm((p) => ({ ...p, desc: e.target.value }))}
+        placeholder="수행 내용을 입력하세요..."
+        className="min-h-[32px] text-xs"
+        rows={1}
+      />
+      <div className="flex items-center justify-between">
+        <div className="flex gap-1">
+          <Button variant="outline" size="sm" className="h-5 px-1.5 text-[9px]" onClick={() => onOpenAtt(logIdx)}>
+            <Paperclip className="mr-0.5 h-2.5 w-2.5" />첨부{attCount > 0 && ` (${attCount})`}
+          </Button>
+          <Button variant="outline" size="sm" className="h-5 px-1.5 text-[9px]" onClick={() => onOpenPr(logIdx)}>
+            <ShoppingCart className="mr-0.5 h-2.5 w-2.5" />구매{prCount > 0 && ` (${prCount})`}
+          </Button>
+          <Button variant="outline" size="sm" className="h-5 px-1.5 text-[9px]" onClick={() => onOpenCr(logIdx)}>
+            <Handshake className="mr-0.5 h-2.5 w-2.5" />협조{crCount > 0 && ` (${crCount})`}
+          </Button>
+        </div>
+        <div className="flex gap-1">
+          <Button variant="outline" size="sm" className="h-5 px-2 text-[10px]" onClick={onCancel}>취소</Button>
+          <Button size="sm" className="h-5 bg-success px-2 text-[10px] hover:bg-success/90" onClick={() => onSave(logIdx)}>저장</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/design/project/page.tsx b/frontend/app/(main)/COMPANY_30/design/project/page.tsx
new file mode 100644
index 00000000..7e66b696
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/design/project/page.tsx
@@ -0,0 +1,1501 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Textarea } from "@/components/ui/textarea";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Plus,
+  Save,
+  Pencil,
+  Trash2,
+  ChevronRight,
+  FolderOpen,
+  Rocket,
+  ClipboardList,
+  BarChart3,
+  Users,
+  FileText,
+  Loader2,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  getProjectList,
+  createProject,
+  updateProject,
+  getTasksByProject,
+  createTask,
+  updateTask,
+  deleteTask,
+} from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// --- Types ---
+type ProjectStatus = "진행중" | "계획" | "보류" | "완료";
+type TaskStatus = "대기" | "진행중" | "검토중" | "완료";
+type RelationType = "sub" | "depend" | "related";
+
+interface WorkLog {
+  date: string;
+  hours: number;
+  desc: string;
+  progressBefore: number;
+  progressAfter: number;
+  author: string;
+}
+
+interface Issue {
+  id: number;
+  title: string;
+  status: string;
+  priority: string;
+  desc: string;
+  registeredBy: string;
+  registeredDate: string;
+  resolvedDate?: string;
+}
+
+interface Task {
+  id?: string;
+  name: string;
+  category: string;
+  assignee: string;
+  start: string;
+  end: string;
+  status: TaskStatus;
+  progress: number;
+  remark: string;
+  workLogs: WorkLog[];
+  issues: Issue[];
+}
+
+interface Project {
+  id: string;
+  projectNo: string;
+  name: string;
+  status: ProjectStatus;
+  pm: string;
+  customer: string;
+  startDate: string;
+  endDate: string;
+  sourceNo: string;
+  desc: string;
+  progress: number;
+  parentId: string | null;
+  relation: RelationType | null;
+  tasks: Task[];
+}
+
+// API 응답(snake_case) -> 프론트(camelCase) 매핑
+function mapWorkLog(w: any): WorkLog {
+  const dt = w.start_dt || w.date;
+  const date = typeof dt === "string" ? dt.split("T")[0] : "";
+  return {
+    date,
+    hours: Number(w.hours) || 0,
+    desc: w.description || w.desc || "",
+    progressBefore: Number(w.progress_before) || 0,
+    progressAfter: Number(w.progress_after) || 0,
+    author: w.author || "",
+  };
+}
+
+function mapIssue(i: any): Issue {
+  return {
+    id: i.id,
+    title: i.title || "",
+    status: i.status || "",
+    priority: i.priority || "",
+    desc: i.description || i.desc || "",
+    registeredBy: i.registered_by || "",
+    registeredDate: i.registered_date || "",
+    resolvedDate: i.resolved_date,
+  };
+}
+
+function mapTask(t: any): Task {
+  const workLogs = (t.work_logs || t.workLogs || []).map(mapWorkLog);
+  const issues = (t.issues || []).map(mapIssue);
+  const start = t.start_date || t.start || "";
+  const end = t.end_date || t.end || "";
+  return {
+    id: t.id,
+    name: t.name || "",
+    category: t.category || "기구설계",
+    assignee: t.assignee || "",
+    start: typeof start === "string" ? start.split("T")[0] : "",
+    end: typeof end === "string" ? end.split("T")[0] : "",
+    status: (t.status || "대기") as TaskStatus,
+    progress: Number(t.progress) || 0,
+    remark: t.remark || "",
+    workLogs,
+    issues,
+  };
+}
+
+function mapProject(p: any): Project {
+  const tasks = (p.tasks || []).map(mapTask);
+  return {
+    id: p.id,
+    projectNo: p.project_no || p.id,
+    name: p.name || "",
+    status: (p.status || "계획") as ProjectStatus,
+    pm: p.pm || "",
+    customer: p.customer || "",
+    startDate: (p.start_date || "").toString().split("T")[0],
+    endDate: (p.end_date || "").toString().split("T")[0],
+    sourceNo: p.source_no || "",
+    desc: p.description || p.desc || "",
+    progress: Number(p.progress) || 0,
+    parentId: p.parent_id || null,
+    relation: (p.relation_type || p.relation) as RelationType | null,
+    tasks,
+  };
+}
+
+// --- 상태 색상 (CSS 변수 기반) ---
+const getStatusColor = (status: ProjectStatus) => {
+  switch (status) {
+    case "진행중":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "계획":
+      return "bg-muted text-muted-foreground border-border";
+    case "보류":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "완료":
+      return "bg-primary/15 text-primary border-primary/25";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getTaskStatusColor = (status: string) => {
+  switch (status) {
+    case "대기":
+      return "bg-muted text-muted-foreground";
+    case "진행중":
+      return "bg-primary/10 text-primary";
+    case "검토중":
+      return "bg-destructive/10 text-destructive";
+    case "완료":
+      return "bg-primary/15 text-primary";
+    case "지연":
+      return "bg-destructive/10 text-destructive";
+    default:
+      return "bg-muted text-muted-foreground";
+  }
+};
+
+const getRelationLabel = (r: RelationType | null) => {
+  if (!r) return "";
+  const m: Record<RelationType, string> = {
+    sub: "하위",
+    depend: "종속",
+    related: "연관",
+  };
+  return m[r];
+};
+
+const getRelationColor = (r: RelationType | null) => {
+  if (!r) return "";
+  const m: Record<RelationType, string> = {
+    sub: "bg-primary/10 text-primary",
+    depend: "bg-destructive/10 text-destructive",
+    related: "bg-secondary text-secondary-foreground",
+  };
+  return m[r];
+};
+
+const categoryIcons: Record<string, string> = {
+  기구설계: "⚙️",
+  전장설계: "⚡",
+  SW개발: "💻",
+  "구매/조달": "📦",
+  "조립/시운전": "🔧",
+  "검토/승인": "✅",
+};
+
+const progressColor = (p: number) =>
+  p >= 80 ? "bg-primary" : p >= 40 ? "bg-primary/70" : p > 0 ? "bg-primary/40" : "bg-muted-foreground/30";
+
+const progressTextColor = (p: number) =>
+  p >= 80 ? "text-primary" : p >= 40 ? "text-primary/80" : p > 0 ? "text-primary/60" : "text-muted-foreground";
+
+// --- Helper functions ---
+function getChildren(projects: Project[], parentId: string): Project[] {
+  return projects.filter((p) => p.parentId === parentId);
+}
+
+function getAllDescendants(projects: Project[], parentId: string): Project[] {
+  const children = getChildren(projects, parentId);
+  let all = [...children];
+  children.forEach((c) => {
+    all = all.concat(getAllDescendants(projects, c.id));
+  });
+  return all;
+}
+
+// --- Grid Columns ---
+const PROJECT_GRID_COLUMNS = [
+  { key: "project_no", label: "프로젝트번호" },
+  { key: "status", label: "상태" },
+  { key: "name", label: "프로젝트명" },
+  { key: "pm", label: "PM" },
+  { key: "customer", label: "고객" },
+  { key: "start_date", label: "시작일" },
+  { key: "end_date", label: "종료예정" },
+  { key: "progress", label: "진행률" },
+  { key: "source_no", label: "원접수번호" },
+];
+
+// --- Component ---
+export default function DesignProjectPage() {
+  const ts = useTableSettings("c16-design-project", "dsn_project", PROJECT_GRID_COLUMNS);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>({});
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 상세 탭
+  const [detailTab, setDetailTab] = useState("wbs");
+
+  // 모달
+  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
+  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
+  const [isTaskDetailOpen, setIsTaskDetailOpen] = useState(false);
+  const [editingTaskIdx, setEditingTaskIdx] = useState(-1);
+  const [taskDetailIdx, setTaskDetailIdx] = useState(-1);
+  const [taskDetailTab, setTaskDetailTab] = useState("log");
+
+  // 프로젝트 폼
+  const [formProjectId, setFormProjectId] = useState("");
+  const [formProjectNo, setFormProjectNo] = useState("");
+  const [formName, setFormName] = useState("");
+  const [formStartDate, setFormStartDate] = useState("");
+  const [formEndDate, setFormEndDate] = useState("");
+  const [formPM, setFormPM] = useState("");
+  const [formCustomer, setFormCustomer] = useState("");
+  const [formSourceNo, setFormSourceNo] = useState("");
+  const [formDesc, setFormDesc] = useState("");
+  const [formParentId, setFormParentId] = useState("");
+  const [formRelation, setFormRelation] = useState<RelationType>("sub");
+
+  // 태스크 폼
+  const [tName, setTName] = useState("");
+  const [tCategory, setTCategory] = useState("기구설계");
+  const [tAssignee, setTAssignee] = useState("");
+  const [tStart, setTStart] = useState("");
+  const [tEnd, setTEnd] = useState("");
+  const [tStatus, setTStatus] = useState<TaskStatus>("대기");
+  const [tProgress, setTProgress] = useState(0);
+  const [tRemark, setTRemark] = useState("");
+
+  const fetchProjects = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await getProjectList();
+      if (res.success && res.data) {
+        const mapped = (res.data as any[]).map(mapProject);
+        setProjects(mapped);
+      } else {
+        setProjects([]);
+      }
+    } catch {
+      toast.error("프로젝트 목록을 불러오는데 실패했습니다.");
+      setProjects([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchProjects();
+  }, [fetchProjects]);
+
+  const fetchTaskDetails = useCallback(async (projectId: string) => {
+    try {
+      const res = await getTasksByProject(projectId);
+      if (res.success && res.data) {
+        const tasks = (res.data as any[]).map(mapTask);
+        setProjects((prev) =>
+          prev.map((p) => (p.id === projectId ? { ...p, tasks } : p))
+        );
+      }
+    } catch {
+      toast.error("업무 상세를 불러오는데 실패했습니다.");
+    }
+  }, []);
+
+  // snake_case → camelCase 매핑 (DynamicSearchFilter의 columnName은 snake_case)
+  const fieldMap: Record<string, string> = {
+    project_no: "projectNo",
+    start_date: "startDate",
+    end_date: "endDate",
+    source_no: "sourceNo",
+  };
+  const getFieldValue = (obj: any, colName: string): string => {
+    const key = fieldMap[colName] || colName;
+    const val = obj[key];
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
+  // 필터링
+  const filteredProjects = useMemo(() => {
+    if (searchFilters.length === 0) return projects;
+
+    const matched = new Set<string>();
+    projects.forEach((p) => {
+      let pass = true;
+      for (const f of searchFilters) {
+        const val = getFieldValue(p, f.columnName);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) { pass = false; break; }
+        } else if (f.operator === "equals") {
+          if (val !== f.value) { pass = false; break; }
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) { pass = false; break; }
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) { pass = false; break; }
+          if (to && val > to) { pass = false; break; }
+        }
+      }
+      if (pass) matched.add(p.id);
+    });
+
+    const result = new Set(matched);
+    matched.forEach((id) => {
+      getAllDescendants(projects, id).forEach((d) => result.add(d.id));
+    });
+    matched.forEach((id) => {
+      let current = projects.find((p) => p.id === id);
+      while (current?.parentId) {
+        result.add(current.parentId);
+        current = projects.find((p) => p.id === current!.parentId);
+      }
+    });
+
+    return projects.filter((p) => result.has(p.id));
+  }, [projects, searchFilters]);
+
+  const selectedProject = useMemo(
+    () => projects.find((p) => p.id === selectedId),
+    [projects, selectedId]
+  );
+
+  // 트리 렌더
+  const buildTreeRows = useCallback(
+    (parentId: string | null, depth: number): { project: Project; depth: number }[] => {
+      const children = filteredProjects.filter((p) => p.parentId === parentId);
+      const rows: { project: Project; depth: number }[] = [];
+      children.forEach((child) => {
+        rows.push({ project: child, depth });
+        if (expandedIds[child.id] !== false) {
+          rows.push(...buildTreeRows(child.id, depth + 1));
+        }
+      });
+      return rows;
+    },
+    [filteredProjects, expandedIds]
+  );
+
+  const treeRows = useMemo(() => buildTreeRows(null, 0), [buildTreeRows]);
+
+  const toggleExpand = (id: string) => {
+    setExpandedIds((prev) => ({
+      ...prev,
+      [id]: prev[id] === undefined ? false : !prev[id],
+    }));
+  };
+
+
+  // --- 프로젝트 모달 ---
+  const openProjectModal = (editProject?: Project, presetParentId?: string) => {
+    if (editProject) {
+      setFormProjectId(editProject.id);
+      setFormProjectNo(editProject.projectNo);
+      setFormName(editProject.name);
+      setFormStartDate(editProject.startDate);
+      setFormEndDate(editProject.endDate);
+      setFormPM(editProject.pm);
+      setFormCustomer(editProject.customer);
+      setFormSourceNo(editProject.sourceNo);
+      setFormDesc(editProject.desc);
+      setFormParentId(editProject.parentId || "");
+      setFormRelation((editProject.relation as RelationType) || "sub");
+    } else {
+      const maxNum = projects.reduce((max, p) => {
+        const match = p.projectNo?.match(/PJ-\d{4}-(\d+)/);
+        const num = match ? parseInt(match[1], 10) : 0;
+        return num > max ? num : max;
+      }, 0);
+      const year = new Date().getFullYear();
+      const newProjectNo = `PJ-${year}-${String(maxNum + 1).padStart(4, "0")}`;
+      setFormProjectId("");
+      setFormProjectNo(newProjectNo);
+      setFormName("");
+      setFormStartDate(new Date().toISOString().split("T")[0]);
+      setFormEndDate("");
+      setFormPM("");
+      setFormCustomer("");
+      setFormSourceNo("");
+      setFormDesc("");
+      setFormParentId(presetParentId || "");
+      setFormRelation("sub");
+
+      if (presetParentId) {
+        const parent = projects.find((p) => p.id === presetParentId);
+        if (parent) {
+          setFormCustomer(parent.customer);
+          setFormEndDate(parent.endDate);
+        }
+      }
+    }
+    setIsProjectModalOpen(true);
+  };
+
+  const handleSaveProject = async () => {
+    if (!formName.trim()) { toast.error("프로젝트명을 입력하세요."); return; }
+    if (!formStartDate) { toast.error("시작일을 입력하세요."); return; }
+    if (!formEndDate) { toast.error("종료예정일을 입력하세요."); return; }
+    if (!formPM) { toast.error("PM을 선택하세요."); return; }
+
+    const existing = projects.find((p) => p.id === formProjectId);
+    const payload = {
+      project_no: formProjectNo || formProjectId,
+      name: formName,
+      status: (existing?.status || "계획") as ProjectStatus,
+      pm: formPM,
+      customer: formCustomer,
+      start_date: formStartDate,
+      end_date: formEndDate,
+      source_no: formSourceNo,
+      description: formDesc,
+      progress: existing?.progress ?? 0,
+      parent_id: formParentId || null,
+      relation_type: formParentId ? formRelation : null,
+    };
+
+    const isEdit = !!formProjectId;
+    try {
+      if (isEdit) {
+        const res = await updateProject(formProjectId, payload);
+        if (res.success) {
+          toast.success("프로젝트가 수정되었습니다.");
+          await fetchProjects();
+          setIsProjectModalOpen(false);
+        } else {
+          toast.error(res.message || "프로젝트 수정에 실패했습니다.");
+        }
+      } else {
+        const res = await createProject(payload);
+        if (res.success && res.data) {
+          toast.success("프로젝트가 등록되었습니다.");
+          await fetchProjects();
+          if (formParentId) {
+            setExpandedIds((prev) => ({ ...prev, [formParentId]: true }));
+          }
+          const projectId = (res.data as any).id;
+          setSelectedId(projectId);
+          fetchTaskDetails(projectId);
+          setIsProjectModalOpen(false);
+        } else {
+          toast.error(res.message || "프로젝트 등록에 실패했습니다.");
+        }
+      }
+    } catch {
+      toast.error("프로젝트 저장에 실패했습니다.");
+    }
+  };
+
+  // --- 태스크 모달 ---
+  const openTaskModal = (idx?: number) => {
+    if (idx !== undefined && selectedProject) {
+      const t = selectedProject.tasks[idx];
+      setEditingTaskIdx(idx);
+      setTName(t.name);
+      setTCategory(t.category);
+      setTAssignee(t.assignee);
+      setTStart(t.start);
+      setTEnd(t.end);
+      setTStatus(t.status);
+      setTProgress(t.progress);
+      setTRemark(t.remark);
+    } else {
+      setEditingTaskIdx(-1);
+      setTName("");
+      setTCategory("기구설계");
+      setTAssignee("");
+      setTStart(selectedProject?.startDate || "");
+      setTEnd(selectedProject?.endDate || "");
+      setTStatus("대기");
+      setTProgress(0);
+      setTRemark("");
+    }
+    setIsTaskModalOpen(true);
+  };
+
+  const handleSaveTask = async () => {
+    if (!tName.trim()) { toast.error("업무명을 입력하세요."); return; }
+    if (!tAssignee) { toast.error("담당자를 선택하세요."); return; }
+    if (!tStart || !tEnd) { toast.error("시작일과 종료일을 입력하세요."); return; }
+    if (!selectedId) return;
+
+    const payload = {
+      name: tName,
+      category: tCategory,
+      assignee: tAssignee,
+      start_date: tStart,
+      end_date: tEnd,
+      status: tStatus,
+      progress: tProgress,
+      priority: "보통",
+      remark: tRemark,
+      sort_order: String(editingTaskIdx >= 0 ? editingTaskIdx : selectedProject?.tasks.length ?? 0),
+    };
+
+    try {
+      if (editingTaskIdx >= 0 && selectedProject?.tasks[editingTaskIdx]?.id) {
+        const taskId = selectedProject.tasks[editingTaskIdx].id!;
+        const res = await updateTask(taskId, payload);
+        if (res.success) {
+          toast.success("업무가 수정되었습니다.");
+          await fetchTaskDetails(selectedId);
+          setIsTaskModalOpen(false);
+        } else {
+          toast.error(res.message || "업무 수정에 실패했습니다.");
+        }
+      } else {
+        const res = await createTask(selectedId, payload);
+        if (res.success) {
+          toast.success("업무가 등록되었습니다.");
+          await fetchTaskDetails(selectedId);
+          await fetchProjects();
+          setIsTaskModalOpen(false);
+        } else {
+          toast.error(res.message || "업무 등록에 실패했습니다.");
+        }
+      }
+    } catch {
+      toast.error("업무 저장에 실패했습니다.");
+    }
+  };
+
+  const handleDeleteTask = async (idx: number) => {
+    if (!selectedProject || !selectedId) return;
+    const task = selectedProject.tasks[idx];
+    if (!task) return;
+    if (!confirm(`"${task.name}" 업무를 삭제하시겠습니까?`)) return;
+
+    const taskId = task.id;
+    if (!taskId) {
+      toast.error("삭제할 업무 정보를 찾을 수 없습니다.");
+      return;
+    }
+
+    try {
+      const res = await deleteTask(taskId);
+      if (res.success) {
+        toast.success("업무가 삭제되었습니다.");
+        await fetchTaskDetails(selectedId);
+        await fetchProjects();
+      } else {
+        toast.error(res.message || "업무 삭제에 실패했습니다.");
+      }
+    } catch {
+      toast.error("업무 삭제에 실패했습니다.");
+    }
+  };
+
+  // --- 상세 패널 계산 ---
+  const childProjects = useMemo(
+    () => (selectedId ? getChildren(projects, selectedId) : []),
+    [projects, selectedId]
+  );
+
+  const taskStats = useMemo(() => {
+    if (!selectedProject) return { total: 0, completed: 0, inProgress: 0, delayed: 0 };
+    const total = selectedProject.tasks.length;
+    const completed = selectedProject.tasks.filter((t) => t.status === "완료").length;
+    const inProgress = selectedProject.tasks.filter((t) => t.status === "진행중").length;
+    const delayed = selectedProject.tasks.filter(
+      (t) => t.status !== "완료" && new Date(t.end) < new Date()
+    ).length;
+    return { total, completed, inProgress, delayed };
+  }, [selectedProject]);
+
+  // 카테고리별 그룹핑 (WBS)
+  const tasksByCategory = useMemo(() => {
+    if (!selectedProject) return {};
+    const groups: Record<string, (Task & { _idx: number })[]> = {};
+    selectedProject.tasks.forEach((t, i) => {
+      if (!groups[t.category]) groups[t.category] = [];
+      groups[t.category].push({ ...t, _idx: i });
+    });
+    return groups;
+  }, [selectedProject]);
+
+  // 팀원별 그룹핑
+  const teamMembers = useMemo(() => {
+    if (!selectedProject) return {};
+    const members: Record<string, Task[]> = {};
+    selectedProject.tasks.forEach((t) => {
+      if (!members[t.assignee]) members[t.assignee] = [];
+      members[t.assignee].push(t);
+    });
+    return members;
+  }, [selectedProject]);
+
+  const parentProject = useMemo(
+    () => (selectedProject?.parentId ? projects.find((p) => p.id === selectedProject.parentId) : null),
+    [projects, selectedProject]
+  );
+
+  // 태스크 상세
+  const detailTask = useMemo(
+    () => (selectedProject && taskDetailIdx >= 0 ? selectedProject.tasks[taskDetailIdx] : null),
+    [selectedProject, taskDetailIdx]
+  );
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-4rem)] gap-3 p-3">
+      {/* 검색 필터 */}
+      <div className="shrink-0">
+        <DynamicSearchFilter
+          tableName="dsn_project"
+          filterId="c16-design-project"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredProjects.length}
+        />
+      </div>
+
+      {/* 좌우 분할 메인 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 왼쪽: 프로젝트 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold flex items-center gap-2">
+                  프로젝트 목록
+                  <span className="text-xs font-medium text-primary bg-primary/8 border border-primary/15 rounded-md px-1.5 py-0.5">{filteredProjects.length}건</span>
+                </div>
+                <Button size="sm" onClick={() => openProjectModal()}>
+                  <Plus className="w-4 h-4 mr-1.5" /> 프로젝트 등록
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={[
+                    { key: "projectNo", label: "프로젝트번호", width: "w-[160px]", render: (_val: any, row: any) => {
+                      const depth = row._depth ?? 0;
+                      const hasChildren = filteredProjects.some((c) => c.parentId === row.id);
+                      const isExpanded = expandedIds[row.id] !== false;
+                      return (
+                        <div className="flex items-center gap-1" style={{ paddingLeft: depth * 20 }}>
+                          {hasChildren ? (
+                            <button className="p-0.5 rounded hover:bg-muted transition-transform" onClick={(e) => { e.stopPropagation(); toggleExpand(row.id); }}>
+                              <ChevronRight className={cn("w-3.5 h-3.5 text-muted-foreground transition-transform", isExpanded && "rotate-90")} />
+                            </button>
+                          ) : (<span className="w-4" />)}
+                          <span className={cn("font-semibold text-xs", depth === 0 ? "text-primary" : depth === 1 ? "text-primary/80" : "text-primary/60")}>{row.projectNo}</span>
+                          {row.relation && (<span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(row.relation))}>{getRelationLabel(row.relation)}</span>)}
+                        </div>
+                      );
+                    }},
+                    { key: "status", label: "상태", width: "w-[80px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(val))}>{val}</span> },
+                    { key: "name", label: "프로젝트명", width: "w-[200px]", render: (val: any, row: any) => {
+                      const childCount = getAllDescendants(projects, row.id).length;
+                      return (<><span className="font-medium text-sm">{val}</span>{childCount > 0 && <Badge variant="outline" className="ml-1.5 text-[10px] py-0 px-1.5 font-normal"><FolderOpen className="w-3 h-3 mr-0.5" /> {childCount}</Badge>}</>);
+                    }},
+                    { key: "pm", label: "PM", width: "w-[70px]" },
+                    { key: "customer", label: "고객", width: "w-[80px]" },
+                    { key: "startDate", label: "시작일", width: "w-[90px]" },
+                    { key: "endDate", label: "종료예정", width: "w-[90px]" },
+                    { key: "progress", label: "진행률", width: "w-[100px]", align: "center" as const, render: (val: any) => (
+                      <div className="flex items-center gap-1.5">
+                        <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                          <div className={cn("h-full rounded-full transition-all", progressColor(val))} style={{ width: `${val}%` }} />
+                        </div>
+                        <span className={cn("text-[11px] font-medium min-w-[28px] text-right", progressTextColor(val))}>{val}%</span>
+                      </div>
+                    )},
+                    { key: "sourceNo", label: "원접수번호", width: "w-[90px]", render: (val: any) => <span className="text-[13px] text-muted-foreground">{val || "-"}</span> },
+                  ] as EDataTableColumn[]}
+                  data={ts.groupData(treeRows.map(({ project: p, depth }) => ({ ...p, _depth: depth })))}
+                  rowKey={(row) => row.id}
+                  loading={loading}
+                  emptyMessage="조건에 맞는 프로젝트가 없어요"
+                  selectedId={selectedId}
+                  onSelect={(id) => {
+                    if (id) {
+                      setSelectedId(id);
+                      setDetailTab("wbs");
+                      fetchTaskDetails(id);
+                    }
+                  }}
+                  onRowClick={(row) => {
+                    setSelectedId(row.id);
+                    setDetailTab("wbs");
+                    fetchTaskDetails(row.id);
+                  }}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 오른쪽: 상세 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 상세 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                {selectedProject ? (
+                  <div className="text-[13px] font-bold flex items-center gap-2">
+                    {selectedProject.name}
+                    <Badge variant="outline" className="text-[11px] font-normal px-1.5 py-0">{selectedProject.projectNo}</Badge>
+                  </div>
+                ) : (
+                  <div className="text-[13px] font-bold flex items-center gap-2">
+                    <ClipboardList className="w-3.5 h-3.5" /> 프로젝트 상세
+                  </div>
+                )}
+                {selectedProject && (
+                  <div className="flex items-center gap-1.5">
+                    <Button size="sm" variant="default" className="h-7 text-xs" onClick={() => openTaskModal()}>
+                      <Plus className="w-3.5 h-3.5 mr-1" /> 업무 추가
+                    </Button>
+                    <Button size="sm" variant="secondary" className="h-7 text-xs" onClick={() => openProjectModal(undefined, selectedProject.id)}>
+                      <FolderOpen className="w-3.5 h-3.5 mr-1" /> 하위 프로젝트
+                    </Button>
+                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openProjectModal(selectedProject)}>
+                      <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {!selectedId || !selectedProject ? (
+                <div className="flex-1 flex items-center justify-center p-8">
+                  <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-12 py-10 text-center">
+                    <Rocket className="h-10 w-10 text-muted-foreground/40" />
+                    <p className="text-sm text-muted-foreground">좌측에서 프로젝트를 선택해주세요</p>
+                  </div>
+                </div>
+              ) : (
+              <div className="flex-1 overflow-auto p-3 space-y-3">
+                    {/* 상위 프로젝트 링크 */}
+                    {parentProject && (
+                      <div
+                        className="flex items-center gap-2 px-3 py-2 bg-primary/5 rounded-md border-l-[3px] border-primary text-sm cursor-pointer hover:bg-primary/10 transition-colors"
+                        onClick={() => { setSelectedId(parentProject.id); setDetailTab("wbs"); fetchTaskDetails(parentProject.id); }}
+                      >
+                        <span className="text-muted-foreground">상위:</span>
+                        <span className="text-primary font-semibold">{parentProject.projectNo} - {parentProject.name}</span>
+                        {selectedProject.relation && (
+                          <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(selectedProject.relation))}>
+                            {getRelationLabel(selectedProject.relation)}
+                          </span>
+                        )}
+                      </div>
+                    )}
+
+                    {/* 개요 카드 */}
+                    <div className="space-y-1.5">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 현황</span>
+                      <div className="grid grid-cols-5 gap-2">
+                        {[
+                          { label: "전체 업무", value: taskStats.total, color: "text-primary", bg: "bg-primary/5 border-primary/10" },
+                          { label: "완료", value: taskStats.completed, color: "text-primary", bg: "bg-primary/5 border-primary/10" },
+                          { label: "진행중", value: taskStats.inProgress, color: "text-primary/80", bg: "bg-primary/5 border-primary/10" },
+                          { label: "지연", value: taskStats.delayed, color: "text-destructive", bg: "bg-destructive/5 border-destructive/10" },
+                          { label: "하위 프로젝트", value: childProjects.length, color: "text-foreground", bg: "bg-muted/40 border-border" },
+                        ].map((item) => (
+                          <div key={item.label} className={cn("rounded-lg p-2.5 text-center border transition-colors hover:opacity-80", item.bg)}>
+                            <div className="text-[10px] text-muted-foreground mb-0.5">{item.label}</div>
+                            <div className={cn("text-xl font-bold", item.color)}>{item.value}</div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 탭 */}
+                    <Tabs value={detailTab} onValueChange={setDetailTab} className="flex flex-col flex-1 overflow-hidden gap-0">
+                      <TabsList className="bg-card w-full justify-start rounded-none border-b border-border p-0 h-auto shrink-0">
+                        {[
+                          { value: "wbs", icon: <ClipboardList className="w-3.5 h-3.5" />, label: "WBS" },
+                          { value: "gantt", icon: <BarChart3 className="w-3.5 h-3.5" />, label: "간트차트" },
+                          { value: "team", icon: <Users className="w-3.5 h-3.5" />, label: "팀원" },
+                          { value: "subprojects", icon: <FolderOpen className="w-3.5 h-3.5" />, label: `하위(${childProjects.length})` },
+                        ].map((tab) => (
+                          <TabsTrigger
+                            key={tab.value}
+                            value={tab.value}
+                            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                          >
+                            {tab.icon} {tab.label}
+                          </TabsTrigger>
+                        ))}
+                      </TabsList>
+
+                      {/* WBS 탭 */}
+                      <TabsContent value="wbs" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
+                        {selectedProject.tasks.length === 0 ? (
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <ClipboardList className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">등록된 업무가 없어요</span>
+                          </div>
+                        ) : (
+                          <Table>
+                            <TableHeader className="sticky top-0 z-10">
+                              <TableRow className="bg-muted hover:bg-muted">
+                                <TableHead className="w-[180px] text-[11px] uppercase tracking-wide">업무명</TableHead>
+                                <TableHead className="w-[70px] text-[11px] uppercase tracking-wide">담당자</TableHead>
+                                <TableHead className="w-[85px] text-[11px] uppercase tracking-wide">시작일</TableHead>
+                                <TableHead className="w-[85px] text-[11px] uppercase tracking-wide">종료일</TableHead>
+                                <TableHead className="w-[70px] text-center text-[11px] uppercase tracking-wide">상태</TableHead>
+                                <TableHead className="w-[90px] text-center text-[11px] uppercase tracking-wide">진행률</TableHead>
+                                <TableHead className="w-[80px] text-center text-[11px] uppercase tracking-wide">관리</TableHead>
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                              {Object.entries(tasksByCategory).map(([cat, tasks]) => {
+                                const catProg = Math.round(tasks.reduce((s, t) => s + t.progress, 0) / tasks.length);
+                                return (
+                                  <React.Fragment key={cat}>
+                                    <TableRow className="bg-muted/30">
+                                      <TableCell colSpan={5} className="font-semibold text-sm">
+                                        {categoryIcons[cat] || "📋"} {cat}
+                                      </TableCell>
+                                      <TableCell className="text-center">
+                                        <span className={cn("text-xs font-semibold", progressTextColor(catProg))}>{catProg}%</span>
+                                      </TableCell>
+                                      <TableCell />
+                                    </TableRow>
+                                    {tasks.map((task) => {
+                                      const isDelay = task.status !== "완료" && new Date(task.end) < new Date();
+                                      const displayStatus = isDelay ? "지연" : task.status;
+                                      return (
+                                        <TableRow key={task._idx}>
+                                          <TableCell className="pl-8 text-[13px]">{task.name}</TableCell>
+                                          <TableCell className="text-[13px]">{task.assignee}</TableCell>
+                                          <TableCell className="text-[13px] text-muted-foreground">{task.start}</TableCell>
+                                          <TableCell className={cn("text-[13px]", isDelay && "text-destructive font-semibold")}>{task.end}</TableCell>
+                                          <TableCell className="text-center">
+                                            <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", getTaskStatusColor(displayStatus))}>
+                                              {displayStatus}
+                                            </span>
+                                          </TableCell>
+                                          <TableCell>
+                                            <div className="flex items-center gap-1">
+                                              <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                                                <div className={cn("h-full rounded-full", progressColor(task.progress))} style={{ width: `${task.progress}%` }} />
+                                              </div>
+                                              <span className="text-[10px] text-muted-foreground min-w-[24px] text-right">{task.progress}%</span>
+                                            </div>
+                                          </TableCell>
+                                          <TableCell className="text-center">
+                                            <div className="flex items-center justify-center gap-0.5">
+                                              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => { setTaskDetailIdx(task._idx); setTaskDetailTab("log"); setIsTaskDetailOpen(true); }}>
+                                                <FileText className="w-3.5 h-3.5" />
+                                              </Button>
+                                              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => openTaskModal(task._idx)}>
+                                                <Pencil className="w-3.5 h-3.5" />
+                                              </Button>
+                                              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeleteTask(task._idx)}>
+                                                <Trash2 className="w-3.5 h-3.5 text-destructive" />
+                                              </Button>
+                                            </div>
+                                          </TableCell>
+                                        </TableRow>
+                                      );
+                                    })}
+                                  </React.Fragment>
+                                );
+                              })}
+                            </TableBody>
+                          </Table>
+                        )}
+                      </TabsContent>
+
+                      {/* 간트차트 탭 */}
+                      <TabsContent value="gantt" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
+                        {selectedProject.tasks.length === 0 ? (
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <BarChart3 className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">업무를 등록하면 간트차트가 표시돼요</span>
+                          </div>
+                        ) : (
+                          <GanttChart tasks={selectedProject.tasks} startDate={selectedProject.startDate} endDate={selectedProject.endDate} />
+                        )}
+                      </TabsContent>
+
+                      {/* 팀원 탭 */}
+                      <TabsContent value="team" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
+                        {selectedProject.tasks.length === 0 ? (
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <Users className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">업무를 등록하면 팀원 현황이 표시돼요</span>
+                          </div>
+                        ) : (
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                            {Object.entries(teamMembers).map(([name, tasks], idx) => {
+                              const avgProg = Math.round(tasks.reduce((s, t) => s + t.progress, 0) / tasks.length);
+                              const isPM = name === selectedProject.pm;
+                              const avatarColors = ["bg-primary", "bg-primary/80", "bg-primary/60", "bg-destructive/70"];
+                              return (
+                                <div key={name} className="border rounded-lg p-4 hover:shadow-sm transition-shadow">
+                                  <div className="flex items-center gap-3 mb-3">
+                                    <div className={cn("w-10 h-10 rounded-full flex items-center justify-center text-primary-foreground font-bold", avatarColors[idx % 4])}>
+                                      {name.charAt(0)}
+                                    </div>
+                                    <div>
+                                      <div className="font-semibold text-sm flex items-center gap-1.5">
+                                        {name}
+                                        {isPM && <Badge variant="secondary" className="text-[10px] py-0">PM</Badge>}
+                                      </div>
+                                      <div className="text-xs text-muted-foreground">
+                                        업무 {tasks.length}건 (진행중 {tasks.filter((t) => t.status === "진행중").length}건)
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <ul className="space-y-1 mb-3">
+                                    {tasks.map((t, ti) => {
+                                      const isDelay = t.status !== "완료" && new Date(t.end) < new Date();
+                                      return (
+                                        <li key={ti} className="flex items-center justify-between text-xs py-1 border-b border-muted/50 last:border-0">
+                                          <span>
+                                            {isDelay ? "🔴" : t.status === "완료" ? "✅" : t.status === "진행중" ? "🔵" : "⚪"} {t.name}
+                                          </span>
+                                          <span className={cn("text-[11px]", isDelay ? "text-destructive" : "text-muted-foreground")}>{t.progress}%</span>
+                                        </li>
+                                      );
+                                    })}
+                                  </ul>
+                                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                    <span>종합:</span>
+                                    <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                                      <div className={cn("h-full rounded-full", progressColor(avgProg))} style={{ width: `${avgProg}%` }} />
+                                    </div>
+                                    <span className={cn("font-semibold", progressTextColor(avgProg))}>{avgProg}%</span>
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </TabsContent>
+
+                      {/* 하위 프로젝트 탭 */}
+                      <TabsContent value="subprojects" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                          {childProjects.map((child) => {
+                            const completedCount = child.tasks.filter((t) => t.status === "완료").length;
+                            return (
+                              <div
+                                key={child.id}
+                                className="border rounded-lg p-4 cursor-pointer hover:border-primary hover:shadow-sm transition-all"
+                                onClick={() => { setSelectedId(child.id); setDetailTab("wbs"); fetchTaskDetails(child.id); }}
+                              >
+                                <div className="flex items-center justify-between mb-2">
+                                  <div>
+                                    <div className="text-xs font-semibold text-primary">{child.projectNo}</div>
+                                    {child.relation && (
+                                      <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(child.relation))}>
+                                        {getRelationLabel(child.relation)}
+                                      </span>
+                                    )}
+                                  </div>
+                                  <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(child.status))}>{child.status}</span>
+                                </div>
+                                <div className="font-semibold text-sm mb-2">{child.name}</div>
+                                <div className="flex gap-3 text-xs text-muted-foreground mb-2">
+                                  <span>👤 {child.pm}</span>
+                                  <span>📅 {child.startDate} ~ {child.endDate}</span>
+                                </div>
+                                <div className="text-xs text-muted-foreground mb-2">
+                                  업무 {child.tasks.length}건 (완료 {completedCount}건)
+                                </div>
+                                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                  <span>진행률</span>
+                                  <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                                    <div className={cn("h-full rounded-full", progressColor(child.progress))} style={{ width: `${child.progress}%` }} />
+                                  </div>
+                                  <span className={cn("font-semibold", progressTextColor(child.progress))}>{child.progress}%</span>
+                                </div>
+                              </div>
+                            );
+                          })}
+                          <div
+                            className="border-2 border-dashed rounded-lg p-4 flex flex-col items-center justify-center min-h-[120px] cursor-pointer text-muted-foreground hover:border-primary hover:text-primary hover:bg-primary/5 transition-all"
+                            onClick={() => openProjectModal(undefined, selectedProject.id)}
+                          >
+                            <Plus className="w-7 h-7 mb-1" />
+                            <span className="text-sm font-medium">하위 프로젝트 등록</span>
+                          </div>
+                        </div>
+                      </TabsContent>
+                    </Tabs>
+                  </div>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 프로젝트 등록/수정 모달 */}
+      <Dialog open={isProjectModalOpen} onOpenChange={setIsProjectModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              {projects.some((p) => p.id === formProjectId)
+                ? "프로젝트 수정"
+                : formParentId
+                ? "하위 프로젝트 등록"
+                : "프로젝트 등록"}
+            </DialogTitle>
+            <DialogDescription>프로젝트 기본 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 sm:space-y-4">
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 번호</span>
+              <Input value={formProjectNo || formProjectId} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted/50" />
+            </div>
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트명 <span className="text-destructive">*</span></span>
+              <Input value={formName} onChange={(e) => setFormName(e.target.value)} placeholder="프로젝트명" className="h-8 text-xs sm:h-10 sm:text-sm" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">시작일 <span className="text-destructive">*</span></span>
+                <Input type="date" value={formStartDate} onChange={(e) => setFormStartDate(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">종료예정일 <span className="text-destructive">*</span></span>
+                <Input type="date" value={formEndDate} onChange={(e) => setFormEndDate(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">PM <span className="text-destructive">*</span></span>
+                <Select value={formPM || "none"} onValueChange={(v) => setFormPM(v === "none" ? "" : v)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">선택</SelectItem>
+                    <SelectItem value="이설계">이설계</SelectItem>
+                    <SelectItem value="박도면">박도면</SelectItem>
+                    <SelectItem value="최기구">최기구</SelectItem>
+                    <SelectItem value="김전장">김전장</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">고객</span>
+                <Input value={formCustomer} onChange={(e) => setFormCustomer(e.target.value)} placeholder="고객/거래처명" className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상위 프로젝트</span>
+                <Select value={formParentId || "none"} onValueChange={(v) => setFormParentId(v === "none" ? "" : v)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="없음" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">없음 (최상위)</SelectItem>
+                    {projects.filter((p) => p.id !== formProjectId).map((p) => (
+                      <SelectItem key={p.id} value={p.id}>{p.projectNo} - {p.name}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">관계 유형</span>
+                <Select value={formRelation} onValueChange={(v) => setFormRelation(v as RelationType)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="sub">하위 프로젝트</SelectItem>
+                    <SelectItem value="depend">종속 프로젝트</SelectItem>
+                    <SelectItem value="related">연관 프로젝트</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">원접수번호</span>
+              <Input value={formSourceNo} onChange={(e) => setFormSourceNo(e.target.value)} placeholder="DR-XXXX-XXXX" className="h-8 text-xs sm:h-10 sm:text-sm" />
+            </div>
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">설명</span>
+              <Textarea value={formDesc} onChange={(e) => setFormDesc(e.target.value)} placeholder="프로젝트 개요" rows={3} />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsProjectModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveProject}>
+              <Save className="w-4 h-4 mr-1.5" /> 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 업무 등록/수정 모달 */}
+      <Dialog open={isTaskModalOpen} onOpenChange={setIsTaskModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{editingTaskIdx >= 0 ? "업무 수정" : "업무 등록"}</DialogTitle>
+            <DialogDescription>업무 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무명 <span className="text-destructive">*</span></span>
+              <Input value={tName} onChange={(e) => setTName(e.target.value)} placeholder="업무명" className="h-8 text-xs sm:h-10 sm:text-sm" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무 유형</span>
+                <Select value={tCategory} onValueChange={setTCategory}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {["기구설계", "전장설계", "SW개발", "구매/조달", "조립/시운전", "검토/승인"].map((c) => (
+                      <SelectItem key={c} value={c}>{c}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자 <span className="text-destructive">*</span></span>
+                <Select value={tAssignee || "none"} onValueChange={(v) => setTAssignee(v === "none" ? "" : v)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">선택</SelectItem>
+                    {["이설계", "박도면", "최기구", "김전장", "정SW", "한조립", "박구매", "팀장"].map((n) => (
+                      <SelectItem key={n} value={n}>{n}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">시작일 <span className="text-destructive">*</span></span>
+                <Input type="date" value={tStart} onChange={(e) => setTStart(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">종료일 <span className="text-destructive">*</span></span>
+                <Input type="date" value={tEnd} onChange={(e) => setTEnd(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상태</span>
+                <Select value={tStatus} onValueChange={(v) => setTStatus(v as TaskStatus)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {(["대기", "진행중", "검토중", "완료"] as TaskStatus[]).map((s) => (
+                      <SelectItem key={s} value={s}>{s}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">진행률 (%)</span>
+                <Input type="number" min={0} max={100} value={tProgress} onChange={(e) => setTProgress(Number(e.target.value))} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+            </div>
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">비고</span>
+              <Textarea value={tRemark} onChange={(e) => setTRemark(e.target.value)} placeholder="비고 사항" rows={2} />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsTaskModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveTask}>
+              <Save className="w-4 h-4 mr-1.5" /> 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 태스크 상세 모달 (수행기록/이슈) */}
+      <Dialog open={isTaskDetailOpen} onOpenChange={setIsTaskDetailOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-3xl max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{detailTask?.name || "업무 상세"}</DialogTitle>
+            <DialogDescription>업무 이력 및 이슈를 확인해주세요.</DialogDescription>
+          </DialogHeader>
+          {detailTask && (
+            <>
+              {/* 태스크 요약 */}
+              <div className="grid grid-cols-2 gap-2 bg-muted/20 p-3 rounded-lg border text-xs">
+                <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">유형</span><span className="font-medium">{detailTask.category}</span></div>
+                <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">담당자</span><span className="font-medium">{detailTask.assignee}</span></div>
+                <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">기간</span><span className="font-medium">{detailTask.start} ~ {detailTask.end}</span></div>
+                <div className="flex gap-2 items-center">
+                  <span className="text-muted-foreground w-[50px]">진행률</span>
+                  <div className="flex items-center gap-1.5 flex-1">
+                    <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden max-w-[60px]">
+                      <div className={cn("h-full rounded-full", progressColor(detailTask.progress))} style={{ width: `${detailTask.progress}%` }} />
+                    </div>
+                    <span className={cn("font-semibold", progressTextColor(detailTask.progress))}>{detailTask.progress}%</span>
+                  </div>
+                </div>
+              </div>
+
+              <Tabs value={taskDetailTab} onValueChange={setTaskDetailTab}>
+                <TabsList className="w-full">
+                  <TabsTrigger value="log" className="flex-1 text-xs">수행이력 ({detailTask.workLogs?.length || 0})</TabsTrigger>
+                  <TabsTrigger value="issue" className="flex-1 text-xs">이슈 ({detailTask.issues?.length || 0})</TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="log" className="mt-3">
+                  <div className="bg-primary/5 rounded-md p-2.5 mb-3 text-xs text-primary border border-primary/20">
+                    수행기록 등록/수정은 <strong>내업무현황</strong> 메뉴에서 진행해요.
+                  </div>
+                  {(!detailTask.workLogs || detailTask.workLogs.length === 0) ? (
+                    <div className="flex flex-col items-center gap-2 py-8 mx-auto max-w-xs border border-dashed border-border rounded-lg">
+                      <ClipboardList className="w-8 h-8 text-muted-foreground/30" />
+                      <span className="text-sm text-muted-foreground">등록된 수행기록이 없어요</span>
+                    </div>
+                  ) : (
+                    <div className="space-y-2 max-h-[300px] overflow-y-auto">
+                      {[...detailTask.workLogs].sort((a, b) => b.date.localeCompare(a.date)).map((log, i) => {
+                        const d = new Date(log.date);
+                        const days = ["일", "월", "화", "수", "목", "금", "토"];
+                        return (
+                          <div key={i} className="flex gap-3 p-3 bg-muted/20 rounded-lg border text-xs">
+                            <div className="bg-background border rounded-md px-2 py-1.5 text-center min-w-[55px] shrink-0">
+                              <div className="text-[10px] text-muted-foreground">{d.getMonth() + 1}월</div>
+                              <div className="text-lg font-bold">{d.getDate()}</div>
+                              <div className="text-[10px] text-muted-foreground">{days[d.getDay()]}</div>
+                            </div>
+                            <div className="flex-1">
+                              <div className="text-sm mb-1">{log.desc}</div>
+                              <div className="flex gap-2 text-muted-foreground flex-wrap">
+                                <Badge variant="secondary" className="text-[10px] py-0">⏱ {log.hours}h</Badge>
+                                {log.progressBefore !== undefined && (
+                                  <Badge variant="outline" className="text-[10px] py-0 bg-primary/5 text-primary border-primary/20">
+                                    📈 {log.progressBefore}% → {log.progressAfter}%
+                                  </Badge>
+                                )}
+                                {log.author && <span>👤 {log.author}</span>}
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </TabsContent>
+
+                <TabsContent value="issue" className="mt-3">
+                  {(!detailTask.issues || detailTask.issues.length === 0) ? (
+                    <div className="flex flex-col items-center gap-2 py-8 mx-auto max-w-xs border border-dashed border-border rounded-lg">
+                      <ClipboardList className="w-8 h-8 text-muted-foreground/30" />
+                      <span className="text-sm text-muted-foreground">등록된 이슈가 없어요</span>
+                    </div>
+                  ) : (
+                    <div className="space-y-2 max-h-[300px] overflow-y-auto">
+                      {detailTask.issues.map((issue) => {
+                        const priorityColor = issue.priority === "긴급" ? "text-destructive" : issue.priority === "높음" ? "text-destructive/70" : "text-muted-foreground";
+                        const statusBadge = issue.status === "해결" ? "bg-primary/10 text-primary" : issue.status === "진행중" ? "bg-primary/10 text-primary" : "bg-destructive/10 text-destructive";
+                        return (
+                          <div key={issue.id} className="border rounded-lg p-3">
+                            <div className="flex items-center justify-between mb-1.5">
+                              <div className="font-semibold text-xs flex items-center gap-1">
+                                <span className={priorityColor}>●</span> {issue.title}
+                              </div>
+                              <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", statusBadge)}>{issue.status}</span>
+                            </div>
+                            <div className="text-xs text-muted-foreground mb-1">{issue.desc}</div>
+                            <div className="flex gap-2 text-[11px] text-muted-foreground">
+                              <span>📅 {issue.registeredDate}</span>
+                              <span>👤 {issue.registeredBy}</span>
+                              {issue.resolvedDate && <span>✅ {issue.resolvedDate}</span>}
+                              <span className={priorityColor}>⚡ {issue.priority}</span>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </TabsContent>
+              </Tabs>
+            </>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsTaskDetailOpen(false)}>닫기</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
+
+// --- 간트차트 컴포넌트 ---
+function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: string; endDate: string }) {
+  const pStart = new Date(startDate);
+  const pEnd = new Date(endDate);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const totalDays = Math.ceil((pEnd.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24)) + 1;
+  const useWeekly = totalDays > 90;
+  const cellWidth = useWeekly ? 50 : 28;
+
+  const dates: Date[] = [];
+  const cur = new Date(pStart);
+  if (useWeekly) {
+    while (cur <= pEnd) {
+      dates.push(new Date(cur));
+      cur.setDate(cur.getDate() + 7);
+    }
+  } else {
+    while (cur <= pEnd) {
+      dates.push(new Date(cur));
+      cur.setDate(cur.getDate() + 1);
+    }
+  }
+
+  const barColors: Record<string, string> = {
+    기구설계: "bg-primary",
+    전장설계: "bg-primary/80",
+    SW개발: "bg-primary/60",
+    "구매/조달": "bg-secondary-foreground/70",
+    "조립/시운전": "bg-destructive/70",
+    "검토/승인": "bg-muted-foreground",
+  };
+
+  const todayFromStart = Math.ceil((today.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24));
+  const todayLeft = useWeekly ? (todayFromStart / 7) * cellWidth + 180 : todayFromStart * cellWidth + 180;
+  const showTodayLine = today >= pStart && today <= pEnd;
+
+  return (
+    <div className="border rounded-lg overflow-hidden">
+      {/* 범례 */}
+      <div className="flex gap-3 p-2 flex-wrap text-[11px] border-b bg-muted/20">
+        {Object.entries(barColors).map(([cat, color]) => (
+          <span key={cat} className="flex items-center gap-1">
+            {categoryIcons[cat]} <span className={cn("w-3 h-3 rounded-sm", color)} /> {cat}
+          </span>
+        ))}
+        <span className="text-destructive font-semibold">│ 오늘</span>
+      </div>
+
+      <div className="overflow-x-auto relative">
+        {showTodayLine && (
+          <div className="absolute top-0 bottom-0 w-[2px] bg-destructive z-5" style={{ left: todayLeft }} />
+        )}
+
+        {/* 헤더 */}
+        <div className="flex border-b sticky top-0 bg-muted/50 z-4">
+          <div className="w-[180px] min-w-[180px] p-2 text-xs font-semibold text-muted-foreground border-r shrink-0">업무명</div>
+          <div className="flex">
+            {dates.map((d, i) => {
+              const dow = d.getDay();
+              const isWeekend = (dow === 0 || dow === 6) && !useWeekly;
+              const isToday = d.toDateString() === today.toDateString();
+              return (
+                <div
+                  key={i}
+                  className={cn(
+                    "text-center text-[10px] text-muted-foreground border-r py-1.5",
+                    isWeekend && "bg-muted/30",
+                    isToday && "bg-primary/5 text-primary font-bold"
+                  )}
+                  style={{ minWidth: cellWidth }}
+                >
+                  {useWeekly ? `${d.getMonth() + 1}/${d.getDate()}` : d.getDate()}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* 행 */}
+        {tasks.map((task, i) => {
+          const tStart = new Date(task.start);
+          const tEnd = new Date(task.end);
+          const dayFromStart = Math.max(0, Math.ceil((tStart.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24)));
+          const taskDays = Math.max(1, Math.ceil((tEnd.getTime() - tStart.getTime()) / (1000 * 60 * 60 * 24)) + 1);
+          const leftPos = useWeekly ? (dayFromStart / 7) * cellWidth : dayFromStart * cellWidth;
+          const barWidth = useWeekly ? (taskDays / 7) * cellWidth : taskDays * cellWidth;
+          const barColor = barColors[task.category] || "bg-primary";
+
+          return (
+            <div key={i} className="flex border-b hover:bg-muted/30 min-h-[34px]">
+              <div className="w-[180px] min-w-[180px] px-3 py-2 text-xs text-muted-foreground border-r truncate shrink-0" title={task.name}>{task.name}</div>
+              <div className="flex relative items-center" style={{ minWidth: dates.length * cellWidth }}>
+                {dates.map((d, di) => {
+                  const dow = d.getDay();
+                  const isWeekend = (dow === 0 || dow === 6) && !useWeekly;
+                  return <div key={di} className={cn("border-r h-full", isWeekend && "bg-muted/30")} style={{ minWidth: cellWidth }} />;
+                })}
+                <div
+                  className={cn("absolute h-5 rounded text-[10px] text-primary-foreground flex items-center justify-center font-semibold", barColor)}
+                  style={{ left: leftPos, width: Math.max(barWidth, 16), top: "50%", transform: "translateY(-50%)" }}
+                >
+                  {barWidth > 30 ? `${task.progress}%` : ""}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/design/task-management/page.tsx b/frontend/app/(main)/COMPANY_30/design/task-management/page.tsx
new file mode 100644
index 00000000..f5603e46
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/design/task-management/page.tsx
@@ -0,0 +1,1288 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  RefreshCw,
+  ClipboardList,
+  Pencil,
+  Inbox,
+  CheckCircle2,
+  XCircle,
+  Rocket,
+  Eye,
+  ArrowRight,
+  Check,
+  ChevronsUpDown,
+  UserCircle,
+  Loader2,
+  User,
+  Users,
+  Settings2,
+} from "lucide-react";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  getDesignRequestList,
+  updateDesignRequest,
+  addRequestHistory,
+  createProject,
+} from "@/lib/api/design";
+import { getUserList } from "@/lib/api/user";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+
+// --- Types ---
+type SourceType = "dr" | "ecr";
+type TaskStatus = "신규접수" | "검토중" | "승인완료" | "반려" | "프로젝트생성";
+type Priority = "긴급" | "높음" | "보통" | "낮음";
+type MainTab = "all" | "dr" | "ecr";
+
+interface HistoryItem {
+  step: string;
+  date: string;
+  user: string;
+  desc: string;
+}
+
+interface TaskItem {
+  dbId: string;
+  id: string;
+  sourceType: SourceType;
+  date: string;
+  dueDate: string;
+  priority: Priority;
+  status: TaskStatus;
+  approvalStep: number;
+  targetName: string;
+  customer: string;
+  reqDept: string;
+  requester: string;
+  designer: string;
+  orderNo?: string;
+  designType?: string;
+  spec?: string;
+  changeType?: string;
+  drawingNo?: string;
+  reason?: string;
+  impact?: string[];
+  reviewMemo: string;
+  projectNo?: string;
+  history: HistoryItem[];
+}
+
+// --- 상태/우선순위 배지 색상 ---
+const getStatusVariant = (status: TaskStatus) => {
+  switch (status) {
+    case "신규접수":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "검토중":
+      return "bg-muted text-muted-foreground border-border";
+    case "승인완료":
+      return "bg-primary/15 text-primary border-primary/25";
+    case "반려":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "프로젝트생성":
+      return "bg-secondary text-secondary-foreground border-border";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getPriorityVariant = (priority: Priority) => {
+  switch (priority) {
+    case "긴급":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "높음":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "보통":
+      return "bg-muted text-muted-foreground border-border";
+    case "낮음":
+      return "bg-muted text-muted-foreground border-border";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getSourceBadge = (type: SourceType) => {
+  if (type === "dr")
+    return "bg-primary/10 text-primary border-primary/20";
+  return "bg-secondary text-secondary-foreground border-border";
+};
+
+const getStepIcon = (step: string) => {
+  switch (step) {
+    case "접수": return <Inbox className="inline h-4 w-4 mr-1" />;
+    case "검토": return <Eye className="inline h-4 w-4 mr-1" />;
+    case "승인": return <CheckCircle2 className="inline h-4 w-4 mr-1" />;
+    case "반려": return <XCircle className="inline h-4 w-4 mr-1" />;
+    case "프로젝트": return <Rocket className="inline h-4 w-4 mr-1" />;
+    default: return <ClipboardList className="inline h-4 w-4 mr-1" />;
+  }
+};
+
+// --- API 응답 → TaskItem 매핑 ---
+function mapApiToTaskItem(r: any): TaskItem {
+  const historyRaw = Array.isArray(r.history) ? r.history : [];
+  const history: HistoryItem[] = historyRaw.map((h: any) => ({
+    step: h.step || "",
+    date: h.history_date || "",
+    user: h.user_name || "",
+    desc: h.description || "",
+  }));
+  const impact = Array.isArray(r.impact) ? r.impact : [];
+  const formatDate = (d: string | null | undefined) =>
+    d ? (d.includes("T") ? d.split("T")[0] : d) : "";
+  return {
+    dbId: r.id,
+    id: r.request_no || r.id,
+    sourceType: (r.source_type === "ecr" ? "ecr" : "dr") as SourceType,
+    date: formatDate(r.request_date),
+    dueDate: formatDate(r.due_date),
+    priority: (r.priority || "보통") as Priority,
+    status: (r.status || "신규접수") as TaskStatus,
+    approvalStep: typeof r.approval_step === "number" ? r.approval_step : 0,
+    targetName: r.target_name || "",
+    customer: r.customer || "",
+    reqDept: r.req_dept || "",
+    requester: r.requester || "",
+    designer: r.designer || "",
+    orderNo: r.order_no,
+    designType: r.design_type,
+    spec: r.spec,
+    changeType: r.change_type,
+    drawingNo: r.drawing_no,
+    reason: r.reason,
+    impact: impact.length ? impact : undefined,
+    reviewMemo: r.review_memo || "",
+    projectNo: r.project_id,
+    history,
+  };
+}
+
+// --- 승인 프로세스 스텝 ---
+const APPROVAL_STEPS = [
+  { label: "접수", step: 0 },
+  { label: "검토", step: 1 },
+  { label: "내부승인", step: 2 },
+  { label: "프로젝트", step: 3 },
+];
+
+// --- 현황 카드 설정 ---
+const STAT_CARDS: { label: string; status: TaskStatus; color: string; textColor: string }[] = [
+  { label: "신규접수", status: "신규접수", color: "bg-primary", textColor: "text-primary-foreground" },
+  { label: "검토중", status: "검토중", color: "bg-muted border border-border", textColor: "text-foreground" },
+  { label: "승인완료", status: "승인완료", color: "bg-primary/80", textColor: "text-primary-foreground" },
+  { label: "반려", status: "반려", color: "bg-destructive", textColor: "text-destructive-foreground" },
+  { label: "프로젝트", status: "프로젝트생성", color: "bg-secondary", textColor: "text-secondary-foreground" },
+];
+
+interface EmployeeOption {
+  userId: string;
+  userName: string;
+  deptName: string;
+}
+
+const TASK_GRID_COLUMNS = [
+  { key: "source_type", label: "구분" },
+  { key: "request_no", label: "접수번호" },
+  { key: "status", label: "상태" },
+  { key: "priority", label: "우선순위" },
+  { key: "target_name", label: "설비/품목명" },
+  { key: "req_dept", label: "의뢰부서" },
+  { key: "requester", label: "의뢰자" },
+  { key: "request_date", label: "접수일자" },
+  { key: "due_date", label: "희망납기" },
+  { key: "designer", label: "설계담당" },
+];
+
+export default function DesignTaskManagementPage() {
+  const ts = useTableSettings("c16-task-management", "dsn_design_request", TASK_GRID_COLUMNS);
+  const { user, userName, loading: authLoading } = useAuth();
+  const [allTasks, setAllTasks] = useState<TaskItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+  const [currentTab, setCurrentTab] = useState<MainTab>("all");
+  const [employees, setEmployees] = useState<EmployeeOption[]>([]);
+  const [myTasksOnly, setMyTasksOnly] = useState(true);
+
+  const fetchEmployees = useCallback(async () => {
+    try {
+      const res = await getUserList({ size: 1000 });
+      if (res.success && res.data) {
+        const list = (res.data as any[]).map((u: any) => ({
+          userId: u.user_id || u.userId,
+          userName: u.user_name || u.userName || "",
+          deptName: u.dept_name || u.deptName || "",
+        }));
+        setEmployees(list);
+      }
+    } catch {
+      // 사원 목록 로드 실패 시 빈 배열 유지
+    }
+  }, []);
+
+  const fetchTasks = useCallback(async () => {
+    setLoading(true);
+    const res = await getDesignRequestList({});
+    setLoading(false);
+    if (res.success && res.data) {
+      const mapped = (res.data as any[]).map(mapApiToTaskItem);
+      setAllTasks(mapped);
+    } else {
+      toast.error(res.message || "데이터를 불러오지 못했습니다.");
+      setAllTasks([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchTasks();
+    fetchEmployees();
+  }, [fetchTasks, fetchEmployees]);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 담당자 선택 모달 상태
+  const [designerModalOpen, setDesignerModalOpen] = useState(false);
+  const [designerModalTaskId, setDesignerModalTaskId] = useState<string | null>(null);
+  const [designerModalValue, setDesignerModalValue] = useState("");
+  const [designerComboOpen, setDesignerComboOpen] = useState(false);
+
+  // 모달 상태
+  const [rejectModalOpen, setRejectModalOpen] = useState(false);
+  const [rejectTaskId, setRejectTaskId] = useState<string | null>(null);
+  const [rejectReason, setRejectReason] = useState("");
+  const [projectModalOpen, setProjectModalOpen] = useState(false);
+  const [projectTaskId, setProjectTaskId] = useState<string | null>(null);
+  const [pmComboOpen, setPmComboOpen] = useState(false);
+  const [projectForm, setProjectForm] = useState({
+    projNo: "",
+    projName: "",
+    projSourceNo: "",
+    projStartDate: "",
+    projEndDate: "",
+    projPM: "",
+    projCustomer: "",
+    projDesc: "",
+  });
+
+  // 검토 메모
+  const [reviewMemoText, setReviewMemoText] = useState("");
+
+  // 현재 사용자 관련 업무만 필터링
+  const myRelatedTasks = useMemo(() => {
+    if (!myTasksOnly || !userName) return allTasks;
+    const currentUserName = userName;
+    const currentDeptName = user?.deptName || "";
+    return allTasks.filter((item) => {
+      if (item.requester === currentUserName) return true;
+      if (item.designer === currentUserName) return true;
+      if (currentDeptName && item.reqDept === currentDeptName) return true;
+      const inHistory = item.history.some((h) => h.user === currentUserName);
+      if (inHistory) return true;
+      return false;
+    });
+  }, [allTasks, myTasksOnly, userName, user?.deptName]);
+
+  // 탭별 카운트
+  const tabCounts = useMemo(() => {
+    const drItems = myRelatedTasks.filter((t) => t.sourceType === "dr");
+    const ecrItems = myRelatedTasks.filter((t) => t.sourceType === "ecr");
+    const newDR = drItems.filter((t) => t.status === "신규접수").length;
+    const newECR = ecrItems.filter((t) => t.status === "신규접수").length;
+    return {
+      all: newDR + newECR || myRelatedTasks.length,
+      allIsNew: newDR + newECR > 0,
+      dr: newDR || drItems.length,
+      drIsNew: newDR > 0,
+      ecr: newECR || ecrItems.length,
+      ecrIsNew: newECR > 0,
+    };
+  }, [myRelatedTasks]);
+
+  // snake_case → camelCase 매핑 (DynamicSearchFilter의 columnName은 snake_case)
+  const taskFieldMap: Record<string, string> = {
+    source_type: "sourceType",
+    request_no: "id",
+    target_name: "targetName",
+    req_dept: "reqDept",
+    request_date: "date",
+    due_date: "dueDate",
+    approval_step: "approvalStep",
+    design_type: "designType",
+    drawing_no: "drawingNo",
+    change_type: "changeType",
+    review_memo: "reviewMemo",
+    project_id: "projectNo",
+  };
+  const getTaskFieldValue = (obj: any, colName: string): string => {
+    const key = taskFieldMap[colName] || colName;
+    const val = obj[key];
+    if (Array.isArray(val)) return val.join(",");
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
+  // 필터링된 데이터
+  const filteredData = useMemo(() => {
+    return myRelatedTasks.filter((item) => {
+      if (currentTab === "dr" && item.sourceType !== "dr") return false;
+      if (currentTab === "ecr" && item.sourceType !== "ecr") return false;
+      for (const f of searchFilters) {
+        const val = getTaskFieldValue(item, f.columnName);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (val !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) return false;
+          if (to && val > to) return false;
+        }
+      }
+      return true;
+    });
+  }, [myRelatedTasks, currentTab, searchFilters]);
+
+  // 현황 통계
+  const stats = useMemo(() => {
+    return {
+      신규접수: myRelatedTasks.filter((t) => t.status === "신규접수").length,
+      검토중: myRelatedTasks.filter((t) => t.status === "검토중").length,
+      승인완료: myRelatedTasks.filter((t) => t.status === "승인완료").length,
+      반려: myRelatedTasks.filter((t) => t.status === "반려").length,
+      프로젝트생성: myRelatedTasks.filter((t) => t.status === "프로젝트생성").length,
+    };
+  }, [myRelatedTasks]);
+
+  const selectedTask = useMemo(
+    () => allTasks.find((t) => t.dbId === selectedTaskId) || null,
+    [allTasks, selectedTaskId]
+  );
+
+  // 선택된 업무 변경 시 메모 동기화
+  useEffect(() => {
+    if (selectedTask) {
+      setReviewMemoText(selectedTask.reviewMemo || "");
+    }
+  }, [selectedTask]);
+
+  // --- 액션 핸들러 ---
+  const handleSelectTask = useCallback((dbId: string) => {
+    setSelectedTaskId(dbId);
+  }, []);
+
+  const handleOpenDesignerModal = useCallback((dbId: string) => {
+    setDesignerModalTaskId(dbId);
+    setDesignerModalValue("");
+    setDesignerComboOpen(false);
+    setDesignerModalOpen(true);
+  }, []);
+
+  const handleConfirmDesigner = useCallback(async () => {
+    if (!designerModalValue) {
+      toast.error("설계 담당자를 선택하세요.");
+      return;
+    }
+    if (!designerModalTaskId) return;
+
+    const selected = employees.find((e) => e.userId === designerModalValue);
+    const designerName = selected?.userName || designerModalValue;
+
+    const historyDate = new Date().toISOString().split("T")[0];
+    const historyRes = await addRequestHistory(designerModalTaskId, {
+      step: "검토",
+      history_date: historyDate,
+      user_name: designerName,
+      description: "검토 착수 - 담당자 배정",
+    });
+    if (!historyRes.success) {
+      toast.error(historyRes.message || "이력 추가에 실패했습니다.");
+      return;
+    }
+
+    const updateRes = await updateDesignRequest(designerModalTaskId, {
+      status: "검토중",
+      approval_step: 1,
+      designer: designerName,
+    });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "상태 업데이트에 실패했습니다.");
+      return;
+    }
+    setDesignerModalOpen(false);
+    toast.success("검토가 착수되었습니다.");
+    fetchTasks();
+  }, [designerModalTaskId, designerModalValue, employees, fetchTasks]);
+
+  const handleApprove = useCallback(
+    async (dbId: string) => {
+      if (!confirm("내부 승인을 진행하시겠습니까?")) return;
+
+      const historyDate = new Date().toISOString().split("T")[0];
+      const historyRes = await addRequestHistory(dbId, {
+        step: "승인",
+        history_date: historyDate,
+        user_name: "팀장",
+        description: "내부 검토 완료, 승인 처리",
+      });
+      if (!historyRes.success) {
+        toast.error(historyRes.message || "이력 추가에 실패했습니다.");
+        return;
+      }
+
+      const updateRes = await updateDesignRequest(dbId, {
+        status: "승인완료",
+        approval_step: 3,
+      });
+      if (!updateRes.success) {
+        toast.error(updateRes.message || "상태 업데이트에 실패했습니다.");
+        return;
+      }
+      toast.success("승인 처리되었습니다.");
+      fetchTasks();
+    },
+    [fetchTasks]
+  );
+
+  const handleOpenRejectModal = useCallback((dbId: string) => {
+    setRejectTaskId(dbId);
+    setRejectReason("");
+    setRejectModalOpen(true);
+  }, []);
+
+  const handleConfirmReject = useCallback(async () => {
+    if (!rejectReason.trim()) {
+      toast.error("반려 사유를 입력하세요.");
+      return;
+    }
+    if (!rejectTaskId) return;
+
+    const historyDate = new Date().toISOString().split("T")[0];
+    const historyRes = await addRequestHistory(rejectTaskId, {
+      step: "반려",
+      history_date: historyDate,
+      user_name: "팀장",
+      description: rejectReason,
+    });
+    if (!historyRes.success) {
+      toast.error(historyRes.message || "이력 추가에 실패했습니다.");
+      return;
+    }
+
+    const updateRes = await updateDesignRequest(rejectTaskId, {
+      status: "반려",
+      approval_step: -1,
+      review_memo: rejectReason,
+    });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "상태 업데이트에 실패했습니다.");
+      return;
+    }
+    setRejectModalOpen(false);
+    toast.success("반려 처리되었습니다.");
+    fetchTasks();
+  }, [rejectTaskId, rejectReason, fetchTasks]);
+
+  const handleOpenProjectModal = useCallback(
+    (dbId: string) => {
+      const task = allTasks.find((t) => t.dbId === dbId);
+      if (!task) return;
+
+      const year = new Date().getFullYear();
+      const existingProjects = allTasks.filter((t) => t.projectNo).length;
+      const projNo = `PJ-${year}-${String(existingProjects + 1).padStart(4, "0")}`;
+
+      setProjectTaskId(dbId);
+      const matchedEmployee = employees.find((e) => e.userName === task.designer);
+      setProjectForm({
+        projNo,
+        projName: task.targetName,
+        projSourceNo: task.id,
+        projStartDate: new Date().toISOString().split("T")[0],
+        projEndDate: task.dueDate,
+        projPM: matchedEmployee?.userId || "",
+        projCustomer: task.customer || task.reqDept,
+        projDesc: task.sourceType === "dr" ? task.spec || "" : task.reason || "",
+      });
+      setProjectModalOpen(true);
+    },
+    [allTasks, employees]
+  );
+
+  const handleCreateProject = useCallback(async () => {
+    if (!projectForm.projName.trim()) { toast.error("프로젝트명을 입력하세요."); return; }
+    if (!projectForm.projStartDate) { toast.error("시작일을 입력하세요."); return; }
+    if (!projectForm.projEndDate) { toast.error("종료예정일을 입력하세요."); return; }
+    if (!projectForm.projPM) { toast.error("PM을 선택하세요."); return; }
+    if (!projectTaskId) return;
+
+    const pmEmployee = employees.find((e) => e.userId === projectForm.projPM);
+    const pmName = pmEmployee?.userName || projectForm.projPM;
+
+    // 1) 실제 프로젝트 테이블(dsn_project)에 INSERT
+    const projectRes = await createProject({
+      project_no: projectForm.projNo,
+      name: projectForm.projName,
+      status: "계획",
+      pm: pmName,
+      customer: projectForm.projCustomer,
+      start_date: projectForm.projStartDate,
+      end_date: projectForm.projEndDate,
+      source_no: projectForm.projSourceNo,
+      description: projectForm.projDesc,
+      progress: "0",
+    });
+    if (!projectRes.success) {
+      toast.error(projectRes.message || "프로젝트 생성에 실패했습니다.");
+      return;
+    }
+
+    const createdProjectId = projectRes.data?.id || projectForm.projNo;
+
+    // 2) 이력 추가
+    const historyDate = new Date().toISOString().split("T")[0];
+    const historyRes = await addRequestHistory(projectTaskId, {
+      step: "프로젝트",
+      history_date: historyDate,
+      user_name: pmName,
+      description: `${projectForm.projNo} 프로젝트 생성 - ${projectForm.projName}`,
+    });
+    if (!historyRes.success) {
+      toast.error(historyRes.message || "이력 추가에 실패했습니다.");
+      return;
+    }
+
+    // 3) 설계요청 상태 업데이트 + 프로젝트 ID 연결
+    const updateRes = await updateDesignRequest(projectTaskId, {
+      status: "프로젝트생성",
+      approval_step: 4,
+      project_id: createdProjectId,
+    });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "상태 업데이트에 실패했습니다.");
+      return;
+    }
+    setProjectModalOpen(false);
+    toast.success(`프로젝트 ${projectForm.projNo}가 생성되었습니다.`);
+    fetchTasks();
+  }, [projectForm, projectTaskId, employees, fetchTasks]);
+
+  const handleSaveReviewMemo = useCallback(async () => {
+    if (!selectedTaskId) return;
+
+    const updateRes = await updateDesignRequest(selectedTaskId, {
+      review_memo: reviewMemoText,
+    });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "메모 저장에 실패했습니다.");
+      return;
+    }
+    toast.success("검토 메모가 저장되었습니다.");
+    fetchTasks();
+  }, [selectedTaskId, reviewMemoText, fetchTasks]);
+
+  const handleFilterByStatus = useCallback((_status: TaskStatus) => {
+    // Status filter now handled by DynamicSearchFilter
+  }, []);
+
+  // 납기 남은 일수 계산
+  const getDueDateInfo = (dueDate: string) => {
+    const due = new Date(dueDate);
+    const today = new Date();
+    const diffDays = Math.ceil((due.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+    const color = diffDays < 0 ? "text-destructive" : diffDays <= 7 ? "text-primary" : "text-muted-foreground";
+    const text = diffDays < 0 ? `${Math.abs(diffDays)}일 초과` : diffDays === 0 ? "오늘" : `${diffDays}일 남음`;
+    return { color, text };
+  };
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col overflow-hidden bg-background">
+      {/* 탭 바 */}
+      <div className="flex items-center border-b-2 border-border bg-card px-5">
+        {([
+          { key: "all" as MainTab, label: "전체", icon: <ClipboardList className="h-4 w-4" />, count: tabCounts.all, isNew: tabCounts.allIsNew },
+          { key: "dr" as MainTab, label: "설계의뢰(DR)", icon: <Pencil className="h-4 w-4" />, count: tabCounts.dr, isNew: tabCounts.drIsNew },
+          { key: "ecr" as MainTab, label: "설계변경(ECR)", icon: <RefreshCw className="h-4 w-4" />, count: tabCounts.ecr, isNew: tabCounts.ecrIsNew },
+        ]).map((tab) => (
+          <button
+            key={tab.key}
+            className={cn(
+              "relative flex items-center gap-2 px-6 py-3.5 text-sm font-semibold transition-colors",
+              currentTab === tab.key
+                ? "text-primary after:absolute after:bottom-[-2px] after:left-0 after:right-0 after:h-0.5 after:bg-primary"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground"
+            )}
+            onClick={() => {
+              setCurrentTab(tab.key);
+              setSelectedTaskId(null);
+            }}
+          >
+            {tab.icon}
+            {tab.label}
+            <span
+              className={cn(
+                "min-w-[20px] rounded-full px-1.5 py-0.5 text-center text-[11px] font-bold",
+                tab.isNew ? "bg-destructive text-destructive-foreground" : "bg-muted text-muted-foreground"
+              )}
+            >
+              {tab.count}
+            </span>
+          </button>
+        ))}
+        <div className="flex-1" />
+        <div className="flex items-center gap-3">
+          {userName && (
+            <div className="flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
+              <UserCircle className="h-3.5 w-3.5" />
+              {userName}
+              {user?.deptName && <span className="text-primary/60">({user.deptName})</span>}
+            </div>
+          )}
+          <div className="flex items-center overflow-hidden rounded-full border border-border">
+            <button
+              className={cn(
+                "flex items-center gap-1 px-3 py-1.5 text-xs font-medium transition-colors",
+                myTasksOnly
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-card text-muted-foreground hover:text-foreground"
+              )}
+              onClick={() => setMyTasksOnly(true)}
+            >
+              <User className="h-3 w-3" />
+              내 업무
+            </button>
+            <button
+              className={cn(
+                "flex items-center gap-1 px-3 py-1.5 text-xs font-medium transition-colors",
+                !myTasksOnly
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-card text-muted-foreground hover:text-foreground"
+              )}
+              onClick={() => setMyTasksOnly(false)}
+            >
+              <Users className="h-3 w-3" />
+              전체
+            </button>
+          </div>
+          <div className="flex items-center gap-1.5 rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">
+            <span className="h-2 w-2 animate-pulse rounded-full bg-primary" />
+            실시간 동기화 중
+          </div>
+        </div>
+      </div>
+
+      {/* 검색 필터 */}
+      <div className="border-b border-border bg-card px-4 py-3">
+        <DynamicSearchFilter
+          tableName="dsn_design_request"
+          filterId="c16-task-management"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredData.length}
+        />
+      </div>
+
+      {/* 좌우 분할 패널 */}
+      <div className="flex-1 overflow-hidden p-3">
+        <ResizablePanelGroup direction="horizontal" className="h-full rounded-lg border border-border">
+          {/* 왼쪽: 접수 목록 */}
+          <ResizablePanel defaultSize={58} minSize={35}>
+            <div className="flex h-full flex-col bg-card">
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold flex items-center gap-2">
+                  {myTasksOnly ? "내 관련 업무" : "접수 업무 목록"}
+                  <span className="text-primary bg-primary/8 border border-primary/15 rounded-md px-1.5 py-0.5 text-[11px] font-semibold">{filteredData.length}건</span>
+                  {myTasksOnly && (
+                    <span className="text-xs font-normal text-muted-foreground">
+                      전체 {allTasks.length}건 중
+                    </span>
+                  )}
+                </div>
+                <Button size="sm" variant="outline" onClick={fetchTasks} disabled={loading}>
+                  {loading ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                  동기화
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+              <EDataTable<TaskItem>
+                columns={ts.visibleColumns.map((col): EDataTableColumn<TaskItem> => ({
+                  key: col.key === "request_no" ? "id" : col.key === "target_name" ? "targetName" : col.key === "req_dept" ? "reqDept" : col.key === "request_date" ? "date" : col.key === "due_date" ? "dueDate" : col.key === "source_type" ? "sourceType" : col.key,
+                  label: col.label,
+                  width: col.key === "source_type" ? "w-[60px]" : col.key === "request_no" ? "w-[130px]" : col.key === "status" ? "w-[90px]" : col.key === "priority" ? "w-[80px]" : col.key === "target_name" ? "min-w-[180px]" : col.key === "req_dept" ? "w-[90px]" : col.key === "requester" ? "w-[80px]" : col.key === "request_date" ? "w-[100px]" : col.key === "due_date" ? "w-[100px]" : col.key === "designer" ? "w-[80px]" : undefined,
+                  align: (col.key === "source_type" || col.key === "status" || col.key === "priority") ? "center" : undefined,
+                  render: col.key === "source_type"
+                    ? (val: any, row: TaskItem) => (
+                        <Badge variant="outline" className={cn("text-[10px] font-bold", getSourceBadge(row.sourceType))}>
+                          {row.sourceType === "dr" ? "DR" : "ECR"}
+                        </Badge>
+                      )
+                    : col.key === "request_no"
+                    ? (val: any, row: TaskItem) => (
+                        <span className={cn("text-[13px] font-semibold", row.sourceType === "dr" ? "text-primary" : "text-secondary-foreground")}>
+                          {val}
+                        </span>
+                      )
+                    : col.key === "status"
+                    ? (val: any) => (
+                        <Badge variant="outline" className={cn("text-[10px]", getStatusVariant(val))}>
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "priority"
+                    ? (val: any) => (
+                        <Badge variant="outline" className={cn("text-[10px]", getPriorityVariant(val))}>
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "designer"
+                    ? (val: any) => val ? <span>{val}</span> : <span className="text-muted-foreground">미배정</span>
+                    : undefined,
+                }))}
+                data={ts.groupData(filteredData)}
+                loading={loading}
+                emptyMessage="조건에 맞는 업무가 없어요"
+                rowKey={(row) => row.dbId}
+                selectedId={selectedTaskId}
+                onSelect={(id) => handleSelectTask(id ?? "")}
+                draggableColumns={false}
+                showPagination={false}
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 오른쪽: 검토 및 승인 */}
+          <ResizablePanel defaultSize={42} minSize={30}>
+            <div className="flex h-full flex-col bg-card">
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold">검토 및 승인</div>
+              </div>
+              <div className="flex-1 overflow-auto p-3">
+                {/* 업무 현황 */}
+                <div className="mb-3 space-y-1.5">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무 현황</span>
+                  <div className="grid grid-cols-5 gap-2">
+                    {STAT_CARDS.map((card) => (
+                      <button
+                        key={card.status}
+                        className={cn(
+                          "rounded-lg p-2.5 text-center transition-all hover:-translate-y-0.5 hover:shadow-md",
+                          card.color, card.textColor
+                        )}
+                        onClick={() => handleFilterByStatus(card.status)}
+                      >
+                        <div className="text-[11px] font-medium opacity-90 leading-tight">{card.label}</div>
+                        <div className="text-xl font-bold mt-0.5">{stats[card.status]}</div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* 상세 정보 */}
+                {!selectedTask ? (
+                  <div className="flex items-center justify-center p-6">
+                    <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-10 py-8 text-center">
+                      <Inbox className="h-10 w-10 text-muted-foreground/40" />
+                      <p className="text-sm text-muted-foreground">좌측에서 업무를 선택해주세요</p>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="space-y-3">
+                    {/* 승인 프로세스 */}
+                    <div className="rounded-lg border border-border/80 bg-muted/30 p-3.5">
+                      <h3 className="mb-3 text-sm font-bold text-foreground">승인 프로세스</h3>
+                      <div className="mb-3 flex items-center gap-1">
+                        {APPROVAL_STEPS.map((s, idx) => {
+                          let stepClass = "border-border bg-card text-muted-foreground";
+                          if (selectedTask.status === "반려" && idx >= 2) {
+                            stepClass = idx === 2 ? "border-destructive bg-destructive/5 text-destructive" : "border-border bg-card text-muted-foreground";
+                          } else if (selectedTask.approvalStep > idx) {
+                            stepClass = "border-primary bg-primary/5 text-primary";
+                          } else if (selectedTask.approvalStep === idx) {
+                            stepClass = "border-primary bg-primary/5 text-primary ring-2 ring-primary/10";
+                          }
+                          return (
+                            <React.Fragment key={s.label}>
+                              <div className={cn("flex min-w-[70px] flex-col items-center gap-1 rounded-lg border-2 px-3 py-2 text-center text-xs font-semibold transition-all", stepClass)}>
+                                {s.label}
+                              </div>
+                              {idx < APPROVAL_STEPS.length - 1 && (
+                                <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground/50" />
+                              )}
+                            </React.Fragment>
+                          );
+                        })}
+                      </div>
+
+                      {/* 액션 버튼 */}
+                      <div className="flex flex-wrap gap-2">
+                        {selectedTask.status === "신규접수" && (
+                          <>
+                            <Button size="sm" variant="default" onClick={() => handleOpenDesignerModal(selectedTask.dbId)}>
+                              <Eye className="mr-1 h-3.5 w-3.5" /> 검토 착수
+                            </Button>
+                            <Button size="sm" variant="destructive" onClick={() => handleOpenRejectModal(selectedTask.dbId)}>
+                              <XCircle className="mr-1 h-3.5 w-3.5" /> 반려
+                            </Button>
+                          </>
+                        )}
+                        {selectedTask.status === "검토중" && (
+                          <>
+                            <Button size="sm" variant="default" onClick={() => handleApprove(selectedTask.dbId)}>
+                              <CheckCircle2 className="mr-1 h-3.5 w-3.5" /> 내부 승인
+                            </Button>
+                            <Button size="sm" variant="destructive" onClick={() => handleOpenRejectModal(selectedTask.dbId)}>
+                              <XCircle className="mr-1 h-3.5 w-3.5" /> 반려
+                            </Button>
+                          </>
+                        )}
+                        {selectedTask.status === "승인완료" && (
+                          <Button size="sm" variant="default" onClick={() => handleOpenProjectModal(selectedTask.dbId)}>
+                            <Rocket className="mr-1 h-3.5 w-3.5" /> 프로젝트 생성
+                          </Button>
+                        )}
+                        {selectedTask.status === "프로젝트생성" && selectedTask.projectNo && (
+                          <Button size="sm" variant="default" onClick={() => toast.info(`${selectedTask.projectNo} 프로젝트 → 설계프로젝트관리 메뉴에서 확인`)}>
+                            프로젝트 보기 ({selectedTask.projectNo})
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 접수 정보 */}
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">접수 정보</h3>
+                      <div className="text-xs">
+                        <table className="w-full border-collapse">
+                          <tbody>
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">접수번호</td>
+                              <td className={cn("border border-muted px-2 py-1.5 font-semibold", selectedTask.sourceType === "dr" ? "text-primary" : "text-secondary-foreground")}>
+                                {selectedTask.id}
+                              </td>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">구분</td>
+                              <td className="border border-muted px-2 py-1.5">
+                                <Badge variant="outline" className={cn("text-[10px] font-bold", getSourceBadge(selectedTask.sourceType))}>
+                                  {selectedTask.sourceType === "dr" ? "설계의뢰(DR)" : "설계변경(ECR)"}
+                                </Badge>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">상태</td>
+                              <td className="border border-muted px-2 py-1.5">
+                                <Badge variant="outline" className={cn("text-[10px]", getStatusVariant(selectedTask.status))}>
+                                  {selectedTask.status}
+                                </Badge>
+                              </td>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">우선순위</td>
+                              <td className="border border-muted px-2 py-1.5">
+                                <Badge variant="outline" className={cn("text-[10px]", getPriorityVariant(selectedTask.priority))}>
+                                  {selectedTask.priority}
+                                </Badge>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">
+                                {selectedTask.sourceType === "dr" ? "설비/품목명" : "품목명"}
+                              </td>
+                              <td colSpan={3} className="border border-muted px-2 py-1.5 font-medium">{selectedTask.targetName}</td>
+                            </tr>
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">의뢰부서</td>
+                              <td className="border border-muted px-2 py-1.5">{selectedTask.reqDept}</td>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">의뢰자</td>
+                              <td className="border border-muted px-2 py-1.5">{selectedTask.requester}</td>
+                            </tr>
+                            {selectedTask.sourceType === "dr" ? (
+                              <>
+                                <tr>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">설계유형</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.designType || "-"}</td>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">고객명</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.customer || "-"}</td>
+                                </tr>
+                                <tr>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">수주번호</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.orderNo || "-"}</td>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">설계담당</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.designer || <span className="text-muted-foreground">미배정</span>}</td>
+                                </tr>
+                              </>
+                            ) : (
+                              <>
+                                <tr>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">변경유형</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.changeType || "-"}</td>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">도면번호</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.drawingNo || "-"}</td>
+                                </tr>
+                                <tr>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">설계담당</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.designer || <span className="text-muted-foreground">미배정</span>}</td>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">영향범위</td>
+                                  <td className="border border-muted px-2 py-1.5">
+                                    {selectedTask.impact ? (
+                                      <div className="flex flex-wrap gap-1">
+                                        {selectedTask.impact.map((i) => (
+                                          <Badge key={i} variant="outline" className="bg-primary/5 text-[10px] text-primary">{i}</Badge>
+                                        ))}
+                                      </div>
+                                    ) : "-"}
+                                  </td>
+                                </tr>
+                              </>
+                            )}
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">접수일자</td>
+                              <td className="border border-muted px-2 py-1.5">{selectedTask.date}</td>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">희망납기</td>
+                              <td className="border border-muted px-2 py-1.5">
+                                {selectedTask.dueDate}{" "}
+                                <span className={cn("text-[10px]", getDueDateInfo(selectedTask.dueDate).color)}>
+                                  ({getDueDateInfo(selectedTask.dueDate).text})
+                                </span>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+
+                    {/* 요구사양 / 변경사유 */}
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">
+                        {selectedTask.sourceType === "dr" ? "요구사양" : "변경 사유"}
+                      </h3>
+                      <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed text-foreground">
+                        {selectedTask.sourceType === "dr" ? selectedTask.spec : selectedTask.reason}
+                      </pre>
+                    </div>
+
+                    {/* 검토 메모 */}
+                    <div className="rounded-lg border border-primary/20 bg-primary/5 p-3.5">
+                      <h3 className="mb-2 text-sm font-semibold text-foreground">검토 의견 / 메모</h3>
+                      <Textarea
+                        value={reviewMemoText}
+                        onChange={(e) => setReviewMemoText(e.target.value)}
+                        placeholder="검토 의견을 기록해주세요..."
+                        className="min-h-[60px] text-xs"
+                      />
+                      <div className="mt-2 text-right">
+                        <Button size="sm" onClick={handleSaveReviewMemo}>
+                          메모 저장
+                        </Button>
+                      </div>
+                    </div>
+
+                    {/* 처리 이력 */}
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">처리 이력</h3>
+                      <div className="relative pl-6">
+                        <div className="absolute bottom-0 left-[7px] top-0 w-0.5 bg-border" />
+                        {selectedTask.history.map((h, idx) => {
+                          const isLast = idx === selectedTask.history.length - 1;
+                          let dotColor = "bg-primary ring-primary";
+                          if (isLast) {
+                            if (h.step === "반려") dotColor = "bg-destructive ring-destructive";
+                            else if (h.step !== "프로젝트") dotColor = "bg-primary ring-primary animate-pulse";
+                          }
+                          return (
+                            <div key={idx} className={cn("relative pb-5", isLast && "pb-0")}>
+                              <div className={cn("absolute -left-[17px] top-1 h-3 w-3 rounded-full border-2 border-white ring-2", dotColor)} />
+                              <div className="pl-1">
+                                <div className="text-xs font-semibold text-foreground">
+                                  {getStepIcon(h.step)}
+                                  {h.step}
+                                </div>
+                                <div className="text-[11px] text-muted-foreground">{h.desc}</div>
+                                <div className="text-[10px] text-muted-foreground/70">{h.date} · {h.user}</div>
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 설계 담당자 선택 모달 */}
+      <Dialog open={designerModalOpen} onOpenChange={setDesignerModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>설계 담당자 배정</DialogTitle>
+            <DialogDescription>검토를 진행할 설계 담당자를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                설계 담당자 <span className="text-destructive">*</span>
+              </span>
+              <Popover open={designerComboOpen} onOpenChange={setDesignerComboOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={designerComboOpen}
+                    className="mt-1 h-9 w-full justify-between text-sm"
+                  >
+                    {designerModalValue
+                      ? (() => {
+                          const emp = employees.find((e) => e.userId === designerModalValue);
+                          return emp ? `${emp.userName} (${emp.deptName || "부서 미지정"})` : designerModalValue;
+                        })()
+                      : "사원 선택"}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                  <Command>
+                    <CommandInput placeholder="이름, 부서로 검색..." />
+                    <CommandList>
+                      <CommandEmpty className="py-3 text-center text-sm">사원을 찾을 수 없어요.</CommandEmpty>
+                      <CommandGroup>
+                        {employees.map((emp) => (
+                          <CommandItem
+                            key={emp.userId}
+                            value={`${emp.userName} ${emp.deptName} ${emp.userId}`}
+                            onSelect={() => {
+                              setDesignerModalValue(emp.userId);
+                              setDesignerComboOpen(false);
+                            }}
+                          >
+                            <Check className={cn("mr-2 h-4 w-4", designerModalValue === emp.userId ? "opacity-100" : "opacity-0")} />
+                            <UserCircle className="mr-2 h-4 w-4 text-muted-foreground" />
+                            <div className="flex flex-col">
+                              <span className="font-medium">{emp.userName}</span>
+                              <span className="text-[10px] text-muted-foreground">{emp.deptName || "부서 미지정"}</span>
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDesignerModalOpen(false)}>취소</Button>
+            <Button onClick={handleConfirmDesigner}>검토 착수</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 반려 사유 모달 */}
+      <Dialog open={rejectModalOpen} onOpenChange={setRejectModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>반려 처리</DialogTitle>
+            <DialogDescription>반려 사유를 상세히 기술해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                반려 사유 <span className="text-destructive">*</span>
+              </span>
+              <Textarea
+                value={rejectReason}
+                onChange={(e) => setRejectReason(e.target.value)}
+                placeholder="반려 사유를 상세히 기술해주세요"
+                className="mt-1 min-h-[120px] text-sm"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRejectModalOpen(false)}>취소</Button>
+            <Button variant="destructive" onClick={handleConfirmReject}>반려 확인</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 프로젝트 생성 모달 */}
+      <Dialog open={projectModalOpen} onOpenChange={setProjectModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>설계 프로젝트 생성</DialogTitle>
+            <DialogDescription>프로젝트 기본 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+        <div className="space-y-4">
+          <div className="rounded-lg bg-muted/50 p-4">
+            <h4 className="mb-3 border-b border-border pb-2 text-sm font-semibold">프로젝트 기본 정보</h4>
+            <div className="space-y-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 번호</span>
+                <Input value={projectForm.projNo} readOnly className="mt-1 h-9 bg-muted text-sm" />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                  프로젝트명 <span className="text-destructive">*</span>
+                </span>
+                <Input
+                  value={projectForm.projName}
+                  onChange={(e) => setProjectForm((p) => ({ ...p, projName: e.target.value }))}
+                  placeholder="프로젝트명 입력"
+                  className="mt-1 h-9 text-sm"
+                />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">원 접수번호</span>
+                <Input value={projectForm.projSourceNo} readOnly className="mt-1 h-9 bg-muted text-sm" />
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    시작일 <span className="text-destructive">*</span>
+                  </span>
+                  <Input
+                    type="date"
+                    value={projectForm.projStartDate}
+                    onChange={(e) => setProjectForm((p) => ({ ...p, projStartDate: e.target.value }))}
+                    className="mt-1 h-9 text-sm"
+                  />
+                </div>
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    종료예정일 <span className="text-destructive">*</span>
+                  </span>
+                  <Input
+                    type="date"
+                    value={projectForm.projEndDate}
+                    onChange={(e) => setProjectForm((p) => ({ ...p, projEndDate: e.target.value }))}
+                    className="mt-1 h-9 text-sm"
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    PM <span className="text-destructive">*</span>
+                  </span>
+                  <Popover open={pmComboOpen} onOpenChange={setPmComboOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={pmComboOpen}
+                        className="mt-1 h-9 w-full justify-between text-sm"
+                      >
+                        {projectForm.projPM
+                          ? employees.find((e) => e.userId === projectForm.projPM)?.userName || projectForm.projPM
+                          : "PM 선택"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                      <Command>
+                        <CommandInput placeholder="사원 검색..." />
+                        <CommandList>
+                          <CommandEmpty className="py-3 text-center text-sm">사원을 찾을 수 없어요.</CommandEmpty>
+                          <CommandGroup>
+                            {employees.map((emp) => (
+                              <CommandItem
+                                key={emp.userId}
+                                value={`${emp.userName} ${emp.deptName} ${emp.userId}`}
+                                onSelect={() => {
+                                  setProjectForm((p) => ({ ...p, projPM: emp.userId }));
+                                  setPmComboOpen(false);
+                                }}
+                              >
+                                <Check className={cn("mr-2 h-4 w-4", projectForm.projPM === emp.userId ? "opacity-100" : "opacity-0")} />
+                                <div className="flex flex-col">
+                                  <span className="font-medium">{emp.userName}</span>
+                                  <span className="text-[10px] text-muted-foreground">{emp.deptName || "부서 미지정"}</span>
+                                </div>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">고객명</span>
+                  <Input value={projectForm.projCustomer} readOnly className="mt-1 h-9 bg-muted text-sm" />
+                </div>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 설명</span>
+                <Textarea
+                  value={projectForm.projDesc}
+                  onChange={(e) => setProjectForm((p) => ({ ...p, projDesc: e.target.value }))}
+                  placeholder="프로젝트 개요 및 목표를 기술해주세요"
+                  className="mt-1 min-h-[80px] text-sm"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setProjectModalOpen(false)}>취소</Button>
+            <Button onClick={handleCreateProject}>프로젝트 생성</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/equipment/info/page.tsx b/frontend/app/(main)/COMPANY_30/equipment/info/page.tsx
new file mode 100644
index 00000000..cd53e9b1
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/equipment/info/page.tsx
@@ -0,0 +1,950 @@
+"use client";
+
+/**
+ * 설비정보 — 하드코딩 페이지
+ *
+ * 좌측: 설비 목록 (equipment_mng)
+ * 우측: 탭 (기본정보 / 점검항목 / 소모품)
+ * 점검항목 복사 기능 포함
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Inbox, ClipboardCheck, Package, Copy, Info, Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { ImageUpload } from "@/components/common/ImageUpload";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const EQUIP_TABLE = "equipment_mng";
+const INSPECTION_TABLE = "equipment_inspection_item";
+const CONSUMABLE_TABLE = "equipment_consumable";
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "equipment_code", label: "설비코드" },
+  { key: "equipment_name", label: "설비명" },
+  { key: "equipment_type", label: "설비유형" },
+  { key: "manufacturer", label: "제조사" },
+  { key: "installation_location", label: "설치장소" },
+  { key: "operation_status", label: "가동상태" },
+];
+export default function EquipmentInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 좌측
+  const [equipments, setEquipments] = useState<any[]>([]);
+  const [equipLoading, setEquipLoading] = useState(false);
+  const [equipCount, setEquipCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [selectedEquipId, setSelectedEquipId] = useState<string | null>(null);
+
+  // 우측 탭
+  const [rightTab, setRightTab] = useState<"info" | "inspection" | "consumable">("info");
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspectionLoading, setInspectionLoading] = useState(false);
+  const [consumables, setConsumables] = useState<any[]>([]);
+  const [consumableLoading, setConsumableLoading] = useState(false);
+
+  // 카테고리
+  const [catOptions, setCatOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 설비 등록/수정 모달
+  const [equipModalOpen, setEquipModalOpen] = useState(false);
+  const [equipEditMode, setEquipEditMode] = useState(false);
+  const [equipForm, setEquipForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 기본정보 탭 편집 폼
+  const [infoForm, setInfoForm] = useState<Record<string, any>>({});
+  const [infoSaving, setInfoSaving] = useState(false);
+
+  // 점검항목 추가/수정 모달
+  const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
+  const [inspectionForm, setInspectionForm] = useState<Record<string, any>>({});
+  const [inspectionContinuous, setInspectionContinuous] = useState(false);
+  const [inspectionEditMode, setInspectionEditMode] = useState(false);
+
+  // 소모품 추가/수정 모달
+  const [consumableModalOpen, setConsumableModalOpen] = useState(false);
+  const [consumableForm, setConsumableForm] = useState<Record<string, any>>({});
+  const [consumableContinuous, setConsumableContinuous] = useState(false);
+  const [consumableEditMode, setConsumableEditMode] = useState(false);
+  const [consumableItemOptions, setConsumableItemOptions] = useState<any[]>([]);
+
+  // 점검항목 복사
+  const [copyModalOpen, setCopyModalOpen] = useState(false);
+  const [copySourceEquip, setCopySourceEquip] = useState("");
+  const [copyItems, setCopyItems] = useState<any[]>([]);
+  const [copyChecked, setCopyChecked] = useState<Set<string>>(new Set());
+  const [copyLoading, setCopyLoading] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-equipment-info", EQUIP_TABLE, GRID_COLUMNS_CONFIG);
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["equipment_type", "operation_status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${EQUIP_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      for (const col of ["inspection_cycle", "inspection_method"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${INSPECTION_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCatOptions(optMap);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return catOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      equipment_code: { width: "w-[110px]" },
+      equipment_name: { minWidth: "min-w-[130px]", truncate: true, render: (v) => v || "-" },
+      equipment_type: { width: "w-[90px]", render: (v) => v || "-" },
+      manufacturer: { width: "w-[100px]", render: (v) => v || "-" },
+      installation_location: { width: "w-[100px]", render: (v) => v || "-" },
+      operation_status: { width: "w-[80px]", render: (v) => v || "-" },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 설비 조회
+  const fetchEquipments = useCallback(async () => {
+    setEquipLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${EQUIP_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setEquipments(raw.map((r: any) => ({
+        ...r,
+        equipment_type: resolve("equipment_type", r.equipment_type),
+        operation_status: resolve("operation_status", r.operation_status),
+      })));
+      setEquipCount(res.data?.data?.total || raw.length);
+    } catch { toast.error("설비 목록 조회 실패"); } finally { setEquipLoading(false); }
+  }, [searchFilters, catOptions]);
+
+  useEffect(() => { fetchEquipments(); }, [fetchEquipments]);
+
+  const selectedEquip = equipments.find((e) => e.id === selectedEquipId);
+
+  // 기본정보 탭 폼 초기화 (설비 선택 변경 시)
+  useEffect(() => {
+    if (selectedEquip) setInfoForm({ ...selectedEquip });
+    else setInfoForm({});
+  }, [selectedEquipId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 기본정보 저장
+  const handleInfoSave = async () => {
+    if (!infoForm.id) return;
+    setInfoSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, ...fields } = infoForm;
+      await apiClient.put(`/table-management/tables/${EQUIP_TABLE}/edit`, { originalData: { id }, updatedData: fields });
+      toast.success("저장되었습니다.");
+      fetchEquipments();
+    } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); }
+    finally { setInfoSaving(false); }
+  };
+
+  // 우측: 점검항목 조회
+  useEffect(() => {
+    if (!selectedEquip?.equipment_code) { setInspections([]); return; }
+    const fetchData = async () => {
+      setInspectionLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "equipment_code", operator: "equals", value: selectedEquip.equipment_code }] },
+          autoFilter: true,
+        });
+        setInspections(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setInspections([]); } finally { setInspectionLoading(false); }
+    };
+    fetchData();
+  }, [selectedEquip?.equipment_code]);
+
+  // 우측: 소모품 조회
+  useEffect(() => {
+    if (!selectedEquip?.equipment_code) { setConsumables([]); return; }
+    const fetchData = async () => {
+      setConsumableLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "equipment_code", operator: "equals", value: selectedEquip.equipment_code }] },
+          autoFilter: true,
+        });
+        setConsumables(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setConsumables([]); } finally { setConsumableLoading(false); }
+    };
+    fetchData();
+  }, [selectedEquip?.equipment_code]);
+
+  // 새로고침 헬퍼
+  const refreshRight = () => {
+    const eid = selectedEquipId;
+    setSelectedEquipId(null);
+    setTimeout(() => setSelectedEquipId(eid), 50);
+  };
+
+  // 설비 등록/수정
+  const openEquipRegister = () => { setEquipForm({}); setEquipEditMode(false); setEquipModalOpen(true); };
+  const openEquipEdit = () => { if (!selectedEquip) return; setEquipForm({ ...selectedEquip }); setEquipEditMode(true); setEquipModalOpen(true); };
+
+  const handleEquipSave = async () => {
+    if (!equipForm.equipment_name) { toast.error("설비명은 필수입니다."); return; }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, ...fields } = equipForm;
+      if (equipEditMode && id) {
+        await apiClient.put(`/table-management/tables/${EQUIP_TABLE}/edit`, { originalData: { id }, updatedData: fields });
+        toast.success("수정되었습니다.");
+      } else {
+        await apiClient.post(`/table-management/tables/${EQUIP_TABLE}/add`, { id: crypto.randomUUID(), ...fields });
+        toast.success("등록되었습니다.");
+      }
+      setEquipModalOpen(false); fetchEquipments();
+    } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
+  };
+
+  const handleEquipDelete = async () => {
+    if (!selectedEquipId) return;
+    const ok = await confirm("설비를 삭제하시겠습니까?", { description: "관련 점검항목, 소모품도 함께 삭제됩니다.", variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${EQUIP_TABLE}/delete`, { data: [{ id: selectedEquipId }] });
+      toast.success("삭제되었습니다."); setSelectedEquipId(null); fetchEquipments();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // 점검항목 추가
+  const handleInspectionSave = async () => {
+    if (!inspectionForm.inspection_item) { toast.error("점검항목명은 필수입니다."); return; }
+    if (!inspectionForm.inspection_cycle) { toast.error("점검주기는 필수입니다."); return; }
+    if (!inspectionForm.inspection_method) { toast.error("점검방법은 필수입니다."); return; }
+    const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+    const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+    if (isNumeric && !inspectionForm.unit) { toast.error("측정단위가 필수입니다."); return; }
+    // 기준값/오차범위 → 하한치/상한치 자동 계산
+    const saveData = { ...inspectionForm };
+    if (isNumeric && saveData.standard_value) {
+      const std = Number(saveData.standard_value) || 0;
+      const tol = Number(saveData.tolerance) || 0;
+      saveData.lower_limit = String(std - tol);
+      saveData.upper_limit = String(std + tol);
+    }
+    if (!isNumeric) {
+      saveData.unit = "";
+      saveData.standard_value = "";
+      saveData.tolerance = "";
+      saveData.lower_limit = "";
+      saveData.upper_limit = "";
+    }
+    setSaving(true);
+    try {
+      if (inspectionEditMode) {
+        await apiClient.put(`/table-management/tables/${INSPECTION_TABLE}/edit`, {
+          originalData: { id: saveData.id }, updatedData: { ...saveData, equipment_code: selectedEquip?.equipment_code },
+        });
+        toast.success("수정되었습니다.");
+        setInspectionModalOpen(false);
+      } else {
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          id: crypto.randomUUID(), ...saveData, equipment_code: selectedEquip?.equipment_code,
+        });
+        toast.success("추가되었습니다.");
+        if (inspectionContinuous) {
+          setInspectionForm({});
+        } else {
+          setInspectionModalOpen(false);
+        }
+      }
+      refreshRight();
+    } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
+  };
+
+  // 소모품 품목 로드
+  const loadConsumableItems = async () => {
+    try {
+      const flatten = (vals: any[]): any[] => {
+        const r: any[] = [];
+        for (const v of vals) { r.push(v); if (v.children?.length) r.push(...flatten(v.children)); }
+        return r;
+      };
+      const [typeRes, divRes] = await Promise.all([
+        apiClient.get(`/table-categories/item_info/type/values`),
+        apiClient.get(`/table-categories/item_info/division/values`),
+      ]);
+      const consumableType = flatten(typeRes.data?.data || []).find((t: any) => t.valueLabel === "소모품");
+      const consumableDiv = flatten(divRes.data?.data || []).find((t: any) => t.valueLabel === "소모품");
+      if (!consumableType && !consumableDiv) { setConsumableItemOptions([]); return; }
+      const filters: any[] = [];
+      if (consumableType) filters.push({ columnName: "type", operator: "equals", value: consumableType.valueCode });
+      if (consumableDiv) filters.push({ columnName: "division", operator: "equals", value: consumableDiv.valueCode });
+      const results = await Promise.all(filters.map((f) =>
+        apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [f] },
+          autoFilter: true,
+        })
+      ));
+      const allItems = new Map<string, any>();
+      for (const res of results) {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        for (const row of rows) allItems.set(row.id, row);
+      }
+      setConsumableItemOptions(Array.from(allItems.values()));
+    } catch { setConsumableItemOptions([]); }
+  };
+
+  const handleConsumableSave = async () => {
+    if (!consumableForm.consumable_name) { toast.error("소모품명은 필수입니다."); return; }
+    setSaving(true);
+    try {
+      if (consumableEditMode) {
+        await apiClient.put(`/table-management/tables/${CONSUMABLE_TABLE}/edit`, {
+          originalData: { id: consumableForm.id }, updatedData: { ...consumableForm, equipment_code: selectedEquip?.equipment_code },
+        });
+        toast.success("수정되었습니다.");
+        setConsumableModalOpen(false);
+      } else {
+        await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/add`, {
+          id: crypto.randomUUID(), ...consumableForm, equipment_code: selectedEquip?.equipment_code,
+        });
+        toast.success("추가되었습니다.");
+        if (consumableContinuous) {
+          setConsumableForm({});
+        } else {
+          setConsumableModalOpen(false);
+        }
+      }
+      refreshRight();
+    } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
+  };
+
+  // 점검항목 복사
+  const loadCopyItems = async (equipCode: string) => {
+    setCopySourceEquip(equipCode);
+    setCopyChecked(new Set());
+    if (!equipCode) { setCopyItems([]); return; }
+    setCopyLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "equipment_code", operator: "equals", value: equipCode }] },
+        autoFilter: true,
+      });
+      setCopyItems(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setCopyItems([]); } finally { setCopyLoading(false); }
+  };
+
+  const handleCopyApply = async () => {
+    const selected = copyItems.filter((i) => copyChecked.has(i.id));
+    if (selected.length === 0) { toast.error("복사할 항목을 선택해주세요."); return; }
+    setSaving(true);
+    try {
+      for (const item of selected) {
+        const { id, created_date, updated_date, writer, company_code, equipment_code, ...fields } = item;
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          ...fields, equipment_code: selectedEquip?.equipment_code,
+        });
+      }
+      toast.success(`${selected.length}개 점검항목이 복사되었습니다.`);
+      setCopyModalOpen(false); refreshRight();
+    } catch { toast.error("복사 실패"); } finally { setSaving(false); }
+  };
+
+  // 엑셀
+  const handleExcelDownload = async () => {
+    if (equipments.length === 0) return;
+    await exportToExcel(equipments.map((e) => ({
+      설비코드: e.equipment_code, 설비명: e.equipment_name, 설비유형: e.equipment_type,
+      제조사: e.manufacturer, 모델명: e.model_name, 설치장소: e.installation_location,
+      도입일자: e.introduction_date, 가동상태: e.operation_status,
+    })), "설비정보.xlsx", "설비");
+    toast.success("다운로드 완료");
+  };
+
+  // 셀렉트 렌더링 헬퍼
+  const catSelect = (key: string, value: string, onChange: (v: string) => void, placeholder: string) => (
+    <Select value={value || ""} onValueChange={onChange}>
+      <SelectTrigger className="h-9"><SelectValue placeholder={placeholder} /></SelectTrigger>
+      <SelectContent>
+        {(catOptions[key] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+      </SelectContent>
+    </Select>
+  );
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>설비관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">설비정보</span>
+      </div>
+
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={EQUIP_TABLE}
+        filterId="c16-equipment-info"
+        onFilterChange={setSearchFilters}
+        dataCount={equipCount}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex gap-1.5">
+            <Button variant="outline" size="sm" className="h-9" disabled={excelDetecting}
+              onClick={async () => {
+                setExcelDetecting(true);
+                try {
+                  const r = await autoDetectMultiTableConfig(EQUIP_TABLE);
+                  if (r.success && r.data) { setExcelChainConfig(r.data); setExcelUploadOpen(true); }
+                  else toast.error("테이블 구조 분석 실패");
+                } catch { toast.error("오류"); } finally { setExcelDetecting(false); }
+              }}>
+              {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />} 엑셀 업로드
+            </Button>
+            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
+              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+            </Button>
+          </div>
+        }
+      />
+
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 설비 목록 */}
+          <ResizablePanel defaultSize={40} minSize={25}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">설비 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{equipCount}건</span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" onClick={openEquipRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
+                  <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={openEquipEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
+                  <div className="h-4 w-px bg-border" />
+                  <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={handleEquipDelete} className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                  <div className="h-4 w-px bg-border" />
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <EDataTable
+                columns={mainTableColumns}
+                data={ts.groupData(equipments)}
+                loading={equipLoading}
+                emptyMessage="등록된 설비가 없어요"
+                selectedId={selectedEquipId}
+                onSelect={(id) => setSelectedEquipId(id)}
+                onRowDoubleClick={() => openEquipEdit()}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-equipment-info-main"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 탭 */}
+          <ResizablePanel defaultSize={60} minSize={30}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between p-2 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-1">
+                  {([["info", "기본정보", Info], ["inspection", "점검항목", ClipboardCheck], ["consumable", "소모품", Package]] as const).map(([tab, label, Icon]) => (
+                    <button key={tab} onClick={() => setRightTab(tab)}
+                      className={cn("px-3 py-1.5 text-sm rounded-md transition-colors flex items-center gap-1",
+                        rightTab === tab ? "bg-primary text-primary-foreground font-medium" : "hover:bg-muted text-muted-foreground")}>
+                      <Icon className="w-3.5 h-3.5" />{label}
+                      {tab === "inspection" && inspections.length > 0 && <Badge variant="secondary" className="ml-1 text-[10px] px-1">{inspections.length}</Badge>}
+                      {tab === "consumable" && consumables.length > 0 && <Badge variant="secondary" className="ml-1 text-[10px] px-1">{consumables.length}</Badge>}
+                    </button>
+                  ))}
+                  {selectedEquip && <Badge variant="outline" className="font-normal ml-2 text-xs">{selectedEquip.equipment_name}</Badge>}
+                </div>
+                <div className="flex gap-1.5">
+                  {rightTab === "inspection" && (
+                    <>
+                      <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setInspectionForm({}); setInspectionEditMode(false); setInspectionModalOpen(true); }}>
+                        <Plus className="w-3.5 h-3.5 mr-1" /> 추가
+                      </Button>
+                      <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setCopySourceEquip(""); setCopyItems([]); setCopyChecked(new Set()); setCopyModalOpen(true); }}>
+                        <Copy className="w-3.5 h-3.5 mr-1" /> 복사
+                      </Button>
+                    </>
+                  )}
+                  {rightTab === "consumable" && (
+                    <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setConsumableForm({}); setConsumableEditMode(false); loadConsumableItems(); setConsumableModalOpen(true); }}>
+                      <Plus className="w-3.5 h-3.5 mr-1" /> 추가
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              {!selectedEquipId ? (
+                <div className="flex-1 flex flex-col items-center justify-center gap-3 m-3 border-2 border-dashed rounded-lg text-center">
+                  <Inbox className="w-12 h-12 text-muted-foreground/40" />
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">설비를 선택해주세요</p>
+                    <p className="text-xs text-muted-foreground mt-1">좌측에서 설비를 선택하면 상세 정보가 표시돼요</p>
+                  </div>
+                </div>
+              ) : rightTab === "info" ? (
+                <div className="p-4 overflow-auto">
+                  <div className="flex justify-end mb-3">
+                    <Button size="sm" onClick={handleInfoSave} disabled={infoSaving}>
+                      {infoSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+                    </Button>
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-1.5">
+                      <Label className="text-sm text-muted-foreground">설비코드</Label>
+                      <Input value={infoForm.equipment_code || ""} className="h-9 bg-muted/50" disabled />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">설비명</Label>
+                      <Input value={infoForm.equipment_name || ""} onChange={(e) => setInfoForm((p) => ({ ...p, equipment_name: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">설비유형</Label>
+                      {catSelect("equipment_type", infoForm.equipment_type, (v) => setInfoForm((p) => ({ ...p, equipment_type: v })), "설비유형")}
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">설치장소</Label>
+                      <Input value={infoForm.installation_location || ""} onChange={(e) => setInfoForm((p) => ({ ...p, installation_location: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">제조사</Label>
+                      <Input value={infoForm.manufacturer || ""} onChange={(e) => setInfoForm((p) => ({ ...p, manufacturer: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">모델명</Label>
+                      <Input value={infoForm.model_name || ""} onChange={(e) => setInfoForm((p) => ({ ...p, model_name: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">도입일자</Label>
+                      <Input type="date" value={infoForm.introduction_date || ""} onChange={(e) => setInfoForm((p) => ({ ...p, introduction_date: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">가동상태</Label>
+                      {catSelect("operation_status", infoForm.operation_status, (v) => setInfoForm((p) => ({ ...p, operation_status: v })), "가동상태")}
+                    </div>
+                    <div className="space-y-1.5 col-span-2">
+                      <Label className="text-sm">비고</Label>
+                      <Input value={infoForm.remarks || ""} onChange={(e) => setInfoForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5 col-span-2">
+                      <Label className="text-sm">이미지</Label>
+                      <ImageUpload value={infoForm.image_path} onChange={(v) => setInfoForm((p) => ({ ...p, image_path: v }))}
+                        tableName={EQUIP_TABLE} recordId={infoForm.id} columnName="image_path" />
+                    </div>
+                  </div>
+                </div>
+              ) : rightTab === "inspection" ? (
+                <div className="flex-1 overflow-auto">
+                  {inspectionLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : inspections.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <ClipboardCheck className="w-8 h-8 mb-2 opacity-40" />
+                      <p className="text-sm">점검항목이 없어요</p>
+                    </div>
+                  ) : (
+                    <Table noWrapper>
+                      <thead className="sticky top-0 z-10 bg-card">
+                        <TableRow>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검항목</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">하한치</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한치</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검내용</TableHead>
+                        </TableRow>
+                      </thead>
+                      <TableBody>
+                        {inspections.map((item) => (
+                          <TableRow key={item.id} className="cursor-pointer hover:bg-primary/5" onDoubleClick={() => {
+                            const std = item.standard_value || "";
+                            const tol = item.tolerance || "";
+                            setInspectionForm({ ...item, standard_value: std, tolerance: tol });
+                            setInspectionEditMode(true);
+                            setInspectionModalOpen(true);
+                          }}>
+                            <TableCell className="text-sm">{item.inspection_item || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
+                            <TableCell className="text-[13px]">{resolve("inspection_method", item.inspection_method)}</TableCell>
+                            <TableCell className="text-[13px]">{item.lower_limit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.upper_limit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.inspection_content || "-"}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              ) : (
+                <div className="flex-1 overflow-auto">
+                  {consumableLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : consumables.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Package className="w-8 h-8 mb-2 opacity-40" />
+                      <p className="text-sm">소모품이 없어요</p>
+                    </div>
+                  ) : (
+                    <Table noWrapper>
+                      <thead className="sticky top-0 z-10 bg-card">
+                        <TableRow>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">소모품명</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">교체주기</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">제조사</TableHead>
+                        </TableRow>
+                      </thead>
+                      <TableBody>
+                        {consumables.map((item) => (
+                          <TableRow key={item.id} className="cursor-pointer hover:bg-primary/5" onDoubleClick={() => {
+                            setConsumableForm({ ...item });
+                            setConsumableEditMode(true);
+                            loadConsumableItems();
+                            setConsumableModalOpen(true);
+                          }}>
+                            <TableCell className="text-sm">{item.consumable_name || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.replacement_cycle || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.specification || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.manufacturer || "-"}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 설비 등록/수정 모달 */}
+      <Dialog open={equipModalOpen} onOpenChange={setEquipModalOpen}>
+        <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{equipEditMode ? "설비 수정" : "설비 등록"}</DialogTitle>
+            <DialogDescription>{equipEditMode ? "설비 정보를 수정합니다." : "새로운 설비를 등록합니다."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+            <div className="grid grid-cols-2 gap-4 py-4">
+              <div className="space-y-1.5"><Label className="text-sm">설비코드</Label>
+                <Input value={equipForm.equipment_code || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_code: e.target.value }))} placeholder="설비코드" className="h-9" disabled={equipEditMode} /></div>
+              <div className="space-y-1.5"><Label className="text-sm">설비명 <span className="text-destructive">*</span></Label>
+                <Input value={equipForm.equipment_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_name: e.target.value }))} placeholder="설비명" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">설비유형</Label>
+                {catSelect("equipment_type", equipForm.equipment_type, (v) => setEquipForm((p) => ({ ...p, equipment_type: v })), "설비유형")}</div>
+              <div className="space-y-1.5"><Label className="text-sm">가동상태</Label>
+                {catSelect("operation_status", equipForm.operation_status, (v) => setEquipForm((p) => ({ ...p, operation_status: v })), "가동상태")}</div>
+              <div className="space-y-1.5"><Label className="text-sm">설치장소</Label>
+                <Input value={equipForm.installation_location || ""} onChange={(e) => setEquipForm((p) => ({ ...p, installation_location: e.target.value }))} placeholder="설치장소" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">제조사</Label>
+                <Input value={equipForm.manufacturer || ""} onChange={(e) => setEquipForm((p) => ({ ...p, manufacturer: e.target.value }))} placeholder="제조사" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">모델명</Label>
+                <Input value={equipForm.model_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, model_name: e.target.value }))} placeholder="모델명" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">도입일자</Label>
+                <Input type="date" value={equipForm.introduction_date || ""} onChange={(e) => setEquipForm((p) => ({ ...p, introduction_date: e.target.value }))} className="h-9" /></div>
+              <div className="space-y-1.5 col-span-2"><Label className="text-sm">비고</Label>
+                <Input value={equipForm.remarks || ""} onChange={(e) => setEquipForm((p) => ({ ...p, remarks: e.target.value }))} placeholder="비고" className="h-9" /></div>
+              <div className="space-y-1.5 col-span-2"><Label className="text-sm">이미지</Label>
+                <ImageUpload value={equipForm.image_path} onChange={(v) => setEquipForm((p) => ({ ...p, image_path: v }))}
+                  tableName={EQUIP_TABLE} recordId={equipForm.id} columnName="image_path" /></div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEquipModalOpen(false)}>취소</Button>
+            <Button onClick={handleEquipSave} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 점검항목 추가 모달 */}
+      <Dialog open={inspectionModalOpen} onOpenChange={setInspectionModalOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader><DialogTitle>{inspectionEditMode ? "점검항목 수정" : "점검항목 추가"}</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 점검항목을 {inspectionEditMode ? "수정" : "추가"}합니다.</DialogDescription></DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1.5"><Label className="text-sm">점검항목명 <span className="text-destructive">*</span></Label>
+                <Input value={inspectionForm.inspection_item || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_item: e.target.value }))} placeholder="예: 온도점검, 진동점검" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">점검주기 <span className="text-destructive">*</span></Label>
+                {catSelect("inspection_cycle", inspectionForm.inspection_cycle, (v) => setInspectionForm((p) => ({ ...p, inspection_cycle: v })), "점검주기")}</div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1.5"><Label className="text-sm">점검방법 <span className="text-destructive">*</span></Label>
+                {catSelect("inspection_method", inspectionForm.inspection_method, (v) => {
+                  const label = resolve("inspection_method", v);
+                  const isNum = ["숫자", "치수검사"].includes(label) || ["숫자", "치수검사"].includes(v);
+                  if (!isNum) {
+                    setInspectionForm((p) => ({ ...p, inspection_method: v, unit: "", standard_value: "", tolerance: "", lower_limit: "", upper_limit: "" }));
+                  } else {
+                    setInspectionForm((p) => ({ ...p, inspection_method: v }));
+                  }
+                }, "점검방법")}</div>
+              {(() => {
+                const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+                const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+                if (!isNumeric) return null;
+                return (
+                  <div className="space-y-1.5"><Label className="text-sm">측정 단위 <span className="text-destructive">*</span></Label>
+                    <Input value={inspectionForm.unit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, unit: e.target.value }))} placeholder="예: ℃, mm, V" className="h-9" /></div>
+                );
+              })()}
+            </div>
+            {(() => {
+              const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+              const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+              if (!isNumeric) return null;
+              return (
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5"><Label className="text-sm">기준값</Label>
+                    <Input value={inspectionForm.standard_value || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, standard_value: e.target.value }))} placeholder="기준값 입력" className="h-9" type="number" /></div>
+                  <div className="space-y-1.5"><Label className="text-sm">±오차범위</Label>
+                    <Input value={inspectionForm.tolerance || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, tolerance: e.target.value }))} placeholder="허용 오차범위" className="h-9" type="number" /></div>
+                </div>
+              );
+            })()}
+            <div className="space-y-1.5"><Label className="text-sm">점검내용</Label>
+              <textarea
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={inspectionForm.inspection_content || ""}
+                onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_content: e.target.value }))}
+                placeholder="점검 항목 및 내용 입력"
+              /></div>
+            <div className="space-y-1.5"><Label className="text-sm">체크리스트 (선택사항)</Label>
+              <textarea
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={inspectionForm.checklist || ""}
+                onChange={(e) => setInspectionForm((p) => ({ ...p, checklist: e.target.value }))}
+                placeholder="점검 체크리스트 입력 (줄바꿈으로 구분)"
+              /></div>
+          </div>
+          <DialogFooter className="flex items-center justify-between sm:justify-between">
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <Checkbox checked={inspectionContinuous} onCheckedChange={(c) => setInspectionContinuous(!!c)} />
+              저장 후 계속 입력
+            </label>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setInspectionModalOpen(false)}>취소</Button>
+              <Button onClick={handleInspectionSave} disabled={saving}><Save className="w-4 h-4 mr-1.5" /> 저장</Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 소모품 추가 모달 */}
+      <Dialog open={consumableModalOpen} onOpenChange={setConsumableModalOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader><DialogTitle>{consumableEditMode ? "소모품 수정" : "소모품 추가"}</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 소모품을 {consumableEditMode ? "수정" : "추가"}합니다.</DialogDescription></DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            <div className="space-y-1.5 col-span-2"><Label className="text-sm">소모품명 <span className="text-destructive">*</span></Label>
+              {consumableItemOptions.length > 0 ? (
+                <Select value={consumableForm.consumable_name || ""} onValueChange={(v) => {
+                  const item = consumableItemOptions.find((i) => (i.item_name || i.item_number) === v);
+                  setConsumableForm((p) => ({
+                    ...p,
+                    consumable_name: v,
+                    specification: item?.size || p.specification || "",
+                    unit: item?.unit || p.unit || "",
+                    manufacturer: item?.manufacturer || p.manufacturer || "",
+                  }));
+                }}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="소모품 선택" /></SelectTrigger>
+                  <SelectContent>
+                    {consumableItemOptions.map((item) => (
+                      <SelectItem key={item.id} value={item.item_name || item.item_number}>
+                        {item.item_name}{item.size ? ` (${item.size})` : ""}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <div>
+                  <Input value={consumableForm.consumable_name || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, consumable_name: e.target.value }))}
+                    placeholder="소모품명 직접 입력" className="h-9" />
+                  <p className="text-xs text-muted-foreground mt-1">품목정보에 소모품 타입 품목을 등록하면 선택 가능합니다</p>
+                </div>
+              )}</div>
+            <div className="space-y-1.5"><Label className="text-sm">교체주기</Label>
+              <Input value={consumableForm.replacement_cycle || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, replacement_cycle: e.target.value }))} placeholder="교체주기" className="h-9" /></div>
+            <div className="space-y-1.5"><Label className="text-sm">단위</Label>
+              <Input value={consumableForm.unit || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, unit: e.target.value }))} placeholder="단위" className="h-9" /></div>
+            <div className="space-y-1.5"><Label className="text-sm">규격</Label>
+              <Input value={consumableForm.specification || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, specification: e.target.value }))} placeholder="규격" className="h-9" /></div>
+            <div className="space-y-1.5"><Label className="text-sm">제조사</Label>
+              <Input value={consumableForm.manufacturer || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, manufacturer: e.target.value }))} placeholder="제조사" className="h-9" /></div>
+            <div className="space-y-1.5 col-span-2"><Label className="text-sm">이미지</Label>
+              <ImageUpload value={consumableForm.image_path} onChange={(v) => setConsumableForm((p) => ({ ...p, image_path: v }))}
+                tableName={CONSUMABLE_TABLE} columnName="image_path" /></div>
+          </div>
+          <DialogFooter className="flex items-center justify-between sm:justify-between">
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <Checkbox checked={consumableContinuous} onCheckedChange={(c) => setConsumableContinuous(!!c)} />
+              저장 후 계속 입력
+            </label>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setConsumableModalOpen(false)}>취소</Button>
+              <Button onClick={handleConsumableSave} disabled={saving}><Save className="w-4 h-4 mr-1.5" /> 저장</Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 점검항목 복사 모달 */}
+      <Dialog open={copyModalOpen} onOpenChange={setCopyModalOpen}>
+        <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden">
+          <DialogHeader><DialogTitle>점검항목 복사</DialogTitle>
+            <DialogDescription>다른 설비의 점검항목을 선택하여 {selectedEquip?.equipment_name}에 복사합니다.</DialogDescription></DialogHeader>
+          <div className="space-y-3 flex-1 overflow-y-auto">
+            <div className="space-y-1.5">
+              <Label className="text-sm">소스 설비 선택</Label>
+              <Select value={copySourceEquip} onValueChange={(v) => loadCopyItems(v)}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="복사할 설비 선택" /></SelectTrigger>
+                <SelectContent>
+                  {equipments.filter((e) => e.equipment_code !== selectedEquip?.equipment_code).map((e) => (
+                    <SelectItem key={e.equipment_code} value={e.equipment_code}>{e.equipment_name} ({e.equipment_code})</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="border rounded-lg overflow-auto max-h-[300px]">
+              {copyLoading ? (
+                <div className="flex items-center justify-center py-8"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
+              ) : copyItems.length === 0 ? (
+                <div className="text-center text-muted-foreground py-8 text-sm">{copySourceEquip ? "점검항목이 없어요" : "설비를 선택해주세요"}</div>
+              ) : (
+                <Table noWrapper>
+                  <thead className="sticky top-0 z-10 bg-card">
+                    <TableRow>
+                      <TableHead className="w-[40px] text-center">
+                        <input type="checkbox" checked={copyItems.length > 0 && copyChecked.size === copyItems.length}
+                          onChange={(e) => { if (e.target.checked) setCopyChecked(new Set(copyItems.map((i) => i.id))); else setCopyChecked(new Set()); }} />
+                      </TableHead>
+                      <TableHead>점검항목</TableHead><TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead><TableHead className="w-[70px]">하한</TableHead>
+                      <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한</TableHead><TableHead className="w-[60px]">단위</TableHead>
+                    </TableRow>
+                  </thead>
+                  <TableBody>
+                    {copyItems.map((item) => (
+                      <TableRow key={item.id} className={cn("cursor-pointer", copyChecked.has(item.id) && "bg-primary/5")}
+                        onClick={() => setCopyChecked((prev) => { const n = new Set(prev); if (n.has(item.id)) n.delete(item.id); else n.add(item.id); return n; })}>
+                        <TableCell className="text-center"><input type="checkbox" checked={copyChecked.has(item.id)} readOnly /></TableCell>
+                        <TableCell className="text-sm">{item.inspection_item}</TableCell>
+                        <TableCell className="text-[13px]">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
+                        <TableCell className="text-[13px]">{resolve("inspection_method", item.inspection_method)}</TableCell>
+                        <TableCell className="text-[13px]">{item.lower_limit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{item.upper_limit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              )}
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{copyChecked.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setCopyModalOpen(false)}>취소</Button>
+                <Button onClick={handleCopyApply} disabled={saving || copyChecked.size === 0}>
+                  {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Copy className="w-4 h-4 mr-1.5" />} 복사 적용
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal open={excelUploadOpen}
+          onOpenChange={(open) => { setExcelUploadOpen(open); if (!open) setExcelChainConfig(null); }}
+          config={excelChainConfig} onSuccess={() => { fetchEquipments(); refreshRight(); }} />
+      )}
+
+      {/* 테이블 설정 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/equipment/plc-settings/page.tsx b/frontend/app/(main)/COMPANY_30/equipment/plc-settings/page.tsx
new file mode 100644
index 00000000..4e94d293
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/equipment/plc-settings/page.tsx
@@ -0,0 +1,501 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, Pencil, Cpu, Settings2, Search, Inbox,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+
+/* ───── 테이블명 ───── */
+const DATATYPE_TABLE = "plc_data_type";
+
+const DATATYPE_COLUMNS = [
+  { key: "equipment_code", label: "설비코드" },
+  { key: "data_type", label: "데이터타입" },
+  { key: "unit", label: "단위" },
+  { key: "tag_address", label: "태그주소" },
+  { key: "collection_interval", label: "수집주기" },
+  { key: "lower_limit", label: "하한값" },
+  { key: "upper_limit", label: "상한값" },
+  { key: "is_active", label: "사용여부" },
+];
+const COLLECTION_TABLE = "plc_collection_config";
+const EQUIPMENT_TABLE = "equipment_mng";
+
+/* ───── Cron 한글 변환 ───── */
+const cronToKorean = (cron: string): string => {
+  if (!cron) return "";
+  const parts = cron.trim().split(/\s+/);
+  if (parts.length < 5) return cron;
+  const [min, hour] = parts;
+  if (min === "*" && hour === "*") return "매 분마다";
+  if (min !== "*" && hour === "*") return `매시 ${min}분마다`;
+  if (min === "0" && hour !== "*") return `매일 ${hour}시 정각`;
+  if (min === "*/5") return "5분마다";
+  if (min === "*/10") return "10분마다";
+  if (min === "*/30") return "30분마다";
+  return cron;
+};
+
+/* ───── 카테고리 flatten ───── */
+const flattenCategories = (vals: any[]): { code: string; label: string }[] => {
+  const result: { code: string; label: string }[] = [];
+  for (const v of vals) {
+    result.push({ code: v.valueCode, label: v.valueLabel });
+    if (v.children?.length) result.push(...flattenCategories(v.children));
+  }
+  return result;
+};
+
+export default function PlcSettingsPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-plc-settings", DATATYPE_TABLE, DATATYPE_COLUMNS);
+
+  const [activeTab, setActiveTab] = useState("datatype");
+
+  /* ───── PLC 데이터타입 ───── */
+  const [datatypes, setDatatypes] = useState<any[]>([]);
+  const [dtLoading, setDtLoading] = useState(false);
+  const [dtCount, setDtCount] = useState(0);
+  const [dtChecked, setDtChecked] = useState<string[]>([]);
+  const [dtModalOpen, setDtModalOpen] = useState(false);
+  const [dtEditMode, setDtEditMode] = useState(false);
+  const [dtForm, setDtForm] = useState<Record<string, any>>({});
+  const [dtSaving, setDtSaving] = useState(false);
+  const [dtKeyword, setDtKeyword] = useState("");
+
+  /* ───── 수집 설정 ───── */
+  const [configs, setConfigs] = useState<any[]>([]);
+  const [cfgLoading, setCfgLoading] = useState(false);
+  const [cfgCount, setCfgCount] = useState(0);
+  const [cfgChecked, setCfgChecked] = useState<string[]>([]);
+  const [cfgModalOpen, setCfgModalOpen] = useState(false);
+  const [cfgEditMode, setCfgEditMode] = useState(false);
+  const [cfgForm, setCfgForm] = useState<Record<string, any>>({});
+  const [cfgSaving, setCfgSaving] = useState(false);
+  const [cfgKeyword, setCfgKeyword] = useState("");
+
+  /* ───── FK + 카테고리 옵션 ───── */
+  const [equipOptions, setEquipOptions] = useState<{ code: string; label: string }[]>([]);
+  const [collectionTypeOptions, setCollectionTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const eqRes = await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/data`, { page: 1, size: 500, autoFilter: true });
+        const eqs = eqRes.data?.data?.data || eqRes.data?.data?.rows || [];
+        setEquipOptions(eqs.map((r: any) => ({ code: r.equipment_code, label: `${r.equipment_code} - ${r.equipment_name || ""}` })));
+      } catch { /* skip */ }
+      try {
+        const catRes = await apiClient.get(`/table-categories/${COLLECTION_TABLE}/collection_type/values`);
+        if (catRes.data?.data?.length > 0) {
+          setCollectionTypeOptions(flattenCategories(catRes.data.data));
+        }
+      } catch { /* skip */ }
+    };
+    load();
+  }, []);
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  const fetchDatatypes = useCallback(async (keyword?: string) => {
+    setDtLoading(true);
+    try {
+      const kw = keyword !== undefined ? keyword : dtKeyword;
+      const filters: any[] = [];
+      if (kw.trim()) filters.push({ columnName: "equipment_code", operator: "contains", value: kw.trim() });
+      const res = await apiClient.post(`/table-management/tables/${DATATYPE_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setDatatypes(rows);
+      setDtCount(rows.length);
+    } catch { toast.error("PLC 데이터타입 조회에 실패했어요"); }
+    finally { setDtLoading(false); }
+  }, [dtKeyword]);
+
+  const fetchConfigs = useCallback(async (keyword?: string) => {
+    setCfgLoading(true);
+    try {
+      const kw = keyword !== undefined ? keyword : cfgKeyword;
+      const filters: any[] = [];
+      if (kw.trim()) filters.push({ columnName: "config_name", operator: "contains", value: kw.trim() });
+      const res = await apiClient.post(`/table-management/tables/${COLLECTION_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setConfigs(rows);
+      setCfgCount(rows.length);
+    } catch { toast.error("수집 설정 조회에 실패했어요"); }
+    finally { setCfgLoading(false); }
+  }, [cfgKeyword]);
+
+  useEffect(() => { fetchDatatypes(); fetchConfigs(); }, []);
+
+  /* ═══════════════════ 데이터타입 CRUD ═══════════════════ */
+  const openDtCreate = () => { setDtForm({}); setDtEditMode(false); setDtModalOpen(true); };
+  const openDtEdit = (row: any) => { setDtForm({ ...row }); setDtEditMode(true); setDtModalOpen(true); };
+  const saveDt = async () => {
+    if (!dtForm.equipment_code) { toast.error("설비코드는 필수 입력이에요"); return; }
+    setDtSaving(true);
+    try {
+      if (dtEditMode) {
+        await apiClient.put(`/table-management/tables/${DATATYPE_TABLE}/edit`, {
+          originalData: { id: dtForm.id }, updatedData: dtForm,
+        });
+        toast.success("PLC 데이터타입을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${DATATYPE_TABLE}/add`, dtForm);
+        toast.success("PLC 데이터타입을 등록했어요");
+      }
+      setDtModalOpen(false);
+      fetchDatatypes();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setDtSaving(false); }
+  };
+  const deleteDt = async () => {
+    if (dtChecked.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("PLC 데이터타입 삭제", { description: `선택한 ${dtChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.` });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DATATYPE_TABLE}/delete`, {
+        data: dtChecked.map(id => ({ id })),
+      });
+      toast.success(`${dtChecked.length}건을 삭제했어요`);
+      setDtChecked([]);
+      fetchDatatypes();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ 수집 설정 CRUD ═══════════════════ */
+  const openCfgCreate = () => { setCfgForm({}); setCfgEditMode(false); setCfgModalOpen(true); };
+  const openCfgEdit = (row: any) => { setCfgForm({ ...row }); setCfgEditMode(true); setCfgModalOpen(true); };
+  const saveCfg = async () => {
+    if (!cfgForm.config_name) { toast.error("설정명은 필수 입력이에요"); return; }
+    setCfgSaving(true);
+    try {
+      if (cfgEditMode) {
+        await apiClient.put(`/table-management/tables/${COLLECTION_TABLE}/edit`, {
+          originalData: { id: cfgForm.id }, updatedData: cfgForm,
+        });
+        toast.success("수집 설정을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${COLLECTION_TABLE}/add`, cfgForm);
+        toast.success("수집 설정을 등록했어요");
+      }
+      setCfgModalOpen(false);
+      fetchConfigs();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setCfgSaving(false); }
+  };
+  const deleteCfg = async () => {
+    if (cfgChecked.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("수집 설정 삭제", { description: `선택한 ${cfgChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.` });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${COLLECTION_TABLE}/delete`, {
+        data: cfgChecked.map(id => ({ id })),
+      });
+      toast.success(`${cfgChecked.length}건을 삭제했어요`);
+      setCfgChecked([]);
+      fetchConfigs();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="rounded-lg border bg-card">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <div className="border-b px-3">
+            <TabsList className="bg-transparent h-auto p-0 gap-0">
+              <TabsTrigger
+                value="datatype"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-3 text-sm font-medium"
+              >
+                <Cpu className="w-4 h-4 mr-2" />
+                PLC 데이터타입
+                <Badge variant="secondary" className="ml-2 bg-primary/10 text-primary text-xs">{dtCount}</Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="collection"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-3 text-sm font-medium"
+              >
+                <Settings2 className="w-4 h-4 mr-2" />
+                수집 설정
+                <Badge variant="secondary" className="ml-2 bg-primary/10 text-primary text-xs">{cfgCount}</Badge>
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* ──── PLC 데이터타입 탭 ──── */}
+          <TabsContent value="datatype" className="p-3 mt-0">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    className="h-8 pl-8 w-56 text-sm"
+                    placeholder="설비코드 검색..."
+                    value={dtKeyword}
+                    onChange={(e) => setDtKeyword(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && fetchDatatypes(dtKeyword)}
+                  />
+                </div>
+                <Button size="sm" variant="outline" className="h-8" onClick={() => fetchDatatypes(dtKeyword)}>
+                  <Search className="w-3.5 h-3.5 mr-1" />검색
+                </Button>
+                <Button size="sm" variant="ghost" className="h-8" onClick={() => { setDtKeyword(""); fetchDatatypes(""); }}>
+                  초기화
+                </Button>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">{dtCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openDtCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = datatypes.find(r => dtChecked.includes(r.id));
+                  if (sel) openDtEdit(sel); else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={deleteDt}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <EDataTable
+                columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+                  key: col.key,
+                  label: col.label,
+                  align: col.key === "is_active" ? "center" : undefined,
+                  render: col.key === "is_active"
+                    ? (val: any) => <Badge variant={val ? "default" : "secondary"} className="text-xs">{val ? "사용" : "미사용"}</Badge>
+                    : undefined,
+                }))}
+                data={ts.groupData(datatypes)}
+                loading={dtLoading}
+                emptyMessage="등록된 PLC 데이터타입이 없어요"
+                showCheckbox
+                checkedIds={dtChecked}
+                onCheckedChange={setDtChecked}
+                onRowDoubleClick={(row) => openDtEdit(row)}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </TabsContent>
+
+          {/* ──── 수집 설정 탭 ──── */}
+          <TabsContent value="collection" className="p-3 mt-0">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    className="h-8 pl-8 w-56 text-sm"
+                    placeholder="설정명 검색..."
+                    value={cfgKeyword}
+                    onChange={(e) => setCfgKeyword(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && fetchConfigs(cfgKeyword)}
+                  />
+                </div>
+                <Button size="sm" variant="outline" className="h-8" onClick={() => fetchConfigs(cfgKeyword)}>
+                  <Search className="w-3.5 h-3.5 mr-1" />검색
+                </Button>
+                <Button size="sm" variant="ghost" className="h-8" onClick={() => { setCfgKeyword(""); fetchConfigs(""); }}>
+                  초기화
+                </Button>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">{cfgCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openCfgCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = configs.find(r => cfgChecked.includes(r.id));
+                  if (sel) openCfgEdit(sel); else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={deleteCfg}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+              </div>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <EDataTable
+                columns={[
+                  { key: "config_name", label: "설정명" },
+                  { key: "source_connection_id", label: "소스연결ID", width: "w-[110px]" },
+                  { key: "source_table", label: "소스테이블", width: "w-[120px]" },
+                  { key: "target_table", label: "대상테이블", width: "w-[120px]" },
+                  { key: "collection_type", label: "수집유형", width: "w-[90px]" },
+                  { key: "schedule_cron", label: "스케줄(Cron)", width: "w-[120px]", render: (val: any) => <span className="font-mono text-[13px]">{val}</span> },
+                  { key: "is_active", label: "사용여부", width: "w-[80px]", align: "center" as const, render: (val: any) => <Badge variant={val ? "default" : "secondary"} className="text-xs">{val ? "사용" : "미사용"}</Badge> },
+                ] as EDataTableColumn[]}
+                data={configs}
+                loading={cfgLoading}
+                emptyMessage="등록된 수집 설정이 없어요"
+                showCheckbox
+                checkedIds={cfgChecked}
+                onCheckedChange={setCfgChecked}
+                onRowDoubleClick={(row) => openCfgEdit(row)}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* ═══════════════════ PLC 데이터타입 모달 ═══════════════════ */}
+      <Dialog open={dtModalOpen} onOpenChange={setDtModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{dtEditMode ? "PLC 데이터타입 수정" : "PLC 데이터타입 등록"}</DialogTitle>
+            <DialogDescription>PLC 데이터타입 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">설비코드 <span className="text-destructive">*</span></Label>
+              <Select value={dtForm.equipment_code || ""} onValueChange={(v) => setDtForm(p => ({ ...p, equipment_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="설비를 선택해주세요" /></SelectTrigger>
+                <SelectContent>
+                  {equipOptions.map(o => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">데이터타입</Label>
+              <Input className="h-9" value={dtForm.data_type || ""} onChange={(e) => setDtForm(p => ({ ...p, data_type: e.target.value }))} placeholder="예: 온도, 압력" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">단위</Label>
+              <Input className="h-9" value={dtForm.unit || ""} onChange={(e) => setDtForm(p => ({ ...p, unit: e.target.value }))} placeholder="예: ℃, bar" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">태그주소</Label>
+              <Input className="h-9" value={dtForm.tag_address || ""} onChange={(e) => setDtForm(p => ({ ...p, tag_address: e.target.value }))} placeholder="예: D100" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">수집주기</Label>
+              <Input className="h-9" value={dtForm.collection_interval || ""} onChange={(e) => setDtForm(p => ({ ...p, collection_interval: e.target.value }))} placeholder="예: 1000ms" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">하한값</Label>
+              <Input className="h-9" type="number" value={dtForm.lower_limit ?? ""} onChange={(e) => setDtForm(p => ({ ...p, lower_limit: e.target.value }))} placeholder="하한값" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">상한값</Label>
+              <Input className="h-9" type="number" value={dtForm.upper_limit ?? ""} onChange={(e) => setDtForm(p => ({ ...p, upper_limit: e.target.value }))} placeholder="상한값" />
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <div className="flex items-center gap-2">
+                <Checkbox checked={dtForm.is_active ?? true} onCheckedChange={(v) => setDtForm(p => ({ ...p, is_active: !!v }))} />
+                <Label className="text-sm">사용</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDtModalOpen(false)}>취소</Button>
+            <Button onClick={saveDt} disabled={dtSaving}>
+              {dtSaving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 수집 설정 모달 ═══════════════════ */}
+      <Dialog open={cfgModalOpen} onOpenChange={setCfgModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{cfgEditMode ? "수집 설정 수정" : "수집 설정 등록"}</DialogTitle>
+            <DialogDescription>수집 설정 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">설정명 <span className="text-destructive">*</span></Label>
+              <Input className="h-9" value={cfgForm.config_name || ""} onChange={(e) => setCfgForm(p => ({ ...p, config_name: e.target.value }))} placeholder="설정명을 입력해주세요" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">소스연결ID</Label>
+              <Input className="h-9" value={cfgForm.source_connection_id || ""} onChange={(e) => setCfgForm(p => ({ ...p, source_connection_id: e.target.value }))} placeholder="소스연결ID" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">수집유형</Label>
+              {collectionTypeOptions.length > 0 ? (
+                <Select value={cfgForm.collection_type || ""} onValueChange={(v) => setCfgForm(p => ({ ...p, collection_type: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택해주세요" /></SelectTrigger>
+                  <SelectContent>
+                    {collectionTypeOptions.map(o => (
+                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <Input className="h-9" value={cfgForm.collection_type || ""} onChange={(e) => setCfgForm(p => ({ ...p, collection_type: e.target.value }))} placeholder="수집유형" />
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">소스테이블</Label>
+              <Input className="h-9" value={cfgForm.source_table || ""} onChange={(e) => setCfgForm(p => ({ ...p, source_table: e.target.value }))} placeholder="소스테이블명" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">대상테이블</Label>
+              <Input className="h-9" value={cfgForm.target_table || ""} onChange={(e) => setCfgForm(p => ({ ...p, target_table: e.target.value }))} placeholder="대상테이블명" />
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">스케줄 (Cron)</Label>
+              <Input className="h-9 font-mono text-sm" value={cfgForm.schedule_cron || ""} onChange={(e) => setCfgForm(p => ({ ...p, schedule_cron: e.target.value }))} placeholder="예: */5 * * * * (5분마다)" />
+              {cfgForm.schedule_cron && (
+                <p className="text-xs text-muted-foreground mt-1">{cronToKorean(cfgForm.schedule_cron)}</p>
+              )}
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <div className="flex items-center gap-2">
+                <Checkbox checked={cfgForm.is_active ?? true} onCheckedChange={(v) => setCfgForm(p => ({ ...p, is_active: !!v }))} />
+                <Label className="text-sm">사용</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCfgModalOpen(false)}>취소</Button>
+            <Button onClick={saveCfg} disabled={cfgSaving}>
+              {cfgSaving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/logistics/info/page.tsx b/frontend/app/(main)/COMPANY_30/logistics/info/page.tsx
new file mode 100644
index 00000000..543dd3dd
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/logistics/info/page.tsx
@@ -0,0 +1,905 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import {
+  Truck,
+  DollarSign,
+  FileText,
+  MapPin,
+  Car,
+  Plus,
+  Trash2,
+  Download,
+  Pencil,
+  RefreshCw,
+  Inbox,
+  Loader2,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// ========== 타입 & 상수 ==========
+type TabKey = "carrier" | "cost" | "contract" | "route" | "vehicle";
+
+interface TabColumnDef {
+  key: string;
+  label: string;
+  width?: string;
+  align?: "left" | "center" | "right";
+  formatNumber?: boolean;
+}
+
+interface FormFieldDef {
+  key: string;
+  label: string;
+  type: "text" | "number" | "select" | "smartselect" | "date";
+  required?: boolean;
+  referenceKey?: "carrier" | "route";
+  categoryKey?: string;
+  options?: { value: string; label: string }[];
+  placeholder?: string;
+}
+
+interface TabConfig {
+  key: TabKey;
+  label: string;
+  icon: React.ReactNode;
+  tableName: string;
+  columns: TabColumnDef[];
+  formFields: FormFieldDef[];
+  defaultSortColumn: string;
+}
+
+const TAB_CONFIGS: TabConfig[] = [
+  {
+    key: "carrier",
+    label: "운송업체",
+    icon: <Truck className="h-3.5 w-3.5" />,
+    tableName: "carrier_mng",
+    defaultSortColumn: "carrier_code",
+    columns: [
+      { key: "carrier_code", label: "업체코드", width: "120px" },
+      { key: "carrier_name", label: "업체명", width: "160px" },
+      { key: "carrier_type", label: "업체유형", width: "100px" },
+      { key: "contact_person", label: "담당자", width: "100px" },
+      { key: "contact_phone", label: "연락처", width: "130px" },
+      { key: "email", label: "이메일", width: "180px" },
+      { key: "address", label: "주소", width: "220px" },
+      { key: "rating", label: "등급", width: "70px", align: "center" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "carrier_code", label: "업체코드", type: "text", required: true, placeholder: "업체코드를 입력해주세요" },
+      { key: "carrier_name", label: "업체명", type: "text", required: true, placeholder: "업체명을 입력해주세요" },
+      { key: "carrier_type", label: "업체유형", type: "select", required: true, categoryKey: "carrier_mng:carrier_type", placeholder: "업체유형을 선택해주세요" },
+      { key: "contact_person", label: "담당자", type: "text", placeholder: "담당자명" },
+      { key: "contact_phone", label: "연락처", type: "text", placeholder: "예: 02-1234-5678" },
+      { key: "email", label: "이메일", type: "text", placeholder: "email@example.com" },
+      { key: "address", label: "주소", type: "text", placeholder: "주소를 입력해주세요" },
+      { key: "rating", label: "등급", type: "select", categoryKey: "carrier_mng:rating", placeholder: "등급을 선택해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "cost",
+    label: "물류비",
+    icon: <DollarSign className="h-3.5 w-3.5" />,
+    tableName: "logistics_cost_mng",
+    defaultSortColumn: "carrier_code",
+    columns: [
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "route_code", label: "구간코드", width: "120px" },
+      { key: "base_fee", label: "기본요금", width: "110px", align: "right", formatNumber: true },
+      { key: "unit", label: "단위", width: "70px", align: "center" },
+      { key: "unit_fee", label: "단가", width: "110px", align: "right", formatNumber: true },
+      { key: "min_weight", label: "최소중량", width: "100px", align: "right", formatNumber: true },
+      { key: "max_weight", label: "최대중량", width: "100px", align: "right", formatNumber: true },
+      { key: "delivery_days", label: "배송일수", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "route_code", label: "배송구간", type: "smartselect", required: true, referenceKey: "route" },
+      { key: "base_fee", label: "기본요금", type: "number", placeholder: "0" },
+      { key: "unit", label: "단위", type: "text", placeholder: "kg, 건 등" },
+      { key: "unit_fee", label: "단가", type: "number", placeholder: "0" },
+      { key: "min_weight", label: "최소중량", type: "number", placeholder: "0" },
+      { key: "max_weight", label: "최대중량", type: "number", placeholder: "0" },
+      { key: "delivery_days", label: "배송일수", type: "number", placeholder: "0" },
+    ],
+  },
+  {
+    key: "contract",
+    label: "계약서",
+    icon: <FileText className="h-3.5 w-3.5" />,
+    tableName: "carrier_contract_mng",
+    defaultSortColumn: "contract_no",
+    columns: [
+      { key: "contract_no", label: "계약번호", width: "130px" },
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "contract_start_date", label: "시작일", width: "110px" },
+      { key: "contract_end_date", label: "종료일", width: "110px" },
+      { key: "contract_amount", label: "계약금액", width: "130px", align: "right", formatNumber: true },
+      { key: "contact_person", label: "담당자", width: "100px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "contract_no", label: "계약번호", type: "text", required: true, placeholder: "계약번호를 입력해주세요" },
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "contract_start_date", label: "시작일", type: "date", required: true },
+      { key: "contract_end_date", label: "종료일", type: "date", required: true },
+      { key: "contract_amount", label: "계약금액", type: "number", placeholder: "0" },
+      { key: "contact_person", label: "담당자", type: "text", placeholder: "담당자명을 입력해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_contract_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "route",
+    label: "배송구간",
+    icon: <MapPin className="h-3.5 w-3.5" />,
+    tableName: "delivery_route_mng",
+    defaultSortColumn: "route_code",
+    columns: [
+      { key: "route_code", label: "구간코드", width: "120px" },
+      { key: "route_name", label: "구간명", width: "160px" },
+      { key: "departure", label: "출발지", width: "120px" },
+      { key: "destination", label: "도착지", width: "120px" },
+      { key: "distance_km", label: "거리(km)", width: "100px", align: "right", formatNumber: true },
+      { key: "avg_time_hours", label: "평균시간(h)", width: "100px", align: "right" },
+      { key: "route_type", label: "구간유형", width: "100px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "route_code", label: "구간코드", type: "text", required: true, placeholder: "구간코드를 입력해주세요" },
+      { key: "departure", label: "출발지", type: "text", required: true, placeholder: "출발지" },
+      { key: "destination", label: "도착지", type: "text", required: true, placeholder: "도착지" },
+      { key: "distance_km", label: "거리(km)", type: "number", placeholder: "0" },
+      { key: "avg_time_hours", label: "평균시간(h)", type: "number", placeholder: "0" },
+      { key: "route_type", label: "구간유형", type: "select", categoryKey: "delivery_route_mng:route_type", placeholder: "유형을 선택해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "delivery_route_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "vehicle",
+    label: "차량",
+    icon: <Car className="h-3.5 w-3.5" />,
+    tableName: "carrier_vehicle_mng",
+    defaultSortColumn: "vehicle_code",
+    columns: [
+      { key: "vehicle_code", label: "차량코드", width: "120px" },
+      { key: "vehicle_number", label: "차량번호", width: "120px" },
+      { key: "vehicle_type", label: "차량유형", width: "100px" },
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "load_capacity_kg", label: "적재용량(kg)", width: "120px", align: "right", formatNumber: true },
+      { key: "driver_name", label: "운전자", width: "100px" },
+      { key: "last_maintenance_date", label: "최종정비일", width: "110px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "vehicle_code", label: "차량코드", type: "text", required: true, placeholder: "차량코드를 입력해주세요" },
+      { key: "vehicle_number", label: "차량번호", type: "text", required: true, placeholder: "12가 3456" },
+      { key: "vehicle_type", label: "차량유형", type: "select", required: true, categoryKey: "carrier_vehicle_mng:vehicle_type", placeholder: "차량유형을 선택해주세요" },
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "load_capacity_kg", label: "적재용량(kg)", type: "number", placeholder: "0" },
+      { key: "driver_name", label: "운전자", type: "text", placeholder: "운전자명" },
+      { key: "last_maintenance_date", label: "최종정비일", type: "date" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_vehicle_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+];
+
+// 카테고리 계층 평탄화
+function flattenCategories(items: any[]): { value: string; label: string }[] {
+  const result: { value: string; label: string }[] = [];
+  function walk(arr: any[]) {
+    for (const item of arr) {
+      if (item.value || item.name) {
+        result.push({
+          value: item.value || item.name,
+          label: item.label || item.name || item.value,
+        });
+      }
+      if (item.children?.length) walk(item.children);
+    }
+  }
+  walk(items);
+  return result;
+}
+
+// 채번 대상 필드 매핑: tableName → 코드 필드 key
+const NUMBERING_FIELD_MAP: Record<string, string> = {
+  carrier_mng: "carrier_code",
+  delivery_route_mng: "route_code",
+  carrier_vehicle_mng: "vehicle_code",
+};
+
+// ========== 메인 컴포넌트 ==========
+export default function LogisticsInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 탭 상태
+  const [activeTab, setActiveTab] = useState<TabKey>("carrier");
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 탭별 독립 상태
+  const [tabData, setTabData] = useState<Record<TabKey, any[]>>({
+    carrier: [], cost: [], contract: [], route: [], vehicle: [],
+  });
+  const [tabLoading, setTabLoading] = useState<Record<TabKey, boolean>>({
+    carrier: false, cost: false, contract: false, route: false, vehicle: false,
+  });
+  const [tabChecked, setTabChecked] = useState<Record<TabKey, string[]>>({
+    carrier: [], cost: [], contract: [], route: [], vehicle: [],
+  });
+
+  // FK 참조 데이터 (캐싱)
+  const [carrierOptions, setCarrierOptions] = useState<{ code: string; label: string }[]>([]);
+  const [routeOptions, setRouteOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 카테고리 옵션 캐시
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { value: string; label: string }[]>>({});
+  const loadedCategories = useRef(new Set<string>());
+
+  // 모달 상태
+  const [formOpen, setFormOpen] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [editId, setEditId] = useState<string | null>(null);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 테이블 설정 (탭별)
+  const tsCarrier = useTableSettings("c16-logistics-carrier", TAB_CONFIGS[0].tableName, TAB_CONFIGS[0].columns);
+  const tsCost = useTableSettings("c16-logistics-cost", TAB_CONFIGS[1].tableName, TAB_CONFIGS[1].columns);
+  const tsContract = useTableSettings("c16-logistics-contract", TAB_CONFIGS[2].tableName, TAB_CONFIGS[2].columns);
+  const tsRoute = useTableSettings("c16-logistics-route", TAB_CONFIGS[3].tableName, TAB_CONFIGS[3].columns);
+  const tsVehicle = useTableSettings("c16-logistics-vehicle", TAB_CONFIGS[4].tableName, TAB_CONFIGS[4].columns);
+  const tsMap: Record<TabKey, typeof tsCarrier> = { carrier: tsCarrier, cost: tsCost, contract: tsContract, route: tsRoute, vehicle: tsVehicle };
+  const activeTs = tsMap[activeTab];
+
+  const activeConfig = useMemo(
+    () => TAB_CONFIGS.find((c) => c.key === activeTab)!,
+    [activeTab]
+  );
+
+  // 컬럼 가시성 헬퍼
+  const getVisibleColumns = (tabKey: TabKey) => tsMap[tabKey].visibleColumns;
+
+  // 클라이언트 사이드 필터링
+  const filteredData = useMemo(() => {
+    const data = tabData[activeTab];
+    if (searchFilters.length === 0) return data;
+    return data.filter((row) =>
+      searchFilters.every((f) => {
+        if (!f.value) return true;
+        const kw = f.value.toLowerCase();
+        if (f.columnName) {
+          return String(row[f.columnName] ?? "").toLowerCase().includes(kw);
+        }
+        return Object.values(row).some((v) => String(v ?? "").toLowerCase().includes(kw));
+      })
+    );
+  }, [tabData, activeTab, searchFilters]);
+
+  // FK 참조 데이터 로드
+  const loadReferences = useCallback(async () => {
+    try {
+      const [carrierRes, routeRes] = await Promise.all([
+        apiClient.post("/table-management/tables/carrier_mng/data", {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "carrier_code", order: "asc" },
+        }),
+        apiClient.post("/table-management/tables/delivery_route_mng/data", {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "route_code", order: "asc" },
+        }),
+      ]);
+      const carriers = carrierRes.data?.data?.data || carrierRes.data?.data?.rows || [];
+      setCarrierOptions(
+        carriers.map((r: any) => ({
+          code: r.carrier_code || "",
+          label: `${r.carrier_code} - ${r.carrier_name || ""}`,
+        }))
+      );
+      const routes = routeRes.data?.data?.data || routeRes.data?.data?.rows || [];
+      setRouteOptions(
+        routes.map((r: any) => ({
+          code: r.route_code || "",
+          label: `${r.route_code} - ${r.route_name || ""}`,
+        }))
+      );
+    } catch {
+      // FK 참조 로드 실패 시 무시
+    }
+  }, []);
+
+  useEffect(() => {
+    loadReferences();
+  }, [loadReferences]);
+
+  // 카테고리 옵션 로드
+  const loadCategoryOptions = useCallback(async (tableColumn: string) => {
+    if (loadedCategories.current.has(tableColumn)) return;
+    loadedCategories.current.add(tableColumn);
+    const [tableName, columnName] = tableColumn.split(":");
+    try {
+      const res = await apiClient.get(`/table-categories/${tableName}/${columnName}/values`);
+      const data = res.data?.data || [];
+      setCategoryOptions((prev) => ({
+        ...prev,
+        [tableColumn]: data.length > 0 ? flattenCategories(data) : [],
+      }));
+    } catch {
+      setCategoryOptions((prev) => ({ ...prev, [tableColumn]: [] }));
+    }
+  }, []);
+
+  // 활성 탭의 카테고리 로드
+  useEffect(() => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    config.formFields.forEach((f) => {
+      if (f.categoryKey) loadCategoryOptions(f.categoryKey);
+    });
+  }, [activeTab, loadCategoryOptions]);
+
+  // 데이터 조회
+  const fetchTabData = useCallback(async (tab: TabKey) => {
+    const config = TAB_CONFIGS.find((c) => c.key === tab);
+    if (!config) return;
+    setTabLoading((prev) => ({ ...prev, [tab]: true }));
+    try {
+      const res = await apiClient.post(
+        `/table-management/tables/${config.tableName}/data`,
+        {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: config.defaultSortColumn, order: "asc" },
+        }
+      );
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setTabData((prev) => ({ ...prev, [tab]: rows }));
+    } catch {
+      toast.error("데이터를 불러오는 데 실패했어요.");
+      setTabData((prev) => ({ ...prev, [tab]: [] }));
+    } finally {
+      setTabLoading((prev) => ({ ...prev, [tab]: false }));
+    }
+  }, []);
+
+  // 초기 데이터 로드 (탭 전환 시)
+  useEffect(() => {
+    fetchTabData(activeTab);
+  }, [activeTab, fetchTabData]);
+
+  // 탭 변경
+  const handleTabChange = useCallback((tab: string) => {
+    setActiveTab(tab as TabKey);
+    setSearchFilters([]);
+  }, []);
+
+  // 등록 모달 열기
+  const handleOpenAdd = useCallback(async () => {
+    setEditMode(false);
+    setEditId(null);
+    setFormData({});
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setFormOpen(true);
+
+    // 현재 탭의 채번 규칙 조회
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    const codeField = NUMBERING_FIELD_MAP[config.tableName];
+    if (!codeField) return; // 채번 대상이 아닌 탭
+
+    try {
+      const ruleRes = await apiClient.get(
+        `/numbering-rules/by-column/${config.tableName}/${codeField}`
+      );
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시 — 사용자가 직접 입력
+    }
+  }, [activeTab]);
+
+  // 수정 모달 열기
+  const handleOpenEdit = useCallback((row: any) => {
+    setEditMode(true);
+    setEditId(row.id ? String(row.id) : null);
+    setFormData({ ...row });
+    setFormOpen(true);
+  }, []);
+
+  // 저장
+  const handleSave = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+
+    // 필수값 검증 (등록 모드에서 채번 대상 코드 필드는 자동 할당이므로 스킵)
+    const numberingCodeField = NUMBERING_FIELD_MAP[config.tableName];
+    for (const field of config.formFields) {
+      if (!editMode && numberingRuleId && field.key === numberingCodeField) continue;
+      if (field.required && !formData[field.key]?.toString().trim()) {
+        toast.error(`${field.label}은(는) 필수 입력이에요.`);
+        return;
+      }
+    }
+
+    try {
+      // 배송구간: 출발지→도착지 로 구간명 자동 생성
+      const saveData = { ...formData };
+      if (activeTab === "route" && saveData.departure && saveData.destination) {
+        saveData.route_name = `${saveData.departure}→${saveData.destination}`;
+      }
+
+      if (editMode && editId) {
+        await apiClient.put(`/table-management/tables/${config.tableName}/edit`, {
+          originalData: { id: editId },
+          updatedData: saveData,
+        });
+        toast.success("수정이 완료되었어요.");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        const codeField = NUMBERING_FIELD_MAP[config.tableName];
+        if (codeField && numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            saveData[codeField] = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+
+        await apiClient.post(
+          `/table-management/tables/${config.tableName}/add`,
+          { id: crypto.randomUUID(), ...saveData }
+        );
+        toast.success("등록이 완료되었어요.");
+      }
+      setFormOpen(false);
+      fetchTabData(activeTab);
+      // FK 참조 테이블 변경 시 캐시 갱신
+      if (activeTab === "carrier" || activeTab === "route") {
+        loadReferences();
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    }
+  }, [activeTab, editMode, editId, formData, fetchTabData, loadReferences, numberingRuleId]);
+
+  // 삭제
+  const handleDelete = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    const ids = tabChecked[activeTab];
+    if (ids.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요.");
+      return;
+    }
+    const ok = await confirm(`선택한 ${ids.length}건을 삭제할까요?`, {
+      description: "삭제된 데이터는 복구할 수 없어요.",
+      variant: "destructive",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(
+        `/table-management/tables/${config.tableName}/delete`,
+        { data: ids.map((id) => ({ id })) }
+      );
+      toast.success(`${ids.length}건이 삭제되었어요.`);
+      setTabChecked((prev) => ({ ...prev, [activeTab]: [] }));
+      fetchTabData(activeTab);
+      if (activeTab === "carrier" || activeTab === "route") {
+        loadReferences();
+      }
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  }, [activeTab, tabChecked, confirm, fetchTabData, loadReferences]);
+
+  // 엑셀 다운로드 (필터된 데이터 기준)
+  const handleExcelDownload = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    if (filteredData.length === 0) {
+      toast.error("다운로드할 데이터가 없어요.");
+      return;
+    }
+    const exportData = filteredData.map((row) => {
+      const obj: Record<string, any> = {};
+      config.columns.forEach((col) => {
+        obj[col.label] = row[col.key] ?? "";
+      });
+      return obj;
+    });
+    await exportToExcel(exportData, `${config.label}.xlsx`, config.label);
+    toast.success("엑셀 다운로드가 완료되었어요.");
+  }, [activeTab, filteredData]);
+
+  // 폼 필드 변경
+  const updateFormField = useCallback((key: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [key]: value }));
+  }, []);
+
+  // 행 체크 토글
+  const toggleRowCheck = useCallback((tabKey: TabKey, rowId: string) => {
+    setTabChecked((prev) => {
+      const ids = prev[tabKey];
+      return {
+        ...prev,
+        [tabKey]: ids.includes(rowId) ? ids.filter((x) => x !== rowId) : [...ids, rowId],
+      };
+    });
+  }, []);
+
+  // 전체 체크 토글
+  const toggleAllCheck = useCallback((tabKey: TabKey, checked: boolean) => {
+    setTabChecked((prev) => ({
+      ...prev,
+      [tabKey]: checked ? tabData[tabKey].map((r: any) => String(r.id)) : [],
+    }));
+  }, [tabData]);
+
+  // 폼 필드 렌더
+  const renderFormField = useCallback(
+    (field: FormFieldDef) => {
+      const value = formData[field.key] ?? "";
+      // 현재 탭의 채번 대상 코드 필드인지 확인
+      const numberingCodeField = NUMBERING_FIELD_MAP[activeConfig.tableName];
+      const isNumberingTarget = !editMode && numberingRuleId && field.key === numberingCodeField;
+      // 수정 모드에서 코드/번호 필드는 읽기전용
+      const isCodeField =
+        editMode &&
+        field.type === "text" &&
+        (field.key.endsWith("_code") || field.key.endsWith("_no"));
+
+      switch (field.type) {
+        case "text":
+          // 등록 모드 + 채번 대상 필드: readOnly로 미리보기 코드 표시
+          if (isNumberingTarget) {
+            return (
+              <Input
+                value={previewCode || ""}
+                readOnly
+                placeholder="채번 조회 중..."
+                className="h-9 text-sm bg-muted text-muted-foreground"
+              />
+            );
+          }
+          return (
+            <Input
+              value={value}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              placeholder={field.placeholder}
+              readOnly={isCodeField}
+              className={cn(
+                "h-9 text-sm",
+                isCodeField && "bg-muted text-muted-foreground"
+              )}
+            />
+          );
+        case "number":
+          return (
+            <Input
+              type="number"
+              value={value}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              placeholder={field.placeholder}
+              className="h-9 text-sm"
+            />
+          );
+        case "select": {
+          const opts =
+            field.options ||
+            (field.categoryKey ? categoryOptions[field.categoryKey] : []) ||
+            [];
+          return (
+            <Select
+              value={String(value)}
+              onValueChange={(v) => updateFormField(field.key, v)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder={field.placeholder || "선택해주세요"} />
+              </SelectTrigger>
+              <SelectContent>
+                {opts.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          );
+        }
+        case "smartselect": {
+          // SmartSelect 대신 Select로 직접 구현
+          const opts =
+            field.referenceKey === "carrier" ? carrierOptions : routeOptions;
+          return (
+            <Select
+              value={String(value)}
+              onValueChange={(v) => updateFormField(field.key, v)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder={field.placeholder || "선택해주세요"} />
+              </SelectTrigger>
+              <SelectContent>
+                {opts.map((o) => (
+                  <SelectItem key={o.code} value={o.code}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          );
+        }
+        case "date":
+          return (
+            <Input
+              type="date"
+              value={value ? String(value).split("T")[0] : ""}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              className="h-9 text-sm"
+            />
+          );
+        default:
+          return null;
+      }
+    },
+    [formData, editMode, carrierOptions, routeOptions, categoryOptions, updateFormField, activeConfig, numberingRuleId, previewCode]
+  );
+
+  // ========== 렌더링 ==========
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={activeConfig.tableName}
+        filterId="c16-logistics-info"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={activeTs.filterConfig}
+        dataCount={filteredData.length}
+      />
+
+      {/* 탭 + 콘텐츠 영역 */}
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border bg-card"
+      >
+        <TabsList className="h-auto w-full shrink-0 justify-start gap-0 rounded-none border-b bg-muted/30 p-0">
+          {TAB_CONFIGS.map((tab) => (
+            <TabsTrigger
+              key={tab.key}
+              value={tab.key}
+              className="flex items-center gap-1.5 rounded-none border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-muted-foreground data-[state=active]:border-primary data-[state=active]:font-semibold data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              {tab.icon}
+              {tab.label}
+              <Badge
+                variant="outline"
+                className="ml-1 h-5 min-w-[22px] justify-center px-1.5 font-mono text-[10px]"
+              >
+                {tabData[tab.key]?.length || 0}
+              </Badge>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {TAB_CONFIGS.map((tab) => {
+          const displayData = tab.key === activeTab ? filteredData : tabData[tab.key];
+          const isAllChecked =
+            tabData[tab.key].length > 0 &&
+            tabData[tab.key].every((r: any) => tabChecked[tab.key].includes(String(r.id)));
+
+          return (
+            <TabsContent
+              key={tab.key}
+              value={tab.key}
+              className="m-0 flex flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
+            >
+              {/* 액션 바 */}
+              <div className="flex shrink-0 items-center justify-between border-b px-3 py-2">
+                <div className="flex items-center gap-2">
+                  <h2 className="text-sm font-bold">{tab.label} 목록</h2>
+                  <Badge className="bg-primary/10 font-mono text-[11px] text-primary">
+                    {tab.key === activeTab ? displayData.length : tabData[tab.key]?.length || 0}건
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" className="h-8 text-xs" onClick={handleOpenAdd}>
+                    <Plus className="mr-1 h-3.5 w-3.5" />
+                    등록
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs"
+                    disabled={tabChecked[tab.key].length !== 1}
+                    onClick={() => {
+                      const row = tabData[tab.key].find(
+                        (r: any) => String(r.id) === tabChecked[tab.key][0]
+                      );
+                      if (row) handleOpenEdit(row);
+                    }}
+                  >
+                    <Pencil className="mr-1 h-3.5 w-3.5" />
+                    수정
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs text-destructive hover:bg-destructive/10"
+                    disabled={tabChecked[tab.key].length === 0}
+                    onClick={handleDelete}
+                  >
+                    <Trash2 className="mr-1 h-3.5 w-3.5" />
+                    삭제
+                  </Button>
+                  <div className="mx-1 h-5 w-px bg-border" />
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs"
+                    onClick={handleExcelDownload}
+                  >
+                    <Download className="mr-1 h-3.5 w-3.5" />
+                    엑셀
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => fetchTabData(tab.key)}
+                  >
+                    <RefreshCw
+                      className={cn(
+                        "h-3.5 w-3.5",
+                        tabLoading[tab.key] && "animate-spin"
+                      )}
+                    />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => activeTs.setOpen(true)}
+                  >
+                    <Settings2 className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 테이블 영역 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={getVisibleColumns(tab.key).map((col): EDataTableColumn => ({
+                    key: col.key,
+                    label: col.label,
+                    align: col.align,
+                    formatNumber: col.formatNumber,
+                    truncate: true,
+                  }))}
+                  data={tsMap[tab.key].groupData(displayData)}
+                  rowKey={(row: any) => String(row.id)}
+                  loading={tabLoading[tab.key]}
+                  emptyMessage={`등록된 ${tab.label} 정보가 없어요`}
+                  showCheckbox
+                  checkedIds={tabChecked[tab.key]}
+                  onCheckedChange={(ids) => setTabChecked((prev) => ({ ...prev, [tab.key]: ids }))}
+                  onRowDoubleClick={(row) => handleOpenEdit(row)}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
+              </div>
+            </TabsContent>
+          );
+        })}
+      </Tabs>
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={formOpen} onOpenChange={setFormOpen}>
+        <DialogContent className="flex max-h-[85vh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[680px]">
+          <DialogHeader className="shrink-0 border-b px-6 py-4">
+            <DialogTitle>
+              {activeConfig.label} {editMode ? "수정" : "등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {editMode
+                ? `${activeConfig.label} 정보를 수정해주세요.`
+                : `새 ${activeConfig.label} 정보를 입력해주세요.`}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto p-6">
+            <div className="grid grid-cols-2 gap-4">
+              {activeConfig.formFields.map((field) => (
+                <div key={field.key} className="flex flex-col gap-1.5">
+                  <Label className="text-xs font-semibold text-muted-foreground">
+                    {field.label}
+                    {field.required && (
+                      <span className="ml-0.5 text-destructive">*</span>
+                    )}
+                  </Label>
+                  {renderFormField(field)}
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="shrink-0 border-t">
+            <div className="flex items-center justify-end gap-2 px-6 py-3">
+              <Button variant="outline" onClick={() => setFormOpen(false)}>
+                취소
+              </Button>
+              <Button onClick={handleSave}>
+                {editMode ? "수정" : "등록"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={activeTs.open}
+        onOpenChange={activeTs.setOpen}
+        tableName={activeTs.tableName}
+        settingsId={activeTs.settingsId}
+        defaultVisibleKeys={activeTs.defaultVisibleKeys}
+        onSave={activeTs.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/logistics/inventory/page.tsx b/frontend/app/(main)/COMPANY_30/logistics/inventory/page.tsx
new file mode 100644
index 00000000..7d2a96c6
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/logistics/inventory/page.tsx
@@ -0,0 +1,738 @@
+"use client";
+
+/**
+ * 재고현황 — 하드코딩 페이지 (Type B 마스터-디테일)
+ *
+ * 좌측: 재고 목록 (inventory_stock, item_info JOIN)
+ * 우측: 선택 품목의 재고 이동 이력 (inventory_history)
+ *
+ * ★ 재고 직접 등록/삭제 불가 — 입출고를 통해서만 변동, 조정만 가능
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Package,
+  Loader2,
+  Download,
+  ClipboardEdit,
+  History,
+  AlertTriangle,
+  RefreshCw,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { toast } from "sonner";
+import { exportToExcel } from "@/lib/utils/excelExport";
+
+const STOCK_TABLE = "inventory_stock";
+
+const STOCK_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "warehouse_code", label: "창고" },
+  { key: "location_code", label: "위치" },
+  { key: "current_qty", label: "현재수량", align: "right" as const },
+  { key: "safety_qty", label: "안전재고", align: "right" as const },
+  { key: "unit", label: "단위" },
+  { key: "status", label: "상태" },
+];
+const HISTORY_TABLE = "inventory_history";
+
+const getStatusVariant = (
+  status: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "정상":
+      return "default";
+    case "부족":
+      return "destructive";
+    case "과잉":
+      return "secondary";
+    default:
+      return "outline";
+  }
+};
+
+const getHistoryTypeVariant = (
+  type: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (type) {
+    case "입고":
+      return "default";
+    case "출고":
+      return "secondary";
+    case "조정":
+      return "outline";
+    case "입고취소":
+    case "이동":
+      return "destructive";
+    default:
+      return "outline";
+  }
+};
+
+export default function InventoryStatusPage() {
+  const { user } = useAuth();
+  const ts = useTableSettings("c16-inventory", STOCK_TABLE, STOCK_COLUMNS);
+
+  // 좌측: 재고 목록
+  const [stockItems, setStockItems] = useState<any[]>([]);
+  const [stockLoading, setStockLoading] = useState(false);
+  const [selectedStockId, setSelectedStockId] = useState<string | null>(null);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 이동 이력
+  const [historyItems, setHistoryItems] = useState<any[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+
+  // 조정 모달
+  const [adjustModalOpen, setAdjustModalOpen] = useState(false);
+  const [adjustForm, setAdjustForm] = useState<{
+    adjust_type: string;
+    adjust_qty: string;
+    reason: string;
+  }>({ adjust_type: "증가", adjust_qty: "", reason: "" });
+  const [adjustSaving, setAdjustSaving] = useState(false);
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["status", "unit"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${STOCK_TABLE}/${col}/values`
+          );
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setCategoryOptions(optMap);
+    };
+    load();
+  }, []);
+
+  // 재고 목록 조회
+  const fetchStock = useCallback(async () => {
+    setStockLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const [stockRes, itemRes, whRes] = await Promise.all([
+        apiClient.post(`/table-management/tables/${STOCK_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+          autoFilter: true,
+          sort: { columnName: "item_code", order: "asc" },
+        }),
+        apiClient.post(`/table-management/tables/item_info/data`, { page: 1, size: 500, autoFilter: true }),
+        apiClient.post(`/table-management/tables/warehouse_info/data`, { page: 1, size: 500, autoFilter: true }),
+      ]);
+      const raw = stockRes.data?.data?.data || stockRes.data?.data?.rows || [];
+      const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+      const warehouses = whRes.data?.data?.data || whRes.data?.data?.rows || [];
+      const itemMap = new Map(items.map((i: any) => [i.item_number || i.item_code, { name: i.item_name || "", unit: i.unit || "" }]));
+      const whMap = new Map(warehouses.map((w: any) => [w.warehouse_code, w.warehouse_name || w.warehouse_code]));
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const itemInfo = itemMap.get(r.item_code) as any;
+        return {
+          ...r,
+          item_name: itemInfo?.name || "",
+          unit: itemInfo?.unit || resolve("unit", r.unit),
+          warehouse_name: whMap.get(r.warehouse_code) || r.warehouse_code || "",
+          status: resolve("status", r.status),
+          _isLow: r.safety_qty && Number(r.current_qty) < Number(r.safety_qty),
+        };
+      });
+      setStockItems(data);
+    } catch {
+      toast.error("재고 목록을 불러오지 못했어요");
+    } finally {
+      setStockLoading(false);
+    }
+  }, [categoryOptions, searchFilters]);
+
+  useEffect(() => {
+    fetchStock();
+  }, [fetchStock]);
+
+  // 선택된 재고
+  const selectedStock = stockItems.find((s) => s.id === selectedStockId);
+
+  // 이력 조회
+  const fetchHistory = useCallback(async () => {
+    if (!selectedStock?.item_code) {
+      setHistoryItems([]);
+      return;
+    }
+    setHistoryLoading(true);
+    try {
+      const historyFilters: any[] = [
+        {
+          columnName: "item_code",
+          operator: "equals",
+          value: selectedStock.item_code,
+        },
+      ];
+      if (selectedStock.warehouse_code) {
+        historyFilters.push({
+          columnName: "warehouse_code",
+          operator: "equals",
+          value: selectedStock.warehouse_code,
+        });
+      }
+      const res = await apiClient.post(
+        `/table-management/tables/${HISTORY_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: { enabled: true, filters: historyFilters },
+          autoFilter: true,
+          sort: { columnName: "transaction_date", order: "desc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setHistoryItems(raw);
+    } catch {
+      toast.error("재고 이력을 불러오지 못했어요");
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, [selectedStock?.item_code, selectedStock?.warehouse_code]);
+
+  useEffect(() => {
+    fetchHistory();
+  }, [fetchHistory]);
+
+  // 재고 조정 저장
+  const handleAdjustSave = async () => {
+    if (!selectedStock) return;
+    const qty = Number(adjustForm.adjust_qty);
+    if (!qty || qty <= 0) {
+      toast.error("조정 수량을 입력해주세요");
+      return;
+    }
+    if (!adjustForm.reason.trim()) {
+      toast.error("조정 사유를 입력해주세요");
+      return;
+    }
+    setAdjustSaving(true);
+    try {
+      const changeQty = adjustForm.adjust_type === "증가" ? qty : -qty;
+      const afterQty = Number(selectedStock.current_qty || 0) + changeQty;
+
+      await apiClient.post(
+        `/table-management/tables/${HISTORY_TABLE}/add`,
+        {
+          id: crypto.randomUUID(),
+          item_code: selectedStock.item_code,
+          warehouse_code: selectedStock.warehouse_code || "",
+          location_code: selectedStock.location_code || "",
+          transaction_type: "조정",
+          transaction_date: new Date().toISOString(),
+          quantity: String(changeQty),
+          balance_qty: String(afterQty),
+          remark: adjustForm.reason.trim(),
+        }
+      );
+
+      await apiClient.put(
+        `/table-management/tables/${STOCK_TABLE}/edit`,
+        {
+          originalData: { id: selectedStock.id },
+          updatedData: { current_qty: afterQty },
+        }
+      );
+
+      toast.success("재고가 조정되었어요");
+      setAdjustModalOpen(false);
+      setAdjustForm({ adjust_type: "증가", adjust_qty: "", reason: "" });
+      fetchStock();
+    } catch {
+      toast.error("재고 조정에 실패했어요");
+    } finally {
+      setAdjustSaving(false);
+    }
+  };
+
+  // EDataTable 컬럼 정의
+  const stockColumns: EDataTableColumn[] = ts.visibleColumns.map((col) => {
+    const base: EDataTableColumn = { key: col.key, label: col.label, align: col.align };
+    if (col.key === "current_qty") {
+      return {
+        ...base,
+        align: "right" as const,
+        render: (val: any, row: any) => (
+          <span className="font-mono">
+            <span className={cn(row._isLow && "text-destructive font-bold")}>
+              {Number(row.current_qty || 0).toLocaleString()}
+            </span>
+            {row._isLow && (
+              <AlertTriangle className="inline h-3 w-3 text-destructive ml-1" />
+            )}
+          </span>
+        ),
+      };
+    }
+    if (col.key === "safety_qty") {
+      return {
+        ...base,
+        align: "right" as const,
+        formatNumber: true,
+      };
+    }
+    if (col.key === "status") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getStatusVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    return base;
+  });
+
+  // 엑셀 내보내기
+  const handleExcelExport = () => {
+    if (stockItems.length === 0) {
+      toast.error("내보낼 데이터가 없어요");
+      return;
+    }
+    exportToExcel(
+      stockItems.map((r) => ({
+        품목코드: r.item_code,
+        품명: r.item_name,
+        창고: r.warehouse_name || r.warehouse_code,
+        위치: r.location_code,
+        현재수량: r.current_qty,
+        안전재고: r.safety_qty,
+        단위: r.unit,
+        상태: r.status,
+      })),
+      "재고현황"
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3">
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={STOCK_TABLE}
+        filterId="c16-inventory"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={stockItems.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1 text-xs"
+              onClick={handleExcelExport}
+            >
+              <Download className="h-3.5 w-3.5" />
+              엑셀
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 패널 */}
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="flex-1 rounded-lg border bg-card"
+      >
+        {/* 좌측: 재고 목록 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+              <div className="flex items-center gap-2">
+                <span className="text-[13px] font-bold">재고 목록</span>
+                <Badge variant="default" className="rounded-full text-[11px]">
+                  {stockItems.length}건
+                </Badge>
+              </div>
+            </div>
+
+            <EDataTable
+              columns={stockColumns}
+              data={ts.groupData(stockItems)}
+              rowKey={(row) => row.id}
+              loading={stockLoading}
+              emptyMessage="등록된 재고가 없어요"
+              selectedId={selectedStockId}
+              onSelect={(id) => setSelectedStockId(id)}
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+              columnOrderKey="c16-inventory"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 상세 이력 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex flex-col h-full">
+            {!selectedStock ? (
+              <div className="flex flex-col items-center justify-center flex-1 m-5 border-2 border-dashed rounded-lg border-border">
+                <Package className="h-12 w-12 text-muted-foreground/40 mb-4" />
+                <p className="text-sm font-semibold text-muted-foreground">
+                  품목을 선택해주세요
+                </p>
+                <p className="text-xs text-muted-foreground/70 mt-1">
+                  좌측에서 품목을 선택하면 재고 이력이 표시돼요
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                  <div className="flex items-center gap-2">
+                    <History className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-[13px] font-bold">
+                      {selectedStock.item_name || selectedStock.item_code}
+                    </span>
+                    <Badge
+                      variant="outline"
+                      className="rounded-full text-[11px] font-mono"
+                    >
+                      {selectedStock.item_code}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-1.5 text-xs">
+                      <span className="text-muted-foreground">현재:</span>
+                      <span
+                        className={cn(
+                          "font-bold font-mono",
+                          selectedStock._isLow
+                            ? "text-destructive"
+                            : "text-foreground"
+                        )}
+                      >
+                        {Number(selectedStock.current_qty || 0).toLocaleString()}
+                      </span>
+                      {selectedStock._isLow && (
+                        <AlertTriangle className="h-3.5 w-3.5 text-destructive" />
+                      )}
+                    </div>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={() => {
+                        setAdjustForm({
+                          adjust_type: "증가",
+                          adjust_qty: "",
+                          reason: "",
+                        });
+                        setAdjustModalOpen(true);
+                      }}
+                    >
+                      <ClipboardEdit className="h-3.5 w-3.5" />
+                      재고 조정
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 재고 요약 카드 */}
+                <div className="grid grid-cols-4 gap-2 px-4 py-3 border-b">
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">현재수량</span>
+                    <span className="text-sm font-bold font-mono">
+                      {Number(selectedStock.current_qty || 0).toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">안전재고</span>
+                    <span className="text-sm font-bold font-mono">
+                      {Number(selectedStock.safety_qty || 0).toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">창고</span>
+                    <span className="text-sm font-bold truncate max-w-full">
+                      {selectedStock.warehouse_name || "-"}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">상태</span>
+                    <Badge
+                      variant={getStatusVariant(selectedStock.status)}
+                      className="text-[10px] mt-0.5"
+                    >
+                      {selectedStock.status || "-"}
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* 이력 서브헤더 */}
+                <div className="flex items-center justify-between px-4 py-2 border-b">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-semibold text-muted-foreground">
+                      재고 이동 이력
+                    </span>
+                    <Badge variant="secondary" className="rounded-full text-[10px]">
+                      {historyItems.length}건
+                    </Badge>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={fetchHistory}
+                  >
+                    <RefreshCw className="h-3 w-3" />
+                    새로고침
+                  </Button>
+                </div>
+
+                {/* 이력 테이블 */}
+                <div className="flex-1 overflow-auto">
+                  {historyLoading ? (
+                    <div className="flex items-center justify-center h-20">
+                      <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : historyItems.length === 0 ? (
+                    <div className="flex items-center justify-center h-20 text-xs text-muted-foreground">
+                      재고 이동 이력이 없어요
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="w-8 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">일자</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                          <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">변동수량</TableHead>
+                          <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이후수량</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                          <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사유</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">처리자</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {historyItems.map((h, idx) => (
+                          <TableRow key={h.id || idx} className="text-xs">
+                            <TableCell className="text-center text-muted-foreground">
+                              {idx + 1}
+                            </TableCell>
+                            <TableCell className="font-mono">
+                              {h.transaction_date ? String(h.transaction_date).slice(0, 10) : h.history_date || ""}
+                            </TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getHistoryTypeVariant(h.transaction_type || h.history_type)}
+                                className="text-[10px]"
+                              >
+                                {h.transaction_type || h.history_type}
+                              </Badge>
+                            </TableCell>
+                            <TableCell
+                              className={cn(
+                                "text-right font-mono",
+                                Number(h.quantity ?? h.change_qty) > 0
+                                  ? "text-primary"
+                                  : "text-destructive"
+                              )}
+                            >
+                              {Number(h.quantity ?? h.change_qty) > 0 ? "+" : ""}
+                              {Number(h.quantity ?? h.change_qty ?? 0).toLocaleString()}
+                            </TableCell>
+                            <TableCell className="text-right font-mono">
+                              {Number(h.balance_qty ?? h.after_qty ?? 0).toLocaleString()}
+                            </TableCell>
+                            <TableCell className="font-mono truncate max-w-[120px]">
+                              {h.reference_number || h.reference_no || ""}
+                            </TableCell>
+                            <TableCell className="truncate max-w-[150px]">
+                              {h.remark || h.reason || ""}
+                            </TableCell>
+                            <TableCell>{h.writer || h.created_by || ""}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 재고 조정 Dialog */}
+      <Dialog open={adjustModalOpen} onOpenChange={setAdjustModalOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>재고 조정</DialogTitle>
+            <DialogDescription>
+              {selectedStock
+                ? `${selectedStock.item_name || selectedStock.item_code} — 현재 수량: ${Number(selectedStock.current_qty || 0).toLocaleString()}`
+                : ""}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-2">
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 유형
+              </Label>
+              <Select
+                value={adjustForm.adjust_type}
+                onValueChange={(v) =>
+                  setAdjustForm((prev) => ({ ...prev, adjust_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="조정 유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="증가">증가 (입고 보정)</SelectItem>
+                  <SelectItem value="감소">감소 (출고 보정)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 수량
+              </Label>
+              <Input
+                type="number"
+                min={1}
+                placeholder="수량을 입력해주세요"
+                value={adjustForm.adjust_qty}
+                onChange={(e) =>
+                  setAdjustForm((prev) => ({
+                    ...prev,
+                    adjust_qty: e.target.value,
+                  }))
+                }
+              />
+              {adjustForm.adjust_qty && selectedStock && (
+                <p className="text-xs text-muted-foreground">
+                  조정 후 수량:{" "}
+                  <span className="font-mono font-bold">
+                    {(
+                      Number(selectedStock.current_qty || 0) +
+                      (adjustForm.adjust_type === "증가" ? 1 : -1) *
+                        Number(adjustForm.adjust_qty || 0)
+                    ).toLocaleString()}
+                  </span>
+                </p>
+              )}
+            </div>
+
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 사유 *
+              </Label>
+              <Textarea
+                placeholder="조정 사유를 입력해주세요"
+                rows={3}
+                value={adjustForm.reason}
+                onChange={(e) =>
+                  setAdjustForm((prev) => ({
+                    ...prev,
+                    reason: e.target.value,
+                  }))
+                }
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setAdjustModalOpen(false)}
+            >
+              취소
+            </Button>
+            <Button onClick={handleAdjustSave} disabled={adjustSaving}>
+              {adjustSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              조정하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/logistics/material-status/page.tsx b/frontend/app/(main)/COMPANY_30/logistics/material-status/page.tsx
new file mode 100644
index 00000000..eb87ba92
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/logistics/material-status/page.tsx
@@ -0,0 +1,629 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+// Card 제거 — rounded-lg border bg-card 패턴 사용
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Search,
+  RotateCcw,
+  Package,
+  ClipboardList,
+  Factory,
+  MapPin,
+  AlertTriangle,
+  CheckCircle2,
+  Loader2,
+  Inbox,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  getWorkOrders,
+  getMaterialStatus,
+  getWarehouses,
+  type WorkOrder,
+  type MaterialData,
+  type WarehouseData,
+} from "@/lib/api/materialStatus";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+
+const GRID_COLUMNS = [
+  { key: "plan_no", label: "계획번호" },
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "plan_qty", label: "수량" },
+  { key: "plan_date", label: "일자" },
+  { key: "status", label: "상태" },
+];
+
+const formatDate = (date: Date) => {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+};
+
+const getStatusLabel = (status: string) => {
+  const map: Record<string, string> = {
+    planned: "계획",
+    in_progress: "진행중",
+    completed: "완료",
+    pending: "대기",
+    cancelled: "취소",
+  };
+  return map[status] || status;
+};
+
+const getStatusStyle = (status: string) => {
+  const map: Record<string, string> = {
+    planned: "bg-secondary text-secondary-foreground border-border",
+    pending: "bg-secondary text-secondary-foreground border-border",
+    in_progress: "bg-primary/10 text-primary border-primary/20",
+    completed: "bg-accent text-accent-foreground border-accent/50",
+    cancelled: "bg-muted text-muted-foreground border-border",
+  };
+  return map[status] || "bg-muted text-muted-foreground border-border";
+};
+
+export default function MaterialStatusPage() {
+  const ts = useTableSettings("c16-material-status", "work_instruction", GRID_COLUMNS);
+  const today = new Date();
+  const monthAgo = new Date(today);
+  monthAgo.setMonth(today.getMonth() - 1);
+
+  const [searchDateFrom, setSearchDateFrom] = useState(formatDate(monthAgo));
+  const [searchDateTo, setSearchDateTo] = useState(formatDate(today));
+  const [searchItemCode, setSearchItemCode] = useState("");
+  const [searchItemName, setSearchItemName] = useState("");
+
+  const [workOrders, setWorkOrders] = useState<WorkOrder[]>([]);
+  const [workOrdersLoading, setWorkOrdersLoading] = useState(false);
+  const [checkedWoIds, setCheckedWoIds] = useState<string[]>([]);
+  const [selectedWoId, setSelectedWoId] = useState<string | null>(null);
+
+  const [warehouses, setWarehouses] = useState<WarehouseData[]>([]);
+  const [warehouse, setWarehouse] = useState("");
+  const [materialSearch, setMaterialSearch] = useState("");
+  const [showShortageOnly, setShowShortageOnly] = useState(false);
+  const [materials, setMaterials] = useState<MaterialData[]>([]);
+  const [materialsLoading, setMaterialsLoading] = useState(false);
+
+  // 창고 목록 초기 로드
+  useEffect(() => {
+    (async () => {
+      const res = await getWarehouses();
+      if (res.success && res.data) {
+        setWarehouses(res.data);
+      }
+    })();
+  }, []);
+
+  // 작업지시 검색
+  const handleSearch = useCallback(async () => {
+    setWorkOrdersLoading(true);
+    try {
+      const res = await getWorkOrders({
+        dateFrom: searchDateFrom,
+        dateTo: searchDateTo,
+        itemCode: searchItemCode || undefined,
+        itemName: searchItemName || undefined,
+      });
+      if (res.success && res.data) {
+        setWorkOrders(res.data);
+        setCheckedWoIds([]);
+        setSelectedWoId(null);
+        setMaterials([]);
+      }
+    } finally {
+      setWorkOrdersLoading(false);
+    }
+  }, [searchDateFrom, searchDateTo, searchItemCode, searchItemName]);
+
+  // 초기 로드
+  useEffect(() => {
+    handleSearch();
+  }, []);
+
+  const isAllChecked =
+    workOrders.length > 0 && checkedWoIds.length === workOrders.length;
+
+  const handleCheckAll = useCallback(
+    (checked: boolean) => {
+      setCheckedWoIds(checked ? workOrders.map((wo) => wo.id) : []);
+    },
+    [workOrders]
+  );
+
+  const handleCheckWo = useCallback((id: string, checked: boolean) => {
+    setCheckedWoIds((prev) =>
+      checked ? [...prev, id] : prev.filter((i) => i !== id)
+    );
+  }, []);
+
+  const handleSelectWo = useCallback((id: string) => {
+    setSelectedWoId((prev) => (prev === id ? null : id));
+  }, []);
+
+  // 선택된 작업지시의 자재 조회
+  const handleLoadSelectedMaterials = useCallback(async () => {
+    if (checkedWoIds.length === 0) {
+      alert("자재를 조회할 작업지시를 선택해주세요.");
+      return;
+    }
+
+    setMaterialsLoading(true);
+    try {
+      const res = await getMaterialStatus({
+        planIds: checkedWoIds,
+        warehouseCode: warehouse || undefined,
+      });
+      if (res.success && res.data) {
+        setMaterials(res.data);
+      }
+    } finally {
+      setMaterialsLoading(false);
+    }
+  }, [checkedWoIds, warehouse]);
+
+  const handleResetSearch = useCallback(() => {
+    const t = new Date();
+    const m = new Date(t);
+    m.setMonth(t.getMonth() - 1);
+    setSearchDateFrom(formatDate(m));
+    setSearchDateTo(formatDate(t));
+    setSearchItemCode("");
+    setSearchItemName("");
+    setMaterialSearch("");
+    setShowShortageOnly(false);
+  }, []);
+
+  const filteredMaterials = useMemo(() => {
+    return materials.filter((m) => {
+      const searchLower = materialSearch.toLowerCase();
+      const matchesSearch =
+        !materialSearch ||
+        m.code.toLowerCase().includes(searchLower) ||
+        m.name.toLowerCase().includes(searchLower);
+      const matchesShortage = !showShortageOnly || m.current < m.required;
+      return matchesSearch && matchesShortage;
+    });
+  }, [materials, materialSearch, showShortageOnly]);
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 검색 영역 */}
+      <div className="shrink-0 flex flex-wrap items-end gap-3 rounded-lg border bg-card p-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">기간</span>
+            <div className="flex items-center gap-1.5">
+              <Input
+                type="date"
+                className="h-9 w-[140px]"
+                value={searchDateFrom}
+                onChange={(e) => setSearchDateFrom(e.target.value)}
+              />
+              <span className="text-muted-foreground/50 text-xs">~</span>
+              <Input
+                type="date"
+                className="h-9 w-[140px]"
+                value={searchDateTo}
+                onChange={(e) => setSearchDateTo(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목코드</span>
+            <Input
+              placeholder="품목코드"
+              className="h-9 w-[140px]"
+              value={searchItemCode}
+              onChange={(e) => setSearchItemCode(e.target.value)}
+            />
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목명</span>
+            <Input
+              placeholder="품목명"
+              className="h-9 w-[140px]"
+              value={searchItemName}
+              onChange={(e) => setSearchItemName(e.target.value)}
+            />
+          </div>
+
+          <div className="flex-1" />
+
+          <div className="flex items-end gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-9"
+              onClick={handleResetSearch}
+            >
+              <RotateCcw className="mr-1 h-4 w-4" />
+              초기화
+            </Button>
+            <Button
+              size="sm"
+              className="h-9"
+              onClick={handleSearch}
+              disabled={workOrdersLoading}
+            >
+              {workOrdersLoading ? (
+                <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+              ) : (
+                <Search className="mr-1 h-4 w-4" />
+              )}
+              검색
+            </Button>
+          </div>
+      </div>
+
+      {/* 메인 콘텐츠 (좌우 분할) */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 왼쪽: 작업지시 리스트 */}
+          <ResizablePanel defaultSize={35} minSize={25}>
+            <div className="flex h-full flex-col">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between border-b bg-muted/30 px-3 py-2.5 shrink-0">
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    checked={isAllChecked}
+                    onCheckedChange={handleCheckAll}
+                  />
+                  <ClipboardList className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-semibold">작업지시 리스트</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                    {workOrders.length}건
+                  </span>
+                  <Button
+                    size="sm"
+                    className="h-8"
+                    onClick={handleLoadSelectedMaterials}
+                    disabled={materialsLoading}
+                  >
+                    {materialsLoading ? (
+                      <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Search className="mr-1.5 h-3.5 w-3.5" />
+                    )}
+                    자재조회
+                  </Button>
+                  <Button variant="ghost" size="sm" className="h-8" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 작업지시 목록 */}
+              <div className="flex-1 space-y-2 overflow-auto p-3">
+                {workOrdersLoading ? (
+                  <div className="flex flex-col items-center justify-center py-12 text-center">
+                    <Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
+                    <p className="text-sm text-muted-foreground">
+                      작업지시를 조회하고 있어요...
+                    </p>
+                  </div>
+                ) : workOrders.length === 0 ? (
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Inbox className="h-10 w-10 text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">
+                      조회된 작업지시가 없어요
+                    </p>
+                  </div>
+                ) : (
+                  ts.groupData(workOrders).map((wo) => {
+                    if ((wo as any)._isGroupSummary || (wo as any)._isGroupHeader) return null;
+                    return (
+                      <div
+                        key={wo.id}
+                        className={cn(
+                          "flex gap-3 rounded-lg border p-3 transition-all cursor-pointer",
+                          "hover:border-primary/50 hover:shadow-sm",
+                          selectedWoId === wo.id
+                            ? "border-primary bg-primary/5 shadow-sm"
+                            : "border-border"
+                        )}
+                        onClick={() => handleSelectWo(wo.id)}
+                      >
+                        <div
+                          className="flex items-start pt-0.5"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Checkbox
+                            checked={checkedWoIds.includes(wo.id)}
+                            onCheckedChange={(c) =>
+                              handleCheckWo(wo.id, c as boolean)
+                            }
+                          />
+                        </div>
+                        <div className="flex flex-1 flex-col gap-1.5">
+                          <div className="flex items-center gap-2">
+                            {ts.isVisible("plan_no") && (
+                              <span className="text-sm font-bold text-primary">
+                                {wo.plan_no || wo.work_order_no || `WO-${wo.id}`}
+                              </span>
+                            )}
+                            {ts.isVisible("status") && (
+                              <span
+                                className={cn(
+                                  "ml-auto rounded-md border px-2 py-0.5 text-[11px] font-semibold",
+                                  getStatusStyle(wo.status)
+                                )}
+                              >
+                                {getStatusLabel(wo.status)}
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1.5">
+                            {ts.isVisible("item_name") && (
+                              <span className="text-sm font-semibold">
+                                {wo.item_name}
+                              </span>
+                            )}
+                            {ts.isVisible("item_code") && (
+                              <span className="text-xs text-muted-foreground">
+                                ({wo.item_code})
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                            {ts.isVisible("plan_qty") && (
+                              <>
+                                <span>수량:</span>
+                                <span className="font-semibold text-foreground">
+                                  {Number(wo.plan_qty).toLocaleString()}개
+                                </span>
+                              </>
+                            )}
+                            {ts.isVisible("plan_qty") && ts.isVisible("plan_date") && (
+                              <span className="mx-1">|</span>
+                            )}
+                            {ts.isVisible("plan_date") && (
+                              <>
+                                <span>일자:</span>
+                                <span className="font-semibold text-foreground">
+                                  {wo.plan_date
+                                    ? new Date(wo.plan_date)
+                                        .toISOString()
+                                        .slice(0, 10)
+                                    : "-"}
+                                </span>
+                              </>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 오른쪽: 원자재 현황 */}
+          <ResizablePanel defaultSize={65} minSize={35}>
+            <div className="flex h-full flex-col">
+              {/* 패널 헤더 */}
+              <div className="flex items-center gap-2 border-b bg-muted/30 px-3 py-2.5 shrink-0">
+                <Factory className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-semibold">원자재 재고 현황</span>
+              </div>
+
+              {/* 필터 */}
+              <div className="flex flex-wrap items-center gap-3 border-b bg-muted/30 px-4 py-2.5 shrink-0">
+                <Input
+                  placeholder="원자재 검색"
+                  className="h-8 min-w-[150px] flex-1 text-xs"
+                  value={materialSearch}
+                  onChange={(e) => setMaterialSearch(e.target.value)}
+                />
+                <Select value={warehouse} onValueChange={setWarehouse}>
+                  <SelectTrigger className="h-8 w-[180px] text-xs">
+                    <SelectValue placeholder="전체 창고" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__all__">전체 창고</SelectItem>
+                    {warehouses.map((wh) => (
+                      <SelectItem
+                        key={wh.warehouse_code}
+                        value={wh.warehouse_code}
+                      >
+                        {wh.warehouse_name}
+                        {wh.warehouse_type
+                          ? ` (${wh.warehouse_type})`
+                          : ""}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <label className="flex cursor-pointer items-center gap-2 text-xs font-medium">
+                  <Checkbox
+                    checked={showShortageOnly}
+                    onCheckedChange={(c) => setShowShortageOnly(c as boolean)}
+                  />
+                  <span>부족한 것만 보기</span>
+                </label>
+                <span className="ml-auto rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                  {filteredMaterials.length}개 품목
+                </span>
+              </div>
+
+              {/* 원자재 목록 */}
+              <div className="flex-1 space-y-2 overflow-auto p-3">
+                {materialsLoading ? (
+                  <div className="flex flex-col items-center justify-center py-12 text-center">
+                    <Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
+                    <p className="text-sm text-muted-foreground">
+                      자재현황을 조회하고 있어요...
+                    </p>
+                  </div>
+                ) : materials.length === 0 ? (
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Inbox className="h-10 w-10 text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">
+                      작업지시를 선택하고 자재조회 버튼을 클릭해주세요
+                    </p>
+                  </div>
+                ) : filteredMaterials.length === 0 ? (
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Package className="h-10 w-10 text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">
+                      조회된 원자재가 없어요
+                    </p>
+                  </div>
+                ) : (
+                  filteredMaterials.map((material) => {
+                    const shortage = material.required - material.current;
+                    const isShortage = shortage > 0;
+                    const percentage =
+                      material.required > 0
+                        ? Math.min(
+                            (material.current / material.required) * 100,
+                            100
+                          )
+                        : 100;
+
+                    return (
+                      <div
+                        key={material.code}
+                        className={cn(
+                          "rounded-lg border p-3 transition-all hover:shadow-sm",
+                          isShortage
+                            ? "border-destructive/30 bg-destructive/5"
+                            : "border-primary/15 bg-primary/5"
+                        )}
+                      >
+                        {/* 메인 정보 라인 */}
+                        <div className="flex flex-wrap items-center gap-2">
+                          <span className="text-sm font-bold">
+                            {material.name}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            ({material.code})
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            |
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            필요:
+                          </span>
+                          <span className="text-xs font-semibold text-primary">
+                            {material.required.toLocaleString()}
+                            {material.unit}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            |
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            현재:
+                          </span>
+                          <span
+                            className={cn(
+                              "text-xs font-semibold",
+                              isShortage
+                                ? "text-destructive"
+                                : "text-foreground"
+                            )}
+                          >
+                            {material.current.toLocaleString()}
+                            {material.unit}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            |
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            {isShortage ? "부족:" : "여유:"}
+                          </span>
+                          <span
+                            className={cn(
+                              "text-xs font-semibold",
+                              isShortage
+                                ? "text-destructive"
+                                : "text-primary"
+                            )}
+                          >
+                            {Math.abs(shortage).toLocaleString()}
+                            {material.unit}
+                          </span>
+                          <span className="text-xs font-semibold text-muted-foreground">
+                            ({percentage.toFixed(0)}%)
+                          </span>
+
+                          {isShortage ? (
+                            <span className="ml-auto inline-flex items-center gap-1 rounded-md border border-destructive bg-destructive/10 px-2 py-0.5 text-[11px] font-semibold text-destructive">
+                              <AlertTriangle className="h-3 w-3" />
+                              부족
+                            </span>
+                          ) : (
+                            <span className="ml-auto inline-flex items-center gap-1 rounded-md border border-primary bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary">
+                              <CheckCircle2 className="h-3 w-3" />
+                              충분
+                            </span>
+                          )}
+                        </div>
+
+                        {/* 위치별 재고 */}
+                        {material.locations.length > 0 && (
+                          <div className="mt-2 flex flex-wrap items-center gap-1.5">
+                            <MapPin className="h-3.5 w-3.5 text-muted-foreground" />
+                            {material.locations.map((loc, idx) => (
+                              <span
+                                key={idx}
+                                className="inline-flex items-center gap-1 rounded bg-muted/40 px-2 py-0.5 text-xs transition-colors hover:bg-muted/60"
+                              >
+                                <span className="font-semibold font-mono text-primary">
+                                  {loc.location || loc.warehouse}
+                                </span>
+                                <span className="font-semibold">
+                                  {loc.qty.toLocaleString()}
+                                  {material.unit}
+                                </span>
+                              </span>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/logistics/outbound/page.tsx b/frontend/app/(main)/COMPANY_30/logistics/outbound/page.tsx
new file mode 100644
index 00000000..c1ffbd40
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/logistics/outbound/page.tsx
@@ -0,0 +1,1840 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Search,
+  Plus,
+  Trash2,
+  Loader2,
+  PackageOpen,
+  X,
+  Save,
+  ChevronRight,
+  ChevronLeft,
+  ChevronDown,
+  ChevronsLeft,
+  ChevronsRight,
+  Inbox,
+  Settings2,
+  Filter,
+  Check,
+  ArrowUp,
+  ArrowDown,
+} from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+// API: /outbound/*
+import {
+  getOutboundList,
+  createOutbound,
+  updateOutbound,
+  deleteOutbound,
+  generateOutboundNumber,
+  getOutboundWarehouses,
+  getOutboundLocations,
+  getShipmentInstructionSources,
+  getPurchaseOrderSources,
+  getItemSources,
+  type OutboundItem,
+  type ShipmentInstructionSource,
+  type PurchaseOrderSource,
+  type ItemSource,
+  type LocationOption,
+  type WarehouseOption,
+} from "@/lib/api/outbound";
+
+// 출고유형 옵션
+const OUTBOUND_TYPES = [
+  { value: "판매출고", label: "판매출고", color: "bg-primary/10 text-primary" },
+  { value: "반품출고", label: "반품출고", color: "bg-destructive/10 text-destructive" },
+  { value: "기타출고", label: "기타출고", color: "bg-muted text-muted-foreground" },
+];
+
+const OUTBOUND_STATUS_OPTIONS = [
+  { value: "대기", label: "대기", color: "bg-secondary text-secondary-foreground" },
+  { value: "출고완료", label: "출고완료", color: "bg-primary/10 text-primary" },
+  { value: "부분출고", label: "부분출고", color: "bg-accent text-accent-foreground" },
+  { value: "출고취소", label: "출고취소", color: "bg-destructive/10 text-destructive" },
+];
+
+const getTypeColor = (type: string) => OUTBOUND_TYPES.find((t) => t.value === type)?.color || "bg-muted text-muted-foreground";
+const getStatusColor = (status: string) => OUTBOUND_STATUS_OPTIONS.find((s) => s.value === status)?.color || "bg-muted text-muted-foreground";
+
+// 소스 테이블 한글명 매핑
+const SOURCE_TYPE_LABEL: Record<string, string> = {
+  shipment_instruction_detail: "출하지시",
+  purchase_order_mng: "발주",
+  item_info: "품목",
+};
+
+const GRID_COLUMNS = [
+  { key: "outbound_number", label: "출고번호" },
+  { key: "outbound_type", label: "출고유형" },
+  { key: "outbound_date", label: "출고일" },
+  { key: "reference_number", label: "참조번호" },
+  { key: "source_type", label: "데이터출처" },
+  { key: "customer_name", label: "거래처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "outbound_qty", label: "출고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+  { key: "warehouse_name", label: "창고" },
+  { key: "outbound_status", label: "출고상태" },
+  { key: "remark", label: "비고" },
+];
+
+// 마스터 헤더 레이아웃 (출고번호 뒤)
+const MASTER_BODY_LAYOUT = [
+  { key: "outbound_type", label: "출고유형", colSpan: 1 },
+  { key: "outbound_date", label: "출고일", colSpan: 1 },
+  { key: "reference_number", label: "참조번호", colSpan: 1 },
+  { key: "customer_name", label: "거래처", colSpan: 1 },
+  { key: "warehouse_name", label: "창고", colSpan: 1 },
+  { key: "outbound_status", label: "출고상태", colSpan: 1 },
+  { key: "memo", label: "비고", colSpan: 1 },
+];
+
+// 디테일 헤더 컬럼
+const DETAIL_HEADER_COLS = [
+  { key: "source_type", label: "출처" },
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "specification", label: "규격" },
+  { key: "outbound_qty", label: "출고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+];
+
+// 마스터 필드 키 목록 (필터 분류용)
+const MASTER_KEYS = new Set(["outbound_number", ...MASTER_BODY_LAYOUT.map((c) => c.key)]);
+
+// 디테일 필드 키 매핑 (GRID_COLUMNS key → DETAIL_HEADER_COLS key)
+const DETAIL_KEY_MAP: Record<string, string> = {
+  source_type: "source_type",
+  item_number: "item_code",
+  item_name: "item_name",
+  spec: "specification",
+  outbound_qty: "outbound_qty",
+  unit_price: "unit_price",
+  total_amount: "total_amount",
+};
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 선택된 소스 아이템 (등록 모달에서 사용)
+interface SelectedSourceItem {
+  key: string;
+  outbound_type: string;
+  reference_number: string;
+  customer_code: string;
+  customer_name: string;
+  item_number: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  unit: string;
+  outbound_qty: number;
+  unit_price: number;
+  total_amount: number;
+  source_type: string;
+  source_id: string;
+}
+
+export default function OutboundPage() {
+  const ts = useTableSettings("c16-outbound", "outbound_mng", GRID_COLUMNS);
+
+  // ts.visibleColumns 기반 마스터/디테일 컬럼 계산
+  const visibleMasterLayout = useMemo(() => {
+    const ordered: typeof MASTER_BODY_LAYOUT = [];
+    for (const vc of ts.visibleColumns) {
+      const m = MASTER_BODY_LAYOUT.find((ml) => ml.key === vc.key);
+      if (m) ordered.push(m);
+    }
+    return ordered.length > 0 ? ordered : MASTER_BODY_LAYOUT;
+  }, [ts.visibleColumns]);
+
+  const visibleDetailCols = useMemo(() => {
+    const ordered: typeof DETAIL_HEADER_COLS = [];
+    for (const vc of ts.visibleColumns) {
+      const detailKey = DETAIL_KEY_MAP[vc.key];
+      if (detailKey) {
+        const d = DETAIL_HEADER_COLS.find((dc) => dc.key === detailKey);
+        if (d) ordered.push(d);
+      }
+    }
+    return ordered.length > 0 ? ordered : DETAIL_HEADER_COLS;
+  }, [ts.visibleColumns]);
+
+  const TOTAL_COLS = 3 + visibleMasterLayout.length;
+
+  // 목록 데이터
+  const [data, setData] = useState<OutboundItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 마스터-디테일 그룹 테이블 state
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+  const [closingOrders, setClosingOrders] = useState<Set<string>>(new Set());
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
+
+  // 등록 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalOutboundType, setModalOutboundType] = useState("판매출고");
+  const [modalOutboundNo, setModalOutboundNo] = useState("");
+  const [modalOutboundDate, setModalOutboundDate] = useState("");
+  const [modalWarehouse, setModalWarehouse] = useState("");
+  const [modalLocation, setModalLocation] = useState("");
+  const [modalManager, setModalManager] = useState("");
+  const [modalMemo, setModalMemo] = useState("");
+  const [selectedItems, setSelectedItems] = useState<SelectedSourceItem[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // 수정 모드 (등록 모달을 재활용)
+  const [editMode, setEditMode] = useState(false);
+  const [editItemIds, setEditItemIds] = useState<string[]>([]);
+
+  // 소스 데이터
+  const [sourceKeyword, setSourceKeyword] = useState("");
+  const [sourceLoading, setSourceLoading] = useState(false);
+  const [shipmentInstructions, setShipmentInstructions] = useState<ShipmentInstructionSource[]>([]);
+  const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrderSource[]>([]);
+  const [items, setItems] = useState<ItemSource[]>([]);
+  const [warehouses, setWarehouses] = useState<WarehouseOption[]>([]);
+  const [locations, setLocations] = useState<LocationOption[]>([]);
+
+  // 소스 데이터 페이징 (클라이언트 사이드)
+  const [sourcePage, setSourcePage] = useState(1);
+  const [sourcePageSize, setSourcePageSize] = useState(20);
+
+  // 목록 조회
+  const fetchList = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string | undefined> = {};
+      for (const f of searchFilters) {
+        if (!f.value) continue;
+        if (f.columnName === "outbound_type") params.outbound_type = f.value;
+        else if (f.columnName === "outbound_status") params.outbound_status = f.value;
+        else if (f.columnName === "outbound_date" && f.operator === "between") {
+          const [from, to] = f.value.split("~").map((s) => s.trim());
+          if (from) params.date_from = from;
+          if (to) params.date_to = to;
+        } else {
+          params.search_keyword = f.value;
+        }
+      }
+      const res = await getOutboundList(params);
+      if (res.success) setData(res.data);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchList();
+  }, [fetchList]);
+
+  // 창고 목록 로드
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await getOutboundWarehouses();
+        if (res.success) setWarehouses(res.data);
+      } catch {
+        // ignore
+      }
+    })();
+  }, []);
+
+  // --- 마스터-디테일 그룹핑, 필터, 정렬 ---
+
+  // outbound_number 기준 그룹핑 + 필터 + 정렬
+  const filteredGroups = useMemo(() => {
+    // 1차: outbound_number 기준 그룹핑
+    const allGroups: Record<string, { master: OutboundItem; details: OutboundItem[] }> = {};
+    for (const row of data) {
+      const key = row.outbound_number || "_no_number";
+      if (!allGroups[key]) {
+        allGroups[key] = { master: row, details: [] };
+      }
+      allGroups[key].details.push(row);
+    }
+
+    // 마스터 필터 / 디테일 필터 분리
+    const masterFilters: Record<string, Set<string>> = {};
+    const detailFilters: Record<string, Set<string>> = {};
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      if (MASTER_KEYS.has(colKey)) masterFilters[colKey] = values;
+      else detailFilters[colKey] = values;
+    }
+
+    // 2차: 마스터 필터 적용 (그룹 단위)
+    let entries = Object.entries(allGroups);
+    if (Object.keys(masterFilters).length > 0) {
+      entries = entries.filter(([, group]) =>
+        Object.entries(masterFilters).every(([colKey, values]) => {
+          const raw = (group.master as any)?.[colKey] ?? "";
+          return values.has(String(raw));
+        })
+      );
+    }
+
+    // 3차: 디테일 필터 적용 (행 단위)
+    if (Object.keys(detailFilters).length > 0) {
+      entries = entries
+        .map(([outNo, group]) => {
+          const filtered = group.details.filter((row) =>
+            Object.entries(detailFilters).every(([colKey, values]) => {
+              let cellVal = (row as any)[colKey] != null ? String((row as any)[colKey]) : "";
+              if (colKey === "source_type") cellVal = SOURCE_TYPE_LABEL[cellVal] || cellVal;
+              return values.has(cellVal);
+            })
+          );
+          return [outNo, { ...group, details: filtered }] as [string, typeof group];
+        })
+        .filter(([, group]) => group.details.length > 0);
+    }
+
+    // 4차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      if (MASTER_KEYS.has(key)) {
+        entries.sort(([, a], [, b]) => {
+          const av = (a.master as any)?.[key] ?? "";
+          const bv = (b.master as any)?.[key] ?? "";
+          const na = Number(av); const nb = Number(bv);
+          if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+          return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+        });
+      } else {
+        entries.forEach(([, group]) => {
+          group.details.sort((a, b) => {
+            let av: any = (a as any)[key] ?? "";
+            let bv: any = (b as any)[key] ?? "";
+            if (key === "source_type") { av = SOURCE_TYPE_LABEL[av] || av; bv = SOURCE_TYPE_LABEL[bv] || bv; }
+            const na = Number(av); const nb = Number(bv);
+            if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+            return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+          });
+        });
+      }
+    }
+
+    return Object.fromEntries(entries);
+  }, [data, headerFilters, sortState]);
+
+  // 마스터 컬럼별 고유값 (헤더 필터용)
+  const masterUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    const seenMasters = new Map<string, OutboundItem>();
+    data.forEach((row) => {
+      if (row.outbound_number && !seenMasters.has(row.outbound_number)) {
+        seenMasters.set(row.outbound_number, row);
+      }
+    });
+    const masters = Array.from(seenMasters.values());
+    for (const col of [{ key: "outbound_number", label: "출고번호" }, ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label }))]) {
+      const values = new Set<string>();
+      masters.forEach((m) => {
+        const val = (m as any)?.[col.key];
+        if (val !== null && val !== undefined && val !== "") values.add(String(val));
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 디테일 컬럼별 고유값 (디테일 서브헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of DETAIL_HEADER_COLS) {
+      const values = new Set<string>();
+      data.forEach((row) => {
+        let val = (row as any)[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "source_type") val = SOURCE_TYPE_LABEL[val] || val;
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
+  };
+
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
+  };
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
+    );
+  };
+
+  // 삭제
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) return;
+    if (!confirm(`선택한 ${checkedIds.length}건을 삭제하시겠습니까?`)) return;
+    for (const id of checkedIds) {
+      await deleteOutbound(id);
+    }
+    setCheckedIds([]);
+    fetchList();
+  };
+
+  // --- 등록 모달 ---
+
+  const loadSourceData = useCallback(
+    async (type: string, keyword?: string) => {
+      setSourceLoading(true);
+      try {
+        if (type === "판매출고") {
+          const res = await getShipmentInstructionSources(keyword || undefined);
+          if (res.success) setShipmentInstructions(res.data);
+        } else if (type === "반품출고") {
+          const res = await getPurchaseOrderSources(keyword || undefined);
+          if (res.success) setPurchaseOrders(res.data);
+        } else {
+          const res = await getItemSources(keyword || undefined);
+          if (res.success) setItems(res.data);
+        }
+      } catch {
+        // ignore
+      } finally {
+        setSourceLoading(false);
+      }
+    },
+    []
+  );
+
+  const openRegisterModal = async () => {
+    const defaultType = "판매출고";
+    setEditMode(false);
+    setEditItemIds([]);
+    setModalOutboundType(defaultType);
+    setModalOutboundDate(new Date().toISOString().split("T")[0]);
+    setModalWarehouse("");
+    setModalLocation("");
+    setModalManager("");
+    setModalMemo("");
+    setSelectedItems([]);
+    setSourceKeyword("");
+    setShipmentInstructions([]);
+    setPurchaseOrders([]);
+    setItems([]);
+    setIsModalOpen(true);
+
+    try {
+      const [numRes] = await Promise.all([
+        generateOutboundNumber(),
+        loadSourceData(defaultType),
+      ]);
+      if (numRes.success) setModalOutboundNo(numRes.data);
+    } catch {
+      setModalOutboundNo("");
+    }
+  };
+
+  // 수정 모달 열기 (같은 출고번호 묶어서)
+  const openEditModal = (row: OutboundItem) => {
+    const outNo = row.outbound_number;
+    const grouped = data.filter((d) => d.outbound_number === outNo);
+    const first = grouped[0] || row;
+
+    setEditMode(true);
+    setEditItemIds(grouped.map((g) => g.id));
+    setModalOutboundNo(outNo);
+    setModalOutboundType(first.outbound_type || "판매출고");
+    setModalOutboundDate(first.outbound_date ? first.outbound_date.slice(0, 10) : "");
+    setModalWarehouse(first.warehouse_code || "");
+    setModalLocation(first.location_code || "");
+    setModalManager(first.manager_id || "");
+    setModalMemo(first.memo || "");
+    setSelectedItems(
+      grouped.map((g) => ({
+        key: g.id,
+        outbound_type: g.outbound_type || "",
+        reference_number: g.reference_number || "",
+        customer_code: g.customer_code || "",
+        customer_name: g.customer_name || "",
+        item_number: g.item_code || "",
+        item_name: g.item_name || "",
+        spec: g.specification || "",
+        material: g.material || "",
+        unit: g.unit || "",
+        outbound_qty: Number(g.outbound_qty) || 0,
+        unit_price: Number(g.unit_price) || 0,
+        total_amount: Number(g.total_amount) || 0,
+        source_type: g.source_type || "",
+        source_id: (g as any).source_id || "",
+      }))
+    );
+    setSourceKeyword("");
+    setIsModalOpen(true);
+    loadSourceData(first.outbound_type || "판매출고");
+  };
+
+  const searchSourceData = useCallback(async () => {
+    setSourcePage(1);
+    await loadSourceData(modalOutboundType, sourceKeyword || undefined);
+  }, [modalOutboundType, sourceKeyword, loadSourceData]);
+
+  // 현재 출고유형에 따른 전체 소스 데이터
+  const allSourceData = useMemo(() => {
+    if (modalOutboundType === "판매출고") return shipmentInstructions;
+    if (modalOutboundType === "반품출고") return purchaseOrders;
+    return items;
+  }, [modalOutboundType, shipmentInstructions, purchaseOrders, items]);
+
+  const sourceTotalCount = allSourceData.length;
+  const sourceTotalPages = Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize));
+
+  // 현재 페이지에 해당하는 slice
+  const pagedShipmentInstructions = useMemo(() => {
+    if (modalOutboundType !== "판매출고") return [];
+    const start = (sourcePage - 1) * sourcePageSize;
+    return shipmentInstructions.slice(start, start + sourcePageSize);
+  }, [modalOutboundType, shipmentInstructions, sourcePage, sourcePageSize]);
+
+  const pagedPurchaseOrders = useMemo(() => {
+    if (modalOutboundType !== "반품출고") return [];
+    const start = (sourcePage - 1) * sourcePageSize;
+    return purchaseOrders.slice(start, start + sourcePageSize);
+  }, [modalOutboundType, purchaseOrders, sourcePage, sourcePageSize]);
+
+  const pagedItems = useMemo(() => {
+    if (modalOutboundType !== "기타출고") return [];
+    const start = (sourcePage - 1) * sourcePageSize;
+    return items.slice(start, start + sourcePageSize);
+  }, [modalOutboundType, items, sourcePage, sourcePageSize]);
+
+  const handleOutboundTypeChange = useCallback(
+    (type: string) => {
+      setModalOutboundType(type);
+      setSourceKeyword("");
+      setSourcePage(1);
+      setShipmentInstructions([]);
+      setPurchaseOrders([]);
+      setItems([]);
+      setSelectedItems([]);
+      loadSourceData(type);
+    },
+    [loadSourceData]
+  );
+
+  // 출하지시 품목 추가 (판매출고)
+  const addShipmentInstruction = (si: ShipmentInstructionSource) => {
+    const key = `si-${si.detail_id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        outbound_type: "판매출고",
+        reference_number: si.instruction_no,
+        customer_code: si.partner_id,
+        customer_name: si.partner_id,
+        item_number: si.item_code,
+        item_name: si.item_name,
+        spec: si.spec || "",
+        material: si.material || "",
+        unit: "EA",
+        outbound_qty: si.remain_qty,
+        unit_price: 0,
+        total_amount: 0,
+        source_type: "shipment_instruction_detail",
+        source_id: String(si.detail_id),
+      },
+    ]);
+  };
+
+  // 발주 품목 추가 (반품출고)
+  const addPurchaseOrder = (po: PurchaseOrderSource) => {
+    const key = `po-${po.id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        outbound_type: "반품출고",
+        reference_number: po.purchase_no,
+        customer_code: po.supplier_code,
+        customer_name: po.supplier_name,
+        item_number: po.item_code,
+        item_name: po.item_name,
+        spec: po.spec || "",
+        material: po.material || "",
+        unit: "EA",
+        outbound_qty: po.received_qty,
+        unit_price: po.unit_price,
+        total_amount: po.received_qty * po.unit_price,
+        source_type: "purchase_order_mng",
+        source_id: po.id,
+      },
+    ]);
+  };
+
+  // 품목 추가 (기타출고)
+  const addItem = (item: ItemSource) => {
+    const key = `item-${item.id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        outbound_type: "기타출고",
+        reference_number: item.item_number,
+        customer_code: "",
+        customer_name: "",
+        item_number: item.item_number,
+        item_name: item.item_name,
+        spec: item.spec || "",
+        material: item.material || "",
+        unit: item.unit || "EA",
+        outbound_qty: 0,
+        unit_price: item.standard_price,
+        total_amount: 0,
+        source_type: "item_info",
+        source_id: item.id,
+      },
+    ]);
+  };
+
+  // 선택 품목 수량 변경
+  const updateItemQty = (key: string, qty: number) => {
+    setSelectedItems((prev) =>
+      prev.map((item) =>
+        item.key === key
+          ? { ...item, outbound_qty: qty, total_amount: qty * item.unit_price }
+          : item
+      )
+    );
+  };
+
+  // 선택 품목 단가 변경
+  const updateItemPrice = (key: string, price: number) => {
+    setSelectedItems((prev) =>
+      prev.map((item) =>
+        item.key === key
+          ? { ...item, unit_price: price, total_amount: item.outbound_qty * price }
+          : item
+      )
+    );
+  };
+
+  // 선택 품목 삭제
+  const removeItem = (key: string) => {
+    setSelectedItems((prev) => prev.filter((item) => item.key !== key));
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (selectedItems.length === 0) {
+      alert("출고할 품목을 선택해주세요.");
+      return;
+    }
+    if (!modalOutboundDate) {
+      alert("출고일을 입력해주세요.");
+      return;
+    }
+
+    const zeroQtyItems = selectedItems.filter((i) => !i.outbound_qty || i.outbound_qty <= 0);
+    if (zeroQtyItems.length > 0) {
+      alert("출고수량이 0인 품목이 있습니다. 수량을 입력해주세요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      if (editMode) {
+        const currentKeys = new Set(selectedItems.map((i) => i.key));
+        // 삭제: editItemIds에 있지만 selectedItems에 없는 것
+        const toDelete = editItemIds.filter((id) => !currentKeys.has(id));
+        // 수정: editItemIds에도 있고 selectedItems에도 있는 것
+        const toUpdate = selectedItems.filter((i) => editItemIds.includes(i.key));
+        // 추가: editItemIds에 없는 새 아이템
+        const toCreate = selectedItems.filter((i) => !editItemIds.includes(i.key));
+
+        await Promise.all([
+          ...toDelete.map((id) => deleteOutbound(id)),
+          ...toUpdate.map((item) =>
+            updateOutbound(item.key, {
+              outbound_date: modalOutboundDate,
+              outbound_qty: item.outbound_qty,
+              unit_price: item.unit_price,
+              total_amount: item.total_amount,
+              warehouse_code: modalWarehouse || undefined,
+              location_code: modalLocation || undefined,
+              manager_id: modalManager || undefined,
+              memo: modalMemo || undefined,
+            } as any)
+          ),
+          ...(toCreate.length > 0
+            ? [createOutbound({
+                outbound_number: modalOutboundNo,
+                outbound_date: modalOutboundDate,
+                warehouse_code: modalWarehouse || undefined,
+                location_code: modalLocation || undefined,
+                manager_id: modalManager || undefined,
+                memo: modalMemo || undefined,
+                items: toCreate.map((item) => ({
+                  outbound_type: item.outbound_type,
+                  reference_number: item.reference_number,
+                  customer_code: item.customer_code,
+                  customer_name: item.customer_name,
+                  item_code: item.item_number,
+                  item_name: item.item_name,
+                  spec: item.spec,
+                  material: item.material,
+                  unit: item.unit,
+                  outbound_qty: item.outbound_qty,
+                  unit_price: item.unit_price,
+                  total_amount: item.total_amount,
+                  source_type: item.source_type,
+                  source_id: item.source_id,
+                  outbound_status: "출고완료",
+                })),
+              })]
+            : []),
+        ]);
+        toast.success("출고 정보를 수정했어요");
+        setIsModalOpen(false);
+        fetchList();
+      } else {
+        const res = await createOutbound({
+          outbound_number: modalOutboundNo,
+          outbound_date: modalOutboundDate,
+          warehouse_code: modalWarehouse || undefined,
+          location_code: modalLocation || undefined,
+          manager_id: modalManager || undefined,
+          memo: modalMemo || undefined,
+          items: selectedItems.map((item) => ({
+            outbound_type: item.outbound_type,
+            reference_number: item.reference_number,
+            customer_code: item.customer_code,
+            customer_name: item.customer_name,
+            item_code: item.item_number,
+            item_name: item.item_name,
+            spec: item.spec,
+            material: item.material,
+            unit: item.unit,
+            outbound_qty: item.outbound_qty,
+            unit_price: item.unit_price,
+            total_amount: item.total_amount,
+            source_type: item.source_type,
+            source_id: item.source_id,
+            outbound_status: "출고완료",
+          })),
+        });
+
+        if (res.success) {
+          toast.success(res.message || "출고 등록 완료");
+          setIsModalOpen(false);
+          fetchList();
+        }
+      }
+    } catch {
+      toast.error(editMode ? "수정에 실패했어요" : "출고 등록 중 오류가 발생했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+
+
+  // 합계 계산
+  const totalSummary = useMemo(() => {
+    return {
+      count: selectedItems.length,
+      qty: selectedItems.reduce((sum, i) => sum + (i.outbound_qty || 0), 0),
+      amount: selectedItems.reduce((sum, i) => sum + (i.total_amount || 0), 0),
+    };
+  }, [selectedItems]);
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 검색 영역 */}
+      <DynamicSearchFilter
+        tableName="outbound_mng"
+        filterId="c16-outbound"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={data.length}
+      />
+
+      {/* 출고 목록 테이블 */}
+      <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+        {/* 패널 헤더 */}
+        <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2.5 shrink-0">
+          <div className="flex items-center gap-2">
+            <PackageOpen className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-semibold">출고 목록</span>
+            <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+              {data.length}건
+            </span>
+          </div>
+          <div className="flex gap-2">
+            <Button size="sm" onClick={openRegisterModal} className="h-8">
+              <Plus className="mr-1 h-3.5 w-3.5" />
+              출고 등록
+            </Button>
+            <Button
+              size="sm"
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={checkedIds.length === 0}
+              className="h-8"
+            >
+              <Trash2 className="mr-1 h-3.5 w-3.5" />
+              삭제 ({checkedIds.length})
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="h-full overflow-auto">
+          <Table style={{ minWidth: `${216 + visibleMasterLayout.length * 120}px` }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "36px" }} />
+              <col style={{ width: "140px" }} />
+              {visibleMasterLayout.map((col) => (
+                <col key={col.key} style={{ width: ts.getWidth(col.key) ? `${ts.getWidth(col.key)}px` : undefined }} />
+              ))}
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
+                  <Checkbox
+                    checked={(() => {
+                      const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
+                  />
+                </TableHead>
+                <TableHead />
+                {/* 출고번호 */}
+                <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                  <div className="inline-flex items-center gap-1">
+                    <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort("outbound_number")}>
+                      <span className="truncate">출고번호</span>
+                      {sortState?.key === "outbound_number" && (
+                        sortState.direction === "asc"
+                          ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                          : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                      )}
+                    </div>
+                    {(masterUniqueValues["outbound_number"] || []).length > 0 && (
+                      <HeaderFilterPopover
+                        colKey="outbound_number" colLabel="출고번호"
+                        uniqueValues={masterUniqueValues["outbound_number"] || []}
+                        filterValues={headerFilters["outbound_number"] || new Set<string>()}
+                        onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                      />
+                    )}
+                  </div>
+                </TableHead>
+                {/* 마스터 필드 헤더 (ts.visibleColumns 순서) */}
+                {visibleMasterLayout.map((col) => (
+                  <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                    <div className="inline-flex items-center gap-1">
+                      <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                        <span className="truncate">{col.label}</span>
+                        {sortState?.key === col.key && (
+                          sortState.direction === "asc"
+                            ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                            : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                        )}
+                      </div>
+                      {(masterUniqueValues[col.key] || []).length > 0 && (
+                        <HeaderFilterPopover
+                          colKey={col.key} colLabel={col.label}
+                          uniqueValues={masterUniqueValues[col.key] || []}
+                          filterValues={headerFilters[col.key] || new Set<string>()}
+                          onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                        />
+                      )}
+                    </div>
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
+                  </TableCell>
+                </TableRow>
+              ) : Object.keys(filteredGroups).length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <PackageOpen className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 출고 내역이 없어요</span>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                Object.entries(filteredGroups).map(([outboundNo, group]) => {
+                  const isExpanded = expandedOrders.has(outboundNo);
+                  const detailIds = group.details.map((d) => d.id);
+                  const allDetailChecked = detailIds.length > 0 && detailIds.every((id) => checkedIds.includes(id));
+                  const someDetailChecked = detailIds.some((id) => checkedIds.includes(id));
+                  const master = group.master;
+                  return (
+                    <React.Fragment key={outboundNo}>
+                      {/* 마스터 행 */}
+                      <TableRow
+                        style={{ borderTop: "2px solid hsl(var(--border))" }}
+                        className={cn(
+                          "cursor-pointer border-l-[3px] border-l-transparent font-semibold tree-master-row",
+                          allDetailChecked && "border-l-primary bg-primary/5"
+                        )}
+                        onClick={() => {
+                          if (expandedOrders.has(outboundNo)) {
+                            setClosingOrders((prev) => new Set(prev).add(outboundNo));
+                            setTimeout(() => {
+                              setExpandedOrders((prev) => { const next = new Set(prev); next.delete(outboundNo); return next; });
+                              setClosingOrders((prev) => { const next = new Set(prev); next.delete(outboundNo); return next; });
+                            }, 200);
+                          } else {
+                            setExpandedOrders((prev) => new Set(prev).add(outboundNo));
+                          }
+                        }}
+                        onDoubleClick={() => openEditModal(group.details[0])}
+                      >
+                        <TableCell
+                          className="text-center cursor-pointer"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setCheckedIds((prev) => {
+                              if (allDetailChecked) return prev.filter((id) => !detailIds.includes(id));
+                              return [...new Set([...prev, ...detailIds])];
+                            });
+                          }}
+                        >
+                          <Checkbox
+                            checked={allDetailChecked}
+                            data-state={someDetailChecked && !allDetailChecked ? "indeterminate" : undefined}
+                            onCheckedChange={() => {}}
+                          />
+                        </TableCell>
+                        <TableCell className="text-center">
+                          {isExpanded
+                            ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            : <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          }
+                        </TableCell>
+                        {/* 출고번호 */}
+                        <TableCell className="font-mono whitespace-nowrap">
+                          {outboundNo}
+                          <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
+                        </TableCell>
+                        {/* 마스터 필드 (ts.visibleColumns 순서) */}
+                        {visibleMasterLayout.map((col) => {
+                          switch (col.key) {
+                            case "outbound_type": return (
+                              <TableCell key={col.key}>
+                                <Badge variant="outline" className={cn("text-[11px]", getTypeColor(master.outbound_type))}>
+                                  {master.outbound_type || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "outbound_date": return (
+                              <TableCell key={col.key} className="whitespace-nowrap text-[13px]">
+                                {master.outbound_date ? new Date(master.outbound_date).toLocaleDateString("ko-KR") : "-"}
+                              </TableCell>
+                            );
+                            case "reference_number": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.reference_number || ""}</span>
+                              </TableCell>
+                            );
+                            case "customer_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.customer_name || ""}</span>
+                              </TableCell>
+                            );
+                            case "warehouse_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
+                              </TableCell>
+                            );
+                            case "outbound_status": return (
+                              <TableCell key={col.key}>
+                                <Badge variant="outline" className={cn("text-[11px]", getStatusColor(master.outbound_status))}>
+                                  {master.outbound_status || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "memo": return (
+                              <TableCell key={col.key} className="text-muted-foreground">
+                                <span className="block truncate max-w-[120px]">{master.memo || ""}</span>
+                              </TableCell>
+                            );
+                            default: return <TableCell key={col.key} className="text-[13px]">{(master as any)[col.key] ?? ""}</TableCell>;
+                          }
+                        })}
+                      </TableRow>
+
+                      {/* 디테일 서브 헤더 (펼쳤을 때만) */}
+                      {isExpanded && (
+                        <TableRow
+                          className={cn(
+                            "border-l-[3px] border-l-primary/30 bg-muted/60",
+                            closingOrders.has(outboundNo) ? "tree-detail-row-closing" : "tree-detail-row",
+                          )}
+                        >
+                          <TableCell />
+                          <TableCell />
+                          <TableCell />
+                          {visibleDetailCols.map((col) => {
+                            const isRight = ["outbound_qty", "unit_price", "total_amount"].includes(col.key);
+                            const isSorted = sortState?.key === col.key;
+                            const uniqueVals = Array.from(new Set(
+                              group.details.map((d) => {
+                                let v = (d as any)[col.key];
+                                if (col.key === "source_type") v = SOURCE_TYPE_LABEL[v] || v;
+                                return v;
+                              }).filter((v: any) => v != null && v !== "").map(String)
+                            )).sort();
+                            const filterVals = headerFilters[col.key] || new Set<string>();
+                            return (
+                              <TableCell
+                                key={col.key}
+                                className={cn(
+                                  "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 select-none",
+                                  isRight && "text-right",
+                                )}
+                              >
+                                <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                                  <div
+                                    className="flex items-center gap-1 cursor-pointer min-w-0"
+                                    onClick={() => handleSort(col.key)}
+                                  >
+                                    <span className="truncate">{col.label}</span>
+                                    {isSorted && (
+                                      sortState!.direction === "asc"
+                                        ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                                        : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                                    )}
+                                  </div>
+                                  {uniqueVals.length > 0 && (
+                                    <HeaderFilterPopover
+                                      colKey={col.key} colLabel={col.label}
+                                      uniqueValues={uniqueVals} filterValues={filterVals}
+                                      onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                                    />
+                                  )}
+                                </div>
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                      )}
+
+                      {/* 디테일 행 (펼쳤을 때만) */}
+                      {isExpanded && group.details.map((row, detailIdx) => {
+                        const isClosing = closingOrders.has(outboundNo);
+                        const isChecked = checkedIds.includes(row.id);
+                        return (
+                          <TableRow
+                            key={`${row.id}-${detailIdx}`}
+                            className={cn(
+                              "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                              isClosing ? "tree-detail-row-closing" : "tree-detail-row",
+                              isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                            )}
+                            onClick={() => {
+                              setCheckedIds((prev) =>
+                                prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                              );
+                            }}
+                            onDoubleClick={() => openEditModal(row)}
+                          >
+                            <TableCell
+                              className="text-center cursor-pointer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                            >
+                              <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                            </TableCell>
+                            <TableCell className="relative">
+                              <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
+                            </TableCell>
+                            <TableCell />
+                            {visibleDetailCols.map((col) => {
+                              switch (col.key) {
+                                case "source_type": return <TableCell key={col.key} className="text-[13px]">{row.source_type ? (SOURCE_TYPE_LABEL[row.source_type] || row.source_type) : "-"}</TableCell>;
+                                case "item_code": return <TableCell key={col.key} className="font-mono text-[13px]">{row.item_code || ""}</TableCell>;
+                                case "item_name": return <TableCell key={col.key} className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>;
+                                case "specification": return <TableCell key={col.key} className="text-[13px] text-muted-foreground">{row.specification || ""}</TableCell>;
+                                case "outbound_qty": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.outbound_qty ? Number(row.outbound_qty).toLocaleString() : ""}</TableCell>;
+                                case "unit_price": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>;
+                                case "total_amount": return <TableCell key={col.key} className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>;
+                                default: return <TableCell key={col.key} className="text-[13px]">{(row as any)[col.key] ?? ""}</TableCell>;
+                              }
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                    </React.Fragment>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      {/* 출고 등록 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="flex flex-col gap-0 p-0 sm:max-w-[1600px] w-[95vw] h-[90vh] overflow-hidden">
+          <DialogHeader className="shrink-0 border-b px-6 py-4">
+            <DialogTitle>{editMode ? "출고 수정" : "출고 등록"}</DialogTitle>
+            <DialogDescription>{editMode ? "출고 정보를 수정해주세요." : "출고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가해주세요."}</DialogDescription>
+          </DialogHeader>
+
+          {/* 출고유형 선택 */}
+          <div className="flex shrink-0 items-center gap-4 border-b bg-muted/30 px-6 py-3">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고유형</span>
+            <Select value={modalOutboundType} onValueChange={handleOutboundTypeChange}>
+              <SelectTrigger className="h-9 w-[160px] text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {OUTBOUND_TYPES.map((t) => (
+                  <SelectItem key={t.value} value={t.value}>
+                    {t.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <span className="text-muted-foreground ml-auto text-xs italic">
+              {modalOutboundType === "판매출고"
+                ? "출하지시 데이터에서 출고 처리해요"
+                : modalOutboundType === "반품출고"
+                  ? "발주(입고) 데이터에서 반품 출고 처리해요"
+                  : "품목 데이터를 직접 선택하여 출고 처리해요"}
+            </span>
+          </div>
+
+          {/* 메인 콘텐츠 */}
+          <div className="flex-1 overflow-hidden">
+            <ResizablePanelGroup direction="horizontal">
+              {/* 좌측: 소스 데이터 */}
+              <ResizablePanel defaultSize={60} minSize={35}>
+                <div className="flex h-full flex-col">
+                  <div className="flex items-center gap-2 border-b px-4 py-3">
+                    <Input
+                      placeholder={
+                        modalOutboundType === "판매출고"
+                          ? "출하지시번호 / 품목명"
+                          : modalOutboundType === "반품출고"
+                            ? "발주번호 / 품목명 / 공급처"
+                            : "품목번호 / 품목명"
+                      }
+                      value={sourceKeyword}
+                      onChange={(e) => setSourceKeyword(e.target.value)}
+                      onKeyDown={(e) => e.key === "Enter" && searchSourceData()}
+                      className="h-8 flex-1 text-xs"
+                    />
+                    <Button size="sm" onClick={searchSourceData} className="h-8">
+                      <Search className="mr-1 h-3 w-3" />
+                      검색
+                    </Button>
+                  </div>
+
+                  <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2 shrink-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                        {modalOutboundType === "판매출고"
+                          ? "미출고 출하지시 목록"
+                          : modalOutboundType === "반품출고"
+                            ? "입고된 발주 목록"
+                            : "품목 목록"}
+                      </span>
+                      {sourceTotalCount > 0 && (
+                        <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                          {sourceTotalCount}건
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex-1 overflow-auto">
+                    {sourceLoading ? (
+                      <div className="flex h-40 items-center justify-center">
+                        <Loader2 className="h-5 w-5 animate-spin" />
+                      </div>
+                    ) : modalOutboundType === "판매출고" ? (
+                      <SourceShipmentInstructionTable
+                        data={pagedShipmentInstructions}
+                        onAdd={addShipmentInstruction}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    ) : modalOutboundType === "반품출고" ? (
+                      <SourcePurchaseOrderTable
+                        data={pagedPurchaseOrders}
+                        onAdd={addPurchaseOrder}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    ) : (
+                      <SourceItemTable
+                        data={pagedItems}
+                        onAdd={addItem}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    )}
+                  </div>
+
+                  {/* 페이징 바 */}
+                  {sourceTotalCount > 0 && (
+                    <div className="flex items-center justify-between border-t bg-muted/10 px-4 py-2 shrink-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-muted-foreground text-[11px]">표시:</span>
+                        <Input
+                          type="number"
+                          min={1}
+                          max={500}
+                          value={sourcePageSize}
+                          onChange={(e) => {
+                            const v = parseInt(e.target.value, 10);
+                            if (v > 0) { setSourcePageSize(v); setSourcePage(1); }
+                          }}
+                          className="h-7 w-[60px] text-center text-[11px]"
+                        />
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => setSourcePage(1)}>
+                          <ChevronsLeft className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => setSourcePage((p) => p - 1)}>
+                          <ChevronLeft className="h-3.5 w-3.5" />
+                        </Button>
+                        <span className="text-xs font-medium px-2">{sourcePage} / {sourceTotalPages}</span>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= sourceTotalPages}
+                          onClick={() => setSourcePage((p) => p + 1)}>
+                          <ChevronRight className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= sourceTotalPages}
+                          onClick={() => setSourcePage(sourceTotalPages)}>
+                          <ChevronsRight className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle onPointerDown={(e) => e.stopPropagation()} />
+
+              {/* 우측: 출고 정보 + 선택 품목 */}
+              <ResizablePanel defaultSize={40} minSize={25}>
+                <div className="flex h-full flex-col">
+                  <div className="space-y-3 border-b bg-muted/30 px-4 py-3">
+                    <h4 className="text-[13px] font-bold text-foreground">출고 정보</h4>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고번호</span>
+                        <Input
+                          value={modalOutboundNo}
+                          readOnly
+                          className="bg-muted cursor-not-allowed h-8 font-mono text-xs"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                          출고일 <span className="text-destructive">*</span>
+                        </span>
+                        <Input
+                          type="date"
+                          value={modalOutboundDate}
+                          onChange={(e) => setModalOutboundDate(e.target.value)}
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">창고</span>
+                        <Select value={modalWarehouse} onValueChange={(v) => {
+                          setModalWarehouse(v);
+                          setModalLocation("");
+                          if (v) {
+                            getOutboundLocations(v).then((r) => { if (r.success) setLocations(r.data); }).catch(() => {});
+                          } else {
+                            setLocations([]);
+                          }
+                        }}>
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="창고 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {warehouses.map((w) => (
+                              <SelectItem key={w.warehouse_code} value={w.warehouse_code}>
+                                {w.warehouse_name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">위치</span>
+                        <Select value={modalLocation || "__none__"} onValueChange={(v) => setModalLocation(v === "__none__" ? "" : v)}>
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="위치 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="__none__">위치 선택</SelectItem>
+                            {locations.map((l) => (
+                              <SelectItem key={l.location_code} value={l.location_code}>
+                                {l.location_name || l.location_code}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자</span>
+                        <Input
+                          value={modalManager}
+                          onChange={(e) => setModalManager(e.target.value)}
+                          placeholder="담당자"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">메모</span>
+                        <Input
+                          value={modalMemo}
+                          onChange={(e) => setModalMemo(e.target.value)}
+                          placeholder="메모"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex-1 overflow-auto px-4 py-2">
+                    <div className="mb-2 flex items-center gap-2">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고 처리 품목</span>
+                      <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                        {selectedItems.length}건
+                      </span>
+                    </div>
+
+                    {selectedItems.length === 0 ? (
+                      <div className="flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+                        <PackageOpen className="h-8 w-8 text-muted-foreground/30" />
+                        좌측에서 품목을 선택하여 추가해주세요
+                      </div>
+                    ) : (
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출고유형</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
+                            <TableHead className="w-[30px] p-2" />
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {selectedItems.map((item, idx) => (
+                            <TableRow key={item.key} className="text-xs">
+                              <TableCell className="p-2 text-center">{idx + 1}</TableCell>
+                              <TableCell className="p-2">
+                                <Badge variant="outline" className={cn("text-[10px]", getTypeColor(item.outbound_type))}>
+                                  {item.outbound_type || "-"}
+                                </Badge>
+                              </TableCell>
+                              <TableCell className="max-w-[180px] p-2">
+                                <div className="flex flex-col">
+                                  <span className="truncate font-medium" title={item.item_name}>
+                                    {item.item_name}
+                                  </span>
+                                  <span className="text-muted-foreground truncate text-[10px]" title={`${item.item_number}${item.spec ? ` | ${item.spec}` : ""}`}>
+                                    {item.item_number}
+                                    {item.spec ? ` | ${item.spec}` : ""}
+                                  </span>
+                                </div>
+                              </TableCell>
+                              <TableCell className="p-2 text-[11px]">{item.reference_number}</TableCell>
+                              <TableCell className="p-2 text-right">
+                                <Input
+                                  type="number"
+                                  value={item.outbound_qty || ""}
+                                  onChange={(e) => updateItemQty(item.key, Number(e.target.value) || 0)}
+                                  className="h-7 w-[70px] text-right text-xs"
+                                  min={0}
+                                />
+                              </TableCell>
+                              <TableCell className="p-2 text-right">
+                                <Input
+                                  type="number"
+                                  value={item.unit_price || ""}
+                                  onChange={(e) => updateItemPrice(item.key, Number(e.target.value) || 0)}
+                                  className="h-7 w-[70px] text-right text-xs"
+                                  min={0}
+                                />
+                              </TableCell>
+                              <TableCell className="p-2 text-right text-[13px] font-semibold">
+                                {item.total_amount.toLocaleString()}
+                              </TableCell>
+                              <TableCell className="p-2 text-center">
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-6 w-6"
+                                  onClick={() => removeItem(item.key)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+
+          <div className="shrink-0 border-t">
+            <div className="flex w-full items-center justify-between px-6 py-3">
+              <div className="text-muted-foreground text-xs">
+                {selectedItems.length > 0 ? (
+                  <>
+                    {totalSummary.count}건 | 수량 합계:{" "}
+                    {totalSummary.qty.toLocaleString()} | 금액 합계:{" "}
+                    {totalSummary.amount.toLocaleString()}원
+                  </>
+                ) : (
+                  "품목을 추가해주세요"
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsModalOpen(false)}
+                  className="h-9 text-sm"
+                >
+                  취소
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={saving || selectedItems.length === 0}
+                  className="h-9 text-sm"
+                >
+                  {saving ? (
+                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="mr-1 h-4 w-4" />
+                  )}
+                  저장
+                </Button>
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
+
+// --- 소스 데이터 테이블 컴포넌트들 ---
+
+function SourceShipmentInstructionTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: ShipmentInstructionSource[];
+  onAdd: (si: ShipmentInstructionSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 출하지시 데이터를 조회해주세요
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하지시번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하일</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출고수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">미출고</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((si) => {
+          const isSelected = selectedKeys.includes(`si-${si.detail_id}`);
+          return (
+            <TableRow
+              key={si.detail_id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(si)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">추가됨</Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[130px] truncate p-2 font-medium" title={si.instruction_no}>{si.instruction_no}</TableCell>
+              <TableCell className="p-2">
+                {si.instruction_date
+                  ? new Date(si.instruction_date).toLocaleDateString("ko-KR")
+                  : "-"}
+              </TableCell>
+              <TableCell className="max-w-[200px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={si.item_name}>{si.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={`${si.item_code}${si.spec ? ` | ${si.spec}` : ""}`}>
+                    {si.item_code}
+                    {si.spec ? ` | ${si.spec}` : ""}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(si.plan_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(si.ship_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right font-semibold text-primary">
+                {Number(si.remain_qty).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+function SourcePurchaseOrderTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: PurchaseOrderSource[];
+  onAdd: (po: PurchaseOrderSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 발주 데이터를 조회해주세요
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((po) => {
+          const isSelected = selectedKeys.includes(`po-${po.id}`);
+          return (
+            <TableRow
+              key={po.id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(po)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">추가됨</Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[120px] truncate p-2 font-medium" title={po.purchase_no}>{po.purchase_no}</TableCell>
+              <TableCell className="max-w-[120px] truncate p-2" title={po.supplier_name}>{po.supplier_name}</TableCell>
+              <TableCell className="max-w-[200px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={po.item_name}>{po.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={`${po.item_code}${po.spec ? ` | ${po.spec}` : ""}`}>
+                    {po.item_code}
+                    {po.spec ? ` | ${po.spec}` : ""}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(po.order_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right font-semibold text-primary">
+                {Number(po.received_qty).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+function SourceItemTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: ItemSource[];
+  onAdd: (item: ItemSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 품목 데이터를 조회해주세요
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+          <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((item) => {
+          const isSelected = selectedKeys.includes(`item-${item.id}`);
+          return (
+            <TableRow
+              key={item.id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(item)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">추가됨</Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[250px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={item.item_name}>{item.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={item.item_number}>
+                    {item.item_number}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={item.spec || "-"}>{item.spec || "-"}</TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={item.material || "-"}>{item.material || "-"}</TableCell>
+              <TableCell className="p-2">{item.unit || "-"}</TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(item.standard_price).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/logistics/packaging/page.tsx b/frontend/app/(main)/COMPANY_30/logistics/packaging/page.tsx
new file mode 100644
index 00000000..6ae340aa
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/logistics/packaging/page.tsx
@@ -0,0 +1,1033 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandInput, CommandList, CommandEmpty, CommandItem } from "@/components/ui/command";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import {
+  Plus, Trash2, Loader2, Package, Box, X, Save, Edit2, Download, ChevronsUpDown, Check, Inbox, Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  getPkgUnits, createPkgUnit, updatePkgUnit, deletePkgUnit,
+  getPkgUnitItems, createPkgUnitItem, deletePkgUnitItem,
+  getLoadingUnits, createLoadingUnit, updateLoadingUnit, deleteLoadingUnit,
+  getLoadingUnitPkgs, createLoadingUnitPkg, deleteLoadingUnitPkg,
+  getItemsByDivision, getGeneralItems,
+  type PkgUnit, type PkgUnitItem, type LoadingUnit, type LoadingUnitPkg, type ItemInfoForPkg,
+} from "@/lib/api/packaging";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "pkg_code", label: "품목코드" },
+  { key: "pkg_name", label: "포장명" },
+  { key: "pkg_type", label: "유형" },
+  { key: "size", label: "크기(mm)" },
+  { key: "max_weight", label: "최대중량" },
+  { key: "status", label: "상태" },
+];
+
+// --- 코드 → 라벨 매핑 ---
+const PKG_TYPE_LABEL: Record<string, string> = {
+  BOX: "박스", PACK: "팩", CANBOARD: "캔보드", AIRCAP: "에어캡",
+  ZIPCOS: "집코스", CYLINDER: "원통형", POLYCARTON: "포리/카톤",
+};
+const LOADING_TYPE_LABEL: Record<string, string> = {
+  PALLET: "파렛트", WOOD_PALLET: "목재파렛트", PLASTIC_PALLET: "플라스틱파렛트",
+  ALU_PALLET: "알루미늄파렛트", CONTAINER: "컨테이너", STEEL_BOX: "철재함",
+  CAGE: "케이지", ETC: "기타",
+};
+const STATUS_LABEL: Record<string, string> = { ACTIVE: "사용", INACTIVE: "미사용" };
+
+const getStatusColor = (s: string) => s === "ACTIVE" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground";
+const fmtSize = (w: any, l: any, h: any) => {
+  const vals = [w, l, h].map(v => Number(v) || 0);
+  return vals.some(v => v > 0) ? vals.join("×") : "-";
+};
+
+// 규격 문자열에서 치수 파싱
+function parseSpecDimensions(spec: string | null) {
+  if (!spec) return { w: 0, l: 0, h: 0 };
+  const m3 = spec.match(/(\d+)\s*[x×]\s*(\d+)\s*[x×]\s*(\d+)/i);
+  if (m3) return { w: parseInt(m3[1]), l: parseInt(m3[2]), h: parseInt(m3[3]) };
+  const m2 = spec.match(/(\d+)\s*[x×]\s*(\d+)/i);
+  if (m2) return { w: parseInt(m2[1]), l: parseInt(m2[2]), h: 0 };
+  return { w: 0, l: 0, h: 0 };
+}
+
+export default function PackagingPage() {
+  const ts = useTableSettings("c16-packaging", "pkg_unit", GRID_COLUMNS);
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const [activeTab, setActiveTab] = useState<"packing" | "loading">("packing");
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 포장재 데이터
+  const [pkgUnits, setPkgUnits] = useState<PkgUnit[]>([]);
+  const [pkgLoading, setPkgLoading] = useState(false);
+  const [selectedPkg, setSelectedPkg] = useState<PkgUnit | null>(null);
+  const [pkgItems, setPkgItems] = useState<PkgUnitItem[]>([]);
+  const [pkgItemsLoading, setPkgItemsLoading] = useState(false);
+
+  // 적재함 데이터
+  const [loadingUnits, setLoadingUnits] = useState<LoadingUnit[]>([]);
+  const [loadingLoading, setLoadingLoading] = useState(false);
+  const [selectedLoading, setSelectedLoading] = useState<LoadingUnit | null>(null);
+  const [loadingPkgs, setLoadingPkgs] = useState<LoadingUnitPkg[]>([]);
+  const [loadingPkgsLoading, setLoadingPkgsLoading] = useState(false);
+
+  // 모달
+  const [pkgModalOpen, setPkgModalOpen] = useState(false);
+  const [pkgModalMode, setPkgModalMode] = useState<"create" | "edit">("create");
+  const [pkgForm, setPkgForm] = useState<Record<string, any>>({});
+  const [pkgItemOptions, setPkgItemOptions] = useState<ItemInfoForPkg[]>([]);
+  const [pkgItemPopoverOpen, setPkgItemPopoverOpen] = useState(false);
+
+  const [loadModalOpen, setLoadModalOpen] = useState(false);
+  const [loadModalMode, setLoadModalMode] = useState<"create" | "edit">("create");
+  const [loadForm, setLoadForm] = useState<Record<string, any>>({});
+  const [loadItemOptions, setLoadItemOptions] = useState<ItemInfoForPkg[]>([]);
+  const [loadItemPopoverOpen, setLoadItemPopoverOpen] = useState(false);
+
+  const [itemMatchModalOpen, setItemMatchModalOpen] = useState(false);
+  const [itemMatchKeyword, setItemMatchKeyword] = useState("");
+  const [itemMatchResults, setItemMatchResults] = useState<ItemInfoForPkg[]>([]);
+  const [itemMatchSelected, setItemMatchSelected] = useState<ItemInfoForPkg | null>(null);
+  const [itemMatchQty, setItemMatchQty] = useState(1);
+
+  const [pkgMatchModalOpen, setPkgMatchModalOpen] = useState(false);
+  const [pkgMatchQty, setPkgMatchQty] = useState(1);
+  const [pkgMatchMethod, setPkgMatchMethod] = useState("");
+  const [pkgMatchSelected, setPkgMatchSelected] = useState<PkgUnit | null>(null);
+  const [pkgMatchSearchKw, setPkgMatchSearchKw] = useState("");
+
+  const [saving, setSaving] = useState(false);
+
+  // --- 데이터 로드 ---
+  const fetchPkgUnits = useCallback(async () => {
+    setPkgLoading(true);
+    try {
+      const res = await getPkgUnits();
+      if (res.success) setPkgUnits(res.data);
+    } catch { /* ignore */ } finally { setPkgLoading(false); }
+  }, []);
+
+  const fetchLoadingUnits = useCallback(async () => {
+    setLoadingLoading(true);
+    try {
+      const res = await getLoadingUnits();
+      if (res.success) setLoadingUnits(res.data);
+    } catch { /* ignore */ } finally { setLoadingLoading(false); }
+  }, []);
+
+  useEffect(() => { fetchPkgUnits(); fetchLoadingUnits(); }, [fetchPkgUnits, fetchLoadingUnits]);
+
+  // 포장재 선택 시 매칭 품목 로드
+  const selectPkg = useCallback(async (pkg: PkgUnit) => {
+    setSelectedPkg(pkg);
+    setPkgItemsLoading(true);
+    try {
+      const res = await getPkgUnitItems(pkg.pkg_code);
+      if (res.success) setPkgItems(res.data);
+    } catch { setPkgItems([]); } finally { setPkgItemsLoading(false); }
+  }, []);
+
+  // 적재함 선택 시 포장구성 로드
+  const selectLoading = useCallback(async (lu: LoadingUnit) => {
+    setSelectedLoading(lu);
+    setLoadingPkgsLoading(true);
+    try {
+      const res = await getLoadingUnitPkgs(lu.loading_code);
+      if (res.success) setLoadingPkgs(res.data);
+    } catch { setLoadingPkgs([]); } finally { setLoadingPkgsLoading(false); }
+  }, []);
+
+  // 검색 필터 적용
+  const filteredPkgUnits = pkgUnits.filter((p) => {
+    if (searchFilters.length === 0) return true;
+    return searchFilters.every((f) => {
+      if (!f.value) return true;
+      const kw = f.value.toLowerCase();
+      return Object.values(p).some((v) => String(v ?? "").toLowerCase().includes(kw));
+    });
+  });
+
+  const filteredLoadingUnits = loadingUnits.filter((l) => {
+    if (searchFilters.length === 0) return true;
+    return searchFilters.every((f) => {
+      if (!f.value) return true;
+      const kw = f.value.toLowerCase();
+      return Object.values(l).some((v) => String(v ?? "").toLowerCase().includes(kw));
+    });
+  });
+
+  // --- 포장재 등록/수정 모달 ---
+  const openPkgModal = async (mode: "create" | "edit") => {
+    setPkgModalMode(mode);
+    if (mode === "edit" && selectedPkg) {
+      setPkgForm({ ...selectedPkg });
+    } else {
+      setPkgForm({ pkg_code: "", pkg_name: "", pkg_type: "", status: "ACTIVE", width_mm: "", length_mm: "", height_mm: "", self_weight_kg: "", max_load_kg: "", volume_l: "", remarks: "" });
+    }
+    setPkgItemPopoverOpen(false);
+    try {
+      const res = await getItemsByDivision("포장재");
+      if (res.success) setPkgItemOptions(res.data);
+    } catch { setPkgItemOptions([]); }
+    setPkgModalOpen(true);
+  };
+
+  const onPkgItemSelect = (item: ItemInfoForPkg) => {
+    setPkgItemPopoverOpen(false);
+    const dims = parseSpecDimensions(item.size);
+    setPkgForm((prev) => ({
+      ...prev,
+      pkg_code: item.item_number,
+      pkg_name: item.item_name,
+      width_mm: dims.w || prev.width_mm,
+      length_mm: dims.l || prev.length_mm,
+      height_mm: dims.h || prev.height_mm,
+    }));
+  };
+
+  const savePkgUnit = async () => {
+    if (!pkgForm.pkg_code || !pkgForm.pkg_name) { toast.error("포장코드와 포장명은 필수입니다."); return; }
+    if (!pkgForm.pkg_type) { toast.error("포장유형을 선택해주세요."); return; }
+    setSaving(true);
+    try {
+      if (pkgModalMode === "create") {
+        const res = await createPkgUnit(pkgForm);
+        if (res.success) { toast.success("포장재 등록 완료"); setPkgModalOpen(false); fetchPkgUnits(); }
+      } else {
+        const res = await updatePkgUnit(pkgForm.id, pkgForm);
+        if (res.success) { toast.success("포장재 수정 완료"); setPkgModalOpen(false); fetchPkgUnits(); setSelectedPkg(res.data); }
+      }
+    } catch { toast.error("저장 실패"); } finally { setSaving(false); }
+  };
+
+  const handleDeletePkg = async (pkg: PkgUnit) => {
+    const ok = await confirm(`"${pkg.pkg_name}" 포장재를 삭제하시겠습니까?`, { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await deletePkgUnit(pkg.id);
+      toast.success("삭제 완료");
+      setSelectedPkg(null); setPkgItems([]);
+      fetchPkgUnits();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // --- 적재함 등록/수정 모달 ---
+  const openLoadModal = async (mode: "create" | "edit") => {
+    setLoadModalMode(mode);
+    if (mode === "edit" && selectedLoading) {
+      setLoadForm({ ...selectedLoading });
+    } else {
+      setLoadForm({ loading_code: "", loading_name: "", loading_type: "", status: "ACTIVE", width_mm: "", length_mm: "", height_mm: "", self_weight_kg: "", max_load_kg: "", max_stack: "", remarks: "" });
+    }
+    setLoadItemPopoverOpen(false);
+    try {
+      const res = await getItemsByDivision("적재함");
+      if (res.success) setLoadItemOptions(res.data);
+    } catch { setLoadItemOptions([]); }
+    setLoadModalOpen(true);
+  };
+
+  const onLoadItemSelect = (item: ItemInfoForPkg) => {
+    setLoadItemPopoverOpen(false);
+    const dims = parseSpecDimensions(item.size);
+    setLoadForm((prev) => ({
+      ...prev,
+      loading_code: item.item_number,
+      loading_name: item.item_name,
+      width_mm: dims.w || prev.width_mm,
+      length_mm: dims.l || prev.length_mm,
+      height_mm: dims.h || prev.height_mm,
+    }));
+  };
+
+  const saveLoadingUnit = async () => {
+    if (!loadForm.loading_code || !loadForm.loading_name) { toast.error("적재함코드와 적재함명은 필수입니다."); return; }
+    if (!loadForm.loading_type) { toast.error("적재유형을 선택해주세요."); return; }
+    setSaving(true);
+    try {
+      if (loadModalMode === "create") {
+        const res = await createLoadingUnit(loadForm);
+        if (res.success) { toast.success("적재함 등록 완료"); setLoadModalOpen(false); fetchLoadingUnits(); }
+      } else {
+        const res = await updateLoadingUnit(loadForm.id, loadForm);
+        if (res.success) { toast.success("적재함 수정 완료"); setLoadModalOpen(false); fetchLoadingUnits(); setSelectedLoading(res.data); }
+      }
+    } catch { toast.error("저장 실패"); } finally { setSaving(false); }
+  };
+
+  const handleDeleteLoading = async (lu: LoadingUnit) => {
+    const ok = await confirm(`"${lu.loading_name}" 적재함을 삭제하시겠습니까?`, { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await deleteLoadingUnit(lu.id);
+      toast.success("삭제 완료");
+      setSelectedLoading(null); setLoadingPkgs([]);
+      fetchLoadingUnits();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // --- 품목 추가 모달 (포장재 매칭) ---
+  const openItemMatchModal = async () => {
+    setItemMatchKeyword(""); setItemMatchSelected(null); setItemMatchQty(1);
+    setItemMatchModalOpen(true);
+    try {
+      const res = await getGeneralItems();
+      if (res.success) setItemMatchResults(res.data);
+    } catch { setItemMatchResults([]); }
+  };
+
+  const searchItemsForMatch = async () => {
+    try {
+      const res = await getGeneralItems(itemMatchKeyword || undefined);
+      if (res.success) setItemMatchResults(res.data);
+    } catch { setItemMatchResults([]); }
+  };
+
+  const saveItemMatch = async () => {
+    if (!selectedPkg || !itemMatchSelected) { toast.error("품목을 선택해주세요."); return; }
+    if (itemMatchQty <= 0) { toast.error("포장수량을 입력해주세요."); return; }
+    setSaving(true);
+    try {
+      const res = await createPkgUnitItem({
+        pkg_code: selectedPkg.pkg_code,
+        item_number: itemMatchSelected.item_number,
+        pkg_qty: itemMatchQty,
+      });
+      if (res.success) { toast.success("품목 추가 완료"); setItemMatchModalOpen(false); selectPkg(selectedPkg); }
+    } catch { toast.error("추가 실패"); } finally { setSaving(false); }
+  };
+
+  const handleDeletePkgItem = async (item: PkgUnitItem) => {
+    const ok = await confirm("매칭 품목을 삭제하시겠습니까?", { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await deletePkgUnitItem(item.id);
+      toast.success("삭제 완료");
+      if (selectedPkg) selectPkg(selectedPkg);
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // --- 포장단위 추가 모달 (적재함 구성) ---
+  const openPkgMatchModal = () => {
+    setPkgMatchSelected(null); setPkgMatchQty(1); setPkgMatchMethod(""); setPkgMatchSearchKw("");
+    setPkgMatchModalOpen(true);
+  };
+
+  const savePkgMatch = async () => {
+    if (!selectedLoading || !pkgMatchSelected) { toast.error("포장단위를 선택해주세요."); return; }
+    if (pkgMatchQty <= 0) { toast.error("최대적재수량을 입력해주세요."); return; }
+    setSaving(true);
+    try {
+      const res = await createLoadingUnitPkg({
+        loading_code: selectedLoading.loading_code,
+        pkg_code: pkgMatchSelected.pkg_code,
+        max_load_qty: pkgMatchQty,
+        load_method: pkgMatchMethod || undefined,
+      });
+      if (res.success) { toast.success("포장단위 추가 완료"); setPkgMatchModalOpen(false); selectLoading(selectedLoading); }
+    } catch { toast.error("추가 실패"); } finally { setSaving(false); }
+  };
+
+  const handleDeleteLoadPkg = async (lp: LoadingUnitPkg) => {
+    const ok = await confirm("적재 구성을 삭제하시겠습니까?", { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await deleteLoadingUnitPkg(lp.id);
+      toast.success("삭제 완료");
+      if (selectedLoading) selectLoading(selectedLoading);
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-4">
+
+      {/* 1. 필터 바 */}
+      <DynamicSearchFilter
+        tableName="pkg_unit"
+        filterId="c16-packaging"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={activeTab === "packing" ? filteredPkgUnits.length : filteredLoadingUnits.length}
+      />
+
+      {/* 2. 탭 바 */}
+      <div className="flex shrink-0 gap-1 border-b">
+        {(
+          [
+            ["packing", "포장재 관리", filteredPkgUnits.length],
+            ["loading", "적재함 관리", filteredLoadingUnits.length],
+          ] as const
+        ).map(([tab, label, count]) => (
+          <button
+            key={tab}
+            onClick={() => {
+              setActiveTab(tab);
+              if (tab === "packing") { setSelectedLoading(null); setLoadingPkgs([]); }
+              else { setSelectedPkg(null); setPkgItems([]); }
+            }}
+            className={cn(
+              "-mb-px flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors",
+              activeTab === tab
+                ? "border-primary text-primary"
+                : "border-transparent text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {tab === "packing" ? <Package className="h-4 w-4" /> : <Box className="h-4 w-4" />}
+            {label}
+            <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+              {count}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/* 3. 액션 바 */}
+      <div className="flex shrink-0 items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold">
+            {activeTab === "packing" ? "포장재 목록" : "적재함 목록"}
+          </h3>
+          {(activeTab === "packing" ? pkgLoading : loadingLoading) && (
+            <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+          )}
+        </div>
+        <div className="flex items-center gap-1.5">
+          {activeTab === "packing" && selectedPkg && (
+            <>
+              <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openPkgModal("edit")}>
+                <Edit2 className="mr-1 h-3 w-3" /> 수정
+              </Button>
+              <Button
+                size="sm" variant="outline"
+                className="h-7 text-xs text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                onClick={() => handleDeletePkg(selectedPkg)}
+              >
+                <Trash2 className="mr-1 h-3 w-3" /> 삭제
+              </Button>
+              <div className="h-4 w-px bg-border" />
+            </>
+          )}
+          {activeTab === "loading" && selectedLoading && (
+            <>
+              <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openLoadModal("edit")}>
+                <Edit2 className="mr-1 h-3 w-3" /> 수정
+              </Button>
+              <Button
+                size="sm" variant="outline"
+                className="h-7 text-xs text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                onClick={() => handleDeleteLoading(selectedLoading)}
+              >
+                <Trash2 className="mr-1 h-3 w-3" /> 삭제
+              </Button>
+              <div className="h-4 w-px bg-border" />
+            </>
+          )}
+          <Button
+            size="sm"
+            onClick={() => activeTab === "packing" ? openPkgModal("create") : openLoadModal("create")}
+          >
+            <Plus className="mr-1 h-3.5 w-3.5" /> 등록
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 4. 콘텐츠 영역 */}
+      {activeTab === "packing" ? (
+        <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+          {/* 포장재 목록 테이블 */}
+          <div className={cn("overflow-auto", selectedPkg ? "flex-[0_0_50%] border-b" : "flex-1")}>
+            <EDataTable
+              columns={ts.visibleColumns.map((col): EDataTableColumn<PkgUnit> => {
+                const renderMap: Record<string, Partial<EDataTableColumn<PkgUnit>>> = {
+                  pkg_type: { width: "w-[80px]", render: (v: any) => PKG_TYPE_LABEL[v] || v || "-" },
+                  size: { width: "w-[100px]", render: (_v: any, row: any) => fmtSize(row.width_mm, row.length_mm, row.height_mm) },
+                  max_weight: { width: "w-[80px]", align: "right", render: (v: any) => Number(v || 0) > 0 ? `${v}kg` : "-" },
+                  max_load_kg: { width: "w-[80px]", align: "right", render: (v: any) => Number(v || 0) > 0 ? `${v}kg` : "-" },
+                  status: { width: "w-[60px]", align: "center", render: (v: any) => (
+                    <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(v))}>
+                      {STATUS_LABEL[v] || v}
+                    </span>
+                  )},
+                };
+                return { key: col.key, label: col.label, ...renderMap[col.key] };
+              })}
+              data={ts.groupData(filteredPkgUnits)}
+              rowKey={(row) => String(row.id)}
+              loading={pkgLoading}
+              emptyMessage="등록된 포장재가 없어요"
+              selectedId={selectedPkg ? String(selectedPkg.id) : null}
+              onSelect={(id) => {
+                const pkg = filteredPkgUnits.find((p) => String(p.id) === id);
+                if (pkg) selectPkg(pkg);
+              }}
+              showPagination={false}
+              draggableColumns
+              columnOrderKey="c16-packaging-pkg"
+            />
+          </div>
+
+          {/* 매칭 품목 서브패널 */}
+          {selectedPkg && (
+            <>
+              <div className="flex shrink-0 items-center justify-between bg-muted/50 px-4 py-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">매칭 품목</span>
+                  <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+                    {pkgItems.length}건
+                  </span>
+                  <span className="max-w-[200px] truncate text-[11px] text-muted-foreground">
+                    — {selectedPkg.pkg_name}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openItemMatchModal}>
+                    <Plus className="mr-1 h-3 w-3" /> 품목 추가
+                  </Button>
+                  <Button
+                    size="sm" variant="ghost" className="h-7 w-7 p-0 text-muted-foreground"
+                    onClick={() => { setSelectedPkg(null); setPkgItems([]); }}
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <div className="flex-1 overflow-auto">
+                {pkgItemsLoading ? (
+                  <div className="flex h-24 items-center justify-center">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : pkgItems.length === 0 ? (
+                  <div className="flex h-24 flex-col items-center justify-center gap-1.5">
+                    <Inbox className="h-5 w-5 text-muted-foreground/40" />
+                    <p className="text-xs text-muted-foreground">매칭된 품목이 없어요</p>
+                  </div>
+                ) : (
+                  <Table>
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                        <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장수량</TableHead>
+                        <TableHead className="p-2 w-[40px]" />
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {pkgItems.map((item) => (
+                        <TableRow key={item.id} className="text-xs">
+                          <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
+                          <TableCell className="p-2">{item.item_name || "-"}</TableCell>
+                          <TableCell className="p-2">{item.spec || "-"}</TableCell>
+                          <TableCell className="p-2">{item.unit || "EA"}</TableCell>
+                          <TableCell className="p-2 text-right font-semibold">{Number(item.pkg_qty).toLocaleString()}</TableCell>
+                          <TableCell className="p-2 text-center">
+                            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeletePkgItem(item)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      ) : (
+        /* 적재함 관리 탭 */
+        <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+          {/* 적재함 목록 테이블 */}
+          <div className={cn("overflow-auto", selectedLoading ? "flex-[0_0_50%] border-b" : "flex-1")}>
+            <Table>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted">
+                  <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">적재함명</TableHead>
+                  <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">크기(mm)</TableHead>
+                  <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대적재</TableHead>
+                  <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {loadingLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-32 text-center">
+                      <Loader2 className="mx-auto h-5 w-5 animate-spin text-muted-foreground" />
+                    </TableCell>
+                  </TableRow>
+                ) : filteredLoadingUnits.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-40 text-center">
+                      <div className="flex flex-col items-center justify-center gap-2">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-full border-2 border-dashed border-muted-foreground/20">
+                          <Inbox className="h-6 w-6 text-muted-foreground/40" />
+                        </div>
+                        <p className="text-xs text-muted-foreground">등록된 적재함이 없어요</p>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ) : filteredLoadingUnits.map((l) => (
+                  <TableRow
+                    key={l.id}
+                    className={cn(
+                      "cursor-pointer text-xs transition-colors",
+                      selectedLoading?.id === l.id ? "bg-primary/5" : "hover:bg-muted/50"
+                    )}
+                    onClick={() => selectLoading(l)}
+                  >
+                    <TableCell className="p-2 font-medium">{l.loading_code}</TableCell>
+                    <TableCell className="p-2">{l.loading_name}</TableCell>
+                    <TableCell className="p-2">{LOADING_TYPE_LABEL[l.loading_type] || l.loading_type || "-"}</TableCell>
+                    <TableCell className="p-2 text-[10px] tabular-nums">{fmtSize(l.width_mm, l.length_mm, l.height_mm)}</TableCell>
+                    <TableCell className="p-2 text-right">{Number(l.max_load_kg || 0) > 0 ? `${l.max_load_kg}kg` : "-"}</TableCell>
+                    <TableCell className="p-2 text-center">
+                      <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(l.status))}>
+                        {STATUS_LABEL[l.status] || l.status}
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          {/* 포장구성 서브패널 */}
+          {selectedLoading && (
+            <>
+              <div className="flex shrink-0 items-center justify-between bg-muted/50 px-4 py-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">적재 가능 포장단위</span>
+                  <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+                    {loadingPkgs.length}건
+                  </span>
+                  <span className="max-w-[200px] truncate text-[11px] text-muted-foreground">
+                    — {selectedLoading.loading_name}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openPkgMatchModal}>
+                    <Plus className="mr-1 h-3 w-3" /> 포장단위 추가
+                  </Button>
+                  <Button
+                    size="sm" variant="ghost" className="h-7 w-7 p-0 text-muted-foreground"
+                    onClick={() => { setSelectedLoading(null); setLoadingPkgs([]); }}
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <div className="flex-1 overflow-auto">
+                {loadingPkgsLoading ? (
+                  <div className="flex h-24 items-center justify-center">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : loadingPkgs.length === 0 ? (
+                  <div className="flex h-24 flex-col items-center justify-center gap-1.5">
+                    <Inbox className="h-5 w-5 text-muted-foreground/40" />
+                    <p className="text-xs text-muted-foreground">등록된 포장단위가 없어요</p>
+                  </div>
+                ) : (
+                  <Table>
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장코드</TableHead>
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장명</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                        <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대수량</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">적재방향</TableHead>
+                        <TableHead className="p-2 w-[40px]" />
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {loadingPkgs.map((lp) => (
+                        <TableRow key={lp.id} className="text-xs">
+                          <TableCell className="p-2 font-medium">{lp.pkg_code}</TableCell>
+                          <TableCell className="p-2">{lp.pkg_name || "-"}</TableCell>
+                          <TableCell className="p-2">{PKG_TYPE_LABEL[lp.pkg_type || ""] || lp.pkg_type || "-"}</TableCell>
+                          <TableCell className="p-2 text-right font-semibold">{Number(lp.max_load_qty).toLocaleString()}</TableCell>
+                          <TableCell className="p-2">{lp.load_method || "-"}</TableCell>
+                          <TableCell className="p-2 text-center">
+                            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeleteLoadPkg(lp)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* 포장재 등록/수정 모달 */}
+      <Dialog open={pkgModalOpen} onOpenChange={setPkgModalOpen}>
+        <DialogContent className="max-w-2xl" style={{ maxHeight: "90vh", overflowY: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{pkgModalMode === "create" ? "포장재 등록" : "포장재 수정"}</DialogTitle>
+            <DialogDescription>품목정보에서 포장재를 선택하면 코드와 이름이 자동 연동됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            {pkgModalMode === "create" && (
+              <div className="rounded-lg border bg-muted/50 p-4">
+                <Label className="mb-2 block text-xs font-semibold">품목정보 연결 (구분: 포장재)</Label>
+                <Popover open={pkgItemPopoverOpen} onOpenChange={setPkgItemPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" role="combobox" className="h-9 w-full justify-between text-sm font-normal">
+                      {pkgForm.pkg_code ? `${pkgForm.pkg_name} (${pkgForm.pkg_code})` : "품목정보에서 포장재를 선택하세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                    <Command filter={(value, search) => {
+                      const item = pkgItemOptions.find((i) => i.id === value);
+                      if (!item) return 0;
+                      const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
+                      return target.includes(search.toLowerCase()) ? 1 : 0;
+                    }}>
+                      <CommandInput placeholder="품목코드 / 품목명 검색..." />
+                      <CommandList className="max-h-[200px]">
+                        <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                        {pkgItemOptions.map((item) => (
+                          <CommandItem key={item.id} value={item.id} onSelect={() => onPkgItemSelect(item)} className="text-xs">
+                            <Check className={cn("mr-2 h-3 w-3", pkgForm.pkg_code === item.item_number ? "opacity-100" : "opacity-0")} />
+                            <span className="font-medium">{item.item_name}</span>
+                            <span className="ml-2 text-muted-foreground">{item.item_number}</span>
+                            {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
+                          </CommandItem>
+                        ))}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+            <div className="grid grid-cols-2 gap-4">
+              <div><Label className="text-xs">품목코드</Label><Input value={pkgForm.pkg_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div><Label className="text-xs">포장명</Label><Input value={pkgForm.pkg_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div>
+                <Label className="text-xs">포장유형 <span className="text-destructive">*</span></Label>
+                <Select value={pkgForm.pkg_type || ""} onValueChange={(v) => setPkgForm((p) => ({ ...p, pkg_type: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>{Object.entries(PKG_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">상태</Label>
+                <Select value={pkgForm.status || "ACTIVE"} onValueChange={(v) => setPkgForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold">규격정보</Label>
+              <div className="mt-2 grid grid-cols-3 gap-3">
+                <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={pkgForm.width_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={pkgForm.length_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={pkgForm.height_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={pkgForm.self_weight_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={pkgForm.max_load_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">내용적(L)</Label><Input type="number" value={pkgForm.volume_l || ""} onChange={(e) => setPkgForm((p) => ({ ...p, volume_l: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+              </div>
+            </div>
+            <div><Label className="text-xs">비고</Label><Input value={pkgForm.remarks || ""} onChange={(e) => setPkgForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setPkgModalOpen(false)}>취소</Button>
+            <Button onClick={savePkgUnit} disabled={saving}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 적재함 등록/수정 모달 */}
+      <Dialog open={loadModalOpen} onOpenChange={setLoadModalOpen}>
+        <DialogContent className="max-w-2xl" style={{ maxHeight: "90vh", overflowY: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{loadModalMode === "create" ? "적재함 등록" : "적재함 수정"}</DialogTitle>
+            <DialogDescription>품목정보에서 적재함을 선택하면 코드와 이름이 자동 연동됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            {loadModalMode === "create" && (
+              <div className="rounded-lg border bg-muted/50 p-4">
+                <Label className="mb-2 block text-xs font-semibold">품목정보 연결 (구분: 적재함)</Label>
+                <Popover open={loadItemPopoverOpen} onOpenChange={setLoadItemPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" role="combobox" className="h-9 w-full justify-between text-sm font-normal">
+                      {loadForm.loading_code ? `${loadForm.loading_name} (${loadForm.loading_code})` : "품목정보에서 적재함을 선택하세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                    <Command filter={(value, search) => {
+                      const item = loadItemOptions.find((i) => i.id === value);
+                      if (!item) return 0;
+                      const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
+                      return target.includes(search.toLowerCase()) ? 1 : 0;
+                    }}>
+                      <CommandInput placeholder="품목코드 / 품목명 검색..." />
+                      <CommandList className="max-h-[200px]">
+                        <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                        {loadItemOptions.map((item) => (
+                          <CommandItem key={item.id} value={item.id} onSelect={() => onLoadItemSelect(item)} className="text-xs">
+                            <Check className={cn("mr-2 h-3 w-3", loadForm.loading_code === item.item_number ? "opacity-100" : "opacity-0")} />
+                            <span className="font-medium">{item.item_name}</span>
+                            <span className="ml-2 text-muted-foreground">{item.item_number}</span>
+                            {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
+                          </CommandItem>
+                        ))}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+            <div className="grid grid-cols-2 gap-4">
+              <div><Label className="text-xs">적재함코드</Label><Input value={loadForm.loading_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div><Label className="text-xs">적재함명</Label><Input value={loadForm.loading_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div>
+                <Label className="text-xs">적재유형 <span className="text-destructive">*</span></Label>
+                <Select value={loadForm.loading_type || ""} onValueChange={(v) => setLoadForm((p) => ({ ...p, loading_type: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>{Object.entries(LOADING_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">상태</Label>
+                <Select value={loadForm.status || "ACTIVE"} onValueChange={(v) => setLoadForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold">규격정보</Label>
+              <div className="mt-2 grid grid-cols-3 gap-3">
+                <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={loadForm.width_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={loadForm.length_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={loadForm.height_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={loadForm.self_weight_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={loadForm.max_load_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대단수</Label><Input type="number" value={loadForm.max_stack || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_stack: e.target.value }))} className="h-9 text-xs" /></div>
+              </div>
+            </div>
+            <div><Label className="text-xs">비고</Label><Input value={loadForm.remarks || ""} onChange={(e) => setLoadForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setLoadModalOpen(false)}>취소</Button>
+            <Button onClick={saveLoadingUnit} disabled={saving}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 품목 추가 모달 (포장재 매칭) */}
+      <Dialog open={itemMatchModalOpen} onOpenChange={setItemMatchModalOpen}>
+        <DialogContent className="max-w-[900px]">
+          <DialogHeader>
+            <DialogTitle>품목 추가 — {selectedPkg?.pkg_name}</DialogTitle>
+            <DialogDescription>포장재에 매칭할 품목을 검색하여 추가합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <Input
+              placeholder="품목코드 / 품목명 검색 (입력 시 자동 검색)"
+              value={itemMatchKeyword}
+              onChange={(e) => {
+                setItemMatchKeyword(e.target.value);
+                const kw = e.target.value;
+                clearTimeout((window as any).__itemMatchTimer);
+                (window as any).__itemMatchTimer = setTimeout(async () => {
+                  try {
+                    const res = await getGeneralItems(kw || undefined);
+                    if (res.success) setItemMatchResults(res.data);
+                  } catch { /* ignore */ }
+                }, 300);
+              }}
+              className="h-9 text-xs"
+            />
+            <div className="max-h-[300px] overflow-auto rounded border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="p-2 w-[30px]" />
+                    <TableHead className="w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                    <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {itemMatchResults.filter(i => !pkgItems.some(pi => pi.item_number === i.item_number)).length === 0 ? (
+                    <TableRow><TableCell colSpan={6} className="h-16 text-center text-[13px] text-muted-foreground">검색 결과가 없습니다</TableCell></TableRow>
+                  ) : itemMatchResults.filter(i => !pkgItems.some(pi => pi.item_number === i.item_number)).map((item) => (
+                    <TableRow
+                      key={item.id}
+                      className={cn("cursor-pointer text-xs", itemMatchSelected?.id === item.id && "bg-primary/10")}
+                      onClick={() => setItemMatchSelected(item)}
+                    >
+                      <TableCell className="p-2 text-center">{itemMatchSelected?.id === item.id ? "✓" : ""}</TableCell>
+                      <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
+                      <TableCell className="p-2">{item.item_name}</TableCell>
+                      <TableCell className="p-2">{item.spec || "-"}</TableCell>
+                      <TableCell className="p-2">{item.material || "-"}</TableCell>
+                      <TableCell className="p-2">{item.unit || "EA"}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+            <div className="flex items-end gap-4">
+              <div className="flex-1">
+                <Label className="text-xs">선택된 품목</Label>
+                <Input
+                  value={itemMatchSelected ? `${itemMatchSelected.item_name} (${itemMatchSelected.item_number})` : ""}
+                  readOnly className="h-9 bg-muted text-xs"
+                />
+              </div>
+              <div className="w-[120px]">
+                <Label htmlFor="pkg-item-match-qty" className="text-xs">포장수량(EA) <span className="text-destructive">*</span></Label>
+                <Input
+                  id="pkg-item-match-qty" type="number" value={itemMatchQty}
+                  onChange={(e) => setItemMatchQty(Number(e.target.value) || 0)}
+                  min={1} className="h-9 text-xs"
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setItemMatchModalOpen(false)}>취소</Button>
+            <Button type="button" data-action-type="custom" onClick={saveItemMatch} disabled={saving || !itemMatchSelected}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 포장단위 추가 모달 (적재함 구성) */}
+      <Dialog open={pkgMatchModalOpen} onOpenChange={setPkgMatchModalOpen}>
+        <DialogContent className="max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>포장단위 추가 — {selectedLoading?.loading_name}</DialogTitle>
+            <DialogDescription>적재함에 적재할 포장단위를 선택합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <Input
+              placeholder="포장코드 / 포장명 검색"
+              value={pkgMatchSearchKw}
+              onChange={(e) => setPkgMatchSearchKw(e.target.value)}
+              className="h-9 text-xs"
+            />
+            <div className="max-h-[300px] overflow-auto rounded border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="p-2 w-[30px]" />
+                    <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장코드</TableHead>
+                    <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장명</TableHead>
+                    <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">크기(mm)</TableHead>
+                    <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대중량</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {(() => {
+                    const kw = pkgMatchSearchKw.toLowerCase();
+                    const filtered = pkgUnits.filter(p =>
+                      p.status === "ACTIVE"
+                      && !loadingPkgs.some(lp => lp.pkg_code === p.pkg_code)
+                      && (!kw || p.pkg_code?.toLowerCase().includes(kw) || p.pkg_name?.toLowerCase().includes(kw))
+                    );
+                    return filtered.length === 0 ? (
+                      <TableRow><TableCell colSpan={6} className="h-16 text-center text-[13px] text-muted-foreground">추가 가능한 포장단위가 없습니다</TableCell></TableRow>
+                    ) : filtered.map((p) => (
+                      <TableRow
+                        key={p.id}
+                        className={cn("cursor-pointer text-xs", pkgMatchSelected?.id === p.id && "bg-primary/10")}
+                        onClick={() => setPkgMatchSelected(p)}
+                      >
+                        <TableCell className="p-2 text-center">{pkgMatchSelected?.id === p.id ? "✓" : ""}</TableCell>
+                        <TableCell className="p-2 font-medium">{p.pkg_code}</TableCell>
+                        <TableCell className="p-2">{p.pkg_name}</TableCell>
+                        <TableCell className="p-2">{PKG_TYPE_LABEL[p.pkg_type] || p.pkg_type}</TableCell>
+                        <TableCell className="p-2 text-[10px]">{fmtSize(p.width_mm, p.length_mm, p.height_mm)}</TableCell>
+                        <TableCell className="p-2 text-right">{Number(p.max_load_kg || 0) > 0 ? `${p.max_load_kg}kg` : "-"}</TableCell>
+                      </TableRow>
+                    ));
+                  })()}
+                </TableBody>
+              </Table>
+            </div>
+            <div className="flex items-end gap-4">
+              <div className="w-[150px]">
+                <Label htmlFor="loading-pkg-match-qty" className="text-xs">최대적재수량 <span className="text-destructive">*</span></Label>
+                <Input
+                  id="loading-pkg-match-qty" type="number" value={pkgMatchQty}
+                  onChange={(e) => setPkgMatchQty(Number(e.target.value) || 0)}
+                  min={1} className="h-9 text-xs"
+                />
+              </div>
+              <div className="flex-1">
+                <Label className="text-xs">적재방향</Label>
+                <Input
+                  value={pkgMatchMethod}
+                  onChange={(e) => setPkgMatchMethod(e.target.value)}
+                  placeholder="수직/수평/혼합"
+                  className="h-9 text-xs"
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setPkgMatchModalOpen(false)}>취소</Button>
+            <Button type="button" data-action-type="custom" onClick={savePkgMatch} disabled={saving || !pkgMatchSelected}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/logistics/receiving/page.tsx b/frontend/app/(main)/COMPANY_30/logistics/receiving/page.tsx
new file mode 100644
index 00000000..85cdc23c
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/logistics/receiving/page.tsx
@@ -0,0 +1,1808 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Search,
+  Plus,
+  Trash2,
+  Loader2,
+  Inbox,
+  X,
+  Save,
+  ChevronRight,
+  ChevronDown,
+  ChevronLeft,
+  ChevronsLeft,
+  ChevronsRight,
+  Settings2,
+  Filter,
+  Check,
+  ArrowUp,
+  ArrowDown,
+} from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+// EDataTable 제거 — 마스터-디테일 그룹 테이블로 교체
+// API: /receiving/*
+import {
+  getReceivingList,
+  createReceiving,
+  deleteReceiving,
+  generateReceivingNumber,
+  getReceivingWarehouses,
+  getPurchaseOrderSources,
+  getShipmentSources,
+  getItemSources,
+  type InboundItem,
+  type PurchaseOrderSource,
+  type ShipmentSource,
+  type ItemSource,
+  type WarehouseOption,
+} from "@/lib/api/receiving";
+
+const GRID_COLUMNS = [
+  { key: "inbound_number", label: "입고번호" },
+  { key: "inbound_type", label: "입고유형" },
+  { key: "inbound_date", label: "입고일" },
+  { key: "reference_number", label: "참조번호" },
+  { key: "source_type", label: "데이터출처" },
+  { key: "supplier_name", label: "공급처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "inbound_qty", label: "입고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+  { key: "warehouse_name", label: "창고" },
+  { key: "inbound_status", label: "입고상태" },
+  { key: "remark", label: "비고" },
+];
+
+// 마스터 헤더 레이아웃 (입고번호 뒤, 디테일 7컬럼 위에 colSpan으로 맵핑)
+const MASTER_BODY_LAYOUT = [
+  { key: "inbound_type", label: "입고유형", colSpan: 1 },
+  { key: "inbound_date", label: "입고일", colSpan: 1 },
+  { key: "reference_number", label: "참조번호", colSpan: 1 },
+  { key: "supplier_name", label: "공급처", colSpan: 1 },
+  { key: "warehouse_name", label: "창고", colSpan: 1 },
+  { key: "inbound_status", label: "입고상태", colSpan: 1 },
+  { key: "memo", label: "비고", colSpan: 1 },
+];
+
+// 디테일 헤더 컬럼
+const DETAIL_HEADER_COLS = [
+  { key: "source_table", label: "출처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "inbound_qty", label: "입고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+];
+
+// 마스터 필드 키 목록 (필터 분류용)
+const MASTER_KEYS = new Set(["inbound_number", ...MASTER_BODY_LAYOUT.map((c) => c.key)]);
+
+// 디테일 필드 키 매핑 (GRID_COLUMNS key → DETAIL_HEADER_COLS key)
+const DETAIL_KEY_MAP: Record<string, string> = {
+  source_type: "source_table",
+  item_number: "item_number",
+  item_name: "item_name",
+  spec: "spec",
+  inbound_qty: "inbound_qty",
+  unit_price: "unit_price",
+  total_amount: "total_amount",
+};
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 입고유형 옵션
+const INBOUND_TYPES = [
+  { value: "구매입고", label: "구매입고" },
+  { value: "외주입고", label: "외주입고" },
+  { value: "사급자재입고", label: "사급자재입고" },
+  { value: "반품입고", label: "반품입고" },
+  { value: "기타입고", label: "기타입고" },
+];
+
+// 입고유형 카테고리 코드→라벨 매핑
+const INBOUND_TYPE_CODE_MAP: Record<string, string> = {
+  CAT_MLYTB8ON_A3AU: "구매입고",
+  CAT_MLYTBMH6_9AB7: "외주입고",
+  CAT_MLYTBSLW_5N81: "사급자재입고",
+  CAT_MLYTBGEV_N23U: "반품입고",
+  CAT_MLYTBYLU_0Z5T: "기타입고",
+};
+const resolveInboundType = (v: string) => INBOUND_TYPE_CODE_MAP[v] || v || "-";
+
+const INBOUND_STATUS_OPTIONS = [
+  { value: "대기", label: "대기" },
+  { value: "입고완료", label: "입고완료" },
+  { value: "부분입고", label: "부분입고" },
+  { value: "입고취소", label: "입고취소" },
+];
+
+const getTypeVariant = (type: string): "default" | "secondary" | "outline" => {
+  switch (type) {
+    case "구매입고": return "default";
+    case "반품입고": return "secondary";
+    default: return "outline";
+  }
+};
+
+const getStatusVariant = (status: string): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "입고완료": return "default";
+    case "부분입고": return "secondary";
+    case "입고취소": return "destructive";
+    default: return "outline";
+  }
+};
+
+// 소스 테이블 한글명 매핑
+const SOURCE_TABLE_LABEL: Record<string, string> = {
+  purchase_order_mng: "발주",
+  shipment_instruction_detail: "출하",
+  item_info: "품목",
+};
+
+// 선택된 소스 아이템 (등록 모달에서 사용)
+interface SelectedSourceItem {
+  key: string;
+  inbound_type: string;
+  reference_number: string;
+  supplier_code: string;
+  supplier_name: string;
+  item_number: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  unit: string;
+  inbound_qty: number;
+  unit_price: number;
+  total_amount: number;
+  source_table: string;
+  source_id: string;
+}
+
+export default function ReceivingPage() {
+  const ts = useTableSettings("c16-receiving", "inbound_mng", GRID_COLUMNS);
+
+  // ts.visibleColumns 기반 마스터/디테일 컬럼 계산
+  const visibleMasterLayout = useMemo(() => {
+    const ordered: typeof MASTER_BODY_LAYOUT = [];
+    for (const vc of ts.visibleColumns) {
+      const m = MASTER_BODY_LAYOUT.find((ml) => ml.key === vc.key);
+      if (m) ordered.push(m);
+    }
+    return ordered.length > 0 ? ordered : MASTER_BODY_LAYOUT;
+  }, [ts.visibleColumns]);
+
+  const visibleDetailCols = useMemo(() => {
+    const ordered: typeof DETAIL_HEADER_COLS = [];
+    for (const vc of ts.visibleColumns) {
+      const detailKey = DETAIL_KEY_MAP[vc.key];
+      if (detailKey) {
+        const d = DETAIL_HEADER_COLS.find((dc) => dc.key === detailKey);
+        if (d) ordered.push(d);
+      }
+    }
+    return ordered.length > 0 ? ordered : DETAIL_HEADER_COLS;
+  }, [ts.visibleColumns]);
+
+  const TOTAL_COLS = 3 + visibleMasterLayout.length;
+
+  // 목록 데이터
+  const [data, setData] = useState<InboundItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 마스터-디테일 그룹 테이블
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+  const [closingOrders, setClosingOrders] = useState<Set<string>>(new Set());
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
+
+  // 등록 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalInboundType, setModalInboundType] = useState("구매입고");
+  const [modalInboundNo, setModalInboundNo] = useState("");
+  const [modalInboundDate, setModalInboundDate] = useState("");
+  const [modalWarehouse, setModalWarehouse] = useState("");
+  const [modalLocation, setModalLocation] = useState("");
+  const [modalInspector, setModalInspector] = useState("");
+  const [modalManager, setModalManager] = useState("");
+  const [modalMemo, setModalMemo] = useState("");
+  const [selectedItems, setSelectedItems] = useState<SelectedSourceItem[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // 소스 데이터
+  const [sourceKeyword, setSourceKeyword] = useState("");
+  const [sourceLoading, setSourceLoading] = useState(false);
+  const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrderSource[]>([]);
+  const [shipments, setShipments] = useState<ShipmentSource[]>([]);
+  const [items, setItems] = useState<ItemSource[]>([]);
+  const [warehouses, setWarehouses] = useState<WarehouseOption[]>([]);
+
+  // 소스 데이터 페이징
+  const [sourcePage, setSourcePage] = useState(1);
+  const [sourcePageSize, setSourcePageSize] = useState(20);
+  const [sourceTotalCount, setSourceTotalCount] = useState(0);
+
+  // 구매관리 division 코드 (라벨 기준 조회)
+  const [purchaseDivisionCode, setPurchaseDivisionCode] = useState<string>("");
+
+  // 구매관리 division 코드 로드
+  useEffect(() => {
+    // division 카테고리에서 "구매관리" 라벨의 코드 조회
+    apiClient.get("/table-categories/item_info/division/values").then((res) => {
+      const vals = res.data?.data || [];
+      const found = vals.find((v: any) => (v.value_label || v.label) === "구매관리");
+      if (found) setPurchaseDivisionCode(found.value_code || found.code);
+    }).catch(() => {});
+  }, []);
+
+  // 목록 조회
+  const fetchList = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string | undefined> = {};
+      for (const f of searchFilters) {
+        if (!f.value) continue;
+        if (f.columnName === "inbound_type") params.inbound_type = f.value;
+        else if (f.columnName === "inbound_status") params.inbound_status = f.value;
+        else if (f.columnName === "inbound_date" && f.operator === "between") {
+          const [from, to] = f.value.split("~").map((s) => s.trim());
+          if (from) params.date_from = from;
+          if (to) params.date_to = to;
+        } else {
+          params.search_keyword = f.value;
+        }
+      }
+      const res = await getReceivingList(params);
+      if (res.success) setData(res.data);
+    } catch {
+      // 에러 무시
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchList();
+  }, [fetchList]);
+
+  // 창고 목록 로드
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await getReceivingWarehouses();
+        if (res.success) setWarehouses(res.data);
+      } catch {
+        // ignore
+      }
+    })();
+  }, []);
+
+  // 필터 + 정렬 적용된 데이터 -> 그룹핑
+  const filteredGroups = useMemo(() => {
+    // 1차: inbound_number 기준 그룹핑
+    const allGroups: Record<string, { master: InboundItem; details: InboundItem[] }> = {};
+    for (const row of data) {
+      const key = row.inbound_number || "_no_inbound";
+      if (!allGroups[key]) {
+        allGroups[key] = { master: row, details: [] };
+      }
+      allGroups[key].details.push(row);
+    }
+
+    // 마스터 필터 / 디테일 필터 분리
+    const masterFilters: Record<string, Set<string>> = {};
+    const detailFilters: Record<string, Set<string>> = {};
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      if (MASTER_KEYS.has(colKey)) masterFilters[colKey] = values;
+      else detailFilters[colKey] = values;
+    }
+
+    // 2차: 마스터 필터 적용 (그룹 단위)
+    let entries = Object.entries(allGroups);
+    if (Object.keys(masterFilters).length > 0) {
+      entries = entries.filter(([, group]) =>
+        Object.entries(masterFilters).every(([colKey, values]) => {
+          let raw = (group.master as any)?.[colKey] ?? "";
+          // 입고유형은 코드→라벨 변환된 값으로 비교
+          if (colKey === "inbound_type") raw = resolveInboundType(String(raw));
+          return values.has(String(raw));
+        })
+      );
+    }
+
+    // 3차: 디테일 필터 적용 (행 단위)
+    if (Object.keys(detailFilters).length > 0) {
+      entries = entries
+        .map(([inboundNo, group]) => {
+          const filtered = group.details.filter((row) =>
+            Object.entries(detailFilters).every(([colKey, values]) => {
+              let cellVal = (row as any)[colKey] != null ? String((row as any)[colKey]) : "";
+              if (colKey === "source_table") cellVal = SOURCE_TABLE_LABEL[cellVal] || cellVal;
+              return values.has(cellVal);
+            })
+          );
+          return [inboundNo, { ...group, details: filtered }] as [string, typeof group];
+        })
+        .filter(([, group]) => group.details.length > 0);
+    }
+
+    // 4차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      if (MASTER_KEYS.has(key)) {
+        entries.sort(([, a], [, b]) => {
+          let av: any = (a.master as any)?.[key] ?? "";
+          let bv: any = (b.master as any)?.[key] ?? "";
+          if (key === "inbound_type") { av = resolveInboundType(String(av)); bv = resolveInboundType(String(bv)); }
+          const na = Number(av); const nb = Number(bv);
+          if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+          return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+        });
+      } else {
+        entries.forEach(([, group]) => {
+          group.details.sort((a, b) => {
+            const av = (a as any)[key] ?? "";
+            const bv = (b as any)[key] ?? "";
+            const na = Number(av); const nb = Number(bv);
+            if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+            return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+          });
+        });
+      }
+    }
+
+    return Object.fromEntries(entries);
+  }, [data, headerFilters, sortState]);
+
+  // 마스터 컬럼별 고유값 (마스터 헤더 필터용)
+  const masterUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    const seenMasters = new Map<string, InboundItem>();
+    data.forEach((row) => {
+      if (row.inbound_number && !seenMasters.has(row.inbound_number)) {
+        seenMasters.set(row.inbound_number, row);
+      }
+    });
+    const masters = Array.from(seenMasters.values());
+    for (const col of [{ key: "inbound_number", label: "입고번호" }, ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label }))]) {
+      const values = new Set<string>();
+      masters.forEach((m) => {
+        let val = (m as any)?.[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "inbound_type") val = resolveInboundType(String(val));
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 디테일 컬럼별 고유값 (디테일 서브헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of DETAIL_HEADER_COLS) {
+      const values = new Set<string>();
+      data.forEach((row) => {
+        let val = (row as any)[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "source_table") val = SOURCE_TABLE_LABEL[val] || val;
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
+  };
+
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
+  };
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
+    );
+  };
+
+  // 삭제
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) return;
+    if (!confirm(`선택한 ${checkedIds.length}건을 삭제하시겠습니까?`)) return;
+    for (const id of checkedIds) {
+      await deleteReceiving(id);
+    }
+    setCheckedIds([]);
+    fetchList();
+  };
+
+  // --- 등록 모달 ---
+
+  // 소스 데이터 로드 함수
+  const loadSourceData = useCallback(
+    async (type: string, keyword?: string, pageOverride?: number) => {
+      setSourceLoading(true);
+      try {
+        const params = {
+          keyword: keyword || undefined,
+          page: pageOverride ?? sourcePage,
+          pageSize: sourcePageSize,
+        };
+        if (type === "구매입고") {
+          const res = await getPurchaseOrderSources(params);
+          if (res.success) {
+            setPurchaseOrders(res.data);
+            setSourceTotalCount(res.totalCount || 0);
+          }
+        } else if (type === "반품입고") {
+          const res = await getShipmentSources(params);
+          if (res.success) {
+            setShipments(res.data);
+            setSourceTotalCount(res.totalCount || 0);
+          }
+        } else {
+          const res = await getItemSources({ ...params, division: purchaseDivisionCode || undefined });
+          if (res.success) {
+            setItems(res.data);
+            setSourceTotalCount(res.totalCount || 0);
+          }
+        }
+      } catch {
+        // ignore
+      } finally {
+        setSourceLoading(false);
+      }
+    },
+    [sourcePage, sourcePageSize]
+  );
+
+  const openRegisterModal = async () => {
+    const defaultType = "구매입고";
+    setModalInboundType(defaultType);
+    setModalInboundDate(new Date().toISOString().split("T")[0]);
+    setModalWarehouse("");
+    setModalLocation("");
+    setModalInspector("");
+    setModalManager("");
+    setModalMemo("");
+    setSelectedItems([]);
+    setSourceKeyword("");
+    setPurchaseOrders([]);
+    setShipments([]);
+    setItems([]);
+    setSourcePage(1);
+    setSourceTotalCount(0);
+    setIsModalOpen(true);
+
+    // 입고번호 생성 + 발주 데이터 동시 로드
+    try {
+      const [numRes] = await Promise.all([
+        generateReceivingNumber(),
+        loadSourceData(defaultType, undefined, 1),
+      ]);
+      if (numRes.success) setModalInboundNo(numRes.data);
+    } catch {
+      setModalInboundNo("");
+    }
+  };
+
+  // 검색 버튼 클릭 시
+  const searchSourceData = useCallback(async () => {
+    setSourcePage(1);
+    await loadSourceData(modalInboundType, sourceKeyword || undefined, 1);
+  }, [modalInboundType, sourceKeyword, loadSourceData]);
+
+  // 입고유형 변경 시 소스 데이터 자동 리로드
+  const handleInboundTypeChange = useCallback(
+    (type: string) => {
+      setModalInboundType(type);
+      setSourceKeyword("");
+      setPurchaseOrders([]);
+      setShipments([]);
+      setItems([]);
+      setSelectedItems([]);
+      setSourcePage(1);
+      setSourceTotalCount(0);
+      loadSourceData(type, undefined, 1);
+    },
+    [loadSourceData]
+  );
+
+  // 발주 품목 추가
+  const addPurchaseOrder = (po: PurchaseOrderSource) => {
+    const key = `po-${po.id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        inbound_type: "구매입고",
+        reference_number: po.purchase_no,
+        supplier_code: po.supplier_code,
+        supplier_name: po.supplier_name,
+        item_number: po.item_code,
+        item_name: po.item_name,
+        spec: po.spec || "",
+        material: po.material || "",
+        unit: "EA",
+        inbound_qty: po.remain_qty,
+        unit_price: po.unit_price,
+        total_amount: po.remain_qty * po.unit_price,
+        source_table: po.source_table || "purchase_order_mng",
+        source_id: po.id,
+      },
+    ]);
+  };
+
+  // 출하 품목 추가
+  const addShipment = (sh: ShipmentSource) => {
+    const key = `sh-${sh.detail_id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        inbound_type: "반품입고",
+        reference_number: sh.instruction_no,
+        supplier_code: "",
+        supplier_name: sh.partner_id,
+        item_number: sh.item_code,
+        item_name: sh.item_name,
+        spec: sh.spec || "",
+        material: sh.material || "",
+        unit: "EA",
+        inbound_qty: sh.ship_qty,
+        unit_price: 0,
+        total_amount: 0,
+        source_table: "shipment_instruction_detail",
+        source_id: String(sh.detail_id),
+      },
+    ]);
+  };
+
+  // 품목 추가
+  const addItem = (item: ItemSource) => {
+    const key = `item-${item.id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        inbound_type: "기타입고",
+        reference_number: item.item_number,
+        supplier_code: "",
+        supplier_name: "",
+        item_number: item.item_number,
+        item_name: item.item_name,
+        spec: item.spec || "",
+        material: item.material || "",
+        unit: item.unit || "EA",
+        inbound_qty: 0,
+        unit_price: item.standard_price,
+        total_amount: 0,
+        source_table: "item_info",
+        source_id: item.id,
+      },
+    ]);
+  };
+
+  // 선택 품목 수량 변경
+  const updateItemQty = (key: string, qty: number) => {
+    setSelectedItems((prev) =>
+      prev.map((item) =>
+        item.key === key
+          ? { ...item, inbound_qty: qty, total_amount: qty * item.unit_price }
+          : item
+      )
+    );
+  };
+
+  // 선택 품목 단가 변경
+  const updateItemPrice = (key: string, price: number) => {
+    setSelectedItems((prev) =>
+      prev.map((item) =>
+        item.key === key
+          ? { ...item, unit_price: price, total_amount: item.inbound_qty * price }
+          : item
+      )
+    );
+  };
+
+  // 선택 품목 삭제
+  const removeItem = (key: string) => {
+    setSelectedItems((prev) => prev.filter((item) => item.key !== key));
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (selectedItems.length === 0) {
+      alert("입고할 품목을 선택해주세요.");
+      return;
+    }
+    if (!modalInboundDate) {
+      alert("입고일을 입력해주세요.");
+      return;
+    }
+
+    const zeroQtyItems = selectedItems.filter((i) => !i.inbound_qty || i.inbound_qty <= 0);
+    if (zeroQtyItems.length > 0) {
+      alert("입고수량이 0인 품목이 있습니다. 수량을 입력해주세요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const res = await createReceiving({
+        inbound_number: modalInboundNo,
+        inbound_date: modalInboundDate,
+        warehouse_code: modalWarehouse || undefined,
+        location_code: modalLocation || undefined,
+        inspector: modalInspector || undefined,
+        manager: modalManager || undefined,
+        memo: modalMemo || undefined,
+        items: selectedItems.map((item) => ({
+          inbound_type: item.inbound_type,
+          reference_number: item.reference_number,
+          supplier_code: item.supplier_code,
+          supplier_name: item.supplier_name,
+          item_number: item.item_number,
+          item_name: item.item_name,
+          spec: item.spec,
+          material: item.material,
+          unit: item.unit,
+          inbound_qty: item.inbound_qty,
+          unit_price: item.unit_price,
+          total_amount: item.total_amount,
+          source_table: item.source_table,
+          source_id: item.source_id,
+          inbound_status: "입고완료",
+          inspection_status: "대기",
+        })),
+      });
+
+      if (res.success) {
+        alert(res.message || "입고 등록 완료");
+        setIsModalOpen(false);
+        fetchList();
+      }
+    } catch {
+      alert("입고 등록 중 오류가 발생했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 합계 계산
+  const totalSummary = useMemo(() => {
+    return {
+      count: selectedItems.length,
+      qty: selectedItems.reduce((sum, i) => sum + (i.inbound_qty || 0), 0),
+      amount: selectedItems.reduce((sum, i) => sum + (i.total_amount || 0), 0),
+    };
+  }, [selectedItems]);
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>물류관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">입고관리</span>
+      </div>
+
+      {/* 검색 영역 */}
+      <DynamicSearchFilter
+        tableName="inbound_mng"
+        filterId="c16-receiving"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={data.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button size="sm" onClick={openRegisterModal} className="h-9">
+              <Plus className="mr-1 h-4 w-4" />
+              입고 등록
+            </Button>
+            <div className="h-4 w-px bg-border" />
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={handleDelete}
+              disabled={checkedIds.length === 0}
+              className="h-9 text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+            >
+              <Trash2 className="mr-1 h-4 w-4" />
+              삭제 ({checkedIds.length})
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 입고 목록 테이블 (마스터-디테일 그룹) */}
+      <div className="flex-1 overflow-hidden rounded-lg border border-border bg-card">
+        <div className="flex items-center justify-between border-b bg-muted/50 px-4 py-2.5">
+          <div className="flex items-center gap-2">
+            <h3 className="text-[13px] font-bold">입고 목록</h3>
+            <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+              {Object.keys(filteredGroups).length}건
+            </span>
+          </div>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="h-[calc(100%-44px)] overflow-auto">
+          <Table style={{ minWidth: `${216 + visibleMasterLayout.length * 120}px` }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "36px" }} />
+              <col style={{ width: "140px" }} />
+              {visibleMasterLayout.map((col) => (
+                <col key={col.key} style={{ width: ts.getWidth(col.key) ? `${ts.getWidth(col.key)}px` : undefined }} />
+              ))}
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
+                  <Checkbox
+                    checked={(() => {
+                      const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
+                  />
+                </TableHead>
+                <TableHead />
+                {/* 입고번호 (별도 컬럼) */}
+                <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                  <div className="inline-flex items-center gap-1">
+                    <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort("inbound_number")}>
+                      <span className="truncate">입고번호</span>
+                      {sortState?.key === "inbound_number" && (
+                        sortState.direction === "asc"
+                          ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                          : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                      )}
+                    </div>
+                    {(masterUniqueValues["inbound_number"] || []).length > 0 && (
+                      <HeaderFilterPopover
+                        colKey="inbound_number" colLabel="입고번호"
+                        uniqueValues={masterUniqueValues["inbound_number"] || []}
+                        filterValues={headerFilters["inbound_number"] || new Set<string>()}
+                        onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                      />
+                    )}
+                  </div>
+                </TableHead>
+                {/* 마스터 필드 헤더 (ts.visibleColumns 순서) */}
+                {visibleMasterLayout.map((col) => (
+                  <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                    <div className="inline-flex items-center gap-1">
+                      <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                        <span className="truncate">{col.label}</span>
+                        {sortState?.key === col.key && (
+                          sortState.direction === "asc"
+                            ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                            : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                        )}
+                      </div>
+                      {(masterUniqueValues[col.key] || []).length > 0 && (
+                        <HeaderFilterPopover
+                          colKey={col.key} colLabel={col.label}
+                          uniqueValues={masterUniqueValues[col.key] || []}
+                          filterValues={headerFilters[col.key] || new Set<string>()}
+                          onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                        />
+                      )}
+                    </div>
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
+                  </TableCell>
+                </TableRow>
+              ) : Object.keys(filteredGroups).length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <Inbox className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 입고 내역이 없어요</span>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                Object.entries(filteredGroups).map(([inboundNo, group]) => {
+                  const isExpanded = expandedOrders.has(inboundNo);
+                  const detailIds = group.details.map((d) => d.id);
+                  const allDetailChecked = detailIds.length > 0 && detailIds.every((id) => checkedIds.includes(id));
+                  const someDetailChecked = detailIds.some((id) => checkedIds.includes(id));
+                  const master = group.master;
+                  return (
+                    <React.Fragment key={inboundNo}>
+                      {/* 마스터 행 */}
+                      <TableRow
+                        style={{ borderTop: "2px solid hsl(var(--border))" }}
+                        className={cn(
+                          "cursor-pointer border-l-[3px] border-l-transparent font-semibold tree-master-row",
+                          allDetailChecked && "border-l-primary bg-primary/5"
+                        )}
+                        onClick={() => {
+                          if (expandedOrders.has(inboundNo)) {
+                            setClosingOrders((prev) => new Set(prev).add(inboundNo));
+                            setTimeout(() => {
+                              setExpandedOrders((prev) => { const next = new Set(prev); next.delete(inboundNo); return next; });
+                              setClosingOrders((prev) => { const next = new Set(prev); next.delete(inboundNo); return next; });
+                            }, 200);
+                          } else {
+                            setExpandedOrders((prev) => new Set(prev).add(inboundNo));
+                          }
+                        }}
+                      >
+                        <TableCell
+                          className="text-center cursor-pointer"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setCheckedIds((prev) => {
+                              if (allDetailChecked) return prev.filter((id) => !detailIds.includes(id));
+                              return [...new Set([...prev, ...detailIds])];
+                            });
+                          }}
+                        >
+                          <Checkbox
+                            checked={allDetailChecked}
+                            data-state={someDetailChecked && !allDetailChecked ? "indeterminate" : undefined}
+                            onCheckedChange={() => {}}
+                          />
+                        </TableCell>
+                        <TableCell className="text-center">
+                          {isExpanded
+                            ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            : <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          }
+                        </TableCell>
+                        {/* 입고번호 */}
+                        <TableCell className="font-mono whitespace-nowrap">
+                          {inboundNo}
+                          <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
+                        </TableCell>
+                        {/* 마스터 필드 (ts.visibleColumns 순서) */}
+                        {visibleMasterLayout.map((col) => {
+                          switch (col.key) {
+                            case "inbound_type": return (
+                              <TableCell key={col.key} className="text-[13px]">
+                                <Badge variant={getTypeVariant(resolveInboundType(master.inbound_type))} className="text-[11px]">
+                                  {resolveInboundType(master.inbound_type)}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "inbound_date": return (
+                              <TableCell key={col.key} className="text-[13px] whitespace-nowrap">
+                                {master.inbound_date ? new Date(master.inbound_date).toLocaleDateString("ko-KR") : "-"}
+                              </TableCell>
+                            );
+                            case "reference_number": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.reference_number || ""}</span>
+                              </TableCell>
+                            );
+                            case "supplier_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.supplier_name || ""}</span>
+                              </TableCell>
+                            );
+                            case "warehouse_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
+                              </TableCell>
+                            );
+                            case "inbound_status": return (
+                              <TableCell key={col.key} className="text-[13px]">
+                                <Badge variant={getStatusVariant(master.inbound_status)} className="text-[11px]">
+                                  {master.inbound_status || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "memo": return (
+                              <TableCell key={col.key} className="text-muted-foreground text-[13px]">
+                                <span className="block truncate max-w-[110px]">{master.memo || ""}</span>
+                              </TableCell>
+                            );
+                            default: return <TableCell key={col.key} className="text-[13px]">{(master as any)[col.key] ?? ""}</TableCell>;
+                          }
+                        })}
+                      </TableRow>
+
+                      {/* 디테일 서브 헤더 (펼쳤을 때만) */}
+                      {isExpanded && (
+                        <TableRow
+                          className={cn(
+                            "border-l-[3px] border-l-primary/30 bg-muted/60",
+                            closingOrders.has(inboundNo) ? "tree-detail-row-closing" : "tree-detail-row",
+                          )}
+                        >
+                          <TableCell />
+                          <TableCell />
+                          <TableCell />
+                          {visibleDetailCols.map((col) => {
+                            const isRight = ["inbound_qty", "unit_price", "total_amount"].includes(col.key);
+                            const isSorted = sortState?.key === col.key;
+                            const uniqueVals = Array.from(new Set(
+                              group.details.map((d) => {
+                                let v = (d as any)[col.key];
+                                if (col.key === "source_table") v = SOURCE_TABLE_LABEL[v] || v;
+                                return v;
+                              }).filter((v: any) => v != null && v !== "").map(String)
+                            )).sort();
+                            const filterVals = headerFilters[col.key] || new Set<string>();
+                            return (
+                              <TableCell
+                                key={col.key}
+                                className={cn(
+                                  "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 select-none",
+                                  isRight && "text-right",
+                                )}
+                              >
+                                <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                                  <div
+                                    className="flex items-center gap-1 cursor-pointer min-w-0"
+                                    onClick={() => handleSort(col.key)}
+                                  >
+                                    <span className="truncate">{col.label}</span>
+                                    {isSorted && (
+                                      sortState!.direction === "asc"
+                                        ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                                        : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                                    )}
+                                  </div>
+                                  {uniqueVals.length > 0 && (
+                                    <HeaderFilterPopover
+                                      colKey={col.key} colLabel={col.label}
+                                      uniqueValues={uniqueVals} filterValues={filterVals}
+                                      onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                                    />
+                                  )}
+                                </div>
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                      )}
+
+                      {/* 디테일 행 (펼쳤을 때만) */}
+                      {isExpanded && group.details.map((row, detailIdx) => {
+                        const isClosing = closingOrders.has(inboundNo);
+                        const isChecked = checkedIds.includes(row.id);
+                        return (
+                          <TableRow
+                            key={`${row.id}-${detailIdx}`}
+                            className={cn(
+                              "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                              isClosing ? "tree-detail-row-closing" : "tree-detail-row",
+                              isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                            )}
+                            onClick={() => {
+                              setCheckedIds((prev) =>
+                                prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                              );
+                            }}
+                          >
+                            <TableCell
+                              className="text-center cursor-pointer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                            >
+                              <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                            </TableCell>
+                            <TableCell className="relative">
+                              <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
+                            </TableCell>
+                            <TableCell />
+                            {visibleDetailCols.map((col) => {
+                              switch (col.key) {
+                                case "source_table": return <TableCell key={col.key} className="text-[13px]">{row.source_table ? SOURCE_TABLE_LABEL[row.source_table] || row.source_table : "-"}</TableCell>;
+                                case "item_number": return <TableCell key={col.key} className="font-mono text-[13px]">{row.item_number || ""}</TableCell>;
+                                case "item_name": return <TableCell key={col.key} className="text-[13px] max-w-[160px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>;
+                                case "spec": return <TableCell key={col.key} className="text-[13px] text-muted-foreground">{row.spec || ""}</TableCell>;
+                                case "inbound_qty": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.inbound_qty ? Number(row.inbound_qty).toLocaleString() : ""}</TableCell>;
+                                case "unit_price": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>;
+                                case "total_amount": return <TableCell key={col.key} className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>;
+                                default: return <TableCell key={col.key} className="text-[13px]">{(row as any)[col.key] ?? ""}</TableCell>;
+                              }
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                    </React.Fragment>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      {/* 입고 등록 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="sm:max-w-[1600px] w-[95vw] h-[90vh] p-0 flex flex-col overflow-hidden">
+          <DialogHeader className="shrink-0 px-6 pt-4 pb-2 border-b">
+            <DialogTitle>입고 등록</DialogTitle>
+            <DialogDescription>
+              입고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가해 주세요.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-hidden flex flex-col">
+
+          {/* 입고유형 선택 */}
+          <div className="flex items-center gap-4 border-b bg-muted/30 px-6 py-2.5">
+            <Label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide">입고유형</Label>
+            <Select value={modalInboundType} onValueChange={handleInboundTypeChange}>
+              <SelectTrigger className="h-9 w-[160px] text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {INBOUND_TYPES.map((t) => (
+                  <SelectItem key={t.value} value={t.value}>
+                    {t.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <span className="text-muted-foreground ml-auto text-xs italic">
+              {modalInboundType === "구매입고"
+                ? "발주 데이터에서 입고 처리합니다."
+                : modalInboundType === "반품입고"
+                  ? "출하 데이터에서 반품 입고 처리합니다."
+                  : "품목 데이터를 직접 선택하여 입고 처리합니다."}
+            </span>
+          </div>
+
+          {/* 메인 콘텐츠: 좌측 소스 데이터 / 우측 선택 품목 */}
+          <div className="flex-1 overflow-hidden">
+            <ResizablePanelGroup direction="horizontal">
+              {/* 좌측: 근거 데이터 검색 */}
+              <ResizablePanel defaultSize={60} minSize={35}>
+                <div className="flex h-full flex-col">
+                  {/* 소스 검색 바 */}
+                  <div className="flex items-center gap-2 border-b px-4 py-2.5">
+                    <Input
+                      placeholder={
+                        modalInboundType === "구매입고"
+                          ? "발주번호 / 품목명 / 공급처"
+                          : modalInboundType === "반품입고"
+                            ? "출하번호 / 품목명"
+                            : "품목번호 / 품목명"
+                      }
+                      value={sourceKeyword}
+                      onChange={(e) => setSourceKeyword(e.target.value)}
+                      onKeyDown={(e) => e.key === "Enter" && searchSourceData()}
+                      className="h-9 flex-1 text-xs"
+                    />
+                    <Button size="sm" onClick={searchSourceData} className="h-9">
+                      <Search className="mr-1 h-3 w-3" />
+                      검색
+                    </Button>
+                  </div>
+
+                  {/* 소스 데이터 테이블 */}
+                  <div className="flex-1 overflow-auto">
+                    <div className="flex items-center gap-2 px-4 py-2.5 bg-muted/50 border-b">
+                      <h4 className="text-[13px] font-bold">
+                        {modalInboundType === "구매입고"
+                          ? "미입고 발주 목록"
+                          : modalInboundType === "반품입고"
+                            ? "출하 목록"
+                            : "품목 목록"}
+                      </h4>
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {sourceTotalCount}건
+                      </span>
+                    </div>
+
+                    {sourceLoading ? (
+                      <div className="flex h-40 items-center justify-center">
+                        <Loader2 className="h-5 w-5 animate-spin" />
+                      </div>
+                    ) : modalInboundType === "구매입고" ? (
+                      <SourcePurchaseOrderTable
+                        data={purchaseOrders}
+                        onAdd={addPurchaseOrder}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    ) : modalInboundType === "반품입고" ? (
+                      <SourceShipmentTable
+                        data={shipments}
+                        onAdd={addShipment}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    ) : (
+                      <SourceItemTable
+                        data={items}
+                        onAdd={addItem}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    )}
+                  </div>
+
+                  {/* 페이징 */}
+                  {sourceTotalCount > 0 && (
+                    <div className="flex shrink-0 items-center justify-between border-t bg-muted/30 px-4 py-2">
+                      <div className="flex items-center gap-2">
+                        <span className="text-muted-foreground text-[11px]">표시:</span>
+                        <Input
+                          type="number"
+                          min={1}
+                          max={500}
+                          value={sourcePageSize}
+                          onChange={(e) => {
+                            const v = parseInt(e.target.value, 10);
+                            if (v > 0) {
+                              setSourcePageSize(v);
+                              setSourcePage(1);
+                              loadSourceData(modalInboundType, sourceKeyword || undefined, 1);
+                            }
+                          }}
+                          className="h-7 w-[60px] text-center text-[11px]"
+                        />
+                        <span className="text-muted-foreground text-[11px]">
+                          총 {sourceTotalCount}건
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => { setSourcePage(1); loadSourceData(modalInboundType, sourceKeyword || undefined, 1); }}>
+                          <ChevronsLeft className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => { const p = sourcePage - 1; setSourcePage(p); loadSourceData(modalInboundType, sourceKeyword || undefined, p); }}>
+                          <ChevronLeft className="h-3.5 w-3.5" />
+                        </Button>
+                        <span className="px-2 text-xs font-medium">{sourcePage} / {Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize))}</span>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                          onClick={() => { const p = sourcePage + 1; setSourcePage(p); loadSourceData(modalInboundType, sourceKeyword || undefined, p); }}>
+                          <ChevronRight className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                          onClick={() => { const p = Math.ceil(sourceTotalCount / sourcePageSize); setSourcePage(p); loadSourceData(modalInboundType, sourceKeyword || undefined, p); }}>
+                          <ChevronsRight className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle onPointerDown={(e) => e.stopPropagation()} />
+
+              {/* 우측: 입고 정보 + 선택 품목 */}
+              <ResizablePanel defaultSize={40} minSize={25}>
+                <div className="flex h-full flex-col">
+                  {/* 입고 정보 입력 */}
+                  <div className="space-y-3 border-b bg-muted/30 px-4 py-3">
+                    <h4 className="text-[13px] font-bold text-foreground">입고 정보</h4>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">입고번호</Label>
+                        <Input
+                          value={modalInboundNo}
+                          readOnly
+                          className="bg-muted h-9 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">
+                          입고일 <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                          type="date"
+                          value={modalInboundDate}
+                          onChange={(e) => setModalInboundDate(e.target.value)}
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">창고</Label>
+                        <Select value={modalWarehouse} onValueChange={setModalWarehouse}>
+                          <SelectTrigger className="h-9 text-xs">
+                            <SelectValue placeholder="창고 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {warehouses.map((w) => (
+                              <SelectItem key={w.warehouse_code} value={w.warehouse_code}>
+                                {w.warehouse_name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">위치</Label>
+                        <Input
+                          value={modalLocation}
+                          onChange={(e) => setModalLocation(e.target.value)}
+                          placeholder="위치 입력"
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">검수자</Label>
+                        <Input
+                          value={modalInspector}
+                          onChange={(e) => setModalInspector(e.target.value)}
+                          placeholder="검수자"
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">담당자</Label>
+                        <Input
+                          value={modalManager}
+                          onChange={(e) => setModalManager(e.target.value)}
+                          placeholder="담당자"
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                      <div className="col-span-2">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">메모</Label>
+                        <Input
+                          value={modalMemo}
+                          onChange={(e) => setModalMemo(e.target.value)}
+                          placeholder="메모"
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 선택된 품목 테이블 */}
+                  <div className="flex-1 overflow-auto">
+                    <div className="flex items-center gap-2 border-b bg-muted/50 px-4 py-2.5">
+                      <h4 className="text-[13px] font-bold">입고 처리 품목</h4>
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {selectedItems.length}건
+                      </span>
+                    </div>
+
+                    {selectedItems.length === 0 ? (
+                      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+                        <Inbox className="h-8 w-8 opacity-30" />
+                        <p className="text-xs font-medium">좌측에서 품목을 선택하여 추가해 주세요</p>
+                      </div>
+                    ) : (
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                            <TableHead className="w-[80px] p-2 text-right">
+                              수량
+                            </TableHead>
+                            <TableHead className="w-[80px] p-2 text-right">
+                              단가
+                            </TableHead>
+                            <TableHead className="w-[90px] p-2 text-right">
+                              금액
+                            </TableHead>
+                            <TableHead className="w-[30px] p-2" />
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {selectedItems.map((item, idx) => (
+                            <TableRow key={item.key} className="text-xs">
+                              <TableCell className="p-2 text-center">
+                                {idx + 1}
+                              </TableCell>
+                              <TableCell className="max-w-[180px] p-2">
+                                <div className="flex flex-col">
+                                  <span className="truncate font-medium" title={item.item_name}>
+                                    {item.item_name}
+                                  </span>
+                                  <span className="text-muted-foreground truncate text-[10px]" title={`${item.item_number}${item.spec ? ` | ${item.spec}` : ""}`}>
+                                    {item.item_number}
+                                    {item.spec ? ` | ${item.spec}` : ""}
+                                  </span>
+                                </div>
+                              </TableCell>
+                              <TableCell className="p-2 text-[11px]">
+                                {item.reference_number}
+                              </TableCell>
+                              <TableCell className="p-2 text-right">
+                                <Input
+                                  type="number"
+                                  value={item.inbound_qty || ""}
+                                  onChange={(e) =>
+                                    updateItemQty(
+                                      item.key,
+                                      Number(e.target.value) || 0
+                                    )
+                                  }
+                                  className="h-7 w-[70px] text-right text-xs"
+                                  min={0}
+                                />
+                              </TableCell>
+                              <TableCell className="p-2 text-right">
+                                <Input
+                                  type="number"
+                                  value={item.unit_price || ""}
+                                  onChange={(e) =>
+                                    updateItemPrice(
+                                      item.key,
+                                      Number(e.target.value) || 0
+                                    )
+                                  }
+                                  className="h-7 w-[70px] text-right text-xs"
+                                  min={0}
+                                />
+                              </TableCell>
+                              <TableCell className="p-2 text-right text-[13px] font-semibold">
+                                {item.total_amount.toLocaleString()}
+                              </TableCell>
+                              <TableCell className="p-2 text-center">
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-6 w-6"
+                                  onClick={() => removeItem(item.key)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+
+          </div>
+          <DialogFooter className="shrink-0 border-t px-0 py-0">
+            <div className="flex w-full items-center justify-between px-6 py-2.5">
+              <div className="text-muted-foreground text-xs">
+                {selectedItems.length > 0 ? (
+                  <span className="flex items-center gap-3">
+                    <span className="font-semibold text-foreground">{totalSummary.count}건</span>
+                    <span>수량 합계: <span className="font-medium text-foreground">{totalSummary.qty.toLocaleString()}</span></span>
+                    <span>금액 합계: <span className="font-medium text-foreground">{totalSummary.amount.toLocaleString()}원</span></span>
+                  </span>
+                ) : (
+                  "품목을 추가해 주세요"
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsModalOpen(false)}
+                  className="h-9 text-sm"
+                >
+                  취소
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={saving || selectedItems.length === 0}
+                  className="h-9 text-sm"
+                >
+                  {saving ? (
+                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="mr-1 h-4 w-4" />
+                  )}
+                  저장
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
+
+// --- 소스 데이터 테이블 컴포넌트들 ---
+
+function SourcePurchaseOrderTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: PurchaseOrderSource[];
+  onAdd: (po: PurchaseOrderSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 발주 데이터를 조회해 주세요</p>
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">미입고</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((po, idx) => {
+          const isSelected = selectedKeys.includes(`po-${po.id}`);
+          return (
+            <TableRow
+              key={`${po.source_table || 'po'}-${po.id}-${idx}`}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(po)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">
+                    추가됨
+                  </Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[120px] truncate p-2 font-medium" title={po.purchase_no}>{po.purchase_no}</TableCell>
+              <TableCell className="max-w-[120px] truncate p-2" title={po.supplier_name}>{po.supplier_name}</TableCell>
+              <TableCell className="max-w-[200px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={po.item_name}>{po.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={`${po.item_code}${po.spec ? ` | ${po.spec}` : ""}`}>
+                    {po.item_code}
+                    {po.spec ? ` | ${po.spec}` : ""}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(po.order_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(po.received_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right font-semibold text-primary">
+                {Number(po.remain_qty).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+function SourceShipmentTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: ShipmentSource[];
+  onAdd: (sh: ShipmentSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 출하 데이터를 조회해 주세요</p>
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하일</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하수량</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((sh) => {
+          const isSelected = selectedKeys.includes(`sh-${sh.detail_id}`);
+          return (
+            <TableRow
+              key={sh.detail_id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(sh)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">
+                    추가됨
+                  </Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[130px] truncate p-2 font-medium" title={sh.instruction_no}>{sh.instruction_no}</TableCell>
+              <TableCell className="p-2">
+                {sh.instruction_date
+                  ? new Date(sh.instruction_date).toLocaleDateString("ko-KR")
+                  : "-"}
+              </TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={sh.partner_id}>{sh.partner_id}</TableCell>
+              <TableCell className="max-w-[200px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={sh.item_name}>{sh.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={`${sh.item_code}${sh.spec ? ` | ${sh.spec}` : ""}`}>
+                    {sh.item_code}
+                    {sh.spec ? ` | ${sh.spec}` : ""}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="p-2 text-right font-semibold">
+                {Number(sh.ship_qty).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+function SourceItemTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: ItemSource[];
+  onAdd: (item: ItemSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 품목 데이터를 조회해 주세요</p>
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+          <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((item) => {
+          const isSelected = selectedKeys.includes(`item-${item.id}`);
+          return (
+            <TableRow
+              key={item.id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(item)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">
+                    추가됨
+                  </Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[250px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={item.item_name}>{item.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={item.item_number}>
+                    {item.item_number}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={item.spec || "-"}>{item.spec || "-"}</TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={item.material || "-"}>{item.material || "-"}</TableCell>
+              <TableCell className="p-2">{item.unit || "-"}</TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(item.standard_price).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/logistics/warehouse/page.tsx b/frontend/app/(main)/COMPANY_30/logistics/warehouse/page.tsx
new file mode 100644
index 00000000..96b3d47e
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/logistics/warehouse/page.tsx
@@ -0,0 +1,1608 @@
+"use client";
+
+/**
+ * 창고정보관리 — 하드코딩 페이지 (Type B 마스터-디테일)
+ *
+ * 좌측: 창고 목록 (warehouse_info)
+ * 우측: 선택 창고의 로케이션 목록 (warehouse_location)
+ *
+ * ★ 하위 위치가 있으면 창고 삭제 불가
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Plus,
+  Trash2,
+  Loader2,
+  Download,
+  MapPin,
+  Building2,
+  Settings2,
+  Layers,
+  Info,
+  Eye,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+
+const WAREHOUSE_TABLE = "warehouse_info";
+
+const WAREHOUSE_COLUMNS = [
+  { key: "warehouse_code", label: "창고코드" },
+  { key: "warehouse_name", label: "창고명" },
+  { key: "warehouse_type", label: "유형" },
+  { key: "manager", label: "관리자" },
+  { key: "status", label: "상태" },
+];
+const LOCATION_TABLE = "warehouse_location";
+
+const getStatusVariant = (
+  status: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "사용":
+    case "사용중":
+      return "default";
+    case "미사용":
+      return "secondary";
+    case "폐쇄":
+      return "destructive";
+    default:
+      return "outline";
+  }
+};
+
+const getTypeVariant = (
+  type: string
+): "default" | "secondary" | "outline" => {
+  switch (type) {
+    case "원자재":
+    case "일반":
+      return "default";
+    case "완제품":
+    case "보관":
+      return "secondary";
+    default:
+      return "outline";
+  }
+};
+
+export default function WarehouseManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-warehouse", WAREHOUSE_TABLE, WAREHOUSE_COLUMNS);
+
+  // 좌측: 창고 목록
+  const [warehouses, setWarehouses] = useState<any[]>([]);
+  const [warehouseLoading, setWarehouseLoading] = useState(false);
+  const [warehouseCount, setWarehouseCount] = useState(0);
+  const [selectedWarehouseId, setSelectedWarehouseId] = useState<string | null>(null);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 로케이션 목록
+  const [locations, setLocations] = useState<any[]>([]);
+  const [locationLoading, setLocationLoading] = useState(false);
+  const [locationCheckedIds, setLocationCheckedIds] = useState<string[]>([]);
+
+  // 모달: 창고 등록/수정
+  const [warehouseModalOpen, setWarehouseModalOpen] = useState(false);
+  const [warehouseEditMode, setWarehouseEditMode] = useState(false);
+  const [warehouseForm, setWarehouseForm] = useState<Record<string, any>>({});
+  const [warehouseSaving, setWarehouseSaving] = useState(false);
+
+  // 모달: 위치 등록/수정
+  const [locationModalOpen, setLocationModalOpen] = useState(false);
+  const [locationEditMode, setLocationEditMode] = useState(false);
+  const [locationForm, setLocationForm] = useState<Record<string, any>>({});
+  const [locationSaving, setLocationSaving] = useState(false);
+
+  // 위치코드 자동 채번
+  const [locNumberingRuleId, setLocNumberingRuleId] = useState<string | null>(null);
+  const [locPreviewCode, setLocPreviewCode] = useState<string | null>(null);
+  const [whNumberingRuleId, setWhNumberingRuleId] = useState<string | null>(null);
+  const [whPreviewCode, setWhPreviewCode] = useState<string | null>(null);
+
+  // 모달: 랙 구조 일괄 등록
+  const [rackModalOpen, setRackModalOpen] = useState(false);
+  const [rackFloor, setRackFloor] = useState("");
+  const [rackZone, setRackZone] = useState("");
+  const [rackConditions, setRackConditions] = useState<
+    { id: string; startRow: number; endRow: number; levels: number }[]
+  >([]);
+  const [rackLocationType, setRackLocationType] = useState("");
+  const [rackStatus, setRackStatus] = useState("");
+  const [rackPreview, setRackPreview] = useState<any[]>([]);
+  const [rackSaving, setRackSaving] = useState(false);
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+  const [locationCategoryOptions, setLocationCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+
+      const whOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["warehouse_type", "status"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${WAREHOUSE_TABLE}/${col}/values`
+          );
+          if (res.data?.success) whOpts[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setCategoryOptions(whOpts);
+
+      const locOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["location_type", "status", "floor", "zone"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${LOCATION_TABLE}/${col}/values`
+          );
+          if (res.data?.success) locOpts[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setLocationCategoryOptions(locOpts);
+    };
+    load();
+  }, []);
+
+  // 카테고리 코드→라벨 변환 헬퍼
+  const resolveCategory = useCallback(
+    (
+      optMap: Record<string, { code: string; label: string }[]>,
+      col: string,
+      code: string
+    ) => {
+      if (!code) return "";
+      return optMap[col]?.find((o) => o.code === code)?.label || code;
+    },
+    []
+  );
+
+  // 창고 목록 조회
+  const fetchWarehouses = useCallback(async () => {
+    setWarehouseLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(
+        `/table-management/tables/${WAREHOUSE_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+          autoFilter: true,
+          sort: { columnName: "warehouse_code", order: "asc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const data = raw.map((r: any) => ({
+        ...r,
+        warehouse_type: resolveCategory(categoryOptions, "warehouse_type", r.warehouse_type),
+        status: resolveCategory(categoryOptions, "status", r.status),
+      }));
+      setWarehouses(data);
+      setWarehouseCount(res.data?.data?.total || raw.length);
+    } catch {
+      toast.error("창고 목록을 불러오지 못했어요");
+    } finally {
+      setWarehouseLoading(false);
+    }
+  }, [categoryOptions, resolveCategory, searchFilters]);
+
+  useEffect(() => {
+    fetchWarehouses();
+  }, [fetchWarehouses]);
+
+  // 선택된 창고
+  const selectedWarehouse = warehouses.find((w) => w.id === selectedWarehouseId);
+
+  // 로케이션 조회
+  const fetchLocations = useCallback(async () => {
+    if (!selectedWarehouse?.warehouse_code) {
+      setLocations([]);
+      return;
+    }
+    setLocationLoading(true);
+    try {
+      const res = await apiClient.post(
+        `/table-management/tables/${LOCATION_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: {
+            enabled: true,
+            filters: [
+              {
+                columnName: "warehouse_code",
+                operator: "equals",
+                value: selectedWarehouse.warehouse_code,
+              },
+            ],
+          },
+          autoFilter: true,
+          sort: { columnName: "location_code", order: "asc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const data = raw.map((r: any) => ({
+        ...r,
+        location_type: resolveCategory(locationCategoryOptions, "location_type", r.location_type),
+        status: resolveCategory(locationCategoryOptions, "status", r.status),
+      }));
+      setLocations(data);
+    } catch {
+      toast.error("위치 목록을 불러오지 못했어요");
+    } finally {
+      setLocationLoading(false);
+    }
+  }, [selectedWarehouse?.warehouse_code, locationCategoryOptions, resolveCategory]);
+
+  useEffect(() => {
+    setLocationCheckedIds([]);
+    fetchLocations();
+  }, [fetchLocations]);
+
+  // 체크박스 헬퍼
+  const allLocationChecked =
+    locations.length > 0 && locationCheckedIds.length === locations.length;
+  const someLocationChecked =
+    locationCheckedIds.length > 0 && locationCheckedIds.length < locations.length;
+
+  const toggleAllLocations = (checked: boolean) => {
+    setLocationCheckedIds(checked ? locations.map((l) => l.id) : []);
+  };
+
+  const toggleLocation = (id: string, checked: boolean) => {
+    setLocationCheckedIds((prev) =>
+      checked ? [...prev, id] : prev.filter((i) => i !== id)
+    );
+  };
+
+  // ─── 창고 CRUD ───
+
+  const openWarehouseCreateModal = async () => {
+    setWarehouseEditMode(false);
+    setWarehouseForm({});
+    setWhNumberingRuleId(null);
+    setWhPreviewCode(null);
+    setWarehouseModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/warehouse_info/warehouse_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setWhNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setWhPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openWarehouseEditModal = (row: any) => {
+    setWarehouseEditMode(true);
+    setWarehouseForm({ ...row });
+    setWarehouseModalOpen(true);
+  };
+
+  const handleWarehouseSave = async () => {
+    if (!whNumberingRuleId && !warehouseForm.warehouse_code?.trim()) {
+      toast.error("창고코드를 입력해주세요");
+      return;
+    }
+    if (!warehouseForm.warehouse_name?.trim()) {
+      toast.error("창고명을 입력해주세요");
+      return;
+    }
+    setWarehouseSaving(true);
+    try {
+      let finalWarehouseCode = warehouseForm.warehouse_code?.trim() || "";
+      if (!warehouseEditMode && whNumberingRuleId) {
+        const allocRes = await allocateNumberingCode(whNumberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalWarehouseCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setWarehouseSaving(false);
+          return;
+        }
+      }
+      const fields = {
+        warehouse_code: finalWarehouseCode,
+        warehouse_name: warehouseForm.warehouse_name?.trim(),
+        warehouse_type: warehouseForm.warehouse_type || "",
+        manager: warehouseForm.manager || "",
+        address: warehouseForm.address || "",
+        status: warehouseForm.status || "",
+        description: warehouseForm.description || "",
+      };
+
+      // 신규 등록 시 창고코드 중복 체크
+      if (!warehouseEditMode) {
+        const dup = warehouses.find(w => w.warehouse_code === fields.warehouse_code);
+        if (dup) {
+          toast.error(`창고코드 "${fields.warehouse_code}"가 이미 존재해요`);
+          setWarehouseSaving(false);
+          return;
+        }
+      }
+
+      if (warehouseEditMode && warehouseForm.id) {
+        await apiClient.put(
+          `/table-management/tables/${WAREHOUSE_TABLE}/edit`,
+          {
+            originalData: { id: warehouseForm.id },
+            updatedData: fields,
+          }
+        );
+        toast.success("창고 정보가 수정되었어요");
+      } else {
+        await apiClient.post(
+          `/table-management/tables/${WAREHOUSE_TABLE}/add`,
+          { id: crypto.randomUUID(), ...fields }
+        );
+        toast.success("창고가 등록되었어요");
+      }
+      setWarehouseModalOpen(false);
+      fetchWarehouses();
+    } catch {
+      toast.error(warehouseEditMode ? "창고 수정에 실패했어요" : "창고 등록에 실패했어요");
+    } finally {
+      setWarehouseSaving(false);
+    }
+  };
+
+  const handleWarehouseDelete = async () => {
+    if (!selectedWarehouse) return;
+    if (locations.length > 0) {
+      toast.error("하위 위치가 있어 삭제할 수 없어요. 위치를 먼저 삭제해주세요.");
+      return;
+    }
+    const ok = await confirm(
+      `"${selectedWarehouse.warehouse_name}" 창고를 삭제할까요?`
+    );
+    if (!ok) return;
+    try {
+      await apiClient.delete(
+        `/table-management/tables/${WAREHOUSE_TABLE}/delete`,
+        { data: [{ id: selectedWarehouse.id }] }
+      );
+      toast.success("창고가 삭제되었어요");
+      setSelectedWarehouseId(null);
+      fetchWarehouses();
+    } catch {
+      toast.error("창고 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 위치 CRUD ───
+
+  const openLocationCreateModal = async () => {
+    setLocationEditMode(false);
+    setLocationForm({ warehouse_code: selectedWarehouse?.warehouse_code || "" });
+    setLocNumberingRuleId(null);
+    setLocPreviewCode(null);
+    setLocationModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/warehouse_location/location_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setLocNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setLocPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openLocationEditModal = (row: any) => {
+    setLocationEditMode(true);
+    setLocationForm({ ...row });
+    setLocationModalOpen(true);
+  };
+
+  const handleLocationSave = async () => {
+    if (!locNumberingRuleId && !locationForm.location_code?.trim()) {
+      toast.error("위치코드를 입력해주세요");
+      return;
+    }
+    if (!locationForm.location_name?.trim()) {
+      toast.error("위치명을 입력해주세요");
+      return;
+    }
+    setLocationSaving(true);
+    try {
+      let finalLocationCode = locationForm.location_code?.trim() || "";
+      if (!locationEditMode && locNumberingRuleId) {
+        const allocRes = await allocateNumberingCode(locNumberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalLocationCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setLocationSaving(false);
+          return;
+        }
+      }
+
+      const fields = {
+        warehouse_code: locationForm.warehouse_code || selectedWarehouse?.warehouse_code || "",
+        location_code: finalLocationCode,
+        location_name: locationForm.location_name?.trim(),
+        floor: locationForm.floor || "",
+        zone: locationForm.zone || "",
+        row_num: locationForm.row_num || "",
+        level_num: locationForm.level_num || "",
+        location_type: locationForm.location_type || "",
+        status: locationForm.status || "",
+      };
+
+      if (locationEditMode && locationForm.id) {
+        await apiClient.put(
+          `/table-management/tables/${LOCATION_TABLE}/edit`,
+          {
+            originalData: { id: locationForm.id },
+            updatedData: fields,
+          }
+        );
+        toast.success("위치 정보가 수정되었어요");
+      } else {
+        await apiClient.post(
+          `/table-management/tables/${LOCATION_TABLE}/add`,
+          { id: crypto.randomUUID(), ...fields }
+        );
+        toast.success("위치가 등록되었어요");
+      }
+      setLocationModalOpen(false);
+      fetchLocations();
+    } catch {
+      toast.error(locationEditMode ? "위치 수정에 실패했어요" : "위치 등록에 실패했어요");
+    } finally {
+      setLocationSaving(false);
+    }
+  };
+
+  const handleLocationDelete = async () => {
+    if (locationCheckedIds.length === 0) {
+      toast.error("삭제할 위치를 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`${locationCheckedIds.length}건의 위치를 삭제할까요?`);
+    if (!ok) return;
+    try {
+      for (const id of locationCheckedIds) {
+        await apiClient.delete(
+          `/table-management/tables/${LOCATION_TABLE}/delete`,
+          { data: [{ id }] }
+        );
+      }
+      toast.success(`${locationCheckedIds.length}건의 위치가 삭제되었어요`);
+      setLocationCheckedIds([]);
+      fetchLocations();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "위치 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 랙 구조 일괄 등록 ───
+
+  const openRackModal = () => {
+    setRackFloor("");
+    setRackZone("");
+    setRackConditions([]);
+    setRackLocationType("");
+    setRackStatus("");
+    setRackPreview([]);
+    setRackSaving(false);
+    setRackModalOpen(true);
+  };
+
+  const addRackCondition = () => {
+    const lastEnd = rackConditions.length > 0
+      ? rackConditions[rackConditions.length - 1].endRow
+      : 0;
+    setRackConditions((prev) => [
+      ...prev,
+      { id: crypto.randomUUID(), startRow: lastEnd + 1, endRow: lastEnd + 1, levels: 1 },
+    ]);
+  };
+
+  const updateRackCondition = (id: string, field: string, value: number) => {
+    setRackConditions((prev) =>
+      prev.map((c) => (c.id === id ? { ...c, [field]: value } : c))
+    );
+  };
+
+  const removeRackCondition = (id: string) => {
+    setRackConditions((prev) => prev.filter((c) => c.id !== id));
+  };
+
+  const generateRackPreview = () => {
+    if (!rackFloor.trim() || !rackZone.trim()) {
+      toast.error("층과 구역을 입력해주세요");
+      return;
+    }
+    if (rackConditions.length === 0) {
+      toast.error("조건을 1개 이상 추가해주세요");
+      return;
+    }
+    // 조건 유효성 검사
+    for (const cond of rackConditions) {
+      if (cond.startRow < 1 || cond.endRow < 1 || cond.levels < 1) {
+        toast.error("열 범위와 단 수는 1 이상이어야 합니다");
+        return;
+      }
+      if (cond.endRow < cond.startRow) {
+        toast.error("끝 열은 시작 열보다 크거나 같아야 합니다");
+        return;
+      }
+    }
+
+    const whCode = selectedWarehouse?.warehouse_code || "";
+    // 카테고리 코드→라벨 변환 (셀렉트에서 코드가 저장되므로)
+    const floorOpts = locationCategoryOptions["floor"] || [];
+    const zoneOpts = locationCategoryOptions["zone"] || [];
+    const floorLabel = floorOpts.find(o => o.code === rackFloor)?.label || rackFloor.trim();
+    const zoneLabel = zoneOpts.find(o => o.code === rackZone)?.label || rackZone.trim();
+    const floorCode = floorLabel.replace(/층$/, "");
+    const zoneCode = zoneLabel.replace(/구역$/, "");
+
+    // 기존 위치코드 Set (중복 체크용)
+    const existingCodes = new Set(locations.map((l: any) => l.location_code));
+    const seen = new Set<string>();
+    const items: any[] = [];
+    const duplicates: string[] = [];
+
+    for (const cond of rackConditions) {
+      for (let row = cond.startRow; row <= cond.endRow; row++) {
+        for (let level = 1; level <= cond.levels; level++) {
+          const rowStr = String(row).padStart(2, "0");
+          const locationCode = `${whCode}-${floorCode}${zoneCode}-${rowStr}-${level}`;
+          // 미리보기 내부 중복 제거
+          if (seen.has(locationCode)) continue;
+          seen.add(locationCode);
+          // 기존 DB 데이터와 중복 체크
+          if (existingCodes.has(locationCode)) {
+            duplicates.push(locationCode);
+            continue;
+          }
+          const locationName = `${zoneCode}구역-${rowStr}열-${level}단`;
+          items.push({
+            location_code: locationCode,
+            location_name: locationName,
+            warehouse_code: whCode,
+            floor: floorLabel,
+            zone: zoneLabel,
+            row_num: String(row),
+            level_num: String(level),
+            location_type: rackLocationType,
+            status: rackStatus,
+          });
+        }
+      }
+    }
+    if (duplicates.length > 0) {
+      toast.error(`이미 등록된 위치 ${duplicates.length}건이 제외되었어요 (예: ${duplicates.slice(0, 3).join(", ")})`);
+    }
+    setRackPreview(items);
+  };
+
+  const handleRackBulkSave = async () => {
+    if (rackPreview.length === 0) {
+      toast.error("미리보기를 먼저 생성해주세요");
+      return;
+    }
+    setRackSaving(true);
+    try {
+      let successCount = 0;
+      for (const item of rackPreview) {
+        await apiClient.post(
+          `/table-management/tables/${LOCATION_TABLE}/add`,
+          { id: crypto.randomUUID(), ...item }
+        );
+        successCount++;
+      }
+      toast.success(`${successCount}개의 위치가 등록되었어요`);
+      setRackModalOpen(false);
+      fetchLocations();
+    } catch (err) {
+      toast.error("일괄 등록 중 오류가 발생했어요");
+    } finally {
+      setRackSaving(false);
+    }
+  };
+
+  // 랙 조건별 통계
+  const getRackConditionCount = (cond: { startRow: number; endRow: number; levels: number }) => {
+    if (cond.endRow < cond.startRow || cond.startRow < 1 || cond.levels < 1) return 0;
+    return (cond.endRow - cond.startRow + 1) * cond.levels;
+  };
+
+  // 랙 미리보기 통계
+  const rackStats = {
+    totalLocations: rackPreview.length,
+    totalRows: rackConditions.reduce((acc, c) => {
+      if (c.endRow >= c.startRow && c.startRow >= 1) return acc + (c.endRow - c.startRow + 1);
+      return acc;
+    }, 0),
+    maxLevels: rackConditions.reduce((acc, c) => Math.max(acc, c.levels || 0), 0),
+  };
+
+  // EDataTable 컬럼 정의
+  const warehouseColumns: EDataTableColumn[] = ts.visibleColumns.map((col) => {
+    const base: EDataTableColumn = { key: col.key, label: col.label };
+    if (col.key === "warehouse_type") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getTypeVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    if (col.key === "status") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getStatusVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    return base;
+  });
+
+  // 엑셀 내보내기
+  const handleExcelExport = () => {
+    if (warehouses.length === 0) {
+      toast.error("내보낼 데이터가 없어요");
+      return;
+    }
+    exportToExcel(
+      warehouses.map((r) => ({
+        창고코드: r.warehouse_code,
+        창고명: r.warehouse_name,
+        유형: r.warehouse_type,
+        관리자: r.manager,
+        상태: r.status,
+      })),
+      "창고정보"
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={WAREHOUSE_TABLE}
+        filterId="c16-warehouse"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={warehouses.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1 text-xs"
+              onClick={handleExcelExport}
+            >
+              <Download className="h-3.5 w-3.5" />
+              엑셀
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 패널 */}
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="flex-1 rounded-lg border bg-card"
+      >
+        {/* 좌측: 창고 목록 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+              <div className="flex items-center gap-2">
+                <span className="text-[13px] font-bold">창고 목록</span>
+                <Badge variant="default" className="rounded-full text-[11px]">
+                  {warehouses.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Button
+                  size="sm"
+                  className="h-7 gap-1 text-xs"
+                  onClick={openWarehouseCreateModal}
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                  등록
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-7 gap-1 text-xs text-destructive hover:text-destructive"
+                  onClick={handleWarehouseDelete}
+                  disabled={!selectedWarehouse}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+
+            <EDataTable
+              columns={warehouseColumns}
+              data={ts.groupData(warehouses)}
+              rowKey={(row) => row.id}
+              loading={warehouseLoading}
+              emptyMessage="등록된 창고가 없어요"
+              selectedId={selectedWarehouseId}
+              onSelect={(id) => setSelectedWarehouseId(id)}
+              onRowDoubleClick={(row) => openWarehouseEditModal(row)}
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+              columnOrderKey="c16-warehouse"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 로케이션 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex flex-col h-full">
+            {!selectedWarehouse ? (
+              <div className="flex flex-col items-center justify-center flex-1 m-5 border-2 border-dashed rounded-lg border-border">
+                <Building2 className="h-12 w-12 text-muted-foreground/40 mb-4" />
+                <p className="text-sm font-semibold text-muted-foreground">
+                  창고를 선택해주세요
+                </p>
+                <p className="text-xs text-muted-foreground/70 mt-1">
+                  좌측에서 창고를 선택하면 위치 정보가 표시돼요
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                  <div className="flex items-center gap-2">
+                    <MapPin className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-[13px] font-bold">
+                      {selectedWarehouse.warehouse_name}
+                    </span>
+                    <Badge
+                      variant="outline"
+                      className="rounded-full text-[11px] font-mono"
+                    >
+                      {selectedWarehouse.warehouse_code}
+                    </Badge>
+                    <Badge variant="secondary" className="rounded-full text-[10px]">
+                      {locations.length}개 위치
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={openRackModal}
+                    >
+                      <Layers className="h-3.5 w-3.5" />
+                      랙 구조 등록
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs text-destructive hover:text-destructive"
+                      onClick={handleLocationDelete}
+                      disabled={locationCheckedIds.length === 0}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                      삭제
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 로케이션 테이블 */}
+                <div className="flex-1 overflow-auto">
+                  {locationLoading ? (
+                    <div className="flex items-center justify-center h-32">
+                      <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : locations.length === 0 ? (
+                    <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">
+                      등록된 위치가 없어요
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="w-10 text-center">
+                            <Checkbox
+                              checked={
+                                someLocationChecked
+                                  ? "indeterminate"
+                                  : allLocationChecked
+                              }
+                              onCheckedChange={(v) =>
+                                toggleAllLocations(v === true)
+                              }
+                              aria-label="전체 선택"
+                            />
+                          </TableHead>
+                          <TableHead className="w-8 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">위치코드</TableHead>
+                          <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">위치명</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">층</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">구역</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">열</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {locations.map((loc, idx) => (
+                          <TableRow
+                            key={loc.id}
+                            className={cn(
+                              "cursor-pointer text-xs",
+                              locationCheckedIds.includes(loc.id) && "bg-primary/5"
+                            )}
+                            onDoubleClick={() => openLocationEditModal(loc)}
+                          >
+                            <TableCell className="text-center">
+                              <Checkbox
+                                checked={locationCheckedIds.includes(loc.id)}
+                                onCheckedChange={(v) =>
+                                  toggleLocation(loc.id, v === true)
+                                }
+                                aria-label="행 선택"
+                              />
+                            </TableCell>
+                            <TableCell className="text-center text-muted-foreground">
+                              {idx + 1}
+                            </TableCell>
+                            <TableCell className="font-mono truncate max-w-[110px]">
+                              {loc.location_code}
+                            </TableCell>
+                            <TableCell className="truncate max-w-[120px]">
+                              {loc.location_name}
+                            </TableCell>
+                            <TableCell className="text-center">{loc.floor}</TableCell>
+                            <TableCell>{loc.zone}</TableCell>
+                            <TableCell className="text-center">{loc.row_num}</TableCell>
+                            <TableCell className="text-center">{loc.level_num}</TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getTypeVariant(loc.location_type)}
+                                className="text-[10px]"
+                              >
+                                {loc.location_type}
+                              </Badge>
+                            </TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getStatusVariant(loc.status)}
+                                className="text-[10px]"
+                              >
+                                {loc.status}
+                              </Badge>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 창고 등록/수정 Dialog */}
+      <Dialog open={warehouseModalOpen} onOpenChange={setWarehouseModalOpen}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle>
+              {warehouseEditMode ? "창고 수정" : "창고 등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {warehouseEditMode
+                ? "창고 정보를 수정해주세요"
+                : "새로운 창고를 등록해주세요"}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid grid-cols-2 gap-4 py-2">
+            {/* 창고코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                창고코드 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={warehouseEditMode ? (warehouseForm.warehouse_code || "") : (whPreviewCode || "")}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_code: e.target.value }))
+                }
+                placeholder={warehouseEditMode ? "" : (whNumberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                disabled={warehouseEditMode}
+                readOnly={!warehouseEditMode && !!whNumberingRuleId}
+              />
+            </div>
+            {/* 창고명 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                창고명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={warehouseForm.warehouse_name || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_name: e.target.value }))
+                }
+                placeholder="창고명을 입력해주세요"
+              />
+            </div>
+            {/* 유형 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">유형</Label>
+              <Select
+                value={warehouseForm.warehouse_type || ""}
+                onValueChange={(v) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["warehouse_type"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">관리자</Label>
+              <Input
+                value={warehouseForm.manager || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, manager: e.target.value }))
+                }
+                placeholder="관리자를 입력해주세요"
+              />
+            </div>
+            {/* 상태 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+              <Select
+                value={warehouseForm.status || ""}
+                onValueChange={(v) =>
+                  setWarehouseForm((prev) => ({ ...prev, status: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["status"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 주소 (전체 너비) */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">주소</Label>
+              <Input
+                value={warehouseForm.address || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, address: e.target.value }))
+                }
+                placeholder="주소를 입력해주세요"
+              />
+            </div>
+            {/* 비고 (전체 너비) */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">비고</Label>
+              <Input
+                value={warehouseForm.description || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, description: e.target.value }))
+                }
+                placeholder="비고를 입력해주세요"
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setWarehouseModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleWarehouseSave} disabled={warehouseSaving}>
+              {warehouseSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              {warehouseEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 위치 등록/수정 Dialog */}
+      <Dialog open={locationModalOpen} onOpenChange={setLocationModalOpen}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle>
+              {locationEditMode ? "위치 수정" : "위치 등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {locationEditMode
+                ? "위치 정보를 수정해주세요"
+                : `${selectedWarehouse?.warehouse_name || ""} 창고에 새 위치를 등록해주세요`}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid grid-cols-2 gap-4 py-2">
+            {/* 창고코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">창고코드</Label>
+              <Input value={locationForm.warehouse_code || ""} disabled />
+            </div>
+            {/* 위치코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                위치코드 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={locationEditMode ? (locationForm.location_code || "") : (locPreviewCode || "")}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, location_code: e.target.value }))
+                }
+                placeholder={locationEditMode ? "" : (locNumberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                disabled={locationEditMode}
+                readOnly={!locationEditMode && !!locNumberingRuleId}
+              />
+            </div>
+            {/* 위치명 */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                위치명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={locationForm.location_name || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, location_name: e.target.value }))
+                }
+                placeholder="위치명을 입력해주세요"
+              />
+            </div>
+            {/* 층 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">층</Label>
+              <Input
+                value={locationForm.floor || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, floor: e.target.value }))
+                }
+                placeholder="층을 입력해주세요"
+              />
+            </div>
+            {/* 구역 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">구역</Label>
+              <Input
+                value={locationForm.zone || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, zone: e.target.value }))
+                }
+                placeholder="구역을 입력해주세요"
+              />
+            </div>
+            {/* 열 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">열</Label>
+              <Input
+                value={locationForm.row_num || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, row_num: e.target.value }))
+                }
+                placeholder="열을 입력해주세요"
+              />
+            </div>
+            {/* 단 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">단</Label>
+              <Input
+                value={locationForm.level_num || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, level_num: e.target.value }))
+                }
+                placeholder="단을 입력해주세요"
+              />
+            </div>
+            {/* 위치유형 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">위치유형</Label>
+              <Select
+                value={locationForm.location_type || ""}
+                onValueChange={(v) =>
+                  setLocationForm((prev) => ({ ...prev, location_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="위치유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(locationCategoryOptions["location_type"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 상태 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+              <Select
+                value={locationForm.status || ""}
+                onValueChange={(v) =>
+                  setLocationForm((prev) => ({ ...prev, status: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(locationCategoryOptions["status"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setLocationModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleLocationSave} disabled={locationSaving}>
+              {locationSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              {locationEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 랙 구조 일괄 등록 Dialog */}
+      <Dialog open={rackModalOpen} onOpenChange={setRackModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-3xl p-0 !gap-0" style={{ maxHeight: "90vh", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+          <div className="px-6 pt-6 pb-3 shrink-0">
+            <DialogTitle className="flex items-center gap-2">
+              <Layers className="h-5 w-5" />
+              랙 구조 일괄 등록
+            </DialogTitle>
+            <DialogDescription className="mt-1">
+              {selectedWarehouse?.warehouse_name} ({selectedWarehouse?.warehouse_code}) 창고에 랙 구조를 일괄 등록합니다
+            </DialogDescription>
+          </div>
+
+          <div className="flex-1 overflow-y-auto min-h-0">
+            <div className="space-y-6 px-6 py-4">
+              {/* 기본 정보 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  📍 기본 정보
+                </h3>
+                <div className="grid grid-cols-3 gap-4">
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      창고 <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      value={`${selectedWarehouse?.warehouse_name || ""} (${selectedWarehouse?.warehouse_code || ""})`}
+                      disabled
+                    />
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      층 <span className="text-destructive">*</span>
+                    </Label>
+                    {(locationCategoryOptions["floor"] || []).length > 0 ? (
+                      <Select value={rackFloor} onValueChange={setRackFloor}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="층 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(locationCategoryOptions["floor"] || []).map((o) => (
+                            <SelectItem key={o.code} value={o.code}>
+                              {o.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={rackFloor}
+                        onChange={(e) => setRackFloor(e.target.value)}
+                        placeholder="예: B1, 1F, 2F"
+                      />
+                    )}
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      구역 <span className="text-destructive">*</span>
+                    </Label>
+                    {(locationCategoryOptions["zone"] || []).length > 0 ? (
+                      <Select value={rackZone} onValueChange={setRackZone}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="구역 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(locationCategoryOptions["zone"] || []).map((o) => (
+                            <SelectItem key={o.code} value={o.code}>
+                              {o.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={rackZone}
+                        onChange={(e) => setRackZone(e.target.value)}
+                        placeholder="예: A, B, C"
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* 랙 라인 구조 설정 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  📊 랙 라인 구조 설정
+                </h3>
+
+                {/* 안내 박스 */}
+                <div className="rounded-lg bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 p-3 mb-3">
+                  <div className="flex items-start gap-2">
+                    <Info className="h-4 w-4 text-blue-600 dark:text-blue-400 mt-0.5 shrink-0" />
+                    <div className="text-xs text-blue-700 dark:text-blue-300 space-y-0.5">
+                      <p>1. 조건 추가 버튼을 클릭하여 랙 라인 조건을 생성하세요</p>
+                      <p>2. 각 조건마다 열 범위와 단 수를 입력하세요</p>
+                      <p>3. 예시: 조건1(1~3열, 3단), 조건2(4~6열, 5단)</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-xs text-muted-foreground">
+                    {rackConditions.length}개 조건
+                  </span>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={addRackCondition}
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    조건 추가
+                  </Button>
+                </div>
+
+                {rackConditions.length === 0 ? (
+                  <div className="flex flex-col items-center justify-center py-8 border-2 border-dashed rounded-lg border-border">
+                    <Layers className="h-8 w-8 text-muted-foreground/40 mb-2" />
+                    <p className="text-sm text-muted-foreground mb-2">
+                      조건을 추가하여 랙 구조를 설정하세요
+                    </p>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={addRackCondition}
+                    >
+                      <Plus className="h-3.5 w-3.5" />
+                      첫 번째 조건 추가
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {rackConditions.map((cond, idx) => (
+                      <div
+                        key={cond.id}
+                        className="flex items-center gap-3 rounded-lg border p-3 bg-card"
+                      >
+                        <span className="text-xs font-bold text-muted-foreground w-10 shrink-0">
+                          조건{idx + 1}
+                        </span>
+                        <div className="flex items-center gap-1.5 flex-1">
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-20 text-center text-xs"
+                            value={cond.startRow || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "startRow", Number(e.target.value) || 0)
+                            }
+                            placeholder="시작"
+                          />
+                          <span className="text-xs text-muted-foreground">~</span>
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-20 text-center text-xs"
+                            value={cond.endRow || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "endRow", Number(e.target.value) || 0)
+                            }
+                            placeholder="끝"
+                          />
+                          <span className="text-xs text-muted-foreground">열,</span>
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-16 text-center text-xs"
+                            value={cond.levels || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "levels", Number(e.target.value) || 0)
+                            }
+                            placeholder="단"
+                          />
+                          <span className="text-xs text-muted-foreground">단</span>
+                        </div>
+                        {getRackConditionCount(cond) > 0 && (
+                          <Badge variant="secondary" className="text-[10px] shrink-0">
+                            {cond.startRow}열 ~ {cond.endRow}열 × {cond.levels}단 = {getRackConditionCount(cond)}개
+                          </Badge>
+                        )}
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-7 w-7 p-0 text-destructive hover:text-destructive shrink-0"
+                          onClick={() => removeRackCondition(cond.id)}
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* 공통 설정 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  ⚙️ 공통 설정
+                </h3>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      위치 유형
+                    </Label>
+                    <Select value={rackLocationType} onValueChange={setRackLocationType}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="위치유형 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(locationCategoryOptions["location_type"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>
+                            {o.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      사용 여부
+                    </Label>
+                    <Select value={rackStatus} onValueChange={setRackStatus}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="상태 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(locationCategoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>
+                            {o.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+
+              {/* 등록 미리보기 */}
+              <div>
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-sm font-bold flex items-center gap-1.5">
+                    👁️ 등록 미리보기
+                  </h3>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={generateRackPreview}
+                  >
+                    <Eye className="h-3.5 w-3.5" />
+                    미리보기 생성
+                  </Button>
+                </div>
+
+                {rackPreview.length > 0 && (
+                  <>
+                    {/* 통계 카드 */}
+                    <div className="grid grid-cols-3 gap-3 mb-3">
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">총 위치</p>
+                        <p className="text-lg font-bold">{rackStats.totalLocations}개</p>
+                      </div>
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">열 수</p>
+                        <p className="text-lg font-bold">{rackStats.totalRows}개</p>
+                      </div>
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">최대 단</p>
+                        <p className="text-lg font-bold">{rackStats.maxLevels}</p>
+                      </div>
+                    </div>
+
+                    {/* 미리보기 테이블 */}
+                    <div className="rounded-lg border overflow-hidden max-h-[300px] overflow-y-auto">
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-10 text-center text-[11px] font-bold text-muted-foreground">No</TableHead>
+                            <TableHead className="text-[11px] font-bold text-muted-foreground">위치코드</TableHead>
+                            <TableHead className="text-[11px] font-bold text-muted-foreground">위치명</TableHead>
+                            <TableHead className="w-14 text-center text-[11px] font-bold text-muted-foreground">층</TableHead>
+                            <TableHead className="w-14 text-center text-[11px] font-bold text-muted-foreground">구역</TableHead>
+                            <TableHead className="w-12 text-center text-[11px] font-bold text-muted-foreground">열</TableHead>
+                            <TableHead className="w-12 text-center text-[11px] font-bold text-muted-foreground">단</TableHead>
+                            <TableHead className="w-16 text-[11px] font-bold text-muted-foreground">유형</TableHead>
+                            <TableHead className="w-16 text-[11px] font-bold text-muted-foreground">비고</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {rackPreview.map((item, idx) => (
+                            <TableRow key={idx} className="text-xs">
+                              <TableCell className="text-center text-muted-foreground">
+                                {idx + 1}
+                              </TableCell>
+                              <TableCell className="font-mono">{item.location_code}</TableCell>
+                              <TableCell>{item.location_name}</TableCell>
+                              <TableCell className="text-center">{item.floor}</TableCell>
+                              <TableCell className="text-center">{item.zone}</TableCell>
+                              <TableCell className="text-center">{item.row_num}</TableCell>
+                              <TableCell className="text-center">{item.level_num}</TableCell>
+                              <TableCell>
+                                {resolveCategory(locationCategoryOptions, "location_type", item.location_type) || "-"}
+                              </TableCell>
+                              <TableCell>-</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </>
+                )}
+
+                {rackPreview.length === 0 && (
+                  <div className="flex flex-col items-center justify-center py-6 border-2 border-dashed rounded-lg border-border text-sm text-muted-foreground">
+                    위의 설정을 완료한 뒤 미리보기 생성 버튼을 클릭하세요
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2 px-6 py-4 border-t shrink-0 bg-background">
+            <Button variant="outline" onClick={() => setRackModalOpen(false)}>
+              취소
+            </Button>
+            <Button
+              onClick={handleRackBulkSave}
+              disabled={rackSaving || rackPreview.length === 0}
+            >
+              {rackSaving && <Loader2 className="h-4 w-4 animate-spin mr-1" />}
+              일괄 등록 ({rackPreview.length}건)
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/master-data/company/page.tsx b/frontend/app/(main)/COMPANY_30/master-data/company/page.tsx
new file mode 100644
index 00000000..9d7f2dea
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/master-data/company/page.tsx
@@ -0,0 +1,759 @@
+"use client";
+
+/**
+ * 회사관리 — Type D 탭 멀티뷰 (2탭)
+ *
+ * Tab 1: 회사정보 (company_mng 단일 레코드 폼)
+ * Tab 2: 부서관리 (dept_info 트리 + user_info 목록)
+ */
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Building2, Users, Pencil, Save, Loader2, Plus, Trash2,
+  Upload, X, Image as ImageIcon, ChevronRight, FolderOpen, Folder,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import * as departmentAPI from "@/lib/api/department";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { formatField, validateField, validateForm } from "@/lib/utils/validation";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const COMPANY_TABLE = "company_mng";
+const DEPT_TABLE = "dept_info";
+const USER_TABLE = "user_info";
+
+/* ── 트리 노드 타입 ── */
+interface DeptNode {
+  dept_code: string;
+  dept_name: string;
+  parent_dept_code: string | null;
+  status?: string;
+  children: DeptNode[];
+}
+
+export default function CompanyPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  /* ===================== Tab 1: 회사정보 ===================== */
+  const [companyData, setCompanyData] = useState<Record<string, any>>({});
+  const [companyForm, setCompanyForm] = useState<Record<string, any>>({});
+  const [companyLoading, setCompanyLoading] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  // 이미지 업로드 refs
+  const imageRef = useRef<HTMLInputElement>(null);
+  const logoRef = useRef<HTMLInputElement>(null);
+  const sealRef = useRef<HTMLInputElement>(null);
+
+  // 이미지 미리보기
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [logoPreview, setLogoPreview] = useState<string | null>(null);
+  const [sealPreview, setSealPreview] = useState<string | null>(null);
+
+  const fetchCompany = useCallback(async () => {
+    setCompanyLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${COMPANY_TABLE}/data`, {
+        page: 1, size: 1, autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      if (rows.length > 0) {
+        setCompanyData(rows[0]);
+        setCompanyForm(rows[0]);
+        if (rows[0].company_image) setImagePreview(rows[0].company_image);
+        if (rows[0].company_logo) setLogoPreview(rows[0].company_logo);
+        if (rows[0].company_seal) setSealPreview(rows[0].company_seal);
+      }
+    } catch {
+      toast.error("회사 정보를 불러오는데 실패했어요.");
+    } finally {
+      setCompanyLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchCompany(); }, [fetchCompany]);
+
+  const handleImageUpload = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    field: string,
+    setPreview: React.Dispatch<React.SetStateAction<string | null>>,
+  ) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result as string;
+      setPreview(result);
+      setCompanyForm((prev) => ({ ...prev, [field]: result }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleCompanySave = async () => {
+    if (!companyForm.company_name) {
+      toast.error("회사명은 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_at, updated_at, writer, created_date, updated_date, regdate, company_code, ...updatedData } = companyForm;
+
+      if (companyData.company_code) {
+        await apiClient.put(`/table-management/tables/${COMPANY_TABLE}/edit`, {
+          originalData: { company_code: companyData.company_code },
+          updatedData,
+        });
+      } else {
+        await apiClient.post(`/table-management/tables/${COMPANY_TABLE}/add`, { company_code, ...updatedData });
+      }
+      toast.success("회사 정보가 저장되었어요.");
+      setEditMode(false);
+      fetchCompany();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const cancelEdit = () => {
+    setCompanyForm(companyData);
+    setImagePreview(companyData.company_image || null);
+    setLogoPreview(companyData.company_logo || null);
+    setSealPreview(companyData.company_seal || null);
+    setEditMode(false);
+  };
+
+  /* ===================== Tab 2: 부서관리 ===================== */
+  const [depts, setDepts] = useState<any[]>([]);
+  const [deptTree, setDeptTree] = useState<DeptNode[]>([]);
+  const [deptLoading, setDeptLoading] = useState(false);
+  const [selectedDeptCode, setSelectedDeptCode] = useState<string | null>(null);
+  const [expandedDepts, setExpandedDepts] = useState<Set<string>>(new Set());
+
+  // 사원
+  const [members, setMembers] = useState<any[]>([]);
+  const [memberLoading, setMemberLoading] = useState(false);
+
+  // 부서 모달
+  const [deptModalOpen, setDeptModalOpen] = useState(false);
+  const [deptEditMode, setDeptEditMode] = useState(false);
+  const [deptForm, setDeptForm] = useState<Record<string, any>>({});
+  const [deptSaving, setDeptSaving] = useState(false);
+
+  // 채번
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 사원 모달
+  const [userModalOpen, setUserModalOpen] = useState(false);
+  const [userEditMode, setUserEditMode] = useState(false);
+  const [userForm, setUserForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+
+  // 트리 구성
+  const buildTree = (flatDepts: any[]): DeptNode[] => {
+    const map: Record<string, DeptNode> = {};
+    const roots: DeptNode[] = [];
+    flatDepts.forEach((d) => {
+      map[d.dept_code] = { ...d, children: [] };
+    });
+    flatDepts.forEach((d) => {
+      const node = map[d.dept_code];
+      if (d.parent_dept_code && map[d.parent_dept_code]) {
+        map[d.parent_dept_code].children.push(node);
+      } else {
+        roots.push(node);
+      }
+    });
+    return roots;
+  };
+
+  const fetchDepts = useCallback(async () => {
+    setDeptLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DEPT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setDepts(raw);
+      setDeptTree(buildTree(raw));
+      // 전부 펼치기
+      setExpandedDepts(new Set(raw.map((d: any) => d.dept_code)));
+    } catch {
+      toast.error("부서 목록을 불러오는데 실패했어요.");
+    } finally {
+      setDeptLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchDepts(); }, [fetchDepts]);
+
+  const selectedDept = depts.find((d) => d.dept_code === selectedDeptCode);
+
+  // 사원 조회
+  const fetchMembers = useCallback(async () => {
+    if (!selectedDeptCode) { setMembers([]); return; }
+    setMemberLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${USER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "dept_code", operator: "equals", value: selectedDeptCode }] },
+        autoFilter: true,
+      });
+      setMembers(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setMembers([]); } finally { setMemberLoading(false); }
+  }, [selectedDeptCode]);
+
+  useEffect(() => { fetchMembers(); }, [fetchMembers]);
+
+  // 트리 토글
+  const toggleExpand = (code: string) => {
+    setExpandedDepts((prev) => {
+      const next = new Set(prev);
+      if (next.has(code)) next.delete(code); else next.add(code);
+      return next;
+    });
+  };
+
+  // 부서 등록
+  const openDeptRegister = async () => {
+    setDeptForm({});
+    setDeptEditMode(false);
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setDeptModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/dept_info/dept_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openDeptEdit = () => {
+    if (!selectedDept) return;
+    setDeptForm({ ...selectedDept });
+    setDeptEditMode(true);
+    setDeptModalOpen(true);
+  };
+
+  const handleDeptSave = async () => {
+    if (!deptForm.dept_name) { toast.error("부서명은 필수예요."); return; }
+    const parentCode = (deptForm.parent_dept_code && deptForm.parent_dept_code !== "none") ? deptForm.parent_dept_code : null;
+    setDeptSaving(true);
+    try {
+      if (deptEditMode && deptForm.dept_code) {
+        const response = await departmentAPI.updateDepartment(deptForm.dept_code, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "수정에 실패했어요."); return; }
+        toast.success("수정되었어요.");
+      } else {
+        const companyCode = user?.companyCode || "";
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else { toast.error("채번 코드 할당에 실패했어요."); return; }
+        }
+        const response = await departmentAPI.createDepartment(companyCode, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+          dept_code: allocatedCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "등록에 실패했어요."); return; }
+        toast.success("등록되었어요.");
+      }
+      setDeptModalOpen(false);
+      fetchDepts();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setDeptSaving(false);
+    }
+  };
+
+  const handleDeptDelete = async () => {
+    if (!selectedDeptCode) return;
+    const ok = await confirm("부서를 삭제할까요?", {
+      description: "해당 부서에 소속된 사원 정보는 유지돼요.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      const response = await departmentAPI.deleteDepartment(selectedDeptCode);
+      if (!response.success) { toast.error((response as any).error || "삭제에 실패했어요."); return; }
+      toast.success((response as any).message || "삭제되었어요.");
+      setSelectedDeptCode(null);
+      fetchDepts();
+    } catch { toast.error("삭제에 실패했어요."); }
+  };
+
+  // 사원 추가/수정
+  const openUserModal = (editData?: any) => {
+    if (editData) {
+      setUserEditMode(true);
+      setUserForm({ ...editData, user_password: "" });
+    } else {
+      setUserEditMode(false);
+      setUserForm({ dept_code: selectedDeptCode || "", user_password: "" });
+    }
+    setFormErrors({});
+    setUserModalOpen(true);
+  };
+
+  const handleUserFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setUserForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => { const n = { ...prev }; if (error) n[field] = error; else delete n[field]; return n; });
+  };
+
+  const handleUserSave = async () => {
+    if (!userForm.user_id) { toast.error("사용자 ID는 필수예요."); return; }
+    if (!userForm.user_name) { toast.error("사용자 이름은 필수예요."); return; }
+    if (!userForm.dept_code) { toast.error("부서는 필수예요."); return; }
+    const errors = validateForm(userForm, ["cell_phone", "email"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) { toast.error("입력 형식을 확인해주세요."); return; }
+    setDeptSaving(true);
+    try {
+      const password = userForm.user_password || (!userEditMode ? "qlalfqjsgh11" : undefined);
+      await apiClient.post("/admin/users/with-dept", {
+        userInfo: {
+          user_id: userForm.user_id,
+          user_name: userForm.user_name,
+          user_name_eng: userForm.user_name_eng || undefined,
+          user_password: password || undefined,
+          email: userEditMode ? (userForm.email || null) : (userForm.email || undefined),
+          tel: userForm.tel || undefined,
+          cell_phone: userEditMode ? (userForm.cell_phone || null) : (userForm.cell_phone || undefined),
+          sabun: userEditMode ? (userForm.sabun || null) : (userForm.sabun || undefined),
+          position_name: userForm.position_name || undefined,
+          dept_code: userForm.dept_code || undefined,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name || undefined,
+          status: userForm.status || "active",
+        },
+        mainDept: userForm.dept_code ? {
+          dept_code: userForm.dept_code,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name,
+          position_name: userForm.position_name || undefined,
+        } : undefined,
+        isUpdate: userEditMode,
+      });
+      toast.success(userEditMode ? "사원 정보가 수정되었어요." : "사원이 추가되었어요.");
+      setUserModalOpen(false);
+      fetchMembers();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setDeptSaving(false);
+    }
+  };
+
+  // EDataTable 컬럼 정의 (사원 목록)
+  const companyMemberColumns: EDataTableColumn[] = [
+    { key: "sabun", label: "사번", width: "w-[80px]", render: (val: any) => <span className="text-[13px]">{val || "-"}</span> },
+    { key: "user_name", label: "이름", width: "w-[90px]" },
+    { key: "user_id", label: "사용자ID", width: "w-[100px]" },
+    { key: "position_name", label: "직급", width: "w-[80px]", render: (val: any) => <span>{val || "-"}</span> },
+    { key: "cell_phone", label: "휴대폰", width: "w-[120px]", render: (val: any) => <span>{val || "-"}</span> },
+    { key: "email", label: "이메일" },
+  ];
+
+  /* ── 트리 렌더 ── */
+  const renderTree = (nodes: DeptNode[], depth = 0) => {
+    return nodes.map((node) => {
+      const isExpanded = expandedDepts.has(node.dept_code);
+      const isSelected = selectedDeptCode === node.dept_code;
+      const hasChildren = node.children.length > 0;
+      return (
+        <div key={node.dept_code}>
+          <div
+            className={cn(
+              "flex items-center gap-1.5 px-3 py-2 cursor-pointer text-sm transition-colors hover:bg-accent",
+              isSelected && "bg-primary/10 text-primary font-semibold border-l-2 border-primary",
+              !isSelected && "border-l-2 border-transparent",
+            )}
+            style={{ paddingLeft: `${12 + depth * 20}px` }}
+            onClick={() => setSelectedDeptCode(isSelected ? null : node.dept_code)}
+          >
+            {hasChildren ? (
+              <button
+                className="p-0.5 rounded hover:bg-accent"
+                onClick={(e) => { e.stopPropagation(); toggleExpand(node.dept_code); }}
+              >
+                <ChevronRight className={cn("w-3.5 h-3.5 transition-transform", isExpanded && "rotate-90")} />
+              </button>
+            ) : (
+              <span className="w-4.5" />
+            )}
+            {isExpanded && hasChildren
+              ? <FolderOpen className="w-4 h-4 text-muted-foreground" />
+              : <Folder className="w-4 h-4 text-muted-foreground" />
+            }
+            <span className="truncate">{node.dept_name}</span>
+            {node.status === "inactive" && <Badge variant="outline" className="text-[10px] px-1 py-0">비활성</Badge>}
+          </div>
+          {isExpanded && hasChildren && renderTree(node.children, depth + 1)}
+        </div>
+      );
+    });
+  };
+
+  /* ── 이미지 업로드 박스 ── */
+  const ImageUploadBox = ({
+    label, preview, inputRef, field, setPreview,
+  }: {
+    label: string;
+    preview: string | null;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    field: string;
+    setPreview: React.Dispatch<React.SetStateAction<string | null>>;
+  }) => (
+    <div className="flex flex-col gap-2">
+      <Label className="text-sm font-medium">{label}</Label>
+      <div className="relative w-40 h-40 rounded-lg border-2 border-dashed border-border bg-muted/50 flex items-center justify-center overflow-hidden group">
+        {preview ? (
+          <>
+            <img src={preview} alt={label} className="w-full h-full object-contain" />
+            {editMode && (
+              <div className="absolute inset-0 bg-foreground/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                <Button size="sm" variant="secondary" className="h-7 text-xs" onClick={() => inputRef.current?.click()}>
+                  <Upload className="w-3 h-3 mr-1" /> 변경
+                </Button>
+                <Button size="sm" variant="destructive" className="h-7 text-xs" onClick={() => {
+                  setPreview(null);
+                  setCompanyForm((prev) => ({ ...prev, [field]: null }));
+                }}>
+                  <X className="w-3 h-3" />
+                </Button>
+              </div>
+            )}
+          </>
+        ) : (
+          <button
+            className="flex flex-col items-center gap-1.5 text-muted-foreground"
+            onClick={() => editMode && inputRef.current?.click()}
+            disabled={!editMode}
+          >
+            <ImageIcon className="w-8 h-8" />
+            <span className="text-xs">{editMode ? "이미지 업로드" : "이미지 없음"}</span>
+          </button>
+        )}
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={(e) => handleImageUpload(e, field, setPreview)}
+      />
+    </div>
+  );
+
+  return (
+    <div className="h-[calc(100vh-4rem)] flex flex-col overflow-hidden">
+      {/* 탭 컨테이너 */}
+      <Tabs defaultValue="company" className="flex flex-col h-full gap-0 min-h-0">
+        {/* 탭 헤더 — border-b 스타일 */}
+        <div className="shrink-0 border-b bg-background px-4">
+          <TabsList className="h-12 bg-transparent gap-1">
+            <TabsTrigger
+              value="company"
+              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 gap-1.5"
+            >
+              <Building2 className="w-4 h-4" /> 회사정보
+            </TabsTrigger>
+          </TabsList>
+        </div>
+
+        {/* ===================== Tab 1: 회사정보 ===================== */}
+        <TabsContent value="company" className="flex-1 overflow-auto mt-0 p-4">
+          <div className="border rounded-lg bg-card">
+            {/* 패널 헤더 */}
+            <div className="flex items-center justify-between px-6 py-3 border-b bg-muted/30">
+              <div className="font-semibold flex items-center gap-2 text-sm">
+                <Building2 className="w-4 h-4 text-muted-foreground" />
+                <span>회사 기본정보</span>
+              </div>
+              <div className="flex gap-1.5">
+                {editMode ? (
+                  <>
+                    <Button variant="outline" size="sm" onClick={cancelEdit}>취소</Button>
+                    <Button size="sm" onClick={handleCompanySave} disabled={saving}>
+                      {saving ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <Save className="w-3.5 h-3.5 mr-1" />}
+                      저장해요
+                    </Button>
+                  </>
+                ) : (
+                  <Button size="sm" onClick={() => setEditMode(true)}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {companyLoading ? (
+              <div className="flex items-center justify-center py-20">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : (
+              <div className="p-6 space-y-6">
+                {/* 기본 정보 섹션 제목 */}
+                <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  기본 정보
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+
+                {/* 기본 정보 그리드 (2열) */}
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">회사코드</Label>
+                    <Input value={companyForm.company_code || ""} className="h-9 bg-muted/50" disabled readOnly />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      회사명 <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      value={companyForm.company_name || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, company_name: e.target.value }))}
+                      placeholder="회사명을 입력해주세요"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">사업자등록번호</Label>
+                    <Input
+                      value={companyForm.business_registration_number || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, business_registration_number: e.target.value }))}
+                      placeholder="000-00-00000"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대표자명</Label>
+                    <Input
+                      value={companyForm.representative_name || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, representative_name: e.target.value }))}
+                      placeholder="대표자명"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대표전화</Label>
+                    <Input
+                      value={companyForm.representative_phone || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, representative_phone: e.target.value }))}
+                      placeholder="02-0000-0000"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">팩스</Label>
+                    <Input
+                      value={companyForm.fax || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, fax: e.target.value }))}
+                      placeholder="02-0000-0001"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">이메일</Label>
+                    <Input
+                      value={companyForm.email || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, email: e.target.value }))}
+                      placeholder="example@company.com"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">홈페이지</Label>
+                    <Input
+                      value={companyForm.website || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, website: e.target.value }))}
+                      placeholder="https://www.company.com"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="col-span-2 space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">주소</Label>
+                    <Input
+                      value={companyForm.address || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="회사 주소를 입력해주세요"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                </div>
+
+                {/* 이미지 섹션 */}
+                <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  이미지 관리
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <div className="flex gap-6">
+                  <ImageUploadBox label="회사 이미지" preview={imagePreview} inputRef={imageRef} field="company_image" setPreview={setImagePreview} />
+                  <ImageUploadBox label="회사 로고" preview={logoPreview} inputRef={logoRef} field="company_logo" setPreview={setLogoPreview} />
+                  <ImageUploadBox label="직인" preview={sealPreview} inputRef={sealRef} field="company_seal" setPreview={setSealPreview} />
+                </div>
+              </div>
+            )}
+          </div>
+        </TabsContent>
+
+      </Tabs>
+
+      {/* ── 부서 등록/수정 모달 ── */}
+      <Dialog open={deptModalOpen} onOpenChange={setDeptModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{deptEditMode ? "부서 수정" : "부서 등록"}</DialogTitle>
+            <DialogDescription>{deptEditMode ? "부서 정보를 수정해요." : "새로운 부서를 등록해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서코드</Label>
+              <Input
+                value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
+                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성됩니다")}
+                className="h-9" disabled readOnly
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서명 <span className="text-destructive">*</span></Label>
+              <Input
+                value={deptForm.dept_name || ""}
+                onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
+                placeholder="부서명" className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">상위부서</Label>
+              <Select value={deptForm.parent_dept_code || ""} onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="상위부서 선택 (선택사항)" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">없음</SelectItem>
+                  {depts.filter((d) => d.dept_code !== deptForm.dept_code).map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name} ({d.dept_code})</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeptModalOpen(false)}>취소</Button>
+            <Button onClick={handleDeptSave} disabled={deptSaving}>
+              {deptSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 사원 추가/수정 모달 ── */}
+      <Dialog open={userModalOpen} onOpenChange={setUserModalOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{userEditMode ? "사원 정보 수정" : "사원 추가"}</DialogTitle>
+            <DialogDescription>
+              {userEditMode
+                ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정해요.`
+                : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가해요.` : "사원을 추가해요."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-sm">사용자 ID <span className="text-destructive">*</span></Label>
+              <Input value={userForm.user_id || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
+                placeholder="사용자 ID" className="h-9" disabled={userEditMode} />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">이름 <span className="text-destructive">*</span></Label>
+              <Input value={userForm.user_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
+                placeholder="이름" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">사번</Label>
+              <Input value={userForm.sabun || ""} onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
+                placeholder="사번" className="h-9" autoComplete="off" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">비밀번호</Label>
+              <Input value={userForm.user_password || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
+                placeholder={userEditMode ? "변경 시에만 입력" : "미입력 시 qlalfqjsgh11"} className="h-9" type="password" autoComplete="new-password" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">직급</Label>
+              <Input value={userForm.position_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
+                placeholder="직급" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서 <span className="text-destructive">*</span></Label>
+              <Select value={userForm.dept_code || ""} onValueChange={(v) => setUserForm((p) => ({ ...p, dept_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="부서 선택" /></SelectTrigger>
+                <SelectContent>
+                  {depts.map((d) => <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">휴대폰</Label>
+              <Input value={userForm.cell_phone || ""} onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
+                placeholder="010-0000-0000" className={cn("h-9", formErrors.cell_phone && "border-destructive")} />
+              {formErrors.cell_phone && <p className="text-xs text-destructive">{formErrors.cell_phone}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">이메일</Label>
+              <Input value={userForm.email || ""} onChange={(e) => handleUserFormChange("email", e.target.value)}
+                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
+              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">입사일</Label>
+              <Input type="date" value={userForm.regdate || ""} onChange={(e) => setUserForm((p) => ({ ...p, regdate: e.target.value }))} className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">퇴사일</Label>
+              <Input type="date" value={userForm.end_date || ""} onChange={(e) => setUserForm((p) => ({ ...p, end_date: e.target.value }))} className="h-9" />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserModalOpen(false)}>취소</Button>
+            <Button onClick={handleUserSave} disabled={deptSaving}>
+              {deptSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/master-data/department/page.tsx b/frontend/app/(main)/COMPANY_30/master-data/department/page.tsx
new file mode 100644
index 00000000..23f70f2b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/master-data/department/page.tsx
@@ -0,0 +1,772 @@
+"use client";
+
+/**
+ * 부서관리 — 하드코딩 페이지
+ *
+ * 좌측: 부서 목록 (dept_info)
+ * 우측: 선택한 부서의 인원 목록 (user_info)
+ *
+ * 모달: 부서 등록(dept_info), 사원 추가(user_info)
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Users, Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import * as departmentAPI from "@/lib/api/department";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { formatField, validateField, validateForm } from "@/lib/utils/validation";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const DEPT_TABLE = "dept_info";
+const USER_TABLE = "user_info";
+const DEPT_COLUMNS = [
+  { key: "parent_dept_code", label: "상위부서" },
+  { key: "status", label: "상태" },
+];
+
+export default function DepartmentPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 부서
+  const [depts, setDepts] = useState<any[]>([]);
+  const [deptLoading, setDeptLoading] = useState(false);
+  const [deptCount, setDeptCount] = useState(0);
+  const [selectedDeptId, setSelectedDeptId] = useState<string | null>(null);
+
+  // 우측: 사원
+  const [members, setMembers] = useState<any[]>([]);
+  const [memberLoading, setMemberLoading] = useState(false);
+
+  // 부서 모달
+  const [deptModalOpen, setDeptModalOpen] = useState(false);
+  const [deptEditMode, setDeptEditMode] = useState(false);
+  const [deptForm, setDeptForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 사원 모달
+  const [userModalOpen, setUserModalOpen] = useState(false);
+  const [userEditMode, setUserEditMode] = useState(false);
+  const [userForm, setUserForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+
+  // 사원 탭 (재직중/퇴사)
+  const [memberTab, setMemberTab] = useState<"active" | "resigned">("active");
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-department", DEPT_TABLE, DEPT_COLUMNS);
+
+  // 부서 조회
+  const fetchDepts = useCallback(async () => {
+    setDeptLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${DEPT_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      // dept_info에 id 컬럼이 없으므로 dept_code를 id로 매핑
+      const data = raw.map((d: any) => ({ ...d, id: d.id || d.dept_code }));
+      setDepts(data);
+      setDeptCount(res.data?.data?.total || data.length);
+    } catch (err) {
+      toast.error("부서 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setDeptLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => { fetchDepts(); }, [fetchDepts]);
+
+  // 선택된 부서
+  const selectedDept = depts.find((d) => d.id === selectedDeptId);
+  const selectedDeptCode = selectedDept?.dept_code || null;
+
+  // 우측: 사원 조회 (부서 미선택 → 전체, 선택 → 해당 부서)
+  const fetchMembers = useCallback(async () => {
+    setMemberLoading(true);
+    try {
+      const filters = selectedDeptCode
+        ? [{ columnName: "dept_code", operator: "equals", value: selectedDeptCode }]
+        : [];
+      const res = await apiClient.post(`/table-management/tables/${USER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      setMembers(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setMembers([]); } finally { setMemberLoading(false); }
+  }, [selectedDeptCode]);
+
+  useEffect(() => { fetchMembers(); }, [fetchMembers]);
+
+  // 부서 등록
+  const openDeptRegister = async () => {
+    setDeptForm({});
+    setDeptEditMode(false);
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setDeptModalOpen(true);
+
+    // 채번 규칙 조회 (dept_info.dept_code) — path params로 직접 호출
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/dept_info/dept_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시
+    }
+  };
+
+  const openDeptEdit = () => {
+    if (!selectedDept) return;
+    setDeptForm({ ...selectedDept });
+    setDeptEditMode(true);
+    setDeptModalOpen(true);
+  };
+
+  const handleDeptSave = async () => {
+    if (!deptForm.dept_name) { toast.error("부서명은 필수입니다."); return; }
+    const parentCode = (deptForm.parent_dept_code && deptForm.parent_dept_code !== "none") ? deptForm.parent_dept_code : null;
+    setSaving(true);
+    try {
+      if (deptEditMode && deptForm.dept_code) {
+        const response = await departmentAPI.updateDepartment(deptForm.dept_code, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "수정에 실패했습니다."); return; }
+        toast.success("수정되었습니다.");
+      } else {
+        const companyCode = user?.companyCode || "";
+
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+
+        const response = await departmentAPI.createDepartment(companyCode, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+          dept_code: allocatedCode,
+        });
+        if (!response.success) {
+          toast.error((response as any).error || "등록에 실패했습니다.");
+          return;
+        }
+        toast.success("등록되었습니다.");
+      }
+      setDeptModalOpen(false);
+      fetchDepts();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 부서 삭제
+  const handleDeptDelete = async () => {
+    if (!selectedDeptCode) return;
+    const ok = await confirm("부서를 삭제하시겠습니까?", {
+      description: "해당 부서에 소속된 사원 정보는 유지됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      const response = await departmentAPI.deleteDepartment(selectedDeptCode);
+      if (!response.success) { toast.error((response as any).error || "삭제에 실패했습니다."); return; }
+      toast.success(response.message || "삭제되었습니다.");
+      setSelectedDeptId(null);
+      fetchDepts();
+    } catch { toast.error("삭제에 실패했습니다."); }
+  };
+
+  // 사원 추가/수정
+  const openUserModal = (editData?: any) => {
+    if (editData) {
+      setUserEditMode(true);
+      setUserForm({ ...editData, user_password: "" });
+    } else {
+      setUserEditMode(false);
+      setUserForm({ dept_code: selectedDeptCode || "", user_password: "" });
+    }
+    setFormErrors({});
+    setUserModalOpen(true);
+  };
+
+  const handleUserFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setUserForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => { const n = { ...prev }; if (error) n[field] = error; else delete n[field]; return n; });
+  };
+
+  const handleUserSave = async () => {
+    if (!userForm.user_id) { toast.error("사용자 ID는 필수입니다."); return; }
+    if (!userForm.user_name) { toast.error("사용자 이름은 필수입니다."); return; }
+    if (!userForm.dept_code) { toast.error("부서는 필수입니다."); return; }
+    const errors = validateForm(userForm, ["cell_phone", "email"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) { toast.error("입력 형식을 확인해주세요."); return; }
+
+    setSaving(true);
+    try {
+      // 비밀번호 미입력 시 기본값 (신규만)
+      const password = userForm.user_password || (!userEditMode ? "qlalfqjsgh11" : undefined);
+
+      await apiClient.post("/admin/users/with-dept", {
+        userInfo: {
+          user_id: userForm.user_id,
+          user_name: userForm.user_name,
+          user_name_eng: userForm.user_name_eng || undefined,
+          user_password: password || undefined,
+          email: userEditMode ? (userForm.email || null) : (userForm.email || undefined),
+          tel: userForm.tel || undefined,
+          cell_phone: userEditMode ? (userForm.cell_phone || null) : (userForm.cell_phone || undefined),
+          sabun: userEditMode ? (userForm.sabun || null) : (userForm.sabun || undefined),
+          position_name: userForm.position_name || undefined,
+          dept_code: userForm.dept_code || undefined,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name || undefined,
+          status: userForm.status || "active",
+          end_date: userForm.end_date || null,
+        },
+        mainDept: userForm.dept_code ? {
+          dept_code: userForm.dept_code,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name,
+          position_name: userForm.position_name || undefined,
+        } : undefined,
+        isUpdate: userEditMode,
+      });
+      toast.success(userEditMode ? "사원 정보가 수정되었습니다." : "사원이 추가되었습니다.");
+      setUserModalOpen(false);
+      fetchMembers();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (depts.length === 0) return;
+    const data = depts.map((d) => ({
+      부서코드: d.dept_code, 부서명: d.dept_name, 상위부서: d.parent_dept_code, 상태: d.status,
+    }));
+    await exportToExcel(data, "부서관리.xlsx", "부서");
+    toast.success("다운로드 완료");
+  };
+
+  // 퇴사일 기반 재직/퇴사 분리
+  const _now = new Date();
+  const today = `${_now.getFullYear()}-${String(_now.getMonth() + 1).padStart(2, "0")}-${String(_now.getDate()).padStart(2, "0")}`;
+  const activeMembers = members.filter((m) => !m.end_date || m.end_date.substring(0, 10) >= today);
+  const resignedMembers = members.filter((m) => m.end_date && m.end_date.substring(0, 10) < today);
+
+  // EDataTable 컬럼 정의 (부서 목록) — ts.visibleColumns 순서를 따름
+  const deptColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      dept_code: { width: "w-[120px]" },
+      dept_name: { minWidth: "min-w-[140px]" },
+      parent_dept_code: {
+        width: "w-[110px]",
+        render: (val: any) => <span className="text-[13px] text-muted-foreground">{val || "\u2014"}</span>,
+      },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "active" ? "default" : "outline"}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val === "active" ? "활성" : (val || "\u2014")}
+            </Badge>
+          ) : null,
+      },
+    };
+    // dept_code, dept_name은 항상 표시 (DEPT_COLUMNS에 포함되지 않으므로 visibleColumns에 없음)
+    const fixedCols: EDataTableColumn[] = [
+      { key: "dept_code", label: "부서코드", ...colProps["dept_code"] },
+      { key: "dept_name", label: "부서명", ...colProps["dept_name"] },
+    ];
+    const dynamicCols = ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+    return [...fixedCols, ...dynamicCols];
+  }, [ts.visibleColumns]);
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={DEPT_TABLE}
+        filterId="c16-department"
+        onFilterChange={setSearchFilters}
+        dataCount={deptCount}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex gap-1.5">
+            <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+              엑셀 업로드
+            </Button>
+            <Button variant="outline" size="sm" className="h-8" onClick={() => void handleExcelDownload()}>
+              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 부서 목록 */}
+          <ResizablePanel defaultSize={40} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-3 border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">부서 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {deptCount}건
+                  </span>
+                </div>
+                <div className="flex gap-1.5">
+                  <Button size="sm" onClick={() => void openDeptRegister()}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedDeptCode} onClick={openDeptEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedDeptCode} onClick={() => void handleDeptDelete()}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 부서 테이블 */}
+              <EDataTable
+                columns={deptColumns}
+                data={ts.groupData(depts)}
+                rowKey={(row) => row.id}
+                loading={deptLoading}
+                emptyMessage="등록된 부서가 없어요"
+                selectedId={selectedDeptId}
+                onSelect={(id) => setSelectedDeptId(id)}
+                onRowDoubleClick={() => openDeptEdit()}
+                showRowNumber
+                showPagination={false}
+                draggableColumns={false}
+                columnOrderKey="c16-department"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 사원 목록 */}
+          <ResizablePanel defaultSize={60} minSize={30}>
+            <div className="flex flex-col h-full">
+              {!selectedDeptId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">부서를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 부서를 선택하면 소속 사원 목록이 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 디테일 헤더 */}
+                  <div className="flex items-center gap-3 px-4 py-3 border-b bg-muted shrink-0">
+                    <span className="text-[13px] font-bold">{selectedDept?.dept_name || "-"}</span>
+                    <span className="font-mono text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                      {selectedDept?.dept_code || "-"}
+                    </span>
+                    <div className="ml-auto">
+                      <Button variant="outline" size="sm" onClick={() => openUserModal()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        사원 추가
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 재직/퇴사 탭 */}
+                  <div className="flex border-b border-border px-4 shrink-0 bg-muted">
+                    <button
+                      onClick={() => setMemberTab("active")}
+                      className={cn("px-4 py-2.5 text-xs font-semibold border-b-2 transition-colors",
+                        memberTab === "active" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+                      )}
+                    >
+                      재직중
+                      {activeMembers.length > 0 && (
+                        <Badge variant="secondary" className="ml-1.5 text-[10px] px-1.5 py-0">{activeMembers.length}</Badge>
+                      )}
+                    </button>
+                    <button
+                      onClick={() => setMemberTab("resigned")}
+                      className={cn("px-4 py-2.5 text-xs font-semibold border-b-2 transition-colors",
+                        memberTab === "resigned" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+                      )}
+                    >
+                      퇴사
+                      {resignedMembers.length > 0 && (
+                        <Badge variant="secondary" className="ml-1.5 text-[10px] px-1.5 py-0">{resignedMembers.length}</Badge>
+                      )}
+                    </button>
+                  </div>
+
+                  <div className="flex-1 overflow-auto">
+                    {memberLoading ? (
+                      <div className="flex flex-col items-center justify-center py-12">
+                        <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                      </div>
+                    ) : memberTab === "active" ? (
+                      activeMembers.length === 0 ? (
+                        <div className="text-center py-8 text-muted-foreground text-sm">재직중인 사원이 없어요</div>
+                      ) : (
+                        <Table noWrapper>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center px-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사번</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이름</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사용자ID</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">직급</TableHead>
+                              <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">휴대폰</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {activeMembers.map((member, idx) => (
+                              <TableRow
+                                key={member.id || member.user_id}
+                                className="cursor-pointer select-none hover:bg-muted/50"
+                                onDoubleClick={() => openUserModal(member)}
+                              >
+                                <TableCell className="text-center text-[13px] text-muted-foreground px-2">{idx + 1}</TableCell>
+                                <TableCell className="font-mono text-[13px] text-muted-foreground">{member.sabun || "—"}</TableCell>
+                                <TableCell className="text-sm font-medium">{member.user_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.user_id}</TableCell>
+                                <TableCell className="text-[13px]">{member.position_name || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.cell_phone || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.email || "—"}</TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      )
+                    ) : (
+                      resignedMembers.length === 0 ? (
+                        <div className="text-center py-8 text-muted-foreground text-sm">퇴사한 사원이 없어요</div>
+                      ) : (
+                        <Table noWrapper>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center px-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사번</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이름</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사용자ID</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">직급</TableHead>
+                              <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">휴대폰</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">퇴사일</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {resignedMembers.map((member, idx) => (
+                              <TableRow
+                                key={member.id || member.user_id}
+                                className="cursor-pointer select-none hover:bg-muted/50"
+                                onDoubleClick={() => openUserModal(member)}
+                              >
+                                <TableCell className="text-center text-[13px] text-muted-foreground px-2">{idx + 1}</TableCell>
+                                <TableCell className="font-mono text-[13px] text-muted-foreground">{member.sabun || "—"}</TableCell>
+                                <TableCell className="text-sm font-medium">{member.user_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.user_id}</TableCell>
+                                <TableCell className="text-[13px]">{member.position_name || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.cell_phone || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.email || "—"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.end_date ? member.end_date.substring(0, 10) : "—"}</TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      )
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 부서 등록/수정 모달 */}
+      <Dialog open={deptModalOpen} onOpenChange={setDeptModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{deptEditMode ? "부서 수정" : "부서 등록"}</DialogTitle>
+            <DialogDescription>{deptEditMode ? "부서 정보를 수정합니다." : "새로운 부서를 등록합니다."}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-2">
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">부서코드</span>
+              <Input
+                value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
+                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                className="h-9"
+                disabled
+                readOnly
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                부서명 <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={deptForm.dept_name || ""}
+                onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
+                placeholder="부서명을 입력해 주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상위부서</span>
+              <Select
+                value={deptForm.parent_dept_code || ""}
+                onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="상위부서 선택 (선택사항)" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">없음</SelectItem>
+                  {depts.filter((d) => d.dept_code !== deptForm.dept_code).map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name} ({d.dept_code})</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeptModalOpen(false)}>취소</Button>
+            <Button onClick={() => void handleDeptSave()} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 사원 추가/수정 모달 */}
+      <Dialog open={userModalOpen} onOpenChange={setUserModalOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{userEditMode ? "사원 정보 수정" : "사원 추가"}</DialogTitle>
+            <DialogDescription>
+              {userEditMode
+                ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정합니다.`
+                : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가합니다.` : "사원을 추가합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                사용자 ID <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={userForm.user_id || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
+                placeholder="사용자 ID를 입력해 주세요"
+                className="h-9"
+                disabled={userEditMode}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                이름 <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={userForm.user_name || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
+                placeholder="이름을 입력해 주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">사번</span>
+              <Input
+                value={userForm.sabun || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
+                placeholder="사번"
+                className="h-9"
+                autoComplete="off"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">비밀번호</span>
+              <Input
+                value={userForm.user_password || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
+                placeholder={userEditMode ? "변경 시에만 입력해 주세요" : "미입력 시 기본값이 설정돼요"}
+                className="h-9"
+                type="password"
+                autoComplete="new-password"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">직급</span>
+              <Input
+                value={userForm.position_name || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
+                placeholder="직급"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                부서 <span className="text-destructive">*</span>
+              </span>
+              <Select value={userForm.dept_code || ""} onValueChange={(v) => setUserForm((p) => ({ ...p, dept_code: v }))}>
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="부서를 선택해 주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {depts.map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">휴대폰</span>
+              <Input
+                value={userForm.cell_phone || ""}
+                onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
+                placeholder="010-0000-0000"
+                className={cn("h-9", formErrors.cell_phone && "border-destructive")}
+              />
+              {formErrors.cell_phone && <p className="text-xs text-destructive">{formErrors.cell_phone}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">이메일</span>
+              <Input
+                value={userForm.email || ""}
+                onChange={(e) => handleUserFormChange("email", e.target.value)}
+                placeholder="example@email.com"
+                className={cn("h-9", formErrors.email && "border-destructive")}
+              />
+              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">입사일</span>
+              <Input
+                type="date"
+                value={userForm.regdate ? userForm.regdate.substring(0, 10) : ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, regdate: e.target.value }))}
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">퇴사일</span>
+              <Input
+                type="date"
+                value={userForm.end_date ? userForm.end_date.substring(0, 10) : ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, end_date: e.target.value }))}
+                className="h-9"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserModalOpen(false)}>취소</Button>
+            <Button onClick={() => void handleUserSave()} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={DEPT_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchDepts()}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/master-data/item-info/page.tsx b/frontend/app/(main)/COMPANY_30/master-data/item-info/page.tsx
new file mode 100644
index 00000000..375fd900
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/master-data/item-info/page.tsx
@@ -0,0 +1,596 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  Pencil, Copy, Settings2, Check, ChevronsUpDown,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { ImageUpload } from "@/components/common/ImageUpload";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { toast } from "sonner";
+
+// 검색 가능한 카테고리 콤보박스
+function CategoryCombobox({ options, value, onChange, placeholder }: {
+  options: { code: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selected = options.find((o) => o.code === value);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
+          <span className="truncate">{selected?.label || <span className="text-muted-foreground">{placeholder}</span>}</span>
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8" />
+          <CommandList>
+            <CommandEmpty>검색 결과가 없어요</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {options.map((opt) => (
+                <CommandItem key={opt.code} value={opt.label} onSelect={() => { onChange(opt.code); setOpen(false); }}>
+                  <Check className={cn("mr-2 h-3.5 w-3.5", value === opt.code ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 다중 선택 카테고리 콤보박스
+function MultiCategoryCombobox({ options, value, onChange, placeholder }: {
+  options: { code: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selectedCodes = value ? value.split(",").map((c) => c.trim()).filter(Boolean) : [];
+  const selectedLabels = selectedCodes.map((code) => options.find((o) => o.code === code)?.label || code).filter(Boolean);
+
+  const toggle = (code: string) => {
+    const next = selectedCodes.includes(code)
+      ? selectedCodes.filter((c) => c !== code)
+      : [...selectedCodes, code];
+    onChange(next.join(","));
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
+          <span className="truncate">
+            {selectedLabels.length > 0
+              ? selectedLabels.join(", ")
+              : <span className="text-muted-foreground">{placeholder}</span>}
+          </span>
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8" />
+          <CommandList>
+            <CommandEmpty>검색 결과가 없어요</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {options.map((opt) => (
+                <CommandItem key={opt.code} value={opt.label} onSelect={() => toggle(opt.code)}>
+                  <Check className={cn("mr-2 h-3.5 w-3.5", selectedCodes.includes(opt.code) ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const TABLE_NAME = "item_info";
+
+const GRID_COLUMNS = [
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "image", label: "이미지", type: "image" },
+  { key: "division", label: "관리품목" },
+  { key: "type", label: "품목구분" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "material", label: "재질" },
+  { key: "status", label: "상태" },
+  { key: "selling_price", label: "판매가격", align: "right" as const, formatNumber: true },
+  { key: "standard_price", label: "기준단가", align: "right" as const, formatNumber: true },
+  { key: "weight", label: "중량", align: "right" as const },
+  { key: "inventory_unit", label: "재고단위" },
+  { key: "user_type01", label: "대분류" },
+  { key: "user_type02", label: "중분류" },
+  { key: "lead_time", label: "생산 리드타임(일)", align: "right" as const },
+];
+
+const FORM_FIELDS = [
+  { key: "item_number", label: "품목코드", type: "text", required: true, disabled: true, placeholder: "자동 채번" },
+  { key: "item_name", label: "품명", type: "text", required: true },
+  { key: "division", label: "관리품목", type: "multi-category" },
+  { key: "type", label: "품목구분", type: "category" },
+  { key: "size", label: "규격", type: "text" },
+  { key: "unit", label: "단위", type: "category" },
+  { key: "material", label: "재질", type: "category" },
+  { key: "status", label: "상태", type: "category" },
+  { key: "weight", label: "중량", type: "text", placeholder: "숫자 입력 (예: 3.5)" },
+  { key: "volum", label: "부피", type: "text", placeholder: "숫자 입력 (예: 100)" },
+  { key: "specific_gravity", label: "비중", type: "text", placeholder: "숫자 입력 (예: 7.85)" },
+  { key: "inventory_unit", label: "재고단위", type: "category" },
+  { key: "selling_price", label: "판매가격", type: "text" },
+  { key: "standard_price", label: "기준단가", type: "text" },
+  { key: "currency_code", label: "통화", type: "category" },
+  { key: "user_type01", label: "대분류", type: "category" },
+  { key: "user_type02", label: "중분류", type: "category" },
+  { key: "lead_time", label: "생산 리드타임(일)", type: "text", placeholder: "숫자 입력 (예: 7)" },
+  { key: "image", label: "품목 이미지", type: "image" },
+  { key: "meno", label: "메모", type: "textarea" },
+];
+
+const CATEGORY_COLUMNS = [
+  "division", "type", "unit", "material", "status",
+  "inventory_unit", "currency_code", "user_type01", "user_type02",
+];
+
+export default function ItemInfoPage() {
+  const { user } = useAuth();
+  const ts = useTableSettings("c16-item-info", TABLE_NAME, GRID_COLUMNS);
+  const [items, setItems] = useState<any[]>([]);
+  const [rawItems, setRawItems] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editId, setEditId] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+
+  // 엑셀 업로드
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 카테고리 옵션 (API에서 로드)
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 선택된 행
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  // 카테고리 옵션 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      try {
+        const optMap: Record<string, { code: string; label: string }[]> = {};
+        const flatten = (vals: any[]): { code: string; label: string }[] => {
+          const result: { code: string; label: string }[] = [];
+          for (const v of vals) {
+            result.push({ code: v.valueCode, label: v.valueLabel });
+            if (v.children?.length) result.push(...flatten(v.children));
+          }
+          return result;
+        };
+
+        await Promise.all(
+          CATEGORY_COLUMNS.map(async (colName) => {
+            try {
+              const res = await apiClient.get(`/table-categories/${TABLE_NAME}/${colName}/values`);
+              if (res.data?.success && res.data.data?.length > 0) {
+                optMap[colName] = flatten(res.data.data);
+              }
+            } catch { /* skip */ }
+          })
+        );
+        setCategoryOptions(optMap);
+      } catch (err) {
+        console.error("카테고리 로드 실패:", err);
+      }
+    };
+    loadCategories();
+  }, []);
+
+  // 데이터 조회
+  const fetchItems = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1,
+        size: 99999,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        // 쉼표 구분 다중값 지원
+        if (code.includes(",")) {
+          return code.split(",").map((c) => {
+            const trimmed = c.trim();
+            if (!trimmed || trimmed === "s") return "";
+            return categoryOptions[col]?.find((o) => o.code === trimmed)?.label || trimmed;
+          }).filter(Boolean).join(", ");
+        }
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      setRawItems(raw);
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATEGORY_COLUMNS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [categoryOptions, searchFilters]);
+
+  useEffect(() => {
+    fetchItems();
+  }, [fetchItems]);
+
+  // 채번 미리보기 로드
+  const loadNumberingPreview = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${TABLE_NAME}/item_number`);
+      const rule = ruleRes.data?.data;
+      if (rule?.ruleId) {
+        const previewRes = await apiClient.post(`/numbering-rules/${rule.ruleId}/preview`, { formData: {} });
+        return previewRes.data?.data?.generatedCode || "";
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+    return "";
+  };
+
+  // 등록 모달 열기
+  const openRegisterModal = async () => {
+    setFormData({});
+    setIsEditMode(false);
+    setEditId(null);
+    setIsModalOpen(true);
+    // 채번 컬럼 자동 로드
+    const code = await loadNumberingPreview();
+    if (code) setFormData(prev => ({ ...prev, item_number: code }));
+  };
+
+  // 수정 모달 열기
+  const openEditModal = (item: any) => {
+    const raw = rawItems.find((r) => r.id === item.id) || item;
+    setFormData({ ...raw });
+    setIsEditMode(true);
+    setEditId(item.id);
+    setIsModalOpen(true);
+  };
+
+  // 복사 모달 열기
+  const openCopyModal = async (item: any) => {
+    const raw = rawItems.find((r) => r.id === item.id) || item;
+    const { id, item_number, created_date, updated_date, writer, ...rest } = raw;
+    setFormData(rest);
+    setIsEditMode(false);
+    setEditId(null);
+    const code = await loadNumberingPreview();
+    if (code) setFormData(prev => ({ ...prev, item_number: code }));
+    setIsModalOpen(true);
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (!formData.item_name) {
+      toast.error("품명은 필수 입력이에요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      if (isEditMode && editId) {
+        const { id, created_date, updated_date, writer, company_code, ...updateFields } = formData;
+        await apiClient.put(`/table-management/tables/${TABLE_NAME}/edit`, {
+          originalData: { id: editId },
+          updatedData: updateFields,
+        });
+        toast.success("수정되었어요.");
+      } else {
+        const { id, created_date, updated_date, ...insertFields } = formData;
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, { id: crypto.randomUUID(), ...insertFields });
+        toast.success("등록되었어요.");
+      }
+      setIsModalOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      console.error("저장 실패:", err);
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 삭제
+  const handleDelete = async () => {
+    if (!selectedId) {
+      toast.error("삭제할 품목을 선택해 주세요.");
+      return;
+    }
+    if (!confirm("선택한 품목을 삭제할까요?")) return;
+
+    try {
+      await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+        data: [{ id: selectedId }],
+      });
+      toast.success("삭제되었어요.");
+      setSelectedId(null);
+      fetchItems();
+    } catch (err) {
+      console.error("삭제 실패:", err);
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) {
+      toast.error("다운로드할 데이터가 없어요.");
+      return;
+    }
+    const exportData = items.map((item) => {
+      const row: Record<string, any> = {};
+      for (const col of GRID_COLUMNS) {
+        row[col.label] = item[col.key] || "";
+      }
+      return row;
+    });
+    await exportToExcel(exportData, "품목정보.xlsx", "품목정보");
+    toast.success("엑셀 다운로드 완료");
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-0">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={TABLE_NAME}
+        filterId="c16-item-info"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between px-4 py-2.5 border-b">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-semibold">품목 관리</span>
+          <Badge variant="secondary" className="font-mono text-xs">{items.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
+          </Button>
+          <div className="mx-1 h-5 w-px bg-border" />
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4 mr-1.5" /> 품목 등록
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!selectedId}
+            onClick={() => {
+              const item = items.find((i) => i.id === selectedId);
+              if (item) openCopyModal(item);
+            }}
+          >
+            <Copy className="w-4 h-4 mr-1.5" /> 복사
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!selectedId}
+            onClick={() => {
+              const item = items.find((i) => i.id === selectedId);
+              if (item) openEditModal(item);
+            }}
+          >
+            <Pencil className="w-4 h-4 mr-1.5" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 메인 테이블 */}
+      <EDataTable
+        columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+          key: col.key,
+          label: col.label,
+          align: (col as any).type === "image" ? "center" : col.align as "left" | "center" | "right" | undefined,
+          formatNumber: (col as any).formatNumber,
+          width: (col as any).type === "image" ? "w-[50px]" : undefined,
+          render: (col as any).type === "image" ? (val: any) => (
+            val ? (
+              <img src={String(val).startsWith("http") || String(val).startsWith("/") ? val : `/api/files/preview/${val}`} alt="" className="h-8 w-8 rounded object-cover border border-border mx-auto" onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
+            ) : <div className="h-8 w-8 rounded bg-muted mx-auto" />
+          ) : undefined,
+        }))}
+        data={ts.groupData(items)}
+        loading={loading}
+        emptyMessage="등록된 품목이 없어요"
+        selectedId={selectedId}
+        onSelect={(id) => setSelectedId(id)}
+        onRowDoubleClick={(row) => openEditModal(row)}
+        showRowNumber
+        draggableColumns={false}
+      />
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="sm:max-w-[600px] w-[95vw] max-h-[90vh] flex flex-col p-0 overflow-hidden">
+          <DialogHeader className="shrink-0 px-6 pt-5 pb-3 border-b">
+            <DialogTitle>{isEditMode ? "품목 수정" : "품목 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? "품목 정보를 수정해요." : "새로운 품목을 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-y-auto">
+            <div className="grid grid-cols-2 gap-4 p-6">
+              {FORM_FIELDS.map((field) => (
+                <div
+                  key={field.key}
+                  className={cn("space-y-1.5", (field.type === "textarea" || field.type === "image") && "col-span-2")}
+                >
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    {field.label}
+                    {field.required && <span className="text-destructive ml-1">*</span>}
+                  </Label>
+                  {field.type === "image" ? (
+                    <ImageUpload
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      tableName={TABLE_NAME}
+                      recordId={formData.id || ""}
+                      columnName={field.key}
+                      height="h-32"
+                    />
+                  ) : field.type === "multi-category" ? (
+                    <MultiCategoryCombobox
+                      options={categoryOptions[field.key] || []}
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      placeholder={`${field.label} 선택`}
+                    />
+                  ) : field.type === "category" ? (
+                    <CategoryCombobox
+                      options={categoryOptions[field.key] || []}
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      placeholder={`${field.label} 선택`}
+                    />
+                  ) : field.type === "textarea" ? (
+                    <Textarea
+                      value={formData[field.key] || ""}
+                      onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                      placeholder={field.label}
+                      rows={3}
+                    />
+                  ) : ["selling_price", "standard_price"].includes(field.key) ? (
+                    <Input
+                      value={formData[field.key] ? Number(String(formData[field.key]).replace(/,/g, "")).toLocaleString() : ""}
+                      onChange={(e) => {
+                        const raw = e.target.value.replace(/[^\d.-]/g, "");
+                        setFormData((prev) => ({ ...prev, [field.key]: raw }));
+                      }}
+                      placeholder={field.placeholder || field.label}
+                      className="h-9 text-right"
+                    />
+                  ) : (
+                    <Input
+                      value={formData[field.key] || ""}
+                      onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                      placeholder={field.placeholder || (field.disabled ? "자동 채번" : field.label)}
+                      disabled={field.disabled && !isEditMode}
+                      className="h-9"
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <DialogFooter className="shrink-0 border-t px-6 py-3">
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving
+                ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+                : <Save className="w-4 h-4 mr-1.5" />
+              }
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 모달 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={TABLE_NAME}
+        userId={user?.userId}
+        onSuccess={() => {
+          fetchItems();
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/master-data/options/page.tsx b/frontend/app/(main)/COMPANY_30/master-data/options/page.tsx
new file mode 100644
index 00000000..7506ad94
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/master-data/options/page.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { Settings2, Tags, Hash } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { CategoryColumnList } from "@/components/table-category/CategoryColumnList";
+import { CategoryValueManager } from "@/components/table-category/CategoryValueManager";
+import { NumberingRuleDesigner } from "@/components/numbering-rule/NumberingRuleDesigner";
+
+const TABS = [
+  { id: "category", label: "카테고리 설정", icon: Tags },
+  { id: "numbering", label: "코드 설정", icon: Hash },
+] as const;
+
+type TabId = (typeof TABS)[number]["id"];
+
+export default function OptionsSettingPage() {
+  const [activeTab, setActiveTab] = useState<TabId>("category");
+
+  const [selectedColumn, setSelectedColumn] = useState<string | null>(null);
+  const [selectedColumnLabel, setSelectedColumnLabel] = useState("");
+  const [selectedTableName, setSelectedTableName] = useState("");
+
+  const [leftWidth, setLeftWidth] = useState(340);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = useCallback(() => {
+    setIsDragging(true);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      setLeftWidth(Math.max(260, Math.min(500, e.clientX - rect.left)));
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
+
+  return (
+    <div className="flex h-full flex-col p-3 gap-3">
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <Settings2 className="h-4 w-4 text-primary" />
+          <h1 className="text-sm font-semibold">옵션 설정</h1>
+        </div>
+        <div className="flex bg-muted rounded-md p-0.5 gap-0.5">
+          {TABS.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  "flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-all",
+                  activeTab === tab.id
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <Icon className="h-3.5 w-3.5" />
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0">
+        {activeTab === "category" && (
+          <div ref={containerRef} className="flex h-full">
+            <div
+              style={{ width: leftWidth }}
+              className="shrink-0 border rounded-lg bg-card overflow-hidden"
+            >
+              <CategoryColumnList
+                tableName=""
+                selectedColumn={selectedColumn}
+                onColumnSelect={(uniqueKey, label, tableName) => {
+                  setSelectedColumn(uniqueKey);
+                  setSelectedColumnLabel(label);
+                  setSelectedTableName(tableName);
+                }}
+              />
+            </div>
+
+            <div
+              onMouseDown={handleMouseDown}
+              className={cn(
+                "w-1.5 mx-0.5 cursor-col-resize rounded-full transition-colors shrink-0",
+                isDragging ? "bg-primary" : "bg-border hover:bg-primary/50"
+              )}
+            />
+
+            <div className="flex-1 min-w-0 border rounded-lg bg-card overflow-hidden">
+              {selectedColumn && selectedTableName ? (
+                <CategoryValueManager
+                  tableName={selectedTableName}
+                  columnName={selectedColumn.includes(".") ? selectedColumn.split(".").pop()! : selectedColumn}
+                  columnLabel={selectedColumnLabel}
+                />
+              ) : (
+                <div className="flex h-full items-center justify-center">
+                  <div className="text-center space-y-2">
+                    <Tags className="h-8 w-8 mx-auto text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">좌측에서 카테고리 컬럼을 선택해주세요</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {activeTab === "numbering" && (
+          <div className="h-full border rounded-lg bg-card overflow-auto">
+            <NumberingRuleDesigner />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/mold/info/page.tsx b/frontend/app/(main)/COMPANY_30/mold/info/page.tsx
new file mode 100644
index 00000000..dcd92eac
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/mold/info/page.tsx
@@ -0,0 +1,1450 @@
+"use client";
+
+/**
+ * 금형정보 — Type E 카드리스트형
+ *
+ * 좌측: 금형 카드 리스트 (이미지 + 코드 + 이름 + 유형뱃지 + 수명진행률)
+ * 우측: 금형 상세 + 탭 3개 (일련번호 / 점검항목 / 부품)
+ * 전용 API: /molds/*
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Plus, Trash2, Loader2, Pencil, Box, Inbox, Search,
+  Wrench, ClipboardCheck, Package, LayoutGrid, List,
+  Image as ImageIcon, Upload, X as XIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+
+// ─── API base ───
+const API = "/mold";
+
+// ─── 상태/유형 매핑 ───
+const STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  ACTIVE: { label: "사용중", variant: "default" },
+  INSPECTION: { label: "점검중", variant: "secondary" },
+  REPAIR: { label: "수리중", variant: "outline" },
+  DISPOSED: { label: "폐기", variant: "destructive" },
+};
+
+const SERIAL_STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  IN_USE: { label: "사용중", variant: "default" },
+  STORED: { label: "보관중", variant: "secondary" },
+  REPAIR: { label: "수리중", variant: "outline" },
+  DISPOSED: { label: "폐기", variant: "destructive" },
+};
+
+// ─── 수명 진행률 색상 ───
+function getProgressColor(pct: number) {
+  if (pct < 60) return "bg-success";
+  if (pct < 85) return "bg-warning";
+  return "bg-destructive";
+}
+
+function getProgressTextColor(pct: number) {
+  if (pct < 60) return "text-success";
+  if (pct < 85) return "text-warning";
+  return "text-destructive";
+}
+
+export default function MoldInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // ─── 좌측: 금형 목록 ───
+  const [molds, setMolds] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedMoldCode, setSelectedMoldCode] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<"list" | "grid">("list");
+
+  // ─── 검색 필터 ───
+  const [filterCode, setFilterCode] = useState("");
+  const [filterName, setFilterName] = useState("");
+  const [filterType, setFilterType] = useState("");
+  const [filterStatus, setFilterStatus] = useState("");
+
+  // ─── 우측: 상세 ───
+  const [detail, setDetail] = useState<any>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [serialSummary, setSerialSummary] = useState<any>(null);
+  const [rightTab, setRightTab] = useState("serial");
+
+  // ─── 일련번호 ───
+  const [serials, setSerials] = useState<any[]>([]);
+  const [serialLoading, setSerialLoading] = useState(false);
+
+  // ─── 점검항목 ───
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspectionLoading, setInspectionLoading] = useState(false);
+
+  // ─── 부품 ───
+  const [parts, setParts] = useState<any[]>([]);
+  const [partLoading, setPartLoading] = useState(false);
+
+  // ─── 모달 ───
+  const [moldModalOpen, setMoldModalOpen] = useState(false);
+  const [moldEditMode, setMoldEditMode] = useState(false);
+  const [moldForm, setMoldForm] = useState<Record<string, any>>({});
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [moldImagePreview, setMoldImagePreview] = useState<string | null>(null);
+  const moldImageRef = React.useRef<HTMLInputElement>(null);
+
+  const [serialModalOpen, setSerialModalOpen] = useState(false);
+  const [serialForm, setSerialForm] = useState<Record<string, any>>({});
+
+  const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
+  const [inspectionForm, setInspectionForm] = useState<Record<string, any>>({});
+
+  const [partModalOpen, setPartModalOpen] = useState(false);
+  const [partForm, setPartForm] = useState<Record<string, any>>({});
+
+  // ─── 금형 목록 조회 ───
+  const fetchMolds = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      if (filterCode) params.mold_code = filterCode;
+      if (filterName) params.mold_name = filterName;
+      if (filterType) params.mold_type = filterType;
+      if (filterStatus) params.operation_status = filterStatus;
+
+      const res = await apiClient.get(API, { params });
+      setMolds(res.data?.data || []);
+    } catch {
+      toast.error("금형 목록을 불러올 수 없어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [filterCode, filterName, filterType, filterStatus]);
+
+  useEffect(() => { fetchMolds(); }, [fetchMolds]);
+
+  // ─── 금형 상세 + 하위 데이터 ───
+  const fetchDetail = useCallback(async (code: string) => {
+    setDetailLoading(true);
+    try {
+      const [detailRes, summaryRes] = await Promise.all([
+        apiClient.get(`${API}/${code}`),
+        apiClient.get(`${API}/${code}/serial-summary`),
+      ]);
+      setDetail(detailRes.data?.data || null);
+      setSerialSummary(summaryRes.data?.data || null);
+    } catch {
+      toast.error("금형 상세를 불러올 수 없어요.");
+    } finally {
+      setDetailLoading(false);
+    }
+  }, []);
+
+  const fetchSerials = useCallback(async (code: string) => {
+    setSerialLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/serials`);
+      setSerials(res.data?.data || []);
+    } catch {
+      toast.error("일련번호를 불러올 수 없어요.");
+    } finally {
+      setSerialLoading(false);
+    }
+  }, []);
+
+  const fetchInspections = useCallback(async (code: string) => {
+    setInspectionLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/inspections`);
+      setInspections(res.data?.data || []);
+    } catch {
+      toast.error("점검항목을 불러올 수 없어요.");
+    } finally {
+      setInspectionLoading(false);
+    }
+  }, []);
+
+  const fetchParts = useCallback(async (code: string) => {
+    setPartLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/parts`);
+      setParts(res.data?.data || []);
+    } catch {
+      toast.error("부품을 불러올 수 없어요.");
+    } finally {
+      setPartLoading(false);
+    }
+  }, []);
+
+  // 금형 선택
+  const handleSelectMold = useCallback((code: string) => {
+    setSelectedMoldCode(code);
+    setRightTab("serial");
+    fetchDetail(code);
+    fetchSerials(code);
+    fetchInspections(code);
+    fetchParts(code);
+  }, [fetchDetail, fetchSerials, fetchInspections, fetchParts]);
+
+  // 탭 변경 시 재조회
+  useEffect(() => {
+    if (!selectedMoldCode) return;
+    if (rightTab === "serial") fetchSerials(selectedMoldCode);
+    else if (rightTab === "inspection") fetchInspections(selectedMoldCode);
+    else if (rightTab === "part") fetchParts(selectedMoldCode);
+  }, [rightTab, selectedMoldCode, fetchSerials, fetchInspections, fetchParts]);
+
+  // ─── 금형 CRUD ───
+  const handleOpenRegister = async () => {
+    setMoldEditMode(false);
+    setMoldForm({});
+    setMoldImagePreview(null);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setMoldModalOpen(true);
+
+    // 채번 규칙 조회 (mold_mng.mold_code)
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/mold_mng/mold_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시 — 수동 입력 모드
+    }
+  };
+
+  const handleOpenEdit = () => {
+    if (!detail) return;
+    setMoldEditMode(true);
+    setMoldForm({ ...detail });
+    setMoldImagePreview(detail.image_path || null);
+    setMoldModalOpen(true);
+  };
+
+  const handleMoldImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result as string;
+      setMoldImagePreview(result);
+      setMoldForm((prev) => ({ ...prev, image_path: result }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleSaveMold = async () => {
+    // 등록 모드에서 채번이 없으면 수동 입력 필수
+    if (!moldEditMode && !numberingRuleId && !moldForm.mold_code) {
+      toast.error("금형코드와 금형명은 필수예요.");
+      return;
+    }
+    if (!moldForm.mold_name) {
+      toast.error("금형명은 필수예요.");
+      return;
+    }
+    if (moldEditMode && !moldForm.mold_code) {
+      toast.error("금형코드가 없어요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      if (moldEditMode) {
+        await apiClient.put(`${API}/${moldForm.mold_code}`, moldForm);
+        toast.success("금형이 수정되었어요.");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let saveData = { ...moldForm };
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            saveData.mold_code = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했어요.");
+            return;
+          }
+        }
+        await apiClient.post(API, saveData);
+        toast.success("금형이 등록되었어요.");
+      }
+      setMoldModalOpen(false);
+      fetchMolds();
+      if (moldEditMode && selectedMoldCode === moldForm.mold_code) {
+        fetchDetail(moldForm.mold_code);
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteMold = async () => {
+    if (!selectedMoldCode || !detail) return;
+    const ok = await confirm(
+      "금형을 삭제하시겠어요?",
+      { description: `"${detail.mold_name}" 금형과 하위 일련번호, 점검항목, 부품이 모두 삭제돼요.`, variant: "destructive" },
+    );
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/${selectedMoldCode}`);
+      toast.success("금형이 삭제되었어요.");
+      setSelectedMoldCode(null);
+      setDetail(null);
+      fetchMolds();
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 일련번호 CRUD ───
+  const handleSaveSerial = async () => {
+    if (!selectedMoldCode) return;
+    setSaving(true);
+    try {
+      if (serialForm.id) {
+        await apiClient.put(`${API}/serials/${serialForm.id}`, serialForm);
+        toast.success("일련번호가 수정되었어요.");
+      } else {
+        await apiClient.post(`${API}/${selectedMoldCode}/serials`, serialForm);
+        toast.success("일련번호가 등록되었어요.");
+      }
+      setSerialModalOpen(false);
+      setSerialForm({});
+      fetchSerials(selectedMoldCode);
+      fetchDetail(selectedMoldCode);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteSerial = async (id: number) => {
+    const ok = await confirm("이 일련번호를 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/serials/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) {
+        fetchSerials(selectedMoldCode);
+        fetchDetail(selectedMoldCode);
+      }
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 점검항목 CRUD ───
+  const handleAddInspection = async () => {
+    if (!selectedMoldCode) return;
+    if (!inspectionForm.inspection_item) {
+      toast.error("점검항목명은 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      await apiClient.post(`${API}/${selectedMoldCode}/inspections`, inspectionForm);
+      toast.success("점검항목이 등록되었어요.");
+      setInspectionModalOpen(false);
+      setInspectionForm({});
+      fetchInspections(selectedMoldCode);
+    } catch {
+      toast.error("등록에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteInspection = async (id: number) => {
+    const ok = await confirm("이 점검항목을 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/inspections/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) fetchInspections(selectedMoldCode);
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 부품 CRUD ───
+  const handleAddPart = async () => {
+    if (!selectedMoldCode) return;
+    if (!partForm.part_name) {
+      toast.error("부품명은 필수예요.");
+      return;
+    }
+    if (!partForm.replacement_cycle) {
+      toast.error("교체주기는 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      await apiClient.post(`${API}/${selectedMoldCode}/parts`, partForm);
+      toast.success("부품이 등록되었어요.");
+      setPartModalOpen(false);
+      setPartForm({});
+      fetchParts(selectedMoldCode);
+    } catch {
+      toast.error("등록에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeletePart = async (id: number) => {
+    const ok = await confirm("이 부품을 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/parts/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) fetchParts(selectedMoldCode);
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 수명 진행률 계산 ───
+  const calcLifePct = (mold: any) => {
+    const max = Number(mold.shot_count) || 0;
+    const current = Number(mold.current_shot_count) || 0;
+    if (max <= 0) return 0;
+    return Math.min(Math.round((current / max) * 100), 100);
+  };
+
+  // ─── 카드 렌더링 ───
+  const renderCard = (mold: any) => {
+    const pct = calcLifePct(mold);
+    const st = STATUS_MAP[mold.operation_status] || { label: mold.operation_status || "-", variant: "secondary" as const };
+    const isSelected = selectedMoldCode === mold.mold_code;
+
+    return (
+      <div
+        key={mold.mold_code}
+        onClick={() => handleSelectMold(mold.mold_code)}
+        className={cn(
+          "rounded-lg border cursor-pointer transition-all overflow-hidden",
+          "hover:shadow-md hover:-translate-y-0.5",
+          isSelected
+            ? "border-primary ring-2 ring-primary/25"
+            : "border-border hover:border-border",
+          viewMode === "list" ? "flex flex-row" : "",
+        )}
+      >
+        {/* 이미지 영역 */}
+        <div className={cn(
+          "bg-muted flex items-center justify-center relative",
+          viewMode === "list"
+            ? "w-[120px] min-w-[120px] min-h-[100px]"
+            : "h-[160px]",
+        )}>
+          {mold.image_path ? (
+            <img
+              src={mold.image_path}
+              alt={mold.mold_name}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <Box className="w-8 h-8 text-muted-foreground/50" />
+          )}
+          <div className="absolute top-2 right-2">
+            <Badge variant={st.variant} className="text-[10px]">{st.label}</Badge>
+          </div>
+        </div>
+
+        {/* 본문 */}
+        <div className={cn("flex-1 p-3", viewMode === "list" && "flex items-center gap-4")}>
+          <div className="flex-1 min-w-0">
+            <p className="text-xs text-muted-foreground font-mono truncate">{mold.mold_code}</p>
+            <p className="text-sm font-semibold truncate">{mold.mold_name}</p>
+            {mold.mold_type && (
+              <Badge variant="outline" className="text-[10px] mt-1">{mold.mold_type}</Badge>
+            )}
+          </div>
+
+          {/* 수명 진행률 */}
+          <div className={cn("mt-2", viewMode === "list" && "mt-0 min-w-[140px]")}>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-[11px] text-muted-foreground">수명</span>
+              <span className={cn("text-[11px] font-mono font-semibold", getProgressTextColor(pct))}>
+                {pct}%
+              </span>
+            </div>
+            <div className="h-1 bg-muted rounded-full overflow-hidden">
+              <div
+                className={cn("h-full rounded-full transition-all", getProgressColor(pct))}
+                style={{ width: `${pct}%` }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // ─── 선택 금형 상세 ───
+  const selectedMold = detail;
+  const lifePct = selectedMold ? calcLifePct(selectedMold) : 0;
+
+  return (
+    <div className="flex flex-col h-full p-3 gap-3 overflow-hidden">
+      {ConfirmDialogComponent}
+
+      {/* 검색 필터 */}
+      <div className="rounded-lg border bg-card p-3">
+        <div className="flex flex-wrap items-end gap-3">
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형코드</Label>
+            <Input
+              className="h-9 w-[160px] text-sm"
+              placeholder="코드를 입력해주세요"
+              value={filterCode}
+              onChange={(e) => setFilterCode(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형명</Label>
+            <Input
+              className="h-9 w-[160px] text-sm"
+              placeholder="금형명을 입력해주세요"
+              value={filterName}
+              onChange={(e) => setFilterName(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형유형</Label>
+            <Select value={filterType || "__all__"} onValueChange={(v) => setFilterType(v === "__all__" ? "" : v)}>
+              <SelectTrigger className="h-9 w-[140px] text-sm">
+                <SelectValue placeholder="전체" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체</SelectItem>
+                <SelectItem value="사출금형">사출금형</SelectItem>
+                <SelectItem value="프레스금형">프레스금형</SelectItem>
+                <SelectItem value="다이캐스팅">다이캐스팅</SelectItem>
+                <SelectItem value="단조금형">단조금형</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">상태</Label>
+            <Select value={filterStatus || "__all__"} onValueChange={(v) => setFilterStatus(v === "__all__" ? "" : v)}>
+              <SelectTrigger className="h-9 w-[140px] text-sm">
+                <SelectValue placeholder="전체" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체</SelectItem>
+                <SelectItem value="ACTIVE">사용중</SelectItem>
+                <SelectItem value="INSPECTION">점검중</SelectItem>
+                <SelectItem value="REPAIR">수리중</SelectItem>
+                <SelectItem value="DISPOSED">폐기</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <Button size="sm" className="h-9" onClick={fetchMolds}>
+            <Search className="w-4 h-4 mr-1" />
+            조회
+          </Button>
+        </div>
+      </div>
+
+      {/* 메인 분할 패널 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 rounded-lg border bg-card overflow-hidden">
+        {/* ─── 좌측: 카드 리스트 ─── */}
+        <ResizablePanel defaultSize={35} minSize={20} maxSize={50}>
+          <div className="flex flex-col h-full">
+            {/* 패널 헤더 */}
+            <div className="flex items-center justify-between px-4 py-3 border-b">
+              <div className="flex items-center gap-2">
+                <h3 className="text-sm font-semibold">금형 목록</h3>
+                <span className="text-xs font-mono font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full">
+                  {molds.length}
+                </span>
+              </div>
+              <div className="flex items-center gap-1.5">
+                {/* 뷰 토글 */}
+                <div className="flex border rounded overflow-hidden">
+                  <button
+                    onClick={() => setViewMode("grid")}
+                    className={cn(
+                      "p-1.5 transition-colors",
+                      viewMode === "grid"
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground/50 hover:text-muted-foreground hover:bg-accent",
+                    )}
+                  >
+                    <LayoutGrid className="w-3.5 h-3.5" />
+                  </button>
+                  <button
+                    onClick={() => setViewMode("list")}
+                    className={cn(
+                      "p-1.5 transition-colors border-l",
+                      viewMode === "list"
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground/50 hover:text-muted-foreground hover:bg-accent",
+                    )}
+                  >
+                    <List className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+                <Button size="sm" className="h-8" onClick={handleOpenRegister}>
+                  <Plus className="w-4 h-4 mr-1" />
+                  등록
+                </Button>
+              </div>
+            </div>
+
+            {/* 카드 스크롤 영역 */}
+            <div className="flex-1 overflow-y-auto p-2">
+              {loading ? (
+                <div className="flex items-center justify-center h-40">
+                  <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : molds.length === 0 ? (
+                <div className="flex flex-col items-center justify-center h-40 gap-2 text-muted-foreground">
+                  <Inbox className="w-10 h-10 opacity-40" />
+                  <p className="text-sm">등록된 금형이 없어요.</p>
+                </div>
+              ) : (
+                <div className={cn(
+                  "grid gap-2",
+                  viewMode === "grid"
+                    ? "grid-cols-[repeat(auto-fill,minmax(200px,1fr))]"
+                    : "grid-cols-1",
+                )}>
+                  {molds.map(renderCard)}
+                </div>
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* ─── 우측: 상세 ─── */}
+        <ResizablePanel defaultSize={65} minSize={40}>
+          <div className="flex flex-col h-full overflow-y-auto">
+            {!selectedMoldCode ? (
+              <div className="flex flex-col items-center justify-center h-full gap-3 text-muted-foreground">
+                <Box className="w-14 h-14 opacity-30" />
+                <p className="text-sm font-medium">좌측에서 금형을 선택해주세요</p>
+                <p className="text-xs text-muted-foreground/60">금형을 선택하면 상세 정보를 확인할 수 있어요</p>
+              </div>
+            ) : detailLoading ? (
+              <div className="flex items-center justify-center h-full">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : selectedMold ? (
+              <div className="p-5">
+                {/* 상세 헤더 */}
+                <div className="flex gap-5 pb-5 border-b mb-4">
+                  {/* 이미지 */}
+                  <div className="w-[200px] min-w-[200px] h-[200px] bg-muted rounded-lg flex items-center justify-center border">
+                    {selectedMold.image_path ? (
+                      <img
+                        src={selectedMold.image_path}
+                        alt={selectedMold.mold_name}
+                        className="w-full h-full object-cover rounded-lg"
+                      />
+                    ) : (
+                      <ImageIcon className="w-16 h-16 text-muted-foreground/40" />
+                    )}
+                  </div>
+
+                  {/* 메타 정보 */}
+                  <div className="flex-1 flex flex-col justify-center min-w-0">
+                    <p className="text-xs text-muted-foreground font-mono mb-1">{selectedMold.mold_code}</p>
+                    <h2 className="text-xl font-bold mb-2 truncate">{selectedMold.mold_name}</h2>
+                    <div className="flex gap-1.5 mb-4 flex-wrap">
+                      {selectedMold.mold_type && (
+                        <Badge variant="outline">{selectedMold.mold_type}</Badge>
+                      )}
+                      {selectedMold.category && (
+                        <Badge variant="secondary">{selectedMold.category}</Badge>
+                      )}
+                      <Badge variant={STATUS_MAP[selectedMold.operation_status]?.variant || "secondary"}>
+                        {STATUS_MAP[selectedMold.operation_status]?.label || selectedMold.operation_status || "-"}
+                      </Badge>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-x-5 gap-y-2 text-sm">
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">제조사</span>
+                        <p className="text-foreground">{selectedMold.manufacturer || "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">제작일</span>
+                        <p className="text-foreground">{selectedMold.manufacturing_date || "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">캐비티수</span>
+                        <p className="text-foreground font-mono">{selectedMold.cavity_count ?? "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">수량</span>
+                        <p className="text-foreground font-mono">{selectedMold.mold_quantity ?? "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">최대수명</span>
+                        <p className="text-foreground font-mono">{Number(selectedMold.shot_count || 0).toLocaleString()}회</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">보증수명</span>
+                        <p className="text-foreground font-mono">{Number(selectedMold.warranty_shot_count || 0).toLocaleString()}회</p>
+                      </div>
+                    </div>
+
+                    {/* 수명 진행률 바 */}
+                    <div className="mt-3">
+                      <div className="flex items-center justify-between mb-1">
+                        <span className="text-xs text-muted-foreground">수명 사용률</span>
+                        <span className={cn("text-sm font-mono font-semibold", getProgressTextColor(lifePct))}>
+                          {lifePct}%
+                        </span>
+                      </div>
+                      <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                        <div
+                          className={cn("h-full rounded-full transition-all", getProgressColor(lifePct))}
+                          style={{ width: `${lifePct}%` }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 액션 버튼 */}
+                  <div className="flex flex-col gap-2 flex-shrink-0">
+                    <Button variant="outline" size="sm" className="h-8" onClick={handleOpenEdit}>
+                      <Pencil className="w-3.5 h-3.5 mr-1" />
+                      수정
+                    </Button>
+                    <Button variant="outline" size="sm" className="h-8 text-destructive hover:text-destructive" onClick={handleDeleteMold}>
+                      <Trash2 className="w-3.5 h-3.5 mr-1" />
+                      삭제
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 탭 3개 */}
+                <Tabs value={rightTab} onValueChange={setRightTab}>
+                  <TabsList className="w-full justify-start border-b rounded-none bg-transparent h-auto p-0">
+                    <TabsTrigger
+                      value="serial"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <Wrench className="w-4 h-4 mr-1.5" />
+                      일련번호
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {serials.length}
+                      </span>
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="inspection"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <ClipboardCheck className="w-4 h-4 mr-1.5" />
+                      점검항목
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {inspections.length}
+                      </span>
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="part"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <Package className="w-4 h-4 mr-1.5" />
+                      부품
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {parts.length}
+                      </span>
+                    </TabsTrigger>
+                  </TabsList>
+
+                  {/* ─── 탭1: 일련번호 ─── */}
+                  <TabsContent value="serial" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">
+                        {serialSummary && (
+                          <>
+                            사용중 {serialSummary.in_use || 0} · 보관중 {serialSummary.stored || 0} · 수리중 {serialSummary.repair || 0} · 폐기 {serialSummary.disposed || 0}
+                          </>
+                        )}
+                      </span>
+                      <Button size="sm" className="h-8" onClick={() => { setSerialForm({}); setSerialModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        일련번호 등록
+                      </Button>
+                    </div>
+                    {serialLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : serials.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <Wrench className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 일련번호가 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">일련번호</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[200px]">샷수 현황</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">보관위치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                              <TableHead className="text-xs w-[80px]">작업</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {serials.map((s: any) => {
+                              const ss = SERIAL_STATUS_MAP[s.status] || { label: s.status || "-", variant: "secondary" as const };
+                              const maxShot = detail?.shot_count || 0;
+                              const curShot = s.current_shot_count || 0;
+                              const pct = maxShot > 0 ? Math.min(Math.round((curShot / maxShot) * 100), 100) : 0;
+                              return (
+                                <TableRow key={s.id}>
+                                  <TableCell className="text-[13px] font-mono font-semibold">{s.serial_number}</TableCell>
+                                  <TableCell>
+                                    <Badge variant={ss.variant} className="text-[10px]">{ss.label}</Badge>
+                                  </TableCell>
+                                  <TableCell>
+                                    {maxShot > 0 ? (
+                                      <div className="space-y-1">
+                                        <div className="flex items-center gap-2">
+                                          <div className="flex-1 h-3 bg-muted rounded-full overflow-hidden">
+                                            <div
+                                              className={cn("h-full rounded-full transition-all", getProgressColor(pct))}
+                                              style={{ width: `${pct}%` }}
+                                            />
+                                          </div>
+                                          <span className={cn("text-xs font-bold min-w-[36px] text-right", getProgressTextColor(pct))}>
+                                            {pct}%
+                                          </span>
+                                        </div>
+                                        <p className="text-[11px] text-muted-foreground">
+                                          {curShot.toLocaleString()} / {maxShot.toLocaleString()}
+                                        </p>
+                                      </div>
+                                    ) : (
+                                      <span className="text-xs text-muted-foreground">-</span>
+                                    )}
+                                  </TableCell>
+                                  <TableCell className="text-[13px]">{s.storage_location || "-"}</TableCell>
+                                  <TableCell className="text-[13px] text-muted-foreground">{s.remarks || "-"}</TableCell>
+                                  <TableCell>
+                                    <div className="flex items-center gap-1">
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-7 w-7 p-0"
+                                        onClick={() => {
+                                          setSerialForm(s);
+                                          setSerialModalOpen(true);
+                                        }}
+                                      >
+                                        <Pencil className="w-3.5 h-3.5" />
+                                      </Button>
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                        onClick={() => handleDeleteSerial(s.id)}
+                                      >
+                                        <Trash2 className="w-3.5 h-3.5" />
+                                      </Button>
+                                    </div>
+                                  </TableCell>
+                                </TableRow>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+
+                  {/* ─── 탭2: 점검항목 ─── */}
+                  <TabsContent value="inspection" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">점검항목 목록</span>
+                      <Button size="sm" className="h-8" onClick={() => { setInspectionForm({}); setInspectionModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        점검항목 등록
+                      </Button>
+                    </div>
+                    {inspectionLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : inspections.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <ClipboardCheck className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 점검항목이 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검항목</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">하한치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                              <TableHead className="text-xs w-[60px]" />
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {inspections.map((ins: any) => (
+                              <TableRow key={ins.id}>
+                                <TableCell className="text-[13px] font-medium">{ins.inspection_item}</TableCell>
+                                <TableCell className="text-[13px]">{ins.inspection_cycle || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{ins.inspection_method || "-"}</TableCell>
+                                <TableCell className="text-[13px] font-mono">{ins.lower_limit || "-"}</TableCell>
+                                <TableCell className="text-[13px] font-mono">{ins.upper_limit || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{ins.unit || "-"}</TableCell>
+                                <TableCell>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                    onClick={() => handleDeleteInspection(ins.id)}
+                                  >
+                                    <Trash2 className="w-3.5 h-3.5" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+
+                  {/* ─── 탭3: 부품 ─── */}
+                  <TabsContent value="part" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">부품 목록</span>
+                      <Button size="sm" className="h-8" onClick={() => { setPartForm({}); setPartModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        부품 등록
+                      </Button>
+                    </div>
+                    {partLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : parts.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <Package className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 부품이 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부품명</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">교체주기</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">제조사</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                              <TableHead className="text-xs w-[60px]" />
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {parts.map((p: any) => (
+                              <TableRow key={p.id}>
+                                <TableCell className="text-[13px] font-medium">{p.part_name}</TableCell>
+                                <TableCell className="text-[13px]">{p.replacement_cycle || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.unit || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.specification || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.manufacturer || "-"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{p.remarks || "-"}</TableCell>
+                                <TableCell>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                    onClick={() => handleDeletePart(p.id)}
+                                  >
+                                    <Trash2 className="w-3.5 h-3.5" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+                </Tabs>
+              </div>
+            ) : null}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 금형 등록/수정 모달 ========== */}
+      <Dialog open={moldModalOpen} onOpenChange={setMoldModalOpen}>
+        <DialogContent className="max-w-3xl overflow-y-auto" style={{ maxHeight: "90vh" }}>
+          <DialogHeader>
+            <DialogTitle>{moldEditMode ? "금형 수정" : "금형 등록"}</DialogTitle>
+            <DialogDescription>금형 기본 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형코드 <span className="text-destructive">*</span></Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldEditMode ? (moldForm.mold_code || "") : (numberingRuleId ? (previewCode || "") : (moldForm.mold_code || ""))}
+                  onChange={(e) => {
+                    if (!moldEditMode && !numberingRuleId) {
+                      setMoldForm({ ...moldForm, mold_code: e.target.value });
+                    }
+                  }}
+                  readOnly={moldEditMode || !!numberingRuleId}
+                  placeholder={moldEditMode ? "" : (numberingRuleId ? (previewCode ? "" : "자동 생성 중...") : "금형코드를 입력해주세요")}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형명 <span className="text-destructive">*</span></Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.mold_name || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, mold_name: e.target.value })}
+                  placeholder="금형명을 입력해주세요"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형유형</Label>
+                <Select
+                  value={moldForm.mold_type || ""}
+                  onValueChange={(v) => setMoldForm({ ...moldForm, mold_type: v })}
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="사출금형">사출금형</SelectItem>
+                    <SelectItem value="프레스금형">프레스금형</SelectItem>
+                    <SelectItem value="다이캐스팅">다이캐스팅</SelectItem>
+                    <SelectItem value="단조금형">단조금형</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">카테고리</Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.category || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, category: e.target.value })}
+                  placeholder="카테고리"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">제조사</Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.manufacturer || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, manufacturer: e.target.value })}
+                  placeholder="제조사"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">제작일</Label>
+                <Input
+                  type="date"
+                  className="h-9 text-sm"
+                  value={moldForm.manufacturing_date || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, manufacturing_date: e.target.value })}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">캐비티수</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.cavity_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, cavity_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">최대수명 (샷수)</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.shot_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, shot_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형수량</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.mold_quantity ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, mold_quantity: e.target.value })}
+                  min={1}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">가동상태</Label>
+                <Select
+                  value={moldForm.operation_status || ""}
+                  onValueChange={(v) => setMoldForm({ ...moldForm, operation_status: v })}
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="ACTIVE">사용중</SelectItem>
+                    <SelectItem value="INSPECTION">점검중</SelectItem>
+                    <SelectItem value="REPAIR">수리중</SelectItem>
+                    <SelectItem value="DISPOSED">폐기</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">보증수명 (샷수)</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.warranty_shot_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, warranty_shot_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형 이미지</Label>
+                <div className="relative w-full h-32 rounded-lg border-2 border-dashed border-border bg-muted/50 flex items-center justify-center overflow-hidden group">
+                  {moldImagePreview ? (
+                    <>
+                      <img src={moldImagePreview} alt="금형 이미지" className="w-full h-full object-contain" />
+                      <div className="absolute inset-0 bg-foreground/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                        <Button size="sm" variant="secondary" className="h-7 text-xs" type="button" onClick={() => moldImageRef.current?.click()}>
+                          <Upload className="w-3 h-3 mr-1" /> 변경
+                        </Button>
+                        <Button size="sm" variant="destructive" className="h-7 text-xs" type="button" onClick={() => {
+                          setMoldImagePreview(null);
+                          setMoldForm((prev) => ({ ...prev, image_path: null }));
+                        }}>
+                          <XIcon className="w-3 h-3" />
+                        </Button>
+                      </div>
+                    </>
+                  ) : (
+                    <button
+                      type="button"
+                      className="flex flex-col items-center gap-1.5 text-muted-foreground"
+                      onClick={() => moldImageRef.current?.click()}
+                    >
+                      <ImageIcon className="w-8 h-8" />
+                      <span className="text-xs">이미지 업로드</span>
+                    </button>
+                  )}
+                </div>
+                <input
+                  ref={moldImageRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleMoldImageUpload}
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setMoldModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleSaveMold} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              {moldEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 일련번호 등록/수정 모달 ========== */}
+      <Dialog open={serialModalOpen} onOpenChange={setSerialModalOpen}>
+        <DialogContent className="sm:max-w-[480px]">
+          <DialogHeader>
+            <DialogTitle>{serialForm.id ? "일련번호 수정" : "일련번호 등록"}</DialogTitle>
+            <DialogDescription>{serialForm.id ? `${serialForm.serial_number} 정보를 수정해요.` : "일련번호는 자동으로 채번돼요."}</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">상태</Label>
+              <Select
+                value={serialForm.status || "STORED"}
+                onValueChange={(v) => setSerialForm({ ...serialForm, status: v })}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="IN_USE">사용중</SelectItem>
+                  <SelectItem value="STORED">보관중</SelectItem>
+                  <SelectItem value="REPAIR">수리중</SelectItem>
+                  <SelectItem value="DISPOSED">폐기</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">현재 샷수</Label>
+              <Input
+                type="number"
+                className="h-9 text-sm font-mono"
+                value={serialForm.current_shot_count ?? ""}
+                onChange={(e) => setSerialForm({ ...serialForm, current_shot_count: e.target.value ? Number(e.target.value) : null })}
+                placeholder="0"
+                min={0}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">보관위치</Label>
+              <Input
+                className="h-9 text-sm"
+                value={serialForm.storage_location || ""}
+                onChange={(e) => setSerialForm({ ...serialForm, storage_location: e.target.value })}
+                placeholder="보관위치"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">비고</Label>
+              <Input
+                className="h-9 text-sm"
+                value={serialForm.remarks || ""}
+                onChange={(e) => setSerialForm({ ...serialForm, remarks: e.target.value })}
+                placeholder="비고"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setSerialModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleSaveSerial} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              {serialForm.id ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 점검항목 등록 모달 ========== */}
+      <Dialog open={inspectionModalOpen} onOpenChange={setInspectionModalOpen}>
+        <DialogContent className="sm:max-w-[560px]">
+          <DialogHeader>
+            <DialogTitle>점검항목 등록</DialogTitle>
+            <DialogDescription>금형 점검항목을 등록해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">점검항목명 <span className="text-destructive">*</span></Label>
+              <Input
+                className="h-9 text-sm"
+                value={inspectionForm.inspection_item || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_item: e.target.value })}
+                placeholder="점검항목명"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">점검주기</Label>
+              <Input
+                className="h-9 text-sm"
+                value={inspectionForm.inspection_cycle || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_cycle: e.target.value })}
+                placeholder="예: 월 1회"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">점검방법 <span className="text-destructive">*</span></Label>
+              <Select
+                value={inspectionForm.inspection_method || ""}
+                onValueChange={(v) => {
+                  const updated: Record<string, any> = { ...inspectionForm, inspection_method: v };
+                  if (v !== "숫자") {
+                    updated.lower_limit = "";
+                    updated.upper_limit = "";
+                    updated.unit = "";
+                  }
+                  setInspectionForm(updated);
+                }}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue placeholder="선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="숫자">숫자</SelectItem>
+                  <SelectItem value="텍스트">텍스트</SelectItem>
+                  <SelectItem value="합격/불합격">합격/불합격</SelectItem>
+                  <SelectItem value="양호/불량">양호/불량</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            {inspectionForm.inspection_method === "숫자" && (
+              <>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">기준값</Label>
+                  <Input
+                    type="number"
+                    className="h-9 text-sm font-mono"
+                    value={inspectionForm.lower_limit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, lower_limit: e.target.value })}
+                    placeholder="기준값"
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">±오차범위</Label>
+                  <Input
+                    type="number"
+                    className="h-9 text-sm font-mono"
+                    value={inspectionForm.upper_limit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, upper_limit: e.target.value })}
+                    placeholder="허용 오차"
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">단위</Label>
+                  <Input
+                    className="h-9 text-sm"
+                    value={inspectionForm.unit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, unit: e.target.value })}
+                    placeholder="mm, ℃ 등"
+                  />
+                </div>
+              </>
+            )}
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">점검내용</Label>
+              <textarea
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 resize-y"
+                value={inspectionForm.inspection_content || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_content: e.target.value })}
+                placeholder="상세 내용"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setInspectionModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleAddInspection} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              등록하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 부품 등록 모달 ========== */}
+      <Dialog open={partModalOpen} onOpenChange={setPartModalOpen}>
+        <DialogContent className="sm:max-w-[560px]">
+          <DialogHeader>
+            <DialogTitle>부품 등록</DialogTitle>
+            <DialogDescription>금형 부품을 등록해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">부품명 <span className="text-destructive">*</span></Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.part_name || ""}
+                onChange={(e) => setPartForm({ ...partForm, part_name: e.target.value })}
+                placeholder="부품명"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">교체주기 <span className="text-destructive">*</span></Label>
+              <Select
+                value={partForm.replacement_cycle || ""}
+                onValueChange={(v) => setPartForm({ ...partForm, replacement_cycle: v })}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue placeholder="선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1만 샷">1만 샷</SelectItem>
+                  <SelectItem value="5만 샷">5만 샷</SelectItem>
+                  <SelectItem value="10만 샷">10만 샷</SelectItem>
+                  <SelectItem value="월 1회">월 1회</SelectItem>
+                  <SelectItem value="3개월">3개월</SelectItem>
+                  <SelectItem value="6개월">6개월</SelectItem>
+                  <SelectItem value="1년">1년</SelectItem>
+                  <SelectItem value="수시">수시</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">단위</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.unit || ""}
+                onChange={(e) => setPartForm({ ...partForm, unit: e.target.value })}
+                placeholder="EA, SET 등"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">규격</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.specification || ""}
+                onChange={(e) => setPartForm({ ...partForm, specification: e.target.value })}
+                placeholder="규격"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">제조사</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.manufacturer || ""}
+                onChange={(e) => setPartForm({ ...partForm, manufacturer: e.target.value })}
+                placeholder="제조사"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">비고</Label>
+              <textarea
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 resize-y"
+                value={partForm.remarks || ""}
+                onChange={(e) => setPartForm({ ...partForm, remarks: e.target.value })}
+                placeholder="비고"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setPartModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleAddPart} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              등록하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/monitoring/equipment/page.tsx b/frontend/app/(main)/COMPANY_30/monitoring/equipment/page.tsx
new file mode 100644
index 00000000..ccb5aaf6
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/monitoring/equipment/page.tsx
@@ -0,0 +1,575 @@
+"use client";
+
+/**
+ * 설비운영모니터링 — 하드코딩 페이지
+ *
+ * 설비(equipment_mng) 목록 + 작업지시(work_instruction) 연결
+ * 실시간 카드 그리드 형태 모니터링 대시보드
+ */
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Wrench,
+  Zap,
+  Pause,
+  Power,
+} from "lucide-react";
+
+/* ───── 상태 정의 ───── */
+
+type OperationStatus = "running" | "idle" | "maintenance" | "off" | "unknown";
+
+interface StatusConfig {
+  label: string;
+  color: string;
+  bg: string;
+  border: string;
+  bar: string;
+  icon: React.ReactNode;
+  badgeBg: string;
+  badgeText: string;
+  cardGlow: string;
+}
+
+const STATUS_MAP: Record<OperationStatus, StatusConfig> = {
+  running: {
+    label: "가동중",
+    color: "text-emerald-400",
+    bg: "bg-emerald-500/10",
+    border: "border-emerald-500/30",
+    bar: "bg-emerald-400",
+    icon: <Zap className="h-4 w-4" />,
+    badgeBg: "bg-emerald-500/20",
+    badgeText: "text-emerald-300",
+    cardGlow: "shadow-emerald-500/5",
+  },
+  idle: {
+    label: "대기",
+    color: "text-amber-400",
+    bg: "bg-amber-500/10",
+    border: "border-amber-500/30",
+    bar: "bg-amber-400",
+    icon: <Pause className="h-4 w-4" />,
+    badgeBg: "bg-amber-500/20",
+    badgeText: "text-amber-300",
+    cardGlow: "shadow-amber-500/5",
+  },
+  maintenance: {
+    label: "점검/수리",
+    color: "text-red-400",
+    bg: "bg-red-500/10",
+    border: "border-red-500/30",
+    bar: "bg-red-400",
+    icon: <Wrench className="h-4 w-4" />,
+    badgeBg: "bg-red-500/20",
+    badgeText: "text-red-300",
+    cardGlow: "shadow-red-500/5",
+  },
+  off: {
+    label: "비가동",
+    color: "text-gray-400",
+    bg: "bg-gray-500/10",
+    border: "border-gray-500/30",
+    bar: "bg-gray-500",
+    icon: <Power className="h-4 w-4" />,
+    badgeBg: "bg-gray-500/20",
+    badgeText: "text-gray-400",
+    cardGlow: "shadow-gray-500/5",
+  },
+  unknown: {
+    label: "미설정",
+    color: "text-gray-500",
+    bg: "bg-gray-500/10",
+    border: "border-gray-600/30",
+    bar: "bg-gray-600",
+    icon: <Power className="h-4 w-4" />,
+    badgeBg: "bg-gray-600/20",
+    badgeText: "text-gray-500",
+    cardGlow: "",
+  },
+};
+
+/** operation_status 값 → 내부 키 매핑 */
+function resolveStatus(raw: string | null | undefined): OperationStatus {
+  if (!raw) return "unknown";
+  const v = raw.trim().toLowerCase();
+  if (["running", "가동", "가동중"].includes(v)) return "running";
+  if (["idle", "대기"].includes(v)) return "idle";
+  if (["maintenance", "점검", "수리", "점검/수리", "점검중"].includes(v)) return "maintenance";
+  if (["off", "비가동", "정지"].includes(v)) return "off";
+  return "unknown";
+}
+
+/* ───── 타입 ───── */
+
+interface Equipment {
+  id: string;
+  equipment_code: string;
+  equipment_name: string;
+  equipment_type: string;
+  installation_location: string;
+  operation_status: string;
+  manufacturer: string;
+  model_name: string;
+  image_path: string;
+}
+
+interface WorkInstruction {
+  id: string;
+  instruction_number: string;
+  item_name: string;
+  equipment_id: string;
+  worker_name: string;
+  status: string;
+}
+
+/* ───── 컴포넌트 ───── */
+
+export default function EquipmentMonitoringPage() {
+  const [equipments, setEquipments] = useState<Equipment[]>([]);
+  const [workInstructions, setWorkInstructions] = useState<WorkInstruction[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [filterStatus, setFilterStatus] = useState<OperationStatus | "all">("all");
+  const autoRefreshRef = useRef(autoRefresh);
+
+  // autoRefreshRef 동기화
+  useEffect(() => {
+    autoRefreshRef.current = autoRefresh;
+  }, [autoRefresh]);
+
+  /* ── 시간 업데이트 ── */
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* ── 데이터 fetch ── */
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      const [equipRes, wiRes] = await Promise.all([
+        apiClient.post("/table-management/tables/equipment_mng/data", {
+          autoFilter: true,
+          page: 1,
+          size: 500,
+        }),
+        apiClient.get("/work-instruction/list").catch(() => ({ data: { data: [] } })),
+      ]);
+
+      const eqRows: Equipment[] = equipRes.data?.data?.rows ?? equipRes.data?.rows ?? [];
+      setEquipments(eqRows);
+
+      const wiRows: WorkInstruction[] = wiRes.data?.data ?? wiRes.data?.rows ?? [];
+      setWorkInstructions(wiRows);
+    } catch (err) {
+      console.error("설비 모니터링 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ── 자동 갱신 (30초) ── */
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (autoRefreshRef.current) fetchData();
+    }, 30000);
+    return () => clearInterval(interval);
+  }, [fetchData]);
+
+  /* ── 요약 통계 ── */
+  const stats = useMemo(() => {
+    const counts: Record<OperationStatus, number> = {
+      running: 0,
+      idle: 0,
+      maintenance: 0,
+      off: 0,
+      unknown: 0,
+    };
+    equipments.forEach((eq) => {
+      const s = resolveStatus(eq.operation_status);
+      counts[s]++;
+    });
+    return { total: equipments.length, ...counts };
+  }, [equipments]);
+
+  /* ── 필터된 설비 ── */
+  const filteredEquipments = useMemo(() => {
+    if (filterStatus === "all") return equipments;
+    return equipments.filter((eq) => resolveStatus(eq.operation_status) === filterStatus);
+  }, [equipments, filterStatus]);
+
+  /* ── 설비별 작업지시 맵 ── */
+  const wiMap = useMemo(() => {
+    const map: Record<string, WorkInstruction[]> = {};
+    workInstructions.forEach((wi) => {
+      if (wi.equipment_id) {
+        if (!map[wi.equipment_id]) map[wi.equipment_id] = [];
+        map[wi.equipment_id].push(wi);
+      }
+    });
+    return map;
+  }, [workInstructions]);
+
+  /* ── 가동률 (모킹 — 센서 미연동) ── */
+  const getUtilization = (eq: Equipment): number | null => {
+    const s = resolveStatus(eq.operation_status);
+    if (s === "running") return 75 + Math.floor(Math.random() * 20); // 75~94
+    if (s === "idle") return 20 + Math.floor(Math.random() * 30); // 20~49
+    if (s === "maintenance") return 0;
+    if (s === "off") return 0;
+    return null;
+  };
+
+  /* ── 요약 카드 배열 ── */
+  const summaryCards: {
+    label: string;
+    count: number;
+    status: OperationStatus | "total";
+    color: string;
+    bg: string;
+    border: string;
+    icon: React.ReactNode;
+  }[] = [
+    {
+      label: "전체설비",
+      count: stats.total,
+      status: "total",
+      color: "text-blue-400",
+      bg: "bg-blue-500/10",
+      border: "border-blue-500/30",
+      icon: <Inbox className="h-5 w-5" />,
+    },
+    {
+      label: "가동중",
+      count: stats.running,
+      status: "running",
+      color: "text-emerald-400",
+      bg: "bg-emerald-500/10",
+      border: "border-emerald-500/30",
+      icon: <Zap className="h-5 w-5" />,
+    },
+    {
+      label: "대기",
+      count: stats.idle,
+      status: "idle",
+      color: "text-amber-400",
+      bg: "bg-amber-500/10",
+      border: "border-amber-500/30",
+      icon: <Pause className="h-5 w-5" />,
+    },
+    {
+      label: "점검/수리",
+      count: stats.maintenance,
+      status: "maintenance",
+      color: "text-red-400",
+      bg: "bg-red-500/10",
+      border: "border-red-500/30",
+      icon: <Wrench className="h-5 w-5" />,
+    },
+    {
+      label: "비가동",
+      count: stats.off + stats.unknown,
+      status: "off",
+      color: "text-gray-400",
+      bg: "bg-gray-500/10",
+      border: "border-gray-500/30",
+      icon: <Power className="h-5 w-5" />,
+    },
+  ];
+
+  /* ── 필터 pill ── */
+  const filterPills: { label: string; value: OperationStatus | "all"; color: string }[] = [
+    { label: "전체", value: "all", color: "bg-blue-500/20 text-blue-300 hover:bg-blue-500/30" },
+    { label: "가동중", value: "running", color: "bg-emerald-500/20 text-emerald-300 hover:bg-emerald-500/30" },
+    { label: "대기", value: "idle", color: "bg-amber-500/20 text-amber-300 hover:bg-amber-500/30" },
+    { label: "점검/수리", value: "maintenance", color: "bg-red-500/20 text-red-300 hover:bg-red-500/30" },
+    { label: "비가동", value: "off", color: "bg-gray-500/20 text-gray-300 hover:bg-gray-500/30" },
+  ];
+
+  /* ── 포맷 ── */
+  const formatTime = (d: Date) =>
+    d.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
+  const formatDate = (d: Date) =>
+    d.toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", weekday: "short" });
+
+  /* ────────────── 렌더 ────────────── */
+
+  return (
+    <div className="min-h-screen bg-gray-950 text-white p-4 md:p-6 space-y-5">
+      {/* ── 헤더 ── */}
+      <header className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <div className="h-8 w-1.5 rounded-full bg-amber-400" />
+          <h1 className="text-2xl font-bold tracking-tight">설비운영모니터링</h1>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* 현재 시간 */}
+          <div className="flex items-center gap-2 text-sm text-gray-400 bg-gray-800/60 rounded-lg px-3 py-1.5 border border-gray-700/50">
+            <Clock className="h-4 w-4" />
+            <span className="font-mono">{formatDate(currentTime)}</span>
+            <span className="font-mono text-white">{formatTime(currentTime)}</span>
+          </div>
+
+          {/* 자동갱신 토글 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn(
+              "border-gray-700 text-xs gap-1.5",
+              autoRefresh
+                ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20"
+                : "bg-gray-800 text-gray-400 hover:bg-gray-700"
+            )}
+            onClick={() => setAutoRefresh((v) => !v)}
+          >
+            <span className={cn("h-1.5 w-1.5 rounded-full", autoRefresh ? "bg-emerald-400 animate-pulse" : "bg-gray-600")} />
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+
+          {/* 새로고침 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-gray-700 bg-gray-800 text-gray-300 hover:bg-gray-700 gap-1.5"
+            onClick={fetchData}
+            disabled={loading}
+          >
+            <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+            새로고침
+          </Button>
+        </div>
+      </header>
+
+      {/* ── 요약 카드 5개 ── */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
+        {summaryCards.map((card) => (
+          <button
+            key={card.label}
+            onClick={() =>
+              setFilterStatus(card.status === "total" ? "all" : (card.status as OperationStatus))
+            }
+            className={cn(
+              "relative flex items-center gap-3 rounded-xl border px-4 py-3 transition-all hover:scale-[1.02]",
+              card.bg,
+              card.border,
+              "hover:shadow-lg"
+            )}
+          >
+            <div className={cn("flex items-center justify-center rounded-lg p-2", card.bg, card.color)}>
+              {card.icon}
+            </div>
+            <div className="text-left">
+              <p className="text-xs text-gray-500">{card.label}</p>
+              <p className={cn("text-2xl font-bold tabular-nums", card.color)}>{card.count}</p>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {/* ── 필터 pill ── */}
+      <div className="flex flex-wrap gap-2">
+        {filterPills.map((pill) => (
+          <button
+            key={pill.value}
+            onClick={() => setFilterStatus(pill.value)}
+            className={cn(
+              "rounded-full px-4 py-1.5 text-sm font-medium transition-all",
+              filterStatus === pill.value
+                ? cn(pill.color, "ring-1 ring-white/20")
+                : "bg-gray-800/60 text-gray-500 hover:text-gray-300 hover:bg-gray-800"
+            )}
+          >
+            {pill.label}
+          </button>
+        ))}
+        <span className="ml-auto text-sm text-gray-600 self-center">
+          {filteredEquipments.length}대 표시
+        </span>
+      </div>
+
+      {/* ── 로딩 ── */}
+      {loading && equipments.length === 0 && (
+        <div className="flex items-center justify-center py-20">
+          <Loader2 className="h-8 w-8 animate-spin text-gray-600" />
+          <span className="ml-3 text-gray-500">설비 데이터를 불러오는 중...</span>
+        </div>
+      )}
+
+      {/* ── 데이터 없음 ── */}
+      {!loading && equipments.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-gray-600">
+          <Inbox className="h-12 w-12 mb-3" />
+          <p className="text-lg">등록된 설비가 없습니다.</p>
+        </div>
+      )}
+
+      {/* ── 설비 카드 그리드 ── */}
+      {filteredEquipments.length > 0 && (
+        <div
+          className="grid gap-4"
+          style={{ gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))" }}
+        >
+          {filteredEquipments.map((eq) => {
+            const status = resolveStatus(eq.operation_status);
+            const cfg = STATUS_MAP[status];
+            const utilization = getUtilization(eq);
+            const eqWIs = wiMap[eq.id] ?? [];
+
+            return (
+              <div
+                key={eq.id}
+                className={cn(
+                  "relative overflow-hidden rounded-xl border bg-gray-900/80 backdrop-blur transition-all hover:shadow-lg",
+                  cfg.border,
+                  cfg.cardGlow
+                )}
+              >
+                {/* 좌측 색상 바 */}
+                <div className={cn("absolute left-0 top-0 bottom-0 w-1 rounded-l-xl", cfg.bar)} />
+
+                {/* 상단: 설비명 + 상태 배지 */}
+                <div className="flex items-start justify-between px-4 pt-3 pb-2 pl-5">
+                  <div className="min-w-0 flex-1">
+                    <h3 className="text-base font-semibold text-white truncate">
+                      {eq.equipment_name || "이름 없음"}
+                    </h3>
+                    <p className="text-xs text-gray-500 mt-0.5 truncate">
+                      {eq.equipment_type || "-"} · {eq.installation_location || "-"}
+                    </p>
+                  </div>
+                  <Badge
+                    className={cn(
+                      "ml-2 shrink-0 border-0 gap-1 text-xs font-medium",
+                      cfg.badgeBg,
+                      cfg.badgeText
+                    )}
+                  >
+                    {cfg.icon}
+                    {cfg.label}
+                  </Badge>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 정보 그리드 */}
+                <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 px-4 pl-5 py-2.5 text-sm">
+                  <div>
+                    <span className="text-gray-500 text-xs">금일 가동시간</span>
+                    <p className="text-white font-medium">-</p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">생산수량</span>
+                    <p className="text-white font-medium">-</p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">작업자</span>
+                    <p className="text-white font-medium">
+                      {eqWIs.length > 0 && eqWIs[0].worker_name
+                        ? eqWIs[0].worker_name
+                        : "-"}
+                    </p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">설비코드</span>
+                    <p className="text-white font-medium truncate">{eq.equipment_code || "-"}</p>
+                  </div>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 가동률 프로그레스 */}
+                <div className="px-4 pl-5 py-2.5">
+                  <div className="flex items-center justify-between text-xs mb-1.5">
+                    <span className="text-gray-500">가동률</span>
+                    <span className={cn("font-bold tabular-nums", utilization !== null ? cfg.color : "text-gray-600")}>
+                      {utilization !== null ? `${utilization}%` : "-"}
+                    </span>
+                  </div>
+                  <div className="h-2 w-full rounded-full bg-gray-800 overflow-hidden">
+                    {utilization !== null && (
+                      <div
+                        className={cn("h-full rounded-full transition-all duration-700", cfg.bar)}
+                        style={{ width: `${utilization}%` }}
+                      />
+                    )}
+                  </div>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 현재 작업지시 */}
+                <div className="px-4 pl-5 py-2.5">
+                  <p className="text-xs text-gray-500 mb-1">현재 작업지시</p>
+                  {eqWIs.length > 0 ? (
+                    <div className="space-y-1">
+                      {eqWIs.slice(0, 2).map((wi) => (
+                        <div key={wi.id} className="flex items-center gap-2 text-sm">
+                          <span className="text-blue-400 font-mono text-xs shrink-0">
+                            {wi.instruction_number || "-"}
+                          </span>
+                          <span className="text-gray-300 truncate">
+                            {wi.item_name || "-"}
+                          </span>
+                        </div>
+                      ))}
+                      {eqWIs.length > 2 && (
+                        <p className="text-xs text-gray-600">+{eqWIs.length - 2}건 더</p>
+                      )}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-gray-600 italic">배정된 작업 없음</p>
+                  )}
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 센서 데이터 (PLC 미연동) */}
+                <div className="flex items-center gap-4 px-4 pl-5 py-2.5 text-xs">
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">온도</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">압력</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">RPM</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* 필터 결과 없음 */}
+      {!loading && equipments.length > 0 && filteredEquipments.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 text-gray-600">
+          <Inbox className="h-10 w-10 mb-2" />
+          <p>해당 상태의 설비가 없습니다.</p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/monitoring/production/page.tsx b/frontend/app/(main)/COMPANY_30/monitoring/production/page.tsx
new file mode 100644
index 00000000..fb8aa24b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/monitoring/production/page.tsx
@@ -0,0 +1,504 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Timer,
+  CheckCircle2,
+  AlertTriangle,
+  TrendingUp,
+  Play,
+  Pause,
+} from "lucide-react";
+
+// ─── 타입 정의 ─────────────────────────────────────────────
+interface WorkInstructionDetail {
+  item_name?: string;
+  spec?: string;
+  customer_name?: string;
+}
+
+interface WorkInstruction {
+  id: string;
+  wi_id?: string;
+  work_instruction_no: string;
+  status: string; // 일반 / 긴급
+  qty: number;
+  completed_qty: number;
+  start_date: string | null;
+  end_date: string | null;
+  worker: string | null;
+  equipment_id: string | null;
+  equipment_name?: string | null;
+  details?: WorkInstructionDetail[];
+}
+
+interface ProcessStep {
+  wo_id: string;
+  process_name: string;
+  status: string; // acceptable / completed
+  seq_no: number;
+}
+
+type FilterTab = "전체" | "대기" | "진행중" | "완료";
+
+// ─── 유틸리티 ──────────────────────────────────────────────
+function formatDate(dateStr: string | null | undefined): string {
+  if (!dateStr) return "-";
+  try {
+    const d = new Date(dateStr);
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+  } catch {
+    return dateStr;
+  }
+}
+
+function formatTime(date: Date): string {
+  const h = String(date.getHours()).padStart(2, "0");
+  const m = String(date.getMinutes()).padStart(2, "0");
+  const s = String(date.getSeconds()).padStart(2, "0");
+  return `${h}:${m}:${s}`;
+}
+
+// 작업지시별 공정현황으로 진행상태 계산
+function computeProgress(
+  wiId: string,
+  processMap: Map<string, ProcessStep[]>
+): "대기" | "진행중" | "완료" {
+  const steps = processMap.get(wiId);
+  if (!steps || steps.length === 0) return "대기";
+  const completedCount = steps.filter((s) => s.status === "completed").length;
+  if (completedCount === 0) return "대기";
+  if (completedCount === steps.length) return "완료";
+  return "진행중";
+}
+
+// ─── 메인 컴포넌트 ────────────────────────────────────────
+export default function ProductionMonitoringPage() {
+  const [workInstructions, setWorkInstructions] = useState<WorkInstruction[]>([]);
+  const [processMap, setProcessMap] = useState<Map<string, ProcessStep[]>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [activeTab, setActiveTab] = useState<FilterTab>("전체");
+
+  // ─── 실시간 시계 ─────────────────────────────────────────
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // ─── 데이터 로드 ─────────────────────────────────────────
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+
+      // 작업지시 목록 조회
+      const wiRes = await apiClient.get("/work-instruction/list");
+      const wiRaw: WorkInstruction[] =
+        wiRes.data?.success && Array.isArray(wiRes.data.data) ? wiRes.data.data : [];
+      // 작업지시번호 기준 중복 제거 (디테일 JOIN으로 중복 발생 가능)
+      const seen = new Set<string>();
+      const wiData = wiRaw.filter((wi) => {
+        const key = wi.work_instruction_no || wi.id;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+      setWorkInstructions(wiData);
+
+      // 공정현황 조회 (실패해도 작업지시는 표시)
+      try {
+        const procRes = await apiClient.post("/table-management/tables/work_order_process/data", {
+          page: 1, size: 1000, autoFilter: true,
+        });
+        const rows: ProcessStep[] = procRes.data?.data?.data || procRes.data?.data?.rows || procRes.data?.data || [];
+
+        // wo_id별로 그룹핑 후, 같은 seq_no+process_name은 1건으로 합침 (배치 실행 이력 중복 제거)
+        const rawMap = new Map<string, ProcessStep[]>();
+        rows.forEach((row) => {
+          const key = String(row.wo_id);
+          if (!rawMap.has(key)) rawMap.set(key, []);
+          rawMap.get(key)!.push(row);
+        });
+
+        const map = new Map<string, ProcessStep[]>();
+        rawMap.forEach((steps, woId) => {
+          // seq_no + process_name 기준으로 대표 1건만 (completed 우선)
+          const grouped = new Map<string, ProcessStep>();
+          for (const s of steps) {
+            const gk = `${s.seq_no}_${s.process_name}`;
+            const existing = grouped.get(gk);
+            if (!existing || (s.status === "completed" && existing.status !== "completed")) {
+              grouped.set(gk, s);
+            }
+          }
+          const deduped = Array.from(grouped.values()).sort((a, b) => (a.seq_no ?? 0) - (b.seq_no ?? 0));
+          map.set(woId, deduped);
+        });
+        setProcessMap(map);
+      } catch {
+        // 공정현황 조회 실패 → 빈 맵 유지
+        setProcessMap(new Map());
+      }
+    } catch (err) {
+      console.error("생산모니터링 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // ─── 자동갱신 (30초) ─────────────────────────────────────
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const timer = setInterval(fetchData, 30000);
+    return () => clearInterval(timer);
+  }, [autoRefresh, fetchData]);
+
+  // ─── 통계 계산 ───────────────────────────────────────────
+  const stats = useMemo(() => {
+    let waiting = 0;
+    let inProgress = 0;
+    let completed = 0;
+    let totalQty = 0;
+    let completedQty = 0;
+
+    workInstructions.forEach((wi) => {
+      const progress = computeProgress(wi.wi_id || wi.id, processMap);
+      if (progress === "대기") waiting++;
+      else if (progress === "진행중") inProgress++;
+      else completed++;
+      totalQty += Number((wi as any).total_qty || wi.qty || 0);
+      completedQty += Number(wi.completed_qty) || 0;
+    });
+
+    const achievementRate = totalQty > 0 ? Math.round((completedQty / totalQty) * 100) : 0;
+
+    return { waiting, inProgress, completed, achievementRate };
+  }, [workInstructions, processMap]);
+
+  // ─── 필터링된 작업 목록 ──────────────────────────────────
+  const filteredInstructions = useMemo(() => {
+    return workInstructions.filter((wi) => {
+      if (activeTab === "전체") return true;
+      const progress = computeProgress(wi.wi_id || wi.id, processMap);
+      return progress === activeTab;
+    });
+  }, [workInstructions, processMap, activeTab]);
+
+  // ─── 렌더링 ──────────────────────────────────────────────
+  return (
+    <div className="flex flex-col h-full min-h-0 bg-background p-4 gap-4 overflow-auto">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between flex-shrink-0">
+        <h1 className="text-2xl font-bold text-foreground">생산모니터링</h1>
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5 text-muted-foreground text-sm">
+            <Clock className="w-4 h-4" />
+            <span className="font-mono">{formatTime(currentTime)}</span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={loading}
+            className="gap-1.5"
+          >
+            <RefreshCw className={cn("w-4 h-4", loading && "animate-spin")} />
+            새로고침
+          </Button>
+          <Button
+            variant={autoRefresh ? "default" : "outline"}
+            size="sm"
+            onClick={() => setAutoRefresh(!autoRefresh)}
+            className="gap-1.5"
+          >
+            {autoRefresh ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+        </div>
+      </div>
+
+      {/* 요약 카드 */}
+      <div className="grid grid-cols-4 gap-4 flex-shrink-0">
+        <SummaryCard
+          icon={<Timer className="w-5 h-5" />}
+          label="대기중"
+          value={stats.waiting}
+          colorClass="text-amber-500 bg-amber-500/10 border-amber-500/20"
+        />
+        <SummaryCard
+          icon={<Loader2 className="w-5 h-5" />}
+          label="진행중"
+          value={stats.inProgress}
+          colorClass="text-blue-500 bg-blue-500/10 border-blue-500/20"
+        />
+        <SummaryCard
+          icon={<CheckCircle2 className="w-5 h-5" />}
+          label="완료"
+          value={stats.completed}
+          colorClass="text-emerald-500 bg-emerald-500/10 border-emerald-500/20"
+        />
+        <SummaryCard
+          icon={<TrendingUp className="w-5 h-5" />}
+          label="달성율"
+          value={`${stats.achievementRate}%`}
+          colorClass="text-purple-500 bg-purple-500/10 border-purple-500/20"
+        />
+      </div>
+
+      {/* 탭 필터 */}
+      <div className="flex items-center gap-2 flex-shrink-0">
+        {(["전체", "대기", "진행중", "완료"] as FilterTab[]).map((tab) => (
+          <Button
+            key={tab}
+            variant={activeTab === tab ? "default" : "outline"}
+            size="sm"
+            onClick={() => setActiveTab(tab)}
+            className={cn(
+              "min-w-[64px]",
+              activeTab === tab && tab === "대기" && "bg-amber-500 hover:bg-amber-600 text-white",
+              activeTab === tab && tab === "진행중" && "bg-blue-500 hover:bg-blue-600 text-white",
+              activeTab === tab && tab === "완료" && "bg-emerald-500 hover:bg-emerald-600 text-white"
+            )}
+          >
+            {tab}
+            {tab === "전체" && ` (${workInstructions.length})`}
+            {tab === "대기" && ` (${stats.waiting})`}
+            {tab === "진행중" && ` (${stats.inProgress})`}
+            {tab === "완료" && ` (${stats.completed})`}
+          </Button>
+        ))}
+      </div>
+
+      {/* 로딩 상태 */}
+      {loading && workInstructions.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <Loader2 className="w-10 h-10 animate-spin mb-3" />
+          <span className="text-sm">데이터를 불러오는 중입니다...</span>
+        </div>
+      )}
+
+      {/* 빈 상태 */}
+      {!loading && filteredInstructions.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <Inbox className="w-12 h-12 mb-3" />
+          <span className="text-sm">
+            {activeTab === "전체"
+              ? "등록된 작업지시가 없습니다."
+              : `"${activeTab}" 상태의 작업지시가 없습니다.`}
+          </span>
+        </div>
+      )}
+
+      {/* 작업 카드 그리드 */}
+      {filteredInstructions.length > 0 && (
+        <div
+          className="grid gap-4 flex-1"
+          style={{ gridTemplateColumns: "repeat(auto-fill, minmax(420px, 1fr))" }}
+        >
+          {filteredInstructions.map((wi, idx) => (
+            <WorkCard
+              key={wi.id || `wi-${idx}`}
+              instruction={wi}
+              steps={processMap.get(wi.wi_id || wi.id) || []}
+              progress={computeProgress(wi.wi_id || wi.id, processMap)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── 요약 카드 ─────────────────────────────────────────────
+function SummaryCard({
+  icon,
+  label,
+  value,
+  colorClass,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: number | string;
+  colorClass: string;
+}) {
+  return (
+    <div className="bg-card border rounded-lg p-4 flex items-center gap-4">
+      <div className={cn("p-2.5 rounded-lg border", colorClass)}>{icon}</div>
+      <div className="flex flex-col">
+        <span className="text-xs text-muted-foreground">{label}</span>
+        <span className="text-2xl font-bold text-foreground">{value}</span>
+      </div>
+    </div>
+  );
+}
+
+// ─── 작업 카드 ─────────────────────────────────────────────
+function WorkCard({
+  instruction: wi,
+  steps,
+  progress,
+}: {
+  instruction: WorkInstruction;
+  steps: ProcessStep[];
+  progress: "대기" | "진행중" | "완료";
+}) {
+  // API 응답은 flat 구조 (details 배열 아님)
+  const itemName = (wi as any).item_name || "-";
+  const spec = (wi as any).item_spec || "-";
+  const customerName = (wi as any).customer_name || "-";
+
+  // 진척률 (total_qty 또는 qty)
+  const totalQty = Number((wi as any).total_qty || wi.qty || 0);
+  const completedQty = Number(wi.completed_qty || 0);
+  const progressPercent = totalQty > 0 ? Math.min(100, Math.round((completedQty / totalQty) * 100)) : 0;
+
+  // 공정 현황 계산
+  const completedSteps = steps.filter((s) => s.status === "completed").length;
+  const currentStep = steps.find((s) => s.status !== "completed");
+
+  // 프로그레스바 색상
+  const barColor =
+    progressPercent >= 100
+      ? "bg-emerald-500"
+      : progressPercent >= 50
+        ? "bg-blue-500"
+        : "bg-amber-500";
+
+  // 상태 배지 스타일
+  const statusBadge: Record<string, string> = {
+    "대기": "bg-amber-500/10 text-amber-500 border-amber-500/30",
+    "진행중": "bg-blue-500/10 text-blue-500 border-blue-500/30",
+    "완료": "bg-emerald-500/10 text-emerald-500 border-emerald-500/30",
+  };
+
+  const isUrgent = wi.status === "긴급";
+
+  return (
+    <div className="bg-card border rounded-lg overflow-hidden flex flex-col">
+      {/* 카드 헤더 */}
+      <div className="flex items-center justify-between px-4 py-3 border-b bg-muted/30">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-sm text-foreground">
+            {wi.work_instruction_no}
+          </span>
+          {isUrgent && (
+            <Badge
+              variant="outline"
+              className="bg-red-500/10 text-red-500 border-red-500/30 text-xs gap-1"
+            >
+              <AlertTriangle className="w-3 h-3" />
+              긴급
+            </Badge>
+          )}
+        </div>
+        <Badge variant="outline" className={cn("text-xs", statusBadge[progress])}>
+          {progress}
+        </Badge>
+      </div>
+
+      {/* 카드 본문 - 정보 */}
+      <div className="px-4 py-3 grid grid-cols-2 gap-x-4 gap-y-1.5 text-sm border-b">
+        <InfoRow label="품목명" value={itemName} />
+        <InfoRow label="규격" value={spec} />
+        <InfoRow label="거래처" value={customerName} />
+        <InfoRow label="작업자" value={wi.worker || "-"} />
+        <InfoRow label="납기일" value={formatDate(wi.end_date)} />
+        <InfoRow label="설비" value={wi.equipment_name || wi.equipment_id || "-"} />
+      </div>
+
+      {/* 공정현황 */}
+      <div className="px-4 py-3 border-b">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs text-muted-foreground font-medium">공정현황</span>
+          {steps.length > 0 && (
+            <span className="text-xs text-muted-foreground">
+              완료 {completedSteps}/{steps.length}
+              {currentStep && (
+                <span>
+                  {" "}
+                  · 현재: <span className="text-blue-400">{currentStep.process_name}</span>
+                </span>
+              )}
+            </span>
+          )}
+        </div>
+        {steps.length > 0 ? (
+          <div className="flex gap-1 flex-wrap">
+            {steps.map((step, idx) => {
+              const isDone = step.status === "completed";
+              const isCurrent = !isDone && idx === completedSteps;
+              return (
+                <span
+                  key={`${step.wo_id}-${step.seq_no}-${idx}`}
+                  className={cn(
+                    "px-2 py-0.5 rounded text-xs font-medium transition-all",
+                    isDone && "bg-emerald-500/20 text-emerald-400",
+                    isCurrent && "bg-blue-500/20 text-blue-400 animate-pulse",
+                    !isDone && !isCurrent && "bg-muted text-muted-foreground"
+                  )}
+                >
+                  {step.process_name}
+                </span>
+              );
+            })}
+          </div>
+        ) : (
+          <span className="text-xs text-muted-foreground">공정 정보 없음</span>
+        )}
+      </div>
+
+      {/* 프로그레스바 */}
+      <div className="px-4 py-3">
+        <div className="flex items-center justify-between mb-1.5">
+          <span className="text-xs text-muted-foreground">
+            {completedQty} / {totalQty}
+          </span>
+          <span
+            className={cn(
+              "text-xs font-bold",
+              progressPercent >= 100
+                ? "text-emerald-500"
+                : progressPercent >= 50
+                  ? "text-blue-500"
+                  : "text-amber-500"
+            )}
+          >
+            {progressPercent}%
+          </span>
+        </div>
+        <div className="w-full h-2.5 bg-muted rounded-full overflow-hidden">
+          <div
+            className={cn("h-full rounded-full transition-all duration-500", barColor)}
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── 정보 행 ───────────────────────────────────────────────
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center gap-1.5 min-w-0">
+      <span className="text-muted-foreground shrink-0">{label}:</span>
+      <span className="text-foreground truncate">{value}</span>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/monitoring/quality/page.tsx b/frontend/app/(main)/COMPANY_30/monitoring/quality/page.tsx
new file mode 100644
index 00000000..b0135bbe
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/monitoring/quality/page.tsx
@@ -0,0 +1,512 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Search,
+  ClipboardCheck,
+} from "lucide-react";
+
+/* ───── 타입 ───── */
+interface ProcessRow {
+  id: number;
+  wo_id: number;
+  process_code: string;
+  process_name: string;
+  status: string;
+  plan_qty: number;
+  input_qty: number;
+  good_qty: number;
+  defect_qty: number;
+  started_at: string | null;
+  completed_at: string | null;
+  worker_name: string;
+}
+
+interface InspectionRow {
+  no: number;
+  inspectionNo: string;
+  inspectionType: string;
+  itemName: string;
+  spec: string;
+  inspectionQty: number;
+  goodQty: number;
+  defectQty: number;
+  defectRate: number;
+  result: "합격" | "불합격" | "대기";
+  inspectorName: string;
+  inspectedAt: string;
+  remark: string;
+}
+
+/* ───── 탭 정의 ───── */
+const TABS = [
+  { key: "all", label: "전체" },
+  { key: "process", label: "공정검사" },
+  { key: "incoming", label: "입고검사" },
+  { key: "shipping", label: "출하검사" },
+] as const;
+type TabKey = (typeof TABS)[number]["key"];
+
+/* ───── 유틸 ───── */
+const fmt = (n: number) => n.toLocaleString("ko-KR");
+const pct = (n: number) =>
+  `${n.toFixed(1)}%`;
+
+const badgeVariant = (
+  type: "result" | "type" | "defectRate",
+  value: string | number,
+) => {
+  if (type === "result") {
+    if (value === "합격")
+      return "bg-emerald-100 text-emerald-700 border-emerald-200";
+    if (value === "불합격") return "bg-red-100 text-red-700 border-red-200";
+    return "bg-amber-100 text-amber-700 border-amber-200";
+  }
+  if (type === "type") {
+    if (value === "공정검사")
+      return "bg-purple-100 text-purple-700 border-purple-200";
+    if (value === "입고검사") return "bg-blue-100 text-blue-700 border-blue-200";
+    return "bg-emerald-100 text-emerald-700 border-emerald-200";
+  }
+  // defectRate
+  const rate = typeof value === "number" ? value : parseFloat(String(value));
+  if (rate > 3) return "text-red-600 font-semibold";
+  if (rate >= 1) return "text-amber-600 font-semibold";
+  return "text-emerald-600";
+};
+
+/* ───── 컴포넌트 ───── */
+export default function QualityMonitoringPage() {
+  const [processData, setProcessData] = useState<ProcessRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [activeTab, setActiveTab] = useState<TabKey>("all");
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  /* ───── 시계 ───── */
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* ───── 데이터 조회 ───── */
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await apiClient.post(
+        "/table-management/tables/work_order_process/data",
+        { autoFilter: true },
+      );
+      const rows: ProcessRow[] = res.data?.data?.rows ?? res.data?.rows ?? [];
+      setProcessData(rows);
+    } catch (err) {
+      console.error("품질점검현황 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ───── 자동 갱신 ───── */
+  useEffect(() => {
+    if (autoRefresh) {
+      intervalRef.current = setInterval(fetchData, 30_000);
+    }
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [autoRefresh, fetchData]);
+
+  /* ───── 검사 행 변환 ───── */
+  const inspectionRows: InspectionRow[] = useMemo(() => {
+    const today = new Date().toISOString().slice(0, 10);
+
+    return processData
+      .filter((r) => {
+        // 금일 데이터만
+        const dt = r.completed_at || r.started_at || "";
+        return dt.slice(0, 10) === today;
+      })
+      .map((r, idx) => {
+        const inspQty = r.input_qty || r.plan_qty || 0;
+        const goodQty = r.good_qty ?? 0;
+        const defectQty = r.defect_qty ?? 0;
+        const defectRate = inspQty > 0 ? (defectQty / inspQty) * 100 : 0;
+        const result: InspectionRow["result"] =
+          r.status !== "completed"
+            ? "대기"
+            : defectQty > 0
+              ? "불합격"
+              : "합격";
+
+        return {
+          no: idx + 1,
+          inspectionNo: `QC-${String(r.id).padStart(8, "0").slice(0, 8)}`,
+          inspectionType: "공정검사",
+          itemName: r.process_name || "-",
+          spec: r.process_code || "-",
+          inspectionQty: inspQty,
+          goodQty,
+          defectQty,
+          defectRate,
+          result,
+          inspectorName: r.worker_name || "-",
+          inspectedAt: r.completed_at || r.started_at || "-",
+          remark: "",
+        };
+      });
+  }, [processData]);
+
+  /* ───── 탭 필터링 ───── */
+  const filteredRows = useMemo(() => {
+    if (activeTab === "all" || activeTab === "process") return inspectionRows;
+    // 입고/출하는 데이터 없음
+    return [];
+  }, [activeTab, inspectionRows]);
+
+  /* ───── 요약 통계 ───── */
+  const summary = useMemo(() => {
+    const total = inspectionRows.length;
+    const passed = inspectionRows.filter((r) => r.result === "합격").length;
+    const failed = inspectionRows.filter((r) => r.result === "불합격").length;
+    const pending = inspectionRows.filter((r) => r.result === "대기").length;
+    const passRate = total > 0 ? (passed / total) * 100 : 0;
+    return { total, passed, failed, pending, passRate };
+  }, [inspectionRows]);
+
+  /* ───── 요약 카드 정의 ───── */
+  const summaryCards = [
+    {
+      label: "금일 검사건수",
+      value: fmt(summary.total),
+      sub: "건",
+      color: "from-slate-500 to-slate-600",
+      textColor: "text-white",
+    },
+    {
+      label: "합격",
+      value: fmt(summary.passed),
+      sub: "건",
+      color: "from-emerald-500 to-emerald-600",
+      textColor: "text-white",
+    },
+    {
+      label: "불합격",
+      value: fmt(summary.failed),
+      sub: "건",
+      color: "from-red-500 to-red-600",
+      textColor: "text-white",
+    },
+    {
+      label: "검사대기",
+      value: fmt(summary.pending),
+      sub: "건",
+      color: "from-amber-500 to-amber-600",
+      textColor: "text-white",
+    },
+    {
+      label: "합격률",
+      value: pct(summary.passRate),
+      sub: "",
+      color: "from-purple-500 to-purple-600",
+      textColor: "text-white",
+    },
+  ];
+
+  /* ───── 렌더링 ───── */
+  return (
+    <div className="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
+      {/* ── 헤더 ── */}
+      <div className="flex items-center justify-between px-6 py-4 bg-white dark:bg-gray-800 border-b">
+        <div className="flex items-center gap-3">
+          <ClipboardCheck className="h-6 w-6 text-emerald-600" />
+          <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+            품질점검현황{" "}
+            <span className="text-emerald-600">모니터링</span>
+          </h1>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            <Clock className="h-4 w-4" />
+            <span className="font-mono">
+              {currentTime.toLocaleString("ko-KR", {
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit",
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+                hour12: false,
+              })}
+            </span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={loading}
+          >
+            {loading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+            <span className="ml-1">새로고침</span>
+          </Button>
+          <Button
+            variant={autoRefresh ? "default" : "outline"}
+            size="sm"
+            onClick={() => setAutoRefresh((p) => !p)}
+            className={cn(
+              autoRefresh &&
+                "bg-emerald-600 hover:bg-emerald-700 text-white",
+            )}
+          >
+            <Clock className="h-4 w-4 mr-1" />
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+        </div>
+      </div>
+
+      {/* ── 본문 ── */}
+      <div className="flex-1 overflow-auto p-6 space-y-6">
+        {/* 요약 카드 */}
+        <div className="grid grid-cols-5 gap-4">
+          {summaryCards.map((card) => (
+            <div
+              key={card.label}
+              className={cn(
+                "rounded-xl bg-gradient-to-br p-5 shadow-md",
+                card.color,
+              )}
+            >
+              <p className="text-sm font-medium text-white/80">
+                {card.label}
+              </p>
+              <p className={cn("mt-2 text-3xl font-bold", card.textColor)}>
+                {card.value}
+                {card.sub && (
+                  <span className="ml-1 text-base font-normal text-white/70">
+                    {card.sub}
+                  </span>
+                )}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* 검사유형 탭 */}
+        <div className="flex items-center gap-2">
+          {TABS.map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={cn(
+                "px-4 py-1.5 rounded-full text-sm font-medium transition-colors",
+                activeTab === tab.key
+                  ? "bg-emerald-600 text-white shadow"
+                  : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border",
+              )}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* 테이블 영역 */}
+        <div className="bg-white dark:bg-gray-800 rounded-xl shadow border overflow-hidden">
+          {/* 입고/출하 준비중 */}
+          {(activeTab === "incoming" || activeTab === "shipping") ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Search className="h-12 w-12 mb-4 opacity-40" />
+              <p className="text-lg font-medium">준비중</p>
+              <p className="text-sm mt-1">
+                {activeTab === "incoming" ? "입고검사" : "출하검사"} 데이터는
+                아직 지원되지 않습니다.
+              </p>
+            </div>
+          ) : loading && filteredRows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Loader2 className="h-10 w-10 animate-spin mb-4" />
+              <p>데이터를 불러오는 중...</p>
+            </div>
+          ) : filteredRows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Inbox className="h-12 w-12 mb-4 opacity-40" />
+              <p className="text-lg font-medium">금일 검사 데이터가 없습니다</p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow className="bg-gray-50 dark:bg-gray-700/50">
+                    <TableHead className="w-[50px] text-center">No</TableHead>
+                    <TableHead className="min-w-[120px]">검사번호</TableHead>
+                    <TableHead className="min-w-[90px] text-center">
+                      검사유형
+                    </TableHead>
+                    <TableHead className="min-w-[140px]">품목명</TableHead>
+                    <TableHead className="min-w-[100px]">규격</TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      검사수량
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      합격수량
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      불합격수량
+                    </TableHead>
+                    <TableHead className="min-w-[70px] text-right">
+                      불량율
+                    </TableHead>
+                    <TableHead className="min-w-[160px] text-center">
+                      검사결과
+                    </TableHead>
+                    <TableHead className="min-w-[70px] text-center">
+                      판정
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-center">
+                      검사자
+                    </TableHead>
+                    <TableHead className="min-w-[150px]">검사일시</TableHead>
+                    <TableHead className="min-w-[100px]">비고</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredRows.map((row) => {
+                    const goodPct =
+                      row.inspectionQty > 0
+                        ? (row.goodQty / row.inspectionQty) * 100
+                        : 0;
+                    const defectPct =
+                      row.inspectionQty > 0
+                        ? (row.defectQty / row.inspectionQty) * 100
+                        : 0;
+
+                    return (
+                      <TableRow
+                        key={row.no}
+                        className="hover:bg-gray-50 dark:hover:bg-gray-700/30"
+                      >
+                        <TableCell className="text-center text-sm text-gray-500">
+                          {row.no}
+                        </TableCell>
+                        <TableCell className="font-mono text-sm">
+                          {row.inspectionNo}
+                        </TableCell>
+                        <TableCell className="text-center">
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-xs",
+                              badgeVariant("type", row.inspectionType),
+                            )}
+                          >
+                            {row.inspectionType}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-sm font-medium">
+                          {row.itemName}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-500">
+                          {row.spec}
+                        </TableCell>
+                        <TableCell className="text-right text-sm">
+                          {fmt(row.inspectionQty)}
+                        </TableCell>
+                        <TableCell className="text-right text-sm text-emerald-600">
+                          {fmt(row.goodQty)}
+                        </TableCell>
+                        <TableCell className="text-right text-sm text-red-600">
+                          {fmt(row.defectQty)}
+                        </TableCell>
+                        <TableCell
+                          className={cn(
+                            "text-right text-sm",
+                            badgeVariant("defectRate", row.defectRate),
+                          )}
+                        >
+                          {pct(row.defectRate)}
+                        </TableCell>
+                        {/* 검사결과 프로그레스바 */}
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <div className="flex-1 h-3 bg-gray-100 dark:bg-gray-600 rounded-full overflow-hidden flex">
+                              <div
+                                className="h-full bg-emerald-500 transition-all"
+                                style={{ width: `${goodPct}%` }}
+                              />
+                              <div
+                                className="h-full bg-red-500 transition-all"
+                                style={{ width: `${defectPct}%` }}
+                              />
+                            </div>
+                            <span className="text-xs text-gray-400 whitespace-nowrap w-[42px] text-right">
+                              {pct(goodPct)}
+                            </span>
+                          </div>
+                        </TableCell>
+                        {/* 판정 배지 */}
+                        <TableCell className="text-center">
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-xs",
+                              badgeVariant("result", row.result),
+                            )}
+                          >
+                            {row.result}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-center text-sm">
+                          {row.inspectorName}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-500">
+                          {row.inspectedAt !== "-"
+                            ? new Date(row.inspectedAt).toLocaleString(
+                                "ko-KR",
+                                {
+                                  month: "2-digit",
+                                  day: "2-digit",
+                                  hour: "2-digit",
+                                  minute: "2-digit",
+                                  hour12: false,
+                                },
+                              )
+                            : "-"}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-400">
+                          {row.remark || "-"}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/outsourcing/subcontractor-item/page.tsx b/frontend/app/(main)/COMPANY_30/outsourcing/subcontractor-item/page.tsx
new file mode 100644
index 00000000..ad6622da
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/outsourcing/subcontractor-item/page.tsx
@@ -0,0 +1,582 @@
+"use client";
+
+/**
+ * 외주품목정보 — 하드코딩 페이지
+ *
+ * 좌측: 품목 목록 (subcontractor_item_mapping 기반 품목, item_info 조인)
+ * 우측: 선택한 품목의 외주업체 정보 (subcontractor_item_mapping → subcontractor_mng 조인)
+ *
+ * 외주업체관리와 양방향 연동 (같은 subcontractor_item_mapping 테이블)
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Plus, Save, Loader2, FileSpreadsheet, Download, Pencil, Inbox, Search, RotateCcw, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const ITEM_TABLE = "item_info";
+const MAPPING_TABLE = "subcontractor_item_mapping";
+const SUBCONTRACTOR_TABLE = "subcontractor_mng";
+
+const formatNum = (v: any) => (v == null || v === "" ? "-" : Number(v).toLocaleString());
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "selling_price", label: "판매가격" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
+];
+export default function SubcontractorItemPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 좌측: 품목
+  const [items, setItems] = useState<any[]>([]);
+  const [itemLoading, setItemLoading] = useState(false);
+  const [itemCount, setItemCount] = useState(0);
+  const [inputKeyword, setInputKeyword] = useState("");
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  // 우측: 외주업체
+  const [subcontractorItems, setSubcontractorItems] = useState<any[]>([]);
+  const [subcontractorLoading, setSubcontractorLoading] = useState(false);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 외주업체 추가 모달
+  const [subSelectOpen, setSubSelectOpen] = useState(false);
+  const [subSearchKeyword, setSubSearchKeyword] = useState("");
+  const [subSearchResults, setSubSearchResults] = useState<any[]>([]);
+  const [subSearchLoading, setSubSearchLoading] = useState(false);
+  const [subCheckedIds, setSubCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 수정 모달
+  const [editItemOpen, setEditItemOpen] = useState(false);
+  const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-subcontractor-item", ITEM_TABLE, GRID_COLUMNS_CONFIG);
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      item_number: { width: "w-[110px]" },
+      item_name: { minWidth: "min-w-[130px]", render: (v) => v || "-" },
+      size: { width: "w-[90px]", render: (v) => v || "-" },
+      unit: { width: "w-[60px]", render: (v) => v || "-" },
+      standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
+      selling_price: { width: "w-[90px]", align: "right", formatNumber: true },
+      currency_code: { width: "w-[50px]", render: (v) => v || "-" },
+      status: { width: "w-[60px]", render: (v) => v || "-" },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 좌측: 품목 조회 (division이 "외주관리"인 품목만 필터링)
+  const outsourcingDivisionCode = categoryOptions["division"]?.find(
+    (o) => o.label === "외주관리" || o.label === "외주" || o.label.includes("외주")
+  )?.code;
+
+  const fetchItems = useCallback(async () => {
+    setItemLoading(true);
+    try {
+      const filters: any[] = [];
+      if (outsourcingDivisionCode) {
+        filters.push({ columnName: "division", operator: "equals", value: outsourcingDivisionCode });
+      }
+      if (searchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: searchKeyword });
+      }
+      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const CATS = ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+      setItemCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setItemLoading(false);
+    }
+  }, [searchKeyword, categoryOptions, outsourcingDivisionCode]);
+
+  useEffect(() => { fetchItems(); }, [fetchItems]);
+
+  // 선택된 품목
+  const selectedItem = items.find((i) => i.id === selectedItemId);
+
+  // 우측: 외주업체 목록 조회
+  useEffect(() => {
+    if (!selectedItem?.item_number) { setSubcontractorItems([]); return; }
+    const itemKey = selectedItem.item_number;
+    const fetchSubcontractorItems = async () => {
+      setSubcontractorLoading(true);
+      try {
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
+          autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        const subIds = [...new Set(mappings.map((m: any) => m.subcontractor_id).filter(Boolean))];
+        let subMap: Record<string, any> = {};
+        if (subIds.length > 0) {
+          try {
+            const subRes = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
+              page: 1, size: subIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "subcontractor_code", operator: "in", value: subIds }] },
+              autoFilter: true,
+            });
+            for (const s of (subRes.data?.data?.data || subRes.data?.data?.rows || [])) {
+              subMap[s.subcontractor_code] = s;
+            }
+          } catch { /* skip */ }
+        }
+
+        setSubcontractorItems(mappings.map((m: any) => ({
+          ...m,
+          subcontractor_code: m.subcontractor_id,
+          subcontractor_name: subMap[m.subcontractor_id]?.subcontractor_name || "",
+        })));
+      } catch (err) {
+        console.error("외주업체 조회 실패:", err);
+      } finally {
+        setSubcontractorLoading(false);
+      }
+    };
+    fetchSubcontractorItems();
+  }, [selectedItem?.item_number]);
+
+  // 외주업체 검색
+  const searchSubcontractors = async () => {
+    setSubSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (subSearchKeyword) filters.push({ columnName: "subcontractor_name", operator: "contains", value: subSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const all = res.data?.data?.data || res.data?.data?.rows || [];
+      const existing = new Set(subcontractorItems.map((s: any) => s.subcontractor_id || s.subcontractor_code));
+      setSubSearchResults(all.filter((s: any) => !existing.has(s.subcontractor_code)));
+    } catch { /* skip */ } finally { setSubSearchLoading(false); }
+  };
+
+  // 외주업체 추가 저장
+  const addSelectedSubcontractors = async () => {
+    const selected = subSearchResults.filter((s) => subCheckedIds.has(s.id));
+    if (selected.length === 0 || !selectedItem) return;
+    try {
+      for (const sub of selected) {
+        await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          subcontractor_id: sub.subcontractor_code,
+          item_id: selectedItem.item_number,
+        });
+      }
+      toast.success(`${selected.length}개 외주업체가 추가되었습니다.`);
+      setSubCheckedIds(new Set());
+      setSubSelectOpen(false);
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "외주업체 추가에 실패했습니다.");
+    }
+  };
+
+  // 품목 수정
+  const openEditItem = () => {
+    if (!selectedItem) return;
+    setEditItemForm({ ...selectedItem });
+    setEditItemOpen(true);
+  };
+
+  const handleEditSave = async () => {
+    if (!editItemForm.id) return;
+    setSaving(true);
+    try {
+      await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
+        originalData: { id: editItemForm.id },
+        updatedData: {
+          selling_price: editItemForm.selling_price || null,
+          standard_price: editItemForm.standard_price || null,
+          currency_code: editItemForm.currency_code || null,
+        },
+      });
+      toast.success("수정되었습니다.");
+      setEditItemOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "수정에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) return;
+    const data = items.map((i) => ({
+      품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
+      기준단가: i.standard_price, 판매가격: i.selling_price, 통화: i.currency_code, 상태: i.status,
+    }));
+    await exportToExcel(data, "외주품목정보.xlsx", "외주품목");
+    toast.success("다운로드 완료");
+  };
+
+  const handleSearch = () => setSearchKeyword(inputKeyword);
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>외주관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">외주품목정보</span>
+      </div>
+
+      {/* 검색 바 */}
+      <div className="flex items-center gap-2 px-4 py-3 bg-card border rounded-lg shrink-0">
+        <span className="text-[11px] font-semibold text-muted-foreground whitespace-nowrap">품명</span>
+        <Input
+          className="h-9 w-[200px]"
+          placeholder="품명 검색"
+          value={inputKeyword}
+          onChange={(e) => setInputKeyword(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+        />
+        <Button variant="outline" size="sm" className="h-9" onClick={() => { setInputKeyword(""); setSearchKeyword(""); }}>
+          <RotateCcw className="w-3.5 h-3.5 mr-1" /> 초기화
+        </Button>
+        <Button size="sm" className="h-9" onClick={handleSearch}>
+          <Search className="w-3.5 h-3.5 mr-1" /> 조회
+        </Button>
+        <div className="ml-auto flex gap-1.5">
+          <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 외주품목 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">외주품목 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{itemCount}건</span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <EDataTable
+                columns={mainTableColumns}
+                data={ts.groupData(items)}
+                loading={itemLoading}
+                emptyMessage="등록된 외주품목이 없어요"
+                selectedId={selectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
+                onRowDoubleClick={() => openEditItem()}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-subcontractor-item-main"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 외주업체 정보 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">외주업체 정보</h3>
+                  {selectedItem && <Badge variant="outline" className="font-normal">{selectedItem.item_name}</Badge>}
+                </div>
+                <Button variant="outline" size="sm" disabled={!selectedItemId}
+                  onClick={() => { setSubCheckedIds(new Set()); setSubSelectOpen(true); searchSubcontractors(); }}>
+                  <Plus className="w-3.5 h-3.5 mr-1" /> 외주업체 추가
+                </Button>
+              </div>
+              {!selectedItemId ? (
+                <div className="flex-1 flex flex-col items-center justify-center gap-3 m-3 border-2 border-dashed rounded-lg text-center">
+                  <Inbox className="w-12 h-12 text-muted-foreground/40" />
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">품목을 선택해주세요</p>
+                    <p className="text-xs text-muted-foreground mt-1">좌측에서 품목을 선택하면 외주업체 정보가 표시돼요</p>
+                  </div>
+                </div>
+              ) : subcontractorLoading ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : subcontractorItems.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                  <Inbox className="w-8 h-8 mb-2 opacity-40" />
+                  <p className="text-sm">등록된 외주업체가 없어요</p>
+                </div>
+              ) : (
+                <div className="flex-1 overflow-auto">
+                  <Table noWrapper>
+                    <thead className="sticky top-0 z-10 bg-card">
+                      <TableRow>
+                        <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
+                        <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
+                        <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품번</TableHead>
+                        <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품명</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                        <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                      </TableRow>
+                    </thead>
+                    <TableBody>
+                      {subcontractorItems.map((item, idx) => (
+                        <TableRow key={item.id || idx}>
+                          <TableCell className="text-[13px] font-mono">{item.subcontractor_code || "-"}</TableCell>
+                          <TableCell className="text-sm">{item.subcontractor_name || "-"}</TableCell>
+                          <TableCell className="text-[13px]">{item.subcontractor_item_code || "-"}</TableCell>
+                          <TableCell className="text-[13px]">{item.subcontractor_item_name || "-"}</TableCell>
+                          <TableCell className="text-[13px] text-right font-mono">{formatNum(item.base_price)}</TableCell>
+                          <TableCell className="text-[13px] text-right font-mono">{formatNum(item.calculated_price)}</TableCell>
+                          <TableCell className="text-[13px]">{item.currency_code || "-"}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 품목 수정 모달 */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>외주품목 수정</DialogTitle>
+            <DialogDescription>{editItemForm.item_number || ""} — {editItemForm.item_name || ""}</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-sm text-muted-foreground">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+            <div className="col-span-2 border-t my-2" />
+            <div className="space-y-1.5">
+              <Label className="text-sm">판매가격</Label>
+              <Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
+                placeholder="판매가격" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">기준단가</Label>
+              <Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">통화</Label>
+              <Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 외주업체 추가 모달 */}
+      <Dialog open={subSelectOpen} onOpenChange={setSubSelectOpen}>
+        <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>외주업체 선택</DialogTitle>
+            <DialogDescription>품목에 추가할 외주업체를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="외주업체명 검색" value={subSearchKeyword}
+              onChange={(e) => setSubSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchSubcontractors()}
+              className="h-9 flex-1" />
+            <Button size="sm" onClick={searchSubcontractors} disabled={subSearchLoading} className="h-9">
+              {subSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto border rounded-lg">
+            <Table noWrapper>
+              <thead className="sticky top-0 z-10 bg-card">
+                <TableRow>
+                  <TableHead className="w-[40px] text-center">
+                    <input type="checkbox"
+                      checked={subSearchResults.length > 0 && subCheckedIds.size === subSearchResults.length}
+                      onChange={(e) => {
+                        if (e.target.checked) setSubCheckedIds(new Set(subSearchResults.map((s) => s.id)));
+                        else setSubCheckedIds(new Set());
+                      }} />
+                  </TableHead>
+                  <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
+                  <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
+                  <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래유형</TableHead>
+                  <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                </TableRow>
+              </thead>
+              <TableBody>
+                {subSearchResults.length === 0 ? (
+                  <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없어요</TableCell></TableRow>
+                ) : subSearchResults.map((s) => (
+                  <TableRow key={s.id} className={cn("cursor-pointer", subCheckedIds.has(s.id) && "bg-primary/5")}
+                    onClick={() => setSubCheckedIds((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(s.id)) next.delete(s.id); else next.add(s.id);
+                      return next;
+                    })}>
+                    <TableCell className="text-center"><input type="checkbox" checked={subCheckedIds.has(s.id)} readOnly /></TableCell>
+                    <TableCell className="text-[13px]">{s.subcontractor_code}</TableCell>
+                    <TableCell className="text-sm">{s.subcontractor_name}</TableCell>
+                    <TableCell className="text-[13px]">{s.division}</TableCell>
+                    <TableCell className="text-[13px]">{s.contact_person}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{subCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setSubSelectOpen(false)}>취소</Button>
+                <Button onClick={addSelectedSubcontractors} disabled={subCheckedIds.size === 0}>
+                  <Plus className="w-4 h-4 mr-1" /> {subCheckedIds.size}개 추가
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={ITEM_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchItems()}
+      />
+
+      {/* 테이블 설정 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/outsourcing/subcontractor/page.tsx b/frontend/app/(main)/COMPANY_30/outsourcing/subcontractor/page.tsx
new file mode 100644
index 00000000..934c03c5
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/outsourcing/subcontractor/page.tsx
@@ -0,0 +1,1410 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Wrench, Package, Search, X, RefreshCw, Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { validateField, validateForm, formatField } from "@/lib/utils/validation";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const SUBCONTRACTOR_TABLE = "subcontractor_mng";
+const MAPPING_TABLE = "subcontractor_item_mapping";
+const PRICE_TABLE = "subcontractor_item_prices";
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "subcontractor_code", label: "외주사코드" },
+  { key: "subcontractor_name", label: "외주사명" },
+  { key: "division", label: "업체 유형" },
+  { key: "status", label: "상태" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "담당자 전화번호" },
+  { key: "contact_email", label: "담당자 이메일" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "phone", label: "전화번호" },
+  { key: "fax", label: "팩스" },
+  { key: "representative", label: "대표자명" },
+  { key: "grade", label: "등급" },
+  { key: "process_type", label: "공정 유형" },
+  { key: "payment_terms", label: "결제 조건" },
+  { key: "remarks", label: "비고" },
+  { key: "writer", label: "작성자" },
+  { key: "created_date", label: "생성일시" },
+  { key: "updated_date", label: "수정일시" },
+];
+export default function SubcontractorManagementPage() {
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 외주업체 목록
+  const [subcontractors, setSubcontractors] = useState<any[]>([]);
+  const [subcontractorLoading, setSubcontractorLoading] = useState(false);
+  const [subcontractorCount, setSubcontractorCount] = useState(0);
+  const [selectedSubcontractorId, setSelectedSubcontractorId] = useState<string | null>(null);
+
+  // 우측: 품목 단가
+  const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceLoading, setPriceLoading] = useState(false);
+
+  // 품목 편집 데이터
+  const [editItemData, setEditItemData] = useState<any>(null);
+
+  // 외주업체 등록/수정 모달
+  const [subcontractorModalOpen, setSubcontractorModalOpen] = useState(false);
+  const [subcontractorEditMode, setSubcontractorEditMode] = useState(false);
+  const [subcontractorForm, setSubcontractorForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 품목 추가 모달 (1단계: 검색/선택)
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 상세 입력 모달 (2단계)
+  const [itemDetailOpen, setItemDetailOpen] = useState(false);
+  const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{
+    _id: string; subcontractor_item_code: string; subcontractor_item_name: string;
+  }>>>({});
+  const [itemPrices, setItemPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 테이블 설정
+  const DEFAULT_VISIBLE_KEYS = ["subcontractor_code", "subcontractor_name", "division", "status", "contact_person", "contact_phone"];
+  const ts = useTableSettings("c16-subcontractor-v2", SUBCONTRACTOR_TABLE, GRID_COLUMNS_CONFIG, DEFAULT_VISIBLE_KEYS);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["division", "status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${SUBCONTRACTOR_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${PRICE_TABLE}/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+    };
+    load();
+  }, []);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 셀 렌더링 헬퍼
+  const renderCellValue = (row: any, key: string) => {
+    const val = key === "division" ? (row.division_label || row.division)
+      : key === "status" ? (row.status_label || row.status)
+      : row[key];
+    if (!val) return "-";
+    if (key === "subcontractor_code") return <span className="text-primary">{val}</span>;
+    if (key === "division") return <Badge variant="secondary" className="text-[10px] px-1.5 py-0">{val}</Badge>;
+    if (key === "status") return <Badge variant="outline" className="text-[10px] px-1.5 py-0">{val}</Badge>;
+    if (key === "subcontractor_name") return <span className="font-medium">{val}</span>;
+    return val;
+  };
+
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      render: (value: any, row: any) => renderCellValue(row, col.key),
+    }));
+  }, [ts.visibleColumns, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 외주업체 목록 조회
+  const fetchSubcontractors = useCallback(async () => {
+    setSubcontractorLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+
+      const res = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => ({
+        ...r,
+        division_label: resolve("division", r.division),
+        status_label: resolve("status", r.status),
+      }));
+      setSubcontractors(data);
+      setSubcontractorCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      toast.error("외주업체 목록을 불러오지 못했어요");
+    } finally {
+      setSubcontractorLoading(false);
+    }
+  }, [searchFilters, categoryOptions]);
+
+  useEffect(() => { fetchSubcontractors(); }, [fetchSubcontractors]);
+
+  // 선택된 외주업체
+  const selectedSubcontractor = subcontractors.find((c) => c.id === selectedSubcontractorId);
+
+  // 선택된 외주업체의 품목 단가 조회
+  useEffect(() => {
+    if (!selectedSubcontractor?.subcontractor_code) { setPriceItems([]); return; }
+    const fetchItems = async () => {
+      setPriceLoading(true);
+      try {
+        const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor.subcontractor_code },
+          ]},
+          autoFilter: true,
+        });
+        const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        let priceMap: Record<string, any> = {};
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor.subcontractor_code },
+              ]},
+              autoFilter: true,
+            });
+            const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+            for (const p of prices) {
+              const key = p.item_id;
+              if (!priceMap[key] || (p.start_date && (!priceMap[key].start_date || p.start_date > priceMap[key].start_date))) {
+                priceMap[key] = p;
+              }
+            }
+          } catch { /* skip */ }
+        }
+
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
+        };
+        setPriceItems(mappings.map((m: any) => {
+          const itemInfo = itemMap[m.item_id] || {};
+          const price = priceMap[m.item_id] || {};
+          return {
+            ...m,
+            item_number: m.item_id,
+            item_name: itemInfo.item_name || "",
+            base_price_type: priceResolve("base_price_type", price.base_price_type || m.base_price_type || ""),
+            base_price: price.base_price || m.base_price || "",
+            discount_type: priceResolve("discount_type", price.discount_type || m.discount_type || ""),
+            discount_value: price.discount_value || m.discount_value || "",
+            rounding_type: priceResolve("rounding_unit_value", price.rounding_type || m.rounding_type || ""),
+            calculated_price: price.calculated_price || m.calculated_price || "",
+            currency_code: priceResolve("currency_code", price.currency_code || m.currency_code || ""),
+          };
+        }));
+      } catch (err) {
+        // 품목 조회 실패 시 무시
+      } finally {
+        setPriceLoading(false);
+      }
+    };
+    fetchItems();
+  }, [selectedSubcontractor?.subcontractor_code, priceCategoryOptions]);
+
+  // 외주업체 등록 모달 열기
+  const openSubcontractorRegister = async () => {
+    setSubcontractorForm({});
+    setFormErrors({});
+    setSubcontractorEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setSubcontractorModalOpen(true);
+
+    // 채번 규칙 조회 (subcontractor_mng.subcontractor_code)
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/subcontractor_mng/subcontractor_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시
+    }
+  };
+
+  const openSubcontractorEdit = () => {
+    if (!selectedSubcontractor) return;
+    setSubcontractorForm({ ...selectedSubcontractor });
+    setFormErrors({});
+    setSubcontractorEditMode(true);
+    setSubcontractorModalOpen(true);
+  };
+
+  const handleFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setSubcontractorForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => {
+      const next = { ...prev };
+      if (error) next[field] = error; else delete next[field];
+      return next;
+    });
+  };
+
+  const handleSubcontractorSave = async () => {
+    if (!subcontractorForm.subcontractor_name) { toast.error("외주업체명은 필수예요"); return; }
+    if (!subcontractorForm.status) { toast.error("상태는 필수예요"); return; }
+    const errors = validateForm(subcontractorForm, ["contact_phone", "email", "business_number"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) {
+      toast.error("입력 형식을 확인해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, division_label, status_label, ...fields } = subcontractorForm;
+      if (subcontractorEditMode && id) {
+        await apiClient.put(`/table-management/tables/${SUBCONTRACTOR_TABLE}/edit`, {
+          originalData: { id }, updatedData: fields,
+        });
+        toast.success("수정되었어요");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+        const saveFields = allocatedCode ? { ...fields, subcontractor_code: allocatedCode } : fields;
+        await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/add`, { id: crypto.randomUUID(), ...saveFields });
+        toast.success("등록되었어요");
+      }
+      setSubcontractorModalOpen(false);
+      fetchSubcontractors();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 외주업체 삭제
+  const handleSubcontractorDelete = async () => {
+    if (!selectedSubcontractorId) return;
+    const ok = await confirm("외주업체를 삭제할까요?", {
+      description: "관련된 품목 매핑, 단가 정보도 함께 삭제돼요",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${SUBCONTRACTOR_TABLE}/delete`, {
+        data: [{ id: selectedSubcontractorId }],
+      });
+      toast.success("삭제되었어요");
+      setSelectedSubcontractorId(null);
+      fetchSubcontractors();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  // 품목 검색
+  const searchItems = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const allItems = res.data?.data?.data || res.data?.data?.rows || [];
+      const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
+      const OUTSOURCING_CODE = "CAT_MMDJB7R4_TO3T";
+      setItemSearchResults(allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        const div = item.division || "";
+        return div.includes(OUTSOURCING_CODE) || div.includes("외주");
+      }));
+    } catch { /* skip */ } finally { setItemSearchLoading(false); }
+  };
+
+  // 품목 선택 완료 → 상세 입력 모달로 전환
+  const goToItemDetail = () => {
+    const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
+    if (selected.length === 0) { toast.error("품목을 선택해주세요"); return; }
+    setSelectedItemsForDetail(selected);
+    const mappings: typeof itemMappings = {};
+    const prices: typeof itemPrices = {};
+    for (const item of selected) {
+      const key = item.item_number || item.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: item.standard_price || item.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: item.standard_price || item.selling_price || "",
+      }];
+    }
+    setItemMappings(mappings);
+    setItemPrices(prices);
+    setEditItemData(null);
+    setItemSelectOpen(false);
+    setItemDetailOpen(true);
+  };
+
+  const addMappingRow = (itemKey: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, subcontractor_item_code: "", subcontractor_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (itemKey: string, rowId: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  const addPriceRow = (itemKey: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (itemKey: string, rowId: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          updated.calculated_price = String(Math.round(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  // 우측 품목 편집 열기 — 해당 item_number의 모든 매핑+단가를 로드
+  const openEditItem = async (row: any) => {
+    const itemKey = row.item_number || row.item_id;
+    let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "equals", value: itemKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) itemInfo = found;
+    } catch { /* skip */ }
+
+    // 같은 item_number를 가진 모든 priceItems 행에서 매핑 정보 추출
+    const allRowsForItem = priceItems.filter((p: any) => (p.item_number || p.item_id) === itemKey);
+    const allMappingIds = allRowsForItem.map((r: any) => r.id).filter(Boolean);
+
+    const mappingRows = allRowsForItem
+      .filter((r: any) => r.subcontractor_item_code || r.subcontractor_item_name)
+      .map((r: any) => ({
+        _id: `m_existing_${r.id}`,
+        subcontractor_item_code: r.subcontractor_item_code || "",
+        subcontractor_item_name: r.subcontractor_item_name || "",
+      }));
+
+    // 서버에서 이 item+subcontractor의 모든 단가를 raw 코드로 가져오기
+    let priceRows: Array<{
+      _id: string; start_date: string; end_date: string; currency_code: string;
+      base_price_type: string; base_price: string; discount_type: string;
+      discount_value: string; rounding_type: string; rounding_unit_value: string;
+      calculated_price: string;
+    }> = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor!.subcontractor_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]},
+        autoFilter: true,
+      });
+      const rawPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = rawPrices.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date || "",
+        end_date: p.end_date || "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedItemsForDetail([itemInfo]);
+    setItemMappings({ [itemKey]: mappingRows });
+    setItemPrices({ [itemKey]: priceRows });
+    // editItemData에 원본 매핑 ID 목록 저장 (삭제 시 사용)
+    setEditItemData({ ...row, _allMappingIds: allMappingIds });
+    setItemDetailOpen(true);
+  };
+
+  const handleItemDetailSave = async () => {
+    if (!selectedSubcontractor) return;
+    const isEditingExisting = !!editItemData;
+    setSaving(true);
+    try {
+      for (const item of selectedItemsForDetail) {
+        const itemKey = item.item_number || item.id;
+        const mappingRows = itemMappings[itemKey] || [];
+
+        if (isEditingExisting && editItemData?.id) {
+          // 1) 기존 매핑 모두 삭제
+          const allMappingIds: string[] = editItemData._allMappingIds || [editItemData.id];
+          if (allMappingIds.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: allMappingIds.map((mid: string) => ({ id: mid })),
+            });
+          }
+
+          // 2) 기존 단가 모두 삭제 (subcontractor_id + item_id 기준)
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor.subcontractor_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+            if (existing.length > 0) {
+              await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+                data: existing.map((p: any) => ({ id: p.id })),
+              });
+            }
+          } catch { /* skip */ }
+
+          // 3) 모든 매핑 재삽입
+          let firstMappingId: string | null = null;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const newId = crypto.randomUUID();
+            if (mi === 0) firstMappingId = newId;
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: newId,
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              subcontractor_item_code: mappingRows[mi].subcontractor_item_code || "",
+              subcontractor_item_name: mappingRows[mi].subcontractor_item_name || "",
+            });
+          }
+          // 매핑이 비어있으면 빈 매핑 1개 생성 (item_id 연결 유지)
+          if (mappingRows.length === 0) {
+            firstMappingId = crypto.randomUUID();
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: firstMappingId,
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              subcontractor_item_code: "",
+              subcontractor_item_name: "",
+            });
+          }
+
+          // 4) 모든 단가 재삽입
+          const filteredPriceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of filteredPriceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: firstMappingId || "",
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        } else {
+          let mappingId: string | null = null;
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
+            subcontractor_item_code: mappingRows[0]?.subcontractor_item_code || "",
+            subcontractor_item_name: mappingRows[0]?.subcontractor_item_name || "",
+          });
+          mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
+              subcontractor_item_code: mappingRows[mi].subcontractor_item_code || "",
+              subcontractor_item_name: mappingRows[mi].subcontractor_item_name || "",
+            });
+          }
+
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었어요" : `${selectedItemsForDetail.length}개 품목이 추가되었어요`);
+      setItemDetailOpen(false);
+      setEditItemData(null);
+      setItemCheckedIds(new Set());
+      const cid = selectedSubcontractorId;
+      setSelectedSubcontractorId(null);
+      setTimeout(() => setSelectedSubcontractorId(cid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (subcontractors.length === 0) return;
+    toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
+    try {
+      const allMappings: any[] = [];
+      const subCodes = subcontractors.map((c) => c.subcontractor_code).filter(Boolean);
+
+      if (subCodes.length > 0) {
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 5000, autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        for (const m of mappings) {
+          const itemInfo = itemMap[m.item_id] || {};
+          allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
+        }
+      }
+
+      const rows: Record<string, any>[] = [];
+      for (const c of subcontractors) {
+        const subMappings = allMappings.filter((m) => m.subcontractor_id === c.subcontractor_code);
+        if (subMappings.length === 0) {
+          rows.push({
+            외주업체코드: c.subcontractor_code, 외주업체명: c.subcontractor_name,
+            거래유형: getCategoryLabel("division", c.division),
+            담당자: c.contact_person, 전화번호: c.contact_phone,
+            사업자번호: c.business_number, 이메일: c.email,
+            상태: getCategoryLabel("status", c.status),
+            품목코드: "", 품명: "", 규격: "",
+            외주품번: "", 외주품명: "",
+            기준가: "", 할인유형: "", 할인값: "", 단가: "", 통화: "",
+          });
+        } else {
+          for (const m of subMappings) {
+            rows.push({
+              외주업체코드: c.subcontractor_code, 외주업체명: c.subcontractor_name,
+              거래유형: getCategoryLabel("division", c.division),
+              담당자: c.contact_person, 전화번호: c.contact_phone,
+              사업자번호: c.business_number, 이메일: c.email,
+              상태: getCategoryLabel("status", c.status),
+              품목코드: m.item_id || "", 품명: m.item_name || "", 규격: m.item_spec || "",
+              외주품번: m.subcontractor_item_code || "", 외주품명: m.subcontractor_item_name || "",
+              기준가: m.base_price || "", 할인유형: m.discount_type || "", 할인값: m.discount_value || "",
+              단가: m.calculated_price || "", 통화: m.currency_code || "",
+            });
+          }
+        }
+      }
+
+      await exportToExcel(rows, "외주업체관리.xlsx", "외주업체+품목");
+      toast.dismiss("excel-dl");
+      toast.success(`${rows.length}행 다운로드 완료`);
+    } catch (err) {
+      toast.dismiss("excel-dl");
+      toast.error("다운로드에 실패했어요");
+    }
+  };
+
+  // 셀렉트 렌더링
+  const renderSelect = (field: string, value: string, onChange: (v: string) => void, placeholder: string) => (
+    <Select value={value || ""} onValueChange={onChange}>
+      <SelectTrigger className="h-9 text-sm"><SelectValue placeholder={placeholder} /></SelectTrigger>
+      <SelectContent>
+        {(categoryOptions[field] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+      </SelectContent>
+    </Select>
+  );
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>외주관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="font-medium text-foreground">외주사관리</span>
+      </nav>
+
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={SUBCONTRACTOR_TABLE}
+        filterId="c16-subcontractor"
+        onFilterChange={setSearchFilters}
+        dataCount={subcontractorCount}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={excelDetecting}
+              onClick={async () => {
+                setExcelDetecting(true);
+                try {
+                  const result = await autoDetectMultiTableConfig(SUBCONTRACTOR_TABLE);
+                  if (result.success && result.data) {
+                    setExcelChainConfig(result.data);
+                    setExcelUploadOpen(true);
+                  } else {
+                    toast.error(result.message || "테이블 구조 분석 실패");
+                  }
+                } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+              }}
+            >
+              {excelDetecting
+                ? <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                : <FileSpreadsheet className="mr-1.5 h-4 w-4" />}
+              엑셀업로드
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+              <Download className="mr-1.5 h-4 w-4" />
+              엑셀다운로드
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 분할 패널 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg">
+
+        {/* 좌측: 외주업체 목록 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-3 shrink-0">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-semibold">외주업체 목록</span>
+                <Badge variant="outline" className="text-xs px-1.5 py-0">{subcontractorCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Button size="sm" onClick={openSubcontractorRegister}>
+                  <Plus className="h-3.5 w-3.5 mr-1" /> 등록
+                </Button>
+                <Button variant="outline" size="sm" disabled={!selectedSubcontractorId} onClick={openSubcontractorEdit}>
+                  <Pencil className="h-3.5 w-3.5 mr-1" /> 수정
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={!selectedSubcontractorId}
+                  onClick={handleSubcontractorDelete}
+                  className="text-destructive border-destructive/20 hover:bg-destructive/10"
+                >
+                  <Trash2 className="h-3.5 w-3.5 mr-1" /> 삭제
+                </Button>
+                <Button variant="ghost" size="sm" onClick={fetchSubcontractors} disabled={subcontractorLoading}>
+                  {subcontractorLoading
+                    ? <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    : <RefreshCw className="h-3.5 w-3.5" />}
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                  <Settings2 className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            </div>
+            <EDataTable
+              columns={mainTableColumns}
+              data={ts.groupData(subcontractors)}
+              loading={subcontractorLoading}
+              emptyMessage="등록된 외주업체가 없어요"
+              selectedId={selectedSubcontractorId}
+              onSelect={(id) => setSelectedSubcontractorId(id)}
+              onRowDoubleClick={() => openSubcontractorEdit()}
+              showPagination={true}
+              draggableColumns={false}
+              columnOrderKey="c16-subcontractor-main"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 품목 정보 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-3 shrink-0">
+              <div className="flex items-center gap-2">
+                {selectedSubcontractor ? (
+                  <>
+                    <span className="text-sm font-semibold">{selectedSubcontractor.subcontractor_name}</span>
+                    <Badge variant="outline" className="text-[10px] px-1.5 py-0">{selectedSubcontractor.subcontractor_code}</Badge>
+                  </>
+                ) : (
+                  <>
+                    <Package className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-semibold">품목 정보</span>
+                  </>
+                )}
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!selectedSubcontractorId}
+                onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}
+              >
+                <Plus className="h-3.5 w-3.5 mr-1" /> 품목 추가
+              </Button>
+            </div>
+            <div className="flex-1 overflow-auto">
+              {!selectedSubcontractorId ? (
+                <div className="flex items-center justify-center h-full">
+                  <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-12 py-10 text-center">
+                    <Wrench className="h-10 w-10 text-muted-foreground opacity-30" />
+                    <p className="text-sm text-muted-foreground">좌측에서 외주사를 선택해주세요</p>
+                  </div>
+                </div>
+              ) : priceLoading ? (
+                <div className="flex items-center justify-center py-16">
+                  <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                </div>
+              ) : priceItems.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+                  <Package className="h-12 w-12 mb-3 opacity-30" />
+                  <p className="text-sm font-medium">등록된 품목이 없어요</p>
+                </div>
+              ) : (
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품번</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품명</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {(() => {
+                      // item_number 기준 그룹화 (순서 유지)
+                      const grouped: { itemNumber: string; rows: any[] }[] = [];
+                      const groupMap = new Map<string, any[]>();
+                      for (const item of priceItems) {
+                        const key = item.item_number || item.item_id || item.id;
+                        if (!groupMap.has(key)) {
+                          const rows: any[] = [];
+                          groupMap.set(key, rows);
+                          grouped.push({ itemNumber: key, rows });
+                        }
+                        groupMap.get(key)!.push(item);
+                      }
+                      return grouped.map((group, gIdx) =>
+                        group.rows.map((item, rowIdx) => (
+                          <TableRow
+                            key={item.id}
+                            className={cn(
+                              "cursor-pointer hover:bg-muted/50",
+                              rowIdx === 0 && gIdx > 0 && "border-t-2 border-t-border/60"
+                            )}
+                            onDoubleClick={() => openEditItem(item)}
+                          >
+                            <TableCell className="text-[13px] text-primary">
+                              {rowIdx === 0 ? item.item_number : ""}
+                            </TableCell>
+                            <TableCell className="text-[13px]">
+                              {rowIdx === 0 ? item.item_name : ""}
+                            </TableCell>
+                            <TableCell className="text-[13px]">{item.subcontractor_item_code || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.subcontractor_item_name || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.base_price_type || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right">{item.base_price ? Number(item.base_price).toLocaleString() : "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.discount_type || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right">{item.discount_value || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right font-semibold">{item.calculated_price ? Number(item.calculated_price).toLocaleString() : "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.currency_code || "-"}</TableCell>
+                          </TableRow>
+                        ))
+                      );
+                    })()}
+                  </TableBody>
+                </Table>
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 모달들 ========== */}
+
+      {/* 외주업체 등록/수정 모달 */}
+      <Dialog open={subcontractorModalOpen} onOpenChange={setSubcontractorModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[680px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{subcontractorEditMode ? "외주업체 수정" : "외주업체 등록"}</DialogTitle>
+            <DialogDescription>
+              {subcontractorEditMode ? "외주업체 정보를 수정해요." : "새로운 외주업체를 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-xs">외주업체 코드</Label>
+              <Input
+                value={subcontractorEditMode ? (subcontractorForm.subcontractor_code || "") : (previewCode || subcontractorForm.subcontractor_code || "")}
+                onChange={(e) => {
+                  if (!subcontractorEditMode && !numberingRuleId) {
+                    setSubcontractorForm((p) => ({ ...p, subcontractor_code: e.target.value }));
+                  }
+                }}
+                placeholder={numberingRuleId && !subcontractorEditMode ? "자동 생성돼요" : "외주업체 코드"}
+                className="h-9 text-sm"
+                readOnly={!!numberingRuleId && !subcontractorEditMode}
+                disabled={subcontractorEditMode}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">외주업체명 <span className="text-destructive">*</span></Label>
+              <Input
+                value={subcontractorForm.subcontractor_name || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, subcontractor_name: e.target.value }))}
+                placeholder="외주업체명"
+                className="h-9 text-sm"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">거래 유형</Label>
+              {renderSelect("division", subcontractorForm.division, (v) => setSubcontractorForm((p) => ({ ...p, division: v })), "거래 유형")}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">상태 <span className="text-destructive">*</span></Label>
+              {renderSelect("status", subcontractorForm.status, (v) => setSubcontractorForm((p) => ({ ...p, status: v })), "상태")}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">담당자</Label>
+              <Input
+                value={subcontractorForm.contact_person || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, contact_person: e.target.value }))}
+                placeholder="담당자"
+                className="h-9 text-sm"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">전화번호</Label>
+              <Input
+                value={subcontractorForm.contact_phone || ""}
+                onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                placeholder="010-0000-0000"
+                className={cn("h-9 text-sm", formErrors.contact_phone && "border-destructive")}
+              />
+              {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">이메일</Label>
+              <Input
+                value={subcontractorForm.email || ""}
+                onChange={(e) => handleFormChange("email", e.target.value)}
+                placeholder="example@email.com"
+                className={cn("h-9 text-sm", formErrors.email && "border-destructive")}
+              />
+              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">사업자번호</Label>
+              <Input
+                value={subcontractorForm.business_number || ""}
+                onChange={(e) => handleFormChange("business_number", e.target.value)}
+                placeholder="000-00-00000"
+                className={cn("h-9 text-sm", formErrors.business_number && "border-destructive")}
+              />
+              {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs">주소</Label>
+              <Input
+                value={subcontractorForm.address || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, address: e.target.value }))}
+                placeholder="주소"
+                className="h-9 text-sm"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setSubcontractorModalOpen(false)}>취소</Button>
+            <Button onClick={handleSubcontractorSave} disabled={saving}>
+              {saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <Save className="h-4 w-4 mr-1.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 품목 추가 모달 (1단계: 검색/선택) */}
+      <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[780px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>품목 선택</DialogTitle>
+            <DialogDescription>외주업체에 추가할 품목을 선택해요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="flex gap-2">
+              <Input
+                placeholder="품명/품목코드 검색"
+                value={itemSearchKeyword}
+                onChange={(e) => setItemSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchItems()}
+                className="h-9 flex-1 text-sm"
+              />
+              <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+                {itemSearchLoading
+                  ? <Loader2 className="h-4 w-4 animate-spin" />
+                  : <><Search className="h-4 w-4 mr-1" />조회</>}
+              </Button>
+            </div>
+            <div className="overflow-auto max-h-[350px] rounded-md border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[40px] text-center">
+                      <input
+                        type="checkbox"
+                        checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                        onChange={(e) => {
+                          if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                          else setItemCheckedIds(new Set());
+                        }}
+                        className="h-4 w-4"
+                      />
+                    </TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {itemSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : itemSearchResults.map((item) => (
+                    <TableRow
+                      key={item.id}
+                      className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                      onClick={() => setItemCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <input type="checkbox" checked={itemCheckedIds.has(item.id)} readOnly className="h-4 w-4" />
+                      </TableCell>
+                      <TableCell className="text-[13px]">{item.item_number}</TableCell>
+                      <TableCell className="text-[13px]">{item.item_name}</TableCell>
+                      <TableCell className="text-[13px]">{item.size}</TableCell>
+                      <TableCell className="text-[13px]">{item.material}</TableCell>
+                      <TableCell className="text-[13px]">{item.unit}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center justify-between w-full">
+              <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+                <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                  <Plus className="h-4 w-4 mr-1" />
+                  {itemCheckedIds.size}개 다음
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 품목 상세정보 입력 모달 (2단계) */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedSubcontractor?.subcontractor_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData ? "외주 품번/품명과 기간별 단가를 수정해요" : "선택한 품목의 외주 품번/품명과 기간별 단가를 설정해요"}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2">
+            {selectedItemsForDetail.map((item, idx) => {
+              const itemKey = item.item_number || item.id;
+              const mappingRows = itemMappings[itemKey] || [];
+              const prices = itemPrices[itemKey] || [];
+
+              return (
+                <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
+                  {/* 품목 헤더 */}
+                  <div className="px-5 py-3 bg-muted/30 border-b">
+                    <div className="font-semibold text-sm">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
+                  </div>
+
+                  <div className="flex gap-4 p-4">
+                    {/* 좌: 외주 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/20">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold">외주 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 외주 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.subcontractor_item_code}
+                              onChange={(e) => updateMappingRow(itemKey, mRow._id, "subcontractor_item_code", e.target.value)}
+                              placeholder="외주 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.subcontractor_item_name}
+                              onChange={(e) => updateMappingRow(itemKey, mRow._id, "subcontractor_item_name", e.target.value)}
+                              placeholder="외주 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0" onClick={() => removeMappingRow(itemKey, mRow._id)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/20">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive" onClick={() => removePriceRow(itemKey, price._id)}>
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                            {/* 기간 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select value={price.currency_code || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="통화" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준가/할인/반올림 */}
+                            <div className="flex gap-2 items-center">
+                              <div className="w-[90px]">
+                                <Select value={price.base_price_type || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["base_price_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                              <Input
+                                value={price.base_price}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "base_price", e.target.value)}
+                                className="h-8 text-xs text-right flex-1"
+                                placeholder="기준가"
+                              />
+                              <div className="w-[90px]">
+                                <Select value={price.discount_type || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인유형" /></SelectTrigger>
+                                  <SelectContent>
+                                    <SelectItem value="none">할인없음</SelectItem>
+                                    {(priceCategoryOptions["discount_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                              <Input
+                                value={price.discount_value}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "discount_value", e.target.value)}
+                                className="h-8 text-xs text-right w-[60px]"
+                                placeholder="0"
+                              />
+                              <div className="w-[90px]">
+                                <Select value={price.rounding_unit_value || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 계산 단가 표시 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm">{price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}</span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <Save className="h-4 w-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal
+          open={excelUploadOpen}
+          onOpenChange={(open) => {
+            setExcelUploadOpen(open);
+            if (!open) setExcelChainConfig(null);
+          }}
+          config={excelChainConfig}
+          onSuccess={() => {
+            fetchSubcontractors();
+            const cid = selectedSubcontractorId;
+            setSelectedSubcontractorId(null);
+            setTimeout(() => setSelectedSubcontractorId(cid), 50);
+          }}
+        />
+      )}
+
+      {/* 테이블 설정 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        includeAutoColumns={["created_date", "updated_date", "writer"]}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/production/bom/page.tsx b/frontend/app/(main)/COMPANY_30/production/bom/page.tsx
new file mode 100644
index 00000000..0563f47b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/production/bom/page.tsx
@@ -0,0 +1,2521 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  ChevronRight,
+  ChevronDown,
+  ChevronsDown,
+  ChevronsUp,
+  Plus,
+  Trash2,
+  Search,
+  Loader2,
+  Inbox,
+  Upload,
+  Download,
+  GitBranch,
+  History,
+  CheckCircle2,
+  RotateCcw,
+  X,
+  FileText,
+  Play,
+  Copy,
+  Settings2,
+  Save,
+  Package,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// ─── 상수 ───────────────────────────────────────
+const BOM_TABLE = "bom";
+const BOM_DETAIL_TABLE = "bom_detail";
+
+const BOM_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "bom_type", label: "BOM 유형" },
+  { key: "version", label: "버전" },
+  { key: "effective_date", label: "유효시작일" },
+  { key: "status", label: "상태" },
+];
+
+
+const STATUS_MAP: Record<string, { label: string; className: string }> = {
+  active: { label: "활성", className: "bg-success/10 text-success" },
+  draft: { label: "초안", className: "bg-warning/10 text-warning" },
+  expired: { label: "만료", className: "bg-destructive/10 text-destructive" },
+  inactive: { label: "비활성", className: "bg-muted text-muted-foreground" },
+};
+
+const VERSION_STATUS_MAP: Record<string, { label: string; className: string }> = {
+  active: { label: "사용중", className: "bg-success/10 text-success" },
+  developing: { label: "개발중", className: "bg-warning/10 text-warning" },
+  inactive: { label: "비활성", className: "bg-muted text-muted-foreground" },
+};
+
+const BOM_TYPE_OPTIONS = [
+  { code: "production", label: "생산 BOM" },
+  { code: "design", label: "설계 BOM" },
+  { code: "cost", label: "원가 BOM" },
+];
+
+// ─── 인터페이스 ─────────────────────────────────
+interface BomRow {
+  id: string;
+  item_id?: string;
+  item_code?: string;
+  item_name?: string;
+  bom_type?: string;
+  version?: string;
+  base_qty?: string;
+  unit?: string;
+  status?: string;
+  effective_date?: string;
+  expiry_date?: string;
+  remark?: string;
+  current_version_id?: string;
+  [key: string]: any;
+}
+
+interface BomDetail {
+  id: string;
+  bom_id: string;
+  version_id?: string;
+  parent_detail_id?: string | null;
+  child_item_id?: string;
+  item_number?: string;
+  item_name?: string;
+  item_type?: string;
+  quantity?: string;
+  unit?: string;
+  process_type?: string;
+  loss_rate?: string;
+  remark?: string;
+  level?: string;
+  seq_no?: string;
+  spec?: string;
+  writer?: string;
+  updated_date?: string;
+  [key: string]: any;
+}
+
+interface BomVersion {
+  id: string;
+  bom_id: string;
+  version_name: string;
+  revision?: number;
+  status: string;
+  created_by?: string;
+  created_date?: string;
+  detail_count?: number;
+}
+
+interface BomHistoryEntry {
+  id: string;
+  bom_id: string;
+  revision?: string;
+  version?: string;
+  change_type: string;
+  change_description?: string;
+  changed_by?: string;
+  changed_date?: string;
+}
+
+interface TreeNode extends BomDetail {
+  children: TreeNode[];
+  expanded?: boolean;
+  _isNew?: boolean;        // 신규 노드 (DB에 없음)
+  _isModified?: boolean;   // 수정된 노드
+  _tempId?: string;        // 임시 ID
+  _level?: number;         // flattenTree에서 사용
+  _isVirtualRoot?: boolean; // 가상 루트(BOM 마스터) 노드
+}
+
+// ─── 트리 구성 헬퍼 ─────────────────────────────
+function buildTree(details: BomDetail[]): TreeNode[] {
+  const nodeMap = new Map<string, TreeNode>();
+  const roots: TreeNode[] = [];
+
+  for (const d of details) {
+    nodeMap.set(d.id, { ...d, children: [], expanded: true });
+  }
+
+  for (const d of details) {
+    const node = nodeMap.get(d.id)!;
+    if (d.parent_detail_id && nodeMap.has(d.parent_detail_id)) {
+      nodeMap.get(d.parent_detail_id)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+
+  return roots;
+}
+
+function flattenTree(nodes: TreeNode[], level = 0): (TreeNode & { _level: number })[] {
+  const result: (TreeNode & { _level: number })[] = [];
+  for (const node of nodes) {
+    result.push({ ...node, _level: level });
+    if (node.expanded && node.children.length > 0) {
+      result.push(...flattenTree(node.children, level + 1));
+    }
+  }
+  return result;
+}
+
+// ─── 타입 뱃지 색상 ────────────────────────────
+// BOM 이력 변경 유형 색상
+const CHANGE_TYPE_STYLE: Record<string, string> = {
+  "등록": "bg-primary/10 text-primary ring-primary/20",
+  "수정": "bg-amber-50 text-amber-600 ring-amber-200",
+  "추가": "bg-emerald-50 text-emerald-600 ring-emerald-200",
+  "삭제": "bg-destructive/10 text-destructive ring-red-200",
+  "버전변경": "bg-blue-50 text-blue-600 ring-blue-200",
+  "excel_upload": "bg-blue-50 text-blue-600 ring-blue-200",
+};
+const CHANGE_TYPE_OPTIONS = ["등록", "수정", "추가", "삭제", "버전변경", "기타"];
+
+function getItemTypeBadge(type?: string) {
+  switch (type) {
+    case "원자재":
+    case "raw":
+      return { label: "원자재", className: "bg-success/10 text-success border-success/20" };
+    case "반제품":
+    case "semi":
+      return { label: "반제품", className: "bg-warning/10 text-warning border-warning/20" };
+    case "완제품":
+    case "finished":
+      return { label: "완제품", className: "bg-primary/10 text-primary border-primary/20" };
+    default:
+      return { label: type || "-", className: "bg-muted text-muted-foreground" };
+  }
+}
+
+// ─── 메인 컴포넌트 ──────────────────────────────
+export default function BomManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-bom", BOM_TABLE, BOM_COLUMNS);
+
+  // BOM 목록 상태
+  const [bomList, setBomList] = useState<BomRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [selectedBomId, setSelectedBomId] = useState<string | null>(null);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+
+  // 상세 데이터
+  const [bomHeader, setBomHeader] = useState<BomRow | null>(null);
+  const [bomDetails, setBomDetails] = useState<BomDetail[]>([]);
+  const [treeNodes, setTreeNodes] = useState<TreeNode[]>([]);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  // 트리 토글
+  const [treeDirection, setTreeDirection] = useState<"forward" | "reverse">("forward");
+  const [treeBasis, setTreeBasis] = useState<"material" | "process">("material");
+
+  // 버전 관리
+  const [versions, setVersions] = useState<BomVersion[]>([]);
+  const [currentVersionId, setCurrentVersionId] = useState<string | null>(null);
+  const [versionLoading, setVersionLoading] = useState(false);
+  const [newVersionName, setNewVersionName] = useState("");
+  const [showNewVersionDialog, setShowNewVersionDialog] = useState(false);
+
+  // 이력 관리
+  const [historyList, setHistoryList] = useState<BomHistoryEntry[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [showHistoryDialog, setShowHistoryDialog] = useState(false);
+  const [newHistory, setNewHistory] = useState({ change_type: "", change_description: "" });
+
+  // 등록 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [masterForm, setMasterForm] = useState<Record<string, any>>({
+    item_id: "",
+    item_code: "",
+    item_name: "",
+    bom_type: "",
+    base_qty: "1",
+    unit: "",
+    version: "1.0",
+    status: "draft",
+    effective_date: "",
+    expiry_date: "",
+    remark: "",
+  });
+  const [modalDetailRows, setModalDetailRows] = useState<any[]>([]);
+
+  // 품목 검색 모달
+  const [showItemSearchModal, setShowItemSearchModal] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSearchTarget, setItemSearchTarget] = useState<"master" | "detail">("master");
+
+  // 엑셀 업로드
+  const [showExcelUpload, setShowExcelUpload] = useState(false);
+  const [excelFile, setExcelFile] = useState<File | null>(null);
+  const [excelUploading, setExcelUploading] = useState(false);
+
+  // 우측 탭
+  const [rightTab, setRightTab] = useState<"tree" | "version" | "history">("tree");
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 트리 편집 state
+  const [editingTree, setEditingTree] = useState<TreeNode[]>([]);
+  const [treeHasChanges, setTreeHasChanges] = useState(false);
+
+  // 공정 마스터 목록
+  const [processOptions, setProcessOptions] = useState<{ code: string; label: string }[]>([]);
+  useEffect(() => {
+    apiClient.get("/process-info/processes?useYn=Y").then((res) => {
+      const list = res.data?.data || [];
+      setProcessOptions(list.map((p: any) => ({ code: p.process_code, label: `${p.process_name} (${p.process_code})` })));
+    }).catch(() => {});
+  }, []);
+
+  // 트리뷰 행 선택 / 수정 모달
+  const [selectedTreeNodeId, setSelectedTreeNodeId] = useState<string | null>(null);
+  const [editingNodeId, setEditingNodeId] = useState<string | null>(null);
+  const [treeEditModalOpen, setTreeEditModalOpen] = useState(false);
+  const [treeEditTarget, setTreeEditTarget] = useState<TreeNode | null>(null);
+  const [treeEditForm, setTreeEditForm] = useState<Record<string, any>>({});
+
+  // 역전개 (Where Used)
+  const [treeViewMode, setTreeViewMode] = useState<"forward" | "reverse">("forward");
+  const [whereUsedData, setWhereUsedData] = useState<any[]>([]);
+  const [whereUsedLoading, setWhereUsedLoading] = useState(false);
+  const [originalDetailIds, setOriginalDetailIds] = useState<Set<string>>(new Set());
+  const [addTargetParentId, setAddTargetParentId] = useState<string | null>(null);
+  const [treeItemSearchOpen, setTreeItemSearchOpen] = useState(false);
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+  // ─── 데이터 로드 ──────────────────────────────
+  const fetchBomList = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+
+      const res = await apiClient.post(`/table-management/tables/${BOM_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "created_at", order: "desc" },
+      });
+
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setBomList(rows);
+      setTotalCount(rows.length);
+    } catch (err: any) {
+      toast.error("BOM 목록 조회에 실패했어요");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchBomList();
+  }, [fetchBomList]);
+
+  // 카테고리 옵션 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      try {
+        const columns = ["bom_type", "status"];
+        const detailColumns = ["process_type"];
+        const results: Record<string, { code: string; label: string }[]> = {};
+
+        for (const col of columns) {
+          try {
+            const res = await apiClient.get(`/table-categories/${BOM_TABLE}/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              const flatten = (items: any[]): { code: string; label: string }[] => {
+                const result: { code: string; label: string }[] = [];
+                for (const item of items) {
+                  result.push({ code: item.value || item.code, label: item.label || item.value });
+                  if (item.children?.length) {
+                    result.push(...flatten(item.children));
+                  }
+                }
+                return result;
+              };
+              results[col] = flatten(res.data.data);
+            }
+          } catch {}
+        }
+
+        // bom_detail 테이블의 카테고리
+        for (const col of detailColumns) {
+          try {
+            const res = await apiClient.get(`/table-categories/bom_detail/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              const flatten = (items: any[]): { code: string; label: string }[] => {
+                const result: { code: string; label: string }[] = [];
+                for (const item of items) {
+                  result.push({ code: item.value || item.code, label: item.label || item.value });
+                  if (item.children?.length) result.push(...flatten(item.children));
+                }
+                return result;
+              };
+              results[col] = flatten(res.data.data);
+            }
+          } catch {}
+        }
+
+        // item_info의 division 카테고리
+        try {
+          const res = await apiClient.get(`/table-categories/item_info/division/values`);
+          if (res.data?.data?.length > 0) {
+            const flatten = (items: any[]): { code: string; label: string }[] => {
+              const result: { code: string; label: string }[] = [];
+              for (const item of items) {
+                result.push({ code: item.valueCode || item.value || item.code, label: item.valueLabel || item.label || item.value });
+                if (item.children?.length) result.push(...flatten(item.children));
+              }
+              return result;
+            };
+            results["division"] = flatten(res.data.data);
+          }
+        } catch {}
+
+        setCategoryOptions(results);
+      } catch {}
+    };
+    loadCategories();
+  }, []);
+
+  // ─── BOM 상세 로드 ────────────────────────────
+  const fetchBomDetail = useCallback(async (bomId: string) => {
+    setDetailLoading(true);
+    try {
+      // 헤더 조회
+      const headerRes = await apiClient.get(`/bom/${bomId}/header`);
+      const header = headerRes.data?.data || headerRes.data;
+      setBomHeader(header);
+      setCurrentVersionId(header?.current_version_id || null);
+
+      // 디테일 조회 (현재 버전)
+      const versionId = header?.current_version_id;
+      const detailFilters: any[] = [{ columnName: "bom_id", operator: "equals", value: bomId }];
+      if (versionId) {
+        detailFilters.push({ columnName: "version_id", operator: "equals", value: versionId });
+      }
+
+      const detailRes = await apiClient.post(`/table-management/tables/${BOM_DETAIL_TABLE}/data`, {
+        page: 1,
+        size: 1000,
+        dataFilter: { enabled: true, filters: detailFilters },
+        sort: { columnName: "parent_detail_id", order: "asc" },
+      });
+
+      let details = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+
+      // item_info 조인을 위해 child_item_id 수집
+      const itemIds = [...new Set(details.map((d: any) => d.child_item_id).filter(Boolean))];
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1,
+            size: 1000,
+            dataFilter: {
+              enabled: true,
+              filters: [{ columnName: "id", operator: "in", value: itemIds }],
+            },
+          });
+          const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+          const itemMap = new Map(items.map((i: any) => [i.id, i]));
+
+          details = details.map((d: any) => {
+            const item = itemMap.get(d.child_item_id) as any;
+            const divisionRaw = item?.division || "";
+            // 카테고리 코드 → 라벨 변환 (쉼표 구분 다중값 지원)
+            const divisionLabel = divisionRaw.split(",").map((code: string) => {
+              const c = code.trim();
+              return categoryOptions["division"]?.find((o) => o.code === c)?.label || c;
+            }).filter((v: string) => v && v !== "s").join(", ");
+            return {
+              ...d,
+              item_number: item?.item_number || "",
+              item_name: item?.item_name || "",
+              item_type: divisionLabel,
+              unit: d.unit || item?.unit || "",
+              spec: item?.size || item?.spec || "",
+              writer: d.writer || "",
+              updated_date: d.updated_at || d.updated_date || "",
+            };
+          });
+        } catch {}
+      }
+
+      setBomDetails(details);
+      const tree = buildTree(details);
+      setTreeNodes(tree);
+
+      // 편집용 트리 동기화
+      setEditingTree(buildTree(details));
+      setOriginalDetailIds(new Set(details.map((d: any) => d.id)));
+      setTreeHasChanges(false);
+      // 기본 전개: 모든 노드 + 가상 루트 펼침
+      const allIds = new Set<string>();
+      if (header?.id) allIds.add(`__root_${header.id}`);
+      const collectIds = (nodes: TreeNode[]) => {
+        for (const n of nodes) {
+          allIds.add(n.id || "");
+          if (n.children.length > 0) collectIds(n.children);
+        }
+      };
+      collectIds(tree);
+      setExpandedNodes(allIds);
+    } catch (err: any) {
+      toast.error("BOM 상세 조회에 실패했어요");
+    } finally {
+      setDetailLoading(false);
+    }
+  }, [categoryOptions]);
+
+  // 버전 목록 로드
+  const fetchVersions = useCallback(async (bomId: string) => {
+    setVersionLoading(true);
+    try {
+      const res = await apiClient.get(`/bom/${bomId}/versions`);
+      const resData = res.data;
+      setVersions(resData?.data || []);
+      setCurrentVersionId(resData?.currentVersionId || null);
+    } catch (err: any) {
+      toast.error("버전 목록 조회에 실패했어요");
+    } finally {
+      setVersionLoading(false);
+    }
+  }, []);
+
+  // 이력 목록 로드
+  const fetchHistory = useCallback(async (bomId: string) => {
+    setHistoryLoading(true);
+    try {
+      const res = await apiClient.get(`/bom/${bomId}/history`);
+      setHistoryList(res.data?.data || []);
+    } catch (err: any) {
+      toast.error("이력 조회에 실패했어요");
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, []);
+
+  // BOM 선택 시 상세 로드
+  useEffect(() => {
+    if (selectedBomId) {
+      fetchBomDetail(selectedBomId);
+      if (rightTab === "version") fetchVersions(selectedBomId);
+      if (rightTab === "history") fetchHistory(selectedBomId);
+    } else {
+      setBomHeader(null);
+      setBomDetails([]);
+      setTreeNodes([]);
+      setEditingTree([]);
+      setTreeHasChanges(false);
+      setOriginalDetailIds(new Set());
+      setExpandedNodes(new Set());
+      setVersions([]);
+      setHistoryList([]);
+    }
+  }, [selectedBomId, fetchBomDetail, fetchVersions, fetchHistory, rightTab]);
+
+  // ─── 트리 토글 핸들러 ─────────────────────────
+  const toggleTreeNode = useCallback((nodeId: string) => {
+    const toggle = (nodes: TreeNode[]): TreeNode[] =>
+      nodes.map((n) =>
+        n.id === nodeId
+          ? { ...n, expanded: !n.expanded }
+          : { ...n, children: toggle(n.children) }
+      );
+    setTreeNodes((prev) => toggle(prev));
+  }, []);
+
+  const flatTree = useMemo(() => flattenTree(treeNodes), [treeNodes]);
+
+  // ─── 트리 편집 헬퍼 ──────────────────────────
+
+  // 트리 노드 토글 (펼침/접음)
+  const toggleEditTreeNode = useCallback((nodeId: string) => {
+    setExpandedNodes((prev) => {
+      const next = new Set(prev);
+      if (next.has(nodeId)) next.delete(nodeId);
+      else next.add(nodeId);
+      return next;
+    });
+  }, []);
+
+  // 전체 펼침
+  const expandAll = useCallback(() => {
+    const allIds = new Set<string>();
+    if (bomHeader?.id) allIds.add(`__root_${bomHeader.id}`);
+    const collect = (nodes: TreeNode[]) => {
+      for (const n of nodes) {
+        allIds.add(n.id || n._tempId || "");
+        if (n.children.length > 0) collect(n.children);
+      }
+    };
+    collect(editingTree);
+    setExpandedNodes(allIds);
+  }, [editingTree, bomHeader]);
+
+  // 역전개 (Where Used) 조회 — 현재 BOM 품목이 어디에 사용되는지
+  const fetchWhereUsed = useCallback(async () => {
+    if (!bomHeader?.item_code && !bomHeader?.item_id) return;
+    setWhereUsedLoading(true);
+    try {
+      // bom_detail에서 child_item_id가 현재 품목인 행 조회
+      const itemId = bomHeader.item_id || bomHeader.id;
+      const res = await apiClient.post(`/table-management/tables/bom_detail/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "child_item_id", operator: "equals", value: itemId }] },
+        autoFilter: true,
+      });
+      const details = res.data?.data?.data || res.data?.data?.rows || [];
+
+      // 각 bom_id로 BOM 마스터 정보 조회
+      const bomIds = [...new Set(details.map((d: any) => d.bom_id).filter(Boolean))];
+      const results: any[] = [];
+      for (const bomId of bomIds) {
+        try {
+          const bomRes = await apiClient.post(`/table-management/tables/bom/data`, {
+            page: 1, size: 1,
+            dataFilter: { enabled: true, filters: [{ columnName: "id", operator: "equals", value: bomId }] },
+            autoFilter: true,
+          });
+          const bom = (bomRes.data?.data?.data || bomRes.data?.data?.rows || [])[0];
+          if (bom) {
+            const detail = details.find((d: any) => d.bom_id === bomId);
+            results.push({
+              bom_id: bomId,
+              item_code: bom.item_code || bom.item_number || "",
+              item_name: bom.item_name || "",
+              quantity: detail?.quantity || "1",
+              unit: detail?.unit || "",
+              process_type: detail?.process_type || "",
+            });
+          }
+        } catch {}
+      }
+      setWhereUsedData(results);
+    } catch {
+      setWhereUsedData([]);
+    } finally {
+      setWhereUsedLoading(false);
+    }
+  }, [bomHeader]);
+
+  // 전체 접음
+  const collapseAll = useCallback(() => {
+    // 루트는 항상 펼침 유지, 나머지만 접음
+    const rootOnly = new Set<string>();
+    if (bomHeader?.id) rootOnly.add(`__root_${bomHeader.id}`);
+    setExpandedNodes(rootOnly);
+  }, [bomHeader]);
+
+  // 편집 트리 평탄화 (useMemo) — 가상 루트(BOM 마스터) 포함
+  const editingFlatTree = useMemo(() => {
+    const result: TreeNode[] = [];
+    // 가상 루트 (BOM 마스터)
+    if (bomHeader) {
+      const rootId = `__root_${bomHeader.id}`;
+      result.push({
+        id: rootId,
+        bom_id: bomHeader.id,
+        _tempId: undefined,
+        _isNew: false,
+        _isModified: false,
+        _level: 0,
+        _isVirtualRoot: true,
+        item_number: bomHeader.item_code || bomHeader.item_number || "",
+        item_name: bomHeader.item_name || "",
+        quantity: bomHeader.base_qty || "1",
+        unit: bomHeader.unit || "",
+        process_type: "",
+        loss_rate: "",
+        remark: bomHeader.remark || "",
+        spec: "",
+        writer: "",
+        updated_date: "",
+        item_type: "",
+        children: editingTree,
+      } as any);
+    }
+    // 하위 노드 평탄화 (레벨 +1)
+    const flatten = (nodes: TreeNode[], level: number) => {
+      for (const node of nodes) {
+        const nodeKey = node.id || node._tempId || "";
+        result.push({ ...node, _level: level });
+        if (node.children.length > 0 && expandedNodes.has(nodeKey)) {
+          flatten(node.children, level + 1);
+        }
+      }
+    };
+    const rootId = bomHeader ? `__root_${bomHeader.id}` : "";
+    if (!bomHeader || expandedNodes.has(rootId)) {
+      flatten(editingTree, bomHeader ? 1 : 0);
+    }
+    return result;
+  }, [editingTree, expandedNodes, bomHeader]);
+
+  // 트리에서 노드를 찾아서 업데이트
+  const updateTreeNode = (tree: TreeNode[], nodeId: string, updater: (node: TreeNode) => TreeNode): TreeNode[] => {
+    return tree.map(node => {
+      if ((node.id || node._tempId) === nodeId) return updater(node);
+      if (node.children.length > 0) return { ...node, children: updateTreeNode(node.children, nodeId, updater) };
+      return node;
+    });
+  };
+
+  // 트리에서 노드 삭제 (하위 포함)
+  const removeTreeNode = (tree: TreeNode[], nodeId: string): TreeNode[] => {
+    return tree.filter(node => {
+      if ((node.id || node._tempId) === nodeId) return false;
+      if (node.children.length > 0) node.children = removeTreeNode(node.children, nodeId);
+      return true;
+    });
+  };
+
+  // 트리에 자식 노드 추가
+  const addChildToNode = (tree: TreeNode[], parentId: string | null, newNode: TreeNode): TreeNode[] => {
+    if (parentId === null) return [...tree, newNode];
+    return tree.map(node => {
+      const nodeKey = node.id || node._tempId;
+      if (nodeKey === parentId) {
+        return { ...node, children: [...node.children, newNode], expanded: true };
+      }
+      if (node.children.length > 0) return { ...node, children: addChildToNode(node.children, parentId, newNode) };
+      return node;
+    });
+  };
+
+  // 노드 찾기 헬퍼
+  const findNodeById = (nodes: TreeNode[], id: string): TreeNode | null => {
+    for (const node of nodes) {
+      if ((node.id || node._tempId) === id) return node;
+      const found = findNodeById(node.children, id);
+      if (found) return found;
+    }
+    return null;
+  };
+
+  // 인라인 필드 변경
+  const handleTreeFieldChange = (nodeId: string, field: string, value: string) => {
+    setEditingTree(prev => updateTreeNode(prev, nodeId, node => ({
+      ...node, [field]: value, _isModified: !node._isNew ? true : node._isModified,
+    })));
+    setTreeHasChanges(true);
+  };
+
+  // 노드 삭제
+  const handleTreeDeleteNode = async (nodeId: string) => {
+    if (!await confirm("이 품목과 하위 품목을 삭제할까요?", { variant: "destructive" })) return;
+    setEditingTree(prev => removeTreeNode(prev, nodeId));
+    setTreeHasChanges(true);
+  };
+
+  // 하위 품목 추가 시작
+  const handleTreeAddChild = (parentId: string | null) => {
+    setAddTargetParentId(parentId);
+    setTreeItemSearchOpen(true);
+    searchItems("");
+  };
+
+  // 트리 품목 선택 완료 (트리에 추가)
+  const handleTreeItemSelect = (item: any) => {
+    // 1. 자기 자신 추가 방지 (BOM 마스터 품목과 동일한 품목)
+    if (bomHeader && (item.id === bomHeader.item_id || item.item_number === bomHeader.item_code)) {
+      toast.error("자기 자신을 BOM에 추가할 수 없습니다");
+      return;
+    }
+
+    // 2. 같은 경로에 동일 품목 중복 방지 (조상 노드에 같은 품목이 있으면 순환)
+    const getAncestorItemIds = (tree: TreeNode[], targetId: string | null): Set<string> => {
+      const ids = new Set<string>();
+      if (!targetId) return ids;
+      const collectPath = (nodes: TreeNode[], path: TreeNode[]): boolean => {
+        for (const n of nodes) {
+          const nk = n.id || n._tempId || "";
+          if (nk === targetId) {
+            path.forEach(p => { if (p.child_item_id) ids.add(p.child_item_id); });
+            if (n.child_item_id) ids.add(n.child_item_id);
+            return true;
+          }
+          if (n.children.length > 0 && collectPath(n.children, [...path, n])) return true;
+        }
+        return false;
+      };
+      collectPath(tree, []);
+      return ids;
+    };
+    const ancestorIds = getAncestorItemIds(editingTree, addTargetParentId);
+    if (ancestorIds.has(item.id)) {
+      toast.error("상위 경로에 이미 동일 품목이 있어 순환 참조가 발생합니다");
+      return;
+    }
+
+    const tempId = `temp_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+    const parentNode = addTargetParentId ? findNodeById(editingTree, addTargetParentId) : null;
+    const newLevel = parentNode ? ((parentNode._level ?? parentNode.level ?? 0) as number) + 1 : 0;
+
+    const newNode: TreeNode = {
+      id: "",
+      _tempId: tempId,
+      _isNew: true,
+      bom_id: selectedBomId || "",
+      parent_detail_id: addTargetParentId,
+      child_item_id: item.id,
+      item_number: item.item_number || "",
+      item_name: item.item_name || "",
+      item_type: item.division || "",
+      level: String(newLevel),
+      quantity: "1",
+      unit: item.unit || "",
+      process_type: "",
+      loss_rate: "0",
+      remark: "",
+      children: [],
+      expanded: true,
+    };
+
+    setEditingTree(prev => addChildToNode(prev, addTargetParentId, newNode));
+    setExpandedNodes(prev => {
+      const next = new Set(prev);
+      next.add(tempId);
+      if (addTargetParentId) next.add(addTargetParentId);
+      return next;
+    });
+    setTreeHasChanges(true);
+    setTreeItemSearchOpen(false);
+  };
+
+  // ─── 트리 저장 ────────────────────────────────
+  const handleSaveTree = async () => {
+    if (!selectedBomId || !treeHasChanges) return;
+
+    setSaving(true);
+    try {
+      // 1. version_id 확보
+      let versionId = currentVersionId;
+      if (!versionId) {
+        const initRes = await apiClient.post(`/bom/${selectedBomId}/initialize-version`, {});
+        versionId = initRes.data?.data?.versionId;
+      }
+
+      // 2. 트리 평탄화
+      const flatNodes: any[] = [];
+      const flattenForSave = (nodes: TreeNode[], parentId: string | null, level: number) => {
+        nodes.forEach((node, idx) => {
+          const nodeKey = node.id || node._tempId || "";
+          flatNodes.push({
+            ...node,
+            _nodeKey: nodeKey,
+            parent_detail_id: parentId,
+            level: String(level),
+            seq_no: String(idx + 1),
+            bom_id: selectedBomId,
+            version_id: versionId,
+          });
+          if (node.children.length > 0) flattenForSave(node.children, nodeKey, level + 1);
+        });
+      };
+      flattenForSave(editingTree, null, 0);
+
+      // 3. 분류: INSERT / UPDATE / DELETE
+      const currentIds = new Set(flatNodes.filter(n => n.id && !n._isNew).map(n => n.id));
+      const toDelete = [...originalDetailIds].filter(id => !currentIds.has(id));
+      const toInsert = flatNodes.filter(n => n._isNew);
+      const toUpdate = flatNodes.filter(n => n.id && !n._isNew && n._isModified);
+
+      // 4. DELETE
+      if (toDelete.length > 0) {
+        await apiClient.delete(`/table-management/tables/bom_detail/delete`, {
+          data: toDelete.map(id => ({ id })),
+        });
+      }
+
+      // 5. INSERT (순서 중요: 부모 먼저)
+      const tempToRealId: Record<string, string> = {};
+      for (const node of toInsert) {
+        let parentId = node.parent_detail_id;
+        if (parentId && tempToRealId[parentId]) parentId = tempToRealId[parentId];
+
+        const newId = crypto.randomUUID();
+        const res = await apiClient.post(`/table-management/tables/bom_detail/add`, {
+          id: newId,
+          bom_id: selectedBomId,
+          version_id: versionId,
+          parent_detail_id: parentId && !parentId.startsWith("temp_") ? parentId : null,
+          child_item_id: node.child_item_id,
+          level: node.level,
+          seq_no: node.seq_no,
+          quantity: node.quantity || "1",
+          unit: node.unit || "",
+          process_type: node.process_type || "",
+          loss_rate: node.loss_rate || "0",
+          remark: node.remark || "",
+          writer: user?.userId || "",
+          company_code: user?.company_code || "",
+        });
+
+        const realId = res.data?.data?.id || newId;
+        if (node._tempId) tempToRealId[node._tempId] = realId;
+      }
+
+      // 6. INSERT된 노드의 자식들 parent_detail_id 업데이트
+      for (const node of toInsert) {
+        if (!node._tempId) continue;
+        const childNodes = flatNodes.filter(n => n.parent_detail_id === node._tempId);
+        for (const child of childNodes) {
+          if (child.id && !child._isNew && tempToRealId[node._tempId]) {
+            await apiClient.put(`/table-management/tables/bom_detail/edit`, {
+              originalData: { id: child.id },
+              updatedData: { parent_detail_id: tempToRealId[node._tempId] },
+            });
+          }
+        }
+      }
+
+      // 7. UPDATE
+      for (const node of toUpdate) {
+        let parentId = node.parent_detail_id;
+        if (parentId && tempToRealId[parentId]) parentId = tempToRealId[parentId];
+
+        await apiClient.put(`/table-management/tables/bom_detail/edit`, {
+          originalData: { id: node.id },
+          updatedData: {
+            bom_id: selectedBomId,
+            version_id: versionId,
+            quantity: node.quantity,
+            unit: node.unit,
+            process_type: node.process_type,
+            loss_rate: node.loss_rate,
+            remark: node.remark,
+            level: node.level,
+            seq_no: node.seq_no,
+            parent_detail_id: parentId,
+          },
+        });
+      }
+
+      // 이력 자동 기록 (변경 내용 상세)
+      const historyParts: string[] = [];
+      // 추가된 품목
+      for (const n of toInsert) {
+        historyParts.push(`${n.item_number || "품목"} 추가 (소요량: ${n.quantity || 1})`);
+      }
+      // 수정된 품목 (변경 전후 비교)
+      for (const n of toUpdate) {
+        const orig = bomDetails.find((d: any) => d.id === n.id);
+        if (orig) {
+          const changes: string[] = [];
+          if (String(orig.quantity || "") !== String(n.quantity || "")) changes.push(`소요량 ${orig.quantity || "-"} → ${n.quantity || "-"}`);
+          if (String(orig.process_type || "") !== String(n.process_type || "")) changes.push(`공정 변경`);
+          if (String(orig.loss_rate || "") !== String(n.loss_rate || "")) changes.push(`손실율 ${orig.loss_rate || "0"} → ${n.loss_rate || "0"}`);
+          if (String(orig.remark || "") !== String(n.remark || "")) changes.push(`비고 변경`);
+          if (changes.length > 0) historyParts.push(`${n.item_number || "품목"}: ${changes.join(", ")}`);
+        }
+      }
+      // 삭제된 품목
+      for (const id of toDelete) {
+        const orig = bomDetails.find((d: any) => d.id === id);
+        historyParts.push(`${orig?.item_number || "품목"} 삭제`);
+      }
+      if (historyParts.length > 0) {
+        apiClient.post(`/bom/${selectedBomId}/history`, {
+          change_type: historyParts.some(p => p.includes("추가")) ? "추가" : historyParts.some(p => p.includes("삭제")) ? "삭제" : "수정",
+          change_description: historyParts.join("; "),
+        }).catch(() => {});
+      }
+
+      toast.success("BOM 트리가 저장되었어요");
+      setTreeHasChanges(false);
+      fetchBomDetail(selectedBomId);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "트리 저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ─── BOM 삭제 ────────────────────────────────
+  const handleDeleteBom = async () => {
+    if (checkedIds.length === 0) {
+      toast.error("삭제할 BOM을 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`선택한 ${checkedIds.length}건의 BOM을 삭제할까요?`);
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${BOM_TABLE}/delete`, {
+        data: checkedIds.map((id) => ({ id })),
+      });
+      toast.success("BOM이 삭제되었어요");
+      setCheckedIds([]);
+      setSelectedBomId(null);
+      fetchBomList();
+    } catch {
+      toast.error("BOM 삭제에 실패했어요");
+    }
+  };
+
+  // ─── BOM 등록/수정 ───────────────────────────
+  const openCreateModal = () => {
+    setIsEditMode(false);
+    setMasterForm({
+      item_id: "",
+      item_code: "",
+      item_name: "",
+      bom_type: "",
+      base_qty: "1",
+      unit: "",
+      version: "1.0",
+      status: "draft",
+      effective_date: "",
+      expiry_date: "",
+      remark: "",
+    });
+    setModalDetailRows([]);
+    setIsModalOpen(true);
+  };
+
+  const openEditModal = () => {
+    if (!bomHeader) return;
+    setIsEditMode(true);
+    setMasterForm({
+      id: bomHeader.id,
+      item_id: bomHeader.item_id || "",
+      item_code: bomHeader.item_code || bomHeader.item_number || "",
+      item_name: bomHeader.item_name || "",
+      bom_type: bomHeader.bom_type || "",
+      base_qty: bomHeader.base_qty || "1",
+      unit: bomHeader.unit || "",
+      version: bomHeader.version || "1.0",
+      status: bomHeader.status || "draft",
+      effective_date: bomHeader.effective_date || "",
+      expiry_date: bomHeader.expiry_date || "",
+      remark: bomHeader.remark || "",
+    });
+
+    setModalDetailRows(
+      bomDetails.map((d, i) => ({
+        _idx: i,
+        child_item_id: d.child_item_id || "",
+        item_number: d.item_number || "",
+        item_name: d.item_name || "",
+        quantity: d.quantity || "1",
+        unit: d.unit || "",
+        process_type: d.process_type || "",
+        loss_rate: d.loss_rate || "0",
+        remark: d.remark || "",
+      }))
+    );
+    setIsModalOpen(true);
+  };
+
+  const handleSaveBom = async () => {
+    if (!masterForm.item_id) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+    if (!masterForm.bom_type) {
+      toast.error("BOM 유형을 선택해주세요");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const bomFields: Record<string, any> = {
+        item_id: masterForm.item_id,
+        item_code: masterForm.item_code,
+        item_name: masterForm.item_name,
+        bom_type: masterForm.bom_type,
+        base_qty: masterForm.base_qty || "1",
+        unit: masterForm.unit || "",
+        version: masterForm.version || "1.0",
+        status: masterForm.status || "draft",
+        effective_date: masterForm.effective_date || null,
+        expiry_date: masterForm.expiry_date || null,
+        remark: masterForm.remark || "",
+        writer: user?.userId || "",
+        company_code: user?.company_code || "",
+      };
+
+      let bomId: string;
+
+      if (isEditMode && masterForm.id) {
+        await apiClient.put(`/table-management/tables/${BOM_TABLE}/edit`, {
+          originalData: { id: masterForm.id },
+          updatedData: bomFields,
+        });
+        bomId = masterForm.id;
+      } else {
+        const res = await apiClient.post(`/table-management/tables/${BOM_TABLE}/add`, { id: crypto.randomUUID(), ...bomFields });
+        bomId = res.data?.data?.id || res.data?.id;
+      }
+
+      // 초기 버전 생성 (신규 BOM)
+      if (!isEditMode && bomId) {
+        try {
+          await apiClient.post(`/bom/${bomId}/initialize-version`, {});
+        } catch {}
+      }
+
+      // 디테일 저장: 기존 삭제 후 재등록
+      if (isEditMode && masterForm.id) {
+        const existingDetails = bomDetails.filter((d) => d.bom_id === bomId);
+        if (existingDetails.length > 0) {
+          await apiClient.delete(`/table-management/tables/${BOM_DETAIL_TABLE}/delete`, {
+            data: existingDetails.map((d) => ({ id: d.id })),
+          });
+        }
+      }
+
+      // 현재 버전 ID 가져오기
+      let versionId = currentVersionId;
+      if (!versionId && bomId) {
+        try {
+          const verRes = await apiClient.get(`/bom/${bomId}/versions`);
+          const verData = verRes.data?.data || verRes.data;
+          versionId = verData?.currentVersionId || null;
+        } catch {}
+      }
+
+      for (let i = 0; i < modalDetailRows.length; i++) {
+        const row = modalDetailRows[i];
+        if (!row.child_item_id) continue;
+        await apiClient.post(`/table-management/tables/${BOM_DETAIL_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          bom_id: bomId,
+          version_id: versionId || null,
+          parent_detail_id: null,
+          child_item_id: row.child_item_id,
+          quantity: row.quantity || "1",
+          unit: row.unit || "",
+          process_type: row.process_type || "",
+          loss_rate: row.loss_rate || "0",
+          remark: row.remark || "",
+          level: "0",
+          seq_no: String(i + 1),
+          writer: user?.userId || "",
+          company_code: user?.company_code || "",
+        });
+      }
+
+      toast.success(isEditMode ? "BOM이 수정되었어요" : "BOM이 등록되었어요");
+      setIsModalOpen(false);
+      fetchBomList();
+      if (bomId) {
+        setSelectedBomId(bomId);
+        fetchBomDetail(bomId);
+        fetchVersions(bomId);
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "BOM 저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ─── 품목 검색 ───────────────────────────────
+  const searchItems = async (keyword?: string) => {
+    const kw = (keyword ?? itemSearchKeyword).trim();
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (kw) {
+        filters.push({ columnName: "item_name", operator: "contains", value: kw });
+      }
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1,
+        size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      let rows = res.data?.data?.data || res.data?.data?.rows || [];
+
+      // 키워드가 있고 품명으로 못 찾으면 품목코드로 재시도
+      if (kw && rows.length === 0) {
+        const res2 = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 50,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "contains", value: kw }] },
+          autoFilter: true,
+        });
+        rows = res2.data?.data?.data || res2.data?.data?.rows || [];
+      }
+      setItemSearchResults(rows);
+    } catch {
+      toast.error("품목 검색에 실패했어요");
+    } finally {
+      setItemSearchLoading(false);
+    }
+  };
+
+  const selectItem = (item: any) => {
+    if (itemSearchTarget === "master") {
+      setMasterForm((prev) => ({
+        ...prev,
+        item_id: item.id,
+        item_code: item.item_number || "",
+        item_name: item.item_name || "",
+        unit: item.unit || prev.unit,
+      }));
+      setShowItemSearchModal(false);
+    } else {
+      setModalDetailRows((prev) => [
+        ...prev,
+        {
+          _idx: prev.length,
+          child_item_id: item.id,
+          item_number: item.item_number || "",
+          item_name: item.item_name || "",
+          quantity: "1",
+          unit: item.unit || "",
+          process_type: "",
+          loss_rate: "0",
+          remark: "",
+        },
+      ]);
+      setShowItemSearchModal(false);
+    }
+    setItemSearchKeyword("");
+    setItemSearchResults([]);
+  };
+
+  // ─── 버전 관리 ───────────────────────────────
+  const handleCreateVersion = async () => {
+    if (!selectedBomId) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions`, {
+        versionName: newVersionName.trim() || undefined,
+      });
+      apiClient.post(`/bom/${selectedBomId}/history`, { change_type: "버전변경", change_description: `새 버전 생성: ${newVersionName.trim() || "자동"}` }).catch(() => {});
+      toast.success("새 버전이 생성되었어요");
+      setShowNewVersionDialog(false);
+      setNewVersionName("");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 생성에 실패했어요");
+    }
+  };
+
+  const handleLoadVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions/${versionId}/load`);
+      toast.success("버전을 불러왔어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 불러오기에 실패했어요");
+    }
+  };
+
+  const handleActivateVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    const ok = await confirm("이 버전을 사용 확정할까요? 기존 활성 버전은 비활성 처리돼요.");
+    if (!ok) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions/${versionId}/activate`);
+      apiClient.post(`/bom/${selectedBomId}/history`, { change_type: "버전변경", change_description: `버전 사용 확정` }).catch(() => {});
+      toast.success("버전이 사용 확정되었어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 확정에 실패했어요");
+    }
+  };
+
+  const handleDeleteVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    const ok = await confirm("이 버전을 삭제할까요? 관련 디테일 데이터도 함께 삭제돼요.");
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/bom/${selectedBomId}/versions/${versionId}`);
+      toast.success("버전이 삭제되었어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 이력 관리 ───────────────────────────────
+  const handleAddHistory = async () => {
+    if (!selectedBomId) return;
+    if (!newHistory.change_type) {
+      toast.error("변경 유형을 입력해주세요");
+      return;
+    }
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/history`, {
+        change_type: newHistory.change_type,
+        change_description: newHistory.change_description,
+        changed_by: user?.userId || "",
+      });
+      toast.success("이력이 추가되었어요");
+      setShowHistoryDialog(false);
+      setNewHistory({ change_type: "", change_description: "" });
+      fetchHistory(selectedBomId);
+    } catch (err: any) {
+      toast.error("이력 추가에 실패했어요");
+    }
+  };
+
+  // ─── 엑셀 업로드 ────────────────────────────
+  const handleExcelUpload = async () => {
+    if (!excelFile) {
+      toast.error("엑셀 파일을 선택해주세요");
+      return;
+    }
+    setExcelUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", excelFile);
+
+      const endpoint = selectedBomId
+        ? `/bom/${selectedBomId}/excel-upload-version`
+        : `/bom/excel-upload`;
+
+      const res = await apiClient.post(endpoint, formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+
+      const result = res.data?.data || res.data;
+      if (result?.success) {
+        toast.success(`엑셀 업로드 완료 (${result.insertedCount}건 등록)`);
+        setShowExcelUpload(false);
+        setExcelFile(null);
+        fetchBomList();
+        if (result.createdBomId) {
+          setSelectedBomId(result.createdBomId);
+        }
+      } else {
+        toast.error(result?.errors?.join("\n") || "엑셀 업로드에 실패했어요");
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "엑셀 업로드에 실패했어요");
+    } finally {
+      setExcelUploading(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (!selectedBomId) {
+      toast.error("BOM을 선택해주세요");
+      return;
+    }
+    try {
+      const res = await apiClient.get(`/bom/${selectedBomId}/excel-download`);
+      const data = res.data?.data || [];
+      if (data.length === 0) {
+        toast.error("다운로드할 데이터가 없어요");
+        return;
+      }
+      exportToExcel(data, `BOM_${bomHeader?.item_code || selectedBomId}`);
+      toast.success("엑셀 다운로드를 시작했어요");
+    } catch {
+      toast.error("엑셀 다운로드에 실패했어요");
+    }
+  };
+
+  // ─── 상태 뱃지 렌더 ───────────────────────────
+  const renderStatusBadge = (status?: string) => {
+    const info = STATUS_MAP[status || ""] || { label: status || "-", className: "bg-muted text-muted-foreground" };
+    return (
+      <span className={cn("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium", info.className)}>
+        <span className="w-1.5 h-1.5 rounded-full bg-current" />
+        {info.label}
+      </span>
+    );
+  };
+
+  // ─── 렌더링 ──────────────────────────────────
+  return (
+    <div className="flex flex-col h-full">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 px-5 py-3 text-xs text-muted-foreground bg-muted/50 border-b shrink-0">
+        <span>생산관리</span>
+        <ChevronRight className="w-3.5 h-3.5 text-muted-foreground/50" />
+        <span className="font-semibold text-foreground">BOM 관리</span>
+      </nav>
+
+      {/* 검색 필터 */}
+      <div className="px-4 py-2.5 border-b bg-muted/50 shrink-0">
+        <DynamicSearchFilter
+          tableName={BOM_TABLE}
+          filterId="c16-bom"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={totalCount}
+          extraActions={
+            <div className="flex items-center gap-2">
+              <Button size="sm" variant="outline" className="h-8 text-xs" onClick={() => setShowExcelUpload(true)}>
+                <Upload className="w-3.5 h-3.5 mr-1.5" />
+                엑셀 업로드
+              </Button>
+              <Button size="sm" variant="outline" className="h-8 text-xs" onClick={handleExcelDownload} disabled={!selectedBomId}>
+                <Download className="w-3.5 h-3.5 mr-1.5" />
+                엑셀 다운로드
+              </Button>
+            </div>
+          }
+        />
+      </div>
+
+      {/* 메인 콘텐츠: 좌우 분할 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card mx-3 mb-3">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: BOM 목록 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold text-foreground">BOM 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {totalCount}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" onClick={openCreateModal}>
+                    <Plus className="w-3.5 h-3.5 mr-1" />
+                    등록
+                  </Button>
+                  <div className="w-px h-4 bg-border mx-0.5" />
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                    onClick={handleDeleteBom}
+                    disabled={checkedIds.length === 0}
+                  >
+                    <Trash2 className="w-3.5 h-3.5 mr-1" />
+                    삭제
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* BOM 목록 테이블 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+                    key: col.key,
+                    label: col.label,
+                    render: col.key === "item_code"
+                      ? (_val: any, row: any) => <span className="font-mono text-[13px]">{row.item_code || row.item_number || "-"}</span>
+                      : col.key === "bom_type"
+                      ? (_val: any, row: any) => <span className="text-[13px]">{BOM_TYPE_OPTIONS.find((o) => o.code === row.bom_type)?.label || row.bom_type || "-"}</span>
+                      : col.key === "status"
+                      ? (_val: any, row: any) => renderStatusBadge(row.status)
+                      : undefined,
+                  }))}
+                  data={ts.groupData(bomList)}
+                  loading={loading}
+                  emptyMessage="등록된 BOM이 없어요"
+                  showCheckbox
+                  checkedIds={checkedIds}
+                  onCheckedChange={setCheckedIds}
+                  selectedId={selectedBomId}
+                  onSelect={(id) => setSelectedBomId(id)}
+                  onRowClick={(row) => setSelectedBomId(row.id)}
+                  showPagination
+                  draggableColumns={false}
+                  columnOrderKey="c16-bom"
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 상세 + 트리뷰 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            {!selectedBomId ? (
+              <div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
+                <Inbox className="w-10 h-10 text-muted-foreground/40" />
+                <p className="text-sm">좌측에서 BOM을 선택해주세요</p>
+              </div>
+            ) : (
+              <div className="flex flex-col h-full">
+                {/* 상세 카드 */}
+                <div className="border-b shrink-0">
+                  <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                    <h3 className="text-[13px] font-bold text-foreground">BOM 상세정보</h3>
+                    <Button size="sm" variant="ghost" onClick={openEditModal}>
+                      <FileText className="w-3.5 h-3.5 mr-1" />
+                      편집
+                    </Button>
+                  </div>
+                  {detailLoading ? (
+                    <div className="flex items-center justify-center py-8">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : bomHeader ? (
+                    <div className="grid grid-cols-2 text-sm">
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">품목코드</span>
+                        <span className="font-mono text-xs">{bomHeader.item_code || bomHeader.item_number || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">품명</span>
+                        <span className="text-xs">{bomHeader.item_name || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">BOM 유형</span>
+                        <span className="text-xs">{BOM_TYPE_OPTIONS.find((o) => o.code === bomHeader.bom_type)?.label || bomHeader.bom_type || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">버전</span>
+                        <span className="text-xs">{bomHeader.version || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">기준수량</span>
+                        <span className="text-xs">{bomHeader.base_qty || "1"} {bomHeader.unit || ""}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">상태</span>
+                        {renderStatusBadge(bomHeader.status)}
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 col-span-2">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">메모</span>
+                        <span className="text-xs text-muted-foreground">{bomHeader.remark || "-"}</span>
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+
+                {/* 하단 탭: 트리뷰 / 버전 / 이력 */}
+                <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+                  <Tabs value={rightTab} onValueChange={(v) => {
+                    setRightTab(v as any);
+                    if (v === "version" && selectedBomId) fetchVersions(selectedBomId);
+                    if (v === "history" && selectedBomId) fetchHistory(selectedBomId);
+                  }}>
+                    <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/50 shrink-0">
+                      <TabsList className="h-8">
+                        <TabsTrigger value="tree" className="text-xs px-3 h-7">
+                          <GitBranch className="w-3.5 h-3.5 mr-1" />
+                          트리뷰
+                        </TabsTrigger>
+                        <TabsTrigger value="version" className="text-xs px-3 h-7">
+                          <Copy className="w-3.5 h-3.5 mr-1" />
+                          버전
+                        </TabsTrigger>
+                        <TabsTrigger value="history" className="text-xs px-3 h-7">
+                          <History className="w-3.5 h-3.5 mr-1" />
+                          이력
+                        </TabsTrigger>
+                      </TabsList>
+
+                    </div>
+
+                    {/* 트리뷰 탭 */}
+                    <TabsContent value="tree" className="flex-1 overflow-auto p-0 m-0">
+                      {/* 상단 액션바 */}
+                      <div className="flex items-center justify-between border-b px-3 py-2 bg-muted/30">
+                        <div className="flex items-center gap-2">
+                          <Button size="sm" variant="outline" onClick={() => handleTreeAddChild(null)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />루트 품목 추가
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => {
+                              if (selectedTreeNodeId && !selectedTreeNodeId.startsWith("__root_")) {
+                                handleTreeAddChild(selectedTreeNodeId);
+                              }
+                            }}
+                            disabled={!selectedTreeNodeId || selectedTreeNodeId.startsWith("__root_")}
+                          >
+                            <Plus className="w-3.5 h-3.5 mr-1" />하위 품목 추가
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                            onClick={() => {
+                              if (selectedTreeNodeId && !selectedTreeNodeId.startsWith("__root_")) {
+                                handleTreeDeleteNode(selectedTreeNodeId);
+                                setSelectedTreeNodeId(null);
+                                setEditingNodeId(null);
+                              }
+                            }}
+                            disabled={!selectedTreeNodeId || selectedTreeNodeId.startsWith("__root_")}
+                          >
+                            <Trash2 className="w-3.5 h-3.5 mr-1" />선택 삭제
+                          </Button>
+                          <div className="w-px h-5 bg-border" />
+                          <div className="flex overflow-hidden rounded-md border">
+                            <button onClick={() => { setTreeViewMode("forward"); }} className={cn("h-7 px-2.5 text-[11px] font-medium transition-colors", treeViewMode === "forward" ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-muted")}>
+                              정전개
+                            </button>
+                            <button onClick={() => { setTreeViewMode("reverse"); fetchWhereUsed(); }} className={cn("h-7 border-l px-2.5 text-[11px] font-medium transition-colors", treeViewMode === "reverse" ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-muted")}>
+                              역전개
+                            </button>
+                          </div>
+                          {treeViewMode === "forward" && (
+                            <>
+                              <Button size="sm" variant="ghost" onClick={expandAll}>
+                                <ChevronsDown className="w-3.5 h-3.5 mr-1" />펼침
+                              </Button>
+                              <Button size="sm" variant="ghost" onClick={collapseAll}>
+                                <ChevronsUp className="w-3.5 h-3.5 mr-1" />접음
+                              </Button>
+                            </>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2">
+                          {treeHasChanges && <Badge variant="secondary" className="text-warning">변경됨</Badge>}
+                          <Button size="sm" onClick={handleSaveTree} disabled={!treeHasChanges || saving}>
+                            {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin mr-1" /> : <Save className="w-3.5 h-3.5 mr-1" />}
+                            저장
+                          </Button>
+                        </div>
+                      </div>
+
+                      {/* 역전개 (Where Used) 뷰 */}
+                      {treeViewMode === "reverse" ? (
+                        <div className="flex-1 overflow-auto">
+                          {whereUsedLoading ? (
+                            <div className="flex h-40 items-center justify-center">
+                              <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                            </div>
+                          ) : (
+                            <div className="p-4">
+                              <div className="flex items-center gap-2 mb-4">
+                                <Package className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-sm font-semibold">{bomHeader?.item_name || ""}</span>
+                                <span className="font-mono text-xs text-muted-foreground">({bomHeader?.item_code || ""})</span>
+                              </div>
+                              <div className="text-xs text-muted-foreground mb-3">사용처 (Where Used)</div>
+                              {whereUsedData.length === 0 ? (
+                                <div className="flex flex-col items-center justify-center h-32 text-muted-foreground gap-2">
+                                  <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                                  <p className="text-xs">이 품목을 사용하는 BOM이 없습니다</p>
+                                </div>
+                              ) : (
+                                <div className="space-y-2">
+                                  {whereUsedData.map((wu, idx) => (
+                                    <div key={idx} className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent/50 cursor-pointer" onClick={() => {
+                                      // 해당 BOM 선택
+                                      setSelectedBomId(wu.bom_id);
+                                      setTreeViewMode("forward");
+                                    }}>
+                                      <Package className="h-4 w-4 text-primary shrink-0" />
+                                      <div className="min-w-0 flex-1">
+                                        <div className="flex items-center gap-2">
+                                          <span className="text-sm font-semibold">{wu.item_name}</span>
+                                          <span className="font-mono text-[11px] text-muted-foreground">({wu.item_code})</span>
+                                        </div>
+                                        <div className="mt-0.5 flex gap-3 text-[11px] text-muted-foreground">
+                                          <span>소요량: <b className="text-foreground">{wu.quantity}</b> {wu.unit}</span>
+                                          {wu.process_type && <span>공정: <b className="text-foreground">{wu.process_type}</b></span>}
+                                        </div>
+                                      </div>
+                                      <ChevronRight className="h-4 w-4 text-muted-foreground/50 shrink-0" />
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      ) : editingFlatTree.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center h-40 text-muted-foreground gap-2">
+                          <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                          <p className="text-xs">등록된 하위 품목이 없습니다</p>
+                          <Button size="sm" variant="outline" onClick={() => handleTreeAddChild(null)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />첫 품목 추가
+                          </Button>
+                        </div>
+                      ) : (
+                        <table className="w-full border-collapse text-xs" style={{ minWidth: "1100px" }}>
+                          <colgroup><col style={{ width: "60px" }} /><col style={{ width: "140px" }} /><col /><col style={{ width: "70px" }} /><col style={{ width: "50px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "150px" }} /><col style={{ width: "80px" }} /></colgroup>
+                          <thead className="sticky top-0 z-10">
+                            <tr className="border-b bg-muted">
+                              <th className="px-2 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">레벨</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">품번</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">품명</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">소요량</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">단위</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">공정구분</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">규격</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">비고</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">작성자</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">수정일시</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">관리품목</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {editingFlatTree.map((node) => {
+                              const nodeKey = node.id || node._tempId || "";
+                              const isVirtualRoot = (node as any)._isVirtualRoot === true;
+                              const typeBadge = getItemTypeBadge(node.item_type);
+                              const hasChildren = isVirtualRoot ? editingTree.length > 0 : node.children.length > 0;
+                              const isExpanded = expandedNodes.has(nodeKey);
+                              const isSelected = selectedTreeNodeId === nodeKey;
+                              const isEditing = editingNodeId === nodeKey && !isVirtualRoot;
+                              const level = node._level || 0;
+
+                              const depthBarColor = isVirtualRoot ? "bg-primary/70"
+                                : level === 1 ? "bg-emerald-400"
+                                : level === 2 ? "bg-amber-400"
+                                : level >= 3 ? "bg-purple-400" : "bg-muted/60";
+
+                              const depthBg = isVirtualRoot
+                                ? "border-border bg-primary/10 font-medium hover:bg-primary/20"
+                                : isSelected
+                                  ? "border-border bg-primary/5"
+                                  : level === 1 ? "border-border bg-background hover:bg-muted/60"
+                                  : level >= 2 ? "border-border bg-muted/40 hover:bg-muted/50"
+                                  : "border-border bg-background hover:bg-muted/60";
+
+                              return (
+                                <tr
+                                  key={nodeKey}
+                                  className={cn("group cursor-pointer border-b transition-colors", depthBg)}
+                                  onClick={() => {
+                                    if (editingNodeId && editingNodeId !== nodeKey) setEditingNodeId(null);
+                                    setSelectedTreeNodeId(nodeKey);
+                                    if (hasChildren) toggleEditTreeNode(nodeKey);
+                                  }}
+                                  onDoubleClick={() => {
+                                    if (!isVirtualRoot) {
+                                      setTreeEditTarget(node);
+                                      setTreeEditForm({ quantity: node.quantity || "1", unit: node.unit || "", process_type: node.process_type || "", loss_rate: node.loss_rate || "0", spec: node.spec || "", material: node.material || "", remark: node.remark || "" });
+                                      setTreeEditModalOpen(true);
+                                    }
+                                  }}
+                                >
+                                  {/* 레벨 + 좌측 색상바 + 토글 */}
+                                  <td className="relative px-1 py-2" style={{ paddingLeft: `${level * 16 + 8}px` }}>
+                                    <div className={cn("absolute left-0 top-0 h-full w-[3px]", depthBarColor)} />
+                                    <div className="flex items-center gap-1">
+                                      <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
+                                        {hasChildren ? (
+                                          isExpanded ? <ChevronDown className={cn("h-3.5 w-3.5", isVirtualRoot ? "text-primary" : "text-muted-foreground/70")} />
+                                          : <ChevronRight className={cn("h-3.5 w-3.5", isVirtualRoot ? "text-primary" : "text-muted-foreground/70")} />
+                                        ) : (
+                                          <span className="h-1 w-1 rounded-full bg-muted-foreground/40" />
+                                        )}
+                                      </span>
+                                      <span className="text-[11px]">{level}</span>
+                                    </div>
+                                  </td>
+                                  {/* 품번 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">
+                                    <span className={cn("font-mono text-[11px]", isVirtualRoot && "font-bold text-foreground")}>
+                                      {node.item_number || "-"}
+                                    </span>
+                                  </td>
+                                  {/* 품명 */}
+                                  <td className={cn("overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2", isVirtualRoot && "font-bold")}>
+                                    {node.item_name || "-"}
+                                  </td>
+                                  {/* 소요량 */}
+                                  <td className="px-3 py-2 text-center">{isVirtualRoot ? (bomHeader?.base_qty || "1") : (node.quantity || "-")}</td>
+                                  {/* 단위 */}
+                                  <td className="px-3 py-2 text-center">{isVirtualRoot ? "-" : (node.unit || "-")}</td>
+                                  {/* 공정구분 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.process_type || "-")}</td>
+                                  {/* 규격 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.spec || "-")}</td>
+                                  {/* 비고 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.remark || "-")}</td>
+                                  {/* 작성자 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 text-muted-foreground">{isVirtualRoot ? "-" : (node.writer || "-")}</td>
+                                  {/* 수정일시 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 text-muted-foreground">
+                                    {isVirtualRoot ? "-" : (node.updated_date ? new Date(node.updated_date).toLocaleString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }) : "-")}
+                                  </td>
+                                  {/* 관리품목 */}
+                                  <td className="px-2 py-2" style={{ minWidth: "150px" }}>
+                                    {isVirtualRoot ? <span className="text-center block">-</span> : (
+                                      node.item_type ? (
+                                        <div className="flex flex-row items-center gap-1 flex-nowrap">{node.item_type.split(",").map((t: string, i: number) => {
+                                          const trimmed = t.trim();
+                                          if (!trimmed) return null;
+                                          return <span key={i} className="shrink-0 rounded px-1 py-0.5 text-[9px] font-medium bg-muted text-muted-foreground">{trimmed}</span>;
+                                        })}</div>
+                                      ) : "-"
+                                    )}
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      )}
+                    </TabsContent>
+
+                    {/* 버전 탭 */}
+                    <TabsContent value="version" className="flex-1 overflow-auto m-0">
+                      <div className="p-3">
+                        <div className="flex items-center justify-between mb-3">
+                          <span className="text-xs text-muted-foreground">
+                            {versions.length}개 버전
+                          </span>
+                          <Button size="sm" onClick={() => setShowNewVersionDialog(true)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />
+                            새 버전
+                          </Button>
+                        </div>
+                        {versionLoading ? (
+                          <div className="flex items-center justify-center py-8">
+                            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                          </div>
+                        ) : versions.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                            <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                            <p className="text-xs">버전 데이터가 없어요</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-2">
+                            {versions.map((ver) => {
+                              const isActive = ver.id === currentVersionId;
+                              const statusInfo = VERSION_STATUS_MAP[ver.status] || { label: ver.status, className: "bg-muted text-muted-foreground" };
+                              return (
+                                <div
+                                  key={ver.id}
+                                  className={cn(
+                                    "flex items-center justify-between p-3 rounded-lg border transition-colors",
+                                    isActive ? "border-primary/30 bg-primary/5" : "hover:bg-muted/50"
+                                  )}
+                                >
+                                  <div className="flex items-center gap-3">
+                                    <div className="flex flex-col gap-0.5">
+                                      <div className="flex items-center gap-2">
+                                        <span className="text-sm font-semibold">{ver.version_name}</span>
+                                        <span className={cn("text-[10px] font-medium px-1.5 py-0.5 rounded-full", statusInfo.className)}>
+                                          {statusInfo.label}
+                                        </span>
+                                        {isActive && (
+                                          <Badge variant="outline" className="text-[10px] h-4 border-primary/30 text-primary">
+                                            현재
+                                          </Badge>
+                                        )}
+                                      </div>
+                                      <span className="text-[11px] text-muted-foreground">
+                                        {ver.detail_count || 0}개 구성품 · {ver.created_date ? new Date(ver.created_date).toLocaleDateString("ko-KR") : "-"}
+                                      </span>
+                                    </div>
+                                  </div>
+                                  <div className="flex items-center gap-1">
+                                    {!isActive && (
+                                      <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => handleLoadVersion(ver.id)}>
+                                        <RotateCcw className="w-3 h-3 mr-1" />
+                                        불러오기
+                                      </Button>
+                                    )}
+                                    {ver.status !== "active" && (
+                                      <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => handleActivateVersion(ver.id)}>
+                                        <CheckCircle2 className="w-3 h-3 mr-1" />
+                                        확정
+                                      </Button>
+                                    )}
+                                    {ver.status !== "active" && (
+                                      <Button
+                                        size="sm"
+                                        variant="ghost"
+                                        className="h-7 text-xs text-destructive hover:text-destructive"
+                                        onClick={() => handleDeleteVersion(ver.id)}
+                                      >
+                                        <Trash2 className="w-3 h-3" />
+                                      </Button>
+                                    )}
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    </TabsContent>
+
+                    {/* 이력 탭 */}
+                    <TabsContent value="history" className="flex-1 overflow-auto m-0">
+                      <div className="p-3">
+                        <div className="flex items-center justify-between mb-3">
+                          <span className="text-xs text-muted-foreground">
+                            {historyList.length}건 이력
+                          </span>
+                        </div>
+                        {historyLoading ? (
+                          <div className="flex items-center justify-center py-8">
+                            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                          </div>
+                        ) : historyList.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                            <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                            <p className="text-xs">이력 데이터가 없어요</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-2">
+                            {historyList.map((entry) => {
+                              const typeStyle = CHANGE_TYPE_STYLE[entry.change_type] || "bg-muted text-muted-foreground ring-border";
+                              return (
+                                <div key={entry.id} className="p-3 rounded-lg border hover:bg-muted/50 transition-colors">
+                                  <div className="flex items-center justify-between mb-1">
+                                    <div className="flex items-center gap-2">
+                                      <span className={cn("inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium ring-1 ring-inset", typeStyle)}>
+                                        {entry.change_type}
+                                      </span>
+                                      {(entry.revision || entry.version) && (
+                                        <span className="text-[10px] text-muted-foreground">
+                                          {entry.revision && `차수 ${entry.revision}`}{entry.revision && entry.version && " / "}{entry.version && `v${entry.version}`}
+                                        </span>
+                                      )}
+                                    </div>
+                                    <span className="text-[10px] text-muted-foreground">
+                                      {entry.changed_date ? new Date(entry.changed_date).toLocaleString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }) : "-"}
+                                    </span>
+                                  </div>
+                                  <p className="text-xs mt-1">{entry.change_description || "-"}</p>
+                                  {entry.changed_by && (
+                                    <span className="text-[10px] text-muted-foreground/60 mt-1 block">
+                                      {entry.changed_by}
+                                    </span>
+                                  )}
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </div>
+              </div>
+            )}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ─── BOM 등록/수정 모달 ─────────────────── */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto" onPointerDownOutside={(e) => { if (showItemSearchModal) e.preventDefault(); }}>
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "BOM 수정" : "BOM 등록"}</DialogTitle>
+            <DialogDescription>{isEditMode ? "BOM 정보를 수정해요" : "새로운 BOM을 등록해요"}</DialogDescription>
+          </DialogHeader>
+        <div className="space-y-6">
+          {/* 기본정보 */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                품목 <span className="text-destructive">*</span>
+              </Label>
+              <div className="flex gap-2">
+                <Input
+                  className="h-9 flex-1"
+                  value={masterForm.item_code ? `${masterForm.item_code} - ${masterForm.item_name}` : ""}
+                  placeholder="품목을 검색해주세요"
+                  readOnly
+                  onClick={() => {
+                    setItemSearchTarget("master");
+                    setItemSearchKeyword("");
+                    setShowItemSearchModal(true);
+                    searchItems("");
+                  }}
+                />
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="h-9 px-3"
+                  onClick={() => {
+                    setItemSearchTarget("master");
+                    setItemSearchKeyword("");
+                    setShowItemSearchModal(true);
+                    searchItems("");
+                  }}
+                >
+                  <Search className="w-3.5 h-3.5" />
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                BOM 유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={masterForm.bom_type || ""} onValueChange={(v) => setMasterForm((prev) => ({ ...prev, bom_type: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  {BOM_TYPE_OPTIONS.map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">기준수량</Label>
+              <Input
+                className="h-9"
+                type="number"
+                value={masterForm.base_qty}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, base_qty: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">단위</Label>
+              <Input
+                className="h-9"
+                value={masterForm.unit}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, unit: e.target.value }))}
+                placeholder="EA"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                버전 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={masterForm.version}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, version: e.target.value }))}
+                placeholder="1.0"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">상태</Label>
+              <Select value={masterForm.status || "draft"} onValueChange={(v) => setMasterForm((prev) => ({ ...prev, status: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="draft">초안</SelectItem>
+                  <SelectItem value="active">활성</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                유효 시작일 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={masterForm.effective_date || ""}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, effective_date: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">유효 종료일</Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={masterForm.expiry_date || ""}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, expiry_date: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs font-medium">메모</Label>
+              <Textarea
+                className="min-h-[60px] resize-none"
+                value={masterForm.remark}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, remark: e.target.value }))}
+                placeholder="메모를 입력해주세요"
+              />
+            </div>
+          </div>
+
+          {/* BOM 구성품목 */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <h4 className="text-sm font-semibold">BOM 구성품목</h4>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  setItemSearchTarget("detail");
+                  setItemSearchKeyword("");
+                  setShowItemSearchModal(true);
+                  searchItems("");
+                }}
+              >
+                <Plus className="w-3.5 h-3.5 mr-1" />
+                품목 추가
+              </Button>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                    <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                    <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공정유형</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">손실율(%)</TableHead>
+                    <TableHead className="w-[40px]" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {modalDetailRows.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={8} className="text-center py-8 text-muted-foreground text-[13px]">
+                        구성품목을 추가해주세요
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    modalDetailRows.map((row, idx) => (
+                      <TableRow key={idx}>
+                        <TableCell className="text-center text-muted-foreground text-[13px]">{idx + 1}</TableCell>
+                        <TableCell className="font-mono text-[13px]">{row.item_number}</TableCell>
+                        <TableCell className="text-[13px]">{row.item_name}</TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[70px] text-xs"
+                            type="number"
+                            value={row.quantity}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].quantity = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell className="text-[13px]">{row.unit}</TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[90px] text-xs"
+                            value={row.process_type}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].process_type = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                            placeholder="공정"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[70px] text-xs"
+                            type="number"
+                            value={row.loss_rate}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].loss_rate = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                            onClick={() => setModalDetailRows((prev) => prev.filter((_, i) => i !== idx))}
+                          >
+                            <X className="w-3.5 h-3.5" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)} disabled={saving}>
+              취소
+            </Button>
+            <Button onClick={handleSaveBom} disabled={saving}>
+              {saving && <Loader2 className="w-3.5 h-3.5 animate-spin mr-1.5" />}
+              {isEditMode ? "수정" : "등록"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 품목 검색 모달 ──────────────────────── */}
+      <Dialog open={showItemSearchModal} onOpenChange={setShowItemSearchModal}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>품목 검색</DialogTitle>
+            <DialogDescription>품목코드 또는 품명으로 검색해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              className="h-9 flex-1"
+              placeholder="품목코드 또는 품명 입력"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+            />
+            <Button size="sm" className="h-9" onClick={() => searchItems()} disabled={itemSearchLoading}>
+              {itemSearchLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}
+            </Button>
+          </div>
+          <div className="max-h-[300px] overflow-auto border rounded-lg">
+            {itemSearchResults.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground gap-1">
+                <Search className="w-6 h-6 text-muted-foreground/40" />
+                <p className="text-xs">검색어를 입력해주세요</p>
+              </div>
+            ) : (
+              itemSearchResults.map((item) => {
+                const badge = getItemTypeBadge(item.division);
+                return (
+                  <div
+                    key={item.id}
+                    className="flex items-center gap-3 px-3 py-2 border-b last:border-b-0 hover:bg-accent cursor-pointer transition-colors"
+                    onClick={() => selectItem(item)}
+                  >
+                    <span className={cn("text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0", badge.className)}>
+                      {badge.label}
+                    </span>
+                    <span className="font-mono text-[11px] text-muted-foreground">{item.item_number}</span>
+                    <span className="text-xs">{item.item_name}</span>
+                    <span className="ml-auto text-[11px] text-muted-foreground">{item.unit || ""}</span>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 품목 수정 모달 (더블클릭) ─────────────────── */}
+      <Dialog open={treeEditModalOpen} onOpenChange={setTreeEditModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>품목 수정</DialogTitle>
+            <DialogDescription>선택한 품목의 BOM 구성 정보를 수정합니다</DialogDescription>
+          </DialogHeader>
+          {treeEditTarget && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">품목코드</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditTarget.item_number || ""} readOnly />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">품목명</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditTarget.item_name || ""} readOnly />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">구성수량 <span className="text-destructive">*</span></Label>
+                  <Input className="h-9" type="number" value={treeEditForm.quantity || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, quantity: e.target.value }))} />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">단위</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.unit || "-"} readOnly />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">공정</Label>
+                  <Select value={treeEditForm.process_type || ""} onValueChange={(v) => setTreeEditForm((p) => ({ ...p, process_type: v }))}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="공정 선택" /></SelectTrigger>
+                    <SelectContent>
+                      {processOptions.map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">로스율 (%)</Label>
+                  <Input className="h-9" type="number" value={treeEditForm.loss_rate || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, loss_rate: e.target.value }))} />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">규격</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.spec || "-"} readOnly />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">재질</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.material || "-"} readOnly />
+                </div>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold text-muted-foreground">메모</Label>
+                <textarea className="flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm" value={treeEditForm.remark || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, remark: e.target.value }))} placeholder="비고 사항을 입력하세요" />
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setTreeEditModalOpen(false)}>취소</Button>
+            <Button onClick={() => {
+              if (treeEditTarget) {
+                const nodeKey = treeEditTarget.id || treeEditTarget._tempId || "";
+                setEditingTree(prev => updateTreeNode(prev, nodeKey, node => ({
+                  ...node,
+                  quantity: treeEditForm.quantity || "1",
+                  process_type: treeEditForm.process_type || "",
+                  loss_rate: treeEditForm.loss_rate || "0",
+                  remark: treeEditForm.remark || "",
+                  _isModified: !node._isNew ? true : node._isModified,
+                })));
+                setTreeHasChanges(true);
+              }
+              setTreeEditModalOpen(false);
+            }}>저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 트리 품목 검색 모달 ─────────────────── */}
+      <Dialog open={treeItemSearchOpen} onOpenChange={setTreeItemSearchOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>품목 검색 (트리 추가)</DialogTitle>
+            <DialogDescription>추가할 품목을 검색해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              className="h-9 flex-1"
+              placeholder="품목코드 또는 품명 입력"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+            />
+            <Button size="sm" className="h-9" onClick={() => searchItems()} disabled={itemSearchLoading}>
+              {itemSearchLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}
+            </Button>
+          </div>
+          <div className="max-h-[300px] overflow-auto border rounded-lg">
+            {itemSearchResults.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground gap-1">
+                <Search className="w-6 h-6 text-muted-foreground/40" />
+                <p className="text-xs">검색어를 입력해주세요</p>
+              </div>
+            ) : (
+              itemSearchResults.filter((item) => {
+                // 자기 자신 제외
+                if (bomHeader && (item.id === bomHeader.item_id || item.item_number === bomHeader.item_code)) return false;
+                // 조상 경로 순환 참조 제외
+                if (addTargetParentId) {
+                  const collectAncestorIds = (nodes: TreeNode[], targetId: string, path: string[]): string[] | null => {
+                    for (const n of nodes) {
+                      const nk = n.id || n._tempId || "";
+                      if (nk === targetId) return [...path, n.child_item_id || ""];
+                      if (n.children.length > 0) {
+                        const r = collectAncestorIds(n.children, targetId, [...path, n.child_item_id || ""]);
+                        if (r) return r;
+                      }
+                    }
+                    return null;
+                  };
+                  const ancestors = collectAncestorIds(editingTree, addTargetParentId, []);
+                  if (ancestors && ancestors.includes(item.id)) return false;
+                }
+                return true;
+              }).map((item) => {
+                const badge = getItemTypeBadge(item.division);
+                return (
+                  <div
+                    key={item.id}
+                    className="flex items-center gap-3 px-3 py-2 border-b last:border-b-0 hover:bg-accent cursor-pointer transition-colors"
+                    onClick={() => handleTreeItemSelect(item)}
+                  >
+                    <span className={cn("text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0", badge.className)}>
+                      {badge.label}
+                    </span>
+                    <span className="font-mono text-[11px] text-muted-foreground">{item.item_number}</span>
+                    <span className="text-xs">{item.item_name}</span>
+                    <span className="ml-auto text-[11px] text-muted-foreground">{item.unit || ""}</span>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 새 버전 생성 다이얼로그 ────────────── */}
+      <Dialog open={showNewVersionDialog} onOpenChange={setShowNewVersionDialog}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>새 버전 생성</DialogTitle>
+            <DialogDescription>현재 버전의 데이터를 복사하여 새 버전을 만들어요</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-xs font-medium">버전명 (비워두면 자동 채번)</Label>
+            <Input
+              className="h-9"
+              value={newVersionName}
+              onChange={(e) => setNewVersionName(e.target.value)}
+              placeholder="예: 2.0"
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowNewVersionDialog(false)}>
+              취소
+            </Button>
+            <Button onClick={handleCreateVersion}>
+              <Plus className="w-3.5 h-3.5 mr-1" />
+              생성
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 이력 추가 다이얼로그 ───────────────── */}
+      <Dialog open={showHistoryDialog} onOpenChange={setShowHistoryDialog}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>이력 추가</DialogTitle>
+            <DialogDescription>BOM 변경 이력을 기록해요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                변경 유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={newHistory.change_type} onValueChange={(v) => setNewHistory((prev) => ({ ...prev, change_type: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="변경 유형 선택" /></SelectTrigger>
+                <SelectContent>
+                  {CHANGE_TYPE_OPTIONS.map((t) => (
+                    <SelectItem key={t} value={t}>{t}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">변경 내용</Label>
+              <Textarea
+                className="min-h-[80px] resize-none"
+                value={newHistory.change_description}
+                onChange={(e) => setNewHistory((prev) => ({ ...prev, change_description: e.target.value }))}
+                placeholder="변경 내용을 입력해주세요"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowHistoryDialog(false)}>
+              취소
+            </Button>
+            <Button onClick={handleAddHistory}>
+              <Plus className="w-3.5 h-3.5 mr-1" />
+              추가
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 엑셀 업로드 다이얼로그 ────────────── */}
+      <Dialog open={showExcelUpload} onOpenChange={setShowExcelUpload}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>BOM 엑셀 업로드</DialogTitle>
+            <DialogDescription>
+              {selectedBomId
+                ? "선택한 BOM에 새 버전을 엑셀로 생성해요"
+                : "엑셀 파일로 새 BOM을 생성해요"}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="border-2 border-dashed rounded-lg p-6 text-center">
+              <input
+                type="file"
+                accept=".xlsx,.xls"
+                className="hidden"
+                id="excel-file-input"
+                onChange={(e) => setExcelFile(e.target.files?.[0] || null)}
+              />
+              <label htmlFor="excel-file-input" className="cursor-pointer">
+                <Upload className="w-8 h-8 mx-auto mb-2 text-muted-foreground/40" />
+                <p className="text-sm text-muted-foreground mb-1">
+                  {excelFile ? excelFile.name : "클릭하여 파일을 선택해주세요"}
+                </p>
+                <p className="text-[10px] text-muted-foreground/60">.xlsx, .xls 형식</p>
+              </label>
+            </div>
+            <div className="bg-muted/50 rounded-lg p-3 text-xs text-muted-foreground space-y-1">
+              <p className="font-medium text-foreground">엑셀 형식 안내</p>
+              <p>레벨 0: BOM 마스터 (최상위 품목)</p>
+              <p>레벨 1: 직접 자품목</p>
+              <p>레벨 2+: 자품목의 자품목</p>
+              <p>필수 컬럼: level, item_number, quantity</p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setShowExcelUpload(false); setExcelFile(null); }}>
+              취소
+            </Button>
+            <Button onClick={handleExcelUpload} disabled={!excelFile || excelUploading}>
+              {excelUploading && <Loader2 className="w-3.5 h-3.5 animate-spin mr-1.5" />}
+              업로드
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/production/plan-management/page.tsx b/frontend/app/(main)/COMPANY_30/production/plan-management/page.tsx
new file mode 100644
index 00000000..546ed739
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/production/plan-management/page.tsx
@@ -0,0 +1,1850 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Upload,
+  Download,
+  RefreshCw,
+  ChevronRight,
+  Save,
+  Trash2,
+  Zap,
+  Package,
+  Wrench,
+  AlertTriangle,
+  ClipboardList,
+  Calendar,
+  Scissors,
+  Loader2,
+  Maximize2,
+  Minimize2,
+  Merge,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  getOrderSummary,
+  getStockShortage,
+  getPlans,
+  updatePlan,
+  deletePlan,
+  generateSchedule,
+  previewSchedule,
+  mergeSchedules,
+  generateSemiSchedule,
+  splitSchedule,
+  type OrderSummaryItem,
+  type StockShortageItem,
+  type ProductionPlan,
+  type GenerateScheduleRequest,
+  type GenerateScheduleResponse,
+} from "@/lib/api/production";
+import TimelineScheduler, {
+  type TimelineResource,
+  type TimelineEvent,
+  type ZoomLevel,
+  type StatusColor,
+} from "@/components/common/TimelineScheduler";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { apiClient } from "@/lib/api/client";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+
+// ─── 상수 ───
+
+const STATUS_COLORS: StatusColor[] = [
+  { key: "planned", label: "계획", bgClass: "from-blue-500 to-blue-600" },
+  { key: "work-order", label: "지시", bgClass: "from-amber-500 to-amber-600" },
+  { key: "in-progress", label: "진행", bgClass: "from-emerald-500 to-emerald-600" },
+  { key: "completed", label: "완료", bgClass: "from-gray-400 to-gray-500" },
+];
+
+const STATUS_LABEL: Record<string, string> = {
+  planned: "계획",
+  "work-order": "작업지시",
+  "in-progress": "진행중",
+  completed: "완료",
+};
+
+// 수주 테이블 컬럼 설정
+const ORDER_COLUMNS = [
+  { key: "total_order_qty", label: "총수주량" },
+  { key: "total_ship_qty", label: "출고량" },
+  { key: "total_balance_qty", label: "잔량" },
+  { key: "current_stock", label: "현재고" },
+  { key: "safety_stock", label: "안전재고" },
+  { key: "existing_plan_qty", label: "기생산계획량" },
+  { key: "in_progress_qty", label: "생산진행" },
+  { key: "required_plan_qty", label: "필요생산계획" },
+  { key: "lead_time", label: "리드타임(일)" },
+];
+
+// ========== 메인 컴포넌트 ==========
+
+export default function ProductionPlanManagementPage() {
+  // 탭 상태
+  const [leftTab, setLeftTab] = useState("order");
+  const [rightTab, setRightTab] = useState("finished");
+
+  // 전체화면 토글
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  // 로딩 상태
+  const [loadingOrders, setLoadingOrders] = useState(false);
+  const [loadingStock, setLoadingStock] = useState(false);
+  const [loadingPlans, setLoadingPlans] = useState(false);
+  const [generating, setGenerating] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  // 데이터 상태
+  const [orderItems, setOrderItems] = useState<OrderSummaryItem[]>([]);
+  const [stockItems, setStockItems] = useState<StockShortageItem[]>([]);
+  const [finishedPlans, setFinishedPlans] = useState<ProductionPlan[]>([]);
+  const [semiPlans, setSemiPlans] = useState<ProductionPlan[]>([]);
+  const [equipmentList, setEquipmentList] = useState<{ id: string; equipment_code: string; equipment_name: string }[]>([]);
+
+  // 선택/토글 상태
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [selectedItemGroups, setSelectedItemGroups] = useState<Set<string>>(new Set());
+  const [filterUnplannedOrdersOnly, setFilterUnplannedOrdersOnly] = useState(false);
+  const [selectedStockItems, setSelectedStockItems] = useState<Set<string>>(new Set());
+
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [searchItemCode, setSearchItemCode] = useState("");
+  const [searchStatus, setSearchStatus] = useState("all");
+  const [searchStartDate, setSearchStartDate] = useState("");
+  const [searchEndDate, setSearchEndDate] = useState("");
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-plan-management", "sales_order_mng", ORDER_COLUMNS);
+
+  // 타임라인 옵션
+  const [recalculateUnstarted, setRecalculateUnstarted] = useState(true);
+  const [finishedZoom, setFinishedZoom] = useState<ZoomLevel>("week");
+  const [semiZoom, setSemiZoom] = useState<ZoomLevel>("week");
+
+  // 반제품 옵션
+  const [semiConsiderStock, setSemiConsiderStock] = useState(true);
+  const [semiRecalculate, setSemiRecalculate] = useState(false);
+  const [semiExcludeUsed, setSemiExcludeUsed] = useState(true);
+
+  // 모달 상태
+  const [scheduleModalOpen, setScheduleModalOpen] = useState(false);
+  const [orderImportModalOpen, setOrderImportModalOpen] = useState(false);
+  const [stockImportModalOpen, setStockImportModalOpen] = useState(false);
+  const [changeConfirmModalOpen, setChangeConfirmModalOpen] = useState(false);
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 모달 데이터
+  const [selectedPlan, setSelectedPlan] = useState<ProductionPlan | null>(null);
+  const [modalQuantity, setModalQuantity] = useState(0);
+  const [modalStartDate, setModalStartDate] = useState("");
+  const [modalEndDate, setModalEndDate] = useState("");
+  const [modalManager, setModalManager] = useState("");
+  const [modalWorkOrderNo, setModalWorkOrderNo] = useState("");
+  const [modalRemarks, setModalRemarks] = useState("");
+  const [modalEquipmentId, setModalEquipmentId] = useState("");
+
+  // 미리보기 데이터
+  const [previewData, setPreviewData] = useState<GenerateScheduleResponse | null>(null);
+
+  // 불러오기 모드
+  const [importMode, setImportMode] = useState<"add" | "new">("add");
+
+  // 병합: 타임라인에서 선택된 계획 ID
+  const [selectedPlanIds, setSelectedPlanIds] = useState<Set<number>>(new Set());
+
+  // useConfirmDialog
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // ========== 데이터 로드 ==========
+
+  const fetchOrderSummary = useCallback(async () => {
+    setLoadingOrders(true);
+    try {
+      const res = await getOrderSummary({
+        excludePlanned: filterUnplannedOrdersOnly,
+        itemCode: searchItemCode || undefined,
+      });
+      if (res.success) setOrderItems(res.data || []);
+    } catch (err: any) {
+      toast.error("수주 데이터 조회 실패: " + (err.message || ""));
+    } finally {
+      setLoadingOrders(false);
+    }
+  }, [filterUnplannedOrdersOnly, searchItemCode]);
+
+  const fetchStockShortage = useCallback(async () => {
+    setLoadingStock(true);
+    try {
+      const res = await getStockShortage();
+      if (res.success) setStockItems(res.data || []);
+    } catch (err: any) {
+      toast.error("안전재고 부족분 조회 실패: " + (err.message || ""));
+    } finally {
+      setLoadingStock(false);
+    }
+  }, []);
+
+  const fetchPlans = useCallback(async () => {
+    setLoadingPlans(true);
+    try {
+      const [finRes, semiRes] = await Promise.all([
+        getPlans({
+          productType: "완제품",
+          status: searchStatus !== "all" ? searchStatus : undefined,
+          startDate: searchStartDate || undefined,
+          endDate: searchEndDate || undefined,
+          itemCode: searchItemCode || undefined,
+        }),
+        getPlans({
+          productType: "반제품",
+          status: searchStatus !== "all" ? searchStatus : undefined,
+          startDate: searchStartDate || undefined,
+          endDate: searchEndDate || undefined,
+        }),
+      ]);
+      if (finRes.success) setFinishedPlans(finRes.data || []);
+      if (semiRes.success) setSemiPlans(semiRes.data || []);
+    } catch (err: any) {
+      toast.error("생산계획 조회 실패: " + (err.message || ""));
+    } finally {
+      setLoadingPlans(false);
+    }
+  }, [searchStatus, searchStartDate, searchEndDate, searchItemCode]);
+
+  const fetchEquipmentList = useCallback(async () => {
+    try {
+      const res = await apiClient.get("/process-info/equipments");
+      if (res.data?.success) setEquipmentList(res.data.data || []);
+    } catch {
+      // 설비 목록 없어도 정상 동작
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchOrderSummary();
+    fetchStockShortage();
+    fetchPlans();
+    fetchEquipmentList();
+  }, []);
+
+  // ========== DynamicSearchFilter 콜백 ==========
+
+  const handleSearchFilterChange = useCallback((filters: FilterValue[]) => {
+    setSearchFilters(filters);
+    let itemCode = "";
+    let status = "all";
+    let startDate = "";
+    let endDate = "";
+    for (const f of filters) {
+      if (f.columnName === "item_code" && f.value) itemCode = f.value;
+      if (f.columnName === "status" && f.value) status = f.value;
+      if (f.columnName === "start_date" && f.operator === "between" && f.value) {
+        const [s, e] = f.value.split("|");
+        if (s) startDate = s;
+        if (e) endDate = e;
+      }
+    }
+    setSearchItemCode(itemCode);
+    setSearchStatus(status || "all");
+    setSearchStartDate(startDate);
+    setSearchEndDate(endDate);
+  }, []);
+
+  useEffect(() => {
+    if (searchFilters.length > 0) {
+      fetchOrderSummary();
+      fetchPlans();
+    }
+  }, [searchItemCode, searchStatus, searchStartDate, searchEndDate]);
+
+  // ========== 토글/선택 핸들러 ==========
+
+  const toggleItemExpand = useCallback((itemCode: string) => {
+    setExpandedItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(itemCode)) next.delete(itemCode);
+      else next.add(itemCode);
+      return next;
+    });
+  }, []);
+
+  const toggleItemGroupSelect = useCallback((itemCode: string) => {
+    setSelectedItemGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(itemCode)) next.delete(itemCode);
+      else next.add(itemCode);
+      return next;
+    });
+  }, []);
+
+  const toggleAllItemGroups = useCallback(
+    (checked: boolean) => {
+      setSelectedItemGroups(checked ? new Set(orderItems.map((i) => i.item_code)) : new Set());
+    },
+    [orderItems]
+  );
+
+  const toggleStockItem = useCallback((itemCode: string) => {
+    setSelectedStockItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(itemCode)) next.delete(itemCode);
+      else next.add(itemCode);
+      return next;
+    });
+  }, []);
+
+  const toggleAllStockItems = useCallback(
+    (checked: boolean) => {
+      setSelectedStockItems(checked ? new Set(stockItems.map((i) => i.item_code)) : new Set());
+    },
+    [stockItems]
+  );
+
+  // ========== 타임라인 리소스 & 이벤트 ==========
+
+  const finishedResources: TimelineResource[] = useMemo(() => {
+    const map = new Map<string, TimelineResource>();
+    for (const p of finishedPlans) {
+      if (!map.has(p.item_code)) {
+        map.set(p.item_code, {
+          id: p.item_code,
+          label: p.item_code,
+          subLabel: p.item_name,
+        });
+      }
+    }
+    return Array.from(map.values());
+  }, [finishedPlans]);
+
+  const finishedEvents: TimelineEvent[] = useMemo(() => {
+    return finishedPlans.map((p) => ({
+      id: p.id,
+      resourceId: p.item_code,
+      startDate: p.start_date?.split("T")[0] || "",
+      endDate: p.end_date?.split("T")[0] || "",
+      label: `${Number(p.plan_qty).toLocaleString()}`,
+      status: p.status,
+      progress: Number(p.progress_rate) || 0,
+      data: p,
+    }));
+  }, [finishedPlans]);
+
+  const semiResources: TimelineResource[] = useMemo(() => {
+    const map = new Map<string, TimelineResource>();
+    for (const p of semiPlans) {
+      if (!map.has(p.item_code)) {
+        map.set(p.item_code, {
+          id: p.item_code,
+          label: p.item_code,
+          subLabel: p.item_name,
+        });
+      }
+    }
+    return Array.from(map.values());
+  }, [semiPlans]);
+
+  const semiEvents: TimelineEvent[] = useMemo(() => {
+    return semiPlans.map((p) => ({
+      id: p.id,
+      resourceId: p.item_code,
+      startDate: p.start_date?.split("T")[0] || "",
+      endDate: p.end_date?.split("T")[0] || "",
+      label: `${Number(p.plan_qty).toLocaleString()}`,
+      status: p.status,
+      progress: Number(p.progress_rate) || 0,
+      data: p,
+    }));
+  }, [semiPlans]);
+
+  // ========== 액션 핸들러 ==========
+
+  const handleSearch = useCallback(() => {
+    fetchOrderSummary();
+    fetchPlans();
+  }, [fetchOrderSummary, fetchPlans]);
+
+  // 자동 스케줄 생성 (preview → confirm → apply)
+  const handleGenerateSchedule = useCallback(async () => {
+    if (selectedItemGroups.size === 0) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+
+    // 납기일별로 분리하여 각각 계획 생성
+    const items: GenerateScheduleRequest["items"] = [];
+    orderItems
+      .filter((item) => selectedItemGroups.has(item.item_code))
+      .forEach((item) => {
+        const leadTime = Number(item.lead_time) || 0;
+        // 재계산 모드: 기존 planned를 삭제 후 재생성 → 수주 잔량에서 진행중만 빼기
+        const totalRequired = recalculateUnstarted
+          ? Number(item.total_balance_qty || 0) - Number(item.in_progress_qty || 0)
+          : Number(item.required_plan_qty);
+        if (totalRequired <= 0) return;
+
+        // 수주가 여러 건이고 납기일이 다르면 각각 분리
+        if (item.orders && item.orders.length > 1) {
+          const byDueDate = new Map<string, number>();
+          for (const order of item.orders) {
+            const dd = order.due_date || new Date().toISOString().split("T")[0];
+            byDueDate.set(dd, (byDueDate.get(dd) || 0) + Number(order.balance_qty || 0));
+          }
+          if (byDueDate.size > 1) {
+            // 납기일별 잔량 비율로 required_plan_qty 분배
+            const totalBalance = Number(item.total_balance_qty) || 1;
+            let distributed = 0;
+            const entries = [...byDueDate.entries()];
+            entries.forEach(([dueDate, balanceQty], idx) => {
+              if (balanceQty <= 0) return;
+              // 마지막 건은 나머지 할당 (반올림 오차 방지)
+              const qty = idx === entries.length - 1
+                ? totalRequired - distributed
+                : Math.round(totalRequired * (balanceQty / totalBalance));
+              if (qty <= 0) return;
+              distributed += qty;
+              items.push({
+                item_code: item.item_code,
+                item_name: item.item_name,
+                required_qty: qty,
+                earliest_due_date: dueDate,
+                lead_time: leadTime,
+              });
+            });
+          } else {
+            items.push({
+              item_code: item.item_code,
+              item_name: item.item_name,
+              required_qty: totalRequired,
+              earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+              lead_time: leadTime,
+            });
+          }
+        } else {
+          items.push({
+            item_code: item.item_code,
+            item_name: item.item_name,
+            required_qty: totalRequired,
+            earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+            lead_time: leadTime,
+          });
+        }
+      });
+
+    // items가 비어있으면 사용자에게 알림
+
+
+    if (items.length === 0) {
+      toast.error("계획 수량이 있는 품목이 없습니다. 수주 잔량을 확인해주세요.");
+      return;
+    }
+
+    setGenerating(true);
+    try {
+      const req: GenerateScheduleRequest = {
+        items,
+        options: {
+          safety_lead_time: 0,
+          recalculate_unstarted: recalculateUnstarted,
+          product_type: "완제품",
+        },
+      };
+      const previewRes = await previewSchedule(req);
+      if (previewRes.success) {
+        setPreviewData(previewRes.data);
+        setChangeConfirmModalOpen(true);
+      }
+    } catch (err: any) {
+      toast.error("스케줄 미리보기 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [selectedItemGroups, orderItems, recalculateUnstarted]);
+
+  const handleApplySchedule = useCallback(async () => {
+    if (selectedItemGroups.size === 0) return;
+
+    // 납기일별로 분리하여 각각 계획 생성
+    const items: GenerateScheduleRequest["items"] = [];
+    orderItems
+      .filter((item) => selectedItemGroups.has(item.item_code))
+      .forEach((item) => {
+        const leadTime = Number(item.lead_time) || 0;
+        const totalRequired = recalculateUnstarted
+          ? Number(item.required_plan_qty) + Number(item.existing_plan_qty || 0)
+          : Number(item.required_plan_qty);
+        if (totalRequired <= 0) return;
+
+        if (item.orders && item.orders.length > 1) {
+          const byDueDate = new Map<string, number>();
+          for (const order of item.orders) {
+            const dd = order.due_date || new Date().toISOString().split("T")[0];
+            byDueDate.set(dd, (byDueDate.get(dd) || 0) + Number(order.balance_qty || 0));
+          }
+          if (byDueDate.size > 1) {
+            const totalBalance = Number(item.total_balance_qty) || 1;
+            let distributed = 0;
+            const entries = [...byDueDate.entries()];
+            entries.forEach(([dueDate, balanceQty], idx) => {
+              if (balanceQty <= 0) return;
+              const qty = idx === entries.length - 1
+                ? totalRequired - distributed
+                : Math.round(totalRequired * (balanceQty / totalBalance));
+              if (qty <= 0) return;
+              distributed += qty;
+              items.push({
+                item_code: item.item_code,
+                item_name: item.item_name,
+                required_qty: qty,
+                earliest_due_date: dueDate,
+                lead_time: leadTime,
+              });
+            });
+          } else {
+            items.push({
+              item_code: item.item_code,
+              item_name: item.item_name,
+              required_qty: totalRequired,
+              earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+              lead_time: leadTime,
+            });
+          }
+        } else {
+          items.push({
+            item_code: item.item_code,
+            item_name: item.item_name,
+            required_qty: totalRequired,
+            earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+            lead_time: leadTime,
+          });
+        }
+      });
+
+    setGenerating(true);
+    try {
+      const res = await generateSchedule({
+        items,
+        options: {
+          safety_lead_time: 0,
+          recalculate_unstarted: recalculateUnstarted,
+          product_type: "완제품",
+        },
+      });
+      if (res.success) {
+        toast.success(`스케줄이 생성되었습니다 (${res.data.summary.total}건)`);
+        setChangeConfirmModalOpen(false);
+        setPreviewData(null);
+        fetchPlans();
+        fetchOrderSummary();
+      }
+    } catch (err: any) {
+      toast.error("스케줄 생성 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [selectedItemGroups, orderItems, recalculateUnstarted, fetchPlans, fetchOrderSummary]);
+
+  // 타임라인 초기화 (계획 상태만 삭제)
+  const handleClearTimeline = useCallback(async () => {
+    if (finishedPlans.length === 0) {
+      toast.info("삭제할 계획이 없습니다");
+      return;
+    }
+    const plannedIds = finishedPlans.filter((p) => p.status === "planned").map((p) => p.id);
+    if (plannedIds.length === 0) {
+      toast.info("삭제 가능한 계획이 없습니다 (계획 상태만 삭제 가능)");
+      return;
+    }
+    const ok = await confirm(`${plannedIds.length}건의 계획을 삭제하시겠습니까?`, {
+      description: "삭제된 계획은 복구할 수 없습니다.",
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+
+    try {
+      const results = await Promise.allSettled(plannedIds.map((id) => deletePlan(id)));
+      const failedIds = plannedIds.filter((_, i) => results[i].status === "rejected");
+      const succeededCount = plannedIds.length - failedIds.length;
+
+      if (failedIds.length === plannedIds.length) {
+        // 전부 삭제 실패
+        toast.error(`${failedIds.length}건 모두 삭제에 실패했습니다. 다시 시도해주세요.`);
+      } else if (failedIds.length > 0) {
+        // 일부 삭제 실패
+        toast.warning(
+          `${succeededCount}건 삭제 완료, ${failedIds.length}건 삭제 실패. 실패 항목을 다시 시도해주세요.`
+        );
+      } else {
+        // 전부 성공
+        toast.success(`${plannedIds.length}건의 계획이 삭제되었습니다`);
+      }
+      fetchPlans();
+    } catch (err: any) {
+      toast.error("삭제 실패: " + (err.message || ""));
+    }
+  }, [finishedPlans, fetchPlans, confirm]);
+
+  // 반제품 자동 생성
+  const handleGenerateSemiSchedule = useCallback(async () => {
+    const planIds = finishedPlans.map((p) => p.id);
+    if (planIds.length === 0) {
+      toast.error("완제품 생산계획이 없습니다");
+      return;
+    }
+    setGenerating(true);
+    try {
+      const res = await generateSemiSchedule(planIds, {
+        considerStock: semiConsiderStock,
+        excludeUsed: semiExcludeUsed,
+      });
+      if (res.success) {
+        toast.success(`반제품 계획 ${res.data.count}건이 생성되었습니다`);
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("반제품 계획 생성 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [finishedPlans, semiConsiderStock, semiExcludeUsed, fetchPlans]);
+
+  // 스케줄 상세 모달 열기
+  const openScheduleDetail = useCallback((event: TimelineEvent) => {
+    const plan = event.data as ProductionPlan;
+    if (!plan) return;
+    setSelectedPlan(plan);
+    setModalQuantity(Number(plan.plan_qty));
+    setModalStartDate(plan.start_date?.split("T")[0] || "");
+    setModalEndDate(plan.end_date?.split("T")[0] || "");
+    setModalManager((plan as any).manager_name || "");
+    setModalWorkOrderNo((plan as any).work_order_no || "");
+    setModalRemarks(plan.remarks || "");
+    setModalEquipmentId((plan as any).equipment_code || (plan.equipment_id ? String(plan.equipment_id) : ""));
+    setScheduleModalOpen(true);
+  }, []);
+
+  const handleSavePlan = useCallback(async () => {
+    if (!selectedPlan) return;
+    setSaving(true);
+    try {
+      const res = await updatePlan(selectedPlan.id, {
+        plan_qty: modalQuantity,
+        start_date: modalStartDate,
+        end_date: modalEndDate,
+        manager_name: modalManager,
+        work_order_no: modalWorkOrderNo,
+        remarks: modalRemarks,
+        equipment_id: modalEquipmentId ? Number(modalEquipmentId) : null,
+      } as any);
+      if (res.success) {
+        toast.success("생산계획이 수정되었습니다");
+        setScheduleModalOpen(false);
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("수정 실패: " + (err.message || ""));
+    } finally {
+      setSaving(false);
+    }
+  }, [selectedPlan, modalQuantity, modalStartDate, modalEndDate, modalManager, modalWorkOrderNo, modalRemarks, modalEquipmentId, fetchPlans]);
+
+  const handleDeletePlan = useCallback(async () => {
+    if (!selectedPlan) return;
+    const ok = await confirm("이 생산계획을 삭제하시겠습니까?", {
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await deletePlan(selectedPlan.id);
+      toast.success("삭제되었습니다");
+      setScheduleModalOpen(false);
+      fetchPlans();
+    } catch (err: any) {
+      toast.error("삭제 실패: " + (err.message || ""));
+    }
+  }, [selectedPlan, fetchPlans, confirm]);
+
+  const handleSplitSchedule = useCallback(async (splitQty: number) => {
+    if (!selectedPlan || splitQty <= 0) return;
+    try {
+      const res = await splitSchedule(selectedPlan.id, splitQty);
+      if (res.success) {
+        toast.success("계획이 분할되었습니다");
+        setScheduleModalOpen(false);
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("분할 실패: " + (err.message || ""));
+    }
+  }, [selectedPlan, fetchPlans]);
+
+  // 병합 핸들러
+  const handleMergeSchedules = useCallback(async () => {
+    if (selectedPlanIds.size < 2) {
+      toast.error("2개 이상의 계획을 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`${selectedPlanIds.size}건의 계획을 병합하시겠습니까?`, {
+      description: "동일 품목의 계획이 하나로 병합됩니다.",
+      confirmText: "병합",
+    });
+    if (!ok) return;
+
+    try {
+      const ids = Array.from(selectedPlanIds);
+      const productType = rightTab === "finished" ? "완제품" : "반제품";
+      const res = await mergeSchedules(ids, productType);
+      if (res.success) {
+        toast.success("계획이 병합되었습니다");
+        setSelectedPlanIds(new Set());
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("병합 실패: " + (err.message || ""));
+    }
+  }, [selectedPlanIds, rightTab, fetchPlans, confirm]);
+
+  // 타임라인 이벤트 드래그 이동
+  const handleEventMove = useCallback(async (eventId: string | number, newStart: string, newEnd: string) => {
+    try {
+      const res = await updatePlan(Number(eventId), {
+        start_date: newStart,
+        end_date: newEnd,
+      } as any);
+      if (res.success) {
+        toast.success("일정이 변경되었습니다");
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("일정 변경 실패: " + (err.message || ""));
+    }
+  }, [fetchPlans]);
+
+  // 타임라인 이벤트 리사이즈
+  const handleEventResize = useCallback(async (eventId: string | number, newStart: string, newEnd: string) => {
+    try {
+      const res = await updatePlan(Number(eventId), {
+        start_date: newStart,
+        end_date: newEnd,
+      } as any);
+      if (res.success) {
+        toast.success("기간이 변경되었습니다");
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("기간 변경 실패: " + (err.message || ""));
+    }
+  }, [fetchPlans]);
+
+  // 불러오기 처리
+  const handleImportOrderItems = useCallback(async () => {
+    if (selectedItemGroups.size === 0) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+    const items = orderItems
+      .filter((item) => selectedItemGroups.has(item.item_code))
+      .map((item) => ({
+        item_code: item.item_code,
+        item_name: item.item_name,
+        required_qty: (importMode !== "new" && recalculateUnstarted)
+          ? Number(item.total_balance_qty || 0) - Number(item.in_progress_qty || 0)
+          : Number(item.required_plan_qty),
+        earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+      }))
+      .filter((item) => item.required_qty > 0);
+
+    setGenerating(true);
+    try {
+      const res = await generateSchedule({
+        items,
+        options: {
+          safety_lead_time: 0,
+          recalculate_unstarted: importMode === "new" ? false : recalculateUnstarted,
+          product_type: "완제품",
+        },
+      });
+      if (res.success) {
+        toast.success("품목을 불러왔습니다");
+        setOrderImportModalOpen(false);
+        fetchPlans();
+        fetchOrderSummary();
+      }
+    } catch (err: any) {
+      toast.error("불러오기 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [selectedItemGroups, orderItems, importMode, recalculateUnstarted, fetchPlans, fetchOrderSummary]);
+
+  const handleImportStockItems = useCallback(async () => {
+    if (selectedStockItems.size === 0) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+    const items = stockItems
+      .filter((item) => selectedStockItems.has(item.item_code))
+      .map((item) => ({
+        item_code: item.item_code,
+        item_name: item.item_name,
+        required_qty: Number(item.recommended_qty),
+        earliest_due_date: new Date().toISOString().split("T")[0],
+      }));
+
+    setGenerating(true);
+    try {
+      const res = await generateSchedule({
+        items,
+        options: {
+          safety_lead_time: 0,
+          recalculate_unstarted: importMode === "new" ? false : true,
+          product_type: "완제품",
+        },
+      });
+      if (res.success) {
+        toast.success("안전재고 부족 품목을 불러왔습니다");
+        setStockImportModalOpen(false);
+        fetchPlans();
+        fetchStockShortage();
+      }
+    } catch (err: any) {
+      toast.error("불러오기 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [selectedStockItems, stockItems, importMode, fetchPlans, fetchStockShortage]);
+
+  // 엑셀 다운로드
+  const handleExcelDownload = useCallback(async () => {
+    const plans = rightTab === "finished" ? finishedPlans : semiPlans;
+    if (plans.length === 0) {
+      toast.error("다운로드할 데이터가 없습니다");
+      return;
+    }
+    const data = plans.map((p) => ({
+      계획번호: p.plan_no || "",
+      품목코드: p.item_code,
+      품목명: p.item_name,
+      제품구분: p.product_type,
+      수량: Number(p.plan_qty),
+      완료수량: Number(p.completed_qty),
+      진행률: `${p.progress_rate || 0}%`,
+      시작일: p.start_date?.split("T")[0] || "",
+      종료일: p.end_date?.split("T")[0] || "",
+      납기일: p.due_date?.split("T")[0] || "",
+      상태: STATUS_LABEL[p.status] || p.status,
+      설비: p.equipment_name || "",
+      비고: p.remarks || "",
+    }));
+    const type = rightTab === "finished" ? "완제품" : "반제품";
+    await exportToExcel(data, `생산계획_${type}.xlsx`, `${type} 생산계획`);
+    toast.success("엑셀 다운로드 완료");
+  }, [rightTab, finishedPlans, semiPlans]);
+
+  // 좌측 테이블 엑셀 다운로드
+  const handleLeftExcelDownload = useCallback(async () => {
+    if (leftTab === "order") {
+      if (orderItems.length === 0) { toast.error("데이터가 없습니다"); return; }
+      const data = orderItems.map((i) => ({
+        품목코드: i.item_code,
+        품목명: i.item_name,
+        총수주량: Number(i.total_order_qty),
+        출고량: Number(i.total_ship_qty),
+        잔량: Number(i.total_balance_qty),
+        현재고: Number(i.current_stock),
+        안전재고: Number(i.safety_stock),
+        기생산계획량: Number(i.existing_plan_qty),
+        생산진행: Number(i.in_progress_qty),
+        필요생산계획: Number(i.required_plan_qty),
+        "리드타임(일)": Number(i.lead_time) || 0,
+      }));
+      await exportToExcel(data, "수주데이터.xlsx", "수주데이터");
+    } else {
+      if (stockItems.length === 0) { toast.error("데이터가 없습니다"); return; }
+      const data = stockItems.map((s) => ({
+        품목코드: s.item_code,
+        품목명: s.item_name,
+        현재고: Number(s.current_qty),
+        안전재고: Number(s.safety_qty),
+        부족수량: Number(s.shortage_qty),
+        권장생산량: Number(s.recommended_qty),
+        최종입고일: s.last_in_date || "",
+      }));
+      await exportToExcel(data, "안전재고부족분.xlsx", "안전재고 부족분");
+    }
+    toast.success("엑셀 다운로드 완료");
+  }, [leftTab, orderItems, stockItems]);
+
+  // 숫자 포맷
+  const formatNumber = (num: number | string) => Number(num).toLocaleString();
+
+  // (컬럼 표시는 ts.visibleColumns 순서를 따름)
+
+  return (
+    <div className={cn("flex flex-col gap-3", isFullscreen ? "fixed inset-0 z-50 bg-background p-4" : "h-full p-3")}>
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>생산관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="font-medium text-foreground">생산계획</span>
+      </nav>
+
+      {/* 상단 바 */}
+      <DynamicSearchFilter
+        tableName="sales_order_mng"
+        filterId="c16-plan-management"
+        onFilterChange={handleSearchFilterChange}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" className="text-success border-success/30 hover:bg-success/10" onClick={() => setExcelUploadOpen(true)}>
+              <Upload className="mr-1.5 h-4 w-4" />
+              엑셀업로드
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+              <Download className="mr-1.5 h-4 w-4" />
+              엑셀다운로드
+            </Button>
+            <Button variant="ghost" size="sm" onClick={() => setIsFullscreen((p) => !p)}>
+              {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 데이터 섹션 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg">
+        {/* 왼쪽 패널 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <Tabs value={leftTab} onValueChange={setLeftTab} className="flex h-full flex-col">
+              <div className="shrink-0 border-b bg-muted/30 px-5">
+                <TabsList className="h-11 bg-transparent gap-1">
+                  <TabsTrigger value="order" className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 text-sm">
+                    <ClipboardList className="mr-1.5 h-4 w-4" />
+                    수주데이터
+                  </TabsTrigger>
+                  <TabsTrigger value="stock" className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 text-sm">
+                    <AlertTriangle className="mr-1.5 h-4 w-4" />
+                    안전재고 부족분
+                  </TabsTrigger>
+                </TabsList>
+              </div>
+
+              {/* 수주데이터 탭 */}
+              <TabsContent value="order" className="flex-1 overflow-hidden mt-0 flex flex-col">
+                <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
+                  <span className="text-base font-semibold">수주 목록</span>
+                  <div className="flex items-center gap-2">
+                    <label className="flex items-center gap-1.5 rounded-md border border-primary/20 bg-primary/5 px-3 py-1.5 text-xs cursor-pointer">
+                      <Checkbox
+                        checked={filterUnplannedOrdersOnly}
+                        onCheckedChange={(c) => {
+                          setFilterUnplannedOrdersOnly(!!c);
+                          setTimeout(fetchOrderSummary, 0);
+                        }}
+                        className="h-4 w-4"
+                      />
+                      <span className="font-medium text-foreground">계획에 없는 품목만</span>
+                    </label>
+                    <Button size="sm" variant="outline" className="text-success border-success/30 hover:bg-success/10" onClick={() => setOrderImportModalOpen(true)}>
+                      <Download className="mr-1 h-3.5 w-3.5" />
+                      불러오기
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={handleLeftExcelDownload}>
+                      <Download className="mr-1 h-3.5 w-3.5" />
+                      엑셀
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={fetchOrderSummary} disabled={loadingOrders}>
+                      {loadingOrders ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                      새로고침
+                    </Button>
+                    <Button size="sm" variant="ghost" onClick={() => ts.setOpen(true)}>
+                      <Settings2 className="h-3.5 w-3.5" />
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex-1 overflow-auto p-4">
+                  {loadingOrders ? (
+                    <div className="flex items-center justify-center py-16">
+                      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                    </div>
+                  ) : orderItems.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+                      <ClipboardList className="h-12 w-12 mb-3 opacity-50" />
+                      <p className="text-base font-medium mb-2">수주 데이터가 없습니다</p>
+                    </div>
+                  ) : (
+                    <div className="overflow-x-auto rounded-md border">
+                      {(() => {
+                        // 디테일 행에서 개별 값을 표시하는 컬럼 매핑
+                        const DETAIL_VALUE_MAP: Record<string, string> = {
+                          total_order_qty: "order_qty",
+                          total_ship_qty: "ship_qty",
+                          total_balance_qty: "balance_qty",
+                        };
+
+                        // 그룹 행에서 특수 렌더링이 필요한 컬럼
+                        const renderGroupCell = (col: { key: string }, item: any) => {
+                          if (col.key === "required_plan_qty") {
+                            return (
+                              <TableCell key={col.key} style={ts.thStyle(col.key)} className={cn("text-[13px] text-right font-bold", Number(item.required_plan_qty) > 0 ? "text-destructive" : "text-success")} onClick={() => toggleItemExpand(item.item_code)}>
+                                {formatNumber(item.required_plan_qty)}
+                              </TableCell>
+                            );
+                          }
+                          if (col.key === "lead_time") {
+                            return (
+                              <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
+                                {Number(item.lead_time) > 0 ? `${item.lead_time}일` : "-"}
+                              </TableCell>
+                            );
+                          }
+                          return (
+                            <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
+                              {formatNumber(item[col.key])}
+                            </TableCell>
+                          );
+                        };
+
+                        return (
+                      <Table style={{ tableLayout: "fixed" }}>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px]">
+                              <Checkbox checked={selectedItemGroups.size === orderItems.length && orderItems.length > 0} onCheckedChange={(c) => toggleAllItemGroups(!!c)} className="h-4 w-4" />
+                            </TableHead>
+                            <TableHead className="w-[40px]" />
+                            <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                            <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            {ts.visibleColumns.map((col) => (
+                              <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                                {col.label}
+                              </TableHead>
+                            ))}
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {ts.groupData(orderItems).map((item, rowIdx) => {
+                            if (item._isGroupSummary) {
+                              return (
+                                <TableRow key={`summary-${rowIdx}`} className="bg-muted/60 font-semibold border-t border-primary/20">
+                                  <TableCell />
+                                  <TableCell />
+                                  <TableCell colSpan={2} />
+                                  {ts.visibleColumns.map((col) => {
+                                    const v = (item as any)[col.key];
+                                    return (
+                                    <TableCell key={col.key} style={ts.thStyle(col.key)} className={typeof v === "number" ? "text-right font-mono text-[13px]" : "text-[13px] text-primary"}>
+                                      {typeof v === "number" ? Number(v).toLocaleString() : (v || "")}
+                                    </TableCell>
+                                    );
+                                  })}
+                                </TableRow>
+                              );
+                            }
+                            return (
+                            <React.Fragment key={item.item_code || rowIdx}>
+                              <TableRow className={cn("cursor-pointer border-t-2 border-t-primary/30 bg-primary/5 font-semibold hover:bg-primary/10", selectedItemGroups.has(item.item_code) && "bg-primary/10")}>
+                                <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+                                  <Checkbox checked={selectedItemGroups.has(item.item_code)} onCheckedChange={() => toggleItemGroupSelect(item.item_code)} className="h-4 w-4" />
+                                </TableCell>
+                                <TableCell className="text-center" onClick={() => toggleItemExpand(item.item_code)}>
+                                  <ChevronRight className={cn("h-4 w-4 transition-transform duration-200", expandedItems.has(item.item_code) && "rotate-90")} />
+                                </TableCell>
+                                <TableCell style={{ width: "140px", minWidth: "140px" }} className="text-[13px] text-primary truncate" onClick={() => toggleItemExpand(item.item_code)}>{item.item_code}</TableCell>
+                                <TableCell style={{ width: "140px", minWidth: "140px" }} className="text-[13px] text-primary truncate" onClick={() => toggleItemExpand(item.item_code)}>{item.item_name}</TableCell>
+                                {ts.visibleColumns.map((col) => renderGroupCell(col, item))}
+                              </TableRow>
+                              {expandedItems.has(item.item_code) && item.orders?.map((detail: any) => {
+                                let remainColSpan = 0;
+                                for (const col of ts.visibleColumns) {
+                                  if (!DETAIL_VALUE_MAP[col.key]) remainColSpan++;
+                                }
+                                return (
+                                <TableRow key={detail.id || detail.order_no} className="cursor-pointer hover:bg-muted/50">
+                                  <TableCell />
+                                  <TableCell />
+                                  <TableCell colSpan={2} className="pl-10">
+                                    <div className="flex items-center gap-2 text-xs">
+                                      <span className="text-muted-foreground">수주번호:</span>
+                                      <span className="font-medium">{detail.order_no}</span>
+                                      <span className="text-muted-foreground">거래처:</span>
+                                      <span>{detail.customer_name || "-"}</span>
+                                      <Badge variant="secondary" className="text-[10px] px-2 py-0">
+                                        {detail.status || "일반"}
+                                      </Badge>
+                                    </div>
+                                  </TableCell>
+                                  {ts.visibleColumns.map((col) => {
+                                    const detailKey = DETAIL_VALUE_MAP[col.key];
+                                    if (detailKey) {
+                                      return <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right">{formatNumber(detail[detailKey])}</TableCell>;
+                                    }
+                                    return null;
+                                  })}
+                                  {remainColSpan > 0 && (
+                                    <TableCell colSpan={remainColSpan} className="text-[13px] text-muted-foreground">
+                                      납기일: {detail.due_date || "-"}
+                                    </TableCell>
+                                  )}
+                                </TableRow>
+                                );
+                              })}
+                            </React.Fragment>
+                            );
+                          })}
+                        </TableBody>
+                      </Table>
+                        );
+                      })()}
+                    </div>
+                  )}
+                </div>
+              </TabsContent>
+
+              {/* 안전재고 부족분 탭 */}
+              <TabsContent value="stock" className="flex-1 overflow-hidden mt-0 flex flex-col">
+                <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
+                  <span className="text-base font-semibold">안전재고 부족 품목</span>
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" variant="outline" className="text-success border-success/30 hover:bg-success/10" onClick={() => setStockImportModalOpen(true)}>
+                      <Download className="mr-1 h-3.5 w-3.5" />
+                      불러오기
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={handleLeftExcelDownload}>
+                      <Download className="mr-1 h-3.5 w-3.5" />
+                      엑셀
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={fetchStockShortage} disabled={loadingStock}>
+                      {loadingStock ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                      새로고침
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex-1 overflow-auto p-4">
+                  {loadingStock ? (
+                    <div className="flex items-center justify-center py-16">
+                      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                    </div>
+                  ) : stockItems.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+                      <AlertTriangle className="h-12 w-12 mb-3 opacity-50" />
+                      <p className="text-base font-medium mb-2">안전재고 부족 품목이 없습니다</p>
+                    </div>
+                  ) : (
+                    <div className="overflow-x-auto rounded-md border">
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px]">
+                              <Checkbox checked={selectedStockItems.size === stockItems.length && stockItems.length > 0} onCheckedChange={(c) => toggleAllStockItems(!!c)} className="h-4 w-4" />
+                            </TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">현재고</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">안전재고</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부족수량</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">권장생산량</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최종입고일</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {stockItems.map((stock) => (
+                            <TableRow key={stock.item_code} className="cursor-pointer hover:bg-muted/50">
+                              <TableCell>
+                                <Checkbox checked={selectedStockItems.has(stock.item_code)} onCheckedChange={() => toggleStockItem(stock.item_code)} className="h-4 w-4" />
+                              </TableCell>
+                              <TableCell className="text-[13px]">{stock.item_code}</TableCell>
+                              <TableCell className="text-[13px]">{stock.item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right">{formatNumber(stock.current_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right">{formatNumber(stock.safety_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold text-destructive">{formatNumber(stock.shortage_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold text-success">{formatNumber(stock.recommended_qty)}</TableCell>
+                              <TableCell className="text-[13px]">{stock.last_in_date || "-"}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  )}
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 오른쪽 패널 — 타임라인 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <Tabs value={rightTab} onValueChange={setRightTab} className="flex h-full flex-col">
+              <div className="shrink-0 border-b bg-muted/30 px-5">
+                <TabsList className="h-11 bg-transparent gap-1">
+                  <TabsTrigger value="finished" className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 text-sm">
+                    <Package className="mr-1.5 h-4 w-4" />
+                    완제품 생산계획
+                  </TabsTrigger>
+                  <TabsTrigger value="semi" className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 text-sm">
+                    <Wrench className="mr-1.5 h-4 w-4" />
+                    반제품 생산계획
+                  </TabsTrigger>
+                </TabsList>
+              </div>
+
+              {/* 완제품 생산계획 */}
+              <TabsContent value="finished" className="flex-1 overflow-hidden mt-0 flex flex-col">
+                <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
+                  <span className="text-base font-semibold flex items-center gap-1.5">
+                    <Calendar className="h-4 w-4" />
+                    완제품 생산 타임라인
+                    <Badge variant="outline" className="ml-2">{finishedPlans.length}건</Badge>
+                  </span>
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" variant="outline" onClick={fetchPlans} disabled={loadingPlans}>
+                      {loadingPlans ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                      새로고침
+                    </Button>
+                    {selectedPlanIds.size >= 2 && (
+                      <Button size="sm" variant="outline" onClick={handleMergeSchedules}>
+                        <Merge className="mr-1 h-3.5 w-3.5" />
+                        병합 ({selectedPlanIds.size})
+                      </Button>
+                    )}
+                    <Button size="sm" onClick={handleGenerateSchedule} disabled={generating || selectedItemGroups.size === 0}>
+                      {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Zap className="mr-1 h-3.5 w-3.5" />}
+                      자동 스케줄 생성
+                    </Button>
+                    <Button size="sm" variant="ghost" className="text-destructive" onClick={handleClearTimeline}>
+                      <Trash2 className="mr-1 h-3.5 w-3.5" />
+                      초기화
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex-1 overflow-auto p-4">
+                  {/* 옵션 */}
+                  <div className="rounded-lg border bg-muted/30 p-3 mb-4">
+                    <div className="flex items-center gap-4 flex-wrap">
+                      <div className="flex items-center gap-1.5">
+                        <Checkbox checked={recalculateUnstarted} onCheckedChange={(c) => setRecalculateUnstarted(!!c)} className="h-4 w-4" />
+                        <Label className="text-xs cursor-pointer">미진행 계획 재계산</Label>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 타임라인 */}
+                  <TimelineScheduler
+                    resources={finishedResources}
+                    events={finishedEvents}
+                    zoomLevel={finishedZoom}
+                    onZoomChange={setFinishedZoom}
+                    statusColors={STATUS_COLORS}
+                    showProgress
+                    showMilestones
+                    showTodayLine
+                    showLegend
+                    conflictDetection
+                    loading={loadingPlans}
+                    emptyMessage="생산 스케줄이 없습니다"
+                    emptyIcon={<Package className="h-12 w-12 mb-3 opacity-50" />}
+                    onEventClick={openScheduleDetail}
+                    onEventMove={handleEventMove}
+                    onEventResize={handleEventResize}
+                  />
+                </div>
+              </TabsContent>
+
+              {/* 반제품 생산계획 */}
+              <TabsContent value="semi" className="flex-1 overflow-hidden mt-0 flex flex-col">
+                <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
+                  <span className="text-base font-semibold flex items-center gap-1.5">
+                    <Wrench className="h-4 w-4" />
+                    반제품 생산 타임라인
+                    <Badge variant="outline" className="ml-2">{semiPlans.length}건</Badge>
+                  </span>
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" variant="outline" onClick={fetchPlans} disabled={loadingPlans}>
+                      {loadingPlans ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                      새로고침
+                    </Button>
+                    <Button size="sm" onClick={handleGenerateSemiSchedule} disabled={generating}>
+                      {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Zap className="mr-1 h-3.5 w-3.5" />}
+                      반제품 계획 자동 생성
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex-1 overflow-auto p-4">
+                  <div className="flex gap-3 mb-4">
+                    <div className="flex-1 rounded-lg border border-primary/20 bg-primary/5 p-4">
+                      <p className="font-semibold text-foreground text-sm mb-3">반제품 계획 생성 옵션</p>
+                      <div className="flex flex-col gap-2">
+                        <label className="flex items-center gap-1.5 cursor-pointer text-xs">
+                          <Checkbox checked={semiConsiderStock} onCheckedChange={(c) => setSemiConsiderStock(!!c)} className="h-4 w-4" />
+                          <span className="font-medium">현재고 및 안전재고 감안</span>
+                        </label>
+                        <label className="flex items-center gap-1.5 cursor-pointer text-xs">
+                          <Checkbox checked={semiRecalculate} onCheckedChange={(c) => setSemiRecalculate(!!c)} className="h-4 w-4" />
+                          <span className="font-medium">진행중인 계획 유지하고 재계산</span>
+                        </label>
+                        <label className="flex items-center gap-1.5 cursor-pointer text-xs">
+                          <Checkbox checked={semiExcludeUsed} onCheckedChange={(c) => setSemiExcludeUsed(!!c)} className="h-4 w-4" />
+                          <span className="font-medium">투입 완료된 반제품 제외</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex-1 rounded-lg border border-warning/20 bg-warning/5 p-4">
+                      <p className="font-semibold text-foreground text-sm mb-2">반제품 계획 안내</p>
+                      <ul className="text-xs text-foreground space-y-1 leading-relaxed">
+                        <li>완제품 생산계획 기준으로 필요한 반제품 계획 자동 생성</li>
+                        <li>모품목 생산 시작일 고려하여 납기일 설정</li>
+                        <li>BOM(자재명세서) 정보 기반 필요 수량 계산</li>
+                      </ul>
+                    </div>
+                  </div>
+
+                  {/* 반제품 타임라인 */}
+                  <TimelineScheduler
+                    resources={semiResources}
+                    events={semiEvents}
+                    zoomLevel={semiZoom}
+                    onZoomChange={setSemiZoom}
+                    statusColors={STATUS_COLORS}
+                    showProgress
+                    showTodayLine
+                    showLegend
+                    conflictDetection
+                    loading={loadingPlans}
+                    emptyMessage="반제품 생산 스케줄이 없습니다"
+                    emptyIcon={<Wrench className="h-12 w-12 mb-3 opacity-50" />}
+                    onEventClick={openScheduleDetail}
+                    onEventMove={handleEventMove}
+                    onEventResize={handleEventResize}
+                  />
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 모달들 ========== */}
+
+      {/* 스케줄 상세/편집 모달 */}
+      <Dialog open={scheduleModalOpen} onOpenChange={setScheduleModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[650px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg flex items-center gap-2">
+              <ClipboardList className="h-5 w-5" />
+              생산 스케줄 상세
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              생산 스케줄의 상세 정보를 확인하고 수정할 수 있습니다
+            </DialogDescription>
+          </DialogHeader>
+
+          {selectedPlan && (
+            <div className="space-y-4">
+              <div>
+                <p className="text-sm font-semibold mb-3 pb-2 border-b">기본 정보</p>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs">품목코드</Label>
+                    <Input value={selectedPlan.item_code} readOnly className="h-9 text-xs bg-muted/50" />
+                  </div>
+                  <div>
+                    <Label className="text-xs">품목명</Label>
+                    <Input value={selectedPlan.item_name || ""} readOnly className="h-9 text-xs bg-muted/50" />
+                  </div>
+                  <div>
+                    <Label className="text-xs">계획번호</Label>
+                    <Input value={selectedPlan.plan_no || ""} readOnly className="h-9 text-xs bg-muted/50" />
+                  </div>
+                  <div>
+                    <Label className="text-xs">상태</Label>
+                    <Badge variant="secondary" className="mt-1">
+                      {STATUS_LABEL[selectedPlan.status] || selectedPlan.status}
+                    </Badge>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <p className="text-sm font-semibold mb-3 pb-2 border-b">생산 정보</p>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs">총 생산수량</Label>
+                    <Input type="number" value={modalQuantity} onChange={(e) => setModalQuantity(Number(e.target.value))} className="h-9 text-xs" min={0} />
+                  </div>
+                  <div>
+                    <Label className="text-xs">설비</Label>
+                    <Select value={modalEquipmentId} onValueChange={setModalEquipmentId}>
+                      <SelectTrigger className="h-9 text-xs">
+                        <SelectValue placeholder="설비 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">미지정</SelectItem>
+                        {equipmentList.map((eq) => (
+                          <SelectItem key={eq.id} value={eq.equipment_code || eq.id}>
+                            {eq.equipment_name} ({eq.equipment_code})
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <div className="mt-3 rounded-lg border border-success/20 bg-success/5 p-3">
+                  <p className="text-xs font-semibold text-foreground mb-2">계획 기간 설정</p>
+                  <div className="grid grid-cols-3 gap-3">
+                    <div>
+                      <Label className="text-[11px] text-muted-foreground">시작일</Label>
+                      <Input type="date" value={modalStartDate} onChange={(e) => setModalStartDate(e.target.value)} className="h-9 text-xs" />
+                    </div>
+                    <div>
+                      <Label className="text-[11px] text-muted-foreground">종료일</Label>
+                      <Input type="date" value={modalEndDate} onChange={(e) => setModalEndDate(e.target.value)} className="h-9 text-xs" />
+                    </div>
+                    <div>
+                      <Label className="text-[11px] text-muted-foreground">생산 기간</Label>
+                      <div className="flex h-9 items-center justify-center rounded-md border bg-muted/50 text-xs font-semibold text-primary">
+                        {modalStartDate && modalEndDate
+                          ? `${Math.ceil((new Date(modalEndDate).getTime() - new Date(modalStartDate).getTime()) / (1000 * 60 * 60 * 24) + 1)}일`
+                          : "-"}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="rounded-lg border border-warning/20 bg-warning/5 p-4">
+                <div className="flex items-center justify-between mb-2">
+                  <p className="text-sm font-semibold flex items-center gap-1.5">
+                    <Scissors className="h-4 w-4" />
+                    계획 분할
+                  </p>
+                  <Button
+                    size="sm"
+                    variant="warning"
+                    className="h-7 text-xs"
+                    onClick={() => {
+                      const qty = Math.floor(modalQuantity / 2);
+                      if (qty > 0) handleSplitSchedule(qty);
+                    }}
+                  >
+                    2분할
+                  </Button>
+                </div>
+                <p className="text-xs text-foreground">하나의 생산계획을 여러 개로 분할합니다.</p>
+              </div>
+
+              <div>
+                <p className="text-sm font-semibold mb-3 pb-2 border-b">추가 정보</p>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs">담당자</Label>
+                    <Input value={modalManager} onChange={(e) => setModalManager(e.target.value)} className="h-9 text-xs" placeholder="담당자명" />
+                  </div>
+                  <div>
+                    <Label className="text-xs">작업지시번호</Label>
+                    <Input value={modalWorkOrderNo} onChange={(e) => setModalWorkOrderNo(e.target.value)} className="h-9 text-xs" placeholder="자동생성" />
+                  </div>
+                  <div className="col-span-2">
+                    <Label className="text-xs">비고</Label>
+                    <Input value={modalRemarks} onChange={(e) => setModalRemarks(e.target.value)} className="h-9 text-xs" placeholder="비고사항 입력" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={handleDeletePlan} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10">
+              <Trash2 className="mr-1 h-3.5 w-3.5" />
+              삭제
+            </Button>
+            <Button variant="outline" onClick={() => setScheduleModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              취소
+            </Button>
+            <Button onClick={handleSavePlan} disabled={saving} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {saving ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Save className="mr-1 h-3.5 w-3.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 수주 불러오기 모달 */}
+      <Dialog open={orderImportModalOpen} onOpenChange={setOrderImportModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">신규 수주 품목 불러오기</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">선택한 수주 품목을 생산계획에 추가합니다</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
+                <ClipboardList className="h-4 w-4" />
+                선택된 품목
+              </p>
+              <div className="space-y-2 max-h-[200px] overflow-y-auto">
+                {selectedItemGroups.size > 0
+                  ? Array.from(selectedItemGroups).map((code) => {
+                      const item = orderItems.find((i) => i.item_code === code);
+                      if (!item) return null;
+                      const hasExistingPlan = Number(item.existing_plan_qty) > 0;
+                      return (
+                        <div key={code} className="rounded-lg border bg-muted/30 p-3">
+                          <div className="flex items-center justify-between mb-1">
+                            <span className="text-sm font-semibold">{item.item_code} - {item.item_name}</span>
+                            {hasExistingPlan && <Badge variant="secondary" className="text-[10px]">가계획완료</Badge>}
+                          </div>
+                          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                            <span>수주: {item.order_count}건</span>
+                            <span className="text-border">|</span>
+                            <span>잔량: {formatNumber(item.total_balance_qty)} EA</span>
+                            <span className="text-border">|</span>
+                            <span>재고: {formatNumber(item.current_stock)} EA</span>
+                            <span className="text-border">|</span>
+                            <span>필요수량: <span className={Number(item.required_plan_qty) > 0 ? "text-destructive font-semibold" : ""}>{formatNumber(item.required_plan_qty)} EA</span></span>
+                          </div>
+                        </div>
+                      );
+                    })
+                  : <p className="text-xs text-muted-foreground p-3 text-center">선택된 품목이 없습니다.</p>}
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-warning/20 bg-warning/5 p-3">
+              <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
+                <AlertTriangle className="h-4 w-4 text-warning" />
+                주의사항
+              </p>
+              <ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside leading-relaxed">
+                <li>기존 계획에 추가 시 새로운 수주의 납기를 기준으로 종료일이 조정됩니다.</li>
+                <li>기존 계획이 없으면 새 계획이 자동 생성됩니다.</li>
+                <li>수주정보(수주번호)가 있으면 관련 정보가 연결됩니다.</li>
+                <li>수량이 0이거나 음수인 품목은 건너뜁니다.</li>
+              </ul>
+            </div>
+
+            <div>
+              <p className="font-semibold text-sm mb-2">계획 추가 방식을 선택하세요</p>
+              <div className="grid gap-3">
+                <label className={cn("flex items-center rounded-lg border-2 p-4 cursor-pointer transition-all", importMode === "add" ? "border-primary bg-primary/5" : "border-border hover:border-primary/50")} onClick={() => setImportMode("add")}>
+                  <input type="radio" name="importMode" value="add" checked={importMode === "add"} onChange={() => setImportMode("add")} className="mr-3 h-4 w-4" />
+                  <div>
+                    <p className="font-semibold text-sm">+ 기존 계획에 추가</p>
+                    <p className="text-xs text-muted-foreground">같은 품목의 기존 계획에 수주 건만을 추가하거나 수량을 합산합니다.</p>
+                  </div>
+                </label>
+                <label className={cn("flex items-center rounded-lg border-2 p-4 cursor-pointer transition-all", importMode === "new" ? "border-primary bg-primary/5" : "border-border hover:border-primary/50")} onClick={() => setImportMode("new")}>
+                  <input type="radio" name="importMode" value="new" checked={importMode === "new"} onChange={() => setImportMode("new")} className="mr-3 h-4 w-4" />
+                  <div>
+                    <p className="font-semibold text-sm">별도 계획으로 생성</p>
+                    <p className="text-xs text-muted-foreground">이전 수량/일정 무시하고 생산계획을 생성합니다.</p>
+                  </div>
+                </label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setOrderImportModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
+            <Button onClick={handleImportOrderItems} disabled={generating || selectedItemGroups.size === 0} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Download className="mr-1 h-3.5 w-3.5" />}
+              불러오기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 안전재고 불러오기 모달 */}
+      <Dialog open={stockImportModalOpen} onOpenChange={setStockImportModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">안전재고 부족 품목 불러오기</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">선택한 안전재고 부족 품목을 생산계획에 추가합니다</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
+                <AlertTriangle className="h-4 w-4" />
+                선택된 품목
+              </p>
+              <div className="space-y-2 max-h-[200px] overflow-y-auto">
+                {selectedStockItems.size > 0
+                  ? Array.from(selectedStockItems).map((code) => {
+                      const stock = stockItems.find((s) => s.item_code === code);
+                      if (!stock) return null;
+                      return (
+                        <div key={code} className="rounded-lg border bg-muted/30 p-3">
+                          <div className="flex items-center justify-between mb-1">
+                            <span className="text-sm font-semibold">{stock.item_code} - {stock.item_name}</span>
+                            <Badge variant="destructive" className="text-[10px]">재고부족</Badge>
+                          </div>
+                          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                            <span>현재고: {formatNumber(stock.current_qty)} EA</span>
+                            <span className="text-border">|</span>
+                            <span>안전재고: {formatNumber(stock.safety_qty)} EA</span>
+                            <span className="text-border">|</span>
+                            <span>권장생산: <span className="text-destructive font-semibold">{formatNumber(stock.recommended_qty)} EA</span></span>
+                          </div>
+                        </div>
+                      );
+                    })
+                  : <p className="text-xs text-muted-foreground p-3 text-center">선택된 품목이 없습니다.</p>}
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-warning/20 bg-warning/5 p-3">
+              <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
+                <AlertTriangle className="h-4 w-4 text-warning" />
+                주의사항
+              </p>
+              <ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside leading-relaxed">
+                <li>안전재고 기준으로 부족분만큼 생산계획을 생성합니다.</li>
+                <li>현재 재고와 안전재고 차이를 기반으로 수량이 산정됩니다.</li>
+                <li>기존 계획이 있는 품목은 추가 방식에 따라 합산 또는 별도 생성됩니다.</li>
+              </ul>
+            </div>
+
+            <div>
+              <p className="font-semibold text-sm mb-2">계획 추가 방식을 선택하세요</p>
+              <div className="grid gap-3">
+                <label className={cn("flex items-center rounded-lg border-2 p-4 cursor-pointer transition-all", importMode === "add" ? "border-primary bg-primary/5" : "border-border hover:border-primary/50")} onClick={() => setImportMode("add")}>
+                  <input type="radio" name="stockImportMode" value="add" checked={importMode === "add"} onChange={() => setImportMode("add")} className="mr-3 h-4 w-4" />
+                  <div>
+                    <p className="font-semibold text-sm">+ 기존 계획에 추가</p>
+                    <p className="text-xs text-muted-foreground">같은 품목의 기존 계획에 수량을 합산합니다.</p>
+                  </div>
+                </label>
+                <label className={cn("flex items-center rounded-lg border-2 p-4 cursor-pointer transition-all", importMode === "new" ? "border-primary bg-primary/5" : "border-border hover:border-primary/50")} onClick={() => setImportMode("new")}>
+                  <input type="radio" name="stockImportMode" value="new" checked={importMode === "new"} onChange={() => setImportMode("new")} className="mr-3 h-4 w-4" />
+                  <div>
+                    <p className="font-semibold text-sm">별도 계획으로 생성</p>
+                    <p className="text-xs text-muted-foreground">이전 수량/일정 무시하고 생산계획을 생성합니다.</p>
+                  </div>
+                </label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setStockImportModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
+            <Button onClick={handleImportStockItems} disabled={generating || selectedStockItems.size === 0} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Download className="mr-1 h-3.5 w-3.5" />}
+              불러오기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 변경사항 확인(미리보기) 모달 */}
+      <Dialog open={changeConfirmModalOpen} onOpenChange={setChangeConfirmModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[800px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">생산계획 변경사항 확인</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">아래 변경사항을 검토하신 후 확인 버튼을 클릭하면 생산계획이 업데이트됩니다</DialogDescription>
+          </DialogHeader>
+
+          {previewData && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-4 gap-3">
+                <div className="rounded-lg border bg-primary/10 p-3 text-center">
+                  <p className="text-2xl font-bold text-foreground">{previewData.summary?.total ?? 0}</p>
+                  <p className="text-xs text-muted-foreground mt-1">총 계획</p>
+                </div>
+                <div className="rounded-lg border bg-success/10 p-3 text-center">
+                  <p className="text-2xl font-bold text-foreground">{previewData.summary?.new_count ?? 0}</p>
+                  <p className="text-xs text-muted-foreground mt-1">신규 생성</p>
+                </div>
+                <div className="rounded-lg border bg-warning/10 p-3 text-center">
+                  <p className="text-2xl font-bold text-foreground">{previewData.summary?.kept_count ?? 0}</p>
+                  <p className="text-xs text-muted-foreground mt-1">유지됨</p>
+                </div>
+                <div className="rounded-lg border bg-destructive/10 p-3 text-center">
+                  <p className="text-2xl font-bold text-foreground">{previewData.summary?.deleted_count ?? 0}</p>
+                  <p className="text-xs text-muted-foreground mt-1">삭제됨</p>
+                </div>
+              </div>
+
+              {(previewData.schedules?.length || 0) > 0 && (
+                <div>
+                  <p className="text-sm font-semibold mb-2 text-success flex items-center gap-1.5">
+                    <Zap className="h-4 w-4" />
+                    신규 생성 ({previewData.schedules?.length || 0}건)
+                  </p>
+                  <div className="rounded-md border border-success/20 overflow-x-auto">
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">시작일</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">종료일</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {(previewData.schedules || []).map((s: any, idx: number) => (
+                          <TableRow key={`new-${idx}`}>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty || s.required_qty)}</TableCell>
+                            <TableCell className="text-[13px]">{s.start_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.end_date?.split("T")[0]}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+              )}
+
+              {(previewData.deletedSchedules?.length || 0) > 0 && (
+                <div>
+                  <p className="text-sm font-semibold mb-2 text-destructive flex items-center gap-1.5">
+                    <Trash2 className="h-4 w-4" />
+                    삭제 예정 ({previewData.deletedSchedules?.length || 0}건)
+                  </p>
+                  <div className="rounded-md border border-destructive/20 overflow-x-auto">
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">시작일</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">종료일</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {(previewData.deletedSchedules || []).map((s: any, idx: number) => (
+                          <TableRow key={`del-${idx}`} className="text-destructive/80">
+                            <TableCell className="text-[13px]">{s.plan_no || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty)}</TableCell>
+                            <TableCell className="text-[13px]">{s.start_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.end_date?.split("T")[0]}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+              )}
+
+              {(previewData.keptSchedules?.length || 0) > 0 && (
+                <div>
+                  <p className="text-sm font-semibold mb-2 text-warning flex items-center gap-1.5">
+                    <Package className="h-4 w-4" />
+                    유지됨 ({previewData.keptSchedules?.length || 0}건)
+                  </p>
+                  <div className="rounded-md border border-warning/20 overflow-x-auto">
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {(previewData.keptSchedules || []).map((s: any, idx: number) => (
+                          <TableRow key={`kept-${idx}`}>
+                            <TableCell className="text-[13px]">{s.plan_no || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty)}</TableCell>
+                            <TableCell className="text-[13px]">
+                              <Badge variant="outline" className="text-[10px]">{STATUS_LABEL[s.status] || s.status}</Badge>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setChangeConfirmModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
+            <Button onClick={handleApplySchedule} disabled={generating} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : null}
+              확인 및 적용
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 모달 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName="production_plan_mng"
+        onSuccess={() => {
+          fetchPlans();
+          fetchOrderSummary();
+        }}
+      />
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* ConfirmDialog 렌더 */}
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/production/process-info/ItemRoutingTab.tsx b/frontend/app/(main)/COMPANY_30/production/process-info/ItemRoutingTab.tsx
new file mode 100644
index 00000000..a5b136c2
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/production/process-info/ItemRoutingTab.tsx
@@ -0,0 +1,994 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { GitBranch, Loader2, PackagePlus, Pencil, Plus, Save, Search, Star, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  createRoutingVersion,
+  getProcessList,
+  getRegisteredItems,
+  getRoutingDetails,
+  getRoutingVersions,
+  registerItemsBatch,
+  saveRoutingDetails,
+  searchAllItems,
+  unregisterItem,
+  type ItemForRouting,
+  type ProcessMaster,
+  type RegisteredItem,
+  type RoutingDetail,
+  type RoutingVersion,
+} from "@/lib/api/processInfo";
+import { cn } from "@/lib/utils";
+
+function normalizeDefaultFlag(v: RoutingVersion): boolean {
+  const raw = v.is_default as unknown;
+  if (typeof raw === "boolean") return raw;
+  if (raw === "t" || raw === true || raw === "Y" || raw === "true") return true;
+  return false;
+}
+
+function sortDetailsBySeq(rows: RoutingDetail[]): RoutingDetail[] {
+  return [...rows].sort((a, b) => {
+    const na = parseInt(String(a.seq_no), 10) || 0;
+    const nb = parseInt(String(b.seq_no), 10) || 0;
+    return na - nb;
+  });
+}
+
+export function ItemRoutingTab() {
+  const [searchInput, setSearchInput] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [items, setItems] = useState<RegisteredItem[]>([]);
+  const [itemsLoading, setItemsLoading] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<RegisteredItem | null>(null);
+
+  const [versions, setVersions] = useState<RoutingVersion[]>([]);
+  const [versionsLoading, setVersionsLoading] = useState(false);
+  const [selectedVersionId, setSelectedVersionId] = useState<string | null>(null);
+
+  const [details, setDetails] = useState<RoutingDetail[]>([]);
+  const [detailsLoading, setDetailsLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const [selectedDetailIds, setSelectedDetailIds] = useState<Set<string>>(new Set());
+
+  const [processes, setProcesses] = useState<ProcessMaster[]>([]);
+  const [processesLoading, setProcessesLoading] = useState(false);
+
+  const [versionDialogOpen, setVersionDialogOpen] = useState(false);
+  const [versionName, setVersionName] = useState("");
+  const [versionDescription, setVersionDescription] = useState("");
+  const [versionIsDefault, setVersionIsDefault] = useState(false);
+  const [versionSubmitting, setVersionSubmitting] = useState(false);
+
+  const [detailDialogOpen, setDetailDialogOpen] = useState(false);
+  const [detailDialogMode, setDetailDialogMode] = useState<"add" | "edit">("add");
+  const [editingDetailId, setEditingDetailId] = useState<string | null>(null);
+  const [formProcessCode, setFormProcessCode] = useState("");
+  const [formSeqNo, setFormSeqNo] = useState("");
+  const [formRequired, setFormRequired] = useState("Y");
+  const [formFixedOrder, setFormFixedOrder] = useState("Y");
+  const [formWorkType, setFormWorkType] = useState("내부");
+  const [formStandardTime, setFormStandardTime] = useState("");
+  const [formOutsource, setFormOutsource] = useState("");
+  const [detailSubmitting, setDetailSubmitting] = useState(false);
+
+  const [registerDialogOpen, setRegisterDialogOpen] = useState(false);
+  const [registerSearch, setRegisterSearch] = useState("");
+  const [registerSearchDebounced, setRegisterSearchDebounced] = useState("");
+  const [registerItems, setRegisterItems] = useState<ItemForRouting[]>([]);
+  const [registerLoading, setRegisterLoading] = useState(false);
+  const [registerSelectedIds, setRegisterSelectedIds] = useState<Set<string>>(new Set());
+  const [registerSubmitting, setRegisterSubmitting] = useState(false);
+
+  useEffect(() => {
+    const t = window.setTimeout(() => setDebouncedSearch(searchInput.trim()), 300);
+    return () => window.clearTimeout(t);
+  }, [searchInput]);
+
+  useEffect(() => {
+    const t = window.setTimeout(() => setRegisterSearchDebounced(registerSearch.trim()), 300);
+    return () => window.clearTimeout(t);
+  }, [registerSearch]);
+
+  const loadItems = useCallback(async (search: string) => {
+    setItemsLoading(true);
+    try {
+      const res = await getRegisteredItems(search || undefined);
+      if (res.success && res.data) {
+        setItems(res.data);
+      } else {
+        toast.error(res.message || "품목 목록을 불러오지 못했어요");
+        setItems([]);
+      }
+    } finally {
+      setItemsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadItems(debouncedSearch);
+  }, [debouncedSearch, loadItems]);
+
+  const loadProcesses = useCallback(async () => {
+    setProcessesLoading(true);
+    try {
+      const procRes = await getProcessList({ useYn: "Y" });
+      if (!procRes.success || !procRes.data) {
+        toast.error(procRes.message || "공정 목록을 불러오지 못했어요");
+        setProcesses([]);
+        return;
+      }
+      setProcesses(procRes.data);
+    } finally {
+      setProcessesLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadProcesses();
+  }, [loadProcesses]);
+
+  const loadRegisterItems = useCallback(async (search: string) => {
+    setRegisterLoading(true);
+    try {
+      const res = await searchAllItems(search || undefined);
+      if (res.success && res.data) {
+        setRegisterItems(res.data);
+      } else {
+        setRegisterItems([]);
+      }
+    } finally {
+      setRegisterLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!registerDialogOpen) return;
+    void loadRegisterItems(registerSearchDebounced);
+  }, [registerSearchDebounced, registerDialogOpen, loadRegisterItems]);
+
+  const registeredItemCodes = useMemo(() => new Set(items.map((i) => i.item_code)), [items]);
+
+  const handleRegisterItems = async () => {
+    if (registerSelectedIds.size === 0) {
+      toast.error("등록할 품목을 선택해주세요");
+      return;
+    }
+    setRegisterSubmitting(true);
+    try {
+      const selected = registerItems.filter((ri) => registerSelectedIds.has(ri.id));
+      const batchItems = selected.map((item) => ({
+        itemId: item.id,
+        itemCode: item.item_number,
+      }));
+      const res = await registerItemsBatch(batchItems);
+      if (res.success) {
+        toast.success(`${batchItems.length}건 품목이 등록되었어요`);
+        setRegisterDialogOpen(false);
+        setRegisterSearch("");
+        setRegisterSelectedIds(new Set());
+        void loadItems(debouncedSearch);
+      } else {
+        toast.error(res.message || "품목 등록에 실패했어요");
+      }
+    } finally {
+      setRegisterSubmitting(false);
+    }
+  };
+
+  const loadVersions = useCallback(async (item: RegisteredItem, preferVersionId?: string) => {
+    setVersionsLoading(true);
+    setVersions([]);
+    setSelectedVersionId(null);
+    setDetails([]);
+    setSelectedDetailIds(new Set());
+    try {
+      const res = await getRoutingVersions(item.item_code);
+      if (!res.success || !res.data) {
+        toast.error(res.message || "라우팅 버전을 불러오지 못했어요");
+        return;
+      }
+      const list = res.data.map((v) => ({ ...v, is_default: normalizeDefaultFlag(v) }));
+      setVersions(list);
+      const preferred = preferVersionId ? list.find((v) => v.id === preferVersionId) : undefined;
+      const def = list.find((v) => v.is_default);
+      const pick = preferred ?? def ?? list[0];
+      if (pick) setSelectedVersionId(pick.id);
+    } finally {
+      setVersionsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!selectedItem) return;
+    void loadVersions(selectedItem);
+  }, [selectedItem, loadVersions]);
+
+  const loadDetails = useCallback(async (versionId: string) => {
+    setDetailsLoading(true);
+    setSelectedDetailIds(new Set());
+    try {
+      const res = await getRoutingDetails(versionId);
+      if (res.success && res.data) {
+        setDetails(sortDetailsBySeq(res.data));
+      } else {
+        toast.error(res.message || "라우팅 공정을 불러오지 못했어요");
+        setDetails([]);
+      }
+    } finally {
+      setDetailsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!selectedVersionId) {
+      setDetails([]);
+      return;
+    }
+    void loadDetails(selectedVersionId);
+  }, [selectedVersionId, loadDetails]);
+
+  const showOutsourceField = formWorkType === "외주" || formWorkType === "선택가능";
+
+  const openAddDetailDialog = () => {
+    if (!selectedVersionId) {
+      toast.error("먼저 라우팅 버전을 선택해주세요");
+      return;
+    }
+    setDetailDialogMode("add");
+    setEditingDetailId(null);
+    setFormProcessCode("");
+    const nextSeq = details.length === 0 ? 1 : Math.max(...details.map((d) => parseInt(String(d.seq_no), 10) || 0)) + 1;
+    setFormSeqNo(String(nextSeq));
+    setFormRequired("Y");
+    setFormFixedOrder("Y");
+    setFormWorkType("내부");
+    setFormStandardTime("");
+    setFormOutsource("");
+    setDetailDialogOpen(true);
+  };
+
+  const openEditDetailDialog = () => {
+    if (!selectedVersionId) {
+      toast.error("먼저 라우팅 버전을 선택해주세요");
+      return;
+    }
+    if (selectedDetailIds.size !== 1) {
+      toast.error("수정할 공정 한 건만 선택해주세요");
+      return;
+    }
+    const id = [...selectedDetailIds][0];
+    const row = details.find((d) => d.id === id);
+    if (!row) {
+      toast.error("선택한 공정을 찾을 수 없어요");
+      return;
+    }
+    setDetailDialogMode("edit");
+    setEditingDetailId(row.id);
+    setFormProcessCode(row.process_code);
+    setFormSeqNo(String(row.seq_no));
+    setFormRequired(row.is_required === "N" ? "N" : "Y");
+    setFormFixedOrder(row.is_fixed_order === "N" ? "N" : "Y");
+    setFormWorkType(row.work_type || "내부");
+    setFormStandardTime(row.standard_time || "");
+    setFormOutsource(row.outsource_supplier || "");
+    setDetailDialogOpen(true);
+  };
+
+  const submitDetailForm = () => {
+    if (!selectedVersionId) return;
+    if (!formProcessCode) {
+      toast.error("공정을 선택해주세요");
+      return;
+    }
+    const seq = parseInt(formSeqNo, 10);
+    if (Number.isNaN(seq) || seq < 1) {
+      toast.error("올바른 순번을 입력해주세요");
+      return;
+    }
+    const st = formStandardTime.trim();
+    if (st !== "" && Number.isNaN(Number(st))) {
+      toast.error("표준작업시간은 숫자로 입력해주세요");
+      return;
+    }
+    const proc = processes.find((p) => p.process_code === formProcessCode);
+    const outsource = showOutsourceField ? formOutsource.trim() : "";
+
+    setDetailSubmitting(true);
+    try {
+      if (detailDialogMode === "add") {
+        const newRow: RoutingDetail = {
+          id: `new-${crypto.randomUUID()}`,
+          routing_version_id: selectedVersionId,
+          seq_no: String(seq),
+          process_code: formProcessCode,
+          process_name: proc?.process_name,
+          is_required: formRequired,
+          is_fixed_order: formFixedOrder,
+          work_type: formWorkType,
+          standard_time: st || "0",
+          outsource_supplier: outsource,
+        };
+        setDetails((prev) => sortDetailsBySeq([...prev, newRow]));
+        toast.success("공정이 추가되었어요. 저장을 눌러 반영해주세요");
+      } else if (editingDetailId) {
+        setDetails((prev) =>
+          sortDetailsBySeq(
+            prev.map((d) =>
+              d.id === editingDetailId
+                ? {
+                    ...d,
+                    seq_no: String(seq),
+                    process_code: formProcessCode,
+                    process_name: proc?.process_name ?? d.process_name,
+                    is_required: formRequired,
+                    is_fixed_order: formFixedOrder,
+                    work_type: formWorkType,
+                    standard_time: st || "0",
+                    outsource_supplier: outsource,
+                  }
+                : d,
+            ),
+          ),
+        );
+        toast.success("공정이 수정되었어요. 저장을 눌러 반영해주세요");
+      }
+      setDetailDialogOpen(false);
+    } finally {
+      setDetailSubmitting(false);
+    }
+  };
+
+  const deleteSelectedDetails = () => {
+    if (selectedDetailIds.size === 0) {
+      toast.error("삭제할 공정을 선택해주세요");
+      return;
+    }
+    setDetails((prev) => prev.filter((d) => !selectedDetailIds.has(d.id)));
+    setSelectedDetailIds(new Set());
+    toast.success("선택한 공정이 제거되었어요. 저장을 눌러 반영해주세요");
+  };
+
+  const persistDetails = async () => {
+    if (!selectedVersionId) {
+      toast.error("저장할 버전이 없어요");
+      return;
+    }
+    const payload = details.map((d) => ({
+      seq_no: String(d.seq_no),
+      process_code: d.process_code,
+      is_required: d.is_required || "Y",
+      is_fixed_order: d.is_fixed_order || "Y",
+      work_type: d.work_type || "내부",
+      standard_time: String(d.standard_time ?? "0"),
+      outsource_supplier: d.outsource_supplier || "",
+    }));
+
+    setSaving(true);
+    try {
+      const res = await saveRoutingDetails(selectedVersionId, payload);
+      if (res.success) {
+        toast.success("저장되었어요");
+        await loadDetails(selectedVersionId);
+      } else {
+        toast.error(res.message || "저장에 실패했어요");
+      }
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const submitNewVersion = async () => {
+    if (!selectedItem) return;
+    const name = versionName.trim();
+    if (!name) {
+      toast.error("버전명을 입력해주세요");
+      return;
+    }
+    setVersionSubmitting(true);
+    try {
+      const res = await createRoutingVersion({
+        item_code: selectedItem.item_code,
+        version_name: name,
+        description: versionDescription.trim() || undefined,
+        is_default: versionIsDefault || undefined,
+      });
+      if (res.success && res.data) {
+        toast.success("버전이 추가되었어요");
+        setVersionDialogOpen(false);
+        setVersionName("");
+        setVersionDescription("");
+        setVersionIsDefault(false);
+        const created = res.data as RoutingVersion;
+        await loadVersions(selectedItem, created?.id);
+      } else {
+        toast.error(res.message || "버전 추가에 실패했어요");
+      }
+    } finally {
+      setVersionSubmitting(false);
+    }
+  };
+
+  const detailsGridData = useMemo(
+    () =>
+      details.map((d) => ({
+        ...d,
+        process_display: d.process_name || d.process_code,
+        outsource_display: d.outsource_supplier || "—",
+      })),
+    [details],
+  );
+
+  return (
+    <div className="flex h-full flex-col">
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+        {/* 좌측: 등록 품목 */}
+        <ResizablePanel defaultSize={30} minSize={18}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <PackagePlus className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">등록 품목</span>
+              <Badge variant="secondary" className="font-mono text-xs">
+                {items.length}건
+              </Badge>
+              <div className="ml-auto">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setRegisterSearch("");
+                    setRegisterSelectedIds(new Set());
+                    setRegisterItems([]);
+                    setRegisterDialogOpen(true);
+                  }}
+                >
+                  <Plus className="mr-1 h-3.5 w-3.5" />
+                  품목 등록
+                </Button>
+              </div>
+            </div>
+
+            <div className="border-b px-3 py-2">
+              <div className="relative">
+                <Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  value={searchInput}
+                  onChange={(e) => setSearchInput(e.target.value)}
+                  placeholder="품목코드 / 품목명 검색"
+                  className="h-8 pl-8 text-xs"
+                  aria-label="품목 검색"
+                />
+              </div>
+            </div>
+
+            <div className="min-h-0 flex-1 overflow-auto p-3">
+              {itemsLoading ? (
+                <div className="flex items-center justify-center gap-2 py-12 text-muted-foreground">
+                  <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                  <span className="text-sm">불러오는 중...</span>
+                </div>
+              ) : items.length === 0 ? (
+                <div className="flex flex-col items-center justify-center gap-3 py-12">
+                  <p className="text-sm text-muted-foreground">등록된 품목이 없어요</p>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      setRegisterSearch("");
+                      setRegisterSelectedIds(new Set());
+                      setRegisterItems([]);
+                      setRegisterDialogOpen(true);
+                    }}
+                  >
+                    <PackagePlus className="mr-1 h-3.5 w-3.5" />
+                    품목 등록하기
+                  </Button>
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {items.map((item) => {
+                    const active = selectedItem?.id === item.id;
+                    return (
+                      <button
+                        key={item.id}
+                        type="button"
+                        onClick={() => setSelectedItem(item)}
+                        className={cn(
+                          "w-full rounded-lg border p-3 text-left transition-colors",
+                          "border-border bg-card hover:bg-muted/30",
+                          active && "border-primary ring-2 ring-ring/30",
+                        )}
+                      >
+                        <p className="text-sm font-medium text-foreground">{item.item_code}</p>
+                        <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">{item.item_name}</p>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 버전 + 라우팅 상세 */}
+        <ResizablePanel defaultSize={70} minSize={35}>
+          <div className="flex h-full flex-col">
+            {!selectedItem ? (
+              <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+                <GitBranch className="h-10 w-10 opacity-40" />
+                <p className="text-sm font-medium text-foreground">좌측에서 품목을 선택해주세요</p>
+                <p className="max-w-xs text-xs">품목을 선택하면 라우팅 버전과 공정을 관리할 수 있어요</p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center gap-3 border-b bg-muted/30 px-4 py-2">
+                  <GitBranch className="h-4 w-4 shrink-0 text-muted-foreground" />
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-semibold">{selectedItem.item_name}</p>
+                    <p className="text-xs text-muted-foreground">품목코드 {selectedItem.item_code}</p>
+                  </div>
+                  <div className="flex shrink-0 gap-2">
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={async () => {
+                        if (!selectedItem.registered_id) return;
+                        const res = await unregisterItem(selectedItem.registered_id);
+                        if (res.success) {
+                          toast.success("품목 등록이 해제되었어요");
+                          setSelectedItem(null);
+                          void loadItems(debouncedSearch);
+                        } else {
+                          toast.error(res.message || "등록 해제에 실패했어요");
+                        }
+                      }}
+                    >
+                      <Trash2 className="mr-1 h-3.5 w-3.5" />
+                      등록 해제
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={() => {
+                        setVersionName("");
+                        setVersionDescription("");
+                        setVersionIsDefault(false);
+                        setVersionDialogOpen(true);
+                      }}
+                    >
+                      <Plus className="mr-1 h-3.5 w-3.5" />
+                      버전 추가
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 버전 pills */}
+                <div className="border-b bg-muted/30 px-4 py-2">
+                  {versionsLoading ? (
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Loader2 className="h-4 w-4 animate-spin text-primary" />
+                      버전 불러오는 중...
+                    </div>
+                  ) : versions.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">
+                      등록된 버전이 없어요. 버전을 추가해주세요.
+                    </p>
+                  ) : (
+                    <div className="flex flex-wrap items-center gap-2">
+                      {versions.map((v) => {
+                        const selected = v.id === selectedVersionId;
+                        const def = normalizeDefaultFlag(v);
+                        return (
+                          <button
+                            key={v.id}
+                            type="button"
+                            onClick={() => setSelectedVersionId(v.id)}
+                            className={cn(
+                              "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors",
+                              selected
+                                ? "border-primary bg-primary text-primary-foreground"
+                                : "border-border bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                            )}
+                          >
+                            {def && (
+                              <Star
+                                className={cn(
+                                  "h-3.5 w-3.5",
+                                  selected ? "fill-primary-foreground" : "fill-warning text-warning",
+                                )}
+                                aria-label="기본 버전"
+                              />
+                            )}
+                            {v.version_name}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+
+                {/* 액션 바 */}
+                <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-semibold">라우팅 공정</span>
+                    <Badge variant="secondary" className="font-mono text-xs">
+                      {details.length}건
+                    </Badge>
+                  </div>
+                  <div className="flex gap-2">
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={openAddDetailDialog}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Plus className="mr-1 h-3.5 w-3.5" />
+                    공정 추가
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={openEditDetailDialog}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Pencil className="mr-1 h-3.5 w-3.5" />
+                    수정
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={deleteSelectedDetails}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Trash2 className="mr-1 h-3.5 w-3.5" />
+                    선택 삭제
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={() => void persistDetails()}
+                    disabled={!selectedVersionId || detailsLoading || saving}
+                  >
+                    {saving ? (
+                      <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Save className="mr-1 h-3.5 w-3.5" />
+                    )}
+                    저장
+                  </Button>
+                  </div>
+                </div>
+
+                {/* 라우팅 공정 테이블 */}
+                <div className="min-h-0 flex-1 overflow-auto">
+                  {!selectedVersionId ? (
+                    <p className="py-8 text-center text-sm text-muted-foreground">버전을 선택해주세요</p>
+                  ) : (
+                    <EDataTable
+                      columns={[
+                        { key: "seq_no", label: "순번", width: "w-[80px]", align: "center" as const },
+                        { key: "process_display", label: "공정명" },
+                        { key: "is_required", label: "필수", width: "w-[80px]", align: "center" as const },
+                        { key: "is_fixed_order", label: "순서고정", width: "w-[90px]", align: "center" as const },
+                        { key: "work_type", label: "작업구분", width: "w-[100px]" },
+                        { key: "standard_time", label: "표준시간", width: "w-[90px]", align: "right" as const },
+                        { key: "outsource_display", label: "외주업체" },
+                      ] as EDataTableColumn[]}
+                      data={detailsGridData}
+                      rowKey={(row) => row.id}
+                      loading={detailsLoading}
+                      emptyMessage="등록된 공정이 없어요"
+                      showCheckbox
+                      checkedIds={Array.from(selectedDetailIds)}
+                      onCheckedChange={(ids) => setSelectedDetailIds(new Set(ids))}
+                      showPagination={false}
+                      draggableColumns={false}
+                    />
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 버전 추가 모달 */}
+      <Dialog open={versionDialogOpen} onOpenChange={setVersionDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>라우팅 버전 추가</DialogTitle>
+            <DialogDescription>선택한 품목에 새 라우팅 버전을 추가해요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                버전명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={versionName}
+                onChange={(e) => setVersionName(e.target.value)}
+                placeholder="예: Rev.A"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설명</Label>
+              <Input
+                value={versionDescription}
+                onChange={(e) => setVersionDescription(e.target.value)}
+                placeholder="선택 입력"
+                className="h-9"
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="versionDefault"
+                checked={versionIsDefault}
+                onCheckedChange={(c) => setVersionIsDefault(c === true)}
+              />
+              <Label htmlFor="versionDefault" className="text-sm font-normal">
+                기본 버전으로 설정
+              </Label>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setVersionDialogOpen(false)} disabled={versionSubmitting}>
+              취소
+            </Button>
+            <Button onClick={() => void submitNewVersion()} disabled={versionSubmitting}>
+              {versionSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              추가해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 공정 추가/수정 모달 */}
+      <Dialog open={detailDialogOpen} onOpenChange={setDetailDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{detailDialogMode === "add" ? "공정 추가" : "공정 수정"}</DialogTitle>
+            <DialogDescription>라우팅 공정 순서에 반영할 내용을 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                공정 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={formProcessCode} onValueChange={setFormProcessCode}>
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder={processesLoading ? "불러오는 중..." : "공정 선택"} />
+                </SelectTrigger>
+                <SelectContent>
+                  {processes.map((p) => (
+                    <SelectItem key={p.id} value={p.process_code}>
+                      {p.process_name} ({p.process_code})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                순번 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                type="number"
+                min={1}
+                value={formSeqNo}
+                onChange={(e) => setFormSeqNo(e.target.value)}
+                className="h-9"
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">필수여부</Label>
+                <Select value={formRequired} onValueChange={setFormRequired}>
+                  <SelectTrigger className="h-9" size="sm">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Y">Y</SelectItem>
+                    <SelectItem value="N">N</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">순서고정여부</Label>
+                <Select value={formFixedOrder} onValueChange={setFormFixedOrder}>
+                  <SelectTrigger className="h-9" size="sm">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Y">Y</SelectItem>
+                    <SelectItem value="N">N</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">작업구분</Label>
+              <Select value={formWorkType} onValueChange={setFormWorkType}>
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="내부">내부</SelectItem>
+                  <SelectItem value="외주">외주</SelectItem>
+                  <SelectItem value="선택가능">선택가능</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">표준작업시간(분)</Label>
+              <Input
+                type="number"
+                min={0}
+                step={1}
+                value={formStandardTime}
+                onChange={(e) => setFormStandardTime(e.target.value)}
+                placeholder="0"
+                className="h-9"
+              />
+            </div>
+            {showOutsourceField && (
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">외주업체</Label>
+                <Input
+                  value={formOutsource}
+                  onChange={(e) => setFormOutsource(e.target.value)}
+                  placeholder="외주 업체명"
+                  className="h-9"
+                />
+              </div>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDetailDialogOpen(false)} disabled={detailSubmitting}>
+              취소
+            </Button>
+            <Button onClick={submitDetailForm} disabled={detailSubmitting}>
+              {detailSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              확인
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 품목 등록 모달 */}
+      <Dialog open={registerDialogOpen} onOpenChange={setRegisterDialogOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>품목 등록</DialogTitle>
+            <DialogDescription>라우팅에 추가할 품목을 검색하고 선택해주세요</DialogDescription>
+          </DialogHeader>
+        <div className="space-y-3">
+          <div className="relative">
+            <Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={registerSearch}
+              onChange={(e) => setRegisterSearch(e.target.value)}
+              placeholder="품목코드 / 품목명으로 검색"
+              className="h-9 pl-8 text-xs"
+              aria-label="품목 검색"
+            />
+          </div>
+          <div className="max-h-[400px] overflow-auto rounded-md border">
+            {registerLoading ? (
+              <div className="flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground">
+                <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                검색 중...
+              </div>
+            ) : registerItems.length === 0 ? (
+              <p className="py-8 text-center text-sm text-muted-foreground">
+                {registerSearchDebounced ? "검색 결과가 없어요" : "품목을 검색해주세요"}
+              </p>
+            ) : (
+              <Table>
+                <TableHeader className="sticky top-0 bg-background z-10">
+                  <TableRow>
+                    <TableHead className="w-10 text-center text-muted-foreground">
+                      <Checkbox
+                        checked={
+                          registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number)).length > 0 &&
+                          registerItems
+                            .filter((ri) => !registeredItemCodes.has(ri.item_number))
+                            .every((ri) => registerSelectedIds.has(ri.id))
+                        }
+                        onCheckedChange={(checked) => {
+                          const next = new Set(registerSelectedIds);
+                          const available = registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number));
+                          if (checked) {
+                            available.forEach((ri) => next.add(ri.id));
+                          } else {
+                            available.forEach((ri) => next.delete(ri.id));
+                          }
+                          setRegisterSelectedIds(next);
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="text-xs text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-xs text-muted-foreground">품목명</TableHead>
+                    <TableHead className="text-xs text-muted-foreground">상태</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {registerItems.map((ri) => {
+                    const alreadyRegistered = registeredItemCodes.has(ri.item_number);
+                    return (
+                      <TableRow key={ri.id} className={cn("hover:bg-muted/30", alreadyRegistered && "opacity-50")}>
+                        <TableCell className="text-center">
+                          <Checkbox
+                            checked={registerSelectedIds.has(ri.id)}
+                            disabled={alreadyRegistered}
+                            onCheckedChange={(checked) => {
+                              const next = new Set(registerSelectedIds);
+                              if (checked) next.add(ri.id);
+                              else next.delete(ri.id);
+                              setRegisterSelectedIds(next);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell className="text-xs">{ri.item_number}</TableCell>
+                        <TableCell className="text-xs">{ri.item_name}</TableCell>
+                        <TableCell className="text-xs">
+                          {alreadyRegistered ? (
+                            <span className="text-muted-foreground">등록됨</span>
+                          ) : (
+                            <span className="text-primary">미등록</span>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            )}
+          </div>
+          </div>
+          <DialogFooter className="flex-row items-center justify-between sm:justify-between">
+            {registerSelectedIds.size > 0 ? (
+              <p className="text-xs text-muted-foreground">{registerSelectedIds.size}건 선택됨</p>
+            ) : (
+              <div />
+            )}
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setRegisterDialogOpen(false)}>
+                취소
+              </Button>
+              <Button
+                onClick={() => void handleRegisterItems()}
+                disabled={registerSubmitting || registerSelectedIds.size === 0}
+              >
+                {registerSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                등록 ({registerSelectedIds.size}건)
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/production/process-info/ProcessMasterTab.tsx b/frontend/app/(main)/COMPANY_30/production/process-info/ProcessMasterTab.tsx
new file mode 100644
index 00000000..cfbee962
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/production/process-info/ProcessMasterTab.tsx
@@ -0,0 +1,664 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  Loader2,
+  Settings,
+  Plus,
+  Pencil,
+  Trash2,
+  Search,
+  RotateCcw,
+  Wrench,
+} from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import {
+  getProcessList,
+  createProcess,
+  updateProcess,
+  deleteProcesses,
+  getProcessEquipments,
+  addProcessEquipment,
+  removeProcessEquipment,
+  getEquipmentList,
+  type ProcessMaster,
+  type ProcessEquipment,
+  type Equipment,
+} from "@/lib/api/processInfo"; // API: /process-info/*
+import { getCategoryValues } from "@/lib/api/tableCategoryValue";
+
+const ALL_VALUE = "__all__";
+
+export function ProcessMasterTab() {
+  const [processes, setProcesses] = useState<ProcessMaster[]>([]);
+  const [equipmentMaster, setEquipmentMaster] = useState<Equipment[]>([]);
+  const [processTypeOptions, setProcessTypeOptions] = useState<{ valueCode: string; valueLabel: string }[]>([]);
+  const [loadingInitial, setLoadingInitial] = useState(true);
+  const [loadingList, setLoadingList] = useState(false);
+  const [loadingEquipments, setLoadingEquipments] = useState(false);
+
+  const [filterCode, setFilterCode] = useState("");
+  const [filterName, setFilterName] = useState("");
+  const [filterType, setFilterType] = useState<string>(ALL_VALUE);
+  const [filterUseYn, setFilterUseYn] = useState<string>(ALL_VALUE);
+
+  const [selectedProcess, setSelectedProcess] = useState<ProcessMaster | null>(null);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());
+
+  const [processEquipments, setProcessEquipments] = useState<ProcessEquipment[]>([]);
+  const [equipmentPick, setEquipmentPick] = useState<string>("");
+  const [addingEquipment, setAddingEquipment] = useState(false);
+
+  const [formOpen, setFormOpen] = useState(false);
+  const [formMode, setFormMode] = useState<"add" | "edit">("add");
+  const [savingForm, setSavingForm] = useState(false);
+  const [formProcessCode, setFormProcessCode] = useState("");
+  const [formProcessName, setFormProcessName] = useState("");
+  const [formProcessType, setFormProcessType] = useState<string>("");
+  const [formStandardTime, setFormStandardTime] = useState("");
+  const [formWorkerCount, setFormWorkerCount] = useState("");
+  const [formUseYn, setFormUseYn] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  const processTypeMap = useMemo(() => {
+    const m = new Map<string, string>();
+    processTypeOptions.forEach((o) => m.set(o.valueCode, o.valueLabel));
+    return m;
+  }, [processTypeOptions]);
+
+  const getProcessTypeLabel = useCallback(
+    (code: string) => processTypeMap.get(code) ?? code,
+    [processTypeMap]
+  );
+
+  const loadProcesses = useCallback(async () => {
+    setLoadingList(true);
+    try {
+      const res = await getProcessList({
+        processCode: filterCode.trim() || undefined,
+        processName: filterName.trim() || undefined,
+        processType: filterType === ALL_VALUE ? undefined : filterType,
+        useYn: filterUseYn === ALL_VALUE ? undefined : filterUseYn,
+      });
+      if (!res.success) {
+        toast.error(res.message || "공정 목록을 불러오지 못했어요");
+        return;
+      }
+      setProcesses(res.data ?? []);
+    } finally {
+      setLoadingList(false);
+    }
+  }, [filterCode, filterName, filterType, filterUseYn]);
+
+  const loadInitial = useCallback(async () => {
+    setLoadingInitial(true);
+    try {
+      const [procRes, eqRes] = await Promise.all([getProcessList(), getEquipmentList()]);
+      if (!procRes.success) {
+        toast.error(procRes.message || "공정 목록을 불러오지 못했어요");
+      } else {
+        setProcesses(procRes.data ?? []);
+      }
+      if (!eqRes.success) {
+        toast.error(eqRes.message || "설비 목록을 불러오지 못했어요");
+      } else {
+        setEquipmentMaster(eqRes.data ?? []);
+      }
+      const ptRes = await getCategoryValues("process_mng", "process_type");
+      if (ptRes.success && "data" in ptRes && Array.isArray(ptRes.data)) {
+        const activeValues = ptRes.data.filter((v: any) => v.isActive !== false);
+        const seen = new Set<string>();
+        const unique = activeValues.filter((v: any) => {
+          if (seen.has(v.valueCode)) return false;
+          seen.add(v.valueCode);
+          return true;
+        });
+        setProcessTypeOptions(unique.map((v: any) => ({ valueCode: v.valueCode, valueLabel: v.valueLabel })));
+      }
+    } finally {
+      setLoadingInitial(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadInitial();
+  }, [loadInitial]);
+
+  useEffect(() => {
+    setSelectedProcess((prev) => {
+      if (!prev) return prev;
+      if (!processes.some((p) => p.id === prev.id)) return null;
+      return prev;
+    });
+  }, [processes]);
+
+  useEffect(() => {
+    setEquipmentPick("");
+  }, [selectedProcess?.id]);
+
+  useEffect(() => {
+    if (!selectedProcess) {
+      setProcessEquipments([]);
+      return;
+    }
+    let cancelled = false;
+    setLoadingEquipments(true);
+    void (async () => {
+      const res = await getProcessEquipments(selectedProcess.process_code);
+      if (cancelled) return;
+      if (!res.success) {
+        toast.error(res.message || "공정 설비를 불러오지 못했어요");
+        setProcessEquipments([]);
+      } else {
+        setProcessEquipments(res.data ?? []);
+      }
+      setLoadingEquipments(false);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedProcess?.process_code]);
+
+  const handleResetFilters = () => {
+    setFilterCode("");
+    setFilterName("");
+    setFilterType(ALL_VALUE);
+    setFilterUseYn(ALL_VALUE);
+  };
+
+  const handleSearch = () => {
+    void loadProcesses();
+  };
+
+  const openAdd = () => {
+    setFormMode("add");
+    setEditingId(null);
+    setFormProcessCode("");
+    setFormProcessName("");
+    setFormProcessType(processTypeOptions[0]?.valueCode ?? "");
+    setFormStandardTime("");
+    setFormWorkerCount("");
+    setFormUseYn("Y");
+    setFormOpen(true);
+  };
+
+  const openEdit = () => {
+    if (!selectedProcess) {
+      toast.message("수정할 공정을 좌측 목록에서 선택해주세요");
+      return;
+    }
+    setFormMode("edit");
+    setEditingId(selectedProcess.id);
+    setFormProcessCode(selectedProcess.process_code);
+    setFormProcessName(selectedProcess.process_name);
+    setFormProcessType(selectedProcess.process_type);
+    setFormStandardTime(selectedProcess.standard_time ?? "");
+    setFormWorkerCount(selectedProcess.worker_count ?? "");
+    setFormUseYn(selectedProcess.use_yn);
+    setFormOpen(true);
+  };
+
+  const submitForm = async () => {
+    if (!formProcessName.trim()) {
+      toast.error("공정명을 입력해주세요");
+      return;
+    }
+
+    setSavingForm(true);
+    try {
+      if (formMode === "add") {
+        const res = await createProcess({
+          process_name: formProcessName.trim(),
+          process_type: formProcessType,
+          standard_time: formStandardTime.trim() || "0",
+          worker_count: formWorkerCount.trim() || "0",
+          use_yn: formUseYn,
+        });
+        if (!res.success || !res.data) {
+          toast.error(res.message || "등록에 실패했어요");
+          return;
+        }
+        toast.success("공정이 등록되었어요");
+        setFormOpen(false);
+        await loadProcesses();
+        setSelectedProcess(res.data);
+        setSelectedIds(new Set());
+      } else if (editingId) {
+        const res = await updateProcess(editingId, {
+          process_name: formProcessName.trim(),
+          process_type: formProcessType,
+          standard_time: formStandardTime.trim() || "0",
+          worker_count: formWorkerCount.trim() || "0",
+          use_yn: formUseYn,
+        });
+        if (!res.success || !res.data) {
+          toast.error(res.message || "수정에 실패했어요");
+          return;
+        }
+        toast.success("공정이 수정되었어요");
+        setFormOpen(false);
+        await loadProcesses();
+        setSelectedProcess(res.data);
+      }
+    } finally {
+      setSavingForm(false);
+    }
+  };
+
+  const openDelete = () => {
+    if (selectedIds.size === 0) {
+      toast.message("삭제할 공정을 체크박스로 선택해주세요");
+      return;
+    }
+    setDeleteOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    const ids = Array.from(selectedIds);
+    setDeleting(true);
+    try {
+      const res = await deleteProcesses(ids);
+      if (!res.success) {
+        toast.error(res.message || "삭제에 실패했어요");
+        return;
+      }
+      toast.success(`${ids.length}건 삭제되었어요`);
+      setDeleteOpen(false);
+      setSelectedIds(new Set());
+      if (selectedProcess && ids.includes(selectedProcess.id)) {
+        setSelectedProcess(null);
+      }
+      await loadProcesses();
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const availableEquipments = useMemo(() => {
+    const used = new Set(processEquipments.map((e) => e.equipment_code));
+    return equipmentMaster.filter((e) => !used.has(e.equipment_code));
+  }, [equipmentMaster, processEquipments]);
+
+  const handleAddEquipment = async () => {
+    if (!selectedProcess) return;
+    if (!equipmentPick) {
+      toast.message("추가할 설비를 선택해주세요");
+      return;
+    }
+    setAddingEquipment(true);
+    try {
+      const res = await addProcessEquipment({
+        process_code: selectedProcess.process_code,
+        equipment_code: equipmentPick,
+      });
+      if (!res.success) {
+        toast.error(res.message || "설비 추가에 실패했어요");
+        return;
+      }
+      toast.success("설비가 등록되었어요");
+      setEquipmentPick("");
+      const listRes = await getProcessEquipments(selectedProcess.process_code);
+      if (listRes.success && listRes.data) setProcessEquipments(listRes.data);
+    } finally {
+      setAddingEquipment(false);
+    }
+  };
+
+  const handleRemoveEquipment = async (row: ProcessEquipment) => {
+    const res = await removeProcessEquipment(row.id);
+    if (!res.success) {
+      toast.error(res.message || "설비 제거에 실패했어요");
+      return;
+    }
+    toast.success("설비가 제거되었어요");
+    if (selectedProcess) {
+      const listRes = await getProcessEquipments(selectedProcess.process_code);
+      if (listRes.success && listRes.data) setProcessEquipments(listRes.data);
+    }
+  };
+
+  const listBusy = loadingInitial || loadingList;
+
+  // 표시용 데이터
+  const processGridData = useMemo(
+    () =>
+      processes.map((p) => ({
+        ...p,
+        process_type_display: getProcessTypeLabel(p.process_type),
+        use_yn_display: p.use_yn === "Y" ? "사용" : "미사용",
+      })),
+    [processes, getProcessTypeLabel]
+  );
+
+  return (
+    <div className="flex h-full flex-col">
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+        {/* 좌측: 공정 목록 */}
+        <ResizablePanel defaultSize={50} minSize={30}>
+          <div className="flex h-full flex-col">
+            {/* 패널 헤더 */}
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">공정 마스터</span>
+              <Badge variant="secondary" className="font-mono text-xs">
+                {processes.length}건
+              </Badge>
+            </div>
+
+            {/* 필터 바 */}
+            <div className="flex flex-wrap items-center gap-2 border-b px-3 py-2">
+              <Input value={filterCode} onChange={(e) => setFilterCode(e.target.value)} placeholder="공정코드" className="h-8 w-[110px] text-xs" />
+              <Input value={filterName} onChange={(e) => setFilterName(e.target.value)} placeholder="공정명" className="h-8 w-[130px] text-xs" />
+              <Select value={filterType} onValueChange={setFilterType}>
+                <SelectTrigger className="h-8 w-[110px] text-xs">
+                  <SelectValue placeholder="유형 전체" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>전체</SelectItem>
+                  {processTypeOptions.map((o, idx) => (
+                    <SelectItem key={`pt-filter-${idx}`} value={o.valueCode}>{o.valueLabel}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select value={filterUseYn} onValueChange={setFilterUseYn}>
+                <SelectTrigger className="h-8 w-[100px] text-xs">
+                  <SelectValue placeholder="사용 전체" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>전체</SelectItem>
+                  <SelectItem value="Y">사용</SelectItem>
+                  <SelectItem value="N">미사용</SelectItem>
+                </SelectContent>
+              </Select>
+              <div className="flex-1" />
+              {listBusy && <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />}
+              <Button size="sm" className="h-8 gap-1 text-xs" onClick={handleSearch} disabled={listBusy}>
+                <Search className="h-3 w-3" />조회
+              </Button>
+              <Button variant="ghost" size="sm" className="h-8 gap-1 text-xs text-muted-foreground" onClick={handleResetFilters}>
+                <RotateCcw className="h-3 w-3" />초기화
+              </Button>
+            </div>
+
+            {/* 액션 바 */}
+            <div className="flex items-center justify-end gap-2 border-b bg-muted/30 px-4 py-2">
+              <Button size="sm" onClick={openAdd}>
+                <Plus className="mr-1 h-3.5 w-3.5" />
+                공정 추가
+              </Button>
+              <Button variant="secondary" size="sm" onClick={openEdit}>
+                <Pencil className="mr-1 h-3.5 w-3.5" />
+                수정
+              </Button>
+              <Button variant="destructive" size="sm" onClick={openDelete}>
+                <Trash2 className="mr-1 h-3.5 w-3.5" />
+                삭제
+              </Button>
+            </div>
+
+            {/* 공정 목록 테이블 */}
+            <div className="min-h-0 flex-1 overflow-auto">
+              <EDataTable
+                columns={[
+                  { key: "process_code", label: "공정코드", width: "w-[130px]", render: (val: any) => <span className="font-mono text-xs">{val}</span> },
+                  { key: "process_name", label: "공정명" },
+                  { key: "process_type_display", label: "공정유형", width: "w-[120px]" },
+                  { key: "standard_time", label: "표준시간(분)", width: "w-[110px]", align: "right" as const },
+                  { key: "worker_count", label: "작업인원", width: "w-[90px]", align: "right" as const },
+                  { key: "use_yn_display", label: "사용여부", width: "w-[90px]", align: "center" as const },
+                ] as EDataTableColumn[]}
+                data={processGridData}
+                rowKey={(row) => row.id}
+                loading={listBusy}
+                emptyMessage="조회된 공정이 없어요"
+                selectedId={selectedProcess?.id ?? null}
+                onSelect={(id) => {
+                  const proc = processes.find((p) => p.id === id);
+                  setSelectedProcess(proc || null);
+                }}
+                onRowClick={(row) => {
+                  const proc = processes.find((p) => p.id === row.id);
+                  setSelectedProcess(proc || null);
+                }}
+                showCheckbox
+                checkedIds={Array.from(selectedIds)}
+                onCheckedChange={(ids) => setSelectedIds(new Set(ids))}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 공정별 설비 */}
+        <ResizablePanel defaultSize={50} minSize={30}>
+          <div className="flex h-full flex-col">
+            {/* 패널 헤더 */}
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <Wrench className="h-4 w-4 text-muted-foreground" />
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-semibold">공정별 사용설비</p>
+                {selectedProcess ? (
+                  <p className="truncate text-xs text-muted-foreground">
+                    {selectedProcess.process_name} ({selectedProcess.process_code})
+                  </p>
+                ) : (
+                  <p className="text-xs text-muted-foreground">공정을 선택해주세요</p>
+                )}
+              </div>
+            </div>
+
+            {!selectedProcess ? (
+              <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+                <Settings className="h-10 w-10 opacity-40" />
+                <p className="text-sm font-medium text-foreground">좌측에서 공정을 선택해주세요</p>
+                <p className="max-w-xs text-xs">
+                  목록 행을 클릭하면 이 공정에 연결된 설비를 관리할 수 있어요
+                </p>
+              </div>
+            ) : (
+              <div className="flex min-h-0 flex-1 flex-col gap-3 p-4">
+                <div className="flex items-end gap-2">
+                  <div className="min-w-0 flex-1 space-y-1">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설비 선택</Label>
+                    <Select
+                      key={selectedProcess.id}
+                      value={equipmentPick || undefined}
+                      onValueChange={setEquipmentPick}
+                      disabled={addingEquipment || availableEquipments.length === 0}
+                    >
+                      <SelectTrigger className="h-9" size="sm">
+                        <SelectValue placeholder="설비를 선택해주세요" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availableEquipments.map((eq) => (
+                          <SelectItem key={eq.id} value={eq.equipment_code}>
+                            {eq.equipment_code} · {eq.equipment_name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <Button
+                    size="sm"
+                    onClick={() => void handleAddEquipment()}
+                    disabled={addingEquipment || !equipmentPick}
+                  >
+                    {addingEquipment ? (
+                      <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Plus className="mr-1 h-3.5 w-3.5" />
+                    )}
+                    추가
+                  </Button>
+                </div>
+
+                <div className="min-h-0 flex-1 overflow-auto">
+                  {loadingEquipments ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Loader2 className="h-7 w-7 animate-spin" />
+                      <p className="mt-2 text-sm">설비 목록을 불러오고 있어요...</p>
+                    </div>
+                  ) : processEquipments.length === 0 ? (
+                    <p className="py-8 text-center text-sm text-muted-foreground">
+                      등록된 설비가 없어요. 상단에서 설비를 추가해주세요.
+                    </p>
+                  ) : (
+                    <ul className="space-y-2">
+                      {processEquipments.map((pe) => (
+                        <li key={pe.id} className="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:bg-muted/30">
+                          <div className="min-w-0 flex-1">
+                            <p className="truncate text-sm font-medium">{pe.equipment_code}</p>
+                            <p className="truncate text-xs text-muted-foreground">{pe.equipment_name || "설비명 없음"}</p>
+                          </div>
+                          <Button variant="ghost" size="sm" onClick={() => void handleRemoveEquipment(pe)}>
+                            <Trash2 className="mr-1 h-3.5 w-3.5" />
+                            제거
+                          </Button>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 공정 등록/수정 모달 */}
+      <Dialog open={formOpen} onOpenChange={setFormOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{formMode === "add" ? "공정 추가" : "공정 수정"}</DialogTitle>
+            <DialogDescription>공정 마스터 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                공정명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={formProcessName}
+                onChange={(e) => setFormProcessName(e.target.value)}
+                placeholder="공정명을 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">공정유형</Label>
+              <Select value={formProcessType} onValueChange={setFormProcessType}>
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder="선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {processTypeOptions.map((o, idx) => (
+                    <SelectItem key={`pt-form-${idx}`} value={o.valueCode}>{o.valueLabel}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">표준작업시간(분)</Label>
+              <Input
+                value={formStandardTime}
+                onChange={(e) => setFormStandardTime(e.target.value)}
+                placeholder="0"
+                inputMode="numeric"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">작업인원수</Label>
+              <Input
+                value={formWorkerCount}
+                onChange={(e) => setFormWorkerCount(e.target.value)}
+                placeholder="0"
+                inputMode="numeric"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">사용여부</Label>
+              <Select value={formUseYn} onValueChange={setFormUseYn}>
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder="선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Y">사용</SelectItem>
+                  <SelectItem value="N">미사용</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setFormOpen(false)} disabled={savingForm}>취소</Button>
+            <Button onClick={() => void submitForm()} disabled={savingForm}>
+              {savingForm && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 삭제 확인 */}
+      <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>공정 삭제</DialogTitle>
+            <DialogDescription>
+              선택한 {selectedIds.size}건의 공정을 삭제해요. 연결된 공정-설비 매핑도 함께 삭제돼요. 이 작업은 되돌릴 수 없어요.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2">
+            <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>취소</Button>
+            <Button variant="destructive" onClick={() => void confirmDelete()} disabled={deleting}>
+              {deleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              삭제해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/production/process-info/ProcessWorkStandardTab.tsx b/frontend/app/(main)/COMPANY_30/production/process-info/ProcessWorkStandardTab.tsx
new file mode 100644
index 00000000..21007c05
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/production/process-info/ProcessWorkStandardTab.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { ProcessWorkStandardComponent } from "@/lib/registry/components/v2-process-work-standard/ProcessWorkStandardComponent";
+
+export function ProcessWorkStandardTab() {
+  return (
+    <div className="h-[calc(100vh-12rem)]">
+      <ProcessWorkStandardComponent
+        config={{
+          itemListMode: "registered",
+          screenCode: "screen_1599",
+          leftPanelTitle: "등록 품목 및 공정",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/production/process-info/page.tsx b/frontend/app/(main)/COMPANY_30/production/process-info/page.tsx
new file mode 100644
index 00000000..a7b81550
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/production/process-info/page.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Settings,
+  GitBranch,
+  ClipboardList,
+  ChevronRight,
+  Factory,
+  Keyboard,
+  Plus,
+  Pencil,
+  Trash2,
+  List,
+  Settings2,
+} from "lucide-react";
+import { ProcessMasterTab } from "./ProcessMasterTab";
+import { ItemRoutingTab } from "./ItemRoutingTab";
+import { ProcessWorkStandardTab } from "./ProcessWorkStandardTab";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+
+const GRID_COLUMNS = [
+  { key: "process_code", label: "공정코드" },
+  { key: "process_name", label: "공정명" },
+  { key: "process_type", label: "공정유형" },
+  { key: "standard_time", label: "표준시간(분)" },
+  { key: "worker_count", label: "작업인원" },
+  { key: "use_yn", label: "사용여부" },
+];
+
+const TAB_META = [
+  {
+    value: "process",
+    label: "공정 마스터",
+    shortLabel: "공정",
+    description: "공정코드/유형/표준시간/사용설비 관리",
+    detailDesc: "공정코드, 공정유형, 표준시간을 등록하고 사용 설비를 매핑합니다.",
+    icon: Settings,
+    color: "text-blue-500",
+    badgeColor: "bg-blue-50 text-blue-700 ring-blue-600/20",
+    shortcut: "1",
+    actions: ["공정 등록", "공정 수정", "공정 삭제", "설비 연결"],
+  },
+  {
+    value: "routing",
+    label: "품목별 라우팅",
+    shortLabel: "라우팅",
+    description: "품목 라우팅 버전 및 공정 순서 관리",
+    detailDesc: "품목별 생산 라우팅 버전을 관리하고 공정 순서 및 소요시간을 설정합니다.",
+    icon: GitBranch,
+    color: "text-emerald-500",
+    badgeColor: "bg-emerald-50 text-emerald-700 ring-emerald-600/20",
+    shortcut: "2",
+    actions: ["버전 생성", "공정 순서 설정", "품목 등록", "품목 해제"],
+  },
+  {
+    value: "workstandard",
+    label: "공정 작업기준",
+    shortLabel: "작업기준",
+    description: "공정별 작업기준서 및 작업 표준 관리",
+    detailDesc: "공정별 작업기준서를 등록하고 작업 표준을 문서화하여 품질을 관리합니다.",
+    icon: ClipboardList,
+    color: "text-violet-500",
+    badgeColor: "bg-violet-50 text-violet-700 ring-violet-600/20",
+    shortcut: "3",
+    actions: ["기준서 등록", "기준서 수정", "기준서 삭제", "작업 표준 관리"],
+  },
+] as const;
+
+type TabValue = (typeof TAB_META)[number]["value"];
+
+const ACTION_ICONS = [Plus, Pencil, Trash2, List] as const;
+
+export default function ProcessInfoPage() {
+  const ts = useTableSettings("c16-process-info", "process_mst", GRID_COLUMNS);
+  const [activeTab, setActiveTab] = useState<TabValue>("process");
+  const [showShortcutHint, setShowShortcutHint] = useState(false);
+
+  const activeMeta = TAB_META.find((t) => t.value === activeTab)!;
+
+  const handleTabChange = useCallback((value: string) => {
+    setActiveTab(value as TabValue);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!e.altKey) return;
+      const tabByShortcut = TAB_META.find((t) => t.shortcut === e.key);
+      if (tabByShortcut) {
+        e.preventDefault();
+        setActiveTab(tabByShortcut.value);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col bg-muted/30">
+      {/* 페이지 헤더 */}
+      <div className="shrink-0 border-b bg-background px-6 py-3">
+        <nav
+          className="mb-1 flex items-center gap-1 text-xs text-muted-foreground"
+          aria-label="breadcrumb"
+        >
+          <Factory className="h-3 w-3" />
+          <span>생산관리</span>
+          <ChevronRight className="h-3 w-3 opacity-50" />
+          <span className="font-medium text-foreground">공정정보관리</span>
+        </nav>
+        <div className="flex items-center justify-between">
+          <div className="flex items-baseline gap-2">
+            <h1 className="text-base font-semibold text-foreground">공정정보관리</h1>
+            <span className="text-xs text-muted-foreground">{activeMeta.description}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+            <button
+              type="button"
+              className="flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              onClick={() => setShowShortcutHint((v) => !v)}
+              aria-label="키보드 단축키 보기"
+            >
+              <Keyboard className="h-3 w-3" />
+              <span>단축키</span>
+            </button>
+          </div>
+        </div>
+        {showShortcutHint && (
+          <div className="mt-2 flex items-center gap-3 rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground">
+            <span className="font-medium text-foreground">탭 전환:</span>
+            {TAB_META.map((t) => (
+              <span key={t.value} className="flex items-center gap-1">
+                <kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-mono text-[10px]">
+                  Alt+{t.shortcut}
+                </kbd>
+                <span>{t.shortLabel}</span>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex min-h-0 flex-1 flex-col"
+      >
+        {/* 탭 네비게이션 */}
+        <div className="shrink-0 border-b bg-background px-4">
+          <TabsList className="h-12 bg-transparent gap-1">
+            {TAB_META.map(({ value, label, icon: Icon, shortcut }) => (
+              <TabsTrigger
+                key={value}
+                value={value}
+                className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 gap-1.5"
+                aria-label={`${label} (Alt+${shortcut})`}
+              >
+                <Icon className="h-4 w-4" />
+                {label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
+
+        {/* 탭 설명 배너 */}
+        <div className="shrink-0 border-b bg-background/60 px-6 py-2">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span
+                className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset ${activeMeta.badgeColor}`}
+              >
+                {activeMeta.shortLabel}
+              </span>
+              <span className="text-xs text-muted-foreground">{activeMeta.detailDesc}</span>
+            </div>
+            <div className="hidden items-center gap-2 sm:flex">
+              {activeMeta.actions.map((action, i) => {
+                const ActionIcon = ACTION_ICONS[i % ACTION_ICONS.length];
+                return (
+                  <span
+                    key={action}
+                    className="flex items-center gap-1 text-xs text-muted-foreground/70"
+                  >
+                    <ActionIcon className="h-3 w-3" />
+                    {action}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* 탭 컨텐츠 */}
+        <TabsContent value="process" className="min-h-0 flex-1 overflow-hidden mt-0">
+          <ProcessMasterTab />
+        </TabsContent>
+
+        <TabsContent value="routing" className="min-h-0 flex-1 overflow-hidden mt-0">
+          <ItemRoutingTab />
+        </TabsContent>
+
+        <TabsContent value="workstandard" className="min-h-0 flex-1 overflow-hidden mt-0">
+          <ProcessWorkStandardTab />
+        </TabsContent>
+      </Tabs>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/production/work-instruction/WorkStandardEditModal.tsx b/frontend/app/(main)/COMPANY_30/production/work-instruction/WorkStandardEditModal.tsx
new file mode 100644
index 00000000..d9167dcb
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/production/work-instruction/WorkStandardEditModal.tsx
@@ -0,0 +1,1007 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { cn } from "@/lib/utils";
+import {
+  Loader2, Save, RotateCcw, Plus, Trash2, Pencil, ClipboardCheck,
+  GripVertical, AlertCircle, ClipboardList,
+} from "lucide-react";
+import { toast } from "sonner";
+import {
+  getWIWorkStandard, copyWorkStandard, saveWIWorkStandard, resetWIWorkStandard,
+  WIWorkItem, WIWorkItemDetail, WIWorkStandardProcess,
+} from "@/lib/api/workInstruction";
+
+interface WorkStandardEditModalProps {
+  open: boolean;
+  onClose: () => void;
+  workInstructionNo: string;
+  routingVersionId: string;
+  routingName: string;
+  itemName: string;
+  itemCode: string;
+}
+
+const PHASES = [
+  { key: "PRE", label: "작업 전 (Pre-Work)" },
+  { key: "IN", label: "작업 중 (In-Work)" },
+  { key: "POST", label: "작업 후 (Post-Work)" },
+];
+
+const DETAIL_TYPES = [
+  { value: "checklist", label: "체크리스트" },
+  { value: "inspection", label: "검사항목" },
+  { value: "procedure", label: "작업절차" },
+  { value: "input", label: "직접입력" },
+  { value: "lookup", label: "문서참조" },
+  { value: "equip_inspection", label: "설비점검" },
+  { value: "equip_condition", label: "설비조건" },
+  { value: "production_result", label: "실적등록" },
+  { value: "material_input", label: "자재투입" },
+];
+
+const INPUT_TYPES = [
+  { value: "text", label: "텍스트" },
+  { value: "number", label: "숫자" },
+  { value: "date", label: "날짜" },
+  { value: "textarea", label: "장문 텍스트" },
+];
+
+const UNIT_OPTIONS = [
+  "mm", "cm", "m", "μm", "℃", "℉", "bar", "Pa", "MPa", "psi",
+  "RPM", "kg", "N", "N·m", "m/s", "m/min", "A", "V", "kW", "%",
+  "L/min", "Hz", "dB", "ea", "g", "mg", "ml", "L",
+];
+
+const getDetailTypeLabel = (type: string) =>
+  DETAIL_TYPES.find(d => d.value === type)?.label || type;
+
+const getContentSummary = (detail: WIWorkItemDetail): string => {
+  const type = detail.detail_type;
+  if (type === "inspection") {
+    const parts = [detail.content];
+    if (detail.inspection_method) parts.push(`[${detail.inspection_method}]`);
+    if (detail.base_value) {
+      parts.push(`(기준: ${detail.base_value}${detail.tolerance ? ` ±${detail.tolerance}` : ""} ${detail.unit || ""})`);
+    }
+    return parts.join(" ");
+  }
+  if (type === "procedure" && detail.duration_minutes) {
+    return `${detail.content} (${detail.duration_minutes}분)`;
+  }
+  if (type === "input" && detail.input_type) {
+    const typeMap: Record<string, string> = { text: "텍스트", number: "숫자", date: "날짜", textarea: "장문" };
+    return `${detail.content} [${typeMap[detail.input_type] || detail.input_type}]`;
+  }
+  if (type === "lookup") return "품목 등록 문서 (자동 연동)";
+  if (type === "equip_inspection") return detail.content || "설비점검";
+  if (type === "equip_condition") {
+    const parts = [detail.content];
+    if (detail.condition_base_value) {
+      parts.push(`(기준: ${detail.condition_base_value}${detail.condition_tolerance ? ` ±${detail.condition_tolerance}` : ""} ${detail.condition_unit || ""})`);
+    }
+    return parts.join(" ");
+  }
+  if (type === "production_result") return "작업수량 / 불량수량 / 양품수량";
+  if (type === "material_input") return "BOM 구성 자재 (자동 연동)";
+  return detail.content || "-";
+};
+
+export function WorkStandardEditModal({
+  open,
+  onClose,
+  workInstructionNo,
+  routingVersionId,
+  routingName,
+  itemName,
+  itemCode,
+}: WorkStandardEditModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [processes, setProcesses] = useState<WIWorkStandardProcess[]>([]);
+  const [isCustom, setIsCustom] = useState(false);
+  const [selectedProcessIdx, setSelectedProcessIdx] = useState(0);
+  const [selectedWorkItemIdByPhase, setSelectedWorkItemIdByPhase] = useState<Record<string, string | null>>({});
+  const [dirty, setDirty] = useState(false);
+
+  // 작업항목 추가/수정 모달
+  const [addItemOpen, setAddItemOpen] = useState(false);
+  const [addItemPhase, setAddItemPhase] = useState("PRE");
+  const [addItemTitle, setAddItemTitle] = useState("");
+  const [addItemRequired, setAddItemRequired] = useState("Y");
+  const [editingWorkItem, setEditingWorkItem] = useState<WIWorkItem | null>(null);
+
+  // 상세 추가/수정 모달
+  const [detailModalOpen, setDetailModalOpen] = useState(false);
+  const [detailModalMode, setDetailModalMode] = useState<"add" | "edit">("add");
+  const [detailModalPhase, setDetailModalPhase] = useState("PRE");
+  const [detailFormData, setDetailFormData] = useState<Partial<WIWorkItemDetail>>({});
+  const [editingDetail, setEditingDetail] = useState<WIWorkItemDetail | null>(null);
+
+  // 데이터 로드
+  const loadData = useCallback(async () => {
+    if (!workInstructionNo || !routingVersionId) return;
+    setLoading(true);
+    try {
+      const res = await getWIWorkStandard(workInstructionNo, routingVersionId);
+      if (res.success && res.data) {
+        setProcesses(res.data.processes);
+        setIsCustom(res.data.isCustom);
+        setSelectedProcessIdx(0);
+        setSelectedWorkItemIdByPhase({});
+        setDirty(false);
+      }
+    } catch (err) {
+      console.error("공정작업기준 로드 실패", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [workInstructionNo, routingVersionId]);
+
+  useEffect(() => {
+    if (open) loadData();
+  }, [open, loadData]);
+
+  const currentProcess = processes[selectedProcessIdx] || null;
+
+  // Phase별 작업항목 그룹핑 (MAIN을 IN으로 매핑)
+  const workItemsByPhase = useMemo(() => {
+    if (!currentProcess) return {};
+    const map: Record<string, WIWorkItem[]> = {};
+    for (const phase of PHASES) {
+      map[phase.key] = currentProcess.workItems.filter(
+        wi => wi.work_phase === phase.key || (phase.key === "IN" && wi.work_phase === "MAIN")
+      );
+    }
+    return map;
+  }, [currentProcess]);
+
+  // 커스텀 복사 확인 후 수정
+  const ensureCustom = useCallback(async () => {
+    if (isCustom) return true;
+    try {
+      const res = await copyWorkStandard(workInstructionNo, routingVersionId);
+      if (res.success) {
+        await loadData();
+        setIsCustom(true);
+        return true;
+      }
+    } catch (err) {
+      toast.error("원본 복사에 실패했습니다");
+    }
+    return false;
+  }, [isCustom, workInstructionNo, routingVersionId, loadData]);
+
+  // 작업항목 추가 모달 열기
+  const openAddWorkItem = useCallback((phaseKey: string) => {
+    setAddItemPhase(phaseKey);
+    setAddItemTitle("");
+    setAddItemRequired("Y");
+    setEditingWorkItem(null);
+    setAddItemOpen(true);
+  }, []);
+
+  // 작업항목 수정 모달 열기
+  const openEditWorkItem = useCallback((item: WIWorkItem) => {
+    setAddItemPhase(item.work_phase);
+    setAddItemTitle(item.title);
+    setAddItemRequired(item.is_required);
+    setEditingWorkItem(item);
+    setAddItemOpen(true);
+  }, []);
+
+  // 작업항목 추가/수정 처리
+  const handleSaveWorkItem = useCallback(async () => {
+    if (!addItemTitle.trim()) { toast.error("제목을 입력하세요"); return; }
+    const ok = await ensureCustom();
+    if (!ok || !currentProcess) return;
+
+    if (editingWorkItem) {
+      // 수정
+      setProcesses(prev => {
+        const next = [...prev];
+        const workItems = [...next[selectedProcessIdx].workItems];
+        const idx = workItems.findIndex(wi => wi.id === editingWorkItem.id);
+        if (idx >= 0) {
+          workItems[idx] = { ...workItems[idx], title: addItemTitle.trim(), is_required: addItemRequired };
+        }
+        next[selectedProcessIdx] = { ...next[selectedProcessIdx], workItems };
+        return next;
+      });
+    } else {
+      // 추가
+      const phaseKey = addItemPhase === "IN" ? "IN" : addItemPhase;
+      const phaseItems = currentProcess.workItems.filter(
+        wi => wi.work_phase === phaseKey || (phaseKey === "IN" && wi.work_phase === "MAIN")
+      );
+      const newItem: WIWorkItem = {
+        id: `temp-${Date.now()}`,
+        routing_detail_id: currentProcess.routing_detail_id,
+        work_phase: phaseKey,
+        title: addItemTitle.trim(),
+        is_required: addItemRequired,
+        sort_order: phaseItems.length + 1,
+        details: [],
+      };
+
+      setProcesses(prev => {
+        const next = [...prev];
+        next[selectedProcessIdx] = {
+          ...next[selectedProcessIdx],
+          workItems: [...next[selectedProcessIdx].workItems, newItem],
+        };
+        return next;
+      });
+
+      setSelectedWorkItemIdByPhase(prev => ({ ...prev, [addItemPhase]: newItem.id! }));
+    }
+
+    setAddItemOpen(false);
+    setDirty(true);
+  }, [addItemTitle, addItemRequired, addItemPhase, ensureCustom, currentProcess, selectedProcessIdx, editingWorkItem]);
+
+  // 작업항목 삭제
+  const handleDeleteWorkItem = useCallback(async (id: string, phaseKey: string) => {
+    const ok = await ensureCustom();
+    if (!ok) return;
+
+    setProcesses(prev => {
+      const next = [...prev];
+      next[selectedProcessIdx] = {
+        ...next[selectedProcessIdx],
+        workItems: next[selectedProcessIdx].workItems.filter(wi => wi.id !== id),
+      };
+      return next;
+    });
+    if (selectedWorkItemIdByPhase[phaseKey] === id) {
+      setSelectedWorkItemIdByPhase(prev => ({ ...prev, [phaseKey]: null }));
+    }
+    setDirty(true);
+  }, [ensureCustom, selectedProcessIdx, selectedWorkItemIdByPhase]);
+
+  // 상세 추가 모달 열기
+  const openAddDetail = useCallback((phaseKey: string) => {
+    setDetailModalPhase(phaseKey);
+    setDetailModalMode("add");
+    setEditingDetail(null);
+    setDetailFormData({
+      detail_type: DETAIL_TYPES[0].value,
+      content: "",
+      is_required: "Y",
+    });
+    setDetailModalOpen(true);
+  }, []);
+
+  // 상세 수정 모달 열기
+  const openEditDetail = useCallback((detail: WIWorkItemDetail, phaseKey: string) => {
+    setDetailModalPhase(phaseKey);
+    setDetailModalMode("edit");
+    setEditingDetail(detail);
+    setDetailFormData({ ...detail });
+    setDetailModalOpen(true);
+  }, []);
+
+  // 상세 추가/수정 처리
+  const handleSaveDetail = useCallback(async () => {
+    const type = detailFormData.detail_type || "";
+    if (!type) return;
+
+    // 유효성 검사 (내용이 필요한 유형)
+    const needsContent = ["checklist", "procedure", "input", "equip_condition"];
+    if (needsContent.includes(type) && !detailFormData.content?.trim()) {
+      toast.error("내용을 입력하세요");
+      return;
+    }
+    if (type === "inspection" && !detailFormData.content?.trim()) {
+      toast.error("검사 항목명을 입력하세요");
+      return;
+    }
+
+    const workItemId = selectedWorkItemIdByPhase[detailModalPhase];
+    if (!workItemId) return;
+    const ok = await ensureCustom();
+    if (!ok) return;
+
+    // content 자동 설정 (UI에서 직접 입력이 없는 유형들)
+    const submitData = { ...detailFormData };
+    if (type === "lookup") submitData.content = submitData.content || "품목 등록 문서 (자동 연동)";
+    if (type === "equip_inspection") submitData.content = submitData.content || "설비점검";
+    if (type === "production_result") submitData.content = submitData.content || "작업수량 / 불량수량 / 양품수량";
+    if (type === "material_input") submitData.content = submitData.content || "BOM 구성 자재 (자동 연동)";
+
+    setProcesses(prev => {
+      const next = [...prev];
+      const workItems = [...next[selectedProcessIdx].workItems];
+      const wiIdx = workItems.findIndex(wi => wi.id === workItemId);
+      if (wiIdx < 0) return prev;
+
+      if (detailModalMode === "edit" && editingDetail) {
+        // 수정
+        const details = (workItems[wiIdx].details || []).map(d =>
+          d.id === editingDetail.id ? { ...d, ...submitData } : d
+        );
+        workItems[wiIdx] = { ...workItems[wiIdx], details };
+      } else {
+        // 추가
+        const newDetail: WIWorkItemDetail = {
+          ...submitData,
+          id: `temp-detail-${Date.now()}`,
+          work_item_id: workItemId,
+          sort_order: (workItems[wiIdx].details?.length || 0) + 1,
+        };
+        workItems[wiIdx] = {
+          ...workItems[wiIdx],
+          details: [...(workItems[wiIdx].details || []), newDetail],
+          detail_count: (workItems[wiIdx].detail_count || 0) + 1,
+        };
+      }
+      next[selectedProcessIdx] = { ...next[selectedProcessIdx], workItems };
+      return next;
+    });
+
+    setDetailModalOpen(false);
+    setDirty(true);
+  }, [detailFormData, detailModalPhase, detailModalMode, editingDetail, selectedWorkItemIdByPhase, ensureCustom, selectedProcessIdx]);
+
+  // 상세 삭제
+  const handleDeleteDetail = useCallback(async (detailId: string, phaseKey: string) => {
+    const workItemId = selectedWorkItemIdByPhase[phaseKey];
+    if (!workItemId) return;
+    const ok = await ensureCustom();
+    if (!ok) return;
+
+    setProcesses(prev => {
+      const next = [...prev];
+      const workItems = [...next[selectedProcessIdx].workItems];
+      const wiIdx = workItems.findIndex(wi => wi.id === workItemId);
+      if (wiIdx >= 0) {
+        workItems[wiIdx] = {
+          ...workItems[wiIdx],
+          details: (workItems[wiIdx].details || []).filter(d => d.id !== detailId),
+          detail_count: Math.max(0, (workItems[wiIdx].detail_count || 1) - 1),
+        };
+      }
+      next[selectedProcessIdx] = { ...next[selectedProcessIdx], workItems };
+      return next;
+    });
+    setDirty(true);
+  }, [selectedWorkItemIdByPhase, ensureCustom, selectedProcessIdx]);
+
+  // 저장
+  const handleSave = useCallback(async () => {
+    if (!currentProcess) return;
+    setSaving(true);
+    try {
+      const ok = await ensureCustom();
+      if (!ok) return;
+
+      const res = await saveWIWorkStandard(
+        workInstructionNo,
+        currentProcess.routing_detail_id,
+        currentProcess.workItems
+      );
+      if (res.success) {
+        toast.success("공정작업기준이 저장되었습니다");
+        setDirty(false);
+        await loadData();
+      } else {
+        toast.error("저장에 실패했습니다");
+      }
+    } catch (err) {
+      toast.error("저장 중 오류가 발생했습니다");
+    } finally {
+      setSaving(false);
+    }
+  }, [currentProcess, ensureCustom, workInstructionNo, loadData]);
+
+  // 원본으로 초기화
+  const handleReset = useCallback(async () => {
+    if (!confirm("커스터마이징한 내용을 모두 삭제하고 원본으로 되돌리시겠습니까?")) return;
+    try {
+      const res = await resetWIWorkStandard(workInstructionNo);
+      if (res.success) {
+        toast.success("원본으로 초기화되었습니다");
+        await loadData();
+      }
+    } catch (err) {
+      toast.error("초기화에 실패했습니다");
+    }
+  }, [workInstructionNo, loadData]);
+
+  const updateDetailField = (field: string, value: unknown) => {
+    setDetailFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={v => { if (!v) onClose(); }}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[1200px] h-[85vh] flex flex-col p-0 gap-0">
+        <DialogHeader className="px-6 py-4 border-b shrink-0">
+          <DialogTitle className="text-base flex items-center gap-2">
+            <ClipboardCheck className="w-4 h-4" />
+            공정작업기준 수정 - {itemName}
+            {routingName && <Badge variant="secondary" className="text-xs ml-2">{routingName}</Badge>}
+            {isCustom && <Badge variant="outline" className="text-xs ml-1 border-amber-300 text-amber-700">커스텀</Badge>}
+          </DialogTitle>
+          <DialogDescription className="text-xs">
+            작업지시 [{workInstructionNo}]에 대한 공정작업기준을 수정합니다. 원본에 영향을 주지 않습니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        {loading ? (
+          <div className="flex-1 flex items-center justify-center">
+            <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+          </div>
+        ) : processes.length === 0 ? (
+          <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
+            <AlertCircle className="w-10 h-10 mb-3 opacity-30" />
+            <p className="text-sm">라우팅에 등록된 공정이 없습니다</p>
+          </div>
+        ) : (
+          <div className="flex-1 flex flex-col overflow-hidden">
+            {/* 공정 탭 */}
+            <div className="flex items-center gap-1 px-4 py-2 border-b bg-muted/30 overflow-x-auto shrink-0">
+              {processes.map((proc, idx) => (
+                <Button
+                  key={proc.routing_detail_id}
+                  variant={selectedProcessIdx === idx ? "default" : "ghost"}
+                  size="sm"
+                  className={cn("text-xs shrink-0 h-8", selectedProcessIdx === idx && "shadow-sm")}
+                  onClick={() => {
+                    setSelectedProcessIdx(idx);
+                    setSelectedWorkItemIdByPhase({});
+                  }}
+                >
+                  <span className="mr-1.5 font-mono text-[10px] opacity-70">{proc.seq_no}.</span>
+                  {proc.process_name}
+                  {proc.workItems.length > 0 && (
+                    <Badge variant="secondary" className="ml-1.5 text-[10px] h-4 px-1">{proc.workItems.length}</Badge>
+                  )}
+                </Button>
+              ))}
+            </div>
+
+            {/* Phase별 세로 섹션 */}
+            <div className="flex-1 overflow-y-auto space-y-4 p-4">
+              {PHASES.map(phase => {
+                const phaseItems = workItemsByPhase[phase.key] || [];
+                const selectedWiId = selectedWorkItemIdByPhase[phase.key] || null;
+                const selectedWi = phaseItems.find(wi => wi.id === selectedWiId) || null;
+
+                return (
+                  <div key={phase.key} className="rounded-lg border bg-card">
+                    {/* 섹션 헤더 */}
+                    <div className="flex items-center justify-between border-b px-4 py-2.5">
+                      <div className="flex items-center gap-2">
+                        <h3 className="text-sm font-semibold">{phase.label}</h3>
+                        <Badge variant="secondary" className="h-5 rounded-full px-2 text-[10px]">
+                          {phaseItems.length}개 항목
+                        </Badge>
+                      </div>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-7 gap-1 text-xs"
+                        onClick={() => openAddWorkItem(phase.key)}
+                      >
+                        <Plus className="h-3 w-3" />
+                        작업항목 추가
+                      </Button>
+                    </div>
+
+                    {/* 좌우 분할 */}
+                    <div className="flex min-h-[140px]">
+                      {/* 좌측: 240px 작업항목 카드 */}
+                      <div className="w-[240px] shrink-0 border-r p-2">
+                        {phaseItems.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-6 text-center">
+                            <ClipboardList className="mb-1 h-6 w-6 text-muted-foreground/40" />
+                            <p className="text-[11px] text-muted-foreground">등록된 항목이 없습니다</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-1.5">
+                            {phaseItems.map(item => (
+                              <div
+                                key={item.id}
+                                onClick={() => setSelectedWorkItemIdByPhase(prev => ({ ...prev, [phase.key]: item.id! }))}
+                                className={cn(
+                                  "group flex cursor-pointer items-start gap-2 rounded-lg border p-3 transition-all",
+                                  "hover:border-primary/30 hover:shadow-sm",
+                                  selectedWiId === item.id
+                                    ? "border-primary bg-primary/5 shadow-sm"
+                                    : "border-border bg-card"
+                                )}
+                              >
+                                <GripVertical className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground/50" />
+                                <div className="min-w-0 flex-1">
+                                  <div className="flex items-center gap-2">
+                                    <span className="truncate text-sm font-medium">{item.title}</span>
+                                  </div>
+                                  <div className="mt-1 flex items-center gap-2">
+                                    <Badge variant="secondary" className="h-5 px-1.5 text-[10px] font-normal">
+                                      {item.details?.length || item.detail_count || 0}개
+                                    </Badge>
+                                    <Badge
+                                      variant={item.is_required === "Y" ? "default" : "outline"}
+                                      className="h-5 px-1.5 text-[10px] font-normal"
+                                    >
+                                      {item.is_required === "Y" ? "필수" : "선택"}
+                                    </Badge>
+                                  </div>
+                                </div>
+                                <div className="flex shrink-0 gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+                                  <Button
+                                    variant="ghost" size="icon" className="h-6 w-6"
+                                    onClick={e => { e.stopPropagation(); openEditWorkItem(item); }}
+                                  >
+                                    <Pencil className="h-3 w-3" />
+                                  </Button>
+                                  <Button
+                                    variant="ghost" size="icon" className="h-6 w-6 text-destructive hover:text-destructive"
+                                    onClick={e => { e.stopPropagation(); handleDeleteWorkItem(item.id!, phase.key); }}
+                                  >
+                                    <Trash2 className="h-3 w-3" />
+                                  </Button>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+
+                      {/* 우측: 상세 테이블 */}
+                      <div className="flex-1 flex flex-col">
+                        {!selectedWi ? (
+                          <div className="flex h-full flex-col items-center justify-center text-center">
+                            <p className="text-sm text-muted-foreground">왼쪽에서 항목을 선택하세요</p>
+                          </div>
+                        ) : (
+                          <>
+                            {/* 상세 헤더 */}
+                            <div className="flex items-center justify-between border-b px-4 py-2">
+                              <div className="flex items-center gap-2">
+                                <span className="text-sm font-semibold">{selectedWi.title}</span>
+                                <Badge variant="secondary" className="text-[10px]">
+                                  {selectedWi.details?.length || 0}개
+                                </Badge>
+                              </div>
+                              <Button
+                                variant="outline" size="sm" className="h-7 gap-1 text-xs"
+                                onClick={() => openAddDetail(phase.key)}
+                              >
+                                <Plus className="h-3 w-3" />
+                                상세 추가
+                              </Button>
+                            </div>
+
+                            {/* 테이블 */}
+                            <div className="flex-1 overflow-y-auto">
+                              <table className="w-full text-xs">
+                                <thead className="sticky top-0 bg-muted/50">
+                                  <tr className="border-b">
+                                    <th className="w-12 px-2 py-2 text-center font-medium text-muted-foreground">순서</th>
+                                    <th className="w-20 px-2 py-2 text-left font-medium text-muted-foreground">유형</th>
+                                    <th className="px-2 py-2 text-left font-medium text-muted-foreground">내용</th>
+                                    <th className="w-14 px-2 py-2 text-center font-medium text-muted-foreground">필수</th>
+                                    <th className="w-16 px-2 py-2 text-center font-medium text-muted-foreground">관리</th>
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                  {(selectedWi.details || []).map((detail, idx) => (
+                                    <tr key={detail.id || idx} className="border-b transition-colors hover:bg-muted/30">
+                                      <td className="px-2 py-1.5 text-center text-muted-foreground">{idx + 1}</td>
+                                      <td className="px-2 py-1.5">
+                                        <Badge variant="outline" className="text-[10px] font-normal">
+                                          {getDetailTypeLabel(detail.detail_type || "checklist")}
+                                        </Badge>
+                                      </td>
+                                      <td className="px-2 py-1.5">{getContentSummary(detail)}</td>
+                                      <td className="px-2 py-1.5 text-center">
+                                        <Badge
+                                          variant={detail.is_required === "Y" ? "default" : "secondary"}
+                                          className="text-[10px] font-normal"
+                                        >
+                                          {detail.is_required === "Y" ? "필수" : "선택"}
+                                        </Badge>
+                                      </td>
+                                      <td className="px-2 py-1.5 text-center">
+                                        <div className="flex justify-center gap-0.5">
+                                          <Button
+                                            variant="ghost" size="icon" className="h-6 w-6"
+                                            onClick={() => openEditDetail(detail, phase.key)}
+                                          >
+                                            <Pencil className="h-3 w-3" />
+                                          </Button>
+                                          <Button
+                                            variant="ghost" size="icon" className="h-6 w-6 text-destructive hover:text-destructive"
+                                            onClick={() => handleDeleteDetail(detail.id!, phase.key)}
+                                          >
+                                            <Trash2 className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </td>
+                                    </tr>
+                                  ))}
+                                </tbody>
+                              </table>
+
+                              {(!selectedWi.details || selectedWi.details.length === 0) && (
+                                <div className="flex flex-col items-center justify-center py-8 text-center">
+                                  <p className="text-xs text-muted-foreground">
+                                    상세 항목이 없습니다. &quot;상세 추가&quot; 버튼을 클릭하여 추가하세요.
+                                  </p>
+                                </div>
+                              )}
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        <DialogFooter className="px-6 py-3 border-t shrink-0 flex items-center justify-between">
+          <div>
+            {isCustom && (
+              <Button variant="outline" size="sm" className="text-xs" onClick={handleReset}>
+                <RotateCcw className="w-3.5 h-3.5 mr-1.5" /> 원본으로 초기화
+              </Button>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" onClick={onClose}>닫기</Button>
+            <Button onClick={handleSave} disabled={saving || (!dirty && isCustom)}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
+            </Button>
+          </div>
+        </DialogFooter>
+
+        {/* 작업항목 추가/수정 다이얼로그 */}
+        <Dialog open={addItemOpen} onOpenChange={setAddItemOpen}>
+          <DialogContent className="max-w-[95vw] sm:max-w-[400px]" onClick={e => e.stopPropagation()}>
+            <DialogHeader>
+              <DialogTitle className="text-base">
+                작업항목 {editingWorkItem ? "수정" : "추가"}
+              </DialogTitle>
+              <DialogDescription className="text-xs">
+                {PHASES.find(p => p.key === addItemPhase)?.label} 단계에 작업항목을 {editingWorkItem ? "수정" : "추가"}합니다.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-3">
+              <div>
+                <Label className="text-xs">제목 *</Label>
+                <Input value={addItemTitle} onChange={e => setAddItemTitle(e.target.value)} placeholder="작업항목 제목" className="h-8 text-xs mt-1" />
+              </div>
+              <div className="flex items-center gap-2">
+                <Checkbox checked={addItemRequired === "Y"} onCheckedChange={v => setAddItemRequired(v ? "Y" : "N")} />
+                <Label className="text-xs">필수 항목</Label>
+              </div>
+            </div>
+            <DialogFooter className="gap-2">
+              <Button variant="outline" size="sm" onClick={() => setAddItemOpen(false)}>취소</Button>
+              <Button size="sm" onClick={handleSaveWorkItem}>{editingWorkItem ? "수정" : "추가"}</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* 상세 추가/수정 다이얼로그 (유형별 동적 필드) */}
+        <Dialog open={detailModalOpen} onOpenChange={v => { if (!v) setDetailModalOpen(false); }}>
+          <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
+            <DialogHeader>
+              <DialogTitle className="text-base">
+                상세 항목 {detailModalMode === "add" ? "추가" : "수정"}
+              </DialogTitle>
+              <DialogDescription className="text-xs">
+                상세 항목의 유형을 선택하고 내용을 입력하세요
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4">
+              {/* 유형 선택 */}
+              <div>
+                <Label className="text-xs">유형 <span className="text-destructive">*</span></Label>
+                <Select
+                  value={detailFormData.detail_type || ""}
+                  onValueChange={v => {
+                    setDetailFormData({
+                      detail_type: v,
+                      is_required: detailFormData.is_required || "Y",
+                    });
+                  }}
+                >
+                  <SelectTrigger className="mt-1 h-8 text-xs">
+                    <SelectValue placeholder="선택하세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {DETAIL_TYPES.map(dt => (
+                      <SelectItem key={dt.value} value={dt.value} className="text-xs">{dt.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* 체크리스트 */}
+              {detailFormData.detail_type === "checklist" && (
+                <div>
+                  <Label className="text-xs">체크 내용 <span className="text-destructive">*</span></Label>
+                  <Input
+                    value={detailFormData.content || ""}
+                    onChange={e => updateDetailField("content", e.target.value)}
+                    placeholder="예: 전원 상태 확인"
+                    className="mt-1 h-8 text-xs"
+                  />
+                </div>
+              )}
+
+              {/* 검사항목 */}
+              {detailFormData.detail_type === "inspection" && (
+                <>
+                  <div>
+                    <Label className="text-xs">검사 항목명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="예: 외경 치수"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <Label className="text-xs">검사 방법</Label>
+                      <Input
+                        value={detailFormData.inspection_method || ""}
+                        onChange={e => updateDetailField("inspection_method", e.target.value)}
+                        placeholder="예: 마이크로미터"
+                        className="mt-1 h-8 text-xs"
+                      />
+                    </div>
+                    <div>
+                      <Label className="text-xs">단위</Label>
+                      <Select
+                        value={detailFormData.unit || ""}
+                        onValueChange={v => updateDetailField("unit", v)}
+                      >
+                        <SelectTrigger className="mt-1 h-8 text-xs">
+                          <SelectValue placeholder="단위 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {UNIT_OPTIONS.map(u => (
+                            <SelectItem key={u} value={u}>{u}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="rounded-lg border bg-muted/30 p-3">
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.base_value || ""}
+                          onChange={e => updateDetailField("base_value", e.target.value)}
+                          placeholder="기준값"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                      <span className="text-sm font-semibold text-muted-foreground">&plusmn;</span>
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.tolerance || ""}
+                          onChange={e => updateDetailField("tolerance", e.target.value)}
+                          placeholder="오차범위"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {/* 작업절차 */}
+              {detailFormData.detail_type === "procedure" && (
+                <>
+                  <div>
+                    <Label className="text-xs">작업 내용 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="예: 자재 투입"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs">소요 시간 (분)</Label>
+                    <Input
+                      type="number"
+                      value={detailFormData.duration_minutes ?? ""}
+                      onChange={e => updateDetailField("duration_minutes", e.target.value ? Number(e.target.value) : undefined)}
+                      placeholder="예: 5"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                </>
+              )}
+
+              {/* 직접입력 */}
+              {detailFormData.detail_type === "input" && (
+                <>
+                  <div>
+                    <Label className="text-xs">입력 항목명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="예: 작업자 의견"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs">입력 타입</Label>
+                    <Select
+                      value={detailFormData.input_type || "text"}
+                      onValueChange={v => updateDetailField("input_type", v)}
+                    >
+                      <SelectTrigger className="mt-1 h-8 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {INPUT_TYPES.map(t => (
+                          <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </>
+              )}
+
+              {/* 문서참조 */}
+              {detailFormData.detail_type === "lookup" && (
+                <div className="flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2.5">
+                  <span className="text-xs text-blue-800">
+                    해당 품목에 등록된 문서를 자동으로 불러옵니다.
+                  </span>
+                </div>
+              )}
+
+              {/* 설비점검 */}
+              {detailFormData.detail_type === "equip_inspection" && (
+                <div>
+                  <Label className="text-xs">점검 내용</Label>
+                  <Input
+                    value={detailFormData.content || ""}
+                    onChange={e => updateDetailField("content", e.target.value)}
+                    placeholder="예: 설비 가동 전 안전 점검"
+                    className="mt-1 h-8 text-xs"
+                  />
+                </div>
+              )}
+
+              {/* 설비조건 */}
+              {detailFormData.detail_type === "equip_condition" && (
+                <>
+                  <div>
+                    <Label className="text-xs">조건명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="조건명 (예: 온도, 압력, RPM)"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div className="rounded-lg border bg-muted/30 p-3 space-y-3">
+                    <div className="flex gap-2">
+                      <div className="flex-[0.6]">
+                        <Select
+                          value={detailFormData.condition_unit || ""}
+                          onValueChange={v => updateDetailField("condition_unit", v)}
+                        >
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="단위" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {UNIT_OPTIONS.map(u => (
+                              <SelectItem key={u} value={u}>{u}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.condition_base_value || ""}
+                          onChange={e => updateDetailField("condition_base_value", e.target.value)}
+                          placeholder="기준값"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                      <span className="text-sm font-semibold text-muted-foreground">&plusmn;</span>
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.condition_tolerance || ""}
+                          onChange={e => updateDetailField("condition_tolerance", e.target.value)}
+                          placeholder="오차범위"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {/* 실적등록 */}
+              {detailFormData.detail_type === "production_result" && (
+                <div className="rounded-lg border border-sky-200 bg-sky-50 p-3">
+                  <p className="text-xs font-semibold text-sky-800">작업수량 / 불량수량 / 양품수량</p>
+                  <p className="mt-1 text-[11px] text-muted-foreground">실적 입력 항목이 자동으로 생성됩니다.</p>
+                </div>
+              )}
+
+              {/* 자재투입 */}
+              {detailFormData.detail_type === "material_input" && (
+                <div className="rounded-lg border border-sky-200 bg-sky-50 p-3">
+                  <p className="text-xs font-semibold text-sky-800">BOM 구성 자재 (자동 연동)</p>
+                  <p className="mt-1 text-[11px] text-muted-foreground">품목에 등록된 BOM 구성 자재가 자동으로 적용됩니다.</p>
+                </div>
+              )}
+
+              {/* 필수 여부 (모든 유형 공통) */}
+              {detailFormData.detail_type && (
+                <div>
+                  <Label className="text-xs">필수 여부</Label>
+                  <Select
+                    value={detailFormData.is_required || "Y"}
+                    onValueChange={v => updateDetailField("is_required", v)}
+                  >
+                    <SelectTrigger className="mt-1 h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y">필수</SelectItem>
+                      <SelectItem value="N">선택</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+
+              {/* 비고 (모든 유형 공통) */}
+              {detailFormData.detail_type && (
+                <div>
+                  <Label className="text-xs">비고</Label>
+                  <Input
+                    value={detailFormData.remark || ""}
+                    onChange={e => updateDetailField("remark", e.target.value)}
+                    placeholder="비고 입력"
+                    className="mt-1 h-8 text-xs"
+                  />
+                </div>
+              )}
+            </div>
+
+            <DialogFooter className="gap-2">
+              <Button variant="outline" size="sm" onClick={() => setDetailModalOpen(false)}>취소</Button>
+              <Button size="sm" onClick={handleSaveDetail}>{detailModalMode === "add" ? "추가" : "수정"}</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/production/work-instruction/page.tsx b/frontend/app/(main)/COMPANY_30/production/work-instruction/page.tsx
new file mode 100644
index 00000000..08ace7ec
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/production/work-instruction/page.tsx
@@ -0,0 +1,843 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Plus, Trash2, Save, X, ChevronLeft, ChevronRight, Search, Loader2, Wrench, Pencil, CheckCircle2, ArrowRight, Check, ChevronsUpDown, ClipboardCheck, Inbox, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+// API: /work-instruction/*
+import {
+  getWorkInstructionList, previewWorkInstructionNo, saveWorkInstruction, deleteWorkInstructions,
+  getWIItemSource, getWISalesOrderSource, getWIProductionPlanSource, getEquipmentList, getEmployeeList,
+  getRoutingVersions, RoutingVersionData,
+} from "@/lib/api/workInstruction";
+import { WorkStandardEditModal } from "./WorkStandardEditModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "work_instruction_no", label: "작업지시번호" },
+  { key: "status", label: "상태" },
+  { key: "progress", label: "진행현황" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "qty", label: "수량" },
+  { key: "equipment", label: "설비" },
+  { key: "routing", label: "라우팅" },
+  { key: "work_team", label: "작업조" },
+  { key: "worker", label: "작업자" },
+  { key: "start_date", label: "시작일" },
+  { key: "end_date", label: "완료일" },
+  { key: "actions", label: "작업" },
+];
+
+type SourceType = "production" | "order" | "item";
+
+const STATUS_BADGE: Record<string, { label: string; cls: string }> = {
+  "일반": { label: "일반", cls: "bg-primary/10 text-primary border-primary/20" },
+  "긴급": { label: "긴급", cls: "bg-destructive/10 text-destructive border-destructive/20" },
+};
+const PROGRESS_BADGE: Record<string, { label: string; cls: string }> = {
+  "대기": { label: "대기", cls: "bg-warning/10 text-warning" },
+  "진행중": { label: "진행중", cls: "bg-primary/10 text-primary" },
+  "완료": { label: "완료", cls: "bg-success/10 text-success" },
+};
+
+interface EquipmentOption { id: string; equipment_code: string; equipment_name: string; }
+interface EmployeeOption { user_id: string; user_name: string; dept_name: string | null; }
+interface SelectedItem {
+  itemCode: string; itemName: string; spec: string; qty: number; remark: string;
+  sourceType: SourceType; sourceTable: string; sourceId: string | number;
+  routing?: string; routingOptions?: RoutingVersionData[];
+}
+
+export default function WorkInstructionPage() {
+  const ts = useTableSettings("c16-work-instruction", "work_instruction", GRID_COLUMNS);
+  const [orders, setOrders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [equipmentOptions, setEquipmentOptions] = useState<EquipmentOption[]>([]);
+  const [employeeOptions, setEmployeeOptions] = useState<EmployeeOption[]>([]);
+
+  // 검색
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 1단계: 등록 모달
+  const [isRegModalOpen, setIsRegModalOpen] = useState(false);
+  const [regSourceType, setRegSourceType] = useState<SourceType | "">("");
+  const [regSourceData, setRegSourceData] = useState<any[]>([]);
+  const [regSourceLoading, setRegSourceLoading] = useState(false);
+  const [regKeyword, setRegKeyword] = useState("");
+  const [regCheckedIds, setRegCheckedIds] = useState<Set<string>>(new Set());
+  const [regMergeSameItem, setRegMergeSameItem] = useState(true);
+  const [regPage, setRegPage] = useState(1);
+  const [regPageSize] = useState(20);
+  const [regTotalCount, setRegTotalCount] = useState(0);
+
+  // 2단계: 확인 모달
+  const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
+  const [confirmItems, setConfirmItems] = useState<SelectedItem[]>([]);
+  const [confirmWiNo, setConfirmWiNo] = useState("");
+  const [confirmStatus, setConfirmStatus] = useState("일반");
+  const [confirmStartDate, setConfirmStartDate] = useState("");
+  const [confirmEndDate, setConfirmEndDate] = useState("");
+  const nv = (v: string) => v || "none";
+  const fromNv = (v: string) => v === "none" ? "" : v;
+  const [confirmEquipmentId, setConfirmEquipmentId] = useState("");
+  const [confirmWorkTeam, setConfirmWorkTeam] = useState("");
+  const [confirmWorker, setConfirmWorker] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  // 등록 확인 모달 — 인라인 추가 폼
+  const [confirmAddQty, setConfirmAddQty] = useState("");
+  const [confirmAddWorkerOpen, setConfirmAddWorkerOpen] = useState(false);
+
+  // 수정 모달
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [editOrder, setEditOrder] = useState<any>(null);
+  const [editItems, setEditItems] = useState<SelectedItem[]>([]);
+  const [editStatus, setEditStatus] = useState("일반");
+  const [editStartDate, setEditStartDate] = useState("");
+  const [editEndDate, setEditEndDate] = useState("");
+  const [editEquipmentId, setEditEquipmentId] = useState("");
+  const [editWorkTeam, setEditWorkTeam] = useState("");
+  const [editWorker, setEditWorker] = useState("");
+  const [editRemark, setEditRemark] = useState("");
+  const [editSaving, setEditSaving] = useState(false);
+  const [addQty, setAddQty] = useState("");
+  const [addEquipment, setAddEquipment] = useState("");
+  const [addWorkTeam, setAddWorkTeam] = useState("");
+  const [addWorker, setAddWorker] = useState("");
+  const [confirmWorkerOpen, setConfirmWorkerOpen] = useState(false);
+  const [editWorkerOpen, setEditWorkerOpen] = useState(false);
+  const [addWorkerOpen, setAddWorkerOpen] = useState(false);
+
+  // 라우팅 관련 상태
+  const [confirmRouting, setConfirmRouting] = useState("");
+  const [confirmRoutingOptions, setConfirmRoutingOptions] = useState<RoutingVersionData[]>([]);
+  const [editRouting, setEditRouting] = useState("");
+  const [editRoutingOptions, setEditRoutingOptions] = useState<RoutingVersionData[]>([]);
+
+  // 공정작업기준 모달 상태
+  const [wsModalOpen, setWsModalOpen] = useState(false);
+  const [wsModalWiNo, setWsModalWiNo] = useState("");
+  const [wsModalRoutingId, setWsModalRoutingId] = useState("");
+  const [wsModalRoutingName, setWsModalRoutingName] = useState("");
+  const [wsModalItemName, setWsModalItemName] = useState("");
+  const [wsModalItemCode, setWsModalItemCode] = useState("");
+
+  useEffect(() => {
+    getEquipmentList().then(r => { if (r.success) setEquipmentOptions(r.data || []); });
+    getEmployeeList().then(r => { if (r.success) setEmployeeOptions(r.data || []); });
+  }, []);
+
+  const fetchOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: any = {};
+      for (const f of searchFilters) {
+        if (f.columnName === "start_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split("|");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status" && f.value) {
+          params.status = f.value;
+        } else if (f.columnName === "progress" && f.value) {
+          params.progressStatus = f.value;
+        } else if (f.columnName === "work_instruction_no" && f.value) {
+          params.keyword = f.value;
+        } else if (f.columnName === "item_name" && f.value) {
+          params.keyword = f.value;
+        }
+      }
+      const r = await getWorkInstructionList(params);
+      if (r.success) setOrders(r.data || []);
+    } catch {} finally { setLoading(false); }
+  }, [searchFilters]);
+
+  useEffect(() => { fetchOrders(); }, [fetchOrders]);
+
+  // ─── 1단계 등록 ───
+  const openRegModal = () => {
+    setRegSourceType("production"); setRegSourceData([]); setRegKeyword(""); setRegCheckedIds(new Set());
+    setRegPage(1); setRegTotalCount(0); setRegMergeSameItem(true); setIsRegModalOpen(true);
+  };
+
+  const fetchRegSource = useCallback(async (pageOverride?: number) => {
+    if (!regSourceType) return;
+    setRegSourceLoading(true);
+    try {
+      const p = pageOverride ?? regPage;
+      const params: any = { page: p, pageSize: regPageSize };
+      if (regKeyword.trim()) params.keyword = regKeyword.trim();
+      let r;
+      switch (regSourceType) {
+        case "production": r = await getWIProductionPlanSource(params); break;
+        case "order": r = await getWISalesOrderSource(params); break;
+        case "item": r = await getWIItemSource(params); break;
+      }
+      if (r?.success) { setRegSourceData(r.data || []); setRegTotalCount(r.totalCount || 0); }
+    } catch {} finally { setRegSourceLoading(false); }
+  }, [regSourceType, regKeyword, regPage, regPageSize]);
+
+  useEffect(() => { if (isRegModalOpen && regSourceType) { setRegPage(1); setRegCheckedIds(new Set()); fetchRegSource(1); } }, [regSourceType]);
+
+  const getRegId = (item: any) => regSourceType === "item" ? (item.item_code || item.id) : String(item.id);
+  const toggleRegItem = (id: string) => { setRegCheckedIds(prev => { const n = new Set(prev); if (n.has(id)) n.delete(id); else n.add(id); return n; }); };
+  const toggleRegAll = () => { if (regCheckedIds.size === regSourceData.length) setRegCheckedIds(new Set()); else setRegCheckedIds(new Set(regSourceData.map(getRegId))); };
+
+  const applyRegistration = () => {
+    if (regCheckedIds.size === 0) { alert("품목을 선택해주세요."); return; }
+    const items: SelectedItem[] = [];
+    for (const item of regSourceData) {
+      if (!regCheckedIds.has(getRegId(item))) continue;
+      if (regSourceType === "item") items.push({ itemCode: item.item_code, itemName: item.item_name || "", spec: item.spec || "", qty: 1, remark: "", sourceType: "item", sourceTable: "item_info", sourceId: item.item_code });
+      else if (regSourceType === "order") items.push({ itemCode: item.item_code || "", itemName: item.item_name || "", spec: item.spec || "", qty: Number(item.qty || 1), remark: "", sourceType: "order", sourceTable: "sales_order_detail", sourceId: item.id });
+      else items.push({ itemCode: item.item_code || "", itemName: item.item_name || "", spec: "", qty: Number(item.plan_qty || 1), remark: "", sourceType: "production", sourceTable: "production_plan_mng", sourceId: item.id });
+    }
+
+    // 동일품목 합산
+    if (regMergeSameItem) {
+      const merged = new Map<string, SelectedItem>();
+      for (const it of items) {
+        const key = it.itemCode;
+        if (merged.has(key)) { merged.get(key)!.qty += it.qty; }
+        else { merged.set(key, { ...it }); }
+      }
+      setConfirmItems(Array.from(merged.values()));
+    } else {
+      setConfirmItems(items);
+    }
+
+    setConfirmWiNo("불러오는 중...");
+    setConfirmStatus("일반"); setConfirmStartDate(new Date().toISOString().split("T")[0]);
+    setConfirmEndDate(""); setConfirmEquipmentId(""); setConfirmWorkTeam(""); setConfirmWorker("");
+    setConfirmRouting(""); setConfirmRoutingOptions([]);
+    previewWorkInstructionNo().then(r => { if (r.success) setConfirmWiNo(r.instructionNo); else setConfirmWiNo("(자동생성)"); }).catch(() => setConfirmWiNo("(자동생성)"));
+
+    // 품목별 라우팅 옵션 로드
+    const finalItems = regMergeSameItem ? Array.from(new Map(items.map(i => [i.itemCode, i])).values()) : items;
+    const uniqueItemCodes = [...new Set(finalItems.map(i => i.itemCode).filter(Boolean))];
+    for (const ic of uniqueItemCodes) {
+      getRoutingVersions("__new__", ic).then(r => {
+        if (r.success && r.data) {
+          setConfirmItems(prev => prev.map(it => {
+            if (it.itemCode !== ic) return it;
+            const defaultRv = r.data.find(rv => rv.is_default);
+            return { ...it, routingOptions: r.data, routing: defaultRv?.id || "" };
+          }));
+        }
+      }).catch(() => {});
+    }
+
+    setIsRegModalOpen(false); setIsConfirmModalOpen(true);
+  };
+
+  // 등록 확인 모달 — 인라인 품목 추가
+  const addConfirmItem = () => {
+    if (!confirmAddQty || Number(confirmAddQty) <= 0) { alert("수량을 입력해주세요."); return; }
+    const firstItem = confirmItems[0];
+    setConfirmItems(prev => [...prev, {
+      itemCode: firstItem?.itemCode || "", itemName: firstItem?.itemName || "", spec: firstItem?.spec || "",
+      qty: Number(confirmAddQty), remark: "",
+      sourceType: "item" as SourceType, sourceTable: "item_info", sourceId: firstItem?.itemCode || "",
+    }]);
+    setConfirmAddQty("");
+  };
+
+  // ─── 2단계 최종 적용 ───
+  const finalizeRegistration = async () => {
+    if (confirmItems.length === 0) { alert("품목이 없습니다."); return; }
+    setSaving(true);
+    try {
+      const payload = {
+        status: confirmStatus, startDate: confirmStartDate, endDate: confirmEndDate,
+        equipmentId: confirmEquipmentId, workTeam: confirmWorkTeam, worker: confirmWorker,
+        routing: confirmRouting || null,
+        items: confirmItems.map(i => ({ itemNumber: i.itemCode, itemCode: i.itemCode, qty: String(i.qty), remark: i.remark, sourceTable: i.sourceTable, sourceId: String(i.sourceId), partCode: i.itemCode, routing: i.routing || null })),
+      };
+      const r = await saveWorkInstruction(payload);
+      if (r.success) { setIsConfirmModalOpen(false); fetchOrders(); alert("작업지시가 등록되었습니다."); }
+      else alert(r.message || "저장 실패");
+    } catch (e: any) { alert(e.message || "저장 실패"); } finally { setSaving(false); }
+  };
+
+  // ─── 수정 모달 ───
+  const openEditModal = (order: any) => {
+    const wiNo = order.work_instruction_no;
+    const relatedDetails = orders.filter(o => o.work_instruction_no === wiNo);
+    setEditOrder(order); setEditStatus(order.status || "일반");
+    setEditStartDate(order.start_date || ""); setEditEndDate(order.end_date || "");
+    setEditEquipmentId(order.equipment_id || ""); setEditWorkTeam(order.work_team || "");
+    setEditWorker(order.worker || ""); setEditRemark(order.wi_remark || "");
+    const items: SelectedItem[] = relatedDetails.map((d: any) => ({
+      itemCode: d.item_number || d.part_code || "", itemName: d.item_name || "", spec: d.item_spec || "",
+      qty: Number(d.detail_qty || 0), remark: d.detail_remark || "",
+      sourceType: (d.source_table === "sales_order_detail" ? "order" : d.source_table === "production_plan_mng" ? "production" : "item") as SourceType,
+      sourceTable: d.source_table || "item_info", sourceId: d.source_id || "",
+      routing: d.detail_routing_version_id || order.routing_version_id || "",
+      routingOptions: [],
+    }));
+    setEditItems(items);
+    setAddQty(""); setAddEquipment(""); setAddWorkTeam(""); setAddWorker("");
+    setEditRouting(order.routing_version_id || "");
+    setEditRoutingOptions([]);
+
+    // 품목별 라우팅 옵션 로드
+    const uniqueItemCodes = [...new Set(items.map(i => i.itemCode).filter(Boolean))];
+    for (const ic of uniqueItemCodes) {
+      getRoutingVersions(wiNo, ic).then(r => {
+        if (r.success && r.data) {
+          setEditItems(prev => prev.map(it => {
+            if (it.itemCode !== ic) return it;
+            const opts = r.data;
+            const hasRouting = it.routing && opts.some(rv => rv.id === it.routing);
+            return {
+              ...it,
+              routingOptions: opts,
+              routing: hasRouting ? it.routing : (opts.find(rv => rv.is_default)?.id || it.routing || ""),
+            };
+          }));
+        }
+      }).catch(() => {});
+    }
+
+    setIsEditModalOpen(true);
+  };
+
+  const addEditItem = () => {
+    if (!addQty || Number(addQty) <= 0) { alert("수량을 입력해주세요."); return; }
+    setEditItems(prev => [...prev, {
+      itemCode: editOrder?.item_number || "", itemName: editOrder?.item_name || "", spec: editOrder?.item_spec || "",
+      qty: Number(addQty), remark: "", sourceType: "item", sourceTable: "item_info", sourceId: editOrder?.item_number || "",
+    }]);
+    setAddQty("");
+  };
+
+  const saveEdit = async () => {
+    if (!editOrder || editItems.length === 0) { alert("품목이 없습니다."); return; }
+    setEditSaving(true);
+    try {
+      const payload = {
+        id: editOrder.wi_id, status: editStatus, startDate: editStartDate, endDate: editEndDate,
+        equipmentId: editEquipmentId, workTeam: editWorkTeam, worker: editWorker, remark: editRemark,
+        routing: editRouting || null,
+        items: editItems.map(i => ({ itemNumber: i.itemCode, itemCode: i.itemCode, qty: String(i.qty), remark: i.remark, sourceTable: i.sourceTable, sourceId: String(i.sourceId), partCode: i.itemCode, routing: i.routing || null })),
+      };
+      const r = await saveWorkInstruction(payload);
+      if (r.success) { setIsEditModalOpen(false); fetchOrders(); alert("수정되었습니다."); }
+      else alert(r.message || "저장 실패");
+    } catch (e: any) { alert(e.message || "저장 실패"); } finally { setEditSaving(false); }
+  };
+
+  const handleDelete = async (wiId: string) => {
+    if (!confirm("이 작업지시를 삭제하시겠습니까?")) return;
+    const r = await deleteWorkInstructions([wiId]);
+    if (r.success) { fetchOrders(); } else alert(r.message || "삭제 실패");
+  };
+
+  const getProgress = (o: any) => {
+    const t = Number(o.total_qty || 0), c = Number(o.completed_qty || 0);
+    return t === 0 ? 0 : Math.min(100, Math.round((c / t) * 100));
+  };
+  const getProgressLabel = (o: any) => { const p = getProgress(o); if (o.progress_status) return o.progress_status; if (p >= 100) return "완료"; if (p > 0) return "진행중"; return "대기"; };
+  const totalRegPages = Math.max(1, Math.ceil(regTotalCount / regPageSize));
+
+  const getDisplayNo = (o: any) => {
+    const cnt = Number(o.detail_count || 1);
+    const seq = Number(o.detail_seq || 1);
+    if (cnt <= 1) return o.work_instruction_no || "-";
+    return `${o.work_instruction_no}-${String(seq).padStart(2, "0")}`;
+  };
+
+  const openWorkStandardModal = (wiNo: string, routingVersionId: string, routingName: string, itemName: string, itemCode: string) => {
+    if (!routingVersionId) { alert("라우팅이 선택되지 않았습니다."); return; }
+    setWsModalWiNo(wiNo);
+    setWsModalRoutingId(routingVersionId);
+    setWsModalRoutingName(routingName);
+    setWsModalItemName(itemName);
+    setWsModalItemCode(itemCode);
+    setWsModalOpen(true);
+  };
+
+  const getWorkerName = (userId: string) => {
+    if (!userId) return "-";
+    const emp = employeeOptions.find(e => e.user_id === userId);
+    return emp ? emp.user_name : userId;
+  };
+
+  const WorkerCombobox = ({ value, onChange, open, onOpenChange, className, triggerClassName }: {
+    value: string; onChange: (v: string) => void; open: boolean; onOpenChange: (v: boolean) => void;
+    className?: string; triggerClassName?: string;
+  }) => (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open}
+          className={cn("w-full justify-between font-normal", triggerClassName || "h-9 text-sm")}>
+          {value ? (employeeOptions.find(e => e.user_id === value)?.user_name || value) : "작업자 선택"}
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="이름 검색..." className="text-xs" />
+          <CommandList>
+            <CommandEmpty className="text-xs py-4 text-center">사원을 찾을 수 없습니다</CommandEmpty>
+            <CommandGroup>
+              <CommandItem value="__none__" onSelect={() => { onChange(""); onOpenChange(false); }} className="text-xs">
+                <Check className={cn("mr-2 h-3.5 w-3.5", !value ? "opacity-100" : "opacity-0")} />
+                선택 안 함
+              </CommandItem>
+              {employeeOptions.map(emp => (
+                <CommandItem key={emp.user_id} value={`${emp.user_name} ${emp.user_id}`}
+                  onSelect={() => { onChange(emp.user_id); onOpenChange(false); }} className="text-xs">
+                  <Check className={cn("mr-2 h-3.5 w-3.5", value === emp.user_id ? "opacity-100" : "opacity-0")} />
+                  {emp.user_name}{emp.dept_name ? ` (${emp.dept_name})` : ""}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-4rem)] p-3 gap-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName="work_instruction"
+        filterId="c16-work-instruction"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={new Set(orders.map(o => o.work_instruction_no)).size}
+      />
+
+      {/* 메인 테이블 */}
+      <div className="flex-1 overflow-hidden border bg-card rounded-lg flex flex-col">
+        <div className="flex flex-col h-full">
+          {/* 패널 헤더 */}
+          <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/30 shrink-0">
+            <div className="flex items-center gap-2">
+              <Wrench className="w-4 h-4 text-muted-foreground" />
+              <span className="text-[13px] font-bold text-foreground">작업지시 목록</span>
+              <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                {new Set(orders.map(o => o.work_instruction_no)).size}건 ({orders.length}행)
+              </span>
+              {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button size="sm" onClick={openRegModal}>
+                <Plus className="w-3.5 h-3.5" /> 작업지시 등록
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                <Settings2 className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          {/* 테이블 */}
+          <EDataTable
+            columns={[
+              { key: "work_instruction_no", label: "작업지시번호", width: "w-[150px]", render: (_v, row) => <span className="font-mono text-[13px] font-medium">{getDisplayNo(row)}</span> },
+              { key: "status", label: "상태", width: "w-[70px]", align: "center", render: (v) => {
+                const sBadge = STATUS_BADGE[v] || STATUS_BADGE["일반"];
+                return <Badge variant="outline" className={cn("text-[10px]", sBadge.cls)}>{sBadge.label}</Badge>;
+              }},
+              { key: "progress", label: "진행현황", width: "w-[100px]", align: "center", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return <span className="text-[10px] text-muted-foreground">↑</span>;
+                const pct = getProgress(row);
+                const pLabel = getProgressLabel(row);
+                const pBadge = PROGRESS_BADGE[pLabel] || PROGRESS_BADGE["대기"];
+                return (
+                  <div className="flex flex-col items-center gap-1">
+                    <Badge variant="secondary" className={cn("text-[10px]", pBadge.cls)}>{pBadge.label}</Badge>
+                    <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
+                      <div className={cn("h-full rounded-full transition-all", pct >= 100 ? "bg-success" : pct > 0 ? "bg-primary" : "bg-muted-foreground/30")} style={{ width: `${pct}%` }} />
+                    </div>
+                    <span className="text-[10px] text-muted-foreground">{pct}%</span>
+                  </div>
+                );
+              }},
+              { key: "item_name", label: "품목명", render: (_v, row) => row.item_name || row.item_number || "-" },
+              { key: "item_spec", label: "규격", width: "w-[100px]" },
+              { key: "detail_qty", label: "수량", width: "w-[80px]", align: "right", formatNumber: true },
+              { key: "equipment_name", label: "설비", width: "w-[120px]", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "routing", label: "라우팅", width: "w-[120px]", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return "";
+                if (row.routing_version_id) {
+                  return (
+                    <button
+                      className="text-primary underline underline-offset-2 hover:text-primary/80 cursor-pointer text-xs text-left"
+                      onClick={e => {
+                        e.stopPropagation();
+                        openWorkStandardModal(row.work_instruction_no, row.routing_version_id, row.routing_name || "", row.item_name || row.item_number || "", row.item_number || "");
+                      }}
+                    >
+                      {row.routing_name || "라우팅"} <ClipboardCheck className="w-3 h-3 inline ml-0.5" />
+                    </button>
+                  );
+                }
+                return <span className="text-muted-foreground">-</span>;
+              }},
+              { key: "work_team", label: "작업조", width: "w-[80px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "worker", label: "작업자", width: "w-[100px]", render: (v, row) => Number(row.detail_seq) === 1 ? getWorkerName(v) : "" },
+              { key: "start_date", label: "시작일", width: "w-[100px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "end_date", label: "완료일", width: "w-[100px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "actions", label: "작업", width: "w-[150px]", align: "center", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return null;
+                return (
+                  <div className="flex items-center justify-center gap-1">
+                    <Button variant="ghost" size="sm" className="h-7 text-xs px-2" onClick={() => openEditModal(row)}><Pencil className="w-3 h-3" /> 수정</Button>
+                    <Button variant="ghost" size="sm" className="h-7 text-xs px-2 text-destructive hover:text-destructive" onClick={() => handleDelete(row.wi_id)}><Trash2 className="w-3 h-3" /></Button>
+                  </div>
+                );
+              }},
+            ] as EDataTableColumn[]}
+            data={ts.groupData(orders)}
+            rowKey={(row) => `${row.wi_id}-${row.detail_id}`}
+            loading={loading}
+            emptyMessage="등록된 작업지시가 없어요"
+            showPagination
+            draggableColumns
+            columnOrderKey="c16-work-instruction"
+          />
+        </div>
+      </div>
+
+      {/* ── 1단계: 등록 모달 ── */}
+      <Dialog open={isRegModalOpen} onOpenChange={setIsRegModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[1200px] h-[80vh] flex flex-col p-0 gap-0">
+          <DialogHeader className="px-6 py-4 border-b shrink-0">
+            <DialogTitle className="text-base flex items-center gap-2"><Plus className="w-4 h-4" /> 작업지시 등록</DialogTitle>
+            <DialogDescription className="text-xs text-muted-foreground">근거를 선택하고 품목을 체크한 후 "작업지시 적용" 버튼을 눌러주세요.</DialogDescription>
+          </DialogHeader>
+
+          <div className="px-6 py-3 border-b bg-muted/30 flex items-center gap-3 flex-wrap shrink-0">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground whitespace-nowrap">근거</span>
+            <Select value={regSourceType} onValueChange={v => setRegSourceType(v as SourceType)}>
+              <SelectTrigger className="h-9 w-[160px]"><SelectValue placeholder="선택" /></SelectTrigger>
+              <SelectContent><SelectItem value="production">생산계획</SelectItem><SelectItem value="order">수주</SelectItem><SelectItem value="item">품목정보</SelectItem></SelectContent>
+            </Select>
+            {regSourceType && (<>
+              <Input placeholder="검색..." value={regKeyword} onChange={e => setRegKeyword(e.target.value)} className="h-9 w-[220px]"
+                onKeyDown={e => { if (e.key === "Enter") { setRegPage(1); fetchRegSource(1); } }} />
+              <Button size="sm" className="h-9" onClick={() => { setRegPage(1); fetchRegSource(1); }} disabled={regSourceLoading}>
+                {regSourceLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}<span className="ml-1.5">조회</span>
+              </Button>
+            </>)}
+            <div className="flex-1" />
+            <label className="flex items-center gap-1.5 cursor-pointer select-none">
+              <Checkbox checked={regMergeSameItem} onCheckedChange={v => setRegMergeSameItem(!!v)} />
+              <span className="text-xs font-semibold text-foreground">동일품목 합산</span>
+            </label>
+          </div>
+
+          <div className="flex-1 overflow-auto px-6 py-4">
+            {!regSourceType ? (
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-12 h-12 flex items-center justify-center mb-4">
+                  <Search className="w-6 h-6 text-muted-foreground/40" />
+                </div>
+                <p className="text-sm font-medium text-muted-foreground mb-1">근거를 선택해주세요</p>
+                <p className="text-xs text-muted-foreground/60">근거를 선택하고 검색하면 품목이 표시돼요</p>
+              </div>
+            ) : regSourceLoading ? (
+              <div className="flex items-center justify-center h-full"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
+            ) : regSourceData.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-12 h-12 flex items-center justify-center mb-4">
+                  <Inbox className="w-6 h-6 text-muted-foreground/40" />
+                </div>
+                <p className="text-sm font-medium text-muted-foreground mb-1">검색 결과가 없어요</p>
+                <p className="text-xs text-muted-foreground/60">다른 키워드로 검색해주세요</p>
+              </div>
+            ) : (
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground"><Checkbox checked={regSourceData.length > 0 && regCheckedIds.size === regSourceData.length} onCheckedChange={toggleRegAll} /></TableHead>
+                    {regSourceType === "item" && <><TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead><TableHead>품목명</TableHead><TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead></>}
+                    {regSourceType === "order" && <><TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수주번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[100px]">규격</TableHead><TableHead className="w-[80px] text-right">수량</TableHead><TableHead className="w-[100px]">납기일</TableHead></>}
+                    {regSourceType === "production" && <><TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[80px] text-right">계획수량</TableHead><TableHead className="w-[90px]">시작일</TableHead><TableHead className="w-[90px]">완료일</TableHead><TableHead className="w-[100px]">설비</TableHead></>}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {regSourceData.map((item, idx) => {
+                    const id = getRegId(item);
+                    const checked = regCheckedIds.has(id);
+                    return (
+                      <TableRow key={`${regSourceType}-${id}-${idx}`} className={cn("cursor-pointer hover:bg-muted/30", checked && "bg-primary/5")} onClick={() => toggleRegItem(id)}>
+                        <TableCell className="text-center" onClick={e => e.stopPropagation()}><Checkbox checked={checked} onCheckedChange={() => toggleRegItem(id)} /></TableCell>
+                        {regSourceType === "item" && <><TableCell className="text-[13px] font-medium">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-[13px]">{item.spec || "-"}</TableCell></>}
+                        {regSourceType === "order" && <><TableCell className="text-[13px]">{item.order_no}</TableCell><TableCell className="text-[13px]">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-[13px]">{item.spec || "-"}</TableCell><TableCell className="text-right text-[13px]">{Number(item.qty || 0).toLocaleString()}</TableCell><TableCell className="text-[13px]">{item.due_date || "-"}</TableCell></>}
+                        {regSourceType === "production" && <><TableCell className="text-[13px]">{item.plan_no}</TableCell><TableCell className="text-[13px]">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-right text-[13px]">{Number(item.plan_qty || 0).toLocaleString()}</TableCell><TableCell className="text-[13px]">{item.start_date ? String(item.start_date).split("T")[0] : "-"}</TableCell><TableCell className="text-[13px]">{item.end_date ? String(item.end_date).split("T")[0] : "-"}</TableCell><TableCell className="text-[13px]">{item.equipment_name || "-"}</TableCell></>}
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            )}
+          </div>
+
+          {regTotalCount > 0 && (
+            <div className="px-6 py-2 border-t bg-muted/10 flex items-center justify-between shrink-0">
+              <span className="text-xs text-muted-foreground">총 {regTotalCount}건 (선택: {regCheckedIds.size}건)</span>
+              <div className="flex items-center gap-1">
+                <Button variant="ghost" size="icon" className="h-7 w-7" disabled={regPage <= 1} onClick={() => { const p = regPage - 1; setRegPage(p); fetchRegSource(p); }}><ChevronLeft className="w-3.5 h-3.5" /></Button>
+                <span className="text-xs font-medium px-2">{regPage} / {totalRegPages}</span>
+                <Button variant="ghost" size="icon" className="h-7 w-7" disabled={regPage >= totalRegPages} onClick={() => { const p = regPage + 1; setRegPage(p); fetchRegSource(p); }}><ChevronRight className="w-3.5 h-3.5" /></Button>
+              </div>
+            </div>
+          )}
+
+          <DialogFooter className="px-6 py-3 border-t shrink-0">
+            <Button variant="outline" onClick={() => setIsRegModalOpen(false)}>취소</Button>
+            <Button onClick={applyRegistration} disabled={regCheckedIds.size === 0}><ArrowRight className="w-4 h-4 mr-1.5" /> 작업지시 적용</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 2단계: 확인 모달 ── */}
+      <Dialog open={isConfirmModalOpen} onOpenChange={setIsConfirmModalOpen}>
+        <DialogContent className="max-w-[1100px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>작업지시 적용 확인</DialogTitle>
+            <DialogDescription>기본 정보를 입력하고 '최종 적용' 버튼을 눌러주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+          <div className="space-y-5">
+            <div className="bg-muted/30 border rounded-lg p-5">
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground">작업지시 기본 정보</h4>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-3">
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업지시번호</Label><Input value={confirmWiNo} readOnly className="h-9 bg-muted cursor-not-allowed font-mono" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+                  <Select value={confirmStatus} onValueChange={setConfirmStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select>
+                </div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">시작일</Label><Input type="date" value={confirmStartDate} onChange={(e) => setConfirmStartDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">완료예정일</Label><Input type="date" value={confirmEndDate} onChange={(e) => setConfirmEndDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">설비</Label>
+                  <Select value={nv(confirmEquipmentId)} onValueChange={v => setConfirmEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비 선택" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select>
+                </div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업조</Label>
+                  <Select value={nv(confirmWorkTeam)} onValueChange={v => setConfirmWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select>
+                </div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업자</Label>
+                  <WorkerCombobox value={confirmWorker} onChange={setConfirmWorker} open={confirmWorkerOpen} onOpenChange={setConfirmWorkerOpen} />
+                </div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">비고</Label><Input className="h-9" placeholder="비고를 입력해주세요" /></div>
+              </div>
+            </div>
+            <div className="border rounded-lg p-5">
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground mb-3">품목 목록</h4>
+              <div className="overflow-auto">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">순번</TableHead>
+                      <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                      <TableHead className="w-[180px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">라우팅</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                      <TableHead className="w-[40px]" />
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {confirmItems.map((item, idx) => (
+                      <TableRow key={idx}>
+                        <TableCell className="text-[13px] text-center">{idx + 1}</TableCell>
+                        <TableCell className="text-[13px] font-medium">{item.itemCode}</TableCell>
+                        <TableCell className="text-sm">{item.itemName || item.itemCode}</TableCell>
+                        <TableCell className="text-[13px]">{item.spec || "-"}</TableCell>
+                        <TableCell><Input type="number" className="h-7 text-[13px] w-20" value={item.qty} onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
+                        <TableCell>
+                          <Select
+                            value={nv(item.routing || "")}
+                            onValueChange={v => {
+                              const val = fromNv(v);
+                              setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, routing: val } : it));
+                            }}
+                          >
+                            <SelectTrigger className="h-7 text-xs"><SelectValue placeholder="라우팅" /></SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="none">선택 안 함</SelectItem>
+                              {(item.routingOptions || []).map((rv: RoutingVersionData) => (
+                                <SelectItem key={rv.id} value={rv.id}>
+                                  {rv.version_name || "라우팅"} {rv.is_default ? "(기본)" : ""} - {rv.processes.length}공정
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </TableCell>
+                        <TableCell><Input className="h-7 text-[13px]" value={item.remark} placeholder="비고" onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
+                        <TableCell><Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setConfirmItems(prev => prev.filter((_, i) => i !== idx))}><X className="w-3 h-3 text-destructive" /></Button></TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setIsConfirmModalOpen(false); setIsRegModalOpen(true); }}><ChevronLeft className="w-4 h-4 mr-1" /> 이전</Button>
+            <Button variant="outline" onClick={() => setIsConfirmModalOpen(false)}>취소</Button>
+            <Button onClick={finalizeRegistration} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <CheckCircle2 className="w-4 h-4 mr-1.5" />} 최종 적용</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 수정 모달 ── */}
+      <Dialog open={isEditModalOpen} onOpenChange={(v) => { if (!v && wsModalOpen) return; setIsEditModalOpen(v); }}>
+        <DialogContent className="max-w-[1100px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{`작업지시 관리 - ${editOrder?.work_instruction_no || ""}`}</DialogTitle>
+            <DialogDescription>품목을 추가/삭제하고 정보를 수정해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+          <div className="space-y-5">
+            <div className="bg-muted/30 border rounded-lg p-5">
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground">기본 정보</h4>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-3">
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">상태</Label><Select value={editStatus} onValueChange={setEditStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">시작일</Label><Input type="date" value={editStartDate} onChange={(e) => setEditStartDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">완료예정일</Label><Input type="date" value={editEndDate} onChange={(e) => setEditEndDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">설비</Label><Select value={nv(editEquipmentId)} onValueChange={v => setEditEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비 선택" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업조</Label><Select value={nv(editWorkTeam)} onValueChange={v => setEditWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업자</Label>
+                  <WorkerCombobox value={editWorker} onChange={setEditWorker} open={editWorkerOpen} onOpenChange={setEditWorkerOpen} />
+                </div>
+                <div className="space-y-1 col-span-2"><Label className="text-[11px] font-semibold text-muted-foreground">비고</Label><Input value={editRemark} onChange={e => setEditRemark(e.target.value)} className="h-9" placeholder="비고를 입력해주세요" /></div>
+              </div>
+            </div>
+
+            {/* 품목 테이블 — 라우팅/공정작업기준을 품목별로 표시 */}
+            <div className="border rounded-lg overflow-hidden">
+              <div className="flex items-center justify-between px-4 py-2.5 bg-muted/30 border-b">
+                <span className="text-[13px] font-bold text-foreground">작업지시 항목</span>
+                <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{editItems.length}건</span>
+              </div>
+              <div className="overflow-auto">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">순번</TableHead>
+                      <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                      <TableHead className="w-[180px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">라우팅</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공정작업기준</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                      <TableHead className="w-[40px]" />
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {editItems.length === 0 ? (
+                      <TableRow><TableCell colSpan={9} className="text-center py-8 text-sm text-muted-foreground">등록된 품목이 없어요</TableCell></TableRow>
+                    ) : editItems.map((item, idx) => (
+                      <TableRow key={idx}>
+                        <TableCell className="text-[13px] text-center">{idx + 1}</TableCell>
+                        <TableCell className="text-[13px] font-medium">{item.itemCode}</TableCell>
+                        <TableCell className="text-[13px] max-w-[150px] truncate" title={item.itemName}>{item.itemName || "-"}</TableCell>
+                        <TableCell className="text-[13px] truncate" title={item.spec}>{item.spec || "-"}</TableCell>
+                        <TableCell className="text-right"><Input type="number" className="h-7 text-[13px] w-20 ml-auto" value={item.qty} onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
+                        <TableCell>
+                          <Select
+                            value={nv(item.routing || "")}
+                            onValueChange={v => {
+                              const val = fromNv(v);
+                              setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, routing: val } : it));
+                            }}
+                          >
+                            <SelectTrigger className="h-7 text-xs"><SelectValue placeholder="라우팅" /></SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="none">선택 안 함</SelectItem>
+                              {(item.routingOptions || []).map((rv: RoutingVersionData) => (
+                                <SelectItem key={rv.id} value={rv.id}>
+                                  {rv.version_name || "라우팅"} {rv.is_default ? "(기본)" : ""} - {rv.processes.length}공정
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 text-xs"
+                            disabled={!item.routing}
+                            onClick={() => {
+                              if (!editOrder || !item.routing) return;
+                              const rv = (item.routingOptions || []).find((r: RoutingVersionData) => r.id === item.routing);
+                              openWorkStandardModal(
+                                editOrder.work_instruction_no,
+                                item.routing,
+                                rv?.version_name || "",
+                                item.itemName || item.itemCode || "",
+                                item.itemCode || ""
+                              );
+                            }}
+                          >
+                            <ClipboardCheck className="w-3 h-3 mr-1" /> 수정
+                          </Button>
+                        </TableCell>
+                        <TableCell><Input className="h-7 text-[13px]" value={item.remark} placeholder="비고" onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
+                        <TableCell><Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setEditItems(prev => prev.filter((_, i) => i !== idx))}><X className="w-3 h-3 text-destructive" /></Button></TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              {editItems.length > 0 && (
+                <div className="px-4 py-2.5 border-t bg-muted/30 flex items-center justify-between">
+                  <span className="text-[13px] font-bold text-foreground">총 수량</span>
+                  <span className="text-lg font-bold font-mono text-primary">{editItems.reduce((s, i) => s + i.qty, 0).toLocaleString()} EA</span>
+                </div>
+              )}
+            </div>
+          </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEditModalOpen(false)}>취소</Button>
+            <Button onClick={saveEdit} disabled={editSaving}>{editSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 공정작업기준 수정 모달 */}
+      <WorkStandardEditModal
+        open={wsModalOpen}
+        onClose={() => setWsModalOpen(false)}
+        workInstructionNo={wsModalWiNo}
+        routingVersionId={wsModalRoutingId}
+        routingName={wsModalRoutingName}
+        itemName={wsModalItemName}
+        itemCode={wsModalItemCode}
+      />
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/purchase/order/page.tsx b/frontend/app/(main)/COMPANY_30/purchase/order/page.tsx
new file mode 100644
index 00000000..1bc3bc88
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/purchase/order/page.tsx
@@ -0,0 +1,1287 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  ClipboardList, Pencil, Search, X, Package, ChevronDown,
+  ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const MASTER_TABLE = "purchase_order_mng";
+const DETAIL_TABLE = "purchase_detail";
+
+const formatNumber = (val: string) => {
+  const num = val.replace(/[^\d.-]/g, "");
+  if (!num) return "";
+  const parts = num.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+const parseNumber = (val: string) => val.replace(/,/g, "");
+
+const STATUS_OPTIONS = [
+  { code: "작성중", label: "작성중" },
+  { code: "발주확정", label: "발주확정" },
+  { code: "입고완료", label: "입고완료" },
+  { code: "취소", label: "취소" },
+];
+
+const STATUS_BADGE_CLASS: Record<string, string> = {
+  "작성중": "bg-warning/10 text-warning border-warning/20",
+  "발주확정": "bg-primary/10 text-primary border-primary/20",
+  "입고완료": "bg-success/10 text-success border-success/20",
+  "취소": "bg-destructive/10 text-destructive border-destructive/20",
+};
+
+const EXCEL_COLUMNS = [
+  { key: "purchase_no", label: "발주번호" },
+  { key: "order_date", label: "발주일" },
+  { key: "supplier_name", label: "공급업체명" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "order_qty", label: "발주수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "amount", label: "금액" },
+  { key: "due_date", label: "납기일" },
+];
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "purchase_no", label: "발주번호" },
+  { key: "order_date", label: "발주일" },
+  { key: "supplier_name", label: "공급업체" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "spec", label: "규격" },
+  { key: "order_qty", label: "발주수량" },
+  { key: "received_qty", label: "입고수량" },
+  { key: "remain_qty", label: "잔량" },
+  { key: "unit_price", label: "단가" },
+  { key: "amount", label: "금액" },
+  { key: "due_date", label: "납기일" },
+  { key: "status", label: "상태" },
+  { key: "memo", label: "메모" },
+];
+
+export default function PurchaseOrderPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const [orders, setOrders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [masterForm, setMasterForm] = useState<Record<string, any>>({});
+  const [detailRows, setDetailRows] = useState<any[]>([]);
+
+  // 품목 선택 모달
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSelectedMap, setItemSelectedMap] = useState<Map<string, any>>(new Map());
+  const [itemSearchDivision, setItemSearchDivision] = useState("all");
+  const [itemPage, setItemPage] = useState(1);
+  const [itemPageSize, setItemPageSize] = useState(20);
+  const [itemTotalPages, setItemTotalPages] = useState(0);
+  const [itemTotal, setItemTotal] = useState(0);
+  const [itemPageInput, setItemPageInput] = useState("1");
+
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-purchase-order", DETAIL_TABLE, GRID_COLUMNS_CONFIG);
+
+  const isReadOnly = masterForm.status === "입고완료" || masterForm.status === "취소";
+
+  // 카테고리 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      const catColumns = ["input_mode", "price_mode"];
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      const dedup = (items: { code: string; label: string }[]) => {
+        const seen = new Set<string>();
+        return items.filter((item) => {
+          const key = item.label.replace(/\s/g, "");
+          if (seen.has(key)) return false;
+          seen.add(key);
+          return true;
+        });
+      };
+      await Promise.all(
+        catColumns.map(async (col) => {
+          try {
+            const res = await apiClient.get(`/table-categories/${MASTER_TABLE}/${col}/values`);
+            if (res.data?.success && res.data.data?.length > 0) {
+              optMap[col] = dedup(flatten(res.data.data));
+            }
+          } catch { /* skip */ }
+        })
+      );
+      try {
+        const suppRes = await apiClient.post(`/table-management/tables/supplier_mng/data`, {
+          page: 1, size: 500, autoFilter: true,
+        });
+        const supps = suppRes.data?.data?.data || suppRes.data?.data?.rows || [];
+        optMap["supplier_code"] = supps.map((s: any) => ({
+          code: s.supplier_code,
+          label: `${s.supplier_name} (${s.supplier_code})`,
+        }));
+      } catch { /* skip */ }
+      try {
+        const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
+          page: 1, size: 500, autoFilter: true,
+        });
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        optMap["manager"] = users.map((u: any) => ({
+          code: u.user_id || u.id,
+          label: `${u.user_name || u.name || u.user_id}${u.position_name ? ` (${u.position_name})` : ""}`,
+        }));
+      } catch { /* skip */ }
+      for (const col of ["unit", "material", "division"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/item_info/${col}/values`);
+          if (res.data?.success && res.data.data?.length > 0) {
+            optMap[`item_${col}`] = flatten(res.data.data);
+          }
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+      const divs = optMap["item_division"] || [];
+      const purchaseDiv = divs.find((o) => o.label === "구매관리")
+        || divs.find((o) => o.label === "원자재")
+        || divs.find((o) => o.label === "부자재");
+      if (purchaseDiv) setItemSearchDivision(purchaseDiv.code);
+    };
+    loadCategories();
+  }, []);
+
+  // 마스터 테이블 컬럼 (supplier_name, order_date 등)
+  const MASTER_COLUMNS = new Set(["supplier_name", "supplier_code", "order_date", "status"]);
+
+  // 데이터 조회
+  const fetchOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      // searchFilters를 detail / master로 분리
+      const detailFilters: any[] = [];
+      const masterExtraFilters: any[] = [];
+      for (const f of searchFilters) {
+        const filter = { columnName: f.columnName, operator: f.operator, value: f.value };
+        if (MASTER_COLUMNS.has(f.columnName)) {
+          masterExtraFilters.push(filter);
+        } else {
+          detailFilters.push(filter);
+        }
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: detailFilters.length > 0 ? { enabled: true, filters: detailFilters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "purchase_no", order: "desc" },
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+
+      const purchaseNos = [...new Set(rows.map((r: any) => r.purchase_no).filter(Boolean))];
+      let masterMap: Record<string, any> = {};
+      if (purchaseNos.length > 0) {
+        try {
+          const masterFilters: any[] = [{ columnName: "purchase_no", operator: "in", value: purchaseNos }, ...masterExtraFilters];
+          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: purchaseNos.length + 10,
+            dataFilter: { enabled: true, filters: masterFilters },
+            autoFilter: true,
+          });
+          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+          for (const m of masters) masterMap[m.purchase_no] = m;
+        } catch { /* skip */ }
+      }
+
+      const itemCodes = [...new Set(rows.map((r: any) => r.item_code).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemCodes.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemCodes.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+            autoFilter: true,
+          });
+          const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+          for (const item of items) itemMap[item.item_number] = item;
+        } catch { /* skip */ }
+      }
+
+      const resolveLabel = (key: string, code: string) => {
+        if (!code) return "";
+        const opts = categoryOptions[key];
+        if (!opts) return code;
+        return opts.find((o) => o.code === code)?.label || code;
+      };
+
+      const hasMasterFilters = masterExtraFilters.length > 0;
+      const data = rows
+        .filter((row: any) => {
+          const master = masterMap[row.purchase_no];
+          if (hasMasterFilters && !master) return false;
+          return true;
+        })
+        .map((row: any) => {
+          const item = itemMap[row.item_code];
+          const master = masterMap[row.purchase_no];
+          const rawUnit = row.unit || item?.unit || "";
+          return {
+            ...row,
+            item_name: row.item_name || item?.item_name || "",
+            spec: row.spec || item?.size || "",
+            unit: resolveLabel("item_unit", rawUnit) || rawUnit,
+            status: master?.status || "",
+            supplier_name: master?.supplier_name || "",
+            order_date: master?.order_date || "",
+            memo: row.memo || master?.memo || "",
+          };
+        });
+
+      setOrders(data);
+      setTotalCount(data.length);
+    } catch {
+      toast.error("발주 목록을 불러오는데 실패했어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters, categoryOptions]);
+
+  useEffect(() => { fetchOrders(); }, [fetchOrders]);
+
+  // purchase_no 기준 그룹핑
+  const orderGroups = useMemo(() => {
+    const map: Record<string, { master: any; details: any[] }> = {};
+    for (const row of orders) {
+      const key = row.purchase_no || row.id;
+      if (!map[key]) {
+        map[key] = {
+          master: { purchase_no: row.purchase_no, order_date: row.order_date, supplier_name: row.supplier_name, status: row.status, memo: row.memo },
+          details: [],
+        };
+      }
+      map[key].details.push(row);
+    }
+    return map;
+  }, [orders]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    const found = categoryOptions[col]?.find((o) => o.code === code);
+    return found?.label || code;
+  };
+
+  // 등록 모달 열기
+  const openRegisterModal = () => {
+    const defaultInputMode = categoryOptions["input_mode"]?.[0]?.code || "";
+    const defaultPriceMode = categoryOptions["price_mode"]?.[0]?.code || "";
+    setMasterForm({
+      input_mode: defaultInputMode,
+      price_mode: defaultPriceMode,
+      manager: user?.userId || "",
+      order_date: new Date().toISOString().split("T")[0],
+      status: "작성중",
+    });
+    setDetailRows([]);
+    setIsEditMode(false);
+    setIsModalOpen(true);
+  };
+
+  // 수정 모달 열기
+  const openEditModal = async (purchaseNo: string) => {
+    try {
+      const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+        autoFilter: true,
+      });
+      const masterData = (masterRes.data?.data?.data || masterRes.data?.data?.rows || [])[0];
+
+      const detailRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+        autoFilter: true,
+      });
+      const detailData = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+
+      setMasterForm(masterData || {});
+      setDetailRows(detailData.map((d: any, i: number) => ({ ...d, _id: d.id || `row_${i}` })));
+      setIsEditMode(true);
+      setIsModalOpen(true);
+    } catch {
+      toast.error("발주 정보를 불러오는데 실패했어요.");
+    }
+  };
+
+  // 삭제 (다중 선택)
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.error("삭제할 발주를 선택해주세요."); return; }
+    const selectedItems = orders.filter((o) => checkedIds.includes(o.id));
+    const purchaseNos = [...new Set(selectedItems.map((o) => o.purchase_no))];
+    const ok = await confirm(`${checkedIds.length}건의 발주 데이터를 삭제하시겠어요?`, {
+      description: "삭제된 데이터는 복구할 수 없어요.",
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+        data: checkedIds.map((id) => ({ id })),
+      });
+      for (const purchaseNo of purchaseNos) {
+        const remaining = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+          autoFilter: true,
+        });
+        const remainRows = remaining.data?.data?.data || remaining.data?.data?.rows || [];
+        if (remainRows.length === 0) {
+          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: 1,
+            dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+            autoFilter: true,
+          });
+          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+          if (masters.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
+              data: masters.map((m: any) => ({ id: m.id })),
+            });
+          }
+        }
+      }
+      toast.success("삭제되었어요.");
+      setCheckedIds([]);
+      fetchOrders();
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // 저장 (마스터 + 디테일)
+  const handleSave = async () => {
+    if (detailRows.length === 0) {
+      toast.error("품목을 1개 이상 추가해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, created_by, updated_by, ...masterFields } = masterForm;
+
+      if (isEditMode && id) {
+        await apiClient.put(`/table-management/tables/${MASTER_TABLE}/edit`, {
+          originalData: { id },
+          updatedData: masterFields,
+        });
+        const existingDetails = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 100,
+          dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: masterForm.purchase_no }] },
+          autoFilter: true,
+        });
+        const existings = existingDetails.data?.data?.data || existingDetails.data?.data?.rows || [];
+        if (existings.length > 0) {
+          await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+            data: existings.map((d: any) => ({ id: d.id })),
+          });
+        }
+        for (const [idx, row] of detailRows.entries()) {
+          const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
+          await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            ...detailFields,
+            purchase_no: masterForm.purchase_no,
+            seq_no: idx + 1,
+          });
+        }
+      } else {
+        const { purchase_no: _pn, ...fieldsWithoutPurchaseNo } = masterFields;
+        const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/add`, { id: crypto.randomUUID(), ...fieldsWithoutPurchaseNo });
+        const createdData = masterRes.data?.data;
+        let purchaseNo = createdData?.purchase_no;
+        if (!purchaseNo) {
+          const queryRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: 1,
+            sort: { columnName: "created_date", order: "desc" },
+            autoFilter: true,
+          });
+          const records = queryRes.data?.data?.data || queryRes.data?.data?.rows || [];
+          purchaseNo = records[0]?.purchase_no;
+        }
+        if (!purchaseNo) {
+          toast.error("발주번호를 가져올 수 없어요. 다시 시도해주세요.");
+          return;
+        }
+        for (const [idx, row] of detailRows.entries()) {
+          const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
+          await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            ...detailFields,
+            purchase_no: purchaseNo,
+            seq_no: idx + 1,
+          });
+        }
+      }
+
+      toast.success(isEditMode ? "수정되었어요." : "등록되었어요.");
+      setIsModalOpen(false);
+      fetchOrders();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 검색
+  const searchItems = async (page?: number, size?: number) => {
+    const p = page ?? itemPage;
+    const s = size ?? itemPageSize;
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      }
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      let allRows = resData?.data || resData?.rows || [];
+      if (itemSearchDivision !== "all") {
+        const divLabel = categoryOptions["item_division"]?.find((o) => o.code === itemSearchDivision)?.label || "";
+        allRows = allRows.filter((item: any) => {
+          const div = item.division || "";
+          return div.includes(itemSearchDivision) || (divLabel && div.includes(divLabel));
+        });
+      }
+      const total = allRows.length;
+      const start = (p - 1) * s;
+      setItemSearchResults(allRows.slice(start, start + s));
+      setItemTotal(total);
+      setItemTotalPages(Math.max(1, Math.ceil(total / s)));
+    } catch { /* skip */ } finally {
+      setItemSearchLoading(false);
+    }
+  };
+
+  const handleItemPageChange = (newPage: number) => {
+    if (newPage < 1 || newPage > itemTotalPages) return;
+    setItemPage(newPage);
+    setItemPageInput(String(newPage));
+    searchItems(newPage);
+  };
+
+  const commitItemPageInput = () => {
+    const parsed = parseInt(itemPageInput, 10);
+    if (isNaN(parsed) || itemPageInput.trim() === "") {
+      setItemPageInput(String(itemPage));
+      return;
+    }
+    const clamped = Math.max(1, Math.min(parsed, itemTotalPages || 1));
+    if (clamped !== itemPage) handleItemPageChange(clamped);
+    setItemPageInput(String(clamped));
+  };
+
+  const triggerNewSearch = () => {
+    setItemPage(1);
+    setItemPageInput("1");
+    searchItems(1);
+  };
+
+  const addSelectedItemsToDetail = async () => {
+    const selected = Array.from(itemSelectedMap.values());
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+
+    const supplierCode = masterForm.supplier_code;
+    const isStandard = masterForm.price_mode === "standard";
+    const isSupplier = masterForm.price_mode === "supplier";
+    let supplierPriceMap: Record<string, string> = {};
+    if (isSupplier && supplierCode) {
+      try {
+        const itemIds = selected.map((item) => item.item_number || item.id);
+        const res = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: {
+            enabled: true,
+            filters: [
+              { columnName: "supplier_id", operator: "equals", value: supplierCode },
+              { columnName: "item_id", operator: "in", value: itemIds },
+            ],
+          },
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) supplierPriceMap[p.item_id] = String(price);
+        }
+      } catch { /* skip */ }
+    }
+
+    const newRows = selected.map((item) => {
+      const itemCode = item.item_number || item.id;
+      let unitPrice = "";
+      if (isStandard) {
+        unitPrice = item.purchase_price || item.standard_price || "";
+      } else if (isSupplier && supplierCode) {
+        unitPrice = supplierPriceMap[itemCode] || "";
+      }
+      return {
+        _id: `new_${Date.now()}_${Math.random()}`,
+        item_code: itemCode,
+        item_name: item.item_name,
+        spec: item.size || "",
+        material: getCategoryLabel("item_material", item.material) || item.material || "",
+        unit: getCategoryLabel("item_unit", item.unit) || item.unit || "",
+        order_qty: "",
+        received_qty: "0",
+        remain_qty: "0",
+        unit_price: unitPrice,
+        amount: "",
+        due_date: "",
+        memo: "",
+      };
+    });
+
+    setDetailRows((prev) => [...prev, ...newRows]);
+    toast.success(`${selected.length}개 품목이 추가되었어요.`);
+    setItemSelectedMap(new Map());
+    setItemSelectOpen(false);
+  };
+
+  // 단가 재계산: 단가방식/공급업체 변경 시 기존 품목 단가 갱신
+  const recalcPrices = useCallback(async (priceMode: string, supplierCode: string) => {
+    if (detailRows.length === 0) return;
+    const isStandard = priceMode === "standard";
+    const isSupplier = priceMode === "supplier";
+
+    if (isStandard) {
+      const itemCodes = detailRows.map((r) => r.item_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+          autoFilter: true,
+        });
+        const items = res.data?.data?.data || res.data?.data?.rows || [];
+        const priceMap: Record<string, string> = {};
+        for (const item of items) {
+          const price = item.purchase_price || item.standard_price || "";
+          if (price) priceMap[item.item_number] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.item_code] || "";
+          const qty = parseFloat(row.order_qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    } else if (isSupplier && supplierCode) {
+      const itemCodes = detailRows.map((r) => r.item_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_id", operator: "equals", value: supplierCode },
+            { columnName: "item_id", operator: "in", value: itemCodes },
+          ]},
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        const priceMap: Record<string, string> = {};
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) priceMap[p.item_id] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.item_code] || "";
+          const qty = parseFloat(row.order_qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    }
+  }, [detailRows]);
+
+  const updateDetailRow = (idx: number, field: string, value: string) => {
+    setDetailRows((prev) => {
+      const next = [...prev];
+      next[idx] = { ...next[idx], [field]: value };
+      if (field === "order_qty" || field === "unit_price") {
+        const qty = parseFloat(field === "order_qty" ? value : next[idx].order_qty) || 0;
+        const price = parseFloat(field === "unit_price" ? value : next[idx].unit_price) || 0;
+        next[idx].amount = (qty * price).toString();
+        const received = parseFloat(next[idx].received_qty) || 0;
+        next[idx].remain_qty = (qty - received).toString();
+      }
+      return next;
+    });
+  };
+
+  const removeDetailRow = (idx: number) => {
+    setDetailRows((prev) => prev.filter((_, i) => i !== idx));
+  };
+
+  const handleExcelDownload = async () => {
+    if (orders.length === 0) { toast.error("다운로드할 데이터가 없어요."); return; }
+    const data = orders.map((o) => {
+      const row: Record<string, any> = {};
+      for (const col of EXCEL_COLUMNS) row[col.label] = o[col.key] || "";
+      return row;
+    });
+    await exportToExcel(data, "발주관리.xlsx", "발주목록");
+    toast.success("다운로드 완료");
+  };
+
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={DETAIL_TABLE}
+        filterId="c16-purchase-order"
+        onFilterChange={setSearchFilters}
+        dataCount={totalCount}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between flex-wrap gap-3">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-bold">발주 목록</h2>
+          <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+            {totalCount}건
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4 mr-1" /> 발주 등록
+          </Button>
+          <Button variant="outline" size="sm" disabled={checkedIds.length !== 1} onClick={() => {
+            const item = orders.find((o) => o.id === checkedIds[0]);
+            if (item) openEditModal(item.purchase_no);
+          }}>
+            <Pencil className="w-4 h-4 mr-1" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1" /> 삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4 mr-1" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4 mr-1" /> 엑셀
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+            <Settings2 className="w-4 h-4 mr-1" /> 설정
+          </Button>
+        </div>
+      </div>
+
+      {/* 데이터 테이블 — 아코디언 그룹핑 */}
+      <div className="flex-1 overflow-auto border rounded-lg bg-card">
+        {loading ? (
+          <div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
+        ) : Object.keys(orderGroups).length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+            <Package className="h-10 w-10 mb-2 opacity-30" />
+            <p className="text-sm">등록된 발주가 없어요</p>
+          </div>
+        ) : (
+          (() => {
+            const MASTER_KEYS = new Set(["purchase_no", "order_date", "supplier_name", "status", "memo"]);
+            const numCols = new Set(["order_qty", "received_qty", "remain_qty", "unit_price", "amount"]);
+
+            // ts.visibleColumns 순서를 따르되, 마스터/디테일 컬럼을 분리
+            // 고정 컬럼(품목수)은 마스터 선행 컬럼 뒤에 배치
+            const leadingMaster: typeof ts.visibleColumns = [];
+            const detailCols: typeof ts.visibleColumns = [];
+            const trailingMaster: typeof ts.visibleColumns = [];
+            let passedFirstDetail = false;
+            for (const col of ts.visibleColumns) {
+              if (MASTER_KEYS.has(col.key)) {
+                if (passedFirstDetail) trailingMaster.push(col);
+                else leadingMaster.push(col);
+              } else {
+                passedFirstDetail = true;
+                detailCols.push(col);
+              }
+            }
+
+            const renderDetailCell = (row: any, key: string) => {
+              const val = row[key];
+              if (key === "status") return val ? <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[val] || "")}>{val}</span> : "-";
+              if (numCols.has(key)) return <span className="font-mono">{val ? Number(val).toLocaleString() : "0"}</span>;
+              return val || "-";
+            };
+
+            const renderMasterHead = (col: { key: string; label: string }) => (
+              <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground", col.key === "status" && "text-center")}>
+                {col.label}
+              </TableHead>
+            );
+
+            const renderMasterCell = (col: { key: string }, m: any, purchaseNo: string) => {
+              if (col.key === "purchase_no") return <TableCell key={col.key} className="text-sm font-semibold text-primary">{purchaseNo}</TableCell>;
+              if (col.key === "order_date") return <TableCell key={col.key} className="text-sm">{m.order_date ? new Date(m.order_date).toLocaleDateString("ko-KR") : "-"}</TableCell>;
+              if (col.key === "supplier_name") return <TableCell key={col.key} className="text-sm">{m.supplier_name || "-"}</TableCell>;
+              if (col.key === "status") return <TableCell key={col.key} className="text-center">{m.status && <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[m.status] || "")}>{m.status}</span>}</TableCell>;
+              if (col.key === "memo") return <TableCell key={col.key} className="text-sm text-muted-foreground max-w-[120px] truncate">{m.memo || ""}</TableCell>;
+              return <TableCell key={col.key} />;
+            };
+
+            return (
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-8" />
+                    <TableHead className="w-10" />
+                    {leadingMaster.map(renderMasterHead)}
+                    <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground text-center">품목수</TableHead>
+                    {detailCols.map(col => (
+                      <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground", numCols.has(col.key) && "text-right")}>
+                        {col.label}{col.key === "order_qty" || col.key === "amount" ? " 합계" : ""}
+                      </TableHead>
+                    ))}
+                    {trailingMaster.map(renderMasterHead)}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {Object.entries(orderGroups).map(([purchaseNo, group]) => {
+                    const isExpanded = expandedOrders.has(purchaseNo);
+                    const detailIds = group.details.map(d => d.id);
+                    const allChecked = detailIds.length > 0 && detailIds.every(id => checkedIds.includes(id));
+                    const someChecked = detailIds.some(id => checkedIds.includes(id));
+                    const m = group.master;
+                    const totalQty = group.details.reduce((s, d) => s + (Number(d.order_qty) || 0), 0);
+                    const totalAmt = group.details.reduce((s, d) => s + (Number(d.amount) || 0), 0);
+                    return (
+                      <React.Fragment key={purchaseNo}>
+                        <TableRow
+                          style={{ borderTop: "2px solid hsl(var(--border))" }}
+                          className={cn("cursor-pointer border-l-[3px] border-l-transparent font-semibold", allChecked && "border-l-primary bg-primary/5")}
+                          onClick={() => setExpandedOrders(prev => { const next = new Set(prev); if (next.has(purchaseNo)) next.delete(purchaseNo); else next.add(purchaseNo); return next; })}
+                          onDoubleClick={() => openEditModal(purchaseNo)}
+                        >
+                          <TableCell className="text-center p-2">
+                            <ChevronDown className={cn("w-4 h-4 transition-transform text-muted-foreground", !isExpanded && "-rotate-90")} />
+                          </TableCell>
+                          <TableCell className="text-center p-2" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => allChecked ? prev.filter(id => !detailIds.includes(id)) : [...new Set([...prev, ...detailIds])]); }}>
+                            <Checkbox checked={allChecked} data-state={someChecked && !allChecked ? "indeterminate" : undefined} onCheckedChange={() => {}} />
+                          </TableCell>
+                          {leadingMaster.map(col => renderMasterCell(col, m, purchaseNo))}
+                          <TableCell className="text-sm text-center"><Badge variant="secondary" className="text-[10px]">{group.details.length}건</Badge></TableCell>
+                          {detailCols.map(col => (
+                            <TableCell key={col.key} className={cn("text-sm", numCols.has(col.key) && "text-right font-mono")}>
+                              {col.key === "order_qty" ? totalQty.toLocaleString()
+                                : col.key === "amount" ? totalAmt.toLocaleString()
+                                : ""}
+                            </TableCell>
+                          ))}
+                          {trailingMaster.map(col => renderMasterCell(col, m, purchaseNo))}
+                        </TableRow>
+                        {isExpanded && group.details.map((row) => (
+                          <TableRow key={row.id} className="bg-muted/30 text-xs">
+                            <TableCell />
+                            <TableCell className="text-center" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => prev.includes(row.id) ? prev.filter(id => id !== row.id) : [...prev, row.id]); }}>
+                              <Checkbox checked={checkedIds.includes(row.id)} onCheckedChange={() => {}} />
+                            </TableCell>
+                            {leadingMaster.map(col => <TableCell key={col.key} />)}
+                            <TableCell />
+                            {detailCols.map(col => (
+                              <TableCell key={col.key} className={cn(numCols.has(col.key) && "text-right")}>
+                                {renderDetailCell(row, col.key)}
+                              </TableCell>
+                            ))}
+                            {trailingMaster.map(col => <TableCell key={col.key} />)}
+                          </TableRow>
+                        ))}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            );
+          })()
+        )}
+        <div className="px-4 py-2 border-t text-xs text-muted-foreground">
+          전체 {Object.keys(orderGroups).length}건 (발주 기준) / {orders.length}건 (품목 기준)
+        </div>
+      </div>
+
+      {/* 발주 등록/수정 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent
+          className="max-w-[95vw] w-[1200px]"
+          style={{ maxHeight: "90vh", display: "flex", flexDirection: "column" }}
+        >
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? (isReadOnly ? "발주 상세" : "발주 수정") : "발주 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? (isReadOnly ? "발주 상세 정보를 확인해요." : "발주 정보를 수정해요.") : "새로운 발주를 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-y-auto">
+            <div className="space-y-6 py-2 pr-1">
+              {/* 기본 정보 */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  기본 정보
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <div className="grid grid-cols-4 gap-3.5">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">발주번호</Label>
+                    <Input value={masterForm.purchase_no || ""} placeholder={isEditMode ? "" : "자동생성"} className="h-9" disabled />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">발주일 <span className="text-destructive">*</span></Label>
+                    <Input
+                      type="date"
+                      value={masterForm.order_date || ""}
+                      onChange={(e) => setMasterForm((p) => ({ ...p, order_date: e.target.value }))}
+                      className="h-9"
+                      disabled={isReadOnly}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">상태</Label>
+                    {isReadOnly ? (
+                      <div className="flex items-center h-9">
+                        <span className={cn("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold", STATUS_BADGE_CLASS[masterForm.status] || "")}>
+                          {masterForm.status}
+                        </span>
+                      </div>
+                    ) : (
+                      <Select value={masterForm.status || "작성중"} onValueChange={(v) => setMasterForm((p) => ({ ...p, status: v }))}>
+                        <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          {STATUS_OPTIONS.map((s) => (
+                            <SelectItem key={s.code} value={s.code}>{s.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">입력방식</Label>
+                    <Select value={masterForm.input_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, input_mode: v }))} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["input_mode"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">단가방식</Label>
+                    <Select value={masterForm.price_mode || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, price_mode: v })); recalcPrices(v, masterForm.supplier_code || ""); }} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["price_mode"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">담당자</Label>
+                    <Select value={masterForm.manager || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager: v }))} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="담당자 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["manager"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+
+              {/* 공급업체 / 담당자 — 입력방식이 '공급업체 우선'일 때만 표시 */}
+              {masterForm.input_mode === "supplierFirst" && (
+              <div className="p-4 bg-muted/50 border border-dashed border-border rounded-lg space-y-3">
+                <div className="text-xs font-semibold text-primary flex items-center gap-1.5">
+                  <ClipboardList className="w-3.5 h-3.5" /> 공급업체 정보
+                </div>
+                <div className="grid grid-cols-2 gap-3.5">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">공급업체</Label>
+                    <Select
+                      value={masterForm.supplier_code || ""}
+                      onValueChange={(v) => {
+                        const supp = categoryOptions["supplier_code"]?.find((o) => o.code === v);
+                        const name = supp?.label.replace(` (${v})`, "") || "";
+                        setMasterForm((p) => ({ ...p, supplier_code: v, supplier_name: name }));
+                        recalcPrices(masterForm.price_mode || "", v);
+                      }}
+                      disabled={isReadOnly}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="공급업체 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["supplier_code"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+              )}
+
+              {/* 품목 내역 */}
+              <div className="space-y-2.5">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                    <Package className="w-4 h-4" /> 품목 내역
+                    <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                      {detailRows.length}
+                    </span>
+                  </div>
+                  {!isReadOnly && (
+                    <Button size="sm" onClick={() => {
+                      setItemSelectedMap(new Map());
+                      setItemPage(1);
+                      setItemPageInput("1");
+                      setItemSearchKeyword("");
+                      setItemSelectOpen(true);
+                      searchItems(1);
+                    }}>
+                      <Plus className="w-4 h-4 mr-1" /> 품목 추가
+                    </Button>
+                  )}
+                </div>
+                {detailRows.length === 0 ? (
+                  <div className="flex flex-col items-center gap-2 py-8 border border-dashed border-border rounded-lg text-muted-foreground">
+                    <Package className="w-8 h-8 opacity-40" />
+                    <span className="text-sm">아직 추가된 품목이 없어요. 위 버튼으로 품목을 추가해주세요.</span>
+                  </div>
+                ) : (
+                  <div className="border rounded-lg overflow-x-auto">
+                    <Table className="table-fixed">
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          {!isReadOnly && <TableHead className="w-[40px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground"></TableHead>}
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                          {masterForm.input_mode === "itemFirst" && (
+                            <TableHead className="w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체</TableHead>
+                          )}
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">잔량</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
+                          <TableHead className="w-[160px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {detailRows.map((row, idx) => (
+                          <TableRow key={row._id || idx}>
+                            {!isReadOnly && (
+                              <TableCell>
+                                <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-muted-foreground/50 hover:text-destructive hover:bg-destructive/5" onClick={() => removeDetailRow(idx)}>
+                                  <X className="w-3.5 h-3.5" />
+                                </Button>
+                              </TableCell>
+                            )}
+                            <TableCell className="text-[13px] font-mono max-w-[120px]"><span className="block truncate" title={row.item_code}>{row.item_code}</span></TableCell>
+                            <TableCell className="text-[13px] max-w-[120px]"><span className="block truncate" title={row.item_name}>{row.item_name}</span></TableCell>
+                            {masterForm.input_mode === "itemFirst" && (
+                              <TableCell>
+                                {isReadOnly ? (
+                                  <span className="text-xs">{(categoryOptions["supplier_code"] || []).find(o => o.code === row.supplier_code)?.label || row.supplier_code || "-"}</span>
+                                ) : (
+                                  <Select value={row.supplier_code || ""} onValueChange={(v) => {
+                                    const supp = categoryOptions["supplier_code"]?.find(o => o.code === v);
+                                    const name = supp?.label.replace(` (${v})`, "") || "";
+                                    updateDetailRow(idx, "supplier_code", v);
+                                    updateDetailRow(idx, "supplier_name", name);
+                                  }}>
+                                    <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="공급업체" /></SelectTrigger>
+                                    <SelectContent>
+                                      {(categoryOptions["supplier_code"] || []).map(o => (
+                                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                )}
+                              </TableCell>
+                            )}
+                            <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                            <TableCell className="text-[13px]">{row.unit}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs text-right font-mono block">{row.order_qty ? Number(row.order_qty).toLocaleString() : ""}</span>
+                              ) : (
+                                <Input value={formatNumber(row.order_qty || "")} onChange={(e) => updateDetailRow(idx, "order_qty", parseNumber(e.target.value))} className="h-8 text-xs text-right font-mono" />
+                              )}
+                            </TableCell>
+                            <TableCell className="text-[13px] text-right font-mono text-muted-foreground">{row.received_qty ? Number(row.received_qty).toLocaleString() : "0"}</TableCell>
+                            <TableCell className="text-[13px] text-right font-mono">{row.remain_qty ? Number(row.remain_qty).toLocaleString() : "0"}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs text-right font-mono block">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</span>
+                              ) : (
+                                <Input value={formatNumber(row.unit_price || "")} onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))} className="h-8 text-xs text-right font-mono" />
+                              )}
+                            </TableCell>
+                            <TableCell className="text-[13px] text-right font-mono font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs">{row.due_date}</span>
+                              ) : (
+                                <Input type="date" value={row.due_date || ""} onChange={(e) => updateDetailRow(idx, "due_date", e.target.value)} className="h-8 text-xs" />
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs">{row.memo}</span>
+                              ) : (
+                                <Input value={row.memo || ""} onChange={(e) => updateDetailRow(idx, "memo", e.target.value)} className="h-8 text-xs" />
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                )}
+              </div>
+
+              {/* 비고 */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  비고
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <Input
+                  value={masterForm.memo || ""}
+                  onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
+                  placeholder="특이사항이나 메모를 입력해주세요"
+                  className="h-9"
+                  disabled={isReadOnly}
+                />
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter className="border-t pt-3 mt-2">
+            {isReadOnly ? (
+              <Button variant="outline" onClick={() => setIsModalOpen(false)}>닫기</Button>
+            ) : (
+              <>
+                <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+                <Button onClick={handleSave} disabled={saving}>
+                  {saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />} 저장
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+
+          {/* 품목 선택 모달 (중첩) */}
+          <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+            <DialogContent className="max-w-3xl" style={{ maxHeight: "70vh", display: "flex", flexDirection: "column" }} onInteractOutside={(e) => e.preventDefault()}>
+              <DialogHeader>
+                <DialogTitle>품목 선택</DialogTitle>
+                <DialogDescription>발주에 추가할 품목을 선택 후 하단 버튼을 눌러주세요.</DialogDescription>
+              </DialogHeader>
+              <div className="flex gap-2">
+                <Input
+                  placeholder="품명/품목코드 검색"
+                  value={itemSearchKeyword}
+                  onChange={(e) => setItemSearchKeyword(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && triggerNewSearch()}
+                  className="h-9 flex-1"
+                />
+                <Select value={itemSearchDivision} onValueChange={setItemSearchDivision}>
+                  <SelectTrigger className="h-9 w-[130px]"><SelectValue placeholder="관리품목" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">전체</SelectItem>
+                    {(categoryOptions["item_division"] || []).map((o) => (
+                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button size="sm" onClick={triggerNewSearch} disabled={itemSearchLoading} className="h-9">
+                  {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" />조회</>}
+                </Button>
+              </div>
+              <div className="flex-1 overflow-auto border rounded-lg">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[40px] text-center">
+                        <input type="checkbox"
+                          checked={itemSearchResults.length > 0 && itemSearchResults.every((i) => itemSelectedMap.has(i.id))}
+                          onChange={(e) => {
+                            setItemSelectedMap((prev) => {
+                              const next = new Map(prev);
+                              if (e.target.checked) itemSearchResults.forEach((i) => next.set(i.id, i));
+                              else itemSearchResults.forEach((i) => next.delete(i.id));
+                              return next;
+                            });
+                          }} />
+                      </TableHead>
+                      <TableHead className="w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                      <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {itemSearchResults.length === 0 ? (
+                      <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없어요</TableCell></TableRow>
+                    ) : itemSearchResults.map((item) => (
+                      <TableRow key={item.id} className={cn("cursor-pointer", itemSelectedMap.has(item.id) && "bg-primary/5")}
+                        onClick={() => setItemSelectedMap((prev) => {
+                          const next = new Map(prev);
+                          if (next.has(item.id)) next.delete(item.id); else next.set(item.id, item);
+                          return next;
+                        })}>
+                        <TableCell className="text-center">
+                          <input type="checkbox" checked={itemSelectedMap.has(item.id)} readOnly />
+                        </TableCell>
+                        <TableCell className="text-[13px] max-w-[130px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
+                        <TableCell className="text-sm max-w-[150px]"><span className="block truncate" title={item.item_name}>{item.item_name}</span></TableCell>
+                        <TableCell className="text-[13px]">{item.size}</TableCell>
+                        <TableCell className="text-[13px]">{categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}</TableCell>
+                        <TableCell className="text-[13px]">{categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <div className="flex items-center justify-between border-t pt-2">
+                <div className="flex items-center gap-1">
+                  <span className="text-xs text-muted-foreground">표시:</span>
+                  <input type="number" min={1} max={200} value={itemPageSize}
+                    onChange={(e) => {
+                      const v = Math.min(200, Math.max(1, Number(e.target.value) || 20));
+                      setItemPageSize(v);
+                      setItemPage(1);
+                      setItemPageInput("1");
+                      searchItems(1, v);
+                    }}
+                    className="h-7 w-14 rounded-md border px-1 text-center text-xs" />
+                </div>
+                <div className="flex items-center gap-1">
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(1)} disabled={itemPage === 1 || itemSearchLoading}>
+                    <ChevronsLeft className="h-3 w-3" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemPage - 1)} disabled={itemPage === 1 || itemSearchLoading}>
+                    <ChevronLeft className="h-3 w-3" />
+                  </Button>
+                  <input type="text" inputMode="numeric" value={itemPageInput}
+                    onChange={(e) => setItemPageInput(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === "Enter") { commitItemPageInput(); (e.target as HTMLInputElement).blur(); } }}
+                    onBlur={commitItemPageInput}
+                    onFocus={(e) => e.target.select()}
+                    className="h-7 w-10 rounded-md border px-1 text-center text-xs" />
+                  <span className="text-xs text-muted-foreground">/ {itemTotalPages || 1}</span>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemPage + 1)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
+                    <ChevronRight className="h-3 w-3" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemTotalPages)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
+                    <ChevronsRight className="h-3 w-3" />
+                  </Button>
+                </div>
+                <span className="text-xs text-muted-foreground">총 {itemTotal}건</span>
+              </div>
+              <DialogFooter>
+                <div className="flex items-center gap-2 w-full justify-between">
+                  <span className="text-sm text-muted-foreground">{itemSelectedMap.size}개 선택됨</span>
+                  <div className="flex gap-2">
+                    <Button variant="outline" onClick={() => { setItemSelectedMap(new Map()); setItemSelectOpen(false); }}>취소</Button>
+                    <Button onClick={addSelectedItemsToDetail} disabled={itemSelectedMap.size === 0}>
+                      <Plus className="w-4 h-4 mr-1" /> {itemSelectedMap.size}개 추가
+                    </Button>
+                  </div>
+                </div>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={DETAIL_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchOrders()}
+      />
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/purchase/purchase-item/page.tsx b/frontend/app/(main)/COMPANY_30/purchase/purchase-item/page.tsx
new file mode 100644
index 00000000..7f211a88
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/purchase/purchase-item/page.tsx
@@ -0,0 +1,1244 @@
+"use client";
+
+/**
+ * 구매품목관리 — Type B 마스터-디테일 리디자인
+ *
+ * 좌측: 구매품목 목록 (item_info, 구매 관련 필터)
+ * 우측: 선택한 품목의 공급업체 정보 (supplier_item_mapping → supplier_mng 조인)
+ *
+ * 공급업체관리와 양방향 연동 (같은 supplier_item_mapping 테이블)
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Search, X, Settings2, Package } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const ITEM_TABLE = "item_info";
+const MAPPING_TABLE = "supplier_item_mapping";
+const SUPPLIER_TABLE = "supplier_mng";
+
+// 숫자 포맷 헬퍼
+const formatNum = (val: any): string => {
+  if (val === null || val === undefined || val === "") return "";
+  const n = Number(val);
+  return isNaN(n) ? String(val) : n.toLocaleString();
+};
+
+const ITEM_GRID_COLUMNS = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "standard_price", label: "구매단가" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
+];
+
+export default function PurchaseItemPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-purchase-item", ITEM_TABLE, ITEM_GRID_COLUMNS);
+
+  // 좌측: 품목
+  const [items, setItems] = useState<any[]>([]);
+  const [itemLoading, setItemLoading] = useState(false);
+  const [itemCount, setItemCount] = useState(0);
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 공급업체
+  const [supplierItems, setSupplierItems] = useState<any[]>([]);
+  const [supplierLoading, setSupplierLoading] = useState(false);
+  const [supplierCheckedIds, setSupplierCheckedIds] = useState<string[]>([]);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string; isDefault?: boolean }[]>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 공급업체 추가 모달
+  const [suppSelectOpen, setSuppSelectOpen] = useState(false);
+  const [suppSearchKeyword, setSuppSearchKeyword] = useState("");
+  const [suppSearchResults, setSuppSearchResults] = useState<any[]>([]);
+  const [suppSearchLoading, setSuppSearchLoading] = useState(false);
+  const [suppCheckedIds, setSuppCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 수정 모달
+  const [editItemOpen, setEditItemOpen] = useState(false);
+  const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+
+  // 공급업체 상세 입력 모달 (공급업체 품번/품명 + 단가)
+  const [suppDetailOpen, setSuppDetailOpen] = useState(false);
+  const [selectedSuppsForDetail, setSelectedSuppsForDetail] = useState<any[]>([]);
+  const [suppMappings, setSuppMappings] = useState<Record<string, Array<{ _id: string; supplier_item_code: string; supplier_item_name: string }>>>({});
+  const [suppPrices, setSuppPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [editSuppData, setEditSuppData] = useState<any>(null);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string; isDefault?: boolean }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string; isDefault?: boolean }[] => {
+        const result: { code: string; label: string; isDefault?: boolean }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel, isDefault: v.isDefault });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      // 단가 카테고리
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/supplier_item_prices/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 좌측: 품목 조회
+  const fetchItems = useCallback(async () => {
+    setItemLoading(true);
+    try {
+      const filters: { columnName: string; operator: string; value: any }[] = [];
+
+      // 구매품목/영업관리 division 필터 (다중값 컬럼이므로 contains로 매칭)
+      filters.push({ columnName: "division", operator: "contains", value: "s" });
+
+      // DynamicSearchFilter에서 전달된 필터 추가
+      for (const f of searchFilters) {
+        filters.push({ columnName: f.columnName, operator: f.operator, value: f.value });
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const CATS = ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+      setItemCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setItemLoading(false);
+    }
+  }, [searchFilters, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => { fetchItems(); }, [fetchItems]);
+
+  // 선택된 품목
+  const selectedItem = items.find((i) => i.id === selectedItemId);
+
+  // 우측: 공급업체 목록 조회
+  useEffect(() => {
+    if (!selectedItem?.item_number) { setSupplierItems([]); setSupplierCheckedIds([]); return; }
+    setSupplierCheckedIds([]);
+    const itemKey = selectedItem.item_number;
+    const fetchSupplierItems = async () => {
+      setSupplierLoading(true);
+      try {
+        // 1. supplier_item_mapping에서 해당 품목의 매핑 조회
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
+          autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        // 2. supplier_id → supplier_mng 조인 (공급업체명)
+        const custIds = [...new Set(mappings.map((m: any) => m.supplier_id).filter(Boolean))];
+        let custMap: Record<string, any> = {};
+        if (custIds.length > 0) {
+          try {
+            const custRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+              page: 1, size: custIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "in", value: custIds }] },
+              autoFilter: true,
+            });
+            for (const c of (custRes.data?.data?.data || custRes.data?.data?.rows || [])) {
+              custMap[c.supplier_code] = c;
+            }
+          } catch { /* skip */ }
+        }
+
+        // 3. supplier_item_prices 조회 (단가 정보)
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        // 4. 공급업체별 중복 제거 + 오늘 날짜 기준 단가 매칭
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o: any) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+        const seenCustIds = new Set<string>();
+        const sortedMappings = [...mappings].sort((a: any, b: any) => (a.supplier_id || "").localeCompare(b.supplier_id || ""));
+
+        setSupplierItems(sortedMappings.map((m: any) => {
+          const custKey = m.supplier_id || "";
+          const isFirstOfGroup = !seenCustIds.has(custKey);
+          if (custKey) seenCustIds.add(custKey);
+
+          const custPriceList = allPrices.filter((p: any) => p.supplier_id === custKey);
+          const todayPrice = custPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || custPriceList[0] || {};
+
+          return {
+            ...m,
+            supplier_code: isFirstOfGroup ? custKey : "",
+            supplier_name: isFirstOfGroup ? (custMap[custKey]?.supplier_name || "") : "",
+            supplier_item_code: m.supplier_item_code || "",
+            supplier_item_name: m.supplier_item_name || "",
+            base_price: todayPrice.base_price || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+        }));
+      } catch (err) {
+        console.error("공급업체 조회 실패:", err);
+      } finally {
+        setSupplierLoading(false);
+      }
+    };
+    fetchSupplierItems();
+  }, [selectedItem?.item_number, priceCategoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 공급업체 검색
+  const searchSuppliers = async () => {
+    setSuppSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (suppSearchKeyword) filters.push({ columnName: "supplier_name", operator: "contains", value: suppSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const all = res.data?.data?.data || res.data?.data?.rows || [];
+      // 이미 등록된 공급업체 제외
+      const existing = new Set(supplierItems.map((c: any) => c.supplier_id || c.supplier_code));
+      setSuppSearchResults(all.filter((c: any) => !existing.has(c.supplier_code)));
+    } catch { /* skip */ } finally { setSuppSearchLoading(false); }
+  };
+
+  // 공급업체 선택 → 상세 모달로 이동
+  const goToSuppDetail = () => {
+    const selected = suppSearchResults.filter((c) => suppCheckedIds.has(c.id));
+    if (selected.length === 0) { toast.error("공급업체를 선택해주세요."); return; }
+    setSelectedSuppsForDetail(selected);
+    const mappings: typeof suppMappings = {};
+    const prices: typeof suppPrices = {};
+    for (const cust of selected) {
+      const key = cust.supplier_code || cust.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: selectedItem?.standard_price || selectedItem?.standard_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: selectedItem?.standard_price || selectedItem?.standard_price || "",
+      }];
+    }
+    setSuppMappings(mappings);
+    setSuppPrices(prices);
+    setSuppSelectOpen(false);
+    setSuppDetailOpen(true);
+  };
+
+  const addMappingRow = (custKey: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, supplier_item_code: "", supplier_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (custKey: string, rowId: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updateMappingRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  const addPriceRow = (custKey: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (custKey: string, rowId: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1;
+          if (roundLabel === "반올림") calc = Math.round(calc / unit) * unit;
+          else if (roundLabel === "절삭") calc = Math.floor(calc / unit) * unit;
+          else if (roundLabel === "올림") calc = Math.ceil(calc / unit) * unit;
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  const openEditSupp = async (row: any) => {
+    const custKey = row.supplier_code || row.supplier_id;
+
+    // supplier_mng에서 공급업체 정보 조회
+    let custInfo: any = { supplier_code: custKey, supplier_name: row.supplier_name || "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/supplier_mng/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: custKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) custInfo = found;
+    } catch { /* skip */ }
+
+    const mappingRows = [{
+      _id: `m_existing_${row.id}`,
+      supplier_item_code: row.supplier_item_code || "",
+      supplier_item_name: row.supplier_item_name || "",
+    }].filter((m) => m.supplier_item_code || m.supplier_item_name);
+
+    const priceRows = [{
+      _id: `p_existing_${row.id}`,
+      start_date: row.start_date || "",
+      end_date: row.end_date || "",
+      currency_code: row.currency_code || "CAT_MLAMDKVN_PZJI",
+      base_price_type: row.base_price_type || "CAT_MLAMFGFT_4RZW",
+      base_price: row.base_price ? String(row.base_price) : "",
+      discount_type: row.discount_type || "",
+      discount_value: row.discount_value ? String(row.discount_value) : "",
+      rounding_type: row.rounding_type || "",
+      rounding_unit_value: row.rounding_unit_value || "",
+      calculated_price: row.calculated_price ? String(row.calculated_price) : "",
+    }].filter((p) => p.base_price || p.start_date);
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedSuppsForDetail([custInfo]);
+    setSuppMappings({ [custKey]: mappingRows });
+    setSuppPrices({ [custKey]: priceRows });
+    setEditSuppData(row);
+    setSuppDetailOpen(true);
+  };
+
+  const handleSuppDetailSave = async () => {
+    if (!selectedItem) return;
+    const isEditingExisting = !!editSuppData;
+    setSaving(true);
+    try {
+      for (const cust of selectedSuppsForDetail) {
+        const custKey = cust.supplier_code || cust.id;
+        const mappingRows = suppMappings[custKey] || [];
+
+        if (isEditingExisting && editSuppData?.id) {
+          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+            originalData: { id: editSuppData.id },
+            updatedData: {
+              supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+              supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+            },
+          });
+
+          // 기존 prices 삭제 후 재등록
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "mapping_id", operator: "equals", value: editSuppData.id },
+              ]}, autoFilter: true,
+            });
+            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+            if (existing.length > 0) {
+              await apiClient.delete(`/table-management/tables/supplier_item_prices/delete`, {
+                data: existing.map((p: any) => ({ id: p.id })),
+              });
+            }
+          } catch { /* skip */ }
+
+          const priceRows = (suppPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/supplier_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: editSuppData.id,
+              supplier_id: custKey,
+              item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        } else {
+          // 신규 등록
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            supplier_id: custKey, item_id: selectedItem.item_number,
+            supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+            supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+          });
+          const mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              supplier_id: custKey, item_id: selectedItem.item_number,
+              supplier_item_code: mappingRows[mi].supplier_item_code || "",
+              supplier_item_name: mappingRows[mi].supplier_item_name || "",
+            });
+          }
+
+          const priceRows = (suppPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/supplier_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", supplier_id: custKey, item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedSuppsForDetail.length}개 공급업체가 추가되었습니다.`);
+      setSuppDetailOpen(false);
+      setEditSuppData(null);
+      setSuppCheckedIds(new Set());
+      // 우측 새로고침
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 수정
+  const openEditItem = () => {
+    if (!selectedItem) return;
+    setEditItemForm({ ...selectedItem });
+    setEditItemOpen(true);
+  };
+
+  const handleEditSave = async () => {
+    if (!editItemForm.id) return;
+    setSaving(true);
+    try {
+      await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
+        originalData: { id: editItemForm.id },
+        updatedData: {
+          standard_price: editItemForm.standard_price || null,
+          currency_code: editItemForm.currency_code || null,
+        },
+      });
+      toast.success("수정되었습니다.");
+      setEditItemOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "수정에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 우측: 공급업체 매핑 삭제
+  const handleSupplierMappingDelete = async () => {
+    if (supplierCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${supplierCheckedIds.length}개 공급업체 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      // 관련 단가 삭제
+      for (const mappingId of supplierCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/supplier_item_prices/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      // 매핑 삭제
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: supplierCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${supplierCheckedIds.length}개 공급업체 매핑이 삭제되었습니다.`);
+      setSupplierCheckedIds([]);
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) return;
+    const data = items.map((i) => ({
+      품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
+      기준단가: i.standard_price, 구매단가: i.standard_price, 통화: i.currency_code, 상태: i.status,
+    }));
+    await exportToExcel(data, "구매품목관리.xlsx", "구매품목");
+    toast.success("다운로드 완료");
+  };
+
+  // EDataTable 컬럼 정의 (구매품목) — ts.visibleColumns 기반
+  const COLUMN_RENDER_MAP: Record<string, Partial<EDataTableColumn>> = {
+    item_number: { width: "w-[110px]" },
+    item_name: { minWidth: "min-w-[130px]" },
+    size: { width: "w-[80px]" },
+    unit: { width: "w-[60px]" },
+    standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
+    currency_code: { width: "w-[50px]" },
+    status: { width: "w-[60px]" },
+  };
+  const itemColumns: EDataTableColumn[] = ts.visibleColumns.map((col): EDataTableColumn => ({
+    key: col.key,
+    label: col.label,
+    ...COLUMN_RENDER_MAP[col.key],
+  }));
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ITEM_TABLE}
+        filterId="c16-purchase-item"
+        onFilterChange={setSearchFilters}
+        dataCount={items.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" />
+            엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 구매품목 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">구매품목 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {itemCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={itemColumns}
+                data={ts.groupData(items)}
+                rowKey={(row) => row.id}
+                loading={itemLoading}
+                emptyMessage="등록된 구매품목이 없어요"
+                selectedId={selectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
+                onRowDoubleClick={() => openEditItem()}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-purchase-item"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedItemId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Package className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">품목을 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 품목을 선택하면 공급업체 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 공급업체별 단가 헤더 */}
+                  <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 px-4">
+                    <div className="flex items-center gap-2.5">
+                      <Package className="w-3.5 h-3.5 text-muted-foreground" />
+                      <span className="text-[13px] font-bold">공급업체별 단가</span>
+                      <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">
+                        {supplierItems.length}
+                      </Badge>
+                    </div>
+                    <div className="flex gap-1.5">
+                      <Button
+                        size="sm"
+                        onClick={() => { setSuppCheckedIds(new Set()); setSuppSelectOpen(true); searchSuppliers(); }}
+                      >
+                        <Plus className="w-3.5 h-3.5" /> 공급업체 추가
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={supplierCheckedIds.length === 0}
+                        onClick={handleSupplierMappingDelete}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" /> 삭제
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 공급업체 테이블 */}
+                  <div className="flex-1 min-h-0 overflow-auto pt-px">
+                    {supplierLoading ? (
+                      <div className="flex items-center justify-center h-full">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : supplierItems.length === 0 ? (
+                      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+                        등록된 공급업체가 없어요
+                      </div>
+                    ) : (
+                      <Table noWrapper>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted h-10">
+                            <TableHead className="w-[40px] text-center px-2">
+                              <input
+                                type="checkbox"
+                                className="rounded"
+                                checked={supplierItems.length > 0 && supplierCheckedIds.length === supplierItems.length}
+                                onChange={(e) => {
+                                  if (e.target.checked) setSupplierCheckedIds(supplierItems.map((c) => c.id));
+                                  else setSupplierCheckedIds([]);
+                                }}
+                              />
+                            </TableHead>
+                            <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체코드</TableHead>
+                            <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품번</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품명</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {supplierItems.map((row) => (
+                            <TableRow
+                              key={row.id}
+                              className={cn(
+                                "cursor-pointer h-[41px]",
+                                supplierCheckedIds.includes(row.id) ? "bg-primary/5 border-l-[3px] border-l-primary" : "border-l-[3px] border-l-transparent"
+                              )}
+                              onDoubleClick={() => openEditSupp(row)}
+                            >
+                              <TableCell
+                                className="text-center px-2"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setSupplierCheckedIds((prev) =>
+                                    prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                  );
+                                }}
+                              >
+                                <input type="checkbox" className="rounded" checked={supplierCheckedIds.includes(row.id)} readOnly />
+                              </TableCell>
+                              <TableCell className="text-[13px] font-mono text-muted-foreground">{row.supplier_code}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_name}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_item_code}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right">
+                                {row.base_price ? Number(row.base_price).toLocaleString() : ""}
+                              </TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold">
+                                {row.calculated_price ? Number(row.calculated_price).toLocaleString() : ""}
+                              </TableCell>
+                              <TableCell className="text-[13px]">{row.currency_code}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 품목 수정 모달 ── */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>구매품목 수정</DialogTitle>
+            <DialogDescription>
+              {editItemForm.item_number || ""} — {editItemForm.item_name || ""}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {/* 품목 기본정보 (읽기 전용) */}
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-sm">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+
+            <div className="col-span-2 border-t my-1" />
+
+            {/* 구매 설정 (수정 가능) */}
+            <div className="space-y-1.5">
+              <Label className="text-sm">구매단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="구매단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">기준단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">통화</Label>
+              <Select
+                value={editItemForm.currency_code || ""}
+                onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="통화를 선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 공급업체 검색 및 추가 모달 ── */}
+      <Dialog open={suppSelectOpen} onOpenChange={setSuppSelectOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>공급업체 검색 및 추가</DialogTitle>
+            <DialogDescription>품목에 추가할 공급업체를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 py-2">
+            {/* 검색바 */}
+            <div className="flex gap-2">
+              <Input
+                placeholder="공급업체명으로 검색해주세요"
+                value={suppSearchKeyword}
+                onChange={(e) => setSuppSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchSuppliers()}
+                className="h-9 flex-1"
+              />
+              <Button size="sm" onClick={searchSuppliers} disabled={suppSearchLoading} className="h-9">
+                {suppSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
+              </Button>
+            </div>
+            {/* 검색 결과 테이블 */}
+            <div className="overflow-auto max-h-[350px] border rounded-lg">
+              <Table noWrapper>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="sticky top-0 bg-card w-[40px] text-center">
+                      <Checkbox
+                        checked={suppSearchResults.length > 0 && suppCheckedIds.size === suppSearchResults.length}
+                        onCheckedChange={(checked) => {
+                          if (checked === true) setSuppCheckedIds(new Set(suppSearchResults.map((c) => c.id)));
+                          else setSuppCheckedIds(new Set());
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[110px]">공급업체코드</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[130px]">공급업체명</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">거래유형</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">담당자</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {suppSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : suppSearchResults.map((c) => (
+                    <TableRow
+                      key={c.id}
+                      className={cn("cursor-pointer", suppCheckedIds.has(c.id) && "bg-primary/[0.08]")}
+                      onClick={() => setSuppCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <Checkbox
+                          checked={suppCheckedIds.has(c.id)}
+                          onCheckedChange={(checked) => {
+                            setSuppCheckedIds((prev) => {
+                              const next = new Set(prev);
+                              if (checked === true) next.add(c.id); else next.delete(c.id);
+                              return next;
+                            });
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell className="text-[13px] font-mono text-muted-foreground">{c.supplier_code}</TableCell>
+                      <TableCell className="text-sm font-medium text-foreground">{c.supplier_name}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.division}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.contact_person}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{suppCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setSuppSelectOpen(false)}>취소</Button>
+                <Button onClick={goToSuppDetail} disabled={suppCheckedIds.size === 0}>
+                  <Plus className="w-4 h-4" />
+                  {suppCheckedIds.size}개 다음
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 공급업체 상세 입력/수정 모달 ── */}
+      <Dialog open={suppDetailOpen} onOpenChange={setSuppDetailOpen}>
+        <DialogContent className="max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              공급업체 상세정보 {editSuppData ? "수정" : "입력"} — {selectedItem?.item_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editSuppData ? "공급업체 품번/품명과 기간별 단가를 수정해주세요." : "선택한 공급업체의 품번/품명과 기간별 단가를 설정해주세요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-6 py-2">
+            {selectedSuppsForDetail.map((cust, idx) => {
+              const custKey = cust.supplier_code || cust.id;
+              const mappingRows = suppMappings[custKey] || [];
+              const prices = suppPrices[custKey] || [];
+
+              return (
+                <div key={custKey} className="border rounded-lg overflow-hidden">
+                  {/* 공급업체 헤더 */}
+                  <div className="flex items-center gap-2.5 px-4 py-3 bg-muted border-b">
+                    <span className="text-[13px] font-bold text-foreground">{idx + 1}. {cust.supplier_name || custKey}</span>
+                    <span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">
+                      {custKey}
+                    </span>
+                  </div>
+
+                  <div className="flex gap-4 p-4 bg-card">
+                    {/* 좌: 공급업체 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/50">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">공급업체 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 공급업체 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.supplier_item_code}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "supplier_item_code", e.target.value)}
+                              placeholder="공급업체 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.supplier_item_name}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "supplier_item_name", e.target.value)}
+                              placeholder="공급업체 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button
+                              variant="ghost" size="sm"
+                              className="h-7 w-7 p-0 text-destructive shrink-0"
+                              onClick={() => removeMappingRow(custKey, mRow._id)}
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/30">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button
+                                  variant="ghost" size="sm"
+                                  className="h-6 w-6 p-0 text-destructive"
+                                  onClick={() => removePriceRow(custKey, price._id)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="통화" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "base_price", raw);
+                                }}
+                                className="h-8 text-xs text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-8 text-xs text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm text-foreground">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setSuppDetailOpen(false);
+                if (!editSuppData) setSuppSelectOpen(true);
+                setEditSuppData(null);
+              }}
+            >
+              {editSuppData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleSuppDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={ITEM_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchItems()}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/purchase/supplier/page.tsx b/frontend/app/(main)/COMPANY_30/purchase/supplier/page.tsx
new file mode 100644
index 00000000..521f770e
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/purchase/supplier/page.tsx
@@ -0,0 +1,2759 @@
+"use client";
+
+/**
+ * 공급업체관리 — Type B 마스터-디테일 레이아웃 (리디자인)
+ *
+ * 좌측: 공급업체 목록 (supplier_mng)
+ * 우측: 품목별 단가 + 납품처 정보 탭
+ *
+ * 모달:
+ * - 공급업체 등록/수정 (supplier_mng)
+ * - 품목 추가 (item_info 검색 → supplier_item_mapping + supplier_item_prices)
+ * - 납품처 등록 (delivery_destination)
+ */
+
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Users, Package, MapPin, Search, X, Tag, Coins, Settings2, GripVertical,
+  ChevronRight, ChevronDown,
+} from "lucide-react";
+import {
+  DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { validateField, validateForm, formatField } from "@/lib/utils/validation";
+import { getAvailableNumberingRulesForScreen, previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const SUPPLIER_TABLE = "supplier_mng";
+const MAPPING_TABLE = "supplier_item_mapping";
+const PRICE_TABLE = "supplier_item_prices";
+const DELIVERY_TABLE = "delivery_destination";
+const CONTACT_TABLE = "supplier_contact";
+
+const SUPPLIER_GRID_COLUMNS = [
+  { key: "supplier_code", label: "공급업체코드" },
+  { key: "supplier_name", label: "공급업체명" },
+  { key: "division", label: "공급업체유형" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "전화번호" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "status", label: "상태" },
+];
+
+function SortableMappingRow({ id, children }: { id: string; children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform), transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+  return (
+    <div ref={setNodeRef} style={style} className="flex gap-2 items-center">
+      <div {...attributes} {...listeners} className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0">
+        <GripVertical className="h-3.5 w-3.5" />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default function SupplierManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-supplier", SUPPLIER_TABLE, SUPPLIER_GRID_COLUMNS);
+  const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 공급업체 목록
+  const [suppliers, setSuppliers] = useState<any[]>([]);
+  const [rawSuppliers, setRawSuppliers] = useState<any[]>([]);
+  const [supplierLoading, setSupplierLoading] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
+  const [mainContactMap, setMainContactMap] = useState<Record<string, any>>({});
+  const [supplierCount, setSupplierCount] = useState(0);
+  const [selectedSupplierId, setSelectedSupplierId] = useState<string | null>(null);
+
+  // 우측: 탭
+  const [rightTab, setRightTab] = useState<"items" | "delivery">("items");
+  // 우측: 품목 단가
+  const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceGroups, setPriceGroups] = useState<Record<string, { master: any; details: any[] }>>({});
+  const [priceLoading, setPriceLoading] = useState(false);
+  const [priceCheckedIds, setPriceCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [collapsedPriceCards, setCollapsedPriceCards] = useState<Set<string>>(new Set());
+  // 우측: 납품처
+  const [deliveryItems, setDeliveryItems] = useState<any[]>([]);
+  const [deliveryLoading, setDeliveryLoading] = useState(false);
+
+  // 품목 편집 데이터 (더블클릭 시 상세 입력 모달 재활용)
+  const [editItemData, setEditItemData] = useState<any>(null);
+  const savingRef = useRef(false);
+
+  // 거래처 모달
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [supplierEditMode, setSupplierEditMode] = useState(false);
+  const [supplierForm, setSupplierForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 품목 추가 모달 (1단계: 검색/선택)
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemTotalCount, setItemTotalCount] = useState(0);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 상세 입력 모달 (2단계: 거래처 품번/품명 + 단가)
+  const [itemDetailOpen, setItemDetailOpen] = useState(false);
+  const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; supplier_item_code: string; supplier_item_name: string }>>>({});
+  const [itemPrices, setItemPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 거래처 모달 탭
+  const [supplierModalTab, setSupplierModalTab] = useState<"basic" | "contacts" | "delivery">("basic");
+  // 담당자 (supplier_contact) - 모달 내
+  const [modalContacts, setModalContacts] = useState<any[]>([]);
+  const [modalContactLoading, setModalContactLoading] = useState(false);
+  const [modalContactForm, setModalContactForm] = useState<Record<string, any>>({});
+  const [modalContactEditId, setModalContactEditId] = useState<string | null>(null);
+  const [modalContactFormOpen, setModalContactFormOpen] = useState(false);
+  const [modalContactSaving, setModalContactSaving] = useState(false);
+  // 납품처 (delivery_destination) - 모달 내
+  const [modalDeliveries, setModalDeliveries] = useState<any[]>([]);
+  const [modalDeliveryLoading, setModalDeliveryLoading] = useState(false);
+  const [modalDeliveryForm, setModalDeliveryForm] = useState<Record<string, any>>({});
+  const [modalDeliveryEditId, setModalDeliveryEditId] = useState<string | null>(null);
+  const [modalDeliveryFormOpen, setModalDeliveryFormOpen] = useState(false);
+  const [modalDeliverySaving, setModalDeliverySaving] = useState(false);
+  const [modalDeliveryFormErrors, setModalDeliveryFormErrors] = useState<Record<string, string>>({});
+
+  const [continuousInput, setContinuousInput] = useState(false);
+
+  // 세금유형 (기본정보 탭 내)
+  const [taxTypeRows, setTaxTypeRows] = useState<{ _id: string; tax_type_name: string; rate: string }[]>([]);
+  const [taxTypeOptions, setTaxTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [employeeOptions, setEmployeeOptions] = useState<{ user_id: string; user_name: string; position_name?: string }[]>([]);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const flatten = (vals: any[]): { code: string; label: string }[] => {
+      const result: { code: string; label: string }[] = [];
+      for (const v of vals) {
+        result.push({ code: v.valueCode, label: v.valueLabel });
+        if (v.children?.length) result.push(...flatten(v.children));
+      }
+      return result;
+    };
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["division", "status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${SUPPLIER_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${PRICE_TABLE}/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+
+      // 세금유형 카테고리
+      try {
+        const taxRes = await apiClient.get(`/table-categories/supplier_tax_type/tax_type_name/values`);
+        if (taxRes.data?.success) setTaxTypeOptions(flatten(taxRes.data.data || []));
+      } catch { /* skip */ }
+    };
+    load();
+    apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true })
+      .then((res) => {
+        const users = res.data?.data?.data || res.data?.data?.rows || [];
+        setEmployeeOptions(users.map((u: any) => ({
+          user_id: u.user_id, user_name: u.user_name || u.user_id, position_name: u.position_name,
+        })));
+      }).catch(() => {});
+  }, []);
+
+  // 공급업체 목록 조회
+  const fetchSuppliers = useCallback(async () => {
+    setSupplierLoading(true);
+    try {
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
+      const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "supplier_code", order: "desc" },
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setRawSuppliers(raw);
+
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const mainContact = mainContactMap[r.id];
+        return {
+          ...r,
+          division: resolve("division", r.division),
+          status: resolve("status", r.status),
+          contact_person: mainContact?.contact_name || "",
+          contact_phone: mainContact?.contact_phone || "",
+          email: mainContact?.contact_email || "",
+        };
+      });
+      // 공급업체코드 숫자 기준 내림차순 정렬
+      data.sort((a: any, b: any) => {
+        const aNum = parseInt((a.supplier_code || "").replace(/\D/g, ""), 10) || 0;
+        const bNum = parseInt((b.supplier_code || "").replace(/\D/g, ""), 10) || 0;
+        return bNum - aNum;
+      });
+      setSuppliers(data);
+      setSupplierCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("거래처 조회 실패:", err);
+      toast.error("공급업체 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setSupplierLoading(false);
+    }
+  }, [searchFilters, categoryOptions, employeeOptions, mainContactMap]);
+
+  useEffect(() => { fetchSuppliers(); }, [fetchSuppliers]);
+
+  // 메인 담당자 조회 (최초 1번 + 저장 후 갱신)
+  const fetchMainContacts = useCallback(async () => {
+    try {
+      const contactRes = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+        dataFilter: { enabled: true, filters: [{ columnName: "is_main", operator: "equals", value: "Y" }] },
+      });
+      const allContacts = contactRes.data?.data?.data || contactRes.data?.data?.rows || [];
+      const map: Record<string, any> = {};
+      for (const c of allContacts) {
+        if ((c.is_main === "Y" || c.is_main === true) && c.supplier_id) {
+          map[c.supplier_id] = c;
+        }
+      }
+      setMainContactMap(map);
+    } catch { /* skip */ }
+  }, []);
+
+  useEffect(() => { fetchMainContacts(); }, [fetchMainContacts]);
+
+  const selectedSupplier = suppliers.find((c) => c.id === selectedSupplierId);
+
+  // 선택된 공급업체의 품목 단가 조회
+  useEffect(() => {
+    if (!selectedSupplier?.supplier_code) { setPriceItems([]); setPriceCheckedIds([]); return; }
+    setPriceCheckedIds([]);
+    const fetchItems = async () => {
+      setPriceLoading(true);
+      try {
+        const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+          ]},
+          autoFilter: true,
+        });
+        const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+
+        // 품목 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
+        const grouped: Record<string, { master: any; details: any[] }> = {};
+        const flatItems: any[] = [];
+        const seenItemIds = new Set<string>();
+        for (const m of mappings) {
+          const itemKey = m.item_id || "";
+          if (seenItemIds.has(itemKey)) continue; // 품목당 첫 매핑만 마스터
+          seenItemIds.add(itemKey);
+
+          const itemInfo = itemMap[itemKey] || {};
+          const itemPriceList = allPrices
+            .filter((p: any) => p.item_id === itemKey)
+            .sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
+          const todayPrice = itemPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || itemPriceList[0] || {};
+
+          const masterRow = {
+            ...m,
+            item_number: itemKey,
+            item_name: itemInfo.item_name || "",
+            base_price_type: priceResolve("base_price_type", todayPrice.base_price_type || ""),
+            base_price: todayPrice.base_price || "",
+            discount_type: priceResolve("discount_type", todayPrice.discount_type || ""),
+            discount_value: todayPrice.discount_value || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+
+          // 단가 리스트 (라벨 변환)
+          const priceDetails = itemPriceList.map((p: any) => ({
+            ...p,
+            base_price_type_label: priceResolve("base_price_type", p.base_price_type || ""),
+            discount_type_label: priceResolve("discount_type", p.discount_type || ""),
+            currency_label: priceResolve("currency_code", p.currency_code || ""),
+            is_current: (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today),
+          }));
+
+          grouped[itemKey] = { master: masterRow, details: priceDetails };
+          flatItems.push(masterRow);
+        }
+        setPriceGroups(grouped);
+        setPriceItems(flatItems);
+      } catch (err) {
+        console.error("품목 조회 실패:", err);
+      } finally {
+        setPriceLoading(false);
+      }
+    };
+    fetchItems();
+  }, [selectedSupplier?.supplier_code]);
+
+  // 납품처 조회
+  useEffect(() => {
+    if (!selectedSupplier?.supplier_code) { setDeliveryItems([]); return; }
+    const fetchDelivery = async () => {
+      setDeliveryLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_code", operator: "equals", value: selectedSupplier.supplier_code },
+          ]},
+          autoFilter: true,
+        });
+        setDeliveryItems(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setDeliveryItems([]); } finally { setDeliveryLoading(false); }
+    };
+    fetchDelivery();
+  }, [selectedSupplier?.supplier_code]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 모달 내 담당자 목록 조회
+  const fetchModalContacts = useCallback(async (supplierId: string) => {
+    setModalContactLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      setModalContacts(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalContacts([]); } finally { setModalContactLoading(false); }
+  }, []);
+
+  // 모달 내 납품처 목록 조회
+  const fetchModalDeliveries = useCallback(async (supplierCode: string) => {
+    setModalDeliveryLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: supplierCode }] },
+        autoFilter: true,
+      });
+      setModalDeliveries(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalDeliveries([]); } finally { setModalDeliveryLoading(false); }
+  }, []);
+
+  // 담당자 저장 (등록/수정)
+  const handleModalContactSave = async () => {
+    if (!modalContactForm.contact_name) { toast.error("담당자명은 필수입니다."); return; }
+    if (modalContactEditId) {
+      // 수정 — 로컬 리스트에서 교체 + 메인 설정 시 다른 메인 해제
+      const isSettingMain = modalContactForm.is_main === "Y" || modalContactForm.is_main === true;
+      setModalContacts((prev) => prev.map((c) =>
+        (c._localId || c.id) === modalContactEditId
+          ? { ...c, ...modalContactForm }
+          : isSettingMain ? { ...c, is_main: "N" } : c
+      ));
+    } else {
+      // 추가 — 로컬 리스트에 카드 추가
+      setModalContacts((prev) => [...prev, {
+        ...modalContactForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalContactFormOpen(false);
+    setModalContactForm({});
+    setModalContactEditId(null);
+  };
+
+  // 담당자 삭제
+  const handleModalContactDelete = (contactId: string) => {
+    setModalContacts((prev) => prev.filter((c) => (c._localId || c.id) !== contactId));
+  };
+
+  // 납품처 자동채번 유틸
+  const generateDeliveryCode = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DELIVERY_TABLE}/destination_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        const allRes = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "destination_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const match = (row.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        // 로컬에 추가된 것도 포함
+        for (const d of modalDeliveries) {
+          const match = (d.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLen = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          return prefix + String(maxSeq + 1).padStart(seqLen, "0");
+        }
+      }
+    } catch { /* skip */ }
+    return "";
+  };
+
+  // 납품처 저장 (모달 내)
+  const handleModalDeliverySave = async () => {
+    if (!modalDeliveryForm.destination_name) { toast.error("납품처명은 필수입니다."); return; }
+    if (modalDeliveryEditId) {
+      const isSettingMain = modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true;
+      setModalDeliveries((prev) => prev.map((d) =>
+        (d._localId || d.id) === modalDeliveryEditId
+          ? { ...d, ...modalDeliveryForm }
+          : isSettingMain ? { ...d, is_default: "N" } : d
+      ));
+    } else {
+      setModalDeliveries((prev) => [...prev, {
+        ...modalDeliveryForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalDeliveryFormOpen(false);
+    setModalDeliveryForm({});
+    setModalDeliveryEditId(null);
+    setModalDeliveryFormErrors({});
+  };
+
+  const handleModalDeliveryDelete = (deliveryId: string) => {
+    setModalDeliveries((prev) => prev.filter((d) => (d._localId || d.id) !== deliveryId));
+  };
+
+  // 공급업체 등록 모달 열기
+  const openSupplierRegister = async () => {
+    setSupplierForm({});
+    setFormErrors({});
+    setSupplierEditMode(false);
+    setSupplierModalTab("basic");
+    setModalContacts([]);
+    setModalDeliveries([]);
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setTaxTypeRows([]);
+    setSupplierModalOpen(true);
+    // 공급업체 코드 자동 채번 — 기존 데이터 max값 기반
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${SUPPLIER_TABLE}/supplier_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        // 기존 데이터에서 CUST-XXX 패턴의 최대 순번 조회
+        const allRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "supplier_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const code = row.supplier_code || "";
+          const match = code.match(/(\d+)$/);
+          if (match) {
+            const seq = parseInt(match[1], 10);
+            if (seq > maxSeq) maxSeq = seq;
+          }
+        }
+        // preview로 접두어 패턴 가져오기
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLength = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          const nextSeq = maxSeq + 1;
+          const nextCode = prefix + String(nextSeq).padStart(seqLength, "0");
+          setSupplierForm((prev) => ({ ...prev, supplier_code: nextCode, _numberingRuleId: ruleId }));
+        }
+      }
+    } catch { /* skip */ }
+  };
+
+  const openSupplierEdit = () => {
+    if (!selectedSupplier) return;
+    const rawData = rawSuppliers.find((c) => c.id === selectedSupplierId);
+    setSupplierForm({ ...(rawData || selectedSupplier) });
+    setFormErrors({});
+    setSupplierEditMode(true);
+    setSupplierModalTab("basic");
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setModalContactForm({});
+    setModalDeliveryForm({});
+    setModalContactEditId(null);
+    setModalDeliveryEditId(null);
+    // 수정 모드에서는 바로 조회
+    const code = (rawData || selectedSupplier).supplier_code;
+    const id = (rawData || selectedSupplier).id;
+    if (id) {
+      fetchModalContacts(id);
+      // 세금유형 로드
+      apiClient.post(`/table-management/tables/supplier_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: id }] },
+        autoFilter: true,
+      }).then((res: any) => {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        setTaxTypeRows(rows.map((r: any) => ({ _id: r.id, tax_type_name: r.tax_type_name || "", rate: String(r.rate || "") })));
+      }).catch(() => setTaxTypeRows([]));
+    }
+    if (code) fetchModalDeliveries(code);
+    setSupplierModalOpen(true);
+  };
+
+  // 폼 필드 변경 시 자동 포맷팅 + 실시간 검증
+  const handleFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setSupplierForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => {
+      const next = { ...prev };
+      if (error) next[field] = error; else delete next[field];
+      return next;
+    });
+  };
+
+  // 세금유형/담당자/납품처를 한번에 저장하는 헬퍼
+  const saveSubTables = async (supplierId: string, supplierCode: string) => {
+    // 세금유형 — 기존 삭제 후 재생성
+    try {
+      const existTax = await apiClient.post(`/table-management/tables/supplier_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      const existRows = existTax.data?.data?.data || existTax.data?.data?.rows || [];
+      if (existRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/supplier_tax_type/delete`, {
+          data: existRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+      for (const t of taxTypeRows.filter((r) => r.tax_type_name)) {
+        await apiClient.post(`/table-management/tables/supplier_tax_type/add`, {
+          id: crypto.randomUUID(), supplier_id: supplierId,
+          tax_type_name: t.tax_type_name, tax_type_id: t.tax_type_name,
+          rate: t.rate ? Number(t.rate) : 0,
+        });
+      }
+    } catch { /* skip */ }
+
+    // 담당자 — 기존 삭제 후 전체 재생성
+    try {
+      const existContacts = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      const existCRows = existContacts.data?.data?.data || existContacts.data?.data?.rows || [];
+      if (existCRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${CONTACT_TABLE}/delete`, {
+          data: existCRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const c of modalContacts) {
+      try {
+        await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/add`, {
+          id: crypto.randomUUID(), supplier_id: supplierId,
+          contact_name: c.contact_name || "", contact_phone: c.contact_phone || "",
+          contact_email: c.contact_email || "", department: c.department || "",
+          is_main: c.is_main || "N", memo: c.memo || "",
+        });
+      } catch { /* skip */ }
+    }
+
+    // 납품처 — 기존 삭제 후 전체 재생성
+    try {
+      const existDeliveries = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: supplierCode }] },
+        autoFilter: true,
+      });
+      const existDRows = existDeliveries.data?.data?.data || existDeliveries.data?.data?.rows || [];
+      if (existDRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
+          data: existDRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const d of modalDeliveries) {
+      try {
+        await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
+          id: crypto.randomUUID(), supplier_code: supplierCode,
+          destination_code: d.destination_code || "", destination_name: d.destination_name || "",
+          address: d.address || "", manager_name: d.manager_name || "",
+          phone: d.phone || "", memo: d.memo || "", is_default: d.is_default || "N",
+        });
+      } catch { /* skip */ }
+    }
+  };
+
+  const handleSupplierSave = async () => {
+    if (!supplierForm.supplier_name) { toast.error("공급업체명은 필수입니다."); return; }
+    if (!supplierForm.status) { toast.error("상태는 필수입니다."); return; }
+    const errors = validateForm(supplierForm, ["contact_phone", "email", "business_number"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) {
+      toast.error("입력 형식을 확인해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, _numberingRuleId, ...fields } = supplierForm;
+      const cleanFields: Record<string, any> = {};
+      for (const [key, value] of Object.entries(fields)) {
+        cleanFields[key] = value === "" ? null : value;
+      }
+
+      if (supplierEditMode && id) {
+        // 수정
+        await apiClient.put(`/table-management/tables/${SUPPLIER_TABLE}/edit`, {
+          originalData: { id }, updatedData: cleanFields,
+        });
+        await saveSubTables(id, cleanFields.supplier_code || supplierForm.supplier_code);
+        toast.success("저장되었습니다.");
+      } else {
+        // 신규 등록
+        await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/add`, cleanFields);
+        // id 획득
+        const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: cleanFields.supplier_code }] },
+          autoFilter: true,
+        });
+        const newRow = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+        if (newRow?.id) {
+          await saveSubTables(newRow.id, cleanFields.supplier_code);
+        }
+        toast.success("공급업체가 등록되었습니다.");
+      }
+
+      fetchSuppliers();
+      fetchMainContacts();
+      if (!supplierEditMode && continuousInput) {
+        // 연속입력 — 폼 초기화하고 모달 유지
+        setSupplierForm({});
+        setModalContacts([]);
+        setModalDeliveries([]);
+        setTaxTypeRows([]);
+        setSupplierModalTab("basic");
+        // 새 코드 채번
+        try {
+          const ruleRes = await apiClient.get(`/numbering-rules/by-column/${SUPPLIER_TABLE}/supplier_code`);
+          const ruleData = ruleRes.data;
+          if (ruleData?.success && ruleData?.data?.ruleId) {
+            const ruleId = ruleData.data.ruleId;
+            const allRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, { page: 1, size: 500, autoFilter: true, sort: { columnName: "supplier_code", order: "desc" } });
+            const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+            let maxSeq = 0;
+            for (const row of allRows) { const match = (row.supplier_code || "").match(/(\d+)$/); if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; } }
+            const previewRes = await previewNumberingCode(ruleId);
+            if (previewRes.success && previewRes.data?.generatedCode) {
+              const prefix = previewRes.data.generatedCode.replace(/\d+$/, "");
+              const seqLen = (previewRes.data.generatedCode.match(/(\d+)$/) || ["", "001"])[1].length;
+              setSupplierForm({ supplier_code: prefix + String(maxSeq + 1).padStart(seqLen, "0") });
+            }
+          }
+        } catch { /* skip */ }
+        toast.success("등록 완료. 다음 공급업체를 입력하세요.");
+      } else {
+        setSupplierModalOpen(false);
+        // 우측 패널 갱신
+        if (selectedSupplierId) {
+          const cid = selectedSupplierId;
+          setSelectedSupplierId(null);
+          setTimeout(() => setSelectedSupplierId(cid), 50);
+        }
+      }
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 공급업체 삭제
+  const handleSupplierDelete = async () => {
+    if (!selectedSupplierId) return;
+    const ok = await confirm("공급업체를 삭제하시겠습니까?", {
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${SUPPLIER_TABLE}/delete`, {
+        data: [{ id: selectedSupplierId }],
+      });
+      toast.success("삭제되었습니다.");
+      setSelectedSupplierId(null);
+      fetchSuppliers();
+    } catch { toast.error("삭제에 실패했습니다."); }
+  };
+
+  // 품목 검색
+  const searchItems = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const allItems = res.data?.data?.data || res.data?.data?.rows || [];
+      setItemTotalCount(allItems.length);
+      const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
+      const PURCHASE_CODES = ["s"]; // 구매관리 카테고리 코드
+      setItemSearchResults(allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        const divCodes = (item.division || "").split(",").map((c: string) => c.trim());
+        return divCodes.some((code: string) => PURCHASE_CODES.includes(code));
+      }));
+    } catch { /* skip */ } finally { setItemSearchLoading(false); }
+  };
+
+  // 품목 선택 완료 → 상세 입력 모달로 전환
+  const goToItemDetail = () => {
+    const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+    setSelectedItemsForDetail(selected);
+    const mappings: typeof itemMappings = {};
+    const prices: typeof itemPrices = {};
+    for (const item of selected) {
+      const key = item.item_number || item.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: item.standard_price || item.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: item.standard_price || item.selling_price || "",
+      }];
+    }
+    setItemMappings(mappings);
+    setItemPrices(prices);
+    setItemSelectOpen(false);
+    setItemDetailOpen(true);
+  };
+
+  // 거래처 품번/품명 행 추가
+  const addMappingRow = (itemKey: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, supplier_item_code: "", supplier_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (itemKey: string, rowId: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const handleMappingDragEnd = (itemKey: string, event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setItemMappings((prev) => {
+      const arr = [...(prev[itemKey] || [])];
+      const oldIdx = arr.findIndex((r) => r._id === active.id);
+      const newIdx = arr.findIndex((r) => r._id === over.id);
+      return { ...prev, [itemKey]: arrayMove(arr, oldIdx, newIdx) };
+    });
+  };
+
+  const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  // 단가 행 추가
+  const addPriceRow = (itemKey: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (itemKey: string, rowId: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1; // "10원" → 10, "100원" → 100
+          if (roundLabel === "반올림") {
+            calc = Math.round(calc / unit) * unit;
+          } else if (roundLabel === "절삭") {
+            calc = Math.floor(calc / unit) * unit;
+          } else if (roundLabel === "올림") {
+            calc = Math.ceil(calc / unit) * unit;
+          }
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  // 품목 편집 열기
+  const openEditItem = async (row: any) => {
+    const itemKey = row.item_number || row.item_id;
+    let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "equals", value: itemKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) itemInfo = found;
+    } catch { /* skip */ }
+
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "supplier_id", operator: "equals", value: selectedSupplier!.supplier_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.supplier_item_code || m.supplier_item_name)
+        .map((m: any) => ({
+          _id: `m_existing_${m.id}`,
+          supplier_item_code: m.supplier_item_code || "",
+          supplier_item_name: m.supplier_item_name || "",
+        }));
+    } catch { /* skip */ }
+
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "supplier_id", operator: "equals", value: selectedSupplier!.supplier_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date ? String(p.start_date).split("T")[0] : "",
+        end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedItemsForDetail([itemInfo]);
+    setItemMappings({ [itemKey]: mappingRows });
+    setItemPrices({ [itemKey]: priceRows });
+    setEditItemData(row);
+    setItemDetailOpen(true);
+  };
+
+  const handleItemDetailSave = async () => {
+    if (!selectedSupplier) return;
+    if (savingRef.current) return;
+    savingRef.current = true;
+    const isEditingExisting = !!editItemData;
+    setSaving(true);
+    try {
+      for (const item of selectedItemsForDetail) {
+        const itemKey = item.item_number || item.id;
+        const mappingRows = itemMappings[itemKey] || [];
+
+        if (isEditingExisting && editItemData?.id) {
+          // 기존 매핑 조회
+          let existingMaps: any[] = [];
+          try {
+            const existingMappings = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingMaps = existingMappings.data?.data?.data || existingMappings.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 매핑 upsert: 기존 것은 update, 새 것은 insert, 남은 것은 delete
+          const usedExistingIds = new Set<string>();
+          let firstMappingId: string | null = editItemData.id;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const existMap = existingMaps[mi];
+            if (existMap) {
+              // update
+              await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+                originalData: { id: existMap.id },
+                updatedData: {
+                  supplier_item_code: mappingRows[mi].supplier_item_code || "",
+                  supplier_item_name: mappingRows[mi].supplier_item_name || "",
+                },
+              });
+              usedExistingIds.add(existMap.id);
+              if (mi === 0) firstMappingId = existMap.id;
+            } else {
+              // insert
+              const mRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+                id: crypto.randomUUID(),
+                supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+                supplier_item_code: mappingRows[mi].supplier_item_code || "",
+                supplier_item_name: mappingRows[mi].supplier_item_name || "",
+              });
+              if (mi === 0 && !firstMappingId) firstMappingId = mRes.data?.data?.id || null;
+            }
+          }
+          // 초과분 delete
+          const toDeleteMaps = existingMaps.filter((m) => !usedExistingIds.has(m.id));
+          if (toDeleteMaps.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: toDeleteMaps.map((m: any) => ({ id: m.id })),
+            });
+          }
+
+          // 기존 단가 조회
+          let existingPriceRows: any[] = [];
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingPriceRows = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 단가 upsert
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          const usedPriceIds = new Set<string>();
+          for (let pi = 0; pi < priceRows.length; pi++) {
+            const price = priceRows[pi];
+            const priceData = {
+              mapping_id: firstMappingId || editItemData.id,
+              supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            };
+            const existPrice = existingPriceRows[pi];
+            if (existPrice) {
+              await apiClient.put(`/table-management/tables/${PRICE_TABLE}/edit`, {
+                originalData: { id: existPrice.id },
+                updatedData: priceData,
+              });
+              usedPriceIds.add(existPrice.id);
+            } else {
+              await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+                id: crypto.randomUUID(), ...priceData,
+              });
+            }
+          }
+          // 초과분 delete
+          const toDeletePrices = existingPriceRows.filter((p) => !usedPriceIds.has(p.id));
+          if (toDeletePrices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: toDeletePrices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } else {
+          if (!mappingRows.length || !mappingRows[0]?.supplier_item_code) {
+            const existingCheck = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 1,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            if ((existingCheck.data?.data?.data || existingCheck.data?.data?.rows || []).length > 0) {
+              toast.warning(`${item.item_name || itemKey} 품목은 이미 등록되어 있습니다.`);
+              continue;
+            }
+          }
+
+          let mappingId: string | null = null;
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+            supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+            supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+          });
+          mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              supplier_item_code: mappingRows[mi].supplier_item_code || "",
+              supplier_item_name: mappingRows[mi].supplier_item_name || "",
+            });
+          }
+
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedItemsForDetail.length}개 품목이 추가되었습니다.`);
+      setItemDetailOpen(false);
+      setEditItemData(null);
+      setItemCheckedIds(new Set());
+      const cid = selectedSupplierId;
+      setSelectedSupplierId(null);
+      setTimeout(() => setSelectedSupplierId(cid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+      savingRef.current = false;
+    }
+  };
+
+  // 품목 매핑 삭제
+  const handlePriceItemDelete = async () => {
+    if (priceCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${priceCheckedIds.length}개 품목 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      for (const mappingId of priceCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: priceCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${priceCheckedIds.length}개 품목 매핑이 삭제되었습니다.`);
+      setPriceCheckedIds([]);
+      const cid = selectedSupplierId;
+      setSelectedSupplierId(null);
+      setTimeout(() => setSelectedSupplierId(cid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // EDataTable 컬럼 정의 (공급업체 목록) — ts.visibleColumns 순서를 따름
+  const supplierColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      supplier_code: { width: "w-[120px]" },
+      supplier_name: { minWidth: "min-w-[140px]" },
+      division: {
+        width: "w-[80px]",
+        render: (val: any) =>
+          val ? (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
+              {val}
+            </Badge>
+          ) : null,
+      },
+      contact_person: { width: "w-[80px]" },
+      contact_phone: { width: "w-[120px]" },
+      email: { width: "w-[160px]" },
+      business_number: { width: "w-[120px]" },
+      address: { minWidth: "min-w-[150px]" },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val}
+            </Badge>
+          ) : null,
+      },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (suppliers.length === 0) return;
+    toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
+    try {
+      const allMappings: any[] = [];
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 5000, autoFilter: true,
+      });
+      const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemIds.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+            autoFilter: true,
+          });
+          for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+            itemMap[item.item_number] = item;
+          }
+        } catch { /* skip */ }
+      }
+      for (const m of mappings) {
+        const itemInfo = itemMap[m.item_id] || {};
+        allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
+      }
+
+      const rows: Record<string, any>[] = [];
+      for (const c of suppliers) {
+        const suppMappings = allMappings.filter((m) => m.supplier_id === c.supplier_code);
+        if (suppMappings.length === 0) {
+          rows.push({
+            공급업체코드: c.supplier_code, 공급업체명: c.supplier_name,
+            공급업체유형: getCategoryLabel("division", c.division),
+            담당자: c.contact_person, 전화번호: c.contact_phone,
+            사업자번호: c.business_number, 이메일: c.email,
+            상태: getCategoryLabel("status", c.status),
+            품목코드: "", 품명: "", 규격: "",
+            공급업체품번: "", 공급업체품명: "",
+            기준가: "", 할인유형: "", 할인값: "", 단가: "", 통화: "",
+          });
+        } else {
+          for (const m of suppMappings) {
+            rows.push({
+              공급업체코드: c.supplier_code, 공급업체명: c.supplier_name,
+              공급업체유형: getCategoryLabel("division", c.division),
+              담당자: c.contact_person, 전화번호: c.contact_phone,
+              사업자번호: c.business_number, 이메일: c.email,
+              상태: getCategoryLabel("status", c.status),
+              품목코드: m.item_id || "", 품명: m.item_name || "", 규격: m.item_spec || "",
+              공급업체품번: m.supplier_item_code || "", 공급업체품명: m.supplier_item_name || "",
+              기준가: m.base_price || "", 할인유형: m.discount_type || "", 할인값: m.discount_value || "",
+              단가: m.calculated_price || "", 통화: m.currency_code || "",
+            });
+          }
+        }
+      }
+      await exportToExcel(rows, "공급업체관리.xlsx", "거래처+품목");
+      toast.dismiss("excel-dl");
+      toast.success(`${rows.length}행 다운로드 완료`);
+    } catch (err) {
+      toast.dismiss("excel-dl");
+      toast.error("다운로드에 실패했습니다.");
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={SUPPLIER_TABLE}
+        filterId="c16-supplier"
+        onFilterChange={setSearchFilters}
+        dataCount={suppliers.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button
+            variant="outline" size="sm" className="h-8" disabled={excelDetecting}
+            onClick={async () => {
+              setExcelDetecting(true);
+              try {
+                const result = await autoDetectMultiTableConfig(SUPPLIER_TABLE);
+                if (result.success && result.data) {
+                  setExcelChainConfig(result.data);
+                  setExcelUploadOpen(true);
+                } else {
+                  toast.error(result.message || "테이블 구조 분석 실패");
+                }
+              } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+            }}
+          >
+            {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />}
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 공급업체 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">공급업체 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {supplierCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <label className="flex items-center gap-1.5 cursor-pointer mr-1">
+                    <input type="checkbox" checked={showInactive} onChange={(e) => setShowInactive(e.target.checked)} className="rounded" />
+                    <span className="text-[11px] text-muted-foreground">거래정지 포함</span>
+                  </label>
+                  <Button size="sm" onClick={openSupplierRegister}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedSupplierId} onClick={openSupplierEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedSupplierId} onClick={handleSupplierDelete}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={supplierColumns}
+                data={ts.groupData(showInactive ? suppliers : suppliers.filter((c) => c.status !== "거래정지"))}
+                rowKey={(row) => row.id}
+                loading={supplierLoading}
+                emptyMessage="등록된 공급업체가 없어요"
+                selectedId={selectedSupplierId}
+                onSelect={(id) => setSelectedSupplierId(id)}
+                onRowDoubleClick={(row) => { setSelectedSupplierId(row.id); openSupplierEdit(); }}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-supplier"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedSupplierId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">공급업체를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 공급업체를 선택하면 상세 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 탭 + 버튼 통합 헤더 */}
+                  <Tabs
+                    value={rightTab}
+                    onValueChange={(v) => setRightTab(v as "items" | "delivery")}
+                    className="flex flex-col flex-1 overflow-hidden gap-0"
+                  >
+                    <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                      <TabsList className="bg-transparent h-auto p-0 rounded-none">
+                        <TabsTrigger
+                          value="items"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <Package className="w-3.5 h-3.5" /> 공급업체별 품목정보
+                          {Object.keys(priceGroups).length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{Object.keys(priceGroups).length}</Badge>
+                          )}
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="delivery"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <MapPin className="w-3.5 h-3.5" /> 납품처 정보
+                          {deliveryItems.length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{deliveryItems.length}</Badge>
+                          )}
+                        </TabsTrigger>
+                      </TabsList>
+                      <div className="flex gap-1.5">
+                        {rightTab === "items" ? (
+                          <>
+                            <Button size="sm" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
+                              <Plus className="w-3.5 h-3.5" /> 품목 추가
+                            </Button>
+                            <Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0} onClick={handlePriceItemDelete}>
+                              <Trash2 className="w-3.5 h-3.5" /> 삭제
+                            </Button>
+                          </>
+                        ) : (
+                          <Button size="sm" variant="outline" onClick={openSupplierEdit}>
+                            <Pencil className="w-3.5 h-3.5 mr-1" /> 공급업체 수정에서 관리
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 품목정보 탭 */}
+                    <TabsContent value="items" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[40px] text-center px-2">
+                                <input
+                                  type="checkbox"
+                                  className="rounded"
+                                  checked={priceItems.length > 0 && priceCheckedIds.length === priceItems.length}
+                                  onChange={(e) => setPriceCheckedIds(e.target.checked ? priceItems.map((p) => p.id) : [])}
+                                />
+                              </TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                              <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품번</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품명</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                              <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                              <TableHead className="w-[60px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                              <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {priceLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.keys(priceGroups).length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 품목이 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.entries(priceGroups).map(([itemKey, group]) => {
+                              const isExpanded = expandedItems.has(itemKey);
+                              const m = group.master;
+                              const isChecked = priceCheckedIds.includes(m.id);
+                              return (
+                                <React.Fragment key={itemKey}>
+                                  {/* 마스터 행 */}
+                                  <TableRow
+                                    className={cn(
+                                      "cursor-pointer border-l-[3px] border-l-transparent h-[41px]",
+                                      isChecked && "bg-primary/5 border-l-primary"
+                                    )}
+                                    onClick={() => {
+                                      setExpandedItems((prev) => {
+                                        const next = new Set(prev);
+                                        if (next.has(itemKey)) next.delete(itemKey); else next.add(itemKey);
+                                        return next;
+                                      });
+                                    }}
+                                    onDoubleClick={() => openEditItem(m)}
+                                  >
+                                    <TableCell
+                                      className="text-center px-2"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        setPriceCheckedIds((prev) =>
+                                          prev.includes(m.id) ? prev.filter((id) => id !== m.id) : [...prev, m.id]
+                                        );
+                                      }}
+                                    >
+                                      <input type="checkbox" className="rounded" checked={isChecked} readOnly />
+                                    </TableCell>
+                                    <TableCell className="text-[13px] font-mono">
+                                      <div className="flex items-center gap-1">
+                                        {isExpanded
+                                          ? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                          : <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                        }
+                                        {m.item_number}
+                                      </div>
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.supplier_item_code}</TableCell>
+                                    <TableCell className="text-[13px]">{m.supplier_item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.base_price_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">
+                                      {m.base_price ? Number(m.base_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.discount_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">{m.discount_value ? Number(m.discount_value).toLocaleString() : ""}</TableCell>
+                                    <TableCell className="text-[13px] text-right font-semibold">
+                                      {m.calculated_price ? Number(m.calculated_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.currency_code}</TableCell>
+                                  </TableRow>
+
+                                  {/* 현재 단가 카드 (펼쳤을 때) */}
+                                  {isExpanded && (() => {
+                                    const cp = group.details.find((p) => p.is_current) || group.details[0];
+                                    if (!cp) return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="py-3 px-4 text-xs text-muted-foreground">등록된 단가가 없어요</TableCell>
+                                      </TableRow>
+                                    );
+                                    return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="px-4 py-3">
+                                          <div className="border border-primary/20 rounded-lg bg-card overflow-hidden">
+                                            {/* 카드 헤더 */}
+                                            <div className="flex items-center justify-between px-4 py-2 bg-primary/[0.04] border-b border-primary/10">
+                                              <div className="flex items-center gap-2">
+                                                <Coins className="w-3.5 h-3.5 text-primary" />
+                                                <span className="text-xs font-semibold">적용 단가</span>
+                                                <Badge variant="secondary" className="text-[9px] px-1.5 py-0 bg-primary/10 text-primary">현재</Badge>
+                                              </div>
+                                              {group.details.length > 1 && (
+                                                <span className="text-[10px] text-muted-foreground">전체 {group.details.length}건 중</span>
+                                              )}
+                                            </div>
+                                            {/* 카드 내용 */}
+                                            <div className="px-5 py-3.5 flex items-end gap-0 text-[13px]">
+                                              <div className="flex flex-col pr-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기간</span>
+                                                <span className="font-mono text-muted-foreground text-xs">
+                                                  {cp.start_date ? String(cp.start_date).split("T")[0] : "—"} ~ {cp.end_date ? String(cp.end_date).split("T")[0] : "—"}
+                                                </span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준유형</span>
+                                                <span>{cp.base_price_type_label || "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준가</span>
+                                                <span className="font-mono font-medium">{cp.base_price ? Number(cp.base_price).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인유형</span>
+                                                <span>{cp.discount_type_label && cp.discount_type_label !== "할인없음" ? cp.discount_type_label : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인값</span>
+                                                <span className="font-mono">{cp.discount_value ? Number(cp.discount_value).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">단수처리</span>
+                                                <span>
+                                                  {cp.rounding_unit_value
+                                                    ? (priceCategoryOptions["rounding_unit_value"]?.find((o) => o.code === cp.rounding_unit_value)?.label || cp.rounding_unit_value)
+                                                    : "-"}
+                                                </span>
+                                              </div>
+                                              <span className="text-primary/50 px-4 pb-0.5 text-lg">→</span>
+                                              <div className="flex flex-col pl-1">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">계산단가</span>
+                                                <span className="text-base font-bold font-mono text-foreground">
+                                                  {(cp.calculated_price || cp.unit_price) ? Number(cp.calculated_price || cp.unit_price).toLocaleString() : "-"}
+                                                  <span className="text-xs font-normal text-muted-foreground ml-1.5">{cp.currency_label}</span>
+                                                </span>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })()}
+                                </React.Fragment>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+
+                    {/* 납품처 탭 */}
+                    <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                              <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                              <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                              <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {deliveryLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 납품처가 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.map((d) => (
+                              <TableRow key={d.id} className="h-[41px]">
+                                <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                                <TableCell className="text-sm">{d.destination_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                                <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                                <TableCell className="text-[13px]">{d.phone}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                                <TableCell className="text-center">
+                                  {d.is_default && (
+                                    <Badge variant="default" className="text-[10px] px-1.5 py-0 h-5">메인</Badge>
+                                  )}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 모달: 공급업체 등록/수정 (3탭) ── */}
+      <Dialog open={supplierModalOpen} onOpenChange={(open) => {
+        if (!open && isConfirmOpenRef.current) return;
+        setSupplierModalOpen(open);
+        if (!open) {
+          setModalContactFormOpen(false);
+          setModalDeliveryFormOpen(false);
+          setModalContactForm({});
+          setModalDeliveryForm({});
+          setModalContactEditId(null);
+          setModalDeliveryEditId(null);
+          fetchSuppliers();
+          if (supplierForm.supplier_code) {
+            const cid = selectedSupplierId;
+            setSelectedSupplierId(null);
+            setTimeout(() => setSelectedSupplierId(cid), 50);
+          }
+        }
+      }}>
+        <DialogContent className="max-w-4xl h-[85vh] flex flex-col overflow-hidden p-0">
+          <DialogHeader className="px-6 pt-5 pb-0 shrink-0">
+            <DialogTitle>{supplierEditMode ? "공급업체 수정" : "공급업체 등록"}</DialogTitle>
+            <DialogDescription>
+              {supplierEditMode ? "공급업체 정보를 수정합니다." : "새 공급업체를 등록합니다."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <Tabs value={supplierModalTab} onValueChange={(v: any) => setSupplierModalTab(v)} className="flex flex-col flex-1 overflow-hidden">
+            <div className="shrink-0">
+              <TabsList className="bg-transparent w-full h-auto p-0 rounded-none gap-0">
+                <TabsTrigger value="basic" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  기본정보
+                </TabsTrigger>
+                <TabsTrigger value="contacts" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  담당자 관리
+                  {modalContacts.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalContacts.length}</span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="delivery" className="flex-1 rounded-none py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  납품처 관리
+                  {modalDeliveries.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalDeliveries.length}</span>
+                  )}
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            {/* 기본정보 탭 */}
+            <TabsContent value="basic" className="flex-1 overflow-y-auto mt-0">
+              <div className="px-6 py-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체 코드</Label>
+                    <Input
+                      value={supplierForm.supplier_code || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, supplier_code: e.target.value }))}
+                      placeholder={supplierEditMode ? "" : "자동 생성"}
+                      className={cn("h-9 font-mono", !supplierEditMode && supplierForm.supplier_code && "bg-muted")}
+                      readOnly={!supplierEditMode && !!supplierForm.supplier_code}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={supplierForm.supplier_name || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, supplier_name: e.target.value }))}
+                      placeholder="공급업체명"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체 유형</Label>
+                    <Select
+                      value={supplierForm.division || "__none__"}
+                      onValueChange={(v) => setSupplierForm((p) => ({ ...p, division: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="공급업체 유형" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["division"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+                    <Select
+                      value={supplierForm.status || "__none__"}
+                      onValueChange={(v) => setSupplierForm((p) => ({ ...p, status: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="상태" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체담당자</Label>
+                    <Input
+                      value={supplierForm.contact_person || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, contact_person: e.target.value }))}
+                      placeholder="공급업체담당자"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">전화번호</Label>
+                    <Input
+                      value={supplierForm.contact_phone || ""}
+                      onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                      placeholder="010-0000-0000"
+                      className={cn("h-9", formErrors.contact_phone && "border-destructive")}
+                    />
+                    {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">이메일</Label>
+                    <Input
+                      value={supplierForm.email || ""}
+                      onChange={(e) => handleFormChange("email", e.target.value)}
+                      placeholder="example@email.com"
+                      className={cn("h-9", formErrors.email && "border-destructive")}
+                    />
+                    {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">사업자번호</Label>
+                    <Input
+                      value={supplierForm.business_number || ""}
+                      onChange={(e) => handleFormChange("business_number", e.target.value)}
+                      placeholder="000-00-00000"
+                      className={cn("h-9", formErrors.business_number && "border-destructive")}
+                    />
+                    {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+                  </div>
+                  <div className="space-y-1.5 col-span-2">
+                    <Label className="text-sm">주소</Label>
+                    <Input
+                      value={supplierForm.address || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="주소"
+                      className="h-9"
+                    />
+                  </div>
+                </div>
+
+                {/* 세금유형 */}
+                <div className="mt-4 pt-4 border-t">
+                  <div className="flex items-center justify-between mb-2">
+                    <Label className="text-sm font-semibold flex items-center gap-1.5">
+                      <Coins className="w-3.5 h-3.5 text-primary" /> 세금유형
+                    </Label>
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => {
+                      setTaxTypeRows((prev) => [...prev, { _id: `tax_${Date.now()}_${Math.random()}`, tax_type_name: "", rate: "" }]);
+                    }}>
+                      <Plus className="h-3 w-3 mr-1" /> 추가
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    {taxTypeRows.map((row, idx) => (
+                      <div key={row._id} className="flex gap-2 items-center">
+                        <span className="text-xs text-muted-foreground w-4 shrink-0">{idx + 1}</span>
+                        <Select value={row.tax_type_name} onValueChange={(v) => {
+                          setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, tax_type_name: v } : r));
+                        }}>
+                          <SelectTrigger className="h-9 text-[13px] flex-1"><SelectValue placeholder="세금유형 선택" /></SelectTrigger>
+                          <SelectContent>
+                            {taxTypeOptions.map((o) => (
+                              <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <Input
+                          value={row.rate}
+                          onChange={(e) => {
+                            const v = e.target.value.replace(/[^\d.]/g, "");
+                            setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, rate: v } : r));
+                          }}
+                          placeholder="세율 %"
+                          className="h-9 text-[13px] w-[80px] text-right"
+                        />
+                        <span className="text-xs text-muted-foreground">%</span>
+                        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                          onClick={() => setTaxTypeRows((prev) => prev.filter((r) => r._id !== row._id))}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* 담당자 관리 탭 */}
+            <TabsContent value="contacts" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 담당자 목록 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    담당자 {modalContacts.length}명
+                  </span>
+                  <Button size="sm" onClick={() => {
+                    setModalContactForm({});
+                    setModalContactEditId(null);
+                    setModalContactFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 담당자 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalContactLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalContacts.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Users className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 담당자가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자명</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부서</TableHead>
+                          <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalContacts].sort((a, b) => {
+                          const aMain = a.is_main === "Y" || a.is_main === true ? 0 : 1;
+                          const bMain = b.is_main === "Y" || b.is_main === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((c) => (
+                          <TableRow key={c._localId || c.id} className="h-[41px]">
+                            <TableCell className="text-sm font-medium">{c.contact_name}</TableCell>
+                            <TableCell className="text-[13px]">{c.contact_phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.contact_email}</TableCell>
+                            <TableCell className="text-[13px]">{c.department}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (c.is_main === "Y" || c.is_main === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = c.is_main === "Y" || c.is_main === true;
+                                  if (isCurrentMain) {
+                                    // 메인 해제
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id) ? { ...item, is_main: "N" } : item
+                                    ));
+                                  } else {
+                                    // 메인 설정 — 기존 메인이 있으면 확인
+                                    const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== (c._localId || c.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id)
+                                        ? { ...item, is_main: "Y" }
+                                        : { ...item, is_main: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(c.is_main === "Y" || c.is_main === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalContactForm({ ...c });
+                                    setModalContactEditId(c._localId || c.id);
+                                    setModalContactFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalContactDelete(c._localId || c.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 담당자 폼 (인라인) */}
+                {modalContactFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalContactEditId ? "담당자 수정" : "담당자 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalContactForm.contact_name || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_name: e.target.value }))}
+                          placeholder="담당자명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalContactForm.contact_phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalContactForm((p) => ({ ...p, contact_phone: formatted }));
+                          }}
+                          placeholder="010-0000-0000"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">이메일</Label>
+                        <Input
+                          value={modalContactForm.contact_email || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_email: e.target.value }))}
+                          placeholder="example@email.com"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">부서</Label>
+                        <Input
+                          value={modalContactForm.department || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, department: e.target.value }))}
+                          placeholder="부서명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalContactForm.memo || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalContactForm.is_main === "Y" || modalContactForm.is_main === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== modalContactEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalContacts((prev) => prev.map((item) => ({ ...item, is_main: "N" })));
+                                }
+                                setModalContactForm((p) => ({ ...p, is_main: "Y" }));
+                              } else {
+                                setModalContactForm((p) => ({ ...p, is_main: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 담당자</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalContactFormOpen(false); setModalContactForm({}); setModalContactEditId(null); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalContactSave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalContactEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            {/* ── 탭3: 납품처 관리 ── */}
+            <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 납품처 목록 헤더 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    납품처 {modalDeliveries.length}개
+                  </span>
+                  <Button size="sm" onClick={async () => {
+                    const code = await generateDeliveryCode();
+                    setModalDeliveryForm({ destination_code: code });
+                    setModalDeliveryEditId(null);
+                    setModalDeliveryFormErrors({});
+                    setModalDeliveryFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalDeliveryLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalDeliveries.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <MapPin className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 납품처가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalDeliveries].sort((a, b) => {
+                          const aMain = a.is_default === "Y" || a.is_default === true ? 0 : 1;
+                          const bMain = b.is_default === "Y" || b.is_default === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((d) => (
+                          <TableRow key={d._localId || d.id || d.destination_code} className="h-[41px]">
+                            <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                            <TableCell className="text-sm">{d.destination_name}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                            <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                            <TableCell className="text-[13px]">{d.phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (d.is_default === "Y" || d.is_default === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = d.is_default === "Y" || d.is_default === true;
+                                  if (isCurrentMain) {
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id) ? { ...item, is_default: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== (d._localId || d.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id)
+                                        ? { ...item, is_default: "Y" }
+                                        : { ...item, is_default: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(d.is_default === "Y" || d.is_default === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalDeliveryForm({ ...d });
+                                    setModalDeliveryEditId(d._localId || d.id);
+                                    setModalDeliveryFormErrors({});
+                                    setModalDeliveryFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalDeliveryDelete(d._localId || d.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 납품처 폼 (인라인) */}
+                {modalDeliveryFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalDeliveryEditId ? "납품처 수정" : "납품처 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처코드</Label>
+                        <Input
+                          value={modalDeliveryForm.destination_code || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
+                          placeholder="자동 생성"
+                          className={cn("h-8 text-sm font-mono", modalDeliveryForm.destination_code && "bg-muted")}
+                          readOnly={!!modalDeliveryForm.destination_code && !modalDeliveryEditId}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalDeliveryForm.destination_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
+                          placeholder="납품처명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자</Label>
+                        <Input
+                          value={modalDeliveryForm.manager_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
+                          placeholder="담당자"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 col-span-2">
+                        <Label className="text-xs">주소</Label>
+                        <Input
+                          value={modalDeliveryForm.address || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, address: e.target.value }))}
+                          placeholder="주소"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalDeliveryForm.phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalDeliveryForm((p) => ({ ...p, phone: formatted }));
+                            const err = validateField("phone", formatted);
+                            setModalDeliveryFormErrors((p) => {
+                              const n = { ...p };
+                              if (err) n.phone = err; else delete n.phone;
+                              return n;
+                            });
+                          }}
+                          placeholder="010-0000-0000"
+                          className={cn("h-8 text-sm", modalDeliveryFormErrors.phone && "border-destructive")}
+                        />
+                        {modalDeliveryFormErrors.phone && <p className="text-xs text-destructive">{modalDeliveryFormErrors.phone}</p>}
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalDeliveryForm.memo || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== modalDeliveryEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalDeliveries((prev) => prev.map((item) => ({ ...item, is_default: "N" })));
+                                }
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "Y" }));
+                              } else {
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 납품처로 설정</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalDeliveryFormOpen(false); setModalDeliveryForm({}); setModalDeliveryEditId(null); setModalDeliveryFormErrors({}); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalDeliverySave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalDeliveryEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+          <div className="border-t px-6 py-3 flex items-center gap-2 shrink-0">
+            {!supplierEditMode && (
+              <label className="flex items-center gap-2 cursor-pointer mr-auto">
+                <input type="checkbox" checked={continuousInput} onChange={(e) => setContinuousInput(e.target.checked)} className="rounded" />
+                <span className="text-sm font-medium">연속입력</span>
+              </label>
+            )}
+            <Button variant="outline" onClick={() => setSupplierModalOpen(false)}>닫기</Button>
+            <Button onClick={handleSupplierSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {supplierEditMode ? "저장" : "등록"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 선택 (1단계) ── */}
+      <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>품목 선택</DialogTitle>
+            <DialogDescription>공급업체에 추가할 품목을 선택하세요. (전체: {itemTotalCount}건 / 대상: {itemSearchResults.length}건{itemCheckedIds.size > 0 ? ` / 선택: ${itemCheckedIds.size}건` : ""})</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              placeholder="품명/품목코드 검색"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+              className="h-9 flex-1"
+            />
+            <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+              {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+            </Button>
+          </div>
+          <div className="overflow-auto max-h-[350px] border rounded-lg">
+            <Table noWrapper>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted h-10">
+                  <TableHead className="w-[40px] text-center px-2">
+                    <input
+                      type="checkbox"
+                      className="rounded"
+                      checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                      onChange={(e) => {
+                        if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                        else setItemCheckedIds(new Set());
+                      }}
+                    />
+                  </TableHead>
+                  <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="min-w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                  <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {itemSearchResults.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                      검색 결과가 없어요
+                    </TableCell>
+                  </TableRow>
+                ) : itemSearchResults.map((item) => (
+                  <TableRow
+                    key={item.id}
+                    className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                    onClick={() => setItemCheckedIds((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                      return next;
+                    })}
+                  >
+                    <TableCell className="text-center px-2">
+                      <input type="checkbox" className="rounded" checked={itemCheckedIds.has(item.id)} readOnly />
+                    </TableCell>
+                    <TableCell className="text-[13px] font-mono">
+                      <span className="block truncate" title={item.item_number}>{item.item_number}</span>
+                    </TableCell>
+                    <TableCell className="text-sm">{item.item_name}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.size}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.material}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.unit}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <DialogFooter className="flex items-center justify-between w-full">
+            <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+              <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 상세 입력 (2단계) ── */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedSupplier?.supplier_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData
+                ? "거래처 품번/품명과 기간별 단가를 수정합니다."
+                : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2 flex-1 overflow-y-auto">
+            {selectedItemsForDetail.map((item, idx) => {
+              const itemKey = item.item_number || item.id;
+              const mappingRows = itemMappings[itemKey] || [];
+              const prices = itemPrices[itemKey] || [];
+
+              return (
+                <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
+                  {/* 품목 헤더 */}
+                  <div className="px-5 py-3 bg-muted/30 border-b">
+                    <div className="font-bold">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
+                  </div>
+
+                  <div className="flex gap-4 p-5 items-stretch">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Tag className="w-3.5 h-3.5 text-primary" /> 거래처 품번/품명 관리
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 품번 추가
+                        </Button>
+                      </div>
+                      <div className="border-2 border-foreground/20 rounded-lg bg-background p-3 space-y-2 min-h-[200px] max-h-[350px] overflow-y-auto flex-1">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : (
+                          <DndContext
+                            sensors={dndSensors}
+                            collisionDetection={closestCenter}
+                            onDragEnd={(e) => handleMappingDragEnd(itemKey, e)}
+                          >
+                            <SortableContext items={mappingRows.map((r) => r._id)} strategy={verticalListSortingStrategy}>
+                              {mappingRows.map((mRow, mIdx) => (
+                                <SortableMappingRow key={mRow._id} id={mRow._id}>
+                                  <span className="text-xs text-muted-foreground/50 font-mono w-4 shrink-0 text-center">{mIdx + 1}</span>
+                                  <Input
+                                    value={mRow.supplier_item_code}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "supplier_item_code", e.target.value)}
+                                    placeholder="거래처 품번"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Input
+                                    value={mRow.supplier_item_name}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "supplier_item_name", e.target.value)}
+                                    placeholder="거래처 품명"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Button
+                                    variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                                    onClick={() => removeMappingRow(itemKey, mRow._id)}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                </SortableMappingRow>
+                              ))}
+                            </SortableContext>
+                          </DndContext>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Coins className="w-3.5 h-3.5 text-primary" /> 기간별 단가 설정
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3 flex-1 overflow-y-auto max-h-[350px]">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border-2 border-foreground/20 rounded-lg bg-background overflow-hidden">
+                            <div
+                              className="flex items-center justify-between px-4 py-2.5 cursor-pointer hover:bg-muted/50 transition-colors"
+                              onClick={() => setCollapsedPriceCards((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(price._id)) next.delete(price._id); else next.add(price._id);
+                                return next;
+                              })}
+                            >
+                              <div className="flex items-center gap-2">
+                                {collapsedPriceCards.has(price._id)
+                                  ? <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                                  : <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                                }
+                                <span className="text-[13px] font-semibold text-muted-foreground">단가 {pIdx + 1}</span>
+                                {collapsedPriceCards.has(price._id) && price.calculated_price && (
+                                  <span className="text-xs text-muted-foreground ml-2">
+                                    {price.start_date || "—"} ~ {price.end_date || "—"} · <span className="font-mono font-bold text-foreground">{Number(price.calculated_price).toLocaleString()}</span> {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                  </span>
+                                )}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                {prices.length > 1 && (
+                                  <Button
+                                    variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
+                                    onClick={(e) => { e.stopPropagation(); removePriceRow(itemKey, price._id); }}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                )}
+                              </div>
+                            </div>
+                            {!collapsedPriceCards.has(price._id) && <div className="px-4 pb-4 space-y-2.5">
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">시작일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.start_date}
+                                  onChange={(e) => {
+                                    const v = e.target.value;
+                                    updatePriceRow(itemKey, price._id, "start_date", v);
+                                    if (price.end_date && v > price.end_date) {
+                                      updatePriceRow(itemKey, price._id, "end_date", v);
+                                    }
+                                  }}
+                                  max={price.end_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <span className="text-xs text-muted-foreground mt-4">~</span>
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">종료일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.end_date}
+                                  onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                  min={price.start_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <div className="w-[80px]">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">&nbsp;</Label>
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="통화" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "base_price", raw);
+                                }}
+                                className="h-9 text-[13px] text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-9 text-[13px] text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-1.5 pt-2 border-t">
+                              <span className="text-[13px] text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-base font-mono">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                              {price.calculated_price && price.currency_code && (
+                                <span className="text-[13px] text-muted-foreground">
+                                  {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                </span>
+                              )}
+                            </div>
+                            </div>}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal
+          open={excelUploadOpen}
+          onOpenChange={(open) => {
+            setExcelUploadOpen(open);
+            if (!open) setExcelChainConfig(null);
+          }}
+          config={excelChainConfig}
+          onSuccess={() => {
+            fetchSuppliers();
+            const cid = selectedSupplierId;
+            setSelectedSupplierId(null);
+            setTimeout(() => setSelectedSupplierId(cid), 50);
+          }}
+        />
+      )}
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/quality/inspection/page.tsx b/frontend/app/(main)/COMPANY_30/quality/inspection/page.tsx
new file mode 100644
index 00000000..cacd9d02
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/quality/inspection/page.tsx
@@ -0,0 +1,1703 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Plus,
+  Trash2,
+  Save,
+  Loader2,
+  Pencil,
+  ClipboardCheck,
+  AlertTriangle,
+  Wrench,
+  Search,
+  Inbox,
+  Settings2,
+} from "lucide-react";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+/* ───── 테이블명 ───── */
+const INSPECTION_TABLE = "inspection_standard";
+
+const INSPECTION_COLUMNS = [
+  { key: "inspection_code", label: "검사코드" },
+  { key: "inspection_type", label: "검사유형" },
+  { key: "inspection_criteria", label: "검사기준" },
+  { key: "inspection_item", label: "검사항목" },
+  { key: "inspection_method", label: "검사방법" },
+  { key: "judgment_criteria", label: "판단기준" },
+  { key: "unit", label: "단위" },
+  { key: "apply_type", label: "적용구분" },
+  { key: "manager", label: "관리자" },
+];
+const DEFECT_TABLE = "defect_standard_mng";
+const EQUIPMENT_TABLE = "inspection_equipment_mng";
+
+/* ───── 카테고리 flatten ───── */
+const flattenCategories = (vals: any[]): { code: string; label: string }[] => {
+  const result: { code: string; label: string }[] = [];
+  for (const v of vals) {
+    result.push({ code: v.valueCode, label: v.valueLabel });
+    if (v.children?.length) result.push(...flattenCategories(v.children));
+  }
+  return result;
+};
+
+export default function InspectionManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-inspection", INSPECTION_TABLE, INSPECTION_COLUMNS);
+
+  const [activeTab, setActiveTab] = useState("inspection");
+
+  /* ───── 검사기준 ───── */
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspLoading, setInspLoading] = useState(false);
+  const [inspCount, setInspCount] = useState(0);
+  const [inspChecked, setInspChecked] = useState<string[]>([]);
+  const [inspModalOpen, setInspModalOpen] = useState(false);
+  const [inspEditMode, setInspEditMode] = useState(false);
+  const [inspForm, setInspForm] = useState<Record<string, any>>({});
+  const [inspSaving, setInspSaving] = useState(false);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  /* ───── 불량관리 ───── */
+  const [defects, setDefects] = useState<any[]>([]);
+  const [defLoading, setDefLoading] = useState(false);
+  const [defCount, setDefCount] = useState(0);
+  const [defChecked, setDefChecked] = useState<string[]>([]);
+  const [defModalOpen, setDefModalOpen] = useState(false);
+  const [defEditMode, setDefEditMode] = useState(false);
+  const [defForm, setDefForm] = useState<Record<string, any>>({});
+  const [defSaving, setDefSaving] = useState(false);
+  const [defKeyword, setDefKeyword] = useState("");
+
+  /* ───── 검사장비 ───── */
+  const [equipments, setEquipments] = useState<any[]>([]);
+  const [eqLoading, setEqLoading] = useState(false);
+  const [eqCount, setEqCount] = useState(0);
+  const [eqChecked, setEqChecked] = useState<string[]>([]);
+  const [eqModalOpen, setEqModalOpen] = useState(false);
+  const [eqEditMode, setEqEditMode] = useState(false);
+  const [eqForm, setEqForm] = useState<Record<string, any>>({});
+  const [eqSaving, setEqSaving] = useState(false);
+  const [eqKeyword, setEqKeyword] = useState("");
+
+  /* ───── 채번 ───── */
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  /* ───── 카테고리 옵션 ───── */
+  const [catOptions, setCatOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [userOptions, setUserOptions] = useState<{ code: string; label: string }[]>([]);
+
+  /* ═══════════════════ 카테고리 로드 ═══════════════════ */
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const catList = [
+        { table: INSPECTION_TABLE, col: "inspection_type" },
+        { table: INSPECTION_TABLE, col: "apply_type" },
+        { table: INSPECTION_TABLE, col: "inspection_method" },
+        { table: INSPECTION_TABLE, col: "judgment_criteria" },
+        { table: INSPECTION_TABLE, col: "unit" },
+        { table: DEFECT_TABLE, col: "defect_type" },
+        { table: DEFECT_TABLE, col: "severity" },
+        { table: DEFECT_TABLE, col: "inspection_type" },
+        { table: DEFECT_TABLE, col: "is_active" },
+        { table: EQUIPMENT_TABLE, col: "equipment_type" },
+        { table: EQUIPMENT_TABLE, col: "equipment_status" },
+      ];
+      await Promise.all(
+        catList.map(async ({ table, col }) => {
+          try {
+            const res = await apiClient.get(`/table-categories/${table}/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              optMap[`${table}.${col}`] = flattenCategories(res.data.data);
+            }
+          } catch {
+            /* skip */
+          }
+        }),
+      );
+      setCatOptions(optMap);
+      // 사용자 목록 로드
+      try {
+        const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
+          page: 1,
+          size: 500,
+          autoFilter: true,
+        });
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        setUserOptions(
+          users.map((u: any) => ({
+            code: u.user_id || u.id,
+            label: `${u.user_name || u.name || u.user_id}${u.dept_name ? ` (${u.dept_name})` : ""}`,
+          })),
+        );
+      } catch {
+        /* skip */
+      }
+    };
+    load();
+  }, []);
+
+  const getCatLabel = (table: string, col: string, code: string) => {
+    if (!code) return "";
+    const opts = catOptions[`${table}.${col}`];
+    if (!opts) return code;
+    // 쉼표 구분 다중 코드 지원
+    if (code.includes(",")) {
+      return code
+        .split(",")
+        .filter(Boolean)
+        .map((c) => opts.find((o) => o.code === c)?.label || c)
+        .join(", ");
+    }
+    return opts.find((o) => o.code === code)?.label || code;
+  };
+
+  const inspTableColumns = useMemo<EDataTableColumn[]>(() => {
+    return ts.visibleColumns.map((col) => {
+      const base: EDataTableColumn = { key: col.key, label: col.label };
+      if (["inspection_type", "inspection_method", "judgment_criteria", "unit", "apply_type"].includes(col.key)) {
+        base.render = (v: any, row: any) => getCatLabel(INSPECTION_TABLE, col.key, row[col.key]);
+      }
+      return base;
+    });
+  }, [ts.visibleColumns, catOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  // 다중값 컬럼 (쉼표 구분 저장) — 서버 equals 대신 contains 사용
+  const MULTI_VALUE_COLUMNS = ["inspection_type"];
+
+  const fetchInspections = useCallback(async () => {
+    setInspLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({
+        columnName: f.columnName,
+        operator: MULTI_VALUE_COLUMNS.includes(f.columnName) ? "contains" : f.operator,
+        value: f.value,
+      }));
+      const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setInspections(rows);
+      setInspCount(rows.length);
+    } catch {
+      toast.error("검사기준 조회에 실패했어요");
+    } finally {
+      setInspLoading(false);
+    }
+  }, [searchFilters]);
+
+  const fetchDefects = useCallback(async () => {
+    setDefLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DEFECT_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setDefects(rows);
+      setDefCount(rows.length);
+    } catch {
+      toast.error("불량관리 조회에 실패했어요");
+    } finally {
+      setDefLoading(false);
+    }
+  }, []);
+
+  const fetchEquipments = useCallback(async () => {
+    setEqLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setEquipments(rows);
+      setEqCount(rows.length);
+    } catch {
+      toast.error("검사장비 조회에 실패했어요");
+    } finally {
+      setEqLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchInspections();
+  }, [fetchInspections]);
+  useEffect(() => {
+    fetchDefects();
+    fetchEquipments();
+  }, []);
+
+  /* ───── 클라이언트 필터 ───── */
+  const filteredDefects = defKeyword.trim()
+    ? defects.filter(
+        (r) =>
+          (r.defect_name || "").toLowerCase().includes(defKeyword.toLowerCase()) ||
+          (r.defect_type || "").toLowerCase().includes(defKeyword.toLowerCase()),
+      )
+    : defects;
+
+  const filteredEquipments = eqKeyword.trim()
+    ? equipments.filter(
+        (r) =>
+          (r.equipment_name || "").toLowerCase().includes(eqKeyword.toLowerCase()) ||
+          (r.model_name || "").toLowerCase().includes(eqKeyword.toLowerCase()),
+      )
+    : equipments;
+
+  /* ═══════════════════ 검사기준 CRUD ═══════════════════ */
+  const openInspCreate = async () => {
+    setInspForm({});
+    setInspEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setInspModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${INSPECTION_TABLE}/inspection_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+  const openInspEdit = (row: any) => {
+    setInspForm({ ...row });
+    setInspEditMode(true);
+    setInspModalOpen(true);
+  };
+  const saveInspection = async () => {
+    if (!numberingRuleId && !inspForm.inspection_code) {
+      toast.error("검사코드는 필수예요");
+      return;
+    }
+    if (!inspForm.inspection_type) {
+      toast.error("유형을 1개 이상 선택해주세요");
+      return;
+    }
+    if (!inspForm.inspection_criteria) {
+      toast.error("검사기준은 필수예요");
+      return;
+    }
+    if (!inspForm.inspection_item) {
+      toast.error("검사항목은 필수예요");
+      return;
+    }
+    if (!inspForm.judgment_criteria) {
+      toast.error("판단기준은 필수예요");
+      return;
+    }
+    setInspSaving(true);
+    try {
+      let finalCode = inspForm.inspection_code || "";
+      if (!inspEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setInspSaving(false);
+          return;
+        }
+      }
+      if (inspEditMode) {
+        await apiClient.put(`/table-management/tables/${INSPECTION_TABLE}/edit`, {
+          originalData: { id: inspForm.id },
+          updatedData: inspForm,
+        });
+        toast.success("검사기준을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          ...inspForm,
+          inspection_code: finalCode,
+        });
+        toast.success("검사기준을 등록했어요");
+      }
+      setInspModalOpen(false);
+      fetchInspections();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setInspSaving(false);
+    }
+  };
+  const deleteInspections = async () => {
+    if (inspChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("검사기준 삭제", {
+      description: `선택한 ${inspChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${INSPECTION_TABLE}/delete`, {
+        data: inspChecked.map((id) => ({ id })),
+      });
+      toast.success(`${inspChecked.length}건을 삭제했어요`);
+      setInspChecked([]);
+      fetchInspections();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ 불량관리 CRUD ═══════════════════ */
+  const openDefCreate = async () => {
+    setDefForm({});
+    setDefEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setDefModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DEFECT_TABLE}/defect_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+  const openDefEdit = (row: any) => {
+    setDefForm({ ...row });
+    setDefEditMode(true);
+    setDefModalOpen(true);
+  };
+  const saveDefect = async () => {
+    if (!numberingRuleId && !defForm.defect_code) {
+      toast.error("불량코드는 필수예요");
+      return;
+    }
+    if (!defForm.defect_type) {
+      toast.error("불량유형은 필수예요");
+      return;
+    }
+    if (!defForm.defect_name) {
+      toast.error("불량명은 필수예요");
+      return;
+    }
+    if (!defForm.severity) {
+      toast.error("심각도는 필수예요");
+      return;
+    }
+    if (!defForm.defect_content) {
+      toast.error("불량내용은 필수예요");
+      return;
+    }
+    if (!defForm.inspection_type) {
+      toast.error("검사유형을 1개 이상 선택해주세요");
+      return;
+    }
+    setDefSaving(true);
+    try {
+      let finalCode = defForm.defect_code || "";
+      if (!defEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setDefSaving(false);
+          return;
+        }
+      }
+      if (defEditMode) {
+        await apiClient.put(`/table-management/tables/${DEFECT_TABLE}/edit`, {
+          originalData: { id: defForm.id },
+          updatedData: defForm,
+        });
+        toast.success("불량유형을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${DEFECT_TABLE}/add`, { id: crypto.randomUUID(), ...defForm, defect_code: finalCode });
+        toast.success("불량유형을 등록했어요");
+      }
+      setDefModalOpen(false);
+      fetchDefects();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setDefSaving(false);
+    }
+  };
+  const deleteDefects = async () => {
+    if (defChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("불량유형 삭제", {
+      description: `선택한 ${defChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DEFECT_TABLE}/delete`, {
+        data: defChecked.map((id) => ({ id })),
+      });
+      toast.success(`${defChecked.length}건을 삭제했어요`);
+      setDefChecked([]);
+      fetchDefects();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ 검사장비 CRUD ═══════════════════ */
+  const openEqCreate = async () => {
+    setEqForm({
+      calibration_period: "12",
+      equipment_status: "NORMAL",
+    });
+    setEqEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setEqModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${EQUIPMENT_TABLE}/equipment_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      } else {
+        // 채번 규칙 없으면 기존 수동 채번 fallback
+        const maxNum =
+          equipments
+            .map((e: any) => e.equipment_code || "")
+            .filter((c: string) => /^EQP-\d+$/.test(c))
+            .map((c: string) => parseInt(c.replace("EQP-", ""), 10))
+            .sort((a: number, b: number) => b - a)[0] || 0;
+        setEqForm((p) => ({ ...p, equipment_code: `EQP-${String(maxNum + 1).padStart(3, "0")}` }));
+      }
+    } catch {
+      // 채번 규칙 조회 실패 시 기존 수동 채번 fallback
+      const maxNum =
+        equipments
+          .map((e: any) => e.equipment_code || "")
+          .filter((c: string) => /^EQP-\d+$/.test(c))
+          .map((c: string) => parseInt(c.replace("EQP-", ""), 10))
+          .sort((a: number, b: number) => b - a)[0] || 0;
+      setEqForm((p) => ({ ...p, equipment_code: `EQP-${String(maxNum + 1).padStart(3, "0")}` }));
+    }
+  };
+  const openEqEdit = (row: any) => {
+    setEqForm({ ...row });
+    setEqEditMode(true);
+    setEqModalOpen(true);
+  };
+  const saveEquipment = async () => {
+    if (!numberingRuleId && !eqForm.equipment_code) {
+      toast.error("장비코드는 필수예요");
+      return;
+    }
+    if (!eqForm.equipment_name) {
+      toast.error("장비명은 필수예요");
+      return;
+    }
+    if (!eqForm.equipment_type) {
+      toast.error("장비유형은 필수예요");
+      return;
+    }
+    setEqSaving(true);
+    try {
+      let finalCode = eqForm.equipment_code || "";
+      if (!eqEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setEqSaving(false);
+          return;
+        }
+      }
+      if (eqEditMode) {
+        await apiClient.put(`/table-management/tables/${EQUIPMENT_TABLE}/edit`, {
+          originalData: { id: eqForm.id },
+          updatedData: eqForm,
+        });
+        toast.success("검사장비를 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/add`, { id: crypto.randomUUID(), ...eqForm, equipment_code: finalCode });
+        toast.success("검사장비를 등록했어요");
+      }
+      setEqModalOpen(false);
+      fetchEquipments();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setEqSaving(false);
+    }
+  };
+  const deleteEquipments = async () => {
+    if (eqChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("검사장비 삭제", {
+      description: `선택한 ${eqChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${EQUIPMENT_TABLE}/delete`, {
+        data: eqChecked.map((id) => ({ id })),
+      });
+      toast.success(`${eqChecked.length}건을 삭제했어요`);
+      setEqChecked([]);
+      fetchEquipments();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="bg-card rounded-lg border">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <div className="border-b px-3">
+            <TabsList className="h-auto gap-0 bg-transparent p-0">
+              <TabsTrigger
+                value="inspection"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <ClipboardCheck className="mr-2 h-4 w-4" />
+                검사기준
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {inspCount}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="defect"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <AlertTriangle className="mr-2 h-4 w-4" />
+                불량관리
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {defCount}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="equipment"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <Wrench className="mr-2 h-4 w-4" />
+                검사장비
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {eqCount}
+                </Badge>
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* ──── 검사기준 탭 ──── */}
+          <TabsContent value="inspection" className="mt-0 p-3">
+            <div className="mb-3">
+              <DynamicSearchFilter
+                tableName={INSPECTION_TABLE}
+                filterId="c16-inspection"
+                onFilterChange={setSearchFilters}
+                externalFilterConfig={ts.filterConfig}
+                dataCount={inspCount}
+                extraActions={
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" onClick={openInspCreate}>
+                      <Plus className="mr-1 h-4 w-4" />
+                      등록
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        const sel = inspections.find((r) => inspChecked.includes(r.id));
+                        if (sel) openInspEdit(sel);
+                        else toast.error("수정할 항목을 선택해주세요");
+                      }}
+                    >
+                      <Pencil className="mr-1 h-4 w-4" />
+                      수정
+                    </Button>
+                    <Button size="sm" variant="destructive" onClick={deleteInspections}>
+                      <Trash2 className="mr-1 h-4 w-4" />
+                      삭제
+                    </Button>
+                    <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                      <Settings2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                }
+              />
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <EDataTable
+                columns={inspTableColumns}
+                data={ts.groupData(inspections)}
+                loading={inspLoading}
+                emptyMessage="등록된 검사기준이 없어요"
+                showCheckbox={true}
+                checkedIds={inspChecked}
+                onCheckedChange={setInspChecked}
+                onRowDoubleClick={(row) => openInspEdit(row)}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-inspection-main"
+              />
+            </div>
+          </TabsContent>
+
+          {/* ──── 불량관리 탭 ──── */}
+          <TabsContent value="defect" className="mt-0 p-3">
+            <div className="mb-3 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="text-muted-foreground absolute top-2 left-2.5 h-3.5 w-3.5" />
+                  <Input
+                    className="h-8 w-56 pl-8 text-sm"
+                    placeholder="불량명 검색..."
+                    value={defKeyword}
+                    onChange={(e) => setDefKeyword(e.target.value)}
+                  />
+                </div>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">
+                  {filteredDefects.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openDefCreate}>
+                  <Plus className="mr-1 h-4 w-4" />
+                  등록
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const sel = defects.find((r) => defChecked.includes(r.id));
+                    if (sel) openDefEdit(sel);
+                    else toast.error("수정할 항목을 선택해주세요");
+                  }}
+                >
+                  <Pencil className="mr-1 h-4 w-4" />
+                  수정
+                </Button>
+                <Button size="sm" variant="destructive" onClick={deleteDefects}>
+                  <Trash2 className="mr-1 h-4 w-4" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={filteredDefects.length > 0 && defChecked.length === filteredDefects.length}
+                        onCheckedChange={(v) => setDefChecked(v ? filteredDefects.map((r) => r.id) : [])}
+                      />
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량코드
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량내용
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      심각도
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      검사유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      적용대상
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      사용여부
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      등록일
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      관리자
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      비고
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {defLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={12} className="py-8 text-center">
+                        <Loader2 className="text-muted-foreground mx-auto h-5 w-5 animate-spin" />
+                      </TableCell>
+                    </TableRow>
+                  ) : filteredDefects.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={12} className="text-muted-foreground py-10 text-center">
+                        <Inbox className="mx-auto mb-2 h-8 w-8 opacity-40" />
+                        <p className="text-sm">등록된 불량유형이 없어요</p>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredDefects.map((row) => {
+                      const severityLabel = getCatLabel(DEFECT_TABLE, "severity", row.severity);
+                      const severityColor =
+                        severityLabel === "치명적"
+                          ? "destructive"
+                          : severityLabel === "심각"
+                            ? "destructive"
+                            : severityLabel === "보통"
+                              ? "secondary"
+                              : "outline";
+                      return (
+                        <TableRow
+                          key={row.id}
+                          className={cn("cursor-pointer", defChecked.includes(row.id) && "bg-primary/5")}
+                          onClick={() =>
+                            setDefChecked((prev) =>
+                              prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id],
+                            )
+                          }
+                          onDoubleClick={() => openDefEdit(row)}
+                        >
+                          <TableCell onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                              checked={defChecked.includes(row.id)}
+                              onCheckedChange={(v) =>
+                                setDefChecked((prev) => (v ? [...prev, row.id] : prev.filter((id) => id !== row.id)))
+                              }
+                            />
+                          </TableCell>
+                          <TableCell className="font-semibold">{row.defect_code || "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant="secondary" className="text-[10px]">
+                              {getCatLabel(DEFECT_TABLE, "defect_type", row.defect_type)}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>{row.defect_name || "-"}</TableCell>
+                          <TableCell className="text-muted-foreground max-w-[200px] truncate">
+                            {row.defect_content || "-"}
+                          </TableCell>
+                          <TableCell>
+                            <Badge variant={severityColor as any} className="text-[10px]">
+                              {severityLabel || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-wrap gap-1">
+                              {row.inspection_type
+                                ? row.inspection_type
+                                    .split(",")
+                                    .filter(Boolean)
+                                    .map((c: string) => (
+                                      <Badge key={c} variant="outline" className="text-[10px]">
+                                        {getCatLabel(DEFECT_TABLE, "inspection_type", c)}
+                                      </Badge>
+                                    ))
+                                : "-"}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-wrap gap-1">
+                              {row.apply_target
+                                ? row.apply_target
+                                    .split(",")
+                                    .filter(Boolean)
+                                    .map((t: string) => (
+                                      <Badge key={t} variant="outline" className="text-[10px]">
+                                        {t}
+                                      </Badge>
+                                    ))
+                                : "-"}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <Badge
+                              variant={
+                                getCatLabel(DEFECT_TABLE, "is_active", row.is_active) === "사용"
+                                  ? "default"
+                                  : "secondary"
+                              }
+                              className="text-[10px]"
+                            >
+                              {getCatLabel(DEFECT_TABLE, "is_active", row.is_active) || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-muted-foreground">
+                            {row.reg_date || (row.created_date ? row.created_date.slice(0, 10) : "-")}
+                          </TableCell>
+                          <TableCell>{row.manager_id || "-"}</TableCell>
+                          <TableCell className="text-muted-foreground">{row.remarks || "-"}</TableCell>
+                        </TableRow>
+                      );
+                    })
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+
+          {/* ──── 검사장비 탭 ──── */}
+          <TabsContent value="equipment" className="mt-0 p-3">
+            <div className="mb-3 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="text-muted-foreground absolute top-2 left-2.5 h-3.5 w-3.5" />
+                  <Input
+                    className="h-8 w-56 pl-8 text-sm"
+                    placeholder="장비명 검색..."
+                    value={eqKeyword}
+                    onChange={(e) => setEqKeyword(e.target.value)}
+                  />
+                </div>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">
+                  {filteredEquipments.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openEqCreate}>
+                  <Plus className="mr-1 h-4 w-4" />
+                  등록
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const sel = equipments.find((r) => eqChecked.includes(r.id));
+                    if (sel) openEqEdit(sel);
+                    else toast.error("수정할 항목을 선택해주세요");
+                  }}
+                >
+                  <Pencil className="mr-1 h-4 w-4" />
+                  수정
+                </Button>
+                <Button size="sm" variant="destructive" onClick={deleteEquipments}>
+                  <Trash2 className="mr-1 h-4 w-4" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={filteredEquipments.length > 0 && eqChecked.length === filteredEquipments.length}
+                        onCheckedChange={(v) => setEqChecked(v ? filteredEquipments.map((r) => r.id) : [])}
+                      />
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비코드
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      모델명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      제조사
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      설치장소
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      최근교정일
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      교정주기(개월)
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비상태
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      담당자
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {eqLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={11} className="py-8 text-center">
+                        <Loader2 className="text-muted-foreground mx-auto h-5 w-5 animate-spin" />
+                      </TableCell>
+                    </TableRow>
+                  ) : filteredEquipments.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={11} className="text-muted-foreground py-10 text-center">
+                        <Inbox className="mx-auto mb-2 h-8 w-8 opacity-40" />
+                        <p className="text-sm">등록된 검사장비가 없어요</p>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredEquipments.map((row) => {
+                      const statusLabel = getCatLabel(EQUIPMENT_TABLE, "equipment_status", row.equipment_status);
+                      const statusColor =
+                        statusLabel === "정상" ? "default" : statusLabel === "폐기" ? "destructive" : "secondary";
+                      return (
+                        <TableRow
+                          key={row.id}
+                          className={cn("cursor-pointer", eqChecked.includes(row.id) && "bg-primary/5")}
+                          onClick={() =>
+                            setEqChecked((prev) =>
+                              prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id],
+                            )
+                          }
+                          onDoubleClick={() => openEqEdit(row)}
+                        >
+                          <TableCell onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                              checked={eqChecked.includes(row.id)}
+                              onCheckedChange={(v) =>
+                                setEqChecked((prev) => (v ? [...prev, row.id] : prev.filter((id) => id !== row.id)))
+                              }
+                            />
+                          </TableCell>
+                          <TableCell className="text-primary font-semibold">{row.equipment_code || "-"}</TableCell>
+                          <TableCell>{row.equipment_name || "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant="secondary" className="text-[10px]">
+                              {getCatLabel(EQUIPMENT_TABLE, "equipment_type", row.equipment_type) || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>{row.model_name || "-"}</TableCell>
+                          <TableCell>{row.manufacturer || "-"}</TableCell>
+                          <TableCell>{row.installation_location || "-"}</TableCell>
+                          <TableCell>{row.last_calibration_date || "-"}</TableCell>
+                          <TableCell>{row.calibration_period ? `${row.calibration_period}개월` : "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant={statusColor as any} className="text-[10px]">
+                              {statusLabel || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>
+                            {userOptions.find((u) => u.code === row.manager_id)?.label || row.manager_id || "-"}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* ═══════════════════ 검사기준 모달 ═══════════════════ */}
+      <Dialog open={inspModalOpen} onOpenChange={setInspModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[640px]">
+          <DialogHeader>
+            <DialogTitle>{inspEditMode ? "검사기준 수정" : "검사기준 등록"}</DialogTitle>
+            <DialogDescription>검사기준 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            {/* 검사코드 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사코드 <span className="text-destructive">*</span>
+              </Label>
+              {!inspEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : inspEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={inspForm.inspection_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={inspForm.inspection_code || ""}
+                  onChange={(e) => setInspForm((p) => ({ ...p, inspection_code: e.target.value }))}
+                  placeholder="검사코드 입력"
+                />
+              )}
+            </div>
+            {/* 유형 (다중선택) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                유형 <span className="text-destructive">*</span> (다중선택)
+              </Label>
+              <div className="flex flex-wrap gap-3 pt-1">
+                {(catOptions[`${INSPECTION_TABLE}.inspection_type`] || []).map((o) => {
+                  const types: string[] = inspForm.inspection_type
+                    ? inspForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  const checked = types.includes(o.code);
+                  return (
+                    <div key={o.code} className="flex items-center gap-1.5">
+                      <Checkbox
+                        checked={checked}
+                        onCheckedChange={(v) => {
+                          const next = v ? [...types, o.code] : types.filter((t) => t !== o.code);
+                          setInspForm((p) => ({ ...p, inspection_type: next.join(",") }));
+                        }}
+                      />
+                      <Label className="cursor-pointer text-sm">{o.label}</Label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            {/* 검사기준 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사기준 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={inspForm.inspection_criteria || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, inspection_criteria: e.target.value }))}
+                placeholder="검사기준 입력"
+              />
+            </div>
+            {/* 기준상세 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">기준상세</Label>
+              <Input
+                className="h-9"
+                value={inspForm.criteria_detail || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, criteria_detail: e.target.value }))}
+                placeholder="기준상세 입력"
+              />
+            </div>
+            {/* 검사항목 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사항목 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={inspForm.inspection_item || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, inspection_item: e.target.value }))}
+                placeholder="검사항목 입력"
+              />
+            </div>
+            {/* 검사방법 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">검사방법</Label>
+              <Select
+                value={inspForm.inspection_method || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, inspection_method: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.inspection_method`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 판단기준 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                판단기준 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={inspForm.judgment_criteria || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, judgment_criteria: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.judgment_criteria`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 단위 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">단위</Label>
+              <Select
+                value={inspForm.unit || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, unit: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.unit`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 적용구분 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">적용구분</Label>
+              <Select
+                value={inspForm.apply_type || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, apply_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.apply_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">관리자</Label>
+              <Select
+                value={inspForm.manager || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, manager: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 비고 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                value={inspForm.remark || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, remark: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setInspModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveInspection} disabled={inspSaving}>
+              {inspSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 불량관리 모달 ═══════════════════ */}
+      <Dialog open={defModalOpen} onOpenChange={setDefModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[640px]">
+          <DialogHeader>
+            <DialogTitle>{defEditMode ? "불량유형 수정" : "불량유형 등록"}</DialogTitle>
+            <DialogDescription>불량유형 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            {/* 불량코드 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량코드 <span className="text-destructive">*</span>
+              </Label>
+              {!defEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : defEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={defForm.defect_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={defForm.defect_code || ""}
+                  onChange={(e) => setDefForm((p) => ({ ...p, defect_code: e.target.value }))}
+                  placeholder="불량코드 입력"
+                />
+              )}
+            </div>
+            {/* 불량유형 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={defForm.defect_type || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, defect_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.defect_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 불량명 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={defForm.defect_name || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, defect_name: e.target.value }))}
+                placeholder="불량명 입력"
+              />
+            </div>
+            {/* 심각도 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                심각도 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={defForm.severity || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, severity: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.severity`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 불량내용 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량내용 <span className="text-destructive">*</span>
+              </Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={defForm.defect_content || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, defect_content: e.target.value }))}
+                placeholder="불량 상세 내용 및 정의를 입력하세요"
+                rows={3}
+              />
+            </div>
+            {/* 검사유형 (다중선택) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사유형 <span className="text-destructive">*</span> (다중선택)
+              </Label>
+              <div className="flex flex-wrap gap-3 rounded-md border p-3">
+                {(catOptions[`${DEFECT_TABLE}.inspection_type`] || []).map((o) => {
+                  const types: string[] = defForm.inspection_type
+                    ? defForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  const checked = types.includes(o.code);
+                  return (
+                    <div key={o.code} className="flex items-center gap-1.5">
+                      <Checkbox
+                        checked={checked}
+                        onCheckedChange={(v) => {
+                          const next = v ? [...types, o.code] : types.filter((t) => t !== o.code);
+                          setDefForm((p) => ({ ...p, inspection_type: next.join(","), apply_target: "" }));
+                        }}
+                      />
+                      <Label className="cursor-pointer text-sm">{o.label}</Label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            {/* 적용대상 (다중선택, 검사유형별 동적) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">적용대상 (다중선택)</Label>
+              <div className="min-h-[60px] rounded-md border p-3">
+                {(() => {
+                  const selectedTypes = defForm.inspection_type
+                    ? defForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  if (selectedTypes.length === 0)
+                    return <p className="text-muted-foreground text-xs">검사유형을 먼저 선택하세요</p>;
+                  const typeTargetMap: Record<string, string[]> = {};
+                  const defInspOpts = catOptions[`${DEFECT_TABLE}.inspection_type`] || [];
+                  for (const code of selectedTypes) {
+                    const label = defInspOpts.find((o) => o.code === code)?.label || "";
+                    if (label.includes("수입"))
+                      typeTargetMap[label] = ["구매입고", "외주입고", "반품입고", "무상입고", "기타입고"];
+                    else if (label.includes("공정"))
+                      typeTargetMap[label] = ["가공", "조립", "도장", "열처리", "표면처리", "용접"];
+                    else if (label.includes("출하"))
+                      typeTargetMap[label] = ["국내출하", "수출출하", "반품출하", "샘플출하"];
+                    else if (label.includes("최종")) typeTargetMap[label] = ["완제품", "반제품", "부품"];
+                  }
+                  const targets: string[] = defForm.apply_target ? defForm.apply_target.split(",").filter(Boolean) : [];
+                  return Object.entries(typeTargetMap).map(([typeName, opts]) => (
+                    <div key={typeName} className="mb-2 last:mb-0">
+                      <p className="mb-2 border-b pb-1 text-xs font-semibold">{typeName}</p>
+                      <div className="flex flex-wrap gap-3">
+                        {opts.map((t) => (
+                          <div key={t} className="flex items-center gap-1.5">
+                            <Checkbox
+                              checked={targets.includes(t)}
+                              onCheckedChange={(v) => {
+                                const next = v ? [...targets, t] : targets.filter((x) => x !== t);
+                                setDefForm((p) => ({ ...p, apply_target: next.join(",") }));
+                              }}
+                            />
+                            <Label className="cursor-pointer text-sm">{t}</Label>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ));
+                })()}
+              </div>
+            </div>
+            {/* 사용여부 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">사용여부</Label>
+              <Select
+                value={defForm.is_active || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.is_active`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">관리자</Label>
+              <Select
+                value={defForm.manager_id || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, manager_id: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 비고 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={defForm.remarks || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, remarks: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDefModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveDefect} disabled={defSaving}>
+              {defSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 검사장비 모달 ═══════════════════ */}
+      <Dialog open={eqModalOpen} onOpenChange={setEqModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[720px]">
+          <DialogHeader>
+            <DialogTitle>{eqEditMode ? "장비 수정" : "장비 등록"}</DialogTitle>
+            <DialogDescription>검사장비 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-3 gap-4">
+            {/* Row 1: 장비코드, 장비명, 장비유형 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비코드 <span className="text-destructive">*</span>
+              </Label>
+              {!eqEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : eqEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={eqForm.equipment_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={eqForm.equipment_code || ""}
+                  onChange={(e) => setEqForm((p) => ({ ...p, equipment_code: e.target.value }))}
+                  placeholder="장비코드"
+                />
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={eqForm.equipment_name || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, equipment_name: e.target.value }))}
+                placeholder="장비명 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={eqForm.equipment_type || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, equipment_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="장비유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">장비유형 선택</SelectItem>
+                  {(catOptions[`${EQUIPMENT_TABLE}.equipment_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* Row 2: 모델명, 제조사, 시리얼번호 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">모델명</Label>
+              <Input
+                className="h-9"
+                value={eqForm.model_name || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, model_name: e.target.value }))}
+                placeholder="모델명 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">제조사</Label>
+              <Input
+                className="h-9"
+                value={eqForm.manufacturer || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, manufacturer: e.target.value }))}
+                placeholder="제조사 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">시리얼번호</Label>
+              <Input
+                className="h-9"
+                value={eqForm.serial_number || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, serial_number: e.target.value }))}
+                placeholder="시리얼번호 입력"
+              />
+            </div>
+            {/* Row 3: 설치장소, 최근교정일, 교정주기 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">설치장소</Label>
+              <Input
+                className="h-9"
+                value={eqForm.installation_location || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, installation_location: e.target.value }))}
+                placeholder="설치장소 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">최근교정일</Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={eqForm.last_calibration_date || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, last_calibration_date: e.target.value }))}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">교정주기 (개월)</Label>
+              <Input
+                type="number"
+                className="h-9"
+                value={eqForm.calibration_period || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, calibration_period: e.target.value }))}
+                placeholder="12"
+              />
+            </div>
+            {/* Row 4: 장비상태, 담당자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">장비상태</Label>
+              <Select
+                value={eqForm.equipment_status || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, equipment_status: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="장비상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">장비상태 선택</SelectItem>
+                  {(catOptions[`${EQUIPMENT_TABLE}.equipment_status`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">담당자</Label>
+              <Select
+                value={eqForm.manager_id || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, manager_id: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="담당자 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">담당자 선택</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div />
+            {/* Row 5: 비고 (full width) */}
+            <div className="col-span-3 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={eqForm.remarks || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, remarks: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEqModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveEquipment} disabled={eqSaving}>
+              {eqSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/quality/item-inspection/page.tsx b/frontend/app/(main)/COMPANY_30/quality/item-inspection/page.tsx
new file mode 100644
index 00000000..2c0e1338
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/quality/item-inspection/page.tsx
@@ -0,0 +1,733 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, Pencil, Inbox, Settings2, Search, ChevronDown,
+} from "lucide-react";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const TABLE_NAME = "item_inspection_info";
+
+const GRID_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "inspection_type", label: "검사유형" },
+  { key: "item_count", label: "항목수" },
+  { key: "is_active", label: "사용여부" },
+];
+const ITEM_TABLE = "item_info";
+const INSPECTION_TABLE = "inspection_standard";
+
+const INSPECTION_TYPES = [
+  { key: "incoming_inspection", label: "수입검사", matchLabels: ["수입검사", "입고검사", "수입", "입고"] },
+  { key: "outgoing_inspection", label: "출하검사", matchLabels: ["출하검사", "출고검사", "출하", "출고"] },
+  { key: "process_inspection", label: "공정검사", matchLabels: ["공정검사", "공정"] },
+  { key: "final_inspection", label: "최종검사", matchLabels: ["최종검사", "최종", "완제품검사"] },
+] as const;
+
+type InspectionRow = {
+  id: string;
+  inspection_standard_id: string;
+  inspection_detail: string;
+  inspection_method: string;
+  apply_process: string;
+  acceptance_criteria: string;
+  is_required: boolean;
+};
+
+export default function ItemInspectionInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-item-inspection", TABLE_NAME, GRID_COLUMNS);
+
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [form, setForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  /* FK 옵션 */
+  const [itemOptions, setItemOptions] = useState<{ code: string; name: string; item_type: string; unit: string }[]>([]);
+  const [inspOptions, setInspOptions] = useState<{ code: string; label: string; detail: string; method: string; types: string[] }[]>([]);
+  const [inspTypeCatOptions, setInspTypeCatOptions] = useState<{ code: string; label: string }[]>([]);
+  const [userOptions, setUserOptions] = useState<{ code: string; label: string }[]>([]);
+
+  /* 검사유형별 검사항목 rows */
+  const [inspectionRows, setInspectionRows] = useState<Record<string, InspectionRow[]>>({});
+  const [collapsedTypes, setCollapsedTypes] = useState<Record<string, boolean>>({});
+
+  /* 품목 선택 모달 */
+  const [itemModalOpen, setItemModalOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [filteredItems, setFilteredItems] = useState<typeof itemOptions>([]);
+
+  /* ═══════════════════ FK 옵션 로드 ═══════════════════ */
+  useEffect(() => {
+    const loadOptions = async () => {
+      try {
+        const [itemRes, inspRes, userRes] = await Promise.all([
+          apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, { page: 1, size: 500, autoFilter: true }),
+          apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, { page: 1, size: 500, autoFilter: true }),
+          apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true }),
+        ]);
+        const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+        setItemOptions(items.map((r: any) => ({
+          code: r.item_number || r.item_code || "",
+          name: r.item_name || "",
+          item_type: r.type || r.item_type || "",
+          unit: r.unit || "",
+        })));
+
+        const insps = inspRes.data?.data?.data || inspRes.data?.data?.rows || [];
+        setInspOptions(insps.map((r: any) => ({
+          code: r.id,
+          label: r.inspection_criteria || r.inspection_standard || r.id,
+          detail: r.inspection_item || r.inspection_criteria || "",
+          method: r.inspection_method || "",
+          types: r.inspection_type ? r.inspection_type.split(",").filter(Boolean) : [],
+        })));
+
+        // 검사유형 카테고리 값 로드 (코드→라벨 매핑용)
+        try {
+          const catRes = await apiClient.get(`/table-categories/${INSPECTION_TABLE}/inspection_type/values`);
+          const flatCats: { code: string; label: string }[] = [];
+          const flatten = (arr: any[]) => { for (const v of arr) { flatCats.push({ code: v.valueCode, label: v.valueLabel }); if (v.children?.length) flatten(v.children); } };
+          if (catRes.data?.data?.length) flatten(catRes.data.data);
+          setInspTypeCatOptions(flatCats);
+        } catch { /* skip */ }
+
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        setUserOptions(users.map((u: any) => ({
+          code: u.user_id || u.id,
+          label: `${u.user_name || u.name || u.user_id}${u.dept_name ? ` (${u.dept_name})` : ""}`,
+        })));
+      } catch { /* skip */ }
+    };
+    loadOptions();
+  }, []);
+
+  /* ═══════════════════ 품목 선택 모달 ═══════════════════ */
+  const openItemModal = () => {
+    setItemSearchKeyword("");
+    setFilteredItems(itemOptions);
+    setItemModalOpen(true);
+  };
+
+  const handleItemSearch = () => {
+    const kw = itemSearchKeyword.trim().toLowerCase();
+    if (!kw) { setFilteredItems(itemOptions); return; }
+    setFilteredItems(itemOptions.filter(o =>
+      o.code.toLowerCase().includes(kw) || o.name.toLowerCase().includes(kw)
+    ));
+  };
+
+  const selectItem = (item: typeof itemOptions[0]) => {
+    setForm(p => ({ ...p, item_code: item.code, item_name: item.name }));
+    setItemModalOpen(false);
+  };
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setData(rows);
+      setTotalCount(rows.length);
+    } catch {
+      toast.error("품목검사정보 조회에 실패했어요");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => { fetchData(); }, [fetchData]);
+
+  // item_code별 그룹핑
+  const groupedData = useMemo(() => {
+    const map: Record<string, { item_code: string; item_name: string; is_active: string; types: string[]; rows: any[] }> = {};
+    for (const row of data) {
+      const key = row.item_code || row.id;
+      if (!map[key]) {
+        map[key] = { item_code: row.item_code, item_name: row.item_name, is_active: row.is_active || "", types: [], rows: [] };
+      }
+      map[key].rows.push(row);
+      if (row.inspection_type && !map[key].types.includes(row.inspection_type)) {
+        map[key].types.push(row.inspection_type);
+      }
+    }
+    return Object.values(map);
+  }, [data]);
+
+  // 검사기준 ID → 라벨 resolve
+  const resolveInspLabel = useCallback((id: string) => {
+    const opt = inspOptions.find(o => o.code === id);
+    return opt?.label || id || "-";
+  }, [inspOptions]);
+
+  /* ═══════════════════ CRUD ═══════════════════ */
+  const openCreate = () => { setForm({}); setEditMode(false); setInspectionRows({}); setCollapsedTypes({}); setModalOpen(true); };
+  const openEdit = async (row: any) => {
+    setForm({ ...row });
+    setEditMode(true);
+    setCollapsedTypes({});
+
+    // 같은 item_code의 모든 검사항목 행을 조회하여 유형별로 분류
+    try {
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_code", operator: "equals", value: row.item_code }] },
+        autoFilter: true,
+      });
+      const allRows = res.data?.data?.data || res.data?.data?.rows || [];
+      const rowMap: Record<string, InspectionRow[]> = {};
+      const typeFlags: Record<string, boolean> = {};
+
+      for (const r of allRows) {
+        const inspType = r.inspection_type || "";
+        // 카테고리 코드/라벨로 INSPECTION_TYPES 키 매칭
+        const matched = INSPECTION_TYPES.find(t =>
+          t.matchLabels.some(ml => inspType.includes(ml)) ||
+          inspTypeCatOptions.some(cat => inspType.includes(cat.code) && t.matchLabels.some(ml => cat.label.includes(ml)))
+        );
+        const typeKey = matched?.key || "";
+        if (!typeKey) continue;
+        typeFlags[typeKey] = true;
+        if (!rowMap[typeKey]) rowMap[typeKey] = [];
+        rowMap[typeKey].push({
+          id: r.id,
+          inspection_standard_id: r.inspection_standard_id || "",
+          inspection_detail: r.inspection_item_name || r.inspection_standard || "",
+          inspection_method: r.inspection_method || "",
+          apply_process: "",
+          acceptance_criteria: r.pass_criteria || "",
+          is_required: r.is_required === "true" || r.is_required === true,
+        });
+      }
+
+      setInspectionRows(rowMap);
+      setForm(p => ({ ...p, ...typeFlags }));
+    } catch {
+      setInspectionRows({});
+    }
+    setModalOpen(true);
+  };
+
+  /* ═══════════════════ 검사항목 행 관리 ═══════════════════ */
+  const addInspRow = (typeKey: string) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: [...(prev[typeKey] || []), {
+        id: crypto.randomUUID(),
+        inspection_standard_id: "",
+        inspection_detail: "",
+        inspection_method: "",
+        apply_process: "",
+        acceptance_criteria: "",
+        is_required: false,
+      }],
+    }));
+  };
+
+  const removeInspRow = (typeKey: string, rowId: string) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: (prev[typeKey] || []).filter(r => r.id !== rowId),
+    }));
+  };
+
+  const updateInspRow = (typeKey: string, rowId: string, field: string, value: any) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: (prev[typeKey] || []).map(r => {
+        if (r.id !== rowId) return r;
+        if (field === "inspection_standard_id") {
+          const opt = inspOptions.find(o => o.code === value);
+          return { ...r, inspection_standard_id: value, inspection_detail: opt?.detail || "", inspection_method: opt?.method || "" };
+        }
+        return { ...r, [field]: value };
+      }),
+    }));
+  };
+
+  /** 검사유형 키에 매칭되는 검사기준만 필터링 */
+  const getFilteredInspOptions = (typeKey: string) => {
+    const typeDef = INSPECTION_TYPES.find(t => t.key === typeKey);
+    if (!typeDef) return inspOptions;
+    // matchLabels와 카테고리 라벨을 비교하여 해당 카테고리 코드를 찾음
+    const matchCodes = inspTypeCatOptions
+      .filter(cat => typeDef.matchLabels.some(ml => cat.label.includes(ml)))
+      .map(cat => cat.code);
+    if (matchCodes.length === 0) return inspOptions;
+    return inspOptions.filter(opt => opt.types.some(t => matchCodes.includes(t)));
+  };
+
+  const toggleCollapse = (typeKey: string) => {
+    setCollapsedTypes(prev => ({ ...prev, [typeKey]: !prev[typeKey] }));
+  };
+
+  const handleSave = async () => {
+    if (!form.item_code) { toast.error("품목코드는 필수 입력이에요"); return; }
+    setSaving(true);
+    try {
+      // 기존 행 삭제 (수정 모드)
+      if (editMode) {
+        const existRes = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_code", operator: "equals", value: form.item_code }] },
+          autoFilter: true,
+        });
+        const existing = existRes.data?.data?.data || existRes.data?.data?.rows || [];
+        if (existing.length > 0) {
+          await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+            data: existing.map((r: any) => ({ id: r.id })),
+          });
+        }
+      }
+
+      // 검사유형별 항목을 개별 행으로 INSERT
+      const enabledTypes = INSPECTION_TYPES.filter(t => !!form[t.key]);
+      const rows: any[] = [];
+      for (const t of enabledTypes) {
+        const typeLabel = t.label;
+        const typeRows = inspectionRows[t.key] || [];
+        if (typeRows.length === 0) {
+          // 유형만 체크하고 항목 없는 경우에도 1행 생성
+          rows.push({
+            id: crypto.randomUUID(),
+            item_code: form.item_code,
+            item_name: form.item_name,
+            inspection_type: typeLabel,
+            is_active: form.is_active || "사용",
+            manager_id: form.manager_id || "",
+            memo: form.remarks || "",
+          });
+        } else {
+          for (const r of typeRows) {
+            rows.push({
+              id: crypto.randomUUID(),
+              item_code: form.item_code,
+              item_name: form.item_name,
+              inspection_type: typeLabel,
+              inspection_standard_id: r.inspection_standard_id || "",
+              inspection_item_name: r.inspection_detail || "",
+              inspection_method: r.inspection_method || "",
+              pass_criteria: r.acceptance_criteria || "",
+              is_required: r.is_required ? "true" : "false",
+              is_active: form.is_active || "사용",
+              manager_id: form.manager_id || "",
+              memo: form.remarks || "",
+            });
+          }
+        }
+      }
+
+      for (const row of rows) {
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, row);
+      }
+
+      toast.success(editMode ? "품목검사정보를 수정했어요" : "품목검사정보를 등록했어요");
+      setModalOpen(false);
+      fetchData();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setSaving(false); }
+  };
+
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("품목검사정보 삭제", {
+      description: `선택한 ${checkedIds.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+        data: checkedIds.map(id => ({ id })),
+      });
+      toast.success(`${checkedIds.length}건을 삭제했어요`);
+      setCheckedIds([]);
+      fetchData();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="rounded-lg border bg-card">
+        <div className="px-3 py-2.5 border-b bg-muted/50">
+          <DynamicSearchFilter
+            tableName={TABLE_NAME}
+            filterId="c16-item-inspection"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={ts.filterConfig}
+            dataCount={totalCount}
+            extraActions={
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = data.find(r => checkedIds.includes(r.id));
+                  if (sel) {
+                    const group = groupedData.find(g => g.item_code === sel.item_code);
+                    openEdit(group?.rows[0] || sel);
+                  } else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={handleDelete}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+            }
+          />
+        </div>
+        <div className="p-3 overflow-auto">
+          {loading ? (
+            <div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
+          ) : groupedData.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+              <Inbox className="h-10 w-10 mb-2 opacity-30" />
+              <p className="text-sm">등록된 품목검사정보가 없어요</p>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted">
+                  <TableHead className="w-10" />
+                  <TableHead className="w-10"><Checkbox checked={groupedData.length > 0 && checkedIds.length === data.length} onCheckedChange={(v) => setCheckedIds(v ? data.map(r => r.id) : [])} /></TableHead>
+                  {ts.visibleColumns.map((col) => (
+                    <TableHead key={col.key} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground" style={ts.thStyle(col.key)}>
+                      {col.label}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {ts.groupData(groupedData).map((group) => {
+                  if ((group as any)._isGroupSummary || (group as any)._isGroupHeader) return null;
+                  const isExpanded = expandedItems.has(group.item_code);
+                  const groupIds = group.rows.map((r: any) => r.id);
+                  const allChecked = groupIds.every((id: string) => checkedIds.includes(id));
+                  const renderCell = (key: string) => {
+                    switch (key) {
+                      case "item_code": return <TableCell key={key} className="text-sm font-medium text-primary">{group.item_code}</TableCell>;
+                      case "item_name": return <TableCell key={key} className="text-sm">{group.item_name}</TableCell>;
+                      case "inspection_type": return (
+                        <TableCell key={key}>
+                          <div className="flex gap-1 flex-wrap">
+                            {group.types.map((t: string) => <Badge key={t} variant="secondary" className="text-[10px]">{t}</Badge>)}
+                          </div>
+                        </TableCell>
+                      );
+                      case "item_count": return <TableCell key={key} className="text-sm text-center">{group.rows.filter((r: any) => r.inspection_standard_id).length}</TableCell>;
+                      case "is_active": return (
+                        <TableCell key={key}>
+                          <Badge variant={group.is_active === "사용" || group.is_active === "true" ? "default" : "secondary"} className="text-[10px]">
+                            {group.is_active === "사용" || group.is_active === "true" ? "사용" : "미사용"}
+                          </Badge>
+                        </TableCell>
+                      );
+                      default: return <TableCell key={key}>{(group as any)[key] ?? ""}</TableCell>;
+                    }
+                  };
+                  return (
+                    <React.Fragment key={group.item_code}>
+                      <TableRow
+                        className={cn("cursor-pointer border-l-2 border-l-transparent", allChecked && "border-l-primary bg-primary/5")}
+                        onClick={() => setExpandedItems(prev => { const next = new Set(prev); if (next.has(group.item_code)) next.delete(group.item_code); else next.add(group.item_code); return next; })}
+                        onDoubleClick={() => openEdit(group.rows[0])}
+                      >
+                        <TableCell className="text-center p-2">
+                          <ChevronDown className={cn("w-4 h-4 transition-transform text-muted-foreground", !isExpanded && "-rotate-90")} />
+                        </TableCell>
+                        <TableCell className="text-center p-2" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => allChecked ? prev.filter(id => !groupIds.includes(id)) : [...new Set([...prev, ...groupIds])]); }}>
+                          <Checkbox checked={allChecked} onCheckedChange={() => {}} />
+                        </TableCell>
+                        {ts.visibleColumns.map((col) => renderCell(col.key))}
+                      </TableRow>
+                      {isExpanded && group.rows.filter((r: any) => r.inspection_standard_id).map((row: any) => (
+                        <TableRow key={row.id} className="bg-muted/30 text-xs">
+                          <TableCell />
+                          <TableCell />
+                          <TableCell className="pl-6 text-muted-foreground">{row.inspection_type}</TableCell>
+                          <TableCell>{resolveInspLabel(row.inspection_standard_id)}</TableCell>
+                          <TableCell>{row.inspection_item_name || "-"}</TableCell>
+                          <TableCell>{row.inspection_method || "-"}</TableCell>
+                          <TableCell>{row.pass_criteria || "-"}</TableCell>
+                        </TableRow>
+                      ))}
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+          <div className="mt-2 text-xs text-muted-foreground">전체 {groupedData.length}건 (품목 기준)</div>
+        </div>
+      </div>
+
+      {/* ═══════════════════ 등록/수정 모달 (품목선택 뷰 포함) ═══════════════════ */}
+      <Dialog open={modalOpen} onOpenChange={(open) => { if (!open) setItemModalOpen(false); setModalOpen(open); }}>
+        <DialogContent className={cn("max-w-[95vw] max-h-[85vh] overflow-y-auto", itemModalOpen ? "sm:max-w-xl" : "sm:max-w-4xl")}>
+          {itemModalOpen ? (
+            <>
+              <DialogHeader>
+                <DialogTitle>품목 선택</DialogTitle>
+                <DialogDescription>품목코드 또는 품목명으로 검색</DialogDescription>
+              </DialogHeader>
+              <div className="flex gap-2">
+                <Input
+                  className="h-9 flex-1"
+                  placeholder="품목코드 또는 품목명으로 검색"
+                  value={itemSearchKeyword}
+                  onChange={(e) => setItemSearchKeyword(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === "Enter") handleItemSearch(); }}
+                />
+                <Button size="sm" className="h-9" onClick={handleItemSearch}>
+                  <Search className="w-4 h-4 mr-1" />검색
+                </Button>
+              </div>
+              <div className="border rounded-lg overflow-auto max-h-[50vh]">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="text-[11px] font-bold">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold">품목명</TableHead>
+                      <TableHead className="text-[11px] font-bold">품목유형</TableHead>
+                      <TableHead className="text-[11px] font-bold">단위</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredItems.length === 0 ? (
+                      <TableRow><TableCell colSpan={4} className="text-center py-8 text-muted-foreground text-sm">검색 결과가 없어요</TableCell></TableRow>
+                    ) : filteredItems.map((item) => (
+                      <TableRow
+                        key={item.code}
+                        className="cursor-pointer hover:bg-primary/5"
+                        onClick={() => selectItem(item)}
+                      >
+                        <TableCell className="text-sm">{item.code}</TableCell>
+                        <TableCell className="text-sm">{item.name}</TableCell>
+                        <TableCell className="text-sm">{item.item_type}</TableCell>
+                        <TableCell className="text-sm">{item.unit}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setItemModalOpen(false)}>취소</Button>
+              </DialogFooter>
+            </>
+          ) : (
+            <>
+              <DialogHeader>
+                <DialogTitle>{editMode ? "품목검사정보 수정" : "품목검사정보 등록"}</DialogTitle>
+                <DialogDescription className="sr-only">품목검사정보를 등록합니다</DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4">
+                {/* 품목 정보 */}
+                <div className="space-y-3">
+                  <h4 className="text-sm font-semibold flex items-center gap-1.5">📦 품목 정보</h4>
+                  <div className="flex items-end gap-2">
+                    <div className="space-y-1.5 flex-1">
+                      <Label className="text-xs font-semibold text-muted-foreground">품목코드 <span className="text-destructive">*</span></Label>
+                      <Input className="h-9 bg-muted" value={form.item_code || ""} readOnly placeholder="품목코드" />
+                    </div>
+                    <div className="space-y-1.5 flex-1">
+                      <Label className="text-xs font-semibold text-muted-foreground">품목명 <span className="text-destructive">*</span></Label>
+                      <Input className="h-9 bg-muted" value={form.item_name || ""} readOnly placeholder="품목명" />
+                    </div>
+                    <Button type="button" variant="outline" size="sm" className="h-9 px-3 shrink-0" onClick={openItemModal}>
+                      <Search className="w-4 h-4 mr-1" />품목선택
+                    </Button>
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-1.5">
+                      <Label className="text-xs font-semibold text-muted-foreground">사용여부</Label>
+                      <Select value={form.is_active === false ? "N" : "Y"} onValueChange={(v) => setForm(p => ({ ...p, is_active: v === "Y" }))}>
+                        <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">사용</SelectItem>
+                          <SelectItem value="N">미사용</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-xs font-semibold text-muted-foreground">관리자</Label>
+                      <Select value={form.manager || ""} onValueChange={(v) => setForm(p => ({ ...p, manager: v }))}>
+                        <SelectTrigger className="h-9"><SelectValue placeholder="관리자 선택" /></SelectTrigger>
+                        <SelectContent>
+                          {userOptions.map(o => (
+                            <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold text-muted-foreground">비고</Label>
+                    <textarea
+                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                      value={form.remarks || ""}
+                      onChange={(e) => setForm(p => ({ ...p, remarks: e.target.value }))}
+                      placeholder="비고 사항"
+                    />
+                  </div>
+                </div>
+                {/* 검사유형 선택 */}
+                <div className="space-y-3">
+                  <h4 className="text-sm font-semibold flex items-center gap-1.5">✅ 검사유형 선택</h4>
+                  <div className="flex flex-wrap gap-4">
+                    {INSPECTION_TYPES.map(({ key, label }) => (
+                      <div key={key} className="flex items-center gap-1.5">
+                        <Checkbox
+                          checked={!!form[key]}
+                          onCheckedChange={(v) => setForm(p => ({ ...p, [key]: !!v }))}
+                        />
+                        <Label className="text-sm cursor-pointer">{label}</Label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                {/* 검사유형별 검사항목 설정 */}
+                {INSPECTION_TYPES.filter(t => !!form[t.key]).map(({ key, label }) => (
+                  <div key={key} className="space-y-2">
+                    <button
+                      type="button"
+                      className="w-full flex items-center gap-2 py-2 px-3 rounded-md border bg-muted/50 hover:bg-muted text-left"
+                      onClick={() => toggleCollapse(key)}
+                    >
+                      <Badge variant="default" className="text-xs">{label}</Badge>
+                      <span className="text-sm font-medium">검사항목 설정</span>
+                      <ChevronDown className={cn("w-4 h-4 ml-auto transition-transform", collapsedTypes[key] && "-rotate-90")} />
+                    </button>
+                    {!collapsedTypes[key] && (
+                      <div className="space-y-2 pl-1">
+                        <div className="flex items-center justify-between">
+                          <span className="text-xs font-semibold text-muted-foreground">검사항목 목록</span>
+                          <Button type="button" size="sm" variant="outline" className="h-7 text-xs" onClick={() => addInspRow(key)}>
+                            <Plus className="w-3 h-3 mr-1" />항목추가
+                          </Button>
+                        </div>
+                        <div className="border rounded-lg overflow-hidden">
+                          <Table>
+                            <TableHeader>
+                              <TableRow className="bg-muted/50 hover:bg-muted/50">
+                                <TableHead className="text-[10px] font-bold w-[170px]">검사기준 선택</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[130px]">검사기준 상세</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[90px]">검사방법</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[100px]">적용공정</TableHead>
+                                <TableHead className="text-[10px] font-bold">합격기준 (판단기준별)</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[40px]">필수</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[36px]" />
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                              {(!inspectionRows[key] || inspectionRows[key].length === 0) ? (
+                                <TableRow><TableCell colSpan={7} className="text-center py-4 text-xs text-muted-foreground">항목추가 버튼으로 검사항목을 추가하세요</TableCell></TableRow>
+                              ) : inspectionRows[key].map((row) => (
+                                <TableRow key={row.id}>
+                                  <TableCell className="p-1">
+                                    <Select value={row.inspection_standard_id || ""} onValueChange={(v) => updateInspRow(key, row.id, "inspection_standard_id", v)}>
+                                      <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="검사기준 선택" /></SelectTrigger>
+                                      <SelectContent>
+                                        {getFilteredInspOptions(key).map(o => (
+                                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input className="h-8 text-xs bg-muted" value={row.inspection_detail} readOnly placeholder="검사기준 상세" />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input className="h-8 text-xs bg-muted" value={row.inspection_method} readOnly placeholder="선택" />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Select value={row.apply_process || ""} onValueChange={(v) => updateInspRow(key, row.id, "apply_process", v)}>
+                                      <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="공정 선택" /></SelectTrigger>
+                                      <SelectContent>
+                                        <SelectItem value="incoming">입고</SelectItem>
+                                        <SelectItem value="process">공정</SelectItem>
+                                        <SelectItem value="outgoing">출고</SelectItem>
+                                        <SelectItem value="final">최종</SelectItem>
+                                      </SelectContent>
+                                    </Select>
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input
+                                      className="h-8 text-xs"
+                                      value={row.acceptance_criteria}
+                                      onChange={(e) => updateInspRow(key, row.id, "acceptance_criteria", e.target.value)}
+                                      placeholder={row.inspection_standard_id ? "합격기준 입력" : "검사기준을 먼저 선택하세요"}
+                                      disabled={!row.inspection_standard_id}
+                                    />
+                                  </TableCell>
+                                  <TableCell className="p-1 text-center">
+                                    <Checkbox checked={row.is_required} onCheckedChange={(v) => updateInspRow(key, row.id, "is_required", !!v)} />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Button type="button" variant="destructive" size="sm" className="h-7 w-7 p-0" onClick={() => removeInspRow(key, row.id)}>
+                                      <Trash2 className="w-3.5 h-3.5" />
+                                    </Button>
+                                  </TableCell>
+                                </TableRow>
+                              ))}
+                            </TableBody>
+                          </Table>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setModalOpen(false)}>취소</Button>
+                <Button onClick={handleSave} disabled={saving}>
+                  {saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+                  저장
+                </Button>
+              </DialogFooter>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/sales/claim/page.tsx b/frontend/app/(main)/COMPANY_30/sales/claim/page.tsx
new file mode 100644
index 00000000..a2c89599
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/sales/claim/page.tsx
@@ -0,0 +1,932 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Download,
+  Plus,
+  Save,
+  ClipboardList,
+  Inbox,
+  Check,
+  ChevronsUpDown,
+  Loader2,
+  FileSpreadsheet,
+  Trash2,
+  Pencil,
+  FileText,
+  Wrench,
+  Settings2,
+} from "lucide-react";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+
+// --- 상수 ---
+const TABLE_NAME = "claim_mng";
+
+const GRID_COLUMNS = [
+  { key: "claim_no", label: "클레임번호" },
+  { key: "claim_date", label: "접수일자" },
+  { key: "claim_type", label: "유형" },
+  { key: "claim_status", label: "상태" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "manager_name", label: "담당자" },
+  { key: "claim_content", label: "클레임 내용" },
+];
+
+type ClaimType = "불량" | "교환" | "반품" | "배송지연" | "기타";
+type ClaimStatus = "접수" | "처리중" | "완료" | "취소";
+
+interface ClaimRow {
+  id: number;
+  claim_no: string;
+  claim_date: string;
+  claim_type: string;
+  claim_status: string;
+  customer_code: string;
+  customer_name: string;
+  manager_name: string;
+  order_no: string;
+  claim_content: string;
+  process_content: string;
+  company_code?: string;
+  writer?: string;
+  created_date?: string;
+  updated_date?: string;
+  [key: string]: any;
+}
+
+interface CustomerOption {
+  customerCode: string;
+  customerName: string;
+}
+
+interface SalesOrderOption {
+  orderNo: string;
+  partnerName: string;
+  status: string;
+}
+
+// Badge variant 매핑 (CSS 변수 기반)
+const getClaimStatusVariant = (status: string) => {
+  switch (status) {
+    case "접수": return "default" as const;
+    case "처리중": return "secondary" as const;
+    case "완료": return "outline" as const;
+    case "취소": return "destructive" as const;
+    default: return "secondary" as const;
+  }
+};
+
+const getClaimTypeVariant = (type: string) => {
+  switch (type) {
+    case "불량": return "destructive" as const;
+    case "교환": return "warning" as const;
+    case "반품": return "default" as const;
+    case "배송지연": return "secondary" as const;
+    case "기타": return "outline" as const;
+    default: return "outline" as const;
+  }
+};
+
+const CLAIM_TYPES: ClaimType[] = ["불량", "교환", "반품", "배송지연", "기타"];
+const CLAIM_STATUSES: ClaimStatus[] = ["접수", "처리중", "완료", "취소"];
+
+export default function ClaimManagementPage() {
+  useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-claim", TABLE_NAME, GRID_COLUMNS);
+
+  const [data, setData] = useState<ClaimRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [selectedClaimNo, setSelectedClaimNo] = useState<string | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 엑셀 업로드
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 모달 상태
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [formData, setFormData] = useState<Partial<ClaimRow>>({});
+
+  // Combobox 상태
+  const [customerOpen, setCustomerOpen] = useState(false);
+  const [orderOpen, setOrderOpen] = useState(false);
+
+  // DB 데이터
+  const [customers, setCustomers] = useState<CustomerOption[]>([]);
+  const [salesOrders, setSalesOrders] = useState<SalesOrderOption[]>([]);
+  const [customersLoading, setCustomersLoading] = useState(false);
+  const [ordersLoading, setOrdersLoading] = useState(false);
+
+  // --- 데이터 조회 (서버사이드 필터 + autoFilter 멀티테넌시) ---
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "claim_date", order: "desc" },
+      });
+
+      const rows: ClaimRow[] = res.data?.data?.data || res.data?.data?.rows || [];
+      setData(rows);
+      setTotalCount(res.data?.data?.total || rows.length);
+    } catch {
+      toast.error("클레임 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+
+  // 거래처 목록 조회 (autoFilter로 멀티테넌시 적용)
+  const fetchCustomers = useCallback(async (force = false) => {
+    if (!force && customers.length > 0) return;
+    setCustomersLoading(true);
+    try {
+      const res = await apiClient.post("/table-management/tables/customer_mng/data", {
+        page: 1,
+        size: 9999,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows;
+      if (res.data?.success && Array.isArray(rows)) {
+        const list: CustomerOption[] = rows.map((row: any) => ({
+          customerCode: row.customer_code || row.id || "",
+          customerName: row.customer_name || "",
+        }));
+        setCustomers(list);
+      }
+    } catch {
+      /* skip */
+    } finally {
+      setCustomersLoading(false);
+    }
+  }, [customers.length]);
+
+  // 수주 목록 조회 (autoFilter로 멀티테넌시 적용)
+  const fetchSalesOrders = useCallback(async (force = false) => {
+    if (!force && salesOrders.length > 0) return;
+    setOrdersLoading(true);
+    try {
+      const res = await apiClient.post("/table-management/tables/sales_order_mng/data", {
+        page: 1,
+        size: 9999,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows;
+      if (res.data?.success && Array.isArray(rows)) {
+        const seen = new Set<string>();
+        const list: SalesOrderOption[] = [];
+        for (const row of rows) {
+          const orderNo = row.order_no || "";
+          if (!orderNo || seen.has(orderNo)) continue;
+          seen.add(orderNo);
+          list.push({
+            orderNo,
+            partnerName: row.partner_id || "",
+            status: row.status || "",
+          });
+        }
+        setSalesOrders(list);
+      }
+    } catch {
+      /* skip */
+    } finally {
+      setOrdersLoading(false);
+    }
+  }, [salesOrders.length]);
+
+  // 상태별 카운트
+  const statusCounts = useMemo(() => {
+    const counts = { 접수: 0, 처리중: 0, 완료: 0, 취소: 0 };
+    data.forEach((claim) => {
+      if (counts[claim.claim_status as keyof typeof counts] !== undefined) {
+        counts[claim.claim_status as keyof typeof counts]++;
+      }
+    });
+    return counts;
+  }, [data]);
+
+  // 클레임번호 자동 생성
+  const generateClaimNo = useCallback(() => {
+    const year = new Date().getFullYear();
+    const prefix = `CLM-${year}-`;
+    const existingNumbers = data
+      .filter((c) => c.claim_no?.startsWith(prefix))
+      .map((c) => parseInt(c.claim_no.replace(prefix, ""), 10))
+      .filter((n) => !isNaN(n));
+    const maxNumber = existingNumbers.length > 0 ? Math.max(...existingNumbers) : 0;
+    return `${prefix}${String(maxNumber + 1).padStart(3, "0")}`;
+  }, [data]);
+
+  const handleRowClick = (claimNo: string) => {
+    setSelectedClaimNo(claimNo);
+  };
+
+  const openRegisterModal = () => {
+    setIsEditMode(false);
+    setFormData({
+      claim_no: generateClaimNo(),
+      claim_date: new Date().toISOString().split("T")[0],
+      claim_type: undefined,
+      claim_status: "접수",
+      customer_code: "",
+      customer_name: "",
+      manager_name: "",
+      order_no: "",
+      claim_content: "",
+      process_content: "",
+    });
+    setIsModalOpen(true);
+    fetchCustomers(true);
+    fetchSalesOrders(true);
+  };
+
+  const openEditModal = (claimNo: string) => {
+    const claim = data.find((c) => c.claim_no === claimNo);
+    if (!claim) return;
+    setIsEditMode(true);
+    setFormData({ ...claim });
+    setIsModalOpen(true);
+    fetchCustomers(true);
+    fetchSalesOrders(true);
+  };
+
+  const handleFormChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  // --- 저장 (table-management API, company_code 자동 주입) ---
+  const handleSave = async () => {
+    if (!formData.claim_type || !formData.customer_name || !formData.claim_content) {
+      toast.error("필수 항목을 모두 입력해주세요. (클레임유형, 거래처명, 클레임내용)");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const { id, company_code, writer, created_date, updated_date, created_by, updated_by, ...saveFields } = formData as any;
+
+      if (isEditMode && id) {
+        await apiClient.put(`/table-management/tables/${TABLE_NAME}/edit`, {
+          originalData: { id },
+          updatedData: saveFields,
+        });
+        toast.success("클레임이 수정되었어요.");
+      } else {
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, saveFields);
+        toast.success("클레임이 등록되었어요.");
+      }
+
+      setIsModalOpen(false);
+      fetchData();
+    } catch (err: any) {
+      console.error("클레임 저장 실패:", err);
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // --- 삭제 ---
+  const handleDelete = async (claimNo: string) => {
+    const claim = data.find((c) => c.claim_no === claimNo);
+    if (!claim) return;
+
+    const ok = await confirm(`클레임 ${claimNo}을(를) 삭제하시겠습니까?`, {
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+
+    try {
+      await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+        data: [{ id: claim.id }],
+      });
+      toast.success("클레임이 삭제되었어요.");
+      if (selectedClaimNo === claimNo) setSelectedClaimNo(null);
+      fetchData();
+    } catch (err: any) {
+      console.error("클레임 삭제 실패:", err);
+      toast.error(err.response?.data?.message || "삭제에 실패했어요.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (data.length === 0) {
+      toast.error("다운로드할 데이터가 없어요.");
+      return;
+    }
+    try {
+      const exportData = data.map((row) => ({
+        클레임번호: row.claim_no,
+        접수일자: row.claim_date,
+        클레임유형: row.claim_type,
+        처리상태: row.claim_status,
+        거래처코드: row.customer_code,
+        거래처명: row.customer_name,
+        담당자: row.manager_name,
+        수주번호: row.order_no,
+        클레임내용: row.claim_content,
+        처리내용: row.process_content,
+      }));
+      await exportToExcel(exportData, "클레임관리.xlsx", "클레임");
+      toast.success("엑셀 다운로드 완료");
+    } catch (err) {
+      console.error("엑셀 다운로드 실패:", err);
+      toast.error("엑셀 다운로드에 실패했어요.");
+    }
+  };
+
+  const selectedClaim = useMemo(
+    () => data.find((c) => c.claim_no === selectedClaimNo),
+    [data, selectedClaimNo]
+  );
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-4rem)] overflow-hidden">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={TABLE_NAME}
+        filterId="c16-claim"
+        onFilterChange={setSearchFilters}
+        dataCount={data.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* ───── 메인 분할 레이아웃 ───── */}
+      <div className="flex-1 overflow-hidden">
+        <ResizablePanelGroup direction="horizontal" className="h-full">
+          {/* ── 좌측: 클레임 목록 (65%) ── */}
+          <ResizablePanel defaultSize={65} minSize={35}>
+            <div className="flex flex-col h-full bg-card">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="flex items-center gap-2">
+                  <ClipboardList className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-[13px] font-bold text-foreground">클레임 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {data.length}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+                    <FileSpreadsheet className="w-3.5 h-3.5" />
+                    업로드
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+                    <Download className="w-3.5 h-3.5" />
+                    다운로드
+                  </Button>
+                  <Button size="sm" onClick={openRegisterModal}>
+                    <Plus className="w-3.5 h-3.5" />
+                    등록
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 테이블 */}
+              <EDataTable
+                columns={ts.visibleColumns.map((col): EDataTableColumn<ClaimRow> => ({
+                  key: col.key,
+                  label: col.label,
+                  align: col.key === "claim_type" || col.key === "claim_status" ? "center" : undefined,
+                  render: col.key === "claim_type"
+                    ? (val: any) => (
+                        <Badge variant={getClaimTypeVariant(val)} className="text-[10px] px-1.5 py-0">
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "claim_status"
+                    ? (val: any) => (
+                        <Badge variant={getClaimStatusVariant(val)} className="text-[10px] px-1.5 py-0">
+                          {val}
+                        </Badge>
+                      )
+                    : undefined,
+                }))}
+                data={ts.groupData(data)}
+                loading={loading}
+                emptyMessage="등록된 클레임이 없어요"
+                rowKey={(row) => String(row.id)}
+                selectedId={selectedClaimNo ? String(data.find(c => c.claim_no === selectedClaimNo)?.id ?? "") : null}
+                onSelect={(id) => {
+                  const claim = data.find(c => String(c.id) === id);
+                  handleRowClick(claim?.claim_no ?? "");
+                }}
+                onRowDoubleClick={(row) => openEditModal(row.claim_no)}
+                showRowNumber
+                draggableColumns={false}
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* ── 우측: 클레임 상세 (35%) ── */}
+          <ResizablePanel defaultSize={35} minSize={20}>
+            <div className="flex flex-col h-full bg-card border-l">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="flex items-center gap-2">
+                  <ClipboardList className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-[13px] font-bold text-foreground">클레임 상세</span>
+                  {selectedClaim && (
+                    <span className="text-[11px] font-mono text-muted-foreground">{selectedClaim.claim_no}</span>
+                  )}
+                </div>
+                {selectedClaim && (
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => openEditModal(selectedClaim.claim_no)}
+                    >
+                      <Pencil className="w-3.5 h-3.5" />
+                      수정
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="text-destructive hover:text-destructive"
+                      onClick={() => handleDelete(selectedClaim.claim_no)}
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {/* 상태별 요약 카운트 */}
+              <div className="flex items-center gap-3 px-4 py-2 border-b bg-muted/20 shrink-0">
+                {([
+                  { label: "접수", count: statusCounts["접수"], variant: "default" as const },
+                  { label: "처리중", count: statusCounts["처리중"], variant: "secondary" as const },
+                  { label: "완료", count: statusCounts["완료"], variant: "outline" as const },
+                  { label: "취소", count: statusCounts["취소"], variant: "destructive" as const },
+                ]).map((item) => (
+                  <div key={item.label} className="flex items-center gap-1">
+                    <Badge variant={item.variant} className="text-[10px] px-1.5 py-0">
+                      {item.label}
+                    </Badge>
+                    <span className="text-sm font-bold tabular-nums text-foreground">{item.count}</span>
+                  </div>
+                ))}
+              </div>
+
+              {/* 상세 컨텐츠 */}
+              <div className="flex-1 overflow-auto">
+                {selectedClaim ? (
+                  <div className="p-4 space-y-4">
+                    {/* 기본 정보 그리드 */}
+                    <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">접수일자</p>
+                        <p className="text-sm text-foreground">{selectedClaim.claim_date}</p>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">담당자</p>
+                        <p className="text-sm text-foreground">{selectedClaim.manager_name || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">유형</p>
+                        <Badge variant={getClaimTypeVariant(selectedClaim.claim_type)} className="text-[11px]">
+                          {selectedClaim.claim_type}
+                        </Badge>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">상태</p>
+                        <Badge variant={getClaimStatusVariant(selectedClaim.claim_status)} className="text-[11px]">
+                          {selectedClaim.claim_status}
+                        </Badge>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">거래처명</p>
+                        <p className="text-sm font-medium text-foreground">{selectedClaim.customer_name}</p>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주번호</p>
+                        <p className="text-sm font-mono text-muted-foreground">{selectedClaim.order_no || "-"}</p>
+                      </div>
+                    </div>
+
+                    <div className="border-t" />
+
+                    {/* 클레임 내용 */}
+                    <div>
+                      <div className="flex items-center gap-1.5 mb-1.5">
+                        <FileText className="w-3.5 h-3.5 text-muted-foreground" />
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">클레임 내용</p>
+                      </div>
+                      <div className="rounded-md border bg-muted/30 p-3 text-sm text-foreground whitespace-pre-wrap min-h-[60px]">
+                        {selectedClaim.claim_content || "-"}
+                      </div>
+                    </div>
+
+                    {/* 처리 내용 */}
+                    <div>
+                      <div className="flex items-center gap-1.5 mb-1.5">
+                        <Wrench className="w-3.5 h-3.5 text-muted-foreground" />
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">처리 내용</p>
+                      </div>
+                      <div className="rounded-md border bg-muted/30 p-3 text-sm text-foreground whitespace-pre-wrap min-h-[60px]">
+                        {selectedClaim.process_content || "-"}
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex flex-col items-center justify-center h-full text-center p-8">
+                    <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-14 h-14 flex items-center justify-center mb-4">
+                      <Inbox className="w-7 h-7 text-muted-foreground/30" />
+                    </div>
+                    <p className="text-sm font-medium text-muted-foreground mb-1">
+                      좌측에서 클레임을 선택해주세요
+                    </p>
+                    <p className="text-xs text-muted-foreground/60">
+                      클레임을 선택하면 상세 정보가 표시돼요
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ───── 클레임 등록/수정 모달 ───── */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[900px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "클레임 수정" : "클레임 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? "클레임 정보를 수정해요." : "새로운 클레임을 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex flex-col md:flex-row gap-4 py-2">
+            {/* 왼쪽: 기본 정보 */}
+            <div className="md:w-[320px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border">
+              <h3 className="text-[13px] font-bold pb-2 border-b text-foreground">기본 정보</h3>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_no" className="text-[11px] font-semibold text-muted-foreground">클레임번호</Label>
+                <Input
+                  id="claim_no"
+                  value={formData.claim_no || ""}
+                  readOnly
+                  className="h-9 text-sm bg-muted cursor-not-allowed font-mono"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_date" className="text-[11px] font-semibold text-muted-foreground">접수일자</Label>
+                <Input
+                  id="claim_date"
+                  type="date"
+                  value={formData.claim_date || ""}
+                  onChange={(e) => handleFormChange("claim_date", e.target.value)}
+                  className="h-9 text-sm"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_type" className="text-[11px] font-semibold text-muted-foreground">
+                  클레임 유형 <span className="text-destructive">*</span>
+                </Label>
+                <Select
+                  value={formData.claim_type || ""}
+                  onValueChange={(v) => handleFormChange("claim_type", v)}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue placeholder="유형을 선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CLAIM_TYPES.map((t) => (
+                      <SelectItem key={t} value={t}>{t}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_status" className="text-[11px] font-semibold text-muted-foreground">처리 상태</Label>
+                <Select
+                  value={formData.claim_status || "접수"}
+                  onValueChange={(v) => handleFormChange("claim_status", v)}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CLAIM_STATUSES.map((s) => (
+                      <SelectItem key={s} value={s}>{s}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <Label className="text-[11px] font-semibold text-muted-foreground">
+                  거래처명 <span className="text-destructive">*</span>
+                </Label>
+                <Popover open={customerOpen} onOpenChange={setCustomerOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={customerOpen}
+                      className="h-9 w-full justify-between font-normal"
+                      onClick={() => fetchCustomers(false)}
+                    >
+                      {formData.customer_name || "거래처를 선택해주세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput placeholder="거래처 검색..." />
+                      <CommandList>
+                        {customersLoading ? (
+                          <div className="flex items-center justify-center py-6">
+                            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                            <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
+                          </div>
+                        ) : (
+                          <>
+                            <CommandEmpty className="py-4 text-center text-sm">
+                              거래처를 찾을 수 없어요.
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {customers.map((cust) => (
+                                <CommandItem
+                                  key={cust.customerCode}
+                                  value={`${cust.customerCode} ${cust.customerName}`}
+                                  onSelect={() => {
+                                    setFormData((prev) => ({
+                                      ...prev,
+                                      customer_code: cust.customerCode,
+                                      customer_name: cust.customerName,
+                                    }));
+                                    setCustomerOpen(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      formData.customer_code === cust.customerCode
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col min-w-0">
+                                    <span className="font-medium truncate">{cust.customerName}</span>
+                                    <span className="text-[10px] text-muted-foreground">{cust.customerCode}</span>
+                                  </div>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="manager_name" className="text-[11px] font-semibold text-muted-foreground">담당자</Label>
+                <Input
+                  id="manager_name"
+                  value={formData.manager_name || ""}
+                  onChange={(e) => handleFormChange("manager_name", e.target.value)}
+                  placeholder="담당자를 입력해주세요"
+                  className="h-9"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label className="text-[11px] font-semibold text-muted-foreground">수주번호</Label>
+                <Popover open={orderOpen} onOpenChange={setOrderOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={orderOpen}
+                      className="h-9 w-full justify-between font-normal"
+                      onClick={() => fetchSalesOrders(false)}
+                    >
+                      {formData.order_no || "수주번호를 선택해주세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput placeholder="수주번호 검색..." />
+                      <CommandList>
+                        {ordersLoading ? (
+                          <div className="flex items-center justify-center py-6">
+                            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                            <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
+                          </div>
+                        ) : (
+                          <>
+                            <CommandEmpty className="py-4 text-center text-sm">
+                              수주번호를 찾을 수 없어요.
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {salesOrders.map((order) => (
+                                <CommandItem
+                                  key={order.orderNo}
+                                  value={`${order.orderNo} ${order.partnerName}`}
+                                  onSelect={() => {
+                                    setFormData((prev) => ({
+                                      ...prev,
+                                      order_no: order.orderNo,
+                                    }));
+                                    setOrderOpen(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      formData.order_no === order.orderNo
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col min-w-0">
+                                    <span className="font-medium truncate">{order.orderNo}</span>
+                                    <span className="text-[10px] text-muted-foreground">
+                                      {order.status}
+                                      {order.partnerName ? ` | ${order.partnerName}` : ""}
+                                    </span>
+                                  </div>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+
+            {/* 오른쪽: 상세 내용 */}
+            <div className="flex-1 space-y-3 bg-muted/30 p-4 rounded-lg border min-w-0">
+              <h3 className="text-[13px] font-bold pb-2 border-b text-foreground">클레임 상세 내용</h3>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_content" className="text-[11px] font-semibold text-muted-foreground">
+                  클레임 내용 <span className="text-destructive">*</span>
+                </Label>
+                <Textarea
+                  id="claim_content"
+                  value={formData.claim_content || ""}
+                  onChange={(e) => handleFormChange("claim_content", e.target.value)}
+                  placeholder="클레임 내용을 상세히 입력해주세요"
+                  className="min-h-[200px] resize-y text-sm"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="process_content" className="text-[11px] font-semibold text-muted-foreground">처리 내용</Label>
+                <Textarea
+                  id="process_content"
+                  value={formData.process_content || ""}
+                  onChange={(e) => handleFormChange("process_content", e.target.value)}
+                  placeholder="처리 내용을 입력해주세요"
+                  className="min-h-[150px] resize-y text-sm"
+                />
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <Save className="w-4 h-4" />
+              )}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 모달 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={TABLE_NAME}
+        onSuccess={() => {
+          fetchData();
+          toast.success("엑셀 업로드가 완료되었어요.");
+        }}
+      />
+
+      {/* 확인 다이얼로그 */}
+      {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/sales/customer/page.tsx b/frontend/app/(main)/COMPANY_30/sales/customer/page.tsx
new file mode 100644
index 00000000..61e1269d
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/sales/customer/page.tsx
@@ -0,0 +1,2762 @@
+"use client";
+
+/**
+ * 거래처관리 — Type B 마스터-디테일 레이아웃 (리디자인)
+ *
+ * 좌측: 거래처 목록 (customer_mng)
+ * 우측: 품목별 단가 + 납품처 정보 탭
+ *
+ * 모달:
+ * - 거래처 등록/수정 (customer_mng)
+ * - 품목 추가 (item_info 검색 → customer_item_mapping + customer_item_prices)
+ * - 납품처 등록 (delivery_destination)
+ */
+
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Users, Package, MapPin, Search, X, Tag, Coins, Settings2, GripVertical,
+  ChevronRight, ChevronDown,
+} from "lucide-react";
+import {
+  DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { validateField, validateForm, formatField } from "@/lib/utils/validation";
+import { getAvailableNumberingRulesForScreen, previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const CUSTOMER_TABLE = "customer_mng";
+const MAPPING_TABLE = "customer_item_mapping";
+const PRICE_TABLE = "customer_item_prices";
+const DELIVERY_TABLE = "delivery_destination";
+const CONTACT_TABLE = "customer_contact";
+
+const CUSTOMER_GRID_COLUMNS = [
+  { key: "customer_code", label: "거래처코드" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "division", label: "거래유형" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "전화번호" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "status", label: "상태" },
+];
+
+function SortableMappingRow({ id, children }: { id: string; children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform), transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+  return (
+    <div ref={setNodeRef} style={style} className="flex gap-2 items-center">
+      <div {...attributes} {...listeners} className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0">
+        <GripVertical className="h-3.5 w-3.5" />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default function CustomerManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-customer", CUSTOMER_TABLE, CUSTOMER_GRID_COLUMNS);
+  const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 거래처 목록
+  const [customers, setCustomers] = useState<any[]>([]);
+  const [rawCustomers, setRawCustomers] = useState<any[]>([]);
+  const [customerLoading, setCustomerLoading] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
+  const [mainContactMap, setMainContactMap] = useState<Record<string, any>>({});
+  const [customerCount, setCustomerCount] = useState(0);
+  const [selectedCustomerId, setSelectedCustomerId] = useState<string | null>(null);
+
+  // 우측: 탭
+  const [rightTab, setRightTab] = useState<"items" | "delivery">("items");
+  // 우측: 품목 단가
+  const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceGroups, setPriceGroups] = useState<Record<string, { master: any; details: any[] }>>({});
+  const [priceLoading, setPriceLoading] = useState(false);
+  const [priceCheckedIds, setPriceCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [collapsedPriceCards, setCollapsedPriceCards] = useState<Set<string>>(new Set());
+  // 우측: 납품처
+  const [deliveryItems, setDeliveryItems] = useState<any[]>([]);
+  const [deliveryLoading, setDeliveryLoading] = useState(false);
+
+  // 품목 편집 데이터 (더블클릭 시 상세 입력 모달 재활용)
+  const [editItemData, setEditItemData] = useState<any>(null);
+  const savingRef = useRef(false);
+
+  // 거래처 모달
+  const [customerModalOpen, setCustomerModalOpen] = useState(false);
+  const [customerEditMode, setCustomerEditMode] = useState(false);
+  const [customerForm, setCustomerForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 품목 추가 모달 (1단계: 검색/선택)
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemTotalCount, setItemTotalCount] = useState(0);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 상세 입력 모달 (2단계: 거래처 품번/품명 + 단가)
+  const [itemDetailOpen, setItemDetailOpen] = useState(false);
+  const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; customer_item_code: string; customer_item_name: string }>>>({});
+  const [itemPrices, setItemPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 거래처 모달 탭
+  const [customerModalTab, setCustomerModalTab] = useState<"basic" | "contacts" | "delivery">("basic");
+  // 담당자 (customer_contact) - 모달 내
+  const [modalContacts, setModalContacts] = useState<any[]>([]);
+  const [modalContactLoading, setModalContactLoading] = useState(false);
+  const [modalContactForm, setModalContactForm] = useState<Record<string, any>>({});
+  const [modalContactEditId, setModalContactEditId] = useState<string | null>(null);
+  const [modalContactFormOpen, setModalContactFormOpen] = useState(false);
+  const [modalContactSaving, setModalContactSaving] = useState(false);
+  // 납품처 (delivery_destination) - 모달 내
+  const [modalDeliveries, setModalDeliveries] = useState<any[]>([]);
+  const [modalDeliveryLoading, setModalDeliveryLoading] = useState(false);
+  const [modalDeliveryForm, setModalDeliveryForm] = useState<Record<string, any>>({});
+  const [modalDeliveryEditId, setModalDeliveryEditId] = useState<string | null>(null);
+  const [modalDeliveryFormOpen, setModalDeliveryFormOpen] = useState(false);
+  const [modalDeliverySaving, setModalDeliverySaving] = useState(false);
+  const [modalDeliveryFormErrors, setModalDeliveryFormErrors] = useState<Record<string, string>>({});
+
+  const [continuousInput, setContinuousInput] = useState(false);
+
+  // 세금유형 (기본정보 탭 내)
+  const [taxTypeRows, setTaxTypeRows] = useState<{ _id: string; tax_type_name: string; rate: string }[]>([]);
+  const [taxTypeOptions, setTaxTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [employeeOptions, setEmployeeOptions] = useState<{ user_id: string; user_name: string; position_name?: string }[]>([]);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const flatten = (vals: any[]): { code: string; label: string }[] => {
+      const result: { code: string; label: string }[] = [];
+      for (const v of vals) {
+        result.push({ code: v.valueCode, label: v.valueLabel });
+        if (v.children?.length) result.push(...flatten(v.children));
+      }
+      return result;
+    };
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["division", "status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${CUSTOMER_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${PRICE_TABLE}/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+
+      // 세금유형 카테고리
+      try {
+        const taxRes = await apiClient.get(`/table-categories/customer_tax_type/tax_type_name/values`);
+        if (taxRes.data?.success) setTaxTypeOptions(flatten(taxRes.data.data || []));
+      } catch { /* skip */ }
+    };
+    load();
+    apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true })
+      .then((res) => {
+        const users = res.data?.data?.data || res.data?.data?.rows || [];
+        setEmployeeOptions(users.map((u: any) => ({
+          user_id: u.user_id, user_name: u.user_name || u.user_id, position_name: u.position_name,
+        })));
+      }).catch(() => {});
+  }, []);
+
+  // 거래처 목록 조회
+  const fetchCustomers = useCallback(async () => {
+    setCustomerLoading(true);
+    try {
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
+      const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "customer_code", order: "desc" },
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setRawCustomers(raw);
+
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const mainContact = mainContactMap[r.id];
+        return {
+          ...r,
+          division: resolve("division", r.division),
+          status: resolve("status", r.status),
+          contact_person: mainContact?.contact_name || "",
+          contact_phone: mainContact?.contact_phone || "",
+          email: mainContact?.contact_email || "",
+        };
+      });
+      // 거래처코드 숫자 기준 내림차순 정렬
+      data.sort((a: any, b: any) => {
+        const aNum = parseInt((a.customer_code || "").replace(/\D/g, ""), 10) || 0;
+        const bNum = parseInt((b.customer_code || "").replace(/\D/g, ""), 10) || 0;
+        return bNum - aNum;
+      });
+      setCustomers(data);
+      setCustomerCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("거래처 조회 실패:", err);
+      toast.error("거래처 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setCustomerLoading(false);
+    }
+  }, [searchFilters, categoryOptions, employeeOptions, mainContactMap]);
+
+  useEffect(() => { fetchCustomers(); }, [fetchCustomers]);
+
+  // 메인 담당자 조회 (최초 1번 + 저장 후 갱신)
+  const fetchMainContacts = useCallback(async () => {
+    try {
+      const contactRes = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+        dataFilter: { enabled: true, filters: [{ columnName: "is_main", operator: "equals", value: "Y" }] },
+      });
+      const allContacts = contactRes.data?.data?.data || contactRes.data?.data?.rows || [];
+      const map: Record<string, any> = {};
+      for (const c of allContacts) {
+        if ((c.is_main === "Y" || c.is_main === true) && c.customer_id) {
+          map[c.customer_id] = c;
+        }
+      }
+      setMainContactMap(map);
+    } catch { /* skip */ }
+  }, []);
+
+  useEffect(() => { fetchMainContacts(); }, [fetchMainContacts]);
+
+  const selectedCustomer = customers.find((c) => c.id === selectedCustomerId);
+
+  // 선택된 거래처의 품목 단가 조회
+  useEffect(() => {
+    if (!selectedCustomer?.customer_code) { setPriceItems([]); setPriceCheckedIds([]); return; }
+    setPriceCheckedIds([]);
+    const fetchItems = async () => {
+      setPriceLoading(true);
+      try {
+        const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+          ]},
+          autoFilter: true,
+        });
+        const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
+        };
+        const now = new Date();
+        const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+
+        // 품목 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
+        const grouped: Record<string, { master: any; details: any[] }> = {};
+        const flatItems: any[] = [];
+        const seenItemIds = new Set<string>();
+        for (const m of mappings) {
+          const itemKey = m.item_id || "";
+          if (seenItemIds.has(itemKey)) continue; // 품목당 첫 매핑만 마스터
+          seenItemIds.add(itemKey);
+
+          const itemInfo = itemMap[itemKey] || {};
+          const itemPriceList = allPrices
+            .filter((p: any) => p.item_id === itemKey)
+            .sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
+          const todayPrice = itemPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || itemPriceList[0] || {};
+
+          const masterRow = {
+            ...m,
+            item_number: itemKey,
+            item_name: itemInfo.item_name || "",
+            base_price_type: priceResolve("base_price_type", todayPrice.base_price_type || ""),
+            base_price: todayPrice.base_price || "",
+            discount_type: priceResolve("discount_type", todayPrice.discount_type || ""),
+            discount_value: todayPrice.discount_value || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+
+          // 단가 리스트 (라벨 변환)
+          const priceDetails = itemPriceList.map((p: any) => ({
+            ...p,
+            base_price_type_label: priceResolve("base_price_type", p.base_price_type || ""),
+            discount_type_label: priceResolve("discount_type", p.discount_type || ""),
+            currency_label: priceResolve("currency_code", p.currency_code || ""),
+            is_current: (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today),
+          }));
+
+          grouped[itemKey] = { master: masterRow, details: priceDetails };
+          flatItems.push(masterRow);
+        }
+        setPriceGroups(grouped);
+        setPriceItems(flatItems);
+      } catch (err) {
+        console.error("품목 조회 실패:", err);
+      } finally {
+        setPriceLoading(false);
+      }
+    };
+    fetchItems();
+  }, [selectedCustomer?.customer_code]);
+
+  // 납품처 조회
+  useEffect(() => {
+    if (!selectedCustomer?.customer_code) { setDeliveryItems([]); return; }
+    const fetchDelivery = async () => {
+      setDeliveryLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "customer_code", operator: "equals", value: selectedCustomer.customer_code },
+          ]},
+          autoFilter: true,
+        });
+        setDeliveryItems(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setDeliveryItems([]); } finally { setDeliveryLoading(false); }
+    };
+    fetchDelivery();
+  }, [selectedCustomer?.customer_code]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 모달 내 담당자 목록 조회
+  const fetchModalContacts = useCallback(async (customerId: string) => {
+    setModalContactLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      setModalContacts(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalContacts([]); } finally { setModalContactLoading(false); }
+  }, []);
+
+  // 모달 내 납품처 목록 조회
+  const fetchModalDeliveries = useCallback(async (customerCode: string) => {
+    setModalDeliveryLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
+        autoFilter: true,
+      });
+      setModalDeliveries(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalDeliveries([]); } finally { setModalDeliveryLoading(false); }
+  }, []);
+
+  // 담당자 저장 (등록/수정)
+  const handleModalContactSave = async () => {
+    if (!modalContactForm.contact_name) { toast.error("담당자명은 필수입니다."); return; }
+    if (modalContactEditId) {
+      // 수정 — 로컬 리스트에서 교체 + 메인 설정 시 다른 메인 해제
+      const isSettingMain = modalContactForm.is_main === "Y" || modalContactForm.is_main === true;
+      setModalContacts((prev) => prev.map((c) =>
+        (c._localId || c.id) === modalContactEditId
+          ? { ...c, ...modalContactForm }
+          : isSettingMain ? { ...c, is_main: "N" } : c
+      ));
+    } else {
+      // 추가 — 로컬 리스트에 카드 추가
+      setModalContacts((prev) => [...prev, {
+        ...modalContactForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalContactFormOpen(false);
+    setModalContactForm({});
+    setModalContactEditId(null);
+  };
+
+  // 담당자 삭제
+  const handleModalContactDelete = (contactId: string) => {
+    setModalContacts((prev) => prev.filter((c) => (c._localId || c.id) !== contactId));
+  };
+
+  // 납품처 자동채번 유틸
+  const generateDeliveryCode = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DELIVERY_TABLE}/destination_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        const allRes = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "destination_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const match = (row.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        // 로컬에 추가된 것도 포함
+        for (const d of modalDeliveries) {
+          const match = (d.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLen = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          return prefix + String(maxSeq + 1).padStart(seqLen, "0");
+        }
+      }
+    } catch { /* skip */ }
+    return "";
+  };
+
+  // 납품처 저장 (모달 내)
+  const handleModalDeliverySave = async () => {
+    if (!modalDeliveryForm.destination_name) { toast.error("납품처명은 필수입니다."); return; }
+    if (modalDeliveryEditId) {
+      const isSettingMain = modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true;
+      setModalDeliveries((prev) => prev.map((d) =>
+        (d._localId || d.id) === modalDeliveryEditId
+          ? { ...d, ...modalDeliveryForm }
+          : isSettingMain ? { ...d, is_default: "N" } : d
+      ));
+    } else {
+      setModalDeliveries((prev) => [...prev, {
+        ...modalDeliveryForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalDeliveryFormOpen(false);
+    setModalDeliveryForm({});
+    setModalDeliveryEditId(null);
+    setModalDeliveryFormErrors({});
+  };
+
+  const handleModalDeliveryDelete = (deliveryId: string) => {
+    setModalDeliveries((prev) => prev.filter((d) => (d._localId || d.id) !== deliveryId));
+  };
+
+  // 거래처 등록 모달 열기
+  const openCustomerRegister = async () => {
+    setCustomerForm({});
+    setFormErrors({});
+    setCustomerEditMode(false);
+    setCustomerModalTab("basic");
+    setModalContacts([]);
+    setModalDeliveries([]);
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setTaxTypeRows([]);
+    setCustomerModalOpen(true);
+    // 거래처 코드 자동 채번 — 기존 데이터 max값 기반
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${CUSTOMER_TABLE}/customer_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        // 기존 데이터에서 CUST-XXX 패턴의 최대 순번 조회
+        const allRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "customer_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const code = row.customer_code || "";
+          const match = code.match(/(\d+)$/);
+          if (match) {
+            const seq = parseInt(match[1], 10);
+            if (seq > maxSeq) maxSeq = seq;
+          }
+        }
+        // preview로 접두어 패턴 가져오기
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLength = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          const nextSeq = maxSeq + 1;
+          const nextCode = prefix + String(nextSeq).padStart(seqLength, "0");
+          setCustomerForm((prev) => ({ ...prev, customer_code: nextCode, _numberingRuleId: ruleId }));
+        }
+      }
+    } catch { /* skip */ }
+  };
+
+  const openCustomerEdit = () => {
+    if (!selectedCustomer) return;
+    const rawData = rawCustomers.find((c) => c.id === selectedCustomerId);
+    setCustomerForm({ ...(rawData || selectedCustomer) });
+    setFormErrors({});
+    setCustomerEditMode(true);
+    setCustomerModalTab("basic");
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setModalContactForm({});
+    setModalDeliveryForm({});
+    setModalContactEditId(null);
+    setModalDeliveryEditId(null);
+    // 수정 모드에서는 바로 조회
+    const code = (rawData || selectedCustomer).customer_code;
+    const id = (rawData || selectedCustomer).id;
+    if (id) {
+      fetchModalContacts(id);
+      // 세금유형 로드
+      apiClient.post(`/table-management/tables/customer_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: id }] },
+        autoFilter: true,
+      }).then((res: any) => {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        setTaxTypeRows(rows.map((r: any) => ({ _id: r.id, tax_type_name: r.tax_type_name || "", rate: String(r.rate || "") })));
+      }).catch(() => setTaxTypeRows([]));
+    }
+    if (code) fetchModalDeliveries(code);
+    setCustomerModalOpen(true);
+  };
+
+  // 폼 필드 변경 시 자동 포맷팅 + 실시간 검증
+  const handleFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setCustomerForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => {
+      const next = { ...prev };
+      if (error) next[field] = error; else delete next[field];
+      return next;
+    });
+  };
+
+  // 세금유형/담당자/납품처를 한번에 저장하는 헬퍼
+  const saveSubTables = async (customerId: string, customerCode: string) => {
+    // 세금유형 — 기존 삭제 후 재생성
+    try {
+      const existTax = await apiClient.post(`/table-management/tables/customer_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      const existRows = existTax.data?.data?.data || existTax.data?.data?.rows || [];
+      if (existRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/customer_tax_type/delete`, {
+          data: existRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+      for (const t of taxTypeRows.filter((r) => r.tax_type_name)) {
+        await apiClient.post(`/table-management/tables/customer_tax_type/add`, {
+          id: crypto.randomUUID(), customer_id: customerId,
+          tax_type_name: t.tax_type_name, tax_type_id: t.tax_type_name,
+          rate: t.rate ? Number(t.rate) : 0,
+        });
+      }
+    } catch { /* skip */ }
+
+    // 담당자 — 기존 삭제 후 전체 재생성
+    try {
+      const existContacts = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      const existCRows = existContacts.data?.data?.data || existContacts.data?.data?.rows || [];
+      if (existCRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${CONTACT_TABLE}/delete`, {
+          data: existCRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const c of modalContacts) {
+      try {
+        await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/add`, {
+          id: crypto.randomUUID(), customer_id: customerId,
+          contact_name: c.contact_name || "", contact_phone: c.contact_phone || "",
+          contact_email: c.contact_email || "", department: c.department || "",
+          is_main: c.is_main || "N", memo: c.memo || "",
+        });
+      } catch { /* skip */ }
+    }
+
+    // 납품처 — 기존 삭제 후 전체 재생성
+    try {
+      const existDeliveries = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
+        autoFilter: true,
+      });
+      const existDRows = existDeliveries.data?.data?.data || existDeliveries.data?.data?.rows || [];
+      if (existDRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
+          data: existDRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const d of modalDeliveries) {
+      try {
+        await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
+          id: crypto.randomUUID(), customer_code: customerCode,
+          destination_code: d.destination_code || "", destination_name: d.destination_name || "",
+          address: d.address || "", manager_name: d.manager_name || "",
+          phone: d.phone || "", memo: d.memo || "", is_default: d.is_default || "N",
+        });
+      } catch { /* skip */ }
+    }
+  };
+
+  const handleCustomerSave = async () => {
+    if (!customerForm.customer_name) { toast.error("거래처명은 필수입니다."); return; }
+    if (!customerForm.status) { toast.error("상태는 필수입니다."); return; }
+    const errors = validateForm(customerForm, ["contact_phone", "email", "business_number"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) {
+      toast.error("입력 형식을 확인해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, _numberingRuleId, ...fields } = customerForm;
+      const cleanFields: Record<string, any> = {};
+      for (const [key, value] of Object.entries(fields)) {
+        cleanFields[key] = value === "" ? null : value;
+      }
+
+      if (customerEditMode && id) {
+        // 수정
+        await apiClient.put(`/table-management/tables/${CUSTOMER_TABLE}/edit`, {
+          originalData: { id }, updatedData: cleanFields,
+        });
+        await saveSubTables(id, cleanFields.customer_code || customerForm.customer_code);
+        toast.success("저장되었습니다.");
+      } else {
+        // 신규 등록
+        await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/add`, cleanFields);
+        // id 획득
+        const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: cleanFields.customer_code }] },
+          autoFilter: true,
+        });
+        const newRow = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+        if (newRow?.id) {
+          await saveSubTables(newRow.id, cleanFields.customer_code);
+        }
+        toast.success("거래처가 등록되었습니다.");
+      }
+
+      fetchCustomers();
+      fetchMainContacts();
+      if (!customerEditMode && continuousInput) {
+        // 연속입력 — 폼 초기화하고 모달 유지
+        setCustomerForm({});
+        setModalContacts([]);
+        setModalDeliveries([]);
+        setTaxTypeRows([]);
+        setCustomerModalTab("basic");
+        // 새 코드 채번
+        try {
+          const ruleRes = await apiClient.get(`/numbering-rules/by-column/${CUSTOMER_TABLE}/customer_code`);
+          const ruleData = ruleRes.data;
+          if (ruleData?.success && ruleData?.data?.ruleId) {
+            const ruleId = ruleData.data.ruleId;
+            const allRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, { page: 1, size: 500, autoFilter: true, sort: { columnName: "customer_code", order: "desc" } });
+            const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+            let maxSeq = 0;
+            for (const row of allRows) { const match = (row.customer_code || "").match(/(\d+)$/); if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; } }
+            const previewRes = await previewNumberingCode(ruleId);
+            if (previewRes.success && previewRes.data?.generatedCode) {
+              const prefix = previewRes.data.generatedCode.replace(/\d+$/, "");
+              const seqLen = (previewRes.data.generatedCode.match(/(\d+)$/) || ["", "001"])[1].length;
+              setCustomerForm({ customer_code: prefix + String(maxSeq + 1).padStart(seqLen, "0") });
+            }
+          }
+        } catch { /* skip */ }
+        toast.success("등록 완료. 다음 거래처를 입력하세요.");
+      } else {
+        setCustomerModalOpen(false);
+        // 우측 패널 갱신
+        if (selectedCustomerId) {
+          const cid = selectedCustomerId;
+          setSelectedCustomerId(null);
+          setTimeout(() => setSelectedCustomerId(cid), 50);
+        }
+      }
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 거래처 삭제
+  const handleCustomerDelete = async () => {
+    if (!selectedCustomerId) return;
+    const ok = await confirm("거래처를 삭제하시겠습니까?", {
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${CUSTOMER_TABLE}/delete`, {
+        data: [{ id: selectedCustomerId }],
+      });
+      toast.success("삭제되었습니다.");
+      setSelectedCustomerId(null);
+      fetchCustomers();
+    } catch { toast.error("삭제에 실패했습니다."); }
+  };
+
+  // 품목 검색
+  const searchItems = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [
+        { columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" },
+      ];
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters },
+        autoFilter: true,
+      });
+      const allItems = res.data?.data?.data || res.data?.data?.rows || [];
+      setItemTotalCount(allItems.length);
+      const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
+      const seenNumbers = new Set<string>();
+      const deduped = allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        if (item.item_number && seenNumbers.has(item.item_number)) return false;
+        if (item.item_number) seenNumbers.add(item.item_number);
+        return true;
+      });
+      setItemSearchResults(deduped);
+    } catch { /* skip */ } finally { setItemSearchLoading(false); }
+  };
+
+  // 품목 선택 완료 → 상세 입력 모달로 전환
+  const goToItemDetail = () => {
+    const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+    setSelectedItemsForDetail(selected);
+    const mappings: typeof itemMappings = {};
+    const prices: typeof itemPrices = {};
+    for (const item of selected) {
+      const key = item.item_number || item.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: item.standard_price || item.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: item.standard_price || item.selling_price || "",
+      }];
+    }
+    setItemMappings(mappings);
+    setItemPrices(prices);
+    setItemSelectOpen(false);
+    setItemDetailOpen(true);
+  };
+
+  // 거래처 품번/품명 행 추가
+  const addMappingRow = (itemKey: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, customer_item_code: "", customer_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (itemKey: string, rowId: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const handleMappingDragEnd = (itemKey: string, event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setItemMappings((prev) => {
+      const arr = [...(prev[itemKey] || [])];
+      const oldIdx = arr.findIndex((r) => r._id === active.id);
+      const newIdx = arr.findIndex((r) => r._id === over.id);
+      return { ...prev, [itemKey]: arrayMove(arr, oldIdx, newIdx) };
+    });
+  };
+
+  const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  // 단가 행 추가
+  const addPriceRow = (itemKey: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (itemKey: string, rowId: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1; // "10원" → 10, "100원" → 100
+          if (roundLabel === "반올림") {
+            calc = Math.round(calc / unit) * unit;
+          } else if (roundLabel === "절삭") {
+            calc = Math.floor(calc / unit) * unit;
+          } else if (roundLabel === "올림") {
+            calc = Math.ceil(calc / unit) * unit;
+          }
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  // 품목 편집 열기
+  const openEditItem = async (row: any) => {
+    const itemKey = row.item_number || row.item_id;
+    let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "equals", value: itemKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) itemInfo = found;
+    } catch { /* skip */ }
+
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: selectedCustomer!.customer_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.customer_item_code || m.customer_item_name)
+        .map((m: any) => ({
+          _id: `m_existing_${m.id}`,
+          customer_item_code: m.customer_item_code || "",
+          customer_item_name: m.customer_item_name || "",
+        }));
+    } catch { /* skip */ }
+
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: selectedCustomer!.customer_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date ? String(p.start_date).split("T")[0] : "",
+        end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedItemsForDetail([itemInfo]);
+    setItemMappings({ [itemKey]: mappingRows });
+    setItemPrices({ [itemKey]: priceRows });
+    setEditItemData(row);
+    setItemDetailOpen(true);
+  };
+
+  const handleItemDetailSave = async () => {
+    if (!selectedCustomer) return;
+    if (savingRef.current) return;
+    savingRef.current = true;
+    const isEditingExisting = !!editItemData;
+    setSaving(true);
+    try {
+      for (const item of selectedItemsForDetail) {
+        const itemKey = item.item_number || item.id;
+        const mappingRows = itemMappings[itemKey] || [];
+
+        if (isEditingExisting && editItemData?.id) {
+          // 기존 매핑 조회
+          let existingMaps: any[] = [];
+          try {
+            const existingMappings = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingMaps = existingMappings.data?.data?.data || existingMappings.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 매핑 upsert: 기존 것은 update, 새 것은 insert, 남은 것은 delete
+          const usedExistingIds = new Set<string>();
+          let firstMappingId: string | null = editItemData.id;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const existMap = existingMaps[mi];
+            if (existMap) {
+              // update
+              await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+                originalData: { id: existMap.id },
+                updatedData: {
+                  customer_item_code: mappingRows[mi].customer_item_code || "",
+                  customer_item_name: mappingRows[mi].customer_item_name || "",
+                },
+              });
+              usedExistingIds.add(existMap.id);
+              if (mi === 0) firstMappingId = existMap.id;
+            } else {
+              // insert
+              const mRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+                id: crypto.randomUUID(),
+                customer_id: selectedCustomer.customer_code, item_id: itemKey,
+                customer_item_code: mappingRows[mi].customer_item_code || "",
+                customer_item_name: mappingRows[mi].customer_item_name || "",
+              });
+              if (mi === 0 && !firstMappingId) firstMappingId = mRes.data?.data?.id || null;
+            }
+          }
+          // 초과분 delete
+          const toDeleteMaps = existingMaps.filter((m) => !usedExistingIds.has(m.id));
+          if (toDeleteMaps.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: toDeleteMaps.map((m: any) => ({ id: m.id })),
+            });
+          }
+
+          // 기존 단가 조회
+          let existingPriceRows: any[] = [];
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingPriceRows = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 단가 upsert
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          const usedPriceIds = new Set<string>();
+          for (let pi = 0; pi < priceRows.length; pi++) {
+            const price = priceRows[pi];
+            const priceData = {
+              mapping_id: firstMappingId || editItemData.id,
+              customer_id: selectedCustomer.customer_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            };
+            const existPrice = existingPriceRows[pi];
+            if (existPrice) {
+              await apiClient.put(`/table-management/tables/${PRICE_TABLE}/edit`, {
+                originalData: { id: existPrice.id },
+                updatedData: priceData,
+              });
+              usedPriceIds.add(existPrice.id);
+            } else {
+              await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+                id: crypto.randomUUID(), ...priceData,
+              });
+            }
+          }
+          // 초과분 delete
+          const toDeletePrices = existingPriceRows.filter((p) => !usedPriceIds.has(p.id));
+          if (toDeletePrices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: toDeletePrices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } else {
+          if (!mappingRows.length || !mappingRows[0]?.customer_item_code) {
+            const existingCheck = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 1,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            if ((existingCheck.data?.data?.data || existingCheck.data?.data?.rows || []).length > 0) {
+              toast.warning(`${item.item_name || itemKey} 품목은 이미 등록되어 있습니다.`);
+              continue;
+            }
+          }
+
+          let mappingId: string | null = null;
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            customer_id: selectedCustomer.customer_code, item_id: itemKey,
+            customer_item_code: mappingRows[0]?.customer_item_code || "",
+            customer_item_name: mappingRows[0]?.customer_item_name || "",
+          });
+          mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              customer_id: selectedCustomer.customer_code, item_id: itemKey,
+              customer_item_code: mappingRows[mi].customer_item_code || "",
+              customer_item_name: mappingRows[mi].customer_item_name || "",
+            });
+          }
+
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", customer_id: selectedCustomer.customer_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedItemsForDetail.length}개 품목이 추가되었습니다.`);
+      setItemDetailOpen(false);
+      setEditItemData(null);
+      setItemCheckedIds(new Set());
+      const cid = selectedCustomerId;
+      setSelectedCustomerId(null);
+      setTimeout(() => setSelectedCustomerId(cid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+      savingRef.current = false;
+    }
+  };
+
+  // 품목 매핑 삭제
+  const handlePriceItemDelete = async () => {
+    if (priceCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${priceCheckedIds.length}개 품목 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      for (const mappingId of priceCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: priceCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${priceCheckedIds.length}개 품목 매핑이 삭제되었습니다.`);
+      setPriceCheckedIds([]);
+      const cid = selectedCustomerId;
+      setSelectedCustomerId(null);
+      setTimeout(() => setSelectedCustomerId(cid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // EDataTable 컬럼 정의 (거래처 목록) — ts.visibleColumns 순서를 따름
+  const customerColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      customer_code: { width: "w-[120px]" },
+      customer_name: { minWidth: "min-w-[140px]" },
+      division: {
+        width: "w-[80px]",
+        render: (val: any) =>
+          val ? (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
+              {val}
+            </Badge>
+          ) : null,
+      },
+      contact_person: { width: "w-[80px]" },
+      contact_phone: { width: "w-[120px]" },
+      email: { width: "w-[160px]" },
+      business_number: { width: "w-[120px]" },
+      address: { minWidth: "min-w-[150px]" },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val}
+            </Badge>
+          ) : null,
+      },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (customers.length === 0) return;
+    toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
+    try {
+      const allMappings: any[] = [];
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 5000, autoFilter: true,
+      });
+      const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemIds.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+            autoFilter: true,
+          });
+          for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+            itemMap[item.item_number] = item;
+          }
+        } catch { /* skip */ }
+      }
+      for (const m of mappings) {
+        const itemInfo = itemMap[m.item_id] || {};
+        allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
+      }
+
+      const rows: Record<string, any>[] = [];
+      for (const c of customers) {
+        const custMappings = allMappings.filter((m) => m.customer_id === c.customer_code);
+        if (custMappings.length === 0) {
+          rows.push({
+            거래처코드: c.customer_code, 거래처명: c.customer_name,
+            거래유형: getCategoryLabel("division", c.division),
+            담당자: c.contact_person, 전화번호: c.contact_phone,
+            사업자번호: c.business_number, 이메일: c.email,
+            상태: getCategoryLabel("status", c.status),
+            품목코드: "", 품명: "", 규격: "",
+            거래처품번: "", 거래처품명: "",
+            기준가: "", 할인유형: "", 할인값: "", 단가: "", 통화: "",
+          });
+        } else {
+          for (const m of custMappings) {
+            rows.push({
+              거래처코드: c.customer_code, 거래처명: c.customer_name,
+              거래유형: getCategoryLabel("division", c.division),
+              담당자: c.contact_person, 전화번호: c.contact_phone,
+              사업자번호: c.business_number, 이메일: c.email,
+              상태: getCategoryLabel("status", c.status),
+              품목코드: m.item_id || "", 품명: m.item_name || "", 규격: m.item_spec || "",
+              거래처품번: m.customer_item_code || "", 거래처품명: m.customer_item_name || "",
+              기준가: m.base_price || "", 할인유형: m.discount_type || "", 할인값: m.discount_value || "",
+              단가: m.calculated_price || "", 통화: m.currency_code || "",
+            });
+          }
+        }
+      }
+      await exportToExcel(rows, "거래처관리.xlsx", "거래처+품목");
+      toast.dismiss("excel-dl");
+      toast.success(`${rows.length}행 다운로드 완료`);
+    } catch (err) {
+      toast.dismiss("excel-dl");
+      toast.error("다운로드에 실패했습니다.");
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={CUSTOMER_TABLE}
+        filterId="c16-customer"
+        onFilterChange={setSearchFilters}
+        dataCount={customers.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button
+            variant="outline" size="sm" className="h-8" disabled={excelDetecting}
+            onClick={async () => {
+              setExcelDetecting(true);
+              try {
+                const result = await autoDetectMultiTableConfig(CUSTOMER_TABLE);
+                if (result.success && result.data) {
+                  setExcelChainConfig(result.data);
+                  setExcelUploadOpen(true);
+                } else {
+                  toast.error(result.message || "테이블 구조 분석 실패");
+                }
+              } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+            }}
+          >
+            {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />}
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 거래처 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">거래처 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {customerCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <label className="flex items-center gap-1.5 cursor-pointer mr-1">
+                    <input type="checkbox" checked={showInactive} onChange={(e) => setShowInactive(e.target.checked)} className="rounded" />
+                    <span className="text-[11px] text-muted-foreground">거래정지 포함</span>
+                  </label>
+                  <Button size="sm" onClick={openCustomerRegister}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedCustomerId} onClick={openCustomerEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedCustomerId} onClick={handleCustomerDelete}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={customerColumns}
+                data={ts.groupData(showInactive ? customers : customers.filter((c) => c.status !== "거래정지"))}
+                rowKey={(row) => row.id}
+                loading={customerLoading}
+                emptyMessage="등록된 거래처가 없어요"
+                selectedId={selectedCustomerId}
+                onSelect={(id) => setSelectedCustomerId(id)}
+                onRowDoubleClick={(row) => { setSelectedCustomerId(row.id); openCustomerEdit(); }}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-customer"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedCustomerId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">거래처를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 거래처를 선택하면 상세 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 탭 + 버튼 통합 헤더 */}
+                  <Tabs
+                    value={rightTab}
+                    onValueChange={(v) => setRightTab(v as "items" | "delivery")}
+                    className="flex flex-col flex-1 overflow-hidden gap-0"
+                  >
+                    <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                      <TabsList className="bg-transparent h-auto p-0 rounded-none">
+                        <TabsTrigger
+                          value="items"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <Package className="w-3.5 h-3.5" /> 거래처별 품목정보
+                          {Object.keys(priceGroups).length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{Object.keys(priceGroups).length}</Badge>
+                          )}
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="delivery"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <MapPin className="w-3.5 h-3.5" /> 납품처 정보
+                          {deliveryItems.length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{deliveryItems.length}</Badge>
+                          )}
+                        </TabsTrigger>
+                      </TabsList>
+                      <div className="flex gap-1.5">
+                        {rightTab === "items" ? (
+                          <>
+                            <Button size="sm" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
+                              <Plus className="w-3.5 h-3.5" /> 품목 추가
+                            </Button>
+                            <Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0} onClick={handlePriceItemDelete}>
+                              <Trash2 className="w-3.5 h-3.5" /> 삭제
+                            </Button>
+                          </>
+                        ) : (
+                          <Button size="sm" variant="outline" onClick={openCustomerEdit}>
+                            <Pencil className="w-3.5 h-3.5 mr-1" /> 거래처 수정에서 관리
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 품목정보 탭 */}
+                    <TabsContent value="items" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[40px] text-center px-2">
+                                <input
+                                  type="checkbox"
+                                  className="rounded"
+                                  checked={priceItems.length > 0 && priceCheckedIds.length === priceItems.length}
+                                  onChange={(e) => setPriceCheckedIds(e.target.checked ? priceItems.map((p) => p.id) : [])}
+                                />
+                              </TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                              <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품번</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품명</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                              <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                              <TableHead className="w-[60px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                              <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {priceLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.keys(priceGroups).length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 품목이 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.entries(priceGroups).map(([itemKey, group]) => {
+                              const isExpanded = expandedItems.has(itemKey);
+                              const m = group.master;
+                              const isChecked = priceCheckedIds.includes(m.id);
+                              return (
+                                <React.Fragment key={itemKey}>
+                                  {/* 마스터 행 */}
+                                  <TableRow
+                                    className={cn(
+                                      "cursor-pointer border-l-[3px] border-l-transparent h-[41px]",
+                                      isChecked && "bg-primary/5 border-l-primary"
+                                    )}
+                                    onClick={() => {
+                                      setExpandedItems((prev) => {
+                                        const next = new Set(prev);
+                                        if (next.has(itemKey)) next.delete(itemKey); else next.add(itemKey);
+                                        return next;
+                                      });
+                                    }}
+                                    onDoubleClick={() => openEditItem(m)}
+                                  >
+                                    <TableCell
+                                      className="text-center px-2"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        setPriceCheckedIds((prev) =>
+                                          prev.includes(m.id) ? prev.filter((id) => id !== m.id) : [...prev, m.id]
+                                        );
+                                      }}
+                                    >
+                                      <input type="checkbox" className="rounded" checked={isChecked} readOnly />
+                                    </TableCell>
+                                    <TableCell className="text-[13px] font-mono">
+                                      <div className="flex items-center gap-1">
+                                        {isExpanded
+                                          ? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                          : <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                        }
+                                        {m.item_number}
+                                      </div>
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.customer_item_code}</TableCell>
+                                    <TableCell className="text-[13px]">{m.customer_item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.base_price_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">
+                                      {m.base_price ? Number(m.base_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.discount_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">{m.discount_value ? Number(m.discount_value).toLocaleString() : ""}</TableCell>
+                                    <TableCell className="text-[13px] text-right font-semibold">
+                                      {m.calculated_price ? Number(m.calculated_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.currency_code}</TableCell>
+                                  </TableRow>
+
+                                  {/* 현재 단가 카드 (펼쳤을 때) */}
+                                  {isExpanded && (() => {
+                                    const cp = group.details.find((p) => p.is_current) || group.details[0];
+                                    if (!cp) return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="py-3 px-4 text-xs text-muted-foreground">등록된 단가가 없어요</TableCell>
+                                      </TableRow>
+                                    );
+                                    return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="px-4 py-3">
+                                          <div className="border border-primary/20 rounded-lg bg-card overflow-hidden">
+                                            {/* 카드 헤더 */}
+                                            <div className="flex items-center justify-between px-4 py-2 bg-primary/[0.04] border-b border-primary/10">
+                                              <div className="flex items-center gap-2">
+                                                <Coins className="w-3.5 h-3.5 text-primary" />
+                                                <span className="text-xs font-semibold">적용 단가</span>
+                                                <Badge variant="secondary" className="text-[9px] px-1.5 py-0 bg-primary/10 text-primary">현재</Badge>
+                                              </div>
+                                              {group.details.length > 1 && (
+                                                <span className="text-[10px] text-muted-foreground">전체 {group.details.length}건 중</span>
+                                              )}
+                                            </div>
+                                            {/* 카드 내용 */}
+                                            <div className="px-5 py-3.5 flex items-end gap-0 text-[13px]">
+                                              <div className="flex flex-col pr-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기간</span>
+                                                <span className="font-mono text-muted-foreground text-xs">
+                                                  {cp.start_date ? String(cp.start_date).split("T")[0] : "—"} ~ {cp.end_date ? String(cp.end_date).split("T")[0] : "—"}
+                                                </span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준유형</span>
+                                                <span>{cp.base_price_type_label || "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준가</span>
+                                                <span className="font-mono font-medium">{cp.base_price ? Number(cp.base_price).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인유형</span>
+                                                <span>{cp.discount_type_label && cp.discount_type_label !== "할인없음" ? cp.discount_type_label : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인값</span>
+                                                <span className="font-mono">{cp.discount_value ? Number(cp.discount_value).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">단수처리</span>
+                                                <span>
+                                                  {cp.rounding_unit_value
+                                                    ? (priceCategoryOptions["rounding_unit_value"]?.find((o) => o.code === cp.rounding_unit_value)?.label || cp.rounding_unit_value)
+                                                    : "-"}
+                                                </span>
+                                              </div>
+                                              <span className="text-primary/50 px-4 pb-0.5 text-lg">→</span>
+                                              <div className="flex flex-col pl-1">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">계산단가</span>
+                                                <span className="text-base font-bold font-mono text-foreground">
+                                                  {(cp.calculated_price || cp.unit_price) ? Number(cp.calculated_price || cp.unit_price).toLocaleString() : "-"}
+                                                  <span className="text-xs font-normal text-muted-foreground ml-1.5">{cp.currency_label}</span>
+                                                </span>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })()}
+                                </React.Fragment>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+
+                    {/* 납품처 탭 */}
+                    <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                              <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                              <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                              <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {deliveryLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 납품처가 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.map((d) => (
+                              <TableRow key={d.id} className="h-[41px]">
+                                <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                                <TableCell className="text-sm">{d.destination_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                                <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                                <TableCell className="text-[13px]">{d.phone}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                                <TableCell className="text-center">
+                                  {d.is_default && (
+                                    <Badge variant="default" className="text-[10px] px-1.5 py-0 h-5">메인</Badge>
+                                  )}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 모달: 거래처 등록/수정 (3탭) ── */}
+      <Dialog open={customerModalOpen} onOpenChange={(open) => {
+        if (!open && isConfirmOpenRef.current) return;
+        setCustomerModalOpen(open);
+        if (!open) {
+          setModalContactFormOpen(false);
+          setModalDeliveryFormOpen(false);
+          setModalContactForm({});
+          setModalDeliveryForm({});
+          setModalContactEditId(null);
+          setModalDeliveryEditId(null);
+          fetchCustomers();
+          if (customerForm.customer_code) {
+            const cid = selectedCustomerId;
+            setSelectedCustomerId(null);
+            setTimeout(() => setSelectedCustomerId(cid), 50);
+          }
+        }
+      }}>
+        <DialogContent className="max-w-4xl h-[85vh] flex flex-col overflow-hidden p-0">
+          <DialogHeader className="px-6 pt-5 pb-0 shrink-0">
+            <DialogTitle>{customerEditMode ? "거래처 수정" : "거래처 등록"}</DialogTitle>
+            <DialogDescription>
+              {customerEditMode ? "거래처 정보를 수정합니다." : "새로운 거래처를 등록합니다."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <Tabs value={customerModalTab} onValueChange={(v: any) => setCustomerModalTab(v)} className="flex flex-col flex-1 overflow-hidden">
+            <div className="shrink-0">
+              <TabsList className="bg-transparent w-full h-auto p-0 rounded-none gap-0">
+                <TabsTrigger value="basic" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  기본정보
+                </TabsTrigger>
+                <TabsTrigger value="contacts" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  담당자 관리
+                  {modalContacts.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalContacts.length}</span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="delivery" className="flex-1 rounded-none py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  납품처 관리
+                  {modalDeliveries.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalDeliveries.length}</span>
+                  )}
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            {/* 기본정보 탭 */}
+            <TabsContent value="basic" className="flex-1 overflow-y-auto mt-0">
+              <div className="px-6 py-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처 코드</Label>
+                    <Input
+                      value={customerForm.customer_code || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, customer_code: e.target.value }))}
+                      placeholder={customerEditMode ? "" : "자동 생성"}
+                      className={cn("h-9 font-mono", !customerEditMode && customerForm.customer_code && "bg-muted")}
+                      readOnly={!customerEditMode && !!customerForm.customer_code}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={customerForm.customer_name || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, customer_name: e.target.value }))}
+                      placeholder="거래처명"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래 유형</Label>
+                    <Select
+                      value={customerForm.division || "__none__"}
+                      onValueChange={(v) => setCustomerForm((p) => ({ ...p, division: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="거래 유형" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["division"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+                    <Select
+                      value={customerForm.status || "__none__"}
+                      onValueChange={(v) => setCustomerForm((p) => ({ ...p, status: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="상태" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처담당자</Label>
+                    <Input
+                      value={customerForm.contact_person || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, contact_person: e.target.value }))}
+                      placeholder="거래처담당자"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">전화번호</Label>
+                    <Input
+                      value={customerForm.contact_phone || ""}
+                      onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                      placeholder="010-0000-0000"
+                      className={cn("h-9", formErrors.contact_phone && "border-destructive")}
+                    />
+                    {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">이메일</Label>
+                    <Input
+                      value={customerForm.email || ""}
+                      onChange={(e) => handleFormChange("email", e.target.value)}
+                      placeholder="example@email.com"
+                      className={cn("h-9", formErrors.email && "border-destructive")}
+                    />
+                    {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">사업자번호</Label>
+                    <Input
+                      value={customerForm.business_number || ""}
+                      onChange={(e) => handleFormChange("business_number", e.target.value)}
+                      placeholder="000-00-00000"
+                      className={cn("h-9", formErrors.business_number && "border-destructive")}
+                    />
+                    {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+                  </div>
+                  <div className="space-y-1.5 col-span-2">
+                    <Label className="text-sm">주소</Label>
+                    <Input
+                      value={customerForm.address || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="주소"
+                      className="h-9"
+                    />
+                  </div>
+                </div>
+
+                {/* 세금유형 */}
+                <div className="mt-4 pt-4 border-t">
+                  <div className="flex items-center justify-between mb-2">
+                    <Label className="text-sm font-semibold flex items-center gap-1.5">
+                      <Coins className="w-3.5 h-3.5 text-primary" /> 세금유형
+                    </Label>
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => {
+                      setTaxTypeRows((prev) => [...prev, { _id: `tax_${Date.now()}_${Math.random()}`, tax_type_name: "", rate: "" }]);
+                    }}>
+                      <Plus className="h-3 w-3 mr-1" /> 추가
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    {taxTypeRows.map((row, idx) => (
+                      <div key={row._id} className="flex gap-2 items-center">
+                        <span className="text-xs text-muted-foreground w-4 shrink-0">{idx + 1}</span>
+                        <Select value={row.tax_type_name} onValueChange={(v) => {
+                          setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, tax_type_name: v } : r));
+                        }}>
+                          <SelectTrigger className="h-9 text-[13px] flex-1"><SelectValue placeholder="세금유형 선택" /></SelectTrigger>
+                          <SelectContent>
+                            {taxTypeOptions.map((o) => (
+                              <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <Input
+                          value={row.rate}
+                          onChange={(e) => {
+                            const v = e.target.value.replace(/[^\d.]/g, "");
+                            setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, rate: v } : r));
+                          }}
+                          placeholder="세율 %"
+                          className="h-9 text-[13px] w-[80px] text-right"
+                        />
+                        <span className="text-xs text-muted-foreground">%</span>
+                        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                          onClick={() => setTaxTypeRows((prev) => prev.filter((r) => r._id !== row._id))}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* 담당자 관리 탭 */}
+            <TabsContent value="contacts" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 담당자 목록 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    담당자 {modalContacts.length}명
+                  </span>
+                  <Button size="sm" onClick={() => {
+                    setModalContactForm({});
+                    setModalContactEditId(null);
+                    setModalContactFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 담당자 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalContactLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalContacts.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Users className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 담당자가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자명</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부서</TableHead>
+                          <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalContacts].sort((a, b) => {
+                          const aMain = a.is_main === "Y" || a.is_main === true ? 0 : 1;
+                          const bMain = b.is_main === "Y" || b.is_main === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((c) => (
+                          <TableRow key={c._localId || c.id} className="h-[41px]">
+                            <TableCell className="text-sm font-medium">{c.contact_name}</TableCell>
+                            <TableCell className="text-[13px]">{c.contact_phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.contact_email}</TableCell>
+                            <TableCell className="text-[13px]">{c.department}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (c.is_main === "Y" || c.is_main === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = c.is_main === "Y" || c.is_main === true;
+                                  if (isCurrentMain) {
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id) ? { ...item, is_main: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== (c._localId || c.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id)
+                                        ? { ...item, is_main: "Y" }
+                                        : { ...item, is_main: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(c.is_main === "Y" || c.is_main === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalContactForm({ ...c });
+                                    setModalContactEditId(c._localId || c.id);
+                                    setModalContactFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalContactDelete(c._localId || c.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 담당자 폼 (인라인) */}
+                {modalContactFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalContactEditId ? "담당자 수정" : "담당자 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalContactForm.contact_name || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_name: e.target.value }))}
+                          placeholder="담당자명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalContactForm.contact_phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalContactForm((p) => ({ ...p, contact_phone: formatted }));
+                          }}
+                          placeholder="010-0000-0000"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">이메일</Label>
+                        <Input
+                          value={modalContactForm.contact_email || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_email: e.target.value }))}
+                          placeholder="example@email.com"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">부서</Label>
+                        <Input
+                          value={modalContactForm.department || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, department: e.target.value }))}
+                          placeholder="부서명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalContactForm.memo || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalContactForm.is_main === "Y" || modalContactForm.is_main === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== modalContactEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalContacts((prev) => prev.map((item) => ({ ...item, is_main: "N" })));
+                                }
+                                setModalContactForm((p) => ({ ...p, is_main: "Y" }));
+                              } else {
+                                setModalContactForm((p) => ({ ...p, is_main: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 담당자</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalContactFormOpen(false); setModalContactForm({}); setModalContactEditId(null); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalContactSave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalContactEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            {/* ── 탭3: 납품처 관리 ── */}
+            <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 납품처 목록 헤더 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    납품처 {modalDeliveries.length}개
+                  </span>
+                  <Button size="sm" onClick={async () => {
+                    const code = await generateDeliveryCode();
+                    setModalDeliveryForm({ destination_code: code });
+                    setModalDeliveryEditId(null);
+                    setModalDeliveryFormErrors({});
+                    setModalDeliveryFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalDeliveryLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalDeliveries.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <MapPin className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 납품처가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalDeliveries].sort((a, b) => {
+                          const aMain = a.is_default === "Y" || a.is_default === true ? 0 : 1;
+                          const bMain = b.is_default === "Y" || b.is_default === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((d) => (
+                          <TableRow key={d._localId || d.id || d.destination_code} className="h-[41px]">
+                            <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                            <TableCell className="text-sm">{d.destination_name}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                            <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                            <TableCell className="text-[13px]">{d.phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (d.is_default === "Y" || d.is_default === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = d.is_default === "Y" || d.is_default === true;
+                                  if (isCurrentMain) {
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id) ? { ...item, is_default: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== (d._localId || d.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id)
+                                        ? { ...item, is_default: "Y" }
+                                        : { ...item, is_default: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(d.is_default === "Y" || d.is_default === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalDeliveryForm({ ...d });
+                                    setModalDeliveryEditId(d._localId || d.id);
+                                    setModalDeliveryFormErrors({});
+                                    setModalDeliveryFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalDeliveryDelete(d._localId || d.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 납품처 폼 (인라인) */}
+                {modalDeliveryFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalDeliveryEditId ? "납품처 수정" : "납품처 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처코드</Label>
+                        <Input
+                          value={modalDeliveryForm.destination_code || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
+                          placeholder="자동 생성"
+                          className={cn("h-8 text-sm font-mono", modalDeliveryForm.destination_code && "bg-muted")}
+                          readOnly={!!modalDeliveryForm.destination_code && !modalDeliveryEditId}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalDeliveryForm.destination_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
+                          placeholder="납품처명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자</Label>
+                        <Input
+                          value={modalDeliveryForm.manager_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
+                          placeholder="담당자"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 col-span-2">
+                        <Label className="text-xs">주소</Label>
+                        <Input
+                          value={modalDeliveryForm.address || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, address: e.target.value }))}
+                          placeholder="주소"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalDeliveryForm.phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalDeliveryForm((p) => ({ ...p, phone: formatted }));
+                            const err = validateField("phone", formatted);
+                            setModalDeliveryFormErrors((p) => {
+                              const n = { ...p };
+                              if (err) n.phone = err; else delete n.phone;
+                              return n;
+                            });
+                          }}
+                          placeholder="010-0000-0000"
+                          className={cn("h-8 text-sm", modalDeliveryFormErrors.phone && "border-destructive")}
+                        />
+                        {modalDeliveryFormErrors.phone && <p className="text-xs text-destructive">{modalDeliveryFormErrors.phone}</p>}
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalDeliveryForm.memo || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== modalDeliveryEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalDeliveries((prev) => prev.map((item) => ({ ...item, is_default: "N" })));
+                                }
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "Y" }));
+                              } else {
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 납품처로 설정</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalDeliveryFormOpen(false); setModalDeliveryForm({}); setModalDeliveryEditId(null); setModalDeliveryFormErrors({}); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalDeliverySave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalDeliveryEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+          <div className="border-t px-6 py-3 flex items-center gap-2 shrink-0">
+            {!customerEditMode && (
+              <label className="flex items-center gap-2 cursor-pointer mr-auto">
+                <input type="checkbox" checked={continuousInput} onChange={(e) => setContinuousInput(e.target.checked)} className="rounded" />
+                <span className="text-sm font-medium">연속입력</span>
+              </label>
+            )}
+            <Button variant="outline" onClick={() => setCustomerModalOpen(false)}>닫기</Button>
+            <Button onClick={handleCustomerSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {customerEditMode ? "저장" : "등록"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 선택 (1단계) ── */}
+      <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>품목 선택</DialogTitle>
+            <DialogDescription>거래처에 추가할 품목을 선택하세요. (전체: {itemTotalCount}건 / 대상: {itemSearchResults.length}건{itemCheckedIds.size > 0 ? ` / 선택: ${itemCheckedIds.size}건` : ""})</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              placeholder="품명/품목코드 검색"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+              className="h-9 flex-1"
+            />
+            <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+              {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+            </Button>
+          </div>
+          <div className="overflow-auto max-h-[350px] border rounded-lg">
+            <Table noWrapper>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted h-10">
+                  <TableHead className="w-[40px] text-center px-2">
+                    <input
+                      type="checkbox"
+                      className="rounded"
+                      checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                      onChange={(e) => {
+                        if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                        else setItemCheckedIds(new Set());
+                      }}
+                    />
+                  </TableHead>
+                  <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="min-w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                  <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {itemSearchResults.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                      검색 결과가 없어요
+                    </TableCell>
+                  </TableRow>
+                ) : itemSearchResults.map((item) => (
+                  <TableRow
+                    key={item.id}
+                    className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                    onClick={() => setItemCheckedIds((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                      return next;
+                    })}
+                  >
+                    <TableCell className="text-center px-2">
+                      <input type="checkbox" className="rounded" checked={itemCheckedIds.has(item.id)} readOnly />
+                    </TableCell>
+                    <TableCell className="text-[13px] font-mono">
+                      <span className="block truncate" title={item.item_number}>{item.item_number}</span>
+                    </TableCell>
+                    <TableCell className="text-sm">{item.item_name}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.size}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.material}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.unit}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <DialogFooter className="flex items-center justify-between w-full">
+            <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+              <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 상세 입력 (2단계) ── */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedCustomer?.customer_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData
+                ? "거래처 품번/품명과 기간별 단가를 수정합니다."
+                : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2 flex-1 overflow-y-auto">
+            {selectedItemsForDetail.map((item, idx) => {
+              const itemKey = item.item_number || item.id;
+              const mappingRows = itemMappings[itemKey] || [];
+              const prices = itemPrices[itemKey] || [];
+
+              return (
+                <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
+                  {/* 품목 헤더 */}
+                  <div className="px-5 py-3 bg-muted/30 border-b">
+                    <div className="font-bold">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
+                  </div>
+
+                  <div className="flex gap-4 p-5 items-stretch">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Tag className="w-3.5 h-3.5 text-primary" /> 거래처 품번/품명 관리
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 품번 추가
+                        </Button>
+                      </div>
+                      <div className="border-2 border-foreground/20 rounded-lg bg-background p-3 space-y-2 min-h-[200px] max-h-[350px] overflow-y-auto flex-1">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : (
+                          <DndContext
+                            sensors={dndSensors}
+                            collisionDetection={closestCenter}
+                            onDragEnd={(e) => handleMappingDragEnd(itemKey, e)}
+                          >
+                            <SortableContext items={mappingRows.map((r) => r._id)} strategy={verticalListSortingStrategy}>
+                              {mappingRows.map((mRow, mIdx) => (
+                                <SortableMappingRow key={mRow._id} id={mRow._id}>
+                                  <span className="text-xs text-muted-foreground/50 font-mono w-4 shrink-0 text-center">{mIdx + 1}</span>
+                                  <Input
+                                    value={mRow.customer_item_code}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_code", e.target.value)}
+                                    placeholder="거래처 품번"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Input
+                                    value={mRow.customer_item_name}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_name", e.target.value)}
+                                    placeholder="거래처 품명"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Button
+                                    variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                                    onClick={() => removeMappingRow(itemKey, mRow._id)}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                </SortableMappingRow>
+                              ))}
+                            </SortableContext>
+                          </DndContext>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Coins className="w-3.5 h-3.5 text-primary" /> 기간별 단가 설정
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3 flex-1 overflow-y-auto max-h-[350px]">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border-2 border-foreground/20 rounded-lg bg-background overflow-hidden">
+                            <div
+                              className="flex items-center justify-between px-4 py-2.5 cursor-pointer hover:bg-muted/50 transition-colors"
+                              onClick={() => setCollapsedPriceCards((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(price._id)) next.delete(price._id); else next.add(price._id);
+                                return next;
+                              })}
+                            >
+                              <div className="flex items-center gap-2">
+                                {collapsedPriceCards.has(price._id)
+                                  ? <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                                  : <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                                }
+                                <span className="text-[13px] font-semibold text-muted-foreground">단가 {pIdx + 1}</span>
+                                {collapsedPriceCards.has(price._id) && price.calculated_price && (
+                                  <span className="text-xs text-muted-foreground ml-2">
+                                    {price.start_date || "—"} ~ {price.end_date || "—"} · <span className="font-mono font-bold text-foreground">{Number(price.calculated_price).toLocaleString()}</span> {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                  </span>
+                                )}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                {prices.length > 1 && (
+                                  <Button
+                                    variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
+                                    onClick={(e) => { e.stopPropagation(); removePriceRow(itemKey, price._id); }}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                )}
+                              </div>
+                            </div>
+                            {!collapsedPriceCards.has(price._id) && <div className="px-4 pb-4 space-y-2.5">
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">시작일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.start_date}
+                                  onChange={(e) => {
+                                    const v = e.target.value;
+                                    updatePriceRow(itemKey, price._id, "start_date", v);
+                                    if (price.end_date && v > price.end_date) {
+                                      updatePriceRow(itemKey, price._id, "end_date", v);
+                                    }
+                                  }}
+                                  max={price.end_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <span className="text-xs text-muted-foreground mt-4">~</span>
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">종료일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.end_date}
+                                  onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                  min={price.start_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <div className="w-[80px]">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">&nbsp;</Label>
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="통화" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "base_price", raw);
+                                }}
+                                className="h-9 text-[13px] text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-9 text-[13px] text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-1.5 pt-2 border-t">
+                              <span className="text-[13px] text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-base font-mono">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                              {price.calculated_price && price.currency_code && (
+                                <span className="text-[13px] text-muted-foreground">
+                                  {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                </span>
+                              )}
+                            </div>
+                            </div>}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal
+          open={excelUploadOpen}
+          onOpenChange={(open) => {
+            setExcelUploadOpen(open);
+            if (!open) setExcelChainConfig(null);
+          }}
+          config={excelChainConfig}
+          onSuccess={() => {
+            fetchCustomers();
+            const cid = selectedCustomerId;
+            setSelectedCustomerId(null);
+            setTimeout(() => setSelectedCustomerId(cid), 50);
+          }}
+        />
+      )}
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/sales/order/page.tsx b/frontend/app/(main)/COMPANY_30/sales/order/page.tsx
new file mode 100644
index 00000000..6f4502bd
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/sales/order/page.tsx
@@ -0,0 +1,1143 @@
+"use client";
+
+/**
+ * 제일그라스(COMPANY_9) 수주관리 — 하드코딩 페이지
+ *
+ * 좌측: 수주 마스터 목록 (order_no 그룹핑 집계)
+ * 우측: 선택한 수주의 품목 상세 (sales_order_detail)
+ *
+ * 특화: 가로/세로/두께/면적 컬럼 (유리 업종)
+ * 특화: 품목 자동 등록 (item_info에 없으면 저장 시 자동 INSERT)
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  ClipboardList, Package, Search, X, Settings2, GripVertical,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { FullscreenDialog } from "@/components/common/FullscreenDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
+import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+
+const MASTER_TABLE = "sales_order_mng";
+const DETAIL_TABLE = "sales_order_detail";
+const ITEM_TABLE = "item_info";
+
+const formatNumber = (val: string) => {
+  const num = val.replace(/[^\d.-]/g, "");
+  if (!num) return "";
+  const parts = num.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+const parseNumber = (val: string) => val.replace(/,/g, "");
+
+// 좌측: 수주 마스터 집계 목록
+const LEFT_COLUMNS: DataGridColumn[] = [
+  { key: "order_no", label: "수주번호", width: "w-[120px]" },
+  { key: "partner_name", label: "거래처", minWidth: "min-w-[100px]" },
+  { key: "item_count", label: "품목수", width: "w-[60px]", align: "right" },
+  { key: "total_qty", label: "총수량", width: "w-[80px]", formatNumber: true, align: "right" },
+  { key: "total_ship_qty", label: "출하량", width: "w-[70px]", formatNumber: true, align: "right" },
+  { key: "total_balance", label: "잔량", width: "w-[70px]", formatNumber: true, align: "right" },
+  { key: "total_amount", label: "총금액", width: "w-[100px]", formatNumber: true, align: "right" },
+  { key: "due_date", label: "납기일", width: "w-[100px]" },
+  { key: "status", label: "상태", width: "w-[70px]" },
+];
+
+// 우측: 품목 상세 (가로/세로/두께/면적 포함)
+const RIGHT_COLUMNS: DataGridColumn[] = [
+  { key: "division", label: "구분", width: "w-[70px]" },
+  { key: "part_name", label: "품명", minWidth: "min-w-[120px]" },
+  { key: "spec", label: "규격", width: "w-[100px]" },
+  { key: "width", label: "가로", width: "w-[65px]", formatNumber: true, align: "right" },
+  { key: "height", label: "세로", width: "w-[65px]", formatNumber: true, align: "right" },
+  { key: "thickness", label: "두께", width: "w-[60px]", align: "right" },
+  { key: "area", label: "면적", width: "w-[70px]", align: "right" },
+  { key: "unit", label: "단위", width: "w-[50px]" },
+  { key: "qty", label: "수량", width: "w-[70px]", formatNumber: true, align: "right" },
+  { key: "ship_qty", label: "출하", width: "w-[60px]", formatNumber: true, align: "right" },
+  { key: "balance_qty", label: "잔량", width: "w-[60px]", formatNumber: true, align: "right" },
+  { key: "unit_price", label: "단가", width: "w-[85px]", formatNumber: true, align: "right" },
+  { key: "amount", label: "금액", width: "w-[95px]", formatNumber: true, align: "right" },
+  { key: "due_date", label: "납기일", width: "w-[100px]" },
+  { key: "memo", label: "비고", width: "w-[80px]" },
+];
+
+export default function JeilGlassOrderPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 좌측: 수주 목록
+  const [masterOrders, setMasterOrders] = useState<any[]>([]);
+  const [allDetails, setAllDetails] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [selectedOrderNo, setSelectedOrderNo] = useState<string | null>(null);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+
+  // 우측: 디테일
+  const [detailItems, setDetailItems] = useState<any[]>([]);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  // 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [masterForm, setMasterForm] = useState<Record<string, any>>({});
+  const [modalDetailRows, setModalDetailRows] = useState<any[]>([]);
+
+  // 품목 선택 모달
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
+
+  // 기타
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
+  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 채번
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+
+  // 테이블 설정
+  const applyTableSettings = (settings: TableSettings) => {
+    if (settings.filters) setFilterConfig(settings.filters);
+  };
+  useEffect(() => {
+    const saved = loadTableSettings(MASTER_TABLE, "jeilglass-order");
+    if (saved?.filters) setFilterConfig(saved.filters);
+  }, []);
+
+  // 채번규칙 로드
+  useEffect(() => {
+    const loadRule = async () => {
+      try {
+        const res = await apiClient.get(`/numbering-rules/by-column/${MASTER_TABLE}/order_no`);
+        const rule = res.data?.data;
+        if (rule?.ruleId || rule?.rule_id) {
+          setNumberingRuleId(rule.ruleId || rule.rule_id);
+        }
+      } catch { /* 채번규칙 없음 — fallback 사용 */ }
+    };
+    loadRule();
+  }, []);
+
+  // 카테고리 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode || v.code, label: v.valueLabel || v.label || v.valueCode });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      // 마스터 카테고리
+      for (const col of ["sell_mode", "input_mode", "price_mode"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${MASTER_TABLE}/${col}/values`);
+          optMap[col] = flatten(res.data?.data || []);
+        } catch { /* skip */ }
+      }
+      // 거래처
+      try {
+        const res = await apiClient.post(`/table-management/tables/customer_mng/data`, { page: 1, size: 500, autoFilter: true });
+        const custs = res.data?.data?.data || res.data?.data?.rows || [];
+        optMap["partner_id"] = custs.map((c: any) => ({
+          code: c.customer_code,
+          label: `${c.customer_name} (${c.customer_code})`,
+        }));
+      } catch { /* skip */ }
+      // 담당자
+      try {
+        const res = await apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 200, autoFilter: true });
+        const users = res.data?.data?.data || res.data?.data?.rows || [];
+        optMap["manager_id"] = users.map((u: any) => ({
+          code: u.user_id || u.id,
+          label: `${u.user_name || ""}${u.position_name ? ` (${u.position_name})` : ""}`,
+        }));
+      } catch { /* skip */ }
+      // 품목 카테고리 (단위, 구분, 재질, 유형)
+      for (const col of ["unit", "division", "material", "type"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
+          if (res.data?.success && res.data.data?.length > 0) {
+            optMap[`item_${col}`] = flatten(res.data.data);
+          }
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+    };
+    loadCategories();
+  }, []);
+
+  // 수주 목록 조회 (디테일 전체 → order_no 그룹핑)
+  const fetchMasterOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters: any[] = searchFilters.map((f) => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+      const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "order_no", order: "desc" },
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setAllDetails(rows);
+
+      // 마스터 조회 (거래처 정보 확보)
+      const orderNos = [...new Set(rows.map((r: any) => r.order_no).filter(Boolean))];
+      let masterMap: Record<string, any> = {};
+      if (orderNos.length > 0) {
+        try {
+          const mRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: orderNos.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "in", value: orderNos }] },
+            autoFilter: true,
+          });
+          const masters = mRes.data?.data?.data || mRes.data?.data?.rows || [];
+          for (const m of masters) masterMap[m.order_no] = m;
+        } catch { /* skip */ }
+      }
+
+      // 거래처 코드 → 이름 변환
+      const resolvePartner = (code: string) => {
+        if (!code) return "";
+        return categoryOptions["partner_id"]?.find((o) => o.code === code)?.label?.split(" (")[0] || code;
+      };
+
+      // order_no 기준 집계
+      const grouped: Record<string, any> = {};
+      for (const row of rows) {
+        const no = row.order_no;
+        if (!no) continue;
+        if (!grouped[no]) {
+          const master = masterMap[no] || {};
+          grouped[no] = {
+            id: `master_${no}`,
+            order_no: no,
+            partner_name: resolvePartner(master.partner_id),
+            item_count: 0,
+            total_qty: 0,
+            total_ship_qty: 0,
+            total_balance: 0,
+            total_amount: 0,
+            due_date: row.due_date || "",
+            status: master.status || "",
+          };
+        }
+        const g = grouped[no];
+        g.item_count += 1;
+        g.total_qty += parseFloat(row.qty) || 0;
+        g.total_ship_qty += parseFloat(row.ship_qty) || 0;
+        g.total_balance += parseFloat(row.balance_qty) || 0;
+        g.total_amount += parseFloat(row.amount) || 0;
+        if (row.due_date && (!g.due_date || row.due_date > g.due_date)) g.due_date = row.due_date;
+      }
+      const list = Object.values(grouped);
+      setMasterOrders(list);
+      setTotalCount(list.length);
+    } catch (err) {
+      console.error("수주 조회 실패:", err);
+      toast.error("수주 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters, categoryOptions]);
+
+  useEffect(() => { fetchMasterOrders(); }, [fetchMasterOrders]);
+
+  // 통계
+  const stats = useMemo(() => {
+    let totalAmount = 0, totalQty = 0;
+    for (const m of masterOrders) {
+      totalAmount += m.total_amount || 0;
+      totalQty += m.total_qty || 0;
+    }
+    return { totalAmount, totalQty };
+  }, [masterOrders]);
+
+  // 우측: 선택된 수주 디테일 조회 (division 코드→라벨 변환)
+  useEffect(() => {
+    if (!selectedOrderNo) { setDetailItems([]); return; }
+    const items = allDetails
+      .filter((d) => d.order_no === selectedOrderNo)
+      .map((d) => ({
+        ...d,
+        division: categoryOptions["item_division"]?.find((o) => o.code === d.division)?.label || d.division || "",
+      }));
+    setDetailItems(items);
+  }, [selectedOrderNo, allDetails, categoryOptions]);
+
+  // 좌측 행 클릭
+  const handleMasterRowClick = (row: any) => {
+    setSelectedOrderNo(row.order_no);
+  };
+
+  // 등록 모달
+  const openRegisterModal = async () => {
+    let previewOrderNo = "";
+    if (numberingRuleId) {
+      const res = await previewNumberingCode(numberingRuleId);
+      if (res.success && res.data?.generatedCode) {
+        previewOrderNo = res.data.generatedCode;
+      }
+    }
+    if (!previewOrderNo) {
+      previewOrderNo = `ORD-${new Date().toISOString().slice(0, 10).replace(/-/g, "")}-${String(Date.now()).slice(-4)}`;
+    }
+    setMasterForm({ order_no: previewOrderNo, manager_id: user?.userId || "" });
+    setModalDetailRows([]);
+    setIsEditMode(false);
+    setIsModalOpen(true);
+  };
+
+  // 수정 모달
+  const openEditModal = async (orderNo: string) => {
+    try {
+      const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
+        autoFilter: true,
+      });
+      const masterData = (masterRes.data?.data?.data || masterRes.data?.data?.rows || [])[0];
+
+      const detailRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
+        autoFilter: true,
+      });
+      const detailData = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+
+      setMasterForm(masterData || {});
+      setModalDetailRows(detailData.map((d: any, i: number) => ({
+        ...d,
+        _id: d.id || `row_${i}`,
+        _fromItemInfo: !!d.part_code,
+        _divisionLabel: categoryOptions["item_division"]?.find((o: any) => o.code === d.division)?.label || d.division || "",
+      })));
+      setIsEditMode(true);
+      setIsModalOpen(true);
+    } catch (err) {
+      console.error("수주 상세 조회 실패:", err);
+      toast.error("수주 정보를 불러오는데 실패했습니다.");
+    }
+  };
+
+  // 삭제
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.error("삭제할 수주를 선택해주세요."); return; }
+    const selectedItems = masterOrders.filter((o) => checkedIds.includes(o.id));
+    const orderNos = selectedItems.map((o) => o.order_no);
+    const ok = await confirm(`${orderNos.length}건의 수주를 삭제하시겠습니까?`, {
+      description: "삭제된 데이터는 복구할 수 없습니다.",
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      for (const orderNo of orderNos) {
+        // 디테일 삭제
+        const detailRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 100,
+          dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
+          autoFilter: true,
+        });
+        const details = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+        if (details.length > 0) {
+          await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+            data: details.map((d: any) => ({ id: d.id })),
+          });
+        }
+        // 마스터 삭제
+        const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
+          autoFilter: true,
+        });
+        const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+        if (masters.length > 0) {
+          await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
+            data: masters.map((m: any) => ({ id: m.id })),
+          });
+        }
+      }
+      toast.success("삭제되었습니다.");
+      setCheckedIds([]);
+      setSelectedOrderNo(null);
+      fetchMasterOrders();
+    } catch (err) {
+      console.error("삭제 실패:", err);
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // 품목 자동 등록 (item_info에 없으면 등록)
+  const autoRegisterItems = async (rows: any[]) => {
+    for (const row of rows) {
+      if (row.part_code || !row.part_name) continue;
+      try {
+        // item_info에서 품명으로 검색
+        const searchRes = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_name", operator: "equals", value: row.part_name }] },
+          autoFilter: true,
+        });
+        const found = (searchRes.data?.data?.data || searchRes.data?.data?.rows || [])[0];
+        if (found) {
+          row.part_code = found.item_number;
+          continue;
+        }
+        // 없으면 자동 등록
+        await apiClient.post(`/table-management/tables/${ITEM_TABLE}/add`, {
+          item_name: row.part_name,
+          size: row.spec || "",
+          unit: row.unit || "",
+        });
+        // 등록 후 재조회하여 item_number 획득
+        const reSearch = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_name", operator: "equals", value: row.part_name }] },
+          autoFilter: true,
+          sort: { columnName: "created_date", order: "desc" },
+        });
+        const newItem = (reSearch.data?.data?.data || reSearch.data?.data?.rows || [])[0];
+        if (newItem) row.part_code = newItem.item_number;
+      } catch (err) {
+        console.warn("품목 자동 등록 실패:", row.part_name, err);
+      }
+    }
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (modalDetailRows.length === 0) {
+      toast.error("품목을 1개 이상 추가해주세요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      // 품목 자동 등록
+      await autoRegisterItems(modalDetailRows);
+
+      // 신규 등록 시 채번 할당
+      if (!isEditMode) {
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId, masterForm.order_no);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            masterForm.order_no = allocRes.data.generatedCode;
+          }
+        }
+        if (!masterForm.order_no) {
+          masterForm.order_no = `ORD-${new Date().toISOString().slice(0, 10).replace(/-/g, "")}-${String(Date.now()).slice(-4)}`;
+        }
+      }
+
+      const { id, created_date, updated_date, writer, company_code, created_by, updated_by, ...masterFields } = masterForm;
+
+      if (isEditMode && id) {
+        await apiClient.put(`/table-management/tables/${MASTER_TABLE}/edit`, {
+          originalData: { id },
+          updatedData: masterFields,
+        });
+        const existingDetails = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 100,
+          dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: masterForm.order_no }] },
+          autoFilter: true,
+        });
+        const existings = existingDetails.data?.data?.data || existingDetails.data?.data?.rows || [];
+        if (existings.length > 0) {
+          await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+            data: existings.map((d: any) => ({ id: d.id })),
+          });
+        }
+      } else {
+        await apiClient.post(`/table-management/tables/${MASTER_TABLE}/add`, masterFields);
+      }
+
+      for (let i = 0; i < modalDetailRows.length; i++) {
+        const row = modalDetailRows[i];
+        const { _id, _fromItemInfo, _divisionLabel, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
+        await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
+          ...detailFields,
+          order_no: masterForm.order_no,
+          seq_no: String(i + 1),
+        });
+      }
+
+      toast.success(isEditMode ? "수정되었습니다." : "등록되었습니다.");
+      setIsModalOpen(false);
+      fetchMasterOrders();
+    } catch (err: any) {
+      console.error("저장 실패:", err);
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 검색
+  const searchItems = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      }
+      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      setItemSearchResults(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setItemSearchResults([]); }
+    finally { setItemSearchLoading(false); }
+  };
+
+  // 품목 선택 → 리피터에 추가
+  const addSelectedItemsToDetail = () => {
+    const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
+    const resolveUnit = (code: string) => {
+      if (!code) return "";
+      return categoryOptions["item_unit"]?.find((o) => o.code === code)?.label || code;
+    };
+    const resolveDivision = (code: string) => {
+      if (!code) return "";
+      return categoryOptions["item_division"]?.find((o) => o.code === code)?.label || code;
+    };
+    const newRows = selected.map((item) => ({
+      _id: `new_${Date.now()}_${Math.random()}`,
+      _fromItemInfo: true,
+      part_code: item.item_number || "",
+      part_name: item.item_name || "",
+      spec: item.size || "",
+      division: item.division || "",
+      _divisionLabel: resolveDivision(item.division),
+      unit: resolveUnit(item.unit) || "",
+      width: "", height: "", thickness: "", area: "",
+      qty: "", unit_price: item.selling_price || item.standard_price || "", amount: "",
+      due_date: "", memo: "",
+    }));
+    setModalDetailRows((prev) => [...prev, ...newRows]);
+    setItemSelectOpen(false);
+    setItemCheckedIds(new Set());
+  };
+
+  // 빈 행 추가 (품명 직접 입력용)
+  const addEmptyRow = () => {
+    setModalDetailRows((prev) => [...prev, {
+      _id: `new_${Date.now()}_${Math.random()}`,
+      _fromItemInfo: false,
+      part_code: "", part_name: "", spec: "", division: "", _divisionLabel: "", unit: "㎡",
+      width: "", height: "", thickness: "", area: "",
+      qty: "", unit_price: "", amount: "",
+      due_date: "", memo: "",
+    }]);
+  };
+
+  // 구분(division) 라벨로 면적 계산 제수 결정
+  const getAreaDivisor = (divisionCode: string) => {
+    const label = categoryOptions["item_division"]?.find((o) => o.code === divisionCode)?.label || "";
+    // 원판, 원자재 → 92,094 / 그 외(제품 등) → 91,808
+    if (label.includes("원판") || label.includes("원자재")) return 92094;
+    return 91808;
+  };
+
+  // 면적 계산 (구분에 따른 제수 적용)
+  const calcArea = (row: any) => {
+    const w = parseFloat(row.width) || 0;
+    const h = parseFloat(row.height) || 0;
+    if (w <= 0 || h <= 0) return "";
+    const divisor = getAreaDivisor(row.division);
+    return (w * h / divisor).toFixed(4);
+  };
+
+  // 리피터 행 값 변경 + 면적/금액 자동 계산
+  const updateDetailRow = (idx: number, field: string, value: string) => {
+    setModalDetailRows((prev) => {
+      const next = [...prev];
+      next[idx] = { ...next[idx], [field]: value };
+      // 면적 자동 계산 (구분/가로/세로 변경 시)
+      if (field === "width" || field === "height" || field === "division") {
+        next[idx].area = calcArea(next[idx]);
+      }
+      // 금액 자동 계산
+      if (field === "qty" || field === "unit_price") {
+        const qty = parseFloat(field === "qty" ? value : next[idx].qty) || 0;
+        const price = parseFloat(field === "unit_price" ? value : next[idx].unit_price) || 0;
+        next[idx].amount = (qty * price).toString();
+      }
+      return next;
+    });
+  };
+
+  const removeDetailRow = (idx: number) => {
+    setModalDetailRows((prev) => prev.filter((_, i) => i !== idx));
+  };
+
+  // 엑셀 다운로드 (마스터+디테일 통합)
+  const handleExcelDownload = async () => {
+    if (allDetails.length === 0) { toast.error("다운로드할 데이터가 없습니다."); return; }
+    // 마스터 정보 매핑
+    const masterMap: Record<string, any> = {};
+    for (const m of masterOrders) masterMap[m.order_no] = m;
+
+    const resolveDiv = (code: string) =>
+      categoryOptions["item_division"]?.find((o) => o.code === code)?.label || code || "";
+
+    const data = allDetails.map((o) => {
+      const master = masterMap[o.order_no] || {};
+      return {
+        "수주번호": o.order_no || "",
+        "거래처": master.partner_name || "",
+        "상태": master.status || "",
+        "구분": resolveDiv(o.division),
+        "품명": o.part_name || "",
+        "규격": o.spec || "",
+        "가로": o.width || "",
+        "세로": o.height || "",
+        "두께": o.thickness || "",
+        "면적": o.area || "",
+        "단위": o.unit || "",
+        "수량": o.qty || "",
+        "출하": o.ship_qty || "",
+        "잔량": o.balance_qty || "",
+        "단가": o.unit_price || "",
+        "금액": o.amount || "",
+        "납기일": o.due_date || "",
+        "비고": o.memo || "",
+      };
+    });
+    await exportToExcel(data, "제일그라스_수주관리.xlsx", "수주목록");
+    toast.success("다운로드 완료");
+  };
+
+  // 엑셀 업로드 후처리: order_no가 비어있는 디테일에 마스터 자동 생성
+  const handleExcelUploadSuccess = async () => {
+    try {
+      // 마스터 없는 디테일(order_no 비어있는) 조회
+      const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+        sort: { columnName: "created_date", order: "desc" },
+      });
+      const allRows = res.data?.data?.data || res.data?.data?.rows || [];
+
+      // order_no가 비어있는 행들 수집
+      const noOrderRows = allRows.filter((r: any) => !r.order_no);
+      if (noOrderRows.length > 0) {
+        // 채번 후 마스터 생성 + 디테일에 order_no 설정
+        let orderNo = "";
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) orderNo = allocRes.data.generatedCode;
+        }
+        if (!orderNo) {
+          orderNo = `ORD-${new Date().toISOString().slice(0, 10).replace(/-/g, "")}-${String(Date.now()).slice(-4)}`;
+        }
+
+        // 마스터 생성
+        await apiClient.post(`/table-management/tables/${MASTER_TABLE}/add`, {
+          order_no: orderNo,
+          status: "수주",
+          manager_id: user?.userId || "",
+          order_date: new Date().toISOString().slice(0, 10),
+        });
+
+        // 디테일에 order_no + 면적/금액 계산하여 업데이트
+        for (let i = 0; i < noOrderRows.length; i++) {
+          const row = noOrderRows[i];
+          const w = parseFloat(row.width) || 0;
+          const h = parseFloat(row.height) || 0;
+          const qty = parseFloat(row.qty) || 0;
+          const price = parseFloat(row.unit_price) || 0;
+          const area = w > 0 && h > 0 ? (w * h / 91808).toFixed(4) : "";
+          const amount = (qty * price).toString();
+
+          await apiClient.put(`/table-management/tables/${DETAIL_TABLE}/edit`, {
+            originalData: { id: row.id },
+            updatedData: {
+              order_no: orderNo,
+              seq_no: String(i + 1),
+              area: area || row.area || "",
+              amount: amount || row.amount || "",
+            },
+          });
+        }
+        toast.success(`${noOrderRows.length}건의 품목에 수주번호 ${orderNo} 할당 완료`);
+      }
+    } catch (err) {
+      console.error("엑셀 업로드 후처리 실패:", err);
+    }
+    fetchMasterOrders();
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 검색 필터 */}
+      <DynamicSearchFilter
+        tableName={MASTER_TABLE}
+        filterId="jeilglass-sales-order"
+        onFilterChange={setSearchFilters}
+        dataCount={totalCount}
+        externalFilterConfig={filterConfig}
+      />
+
+      {/* 통계 바 */}
+      <div className="flex items-center gap-4 px-1">
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-muted-foreground">총 금액</span>
+          <span className="font-semibold text-blue-600">{stats.totalAmount.toLocaleString()}원</span>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-muted-foreground">총 수량</span>
+          <span className="font-semibold">{stats.totalQty.toLocaleString()}개</span>
+        </div>
+      </div>
+
+      {/* 좌우 분할 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 수주 목록 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
+                <div className="font-semibold flex items-center gap-2 text-sm">
+                  <ClipboardList className="w-4 h-4" /> 수주 목록
+                  <Badge variant="secondary" className="font-normal">{totalCount}건</Badge>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" onClick={openRegisterModal}>
+                    <Plus className="w-4 h-4 mr-1" /> 수주 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={checkedIds.length !== 1} onClick={() => {
+                    const item = masterOrders.find((o) => o.id === checkedIds[0]);
+                    if (item) openEditModal(item.order_no);
+                  }}>
+                    <Pencil className="w-4 h-4 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDelete}>
+                    <Trash2 className="w-4 h-4 mr-1" /> 삭제
+                  </Button>
+                </div>
+              </div>
+              <DataGrid
+                gridId="jeilglass-order-master"
+                columns={LEFT_COLUMNS}
+                data={masterOrders}
+                loading={loading}
+                showCheckbox
+                checkedIds={checkedIds}
+                onCheckedChange={setCheckedIds}
+                onRowClick={handleMasterRowClick}
+                onRowDoubleClick={(row) => openEditModal(row.order_no)}
+                tableName={MASTER_TABLE}
+                emptyMessage="등록된 수주가 없습니다"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 품목 상세 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
+                <div className="font-semibold flex items-center gap-2 text-sm">
+                  <Package className="w-4 h-4" /> 품목 상세
+                  {selectedOrderNo && (
+                    <Badge variant="outline" className="font-normal">{selectedOrderNo}</Badge>
+                  )}
+                  {detailItems.length > 0 && (
+                    <span className="text-muted-foreground font-normal">({detailItems.length}건)</span>
+                  )}
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+                    <FileSpreadsheet className="w-4 h-4 mr-1" /> 엑셀 업로드
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+                    <Download className="w-4 h-4 mr-1" /> 엑셀 다운로드
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setTableSettingsOpen(true)}>
+                    <Settings2 className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+              {!selectedOrderNo ? (
+                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
+                  좌측에서 수주를 선택하세요
+                </div>
+              ) : (
+                <DataGrid
+                  gridId="jeilglass-order-detail"
+                  columns={RIGHT_COLUMNS}
+                  data={detailItems}
+                  loading={detailLoading}
+                  showRowNumber
+                  tableName={DETAIL_TABLE}
+                  emptyMessage="품목이 없습니다"
+                />
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 등록/수정 모달 */}
+      <FullscreenDialog
+        open={isModalOpen}
+        onOpenChange={setIsModalOpen}
+        title={isEditMode ? "수주 수정" : "수주 등록"}
+        description={isEditMode ? "수주 정보를 수정합니다." : "새로운 수주를 등록합니다."}
+        defaultMaxWidth="max-w-7xl"
+        defaultWidth="w-[98vw]"
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+            </Button>
+          </>
+        }
+      >
+        <div className="space-y-4 py-2">
+          {/* 기본 정보 */}
+          <div className="grid grid-cols-4 gap-4">
+            <div className="space-y-1.5">
+              <Label className="text-sm">수주번호 <span className="text-destructive">*</span></Label>
+              <Input
+                value={masterForm.order_no || ""}
+                readOnly
+                placeholder="저장 시 자동 채번"
+                className="h-9 bg-muted text-muted-foreground"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">거래처</Label>
+              <Select value={masterForm.partner_id || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, partner_id: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="거래처 선택" /></SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["partner_id"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">상태</Label>
+              <Select value={masterForm.status || "수주"} onValueChange={(v) => setMasterForm((p) => ({ ...p, status: v }))}>
+                <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="수주">수주</SelectItem>
+                  <SelectItem value="진행중">진행중</SelectItem>
+                  <SelectItem value="완료">완료</SelectItem>
+                  <SelectItem value="취소">취소</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">수주일</Label>
+              <FormDatePicker value={masterForm.order_date || ""} onChange={(v) => setMasterForm((p) => ({ ...p, order_date: v }))} placeholder="수주일" />
+            </div>
+          </div>
+          <div className="grid grid-cols-4 gap-4">
+            <div className="space-y-1.5">
+              <Label className="text-sm">납기일</Label>
+              <FormDatePicker value={masterForm.due_date || ""} onChange={(v) => setMasterForm((p) => ({ ...p, due_date: v }))} placeholder="납기일" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">담당자</Label>
+              <Select value={masterForm.manager_id || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager_id: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="담당자 선택" /></SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["manager_id"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-sm">메모</Label>
+              <Input value={masterForm.memo || ""} onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
+                placeholder="메모" className="h-9" />
+            </div>
+          </div>
+
+          {/* 품목 리피터 */}
+          <div className="border rounded-lg">
+            <div className="flex items-center justify-between p-3 border-b bg-muted/10">
+              <span className="text-sm font-semibold">수주 품목 ({modalDetailRows.length}건)</span>
+              <div className="flex gap-1.5">
+                <Button size="sm" variant="outline" onClick={addEmptyRow}>
+                  <Plus className="w-4 h-4 mr-1" /> 행 추가
+                </Button>
+                <Button size="sm" variant="outline" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
+                  <Search className="w-4 h-4 mr-1" /> 품목 검색
+                </Button>
+              </div>
+            </div>
+            <div className="overflow-x-auto overflow-y-visible">
+              <Table>
+                <TableHeader className="sticky top-0 bg-background z-10">
+                  <TableRow>
+                    <TableHead className="w-[30px]"></TableHead>
+                    <TableHead className="w-[36px]"></TableHead>
+                    <TableHead className="w-[40px]">No</TableHead>
+                    <TableHead className="min-w-[90px]">구분</TableHead>
+                    <TableHead className="min-w-[150px]">품명</TableHead>
+                    <TableHead className="min-w-[100px]">규격</TableHead>
+                    <TableHead className="min-w-[80px]">가로</TableHead>
+                    <TableHead className="min-w-[80px]">세로</TableHead>
+                    <TableHead className="min-w-[80px]">두께</TableHead>
+                    <TableHead className="min-w-[80px]">면적(㎡)</TableHead>
+                    <TableHead className="min-w-[60px]">단위</TableHead>
+                    <TableHead className="min-w-[80px]">수량</TableHead>
+                    <TableHead className="min-w-[90px]">단가</TableHead>
+                    <TableHead className="min-w-[90px]">금액</TableHead>
+                    <TableHead className="min-w-[140px]">납기일</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {modalDetailRows.length === 0 ? (
+                    <TableRow><TableCell colSpan={15} className="text-center text-muted-foreground py-8">품목을 추가해주세요</TableCell></TableRow>
+                  ) : modalDetailRows.map((row, idx) => (
+                    <TableRow
+                      key={row._id || idx}
+                      draggable
+                      onDragStart={(e) => { e.dataTransfer.setData("text/plain", String(idx)); e.currentTarget.classList.add("opacity-50"); }}
+                      onDragEnd={(e) => { e.currentTarget.classList.remove("opacity-50"); }}
+                      onDragOver={(e) => { e.preventDefault(); e.currentTarget.classList.add("border-t-2", "border-primary"); }}
+                      onDragLeave={(e) => { e.currentTarget.classList.remove("border-t-2", "border-primary"); }}
+                      onDrop={(e) => {
+                        e.preventDefault();
+                        e.currentTarget.classList.remove("border-t-2", "border-primary");
+                        const fromIdx = parseInt(e.dataTransfer.getData("text/plain"));
+                        if (!isNaN(fromIdx) && fromIdx !== idx) {
+                          setModalDetailRows((prev) => {
+                            const next = [...prev];
+                            const [moved] = next.splice(fromIdx, 1);
+                            next.splice(idx, 0, moved);
+                            return next;
+                          });
+                        }
+                      }}
+                    >
+                      <TableCell className="cursor-grab active:cursor-grabbing">
+                        <GripVertical className="w-4 h-4 text-muted-foreground" />
+                      </TableCell>
+                      <TableCell>
+                        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive" onClick={() => removeDetailRow(idx)}>
+                          <X className="w-3.5 h-3.5" />
+                        </Button>
+                      </TableCell>
+                      <TableCell className="text-center text-xs text-muted-foreground">{idx + 1}</TableCell>
+                      {/* 구분: 품목검색 → 읽기전용, 행추가 → Select */}
+                      <TableCell>
+                        {row._fromItemInfo ? (
+                          <span className="text-sm px-2">{row._divisionLabel || "-"}</span>
+                        ) : (
+                          <Select value={row.division || ""} onValueChange={(v) => updateDetailRow(idx, "division", v)}>
+                            <SelectTrigger className="h-8 text-sm"><SelectValue placeholder="구분" /></SelectTrigger>
+                            <SelectContent position="popper" sideOffset={4} className="z-[9999]">
+                              {(categoryOptions["item_division"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                            </SelectContent>
+                          </Select>
+                        )}
+                      </TableCell>
+                      {/* 품명: 품목검색 → 읽기전용, 행추가 → 입력 */}
+                      <TableCell>
+                        {row._fromItemInfo ? (
+                          <span className="text-sm px-2">{row.part_name || "-"}</span>
+                        ) : (
+                          <Input value={row.part_name || ""} onChange={(e) => updateDetailRow(idx, "part_name", e.target.value)}
+                            className="h-8 text-sm" placeholder="품명" />
+                        )}
+                      </TableCell>
+                      {/* 규격: 품목검색 → 읽기전용, 행추가 → 입력 */}
+                      <TableCell>
+                        {row._fromItemInfo ? (
+                          <span className="text-sm px-2">{row.spec || "-"}</span>
+                        ) : (
+                          <Input value={row.spec || ""} onChange={(e) => updateDetailRow(idx, "spec", e.target.value)}
+                            className="h-8 text-sm" placeholder="규격" />
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <Input value={formatNumber(row.width || "")} onChange={(e) => updateDetailRow(idx, "width", parseNumber(e.target.value))}
+                          className="h-8 text-sm text-right" placeholder="mm" />
+                      </TableCell>
+                      <TableCell>
+                        <Input value={formatNumber(row.height || "")} onChange={(e) => updateDetailRow(idx, "height", parseNumber(e.target.value))}
+                          className="h-8 text-sm text-right" placeholder="mm" />
+                      </TableCell>
+                      <TableCell>
+                        <Input value={row.thickness || ""} onChange={(e) => updateDetailRow(idx, "thickness", e.target.value)}
+                          className="h-8 text-sm text-right" placeholder="mm" />
+                      </TableCell>
+                      <TableCell className="text-sm text-right text-muted-foreground">
+                        {row.area || "-"}
+                      </TableCell>
+                      {/* 단위: 품목검색 → 읽기전용, 행추가 → 입력 */}
+                      <TableCell>
+                        {row._fromItemInfo ? (
+                          <span className="text-sm px-2">{row.unit || "-"}</span>
+                        ) : (
+                          <Input value={row.unit || ""} onChange={(e) => updateDetailRow(idx, "unit", e.target.value)}
+                            className="h-8 text-sm" placeholder="㎡" />
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <Input value={formatNumber(row.qty || "")} onChange={(e) => updateDetailRow(idx, "qty", parseNumber(e.target.value))}
+                          className="h-8 text-sm text-right" />
+                      </TableCell>
+                      <TableCell>
+                        <Input value={formatNumber(row.unit_price || "")} onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))}
+                          className="h-8 text-sm text-right" />
+                      </TableCell>
+                      <TableCell className="text-sm text-right font-medium">
+                        {row.amount ? Number(row.amount).toLocaleString() : ""}
+                      </TableCell>
+                      <TableCell>
+                        <FormDatePicker value={row.due_date || ""} onChange={(v) => updateDetailRow(idx, "due_date", v)} placeholder="납기일" />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                  {/* 합계 행 */}
+                  {modalDetailRows.length > 0 && (
+                    <TableRow className="bg-muted/30 font-semibold">
+                      <TableCell colSpan={11} className="text-right text-sm">합계</TableCell>
+                      <TableCell className="text-sm text-right">
+                        {modalDetailRows.reduce((s, r) => s + (parseFloat(r.qty) || 0), 0).toLocaleString()}
+                      </TableCell>
+                      <TableCell></TableCell>
+                      <TableCell className="text-sm text-right text-blue-600">
+                        {modalDetailRows.reduce((s, r) => s + (parseFloat(r.amount) || 0), 0).toLocaleString()}원
+                      </TableCell>
+                      <TableCell></TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </div>
+
+        {/* 품목 선택 모달 */}
+        <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+          <DialogContent className="max-w-3xl max-h-[70vh]" onInteractOutside={(e) => e.preventDefault()}>
+            <DialogHeader>
+              <DialogTitle>품목 선택</DialogTitle>
+              <DialogDescription>수주에 추가할 품목을 선택하세요. 품목이 없으면 &quot;행 추가&quot;로 직접 입력도 가능합니다.</DialogDescription>
+            </DialogHeader>
+            <div className="flex gap-2 mb-3">
+              <Input placeholder="품명 검색" value={itemSearchKeyword}
+                onChange={(e) => setItemSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchItems()}
+                className="h-9 flex-1" />
+              <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+                {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+              </Button>
+            </div>
+            <div className="overflow-auto max-h-[350px] border rounded-lg">
+              <Table>
+                <TableHeader className="sticky top-0 bg-background z-10">
+                  <TableRow>
+                    <TableHead className="w-[40px] text-center">
+                      <input type="checkbox"
+                        checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                        onChange={(e) => {
+                          if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                          else setItemCheckedIds(new Set());
+                        }} />
+                    </TableHead>
+                    <TableHead className="w-[120px]">품목코드</TableHead>
+                    <TableHead className="min-w-[150px]">품명</TableHead>
+                    <TableHead className="w-[100px]">규격</TableHead>
+                    <TableHead className="w-[60px]">단위</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {itemSearchResults.length === 0 ? (
+                    <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
+                  ) : itemSearchResults.map((item) => (
+                    <TableRow key={item.id} className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                      onClick={() => setItemCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                        return next;
+                      })}>
+                      <TableCell className="text-center"><input type="checkbox" checked={itemCheckedIds.has(item.id)} readOnly /></TableCell>
+                      <TableCell className="text-xs">{item.item_number}</TableCell>
+                      <TableCell className="text-sm">{item.item_name}</TableCell>
+                      <TableCell className="text-xs">{item.size}</TableCell>
+                      <TableCell className="text-xs">{item.unit}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+            <DialogFooter>
+              <div className="flex items-center gap-2 w-full justify-between">
+                <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+                <div className="flex gap-2">
+                  <Button variant="outline" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(false); }}>취소</Button>
+                  <Button onClick={addSelectedItemsToDetail} disabled={itemCheckedIds.size === 0}>
+                    <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 추가
+                  </Button>
+                </div>
+              </div>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </FullscreenDialog>
+
+      {/* 엑셀 업로드 — 단일 테이블 모드 + 커스텀 후처리 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={DETAIL_TABLE}
+        userId={user?.userId}
+        onSuccess={handleExcelUploadSuccess}
+      />
+
+      {/* 테이블 설정 */}
+      <TableSettingsModal
+        open={tableSettingsOpen}
+        onOpenChange={setTableSettingsOpen}
+        tableName={MASTER_TABLE}
+        settingsId="jeilglass-order"
+        onSave={applyTableSettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/sales/quote/page.tsx b/frontend/app/(main)/COMPANY_30/sales/quote/page.tsx
new file mode 100644
index 00000000..18e106c9
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/sales/quote/page.tsx
@@ -0,0 +1,995 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, FileText,
+} from "lucide-react";
+import { apiClient } from "@/lib/api/client";
+import { reportApi } from "@/lib/api/reportApi";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import {
+  ResizablePanelGroup, ResizablePanel, ResizableHandle,
+} from "@/components/ui/resizable";
+import { ReportInlineViewer } from "@/components/report/ReportInlineViewer";
+import { ReportMaster, ComponentConfig } from "@/types/report";
+
+const MASTER_TABLE = "quote_mng";
+
+const fmt = (val: string) => {
+  const num = val.replace(/[^\d.-]/g, "");
+  if (!num) return "";
+  const parts = num.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+const pn = (val: string) => val.replace(/,/g, "");
+
+const GRID_COLUMNS: DataGridColumn[] = [
+  { key: "quote_no", label: "견적번호", width: "w-[120px]" },
+  { key: "customer_name", label: "거래처명", width: "w-[150px]" },
+  { key: "quote_date", label: "견적일자", width: "w-[110px]" },
+  { key: "valid_until", label: "유효기한", width: "w-[110px]" },
+  { key: "total_amount", label: "견적금액", width: "w-[120px]", formatNumber: true, align: "right" },
+  { key: "status_label", label: "상태", width: "w-[90px]" },
+  { key: "manager", label: "담당자", width: "w-[100px]" },
+  { key: "domestic_type", label: "국내/국외", width: "w-[90px]" },
+];
+
+const STATUS_MAP: Record<string, string> = {
+  draft: "작성중", pending: "검토중", approved: "승인", rejected: "반려", converted: "수주전환",
+};
+
+const EMPTY_ITEM = {
+  item_code: "", item_name: "", spec: "", qty: "1", unit: "EA",
+  request_length: "", unit_price: "0", supply_amount: "0", vat_amount: "0", total_amount: "0", notes: "",
+};
+
+export default function QuoteManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  const [quotes, setQuotes] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [selectedRow, setSelectedRow] = useState<any | null>(null);
+
+  // 컴포넌트 클릭 편집 모달
+  const [editComp, setEditComp] = useState<ComponentConfig | null>(null);
+  const [editValues, setEditValues] = useState<Record<string, string>>({});
+  const [items, setItems] = useState<(typeof EMPTY_ITEM)[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // 기본정보 모달
+  const [basicInfoOpen, setBasicInfoOpen] = useState(false);
+  const [basicForm, setBasicForm] = useState({ quote_date: "", valid_until: "", status: "draft" });
+
+  // 엑셀 / 리포트
+  const [excelOpen, setExcelOpen] = useState(false);
+  const [reportList, setReportList] = useState<ReportMaster[]>([]);
+  const [selectedReportId, setSelectedReportId] = useState<string | null>(null);
+  const [reportKey, setReportKey] = useState(0);
+
+  // 품목 검색
+  const [itemSearchOpen, setItemSearchOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSelectedMap, setItemSelectedMap] = useState<Map<string, any>>(new Map());
+
+  // 거래처 검색
+  const [custSearchOpen, setCustSearchOpen] = useState(false);
+  const [custSearchKeyword, setCustSearchKeyword] = useState("");
+  const [custSearchResults, setCustSearchResults] = useState<any[]>([]);
+  const [custSearchLoading, setCustSearchLoading] = useState(false);
+
+  // 사원(담당자) 검색
+  const [userSearchOpen, setUserSearchOpen] = useState(false);
+  const [userSearchKeyword, setUserSearchKeyword] = useState("");
+  const [userSearchResults, setUserSearchResults] = useState<any[]>([]);
+  const [userSearchLoading, setUserSearchLoading] = useState(false);
+
+  // ── 데이터 로드 ──
+
+  const mapRow = (r: any) => ({
+    ...r, id: String(r.objid), status_label: STATUS_MAP[r.status] ?? r.status, total_amount: Number(r.total_amount || 0),
+  });
+
+  const fetchQuotes = useCallback(async () => {
+    if (!user) return;
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      searchFilters.forEach((f) => { if (f.value) params[f.columnName] = f.value; });
+      const res = await apiClient.get("/quotes/list", { params });
+      const mapped = (res.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+    } catch { toast.error("견적 목록 조회 실패"); }
+    finally { setLoading(false); }
+  }, [user, searchFilters]);
+
+  useEffect(() => { fetchQuotes(); }, [fetchQuotes]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await reportApi.getReports({ page: 1, limit: 100 });
+        if (res.success) {
+          const items = res.data.items ?? [];
+          setReportList(items);
+          if (items.length > 0 && !selectedReportId) setSelectedReportId(items[0].report_id);
+        }
+      } catch { /* 무시 */ }
+    })();
+  }, []);
+
+  // ── "신규" → DB에 draft 즉시 생성 → 자동 선택 ──
+
+  const handleCreate = async () => {
+    try {
+      const numRes = await apiClient.get("/quotes/generate-number");
+      const quoteNo = numRes.data?.data?.quoteNo ?? "";
+      const createRes = await apiClient.post("/quotes", {
+        quote_no: quoteNo,
+        quote_date: new Date().toISOString().split("T")[0],
+        status: "draft",
+        customer_name: "",
+        items: [],
+      });
+      toast.success("신규 견적이 생성되었습니다. 우측 양식에서 각 영역을 클릭하여 입력하세요.");
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+
+      const newObjid = createRes.data?.data?.objid;
+      const newRow = newObjid ? mapped.find((r: any) => r.objid === newObjid) : mapped[0];
+      if (newRow) setSelectedRow(newRow);
+    } catch { toast.error("견적 생성 실패"); }
+  };
+
+  // ── 삭제 ──
+
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.info("삭제할 견적을 선택하세요."); return; }
+    const ok = await confirm(`${checkedIds.length}건의 견적을 삭제하시겠습니까?`, { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      for (const id of checkedIds) await apiClient.delete(`/quotes/${id}`);
+      toast.success("삭제 완료");
+      setCheckedIds([]);
+      setSelectedRow(null);
+      fetchQuotes();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // ── 컴포넌트 클릭 → 편집 모달 ──
+
+  const handleComponentClick = async (comp: ComponentConfig) => {
+    if (!selectedRow) return;
+    setEditComp(comp);
+
+    if (comp.type === "table") {
+      // 테이블 → 품목 편집
+      try {
+        const res = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const d = res.data?.data;
+        setItems(
+          (d?.items || []).length > 0
+            ? d.items.map((it: any) => ({
+                item_code: it.item_code || "", item_name: it.item_name || "", spec: it.spec || "",
+                qty: String(it.qty ?? 1), unit: it.unit || "EA",
+                request_length: it.request_length ? String(it.request_length) : "",
+                unit_price: String(it.unit_price ?? 0), supply_amount: String(it.supply_amount ?? 0),
+                vat_amount: String(it.vat_amount ?? 0), total_amount: String(it.total_amount ?? 0),
+                notes: it.notes || "",
+              }))
+            : [{ ...EMPTY_ITEM }],
+        );
+      } catch { setItems([{ ...EMPTY_ITEM }]); }
+    } else if (comp.type === "card") {
+      const cardItems = (comp as any).cardItems ?? [];
+      // 우측 카드 (회사정보 + 담당자) → 담당자 선택
+      const hasCompanyField = cardItems.some((ci: any) =>
+        ["company_name_self", "ceo_self", "biz_no_self", "address_self"].includes(ci.fieldName || "")
+      );
+      if (hasCompanyField) {
+        setUserSearchKeyword("");
+        setUserSearchResults([]);
+        setUserSearchOpen(true);
+        searchUsers();
+        return;
+      }
+      // 좌측 카드 (거래처) → 거래처 검색
+      const hasCustomerField = cardItems.some((ci: any) =>
+        ["customer_name", "customer_ceo", "customer_biz_no"].includes(ci.fieldName || "")
+      );
+      if (hasCustomerField) {
+        setCustSearchKeyword("");
+        setCustSearchResults([]);
+        setCustSearchOpen(true);
+        searchCustomers();
+        return;
+      }
+      // 기타 카드
+      const vals: Record<string, string> = {};
+      cardItems.forEach((ci: any) => {
+        if (ci.fieldName) vals[ci.fieldName] = selectedRow[ci.fieldName] ?? ci.value ?? "";
+      });
+      setEditValues(vals);
+    } else if (comp.type === "text" || comp.type === "label") {
+      // 텍스트 → 기본정보 모달 하나로 통합
+      const basicFields = ["quote_no", "quote_date", "valid_until", "status"];
+      if (comp.fieldName && basicFields.includes(comp.fieldName)) {
+        // 기본정보 모달
+        const detail = await apiClient.get(`/quotes/${selectedRow.objid}`).then(r => r.data?.data).catch(() => null);
+        setBasicForm({
+          quote_date: detail?.quote_date || "",
+          valid_until: detail?.valid_until || "",
+          status: detail?.status || "draft",
+        });
+        setBasicInfoOpen(true);
+        setEditComp(null);
+        return;
+      }
+      // 기타 텍스트 (제목 등)
+      toast.info("이 영역은 리포트 디자이너에서 수정하세요.");
+      setEditComp(null);
+      return;
+    } else if (comp.type === "calculation") {
+      // 계산은 읽기 전용 안내
+      toast.info("계산 컴포넌트는 품목 데이터에서 자동 계산됩니다.");
+      setEditComp(null);
+    } else if (comp.type === "signature" || comp.type === "stamp") {
+      toast.info("서명/도장은 리포트 디자이너에서 설정하세요.");
+      setEditComp(null);
+    } else {
+      setEditValues({});
+    }
+  };
+
+  // ── 컴포넌트 편집 저장 ──
+
+  const handleEditSave = async () => {
+    if (!selectedRow || !editComp) return;
+    setSaving(true);
+    try {
+      if (editComp.type === "table") {
+        // 품목 저장 — 기존 견적 데이터 불러와서 품목만 교체
+        const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const existing = detailRes.data?.data ?? {};
+        const payload = {
+          ...existing,
+          items: items.filter((it) => it.item_name).map((it) => ({
+            item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+            qty: Number(pn(it.qty)) || 0, unit: it.unit,
+            request_length: it.request_length ? Number(it.request_length) : null,
+            unit_price: Number(pn(it.unit_price)) || 0,
+            supply_amount: Number(pn(it.supply_amount)) || 0,
+            vat_amount: Number(pn(it.vat_amount)) || 0,
+            total_amount: Number(pn(it.total_amount)) || 0,
+            notes: it.notes,
+          })),
+        };
+        await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      } else {
+        // 텍스트/카드 → 해당 필드만 업데이트
+        const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const existing = detailRes.data?.data ?? {};
+        const payload = { ...existing, ...editValues };
+        // items는 기존 유지
+        payload.items = (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0),
+          notes: it.notes,
+        }));
+        await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      }
+
+      toast.success("저장되었습니다.");
+      setEditComp(null);
+
+      // 목록 + 리포트 갱신
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 거래처 검색 ──
+
+  const searchCustomers = async () => {
+    setCustSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (custSearchKeyword) {
+        filters.push({ columnName: "customer_name", operator: "contains", value: custSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/customer_mng/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setCustSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("거래처 조회 실패"); }
+    finally { setCustSearchLoading(false); }
+  };
+
+  const selectCustomer = async (cust: any) => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        customer_objid: cust.objid || null,
+        customer_name: cust.customer_name || "",
+        customer_ceo: cust.contact_person || "",
+        customer_biz_no: cust.business_number || "",
+        customer_address: cust.address || "",
+        customer_contact: cust.contact_person || "",
+        customer_phone: cust.contact_phone || "",
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success(`${payload.customer_name} 거래처 적용 완료`);
+      setCustSearchOpen(false);
+      setEditComp(null);
+
+      // 목록 + 리포트 갱신
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 기본정보 저장 ──
+
+  const handleBasicInfoSave = async () => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        quote_date: basicForm.quote_date,
+        valid_until: basicForm.valid_until,
+        status: basicForm.status,
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success("기본정보 저장 완료");
+      setBasicInfoOpen(false);
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 사원(담당자) 검색 ──
+
+  const searchUsers = async () => {
+    setUserSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (userSearchKeyword) {
+        filters.push({ columnName: "user_name", operator: "contains", value: userSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/user_info/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setUserSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("사원 조회 실패"); }
+    finally { setUserSearchLoading(false); }
+  };
+
+  const selectUser = async (usr: any) => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        manager: usr.user_name || "",
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success(`담당자: ${payload.manager} 적용`);
+      setUserSearchOpen(false);
+      setEditComp(null);
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 품목 검색 ──
+
+  const searchItemInfo = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/item_info/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setItemSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("품목 조회 실패"); }
+    finally { setItemSearchLoading(false); }
+  };
+
+  const toggleItemSelect = (row: any) => {
+    const key = row.item_number || row.objid || row.id;
+    setItemSelectedMap((prev) => {
+      const next = new Map(prev);
+      if (next.has(key)) next.delete(key); else next.set(key, row);
+      return next;
+    });
+  };
+
+  const addSelectedItemsToQuote = () => {
+    const selected = Array.from(itemSelectedMap.values());
+    if (selected.length === 0) { toast.info("품목을 선택하세요."); return; }
+    const newItems = selected.map((item) => calcItem({
+      item_code: item.item_number || item.item_code || "",
+      item_name: item.item_name || "",
+      spec: item.spec || item.standard || "",
+      qty: "1",
+      unit: item.unit || "EA",
+      request_length: "",
+      unit_price: String(item.selling_price || item.standard_price || 0),
+      supply_amount: "0",
+      vat_amount: "0",
+      total_amount: "0",
+      notes: "",
+    }));
+    setItems((prev) => [...prev, ...newItems]);
+    setItemSearchOpen(false);
+    setItemSelectedMap(new Map());
+    setItemSearchKeyword("");
+    toast.success(`${selected.length}건 품목 추가`);
+  };
+
+  // ── 품목 계산 ──
+
+  const calcItem = (item: typeof EMPTY_ITEM) => {
+    const qty = Number(pn(item.qty)) || 0;
+    const price = Number(pn(item.unit_price)) || 0;
+    const supply = qty * price;
+    const vat = Math.round(supply * 0.1);
+    return { ...item, supply_amount: String(supply), vat_amount: String(vat), total_amount: String(supply + vat) };
+  };
+  const updateItem = (idx: number, field: string, value: string) => {
+    setItems((prev) => {
+      const next = [...prev];
+      next[idx] = { ...next[idx], [field]: value };
+      if (field === "qty" || field === "unit_price") next[idx] = calcItem(next[idx]);
+      return next;
+    });
+  };
+  const addItem = () => setItems((prev) => [...prev, { ...EMPTY_ITEM }]);
+  const removeItem = (idx: number) => setItems((prev) => prev.filter((_, i) => i !== idx));
+  const totalSupply = items.reduce((s, it) => s + (Number(pn(it.supply_amount)) || 0), 0);
+  const totalVat = items.reduce((s, it) => s + (Number(pn(it.vat_amount)) || 0), 0);
+  const totalAmount = totalSupply + totalVat;
+
+  // ── 행 클릭 ──
+
+  const handleRowClick = (row: any) => setSelectedRow(row);
+
+  const contextParams = selectedRow
+    ? { "$1": selectedRow.objid, "$2": user?.companyCode || "COMPANY_7", objid: selectedRow.objid, quote_no: selectedRow.quote_no, customer_name: selectedRow.customer_name, quote_date: selectedRow.quote_date }
+    : undefined;
+
+  // ── 편집 모달 제목/타입 판별 ──
+
+  const getModalTitle = () => {
+    if (!editComp) return "";
+    if (editComp.type === "table") return "견적 품목";
+    if (editComp.type === "card") {
+      const items = (editComp as any).cardItems ?? [];
+      const title = (editComp as any).headerText || (editComp as any).title || "";
+      if (title) return title;
+      if (items.length > 0) return items[0].label ?? "카드 정보";
+      return "카드 정보";
+    }
+    if (editComp.type === "text" || editComp.type === "label") {
+      if (editComp.fieldName) return editComp.fieldName;
+      return "텍스트 편집";
+    }
+    return editComp.type;
+  };
+
+  // ── JSX ──
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      <DynamicSearchFilter tableName={MASTER_TABLE} filterId="quote-mng-filter"
+        onFilterChange={(filters) => setSearchFilters(filters)} dataCount={totalCount} />
+
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg border">
+        {/* 좌측: 견적 목록 */}
+        <ResizablePanel defaultSize={55} minSize={35}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center justify-between border-b bg-white px-3 py-2">
+              <span className="text-sm font-semibold text-gray-700">
+                견적 목록 <span className="text-gray-400">{totalCount}건</span>
+              </span>
+              <div className="flex items-center gap-1.5">
+                <Button variant="outline" size="sm" className="gap-1 text-xs" onClick={() => setExcelOpen(true)}>
+                  <FileSpreadsheet className="h-3.5 w-3.5" /> 업로드
+                </Button>
+                <Button variant="outline" size="sm" className="gap-1 text-xs"
+                  onClick={() => quotes.length > 0 ? exportToExcel(quotes, "견적목록.xlsx", "견적목록") : toast.info("데이터 없음")}>
+                  <Download className="h-3.5 w-3.5" /> 다운로드
+                </Button>
+                <Button size="sm" className="gap-1 text-xs" onClick={handleCreate}>
+                  <Plus className="h-3.5 w-3.5" /> 신규
+                </Button>
+                <Button variant="destructive" size="sm" className="gap-1 text-xs" onClick={handleDelete}>
+                  <Trash2 className="h-3.5 w-3.5" /> 삭제
+                </Button>
+              </div>
+            </div>
+            <div className="flex-1 overflow-hidden">
+              <DataGrid gridId="quote-mng" columns={GRID_COLUMNS} data={quotes} showCheckbox tableName={MASTER_TABLE}
+                checkedIds={checkedIds} onCheckedChange={setCheckedIds}
+                onRowClick={handleRowClick} selectedId={selectedRow?.objid ? String(selectedRow.objid) : null} />
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 리포트 뷰어 — 컴포넌트 클릭 가능 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center gap-2 border-b bg-white px-3 py-2">
+              <FileText className="h-4 w-4 text-gray-500" />
+              <span className="text-sm font-semibold text-gray-700">견적서</span>
+              <Select value={selectedReportId ?? ""} onValueChange={(v) => setSelectedReportId(v || null)}>
+                <SelectTrigger className="ml-auto h-7 w-[180px] text-xs">
+                  <SelectValue placeholder="리포트 양식 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {reportList.map((r) => (
+                    <SelectItem key={r.report_id} value={r.report_id} className="text-xs">
+                      {r.report_name_kor || r.report_name_eng || r.report_id}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex-1 overflow-hidden">
+              {!selectedRow ? (
+                <div className="flex h-full items-center justify-center text-center text-gray-400">
+                  <div>
+                    <FileText className="mx-auto mb-3 h-12 w-12 opacity-30" />
+                    <p className="text-sm font-medium">견적을 선택해주세요</p>
+                    <p className="mt-1 text-xs text-gray-300">&quot;신규&quot; 버튼으로 생성하거나 좌측에서 선택하세요.</p>
+                  </div>
+                </div>
+              ) : !selectedReportId ? (
+                <div className="flex h-full items-center justify-center text-center text-gray-400">
+                  <div>
+                    <FileText className="mx-auto mb-3 h-12 w-12 opacity-30" />
+                    <p className="text-sm font-medium">리포트 양식을 선택해주세요</p>
+                  </div>
+                </div>
+              ) : (
+                <ReportInlineViewer
+                  key={reportKey}
+                  reportId={selectedReportId}
+                  contextParams={contextParams}
+                  onComponentClick={handleComponentClick}
+                />
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ═══ 컴포넌트 클릭 편집 모달 (동적) ═══ */}
+
+      {/* 텍스트/카드 편집 모달 */}
+      <Dialog open={!!editComp && editComp.type !== "table"} onOpenChange={(o) => !o && setEditComp(null)}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{getModalTitle()}</DialogTitle>
+            <DialogDescription>값을 수정한 후 저장 버튼을 누르세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-3">
+            {Object.entries(editValues).map(([key, val]) => (
+              <div key={key}>
+                <Label className="text-xs">{key}</Label>
+                {val.length > 60 ? (
+                  <Textarea className="mt-1" rows={3} value={val}
+                    onChange={(e) => setEditValues((p) => ({ ...p, [key]: e.target.value }))} />
+                ) : (
+                  <Input className="mt-1" value={val}
+                    onChange={(e) => setEditValues((p) => ({ ...p, [key]: e.target.value }))} />
+                )}
+              </div>
+            ))}
+            {Object.keys(editValues).length === 0 && (
+              <p className="text-sm text-gray-400">이 컴포넌트에 편집 가능한 필드가 없습니다.</p>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditComp(null)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving || Object.keys(editValues).length === 0} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블(품목) 편집 모달 */}
+      <Dialog open={!!editComp && editComp.type === "table"} onOpenChange={(o) => { if (!o && itemSearchOpen) return; if (!o) setEditComp(null); }}>
+        <DialogContent className="flex max-h-[80vh] max-w-4xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>견적 품목</DialogTitle>
+            <DialogDescription>품목을 추가/수정합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-auto">
+            <div className="mb-3 flex gap-2">
+              <Button size="sm" className="gap-1 text-xs" onClick={() => { setItemSelectedMap(new Map()); setItemSearchResults([]); setItemSearchKeyword(""); setItemSearchOpen(true); searchItemInfo(); }}>
+                <Plus className="h-3.5 w-3.5" /> 품목 검색/추가
+              </Button>
+              <Button variant="outline" size="sm" className="gap-1 text-xs" onClick={addItem}>
+                <Plus className="h-3.5 w-3.5" /> 빈 행 추가
+              </Button>
+            </div>
+            <div className="overflow-auto rounded border">
+              <table className="w-full text-xs">
+                <thead className="sticky top-0 bg-gray-50">
+                  <tr>
+                    <th className="w-8 px-2 py-2 text-center">#</th>
+                    <th className="px-2 py-2 text-left">품목코드</th>
+                    <th className="px-2 py-2 text-left">품목명</th>
+                    <th className="px-2 py-2 text-left">규격</th>
+                    <th className="w-20 px-2 py-2 text-right">수량</th>
+                    <th className="w-16 px-2 py-2 text-center">단위</th>
+                    <th className="w-24 px-2 py-2 text-right">단가</th>
+                    <th className="w-24 px-2 py-2 text-right">공급가액</th>
+                    <th className="w-20 px-2 py-2 text-right">부가세</th>
+                    <th className="w-24 px-2 py-2 text-right">합계</th>
+                    <th className="w-8" />
+                  </tr>
+                </thead>
+                <tbody>
+                  {items.map((item, idx) => (
+                    <tr key={idx} className="border-t">
+                      <td className="px-2 py-1 text-center text-gray-400">{idx + 1}</td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.item_code} onChange={(e) => updateItem(idx, "item_code", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.item_name} onChange={(e) => updateItem(idx, "item_name", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.spec} onChange={(e) => updateItem(idx, "spec", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-right text-xs" value={fmt(item.qty)} onChange={(e) => updateItem(idx, "qty", pn(e.target.value))} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-center text-xs" value={item.unit} onChange={(e) => updateItem(idx, "unit", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-right text-xs" value={fmt(item.unit_price)} onChange={(e) => updateItem(idx, "unit_price", pn(e.target.value))} /></td>
+                      <td className="px-2 py-1 text-right">{fmt(item.supply_amount)}</td>
+                      <td className="px-2 py-1 text-right">{fmt(item.vat_amount)}</td>
+                      <td className="px-2 py-1 text-right font-medium">{fmt(item.total_amount)}</td>
+                      <td className="px-1 py-1">
+                        <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => removeItem(idx)}>
+                          <Trash2 className="h-3 w-3 text-red-400" />
+                        </Button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className="mt-3 rounded bg-gray-50 p-3 text-sm">
+              <div className="flex justify-between"><span>공급가액</span><span>{fmt(String(totalSupply))}원</span></div>
+              <div className="flex justify-between"><span>부가세</span><span>{fmt(String(totalVat))}원</span></div>
+              <div className="flex justify-between border-t pt-2 font-bold"><span>합계금액</span><span>{fmt(String(totalAmount))}원</span></div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditComp(null)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 기본정보 모달 ═══ */}
+      <Dialog open={basicInfoOpen} onOpenChange={setBasicInfoOpen}>
+        <DialogContent className="max-w-md" onOpenAutoFocus={(e) => e.preventDefault()}>
+          <DialogHeader>
+            <DialogTitle>기본 정보</DialogTitle>
+            <DialogDescription>견적 기본 정보를 수정합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label className="text-xs">견적번호</Label>
+              <Input className="mt-1" value={selectedRow?.quote_no || ""} disabled />
+            </div>
+            <div>
+              <Label className="text-xs">견적일자 *</Label>
+              <div className="mt-1">
+                <FormDatePicker value={basicForm.quote_date} onChange={(v) => setBasicForm((p) => ({ ...p, quote_date: v }))} />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">유효기한 *</Label>
+              <div className="mt-1">
+                <FormDatePicker value={basicForm.valid_until} onChange={(v) => setBasicForm((p) => ({ ...p, valid_until: v }))} />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">상태</Label>
+              <Select value={basicForm.status} onValueChange={(v) => setBasicForm((p) => ({ ...p, status: v }))}>
+                <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {Object.entries(STATUS_MAP).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setBasicInfoOpen(false)}>취소</Button>
+            <Button onClick={handleBasicInfoSave} disabled={saving} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 담당자(사원) 검색 모달 ═══ */}
+      <Dialog open={userSearchOpen} onOpenChange={setUserSearchOpen}>
+        <DialogContent className="flex max-h-[70vh] max-w-lg flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>담당자 선택</DialogTitle>
+            <DialogDescription>담당자를 검색하여 선택하세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="이름 검색" value={userSearchKeyword}
+              onChange={(e) => setUserSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchUsers()} className="text-sm" />
+            <Button onClick={searchUsers} disabled={userSearchLoading} className="shrink-0">
+              {userSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left">이름</th>
+                  <th className="px-3 py-2 text-left">부서</th>
+                  <th className="px-3 py-2 text-left">직위</th>
+                  <th className="w-16 px-2 py-2 text-center">선택</th>
+                </tr>
+              </thead>
+              <tbody>
+                {userSearchResults.length === 0 ? (
+                  <tr><td colSpan={4} className="px-4 py-8 text-center text-gray-400">
+                    {userSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : userSearchResults.map((row, i) => (
+                  <tr key={row.objid || row.user_id || i} className="cursor-pointer border-t hover:bg-blue-50"
+                    onClick={() => selectUser(row)}>
+                    <td className="px-3 py-2 font-medium">{row.user_name || "-"}</td>
+                    <td className="px-3 py-2">{row.department || row.dept_name || "-"}</td>
+                    <td className="px-3 py-2">{row.position || row.rank || "-"}</td>
+                    <td className="px-2 py-2 text-center">
+                      <Button size="sm" variant="outline" className="h-6 text-xs"
+                        onClick={(e) => { e.stopPropagation(); selectUser(row); }}>선택</Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserSearchOpen(false)}>취소</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 거래처 검색 모달 ═══ */}
+      <Dialog open={custSearchOpen} onOpenChange={setCustSearchOpen}>
+        <DialogContent className="flex max-h-[80vh] max-w-2xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>거래처 검색</DialogTitle>
+            <DialogDescription>거래처를 검색하여 선택하세요. 선택하면 자동으로 적용됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="거래처명 검색" value={custSearchKeyword}
+              onChange={(e) => setCustSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchCustomers()} className="text-sm" />
+            <Button onClick={searchCustomers} disabled={custSearchLoading} className="shrink-0 gap-1">
+              {custSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left">거래처명</th>
+                  <th className="px-3 py-2 text-left">대표자</th>
+                  <th className="px-3 py-2 text-left">사업자번호</th>
+                  <th className="px-3 py-2 text-left">연락처</th>
+                  <th className="w-16 px-2 py-2 text-center">선택</th>
+                </tr>
+              </thead>
+              <tbody>
+                {custSearchResults.length === 0 ? (
+                  <tr><td colSpan={5} className="px-4 py-8 text-center text-gray-400">
+                    {custSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : custSearchResults.map((row, i) => (
+                  <tr key={row.objid || i} className="cursor-pointer border-t hover:bg-blue-50"
+                    onClick={() => selectCustomer(row)}>
+                    <td className="px-3 py-2 font-medium">{row.customer_name || "-"}</td>
+                    <td className="px-3 py-2">{row.contact_person || "-"}</td>
+                    <td className="px-3 py-2">{row.business_number || "-"}</td>
+                    <td className="px-3 py-2">{row.contact_phone || "-"}</td>
+                    <td className="px-2 py-2 text-center">
+                      <Button size="sm" variant="outline" className="h-6 text-xs"
+                        onClick={(e) => { e.stopPropagation(); selectCustomer(row); }}>선택</Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCustSearchOpen(false)}>취소</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 품목 검색 모달 ═══ */}
+      <Dialog open={itemSearchOpen} onOpenChange={setItemSearchOpen}>
+        <DialogContent className="flex max-h-[80vh] max-w-3xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>품목 검색</DialogTitle>
+            <DialogDescription>추가할 품목을 검색하여 선택하세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItemInfo()} className="text-sm" />
+            <Button onClick={searchItemInfo} disabled={itemSearchLoading} className="shrink-0 gap-1">
+              {itemSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="w-10 px-2 py-2 text-center">선택</th>
+                  <th className="px-2 py-2 text-left">품목코드</th>
+                  <th className="px-2 py-2 text-left">품명</th>
+                  <th className="px-2 py-2 text-left">규격</th>
+                  <th className="w-16 px-2 py-2 text-center">단위</th>
+                  <th className="w-24 px-2 py-2 text-right">단가</th>
+                </tr>
+              </thead>
+              <tbody>
+                {itemSearchResults.length === 0 ? (
+                  <tr><td colSpan={6} className="px-4 py-8 text-center text-gray-400">
+                    {itemSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : itemSearchResults.map((row, i) => {
+                  const key = row.item_number || row.objid || row.id || i;
+                  const checked = itemSelectedMap.has(key);
+                  return (
+                    <tr key={key} className={`cursor-pointer border-t ${checked ? "bg-blue-50" : "hover:bg-gray-50"}`}
+                      onClick={() => toggleItemSelect(row)}>
+                      <td className="px-2 py-1.5 text-center">
+                        <input type="checkbox" checked={checked} readOnly className="accent-blue-500" />
+                      </td>
+                      <td className="px-2 py-1.5">{row.item_number || row.item_code || "-"}</td>
+                      <td className="px-2 py-1.5">{row.item_name || "-"}</td>
+                      <td className="px-2 py-1.5">{row.spec || row.standard || "-"}</td>
+                      <td className="px-2 py-1.5 text-center">{row.unit || "EA"}</td>
+                      <td className="px-2 py-1.5 text-right">{fmt(String(row.selling_price || row.standard_price || 0))}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter className="flex items-center justify-between">
+            <span className="text-xs text-gray-500">선택: {itemSelectedMap.size}건</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSearchOpen(false)}>취소</Button>
+              <Button onClick={addSelectedItemsToQuote} disabled={itemSelectedMap.size === 0} className="gap-1">
+                <Plus className="h-4 w-4" /> 선택 품목 추가
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ExcelUploadModal open={excelOpen} onOpenChange={setExcelOpen} tableName={MASTER_TABLE} />
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/sales/sales-item/page.tsx b/frontend/app/(main)/COMPANY_30/sales/sales-item/page.tsx
new file mode 100644
index 00000000..d02bfef5
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/sales/sales-item/page.tsx
@@ -0,0 +1,1245 @@
+"use client";
+
+/**
+ * 판매품목정보 — Type B 마스터-디테일 리디자인
+ *
+ * 좌측: 판매품목 목록 (item_info, 판매 관련 필터)
+ * 우측: 선택한 품목의 거래처 정보 (customer_item_mapping → customer_mng 조인)
+ *
+ * 거래처관리와 양방향 연동 (같은 customer_item_mapping 테이블)
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Users, Package, Search, X, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const ITEM_TABLE = "item_info";
+const MAPPING_TABLE = "customer_item_mapping";
+const CUSTOMER_TABLE = "customer_mng";
+
+// 숫자 포맷 헬퍼
+const formatNum = (val: any): string => {
+  if (val === null || val === undefined || val === "") return "";
+  const n = Number(val);
+  return isNaN(n) ? String(val) : n.toLocaleString();
+};
+
+const ITEM_GRID_COLUMNS = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "selling_price", label: "판매가격" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
+];
+
+export default function SalesItemPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-sales-item", ITEM_TABLE, ITEM_GRID_COLUMNS);
+
+  // 좌측: 품목
+  const [items, setItems] = useState<any[]>([]);
+  const [itemLoading, setItemLoading] = useState(false);
+  const [itemCount, setItemCount] = useState(0);
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 거래처
+  const [customerItems, setCustomerItems] = useState<any[]>([]);
+  const [customerLoading, setCustomerLoading] = useState(false);
+  const [customerCheckedIds, setCustomerCheckedIds] = useState<string[]>([]);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string; isDefault?: boolean }[]>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 거래처 추가 모달
+  const [custSelectOpen, setCustSelectOpen] = useState(false);
+  const [custSearchKeyword, setCustSearchKeyword] = useState("");
+  const [custSearchResults, setCustSearchResults] = useState<any[]>([]);
+  const [custSearchLoading, setCustSearchLoading] = useState(false);
+  const [custCheckedIds, setCustCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 수정 모달
+  const [editItemOpen, setEditItemOpen] = useState(false);
+  const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+
+  // 거래처 상세 입력 모달 (거래처 품번/품명 + 단가)
+  const [custDetailOpen, setCustDetailOpen] = useState(false);
+  const [selectedCustsForDetail, setSelectedCustsForDetail] = useState<any[]>([]);
+  const [custMappings, setCustMappings] = useState<Record<string, Array<{ _id: string; customer_item_code: string; customer_item_name: string }>>>({});
+  const [custPrices, setCustPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [editCustData, setEditCustData] = useState<any>(null);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string; isDefault?: boolean }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string; isDefault?: boolean }[] => {
+        const result: { code: string; label: string; isDefault?: boolean }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel, isDefault: v.isDefault });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      // 단가 카테고리
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/customer_item_prices/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 좌측: 품목 조회
+  const fetchItems = useCallback(async () => {
+    setItemLoading(true);
+    try {
+      const filters: { columnName: string; operator: string; value: any }[] = [];
+
+      // 판매품목/영업관리 division 필터 (다중값 컬럼이므로 contains로 매칭)
+      filters.push({ columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" });
+
+      // DynamicSearchFilter에서 전달된 필터 추가
+      for (const f of searchFilters) {
+        filters.push({ columnName: f.columnName, operator: f.operator, value: f.value });
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const CATS = ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+      setItemCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setItemLoading(false);
+    }
+  }, [searchFilters, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => { fetchItems(); }, [fetchItems]);
+
+  // 선택된 품목
+  const selectedItem = items.find((i) => i.id === selectedItemId);
+
+  // 우측: 거래처 목록 조회
+  useEffect(() => {
+    if (!selectedItem?.item_number) { setCustomerItems([]); setCustomerCheckedIds([]); return; }
+    setCustomerCheckedIds([]);
+    const itemKey = selectedItem.item_number;
+    const fetchCustomerItems = async () => {
+      setCustomerLoading(true);
+      try {
+        // 1. customer_item_mapping에서 해당 품목의 매핑 조회
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
+          autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        // 2. customer_id → customer_mng 조인 (거래처명)
+        const custIds = [...new Set(mappings.map((m: any) => m.customer_id).filter(Boolean))];
+        let custMap: Record<string, any> = {};
+        if (custIds.length > 0) {
+          try {
+            const custRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+              page: 1, size: custIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "in", value: custIds }] },
+              autoFilter: true,
+            });
+            for (const c of (custRes.data?.data?.data || custRes.data?.data?.rows || [])) {
+              custMap[c.customer_code] = c;
+            }
+          } catch { /* skip */ }
+        }
+
+        // 3. customer_item_prices 조회 (단가 정보)
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        // 4. 거래처별 중복 제거 + 오늘 날짜 기준 단가 매칭
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o: any) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+        const seenCustIds = new Set<string>();
+        const sortedMappings = [...mappings].sort((a: any, b: any) => (a.customer_id || "").localeCompare(b.customer_id || ""));
+
+        setCustomerItems(sortedMappings.map((m: any) => {
+          const custKey = m.customer_id || "";
+          const isFirstOfGroup = !seenCustIds.has(custKey);
+          if (custKey) seenCustIds.add(custKey);
+
+          const custPriceList = allPrices.filter((p: any) => p.customer_id === custKey);
+          const todayPrice = custPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || custPriceList[0] || {};
+
+          return {
+            ...m,
+            customer_code: isFirstOfGroup ? custKey : "",
+            customer_name: isFirstOfGroup ? (custMap[custKey]?.customer_name || "") : "",
+            customer_item_code: m.customer_item_code || "",
+            customer_item_name: m.customer_item_name || "",
+            base_price: todayPrice.base_price || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+        }));
+      } catch (err) {
+        console.error("거래처 조회 실패:", err);
+      } finally {
+        setCustomerLoading(false);
+      }
+    };
+    fetchCustomerItems();
+  }, [selectedItem?.item_number, priceCategoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 거래처 검색
+  const searchCustomers = async () => {
+    setCustSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (custSearchKeyword) filters.push({ columnName: "customer_name", operator: "contains", value: custSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const all = res.data?.data?.data || res.data?.data?.rows || [];
+      // 이미 등록된 거래처 제외
+      const existing = new Set(customerItems.map((c: any) => c.customer_id || c.customer_code));
+      setCustSearchResults(all.filter((c: any) => !existing.has(c.customer_code)));
+    } catch { /* skip */ } finally { setCustSearchLoading(false); }
+  };
+
+  // 거래처 선택 → 상세 모달로 이동
+  const goToCustDetail = () => {
+    const selected = custSearchResults.filter((c) => custCheckedIds.has(c.id));
+    if (selected.length === 0) { toast.error("거래처를 선택해주세요."); return; }
+    setSelectedCustsForDetail(selected);
+    const mappings: typeof custMappings = {};
+    const prices: typeof custPrices = {};
+    for (const cust of selected) {
+      const key = cust.customer_code || cust.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: selectedItem?.standard_price || selectedItem?.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: selectedItem?.standard_price || selectedItem?.selling_price || "",
+      }];
+    }
+    setCustMappings(mappings);
+    setCustPrices(prices);
+    setCustSelectOpen(false);
+    setCustDetailOpen(true);
+  };
+
+  const addMappingRow = (custKey: string) => {
+    setCustMappings((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, customer_item_code: "", customer_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (custKey: string, rowId: string) => {
+    setCustMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updateMappingRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setCustMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  const addPriceRow = (custKey: string) => {
+    setCustPrices((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (custKey: string, rowId: string) => {
+    setCustPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setCustPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1;
+          if (roundLabel === "반올림") calc = Math.round(calc / unit) * unit;
+          else if (roundLabel === "절삭") calc = Math.floor(calc / unit) * unit;
+          else if (roundLabel === "올림") calc = Math.ceil(calc / unit) * unit;
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  const openEditCust = async (row: any) => {
+    const custKey = row.customer_code || row.customer_id;
+
+    // customer_mng에서 거래처 정보 조회
+    let custInfo: any = { customer_code: custKey, customer_name: row.customer_name || "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/customer_mng/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: custKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) custInfo = found;
+    } catch { /* skip */ }
+
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/customer_item_mapping/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: custKey },
+          { columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
+        ]}, autoFilter: true,
+      });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.customer_item_code || m.customer_item_name)
+        .map((m: any) => ({ _id: `m_existing_${m.id}`, customer_item_code: m.customer_item_code || "", customer_item_name: m.customer_item_name || "" }));
+    } catch { /* skip */ }
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: custKey },
+          { columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`, start_date: p.start_date ? String(p.start_date).split("T")[0] : "", end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI", base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "", discount_type: p.discount_type || "", discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "", rounding_unit_value: p.rounding_unit_value || "", calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+    if (priceRows.length === 0) {
+      priceRows.push({ _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "" });
+    }
+
+    setSelectedCustsForDetail([custInfo]);
+    setCustMappings({ [custKey]: mappingRows });
+    setCustPrices({ [custKey]: priceRows });
+    setEditCustData(row);
+    setCustDetailOpen(true);
+  };
+
+  const handleCustDetailSave = async () => {
+    if (!selectedItem) return;
+    const isEditingExisting = !!editCustData;
+    setSaving(true);
+    try {
+      for (const cust of selectedCustsForDetail) {
+        const custKey = cust.customer_code || cust.id;
+        const mappingRows = custMappings[custKey] || [];
+
+        if (isEditingExisting && editCustData?.id) {
+          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+            originalData: { id: editCustData.id },
+            updatedData: {
+              customer_item_code: mappingRows[0]?.customer_item_code || "",
+              customer_item_name: mappingRows[0]?.customer_item_name || "",
+            },
+          });
+
+          // 기존 prices 삭제 후 재등록
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "mapping_id", operator: "equals", value: editCustData.id },
+              ]}, autoFilter: true,
+            });
+            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+            if (existing.length > 0) {
+              await apiClient.delete(`/table-management/tables/customer_item_prices/delete`, {
+                data: existing.map((p: any) => ({ id: p.id })),
+              });
+            }
+          } catch { /* skip */ }
+
+          const priceRows = (custPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/customer_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: editCustData.id,
+              customer_id: custKey,
+              item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        } else {
+          // 신규 등록
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            customer_id: custKey, item_id: selectedItem.item_number,
+            customer_item_code: mappingRows[0]?.customer_item_code || "",
+            customer_item_name: mappingRows[0]?.customer_item_name || "",
+          });
+          const mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              customer_id: custKey, item_id: selectedItem.item_number,
+              customer_item_code: mappingRows[mi].customer_item_code || "",
+              customer_item_name: mappingRows[mi].customer_item_name || "",
+            });
+          }
+
+          const priceRows = (custPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/customer_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", customer_id: custKey, item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedCustsForDetail.length}개 거래처가 추가되었습니다.`);
+      setCustDetailOpen(false);
+      setEditCustData(null);
+      setCustCheckedIds(new Set());
+      // 우측 새로고침
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 수정
+  const openEditItem = () => {
+    if (!selectedItem) return;
+    setEditItemForm({ ...selectedItem });
+    setEditItemOpen(true);
+  };
+
+  const handleEditSave = async () => {
+    if (!editItemForm.id) return;
+    setSaving(true);
+    try {
+      await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
+        originalData: { id: editItemForm.id },
+        updatedData: {
+          selling_price: editItemForm.selling_price || null,
+          standard_price: editItemForm.standard_price || null,
+          currency_code: editItemForm.currency_code || null,
+        },
+      });
+      toast.success("수정되었습니다.");
+      setEditItemOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "수정에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 우측: 거래처 매핑 삭제
+  const handleCustomerMappingDelete = async () => {
+    if (customerCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${customerCheckedIds.length}개 거래처 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      // 관련 단가 삭제
+      for (const mappingId of customerCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/customer_item_prices/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      // 매핑 삭제
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: customerCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${customerCheckedIds.length}개 거래처 매핑이 삭제되었습니다.`);
+      setCustomerCheckedIds([]);
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) return;
+    const data = items.map((i) => ({
+      품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
+      기준단가: i.standard_price, 판매가격: i.selling_price, 통화: i.currency_code, 상태: i.status,
+    }));
+    await exportToExcel(data, "판매품목정보.xlsx", "판매품목");
+    toast.success("다운로드 완료");
+  };
+
+  // EDataTable 컬럼 정의 (판매품목)
+  const itemColumns: EDataTableColumn[] = [
+    { key: "item_number", label: "품번", width: "w-[110px]" },
+    { key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
+    { key: "size", label: "규격", width: "w-[80px]" },
+    { key: "unit", label: "단위", width: "w-[60px]" },
+    { key: "standard_price", label: "기준단가", width: "w-[90px]", align: "right", formatNumber: true },
+    { key: "selling_price", label: "판매가격", width: "w-[90px]", align: "right", formatNumber: true },
+    { key: "currency_code", label: "통화", width: "w-[50px]" },
+    { key: "status", label: "상태", width: "w-[60px]" },
+  ];
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ITEM_TABLE}
+        filterId="c16-sales-item"
+        onFilterChange={setSearchFilters}
+        dataCount={items.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" />
+            엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+
+          {/* 좌측: 판매품목 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">판매품목 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {itemCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={itemColumns}
+                data={ts.groupData(items)}
+                rowKey={(row) => row.id}
+                loading={itemLoading}
+                emptyMessage="등록된 판매품목이 없어요"
+                selectedId={selectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
+                onRowDoubleClick={() => openEditItem()}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-sales-item"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedItemId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Package className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">품목을 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 품목을 선택하면 상세 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 거래처별 단가 헤더 */}
+                  <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                    <div className="flex items-center gap-2.5 px-4">
+                      <Users className="w-3.5 h-3.5 text-muted-foreground" />
+                      <span className="text-xs font-semibold">거래처별 단가</span>
+                      {customerItems.length > 0 && (
+                        <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{customerItems.length}</Badge>
+                      )}
+                    </div>
+                    <div className="flex gap-1.5">
+                      <Button
+                        size="sm"
+                        onClick={() => { setCustCheckedIds(new Set()); setCustSelectOpen(true); searchCustomers(); }}
+                      >
+                        <Plus className="w-3.5 h-3.5" /> 거래처 추가
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={customerCheckedIds.length === 0}
+                        onClick={handleCustomerMappingDelete}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" /> 삭제
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 거래처 테이블 */}
+                  <div className="flex-1 min-h-0 overflow-auto pt-px">
+                    {customerLoading ? (
+                      <div className="flex items-center justify-center h-full">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : customerItems.length === 0 ? (
+                      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+                        등록된 거래처가 없어요
+                      </div>
+                    ) : (
+                      <Table noWrapper>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted h-10">
+                            <TableHead className="w-[40px] text-center px-2">
+                              <Checkbox
+                                checked={customerItems.length > 0 && customerCheckedIds.length === customerItems.length}
+                                onCheckedChange={(checked) => {
+                                  if (checked === true) setCustomerCheckedIds(customerItems.map((c) => c.id));
+                                  else setCustomerCheckedIds([]);
+                                }}
+                              />
+                            </TableHead>
+                            <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처코드</TableHead>
+                            <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품번</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품명</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {customerItems.map((row) => (
+                            <TableRow
+                              key={row.id}
+                              className={cn(
+                                "cursor-pointer h-[41px]",
+                                customerCheckedIds.includes(row.id) ? "bg-primary/[0.08]" : "hover:bg-accent"
+                              )}
+                              onClick={() => {
+                                setCustomerCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                              onDoubleClick={() => openEditCust(row)}
+                            >
+                              <TableCell className="text-center px-2">
+                                <Checkbox
+                                  checked={customerCheckedIds.includes(row.id)}
+                                  onCheckedChange={() => {}}
+                                />
+                              </TableCell>
+                              <TableCell className="text-[13px] font-mono text-muted-foreground">{row.customer_code}</TableCell>
+                              <TableCell className="text-sm text-foreground">{row.customer_name}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.customer_item_code}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.customer_item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right font-mono text-muted-foreground">{formatNum(row.base_price)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-mono text-foreground font-semibold">{formatNum(row.calculated_price)}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.currency_code}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 품목 수정 모달 ── */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>판매품목 수정</DialogTitle>
+            <DialogDescription>
+              {editItemForm.item_number || ""} — {editItemForm.item_name || ""}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {/* 품목 기본정보 (읽기 전용) */}
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+
+            <div className="col-span-2 border-t my-1" />
+
+            {/* 판매 설정 (수정 가능) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">판매가격</Label>
+              <Input
+                value={editItemForm.selling_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
+                placeholder="판매가격을 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">기준단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">통화</Label>
+              <Select
+                value={editItemForm.currency_code || ""}
+                onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="통화를 선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 거래처 검색 및 추가 모달 ── */}
+      <Dialog open={custSelectOpen} onOpenChange={setCustSelectOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>거래처 검색 및 추가</DialogTitle>
+            <DialogDescription>품목에 추가할 거래처를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 py-2">
+            {/* 검색바 */}
+            <div className="flex gap-2">
+              <Input
+                placeholder="거래처명으로 검색해주세요"
+                value={custSearchKeyword}
+                onChange={(e) => setCustSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchCustomers()}
+                className="h-9 flex-1"
+              />
+              <Button size="sm" onClick={searchCustomers} disabled={custSearchLoading} className="h-9">
+                {custSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
+              </Button>
+            </div>
+            {/* 검색 결과 테이블 */}
+            <div className="overflow-auto max-h-[350px] border rounded-lg">
+              <Table noWrapper>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="sticky top-0 bg-card w-[40px] text-center">
+                      <Checkbox
+                        checked={custSearchResults.length > 0 && custCheckedIds.size === custSearchResults.length}
+                        onCheckedChange={(checked) => {
+                          if (checked === true) setCustCheckedIds(new Set(custSearchResults.map((c) => c.id)));
+                          else setCustCheckedIds(new Set());
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[110px]">거래처코드</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[130px]">거래처명</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">거래유형</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">담당자</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {custSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : custSearchResults.map((c) => (
+                    <TableRow
+                      key={c.id}
+                      className={cn("cursor-pointer", custCheckedIds.has(c.id) && "bg-primary/[0.08]")}
+                      onClick={() => setCustCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <Checkbox
+                          checked={custCheckedIds.has(c.id)}
+                          onCheckedChange={(checked) => {
+                            setCustCheckedIds((prev) => {
+                              const next = new Set(prev);
+                              if (checked === true) next.add(c.id); else next.delete(c.id);
+                              return next;
+                            });
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell className="text-[13px] font-mono text-muted-foreground">{c.customer_code}</TableCell>
+                      <TableCell className="text-sm font-medium text-foreground">{c.customer_name}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.division}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.contact_person}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{custCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setCustSelectOpen(false)}>취소</Button>
+                <Button onClick={goToCustDetail} disabled={custCheckedIds.size === 0}>
+                  <Plus className="w-4 h-4" />
+                  {custCheckedIds.size}개 다음
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 거래처 상세 입력/수정 모달 ── */}
+      <Dialog open={custDetailOpen} onOpenChange={setCustDetailOpen}>
+        <DialogContent className="max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              거래처 상세정보 {editCustData ? "수정" : "입력"} — {selectedItem?.item_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editCustData ? "거래처 품번/품명과 기간별 단가를 수정해주세요." : "선택한 거래처의 품번/품명과 기간별 단가를 설정해주세요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-6 py-2">
+            {selectedCustsForDetail.map((cust, idx) => {
+              const custKey = cust.customer_code || cust.id;
+              const mappingRows = custMappings[custKey] || [];
+              const prices = custPrices[custKey] || [];
+
+              return (
+                <div key={custKey} className="border rounded-lg overflow-hidden">
+                  {/* 거래처 헤더 */}
+                  <div className="flex items-center gap-2.5 px-4 py-3 bg-muted border-b">
+                    <span className="text-[13px] font-bold text-foreground">{idx + 1}. {cust.customer_name || custKey}</span>
+                    <span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">
+                      {custKey}
+                    </span>
+                  </div>
+
+                  <div className="flex gap-4 p-4 bg-card">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/50">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">거래처 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.customer_item_code}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_code", e.target.value)}
+                              placeholder="거래처 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.customer_item_name}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_name", e.target.value)}
+                              placeholder="거래처 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button
+                              variant="ghost" size="sm"
+                              className="h-7 w-7 p-0 text-destructive shrink-0"
+                              onClick={() => removeMappingRow(custKey, mRow._id)}
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/30">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button
+                                  variant="ghost" size="sm"
+                                  className="h-6 w-6 p-0 text-destructive"
+                                  onClick={() => removePriceRow(custKey, price._id)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="통화" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "base_price", raw);
+                                }}
+                                className="h-8 text-xs text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-8 text-xs text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm text-foreground">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setCustDetailOpen(false);
+                if (!editCustData) setCustSelectOpen(true);
+                setEditCustData(null);
+              }}
+            >
+              {editCustData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleCustDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={ITEM_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchItems()}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/sales/shipping-order/page.tsx b/frontend/app/(main)/COMPANY_30/sales/shipping-order/page.tsx
new file mode 100644
index 00000000..2ed29b40
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/sales/shipping-order/page.tsx
@@ -0,0 +1,928 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Plus, Trash2, Save, X, ChevronDown, ChevronRight, ChevronLeft, ChevronsLeft, ChevronsRight, Search, Loader2, FileSpreadsheet, Inbox, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  getShippingOrderList,
+  saveShippingOrder,
+  deleteShippingOrders,
+  previewShippingOrderNo,
+  getShipmentPlanSource,
+  getSalesOrderSource,
+  getItemSource,
+} from "@/lib/api/shipping";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "instruction_no", label: "출하지시번호" },
+  { key: "ship_date", label: "출하일자" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "transport_company", label: "운송업체" },
+  { key: "vehicle_no", label: "차량번호" },
+  { key: "driver_name", label: "기사명" },
+  { key: "status", label: "상태" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "qty", label: "수량" },
+  { key: "source_type", label: "소스" },
+  { key: "remark", label: "비고" },
+];
+
+type DataSourceType = "shipmentPlan" | "salesOrder" | "itemInfo";
+
+const STATUS_OPTIONS = [
+  { value: "all", label: "전체" },
+  { value: "READY", label: "준비중" },
+  { value: "IN_PROGRESS", label: "진행중" },
+  { value: "COMPLETED", label: "완료" },
+];
+
+const getStatusLabel = (s: string) => STATUS_OPTIONS.find(o => o.value === s)?.label || s;
+
+const getStatusColor = (s: string) => {
+  switch (s) {
+    case "READY": return "bg-warning/10 text-warning";
+    case "IN_PROGRESS": return "bg-primary/10 text-primary";
+    case "COMPLETED": return "bg-success/10 text-success";
+    default: return "bg-muted text-muted-foreground";
+  }
+};
+
+const getSourceBadge = (s: string) => {
+  switch (s) {
+    case "shipmentPlan": return { label: "출하계획", cls: "bg-primary/10 text-primary" };
+    case "salesOrder": return { label: "수주", cls: "bg-success/10 text-success" };
+    case "itemInfo": return { label: "품목", cls: "bg-secondary text-secondary-foreground" };
+    default: return { label: s, cls: "bg-muted text-muted-foreground" };
+  }
+};
+
+interface SelectedItem {
+  id: string | number;
+  itemCode: string;
+  itemName: string;
+  spec: string;
+  material: string;
+  customer: string;
+  planQty: number;
+  orderQty: number;
+  sourceType: DataSourceType;
+  shipmentPlanId?: number;
+  salesOrderId?: number;
+  detailId?: string;
+  partnerCode?: string;
+}
+
+export default function ShippingOrderPage() {
+  const ts = useTableSettings("c16-shipping-order", "shipment_instruction", GRID_COLUMNS);
+  const [orders, setOrders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [checkedIds, setCheckedIds] = useState<number[]>([]);
+  const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 엑셀 업로드
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editId, setEditId] = useState<number | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  // 모달 폼
+  const [formOrderNumber, setFormOrderNumber] = useState("");
+  const [formOrderDate, setFormOrderDate] = useState("");
+  const [formCustomer, setFormCustomer] = useState("");
+  const [formPartnerId, setFormPartnerId] = useState("");
+  const [formStatus, setFormStatus] = useState("READY");
+  const [formCarrier, setFormCarrier] = useState("");
+  const [formVehicle, setFormVehicle] = useState("");
+  const [formDriver, setFormDriver] = useState("");
+  const [formDriverPhone, setFormDriverPhone] = useState("");
+  const [formArrival, setFormArrival] = useState("");
+  const [formAddress, setFormAddress] = useState("");
+  const [formMemo, setFormMemo] = useState("");
+  const [isTransportCollapsed, setIsTransportCollapsed] = useState(false);
+
+  // 모달 왼쪽 패널
+  const [dataSource, setDataSource] = useState<DataSourceType>("shipmentPlan");
+  const [sourceKeyword, setSourceKeyword] = useState("");
+  const [sourceData, setSourceData] = useState<any[]>([]);
+  const [sourceLoading, setSourceLoading] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<SelectedItem[]>([]);
+  const [sourcePage, setSourcePage] = useState(1);
+  const [sourcePageSize, setSourcePageSize] = useState(20);
+  const [sourceTotalCount, setSourceTotalCount] = useState(0);
+
+
+  // 데이터 조회
+  const fetchOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: any = {};
+      for (const f of searchFilters) {
+        if (f.columnName === "ship_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split(",");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status") {
+          params.status = f.value;
+        } else if (f.columnName === "customer_name") {
+          params.customer = f.value;
+        } else {
+          params.keyword = f.value;
+        }
+      }
+
+      const result = await getShippingOrderList(params);
+      if (result.success) setOrders(result.data || []);
+    } catch (err) {
+      console.error("출하지시 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  // 소스 데이터 조회
+  const fetchSourceData = useCallback(async (pageOverride?: number) => {
+    setSourceLoading(true);
+    try {
+      const currentPage = pageOverride ?? sourcePage;
+      const params: any = { page: currentPage, pageSize: sourcePageSize };
+      if (sourceKeyword.trim()) params.keyword = sourceKeyword.trim();
+
+      let result;
+      switch (dataSource) {
+        case "shipmentPlan":
+          result = await getShipmentPlanSource(params);
+          break;
+        case "salesOrder":
+          result = await getSalesOrderSource(params);
+          break;
+        case "itemInfo":
+          result = await getItemSource(params);
+          break;
+      }
+      if (result?.success) {
+        setSourceData(result.data || []);
+        setSourceTotalCount(result.totalCount || 0);
+      }
+    } catch (err) {
+      console.error("소스 데이터 조회 실패:", err);
+    } finally {
+      setSourceLoading(false);
+    }
+  }, [dataSource, sourceKeyword, sourcePage, sourcePageSize]);
+
+  useEffect(() => {
+    if (isModalOpen) {
+      setSourcePage(1);
+      fetchSourceData(1);
+    }
+  }, [isModalOpen, dataSource]);
+
+  const handleDeleteSelected = async () => {
+    if (checkedIds.length === 0) return;
+    if (!confirm(`선택한 ${checkedIds.length}개의 출하지시를 삭제하시겠습니까?`)) return;
+    try {
+      const result = await deleteShippingOrders(checkedIds);
+      if (result.success) {
+        setCheckedIds([]);
+        fetchOrders();
+        alert("삭제되었어요.");
+      }
+    } catch (err: any) {
+      alert(err.message || "삭제 실패");
+    }
+  };
+
+  // 모달 열기
+  const openModal = (order?: any) => {
+    if (order) {
+      setIsEditMode(true);
+      setEditId(order.id);
+      setFormOrderNumber(order.instruction_no || "");
+      setFormOrderDate(order.instruction_date ? order.instruction_date.split("T")[0] : "");
+      setFormCustomer(order.customer_name || "");
+      setFormPartnerId(order.partner_id || "");
+      setFormStatus(order.status || "READY");
+      setFormCarrier(order.carrier_name || "");
+      setFormVehicle(order.vehicle_no || "");
+      setFormDriver(order.driver_name || "");
+      setFormDriverPhone(order.driver_contact || "");
+      setFormArrival(order.arrival_time ? new Date(order.arrival_time).toLocaleString("sv-SE", { timeZone: "Asia/Seoul" }).replace(" ", "T").slice(0, 16) : "");
+      setFormAddress(order.delivery_address || "");
+      setFormMemo(order.memo || "");
+
+      const items = order.items || [];
+      setSelectedItems(items.filter((it: any) => it.id).map((it: any) => {
+        const srcType = it.source_type || "shipmentPlan";
+        let sourceId: string | number = it.id;
+        if (srcType === "shipmentPlan" && it.shipment_plan_id) sourceId = it.shipment_plan_id;
+        else if (srcType === "salesOrder" && it.detail_id) sourceId = it.detail_id;
+        else if (srcType === "itemInfo") sourceId = it.item_code || "";
+
+        return {
+          id: sourceId,
+          itemCode: it.item_code || "",
+          itemName: it.item_name || "",
+          spec: it.spec || "",
+          material: it.material || "",
+          customer: order.customer_name || "",
+          planQty: Number(it.plan_qty || 0),
+          orderQty: Number(it.order_qty || 0),
+          sourceType: srcType,
+          shipmentPlanId: it.shipment_plan_id,
+          salesOrderId: it.sales_order_id,
+          detailId: it.detail_id,
+          partnerCode: order.partner_id,
+        };
+      }));
+    } else {
+      setIsEditMode(false);
+      setEditId(null);
+      setFormOrderNumber("불러오는 중...");
+      setFormOrderDate(new Date().toISOString().split("T")[0]);
+      previewShippingOrderNo().then(r => {
+        if (r.success) setFormOrderNumber(r.instructionNo);
+        else setFormOrderNumber("(자동생성)");
+      }).catch(() => setFormOrderNumber("(자동생성)"));
+      setFormCustomer("");
+      setFormPartnerId("");
+      setFormStatus("READY");
+      setFormCarrier("");
+      setFormVehicle("");
+      setFormDriver("");
+      setFormDriverPhone("");
+      setFormArrival("");
+      setFormAddress("");
+      setFormMemo("");
+      setSelectedItems([]);
+    }
+    setDataSource("shipmentPlan");
+    setSourceKeyword("");
+    setSourceData([]);
+    setIsTransportCollapsed(false);
+    setIsModalOpen(true);
+  };
+
+  // 소스 아이템 선택 토글
+  const toggleSourceItem = (item: any) => {
+    const key = dataSource === "shipmentPlan" ? item.id
+      : dataSource === "salesOrder" ? item.id
+      : item.item_code;
+
+    const exists = selectedItems.findIndex(s => {
+      if (s.sourceType === dataSource) {
+        if (dataSource === "itemInfo") return s.itemCode === key;
+        return String(s.id) === String(key);
+      }
+      if (dataSource === "shipmentPlan" && s.shipmentPlanId) return String(s.shipmentPlanId) === String(item.id);
+      if (dataSource === "salesOrder" && s.detailId) return String(s.detailId) === String(item.id);
+      return false;
+    });
+
+    if (exists > -1) {
+      setSelectedItems(prev => prev.filter((_, i) => i !== exists));
+    } else {
+      const newItem: SelectedItem = {
+        id: key,
+        itemCode: item.item_code || "",
+        itemName: item.item_name || "",
+        spec: item.spec || "",
+        material: item.material || "",
+        customer: item.customer_name || "",
+        planQty: Number(item.plan_qty || item.qty || item.balance_qty || 0),
+        orderQty: Number(item.plan_qty || item.balance_qty || item.qty || 1),
+        sourceType: dataSource,
+        shipmentPlanId: dataSource === "shipmentPlan" ? item.id : undefined,
+        salesOrderId: dataSource === "salesOrder" ? (item.master_id || undefined) : undefined,
+        detailId: dataSource === "salesOrder" ? item.id : (dataSource === "shipmentPlan" ? item.detail_id : undefined),
+        partnerCode: item.partner_code || "",
+      };
+      setSelectedItems(prev => [...prev, newItem]);
+
+      if (!formCustomer && item.customer_name) {
+        setFormCustomer(item.customer_name);
+        setFormPartnerId(item.partner_code || "");
+      }
+    }
+  };
+
+  const removeSelectedItem = (idx: number) => {
+    setSelectedItems(prev => prev.filter((_, i) => i !== idx));
+  };
+
+  const updateOrderQty = (idx: number, val: number) => {
+    setSelectedItems(prev => prev.map((item, i) => i === idx ? { ...item, orderQty: val } : item));
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (!formOrderDate) { alert("출하지시일을 입력해주세요."); return; }
+    if (selectedItems.length === 0) { alert("품목을 선택해주세요."); return; }
+
+    setSaving(true);
+    try {
+      const payload = {
+        id: isEditMode ? editId : undefined,
+        instructionDate: formOrderDate,
+        partnerId: formPartnerId || formCustomer,
+        status: formStatus,
+        memo: formMemo,
+        carrierName: formCarrier,
+        vehicleNo: formVehicle,
+        driverName: formDriver,
+        driverContact: formDriverPhone,
+        arrivalTime: formArrival ? `${formArrival}+09:00` : null,
+        deliveryAddress: formAddress,
+        items: selectedItems.map(item => ({
+          itemCode: item.itemCode,
+          itemName: item.itemName,
+          spec: item.spec,
+          material: item.material,
+          orderQty: item.orderQty,
+          planQty: item.orderQty,
+          shipQty: 0,
+          sourceType: item.sourceType,
+          shipmentPlanId: item.shipmentPlanId,
+          salesOrderId: item.salesOrderId,
+          detailId: item.detailId,
+        })),
+      };
+
+      const result = await saveShippingOrder(payload);
+      if (result.success) {
+        setIsModalOpen(false);
+        fetchOrders();
+        alert(isEditMode ? "출하지시가 수정되었어요." : "출하지시가 등록되었어요.");
+      } else {
+        alert(result.message || "저장 실패");
+      }
+    } catch (err: any) {
+      alert(err.message || "저장 중 오류 발생");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const formatDate = (d: string) => d ? d.split("T")[0] : "-";
+
+  // 출하지시 데이터를 플랫한 행 목록으로 변환 (EDataTable용)
+  const flattenedOrders = useMemo(() => {
+    const rows: any[] = [];
+    for (const order of orders) {
+      const items = Array.isArray(order.items) ? order.items.filter((it: any) => it.id) : [];
+      if (items.length === 0) {
+        rows.push({
+          _rowId: String(order.id),
+          _orderId: order.id,
+          _order: order,
+          instruction_no: order.instruction_no,
+          ship_date: formatDate(order.instruction_date),
+          customer_name: order.customer_name || "-",
+          transport_company: order.carrier_name || "-",
+          vehicle_no: order.vehicle_no || "-",
+          driver_name: order.driver_name || "-",
+          status: order.status,
+          item_code: "-",
+          item_name: "-",
+          qty: 0,
+          source_type: "-",
+          remark: order.memo || "-",
+        });
+      } else {
+        items.forEach((item: any, idx: number) => {
+          rows.push({
+            _rowId: `${order.id}-${item.id}`,
+            _orderId: order.id,
+            _order: order,
+            instruction_no: idx === 0 ? order.instruction_no : "",
+            ship_date: idx === 0 ? formatDate(order.instruction_date) : "",
+            customer_name: idx === 0 ? (order.customer_name || "-") : "",
+            transport_company: idx === 0 ? (order.carrier_name || "-") : "",
+            vehicle_no: idx === 0 ? (order.vehicle_no || "-") : "",
+            driver_name: idx === 0 ? (order.driver_name || "-") : "",
+            status: idx === 0 ? order.status : "",
+            item_code: item.item_code || "",
+            item_name: item.item_name || "",
+            qty: Number(item.order_qty || 0),
+            source_type: item.source_type || "",
+            remark: idx === 0 ? (order.memo || "-") : "",
+          });
+        });
+      }
+    }
+    return rows;
+  }, [orders]);
+
+  // checkedIds를 order.id 기준으로 관리하므로 _orderId로 매핑
+  const flatCheckedRowIds = useMemo(() => {
+    return flattenedOrders
+      .filter((r) => checkedIds.includes(r._orderId))
+      .map((r) => r._rowId);
+  }, [flattenedOrders, checkedIds]);
+
+  const handleFlatCheckedChange = useCallback((rowIds: string[]) => {
+    const orderIds = new Set<number>();
+    for (const rowId of rowIds) {
+      const row = flattenedOrders.find((r) => r._rowId === rowId);
+      if (row) orderIds.add(row._orderId);
+    }
+    setCheckedIds(Array.from(orderIds));
+  }, [flattenedOrders]);
+
+  const dataSourceTitle: Record<DataSourceType, string> = {
+    shipmentPlan: "출하계획 목록",
+    salesOrder: "수주정보 목록",
+    itemInfo: "품목정보 목록",
+  };
+
+  return (
+    <div className="flex flex-col h-full p-4 gap-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>영업관리</span>
+        <span className="text-muted-foreground/40">/</span>
+        <span className="font-semibold text-foreground">출하지시</span>
+      </nav>
+
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ts.tableName}
+        filterId="c16-shipping-order"
+        onFilterChange={setSearchFilters}
+        dataCount={orders.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between flex-wrap gap-3 shrink-0">
+        <div className="flex items-center gap-2">
+          <h2 className="text-[15px] font-bold text-foreground">출하지시 관리</h2>
+          <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+            {orders.length}건
+          </span>
+          {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5" />
+            엑셀 업로드
+          </Button>
+          <Button size="sm" onClick={() => openModal()}>
+            <Plus className="w-3.5 h-3.5" />
+            출하지시 등록
+          </Button>
+          <div className="w-px h-5 bg-border" />
+          <Button
+            variant="outline"
+            size="sm"
+            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+            disabled={checkedIds.length === 0}
+            onClick={handleDeleteSelected}
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+            선택삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
+          </Button>
+          <div className="w-px h-5 bg-border" />
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 메인 테이블 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card flex flex-col">
+        <EDataTable
+          columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+            key: col.key,
+            label: col.label,
+            align: col.key === "qty" ? "right" : col.key === "status" || col.key === "source_type" || col.key === "ship_date" ? "center" : undefined,
+            formatNumber: col.key === "qty",
+            sortable: false,
+            filterable: false,
+            render: col.key === "status"
+              ? (val: any) => val ? (
+                  <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(val))}>
+                    {getStatusLabel(val)}
+                  </span>
+                ) : null
+              : col.key === "source_type"
+              ? (val: any) => {
+                  if (!val || val === "-") return <span>-</span>;
+                  const b = getSourceBadge(val);
+                  return <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", b.cls)}>{b.label}</span>;
+                }
+              : undefined,
+          }))}
+          data={ts.groupData(flattenedOrders)}
+          rowKey={(row) => row._rowId}
+          loading={loading}
+          emptyMessage="등록된 출하지시가 없어요"
+          showCheckbox
+          checkedIds={flatCheckedRowIds}
+          onCheckedChange={handleFlatCheckedChange}
+          selectedId={selectedOrderId != null ? String(selectedOrderId) : null}
+          onRowClick={(row) => setSelectedOrderId(row._orderId)}
+          onRowDoubleClick={(row) => openModal(row._order)}
+          showPagination
+          draggableColumns={false}
+          columnOrderKey="c16-shipping-order"
+        />
+      </div>
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[90vw] w-[1400px] h-[90vh] flex flex-col overflow-hidden p-0 gap-0">
+          <DialogHeader className="px-4 py-3 border-b shrink-0">
+            <DialogTitle className="text-[15px] font-bold">
+              {isEditMode ? "출하지시 수정" : "출하지시 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-xs text-muted-foreground mt-0.5">
+              {isEditMode ? "출하지시 정보를 수정해요." : "왼쪽에서 데이터를 선택하고 오른쪽에서 출하지시 정보를 입력해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-hidden">
+            <ResizablePanelGroup direction="horizontal">
+              {/* 왼쪽: 데이터 소스 */}
+              <ResizablePanel defaultSize={55} minSize={30}>
+                <div className="flex flex-col h-full">
+                  {/* 소스 검색 헤더 */}
+                  <div className="px-4 py-2 border-b bg-muted/50 flex flex-wrap items-center gap-2 shrink-0">
+                    <Select value={dataSource} onValueChange={(v) => setDataSource(v as DataSourceType)}>
+                      <SelectTrigger className="w-[120px] h-9 text-xs"><SelectValue /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="shipmentPlan">출하계획</SelectItem>
+                        <SelectItem value="salesOrder">수주정보</SelectItem>
+                        <SelectItem value="itemInfo">품목정보</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <Input
+                      placeholder="품번, 품명 검색"
+                      className="flex-1 h-9 text-xs min-w-[120px]"
+                      value={sourceKeyword}
+                      onChange={(e) => setSourceKeyword(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") { setSourcePage(1); fetchSourceData(1); }
+                      }}
+                    />
+                    <Button
+                      size="sm"
+                      className="h-8 text-xs"
+                      onClick={() => { setSourcePage(1); fetchSourceData(1); }}
+                      disabled={sourceLoading}
+                    >
+                      {sourceLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Search className="w-3 h-3" />}
+                      <span className="ml-1">조회</span>
+                    </Button>
+                  </div>
+
+                  {/* 소스 서브 헤더 */}
+                  <div className="px-3 py-1.5 flex items-center gap-2 border-b bg-muted/30 shrink-0">
+                    <span className="text-[13px] font-bold text-foreground">{dataSourceTitle[dataSource]}</span>
+                    <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                      선택 {selectedItems.length}개
+                    </span>
+                  </div>
+
+                  {/* 소스 테이블 */}
+                  <div className="flex-1 overflow-auto">
+                    {sourceLoading ? (
+                      <div className="flex items-center justify-center py-12">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : sourceData.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                        <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
+                          <Search className="w-5 h-5 text-muted-foreground/30" />
+                        </div>
+                        <p className="text-sm">조회 버튼을 눌러 데이터를 불러와주세요</p>
+                      </div>
+                    ) : (
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">선택</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                            <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처</TableHead>
+                            <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                            {dataSource === "shipmentPlan" && <TableHead className="w-[70px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {sourceData.map((item: any, idx: number) => {
+                            const itemId = dataSource === "itemInfo" ? item.item_code : item.id;
+                            const isSelected = selectedItems.some(s => {
+                              if (s.sourceType === dataSource) {
+                                if (dataSource === "itemInfo") return s.itemCode === itemId;
+                                return String(s.id) === String(itemId);
+                              }
+                              if (dataSource === "shipmentPlan" && s.shipmentPlanId) return String(s.shipmentPlanId) === String(item.id);
+                              if (dataSource === "salesOrder" && s.detailId) return String(s.detailId) === String(item.id);
+                              return false;
+                            });
+                            return (
+                              <TableRow
+                                key={`${dataSource}-${itemId}-${idx}`}
+                                className={cn("cursor-pointer transition-colors", isSelected && "bg-primary/5")}
+                                onClick={() => toggleSourceItem(item)}
+                              >
+                                <TableCell className="text-center" onClick={e => e.stopPropagation()}>
+                                  <Checkbox checked={isSelected} onCheckedChange={() => toggleSourceItem(item)} />
+                                </TableCell>
+                                <TableCell className="text-[13px]">{item.item_code || "-"}</TableCell>
+                                <TableCell className="text-sm font-medium">{item.item_name || "-"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{item.spec || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{item.customer_name || "-"}</TableCell>
+                                <TableCell className="text-right text-[13px]">
+                                  {Number(item.plan_qty || item.qty || item.balance_qty || 0).toLocaleString()}
+                                </TableCell>
+                                {dataSource === "shipmentPlan" && (
+                                  <TableCell className="text-center">
+                                    <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", getStatusColor(item.status))}>
+                                      {getStatusLabel(item.status)}
+                                    </span>
+                                  </TableCell>
+                                )}
+                              </TableRow>
+                            );
+                          })}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+
+                  {/* 페이징 */}
+                  {sourceTotalCount > 0 && (
+                    <div className="px-3 py-1.5 border-t bg-muted/30 flex items-center justify-between shrink-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-muted-foreground text-[11px]">표시:</span>
+                        <Input
+                          type="number"
+                          min={1}
+                          max={500}
+                          value={sourcePageSize}
+                          onChange={(e) => {
+                            const v = parseInt(e.target.value, 10);
+                            if (v > 0) { setSourcePageSize(v); setSourcePage(1); fetchSourceData(1); }
+                          }}
+                          className="h-7 w-[60px] text-center text-[11px]"
+                        />
+                        <span className="text-muted-foreground text-[11px]">총 {sourceTotalCount}건</span>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => { setSourcePage(1); fetchSourceData(1); }}>
+                          <ChevronsLeft className="w-3.5 h-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => { const p = sourcePage - 1; setSourcePage(p); fetchSourceData(p); }}>
+                          <ChevronLeft className="w-3.5 h-3.5" />
+                        </Button>
+                        <span className="text-xs font-medium px-2">
+                          {sourcePage} / {Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize))}
+                        </span>
+                        <Button variant="outline" size="icon" className="h-7 w-7"
+                          disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                          onClick={() => { const p = sourcePage + 1; setSourcePage(p); fetchSourceData(p); }}>
+                          <ChevronRight className="w-3.5 h-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7"
+                          disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                          onClick={() => { const p = Math.ceil(sourceTotalCount / sourcePageSize); setSourcePage(p); fetchSourceData(p); }}>
+                          <ChevronsRight className="w-3.5 h-3.5" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle onPointerDown={(e) => e.stopPropagation()} />
+
+              {/* 오른쪽: 폼 */}
+              <ResizablePanel defaultSize={45} minSize={30}>
+                <div className="flex flex-col h-full overflow-auto p-4 gap-4">
+                  {/* 기본 정보 */}
+                  <div className="border rounded-lg p-4 shrink-0">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-3">기본 정보</p>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">출하지시번호</Label>
+                        <Input value={formOrderNumber} readOnly className="h-9 bg-muted/50 text-muted-foreground" />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">
+                          출하지시일 <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                          type="date"
+                          className="h-9"
+                          value={formOrderDate}
+                          onChange={(e) => setFormOrderDate(e.target.value)}
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">거래처</Label>
+                        <Input value={formCustomer} readOnly placeholder="품목 선택 시 자동" className="h-9 bg-muted/50" />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+                        <Select value={formStatus} onValueChange={setFormStatus}>
+                          <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="READY">준비중</SelectItem>
+                            <SelectItem value="IN_PROGRESS">진행중</SelectItem>
+                            <SelectItem value="COMPLETED">완료</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 운송 정보 */}
+                  <div className="bg-muted/50 border rounded-lg overflow-hidden shrink-0">
+                    <button
+                      className="w-full px-4 py-2.5 flex items-center justify-between text-left"
+                      onClick={() => setIsTransportCollapsed(!isTransportCollapsed)}
+                    >
+                      <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2">
+                        운송 정보 <span className="text-[10px] font-normal">(선택사항)</span>
+                      </p>
+                      {isTransportCollapsed
+                        ? <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />
+                        : <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+                      }
+                    </button>
+                    {!isTransportCollapsed && (
+                      <div className="px-4 pb-3 grid grid-cols-3 gap-3">
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">운송업체</Label>
+                          <Input value={formCarrier} onChange={(e) => setFormCarrier(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">차량번호</Label>
+                          <Input value={formVehicle} onChange={(e) => setFormVehicle(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">기사명</Label>
+                          <Input value={formDriver} onChange={(e) => setFormDriver(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">연락처</Label>
+                          <Input value={formDriverPhone} onChange={(e) => setFormDriverPhone(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">도착예정일시</Label>
+                          <Input
+                            type="datetime-local"
+                            className="h-9"
+                            value={formArrival}
+                            onChange={(e) => setFormArrival(e.target.value)}
+                          />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">배송지</Label>
+                          <Input value={formAddress} onChange={(e) => setFormAddress(e.target.value)} className="h-9" />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 선택된 품목 */}
+                  <div className="border rounded-lg p-4 flex-1 flex flex-col min-h-[200px]">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-2 flex items-center gap-2">
+                      선택된 품목
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {selectedItems.length}
+                      </span>
+                    </p>
+                    <div className="flex-1 overflow-auto min-h-0">
+                      {selectedItems.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground border-2 border-dashed rounded-lg gap-2">
+                          <div className="w-10 h-10 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
+                            <Inbox className="w-4 h-4 text-muted-foreground/30" />
+                          </div>
+                          <p className="text-sm">왼쪽에서 데이터를 선택해주세요</p>
+                        </div>
+                      ) : (
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">소스</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                              <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[90px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하수량</TableHead>
+                              <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획수량</TableHead>
+                              <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">삭제</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {selectedItems.map((item, idx) => {
+                              const b = getSourceBadge(item.sourceType);
+                              return (
+                                <TableRow key={`${item.sourceType}-${item.id}-${idx}`}>
+                                  <TableCell className="text-center">
+                                    <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", b.cls)}>
+                                      {b.label.charAt(0)}
+                                    </span>
+                                  </TableCell>
+                                  <TableCell className="text-[13px]">{item.itemCode}</TableCell>
+                                  <TableCell className="text-sm font-medium">{item.itemName}</TableCell>
+                                  <TableCell className="text-center">
+                                    <Input
+                                      type="number"
+                                      value={item.orderQty}
+                                      onChange={(e) => updateOrderQty(idx, parseInt(e.target.value) || 0)}
+                                      min={1}
+                                      className="h-7 w-[70px] text-xs text-right mx-auto"
+                                    />
+                                  </TableCell>
+                                  <TableCell className="text-right text-[13px]">
+                                    {item.planQty ? item.planQty.toLocaleString() : "-"}
+                                  </TableCell>
+                                  <TableCell className="text-center">
+                                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => removeSelectedItem(idx)}>
+                                      <X className="w-3.5 h-3.5 text-destructive" />
+                                    </Button>
+                                  </TableCell>
+                                </TableRow>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* 메모 */}
+                  <div className="border rounded-lg p-4 shrink-0">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-2">메모</p>
+                    <Textarea
+                      value={formMemo}
+                      onChange={(e) => setFormMemo(e.target.value)}
+                      placeholder="출하지시 관련 메모를 입력해주세요"
+                      rows={2}
+                      className="resize-y"
+                    />
+                  </div>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+
+          {/* 모달 하단 버튼 */}
+          <div className="flex items-center justify-end gap-2 px-4 py-3 border-t shrink-0">
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 모달 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName="shipping-order"
+        onSuccess={() => { fetchOrders(); }}
+      />
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_30/sales/shipping-plan/page.tsx b/frontend/app/(main)/COMPANY_30/sales/shipping-plan/page.tsx
new file mode 100644
index 00000000..747ac23d
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_30/sales/shipping-plan/page.tsx
@@ -0,0 +1,454 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { X, Save, Loader2, Inbox, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  getShipmentPlanList,
+  updateShipmentPlan,
+  type ShipmentPlanListItem,
+} from "@/lib/api/shipping";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "order_no", label: "수주번호" },
+  { key: "due_date", label: "납기일" },
+  { key: "customer_name", label: "거래처" },
+  { key: "part_code", label: "품목코드" },
+  { key: "part_name", label: "품목명" },
+  { key: "order_qty", label: "수주수량" },
+  { key: "plan_qty", label: "계획수량" },
+  { key: "plan_date", label: "계획일" },
+  { key: "status", label: "상태" },
+];
+
+const STATUS_OPTIONS = [
+  { value: "all", label: "전체" },
+  { value: "READY", label: "준비" },
+  { value: "CONFIRMED", label: "확정" },
+  { value: "SHIPPING", label: "출하중" },
+  { value: "COMPLETED", label: "완료" },
+  { value: "CANCEL_REQUEST", label: "취소요청" },
+  { value: "CANCELLED", label: "취소완료" },
+];
+
+const getStatusLabel = (status: string) => {
+  const found = STATUS_OPTIONS.find(o => o.value === status);
+  return found?.label || status;
+};
+
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case "READY": return "bg-primary/10 text-primary";
+    case "CONFIRMED": return "bg-secondary text-secondary-foreground";
+    case "SHIPPING": return "bg-warning/10 text-warning";
+    case "COMPLETED": return "bg-success/10 text-success";
+    case "CANCEL_REQUEST": return "bg-destructive/10 text-destructive";
+    case "CANCELLED": return "bg-muted text-muted-foreground";
+    default: return "bg-muted text-muted-foreground";
+  }
+};
+
+export default function ShippingPlanPage() {
+  const ts = useTableSettings("c16-shipping-plan", "shipment_plan", GRID_COLUMNS);
+  const [data, setData] = useState<ShipmentPlanListItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const [checkedIds, setCheckedIds] = useState<number[]>([]);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 상세 패널 편집
+  const [editPlanQty, setEditPlanQty] = useState("");
+  const [editPlanDate, setEditPlanDate] = useState("");
+  const [editMemo, setEditMemo] = useState("");
+  const [isDetailChanged, setIsDetailChanged] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+
+  // 데이터 조회
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: any = {};
+      for (const f of searchFilters) {
+        if (f.columnName === "plan_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split(",");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status") {
+          params.status = f.value;
+        } else if (f.columnName === "customer_name") {
+          params.customer = f.value;
+        } else {
+          params.keyword = f.value;
+        }
+      }
+
+      const result = await getShipmentPlanList(params);
+      if (result.success) {
+        setData(result.data || []);
+      }
+    } catch (err) {
+      console.error("출하계획 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  // searchFilters 변경 시 자동 조회
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const selectedPlan = useMemo(() => data.find(p => p.id === selectedId), [data, selectedId]);
+
+  const groupedData = useMemo(() => {
+    const grouped = ts.groupData(data);
+    const orderMap = new Map<string, any[]>();
+    const orderKeys: string[] = [];
+    grouped.forEach(plan => {
+      const key = (plan as any)._isGroupSummary ? `_summary_${orderKeys.length}` : (plan.order_no || `_no_order_${plan.id}`);
+      if (!orderMap.has(key)) {
+        orderMap.set(key, []);
+        orderKeys.push(key);
+      }
+      orderMap.get(key)!.push(plan);
+    });
+    return orderKeys.map(key => ({
+      orderNo: key,
+      plans: orderMap.get(key)!,
+    }));
+  }, [data, ts.groupData]);
+
+  const handleRowClick = (plan: ShipmentPlanListItem) => {
+    if (isDetailChanged && selectedId !== plan.id) {
+      if (!confirm("변경사항이 있습니다. 저장하지 않고 이동하시겠습니까?")) return;
+    }
+    setSelectedId(plan.id);
+    setEditPlanQty(String(Number(plan.plan_qty)));
+    setEditPlanDate(plan.plan_date ? plan.plan_date.split("T")[0] : "");
+    setEditMemo(plan.memo || "");
+    setIsDetailChanged(false);
+  };
+
+  const handleCheckAll = (checked: boolean) => {
+    if (checked) {
+      setCheckedIds(data.filter(p => p.status !== "CANCELLED").map(p => p.id));
+    } else {
+      setCheckedIds([]);
+    }
+  };
+
+  const handleSaveDetail = async () => {
+    if (!selectedId || !selectedPlan) return;
+
+    const qty = Number(editPlanQty);
+    if (qty <= 0) {
+      alert("계획수량은 0보다 커야 해요.");
+      return;
+    }
+    if (!editPlanDate) {
+      alert("출하계획일을 입력해주세요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const result = await updateShipmentPlan(selectedId, {
+        planQty: qty,
+        planDate: editPlanDate,
+        memo: editMemo,
+      });
+      if (result.success) {
+        setIsDetailChanged(false);
+        alert("저장되었어요.");
+        fetchData();
+      } else {
+        alert(result.message || "저장 실패");
+      }
+    } catch (err: any) {
+      alert(err.message || "저장 중 오류 발생");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const formatDate = (dateStr: string) => {
+    if (!dateStr) return "-";
+    return dateStr.split("T")[0];
+  };
+
+  const formatNumber = (val: string | number) => {
+    const num = Number(val);
+    return isNaN(num) ? "0" : num.toLocaleString();
+  };
+
+  return (
+    <div className="flex flex-col h-full p-4 gap-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>영업관리</span>
+        <span className="text-muted-foreground/40">/</span>
+        <span className="font-semibold text-foreground">출하계획</span>
+      </nav>
+
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName="shipment_plan"
+        filterId="c16-shipping-plan"
+        onFilterChange={setSearchFilters}
+        dataCount={data.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 마스터-디테일 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 출하계획 목록 */}
+          <ResizablePanel defaultSize={60} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-bold text-foreground">출하계획 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {data.length}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {/* 테이블 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={[
+                    { key: "order_no", label: "수주번호", render: (val: any) => <span className="font-medium text-sm">{val || "-"}</span> },
+                    { key: "due_date", label: "납기일", align: "center" as const, render: (val: any) => <span className="text-sm">{formatDate(val)}</span> },
+                    { key: "customer_name", label: "거래처", render: (val: any) => <span className="text-sm">{val || "-"}</span> },
+                    { key: "part_code", label: "품목코드", render: (val: any) => <span className="text-muted-foreground text-[13px]">{val || "-"}</span> },
+                    { key: "part_name", label: "품목명", render: (val: any) => <span className="font-medium text-sm">{val || "-"}</span> },
+                    { key: "order_qty", label: "수주수량", align: "right" as const, formatNumber: true },
+                    { key: "plan_qty", label: "계획수량", align: "right" as const, render: (val: any) => <span className="font-semibold text-primary text-sm">{formatNumber(val)}</span> },
+                    { key: "plan_date", label: "계획일", align: "center" as const, render: (val: any) => <span className="text-sm">{formatDate(val)}</span> },
+                    { key: "status", label: "상태", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(val))}>{getStatusLabel(val)}</span> },
+                  ] as EDataTableColumn<ShipmentPlanListItem>[]}
+                  data={data}
+                  rowKey={(row) => String(row.id)}
+                  loading={loading}
+                  emptyMessage="출하계획이 없어요"
+                  selectedId={selectedId !== null ? String(selectedId) : null}
+                  onSelect={(id) => {
+                    if (id) {
+                      const plan = data.find(p => String(p.id) === id);
+                      if (plan) handleRowClick(plan);
+                    }
+                  }}
+                  onRowClick={(row) => handleRowClick(row)}
+                  showCheckbox
+                  checkedIds={checkedIds.map(String)}
+                  onCheckedChange={(ids) => setCheckedIds(ids.map(Number))}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 상세 패널 */}
+          <ResizablePanel defaultSize={40} minSize={20}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-bold text-foreground">출하계획 상세</span>
+                  {selectedPlan && (
+                    <span className="text-[11px] font-mono text-muted-foreground">{selectedPlan.shipment_plan_no}</span>
+                  )}
+                </div>
+                {selectedPlan && (
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      size="sm"
+                      onClick={handleSaveDetail}
+                      disabled={!isDetailChanged || saving}
+                      variant={isDetailChanged ? "default" : "secondary"}
+                    >
+                      {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
+                      저장
+                    </Button>
+                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setSelectedId(null)}>
+                      <X className="w-3.5 h-3.5" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {/* 상세 컨텐츠 */}
+              {selectedPlan ? (
+                <div className="flex-1 overflow-auto p-4 space-y-4">
+                  {/* 기본 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">상태</p>
+                      <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium inline-block", getStatusColor(selectedPlan.status))}>
+                        {getStatusLabel(selectedPlan.status)}
+                      </span>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주번호</p>
+                      <p className="text-sm font-mono text-muted-foreground">{selectedPlan.order_no || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">거래처</p>
+                      <p className="text-sm font-medium text-foreground">{selectedPlan.customer_name || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">납기일</p>
+                      <p className="text-sm text-foreground">{formatDate(selectedPlan.due_date)}</p>
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 품목 정보 */}
+                  <div>
+                    <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-2">품목 정보</p>
+                    <div className="grid grid-cols-2 gap-3 bg-muted/30 border rounded-md p-3">
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">품목코드</p>
+                        <p className="text-sm font-mono text-muted-foreground">{selectedPlan.part_code || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">품목명</p>
+                        <p className="text-sm font-medium text-foreground">{selectedPlan.part_name || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">규격</p>
+                        <p className="text-sm text-foreground">{selectedPlan.spec || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">재질</p>
+                        <p className="text-sm text-foreground">{selectedPlan.material || "-"}</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 수량 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주수량</p>
+                      <p className="text-sm text-foreground">{formatNumber(selectedPlan.order_qty)}</p>
+                    </div>
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">계획수량</Label>
+                      <Input
+                        type="number"
+                        className="h-9"
+                        value={editPlanQty}
+                        onChange={(e) => { setEditPlanQty(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                      />
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">출하수량</p>
+                      <p className="text-sm text-foreground">{formatNumber(selectedPlan.shipped_qty)}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">잔여수량</p>
+                      <p className={cn(
+                        "font-semibold text-sm",
+                        (Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty)) > 0
+                          ? "text-destructive"
+                          : "text-success"
+                      )}>
+                        {formatNumber(Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty))}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 출하 정보 */}
+                  <div className="space-y-3">
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">출하계획일</Label>
+                      <Input
+                        type="date"
+                        className="h-9"
+                        value={editPlanDate}
+                        onChange={(e) => { setEditPlanDate(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                      />
+                    </div>
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">비고</Label>
+                      <Textarea
+                        className="min-h-[80px] resize-y text-sm"
+                        value={editMemo}
+                        onChange={(e) => { setEditMemo(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                        placeholder="비고를 입력해주세요"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 등록 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">등록자</p>
+                      <p className="text-sm text-foreground">{selectedPlan.created_by || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">등록일시</p>
+                      <p className="text-sm text-foreground">
+                        {selectedPlan.created_date ? new Date(selectedPlan.created_date).toLocaleString("ko-KR") : "-"}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex flex-col items-center justify-center h-full text-center p-8 text-muted-foreground">
+                  <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center mb-4">
+                    <Inbox className="w-6 h-6 text-muted-foreground/30" />
+                  </div>
+                  <p className="text-sm font-medium">좌측에서 출하계획을 선택해주세요</p>
+                  <p className="text-xs text-muted-foreground/60 mt-1">선택하면 상세 정보가 표시돼요</p>
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/design/change-management/page.tsx b/frontend/app/(main)/COMPANY_7/design/change-management/page.tsx
index 8879ba8a..39f06769 100644
--- a/frontend/app/(main)/COMPANY_7/design/change-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/design/change-management/page.tsx
@@ -18,7 +18,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -32,16 +31,8 @@ import {
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable";
-import {
-  Search,
-  RotateCcw,
   Plus,
   Save,
-  ClipboardList,
   Inbox,
   Pencil,
   FileText,
@@ -50,6 +41,7 @@ import {
   Paperclip,
   Upload,
   Loader2,
+  Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
@@ -62,6 +54,10 @@ import {
   createEcn,
   updateEcn,
 } from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 // --- Types ---
 type ChangeType = "설계오류" | "원가절감" | "고객요청" | "공정개선" | "법규대응";
@@ -119,65 +115,83 @@ interface EcnItem {
 const getChangeTypeStyle = (type: ChangeType) => {
   switch (type) {
     case "설계오류":
-      return "bg-rose-100 text-rose-800 border-rose-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "원가절감":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-success/10 text-success border-success/20";
     case "고객요청":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-info/10 text-info border-info/20";
     case "공정개선":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-warning/10 text-warning border-warning/20";
     case "법규대응":
-      return "bg-purple-100 text-purple-800 border-purple-200";
+      return "bg-primary/10 text-primary border-primary/20";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getEcrStatusStyle = (status: EcrStatus) => {
   switch (status) {
     case "요청접수":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-info/10 text-info border-info/20";
     case "영향도분석":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-warning/10 text-warning border-warning/20";
     case "ECN발행":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-success/10 text-success border-success/20";
     case "기각":
-      return "bg-slate-100 text-slate-800 border-slate-200";
+      return "bg-muted text-muted-foreground border-border";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getEcnStatusStyle = (status: EcnStatus) => {
   switch (status) {
     case "ECN발행":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-info/10 text-info border-info/20";
     case "도면변경":
-      return "bg-purple-100 text-purple-800 border-purple-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "통보완료":
-      return "bg-teal-100 text-teal-800 border-teal-200";
+      return "bg-warning/10 text-warning border-warning/20";
     case "적용완료":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-success/10 text-success border-success/20";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getImpactBadgeStyle = (impact: string) => {
   switch (impact) {
     case "BOM":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-info/10 text-info border-info/20";
     case "공정":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-warning/10 text-warning border-warning/20";
     case "금형":
-      return "bg-rose-100 text-rose-800 border-rose-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "검사기준":
-      return "bg-purple-100 text-purple-800 border-purple-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "구매":
     case "원가":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-success/10 text-success border-success/20";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getTimelineStatusStyle = (status: string) => {
+  switch (status) {
+    case "기각":
+      return "bg-muted text-muted-foreground border-border";
+    case "적용완료":
+    case "ECN발행":
+      return "bg-success/10 text-success border-success/20";
+    case "영향도분석":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "도면변경":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "통보완료":
+      return "bg-info/10 text-info border-info/20";
+    default:
+      return "bg-info/10 text-info border-info/20";
   }
 };
 
@@ -278,12 +292,12 @@ function Timeline({ history }: { history: EcrHistory[] }) {
                 className={cn(
                   "w-3 h-3 rounded-full border-2 mt-1.5 shrink-0",
                   isLast && isRejected
-                    ? "bg-rose-500 border-rose-300"
+                    ? "bg-destructive border-destructive/60"
                     : isLast && isCompleted
-                      ? "bg-emerald-500 border-emerald-300"
+                      ? "bg-success border-success/60"
                       : isLast
                         ? "bg-primary border-primary/50 ring-4 ring-primary/10"
-                        : "bg-emerald-500 border-emerald-300"
+                        : "bg-success border-success/60"
                 )}
               />
               {!isLast && (
@@ -295,19 +309,7 @@ function Timeline({ history }: { history: EcrHistory[] }) {
                 <span
                   className={cn(
                     "px-2 py-0.5 rounded-full text-[10px] font-medium border",
-                    h.status === "기각"
-                      ? "bg-slate-100 text-slate-800 border-slate-200"
-                      : h.status === "적용완료"
-                        ? "bg-emerald-100 text-emerald-800 border-emerald-200"
-                        : h.status === "ECN발행"
-                          ? "bg-emerald-100 text-emerald-800 border-emerald-200"
-                          : h.status === "영향도분석"
-                            ? "bg-amber-100 text-amber-800 border-amber-200"
-                            : h.status === "도면변경"
-                              ? "bg-purple-100 text-purple-800 border-purple-200"
-                              : h.status === "통보완료"
-                                ? "bg-teal-100 text-teal-800 border-teal-200"
-                                : "bg-blue-100 text-blue-800 border-blue-200"
+                    getTimelineStatusStyle(h.status)
                   )}
                 >
                   {h.status}
@@ -325,20 +327,45 @@ function Timeline({ history }: { history: EcrHistory[] }) {
   );
 }
 
+// --- Grid Columns ---
+const ECR_GRID_COLUMNS = [
+  { key: "request_no", label: "ECR번호" },
+  { key: "change_type", label: "변경유형" },
+  { key: "status", label: "상태" },
+  { key: "urgency", label: "긴급" },
+  { key: "target_name", label: "대상 품목/설비" },
+  { key: "drawing_no", label: "도면번호" },
+  { key: "req_dept", label: "요청부서" },
+  { key: "requester", label: "요청자" },
+  { key: "request_date", label: "요청일자" },
+  { key: "ecn_no", label: "관련 ECN" },
+];
+
+const ECN_GRID_COLUMNS = [
+  { key: "ecn_no", label: "ECN번호" },
+  { key: "status", label: "상태" },
+  { key: "target", label: "대상 품목/설비" },
+  { key: "drawing_after", label: "도면 (변경 후)" },
+  { key: "designer", label: "설계담당" },
+  { key: "ecn_date", label: "발행일자" },
+  { key: "apply_date", label: "적용일자" },
+  { key: "notify_depts", label: "통보 부서" },
+  { key: "ecr_id", label: "관련 ECR" },
+];
+
 // --- Main Component ---
 export default function DesignChangeManagementPage() {
+  const tsEcr = useTableSettings("c16-change-management-ecr", "dsn_design_request", ECR_GRID_COLUMNS);
+  const tsEcn = useTableSettings("c16-change-management-ecn", "dsn_ecn", ECN_GRID_COLUMNS);
   const [currentTab, setCurrentTab] = useState<TabType>("ecr");
   const [ecrData, setEcrData] = useState<EcrItem[]>([]);
   const [ecnData, setEcnData] = useState<EcnItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
 
-  // 검색 상태
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
-  const [searchStatus, setSearchStatus] = useState<string>("all");
-  const [searchChangeType, setSearchChangeType] = useState<string>("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // ECR 모달
   const [isEcrModalOpen, setIsEcrModalOpen] = useState(false);
@@ -356,13 +383,6 @@ export default function DesignChangeManagementPage() {
   const [rejectReason, setRejectReason] = useState("");
   const [rejectTargetId, setRejectTargetId] = useState("");
 
-  useEffect(() => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(today.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-  }, []);
 
   const fetchData = useCallback(async () => {
     setLoading(true);
@@ -379,7 +399,7 @@ export default function DesignChangeManagementPage() {
         setEcnData((ecnRes.data as any[]).map((r) => mapEcnFromApi(r, ecrList)));
       }
     } catch {
-      toast.error("데이터를 불러오는데 실패했습니다.");
+      toast.error("데이터를 불러오는데 실패했어요.");
     } finally {
       setLoading(false);
     }
@@ -389,39 +409,66 @@ export default function DesignChangeManagementPage() {
     fetchData();
   }, [fetchData]);
 
+  // snake_case → camelCase 매핑 (ECR)
+  const ecrFieldMap: Record<string, string> = {
+    request_no: "id",
+    request_date: "date",
+    change_type: "changeType",
+    target_name: "target",
+    drawing_no: "drawingNo",
+    req_dept: "reqDept",
+    ecn_no: "ecnNo",
+    apply_timing: "applyTiming",
+  };
+  // snake_case → camelCase 매핑 (ECN)
+  const ecnFieldMap: Record<string, string> = {
+    ecn_no: "id",
+    ecn_date: "date",
+    apply_date: "applyDate",
+    drawing_before: "drawingBefore",
+    drawing_after: "drawingAfter",
+    ecr_id: "ecrNo",
+    notify_depts: "notifyDepts",
+  };
+  const getFieldValue = (obj: any, colName: string, map: Record<string, string>): string => {
+    const key = map[colName] || colName;
+    const val = obj[key];
+    if (Array.isArray(val)) return val.join(",");
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
+  const applyFilters = (items: any[], map: Record<string, string>) => {
+    if (searchFilters.length === 0) return items;
+    return items.filter((item) => {
+      for (const f of searchFilters) {
+        const val = getFieldValue(item, f.columnName, map);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (val !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) return false;
+          if (to && val > to) return false;
+        }
+      }
+      return true;
+    });
+  };
+
   // --- Filtered Data ---
   const filteredEcr = useMemo(() => {
-    return ecrData
-      .filter((item) => {
-        if (searchDateFrom && item.date < searchDateFrom) return false;
-        if (searchDateTo && item.date > searchDateTo) return false;
-        if (searchStatus !== "all" && item.status !== searchStatus) return false;
-        if (searchChangeType !== "all" && item.changeType !== searchChangeType) return false;
-        if (searchKeyword) {
-          const kw = searchKeyword.toLowerCase();
-          const str = [item.id, item.target, item.requester, item.drawingNo].join(" ").toLowerCase();
-          if (!str.includes(kw)) return false;
-        }
-        return true;
-      })
-      .sort((a, b) => b.date.localeCompare(a.date));
-  }, [ecrData, searchDateFrom, searchDateTo, searchStatus, searchChangeType, searchKeyword]);
+    return applyFilters(ecrData, ecrFieldMap)
+      .sort((a: EcrItem, b: EcrItem) => b.date.localeCompare(a.date));
+  }, [ecrData, searchFilters]);
 
   const filteredEcn = useMemo(() => {
-    return ecnData
-      .filter((item) => {
-        if (searchDateFrom && item.date < searchDateFrom) return false;
-        if (searchDateTo && item.date > searchDateTo) return false;
-        if (searchStatus !== "all" && item.status !== searchStatus) return false;
-        if (searchKeyword) {
-          const kw = searchKeyword.toLowerCase();
-          const str = [item.id, item.target, item.designer, item.ecrNo].join(" ").toLowerCase();
-          if (!str.includes(kw)) return false;
-        }
-        return true;
-      })
-      .sort((a, b) => b.date.localeCompare(a.date));
-  }, [ecnData, searchDateFrom, searchDateTo, searchStatus, searchKeyword]);
+    return applyFilters(ecnData, ecnFieldMap)
+      .sort((a: EcnItem, b: EcnItem) => b.date.localeCompare(a.date));
+  }, [ecnData, searchFilters]);
 
   // --- Status Counts ---
   const ecrStatusCounts = useMemo(() => {
@@ -450,35 +497,21 @@ export default function DesignChangeManagementPage() {
   const handleTabSwitch = (tab: TabType) => {
     setCurrentTab(tab);
     setSelectedId(null);
-    setSearchStatus("all");
   };
 
-  // --- Search ---
-  const handleResetSearch = () => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(today.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-    setSearchStatus("all");
-    setSearchChangeType("all");
-    setSearchKeyword("");
-  };
-
-  const handleFilterByStatus = (status: string) => {
-    setSearchStatus(status);
+  const handleFilterByStatus = (_status: string) => {
+    // Status filter now handled by DynamicSearchFilter
   };
 
   // --- ECR/ECN Navigation ---
   const navigateToLink = (targetId: string) => {
+    setDetailOpen(false);
     if (targetId.startsWith("ECN")) {
       setCurrentTab("ecn");
       setSelectedId(targetId);
-      setSearchStatus("all");
     } else if (targetId.startsWith("ECR")) {
       setCurrentTab("ecr");
       setSelectedId(targetId);
-      setSearchStatus("all");
     }
   };
 
@@ -540,19 +573,19 @@ export default function DesignChangeManagementPage() {
 
   const handleSaveEcr = async () => {
     if (!ecrForm.changeType) {
-      toast.error("변경 유형을 선택하세요.");
+      toast.error("변경 유형을 선택해 주세요.");
       return;
     }
     if (!ecrForm.target?.trim()) {
-      toast.error("대상 품목/설비를 입력하세요.");
+      toast.error("대상 품목/설비를 입력해 주세요.");
       return;
     }
     if (!ecrForm.reason?.trim()) {
-      toast.error("변경 사유를 입력하세요.");
+      toast.error("변경 사유를 입력해 주세요.");
       return;
     }
     if (!ecrForm.content?.trim()) {
-      toast.error("변경 요구 내용을 입력하세요.");
+      toast.error("변경 요구 내용을 입력해 주세요.");
       return;
     }
 
@@ -581,11 +614,11 @@ export default function DesignChangeManagementPage() {
         apply_timing: ecrForm.applyTiming || "즉시",
       });
       if (res.success) {
-        toast.success("ECR이 수정되었습니다.");
+        toast.success("ECR이 수정되었어요.");
         setIsEcrModalOpen(false);
         fetchData();
       } else {
-        toast.error(res.message || "ECR 수정에 실패했습니다.");
+        toast.error(res.message || "ECR 수정에 실패했어요.");
       }
     } else {
       const res = await createDesignRequest({
@@ -606,11 +639,11 @@ export default function DesignChangeManagementPage() {
         history: [historyEntry],
       });
       if (res.success) {
-        toast.success("ECR이 등록되었습니다.");
+        toast.success("ECR이 등록되었어요.");
         setIsEcrModalOpen(false);
         fetchData();
       } else {
-        toast.error(res.message || "ECR 등록에 실패했습니다.");
+        toast.error(res.message || "ECR 등록에 실패했어요.");
       }
     }
   };
@@ -641,15 +674,15 @@ export default function DesignChangeManagementPage() {
 
   const handleSaveEcn = async () => {
     if (!ecnForm.after?.trim()) {
-      toast.error("변경 후(TO-BE) 내용을 입력하세요.");
+      toast.error("변경 후(TO-BE) 내용을 입력해 주세요.");
       return;
     }
     if (!ecnForm.applyDate) {
-      toast.error("적용일자를 입력하세요.");
+      toast.error("적용일자를 입력해 주세요.");
       return;
     }
     if (!ecnForm.ecrId) {
-      toast.error("관련 ECR 정보가 없습니다.");
+      toast.error("관련 ECR 정보가 없어요.");
       return;
     }
 
@@ -692,11 +725,11 @@ export default function DesignChangeManagementPage() {
         user_name: ecnForm.designer || "시스템",
         description: `${ecnNo} 발행`,
       });
-      toast.success("ECN이 발행되었습니다.");
+      toast.success("ECN이 발행되었어요.");
       setIsEcnModalOpen(false);
       fetchData();
     } else {
-      toast.error(res.message || "ECN 발행에 실패했습니다.");
+      toast.error(res.message || "ECN 발행에 실패했어요.");
     }
   };
 
@@ -709,19 +742,19 @@ export default function DesignChangeManagementPage() {
 
   const handleRejectSubmit = async () => {
     if (!rejectReason.trim()) {
-      toast.error("기각 사유를 입력하세요.");
+      toast.error("기각 사유를 입력해 주세요.");
       return;
     }
 
     const ecr = ecrData.find((r) => r.id === rejectTargetId);
     if (!ecr?._id) {
-      toast.error("ECR 정보를 찾을 수 없습니다.");
+      toast.error("ECR 정보를 찾을 수 없어요.");
       return;
     }
 
     const updateRes = await updateDesignRequest(ecr._id, { status: "기각", review_memo: rejectReason });
     if (!updateRes.success) {
-      toast.error(updateRes.message || "ECR 기각에 실패했습니다.");
+      toast.error(updateRes.message || "ECR 기각에 실패했어요.");
       return;
     }
     await addRequestHistory(ecr._id, {
@@ -730,571 +763,397 @@ export default function DesignChangeManagementPage() {
       user_name: "설계팀",
       description: rejectReason,
     });
-    toast.success("ECR이 기각되었습니다.");
+    toast.success("ECR이 기각되었어요.");
     setIsRejectModalOpen(false);
     fetchData();
   };
 
   // --- Stat Cards ---
   const ecrStatCards = [
-    { label: "요청접수", value: ecrStatusCounts["요청접수"] || 0, gradient: "from-indigo-500 to-blue-600", textColor: "text-white" },
-    { label: "영향도분석", value: ecrStatusCounts["영향도분석"] || 0, gradient: "from-amber-400 to-orange-500", textColor: "text-white" },
-    { label: "ECN발행", value: ecrStatusCounts["ECN발행"] || 0, gradient: "from-emerald-400 to-green-600", textColor: "text-white" },
+    { label: "요청접수", value: ecrStatusCounts["요청접수"] || 0, color: "text-info" },
+    { label: "영향도분석", value: ecrStatusCounts["영향도분석"] || 0, color: "text-warning" },
+    { label: "ECN발행", value: ecrStatusCounts["ECN발행"] || 0, color: "text-success" },
   ];
 
   const ecnStatCards = [
-    { label: "도면변경", value: ecnStatusCounts["도면변경"] || 0, gradient: "from-purple-400 to-violet-600", textColor: "text-white" },
-    { label: "통보완료", value: ecnStatusCounts["통보완료"] || 0, gradient: "from-teal-400 to-cyan-600", textColor: "text-white" },
-    { label: "적용완료", value: ecnStatusCounts["적용완료"] || 0, gradient: "from-emerald-400 to-green-600", textColor: "text-white" },
+    { label: "도면변경", value: ecnStatusCounts["도면변경"] || 0, color: "text-primary" },
+    { label: "통보완료", value: ecnStatusCounts["통보완료"] || 0, color: "text-info" },
+    { label: "적용완료", value: ecnStatusCounts["적용완료"] || 0, color: "text-success" },
   ];
 
   const currentStatCards = currentTab === "ecr" ? ecrStatCards : ecnStatCards;
   const currentList = currentTab === "ecr" ? filteredEcr : filteredEcn;
-  const currentStatuses = currentTab === "ecr" ? ECR_STATUSES : ECN_STATUSES;
+
+  const handleRowClick = (id: string) => {
+    setSelectedId(id);
+    setDetailOpen(true);
+  };
 
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4 relative">
+    <div className="flex flex-col h-full gap-3 p-3 relative">
       {loading && (
         <div className="absolute inset-0 bg-background/50 flex items-center justify-center z-50">
           <Loader2 className="h-8 w-8 animate-spin text-primary" />
         </div>
       )}
-      {/* 검색 섹션 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">기간</Label>
-            <div className="flex items-center gap-2">
-              <Input
-                type="date"
-                className="w-[140px] h-9"
-                value={searchDateFrom}
-                onChange={(e) => setSearchDateFrom(e.target.value)}
-              />
-              <span className="text-muted-foreground">~</span>
-              <Input
-                type="date"
-                className="w-[140px] h-9"
-                value={searchDateTo}
-                onChange={(e) => setSearchDateTo(e.target.value)}
-              />
-            </div>
-          </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">구분</Label>
-            <Select value={currentTab} onValueChange={(v) => handleTabSwitch(v as TabType)}>
-              <SelectTrigger className="w-[150px] h-9">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="ecr">ECR (변경요청)</SelectItem>
-                <SelectItem value="ecn">ECN (변경통지)</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+      {/* 탭 선택 + 검색 필터 */}
+      <div className="shrink-0 flex flex-col gap-2">
+        <div className="flex items-center gap-3 px-1">
+          <Select value={currentTab} onValueChange={(v) => handleTabSwitch(v as TabType)}>
+            <SelectTrigger className="w-[170px] h-9">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="ecr">ECR (변경요청)</SelectItem>
+              <SelectItem value="ecn">ECN (변경통지)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        {currentTab === "ecr" ? (
+          <DynamicSearchFilter
+            tableName="dsn_design_request"
+            filterId="c16-change-management-ecr"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={tsEcr.filterConfig}
+            dataCount={filteredEcr.length}
+          />
+        ) : (
+          <DynamicSearchFilter
+            tableName="dsn_ecn"
+            filterId="c16-change-management-ecn"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={tsEcn.filterConfig}
+            dataCount={filteredEcn.length}
+          />
+        )}
+      </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[130px] h-9">
-                <SelectValue placeholder="전체" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">상태 전체</SelectItem>
-                {currentStatuses.map((s) => (
-                  <SelectItem key={s} value={s}>
-                    {s}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
+      {/* 현황 카드 */}
+      <div className="grid grid-cols-3 gap-3 shrink-0">
+        {currentStatCards.map((card) => (
+          <button
+            key={card.label}
+            onClick={() => handleFilterByStatus(card.label)}
+            className="rounded-lg border bg-card px-3 py-2 text-left transition-colors hover:bg-accent/50"
+          >
+            <div className="text-[10px] text-muted-foreground">{card.label}</div>
+            <div className={cn("text-xl font-bold", card.color)}>{card.value}</div>
+          </button>
+        ))}
+      </div>
 
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold">
+            {currentTab === "ecr" ? "설계변경요청(ECR) 목록" : "설계변경통지(ECN) 목록"}
+          </h2>
+          <Badge variant="secondary" className="font-mono">{currentList.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
           {currentTab === "ecr" && (
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">변경유형</Label>
-              <Select value={searchChangeType} onValueChange={setSearchChangeType}>
-                <SelectTrigger className="w-[140px] h-9">
-                  <SelectValue placeholder="전체" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">변경유형 전체</SelectItem>
-                  {CHANGE_TYPES.map((t) => (
-                    <SelectItem key={t} value={t}>
-                      {t}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          )}
-
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">검색어</Label>
-            <Input
-              placeholder="ECR/ECN번호 / 품목 / 요청자"
-              className="w-[260px] h-9"
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-            />
-          </div>
-
-          <div className="flex-1" />
-
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
+            <Button size="sm" onClick={openEcrRegisterModal}>
+              <Plus className="w-4 h-4 mr-1.5" /> ECR 등록
             </Button>
-          </div>
-        </CardContent>
-      </Card>
+          )}
+          <Button variant="ghost" size="sm" onClick={() => (currentTab === "ecr" ? tsEcr : tsEcn).setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
 
-      {/* 메인 분할 레이아웃 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
-        <ResizablePanelGroup direction="horizontal">
-          {/* 왼쪽: 목록 */}
-          <ResizablePanel defaultSize={65} minSize={35}>
-            <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2">
-                  <ClipboardList className="w-4 h-4" />
-                  {currentTab === "ecr" ? "설계변경요청(ECR) 목록" : "설계변경통지(ECN) 목록"}
-                  <Badge variant="secondary" className="font-normal">
-                    {currentList.length}건
-                  </Badge>
-                </div>
-                {currentTab === "ecr" && (
-                  <Button size="sm" onClick={openEcrRegisterModal}>
-                    <Plus className="w-4 h-4 mr-1.5" /> ECR 등록
-                  </Button>
-                )}
-              </div>
+      {/* 테이블 영역 */}
+      <div className="flex-1 flex flex-col overflow-hidden border rounded-lg bg-card">
+        <div className="flex-1 overflow-auto">
+          {currentTab === "ecr" ? (
+            <EDataTable
+              columns={[
+                { key: "id", label: "ECR번호", width: "w-[140px]", render: (val: any) => <span className="font-semibold text-primary">{val}</span> },
+                { key: "changeType", label: "변경유형", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getChangeTypeStyle(val))}>{val}</span> },
+                { key: "status", label: "상태", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcrStatusStyle(val))}>{val}</span> },
+                { key: "urgency", label: "긴급", width: "w-[60px]", align: "center" as const, render: (val: any) => val === "긴급" ? <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-destructive/10 text-destructive border-destructive/20">긴급</span> : <span>-</span> },
+                { key: "target", label: "대상 품목/설비", width: "w-[200px]" },
+                { key: "drawingNo", label: "도면번호", width: "w-[150px]" },
+                { key: "reqDept", label: "요청부서", width: "w-[80px]" },
+                { key: "requester", label: "요청자", width: "w-[70px]" },
+                { key: "date", label: "요청일자", width: "w-[100px]" },
+                { key: "ecnNo", label: "관련 ECN", width: "w-[130px]", render: (val: any) => val ? <button className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-info/10 text-info border border-info/20 hover:bg-info/20 transition-colors" onClick={(e) => { e.stopPropagation(); navigateToLink(val); }}>{val} <ArrowRight className="w-3 h-3 inline" /></button> : <span>-</span> },
+              ] as EDataTableColumn<EcrItem>[]}
+              data={tsEcr.groupData(filteredEcr)}
+              rowKey={(row) => row.id}
+              selectedId={selectedId}
+              onSelect={(id) => { if (id) handleRowClick(id); }}
+              onRowClick={(row) => handleRowClick(row.id)}
+              emptyMessage="조건에 맞는 ECR이 없어요"
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+            />
+          ) : (
+            <EDataTable
+              columns={[
+                { key: "id", label: "ECN번호", width: "w-[140px]", render: (val: any) => <span className="font-semibold text-primary">{val}</span> },
+                { key: "status", label: "상태", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcnStatusStyle(val))}>{val}</span> },
+                { key: "target", label: "대상 품목/설비", width: "w-[200px]" },
+                { key: "drawingAfter", label: "도면 (변경 후)", width: "w-[160px]", render: (val: any) => <span className="text-[13px] text-success font-medium">{val}</span> },
+                { key: "designer", label: "설계담당", width: "w-[80px]" },
+                { key: "date", label: "발행일자", width: "w-[100px]" },
+                { key: "applyDate", label: "적용일자", width: "w-[100px]" },
+                { key: "notifyDepts", label: "통보 부서", width: "w-[140px]", render: (val: any) => <span className="text-[13px] text-muted-foreground">{Array.isArray(val) ? val.join(", ") : val}</span> },
+                { key: "ecrNo", label: "관련 ECR", width: "w-[130px]", render: (val: any) => <button className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-warning/10 text-warning border border-warning/20 hover:bg-warning/20 transition-colors" onClick={(e) => { e.stopPropagation(); navigateToLink(val); }}>{val} <ArrowRight className="w-3 h-3 inline" /></button> },
+              ] as EDataTableColumn<EcnItem>[]}
+              data={tsEcn.groupData(filteredEcn)}
+              rowKey={(row) => row.id}
+              selectedId={selectedId}
+              onSelect={(id) => { if (id) handleRowClick(id); }}
+              onRowClick={(row) => handleRowClick(row.id)}
+              emptyMessage="조건에 맞는 ECN이 없어요"
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+            />
+          )}
+        </div>
+      </div>
 
-              <div className="flex-1 overflow-auto">
-                {currentTab === "ecr" ? (
-                  <Table>
-                    <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                      <TableRow>
-                        <TableHead className="w-[50px] text-center">No</TableHead>
-                        <TableHead className="w-[140px]">ECR번호</TableHead>
-                        <TableHead className="w-[90px] text-center">변경유형</TableHead>
-                        <TableHead className="w-[90px] text-center">상태</TableHead>
-                        <TableHead className="w-[60px] text-center">긴급</TableHead>
-                        <TableHead className="w-[200px]">대상 품목/설비</TableHead>
-                        <TableHead className="w-[150px]">도면번호</TableHead>
-                        <TableHead className="w-[80px]">요청부서</TableHead>
-                        <TableHead className="w-[70px]">요청자</TableHead>
-                        <TableHead className="w-[100px]">요청일자</TableHead>
-                        <TableHead className="w-[130px]">관련 ECN</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {filteredEcr.length === 0 ? (
-                        <TableRow>
-                          <TableCell colSpan={11} className="h-32 text-center text-muted-foreground">
-                            <div className="flex flex-col items-center gap-2">
-                              <Inbox className="w-8 h-8 text-muted-foreground/50" />
-                              <span>조건에 맞는 ECR이 없습니다</span>
-                            </div>
-                          </TableCell>
-                        </TableRow>
+      {/* 상세 정보 다이얼로그 */}
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="max-w-[900px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{currentTab === "ecr" ? `ECR 상세 — ${selectedEcr?.id || ""}` : `ECN 상세 — ${selectedEcn?.id || ""}`}</DialogTitle>
+            <DialogDescription>{currentTab === "ecr" ? "설계변경요청의 상세 정보를 확인해요." : "설계변경통지의 상세 정보를 확인해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="space-y-5">
+          {/* ECR 상세 */}
+          {selectedEcr ? (
+            <>
+              <section>
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
+                  기본 정보
+                </h3>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">ECR번호</span>
+                    <span className="font-medium text-primary">{selectedEcr.id}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">상태</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcrStatusStyle(selectedEcr.status))}>
+                      {selectedEcr.status}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">변경 유형</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getChangeTypeStyle(selectedEcr.changeType))}>
+                      {selectedEcr.changeType}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">긴급도</span>
+                    <span>
+                      {selectedEcr.urgency === "긴급" ? (
+                        <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-destructive/10 text-destructive border-destructive/20">긴급</span>
                       ) : (
-                        filteredEcr.map((item, idx) => (
-                          <TableRow
-                            key={item.id}
-                            className={cn(
-                              "cursor-pointer hover:bg-muted/50 transition-colors",
-                              selectedId === item.id && "bg-primary/5"
-                            )}
-                            onClick={() => setSelectedId(item.id)}
-                          >
-                            <TableCell className="text-center text-muted-foreground">{idx + 1}</TableCell>
-                            <TableCell className="font-semibold text-primary">{item.id}</TableCell>
-                            <TableCell className="text-center">
-                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getChangeTypeStyle(item.changeType))}>
-                                {item.changeType}
-                              </span>
-                            </TableCell>
-                            <TableCell className="text-center">
-                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcrStatusStyle(item.status))}>
-                                {item.status}
-                              </span>
-                            </TableCell>
-                            <TableCell className="text-center">
-                              {item.urgency === "긴급" ? (
-                                <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-rose-100 text-rose-800 border-rose-200">
-                                  긴급
-                                </span>
-                              ) : (
-                                "-"
-                              )}
-                            </TableCell>
-                            <TableCell className="font-medium">{item.target}</TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{item.drawingNo}</TableCell>
-                            <TableCell>{item.reqDept}</TableCell>
-                            <TableCell>{item.requester}</TableCell>
-                            <TableCell>{item.date}</TableCell>
-                            <TableCell>
-                              {item.ecnNo ? (
-                                <button
-                                  className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200 transition-colors"
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    navigateToLink(item.ecnNo);
-                                  }}
-                                >
-                                  {item.ecnNo} <ArrowRight className="w-3 h-3 inline" />
-                                </button>
-                              ) : (
-                                "-"
-                              )}
-                            </TableCell>
-                          </TableRow>
-                        ))
+                        "보통"
                       )}
-                    </TableBody>
-                  </Table>
-                ) : (
-                  <Table>
-                    <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                      <TableRow>
-                        <TableHead className="w-[50px] text-center">No</TableHead>
-                        <TableHead className="w-[140px]">ECN번호</TableHead>
-                        <TableHead className="w-[90px] text-center">상태</TableHead>
-                        <TableHead className="w-[200px]">대상 품목/설비</TableHead>
-                        <TableHead className="w-[160px]">도면 (변경 후)</TableHead>
-                        <TableHead className="w-[80px]">설계담당</TableHead>
-                        <TableHead className="w-[100px]">발행일자</TableHead>
-                        <TableHead className="w-[100px]">적용일자</TableHead>
-                        <TableHead className="w-[140px]">통보 부서</TableHead>
-                        <TableHead className="w-[130px]">관련 ECR</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {filteredEcn.length === 0 ? (
-                        <TableRow>
-                          <TableCell colSpan={10} className="h-32 text-center text-muted-foreground">
-                            <div className="flex flex-col items-center gap-2">
-                              <Inbox className="w-8 h-8 text-muted-foreground/50" />
-                              <span>조건에 맞는 ECN이 없습니다</span>
-                            </div>
-                          </TableCell>
-                        </TableRow>
-                      ) : (
-                        filteredEcn.map((item, idx) => (
-                          <TableRow
-                            key={item.id}
-                            className={cn(
-                              "cursor-pointer hover:bg-muted/50 transition-colors",
-                              selectedId === item.id && "bg-primary/5"
-                            )}
-                            onClick={() => setSelectedId(item.id)}
-                          >
-                            <TableCell className="text-center text-muted-foreground">{idx + 1}</TableCell>
-                            <TableCell className="font-semibold text-primary">{item.id}</TableCell>
-                            <TableCell className="text-center">
-                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcnStatusStyle(item.status))}>
-                                {item.status}
-                              </span>
-                            </TableCell>
-                            <TableCell className="font-medium">{item.target}</TableCell>
-                            <TableCell className="text-xs text-emerald-600 font-medium">{item.drawingAfter}</TableCell>
-                            <TableCell>{item.designer}</TableCell>
-                            <TableCell>{item.date}</TableCell>
-                            <TableCell>{item.applyDate}</TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{item.notifyDepts.join(", ")}</TableCell>
-                            <TableCell>
-                              <button
-                                className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 transition-colors"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  navigateToLink(item.ecrNo);
-                                }}
-                              >
-                                {item.ecrNo} <ArrowRight className="w-3 h-3 inline" />
-                              </button>
-                            </TableCell>
-                          </TableRow>
-                        ))
-                      )}
-                    </TableBody>
-                  </Table>
-                )}
-              </div>
-            </div>
-          </ResizablePanel>
-
-          <ResizableHandle withHandle />
-
-          {/* 오른쪽: 상세 */}
-          <ResizablePanel defaultSize={35} minSize={20}>
-            <div className="flex flex-col h-full bg-card">
-              <div className="flex items-center justify-between p-3 border-b shrink-0">
-                <span className="font-semibold flex items-center gap-2">
-                  <FileText className="w-4 h-4" />
-                  상세 정보
-                </span>
-                {selectedEcr && (
-                  <div className="flex items-center gap-1.5">
-                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => openEcrEditModal(selectedEcr.id)}>
-                      <Pencil className="w-3 h-3 mr-1" /> 수정
-                    </Button>
-                    {selectedEcr.status === "영향도분석" && (
-                      <>
-                        <Button size="sm" className="h-7 text-xs" onClick={() => openEcnIssueModal(selectedEcr.id)}>
-                          <FileText className="w-3 h-3 mr-1" /> ECN 발행
-                        </Button>
-                        <Button variant="destructive" size="sm" className="h-7 text-xs" onClick={() => openRejectModal(selectedEcr.id)}>
-                          <XCircle className="w-3 h-3 mr-1" /> 기각
-                        </Button>
-                      </>
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
+                    <span className="font-medium">{selectedEcr.target}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">도면번호</span>
+                    <span>{selectedEcr.drawingNo}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">요청부서 / 요청자</span>
+                    <span>{selectedEcr.reqDept} / {selectedEcr.requester}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">요청일자</span>
+                    <span>{selectedEcr.date}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">희망 적용시점</span>
+                    <span>{selectedEcr.applyTiming}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">관련 ECN</span>
+                    {selectedEcr.ecnNo ? (
+                      <button
+                        className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-info/10 text-info border border-info/20 hover:bg-info/20 transition-colors"
+                        onClick={() => navigateToLink(selectedEcr.ecnNo)}
+                      >
+                        {selectedEcr.ecnNo} <ArrowRight className="w-3 h-3 inline" />
+                      </button>
+                    ) : (
+                      <span className="text-muted-foreground">미발행</span>
                     )}
                   </div>
-                )}
-              </div>
+                </div>
+              </section>
 
-              <div className="flex-1 overflow-auto p-4 space-y-5">
-                {/* 현황 카드 */}
-                <div className="grid grid-cols-3 gap-3">
-                  {currentStatCards.map((card) => (
-                    <button
-                      key={card.label}
-                      onClick={() => handleFilterByStatus(card.label)}
-                      className={cn(
-                        "rounded-xl p-4 text-center bg-linear-to-br transition-all hover:-translate-y-0.5 hover:shadow-md cursor-pointer",
-                        card.gradient,
-                        card.textColor
-                      )}
-                    >
-                      <div className="text-xs font-medium opacity-90 mb-1">{card.label}</div>
-                      <div className="text-2xl font-bold">{card.value}</div>
-                    </button>
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
+                  {selectedEcr.reason}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 요구 내용</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
+                  {selectedEcr.content}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">영향 범위</h3>
+                <div className="flex flex-wrap gap-1.5">
+                  {selectedEcr.impact.map((imp) => (
+                    <span key={imp} className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getImpactBadgeStyle(imp))}>
+                      {imp}
+                    </span>
                   ))}
                 </div>
+              </section>
 
-                {/* ECR 상세 */}
-                {selectedEcr ? (
-                  <div className="space-y-5">
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
-                        기본 정보
-                      </h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">ECR번호</span>
-                          <span className="font-medium text-primary">{selectedEcr.id}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">상태</span>
-                          <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcrStatusStyle(selectedEcr.status))}>
-                            {selectedEcr.status}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">변경 유형</span>
-                          <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getChangeTypeStyle(selectedEcr.changeType))}>
-                            {selectedEcr.changeType}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">긴급도</span>
-                          <span>
-                            {selectedEcr.urgency === "긴급" ? (
-                              <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-rose-100 text-rose-800 border-rose-200">긴급</span>
-                            ) : (
-                              "보통"
-                            )}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
-                          <span className="font-medium">{selectedEcr.target}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">도면번호</span>
-                          <span>{selectedEcr.drawingNo}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">요청부서 / 요청자</span>
-                          <span>{selectedEcr.reqDept} / {selectedEcr.requester}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">요청일자</span>
-                          <span>{selectedEcr.date}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">희망 적용시점</span>
-                          <span>{selectedEcr.applyTiming}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">관련 ECN</span>
-                          {selectedEcr.ecnNo ? (
-                            <button
-                              className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200 transition-colors"
-                              onClick={() => navigateToLink(selectedEcr.ecnNo)}
-                            >
-                              {selectedEcr.ecnNo} <ArrowRight className="w-3 h-3 inline" />
-                            </button>
-                          ) : (
-                            <span className="text-muted-foreground">미발행</span>
-                          )}
-                        </div>
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
-                        {selectedEcr.reason}
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">변경 요구 내용</h3>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
-                        {selectedEcr.content}
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">영향 범위</h3>
-                      <div className="flex flex-wrap gap-1.5">
-                        {selectedEcr.impact.map((imp) => (
-                          <span key={imp} className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getImpactBadgeStyle(imp))}>
-                            {imp}
-                          </span>
-                        ))}
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
-                      <Timeline history={selectedEcr.history} />
-                    </section>
+              <section>
+                <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
+                <Timeline history={selectedEcr.history} />
+              </section>
+            </>
+          ) : selectedEcn ? (
+            <>
+              <section>
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
+                  ECN 기본 정보
+                </h3>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">ECN번호</span>
+                    <span className="font-medium text-primary">{selectedEcn.id}</span>
                   </div>
-                ) : selectedEcn ? (
-                  <div className="space-y-5">
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
-                        ECN 기본 정보
-                      </h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">ECN번호</span>
-                          <span className="font-medium text-primary">{selectedEcn.id}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">상태</span>
-                          <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcnStatusStyle(selectedEcn.status))}>
-                            {selectedEcn.status}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
-                          <span className="font-medium">{selectedEcn.target}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">설계담당</span>
-                          <span>{selectedEcn.designer}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">발행일자</span>
-                          <span>{selectedEcn.date}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">적용일자</span>
-                          <span>{selectedEcn.applyDate}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">관련 ECR</span>
-                          <button
-                            className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 transition-colors"
-                            onClick={() => navigateToLink(selectedEcn.ecrNo)}
-                          >
-                            {selectedEcn.ecrNo} <ArrowRight className="w-3 h-3 inline" />
-                          </button>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">통보 부서</span>
-                          <span className="text-xs">{selectedEcn.notifyDepts.join(", ")}</span>
-                        </div>
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">변경 전/후 비교</h3>
-                      <div className="grid grid-cols-2 gap-3">
-                        <div className="bg-rose-50 p-3 rounded-md border border-rose-200">
-                          <div className="text-xs font-semibold text-rose-800 mb-1.5">
-                            변경 전 ({selectedEcn.drawingBefore})
-                          </div>
-                          <div className="text-sm whitespace-pre-wrap">{selectedEcn.before}</div>
-                        </div>
-                        <div className="bg-emerald-50 p-3 rounded-md border border-emerald-200">
-                          <div className="text-xs font-semibold text-emerald-800 mb-1.5">
-                            변경 후 ({selectedEcn.drawingAfter})
-                          </div>
-                          <div className="text-sm whitespace-pre-wrap">{selectedEcn.after}</div>
-                        </div>
-                      </div>
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap">
-                        {selectedEcn.reason}
-                      </div>
-                      {selectedEcn.remark && (
-                        <p className="text-xs text-muted-foreground mt-2">비고: {selectedEcn.remark}</p>
-                      )}
-                    </section>
-
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
-                      <Timeline history={selectedEcn.history} />
-                    </section>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">상태</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcnStatusStyle(selectedEcn.status))}>
+                      {selectedEcn.status}
+                    </span>
                   </div>
-                ) : (
-                  <div className="flex flex-col items-center justify-center py-10 text-center">
-                    <div className="w-14 h-14 rounded-full bg-muted flex items-center justify-center mb-3">
-                      <FileText className="w-7 h-7 text-muted-foreground" />
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
+                    <span className="font-medium">{selectedEcn.target}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">설계담당</span>
+                    <span>{selectedEcn.designer}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">발행일자</span>
+                    <span>{selectedEcn.date}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">적용일자</span>
+                    <span>{selectedEcn.applyDate}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">관련 ECR</span>
+                    <button
+                      className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-warning/10 text-warning border border-warning/20 hover:bg-warning/20 transition-colors"
+                      onClick={() => navigateToLink(selectedEcn.ecrNo)}
+                    >
+                      {selectedEcn.ecrNo} <ArrowRight className="w-3 h-3 inline" />
+                    </button>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">통보 부서</span>
+                    <span className="text-xs">{selectedEcn.notifyDepts.join(", ")}</span>
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 전/후 비교</h3>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="bg-destructive/5 p-3 rounded-md border border-destructive/20">
+                    <div className="text-xs font-semibold text-destructive mb-1.5">
+                      변경 전 ({selectedEcn.drawingBefore})
                     </div>
-                    <p className="text-sm text-muted-foreground">좌측 목록에서 항목을 선택하세요</p>
+                    <div className="text-sm whitespace-pre-wrap">{selectedEcn.before}</div>
                   </div>
+                  <div className="bg-success/5 p-3 rounded-md border border-success/20">
+                    <div className="text-xs font-semibold text-success mb-1.5">
+                      변경 후 ({selectedEcn.drawingAfter})
+                    </div>
+                    <div className="text-sm whitespace-pre-wrap">{selectedEcn.after}</div>
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap">
+                  {selectedEcn.reason}
+                </div>
+                {selectedEcn.remark && (
+                  <p className="text-xs text-muted-foreground mt-2">비고: {selectedEcn.remark}</p>
                 )}
-              </div>
-            </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
+                <Timeline history={selectedEcn.history} />
+              </section>
+            </>
+          ) : null}
+        </div>
+          </div>
+          <DialogFooter>
+            {selectedEcr && (
+              <>
+                <Button variant="outline" size="sm" onClick={() => { setDetailOpen(false); openEcrEditModal(selectedEcr.id); }}>
+                  <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                </Button>
+                {selectedEcr.status === "영향도분석" && (
+                  <>
+                    <Button size="sm" onClick={() => { setDetailOpen(false); openEcnIssueModal(selectedEcr.id); }}>
+                      <FileText className="w-3.5 h-3.5 mr-1" /> ECN 발행
+                    </Button>
+                    <Button variant="destructive" size="sm" onClick={() => { setDetailOpen(false); openRejectModal(selectedEcr.id); }}>
+                      <XCircle className="w-3.5 h-3.5 mr-1" /> 기각
+                    </Button>
+                  </>
+                )}
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* ECR 등록/수정 모달 */}
       <Dialog open={isEcrModalOpen} onOpenChange={setIsEcrModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[950px] max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">
-              {isEcrEditMode ? "설계변경요청(ECR) 수정" : "설계변경요청(ECR) 등록"}
-            </DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              {isEcrEditMode ? "ECR 정보를 수정합니다." : "새로운 설계변경요청을 등록합니다."}
-            </DialogDescription>
+            <DialogTitle>{isEcrEditMode ? "설계변경요청(ECR) 수정" : "설계변경요청(ECR) 등록"}</DialogTitle>
+            <DialogDescription>{isEcrEditMode ? "ECR 정보를 수정해요." : "새로운 설계변경요청을 등록해요."}</DialogDescription>
           </DialogHeader>
-
-          <div className="flex-1 overflow-auto">
-            <div className="flex flex-col md:flex-row gap-5">
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-5 p-6">
               {/* 좌측: 요청 정보 */}
               <div className="md:w-[380px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
                 <h3 className="text-sm font-semibold pb-2 border-b">변경 요청 정보</h3>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">ECR번호</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">ECR번호</Label>
                   <Input value={ecrForm.id || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
                 </div>
 
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-xs sm:text-sm">요청일자</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청일자</Label>
                     <Input
                       type="date"
                       value={ecrForm.date || ""}
@@ -1303,7 +1162,7 @@ export default function DesignChangeManagementPage() {
                     />
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">희망 적용시점</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">희망 적용시점</Label>
                     <Select value={ecrForm.applyTiming || "즉시"} onValueChange={(v) => setEcrForm((p) => ({ ...p, applyTiming: v }))}>
                       <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                         <SelectValue />
@@ -1319,7 +1178,7 @@ export default function DesignChangeManagementPage() {
 
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 유형 <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 유형 <span className="text-destructive">*</span></Label>
                     <Select value={ecrForm.changeType || ""} onValueChange={(v) => setEcrForm((p) => ({ ...p, changeType: v as ChangeType }))}>
                       <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                         <SelectValue placeholder="선택" />
@@ -1332,7 +1191,7 @@ export default function DesignChangeManagementPage() {
                     </Select>
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">긴급도</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">긴급도</Label>
                     <Select value={ecrForm.urgency || "보통"} onValueChange={(v) => setEcrForm((p) => ({ ...p, urgency: v as "보통" | "긴급" }))}>
                       <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                         <SelectValue />
@@ -1346,7 +1205,7 @@ export default function DesignChangeManagementPage() {
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">대상 품목/설비 <span className="text-destructive">*</span></Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 품목/설비 <span className="text-destructive">*</span></Label>
                   <Input
                     value={ecrForm.target || ""}
                     onChange={(e) => setEcrForm((p) => ({ ...p, target: e.target.value }))}
@@ -1356,7 +1215,7 @@ export default function DesignChangeManagementPage() {
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">대상 도면번호</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 도면번호</Label>
                   <Input
                     value={ecrForm.drawingNo || ""}
                     onChange={(e) => setEcrForm((p) => ({ ...p, drawingNo: e.target.value }))}
@@ -1367,7 +1226,7 @@ export default function DesignChangeManagementPage() {
 
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-xs sm:text-sm">요청부서</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청부서</Label>
                     <Select value={ecrForm.reqDept || ""} onValueChange={(v) => setEcrForm((p) => ({ ...p, reqDept: v }))}>
                       <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                         <SelectValue placeholder="선택" />
@@ -1380,7 +1239,7 @@ export default function DesignChangeManagementPage() {
                     </Select>
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">요청자</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청자</Label>
                     <Input
                       value={ecrForm.requester || ""}
                       onChange={(e) => setEcrForm((p) => ({ ...p, requester: e.target.value }))}
@@ -1397,27 +1256,27 @@ export default function DesignChangeManagementPage() {
                   <h3 className="text-sm font-semibold pb-2 border-b">변경 내용</h3>
 
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 사유 <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 사유 <span className="text-destructive">*</span></Label>
                     <Textarea
                       value={ecrForm.reason || ""}
                       onChange={(e) => setEcrForm((p) => ({ ...p, reason: e.target.value }))}
-                      placeholder="변경이 필요한 구체적인 사유를 기술하세요"
+                      placeholder="변경이 필요한 구체적인 사유를 기술해 주세요"
                       className="min-h-[80px] resize-y text-xs sm:text-sm"
                     />
                   </div>
 
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 요구 내용 <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 요구 내용 <span className="text-destructive">*</span></Label>
                     <Textarea
                       value={ecrForm.content || ""}
                       onChange={(e) => setEcrForm((p) => ({ ...p, content: e.target.value }))}
-                      placeholder="어떻게 변경해야 하는지 구체적으로 기술하세요"
+                      placeholder="어떻게 변경해야 하는지 구체적으로 기술해 주세요"
                       className="min-h-[80px] resize-y text-xs sm:text-sm"
                     />
                   </div>
 
                   <div>
-                    <Label className="text-xs sm:text-sm">영향 범위 (해당 항목 체크)</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">영향 범위 (해당 항목 체크)</Label>
                     <div className="grid grid-cols-3 gap-2 mt-2">
                       {IMPACT_OPTIONS.map((opt) => (
                         <label
@@ -1447,15 +1306,12 @@ export default function DesignChangeManagementPage() {
                   </div>
                 </div>
               </div>
-            </div>
+        </div>
           </div>
-
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setIsEcrModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button onClick={handleSaveEcr} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              <Save className="w-4 h-4 mr-2" /> 저장
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEcrModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveEcr}>
+              <Save className="w-4 h-4 mr-1.5" /> 저장
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -1463,31 +1319,30 @@ export default function DesignChangeManagementPage() {
 
       {/* ECN 발행 모달 */}
       <Dialog open={isEcnModalOpen} onOpenChange={setIsEcnModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[950px] max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">ECN 발행 (설계변경통지)</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">ECR 기반으로 설계변경통지를 발행합니다.</DialogDescription>
+            <DialogTitle>ECN 발행 (설계변경통지)</DialogTitle>
+            <DialogDescription>ECR 기반으로 설계변경통지를 발행해요.</DialogDescription>
           </DialogHeader>
-
-          <div className="flex-1 overflow-auto">
-            <div className="flex flex-col md:flex-row gap-5">
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-5 p-6">
               {/* 좌측 */}
               <div className="md:w-[380px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
                 <h3 className="text-sm font-semibold pb-2 border-b">ECN 기본 정보</h3>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">ECN번호</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">ECN번호</Label>
                   <Input value={ecnForm.id || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">관련 ECR번호</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">관련 ECR번호</Label>
                   <Input value={ecnForm.ecrNo || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
                 </div>
 
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-xs sm:text-sm">발행일자</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">발행일자</Label>
                     <Input
                       type="date"
                       value={ecnForm.date || ""}
@@ -1496,7 +1351,7 @@ export default function DesignChangeManagementPage() {
                     />
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">적용일자 <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">적용일자 <span className="text-destructive">*</span></Label>
                     <Input
                       type="date"
                       value={ecnForm.applyDate || ""}
@@ -1507,12 +1362,12 @@ export default function DesignChangeManagementPage() {
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">대상 품목/설비</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 품목/설비</Label>
                   <Input value={ecnForm.target || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">도면번호 (변경 후)</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">도면번호 (변경 후)</Label>
                   <Input
                     value={ecnForm.drawingAfter || ""}
                     onChange={(e) => setEcnForm((p) => ({ ...p, drawingAfter: e.target.value }))}
@@ -1522,7 +1377,7 @@ export default function DesignChangeManagementPage() {
                 </div>
 
                 <div>
-                  <Label className="text-xs sm:text-sm">설계 담당</Label>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설계 담당</Label>
                   <Select value={ecnForm.designer || ""} onValueChange={(v) => setEcnForm((p) => ({ ...p, designer: v }))}>
                     <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                       <SelectValue placeholder="선택" />
@@ -1541,7 +1396,7 @@ export default function DesignChangeManagementPage() {
                 <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
                   <h3 className="text-sm font-semibold pb-2 border-b">변경 전/후 비교</h3>
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 전 (AS-IS)</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 전 (AS-IS)</Label>
                     <Textarea
                       value={ecnForm.before || ""}
                       onChange={(e) => setEcnForm((p) => ({ ...p, before: e.target.value }))}
@@ -1550,7 +1405,7 @@ export default function DesignChangeManagementPage() {
                     />
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 후 (TO-BE) <span className="text-destructive">*</span></Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 후 (TO-BE) <span className="text-destructive">*</span></Label>
                     <Textarea
                       value={ecnForm.after || ""}
                       onChange={(e) => setEcnForm((p) => ({ ...p, after: e.target.value }))}
@@ -1583,7 +1438,7 @@ export default function DesignChangeManagementPage() {
                 <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
                   <h3 className="text-sm font-semibold pb-2 border-b">변경 사유 및 비고</h3>
                   <div>
-                    <Label className="text-xs sm:text-sm">변경 사유 요약</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 사유 요약</Label>
                     <Textarea
                       value={ecnForm.reason || ""}
                       readOnly
@@ -1591,7 +1446,7 @@ export default function DesignChangeManagementPage() {
                     />
                   </div>
                   <div>
-                    <Label className="text-xs sm:text-sm">비고</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">비고</Label>
                     <Textarea
                       value={ecnForm.remark || ""}
                       onChange={(e) => setEcnForm((p) => ({ ...p, remark: e.target.value }))}
@@ -1601,15 +1456,12 @@ export default function DesignChangeManagementPage() {
                   </div>
                 </div>
               </div>
-            </div>
+        </div>
           </div>
-
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setIsEcnModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button onClick={handleSaveEcn} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              <FileText className="w-4 h-4 mr-2" /> ECN 발행
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEcnModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveEcn}>
+              <FileText className="w-4 h-4 mr-1.5" /> ECN 발행
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -1624,17 +1476,17 @@ export default function DesignChangeManagementPage() {
               ECR 기각
             </DialogTitle>
             <DialogDescription className="text-xs sm:text-sm">
-              {rejectTargetId}을 기각 처리합니다.
+              {rejectTargetId}을 기각 처리해요.
             </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-3 sm:space-y-4">
             <div>
-              <Label className="text-xs sm:text-sm">기각 사유 <span className="text-destructive">*</span></Label>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">기각 사유 <span className="text-destructive">*</span></Label>
               <Textarea
                 value={rejectReason}
                 onChange={(e) => setRejectReason(e.target.value)}
-                placeholder="기각 사유를 상세히 입력해주세요"
+                placeholder="기각 사유를 상세히 입력해 주세요"
                 className="min-h-[100px] resize-y text-xs sm:text-sm"
               />
             </div>
@@ -1650,6 +1502,23 @@ export default function DesignChangeManagementPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <TableSettingsModal
+        open={tsEcr.open}
+        onOpenChange={tsEcr.setOpen}
+        tableName={tsEcr.tableName}
+        settingsId={tsEcr.settingsId}
+        defaultVisibleKeys={tsEcr.defaultVisibleKeys}
+        onSave={tsEcr.applySettings}
+      />
+      <TableSettingsModal
+        open={tsEcn.open}
+        onOpenChange={tsEcn.setOpen}
+        tableName={tsEcn.tableName}
+        settingsId={tsEcn.settingsId}
+        defaultVisibleKeys={tsEcn.defaultVisibleKeys}
+        onSave={tsEcn.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_7/design/design-request/page.tsx b/frontend/app/(main)/COMPANY_7/design/design-request/page.tsx
index 29ec9df9..e83c22b3 100644
--- a/frontend/app/(main)/COMPANY_7/design/design-request/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/design/design-request/page.tsx
@@ -2,27 +2,25 @@
 
 import React, { useState, useMemo, useCallback, useEffect } from "react";
 import {
-  Search,
-  RotateCcw,
   Plus,
   Pencil,
   Trash2,
   Calendar,
   Upload,
-  PointerIcon,
   Ruler,
-  ClipboardList,
   FileText,
   Loader2,
+  Inbox,
+  Save,
+  Settings2,
 } from "lucide-react";
+import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Select,
   SelectContent,
@@ -35,14 +33,9 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogDescription,
   DialogFooter,
+  DialogDescription,
 } from "@/components/ui/dialog";
-import {
-  ResizablePanelGroup,
-  ResizablePanel,
-  ResizableHandle,
-} from "@/components/ui/resizable";
 import {
   Table,
   TableBody,
@@ -51,12 +44,16 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import {
   getDesignRequestList,
   createDesignRequest,
   updateDesignRequest,
   deleteDesignRequest,
 } from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 
 // ========== 타입 ==========
 interface HistoryItem {
@@ -105,25 +102,25 @@ interface DesignRequest {
 const STATUS_STYLES: Record<string, string> = {
   신규접수: "bg-muted text-foreground",
   접수대기: "bg-muted text-foreground",
-  검토중: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
-  설계진행: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
-  설계검토: "bg-violet-100 text-violet-800 dark:bg-violet-900/30 dark:text-violet-300",
-  출도완료: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
-  반려: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
+  검토중: "bg-warning/10 text-warning",
+  설계진행: "bg-info/10 text-info",
+  설계검토: "bg-primary/10 text-primary",
+  출도완료: "bg-success/10 text-success",
+  반려: "bg-destructive/10 text-destructive",
   종료: "bg-muted text-muted-foreground",
 };
 
 const TYPE_STYLES: Record<string, string> = {
-  신규설계: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
-  유사설계: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
-  개조설계: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+  신규설계: "bg-info/10 text-info",
+  유사설계: "bg-success/10 text-success",
+  개조설계: "bg-warning/10 text-warning",
 };
 
 const PRIORITY_STYLES: Record<string, string> = {
-  긴급: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
-  높음: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+  긴급: "bg-destructive/10 text-destructive",
+  높음: "bg-warning/10 text-warning",
   보통: "bg-muted text-foreground",
-  낮음: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
+  낮음: "bg-success/10 text-success",
 };
 
 const STATUS_PROGRESS: Record<string, number> = {
@@ -138,16 +135,16 @@ const STATUS_PROGRESS: Record<string, number> = {
 };
 
 function getProgressColor(p: number) {
-  if (p >= 100) return "bg-emerald-500";
-  if (p >= 60) return "bg-amber-500";
-  if (p >= 20) return "bg-blue-500";
+  if (p >= 100) return "bg-success";
+  if (p >= 60) return "bg-warning";
+  if (p >= 20) return "bg-info";
   return "bg-muted";
 }
 
 function getProgressTextColor(p: number) {
-  if (p >= 100) return "text-emerald-500";
-  if (p >= 60) return "text-amber-500";
-  if (p >= 20) return "text-blue-500";
+  if (p >= 100) return "text-success";
+  if (p >= 60) return "text-warning";
+  if (p >= 20) return "text-info";
   return "text-muted-foreground";
 }
 
@@ -168,17 +165,30 @@ const INITIAL_FORM = {
   content: "",
 };
 
+// ========== Grid Columns ==========
+const DR_GRID_COLUMNS = [
+  { key: "request_no", label: "의뢰번호" },
+  { key: "design_type", label: "유형" },
+  { key: "status", label: "상태" },
+  { key: "priority", label: "우선순위" },
+  { key: "target_name", label: "설비/제품명" },
+  { key: "customer", label: "고객명" },
+  { key: "designer", label: "설계담당" },
+  { key: "due_date", label: "납기" },
+  { key: "progress", label: "진행률" },
+];
+
 // ========== 메인 컴포넌트 ==========
 export default function DesignRequestPage() {
+  const ts = useTableSettings("c16-design-request", "dsn_design_request", DR_GRID_COLUMNS);
   const [requests, setRequests] = useState<DesignRequest[]>([]);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [detailOpen, setDetailOpen] = useState(false);
 
-  const [filterStatus, setFilterStatus] = useState("");
-  const [filterType, setFilterType] = useState("");
-  const [filterPriority, setFilterPriority] = useState("");
-  const [filterKeyword, setFilterKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   const [modalOpen, setModalOpen] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
@@ -192,13 +202,6 @@ export default function DesignRequestPage() {
     setLoading(true);
     try {
       const params: Record<string, string> = { source_type: "dr" };
-      if (filterStatus && filterStatus !== "__all__") params.status = filterStatus;
-      if (filterType && filterType !== "__all__") {
-        // design_type은 서버에서 직접 필터링하지 않으므로 클라이언트에서 처리
-      }
-      if (filterPriority && filterPriority !== "__all__") params.priority = filterPriority;
-      if (filterKeyword) params.search = filterKeyword;
-
       const res = await getDesignRequestList(params);
       if (res.success && res.data) {
         setRequests(res.data);
@@ -210,20 +213,35 @@ export default function DesignRequestPage() {
     } finally {
       setLoading(false);
     }
-  }, [filterStatus, filterPriority, filterKeyword]);
+  }, []);
 
   useEffect(() => {
     fetchRequests();
   }, [fetchRequests]);
 
-  // 클라이언트 사이드 필터링 (design_type은 서버에서 지원하지 않으므로)
+  // 클라이언트 사이드 필터링 (DynamicSearchFilter)
   const filteredRequests = useMemo(() => {
-    let list = requests;
-    if (filterType && filterType !== "__all__") {
-      list = list.filter((item) => item.design_type === filterType);
-    }
-    return list;
-  }, [requests, filterType]);
+    if (searchFilters.length === 0) return requests;
+    return requests.filter((item) => {
+      for (const f of searchFilters) {
+        const val = item[f.columnName as keyof DesignRequest];
+        const strVal = val !== undefined && val !== null ? (Array.isArray(val) ? val.join(",") : String(val)) : "";
+        if (f.operator === "contains") {
+          if (!strVal.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (strVal !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(strVal)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && strVal < from) return false;
+          if (to && strVal > to) return false;
+        }
+      }
+      return true;
+    });
+  }, [requests, searchFilters]);
 
   const selectedItem = useMemo(() => {
     if (!selectedId) return null;
@@ -238,12 +256,6 @@ export default function DesignRequestPage() {
     };
   }, [requests]);
 
-  const handleResetFilter = useCallback(() => {
-    setFilterStatus("");
-    setFilterType("");
-    setFilterPriority("");
-    setFilterKeyword("");
-  }, []);
 
   // 채번: 기존 데이터 기반으로 다음 번호 생성
   const generateNextNo = useCallback(() => {
@@ -288,14 +300,15 @@ export default function DesignRequestPage() {
       drawing_no: selectedItem.drawing_no || "",
       content: selectedItem.content || "",
     });
+    setDetailOpen(false);
     setModalOpen(true);
   }, [selectedItem]);
 
   const handleSave = useCallback(async () => {
-    if (!form.target_name.trim()) { alert("설비/제품명을 입력하세요."); return; }
-    if (!form.design_type) { alert("의뢰 유형을 선택하세요."); return; }
-    if (!form.due_date) { alert("납기를 입력하세요."); return; }
-    if (!form.spec.trim()) { alert("요구사양을 입력하세요."); return; }
+    if (!form.target_name.trim()) { toast.error("설비/제품명을 입력해 주세요."); return; }
+    if (!form.design_type) { toast.error("의뢰 유형을 선택해 주세요."); return; }
+    if (!form.due_date) { toast.error("납기를 입력해 주세요."); return; }
+    if (!form.spec.trim()) { toast.error("요구사양을 입력해 주세요."); return; }
 
     setSaving(true);
     try {
@@ -334,6 +347,7 @@ export default function DesignRequestPage() {
       }
 
       if (res.success) {
+        toast.success(isEditMode ? "수정되었어요." : "등록되었어요.");
         setModalOpen(false);
         await fetchRequests();
         if (isEditMode && editingId) {
@@ -342,10 +356,10 @@ export default function DesignRequestPage() {
           setSelectedId(res.data.id);
         }
       } else {
-        alert(`저장 실패: ${res.message || "알 수 없는 오류"}`);
+        toast.error(res.message || "저장에 실패했어요.");
       }
     } catch (err: any) {
-      alert(`저장 중 오류가 발생했습니다: ${err.message}`);
+      toast.error("저장에 실패했어요.");
     } finally {
       setSaving(false);
     }
@@ -354,18 +368,20 @@ export default function DesignRequestPage() {
   const handleDelete = useCallback(async () => {
     if (!selectedId || !selectedItem) return;
     const displayNo = selectedItem.request_no || selectedId;
-    if (!confirm(`${displayNo} 설계의뢰를 삭제하시겠습니까?`)) return;
+    if (!confirm(`${displayNo} 설계의뢰를 삭제할까요?`)) return;
 
     try {
       const res = await deleteDesignRequest(selectedId);
       if (res.success) {
+        toast.success("삭제되었어요.");
         setSelectedId(null);
+        setDetailOpen(false);
         await fetchRequests();
       } else {
-        alert(`삭제 실패: ${res.message || "알 수 없는 오류"}`);
+        toast.error(res.message || "삭제에 실패했어요.");
       }
     } catch (err: any) {
-      alert(`삭제 중 오류가 발생했습니다: ${err.message}`);
+      toast.error("삭제에 실패했어요.");
     }
   }, [selectedId, selectedItem, fetchRequests]);
 
@@ -375,9 +391,9 @@ export default function DesignRequestPage() {
       const due = new Date(dueDate);
       const diff = Math.ceil((due.getTime() - today.getTime()) / 86400000);
       if (diff < 0) return { text: `${Math.abs(diff)}일 초과`, color: "text-destructive" };
-      if (diff === 0) return { text: "오늘", color: "text-amber-500" };
-      if (diff <= 7) return { text: `${diff}일 남음`, color: "text-amber-500" };
-      return { text: `${diff}일 남음`, color: "text-emerald-500" };
+      if (diff === 0) return { text: "오늘", color: "text-warning" };
+      if (diff <= 7) return { text: `${diff}일 남음`, color: "text-warning" };
+      return { text: `${diff}일 남음`, color: "text-success" };
     },
     [today]
   );
@@ -386,444 +402,370 @@ export default function DesignRequestPage() {
     return STATUS_PROGRESS[status] ?? 0;
   }, []);
 
+  const handleRowClick = useCallback((id: string) => {
+    setSelectedId(id);
+    setDetailOpen(true);
+  }, []);
+
   return (
-    <div className="flex h-full flex-col gap-2 p-3">
-      {/* 검색 섹션 */}
-      <div className="flex shrink-0 flex-wrap items-center gap-2 rounded-lg border bg-card px-3 py-2">
-        <Select value={filterStatus} onValueChange={setFilterStatus}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="상태 전체" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">상태 전체</SelectItem>
-            {["신규접수", "접수대기", "검토중", "설계진행", "설계검토", "출도완료", "반려", "종료"].map((s) => (
-              <SelectItem key={s} value={s}>{s}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Select value={filterType} onValueChange={setFilterType}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="유형 전체" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">유형 전체</SelectItem>
-            {["신규설계", "유사설계", "개조설계"].map((s) => (
-              <SelectItem key={s} value={s}>{s}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Select value={filterPriority} onValueChange={setFilterPriority}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="우선순위 전체" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">우선순위 전체</SelectItem>
-            {["긴급", "높음", "보통", "낮음"].map((s) => (
-              <SelectItem key={s} value={s}>{s}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <div className="relative">
-          <Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            value={filterKeyword}
-            onChange={(e) => setFilterKeyword(e.target.value)}
-            placeholder="의뢰번호 / 설비명 / 고객명 검색"
-            className="h-7 w-[240px] pl-7 text-xs"
-          />
-        </div>
-        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={handleResetFilter}>
-          <RotateCcw className="mr-1 h-3 w-3" />초기화
-        </Button>
-        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => fetchRequests()}>
-          <Search className="mr-1 h-3 w-3" />조회
-        </Button>
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 검색 필터 */}
+      <div className="shrink-0">
+        <DynamicSearchFilter
+          tableName="dsn_design_request"
+          filterId="c16-design-request"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredRequests.length}
+        />
       </div>
 
-      {/* 메인 영역 */}
-      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1 rounded-lg">
-        {/* 왼쪽: 목록 */}
-        <ResizablePanel defaultSize={55} minSize={30}>
-          <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
-            <div className="flex shrink-0 items-center justify-between border-b bg-muted/30 px-3 py-1.5">
-              <span className="text-sm font-bold">
-                <Ruler className="mr-1 inline h-4 w-4" />
-                설계의뢰 목록 (<span className="text-primary">{filteredRequests.length}</span>건)
-              </span>
-              <Button size="sm" className="h-7 text-xs" onClick={handleOpenRegister}>
-                <Plus className="mr-1 h-3 w-3" />설계의뢰 등록
-              </Button>
-            </div>
-            <ScrollArea className="flex-1">
-              {loading ? (
-                <div className="flex items-center justify-center py-16">
-                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                  <span className="ml-2 text-sm text-muted-foreground">불러오는 중...</span>
-                </div>
-              ) : (
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="w-[100px] text-[11px]">의뢰번호</TableHead>
-                      <TableHead className="w-[70px] text-center text-[11px]">유형</TableHead>
-                      <TableHead className="w-[70px] text-center text-[11px]">상태</TableHead>
-                      <TableHead className="w-[60px] text-center text-[11px]">우선순위</TableHead>
-                      <TableHead className="text-[11px]">설비/제품명</TableHead>
-                      <TableHead className="w-[90px] text-[11px]">고객명</TableHead>
-                      <TableHead className="w-[70px] text-[11px]">설계담당</TableHead>
-                      <TableHead className="w-[85px] text-[11px]">납기</TableHead>
-                      <TableHead className="w-[65px] text-center text-[11px]">진행률</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {filteredRequests.length === 0 && (
-                      <TableRow>
-                        <TableCell colSpan={9} className="py-12 text-center">
-                          <div className="flex flex-col items-center gap-1 text-muted-foreground">
-                            <Ruler className="h-8 w-8" />
-                            <span className="text-sm">등록된 설계의뢰가 없습니다</span>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    )}
-                    {filteredRequests.map((item) => {
-                      const progress = getProgress(item.status);
+      {/* 현황 카드 */}
+      <div className="grid grid-cols-3 gap-3 shrink-0">
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">접수대기</div>
+          <div className="text-xl font-bold text-info">{statusCounts.접수대기}</div>
+        </div>
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">설계진행</div>
+          <div className="text-xl font-bold text-warning">{statusCounts.설계진행}</div>
+        </div>
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">출도완료</div>
+          <div className="text-xl font-bold text-success">{statusCounts.출도완료}</div>
+        </div>
+      </div>
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold">설계의뢰 관리</h2>
+          <Badge variant="secondary" className="font-mono">{filteredRequests.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" onClick={handleOpenRegister}>
+            <Plus className="w-4 h-4 mr-1.5" /> 설계의뢰 등록
+          </Button>
+          <div className="mx-1 h-6 w-px bg-border" />
+          <Button variant="outline" size="sm" disabled={!selectedId} onClick={handleOpenEdit}>
+            <Pencil className="w-4 h-4 mr-1.5" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 테이블 영역 */}
+      <div className="flex-1 flex flex-col overflow-hidden border rounded-lg bg-card">
+        <EDataTable<DesignRequest>
+          columns={ts.visibleColumns.map((col): EDataTableColumn<DesignRequest> => ({
+            key: col.key,
+            label: col.label,
+            width: col.key === "request_no" ? "w-[100px]" : col.key === "design_type" ? "w-[70px]" : col.key === "status" ? "w-[70px]" : col.key === "priority" ? "w-[60px]" : col.key === "customer" ? "w-[90px]" : col.key === "designer" ? "w-[70px]" : col.key === "due_date" ? "w-[85px]" : col.key === "progress" ? "w-[65px]" : undefined,
+            align: (col.key === "design_type" || col.key === "status" || col.key === "priority" || col.key === "progress") ? "center" : undefined,
+            render: col.key === "request_no"
+              ? (val: any) => <span className="text-[11px] font-semibold text-primary">{val || "-"}</span>
+              : col.key === "design_type"
+              ? (val: any) => val ? <Badge className={cn("text-[9px]", TYPE_STYLES[val])}>{val}</Badge> : <span>-</span>
+              : col.key === "status"
+              ? (val: any) => <Badge className={cn("text-[9px]", STATUS_STYLES[val])}>{val}</Badge>
+              : col.key === "priority"
+              ? (val: any) => <Badge className={cn("text-[9px]", PRIORITY_STYLES[val])}>{val}</Badge>
+              : col.key === "progress"
+              ? (_val: any, row: DesignRequest) => {
+                  const progress = STATUS_PROGRESS[row.status] ?? 0;
+                  return (
+                    <div className="flex items-center gap-1.5">
+                      <div className="h-1.5 w-12 overflow-hidden rounded-full bg-muted">
+                        <div className={cn("h-full rounded-full transition-all", getProgressColor(progress))} style={{ width: `${progress}%` }} />
+                      </div>
+                      <span className={cn("text-[10px] font-semibold", getProgressTextColor(progress))}>{progress}%</span>
+                    </div>
+                  );
+                }
+              : undefined,
+          }))}
+          data={ts.groupData(filteredRequests)}
+          loading={loading}
+          emptyMessage="등록된 설계의뢰가 없어요"
+          selectedId={selectedId}
+          onSelect={(id) => setSelectedId(id)}
+          onRowClick={(row) => handleRowClick(row.id)}
+          draggableColumns={false}
+        />
+      </div>
+
+      {/* 상세 정보 다이얼로그 */}
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="max-w-[900px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{selectedItem ? `설계의뢰 상세 — ${selectedItem.request_no}` : "설계의뢰 상세"}</DialogTitle>
+            <DialogDescription>설계의뢰의 상세 정보를 확인해요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        {selectedItem && (
+          <div className="space-y-4">
+            {/* 기본 정보 */}
+            <div>
+              <div className="mb-2 text-xs font-bold">
+                <FileText className="mr-1 inline h-3.5 w-3.5" />기본 정보
+              </div>
+              <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-lg border bg-muted/10 p-3">
+                <InfoRow label="의뢰번호" value={<span className="font-semibold text-primary">{selectedItem.request_no || "-"}</span>} />
+                <InfoRow label="상태" value={<Badge className={cn("text-[10px]", STATUS_STYLES[selectedItem.status])}>{selectedItem.status}</Badge>} />
+                <InfoRow label="유형" value={selectedItem.design_type ? <Badge className={cn("text-[10px]", TYPE_STYLES[selectedItem.design_type])}>{selectedItem.design_type}</Badge> : "-"} />
+                <InfoRow label="우선순위" value={<Badge className={cn("text-[10px]", PRIORITY_STYLES[selectedItem.priority])}>{selectedItem.priority}</Badge>} />
+                <InfoRow label="설비/제품명" value={selectedItem.target_name || "-"} />
+                <InfoRow label="고객명" value={selectedItem.customer || "-"} />
+                <InfoRow label="의뢰부서 / 의뢰자" value={`${selectedItem.req_dept || "-"} / ${selectedItem.requester || "-"}`} />
+                <InfoRow label="설계담당" value={selectedItem.designer || "미배정"} />
+                <InfoRow label="의뢰일자" value={selectedItem.request_date || "-"} />
+                <InfoRow
+                  label="납기"
+                  value={
+                    selectedItem.due_date ? (
+                      <span>
+                        {selectedItem.due_date}{" "}
+                        <span className={cn("text-[11px]", getDueDateInfo(selectedItem.due_date).color)}>
+                          ({getDueDateInfo(selectedItem.due_date).text})
+                        </span>
+                      </span>
+                    ) : "-"
+                  }
+                />
+                <InfoRow label="수주번호" value={selectedItem.order_no || "-"} />
+                <InfoRow
+                  label="진행률"
+                  value={
+                    (() => {
+                      const progress = getProgress(selectedItem.status);
                       return (
-                        <TableRow
-                          key={item.id}
-                          className={cn("cursor-pointer", selectedId === item.id && "bg-accent")}
-                          onClick={() => setSelectedId(item.id)}
-                        >
-                          <TableCell className="text-[11px] font-semibold text-primary">{item.request_no || "-"}</TableCell>
-                          <TableCell className="text-center">
-                            {item.design_type ? (
-                              <Badge className={cn("text-[9px]", TYPE_STYLES[item.design_type])}>{item.design_type}</Badge>
-                            ) : "-"}
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <Badge className={cn("text-[9px]", STATUS_STYLES[item.status])}>{item.status}</Badge>
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <Badge className={cn("text-[9px]", PRIORITY_STYLES[item.priority])}>{item.priority}</Badge>
-                          </TableCell>
-                          <TableCell className="text-xs font-medium">{item.target_name || "-"}</TableCell>
-                          <TableCell className="text-[11px]">{item.customer || "-"}</TableCell>
-                          <TableCell className="text-[11px]">{item.designer || "-"}</TableCell>
-                          <TableCell className="text-[11px]">{item.due_date || "-"}</TableCell>
-                          <TableCell>
-                            <div className="flex items-center gap-1.5">
-                              <div className="h-1.5 w-12 overflow-hidden rounded-full bg-muted">
-                                <div className={cn("h-full rounded-full transition-all", getProgressColor(progress))} style={{ width: `${progress}%` }} />
-                              </div>
-                              <span className={cn("text-[10px] font-semibold", getProgressTextColor(progress))}>{progress}%</span>
-                            </div>
-                          </TableCell>
-                        </TableRow>
+                        <div className="flex items-center gap-2">
+                          <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
+                            <div className={cn("h-full rounded-full", getProgressColor(progress))} style={{ width: `${progress}%` }} />
+                          </div>
+                          <span className={cn("text-xs font-bold", getProgressTextColor(progress))}>{progress}%</span>
+                        </div>
                       );
-                    })}
-                  </TableBody>
-                </Table>
-              )}
-            </ScrollArea>
-          </div>
-        </ResizablePanel>
-
-        <ResizableHandle withHandle />
-
-        {/* 오른쪽: 상세 */}
-        <ResizablePanel defaultSize={45} minSize={25}>
-          <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
-            <div className="flex shrink-0 items-center justify-between border-b bg-muted/30 px-3 py-1.5">
-              <span className="text-sm font-bold">
-                <ClipboardList className="mr-1 inline h-4 w-4" />
-                상세 정보
-              </span>
-              {selectedItem && (
-                <div className="flex gap-1.5">
-                  <Button variant="outline" size="sm" className="h-6 text-[10px]" onClick={handleOpenEdit}>
-                    <Pencil className="mr-0.5 h-3 w-3" />수정
-                  </Button>
-                  <Button variant="outline" size="sm" className="h-6 text-[10px] text-destructive hover:text-destructive" onClick={handleDelete}>
-                    <Trash2 className="mr-0.5 h-3 w-3" />삭제
-                  </Button>
-                </div>
-              )}
+                    })()
+                  }
+                />
+              </div>
             </div>
-            <ScrollArea className="flex-1">
-              <div className="p-3">
-                {/* 상태 카드 */}
-                <div className="mb-3 grid grid-cols-3 gap-2">
-                  <Card
-                    className="cursor-pointer rounded-lg border px-3 py-2 shadow-none transition-colors hover:bg-accent/50"
-                    onClick={() => setFilterStatus("접수대기")}
-                  >
-                    <div className="text-[10px] text-muted-foreground">접수대기</div>
-                    <div className="text-xl font-bold text-blue-500">{statusCounts.접수대기}</div>
-                  </Card>
-                  <Card
-                    className="cursor-pointer rounded-lg border px-3 py-2 shadow-none transition-colors hover:bg-accent/50"
-                    onClick={() => setFilterStatus("설계진행")}
-                  >
-                    <div className="text-[10px] text-muted-foreground">설계진행</div>
-                    <div className="text-xl font-bold text-amber-500">{statusCounts.설계진행}</div>
-                  </Card>
-                  <Card
-                    className="cursor-pointer rounded-lg border px-3 py-2 shadow-none transition-colors hover:bg-accent/50"
-                    onClick={() => setFilterStatus("출도완료")}
-                  >
-                    <div className="text-[10px] text-muted-foreground">출도완료</div>
-                    <div className="text-xl font-bold text-emerald-500">{statusCounts.출도완료}</div>
-                  </Card>
-                </div>
 
-                {/* 상세 내용 */}
-                {!selectedItem ? (
-                  <div className="flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground">
-                    <PointerIcon className="h-8 w-8" />
-                    <span className="text-sm">좌측 목록에서 설계의뢰를 선택하세요</span>
+            {/* 요구사양 */}
+            <div>
+              <div className="mb-2 text-xs font-bold">
+                <FileText className="mr-1 inline h-3.5 w-3.5" />요구사양
+              </div>
+              <div className="rounded-lg border bg-muted/10 p-3">
+                <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed">{selectedItem.spec || "-"}</pre>
+                {selectedItem.drawing_no && (
+                  <div className="mt-2 text-xs">
+                    <span className="text-muted-foreground">참조 도면: </span>
+                    <span className="text-primary">{selectedItem.drawing_no}</span>
                   </div>
-                ) : (
-                  <div className="space-y-4">
-                    {/* 기본 정보 */}
-                    <div>
-                      <div className="mb-2 text-xs font-bold">
-                        <FileText className="mr-1 inline h-3.5 w-3.5" />기본 정보
-                      </div>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-lg border bg-muted/10 p-3">
-                        <InfoRow label="의뢰번호" value={<span className="font-semibold text-primary">{selectedItem.request_no || "-"}</span>} />
-                        <InfoRow label="상태" value={<Badge className={cn("text-[10px]", STATUS_STYLES[selectedItem.status])}>{selectedItem.status}</Badge>} />
-                        <InfoRow label="유형" value={selectedItem.design_type ? <Badge className={cn("text-[10px]", TYPE_STYLES[selectedItem.design_type])}>{selectedItem.design_type}</Badge> : "-"} />
-                        <InfoRow label="우선순위" value={<Badge className={cn("text-[10px]", PRIORITY_STYLES[selectedItem.priority])}>{selectedItem.priority}</Badge>} />
-                        <InfoRow label="설비/제품명" value={selectedItem.target_name || "-"} />
-                        <InfoRow label="고객명" value={selectedItem.customer || "-"} />
-                        <InfoRow label="의뢰부서 / 의뢰자" value={`${selectedItem.req_dept || "-"} / ${selectedItem.requester || "-"}`} />
-                        <InfoRow label="설계담당" value={selectedItem.designer || "미배정"} />
-                        <InfoRow label="의뢰일자" value={selectedItem.request_date || "-"} />
-                        <InfoRow
-                          label="납기"
-                          value={
-                            selectedItem.due_date ? (
-                              <span>
-                                {selectedItem.due_date}{" "}
-                                <span className={cn("text-[11px]", getDueDateInfo(selectedItem.due_date).color)}>
-                                  ({getDueDateInfo(selectedItem.due_date).text})
-                                </span>
-                              </span>
-                            ) : "-"
-                          }
-                        />
-                        <InfoRow label="수주번호" value={selectedItem.order_no || "-"} />
-                        <InfoRow
-                          label="진행률"
-                          value={
-                            (() => {
-                              const progress = getProgress(selectedItem.status);
-                              return (
-                                <div className="flex items-center gap-2">
-                                  <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
-                                    <div className={cn("h-full rounded-full", getProgressColor(progress))} style={{ width: `${progress}%` }} />
-                                  </div>
-                                  <span className={cn("text-xs font-bold", getProgressTextColor(progress))}>{progress}%</span>
-                                </div>
-                              );
-                            })()
-                          }
-                        />
-                      </div>
-                    </div>
-
-                    {/* 요구사양 */}
-                    <div>
-                      <div className="mb-2 text-xs font-bold">
-                        <FileText className="mr-1 inline h-3.5 w-3.5" />요구사양
-                      </div>
-                      <div className="rounded-lg border bg-muted/10 p-3">
-                        <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed">{selectedItem.spec || "-"}</pre>
-                        {selectedItem.drawing_no && (
-                          <div className="mt-2 text-xs">
-                            <span className="text-muted-foreground">참조 도면: </span>
-                            <span className="text-primary">{selectedItem.drawing_no}</span>
-                          </div>
-                        )}
-                        {selectedItem.content && (
-                          <div className="mt-1 text-xs">
-                            <span className="text-muted-foreground">비고: </span>{selectedItem.content}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* 진행 이력 */}
-                    {selectedItem.history && selectedItem.history.length > 0 && (
-                      <div>
-                        <div className="mb-2 text-xs font-bold">
-                          <Calendar className="mr-1 inline h-3.5 w-3.5" />진행 이력
-                        </div>
-                        <div className="space-y-0">
-                          {selectedItem.history.map((h, idx) => {
-                            const isLast = idx === selectedItem.history.length - 1;
-                            const isDone = h.step === "출도완료" || h.step === "종료";
-                            return (
-                              <div key={h.id || idx} className="flex gap-3">
-                                <div className="flex flex-col items-center">
-                                  <div
-                                    className={cn(
-                                      "mt-1 h-2.5 w-2.5 shrink-0 rounded-full border-2",
-                                      isLast && !isDone
-                                        ? "border-blue-500 bg-blue-500"
-                                        : isDone || !isLast
-                                          ? "border-emerald-500 bg-emerald-500"
-                                          : "border-muted-foreground bg-muted-foreground"
-                                    )}
-                                  />
-                                  {!isLast && <div className="w-px flex-1 bg-border" />}
-                                </div>
-                                <div className="pb-3">
-                                  <Badge className={cn("text-[9px]", STATUS_STYLES[h.step])}>{h.step}</Badge>
-                                  <div className="mt-0.5 text-xs">{h.description}</div>
-                                  <div className="text-[10px] text-muted-foreground">{h.history_date} · {h.user_name}</div>
-                                </div>
-                              </div>
-                            );
-                          })}
-                        </div>
-                      </div>
-                    )}
+                )}
+                {selectedItem.content && (
+                  <div className="mt-1 text-xs">
+                    <span className="text-muted-foreground">비고: </span>{selectedItem.content}
                   </div>
                 )}
               </div>
-            </ScrollArea>
+            </div>
+
+            {/* 진행 이력 */}
+            {selectedItem.history && selectedItem.history.length > 0 && (
+              <div>
+                <div className="mb-2 text-xs font-bold">
+                  <Calendar className="mr-1 inline h-3.5 w-3.5" />진행 이력
+                </div>
+                <div className="space-y-0">
+                  {selectedItem.history.map((h, idx) => {
+                    const isLast = idx === selectedItem.history.length - 1;
+                    const isDone = h.step === "출도완료" || h.step === "종료";
+                    return (
+                      <div key={h.id || idx} className="flex gap-3">
+                        <div className="flex flex-col items-center">
+                          <div
+                            className={cn(
+                              "mt-1 h-2.5 w-2.5 shrink-0 rounded-full border-2",
+                              isLast && !isDone
+                                ? "border-primary bg-primary"
+                                : isDone || !isLast
+                                  ? "border-success bg-success"
+                                  : "border-muted-foreground bg-muted-foreground"
+                            )}
+                          />
+                          {!isLast && <div className="w-px flex-1 bg-border" />}
+                        </div>
+                        <div className="pb-3">
+                          <Badge className={cn("text-[9px]", STATUS_STYLES[h.step])}>{h.step}</Badge>
+                          <div className="mt-0.5 text-xs">{h.description}</div>
+                          <div className="text-[10px] text-muted-foreground">{h.history_date} · {h.user_name}</div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
           </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
+        )}
+          </div>
+          <DialogFooter>
+            {selectedItem && (
+              <>
+                <Button variant="outline" size="sm" onClick={handleOpenEdit}>
+                  <Pencil className="mr-1 h-3.5 w-3.5" />수정
+                </Button>
+                <Button variant="outline" size="sm" className="text-destructive hover:text-destructive" onClick={handleDelete}>
+                  <Trash2 className="mr-1 h-3.5 w-3.5" />삭제
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 등록/수정 모달 */}
       <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[1100px]">
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
           <DialogHeader>
-            <DialogTitle className="text-lg">
-              {isEditMode ? <><Pencil className="mr-1.5 inline h-5 w-5" />설계의뢰 수정</> : <><Plus className="mr-1.5 inline h-5 w-5" />설계의뢰 등록</>}
-            </DialogTitle>
-            <DialogDescription className="text-sm">
-              {isEditMode ? "설계의뢰 정보를 수정합니다." : "새 설계의뢰를 등록합니다."}
-            </DialogDescription>
+            <DialogTitle>{isEditMode ? "설계의뢰 수정" : "설계의뢰 등록"}</DialogTitle>
+            <DialogDescription>{isEditMode ? "설계의뢰 정보를 수정해요." : "새 설계의뢰를 등록해요."}</DialogDescription>
           </DialogHeader>
-          <div className="flex gap-6">
-            {/* 좌측: 기본 정보 */}
-            <div className="w-[420px] shrink-0 space-y-4">
-              <div className="text-sm font-bold">
-                <FileText className="mr-1 inline h-4 w-4" />의뢰 기본 정보
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-6 p-6">
+          {/* 좌측: 기본 정보 */}
+          <div className="md:w-[420px] shrink-0 space-y-4">
+            <h3 className="text-sm font-semibold pb-2 border-b">의뢰 기본 정보</h3>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰번호</Label>
+              <Input value={form.request_no} readOnly className="h-9 bg-muted cursor-not-allowed" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰일자</Label>
+                <Input type="date" value={form.request_date} onChange={(e) => setForm((p) => ({ ...p, request_date: e.target.value }))} className="h-9" />
               </div>
               <div>
-                <Label className="text-sm">의뢰번호</Label>
-                <Input value={form.request_no} readOnly className="h-9 text-sm" />
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <Label className="text-sm">의뢰일자</Label>
-                  <Input type="date" value={form.request_date} onChange={(e) => setForm((p) => ({ ...p, request_date: e.target.value }))} className="h-9 text-sm" />
-                </div>
-                <div>
-                  <Label className="text-sm">납기 <span className="text-destructive">*</span></Label>
-                  <Input type="date" value={form.due_date} onChange={(e) => setForm((p) => ({ ...p, due_date: e.target.value }))} className="h-9 text-sm" />
-                </div>
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <Label className="text-sm">의뢰 유형 <span className="text-destructive">*</span></Label>
-                  <Select value={form.design_type} onValueChange={(v) => setForm((p) => ({ ...p, design_type: v }))}>
-                    <SelectTrigger className="h-9 text-sm" size="sm"><SelectValue placeholder="선택" /></SelectTrigger>
-                    <SelectContent>
-                      {["신규설계", "유사설계", "개조설계"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div>
-                  <Label className="text-sm">우선순위 <span className="text-destructive">*</span></Label>
-                  <Select value={form.priority} onValueChange={(v) => setForm((p) => ({ ...p, priority: v }))}>
-                    <SelectTrigger className="h-9 text-sm" size="sm"><SelectValue placeholder="선택" /></SelectTrigger>
-                    <SelectContent>
-                      {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-                    </SelectContent>
-                  </Select>
-                </div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">납기 <span className="text-destructive">*</span></Label>
+                <Input type="date" value={form.due_date} onChange={(e) => setForm((p) => ({ ...p, due_date: e.target.value }))} className="h-9" />
               </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-sm">설비/제품명 <span className="text-destructive">*</span></Label>
-                <Input value={form.target_name} onChange={(e) => setForm((p) => ({ ...p, target_name: e.target.value }))} placeholder="설비 또는 제품명 입력" className="h-9 text-sm" />
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <Label className="text-sm">의뢰부서</Label>
-                  <Select value={form.req_dept} onValueChange={(v) => setForm((p) => ({ ...p, req_dept: v }))}>
-                    <SelectTrigger className="h-9 text-sm" size="sm"><SelectValue placeholder="선택" /></SelectTrigger>
-                    <SelectContent>
-                      {["영업팀", "기획팀", "생산팀", "품질팀"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div>
-                  <Label className="text-sm">의뢰자</Label>
-                  <Input value={form.requester} onChange={(e) => setForm((p) => ({ ...p, requester: e.target.value }))} placeholder="의뢰자명" className="h-9 text-sm" />
-                </div>
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <Label className="text-sm">고객명</Label>
-                  <Input value={form.customer} onChange={(e) => setForm((p) => ({ ...p, customer: e.target.value }))} placeholder="고객/거래처명" className="h-9 text-sm" />
-                </div>
-                <div>
-                  <Label className="text-sm">수주번호</Label>
-                  <Input value={form.order_no} onChange={(e) => setForm((p) => ({ ...p, order_no: e.target.value }))} placeholder="관련 수주번호" className="h-9 text-sm" />
-                </div>
-              </div>
-              <div>
-                <Label className="text-sm">설계담당자</Label>
-                <Select value={form.designer} onValueChange={(v) => setForm((p) => ({ ...p, designer: v }))}>
-                  <SelectTrigger className="h-9 text-sm" size="sm"><SelectValue placeholder="선택" /></SelectTrigger>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰 유형 <span className="text-destructive">*</span></Label>
+                <Select value={form.design_type} onValueChange={(v) => setForm((p) => ({ ...p, design_type: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
                   <SelectContent>
-                    {["이설계", "박도면", "최기구", "김전장"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                    {["신규설계", "유사설계", "개조설계"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">우선순위 <span className="text-destructive">*</span></Label>
+                <Select value={form.priority} onValueChange={(v) => setForm((p) => ({ ...p, priority: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
                   </SelectContent>
                 </Select>
               </div>
             </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설비/제품명 <span className="text-destructive">*</span></Label>
+              <Input value={form.target_name} onChange={(e) => setForm((p) => ({ ...p, target_name: e.target.value }))} placeholder="설비 또는 제품명 입력" className="h-9" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰부서</Label>
+                <Select value={form.req_dept} onValueChange={(v) => setForm((p) => ({ ...p, req_dept: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["영업팀", "기획팀", "생산팀", "품질팀"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰자</Label>
+                <Input value={form.requester} onChange={(e) => setForm((p) => ({ ...p, requester: e.target.value }))} placeholder="의뢰자명" className="h-9" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">고객명</Label>
+                <Input value={form.customer} onChange={(e) => setForm((p) => ({ ...p, customer: e.target.value }))} placeholder="고객/거래처명" className="h-9" />
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">수주번호</Label>
+                <Input value={form.order_no} onChange={(e) => setForm((p) => ({ ...p, order_no: e.target.value }))} placeholder="관련 수주번호" className="h-9" />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설계담당자</Label>
+              <Select value={form.designer} onValueChange={(v) => setForm((p) => ({ ...p, designer: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  {["이설계", "박도면", "최기구", "김전장"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
 
-            {/* 우측: 상세 내용 */}
-            <div className="flex min-w-0 flex-1 flex-col gap-4">
-              <div className="text-sm font-bold">
-                <FileText className="mr-1 inline h-4 w-4" />요구사양 및 설명
-              </div>
-              <div className="flex-1">
-                <Label className="text-sm">요구사양 <span className="text-destructive">*</span></Label>
-                <Textarea
-                  value={form.spec}
-                  onChange={(e) => setForm((p) => ({ ...p, spec: e.target.value }))}
-                  placeholder={"고객 요구사양 또는 설비 사양을 상세히 기술하세요\n\n예시:\n- 작업 대상: SUS304 Φ20 파이프\n- 가공 방식: 자동 절단 + 면취\n- 생산 속도: 60EA/분\n- 치수 공차: ±0.1mm"}
-                  className="min-h-[180px] text-sm"
-                />
-              </div>
-              <div>
-                <Label className="text-sm">참조 도면번호</Label>
-                <Input value={form.drawing_no} onChange={(e) => setForm((p) => ({ ...p, drawing_no: e.target.value }))} placeholder="유사 설비명 또는 참조 도면번호" className="h-9 text-sm" />
-              </div>
-              <div>
-                <Label className="text-sm">비고</Label>
-                <Textarea value={form.content} onChange={(e) => setForm((p) => ({ ...p, content: e.target.value }))} placeholder="기타 참고 사항" className="min-h-[70px] text-sm" rows={3} />
-              </div>
-              <div>
-                <div className="text-sm font-bold">
-                  <Upload className="mr-1 inline h-4 w-4" />첨부파일
-                </div>
-                <div className="mt-1.5 cursor-pointer rounded-lg border-2 border-dashed p-5 text-center transition-colors hover:border-primary hover:bg-accent/50">
-                  <Upload className="mx-auto h-6 w-6 text-muted-foreground" />
-                  <div className="mt-1.5 text-sm text-muted-foreground">클릭하여 파일 첨부 (사양서, 도면, 사진 등)</div>
-                </div>
+          {/* 우측: 상세 내용 */}
+          <div className="flex min-w-0 flex-1 flex-col gap-4">
+            <h3 className="text-sm font-semibold pb-2 border-b">요구사양 및 설명</h3>
+            <div className="flex-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요구사양 <span className="text-destructive">*</span></Label>
+              <Textarea
+                value={form.spec}
+                onChange={(e) => setForm((p) => ({ ...p, spec: e.target.value }))}
+                placeholder={"고객 요구사양 또는 설비 사양을 상세히 기술해주세요\n\n예시:\n- 작업 대상: SUS304 Φ20 파이프\n- 가공 방식: 자동 절단 + 면취\n- 생산 속도: 60EA/분\n- 치수 공차: ±0.1mm"}
+                className="min-h-[180px]"
+              />
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">참조 도면번호</Label>
+              <Input value={form.drawing_no} onChange={(e) => setForm((p) => ({ ...p, drawing_no: e.target.value }))} placeholder="유사 설비명 또는 참조 도면번호" className="h-9" />
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">비고</Label>
+              <Textarea value={form.content} onChange={(e) => setForm((p) => ({ ...p, content: e.target.value }))} placeholder="기타 참고 사항" className="min-h-[70px]" rows={3} />
+            </div>
+            <div>
+              <h3 className="text-sm font-semibold pb-2 border-b mb-2">첨부파일</h3>
+              <div className="cursor-pointer rounded-lg border-2 border-dashed p-5 text-center transition-colors hover:border-primary hover:bg-accent/50">
+                <Upload className="mx-auto h-6 w-6 text-muted-foreground" />
+                <div className="mt-1.5 text-sm text-muted-foreground">클릭하여 파일 첨부 (사양서, 도면, 사진 등)</div>
               </div>
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setModalOpen(false)} className="h-10 px-6 text-sm" disabled={saving}>취소</Button>
-            <Button onClick={handleSave} className="h-10 px-6 text-sm" disabled={saving}>
-              {saving && <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />}
-              {saving ? "저장 중..." : "저장"}
+        </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setModalOpen(false)} disabled={saving}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_7/design/my-work/page.tsx b/frontend/app/(main)/COMPANY_7/design/my-work/page.tsx
index 5489e92d..8c136cb9 100644
--- a/frontend/app/(main)/COMPANY_7/design/my-work/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/design/my-work/page.tsx
@@ -2,7 +2,6 @@
 
 import React, { useState, useMemo, useCallback, useEffect } from "react";
 import {
-  BarChart3,
   Circle,
   CheckCircle2,
   AlertCircle,
@@ -39,7 +38,6 @@ import {
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
@@ -78,6 +76,7 @@ import {
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { useAuth } from "@/hooks/useAuth";
 import {
   getMyWork,
@@ -171,14 +170,14 @@ interface MyTask extends Task {
 
 // ========== 유틸 ==========
 const USER_INFO: Record<string, { role: string; color: string }> = {
-  최기구: { role: "기구설계 파트", color: "bg-blue-500" },
-  이설계: { role: "기구설계 파트", color: "bg-emerald-500" },
-  김전장: { role: "전장설계 파트", color: "bg-amber-500" },
-  박도면: { role: "기구설계 파트", color: "bg-violet-500" },
-  정SW: { role: "SW개발 파트", color: "bg-pink-500" },
-  한조립: { role: "조립/시운전 파트", color: "bg-red-500" },
-  박구매: { role: "구매/조달 파트", color: "bg-teal-500" },
-  팀장: { role: "설계팀 팀장", color: "bg-indigo-500" },
+  최기구: { role: "기구설계 파트", color: "bg-primary" },
+  이설계: { role: "기구설계 파트", color: "bg-chart-2" },
+  김전장: { role: "전장설계 파트", color: "bg-warning" },
+  박도면: { role: "기구설계 파트", color: "bg-chart-3" },
+  정SW: { role: "SW개발 파트", color: "bg-destructive" },
+  한조립: { role: "조립/시운전 파트", color: "bg-chart-1" },
+  박구매: { role: "구매/조달 파트", color: "bg-info" },
+  팀장: { role: "설계팀 팀장", color: "bg-success" },
 };
 
 const USERS = Object.keys(USER_INFO);
@@ -240,47 +239,46 @@ function getFileType(name: string): string {
 }
 
 function getProgressColor(p: number) {
-  if (p >= 80) return "text-emerald-500";
-  if (p >= 40) return "text-blue-500";
-  if (p > 0) return "text-amber-500";
+  if (p >= 80) return "text-success";
+  if (p >= 40) return "text-primary";
+  if (p > 0) return "text-warning";
   return "text-muted-foreground";
 }
 
 function getProgressBg(p: number) {
-  if (p >= 80) return "bg-emerald-500";
-  if (p >= 40) return "bg-blue-500";
-  if (p > 0) return "bg-amber-500";
+  if (p >= 80) return "bg-success";
+  if (p >= 40) return "bg-primary";
+  if (p > 0) return "bg-warning";
   return "bg-muted";
 }
 
 const STATUS_STYLES: Record<string, string> = {
   대기: "bg-muted text-foreground",
-  진행중: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
-  검토중:
-    "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
-  완료: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
-  지연: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
+  진행중: "bg-primary/10 text-primary",
+  검토중: "bg-warning/10 text-warning",
+  완료: "bg-success/10 text-success",
+  지연: "bg-destructive/10 text-destructive",
 };
 
 const PRIORITY_STYLES: Record<string, string> = {
-  긴급: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
-  높음: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+  긴급: "bg-destructive/10 text-destructive",
+  높음: "bg-warning/10 text-warning",
   보통: "bg-muted text-foreground",
-  낮음: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
+  낮음: "bg-success/10 text-success",
 };
 
 const PR_STATUS_STYLES: Record<string, string> = {
-  요청: "bg-red-100 text-red-800",
-  견적중: "bg-amber-100 text-amber-800",
-  발주완료: "bg-blue-100 text-blue-800",
-  입고완료: "bg-emerald-100 text-emerald-800",
+  요청: "bg-destructive/10 text-destructive",
+  견적중: "bg-warning/10 text-warning",
+  발주완료: "bg-primary/10 text-primary",
+  입고완료: "bg-success/10 text-success",
 };
 
 const CR_STATUS_STYLES: Record<string, string> = {
-  요청: "bg-amber-100 text-amber-800",
-  접수: "bg-amber-100 text-amber-800",
-  진행중: "bg-blue-100 text-blue-800",
-  완료: "bg-emerald-100 text-emerald-800",
+  요청: "bg-warning/10 text-warning",
+  접수: "bg-warning/10 text-warning",
+  진행중: "bg-primary/10 text-primary",
+  완료: "bg-success/10 text-success",
 };
 
 const CR_NEXT: Record<string, string> = {
@@ -445,7 +443,7 @@ export default function MyWorkPage() {
         setProjects([]);
       }
     } catch {
-      toast.error("업무 목록을 불러오는데 실패했습니다.");
+      toast.error("업무 목록을 불러오는데 실패했어요.");
       setProjects([]);
     } finally {
       setLoading(false);
@@ -585,12 +583,12 @@ export default function MyWorkPage() {
     if (!taskId) return;
     const res = await createSubItem(taskId, { name: newSiName.trim(), weight: w, progress: 0, status: "대기" });
     if (res.success) {
-      toast.success("수행항목이 추가되었습니다.");
+      toast.success("수행항목이 추가되었어요.");
       setNewSiName("");
       setNewSiWeight("");
       fetchMyWork();
     } else {
-      toast.error(res.message || "수행항목 추가에 실패했습니다.");
+      toast.error(res.message || "수행항목 추가에 실패했어요.");
     }
   }, [selectedTask, newSiName, newSiWeight, fetchMyWork]);
 
@@ -603,10 +601,10 @@ export default function MyWorkPage() {
       if (siId) {
         const res = await deleteSubItem(String(siId));
         if (res.success) {
-          toast.success("수행항목이 삭제되었습니다.");
+          toast.success("수행항목이 삭제되었어요.");
           fetchMyWork();
         } else {
-          toast.error(res.message || "수행항목 삭제에 실패했습니다.");
+          toast.error(res.message || "수행항목 삭제에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -636,10 +634,10 @@ export default function MyWorkPage() {
       if (siId) {
         const res = await updateSubItem(String(siId), { progress: newProgress, status: newStatus });
         if (res.success) {
-          toast.success("수행항목이 업데이트되었습니다.");
+          toast.success("수행항목이 업데이트되었어요.");
           fetchMyWork();
         } else {
-          toast.error(res.message || "수행항목 업데이트에 실패했습니다.");
+          toast.error(res.message || "수행항목 업데이트에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -673,7 +671,7 @@ export default function MyWorkPage() {
         if (res.success) {
           fetchMyWork();
         } else {
-          toast.error(res.message || "진행률 업데이트에 실패했습니다.");
+          toast.error(res.message || "진행률 업데이트에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -740,11 +738,11 @@ export default function MyWorkPage() {
           sub_item_id: siId ?? null,
         });
         if (res.success) {
-          toast.success("작업일지가 등록되었습니다.");
+          toast.success("작업일지가 등록되었어요.");
           setEditingLogIdx(-1);
           fetchMyWork();
         } else {
-          toast.error(res.message || "작업일지 등록에 실패했습니다.");
+          toast.error(res.message || "작업일지 등록에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -772,11 +770,11 @@ export default function MyWorkPage() {
       if (workLogId) {
         const res = await deleteWorkLog(String(workLogId));
         if (res.success) {
-          toast.success("작업일지가 삭제되었습니다.");
+          toast.success("작업일지가 삭제되었어요.");
           setEditingLogIdx(-1);
           fetchMyWork();
         } else {
-          toast.error(res.message || "작업일지 삭제에 실패했습니다.");
+          toast.error(res.message || "작업일지 삭제에 실패했어요.");
         }
       } else {
         updateProjects((draft) => {
@@ -845,11 +843,11 @@ export default function MyWorkPage() {
           status: pr.status,
         });
         if (!res.success) {
-          toast.error(res.message || "구매요청 등록에 실패했습니다.");
+          toast.error(res.message || "구매요청 등록에 실패했어요.");
           return;
         }
       }
-      if (newItems.length > 0) toast.success("구매요청이 등록되었습니다.");
+      if (newItems.length > 0) toast.success("구매요청이 등록되었어요.");
     }
     updateProjects((draft) => {
       for (const p of draft) {
@@ -890,11 +888,11 @@ export default function MyWorkPage() {
           due_date: cr.dueDate,
         });
         if (!res.success) {
-          toast.error(res.message || "협조요청 등록에 실패했습니다.");
+          toast.error(res.message || "협조요청 등록에 실패했어요.");
           return;
         }
       }
-      if (newItems.length > 0) toast.success("협조요청이 등록되었습니다.");
+      if (newItems.length > 0) toast.success("협조요청이 등록되었어요.");
     }
     updateProjects((draft) => {
       for (const p of draft) {
@@ -919,9 +917,9 @@ export default function MyWorkPage() {
 
   const kanbanConfig = [
     { key: "대기", icon: <Circle className="h-3.5 w-3.5" />, color: "border-muted-foreground/30", titleColor: "text-muted-foreground" },
-    { key: "진행중", icon: <Circle className="h-3.5 w-3.5 text-blue-500" />, color: "border-blue-500", titleColor: "text-blue-500" },
-    { key: "검토중", icon: <Circle className="h-3.5 w-3.5 text-amber-500" />, color: "border-amber-500", titleColor: "text-amber-500" },
-    { key: "완료", icon: <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />, color: "border-emerald-500", titleColor: "text-emerald-500" },
+    { key: "진행중", icon: <Circle className="h-3.5 w-3.5 text-primary" />, color: "border-primary", titleColor: "text-primary" },
+    { key: "검토중", icon: <Circle className="h-3.5 w-3.5 text-warning" />, color: "border-warning", titleColor: "text-warning" },
+    { key: "완료", icon: <CheckCircle2 className="h-3.5 w-3.5 text-success" />, color: "border-success", titleColor: "text-success" },
   ];
 
   // ===== 타임시트 =====
@@ -969,14 +967,18 @@ export default function MyWorkPage() {
   }
 
   return (
-    <div className="flex h-full flex-col gap-2 p-3">
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
       {/* 헤더 */}
       <div className="flex shrink-0 items-center justify-between">
         <div className="flex items-center gap-3">
-          <h1 className="text-xl font-bold">
-            <BarChart3 className="mr-1.5 inline h-5 w-5" />
-            내 업무 현황
-          </h1>
+          <div className="flex flex-col gap-0.5">
+            <div className="flex items-center gap-1 text-[11px] text-muted-foreground">
+              <span>설계관리</span>
+              <ChevronRight className="h-3 w-3" />
+              <span className="text-foreground">내업무현황</span>
+            </div>
+            <h1 className="text-lg font-bold leading-tight">내 업무 현황</h1>
+          </div>
           <div className="flex items-center gap-2 rounded-lg border bg-card px-2.5 py-1.5">
             <Avatar className="h-7 w-7">
               <AvatarFallback className={cn("text-xs font-bold text-white", USER_INFO[currentUser]?.color || "bg-primary")}>
@@ -1006,68 +1008,135 @@ export default function MyWorkPage() {
       </div>
 
       {/* 검색 필터 */}
-      <div className="flex shrink-0 flex-wrap items-center gap-2 rounded-lg border bg-card px-2.5 py-1.5">
-        <Select value={filterProject} onValueChange={setFilterProject}>
-          <SelectTrigger className="h-7 w-[130px] text-xs" size="xs"><SelectValue placeholder="전체 프로젝트" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">전체 프로젝트</SelectItem>
-            {projectList.map((p) => (
-              <SelectItem key={p.id} value={p.id}>{p.id} {p.name}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Select value={filterStatus} onValueChange={setFilterStatus}>
-          <SelectTrigger className="h-7 w-[100px] text-xs" size="xs"><SelectValue placeholder="전체 상태" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">전체 상태</SelectItem>
-            {["대기", "진행중", "검토중", "완료"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-          </SelectContent>
-        </Select>
-        <Select value={filterPriority} onValueChange={setFilterPriority}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="전체 우선순위" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">전체 우선순위</SelectItem>
-            {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-          </SelectContent>
-        </Select>
-        <Select value={filterCategory} onValueChange={setFilterCategory}>
-          <SelectTrigger className="h-7 w-[110px] text-xs" size="xs"><SelectValue placeholder="전체 유형" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__all__">전체 유형</SelectItem>
-            {["기구설계", "전장설계", "SW개발", "구매/조달", "조립/시운전", "검토/승인"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
-          </SelectContent>
-        </Select>
-        <div className="relative">
-          <Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            value={filterKeyword}
-            onChange={(e) => setFilterKeyword(e.target.value)}
-            placeholder="업무명 검색..."
-            className="h-7 w-[120px] pl-7 text-xs"
-          />
+      <div className="shrink-0 rounded-lg border border-border bg-card px-5 py-4">
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] items-end gap-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트</span>
+            <Select value={filterProject} onValueChange={setFilterProject}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 프로젝트" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 프로젝트</SelectItem>
+                {projectList.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>{p.id} {p.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">진행상태</span>
+            <Select value={filterStatus} onValueChange={setFilterStatus}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 상태" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 상태</SelectItem>
+                {["대기", "진행중", "검토중", "완료"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">우선순위</span>
+            <Select value={filterPriority} onValueChange={setFilterPriority}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 우선순위" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 우선순위</SelectItem>
+                {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무유형</span>
+            <Select value={filterCategory} onValueChange={setFilterCategory}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 유형" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 유형</SelectItem>
+                {["기구설계", "전장설계", "SW개발", "구매/조달", "조립/시운전", "검토/승인"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">검색어</span>
+            <div className="relative">
+              <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={filterKeyword}
+                onChange={(e) => setFilterKeyword(e.target.value)}
+                placeholder="업무명 검색..."
+                className="h-9 pl-8 text-xs"
+              />
+            </div>
+          </div>
+          <div className="flex items-end justify-end gap-2">
+            <Button variant="outline" size="sm" className="h-9" onClick={handleResetFilter}>
+              <RotateCcw className="mr-1.5 h-4 w-4" />
+              초기화
+            </Button>
+          </div>
         </div>
-        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={handleResetFilter}>
-          <RotateCcw className="mr-1 h-3 w-3" />초기화
-        </Button>
       </div>
 
-      {/* 통계 카드 */}
-      <div className="grid shrink-0 grid-cols-5 gap-2">
-        {[
-          { icon: <ClipboardList className="h-4 w-4 text-blue-500" />, value: stats.total, label: "전체 업무", bg: "bg-blue-50 dark:bg-blue-900/20" },
-          { icon: <Circle className="h-4 w-4 text-amber-500" />, value: stats.progress, label: "진행중", bg: "bg-amber-50 dark:bg-amber-900/20" },
-          { icon: <CheckCircle2 className="h-4 w-4 text-emerald-500" />, value: stats.done, label: "완료", bg: "bg-emerald-50 dark:bg-emerald-900/20" },
-          { icon: <AlertCircle className="h-4 w-4 text-red-500" />, value: stats.delay, label: "지연", bg: "bg-red-50 dark:bg-red-900/20" },
-          { icon: <Clock className="h-4 w-4 text-violet-500" />, value: `${stats.weekHours}h`, label: "이번주 투입", bg: "bg-violet-50 dark:bg-violet-900/20" },
-        ].map((s, i) => (
-          <Card key={i} className="flex flex-row items-center gap-2 rounded-lg border px-3 py-2 shadow-none">
-            <div className={cn("flex h-8 w-8 items-center justify-center rounded-lg", s.bg)}>{s.icon}</div>
-            <div>
-              <div className="text-lg font-bold">{s.value}</div>
-              <div className="text-[11px] text-muted-foreground">{s.label}</div>
+      {/* 통계 요약 바 */}
+      <div className="shrink-0 rounded-lg border border-border bg-card px-5 py-3">
+        <div className="flex flex-wrap items-center gap-5">
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10">
+              <ClipboardList className="h-3.5 w-3.5 text-primary" />
             </div>
-          </Card>
-        ))}
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.total}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">전체</span>
+            </div>
+          </div>
+          <div className="h-4 w-px bg-border" />
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-warning/10">
+              <Circle className="h-3.5 w-3.5 text-warning" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.progress}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">진행중</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-success/10">
+              <CheckCircle2 className="h-3.5 w-3.5 text-success" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.done}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">완료</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className={cn("flex h-7 w-7 items-center justify-center rounded-md", stats.delay > 0 ? "bg-destructive/10" : "bg-muted")}>
+              <AlertCircle className={cn("h-3.5 w-3.5", stats.delay > 0 ? "text-destructive" : "text-muted-foreground")} />
+            </div>
+            <div className="leading-none">
+              <span className={cn("text-sm font-bold", stats.delay > 0 && "text-destructive")}>{stats.delay}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">지연</span>
+            </div>
+          </div>
+          <div className="h-4 w-px bg-border" />
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-info/10">
+              <Clock className="h-3.5 w-3.5 text-info" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.weekHours}h</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">이번주 투입</span>
+            </div>
+          </div>
+          <div className="ml-auto flex items-center gap-2">
+            <span className="rounded-full border border-primary/15 bg-primary/8 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+              {filteredTasks.length}건
+            </span>
+          </div>
+        </div>
       </div>
 
       {/* 메인 영역 */}
@@ -1075,11 +1144,14 @@ export default function MyWorkPage() {
         {/* 왼쪽: 업무 현황 */}
         <ResizablePanel defaultSize={45} minSize={25}>
           <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
-            <div className="flex shrink-0 items-center justify-between border-b bg-muted/30 px-3 py-1.5">
-              <span className="text-sm font-bold">
-                <ClipboardList className="mr-1 inline h-4 w-4" />
-                업무 현황
-              </span>
+            <div className="flex shrink-0 items-center justify-between border-b bg-muted/50 px-4 py-2.5">
+              <div className="flex items-center gap-2">
+                <ClipboardList className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-semibold">업무 현황</span>
+                <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                  {filteredTasks.length}건
+                </span>
+              </div>
               <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as any)}>
                 <TabsList className="h-7">
                   <TabsTrigger value="kanban" className="h-5 gap-1 px-2 text-[11px]">
@@ -1102,22 +1174,22 @@ export default function MyWorkPage() {
                       const tasks = kanbanCols[col.key] || [];
                       const extraCount = col.key === "대기" ? receivedCoops.length : 0;
                       return (
-                        <div key={col.key} className="flex flex-col rounded-lg bg-muted/50 p-2">
-                          <div className={cn("mb-2 flex items-center justify-between border-b-2 pb-1.5", col.color)}>
-                            <span className={cn("flex items-center gap-1 text-xs font-bold", col.titleColor)}>
+                        <div key={col.key} className="flex flex-col rounded-lg border bg-muted/30 p-2">
+                          <div className={cn("mb-2 flex items-center justify-between rounded-md border-l-[3px] bg-card px-2 py-1.5", col.color)}>
+                            <span className={cn("flex items-center gap-1.5 text-xs font-bold", col.titleColor)}>
                               {col.icon}{col.key}
                             </span>
-                            <Badge variant="outline" className="h-5 px-1.5 text-[10px]">{tasks.length + extraCount}</Badge>
+                            <span className="rounded-full border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] font-bold text-muted-foreground">{tasks.length + extraCount}</span>
                           </div>
                           <div className="flex flex-1 flex-col gap-1.5 overflow-y-auto">
                             {col.key === "대기" && receivedCoops.map((cr, i) => (
-                              <div key={`coop-${i}`} className="rounded-md border border-amber-200 bg-amber-50 p-2 dark:border-amber-900/50 dark:bg-amber-900/10">
-                                <div className="text-[10px] text-amber-600">
+                              <div key={`coop-${i}`} className="rounded-md border border-warning/30 bg-warning/10 p-2">
+                                <div className="text-[10px] text-warning">
                                   <Handshake className="mr-0.5 inline h-3 w-3" /> 협조 · {cr.fromUser}
                                 </div>
                                 <div className="text-xs font-semibold">{cr.title}</div>
                                 <div className="mt-0.5 text-[10px] text-muted-foreground">{cr.projectName}</div>
-                                <div className={cn("mt-0.5 text-[10px]", new Date(cr.dueDate) < today ? "font-semibold text-destructive" : "text-emerald-600")}>
+                                <div className={cn("mt-0.5 text-[10px]", new Date(cr.dueDate) < today ? "font-semibold text-destructive" : "text-success")}>
                                   <Calendar className="mr-0.5 inline h-3 w-3" />{cr.dueDate}
                                 </div>
                               </div>
@@ -1133,7 +1205,7 @@ export default function MyWorkPage() {
                                 <div
                                   key={`${t.projectId}-${t.name}`}
                                   className={cn(
-                                    "cursor-pointer rounded-md border bg-card p-2 transition-all hover:shadow-sm",
+                                    "cursor-pointer rounded-md border bg-card p-2 transition-all",
                                     isSelected && "border-primary ring-2 ring-primary/20"
                                   )}
                                   onClick={() => handleSelectTask(t.projectId, t.name)}
@@ -1150,7 +1222,7 @@ export default function MyWorkPage() {
                                     </div>
                                     <span className={cn("text-[10px] font-semibold", getProgressColor(t.progress))}>{t.progress}%</span>
                                   </div>
-                                  <div className={cn("mt-0.5 text-[10px]", isDelay ? "font-semibold text-destructive" : dd <= 3 ? "text-amber-500" : "text-emerald-600")}>
+                                  <div className={cn("mt-0.5 text-[10px]", isDelay ? "font-semibold text-destructive" : dd <= 3 ? "text-warning" : "text-success")}>
                                     <Calendar className="mr-0.5 inline h-3 w-3" />{dueText}
                                   </div>
                                   {(coopCount > 0 || attCount > 0) && (
@@ -1163,7 +1235,7 @@ export default function MyWorkPage() {
                               );
                             })}
                             {tasks.length === 0 && extraCount === 0 && (
-                              <div className="py-3 text-center text-[11px] text-muted-foreground">없음</div>
+                              <div className="py-3 text-center text-[11px] text-muted-foreground">업무가 없어요</div>
                             )}
                           </div>
                         </div>
@@ -1173,66 +1245,50 @@ export default function MyWorkPage() {
                 )}
 
                 {viewMode === "list" && (
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead className="w-[90px] text-[11px]">프로젝트</TableHead>
-                        <TableHead className="text-[11px]">업무명</TableHead>
-                        <TableHead className="w-[65px] text-[11px]">유형</TableHead>
-                        <TableHead className="w-[55px] text-center text-[11px]">상태</TableHead>
-                        <TableHead className="w-[80px] text-[11px]">종료일</TableHead>
-                        <TableHead className="w-[70px] text-[11px]">진행률</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {filteredTasks
-                        .sort((a, b) => {
-                          const ad = a.status !== "완료" && new Date(a.end) < today;
-                          const bd = b.status !== "완료" && new Date(b.end) < today;
-                          if (ad && !bd) return -1;
-                          if (!ad && bd) return 1;
-                          const ord: Record<string, number> = { 진행중: 0, 대기: 1, 검토중: 2, 완료: 3 };
-                          return (ord[a.status] ?? 9) - (ord[b.status] ?? 9);
-                        })
-                        .map((t) => {
-                          const isDelay = t.status !== "완료" && new Date(t.end) < today;
-                          const displayStatus = isDelay ? "지연" : t.status;
-                          const isSelected = selectedTaskKey === `${t.projectId}||${t.name}`;
-                          return (
-                            <TableRow
-                              key={`${t.projectId}-${t.name}`}
-                              className={cn("cursor-pointer", isSelected && "bg-accent")}
-                              onClick={() => handleSelectTask(t.projectId, t.name)}
-                            >
-                              <TableCell className="text-[10px]">
-                                <span className="font-semibold text-primary">{t.projectId}</span>
-                                <br />
-                                <span className="text-muted-foreground">{t.projectName}</span>
-                              </TableCell>
-                              <TableCell className="text-xs font-medium">{t.name}</TableCell>
-                              <TableCell className="text-[11px]">{t.category}</TableCell>
-                              <TableCell className="text-center">
-                                <Badge className={cn("text-[10px]", STATUS_STYLES[displayStatus])}>{displayStatus}</Badge>
-                              </TableCell>
-                              <TableCell className={cn("text-[11px]", isDelay && "font-semibold text-destructive")}>{t.end}</TableCell>
-                              <TableCell>
-                                <div className="flex items-center gap-1.5">
-                                  <div className="h-1 w-12 overflow-hidden rounded-full bg-muted">
-                                    <div className={cn("h-full rounded-full", getProgressBg(t.progress))} style={{ width: `${t.progress}%` }} />
-                                  </div>
-                                  <span className="text-[10px]">{t.progress}%</span>
-                                </div>
-                              </TableCell>
-                            </TableRow>
-                          );
-                        })}
-                      {filteredTasks.length === 0 && (
-                        <TableRow>
-                          <TableCell colSpan={6} className="py-8 text-center text-xs text-muted-foreground">검색 결과 없음</TableCell>
-                        </TableRow>
-                      )}
-                    </TableBody>
-                  </Table>
+                  <EDataTable
+                    columns={[
+                      { key: "projectId", label: "프로젝트", width: "w-[90px]", render: (_v, row) => (
+                        <div className="text-[10px]">
+                          <span className="font-semibold text-primary">{row.projectId}</span>
+                          <br />
+                          <span className="text-muted-foreground">{row.projectName}</span>
+                        </div>
+                      )},
+                      { key: "name", label: "업무명" },
+                      { key: "category", label: "유형", width: "w-[65px]" },
+                      { key: "status", label: "상태", width: "w-[55px]", align: "center", render: (_v, row) => {
+                        const isDelay = row.status !== "완료" && new Date(row.end) < today;
+                        const displayStatus = isDelay ? "지연" : row.status;
+                        return <Badge className={cn("text-[10px]", STATUS_STYLES[displayStatus])}>{displayStatus}</Badge>;
+                      }},
+                      { key: "end", label: "종료일", width: "w-[80px]", render: (v, row) => {
+                        const isDelay = row.status !== "완료" && new Date(row.end) < today;
+                        return <span className={cn("text-[11px]", isDelay && "font-semibold text-destructive")}>{v}</span>;
+                      }},
+                      { key: "progress", label: "진행률", width: "w-[70px]", sortable: true, render: (v) => (
+                        <div className="flex items-center gap-1.5">
+                          <div className="h-1 w-12 overflow-hidden rounded-full bg-muted">
+                            <div className={cn("h-full rounded-full", getProgressBg(v))} style={{ width: `${v}%` }} />
+                          </div>
+                          <span className="text-[10px]">{v}%</span>
+                        </div>
+                      )},
+                    ] as EDataTableColumn<MyTask>[]}
+                    data={[...filteredTasks].sort((a, b) => {
+                      const ad = a.status !== "완료" && new Date(a.end) < today;
+                      const bd = b.status !== "완료" && new Date(b.end) < today;
+                      if (ad && !bd) return -1;
+                      if (!ad && bd) return 1;
+                      const ord: Record<string, number> = { 진행중: 0, 대기: 1, 검토중: 2, 완료: 3 };
+                      return (ord[a.status] ?? 9) - (ord[b.status] ?? 9);
+                    })}
+                    rowKey={(row) => `${row.projectId}||${row.name}`}
+                    selectedId={selectedTaskKey}
+                    onRowClick={(row) => handleSelectTask(row.projectId, row.name)}
+                    emptyMessage="검색 결과가 없어요"
+                    showPagination={false}
+                    draggableColumns={false}
+                  />
                 )}
 
                 {viewMode === "timesheet" && (
@@ -1256,16 +1312,16 @@ export default function MyWorkPage() {
                       </span>
                     </div>
                     <Table>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead className="min-w-[120px] text-[11px]">프로젝트/업무</TableHead>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="min-w-[120px] text-[11px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">프로젝트/업무</TableHead>
                           {timesheetData.wds.map((d, i) => (
                             <TableHead
                               key={i}
                               className={cn(
                                 "text-center text-[10px]",
-                                i >= 5 && "bg-red-50 dark:bg-red-900/10",
-                                d.toDateString() === today.toDateString() && "bg-blue-50 text-primary dark:bg-blue-900/10"
+                                i >= 5 && "bg-destructive/5",
+                                d.toDateString() === today.toDateString() && "bg-primary/5 text-primary"
                               )}
                             >
                               {timesheetData.dn[i]}
@@ -1273,25 +1329,25 @@ export default function MyWorkPage() {
                               <span className="text-[9px]">{d.getMonth() + 1}/{d.getDate()}</span>
                             </TableHead>
                           ))}
-                          <TableHead className="text-center text-[11px] font-bold">합계</TableHead>
+                          <TableHead className="text-center text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">합계</TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
                         {Object.keys(timesheetData.ph).length === 0 && (
                           <TableRow>
-                            <TableCell colSpan={9} className="py-8 text-center text-xs text-muted-foreground">기록 없음</TableCell>
+                            <TableCell colSpan={9} className="py-8 text-center text-[13px] text-muted-foreground">기록이 없어요</TableCell>
                           </TableRow>
                         )}
                         {Object.values(timesheetData.ph).map((p) => (
                           <React.Fragment key={p.id}>
-                            <TableRow className="bg-muted/30">
+                            <TableRow className="bg-muted/50">
                               <TableCell className="text-[10px] font-bold text-primary">{p.id} {p.name}</TableCell>
                               {p.days.map((v, i) => (
-                                <TableCell key={i} className={cn("text-center text-[11px] font-semibold", i >= 5 && "bg-red-50 dark:bg-red-900/10", v > 0 ? "" : "text-muted-foreground/30")}>
+                                <TableCell key={i} className={cn("text-center text-[11px] font-semibold", i >= 5 && "bg-destructive/5", v > 0 ? "" : "text-muted-foreground/30")}>
                                   {v > 0 ? `${v}h` : "-"}
                                 </TableCell>
                               ))}
-                              <TableCell className="text-center text-xs font-bold text-primary">{p.total}h</TableCell>
+                              <TableCell className="text-center text-[13px] font-bold text-primary">{p.total}h</TableCell>
                             </TableRow>
                             {Object.entries(p.tasks).map(([tn, days]) => {
                               const tt = days.reduce((s, v) => s + v, 0);
@@ -1299,7 +1355,7 @@ export default function MyWorkPage() {
                                 <TableRow key={tn}>
                                   <TableCell className="pl-4 text-[10px] text-muted-foreground">└ {tn}</TableCell>
                                   {days.map((v, i) => (
-                                    <TableCell key={i} className={cn("text-center text-[10px]", i >= 5 && "bg-red-50 dark:bg-red-900/10", v > 0 ? "" : "text-muted-foreground/30")}>
+                                    <TableCell key={i} className={cn("text-center text-[10px]", i >= 5 && "bg-destructive/5", v > 0 ? "" : "text-muted-foreground/30")}>
                                       {v > 0 ? `${v}h` : "-"}
                                     </TableCell>
                                   ))}
@@ -1309,10 +1365,10 @@ export default function MyWorkPage() {
                             })}
                           </React.Fragment>
                         ))}
-                        <TableRow className="bg-blue-50 font-bold dark:bg-blue-900/10">
+                        <TableRow className="bg-primary/5 font-bold">
                           <TableCell className="text-[11px]">합계</TableCell>
                           {timesheetData.dt.map((v, i) => (
-                            <TableCell key={i} className={cn("text-center text-[11px]", i >= 5 && "bg-red-50 dark:bg-red-900/10", v > 0 ? "text-primary" : "text-muted-foreground/30")}>
+                            <TableCell key={i} className={cn("text-center text-[11px]", i >= 5 && "bg-destructive/5", v > 0 ? "text-primary" : "text-muted-foreground/30")}>
                               {v > 0 ? `${v}h` : "-"}
                             </TableCell>
                           ))}
@@ -1333,15 +1389,20 @@ export default function MyWorkPage() {
         <ResizablePanel defaultSize={55} minSize={30}>
           <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
             {!selectedTask ? (
-              <div className="flex h-full flex-col items-center justify-center gap-2 text-muted-foreground">
-                <PointerIcon className="h-8 w-8" />
-                <span className="text-sm">왼쪽에서 업무를 선택하세요</span>
+              <div className="flex h-full flex-col items-center justify-center gap-3 text-muted-foreground">
+                <div className="flex h-14 w-14 items-center justify-center rounded-full border-2 border-dashed border-border">
+                  <PointerIcon className="h-6 w-6 text-muted-foreground/50" />
+                </div>
+                <div className="text-center">
+                  <p className="text-sm font-medium">업무를 선택해주세요</p>
+                  <p className="text-xs text-muted-foreground/60">왼쪽 목록에서 업무를 클릭하면 상세 정보가 표시돼요</p>
+                </div>
               </div>
             ) : (
               <>
                 {/* 상세 헤더 */}
-                <div className="flex shrink-0 items-center justify-between border-b bg-muted/30 px-3 py-2">
-                  <span className="text-sm font-bold">{selectedTask.task.name}</span>
+                <div className="flex shrink-0 items-center justify-between border-b bg-muted/50 px-3 py-2">
+                  <h3 className="text-[13px] font-bold">{selectedTask.task.name}</h3>
                   <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => setSelectedTaskKey(null)}>
                     <X className="h-3.5 w-3.5" />
                   </Button>
@@ -1375,8 +1436,8 @@ export default function MyWorkPage() {
                   {/* 수행항목 */}
                   <ResizablePanel defaultSize={40} minSize={20}>
                     <div className="flex h-full flex-col">
-                      <div className="shrink-0 border-b bg-muted/30 px-3 py-1.5 text-xs font-bold">
-                        <ClipboardList className="mr-1 inline h-3.5 w-3.5" />수행항목
+                      <div className="shrink-0 border-b bg-muted/50 px-3 py-1.5">
+                        <h3 className="text-[13px] font-bold">수행항목</h3>
                       </div>
                       <ScrollArea className="flex-1">
                         {/* 추가 입력 */}
@@ -1408,7 +1469,7 @@ export default function MyWorkPage() {
                                 onClick={(e) => e.stopPropagation()}
                                 className="h-4 w-4"
                               />
-                              <span className={cn("min-w-0 flex-1 truncate text-xs font-semibold", done && "text-muted-foreground line-through")}>
+                              <span className={cn("min-w-0 flex-1 truncate text-[13px] font-semibold", done && "text-muted-foreground line-through")}>
                                 {si.name}
                               </span>
                               <Badge variant="outline" className="h-4 px-1 text-[9px]">{si.weight}%</Badge>
@@ -1426,7 +1487,7 @@ export default function MyWorkPage() {
 
                         {/* 요약 */}
                         {selectedTask.task.subItems.length > 0 && (
-                          <div className="flex items-center justify-between border-b bg-blue-50 px-2.5 py-1 text-[11px] dark:bg-blue-900/10">
+                          <div className="flex items-center justify-between border-b bg-primary/5 px-2.5 py-1 text-[11px]">
                             <span>
                               가중 진행률: <strong className="text-primary">{calcAutoProgress(selectedTask.task)}%</strong>
                               {selectedTask.task.subItems.reduce((s, i) => s + i.weight, 0) !== 100 && (
@@ -1462,8 +1523,8 @@ export default function MyWorkPage() {
                   {/* 수행기록 */}
                   <ResizablePanel defaultSize={60} minSize={30}>
                     <div className="flex h-full flex-col">
-                      <div className="shrink-0 border-b bg-muted/30 px-3 py-1.5 text-xs font-bold">
-                        <FileEdit className="mr-1 inline h-3.5 w-3.5" />수행기록
+                      <div className="shrink-0 border-b bg-muted/50 px-3 py-1.5">
+                        <h3 className="text-[13px] font-bold">수행기록</h3>
                       </div>
                       <ScrollArea className="flex-1">
                         {selectedSubItemId === "__unassigned__" ? (
@@ -1556,7 +1617,7 @@ export default function MyWorkPage() {
           </DialogHeader>
           <div className="space-y-2">
             {modalAttachments.map((f, i) => (
-              <div key={f.id} className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
+              <div key={f.id} className="flex items-center gap-2 rounded-md border bg-muted/50 p-2">
                 {getFileIcon(f.type)}
                 <div className="flex-1">
                   <div className="text-xs font-semibold">{f.name}</div>
@@ -1636,9 +1697,9 @@ export default function MyWorkPage() {
               </Button>
             </div>
             <div className="text-xs font-semibold">등록된 구매요청 ({modalPurchaseReqs.length})</div>
-            {modalPurchaseReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없습니다.</div>}
+            {modalPurchaseReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없어요.</div>}
             {modalPurchaseReqs.map((pr, i) => (
-              <div key={pr.id} className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
+              <div key={pr.id} className="flex items-center gap-2 rounded-md border bg-muted/50 p-2">
                 <ShoppingCart className="h-3.5 w-3.5" />
                 <strong className="text-xs">{pr.item}</strong>
                 <span className="text-[10px] text-muted-foreground">{pr.qty} {pr.unit}</span>
@@ -1698,9 +1759,9 @@ export default function MyWorkPage() {
               </Button>
             </div>
             <div className="text-xs font-semibold">등록된 협조요청 ({modalCoopReqs.length})</div>
-            {modalCoopReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없습니다.</div>}
+            {modalCoopReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없어요.</div>}
             {modalCoopReqs.map((cr, i) => (
-              <div key={cr.id} className="space-y-1 rounded-md border bg-muted/30 p-2">
+              <div key={cr.id} className="space-y-1 rounded-md border bg-muted/50 p-2">
                 <div className="flex items-center gap-2">
                   <Handshake className="h-3.5 w-3.5" />
                   <strong className="flex-1 text-xs">{cr.title}</strong>
@@ -1762,7 +1823,7 @@ function RenderLogs({ title, logs, editingLogIdx, editForm, setEditForm, onStart
       {logs.length === 0 && editingLogIdx !== -2 && (
         <div className="flex flex-col items-center justify-center gap-1 py-8 text-muted-foreground">
           <FileEdit className="h-6 w-6" />
-          <span className="text-xs">기록이 없습니다</span>
+          <span className="text-xs">기록이 없어요</span>
         </div>
       )}
       {logs.map((log) => {
@@ -1805,12 +1866,12 @@ function RenderLogs({ title, logs, editingLogIdx, editForm, setEditForm, onStart
                 </Badge>
               )}
               {prC > 0 && (
-                <Badge className="h-4 cursor-pointer gap-0.5 bg-amber-50 px-1 text-[9px] text-amber-800 hover:bg-amber-100 dark:bg-amber-900/20" onClick={(e) => { e.stopPropagation(); onOpenPr(idx); }}>
+                <Badge className="h-4 cursor-pointer gap-0.5 bg-warning/10 px-1 text-[9px] text-warning hover:bg-warning/20" onClick={(e) => { e.stopPropagation(); onOpenPr(idx); }}>
                   <ShoppingCart className="h-2.5 w-2.5" />{prC}
                 </Badge>
               )}
               {crC > 0 && (
-                <Badge className="h-4 cursor-pointer gap-0.5 bg-pink-50 px-1 text-[9px] text-pink-800 hover:bg-pink-100 dark:bg-pink-900/20" onClick={(e) => { e.stopPropagation(); onOpenCr(idx); }}>
+                <Badge className="h-4 cursor-pointer gap-0.5 bg-info/10 px-1 text-[9px] text-info hover:bg-info/20" onClick={(e) => { e.stopPropagation(); onOpenCr(idx); }}>
                   <Handshake className="h-2.5 w-2.5" />{crC}
                 </Badge>
               )}
@@ -1861,7 +1922,7 @@ interface EditLogRowProps {
 function EditLogRow({ logIdx, editForm, setEditForm, onSave, onCancel, onOpenAtt, onOpenPr, onOpenCr, attCount, prCount, crCount }: EditLogRowProps) {
   const hours = calcHours(editForm.startDt, editForm.endDt);
   return (
-    <div className="space-y-1.5 rounded-md border border-emerald-300 bg-emerald-50/50 p-2.5 dark:border-emerald-800 dark:bg-emerald-900/10">
+    <div className="space-y-1.5 rounded-md border border-primary/30 bg-primary/5 p-2.5">
       <div className="flex flex-wrap items-center gap-1.5">
         <Input type="datetime-local" value={editForm.startDt} onChange={(e) => setEditForm((p) => ({ ...p, startDt: e.target.value }))} className="h-6 w-[155px] text-[11px]" />
         <span className="text-xs text-muted-foreground">~</span>
@@ -1889,7 +1950,7 @@ function EditLogRow({ logIdx, editForm, setEditForm, onSave, onCancel, onOpenAtt
         </div>
         <div className="flex gap-1">
           <Button variant="outline" size="sm" className="h-5 px-2 text-[10px]" onClick={onCancel}>취소</Button>
-          <Button size="sm" className="h-5 bg-emerald-500 px-2 text-[10px] hover:bg-emerald-600" onClick={() => onSave(logIdx)}>저장</Button>
+          <Button size="sm" className="h-5 bg-success px-2 text-[10px] hover:bg-success/90" onClick={() => onSave(logIdx)}>저장</Button>
         </div>
       </div>
     </div>
diff --git a/frontend/app/(main)/COMPANY_7/design/project/page.tsx b/frontend/app/(main)/COMPANY_7/design/project/page.tsx
index 8f5d3799..7e66b696 100644
--- a/frontend/app/(main)/COMPANY_7/design/project/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/design/project/page.tsx
@@ -18,17 +18,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-  DialogDescription,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import {
@@ -38,7 +28,6 @@ import {
 } from "@/components/ui/resizable";
 import {
   Plus,
-  RotateCcw,
   Save,
   Pencil,
   Trash2,
@@ -50,9 +39,18 @@ import {
   Users,
   FileText,
   Loader2,
+  Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
 import {
   getProjectList,
   createProject,
@@ -62,6 +60,10 @@ import {
   updateTask,
   deleteTask,
 } from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 // --- Types ---
 type ProjectStatus = "진행중" | "계획" | "보류" | "완료";
@@ -186,36 +188,36 @@ function mapProject(p: any): Project {
   };
 }
 
-// --- 상태 색상 ---
+// --- 상태 색상 (CSS 변수 기반) ---
 const getStatusColor = (status: ProjectStatus) => {
   switch (status) {
     case "진행중":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "계획":
-      return "bg-slate-100 text-slate-800 border-slate-200";
+      return "bg-muted text-muted-foreground border-border";
     case "보류":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "완료":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-primary/15 text-primary border-primary/25";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getTaskStatusColor = (status: string) => {
   switch (status) {
     case "대기":
-      return "bg-gray-100 text-gray-700";
+      return "bg-muted text-muted-foreground";
     case "진행중":
-      return "bg-blue-100 text-blue-800";
+      return "bg-primary/10 text-primary";
     case "검토중":
-      return "bg-amber-100 text-amber-800";
+      return "bg-destructive/10 text-destructive";
     case "완료":
-      return "bg-emerald-100 text-emerald-800";
+      return "bg-primary/15 text-primary";
     case "지연":
-      return "bg-rose-100 text-rose-800";
+      return "bg-destructive/10 text-destructive";
     default:
-      return "bg-gray-100 text-gray-700";
+      return "bg-muted text-muted-foreground";
   }
 };
 
@@ -232,9 +234,9 @@ const getRelationLabel = (r: RelationType | null) => {
 const getRelationColor = (r: RelationType | null) => {
   if (!r) return "";
   const m: Record<RelationType, string> = {
-    sub: "bg-blue-100 text-blue-700",
-    depend: "bg-amber-100 text-amber-800",
-    related: "bg-purple-100 text-purple-700",
+    sub: "bg-primary/10 text-primary",
+    depend: "bg-destructive/10 text-destructive",
+    related: "bg-secondary text-secondary-foreground",
   };
   return m[r];
 };
@@ -249,10 +251,10 @@ const categoryIcons: Record<string, string> = {
 };
 
 const progressColor = (p: number) =>
-  p >= 80 ? "bg-emerald-500" : p >= 40 ? "bg-blue-500" : p > 0 ? "bg-amber-500" : "bg-gray-300";
+  p >= 80 ? "bg-primary" : p >= 40 ? "bg-primary/70" : p > 0 ? "bg-primary/40" : "bg-muted-foreground/30";
 
 const progressTextColor = (p: number) =>
-  p >= 80 ? "text-emerald-600" : p >= 40 ? "text-blue-600" : p > 0 ? "text-amber-600" : "text-gray-400";
+  p >= 80 ? "text-primary" : p >= 40 ? "text-primary/80" : p > 0 ? "text-primary/60" : "text-muted-foreground";
 
 // --- Helper functions ---
 function getChildren(projects: Project[], parentId: string): Project[] {
@@ -268,17 +270,29 @@ function getAllDescendants(projects: Project[], parentId: string): Project[] {
   return all;
 }
 
+// --- Grid Columns ---
+const PROJECT_GRID_COLUMNS = [
+  { key: "project_no", label: "프로젝트번호" },
+  { key: "status", label: "상태" },
+  { key: "name", label: "프로젝트명" },
+  { key: "pm", label: "PM" },
+  { key: "customer", label: "고객" },
+  { key: "start_date", label: "시작일" },
+  { key: "end_date", label: "종료예정" },
+  { key: "progress", label: "진행률" },
+  { key: "source_no", label: "원접수번호" },
+];
+
 // --- Component ---
 export default function DesignProjectPage() {
+  const ts = useTableSettings("c16-design-project", "dsn_project", PROJECT_GRID_COLUMNS);
   const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState(true);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>({});
 
-  // 검색
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchPM, setSearchPM] = useState("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 상세 탭
   const [detailTab, setDetailTab] = useState("wbs");
@@ -350,18 +364,40 @@ export default function DesignProjectPage() {
     }
   }, []);
 
+  // snake_case → camelCase 매핑 (DynamicSearchFilter의 columnName은 snake_case)
+  const fieldMap: Record<string, string> = {
+    project_no: "projectNo",
+    start_date: "startDate",
+    end_date: "endDate",
+    source_no: "sourceNo",
+  };
+  const getFieldValue = (obj: any, colName: string): string => {
+    const key = fieldMap[colName] || colName;
+    const val = obj[key];
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
   // 필터링
   const filteredProjects = useMemo(() => {
-    if (searchStatus === "all" && searchPM === "all" && !searchKeyword) return projects;
+    if (searchFilters.length === 0) return projects;
 
     const matched = new Set<string>();
     projects.forEach((p) => {
       let pass = true;
-      if (searchStatus !== "all" && p.status !== searchStatus) pass = false;
-      if (searchPM !== "all" && p.pm !== searchPM) pass = false;
-      if (searchKeyword) {
-        const str = [p.projectNo, p.name, p.customer, p.pm, p.sourceNo].join(" ").toLowerCase();
-        if (!str.includes(searchKeyword.toLowerCase())) pass = false;
+      for (const f of searchFilters) {
+        const val = getFieldValue(p, f.columnName);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) { pass = false; break; }
+        } else if (f.operator === "equals") {
+          if (val !== f.value) { pass = false; break; }
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) { pass = false; break; }
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) { pass = false; break; }
+          if (to && val > to) { pass = false; break; }
+        }
       }
       if (pass) matched.add(p.id);
     });
@@ -379,7 +415,7 @@ export default function DesignProjectPage() {
     });
 
     return projects.filter((p) => result.has(p.id));
-  }, [projects, searchStatus, searchPM, searchKeyword]);
+  }, [projects, searchFilters]);
 
   const selectedProject = useMemo(
     () => projects.find((p) => p.id === selectedId),
@@ -411,11 +447,6 @@ export default function DesignProjectPage() {
     }));
   };
 
-  const handleResetSearch = () => {
-    setSearchStatus("all");
-    setSearchPM("all");
-    setSearchKeyword("");
-  };
 
   // --- 프로젝트 모달 ---
   const openProjectModal = (editProject?: Project, presetParentId?: string) => {
@@ -666,209 +697,144 @@ export default function DesignProjectPage() {
   );
 
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4">
-      {/* 검색 섹션 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[110px] h-9"><SelectValue /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                <SelectItem value="진행중">진행중</SelectItem>
-                <SelectItem value="계획">계획</SelectItem>
-                <SelectItem value="보류">보류</SelectItem>
-                <SelectItem value="완료">완료</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">PM</Label>
-            <Select value={searchPM} onValueChange={setSearchPM}>
-              <SelectTrigger className="w-[110px] h-9"><SelectValue /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                <SelectItem value="이설계">이설계</SelectItem>
-                <SelectItem value="박도면">박도면</SelectItem>
-                <SelectItem value="최기구">최기구</SelectItem>
-                <SelectItem value="김전장">김전장</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">프로젝트/고객 검색</Label>
-            <Input
-              placeholder="프로젝트번호 / 프로젝트명 / 고객명"
-              className="w-[280px] h-9"
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-            />
-          </div>
-          <div className="flex-1" />
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+    <div className="flex flex-col h-[calc(100vh-4rem)] gap-3 p-3">
+      {/* 검색 필터 */}
+      <div className="shrink-0">
+        <DynamicSearchFilter
+          tableName="dsn_project"
+          filterId="c16-design-project"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredProjects.length}
+        />
+      </div>
 
       {/* 좌우 분할 메인 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
         <ResizablePanelGroup direction="horizontal">
           {/* 왼쪽: 프로젝트 목록 */}
-          <ResizablePanel defaultSize={selectedId ? 50 : 100} minSize={30}>
+          <ResizablePanel defaultSize={55} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2">
-                  <Rocket className="w-5 h-5" /> 프로젝트 목록
-                  <Badge variant="secondary" className="font-normal">{filteredProjects.length}건</Badge>
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold flex items-center gap-2">
+                  프로젝트 목록
+                  <span className="text-xs font-medium text-primary bg-primary/8 border border-primary/15 rounded-md px-1.5 py-0.5">{filteredProjects.length}건</span>
                 </div>
                 <Button size="sm" onClick={() => openProjectModal()}>
                   <Plus className="w-4 h-4 mr-1.5" /> 프로젝트 등록
                 </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
               </div>
 
               <div className="flex-1 overflow-auto">
-                <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                    <TableRow>
-                      <TableHead className="w-[160px]">프로젝트번호</TableHead>
-                      <TableHead className="w-[80px] text-center">상태</TableHead>
-                      <TableHead className="w-[200px]">프로젝트명</TableHead>
-                      <TableHead className="w-[70px]">PM</TableHead>
-                      <TableHead className="w-[80px]">고객</TableHead>
-                      <TableHead className="w-[90px]">시작일</TableHead>
-                      <TableHead className="w-[90px]">종료예정</TableHead>
-                      <TableHead className="w-[100px] text-center">진행률</TableHead>
-                      <TableHead className="w-[90px]">원접수번호</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {loading ? (
-                      <TableRow>
-                        <TableCell colSpan={9} className="h-32 text-center text-muted-foreground">
-                          <Loader2 className="w-10 h-10 mx-auto mb-2 animate-spin text-muted-foreground" />
-                          <div className="text-sm">로딩 중...</div>
-                        </TableCell>
-                      </TableRow>
-                    ) : treeRows.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={9} className="h-32 text-center text-muted-foreground">
-                          <Rocket className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
-                          조건에 맞는 프로젝트가 없습니다
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      treeRows.map(({ project: p, depth }) => {
-                        const hasChildren = filteredProjects.some((c) => c.parentId === p.id);
-                        const isExpanded = expandedIds[p.id] !== false;
-                        const childCount = getAllDescendants(projects, p.id).length;
-
-                        return (
-                          <TableRow
-                            key={p.id}
-                            className={cn(
-                              "cursor-pointer hover:bg-muted/50 transition-colors",
-                              selectedId === p.id && "bg-primary/5",
-                              depth === 1 && "bg-slate-50/50",
-                              depth >= 2 && "bg-violet-50/30"
-                            )}
-                            onClick={() => {
-                              setSelectedId(p.id);
-                              setDetailTab("wbs");
-                              fetchTaskDetails(p.id);
-                            }}
-                          >
-                            <TableCell>
-                              <div className="flex items-center gap-1" style={{ paddingLeft: depth * 20 }}>
-                                {hasChildren ? (
-                                  <button
-                                    className="p-0.5 rounded hover:bg-muted transition-transform"
-                                    onClick={(e) => { e.stopPropagation(); toggleExpand(p.id); }}
-                                  >
-                                    <ChevronRight className={cn("w-3.5 h-3.5 text-muted-foreground transition-transform", isExpanded && "rotate-90")} />
-                                  </button>
-                                ) : (
-                                  <span className="w-4" />
-                                )}
-                                <span className={cn("font-semibold text-xs", depth === 0 ? "text-primary" : depth === 1 ? "text-indigo-600" : "text-violet-600")}>
-                                  {p.projectNo}
-                                </span>
-                                {p.relation && (
-                                  <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(p.relation))}>
-                                    {getRelationLabel(p.relation)}
-                                  </span>
-                                )}
-                              </div>
-                            </TableCell>
-                            <TableCell className="text-center">
-                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(p.status))}>
-                                {p.status}
-                              </span>
-                            </TableCell>
-                            <TableCell className="font-medium text-sm">
-                              {p.name}
-                              {childCount > 0 && (
-                                <Badge variant="outline" className="ml-1.5 text-[10px] py-0 px-1.5 font-normal">
-                                  <FolderOpen className="w-3 h-3 mr-0.5" /> {childCount}
-                                </Badge>
-                              )}
-                            </TableCell>
-                            <TableCell className="text-xs">{p.pm}</TableCell>
-                            <TableCell className="text-xs">{p.customer}</TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{p.startDate}</TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{p.endDate}</TableCell>
-                            <TableCell>
-                              <div className="flex items-center gap-1.5">
-                                <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
-                                  <div className={cn("h-full rounded-full transition-all", progressColor(p.progress))} style={{ width: `${p.progress}%` }} />
-                                </div>
-                                <span className={cn("text-[11px] font-medium min-w-[28px] text-right", progressTextColor(p.progress))}>{p.progress}%</span>
-                              </div>
-                            </TableCell>
-                            <TableCell className="text-xs text-muted-foreground">{p.sourceNo || "-"}</TableCell>
-                          </TableRow>
-                        );
-                      })
-                    )}
-                  </TableBody>
-                </Table>
+                <EDataTable
+                  columns={[
+                    { key: "projectNo", label: "프로젝트번호", width: "w-[160px]", render: (_val: any, row: any) => {
+                      const depth = row._depth ?? 0;
+                      const hasChildren = filteredProjects.some((c) => c.parentId === row.id);
+                      const isExpanded = expandedIds[row.id] !== false;
+                      return (
+                        <div className="flex items-center gap-1" style={{ paddingLeft: depth * 20 }}>
+                          {hasChildren ? (
+                            <button className="p-0.5 rounded hover:bg-muted transition-transform" onClick={(e) => { e.stopPropagation(); toggleExpand(row.id); }}>
+                              <ChevronRight className={cn("w-3.5 h-3.5 text-muted-foreground transition-transform", isExpanded && "rotate-90")} />
+                            </button>
+                          ) : (<span className="w-4" />)}
+                          <span className={cn("font-semibold text-xs", depth === 0 ? "text-primary" : depth === 1 ? "text-primary/80" : "text-primary/60")}>{row.projectNo}</span>
+                          {row.relation && (<span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(row.relation))}>{getRelationLabel(row.relation)}</span>)}
+                        </div>
+                      );
+                    }},
+                    { key: "status", label: "상태", width: "w-[80px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(val))}>{val}</span> },
+                    { key: "name", label: "프로젝트명", width: "w-[200px]", render: (val: any, row: any) => {
+                      const childCount = getAllDescendants(projects, row.id).length;
+                      return (<><span className="font-medium text-sm">{val}</span>{childCount > 0 && <Badge variant="outline" className="ml-1.5 text-[10px] py-0 px-1.5 font-normal"><FolderOpen className="w-3 h-3 mr-0.5" /> {childCount}</Badge>}</>);
+                    }},
+                    { key: "pm", label: "PM", width: "w-[70px]" },
+                    { key: "customer", label: "고객", width: "w-[80px]" },
+                    { key: "startDate", label: "시작일", width: "w-[90px]" },
+                    { key: "endDate", label: "종료예정", width: "w-[90px]" },
+                    { key: "progress", label: "진행률", width: "w-[100px]", align: "center" as const, render: (val: any) => (
+                      <div className="flex items-center gap-1.5">
+                        <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                          <div className={cn("h-full rounded-full transition-all", progressColor(val))} style={{ width: `${val}%` }} />
+                        </div>
+                        <span className={cn("text-[11px] font-medium min-w-[28px] text-right", progressTextColor(val))}>{val}%</span>
+                      </div>
+                    )},
+                    { key: "sourceNo", label: "원접수번호", width: "w-[90px]", render: (val: any) => <span className="text-[13px] text-muted-foreground">{val || "-"}</span> },
+                  ] as EDataTableColumn[]}
+                  data={ts.groupData(treeRows.map(({ project: p, depth }) => ({ ...p, _depth: depth })))}
+                  rowKey={(row) => row.id}
+                  loading={loading}
+                  emptyMessage="조건에 맞는 프로젝트가 없어요"
+                  selectedId={selectedId}
+                  onSelect={(id) => {
+                    if (id) {
+                      setSelectedId(id);
+                      setDetailTab("wbs");
+                      fetchTaskDetails(id);
+                    }
+                  }}
+                  onRowClick={(row) => {
+                    setSelectedId(row.id);
+                    setDetailTab("wbs");
+                    fetchTaskDetails(row.id);
+                  }}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
               </div>
             </div>
           </ResizablePanel>
 
-          {/* 오른쪽: 상세 */}
-          {selectedId && selectedProject && (
-            <>
-              <ResizableHandle withHandle />
-              <ResizablePanel defaultSize={50} minSize={30}>
-                <div className="flex flex-col h-full bg-card">
-                  {/* 상세 헤더 */}
-                  <div className="flex items-center justify-between p-3 border-b shrink-0">
-                    <span className="font-semibold text-sm flex items-center gap-2">
-                      <ClipboardList className="w-4 h-4" />
-                      {selectedProject.projectNo} - {selectedProject.name}
-                    </span>
-                    <div className="flex items-center gap-1.5">
-                      <Button size="sm" variant="default" className="h-7 text-xs" onClick={() => openTaskModal()}>
-                        <Plus className="w-3.5 h-3.5 mr-1" /> 업무 추가
-                      </Button>
-                      <Button size="sm" variant="default" className="h-7 text-xs bg-violet-600 hover:bg-violet-700" onClick={() => openProjectModal(undefined, selectedProject.id)}>
-                        <FolderOpen className="w-3.5 h-3.5 mr-1" /> 하위 프로젝트
-                      </Button>
-                      <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openProjectModal(selectedProject)}>
-                        <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
-                      </Button>
-                    </div>
-                  </div>
+          <ResizableHandle withHandle />
 
-                  <div className="flex-1 overflow-auto p-4 space-y-4">
+          {/* 오른쪽: 상세 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 상세 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                {selectedProject ? (
+                  <div className="text-[13px] font-bold flex items-center gap-2">
+                    {selectedProject.name}
+                    <Badge variant="outline" className="text-[11px] font-normal px-1.5 py-0">{selectedProject.projectNo}</Badge>
+                  </div>
+                ) : (
+                  <div className="text-[13px] font-bold flex items-center gap-2">
+                    <ClipboardList className="w-3.5 h-3.5" /> 프로젝트 상세
+                  </div>
+                )}
+                {selectedProject && (
+                  <div className="flex items-center gap-1.5">
+                    <Button size="sm" variant="default" className="h-7 text-xs" onClick={() => openTaskModal()}>
+                      <Plus className="w-3.5 h-3.5 mr-1" /> 업무 추가
+                    </Button>
+                    <Button size="sm" variant="secondary" className="h-7 text-xs" onClick={() => openProjectModal(undefined, selectedProject.id)}>
+                      <FolderOpen className="w-3.5 h-3.5 mr-1" /> 하위 프로젝트
+                    </Button>
+                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openProjectModal(selectedProject)}>
+                      <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {!selectedId || !selectedProject ? (
+                <div className="flex-1 flex items-center justify-center p-8">
+                  <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-12 py-10 text-center">
+                    <Rocket className="h-10 w-10 text-muted-foreground/40" />
+                    <p className="text-sm text-muted-foreground">좌측에서 프로젝트를 선택해주세요</p>
+                  </div>
+                </div>
+              ) : (
+              <div className="flex-1 overflow-auto p-3 space-y-3">
                     {/* 상위 프로젝트 링크 */}
                     {parentProject && (
                       <div
-                        className="flex items-center gap-2 px-3 py-2 bg-blue-50 rounded-md border-l-[3px] border-primary text-sm cursor-pointer hover:bg-blue-100 transition-colors"
+                        className="flex items-center gap-2 px-3 py-2 bg-primary/5 rounded-md border-l-[3px] border-primary text-sm cursor-pointer hover:bg-primary/10 transition-colors"
                         onClick={() => { setSelectedId(parentProject.id); setDetailTab("wbs"); fetchTaskDetails(parentProject.id); }}
                       >
                         <span className="text-muted-foreground">상위:</span>
@@ -882,56 +848,61 @@ export default function DesignProjectPage() {
                     )}
 
                     {/* 개요 카드 */}
-                    <div className="grid grid-cols-5 gap-3">
-                      {[
-                        { label: "전체 업무", value: taskStats.total, color: "text-primary" },
-                        { label: "완료", value: taskStats.completed, color: "text-emerald-600" },
-                        { label: "진행중", value: taskStats.inProgress, color: "text-amber-600" },
-                        { label: "지연", value: taskStats.delayed, color: "text-destructive" },
-                        { label: "하위 프로젝트", value: childProjects.length, color: "text-violet-600" },
-                      ].map((item) => (
-                        <div key={item.label} className="bg-muted/30 rounded-lg p-3 text-center border">
-                          <div className="text-[11px] text-muted-foreground mb-1">{item.label}</div>
-                          <div className={cn("text-2xl font-bold", item.color)}>{item.value}</div>
-                        </div>
-                      ))}
+                    <div className="space-y-1.5">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 현황</span>
+                      <div className="grid grid-cols-5 gap-2">
+                        {[
+                          { label: "전체 업무", value: taskStats.total, color: "text-primary", bg: "bg-primary/5 border-primary/10" },
+                          { label: "완료", value: taskStats.completed, color: "text-primary", bg: "bg-primary/5 border-primary/10" },
+                          { label: "진행중", value: taskStats.inProgress, color: "text-primary/80", bg: "bg-primary/5 border-primary/10" },
+                          { label: "지연", value: taskStats.delayed, color: "text-destructive", bg: "bg-destructive/5 border-destructive/10" },
+                          { label: "하위 프로젝트", value: childProjects.length, color: "text-foreground", bg: "bg-muted/40 border-border" },
+                        ].map((item) => (
+                          <div key={item.label} className={cn("rounded-lg p-2.5 text-center border transition-colors hover:opacity-80", item.bg)}>
+                            <div className="text-[10px] text-muted-foreground mb-0.5">{item.label}</div>
+                            <div className={cn("text-xl font-bold", item.color)}>{item.value}</div>
+                          </div>
+                        ))}
+                      </div>
                     </div>
 
                     {/* 탭 */}
-                    <Tabs value={detailTab} onValueChange={setDetailTab}>
-                      <TabsList className="w-full">
-                        <TabsTrigger value="wbs" className="flex-1 text-xs gap-1.5">
-                          <ClipboardList className="w-3.5 h-3.5" /> WBS
-                        </TabsTrigger>
-                        <TabsTrigger value="gantt" className="flex-1 text-xs gap-1.5">
-                          <BarChart3 className="w-3.5 h-3.5" /> 간트차트
-                        </TabsTrigger>
-                        <TabsTrigger value="team" className="flex-1 text-xs gap-1.5">
-                          <Users className="w-3.5 h-3.5" /> 팀원
-                        </TabsTrigger>
-                        <TabsTrigger value="subprojects" className="flex-1 text-xs gap-1.5">
-                          <FolderOpen className="w-3.5 h-3.5" /> 하위({childProjects.length})
-                        </TabsTrigger>
+                    <Tabs value={detailTab} onValueChange={setDetailTab} className="flex flex-col flex-1 overflow-hidden gap-0">
+                      <TabsList className="bg-card w-full justify-start rounded-none border-b border-border p-0 h-auto shrink-0">
+                        {[
+                          { value: "wbs", icon: <ClipboardList className="w-3.5 h-3.5" />, label: "WBS" },
+                          { value: "gantt", icon: <BarChart3 className="w-3.5 h-3.5" />, label: "간트차트" },
+                          { value: "team", icon: <Users className="w-3.5 h-3.5" />, label: "팀원" },
+                          { value: "subprojects", icon: <FolderOpen className="w-3.5 h-3.5" />, label: `하위(${childProjects.length})` },
+                        ].map((tab) => (
+                          <TabsTrigger
+                            key={tab.value}
+                            value={tab.value}
+                            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                          >
+                            {tab.icon} {tab.label}
+                          </TabsTrigger>
+                        ))}
                       </TabsList>
 
                       {/* WBS 탭 */}
-                      <TabsContent value="wbs" className="mt-4">
+                      <TabsContent value="wbs" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
                         {selectedProject.tasks.length === 0 ? (
-                          <div className="text-center py-10 text-muted-foreground">
-                            <ClipboardList className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
-                            <div className="text-sm">등록된 업무가 없습니다</div>
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <ClipboardList className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">등록된 업무가 없어요</span>
                           </div>
                         ) : (
                           <Table>
-                            <TableHeader>
-                              <TableRow>
-                                <TableHead className="w-[180px]">업무명</TableHead>
-                                <TableHead className="w-[70px]">담당자</TableHead>
-                                <TableHead className="w-[85px]">시작일</TableHead>
-                                <TableHead className="w-[85px]">종료일</TableHead>
-                                <TableHead className="w-[70px] text-center">상태</TableHead>
-                                <TableHead className="w-[90px] text-center">진행률</TableHead>
-                                <TableHead className="w-[80px] text-center">관리</TableHead>
+                            <TableHeader className="sticky top-0 z-10">
+                              <TableRow className="bg-muted hover:bg-muted">
+                                <TableHead className="w-[180px] text-[11px] uppercase tracking-wide">업무명</TableHead>
+                                <TableHead className="w-[70px] text-[11px] uppercase tracking-wide">담당자</TableHead>
+                                <TableHead className="w-[85px] text-[11px] uppercase tracking-wide">시작일</TableHead>
+                                <TableHead className="w-[85px] text-[11px] uppercase tracking-wide">종료일</TableHead>
+                                <TableHead className="w-[70px] text-center text-[11px] uppercase tracking-wide">상태</TableHead>
+                                <TableHead className="w-[90px] text-center text-[11px] uppercase tracking-wide">진행률</TableHead>
+                                <TableHead className="w-[80px] text-center text-[11px] uppercase tracking-wide">관리</TableHead>
                               </TableRow>
                             </TableHeader>
                             <TableBody>
@@ -953,10 +924,10 @@ export default function DesignProjectPage() {
                                       const displayStatus = isDelay ? "지연" : task.status;
                                       return (
                                         <TableRow key={task._idx}>
-                                          <TableCell className="pl-8 text-xs">{task.name}</TableCell>
-                                          <TableCell className="text-xs">{task.assignee}</TableCell>
-                                          <TableCell className="text-xs text-muted-foreground">{task.start}</TableCell>
-                                          <TableCell className={cn("text-xs", isDelay && "text-destructive font-semibold")}>{task.end}</TableCell>
+                                          <TableCell className="pl-8 text-[13px]">{task.name}</TableCell>
+                                          <TableCell className="text-[13px]">{task.assignee}</TableCell>
+                                          <TableCell className="text-[13px] text-muted-foreground">{task.start}</TableCell>
+                                          <TableCell className={cn("text-[13px]", isDelay && "text-destructive font-semibold")}>{task.end}</TableCell>
                                           <TableCell className="text-center">
                                             <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", getTaskStatusColor(displayStatus))}>
                                               {displayStatus}
@@ -995,11 +966,11 @@ export default function DesignProjectPage() {
                       </TabsContent>
 
                       {/* 간트차트 탭 */}
-                      <TabsContent value="gantt" className="mt-4">
+                      <TabsContent value="gantt" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
                         {selectedProject.tasks.length === 0 ? (
-                          <div className="text-center py-10 text-muted-foreground">
-                            <BarChart3 className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
-                            <div className="text-sm">업무를 등록하면 간트차트가 표시됩니다</div>
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <BarChart3 className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">업무를 등록하면 간트차트가 표시돼요</span>
                           </div>
                         ) : (
                           <GanttChart tasks={selectedProject.tasks} startDate={selectedProject.startDate} endDate={selectedProject.endDate} />
@@ -1007,22 +978,22 @@ export default function DesignProjectPage() {
                       </TabsContent>
 
                       {/* 팀원 탭 */}
-                      <TabsContent value="team" className="mt-4">
+                      <TabsContent value="team" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
                         {selectedProject.tasks.length === 0 ? (
-                          <div className="text-center py-10 text-muted-foreground">
-                            <Users className="w-10 h-10 mx-auto mb-2 text-muted-foreground/30" />
-                            <div className="text-sm">업무를 등록하면 팀원 현황이 표시됩니다</div>
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <Users className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">업무를 등록하면 팀원 현황이 표시돼요</span>
                           </div>
                         ) : (
                           <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                             {Object.entries(teamMembers).map(([name, tasks], idx) => {
                               const avgProg = Math.round(tasks.reduce((s, t) => s + t.progress, 0) / tasks.length);
                               const isPM = name === selectedProject.pm;
-                              const avatarColors = ["bg-primary", "bg-emerald-600", "bg-violet-600", "bg-amber-600"];
+                              const avatarColors = ["bg-primary", "bg-primary/80", "bg-primary/60", "bg-destructive/70"];
                               return (
                                 <div key={name} className="border rounded-lg p-4 hover:shadow-sm transition-shadow">
                                   <div className="flex items-center gap-3 mb-3">
-                                    <div className={cn("w-10 h-10 rounded-full flex items-center justify-center text-white font-bold", avatarColors[idx % 4])}>
+                                    <div className={cn("w-10 h-10 rounded-full flex items-center justify-center text-primary-foreground font-bold", avatarColors[idx % 4])}>
                                       {name.charAt(0)}
                                     </div>
                                     <div>
@@ -1063,7 +1034,7 @@ export default function DesignProjectPage() {
                       </TabsContent>
 
                       {/* 하위 프로젝트 탭 */}
-                      <TabsContent value="subprojects" className="mt-4">
+                      <TabsContent value="subprojects" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                           {childProjects.map((child) => {
                             const completedCount = child.tasks.filter((t) => t.status === "완료").length;
@@ -1113,44 +1084,47 @@ export default function DesignProjectPage() {
                       </TabsContent>
                     </Tabs>
                   </div>
-                </div>
-              </ResizablePanel>
-            </>
-          )}
+              )}
+            </div>
+          </ResizablePanel>
         </ResizablePanelGroup>
       </div>
 
       {/* 프로젝트 등록/수정 모달 */}
       <Dialog open={isProjectModalOpen} onOpenChange={setIsProjectModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">
-              {projects.some((p) => p.id === formProjectId) ? "프로젝트 수정" : formParentId ? "하위 프로젝트 등록" : "프로젝트 등록"}
+            <DialogTitle>
+              {projects.some((p) => p.id === formProjectId)
+                ? "프로젝트 수정"
+                : formParentId
+                ? "하위 프로젝트 등록"
+                : "프로젝트 등록"}
             </DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">프로젝트 기본 정보를 입력하세요.</DialogDescription>
+            <DialogDescription>프로젝트 기본 정보를 입력해주세요.</DialogDescription>
           </DialogHeader>
           <div className="space-y-3 sm:space-y-4">
             <div>
-              <Label className="text-xs sm:text-sm">프로젝트 번호</Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 번호</span>
               <Input value={formProjectNo || formProjectId} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted/50" />
             </div>
             <div>
-              <Label className="text-xs sm:text-sm">프로젝트명 <span className="text-destructive">*</span></Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트명 <span className="text-destructive">*</span></span>
               <Input value={formName} onChange={(e) => setFormName(e.target.value)} placeholder="프로젝트명" className="h-8 text-xs sm:h-10 sm:text-sm" />
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">시작일 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">시작일 <span className="text-destructive">*</span></span>
                 <Input type="date" value={formStartDate} onChange={(e) => setFormStartDate(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">종료예정일 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">종료예정일 <span className="text-destructive">*</span></span>
                 <Input type="date" value={formEndDate} onChange={(e) => setFormEndDate(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">PM <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">PM <span className="text-destructive">*</span></span>
                 <Select value={formPM || "none"} onValueChange={(v) => setFormPM(v === "none" ? "" : v)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="선택" /></SelectTrigger>
                   <SelectContent>
@@ -1163,13 +1137,13 @@ export default function DesignProjectPage() {
                 </Select>
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">고객</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">고객</span>
                 <Input value={formCustomer} onChange={(e) => setFormCustomer(e.target.value)} placeholder="고객/거래처명" className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">상위 프로젝트</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상위 프로젝트</span>
                 <Select value={formParentId || "none"} onValueChange={(v) => setFormParentId(v === "none" ? "" : v)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="없음" /></SelectTrigger>
                   <SelectContent>
@@ -1181,7 +1155,7 @@ export default function DesignProjectPage() {
                 </Select>
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">관계 유형</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">관계 유형</span>
                 <Select value={formRelation} onValueChange={(v) => setFormRelation(v as RelationType)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
                   <SelectContent>
@@ -1193,17 +1167,17 @@ export default function DesignProjectPage() {
               </div>
             </div>
             <div>
-              <Label className="text-xs sm:text-sm">원접수번호</Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">원접수번호</span>
               <Input value={formSourceNo} onChange={(e) => setFormSourceNo(e.target.value)} placeholder="DR-XXXX-XXXX" className="h-8 text-xs sm:h-10 sm:text-sm" />
             </div>
             <div>
-              <Label className="text-xs sm:text-sm">설명</Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">설명</span>
               <Textarea value={formDesc} onChange={(e) => setFormDesc(e.target.value)} placeholder="프로젝트 개요" rows={3} />
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setIsProjectModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
-            <Button onClick={handleSaveProject} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsProjectModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveProject}>
               <Save className="w-4 h-4 mr-1.5" /> 저장
             </Button>
           </DialogFooter>
@@ -1212,19 +1186,19 @@ export default function DesignProjectPage() {
 
       {/* 업무 등록/수정 모달 */}
       <Dialog open={isTaskModalOpen} onOpenChange={setIsTaskModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">{editingTaskIdx >= 0 ? "업무 수정" : "업무 등록"}</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">업무 정보를 입력하세요.</DialogDescription>
+            <DialogTitle>{editingTaskIdx >= 0 ? "업무 수정" : "업무 등록"}</DialogTitle>
+            <DialogDescription>업무 정보를 입력해주세요.</DialogDescription>
           </DialogHeader>
           <div className="space-y-3">
             <div>
-              <Label className="text-xs sm:text-sm">업무명 <span className="text-destructive">*</span></Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무명 <span className="text-destructive">*</span></span>
               <Input value={tName} onChange={(e) => setTName(e.target.value)} placeholder="업무명" className="h-8 text-xs sm:h-10 sm:text-sm" />
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">업무 유형</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무 유형</span>
                 <Select value={tCategory} onValueChange={setTCategory}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
                   <SelectContent>
@@ -1235,7 +1209,7 @@ export default function DesignProjectPage() {
                 </Select>
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">담당자 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자 <span className="text-destructive">*</span></span>
                 <Select value={tAssignee || "none"} onValueChange={(v) => setTAssignee(v === "none" ? "" : v)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="선택" /></SelectTrigger>
                   <SelectContent>
@@ -1249,17 +1223,17 @@ export default function DesignProjectPage() {
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">시작일 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">시작일 <span className="text-destructive">*</span></span>
                 <Input type="date" value={tStart} onChange={(e) => setTStart(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">종료일 <span className="text-destructive">*</span></Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">종료일 <span className="text-destructive">*</span></span>
                 <Input type="date" value={tEnd} onChange={(e) => setTEnd(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-xs sm:text-sm">상태</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상태</span>
                 <Select value={tStatus} onValueChange={(v) => setTStatus(v as TaskStatus)}>
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
                   <SelectContent>
@@ -1270,18 +1244,18 @@ export default function DesignProjectPage() {
                 </Select>
               </div>
               <div>
-                <Label className="text-xs sm:text-sm">진행률 (%)</Label>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">진행률 (%)</span>
                 <Input type="number" min={0} max={100} value={tProgress} onChange={(e) => setTProgress(Number(e.target.value))} className="h-8 text-xs sm:h-10 sm:text-sm" />
               </div>
             </div>
             <div>
-              <Label className="text-xs sm:text-sm">비고</Label>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">비고</span>
               <Textarea value={tRemark} onChange={(e) => setTRemark(e.target.value)} placeholder="비고 사항" rows={2} />
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setIsTaskModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
-            <Button onClick={handleSaveTask} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsTaskModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveTask}>
               <Save className="w-4 h-4 mr-1.5" /> 저장
             </Button>
           </DialogFooter>
@@ -1290,15 +1264,15 @@ export default function DesignProjectPage() {
 
       {/* 태스크 상세 모달 (수행기록/이슈) */}
       <Dialog open={isTaskDetailOpen} onOpenChange={setIsTaskDetailOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[700px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-3xl max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">{detailTask?.name || "업무 상세"}</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">업무 이력 및 이슈를 확인합니다.</DialogDescription>
+            <DialogTitle>{detailTask?.name || "업무 상세"}</DialogTitle>
+            <DialogDescription>업무 이력 및 이슈를 확인해주세요.</DialogDescription>
           </DialogHeader>
           {detailTask && (
             <>
               {/* 태스크 요약 */}
-              <div className="grid grid-cols-2 gap-2 bg-muted/30 p-3 rounded-lg border text-xs">
+              <div className="grid grid-cols-2 gap-2 bg-muted/20 p-3 rounded-lg border text-xs">
                 <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">유형</span><span className="font-medium">{detailTask.category}</span></div>
                 <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">담당자</span><span className="font-medium">{detailTask.assignee}</span></div>
                 <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">기간</span><span className="font-medium">{detailTask.start} ~ {detailTask.end}</span></div>
@@ -1320,11 +1294,14 @@ export default function DesignProjectPage() {
                 </TabsList>
 
                 <TabsContent value="log" className="mt-3">
-                  <div className="bg-blue-50 rounded-md p-2.5 mb-3 text-xs text-blue-800 border border-blue-100">
-                    수행기록 등록/수정은 <strong>내업무현황</strong> 메뉴에서 진행합니다.
+                  <div className="bg-primary/5 rounded-md p-2.5 mb-3 text-xs text-primary border border-primary/20">
+                    수행기록 등록/수정은 <strong>내업무현황</strong> 메뉴에서 진행해요.
                   </div>
                   {(!detailTask.workLogs || detailTask.workLogs.length === 0) ? (
-                    <div className="text-center py-8 text-muted-foreground text-sm">등록된 수행기록이 없습니다.</div>
+                    <div className="flex flex-col items-center gap-2 py-8 mx-auto max-w-xs border border-dashed border-border rounded-lg">
+                      <ClipboardList className="w-8 h-8 text-muted-foreground/30" />
+                      <span className="text-sm text-muted-foreground">등록된 수행기록이 없어요</span>
+                    </div>
                   ) : (
                     <div className="space-y-2 max-h-[300px] overflow-y-auto">
                       {[...detailTask.workLogs].sort((a, b) => b.date.localeCompare(a.date)).map((log, i) => {
@@ -1342,7 +1319,7 @@ export default function DesignProjectPage() {
                               <div className="flex gap-2 text-muted-foreground flex-wrap">
                                 <Badge variant="secondary" className="text-[10px] py-0">⏱ {log.hours}h</Badge>
                                 {log.progressBefore !== undefined && (
-                                  <Badge variant="outline" className="text-[10px] py-0 bg-emerald-50 text-emerald-700 border-emerald-200">
+                                  <Badge variant="outline" className="text-[10px] py-0 bg-primary/5 text-primary border-primary/20">
                                     📈 {log.progressBefore}% → {log.progressAfter}%
                                   </Badge>
                                 )}
@@ -1358,12 +1335,15 @@ export default function DesignProjectPage() {
 
                 <TabsContent value="issue" className="mt-3">
                   {(!detailTask.issues || detailTask.issues.length === 0) ? (
-                    <div className="text-center py-8 text-muted-foreground text-sm">등록된 이슈가 없습니다.</div>
+                    <div className="flex flex-col items-center gap-2 py-8 mx-auto max-w-xs border border-dashed border-border rounded-lg">
+                      <ClipboardList className="w-8 h-8 text-muted-foreground/30" />
+                      <span className="text-sm text-muted-foreground">등록된 이슈가 없어요</span>
+                    </div>
                   ) : (
                     <div className="space-y-2 max-h-[300px] overflow-y-auto">
                       {detailTask.issues.map((issue) => {
-                        const priorityColor = issue.priority === "긴급" ? "text-destructive" : issue.priority === "높음" ? "text-amber-600" : "text-muted-foreground";
-                        const statusBadge = issue.status === "해결" ? "bg-emerald-100 text-emerald-700" : issue.status === "진행중" ? "bg-blue-100 text-blue-700" : "bg-rose-100 text-rose-700";
+                        const priorityColor = issue.priority === "긴급" ? "text-destructive" : issue.priority === "높음" ? "text-destructive/70" : "text-muted-foreground";
+                        const statusBadge = issue.status === "해결" ? "bg-primary/10 text-primary" : issue.status === "진행중" ? "bg-primary/10 text-primary" : "bg-destructive/10 text-destructive";
                         return (
                           <div key={issue.id} className="border rounded-lg p-3">
                             <div className="flex items-center justify-between mb-1.5">
@@ -1389,10 +1369,19 @@ export default function DesignProjectPage() {
             </>
           )}
           <DialogFooter>
-            <Button variant="outline" onClick={() => setIsTaskDetailOpen(false)} className="h-8 text-xs sm:h-10 sm:text-sm">닫기</Button>
+            <Button variant="outline" onClick={() => setIsTaskDetailOpen(false)}>닫기</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
@@ -1423,12 +1412,12 @@ function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: s
   }
 
   const barColors: Record<string, string> = {
-    기구설계: "bg-blue-500",
-    전장설계: "bg-amber-500",
-    SW개발: "bg-violet-500",
-    "구매/조달": "bg-emerald-500",
-    "조립/시운전": "bg-rose-500",
-    "검토/승인": "bg-gray-400",
+    기구설계: "bg-primary",
+    전장설계: "bg-primary/80",
+    SW개발: "bg-primary/60",
+    "구매/조달": "bg-secondary-foreground/70",
+    "조립/시운전": "bg-destructive/70",
+    "검토/승인": "bg-muted-foreground",
   };
 
   const todayFromStart = Math.ceil((today.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24));
@@ -1465,8 +1454,8 @@ function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: s
                   key={i}
                   className={cn(
                     "text-center text-[10px] text-muted-foreground border-r py-1.5",
-                    isWeekend && "bg-rose-50",
-                    isToday && "bg-blue-50 text-primary font-bold"
+                    isWeekend && "bg-muted/30",
+                    isToday && "bg-primary/5 text-primary font-bold"
                   )}
                   style={{ minWidth: cellWidth }}
                 >
@@ -1485,7 +1474,7 @@ function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: s
           const taskDays = Math.max(1, Math.ceil((tEnd.getTime() - tStart.getTime()) / (1000 * 60 * 60 * 24)) + 1);
           const leftPos = useWeekly ? (dayFromStart / 7) * cellWidth : dayFromStart * cellWidth;
           const barWidth = useWeekly ? (taskDays / 7) * cellWidth : taskDays * cellWidth;
-          const barColor = barColors[task.category] || "bg-blue-500";
+          const barColor = barColors[task.category] || "bg-primary";
 
           return (
             <div key={i} className="flex border-b hover:bg-muted/30 min-h-[34px]">
@@ -1494,10 +1483,10 @@ function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: s
                 {dates.map((d, di) => {
                   const dow = d.getDay();
                   const isWeekend = (dow === 0 || dow === 6) && !useWeekly;
-                  return <div key={di} className={cn("border-r h-full", isWeekend && "bg-rose-50")} style={{ minWidth: cellWidth }} />;
+                  return <div key={di} className={cn("border-r h-full", isWeekend && "bg-muted/30")} style={{ minWidth: cellWidth }} />;
                 })}
                 <div
-                  className={cn("absolute h-5 rounded text-[10px] text-white flex items-center justify-center font-semibold", barColor)}
+                  className={cn("absolute h-5 rounded text-[10px] text-primary-foreground flex items-center justify-center font-semibold", barColor)}
                   style={{ left: leftPos, width: Math.max(barWidth, 16), top: "50%", transform: "translateY(-50%)" }}
                 >
                   {barWidth > 30 ? `${task.progress}%` : ""}
diff --git a/frontend/app/(main)/COMPANY_7/design/task-management/page.tsx b/frontend/app/(main)/COMPANY_7/design/task-management/page.tsx
index d68bb5a2..f5603e46 100644
--- a/frontend/app/(main)/COMPANY_7/design/task-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/design/task-management/page.tsx
@@ -1,15 +1,8 @@
 "use client";
 
-import React, { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import React, { useState, useMemo, useCallback, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import {
   Table,
   TableBody,
@@ -24,10 +17,9 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogFooter,
   DialogDescription,
+  DialogFooter,
 } from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import {
   ResizableHandle,
@@ -48,8 +40,6 @@ import {
   CommandList,
 } from "@/components/ui/command";
 import {
-  Search,
-  RotateCcw,
   RefreshCw,
   ClipboardList,
   Pencil,
@@ -58,7 +48,6 @@ import {
   XCircle,
   Rocket,
   Eye,
-  ChevronRight,
   ArrowRight,
   Check,
   ChevronsUpDown,
@@ -66,7 +55,9 @@ import {
   Loader2,
   User,
   Users,
+  Settings2,
 } from "lucide-react";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
 import {
@@ -77,6 +68,9 @@ import {
 } from "@/lib/api/design";
 import { getUserList } from "@/lib/api/user";
 import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 
 // --- Types ---
 type SourceType = "dr" | "ecr";
@@ -121,39 +115,39 @@ interface TaskItem {
 const getStatusVariant = (status: TaskStatus) => {
   switch (status) {
     case "신규접수":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "검토중":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-muted text-muted-foreground border-border";
     case "승인완료":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
+      return "bg-primary/15 text-primary border-primary/25";
     case "반려":
-      return "bg-rose-100 text-rose-800 border-rose-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "프로젝트생성":
-      return "bg-violet-100 text-violet-800 border-violet-200";
+      return "bg-secondary text-secondary-foreground border-border";
     default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getPriorityVariant = (priority: Priority) => {
   switch (priority) {
     case "긴급":
-      return "bg-rose-100 text-rose-800 border-rose-200";
+      return "bg-destructive/10 text-destructive border-destructive/20";
     case "높음":
-      return "bg-amber-100 text-amber-800 border-amber-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "보통":
-      return "bg-blue-100 text-blue-800 border-blue-200";
+      return "bg-muted text-muted-foreground border-border";
     case "낮음":
-      return "bg-gray-100 text-gray-600 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
     default:
-      return "bg-gray-100 text-gray-600 border-gray-200";
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getSourceBadge = (type: SourceType) => {
   if (type === "dr")
-    return "bg-blue-100 text-blue-800 border-blue-200";
-  return "bg-amber-100 text-amber-800 border-amber-200";
+    return "bg-primary/10 text-primary border-primary/20";
+  return "bg-secondary text-secondary-foreground border-border";
 };
 
 const getStepIcon = (step: string) => {
@@ -216,11 +210,11 @@ const APPROVAL_STEPS = [
 
 // --- 현황 카드 설정 ---
 const STAT_CARDS: { label: string; status: TaskStatus; color: string; textColor: string }[] = [
-  { label: "신규접수", status: "신규접수", color: "from-indigo-500 to-purple-600", textColor: "text-white" },
-  { label: "검토중", status: "검토중", color: "from-amber-400 to-orange-500", textColor: "text-gray-900" },
-  { label: "승인완료", status: "승인완료", color: "from-cyan-400 to-blue-500", textColor: "text-white" },
-  { label: "반려", status: "반려", color: "from-rose-400 to-red-500", textColor: "text-white" },
-  { label: "프로젝트", status: "프로젝트생성", color: "from-violet-400 to-purple-500", textColor: "text-white" },
+  { label: "신규접수", status: "신규접수", color: "bg-primary", textColor: "text-primary-foreground" },
+  { label: "검토중", status: "검토중", color: "bg-muted border border-border", textColor: "text-foreground" },
+  { label: "승인완료", status: "승인완료", color: "bg-primary/80", textColor: "text-primary-foreground" },
+  { label: "반려", status: "반려", color: "bg-destructive", textColor: "text-destructive-foreground" },
+  { label: "프로젝트", status: "프로젝트생성", color: "bg-secondary", textColor: "text-secondary-foreground" },
 ];
 
 interface EmployeeOption {
@@ -229,7 +223,21 @@ interface EmployeeOption {
   deptName: string;
 }
 
+const TASK_GRID_COLUMNS = [
+  { key: "source_type", label: "구분" },
+  { key: "request_no", label: "접수번호" },
+  { key: "status", label: "상태" },
+  { key: "priority", label: "우선순위" },
+  { key: "target_name", label: "설비/품목명" },
+  { key: "req_dept", label: "의뢰부서" },
+  { key: "requester", label: "의뢰자" },
+  { key: "request_date", label: "접수일자" },
+  { key: "due_date", label: "희망납기" },
+  { key: "designer", label: "설계담당" },
+];
+
 export default function DesignTaskManagementPage() {
+  const ts = useTableSettings("c16-task-management", "dsn_design_request", TASK_GRID_COLUMNS);
   const { user, userName, loading: authLoading } = useAuth();
   const [allTasks, setAllTasks] = useState<TaskItem[]>([]);
   const [loading, setLoading] = useState(true);
@@ -272,11 +280,8 @@ export default function DesignTaskManagementPage() {
     fetchEmployees();
   }, [fetchTasks, fetchEmployees]);
 
-  // 검색 필터
-  const [searchStatus, setSearchStatus] = useState<string>("all");
-  const [searchPriority, setSearchPriority] = useState<string>("all");
-  const [searchReqDept, setSearchReqDept] = useState<string>("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 담당자 선택 모달 상태
   const [designerModalOpen, setDesignerModalOpen] = useState(false);
@@ -336,23 +341,51 @@ export default function DesignTaskManagementPage() {
     };
   }, [myRelatedTasks]);
 
+  // snake_case → camelCase 매핑 (DynamicSearchFilter의 columnName은 snake_case)
+  const taskFieldMap: Record<string, string> = {
+    source_type: "sourceType",
+    request_no: "id",
+    target_name: "targetName",
+    req_dept: "reqDept",
+    request_date: "date",
+    due_date: "dueDate",
+    approval_step: "approvalStep",
+    design_type: "designType",
+    drawing_no: "drawingNo",
+    change_type: "changeType",
+    review_memo: "reviewMemo",
+    project_id: "projectNo",
+  };
+  const getTaskFieldValue = (obj: any, colName: string): string => {
+    const key = taskFieldMap[colName] || colName;
+    const val = obj[key];
+    if (Array.isArray(val)) return val.join(",");
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
   // 필터링된 데이터
   const filteredData = useMemo(() => {
     return myRelatedTasks.filter((item) => {
       if (currentTab === "dr" && item.sourceType !== "dr") return false;
       if (currentTab === "ecr" && item.sourceType !== "ecr") return false;
-      if (searchStatus !== "all" && item.status !== searchStatus) return false;
-      if (searchPriority !== "all" && item.priority !== searchPriority) return false;
-      if (searchReqDept !== "all" && item.reqDept !== searchReqDept) return false;
-      if (searchKeyword) {
-        const str = [item.id, item.targetName, item.customer, item.requester, item.designer, item.reqDept]
-          .join(" ")
-          .toLowerCase();
-        if (!str.includes(searchKeyword.toLowerCase())) return false;
+      for (const f of searchFilters) {
+        const val = getTaskFieldValue(item, f.columnName);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (val !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) return false;
+          if (to && val > to) return false;
+        }
       }
       return true;
     });
-  }, [myRelatedTasks, currentTab, searchStatus, searchPriority, searchReqDept, searchKeyword]);
+  }, [myRelatedTasks, currentTab, searchFilters]);
 
   // 현황 통계
   const stats = useMemo(() => {
@@ -592,15 +625,8 @@ export default function DesignTaskManagementPage() {
     fetchTasks();
   }, [selectedTaskId, reviewMemoText, fetchTasks]);
 
-  const handleResetSearch = useCallback(() => {
-    setSearchStatus("all");
-    setSearchPriority("all");
-    setSearchReqDept("all");
-    setSearchKeyword("");
-  }, []);
-
-  const handleFilterByStatus = useCallback((status: TaskStatus) => {
-    setSearchStatus(status);
+  const handleFilterByStatus = useCallback((_status: TaskStatus) => {
+    // Status filter now handled by DynamicSearchFilter
   }, []);
 
   // 납기 남은 일수 계산
@@ -608,13 +634,13 @@ export default function DesignTaskManagementPage() {
     const due = new Date(dueDate);
     const today = new Date();
     const diffDays = Math.ceil((due.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
-    const color = diffDays < 0 ? "text-rose-600" : diffDays <= 7 ? "text-amber-600" : "text-emerald-600";
+    const color = diffDays < 0 ? "text-destructive" : diffDays <= 7 ? "text-primary" : "text-muted-foreground";
     const text = diffDays < 0 ? `${Math.abs(diffDays)}일 초과` : diffDays === 0 ? "오늘" : `${diffDays}일 남음`;
     return { color, text };
   };
 
   return (
-    <div className="flex h-full flex-col overflow-hidden bg-background">
+    <div className="flex h-[calc(100vh-4rem)] flex-col overflow-hidden bg-background">
       {/* 탭 바 */}
       <div className="flex items-center border-b-2 border-border bg-card px-5">
         {([
@@ -640,7 +666,7 @@ export default function DesignTaskManagementPage() {
             <span
               className={cn(
                 "min-w-[20px] rounded-full px-1.5 py-0.5 text-center text-[11px] font-bold",
-                tab.isNew ? "bg-rose-500 text-white" : "bg-muted text-muted-foreground"
+                tab.isNew ? "bg-destructive text-destructive-foreground" : "bg-muted text-muted-foreground"
               )}
             >
               {tab.count}
@@ -682,73 +708,22 @@ export default function DesignTaskManagementPage() {
               전체
             </button>
           </div>
-          <div className="flex items-center gap-1.5 rounded-full bg-emerald-50 px-3 py-1 text-xs text-emerald-600 dark:bg-emerald-950/30 dark:text-emerald-400">
-            <span className="h-2 w-2 animate-pulse rounded-full bg-emerald-500" />
+          <div className="flex items-center gap-1.5 rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">
+            <span className="h-2 w-2 animate-pulse rounded-full bg-primary" />
             실시간 동기화 중
           </div>
         </div>
       </div>
 
-      {/* 검색 섹션 */}
-      <div className="border-b border-border bg-card px-5 py-3">
-        <div className="flex flex-wrap items-center gap-3">
-          <div className="flex flex-1 flex-wrap items-center gap-3">
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="h-9 w-[130px] text-xs">
-                <SelectValue placeholder="상태 전체" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">상태 전체</SelectItem>
-                <SelectItem value="신규접수">신규접수</SelectItem>
-                <SelectItem value="검토중">검토중</SelectItem>
-                <SelectItem value="승인완료">승인완료</SelectItem>
-                <SelectItem value="반려">반려</SelectItem>
-                <SelectItem value="프로젝트생성">프로젝트생성</SelectItem>
-              </SelectContent>
-            </Select>
-            <Select value={searchPriority} onValueChange={setSearchPriority}>
-              <SelectTrigger className="h-9 w-[130px] text-xs">
-                <SelectValue placeholder="우선순위 전체" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">우선순위 전체</SelectItem>
-                <SelectItem value="긴급">긴급</SelectItem>
-                <SelectItem value="높음">높음</SelectItem>
-                <SelectItem value="보통">보통</SelectItem>
-                <SelectItem value="낮음">낮음</SelectItem>
-              </SelectContent>
-            </Select>
-            <Select value={searchReqDept} onValueChange={setSearchReqDept}>
-              <SelectTrigger className="h-9 w-[130px] text-xs">
-                <SelectValue placeholder="의뢰부서 전체" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">의뢰부서 전체</SelectItem>
-                <SelectItem value="영업팀">영업팀</SelectItem>
-                <SelectItem value="생산팀">생산팀</SelectItem>
-                <SelectItem value="품질팀">품질팀</SelectItem>
-                <SelectItem value="구매팀">구매팀</SelectItem>
-                <SelectItem value="기획팀">기획팀</SelectItem>
-                <SelectItem value="설계팀">설계팀</SelectItem>
-              </SelectContent>
-            </Select>
-            <div className="relative min-w-[280px]">
-              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                value={searchKeyword}
-                onChange={(e) => setSearchKeyword(e.target.value)}
-                placeholder="접수번호 / 설비명 / 품목명 / 고객명 검색"
-                className="h-9 pl-9 text-xs"
-              />
-            </div>
-          </div>
-          <div className="flex shrink-0 gap-2">
-            <Button size="sm" variant="outline" onClick={handleResetSearch}>
-              <RotateCcw className="mr-1 h-3.5 w-3.5" />
-              초기화
-            </Button>
-          </div>
-        </div>
+      {/* 검색 필터 */}
+      <div className="border-b border-border bg-card px-4 py-3">
+        <DynamicSearchFilter
+          tableName="dsn_design_request"
+          filterId="c16-task-management"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredData.length}
+        />
       </div>
 
       {/* 좌우 분할 패널 */}
@@ -757,98 +732,67 @@ export default function DesignTaskManagementPage() {
           {/* 왼쪽: 접수 목록 */}
           <ResizablePanel defaultSize={58} minSize={35}>
             <div className="flex h-full flex-col bg-card">
-              <div className="flex items-center justify-between border-b-2 border-border px-5 py-3">
-                <h2 className="text-base font-bold text-foreground">
-                  {myTasksOnly ? "내 관련 업무" : "접수 업무 목록"} ({filteredData.length}건)
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold flex items-center gap-2">
+                  {myTasksOnly ? "내 관련 업무" : "접수 업무 목록"}
+                  <span className="text-primary bg-primary/8 border border-primary/15 rounded-md px-1.5 py-0.5 text-[11px] font-semibold">{filteredData.length}건</span>
                   {myTasksOnly && (
-                    <span className="ml-2 text-xs font-normal text-muted-foreground">
+                    <span className="text-xs font-normal text-muted-foreground">
                       전체 {allTasks.length}건 중
                     </span>
                   )}
-                </h2>
+                </div>
                 <Button size="sm" variant="outline" onClick={fetchTasks} disabled={loading}>
                   {loading ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
                   동기화
                 </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
               </div>
-              <div className="flex-1 overflow-auto">
-                <Table>
-                  <TableHeader className="sticky top-0 z-10 bg-muted">
-                    <TableRow>
-                      <TableHead className="w-[60px] text-center text-xs">구분</TableHead>
-                      <TableHead className="w-[130px] text-xs">접수번호</TableHead>
-                      <TableHead className="w-[90px] text-center text-xs">상태</TableHead>
-                      <TableHead className="w-[80px] text-center text-xs">우선순위</TableHead>
-                      <TableHead className="min-w-[180px] text-xs">설비/품목명</TableHead>
-                      <TableHead className="w-[90px] text-xs">의뢰부서</TableHead>
-                      <TableHead className="w-[80px] text-xs">의뢰자</TableHead>
-                      <TableHead className="w-[100px] text-xs">접수일자</TableHead>
-                      <TableHead className="w-[100px] text-xs">희망납기</TableHead>
-                      <TableHead className="w-[80px] text-xs">설계담당</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {loading && allTasks.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={10}>
-                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-                            <Loader2 className="mb-2 h-10 w-10 animate-spin" />
-                            <span className="text-sm">로딩 중...</span>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ) : filteredData.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={10}>
-                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-                            <Inbox className="mb-2 h-10 w-10" />
-                            <span className="text-sm">조건에 맞는 업무가 없습니다</span>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      filteredData.map((item) => (
-                        <TableRow
-                          key={item.id}
-                          className={cn(
-                            "cursor-pointer transition-colors",
-                            selectedTaskId === item.dbId && "bg-primary/5",
-                            item.status === "신규접수" && "bg-amber-50/50 dark:bg-amber-950/10"
-                          )}
-                          onClick={() => handleSelectTask(item.dbId)}
-                        >
-                          <TableCell className="text-center">
-                            <Badge variant="outline" className={cn("text-[10px] font-bold", getSourceBadge(item.sourceType))}>
-                              {item.sourceType === "dr" ? "DR" : "ECR"}
-                            </Badge>
-                          </TableCell>
-                          <TableCell className={cn("text-xs font-semibold", item.sourceType === "dr" ? "text-blue-600" : "text-amber-600")}>
-                            {item.id}
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <Badge variant="outline" className={cn("text-[10px]", getStatusVariant(item.status))}>
-                              {item.status}
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <Badge variant="outline" className={cn("text-[10px]", getPriorityVariant(item.priority))}>
-                              {item.priority}
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="max-w-[200px] truncate text-xs font-medium">{item.targetName}</TableCell>
-                          <TableCell className="text-xs">{item.reqDept}</TableCell>
-                          <TableCell className="text-xs">{item.requester}</TableCell>
-                          <TableCell className="text-xs">{item.date}</TableCell>
-                          <TableCell className="text-xs">{item.dueDate}</TableCell>
-                          <TableCell className="text-xs">
-                            {item.designer || <span className="text-muted-foreground">미배정</span>}
-                          </TableCell>
-                        </TableRow>
-                      ))
-                    )}
-                  </TableBody>
-                </Table>
-              </div>
+              <EDataTable<TaskItem>
+                columns={ts.visibleColumns.map((col): EDataTableColumn<TaskItem> => ({
+                  key: col.key === "request_no" ? "id" : col.key === "target_name" ? "targetName" : col.key === "req_dept" ? "reqDept" : col.key === "request_date" ? "date" : col.key === "due_date" ? "dueDate" : col.key === "source_type" ? "sourceType" : col.key,
+                  label: col.label,
+                  width: col.key === "source_type" ? "w-[60px]" : col.key === "request_no" ? "w-[130px]" : col.key === "status" ? "w-[90px]" : col.key === "priority" ? "w-[80px]" : col.key === "target_name" ? "min-w-[180px]" : col.key === "req_dept" ? "w-[90px]" : col.key === "requester" ? "w-[80px]" : col.key === "request_date" ? "w-[100px]" : col.key === "due_date" ? "w-[100px]" : col.key === "designer" ? "w-[80px]" : undefined,
+                  align: (col.key === "source_type" || col.key === "status" || col.key === "priority") ? "center" : undefined,
+                  render: col.key === "source_type"
+                    ? (val: any, row: TaskItem) => (
+                        <Badge variant="outline" className={cn("text-[10px] font-bold", getSourceBadge(row.sourceType))}>
+                          {row.sourceType === "dr" ? "DR" : "ECR"}
+                        </Badge>
+                      )
+                    : col.key === "request_no"
+                    ? (val: any, row: TaskItem) => (
+                        <span className={cn("text-[13px] font-semibold", row.sourceType === "dr" ? "text-primary" : "text-secondary-foreground")}>
+                          {val}
+                        </span>
+                      )
+                    : col.key === "status"
+                    ? (val: any) => (
+                        <Badge variant="outline" className={cn("text-[10px]", getStatusVariant(val))}>
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "priority"
+                    ? (val: any) => (
+                        <Badge variant="outline" className={cn("text-[10px]", getPriorityVariant(val))}>
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "designer"
+                    ? (val: any) => val ? <span>{val}</span> : <span className="text-muted-foreground">미배정</span>
+                    : undefined,
+                }))}
+                data={ts.groupData(filteredData)}
+                loading={loading}
+                emptyMessage="조건에 맞는 업무가 없어요"
+                rowKey={(row) => row.dbId}
+                selectedId={selectedTaskId}
+                onSelect={(id) => handleSelectTask(id ?? "")}
+                draggableColumns={false}
+                showPagination={false}
+              />
             </div>
           </ResizablePanel>
 
@@ -857,45 +801,50 @@ export default function DesignTaskManagementPage() {
           {/* 오른쪽: 검토 및 승인 */}
           <ResizablePanel defaultSize={42} minSize={30}>
             <div className="flex h-full flex-col bg-card">
-              <div className="flex items-center justify-between border-b-2 border-border px-5 py-3">
-                <h2 className="text-base font-bold text-foreground">검토 및 승인</h2>
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold">검토 및 승인</div>
               </div>
-              <div className="flex-1 overflow-auto p-4">
-                {/* 현황 카드 */}
-                <div className="mb-4 grid grid-cols-5 gap-2">
-                  {STAT_CARDS.map((card) => (
-                    <button
-                      key={card.status}
-                      className={cn(
-                        "rounded-lg bg-linear-to-br p-3 text-center transition-all hover:-translate-y-0.5 hover:shadow-md",
-                        card.color, card.textColor
-                      )}
-                      onClick={() => handleFilterByStatus(card.status)}
-                    >
-                      <div className="text-xs font-medium opacity-90">{card.label}</div>
-                      <div className="text-2xl font-bold">{stats[card.status]}</div>
-                    </button>
-                  ))}
+              <div className="flex-1 overflow-auto p-3">
+                {/* 업무 현황 */}
+                <div className="mb-3 space-y-1.5">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무 현황</span>
+                  <div className="grid grid-cols-5 gap-2">
+                    {STAT_CARDS.map((card) => (
+                      <button
+                        key={card.status}
+                        className={cn(
+                          "rounded-lg p-2.5 text-center transition-all hover:-translate-y-0.5 hover:shadow-md",
+                          card.color, card.textColor
+                        )}
+                        onClick={() => handleFilterByStatus(card.status)}
+                      >
+                        <div className="text-[11px] font-medium opacity-90 leading-tight">{card.label}</div>
+                        <div className="text-xl font-bold mt-0.5">{stats[card.status]}</div>
+                      </button>
+                    ))}
+                  </div>
                 </div>
 
                 {/* 상세 정보 */}
                 {!selectedTask ? (
-                  <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
-                    <ChevronRight className="mb-2 h-10 w-10" />
-                    <span className="text-sm">좌측 목록에서 업무를 선택하세요</span>
+                  <div className="flex items-center justify-center p-6">
+                    <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-10 py-8 text-center">
+                      <Inbox className="h-10 w-10 text-muted-foreground/40" />
+                      <p className="text-sm text-muted-foreground">좌측에서 업무를 선택해주세요</p>
+                    </div>
                   </div>
                 ) : (
-                  <div className="space-y-4">
+                  <div className="space-y-3">
                     {/* 승인 프로세스 */}
-                    <div className="rounded-lg border border-sky-200 bg-sky-50/50 p-4 dark:border-sky-800 dark:bg-sky-950/20">
-                      <h3 className="mb-3 text-sm font-bold text-sky-700 dark:text-sky-400">승인 프로세스</h3>
+                    <div className="rounded-lg border border-border/80 bg-muted/30 p-3.5">
+                      <h3 className="mb-3 text-sm font-bold text-foreground">승인 프로세스</h3>
                       <div className="mb-3 flex items-center gap-1">
                         {APPROVAL_STEPS.map((s, idx) => {
                           let stepClass = "border-border bg-card text-muted-foreground";
                           if (selectedTask.status === "반려" && idx >= 2) {
-                            stepClass = idx === 2 ? "border-rose-400 bg-rose-50 text-rose-800 dark:bg-rose-950/30 dark:text-rose-300" : "border-border bg-card text-muted-foreground";
+                            stepClass = idx === 2 ? "border-destructive bg-destructive/5 text-destructive" : "border-border bg-card text-muted-foreground";
                           } else if (selectedTask.approvalStep > idx) {
-                            stepClass = "border-emerald-400 bg-emerald-50 text-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-300";
+                            stepClass = "border-primary bg-primary/5 text-primary";
                           } else if (selectedTask.approvalStep === idx) {
                             stepClass = "border-primary bg-primary/5 text-primary ring-2 ring-primary/10";
                           }
@@ -916,7 +865,7 @@ export default function DesignTaskManagementPage() {
                       <div className="flex flex-wrap gap-2">
                         {selectedTask.status === "신규접수" && (
                           <>
-                            <Button size="sm" className="bg-emerald-600 text-white hover:bg-emerald-700" onClick={() => handleOpenDesignerModal(selectedTask.dbId)}>
+                            <Button size="sm" variant="default" onClick={() => handleOpenDesignerModal(selectedTask.dbId)}>
                               <Eye className="mr-1 h-3.5 w-3.5" /> 검토 착수
                             </Button>
                             <Button size="sm" variant="destructive" onClick={() => handleOpenRejectModal(selectedTask.dbId)}>
@@ -926,7 +875,7 @@ export default function DesignTaskManagementPage() {
                         )}
                         {selectedTask.status === "검토중" && (
                           <>
-                            <Button size="sm" className="bg-emerald-600 text-white hover:bg-emerald-700" onClick={() => handleApprove(selectedTask.dbId)}>
+                            <Button size="sm" variant="default" onClick={() => handleApprove(selectedTask.dbId)}>
                               <CheckCircle2 className="mr-1 h-3.5 w-3.5" /> 내부 승인
                             </Button>
                             <Button size="sm" variant="destructive" onClick={() => handleOpenRejectModal(selectedTask.dbId)}>
@@ -935,7 +884,7 @@ export default function DesignTaskManagementPage() {
                           </>
                         )}
                         {selectedTask.status === "승인완료" && (
-                          <Button size="sm" className="bg-linear-to-r from-indigo-500 to-purple-600 text-white shadow-md hover:shadow-lg" onClick={() => handleOpenProjectModal(selectedTask.dbId)}>
+                          <Button size="sm" variant="default" onClick={() => handleOpenProjectModal(selectedTask.dbId)}>
                             <Rocket className="mr-1 h-3.5 w-3.5" /> 프로젝트 생성
                           </Button>
                         )}
@@ -948,14 +897,14 @@ export default function DesignTaskManagementPage() {
                     </div>
 
                     {/* 접수 정보 */}
-                    <div className="rounded-lg bg-muted/50 p-4">
-                      <h3 className="mb-3 border-b-2 border-border pb-2 text-sm font-semibold text-foreground">접수 정보</h3>
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">접수 정보</h3>
                       <div className="text-xs">
                         <table className="w-full border-collapse">
                           <tbody>
                             <tr>
                               <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">접수번호</td>
-                              <td className={cn("border border-muted px-2 py-1.5 font-semibold", selectedTask.sourceType === "dr" ? "text-blue-600" : "text-amber-600")}>
+                              <td className={cn("border border-muted px-2 py-1.5 font-semibold", selectedTask.sourceType === "dr" ? "text-primary" : "text-secondary-foreground")}>
                                 {selectedTask.id}
                               </td>
                               <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">구분</td>
@@ -1022,7 +971,7 @@ export default function DesignTaskManagementPage() {
                                     {selectedTask.impact ? (
                                       <div className="flex flex-wrap gap-1">
                                         {selectedTask.impact.map((i) => (
-                                          <Badge key={i} variant="outline" className="bg-blue-50 text-[10px] text-blue-700 dark:bg-blue-950/30 dark:text-blue-300">{i}</Badge>
+                                          <Badge key={i} variant="outline" className="bg-primary/5 text-[10px] text-primary">{i}</Badge>
                                         ))}
                                       </div>
                                     ) : "-"}
@@ -1047,8 +996,8 @@ export default function DesignTaskManagementPage() {
                     </div>
 
                     {/* 요구사양 / 변경사유 */}
-                    <div className="rounded-lg bg-muted/50 p-4">
-                      <h3 className="mb-3 border-b-2 border-border pb-2 text-sm font-semibold text-foreground">
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">
                         {selectedTask.sourceType === "dr" ? "요구사양" : "변경 사유"}
                       </h3>
                       <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed text-foreground">
@@ -1057,13 +1006,13 @@ export default function DesignTaskManagementPage() {
                     </div>
 
                     {/* 검토 메모 */}
-                    <div className="rounded-lg border border-amber-200 bg-amber-50/50 p-4 dark:border-amber-800 dark:bg-amber-950/20">
-                      <h3 className="mb-2 text-sm font-semibold text-amber-800 dark:text-amber-400">검토 의견 / 메모</h3>
+                    <div className="rounded-lg border border-primary/20 bg-primary/5 p-3.5">
+                      <h3 className="mb-2 text-sm font-semibold text-foreground">검토 의견 / 메모</h3>
                       <Textarea
                         value={reviewMemoText}
                         onChange={(e) => setReviewMemoText(e.target.value)}
-                        placeholder="검토 의견을 기록하세요..."
-                        className="min-h-[60px] border-amber-200 text-xs focus-visible:ring-amber-400 dark:border-amber-800"
+                        placeholder="검토 의견을 기록해주세요..."
+                        className="min-h-[60px] text-xs"
                       />
                       <div className="mt-2 text-right">
                         <Button size="sm" onClick={handleSaveReviewMemo}>
@@ -1073,16 +1022,16 @@ export default function DesignTaskManagementPage() {
                     </div>
 
                     {/* 처리 이력 */}
-                    <div className="rounded-lg bg-muted/50 p-4">
-                      <h3 className="mb-3 border-b-2 border-border pb-2 text-sm font-semibold text-foreground">처리 이력</h3>
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">처리 이력</h3>
                       <div className="relative pl-6">
                         <div className="absolute bottom-0 left-[7px] top-0 w-0.5 bg-border" />
                         {selectedTask.history.map((h, idx) => {
                           const isLast = idx === selectedTask.history.length - 1;
-                          let dotColor = "bg-emerald-500 ring-emerald-500";
+                          let dotColor = "bg-primary ring-primary";
                           if (isLast) {
-                            if (h.step === "반려") dotColor = "bg-rose-500 ring-rose-500";
-                            else if (h.step !== "프로젝트") dotColor = "bg-amber-500 ring-amber-500 animate-pulse";
+                            if (h.step === "반려") dotColor = "bg-destructive ring-destructive";
+                            else if (h.step !== "프로젝트") dotColor = "bg-primary ring-primary animate-pulse";
                           }
                           return (
                             <div key={idx} className={cn("relative pb-5", isLast && "pb-0")}>
@@ -1110,23 +1059,23 @@ export default function DesignTaskManagementPage() {
 
       {/* 설계 담당자 선택 모달 */}
       <Dialog open={designerModalOpen} onOpenChange={setDesignerModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">설계 담당자 배정</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">검토를 진행할 설계 담당자를 선택하세요.</DialogDescription>
+            <DialogTitle>설계 담당자 배정</DialogTitle>
+            <DialogDescription>검토를 진행할 설계 담당자를 선택해주세요.</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3 sm:space-y-4">
+          <div className="space-y-4">
             <div>
-              <Label className="text-xs sm:text-sm">
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                 설계 담당자 <span className="text-destructive">*</span>
-              </Label>
+              </span>
               <Popover open={designerComboOpen} onOpenChange={setDesignerComboOpen}>
                 <PopoverTrigger asChild>
                   <Button
                     variant="outline"
                     role="combobox"
                     aria-expanded={designerComboOpen}
-                    className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                    className="mt-1 h-9 w-full justify-between text-sm"
                   >
                     {designerModalValue
                       ? (() => {
@@ -1139,9 +1088,9 @@ export default function DesignTaskManagementPage() {
                 </PopoverTrigger>
                 <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
                   <Command>
-                    <CommandInput placeholder="이름, 부서로 검색..." className="text-xs sm:text-sm" />
+                    <CommandInput placeholder="이름, 부서로 검색..." />
                     <CommandList>
-                      <CommandEmpty className="py-3 text-center text-xs sm:text-sm">사원을 찾을 수 없습니다.</CommandEmpty>
+                      <CommandEmpty className="py-3 text-center text-sm">사원을 찾을 수 없어요.</CommandEmpty>
                       <CommandGroup>
                         {employees.map((emp) => (
                           <CommandItem
@@ -1151,7 +1100,6 @@ export default function DesignTaskManagementPage() {
                               setDesignerModalValue(emp.userId);
                               setDesignerComboOpen(false);
                             }}
-                            className="text-xs sm:text-sm"
                           >
                             <Check className={cn("mr-2 h-4 w-4", designerModalValue === emp.userId ? "opacity-100" : "opacity-0")} />
                             <UserCircle className="mr-2 h-4 w-4 text-muted-foreground" />
@@ -1168,177 +1116,173 @@ export default function DesignTaskManagementPage() {
               </Popover>
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setDesignerModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button onClick={handleConfirmDesigner} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              검토 착수
-            </Button>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDesignerModalOpen(false)}>취소</Button>
+            <Button onClick={handleConfirmDesigner}>검토 착수</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {/* 반려 사유 모달 */}
       <Dialog open={rejectModalOpen} onOpenChange={setRejectModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">반려 처리</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">반려 사유를 상세히 기술하세요.</DialogDescription>
+            <DialogTitle>반려 처리</DialogTitle>
+            <DialogDescription>반려 사유를 상세히 기술해주세요.</DialogDescription>
           </DialogHeader>
           <div className="space-y-3">
             <div>
-              <Label className="text-xs sm:text-sm">
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                 반려 사유 <span className="text-destructive">*</span>
-              </Label>
+              </span>
               <Textarea
                 value={rejectReason}
                 onChange={(e) => setRejectReason(e.target.value)}
-                placeholder="반려 사유를 상세히 기술하세요"
-                className="mt-1 min-h-[120px] text-xs sm:text-sm"
+                placeholder="반려 사유를 상세히 기술해주세요"
+                className="mt-1 min-h-[120px] text-sm"
               />
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setRejectModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button variant="destructive" onClick={handleConfirmReject} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              반려 확인
-            </Button>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRejectModalOpen(false)}>취소</Button>
+            <Button variant="destructive" onClick={handleConfirmReject}>반려 확인</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {/* 프로젝트 생성 모달 */}
       <Dialog open={projectModalOpen} onOpenChange={setProjectModalOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[700px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">설계 프로젝트 생성</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">프로젝트 기본 정보를 입력하세요.</DialogDescription>
+            <DialogTitle>설계 프로젝트 생성</DialogTitle>
+            <DialogDescription>프로젝트 기본 정보를 입력해주세요.</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3 sm:space-y-4">
-            <div className="rounded-lg bg-muted/50 p-4">
-              <h4 className="mb-3 border-b border-border pb-2 text-sm font-semibold">프로젝트 기본 정보</h4>
-              <div className="space-y-3">
+        <div className="space-y-4">
+          <div className="rounded-lg bg-muted/50 p-4">
+            <h4 className="mb-3 border-b border-border pb-2 text-sm font-semibold">프로젝트 기본 정보</h4>
+            <div className="space-y-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 번호</span>
+                <Input value={projectForm.projNo} readOnly className="mt-1 h-9 bg-muted text-sm" />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                  프로젝트명 <span className="text-destructive">*</span>
+                </span>
+                <Input
+                  value={projectForm.projName}
+                  onChange={(e) => setProjectForm((p) => ({ ...p, projName: e.target.value }))}
+                  placeholder="프로젝트명 입력"
+                  className="mt-1 h-9 text-sm"
+                />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">원 접수번호</span>
+                <Input value={projectForm.projSourceNo} readOnly className="mt-1 h-9 bg-muted text-sm" />
+              </div>
+              <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <Label className="text-xs sm:text-sm">프로젝트 번호</Label>
-                  <Input value={projectForm.projNo} readOnly className="mt-1 h-8 bg-muted text-xs sm:h-10 sm:text-sm" />
-                </div>
-                <div>
-                  <Label className="text-xs sm:text-sm">
-                    프로젝트명 <span className="text-destructive">*</span>
-                  </Label>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    시작일 <span className="text-destructive">*</span>
+                  </span>
                   <Input
-                    value={projectForm.projName}
-                    onChange={(e) => setProjectForm((p) => ({ ...p, projName: e.target.value }))}
-                    placeholder="프로젝트명 입력"
-                    className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                    type="date"
+                    value={projectForm.projStartDate}
+                    onChange={(e) => setProjectForm((p) => ({ ...p, projStartDate: e.target.value }))}
+                    className="mt-1 h-9 text-sm"
                   />
                 </div>
                 <div>
-                  <Label className="text-xs sm:text-sm">원 접수번호</Label>
-                  <Input value={projectForm.projSourceNo} readOnly className="mt-1 h-8 bg-muted text-xs sm:h-10 sm:text-sm" />
-                </div>
-                <div className="grid grid-cols-2 gap-3">
-                  <div>
-                    <Label className="text-xs sm:text-sm">
-                      시작일 <span className="text-destructive">*</span>
-                    </Label>
-                    <Input
-                      type="date"
-                      value={projectForm.projStartDate}
-                      onChange={(e) => setProjectForm((p) => ({ ...p, projStartDate: e.target.value }))}
-                      className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
-                    />
-                  </div>
-                  <div>
-                    <Label className="text-xs sm:text-sm">
-                      종료예정일 <span className="text-destructive">*</span>
-                    </Label>
-                    <Input
-                      type="date"
-                      value={projectForm.projEndDate}
-                      onChange={(e) => setProjectForm((p) => ({ ...p, projEndDate: e.target.value }))}
-                      className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
-                    />
-                  </div>
-                </div>
-                <div className="grid grid-cols-2 gap-3">
-                  <div>
-                    <Label className="text-xs sm:text-sm">
-                      PM <span className="text-destructive">*</span>
-                    </Label>
-                    <Popover open={pmComboOpen} onOpenChange={setPmComboOpen}>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant="outline"
-                          role="combobox"
-                          aria-expanded={pmComboOpen}
-                          className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
-                        >
-                          {projectForm.projPM
-                            ? employees.find((e) => e.userId === projectForm.projPM)?.userName || projectForm.projPM
-                            : "PM 선택"}
-                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
-                        <Command>
-                          <CommandInput placeholder="사원 검색..." className="text-xs sm:text-sm" />
-                          <CommandList>
-                            <CommandEmpty className="text-xs sm:text-sm py-3 text-center">사원을 찾을 수 없습니다.</CommandEmpty>
-                            <CommandGroup>
-                              {employees.map((emp) => (
-                                <CommandItem
-                                  key={emp.userId}
-                                  value={`${emp.userName} ${emp.deptName} ${emp.userId}`}
-                                  onSelect={() => {
-                                    setProjectForm((p) => ({ ...p, projPM: emp.userId }));
-                                    setPmComboOpen(false);
-                                  }}
-                                  className="text-xs sm:text-sm"
-                                >
-                                  <Check className={cn("mr-2 h-4 w-4", projectForm.projPM === emp.userId ? "opacity-100" : "opacity-0")} />
-                                  <div className="flex flex-col">
-                                    <span className="font-medium">{emp.userName}</span>
-                                    <span className="text-[10px] text-muted-foreground">{emp.deptName || "부서 미지정"}</span>
-                                  </div>
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                  <div>
-                    <Label className="text-xs sm:text-sm">고객명</Label>
-                    <Input value={projectForm.projCustomer} readOnly className="mt-1 h-8 bg-muted text-xs sm:h-10 sm:text-sm" />
-                  </div>
-                </div>
-                <div>
-                  <Label className="text-xs sm:text-sm">프로젝트 설명</Label>
-                  <Textarea
-                    value={projectForm.projDesc}
-                    onChange={(e) => setProjectForm((p) => ({ ...p, projDesc: e.target.value }))}
-                    placeholder="프로젝트 개요 및 목표를 기술하세요"
-                    className="mt-1 min-h-[80px] text-xs sm:text-sm"
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    종료예정일 <span className="text-destructive">*</span>
+                  </span>
+                  <Input
+                    type="date"
+                    value={projectForm.projEndDate}
+                    onChange={(e) => setProjectForm((p) => ({ ...p, projEndDate: e.target.value }))}
+                    className="mt-1 h-9 text-sm"
                   />
                 </div>
               </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    PM <span className="text-destructive">*</span>
+                  </span>
+                  <Popover open={pmComboOpen} onOpenChange={setPmComboOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={pmComboOpen}
+                        className="mt-1 h-9 w-full justify-between text-sm"
+                      >
+                        {projectForm.projPM
+                          ? employees.find((e) => e.userId === projectForm.projPM)?.userName || projectForm.projPM
+                          : "PM 선택"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                      <Command>
+                        <CommandInput placeholder="사원 검색..." />
+                        <CommandList>
+                          <CommandEmpty className="py-3 text-center text-sm">사원을 찾을 수 없어요.</CommandEmpty>
+                          <CommandGroup>
+                            {employees.map((emp) => (
+                              <CommandItem
+                                key={emp.userId}
+                                value={`${emp.userName} ${emp.deptName} ${emp.userId}`}
+                                onSelect={() => {
+                                  setProjectForm((p) => ({ ...p, projPM: emp.userId }));
+                                  setPmComboOpen(false);
+                                }}
+                              >
+                                <Check className={cn("mr-2 h-4 w-4", projectForm.projPM === emp.userId ? "opacity-100" : "opacity-0")} />
+                                <div className="flex flex-col">
+                                  <span className="font-medium">{emp.userName}</span>
+                                  <span className="text-[10px] text-muted-foreground">{emp.deptName || "부서 미지정"}</span>
+                                </div>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">고객명</span>
+                  <Input value={projectForm.projCustomer} readOnly className="mt-1 h-9 bg-muted text-sm" />
+                </div>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 설명</span>
+                <Textarea
+                  value={projectForm.projDesc}
+                  onChange={(e) => setProjectForm((p) => ({ ...p, projDesc: e.target.value }))}
+                  placeholder="프로젝트 개요 및 목표를 기술해주세요"
+                  className="mt-1 min-h-[80px] text-sm"
+                />
+              </div>
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="outline" onClick={() => setProjectModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </Button>
-            <Button onClick={handleCreateProject} className="h-8 flex-1 bg-linear-to-r from-indigo-500 to-purple-600 text-xs text-white sm:h-10 sm:flex-none sm:text-sm">
-              프로젝트 생성
-            </Button>
+        </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setProjectModalOpen(false)}>취소</Button>
+            <Button onClick={handleCreateProject}>프로젝트 생성</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_7/equipment/info/page.tsx b/frontend/app/(main)/COMPANY_7/equipment/info/page.tsx
index 6c843483..cd53e9b1 100644
--- a/frontend/app/(main)/COMPANY_7/equipment/info/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/equipment/info/page.tsx
@@ -8,7 +8,7 @@
  * 점검항목 복사 기능 포함
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -20,56 +20,34 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import {
   Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
-  Wrench, ClipboardCheck, Package, Copy, Info, Settings2,
+  Inbox, ClipboardCheck, Package, Copy, Info, Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
-import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
 import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
 import { ImageUpload } from "@/components/common/ImageUpload";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const EQUIP_TABLE = "equipment_mng";
 const INSPECTION_TABLE = "equipment_inspection_item";
 const CONSUMABLE_TABLE = "equipment_consumable";
 
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "equipment_code", label: "설비코드", width: "w-[110px]" },
-  { key: "equipment_name", label: "설비명", minWidth: "min-w-[130px]" },
-  { key: "equipment_type", label: "설비유형", width: "w-[90px]" },
-  { key: "manufacturer", label: "제조사", width: "w-[100px]" },
-  { key: "installation_location", label: "설치장소", width: "w-[100px]" },
-  { key: "operation_status", label: "가동상태", width: "w-[80px]" },
+const GRID_COLUMNS_CONFIG = [
+  { key: "equipment_code", label: "설비코드" },
+  { key: "equipment_name", label: "설비명" },
+  { key: "equipment_type", label: "설비유형" },
+  { key: "manufacturer", label: "제조사" },
+  { key: "installation_location", label: "설치장소" },
+  { key: "operation_status", label: "가동상태" },
 ];
-
-const INSPECTION_COLUMNS: DataGridColumn[] = [
-  { key: "inspection_item", label: "점검항목", minWidth: "min-w-[120px]", editable: true },
-  { key: "inspection_cycle", label: "점검주기", width: "w-[80px]" },
-  { key: "inspection_method", label: "점검방법", width: "w-[80px]" },
-  { key: "lower_limit", label: "하한치", width: "w-[70px]", editable: true },
-  { key: "upper_limit", label: "상한치", width: "w-[70px]", editable: true },
-  { key: "unit", label: "단위", width: "w-[60px]", editable: true },
-  { key: "inspection_content", label: "점검내용", minWidth: "min-w-[150px]", editable: true },
-];
-
-const CONSUMABLE_COLUMNS: DataGridColumn[] = [
-  { key: "image_path", label: "이미지", width: "w-[50px]", renderType: "image", sortable: false, filterable: false },
-  { key: "consumable_name", label: "소모품명", minWidth: "min-w-[120px]", editable: true },
-  { key: "replacement_cycle", label: "교체주기", width: "w-[90px]", editable: true },
-  { key: "unit", label: "단위", width: "w-[60px]", editable: true },
-  { key: "specification", label: "규격", width: "w-[100px]", editable: true },
-  { key: "manufacturer", label: "제조사", width: "w-[100px]", editable: true },
-];
-
 export default function EquipmentInfoPage() {
   const { user } = useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
@@ -79,8 +57,6 @@ export default function EquipmentInfoPage() {
   const [equipLoading, setEquipLoading] = useState(false);
   const [equipCount, setEquipCount] = useState(0);
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
   const [selectedEquipId, setSelectedEquipId] = useState<string | null>(null);
 
   // 우측 탭
@@ -93,7 +69,7 @@ export default function EquipmentInfoPage() {
   // 카테고리
   const [catOptions, setCatOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
-  // 모달
+  // 설비 등록/수정 모달
   const [equipModalOpen, setEquipModalOpen] = useState(false);
   const [equipEditMode, setEquipEditMode] = useState(false);
   const [equipForm, setEquipForm] = useState<Record<string, any>>({});
@@ -103,13 +79,17 @@ export default function EquipmentInfoPage() {
   const [infoForm, setInfoForm] = useState<Record<string, any>>({});
   const [infoSaving, setInfoSaving] = useState(false);
 
+  // 점검항목 추가/수정 모달
   const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
   const [inspectionForm, setInspectionForm] = useState<Record<string, any>>({});
   const [inspectionContinuous, setInspectionContinuous] = useState(false);
+  const [inspectionEditMode, setInspectionEditMode] = useState(false);
 
+  // 소모품 추가/수정 모달
   const [consumableModalOpen, setConsumableModalOpen] = useState(false);
   const [consumableForm, setConsumableForm] = useState<Record<string, any>>({});
   const [consumableContinuous, setConsumableContinuous] = useState(false);
+  const [consumableEditMode, setConsumableEditMode] = useState(false);
   const [consumableItemOptions, setConsumableItemOptions] = useState<any[]>([]);
 
   // 점검항목 복사
@@ -124,14 +104,8 @@ export default function EquipmentInfoPage() {
   const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
   const [excelDetecting, setExcelDetecting] = useState(false);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
-
-  useEffect(() => {
-    const saved = loadTableSettings("equipment-info");
-    if (saved) applyTableSettings(saved);
-  }, []);
+  // 테이블 설정
+  const ts = useTableSettings("c16-equipment-info", EQUIP_TABLE, GRID_COLUMNS_CONFIG);
 
   // 카테고리 로드
   useEffect(() => {
@@ -145,14 +119,12 @@ export default function EquipmentInfoPage() {
         }
         return result;
       };
-      // equipment_mng 카테고리
       for (const col of ["equipment_type", "operation_status"]) {
         try {
           const res = await apiClient.get(`/table-categories/${EQUIP_TABLE}/${col}/values`);
           if (res.data?.success) optMap[col] = flatten(res.data.data || []);
         } catch { /* skip */ }
       }
-      // inspection 카테고리
       for (const col of ["inspection_cycle", "inspection_method"]) {
         try {
           const res = await apiClient.get(`/table-categories/${INSPECTION_TABLE}/${col}/values`);
@@ -169,6 +141,22 @@ export default function EquipmentInfoPage() {
     return catOptions[col]?.find((o) => o.code === code)?.label || code;
   };
 
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      equipment_code: { width: "w-[110px]" },
+      equipment_name: { minWidth: "min-w-[130px]", truncate: true, render: (v) => v || "-" },
+      equipment_type: { width: "w-[90px]", render: (v) => v || "-" },
+      manufacturer: { width: "w-[100px]", render: (v) => v || "-" },
+      installation_location: { width: "w-[100px]", render: (v) => v || "-" },
+      operation_status: { width: "w-[80px]", render: (v) => v || "-" },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
   // 설비 조회
   const fetchEquipments = useCallback(async () => {
     setEquipLoading(true);
@@ -215,7 +203,7 @@ export default function EquipmentInfoPage() {
   // 우측: 점검항목 조회
   useEffect(() => {
     if (!selectedEquip?.equipment_code) { setInspections([]); return; }
-    const fetch = async () => {
+    const fetchData = async () => {
       setInspectionLoading(true);
       try {
         const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
@@ -223,21 +211,16 @@ export default function EquipmentInfoPage() {
           dataFilter: { enabled: true, filters: [{ columnName: "equipment_code", operator: "equals", value: selectedEquip.equipment_code }] },
           autoFilter: true,
         });
-        const raw = res.data?.data?.data || res.data?.data?.rows || [];
-        setInspections(raw.map((r: any) => ({
-          ...r,
-          inspection_cycle: resolve("inspection_cycle", r.inspection_cycle),
-          inspection_method: resolve("inspection_method", r.inspection_method),
-        })));
+        setInspections(res.data?.data?.data || res.data?.data?.rows || []);
       } catch { setInspections([]); } finally { setInspectionLoading(false); }
     };
-    fetch();
-  }, [selectedEquip?.equipment_code, catOptions]);
+    fetchData();
+  }, [selectedEquip?.equipment_code]);
 
   // 우측: 소모품 조회
   useEffect(() => {
     if (!selectedEquip?.equipment_code) { setConsumables([]); return; }
-    const fetch = async () => {
+    const fetchData = async () => {
       setConsumableLoading(true);
       try {
         const res = await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/data`, {
@@ -248,7 +231,7 @@ export default function EquipmentInfoPage() {
         setConsumables(res.data?.data?.data || res.data?.data?.rows || []);
       } catch { setConsumables([]); } finally { setConsumableLoading(false); }
     };
-    fetch();
+    fetchData();
   }, [selectedEquip?.equipment_code]);
 
   // 새로고침 헬퍼
@@ -271,7 +254,7 @@ export default function EquipmentInfoPage() {
         await apiClient.put(`/table-management/tables/${EQUIP_TABLE}/edit`, { originalData: { id }, updatedData: fields });
         toast.success("수정되었습니다.");
       } else {
-        await apiClient.post(`/table-management/tables/${EQUIP_TABLE}/add`, fields);
+        await apiClient.post(`/table-management/tables/${EQUIP_TABLE}/add`, { id: crypto.randomUUID(), ...fields });
         toast.success("등록되었습니다.");
       }
       setEquipModalOpen(false); fetchEquipments();
@@ -291,23 +274,50 @@ export default function EquipmentInfoPage() {
   // 점검항목 추가
   const handleInspectionSave = async () => {
     if (!inspectionForm.inspection_item) { toast.error("점검항목명은 필수입니다."); return; }
+    if (!inspectionForm.inspection_cycle) { toast.error("점검주기는 필수입니다."); return; }
+    if (!inspectionForm.inspection_method) { toast.error("점검방법은 필수입니다."); return; }
+    const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+    const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+    if (isNumeric && !inspectionForm.unit) { toast.error("측정단위가 필수입니다."); return; }
+    // 기준값/오차범위 → 하한치/상한치 자동 계산
+    const saveData = { ...inspectionForm };
+    if (isNumeric && saveData.standard_value) {
+      const std = Number(saveData.standard_value) || 0;
+      const tol = Number(saveData.tolerance) || 0;
+      saveData.lower_limit = String(std - tol);
+      saveData.upper_limit = String(std + tol);
+    }
+    if (!isNumeric) {
+      saveData.unit = "";
+      saveData.standard_value = "";
+      saveData.tolerance = "";
+      saveData.lower_limit = "";
+      saveData.upper_limit = "";
+    }
     setSaving(true);
     try {
-      await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
-        ...inspectionForm, equipment_code: selectedEquip?.equipment_code,
-      });
-      toast.success("추가되었습니다.");
-      if (inspectionContinuous) {
-        setInspectionForm({});
-      } else {
+      if (inspectionEditMode) {
+        await apiClient.put(`/table-management/tables/${INSPECTION_TABLE}/edit`, {
+          originalData: { id: saveData.id }, updatedData: { ...saveData, equipment_code: selectedEquip?.equipment_code },
+        });
+        toast.success("수정되었습니다.");
         setInspectionModalOpen(false);
+      } else {
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          id: crypto.randomUUID(), ...saveData, equipment_code: selectedEquip?.equipment_code,
+        });
+        toast.success("추가되었습니다.");
+        if (inspectionContinuous) {
+          setInspectionForm({});
+        } else {
+          setInspectionModalOpen(false);
+        }
       }
       refreshRight();
     } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
   };
 
-  // 소모품 추가
-  // 소모품 품목 로드 (item_info에서 type 또는 division 라벨이 "소모품"인 것)
+  // 소모품 품목 로드
   const loadConsumableItems = async () => {
     try {
       const flatten = (vals: any[]): any[] => {
@@ -315,22 +325,16 @@ export default function EquipmentInfoPage() {
         for (const v of vals) { r.push(v); if (v.children?.length) r.push(...flatten(v.children)); }
         return r;
       };
-
-      // type과 division 카테고리 모두에서 "소모품" 코드 찾기
       const [typeRes, divRes] = await Promise.all([
         apiClient.get(`/table-categories/item_info/type/values`),
         apiClient.get(`/table-categories/item_info/division/values`),
       ]);
       const consumableType = flatten(typeRes.data?.data || []).find((t: any) => t.valueLabel === "소모품");
       const consumableDiv = flatten(divRes.data?.data || []).find((t: any) => t.valueLabel === "소모품");
-
       if (!consumableType && !consumableDiv) { setConsumableItemOptions([]); return; }
-
-      // 두 필터 결과를 합산 (중복 제거)
       const filters: any[] = [];
       if (consumableType) filters.push({ columnName: "type", operator: "equals", value: consumableType.valueCode });
       if (consumableDiv) filters.push({ columnName: "division", operator: "equals", value: consumableDiv.valueCode });
-
       const results = await Promise.all(filters.map((f) =>
         apiClient.post(`/table-management/tables/item_info/data`, {
           page: 1, size: 500,
@@ -338,7 +342,6 @@ export default function EquipmentInfoPage() {
           autoFilter: true,
         })
       ));
-
       const allItems = new Map<string, any>();
       for (const res of results) {
         const rows = res.data?.data?.data || res.data?.data?.rows || [];
@@ -352,20 +355,28 @@ export default function EquipmentInfoPage() {
     if (!consumableForm.consumable_name) { toast.error("소모품명은 필수입니다."); return; }
     setSaving(true);
     try {
-      await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/add`, {
-        ...consumableForm, equipment_code: selectedEquip?.equipment_code,
-      });
-      toast.success("추가되었습니다.");
-      if (consumableContinuous) {
-        setConsumableForm({});
-      } else {
+      if (consumableEditMode) {
+        await apiClient.put(`/table-management/tables/${CONSUMABLE_TABLE}/edit`, {
+          originalData: { id: consumableForm.id }, updatedData: { ...consumableForm, equipment_code: selectedEquip?.equipment_code },
+        });
+        toast.success("수정되었습니다.");
         setConsumableModalOpen(false);
+      } else {
+        await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/add`, {
+          id: crypto.randomUUID(), ...consumableForm, equipment_code: selectedEquip?.equipment_code,
+        });
+        toast.success("추가되었습니다.");
+        if (consumableContinuous) {
+          setConsumableForm({});
+        } else {
+          setConsumableModalOpen(false);
+        }
       }
       refreshRight();
     } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
   };
 
-  // 점검항목 복사: 소스 설비 선택 시 점검항목 로드
+  // 점검항목 복사
   const loadCopyItems = async (equipCode: string) => {
     setCopySourceEquip(equipCode);
     setCopyChecked(new Set());
@@ -420,13 +431,22 @@ export default function EquipmentInfoPage() {
 
   return (
     <div className="flex h-full flex-col gap-3 p-3">
-      <DynamicSearchFilter tableName={EQUIP_TABLE} filterId="equipment-info" onFilterChange={setSearchFilters} dataCount={equipCount}
-        externalFilterConfig={filterConfig}
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>설비관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">설비정보</span>
+      </div>
+
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={EQUIP_TABLE}
+        filterId="c16-equipment-info"
+        onFilterChange={setSearchFilters}
+        dataCount={equipCount}
+        externalFilterConfig={ts.filterConfig}
         extraActions={
           <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
             <Button variant="outline" size="sm" className="h-9" disabled={excelDetecting}
               onClick={async () => {
                 setExcelDetecting(true);
@@ -445,24 +465,39 @@ export default function EquipmentInfoPage() {
         }
       />
 
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
         <ResizablePanelGroup direction="horizontal">
           {/* 좌측: 설비 목록 */}
           <ResizablePanel defaultSize={40} minSize={25}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Wrench className="w-4 h-4" /> 설비 목록 <Badge variant="secondary" className="font-normal">{equipCount}건</Badge>
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">설비 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{equipCount}건</span>
                 </div>
-                <div className="flex gap-1.5">
+                <div className="flex items-center gap-1.5">
                   <Button size="sm" onClick={openEquipRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
                   <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={openEquipEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
-                  <Button variant="destructive" size="sm" disabled={!selectedEquipId} onClick={handleEquipDelete}><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                  <div className="h-4 w-px bg-border" />
+                  <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={handleEquipDelete} className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                  <div className="h-4 w-px bg-border" />
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid gridId="equip-left" columns={LEFT_COLUMNS} data={equipments} loading={equipLoading}
-                selectedId={selectedEquipId} onSelect={setSelectedEquipId} onRowDoubleClick={() => openEquipEdit()}
-                emptyMessage="등록된 설비가 없습니다" />
+              <EDataTable
+                columns={mainTableColumns}
+                data={ts.groupData(equipments)}
+                loading={equipLoading}
+                emptyMessage="등록된 설비가 없어요"
+                selectedId={selectedEquipId}
+                onSelect={(id) => setSelectedEquipId(id)}
+                onRowDoubleClick={() => openEquipEdit()}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-equipment-info-main"
+              />
             </div>
           </ResizablePanel>
 
@@ -471,7 +506,7 @@ export default function EquipmentInfoPage() {
           {/* 우측: 탭 */}
           <ResizablePanel defaultSize={60} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-2 border-b bg-muted/10 shrink-0">
+              <div className="flex items-center justify-between p-2 border-b bg-muted/50 shrink-0">
                 <div className="flex items-center gap-1">
                   {([["info", "기본정보", Info], ["inspection", "점검항목", ClipboardCheck], ["consumable", "소모품", Package]] as const).map(([tab, label, Icon]) => (
                     <button key={tab} onClick={() => setRightTab(tab)}
@@ -487,7 +522,7 @@ export default function EquipmentInfoPage() {
                 <div className="flex gap-1.5">
                   {rightTab === "inspection" && (
                     <>
-                      <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setInspectionForm({}); setInspectionModalOpen(true); }}>
+                      <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setInspectionForm({}); setInspectionEditMode(false); setInspectionModalOpen(true); }}>
                         <Plus className="w-3.5 h-3.5 mr-1" /> 추가
                       </Button>
                       <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setCopySourceEquip(""); setCopyItems([]); setCopyChecked(new Set()); setCopyModalOpen(true); }}>
@@ -496,7 +531,7 @@ export default function EquipmentInfoPage() {
                     </>
                   )}
                   {rightTab === "consumable" && (
-                    <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setConsumableForm({}); loadConsumableItems(); setConsumableModalOpen(true); }}>
+                    <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setConsumableForm({}); setConsumableEditMode(false); loadConsumableItems(); setConsumableModalOpen(true); }}>
                       <Plus className="w-3.5 h-3.5 mr-1" /> 추가
                     </Button>
                   )}
@@ -504,7 +539,13 @@ export default function EquipmentInfoPage() {
               </div>
 
               {!selectedEquipId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">좌측에서 설비를 선택하세요</div>
+                <div className="flex-1 flex flex-col items-center justify-center gap-3 m-3 border-2 border-dashed rounded-lg text-center">
+                  <Inbox className="w-12 h-12 text-muted-foreground/40" />
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">설비를 선택해주세요</p>
+                    <p className="text-xs text-muted-foreground mt-1">좌측에서 설비를 선택하면 상세 정보가 표시돼요</p>
+                  </div>
+                </div>
               ) : rightTab === "info" ? (
                 <div className="p-4 overflow-auto">
                   <div className="flex justify-end mb-3">
@@ -539,7 +580,7 @@ export default function EquipmentInfoPage() {
                     </div>
                     <div className="space-y-1.5">
                       <Label className="text-sm">도입일자</Label>
-                      <FormDatePicker value={infoForm.introduction_date || ""} onChange={(v) => setInfoForm((p) => ({ ...p, introduction_date: v }))} placeholder="도입일자" />
+                      <Input type="date" value={infoForm.introduction_date || ""} onChange={(e) => setInfoForm((p) => ({ ...p, introduction_date: e.target.value }))} className="h-9" />
                     </div>
                     <div className="space-y-1.5">
                       <Label className="text-sm">가동상태</Label>
@@ -557,13 +598,92 @@ export default function EquipmentInfoPage() {
                   </div>
                 </div>
               ) : rightTab === "inspection" ? (
-                <DataGrid gridId="equip-inspection" columns={INSPECTION_COLUMNS} data={inspections} loading={inspectionLoading}
-                  showRowNumber={false} tableName={INSPECTION_TABLE} emptyMessage="점검항목이 없습니다"
-                  onCellEdit={() => refreshRight()} />
+                <div className="flex-1 overflow-auto">
+                  {inspectionLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : inspections.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <ClipboardCheck className="w-8 h-8 mb-2 opacity-40" />
+                      <p className="text-sm">점검항목이 없어요</p>
+                    </div>
+                  ) : (
+                    <Table noWrapper>
+                      <thead className="sticky top-0 z-10 bg-card">
+                        <TableRow>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검항목</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">하한치</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한치</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검내용</TableHead>
+                        </TableRow>
+                      </thead>
+                      <TableBody>
+                        {inspections.map((item) => (
+                          <TableRow key={item.id} className="cursor-pointer hover:bg-primary/5" onDoubleClick={() => {
+                            const std = item.standard_value || "";
+                            const tol = item.tolerance || "";
+                            setInspectionForm({ ...item, standard_value: std, tolerance: tol });
+                            setInspectionEditMode(true);
+                            setInspectionModalOpen(true);
+                          }}>
+                            <TableCell className="text-sm">{item.inspection_item || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
+                            <TableCell className="text-[13px]">{resolve("inspection_method", item.inspection_method)}</TableCell>
+                            <TableCell className="text-[13px]">{item.lower_limit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.upper_limit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.inspection_content || "-"}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
               ) : (
-                <DataGrid gridId="equip-consumable" columns={CONSUMABLE_COLUMNS} data={consumables} loading={consumableLoading}
-                  showRowNumber={false} tableName={CONSUMABLE_TABLE} emptyMessage="소모품이 없습니다"
-                  onCellEdit={() => refreshRight()} />
+                <div className="flex-1 overflow-auto">
+                  {consumableLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : consumables.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Package className="w-8 h-8 mb-2 opacity-40" />
+                      <p className="text-sm">소모품이 없어요</p>
+                    </div>
+                  ) : (
+                    <Table noWrapper>
+                      <thead className="sticky top-0 z-10 bg-card">
+                        <TableRow>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">소모품명</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">교체주기</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">제조사</TableHead>
+                        </TableRow>
+                      </thead>
+                      <TableBody>
+                        {consumables.map((item) => (
+                          <TableRow key={item.id} className="cursor-pointer hover:bg-primary/5" onDoubleClick={() => {
+                            setConsumableForm({ ...item });
+                            setConsumableEditMode(true);
+                            loadConsumableItems();
+                            setConsumableModalOpen(true);
+                          }}>
+                            <TableCell className="text-sm">{item.consumable_name || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.replacement_cycle || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.specification || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.manufacturer || "-"}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
               )}
             </div>
           </ResizablePanel>
@@ -571,57 +691,103 @@ export default function EquipmentInfoPage() {
       </div>
 
       {/* 설비 등록/수정 모달 */}
-      <FullscreenDialog open={equipModalOpen} onOpenChange={setEquipModalOpen}
-        title={equipEditMode ? "설비 수정" : "설비 등록"} description={equipEditMode ? "설비 정보를 수정합니다." : "새로운 설비를 등록합니다."}
-        defaultMaxWidth="max-w-2xl"
-        footer={<><Button variant="outline" onClick={() => setEquipModalOpen(false)}>취소</Button>
-          <Button onClick={handleEquipSave} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button></>}>
-        <div className="grid grid-cols-2 gap-4 py-4">
-          <div className="space-y-1.5"><Label className="text-sm">설비코드</Label>
-            <Input value={equipForm.equipment_code || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_code: e.target.value }))} placeholder="설비코드" className="h-9" disabled={equipEditMode} /></div>
-          <div className="space-y-1.5"><Label className="text-sm">설비명 <span className="text-destructive">*</span></Label>
-            <Input value={equipForm.equipment_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_name: e.target.value }))} placeholder="설비명" className="h-9" /></div>
-          <div className="space-y-1.5"><Label className="text-sm">설비유형</Label>
-            {catSelect("equipment_type", equipForm.equipment_type, (v) => setEquipForm((p) => ({ ...p, equipment_type: v })), "설비유형")}</div>
-          <div className="space-y-1.5"><Label className="text-sm">가동상태</Label>
-            {catSelect("operation_status", equipForm.operation_status, (v) => setEquipForm((p) => ({ ...p, operation_status: v })), "가동상태")}</div>
-          <div className="space-y-1.5"><Label className="text-sm">설치장소</Label>
-            <Input value={equipForm.installation_location || ""} onChange={(e) => setEquipForm((p) => ({ ...p, installation_location: e.target.value }))} placeholder="설치장소" className="h-9" /></div>
-          <div className="space-y-1.5"><Label className="text-sm">제조사</Label>
-            <Input value={equipForm.manufacturer || ""} onChange={(e) => setEquipForm((p) => ({ ...p, manufacturer: e.target.value }))} placeholder="제조사" className="h-9" /></div>
-          <div className="space-y-1.5"><Label className="text-sm">모델명</Label>
-            <Input value={equipForm.model_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, model_name: e.target.value }))} placeholder="모델명" className="h-9" /></div>
-          <div className="space-y-1.5"><Label className="text-sm">도입일자</Label>
-            <FormDatePicker value={equipForm.introduction_date || ""} onChange={(v) => setEquipForm((p) => ({ ...p, introduction_date: v }))} placeholder="도입일자" /></div>
-          <div className="space-y-1.5 col-span-2"><Label className="text-sm">비고</Label>
-            <Input value={equipForm.remarks || ""} onChange={(e) => setEquipForm((p) => ({ ...p, remarks: e.target.value }))} placeholder="비고" className="h-9" /></div>
-          <div className="space-y-1.5 col-span-2"><Label className="text-sm">이미지</Label>
-            <ImageUpload value={equipForm.image_path} onChange={(v) => setEquipForm((p) => ({ ...p, image_path: v }))}
-              tableName={EQUIP_TABLE} recordId={equipForm.id} columnName="image_path" /></div>
-        </div>
-      </FullscreenDialog>
+      <Dialog open={equipModalOpen} onOpenChange={setEquipModalOpen}>
+        <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{equipEditMode ? "설비 수정" : "설비 등록"}</DialogTitle>
+            <DialogDescription>{equipEditMode ? "설비 정보를 수정합니다." : "새로운 설비를 등록합니다."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+            <div className="grid grid-cols-2 gap-4 py-4">
+              <div className="space-y-1.5"><Label className="text-sm">설비코드</Label>
+                <Input value={equipForm.equipment_code || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_code: e.target.value }))} placeholder="설비코드" className="h-9" disabled={equipEditMode} /></div>
+              <div className="space-y-1.5"><Label className="text-sm">설비명 <span className="text-destructive">*</span></Label>
+                <Input value={equipForm.equipment_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_name: e.target.value }))} placeholder="설비명" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">설비유형</Label>
+                {catSelect("equipment_type", equipForm.equipment_type, (v) => setEquipForm((p) => ({ ...p, equipment_type: v })), "설비유형")}</div>
+              <div className="space-y-1.5"><Label className="text-sm">가동상태</Label>
+                {catSelect("operation_status", equipForm.operation_status, (v) => setEquipForm((p) => ({ ...p, operation_status: v })), "가동상태")}</div>
+              <div className="space-y-1.5"><Label className="text-sm">설치장소</Label>
+                <Input value={equipForm.installation_location || ""} onChange={(e) => setEquipForm((p) => ({ ...p, installation_location: e.target.value }))} placeholder="설치장소" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">제조사</Label>
+                <Input value={equipForm.manufacturer || ""} onChange={(e) => setEquipForm((p) => ({ ...p, manufacturer: e.target.value }))} placeholder="제조사" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">모델명</Label>
+                <Input value={equipForm.model_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, model_name: e.target.value }))} placeholder="모델명" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">도입일자</Label>
+                <Input type="date" value={equipForm.introduction_date || ""} onChange={(e) => setEquipForm((p) => ({ ...p, introduction_date: e.target.value }))} className="h-9" /></div>
+              <div className="space-y-1.5 col-span-2"><Label className="text-sm">비고</Label>
+                <Input value={equipForm.remarks || ""} onChange={(e) => setEquipForm((p) => ({ ...p, remarks: e.target.value }))} placeholder="비고" className="h-9" /></div>
+              <div className="space-y-1.5 col-span-2"><Label className="text-sm">이미지</Label>
+                <ImageUpload value={equipForm.image_path} onChange={(v) => setEquipForm((p) => ({ ...p, image_path: v }))}
+                  tableName={EQUIP_TABLE} recordId={equipForm.id} columnName="image_path" /></div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEquipModalOpen(false)}>취소</Button>
+            <Button onClick={handleEquipSave} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 점검항목 추가 모달 */}
       <Dialog open={inspectionModalOpen} onOpenChange={setInspectionModalOpen}>
         <DialogContent className="max-w-lg">
-          <DialogHeader><DialogTitle>점검항목 추가</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 점검항목을 추가합니다.</DialogDescription></DialogHeader>
+          <DialogHeader><DialogTitle>{inspectionEditMode ? "점검항목 수정" : "점검항목 추가"}</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 점검항목을 {inspectionEditMode ? "수정" : "추가"}합니다.</DialogDescription></DialogHeader>
           <div className="space-y-4 py-4">
-            <div className="space-y-1.5"><Label className="text-sm">점검항목 <span className="text-destructive">*</span></Label>
-              <Input value={inspectionForm.inspection_item || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_item: e.target.value }))} placeholder="점검항목" className="h-9" /></div>
             <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-1.5"><Label className="text-sm">점검주기</Label>
+              <div className="space-y-1.5"><Label className="text-sm">점검항목명 <span className="text-destructive">*</span></Label>
+                <Input value={inspectionForm.inspection_item || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_item: e.target.value }))} placeholder="예: 온도점검, 진동점검" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">점검주기 <span className="text-destructive">*</span></Label>
                 {catSelect("inspection_cycle", inspectionForm.inspection_cycle, (v) => setInspectionForm((p) => ({ ...p, inspection_cycle: v })), "점검주기")}</div>
-              <div className="space-y-1.5"><Label className="text-sm">점검방법</Label>
-                {catSelect("inspection_method", inspectionForm.inspection_method, (v) => setInspectionForm((p) => ({ ...p, inspection_method: v })), "점검방법")}</div>
-              <div className="space-y-1.5"><Label className="text-sm">하한치</Label>
-                <Input value={inspectionForm.lower_limit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, lower_limit: e.target.value }))} placeholder="하한치" className="h-9" /></div>
-              <div className="space-y-1.5"><Label className="text-sm">상한치</Label>
-                <Input value={inspectionForm.upper_limit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, upper_limit: e.target.value }))} placeholder="상한치" className="h-9" /></div>
-              <div className="space-y-1.5"><Label className="text-sm">단위</Label>
-                <Input value={inspectionForm.unit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, unit: e.target.value }))} placeholder="단위" className="h-9" /></div>
             </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1.5"><Label className="text-sm">점검방법 <span className="text-destructive">*</span></Label>
+                {catSelect("inspection_method", inspectionForm.inspection_method, (v) => {
+                  const label = resolve("inspection_method", v);
+                  const isNum = ["숫자", "치수검사"].includes(label) || ["숫자", "치수검사"].includes(v);
+                  if (!isNum) {
+                    setInspectionForm((p) => ({ ...p, inspection_method: v, unit: "", standard_value: "", tolerance: "", lower_limit: "", upper_limit: "" }));
+                  } else {
+                    setInspectionForm((p) => ({ ...p, inspection_method: v }));
+                  }
+                }, "점검방법")}</div>
+              {(() => {
+                const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+                const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+                if (!isNumeric) return null;
+                return (
+                  <div className="space-y-1.5"><Label className="text-sm">측정 단위 <span className="text-destructive">*</span></Label>
+                    <Input value={inspectionForm.unit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, unit: e.target.value }))} placeholder="예: ℃, mm, V" className="h-9" /></div>
+                );
+              })()}
+            </div>
+            {(() => {
+              const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+              const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+              if (!isNumeric) return null;
+              return (
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5"><Label className="text-sm">기준값</Label>
+                    <Input value={inspectionForm.standard_value || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, standard_value: e.target.value }))} placeholder="기준값 입력" className="h-9" type="number" /></div>
+                  <div className="space-y-1.5"><Label className="text-sm">±오차범위</Label>
+                    <Input value={inspectionForm.tolerance || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, tolerance: e.target.value }))} placeholder="허용 오차범위" className="h-9" type="number" /></div>
+                </div>
+              );
+            })()}
             <div className="space-y-1.5"><Label className="text-sm">점검내용</Label>
-              <Input value={inspectionForm.inspection_content || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_content: e.target.value }))} placeholder="점검내용" className="h-9" /></div>
+              <textarea
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={inspectionForm.inspection_content || ""}
+                onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_content: e.target.value }))}
+                placeholder="점검 항목 및 내용 입력"
+              /></div>
+            <div className="space-y-1.5"><Label className="text-sm">체크리스트 (선택사항)</Label>
+              <textarea
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={inspectionForm.checklist || ""}
+                onChange={(e) => setInspectionForm((p) => ({ ...p, checklist: e.target.value }))}
+                placeholder="점검 체크리스트 입력 (줄바꿈으로 구분)"
+              /></div>
           </div>
           <DialogFooter className="flex items-center justify-between sm:justify-between">
             <label className="flex items-center gap-2 text-sm cursor-pointer">
@@ -639,7 +805,7 @@ export default function EquipmentInfoPage() {
       {/* 소모품 추가 모달 */}
       <Dialog open={consumableModalOpen} onOpenChange={setConsumableModalOpen}>
         <DialogContent className="max-w-lg">
-          <DialogHeader><DialogTitle>소모품 추가</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 소모품을 추가합니다.</DialogDescription></DialogHeader>
+          <DialogHeader><DialogTitle>{consumableEditMode ? "소모품 수정" : "소모품 추가"}</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 소모품을 {consumableEditMode ? "수정" : "추가"}합니다.</DialogDescription></DialogHeader>
           <div className="grid grid-cols-2 gap-4 py-4">
             <div className="space-y-1.5 col-span-2"><Label className="text-sm">소모품명 <span className="text-destructive">*</span></Label>
               {consumableItemOptions.length > 0 ? (
@@ -696,10 +862,10 @@ export default function EquipmentInfoPage() {
 
       {/* 점검항목 복사 모달 */}
       <Dialog open={copyModalOpen} onOpenChange={setCopyModalOpen}>
-        <DialogContent className="max-w-2xl max-h-[70vh]">
+        <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden">
           <DialogHeader><DialogTitle>점검항목 복사</DialogTitle>
             <DialogDescription>다른 설비의 점검항목을 선택하여 {selectedEquip?.equipment_name}에 복사합니다.</DialogDescription></DialogHeader>
-          <div className="space-y-3">
+          <div className="space-y-3 flex-1 overflow-y-auto">
             <div className="space-y-1.5">
               <Label className="text-sm">소스 설비 선택</Label>
               <Select value={copySourceEquip} onValueChange={(v) => loadCopyItems(v)}>
@@ -715,31 +881,31 @@ export default function EquipmentInfoPage() {
               {copyLoading ? (
                 <div className="flex items-center justify-center py-8"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
               ) : copyItems.length === 0 ? (
-                <div className="text-center text-muted-foreground py-8 text-sm">{copySourceEquip ? "점검항목이 없습니다" : "설비를 선택하세요"}</div>
+                <div className="text-center text-muted-foreground py-8 text-sm">{copySourceEquip ? "점검항목이 없어요" : "설비를 선택해주세요"}</div>
               ) : (
-                <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10">
+                <Table noWrapper>
+                  <thead className="sticky top-0 z-10 bg-card">
                     <TableRow>
                       <TableHead className="w-[40px] text-center">
                         <input type="checkbox" checked={copyItems.length > 0 && copyChecked.size === copyItems.length}
                           onChange={(e) => { if (e.target.checked) setCopyChecked(new Set(copyItems.map((i) => i.id))); else setCopyChecked(new Set()); }} />
                       </TableHead>
-                      <TableHead>점검항목</TableHead><TableHead className="w-[80px]">점검주기</TableHead>
-                      <TableHead className="w-[80px]">점검방법</TableHead><TableHead className="w-[70px]">하한</TableHead>
-                      <TableHead className="w-[70px]">상한</TableHead><TableHead className="w-[60px]">단위</TableHead>
+                      <TableHead>점검항목</TableHead><TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead><TableHead className="w-[70px]">하한</TableHead>
+                      <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한</TableHead><TableHead className="w-[60px]">단위</TableHead>
                     </TableRow>
-                  </TableHeader>
+                  </thead>
                   <TableBody>
                     {copyItems.map((item) => (
                       <TableRow key={item.id} className={cn("cursor-pointer", copyChecked.has(item.id) && "bg-primary/5")}
                         onClick={() => setCopyChecked((prev) => { const n = new Set(prev); if (n.has(item.id)) n.delete(item.id); else n.add(item.id); return n; })}>
                         <TableCell className="text-center"><input type="checkbox" checked={copyChecked.has(item.id)} readOnly /></TableCell>
                         <TableCell className="text-sm">{item.inspection_item}</TableCell>
-                        <TableCell className="text-xs">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
-                        <TableCell className="text-xs">{resolve("inspection_method", item.inspection_method)}</TableCell>
-                        <TableCell className="text-xs">{item.lower_limit || "-"}</TableCell>
-                        <TableCell className="text-xs">{item.upper_limit || "-"}</TableCell>
-                        <TableCell className="text-xs">{item.unit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
+                        <TableCell className="text-[13px]">{resolve("inspection_method", item.inspection_method)}</TableCell>
+                        <TableCell className="text-[13px]">{item.lower_limit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{item.upper_limit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
                       </TableRow>
                     ))}
                   </TableBody>
@@ -768,12 +934,14 @@ export default function EquipmentInfoPage() {
           config={excelChainConfig} onSuccess={() => { fetchEquipments(); refreshRight(); }} />
       )}
 
+      {/* 테이블 설정 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={EQUIP_TABLE}
-        settingsId="equipment-info"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
 
       {ConfirmDialogComponent}
diff --git a/frontend/app/(main)/COMPANY_7/equipment/plc-settings/page.tsx b/frontend/app/(main)/COMPANY_7/equipment/plc-settings/page.tsx
new file mode 100644
index 00000000..4e94d293
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/equipment/plc-settings/page.tsx
@@ -0,0 +1,501 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, Pencil, Cpu, Settings2, Search, Inbox,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+
+/* ───── 테이블명 ───── */
+const DATATYPE_TABLE = "plc_data_type";
+
+const DATATYPE_COLUMNS = [
+  { key: "equipment_code", label: "설비코드" },
+  { key: "data_type", label: "데이터타입" },
+  { key: "unit", label: "단위" },
+  { key: "tag_address", label: "태그주소" },
+  { key: "collection_interval", label: "수집주기" },
+  { key: "lower_limit", label: "하한값" },
+  { key: "upper_limit", label: "상한값" },
+  { key: "is_active", label: "사용여부" },
+];
+const COLLECTION_TABLE = "plc_collection_config";
+const EQUIPMENT_TABLE = "equipment_mng";
+
+/* ───── Cron 한글 변환 ───── */
+const cronToKorean = (cron: string): string => {
+  if (!cron) return "";
+  const parts = cron.trim().split(/\s+/);
+  if (parts.length < 5) return cron;
+  const [min, hour] = parts;
+  if (min === "*" && hour === "*") return "매 분마다";
+  if (min !== "*" && hour === "*") return `매시 ${min}분마다`;
+  if (min === "0" && hour !== "*") return `매일 ${hour}시 정각`;
+  if (min === "*/5") return "5분마다";
+  if (min === "*/10") return "10분마다";
+  if (min === "*/30") return "30분마다";
+  return cron;
+};
+
+/* ───── 카테고리 flatten ───── */
+const flattenCategories = (vals: any[]): { code: string; label: string }[] => {
+  const result: { code: string; label: string }[] = [];
+  for (const v of vals) {
+    result.push({ code: v.valueCode, label: v.valueLabel });
+    if (v.children?.length) result.push(...flattenCategories(v.children));
+  }
+  return result;
+};
+
+export default function PlcSettingsPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-plc-settings", DATATYPE_TABLE, DATATYPE_COLUMNS);
+
+  const [activeTab, setActiveTab] = useState("datatype");
+
+  /* ───── PLC 데이터타입 ───── */
+  const [datatypes, setDatatypes] = useState<any[]>([]);
+  const [dtLoading, setDtLoading] = useState(false);
+  const [dtCount, setDtCount] = useState(0);
+  const [dtChecked, setDtChecked] = useState<string[]>([]);
+  const [dtModalOpen, setDtModalOpen] = useState(false);
+  const [dtEditMode, setDtEditMode] = useState(false);
+  const [dtForm, setDtForm] = useState<Record<string, any>>({});
+  const [dtSaving, setDtSaving] = useState(false);
+  const [dtKeyword, setDtKeyword] = useState("");
+
+  /* ───── 수집 설정 ───── */
+  const [configs, setConfigs] = useState<any[]>([]);
+  const [cfgLoading, setCfgLoading] = useState(false);
+  const [cfgCount, setCfgCount] = useState(0);
+  const [cfgChecked, setCfgChecked] = useState<string[]>([]);
+  const [cfgModalOpen, setCfgModalOpen] = useState(false);
+  const [cfgEditMode, setCfgEditMode] = useState(false);
+  const [cfgForm, setCfgForm] = useState<Record<string, any>>({});
+  const [cfgSaving, setCfgSaving] = useState(false);
+  const [cfgKeyword, setCfgKeyword] = useState("");
+
+  /* ───── FK + 카테고리 옵션 ───── */
+  const [equipOptions, setEquipOptions] = useState<{ code: string; label: string }[]>([]);
+  const [collectionTypeOptions, setCollectionTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const eqRes = await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/data`, { page: 1, size: 500, autoFilter: true });
+        const eqs = eqRes.data?.data?.data || eqRes.data?.data?.rows || [];
+        setEquipOptions(eqs.map((r: any) => ({ code: r.equipment_code, label: `${r.equipment_code} - ${r.equipment_name || ""}` })));
+      } catch { /* skip */ }
+      try {
+        const catRes = await apiClient.get(`/table-categories/${COLLECTION_TABLE}/collection_type/values`);
+        if (catRes.data?.data?.length > 0) {
+          setCollectionTypeOptions(flattenCategories(catRes.data.data));
+        }
+      } catch { /* skip */ }
+    };
+    load();
+  }, []);
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  const fetchDatatypes = useCallback(async (keyword?: string) => {
+    setDtLoading(true);
+    try {
+      const kw = keyword !== undefined ? keyword : dtKeyword;
+      const filters: any[] = [];
+      if (kw.trim()) filters.push({ columnName: "equipment_code", operator: "contains", value: kw.trim() });
+      const res = await apiClient.post(`/table-management/tables/${DATATYPE_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setDatatypes(rows);
+      setDtCount(rows.length);
+    } catch { toast.error("PLC 데이터타입 조회에 실패했어요"); }
+    finally { setDtLoading(false); }
+  }, [dtKeyword]);
+
+  const fetchConfigs = useCallback(async (keyword?: string) => {
+    setCfgLoading(true);
+    try {
+      const kw = keyword !== undefined ? keyword : cfgKeyword;
+      const filters: any[] = [];
+      if (kw.trim()) filters.push({ columnName: "config_name", operator: "contains", value: kw.trim() });
+      const res = await apiClient.post(`/table-management/tables/${COLLECTION_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setConfigs(rows);
+      setCfgCount(rows.length);
+    } catch { toast.error("수집 설정 조회에 실패했어요"); }
+    finally { setCfgLoading(false); }
+  }, [cfgKeyword]);
+
+  useEffect(() => { fetchDatatypes(); fetchConfigs(); }, []);
+
+  /* ═══════════════════ 데이터타입 CRUD ═══════════════════ */
+  const openDtCreate = () => { setDtForm({}); setDtEditMode(false); setDtModalOpen(true); };
+  const openDtEdit = (row: any) => { setDtForm({ ...row }); setDtEditMode(true); setDtModalOpen(true); };
+  const saveDt = async () => {
+    if (!dtForm.equipment_code) { toast.error("설비코드는 필수 입력이에요"); return; }
+    setDtSaving(true);
+    try {
+      if (dtEditMode) {
+        await apiClient.put(`/table-management/tables/${DATATYPE_TABLE}/edit`, {
+          originalData: { id: dtForm.id }, updatedData: dtForm,
+        });
+        toast.success("PLC 데이터타입을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${DATATYPE_TABLE}/add`, dtForm);
+        toast.success("PLC 데이터타입을 등록했어요");
+      }
+      setDtModalOpen(false);
+      fetchDatatypes();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setDtSaving(false); }
+  };
+  const deleteDt = async () => {
+    if (dtChecked.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("PLC 데이터타입 삭제", { description: `선택한 ${dtChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.` });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DATATYPE_TABLE}/delete`, {
+        data: dtChecked.map(id => ({ id })),
+      });
+      toast.success(`${dtChecked.length}건을 삭제했어요`);
+      setDtChecked([]);
+      fetchDatatypes();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ 수집 설정 CRUD ═══════════════════ */
+  const openCfgCreate = () => { setCfgForm({}); setCfgEditMode(false); setCfgModalOpen(true); };
+  const openCfgEdit = (row: any) => { setCfgForm({ ...row }); setCfgEditMode(true); setCfgModalOpen(true); };
+  const saveCfg = async () => {
+    if (!cfgForm.config_name) { toast.error("설정명은 필수 입력이에요"); return; }
+    setCfgSaving(true);
+    try {
+      if (cfgEditMode) {
+        await apiClient.put(`/table-management/tables/${COLLECTION_TABLE}/edit`, {
+          originalData: { id: cfgForm.id }, updatedData: cfgForm,
+        });
+        toast.success("수집 설정을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${COLLECTION_TABLE}/add`, cfgForm);
+        toast.success("수집 설정을 등록했어요");
+      }
+      setCfgModalOpen(false);
+      fetchConfigs();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setCfgSaving(false); }
+  };
+  const deleteCfg = async () => {
+    if (cfgChecked.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("수집 설정 삭제", { description: `선택한 ${cfgChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.` });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${COLLECTION_TABLE}/delete`, {
+        data: cfgChecked.map(id => ({ id })),
+      });
+      toast.success(`${cfgChecked.length}건을 삭제했어요`);
+      setCfgChecked([]);
+      fetchConfigs();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="rounded-lg border bg-card">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <div className="border-b px-3">
+            <TabsList className="bg-transparent h-auto p-0 gap-0">
+              <TabsTrigger
+                value="datatype"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-3 text-sm font-medium"
+              >
+                <Cpu className="w-4 h-4 mr-2" />
+                PLC 데이터타입
+                <Badge variant="secondary" className="ml-2 bg-primary/10 text-primary text-xs">{dtCount}</Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="collection"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-3 text-sm font-medium"
+              >
+                <Settings2 className="w-4 h-4 mr-2" />
+                수집 설정
+                <Badge variant="secondary" className="ml-2 bg-primary/10 text-primary text-xs">{cfgCount}</Badge>
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* ──── PLC 데이터타입 탭 ──── */}
+          <TabsContent value="datatype" className="p-3 mt-0">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    className="h-8 pl-8 w-56 text-sm"
+                    placeholder="설비코드 검색..."
+                    value={dtKeyword}
+                    onChange={(e) => setDtKeyword(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && fetchDatatypes(dtKeyword)}
+                  />
+                </div>
+                <Button size="sm" variant="outline" className="h-8" onClick={() => fetchDatatypes(dtKeyword)}>
+                  <Search className="w-3.5 h-3.5 mr-1" />검색
+                </Button>
+                <Button size="sm" variant="ghost" className="h-8" onClick={() => { setDtKeyword(""); fetchDatatypes(""); }}>
+                  초기화
+                </Button>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">{dtCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openDtCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = datatypes.find(r => dtChecked.includes(r.id));
+                  if (sel) openDtEdit(sel); else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={deleteDt}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <EDataTable
+                columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+                  key: col.key,
+                  label: col.label,
+                  align: col.key === "is_active" ? "center" : undefined,
+                  render: col.key === "is_active"
+                    ? (val: any) => <Badge variant={val ? "default" : "secondary"} className="text-xs">{val ? "사용" : "미사용"}</Badge>
+                    : undefined,
+                }))}
+                data={ts.groupData(datatypes)}
+                loading={dtLoading}
+                emptyMessage="등록된 PLC 데이터타입이 없어요"
+                showCheckbox
+                checkedIds={dtChecked}
+                onCheckedChange={setDtChecked}
+                onRowDoubleClick={(row) => openDtEdit(row)}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </TabsContent>
+
+          {/* ──── 수집 설정 탭 ──── */}
+          <TabsContent value="collection" className="p-3 mt-0">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    className="h-8 pl-8 w-56 text-sm"
+                    placeholder="설정명 검색..."
+                    value={cfgKeyword}
+                    onChange={(e) => setCfgKeyword(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && fetchConfigs(cfgKeyword)}
+                  />
+                </div>
+                <Button size="sm" variant="outline" className="h-8" onClick={() => fetchConfigs(cfgKeyword)}>
+                  <Search className="w-3.5 h-3.5 mr-1" />검색
+                </Button>
+                <Button size="sm" variant="ghost" className="h-8" onClick={() => { setCfgKeyword(""); fetchConfigs(""); }}>
+                  초기화
+                </Button>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">{cfgCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openCfgCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = configs.find(r => cfgChecked.includes(r.id));
+                  if (sel) openCfgEdit(sel); else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={deleteCfg}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+              </div>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <EDataTable
+                columns={[
+                  { key: "config_name", label: "설정명" },
+                  { key: "source_connection_id", label: "소스연결ID", width: "w-[110px]" },
+                  { key: "source_table", label: "소스테이블", width: "w-[120px]" },
+                  { key: "target_table", label: "대상테이블", width: "w-[120px]" },
+                  { key: "collection_type", label: "수집유형", width: "w-[90px]" },
+                  { key: "schedule_cron", label: "스케줄(Cron)", width: "w-[120px]", render: (val: any) => <span className="font-mono text-[13px]">{val}</span> },
+                  { key: "is_active", label: "사용여부", width: "w-[80px]", align: "center" as const, render: (val: any) => <Badge variant={val ? "default" : "secondary"} className="text-xs">{val ? "사용" : "미사용"}</Badge> },
+                ] as EDataTableColumn[]}
+                data={configs}
+                loading={cfgLoading}
+                emptyMessage="등록된 수집 설정이 없어요"
+                showCheckbox
+                checkedIds={cfgChecked}
+                onCheckedChange={setCfgChecked}
+                onRowDoubleClick={(row) => openCfgEdit(row)}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* ═══════════════════ PLC 데이터타입 모달 ═══════════════════ */}
+      <Dialog open={dtModalOpen} onOpenChange={setDtModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{dtEditMode ? "PLC 데이터타입 수정" : "PLC 데이터타입 등록"}</DialogTitle>
+            <DialogDescription>PLC 데이터타입 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">설비코드 <span className="text-destructive">*</span></Label>
+              <Select value={dtForm.equipment_code || ""} onValueChange={(v) => setDtForm(p => ({ ...p, equipment_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="설비를 선택해주세요" /></SelectTrigger>
+                <SelectContent>
+                  {equipOptions.map(o => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">데이터타입</Label>
+              <Input className="h-9" value={dtForm.data_type || ""} onChange={(e) => setDtForm(p => ({ ...p, data_type: e.target.value }))} placeholder="예: 온도, 압력" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">단위</Label>
+              <Input className="h-9" value={dtForm.unit || ""} onChange={(e) => setDtForm(p => ({ ...p, unit: e.target.value }))} placeholder="예: ℃, bar" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">태그주소</Label>
+              <Input className="h-9" value={dtForm.tag_address || ""} onChange={(e) => setDtForm(p => ({ ...p, tag_address: e.target.value }))} placeholder="예: D100" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">수집주기</Label>
+              <Input className="h-9" value={dtForm.collection_interval || ""} onChange={(e) => setDtForm(p => ({ ...p, collection_interval: e.target.value }))} placeholder="예: 1000ms" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">하한값</Label>
+              <Input className="h-9" type="number" value={dtForm.lower_limit ?? ""} onChange={(e) => setDtForm(p => ({ ...p, lower_limit: e.target.value }))} placeholder="하한값" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">상한값</Label>
+              <Input className="h-9" type="number" value={dtForm.upper_limit ?? ""} onChange={(e) => setDtForm(p => ({ ...p, upper_limit: e.target.value }))} placeholder="상한값" />
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <div className="flex items-center gap-2">
+                <Checkbox checked={dtForm.is_active ?? true} onCheckedChange={(v) => setDtForm(p => ({ ...p, is_active: !!v }))} />
+                <Label className="text-sm">사용</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDtModalOpen(false)}>취소</Button>
+            <Button onClick={saveDt} disabled={dtSaving}>
+              {dtSaving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 수집 설정 모달 ═══════════════════ */}
+      <Dialog open={cfgModalOpen} onOpenChange={setCfgModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{cfgEditMode ? "수집 설정 수정" : "수집 설정 등록"}</DialogTitle>
+            <DialogDescription>수집 설정 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">설정명 <span className="text-destructive">*</span></Label>
+              <Input className="h-9" value={cfgForm.config_name || ""} onChange={(e) => setCfgForm(p => ({ ...p, config_name: e.target.value }))} placeholder="설정명을 입력해주세요" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">소스연결ID</Label>
+              <Input className="h-9" value={cfgForm.source_connection_id || ""} onChange={(e) => setCfgForm(p => ({ ...p, source_connection_id: e.target.value }))} placeholder="소스연결ID" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">수집유형</Label>
+              {collectionTypeOptions.length > 0 ? (
+                <Select value={cfgForm.collection_type || ""} onValueChange={(v) => setCfgForm(p => ({ ...p, collection_type: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택해주세요" /></SelectTrigger>
+                  <SelectContent>
+                    {collectionTypeOptions.map(o => (
+                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <Input className="h-9" value={cfgForm.collection_type || ""} onChange={(e) => setCfgForm(p => ({ ...p, collection_type: e.target.value }))} placeholder="수집유형" />
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">소스테이블</Label>
+              <Input className="h-9" value={cfgForm.source_table || ""} onChange={(e) => setCfgForm(p => ({ ...p, source_table: e.target.value }))} placeholder="소스테이블명" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">대상테이블</Label>
+              <Input className="h-9" value={cfgForm.target_table || ""} onChange={(e) => setCfgForm(p => ({ ...p, target_table: e.target.value }))} placeholder="대상테이블명" />
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">스케줄 (Cron)</Label>
+              <Input className="h-9 font-mono text-sm" value={cfgForm.schedule_cron || ""} onChange={(e) => setCfgForm(p => ({ ...p, schedule_cron: e.target.value }))} placeholder="예: */5 * * * * (5분마다)" />
+              {cfgForm.schedule_cron && (
+                <p className="text-xs text-muted-foreground mt-1">{cronToKorean(cfgForm.schedule_cron)}</p>
+              )}
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <div className="flex items-center gap-2">
+                <Checkbox checked={cfgForm.is_active ?? true} onCheckedChange={(v) => setCfgForm(p => ({ ...p, is_active: !!v }))} />
+                <Label className="text-sm">사용</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCfgModalOpen(false)}>취소</Button>
+            <Button onClick={saveCfg} disabled={cfgSaving}>
+              {cfgSaving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/logistics/info/page.tsx b/frontend/app/(main)/COMPANY_7/logistics/info/page.tsx
new file mode 100644
index 00000000..543dd3dd
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/logistics/info/page.tsx
@@ -0,0 +1,905 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import {
+  Truck,
+  DollarSign,
+  FileText,
+  MapPin,
+  Car,
+  Plus,
+  Trash2,
+  Download,
+  Pencil,
+  RefreshCw,
+  Inbox,
+  Loader2,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// ========== 타입 & 상수 ==========
+type TabKey = "carrier" | "cost" | "contract" | "route" | "vehicle";
+
+interface TabColumnDef {
+  key: string;
+  label: string;
+  width?: string;
+  align?: "left" | "center" | "right";
+  formatNumber?: boolean;
+}
+
+interface FormFieldDef {
+  key: string;
+  label: string;
+  type: "text" | "number" | "select" | "smartselect" | "date";
+  required?: boolean;
+  referenceKey?: "carrier" | "route";
+  categoryKey?: string;
+  options?: { value: string; label: string }[];
+  placeholder?: string;
+}
+
+interface TabConfig {
+  key: TabKey;
+  label: string;
+  icon: React.ReactNode;
+  tableName: string;
+  columns: TabColumnDef[];
+  formFields: FormFieldDef[];
+  defaultSortColumn: string;
+}
+
+const TAB_CONFIGS: TabConfig[] = [
+  {
+    key: "carrier",
+    label: "운송업체",
+    icon: <Truck className="h-3.5 w-3.5" />,
+    tableName: "carrier_mng",
+    defaultSortColumn: "carrier_code",
+    columns: [
+      { key: "carrier_code", label: "업체코드", width: "120px" },
+      { key: "carrier_name", label: "업체명", width: "160px" },
+      { key: "carrier_type", label: "업체유형", width: "100px" },
+      { key: "contact_person", label: "담당자", width: "100px" },
+      { key: "contact_phone", label: "연락처", width: "130px" },
+      { key: "email", label: "이메일", width: "180px" },
+      { key: "address", label: "주소", width: "220px" },
+      { key: "rating", label: "등급", width: "70px", align: "center" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "carrier_code", label: "업체코드", type: "text", required: true, placeholder: "업체코드를 입력해주세요" },
+      { key: "carrier_name", label: "업체명", type: "text", required: true, placeholder: "업체명을 입력해주세요" },
+      { key: "carrier_type", label: "업체유형", type: "select", required: true, categoryKey: "carrier_mng:carrier_type", placeholder: "업체유형을 선택해주세요" },
+      { key: "contact_person", label: "담당자", type: "text", placeholder: "담당자명" },
+      { key: "contact_phone", label: "연락처", type: "text", placeholder: "예: 02-1234-5678" },
+      { key: "email", label: "이메일", type: "text", placeholder: "email@example.com" },
+      { key: "address", label: "주소", type: "text", placeholder: "주소를 입력해주세요" },
+      { key: "rating", label: "등급", type: "select", categoryKey: "carrier_mng:rating", placeholder: "등급을 선택해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "cost",
+    label: "물류비",
+    icon: <DollarSign className="h-3.5 w-3.5" />,
+    tableName: "logistics_cost_mng",
+    defaultSortColumn: "carrier_code",
+    columns: [
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "route_code", label: "구간코드", width: "120px" },
+      { key: "base_fee", label: "기본요금", width: "110px", align: "right", formatNumber: true },
+      { key: "unit", label: "단위", width: "70px", align: "center" },
+      { key: "unit_fee", label: "단가", width: "110px", align: "right", formatNumber: true },
+      { key: "min_weight", label: "최소중량", width: "100px", align: "right", formatNumber: true },
+      { key: "max_weight", label: "최대중량", width: "100px", align: "right", formatNumber: true },
+      { key: "delivery_days", label: "배송일수", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "route_code", label: "배송구간", type: "smartselect", required: true, referenceKey: "route" },
+      { key: "base_fee", label: "기본요금", type: "number", placeholder: "0" },
+      { key: "unit", label: "단위", type: "text", placeholder: "kg, 건 등" },
+      { key: "unit_fee", label: "단가", type: "number", placeholder: "0" },
+      { key: "min_weight", label: "최소중량", type: "number", placeholder: "0" },
+      { key: "max_weight", label: "최대중량", type: "number", placeholder: "0" },
+      { key: "delivery_days", label: "배송일수", type: "number", placeholder: "0" },
+    ],
+  },
+  {
+    key: "contract",
+    label: "계약서",
+    icon: <FileText className="h-3.5 w-3.5" />,
+    tableName: "carrier_contract_mng",
+    defaultSortColumn: "contract_no",
+    columns: [
+      { key: "contract_no", label: "계약번호", width: "130px" },
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "contract_start_date", label: "시작일", width: "110px" },
+      { key: "contract_end_date", label: "종료일", width: "110px" },
+      { key: "contract_amount", label: "계약금액", width: "130px", align: "right", formatNumber: true },
+      { key: "contact_person", label: "담당자", width: "100px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "contract_no", label: "계약번호", type: "text", required: true, placeholder: "계약번호를 입력해주세요" },
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "contract_start_date", label: "시작일", type: "date", required: true },
+      { key: "contract_end_date", label: "종료일", type: "date", required: true },
+      { key: "contract_amount", label: "계약금액", type: "number", placeholder: "0" },
+      { key: "contact_person", label: "담당자", type: "text", placeholder: "담당자명을 입력해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_contract_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "route",
+    label: "배송구간",
+    icon: <MapPin className="h-3.5 w-3.5" />,
+    tableName: "delivery_route_mng",
+    defaultSortColumn: "route_code",
+    columns: [
+      { key: "route_code", label: "구간코드", width: "120px" },
+      { key: "route_name", label: "구간명", width: "160px" },
+      { key: "departure", label: "출발지", width: "120px" },
+      { key: "destination", label: "도착지", width: "120px" },
+      { key: "distance_km", label: "거리(km)", width: "100px", align: "right", formatNumber: true },
+      { key: "avg_time_hours", label: "평균시간(h)", width: "100px", align: "right" },
+      { key: "route_type", label: "구간유형", width: "100px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "route_code", label: "구간코드", type: "text", required: true, placeholder: "구간코드를 입력해주세요" },
+      { key: "departure", label: "출발지", type: "text", required: true, placeholder: "출발지" },
+      { key: "destination", label: "도착지", type: "text", required: true, placeholder: "도착지" },
+      { key: "distance_km", label: "거리(km)", type: "number", placeholder: "0" },
+      { key: "avg_time_hours", label: "평균시간(h)", type: "number", placeholder: "0" },
+      { key: "route_type", label: "구간유형", type: "select", categoryKey: "delivery_route_mng:route_type", placeholder: "유형을 선택해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "delivery_route_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "vehicle",
+    label: "차량",
+    icon: <Car className="h-3.5 w-3.5" />,
+    tableName: "carrier_vehicle_mng",
+    defaultSortColumn: "vehicle_code",
+    columns: [
+      { key: "vehicle_code", label: "차량코드", width: "120px" },
+      { key: "vehicle_number", label: "차량번호", width: "120px" },
+      { key: "vehicle_type", label: "차량유형", width: "100px" },
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "load_capacity_kg", label: "적재용량(kg)", width: "120px", align: "right", formatNumber: true },
+      { key: "driver_name", label: "운전자", width: "100px" },
+      { key: "last_maintenance_date", label: "최종정비일", width: "110px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "vehicle_code", label: "차량코드", type: "text", required: true, placeholder: "차량코드를 입력해주세요" },
+      { key: "vehicle_number", label: "차량번호", type: "text", required: true, placeholder: "12가 3456" },
+      { key: "vehicle_type", label: "차량유형", type: "select", required: true, categoryKey: "carrier_vehicle_mng:vehicle_type", placeholder: "차량유형을 선택해주세요" },
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "load_capacity_kg", label: "적재용량(kg)", type: "number", placeholder: "0" },
+      { key: "driver_name", label: "운전자", type: "text", placeholder: "운전자명" },
+      { key: "last_maintenance_date", label: "최종정비일", type: "date" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_vehicle_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+];
+
+// 카테고리 계층 평탄화
+function flattenCategories(items: any[]): { value: string; label: string }[] {
+  const result: { value: string; label: string }[] = [];
+  function walk(arr: any[]) {
+    for (const item of arr) {
+      if (item.value || item.name) {
+        result.push({
+          value: item.value || item.name,
+          label: item.label || item.name || item.value,
+        });
+      }
+      if (item.children?.length) walk(item.children);
+    }
+  }
+  walk(items);
+  return result;
+}
+
+// 채번 대상 필드 매핑: tableName → 코드 필드 key
+const NUMBERING_FIELD_MAP: Record<string, string> = {
+  carrier_mng: "carrier_code",
+  delivery_route_mng: "route_code",
+  carrier_vehicle_mng: "vehicle_code",
+};
+
+// ========== 메인 컴포넌트 ==========
+export default function LogisticsInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 탭 상태
+  const [activeTab, setActiveTab] = useState<TabKey>("carrier");
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 탭별 독립 상태
+  const [tabData, setTabData] = useState<Record<TabKey, any[]>>({
+    carrier: [], cost: [], contract: [], route: [], vehicle: [],
+  });
+  const [tabLoading, setTabLoading] = useState<Record<TabKey, boolean>>({
+    carrier: false, cost: false, contract: false, route: false, vehicle: false,
+  });
+  const [tabChecked, setTabChecked] = useState<Record<TabKey, string[]>>({
+    carrier: [], cost: [], contract: [], route: [], vehicle: [],
+  });
+
+  // FK 참조 데이터 (캐싱)
+  const [carrierOptions, setCarrierOptions] = useState<{ code: string; label: string }[]>([]);
+  const [routeOptions, setRouteOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 카테고리 옵션 캐시
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { value: string; label: string }[]>>({});
+  const loadedCategories = useRef(new Set<string>());
+
+  // 모달 상태
+  const [formOpen, setFormOpen] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [editId, setEditId] = useState<string | null>(null);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 테이블 설정 (탭별)
+  const tsCarrier = useTableSettings("c16-logistics-carrier", TAB_CONFIGS[0].tableName, TAB_CONFIGS[0].columns);
+  const tsCost = useTableSettings("c16-logistics-cost", TAB_CONFIGS[1].tableName, TAB_CONFIGS[1].columns);
+  const tsContract = useTableSettings("c16-logistics-contract", TAB_CONFIGS[2].tableName, TAB_CONFIGS[2].columns);
+  const tsRoute = useTableSettings("c16-logistics-route", TAB_CONFIGS[3].tableName, TAB_CONFIGS[3].columns);
+  const tsVehicle = useTableSettings("c16-logistics-vehicle", TAB_CONFIGS[4].tableName, TAB_CONFIGS[4].columns);
+  const tsMap: Record<TabKey, typeof tsCarrier> = { carrier: tsCarrier, cost: tsCost, contract: tsContract, route: tsRoute, vehicle: tsVehicle };
+  const activeTs = tsMap[activeTab];
+
+  const activeConfig = useMemo(
+    () => TAB_CONFIGS.find((c) => c.key === activeTab)!,
+    [activeTab]
+  );
+
+  // 컬럼 가시성 헬퍼
+  const getVisibleColumns = (tabKey: TabKey) => tsMap[tabKey].visibleColumns;
+
+  // 클라이언트 사이드 필터링
+  const filteredData = useMemo(() => {
+    const data = tabData[activeTab];
+    if (searchFilters.length === 0) return data;
+    return data.filter((row) =>
+      searchFilters.every((f) => {
+        if (!f.value) return true;
+        const kw = f.value.toLowerCase();
+        if (f.columnName) {
+          return String(row[f.columnName] ?? "").toLowerCase().includes(kw);
+        }
+        return Object.values(row).some((v) => String(v ?? "").toLowerCase().includes(kw));
+      })
+    );
+  }, [tabData, activeTab, searchFilters]);
+
+  // FK 참조 데이터 로드
+  const loadReferences = useCallback(async () => {
+    try {
+      const [carrierRes, routeRes] = await Promise.all([
+        apiClient.post("/table-management/tables/carrier_mng/data", {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "carrier_code", order: "asc" },
+        }),
+        apiClient.post("/table-management/tables/delivery_route_mng/data", {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "route_code", order: "asc" },
+        }),
+      ]);
+      const carriers = carrierRes.data?.data?.data || carrierRes.data?.data?.rows || [];
+      setCarrierOptions(
+        carriers.map((r: any) => ({
+          code: r.carrier_code || "",
+          label: `${r.carrier_code} - ${r.carrier_name || ""}`,
+        }))
+      );
+      const routes = routeRes.data?.data?.data || routeRes.data?.data?.rows || [];
+      setRouteOptions(
+        routes.map((r: any) => ({
+          code: r.route_code || "",
+          label: `${r.route_code} - ${r.route_name || ""}`,
+        }))
+      );
+    } catch {
+      // FK 참조 로드 실패 시 무시
+    }
+  }, []);
+
+  useEffect(() => {
+    loadReferences();
+  }, [loadReferences]);
+
+  // 카테고리 옵션 로드
+  const loadCategoryOptions = useCallback(async (tableColumn: string) => {
+    if (loadedCategories.current.has(tableColumn)) return;
+    loadedCategories.current.add(tableColumn);
+    const [tableName, columnName] = tableColumn.split(":");
+    try {
+      const res = await apiClient.get(`/table-categories/${tableName}/${columnName}/values`);
+      const data = res.data?.data || [];
+      setCategoryOptions((prev) => ({
+        ...prev,
+        [tableColumn]: data.length > 0 ? flattenCategories(data) : [],
+      }));
+    } catch {
+      setCategoryOptions((prev) => ({ ...prev, [tableColumn]: [] }));
+    }
+  }, []);
+
+  // 활성 탭의 카테고리 로드
+  useEffect(() => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    config.formFields.forEach((f) => {
+      if (f.categoryKey) loadCategoryOptions(f.categoryKey);
+    });
+  }, [activeTab, loadCategoryOptions]);
+
+  // 데이터 조회
+  const fetchTabData = useCallback(async (tab: TabKey) => {
+    const config = TAB_CONFIGS.find((c) => c.key === tab);
+    if (!config) return;
+    setTabLoading((prev) => ({ ...prev, [tab]: true }));
+    try {
+      const res = await apiClient.post(
+        `/table-management/tables/${config.tableName}/data`,
+        {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: config.defaultSortColumn, order: "asc" },
+        }
+      );
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setTabData((prev) => ({ ...prev, [tab]: rows }));
+    } catch {
+      toast.error("데이터를 불러오는 데 실패했어요.");
+      setTabData((prev) => ({ ...prev, [tab]: [] }));
+    } finally {
+      setTabLoading((prev) => ({ ...prev, [tab]: false }));
+    }
+  }, []);
+
+  // 초기 데이터 로드 (탭 전환 시)
+  useEffect(() => {
+    fetchTabData(activeTab);
+  }, [activeTab, fetchTabData]);
+
+  // 탭 변경
+  const handleTabChange = useCallback((tab: string) => {
+    setActiveTab(tab as TabKey);
+    setSearchFilters([]);
+  }, []);
+
+  // 등록 모달 열기
+  const handleOpenAdd = useCallback(async () => {
+    setEditMode(false);
+    setEditId(null);
+    setFormData({});
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setFormOpen(true);
+
+    // 현재 탭의 채번 규칙 조회
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    const codeField = NUMBERING_FIELD_MAP[config.tableName];
+    if (!codeField) return; // 채번 대상이 아닌 탭
+
+    try {
+      const ruleRes = await apiClient.get(
+        `/numbering-rules/by-column/${config.tableName}/${codeField}`
+      );
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시 — 사용자가 직접 입력
+    }
+  }, [activeTab]);
+
+  // 수정 모달 열기
+  const handleOpenEdit = useCallback((row: any) => {
+    setEditMode(true);
+    setEditId(row.id ? String(row.id) : null);
+    setFormData({ ...row });
+    setFormOpen(true);
+  }, []);
+
+  // 저장
+  const handleSave = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+
+    // 필수값 검증 (등록 모드에서 채번 대상 코드 필드는 자동 할당이므로 스킵)
+    const numberingCodeField = NUMBERING_FIELD_MAP[config.tableName];
+    for (const field of config.formFields) {
+      if (!editMode && numberingRuleId && field.key === numberingCodeField) continue;
+      if (field.required && !formData[field.key]?.toString().trim()) {
+        toast.error(`${field.label}은(는) 필수 입력이에요.`);
+        return;
+      }
+    }
+
+    try {
+      // 배송구간: 출발지→도착지 로 구간명 자동 생성
+      const saveData = { ...formData };
+      if (activeTab === "route" && saveData.departure && saveData.destination) {
+        saveData.route_name = `${saveData.departure}→${saveData.destination}`;
+      }
+
+      if (editMode && editId) {
+        await apiClient.put(`/table-management/tables/${config.tableName}/edit`, {
+          originalData: { id: editId },
+          updatedData: saveData,
+        });
+        toast.success("수정이 완료되었어요.");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        const codeField = NUMBERING_FIELD_MAP[config.tableName];
+        if (codeField && numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            saveData[codeField] = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+
+        await apiClient.post(
+          `/table-management/tables/${config.tableName}/add`,
+          { id: crypto.randomUUID(), ...saveData }
+        );
+        toast.success("등록이 완료되었어요.");
+      }
+      setFormOpen(false);
+      fetchTabData(activeTab);
+      // FK 참조 테이블 변경 시 캐시 갱신
+      if (activeTab === "carrier" || activeTab === "route") {
+        loadReferences();
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    }
+  }, [activeTab, editMode, editId, formData, fetchTabData, loadReferences, numberingRuleId]);
+
+  // 삭제
+  const handleDelete = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    const ids = tabChecked[activeTab];
+    if (ids.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요.");
+      return;
+    }
+    const ok = await confirm(`선택한 ${ids.length}건을 삭제할까요?`, {
+      description: "삭제된 데이터는 복구할 수 없어요.",
+      variant: "destructive",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(
+        `/table-management/tables/${config.tableName}/delete`,
+        { data: ids.map((id) => ({ id })) }
+      );
+      toast.success(`${ids.length}건이 삭제되었어요.`);
+      setTabChecked((prev) => ({ ...prev, [activeTab]: [] }));
+      fetchTabData(activeTab);
+      if (activeTab === "carrier" || activeTab === "route") {
+        loadReferences();
+      }
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  }, [activeTab, tabChecked, confirm, fetchTabData, loadReferences]);
+
+  // 엑셀 다운로드 (필터된 데이터 기준)
+  const handleExcelDownload = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    if (filteredData.length === 0) {
+      toast.error("다운로드할 데이터가 없어요.");
+      return;
+    }
+    const exportData = filteredData.map((row) => {
+      const obj: Record<string, any> = {};
+      config.columns.forEach((col) => {
+        obj[col.label] = row[col.key] ?? "";
+      });
+      return obj;
+    });
+    await exportToExcel(exportData, `${config.label}.xlsx`, config.label);
+    toast.success("엑셀 다운로드가 완료되었어요.");
+  }, [activeTab, filteredData]);
+
+  // 폼 필드 변경
+  const updateFormField = useCallback((key: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [key]: value }));
+  }, []);
+
+  // 행 체크 토글
+  const toggleRowCheck = useCallback((tabKey: TabKey, rowId: string) => {
+    setTabChecked((prev) => {
+      const ids = prev[tabKey];
+      return {
+        ...prev,
+        [tabKey]: ids.includes(rowId) ? ids.filter((x) => x !== rowId) : [...ids, rowId],
+      };
+    });
+  }, []);
+
+  // 전체 체크 토글
+  const toggleAllCheck = useCallback((tabKey: TabKey, checked: boolean) => {
+    setTabChecked((prev) => ({
+      ...prev,
+      [tabKey]: checked ? tabData[tabKey].map((r: any) => String(r.id)) : [],
+    }));
+  }, [tabData]);
+
+  // 폼 필드 렌더
+  const renderFormField = useCallback(
+    (field: FormFieldDef) => {
+      const value = formData[field.key] ?? "";
+      // 현재 탭의 채번 대상 코드 필드인지 확인
+      const numberingCodeField = NUMBERING_FIELD_MAP[activeConfig.tableName];
+      const isNumberingTarget = !editMode && numberingRuleId && field.key === numberingCodeField;
+      // 수정 모드에서 코드/번호 필드는 읽기전용
+      const isCodeField =
+        editMode &&
+        field.type === "text" &&
+        (field.key.endsWith("_code") || field.key.endsWith("_no"));
+
+      switch (field.type) {
+        case "text":
+          // 등록 모드 + 채번 대상 필드: readOnly로 미리보기 코드 표시
+          if (isNumberingTarget) {
+            return (
+              <Input
+                value={previewCode || ""}
+                readOnly
+                placeholder="채번 조회 중..."
+                className="h-9 text-sm bg-muted text-muted-foreground"
+              />
+            );
+          }
+          return (
+            <Input
+              value={value}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              placeholder={field.placeholder}
+              readOnly={isCodeField}
+              className={cn(
+                "h-9 text-sm",
+                isCodeField && "bg-muted text-muted-foreground"
+              )}
+            />
+          );
+        case "number":
+          return (
+            <Input
+              type="number"
+              value={value}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              placeholder={field.placeholder}
+              className="h-9 text-sm"
+            />
+          );
+        case "select": {
+          const opts =
+            field.options ||
+            (field.categoryKey ? categoryOptions[field.categoryKey] : []) ||
+            [];
+          return (
+            <Select
+              value={String(value)}
+              onValueChange={(v) => updateFormField(field.key, v)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder={field.placeholder || "선택해주세요"} />
+              </SelectTrigger>
+              <SelectContent>
+                {opts.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          );
+        }
+        case "smartselect": {
+          // SmartSelect 대신 Select로 직접 구현
+          const opts =
+            field.referenceKey === "carrier" ? carrierOptions : routeOptions;
+          return (
+            <Select
+              value={String(value)}
+              onValueChange={(v) => updateFormField(field.key, v)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder={field.placeholder || "선택해주세요"} />
+              </SelectTrigger>
+              <SelectContent>
+                {opts.map((o) => (
+                  <SelectItem key={o.code} value={o.code}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          );
+        }
+        case "date":
+          return (
+            <Input
+              type="date"
+              value={value ? String(value).split("T")[0] : ""}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              className="h-9 text-sm"
+            />
+          );
+        default:
+          return null;
+      }
+    },
+    [formData, editMode, carrierOptions, routeOptions, categoryOptions, updateFormField, activeConfig, numberingRuleId, previewCode]
+  );
+
+  // ========== 렌더링 ==========
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={activeConfig.tableName}
+        filterId="c16-logistics-info"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={activeTs.filterConfig}
+        dataCount={filteredData.length}
+      />
+
+      {/* 탭 + 콘텐츠 영역 */}
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border bg-card"
+      >
+        <TabsList className="h-auto w-full shrink-0 justify-start gap-0 rounded-none border-b bg-muted/30 p-0">
+          {TAB_CONFIGS.map((tab) => (
+            <TabsTrigger
+              key={tab.key}
+              value={tab.key}
+              className="flex items-center gap-1.5 rounded-none border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-muted-foreground data-[state=active]:border-primary data-[state=active]:font-semibold data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              {tab.icon}
+              {tab.label}
+              <Badge
+                variant="outline"
+                className="ml-1 h-5 min-w-[22px] justify-center px-1.5 font-mono text-[10px]"
+              >
+                {tabData[tab.key]?.length || 0}
+              </Badge>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {TAB_CONFIGS.map((tab) => {
+          const displayData = tab.key === activeTab ? filteredData : tabData[tab.key];
+          const isAllChecked =
+            tabData[tab.key].length > 0 &&
+            tabData[tab.key].every((r: any) => tabChecked[tab.key].includes(String(r.id)));
+
+          return (
+            <TabsContent
+              key={tab.key}
+              value={tab.key}
+              className="m-0 flex flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
+            >
+              {/* 액션 바 */}
+              <div className="flex shrink-0 items-center justify-between border-b px-3 py-2">
+                <div className="flex items-center gap-2">
+                  <h2 className="text-sm font-bold">{tab.label} 목록</h2>
+                  <Badge className="bg-primary/10 font-mono text-[11px] text-primary">
+                    {tab.key === activeTab ? displayData.length : tabData[tab.key]?.length || 0}건
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" className="h-8 text-xs" onClick={handleOpenAdd}>
+                    <Plus className="mr-1 h-3.5 w-3.5" />
+                    등록
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs"
+                    disabled={tabChecked[tab.key].length !== 1}
+                    onClick={() => {
+                      const row = tabData[tab.key].find(
+                        (r: any) => String(r.id) === tabChecked[tab.key][0]
+                      );
+                      if (row) handleOpenEdit(row);
+                    }}
+                  >
+                    <Pencil className="mr-1 h-3.5 w-3.5" />
+                    수정
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs text-destructive hover:bg-destructive/10"
+                    disabled={tabChecked[tab.key].length === 0}
+                    onClick={handleDelete}
+                  >
+                    <Trash2 className="mr-1 h-3.5 w-3.5" />
+                    삭제
+                  </Button>
+                  <div className="mx-1 h-5 w-px bg-border" />
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs"
+                    onClick={handleExcelDownload}
+                  >
+                    <Download className="mr-1 h-3.5 w-3.5" />
+                    엑셀
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => fetchTabData(tab.key)}
+                  >
+                    <RefreshCw
+                      className={cn(
+                        "h-3.5 w-3.5",
+                        tabLoading[tab.key] && "animate-spin"
+                      )}
+                    />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => activeTs.setOpen(true)}
+                  >
+                    <Settings2 className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 테이블 영역 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={getVisibleColumns(tab.key).map((col): EDataTableColumn => ({
+                    key: col.key,
+                    label: col.label,
+                    align: col.align,
+                    formatNumber: col.formatNumber,
+                    truncate: true,
+                  }))}
+                  data={tsMap[tab.key].groupData(displayData)}
+                  rowKey={(row: any) => String(row.id)}
+                  loading={tabLoading[tab.key]}
+                  emptyMessage={`등록된 ${tab.label} 정보가 없어요`}
+                  showCheckbox
+                  checkedIds={tabChecked[tab.key]}
+                  onCheckedChange={(ids) => setTabChecked((prev) => ({ ...prev, [tab.key]: ids }))}
+                  onRowDoubleClick={(row) => handleOpenEdit(row)}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
+              </div>
+            </TabsContent>
+          );
+        })}
+      </Tabs>
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={formOpen} onOpenChange={setFormOpen}>
+        <DialogContent className="flex max-h-[85vh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[680px]">
+          <DialogHeader className="shrink-0 border-b px-6 py-4">
+            <DialogTitle>
+              {activeConfig.label} {editMode ? "수정" : "등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {editMode
+                ? `${activeConfig.label} 정보를 수정해주세요.`
+                : `새 ${activeConfig.label} 정보를 입력해주세요.`}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto p-6">
+            <div className="grid grid-cols-2 gap-4">
+              {activeConfig.formFields.map((field) => (
+                <div key={field.key} className="flex flex-col gap-1.5">
+                  <Label className="text-xs font-semibold text-muted-foreground">
+                    {field.label}
+                    {field.required && (
+                      <span className="ml-0.5 text-destructive">*</span>
+                    )}
+                  </Label>
+                  {renderFormField(field)}
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="shrink-0 border-t">
+            <div className="flex items-center justify-end gap-2 px-6 py-3">
+              <Button variant="outline" onClick={() => setFormOpen(false)}>
+                취소
+              </Button>
+              <Button onClick={handleSave}>
+                {editMode ? "수정" : "등록"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={activeTs.open}
+        onOpenChange={activeTs.setOpen}
+        tableName={activeTs.tableName}
+        settingsId={activeTs.settingsId}
+        defaultVisibleKeys={activeTs.defaultVisibleKeys}
+        onSave={activeTs.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/logistics/inventory/page.tsx b/frontend/app/(main)/COMPANY_7/logistics/inventory/page.tsx
new file mode 100644
index 00000000..7d2a96c6
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/logistics/inventory/page.tsx
@@ -0,0 +1,738 @@
+"use client";
+
+/**
+ * 재고현황 — 하드코딩 페이지 (Type B 마스터-디테일)
+ *
+ * 좌측: 재고 목록 (inventory_stock, item_info JOIN)
+ * 우측: 선택 품목의 재고 이동 이력 (inventory_history)
+ *
+ * ★ 재고 직접 등록/삭제 불가 — 입출고를 통해서만 변동, 조정만 가능
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Package,
+  Loader2,
+  Download,
+  ClipboardEdit,
+  History,
+  AlertTriangle,
+  RefreshCw,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { toast } from "sonner";
+import { exportToExcel } from "@/lib/utils/excelExport";
+
+const STOCK_TABLE = "inventory_stock";
+
+const STOCK_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "warehouse_code", label: "창고" },
+  { key: "location_code", label: "위치" },
+  { key: "current_qty", label: "현재수량", align: "right" as const },
+  { key: "safety_qty", label: "안전재고", align: "right" as const },
+  { key: "unit", label: "단위" },
+  { key: "status", label: "상태" },
+];
+const HISTORY_TABLE = "inventory_history";
+
+const getStatusVariant = (
+  status: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "정상":
+      return "default";
+    case "부족":
+      return "destructive";
+    case "과잉":
+      return "secondary";
+    default:
+      return "outline";
+  }
+};
+
+const getHistoryTypeVariant = (
+  type: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (type) {
+    case "입고":
+      return "default";
+    case "출고":
+      return "secondary";
+    case "조정":
+      return "outline";
+    case "입고취소":
+    case "이동":
+      return "destructive";
+    default:
+      return "outline";
+  }
+};
+
+export default function InventoryStatusPage() {
+  const { user } = useAuth();
+  const ts = useTableSettings("c16-inventory", STOCK_TABLE, STOCK_COLUMNS);
+
+  // 좌측: 재고 목록
+  const [stockItems, setStockItems] = useState<any[]>([]);
+  const [stockLoading, setStockLoading] = useState(false);
+  const [selectedStockId, setSelectedStockId] = useState<string | null>(null);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 이동 이력
+  const [historyItems, setHistoryItems] = useState<any[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+
+  // 조정 모달
+  const [adjustModalOpen, setAdjustModalOpen] = useState(false);
+  const [adjustForm, setAdjustForm] = useState<{
+    adjust_type: string;
+    adjust_qty: string;
+    reason: string;
+  }>({ adjust_type: "증가", adjust_qty: "", reason: "" });
+  const [adjustSaving, setAdjustSaving] = useState(false);
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["status", "unit"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${STOCK_TABLE}/${col}/values`
+          );
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setCategoryOptions(optMap);
+    };
+    load();
+  }, []);
+
+  // 재고 목록 조회
+  const fetchStock = useCallback(async () => {
+    setStockLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const [stockRes, itemRes, whRes] = await Promise.all([
+        apiClient.post(`/table-management/tables/${STOCK_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+          autoFilter: true,
+          sort: { columnName: "item_code", order: "asc" },
+        }),
+        apiClient.post(`/table-management/tables/item_info/data`, { page: 1, size: 500, autoFilter: true }),
+        apiClient.post(`/table-management/tables/warehouse_info/data`, { page: 1, size: 500, autoFilter: true }),
+      ]);
+      const raw = stockRes.data?.data?.data || stockRes.data?.data?.rows || [];
+      const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+      const warehouses = whRes.data?.data?.data || whRes.data?.data?.rows || [];
+      const itemMap = new Map(items.map((i: any) => [i.item_number || i.item_code, { name: i.item_name || "", unit: i.unit || "" }]));
+      const whMap = new Map(warehouses.map((w: any) => [w.warehouse_code, w.warehouse_name || w.warehouse_code]));
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const itemInfo = itemMap.get(r.item_code) as any;
+        return {
+          ...r,
+          item_name: itemInfo?.name || "",
+          unit: itemInfo?.unit || resolve("unit", r.unit),
+          warehouse_name: whMap.get(r.warehouse_code) || r.warehouse_code || "",
+          status: resolve("status", r.status),
+          _isLow: r.safety_qty && Number(r.current_qty) < Number(r.safety_qty),
+        };
+      });
+      setStockItems(data);
+    } catch {
+      toast.error("재고 목록을 불러오지 못했어요");
+    } finally {
+      setStockLoading(false);
+    }
+  }, [categoryOptions, searchFilters]);
+
+  useEffect(() => {
+    fetchStock();
+  }, [fetchStock]);
+
+  // 선택된 재고
+  const selectedStock = stockItems.find((s) => s.id === selectedStockId);
+
+  // 이력 조회
+  const fetchHistory = useCallback(async () => {
+    if (!selectedStock?.item_code) {
+      setHistoryItems([]);
+      return;
+    }
+    setHistoryLoading(true);
+    try {
+      const historyFilters: any[] = [
+        {
+          columnName: "item_code",
+          operator: "equals",
+          value: selectedStock.item_code,
+        },
+      ];
+      if (selectedStock.warehouse_code) {
+        historyFilters.push({
+          columnName: "warehouse_code",
+          operator: "equals",
+          value: selectedStock.warehouse_code,
+        });
+      }
+      const res = await apiClient.post(
+        `/table-management/tables/${HISTORY_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: { enabled: true, filters: historyFilters },
+          autoFilter: true,
+          sort: { columnName: "transaction_date", order: "desc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setHistoryItems(raw);
+    } catch {
+      toast.error("재고 이력을 불러오지 못했어요");
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, [selectedStock?.item_code, selectedStock?.warehouse_code]);
+
+  useEffect(() => {
+    fetchHistory();
+  }, [fetchHistory]);
+
+  // 재고 조정 저장
+  const handleAdjustSave = async () => {
+    if (!selectedStock) return;
+    const qty = Number(adjustForm.adjust_qty);
+    if (!qty || qty <= 0) {
+      toast.error("조정 수량을 입력해주세요");
+      return;
+    }
+    if (!adjustForm.reason.trim()) {
+      toast.error("조정 사유를 입력해주세요");
+      return;
+    }
+    setAdjustSaving(true);
+    try {
+      const changeQty = adjustForm.adjust_type === "증가" ? qty : -qty;
+      const afterQty = Number(selectedStock.current_qty || 0) + changeQty;
+
+      await apiClient.post(
+        `/table-management/tables/${HISTORY_TABLE}/add`,
+        {
+          id: crypto.randomUUID(),
+          item_code: selectedStock.item_code,
+          warehouse_code: selectedStock.warehouse_code || "",
+          location_code: selectedStock.location_code || "",
+          transaction_type: "조정",
+          transaction_date: new Date().toISOString(),
+          quantity: String(changeQty),
+          balance_qty: String(afterQty),
+          remark: adjustForm.reason.trim(),
+        }
+      );
+
+      await apiClient.put(
+        `/table-management/tables/${STOCK_TABLE}/edit`,
+        {
+          originalData: { id: selectedStock.id },
+          updatedData: { current_qty: afterQty },
+        }
+      );
+
+      toast.success("재고가 조정되었어요");
+      setAdjustModalOpen(false);
+      setAdjustForm({ adjust_type: "증가", adjust_qty: "", reason: "" });
+      fetchStock();
+    } catch {
+      toast.error("재고 조정에 실패했어요");
+    } finally {
+      setAdjustSaving(false);
+    }
+  };
+
+  // EDataTable 컬럼 정의
+  const stockColumns: EDataTableColumn[] = ts.visibleColumns.map((col) => {
+    const base: EDataTableColumn = { key: col.key, label: col.label, align: col.align };
+    if (col.key === "current_qty") {
+      return {
+        ...base,
+        align: "right" as const,
+        render: (val: any, row: any) => (
+          <span className="font-mono">
+            <span className={cn(row._isLow && "text-destructive font-bold")}>
+              {Number(row.current_qty || 0).toLocaleString()}
+            </span>
+            {row._isLow && (
+              <AlertTriangle className="inline h-3 w-3 text-destructive ml-1" />
+            )}
+          </span>
+        ),
+      };
+    }
+    if (col.key === "safety_qty") {
+      return {
+        ...base,
+        align: "right" as const,
+        formatNumber: true,
+      };
+    }
+    if (col.key === "status") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getStatusVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    return base;
+  });
+
+  // 엑셀 내보내기
+  const handleExcelExport = () => {
+    if (stockItems.length === 0) {
+      toast.error("내보낼 데이터가 없어요");
+      return;
+    }
+    exportToExcel(
+      stockItems.map((r) => ({
+        품목코드: r.item_code,
+        품명: r.item_name,
+        창고: r.warehouse_name || r.warehouse_code,
+        위치: r.location_code,
+        현재수량: r.current_qty,
+        안전재고: r.safety_qty,
+        단위: r.unit,
+        상태: r.status,
+      })),
+      "재고현황"
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3">
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={STOCK_TABLE}
+        filterId="c16-inventory"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={stockItems.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1 text-xs"
+              onClick={handleExcelExport}
+            >
+              <Download className="h-3.5 w-3.5" />
+              엑셀
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 패널 */}
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="flex-1 rounded-lg border bg-card"
+      >
+        {/* 좌측: 재고 목록 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+              <div className="flex items-center gap-2">
+                <span className="text-[13px] font-bold">재고 목록</span>
+                <Badge variant="default" className="rounded-full text-[11px]">
+                  {stockItems.length}건
+                </Badge>
+              </div>
+            </div>
+
+            <EDataTable
+              columns={stockColumns}
+              data={ts.groupData(stockItems)}
+              rowKey={(row) => row.id}
+              loading={stockLoading}
+              emptyMessage="등록된 재고가 없어요"
+              selectedId={selectedStockId}
+              onSelect={(id) => setSelectedStockId(id)}
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+              columnOrderKey="c16-inventory"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 상세 이력 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex flex-col h-full">
+            {!selectedStock ? (
+              <div className="flex flex-col items-center justify-center flex-1 m-5 border-2 border-dashed rounded-lg border-border">
+                <Package className="h-12 w-12 text-muted-foreground/40 mb-4" />
+                <p className="text-sm font-semibold text-muted-foreground">
+                  품목을 선택해주세요
+                </p>
+                <p className="text-xs text-muted-foreground/70 mt-1">
+                  좌측에서 품목을 선택하면 재고 이력이 표시돼요
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                  <div className="flex items-center gap-2">
+                    <History className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-[13px] font-bold">
+                      {selectedStock.item_name || selectedStock.item_code}
+                    </span>
+                    <Badge
+                      variant="outline"
+                      className="rounded-full text-[11px] font-mono"
+                    >
+                      {selectedStock.item_code}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-1.5 text-xs">
+                      <span className="text-muted-foreground">현재:</span>
+                      <span
+                        className={cn(
+                          "font-bold font-mono",
+                          selectedStock._isLow
+                            ? "text-destructive"
+                            : "text-foreground"
+                        )}
+                      >
+                        {Number(selectedStock.current_qty || 0).toLocaleString()}
+                      </span>
+                      {selectedStock._isLow && (
+                        <AlertTriangle className="h-3.5 w-3.5 text-destructive" />
+                      )}
+                    </div>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={() => {
+                        setAdjustForm({
+                          adjust_type: "증가",
+                          adjust_qty: "",
+                          reason: "",
+                        });
+                        setAdjustModalOpen(true);
+                      }}
+                    >
+                      <ClipboardEdit className="h-3.5 w-3.5" />
+                      재고 조정
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 재고 요약 카드 */}
+                <div className="grid grid-cols-4 gap-2 px-4 py-3 border-b">
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">현재수량</span>
+                    <span className="text-sm font-bold font-mono">
+                      {Number(selectedStock.current_qty || 0).toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">안전재고</span>
+                    <span className="text-sm font-bold font-mono">
+                      {Number(selectedStock.safety_qty || 0).toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">창고</span>
+                    <span className="text-sm font-bold truncate max-w-full">
+                      {selectedStock.warehouse_name || "-"}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">상태</span>
+                    <Badge
+                      variant={getStatusVariant(selectedStock.status)}
+                      className="text-[10px] mt-0.5"
+                    >
+                      {selectedStock.status || "-"}
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* 이력 서브헤더 */}
+                <div className="flex items-center justify-between px-4 py-2 border-b">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-semibold text-muted-foreground">
+                      재고 이동 이력
+                    </span>
+                    <Badge variant="secondary" className="rounded-full text-[10px]">
+                      {historyItems.length}건
+                    </Badge>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={fetchHistory}
+                  >
+                    <RefreshCw className="h-3 w-3" />
+                    새로고침
+                  </Button>
+                </div>
+
+                {/* 이력 테이블 */}
+                <div className="flex-1 overflow-auto">
+                  {historyLoading ? (
+                    <div className="flex items-center justify-center h-20">
+                      <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : historyItems.length === 0 ? (
+                    <div className="flex items-center justify-center h-20 text-xs text-muted-foreground">
+                      재고 이동 이력이 없어요
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="w-8 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">일자</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                          <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">변동수량</TableHead>
+                          <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이후수량</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                          <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사유</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">처리자</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {historyItems.map((h, idx) => (
+                          <TableRow key={h.id || idx} className="text-xs">
+                            <TableCell className="text-center text-muted-foreground">
+                              {idx + 1}
+                            </TableCell>
+                            <TableCell className="font-mono">
+                              {h.transaction_date ? String(h.transaction_date).slice(0, 10) : h.history_date || ""}
+                            </TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getHistoryTypeVariant(h.transaction_type || h.history_type)}
+                                className="text-[10px]"
+                              >
+                                {h.transaction_type || h.history_type}
+                              </Badge>
+                            </TableCell>
+                            <TableCell
+                              className={cn(
+                                "text-right font-mono",
+                                Number(h.quantity ?? h.change_qty) > 0
+                                  ? "text-primary"
+                                  : "text-destructive"
+                              )}
+                            >
+                              {Number(h.quantity ?? h.change_qty) > 0 ? "+" : ""}
+                              {Number(h.quantity ?? h.change_qty ?? 0).toLocaleString()}
+                            </TableCell>
+                            <TableCell className="text-right font-mono">
+                              {Number(h.balance_qty ?? h.after_qty ?? 0).toLocaleString()}
+                            </TableCell>
+                            <TableCell className="font-mono truncate max-w-[120px]">
+                              {h.reference_number || h.reference_no || ""}
+                            </TableCell>
+                            <TableCell className="truncate max-w-[150px]">
+                              {h.remark || h.reason || ""}
+                            </TableCell>
+                            <TableCell>{h.writer || h.created_by || ""}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 재고 조정 Dialog */}
+      <Dialog open={adjustModalOpen} onOpenChange={setAdjustModalOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>재고 조정</DialogTitle>
+            <DialogDescription>
+              {selectedStock
+                ? `${selectedStock.item_name || selectedStock.item_code} — 현재 수량: ${Number(selectedStock.current_qty || 0).toLocaleString()}`
+                : ""}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-2">
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 유형
+              </Label>
+              <Select
+                value={adjustForm.adjust_type}
+                onValueChange={(v) =>
+                  setAdjustForm((prev) => ({ ...prev, adjust_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="조정 유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="증가">증가 (입고 보정)</SelectItem>
+                  <SelectItem value="감소">감소 (출고 보정)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 수량
+              </Label>
+              <Input
+                type="number"
+                min={1}
+                placeholder="수량을 입력해주세요"
+                value={adjustForm.adjust_qty}
+                onChange={(e) =>
+                  setAdjustForm((prev) => ({
+                    ...prev,
+                    adjust_qty: e.target.value,
+                  }))
+                }
+              />
+              {adjustForm.adjust_qty && selectedStock && (
+                <p className="text-xs text-muted-foreground">
+                  조정 후 수량:{" "}
+                  <span className="font-mono font-bold">
+                    {(
+                      Number(selectedStock.current_qty || 0) +
+                      (adjustForm.adjust_type === "증가" ? 1 : -1) *
+                        Number(adjustForm.adjust_qty || 0)
+                    ).toLocaleString()}
+                  </span>
+                </p>
+              )}
+            </div>
+
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 사유 *
+              </Label>
+              <Textarea
+                placeholder="조정 사유를 입력해주세요"
+                rows={3}
+                value={adjustForm.reason}
+                onChange={(e) =>
+                  setAdjustForm((prev) => ({
+                    ...prev,
+                    reason: e.target.value,
+                  }))
+                }
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setAdjustModalOpen(false)}
+            >
+              취소
+            </Button>
+            <Button onClick={handleAdjustSave} disabled={adjustSaving}>
+              {adjustSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              조정하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/logistics/material-status/page.tsx b/frontend/app/(main)/COMPANY_7/logistics/material-status/page.tsx
index 6a921ead..eb87ba92 100644
--- a/frontend/app/(main)/COMPANY_7/logistics/material-status/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/logistics/material-status/page.tsx
@@ -10,7 +10,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Card, CardContent } from "@/components/ui/card";
+// Card 제거 — rounded-lg border bg-card 패턴 사용
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -29,6 +29,8 @@ import {
   AlertTriangle,
   CheckCircle2,
   Loader2,
+  Inbox,
+  Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
@@ -39,6 +41,17 @@ import {
   type MaterialData,
   type WarehouseData,
 } from "@/lib/api/materialStatus";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+
+const GRID_COLUMNS = [
+  { key: "plan_no", label: "계획번호" },
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "plan_qty", label: "수량" },
+  { key: "plan_date", label: "일자" },
+  { key: "status", label: "상태" },
+];
 
 const formatDate = (date: Date) => {
   const y = date.getFullYear();
@@ -60,16 +73,17 @@ const getStatusLabel = (status: string) => {
 
 const getStatusStyle = (status: string) => {
   const map: Record<string, string> = {
-    planned: "bg-amber-100 text-amber-700 border-amber-200",
-    pending: "bg-amber-100 text-amber-700 border-amber-200",
-    in_progress: "bg-blue-100 text-blue-700 border-blue-200",
-    completed: "bg-emerald-100 text-emerald-700 border-emerald-200",
-    cancelled: "bg-gray-100 text-gray-500 border-gray-200",
+    planned: "bg-secondary text-secondary-foreground border-border",
+    pending: "bg-secondary text-secondary-foreground border-border",
+    in_progress: "bg-primary/10 text-primary border-primary/20",
+    completed: "bg-accent text-accent-foreground border-accent/50",
+    cancelled: "bg-muted text-muted-foreground border-border",
   };
-  return map[status] || "bg-gray-100 text-gray-500 border-gray-200";
+  return map[status] || "bg-muted text-muted-foreground border-border";
 };
 
 export default function MaterialStatusPage() {
+  const ts = useTableSettings("c16-material-status", "work_instruction", GRID_COLUMNS);
   const today = new Date();
   const monthAgo = new Date(today);
   monthAgo.setMonth(today.getMonth() - 1);
@@ -193,33 +207,19 @@ export default function MaterialStatusPage() {
   }, [materials, materialSearch, showShortageOnly]);
 
   return (
-    <div className="flex h-[calc(100vh-4rem)] flex-col gap-4 bg-muted/30 p-4">
-      {/* 헤더 */}
-      <div className="shrink-0">
-        <div className="flex items-center gap-3">
-          <Package className="h-7 w-7 text-primary" />
-          <div>
-            <h1 className="text-2xl font-bold">자재현황</h1>
-            <p className="text-sm text-muted-foreground">
-              작업지시 대비 원자재 재고 현황
-            </p>
-          </div>
-        </div>
-      </div>
-
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
       {/* 검색 영역 */}
-      <Card className="shrink-0">
-        <CardContent className="flex flex-wrap items-end gap-3 p-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">기간</Label>
-            <div className="flex items-center gap-2">
+      <div className="shrink-0 flex flex-wrap items-end gap-3 rounded-lg border bg-card p-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">기간</span>
+            <div className="flex items-center gap-1.5">
               <Input
                 type="date"
                 className="h-9 w-[140px]"
                 value={searchDateFrom}
                 onChange={(e) => setSearchDateFrom(e.target.value)}
               />
-              <span className="text-muted-foreground">~</span>
+              <span className="text-muted-foreground/50 text-xs">~</span>
               <Input
                 type="date"
                 className="h-9 w-[140px]"
@@ -229,8 +229,8 @@ export default function MaterialStatusPage() {
             </div>
           </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">품목코드</Label>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목코드</span>
             <Input
               placeholder="품목코드"
               className="h-9 w-[140px]"
@@ -239,8 +239,8 @@ export default function MaterialStatusPage() {
             />
           </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">품목명</Label>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목명</span>
             <Input
               placeholder="품목명"
               className="h-9 w-[140px]"
@@ -251,14 +251,14 @@ export default function MaterialStatusPage() {
 
           <div className="flex-1" />
 
-          <div className="flex items-center gap-2">
+          <div className="flex items-end gap-2">
             <Button
               variant="outline"
               size="sm"
               className="h-9"
               onClick={handleResetSearch}
             >
-              <RotateCcw className="mr-2 h-4 w-4" />
+              <RotateCcw className="mr-1 h-4 w-4" />
               초기화
             </Button>
             <Button
@@ -268,24 +268,23 @@ export default function MaterialStatusPage() {
               disabled={workOrdersLoading}
             >
               {workOrdersLoading ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                <Loader2 className="mr-1 h-4 w-4 animate-spin" />
               ) : (
-                <Search className="mr-2 h-4 w-4" />
+                <Search className="mr-1 h-4 w-4" />
               )}
               검색
             </Button>
           </div>
-        </CardContent>
-      </Card>
+      </div>
 
       {/* 메인 콘텐츠 (좌우 분할) */}
-      <div className="flex-1 overflow-hidden rounded-lg border bg-background shadow-sm">
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
         <ResizablePanelGroup direction="horizontal">
           {/* 왼쪽: 작업지시 리스트 */}
           <ResizablePanel defaultSize={35} minSize={25}>
             <div className="flex h-full flex-col">
               {/* 패널 헤더 */}
-              <div className="flex items-center justify-between border-b bg-muted/10 p-3 shrink-0">
+              <div className="flex items-center justify-between border-b bg-muted/30 px-3 py-2.5 shrink-0">
                 <div className="flex items-center gap-2">
                   <Checkbox
                     checked={isAllChecked}
@@ -295,9 +294,9 @@ export default function MaterialStatusPage() {
                   <span className="text-sm font-semibold">작업지시 리스트</span>
                 </div>
                 <div className="flex items-center gap-2">
-                  <Badge variant="secondary" className="font-normal">
-                    {workOrders.length}
-                  </Badge>
+                  <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                    {workOrders.length}건
+                  </span>
                   <Button
                     size="sm"
                     className="h-8"
@@ -311,6 +310,9 @@ export default function MaterialStatusPage() {
                     )}
                     자재조회
                   </Button>
+                  <Button variant="ghost" size="sm" className="h-8" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="h-4 w-4" />
+                  </Button>
                 </div>
               </div>
 
@@ -320,80 +322,101 @@ export default function MaterialStatusPage() {
                   <div className="flex flex-col items-center justify-center py-12 text-center">
                     <Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
                     <p className="text-sm text-muted-foreground">
-                      작업지시를 조회하고 있습니다...
+                      작업지시를 조회하고 있어요...
                     </p>
                   </div>
                 ) : workOrders.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center py-12 text-center">
-                    <ClipboardList className="mb-3 h-10 w-10 text-muted-foreground/30" />
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Inbox className="h-10 w-10 text-muted-foreground/30" />
                     <p className="text-sm text-muted-foreground">
-                      작업지시가 없습니다
+                      조회된 작업지시가 없어요
                     </p>
                   </div>
                 ) : (
-                  workOrders.map((wo) => (
-                    <div
-                      key={wo.id}
-                      className={cn(
-                        "flex gap-3 rounded-lg border-2 p-3 transition-all cursor-pointer",
-                        "hover:border-primary hover:shadow-md hover:-translate-y-0.5",
-                        selectedWoId === wo.id
-                          ? "border-primary bg-primary/5 shadow-md"
-                          : "border-border"
-                      )}
-                      onClick={() => handleSelectWo(wo.id)}
-                    >
+                  ts.groupData(workOrders).map((wo) => {
+                    if ((wo as any)._isGroupSummary || (wo as any)._isGroupHeader) return null;
+                    return (
                       <div
-                        className="flex items-start pt-0.5"
-                        onClick={(e) => e.stopPropagation()}
+                        key={wo.id}
+                        className={cn(
+                          "flex gap-3 rounded-lg border p-3 transition-all cursor-pointer",
+                          "hover:border-primary/50 hover:shadow-sm",
+                          selectedWoId === wo.id
+                            ? "border-primary bg-primary/5 shadow-sm"
+                            : "border-border"
+                        )}
+                        onClick={() => handleSelectWo(wo.id)}
                       >
-                        <Checkbox
-                          checked={checkedWoIds.includes(wo.id)}
-                          onCheckedChange={(c) =>
-                            handleCheckWo(wo.id, c as boolean)
-                          }
-                        />
-                      </div>
-                      <div className="flex flex-1 flex-col gap-1.5">
-                        <div className="flex items-center gap-2">
-                          <span className="text-sm font-bold text-primary">
-                            {wo.plan_no || wo.work_order_no || `WO-${wo.id}`}
-                          </span>
-                          <span
-                            className={cn(
-                              "ml-auto rounded-md border px-2 py-0.5 text-[11px] font-semibold",
-                              getStatusStyle(wo.status)
+                        <div
+                          className="flex items-start pt-0.5"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Checkbox
+                            checked={checkedWoIds.includes(wo.id)}
+                            onCheckedChange={(c) =>
+                              handleCheckWo(wo.id, c as boolean)
+                            }
+                          />
+                        </div>
+                        <div className="flex flex-1 flex-col gap-1.5">
+                          <div className="flex items-center gap-2">
+                            {ts.isVisible("plan_no") && (
+                              <span className="text-sm font-bold text-primary">
+                                {wo.plan_no || wo.work_order_no || `WO-${wo.id}`}
+                              </span>
                             )}
-                          >
-                            {getStatusLabel(wo.status)}
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-1.5">
-                          <span className="text-sm font-semibold">
-                            {wo.item_name}
-                          </span>
-                          <span className="text-xs text-muted-foreground">
-                            ({wo.item_code})
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                          <span>수량:</span>
-                          <span className="font-semibold text-foreground">
-                            {Number(wo.plan_qty).toLocaleString()}개
-                          </span>
-                          <span className="mx-1">|</span>
-                          <span>일자:</span>
-                          <span className="font-semibold text-foreground">
-                            {wo.plan_date
-                              ? new Date(wo.plan_date)
-                                  .toISOString()
-                                  .slice(0, 10)
-                              : "-"}
-                          </span>
+                            {ts.isVisible("status") && (
+                              <span
+                                className={cn(
+                                  "ml-auto rounded-md border px-2 py-0.5 text-[11px] font-semibold",
+                                  getStatusStyle(wo.status)
+                                )}
+                              >
+                                {getStatusLabel(wo.status)}
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1.5">
+                            {ts.isVisible("item_name") && (
+                              <span className="text-sm font-semibold">
+                                {wo.item_name}
+                              </span>
+                            )}
+                            {ts.isVisible("item_code") && (
+                              <span className="text-xs text-muted-foreground">
+                                ({wo.item_code})
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                            {ts.isVisible("plan_qty") && (
+                              <>
+                                <span>수량:</span>
+                                <span className="font-semibold text-foreground">
+                                  {Number(wo.plan_qty).toLocaleString()}개
+                                </span>
+                              </>
+                            )}
+                            {ts.isVisible("plan_qty") && ts.isVisible("plan_date") && (
+                              <span className="mx-1">|</span>
+                            )}
+                            {ts.isVisible("plan_date") && (
+                              <>
+                                <span>일자:</span>
+                                <span className="font-semibold text-foreground">
+                                  {wo.plan_date
+                                    ? new Date(wo.plan_date)
+                                        .toISOString()
+                                        .slice(0, 10)
+                                    : "-"}
+                                </span>
+                              </>
+                            )}
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  ))
+                    );
+                  })
                 )}
               </div>
             </div>
@@ -405,21 +428,21 @@ export default function MaterialStatusPage() {
           <ResizablePanel defaultSize={65} minSize={35}>
             <div className="flex h-full flex-col">
               {/* 패널 헤더 */}
-              <div className="flex items-center gap-2 border-b bg-muted/10 p-3 shrink-0">
+              <div className="flex items-center gap-2 border-b bg-muted/30 px-3 py-2.5 shrink-0">
                 <Factory className="h-4 w-4 text-muted-foreground" />
                 <span className="text-sm font-semibold">원자재 재고 현황</span>
               </div>
 
               {/* 필터 */}
-              <div className="flex flex-wrap items-center gap-3 border-b bg-muted/5 px-4 py-3 shrink-0">
+              <div className="flex flex-wrap items-center gap-3 border-b bg-muted/30 px-4 py-2.5 shrink-0">
                 <Input
                   placeholder="원자재 검색"
-                  className="h-9 min-w-[150px] flex-1"
+                  className="h-8 min-w-[150px] flex-1 text-xs"
                   value={materialSearch}
                   onChange={(e) => setMaterialSearch(e.target.value)}
                 />
                 <Select value={warehouse} onValueChange={setWarehouse}>
-                  <SelectTrigger className="h-9 w-[200px]">
+                  <SelectTrigger className="h-8 w-[180px] text-xs">
                     <SelectValue placeholder="전체 창고" />
                   </SelectTrigger>
                   <SelectContent>
@@ -437,14 +460,14 @@ export default function MaterialStatusPage() {
                     ))}
                   </SelectContent>
                 </Select>
-                <label className="flex cursor-pointer items-center gap-2 text-sm font-medium">
+                <label className="flex cursor-pointer items-center gap-2 text-xs font-medium">
                   <Checkbox
                     checked={showShortageOnly}
                     onCheckedChange={(c) => setShowShortageOnly(c as boolean)}
                   />
                   <span>부족한 것만 보기</span>
                 </label>
-                <span className="ml-auto text-sm font-semibold text-muted-foreground">
+                <span className="ml-auto rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
                   {filteredMaterials.length}개 품목
                 </span>
               </div>
@@ -455,21 +478,21 @@ export default function MaterialStatusPage() {
                   <div className="flex flex-col items-center justify-center py-12 text-center">
                     <Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
                     <p className="text-sm text-muted-foreground">
-                      자재현황을 조회하고 있습니다...
+                      자재현황을 조회하고 있어요...
                     </p>
                   </div>
                 ) : materials.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center py-12 text-center">
-                    <Package className="mb-3 h-10 w-10 text-muted-foreground/30" />
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Inbox className="h-10 w-10 text-muted-foreground/30" />
                     <p className="text-sm text-muted-foreground">
                       작업지시를 선택하고 자재조회 버튼을 클릭해주세요
                     </p>
                   </div>
                 ) : filteredMaterials.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center py-12 text-center">
-                    <Package className="mb-3 h-10 w-10 text-muted-foreground/30" />
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Package className="h-10 w-10 text-muted-foreground/30" />
                     <p className="text-sm text-muted-foreground">
-                      조회된 원자재가 없습니다
+                      조회된 원자재가 없어요
                     </p>
                   </div>
                 ) : (
@@ -488,10 +511,10 @@ export default function MaterialStatusPage() {
                       <div
                         key={material.code}
                         className={cn(
-                          "rounded-lg border-2 p-3 transition-all hover:shadow-md hover:-translate-y-0.5",
+                          "rounded-lg border p-3 transition-all hover:shadow-sm",
                           isShortage
-                            ? "border-destructive/40 bg-destructive/2"
-                            : "border-emerald-300/50 bg-emerald-50/20"
+                            ? "border-destructive/30 bg-destructive/5"
+                            : "border-primary/15 bg-primary/5"
                         )}
                       >
                         {/* 메인 정보 라인 */}
@@ -508,7 +531,7 @@ export default function MaterialStatusPage() {
                           <span className="text-xs text-muted-foreground">
                             필요:
                           </span>
-                          <span className="text-xs font-semibold text-blue-600">
+                          <span className="text-xs font-semibold text-primary">
                             {material.required.toLocaleString()}
                             {material.unit}
                           </span>
@@ -540,7 +563,7 @@ export default function MaterialStatusPage() {
                               "text-xs font-semibold",
                               isShortage
                                 ? "text-destructive"
-                                : "text-emerald-600"
+                                : "text-primary"
                             )}
                           >
                             {Math.abs(shortage).toLocaleString()}
@@ -556,7 +579,7 @@ export default function MaterialStatusPage() {
                               부족
                             </span>
                           ) : (
-                            <span className="ml-auto inline-flex items-center gap-1 rounded-md border border-emerald-500 bg-emerald-500/10 px-2 py-0.5 text-[11px] font-semibold text-emerald-600">
+                            <span className="ml-auto inline-flex items-center gap-1 rounded-md border border-primary bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary">
                               <CheckCircle2 className="h-3 w-3" />
                               충분
                             </span>
@@ -592,6 +615,15 @@ export default function MaterialStatusPage() {
           </ResizablePanel>
         </ResizablePanelGroup>
       </div>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_7/logistics/outbound/page.tsx b/frontend/app/(main)/COMPANY_7/logistics/outbound/page.tsx
index b834b76a..c1ffbd40 100644
--- a/frontend/app/(main)/COMPANY_7/logistics/outbound/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/logistics/outbound/page.tsx
@@ -18,7 +18,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -31,23 +31,37 @@ import {
   Search,
   Plus,
   Trash2,
-  RotateCcw,
   Loader2,
   PackageOpen,
   X,
   Save,
   ChevronRight,
   ChevronLeft,
+  ChevronDown,
   ChevronsLeft,
   ChevronsRight,
+  Inbox,
+  Settings2,
+  Filter,
+  Check,
+  ArrowUp,
+  ArrowDown,
 } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+// API: /outbound/*
 import {
   getOutboundList,
   createOutbound,
+  updateOutbound,
   deleteOutbound,
   generateOutboundNumber,
   getOutboundWarehouses,
+  getOutboundLocations,
   getShipmentInstructionSources,
   getPurchaseOrderSources,
   getItemSources,
@@ -55,25 +69,26 @@ import {
   type ShipmentInstructionSource,
   type PurchaseOrderSource,
   type ItemSource,
+  type LocationOption,
   type WarehouseOption,
 } from "@/lib/api/outbound";
 
 // 출고유형 옵션
 const OUTBOUND_TYPES = [
-  { value: "판매출고", label: "판매출고", color: "bg-blue-100 text-blue-800" },
-  { value: "반품출고", label: "반품출고", color: "bg-pink-100 text-pink-800" },
-  { value: "기타출고", label: "기타출고", color: "bg-gray-100 text-gray-800" },
+  { value: "판매출고", label: "판매출고", color: "bg-primary/10 text-primary" },
+  { value: "반품출고", label: "반품출고", color: "bg-destructive/10 text-destructive" },
+  { value: "기타출고", label: "기타출고", color: "bg-muted text-muted-foreground" },
 ];
 
 const OUTBOUND_STATUS_OPTIONS = [
-  { value: "대기", label: "대기", color: "bg-amber-100 text-amber-800" },
-  { value: "출고완료", label: "출고완료", color: "bg-emerald-100 text-emerald-800" },
-  { value: "부분출고", label: "부분출고", color: "bg-amber-100 text-amber-800" },
-  { value: "출고취소", label: "출고취소", color: "bg-red-100 text-red-800" },
+  { value: "대기", label: "대기", color: "bg-secondary text-secondary-foreground" },
+  { value: "출고완료", label: "출고완료", color: "bg-primary/10 text-primary" },
+  { value: "부분출고", label: "부분출고", color: "bg-accent text-accent-foreground" },
+  { value: "출고취소", label: "출고취소", color: "bg-destructive/10 text-destructive" },
 ];
 
-const getTypeColor = (type: string) => OUTBOUND_TYPES.find((t) => t.value === type)?.color || "bg-gray-100 text-gray-800";
-const getStatusColor = (status: string) => OUTBOUND_STATUS_OPTIONS.find((s) => s.value === status)?.color || "bg-gray-100 text-gray-800";
+const getTypeColor = (type: string) => OUTBOUND_TYPES.find((t) => t.value === type)?.color || "bg-muted text-muted-foreground";
+const getStatusColor = (status: string) => OUTBOUND_STATUS_OPTIONS.find((s) => s.value === status)?.color || "bg-muted text-muted-foreground";
 
 // 소스 테이블 한글명 매핑
 const SOURCE_TYPE_LABEL: Record<string, string> = {
@@ -82,6 +97,144 @@ const SOURCE_TYPE_LABEL: Record<string, string> = {
   item_info: "품목",
 };
 
+const GRID_COLUMNS = [
+  { key: "outbound_number", label: "출고번호" },
+  { key: "outbound_type", label: "출고유형" },
+  { key: "outbound_date", label: "출고일" },
+  { key: "reference_number", label: "참조번호" },
+  { key: "source_type", label: "데이터출처" },
+  { key: "customer_name", label: "거래처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "outbound_qty", label: "출고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+  { key: "warehouse_name", label: "창고" },
+  { key: "outbound_status", label: "출고상태" },
+  { key: "remark", label: "비고" },
+];
+
+// 마스터 헤더 레이아웃 (출고번호 뒤)
+const MASTER_BODY_LAYOUT = [
+  { key: "outbound_type", label: "출고유형", colSpan: 1 },
+  { key: "outbound_date", label: "출고일", colSpan: 1 },
+  { key: "reference_number", label: "참조번호", colSpan: 1 },
+  { key: "customer_name", label: "거래처", colSpan: 1 },
+  { key: "warehouse_name", label: "창고", colSpan: 1 },
+  { key: "outbound_status", label: "출고상태", colSpan: 1 },
+  { key: "memo", label: "비고", colSpan: 1 },
+];
+
+// 디테일 헤더 컬럼
+const DETAIL_HEADER_COLS = [
+  { key: "source_type", label: "출처" },
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "specification", label: "규격" },
+  { key: "outbound_qty", label: "출고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+];
+
+// 마스터 필드 키 목록 (필터 분류용)
+const MASTER_KEYS = new Set(["outbound_number", ...MASTER_BODY_LAYOUT.map((c) => c.key)]);
+
+// 디테일 필드 키 매핑 (GRID_COLUMNS key → DETAIL_HEADER_COLS key)
+const DETAIL_KEY_MAP: Record<string, string> = {
+  source_type: "source_type",
+  item_number: "item_code",
+  item_name: "item_name",
+  spec: "specification",
+  outbound_qty: "outbound_qty",
+  unit_price: "unit_price",
+  total_amount: "total_amount",
+};
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 // 선택된 소스 아이템 (등록 모달에서 사용)
 interface SelectedSourceItem {
   key: string;
@@ -102,17 +255,45 @@ interface SelectedSourceItem {
 }
 
 export default function OutboundPage() {
+  const ts = useTableSettings("c16-outbound", "outbound_mng", GRID_COLUMNS);
+
+  // ts.visibleColumns 기반 마스터/디테일 컬럼 계산
+  const visibleMasterLayout = useMemo(() => {
+    const ordered: typeof MASTER_BODY_LAYOUT = [];
+    for (const vc of ts.visibleColumns) {
+      const m = MASTER_BODY_LAYOUT.find((ml) => ml.key === vc.key);
+      if (m) ordered.push(m);
+    }
+    return ordered.length > 0 ? ordered : MASTER_BODY_LAYOUT;
+  }, [ts.visibleColumns]);
+
+  const visibleDetailCols = useMemo(() => {
+    const ordered: typeof DETAIL_HEADER_COLS = [];
+    for (const vc of ts.visibleColumns) {
+      const detailKey = DETAIL_KEY_MAP[vc.key];
+      if (detailKey) {
+        const d = DETAIL_HEADER_COLS.find((dc) => dc.key === detailKey);
+        if (d) ordered.push(d);
+      }
+    }
+    return ordered.length > 0 ? ordered : DETAIL_HEADER_COLS;
+  }, [ts.visibleColumns]);
+
+  const TOTAL_COLS = 3 + visibleMasterLayout.length;
+
   // 목록 데이터
   const [data, setData] = useState<OutboundItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [checkedIds, setCheckedIds] = useState<string[]>([]);
 
   // 검색 필터
-  const [searchType, setSearchType] = useState("all");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 마스터-디테일 그룹 테이블 state
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+  const [closingOrders, setClosingOrders] = useState<Set<string>>(new Set());
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
 
   // 등록 모달
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -126,6 +307,10 @@ export default function OutboundPage() {
   const [selectedItems, setSelectedItems] = useState<SelectedSourceItem[]>([]);
   const [saving, setSaving] = useState(false);
 
+  // 수정 모드 (등록 모달을 재활용)
+  const [editMode, setEditMode] = useState(false);
+  const [editItemIds, setEditItemIds] = useState<string[]>([]);
+
   // 소스 데이터
   const [sourceKeyword, setSourceKeyword] = useState("");
   const [sourceLoading, setSourceLoading] = useState(false);
@@ -133,38 +318,37 @@ export default function OutboundPage() {
   const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrderSource[]>([]);
   const [items, setItems] = useState<ItemSource[]>([]);
   const [warehouses, setWarehouses] = useState<WarehouseOption[]>([]);
+  const [locations, setLocations] = useState<LocationOption[]>([]);
 
   // 소스 데이터 페이징 (클라이언트 사이드)
   const [sourcePage, setSourcePage] = useState(1);
   const [sourcePageSize, setSourcePageSize] = useState(20);
 
-  // 날짜 초기화
-  useEffect(() => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-  }, []);
-
   // 목록 조회
   const fetchList = useCallback(async () => {
     setLoading(true);
     try {
-      const res = await getOutboundList({
-        outbound_type: searchType !== "all" ? searchType : undefined,
-        outbound_status: searchStatus !== "all" ? searchStatus : undefined,
-        search_keyword: searchKeyword || undefined,
-        date_from: searchDateFrom || undefined,
-        date_to: searchDateTo || undefined,
-      });
+      const params: Record<string, string | undefined> = {};
+      for (const f of searchFilters) {
+        if (!f.value) continue;
+        if (f.columnName === "outbound_type") params.outbound_type = f.value;
+        else if (f.columnName === "outbound_status") params.outbound_status = f.value;
+        else if (f.columnName === "outbound_date" && f.operator === "between") {
+          const [from, to] = f.value.split("~").map((s) => s.trim());
+          if (from) params.date_from = from;
+          if (to) params.date_to = to;
+        } else {
+          params.search_keyword = f.value;
+        }
+      }
+      const res = await getOutboundList(params);
       if (res.success) setData(res.data);
     } catch {
       // ignore
     } finally {
       setLoading(false);
     }
-  }, [searchType, searchStatus, searchKeyword, searchDateFrom, searchDateTo]);
+  }, [searchFilters]);
 
   useEffect(() => {
     fetchList();
@@ -182,26 +366,146 @@ export default function OutboundPage() {
     })();
   }, []);
 
-  // 검색 초기화
-  const handleReset = () => {
-    setSearchType("all");
-    setSearchStatus("all");
-    setSearchKeyword("");
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
+  // --- 마스터-디테일 그룹핑, 필터, 정렬 ---
+
+  // outbound_number 기준 그룹핑 + 필터 + 정렬
+  const filteredGroups = useMemo(() => {
+    // 1차: outbound_number 기준 그룹핑
+    const allGroups: Record<string, { master: OutboundItem; details: OutboundItem[] }> = {};
+    for (const row of data) {
+      const key = row.outbound_number || "_no_number";
+      if (!allGroups[key]) {
+        allGroups[key] = { master: row, details: [] };
+      }
+      allGroups[key].details.push(row);
+    }
+
+    // 마스터 필터 / 디테일 필터 분리
+    const masterFilters: Record<string, Set<string>> = {};
+    const detailFilters: Record<string, Set<string>> = {};
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      if (MASTER_KEYS.has(colKey)) masterFilters[colKey] = values;
+      else detailFilters[colKey] = values;
+    }
+
+    // 2차: 마스터 필터 적용 (그룹 단위)
+    let entries = Object.entries(allGroups);
+    if (Object.keys(masterFilters).length > 0) {
+      entries = entries.filter(([, group]) =>
+        Object.entries(masterFilters).every(([colKey, values]) => {
+          const raw = (group.master as any)?.[colKey] ?? "";
+          return values.has(String(raw));
+        })
+      );
+    }
+
+    // 3차: 디테일 필터 적용 (행 단위)
+    if (Object.keys(detailFilters).length > 0) {
+      entries = entries
+        .map(([outNo, group]) => {
+          const filtered = group.details.filter((row) =>
+            Object.entries(detailFilters).every(([colKey, values]) => {
+              let cellVal = (row as any)[colKey] != null ? String((row as any)[colKey]) : "";
+              if (colKey === "source_type") cellVal = SOURCE_TYPE_LABEL[cellVal] || cellVal;
+              return values.has(cellVal);
+            })
+          );
+          return [outNo, { ...group, details: filtered }] as [string, typeof group];
+        })
+        .filter(([, group]) => group.details.length > 0);
+    }
+
+    // 4차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      if (MASTER_KEYS.has(key)) {
+        entries.sort(([, a], [, b]) => {
+          const av = (a.master as any)?.[key] ?? "";
+          const bv = (b.master as any)?.[key] ?? "";
+          const na = Number(av); const nb = Number(bv);
+          if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+          return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+        });
+      } else {
+        entries.forEach(([, group]) => {
+          group.details.sort((a, b) => {
+            let av: any = (a as any)[key] ?? "";
+            let bv: any = (b as any)[key] ?? "";
+            if (key === "source_type") { av = SOURCE_TYPE_LABEL[av] || av; bv = SOURCE_TYPE_LABEL[bv] || bv; }
+            const na = Number(av); const nb = Number(bv);
+            if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+            return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+          });
+        });
+      }
+    }
+
+    return Object.fromEntries(entries);
+  }, [data, headerFilters, sortState]);
+
+  // 마스터 컬럼별 고유값 (헤더 필터용)
+  const masterUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    const seenMasters = new Map<string, OutboundItem>();
+    data.forEach((row) => {
+      if (row.outbound_number && !seenMasters.has(row.outbound_number)) {
+        seenMasters.set(row.outbound_number, row);
+      }
+    });
+    const masters = Array.from(seenMasters.values());
+    for (const col of [{ key: "outbound_number", label: "출고번호" }, ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label }))]) {
+      const values = new Set<string>();
+      masters.forEach((m) => {
+        const val = (m as any)?.[col.key];
+        if (val !== null && val !== undefined && val !== "") values.add(String(val));
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 디테일 컬럼별 고유값 (디테일 서브헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of DETAIL_HEADER_COLS) {
+      const values = new Set<string>();
+      data.forEach((row) => {
+        let val = (row as any)[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "source_type") val = SOURCE_TYPE_LABEL[val] || val;
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
   };
 
-  // 체크박스
-  const allChecked = data.length > 0 && checkedIds.length === data.length;
-  const toggleCheckAll = () => {
-    setCheckedIds(allChecked ? [] : data.map((d) => d.id));
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
   };
-  const toggleCheck = (id: string) => {
-    setCheckedIds((prev) =>
-      prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
     );
   };
 
@@ -243,6 +547,8 @@ export default function OutboundPage() {
 
   const openRegisterModal = async () => {
     const defaultType = "판매출고";
+    setEditMode(false);
+    setEditItemIds([]);
     setModalOutboundType(defaultType);
     setModalOutboundDate(new Date().toISOString().split("T")[0]);
     setModalWarehouse("");
@@ -267,6 +573,45 @@ export default function OutboundPage() {
     }
   };
 
+  // 수정 모달 열기 (같은 출고번호 묶어서)
+  const openEditModal = (row: OutboundItem) => {
+    const outNo = row.outbound_number;
+    const grouped = data.filter((d) => d.outbound_number === outNo);
+    const first = grouped[0] || row;
+
+    setEditMode(true);
+    setEditItemIds(grouped.map((g) => g.id));
+    setModalOutboundNo(outNo);
+    setModalOutboundType(first.outbound_type || "판매출고");
+    setModalOutboundDate(first.outbound_date ? first.outbound_date.slice(0, 10) : "");
+    setModalWarehouse(first.warehouse_code || "");
+    setModalLocation(first.location_code || "");
+    setModalManager(first.manager_id || "");
+    setModalMemo(first.memo || "");
+    setSelectedItems(
+      grouped.map((g) => ({
+        key: g.id,
+        outbound_type: g.outbound_type || "",
+        reference_number: g.reference_number || "",
+        customer_code: g.customer_code || "",
+        customer_name: g.customer_name || "",
+        item_number: g.item_code || "",
+        item_name: g.item_name || "",
+        spec: g.specification || "",
+        material: g.material || "",
+        unit: g.unit || "",
+        outbound_qty: Number(g.outbound_qty) || 0,
+        unit_price: Number(g.unit_price) || 0,
+        total_amount: Number(g.total_amount) || 0,
+        source_type: g.source_type || "",
+        source_id: (g as any).source_id || "",
+      }))
+    );
+    setSourceKeyword("");
+    setIsModalOpen(true);
+    loadSourceData(first.outbound_type || "판매출고");
+  };
+
   const searchSourceData = useCallback(async () => {
     setSourcePage(1);
     await loadSourceData(modalOutboundType, sourceKeyword || undefined);
@@ -439,44 +784,102 @@ export default function OutboundPage() {
 
     setSaving(true);
     try {
-      const res = await createOutbound({
-        outbound_number: modalOutboundNo,
-        outbound_date: modalOutboundDate,
-        warehouse_code: modalWarehouse || undefined,
-        location_code: modalLocation || undefined,
-        manager_id: modalManager || undefined,
-        memo: modalMemo || undefined,
-        items: selectedItems.map((item) => ({
-          outbound_type: item.outbound_type,
-          reference_number: item.reference_number,
-          customer_code: item.customer_code,
-          customer_name: item.customer_name,
-          item_code: item.item_number,
-          item_name: item.item_name,
-          spec: item.spec,
-          material: item.material,
-          unit: item.unit,
-          outbound_qty: item.outbound_qty,
-          unit_price: item.unit_price,
-          total_amount: item.total_amount,
-          source_type: item.source_type,
-          source_id: item.source_id,
-          outbound_status: "출고완료",
-        })),
-      });
+      if (editMode) {
+        const currentKeys = new Set(selectedItems.map((i) => i.key));
+        // 삭제: editItemIds에 있지만 selectedItems에 없는 것
+        const toDelete = editItemIds.filter((id) => !currentKeys.has(id));
+        // 수정: editItemIds에도 있고 selectedItems에도 있는 것
+        const toUpdate = selectedItems.filter((i) => editItemIds.includes(i.key));
+        // 추가: editItemIds에 없는 새 아이템
+        const toCreate = selectedItems.filter((i) => !editItemIds.includes(i.key));
 
-      if (res.success) {
-        alert(res.message || "출고 등록 완료");
+        await Promise.all([
+          ...toDelete.map((id) => deleteOutbound(id)),
+          ...toUpdate.map((item) =>
+            updateOutbound(item.key, {
+              outbound_date: modalOutboundDate,
+              outbound_qty: item.outbound_qty,
+              unit_price: item.unit_price,
+              total_amount: item.total_amount,
+              warehouse_code: modalWarehouse || undefined,
+              location_code: modalLocation || undefined,
+              manager_id: modalManager || undefined,
+              memo: modalMemo || undefined,
+            } as any)
+          ),
+          ...(toCreate.length > 0
+            ? [createOutbound({
+                outbound_number: modalOutboundNo,
+                outbound_date: modalOutboundDate,
+                warehouse_code: modalWarehouse || undefined,
+                location_code: modalLocation || undefined,
+                manager_id: modalManager || undefined,
+                memo: modalMemo || undefined,
+                items: toCreate.map((item) => ({
+                  outbound_type: item.outbound_type,
+                  reference_number: item.reference_number,
+                  customer_code: item.customer_code,
+                  customer_name: item.customer_name,
+                  item_code: item.item_number,
+                  item_name: item.item_name,
+                  spec: item.spec,
+                  material: item.material,
+                  unit: item.unit,
+                  outbound_qty: item.outbound_qty,
+                  unit_price: item.unit_price,
+                  total_amount: item.total_amount,
+                  source_type: item.source_type,
+                  source_id: item.source_id,
+                  outbound_status: "출고완료",
+                })),
+              })]
+            : []),
+        ]);
+        toast.success("출고 정보를 수정했어요");
         setIsModalOpen(false);
         fetchList();
+      } else {
+        const res = await createOutbound({
+          outbound_number: modalOutboundNo,
+          outbound_date: modalOutboundDate,
+          warehouse_code: modalWarehouse || undefined,
+          location_code: modalLocation || undefined,
+          manager_id: modalManager || undefined,
+          memo: modalMemo || undefined,
+          items: selectedItems.map((item) => ({
+            outbound_type: item.outbound_type,
+            reference_number: item.reference_number,
+            customer_code: item.customer_code,
+            customer_name: item.customer_name,
+            item_code: item.item_number,
+            item_name: item.item_name,
+            spec: item.spec,
+            material: item.material,
+            unit: item.unit,
+            outbound_qty: item.outbound_qty,
+            unit_price: item.unit_price,
+            total_amount: item.total_amount,
+            source_type: item.source_type,
+            source_id: item.source_id,
+            outbound_status: "출고완료",
+          })),
+        });
+
+        if (res.success) {
+          toast.success(res.message || "출고 등록 완료");
+          setIsModalOpen(false);
+          fetchList();
+        }
       }
     } catch {
-      alert("출고 등록 중 오류가 발생했습니다.");
+      toast.error(editMode ? "수정에 실패했어요" : "출고 등록 중 오류가 발생했습니다.");
     } finally {
       setSaving(false);
     }
   };
 
+
+
   // 합계 계산
   const totalSummary = useMemo(() => {
     return {
@@ -487,228 +890,350 @@ export default function OutboundPage() {
   }, [selectedItems]);
 
   return (
-    <div className="flex h-full flex-col gap-4 p-4">
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
       {/* 검색 영역 */}
-      <div className="flex flex-wrap items-center gap-2 rounded-lg border bg-card p-4">
-        <Select value={searchType} onValueChange={setSearchType}>
-          <SelectTrigger className="h-9 w-[130px] text-xs">
-            <SelectValue placeholder="출고유형" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">전체 유형</SelectItem>
-            {OUTBOUND_TYPES.map((t) => (
-              <SelectItem key={t.value} value={t.value}>
-                {t.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Select value={searchStatus} onValueChange={setSearchStatus}>
-          <SelectTrigger className="h-9 w-[130px] text-xs">
-            <SelectValue placeholder="출고상태" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">전체 상태</SelectItem>
-            {OUTBOUND_STATUS_OPTIONS.map((s) => (
-              <SelectItem key={s.value} value={s.value}>
-                {s.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Input
-          placeholder="출고번호 / 품목명 / 참조번호 검색"
-          value={searchKeyword}
-          onChange={(e) => setSearchKeyword(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && fetchList()}
-          className="h-9 w-[240px] text-xs"
-        />
-
-        <div className="flex items-center gap-1">
-          <Input
-            type="date"
-            value={searchDateFrom}
-            onChange={(e) => setSearchDateFrom(e.target.value)}
-            className="h-9 w-[140px] text-xs"
-          />
-          <span className="text-muted-foreground text-xs">~</span>
-          <Input
-            type="date"
-            value={searchDateTo}
-            onChange={(e) => setSearchDateTo(e.target.value)}
-            className="h-9 w-[140px] text-xs"
-          />
-        </div>
-
-        <Button size="sm" onClick={fetchList} className="h-9">
-          <Search className="mr-1 h-4 w-4" />
-          조회
-        </Button>
-        <Button size="sm" variant="outline" onClick={handleReset} className="h-9">
-          <RotateCcw className="mr-1 h-4 w-4" />
-          초기화
-        </Button>
-
-        <div className="ml-auto flex gap-2">
-          <Button size="sm" onClick={openRegisterModal} className="h-9">
-            <Plus className="mr-1 h-4 w-4" />
-            출고 등록
-          </Button>
-          <Button
-            size="sm"
-            variant="destructive"
-            onClick={handleDelete}
-            disabled={checkedIds.length === 0}
-            className="h-9"
-          >
-            <Trash2 className="mr-1 h-4 w-4" />
-            삭제 ({checkedIds.length})
-          </Button>
-        </div>
-      </div>
+      <DynamicSearchFilter
+        tableName="outbound_mng"
+        filterId="c16-outbound"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={data.length}
+      />
 
       {/* 출고 목록 테이블 */}
-      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
-        <div className="flex items-center justify-between border-b px-4 py-3">
+      <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+        {/* 패널 헤더 */}
+        <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2.5 shrink-0">
           <div className="flex items-center gap-2">
-            <PackageOpen className="text-muted-foreground h-5 w-5" />
-            <h3 className="text-base font-semibold">출고 목록</h3>
-            <span className="text-muted-foreground text-sm">
-              총 {data.length}건
+            <PackageOpen className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-semibold">출고 목록</span>
+            <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+              {data.length}건
             </span>
           </div>
+          <div className="flex gap-2">
+            <Button size="sm" onClick={openRegisterModal} className="h-8">
+              <Plus className="mr-1 h-3.5 w-3.5" />
+              출고 등록
+            </Button>
+            <Button
+              size="sm"
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={checkedIds.length === 0}
+              className="h-8"
+            >
+              <Trash2 className="mr-1 h-3.5 w-3.5" />
+              삭제 ({checkedIds.length})
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-4 w-4" />
+            </Button>
+          </div>
         </div>
 
-        <div className="h-[calc(100%-52px)] overflow-auto">
-          <Table>
-            <TableHeader>
-              <TableRow className="bg-muted/50">
-                <TableHead className="w-[40px] text-center">
+        <div className="h-full overflow-auto">
+          <Table style={{ minWidth: `${216 + visibleMasterLayout.length * 120}px` }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "36px" }} />
+              <col style={{ width: "140px" }} />
+              {visibleMasterLayout.map((col) => (
+                <col key={col.key} style={{ width: ts.getWidth(col.key) ? `${ts.getWidth(col.key)}px` : undefined }} />
+              ))}
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
                   <Checkbox
-                    checked={allChecked}
-                    onCheckedChange={toggleCheckAll}
+                    checked={(() => {
+                      const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
                   />
                 </TableHead>
-                <TableHead className="w-[130px]">출고번호</TableHead>
-                <TableHead className="w-[90px]">출고유형</TableHead>
-                <TableHead className="w-[100px]">출고일</TableHead>
-                <TableHead className="w-[120px]">참조번호</TableHead>
-                <TableHead className="w-[80px]">데이터출처</TableHead>
-                <TableHead className="w-[120px]">거래처</TableHead>
-                <TableHead className="w-[100px]">품목코드</TableHead>
-                <TableHead className="min-w-[150px]">품목명</TableHead>
-                <TableHead className="w-[80px]">규격</TableHead>
-                <TableHead className="w-[80px] text-right">출고수량</TableHead>
-                <TableHead className="w-[90px] text-right">단가</TableHead>
-                <TableHead className="w-[100px] text-right">금액</TableHead>
-                <TableHead className="w-[100px]">창고</TableHead>
-                <TableHead className="w-[90px] text-center">출고상태</TableHead>
-                <TableHead className="w-[100px]">비고</TableHead>
+                <TableHead />
+                {/* 출고번호 */}
+                <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                  <div className="inline-flex items-center gap-1">
+                    <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort("outbound_number")}>
+                      <span className="truncate">출고번호</span>
+                      {sortState?.key === "outbound_number" && (
+                        sortState.direction === "asc"
+                          ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                          : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                      )}
+                    </div>
+                    {(masterUniqueValues["outbound_number"] || []).length > 0 && (
+                      <HeaderFilterPopover
+                        colKey="outbound_number" colLabel="출고번호"
+                        uniqueValues={masterUniqueValues["outbound_number"] || []}
+                        filterValues={headerFilters["outbound_number"] || new Set<string>()}
+                        onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                      />
+                    )}
+                  </div>
+                </TableHead>
+                {/* 마스터 필드 헤더 (ts.visibleColumns 순서) */}
+                {visibleMasterLayout.map((col) => (
+                  <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                    <div className="inline-flex items-center gap-1">
+                      <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                        <span className="truncate">{col.label}</span>
+                        {sortState?.key === col.key && (
+                          sortState.direction === "asc"
+                            ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                            : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                        )}
+                      </div>
+                      {(masterUniqueValues[col.key] || []).length > 0 && (
+                        <HeaderFilterPopover
+                          colKey={col.key} colLabel={col.label}
+                          uniqueValues={masterUniqueValues[col.key] || []}
+                          filterValues={headerFilters[col.key] || new Set<string>()}
+                          onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                        />
+                      )}
+                    </div>
+                  </TableHead>
+                ))}
               </TableRow>
             </TableHeader>
             <TableBody>
               {loading ? (
                 <TableRow>
-                  <TableCell colSpan={16} className="h-40 text-center">
-                    <Loader2 className="mx-auto h-6 w-6 animate-spin" />
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
                   </TableCell>
                 </TableRow>
-              ) : data.length === 0 ? (
+              ) : Object.keys(filteredGroups).length === 0 ? (
                 <TableRow>
-                  <TableCell
-                    colSpan={16}
-                    className="text-muted-foreground h-40 text-center"
-                  >
-                    <div className="flex flex-col items-center gap-2">
-                      <PackageOpen className="h-10 w-10 opacity-30" />
-                      <p>등록된 출고 내역이 없습니다</p>
-                      <p className="text-xs">
-                        &apos;출고 등록&apos; 버튼을 클릭하여 출고를 추가하세요
-                      </p>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <PackageOpen className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 출고 내역이 없어요</span>
                     </div>
                   </TableCell>
                 </TableRow>
               ) : (
-                data.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    className={cn(
-                      "cursor-pointer transition-colors",
-                      checkedIds.includes(row.id) && "bg-primary/5"
-                    )}
-                    onClick={() => toggleCheck(row.id)}
-                  >
-                    <TableCell
-                      className="text-center"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Checkbox
-                        checked={checkedIds.includes(row.id)}
-                        onCheckedChange={() => toggleCheck(row.id)}
-                      />
-                    </TableCell>
-                    <TableCell className="max-w-[130px] truncate font-medium" title={row.outbound_number}>
-                      {row.outbound_number}
-                    </TableCell>
-                    <TableCell>
-                      <Badge
-                        variant="outline"
-                        className={cn("text-[11px]", getTypeColor(row.outbound_type))}
-                      >
-                        {row.outbound_type || "-"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.outbound_date
-                        ? new Date(row.outbound_date).toLocaleDateString("ko-KR")
-                        : "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.reference_number || "-"}>
-                      {row.reference_number || "-"}
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.source_type
-                        ? SOURCE_TYPE_LABEL[row.source_type] || row.source_type
-                        : "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.customer_name || "-"}>
-                      {row.customer_name || "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[130px] truncate text-xs" title={row.item_code || "-"}>
-                      {row.item_code || "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[150px] truncate text-xs" title={row.item_name || "-"}>{row.item_name || "-"}</TableCell>
-                    <TableCell className="max-w-[100px] truncate text-xs" title={row.specification || "-"}>{row.specification || "-"}</TableCell>
-                    <TableCell className="text-right text-xs font-semibold">
-                      {Number(row.outbound_qty || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-right text-xs">
-                      {Number(row.unit_price || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-right text-xs font-semibold">
-                      {Number(row.total_amount || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.warehouse_name || row.warehouse_code || "-"}
-                    </TableCell>
-                    <TableCell className="text-center">
-                      <Badge
-                        variant="outline"
+                Object.entries(filteredGroups).map(([outboundNo, group]) => {
+                  const isExpanded = expandedOrders.has(outboundNo);
+                  const detailIds = group.details.map((d) => d.id);
+                  const allDetailChecked = detailIds.length > 0 && detailIds.every((id) => checkedIds.includes(id));
+                  const someDetailChecked = detailIds.some((id) => checkedIds.includes(id));
+                  const master = group.master;
+                  return (
+                    <React.Fragment key={outboundNo}>
+                      {/* 마스터 행 */}
+                      <TableRow
+                        style={{ borderTop: "2px solid hsl(var(--border))" }}
                         className={cn(
-                          "text-[11px]",
-                          getStatusColor(row.outbound_status)
+                          "cursor-pointer border-l-[3px] border-l-transparent font-semibold tree-master-row",
+                          allDetailChecked && "border-l-primary bg-primary/5"
                         )}
+                        onClick={() => {
+                          if (expandedOrders.has(outboundNo)) {
+                            setClosingOrders((prev) => new Set(prev).add(outboundNo));
+                            setTimeout(() => {
+                              setExpandedOrders((prev) => { const next = new Set(prev); next.delete(outboundNo); return next; });
+                              setClosingOrders((prev) => { const next = new Set(prev); next.delete(outboundNo); return next; });
+                            }, 200);
+                          } else {
+                            setExpandedOrders((prev) => new Set(prev).add(outboundNo));
+                          }
+                        }}
+                        onDoubleClick={() => openEditModal(group.details[0])}
                       >
-                        {row.outbound_status || "-"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.memo || "-"}>
-                      {row.memo || "-"}
-                    </TableCell>
-                  </TableRow>
-                ))
+                        <TableCell
+                          className="text-center cursor-pointer"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setCheckedIds((prev) => {
+                              if (allDetailChecked) return prev.filter((id) => !detailIds.includes(id));
+                              return [...new Set([...prev, ...detailIds])];
+                            });
+                          }}
+                        >
+                          <Checkbox
+                            checked={allDetailChecked}
+                            data-state={someDetailChecked && !allDetailChecked ? "indeterminate" : undefined}
+                            onCheckedChange={() => {}}
+                          />
+                        </TableCell>
+                        <TableCell className="text-center">
+                          {isExpanded
+                            ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            : <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          }
+                        </TableCell>
+                        {/* 출고번호 */}
+                        <TableCell className="font-mono whitespace-nowrap">
+                          {outboundNo}
+                          <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
+                        </TableCell>
+                        {/* 마스터 필드 (ts.visibleColumns 순서) */}
+                        {visibleMasterLayout.map((col) => {
+                          switch (col.key) {
+                            case "outbound_type": return (
+                              <TableCell key={col.key}>
+                                <Badge variant="outline" className={cn("text-[11px]", getTypeColor(master.outbound_type))}>
+                                  {master.outbound_type || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "outbound_date": return (
+                              <TableCell key={col.key} className="whitespace-nowrap text-[13px]">
+                                {master.outbound_date ? new Date(master.outbound_date).toLocaleDateString("ko-KR") : "-"}
+                              </TableCell>
+                            );
+                            case "reference_number": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.reference_number || ""}</span>
+                              </TableCell>
+                            );
+                            case "customer_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.customer_name || ""}</span>
+                              </TableCell>
+                            );
+                            case "warehouse_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
+                              </TableCell>
+                            );
+                            case "outbound_status": return (
+                              <TableCell key={col.key}>
+                                <Badge variant="outline" className={cn("text-[11px]", getStatusColor(master.outbound_status))}>
+                                  {master.outbound_status || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "memo": return (
+                              <TableCell key={col.key} className="text-muted-foreground">
+                                <span className="block truncate max-w-[120px]">{master.memo || ""}</span>
+                              </TableCell>
+                            );
+                            default: return <TableCell key={col.key} className="text-[13px]">{(master as any)[col.key] ?? ""}</TableCell>;
+                          }
+                        })}
+                      </TableRow>
+
+                      {/* 디테일 서브 헤더 (펼쳤을 때만) */}
+                      {isExpanded && (
+                        <TableRow
+                          className={cn(
+                            "border-l-[3px] border-l-primary/30 bg-muted/60",
+                            closingOrders.has(outboundNo) ? "tree-detail-row-closing" : "tree-detail-row",
+                          )}
+                        >
+                          <TableCell />
+                          <TableCell />
+                          <TableCell />
+                          {visibleDetailCols.map((col) => {
+                            const isRight = ["outbound_qty", "unit_price", "total_amount"].includes(col.key);
+                            const isSorted = sortState?.key === col.key;
+                            const uniqueVals = Array.from(new Set(
+                              group.details.map((d) => {
+                                let v = (d as any)[col.key];
+                                if (col.key === "source_type") v = SOURCE_TYPE_LABEL[v] || v;
+                                return v;
+                              }).filter((v: any) => v != null && v !== "").map(String)
+                            )).sort();
+                            const filterVals = headerFilters[col.key] || new Set<string>();
+                            return (
+                              <TableCell
+                                key={col.key}
+                                className={cn(
+                                  "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 select-none",
+                                  isRight && "text-right",
+                                )}
+                              >
+                                <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                                  <div
+                                    className="flex items-center gap-1 cursor-pointer min-w-0"
+                                    onClick={() => handleSort(col.key)}
+                                  >
+                                    <span className="truncate">{col.label}</span>
+                                    {isSorted && (
+                                      sortState!.direction === "asc"
+                                        ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                                        : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                                    )}
+                                  </div>
+                                  {uniqueVals.length > 0 && (
+                                    <HeaderFilterPopover
+                                      colKey={col.key} colLabel={col.label}
+                                      uniqueValues={uniqueVals} filterValues={filterVals}
+                                      onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                                    />
+                                  )}
+                                </div>
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                      )}
+
+                      {/* 디테일 행 (펼쳤을 때만) */}
+                      {isExpanded && group.details.map((row, detailIdx) => {
+                        const isClosing = closingOrders.has(outboundNo);
+                        const isChecked = checkedIds.includes(row.id);
+                        return (
+                          <TableRow
+                            key={`${row.id}-${detailIdx}`}
+                            className={cn(
+                              "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                              isClosing ? "tree-detail-row-closing" : "tree-detail-row",
+                              isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                            )}
+                            onClick={() => {
+                              setCheckedIds((prev) =>
+                                prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                              );
+                            }}
+                            onDoubleClick={() => openEditModal(row)}
+                          >
+                            <TableCell
+                              className="text-center cursor-pointer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                            >
+                              <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                            </TableCell>
+                            <TableCell className="relative">
+                              <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
+                            </TableCell>
+                            <TableCell />
+                            {visibleDetailCols.map((col) => {
+                              switch (col.key) {
+                                case "source_type": return <TableCell key={col.key} className="text-[13px]">{row.source_type ? (SOURCE_TYPE_LABEL[row.source_type] || row.source_type) : "-"}</TableCell>;
+                                case "item_code": return <TableCell key={col.key} className="font-mono text-[13px]">{row.item_code || ""}</TableCell>;
+                                case "item_name": return <TableCell key={col.key} className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>;
+                                case "specification": return <TableCell key={col.key} className="text-[13px] text-muted-foreground">{row.specification || ""}</TableCell>;
+                                case "outbound_qty": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.outbound_qty ? Number(row.outbound_qty).toLocaleString() : ""}</TableCell>;
+                                case "unit_price": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>;
+                                case "total_amount": return <TableCell key={col.key} className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>;
+                                default: return <TableCell key={col.key} className="text-[13px]">{(row as any)[col.key] ?? ""}</TableCell>;
+                              }
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                    </React.Fragment>
+                  );
+                })
               )}
             </TableBody>
           </Table>
@@ -716,56 +1241,16 @@ export default function OutboundPage() {
       </div>
 
       {/* 출고 등록 모달 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title="출고 등록"
-        description="출고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가하세요."
-        defaultMaxWidth="sm:max-w-[1600px]"
-        defaultWidth="w-[95vw]"
-        className="h-[90vh] p-0"
-        contentClassName="overflow-hidden flex flex-col"
-        footer={
-          <div className="flex w-full items-center justify-between px-6 py-3">
-            <div className="text-muted-foreground text-xs">
-              {selectedItems.length > 0 ? (
-                <>
-                  {totalSummary.count}건 | 수량 합계:{" "}
-                  {totalSummary.qty.toLocaleString()} | 금액 합계:{" "}
-                  {totalSummary.amount.toLocaleString()}원
-                </>
-              ) : (
-                "품목을 추가해주세요"
-              )}
-            </div>
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setIsModalOpen(false)}
-                className="h-9 text-sm"
-              >
-                취소
-              </Button>
-              <Button
-                onClick={handleSave}
-                disabled={saving || selectedItems.length === 0}
-                className="h-9 text-sm"
-              >
-                {saving ? (
-                  <Loader2 className="mr-1 h-4 w-4 animate-spin" />
-                ) : (
-                  <Save className="mr-1 h-4 w-4" />
-                )}
-                저장
-              </Button>
-            </div>
-          </div>
-        }
-      >
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="flex flex-col gap-0 p-0 sm:max-w-[1600px] w-[95vw] h-[90vh] overflow-hidden">
+          <DialogHeader className="shrink-0 border-b px-6 py-4">
+            <DialogTitle>{editMode ? "출고 수정" : "출고 등록"}</DialogTitle>
+            <DialogDescription>{editMode ? "출고 정보를 수정해주세요." : "출고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가해주세요."}</DialogDescription>
+          </DialogHeader>
 
           {/* 출고유형 선택 */}
-          <div className="flex items-center gap-4 border-b px-6 py-3">
-            <Label className="text-sm font-semibold">출고유형</Label>
+          <div className="flex shrink-0 items-center gap-4 border-b bg-muted/30 px-6 py-3">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고유형</span>
             <Select value={modalOutboundType} onValueChange={handleOutboundTypeChange}>
               <SelectTrigger className="h-9 w-[160px] text-sm">
                 <SelectValue />
@@ -780,10 +1265,10 @@ export default function OutboundPage() {
             </Select>
             <span className="text-muted-foreground ml-auto text-xs italic">
               {modalOutboundType === "판매출고"
-                ? "출하지시 데이터에서 출고 처리합니다."
+                ? "출하지시 데이터에서 출고 처리해요"
                 : modalOutboundType === "반품출고"
-                  ? "발주(입고) 데이터에서 반품 출고 처리합니다."
-                  : "품목 데이터를 직접 선택하여 출고 처리합니다."}
+                  ? "발주(입고) 데이터에서 반품 출고 처리해요"
+                  : "품목 데이터를 직접 선택하여 출고 처리해요"}
             </span>
           </div>
 
@@ -813,17 +1298,21 @@ export default function OutboundPage() {
                     </Button>
                   </div>
 
-                  <div className="flex items-center justify-between border-b px-4 py-2 shrink-0">
-                    <h4 className="text-muted-foreground text-xs font-semibold">
-                      {modalOutboundType === "판매출고"
-                        ? "미출고 출하지시 목록"
-                        : modalOutboundType === "반품출고"
-                          ? "입고된 발주 목록"
-                          : "품목 목록"}
-                    </h4>
-                    {sourceTotalCount > 0 && (
-                      <span className="text-muted-foreground text-[11px]">총 {sourceTotalCount}건</span>
-                    )}
+                  <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2 shrink-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                        {modalOutboundType === "판매출고"
+                          ? "미출고 출하지시 목록"
+                          : modalOutboundType === "반품출고"
+                            ? "입고된 발주 목록"
+                            : "품목 목록"}
+                      </span>
+                      {sourceTotalCount > 0 && (
+                        <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                          {sourceTotalCount}건
+                        </span>
+                      )}
+                    </div>
                   </div>
 
                   <div className="flex-1 overflow-auto">
@@ -899,20 +1388,20 @@ export default function OutboundPage() {
               <ResizablePanel defaultSize={40} minSize={25}>
                 <div className="flex h-full flex-col">
                   <div className="space-y-3 border-b bg-muted/30 px-4 py-3">
-                    <h4 className="text-sm font-semibold">출고 정보</h4>
+                    <h4 className="text-[13px] font-bold text-foreground">출고 정보</h4>
                     <div className="grid grid-cols-2 gap-3">
-                      <div>
-                        <Label className="text-[11px]">출고번호</Label>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고번호</span>
                         <Input
                           value={modalOutboundNo}
                           readOnly
-                          className="bg-muted h-8 text-xs"
+                          className="bg-muted cursor-not-allowed h-8 font-mono text-xs"
                         />
                       </div>
-                      <div>
-                        <Label className="text-[11px]">
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                           출고일 <span className="text-destructive">*</span>
-                        </Label>
+                        </span>
                         <Input
                           type="date"
                           value={modalOutboundDate}
@@ -920,9 +1409,17 @@ export default function OutboundPage() {
                           className="h-8 text-xs"
                         />
                       </div>
-                      <div>
-                        <Label className="text-[11px]">창고</Label>
-                        <Select value={modalWarehouse} onValueChange={setModalWarehouse}>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">창고</span>
+                        <Select value={modalWarehouse} onValueChange={(v) => {
+                          setModalWarehouse(v);
+                          setModalLocation("");
+                          if (v) {
+                            getOutboundLocations(v).then((r) => { if (r.success) setLocations(r.data); }).catch(() => {});
+                          } else {
+                            setLocations([]);
+                          }
+                        }}>
                           <SelectTrigger className="h-8 text-xs">
                             <SelectValue placeholder="창고 선택" />
                           </SelectTrigger>
@@ -935,17 +1432,24 @@ export default function OutboundPage() {
                           </SelectContent>
                         </Select>
                       </div>
-                      <div>
-                        <Label className="text-[11px]">위치</Label>
-                        <Input
-                          value={modalLocation}
-                          onChange={(e) => setModalLocation(e.target.value)}
-                          placeholder="위치 입력"
-                          className="h-8 text-xs"
-                        />
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">위치</span>
+                        <Select value={modalLocation || "__none__"} onValueChange={(v) => setModalLocation(v === "__none__" ? "" : v)}>
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="위치 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="__none__">위치 선택</SelectItem>
+                            {locations.map((l) => (
+                              <SelectItem key={l.location_code} value={l.location_code}>
+                                {l.location_name || l.location_code}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
                       </div>
-                      <div>
-                        <Label className="text-[11px]">담당자</Label>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자</span>
                         <Input
                           value={modalManager}
                           onChange={(e) => setModalManager(e.target.value)}
@@ -953,8 +1457,8 @@ export default function OutboundPage() {
                           className="h-8 text-xs"
                         />
                       </div>
-                      <div>
-                        <Label className="text-[11px]">메모</Label>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">메모</span>
                         <Input
                           value={modalMemo}
                           onChange={(e) => setModalMemo(e.target.value)}
@@ -966,25 +1470,29 @@ export default function OutboundPage() {
                   </div>
 
                   <div className="flex-1 overflow-auto px-4 py-2">
-                    <h4 className="text-muted-foreground mb-2 text-xs font-semibold">
-                      출고 처리 품목 ({selectedItems.length}건)
-                    </h4>
+                    <div className="mb-2 flex items-center gap-2">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고 처리 품목</span>
+                      <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                        {selectedItems.length}건
+                      </span>
+                    </div>
 
                     {selectedItems.length === 0 ? (
-                      <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-xs">
-                        <PackageOpen className="mb-2 h-8 w-8 opacity-30" />
+                      <div className="flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+                        <PackageOpen className="h-8 w-8 text-muted-foreground/30" />
                         좌측에서 품목을 선택하여 추가해주세요
                       </div>
                     ) : (
                       <Table>
-                        <TableHeader>
-                          <TableRow className="text-[11px]">
-                            <TableHead className="w-[30px] p-2">No</TableHead>
-                            <TableHead className="p-2">품목명</TableHead>
-                            <TableHead className="p-2">참조번호</TableHead>
-                            <TableHead className="w-[80px] p-2 text-right">수량</TableHead>
-                            <TableHead className="w-[80px] p-2 text-right">단가</TableHead>
-                            <TableHead className="w-[90px] p-2 text-right">금액</TableHead>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출고유형</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
                             <TableHead className="w-[30px] p-2" />
                           </TableRow>
                         </TableHeader>
@@ -992,6 +1500,11 @@ export default function OutboundPage() {
                           {selectedItems.map((item, idx) => (
                             <TableRow key={item.key} className="text-xs">
                               <TableCell className="p-2 text-center">{idx + 1}</TableCell>
+                              <TableCell className="p-2">
+                                <Badge variant="outline" className={cn("text-[10px]", getTypeColor(item.outbound_type))}>
+                                  {item.outbound_type || "-"}
+                                </Badge>
+                              </TableCell>
                               <TableCell className="max-w-[180px] p-2">
                                 <div className="flex flex-col">
                                   <span className="truncate font-medium" title={item.item_name}>
@@ -1022,7 +1535,7 @@ export default function OutboundPage() {
                                   min={0}
                                 />
                               </TableCell>
-                              <TableCell className="p-2 text-right text-xs font-semibold">
+                              <TableCell className="p-2 text-right text-[13px] font-semibold">
                                 {item.total_amount.toLocaleString()}
                               </TableCell>
                               <TableCell className="p-2 text-center">
@@ -1046,7 +1559,53 @@ export default function OutboundPage() {
             </ResizablePanelGroup>
           </div>
 
-      </FullscreenDialog>
+          <div className="shrink-0 border-t">
+            <div className="flex w-full items-center justify-between px-6 py-3">
+              <div className="text-muted-foreground text-xs">
+                {selectedItems.length > 0 ? (
+                  <>
+                    {totalSummary.count}건 | 수량 합계:{" "}
+                    {totalSummary.qty.toLocaleString()} | 금액 합계:{" "}
+                    {totalSummary.amount.toLocaleString()}원
+                  </>
+                ) : (
+                  "품목을 추가해주세요"
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsModalOpen(false)}
+                  className="h-9 text-sm"
+                >
+                  취소
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={saving || selectedItems.length === 0}
+                  className="h-9 text-sm"
+                >
+                  {saving ? (
+                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="mr-1 h-4 w-4" />
+                  )}
+                  저장
+                </Button>
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
@@ -1064,23 +1623,24 @@ function SourceShipmentInstructionTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 출하지시 데이터를 조회하세요
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 출하지시 데이터를 조회해주세요
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader>
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">출하지시번호</TableHead>
-          <TableHead className="p-2">출하일</TableHead>
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">계획수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">출고수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">미출고</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하지시번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하일</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출고수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">미출고</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -1123,7 +1683,7 @@ function SourceShipmentInstructionTable({
               <TableCell className="p-2 text-right">
                 {Number(si.ship_qty).toLocaleString()}
               </TableCell>
-              <TableCell className="p-2 text-right font-semibold text-blue-600">
+              <TableCell className="p-2 text-right font-semibold text-primary">
                 {Number(si.remain_qty).toLocaleString()}
               </TableCell>
             </TableRow>
@@ -1145,22 +1705,23 @@ function SourcePurchaseOrderTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 발주 데이터를 조회하세요
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 발주 데이터를 조회해주세요
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader>
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">발주번호</TableHead>
-          <TableHead className="p-2">공급처</TableHead>
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">발주수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">입고수량</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -1196,7 +1757,7 @@ function SourcePurchaseOrderTable({
               <TableCell className="p-2 text-right">
                 {Number(po.order_qty).toLocaleString()}
               </TableCell>
-              <TableCell className="p-2 text-right font-semibold text-blue-600">
+              <TableCell className="p-2 text-right font-semibold text-primary">
                 {Number(po.received_qty).toLocaleString()}
               </TableCell>
             </TableRow>
@@ -1218,22 +1779,23 @@ function SourceItemTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 품목 데이터를 조회하세요
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 품목 데이터를 조회해주세요
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader>
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[80px] p-2">규격</TableHead>
-          <TableHead className="w-[80px] p-2">재질</TableHead>
-          <TableHead className="w-[60px] p-2">단위</TableHead>
-          <TableHead className="w-[80px] p-2 text-right">기준가</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+          <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
diff --git a/frontend/app/(main)/COMPANY_7/logistics/packaging/page.tsx b/frontend/app/(main)/COMPANY_7/logistics/packaging/page.tsx
index 79059277..6ae340aa 100644
--- a/frontend/app/(main)/COMPANY_7/logistics/packaging/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/logistics/packaging/page.tsx
@@ -4,23 +4,18 @@ import React, { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Badge } from "@/components/ui/badge";
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from "@/components/ui/select";
 import {
   Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from "@/components/ui/table";
-import {
-  ResizableHandle, ResizablePanel, ResizablePanelGroup,
-} from "@/components/ui/resizable";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Command, CommandInput, CommandList, CommandEmpty, CommandItem } from "@/components/ui/command";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import {
-  Search, Plus, Trash2, RotateCcw, Loader2, Package, Box, X, Save, Edit2, Download, ChevronsUpDown, Check,
+  Plus, Trash2, Loader2, Package, Box, X, Save, Edit2, Download, ChevronsUpDown, Check, Inbox, Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
@@ -32,6 +27,19 @@ import {
   getItemsByDivision, getGeneralItems,
   type PkgUnit, type PkgUnitItem, type LoadingUnit, type LoadingUnitPkg, type ItemInfoForPkg,
 } from "@/lib/api/packaging";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "pkg_code", label: "품목코드" },
+  { key: "pkg_name", label: "포장명" },
+  { key: "pkg_type", label: "유형" },
+  { key: "size", label: "크기(mm)" },
+  { key: "max_weight", label: "최대중량" },
+  { key: "status", label: "상태" },
+];
 
 // --- 코드 → 라벨 매핑 ---
 const PKG_TYPE_LABEL: Record<string, string> = {
@@ -45,7 +53,7 @@ const LOADING_TYPE_LABEL: Record<string, string> = {
 };
 const STATUS_LABEL: Record<string, string> = { ACTIVE: "사용", INACTIVE: "미사용" };
 
-const getStatusColor = (s: string) => s === "ACTIVE" ? "bg-emerald-100 text-emerald-800" : "bg-gray-100 text-gray-600";
+const getStatusColor = (s: string) => s === "ACTIVE" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground";
 const fmtSize = (w: any, l: any, h: any) => {
   const vals = [w, l, h].map(v => Number(v) || 0);
   return vals.some(v => v > 0) ? vals.join("×") : "-";
@@ -62,11 +70,12 @@ function parseSpecDimensions(spec: string | null) {
 }
 
 export default function PackagingPage() {
+  const ts = useTableSettings("c16-packaging", "pkg_unit", GRID_COLUMNS);
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
   const [activeTab, setActiveTab] = useState<"packing" | "loading">("packing");
 
-  // 검색
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 포장재 데이터
   const [pkgUnits, setPkgUnits] = useState<PkgUnit[]>([]);
@@ -150,15 +159,21 @@ export default function PackagingPage() {
 
   // 검색 필터 적용
   const filteredPkgUnits = pkgUnits.filter((p) => {
-    if (!searchKeyword) return true;
-    const kw = searchKeyword.toLowerCase();
-    return (p.pkg_code?.toLowerCase().includes(kw) || p.pkg_name?.toLowerCase().includes(kw));
+    if (searchFilters.length === 0) return true;
+    return searchFilters.every((f) => {
+      if (!f.value) return true;
+      const kw = f.value.toLowerCase();
+      return Object.values(p).some((v) => String(v ?? "").toLowerCase().includes(kw));
+    });
   });
 
   const filteredLoadingUnits = loadingUnits.filter((l) => {
-    if (!searchKeyword) return true;
-    const kw = searchKeyword.toLowerCase();
-    return (l.loading_code?.toLowerCase().includes(kw) || l.loading_name?.toLowerCase().includes(kw));
+    if (searchFilters.length === 0) return true;
+    return searchFilters.every((f) => {
+      if (!f.value) return true;
+      const kw = f.value.toLowerCase();
+      return Object.values(l).some((v) => String(v ?? "").toLowerCase().includes(kw));
+    });
   });
 
   // --- 포장재 등록/수정 모달 ---
@@ -344,444 +359,498 @@ export default function PackagingPage() {
   };
 
   return (
-    <div className="flex h-full flex-col gap-3 p-4">
-      {/* 검색 바 */}
-      <div className="flex items-center gap-2 rounded-lg border bg-card p-3">
-        <Input
-          placeholder="포장코드 / 포장명 / 적재함명 검색"
-          value={searchKeyword}
-          onChange={(e) => setSearchKeyword(e.target.value)}
-          className="h-9 w-[280px] text-xs"
-        />
-        <Button size="sm" variant="outline" onClick={() => setSearchKeyword("")} className="h-9">
-          <RotateCcw className="mr-1 h-4 w-4" /> 초기화
-        </Button>
-      </div>
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-4">
 
-      {/* 탭 */}
-      <div className="flex gap-1 border-b">
-        {([["packing", "포장재 관리", filteredPkgUnits.length] as const, ["loading", "적재함 관리", filteredLoadingUnits.length] as const]).map(([tab, label, count]) => (
+      {/* 1. 필터 바 */}
+      <DynamicSearchFilter
+        tableName="pkg_unit"
+        filterId="c16-packaging"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={activeTab === "packing" ? filteredPkgUnits.length : filteredLoadingUnits.length}
+      />
+
+      {/* 2. 탭 바 */}
+      <div className="flex shrink-0 gap-1 border-b">
+        {(
+          [
+            ["packing", "포장재 관리", filteredPkgUnits.length],
+            ["loading", "적재함 관리", filteredLoadingUnits.length],
+          ] as const
+        ).map(([tab, label, count]) => (
           <button
             key={tab}
-            onClick={() => setActiveTab(tab)}
+            onClick={() => {
+              setActiveTab(tab);
+              if (tab === "packing") { setSelectedLoading(null); setLoadingPkgs([]); }
+              else { setSelectedPkg(null); setPkgItems([]); }
+            }}
             className={cn(
-              "flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px",
-              activeTab === tab ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"
+              "-mb-px flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors",
+              activeTab === tab
+                ? "border-primary text-primary"
+                : "border-transparent text-muted-foreground hover:text-foreground"
             )}
           >
             {tab === "packing" ? <Package className="h-4 w-4" /> : <Box className="h-4 w-4" />}
             {label}
-            <Badge variant="secondary" className="text-[10px] px-1.5">{count}</Badge>
+            <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+              {count}
+            </span>
           </button>
         ))}
       </div>
 
-      {/* 탭 콘텐츠 */}
-      <div className="flex-1 overflow-hidden">
-        {activeTab === "packing" ? (
-          <ResizablePanelGroup direction="horizontal" className="h-full rounded-lg border">
-            {/* 좌측: 포장재 목록 */}
-            <ResizablePanel defaultSize={45} minSize={30}>
-              <div className="flex h-full flex-col">
-                <div className="flex items-center justify-between border-b px-4 py-2.5">
-                  <span className="text-sm font-semibold">포장재 목록 <span className="text-muted-foreground font-normal">({filteredPkgUnits.length}건)</span></span>
-                  <div className="flex gap-1">
-                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openPkgModal("create")}>
-                      <Plus className="mr-1 h-3 w-3" /> 등록
-                    </Button>
-                  </div>
-                </div>
-                <div className="flex-1 overflow-auto">
-                  <Table>
-                    <TableHeader>
-                      <TableRow className="text-[11px] bg-muted/50">
-                        <TableHead className="p-2">품목코드</TableHead>
-                        <TableHead className="p-2">포장명</TableHead>
-                        <TableHead className="p-2 w-[70px]">유형</TableHead>
-                        <TableHead className="p-2 w-[90px]">크기(mm)</TableHead>
-                        <TableHead className="p-2 w-[70px] text-right">최대중량</TableHead>
-                        <TableHead className="p-2 w-[55px] text-center">상태</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {pkgLoading ? (
-                        <TableRow><TableCell colSpan={6} className="h-32 text-center"><Loader2 className="mx-auto h-5 w-5 animate-spin" /></TableCell></TableRow>
-                      ) : filteredPkgUnits.length === 0 ? (
-                        <TableRow><TableCell colSpan={6} className="h-32 text-center text-muted-foreground text-xs">등록된 포장재가 없습니다</TableCell></TableRow>
-                      ) : filteredPkgUnits.map((p) => (
-                        <TableRow
-                          key={p.id}
-                          className={cn("cursor-pointer text-xs", selectedPkg?.id === p.id && "bg-primary/5")}
-                          onClick={() => selectPkg(p)}
-                        >
-                          <TableCell className="p-2 font-medium truncate max-w-[100px]">{p.pkg_code}</TableCell>
-                          <TableCell className="p-2 truncate max-w-[120px]">{p.pkg_name}</TableCell>
-                          <TableCell className="p-2">{PKG_TYPE_LABEL[p.pkg_type] || p.pkg_type || "-"}</TableCell>
-                          <TableCell className="p-2 text-[10px]">{fmtSize(p.width_mm, p.length_mm, p.height_mm)}</TableCell>
-                          <TableCell className="p-2 text-right">{Number(p.max_load_kg || 0) > 0 ? `${p.max_load_kg}kg` : "-"}</TableCell>
-                          <TableCell className="p-2 text-center">
-                            <Badge variant="outline" className={cn("text-[10px]", getStatusColor(p.status))}>{STATUS_LABEL[p.status] || p.status}</Badge>
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </div>
-              </div>
-            </ResizablePanel>
-            <ResizableHandle withHandle />
-            {/* 우측: 상세 */}
-            <ResizablePanel defaultSize={55} minSize={30}>
-              {!selectedPkg ? (
-                <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
-                  <Package className="h-12 w-12 opacity-20 mb-2" />
-                  <p className="text-sm">좌측 목록에서 포장재를 선택하세요</p>
-                </div>
-              ) : (
-                <div className="flex h-full flex-col">
-                  {/* 요약 헤더 */}
-                  <div className="flex items-center justify-between border-b bg-blue-50 dark:bg-blue-950/20 px-4 py-3">
-                    <div className="flex items-center gap-3">
-                      <Package className="h-5 w-5 text-blue-600" />
-                      <div>
-                        <div className="font-bold text-sm">{selectedPkg.pkg_name}</div>
-                        <div className="text-[11px] text-muted-foreground">{selectedPkg.pkg_code} · {PKG_TYPE_LABEL[selectedPkg.pkg_type] || selectedPkg.pkg_type} · {fmtSize(selectedPkg.width_mm, selectedPkg.length_mm, selectedPkg.height_mm)}mm</div>
-                      </div>
-                    </div>
-                    <div className="flex gap-1">
-                      <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openPkgModal("edit")}>
-                        <Edit2 className="mr-1 h-3 w-3" /> 수정
-                      </Button>
-                      <Button size="sm" variant="destructive" className="h-7 text-xs" onClick={() => handleDeletePkg(selectedPkg)}>
-                        <Trash2 className="mr-1 h-3 w-3" /> 삭제
-                      </Button>
-                    </div>
-                  </div>
-                  {/* 매칭 품목 */}
-                  <div className="flex items-center justify-between px-4 py-2 border-b">
-                    <span className="text-xs font-semibold text-muted-foreground">매칭 품목 ({pkgItems.length}건)</span>
-                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openItemMatchModal}>
-                      <Plus className="mr-1 h-3 w-3" /> 품목 추가
-                    </Button>
-                  </div>
-                  <div className="flex-1 overflow-auto">
-                    {pkgItemsLoading ? (
-                      <div className="flex h-32 items-center justify-center"><Loader2 className="h-5 w-5 animate-spin" /></div>
-                    ) : pkgItems.length === 0 ? (
-                      <div className="flex h-32 items-center justify-center text-muted-foreground text-xs">매칭된 품목이 없습니다</div>
-                    ) : (
-                      <Table>
-                        <TableHeader>
-                          <TableRow className="text-[11px]">
-                            <TableHead className="p-2">품목코드</TableHead>
-                            <TableHead className="p-2">품목명</TableHead>
-                            <TableHead className="p-2 w-[70px]">규격</TableHead>
-                            <TableHead className="p-2 w-[50px]">단위</TableHead>
-                            <TableHead className="p-2 w-[80px] text-right">포장수량</TableHead>
-                            <TableHead className="p-2 w-[40px]" />
-                          </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                          {pkgItems.map((item) => (
-                            <TableRow key={item.id} className="text-xs">
-                              <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
-                              <TableCell className="p-2">{item.item_name || "-"}</TableCell>
-                              <TableCell className="p-2">{item.spec || "-"}</TableCell>
-                              <TableCell className="p-2">{item.unit || "EA"}</TableCell>
-                              <TableCell className="p-2 text-right font-semibold">{Number(item.pkg_qty).toLocaleString()}</TableCell>
-                              <TableCell className="p-2 text-center">
-                                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeletePkgItem(item)}>
-                                  <X className="h-3 w-3" />
-                                </Button>
-                              </TableCell>
-                            </TableRow>
-                          ))}
-                        </TableBody>
-                      </Table>
-                    )}
-                  </div>
-                </div>
-              )}
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        ) : (
-          /* 적재함 관리 탭 */
-          <ResizablePanelGroup direction="horizontal" className="h-full rounded-lg border">
-            <ResizablePanel defaultSize={45} minSize={30}>
-              <div className="flex h-full flex-col">
-                <div className="flex items-center justify-between border-b px-4 py-2.5">
-                  <span className="text-sm font-semibold">적재함 목록 <span className="text-muted-foreground font-normal">({filteredLoadingUnits.length}건)</span></span>
-                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openLoadModal("create")}>
-                    <Plus className="mr-1 h-3 w-3" /> 등록
-                  </Button>
-                </div>
-                <div className="flex-1 overflow-auto">
-                  <Table>
-                    <TableHeader>
-                      <TableRow className="text-[11px] bg-muted/50">
-                        <TableHead className="p-2">품목코드</TableHead>
-                        <TableHead className="p-2">적재함명</TableHead>
-                        <TableHead className="p-2 w-[80px]">유형</TableHead>
-                        <TableHead className="p-2 w-[90px]">크기(mm)</TableHead>
-                        <TableHead className="p-2 w-[70px] text-right">최대적재</TableHead>
-                        <TableHead className="p-2 w-[55px] text-center">상태</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {loadingLoading ? (
-                        <TableRow><TableCell colSpan={6} className="h-32 text-center"><Loader2 className="mx-auto h-5 w-5 animate-spin" /></TableCell></TableRow>
-                      ) : filteredLoadingUnits.length === 0 ? (
-                        <TableRow><TableCell colSpan={6} className="h-32 text-center text-muted-foreground text-xs">등록된 적재함이 없습니다</TableCell></TableRow>
-                      ) : filteredLoadingUnits.map((l) => (
-                        <TableRow
-                          key={l.id}
-                          className={cn("cursor-pointer text-xs", selectedLoading?.id === l.id && "bg-primary/5")}
-                          onClick={() => selectLoading(l)}
-                        >
-                          <TableCell className="p-2 font-medium truncate max-w-[100px]">{l.loading_code}</TableCell>
-                          <TableCell className="p-2 truncate max-w-[120px]">{l.loading_name}</TableCell>
-                          <TableCell className="p-2">{LOADING_TYPE_LABEL[l.loading_type] || l.loading_type || "-"}</TableCell>
-                          <TableCell className="p-2 text-[10px]">{fmtSize(l.width_mm, l.length_mm, l.height_mm)}</TableCell>
-                          <TableCell className="p-2 text-right">{Number(l.max_load_kg || 0) > 0 ? `${l.max_load_kg}kg` : "-"}</TableCell>
-                          <TableCell className="p-2 text-center">
-                            <Badge variant="outline" className={cn("text-[10px]", getStatusColor(l.status))}>{STATUS_LABEL[l.status] || l.status}</Badge>
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </div>
-              </div>
-            </ResizablePanel>
-            <ResizableHandle withHandle />
-            <ResizablePanel defaultSize={55} minSize={30}>
-              {!selectedLoading ? (
-                <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
-                  <Box className="h-12 w-12 opacity-20 mb-2" />
-                  <p className="text-sm">좌측 목록에서 적재함을 선택하세요</p>
-                </div>
-              ) : (
-                <div className="flex h-full flex-col">
-                  <div className="flex items-center justify-between border-b bg-green-50 dark:bg-green-950/20 px-4 py-3">
-                    <div className="flex items-center gap-3">
-                      <Box className="h-5 w-5 text-green-600" />
-                      <div>
-                        <div className="font-bold text-sm">{selectedLoading.loading_name}</div>
-                        <div className="text-[11px] text-muted-foreground">{selectedLoading.loading_code} · {LOADING_TYPE_LABEL[selectedLoading.loading_type] || selectedLoading.loading_type} · {fmtSize(selectedLoading.width_mm, selectedLoading.length_mm, selectedLoading.height_mm)}mm</div>
-                      </div>
-                    </div>
-                    <div className="flex gap-1">
-                      <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openLoadModal("edit")}><Edit2 className="mr-1 h-3 w-3" /> 수정</Button>
-                      <Button size="sm" variant="destructive" className="h-7 text-xs" onClick={() => handleDeleteLoading(selectedLoading)}><Trash2 className="mr-1 h-3 w-3" /> 삭제</Button>
-                    </div>
-                  </div>
-                  <div className="flex items-center justify-between px-4 py-2 border-b">
-                    <span className="text-xs font-semibold text-muted-foreground">적재 가능 포장단위 ({loadingPkgs.length}건)</span>
-                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openPkgMatchModal}><Plus className="mr-1 h-3 w-3" /> 포장단위 추가</Button>
-                  </div>
-                  <div className="flex-1 overflow-auto">
-                    {loadingPkgsLoading ? (
-                      <div className="flex h-32 items-center justify-center"><Loader2 className="h-5 w-5 animate-spin" /></div>
-                    ) : loadingPkgs.length === 0 ? (
-                      <div className="flex h-32 items-center justify-center text-muted-foreground text-xs">등록된 포장단위가 없습니다</div>
-                    ) : (
-                      <Table>
-                        <TableHeader>
-                          <TableRow className="text-[11px]">
-                            <TableHead className="p-2">포장코드</TableHead>
-                            <TableHead className="p-2">포장명</TableHead>
-                            <TableHead className="p-2 w-[70px]">유형</TableHead>
-                            <TableHead className="p-2 w-[80px] text-right">최대수량</TableHead>
-                            <TableHead className="p-2 w-[70px]">적재방향</TableHead>
-                            <TableHead className="p-2 w-[40px]" />
-                          </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                          {loadingPkgs.map((lp) => (
-                            <TableRow key={lp.id} className="text-xs">
-                              <TableCell className="p-2 font-medium">{lp.pkg_code}</TableCell>
-                              <TableCell className="p-2">{lp.pkg_name || "-"}</TableCell>
-                              <TableCell className="p-2">{PKG_TYPE_LABEL[lp.pkg_type || ""] || lp.pkg_type || "-"}</TableCell>
-                              <TableCell className="p-2 text-right font-semibold">{Number(lp.max_load_qty).toLocaleString()}</TableCell>
-                              <TableCell className="p-2">{lp.load_method || "-"}</TableCell>
-                              <TableCell className="p-2 text-center">
-                                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeleteLoadPkg(lp)}><X className="h-3 w-3" /></Button>
-                              </TableCell>
-                            </TableRow>
-                          ))}
-                        </TableBody>
-                      </Table>
-                    )}
-                  </div>
-                </div>
-              )}
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        )}
+      {/* 3. 액션 바 */}
+      <div className="flex shrink-0 items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold">
+            {activeTab === "packing" ? "포장재 목록" : "적재함 목록"}
+          </h3>
+          {(activeTab === "packing" ? pkgLoading : loadingLoading) && (
+            <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+          )}
+        </div>
+        <div className="flex items-center gap-1.5">
+          {activeTab === "packing" && selectedPkg && (
+            <>
+              <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openPkgModal("edit")}>
+                <Edit2 className="mr-1 h-3 w-3" /> 수정
+              </Button>
+              <Button
+                size="sm" variant="outline"
+                className="h-7 text-xs text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                onClick={() => handleDeletePkg(selectedPkg)}
+              >
+                <Trash2 className="mr-1 h-3 w-3" /> 삭제
+              </Button>
+              <div className="h-4 w-px bg-border" />
+            </>
+          )}
+          {activeTab === "loading" && selectedLoading && (
+            <>
+              <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openLoadModal("edit")}>
+                <Edit2 className="mr-1 h-3 w-3" /> 수정
+              </Button>
+              <Button
+                size="sm" variant="outline"
+                className="h-7 text-xs text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                onClick={() => handleDeleteLoading(selectedLoading)}
+              >
+                <Trash2 className="mr-1 h-3 w-3" /> 삭제
+              </Button>
+              <div className="h-4 w-px bg-border" />
+            </>
+          )}
+          <Button
+            size="sm"
+            onClick={() => activeTab === "packing" ? openPkgModal("create") : openLoadModal("create")}
+          >
+            <Plus className="mr-1 h-3.5 w-3.5" /> 등록
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
       </div>
 
-      {/* 포장재 등록/수정 모달 */}
-      <FullscreenDialog open={pkgModalOpen} onOpenChange={setPkgModalOpen}
-        title={pkgModalMode === "create" ? "포장재 등록" : "포장재 수정"}
-        description="품목정보에서 포장재를 선택하면 코드와 이름이 자동 연동됩니다."
-        footer={
-          <div className="flex gap-2">
-            <Button variant="outline" onClick={() => setPkgModalOpen(false)}>취소</Button>
-            <Button onClick={savePkgUnit} disabled={saving}>{saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장</Button>
+      {/* 4. 콘텐츠 영역 */}
+      {activeTab === "packing" ? (
+        <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+          {/* 포장재 목록 테이블 */}
+          <div className={cn("overflow-auto", selectedPkg ? "flex-[0_0_50%] border-b" : "flex-1")}>
+            <EDataTable
+              columns={ts.visibleColumns.map((col): EDataTableColumn<PkgUnit> => {
+                const renderMap: Record<string, Partial<EDataTableColumn<PkgUnit>>> = {
+                  pkg_type: { width: "w-[80px]", render: (v: any) => PKG_TYPE_LABEL[v] || v || "-" },
+                  size: { width: "w-[100px]", render: (_v: any, row: any) => fmtSize(row.width_mm, row.length_mm, row.height_mm) },
+                  max_weight: { width: "w-[80px]", align: "right", render: (v: any) => Number(v || 0) > 0 ? `${v}kg` : "-" },
+                  max_load_kg: { width: "w-[80px]", align: "right", render: (v: any) => Number(v || 0) > 0 ? `${v}kg` : "-" },
+                  status: { width: "w-[60px]", align: "center", render: (v: any) => (
+                    <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(v))}>
+                      {STATUS_LABEL[v] || v}
+                    </span>
+                  )},
+                };
+                return { key: col.key, label: col.label, ...renderMap[col.key] };
+              })}
+              data={ts.groupData(filteredPkgUnits)}
+              rowKey={(row) => String(row.id)}
+              loading={pkgLoading}
+              emptyMessage="등록된 포장재가 없어요"
+              selectedId={selectedPkg ? String(selectedPkg.id) : null}
+              onSelect={(id) => {
+                const pkg = filteredPkgUnits.find((p) => String(p.id) === id);
+                if (pkg) selectPkg(pkg);
+              }}
+              showPagination={false}
+              draggableColumns
+              columnOrderKey="c16-packaging-pkg"
+            />
           </div>
-        }
-      >
-        <div className="space-y-4 p-6">
-          {/* 품목정보 연결 */}
-          {pkgModalMode === "create" && (
-            <div className="rounded-lg border bg-blue-50 dark:bg-blue-950/20 p-4">
-              <Label className="text-xs font-semibold mb-2 block">품목정보 연결 (구분: 포장재)</Label>
-              <Popover open={pkgItemPopoverOpen} onOpenChange={setPkgItemPopoverOpen}>
-                <PopoverTrigger asChild>
-                  <Button variant="outline" role="combobox" className="w-full justify-between h-9 text-sm font-normal">
-                    {pkgForm.pkg_code
-                      ? `${pkgForm.pkg_name} (${pkgForm.pkg_code})`
-                      : "품목정보에서 포장재를 선택하세요"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+
+          {/* 매칭 품목 서브패널 */}
+          {selectedPkg && (
+            <>
+              <div className="flex shrink-0 items-center justify-between bg-muted/50 px-4 py-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">매칭 품목</span>
+                  <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+                    {pkgItems.length}건
+                  </span>
+                  <span className="max-w-[200px] truncate text-[11px] text-muted-foreground">
+                    — {selectedPkg.pkg_name}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openItemMatchModal}>
+                    <Plus className="mr-1 h-3 w-3" /> 품목 추가
                   </Button>
-                </PopoverTrigger>
-                <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
-                  <Command filter={(value, search) => {
-                    const item = pkgItemOptions.find((i) => i.id === value);
-                    if (!item) return 0;
-                    const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
-                    return target.includes(search.toLowerCase()) ? 1 : 0;
-                  }}>
-                    <CommandInput placeholder="품목코드 / 품목명 검색..." />
-                    <CommandList className="max-h-[200px]">
-                      <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
-                      {pkgItemOptions.map((item) => (
-                        <CommandItem key={item.id} value={item.id} onSelect={() => onPkgItemSelect(item)} className="text-xs">
-                          <Check className={cn("mr-2 h-3 w-3", pkgForm.pkg_code === item.item_number ? "opacity-100" : "opacity-0")} />
-                          <span className="font-medium">{item.item_name}</span>
-                          <span className="ml-2 text-muted-foreground">{item.item_number}</span>
-                          {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
-                        </CommandItem>
+                  <Button
+                    size="sm" variant="ghost" className="h-7 w-7 p-0 text-muted-foreground"
+                    onClick={() => { setSelectedPkg(null); setPkgItems([]); }}
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <div className="flex-1 overflow-auto">
+                {pkgItemsLoading ? (
+                  <div className="flex h-24 items-center justify-center">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : pkgItems.length === 0 ? (
+                  <div className="flex h-24 flex-col items-center justify-center gap-1.5">
+                    <Inbox className="h-5 w-5 text-muted-foreground/40" />
+                    <p className="text-xs text-muted-foreground">매칭된 품목이 없어요</p>
+                  </div>
+                ) : (
+                  <Table>
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                        <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장수량</TableHead>
+                        <TableHead className="p-2 w-[40px]" />
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {pkgItems.map((item) => (
+                        <TableRow key={item.id} className="text-xs">
+                          <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
+                          <TableCell className="p-2">{item.item_name || "-"}</TableCell>
+                          <TableCell className="p-2">{item.spec || "-"}</TableCell>
+                          <TableCell className="p-2">{item.unit || "EA"}</TableCell>
+                          <TableCell className="p-2 text-right font-semibold">{Number(item.pkg_qty).toLocaleString()}</TableCell>
+                          <TableCell className="p-2 text-center">
+                            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeletePkgItem(item)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
                       ))}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
+                    </TableBody>
+                  </Table>
+                )}
+              </div>
+            </>
           )}
-          <div className="grid grid-cols-2 gap-4">
-            <div><Label className="text-xs">품목코드</Label><Input value={pkgForm.pkg_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
-            <div><Label className="text-xs">포장명</Label><Input value={pkgForm.pkg_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
-            <div>
-              <Label className="text-xs">포장유형 <span className="text-destructive">*</span></Label>
-              <Select value={pkgForm.pkg_type || ""} onValueChange={(v) => setPkgForm((p) => ({ ...p, pkg_type: v }))}>
-                <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
-                <SelectContent>{Object.entries(PKG_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
-              </Select>
-            </div>
-            <div>
-              <Label className="text-xs">상태</Label>
-              <Select value={pkgForm.status || "ACTIVE"} onValueChange={(v) => setPkgForm((p) => ({ ...p, status: v }))}>
-                <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
-                <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
-              </Select>
-            </div>
-          </div>
-          <div>
-            <Label className="text-xs font-semibold">규격정보</Label>
-            <div className="grid grid-cols-3 gap-3 mt-2">
-              <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={pkgForm.width_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={pkgForm.length_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={pkgForm.height_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={pkgForm.self_weight_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-              <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={pkgForm.max_load_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-              <div><Label className="text-[10px]">내용적(L)</Label><Input type="number" value={pkgForm.volume_l || ""} onChange={(e) => setPkgForm((p) => ({ ...p, volume_l: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-            </div>
-          </div>
-          <div><Label className="text-xs">비고</Label><Input value={pkgForm.remarks || ""} onChange={(e) => setPkgForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
         </div>
-      </FullscreenDialog>
+      ) : (
+        /* 적재함 관리 탭 */
+        <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+          {/* 적재함 목록 테이블 */}
+          <div className={cn("overflow-auto", selectedLoading ? "flex-[0_0_50%] border-b" : "flex-1")}>
+            <Table>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted">
+                  <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">적재함명</TableHead>
+                  <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">크기(mm)</TableHead>
+                  <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대적재</TableHead>
+                  <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {loadingLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-32 text-center">
+                      <Loader2 className="mx-auto h-5 w-5 animate-spin text-muted-foreground" />
+                    </TableCell>
+                  </TableRow>
+                ) : filteredLoadingUnits.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-40 text-center">
+                      <div className="flex flex-col items-center justify-center gap-2">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-full border-2 border-dashed border-muted-foreground/20">
+                          <Inbox className="h-6 w-6 text-muted-foreground/40" />
+                        </div>
+                        <p className="text-xs text-muted-foreground">등록된 적재함이 없어요</p>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ) : filteredLoadingUnits.map((l) => (
+                  <TableRow
+                    key={l.id}
+                    className={cn(
+                      "cursor-pointer text-xs transition-colors",
+                      selectedLoading?.id === l.id ? "bg-primary/5" : "hover:bg-muted/50"
+                    )}
+                    onClick={() => selectLoading(l)}
+                  >
+                    <TableCell className="p-2 font-medium">{l.loading_code}</TableCell>
+                    <TableCell className="p-2">{l.loading_name}</TableCell>
+                    <TableCell className="p-2">{LOADING_TYPE_LABEL[l.loading_type] || l.loading_type || "-"}</TableCell>
+                    <TableCell className="p-2 text-[10px] tabular-nums">{fmtSize(l.width_mm, l.length_mm, l.height_mm)}</TableCell>
+                    <TableCell className="p-2 text-right">{Number(l.max_load_kg || 0) > 0 ? `${l.max_load_kg}kg` : "-"}</TableCell>
+                    <TableCell className="p-2 text-center">
+                      <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(l.status))}>
+                        {STATUS_LABEL[l.status] || l.status}
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          {/* 포장구성 서브패널 */}
+          {selectedLoading && (
+            <>
+              <div className="flex shrink-0 items-center justify-between bg-muted/50 px-4 py-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">적재 가능 포장단위</span>
+                  <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+                    {loadingPkgs.length}건
+                  </span>
+                  <span className="max-w-[200px] truncate text-[11px] text-muted-foreground">
+                    — {selectedLoading.loading_name}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openPkgMatchModal}>
+                    <Plus className="mr-1 h-3 w-3" /> 포장단위 추가
+                  </Button>
+                  <Button
+                    size="sm" variant="ghost" className="h-7 w-7 p-0 text-muted-foreground"
+                    onClick={() => { setSelectedLoading(null); setLoadingPkgs([]); }}
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <div className="flex-1 overflow-auto">
+                {loadingPkgsLoading ? (
+                  <div className="flex h-24 items-center justify-center">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : loadingPkgs.length === 0 ? (
+                  <div className="flex h-24 flex-col items-center justify-center gap-1.5">
+                    <Inbox className="h-5 w-5 text-muted-foreground/40" />
+                    <p className="text-xs text-muted-foreground">등록된 포장단위가 없어요</p>
+                  </div>
+                ) : (
+                  <Table>
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장코드</TableHead>
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장명</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                        <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대수량</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">적재방향</TableHead>
+                        <TableHead className="p-2 w-[40px]" />
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {loadingPkgs.map((lp) => (
+                        <TableRow key={lp.id} className="text-xs">
+                          <TableCell className="p-2 font-medium">{lp.pkg_code}</TableCell>
+                          <TableCell className="p-2">{lp.pkg_name || "-"}</TableCell>
+                          <TableCell className="p-2">{PKG_TYPE_LABEL[lp.pkg_type || ""] || lp.pkg_type || "-"}</TableCell>
+                          <TableCell className="p-2 text-right font-semibold">{Number(lp.max_load_qty).toLocaleString()}</TableCell>
+                          <TableCell className="p-2">{lp.load_method || "-"}</TableCell>
+                          <TableCell className="p-2 text-center">
+                            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeleteLoadPkg(lp)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* 포장재 등록/수정 모달 */}
+      <Dialog open={pkgModalOpen} onOpenChange={setPkgModalOpen}>
+        <DialogContent className="max-w-2xl" style={{ maxHeight: "90vh", overflowY: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{pkgModalMode === "create" ? "포장재 등록" : "포장재 수정"}</DialogTitle>
+            <DialogDescription>품목정보에서 포장재를 선택하면 코드와 이름이 자동 연동됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            {pkgModalMode === "create" && (
+              <div className="rounded-lg border bg-muted/50 p-4">
+                <Label className="mb-2 block text-xs font-semibold">품목정보 연결 (구분: 포장재)</Label>
+                <Popover open={pkgItemPopoverOpen} onOpenChange={setPkgItemPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" role="combobox" className="h-9 w-full justify-between text-sm font-normal">
+                      {pkgForm.pkg_code ? `${pkgForm.pkg_name} (${pkgForm.pkg_code})` : "품목정보에서 포장재를 선택하세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                    <Command filter={(value, search) => {
+                      const item = pkgItemOptions.find((i) => i.id === value);
+                      if (!item) return 0;
+                      const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
+                      return target.includes(search.toLowerCase()) ? 1 : 0;
+                    }}>
+                      <CommandInput placeholder="품목코드 / 품목명 검색..." />
+                      <CommandList className="max-h-[200px]">
+                        <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                        {pkgItemOptions.map((item) => (
+                          <CommandItem key={item.id} value={item.id} onSelect={() => onPkgItemSelect(item)} className="text-xs">
+                            <Check className={cn("mr-2 h-3 w-3", pkgForm.pkg_code === item.item_number ? "opacity-100" : "opacity-0")} />
+                            <span className="font-medium">{item.item_name}</span>
+                            <span className="ml-2 text-muted-foreground">{item.item_number}</span>
+                            {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
+                          </CommandItem>
+                        ))}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+            <div className="grid grid-cols-2 gap-4">
+              <div><Label className="text-xs">품목코드</Label><Input value={pkgForm.pkg_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div><Label className="text-xs">포장명</Label><Input value={pkgForm.pkg_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div>
+                <Label className="text-xs">포장유형 <span className="text-destructive">*</span></Label>
+                <Select value={pkgForm.pkg_type || ""} onValueChange={(v) => setPkgForm((p) => ({ ...p, pkg_type: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>{Object.entries(PKG_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">상태</Label>
+                <Select value={pkgForm.status || "ACTIVE"} onValueChange={(v) => setPkgForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold">규격정보</Label>
+              <div className="mt-2 grid grid-cols-3 gap-3">
+                <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={pkgForm.width_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={pkgForm.length_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={pkgForm.height_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={pkgForm.self_weight_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={pkgForm.max_load_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">내용적(L)</Label><Input type="number" value={pkgForm.volume_l || ""} onChange={(e) => setPkgForm((p) => ({ ...p, volume_l: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+              </div>
+            </div>
+            <div><Label className="text-xs">비고</Label><Input value={pkgForm.remarks || ""} onChange={(e) => setPkgForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setPkgModalOpen(false)}>취소</Button>
+            <Button onClick={savePkgUnit} disabled={saving}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 적재함 등록/수정 모달 */}
-      <FullscreenDialog open={loadModalOpen} onOpenChange={setLoadModalOpen}
-        title={loadModalMode === "create" ? "적재함 등록" : "적재함 수정"}
-        description="품목정보에서 적재함을 선택하면 코드와 이름이 자동 연동됩니다."
-        footer={
-          <div className="flex gap-2">
+      <Dialog open={loadModalOpen} onOpenChange={setLoadModalOpen}>
+        <DialogContent className="max-w-2xl" style={{ maxHeight: "90vh", overflowY: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{loadModalMode === "create" ? "적재함 등록" : "적재함 수정"}</DialogTitle>
+            <DialogDescription>품목정보에서 적재함을 선택하면 코드와 이름이 자동 연동됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            {loadModalMode === "create" && (
+              <div className="rounded-lg border bg-muted/50 p-4">
+                <Label className="mb-2 block text-xs font-semibold">품목정보 연결 (구분: 적재함)</Label>
+                <Popover open={loadItemPopoverOpen} onOpenChange={setLoadItemPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" role="combobox" className="h-9 w-full justify-between text-sm font-normal">
+                      {loadForm.loading_code ? `${loadForm.loading_name} (${loadForm.loading_code})` : "품목정보에서 적재함을 선택하세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                    <Command filter={(value, search) => {
+                      const item = loadItemOptions.find((i) => i.id === value);
+                      if (!item) return 0;
+                      const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
+                      return target.includes(search.toLowerCase()) ? 1 : 0;
+                    }}>
+                      <CommandInput placeholder="품목코드 / 품목명 검색..." />
+                      <CommandList className="max-h-[200px]">
+                        <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                        {loadItemOptions.map((item) => (
+                          <CommandItem key={item.id} value={item.id} onSelect={() => onLoadItemSelect(item)} className="text-xs">
+                            <Check className={cn("mr-2 h-3 w-3", loadForm.loading_code === item.item_number ? "opacity-100" : "opacity-0")} />
+                            <span className="font-medium">{item.item_name}</span>
+                            <span className="ml-2 text-muted-foreground">{item.item_number}</span>
+                            {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
+                          </CommandItem>
+                        ))}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+            <div className="grid grid-cols-2 gap-4">
+              <div><Label className="text-xs">적재함코드</Label><Input value={loadForm.loading_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div><Label className="text-xs">적재함명</Label><Input value={loadForm.loading_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div>
+                <Label className="text-xs">적재유형 <span className="text-destructive">*</span></Label>
+                <Select value={loadForm.loading_type || ""} onValueChange={(v) => setLoadForm((p) => ({ ...p, loading_type: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>{Object.entries(LOADING_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">상태</Label>
+                <Select value={loadForm.status || "ACTIVE"} onValueChange={(v) => setLoadForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold">규격정보</Label>
+              <div className="mt-2 grid grid-cols-3 gap-3">
+                <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={loadForm.width_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={loadForm.length_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={loadForm.height_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={loadForm.self_weight_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={loadForm.max_load_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대단수</Label><Input type="number" value={loadForm.max_stack || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_stack: e.target.value }))} className="h-9 text-xs" /></div>
+              </div>
+            </div>
+            <div><Label className="text-xs">비고</Label><Input value={loadForm.remarks || ""} onChange={(e) => setLoadForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
+          </div>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setLoadModalOpen(false)}>취소</Button>
-            <Button onClick={saveLoadingUnit} disabled={saving}>{saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장</Button>
-          </div>
-        }
-      >
-        <div className="space-y-4 p-6">
-          {loadModalMode === "create" && (
-            <div className="rounded-lg border bg-green-50 dark:bg-green-950/20 p-4">
-              <Label className="text-xs font-semibold mb-2 block">품목정보 연결 (구분: 적재함)</Label>
-              <Popover open={loadItemPopoverOpen} onOpenChange={setLoadItemPopoverOpen}>
-                <PopoverTrigger asChild>
-                  <Button variant="outline" role="combobox" className="w-full justify-between h-9 text-sm font-normal">
-                    {loadForm.loading_code
-                      ? `${loadForm.loading_name} (${loadForm.loading_code})`
-                      : "품목정보에서 적재함을 선택하세요"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
-                  <Command filter={(value, search) => {
-                    const item = loadItemOptions.find((i) => i.id === value);
-                    if (!item) return 0;
-                    const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
-                    return target.includes(search.toLowerCase()) ? 1 : 0;
-                  }}>
-                    <CommandInput placeholder="품목코드 / 품목명 검색..." />
-                    <CommandList className="max-h-[200px]">
-                      <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
-                      {loadItemOptions.map((item) => (
-                        <CommandItem key={item.id} value={item.id} onSelect={() => onLoadItemSelect(item)} className="text-xs">
-                          <Check className={cn("mr-2 h-3 w-3", loadForm.loading_code === item.item_number ? "opacity-100" : "opacity-0")} />
-                          <span className="font-medium">{item.item_name}</span>
-                          <span className="ml-2 text-muted-foreground">{item.item_number}</span>
-                          {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
-                        </CommandItem>
-                      ))}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
-          )}
-          <div className="grid grid-cols-2 gap-4">
-            <div><Label className="text-xs">적재함코드</Label><Input value={loadForm.loading_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
-            <div><Label className="text-xs">적재함명</Label><Input value={loadForm.loading_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
-            <div>
-              <Label className="text-xs">적재유형 <span className="text-destructive">*</span></Label>
-              <Select value={loadForm.loading_type || ""} onValueChange={(v) => setLoadForm((p) => ({ ...p, loading_type: v }))}>
-                <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
-                <SelectContent>{Object.entries(LOADING_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
-              </Select>
-            </div>
-            <div>
-              <Label className="text-xs">상태</Label>
-              <Select value={loadForm.status || "ACTIVE"} onValueChange={(v) => setLoadForm((p) => ({ ...p, status: v }))}>
-                <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
-                <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
-              </Select>
-            </div>
-          </div>
-          <div>
-            <Label className="text-xs font-semibold">규격정보</Label>
-            <div className="grid grid-cols-3 gap-3 mt-2">
-              <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={loadForm.width_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={loadForm.length_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={loadForm.height_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-8 text-xs" /></div>
-              <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={loadForm.self_weight_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-              <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={loadForm.max_load_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-8 text-xs" step="0.1" /></div>
-              <div><Label className="text-[10px]">최대단수</Label><Input type="number" value={loadForm.max_stack || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_stack: e.target.value }))} className="h-8 text-xs" /></div>
-            </div>
-          </div>
-          <div><Label className="text-xs">비고</Label><Input value={loadForm.remarks || ""} onChange={(e) => setLoadForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
-        </div>
-      </FullscreenDialog>
+            <Button onClick={saveLoadingUnit} disabled={saving}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 품목 추가 모달 (포장재 매칭) */}
       <Dialog open={itemMatchModalOpen} onOpenChange={setItemMatchModalOpen}>
@@ -791,7 +860,9 @@ export default function PackagingPage() {
             <DialogDescription>포장재에 매칭할 품목을 검색하여 추가합니다.</DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
-            <Input placeholder="품목코드 / 품목명 검색 (입력 시 자동 검색)" value={itemMatchKeyword}
+            <Input
+              placeholder="품목코드 / 품목명 검색 (입력 시 자동 검색)"
+              value={itemMatchKeyword}
               onChange={(e) => {
                 setItemMatchKeyword(e.target.value);
                 const kw = e.target.value;
@@ -803,30 +874,34 @@ export default function PackagingPage() {
                   } catch { /* ignore */ }
                 }, 300);
               }}
-              className="h-9 text-xs" />
-            <div className="max-h-[300px] overflow-auto border rounded">
+              className="h-9 text-xs"
+            />
+            <div className="max-h-[300px] overflow-auto rounded border">
               <Table>
-                <TableHeader>
-                  <TableRow className="text-[11px]">
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
                     <TableHead className="p-2 w-[30px]" />
-                    <TableHead className="p-2 w-[130px]">품목코드</TableHead>
-                    <TableHead className="p-2">품목명</TableHead>
-                    <TableHead className="p-2 w-[100px]">규격</TableHead>
-                    <TableHead className="p-2 w-[80px]">재질</TableHead>
-                    <TableHead className="p-2 w-[50px]">단위</TableHead>
+                    <TableHead className="w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                    <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {itemMatchResults.filter(i => !pkgItems.some(pi => pi.item_number === i.item_number)).length === 0 ? (
-                    <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground text-xs h-16">검색 결과가 없습니다</TableCell></TableRow>
+                    <TableRow><TableCell colSpan={6} className="h-16 text-center text-[13px] text-muted-foreground">검색 결과가 없습니다</TableCell></TableRow>
                   ) : itemMatchResults.filter(i => !pkgItems.some(pi => pi.item_number === i.item_number)).map((item) => (
-                    <TableRow key={item.id} className={cn("cursor-pointer text-xs", itemMatchSelected?.id === item.id && "bg-primary/10")}
-                      onClick={() => setItemMatchSelected(item)}>
+                    <TableRow
+                      key={item.id}
+                      className={cn("cursor-pointer text-xs", itemMatchSelected?.id === item.id && "bg-primary/10")}
+                      onClick={() => setItemMatchSelected(item)}
+                    >
                       <TableCell className="p-2 text-center">{itemMatchSelected?.id === item.id ? "✓" : ""}</TableCell>
-                      <TableCell className="p-2 font-medium truncate max-w-[130px]">{item.item_number}</TableCell>
-                      <TableCell className="p-2 truncate max-w-[200px]">{item.item_name}</TableCell>
-                      <TableCell className="p-2 truncate">{item.spec || "-"}</TableCell>
-                      <TableCell className="p-2 truncate">{item.material || "-"}</TableCell>
+                      <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
+                      <TableCell className="p-2">{item.item_name}</TableCell>
+                      <TableCell className="p-2">{item.spec || "-"}</TableCell>
+                      <TableCell className="p-2">{item.material || "-"}</TableCell>
                       <TableCell className="p-2">{item.unit || "EA"}</TableCell>
                     </TableRow>
                   ))}
@@ -836,17 +911,26 @@ export default function PackagingPage() {
             <div className="flex items-end gap-4">
               <div className="flex-1">
                 <Label className="text-xs">선택된 품목</Label>
-                <Input value={itemMatchSelected ? `${itemMatchSelected.item_name} (${itemMatchSelected.item_number})` : ""} readOnly className="h-9 bg-muted text-xs" />
+                <Input
+                  value={itemMatchSelected ? `${itemMatchSelected.item_name} (${itemMatchSelected.item_number})` : ""}
+                  readOnly className="h-9 bg-muted text-xs"
+                />
               </div>
               <div className="w-[120px]">
                 <Label htmlFor="pkg-item-match-qty" className="text-xs">포장수량(EA) <span className="text-destructive">*</span></Label>
-                <Input id="pkg-item-match-qty" type="number" value={itemMatchQty} onChange={(e) => setItemMatchQty(Number(e.target.value) || 0)} min={1} className="h-9 text-xs" />
+                <Input
+                  id="pkg-item-match-qty" type="number" value={itemMatchQty}
+                  onChange={(e) => setItemMatchQty(Number(e.target.value) || 0)}
+                  min={1} className="h-9 text-xs"
+                />
               </div>
             </div>
           </div>
           <DialogFooter>
             <Button type="button" variant="outline" onClick={() => setItemMatchModalOpen(false)}>취소</Button>
-            <Button type="button" data-action-type="custom" onClick={saveItemMatch} disabled={saving || !itemMatchSelected}>{saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가</Button>
+            <Button type="button" data-action-type="custom" onClick={saveItemMatch} disabled={saving || !itemMatchSelected}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -865,16 +949,16 @@ export default function PackagingPage() {
               onChange={(e) => setPkgMatchSearchKw(e.target.value)}
               className="h-9 text-xs"
             />
-            <div className="max-h-[300px] overflow-auto border rounded">
+            <div className="max-h-[300px] overflow-auto rounded border">
               <Table>
-                <TableHeader>
-                  <TableRow className="text-[11px]">
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
                     <TableHead className="p-2 w-[30px]" />
-                    <TableHead className="p-2 w-[120px]">포장코드</TableHead>
-                    <TableHead className="p-2">포장명</TableHead>
-                    <TableHead className="p-2 w-[70px]">유형</TableHead>
-                    <TableHead className="p-2 w-[100px]">크기(mm)</TableHead>
-                    <TableHead className="p-2 w-[80px] text-right">최대중량</TableHead>
+                    <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장코드</TableHead>
+                    <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장명</TableHead>
+                    <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">크기(mm)</TableHead>
+                    <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대중량</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -886,10 +970,13 @@ export default function PackagingPage() {
                       && (!kw || p.pkg_code?.toLowerCase().includes(kw) || p.pkg_name?.toLowerCase().includes(kw))
                     );
                     return filtered.length === 0 ? (
-                      <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground text-xs h-16">추가 가능한 포장단위가 없습니다</TableCell></TableRow>
+                      <TableRow><TableCell colSpan={6} className="h-16 text-center text-[13px] text-muted-foreground">추가 가능한 포장단위가 없습니다</TableCell></TableRow>
                     ) : filtered.map((p) => (
-                      <TableRow key={p.id} className={cn("cursor-pointer text-xs", pkgMatchSelected?.id === p.id && "bg-primary/10")}
-                        onClick={() => setPkgMatchSelected(p)}>
+                      <TableRow
+                        key={p.id}
+                        className={cn("cursor-pointer text-xs", pkgMatchSelected?.id === p.id && "bg-primary/10")}
+                        onClick={() => setPkgMatchSelected(p)}
+                      >
                         <TableCell className="p-2 text-center">{pkgMatchSelected?.id === p.id ? "✓" : ""}</TableCell>
                         <TableCell className="p-2 font-medium">{p.pkg_code}</TableCell>
                         <TableCell className="p-2">{p.pkg_name}</TableCell>
@@ -905,22 +992,42 @@ export default function PackagingPage() {
             <div className="flex items-end gap-4">
               <div className="w-[150px]">
                 <Label htmlFor="loading-pkg-match-qty" className="text-xs">최대적재수량 <span className="text-destructive">*</span></Label>
-                <Input id="loading-pkg-match-qty" type="number" value={pkgMatchQty} onChange={(e) => setPkgMatchQty(Number(e.target.value) || 0)} min={1} className="h-9 text-xs" />
+                <Input
+                  id="loading-pkg-match-qty" type="number" value={pkgMatchQty}
+                  onChange={(e) => setPkgMatchQty(Number(e.target.value) || 0)}
+                  min={1} className="h-9 text-xs"
+                />
               </div>
               <div className="flex-1">
                 <Label className="text-xs">적재방향</Label>
-                <Input value={pkgMatchMethod} onChange={(e) => setPkgMatchMethod(e.target.value)} placeholder="수직/수평/혼합" className="h-9 text-xs" />
+                <Input
+                  value={pkgMatchMethod}
+                  onChange={(e) => setPkgMatchMethod(e.target.value)}
+                  placeholder="수직/수평/혼합"
+                  className="h-9 text-xs"
+                />
               </div>
             </div>
           </div>
           <DialogFooter>
             <Button type="button" variant="outline" onClick={() => setPkgMatchModalOpen(false)}>취소</Button>
-            <Button type="button" data-action-type="custom" onClick={savePkgMatch} disabled={saving || !pkgMatchSelected}>{saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가</Button>
+            <Button type="button" data-action-type="custom" onClick={savePkgMatch} disabled={saving || !pkgMatchSelected}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_7/logistics/receiving/page.tsx b/frontend/app/(main)/COMPANY_7/logistics/receiving/page.tsx
index 4222a23d..85cdc23c 100644
--- a/frontend/app/(main)/COMPANY_7/logistics/receiving/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/logistics/receiving/page.tsx
@@ -18,7 +18,14 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -31,18 +38,29 @@ import {
   Search,
   Plus,
   Trash2,
-  RotateCcw,
   Loader2,
-  Package,
+  Inbox,
   X,
   Save,
   ChevronRight,
+  ChevronDown,
   ChevronLeft,
   ChevronsLeft,
   ChevronsRight,
+  Settings2,
+  Filter,
+  Check,
+  ArrowUp,
+  ArrowDown,
 } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+// EDataTable 제거 — 마스터-디테일 그룹 테이블로 교체
+// API: /receiving/*
 import {
   getReceivingList,
   createReceiving,
@@ -59,22 +77,186 @@ import {
   type WarehouseOption,
 } from "@/lib/api/receiving";
 
+const GRID_COLUMNS = [
+  { key: "inbound_number", label: "입고번호" },
+  { key: "inbound_type", label: "입고유형" },
+  { key: "inbound_date", label: "입고일" },
+  { key: "reference_number", label: "참조번호" },
+  { key: "source_type", label: "데이터출처" },
+  { key: "supplier_name", label: "공급처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "inbound_qty", label: "입고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+  { key: "warehouse_name", label: "창고" },
+  { key: "inbound_status", label: "입고상태" },
+  { key: "remark", label: "비고" },
+];
+
+// 마스터 헤더 레이아웃 (입고번호 뒤, 디테일 7컬럼 위에 colSpan으로 맵핑)
+const MASTER_BODY_LAYOUT = [
+  { key: "inbound_type", label: "입고유형", colSpan: 1 },
+  { key: "inbound_date", label: "입고일", colSpan: 1 },
+  { key: "reference_number", label: "참조번호", colSpan: 1 },
+  { key: "supplier_name", label: "공급처", colSpan: 1 },
+  { key: "warehouse_name", label: "창고", colSpan: 1 },
+  { key: "inbound_status", label: "입고상태", colSpan: 1 },
+  { key: "memo", label: "비고", colSpan: 1 },
+];
+
+// 디테일 헤더 컬럼
+const DETAIL_HEADER_COLS = [
+  { key: "source_table", label: "출처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "inbound_qty", label: "입고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+];
+
+// 마스터 필드 키 목록 (필터 분류용)
+const MASTER_KEYS = new Set(["inbound_number", ...MASTER_BODY_LAYOUT.map((c) => c.key)]);
+
+// 디테일 필드 키 매핑 (GRID_COLUMNS key → DETAIL_HEADER_COLS key)
+const DETAIL_KEY_MAP: Record<string, string> = {
+  source_type: "source_table",
+  item_number: "item_number",
+  item_name: "item_name",
+  spec: "spec",
+  inbound_qty: "inbound_qty",
+  unit_price: "unit_price",
+  total_amount: "total_amount",
+};
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 // 입고유형 옵션
 const INBOUND_TYPES = [
-  { value: "구매입고", label: "구매입고", color: "bg-blue-100 text-blue-800" },
-  { value: "반품입고", label: "반품입고", color: "bg-pink-100 text-pink-800" },
-  { value: "기타입고", label: "기타입고", color: "bg-gray-100 text-gray-800" },
+  { value: "구매입고", label: "구매입고" },
+  { value: "외주입고", label: "외주입고" },
+  { value: "사급자재입고", label: "사급자재입고" },
+  { value: "반품입고", label: "반품입고" },
+  { value: "기타입고", label: "기타입고" },
 ];
 
+// 입고유형 카테고리 코드→라벨 매핑
+const INBOUND_TYPE_CODE_MAP: Record<string, string> = {
+  CAT_MLYTB8ON_A3AU: "구매입고",
+  CAT_MLYTBMH6_9AB7: "외주입고",
+  CAT_MLYTBSLW_5N81: "사급자재입고",
+  CAT_MLYTBGEV_N23U: "반품입고",
+  CAT_MLYTBYLU_0Z5T: "기타입고",
+};
+const resolveInboundType = (v: string) => INBOUND_TYPE_CODE_MAP[v] || v || "-";
+
 const INBOUND_STATUS_OPTIONS = [
-  { value: "대기", label: "대기", color: "bg-amber-100 text-amber-800" },
-  { value: "입고완료", label: "입고완료", color: "bg-emerald-100 text-emerald-800" },
-  { value: "부분입고", label: "부분입고", color: "bg-amber-100 text-amber-800" },
-  { value: "입고취소", label: "입고취소", color: "bg-red-100 text-red-800" },
+  { value: "대기", label: "대기" },
+  { value: "입고완료", label: "입고완료" },
+  { value: "부분입고", label: "부분입고" },
+  { value: "입고취소", label: "입고취소" },
 ];
 
-const getTypeColor = (type: string) => INBOUND_TYPES.find((t) => t.value === type)?.color || "bg-gray-100 text-gray-800";
-const getStatusColor = (status: string) => INBOUND_STATUS_OPTIONS.find((s) => s.value === status)?.color || "bg-gray-100 text-gray-800";
+const getTypeVariant = (type: string): "default" | "secondary" | "outline" => {
+  switch (type) {
+    case "구매입고": return "default";
+    case "반품입고": return "secondary";
+    default: return "outline";
+  }
+};
+
+const getStatusVariant = (status: string): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "입고완료": return "default";
+    case "부분입고": return "secondary";
+    case "입고취소": return "destructive";
+    default: return "outline";
+  }
+};
 
 // 소스 테이블 한글명 매핑
 const SOURCE_TABLE_LABEL: Record<string, string> = {
@@ -103,17 +285,45 @@ interface SelectedSourceItem {
 }
 
 export default function ReceivingPage() {
+  const ts = useTableSettings("c16-receiving", "inbound_mng", GRID_COLUMNS);
+
+  // ts.visibleColumns 기반 마스터/디테일 컬럼 계산
+  const visibleMasterLayout = useMemo(() => {
+    const ordered: typeof MASTER_BODY_LAYOUT = [];
+    for (const vc of ts.visibleColumns) {
+      const m = MASTER_BODY_LAYOUT.find((ml) => ml.key === vc.key);
+      if (m) ordered.push(m);
+    }
+    return ordered.length > 0 ? ordered : MASTER_BODY_LAYOUT;
+  }, [ts.visibleColumns]);
+
+  const visibleDetailCols = useMemo(() => {
+    const ordered: typeof DETAIL_HEADER_COLS = [];
+    for (const vc of ts.visibleColumns) {
+      const detailKey = DETAIL_KEY_MAP[vc.key];
+      if (detailKey) {
+        const d = DETAIL_HEADER_COLS.find((dc) => dc.key === detailKey);
+        if (d) ordered.push(d);
+      }
+    }
+    return ordered.length > 0 ? ordered : DETAIL_HEADER_COLS;
+  }, [ts.visibleColumns]);
+
+  const TOTAL_COLS = 3 + visibleMasterLayout.length;
+
   // 목록 데이터
   const [data, setData] = useState<InboundItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [checkedIds, setCheckedIds] = useState<string[]>([]);
 
   // 검색 필터
-  const [searchType, setSearchType] = useState("all");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 마스터-디테일 그룹 테이블
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+  const [closingOrders, setClosingOrders] = useState<Set<string>>(new Set());
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
 
   // 등록 모달
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -144,14 +354,8 @@ export default function ReceivingPage() {
   // 구매관리 division 코드 (라벨 기준 조회)
   const [purchaseDivisionCode, setPurchaseDivisionCode] = useState<string>("");
 
-  // 날짜 초기화 + 구매관리 division 코드 로드
+  // 구매관리 division 코드 로드
   useEffect(() => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-
     // division 카테고리에서 "구매관리" 라벨의 코드 조회
     apiClient.get("/table-categories/item_info/division/values").then((res) => {
       const vals = res.data?.data || [];
@@ -164,20 +368,27 @@ export default function ReceivingPage() {
   const fetchList = useCallback(async () => {
     setLoading(true);
     try {
-      const res = await getReceivingList({
-        inbound_type: searchType !== "all" ? searchType : undefined,
-        inbound_status: searchStatus !== "all" ? searchStatus : undefined,
-        search_keyword: searchKeyword || undefined,
-        date_from: searchDateFrom || undefined,
-        date_to: searchDateTo || undefined,
-      });
+      const params: Record<string, string | undefined> = {};
+      for (const f of searchFilters) {
+        if (!f.value) continue;
+        if (f.columnName === "inbound_type") params.inbound_type = f.value;
+        else if (f.columnName === "inbound_status") params.inbound_status = f.value;
+        else if (f.columnName === "inbound_date" && f.operator === "between") {
+          const [from, to] = f.value.split("~").map((s) => s.trim());
+          if (from) params.date_from = from;
+          if (to) params.date_to = to;
+        } else {
+          params.search_keyword = f.value;
+        }
+      }
+      const res = await getReceivingList(params);
       if (res.success) setData(res.data);
     } catch {
       // 에러 무시
     } finally {
       setLoading(false);
     }
-  }, [searchType, searchStatus, searchKeyword, searchDateFrom, searchDateTo]);
+  }, [searchFilters]);
 
   useEffect(() => {
     fetchList();
@@ -195,26 +406,149 @@ export default function ReceivingPage() {
     })();
   }, []);
 
-  // 검색 초기화
-  const handleReset = () => {
-    setSearchType("all");
-    setSearchStatus("all");
-    setSearchKeyword("");
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
+  // 필터 + 정렬 적용된 데이터 -> 그룹핑
+  const filteredGroups = useMemo(() => {
+    // 1차: inbound_number 기준 그룹핑
+    const allGroups: Record<string, { master: InboundItem; details: InboundItem[] }> = {};
+    for (const row of data) {
+      const key = row.inbound_number || "_no_inbound";
+      if (!allGroups[key]) {
+        allGroups[key] = { master: row, details: [] };
+      }
+      allGroups[key].details.push(row);
+    }
+
+    // 마스터 필터 / 디테일 필터 분리
+    const masterFilters: Record<string, Set<string>> = {};
+    const detailFilters: Record<string, Set<string>> = {};
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      if (MASTER_KEYS.has(colKey)) masterFilters[colKey] = values;
+      else detailFilters[colKey] = values;
+    }
+
+    // 2차: 마스터 필터 적용 (그룹 단위)
+    let entries = Object.entries(allGroups);
+    if (Object.keys(masterFilters).length > 0) {
+      entries = entries.filter(([, group]) =>
+        Object.entries(masterFilters).every(([colKey, values]) => {
+          let raw = (group.master as any)?.[colKey] ?? "";
+          // 입고유형은 코드→라벨 변환된 값으로 비교
+          if (colKey === "inbound_type") raw = resolveInboundType(String(raw));
+          return values.has(String(raw));
+        })
+      );
+    }
+
+    // 3차: 디테일 필터 적용 (행 단위)
+    if (Object.keys(detailFilters).length > 0) {
+      entries = entries
+        .map(([inboundNo, group]) => {
+          const filtered = group.details.filter((row) =>
+            Object.entries(detailFilters).every(([colKey, values]) => {
+              let cellVal = (row as any)[colKey] != null ? String((row as any)[colKey]) : "";
+              if (colKey === "source_table") cellVal = SOURCE_TABLE_LABEL[cellVal] || cellVal;
+              return values.has(cellVal);
+            })
+          );
+          return [inboundNo, { ...group, details: filtered }] as [string, typeof group];
+        })
+        .filter(([, group]) => group.details.length > 0);
+    }
+
+    // 4차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      if (MASTER_KEYS.has(key)) {
+        entries.sort(([, a], [, b]) => {
+          let av: any = (a.master as any)?.[key] ?? "";
+          let bv: any = (b.master as any)?.[key] ?? "";
+          if (key === "inbound_type") { av = resolveInboundType(String(av)); bv = resolveInboundType(String(bv)); }
+          const na = Number(av); const nb = Number(bv);
+          if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+          return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+        });
+      } else {
+        entries.forEach(([, group]) => {
+          group.details.sort((a, b) => {
+            const av = (a as any)[key] ?? "";
+            const bv = (b as any)[key] ?? "";
+            const na = Number(av); const nb = Number(bv);
+            if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+            return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+          });
+        });
+      }
+    }
+
+    return Object.fromEntries(entries);
+  }, [data, headerFilters, sortState]);
+
+  // 마스터 컬럼별 고유값 (마스터 헤더 필터용)
+  const masterUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    const seenMasters = new Map<string, InboundItem>();
+    data.forEach((row) => {
+      if (row.inbound_number && !seenMasters.has(row.inbound_number)) {
+        seenMasters.set(row.inbound_number, row);
+      }
+    });
+    const masters = Array.from(seenMasters.values());
+    for (const col of [{ key: "inbound_number", label: "입고번호" }, ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label }))]) {
+      const values = new Set<string>();
+      masters.forEach((m) => {
+        let val = (m as any)?.[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "inbound_type") val = resolveInboundType(String(val));
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 디테일 컬럼별 고유값 (디테일 서브헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of DETAIL_HEADER_COLS) {
+      const values = new Set<string>();
+      data.forEach((row) => {
+        let val = (row as any)[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "source_table") val = SOURCE_TABLE_LABEL[val] || val;
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
   };
 
-  // 체크박스
-  const allChecked = data.length > 0 && checkedIds.length === data.length;
-  const toggleCheckAll = () => {
-    setCheckedIds(allChecked ? [] : data.map((d) => d.id));
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
   };
-  const toggleCheck = (id: string) => {
-    setCheckedIds((prev) =>
-      prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
     );
   };
 
@@ -495,228 +829,356 @@ export default function ReceivingPage() {
   }, [selectedItems]);
 
   return (
-    <div className="flex h-full flex-col gap-4 p-4">
-      {/* 검색 영역 */}
-      <div className="flex flex-wrap items-center gap-2 rounded-lg border bg-card p-4">
-        <Select value={searchType} onValueChange={setSearchType}>
-          <SelectTrigger className="h-9 w-[130px] text-xs">
-            <SelectValue placeholder="입고유형" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">전체 유형</SelectItem>
-            {INBOUND_TYPES.map((t) => (
-              <SelectItem key={t.value} value={t.value}>
-                {t.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Select value={searchStatus} onValueChange={setSearchStatus}>
-          <SelectTrigger className="h-9 w-[130px] text-xs">
-            <SelectValue placeholder="입고상태" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">전체 상태</SelectItem>
-            {INBOUND_STATUS_OPTIONS.map((s) => (
-              <SelectItem key={s.value} value={s.value}>
-                {s.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Input
-          placeholder="입고번호 / 품목명 / 참조번호 검색"
-          value={searchKeyword}
-          onChange={(e) => setSearchKeyword(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && fetchList()}
-          className="h-9 w-[240px] text-xs"
-        />
-
-        <div className="flex items-center gap-1">
-          <Input
-            type="date"
-            value={searchDateFrom}
-            onChange={(e) => setSearchDateFrom(e.target.value)}
-            className="h-9 w-[140px] text-xs"
-          />
-          <span className="text-muted-foreground text-xs">~</span>
-          <Input
-            type="date"
-            value={searchDateTo}
-            onChange={(e) => setSearchDateTo(e.target.value)}
-            className="h-9 w-[140px] text-xs"
-          />
-        </div>
-
-        <Button size="sm" onClick={fetchList} className="h-9">
-          <Search className="mr-1 h-4 w-4" />
-          조회
-        </Button>
-        <Button size="sm" variant="outline" onClick={handleReset} className="h-9">
-          <RotateCcw className="mr-1 h-4 w-4" />
-          초기화
-        </Button>
-
-        <div className="ml-auto flex gap-2">
-          <Button size="sm" onClick={openRegisterModal} className="h-9">
-            <Plus className="mr-1 h-4 w-4" />
-            입고 등록
-          </Button>
-          <Button
-            size="sm"
-            variant="destructive"
-            onClick={handleDelete}
-            disabled={checkedIds.length === 0}
-            className="h-9"
-          >
-            <Trash2 className="mr-1 h-4 w-4" />
-            삭제 ({checkedIds.length})
-          </Button>
-        </div>
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>물류관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">입고관리</span>
       </div>
 
-      {/* 입고 목록 테이블 */}
-      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
-        <div className="flex items-center justify-between border-b px-4 py-3">
+      {/* 검색 영역 */}
+      <DynamicSearchFilter
+        tableName="inbound_mng"
+        filterId="c16-receiving"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={data.length}
+        extraActions={
           <div className="flex items-center gap-2">
-            <Package className="text-muted-foreground h-5 w-5" />
-            <h3 className="text-base font-semibold">입고 목록</h3>
-            <span className="text-muted-foreground text-sm">
-              총 {data.length}건
+            <Button size="sm" onClick={openRegisterModal} className="h-9">
+              <Plus className="mr-1 h-4 w-4" />
+              입고 등록
+            </Button>
+            <div className="h-4 w-px bg-border" />
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={handleDelete}
+              disabled={checkedIds.length === 0}
+              className="h-9 text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+            >
+              <Trash2 className="mr-1 h-4 w-4" />
+              삭제 ({checkedIds.length})
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 입고 목록 테이블 (마스터-디테일 그룹) */}
+      <div className="flex-1 overflow-hidden rounded-lg border border-border bg-card">
+        <div className="flex items-center justify-between border-b bg-muted/50 px-4 py-2.5">
+          <div className="flex items-center gap-2">
+            <h3 className="text-[13px] font-bold">입고 목록</h3>
+            <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+              {Object.keys(filteredGroups).length}건
             </span>
           </div>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
         </div>
 
-        <div className="h-[calc(100%-52px)] overflow-auto">
-          <Table>
-            <TableHeader>
-              <TableRow className="bg-muted/50">
-                <TableHead className="w-[40px] text-center">
+        <div className="h-[calc(100%-44px)] overflow-auto">
+          <Table style={{ minWidth: `${216 + visibleMasterLayout.length * 120}px` }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "36px" }} />
+              <col style={{ width: "140px" }} />
+              {visibleMasterLayout.map((col) => (
+                <col key={col.key} style={{ width: ts.getWidth(col.key) ? `${ts.getWidth(col.key)}px` : undefined }} />
+              ))}
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
                   <Checkbox
-                    checked={allChecked}
-                    onCheckedChange={toggleCheckAll}
+                    checked={(() => {
+                      const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
                   />
                 </TableHead>
-                <TableHead className="w-[130px]">입고번호</TableHead>
-                <TableHead className="w-[90px]">입고유형</TableHead>
-                <TableHead className="w-[100px]">입고일</TableHead>
-                <TableHead className="w-[120px]">참조번호</TableHead>
-                <TableHead className="w-[80px]">데이터출처</TableHead>
-                <TableHead className="w-[120px]">공급처</TableHead>
-                <TableHead className="w-[100px]">품목코드</TableHead>
-                <TableHead className="min-w-[150px]">품목명</TableHead>
-                <TableHead className="w-[80px]">규격</TableHead>
-                <TableHead className="w-[80px] text-right">입고수량</TableHead>
-                <TableHead className="w-[90px] text-right">단가</TableHead>
-                <TableHead className="w-[100px] text-right">금액</TableHead>
-                <TableHead className="w-[100px]">창고</TableHead>
-                <TableHead className="w-[90px] text-center">입고상태</TableHead>
-                <TableHead className="w-[100px]">비고</TableHead>
+                <TableHead />
+                {/* 입고번호 (별도 컬럼) */}
+                <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                  <div className="inline-flex items-center gap-1">
+                    <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort("inbound_number")}>
+                      <span className="truncate">입고번호</span>
+                      {sortState?.key === "inbound_number" && (
+                        sortState.direction === "asc"
+                          ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                          : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                      )}
+                    </div>
+                    {(masterUniqueValues["inbound_number"] || []).length > 0 && (
+                      <HeaderFilterPopover
+                        colKey="inbound_number" colLabel="입고번호"
+                        uniqueValues={masterUniqueValues["inbound_number"] || []}
+                        filterValues={headerFilters["inbound_number"] || new Set<string>()}
+                        onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                      />
+                    )}
+                  </div>
+                </TableHead>
+                {/* 마스터 필드 헤더 (ts.visibleColumns 순서) */}
+                {visibleMasterLayout.map((col) => (
+                  <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                    <div className="inline-flex items-center gap-1">
+                      <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                        <span className="truncate">{col.label}</span>
+                        {sortState?.key === col.key && (
+                          sortState.direction === "asc"
+                            ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                            : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                        )}
+                      </div>
+                      {(masterUniqueValues[col.key] || []).length > 0 && (
+                        <HeaderFilterPopover
+                          colKey={col.key} colLabel={col.label}
+                          uniqueValues={masterUniqueValues[col.key] || []}
+                          filterValues={headerFilters[col.key] || new Set<string>()}
+                          onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                        />
+                      )}
+                    </div>
+                  </TableHead>
+                ))}
               </TableRow>
             </TableHeader>
             <TableBody>
               {loading ? (
                 <TableRow>
-                  <TableCell colSpan={16} className="h-40 text-center">
-                    <Loader2 className="mx-auto h-6 w-6 animate-spin" />
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
                   </TableCell>
                 </TableRow>
-              ) : data.length === 0 ? (
+              ) : Object.keys(filteredGroups).length === 0 ? (
                 <TableRow>
-                  <TableCell
-                    colSpan={16}
-                    className="text-muted-foreground h-40 text-center"
-                  >
-                    <div className="flex flex-col items-center gap-2">
-                      <Package className="h-10 w-10 opacity-30" />
-                      <p>등록된 입고 내역이 없습니다</p>
-                      <p className="text-xs">
-                        &apos;입고 등록&apos; 버튼을 클릭하여 입고를 추가하세요
-                      </p>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <Inbox className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 입고 내역이 없어요</span>
                     </div>
                   </TableCell>
                 </TableRow>
               ) : (
-                data.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    className={cn(
-                      "cursor-pointer transition-colors",
-                      checkedIds.includes(row.id) && "bg-primary/5"
-                    )}
-                    onClick={() => toggleCheck(row.id)}
-                  >
-                    <TableCell
-                      className="text-center"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Checkbox
-                        checked={checkedIds.includes(row.id)}
-                        onCheckedChange={() => toggleCheck(row.id)}
-                      />
-                    </TableCell>
-                    <TableCell className="max-w-[130px] truncate font-medium" title={row.inbound_number}>
-                      {row.inbound_number}
-                    </TableCell>
-                    <TableCell>
-                      <Badge
-                        variant="outline"
-                        className={cn("text-[11px]", getTypeColor(row.inbound_type))}
-                      >
-                        {row.inbound_type || "-"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.inbound_date
-                        ? new Date(row.inbound_date).toLocaleDateString("ko-KR")
-                        : "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.reference_number || "-"}>
-                      {row.reference_number || "-"}
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.source_table
-                        ? SOURCE_TABLE_LABEL[row.source_table] || row.source_table
-                        : "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.supplier_name || "-"}>
-                      {row.supplier_name || "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[130px] truncate text-xs" title={row.item_number || "-"}>
-                      {row.item_number || "-"}
-                    </TableCell>
-                    <TableCell className="max-w-[150px] truncate text-xs" title={row.item_name || "-"}>{row.item_name || "-"}</TableCell>
-                    <TableCell className="max-w-[100px] truncate text-xs" title={row.spec || "-"}>{row.spec || "-"}</TableCell>
-                    <TableCell className="text-right text-xs font-semibold">
-                      {Number(row.inbound_qty || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-right text-xs">
-                      {Number(row.unit_price || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-right text-xs font-semibold">
-                      {Number(row.total_amount || 0).toLocaleString()}
-                    </TableCell>
-                    <TableCell className="text-xs">
-                      {row.warehouse_name || row.warehouse_code || "-"}
-                    </TableCell>
-                    <TableCell className="text-center">
-                      <Badge
-                        variant="outline"
+                Object.entries(filteredGroups).map(([inboundNo, group]) => {
+                  const isExpanded = expandedOrders.has(inboundNo);
+                  const detailIds = group.details.map((d) => d.id);
+                  const allDetailChecked = detailIds.length > 0 && detailIds.every((id) => checkedIds.includes(id));
+                  const someDetailChecked = detailIds.some((id) => checkedIds.includes(id));
+                  const master = group.master;
+                  return (
+                    <React.Fragment key={inboundNo}>
+                      {/* 마스터 행 */}
+                      <TableRow
+                        style={{ borderTop: "2px solid hsl(var(--border))" }}
                         className={cn(
-                          "text-[11px]",
-                          getStatusColor(row.inbound_status)
+                          "cursor-pointer border-l-[3px] border-l-transparent font-semibold tree-master-row",
+                          allDetailChecked && "border-l-primary bg-primary/5"
                         )}
+                        onClick={() => {
+                          if (expandedOrders.has(inboundNo)) {
+                            setClosingOrders((prev) => new Set(prev).add(inboundNo));
+                            setTimeout(() => {
+                              setExpandedOrders((prev) => { const next = new Set(prev); next.delete(inboundNo); return next; });
+                              setClosingOrders((prev) => { const next = new Set(prev); next.delete(inboundNo); return next; });
+                            }, 200);
+                          } else {
+                            setExpandedOrders((prev) => new Set(prev).add(inboundNo));
+                          }
+                        }}
                       >
-                        {row.inbound_status || "-"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="max-w-[120px] truncate text-xs" title={row.memo || "-"}>
-                      {row.memo || "-"}
-                    </TableCell>
-                  </TableRow>
-                ))
+                        <TableCell
+                          className="text-center cursor-pointer"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setCheckedIds((prev) => {
+                              if (allDetailChecked) return prev.filter((id) => !detailIds.includes(id));
+                              return [...new Set([...prev, ...detailIds])];
+                            });
+                          }}
+                        >
+                          <Checkbox
+                            checked={allDetailChecked}
+                            data-state={someDetailChecked && !allDetailChecked ? "indeterminate" : undefined}
+                            onCheckedChange={() => {}}
+                          />
+                        </TableCell>
+                        <TableCell className="text-center">
+                          {isExpanded
+                            ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            : <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          }
+                        </TableCell>
+                        {/* 입고번호 */}
+                        <TableCell className="font-mono whitespace-nowrap">
+                          {inboundNo}
+                          <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
+                        </TableCell>
+                        {/* 마스터 필드 (ts.visibleColumns 순서) */}
+                        {visibleMasterLayout.map((col) => {
+                          switch (col.key) {
+                            case "inbound_type": return (
+                              <TableCell key={col.key} className="text-[13px]">
+                                <Badge variant={getTypeVariant(resolveInboundType(master.inbound_type))} className="text-[11px]">
+                                  {resolveInboundType(master.inbound_type)}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "inbound_date": return (
+                              <TableCell key={col.key} className="text-[13px] whitespace-nowrap">
+                                {master.inbound_date ? new Date(master.inbound_date).toLocaleDateString("ko-KR") : "-"}
+                              </TableCell>
+                            );
+                            case "reference_number": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.reference_number || ""}</span>
+                              </TableCell>
+                            );
+                            case "supplier_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.supplier_name || ""}</span>
+                              </TableCell>
+                            );
+                            case "warehouse_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
+                              </TableCell>
+                            );
+                            case "inbound_status": return (
+                              <TableCell key={col.key} className="text-[13px]">
+                                <Badge variant={getStatusVariant(master.inbound_status)} className="text-[11px]">
+                                  {master.inbound_status || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "memo": return (
+                              <TableCell key={col.key} className="text-muted-foreground text-[13px]">
+                                <span className="block truncate max-w-[110px]">{master.memo || ""}</span>
+                              </TableCell>
+                            );
+                            default: return <TableCell key={col.key} className="text-[13px]">{(master as any)[col.key] ?? ""}</TableCell>;
+                          }
+                        })}
+                      </TableRow>
+
+                      {/* 디테일 서브 헤더 (펼쳤을 때만) */}
+                      {isExpanded && (
+                        <TableRow
+                          className={cn(
+                            "border-l-[3px] border-l-primary/30 bg-muted/60",
+                            closingOrders.has(inboundNo) ? "tree-detail-row-closing" : "tree-detail-row",
+                          )}
+                        >
+                          <TableCell />
+                          <TableCell />
+                          <TableCell />
+                          {visibleDetailCols.map((col) => {
+                            const isRight = ["inbound_qty", "unit_price", "total_amount"].includes(col.key);
+                            const isSorted = sortState?.key === col.key;
+                            const uniqueVals = Array.from(new Set(
+                              group.details.map((d) => {
+                                let v = (d as any)[col.key];
+                                if (col.key === "source_table") v = SOURCE_TABLE_LABEL[v] || v;
+                                return v;
+                              }).filter((v: any) => v != null && v !== "").map(String)
+                            )).sort();
+                            const filterVals = headerFilters[col.key] || new Set<string>();
+                            return (
+                              <TableCell
+                                key={col.key}
+                                className={cn(
+                                  "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 select-none",
+                                  isRight && "text-right",
+                                )}
+                              >
+                                <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                                  <div
+                                    className="flex items-center gap-1 cursor-pointer min-w-0"
+                                    onClick={() => handleSort(col.key)}
+                                  >
+                                    <span className="truncate">{col.label}</span>
+                                    {isSorted && (
+                                      sortState!.direction === "asc"
+                                        ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                                        : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                                    )}
+                                  </div>
+                                  {uniqueVals.length > 0 && (
+                                    <HeaderFilterPopover
+                                      colKey={col.key} colLabel={col.label}
+                                      uniqueValues={uniqueVals} filterValues={filterVals}
+                                      onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                                    />
+                                  )}
+                                </div>
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                      )}
+
+                      {/* 디테일 행 (펼쳤을 때만) */}
+                      {isExpanded && group.details.map((row, detailIdx) => {
+                        const isClosing = closingOrders.has(inboundNo);
+                        const isChecked = checkedIds.includes(row.id);
+                        return (
+                          <TableRow
+                            key={`${row.id}-${detailIdx}`}
+                            className={cn(
+                              "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                              isClosing ? "tree-detail-row-closing" : "tree-detail-row",
+                              isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                            )}
+                            onClick={() => {
+                              setCheckedIds((prev) =>
+                                prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                              );
+                            }}
+                          >
+                            <TableCell
+                              className="text-center cursor-pointer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                            >
+                              <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                            </TableCell>
+                            <TableCell className="relative">
+                              <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
+                            </TableCell>
+                            <TableCell />
+                            {visibleDetailCols.map((col) => {
+                              switch (col.key) {
+                                case "source_table": return <TableCell key={col.key} className="text-[13px]">{row.source_table ? SOURCE_TABLE_LABEL[row.source_table] || row.source_table : "-"}</TableCell>;
+                                case "item_number": return <TableCell key={col.key} className="font-mono text-[13px]">{row.item_number || ""}</TableCell>;
+                                case "item_name": return <TableCell key={col.key} className="text-[13px] max-w-[160px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>;
+                                case "spec": return <TableCell key={col.key} className="text-[13px] text-muted-foreground">{row.spec || ""}</TableCell>;
+                                case "inbound_qty": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.inbound_qty ? Number(row.inbound_qty).toLocaleString() : ""}</TableCell>;
+                                case "unit_price": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>;
+                                case "total_amount": return <TableCell key={col.key} className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>;
+                                default: return <TableCell key={col.key} className="text-[13px]">{(row as any)[col.key] ?? ""}</TableCell>;
+                              }
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                    </React.Fragment>
+                  );
+                })
               )}
             </TableBody>
           </Table>
@@ -724,56 +1186,19 @@ export default function ReceivingPage() {
       </div>
 
       {/* 입고 등록 모달 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title="입고 등록"
-        description="입고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가하세요."
-        defaultMaxWidth="sm:max-w-[1600px]"
-        defaultWidth="w-[95vw]"
-        className="h-[90vh] p-0"
-        contentClassName="overflow-hidden flex flex-col"
-        footer={
-          <div className="flex w-full items-center justify-between px-6 py-3">
-            <div className="text-muted-foreground text-xs">
-              {selectedItems.length > 0 ? (
-                <>
-                  {totalSummary.count}건 | 수량 합계:{" "}
-                  {totalSummary.qty.toLocaleString()} | 금액 합계:{" "}
-                  {totalSummary.amount.toLocaleString()}원
-                </>
-              ) : (
-                "품목을 추가해주세요"
-              )}
-            </div>
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setIsModalOpen(false)}
-                className="h-9 text-sm"
-              >
-                취소
-              </Button>
-              <Button
-                onClick={handleSave}
-                disabled={saving || selectedItems.length === 0}
-                className="h-9 text-sm"
-              >
-                {saving ? (
-                  <Loader2 className="mr-1 h-4 w-4 animate-spin" />
-                ) : (
-                  <Save className="mr-1 h-4 w-4" />
-                )}
-                저장
-              </Button>
-            </div>
-          </div>
-        }
-      >
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="sm:max-w-[1600px] w-[95vw] h-[90vh] p-0 flex flex-col overflow-hidden">
+          <DialogHeader className="shrink-0 px-6 pt-4 pb-2 border-b">
+            <DialogTitle>입고 등록</DialogTitle>
+            <DialogDescription>
+              입고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가해 주세요.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-hidden flex flex-col">
 
           {/* 입고유형 선택 */}
-          <div className="flex items-center gap-4 border-b px-6 py-3">
-            <Label className="text-sm font-semibold">입고유형</Label>
+          <div className="flex items-center gap-4 border-b bg-muted/30 px-6 py-2.5">
+            <Label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide">입고유형</Label>
             <Select value={modalInboundType} onValueChange={handleInboundTypeChange}>
               <SelectTrigger className="h-9 w-[160px] text-sm">
                 <SelectValue />
@@ -802,7 +1227,7 @@ export default function ReceivingPage() {
               <ResizablePanel defaultSize={60} minSize={35}>
                 <div className="flex h-full flex-col">
                   {/* 소스 검색 바 */}
-                  <div className="flex items-center gap-2 border-b px-4 py-3">
+                  <div className="flex items-center gap-2 border-b px-4 py-2.5">
                     <Input
                       placeholder={
                         modalInboundType === "구매입고"
@@ -814,23 +1239,28 @@ export default function ReceivingPage() {
                       value={sourceKeyword}
                       onChange={(e) => setSourceKeyword(e.target.value)}
                       onKeyDown={(e) => e.key === "Enter" && searchSourceData()}
-                      className="h-8 flex-1 text-xs"
+                      className="h-9 flex-1 text-xs"
                     />
-                    <Button size="sm" onClick={searchSourceData} className="h-8">
+                    <Button size="sm" onClick={searchSourceData} className="h-9">
                       <Search className="mr-1 h-3 w-3" />
                       검색
                     </Button>
                   </div>
 
                   {/* 소스 데이터 테이블 */}
-                  <div className="flex-1 overflow-auto px-4 py-2">
-                    <h4 className="text-muted-foreground mb-2 text-xs font-semibold">
-                      {modalInboundType === "구매입고"
-                        ? "미입고 발주 목록"
-                        : modalInboundType === "반품입고"
-                          ? "출하 목록"
-                          : "품목 목록"}
-                    </h4>
+                  <div className="flex-1 overflow-auto">
+                    <div className="flex items-center gap-2 px-4 py-2.5 bg-muted/50 border-b">
+                      <h4 className="text-[13px] font-bold">
+                        {modalInboundType === "구매입고"
+                          ? "미입고 발주 목록"
+                          : modalInboundType === "반품입고"
+                            ? "출하 목록"
+                            : "품목 목록"}
+                      </h4>
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {sourceTotalCount}건
+                      </span>
+                    </div>
 
                     {sourceLoading ? (
                       <div className="flex h-40 items-center justify-center">
@@ -859,7 +1289,7 @@ export default function ReceivingPage() {
 
                   {/* 페이징 */}
                   {sourceTotalCount > 0 && (
-                    <div className="flex shrink-0 items-center justify-between border-t bg-muted/10 px-4 py-2">
+                    <div className="flex shrink-0 items-center justify-between border-t bg-muted/30 px-4 py-2">
                       <div className="flex items-center gap-2">
                         <span className="text-muted-foreground text-[11px]">표시:</span>
                         <Input
@@ -912,31 +1342,31 @@ export default function ReceivingPage() {
                 <div className="flex h-full flex-col">
                   {/* 입고 정보 입력 */}
                   <div className="space-y-3 border-b bg-muted/30 px-4 py-3">
-                    <h4 className="text-sm font-semibold">입고 정보</h4>
+                    <h4 className="text-[13px] font-bold text-foreground">입고 정보</h4>
                     <div className="grid grid-cols-2 gap-3">
                       <div>
-                        <Label className="text-[11px]">입고번호</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">입고번호</Label>
                         <Input
                           value={modalInboundNo}
                           readOnly
-                          className="bg-muted h-8 text-xs"
+                          className="bg-muted h-9 text-xs"
                         />
                       </div>
                       <div>
-                        <Label className="text-[11px]">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">
                           입고일 <span className="text-destructive">*</span>
                         </Label>
                         <Input
                           type="date"
                           value={modalInboundDate}
                           onChange={(e) => setModalInboundDate(e.target.value)}
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                       <div>
-                        <Label className="text-[11px]">창고</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">창고</Label>
                         <Select value={modalWarehouse} onValueChange={setModalWarehouse}>
-                          <SelectTrigger className="h-8 text-xs">
+                          <SelectTrigger className="h-9 text-xs">
                             <SelectValue placeholder="창고 선택" />
                           </SelectTrigger>
                           <SelectContent>
@@ -949,62 +1379,65 @@ export default function ReceivingPage() {
                         </Select>
                       </div>
                       <div>
-                        <Label className="text-[11px]">위치</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">위치</Label>
                         <Input
                           value={modalLocation}
                           onChange={(e) => setModalLocation(e.target.value)}
                           placeholder="위치 입력"
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                       <div>
-                        <Label className="text-[11px]">검수자</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">검수자</Label>
                         <Input
                           value={modalInspector}
                           onChange={(e) => setModalInspector(e.target.value)}
                           placeholder="검수자"
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                       <div>
-                        <Label className="text-[11px]">담당자</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">담당자</Label>
                         <Input
                           value={modalManager}
                           onChange={(e) => setModalManager(e.target.value)}
                           placeholder="담당자"
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                       <div className="col-span-2">
-                        <Label className="text-[11px]">메모</Label>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">메모</Label>
                         <Input
                           value={modalMemo}
                           onChange={(e) => setModalMemo(e.target.value)}
                           placeholder="메모"
-                          className="h-8 text-xs"
+                          className="h-9 text-xs"
                         />
                       </div>
                     </div>
                   </div>
 
                   {/* 선택된 품목 테이블 */}
-                  <div className="flex-1 overflow-auto px-4 py-2">
-                    <h4 className="text-muted-foreground mb-2 text-xs font-semibold">
-                      입고 처리 품목 ({selectedItems.length}건)
-                    </h4>
+                  <div className="flex-1 overflow-auto">
+                    <div className="flex items-center gap-2 border-b bg-muted/50 px-4 py-2.5">
+                      <h4 className="text-[13px] font-bold">입고 처리 품목</h4>
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {selectedItems.length}건
+                      </span>
+                    </div>
 
                     {selectedItems.length === 0 ? (
-                      <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-xs">
-                        <Package className="mb-2 h-8 w-8 opacity-30" />
-                        좌측에서 품목을 선택하여 추가해주세요
+                      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+                        <Inbox className="h-8 w-8 opacity-30" />
+                        <p className="text-xs font-medium">좌측에서 품목을 선택하여 추가해 주세요</p>
                       </div>
                     ) : (
                       <Table>
-                        <TableHeader>
-                          <TableRow className="text-[11px]">
-                            <TableHead className="w-[30px] p-2">No</TableHead>
-                            <TableHead className="p-2">품목명</TableHead>
-                            <TableHead className="p-2">참조번호</TableHead>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
                             <TableHead className="w-[80px] p-2 text-right">
                               수량
                             </TableHead>
@@ -1065,7 +1498,7 @@ export default function ReceivingPage() {
                                   min={0}
                                 />
                               </TableCell>
-                              <TableCell className="p-2 text-right text-xs font-semibold">
+                              <TableCell className="p-2 text-right text-[13px] font-semibold">
                                 {item.total_amount.toLocaleString()}
                               </TableCell>
                               <TableCell className="p-2 text-center">
@@ -1089,7 +1522,54 @@ export default function ReceivingPage() {
             </ResizablePanelGroup>
           </div>
 
-      </FullscreenDialog>
+          </div>
+          <DialogFooter className="shrink-0 border-t px-0 py-0">
+            <div className="flex w-full items-center justify-between px-6 py-2.5">
+              <div className="text-muted-foreground text-xs">
+                {selectedItems.length > 0 ? (
+                  <span className="flex items-center gap-3">
+                    <span className="font-semibold text-foreground">{totalSummary.count}건</span>
+                    <span>수량 합계: <span className="font-medium text-foreground">{totalSummary.qty.toLocaleString()}</span></span>
+                    <span>금액 합계: <span className="font-medium text-foreground">{totalSummary.amount.toLocaleString()}원</span></span>
+                  </span>
+                ) : (
+                  "품목을 추가해 주세요"
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsModalOpen(false)}
+                  className="h-9 text-sm"
+                >
+                  취소
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={saving || selectedItems.length === 0}
+                  className="h-9 text-sm"
+                >
+                  {saving ? (
+                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="mr-1 h-4 w-4" />
+                  )}
+                  저장
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
@@ -1107,31 +1587,32 @@ function SourcePurchaseOrderTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 발주 데이터를 조회하세요
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 발주 데이터를 조회해 주세요</p>
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader className="sticky top-0 bg-background z-10">
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">발주번호</TableHead>
-          <TableHead className="p-2">공급처</TableHead>
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">발주수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">입고수량</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">미입고</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">미입고</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
-        {data.map((po) => {
+        {data.map((po, idx) => {
           const isSelected = selectedKeys.includes(`po-${po.id}`);
           return (
             <TableRow
-              key={po.id}
+              key={`${po.source_table || 'po'}-${po.id}-${idx}`}
               className={cn(
                 "cursor-pointer text-xs transition-colors",
                 isSelected && "bg-primary/5"
@@ -1164,7 +1645,7 @@ function SourcePurchaseOrderTable({
               <TableCell className="p-2 text-right">
                 {Number(po.received_qty).toLocaleString()}
               </TableCell>
-              <TableCell className="p-2 text-right font-semibold text-blue-600">
+              <TableCell className="p-2 text-right font-semibold text-primary">
                 {Number(po.remain_qty).toLocaleString()}
               </TableCell>
             </TableRow>
@@ -1186,22 +1667,23 @@ function SourceShipmentTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 출하 데이터를 조회하세요
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 출하 데이터를 조회해 주세요</p>
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader className="sticky top-0 bg-background z-10">
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">출하번호</TableHead>
-          <TableHead className="p-2">출하일</TableHead>
-          <TableHead className="p-2">거래처</TableHead>
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[70px] p-2 text-right">출하수량</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하일</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하수량</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -1263,22 +1745,23 @@ function SourceItemTable({
 }) {
   if (data.length === 0) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center text-xs">
-        검색 버튼을 눌러 품목 데이터를 조회하세요
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 품목 데이터를 조회해 주세요</p>
       </div>
     );
   }
 
   return (
     <Table>
-      <TableHeader className="sticky top-0 bg-background z-10">
-        <TableRow className="text-[11px]">
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
           <TableHead className="w-[40px] p-2" />
-          <TableHead className="p-2">품목</TableHead>
-          <TableHead className="w-[80px] p-2">규격</TableHead>
-          <TableHead className="w-[80px] p-2">재질</TableHead>
-          <TableHead className="w-[60px] p-2">단위</TableHead>
-          <TableHead className="w-[80px] p-2 text-right">기준가</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+          <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
diff --git a/frontend/app/(main)/COMPANY_7/logistics/warehouse/page.tsx b/frontend/app/(main)/COMPANY_7/logistics/warehouse/page.tsx
new file mode 100644
index 00000000..96b3d47e
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/logistics/warehouse/page.tsx
@@ -0,0 +1,1608 @@
+"use client";
+
+/**
+ * 창고정보관리 — 하드코딩 페이지 (Type B 마스터-디테일)
+ *
+ * 좌측: 창고 목록 (warehouse_info)
+ * 우측: 선택 창고의 로케이션 목록 (warehouse_location)
+ *
+ * ★ 하위 위치가 있으면 창고 삭제 불가
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Plus,
+  Trash2,
+  Loader2,
+  Download,
+  MapPin,
+  Building2,
+  Settings2,
+  Layers,
+  Info,
+  Eye,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+
+const WAREHOUSE_TABLE = "warehouse_info";
+
+const WAREHOUSE_COLUMNS = [
+  { key: "warehouse_code", label: "창고코드" },
+  { key: "warehouse_name", label: "창고명" },
+  { key: "warehouse_type", label: "유형" },
+  { key: "manager", label: "관리자" },
+  { key: "status", label: "상태" },
+];
+const LOCATION_TABLE = "warehouse_location";
+
+const getStatusVariant = (
+  status: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "사용":
+    case "사용중":
+      return "default";
+    case "미사용":
+      return "secondary";
+    case "폐쇄":
+      return "destructive";
+    default:
+      return "outline";
+  }
+};
+
+const getTypeVariant = (
+  type: string
+): "default" | "secondary" | "outline" => {
+  switch (type) {
+    case "원자재":
+    case "일반":
+      return "default";
+    case "완제품":
+    case "보관":
+      return "secondary";
+    default:
+      return "outline";
+  }
+};
+
+export default function WarehouseManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-warehouse", WAREHOUSE_TABLE, WAREHOUSE_COLUMNS);
+
+  // 좌측: 창고 목록
+  const [warehouses, setWarehouses] = useState<any[]>([]);
+  const [warehouseLoading, setWarehouseLoading] = useState(false);
+  const [warehouseCount, setWarehouseCount] = useState(0);
+  const [selectedWarehouseId, setSelectedWarehouseId] = useState<string | null>(null);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 로케이션 목록
+  const [locations, setLocations] = useState<any[]>([]);
+  const [locationLoading, setLocationLoading] = useState(false);
+  const [locationCheckedIds, setLocationCheckedIds] = useState<string[]>([]);
+
+  // 모달: 창고 등록/수정
+  const [warehouseModalOpen, setWarehouseModalOpen] = useState(false);
+  const [warehouseEditMode, setWarehouseEditMode] = useState(false);
+  const [warehouseForm, setWarehouseForm] = useState<Record<string, any>>({});
+  const [warehouseSaving, setWarehouseSaving] = useState(false);
+
+  // 모달: 위치 등록/수정
+  const [locationModalOpen, setLocationModalOpen] = useState(false);
+  const [locationEditMode, setLocationEditMode] = useState(false);
+  const [locationForm, setLocationForm] = useState<Record<string, any>>({});
+  const [locationSaving, setLocationSaving] = useState(false);
+
+  // 위치코드 자동 채번
+  const [locNumberingRuleId, setLocNumberingRuleId] = useState<string | null>(null);
+  const [locPreviewCode, setLocPreviewCode] = useState<string | null>(null);
+  const [whNumberingRuleId, setWhNumberingRuleId] = useState<string | null>(null);
+  const [whPreviewCode, setWhPreviewCode] = useState<string | null>(null);
+
+  // 모달: 랙 구조 일괄 등록
+  const [rackModalOpen, setRackModalOpen] = useState(false);
+  const [rackFloor, setRackFloor] = useState("");
+  const [rackZone, setRackZone] = useState("");
+  const [rackConditions, setRackConditions] = useState<
+    { id: string; startRow: number; endRow: number; levels: number }[]
+  >([]);
+  const [rackLocationType, setRackLocationType] = useState("");
+  const [rackStatus, setRackStatus] = useState("");
+  const [rackPreview, setRackPreview] = useState<any[]>([]);
+  const [rackSaving, setRackSaving] = useState(false);
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+  const [locationCategoryOptions, setLocationCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+
+      const whOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["warehouse_type", "status"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${WAREHOUSE_TABLE}/${col}/values`
+          );
+          if (res.data?.success) whOpts[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setCategoryOptions(whOpts);
+
+      const locOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["location_type", "status", "floor", "zone"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${LOCATION_TABLE}/${col}/values`
+          );
+          if (res.data?.success) locOpts[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setLocationCategoryOptions(locOpts);
+    };
+    load();
+  }, []);
+
+  // 카테고리 코드→라벨 변환 헬퍼
+  const resolveCategory = useCallback(
+    (
+      optMap: Record<string, { code: string; label: string }[]>,
+      col: string,
+      code: string
+    ) => {
+      if (!code) return "";
+      return optMap[col]?.find((o) => o.code === code)?.label || code;
+    },
+    []
+  );
+
+  // 창고 목록 조회
+  const fetchWarehouses = useCallback(async () => {
+    setWarehouseLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(
+        `/table-management/tables/${WAREHOUSE_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+          autoFilter: true,
+          sort: { columnName: "warehouse_code", order: "asc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const data = raw.map((r: any) => ({
+        ...r,
+        warehouse_type: resolveCategory(categoryOptions, "warehouse_type", r.warehouse_type),
+        status: resolveCategory(categoryOptions, "status", r.status),
+      }));
+      setWarehouses(data);
+      setWarehouseCount(res.data?.data?.total || raw.length);
+    } catch {
+      toast.error("창고 목록을 불러오지 못했어요");
+    } finally {
+      setWarehouseLoading(false);
+    }
+  }, [categoryOptions, resolveCategory, searchFilters]);
+
+  useEffect(() => {
+    fetchWarehouses();
+  }, [fetchWarehouses]);
+
+  // 선택된 창고
+  const selectedWarehouse = warehouses.find((w) => w.id === selectedWarehouseId);
+
+  // 로케이션 조회
+  const fetchLocations = useCallback(async () => {
+    if (!selectedWarehouse?.warehouse_code) {
+      setLocations([]);
+      return;
+    }
+    setLocationLoading(true);
+    try {
+      const res = await apiClient.post(
+        `/table-management/tables/${LOCATION_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: {
+            enabled: true,
+            filters: [
+              {
+                columnName: "warehouse_code",
+                operator: "equals",
+                value: selectedWarehouse.warehouse_code,
+              },
+            ],
+          },
+          autoFilter: true,
+          sort: { columnName: "location_code", order: "asc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const data = raw.map((r: any) => ({
+        ...r,
+        location_type: resolveCategory(locationCategoryOptions, "location_type", r.location_type),
+        status: resolveCategory(locationCategoryOptions, "status", r.status),
+      }));
+      setLocations(data);
+    } catch {
+      toast.error("위치 목록을 불러오지 못했어요");
+    } finally {
+      setLocationLoading(false);
+    }
+  }, [selectedWarehouse?.warehouse_code, locationCategoryOptions, resolveCategory]);
+
+  useEffect(() => {
+    setLocationCheckedIds([]);
+    fetchLocations();
+  }, [fetchLocations]);
+
+  // 체크박스 헬퍼
+  const allLocationChecked =
+    locations.length > 0 && locationCheckedIds.length === locations.length;
+  const someLocationChecked =
+    locationCheckedIds.length > 0 && locationCheckedIds.length < locations.length;
+
+  const toggleAllLocations = (checked: boolean) => {
+    setLocationCheckedIds(checked ? locations.map((l) => l.id) : []);
+  };
+
+  const toggleLocation = (id: string, checked: boolean) => {
+    setLocationCheckedIds((prev) =>
+      checked ? [...prev, id] : prev.filter((i) => i !== id)
+    );
+  };
+
+  // ─── 창고 CRUD ───
+
+  const openWarehouseCreateModal = async () => {
+    setWarehouseEditMode(false);
+    setWarehouseForm({});
+    setWhNumberingRuleId(null);
+    setWhPreviewCode(null);
+    setWarehouseModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/warehouse_info/warehouse_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setWhNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setWhPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openWarehouseEditModal = (row: any) => {
+    setWarehouseEditMode(true);
+    setWarehouseForm({ ...row });
+    setWarehouseModalOpen(true);
+  };
+
+  const handleWarehouseSave = async () => {
+    if (!whNumberingRuleId && !warehouseForm.warehouse_code?.trim()) {
+      toast.error("창고코드를 입력해주세요");
+      return;
+    }
+    if (!warehouseForm.warehouse_name?.trim()) {
+      toast.error("창고명을 입력해주세요");
+      return;
+    }
+    setWarehouseSaving(true);
+    try {
+      let finalWarehouseCode = warehouseForm.warehouse_code?.trim() || "";
+      if (!warehouseEditMode && whNumberingRuleId) {
+        const allocRes = await allocateNumberingCode(whNumberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalWarehouseCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setWarehouseSaving(false);
+          return;
+        }
+      }
+      const fields = {
+        warehouse_code: finalWarehouseCode,
+        warehouse_name: warehouseForm.warehouse_name?.trim(),
+        warehouse_type: warehouseForm.warehouse_type || "",
+        manager: warehouseForm.manager || "",
+        address: warehouseForm.address || "",
+        status: warehouseForm.status || "",
+        description: warehouseForm.description || "",
+      };
+
+      // 신규 등록 시 창고코드 중복 체크
+      if (!warehouseEditMode) {
+        const dup = warehouses.find(w => w.warehouse_code === fields.warehouse_code);
+        if (dup) {
+          toast.error(`창고코드 "${fields.warehouse_code}"가 이미 존재해요`);
+          setWarehouseSaving(false);
+          return;
+        }
+      }
+
+      if (warehouseEditMode && warehouseForm.id) {
+        await apiClient.put(
+          `/table-management/tables/${WAREHOUSE_TABLE}/edit`,
+          {
+            originalData: { id: warehouseForm.id },
+            updatedData: fields,
+          }
+        );
+        toast.success("창고 정보가 수정되었어요");
+      } else {
+        await apiClient.post(
+          `/table-management/tables/${WAREHOUSE_TABLE}/add`,
+          { id: crypto.randomUUID(), ...fields }
+        );
+        toast.success("창고가 등록되었어요");
+      }
+      setWarehouseModalOpen(false);
+      fetchWarehouses();
+    } catch {
+      toast.error(warehouseEditMode ? "창고 수정에 실패했어요" : "창고 등록에 실패했어요");
+    } finally {
+      setWarehouseSaving(false);
+    }
+  };
+
+  const handleWarehouseDelete = async () => {
+    if (!selectedWarehouse) return;
+    if (locations.length > 0) {
+      toast.error("하위 위치가 있어 삭제할 수 없어요. 위치를 먼저 삭제해주세요.");
+      return;
+    }
+    const ok = await confirm(
+      `"${selectedWarehouse.warehouse_name}" 창고를 삭제할까요?`
+    );
+    if (!ok) return;
+    try {
+      await apiClient.delete(
+        `/table-management/tables/${WAREHOUSE_TABLE}/delete`,
+        { data: [{ id: selectedWarehouse.id }] }
+      );
+      toast.success("창고가 삭제되었어요");
+      setSelectedWarehouseId(null);
+      fetchWarehouses();
+    } catch {
+      toast.error("창고 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 위치 CRUD ───
+
+  const openLocationCreateModal = async () => {
+    setLocationEditMode(false);
+    setLocationForm({ warehouse_code: selectedWarehouse?.warehouse_code || "" });
+    setLocNumberingRuleId(null);
+    setLocPreviewCode(null);
+    setLocationModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/warehouse_location/location_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setLocNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setLocPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openLocationEditModal = (row: any) => {
+    setLocationEditMode(true);
+    setLocationForm({ ...row });
+    setLocationModalOpen(true);
+  };
+
+  const handleLocationSave = async () => {
+    if (!locNumberingRuleId && !locationForm.location_code?.trim()) {
+      toast.error("위치코드를 입력해주세요");
+      return;
+    }
+    if (!locationForm.location_name?.trim()) {
+      toast.error("위치명을 입력해주세요");
+      return;
+    }
+    setLocationSaving(true);
+    try {
+      let finalLocationCode = locationForm.location_code?.trim() || "";
+      if (!locationEditMode && locNumberingRuleId) {
+        const allocRes = await allocateNumberingCode(locNumberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalLocationCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setLocationSaving(false);
+          return;
+        }
+      }
+
+      const fields = {
+        warehouse_code: locationForm.warehouse_code || selectedWarehouse?.warehouse_code || "",
+        location_code: finalLocationCode,
+        location_name: locationForm.location_name?.trim(),
+        floor: locationForm.floor || "",
+        zone: locationForm.zone || "",
+        row_num: locationForm.row_num || "",
+        level_num: locationForm.level_num || "",
+        location_type: locationForm.location_type || "",
+        status: locationForm.status || "",
+      };
+
+      if (locationEditMode && locationForm.id) {
+        await apiClient.put(
+          `/table-management/tables/${LOCATION_TABLE}/edit`,
+          {
+            originalData: { id: locationForm.id },
+            updatedData: fields,
+          }
+        );
+        toast.success("위치 정보가 수정되었어요");
+      } else {
+        await apiClient.post(
+          `/table-management/tables/${LOCATION_TABLE}/add`,
+          { id: crypto.randomUUID(), ...fields }
+        );
+        toast.success("위치가 등록되었어요");
+      }
+      setLocationModalOpen(false);
+      fetchLocations();
+    } catch {
+      toast.error(locationEditMode ? "위치 수정에 실패했어요" : "위치 등록에 실패했어요");
+    } finally {
+      setLocationSaving(false);
+    }
+  };
+
+  const handleLocationDelete = async () => {
+    if (locationCheckedIds.length === 0) {
+      toast.error("삭제할 위치를 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`${locationCheckedIds.length}건의 위치를 삭제할까요?`);
+    if (!ok) return;
+    try {
+      for (const id of locationCheckedIds) {
+        await apiClient.delete(
+          `/table-management/tables/${LOCATION_TABLE}/delete`,
+          { data: [{ id }] }
+        );
+      }
+      toast.success(`${locationCheckedIds.length}건의 위치가 삭제되었어요`);
+      setLocationCheckedIds([]);
+      fetchLocations();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "위치 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 랙 구조 일괄 등록 ───
+
+  const openRackModal = () => {
+    setRackFloor("");
+    setRackZone("");
+    setRackConditions([]);
+    setRackLocationType("");
+    setRackStatus("");
+    setRackPreview([]);
+    setRackSaving(false);
+    setRackModalOpen(true);
+  };
+
+  const addRackCondition = () => {
+    const lastEnd = rackConditions.length > 0
+      ? rackConditions[rackConditions.length - 1].endRow
+      : 0;
+    setRackConditions((prev) => [
+      ...prev,
+      { id: crypto.randomUUID(), startRow: lastEnd + 1, endRow: lastEnd + 1, levels: 1 },
+    ]);
+  };
+
+  const updateRackCondition = (id: string, field: string, value: number) => {
+    setRackConditions((prev) =>
+      prev.map((c) => (c.id === id ? { ...c, [field]: value } : c))
+    );
+  };
+
+  const removeRackCondition = (id: string) => {
+    setRackConditions((prev) => prev.filter((c) => c.id !== id));
+  };
+
+  const generateRackPreview = () => {
+    if (!rackFloor.trim() || !rackZone.trim()) {
+      toast.error("층과 구역을 입력해주세요");
+      return;
+    }
+    if (rackConditions.length === 0) {
+      toast.error("조건을 1개 이상 추가해주세요");
+      return;
+    }
+    // 조건 유효성 검사
+    for (const cond of rackConditions) {
+      if (cond.startRow < 1 || cond.endRow < 1 || cond.levels < 1) {
+        toast.error("열 범위와 단 수는 1 이상이어야 합니다");
+        return;
+      }
+      if (cond.endRow < cond.startRow) {
+        toast.error("끝 열은 시작 열보다 크거나 같아야 합니다");
+        return;
+      }
+    }
+
+    const whCode = selectedWarehouse?.warehouse_code || "";
+    // 카테고리 코드→라벨 변환 (셀렉트에서 코드가 저장되므로)
+    const floorOpts = locationCategoryOptions["floor"] || [];
+    const zoneOpts = locationCategoryOptions["zone"] || [];
+    const floorLabel = floorOpts.find(o => o.code === rackFloor)?.label || rackFloor.trim();
+    const zoneLabel = zoneOpts.find(o => o.code === rackZone)?.label || rackZone.trim();
+    const floorCode = floorLabel.replace(/층$/, "");
+    const zoneCode = zoneLabel.replace(/구역$/, "");
+
+    // 기존 위치코드 Set (중복 체크용)
+    const existingCodes = new Set(locations.map((l: any) => l.location_code));
+    const seen = new Set<string>();
+    const items: any[] = [];
+    const duplicates: string[] = [];
+
+    for (const cond of rackConditions) {
+      for (let row = cond.startRow; row <= cond.endRow; row++) {
+        for (let level = 1; level <= cond.levels; level++) {
+          const rowStr = String(row).padStart(2, "0");
+          const locationCode = `${whCode}-${floorCode}${zoneCode}-${rowStr}-${level}`;
+          // 미리보기 내부 중복 제거
+          if (seen.has(locationCode)) continue;
+          seen.add(locationCode);
+          // 기존 DB 데이터와 중복 체크
+          if (existingCodes.has(locationCode)) {
+            duplicates.push(locationCode);
+            continue;
+          }
+          const locationName = `${zoneCode}구역-${rowStr}열-${level}단`;
+          items.push({
+            location_code: locationCode,
+            location_name: locationName,
+            warehouse_code: whCode,
+            floor: floorLabel,
+            zone: zoneLabel,
+            row_num: String(row),
+            level_num: String(level),
+            location_type: rackLocationType,
+            status: rackStatus,
+          });
+        }
+      }
+    }
+    if (duplicates.length > 0) {
+      toast.error(`이미 등록된 위치 ${duplicates.length}건이 제외되었어요 (예: ${duplicates.slice(0, 3).join(", ")})`);
+    }
+    setRackPreview(items);
+  };
+
+  const handleRackBulkSave = async () => {
+    if (rackPreview.length === 0) {
+      toast.error("미리보기를 먼저 생성해주세요");
+      return;
+    }
+    setRackSaving(true);
+    try {
+      let successCount = 0;
+      for (const item of rackPreview) {
+        await apiClient.post(
+          `/table-management/tables/${LOCATION_TABLE}/add`,
+          { id: crypto.randomUUID(), ...item }
+        );
+        successCount++;
+      }
+      toast.success(`${successCount}개의 위치가 등록되었어요`);
+      setRackModalOpen(false);
+      fetchLocations();
+    } catch (err) {
+      toast.error("일괄 등록 중 오류가 발생했어요");
+    } finally {
+      setRackSaving(false);
+    }
+  };
+
+  // 랙 조건별 통계
+  const getRackConditionCount = (cond: { startRow: number; endRow: number; levels: number }) => {
+    if (cond.endRow < cond.startRow || cond.startRow < 1 || cond.levels < 1) return 0;
+    return (cond.endRow - cond.startRow + 1) * cond.levels;
+  };
+
+  // 랙 미리보기 통계
+  const rackStats = {
+    totalLocations: rackPreview.length,
+    totalRows: rackConditions.reduce((acc, c) => {
+      if (c.endRow >= c.startRow && c.startRow >= 1) return acc + (c.endRow - c.startRow + 1);
+      return acc;
+    }, 0),
+    maxLevels: rackConditions.reduce((acc, c) => Math.max(acc, c.levels || 0), 0),
+  };
+
+  // EDataTable 컬럼 정의
+  const warehouseColumns: EDataTableColumn[] = ts.visibleColumns.map((col) => {
+    const base: EDataTableColumn = { key: col.key, label: col.label };
+    if (col.key === "warehouse_type") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getTypeVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    if (col.key === "status") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getStatusVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    return base;
+  });
+
+  // 엑셀 내보내기
+  const handleExcelExport = () => {
+    if (warehouses.length === 0) {
+      toast.error("내보낼 데이터가 없어요");
+      return;
+    }
+    exportToExcel(
+      warehouses.map((r) => ({
+        창고코드: r.warehouse_code,
+        창고명: r.warehouse_name,
+        유형: r.warehouse_type,
+        관리자: r.manager,
+        상태: r.status,
+      })),
+      "창고정보"
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={WAREHOUSE_TABLE}
+        filterId="c16-warehouse"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={warehouses.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1 text-xs"
+              onClick={handleExcelExport}
+            >
+              <Download className="h-3.5 w-3.5" />
+              엑셀
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 패널 */}
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="flex-1 rounded-lg border bg-card"
+      >
+        {/* 좌측: 창고 목록 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+              <div className="flex items-center gap-2">
+                <span className="text-[13px] font-bold">창고 목록</span>
+                <Badge variant="default" className="rounded-full text-[11px]">
+                  {warehouses.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Button
+                  size="sm"
+                  className="h-7 gap-1 text-xs"
+                  onClick={openWarehouseCreateModal}
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                  등록
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-7 gap-1 text-xs text-destructive hover:text-destructive"
+                  onClick={handleWarehouseDelete}
+                  disabled={!selectedWarehouse}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+
+            <EDataTable
+              columns={warehouseColumns}
+              data={ts.groupData(warehouses)}
+              rowKey={(row) => row.id}
+              loading={warehouseLoading}
+              emptyMessage="등록된 창고가 없어요"
+              selectedId={selectedWarehouseId}
+              onSelect={(id) => setSelectedWarehouseId(id)}
+              onRowDoubleClick={(row) => openWarehouseEditModal(row)}
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+              columnOrderKey="c16-warehouse"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 로케이션 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex flex-col h-full">
+            {!selectedWarehouse ? (
+              <div className="flex flex-col items-center justify-center flex-1 m-5 border-2 border-dashed rounded-lg border-border">
+                <Building2 className="h-12 w-12 text-muted-foreground/40 mb-4" />
+                <p className="text-sm font-semibold text-muted-foreground">
+                  창고를 선택해주세요
+                </p>
+                <p className="text-xs text-muted-foreground/70 mt-1">
+                  좌측에서 창고를 선택하면 위치 정보가 표시돼요
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                  <div className="flex items-center gap-2">
+                    <MapPin className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-[13px] font-bold">
+                      {selectedWarehouse.warehouse_name}
+                    </span>
+                    <Badge
+                      variant="outline"
+                      className="rounded-full text-[11px] font-mono"
+                    >
+                      {selectedWarehouse.warehouse_code}
+                    </Badge>
+                    <Badge variant="secondary" className="rounded-full text-[10px]">
+                      {locations.length}개 위치
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={openRackModal}
+                    >
+                      <Layers className="h-3.5 w-3.5" />
+                      랙 구조 등록
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs text-destructive hover:text-destructive"
+                      onClick={handleLocationDelete}
+                      disabled={locationCheckedIds.length === 0}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                      삭제
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 로케이션 테이블 */}
+                <div className="flex-1 overflow-auto">
+                  {locationLoading ? (
+                    <div className="flex items-center justify-center h-32">
+                      <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : locations.length === 0 ? (
+                    <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">
+                      등록된 위치가 없어요
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="w-10 text-center">
+                            <Checkbox
+                              checked={
+                                someLocationChecked
+                                  ? "indeterminate"
+                                  : allLocationChecked
+                              }
+                              onCheckedChange={(v) =>
+                                toggleAllLocations(v === true)
+                              }
+                              aria-label="전체 선택"
+                            />
+                          </TableHead>
+                          <TableHead className="w-8 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">위치코드</TableHead>
+                          <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">위치명</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">층</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">구역</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">열</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {locations.map((loc, idx) => (
+                          <TableRow
+                            key={loc.id}
+                            className={cn(
+                              "cursor-pointer text-xs",
+                              locationCheckedIds.includes(loc.id) && "bg-primary/5"
+                            )}
+                            onDoubleClick={() => openLocationEditModal(loc)}
+                          >
+                            <TableCell className="text-center">
+                              <Checkbox
+                                checked={locationCheckedIds.includes(loc.id)}
+                                onCheckedChange={(v) =>
+                                  toggleLocation(loc.id, v === true)
+                                }
+                                aria-label="행 선택"
+                              />
+                            </TableCell>
+                            <TableCell className="text-center text-muted-foreground">
+                              {idx + 1}
+                            </TableCell>
+                            <TableCell className="font-mono truncate max-w-[110px]">
+                              {loc.location_code}
+                            </TableCell>
+                            <TableCell className="truncate max-w-[120px]">
+                              {loc.location_name}
+                            </TableCell>
+                            <TableCell className="text-center">{loc.floor}</TableCell>
+                            <TableCell>{loc.zone}</TableCell>
+                            <TableCell className="text-center">{loc.row_num}</TableCell>
+                            <TableCell className="text-center">{loc.level_num}</TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getTypeVariant(loc.location_type)}
+                                className="text-[10px]"
+                              >
+                                {loc.location_type}
+                              </Badge>
+                            </TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getStatusVariant(loc.status)}
+                                className="text-[10px]"
+                              >
+                                {loc.status}
+                              </Badge>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 창고 등록/수정 Dialog */}
+      <Dialog open={warehouseModalOpen} onOpenChange={setWarehouseModalOpen}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle>
+              {warehouseEditMode ? "창고 수정" : "창고 등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {warehouseEditMode
+                ? "창고 정보를 수정해주세요"
+                : "새로운 창고를 등록해주세요"}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid grid-cols-2 gap-4 py-2">
+            {/* 창고코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                창고코드 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={warehouseEditMode ? (warehouseForm.warehouse_code || "") : (whPreviewCode || "")}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_code: e.target.value }))
+                }
+                placeholder={warehouseEditMode ? "" : (whNumberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                disabled={warehouseEditMode}
+                readOnly={!warehouseEditMode && !!whNumberingRuleId}
+              />
+            </div>
+            {/* 창고명 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                창고명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={warehouseForm.warehouse_name || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_name: e.target.value }))
+                }
+                placeholder="창고명을 입력해주세요"
+              />
+            </div>
+            {/* 유형 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">유형</Label>
+              <Select
+                value={warehouseForm.warehouse_type || ""}
+                onValueChange={(v) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["warehouse_type"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">관리자</Label>
+              <Input
+                value={warehouseForm.manager || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, manager: e.target.value }))
+                }
+                placeholder="관리자를 입력해주세요"
+              />
+            </div>
+            {/* 상태 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+              <Select
+                value={warehouseForm.status || ""}
+                onValueChange={(v) =>
+                  setWarehouseForm((prev) => ({ ...prev, status: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["status"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 주소 (전체 너비) */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">주소</Label>
+              <Input
+                value={warehouseForm.address || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, address: e.target.value }))
+                }
+                placeholder="주소를 입력해주세요"
+              />
+            </div>
+            {/* 비고 (전체 너비) */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">비고</Label>
+              <Input
+                value={warehouseForm.description || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, description: e.target.value }))
+                }
+                placeholder="비고를 입력해주세요"
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setWarehouseModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleWarehouseSave} disabled={warehouseSaving}>
+              {warehouseSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              {warehouseEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 위치 등록/수정 Dialog */}
+      <Dialog open={locationModalOpen} onOpenChange={setLocationModalOpen}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle>
+              {locationEditMode ? "위치 수정" : "위치 등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {locationEditMode
+                ? "위치 정보를 수정해주세요"
+                : `${selectedWarehouse?.warehouse_name || ""} 창고에 새 위치를 등록해주세요`}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid grid-cols-2 gap-4 py-2">
+            {/* 창고코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">창고코드</Label>
+              <Input value={locationForm.warehouse_code || ""} disabled />
+            </div>
+            {/* 위치코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                위치코드 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={locationEditMode ? (locationForm.location_code || "") : (locPreviewCode || "")}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, location_code: e.target.value }))
+                }
+                placeholder={locationEditMode ? "" : (locNumberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                disabled={locationEditMode}
+                readOnly={!locationEditMode && !!locNumberingRuleId}
+              />
+            </div>
+            {/* 위치명 */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                위치명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={locationForm.location_name || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, location_name: e.target.value }))
+                }
+                placeholder="위치명을 입력해주세요"
+              />
+            </div>
+            {/* 층 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">층</Label>
+              <Input
+                value={locationForm.floor || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, floor: e.target.value }))
+                }
+                placeholder="층을 입력해주세요"
+              />
+            </div>
+            {/* 구역 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">구역</Label>
+              <Input
+                value={locationForm.zone || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, zone: e.target.value }))
+                }
+                placeholder="구역을 입력해주세요"
+              />
+            </div>
+            {/* 열 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">열</Label>
+              <Input
+                value={locationForm.row_num || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, row_num: e.target.value }))
+                }
+                placeholder="열을 입력해주세요"
+              />
+            </div>
+            {/* 단 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">단</Label>
+              <Input
+                value={locationForm.level_num || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, level_num: e.target.value }))
+                }
+                placeholder="단을 입력해주세요"
+              />
+            </div>
+            {/* 위치유형 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">위치유형</Label>
+              <Select
+                value={locationForm.location_type || ""}
+                onValueChange={(v) =>
+                  setLocationForm((prev) => ({ ...prev, location_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="위치유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(locationCategoryOptions["location_type"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 상태 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+              <Select
+                value={locationForm.status || ""}
+                onValueChange={(v) =>
+                  setLocationForm((prev) => ({ ...prev, status: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(locationCategoryOptions["status"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setLocationModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleLocationSave} disabled={locationSaving}>
+              {locationSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              {locationEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 랙 구조 일괄 등록 Dialog */}
+      <Dialog open={rackModalOpen} onOpenChange={setRackModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-3xl p-0 !gap-0" style={{ maxHeight: "90vh", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+          <div className="px-6 pt-6 pb-3 shrink-0">
+            <DialogTitle className="flex items-center gap-2">
+              <Layers className="h-5 w-5" />
+              랙 구조 일괄 등록
+            </DialogTitle>
+            <DialogDescription className="mt-1">
+              {selectedWarehouse?.warehouse_name} ({selectedWarehouse?.warehouse_code}) 창고에 랙 구조를 일괄 등록합니다
+            </DialogDescription>
+          </div>
+
+          <div className="flex-1 overflow-y-auto min-h-0">
+            <div className="space-y-6 px-6 py-4">
+              {/* 기본 정보 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  📍 기본 정보
+                </h3>
+                <div className="grid grid-cols-3 gap-4">
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      창고 <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      value={`${selectedWarehouse?.warehouse_name || ""} (${selectedWarehouse?.warehouse_code || ""})`}
+                      disabled
+                    />
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      층 <span className="text-destructive">*</span>
+                    </Label>
+                    {(locationCategoryOptions["floor"] || []).length > 0 ? (
+                      <Select value={rackFloor} onValueChange={setRackFloor}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="층 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(locationCategoryOptions["floor"] || []).map((o) => (
+                            <SelectItem key={o.code} value={o.code}>
+                              {o.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={rackFloor}
+                        onChange={(e) => setRackFloor(e.target.value)}
+                        placeholder="예: B1, 1F, 2F"
+                      />
+                    )}
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      구역 <span className="text-destructive">*</span>
+                    </Label>
+                    {(locationCategoryOptions["zone"] || []).length > 0 ? (
+                      <Select value={rackZone} onValueChange={setRackZone}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="구역 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(locationCategoryOptions["zone"] || []).map((o) => (
+                            <SelectItem key={o.code} value={o.code}>
+                              {o.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={rackZone}
+                        onChange={(e) => setRackZone(e.target.value)}
+                        placeholder="예: A, B, C"
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* 랙 라인 구조 설정 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  📊 랙 라인 구조 설정
+                </h3>
+
+                {/* 안내 박스 */}
+                <div className="rounded-lg bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 p-3 mb-3">
+                  <div className="flex items-start gap-2">
+                    <Info className="h-4 w-4 text-blue-600 dark:text-blue-400 mt-0.5 shrink-0" />
+                    <div className="text-xs text-blue-700 dark:text-blue-300 space-y-0.5">
+                      <p>1. 조건 추가 버튼을 클릭하여 랙 라인 조건을 생성하세요</p>
+                      <p>2. 각 조건마다 열 범위와 단 수를 입력하세요</p>
+                      <p>3. 예시: 조건1(1~3열, 3단), 조건2(4~6열, 5단)</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-xs text-muted-foreground">
+                    {rackConditions.length}개 조건
+                  </span>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={addRackCondition}
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    조건 추가
+                  </Button>
+                </div>
+
+                {rackConditions.length === 0 ? (
+                  <div className="flex flex-col items-center justify-center py-8 border-2 border-dashed rounded-lg border-border">
+                    <Layers className="h-8 w-8 text-muted-foreground/40 mb-2" />
+                    <p className="text-sm text-muted-foreground mb-2">
+                      조건을 추가하여 랙 구조를 설정하세요
+                    </p>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={addRackCondition}
+                    >
+                      <Plus className="h-3.5 w-3.5" />
+                      첫 번째 조건 추가
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {rackConditions.map((cond, idx) => (
+                      <div
+                        key={cond.id}
+                        className="flex items-center gap-3 rounded-lg border p-3 bg-card"
+                      >
+                        <span className="text-xs font-bold text-muted-foreground w-10 shrink-0">
+                          조건{idx + 1}
+                        </span>
+                        <div className="flex items-center gap-1.5 flex-1">
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-20 text-center text-xs"
+                            value={cond.startRow || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "startRow", Number(e.target.value) || 0)
+                            }
+                            placeholder="시작"
+                          />
+                          <span className="text-xs text-muted-foreground">~</span>
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-20 text-center text-xs"
+                            value={cond.endRow || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "endRow", Number(e.target.value) || 0)
+                            }
+                            placeholder="끝"
+                          />
+                          <span className="text-xs text-muted-foreground">열,</span>
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-16 text-center text-xs"
+                            value={cond.levels || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "levels", Number(e.target.value) || 0)
+                            }
+                            placeholder="단"
+                          />
+                          <span className="text-xs text-muted-foreground">단</span>
+                        </div>
+                        {getRackConditionCount(cond) > 0 && (
+                          <Badge variant="secondary" className="text-[10px] shrink-0">
+                            {cond.startRow}열 ~ {cond.endRow}열 × {cond.levels}단 = {getRackConditionCount(cond)}개
+                          </Badge>
+                        )}
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-7 w-7 p-0 text-destructive hover:text-destructive shrink-0"
+                          onClick={() => removeRackCondition(cond.id)}
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* 공통 설정 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  ⚙️ 공통 설정
+                </h3>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      위치 유형
+                    </Label>
+                    <Select value={rackLocationType} onValueChange={setRackLocationType}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="위치유형 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(locationCategoryOptions["location_type"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>
+                            {o.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      사용 여부
+                    </Label>
+                    <Select value={rackStatus} onValueChange={setRackStatus}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="상태 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(locationCategoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>
+                            {o.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+
+              {/* 등록 미리보기 */}
+              <div>
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-sm font-bold flex items-center gap-1.5">
+                    👁️ 등록 미리보기
+                  </h3>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={generateRackPreview}
+                  >
+                    <Eye className="h-3.5 w-3.5" />
+                    미리보기 생성
+                  </Button>
+                </div>
+
+                {rackPreview.length > 0 && (
+                  <>
+                    {/* 통계 카드 */}
+                    <div className="grid grid-cols-3 gap-3 mb-3">
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">총 위치</p>
+                        <p className="text-lg font-bold">{rackStats.totalLocations}개</p>
+                      </div>
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">열 수</p>
+                        <p className="text-lg font-bold">{rackStats.totalRows}개</p>
+                      </div>
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">최대 단</p>
+                        <p className="text-lg font-bold">{rackStats.maxLevels}</p>
+                      </div>
+                    </div>
+
+                    {/* 미리보기 테이블 */}
+                    <div className="rounded-lg border overflow-hidden max-h-[300px] overflow-y-auto">
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-10 text-center text-[11px] font-bold text-muted-foreground">No</TableHead>
+                            <TableHead className="text-[11px] font-bold text-muted-foreground">위치코드</TableHead>
+                            <TableHead className="text-[11px] font-bold text-muted-foreground">위치명</TableHead>
+                            <TableHead className="w-14 text-center text-[11px] font-bold text-muted-foreground">층</TableHead>
+                            <TableHead className="w-14 text-center text-[11px] font-bold text-muted-foreground">구역</TableHead>
+                            <TableHead className="w-12 text-center text-[11px] font-bold text-muted-foreground">열</TableHead>
+                            <TableHead className="w-12 text-center text-[11px] font-bold text-muted-foreground">단</TableHead>
+                            <TableHead className="w-16 text-[11px] font-bold text-muted-foreground">유형</TableHead>
+                            <TableHead className="w-16 text-[11px] font-bold text-muted-foreground">비고</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {rackPreview.map((item, idx) => (
+                            <TableRow key={idx} className="text-xs">
+                              <TableCell className="text-center text-muted-foreground">
+                                {idx + 1}
+                              </TableCell>
+                              <TableCell className="font-mono">{item.location_code}</TableCell>
+                              <TableCell>{item.location_name}</TableCell>
+                              <TableCell className="text-center">{item.floor}</TableCell>
+                              <TableCell className="text-center">{item.zone}</TableCell>
+                              <TableCell className="text-center">{item.row_num}</TableCell>
+                              <TableCell className="text-center">{item.level_num}</TableCell>
+                              <TableCell>
+                                {resolveCategory(locationCategoryOptions, "location_type", item.location_type) || "-"}
+                              </TableCell>
+                              <TableCell>-</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </>
+                )}
+
+                {rackPreview.length === 0 && (
+                  <div className="flex flex-col items-center justify-center py-6 border-2 border-dashed rounded-lg border-border text-sm text-muted-foreground">
+                    위의 설정을 완료한 뒤 미리보기 생성 버튼을 클릭하세요
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2 px-6 py-4 border-t shrink-0 bg-background">
+            <Button variant="outline" onClick={() => setRackModalOpen(false)}>
+              취소
+            </Button>
+            <Button
+              onClick={handleRackBulkSave}
+              disabled={rackSaving || rackPreview.length === 0}
+            >
+              {rackSaving && <Loader2 className="h-4 w-4 animate-spin mr-1" />}
+              일괄 등록 ({rackPreview.length}건)
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/master-data/company/page.tsx b/frontend/app/(main)/COMPANY_7/master-data/company/page.tsx
new file mode 100644
index 00000000..9d7f2dea
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/master-data/company/page.tsx
@@ -0,0 +1,759 @@
+"use client";
+
+/**
+ * 회사관리 — Type D 탭 멀티뷰 (2탭)
+ *
+ * Tab 1: 회사정보 (company_mng 단일 레코드 폼)
+ * Tab 2: 부서관리 (dept_info 트리 + user_info 목록)
+ */
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Building2, Users, Pencil, Save, Loader2, Plus, Trash2,
+  Upload, X, Image as ImageIcon, ChevronRight, FolderOpen, Folder,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import * as departmentAPI from "@/lib/api/department";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { formatField, validateField, validateForm } from "@/lib/utils/validation";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const COMPANY_TABLE = "company_mng";
+const DEPT_TABLE = "dept_info";
+const USER_TABLE = "user_info";
+
+/* ── 트리 노드 타입 ── */
+interface DeptNode {
+  dept_code: string;
+  dept_name: string;
+  parent_dept_code: string | null;
+  status?: string;
+  children: DeptNode[];
+}
+
+export default function CompanyPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  /* ===================== Tab 1: 회사정보 ===================== */
+  const [companyData, setCompanyData] = useState<Record<string, any>>({});
+  const [companyForm, setCompanyForm] = useState<Record<string, any>>({});
+  const [companyLoading, setCompanyLoading] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  // 이미지 업로드 refs
+  const imageRef = useRef<HTMLInputElement>(null);
+  const logoRef = useRef<HTMLInputElement>(null);
+  const sealRef = useRef<HTMLInputElement>(null);
+
+  // 이미지 미리보기
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [logoPreview, setLogoPreview] = useState<string | null>(null);
+  const [sealPreview, setSealPreview] = useState<string | null>(null);
+
+  const fetchCompany = useCallback(async () => {
+    setCompanyLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${COMPANY_TABLE}/data`, {
+        page: 1, size: 1, autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      if (rows.length > 0) {
+        setCompanyData(rows[0]);
+        setCompanyForm(rows[0]);
+        if (rows[0].company_image) setImagePreview(rows[0].company_image);
+        if (rows[0].company_logo) setLogoPreview(rows[0].company_logo);
+        if (rows[0].company_seal) setSealPreview(rows[0].company_seal);
+      }
+    } catch {
+      toast.error("회사 정보를 불러오는데 실패했어요.");
+    } finally {
+      setCompanyLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchCompany(); }, [fetchCompany]);
+
+  const handleImageUpload = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    field: string,
+    setPreview: React.Dispatch<React.SetStateAction<string | null>>,
+  ) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result as string;
+      setPreview(result);
+      setCompanyForm((prev) => ({ ...prev, [field]: result }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleCompanySave = async () => {
+    if (!companyForm.company_name) {
+      toast.error("회사명은 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_at, updated_at, writer, created_date, updated_date, regdate, company_code, ...updatedData } = companyForm;
+
+      if (companyData.company_code) {
+        await apiClient.put(`/table-management/tables/${COMPANY_TABLE}/edit`, {
+          originalData: { company_code: companyData.company_code },
+          updatedData,
+        });
+      } else {
+        await apiClient.post(`/table-management/tables/${COMPANY_TABLE}/add`, { company_code, ...updatedData });
+      }
+      toast.success("회사 정보가 저장되었어요.");
+      setEditMode(false);
+      fetchCompany();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const cancelEdit = () => {
+    setCompanyForm(companyData);
+    setImagePreview(companyData.company_image || null);
+    setLogoPreview(companyData.company_logo || null);
+    setSealPreview(companyData.company_seal || null);
+    setEditMode(false);
+  };
+
+  /* ===================== Tab 2: 부서관리 ===================== */
+  const [depts, setDepts] = useState<any[]>([]);
+  const [deptTree, setDeptTree] = useState<DeptNode[]>([]);
+  const [deptLoading, setDeptLoading] = useState(false);
+  const [selectedDeptCode, setSelectedDeptCode] = useState<string | null>(null);
+  const [expandedDepts, setExpandedDepts] = useState<Set<string>>(new Set());
+
+  // 사원
+  const [members, setMembers] = useState<any[]>([]);
+  const [memberLoading, setMemberLoading] = useState(false);
+
+  // 부서 모달
+  const [deptModalOpen, setDeptModalOpen] = useState(false);
+  const [deptEditMode, setDeptEditMode] = useState(false);
+  const [deptForm, setDeptForm] = useState<Record<string, any>>({});
+  const [deptSaving, setDeptSaving] = useState(false);
+
+  // 채번
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 사원 모달
+  const [userModalOpen, setUserModalOpen] = useState(false);
+  const [userEditMode, setUserEditMode] = useState(false);
+  const [userForm, setUserForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+
+  // 트리 구성
+  const buildTree = (flatDepts: any[]): DeptNode[] => {
+    const map: Record<string, DeptNode> = {};
+    const roots: DeptNode[] = [];
+    flatDepts.forEach((d) => {
+      map[d.dept_code] = { ...d, children: [] };
+    });
+    flatDepts.forEach((d) => {
+      const node = map[d.dept_code];
+      if (d.parent_dept_code && map[d.parent_dept_code]) {
+        map[d.parent_dept_code].children.push(node);
+      } else {
+        roots.push(node);
+      }
+    });
+    return roots;
+  };
+
+  const fetchDepts = useCallback(async () => {
+    setDeptLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DEPT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setDepts(raw);
+      setDeptTree(buildTree(raw));
+      // 전부 펼치기
+      setExpandedDepts(new Set(raw.map((d: any) => d.dept_code)));
+    } catch {
+      toast.error("부서 목록을 불러오는데 실패했어요.");
+    } finally {
+      setDeptLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchDepts(); }, [fetchDepts]);
+
+  const selectedDept = depts.find((d) => d.dept_code === selectedDeptCode);
+
+  // 사원 조회
+  const fetchMembers = useCallback(async () => {
+    if (!selectedDeptCode) { setMembers([]); return; }
+    setMemberLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${USER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "dept_code", operator: "equals", value: selectedDeptCode }] },
+        autoFilter: true,
+      });
+      setMembers(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setMembers([]); } finally { setMemberLoading(false); }
+  }, [selectedDeptCode]);
+
+  useEffect(() => { fetchMembers(); }, [fetchMembers]);
+
+  // 트리 토글
+  const toggleExpand = (code: string) => {
+    setExpandedDepts((prev) => {
+      const next = new Set(prev);
+      if (next.has(code)) next.delete(code); else next.add(code);
+      return next;
+    });
+  };
+
+  // 부서 등록
+  const openDeptRegister = async () => {
+    setDeptForm({});
+    setDeptEditMode(false);
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setDeptModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/dept_info/dept_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openDeptEdit = () => {
+    if (!selectedDept) return;
+    setDeptForm({ ...selectedDept });
+    setDeptEditMode(true);
+    setDeptModalOpen(true);
+  };
+
+  const handleDeptSave = async () => {
+    if (!deptForm.dept_name) { toast.error("부서명은 필수예요."); return; }
+    const parentCode = (deptForm.parent_dept_code && deptForm.parent_dept_code !== "none") ? deptForm.parent_dept_code : null;
+    setDeptSaving(true);
+    try {
+      if (deptEditMode && deptForm.dept_code) {
+        const response = await departmentAPI.updateDepartment(deptForm.dept_code, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "수정에 실패했어요."); return; }
+        toast.success("수정되었어요.");
+      } else {
+        const companyCode = user?.companyCode || "";
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else { toast.error("채번 코드 할당에 실패했어요."); return; }
+        }
+        const response = await departmentAPI.createDepartment(companyCode, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+          dept_code: allocatedCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "등록에 실패했어요."); return; }
+        toast.success("등록되었어요.");
+      }
+      setDeptModalOpen(false);
+      fetchDepts();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setDeptSaving(false);
+    }
+  };
+
+  const handleDeptDelete = async () => {
+    if (!selectedDeptCode) return;
+    const ok = await confirm("부서를 삭제할까요?", {
+      description: "해당 부서에 소속된 사원 정보는 유지돼요.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      const response = await departmentAPI.deleteDepartment(selectedDeptCode);
+      if (!response.success) { toast.error((response as any).error || "삭제에 실패했어요."); return; }
+      toast.success((response as any).message || "삭제되었어요.");
+      setSelectedDeptCode(null);
+      fetchDepts();
+    } catch { toast.error("삭제에 실패했어요."); }
+  };
+
+  // 사원 추가/수정
+  const openUserModal = (editData?: any) => {
+    if (editData) {
+      setUserEditMode(true);
+      setUserForm({ ...editData, user_password: "" });
+    } else {
+      setUserEditMode(false);
+      setUserForm({ dept_code: selectedDeptCode || "", user_password: "" });
+    }
+    setFormErrors({});
+    setUserModalOpen(true);
+  };
+
+  const handleUserFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setUserForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => { const n = { ...prev }; if (error) n[field] = error; else delete n[field]; return n; });
+  };
+
+  const handleUserSave = async () => {
+    if (!userForm.user_id) { toast.error("사용자 ID는 필수예요."); return; }
+    if (!userForm.user_name) { toast.error("사용자 이름은 필수예요."); return; }
+    if (!userForm.dept_code) { toast.error("부서는 필수예요."); return; }
+    const errors = validateForm(userForm, ["cell_phone", "email"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) { toast.error("입력 형식을 확인해주세요."); return; }
+    setDeptSaving(true);
+    try {
+      const password = userForm.user_password || (!userEditMode ? "qlalfqjsgh11" : undefined);
+      await apiClient.post("/admin/users/with-dept", {
+        userInfo: {
+          user_id: userForm.user_id,
+          user_name: userForm.user_name,
+          user_name_eng: userForm.user_name_eng || undefined,
+          user_password: password || undefined,
+          email: userEditMode ? (userForm.email || null) : (userForm.email || undefined),
+          tel: userForm.tel || undefined,
+          cell_phone: userEditMode ? (userForm.cell_phone || null) : (userForm.cell_phone || undefined),
+          sabun: userEditMode ? (userForm.sabun || null) : (userForm.sabun || undefined),
+          position_name: userForm.position_name || undefined,
+          dept_code: userForm.dept_code || undefined,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name || undefined,
+          status: userForm.status || "active",
+        },
+        mainDept: userForm.dept_code ? {
+          dept_code: userForm.dept_code,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name,
+          position_name: userForm.position_name || undefined,
+        } : undefined,
+        isUpdate: userEditMode,
+      });
+      toast.success(userEditMode ? "사원 정보가 수정되었어요." : "사원이 추가되었어요.");
+      setUserModalOpen(false);
+      fetchMembers();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setDeptSaving(false);
+    }
+  };
+
+  // EDataTable 컬럼 정의 (사원 목록)
+  const companyMemberColumns: EDataTableColumn[] = [
+    { key: "sabun", label: "사번", width: "w-[80px]", render: (val: any) => <span className="text-[13px]">{val || "-"}</span> },
+    { key: "user_name", label: "이름", width: "w-[90px]" },
+    { key: "user_id", label: "사용자ID", width: "w-[100px]" },
+    { key: "position_name", label: "직급", width: "w-[80px]", render: (val: any) => <span>{val || "-"}</span> },
+    { key: "cell_phone", label: "휴대폰", width: "w-[120px]", render: (val: any) => <span>{val || "-"}</span> },
+    { key: "email", label: "이메일" },
+  ];
+
+  /* ── 트리 렌더 ── */
+  const renderTree = (nodes: DeptNode[], depth = 0) => {
+    return nodes.map((node) => {
+      const isExpanded = expandedDepts.has(node.dept_code);
+      const isSelected = selectedDeptCode === node.dept_code;
+      const hasChildren = node.children.length > 0;
+      return (
+        <div key={node.dept_code}>
+          <div
+            className={cn(
+              "flex items-center gap-1.5 px-3 py-2 cursor-pointer text-sm transition-colors hover:bg-accent",
+              isSelected && "bg-primary/10 text-primary font-semibold border-l-2 border-primary",
+              !isSelected && "border-l-2 border-transparent",
+            )}
+            style={{ paddingLeft: `${12 + depth * 20}px` }}
+            onClick={() => setSelectedDeptCode(isSelected ? null : node.dept_code)}
+          >
+            {hasChildren ? (
+              <button
+                className="p-0.5 rounded hover:bg-accent"
+                onClick={(e) => { e.stopPropagation(); toggleExpand(node.dept_code); }}
+              >
+                <ChevronRight className={cn("w-3.5 h-3.5 transition-transform", isExpanded && "rotate-90")} />
+              </button>
+            ) : (
+              <span className="w-4.5" />
+            )}
+            {isExpanded && hasChildren
+              ? <FolderOpen className="w-4 h-4 text-muted-foreground" />
+              : <Folder className="w-4 h-4 text-muted-foreground" />
+            }
+            <span className="truncate">{node.dept_name}</span>
+            {node.status === "inactive" && <Badge variant="outline" className="text-[10px] px-1 py-0">비활성</Badge>}
+          </div>
+          {isExpanded && hasChildren && renderTree(node.children, depth + 1)}
+        </div>
+      );
+    });
+  };
+
+  /* ── 이미지 업로드 박스 ── */
+  const ImageUploadBox = ({
+    label, preview, inputRef, field, setPreview,
+  }: {
+    label: string;
+    preview: string | null;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    field: string;
+    setPreview: React.Dispatch<React.SetStateAction<string | null>>;
+  }) => (
+    <div className="flex flex-col gap-2">
+      <Label className="text-sm font-medium">{label}</Label>
+      <div className="relative w-40 h-40 rounded-lg border-2 border-dashed border-border bg-muted/50 flex items-center justify-center overflow-hidden group">
+        {preview ? (
+          <>
+            <img src={preview} alt={label} className="w-full h-full object-contain" />
+            {editMode && (
+              <div className="absolute inset-0 bg-foreground/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                <Button size="sm" variant="secondary" className="h-7 text-xs" onClick={() => inputRef.current?.click()}>
+                  <Upload className="w-3 h-3 mr-1" /> 변경
+                </Button>
+                <Button size="sm" variant="destructive" className="h-7 text-xs" onClick={() => {
+                  setPreview(null);
+                  setCompanyForm((prev) => ({ ...prev, [field]: null }));
+                }}>
+                  <X className="w-3 h-3" />
+                </Button>
+              </div>
+            )}
+          </>
+        ) : (
+          <button
+            className="flex flex-col items-center gap-1.5 text-muted-foreground"
+            onClick={() => editMode && inputRef.current?.click()}
+            disabled={!editMode}
+          >
+            <ImageIcon className="w-8 h-8" />
+            <span className="text-xs">{editMode ? "이미지 업로드" : "이미지 없음"}</span>
+          </button>
+        )}
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={(e) => handleImageUpload(e, field, setPreview)}
+      />
+    </div>
+  );
+
+  return (
+    <div className="h-[calc(100vh-4rem)] flex flex-col overflow-hidden">
+      {/* 탭 컨테이너 */}
+      <Tabs defaultValue="company" className="flex flex-col h-full gap-0 min-h-0">
+        {/* 탭 헤더 — border-b 스타일 */}
+        <div className="shrink-0 border-b bg-background px-4">
+          <TabsList className="h-12 bg-transparent gap-1">
+            <TabsTrigger
+              value="company"
+              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 gap-1.5"
+            >
+              <Building2 className="w-4 h-4" /> 회사정보
+            </TabsTrigger>
+          </TabsList>
+        </div>
+
+        {/* ===================== Tab 1: 회사정보 ===================== */}
+        <TabsContent value="company" className="flex-1 overflow-auto mt-0 p-4">
+          <div className="border rounded-lg bg-card">
+            {/* 패널 헤더 */}
+            <div className="flex items-center justify-between px-6 py-3 border-b bg-muted/30">
+              <div className="font-semibold flex items-center gap-2 text-sm">
+                <Building2 className="w-4 h-4 text-muted-foreground" />
+                <span>회사 기본정보</span>
+              </div>
+              <div className="flex gap-1.5">
+                {editMode ? (
+                  <>
+                    <Button variant="outline" size="sm" onClick={cancelEdit}>취소</Button>
+                    <Button size="sm" onClick={handleCompanySave} disabled={saving}>
+                      {saving ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <Save className="w-3.5 h-3.5 mr-1" />}
+                      저장해요
+                    </Button>
+                  </>
+                ) : (
+                  <Button size="sm" onClick={() => setEditMode(true)}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {companyLoading ? (
+              <div className="flex items-center justify-center py-20">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : (
+              <div className="p-6 space-y-6">
+                {/* 기본 정보 섹션 제목 */}
+                <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  기본 정보
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+
+                {/* 기본 정보 그리드 (2열) */}
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">회사코드</Label>
+                    <Input value={companyForm.company_code || ""} className="h-9 bg-muted/50" disabled readOnly />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      회사명 <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      value={companyForm.company_name || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, company_name: e.target.value }))}
+                      placeholder="회사명을 입력해주세요"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">사업자등록번호</Label>
+                    <Input
+                      value={companyForm.business_registration_number || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, business_registration_number: e.target.value }))}
+                      placeholder="000-00-00000"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대표자명</Label>
+                    <Input
+                      value={companyForm.representative_name || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, representative_name: e.target.value }))}
+                      placeholder="대표자명"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대표전화</Label>
+                    <Input
+                      value={companyForm.representative_phone || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, representative_phone: e.target.value }))}
+                      placeholder="02-0000-0000"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">팩스</Label>
+                    <Input
+                      value={companyForm.fax || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, fax: e.target.value }))}
+                      placeholder="02-0000-0001"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">이메일</Label>
+                    <Input
+                      value={companyForm.email || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, email: e.target.value }))}
+                      placeholder="example@company.com"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">홈페이지</Label>
+                    <Input
+                      value={companyForm.website || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, website: e.target.value }))}
+                      placeholder="https://www.company.com"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="col-span-2 space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">주소</Label>
+                    <Input
+                      value={companyForm.address || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="회사 주소를 입력해주세요"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                </div>
+
+                {/* 이미지 섹션 */}
+                <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  이미지 관리
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <div className="flex gap-6">
+                  <ImageUploadBox label="회사 이미지" preview={imagePreview} inputRef={imageRef} field="company_image" setPreview={setImagePreview} />
+                  <ImageUploadBox label="회사 로고" preview={logoPreview} inputRef={logoRef} field="company_logo" setPreview={setLogoPreview} />
+                  <ImageUploadBox label="직인" preview={sealPreview} inputRef={sealRef} field="company_seal" setPreview={setSealPreview} />
+                </div>
+              </div>
+            )}
+          </div>
+        </TabsContent>
+
+      </Tabs>
+
+      {/* ── 부서 등록/수정 모달 ── */}
+      <Dialog open={deptModalOpen} onOpenChange={setDeptModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{deptEditMode ? "부서 수정" : "부서 등록"}</DialogTitle>
+            <DialogDescription>{deptEditMode ? "부서 정보를 수정해요." : "새로운 부서를 등록해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서코드</Label>
+              <Input
+                value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
+                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성됩니다")}
+                className="h-9" disabled readOnly
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서명 <span className="text-destructive">*</span></Label>
+              <Input
+                value={deptForm.dept_name || ""}
+                onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
+                placeholder="부서명" className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">상위부서</Label>
+              <Select value={deptForm.parent_dept_code || ""} onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="상위부서 선택 (선택사항)" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">없음</SelectItem>
+                  {depts.filter((d) => d.dept_code !== deptForm.dept_code).map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name} ({d.dept_code})</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeptModalOpen(false)}>취소</Button>
+            <Button onClick={handleDeptSave} disabled={deptSaving}>
+              {deptSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 사원 추가/수정 모달 ── */}
+      <Dialog open={userModalOpen} onOpenChange={setUserModalOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{userEditMode ? "사원 정보 수정" : "사원 추가"}</DialogTitle>
+            <DialogDescription>
+              {userEditMode
+                ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정해요.`
+                : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가해요.` : "사원을 추가해요."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-sm">사용자 ID <span className="text-destructive">*</span></Label>
+              <Input value={userForm.user_id || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
+                placeholder="사용자 ID" className="h-9" disabled={userEditMode} />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">이름 <span className="text-destructive">*</span></Label>
+              <Input value={userForm.user_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
+                placeholder="이름" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">사번</Label>
+              <Input value={userForm.sabun || ""} onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
+                placeholder="사번" className="h-9" autoComplete="off" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">비밀번호</Label>
+              <Input value={userForm.user_password || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
+                placeholder={userEditMode ? "변경 시에만 입력" : "미입력 시 qlalfqjsgh11"} className="h-9" type="password" autoComplete="new-password" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">직급</Label>
+              <Input value={userForm.position_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
+                placeholder="직급" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서 <span className="text-destructive">*</span></Label>
+              <Select value={userForm.dept_code || ""} onValueChange={(v) => setUserForm((p) => ({ ...p, dept_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="부서 선택" /></SelectTrigger>
+                <SelectContent>
+                  {depts.map((d) => <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">휴대폰</Label>
+              <Input value={userForm.cell_phone || ""} onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
+                placeholder="010-0000-0000" className={cn("h-9", formErrors.cell_phone && "border-destructive")} />
+              {formErrors.cell_phone && <p className="text-xs text-destructive">{formErrors.cell_phone}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">이메일</Label>
+              <Input value={userForm.email || ""} onChange={(e) => handleUserFormChange("email", e.target.value)}
+                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
+              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">입사일</Label>
+              <Input type="date" value={userForm.regdate || ""} onChange={(e) => setUserForm((p) => ({ ...p, regdate: e.target.value }))} className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">퇴사일</Label>
+              <Input type="date" value={userForm.end_date || ""} onChange={(e) => setUserForm((p) => ({ ...p, end_date: e.target.value }))} className="h-9" />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserModalOpen(false)}>취소</Button>
+            <Button onClick={handleUserSave} disabled={deptSaving}>
+              {deptSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/master-data/department/page.tsx b/frontend/app/(main)/COMPANY_7/master-data/department/page.tsx
index 5ffa7c7e..23f70f2b 100644
--- a/frontend/app/(main)/COMPANY_7/master-data/department/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/master-data/department/page.tsx
@@ -9,7 +9,7 @@
  * 모달: 부서 등록(dept_info), 사원 추가(user_info)
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -17,11 +17,14 @@ import { Badge } from "@/components/ui/badge";
 import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
 } from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
-  Building2, Users, Settings2,
+  Users, Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
@@ -29,46 +32,34 @@ import * as departmentAPI from "@/lib/api/department";
 import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 import { formatField, validateField, validateForm } from "@/lib/utils/validation";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const DEPT_TABLE = "dept_info";
 const USER_TABLE = "user_info";
-
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "dept_code", label: "부서코드", width: "w-[120px]" },
-  { key: "dept_name", label: "부서명", minWidth: "min-w-[150px]" },
-  { key: "parent_dept_code", label: "상위부서", width: "w-[100px]" },
-  { key: "status", label: "상태", width: "w-[70px]" },
-];
-
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "sabun", label: "사번", width: "w-[80px]" },
-  { key: "user_name", label: "이름", width: "w-[90px]" },
-  { key: "user_id", label: "사용자ID", width: "w-[100px]" },
-  { key: "position_name", label: "직급", width: "w-[80px]" },
-  { key: "cell_phone", label: "휴대폰", width: "w-[120px]" },
-  { key: "email", label: "이메일", minWidth: "min-w-[150px]" },
+const DEPT_COLUMNS = [
+  { key: "parent_dept_code", label: "상위부서" },
+  { key: "status", label: "상태" },
 ];
 
 export default function DepartmentPage() {
   const { user } = useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
 
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
   // 좌측: 부서
   const [depts, setDepts] = useState<any[]>([]);
   const [deptLoading, setDeptLoading] = useState(false);
   const [deptCount, setDeptCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
   const [selectedDeptId, setSelectedDeptId] = useState<string | null>(null);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
 
   // 우측: 사원
   const [members, setMembers] = useState<any[]>([]);
@@ -90,17 +81,14 @@ export default function DepartmentPage() {
   const [userForm, setUserForm] = useState<Record<string, any>>({});
   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
 
+  // 사원 탭 (재직중/퇴사)
+  const [memberTab, setMemberTab] = useState<"active" | "resigned">("active");
+
   // 엑셀
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
-
-  useEffect(() => {
-    const saved = loadTableSettings("department");
-    if (saved) applyTableSettings(saved);
-  }, []);
+  // 테이블 설정
+  const ts = useTableSettings("c16-department", DEPT_TABLE, DEPT_COLUMNS);
 
   // 부서 조회
   const fetchDepts = useCallback(async () => {
@@ -244,7 +232,7 @@ export default function DepartmentPage() {
     } catch { toast.error("삭제에 실패했습니다."); }
   };
 
-  // 사원 추가
+  // 사원 추가/수정
   const openUserModal = (editData?: any) => {
     if (editData) {
       setUserEditMode(true);
@@ -291,6 +279,7 @@ export default function DepartmentPage() {
           dept_code: userForm.dept_code || undefined,
           dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name || undefined,
           status: userForm.status || "active",
+          end_date: userForm.end_date || null,
         },
         mainDept: userForm.dept_code ? {
           dept_code: userForm.dept_code,
@@ -319,88 +308,254 @@ export default function DepartmentPage() {
     toast.success("다운로드 완료");
   };
 
+  // 퇴사일 기반 재직/퇴사 분리
+  const _now = new Date();
+  const today = `${_now.getFullYear()}-${String(_now.getMonth() + 1).padStart(2, "0")}-${String(_now.getDate()).padStart(2, "0")}`;
+  const activeMembers = members.filter((m) => !m.end_date || m.end_date.substring(0, 10) >= today);
+  const resignedMembers = members.filter((m) => m.end_date && m.end_date.substring(0, 10) < today);
+
+  // EDataTable 컬럼 정의 (부서 목록) — ts.visibleColumns 순서를 따름
+  const deptColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      dept_code: { width: "w-[120px]" },
+      dept_name: { minWidth: "min-w-[140px]" },
+      parent_dept_code: {
+        width: "w-[110px]",
+        render: (val: any) => <span className="text-[13px] text-muted-foreground">{val || "\u2014"}</span>,
+      },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "active" ? "default" : "outline"}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val === "active" ? "활성" : (val || "\u2014")}
+            </Badge>
+          ) : null,
+      },
+    };
+    // dept_code, dept_name은 항상 표시 (DEPT_COLUMNS에 포함되지 않으므로 visibleColumns에 없음)
+    const fixedCols: EDataTableColumn[] = [
+      { key: "dept_code", label: "부서코드", ...colProps["dept_code"] },
+      { key: "dept_name", label: "부서명", ...colProps["dept_name"] },
+    ];
+    const dynamicCols = ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+    return [...fixedCols, ...dynamicCols];
+  }, [ts.visibleColumns]);
+
   return (
-    <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 바 */}
       <DynamicSearchFilter
         tableName={DEPT_TABLE}
-        filterId="department"
+        filterId="c16-department"
         onFilterChange={setSearchFilters}
         dataCount={deptCount}
-        externalFilterConfig={filterConfig}
+        externalFilterConfig={ts.filterConfig}
         extraActions={
           <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
+            <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+              엑셀 업로드
             </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
+            <Button variant="outline" size="sm" className="h-8" onClick={() => void handleExcelDownload()}>
               <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
             </Button>
           </div>
         }
       />
 
-      {/* 분할 패널 */}
+      {/* 마스터-디테일 분할 패널 */}
       <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
         <ResizablePanelGroup direction="horizontal">
-          {/* 좌측: 부서 */}
+          {/* 좌측: 부서 목록 */}
           <ResizablePanel defaultSize={40} minSize={25}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Building2 className="w-4 h-4" /> 부서
-                  <Badge variant="secondary" className="font-normal">{deptCount}건</Badge>
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-3 border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">부서 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {deptCount}건
+                  </span>
                 </div>
                 <div className="flex gap-1.5">
-                  <Button size="sm" onClick={openDeptRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
-                  <Button variant="outline" size="sm" disabled={!selectedDeptCode} onClick={openDeptEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
-                  <Button variant="destructive" size="sm" disabled={!selectedDeptCode} onClick={handleDeptDelete}><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                  <Button size="sm" onClick={() => void openDeptRegister()}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedDeptCode} onClick={openDeptEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedDeptCode} onClick={() => void handleDeptDelete()}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid
-                gridId="dept-left"
-                columns={LEFT_COLUMNS}
-                data={depts}
+
+              {/* 부서 테이블 */}
+              <EDataTable
+                columns={deptColumns}
+                data={ts.groupData(depts)}
+                rowKey={(row) => row.id}
                 loading={deptLoading}
+                emptyMessage="등록된 부서가 없어요"
                 selectedId={selectedDeptId}
-                onSelect={(id) => {
-                  setSelectedDeptId((prev) => (prev === id ? null : id));
-                }}
+                onSelect={(id) => setSelectedDeptId(id)}
                 onRowDoubleClick={() => openDeptEdit()}
-                emptyMessage="등록된 부서가 없습니다"
+                showRowNumber
+                showPagination={false}
+                draggableColumns={false}
+                columnOrderKey="c16-department"
               />
             </div>
           </ResizablePanel>
 
           <ResizableHandle withHandle />
 
-          {/* 우측: 사원 */}
+          {/* 우측: 사원 목록 */}
           <ResizablePanel defaultSize={60} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Users className="w-4 h-4" />
-                  {selectedDept ? "부서 인원" : "전체 사원"}
-                  {selectedDept && <Badge variant="outline" className="font-normal">{selectedDept.dept_name}</Badge>}
-                  {members.length > 0 && <Badge variant="secondary" className="font-normal">{members.length}명</Badge>}
+              {!selectedDeptId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">부서를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 부서를 선택하면 소속 사원 목록이 표시돼요</div>
+                  </div>
                 </div>
-                <Button variant="outline" size="sm" onClick={() => openUserModal()}>
-                  <Plus className="w-3.5 h-3.5 mr-1" /> 사원 추가
-                </Button>
-              </div>
-              <DataGrid
-                gridId="dept-right"
-                columns={RIGHT_COLUMNS}
-                data={members}
-                loading={memberLoading}
-                showRowNumber={false}
-                tableName={USER_TABLE}
-                emptyMessage={selectedDeptCode ? "소속 사원이 없습니다" : "등록된 사원이 없습니다"}
-                onRowDoubleClick={(row) => openUserModal(row)}
-              />
+              ) : (
+                <>
+                  {/* 디테일 헤더 */}
+                  <div className="flex items-center gap-3 px-4 py-3 border-b bg-muted shrink-0">
+                    <span className="text-[13px] font-bold">{selectedDept?.dept_name || "-"}</span>
+                    <span className="font-mono text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                      {selectedDept?.dept_code || "-"}
+                    </span>
+                    <div className="ml-auto">
+                      <Button variant="outline" size="sm" onClick={() => openUserModal()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        사원 추가
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 재직/퇴사 탭 */}
+                  <div className="flex border-b border-border px-4 shrink-0 bg-muted">
+                    <button
+                      onClick={() => setMemberTab("active")}
+                      className={cn("px-4 py-2.5 text-xs font-semibold border-b-2 transition-colors",
+                        memberTab === "active" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+                      )}
+                    >
+                      재직중
+                      {activeMembers.length > 0 && (
+                        <Badge variant="secondary" className="ml-1.5 text-[10px] px-1.5 py-0">{activeMembers.length}</Badge>
+                      )}
+                    </button>
+                    <button
+                      onClick={() => setMemberTab("resigned")}
+                      className={cn("px-4 py-2.5 text-xs font-semibold border-b-2 transition-colors",
+                        memberTab === "resigned" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+                      )}
+                    >
+                      퇴사
+                      {resignedMembers.length > 0 && (
+                        <Badge variant="secondary" className="ml-1.5 text-[10px] px-1.5 py-0">{resignedMembers.length}</Badge>
+                      )}
+                    </button>
+                  </div>
+
+                  <div className="flex-1 overflow-auto">
+                    {memberLoading ? (
+                      <div className="flex flex-col items-center justify-center py-12">
+                        <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                      </div>
+                    ) : memberTab === "active" ? (
+                      activeMembers.length === 0 ? (
+                        <div className="text-center py-8 text-muted-foreground text-sm">재직중인 사원이 없어요</div>
+                      ) : (
+                        <Table noWrapper>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center px-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사번</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이름</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사용자ID</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">직급</TableHead>
+                              <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">휴대폰</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {activeMembers.map((member, idx) => (
+                              <TableRow
+                                key={member.id || member.user_id}
+                                className="cursor-pointer select-none hover:bg-muted/50"
+                                onDoubleClick={() => openUserModal(member)}
+                              >
+                                <TableCell className="text-center text-[13px] text-muted-foreground px-2">{idx + 1}</TableCell>
+                                <TableCell className="font-mono text-[13px] text-muted-foreground">{member.sabun || "—"}</TableCell>
+                                <TableCell className="text-sm font-medium">{member.user_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.user_id}</TableCell>
+                                <TableCell className="text-[13px]">{member.position_name || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.cell_phone || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.email || "—"}</TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      )
+                    ) : (
+                      resignedMembers.length === 0 ? (
+                        <div className="text-center py-8 text-muted-foreground text-sm">퇴사한 사원이 없어요</div>
+                      ) : (
+                        <Table noWrapper>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center px-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사번</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이름</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사용자ID</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">직급</TableHead>
+                              <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">휴대폰</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">퇴사일</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {resignedMembers.map((member, idx) => (
+                              <TableRow
+                                key={member.id || member.user_id}
+                                className="cursor-pointer select-none hover:bg-muted/50"
+                                onDoubleClick={() => openUserModal(member)}
+                              >
+                                <TableCell className="text-center text-[13px] text-muted-foreground px-2">{idx + 1}</TableCell>
+                                <TableCell className="font-mono text-[13px] text-muted-foreground">{member.sabun || "—"}</TableCell>
+                                <TableCell className="text-sm font-medium">{member.user_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.user_id}</TableCell>
+                                <TableCell className="text-[13px]">{member.position_name || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.cell_phone || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.email || "—"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.end_date ? member.end_date.substring(0, 10) : "—"}</TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      )
+                    )}
+                  </div>
+                </>
+              )}
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>
@@ -413,22 +568,37 @@ export default function DepartmentPage() {
             <DialogTitle>{deptEditMode ? "부서 수정" : "부서 등록"}</DialogTitle>
             <DialogDescription>{deptEditMode ? "부서 정보를 수정합니다." : "새로운 부서를 등록합니다."}</DialogDescription>
           </DialogHeader>
-          <div className="space-y-4 py-4">
+          <div className="space-y-4 py-2">
             <div className="space-y-1.5">
-              <Label className="text-sm">부서코드</Label>
-              <Input value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
-                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성됩니다")}
-                className="h-9" disabled readOnly />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">부서코드</span>
+              <Input
+                value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
+                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                className="h-9"
+                disabled
+                readOnly
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">부서명 <span className="text-destructive">*</span></Label>
-              <Input value={deptForm.dept_name || ""} onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
-                placeholder="부서명" className="h-9" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                부서명 <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={deptForm.dept_name || ""}
+                onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
+                placeholder="부서명을 입력해 주세요"
+                className="h-9"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">상위부서</Label>
-              <Select value={deptForm.parent_dept_code || ""} onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}>
-                <SelectTrigger className="h-9"><SelectValue placeholder="상위부서 선택 (선택사항)" /></SelectTrigger>
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상위부서</span>
+              <Select
+                value={deptForm.parent_dept_code || ""}
+                onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="상위부서 선택 (선택사항)" />
+                </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="none">없음</SelectItem>
                   {depts.filter((d) => d.dept_code !== deptForm.dept_code).map((d) => (
@@ -440,85 +610,153 @@ export default function DepartmentPage() {
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setDeptModalOpen(false)}>취소</Button>
-            <Button onClick={handleDeptSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+            <Button onClick={() => void handleDeptSave()} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* 사원 추가 모달 */}
+      {/* 사원 추가/수정 모달 */}
       <Dialog open={userModalOpen} onOpenChange={setUserModalOpen}>
         <DialogContent className="max-w-2xl">
           <DialogHeader>
             <DialogTitle>{userEditMode ? "사원 정보 수정" : "사원 추가"}</DialogTitle>
-            <DialogDescription>{userEditMode ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정합니다.` : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가합니다.` : "사원을 추가합니다."}</DialogDescription>
+            <DialogDescription>
+              {userEditMode
+                ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정합니다.`
+                : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가합니다.` : "사원을 추가합니다."}
+            </DialogDescription>
           </DialogHeader>
-          <div className="grid grid-cols-2 gap-4 py-4">
+          <div className="grid grid-cols-2 gap-4 py-2">
             <div className="space-y-1.5">
-              <Label className="text-sm">사용자 ID <span className="text-destructive">*</span></Label>
-              <Input value={userForm.user_id || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
-                placeholder="사용자 ID" className="h-9" disabled={userEditMode} />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                사용자 ID <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={userForm.user_id || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
+                placeholder="사용자 ID를 입력해 주세요"
+                className="h-9"
+                disabled={userEditMode}
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">이름 <span className="text-destructive">*</span></Label>
-              <Input value={userForm.user_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
-                placeholder="이름" className="h-9" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                이름 <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={userForm.user_name || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
+                placeholder="이름을 입력해 주세요"
+                className="h-9"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">사번</Label>
-              <Input value={userForm.sabun || ""} onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
-                placeholder="사번" className="h-9" autoComplete="off" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">사번</span>
+              <Input
+                value={userForm.sabun || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
+                placeholder="사번"
+                className="h-9"
+                autoComplete="off"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">비밀번호</Label>
-              <Input value={userForm.user_password || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
-                placeholder={userEditMode ? "변경 시에만 입력" : "미입력 시 qlalfqjsgh11"} className="h-9" type="password" autoComplete="new-password" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">비밀번호</span>
+              <Input
+                value={userForm.user_password || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
+                placeholder={userEditMode ? "변경 시에만 입력해 주세요" : "미입력 시 기본값이 설정돼요"}
+                className="h-9"
+                type="password"
+                autoComplete="new-password"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">직급</Label>
-              <Input value={userForm.position_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
-                placeholder="직급" className="h-9" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">직급</span>
+              <Input
+                value={userForm.position_name || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
+                placeholder="직급"
+                className="h-9"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">부서 <span className="text-destructive">*</span></Label>
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                부서 <span className="text-destructive">*</span>
+              </span>
               <Select value={userForm.dept_code || ""} onValueChange={(v) => setUserForm((p) => ({ ...p, dept_code: v }))}>
-                <SelectTrigger className="h-9"><SelectValue placeholder="부서 선택" /></SelectTrigger>
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="부서를 선택해 주세요" />
+                </SelectTrigger>
                 <SelectContent>
-                  {depts.map((d) => <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>)}
+                  {depts.map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">휴대폰</Label>
-              <Input value={userForm.cell_phone || ""} onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
-                placeholder="010-0000-0000" className={cn("h-9", formErrors.cell_phone && "border-destructive")} />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">휴대폰</span>
+              <Input
+                value={userForm.cell_phone || ""}
+                onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
+                placeholder="010-0000-0000"
+                className={cn("h-9", formErrors.cell_phone && "border-destructive")}
+              />
               {formErrors.cell_phone && <p className="text-xs text-destructive">{formErrors.cell_phone}</p>}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">이메일</Label>
-              <Input value={userForm.email || ""} onChange={(e) => handleUserFormChange("email", e.target.value)}
-                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">이메일</span>
+              <Input
+                value={userForm.email || ""}
+                onChange={(e) => handleUserFormChange("email", e.target.value)}
+                placeholder="example@email.com"
+                className={cn("h-9", formErrors.email && "border-destructive")}
+              />
               {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">입사일</Label>
-              <FormDatePicker value={userForm.regdate || ""} onChange={(v) => setUserForm((p) => ({ ...p, regdate: v }))} placeholder="입사일" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">입사일</span>
+              <Input
+                type="date"
+                value={userForm.regdate ? userForm.regdate.substring(0, 10) : ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, regdate: e.target.value }))}
+                className="h-9"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">퇴사일</Label>
-              <FormDatePicker value={userForm.end_date || ""} onChange={(v) => setUserForm((p) => ({ ...p, end_date: v }))} placeholder="퇴사일" />
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">퇴사일</span>
+              <Input
+                type="date"
+                value={userForm.end_date ? userForm.end_date.substring(0, 10) : ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, end_date: e.target.value }))}
+                className="h-9"
+              />
             </div>
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setUserModalOpen(false)}>취소</Button>
-            <Button onClick={handleUserSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+            <Button onClick={() => void handleUserSave()} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
       {/* 엑셀 업로드 */}
       <ExcelUploadModal
         open={excelUploadOpen}
@@ -529,14 +767,6 @@ export default function DepartmentPage() {
       />
 
       {ConfirmDialogComponent}
-
-      <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={DEPT_TABLE}
-        settingsId="department"
-        onSave={applyTableSettings}
-      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_7/master-data/item-info/page.tsx b/frontend/app/(main)/COMPANY_7/master-data/item-info/page.tsx
index e525f9cd..375fd900 100644
--- a/frontend/app/(main)/COMPANY_7/master-data/item-info/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/master-data/item-info/page.tsx
@@ -3,47 +3,162 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import {
-  Plus, Trash2, RotateCcw, Save, Search, Loader2, FileSpreadsheet, Download,
-  Package, Pencil, Copy,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  Pencil, Copy, Settings2, Check, ChevronsUpDown,
 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { ImageUpload } from "@/components/common/ImageUpload";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
-import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
-import { exportToExcel } from "@/lib/utils/excelExport";
 import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
 import { toast } from "sonner";
 
-// 테이블 컬럼 정의
-const TABLE_COLUMNS = [
-  { key: "item_number", label: "품목코드", width: "w-[120px]" },
-  { key: "item_name", label: "품명", width: "min-w-[150px]" },
-  { key: "division", label: "관리품목", width: "w-[100px]" },
-  { key: "type", label: "품목구분", width: "w-[100px]" },
-  { key: "size", label: "규격", width: "w-[100px]" },
-  { key: "unit", label: "단위", width: "w-[80px]" },
-  { key: "material", label: "재질", width: "w-[100px]" },
-  { key: "status", label: "상태", width: "w-[80px]" },
-  { key: "selling_price", label: "판매가격", width: "w-[100px]" },
-  { key: "standard_price", label: "기준단가", width: "w-[100px]" },
-  { key: "weight", label: "중량", width: "w-[80px]" },
-  { key: "inventory_unit", label: "재고단위", width: "w-[80px]" },
-  { key: "user_type01", label: "대분류", width: "w-[100px]" },
-  { key: "user_type02", label: "중분류", width: "w-[100px]" },
+// 검색 가능한 카테고리 콤보박스
+function CategoryCombobox({ options, value, onChange, placeholder }: {
+  options: { code: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selected = options.find((o) => o.code === value);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
+          <span className="truncate">{selected?.label || <span className="text-muted-foreground">{placeholder}</span>}</span>
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8" />
+          <CommandList>
+            <CommandEmpty>검색 결과가 없어요</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {options.map((opt) => (
+                <CommandItem key={opt.code} value={opt.label} onSelect={() => { onChange(opt.code); setOpen(false); }}>
+                  <Check className={cn("mr-2 h-3.5 w-3.5", value === opt.code ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 다중 선택 카테고리 콤보박스
+function MultiCategoryCombobox({ options, value, onChange, placeholder }: {
+  options: { code: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selectedCodes = value ? value.split(",").map((c) => c.trim()).filter(Boolean) : [];
+  const selectedLabels = selectedCodes.map((code) => options.find((o) => o.code === code)?.label || code).filter(Boolean);
+
+  const toggle = (code: string) => {
+    const next = selectedCodes.includes(code)
+      ? selectedCodes.filter((c) => c !== code)
+      : [...selectedCodes, code];
+    onChange(next.join(","));
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
+          <span className="truncate">
+            {selectedLabels.length > 0
+              ? selectedLabels.join(", ")
+              : <span className="text-muted-foreground">{placeholder}</span>}
+          </span>
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8" />
+          <CommandList>
+            <CommandEmpty>검색 결과가 없어요</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {options.map((opt) => (
+                <CommandItem key={opt.code} value={opt.label} onSelect={() => toggle(opt.code)}>
+                  <Check className={cn("mr-2 h-3.5 w-3.5", selectedCodes.includes(opt.code) ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const TABLE_NAME = "item_info";
+
+const GRID_COLUMNS = [
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "image", label: "이미지", type: "image" },
+  { key: "division", label: "관리품목" },
+  { key: "type", label: "품목구분" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "material", label: "재질" },
+  { key: "status", label: "상태" },
+  { key: "selling_price", label: "판매가격", align: "right" as const, formatNumber: true },
+  { key: "standard_price", label: "기준단가", align: "right" as const, formatNumber: true },
+  { key: "weight", label: "중량", align: "right" as const },
+  { key: "inventory_unit", label: "재고단위" },
+  { key: "user_type01", label: "대분류" },
+  { key: "user_type02", label: "중분류" },
+  { key: "lead_time", label: "생산 리드타임(일)", align: "right" as const },
 ];
 
-// 등록 모달 필드 정의
 const FORM_FIELDS = [
   { key: "item_number", label: "품목코드", type: "text", required: true, disabled: true, placeholder: "자동 채번" },
   { key: "item_name", label: "품명", type: "text", required: true },
-  { key: "division", label: "관리품목", type: "category" },
+  { key: "division", label: "관리품목", type: "multi-category" },
   { key: "type", label: "품목구분", type: "category" },
   { key: "size", label: "규격", type: "text" },
   { key: "unit", label: "단위", type: "category" },
@@ -58,22 +173,25 @@ const FORM_FIELDS = [
   { key: "currency_code", label: "통화", type: "category" },
   { key: "user_type01", label: "대분류", type: "category" },
   { key: "user_type02", label: "중분류", type: "category" },
+  { key: "lead_time", label: "생산 리드타임(일)", type: "text", placeholder: "숫자 입력 (예: 7)" },
+  { key: "image", label: "품목 이미지", type: "image" },
   { key: "meno", label: "메모", type: "textarea" },
 ];
 
-const TABLE_NAME = "item_info";
+const CATEGORY_COLUMNS = [
+  "division", "type", "unit", "material", "status",
+  "inventory_unit", "currency_code", "user_type01", "user_type02",
+];
 
 export default function ItemInfoPage() {
   const { user } = useAuth();
+  const ts = useTableSettings("c16-item-info", TABLE_NAME, GRID_COLUMNS);
   const [items, setItems] = useState<any[]>([]);
+  const [rawItems, setRawItems] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
-  const [totalCount, setTotalCount] = useState(0);
 
-  // 검색
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [searchDivision, setSearchDivision] = useState("all");
-  const [searchType, setSearchType] = useState("all");
-  const [searchStatus, setSearchStatus] = useState("all");
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 모달
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -91,10 +209,7 @@ export default function ItemInfoPage() {
   // 선택된 행
   const [selectedId, setSelectedId] = useState<string | null>(null);
 
-  // 카테고리 컬럼 목록
-  const CATEGORY_COLUMNS = ["division", "type", "unit", "material", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
-
-  // 카테고리 옵션 로드 (table_name + column_name 기반)
+  // 카테고리 옵션 로드
   useEffect(() => {
     const loadCategories = async () => {
       try {
@@ -130,33 +245,28 @@ export default function ItemInfoPage() {
   const fetchItems = useCallback(async () => {
     setLoading(true);
     try {
-      const filters: any[] = [];
-      if (searchKeyword) {
-        filters.push({ columnName: "item_name", operator: "contains", value: searchKeyword });
-      }
-      if (searchDivision !== "all") {
-        filters.push({ columnName: "division", operator: "equals", value: searchDivision });
-      }
-      if (searchType !== "all") {
-        filters.push({ columnName: "type", operator: "equals", value: searchType });
-      }
-      if (searchStatus !== "all") {
-        filters.push({ columnName: "status", operator: "equals", value: searchStatus });
-      }
-
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
       const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
         page: 1,
-        size: 500,
+        size: 99999,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
       });
 
       const raw = res.data?.data?.data || res.data?.data?.rows || [];
-      // 카테고리 코드→라벨 변환
       const resolve = (col: string, code: string) => {
         if (!code) return "";
+        // 쉼표 구분 다중값 지원
+        if (code.includes(",")) {
+          return code.split(",").map((c) => {
+            const trimmed = c.trim();
+            if (!trimmed || trimmed === "s") return "";
+            return categoryOptions[col]?.find((o) => o.code === trimmed)?.label || trimmed;
+          }).filter(Boolean).join(", ");
+        }
         return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
       };
+      setRawItems(raw);
       const data = raw.map((r: any) => {
         const converted = { ...r };
         for (const col of CATEGORY_COLUMNS) {
@@ -165,81 +275,89 @@ export default function ItemInfoPage() {
         return converted;
       });
       setItems(data);
-      setTotalCount(res.data?.data?.total || raw.length);
     } catch (err) {
       console.error("품목 조회 실패:", err);
-      toast.error("품목 목록을 불러오는데 실패했습니다.");
+      toast.error("품목 목록을 불러오는데 실패했어요.");
     } finally {
       setLoading(false);
     }
-  }, [searchKeyword, searchDivision, searchType, searchStatus, categoryOptions]);
+  }, [categoryOptions, searchFilters]);
 
   useEffect(() => {
     fetchItems();
   }, [fetchItems]);
 
-  // 카테고리 코드 → 라벨 변환
-  const getCategoryLabel = (columnName: string, code: string) => {
-    if (!code) return "";
-    const opts = categoryOptions[columnName];
-    if (!opts) return code;
-    const found = opts.find((o) => o.code === code);
-    return found?.label || code;
+  // 채번 미리보기 로드
+  const loadNumberingPreview = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${TABLE_NAME}/item_number`);
+      const rule = ruleRes.data?.data;
+      if (rule?.ruleId) {
+        const previewRes = await apiClient.post(`/numbering-rules/${rule.ruleId}/preview`, { formData: {} });
+        return previewRes.data?.data?.generatedCode || "";
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+    return "";
   };
 
   // 등록 모달 열기
-  const openRegisterModal = () => {
+  const openRegisterModal = async () => {
     setFormData({});
     setIsEditMode(false);
     setEditId(null);
     setIsModalOpen(true);
+    // 채번 컬럼 자동 로드
+    const code = await loadNumberingPreview();
+    if (code) setFormData(prev => ({ ...prev, item_number: code }));
   };
 
   // 수정 모달 열기
   const openEditModal = (item: any) => {
-    setFormData({ ...item });
+    const raw = rawItems.find((r) => r.id === item.id) || item;
+    setFormData({ ...raw });
     setIsEditMode(true);
     setEditId(item.id);
     setIsModalOpen(true);
   };
 
   // 복사 모달 열기
-  const openCopyModal = (item: any) => {
-    const { id, item_number, created_date, updated_date, writer, ...rest } = item;
+  const openCopyModal = async (item: any) => {
+    const raw = rawItems.find((r) => r.id === item.id) || item;
+    const { id, item_number, created_date, updated_date, writer, ...rest } = raw;
     setFormData(rest);
     setIsEditMode(false);
     setEditId(null);
+    const code = await loadNumberingPreview();
+    if (code) setFormData(prev => ({ ...prev, item_number: code }));
     setIsModalOpen(true);
   };
 
   // 저장
   const handleSave = async () => {
     if (!formData.item_name) {
-      toast.error("품명은 필수 입력입니다.");
+      toast.error("품명은 필수 입력이에요.");
       return;
     }
 
     setSaving(true);
     try {
       if (isEditMode && editId) {
-        // 수정
         const { id, created_date, updated_date, writer, company_code, ...updateFields } = formData;
         await apiClient.put(`/table-management/tables/${TABLE_NAME}/edit`, {
           originalData: { id: editId },
           updatedData: updateFields,
         });
-        toast.success("수정되었습니다.");
+        toast.success("수정되었어요.");
       } else {
-        // 등록
         const { id, created_date, updated_date, ...insertFields } = formData;
-        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, insertFields);
-        toast.success("등록되었습니다.");
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, { id: crypto.randomUUID(), ...insertFields });
+        toast.success("등록되었어요.");
       }
       setIsModalOpen(false);
       fetchItems();
     } catch (err: any) {
       console.error("저장 실패:", err);
-      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
     } finally {
       setSaving(false);
     }
@@ -248,34 +366,34 @@ export default function ItemInfoPage() {
   // 삭제
   const handleDelete = async () => {
     if (!selectedId) {
-      toast.error("삭제할 품목을 선택해주세요.");
+      toast.error("삭제할 품목을 선택해 주세요.");
       return;
     }
-    if (!confirm("선택한 품목을 삭제하시겠습니까?")) return;
+    if (!confirm("선택한 품목을 삭제할까요?")) return;
 
     try {
       await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
         data: [{ id: selectedId }],
       });
-      toast.success("삭제되었습니다.");
+      toast.success("삭제되었어요.");
       setSelectedId(null);
       fetchItems();
     } catch (err) {
       console.error("삭제 실패:", err);
-      toast.error("삭제에 실패했습니다.");
+      toast.error("삭제에 실패했어요.");
     }
   };
 
   // 엑셀 다운로드
   const handleExcelDownload = async () => {
     if (items.length === 0) {
-      toast.error("다운로드할 데이터가 없습니다.");
+      toast.error("다운로드할 데이터가 없어요.");
       return;
     }
     const exportData = items.map((item) => {
       const row: Record<string, any> = {};
-      for (const col of TABLE_COLUMNS) {
-        row[col.label] = getCategoryLabel(col.key, item[col.key]) || item[col.key] || "";
+      for (const col of GRID_COLUMNS) {
+        row[col.label] = item[col.key] || "";
       }
       return row;
     });
@@ -283,225 +401,186 @@ export default function ItemInfoPage() {
     toast.success("엑셀 다운로드 완료");
   };
 
-  // 검색 초기화
-  const handleResetSearch = () => {
-    setSearchKeyword("");
-    setSearchDivision("all");
-    setSearchType("all");
-    setSearchStatus("all");
-  };
-
-  // 카테고리 셀렉트 렌더링
-  const renderCategorySelect = (field: typeof FORM_FIELDS[0]) => {
-    const options = categoryOptions[field.key] || [];
-    return (
-      <Select
-        value={formData[field.key] || ""}
-        onValueChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
-      >
-        <SelectTrigger className="h-9 text-sm">
-          <SelectValue placeholder={`${field.label} 선택`} />
-        </SelectTrigger>
-        <SelectContent>
-          {options.map((opt) => (
-            <SelectItem key={opt.code} value={opt.code}>
-              {opt.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    );
-  };
-
   return (
-    <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">품명/품목코드</Label>
-            <Input
-              placeholder="검색"
-              className="w-[180px] h-9"
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && fetchItems()}
-            />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">관리품목</Label>
-            <Select value={searchDivision} onValueChange={setSearchDivision}>
-              <SelectTrigger className="w-[120px] h-9"><SelectValue placeholder="전체" /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                {(categoryOptions["division"] || []).map((o) => (
-                  <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">품목구분</Label>
-            <Select value={searchType} onValueChange={setSearchType}>
-              <SelectTrigger className="w-[120px] h-9"><SelectValue placeholder="전체" /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                {(categoryOptions["type"] || []).map((o) => (
-                  <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[110px] h-9"><SelectValue placeholder="전체" /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                {(categoryOptions["status"] || []).map((o) => (
-                  <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex-1" />
-          <div className="flex items-center gap-2">
-            {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+    <div className="flex h-full flex-col gap-0">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={TABLE_NAME}
+        filterId="c16-item-info"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+      />
 
-      {/* 메인 테이블 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm flex flex-col">
-        <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-          <div className="font-semibold flex items-center gap-2 text-sm">
-            <Package className="w-5 h-5" /> 품목 목록
-            <Badge variant="secondary" className="font-normal">{totalCount}건</Badge>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
-              <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
-            </Button>
-            <Button size="sm" onClick={openRegisterModal}>
-              <Plus className="w-4 h-4 mr-1.5" /> 품목 등록
-            </Button>
-            <Button variant="outline" size="sm" disabled={!selectedId} onClick={() => {
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between px-4 py-2.5 border-b">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-semibold">품목 관리</span>
+          <Badge variant="secondary" className="font-mono text-xs">{items.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
+          </Button>
+          <div className="mx-1 h-5 w-px bg-border" />
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4 mr-1.5" /> 품목 등록
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!selectedId}
+            onClick={() => {
               const item = items.find((i) => i.id === selectedId);
               if (item) openCopyModal(item);
-            }}>
-              <Copy className="w-4 h-4 mr-1.5" /> 복사
-            </Button>
-            <Button variant="outline" size="sm" disabled={!selectedId} onClick={() => {
+            }}
+          >
+            <Copy className="w-4 h-4 mr-1.5" /> 복사
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!selectedId}
+            onClick={() => {
               const item = items.find((i) => i.id === selectedId);
               if (item) openEditModal(item);
-            }}>
-              <Pencil className="w-4 h-4 mr-1.5" /> 수정
-            </Button>
-            <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
-              <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
-            </Button>
-          </div>
-        </div>
-
-        <div className="flex-1 overflow-auto">
-          {loading ? (
-            <div className="flex items-center justify-center h-32">
-              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-            </div>
-          ) : items.length === 0 ? (
-            <div className="flex flex-col items-center justify-center h-32 text-muted-foreground gap-2">
-              <Package className="w-8 h-8 opacity-50" />
-              <span>등록된 품목이 없습니다</span>
-            </div>
-          ) : (
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">No</TableHead>
-                  {TABLE_COLUMNS.map((col) => (
-                    <TableHead key={col.key} className={col.width}>{col.label}</TableHead>
-                  ))}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {items.map((item, idx) => (
-                  <TableRow
-                    key={item.id}
-                    className={cn("cursor-pointer", selectedId === item.id && "bg-primary/5")}
-                    onClick={() => setSelectedId(item.id)}
-                    onDoubleClick={() => openEditModal(item)}
-                  >
-                    <TableCell className="text-center text-xs text-muted-foreground">{idx + 1}</TableCell>
-                    {TABLE_COLUMNS.map((col) => (
-                      <TableCell key={col.key} className="text-sm">
-                        {["division", "type", "unit", "material", "status", "inventory_unit", "user_type01", "user_type02", "currency_code"].includes(col.key)
-                          ? getCategoryLabel(col.key, item[col.key])
-                          : item[col.key] || ""}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
+            }}
+          >
+            <Pencil className="w-4 h-4 mr-1.5" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
         </div>
       </div>
 
+      {/* 메인 테이블 */}
+      <EDataTable
+        columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+          key: col.key,
+          label: col.label,
+          align: (col as any).type === "image" ? "center" : col.align as "left" | "center" | "right" | undefined,
+          formatNumber: (col as any).formatNumber,
+          width: (col as any).type === "image" ? "w-[50px]" : undefined,
+          render: (col as any).type === "image" ? (val: any) => (
+            val ? (
+              <img src={String(val).startsWith("http") || String(val).startsWith("/") ? val : `/api/files/preview/${val}`} alt="" className="h-8 w-8 rounded object-cover border border-border mx-auto" onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
+            ) : <div className="h-8 w-8 rounded bg-muted mx-auto" />
+          ) : undefined,
+        }))}
+        data={ts.groupData(items)}
+        loading={loading}
+        emptyMessage="등록된 품목이 없어요"
+        selectedId={selectedId}
+        onSelect={(id) => setSelectedId(id)}
+        onRowDoubleClick={(row) => openEditModal(row)}
+        showRowNumber
+        draggableColumns={false}
+      />
+
       {/* 등록/수정 모달 */}
       <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-        <DialogContent className="max-w-2xl max-h-[90vh] overflow-auto">
-          <DialogHeader>
+        <DialogContent className="sm:max-w-[600px] w-[95vw] max-h-[90vh] flex flex-col p-0 overflow-hidden">
+          <DialogHeader className="shrink-0 px-6 pt-5 pb-3 border-b">
             <DialogTitle>{isEditMode ? "품목 수정" : "품목 등록"}</DialogTitle>
             <DialogDescription>
-              {isEditMode ? "품목 정보를 수정합니다." : "새로운 품목을 등록합니다."}
+              {isEditMode ? "품목 정보를 수정해요." : "새로운 품목을 등록해요."}
             </DialogDescription>
           </DialogHeader>
 
-          <div className="grid grid-cols-2 gap-4 py-4">
-            {FORM_FIELDS.map((field) => (
-              <div key={field.key} className={cn("space-y-1.5", field.type === "textarea" && "col-span-2")}>
-                <Label className="text-sm">
-                  {field.label}
-                  {field.required && <span className="text-destructive ml-1">*</span>}
-                </Label>
-                {field.type === "category" ? (
-                  renderCategorySelect(field)
-                ) : field.type === "textarea" ? (
-                  <Textarea
-                    value={formData[field.key] || ""}
-                    onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
-                    placeholder={field.label}
-                    rows={3}
-                  />
-                ) : (
-                  <Input
-                    value={formData[field.key] || ""}
-                    onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
-                    placeholder={field.placeholder || (field.disabled ? "자동 채번" : field.label)}
-                    disabled={field.disabled && !isEditMode}
-                    className="h-9"
-                  />
-                )}
-              </div>
-            ))}
+          <div className="flex-1 overflow-y-auto">
+            <div className="grid grid-cols-2 gap-4 p-6">
+              {FORM_FIELDS.map((field) => (
+                <div
+                  key={field.key}
+                  className={cn("space-y-1.5", (field.type === "textarea" || field.type === "image") && "col-span-2")}
+                >
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    {field.label}
+                    {field.required && <span className="text-destructive ml-1">*</span>}
+                  </Label>
+                  {field.type === "image" ? (
+                    <ImageUpload
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      tableName={TABLE_NAME}
+                      recordId={formData.id || ""}
+                      columnName={field.key}
+                      height="h-32"
+                    />
+                  ) : field.type === "multi-category" ? (
+                    <MultiCategoryCombobox
+                      options={categoryOptions[field.key] || []}
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      placeholder={`${field.label} 선택`}
+                    />
+                  ) : field.type === "category" ? (
+                    <CategoryCombobox
+                      options={categoryOptions[field.key] || []}
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      placeholder={`${field.label} 선택`}
+                    />
+                  ) : field.type === "textarea" ? (
+                    <Textarea
+                      value={formData[field.key] || ""}
+                      onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                      placeholder={field.label}
+                      rows={3}
+                    />
+                  ) : ["selling_price", "standard_price"].includes(field.key) ? (
+                    <Input
+                      value={formData[field.key] ? Number(String(formData[field.key]).replace(/,/g, "")).toLocaleString() : ""}
+                      onChange={(e) => {
+                        const raw = e.target.value.replace(/[^\d.-]/g, "");
+                        setFormData((prev) => ({ ...prev, [field.key]: raw }));
+                      }}
+                      placeholder={field.placeholder || field.label}
+                      className="h-9 text-right"
+                    />
+                  ) : (
+                    <Input
+                      value={formData[field.key] || ""}
+                      onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                      placeholder={field.placeholder || (field.disabled ? "자동 채번" : field.label)}
+                      disabled={field.disabled && !isEditMode}
+                      className="h-9"
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
           </div>
 
-          <DialogFooter>
+          <DialogFooter className="shrink-0 border-t px-6 py-3">
             <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
             <Button onClick={handleSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {saving
+                ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+                : <Save className="w-4 h-4 mr-1.5" />
+              }
               저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
       {/* 엑셀 업로드 모달 */}
       <ExcelUploadModal
         open={excelUploadOpen}
diff --git a/frontend/app/(main)/COMPANY_7/master-data/options/page.tsx b/frontend/app/(main)/COMPANY_7/master-data/options/page.tsx
new file mode 100644
index 00000000..7506ad94
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/master-data/options/page.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { Settings2, Tags, Hash } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { CategoryColumnList } from "@/components/table-category/CategoryColumnList";
+import { CategoryValueManager } from "@/components/table-category/CategoryValueManager";
+import { NumberingRuleDesigner } from "@/components/numbering-rule/NumberingRuleDesigner";
+
+const TABS = [
+  { id: "category", label: "카테고리 설정", icon: Tags },
+  { id: "numbering", label: "코드 설정", icon: Hash },
+] as const;
+
+type TabId = (typeof TABS)[number]["id"];
+
+export default function OptionsSettingPage() {
+  const [activeTab, setActiveTab] = useState<TabId>("category");
+
+  const [selectedColumn, setSelectedColumn] = useState<string | null>(null);
+  const [selectedColumnLabel, setSelectedColumnLabel] = useState("");
+  const [selectedTableName, setSelectedTableName] = useState("");
+
+  const [leftWidth, setLeftWidth] = useState(340);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = useCallback(() => {
+    setIsDragging(true);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      setLeftWidth(Math.max(260, Math.min(500, e.clientX - rect.left)));
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
+
+  return (
+    <div className="flex h-full flex-col p-3 gap-3">
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <Settings2 className="h-4 w-4 text-primary" />
+          <h1 className="text-sm font-semibold">옵션 설정</h1>
+        </div>
+        <div className="flex bg-muted rounded-md p-0.5 gap-0.5">
+          {TABS.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  "flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-all",
+                  activeTab === tab.id
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <Icon className="h-3.5 w-3.5" />
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0">
+        {activeTab === "category" && (
+          <div ref={containerRef} className="flex h-full">
+            <div
+              style={{ width: leftWidth }}
+              className="shrink-0 border rounded-lg bg-card overflow-hidden"
+            >
+              <CategoryColumnList
+                tableName=""
+                selectedColumn={selectedColumn}
+                onColumnSelect={(uniqueKey, label, tableName) => {
+                  setSelectedColumn(uniqueKey);
+                  setSelectedColumnLabel(label);
+                  setSelectedTableName(tableName);
+                }}
+              />
+            </div>
+
+            <div
+              onMouseDown={handleMouseDown}
+              className={cn(
+                "w-1.5 mx-0.5 cursor-col-resize rounded-full transition-colors shrink-0",
+                isDragging ? "bg-primary" : "bg-border hover:bg-primary/50"
+              )}
+            />
+
+            <div className="flex-1 min-w-0 border rounded-lg bg-card overflow-hidden">
+              {selectedColumn && selectedTableName ? (
+                <CategoryValueManager
+                  tableName={selectedTableName}
+                  columnName={selectedColumn.includes(".") ? selectedColumn.split(".").pop()! : selectedColumn}
+                  columnLabel={selectedColumnLabel}
+                />
+              ) : (
+                <div className="flex h-full items-center justify-center">
+                  <div className="text-center space-y-2">
+                    <Tags className="h-8 w-8 mx-auto text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">좌측에서 카테고리 컬럼을 선택해주세요</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {activeTab === "numbering" && (
+          <div className="h-full border rounded-lg bg-card overflow-auto">
+            <NumberingRuleDesigner />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/master-data/sample/page.tsx b/frontend/app/(main)/COMPANY_7/master-data/sample/page.tsx
deleted file mode 100644
index 29f30006..00000000
--- a/frontend/app/(main)/COMPANY_7/master-data/sample/page.tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-"use client";
-
-import React, { useState, useEffect, useCallback } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Plus, Trash2, Pencil, Download, Loader2, FlaskConical, Save } from "lucide-react";
-import { apiClient } from "@/lib/api/client";
-import { exportToExcel } from "@/lib/utils/excelExport";
-import { toast } from "sonner";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
-import { useConfirmDialog } from "@/components/common/ConfirmDialog";
-
-// --- 타입 ---
-
-interface SampleItem {
-  id: string;
-  name: string;
-  description: string;
-  created_at: string;
-  updated_at: string;
-}
-
-// --- 컬럼 정의 ---
-
-const COLUMNS: DataGridColumn[] = [
-  { key: "name", label: "이름", width: "w-[200px]", sortable: true, filterable: true },
-  { key: "description", label: "설명", minWidth: "min-w-[300px]", sortable: true, filterable: true },
-  { key: "created_at", label: "등록일시", width: "w-[180px]", sortable: true },
-  { key: "updated_at", label: "수정일시", width: "w-[180px]", sortable: true },
-];
-
-// --- 페이지 ---
-
-export default function SamplePage() {
-  const [items, setItems] = useState<SampleItem[]>([]);
-  const [filteredItems, setFilteredItems] = useState<SampleItem[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  // 체크박스 다중 선택
-  const [checkedIds, setCheckedIds] = useState<string[]>([]);
-
-  // DynamicSearchFilter 필터 값
-  const [activeFilters, setActiveFilters] = useState<FilterValue[]>([]);
-
-  // 등록/수정 모달
-  const [modalOpen, setModalOpen] = useState(false);
-  const [isEdit, setIsEdit] = useState(false);
-  const [editId, setEditId] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
-  const [formName, setFormName] = useState("");
-  const [formDesc, setFormDesc] = useState("");
-
-  // 삭제 확인 다이얼로그
-  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
-
-  // 목록 조회
-  const fetchItems = useCallback(async () => {
-    setLoading(true);
-    try {
-      const res = await apiClient.get("/sample/list?page=1&limit=100");
-      const data: SampleItem[] = res.data?.data || [];
-      setItems(data);
-    } catch (err) {
-      console.error("샘플 목록 조회 실패:", err);
-      toast.error("목록을 불러오는데 실패했습니다.");
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchItems();
-  }, [fetchItems]);
-
-  // 클라이언트 필터 적용
-  useEffect(() => {
-    if (activeFilters.length === 0) {
-      setFilteredItems(items);
-      return;
-    }
-    const filtered = items.filter((item) => {
-      return activeFilters.every((f) => {
-        const val = String((item as any)[f.columnName] || "").toLowerCase();
-        if (f.operator === "contains") return val.includes(f.value.toLowerCase());
-        if (f.operator === "equals") return val === f.value.toLowerCase();
-        return true;
-      });
-    });
-    setFilteredItems(filtered);
-  }, [items, activeFilters]);
-
-  // 등록 모달 열기
-  const openRegister = () => {
-    setIsEdit(false);
-    setEditId(null);
-    setFormName("");
-    setFormDesc("");
-    setModalOpen(true);
-  };
-
-  // 수정 모달 열기
-  const openEdit = (item: SampleItem) => {
-    setIsEdit(true);
-    setEditId(item.id);
-    setFormName(item.name);
-    setFormDesc(item.description);
-    setModalOpen(true);
-  };
-
-  // 저장 (등록 or 수정)
-  const handleSave = async () => {
-    if (!formName.trim()) {
-      toast.error("이름은 필수 입력입니다.");
-      return;
-    }
-    if (!formDesc.trim()) {
-      toast.error("설명은 필수 입력입니다.");
-      return;
-    }
-
-    setSaving(true);
-    try {
-      if (isEdit && editId) {
-        await apiClient.put(`/sample/${editId}`, { name: formName.trim(), description: formDesc.trim() });
-        toast.success("수정되었습니다.");
-      } else {
-        await apiClient.post("/sample", { name: formName.trim(), description: formDesc.trim() });
-        toast.success("등록되었습니다.");
-      }
-      setModalOpen(false);
-      setCheckedIds([]);
-      await fetchItems();
-    } catch (err: any) {
-      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  // 삭제
-  const handleDelete = async () => {
-    if (checkedIds.length === 0) {
-      toast.error("삭제할 항목을 선택해주세요.");
-      return;
-    }
-    const ok = await confirm(`선택한 ${checkedIds.length}건을 삭제하시겠습니까?`, {
-      description: "삭제된 데이터는 복구할 수 없습니다.",
-      variant: "destructive",
-      confirmText: "삭제",
-    });
-    if (!ok) return;
-
-    try {
-      await Promise.all(checkedIds.map((id) => apiClient.delete(`/sample/${id}`)));
-      toast.success("삭제되었습니다.");
-      setCheckedIds([]);
-      await fetchItems();
-    } catch (err) {
-      toast.error("삭제에 실패했습니다.");
-    }
-  };
-
-  // 수정 버튼: 체크된 항목 1건일 때 활성
-  const handleEditButton = () => {
-    if (checkedIds.length !== 1) return;
-    const item = filteredItems.find((i) => i.id === checkedIds[0]);
-    if (item) openEdit(item);
-  };
-
-  // 엑셀 다운로드
-  const handleExcelDownload = async () => {
-    if (filteredItems.length === 0) {
-      toast.error("다운로드할 데이터가 없습니다.");
-      return;
-    }
-    const exportData = filteredItems.map((item) => ({
-      이름: item.name,
-      설명: item.description,
-      등록일시: item.created_at,
-      수정일시: item.updated_at,
-    }));
-    await exportToExcel(exportData, "샘플목록.xlsx", "샘플");
-    toast.success("엑셀 다운로드 완료");
-  };
-
-  return (
-    <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 필터 */}
-      <DynamicSearchFilter
-        tableName="sample_data"
-        filterId="sample"
-        onFilterChange={setActiveFilters}
-        dataCount={filteredItems.length}
-      />
-
-      {/* 메인 테이블 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm flex flex-col">
-        {/* 헤더 버튼 */}
-        <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-          <div className="font-semibold flex items-center gap-2 text-sm">
-            <FlaskConical className="w-5 h-5" />
-            샘플 목록
-            <Badge variant="secondary" className="font-normal">{filteredItems.length}건</Badge>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
-              <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
-            </Button>
-            <Button size="sm" onClick={openRegister}>
-              <Plus className="w-4 h-4 mr-1.5" /> 등록
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              disabled={checkedIds.length !== 1}
-              onClick={handleEditButton}
-            >
-              <Pencil className="w-4 h-4 mr-1.5" /> 수정
-            </Button>
-            <Button
-              variant="destructive"
-              size="sm"
-              disabled={checkedIds.length === 0}
-              onClick={handleDelete}
-            >
-              <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
-            </Button>
-          </div>
-        </div>
-
-        {/* DataGrid */}
-        <div className="flex-1 overflow-hidden">
-          <DataGrid
-            gridId="sample-list"
-            columns={COLUMNS}
-            data={filteredItems}
-            loading={loading}
-            showCheckbox
-            checkedIds={checkedIds}
-            onCheckedChange={setCheckedIds}
-            onRowDoubleClick={(row) => openEdit(row as SampleItem)}
-            emptyMessage="등록된 샘플이 없습니다"
-          />
-        </div>
-      </div>
-
-      {/* 등록/수정 모달 */}
-      <FullscreenDialog
-        open={modalOpen}
-        onOpenChange={setModalOpen}
-        title={isEdit ? "샘플 수정" : "샘플 등록"}
-        description={isEdit ? "샘플 정보를 수정합니다." : "새로운 샘플을 등록합니다."}
-        defaultMaxWidth="max-w-lg"
-        footer={
-          <>
-            <Button variant="outline" onClick={() => setModalOpen(false)}>취소</Button>
-            <Button onClick={handleSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
-              저장
-            </Button>
-          </>
-        }
-      >
-        <div className="space-y-4 py-2">
-          <div className="space-y-1.5">
-            <Label>
-              이름 <span className="text-destructive">*</span>
-            </Label>
-            <Input
-              value={formName}
-              onChange={(e) => setFormName(e.target.value)}
-              placeholder="이름을 입력하세요"
-              className="h-9"
-            />
-          </div>
-          <div className="space-y-1.5">
-            <Label>
-              설명 <span className="text-destructive">*</span>
-            </Label>
-            <Textarea
-              value={formDesc}
-              onChange={(e) => setFormDesc(e.target.value)}
-              placeholder="설명을 입력하세요"
-              rows={4}
-            />
-          </div>
-        </div>
-      </FullscreenDialog>
-
-      {/* 삭제 확인 다이얼로그 */}
-      {ConfirmDialogComponent}
-    </div>
-  );
-}
diff --git a/frontend/app/(main)/COMPANY_7/mold/info/page.tsx b/frontend/app/(main)/COMPANY_7/mold/info/page.tsx
new file mode 100644
index 00000000..dcd92eac
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/mold/info/page.tsx
@@ -0,0 +1,1450 @@
+"use client";
+
+/**
+ * 금형정보 — Type E 카드리스트형
+ *
+ * 좌측: 금형 카드 리스트 (이미지 + 코드 + 이름 + 유형뱃지 + 수명진행률)
+ * 우측: 금형 상세 + 탭 3개 (일련번호 / 점검항목 / 부품)
+ * 전용 API: /molds/*
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Plus, Trash2, Loader2, Pencil, Box, Inbox, Search,
+  Wrench, ClipboardCheck, Package, LayoutGrid, List,
+  Image as ImageIcon, Upload, X as XIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+
+// ─── API base ───
+const API = "/mold";
+
+// ─── 상태/유형 매핑 ───
+const STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  ACTIVE: { label: "사용중", variant: "default" },
+  INSPECTION: { label: "점검중", variant: "secondary" },
+  REPAIR: { label: "수리중", variant: "outline" },
+  DISPOSED: { label: "폐기", variant: "destructive" },
+};
+
+const SERIAL_STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  IN_USE: { label: "사용중", variant: "default" },
+  STORED: { label: "보관중", variant: "secondary" },
+  REPAIR: { label: "수리중", variant: "outline" },
+  DISPOSED: { label: "폐기", variant: "destructive" },
+};
+
+// ─── 수명 진행률 색상 ───
+function getProgressColor(pct: number) {
+  if (pct < 60) return "bg-success";
+  if (pct < 85) return "bg-warning";
+  return "bg-destructive";
+}
+
+function getProgressTextColor(pct: number) {
+  if (pct < 60) return "text-success";
+  if (pct < 85) return "text-warning";
+  return "text-destructive";
+}
+
+export default function MoldInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // ─── 좌측: 금형 목록 ───
+  const [molds, setMolds] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedMoldCode, setSelectedMoldCode] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<"list" | "grid">("list");
+
+  // ─── 검색 필터 ───
+  const [filterCode, setFilterCode] = useState("");
+  const [filterName, setFilterName] = useState("");
+  const [filterType, setFilterType] = useState("");
+  const [filterStatus, setFilterStatus] = useState("");
+
+  // ─── 우측: 상세 ───
+  const [detail, setDetail] = useState<any>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [serialSummary, setSerialSummary] = useState<any>(null);
+  const [rightTab, setRightTab] = useState("serial");
+
+  // ─── 일련번호 ───
+  const [serials, setSerials] = useState<any[]>([]);
+  const [serialLoading, setSerialLoading] = useState(false);
+
+  // ─── 점검항목 ───
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspectionLoading, setInspectionLoading] = useState(false);
+
+  // ─── 부품 ───
+  const [parts, setParts] = useState<any[]>([]);
+  const [partLoading, setPartLoading] = useState(false);
+
+  // ─── 모달 ───
+  const [moldModalOpen, setMoldModalOpen] = useState(false);
+  const [moldEditMode, setMoldEditMode] = useState(false);
+  const [moldForm, setMoldForm] = useState<Record<string, any>>({});
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [moldImagePreview, setMoldImagePreview] = useState<string | null>(null);
+  const moldImageRef = React.useRef<HTMLInputElement>(null);
+
+  const [serialModalOpen, setSerialModalOpen] = useState(false);
+  const [serialForm, setSerialForm] = useState<Record<string, any>>({});
+
+  const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
+  const [inspectionForm, setInspectionForm] = useState<Record<string, any>>({});
+
+  const [partModalOpen, setPartModalOpen] = useState(false);
+  const [partForm, setPartForm] = useState<Record<string, any>>({});
+
+  // ─── 금형 목록 조회 ───
+  const fetchMolds = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      if (filterCode) params.mold_code = filterCode;
+      if (filterName) params.mold_name = filterName;
+      if (filterType) params.mold_type = filterType;
+      if (filterStatus) params.operation_status = filterStatus;
+
+      const res = await apiClient.get(API, { params });
+      setMolds(res.data?.data || []);
+    } catch {
+      toast.error("금형 목록을 불러올 수 없어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [filterCode, filterName, filterType, filterStatus]);
+
+  useEffect(() => { fetchMolds(); }, [fetchMolds]);
+
+  // ─── 금형 상세 + 하위 데이터 ───
+  const fetchDetail = useCallback(async (code: string) => {
+    setDetailLoading(true);
+    try {
+      const [detailRes, summaryRes] = await Promise.all([
+        apiClient.get(`${API}/${code}`),
+        apiClient.get(`${API}/${code}/serial-summary`),
+      ]);
+      setDetail(detailRes.data?.data || null);
+      setSerialSummary(summaryRes.data?.data || null);
+    } catch {
+      toast.error("금형 상세를 불러올 수 없어요.");
+    } finally {
+      setDetailLoading(false);
+    }
+  }, []);
+
+  const fetchSerials = useCallback(async (code: string) => {
+    setSerialLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/serials`);
+      setSerials(res.data?.data || []);
+    } catch {
+      toast.error("일련번호를 불러올 수 없어요.");
+    } finally {
+      setSerialLoading(false);
+    }
+  }, []);
+
+  const fetchInspections = useCallback(async (code: string) => {
+    setInspectionLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/inspections`);
+      setInspections(res.data?.data || []);
+    } catch {
+      toast.error("점검항목을 불러올 수 없어요.");
+    } finally {
+      setInspectionLoading(false);
+    }
+  }, []);
+
+  const fetchParts = useCallback(async (code: string) => {
+    setPartLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/parts`);
+      setParts(res.data?.data || []);
+    } catch {
+      toast.error("부품을 불러올 수 없어요.");
+    } finally {
+      setPartLoading(false);
+    }
+  }, []);
+
+  // 금형 선택
+  const handleSelectMold = useCallback((code: string) => {
+    setSelectedMoldCode(code);
+    setRightTab("serial");
+    fetchDetail(code);
+    fetchSerials(code);
+    fetchInspections(code);
+    fetchParts(code);
+  }, [fetchDetail, fetchSerials, fetchInspections, fetchParts]);
+
+  // 탭 변경 시 재조회
+  useEffect(() => {
+    if (!selectedMoldCode) return;
+    if (rightTab === "serial") fetchSerials(selectedMoldCode);
+    else if (rightTab === "inspection") fetchInspections(selectedMoldCode);
+    else if (rightTab === "part") fetchParts(selectedMoldCode);
+  }, [rightTab, selectedMoldCode, fetchSerials, fetchInspections, fetchParts]);
+
+  // ─── 금형 CRUD ───
+  const handleOpenRegister = async () => {
+    setMoldEditMode(false);
+    setMoldForm({});
+    setMoldImagePreview(null);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setMoldModalOpen(true);
+
+    // 채번 규칙 조회 (mold_mng.mold_code)
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/mold_mng/mold_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시 — 수동 입력 모드
+    }
+  };
+
+  const handleOpenEdit = () => {
+    if (!detail) return;
+    setMoldEditMode(true);
+    setMoldForm({ ...detail });
+    setMoldImagePreview(detail.image_path || null);
+    setMoldModalOpen(true);
+  };
+
+  const handleMoldImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result as string;
+      setMoldImagePreview(result);
+      setMoldForm((prev) => ({ ...prev, image_path: result }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleSaveMold = async () => {
+    // 등록 모드에서 채번이 없으면 수동 입력 필수
+    if (!moldEditMode && !numberingRuleId && !moldForm.mold_code) {
+      toast.error("금형코드와 금형명은 필수예요.");
+      return;
+    }
+    if (!moldForm.mold_name) {
+      toast.error("금형명은 필수예요.");
+      return;
+    }
+    if (moldEditMode && !moldForm.mold_code) {
+      toast.error("금형코드가 없어요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      if (moldEditMode) {
+        await apiClient.put(`${API}/${moldForm.mold_code}`, moldForm);
+        toast.success("금형이 수정되었어요.");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let saveData = { ...moldForm };
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            saveData.mold_code = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했어요.");
+            return;
+          }
+        }
+        await apiClient.post(API, saveData);
+        toast.success("금형이 등록되었어요.");
+      }
+      setMoldModalOpen(false);
+      fetchMolds();
+      if (moldEditMode && selectedMoldCode === moldForm.mold_code) {
+        fetchDetail(moldForm.mold_code);
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteMold = async () => {
+    if (!selectedMoldCode || !detail) return;
+    const ok = await confirm(
+      "금형을 삭제하시겠어요?",
+      { description: `"${detail.mold_name}" 금형과 하위 일련번호, 점검항목, 부품이 모두 삭제돼요.`, variant: "destructive" },
+    );
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/${selectedMoldCode}`);
+      toast.success("금형이 삭제되었어요.");
+      setSelectedMoldCode(null);
+      setDetail(null);
+      fetchMolds();
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 일련번호 CRUD ───
+  const handleSaveSerial = async () => {
+    if (!selectedMoldCode) return;
+    setSaving(true);
+    try {
+      if (serialForm.id) {
+        await apiClient.put(`${API}/serials/${serialForm.id}`, serialForm);
+        toast.success("일련번호가 수정되었어요.");
+      } else {
+        await apiClient.post(`${API}/${selectedMoldCode}/serials`, serialForm);
+        toast.success("일련번호가 등록되었어요.");
+      }
+      setSerialModalOpen(false);
+      setSerialForm({});
+      fetchSerials(selectedMoldCode);
+      fetchDetail(selectedMoldCode);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteSerial = async (id: number) => {
+    const ok = await confirm("이 일련번호를 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/serials/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) {
+        fetchSerials(selectedMoldCode);
+        fetchDetail(selectedMoldCode);
+      }
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 점검항목 CRUD ───
+  const handleAddInspection = async () => {
+    if (!selectedMoldCode) return;
+    if (!inspectionForm.inspection_item) {
+      toast.error("점검항목명은 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      await apiClient.post(`${API}/${selectedMoldCode}/inspections`, inspectionForm);
+      toast.success("점검항목이 등록되었어요.");
+      setInspectionModalOpen(false);
+      setInspectionForm({});
+      fetchInspections(selectedMoldCode);
+    } catch {
+      toast.error("등록에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteInspection = async (id: number) => {
+    const ok = await confirm("이 점검항목을 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/inspections/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) fetchInspections(selectedMoldCode);
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 부품 CRUD ───
+  const handleAddPart = async () => {
+    if (!selectedMoldCode) return;
+    if (!partForm.part_name) {
+      toast.error("부품명은 필수예요.");
+      return;
+    }
+    if (!partForm.replacement_cycle) {
+      toast.error("교체주기는 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      await apiClient.post(`${API}/${selectedMoldCode}/parts`, partForm);
+      toast.success("부품이 등록되었어요.");
+      setPartModalOpen(false);
+      setPartForm({});
+      fetchParts(selectedMoldCode);
+    } catch {
+      toast.error("등록에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeletePart = async (id: number) => {
+    const ok = await confirm("이 부품을 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/parts/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) fetchParts(selectedMoldCode);
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 수명 진행률 계산 ───
+  const calcLifePct = (mold: any) => {
+    const max = Number(mold.shot_count) || 0;
+    const current = Number(mold.current_shot_count) || 0;
+    if (max <= 0) return 0;
+    return Math.min(Math.round((current / max) * 100), 100);
+  };
+
+  // ─── 카드 렌더링 ───
+  const renderCard = (mold: any) => {
+    const pct = calcLifePct(mold);
+    const st = STATUS_MAP[mold.operation_status] || { label: mold.operation_status || "-", variant: "secondary" as const };
+    const isSelected = selectedMoldCode === mold.mold_code;
+
+    return (
+      <div
+        key={mold.mold_code}
+        onClick={() => handleSelectMold(mold.mold_code)}
+        className={cn(
+          "rounded-lg border cursor-pointer transition-all overflow-hidden",
+          "hover:shadow-md hover:-translate-y-0.5",
+          isSelected
+            ? "border-primary ring-2 ring-primary/25"
+            : "border-border hover:border-border",
+          viewMode === "list" ? "flex flex-row" : "",
+        )}
+      >
+        {/* 이미지 영역 */}
+        <div className={cn(
+          "bg-muted flex items-center justify-center relative",
+          viewMode === "list"
+            ? "w-[120px] min-w-[120px] min-h-[100px]"
+            : "h-[160px]",
+        )}>
+          {mold.image_path ? (
+            <img
+              src={mold.image_path}
+              alt={mold.mold_name}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <Box className="w-8 h-8 text-muted-foreground/50" />
+          )}
+          <div className="absolute top-2 right-2">
+            <Badge variant={st.variant} className="text-[10px]">{st.label}</Badge>
+          </div>
+        </div>
+
+        {/* 본문 */}
+        <div className={cn("flex-1 p-3", viewMode === "list" && "flex items-center gap-4")}>
+          <div className="flex-1 min-w-0">
+            <p className="text-xs text-muted-foreground font-mono truncate">{mold.mold_code}</p>
+            <p className="text-sm font-semibold truncate">{mold.mold_name}</p>
+            {mold.mold_type && (
+              <Badge variant="outline" className="text-[10px] mt-1">{mold.mold_type}</Badge>
+            )}
+          </div>
+
+          {/* 수명 진행률 */}
+          <div className={cn("mt-2", viewMode === "list" && "mt-0 min-w-[140px]")}>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-[11px] text-muted-foreground">수명</span>
+              <span className={cn("text-[11px] font-mono font-semibold", getProgressTextColor(pct))}>
+                {pct}%
+              </span>
+            </div>
+            <div className="h-1 bg-muted rounded-full overflow-hidden">
+              <div
+                className={cn("h-full rounded-full transition-all", getProgressColor(pct))}
+                style={{ width: `${pct}%` }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // ─── 선택 금형 상세 ───
+  const selectedMold = detail;
+  const lifePct = selectedMold ? calcLifePct(selectedMold) : 0;
+
+  return (
+    <div className="flex flex-col h-full p-3 gap-3 overflow-hidden">
+      {ConfirmDialogComponent}
+
+      {/* 검색 필터 */}
+      <div className="rounded-lg border bg-card p-3">
+        <div className="flex flex-wrap items-end gap-3">
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형코드</Label>
+            <Input
+              className="h-9 w-[160px] text-sm"
+              placeholder="코드를 입력해주세요"
+              value={filterCode}
+              onChange={(e) => setFilterCode(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형명</Label>
+            <Input
+              className="h-9 w-[160px] text-sm"
+              placeholder="금형명을 입력해주세요"
+              value={filterName}
+              onChange={(e) => setFilterName(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형유형</Label>
+            <Select value={filterType || "__all__"} onValueChange={(v) => setFilterType(v === "__all__" ? "" : v)}>
+              <SelectTrigger className="h-9 w-[140px] text-sm">
+                <SelectValue placeholder="전체" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체</SelectItem>
+                <SelectItem value="사출금형">사출금형</SelectItem>
+                <SelectItem value="프레스금형">프레스금형</SelectItem>
+                <SelectItem value="다이캐스팅">다이캐스팅</SelectItem>
+                <SelectItem value="단조금형">단조금형</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">상태</Label>
+            <Select value={filterStatus || "__all__"} onValueChange={(v) => setFilterStatus(v === "__all__" ? "" : v)}>
+              <SelectTrigger className="h-9 w-[140px] text-sm">
+                <SelectValue placeholder="전체" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체</SelectItem>
+                <SelectItem value="ACTIVE">사용중</SelectItem>
+                <SelectItem value="INSPECTION">점검중</SelectItem>
+                <SelectItem value="REPAIR">수리중</SelectItem>
+                <SelectItem value="DISPOSED">폐기</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <Button size="sm" className="h-9" onClick={fetchMolds}>
+            <Search className="w-4 h-4 mr-1" />
+            조회
+          </Button>
+        </div>
+      </div>
+
+      {/* 메인 분할 패널 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 rounded-lg border bg-card overflow-hidden">
+        {/* ─── 좌측: 카드 리스트 ─── */}
+        <ResizablePanel defaultSize={35} minSize={20} maxSize={50}>
+          <div className="flex flex-col h-full">
+            {/* 패널 헤더 */}
+            <div className="flex items-center justify-between px-4 py-3 border-b">
+              <div className="flex items-center gap-2">
+                <h3 className="text-sm font-semibold">금형 목록</h3>
+                <span className="text-xs font-mono font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full">
+                  {molds.length}
+                </span>
+              </div>
+              <div className="flex items-center gap-1.5">
+                {/* 뷰 토글 */}
+                <div className="flex border rounded overflow-hidden">
+                  <button
+                    onClick={() => setViewMode("grid")}
+                    className={cn(
+                      "p-1.5 transition-colors",
+                      viewMode === "grid"
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground/50 hover:text-muted-foreground hover:bg-accent",
+                    )}
+                  >
+                    <LayoutGrid className="w-3.5 h-3.5" />
+                  </button>
+                  <button
+                    onClick={() => setViewMode("list")}
+                    className={cn(
+                      "p-1.5 transition-colors border-l",
+                      viewMode === "list"
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground/50 hover:text-muted-foreground hover:bg-accent",
+                    )}
+                  >
+                    <List className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+                <Button size="sm" className="h-8" onClick={handleOpenRegister}>
+                  <Plus className="w-4 h-4 mr-1" />
+                  등록
+                </Button>
+              </div>
+            </div>
+
+            {/* 카드 스크롤 영역 */}
+            <div className="flex-1 overflow-y-auto p-2">
+              {loading ? (
+                <div className="flex items-center justify-center h-40">
+                  <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : molds.length === 0 ? (
+                <div className="flex flex-col items-center justify-center h-40 gap-2 text-muted-foreground">
+                  <Inbox className="w-10 h-10 opacity-40" />
+                  <p className="text-sm">등록된 금형이 없어요.</p>
+                </div>
+              ) : (
+                <div className={cn(
+                  "grid gap-2",
+                  viewMode === "grid"
+                    ? "grid-cols-[repeat(auto-fill,minmax(200px,1fr))]"
+                    : "grid-cols-1",
+                )}>
+                  {molds.map(renderCard)}
+                </div>
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* ─── 우측: 상세 ─── */}
+        <ResizablePanel defaultSize={65} minSize={40}>
+          <div className="flex flex-col h-full overflow-y-auto">
+            {!selectedMoldCode ? (
+              <div className="flex flex-col items-center justify-center h-full gap-3 text-muted-foreground">
+                <Box className="w-14 h-14 opacity-30" />
+                <p className="text-sm font-medium">좌측에서 금형을 선택해주세요</p>
+                <p className="text-xs text-muted-foreground/60">금형을 선택하면 상세 정보를 확인할 수 있어요</p>
+              </div>
+            ) : detailLoading ? (
+              <div className="flex items-center justify-center h-full">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : selectedMold ? (
+              <div className="p-5">
+                {/* 상세 헤더 */}
+                <div className="flex gap-5 pb-5 border-b mb-4">
+                  {/* 이미지 */}
+                  <div className="w-[200px] min-w-[200px] h-[200px] bg-muted rounded-lg flex items-center justify-center border">
+                    {selectedMold.image_path ? (
+                      <img
+                        src={selectedMold.image_path}
+                        alt={selectedMold.mold_name}
+                        className="w-full h-full object-cover rounded-lg"
+                      />
+                    ) : (
+                      <ImageIcon className="w-16 h-16 text-muted-foreground/40" />
+                    )}
+                  </div>
+
+                  {/* 메타 정보 */}
+                  <div className="flex-1 flex flex-col justify-center min-w-0">
+                    <p className="text-xs text-muted-foreground font-mono mb-1">{selectedMold.mold_code}</p>
+                    <h2 className="text-xl font-bold mb-2 truncate">{selectedMold.mold_name}</h2>
+                    <div className="flex gap-1.5 mb-4 flex-wrap">
+                      {selectedMold.mold_type && (
+                        <Badge variant="outline">{selectedMold.mold_type}</Badge>
+                      )}
+                      {selectedMold.category && (
+                        <Badge variant="secondary">{selectedMold.category}</Badge>
+                      )}
+                      <Badge variant={STATUS_MAP[selectedMold.operation_status]?.variant || "secondary"}>
+                        {STATUS_MAP[selectedMold.operation_status]?.label || selectedMold.operation_status || "-"}
+                      </Badge>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-x-5 gap-y-2 text-sm">
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">제조사</span>
+                        <p className="text-foreground">{selectedMold.manufacturer || "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">제작일</span>
+                        <p className="text-foreground">{selectedMold.manufacturing_date || "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">캐비티수</span>
+                        <p className="text-foreground font-mono">{selectedMold.cavity_count ?? "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">수량</span>
+                        <p className="text-foreground font-mono">{selectedMold.mold_quantity ?? "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">최대수명</span>
+                        <p className="text-foreground font-mono">{Number(selectedMold.shot_count || 0).toLocaleString()}회</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">보증수명</span>
+                        <p className="text-foreground font-mono">{Number(selectedMold.warranty_shot_count || 0).toLocaleString()}회</p>
+                      </div>
+                    </div>
+
+                    {/* 수명 진행률 바 */}
+                    <div className="mt-3">
+                      <div className="flex items-center justify-between mb-1">
+                        <span className="text-xs text-muted-foreground">수명 사용률</span>
+                        <span className={cn("text-sm font-mono font-semibold", getProgressTextColor(lifePct))}>
+                          {lifePct}%
+                        </span>
+                      </div>
+                      <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                        <div
+                          className={cn("h-full rounded-full transition-all", getProgressColor(lifePct))}
+                          style={{ width: `${lifePct}%` }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 액션 버튼 */}
+                  <div className="flex flex-col gap-2 flex-shrink-0">
+                    <Button variant="outline" size="sm" className="h-8" onClick={handleOpenEdit}>
+                      <Pencil className="w-3.5 h-3.5 mr-1" />
+                      수정
+                    </Button>
+                    <Button variant="outline" size="sm" className="h-8 text-destructive hover:text-destructive" onClick={handleDeleteMold}>
+                      <Trash2 className="w-3.5 h-3.5 mr-1" />
+                      삭제
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 탭 3개 */}
+                <Tabs value={rightTab} onValueChange={setRightTab}>
+                  <TabsList className="w-full justify-start border-b rounded-none bg-transparent h-auto p-0">
+                    <TabsTrigger
+                      value="serial"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <Wrench className="w-4 h-4 mr-1.5" />
+                      일련번호
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {serials.length}
+                      </span>
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="inspection"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <ClipboardCheck className="w-4 h-4 mr-1.5" />
+                      점검항목
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {inspections.length}
+                      </span>
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="part"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <Package className="w-4 h-4 mr-1.5" />
+                      부품
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {parts.length}
+                      </span>
+                    </TabsTrigger>
+                  </TabsList>
+
+                  {/* ─── 탭1: 일련번호 ─── */}
+                  <TabsContent value="serial" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">
+                        {serialSummary && (
+                          <>
+                            사용중 {serialSummary.in_use || 0} · 보관중 {serialSummary.stored || 0} · 수리중 {serialSummary.repair || 0} · 폐기 {serialSummary.disposed || 0}
+                          </>
+                        )}
+                      </span>
+                      <Button size="sm" className="h-8" onClick={() => { setSerialForm({}); setSerialModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        일련번호 등록
+                      </Button>
+                    </div>
+                    {serialLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : serials.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <Wrench className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 일련번호가 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">일련번호</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[200px]">샷수 현황</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">보관위치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                              <TableHead className="text-xs w-[80px]">작업</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {serials.map((s: any) => {
+                              const ss = SERIAL_STATUS_MAP[s.status] || { label: s.status || "-", variant: "secondary" as const };
+                              const maxShot = detail?.shot_count || 0;
+                              const curShot = s.current_shot_count || 0;
+                              const pct = maxShot > 0 ? Math.min(Math.round((curShot / maxShot) * 100), 100) : 0;
+                              return (
+                                <TableRow key={s.id}>
+                                  <TableCell className="text-[13px] font-mono font-semibold">{s.serial_number}</TableCell>
+                                  <TableCell>
+                                    <Badge variant={ss.variant} className="text-[10px]">{ss.label}</Badge>
+                                  </TableCell>
+                                  <TableCell>
+                                    {maxShot > 0 ? (
+                                      <div className="space-y-1">
+                                        <div className="flex items-center gap-2">
+                                          <div className="flex-1 h-3 bg-muted rounded-full overflow-hidden">
+                                            <div
+                                              className={cn("h-full rounded-full transition-all", getProgressColor(pct))}
+                                              style={{ width: `${pct}%` }}
+                                            />
+                                          </div>
+                                          <span className={cn("text-xs font-bold min-w-[36px] text-right", getProgressTextColor(pct))}>
+                                            {pct}%
+                                          </span>
+                                        </div>
+                                        <p className="text-[11px] text-muted-foreground">
+                                          {curShot.toLocaleString()} / {maxShot.toLocaleString()}
+                                        </p>
+                                      </div>
+                                    ) : (
+                                      <span className="text-xs text-muted-foreground">-</span>
+                                    )}
+                                  </TableCell>
+                                  <TableCell className="text-[13px]">{s.storage_location || "-"}</TableCell>
+                                  <TableCell className="text-[13px] text-muted-foreground">{s.remarks || "-"}</TableCell>
+                                  <TableCell>
+                                    <div className="flex items-center gap-1">
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-7 w-7 p-0"
+                                        onClick={() => {
+                                          setSerialForm(s);
+                                          setSerialModalOpen(true);
+                                        }}
+                                      >
+                                        <Pencil className="w-3.5 h-3.5" />
+                                      </Button>
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                        onClick={() => handleDeleteSerial(s.id)}
+                                      >
+                                        <Trash2 className="w-3.5 h-3.5" />
+                                      </Button>
+                                    </div>
+                                  </TableCell>
+                                </TableRow>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+
+                  {/* ─── 탭2: 점검항목 ─── */}
+                  <TabsContent value="inspection" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">점검항목 목록</span>
+                      <Button size="sm" className="h-8" onClick={() => { setInspectionForm({}); setInspectionModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        점검항목 등록
+                      </Button>
+                    </div>
+                    {inspectionLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : inspections.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <ClipboardCheck className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 점검항목이 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검항목</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">하한치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                              <TableHead className="text-xs w-[60px]" />
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {inspections.map((ins: any) => (
+                              <TableRow key={ins.id}>
+                                <TableCell className="text-[13px] font-medium">{ins.inspection_item}</TableCell>
+                                <TableCell className="text-[13px]">{ins.inspection_cycle || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{ins.inspection_method || "-"}</TableCell>
+                                <TableCell className="text-[13px] font-mono">{ins.lower_limit || "-"}</TableCell>
+                                <TableCell className="text-[13px] font-mono">{ins.upper_limit || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{ins.unit || "-"}</TableCell>
+                                <TableCell>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                    onClick={() => handleDeleteInspection(ins.id)}
+                                  >
+                                    <Trash2 className="w-3.5 h-3.5" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+
+                  {/* ─── 탭3: 부품 ─── */}
+                  <TabsContent value="part" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">부품 목록</span>
+                      <Button size="sm" className="h-8" onClick={() => { setPartForm({}); setPartModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        부품 등록
+                      </Button>
+                    </div>
+                    {partLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : parts.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <Package className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 부품이 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부품명</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">교체주기</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">제조사</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                              <TableHead className="text-xs w-[60px]" />
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {parts.map((p: any) => (
+                              <TableRow key={p.id}>
+                                <TableCell className="text-[13px] font-medium">{p.part_name}</TableCell>
+                                <TableCell className="text-[13px]">{p.replacement_cycle || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.unit || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.specification || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.manufacturer || "-"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{p.remarks || "-"}</TableCell>
+                                <TableCell>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                    onClick={() => handleDeletePart(p.id)}
+                                  >
+                                    <Trash2 className="w-3.5 h-3.5" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+                </Tabs>
+              </div>
+            ) : null}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 금형 등록/수정 모달 ========== */}
+      <Dialog open={moldModalOpen} onOpenChange={setMoldModalOpen}>
+        <DialogContent className="max-w-3xl overflow-y-auto" style={{ maxHeight: "90vh" }}>
+          <DialogHeader>
+            <DialogTitle>{moldEditMode ? "금형 수정" : "금형 등록"}</DialogTitle>
+            <DialogDescription>금형 기본 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형코드 <span className="text-destructive">*</span></Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldEditMode ? (moldForm.mold_code || "") : (numberingRuleId ? (previewCode || "") : (moldForm.mold_code || ""))}
+                  onChange={(e) => {
+                    if (!moldEditMode && !numberingRuleId) {
+                      setMoldForm({ ...moldForm, mold_code: e.target.value });
+                    }
+                  }}
+                  readOnly={moldEditMode || !!numberingRuleId}
+                  placeholder={moldEditMode ? "" : (numberingRuleId ? (previewCode ? "" : "자동 생성 중...") : "금형코드를 입력해주세요")}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형명 <span className="text-destructive">*</span></Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.mold_name || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, mold_name: e.target.value })}
+                  placeholder="금형명을 입력해주세요"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형유형</Label>
+                <Select
+                  value={moldForm.mold_type || ""}
+                  onValueChange={(v) => setMoldForm({ ...moldForm, mold_type: v })}
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="사출금형">사출금형</SelectItem>
+                    <SelectItem value="프레스금형">프레스금형</SelectItem>
+                    <SelectItem value="다이캐스팅">다이캐스팅</SelectItem>
+                    <SelectItem value="단조금형">단조금형</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">카테고리</Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.category || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, category: e.target.value })}
+                  placeholder="카테고리"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">제조사</Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.manufacturer || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, manufacturer: e.target.value })}
+                  placeholder="제조사"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">제작일</Label>
+                <Input
+                  type="date"
+                  className="h-9 text-sm"
+                  value={moldForm.manufacturing_date || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, manufacturing_date: e.target.value })}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">캐비티수</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.cavity_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, cavity_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">최대수명 (샷수)</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.shot_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, shot_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형수량</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.mold_quantity ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, mold_quantity: e.target.value })}
+                  min={1}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">가동상태</Label>
+                <Select
+                  value={moldForm.operation_status || ""}
+                  onValueChange={(v) => setMoldForm({ ...moldForm, operation_status: v })}
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="ACTIVE">사용중</SelectItem>
+                    <SelectItem value="INSPECTION">점검중</SelectItem>
+                    <SelectItem value="REPAIR">수리중</SelectItem>
+                    <SelectItem value="DISPOSED">폐기</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">보증수명 (샷수)</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.warranty_shot_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, warranty_shot_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형 이미지</Label>
+                <div className="relative w-full h-32 rounded-lg border-2 border-dashed border-border bg-muted/50 flex items-center justify-center overflow-hidden group">
+                  {moldImagePreview ? (
+                    <>
+                      <img src={moldImagePreview} alt="금형 이미지" className="w-full h-full object-contain" />
+                      <div className="absolute inset-0 bg-foreground/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                        <Button size="sm" variant="secondary" className="h-7 text-xs" type="button" onClick={() => moldImageRef.current?.click()}>
+                          <Upload className="w-3 h-3 mr-1" /> 변경
+                        </Button>
+                        <Button size="sm" variant="destructive" className="h-7 text-xs" type="button" onClick={() => {
+                          setMoldImagePreview(null);
+                          setMoldForm((prev) => ({ ...prev, image_path: null }));
+                        }}>
+                          <XIcon className="w-3 h-3" />
+                        </Button>
+                      </div>
+                    </>
+                  ) : (
+                    <button
+                      type="button"
+                      className="flex flex-col items-center gap-1.5 text-muted-foreground"
+                      onClick={() => moldImageRef.current?.click()}
+                    >
+                      <ImageIcon className="w-8 h-8" />
+                      <span className="text-xs">이미지 업로드</span>
+                    </button>
+                  )}
+                </div>
+                <input
+                  ref={moldImageRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleMoldImageUpload}
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setMoldModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleSaveMold} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              {moldEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 일련번호 등록/수정 모달 ========== */}
+      <Dialog open={serialModalOpen} onOpenChange={setSerialModalOpen}>
+        <DialogContent className="sm:max-w-[480px]">
+          <DialogHeader>
+            <DialogTitle>{serialForm.id ? "일련번호 수정" : "일련번호 등록"}</DialogTitle>
+            <DialogDescription>{serialForm.id ? `${serialForm.serial_number} 정보를 수정해요.` : "일련번호는 자동으로 채번돼요."}</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">상태</Label>
+              <Select
+                value={serialForm.status || "STORED"}
+                onValueChange={(v) => setSerialForm({ ...serialForm, status: v })}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="IN_USE">사용중</SelectItem>
+                  <SelectItem value="STORED">보관중</SelectItem>
+                  <SelectItem value="REPAIR">수리중</SelectItem>
+                  <SelectItem value="DISPOSED">폐기</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">현재 샷수</Label>
+              <Input
+                type="number"
+                className="h-9 text-sm font-mono"
+                value={serialForm.current_shot_count ?? ""}
+                onChange={(e) => setSerialForm({ ...serialForm, current_shot_count: e.target.value ? Number(e.target.value) : null })}
+                placeholder="0"
+                min={0}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">보관위치</Label>
+              <Input
+                className="h-9 text-sm"
+                value={serialForm.storage_location || ""}
+                onChange={(e) => setSerialForm({ ...serialForm, storage_location: e.target.value })}
+                placeholder="보관위치"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">비고</Label>
+              <Input
+                className="h-9 text-sm"
+                value={serialForm.remarks || ""}
+                onChange={(e) => setSerialForm({ ...serialForm, remarks: e.target.value })}
+                placeholder="비고"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setSerialModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleSaveSerial} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              {serialForm.id ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 점검항목 등록 모달 ========== */}
+      <Dialog open={inspectionModalOpen} onOpenChange={setInspectionModalOpen}>
+        <DialogContent className="sm:max-w-[560px]">
+          <DialogHeader>
+            <DialogTitle>점검항목 등록</DialogTitle>
+            <DialogDescription>금형 점검항목을 등록해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">점검항목명 <span className="text-destructive">*</span></Label>
+              <Input
+                className="h-9 text-sm"
+                value={inspectionForm.inspection_item || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_item: e.target.value })}
+                placeholder="점검항목명"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">점검주기</Label>
+              <Input
+                className="h-9 text-sm"
+                value={inspectionForm.inspection_cycle || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_cycle: e.target.value })}
+                placeholder="예: 월 1회"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">점검방법 <span className="text-destructive">*</span></Label>
+              <Select
+                value={inspectionForm.inspection_method || ""}
+                onValueChange={(v) => {
+                  const updated: Record<string, any> = { ...inspectionForm, inspection_method: v };
+                  if (v !== "숫자") {
+                    updated.lower_limit = "";
+                    updated.upper_limit = "";
+                    updated.unit = "";
+                  }
+                  setInspectionForm(updated);
+                }}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue placeholder="선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="숫자">숫자</SelectItem>
+                  <SelectItem value="텍스트">텍스트</SelectItem>
+                  <SelectItem value="합격/불합격">합격/불합격</SelectItem>
+                  <SelectItem value="양호/불량">양호/불량</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            {inspectionForm.inspection_method === "숫자" && (
+              <>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">기준값</Label>
+                  <Input
+                    type="number"
+                    className="h-9 text-sm font-mono"
+                    value={inspectionForm.lower_limit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, lower_limit: e.target.value })}
+                    placeholder="기준값"
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">±오차범위</Label>
+                  <Input
+                    type="number"
+                    className="h-9 text-sm font-mono"
+                    value={inspectionForm.upper_limit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, upper_limit: e.target.value })}
+                    placeholder="허용 오차"
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">단위</Label>
+                  <Input
+                    className="h-9 text-sm"
+                    value={inspectionForm.unit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, unit: e.target.value })}
+                    placeholder="mm, ℃ 등"
+                  />
+                </div>
+              </>
+            )}
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">점검내용</Label>
+              <textarea
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 resize-y"
+                value={inspectionForm.inspection_content || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_content: e.target.value })}
+                placeholder="상세 내용"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setInspectionModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleAddInspection} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              등록하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 부품 등록 모달 ========== */}
+      <Dialog open={partModalOpen} onOpenChange={setPartModalOpen}>
+        <DialogContent className="sm:max-w-[560px]">
+          <DialogHeader>
+            <DialogTitle>부품 등록</DialogTitle>
+            <DialogDescription>금형 부품을 등록해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">부품명 <span className="text-destructive">*</span></Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.part_name || ""}
+                onChange={(e) => setPartForm({ ...partForm, part_name: e.target.value })}
+                placeholder="부품명"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">교체주기 <span className="text-destructive">*</span></Label>
+              <Select
+                value={partForm.replacement_cycle || ""}
+                onValueChange={(v) => setPartForm({ ...partForm, replacement_cycle: v })}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue placeholder="선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1만 샷">1만 샷</SelectItem>
+                  <SelectItem value="5만 샷">5만 샷</SelectItem>
+                  <SelectItem value="10만 샷">10만 샷</SelectItem>
+                  <SelectItem value="월 1회">월 1회</SelectItem>
+                  <SelectItem value="3개월">3개월</SelectItem>
+                  <SelectItem value="6개월">6개월</SelectItem>
+                  <SelectItem value="1년">1년</SelectItem>
+                  <SelectItem value="수시">수시</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">단위</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.unit || ""}
+                onChange={(e) => setPartForm({ ...partForm, unit: e.target.value })}
+                placeholder="EA, SET 등"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">규격</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.specification || ""}
+                onChange={(e) => setPartForm({ ...partForm, specification: e.target.value })}
+                placeholder="규격"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">제조사</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.manufacturer || ""}
+                onChange={(e) => setPartForm({ ...partForm, manufacturer: e.target.value })}
+                placeholder="제조사"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">비고</Label>
+              <textarea
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 resize-y"
+                value={partForm.remarks || ""}
+                onChange={(e) => setPartForm({ ...partForm, remarks: e.target.value })}
+                placeholder="비고"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setPartModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleAddPart} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              등록하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/monitoring/equipment/page.tsx b/frontend/app/(main)/COMPANY_7/monitoring/equipment/page.tsx
new file mode 100644
index 00000000..ccb5aaf6
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/monitoring/equipment/page.tsx
@@ -0,0 +1,575 @@
+"use client";
+
+/**
+ * 설비운영모니터링 — 하드코딩 페이지
+ *
+ * 설비(equipment_mng) 목록 + 작업지시(work_instruction) 연결
+ * 실시간 카드 그리드 형태 모니터링 대시보드
+ */
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Wrench,
+  Zap,
+  Pause,
+  Power,
+} from "lucide-react";
+
+/* ───── 상태 정의 ───── */
+
+type OperationStatus = "running" | "idle" | "maintenance" | "off" | "unknown";
+
+interface StatusConfig {
+  label: string;
+  color: string;
+  bg: string;
+  border: string;
+  bar: string;
+  icon: React.ReactNode;
+  badgeBg: string;
+  badgeText: string;
+  cardGlow: string;
+}
+
+const STATUS_MAP: Record<OperationStatus, StatusConfig> = {
+  running: {
+    label: "가동중",
+    color: "text-emerald-400",
+    bg: "bg-emerald-500/10",
+    border: "border-emerald-500/30",
+    bar: "bg-emerald-400",
+    icon: <Zap className="h-4 w-4" />,
+    badgeBg: "bg-emerald-500/20",
+    badgeText: "text-emerald-300",
+    cardGlow: "shadow-emerald-500/5",
+  },
+  idle: {
+    label: "대기",
+    color: "text-amber-400",
+    bg: "bg-amber-500/10",
+    border: "border-amber-500/30",
+    bar: "bg-amber-400",
+    icon: <Pause className="h-4 w-4" />,
+    badgeBg: "bg-amber-500/20",
+    badgeText: "text-amber-300",
+    cardGlow: "shadow-amber-500/5",
+  },
+  maintenance: {
+    label: "점검/수리",
+    color: "text-red-400",
+    bg: "bg-red-500/10",
+    border: "border-red-500/30",
+    bar: "bg-red-400",
+    icon: <Wrench className="h-4 w-4" />,
+    badgeBg: "bg-red-500/20",
+    badgeText: "text-red-300",
+    cardGlow: "shadow-red-500/5",
+  },
+  off: {
+    label: "비가동",
+    color: "text-gray-400",
+    bg: "bg-gray-500/10",
+    border: "border-gray-500/30",
+    bar: "bg-gray-500",
+    icon: <Power className="h-4 w-4" />,
+    badgeBg: "bg-gray-500/20",
+    badgeText: "text-gray-400",
+    cardGlow: "shadow-gray-500/5",
+  },
+  unknown: {
+    label: "미설정",
+    color: "text-gray-500",
+    bg: "bg-gray-500/10",
+    border: "border-gray-600/30",
+    bar: "bg-gray-600",
+    icon: <Power className="h-4 w-4" />,
+    badgeBg: "bg-gray-600/20",
+    badgeText: "text-gray-500",
+    cardGlow: "",
+  },
+};
+
+/** operation_status 값 → 내부 키 매핑 */
+function resolveStatus(raw: string | null | undefined): OperationStatus {
+  if (!raw) return "unknown";
+  const v = raw.trim().toLowerCase();
+  if (["running", "가동", "가동중"].includes(v)) return "running";
+  if (["idle", "대기"].includes(v)) return "idle";
+  if (["maintenance", "점검", "수리", "점검/수리", "점검중"].includes(v)) return "maintenance";
+  if (["off", "비가동", "정지"].includes(v)) return "off";
+  return "unknown";
+}
+
+/* ───── 타입 ───── */
+
+interface Equipment {
+  id: string;
+  equipment_code: string;
+  equipment_name: string;
+  equipment_type: string;
+  installation_location: string;
+  operation_status: string;
+  manufacturer: string;
+  model_name: string;
+  image_path: string;
+}
+
+interface WorkInstruction {
+  id: string;
+  instruction_number: string;
+  item_name: string;
+  equipment_id: string;
+  worker_name: string;
+  status: string;
+}
+
+/* ───── 컴포넌트 ───── */
+
+export default function EquipmentMonitoringPage() {
+  const [equipments, setEquipments] = useState<Equipment[]>([]);
+  const [workInstructions, setWorkInstructions] = useState<WorkInstruction[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [filterStatus, setFilterStatus] = useState<OperationStatus | "all">("all");
+  const autoRefreshRef = useRef(autoRefresh);
+
+  // autoRefreshRef 동기화
+  useEffect(() => {
+    autoRefreshRef.current = autoRefresh;
+  }, [autoRefresh]);
+
+  /* ── 시간 업데이트 ── */
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* ── 데이터 fetch ── */
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      const [equipRes, wiRes] = await Promise.all([
+        apiClient.post("/table-management/tables/equipment_mng/data", {
+          autoFilter: true,
+          page: 1,
+          size: 500,
+        }),
+        apiClient.get("/work-instruction/list").catch(() => ({ data: { data: [] } })),
+      ]);
+
+      const eqRows: Equipment[] = equipRes.data?.data?.rows ?? equipRes.data?.rows ?? [];
+      setEquipments(eqRows);
+
+      const wiRows: WorkInstruction[] = wiRes.data?.data ?? wiRes.data?.rows ?? [];
+      setWorkInstructions(wiRows);
+    } catch (err) {
+      console.error("설비 모니터링 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ── 자동 갱신 (30초) ── */
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (autoRefreshRef.current) fetchData();
+    }, 30000);
+    return () => clearInterval(interval);
+  }, [fetchData]);
+
+  /* ── 요약 통계 ── */
+  const stats = useMemo(() => {
+    const counts: Record<OperationStatus, number> = {
+      running: 0,
+      idle: 0,
+      maintenance: 0,
+      off: 0,
+      unknown: 0,
+    };
+    equipments.forEach((eq) => {
+      const s = resolveStatus(eq.operation_status);
+      counts[s]++;
+    });
+    return { total: equipments.length, ...counts };
+  }, [equipments]);
+
+  /* ── 필터된 설비 ── */
+  const filteredEquipments = useMemo(() => {
+    if (filterStatus === "all") return equipments;
+    return equipments.filter((eq) => resolveStatus(eq.operation_status) === filterStatus);
+  }, [equipments, filterStatus]);
+
+  /* ── 설비별 작업지시 맵 ── */
+  const wiMap = useMemo(() => {
+    const map: Record<string, WorkInstruction[]> = {};
+    workInstructions.forEach((wi) => {
+      if (wi.equipment_id) {
+        if (!map[wi.equipment_id]) map[wi.equipment_id] = [];
+        map[wi.equipment_id].push(wi);
+      }
+    });
+    return map;
+  }, [workInstructions]);
+
+  /* ── 가동률 (모킹 — 센서 미연동) ── */
+  const getUtilization = (eq: Equipment): number | null => {
+    const s = resolveStatus(eq.operation_status);
+    if (s === "running") return 75 + Math.floor(Math.random() * 20); // 75~94
+    if (s === "idle") return 20 + Math.floor(Math.random() * 30); // 20~49
+    if (s === "maintenance") return 0;
+    if (s === "off") return 0;
+    return null;
+  };
+
+  /* ── 요약 카드 배열 ── */
+  const summaryCards: {
+    label: string;
+    count: number;
+    status: OperationStatus | "total";
+    color: string;
+    bg: string;
+    border: string;
+    icon: React.ReactNode;
+  }[] = [
+    {
+      label: "전체설비",
+      count: stats.total,
+      status: "total",
+      color: "text-blue-400",
+      bg: "bg-blue-500/10",
+      border: "border-blue-500/30",
+      icon: <Inbox className="h-5 w-5" />,
+    },
+    {
+      label: "가동중",
+      count: stats.running,
+      status: "running",
+      color: "text-emerald-400",
+      bg: "bg-emerald-500/10",
+      border: "border-emerald-500/30",
+      icon: <Zap className="h-5 w-5" />,
+    },
+    {
+      label: "대기",
+      count: stats.idle,
+      status: "idle",
+      color: "text-amber-400",
+      bg: "bg-amber-500/10",
+      border: "border-amber-500/30",
+      icon: <Pause className="h-5 w-5" />,
+    },
+    {
+      label: "점검/수리",
+      count: stats.maintenance,
+      status: "maintenance",
+      color: "text-red-400",
+      bg: "bg-red-500/10",
+      border: "border-red-500/30",
+      icon: <Wrench className="h-5 w-5" />,
+    },
+    {
+      label: "비가동",
+      count: stats.off + stats.unknown,
+      status: "off",
+      color: "text-gray-400",
+      bg: "bg-gray-500/10",
+      border: "border-gray-500/30",
+      icon: <Power className="h-5 w-5" />,
+    },
+  ];
+
+  /* ── 필터 pill ── */
+  const filterPills: { label: string; value: OperationStatus | "all"; color: string }[] = [
+    { label: "전체", value: "all", color: "bg-blue-500/20 text-blue-300 hover:bg-blue-500/30" },
+    { label: "가동중", value: "running", color: "bg-emerald-500/20 text-emerald-300 hover:bg-emerald-500/30" },
+    { label: "대기", value: "idle", color: "bg-amber-500/20 text-amber-300 hover:bg-amber-500/30" },
+    { label: "점검/수리", value: "maintenance", color: "bg-red-500/20 text-red-300 hover:bg-red-500/30" },
+    { label: "비가동", value: "off", color: "bg-gray-500/20 text-gray-300 hover:bg-gray-500/30" },
+  ];
+
+  /* ── 포맷 ── */
+  const formatTime = (d: Date) =>
+    d.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
+  const formatDate = (d: Date) =>
+    d.toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", weekday: "short" });
+
+  /* ────────────── 렌더 ────────────── */
+
+  return (
+    <div className="min-h-screen bg-gray-950 text-white p-4 md:p-6 space-y-5">
+      {/* ── 헤더 ── */}
+      <header className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <div className="h-8 w-1.5 rounded-full bg-amber-400" />
+          <h1 className="text-2xl font-bold tracking-tight">설비운영모니터링</h1>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* 현재 시간 */}
+          <div className="flex items-center gap-2 text-sm text-gray-400 bg-gray-800/60 rounded-lg px-3 py-1.5 border border-gray-700/50">
+            <Clock className="h-4 w-4" />
+            <span className="font-mono">{formatDate(currentTime)}</span>
+            <span className="font-mono text-white">{formatTime(currentTime)}</span>
+          </div>
+
+          {/* 자동갱신 토글 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn(
+              "border-gray-700 text-xs gap-1.5",
+              autoRefresh
+                ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20"
+                : "bg-gray-800 text-gray-400 hover:bg-gray-700"
+            )}
+            onClick={() => setAutoRefresh((v) => !v)}
+          >
+            <span className={cn("h-1.5 w-1.5 rounded-full", autoRefresh ? "bg-emerald-400 animate-pulse" : "bg-gray-600")} />
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+
+          {/* 새로고침 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-gray-700 bg-gray-800 text-gray-300 hover:bg-gray-700 gap-1.5"
+            onClick={fetchData}
+            disabled={loading}
+          >
+            <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+            새로고침
+          </Button>
+        </div>
+      </header>
+
+      {/* ── 요약 카드 5개 ── */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
+        {summaryCards.map((card) => (
+          <button
+            key={card.label}
+            onClick={() =>
+              setFilterStatus(card.status === "total" ? "all" : (card.status as OperationStatus))
+            }
+            className={cn(
+              "relative flex items-center gap-3 rounded-xl border px-4 py-3 transition-all hover:scale-[1.02]",
+              card.bg,
+              card.border,
+              "hover:shadow-lg"
+            )}
+          >
+            <div className={cn("flex items-center justify-center rounded-lg p-2", card.bg, card.color)}>
+              {card.icon}
+            </div>
+            <div className="text-left">
+              <p className="text-xs text-gray-500">{card.label}</p>
+              <p className={cn("text-2xl font-bold tabular-nums", card.color)}>{card.count}</p>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {/* ── 필터 pill ── */}
+      <div className="flex flex-wrap gap-2">
+        {filterPills.map((pill) => (
+          <button
+            key={pill.value}
+            onClick={() => setFilterStatus(pill.value)}
+            className={cn(
+              "rounded-full px-4 py-1.5 text-sm font-medium transition-all",
+              filterStatus === pill.value
+                ? cn(pill.color, "ring-1 ring-white/20")
+                : "bg-gray-800/60 text-gray-500 hover:text-gray-300 hover:bg-gray-800"
+            )}
+          >
+            {pill.label}
+          </button>
+        ))}
+        <span className="ml-auto text-sm text-gray-600 self-center">
+          {filteredEquipments.length}대 표시
+        </span>
+      </div>
+
+      {/* ── 로딩 ── */}
+      {loading && equipments.length === 0 && (
+        <div className="flex items-center justify-center py-20">
+          <Loader2 className="h-8 w-8 animate-spin text-gray-600" />
+          <span className="ml-3 text-gray-500">설비 데이터를 불러오는 중...</span>
+        </div>
+      )}
+
+      {/* ── 데이터 없음 ── */}
+      {!loading && equipments.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-gray-600">
+          <Inbox className="h-12 w-12 mb-3" />
+          <p className="text-lg">등록된 설비가 없습니다.</p>
+        </div>
+      )}
+
+      {/* ── 설비 카드 그리드 ── */}
+      {filteredEquipments.length > 0 && (
+        <div
+          className="grid gap-4"
+          style={{ gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))" }}
+        >
+          {filteredEquipments.map((eq) => {
+            const status = resolveStatus(eq.operation_status);
+            const cfg = STATUS_MAP[status];
+            const utilization = getUtilization(eq);
+            const eqWIs = wiMap[eq.id] ?? [];
+
+            return (
+              <div
+                key={eq.id}
+                className={cn(
+                  "relative overflow-hidden rounded-xl border bg-gray-900/80 backdrop-blur transition-all hover:shadow-lg",
+                  cfg.border,
+                  cfg.cardGlow
+                )}
+              >
+                {/* 좌측 색상 바 */}
+                <div className={cn("absolute left-0 top-0 bottom-0 w-1 rounded-l-xl", cfg.bar)} />
+
+                {/* 상단: 설비명 + 상태 배지 */}
+                <div className="flex items-start justify-between px-4 pt-3 pb-2 pl-5">
+                  <div className="min-w-0 flex-1">
+                    <h3 className="text-base font-semibold text-white truncate">
+                      {eq.equipment_name || "이름 없음"}
+                    </h3>
+                    <p className="text-xs text-gray-500 mt-0.5 truncate">
+                      {eq.equipment_type || "-"} · {eq.installation_location || "-"}
+                    </p>
+                  </div>
+                  <Badge
+                    className={cn(
+                      "ml-2 shrink-0 border-0 gap-1 text-xs font-medium",
+                      cfg.badgeBg,
+                      cfg.badgeText
+                    )}
+                  >
+                    {cfg.icon}
+                    {cfg.label}
+                  </Badge>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 정보 그리드 */}
+                <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 px-4 pl-5 py-2.5 text-sm">
+                  <div>
+                    <span className="text-gray-500 text-xs">금일 가동시간</span>
+                    <p className="text-white font-medium">-</p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">생산수량</span>
+                    <p className="text-white font-medium">-</p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">작업자</span>
+                    <p className="text-white font-medium">
+                      {eqWIs.length > 0 && eqWIs[0].worker_name
+                        ? eqWIs[0].worker_name
+                        : "-"}
+                    </p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">설비코드</span>
+                    <p className="text-white font-medium truncate">{eq.equipment_code || "-"}</p>
+                  </div>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 가동률 프로그레스 */}
+                <div className="px-4 pl-5 py-2.5">
+                  <div className="flex items-center justify-between text-xs mb-1.5">
+                    <span className="text-gray-500">가동률</span>
+                    <span className={cn("font-bold tabular-nums", utilization !== null ? cfg.color : "text-gray-600")}>
+                      {utilization !== null ? `${utilization}%` : "-"}
+                    </span>
+                  </div>
+                  <div className="h-2 w-full rounded-full bg-gray-800 overflow-hidden">
+                    {utilization !== null && (
+                      <div
+                        className={cn("h-full rounded-full transition-all duration-700", cfg.bar)}
+                        style={{ width: `${utilization}%` }}
+                      />
+                    )}
+                  </div>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 현재 작업지시 */}
+                <div className="px-4 pl-5 py-2.5">
+                  <p className="text-xs text-gray-500 mb-1">현재 작업지시</p>
+                  {eqWIs.length > 0 ? (
+                    <div className="space-y-1">
+                      {eqWIs.slice(0, 2).map((wi) => (
+                        <div key={wi.id} className="flex items-center gap-2 text-sm">
+                          <span className="text-blue-400 font-mono text-xs shrink-0">
+                            {wi.instruction_number || "-"}
+                          </span>
+                          <span className="text-gray-300 truncate">
+                            {wi.item_name || "-"}
+                          </span>
+                        </div>
+                      ))}
+                      {eqWIs.length > 2 && (
+                        <p className="text-xs text-gray-600">+{eqWIs.length - 2}건 더</p>
+                      )}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-gray-600 italic">배정된 작업 없음</p>
+                  )}
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 센서 데이터 (PLC 미연동) */}
+                <div className="flex items-center gap-4 px-4 pl-5 py-2.5 text-xs">
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">온도</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">압력</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">RPM</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* 필터 결과 없음 */}
+      {!loading && equipments.length > 0 && filteredEquipments.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 text-gray-600">
+          <Inbox className="h-10 w-10 mb-2" />
+          <p>해당 상태의 설비가 없습니다.</p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/monitoring/production/page.tsx b/frontend/app/(main)/COMPANY_7/monitoring/production/page.tsx
new file mode 100644
index 00000000..fb8aa24b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/monitoring/production/page.tsx
@@ -0,0 +1,504 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Timer,
+  CheckCircle2,
+  AlertTriangle,
+  TrendingUp,
+  Play,
+  Pause,
+} from "lucide-react";
+
+// ─── 타입 정의 ─────────────────────────────────────────────
+interface WorkInstructionDetail {
+  item_name?: string;
+  spec?: string;
+  customer_name?: string;
+}
+
+interface WorkInstruction {
+  id: string;
+  wi_id?: string;
+  work_instruction_no: string;
+  status: string; // 일반 / 긴급
+  qty: number;
+  completed_qty: number;
+  start_date: string | null;
+  end_date: string | null;
+  worker: string | null;
+  equipment_id: string | null;
+  equipment_name?: string | null;
+  details?: WorkInstructionDetail[];
+}
+
+interface ProcessStep {
+  wo_id: string;
+  process_name: string;
+  status: string; // acceptable / completed
+  seq_no: number;
+}
+
+type FilterTab = "전체" | "대기" | "진행중" | "완료";
+
+// ─── 유틸리티 ──────────────────────────────────────────────
+function formatDate(dateStr: string | null | undefined): string {
+  if (!dateStr) return "-";
+  try {
+    const d = new Date(dateStr);
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+  } catch {
+    return dateStr;
+  }
+}
+
+function formatTime(date: Date): string {
+  const h = String(date.getHours()).padStart(2, "0");
+  const m = String(date.getMinutes()).padStart(2, "0");
+  const s = String(date.getSeconds()).padStart(2, "0");
+  return `${h}:${m}:${s}`;
+}
+
+// 작업지시별 공정현황으로 진행상태 계산
+function computeProgress(
+  wiId: string,
+  processMap: Map<string, ProcessStep[]>
+): "대기" | "진행중" | "완료" {
+  const steps = processMap.get(wiId);
+  if (!steps || steps.length === 0) return "대기";
+  const completedCount = steps.filter((s) => s.status === "completed").length;
+  if (completedCount === 0) return "대기";
+  if (completedCount === steps.length) return "완료";
+  return "진행중";
+}
+
+// ─── 메인 컴포넌트 ────────────────────────────────────────
+export default function ProductionMonitoringPage() {
+  const [workInstructions, setWorkInstructions] = useState<WorkInstruction[]>([]);
+  const [processMap, setProcessMap] = useState<Map<string, ProcessStep[]>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [activeTab, setActiveTab] = useState<FilterTab>("전체");
+
+  // ─── 실시간 시계 ─────────────────────────────────────────
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // ─── 데이터 로드 ─────────────────────────────────────────
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+
+      // 작업지시 목록 조회
+      const wiRes = await apiClient.get("/work-instruction/list");
+      const wiRaw: WorkInstruction[] =
+        wiRes.data?.success && Array.isArray(wiRes.data.data) ? wiRes.data.data : [];
+      // 작업지시번호 기준 중복 제거 (디테일 JOIN으로 중복 발생 가능)
+      const seen = new Set<string>();
+      const wiData = wiRaw.filter((wi) => {
+        const key = wi.work_instruction_no || wi.id;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+      setWorkInstructions(wiData);
+
+      // 공정현황 조회 (실패해도 작업지시는 표시)
+      try {
+        const procRes = await apiClient.post("/table-management/tables/work_order_process/data", {
+          page: 1, size: 1000, autoFilter: true,
+        });
+        const rows: ProcessStep[] = procRes.data?.data?.data || procRes.data?.data?.rows || procRes.data?.data || [];
+
+        // wo_id별로 그룹핑 후, 같은 seq_no+process_name은 1건으로 합침 (배치 실행 이력 중복 제거)
+        const rawMap = new Map<string, ProcessStep[]>();
+        rows.forEach((row) => {
+          const key = String(row.wo_id);
+          if (!rawMap.has(key)) rawMap.set(key, []);
+          rawMap.get(key)!.push(row);
+        });
+
+        const map = new Map<string, ProcessStep[]>();
+        rawMap.forEach((steps, woId) => {
+          // seq_no + process_name 기준으로 대표 1건만 (completed 우선)
+          const grouped = new Map<string, ProcessStep>();
+          for (const s of steps) {
+            const gk = `${s.seq_no}_${s.process_name}`;
+            const existing = grouped.get(gk);
+            if (!existing || (s.status === "completed" && existing.status !== "completed")) {
+              grouped.set(gk, s);
+            }
+          }
+          const deduped = Array.from(grouped.values()).sort((a, b) => (a.seq_no ?? 0) - (b.seq_no ?? 0));
+          map.set(woId, deduped);
+        });
+        setProcessMap(map);
+      } catch {
+        // 공정현황 조회 실패 → 빈 맵 유지
+        setProcessMap(new Map());
+      }
+    } catch (err) {
+      console.error("생산모니터링 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // ─── 자동갱신 (30초) ─────────────────────────────────────
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const timer = setInterval(fetchData, 30000);
+    return () => clearInterval(timer);
+  }, [autoRefresh, fetchData]);
+
+  // ─── 통계 계산 ───────────────────────────────────────────
+  const stats = useMemo(() => {
+    let waiting = 0;
+    let inProgress = 0;
+    let completed = 0;
+    let totalQty = 0;
+    let completedQty = 0;
+
+    workInstructions.forEach((wi) => {
+      const progress = computeProgress(wi.wi_id || wi.id, processMap);
+      if (progress === "대기") waiting++;
+      else if (progress === "진행중") inProgress++;
+      else completed++;
+      totalQty += Number((wi as any).total_qty || wi.qty || 0);
+      completedQty += Number(wi.completed_qty) || 0;
+    });
+
+    const achievementRate = totalQty > 0 ? Math.round((completedQty / totalQty) * 100) : 0;
+
+    return { waiting, inProgress, completed, achievementRate };
+  }, [workInstructions, processMap]);
+
+  // ─── 필터링된 작업 목록 ──────────────────────────────────
+  const filteredInstructions = useMemo(() => {
+    return workInstructions.filter((wi) => {
+      if (activeTab === "전체") return true;
+      const progress = computeProgress(wi.wi_id || wi.id, processMap);
+      return progress === activeTab;
+    });
+  }, [workInstructions, processMap, activeTab]);
+
+  // ─── 렌더링 ──────────────────────────────────────────────
+  return (
+    <div className="flex flex-col h-full min-h-0 bg-background p-4 gap-4 overflow-auto">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between flex-shrink-0">
+        <h1 className="text-2xl font-bold text-foreground">생산모니터링</h1>
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5 text-muted-foreground text-sm">
+            <Clock className="w-4 h-4" />
+            <span className="font-mono">{formatTime(currentTime)}</span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={loading}
+            className="gap-1.5"
+          >
+            <RefreshCw className={cn("w-4 h-4", loading && "animate-spin")} />
+            새로고침
+          </Button>
+          <Button
+            variant={autoRefresh ? "default" : "outline"}
+            size="sm"
+            onClick={() => setAutoRefresh(!autoRefresh)}
+            className="gap-1.5"
+          >
+            {autoRefresh ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+        </div>
+      </div>
+
+      {/* 요약 카드 */}
+      <div className="grid grid-cols-4 gap-4 flex-shrink-0">
+        <SummaryCard
+          icon={<Timer className="w-5 h-5" />}
+          label="대기중"
+          value={stats.waiting}
+          colorClass="text-amber-500 bg-amber-500/10 border-amber-500/20"
+        />
+        <SummaryCard
+          icon={<Loader2 className="w-5 h-5" />}
+          label="진행중"
+          value={stats.inProgress}
+          colorClass="text-blue-500 bg-blue-500/10 border-blue-500/20"
+        />
+        <SummaryCard
+          icon={<CheckCircle2 className="w-5 h-5" />}
+          label="완료"
+          value={stats.completed}
+          colorClass="text-emerald-500 bg-emerald-500/10 border-emerald-500/20"
+        />
+        <SummaryCard
+          icon={<TrendingUp className="w-5 h-5" />}
+          label="달성율"
+          value={`${stats.achievementRate}%`}
+          colorClass="text-purple-500 bg-purple-500/10 border-purple-500/20"
+        />
+      </div>
+
+      {/* 탭 필터 */}
+      <div className="flex items-center gap-2 flex-shrink-0">
+        {(["전체", "대기", "진행중", "완료"] as FilterTab[]).map((tab) => (
+          <Button
+            key={tab}
+            variant={activeTab === tab ? "default" : "outline"}
+            size="sm"
+            onClick={() => setActiveTab(tab)}
+            className={cn(
+              "min-w-[64px]",
+              activeTab === tab && tab === "대기" && "bg-amber-500 hover:bg-amber-600 text-white",
+              activeTab === tab && tab === "진행중" && "bg-blue-500 hover:bg-blue-600 text-white",
+              activeTab === tab && tab === "완료" && "bg-emerald-500 hover:bg-emerald-600 text-white"
+            )}
+          >
+            {tab}
+            {tab === "전체" && ` (${workInstructions.length})`}
+            {tab === "대기" && ` (${stats.waiting})`}
+            {tab === "진행중" && ` (${stats.inProgress})`}
+            {tab === "완료" && ` (${stats.completed})`}
+          </Button>
+        ))}
+      </div>
+
+      {/* 로딩 상태 */}
+      {loading && workInstructions.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <Loader2 className="w-10 h-10 animate-spin mb-3" />
+          <span className="text-sm">데이터를 불러오는 중입니다...</span>
+        </div>
+      )}
+
+      {/* 빈 상태 */}
+      {!loading && filteredInstructions.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <Inbox className="w-12 h-12 mb-3" />
+          <span className="text-sm">
+            {activeTab === "전체"
+              ? "등록된 작업지시가 없습니다."
+              : `"${activeTab}" 상태의 작업지시가 없습니다.`}
+          </span>
+        </div>
+      )}
+
+      {/* 작업 카드 그리드 */}
+      {filteredInstructions.length > 0 && (
+        <div
+          className="grid gap-4 flex-1"
+          style={{ gridTemplateColumns: "repeat(auto-fill, minmax(420px, 1fr))" }}
+        >
+          {filteredInstructions.map((wi, idx) => (
+            <WorkCard
+              key={wi.id || `wi-${idx}`}
+              instruction={wi}
+              steps={processMap.get(wi.wi_id || wi.id) || []}
+              progress={computeProgress(wi.wi_id || wi.id, processMap)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── 요약 카드 ─────────────────────────────────────────────
+function SummaryCard({
+  icon,
+  label,
+  value,
+  colorClass,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: number | string;
+  colorClass: string;
+}) {
+  return (
+    <div className="bg-card border rounded-lg p-4 flex items-center gap-4">
+      <div className={cn("p-2.5 rounded-lg border", colorClass)}>{icon}</div>
+      <div className="flex flex-col">
+        <span className="text-xs text-muted-foreground">{label}</span>
+        <span className="text-2xl font-bold text-foreground">{value}</span>
+      </div>
+    </div>
+  );
+}
+
+// ─── 작업 카드 ─────────────────────────────────────────────
+function WorkCard({
+  instruction: wi,
+  steps,
+  progress,
+}: {
+  instruction: WorkInstruction;
+  steps: ProcessStep[];
+  progress: "대기" | "진행중" | "완료";
+}) {
+  // API 응답은 flat 구조 (details 배열 아님)
+  const itemName = (wi as any).item_name || "-";
+  const spec = (wi as any).item_spec || "-";
+  const customerName = (wi as any).customer_name || "-";
+
+  // 진척률 (total_qty 또는 qty)
+  const totalQty = Number((wi as any).total_qty || wi.qty || 0);
+  const completedQty = Number(wi.completed_qty || 0);
+  const progressPercent = totalQty > 0 ? Math.min(100, Math.round((completedQty / totalQty) * 100)) : 0;
+
+  // 공정 현황 계산
+  const completedSteps = steps.filter((s) => s.status === "completed").length;
+  const currentStep = steps.find((s) => s.status !== "completed");
+
+  // 프로그레스바 색상
+  const barColor =
+    progressPercent >= 100
+      ? "bg-emerald-500"
+      : progressPercent >= 50
+        ? "bg-blue-500"
+        : "bg-amber-500";
+
+  // 상태 배지 스타일
+  const statusBadge: Record<string, string> = {
+    "대기": "bg-amber-500/10 text-amber-500 border-amber-500/30",
+    "진행중": "bg-blue-500/10 text-blue-500 border-blue-500/30",
+    "완료": "bg-emerald-500/10 text-emerald-500 border-emerald-500/30",
+  };
+
+  const isUrgent = wi.status === "긴급";
+
+  return (
+    <div className="bg-card border rounded-lg overflow-hidden flex flex-col">
+      {/* 카드 헤더 */}
+      <div className="flex items-center justify-between px-4 py-3 border-b bg-muted/30">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-sm text-foreground">
+            {wi.work_instruction_no}
+          </span>
+          {isUrgent && (
+            <Badge
+              variant="outline"
+              className="bg-red-500/10 text-red-500 border-red-500/30 text-xs gap-1"
+            >
+              <AlertTriangle className="w-3 h-3" />
+              긴급
+            </Badge>
+          )}
+        </div>
+        <Badge variant="outline" className={cn("text-xs", statusBadge[progress])}>
+          {progress}
+        </Badge>
+      </div>
+
+      {/* 카드 본문 - 정보 */}
+      <div className="px-4 py-3 grid grid-cols-2 gap-x-4 gap-y-1.5 text-sm border-b">
+        <InfoRow label="품목명" value={itemName} />
+        <InfoRow label="규격" value={spec} />
+        <InfoRow label="거래처" value={customerName} />
+        <InfoRow label="작업자" value={wi.worker || "-"} />
+        <InfoRow label="납기일" value={formatDate(wi.end_date)} />
+        <InfoRow label="설비" value={wi.equipment_name || wi.equipment_id || "-"} />
+      </div>
+
+      {/* 공정현황 */}
+      <div className="px-4 py-3 border-b">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs text-muted-foreground font-medium">공정현황</span>
+          {steps.length > 0 && (
+            <span className="text-xs text-muted-foreground">
+              완료 {completedSteps}/{steps.length}
+              {currentStep && (
+                <span>
+                  {" "}
+                  · 현재: <span className="text-blue-400">{currentStep.process_name}</span>
+                </span>
+              )}
+            </span>
+          )}
+        </div>
+        {steps.length > 0 ? (
+          <div className="flex gap-1 flex-wrap">
+            {steps.map((step, idx) => {
+              const isDone = step.status === "completed";
+              const isCurrent = !isDone && idx === completedSteps;
+              return (
+                <span
+                  key={`${step.wo_id}-${step.seq_no}-${idx}`}
+                  className={cn(
+                    "px-2 py-0.5 rounded text-xs font-medium transition-all",
+                    isDone && "bg-emerald-500/20 text-emerald-400",
+                    isCurrent && "bg-blue-500/20 text-blue-400 animate-pulse",
+                    !isDone && !isCurrent && "bg-muted text-muted-foreground"
+                  )}
+                >
+                  {step.process_name}
+                </span>
+              );
+            })}
+          </div>
+        ) : (
+          <span className="text-xs text-muted-foreground">공정 정보 없음</span>
+        )}
+      </div>
+
+      {/* 프로그레스바 */}
+      <div className="px-4 py-3">
+        <div className="flex items-center justify-between mb-1.5">
+          <span className="text-xs text-muted-foreground">
+            {completedQty} / {totalQty}
+          </span>
+          <span
+            className={cn(
+              "text-xs font-bold",
+              progressPercent >= 100
+                ? "text-emerald-500"
+                : progressPercent >= 50
+                  ? "text-blue-500"
+                  : "text-amber-500"
+            )}
+          >
+            {progressPercent}%
+          </span>
+        </div>
+        <div className="w-full h-2.5 bg-muted rounded-full overflow-hidden">
+          <div
+            className={cn("h-full rounded-full transition-all duration-500", barColor)}
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── 정보 행 ───────────────────────────────────────────────
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center gap-1.5 min-w-0">
+      <span className="text-muted-foreground shrink-0">{label}:</span>
+      <span className="text-foreground truncate">{value}</span>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/monitoring/quality/page.tsx b/frontend/app/(main)/COMPANY_7/monitoring/quality/page.tsx
new file mode 100644
index 00000000..b0135bbe
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/monitoring/quality/page.tsx
@@ -0,0 +1,512 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Search,
+  ClipboardCheck,
+} from "lucide-react";
+
+/* ───── 타입 ───── */
+interface ProcessRow {
+  id: number;
+  wo_id: number;
+  process_code: string;
+  process_name: string;
+  status: string;
+  plan_qty: number;
+  input_qty: number;
+  good_qty: number;
+  defect_qty: number;
+  started_at: string | null;
+  completed_at: string | null;
+  worker_name: string;
+}
+
+interface InspectionRow {
+  no: number;
+  inspectionNo: string;
+  inspectionType: string;
+  itemName: string;
+  spec: string;
+  inspectionQty: number;
+  goodQty: number;
+  defectQty: number;
+  defectRate: number;
+  result: "합격" | "불합격" | "대기";
+  inspectorName: string;
+  inspectedAt: string;
+  remark: string;
+}
+
+/* ───── 탭 정의 ───── */
+const TABS = [
+  { key: "all", label: "전체" },
+  { key: "process", label: "공정검사" },
+  { key: "incoming", label: "입고검사" },
+  { key: "shipping", label: "출하검사" },
+] as const;
+type TabKey = (typeof TABS)[number]["key"];
+
+/* ───── 유틸 ───── */
+const fmt = (n: number) => n.toLocaleString("ko-KR");
+const pct = (n: number) =>
+  `${n.toFixed(1)}%`;
+
+const badgeVariant = (
+  type: "result" | "type" | "defectRate",
+  value: string | number,
+) => {
+  if (type === "result") {
+    if (value === "합격")
+      return "bg-emerald-100 text-emerald-700 border-emerald-200";
+    if (value === "불합격") return "bg-red-100 text-red-700 border-red-200";
+    return "bg-amber-100 text-amber-700 border-amber-200";
+  }
+  if (type === "type") {
+    if (value === "공정검사")
+      return "bg-purple-100 text-purple-700 border-purple-200";
+    if (value === "입고검사") return "bg-blue-100 text-blue-700 border-blue-200";
+    return "bg-emerald-100 text-emerald-700 border-emerald-200";
+  }
+  // defectRate
+  const rate = typeof value === "number" ? value : parseFloat(String(value));
+  if (rate > 3) return "text-red-600 font-semibold";
+  if (rate >= 1) return "text-amber-600 font-semibold";
+  return "text-emerald-600";
+};
+
+/* ───── 컴포넌트 ───── */
+export default function QualityMonitoringPage() {
+  const [processData, setProcessData] = useState<ProcessRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [activeTab, setActiveTab] = useState<TabKey>("all");
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  /* ───── 시계 ───── */
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* ───── 데이터 조회 ───── */
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await apiClient.post(
+        "/table-management/tables/work_order_process/data",
+        { autoFilter: true },
+      );
+      const rows: ProcessRow[] = res.data?.data?.rows ?? res.data?.rows ?? [];
+      setProcessData(rows);
+    } catch (err) {
+      console.error("품질점검현황 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ───── 자동 갱신 ───── */
+  useEffect(() => {
+    if (autoRefresh) {
+      intervalRef.current = setInterval(fetchData, 30_000);
+    }
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [autoRefresh, fetchData]);
+
+  /* ───── 검사 행 변환 ───── */
+  const inspectionRows: InspectionRow[] = useMemo(() => {
+    const today = new Date().toISOString().slice(0, 10);
+
+    return processData
+      .filter((r) => {
+        // 금일 데이터만
+        const dt = r.completed_at || r.started_at || "";
+        return dt.slice(0, 10) === today;
+      })
+      .map((r, idx) => {
+        const inspQty = r.input_qty || r.plan_qty || 0;
+        const goodQty = r.good_qty ?? 0;
+        const defectQty = r.defect_qty ?? 0;
+        const defectRate = inspQty > 0 ? (defectQty / inspQty) * 100 : 0;
+        const result: InspectionRow["result"] =
+          r.status !== "completed"
+            ? "대기"
+            : defectQty > 0
+              ? "불합격"
+              : "합격";
+
+        return {
+          no: idx + 1,
+          inspectionNo: `QC-${String(r.id).padStart(8, "0").slice(0, 8)}`,
+          inspectionType: "공정검사",
+          itemName: r.process_name || "-",
+          spec: r.process_code || "-",
+          inspectionQty: inspQty,
+          goodQty,
+          defectQty,
+          defectRate,
+          result,
+          inspectorName: r.worker_name || "-",
+          inspectedAt: r.completed_at || r.started_at || "-",
+          remark: "",
+        };
+      });
+  }, [processData]);
+
+  /* ───── 탭 필터링 ───── */
+  const filteredRows = useMemo(() => {
+    if (activeTab === "all" || activeTab === "process") return inspectionRows;
+    // 입고/출하는 데이터 없음
+    return [];
+  }, [activeTab, inspectionRows]);
+
+  /* ───── 요약 통계 ───── */
+  const summary = useMemo(() => {
+    const total = inspectionRows.length;
+    const passed = inspectionRows.filter((r) => r.result === "합격").length;
+    const failed = inspectionRows.filter((r) => r.result === "불합격").length;
+    const pending = inspectionRows.filter((r) => r.result === "대기").length;
+    const passRate = total > 0 ? (passed / total) * 100 : 0;
+    return { total, passed, failed, pending, passRate };
+  }, [inspectionRows]);
+
+  /* ───── 요약 카드 정의 ───── */
+  const summaryCards = [
+    {
+      label: "금일 검사건수",
+      value: fmt(summary.total),
+      sub: "건",
+      color: "from-slate-500 to-slate-600",
+      textColor: "text-white",
+    },
+    {
+      label: "합격",
+      value: fmt(summary.passed),
+      sub: "건",
+      color: "from-emerald-500 to-emerald-600",
+      textColor: "text-white",
+    },
+    {
+      label: "불합격",
+      value: fmt(summary.failed),
+      sub: "건",
+      color: "from-red-500 to-red-600",
+      textColor: "text-white",
+    },
+    {
+      label: "검사대기",
+      value: fmt(summary.pending),
+      sub: "건",
+      color: "from-amber-500 to-amber-600",
+      textColor: "text-white",
+    },
+    {
+      label: "합격률",
+      value: pct(summary.passRate),
+      sub: "",
+      color: "from-purple-500 to-purple-600",
+      textColor: "text-white",
+    },
+  ];
+
+  /* ───── 렌더링 ───── */
+  return (
+    <div className="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
+      {/* ── 헤더 ── */}
+      <div className="flex items-center justify-between px-6 py-4 bg-white dark:bg-gray-800 border-b">
+        <div className="flex items-center gap-3">
+          <ClipboardCheck className="h-6 w-6 text-emerald-600" />
+          <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+            품질점검현황{" "}
+            <span className="text-emerald-600">모니터링</span>
+          </h1>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            <Clock className="h-4 w-4" />
+            <span className="font-mono">
+              {currentTime.toLocaleString("ko-KR", {
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit",
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+                hour12: false,
+              })}
+            </span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={loading}
+          >
+            {loading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+            <span className="ml-1">새로고침</span>
+          </Button>
+          <Button
+            variant={autoRefresh ? "default" : "outline"}
+            size="sm"
+            onClick={() => setAutoRefresh((p) => !p)}
+            className={cn(
+              autoRefresh &&
+                "bg-emerald-600 hover:bg-emerald-700 text-white",
+            )}
+          >
+            <Clock className="h-4 w-4 mr-1" />
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+        </div>
+      </div>
+
+      {/* ── 본문 ── */}
+      <div className="flex-1 overflow-auto p-6 space-y-6">
+        {/* 요약 카드 */}
+        <div className="grid grid-cols-5 gap-4">
+          {summaryCards.map((card) => (
+            <div
+              key={card.label}
+              className={cn(
+                "rounded-xl bg-gradient-to-br p-5 shadow-md",
+                card.color,
+              )}
+            >
+              <p className="text-sm font-medium text-white/80">
+                {card.label}
+              </p>
+              <p className={cn("mt-2 text-3xl font-bold", card.textColor)}>
+                {card.value}
+                {card.sub && (
+                  <span className="ml-1 text-base font-normal text-white/70">
+                    {card.sub}
+                  </span>
+                )}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* 검사유형 탭 */}
+        <div className="flex items-center gap-2">
+          {TABS.map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={cn(
+                "px-4 py-1.5 rounded-full text-sm font-medium transition-colors",
+                activeTab === tab.key
+                  ? "bg-emerald-600 text-white shadow"
+                  : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border",
+              )}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* 테이블 영역 */}
+        <div className="bg-white dark:bg-gray-800 rounded-xl shadow border overflow-hidden">
+          {/* 입고/출하 준비중 */}
+          {(activeTab === "incoming" || activeTab === "shipping") ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Search className="h-12 w-12 mb-4 opacity-40" />
+              <p className="text-lg font-medium">준비중</p>
+              <p className="text-sm mt-1">
+                {activeTab === "incoming" ? "입고검사" : "출하검사"} 데이터는
+                아직 지원되지 않습니다.
+              </p>
+            </div>
+          ) : loading && filteredRows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Loader2 className="h-10 w-10 animate-spin mb-4" />
+              <p>데이터를 불러오는 중...</p>
+            </div>
+          ) : filteredRows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Inbox className="h-12 w-12 mb-4 opacity-40" />
+              <p className="text-lg font-medium">금일 검사 데이터가 없습니다</p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow className="bg-gray-50 dark:bg-gray-700/50">
+                    <TableHead className="w-[50px] text-center">No</TableHead>
+                    <TableHead className="min-w-[120px]">검사번호</TableHead>
+                    <TableHead className="min-w-[90px] text-center">
+                      검사유형
+                    </TableHead>
+                    <TableHead className="min-w-[140px]">품목명</TableHead>
+                    <TableHead className="min-w-[100px]">규격</TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      검사수량
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      합격수량
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      불합격수량
+                    </TableHead>
+                    <TableHead className="min-w-[70px] text-right">
+                      불량율
+                    </TableHead>
+                    <TableHead className="min-w-[160px] text-center">
+                      검사결과
+                    </TableHead>
+                    <TableHead className="min-w-[70px] text-center">
+                      판정
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-center">
+                      검사자
+                    </TableHead>
+                    <TableHead className="min-w-[150px]">검사일시</TableHead>
+                    <TableHead className="min-w-[100px]">비고</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredRows.map((row) => {
+                    const goodPct =
+                      row.inspectionQty > 0
+                        ? (row.goodQty / row.inspectionQty) * 100
+                        : 0;
+                    const defectPct =
+                      row.inspectionQty > 0
+                        ? (row.defectQty / row.inspectionQty) * 100
+                        : 0;
+
+                    return (
+                      <TableRow
+                        key={row.no}
+                        className="hover:bg-gray-50 dark:hover:bg-gray-700/30"
+                      >
+                        <TableCell className="text-center text-sm text-gray-500">
+                          {row.no}
+                        </TableCell>
+                        <TableCell className="font-mono text-sm">
+                          {row.inspectionNo}
+                        </TableCell>
+                        <TableCell className="text-center">
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-xs",
+                              badgeVariant("type", row.inspectionType),
+                            )}
+                          >
+                            {row.inspectionType}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-sm font-medium">
+                          {row.itemName}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-500">
+                          {row.spec}
+                        </TableCell>
+                        <TableCell className="text-right text-sm">
+                          {fmt(row.inspectionQty)}
+                        </TableCell>
+                        <TableCell className="text-right text-sm text-emerald-600">
+                          {fmt(row.goodQty)}
+                        </TableCell>
+                        <TableCell className="text-right text-sm text-red-600">
+                          {fmt(row.defectQty)}
+                        </TableCell>
+                        <TableCell
+                          className={cn(
+                            "text-right text-sm",
+                            badgeVariant("defectRate", row.defectRate),
+                          )}
+                        >
+                          {pct(row.defectRate)}
+                        </TableCell>
+                        {/* 검사결과 프로그레스바 */}
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <div className="flex-1 h-3 bg-gray-100 dark:bg-gray-600 rounded-full overflow-hidden flex">
+                              <div
+                                className="h-full bg-emerald-500 transition-all"
+                                style={{ width: `${goodPct}%` }}
+                              />
+                              <div
+                                className="h-full bg-red-500 transition-all"
+                                style={{ width: `${defectPct}%` }}
+                              />
+                            </div>
+                            <span className="text-xs text-gray-400 whitespace-nowrap w-[42px] text-right">
+                              {pct(goodPct)}
+                            </span>
+                          </div>
+                        </TableCell>
+                        {/* 판정 배지 */}
+                        <TableCell className="text-center">
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-xs",
+                              badgeVariant("result", row.result),
+                            )}
+                          >
+                            {row.result}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-center text-sm">
+                          {row.inspectorName}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-500">
+                          {row.inspectedAt !== "-"
+                            ? new Date(row.inspectedAt).toLocaleString(
+                                "ko-KR",
+                                {
+                                  month: "2-digit",
+                                  day: "2-digit",
+                                  hour: "2-digit",
+                                  minute: "2-digit",
+                                  hour12: false,
+                                },
+                              )
+                            : "-"}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-400">
+                          {row.remark || "-"}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/outsourcing/subcontractor-item/page.tsx b/frontend/app/(main)/COMPANY_7/outsourcing/subcontractor-item/page.tsx
index 08c8f7bb..ad6622da 100644
--- a/frontend/app/(main)/COMPANY_7/outsourcing/subcontractor-item/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/outsourcing/subcontractor-item/page.tsx
@@ -9,7 +9,7 @@
  * 외주업체관리와 양방향 연동 (같은 subcontractor_item_mapping 테이블)
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -20,46 +20,35 @@ import {
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Plus, Save, Loader2, FileSpreadsheet, Download, Pencil, Package, Users, Search, Settings2 } from "lucide-react";
+import { Plus, Save, Loader2, FileSpreadsheet, Download, Pencil, Inbox, Search, RotateCcw, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const ITEM_TABLE = "item_info";
 const MAPPING_TABLE = "subcontractor_item_mapping";
 const SUBCONTRACTOR_TABLE = "subcontractor_mng";
 
-// 좌측: 품목 컬럼
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "item_number", label: "품번", width: "w-[110px]" },
-  { key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
-  { key: "size", label: "규격", width: "w-[90px]" },
-  { key: "unit", label: "단위", width: "w-[60px]" },
-  { key: "standard_price", label: "기준단가", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "selling_price", label: "판매가격", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
-  { key: "status", label: "상태", width: "w-[60px]" },
-];
+const formatNum = (v: any) => (v == null || v === "" ? "-" : Number(v).toLocaleString());
 
-// 우측: 외주업체 정보 컬럼
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "subcontractor_code", label: "외주업체코드", width: "w-[110px]" },
-  { key: "subcontractor_name", label: "외주업체명", minWidth: "min-w-[120px]" },
-  { key: "subcontractor_item_code", label: "외주품번", width: "w-[100px]" },
-  { key: "subcontractor_item_name", label: "외주품명", width: "w-[100px]" },
-  { key: "base_price", label: "기준가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "calculated_price", label: "단가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
+const GRID_COLUMNS_CONFIG = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "selling_price", label: "판매가격" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
 ];
-
 export default function SubcontractorItemPage() {
   const { user } = useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
@@ -68,9 +57,8 @@ export default function SubcontractorItemPage() {
   const [items, setItems] = useState<any[]>([]);
   const [itemLoading, setItemLoading] = useState(false);
   const [itemCount, setItemCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
+  const [inputKeyword, setInputKeyword] = useState("");
+  const [searchKeyword, setSearchKeyword] = useState("");
   const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
 
   // 우측: 외주업체
@@ -95,14 +83,8 @@ export default function SubcontractorItemPage() {
   // 엑셀
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
-
-  useEffect(() => {
-    const saved = loadTableSettings("subcontractor-item");
-    if (saved) applyTableSettings(saved);
-  }, []);
+  // 테이블 설정
+  const ts = useTableSettings("c16-subcontractor-item", ITEM_TABLE, GRID_COLUMNS_CONFIG);
 
   // 카테고리 로드
   useEffect(() => {
@@ -132,6 +114,24 @@ export default function SubcontractorItemPage() {
     return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
   };
 
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      item_number: { width: "w-[110px]" },
+      item_name: { minWidth: "min-w-[130px]", render: (v) => v || "-" },
+      size: { width: "w-[90px]", render: (v) => v || "-" },
+      unit: { width: "w-[60px]", render: (v) => v || "-" },
+      standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
+      selling_price: { width: "w-[90px]", align: "right", formatNumber: true },
+      currency_code: { width: "w-[50px]", render: (v) => v || "-" },
+      status: { width: "w-[60px]", render: (v) => v || "-" },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
   // 좌측: 품목 조회 (division이 "외주관리"인 품목만 필터링)
   const outsourcingDivisionCode = categoryOptions["division"]?.find(
     (o) => o.label === "외주관리" || o.label === "외주" || o.label.includes("외주")
@@ -140,11 +140,13 @@ export default function SubcontractorItemPage() {
   const fetchItems = useCallback(async () => {
     setItemLoading(true);
     try {
-      const filters: any[] = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
-      // division = 외주관리 필터 추가
+      const filters: any[] = [];
       if (outsourcingDivisionCode) {
         filters.push({ columnName: "division", operator: "equals", value: outsourcingDivisionCode });
       }
+      if (searchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: searchKeyword });
+      }
       const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
@@ -167,7 +169,7 @@ export default function SubcontractorItemPage() {
     } finally {
       setItemLoading(false);
     }
-  }, [searchFilters, categoryOptions, outsourcingDivisionCode]);
+  }, [searchKeyword, categoryOptions, outsourcingDivisionCode]);
 
   useEffect(() => { fetchItems(); }, [fetchItems]);
 
@@ -181,7 +183,6 @@ export default function SubcontractorItemPage() {
     const fetchSubcontractorItems = async () => {
       setSubcontractorLoading(true);
       try {
-        // subcontractor_item_mapping에서 해당 품목의 매핑 조회
         const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
           page: 1, size: 500,
           dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
@@ -189,7 +190,6 @@ export default function SubcontractorItemPage() {
         });
         const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
 
-        // subcontractor_id → subcontractor_mng 조인 (외주업체명)
         const subIds = [...new Set(mappings.map((m: any) => m.subcontractor_id).filter(Boolean))];
         let subMap: Record<string, any> = {};
         if (subIds.length > 0) {
@@ -231,7 +231,6 @@ export default function SubcontractorItemPage() {
         autoFilter: true,
       });
       const all = res.data?.data?.data || res.data?.data?.rows || [];
-      // 이미 등록된 외주업체 제외
       const existing = new Set(subcontractorItems.map((s: any) => s.subcontractor_id || s.subcontractor_code));
       setSubSearchResults(all.filter((s: any) => !existing.has(s.subcontractor_code)));
     } catch { /* skip */ } finally { setSubSearchLoading(false); }
@@ -244,6 +243,7 @@ export default function SubcontractorItemPage() {
     try {
       for (const sub of selected) {
         await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+          id: crypto.randomUUID(),
           subcontractor_id: sub.subcontractor_code,
           item_id: selectedItem.item_number,
         });
@@ -251,7 +251,6 @@ export default function SubcontractorItemPage() {
       toast.success(`${selected.length}개 외주업체가 추가되었습니다.`);
       setSubCheckedIds(new Set());
       setSubSelectOpen(false);
-      // 우측 새로고침
       const sid = selectedItemId;
       setSelectedItemId(null);
       setTimeout(() => setSelectedItemId(sid), 50);
@@ -300,56 +299,74 @@ export default function SubcontractorItemPage() {
     toast.success("다운로드 완료");
   };
 
+  const handleSearch = () => setSearchKeyword(inputKeyword);
+
   return (
     <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
-      <DynamicSearchFilter
-        tableName={ITEM_TABLE}
-        filterId="subcontractor-item"
-        onFilterChange={setSearchFilters}
-        dataCount={itemCount}
-        externalFilterConfig={filterConfig}
-        extraActions={
-          <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
-              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
-            </Button>
-          </div>
-        }
-      />
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>외주관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">외주품목정보</span>
+      </div>
+
+      {/* 검색 바 */}
+      <div className="flex items-center gap-2 px-4 py-3 bg-card border rounded-lg shrink-0">
+        <span className="text-[11px] font-semibold text-muted-foreground whitespace-nowrap">품명</span>
+        <Input
+          className="h-9 w-[200px]"
+          placeholder="품명 검색"
+          value={inputKeyword}
+          onChange={(e) => setInputKeyword(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+        />
+        <Button variant="outline" size="sm" className="h-9" onClick={() => { setInputKeyword(""); setSearchKeyword(""); }}>
+          <RotateCcw className="w-3.5 h-3.5 mr-1" /> 초기화
+        </Button>
+        <Button size="sm" className="h-9" onClick={handleSearch}>
+          <Search className="w-3.5 h-3.5 mr-1" /> 조회
+        </Button>
+        <div className="ml-auto flex gap-1.5">
+          <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
 
       {/* 분할 패널 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
         <ResizablePanelGroup direction="horizontal">
           {/* 좌측: 외주품목 목록 */}
           <ResizablePanel defaultSize={55} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Package className="w-4 h-4" /> 외주품목 목록
-                  <Badge variant="secondary" className="font-normal">{itemCount}건</Badge>
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">외주품목 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{itemCount}건</span>
                 </div>
-                <div className="flex gap-1.5">
+                <div className="flex items-center gap-1.5">
                   <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
                     <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
                   </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid
-                gridId="subcontractor-item-left"
-                columns={LEFT_COLUMNS}
-                data={items}
+              <EDataTable
+                columns={mainTableColumns}
+                data={ts.groupData(items)}
                 loading={itemLoading}
+                emptyMessage="등록된 외주품목이 없어요"
                 selectedId={selectedItemId}
-                onSelect={setSelectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
                 onRowDoubleClick={() => openEditItem()}
-                emptyMessage="등록된 외주품목이 없습니다"
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-subcontractor-item-main"
               />
             </div>
           </ResizablePanel>
@@ -359,9 +376,9 @@ export default function SubcontractorItemPage() {
           {/* 우측: 외주업체 정보 */}
           <ResizablePanel defaultSize={45} minSize={25}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Users className="w-4 h-4" /> 외주업체 정보
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">외주업체 정보</h3>
                   {selectedItem && <Badge variant="outline" className="font-normal">{selectedItem.item_name}</Badge>}
                 </div>
                 <Button variant="outline" size="sm" disabled={!selectedItemId}
@@ -370,18 +387,51 @@ export default function SubcontractorItemPage() {
                 </Button>
               </div>
               {!selectedItemId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
-                  좌측에서 품목을 선택하세요
+                <div className="flex-1 flex flex-col items-center justify-center gap-3 m-3 border-2 border-dashed rounded-lg text-center">
+                  <Inbox className="w-12 h-12 text-muted-foreground/40" />
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">품목을 선택해주세요</p>
+                    <p className="text-xs text-muted-foreground mt-1">좌측에서 품목을 선택하면 외주업체 정보가 표시돼요</p>
+                  </div>
+                </div>
+              ) : subcontractorLoading ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : subcontractorItems.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                  <Inbox className="w-8 h-8 mb-2 opacity-40" />
+                  <p className="text-sm">등록된 외주업체가 없어요</p>
                 </div>
               ) : (
-                <DataGrid
-                  gridId="subcontractor-item-right"
-                  columns={RIGHT_COLUMNS}
-                  data={subcontractorItems}
-                  loading={subcontractorLoading}
-                  showRowNumber={false}
-                  emptyMessage="등록된 외주업체가 없습니다"
-                />
+                <div className="flex-1 overflow-auto">
+                  <Table noWrapper>
+                    <thead className="sticky top-0 z-10 bg-card">
+                      <TableRow>
+                        <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
+                        <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
+                        <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품번</TableHead>
+                        <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품명</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                        <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                      </TableRow>
+                    </thead>
+                    <TableBody>
+                      {subcontractorItems.map((item, idx) => (
+                        <TableRow key={item.id || idx}>
+                          <TableCell className="text-[13px] font-mono">{item.subcontractor_code || "-"}</TableCell>
+                          <TableCell className="text-sm">{item.subcontractor_name || "-"}</TableCell>
+                          <TableCell className="text-[13px]">{item.subcontractor_item_code || "-"}</TableCell>
+                          <TableCell className="text-[13px]">{item.subcontractor_item_name || "-"}</TableCell>
+                          <TableCell className="text-[13px] text-right font-mono">{formatNum(item.base_price)}</TableCell>
+                          <TableCell className="text-[13px] text-right font-mono">{formatNum(item.calculated_price)}</TableCell>
+                          <TableCell className="text-[13px]">{item.currency_code || "-"}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
               )}
             </div>
           </ResizablePanel>
@@ -389,68 +439,64 @@ export default function SubcontractorItemPage() {
       </div>
 
       {/* 품목 수정 모달 */}
-      <FullscreenDialog
-        open={editItemOpen}
-        onOpenChange={setEditItemOpen}
-        title="외주품목 수정"
-        description={`${editItemForm.item_number || ""} — ${editItemForm.item_name || ""}`}
-        defaultMaxWidth="max-w-2xl"
-        footer={
-          <>
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>외주품목 수정</DialogTitle>
+            <DialogDescription>{editItemForm.item_number || ""} — {editItemForm.item_name || ""}</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-sm text-muted-foreground">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+            <div className="col-span-2 border-t my-2" />
+            <div className="space-y-1.5">
+              <Label className="text-sm">판매가격</Label>
+              <Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
+                placeholder="판매가격" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">기준단가</Label>
+              <Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">통화</Label>
+              <Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
             <Button onClick={handleEditSave} disabled={saving}>
               {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
             </Button>
-          </>
-        }
-      >
-        <div className="grid grid-cols-2 gap-4 py-4">
-          {[
-            { key: "item_number", label: "품목코드" },
-            { key: "item_name", label: "품명" },
-            { key: "size", label: "규격" },
-            { key: "unit", label: "단위" },
-            { key: "material", label: "재질" },
-            { key: "status", label: "상태" },
-          ].map((f) => (
-            <div key={f.key} className="space-y-1.5">
-              <Label className="text-sm text-muted-foreground">{f.label}</Label>
-              <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
-            </div>
-          ))}
-
-          <div className="col-span-2 border-t my-2" />
-
-          <div className="space-y-1.5">
-            <Label className="text-sm">판매가격</Label>
-            <Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
-              placeholder="판매가격" className="h-9" />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-sm">기준단가</Label>
-            <Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
-              placeholder="기준단가" className="h-9" />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-sm">통화</Label>
-            <Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
-              <SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
-              <SelectContent>
-                {(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </FullscreenDialog>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 외주업체 추가 모달 */}
       <Dialog open={subSelectOpen} onOpenChange={setSubSelectOpen}>
-        <DialogContent className="max-w-2xl max-h-[70vh]">
+        <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden">
           <DialogHeader>
             <DialogTitle>외주업체 선택</DialogTitle>
-            <DialogDescription>품목에 추가할 외주업체를 선택하세요.</DialogDescription>
+            <DialogDescription>품목에 추가할 외주업체를 선택해주세요.</DialogDescription>
           </DialogHeader>
-          <div className="flex gap-2 mb-3">
+          <div className="flex gap-2">
             <Input placeholder="외주업체명 검색" value={subSearchKeyword}
               onChange={(e) => setSubSearchKeyword(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && searchSubcontractors()}
@@ -459,9 +505,9 @@ export default function SubcontractorItemPage() {
               {subSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
             </Button>
           </div>
-          <div className="overflow-auto max-h-[350px] border rounded-lg">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
+          <div className="flex-1 overflow-auto border rounded-lg">
+            <Table noWrapper>
+              <thead className="sticky top-0 z-10 bg-card">
                 <TableRow>
                   <TableHead className="w-[40px] text-center">
                     <input type="checkbox"
@@ -471,15 +517,15 @@ export default function SubcontractorItemPage() {
                         else setSubCheckedIds(new Set());
                       }} />
                   </TableHead>
-                  <TableHead className="w-[110px]">외주업체코드</TableHead>
-                  <TableHead className="min-w-[130px]">외주업체명</TableHead>
-                  <TableHead className="w-[80px]">거래유형</TableHead>
-                  <TableHead className="w-[80px]">담당자</TableHead>
+                  <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
+                  <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
+                  <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래유형</TableHead>
+                  <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
                 </TableRow>
-              </TableHeader>
+              </thead>
               <TableBody>
                 {subSearchResults.length === 0 ? (
-                  <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
+                  <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없어요</TableCell></TableRow>
                 ) : subSearchResults.map((s) => (
                   <TableRow key={s.id} className={cn("cursor-pointer", subCheckedIds.has(s.id) && "bg-primary/5")}
                     onClick={() => setSubCheckedIds((prev) => {
@@ -488,10 +534,10 @@ export default function SubcontractorItemPage() {
                       return next;
                     })}>
                     <TableCell className="text-center"><input type="checkbox" checked={subCheckedIds.has(s.id)} readOnly /></TableCell>
-                    <TableCell className="text-xs">{s.subcontractor_code}</TableCell>
+                    <TableCell className="text-[13px]">{s.subcontractor_code}</TableCell>
                     <TableCell className="text-sm">{s.subcontractor_name}</TableCell>
-                    <TableCell className="text-xs">{s.division}</TableCell>
-                    <TableCell className="text-xs">{s.contact_person}</TableCell>
+                    <TableCell className="text-[13px]">{s.division}</TableCell>
+                    <TableCell className="text-[13px]">{s.contact_person}</TableCell>
                   </TableRow>
                 ))}
               </TableBody>
@@ -520,12 +566,14 @@ export default function SubcontractorItemPage() {
         onSuccess={() => fetchItems()}
       />
 
+      {/* 테이블 설정 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={ITEM_TABLE}
-        settingsId="subcontractor-item"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
 
       {ConfirmDialogComponent}
diff --git a/frontend/app/(main)/COMPANY_7/outsourcing/subcontractor/page.tsx b/frontend/app/(main)/COMPANY_7/outsourcing/subcontractor/page.tsx
index eadb3a2a..934c03c5 100644
--- a/frontend/app/(main)/COMPANY_7/outsourcing/subcontractor/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/outsourcing/subcontractor/page.tsx
@@ -1,103 +1,95 @@
 "use client";
 
-/**
- * 외주업체관리 — 하드코딩 페이지
- *
- * 좌측: 외주업체 목록 (subcontractor_mng)
- * 우측: 선택한 외주업체의 품목별 단가 정보 (subcontractor_item_prices, entity join → item_info)
- *
- * 모달:
- * - 외주업체 등록/수정 (subcontractor_mng)
- * - 품목 추가 (item_info 검색 → subcontractor_item_mapping + subcontractor_item_prices)
- */
-
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
-import {
-  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
-} from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import {
   Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
-  Wrench, Package, Search, X, Settings2,
+  Wrench, Package, Search, X, RefreshCw, Settings2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
-import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
 import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { validateField, validateForm, formatField } from "@/lib/utils/validation";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const SUBCONTRACTOR_TABLE = "subcontractor_mng";
 const MAPPING_TABLE = "subcontractor_item_mapping";
 const PRICE_TABLE = "subcontractor_item_prices";
 
-// 좌측: 외주업체 목록 컬럼
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "subcontractor_code", label: "외주업체코드", width: "w-[110px]" },
-  { key: "subcontractor_name", label: "외주업체명", minWidth: "min-w-[120px]" },
-  { key: "division", label: "거래유형", width: "w-[80px]" },
-  { key: "contact_person", label: "담당자", width: "w-[80px]" },
-  { key: "contact_phone", label: "전화번호", width: "w-[110px]" },
-  { key: "business_number", label: "사업자번호", width: "w-[110px]" },
-  { key: "email", label: "이메일", width: "w-[130px]" },
-  { key: "status", label: "상태", width: "w-[60px]" },
+const GRID_COLUMNS_CONFIG = [
+  { key: "subcontractor_code", label: "외주사코드" },
+  { key: "subcontractor_name", label: "외주사명" },
+  { key: "division", label: "업체 유형" },
+  { key: "status", label: "상태" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "담당자 전화번호" },
+  { key: "contact_email", label: "담당자 이메일" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "phone", label: "전화번호" },
+  { key: "fax", label: "팩스" },
+  { key: "representative", label: "대표자명" },
+  { key: "grade", label: "등급" },
+  { key: "process_type", label: "공정 유형" },
+  { key: "payment_terms", label: "결제 조건" },
+  { key: "remarks", label: "비고" },
+  { key: "writer", label: "작성자" },
+  { key: "created_date", label: "생성일시" },
+  { key: "updated_date", label: "수정일시" },
 ];
-
-// 우측: 품목별 단가 컬럼
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "item_number", label: "품목코드", width: "w-[100px]" },
-  { key: "item_name", label: "품명", minWidth: "min-w-[100px]" },
-  { key: "subcontractor_item_code", label: "외주품번", width: "w-[100px]" },
-  { key: "subcontractor_item_name", label: "외주품명", width: "w-[100px]" },
-  { key: "base_price_type", label: "기준유형", width: "w-[80px]" },
-  { key: "base_price", label: "기준가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "discount_type", label: "할인유형", width: "w-[70px]" },
-  { key: "discount_value", label: "할인값", width: "w-[60px]", align: "right" },
-  { key: "calculated_price", label: "단가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
-];
-
 export default function SubcontractorManagementPage() {
-  const { user } = useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
 
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
   // 좌측: 외주업체 목록
   const [subcontractors, setSubcontractors] = useState<any[]>([]);
   const [subcontractorLoading, setSubcontractorLoading] = useState(false);
   const [subcontractorCount, setSubcontractorCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
   const [selectedSubcontractorId, setSelectedSubcontractorId] = useState<string | null>(null);
 
   // 우측: 품목 단가
   const [priceItems, setPriceItems] = useState<any[]>([]);
   const [priceLoading, setPriceLoading] = useState(false);
 
-  // 품목 편집 데이터 (더블클릭 시 — 상세 입력 모달 재활용)
+  // 품목 편집 데이터
   const [editItemData, setEditItemData] = useState<any>(null);
 
-  // 모달
+  // 외주업체 등록/수정 모달
   const [subcontractorModalOpen, setSubcontractorModalOpen] = useState(false);
   const [subcontractorEditMode, setSubcontractorEditMode] = useState(false);
   const [subcontractorForm, setSubcontractorForm] = useState<Record<string, any>>({});
   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
   const [saving, setSaving] = useState(false);
 
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
   // 품목 추가 모달 (1단계: 검색/선택)
   const [itemSelectOpen, setItemSelectOpen] = useState(false);
   const [itemSearchKeyword, setItemSearchKeyword] = useState("");
@@ -105,19 +97,18 @@ export default function SubcontractorManagementPage() {
   const [itemSearchLoading, setItemSearchLoading] = useState(false);
   const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
 
-  // 품목 상세 입력 모달 (2단계: 외주 품번/품명 + 단가)
+  // 품목 상세 입력 모달 (2단계)
   const [itemDetailOpen, setItemDetailOpen] = useState(false);
   const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
-  // 품목별 외주 품번/품명 (다중)
-  const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; subcontractor_item_code: string; subcontractor_item_name: string }>>>({});
-  // 품목별 단가 목록
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{
+    _id: string; subcontractor_item_code: string; subcontractor_item_name: string;
+  }>>>({});
   const [itemPrices, setItemPrices] = useState<Record<string, Array<{
     _id: string; start_date: string; end_date: string; currency_code: string;
     base_price_type: string; base_price: string; discount_type: string;
     discount_value: string; rounding_type: string; rounding_unit_value: string;
     calculated_price: string;
   }>>>({});
-  // 단가 카테고리 옵션
   const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
   // 엑셀
@@ -125,6 +116,10 @@ export default function SubcontractorManagementPage() {
   const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
   const [excelDetecting, setExcelDetecting] = useState(false);
 
+  // 테이블 설정
+  const DEFAULT_VISIBLE_KEYS = ["subcontractor_code", "subcontractor_name", "division", "status", "contact_person", "contact_phone"];
+  const ts = useTableSettings("c16-subcontractor-v2", SUBCONTRACTOR_TABLE, GRID_COLUMNS_CONFIG, DEFAULT_VISIBLE_KEYS);
+
   // 카테고리
   const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
@@ -148,7 +143,6 @@ export default function SubcontractorManagementPage() {
       }
       setCategoryOptions(optMap);
 
-      // 단가 카테고리
       const priceOpts: Record<string, { code: string; label: string }[]> = {};
       for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
         try {
@@ -161,41 +155,57 @@ export default function SubcontractorManagementPage() {
     load();
   }, []);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
 
-  useEffect(() => {
-    const saved = loadTableSettings("subcontractor-mng");
-    if (saved) applyTableSettings(saved);
-  }, []);
+  // 셀 렌더링 헬퍼
+  const renderCellValue = (row: any, key: string) => {
+    const val = key === "division" ? (row.division_label || row.division)
+      : key === "status" ? (row.status_label || row.status)
+      : row[key];
+    if (!val) return "-";
+    if (key === "subcontractor_code") return <span className="text-primary">{val}</span>;
+    if (key === "division") return <Badge variant="secondary" className="text-[10px] px-1.5 py-0">{val}</Badge>;
+    if (key === "status") return <Badge variant="outline" className="text-[10px] px-1.5 py-0">{val}</Badge>;
+    if (key === "subcontractor_name") return <span className="font-medium">{val}</span>;
+    return val;
+  };
+
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      render: (value: any, row: any) => renderCellValue(row, col.key),
+    }));
+  }, [ts.visibleColumns, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // 외주업체 목록 조회
   const fetchSubcontractors = useCallback(async () => {
     setSubcontractorLoading(true);
     try {
       const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+
       const res = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
       });
       const raw = res.data?.data?.data || res.data?.data?.rows || [];
-      // 카테고리 코드→라벨 변환
       const resolve = (col: string, code: string) => {
         if (!code) return "";
         return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
       };
       const data = raw.map((r: any) => ({
         ...r,
-        division: resolve("division", r.division),
-        status: resolve("status", r.status),
+        division_label: resolve("division", r.division),
+        status_label: resolve("status", r.status),
       }));
       setSubcontractors(data);
       setSubcontractorCount(res.data?.data?.total || raw.length);
     } catch (err) {
-      console.error("외주업체 조회 실패:", err);
-      toast.error("외주업체 목록을 불러오는데 실패했습니다.");
+      toast.error("외주업체 목록을 불러오지 못했어요");
     } finally {
       setSubcontractorLoading(false);
     }
@@ -203,15 +213,15 @@ export default function SubcontractorManagementPage() {
 
   useEffect(() => { fetchSubcontractors(); }, [fetchSubcontractors]);
 
-  // 선택된 외주업체의 품목 단가 조회
+  // 선택된 외주업체
   const selectedSubcontractor = subcontractors.find((c) => c.id === selectedSubcontractorId);
 
+  // 선택된 외주업체의 품목 단가 조회
   useEffect(() => {
     if (!selectedSubcontractor?.subcontractor_code) { setPriceItems([]); return; }
     const fetchItems = async () => {
       setPriceLoading(true);
       try {
-        // 1. subcontractor_item_mapping 조회 (품목 매핑 — 기본 데이터)
         const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
           page: 1, size: 500,
           dataFilter: { enabled: true, filters: [
@@ -221,7 +231,6 @@ export default function SubcontractorManagementPage() {
         });
         const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
 
-        // 2. item_id → item_info 조인 (품명 등)
         const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
         let itemMap: Record<string, any> = {};
         if (itemIds.length > 0) {
@@ -237,7 +246,6 @@ export default function SubcontractorManagementPage() {
           } catch { /* skip */ }
         }
 
-        // 3. subcontractor_item_prices 조회 (단가 — 있으면 보강)
         let priceMap: Record<string, any> = {};
         if (mappings.length > 0) {
           try {
@@ -249,7 +257,6 @@ export default function SubcontractorManagementPage() {
               autoFilter: true,
             });
             const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
-            // item_id별 최신 단가 매핑
             for (const p of prices) {
               const key = p.item_id;
               if (!priceMap[key] || (p.start_date && (!priceMap[key].start_date || p.start_date > priceMap[key].start_date))) {
@@ -259,7 +266,6 @@ export default function SubcontractorManagementPage() {
           } catch { /* skip */ }
         }
 
-        // 4. 매핑 + 품목정보 + 단가 병합 + 카테고리 코드→라벨
         const priceResolve = (col: string, code: string) => {
           if (!code) return "";
           return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
@@ -281,25 +287,38 @@ export default function SubcontractorManagementPage() {
           };
         }));
       } catch (err) {
-        console.error("품목 조회 실패:", err);
+        // 품목 조회 실패 시 무시
       } finally {
         setPriceLoading(false);
       }
     };
     fetchItems();
-  }, [selectedSubcontractor?.subcontractor_code]);
+  }, [selectedSubcontractor?.subcontractor_code, priceCategoryOptions]);
 
-  const getCategoryLabel = (col: string, code: string) => {
-    if (!code) return "";
-    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
-  };
-
-  // 외주업체 등록 모달
-  const openSubcontractorRegister = () => {
+  // 외주업체 등록 모달 열기
+  const openSubcontractorRegister = async () => {
     setSubcontractorForm({});
     setFormErrors({});
     setSubcontractorEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
     setSubcontractorModalOpen(true);
+
+    // 채번 규칙 조회 (subcontractor_mng.subcontractor_code)
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/subcontractor_mng/subcontractor_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시
+    }
   };
 
   const openSubcontractorEdit = () => {
@@ -310,7 +329,6 @@ export default function SubcontractorManagementPage() {
     setSubcontractorModalOpen(true);
   };
 
-  // 폼 필드 변경 시 자동 포맷팅 + 실시간 검증
   const handleFormChange = (field: string, value: string) => {
     const formatted = formatField(field, value);
     setSubcontractorForm((prev) => ({ ...prev, [field]: formatted }));
@@ -323,9 +341,8 @@ export default function SubcontractorManagementPage() {
   };
 
   const handleSubcontractorSave = async () => {
-    if (!subcontractorForm.subcontractor_name) { toast.error("외주업체명은 필수입니다."); return; }
-    if (!subcontractorForm.status) { toast.error("상태는 필수입니다."); return; }
-    // 폼 검증
+    if (!subcontractorForm.subcontractor_name) { toast.error("외주업체명은 필수예요"); return; }
+    if (!subcontractorForm.status) { toast.error("상태는 필수예요"); return; }
     const errors = validateForm(subcontractorForm, ["contact_phone", "email", "business_number"]);
     setFormErrors(errors);
     if (Object.keys(errors).length > 0) {
@@ -334,20 +351,32 @@ export default function SubcontractorManagementPage() {
     }
     setSaving(true);
     try {
-      const { id, created_date, updated_date, writer, company_code, ...fields } = subcontractorForm;
+      const { id, created_date, updated_date, writer, company_code, division_label, status_label, ...fields } = subcontractorForm;
       if (subcontractorEditMode && id) {
         await apiClient.put(`/table-management/tables/${SUBCONTRACTOR_TABLE}/edit`, {
           originalData: { id }, updatedData: fields,
         });
-        toast.success("수정되었습니다.");
+        toast.success("수정되었어요");
       } else {
-        await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/add`, fields);
-        toast.success("등록되었습니다.");
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+        const saveFields = allocatedCode ? { ...fields, subcontractor_code: allocatedCode } : fields;
+        await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/add`, { id: crypto.randomUUID(), ...saveFields });
+        toast.success("등록되었어요");
       }
       setSubcontractorModalOpen(false);
       fetchSubcontractors();
     } catch (err: any) {
-      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+      toast.error(err.response?.data?.message || "저장에 실패했어요");
     } finally {
       setSaving(false);
     }
@@ -356,8 +385,8 @@ export default function SubcontractorManagementPage() {
   // 외주업체 삭제
   const handleSubcontractorDelete = async () => {
     if (!selectedSubcontractorId) return;
-    const ok = await confirm("외주업체를 삭제하시겠습니까?", {
-      description: "관련된 품목 매핑, 단가 정보도 함께 삭제됩니다.",
+    const ok = await confirm("외주업체를 삭제할까요?", {
+      description: "관련된 품목 매핑, 단가 정보도 함께 삭제돼요",
       variant: "destructive", confirmText: "삭제",
     });
     if (!ok) return;
@@ -365,10 +394,10 @@ export default function SubcontractorManagementPage() {
       await apiClient.delete(`/table-management/tables/${SUBCONTRACTOR_TABLE}/delete`, {
         data: [{ id: selectedSubcontractorId }],
       });
-      toast.success("삭제되었습니다.");
+      toast.success("삭제되었어요");
       setSelectedSubcontractorId(null);
       fetchSubcontractors();
-    } catch { toast.error("삭제에 실패했습니다."); }
+    } catch { toast.error("삭제에 실패했어요"); }
   };
 
   // 품목 검색
@@ -378,23 +407,26 @@ export default function SubcontractorManagementPage() {
       const filters: any[] = [];
       if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
-        page: 1, size: 50,
+        page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
       });
       const allItems = res.data?.data?.data || res.data?.data?.rows || [];
-      // 이미 등록된 품목 제외
       const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
-      setItemSearchResults(allItems.filter((item: any) => !existingItemIds.has(item.item_number) && !existingItemIds.has(item.id)));
+      const OUTSOURCING_CODE = "CAT_MMDJB7R4_TO3T";
+      setItemSearchResults(allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        const div = item.division || "";
+        return div.includes(OUTSOURCING_CODE) || div.includes("외주");
+      }));
     } catch { /* skip */ } finally { setItemSearchLoading(false); }
   };
 
   // 품목 선택 완료 → 상세 입력 모달로 전환
   const goToItemDetail = () => {
     const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
-    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+    if (selected.length === 0) { toast.error("품목을 선택해주세요"); return; }
     setSelectedItemsForDetail(selected);
-    // 초기 매핑/단가 데이터 세팅
     const mappings: typeof itemMappings = {};
     const prices: typeof itemPrices = {};
     for (const item of selected) {
@@ -410,11 +442,11 @@ export default function SubcontractorManagementPage() {
     }
     setItemMappings(mappings);
     setItemPrices(prices);
+    setEditItemData(null);
     setItemSelectOpen(false);
     setItemDetailOpen(true);
   };
 
-  // 외주 품번/품명 행 추가
   const addMappingRow = (itemKey: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -422,7 +454,6 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 외주 품번/품명 행 삭제
   const removeMappingRow = (itemKey: string, rowId: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -430,7 +461,6 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 외주 품번/품명 행 수정
   const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -438,7 +468,6 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 단가 행 추가
   const addPriceRow = (itemKey: string) => {
     setItemPrices((prev) => ({
       ...prev,
@@ -452,7 +481,6 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 단가 행 삭제
   const removePriceRow = (itemKey: string, rowId: string) => {
     setItemPrices((prev) => ({
       ...prev,
@@ -460,21 +488,19 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 단가 행 값 변경
   const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
     setItemPrices((prev) => ({
       ...prev,
       [itemKey]: (prev[itemKey] || []).map((r) => {
         if (r._id !== rowId) return r;
         const updated = { ...r, [field]: value };
-        // 단가 자동 계산: base_price - discount
         if (["base_price", "discount_type", "discount_value"].includes(field)) {
           const bp = Number(updated.base_price) || 0;
           const dv = Number(updated.discount_value) || 0;
           const dt = updated.discount_type;
           let calc = bp;
-          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100); // 할인율
-          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv; // 할인금액
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
           updated.calculated_price = String(Math.round(calc));
         }
         return updated;
@@ -482,12 +508,9 @@ export default function SubcontractorManagementPage() {
     }));
   };
 
-  // 품목 상세 저장 (mapping + prices 일괄)
-  // 우측 품목 편집 열기 — 등록과 동일한 상세 입력 모달을 재활용
+  // 우측 품목 편집 열기 — 해당 item_number의 모든 매핑+단가를 로드
   const openEditItem = async (row: any) => {
     const itemKey = row.item_number || row.item_id;
-
-    // item_info에서 품목 정보 조회
     let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
     try {
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
@@ -499,29 +522,50 @@ export default function SubcontractorManagementPage() {
       if (found) itemInfo = found;
     } catch { /* skip */ }
 
-    // 기존 매핑 데이터 → 외주 품번/품명
-    const mappingRows = [{
-      _id: `m_existing_${row.id}`,
-      subcontractor_item_code: row.subcontractor_item_code || "",
-      subcontractor_item_name: row.subcontractor_item_name || "",
-    }].filter((m) => m.subcontractor_item_code || m.subcontractor_item_name);
+    // 같은 item_number를 가진 모든 priceItems 행에서 매핑 정보 추출
+    const allRowsForItem = priceItems.filter((p: any) => (p.item_number || p.item_id) === itemKey);
+    const allMappingIds = allRowsForItem.map((r: any) => r.id).filter(Boolean);
 
-    // 기존 단가 데이터
-    const priceRows = [{
-      _id: `p_existing_${row.id}`,
-      start_date: row.start_date || "",
-      end_date: row.end_date || "",
-      currency_code: row.currency_code || "CAT_MLAMDKVN_PZJI",
-      base_price_type: row.base_price_type || "CAT_MLAMFGFT_4RZW",
-      base_price: row.base_price ? String(row.base_price) : "",
-      discount_type: row.discount_type || "",
-      discount_value: row.discount_value ? String(row.discount_value) : "",
-      rounding_type: row.rounding_type || "",
-      rounding_unit_value: row.rounding_unit_value || "",
-      calculated_price: row.calculated_price ? String(row.calculated_price) : "",
-    }].filter((p) => p.base_price || p.start_date);
+    const mappingRows = allRowsForItem
+      .filter((r: any) => r.subcontractor_item_code || r.subcontractor_item_name)
+      .map((r: any) => ({
+        _id: `m_existing_${r.id}`,
+        subcontractor_item_code: r.subcontractor_item_code || "",
+        subcontractor_item_name: r.subcontractor_item_name || "",
+      }));
+
+    // 서버에서 이 item+subcontractor의 모든 단가를 raw 코드로 가져오기
+    let priceRows: Array<{
+      _id: string; start_date: string; end_date: string; currency_code: string;
+      base_price_type: string; base_price: string; discount_type: string;
+      discount_value: string; rounding_type: string; rounding_unit_value: string;
+      calculated_price: string;
+    }> = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor!.subcontractor_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]},
+        autoFilter: true,
+      });
+      const rawPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = rawPrices.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date || "",
+        end_date: p.end_date || "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
 
-    // 빈 단가 행이 없으면 하나 추가
     if (priceRows.length === 0) {
       priceRows.push({
         _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
@@ -533,7 +577,8 @@ export default function SubcontractorManagementPage() {
     setSelectedItemsForDetail([itemInfo]);
     setItemMappings({ [itemKey]: mappingRows });
     setItemPrices({ [itemKey]: priceRows });
-    setEditItemData(row); // 편집 모드 표시용
+    // editItemData에 원본 매핑 ID 목록 저장 (삭제 시 사용)
+    setEditItemData({ ...row, _allMappingIds: allMappingIds });
     setItemDetailOpen(true);
   };
 
@@ -547,25 +592,21 @@ export default function SubcontractorManagementPage() {
         const mappingRows = itemMappings[itemKey] || [];
 
         if (isEditingExisting && editItemData?.id) {
-          // 편집 모드: 기존 mapping UPDATE
-          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
-            originalData: { id: editItemData.id },
-            updatedData: {
-              subcontractor_item_code: mappingRows[0]?.subcontractor_item_code || "",
-              subcontractor_item_name: mappingRows[0]?.subcontractor_item_name || "",
-              base_price: null, // prices 테이블로 이동
-              discount_type: null,
-              discount_value: null,
-              calculated_price: null,
-            },
-          });
+          // 1) 기존 매핑 모두 삭제
+          const allMappingIds: string[] = editItemData._allMappingIds || [editItemData.id];
+          if (allMappingIds.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: allMappingIds.map((mid: string) => ({ id: mid })),
+            });
+          }
 
-          // 기존 prices 삭제 후 재등록
+          // 2) 기존 단가 모두 삭제 (subcontractor_id + item_id 기준)
           try {
             const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
-              page: 1, size: 100,
+              page: 1, size: 500,
               dataFilter: { enabled: true, filters: [
-                { columnName: "mapping_id", operator: "equals", value: editItemData.id },
+                { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor.subcontractor_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
               ]}, autoFilter: true,
             });
             const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
@@ -576,13 +617,39 @@ export default function SubcontractorManagementPage() {
             }
           } catch { /* skip */ }
 
-          // 새 prices INSERT
-          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+          // 3) 모든 매핑 재삽입
+          let firstMappingId: string | null = null;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const newId = crypto.randomUUID();
+            if (mi === 0) firstMappingId = newId;
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: newId,
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              subcontractor_item_code: mappingRows[mi].subcontractor_item_code || "",
+              subcontractor_item_name: mappingRows[mi].subcontractor_item_name || "",
+            });
+          }
+          // 매핑이 비어있으면 빈 매핑 1개 생성 (item_id 연결 유지)
+          if (mappingRows.length === 0) {
+            firstMappingId = crypto.randomUUID();
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: firstMappingId,
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              subcontractor_item_code: "",
+              subcontractor_item_name: "",
+            });
+          }
+
+          // 4) 모든 단가 재삽입
+          const filteredPriceRows = (itemPrices[itemKey] || []).filter((p) =>
             (p.base_price && Number(p.base_price) > 0) || p.start_date
           );
-          for (const price of priceRows) {
+          for (const price of filteredPriceRows) {
             await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
-              mapping_id: editItemData.id,
+              id: crypto.randomUUID(),
+              mapping_id: firstMappingId || "",
               subcontractor_id: selectedSubcontractor.subcontractor_code,
               item_id: itemKey,
               start_date: price.start_date || null, end_date: price.end_date || null,
@@ -594,9 +661,9 @@ export default function SubcontractorManagementPage() {
             });
           }
         } else {
-          // 신규 등록 모드
           let mappingId: string | null = null;
           const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
             subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
             subcontractor_item_code: mappingRows[0]?.subcontractor_item_code || "",
             subcontractor_item_name: mappingRows[0]?.subcontractor_item_name || "",
@@ -605,6 +672,7 @@ export default function SubcontractorManagementPage() {
 
           for (let mi = 1; mi < mappingRows.length; mi++) {
             await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
               subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
               subcontractor_item_code: mappingRows[mi].subcontractor_item_code || "",
               subcontractor_item_name: mappingRows[mi].subcontractor_item_name || "",
@@ -616,6 +684,7 @@ export default function SubcontractorManagementPage() {
           );
           for (const price of priceRows) {
             await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
               mapping_id: mappingId || "", subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
               start_date: price.start_date || null, end_date: price.end_date || null,
               currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
@@ -627,16 +696,15 @@ export default function SubcontractorManagementPage() {
           }
         }
       }
-      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedItemsForDetail.length}개 품목이 추가되었습니다.`);
+      toast.success(isEditingExisting ? "수정되었어요" : `${selectedItemsForDetail.length}개 품목이 추가되었어요`);
       setItemDetailOpen(false);
       setEditItemData(null);
       setItemCheckedIds(new Set());
-      // 우측 새로고침
       const cid = selectedSubcontractorId;
       setSelectedSubcontractorId(null);
       setTimeout(() => setSelectedSubcontractorId(cid), 50);
     } catch (err: any) {
-      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+      toast.error(err.response?.data?.message || "저장에 실패했어요");
     } finally {
       setSaving(false);
     }
@@ -647,7 +715,6 @@ export default function SubcontractorManagementPage() {
     if (subcontractors.length === 0) return;
     toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
     try {
-      // 전체 외주업체의 품목 매핑 + 단가 조회
       const allMappings: any[] = [];
       const subCodes = subcontractors.map((c) => c.subcontractor_code).filter(Boolean);
 
@@ -657,7 +724,6 @@ export default function SubcontractorManagementPage() {
         });
         const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
 
-        // item_id → item_info 조인
         const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
         let itemMap: Record<string, any> = {};
         if (itemIds.length > 0) {
@@ -679,12 +745,10 @@ export default function SubcontractorManagementPage() {
         }
       }
 
-      // 외주업체 + 품목 플랫 데이터 생성
       const rows: Record<string, any>[] = [];
       for (const c of subcontractors) {
         const subMappings = allMappings.filter((m) => m.subcontractor_id === c.subcontractor_code);
         if (subMappings.length === 0) {
-          // 품목 없는 외주업체도 1행
           rows.push({
             외주업체코드: c.subcontractor_code, 외주업체명: c.subcontractor_name,
             거래유형: getCategoryLabel("division", c.division),
@@ -717,15 +781,14 @@ export default function SubcontractorManagementPage() {
       toast.success(`${rows.length}행 다운로드 완료`);
     } catch (err) {
       toast.dismiss("excel-dl");
-      console.error("엑셀 다운로드 실패:", err);
-      toast.error("다운로드에 실패했습니다.");
+      toast.error("다운로드에 실패했어요");
     }
   };
 
   // 셀렉트 렌더링
   const renderSelect = (field: string, value: string, onChange: (v: string) => void, placeholder: string) => (
     <Select value={value || ""} onValueChange={onChange}>
-      <SelectTrigger className="h-9"><SelectValue placeholder={placeholder} /></SelectTrigger>
+      <SelectTrigger className="h-9 text-sm"><SelectValue placeholder={placeholder} /></SelectTrigger>
       <SelectContent>
         {(categoryOptions[field] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
       </SelectContent>
@@ -734,19 +797,26 @@ export default function SubcontractorManagementPage() {
 
   return (
     <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>외주관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="font-medium text-foreground">외주사관리</span>
+      </nav>
+
+      {/* 검색 필터 바 */}
       <DynamicSearchFilter
         tableName={SUBCONTRACTOR_TABLE}
-        filterId="subcontractor-mng"
+        filterId="c16-subcontractor"
         onFilterChange={setSearchFilters}
         dataCount={subcontractorCount}
-        externalFilterConfig={filterConfig}
+        externalFilterConfig={ts.filterConfig}
         extraActions={
-          <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" disabled={excelDetecting}
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={excelDetecting}
               onClick={async () => {
                 setExcelDetecting(true);
                 try {
@@ -758,217 +828,370 @@ export default function SubcontractorManagementPage() {
                     toast.error(result.message || "테이블 구조 분석 실패");
                   }
                 } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
-              }}>
-              {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />} 엑셀 업로드
+              }}
+            >
+              {excelDetecting
+                ? <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                : <FileSpreadsheet className="mr-1.5 h-4 w-4" />}
+              엑셀업로드
             </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
-              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+              <Download className="mr-1.5 h-4 w-4" />
+              엑셀다운로드
             </Button>
           </div>
         }
       />
 
-      {/* 분할 패널 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
-        <ResizablePanelGroup direction="horizontal">
-          {/* 좌측: 외주업체 목록 */}
-          <ResizablePanel defaultSize={55} minSize={30}>
-            <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Wrench className="w-4 h-4" /> 외주업체 목록
-                  <Badge variant="secondary" className="font-normal">{subcontractorCount}건</Badge>
-                </div>
-                <div className="flex gap-1.5">
-                  <Button size="sm" onClick={openSubcontractorRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
-                  <Button variant="outline" size="sm" disabled={!selectedSubcontractorId} onClick={openSubcontractorEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
-                  <Button variant="destructive" size="sm" disabled={!selectedSubcontractorId} onClick={handleSubcontractorDelete}><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
-                </div>
+      {/* 마스터-디테일 분할 패널 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg">
+
+        {/* 좌측: 외주업체 목록 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-3 shrink-0">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-semibold">외주업체 목록</span>
+                <Badge variant="outline" className="text-xs px-1.5 py-0">{subcontractorCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Button size="sm" onClick={openSubcontractorRegister}>
+                  <Plus className="h-3.5 w-3.5 mr-1" /> 등록
+                </Button>
+                <Button variant="outline" size="sm" disabled={!selectedSubcontractorId} onClick={openSubcontractorEdit}>
+                  <Pencil className="h-3.5 w-3.5 mr-1" /> 수정
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={!selectedSubcontractorId}
+                  onClick={handleSubcontractorDelete}
+                  className="text-destructive border-destructive/20 hover:bg-destructive/10"
+                >
+                  <Trash2 className="h-3.5 w-3.5 mr-1" /> 삭제
+                </Button>
+                <Button variant="ghost" size="sm" onClick={fetchSubcontractors} disabled={subcontractorLoading}>
+                  {subcontractorLoading
+                    ? <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    : <RefreshCw className="h-3.5 w-3.5" />}
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                  <Settings2 className="h-3.5 w-3.5" />
+                </Button>
               </div>
-              <DataGrid
-                gridId="subcontractor-left"
-                columns={LEFT_COLUMNS}
-                data={subcontractors}
-                loading={subcontractorLoading}
-                selectedId={selectedSubcontractorId}
-                onSelect={setSelectedSubcontractorId}
-                onRowDoubleClick={() => openSubcontractorEdit()}
-                tableName={SUBCONTRACTOR_TABLE}
-                emptyMessage="등록된 외주업체가 없습니다"
-              />
             </div>
-          </ResizablePanel>
+            <EDataTable
+              columns={mainTableColumns}
+              data={ts.groupData(subcontractors)}
+              loading={subcontractorLoading}
+              emptyMessage="등록된 외주업체가 없어요"
+              selectedId={selectedSubcontractorId}
+              onSelect={(id) => setSelectedSubcontractorId(id)}
+              onRowDoubleClick={() => openSubcontractorEdit()}
+              showPagination={true}
+              draggableColumns={false}
+              columnOrderKey="c16-subcontractor-main"
+            />
+          </div>
+        </ResizablePanel>
 
-          <ResizableHandle withHandle />
+        <ResizableHandle withHandle />
 
-          {/* 우측: 품목 정보 */}
-          <ResizablePanel defaultSize={45} minSize={25}>
-            <div className="flex flex-col h-full">
-              {/* 헤더 */}
-              <div className="flex items-center justify-between p-2 border-b bg-muted/10 shrink-0">
-                <div className="flex items-center gap-1">
-                  <span className="px-3 py-1.5 text-sm font-medium flex items-center">
-                    <Package className="w-3.5 h-3.5 inline mr-1" />품목 정보
-                  </span>
-                  {selectedSubcontractor && <Badge variant="outline" className="font-normal ml-2 text-xs">{selectedSubcontractor.subcontractor_name}</Badge>}
-                </div>
-                <div className="flex gap-1.5">
-                  <Button variant="outline" size="sm" disabled={!selectedSubcontractorId}
-                    onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
-                    <Plus className="w-3.5 h-3.5 mr-1" /> 품목 추가
-                  </Button>
-                </div>
+        {/* 우측: 품목 정보 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-3 shrink-0">
+              <div className="flex items-center gap-2">
+                {selectedSubcontractor ? (
+                  <>
+                    <span className="text-sm font-semibold">{selectedSubcontractor.subcontractor_name}</span>
+                    <Badge variant="outline" className="text-[10px] px-1.5 py-0">{selectedSubcontractor.subcontractor_code}</Badge>
+                  </>
+                ) : (
+                  <>
+                    <Package className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-semibold">품목 정보</span>
+                  </>
+                )}
               </div>
-
-              {/* 콘텐츠 */}
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!selectedSubcontractorId}
+                onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}
+              >
+                <Plus className="h-3.5 w-3.5 mr-1" /> 품목 추가
+              </Button>
+            </div>
+            <div className="flex-1 overflow-auto">
               {!selectedSubcontractorId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
-                  좌측에서 외주업체를 선택하세요
+                <div className="flex items-center justify-center h-full">
+                  <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-12 py-10 text-center">
+                    <Wrench className="h-10 w-10 text-muted-foreground opacity-30" />
+                    <p className="text-sm text-muted-foreground">좌측에서 외주사를 선택해주세요</p>
+                  </div>
+                </div>
+              ) : priceLoading ? (
+                <div className="flex items-center justify-center py-16">
+                  <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                </div>
+              ) : priceItems.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+                  <Package className="h-12 w-12 mb-3 opacity-30" />
+                  <p className="text-sm font-medium">등록된 품목이 없어요</p>
                 </div>
               ) : (
-                <DataGrid
-                  gridId="subcontractor-right-items"
-                  columns={RIGHT_COLUMNS}
-                  data={priceItems}
-                  loading={priceLoading}
-                  showRowNumber={false}
-                  tableName={MAPPING_TABLE}
-                  emptyMessage="등록된 품목이 없습니다"
-                  onRowDoubleClick={(row) => openEditItem(row)}
-                />
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품번</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품명</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {(() => {
+                      // item_number 기준 그룹화 (순서 유지)
+                      const grouped: { itemNumber: string; rows: any[] }[] = [];
+                      const groupMap = new Map<string, any[]>();
+                      for (const item of priceItems) {
+                        const key = item.item_number || item.item_id || item.id;
+                        if (!groupMap.has(key)) {
+                          const rows: any[] = [];
+                          groupMap.set(key, rows);
+                          grouped.push({ itemNumber: key, rows });
+                        }
+                        groupMap.get(key)!.push(item);
+                      }
+                      return grouped.map((group, gIdx) =>
+                        group.rows.map((item, rowIdx) => (
+                          <TableRow
+                            key={item.id}
+                            className={cn(
+                              "cursor-pointer hover:bg-muted/50",
+                              rowIdx === 0 && gIdx > 0 && "border-t-2 border-t-border/60"
+                            )}
+                            onDoubleClick={() => openEditItem(item)}
+                          >
+                            <TableCell className="text-[13px] text-primary">
+                              {rowIdx === 0 ? item.item_number : ""}
+                            </TableCell>
+                            <TableCell className="text-[13px]">
+                              {rowIdx === 0 ? item.item_name : ""}
+                            </TableCell>
+                            <TableCell className="text-[13px]">{item.subcontractor_item_code || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.subcontractor_item_name || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.base_price_type || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right">{item.base_price ? Number(item.base_price).toLocaleString() : "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.discount_type || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right">{item.discount_value || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right font-semibold">{item.calculated_price ? Number(item.calculated_price).toLocaleString() : "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.currency_code || "-"}</TableCell>
+                          </TableRow>
+                        ))
+                      );
+                    })()}
+                  </TableBody>
+                </Table>
               )}
             </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 모달들 ========== */}
 
       {/* 외주업체 등록/수정 모달 */}
       <Dialog open={subcontractorModalOpen} onOpenChange={setSubcontractorModalOpen}>
-        <DialogContent className="max-w-2xl">
+        <DialogContent className="max-w-[95vw] sm:max-w-[680px] max-h-[85vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>{subcontractorEditMode ? "외주업체 수정" : "외주업체 등록"}</DialogTitle>
-            <DialogDescription>{subcontractorEditMode ? "외주업체 정보를 수정합니다." : "새로운 외주업체를 등록합니다."}</DialogDescription>
+            <DialogDescription>
+              {subcontractorEditMode ? "외주업체 정보를 수정해요." : "새로운 외주업체를 등록해요."}
+            </DialogDescription>
           </DialogHeader>
           <div className="grid grid-cols-2 gap-4 py-4">
             <div className="space-y-1.5">
-              <Label className="text-sm">외주업체 코드</Label>
-              <Input value={subcontractorForm.subcontractor_code || ""} onChange={(e) => setSubcontractorForm((p) => ({ ...p, subcontractor_code: e.target.value }))}
-                placeholder="외주업체 코드" className="h-9" disabled={subcontractorEditMode} />
+              <Label className="text-xs">외주업체 코드</Label>
+              <Input
+                value={subcontractorEditMode ? (subcontractorForm.subcontractor_code || "") : (previewCode || subcontractorForm.subcontractor_code || "")}
+                onChange={(e) => {
+                  if (!subcontractorEditMode && !numberingRuleId) {
+                    setSubcontractorForm((p) => ({ ...p, subcontractor_code: e.target.value }));
+                  }
+                }}
+                placeholder={numberingRuleId && !subcontractorEditMode ? "자동 생성돼요" : "외주업체 코드"}
+                className="h-9 text-sm"
+                readOnly={!!numberingRuleId && !subcontractorEditMode}
+                disabled={subcontractorEditMode}
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">외주업체명 <span className="text-destructive">*</span></Label>
-              <Input value={subcontractorForm.subcontractor_name || ""} onChange={(e) => setSubcontractorForm((p) => ({ ...p, subcontractor_name: e.target.value }))}
-                placeholder="외주업체명" className="h-9" />
+              <Label className="text-xs">외주업체명 <span className="text-destructive">*</span></Label>
+              <Input
+                value={subcontractorForm.subcontractor_name || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, subcontractor_name: e.target.value }))}
+                placeholder="외주업체명"
+                className="h-9 text-sm"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">거래 유형</Label>
+              <Label className="text-xs">거래 유형</Label>
               {renderSelect("division", subcontractorForm.division, (v) => setSubcontractorForm((p) => ({ ...p, division: v })), "거래 유형")}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+              <Label className="text-xs">상태 <span className="text-destructive">*</span></Label>
               {renderSelect("status", subcontractorForm.status, (v) => setSubcontractorForm((p) => ({ ...p, status: v })), "상태")}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">담당자</Label>
-              <Input value={subcontractorForm.contact_person || ""} onChange={(e) => setSubcontractorForm((p) => ({ ...p, contact_person: e.target.value }))}
-                placeholder="담당자" className="h-9" />
+              <Label className="text-xs">담당자</Label>
+              <Input
+                value={subcontractorForm.contact_person || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, contact_person: e.target.value }))}
+                placeholder="담당자"
+                className="h-9 text-sm"
+              />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">전화번호</Label>
-              <Input value={subcontractorForm.contact_phone || ""} onChange={(e) => handleFormChange("contact_phone", e.target.value)}
-                placeholder="010-0000-0000" className={cn("h-9", formErrors.contact_phone && "border-destructive")} />
+              <Label className="text-xs">전화번호</Label>
+              <Input
+                value={subcontractorForm.contact_phone || ""}
+                onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                placeholder="010-0000-0000"
+                className={cn("h-9 text-sm", formErrors.contact_phone && "border-destructive")}
+              />
               {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">이메일</Label>
-              <Input value={subcontractorForm.email || ""} onChange={(e) => handleFormChange("email", e.target.value)}
-                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
+              <Label className="text-xs">이메일</Label>
+              <Input
+                value={subcontractorForm.email || ""}
+                onChange={(e) => handleFormChange("email", e.target.value)}
+                placeholder="example@email.com"
+                className={cn("h-9 text-sm", formErrors.email && "border-destructive")}
+              />
               {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
             </div>
             <div className="space-y-1.5">
-              <Label className="text-sm">사업자번호</Label>
-              <Input value={subcontractorForm.business_number || ""} onChange={(e) => handleFormChange("business_number", e.target.value)}
-                placeholder="000-00-00000" className={cn("h-9", formErrors.business_number && "border-destructive")} />
+              <Label className="text-xs">사업자번호</Label>
+              <Input
+                value={subcontractorForm.business_number || ""}
+                onChange={(e) => handleFormChange("business_number", e.target.value)}
+                placeholder="000-00-00000"
+                className={cn("h-9 text-sm", formErrors.business_number && "border-destructive")}
+              />
               {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
             </div>
             <div className="space-y-1.5 col-span-2">
-              <Label className="text-sm">주소</Label>
-              <Input value={subcontractorForm.address || ""} onChange={(e) => setSubcontractorForm((p) => ({ ...p, address: e.target.value }))}
-                placeholder="주소" className="h-9" />
+              <Label className="text-xs">주소</Label>
+              <Input
+                value={subcontractorForm.address || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, address: e.target.value }))}
+                placeholder="주소"
+                className="h-9 text-sm"
+              />
             </div>
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setSubcontractorModalOpen(false)}>취소</Button>
             <Button onClick={handleSubcontractorSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+              {saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <Save className="h-4 w-4 mr-1.5" />}
+              저장
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* 품목 추가 모달 */}
+      {/* 품목 추가 모달 (1단계: 검색/선택) */}
       <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
-        <DialogContent className="max-w-3xl max-h-[70vh]" onInteractOutside={(e) => e.preventDefault()}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[780px] max-h-[85vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>품목 선택</DialogTitle>
-            <DialogDescription>외주업체에 추가할 품목을 선택하세요.</DialogDescription>
+            <DialogDescription>외주업체에 추가할 품목을 선택해요.</DialogDescription>
           </DialogHeader>
-          <div className="flex gap-2 mb-3">
-            <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
-              onChange={(e) => setItemSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && searchItems()}
-              className="h-9 flex-1" />
-            <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
-              {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
-            </Button>
-          </div>
-          <div className="overflow-auto max-h-[350px] border rounded-lg">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">
-                    <input type="checkbox"
-                      checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
-                      onChange={(e) => {
-                        if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
-                        else setItemCheckedIds(new Set());
-                      }} />
-                  </TableHead>
-                  <TableHead className="w-[120px]">품목코드</TableHead>
-                  <TableHead className="min-w-[140px]">품명</TableHead>
-                  <TableHead className="w-[100px]">규격</TableHead>
-                  <TableHead className="w-[100px]">재질</TableHead>
-                  <TableHead className="w-[60px]">단위</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {itemSearchResults.length === 0 ? (
-                  <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
-                ) : itemSearchResults.map((item) => (
-                  <TableRow key={item.id} className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
-                    onClick={() => setItemCheckedIds((prev) => {
-                      const next = new Set(prev);
-                      if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
-                      return next;
-                    })}>
-                    <TableCell className="text-center"><input type="checkbox" checked={itemCheckedIds.has(item.id)} readOnly /></TableCell>
-                    <TableCell className="text-xs max-w-[120px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
-                    <TableCell className="text-sm">{item.item_name}</TableCell>
-                    <TableCell className="text-xs">{item.size}</TableCell>
-                    <TableCell className="text-xs">{item.material}</TableCell>
-                    <TableCell className="text-xs">{item.unit}</TableCell>
+          <div className="space-y-3">
+            <div className="flex gap-2">
+              <Input
+                placeholder="품명/품목코드 검색"
+                value={itemSearchKeyword}
+                onChange={(e) => setItemSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchItems()}
+                className="h-9 flex-1 text-sm"
+              />
+              <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+                {itemSearchLoading
+                  ? <Loader2 className="h-4 w-4 animate-spin" />
+                  : <><Search className="h-4 w-4 mr-1" />조회</>}
+              </Button>
+            </div>
+            <div className="overflow-auto max-h-[350px] rounded-md border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[40px] text-center">
+                      <input
+                        type="checkbox"
+                        checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                        onChange={(e) => {
+                          if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                          else setItemCheckedIds(new Set());
+                        }}
+                        className="h-4 w-4"
+                      />
+                    </TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+                </TableHeader>
+                <TableBody>
+                  {itemSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : itemSearchResults.map((item) => (
+                    <TableRow
+                      key={item.id}
+                      className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                      onClick={() => setItemCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <input type="checkbox" checked={itemCheckedIds.has(item.id)} readOnly className="h-4 w-4" />
+                      </TableCell>
+                      <TableCell className="text-[13px]">{item.item_number}</TableCell>
+                      <TableCell className="text-[13px]">{item.item_name}</TableCell>
+                      <TableCell className="text-[13px]">{item.size}</TableCell>
+                      <TableCell className="text-[13px]">{item.material}</TableCell>
+                      <TableCell className="text-[13px]">{item.unit}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
           </div>
           <DialogFooter>
-            <div className="flex items-center gap-2 w-full justify-between">
+            <div className="flex items-center justify-between w-full">
               <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
               <div className="flex gap-2">
                 <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
                 <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
-                  <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+                  <Plus className="h-4 w-4 mr-1" />
+                  {itemCheckedIds.size}개 다음
                 </Button>
               </div>
             </div>
@@ -977,26 +1200,16 @@ export default function SubcontractorManagementPage() {
       </Dialog>
 
       {/* 품목 상세정보 입력 모달 (2단계) */}
-      <FullscreenDialog
-        open={itemDetailOpen}
-        onOpenChange={setItemDetailOpen}
-        title={`품목 상세정보 ${editItemData ? "수정" : "입력"} — ${selectedSubcontractor?.subcontractor_name || ""}`}
-        description={editItemData ? "외주 품번/품명과 기간별 단가를 수정합니다." : "선택한 품목의 외주 품번/품명과 기간별 단가를 설정합니다."}
-        defaultMaxWidth="max-w-[1100px]"
-        footer={
-          <>
-            <Button variant="outline" onClick={() => {
-              setItemDetailOpen(false);
-              if (!editItemData) setItemSelectOpen(true); // 신규일 때만 품목 선택으로 돌아감
-              setEditItemData(null);
-            }}>{editItemData ? "취소" : "← 이전"}</Button>
-            <Button onClick={handleItemDetailSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 품목 추가 완료
-            </Button>
-          </>
-        }
-      >
-
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedSubcontractor?.subcontractor_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData ? "외주 품번/품명과 기간별 단가를 수정해요" : "선택한 품목의 외주 품번/품명과 기간별 단가를 설정해요"}
+            </DialogDescription>
+          </DialogHeader>
           <div className="space-y-6 py-2">
             {selectedItemsForDetail.map((item, idx) => {
               const itemKey = item.item_number || item.id;
@@ -1007,13 +1220,13 @@ export default function SubcontractorManagementPage() {
                 <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
                   {/* 품목 헤더 */}
                   <div className="px-5 py-3 bg-muted/30 border-b">
-                    <div className="font-bold">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="font-semibold text-sm">{idx + 1}. {item.item_name || itemKey}</div>
                     <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
                   </div>
 
                   <div className="flex gap-4 p-4">
-                    {/* 좌: 외주 품번/품명 (다중) */}
-                    <div className="flex-1 border rounded-lg p-4 bg-blue-50/30 dark:bg-blue-950/10">
+                    {/* 좌: 외주 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/20">
                       <div className="flex items-center justify-between mb-3">
                         <span className="text-sm font-semibold">외주 품번/품명 관리</span>
                         <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
@@ -1022,18 +1235,23 @@ export default function SubcontractorManagementPage() {
                       </div>
                       <div className="space-y-2">
                         {mappingRows.length === 0 ? (
-                          <div className="text-xs text-muted-foreground py-2">입력된 외주 품번이 없습니다</div>
+                          <div className="text-xs text-muted-foreground py-2">입력된 외주 품번이 없어요</div>
                         ) : mappingRows.map((mRow, mIdx) => (
                           <div key={mRow._id} className="flex gap-2 items-center">
                             <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
-                            <Input value={mRow.subcontractor_item_code}
+                            <Input
+                              value={mRow.subcontractor_item_code}
                               onChange={(e) => updateMappingRow(itemKey, mRow._id, "subcontractor_item_code", e.target.value)}
-                              placeholder="외주 품번" className="h-8 text-sm flex-1" />
-                            <Input value={mRow.subcontractor_item_name}
+                              placeholder="외주 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.subcontractor_item_name}
                               onChange={(e) => updateMappingRow(itemKey, mRow._id, "subcontractor_item_name", e.target.value)}
-                              placeholder="외주 품명" className="h-8 text-sm flex-1" />
-                            <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
-                              onClick={() => removeMappingRow(itemKey, mRow._id)}>
+                              placeholder="외주 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0" onClick={() => removeMappingRow(itemKey, mRow._id)}>
                               <X className="h-3 w-3" />
                             </Button>
                           </div>
@@ -1042,39 +1260,41 @@ export default function SubcontractorManagementPage() {
                     </div>
 
                     {/* 우: 기간별 단가 */}
-                    <div className="flex-1 border rounded-lg p-4 bg-amber-50/30 dark:bg-amber-950/10">
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/20">
                       <div className="flex items-center justify-between mb-3">
                         <span className="text-sm font-semibold">기간별 단가 설정</span>
                         <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
                           <Plus className="h-3 w-3 mr-1" /> 단가 추가
                         </Button>
                       </div>
-
                       <div className="space-y-3">
                         {prices.map((price, pIdx) => (
                           <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
                             <div className="flex items-center justify-between">
                               <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
                               {prices.length > 1 && (
-                                <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
-                                  onClick={() => removePriceRow(itemKey, price._id)}>
+                                <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive" onClick={() => removePriceRow(itemKey, price._id)}>
                                   <X className="h-3 w-3" />
                                 </Button>
                               )}
                             </div>
                             {/* 기간 */}
                             <div className="flex gap-2 items-center">
-                              <div className="flex-1">
-                                <FormDatePicker value={price.start_date}
-                                  onChange={(v) => updatePriceRow(itemKey, price._id, "start_date", v)} placeholder="시작일" />
-                              </div>
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
                               <span className="text-xs text-muted-foreground">~</span>
-                              <div className="flex-1">
-                                <FormDatePicker value={price.end_date}
-                                  onChange={(v) => updatePriceRow(itemKey, price._id, "end_date", v)} placeholder="종료일" />
-                              </div>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
                               <div className="w-[80px]">
-                                <Select value={price.currency_code} onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}>
+                                <Select value={price.currency_code || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}>
                                   <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="통화" /></SelectTrigger>
                                   <SelectContent>
                                     {(priceCategoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
@@ -1085,30 +1305,36 @@ export default function SubcontractorManagementPage() {
                             {/* 기준가/할인/반올림 */}
                             <div className="flex gap-2 items-center">
                               <div className="w-[90px]">
-                                <Select value={price.base_price_type} onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준" /></SelectTrigger>
+                                <Select value={price.base_price_type || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
                                   <SelectContent>
                                     {(priceCategoryOptions["base_price_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
                                   </SelectContent>
                                 </Select>
                               </div>
-                              <Input value={price.base_price}
+                              <Input
+                                value={price.base_price}
                                 onChange={(e) => updatePriceRow(itemKey, price._id, "base_price", e.target.value)}
-                                className="h-8 text-xs text-right flex-1" placeholder="기준가" />
+                                className="h-8 text-xs text-right flex-1"
+                                placeholder="기준가"
+                              />
                               <div className="w-[90px]">
-                                <Select value={price.discount_type} onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <Select value={price.discount_type || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인유형" /></SelectTrigger>
                                   <SelectContent>
                                     <SelectItem value="none">할인없음</SelectItem>
                                     {(priceCategoryOptions["discount_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
                                   </SelectContent>
                                 </Select>
                               </div>
-                              <Input value={price.discount_value}
+                              <Input
+                                value={price.discount_value}
                                 onChange={(e) => updatePriceRow(itemKey, price._id, "discount_value", e.target.value)}
-                                className="h-8 text-xs text-right w-[60px]" placeholder="0" />
+                                className="h-8 text-xs text-right w-[60px]"
+                                placeholder="0"
+                              />
                               <div className="w-[90px]">
-                                <Select value={price.rounding_unit_value} onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}>
+                                <Select value={price.rounding_unit_value || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}>
                                   <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
                                   <SelectContent>
                                     {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
@@ -1116,7 +1342,7 @@ export default function SubcontractorManagementPage() {
                                 </Select>
                               </div>
                             </div>
-                            {/* 계산된 단가 표시 */}
+                            {/* 계산 단가 표시 */}
                             <div className="flex items-center justify-end gap-2 pt-1 border-t">
                               <span className="text-xs text-muted-foreground">계산 단가:</span>
                               <span className="font-bold text-sm">{price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}</span>
@@ -1130,8 +1356,24 @@ export default function SubcontractorManagementPage() {
               );
             })}
           </div>
-
-      </FullscreenDialog>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <Save className="h-4 w-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 엑셀 업로드 (멀티테이블) */}
       {excelChainConfig && (
@@ -1144,7 +1386,6 @@ export default function SubcontractorManagementPage() {
           config={excelChainConfig}
           onSuccess={() => {
             fetchSubcontractors();
-            // 우측 새로고침
             const cid = selectedSubcontractorId;
             setSelectedSubcontractorId(null);
             setTimeout(() => setSelectedSubcontractorId(cid), 50);
@@ -1152,12 +1393,15 @@ export default function SubcontractorManagementPage() {
         />
       )}
 
+      {/* 테이블 설정 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={SUBCONTRACTOR_TABLE}
-        settingsId="subcontractor-mng"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        includeAutoColumns={["created_date", "updated_date", "writer"]}
+        onSave={ts.applySettings}
       />
 
       {ConfirmDialogComponent}
diff --git a/frontend/app/(main)/COMPANY_7/production/bom/page.tsx b/frontend/app/(main)/COMPANY_7/production/bom/page.tsx
new file mode 100644
index 00000000..0563f47b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/production/bom/page.tsx
@@ -0,0 +1,2521 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  ChevronRight,
+  ChevronDown,
+  ChevronsDown,
+  ChevronsUp,
+  Plus,
+  Trash2,
+  Search,
+  Loader2,
+  Inbox,
+  Upload,
+  Download,
+  GitBranch,
+  History,
+  CheckCircle2,
+  RotateCcw,
+  X,
+  FileText,
+  Play,
+  Copy,
+  Settings2,
+  Save,
+  Package,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// ─── 상수 ───────────────────────────────────────
+const BOM_TABLE = "bom";
+const BOM_DETAIL_TABLE = "bom_detail";
+
+const BOM_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "bom_type", label: "BOM 유형" },
+  { key: "version", label: "버전" },
+  { key: "effective_date", label: "유효시작일" },
+  { key: "status", label: "상태" },
+];
+
+
+const STATUS_MAP: Record<string, { label: string; className: string }> = {
+  active: { label: "활성", className: "bg-success/10 text-success" },
+  draft: { label: "초안", className: "bg-warning/10 text-warning" },
+  expired: { label: "만료", className: "bg-destructive/10 text-destructive" },
+  inactive: { label: "비활성", className: "bg-muted text-muted-foreground" },
+};
+
+const VERSION_STATUS_MAP: Record<string, { label: string; className: string }> = {
+  active: { label: "사용중", className: "bg-success/10 text-success" },
+  developing: { label: "개발중", className: "bg-warning/10 text-warning" },
+  inactive: { label: "비활성", className: "bg-muted text-muted-foreground" },
+};
+
+const BOM_TYPE_OPTIONS = [
+  { code: "production", label: "생산 BOM" },
+  { code: "design", label: "설계 BOM" },
+  { code: "cost", label: "원가 BOM" },
+];
+
+// ─── 인터페이스 ─────────────────────────────────
+interface BomRow {
+  id: string;
+  item_id?: string;
+  item_code?: string;
+  item_name?: string;
+  bom_type?: string;
+  version?: string;
+  base_qty?: string;
+  unit?: string;
+  status?: string;
+  effective_date?: string;
+  expiry_date?: string;
+  remark?: string;
+  current_version_id?: string;
+  [key: string]: any;
+}
+
+interface BomDetail {
+  id: string;
+  bom_id: string;
+  version_id?: string;
+  parent_detail_id?: string | null;
+  child_item_id?: string;
+  item_number?: string;
+  item_name?: string;
+  item_type?: string;
+  quantity?: string;
+  unit?: string;
+  process_type?: string;
+  loss_rate?: string;
+  remark?: string;
+  level?: string;
+  seq_no?: string;
+  spec?: string;
+  writer?: string;
+  updated_date?: string;
+  [key: string]: any;
+}
+
+interface BomVersion {
+  id: string;
+  bom_id: string;
+  version_name: string;
+  revision?: number;
+  status: string;
+  created_by?: string;
+  created_date?: string;
+  detail_count?: number;
+}
+
+interface BomHistoryEntry {
+  id: string;
+  bom_id: string;
+  revision?: string;
+  version?: string;
+  change_type: string;
+  change_description?: string;
+  changed_by?: string;
+  changed_date?: string;
+}
+
+interface TreeNode extends BomDetail {
+  children: TreeNode[];
+  expanded?: boolean;
+  _isNew?: boolean;        // 신규 노드 (DB에 없음)
+  _isModified?: boolean;   // 수정된 노드
+  _tempId?: string;        // 임시 ID
+  _level?: number;         // flattenTree에서 사용
+  _isVirtualRoot?: boolean; // 가상 루트(BOM 마스터) 노드
+}
+
+// ─── 트리 구성 헬퍼 ─────────────────────────────
+function buildTree(details: BomDetail[]): TreeNode[] {
+  const nodeMap = new Map<string, TreeNode>();
+  const roots: TreeNode[] = [];
+
+  for (const d of details) {
+    nodeMap.set(d.id, { ...d, children: [], expanded: true });
+  }
+
+  for (const d of details) {
+    const node = nodeMap.get(d.id)!;
+    if (d.parent_detail_id && nodeMap.has(d.parent_detail_id)) {
+      nodeMap.get(d.parent_detail_id)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+
+  return roots;
+}
+
+function flattenTree(nodes: TreeNode[], level = 0): (TreeNode & { _level: number })[] {
+  const result: (TreeNode & { _level: number })[] = [];
+  for (const node of nodes) {
+    result.push({ ...node, _level: level });
+    if (node.expanded && node.children.length > 0) {
+      result.push(...flattenTree(node.children, level + 1));
+    }
+  }
+  return result;
+}
+
+// ─── 타입 뱃지 색상 ────────────────────────────
+// BOM 이력 변경 유형 색상
+const CHANGE_TYPE_STYLE: Record<string, string> = {
+  "등록": "bg-primary/10 text-primary ring-primary/20",
+  "수정": "bg-amber-50 text-amber-600 ring-amber-200",
+  "추가": "bg-emerald-50 text-emerald-600 ring-emerald-200",
+  "삭제": "bg-destructive/10 text-destructive ring-red-200",
+  "버전변경": "bg-blue-50 text-blue-600 ring-blue-200",
+  "excel_upload": "bg-blue-50 text-blue-600 ring-blue-200",
+};
+const CHANGE_TYPE_OPTIONS = ["등록", "수정", "추가", "삭제", "버전변경", "기타"];
+
+function getItemTypeBadge(type?: string) {
+  switch (type) {
+    case "원자재":
+    case "raw":
+      return { label: "원자재", className: "bg-success/10 text-success border-success/20" };
+    case "반제품":
+    case "semi":
+      return { label: "반제품", className: "bg-warning/10 text-warning border-warning/20" };
+    case "완제품":
+    case "finished":
+      return { label: "완제품", className: "bg-primary/10 text-primary border-primary/20" };
+    default:
+      return { label: type || "-", className: "bg-muted text-muted-foreground" };
+  }
+}
+
+// ─── 메인 컴포넌트 ──────────────────────────────
+export default function BomManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-bom", BOM_TABLE, BOM_COLUMNS);
+
+  // BOM 목록 상태
+  const [bomList, setBomList] = useState<BomRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [selectedBomId, setSelectedBomId] = useState<string | null>(null);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+
+  // 상세 데이터
+  const [bomHeader, setBomHeader] = useState<BomRow | null>(null);
+  const [bomDetails, setBomDetails] = useState<BomDetail[]>([]);
+  const [treeNodes, setTreeNodes] = useState<TreeNode[]>([]);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  // 트리 토글
+  const [treeDirection, setTreeDirection] = useState<"forward" | "reverse">("forward");
+  const [treeBasis, setTreeBasis] = useState<"material" | "process">("material");
+
+  // 버전 관리
+  const [versions, setVersions] = useState<BomVersion[]>([]);
+  const [currentVersionId, setCurrentVersionId] = useState<string | null>(null);
+  const [versionLoading, setVersionLoading] = useState(false);
+  const [newVersionName, setNewVersionName] = useState("");
+  const [showNewVersionDialog, setShowNewVersionDialog] = useState(false);
+
+  // 이력 관리
+  const [historyList, setHistoryList] = useState<BomHistoryEntry[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [showHistoryDialog, setShowHistoryDialog] = useState(false);
+  const [newHistory, setNewHistory] = useState({ change_type: "", change_description: "" });
+
+  // 등록 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [masterForm, setMasterForm] = useState<Record<string, any>>({
+    item_id: "",
+    item_code: "",
+    item_name: "",
+    bom_type: "",
+    base_qty: "1",
+    unit: "",
+    version: "1.0",
+    status: "draft",
+    effective_date: "",
+    expiry_date: "",
+    remark: "",
+  });
+  const [modalDetailRows, setModalDetailRows] = useState<any[]>([]);
+
+  // 품목 검색 모달
+  const [showItemSearchModal, setShowItemSearchModal] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSearchTarget, setItemSearchTarget] = useState<"master" | "detail">("master");
+
+  // 엑셀 업로드
+  const [showExcelUpload, setShowExcelUpload] = useState(false);
+  const [excelFile, setExcelFile] = useState<File | null>(null);
+  const [excelUploading, setExcelUploading] = useState(false);
+
+  // 우측 탭
+  const [rightTab, setRightTab] = useState<"tree" | "version" | "history">("tree");
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 트리 편집 state
+  const [editingTree, setEditingTree] = useState<TreeNode[]>([]);
+  const [treeHasChanges, setTreeHasChanges] = useState(false);
+
+  // 공정 마스터 목록
+  const [processOptions, setProcessOptions] = useState<{ code: string; label: string }[]>([]);
+  useEffect(() => {
+    apiClient.get("/process-info/processes?useYn=Y").then((res) => {
+      const list = res.data?.data || [];
+      setProcessOptions(list.map((p: any) => ({ code: p.process_code, label: `${p.process_name} (${p.process_code})` })));
+    }).catch(() => {});
+  }, []);
+
+  // 트리뷰 행 선택 / 수정 모달
+  const [selectedTreeNodeId, setSelectedTreeNodeId] = useState<string | null>(null);
+  const [editingNodeId, setEditingNodeId] = useState<string | null>(null);
+  const [treeEditModalOpen, setTreeEditModalOpen] = useState(false);
+  const [treeEditTarget, setTreeEditTarget] = useState<TreeNode | null>(null);
+  const [treeEditForm, setTreeEditForm] = useState<Record<string, any>>({});
+
+  // 역전개 (Where Used)
+  const [treeViewMode, setTreeViewMode] = useState<"forward" | "reverse">("forward");
+  const [whereUsedData, setWhereUsedData] = useState<any[]>([]);
+  const [whereUsedLoading, setWhereUsedLoading] = useState(false);
+  const [originalDetailIds, setOriginalDetailIds] = useState<Set<string>>(new Set());
+  const [addTargetParentId, setAddTargetParentId] = useState<string | null>(null);
+  const [treeItemSearchOpen, setTreeItemSearchOpen] = useState(false);
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+  // ─── 데이터 로드 ──────────────────────────────
+  const fetchBomList = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+
+      const res = await apiClient.post(`/table-management/tables/${BOM_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "created_at", order: "desc" },
+      });
+
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setBomList(rows);
+      setTotalCount(rows.length);
+    } catch (err: any) {
+      toast.error("BOM 목록 조회에 실패했어요");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchBomList();
+  }, [fetchBomList]);
+
+  // 카테고리 옵션 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      try {
+        const columns = ["bom_type", "status"];
+        const detailColumns = ["process_type"];
+        const results: Record<string, { code: string; label: string }[]> = {};
+
+        for (const col of columns) {
+          try {
+            const res = await apiClient.get(`/table-categories/${BOM_TABLE}/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              const flatten = (items: any[]): { code: string; label: string }[] => {
+                const result: { code: string; label: string }[] = [];
+                for (const item of items) {
+                  result.push({ code: item.value || item.code, label: item.label || item.value });
+                  if (item.children?.length) {
+                    result.push(...flatten(item.children));
+                  }
+                }
+                return result;
+              };
+              results[col] = flatten(res.data.data);
+            }
+          } catch {}
+        }
+
+        // bom_detail 테이블의 카테고리
+        for (const col of detailColumns) {
+          try {
+            const res = await apiClient.get(`/table-categories/bom_detail/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              const flatten = (items: any[]): { code: string; label: string }[] => {
+                const result: { code: string; label: string }[] = [];
+                for (const item of items) {
+                  result.push({ code: item.value || item.code, label: item.label || item.value });
+                  if (item.children?.length) result.push(...flatten(item.children));
+                }
+                return result;
+              };
+              results[col] = flatten(res.data.data);
+            }
+          } catch {}
+        }
+
+        // item_info의 division 카테고리
+        try {
+          const res = await apiClient.get(`/table-categories/item_info/division/values`);
+          if (res.data?.data?.length > 0) {
+            const flatten = (items: any[]): { code: string; label: string }[] => {
+              const result: { code: string; label: string }[] = [];
+              for (const item of items) {
+                result.push({ code: item.valueCode || item.value || item.code, label: item.valueLabel || item.label || item.value });
+                if (item.children?.length) result.push(...flatten(item.children));
+              }
+              return result;
+            };
+            results["division"] = flatten(res.data.data);
+          }
+        } catch {}
+
+        setCategoryOptions(results);
+      } catch {}
+    };
+    loadCategories();
+  }, []);
+
+  // ─── BOM 상세 로드 ────────────────────────────
+  const fetchBomDetail = useCallback(async (bomId: string) => {
+    setDetailLoading(true);
+    try {
+      // 헤더 조회
+      const headerRes = await apiClient.get(`/bom/${bomId}/header`);
+      const header = headerRes.data?.data || headerRes.data;
+      setBomHeader(header);
+      setCurrentVersionId(header?.current_version_id || null);
+
+      // 디테일 조회 (현재 버전)
+      const versionId = header?.current_version_id;
+      const detailFilters: any[] = [{ columnName: "bom_id", operator: "equals", value: bomId }];
+      if (versionId) {
+        detailFilters.push({ columnName: "version_id", operator: "equals", value: versionId });
+      }
+
+      const detailRes = await apiClient.post(`/table-management/tables/${BOM_DETAIL_TABLE}/data`, {
+        page: 1,
+        size: 1000,
+        dataFilter: { enabled: true, filters: detailFilters },
+        sort: { columnName: "parent_detail_id", order: "asc" },
+      });
+
+      let details = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+
+      // item_info 조인을 위해 child_item_id 수집
+      const itemIds = [...new Set(details.map((d: any) => d.child_item_id).filter(Boolean))];
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1,
+            size: 1000,
+            dataFilter: {
+              enabled: true,
+              filters: [{ columnName: "id", operator: "in", value: itemIds }],
+            },
+          });
+          const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+          const itemMap = new Map(items.map((i: any) => [i.id, i]));
+
+          details = details.map((d: any) => {
+            const item = itemMap.get(d.child_item_id) as any;
+            const divisionRaw = item?.division || "";
+            // 카테고리 코드 → 라벨 변환 (쉼표 구분 다중값 지원)
+            const divisionLabel = divisionRaw.split(",").map((code: string) => {
+              const c = code.trim();
+              return categoryOptions["division"]?.find((o) => o.code === c)?.label || c;
+            }).filter((v: string) => v && v !== "s").join(", ");
+            return {
+              ...d,
+              item_number: item?.item_number || "",
+              item_name: item?.item_name || "",
+              item_type: divisionLabel,
+              unit: d.unit || item?.unit || "",
+              spec: item?.size || item?.spec || "",
+              writer: d.writer || "",
+              updated_date: d.updated_at || d.updated_date || "",
+            };
+          });
+        } catch {}
+      }
+
+      setBomDetails(details);
+      const tree = buildTree(details);
+      setTreeNodes(tree);
+
+      // 편집용 트리 동기화
+      setEditingTree(buildTree(details));
+      setOriginalDetailIds(new Set(details.map((d: any) => d.id)));
+      setTreeHasChanges(false);
+      // 기본 전개: 모든 노드 + 가상 루트 펼침
+      const allIds = new Set<string>();
+      if (header?.id) allIds.add(`__root_${header.id}`);
+      const collectIds = (nodes: TreeNode[]) => {
+        for (const n of nodes) {
+          allIds.add(n.id || "");
+          if (n.children.length > 0) collectIds(n.children);
+        }
+      };
+      collectIds(tree);
+      setExpandedNodes(allIds);
+    } catch (err: any) {
+      toast.error("BOM 상세 조회에 실패했어요");
+    } finally {
+      setDetailLoading(false);
+    }
+  }, [categoryOptions]);
+
+  // 버전 목록 로드
+  const fetchVersions = useCallback(async (bomId: string) => {
+    setVersionLoading(true);
+    try {
+      const res = await apiClient.get(`/bom/${bomId}/versions`);
+      const resData = res.data;
+      setVersions(resData?.data || []);
+      setCurrentVersionId(resData?.currentVersionId || null);
+    } catch (err: any) {
+      toast.error("버전 목록 조회에 실패했어요");
+    } finally {
+      setVersionLoading(false);
+    }
+  }, []);
+
+  // 이력 목록 로드
+  const fetchHistory = useCallback(async (bomId: string) => {
+    setHistoryLoading(true);
+    try {
+      const res = await apiClient.get(`/bom/${bomId}/history`);
+      setHistoryList(res.data?.data || []);
+    } catch (err: any) {
+      toast.error("이력 조회에 실패했어요");
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, []);
+
+  // BOM 선택 시 상세 로드
+  useEffect(() => {
+    if (selectedBomId) {
+      fetchBomDetail(selectedBomId);
+      if (rightTab === "version") fetchVersions(selectedBomId);
+      if (rightTab === "history") fetchHistory(selectedBomId);
+    } else {
+      setBomHeader(null);
+      setBomDetails([]);
+      setTreeNodes([]);
+      setEditingTree([]);
+      setTreeHasChanges(false);
+      setOriginalDetailIds(new Set());
+      setExpandedNodes(new Set());
+      setVersions([]);
+      setHistoryList([]);
+    }
+  }, [selectedBomId, fetchBomDetail, fetchVersions, fetchHistory, rightTab]);
+
+  // ─── 트리 토글 핸들러 ─────────────────────────
+  const toggleTreeNode = useCallback((nodeId: string) => {
+    const toggle = (nodes: TreeNode[]): TreeNode[] =>
+      nodes.map((n) =>
+        n.id === nodeId
+          ? { ...n, expanded: !n.expanded }
+          : { ...n, children: toggle(n.children) }
+      );
+    setTreeNodes((prev) => toggle(prev));
+  }, []);
+
+  const flatTree = useMemo(() => flattenTree(treeNodes), [treeNodes]);
+
+  // ─── 트리 편집 헬퍼 ──────────────────────────
+
+  // 트리 노드 토글 (펼침/접음)
+  const toggleEditTreeNode = useCallback((nodeId: string) => {
+    setExpandedNodes((prev) => {
+      const next = new Set(prev);
+      if (next.has(nodeId)) next.delete(nodeId);
+      else next.add(nodeId);
+      return next;
+    });
+  }, []);
+
+  // 전체 펼침
+  const expandAll = useCallback(() => {
+    const allIds = new Set<string>();
+    if (bomHeader?.id) allIds.add(`__root_${bomHeader.id}`);
+    const collect = (nodes: TreeNode[]) => {
+      for (const n of nodes) {
+        allIds.add(n.id || n._tempId || "");
+        if (n.children.length > 0) collect(n.children);
+      }
+    };
+    collect(editingTree);
+    setExpandedNodes(allIds);
+  }, [editingTree, bomHeader]);
+
+  // 역전개 (Where Used) 조회 — 현재 BOM 품목이 어디에 사용되는지
+  const fetchWhereUsed = useCallback(async () => {
+    if (!bomHeader?.item_code && !bomHeader?.item_id) return;
+    setWhereUsedLoading(true);
+    try {
+      // bom_detail에서 child_item_id가 현재 품목인 행 조회
+      const itemId = bomHeader.item_id || bomHeader.id;
+      const res = await apiClient.post(`/table-management/tables/bom_detail/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "child_item_id", operator: "equals", value: itemId }] },
+        autoFilter: true,
+      });
+      const details = res.data?.data?.data || res.data?.data?.rows || [];
+
+      // 각 bom_id로 BOM 마스터 정보 조회
+      const bomIds = [...new Set(details.map((d: any) => d.bom_id).filter(Boolean))];
+      const results: any[] = [];
+      for (const bomId of bomIds) {
+        try {
+          const bomRes = await apiClient.post(`/table-management/tables/bom/data`, {
+            page: 1, size: 1,
+            dataFilter: { enabled: true, filters: [{ columnName: "id", operator: "equals", value: bomId }] },
+            autoFilter: true,
+          });
+          const bom = (bomRes.data?.data?.data || bomRes.data?.data?.rows || [])[0];
+          if (bom) {
+            const detail = details.find((d: any) => d.bom_id === bomId);
+            results.push({
+              bom_id: bomId,
+              item_code: bom.item_code || bom.item_number || "",
+              item_name: bom.item_name || "",
+              quantity: detail?.quantity || "1",
+              unit: detail?.unit || "",
+              process_type: detail?.process_type || "",
+            });
+          }
+        } catch {}
+      }
+      setWhereUsedData(results);
+    } catch {
+      setWhereUsedData([]);
+    } finally {
+      setWhereUsedLoading(false);
+    }
+  }, [bomHeader]);
+
+  // 전체 접음
+  const collapseAll = useCallback(() => {
+    // 루트는 항상 펼침 유지, 나머지만 접음
+    const rootOnly = new Set<string>();
+    if (bomHeader?.id) rootOnly.add(`__root_${bomHeader.id}`);
+    setExpandedNodes(rootOnly);
+  }, [bomHeader]);
+
+  // 편집 트리 평탄화 (useMemo) — 가상 루트(BOM 마스터) 포함
+  const editingFlatTree = useMemo(() => {
+    const result: TreeNode[] = [];
+    // 가상 루트 (BOM 마스터)
+    if (bomHeader) {
+      const rootId = `__root_${bomHeader.id}`;
+      result.push({
+        id: rootId,
+        bom_id: bomHeader.id,
+        _tempId: undefined,
+        _isNew: false,
+        _isModified: false,
+        _level: 0,
+        _isVirtualRoot: true,
+        item_number: bomHeader.item_code || bomHeader.item_number || "",
+        item_name: bomHeader.item_name || "",
+        quantity: bomHeader.base_qty || "1",
+        unit: bomHeader.unit || "",
+        process_type: "",
+        loss_rate: "",
+        remark: bomHeader.remark || "",
+        spec: "",
+        writer: "",
+        updated_date: "",
+        item_type: "",
+        children: editingTree,
+      } as any);
+    }
+    // 하위 노드 평탄화 (레벨 +1)
+    const flatten = (nodes: TreeNode[], level: number) => {
+      for (const node of nodes) {
+        const nodeKey = node.id || node._tempId || "";
+        result.push({ ...node, _level: level });
+        if (node.children.length > 0 && expandedNodes.has(nodeKey)) {
+          flatten(node.children, level + 1);
+        }
+      }
+    };
+    const rootId = bomHeader ? `__root_${bomHeader.id}` : "";
+    if (!bomHeader || expandedNodes.has(rootId)) {
+      flatten(editingTree, bomHeader ? 1 : 0);
+    }
+    return result;
+  }, [editingTree, expandedNodes, bomHeader]);
+
+  // 트리에서 노드를 찾아서 업데이트
+  const updateTreeNode = (tree: TreeNode[], nodeId: string, updater: (node: TreeNode) => TreeNode): TreeNode[] => {
+    return tree.map(node => {
+      if ((node.id || node._tempId) === nodeId) return updater(node);
+      if (node.children.length > 0) return { ...node, children: updateTreeNode(node.children, nodeId, updater) };
+      return node;
+    });
+  };
+
+  // 트리에서 노드 삭제 (하위 포함)
+  const removeTreeNode = (tree: TreeNode[], nodeId: string): TreeNode[] => {
+    return tree.filter(node => {
+      if ((node.id || node._tempId) === nodeId) return false;
+      if (node.children.length > 0) node.children = removeTreeNode(node.children, nodeId);
+      return true;
+    });
+  };
+
+  // 트리에 자식 노드 추가
+  const addChildToNode = (tree: TreeNode[], parentId: string | null, newNode: TreeNode): TreeNode[] => {
+    if (parentId === null) return [...tree, newNode];
+    return tree.map(node => {
+      const nodeKey = node.id || node._tempId;
+      if (nodeKey === parentId) {
+        return { ...node, children: [...node.children, newNode], expanded: true };
+      }
+      if (node.children.length > 0) return { ...node, children: addChildToNode(node.children, parentId, newNode) };
+      return node;
+    });
+  };
+
+  // 노드 찾기 헬퍼
+  const findNodeById = (nodes: TreeNode[], id: string): TreeNode | null => {
+    for (const node of nodes) {
+      if ((node.id || node._tempId) === id) return node;
+      const found = findNodeById(node.children, id);
+      if (found) return found;
+    }
+    return null;
+  };
+
+  // 인라인 필드 변경
+  const handleTreeFieldChange = (nodeId: string, field: string, value: string) => {
+    setEditingTree(prev => updateTreeNode(prev, nodeId, node => ({
+      ...node, [field]: value, _isModified: !node._isNew ? true : node._isModified,
+    })));
+    setTreeHasChanges(true);
+  };
+
+  // 노드 삭제
+  const handleTreeDeleteNode = async (nodeId: string) => {
+    if (!await confirm("이 품목과 하위 품목을 삭제할까요?", { variant: "destructive" })) return;
+    setEditingTree(prev => removeTreeNode(prev, nodeId));
+    setTreeHasChanges(true);
+  };
+
+  // 하위 품목 추가 시작
+  const handleTreeAddChild = (parentId: string | null) => {
+    setAddTargetParentId(parentId);
+    setTreeItemSearchOpen(true);
+    searchItems("");
+  };
+
+  // 트리 품목 선택 완료 (트리에 추가)
+  const handleTreeItemSelect = (item: any) => {
+    // 1. 자기 자신 추가 방지 (BOM 마스터 품목과 동일한 품목)
+    if (bomHeader && (item.id === bomHeader.item_id || item.item_number === bomHeader.item_code)) {
+      toast.error("자기 자신을 BOM에 추가할 수 없습니다");
+      return;
+    }
+
+    // 2. 같은 경로에 동일 품목 중복 방지 (조상 노드에 같은 품목이 있으면 순환)
+    const getAncestorItemIds = (tree: TreeNode[], targetId: string | null): Set<string> => {
+      const ids = new Set<string>();
+      if (!targetId) return ids;
+      const collectPath = (nodes: TreeNode[], path: TreeNode[]): boolean => {
+        for (const n of nodes) {
+          const nk = n.id || n._tempId || "";
+          if (nk === targetId) {
+            path.forEach(p => { if (p.child_item_id) ids.add(p.child_item_id); });
+            if (n.child_item_id) ids.add(n.child_item_id);
+            return true;
+          }
+          if (n.children.length > 0 && collectPath(n.children, [...path, n])) return true;
+        }
+        return false;
+      };
+      collectPath(tree, []);
+      return ids;
+    };
+    const ancestorIds = getAncestorItemIds(editingTree, addTargetParentId);
+    if (ancestorIds.has(item.id)) {
+      toast.error("상위 경로에 이미 동일 품목이 있어 순환 참조가 발생합니다");
+      return;
+    }
+
+    const tempId = `temp_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+    const parentNode = addTargetParentId ? findNodeById(editingTree, addTargetParentId) : null;
+    const newLevel = parentNode ? ((parentNode._level ?? parentNode.level ?? 0) as number) + 1 : 0;
+
+    const newNode: TreeNode = {
+      id: "",
+      _tempId: tempId,
+      _isNew: true,
+      bom_id: selectedBomId || "",
+      parent_detail_id: addTargetParentId,
+      child_item_id: item.id,
+      item_number: item.item_number || "",
+      item_name: item.item_name || "",
+      item_type: item.division || "",
+      level: String(newLevel),
+      quantity: "1",
+      unit: item.unit || "",
+      process_type: "",
+      loss_rate: "0",
+      remark: "",
+      children: [],
+      expanded: true,
+    };
+
+    setEditingTree(prev => addChildToNode(prev, addTargetParentId, newNode));
+    setExpandedNodes(prev => {
+      const next = new Set(prev);
+      next.add(tempId);
+      if (addTargetParentId) next.add(addTargetParentId);
+      return next;
+    });
+    setTreeHasChanges(true);
+    setTreeItemSearchOpen(false);
+  };
+
+  // ─── 트리 저장 ────────────────────────────────
+  const handleSaveTree = async () => {
+    if (!selectedBomId || !treeHasChanges) return;
+
+    setSaving(true);
+    try {
+      // 1. version_id 확보
+      let versionId = currentVersionId;
+      if (!versionId) {
+        const initRes = await apiClient.post(`/bom/${selectedBomId}/initialize-version`, {});
+        versionId = initRes.data?.data?.versionId;
+      }
+
+      // 2. 트리 평탄화
+      const flatNodes: any[] = [];
+      const flattenForSave = (nodes: TreeNode[], parentId: string | null, level: number) => {
+        nodes.forEach((node, idx) => {
+          const nodeKey = node.id || node._tempId || "";
+          flatNodes.push({
+            ...node,
+            _nodeKey: nodeKey,
+            parent_detail_id: parentId,
+            level: String(level),
+            seq_no: String(idx + 1),
+            bom_id: selectedBomId,
+            version_id: versionId,
+          });
+          if (node.children.length > 0) flattenForSave(node.children, nodeKey, level + 1);
+        });
+      };
+      flattenForSave(editingTree, null, 0);
+
+      // 3. 분류: INSERT / UPDATE / DELETE
+      const currentIds = new Set(flatNodes.filter(n => n.id && !n._isNew).map(n => n.id));
+      const toDelete = [...originalDetailIds].filter(id => !currentIds.has(id));
+      const toInsert = flatNodes.filter(n => n._isNew);
+      const toUpdate = flatNodes.filter(n => n.id && !n._isNew && n._isModified);
+
+      // 4. DELETE
+      if (toDelete.length > 0) {
+        await apiClient.delete(`/table-management/tables/bom_detail/delete`, {
+          data: toDelete.map(id => ({ id })),
+        });
+      }
+
+      // 5. INSERT (순서 중요: 부모 먼저)
+      const tempToRealId: Record<string, string> = {};
+      for (const node of toInsert) {
+        let parentId = node.parent_detail_id;
+        if (parentId && tempToRealId[parentId]) parentId = tempToRealId[parentId];
+
+        const newId = crypto.randomUUID();
+        const res = await apiClient.post(`/table-management/tables/bom_detail/add`, {
+          id: newId,
+          bom_id: selectedBomId,
+          version_id: versionId,
+          parent_detail_id: parentId && !parentId.startsWith("temp_") ? parentId : null,
+          child_item_id: node.child_item_id,
+          level: node.level,
+          seq_no: node.seq_no,
+          quantity: node.quantity || "1",
+          unit: node.unit || "",
+          process_type: node.process_type || "",
+          loss_rate: node.loss_rate || "0",
+          remark: node.remark || "",
+          writer: user?.userId || "",
+          company_code: user?.company_code || "",
+        });
+
+        const realId = res.data?.data?.id || newId;
+        if (node._tempId) tempToRealId[node._tempId] = realId;
+      }
+
+      // 6. INSERT된 노드의 자식들 parent_detail_id 업데이트
+      for (const node of toInsert) {
+        if (!node._tempId) continue;
+        const childNodes = flatNodes.filter(n => n.parent_detail_id === node._tempId);
+        for (const child of childNodes) {
+          if (child.id && !child._isNew && tempToRealId[node._tempId]) {
+            await apiClient.put(`/table-management/tables/bom_detail/edit`, {
+              originalData: { id: child.id },
+              updatedData: { parent_detail_id: tempToRealId[node._tempId] },
+            });
+          }
+        }
+      }
+
+      // 7. UPDATE
+      for (const node of toUpdate) {
+        let parentId = node.parent_detail_id;
+        if (parentId && tempToRealId[parentId]) parentId = tempToRealId[parentId];
+
+        await apiClient.put(`/table-management/tables/bom_detail/edit`, {
+          originalData: { id: node.id },
+          updatedData: {
+            bom_id: selectedBomId,
+            version_id: versionId,
+            quantity: node.quantity,
+            unit: node.unit,
+            process_type: node.process_type,
+            loss_rate: node.loss_rate,
+            remark: node.remark,
+            level: node.level,
+            seq_no: node.seq_no,
+            parent_detail_id: parentId,
+          },
+        });
+      }
+
+      // 이력 자동 기록 (변경 내용 상세)
+      const historyParts: string[] = [];
+      // 추가된 품목
+      for (const n of toInsert) {
+        historyParts.push(`${n.item_number || "품목"} 추가 (소요량: ${n.quantity || 1})`);
+      }
+      // 수정된 품목 (변경 전후 비교)
+      for (const n of toUpdate) {
+        const orig = bomDetails.find((d: any) => d.id === n.id);
+        if (orig) {
+          const changes: string[] = [];
+          if (String(orig.quantity || "") !== String(n.quantity || "")) changes.push(`소요량 ${orig.quantity || "-"} → ${n.quantity || "-"}`);
+          if (String(orig.process_type || "") !== String(n.process_type || "")) changes.push(`공정 변경`);
+          if (String(orig.loss_rate || "") !== String(n.loss_rate || "")) changes.push(`손실율 ${orig.loss_rate || "0"} → ${n.loss_rate || "0"}`);
+          if (String(orig.remark || "") !== String(n.remark || "")) changes.push(`비고 변경`);
+          if (changes.length > 0) historyParts.push(`${n.item_number || "품목"}: ${changes.join(", ")}`);
+        }
+      }
+      // 삭제된 품목
+      for (const id of toDelete) {
+        const orig = bomDetails.find((d: any) => d.id === id);
+        historyParts.push(`${orig?.item_number || "품목"} 삭제`);
+      }
+      if (historyParts.length > 0) {
+        apiClient.post(`/bom/${selectedBomId}/history`, {
+          change_type: historyParts.some(p => p.includes("추가")) ? "추가" : historyParts.some(p => p.includes("삭제")) ? "삭제" : "수정",
+          change_description: historyParts.join("; "),
+        }).catch(() => {});
+      }
+
+      toast.success("BOM 트리가 저장되었어요");
+      setTreeHasChanges(false);
+      fetchBomDetail(selectedBomId);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "트리 저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ─── BOM 삭제 ────────────────────────────────
+  const handleDeleteBom = async () => {
+    if (checkedIds.length === 0) {
+      toast.error("삭제할 BOM을 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`선택한 ${checkedIds.length}건의 BOM을 삭제할까요?`);
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${BOM_TABLE}/delete`, {
+        data: checkedIds.map((id) => ({ id })),
+      });
+      toast.success("BOM이 삭제되었어요");
+      setCheckedIds([]);
+      setSelectedBomId(null);
+      fetchBomList();
+    } catch {
+      toast.error("BOM 삭제에 실패했어요");
+    }
+  };
+
+  // ─── BOM 등록/수정 ───────────────────────────
+  const openCreateModal = () => {
+    setIsEditMode(false);
+    setMasterForm({
+      item_id: "",
+      item_code: "",
+      item_name: "",
+      bom_type: "",
+      base_qty: "1",
+      unit: "",
+      version: "1.0",
+      status: "draft",
+      effective_date: "",
+      expiry_date: "",
+      remark: "",
+    });
+    setModalDetailRows([]);
+    setIsModalOpen(true);
+  };
+
+  const openEditModal = () => {
+    if (!bomHeader) return;
+    setIsEditMode(true);
+    setMasterForm({
+      id: bomHeader.id,
+      item_id: bomHeader.item_id || "",
+      item_code: bomHeader.item_code || bomHeader.item_number || "",
+      item_name: bomHeader.item_name || "",
+      bom_type: bomHeader.bom_type || "",
+      base_qty: bomHeader.base_qty || "1",
+      unit: bomHeader.unit || "",
+      version: bomHeader.version || "1.0",
+      status: bomHeader.status || "draft",
+      effective_date: bomHeader.effective_date || "",
+      expiry_date: bomHeader.expiry_date || "",
+      remark: bomHeader.remark || "",
+    });
+
+    setModalDetailRows(
+      bomDetails.map((d, i) => ({
+        _idx: i,
+        child_item_id: d.child_item_id || "",
+        item_number: d.item_number || "",
+        item_name: d.item_name || "",
+        quantity: d.quantity || "1",
+        unit: d.unit || "",
+        process_type: d.process_type || "",
+        loss_rate: d.loss_rate || "0",
+        remark: d.remark || "",
+      }))
+    );
+    setIsModalOpen(true);
+  };
+
+  const handleSaveBom = async () => {
+    if (!masterForm.item_id) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+    if (!masterForm.bom_type) {
+      toast.error("BOM 유형을 선택해주세요");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const bomFields: Record<string, any> = {
+        item_id: masterForm.item_id,
+        item_code: masterForm.item_code,
+        item_name: masterForm.item_name,
+        bom_type: masterForm.bom_type,
+        base_qty: masterForm.base_qty || "1",
+        unit: masterForm.unit || "",
+        version: masterForm.version || "1.0",
+        status: masterForm.status || "draft",
+        effective_date: masterForm.effective_date || null,
+        expiry_date: masterForm.expiry_date || null,
+        remark: masterForm.remark || "",
+        writer: user?.userId || "",
+        company_code: user?.company_code || "",
+      };
+
+      let bomId: string;
+
+      if (isEditMode && masterForm.id) {
+        await apiClient.put(`/table-management/tables/${BOM_TABLE}/edit`, {
+          originalData: { id: masterForm.id },
+          updatedData: bomFields,
+        });
+        bomId = masterForm.id;
+      } else {
+        const res = await apiClient.post(`/table-management/tables/${BOM_TABLE}/add`, { id: crypto.randomUUID(), ...bomFields });
+        bomId = res.data?.data?.id || res.data?.id;
+      }
+
+      // 초기 버전 생성 (신규 BOM)
+      if (!isEditMode && bomId) {
+        try {
+          await apiClient.post(`/bom/${bomId}/initialize-version`, {});
+        } catch {}
+      }
+
+      // 디테일 저장: 기존 삭제 후 재등록
+      if (isEditMode && masterForm.id) {
+        const existingDetails = bomDetails.filter((d) => d.bom_id === bomId);
+        if (existingDetails.length > 0) {
+          await apiClient.delete(`/table-management/tables/${BOM_DETAIL_TABLE}/delete`, {
+            data: existingDetails.map((d) => ({ id: d.id })),
+          });
+        }
+      }
+
+      // 현재 버전 ID 가져오기
+      let versionId = currentVersionId;
+      if (!versionId && bomId) {
+        try {
+          const verRes = await apiClient.get(`/bom/${bomId}/versions`);
+          const verData = verRes.data?.data || verRes.data;
+          versionId = verData?.currentVersionId || null;
+        } catch {}
+      }
+
+      for (let i = 0; i < modalDetailRows.length; i++) {
+        const row = modalDetailRows[i];
+        if (!row.child_item_id) continue;
+        await apiClient.post(`/table-management/tables/${BOM_DETAIL_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          bom_id: bomId,
+          version_id: versionId || null,
+          parent_detail_id: null,
+          child_item_id: row.child_item_id,
+          quantity: row.quantity || "1",
+          unit: row.unit || "",
+          process_type: row.process_type || "",
+          loss_rate: row.loss_rate || "0",
+          remark: row.remark || "",
+          level: "0",
+          seq_no: String(i + 1),
+          writer: user?.userId || "",
+          company_code: user?.company_code || "",
+        });
+      }
+
+      toast.success(isEditMode ? "BOM이 수정되었어요" : "BOM이 등록되었어요");
+      setIsModalOpen(false);
+      fetchBomList();
+      if (bomId) {
+        setSelectedBomId(bomId);
+        fetchBomDetail(bomId);
+        fetchVersions(bomId);
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "BOM 저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ─── 품목 검색 ───────────────────────────────
+  const searchItems = async (keyword?: string) => {
+    const kw = (keyword ?? itemSearchKeyword).trim();
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (kw) {
+        filters.push({ columnName: "item_name", operator: "contains", value: kw });
+      }
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1,
+        size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      let rows = res.data?.data?.data || res.data?.data?.rows || [];
+
+      // 키워드가 있고 품명으로 못 찾으면 품목코드로 재시도
+      if (kw && rows.length === 0) {
+        const res2 = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 50,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "contains", value: kw }] },
+          autoFilter: true,
+        });
+        rows = res2.data?.data?.data || res2.data?.data?.rows || [];
+      }
+      setItemSearchResults(rows);
+    } catch {
+      toast.error("품목 검색에 실패했어요");
+    } finally {
+      setItemSearchLoading(false);
+    }
+  };
+
+  const selectItem = (item: any) => {
+    if (itemSearchTarget === "master") {
+      setMasterForm((prev) => ({
+        ...prev,
+        item_id: item.id,
+        item_code: item.item_number || "",
+        item_name: item.item_name || "",
+        unit: item.unit || prev.unit,
+      }));
+      setShowItemSearchModal(false);
+    } else {
+      setModalDetailRows((prev) => [
+        ...prev,
+        {
+          _idx: prev.length,
+          child_item_id: item.id,
+          item_number: item.item_number || "",
+          item_name: item.item_name || "",
+          quantity: "1",
+          unit: item.unit || "",
+          process_type: "",
+          loss_rate: "0",
+          remark: "",
+        },
+      ]);
+      setShowItemSearchModal(false);
+    }
+    setItemSearchKeyword("");
+    setItemSearchResults([]);
+  };
+
+  // ─── 버전 관리 ───────────────────────────────
+  const handleCreateVersion = async () => {
+    if (!selectedBomId) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions`, {
+        versionName: newVersionName.trim() || undefined,
+      });
+      apiClient.post(`/bom/${selectedBomId}/history`, { change_type: "버전변경", change_description: `새 버전 생성: ${newVersionName.trim() || "자동"}` }).catch(() => {});
+      toast.success("새 버전이 생성되었어요");
+      setShowNewVersionDialog(false);
+      setNewVersionName("");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 생성에 실패했어요");
+    }
+  };
+
+  const handleLoadVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions/${versionId}/load`);
+      toast.success("버전을 불러왔어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 불러오기에 실패했어요");
+    }
+  };
+
+  const handleActivateVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    const ok = await confirm("이 버전을 사용 확정할까요? 기존 활성 버전은 비활성 처리돼요.");
+    if (!ok) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions/${versionId}/activate`);
+      apiClient.post(`/bom/${selectedBomId}/history`, { change_type: "버전변경", change_description: `버전 사용 확정` }).catch(() => {});
+      toast.success("버전이 사용 확정되었어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 확정에 실패했어요");
+    }
+  };
+
+  const handleDeleteVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    const ok = await confirm("이 버전을 삭제할까요? 관련 디테일 데이터도 함께 삭제돼요.");
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/bom/${selectedBomId}/versions/${versionId}`);
+      toast.success("버전이 삭제되었어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 이력 관리 ───────────────────────────────
+  const handleAddHistory = async () => {
+    if (!selectedBomId) return;
+    if (!newHistory.change_type) {
+      toast.error("변경 유형을 입력해주세요");
+      return;
+    }
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/history`, {
+        change_type: newHistory.change_type,
+        change_description: newHistory.change_description,
+        changed_by: user?.userId || "",
+      });
+      toast.success("이력이 추가되었어요");
+      setShowHistoryDialog(false);
+      setNewHistory({ change_type: "", change_description: "" });
+      fetchHistory(selectedBomId);
+    } catch (err: any) {
+      toast.error("이력 추가에 실패했어요");
+    }
+  };
+
+  // ─── 엑셀 업로드 ────────────────────────────
+  const handleExcelUpload = async () => {
+    if (!excelFile) {
+      toast.error("엑셀 파일을 선택해주세요");
+      return;
+    }
+    setExcelUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", excelFile);
+
+      const endpoint = selectedBomId
+        ? `/bom/${selectedBomId}/excel-upload-version`
+        : `/bom/excel-upload`;
+
+      const res = await apiClient.post(endpoint, formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+
+      const result = res.data?.data || res.data;
+      if (result?.success) {
+        toast.success(`엑셀 업로드 완료 (${result.insertedCount}건 등록)`);
+        setShowExcelUpload(false);
+        setExcelFile(null);
+        fetchBomList();
+        if (result.createdBomId) {
+          setSelectedBomId(result.createdBomId);
+        }
+      } else {
+        toast.error(result?.errors?.join("\n") || "엑셀 업로드에 실패했어요");
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "엑셀 업로드에 실패했어요");
+    } finally {
+      setExcelUploading(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (!selectedBomId) {
+      toast.error("BOM을 선택해주세요");
+      return;
+    }
+    try {
+      const res = await apiClient.get(`/bom/${selectedBomId}/excel-download`);
+      const data = res.data?.data || [];
+      if (data.length === 0) {
+        toast.error("다운로드할 데이터가 없어요");
+        return;
+      }
+      exportToExcel(data, `BOM_${bomHeader?.item_code || selectedBomId}`);
+      toast.success("엑셀 다운로드를 시작했어요");
+    } catch {
+      toast.error("엑셀 다운로드에 실패했어요");
+    }
+  };
+
+  // ─── 상태 뱃지 렌더 ───────────────────────────
+  const renderStatusBadge = (status?: string) => {
+    const info = STATUS_MAP[status || ""] || { label: status || "-", className: "bg-muted text-muted-foreground" };
+    return (
+      <span className={cn("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium", info.className)}>
+        <span className="w-1.5 h-1.5 rounded-full bg-current" />
+        {info.label}
+      </span>
+    );
+  };
+
+  // ─── 렌더링 ──────────────────────────────────
+  return (
+    <div className="flex flex-col h-full">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 px-5 py-3 text-xs text-muted-foreground bg-muted/50 border-b shrink-0">
+        <span>생산관리</span>
+        <ChevronRight className="w-3.5 h-3.5 text-muted-foreground/50" />
+        <span className="font-semibold text-foreground">BOM 관리</span>
+      </nav>
+
+      {/* 검색 필터 */}
+      <div className="px-4 py-2.5 border-b bg-muted/50 shrink-0">
+        <DynamicSearchFilter
+          tableName={BOM_TABLE}
+          filterId="c16-bom"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={totalCount}
+          extraActions={
+            <div className="flex items-center gap-2">
+              <Button size="sm" variant="outline" className="h-8 text-xs" onClick={() => setShowExcelUpload(true)}>
+                <Upload className="w-3.5 h-3.5 mr-1.5" />
+                엑셀 업로드
+              </Button>
+              <Button size="sm" variant="outline" className="h-8 text-xs" onClick={handleExcelDownload} disabled={!selectedBomId}>
+                <Download className="w-3.5 h-3.5 mr-1.5" />
+                엑셀 다운로드
+              </Button>
+            </div>
+          }
+        />
+      </div>
+
+      {/* 메인 콘텐츠: 좌우 분할 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card mx-3 mb-3">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: BOM 목록 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold text-foreground">BOM 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {totalCount}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" onClick={openCreateModal}>
+                    <Plus className="w-3.5 h-3.5 mr-1" />
+                    등록
+                  </Button>
+                  <div className="w-px h-4 bg-border mx-0.5" />
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                    onClick={handleDeleteBom}
+                    disabled={checkedIds.length === 0}
+                  >
+                    <Trash2 className="w-3.5 h-3.5 mr-1" />
+                    삭제
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* BOM 목록 테이블 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+                    key: col.key,
+                    label: col.label,
+                    render: col.key === "item_code"
+                      ? (_val: any, row: any) => <span className="font-mono text-[13px]">{row.item_code || row.item_number || "-"}</span>
+                      : col.key === "bom_type"
+                      ? (_val: any, row: any) => <span className="text-[13px]">{BOM_TYPE_OPTIONS.find((o) => o.code === row.bom_type)?.label || row.bom_type || "-"}</span>
+                      : col.key === "status"
+                      ? (_val: any, row: any) => renderStatusBadge(row.status)
+                      : undefined,
+                  }))}
+                  data={ts.groupData(bomList)}
+                  loading={loading}
+                  emptyMessage="등록된 BOM이 없어요"
+                  showCheckbox
+                  checkedIds={checkedIds}
+                  onCheckedChange={setCheckedIds}
+                  selectedId={selectedBomId}
+                  onSelect={(id) => setSelectedBomId(id)}
+                  onRowClick={(row) => setSelectedBomId(row.id)}
+                  showPagination
+                  draggableColumns={false}
+                  columnOrderKey="c16-bom"
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 상세 + 트리뷰 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            {!selectedBomId ? (
+              <div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
+                <Inbox className="w-10 h-10 text-muted-foreground/40" />
+                <p className="text-sm">좌측에서 BOM을 선택해주세요</p>
+              </div>
+            ) : (
+              <div className="flex flex-col h-full">
+                {/* 상세 카드 */}
+                <div className="border-b shrink-0">
+                  <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                    <h3 className="text-[13px] font-bold text-foreground">BOM 상세정보</h3>
+                    <Button size="sm" variant="ghost" onClick={openEditModal}>
+                      <FileText className="w-3.5 h-3.5 mr-1" />
+                      편집
+                    </Button>
+                  </div>
+                  {detailLoading ? (
+                    <div className="flex items-center justify-center py-8">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : bomHeader ? (
+                    <div className="grid grid-cols-2 text-sm">
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">품목코드</span>
+                        <span className="font-mono text-xs">{bomHeader.item_code || bomHeader.item_number || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">품명</span>
+                        <span className="text-xs">{bomHeader.item_name || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">BOM 유형</span>
+                        <span className="text-xs">{BOM_TYPE_OPTIONS.find((o) => o.code === bomHeader.bom_type)?.label || bomHeader.bom_type || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">버전</span>
+                        <span className="text-xs">{bomHeader.version || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">기준수량</span>
+                        <span className="text-xs">{bomHeader.base_qty || "1"} {bomHeader.unit || ""}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">상태</span>
+                        {renderStatusBadge(bomHeader.status)}
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 col-span-2">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">메모</span>
+                        <span className="text-xs text-muted-foreground">{bomHeader.remark || "-"}</span>
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+
+                {/* 하단 탭: 트리뷰 / 버전 / 이력 */}
+                <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+                  <Tabs value={rightTab} onValueChange={(v) => {
+                    setRightTab(v as any);
+                    if (v === "version" && selectedBomId) fetchVersions(selectedBomId);
+                    if (v === "history" && selectedBomId) fetchHistory(selectedBomId);
+                  }}>
+                    <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/50 shrink-0">
+                      <TabsList className="h-8">
+                        <TabsTrigger value="tree" className="text-xs px-3 h-7">
+                          <GitBranch className="w-3.5 h-3.5 mr-1" />
+                          트리뷰
+                        </TabsTrigger>
+                        <TabsTrigger value="version" className="text-xs px-3 h-7">
+                          <Copy className="w-3.5 h-3.5 mr-1" />
+                          버전
+                        </TabsTrigger>
+                        <TabsTrigger value="history" className="text-xs px-3 h-7">
+                          <History className="w-3.5 h-3.5 mr-1" />
+                          이력
+                        </TabsTrigger>
+                      </TabsList>
+
+                    </div>
+
+                    {/* 트리뷰 탭 */}
+                    <TabsContent value="tree" className="flex-1 overflow-auto p-0 m-0">
+                      {/* 상단 액션바 */}
+                      <div className="flex items-center justify-between border-b px-3 py-2 bg-muted/30">
+                        <div className="flex items-center gap-2">
+                          <Button size="sm" variant="outline" onClick={() => handleTreeAddChild(null)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />루트 품목 추가
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => {
+                              if (selectedTreeNodeId && !selectedTreeNodeId.startsWith("__root_")) {
+                                handleTreeAddChild(selectedTreeNodeId);
+                              }
+                            }}
+                            disabled={!selectedTreeNodeId || selectedTreeNodeId.startsWith("__root_")}
+                          >
+                            <Plus className="w-3.5 h-3.5 mr-1" />하위 품목 추가
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                            onClick={() => {
+                              if (selectedTreeNodeId && !selectedTreeNodeId.startsWith("__root_")) {
+                                handleTreeDeleteNode(selectedTreeNodeId);
+                                setSelectedTreeNodeId(null);
+                                setEditingNodeId(null);
+                              }
+                            }}
+                            disabled={!selectedTreeNodeId || selectedTreeNodeId.startsWith("__root_")}
+                          >
+                            <Trash2 className="w-3.5 h-3.5 mr-1" />선택 삭제
+                          </Button>
+                          <div className="w-px h-5 bg-border" />
+                          <div className="flex overflow-hidden rounded-md border">
+                            <button onClick={() => { setTreeViewMode("forward"); }} className={cn("h-7 px-2.5 text-[11px] font-medium transition-colors", treeViewMode === "forward" ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-muted")}>
+                              정전개
+                            </button>
+                            <button onClick={() => { setTreeViewMode("reverse"); fetchWhereUsed(); }} className={cn("h-7 border-l px-2.5 text-[11px] font-medium transition-colors", treeViewMode === "reverse" ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-muted")}>
+                              역전개
+                            </button>
+                          </div>
+                          {treeViewMode === "forward" && (
+                            <>
+                              <Button size="sm" variant="ghost" onClick={expandAll}>
+                                <ChevronsDown className="w-3.5 h-3.5 mr-1" />펼침
+                              </Button>
+                              <Button size="sm" variant="ghost" onClick={collapseAll}>
+                                <ChevronsUp className="w-3.5 h-3.5 mr-1" />접음
+                              </Button>
+                            </>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2">
+                          {treeHasChanges && <Badge variant="secondary" className="text-warning">변경됨</Badge>}
+                          <Button size="sm" onClick={handleSaveTree} disabled={!treeHasChanges || saving}>
+                            {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin mr-1" /> : <Save className="w-3.5 h-3.5 mr-1" />}
+                            저장
+                          </Button>
+                        </div>
+                      </div>
+
+                      {/* 역전개 (Where Used) 뷰 */}
+                      {treeViewMode === "reverse" ? (
+                        <div className="flex-1 overflow-auto">
+                          {whereUsedLoading ? (
+                            <div className="flex h-40 items-center justify-center">
+                              <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                            </div>
+                          ) : (
+                            <div className="p-4">
+                              <div className="flex items-center gap-2 mb-4">
+                                <Package className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-sm font-semibold">{bomHeader?.item_name || ""}</span>
+                                <span className="font-mono text-xs text-muted-foreground">({bomHeader?.item_code || ""})</span>
+                              </div>
+                              <div className="text-xs text-muted-foreground mb-3">사용처 (Where Used)</div>
+                              {whereUsedData.length === 0 ? (
+                                <div className="flex flex-col items-center justify-center h-32 text-muted-foreground gap-2">
+                                  <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                                  <p className="text-xs">이 품목을 사용하는 BOM이 없습니다</p>
+                                </div>
+                              ) : (
+                                <div className="space-y-2">
+                                  {whereUsedData.map((wu, idx) => (
+                                    <div key={idx} className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent/50 cursor-pointer" onClick={() => {
+                                      // 해당 BOM 선택
+                                      setSelectedBomId(wu.bom_id);
+                                      setTreeViewMode("forward");
+                                    }}>
+                                      <Package className="h-4 w-4 text-primary shrink-0" />
+                                      <div className="min-w-0 flex-1">
+                                        <div className="flex items-center gap-2">
+                                          <span className="text-sm font-semibold">{wu.item_name}</span>
+                                          <span className="font-mono text-[11px] text-muted-foreground">({wu.item_code})</span>
+                                        </div>
+                                        <div className="mt-0.5 flex gap-3 text-[11px] text-muted-foreground">
+                                          <span>소요량: <b className="text-foreground">{wu.quantity}</b> {wu.unit}</span>
+                                          {wu.process_type && <span>공정: <b className="text-foreground">{wu.process_type}</b></span>}
+                                        </div>
+                                      </div>
+                                      <ChevronRight className="h-4 w-4 text-muted-foreground/50 shrink-0" />
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      ) : editingFlatTree.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center h-40 text-muted-foreground gap-2">
+                          <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                          <p className="text-xs">등록된 하위 품목이 없습니다</p>
+                          <Button size="sm" variant="outline" onClick={() => handleTreeAddChild(null)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />첫 품목 추가
+                          </Button>
+                        </div>
+                      ) : (
+                        <table className="w-full border-collapse text-xs" style={{ minWidth: "1100px" }}>
+                          <colgroup><col style={{ width: "60px" }} /><col style={{ width: "140px" }} /><col /><col style={{ width: "70px" }} /><col style={{ width: "50px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "150px" }} /><col style={{ width: "80px" }} /></colgroup>
+                          <thead className="sticky top-0 z-10">
+                            <tr className="border-b bg-muted">
+                              <th className="px-2 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">레벨</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">품번</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">품명</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">소요량</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">단위</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">공정구분</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">규격</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">비고</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">작성자</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">수정일시</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">관리품목</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {editingFlatTree.map((node) => {
+                              const nodeKey = node.id || node._tempId || "";
+                              const isVirtualRoot = (node as any)._isVirtualRoot === true;
+                              const typeBadge = getItemTypeBadge(node.item_type);
+                              const hasChildren = isVirtualRoot ? editingTree.length > 0 : node.children.length > 0;
+                              const isExpanded = expandedNodes.has(nodeKey);
+                              const isSelected = selectedTreeNodeId === nodeKey;
+                              const isEditing = editingNodeId === nodeKey && !isVirtualRoot;
+                              const level = node._level || 0;
+
+                              const depthBarColor = isVirtualRoot ? "bg-primary/70"
+                                : level === 1 ? "bg-emerald-400"
+                                : level === 2 ? "bg-amber-400"
+                                : level >= 3 ? "bg-purple-400" : "bg-muted/60";
+
+                              const depthBg = isVirtualRoot
+                                ? "border-border bg-primary/10 font-medium hover:bg-primary/20"
+                                : isSelected
+                                  ? "border-border bg-primary/5"
+                                  : level === 1 ? "border-border bg-background hover:bg-muted/60"
+                                  : level >= 2 ? "border-border bg-muted/40 hover:bg-muted/50"
+                                  : "border-border bg-background hover:bg-muted/60";
+
+                              return (
+                                <tr
+                                  key={nodeKey}
+                                  className={cn("group cursor-pointer border-b transition-colors", depthBg)}
+                                  onClick={() => {
+                                    if (editingNodeId && editingNodeId !== nodeKey) setEditingNodeId(null);
+                                    setSelectedTreeNodeId(nodeKey);
+                                    if (hasChildren) toggleEditTreeNode(nodeKey);
+                                  }}
+                                  onDoubleClick={() => {
+                                    if (!isVirtualRoot) {
+                                      setTreeEditTarget(node);
+                                      setTreeEditForm({ quantity: node.quantity || "1", unit: node.unit || "", process_type: node.process_type || "", loss_rate: node.loss_rate || "0", spec: node.spec || "", material: node.material || "", remark: node.remark || "" });
+                                      setTreeEditModalOpen(true);
+                                    }
+                                  }}
+                                >
+                                  {/* 레벨 + 좌측 색상바 + 토글 */}
+                                  <td className="relative px-1 py-2" style={{ paddingLeft: `${level * 16 + 8}px` }}>
+                                    <div className={cn("absolute left-0 top-0 h-full w-[3px]", depthBarColor)} />
+                                    <div className="flex items-center gap-1">
+                                      <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
+                                        {hasChildren ? (
+                                          isExpanded ? <ChevronDown className={cn("h-3.5 w-3.5", isVirtualRoot ? "text-primary" : "text-muted-foreground/70")} />
+                                          : <ChevronRight className={cn("h-3.5 w-3.5", isVirtualRoot ? "text-primary" : "text-muted-foreground/70")} />
+                                        ) : (
+                                          <span className="h-1 w-1 rounded-full bg-muted-foreground/40" />
+                                        )}
+                                      </span>
+                                      <span className="text-[11px]">{level}</span>
+                                    </div>
+                                  </td>
+                                  {/* 품번 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">
+                                    <span className={cn("font-mono text-[11px]", isVirtualRoot && "font-bold text-foreground")}>
+                                      {node.item_number || "-"}
+                                    </span>
+                                  </td>
+                                  {/* 품명 */}
+                                  <td className={cn("overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2", isVirtualRoot && "font-bold")}>
+                                    {node.item_name || "-"}
+                                  </td>
+                                  {/* 소요량 */}
+                                  <td className="px-3 py-2 text-center">{isVirtualRoot ? (bomHeader?.base_qty || "1") : (node.quantity || "-")}</td>
+                                  {/* 단위 */}
+                                  <td className="px-3 py-2 text-center">{isVirtualRoot ? "-" : (node.unit || "-")}</td>
+                                  {/* 공정구분 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.process_type || "-")}</td>
+                                  {/* 규격 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.spec || "-")}</td>
+                                  {/* 비고 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.remark || "-")}</td>
+                                  {/* 작성자 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 text-muted-foreground">{isVirtualRoot ? "-" : (node.writer || "-")}</td>
+                                  {/* 수정일시 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 text-muted-foreground">
+                                    {isVirtualRoot ? "-" : (node.updated_date ? new Date(node.updated_date).toLocaleString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }) : "-")}
+                                  </td>
+                                  {/* 관리품목 */}
+                                  <td className="px-2 py-2" style={{ minWidth: "150px" }}>
+                                    {isVirtualRoot ? <span className="text-center block">-</span> : (
+                                      node.item_type ? (
+                                        <div className="flex flex-row items-center gap-1 flex-nowrap">{node.item_type.split(",").map((t: string, i: number) => {
+                                          const trimmed = t.trim();
+                                          if (!trimmed) return null;
+                                          return <span key={i} className="shrink-0 rounded px-1 py-0.5 text-[9px] font-medium bg-muted text-muted-foreground">{trimmed}</span>;
+                                        })}</div>
+                                      ) : "-"
+                                    )}
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      )}
+                    </TabsContent>
+
+                    {/* 버전 탭 */}
+                    <TabsContent value="version" className="flex-1 overflow-auto m-0">
+                      <div className="p-3">
+                        <div className="flex items-center justify-between mb-3">
+                          <span className="text-xs text-muted-foreground">
+                            {versions.length}개 버전
+                          </span>
+                          <Button size="sm" onClick={() => setShowNewVersionDialog(true)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />
+                            새 버전
+                          </Button>
+                        </div>
+                        {versionLoading ? (
+                          <div className="flex items-center justify-center py-8">
+                            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                          </div>
+                        ) : versions.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                            <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                            <p className="text-xs">버전 데이터가 없어요</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-2">
+                            {versions.map((ver) => {
+                              const isActive = ver.id === currentVersionId;
+                              const statusInfo = VERSION_STATUS_MAP[ver.status] || { label: ver.status, className: "bg-muted text-muted-foreground" };
+                              return (
+                                <div
+                                  key={ver.id}
+                                  className={cn(
+                                    "flex items-center justify-between p-3 rounded-lg border transition-colors",
+                                    isActive ? "border-primary/30 bg-primary/5" : "hover:bg-muted/50"
+                                  )}
+                                >
+                                  <div className="flex items-center gap-3">
+                                    <div className="flex flex-col gap-0.5">
+                                      <div className="flex items-center gap-2">
+                                        <span className="text-sm font-semibold">{ver.version_name}</span>
+                                        <span className={cn("text-[10px] font-medium px-1.5 py-0.5 rounded-full", statusInfo.className)}>
+                                          {statusInfo.label}
+                                        </span>
+                                        {isActive && (
+                                          <Badge variant="outline" className="text-[10px] h-4 border-primary/30 text-primary">
+                                            현재
+                                          </Badge>
+                                        )}
+                                      </div>
+                                      <span className="text-[11px] text-muted-foreground">
+                                        {ver.detail_count || 0}개 구성품 · {ver.created_date ? new Date(ver.created_date).toLocaleDateString("ko-KR") : "-"}
+                                      </span>
+                                    </div>
+                                  </div>
+                                  <div className="flex items-center gap-1">
+                                    {!isActive && (
+                                      <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => handleLoadVersion(ver.id)}>
+                                        <RotateCcw className="w-3 h-3 mr-1" />
+                                        불러오기
+                                      </Button>
+                                    )}
+                                    {ver.status !== "active" && (
+                                      <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => handleActivateVersion(ver.id)}>
+                                        <CheckCircle2 className="w-3 h-3 mr-1" />
+                                        확정
+                                      </Button>
+                                    )}
+                                    {ver.status !== "active" && (
+                                      <Button
+                                        size="sm"
+                                        variant="ghost"
+                                        className="h-7 text-xs text-destructive hover:text-destructive"
+                                        onClick={() => handleDeleteVersion(ver.id)}
+                                      >
+                                        <Trash2 className="w-3 h-3" />
+                                      </Button>
+                                    )}
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    </TabsContent>
+
+                    {/* 이력 탭 */}
+                    <TabsContent value="history" className="flex-1 overflow-auto m-0">
+                      <div className="p-3">
+                        <div className="flex items-center justify-between mb-3">
+                          <span className="text-xs text-muted-foreground">
+                            {historyList.length}건 이력
+                          </span>
+                        </div>
+                        {historyLoading ? (
+                          <div className="flex items-center justify-center py-8">
+                            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                          </div>
+                        ) : historyList.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                            <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                            <p className="text-xs">이력 데이터가 없어요</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-2">
+                            {historyList.map((entry) => {
+                              const typeStyle = CHANGE_TYPE_STYLE[entry.change_type] || "bg-muted text-muted-foreground ring-border";
+                              return (
+                                <div key={entry.id} className="p-3 rounded-lg border hover:bg-muted/50 transition-colors">
+                                  <div className="flex items-center justify-between mb-1">
+                                    <div className="flex items-center gap-2">
+                                      <span className={cn("inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium ring-1 ring-inset", typeStyle)}>
+                                        {entry.change_type}
+                                      </span>
+                                      {(entry.revision || entry.version) && (
+                                        <span className="text-[10px] text-muted-foreground">
+                                          {entry.revision && `차수 ${entry.revision}`}{entry.revision && entry.version && " / "}{entry.version && `v${entry.version}`}
+                                        </span>
+                                      )}
+                                    </div>
+                                    <span className="text-[10px] text-muted-foreground">
+                                      {entry.changed_date ? new Date(entry.changed_date).toLocaleString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }) : "-"}
+                                    </span>
+                                  </div>
+                                  <p className="text-xs mt-1">{entry.change_description || "-"}</p>
+                                  {entry.changed_by && (
+                                    <span className="text-[10px] text-muted-foreground/60 mt-1 block">
+                                      {entry.changed_by}
+                                    </span>
+                                  )}
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </div>
+              </div>
+            )}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ─── BOM 등록/수정 모달 ─────────────────── */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto" onPointerDownOutside={(e) => { if (showItemSearchModal) e.preventDefault(); }}>
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "BOM 수정" : "BOM 등록"}</DialogTitle>
+            <DialogDescription>{isEditMode ? "BOM 정보를 수정해요" : "새로운 BOM을 등록해요"}</DialogDescription>
+          </DialogHeader>
+        <div className="space-y-6">
+          {/* 기본정보 */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                품목 <span className="text-destructive">*</span>
+              </Label>
+              <div className="flex gap-2">
+                <Input
+                  className="h-9 flex-1"
+                  value={masterForm.item_code ? `${masterForm.item_code} - ${masterForm.item_name}` : ""}
+                  placeholder="품목을 검색해주세요"
+                  readOnly
+                  onClick={() => {
+                    setItemSearchTarget("master");
+                    setItemSearchKeyword("");
+                    setShowItemSearchModal(true);
+                    searchItems("");
+                  }}
+                />
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="h-9 px-3"
+                  onClick={() => {
+                    setItemSearchTarget("master");
+                    setItemSearchKeyword("");
+                    setShowItemSearchModal(true);
+                    searchItems("");
+                  }}
+                >
+                  <Search className="w-3.5 h-3.5" />
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                BOM 유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={masterForm.bom_type || ""} onValueChange={(v) => setMasterForm((prev) => ({ ...prev, bom_type: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  {BOM_TYPE_OPTIONS.map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">기준수량</Label>
+              <Input
+                className="h-9"
+                type="number"
+                value={masterForm.base_qty}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, base_qty: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">단위</Label>
+              <Input
+                className="h-9"
+                value={masterForm.unit}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, unit: e.target.value }))}
+                placeholder="EA"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                버전 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={masterForm.version}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, version: e.target.value }))}
+                placeholder="1.0"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">상태</Label>
+              <Select value={masterForm.status || "draft"} onValueChange={(v) => setMasterForm((prev) => ({ ...prev, status: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="draft">초안</SelectItem>
+                  <SelectItem value="active">활성</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                유효 시작일 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={masterForm.effective_date || ""}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, effective_date: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">유효 종료일</Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={masterForm.expiry_date || ""}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, expiry_date: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs font-medium">메모</Label>
+              <Textarea
+                className="min-h-[60px] resize-none"
+                value={masterForm.remark}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, remark: e.target.value }))}
+                placeholder="메모를 입력해주세요"
+              />
+            </div>
+          </div>
+
+          {/* BOM 구성품목 */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <h4 className="text-sm font-semibold">BOM 구성품목</h4>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  setItemSearchTarget("detail");
+                  setItemSearchKeyword("");
+                  setShowItemSearchModal(true);
+                  searchItems("");
+                }}
+              >
+                <Plus className="w-3.5 h-3.5 mr-1" />
+                품목 추가
+              </Button>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                    <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                    <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공정유형</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">손실율(%)</TableHead>
+                    <TableHead className="w-[40px]" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {modalDetailRows.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={8} className="text-center py-8 text-muted-foreground text-[13px]">
+                        구성품목을 추가해주세요
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    modalDetailRows.map((row, idx) => (
+                      <TableRow key={idx}>
+                        <TableCell className="text-center text-muted-foreground text-[13px]">{idx + 1}</TableCell>
+                        <TableCell className="font-mono text-[13px]">{row.item_number}</TableCell>
+                        <TableCell className="text-[13px]">{row.item_name}</TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[70px] text-xs"
+                            type="number"
+                            value={row.quantity}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].quantity = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell className="text-[13px]">{row.unit}</TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[90px] text-xs"
+                            value={row.process_type}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].process_type = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                            placeholder="공정"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[70px] text-xs"
+                            type="number"
+                            value={row.loss_rate}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].loss_rate = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                            onClick={() => setModalDetailRows((prev) => prev.filter((_, i) => i !== idx))}
+                          >
+                            <X className="w-3.5 h-3.5" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)} disabled={saving}>
+              취소
+            </Button>
+            <Button onClick={handleSaveBom} disabled={saving}>
+              {saving && <Loader2 className="w-3.5 h-3.5 animate-spin mr-1.5" />}
+              {isEditMode ? "수정" : "등록"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 품목 검색 모달 ──────────────────────── */}
+      <Dialog open={showItemSearchModal} onOpenChange={setShowItemSearchModal}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>품목 검색</DialogTitle>
+            <DialogDescription>품목코드 또는 품명으로 검색해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              className="h-9 flex-1"
+              placeholder="품목코드 또는 품명 입력"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+            />
+            <Button size="sm" className="h-9" onClick={() => searchItems()} disabled={itemSearchLoading}>
+              {itemSearchLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}
+            </Button>
+          </div>
+          <div className="max-h-[300px] overflow-auto border rounded-lg">
+            {itemSearchResults.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground gap-1">
+                <Search className="w-6 h-6 text-muted-foreground/40" />
+                <p className="text-xs">검색어를 입력해주세요</p>
+              </div>
+            ) : (
+              itemSearchResults.map((item) => {
+                const badge = getItemTypeBadge(item.division);
+                return (
+                  <div
+                    key={item.id}
+                    className="flex items-center gap-3 px-3 py-2 border-b last:border-b-0 hover:bg-accent cursor-pointer transition-colors"
+                    onClick={() => selectItem(item)}
+                  >
+                    <span className={cn("text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0", badge.className)}>
+                      {badge.label}
+                    </span>
+                    <span className="font-mono text-[11px] text-muted-foreground">{item.item_number}</span>
+                    <span className="text-xs">{item.item_name}</span>
+                    <span className="ml-auto text-[11px] text-muted-foreground">{item.unit || ""}</span>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 품목 수정 모달 (더블클릭) ─────────────────── */}
+      <Dialog open={treeEditModalOpen} onOpenChange={setTreeEditModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>품목 수정</DialogTitle>
+            <DialogDescription>선택한 품목의 BOM 구성 정보를 수정합니다</DialogDescription>
+          </DialogHeader>
+          {treeEditTarget && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">품목코드</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditTarget.item_number || ""} readOnly />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">품목명</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditTarget.item_name || ""} readOnly />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">구성수량 <span className="text-destructive">*</span></Label>
+                  <Input className="h-9" type="number" value={treeEditForm.quantity || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, quantity: e.target.value }))} />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">단위</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.unit || "-"} readOnly />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">공정</Label>
+                  <Select value={treeEditForm.process_type || ""} onValueChange={(v) => setTreeEditForm((p) => ({ ...p, process_type: v }))}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="공정 선택" /></SelectTrigger>
+                    <SelectContent>
+                      {processOptions.map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">로스율 (%)</Label>
+                  <Input className="h-9" type="number" value={treeEditForm.loss_rate || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, loss_rate: e.target.value }))} />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">규격</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.spec || "-"} readOnly />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">재질</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.material || "-"} readOnly />
+                </div>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold text-muted-foreground">메모</Label>
+                <textarea className="flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm" value={treeEditForm.remark || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, remark: e.target.value }))} placeholder="비고 사항을 입력하세요" />
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setTreeEditModalOpen(false)}>취소</Button>
+            <Button onClick={() => {
+              if (treeEditTarget) {
+                const nodeKey = treeEditTarget.id || treeEditTarget._tempId || "";
+                setEditingTree(prev => updateTreeNode(prev, nodeKey, node => ({
+                  ...node,
+                  quantity: treeEditForm.quantity || "1",
+                  process_type: treeEditForm.process_type || "",
+                  loss_rate: treeEditForm.loss_rate || "0",
+                  remark: treeEditForm.remark || "",
+                  _isModified: !node._isNew ? true : node._isModified,
+                })));
+                setTreeHasChanges(true);
+              }
+              setTreeEditModalOpen(false);
+            }}>저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 트리 품목 검색 모달 ─────────────────── */}
+      <Dialog open={treeItemSearchOpen} onOpenChange={setTreeItemSearchOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>품목 검색 (트리 추가)</DialogTitle>
+            <DialogDescription>추가할 품목을 검색해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              className="h-9 flex-1"
+              placeholder="품목코드 또는 품명 입력"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+            />
+            <Button size="sm" className="h-9" onClick={() => searchItems()} disabled={itemSearchLoading}>
+              {itemSearchLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}
+            </Button>
+          </div>
+          <div className="max-h-[300px] overflow-auto border rounded-lg">
+            {itemSearchResults.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground gap-1">
+                <Search className="w-6 h-6 text-muted-foreground/40" />
+                <p className="text-xs">검색어를 입력해주세요</p>
+              </div>
+            ) : (
+              itemSearchResults.filter((item) => {
+                // 자기 자신 제외
+                if (bomHeader && (item.id === bomHeader.item_id || item.item_number === bomHeader.item_code)) return false;
+                // 조상 경로 순환 참조 제외
+                if (addTargetParentId) {
+                  const collectAncestorIds = (nodes: TreeNode[], targetId: string, path: string[]): string[] | null => {
+                    for (const n of nodes) {
+                      const nk = n.id || n._tempId || "";
+                      if (nk === targetId) return [...path, n.child_item_id || ""];
+                      if (n.children.length > 0) {
+                        const r = collectAncestorIds(n.children, targetId, [...path, n.child_item_id || ""]);
+                        if (r) return r;
+                      }
+                    }
+                    return null;
+                  };
+                  const ancestors = collectAncestorIds(editingTree, addTargetParentId, []);
+                  if (ancestors && ancestors.includes(item.id)) return false;
+                }
+                return true;
+              }).map((item) => {
+                const badge = getItemTypeBadge(item.division);
+                return (
+                  <div
+                    key={item.id}
+                    className="flex items-center gap-3 px-3 py-2 border-b last:border-b-0 hover:bg-accent cursor-pointer transition-colors"
+                    onClick={() => handleTreeItemSelect(item)}
+                  >
+                    <span className={cn("text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0", badge.className)}>
+                      {badge.label}
+                    </span>
+                    <span className="font-mono text-[11px] text-muted-foreground">{item.item_number}</span>
+                    <span className="text-xs">{item.item_name}</span>
+                    <span className="ml-auto text-[11px] text-muted-foreground">{item.unit || ""}</span>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 새 버전 생성 다이얼로그 ────────────── */}
+      <Dialog open={showNewVersionDialog} onOpenChange={setShowNewVersionDialog}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>새 버전 생성</DialogTitle>
+            <DialogDescription>현재 버전의 데이터를 복사하여 새 버전을 만들어요</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-xs font-medium">버전명 (비워두면 자동 채번)</Label>
+            <Input
+              className="h-9"
+              value={newVersionName}
+              onChange={(e) => setNewVersionName(e.target.value)}
+              placeholder="예: 2.0"
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowNewVersionDialog(false)}>
+              취소
+            </Button>
+            <Button onClick={handleCreateVersion}>
+              <Plus className="w-3.5 h-3.5 mr-1" />
+              생성
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 이력 추가 다이얼로그 ───────────────── */}
+      <Dialog open={showHistoryDialog} onOpenChange={setShowHistoryDialog}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>이력 추가</DialogTitle>
+            <DialogDescription>BOM 변경 이력을 기록해요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                변경 유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={newHistory.change_type} onValueChange={(v) => setNewHistory((prev) => ({ ...prev, change_type: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="변경 유형 선택" /></SelectTrigger>
+                <SelectContent>
+                  {CHANGE_TYPE_OPTIONS.map((t) => (
+                    <SelectItem key={t} value={t}>{t}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">변경 내용</Label>
+              <Textarea
+                className="min-h-[80px] resize-none"
+                value={newHistory.change_description}
+                onChange={(e) => setNewHistory((prev) => ({ ...prev, change_description: e.target.value }))}
+                placeholder="변경 내용을 입력해주세요"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowHistoryDialog(false)}>
+              취소
+            </Button>
+            <Button onClick={handleAddHistory}>
+              <Plus className="w-3.5 h-3.5 mr-1" />
+              추가
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 엑셀 업로드 다이얼로그 ────────────── */}
+      <Dialog open={showExcelUpload} onOpenChange={setShowExcelUpload}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>BOM 엑셀 업로드</DialogTitle>
+            <DialogDescription>
+              {selectedBomId
+                ? "선택한 BOM에 새 버전을 엑셀로 생성해요"
+                : "엑셀 파일로 새 BOM을 생성해요"}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="border-2 border-dashed rounded-lg p-6 text-center">
+              <input
+                type="file"
+                accept=".xlsx,.xls"
+                className="hidden"
+                id="excel-file-input"
+                onChange={(e) => setExcelFile(e.target.files?.[0] || null)}
+              />
+              <label htmlFor="excel-file-input" className="cursor-pointer">
+                <Upload className="w-8 h-8 mx-auto mb-2 text-muted-foreground/40" />
+                <p className="text-sm text-muted-foreground mb-1">
+                  {excelFile ? excelFile.name : "클릭하여 파일을 선택해주세요"}
+                </p>
+                <p className="text-[10px] text-muted-foreground/60">.xlsx, .xls 형식</p>
+              </label>
+            </div>
+            <div className="bg-muted/50 rounded-lg p-3 text-xs text-muted-foreground space-y-1">
+              <p className="font-medium text-foreground">엑셀 형식 안내</p>
+              <p>레벨 0: BOM 마스터 (최상위 품목)</p>
+              <p>레벨 1: 직접 자품목</p>
+              <p>레벨 2+: 자품목의 자품목</p>
+              <p>필수 컬럼: level, item_number, quantity</p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setShowExcelUpload(false); setExcelFile(null); }}>
+              취소
+            </Button>
+            <Button onClick={handleExcelUpload} disabled={!excelFile || excelUploading}>
+              {excelUploading && <Loader2 className="w-3.5 h-3.5 animate-spin mr-1.5" />}
+              업로드
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/production/plan-management/page.tsx b/frontend/app/(main)/COMPANY_7/production/plan-management/page.tsx
index a49555b6..546ed739 100644
--- a/frontend/app/(main)/COMPANY_7/production/plan-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/production/plan-management/page.tsx
@@ -80,13 +80,13 @@ import TimelineScheduler, {
   type ZoomLevel,
   type StatusColor,
 } from "@/components/common/TimelineScheduler";
-import { DynamicSearchFilter, type FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 import { apiClient } from "@/lib/api/client";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 
 // ─── 상수 ───
 
@@ -104,6 +104,19 @@ const STATUS_LABEL: Record<string, string> = {
   completed: "완료",
 };
 
+// 수주 테이블 컬럼 설정
+const ORDER_COLUMNS = [
+  { key: "total_order_qty", label: "총수주량" },
+  { key: "total_ship_qty", label: "출고량" },
+  { key: "total_balance_qty", label: "잔량" },
+  { key: "current_stock", label: "현재고" },
+  { key: "safety_stock", label: "안전재고" },
+  { key: "existing_plan_qty", label: "기생산계획량" },
+  { key: "in_progress_qty", label: "생산진행" },
+  { key: "required_plan_qty", label: "필요생산계획" },
+  { key: "lead_time", label: "리드타임(일)" },
+];
+
 // ========== 메인 컴포넌트 ==========
 
 export default function ProductionPlanManagementPage() {
@@ -126,7 +139,7 @@ export default function ProductionPlanManagementPage() {
   const [stockItems, setStockItems] = useState<StockShortageItem[]>([]);
   const [finishedPlans, setFinishedPlans] = useState<ProductionPlan[]>([]);
   const [semiPlans, setSemiPlans] = useState<ProductionPlan[]>([]);
-  const [equipmentList, setEquipmentList] = useState<{ equipment_id: string; equipment_name: string }[]>([]);
+  const [equipmentList, setEquipmentList] = useState<{ id: string; equipment_code: string; equipment_name: string }[]>([]);
 
   // 선택/토글 상태
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
@@ -134,15 +147,15 @@ export default function ProductionPlanManagementPage() {
   const [filterUnplannedOrdersOnly, setFilterUnplannedOrdersOnly] = useState(false);
   const [selectedStockItems, setSelectedStockItems] = useState<Set<string>>(new Set());
 
-  // 검색 필터 (DynamicSearchFilter에서 사용)
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
   const [searchItemCode, setSearchItemCode] = useState("");
   const [searchStatus, setSearchStatus] = useState("all");
   const [searchStartDate, setSearchStartDate] = useState("");
   const [searchEndDate, setSearchEndDate] = useState("");
 
+  // 테이블 설정
+  const ts = useTableSettings("c16-plan-management", "sales_order_mng", ORDER_COLUMNS);
+
   // 타임라인 옵션
   const [recalculateUnstarted, setRecalculateUnstarted] = useState(true);
   const [finishedZoom, setFinishedZoom] = useState<ZoomLevel>("week");
@@ -256,39 +269,33 @@ export default function ProductionPlanManagementPage() {
 
   // ========== DynamicSearchFilter 콜백 ==========
 
-  const handleSearchFilterChange = useCallback(
-    (filters: FilterValue[]) => {
-      setSearchFilters(filters);
-      // 필터에서 주요 값 추출
-      let itemCode = "";
-      let status = "all";
-      let startDate = "";
-      let endDate = "";
-      for (const f of filters) {
-        if (f.columnName === "item_code" && f.value) itemCode = f.value;
-        if (f.columnName === "status" && f.value) status = f.value;
-        if (f.columnName === "start_date" && f.value) {
-          const [s, e] = f.value.split(",");
-          if (s) startDate = s;
-          if (e) endDate = e;
-        }
+  const handleSearchFilterChange = useCallback((filters: FilterValue[]) => {
+    setSearchFilters(filters);
+    let itemCode = "";
+    let status = "all";
+    let startDate = "";
+    let endDate = "";
+    for (const f of filters) {
+      if (f.columnName === "item_code" && f.value) itemCode = f.value;
+      if (f.columnName === "status" && f.value) status = f.value;
+      if (f.columnName === "start_date" && f.operator === "between" && f.value) {
+        const [s, e] = f.value.split("|");
+        if (s) startDate = s;
+        if (e) endDate = e;
       }
-      setSearchItemCode(itemCode);
-      setSearchStatus(status);
-      setSearchStartDate(startDate);
-      setSearchEndDate(endDate);
-    },
-    []
-  );
-
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
+    }
+    setSearchItemCode(itemCode);
+    setSearchStatus(status || "all");
+    setSearchStartDate(startDate);
+    setSearchEndDate(endDate);
   }, []);
 
   useEffect(() => {
-    const saved = loadTableSettings("production-plan");
-    if (saved) applyTableSettings(saved);
-  }, []);
+    if (searchFilters.length > 0) {
+      fetchOrderSummary();
+      fetchPlans();
+    }
+  }, [searchItemCode, searchStatus, searchStartDate, searchEndDate]);
 
   // ========== 토글/선택 핸들러 ==========
 
@@ -652,7 +659,7 @@ export default function ProductionPlanManagementPage() {
     setModalManager((plan as any).manager_name || "");
     setModalWorkOrderNo((plan as any).work_order_no || "");
     setModalRemarks(plan.remarks || "");
-    setModalEquipmentId(plan.equipment_id ? String(plan.equipment_id) : "");
+    setModalEquipmentId((plan as any).equipment_code || (plan.equipment_id ? String(plan.equipment_id) : ""));
     setScheduleModalOpen(true);
   }, []);
 
@@ -912,29 +919,26 @@ export default function ProductionPlanManagementPage() {
   // 숫자 포맷
   const formatNumber = (num: number | string) => Number(num).toLocaleString();
 
+  // (컬럼 표시는 ts.visibleColumns 순서를 따름)
+
   return (
-    <div className={cn("flex flex-col bg-muted/30 gap-4", isFullscreen ? "fixed inset-0 z-50 p-4" : "h-[calc(100vh-4rem)] p-5")}>
+    <div className={cn("flex flex-col gap-3", isFullscreen ? "fixed inset-0 z-50 bg-background p-4" : "h-full p-3")}>
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>생산관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="font-medium text-foreground">생산계획</span>
+      </nav>
+
       {/* 상단 바 */}
-      <div className="shrink-0 rounded-lg border bg-background p-4 shadow-sm">
-        <div className="flex items-center justify-between gap-3">
-          <DynamicSearchFilter
-            tableName="production_plan_mng"
-            filterId="production-plan"
-            onFilterChange={handleSearchFilterChange}
-            dataCount={finishedPlans.length + semiPlans.length}
-            externalFilterConfig={filterConfig}
-            extraActions={
-              <Button size="sm" onClick={handleSearch}>
-                <RefreshCw className="mr-1.5 h-4 w-4" />
-                조회
-              </Button>
-            }
-          />
-          <div className="flex items-center gap-2 shrink-0">
-            <Button variant="outline" size="sm" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="text-emerald-600 dark:text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/10" onClick={() => setExcelUploadOpen(true)}>
+      <DynamicSearchFilter
+        tableName="sales_order_mng"
+        filterId="c16-plan-management"
+        onFilterChange={handleSearchFilterChange}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" className="text-success border-success/30 hover:bg-success/10" onClick={() => setExcelUploadOpen(true)}>
               <Upload className="mr-1.5 h-4 w-4" />
               엑셀업로드
             </Button>
@@ -946,14 +950,14 @@ export default function ProductionPlanManagementPage() {
               {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
             </Button>
           </div>
-        </div>
-      </div>
+        }
+      />
 
       {/* 데이터 섹션 */}
       <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg">
         {/* 왼쪽 패널 */}
         <ResizablePanel defaultSize={45} minSize={25}>
-          <div className="flex h-full flex-col rounded-lg border bg-background shadow-sm">
+          <div className="flex h-full flex-col rounded-lg border bg-card">
             <Tabs value={leftTab} onValueChange={setLeftTab} className="flex h-full flex-col">
               <div className="shrink-0 border-b bg-muted/30 px-5">
                 <TabsList className="h-11 bg-transparent gap-1">
@@ -984,7 +988,7 @@ export default function ProductionPlanManagementPage() {
                       />
                       <span className="font-medium text-foreground">계획에 없는 품목만</span>
                     </label>
-                    <Button size="sm" variant="outline" className="text-emerald-600 dark:text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/10" onClick={() => setOrderImportModalOpen(true)}>
+                    <Button size="sm" variant="outline" className="text-success border-success/30 hover:bg-success/10" onClick={() => setOrderImportModalOpen(true)}>
                       <Download className="mr-1 h-3.5 w-3.5" />
                       불러오기
                     </Button>
@@ -996,6 +1000,9 @@ export default function ProductionPlanManagementPage() {
                       {loadingOrders ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
                       새로고침
                     </Button>
+                    <Button size="sm" variant="ghost" onClick={() => ts.setOpen(true)}>
+                      <Settings2 className="h-3.5 w-3.5" />
+                    </Button>
                   </div>
                 </div>
                 <div className="flex-1 overflow-auto p-4">
@@ -1010,29 +1017,75 @@ export default function ProductionPlanManagementPage() {
                     </div>
                   ) : (
                     <div className="overflow-x-auto rounded-md border">
-                      <Table>
-                        <TableHeader>
-                          <TableRow className="bg-muted/50">
+                      {(() => {
+                        // 디테일 행에서 개별 값을 표시하는 컬럼 매핑
+                        const DETAIL_VALUE_MAP: Record<string, string> = {
+                          total_order_qty: "order_qty",
+                          total_ship_qty: "ship_qty",
+                          total_balance_qty: "balance_qty",
+                        };
+
+                        // 그룹 행에서 특수 렌더링이 필요한 컬럼
+                        const renderGroupCell = (col: { key: string }, item: any) => {
+                          if (col.key === "required_plan_qty") {
+                            return (
+                              <TableCell key={col.key} style={ts.thStyle(col.key)} className={cn("text-[13px] text-right font-bold", Number(item.required_plan_qty) > 0 ? "text-destructive" : "text-success")} onClick={() => toggleItemExpand(item.item_code)}>
+                                {formatNumber(item.required_plan_qty)}
+                              </TableCell>
+                            );
+                          }
+                          if (col.key === "lead_time") {
+                            return (
+                              <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
+                                {Number(item.lead_time) > 0 ? `${item.lead_time}일` : "-"}
+                              </TableCell>
+                            );
+                          }
+                          return (
+                            <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
+                              {formatNumber(item[col.key])}
+                            </TableCell>
+                          );
+                        };
+
+                        return (
+                      <Table style={{ tableLayout: "fixed" }}>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
                             <TableHead className="w-[30px]">
                               <Checkbox checked={selectedItemGroups.size === orderItems.length && orderItems.length > 0} onCheckedChange={(c) => toggleAllItemGroups(!!c)} className="h-4 w-4" />
                             </TableHead>
                             <TableHead className="w-[40px]" />
-                            <TableHead className="text-xs font-semibold whitespace-nowrap">품목코드</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap">품목명</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">총수주량</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">출고량</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">잔량</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">현재고</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">안전재고</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">기생산계획량</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">생산진행</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">필요생산계획</TableHead>
-                            <TableHead className="text-xs font-semibold whitespace-nowrap text-right">리드타임(일)</TableHead>
+                            <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                            <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            {ts.visibleColumns.map((col) => (
+                              <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                                {col.label}
+                              </TableHead>
+                            ))}
                           </TableRow>
                         </TableHeader>
                         <TableBody>
-                          {orderItems.map((item) => (
-                            <React.Fragment key={item.item_code}>
+                          {ts.groupData(orderItems).map((item, rowIdx) => {
+                            if (item._isGroupSummary) {
+                              return (
+                                <TableRow key={`summary-${rowIdx}`} className="bg-muted/60 font-semibold border-t border-primary/20">
+                                  <TableCell />
+                                  <TableCell />
+                                  <TableCell colSpan={2} />
+                                  {ts.visibleColumns.map((col) => {
+                                    const v = (item as any)[col.key];
+                                    return (
+                                    <TableCell key={col.key} style={ts.thStyle(col.key)} className={typeof v === "number" ? "text-right font-mono text-[13px]" : "text-[13px] text-primary"}>
+                                      {typeof v === "number" ? Number(v).toLocaleString() : (v || "")}
+                                    </TableCell>
+                                    );
+                                  })}
+                                </TableRow>
+                              );
+                            }
+                            return (
+                            <React.Fragment key={item.item_code || rowIdx}>
                               <TableRow className={cn("cursor-pointer border-t-2 border-t-primary/30 bg-primary/5 font-semibold hover:bg-primary/10", selectedItemGroups.has(item.item_code) && "bg-primary/10")}>
                                 <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
                                   <Checkbox checked={selectedItemGroups.has(item.item_code)} onCheckedChange={() => toggleItemGroupSelect(item.item_code)} className="h-4 w-4" />
@@ -1040,23 +1093,16 @@ export default function ProductionPlanManagementPage() {
                                 <TableCell className="text-center" onClick={() => toggleItemExpand(item.item_code)}>
                                   <ChevronRight className={cn("h-4 w-4 transition-transform duration-200", expandedItems.has(item.item_code) && "rotate-90")} />
                                 </TableCell>
-                                <TableCell className="text-xs text-primary" onClick={() => toggleItemExpand(item.item_code)}>{item.item_code}</TableCell>
-                                <TableCell className="text-xs text-primary" onClick={() => toggleItemExpand(item.item_code)}>{item.item_name}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.total_order_qty)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.total_ship_qty)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.total_balance_qty)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.current_stock)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.safety_stock)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.existing_plan_qty)}</TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>{formatNumber(item.in_progress_qty)}</TableCell>
-                                <TableCell className={cn("text-xs text-right font-bold", Number(item.required_plan_qty) > 0 ? "text-destructive" : "text-emerald-600 dark:text-emerald-400")} onClick={() => toggleItemExpand(item.item_code)}>
-                                  {formatNumber(item.required_plan_qty)}
-                                </TableCell>
-                                <TableCell className="text-xs text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
-                                  {Number(item.lead_time) > 0 ? `${item.lead_time}일` : "-"}
-                                </TableCell>
+                                <TableCell style={{ width: "140px", minWidth: "140px" }} className="text-[13px] text-primary truncate" onClick={() => toggleItemExpand(item.item_code)}>{item.item_code}</TableCell>
+                                <TableCell style={{ width: "140px", minWidth: "140px" }} className="text-[13px] text-primary truncate" onClick={() => toggleItemExpand(item.item_code)}>{item.item_name}</TableCell>
+                                {ts.visibleColumns.map((col) => renderGroupCell(col, item))}
                               </TableRow>
-                              {expandedItems.has(item.item_code) && item.orders?.map((detail) => (
+                              {expandedItems.has(item.item_code) && item.orders?.map((detail: any) => {
+                                let remainColSpan = 0;
+                                for (const col of ts.visibleColumns) {
+                                  if (!DETAIL_VALUE_MAP[col.key]) remainColSpan++;
+                                }
+                                return (
                                 <TableRow key={detail.id || detail.order_no} className="cursor-pointer hover:bg-muted/50">
                                   <TableCell />
                                   <TableCell />
@@ -1071,18 +1117,28 @@ export default function ProductionPlanManagementPage() {
                                       </Badge>
                                     </div>
                                   </TableCell>
-                                  <TableCell className="text-xs text-right">{formatNumber(detail.order_qty)}</TableCell>
-                                  <TableCell className="text-xs text-right">{formatNumber(detail.ship_qty)}</TableCell>
-                                  <TableCell className="text-xs text-right">{formatNumber(detail.balance_qty)}</TableCell>
-                                  <TableCell colSpan={6} className="text-xs text-muted-foreground">
-                                    납기일: {detail.due_date || "-"}
-                                  </TableCell>
+                                  {ts.visibleColumns.map((col) => {
+                                    const detailKey = DETAIL_VALUE_MAP[col.key];
+                                    if (detailKey) {
+                                      return <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right">{formatNumber(detail[detailKey])}</TableCell>;
+                                    }
+                                    return null;
+                                  })}
+                                  {remainColSpan > 0 && (
+                                    <TableCell colSpan={remainColSpan} className="text-[13px] text-muted-foreground">
+                                      납기일: {detail.due_date || "-"}
+                                    </TableCell>
+                                  )}
                                 </TableRow>
-                              ))}
+                                );
+                              })}
                             </React.Fragment>
-                          ))}
+                            );
+                          })}
                         </TableBody>
                       </Table>
+                        );
+                      })()}
                     </div>
                   )}
                 </div>
@@ -1093,7 +1149,7 @@ export default function ProductionPlanManagementPage() {
                 <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
                   <span className="text-base font-semibold">안전재고 부족 품목</span>
                   <div className="flex items-center gap-2">
-                    <Button size="sm" variant="outline" className="text-emerald-600 dark:text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/10" onClick={() => setStockImportModalOpen(true)}>
+                    <Button size="sm" variant="outline" className="text-success border-success/30 hover:bg-success/10" onClick={() => setStockImportModalOpen(true)}>
                       <Download className="mr-1 h-3.5 w-3.5" />
                       불러오기
                     </Button>
@@ -1120,18 +1176,18 @@ export default function ProductionPlanManagementPage() {
                   ) : (
                     <div className="overflow-x-auto rounded-md border">
                       <Table>
-                        <TableHeader>
-                          <TableRow className="bg-muted/50">
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
                             <TableHead className="w-[30px]">
                               <Checkbox checked={selectedStockItems.size === stockItems.length && stockItems.length > 0} onCheckedChange={(c) => toggleAllStockItems(!!c)} className="h-4 w-4" />
                             </TableHead>
-                            <TableHead className="text-xs font-semibold">품목코드</TableHead>
-                            <TableHead className="text-xs font-semibold">품목명</TableHead>
-                            <TableHead className="text-xs font-semibold text-right">현재고</TableHead>
-                            <TableHead className="text-xs font-semibold text-right">안전재고</TableHead>
-                            <TableHead className="text-xs font-semibold text-right">부족수량</TableHead>
-                            <TableHead className="text-xs font-semibold text-right">권장생산량</TableHead>
-                            <TableHead className="text-xs font-semibold">최종입고일</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">현재고</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">안전재고</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부족수량</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">권장생산량</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최종입고일</TableHead>
                           </TableRow>
                         </TableHeader>
                         <TableBody>
@@ -1140,13 +1196,13 @@ export default function ProductionPlanManagementPage() {
                               <TableCell>
                                 <Checkbox checked={selectedStockItems.has(stock.item_code)} onCheckedChange={() => toggleStockItem(stock.item_code)} className="h-4 w-4" />
                               </TableCell>
-                              <TableCell className="text-xs">{stock.item_code}</TableCell>
-                              <TableCell className="text-xs">{stock.item_name}</TableCell>
-                              <TableCell className="text-xs text-right">{formatNumber(stock.current_qty)}</TableCell>
-                              <TableCell className="text-xs text-right">{formatNumber(stock.safety_qty)}</TableCell>
-                              <TableCell className="text-xs text-right font-semibold text-destructive">{formatNumber(stock.shortage_qty)}</TableCell>
-                              <TableCell className="text-xs text-right font-semibold text-emerald-600 dark:text-emerald-400">{formatNumber(stock.recommended_qty)}</TableCell>
-                              <TableCell className="text-xs">{stock.last_in_date || "-"}</TableCell>
+                              <TableCell className="text-[13px]">{stock.item_code}</TableCell>
+                              <TableCell className="text-[13px]">{stock.item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right">{formatNumber(stock.current_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right">{formatNumber(stock.safety_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold text-destructive">{formatNumber(stock.shortage_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold text-success">{formatNumber(stock.recommended_qty)}</TableCell>
+                              <TableCell className="text-[13px]">{stock.last_in_date || "-"}</TableCell>
                             </TableRow>
                           ))}
                         </TableBody>
@@ -1163,7 +1219,7 @@ export default function ProductionPlanManagementPage() {
 
         {/* 오른쪽 패널 — 타임라인 */}
         <ResizablePanel defaultSize={55} minSize={30}>
-          <div className="flex h-full flex-col rounded-lg border bg-background shadow-sm">
+          <div className="flex h-full flex-col rounded-lg border bg-card">
             <Tabs value={rightTab} onValueChange={setRightTab} className="flex h-full flex-col">
               <div className="shrink-0 border-b bg-muted/30 px-5">
                 <TabsList className="h-11 bg-transparent gap-1">
@@ -1278,7 +1334,7 @@ export default function ProductionPlanManagementPage() {
                         </label>
                       </div>
                     </div>
-                    <div className="flex-1 rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-4">
+                    <div className="flex-1 rounded-lg border border-warning/20 bg-warning/5 p-4">
                       <p className="font-semibold text-foreground text-sm mb-2">반제품 계획 안내</p>
                       <ul className="text-xs text-foreground space-y-1 leading-relaxed">
                         <li>완제품 생산계획 기준으로 필요한 반제품 계획 자동 생성</li>
@@ -1335,15 +1391,15 @@ export default function ProductionPlanManagementPage() {
                 <div className="grid grid-cols-2 gap-3">
                   <div>
                     <Label className="text-xs">품목코드</Label>
-                    <Input value={selectedPlan.item_code} readOnly className="h-8 text-xs bg-muted/50" />
+                    <Input value={selectedPlan.item_code} readOnly className="h-9 text-xs bg-muted/50" />
                   </div>
                   <div>
                     <Label className="text-xs">품목명</Label>
-                    <Input value={selectedPlan.item_name || ""} readOnly className="h-8 text-xs bg-muted/50" />
+                    <Input value={selectedPlan.item_name || ""} readOnly className="h-9 text-xs bg-muted/50" />
                   </div>
                   <div>
                     <Label className="text-xs">계획번호</Label>
-                    <Input value={selectedPlan.plan_no || ""} readOnly className="h-8 text-xs bg-muted/50" />
+                    <Input value={selectedPlan.plan_no || ""} readOnly className="h-9 text-xs bg-muted/50" />
                   </div>
                   <div>
                     <Label className="text-xs">상태</Label>
@@ -1359,39 +1415,39 @@ export default function ProductionPlanManagementPage() {
                 <div className="grid grid-cols-2 gap-3">
                   <div>
                     <Label className="text-xs">총 생산수량</Label>
-                    <Input type="number" value={modalQuantity} onChange={(e) => setModalQuantity(Number(e.target.value))} className="h-8 text-xs" min={0} />
+                    <Input type="number" value={modalQuantity} onChange={(e) => setModalQuantity(Number(e.target.value))} className="h-9 text-xs" min={0} />
                   </div>
                   <div>
                     <Label className="text-xs">설비</Label>
                     <Select value={modalEquipmentId} onValueChange={setModalEquipmentId}>
-                      <SelectTrigger className="h-8 text-xs">
+                      <SelectTrigger className="h-9 text-xs">
                         <SelectValue placeholder="설비 선택" />
                       </SelectTrigger>
                       <SelectContent>
                         <SelectItem value="none">미지정</SelectItem>
                         {equipmentList.map((eq) => (
-                          <SelectItem key={eq.equipment_id} value={String(eq.equipment_id)}>
-                            {eq.equipment_name} ({eq.equipment_id})
+                          <SelectItem key={eq.id} value={eq.equipment_code || eq.id}>
+                            {eq.equipment_name} ({eq.equipment_code})
                           </SelectItem>
                         ))}
                       </SelectContent>
                     </Select>
                   </div>
                 </div>
-                <div className="mt-3 rounded-lg border border-emerald-500/20 bg-emerald-500/5 p-3">
+                <div className="mt-3 rounded-lg border border-success/20 bg-success/5 p-3">
                   <p className="text-xs font-semibold text-foreground mb-2">계획 기간 설정</p>
                   <div className="grid grid-cols-3 gap-3">
                     <div>
                       <Label className="text-[11px] text-muted-foreground">시작일</Label>
-                      <FormDatePicker value={modalStartDate} onChange={setModalStartDate} placeholder="시작일" />
+                      <Input type="date" value={modalStartDate} onChange={(e) => setModalStartDate(e.target.value)} className="h-9 text-xs" />
                     </div>
                     <div>
                       <Label className="text-[11px] text-muted-foreground">종료일</Label>
-                      <FormDatePicker value={modalEndDate} onChange={setModalEndDate} placeholder="종료일" />
+                      <Input type="date" value={modalEndDate} onChange={(e) => setModalEndDate(e.target.value)} className="h-9 text-xs" />
                     </div>
                     <div>
                       <Label className="text-[11px] text-muted-foreground">생산 기간</Label>
-                      <div className="flex h-8 items-center justify-center rounded-md border bg-background text-xs font-semibold text-primary">
+                      <div className="flex h-9 items-center justify-center rounded-md border bg-muted/50 text-xs font-semibold text-primary">
                         {modalStartDate && modalEndDate
                           ? `${Math.ceil((new Date(modalEndDate).getTime() - new Date(modalStartDate).getTime()) / (1000 * 60 * 60 * 24) + 1)}일`
                           : "-"}
@@ -1401,7 +1457,7 @@ export default function ProductionPlanManagementPage() {
                 </div>
               </div>
 
-              <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-4">
+              <div className="rounded-lg border border-warning/20 bg-warning/5 p-4">
                 <div className="flex items-center justify-between mb-2">
                   <p className="text-sm font-semibold flex items-center gap-1.5">
                     <Scissors className="h-4 w-4" />
@@ -1409,7 +1465,8 @@ export default function ProductionPlanManagementPage() {
                   </p>
                   <Button
                     size="sm"
-                    className="h-7 text-xs bg-gradient-to-br from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700"
+                    variant="warning"
+                    className="h-7 text-xs"
                     onClick={() => {
                       const qty = Math.floor(modalQuantity / 2);
                       if (qty > 0) handleSplitSchedule(qty);
@@ -1426,15 +1483,15 @@ export default function ProductionPlanManagementPage() {
                 <div className="grid grid-cols-2 gap-3">
                   <div>
                     <Label className="text-xs">담당자</Label>
-                    <Input value={modalManager} onChange={(e) => setModalManager(e.target.value)} className="h-8 text-xs" placeholder="담당자명" />
+                    <Input value={modalManager} onChange={(e) => setModalManager(e.target.value)} className="h-9 text-xs" placeholder="담당자명" />
                   </div>
                   <div>
                     <Label className="text-xs">작업지시번호</Label>
-                    <Input value={modalWorkOrderNo} onChange={(e) => setModalWorkOrderNo(e.target.value)} className="h-8 text-xs" placeholder="자동생성" />
+                    <Input value={modalWorkOrderNo} onChange={(e) => setModalWorkOrderNo(e.target.value)} className="h-9 text-xs" placeholder="자동생성" />
                   </div>
                   <div className="col-span-2">
                     <Label className="text-xs">비고</Label>
-                    <Input value={modalRemarks} onChange={(e) => setModalRemarks(e.target.value)} className="h-8 text-xs" placeholder="비고사항 입력" />
+                    <Input value={modalRemarks} onChange={(e) => setModalRemarks(e.target.value)} className="h-9 text-xs" placeholder="비고사항 입력" />
                   </div>
                 </div>
               </div>
@@ -1442,7 +1499,7 @@ export default function ProductionPlanManagementPage() {
           )}
 
           <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="destructive" onClick={handleDeletePlan} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+            <Button variant="outline" onClick={handleDeletePlan} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10">
               <Trash2 className="mr-1 h-3.5 w-3.5" />
               삭제
             </Button>
@@ -1498,9 +1555,9 @@ export default function ProductionPlanManagementPage() {
               </div>
             </div>
 
-            <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-3">
+            <div className="rounded-lg border border-warning/20 bg-warning/5 p-3">
               <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
-                <AlertTriangle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+                <AlertTriangle className="h-4 w-4 text-warning" />
                 주의사항
               </p>
               <ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside leading-relaxed">
@@ -1579,9 +1636,9 @@ export default function ProductionPlanManagementPage() {
               </div>
             </div>
 
-            <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-3">
+            <div className="rounded-lg border border-warning/20 bg-warning/5 p-3">
               <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
-                <AlertTriangle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+                <AlertTriangle className="h-4 w-4 text-warning" />
                 주의사항
               </p>
               <ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside leading-relaxed">
@@ -1636,11 +1693,11 @@ export default function ProductionPlanManagementPage() {
                   <p className="text-2xl font-bold text-foreground">{previewData.summary?.total ?? 0}</p>
                   <p className="text-xs text-muted-foreground mt-1">총 계획</p>
                 </div>
-                <div className="rounded-lg border bg-emerald-500/10 p-3 text-center">
+                <div className="rounded-lg border bg-success/10 p-3 text-center">
                   <p className="text-2xl font-bold text-foreground">{previewData.summary?.new_count ?? 0}</p>
                   <p className="text-xs text-muted-foreground mt-1">신규 생성</p>
                 </div>
-                <div className="rounded-lg border bg-yellow-500/10 p-3 text-center">
+                <div className="rounded-lg border bg-warning/10 p-3 text-center">
                   <p className="text-2xl font-bold text-foreground">{previewData.summary?.kept_count ?? 0}</p>
                   <p className="text-xs text-muted-foreground mt-1">유지됨</p>
                 </div>
@@ -1652,29 +1709,29 @@ export default function ProductionPlanManagementPage() {
 
               {(previewData.schedules?.length || 0) > 0 && (
                 <div>
-                  <p className="text-sm font-semibold mb-2 text-emerald-600 dark:text-emerald-400 flex items-center gap-1.5">
+                  <p className="text-sm font-semibold mb-2 text-success flex items-center gap-1.5">
                     <Zap className="h-4 w-4" />
                     신규 생성 ({previewData.schedules?.length || 0}건)
                   </p>
-                  <div className="rounded-md border border-emerald-500/20 overflow-x-auto">
+                  <div className="rounded-md border border-success/20 overflow-x-auto">
                     <Table>
-                      <TableHeader>
-                        <TableRow className="bg-emerald-500/5">
-                          <TableHead className="text-xs font-semibold">품목코드</TableHead>
-                          <TableHead className="text-xs font-semibold">품목명</TableHead>
-                          <TableHead className="text-xs font-semibold text-right">수량</TableHead>
-                          <TableHead className="text-xs font-semibold">시작일</TableHead>
-                          <TableHead className="text-xs font-semibold">종료일</TableHead>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">시작일</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">종료일</TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
                         {(previewData.schedules || []).map((s: any, idx: number) => (
                           <TableRow key={`new-${idx}`}>
-                            <TableCell className="text-xs">{s.item_code}</TableCell>
-                            <TableCell className="text-xs">{s.item_name}</TableCell>
-                            <TableCell className="text-xs text-right">{formatNumber(s.plan_qty || s.required_qty)}</TableCell>
-                            <TableCell className="text-xs">{s.start_date?.split("T")[0]}</TableCell>
-                            <TableCell className="text-xs">{s.end_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty || s.required_qty)}</TableCell>
+                            <TableCell className="text-[13px]">{s.start_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.end_date?.split("T")[0]}</TableCell>
                           </TableRow>
                         ))}
                       </TableBody>
@@ -1691,25 +1748,25 @@ export default function ProductionPlanManagementPage() {
                   </p>
                   <div className="rounded-md border border-destructive/20 overflow-x-auto">
                     <Table>
-                      <TableHeader>
-                        <TableRow className="bg-destructive/5">
-                          <TableHead className="text-xs font-semibold">계획번호</TableHead>
-                          <TableHead className="text-xs font-semibold">품목코드</TableHead>
-                          <TableHead className="text-xs font-semibold">품목명</TableHead>
-                          <TableHead className="text-xs font-semibold text-right">수량</TableHead>
-                          <TableHead className="text-xs font-semibold">시작일</TableHead>
-                          <TableHead className="text-xs font-semibold">종료일</TableHead>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">시작일</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">종료일</TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
                         {(previewData.deletedSchedules || []).map((s: any, idx: number) => (
                           <TableRow key={`del-${idx}`} className="text-destructive/80">
-                            <TableCell className="text-xs">{s.plan_no || "-"}</TableCell>
-                            <TableCell className="text-xs">{s.item_code}</TableCell>
-                            <TableCell className="text-xs">{s.item_name}</TableCell>
-                            <TableCell className="text-xs text-right">{formatNumber(s.plan_qty)}</TableCell>
-                            <TableCell className="text-xs">{s.start_date?.split("T")[0]}</TableCell>
-                            <TableCell className="text-xs">{s.end_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.plan_no || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty)}</TableCell>
+                            <TableCell className="text-[13px]">{s.start_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.end_date?.split("T")[0]}</TableCell>
                           </TableRow>
                         ))}
                       </TableBody>
@@ -1720,29 +1777,29 @@ export default function ProductionPlanManagementPage() {
 
               {(previewData.keptSchedules?.length || 0) > 0 && (
                 <div>
-                  <p className="text-sm font-semibold mb-2 text-yellow-600 dark:text-yellow-400 flex items-center gap-1.5">
+                  <p className="text-sm font-semibold mb-2 text-warning flex items-center gap-1.5">
                     <Package className="h-4 w-4" />
                     유지됨 ({previewData.keptSchedules?.length || 0}건)
                   </p>
-                  <div className="rounded-md border border-yellow-500/20 overflow-x-auto">
+                  <div className="rounded-md border border-warning/20 overflow-x-auto">
                     <Table>
-                      <TableHeader>
-                        <TableRow className="bg-yellow-500/5">
-                          <TableHead className="text-xs font-semibold">계획번호</TableHead>
-                          <TableHead className="text-xs font-semibold">품목코드</TableHead>
-                          <TableHead className="text-xs font-semibold">품목명</TableHead>
-                          <TableHead className="text-xs font-semibold text-right">수량</TableHead>
-                          <TableHead className="text-xs font-semibold">상태</TableHead>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
                         {(previewData.keptSchedules || []).map((s: any, idx: number) => (
                           <TableRow key={`kept-${idx}`}>
-                            <TableCell className="text-xs">{s.plan_no || "-"}</TableCell>
-                            <TableCell className="text-xs">{s.item_code}</TableCell>
-                            <TableCell className="text-xs">{s.item_name}</TableCell>
-                            <TableCell className="text-xs text-right">{formatNumber(s.plan_qty)}</TableCell>
-                            <TableCell className="text-xs">
+                            <TableCell className="text-[13px]">{s.plan_no || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty)}</TableCell>
+                            <TableCell className="text-[13px]">
                               <Badge variant="outline" className="text-[10px]">{STATUS_LABEL[s.status] || s.status}</Badge>
                             </TableCell>
                           </TableRow>
@@ -1776,16 +1833,18 @@ export default function ProductionPlanManagementPage() {
         }}
       />
 
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
       {/* ConfirmDialog 렌더 */}
       {ConfirmDialogComponent}
-
-      <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName="production_plan_mng"
-        settingsId="production-plan"
-        onSave={applyTableSettings}
-      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_7/production/process-info/ItemRoutingTab.tsx b/frontend/app/(main)/COMPANY_7/production/process-info/ItemRoutingTab.tsx
index 655b9c69..a5b136c2 100644
--- a/frontend/app/(main)/COMPANY_7/production/process-info/ItemRoutingTab.tsx
+++ b/frontend/app/(main)/COMPANY_7/production/process-info/ItemRoutingTab.tsx
@@ -5,7 +5,15 @@ import { GitBranch, Loader2, PackagePlus, Pencil, Plus, Save, Search, Star, Tras
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import {
   Dialog,
   DialogContent,
@@ -14,11 +22,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import {
   createRoutingVersion,
   getProcessList,
@@ -90,7 +93,6 @@ export function ItemRoutingTab() {
   const [formOutsource, setFormOutsource] = useState("");
   const [detailSubmitting, setDetailSubmitting] = useState(false);
 
-  // 품목 등록 모달 state
   const [registerDialogOpen, setRegisterDialogOpen] = useState(false);
   const [registerSearch, setRegisterSearch] = useState("");
   const [registerSearchDebounced, setRegisterSearchDebounced] = useState("");
@@ -116,7 +118,7 @@ export function ItemRoutingTab() {
       if (res.success && res.data) {
         setItems(res.data);
       } else {
-        toast.error(res.message || "품목 목록을 불러오지 못했습니다.");
+        toast.error(res.message || "품목 목록을 불러오지 못했어요");
         setItems([]);
       }
     } finally {
@@ -133,7 +135,7 @@ export function ItemRoutingTab() {
     try {
       const procRes = await getProcessList({ useYn: "Y" });
       if (!procRes.success || !procRes.data) {
-        toast.error(procRes.message || "공정 목록을 불러오지 못했습니다.");
+        toast.error(procRes.message || "공정 목록을 불러오지 못했어요");
         setProcesses([]);
         return;
       }
@@ -147,7 +149,6 @@ export function ItemRoutingTab() {
     void loadProcesses();
   }, [loadProcesses]);
 
-  // 등록 모달 품목 검색
   const loadRegisterItems = useCallback(async (search: string) => {
     setRegisterLoading(true);
     try {
@@ -167,12 +168,11 @@ export function ItemRoutingTab() {
     void loadRegisterItems(registerSearchDebounced);
   }, [registerSearchDebounced, registerDialogOpen, loadRegisterItems]);
 
-  // 이미 등록된 품목인지 판별 (item_code 기준)
   const registeredItemCodes = useMemo(() => new Set(items.map((i) => i.item_code)), [items]);
 
   const handleRegisterItems = async () => {
     if (registerSelectedIds.size === 0) {
-      toast.error("등록할 품목을 선택하세요.");
+      toast.error("등록할 품목을 선택해주세요");
       return;
     }
     setRegisterSubmitting(true);
@@ -184,13 +184,13 @@ export function ItemRoutingTab() {
       }));
       const res = await registerItemsBatch(batchItems);
       if (res.success) {
-        toast.success(`${batchItems.length}건 품목이 등록되었습니다.`);
+        toast.success(`${batchItems.length}건 품목이 등록되었어요`);
         setRegisterDialogOpen(false);
         setRegisterSearch("");
         setRegisterSelectedIds(new Set());
         void loadItems(debouncedSearch);
       } else {
-        toast.error(res.message || "품목 등록에 실패했습니다.");
+        toast.error(res.message || "품목 등록에 실패했어요");
       }
     } finally {
       setRegisterSubmitting(false);
@@ -206,7 +206,7 @@ export function ItemRoutingTab() {
     try {
       const res = await getRoutingVersions(item.item_code);
       if (!res.success || !res.data) {
-        toast.error(res.message || "라우팅 버전을 불러오지 못했습니다.");
+        toast.error(res.message || "라우팅 버전을 불러오지 못했어요");
         return;
       }
       const list = res.data.map((v) => ({ ...v, is_default: normalizeDefaultFlag(v) }));
@@ -233,7 +233,7 @@ export function ItemRoutingTab() {
       if (res.success && res.data) {
         setDetails(sortDetailsBySeq(res.data));
       } else {
-        toast.error(res.message || "라우팅 공정을 불러오지 못했습니다.");
+        toast.error(res.message || "라우팅 공정을 불러오지 못했어요");
         setDetails([]);
       }
     } finally {
@@ -253,7 +253,7 @@ export function ItemRoutingTab() {
 
   const openAddDetailDialog = () => {
     if (!selectedVersionId) {
-      toast.error("먼저 라우팅 버전을 선택하세요.");
+      toast.error("먼저 라우팅 버전을 선택해주세요");
       return;
     }
     setDetailDialogMode("add");
@@ -271,17 +271,17 @@ export function ItemRoutingTab() {
 
   const openEditDetailDialog = () => {
     if (!selectedVersionId) {
-      toast.error("먼저 라우팅 버전을 선택하세요.");
+      toast.error("먼저 라우팅 버전을 선택해주세요");
       return;
     }
     if (selectedDetailIds.size !== 1) {
-      toast.error("수정할 공정 한 건만 선택하세요.");
+      toast.error("수정할 공정 한 건만 선택해주세요");
       return;
     }
     const id = [...selectedDetailIds][0];
     const row = details.find((d) => d.id === id);
     if (!row) {
-      toast.error("선택한 공정을 찾을 수 없습니다.");
+      toast.error("선택한 공정을 찾을 수 없어요");
       return;
     }
     setDetailDialogMode("edit");
@@ -299,17 +299,17 @@ export function ItemRoutingTab() {
   const submitDetailForm = () => {
     if (!selectedVersionId) return;
     if (!formProcessCode) {
-      toast.error("공정을 선택하세요.");
+      toast.error("공정을 선택해주세요");
       return;
     }
     const seq = parseInt(formSeqNo, 10);
     if (Number.isNaN(seq) || seq < 1) {
-      toast.error("올바른 순번을 입력하세요.");
+      toast.error("올바른 순번을 입력해주세요");
       return;
     }
     const st = formStandardTime.trim();
     if (st !== "" && Number.isNaN(Number(st))) {
-      toast.error("표준작업시간은 숫자로 입력하세요.");
+      toast.error("표준작업시간은 숫자로 입력해주세요");
       return;
     }
     const proc = processes.find((p) => p.process_code === formProcessCode);
@@ -331,7 +331,7 @@ export function ItemRoutingTab() {
           outsource_supplier: outsource,
         };
         setDetails((prev) => sortDetailsBySeq([...prev, newRow]));
-        toast.success("공정이 추가되었습니다. 저장을 눌러 반영하세요.");
+        toast.success("공정이 추가되었어요. 저장을 눌러 반영해주세요");
       } else if (editingDetailId) {
         setDetails((prev) =>
           sortDetailsBySeq(
@@ -352,7 +352,7 @@ export function ItemRoutingTab() {
             ),
           ),
         );
-        toast.success("공정이 수정되었습니다. 저장을 눌러 반영하세요.");
+        toast.success("공정이 수정되었어요. 저장을 눌러 반영해주세요");
       }
       setDetailDialogOpen(false);
     } finally {
@@ -362,36 +362,17 @@ export function ItemRoutingTab() {
 
   const deleteSelectedDetails = () => {
     if (selectedDetailIds.size === 0) {
-      toast.error("삭제할 공정을 선택하세요.");
+      toast.error("삭제할 공정을 선택해주세요");
       return;
     }
     setDetails((prev) => prev.filter((d) => !selectedDetailIds.has(d.id)));
     setSelectedDetailIds(new Set());
-    toast.success("선택한 공정이 목록에서 제거되었습니다. 저장을 눌러 반영하세요.");
+    toast.success("선택한 공정이 제거되었어요. 저장을 눌러 반영해주세요");
   };
 
-  const toggleDetailSelected = (id: string, checked: boolean) => {
-    setSelectedDetailIds((prev) => {
-      const next = new Set(prev);
-      if (checked) next.add(id);
-      else next.delete(id);
-      return next;
-    });
-  };
-
-  const toggleAllDetails = (checked: boolean) => {
-    if (!checked) {
-      setSelectedDetailIds(new Set());
-      return;
-    }
-    setSelectedDetailIds(new Set(details.map((d) => d.id)));
-  };
-
-  const allDetailsSelected = details.length > 0 && details.every((d) => selectedDetailIds.has(d.id));
-
   const persistDetails = async () => {
     if (!selectedVersionId) {
-      toast.error("저장할 버전이 없습니다.");
+      toast.error("저장할 버전이 없어요");
       return;
     }
     const payload = details.map((d) => ({
@@ -408,10 +389,10 @@ export function ItemRoutingTab() {
     try {
       const res = await saveRoutingDetails(selectedVersionId, payload);
       if (res.success) {
-        toast.success("저장되었습니다.");
+        toast.success("저장되었어요");
         await loadDetails(selectedVersionId);
       } else {
-        toast.error(res.message || "저장에 실패했습니다.");
+        toast.error(res.message || "저장에 실패했어요");
       }
     } finally {
       setSaving(false);
@@ -422,7 +403,7 @@ export function ItemRoutingTab() {
     if (!selectedItem) return;
     const name = versionName.trim();
     if (!name) {
-      toast.error("버전명을 입력하세요.");
+      toast.error("버전명을 입력해주세요");
       return;
     }
     setVersionSubmitting(true);
@@ -434,7 +415,7 @@ export function ItemRoutingTab() {
         is_default: versionIsDefault || undefined,
       });
       if (res.success && res.data) {
-        toast.success("버전이 추가되었습니다.");
+        toast.success("버전이 추가되었어요");
         setVersionDialogOpen(false);
         setVersionName("");
         setVersionDescription("");
@@ -442,62 +423,77 @@ export function ItemRoutingTab() {
         const created = res.data as RoutingVersion;
         await loadVersions(selectedItem, created?.id);
       } else {
-        toast.error(res.message || "버전 추가에 실패했습니다.");
+        toast.error(res.message || "버전 추가에 실패했어요");
       }
     } finally {
       setVersionSubmitting(false);
     }
   };
 
+  const detailsGridData = useMemo(
+    () =>
+      details.map((d) => ({
+        ...d,
+        process_display: d.process_name || d.process_code,
+        outsource_display: d.outsource_supplier || "—",
+      })),
+    [details],
+  );
+
   return (
-    <div className="flex min-h-[420px] w-full flex-1 flex-col md:min-h-[560px]">
-      <ResizablePanelGroup
-        direction="horizontal"
-        className="border-border flex min-h-[420px] flex-1 rounded-lg border md:min-h-[560px]"
-      >
-        <ResizablePanel defaultSize={30} minSize={18} className="min-w-0">
-          <div className="flex h-full flex-col gap-3 p-3 sm:p-4">
-            <div className="flex items-center gap-2">
-              <div className="relative flex-1">
-                <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 sm:h-4 sm:w-4" />
-              <Input
-                value={searchInput}
-                onChange={(e) => setSearchInput(e.target.value)}
-                placeholder="품목코드 / 품목명 검색"
-                className="focus-visible:ring-ring h-8 pl-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:pl-9 sm:text-sm"
-                aria-label="품목 검색"
-              />
+    <div className="flex h-full flex-col">
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+        {/* 좌측: 등록 품목 */}
+        <ResizablePanel defaultSize={30} minSize={18}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <PackagePlus className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">등록 품목</span>
+              <Badge variant="secondary" className="font-mono text-xs">
+                {items.length}건
+              </Badge>
+              <div className="ml-auto">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setRegisterSearch("");
+                    setRegisterSelectedIds(new Set());
+                    setRegisterItems([]);
+                    setRegisterDialogOpen(true);
+                  }}
+                >
+                  <Plus className="mr-1 h-3.5 w-3.5" />
+                  품목 등록
+                </Button>
               </div>
-              <Button
-                type="button"
-                size="icon"
-                variant="outline"
-                className="h-8 w-8 shrink-0 sm:h-10 sm:w-10"
-                onClick={() => {
-                  setRegisterSearch("");
-                  setRegisterSelectedIds(new Set());
-                  setRegisterItems([]);
-                  setRegisterDialogOpen(true);
-                }}
-                title="품목 등록"
-              >
-                <PackagePlus className="h-4 w-4" />
-              </Button>
             </div>
-            <div className="min-h-0 flex-1 overflow-hidden">
+
+            <div className="border-b px-3 py-2">
+              <div className="relative">
+                <Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  value={searchInput}
+                  onChange={(e) => setSearchInput(e.target.value)}
+                  placeholder="품목코드 / 품목명 검색"
+                  className="h-8 pl-8 text-xs"
+                  aria-label="품목 검색"
+                />
+              </div>
+            </div>
+
+            <div className="min-h-0 flex-1 overflow-auto p-3">
               {itemsLoading ? (
-                <div className="text-muted-foreground flex h-40 items-center justify-center gap-2 text-xs sm:text-sm">
-                  <Loader2 className="text-primary h-5 w-5 animate-spin" />
-                  불러오는 중...
+                <div className="flex items-center justify-center gap-2 py-12 text-muted-foreground">
+                  <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                  <span className="text-sm">불러오는 중...</span>
                 </div>
               ) : items.length === 0 ? (
-                <div className="flex flex-col items-center justify-center gap-3 px-1 py-10">
-                  <p className="text-muted-foreground text-center text-xs sm:text-sm">등록된 품목이 없습니다.</p>
+                <div className="flex flex-col items-center justify-center gap-3 py-12">
+                  <p className="text-sm text-muted-foreground">등록된 품목이 없어요</p>
                   <Button
-                    type="button"
-                    variant="outline"
+                    variant="ghost"
                     size="sm"
-                    className="gap-1 text-xs"
                     onClick={() => {
                       setRegisterSearch("");
                       setRegisterSelectedIds(new Set());
@@ -505,12 +501,12 @@ export function ItemRoutingTab() {
                       setRegisterDialogOpen(true);
                     }}
                   >
-                    <PackagePlus className="h-3.5 w-3.5" />
+                    <PackagePlus className="mr-1 h-3.5 w-3.5" />
                     품목 등록하기
                   </Button>
                 </div>
               ) : (
-                <div className="flex h-full max-h-[calc(100vh-16rem)] flex-col gap-2 overflow-y-auto pr-1">
+                <div className="space-y-2">
                   {items.map((item) => {
                     const active = selectedItem?.id === item.id;
                     return (
@@ -519,15 +515,13 @@ export function ItemRoutingTab() {
                         type="button"
                         onClick={() => setSelectedItem(item)}
                         className={cn(
-                          "focus-visible:ring-ring w-full rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-offset-2",
-                          "border-border bg-card hover:bg-accent/50 shadow-sm",
-                          active && "border-primary ring-ring/30 ring-2",
+                          "w-full rounded-lg border p-3 text-left transition-colors",
+                          "border-border bg-card hover:bg-muted/30",
+                          active && "border-primary ring-2 ring-ring/30",
                         )}
                       >
-                        <p className="text-foreground text-xs font-medium sm:text-sm">{item.item_code}</p>
-                        <p className="text-muted-foreground mt-0.5 line-clamp-2 text-[11px] sm:text-xs">
-                          {item.item_name}
-                        </p>
+                        <p className="text-sm font-medium text-foreground">{item.item_code}</p>
+                        <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">{item.item_name}</p>
                       </button>
                     );
                   })}
@@ -539,73 +533,72 @@ export function ItemRoutingTab() {
 
         <ResizableHandle withHandle />
 
-        <ResizablePanel defaultSize={70} minSize={35} className="min-w-0">
-          <div className="flex h-full min-h-0 flex-col">
+        {/* 우측: 버전 + 라우팅 상세 */}
+        <ResizablePanel defaultSize={70} minSize={35}>
+          <div className="flex h-full flex-col">
             {!selectedItem ? (
-              <div className="text-muted-foreground flex flex-1 flex-col items-center justify-center gap-2 px-4 text-center text-xs sm:text-sm">
-                <GitBranch className="h-8 w-8 opacity-50" aria-hidden />
-                좌측에서 품목을 선택하면 라우팅을 관리할 수 있습니다.
+              <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+                <GitBranch className="h-10 w-10 opacity-40" />
+                <p className="text-sm font-medium text-foreground">좌측에서 품목을 선택해주세요</p>
+                <p className="max-w-xs text-xs">품목을 선택하면 라우팅 버전과 공정을 관리할 수 있어요</p>
               </div>
             ) : (
               <>
-                <div className="border-border flex shrink-0 flex-col gap-3 border-b p-3 sm:p-4">
-                  <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                    <div className="min-w-0">
-                      <p className="text-foreground text-xs font-semibold sm:text-sm">{selectedItem.item_name}</p>
-                      <p className="text-muted-foreground mt-0.5 text-[11px] sm:text-xs">
-                        품목코드 {selectedItem.item_code}
-                      </p>
-                    </div>
-                    <div className="flex shrink-0 gap-2">
-                      <Button
-                        type="button"
-                        size="sm"
-                        variant="destructive"
-                        className="h-8 gap-1 text-xs sm:h-9 sm:text-sm"
-                        onClick={async () => {
-                          if (!selectedItem.registered_id) return;
-                          const res = await unregisterItem(selectedItem.registered_id);
-                          if (res.success) {
-                            toast.success("품목 등록이 해제되었습니다.");
-                            setSelectedItem(null);
-                            void loadItems(debouncedSearch);
-                          } else {
-                            toast.error(res.message || "등록 해제에 실패했습니다.");
-                          }
-                        }}
-                      >
-                        <Trash2 className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
-                        등록 해제
-                      </Button>
-                      <Button
-                        type="button"
-                        size="sm"
-                        className="h-8 gap-1 text-xs sm:h-9 sm:text-sm"
-                        onClick={() => {
-                          setVersionName("");
-                          setVersionDescription("");
-                          setVersionIsDefault(false);
-                          setVersionDialogOpen(true);
-                        }}
-                      >
-                        <Plus className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
-                        버전 추가
-                      </Button>
-                    </div>
+                {/* 패널 헤더 */}
+                <div className="flex items-center gap-3 border-b bg-muted/30 px-4 py-2">
+                  <GitBranch className="h-4 w-4 shrink-0 text-muted-foreground" />
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-semibold">{selectedItem.item_name}</p>
+                    <p className="text-xs text-muted-foreground">품목코드 {selectedItem.item_code}</p>
                   </div>
+                  <div className="flex shrink-0 gap-2">
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={async () => {
+                        if (!selectedItem.registered_id) return;
+                        const res = await unregisterItem(selectedItem.registered_id);
+                        if (res.success) {
+                          toast.success("품목 등록이 해제되었어요");
+                          setSelectedItem(null);
+                          void loadItems(debouncedSearch);
+                        } else {
+                          toast.error(res.message || "등록 해제에 실패했어요");
+                        }
+                      }}
+                    >
+                      <Trash2 className="mr-1 h-3.5 w-3.5" />
+                      등록 해제
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={() => {
+                        setVersionName("");
+                        setVersionDescription("");
+                        setVersionIsDefault(false);
+                        setVersionDialogOpen(true);
+                      }}
+                    >
+                      <Plus className="mr-1 h-3.5 w-3.5" />
+                      버전 추가
+                    </Button>
+                  </div>
+                </div>
 
-                  <div className="flex flex-wrap items-center gap-2">
-                    {versionsLoading ? (
-                      <div className="text-muted-foreground flex items-center gap-2 text-xs sm:text-sm">
-                        <Loader2 className="text-primary h-4 w-4 animate-spin" />
-                        버전 불러오는 중...
-                      </div>
-                    ) : versions.length === 0 ? (
-                      <p className="text-muted-foreground text-xs sm:text-sm">
-                        등록된 버전이 없습니다. 버전을 추가하세요.
-                      </p>
-                    ) : (
-                      versions.map((v) => {
+                {/* 버전 pills */}
+                <div className="border-b bg-muted/30 px-4 py-2">
+                  {versionsLoading ? (
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Loader2 className="h-4 w-4 animate-spin text-primary" />
+                      버전 불러오는 중...
+                    </div>
+                  ) : versions.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">
+                      등록된 버전이 없어요. 버전을 추가해주세요.
+                    </p>
+                  ) : (
+                    <div className="flex flex-wrap items-center gap-2">
+                      {versions.map((v) => {
                         const selected = v.id === selectedVersionId;
                         const def = normalizeDefaultFlag(v);
                         return (
@@ -614,7 +607,7 @@ export function ItemRoutingTab() {
                             type="button"
                             onClick={() => setSelectedVersionId(v.id)}
                             className={cn(
-                              "focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm",
+                              "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors",
                               selected
                                 ? "border-primary bg-primary text-primary-foreground"
                                 : "border-border bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -623,7 +616,7 @@ export function ItemRoutingTab() {
                             {def && (
                               <Star
                                 className={cn(
-                                  "h-3.5 w-3.5 sm:h-4 sm:w-4",
+                                  "h-3.5 w-3.5",
                                   selected ? "fill-primary-foreground" : "fill-warning text-warning",
                                 )}
                                 aria-label="기본 버전"
@@ -632,136 +625,88 @@ export function ItemRoutingTab() {
                             {v.version_name}
                           </button>
                         );
-                      })
+                      })}
+                    </div>
+                  )}
+                </div>
+
+                {/* 액션 바 */}
+                <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-semibold">라우팅 공정</span>
+                    <Badge variant="secondary" className="font-mono text-xs">
+                      {details.length}건
+                    </Badge>
+                  </div>
+                  <div className="flex gap-2">
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={openAddDetailDialog}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Plus className="mr-1 h-3.5 w-3.5" />
+                    공정 추가
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={openEditDetailDialog}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Pencil className="mr-1 h-3.5 w-3.5" />
+                    수정
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={deleteSelectedDetails}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Trash2 className="mr-1 h-3.5 w-3.5" />
+                    선택 삭제
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={() => void persistDetails()}
+                    disabled={!selectedVersionId || detailsLoading || saving}
+                  >
+                    {saving ? (
+                      <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Save className="mr-1 h-3.5 w-3.5" />
                     )}
+                    저장
+                  </Button>
                   </div>
                 </div>
 
-                <div className="flex min-h-0 flex-1 flex-col gap-3 p-3 sm:p-4">
-                  <div className="flex flex-wrap gap-2">
-                    <Button
-                      type="button"
-                      variant="secondary"
-                      size="sm"
-                      className="h-8 text-xs sm:h-9 sm:text-sm"
-                      onClick={openAddDetailDialog}
-                      disabled={!selectedVersionId || detailsLoading}
-                    >
-                      <Plus className="mr-1 h-3.5 w-3.5" />
-                      공정 추가
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="secondary"
-                      size="sm"
-                      className="h-8 text-xs sm:h-9 sm:text-sm"
-                      onClick={openEditDetailDialog}
-                      disabled={!selectedVersionId || detailsLoading}
-                    >
-                      <Pencil className="mr-1 h-3.5 w-3.5" />
-                      수정
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      className="h-8 text-xs sm:h-9 sm:text-sm"
-                      onClick={deleteSelectedDetails}
-                      disabled={!selectedVersionId || detailsLoading}
-                    >
-                      <Trash2 className="mr-1 h-3.5 w-3.5" />
-                      선택 삭제
-                    </Button>
-                    <Button
-                      type="button"
-                      size="sm"
-                      className="h-8 text-xs sm:h-9 sm:text-sm"
-                      onClick={() => void persistDetails()}
-                      disabled={!selectedVersionId || detailsLoading || saving}
-                    >
-                      {saving ? (
-                        <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
-                      ) : (
-                        <Save className="mr-1 h-3.5 w-3.5" />
-                      )}
-                      저장
-                    </Button>
-                  </div>
-
-                  <div className="border-border min-h-0 flex-1 overflow-hidden rounded-md border">
-                    {detailsLoading ? (
-                      <div className="text-muted-foreground flex h-48 items-center justify-center gap-2 text-xs sm:text-sm">
-                        <Loader2 className="text-primary h-5 w-5 animate-spin" />
-                        공정 순서 불러오는 중...
-                      </div>
-                    ) : !selectedVersionId ? (
-                      <p className="text-muted-foreground p-6 text-center text-xs sm:text-sm">버전을 선택하세요.</p>
-                    ) : (
-                      <div className="h-full max-h-[calc(100vh-20rem)] overflow-auto">
-                        <Table>
-                          <TableHeader>
-                            <TableRow className="hover:bg-transparent">
-                              <TableHead className="w-10">
-                                <Checkbox
-                                  checked={allDetailsSelected}
-                                  onCheckedChange={(c) => toggleAllDetails(c === true)}
-                                  aria-label="전체 선택"
-                                  className="focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2"
-                                />
-                              </TableHead>
-                              <TableHead className="text-xs sm:text-sm">순번</TableHead>
-                              <TableHead className="text-xs sm:text-sm">공정명</TableHead>
-                              <TableHead className="text-xs sm:text-sm">필수</TableHead>
-                              <TableHead className="text-xs sm:text-sm">순서고정</TableHead>
-                              <TableHead className="text-xs sm:text-sm">작업구분</TableHead>
-                              <TableHead className="text-xs sm:text-sm">표준시간</TableHead>
-                              <TableHead className="text-xs sm:text-sm">외주업체</TableHead>
-                            </TableRow>
-                          </TableHeader>
-                          <TableBody>
-                            {details.length === 0 ? (
-                              <TableRow>
-                                <TableCell
-                                  colSpan={8}
-                                  className="text-muted-foreground py-10 text-center text-xs sm:text-sm"
-                                >
-                                  등록된 공정이 없습니다.
-                                </TableCell>
-                              </TableRow>
-                            ) : (
-                              details.map((row) => (
-                                <TableRow key={row.id}>
-                                  <TableCell>
-                                    <Checkbox
-                                      checked={selectedDetailIds.has(row.id)}
-                                      onCheckedChange={(c) => toggleDetailSelected(row.id, c === true)}
-                                      aria-label={`${row.process_name || row.process_code} 선택`}
-                                      className="focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2"
-                                    />
-                                  </TableCell>
-                                  <TableCell className="text-xs sm:text-sm">{row.seq_no}</TableCell>
-                                  <TableCell className="text-xs sm:text-sm">
-                                    {row.process_name || row.process_code}
-                                  </TableCell>
-                                  <TableCell className="text-xs sm:text-sm">
-                                    {row.is_required === "N" ? "N" : "Y"}
-                                  </TableCell>
-                                  <TableCell className="text-xs sm:text-sm">
-                                    {row.is_fixed_order === "N" ? "N" : "Y"}
-                                  </TableCell>
-                                  <TableCell className="text-xs sm:text-sm">{row.work_type}</TableCell>
-                                  <TableCell className="text-xs sm:text-sm">{row.standard_time}</TableCell>
-                                  <TableCell className="max-w-[140px] truncate text-xs sm:text-sm">
-                                    {row.outsource_supplier || "—"}
-                                  </TableCell>
-                                </TableRow>
-                              ))
-                            )}
-                          </TableBody>
-                        </Table>
-                      </div>
-                    )}
-                  </div>
+                {/* 라우팅 공정 테이블 */}
+                <div className="min-h-0 flex-1 overflow-auto">
+                  {!selectedVersionId ? (
+                    <p className="py-8 text-center text-sm text-muted-foreground">버전을 선택해주세요</p>
+                  ) : (
+                    <EDataTable
+                      columns={[
+                        { key: "seq_no", label: "순번", width: "w-[80px]", align: "center" as const },
+                        { key: "process_display", label: "공정명" },
+                        { key: "is_required", label: "필수", width: "w-[80px]", align: "center" as const },
+                        { key: "is_fixed_order", label: "순서고정", width: "w-[90px]", align: "center" as const },
+                        { key: "work_type", label: "작업구분", width: "w-[100px]" },
+                        { key: "standard_time", label: "표준시간", width: "w-[90px]", align: "right" as const },
+                        { key: "outsource_display", label: "외주업체" },
+                      ] as EDataTableColumn[]}
+                      data={detailsGridData}
+                      rowKey={(row) => row.id}
+                      loading={detailsLoading}
+                      emptyMessage="등록된 공정이 없어요"
+                      showCheckbox
+                      checkedIds={Array.from(selectedDetailIds)}
+                      onCheckedChange={(ids) => setSelectedDetailIds(new Set(ids))}
+                      showPagination={false}
+                      draggableColumns={false}
+                    />
+                  )}
                 </div>
               </>
             )}
@@ -769,37 +714,32 @@ export function ItemRoutingTab() {
         </ResizablePanel>
       </ResizablePanelGroup>
 
+      {/* 버전 추가 모달 */}
       <Dialog open={versionDialogOpen} onOpenChange={setVersionDialogOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">라우팅 버전 추가</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              선택한 품목에 새 라우팅 버전을 추가합니다.
-            </DialogDescription>
+            <DialogTitle>라우팅 버전 추가</DialogTitle>
+            <DialogDescription>선택한 품목에 새 라우팅 버전을 추가해요</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3 sm:space-y-4">
-            <div>
-              <Label htmlFor="versionName" className="text-xs sm:text-sm">
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 버전명 <span className="text-destructive">*</span>
               </Label>
               <Input
-                id="versionName"
                 value={versionName}
                 onChange={(e) => setVersionName(e.target.value)}
                 placeholder="예: Rev.A"
-                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
-            <div>
-              <Label htmlFor="versionDesc" className="text-xs sm:text-sm">
-                설명
-              </Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설명</Label>
               <Input
-                id="versionDesc"
                 value={versionDescription}
                 onChange={(e) => setVersionDescription(e.target.value)}
                 placeholder="선택 입력"
-                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
             <div className="flex items-center gap-2">
@@ -807,178 +747,131 @@ export function ItemRoutingTab() {
                 id="versionDefault"
                 checked={versionIsDefault}
                 onCheckedChange={(c) => setVersionIsDefault(c === true)}
-                className="focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2"
               />
-              <Label htmlFor="versionDefault" className="text-xs font-normal sm:text-sm">
+              <Label htmlFor="versionDefault" className="text-sm font-normal">
                 기본 버전으로 설정
               </Label>
             </div>
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setVersionDialogOpen(false)}
-              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
-            >
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setVersionDialogOpen(false)} disabled={versionSubmitting}>
               취소
             </Button>
-            <Button
-              type="button"
-              onClick={() => void submitNewVersion()}
-              disabled={versionSubmitting}
-              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
-            >
-              {versionSubmitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              추가
+            <Button onClick={() => void submitNewVersion()} disabled={versionSubmitting}>
+              {versionSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              추가해요
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
+      {/* 공정 추가/수정 모달 */}
       <Dialog open={detailDialogOpen} onOpenChange={setDetailDialogOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">
-              {detailDialogMode === "add" ? "공정 추가" : "공정 수정"}
-            </DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              라우팅 공정 순서에 반영할 내용을 입력합니다. 적용 후 저장을 눌러주세요.
-            </DialogDescription>
+            <DialogTitle>{detailDialogMode === "add" ? "공정 추가" : "공정 수정"}</DialogTitle>
+            <DialogDescription>라우팅 공정 순서에 반영할 내용을 입력해주세요</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3 sm:space-y-4">
-            <div>
-              <Label className="text-xs sm:text-sm">
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 공정 <span className="text-destructive">*</span>
               </Label>
               <Select value={formProcessCode} onValueChange={setFormProcessCode}>
-                <SelectTrigger
-                  className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
-                  aria-label="공정 선택"
-                >
+                <SelectTrigger className="h-9" size="sm">
                   <SelectValue placeholder={processesLoading ? "불러오는 중..." : "공정 선택"} />
                 </SelectTrigger>
                 <SelectContent>
                   {processes.map((p) => (
-                    <SelectItem key={p.id} value={p.process_code} className="text-xs sm:text-sm">
+                    <SelectItem key={p.id} value={p.process_code}>
                       {p.process_name} ({p.process_code})
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
-            <div>
-              <Label htmlFor="seqNo" className="text-xs sm:text-sm">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 순번 <span className="text-destructive">*</span>
               </Label>
               <Input
-                id="seqNo"
                 type="number"
                 min={1}
                 value={formSeqNo}
                 onChange={(e) => setFormSeqNo(e.target.value)}
-                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-              <div>
-                <Label className="text-xs sm:text-sm">필수여부</Label>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">필수여부</Label>
                 <Select value={formRequired} onValueChange={setFormRequired}>
-                  <SelectTrigger className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm">
+                  <SelectTrigger className="h-9" size="sm">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="Y" className="text-xs sm:text-sm">
-                      Y
-                    </SelectItem>
-                    <SelectItem value="N" className="text-xs sm:text-sm">
-                      N
-                    </SelectItem>
+                    <SelectItem value="Y">Y</SelectItem>
+                    <SelectItem value="N">N</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
-              <div>
-                <Label className="text-xs sm:text-sm">순서고정여부</Label>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">순서고정여부</Label>
                 <Select value={formFixedOrder} onValueChange={setFormFixedOrder}>
-                  <SelectTrigger className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm">
+                  <SelectTrigger className="h-9" size="sm">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="Y" className="text-xs sm:text-sm">
-                      Y
-                    </SelectItem>
-                    <SelectItem value="N" className="text-xs sm:text-sm">
-                      N
-                    </SelectItem>
+                    <SelectItem value="Y">Y</SelectItem>
+                    <SelectItem value="N">N</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
             </div>
-            <div>
-              <Label className="text-xs sm:text-sm">작업구분</Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">작업구분</Label>
               <Select value={formWorkType} onValueChange={setFormWorkType}>
-                <SelectTrigger className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm">
+                <SelectTrigger className="h-9" size="sm">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="내부" className="text-xs sm:text-sm">
-                    내부
-                  </SelectItem>
-                  <SelectItem value="외주" className="text-xs sm:text-sm">
-                    외주
-                  </SelectItem>
-                  <SelectItem value="선택가능" className="text-xs sm:text-sm">
-                    선택가능
-                  </SelectItem>
+                  <SelectItem value="내부">내부</SelectItem>
+                  <SelectItem value="외주">외주</SelectItem>
+                  <SelectItem value="선택가능">선택가능</SelectItem>
                 </SelectContent>
               </Select>
             </div>
-            <div>
-              <Label htmlFor="stdTime" className="text-xs sm:text-sm">
-                표준작업시간(분)
-              </Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">표준작업시간(분)</Label>
               <Input
-                id="stdTime"
                 type="number"
                 min={0}
                 step={1}
                 value={formStandardTime}
                 onChange={(e) => setFormStandardTime(e.target.value)}
                 placeholder="0"
-                className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
             {showOutsourceField && (
-              <div>
-                <Label htmlFor="outsource" className="text-xs sm:text-sm">
-                  외주업체
-                </Label>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">외주업체</Label>
                 <Input
-                  id="outsource"
                   value={formOutsource}
                   onChange={(e) => setFormOutsource(e.target.value)}
                   placeholder="외주 업체명"
-                  className="focus-visible:ring-ring mt-1.5 h-8 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                  className="h-9"
                 />
               </div>
             )}
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setDetailDialogOpen(false)}
-              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
-            >
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDetailDialogOpen(false)} disabled={detailSubmitting}>
               취소
             </Button>
-            <Button
-              type="button"
-              onClick={submitDetailForm}
-              disabled={detailSubmitting}
-              className="focus-visible:ring-ring h-8 flex-1 text-xs focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:flex-none sm:text-sm"
-            >
-              {detailSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : "확인"}
+            <Button onClick={submitDetailForm} disabled={detailSubmitting}>
+              {detailSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              확인
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -986,123 +879,113 @@ export function ItemRoutingTab() {
 
       {/* 품목 등록 모달 */}
       <Dialog open={registerDialogOpen} onOpenChange={setRegisterDialogOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+        <DialogContent className="max-w-2xl">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">품목 등록</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              라우팅에 추가할 품목을 검색하고 선택하세요.
-            </DialogDescription>
+            <DialogTitle>품목 등록</DialogTitle>
+            <DialogDescription>라우팅에 추가할 품목을 검색하고 선택해주세요</DialogDescription>
           </DialogHeader>
-          <div className="space-y-3">
-            <div className="relative">
-              <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
-              <Input
-                value={registerSearch}
-                onChange={(e) => setRegisterSearch(e.target.value)}
-                placeholder="품목코드 / 품목명으로 검색"
-                className="h-8 pl-8 text-xs sm:h-10 sm:pl-9 sm:text-sm"
-                aria-label="품목 검색"
-              />
-            </div>
-            <div className="max-h-[300px] overflow-y-auto rounded-md border">
-              {registerLoading ? (
-                <div className="text-muted-foreground flex h-32 items-center justify-center gap-2 text-xs sm:text-sm">
-                  <Loader2 className="text-primary h-5 w-5 animate-spin" />
-                  검색 중...
-                </div>
-              ) : registerItems.length === 0 ? (
-                <p className="text-muted-foreground py-8 text-center text-xs sm:text-sm">
-                  {registerSearchDebounced ? "검색 결과가 없습니다." : "품목을 검색하세요."}
-                </p>
-              ) : (
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="w-10 text-center">
-                        <Checkbox
-                          checked={
-                            registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number)).length > 0 &&
-                            registerItems
-                              .filter((ri) => !registeredItemCodes.has(ri.item_number))
-                              .every((ri) => registerSelectedIds.has(ri.id))
-                          }
-                          onCheckedChange={(checked) => {
-                            const next = new Set(registerSelectedIds);
-                            const available = registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number));
-                            if (checked) {
-                              available.forEach((ri) => next.add(ri.id));
-                            } else {
-                              available.forEach((ri) => next.delete(ri.id));
-                            }
-                            setRegisterSelectedIds(next);
-                          }}
-                        />
-                      </TableHead>
-                      <TableHead className="text-xs sm:text-sm">품목코드</TableHead>
-                      <TableHead className="text-xs sm:text-sm">품목명</TableHead>
-                      <TableHead className="text-xs sm:text-sm">상태</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {registerItems.map((ri) => {
-                      const alreadyRegistered = registeredItemCodes.has(ri.item_number);
-                      return (
-                        <TableRow
-                          key={ri.id}
-                          className={cn(alreadyRegistered && "opacity-50")}
-                        >
-                          <TableCell className="text-center">
-                            <Checkbox
-                              checked={registerSelectedIds.has(ri.id)}
-                              disabled={alreadyRegistered}
-                              onCheckedChange={(checked) => {
-                                const next = new Set(registerSelectedIds);
-                                if (checked) next.add(ri.id);
-                                else next.delete(ri.id);
-                                setRegisterSelectedIds(next);
-                              }}
-                            />
-                          </TableCell>
-                          <TableCell className="text-xs sm:text-sm">{ri.item_number}</TableCell>
-                          <TableCell className="text-xs sm:text-sm">{ri.item_name}</TableCell>
-                          <TableCell className="text-xs sm:text-sm">
-                            {alreadyRegistered ? (
-                              <span className="text-muted-foreground">등록됨</span>
-                            ) : (
-                              <span className="text-primary">미등록</span>
-                            )}
-                          </TableCell>
-                        </TableRow>
-                      );
-                    })}
-                  </TableBody>
-                </Table>
-              )}
-            </div>
-            {registerSelectedIds.size > 0 && (
-              <p className="text-muted-foreground text-xs">
-                {registerSelectedIds.size}건 선택됨
+        <div className="space-y-3">
+          <div className="relative">
+            <Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={registerSearch}
+              onChange={(e) => setRegisterSearch(e.target.value)}
+              placeholder="품목코드 / 품목명으로 검색"
+              className="h-9 pl-8 text-xs"
+              aria-label="품목 검색"
+            />
+          </div>
+          <div className="max-h-[400px] overflow-auto rounded-md border">
+            {registerLoading ? (
+              <div className="flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground">
+                <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                검색 중...
+              </div>
+            ) : registerItems.length === 0 ? (
+              <p className="py-8 text-center text-sm text-muted-foreground">
+                {registerSearchDebounced ? "검색 결과가 없어요" : "품목을 검색해주세요"}
               </p>
+            ) : (
+              <Table>
+                <TableHeader className="sticky top-0 bg-background z-10">
+                  <TableRow>
+                    <TableHead className="w-10 text-center text-muted-foreground">
+                      <Checkbox
+                        checked={
+                          registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number)).length > 0 &&
+                          registerItems
+                            .filter((ri) => !registeredItemCodes.has(ri.item_number))
+                            .every((ri) => registerSelectedIds.has(ri.id))
+                        }
+                        onCheckedChange={(checked) => {
+                          const next = new Set(registerSelectedIds);
+                          const available = registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number));
+                          if (checked) {
+                            available.forEach((ri) => next.add(ri.id));
+                          } else {
+                            available.forEach((ri) => next.delete(ri.id));
+                          }
+                          setRegisterSelectedIds(next);
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="text-xs text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-xs text-muted-foreground">품목명</TableHead>
+                    <TableHead className="text-xs text-muted-foreground">상태</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {registerItems.map((ri) => {
+                    const alreadyRegistered = registeredItemCodes.has(ri.item_number);
+                    return (
+                      <TableRow key={ri.id} className={cn("hover:bg-muted/30", alreadyRegistered && "opacity-50")}>
+                        <TableCell className="text-center">
+                          <Checkbox
+                            checked={registerSelectedIds.has(ri.id)}
+                            disabled={alreadyRegistered}
+                            onCheckedChange={(checked) => {
+                              const next = new Set(registerSelectedIds);
+                              if (checked) next.add(ri.id);
+                              else next.delete(ri.id);
+                              setRegisterSelectedIds(next);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell className="text-xs">{ri.item_number}</TableCell>
+                        <TableCell className="text-xs">{ri.item_name}</TableCell>
+                        <TableCell className="text-xs">
+                          {alreadyRegistered ? (
+                            <span className="text-muted-foreground">등록됨</span>
+                          ) : (
+                            <span className="text-primary">미등록</span>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
             )}
           </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setRegisterDialogOpen(false)}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
-              취소
-            </Button>
-            <Button
-              type="button"
-              onClick={handleRegisterItems}
-              disabled={registerSubmitting || registerSelectedIds.size === 0}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
-              {registerSubmitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              등록 ({registerSelectedIds.size}건)
-            </Button>
+          </div>
+          <DialogFooter className="flex-row items-center justify-between sm:justify-between">
+            {registerSelectedIds.size > 0 ? (
+              <p className="text-xs text-muted-foreground">{registerSelectedIds.size}건 선택됨</p>
+            ) : (
+              <div />
+            )}
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setRegisterDialogOpen(false)}>
+                취소
+              </Button>
+              <Button
+                onClick={() => void handleRegisterItems()}
+                disabled={registerSubmitting || registerSelectedIds.size === 0}
+              >
+                {registerSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                등록 ({registerSelectedIds.size}건)
+              </Button>
+            </div>
           </DialogFooter>
         </DialogContent>
       </Dialog>
diff --git a/frontend/app/(main)/COMPANY_7/production/process-info/ProcessMasterTab.tsx b/frontend/app/(main)/COMPANY_7/production/process-info/ProcessMasterTab.tsx
index c2fb249d..cfbee962 100644
--- a/frontend/app/(main)/COMPANY_7/production/process-info/ProcessMasterTab.tsx
+++ b/frontend/app/(main)/COMPANY_7/production/process-info/ProcessMasterTab.tsx
@@ -22,8 +22,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Card, CardContent } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -47,8 +45,8 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { cn } from "@/lib/utils";
+import { Checkbox } from "@/components/ui/checkbox";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import {
   getProcessList,
   createProcess,
@@ -61,7 +59,7 @@ import {
   type ProcessMaster,
   type ProcessEquipment,
   type Equipment,
-} from "@/lib/api/processInfo";
+} from "@/lib/api/processInfo"; // API: /process-info/*
 import { getCategoryValues } from "@/lib/api/tableCategoryValue";
 
 const ALL_VALUE = "__all__";
@@ -121,7 +119,7 @@ export function ProcessMasterTab() {
         useYn: filterUseYn === ALL_VALUE ? undefined : filterUseYn,
       });
       if (!res.success) {
-        toast.error(res.message || "공정 목록을 불러오지 못했습니다.");
+        toast.error(res.message || "공정 목록을 불러오지 못했어요");
         return;
       }
       setProcesses(res.data ?? []);
@@ -135,12 +133,12 @@ export function ProcessMasterTab() {
     try {
       const [procRes, eqRes] = await Promise.all([getProcessList(), getEquipmentList()]);
       if (!procRes.success) {
-        toast.error(procRes.message || "공정 목록을 불러오지 못했습니다.");
+        toast.error(procRes.message || "공정 목록을 불러오지 못했어요");
       } else {
         setProcesses(procRes.data ?? []);
       }
       if (!eqRes.success) {
-        toast.error(eqRes.message || "설비 목록을 불러오지 못했습니다.");
+        toast.error(eqRes.message || "설비 목록을 불러오지 못했어요");
       } else {
         setEquipmentMaster(eqRes.data ?? []);
       }
@@ -187,7 +185,7 @@ export function ProcessMasterTab() {
       const res = await getProcessEquipments(selectedProcess.process_code);
       if (cancelled) return;
       if (!res.success) {
-        toast.error(res.message || "공정 설비를 불러오지 못했습니다.");
+        toast.error(res.message || "공정 설비를 불러오지 못했어요");
         setProcessEquipments([]);
       } else {
         setProcessEquipments(res.data ?? []);
@@ -199,28 +197,6 @@ export function ProcessMasterTab() {
     };
   }, [selectedProcess?.process_code]);
 
-  const allSelected = useMemo(() => {
-    if (processes.length === 0) return false;
-    return processes.every((p) => selectedIds.has(p.id));
-  }, [processes, selectedIds]);
-
-  const toggleAll = (checked: boolean) => {
-    if (checked) {
-      setSelectedIds(new Set(processes.map((p) => p.id)));
-    } else {
-      setSelectedIds(new Set());
-    }
-  };
-
-  const toggleOne = (id: string, checked: boolean) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      if (checked) next.add(id);
-      else next.delete(id);
-      return next;
-    });
-  };
-
   const handleResetFilters = () => {
     setFilterCode("");
     setFilterName("");
@@ -246,7 +222,7 @@ export function ProcessMasterTab() {
 
   const openEdit = () => {
     if (!selectedProcess) {
-      toast.message("수정할 공정을 좌측 목록에서 선택하세요.");
+      toast.message("수정할 공정을 좌측 목록에서 선택해주세요");
       return;
     }
     setFormMode("edit");
@@ -262,7 +238,7 @@ export function ProcessMasterTab() {
 
   const submitForm = async () => {
     if (!formProcessName.trim()) {
-      toast.error("공정명을 입력하세요.");
+      toast.error("공정명을 입력해주세요");
       return;
     }
 
@@ -277,10 +253,10 @@ export function ProcessMasterTab() {
           use_yn: formUseYn,
         });
         if (!res.success || !res.data) {
-          toast.error(res.message || "등록에 실패했습니다.");
+          toast.error(res.message || "등록에 실패했어요");
           return;
         }
-        toast.success("공정이 등록되었습니다.");
+        toast.success("공정이 등록되었어요");
         setFormOpen(false);
         await loadProcesses();
         setSelectedProcess(res.data);
@@ -294,10 +270,10 @@ export function ProcessMasterTab() {
           use_yn: formUseYn,
         });
         if (!res.success || !res.data) {
-          toast.error(res.message || "수정에 실패했습니다.");
+          toast.error(res.message || "수정에 실패했어요");
           return;
         }
-        toast.success("공정이 수정되었습니다.");
+        toast.success("공정이 수정되었어요");
         setFormOpen(false);
         await loadProcesses();
         setSelectedProcess(res.data);
@@ -309,7 +285,7 @@ export function ProcessMasterTab() {
 
   const openDelete = () => {
     if (selectedIds.size === 0) {
-      toast.message("삭제할 공정을 체크박스로 선택하세요.");
+      toast.message("삭제할 공정을 체크박스로 선택해주세요");
       return;
     }
     setDeleteOpen(true);
@@ -321,10 +297,10 @@ export function ProcessMasterTab() {
     try {
       const res = await deleteProcesses(ids);
       if (!res.success) {
-        toast.error(res.message || "삭제에 실패했습니다.");
+        toast.error(res.message || "삭제에 실패했어요");
         return;
       }
-      toast.success(`${ids.length}건 삭제되었습니다.`);
+      toast.success(`${ids.length}건 삭제되었어요`);
       setDeleteOpen(false);
       setSelectedIds(new Set());
       if (selectedProcess && ids.includes(selectedProcess.id)) {
@@ -344,7 +320,7 @@ export function ProcessMasterTab() {
   const handleAddEquipment = async () => {
     if (!selectedProcess) return;
     if (!equipmentPick) {
-      toast.message("추가할 설비를 선택하세요.");
+      toast.message("추가할 설비를 선택해주세요");
       return;
     }
     setAddingEquipment(true);
@@ -354,10 +330,10 @@ export function ProcessMasterTab() {
         equipment_code: equipmentPick,
       });
       if (!res.success) {
-        toast.error(res.message || "설비 추가에 실패했습니다.");
+        toast.error(res.message || "설비 추가에 실패했어요");
         return;
       }
-      toast.success("설비가 등록되었습니다.");
+      toast.success("설비가 등록되었어요");
       setEquipmentPick("");
       const listRes = await getProcessEquipments(selectedProcess.process_code);
       if (listRes.success && listRes.data) setProcessEquipments(listRes.data);
@@ -369,10 +345,10 @@ export function ProcessMasterTab() {
   const handleRemoveEquipment = async (row: ProcessEquipment) => {
     const res = await removeProcessEquipment(row.id);
     if (!res.success) {
-      toast.error(res.message || "설비 제거에 실패했습니다.");
+      toast.error(res.message || "설비 제거에 실패했어요");
       return;
     }
-    toast.success("설비가 제거되었습니다.");
+    toast.success("설비가 제거되었어요");
     if (selectedProcess) {
       const listRes = await getProcessEquipments(selectedProcess.process_code);
       if (listRes.success && listRes.data) setProcessEquipments(listRes.data);
@@ -381,260 +357,162 @@ export function ProcessMasterTab() {
 
   const listBusy = loadingInitial || loadingList;
 
+  // 표시용 데이터
+  const processGridData = useMemo(
+    () =>
+      processes.map((p) => ({
+        ...p,
+        process_type_display: getProcessTypeLabel(p.process_type),
+        use_yn_display: p.use_yn === "Y" ? "사용" : "미사용",
+      })),
+    [processes, getProcessTypeLabel]
+  );
+
   return (
-    <div className="flex min-h-[560px] flex-1 flex-col gap-3">
-      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1 rounded-lg">
+    <div className="flex h-full flex-col">
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+        {/* 좌측: 공정 목록 */}
         <ResizablePanel defaultSize={50} minSize={30}>
-          <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border bg-card shadow-sm">
-            <div className="flex shrink-0 flex-col gap-2 border-b bg-muted/30 p-3 sm:p-4">
-              <div className="flex flex-wrap items-center gap-2">
-                <Settings className="h-4 w-4 text-muted-foreground" aria-hidden />
-                <span className="text-sm font-semibold sm:text-base">공정 마스터</span>
-              </div>
-              <div className="flex flex-wrap items-end gap-2">
-                <div className="space-y-1">
-                  <Label className="text-xs sm:text-sm">공정코드</Label>
-                  <Input
-                    value={filterCode}
-                    onChange={(e) => setFilterCode(e.target.value)}
-                    placeholder="코드"
-                    className="h-8 w-[120px] text-xs sm:h-10 sm:w-[140px] sm:text-sm"
-                  />
-                </div>
-                <div className="space-y-1">
-                  <Label className="text-xs sm:text-sm">공정명</Label>
-                  <Input
-                    value={filterName}
-                    onChange={(e) => setFilterName(e.target.value)}
-                    placeholder="이름"
-                    className="h-8 w-[120px] text-xs sm:h-10 sm:w-[160px] sm:text-sm"
-                  />
-                </div>
-                <div className="space-y-1">
-                  <Label className="text-xs sm:text-sm">공정유형</Label>
-                  <Select value={filterType} onValueChange={setFilterType}>
-                    <SelectTrigger className="h-8 w-[120px] text-xs sm:h-10 sm:w-[130px] sm:text-sm">
-                      <SelectValue placeholder="전체" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value={ALL_VALUE} className="text-xs sm:text-sm">
-                        전체
-                      </SelectItem>
-                      {processTypeOptions.map((o, idx) => (
-                        <SelectItem key={`pt-filter-${idx}`} value={o.valueCode} className="text-xs sm:text-sm">
-                          {o.valueLabel}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-1">
-                  <Label className="text-xs sm:text-sm">사용여부</Label>
-                  <Select value={filterUseYn} onValueChange={setFilterUseYn}>
-                    <SelectTrigger className="h-8 w-[100px] text-xs sm:h-10 sm:w-[110px] sm:text-sm">
-                      <SelectValue placeholder="전체" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value={ALL_VALUE} className="text-xs sm:text-sm">
-                        전체
-                      </SelectItem>
-                      <SelectItem value="Y" className="text-xs sm:text-sm">사용</SelectItem>
-                      <SelectItem value="N" className="text-xs sm:text-sm">미사용</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={handleResetFilters}
-                >
-                  <RotateCcw className="mr-1 h-3.5 w-3.5" />
-                  초기화
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={handleSearch}
-                  disabled={listBusy}
-                >
-                  <Search className="mr-1 h-3.5 w-3.5" />
-                  조회
-                </Button>
-              </div>
-              <div className="flex flex-wrap gap-2">
-                <Button
-                  type="button"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={openAdd}
-                >
-                  <Plus className="mr-1 h-3.5 w-3.5" />
-                  공정 추가
-                </Button>
-                <Button
-                  type="button"
-                  variant="secondary"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={openEdit}
-                >
-                  <Pencil className="mr-1 h-3.5 w-3.5" />
-                  수정
-                </Button>
-                <Button
-                  type="button"
-                  variant="destructive"
-                  size="sm"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
-                  onClick={openDelete}
-                >
-                  <Trash2 className="mr-1 h-3.5 w-3.5" />
-                  삭제
-                </Button>
-              </div>
+          <div className="flex h-full flex-col">
+            {/* 패널 헤더 */}
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">공정 마스터</span>
+              <Badge variant="secondary" className="font-mono text-xs">
+                {processes.length}건
+              </Badge>
             </div>
 
-            <ScrollArea className="min-h-0 flex-1">
-              <div className="p-2 sm:p-3">
-                {listBusy ? (
-                  <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
-                    <Loader2 className="h-8 w-8 animate-spin" />
-                    <p className="mt-2 text-xs sm:text-sm">불러오는 중...</p>
-                  </div>
-                ) : (
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead className="w-10 text-center">
-                          <Checkbox
-                            checked={allSelected}
-                            onCheckedChange={(v) => toggleAll(v === true)}
-                            aria-label="전체 선택"
-                            className="mx-auto"
-                          />
-                        </TableHead>
-                        <TableHead className="text-xs sm:text-sm">공정코드</TableHead>
-                        <TableHead className="text-xs sm:text-sm">공정명</TableHead>
-                        <TableHead className="text-xs sm:text-sm">공정유형</TableHead>
-                        <TableHead className="text-right text-xs sm:text-sm">표준시간(분)</TableHead>
-                        <TableHead className="text-right text-xs sm:text-sm">작업인원</TableHead>
-                        <TableHead className="text-center text-xs sm:text-sm">사용여부</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {processes.length === 0 ? (
-                        <TableRow>
-                          <TableCell colSpan={7} className="py-12 text-center text-muted-foreground">
-                            <p className="text-xs sm:text-sm">조회된 공정이 없습니다.</p>
-                          </TableCell>
-                        </TableRow>
-                      ) : (
-                        processes.map((row) => (
-                          <TableRow
-                            key={row.id}
-                            className={cn(
-                              "cursor-pointer transition-colors",
-                              selectedProcess?.id === row.id && "bg-accent"
-                            )}
-                            onClick={() => setSelectedProcess(row)}
-                          >
-                            <TableCell
-                              className="text-center"
-                              onClick={(e) => e.stopPropagation()}
-                            >
-                              <Checkbox
-                                checked={selectedIds.has(row.id)}
-                                onCheckedChange={(v) => toggleOne(row.id, v === true)}
-                                aria-label={`${row.process_code} 선택`}
-                                className="mx-auto"
-                              />
-                            </TableCell>
-                            <TableCell className="text-xs font-medium sm:text-sm">
-                              {row.process_code}
-                            </TableCell>
-                            <TableCell className="text-xs sm:text-sm">{row.process_name}</TableCell>
-                            <TableCell className="text-xs sm:text-sm">
-                              <Badge variant="secondary" className="text-[10px] sm:text-xs">
-                                {getProcessTypeLabel(row.process_type)}
-                              </Badge>
-                            </TableCell>
-                            <TableCell className="text-right text-xs sm:text-sm">
-                              {row.standard_time ?? "-"}
-                            </TableCell>
-                            <TableCell className="text-right text-xs sm:text-sm">
-                              {row.worker_count ?? "-"}
-                            </TableCell>
-                            <TableCell className="text-center text-xs sm:text-sm">
-                              <Badge
-                                variant={row.use_yn === "N" ? "outline" : "default"}
-                                className="text-[10px] sm:text-xs"
-                              >
-                                {row.use_yn === "Y" ? "사용" : "미사용"}
-                              </Badge>
-                            </TableCell>
-                          </TableRow>
-                        ))
-                      )}
-                    </TableBody>
-                  </Table>
-                )}
-              </div>
-            </ScrollArea>
+            {/* 필터 바 */}
+            <div className="flex flex-wrap items-center gap-2 border-b px-3 py-2">
+              <Input value={filterCode} onChange={(e) => setFilterCode(e.target.value)} placeholder="공정코드" className="h-8 w-[110px] text-xs" />
+              <Input value={filterName} onChange={(e) => setFilterName(e.target.value)} placeholder="공정명" className="h-8 w-[130px] text-xs" />
+              <Select value={filterType} onValueChange={setFilterType}>
+                <SelectTrigger className="h-8 w-[110px] text-xs">
+                  <SelectValue placeholder="유형 전체" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>전체</SelectItem>
+                  {processTypeOptions.map((o, idx) => (
+                    <SelectItem key={`pt-filter-${idx}`} value={o.valueCode}>{o.valueLabel}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select value={filterUseYn} onValueChange={setFilterUseYn}>
+                <SelectTrigger className="h-8 w-[100px] text-xs">
+                  <SelectValue placeholder="사용 전체" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>전체</SelectItem>
+                  <SelectItem value="Y">사용</SelectItem>
+                  <SelectItem value="N">미사용</SelectItem>
+                </SelectContent>
+              </Select>
+              <div className="flex-1" />
+              {listBusy && <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />}
+              <Button size="sm" className="h-8 gap-1 text-xs" onClick={handleSearch} disabled={listBusy}>
+                <Search className="h-3 w-3" />조회
+              </Button>
+              <Button variant="ghost" size="sm" className="h-8 gap-1 text-xs text-muted-foreground" onClick={handleResetFilters}>
+                <RotateCcw className="h-3 w-3" />초기화
+              </Button>
+            </div>
+
+            {/* 액션 바 */}
+            <div className="flex items-center justify-end gap-2 border-b bg-muted/30 px-4 py-2">
+              <Button size="sm" onClick={openAdd}>
+                <Plus className="mr-1 h-3.5 w-3.5" />
+                공정 추가
+              </Button>
+              <Button variant="secondary" size="sm" onClick={openEdit}>
+                <Pencil className="mr-1 h-3.5 w-3.5" />
+                수정
+              </Button>
+              <Button variant="destructive" size="sm" onClick={openDelete}>
+                <Trash2 className="mr-1 h-3.5 w-3.5" />
+                삭제
+              </Button>
+            </div>
+
+            {/* 공정 목록 테이블 */}
+            <div className="min-h-0 flex-1 overflow-auto">
+              <EDataTable
+                columns={[
+                  { key: "process_code", label: "공정코드", width: "w-[130px]", render: (val: any) => <span className="font-mono text-xs">{val}</span> },
+                  { key: "process_name", label: "공정명" },
+                  { key: "process_type_display", label: "공정유형", width: "w-[120px]" },
+                  { key: "standard_time", label: "표준시간(분)", width: "w-[110px]", align: "right" as const },
+                  { key: "worker_count", label: "작업인원", width: "w-[90px]", align: "right" as const },
+                  { key: "use_yn_display", label: "사용여부", width: "w-[90px]", align: "center" as const },
+                ] as EDataTableColumn[]}
+                data={processGridData}
+                rowKey={(row) => row.id}
+                loading={listBusy}
+                emptyMessage="조회된 공정이 없어요"
+                selectedId={selectedProcess?.id ?? null}
+                onSelect={(id) => {
+                  const proc = processes.find((p) => p.id === id);
+                  setSelectedProcess(proc || null);
+                }}
+                onRowClick={(row) => {
+                  const proc = processes.find((p) => p.id === row.id);
+                  setSelectedProcess(proc || null);
+                }}
+                showCheckbox
+                checkedIds={Array.from(selectedIds)}
+                onCheckedChange={(ids) => setSelectedIds(new Set(ids))}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
           </div>
         </ResizablePanel>
 
         <ResizableHandle withHandle />
 
+        {/* 우측: 공정별 설비 */}
         <ResizablePanel defaultSize={50} minSize={30}>
-          <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border bg-card shadow-sm">
-            <div className="flex shrink-0 items-center gap-2 border-b bg-muted/30 px-3 py-2 sm:px-4 sm:py-3">
-              <Wrench className="h-4 w-4 text-muted-foreground" aria-hidden />
+          <div className="flex h-full flex-col">
+            {/* 패널 헤더 */}
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <Wrench className="h-4 w-4 text-muted-foreground" />
               <div className="min-w-0 flex-1">
-                <p className="truncate text-sm font-semibold sm:text-base">공정별 사용설비</p>
+                <p className="truncate text-sm font-semibold">공정별 사용설비</p>
                 {selectedProcess ? (
-                  <p className="truncate text-xs text-muted-foreground sm:text-sm">
-                    {selectedProcess.process_name}{" "}
-                    <span className="text-muted-foreground/80">({selectedProcess.process_code})</span>
+                  <p className="truncate text-xs text-muted-foreground">
+                    {selectedProcess.process_name} ({selectedProcess.process_code})
                   </p>
                 ) : (
-                  <p className="text-xs text-muted-foreground sm:text-sm">공정 미선택</p>
+                  <p className="text-xs text-muted-foreground">공정을 선택해주세요</p>
                 )}
               </div>
             </div>
 
             {!selectedProcess ? (
-              <div className="flex flex-1 flex-col items-center justify-center gap-2 px-4 py-12 text-center text-muted-foreground">
+              <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
                 <Settings className="h-10 w-10 opacity-40" />
-                <p className="text-sm font-medium text-foreground">좌측에서 공정을 선택하세요</p>
-                <p className="max-w-xs text-xs sm:text-sm">
-                  목록 행을 클릭하면 이 공정에 연결된 설비를 관리할 수 있습니다.
+                <p className="text-sm font-medium text-foreground">좌측에서 공정을 선택해주세요</p>
+                <p className="max-w-xs text-xs">
+                  목록 행을 클릭하면 이 공정에 연결된 설비를 관리할 수 있어요
                 </p>
               </div>
             ) : (
-              <div className="flex min-h-0 flex-1 flex-col gap-3 p-3 sm:p-4">
-                <div className="flex flex-wrap items-end gap-2">
-                  <div className="min-w-0 flex-1 space-y-1 sm:max-w-xs">
-                    <Label className="text-xs sm:text-sm">설비 선택</Label>
+              <div className="flex min-h-0 flex-1 flex-col gap-3 p-4">
+                <div className="flex items-end gap-2">
+                  <div className="min-w-0 flex-1 space-y-1">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설비 선택</Label>
                     <Select
                       key={selectedProcess.id}
                       value={equipmentPick || undefined}
                       onValueChange={setEquipmentPick}
                       disabled={addingEquipment || availableEquipments.length === 0}
                     >
-                      <SelectTrigger className="h-8 w-full text-xs sm:h-10 sm:text-sm">
-                        <SelectValue placeholder="설비를 선택하세요" />
+                      <SelectTrigger className="h-9" size="sm">
+                        <SelectValue placeholder="설비를 선택해주세요" />
                       </SelectTrigger>
                       <SelectContent>
                         {availableEquipments.map((eq) => (
-                          <SelectItem
-                            key={eq.id}
-                            value={eq.equipment_code}
-                            className="text-xs sm:text-sm"
-                          >
+                          <SelectItem key={eq.id} value={eq.equipment_code}>
                             {eq.equipment_code} · {eq.equipment_name}
                           </SelectItem>
                         ))}
@@ -642,9 +520,7 @@ export function ProcessMasterTab() {
                     </Select>
                   </div>
                   <Button
-                    type="button"
                     size="sm"
-                    className="h-8 text-xs sm:h-10 sm:text-sm"
                     onClick={() => void handleAddEquipment()}
                     disabled={addingEquipment || !equipmentPick}
                   >
@@ -657,47 +533,31 @@ export function ProcessMasterTab() {
                   </Button>
                 </div>
 
-                <div className="min-h-0 flex-1">
+                <div className="min-h-0 flex-1 overflow-auto">
                   {loadingEquipments ? (
                     <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
                       <Loader2 className="h-7 w-7 animate-spin" />
-                      <p className="mt-2 text-xs sm:text-sm">설비 목록 불러오는 중...</p>
+                      <p className="mt-2 text-sm">설비 목록을 불러오고 있어요...</p>
                     </div>
                   ) : processEquipments.length === 0 ? (
-                    <p className="py-8 text-center text-xs text-muted-foreground sm:text-sm">
-                      등록된 설비가 없습니다. 상단에서 설비를 추가하세요.
+                    <p className="py-8 text-center text-sm text-muted-foreground">
+                      등록된 설비가 없어요. 상단에서 설비를 추가해주세요.
                     </p>
                   ) : (
-                    <ScrollArea className="h-[min(420px,calc(100vh-20rem))] pr-3">
-                      <ul className="space-y-2">
-                        {processEquipments.map((pe) => (
-                          <li key={pe.id}>
-                            <Card className="rounded-lg border bg-card text-card-foreground shadow-sm">
-                              <CardContent className="flex items-center gap-3 p-3 sm:p-4">
-                                <div className="min-w-0 flex-1">
-                                  <p className="truncate text-xs font-medium sm:text-sm">
-                                    {pe.equipment_code}
-                                  </p>
-                                  <p className="truncate text-xs text-muted-foreground sm:text-sm">
-                                    {pe.equipment_name || "설비명 없음"}
-                                  </p>
-                                </div>
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  size="sm"
-                                  className="h-8 shrink-0 text-xs sm:h-9 sm:text-sm"
-                                  onClick={() => void handleRemoveEquipment(pe)}
-                                >
-                                  <Trash2 className="mr-1 h-3.5 w-3.5" />
-                                  제거
-                                </Button>
-                              </CardContent>
-                            </Card>
-                          </li>
-                        ))}
-                      </ul>
-                    </ScrollArea>
+                    <ul className="space-y-2">
+                      {processEquipments.map((pe) => (
+                        <li key={pe.id} className="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:bg-muted/30">
+                          <div className="min-w-0 flex-1">
+                            <p className="truncate text-sm font-medium">{pe.equipment_code}</p>
+                            <p className="truncate text-xs text-muted-foreground">{pe.equipment_name || "설비명 없음"}</p>
+                          </div>
+                          <Button variant="ghost" size="sm" onClick={() => void handleRemoveEquipment(pe)}>
+                            <Trash2 className="mr-1 h-3.5 w-3.5" />
+                            제거
+                          </Button>
+                        </li>
+                      ))}
+                    </ul>
                   )}
                 </div>
               </div>
@@ -706,136 +566,95 @@ export function ProcessMasterTab() {
         </ResizablePanel>
       </ResizablePanelGroup>
 
+      {/* 공정 등록/수정 모달 */}
       <Dialog open={formOpen} onOpenChange={setFormOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="max-w-lg">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">
-              {formMode === "add" ? "공정 추가" : "공정 수정"}
-            </DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              공정 마스터 정보를 입력합니다. 표준시간과 작업인원은 숫자로 입력하세요.
-            </DialogDescription>
+            <DialogTitle>{formMode === "add" ? "공정 추가" : "공정 수정"}</DialogTitle>
+            <DialogDescription>공정 마스터 정보를 입력해주세요</DialogDescription>
           </DialogHeader>
-
-          <div className="space-y-3 sm:space-y-4">
-            <div>
-              <Label htmlFor="pm-process-name" className="text-xs sm:text-sm">
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 공정명 <span className="text-destructive">*</span>
               </Label>
               <Input
-                id="pm-process-name"
                 value={formProcessName}
                 onChange={(e) => setFormProcessName(e.target.value)}
-                placeholder="공정명"
-                className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                placeholder="공정명을 입력해주세요"
+                className="h-9"
               />
             </div>
-            <div>
-              <Label className="text-xs sm:text-sm">공정유형</Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">공정유형</Label>
               <Select value={formProcessType} onValueChange={setFormProcessType}>
-                <SelectTrigger className="mt-1 h-8 text-xs sm:h-10 sm:text-sm">
-                  <SelectValue placeholder="선택하세요" />
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder="선택해주세요" />
                 </SelectTrigger>
                 <SelectContent>
                   {processTypeOptions.map((o, idx) => (
-                    <SelectItem key={`pt-form-${idx}`} value={o.valueCode} className="text-xs sm:text-sm">
-                      {o.valueLabel}
-                    </SelectItem>
+                    <SelectItem key={`pt-form-${idx}`} value={o.valueCode}>{o.valueLabel}</SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
-            <div>
-              <Label htmlFor="pm-standard-time" className="text-xs sm:text-sm">
-                표준작업시간(분)
-              </Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">표준작업시간(분)</Label>
               <Input
-                id="pm-standard-time"
                 value={formStandardTime}
                 onChange={(e) => setFormStandardTime(e.target.value)}
                 placeholder="0"
                 inputMode="numeric"
-                className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
-            <div>
-              <Label htmlFor="pm-worker-count" className="text-xs sm:text-sm">
-                작업인원수
-              </Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">작업인원수</Label>
               <Input
-                id="pm-worker-count"
                 value={formWorkerCount}
                 onChange={(e) => setFormWorkerCount(e.target.value)}
                 placeholder="0"
                 inputMode="numeric"
-                className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                className="h-9"
               />
             </div>
-            <div>
-              <Label className="text-xs sm:text-sm">사용여부</Label>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">사용여부</Label>
               <Select value={formUseYn} onValueChange={setFormUseYn}>
-                <SelectTrigger className="mt-1 h-8 text-xs sm:h-10 sm:text-sm">
-                  <SelectValue placeholder="선택하세요" />
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder="선택해주세요" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="Y" className="text-xs sm:text-sm">사용</SelectItem>
-                  <SelectItem value="N" className="text-xs sm:text-sm">미사용</SelectItem>
+                  <SelectItem value="Y">사용</SelectItem>
+                  <SelectItem value="N">미사용</SelectItem>
                 </SelectContent>
               </Select>
             </div>
           </div>
-
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setFormOpen(false)}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-              disabled={savingForm}
-            >
-              취소
-            </Button>
-            <Button
-              type="button"
-              onClick={() => void submitForm()}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-              disabled={savingForm}
-            >
-              {savingForm ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              저장
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setFormOpen(false)} disabled={savingForm}>취소</Button>
+            <Button onClick={() => void submitForm()} disabled={savingForm}>
+              {savingForm && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              저장해요
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
+      {/* 삭제 확인 */}
       <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <DialogContent className="sm:max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">공정 삭제</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              선택한 {selectedIds.size}건의 공정을 삭제합니다. 연결된 공정-설비 매핑도 함께 삭제됩니다. 이 작업은
-              되돌릴 수 없습니다.
+            <DialogTitle>공정 삭제</DialogTitle>
+            <DialogDescription>
+              선택한 {selectedIds.size}건의 공정을 삭제해요. 연결된 공정-설비 매핑도 함께 삭제돼요. 이 작업은 되돌릴 수 없어요.
             </DialogDescription>
           </DialogHeader>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setDeleteOpen(false)}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-              disabled={deleting}
-            >
-              취소
-            </Button>
-            <Button
-              type="button"
-              variant="destructive"
-              onClick={() => void confirmDelete()}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-              disabled={deleting}
-            >
-              {deleting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              삭제
+          <DialogFooter className="gap-2">
+            <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>취소</Button>
+            <Button variant="destructive" onClick={() => void confirmDelete()} disabled={deleting}>
+              {deleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              삭제해요
             </Button>
           </DialogFooter>
         </DialogContent>
diff --git a/frontend/app/(main)/COMPANY_7/production/process-info/page.tsx b/frontend/app/(main)/COMPANY_7/production/process-info/page.tsx
index f9f8e352..a7b81550 100644
--- a/frontend/app/(main)/COMPANY_7/production/process-info/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/production/process-info/page.tsx
@@ -1,56 +1,223 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import { Settings, GitBranch, ClipboardList } from "lucide-react";
+import {
+  Settings,
+  GitBranch,
+  ClipboardList,
+  ChevronRight,
+  Factory,
+  Keyboard,
+  Plus,
+  Pencil,
+  Trash2,
+  List,
+  Settings2,
+} from "lucide-react";
 import { ProcessMasterTab } from "./ProcessMasterTab";
 import { ItemRoutingTab } from "./ItemRoutingTab";
 import { ProcessWorkStandardTab } from "./ProcessWorkStandardTab";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+
+const GRID_COLUMNS = [
+  { key: "process_code", label: "공정코드" },
+  { key: "process_name", label: "공정명" },
+  { key: "process_type", label: "공정유형" },
+  { key: "standard_time", label: "표준시간(분)" },
+  { key: "worker_count", label: "작업인원" },
+  { key: "use_yn", label: "사용여부" },
+];
+
+const TAB_META = [
+  {
+    value: "process",
+    label: "공정 마스터",
+    shortLabel: "공정",
+    description: "공정코드/유형/표준시간/사용설비 관리",
+    detailDesc: "공정코드, 공정유형, 표준시간을 등록하고 사용 설비를 매핑합니다.",
+    icon: Settings,
+    color: "text-blue-500",
+    badgeColor: "bg-blue-50 text-blue-700 ring-blue-600/20",
+    shortcut: "1",
+    actions: ["공정 등록", "공정 수정", "공정 삭제", "설비 연결"],
+  },
+  {
+    value: "routing",
+    label: "품목별 라우팅",
+    shortLabel: "라우팅",
+    description: "품목 라우팅 버전 및 공정 순서 관리",
+    detailDesc: "품목별 생산 라우팅 버전을 관리하고 공정 순서 및 소요시간을 설정합니다.",
+    icon: GitBranch,
+    color: "text-emerald-500",
+    badgeColor: "bg-emerald-50 text-emerald-700 ring-emerald-600/20",
+    shortcut: "2",
+    actions: ["버전 생성", "공정 순서 설정", "품목 등록", "품목 해제"],
+  },
+  {
+    value: "workstandard",
+    label: "공정 작업기준",
+    shortLabel: "작업기준",
+    description: "공정별 작업기준서 및 작업 표준 관리",
+    detailDesc: "공정별 작업기준서를 등록하고 작업 표준을 문서화하여 품질을 관리합니다.",
+    icon: ClipboardList,
+    color: "text-violet-500",
+    badgeColor: "bg-violet-50 text-violet-700 ring-violet-600/20",
+    shortcut: "3",
+    actions: ["기준서 등록", "기준서 수정", "기준서 삭제", "작업 표준 관리"],
+  },
+] as const;
+
+type TabValue = (typeof TAB_META)[number]["value"];
+
+const ACTION_ICONS = [Plus, Pencil, Trash2, List] as const;
 
 export default function ProcessInfoPage() {
-  const [activeTab, setActiveTab] = useState("process");
+  const ts = useTableSettings("c16-process-info", "process_mst", GRID_COLUMNS);
+  const [activeTab, setActiveTab] = useState<TabValue>("process");
+  const [showShortcutHint, setShowShortcutHint] = useState(false);
+
+  const activeMeta = TAB_META.find((t) => t.value === activeTab)!;
+
+  const handleTabChange = useCallback((value: string) => {
+    setActiveTab(value as TabValue);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!e.altKey) return;
+      const tabByShortcut = TAB_META.find((t) => t.shortcut === e.key);
+      if (tabByShortcut) {
+        e.preventDefault();
+        setActiveTab(tabByShortcut.value);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
 
   return (
     <div className="flex h-[calc(100vh-4rem)] flex-col bg-muted/30">
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="flex h-full flex-col">
+      {/* 페이지 헤더 */}
+      <div className="shrink-0 border-b bg-background px-6 py-3">
+        <nav
+          className="mb-1 flex items-center gap-1 text-xs text-muted-foreground"
+          aria-label="breadcrumb"
+        >
+          <Factory className="h-3 w-3" />
+          <span>생산관리</span>
+          <ChevronRight className="h-3 w-3 opacity-50" />
+          <span className="font-medium text-foreground">공정정보관리</span>
+        </nav>
+        <div className="flex items-center justify-between">
+          <div className="flex items-baseline gap-2">
+            <h1 className="text-base font-semibold text-foreground">공정정보관리</h1>
+            <span className="text-xs text-muted-foreground">{activeMeta.description}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+            <button
+              type="button"
+              className="flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              onClick={() => setShowShortcutHint((v) => !v)}
+              aria-label="키보드 단축키 보기"
+            >
+              <Keyboard className="h-3 w-3" />
+              <span>단축키</span>
+            </button>
+          </div>
+        </div>
+        {showShortcutHint && (
+          <div className="mt-2 flex items-center gap-3 rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground">
+            <span className="font-medium text-foreground">탭 전환:</span>
+            {TAB_META.map((t) => (
+              <span key={t.value} className="flex items-center gap-1">
+                <kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-mono text-[10px]">
+                  Alt+{t.shortcut}
+                </kbd>
+                <span>{t.shortLabel}</span>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex min-h-0 flex-1 flex-col"
+      >
+        {/* 탭 네비게이션 */}
         <div className="shrink-0 border-b bg-background px-4">
           <TabsList className="h-12 bg-transparent gap-1">
-            <TabsTrigger
-              value="process"
-              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4"
-            >
-              <Settings className="mr-2 h-4 w-4" />
-              공정 마스터
-            </TabsTrigger>
-            <TabsTrigger
-              value="routing"
-              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4"
-            >
-              <GitBranch className="mr-2 h-4 w-4" />
-              품목별 라우팅
-            </TabsTrigger>
-            <TabsTrigger
-              value="workstandard"
-              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4"
-            >
-              <ClipboardList className="mr-2 h-4 w-4" />
-              공정 작업기준
-            </TabsTrigger>
+            {TAB_META.map(({ value, label, icon: Icon, shortcut }) => (
+              <TabsTrigger
+                key={value}
+                value={value}
+                className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 gap-1.5"
+                aria-label={`${label} (Alt+${shortcut})`}
+              >
+                <Icon className="h-4 w-4" />
+                {label}
+              </TabsTrigger>
+            ))}
           </TabsList>
         </div>
 
-        <TabsContent value="process" className="flex-1 overflow-hidden mt-0">
+        {/* 탭 설명 배너 */}
+        <div className="shrink-0 border-b bg-background/60 px-6 py-2">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span
+                className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset ${activeMeta.badgeColor}`}
+              >
+                {activeMeta.shortLabel}
+              </span>
+              <span className="text-xs text-muted-foreground">{activeMeta.detailDesc}</span>
+            </div>
+            <div className="hidden items-center gap-2 sm:flex">
+              {activeMeta.actions.map((action, i) => {
+                const ActionIcon = ACTION_ICONS[i % ACTION_ICONS.length];
+                return (
+                  <span
+                    key={action}
+                    className="flex items-center gap-1 text-xs text-muted-foreground/70"
+                  >
+                    <ActionIcon className="h-3 w-3" />
+                    {action}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* 탭 컨텐츠 */}
+        <TabsContent value="process" className="min-h-0 flex-1 overflow-hidden mt-0">
           <ProcessMasterTab />
         </TabsContent>
 
-        <TabsContent value="routing" className="flex-1 overflow-hidden mt-0">
+        <TabsContent value="routing" className="min-h-0 flex-1 overflow-hidden mt-0">
           <ItemRoutingTab />
         </TabsContent>
 
-        <TabsContent value="workstandard" className="flex-1 overflow-hidden mt-0">
+        <TabsContent value="workstandard" className="min-h-0 flex-1 overflow-hidden mt-0">
           <ProcessWorkStandardTab />
         </TabsContent>
       </Tabs>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_7/production/work-instruction/page.tsx b/frontend/app/(main)/COMPANY_7/production/work-instruction/page.tsx
index d36f56ad..08ace7ec 100644
--- a/frontend/app/(main)/COMPANY_7/production/work-instruction/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/production/work-instruction/page.tsx
@@ -1,38 +1,56 @@
 "use client";
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useMemo, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
 import { Label } from "@/components/ui/label";
-import { Plus, Trash2, RotateCcw, Save, X, ChevronLeft, ChevronRight, Search, Loader2, Wrench, Pencil, CheckCircle2, ArrowRight, Check, ChevronsUpDown, ClipboardCheck } from "lucide-react";
+import { Plus, Trash2, Save, X, ChevronLeft, ChevronRight, Search, Loader2, Wrench, Pencil, CheckCircle2, ArrowRight, Check, ChevronsUpDown, ClipboardCheck, Inbox, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
+// API: /work-instruction/*
 import {
   getWorkInstructionList, previewWorkInstructionNo, saveWorkInstruction, deleteWorkInstructions,
   getWIItemSource, getWISalesOrderSource, getWIProductionPlanSource, getEquipmentList, getEmployeeList,
   getRoutingVersions, RoutingVersionData,
 } from "@/lib/api/workInstruction";
 import { WorkStandardEditModal } from "./WorkStandardEditModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "work_instruction_no", label: "작업지시번호" },
+  { key: "status", label: "상태" },
+  { key: "progress", label: "진행현황" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "qty", label: "수량" },
+  { key: "equipment", label: "설비" },
+  { key: "routing", label: "라우팅" },
+  { key: "work_team", label: "작업조" },
+  { key: "worker", label: "작업자" },
+  { key: "start_date", label: "시작일" },
+  { key: "end_date", label: "완료일" },
+  { key: "actions", label: "작업" },
+];
 
 type SourceType = "production" | "order" | "item";
 
 const STATUS_BADGE: Record<string, { label: string; cls: string }> = {
-  "일반": { label: "일반", cls: "bg-blue-100 text-blue-800 border-blue-200" },
-  "긴급": { label: "긴급", cls: "bg-red-100 text-red-800 border-red-200" },
+  "일반": { label: "일반", cls: "bg-primary/10 text-primary border-primary/20" },
+  "긴급": { label: "긴급", cls: "bg-destructive/10 text-destructive border-destructive/20" },
 };
 const PROGRESS_BADGE: Record<string, { label: string; cls: string }> = {
-  "대기": { label: "대기", cls: "bg-amber-100 text-amber-800" },
-  "진행중": { label: "진행중", cls: "bg-blue-100 text-blue-800" },
-  "완료": { label: "완료", cls: "bg-emerald-100 text-emerald-800" },
+  "대기": { label: "대기", cls: "bg-warning/10 text-warning" },
+  "진행중": { label: "진행중", cls: "bg-primary/10 text-primary" },
+  "완료": { label: "완료", cls: "bg-success/10 text-success" },
 };
 
 interface EquipmentOption { id: string; equipment_code: string; equipment_name: string; }
@@ -44,18 +62,14 @@ interface SelectedItem {
 }
 
 export default function WorkInstructionPage() {
+  const ts = useTableSettings("c16-work-instruction", "work_instruction", GRID_COLUMNS);
   const [orders, setOrders] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [equipmentOptions, setEquipmentOptions] = useState<EquipmentOption[]>([]);
   const [employeeOptions, setEmployeeOptions] = useState<EmployeeOption[]>([]);
 
   // 검색
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [debouncedKeyword, setDebouncedKeyword] = useState("");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchProgress, setSearchProgress] = useState("all");
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 1단계: 등록 모달
   const [isRegModalOpen, setIsRegModalOpen] = useState(false);
@@ -121,9 +135,6 @@ export default function WorkInstructionPage() {
   const [wsModalItemName, setWsModalItemName] = useState("");
   const [wsModalItemCode, setWsModalItemCode] = useState("");
 
-  useEffect(() => { const t = setTimeout(() => setDebouncedKeyword(searchKeyword), 500); return () => clearTimeout(t); }, [searchKeyword]);
-
-
   useEffect(() => {
     getEquipmentList().then(r => { if (r.success) setEquipmentOptions(r.data || []); });
     getEmployeeList().then(r => { if (r.success) setEmployeeOptions(r.data || []); });
@@ -133,23 +144,28 @@ export default function WorkInstructionPage() {
     setLoading(true);
     try {
       const params: any = {};
-      if (searchDateFrom) params.dateFrom = searchDateFrom;
-      if (searchDateTo) params.dateTo = searchDateTo;
-      if (searchStatus !== "all") params.status = searchStatus;
-      if (searchProgress !== "all") params.progressStatus = searchProgress;
-      if (debouncedKeyword.trim()) params.keyword = debouncedKeyword.trim();
+      for (const f of searchFilters) {
+        if (f.columnName === "start_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split("|");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status" && f.value) {
+          params.status = f.value;
+        } else if (f.columnName === "progress" && f.value) {
+          params.progressStatus = f.value;
+        } else if (f.columnName === "work_instruction_no" && f.value) {
+          params.keyword = f.value;
+        } else if (f.columnName === "item_name" && f.value) {
+          params.keyword = f.value;
+        }
+      }
       const r = await getWorkInstructionList(params);
       if (r.success) setOrders(r.data || []);
     } catch {} finally { setLoading(false); }
-  }, [searchDateFrom, searchDateTo, searchStatus, searchProgress, debouncedKeyword]);
+  }, [searchFilters]);
 
   useEffect(() => { fetchOrders(); }, [fetchOrders]);
 
-  const handleResetSearch = () => {
-    setSearchKeyword(""); setDebouncedKeyword(""); setSearchStatus("all"); setSearchProgress("all");
-    setSearchDateFrom(""); setSearchDateTo("");
-  };
-
   // ─── 1단계 등록 ───
   const openRegModal = () => {
     setRegSourceType("production"); setRegSourceData([]); setRegKeyword(""); setRegCheckedIds(new Set());
@@ -396,157 +412,121 @@ export default function WorkInstructionPage() {
   );
 
   return (
-    <div className="flex flex-col h-full gap-4 p-4">
-      {/* 검색 */}
-      <Card>
-        <CardContent className="p-4">
-          <div className="flex flex-wrap items-end gap-4">
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">작업기간</Label>
-              <div className="flex items-center gap-2">
-                <div className="w-[150px]"><FormDatePicker value={searchDateFrom} onChange={setSearchDateFrom} placeholder="시작일" /></div>
-                <span className="text-muted-foreground">~</span>
-                <div className="w-[150px]"><FormDatePicker value={searchDateTo} onChange={setSearchDateTo} placeholder="종료일" /></div>
-              </div>
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">검색</Label>
-              <Input placeholder="작업지시번호/품목명" value={searchKeyword} onChange={e => setSearchKeyword(e.target.value)} className="h-9 w-[200px]" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">상태</Label>
-              <Select value={searchStatus} onValueChange={setSearchStatus}>
-                <SelectTrigger className="h-9 w-[120px]"><SelectValue /></SelectTrigger>
-                <SelectContent><SelectItem value="all">전체</SelectItem><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-xs text-muted-foreground">진행현황</Label>
-              <Select value={searchProgress} onValueChange={setSearchProgress}>
-                <SelectTrigger className="h-9 w-[130px]"><SelectValue /></SelectTrigger>
-                <SelectContent><SelectItem value="all">전체</SelectItem><SelectItem value="대기">대기</SelectItem><SelectItem value="진행중">진행중</SelectItem><SelectItem value="완료">완료</SelectItem></SelectContent>
-              </Select>
-            </div>
-            <div className="flex-1" />
-            <div className="flex items-center gap-2">
-              {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
-              <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}><RotateCcw className="w-4 h-4 mr-1.5" /> 초기화</Button>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+    <div className="flex flex-col h-[calc(100vh-4rem)] p-3 gap-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName="work_instruction"
+        filterId="c16-work-instruction"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={new Set(orders.map(o => o.work_instruction_no)).size}
+      />
 
       {/* 메인 테이블 */}
-      <Card className="flex-1 flex flex-col overflow-hidden">
-        <CardContent className="p-0 flex flex-col flex-1 overflow-hidden">
-          <div className="flex items-center justify-between p-4 border-b">
-            <h3 className="text-sm font-semibold flex items-center gap-2">
-              <Wrench className="w-4 h-4" /> 작업지시 목록
-              <Badge variant="secondary" className="text-xs">{new Set(orders.map(o => o.work_instruction_no)).size}건 ({orders.length}행)</Badge>
-            </h3>
-            <Button size="sm" onClick={openRegModal}><Plus className="w-4 h-4 mr-1.5" /> 작업지시 등록</Button>
+      <div className="flex-1 overflow-hidden border bg-card rounded-lg flex flex-col">
+        <div className="flex flex-col h-full">
+          {/* 패널 헤더 */}
+          <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/30 shrink-0">
+            <div className="flex items-center gap-2">
+              <Wrench className="w-4 h-4 text-muted-foreground" />
+              <span className="text-[13px] font-bold text-foreground">작업지시 목록</span>
+              <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                {new Set(orders.map(o => o.work_instruction_no)).size}건 ({orders.length}행)
+              </span>
+              {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button size="sm" onClick={openRegModal}>
+                <Plus className="w-3.5 h-3.5" /> 작업지시 등록
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                <Settings2 className="h-4 w-4" />
+              </Button>
+            </div>
           </div>
-          <div className="flex-1 overflow-auto">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
-                <TableRow>
-                  <TableHead className="w-[150px]">작업지시번호</TableHead>
-                  <TableHead className="w-[70px] text-center">상태</TableHead>
-                  <TableHead className="w-[100px] text-center">진행현황</TableHead>
-                  <TableHead>품목명</TableHead>
-                  <TableHead className="w-[100px]">규격</TableHead>
-                  <TableHead className="w-[80px] text-right">수량</TableHead>
-                  <TableHead className="w-[120px]">설비</TableHead>
-                  <TableHead className="w-[120px]">라우팅</TableHead>
-                  <TableHead className="w-[80px] text-center">작업조</TableHead>
-                  <TableHead className="w-[100px]">작업자</TableHead>
-                  <TableHead className="w-[100px] text-center">시작일</TableHead>
-                  <TableHead className="w-[100px] text-center">완료일</TableHead>
-                  <TableHead className="w-[150px] text-center">작업</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {loading ? (
-                  <TableRow><TableCell colSpan={13} className="text-center py-12"><Loader2 className="w-6 h-6 animate-spin mx-auto text-muted-foreground" /></TableCell></TableRow>
-                ) : orders.length === 0 ? (
-                  <TableRow><TableCell colSpan={13} className="text-center py-12 text-muted-foreground">작업지시가 없습니다</TableCell></TableRow>
-                ) : orders.map((o, rowIdx) => {
-                  const pct = getProgress(o);
-                  const pLabel = getProgressLabel(o);
-                  const pBadge = PROGRESS_BADGE[pLabel] || PROGRESS_BADGE["대기"];
-                  const sBadge = STATUS_BADGE[o.status] || STATUS_BADGE["일반"];
-                  const isFirstOfGroup = Number(o.detail_seq) === 1;
+
+          {/* 테이블 */}
+          <EDataTable
+            columns={[
+              { key: "work_instruction_no", label: "작업지시번호", width: "w-[150px]", render: (_v, row) => <span className="font-mono text-[13px] font-medium">{getDisplayNo(row)}</span> },
+              { key: "status", label: "상태", width: "w-[70px]", align: "center", render: (v) => {
+                const sBadge = STATUS_BADGE[v] || STATUS_BADGE["일반"];
+                return <Badge variant="outline" className={cn("text-[10px]", sBadge.cls)}>{sBadge.label}</Badge>;
+              }},
+              { key: "progress", label: "진행현황", width: "w-[100px]", align: "center", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return <span className="text-[10px] text-muted-foreground">↑</span>;
+                const pct = getProgress(row);
+                const pLabel = getProgressLabel(row);
+                const pBadge = PROGRESS_BADGE[pLabel] || PROGRESS_BADGE["대기"];
+                return (
+                  <div className="flex flex-col items-center gap-1">
+                    <Badge variant="secondary" className={cn("text-[10px]", pBadge.cls)}>{pBadge.label}</Badge>
+                    <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
+                      <div className={cn("h-full rounded-full transition-all", pct >= 100 ? "bg-success" : pct > 0 ? "bg-primary" : "bg-muted-foreground/30")} style={{ width: `${pct}%` }} />
+                    </div>
+                    <span className="text-[10px] text-muted-foreground">{pct}%</span>
+                  </div>
+                );
+              }},
+              { key: "item_name", label: "품목명", render: (_v, row) => row.item_name || row.item_number || "-" },
+              { key: "item_spec", label: "규격", width: "w-[100px]" },
+              { key: "detail_qty", label: "수량", width: "w-[80px]", align: "right", formatNumber: true },
+              { key: "equipment_name", label: "설비", width: "w-[120px]", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "routing", label: "라우팅", width: "w-[120px]", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return "";
+                if (row.routing_version_id) {
                   return (
-                    <TableRow key={`${o.wi_id}-${o.detail_id}`} className="hover:bg-muted/50">
-                      <TableCell className="font-mono text-xs font-medium">{getDisplayNo(o)}</TableCell>
-                      <TableCell className="text-center"><Badge variant="outline" className={cn("text-[10px]", sBadge.cls)}>{sBadge.label}</Badge></TableCell>
-                      <TableCell className="text-center">
-                        {isFirstOfGroup ? (
-                          <div className="flex flex-col items-center gap-1">
-                            <Badge variant="secondary" className={cn("text-[10px]", pBadge.cls)}>{pBadge.label}</Badge>
-                            <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
-                              <div className={cn("h-full rounded-full transition-all", pct >= 100 ? "bg-emerald-500" : pct > 0 ? "bg-blue-500" : "bg-gray-300")} style={{ width: `${pct}%` }} />
-                            </div>
-                            <span className="text-[10px] text-muted-foreground">{pct}%</span>
-                          </div>
-                        ) : <span className="text-[10px] text-muted-foreground">↑</span>}
-                      </TableCell>
-                      <TableCell className="text-sm">{o.item_name || o.item_number || "-"}</TableCell>
-                      <TableCell className="text-xs">{o.item_spec || "-"}</TableCell>
-                      <TableCell className="text-right text-xs font-medium">{Number(o.detail_qty || 0).toLocaleString()}</TableCell>
-                      <TableCell className="text-xs">{isFirstOfGroup ? (o.equipment_name || "-") : ""}</TableCell>
-                      <TableCell className="text-xs">
-                        {isFirstOfGroup ? (
-                          o.routing_version_id ? (
-                            <button
-                              className="text-primary underline underline-offset-2 hover:text-primary/80 cursor-pointer text-xs text-left"
-                              onClick={e => {
-                                e.stopPropagation();
-                                openWorkStandardModal(
-                                  o.work_instruction_no,
-                                  o.routing_version_id,
-                                  o.routing_name || "",
-                                  o.item_name || o.item_number || "",
-                                  o.item_number || ""
-                                );
-                              }}
-                            >
-                              {o.routing_name || "라우팅"} <ClipboardCheck className="w-3 h-3 inline ml-0.5" />
-                            </button>
-                          ) : <span className="text-muted-foreground">-</span>
-                        ) : ""}
-                      </TableCell>
-                      <TableCell className="text-center text-xs">{isFirstOfGroup ? (o.work_team || "-") : ""}</TableCell>
-                      <TableCell className="text-xs">{isFirstOfGroup ? getWorkerName(o.worker) : ""}</TableCell>
-                      <TableCell className="text-center text-xs">{isFirstOfGroup ? (o.start_date || "-") : ""}</TableCell>
-                      <TableCell className="text-center text-xs">{isFirstOfGroup ? (o.end_date || "-") : ""}</TableCell>
-                      <TableCell className="text-center">
-                        {isFirstOfGroup && (
-                          <div className="flex items-center justify-center gap-1">
-                            <Button variant="outline" size="sm" className="h-7 text-xs px-2" onClick={() => openEditModal(o)}><Pencil className="w-3 h-3 mr-1" /> 수정</Button>
-                            <Button variant="outline" size="sm" className="h-7 text-xs px-2 text-destructive border-destructive/30 hover:bg-destructive/10" onClick={() => handleDelete(o.wi_id)}><Trash2 className="w-3 h-3 mr-1" /> 삭제</Button>
-                          </div>
-                        )}
-                      </TableCell>
-                    </TableRow>
+                    <button
+                      className="text-primary underline underline-offset-2 hover:text-primary/80 cursor-pointer text-xs text-left"
+                      onClick={e => {
+                        e.stopPropagation();
+                        openWorkStandardModal(row.work_instruction_no, row.routing_version_id, row.routing_name || "", row.item_name || row.item_number || "", row.item_number || "");
+                      }}
+                    >
+                      {row.routing_name || "라우팅"} <ClipboardCheck className="w-3 h-3 inline ml-0.5" />
+                    </button>
                   );
-                })}
-              </TableBody>
-            </Table>
-          </div>
-        </CardContent>
-      </Card>
+                }
+                return <span className="text-muted-foreground">-</span>;
+              }},
+              { key: "work_team", label: "작업조", width: "w-[80px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "worker", label: "작업자", width: "w-[100px]", render: (v, row) => Number(row.detail_seq) === 1 ? getWorkerName(v) : "" },
+              { key: "start_date", label: "시작일", width: "w-[100px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "end_date", label: "완료일", width: "w-[100px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "actions", label: "작업", width: "w-[150px]", align: "center", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return null;
+                return (
+                  <div className="flex items-center justify-center gap-1">
+                    <Button variant="ghost" size="sm" className="h-7 text-xs px-2" onClick={() => openEditModal(row)}><Pencil className="w-3 h-3" /> 수정</Button>
+                    <Button variant="ghost" size="sm" className="h-7 text-xs px-2 text-destructive hover:text-destructive" onClick={() => handleDelete(row.wi_id)}><Trash2 className="w-3 h-3" /></Button>
+                  </div>
+                );
+              }},
+            ] as EDataTableColumn[]}
+            data={ts.groupData(orders)}
+            rowKey={(row) => `${row.wi_id}-${row.detail_id}`}
+            loading={loading}
+            emptyMessage="등록된 작업지시가 없어요"
+            showPagination
+            draggableColumns
+            columnOrderKey="c16-work-instruction"
+          />
+        </div>
+      </div>
 
       {/* ── 1단계: 등록 모달 ── */}
       <Dialog open={isRegModalOpen} onOpenChange={setIsRegModalOpen}>
         <DialogContent className="max-w-[95vw] sm:max-w-[1200px] h-[80vh] flex flex-col p-0 gap-0">
           <DialogHeader className="px-6 py-4 border-b shrink-0">
             <DialogTitle className="text-base flex items-center gap-2"><Plus className="w-4 h-4" /> 작업지시 등록</DialogTitle>
-            <DialogDescription className="text-xs">근거를 선택하고 품목을 체크한 후 "작업지시 적용" 버튼을 눌러주세요.</DialogDescription>
+            <DialogDescription className="text-xs text-muted-foreground">근거를 선택하고 품목을 체크한 후 "작업지시 적용" 버튼을 눌러주세요.</DialogDescription>
           </DialogHeader>
 
           <div className="px-6 py-3 border-b bg-muted/30 flex items-center gap-3 flex-wrap shrink-0">
-            <Label className="text-sm font-semibold whitespace-nowrap">근거:</Label>
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground whitespace-nowrap">근거</span>
             <Select value={regSourceType} onValueChange={v => setRegSourceType(v as SourceType)}>
               <SelectTrigger className="h-9 w-[160px]"><SelectValue placeholder="선택" /></SelectTrigger>
               <SelectContent><SelectItem value="production">생산계획</SelectItem><SelectItem value="order">수주</SelectItem><SelectItem value="item">품목정보</SelectItem></SelectContent>
@@ -561,25 +541,37 @@ export default function WorkInstructionPage() {
             <div className="flex-1" />
             <label className="flex items-center gap-1.5 cursor-pointer select-none">
               <Checkbox checked={regMergeSameItem} onCheckedChange={v => setRegMergeSameItem(!!v)} />
-              <span className="text-sm font-semibold">동일품목 합산</span>
+              <span className="text-xs font-semibold text-foreground">동일품목 합산</span>
             </label>
           </div>
 
           <div className="flex-1 overflow-auto px-6 py-4">
             {!regSourceType ? (
-              <div className="flex flex-col items-center justify-center h-full text-muted-foreground text-sm">근거를 선택하고 검색해주세요</div>
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-12 h-12 flex items-center justify-center mb-4">
+                  <Search className="w-6 h-6 text-muted-foreground/40" />
+                </div>
+                <p className="text-sm font-medium text-muted-foreground mb-1">근거를 선택해주세요</p>
+                <p className="text-xs text-muted-foreground/60">근거를 선택하고 검색하면 품목이 표시돼요</p>
+              </div>
             ) : regSourceLoading ? (
               <div className="flex items-center justify-center h-full"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
             ) : regSourceData.length === 0 ? (
-              <div className="flex flex-col items-center justify-center h-full text-muted-foreground text-sm">데이터가 없습니다</div>
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-12 h-12 flex items-center justify-center mb-4">
+                  <Inbox className="w-6 h-6 text-muted-foreground/40" />
+                </div>
+                <p className="text-sm font-medium text-muted-foreground mb-1">검색 결과가 없어요</p>
+                <p className="text-xs text-muted-foreground/60">다른 키워드로 검색해주세요</p>
+              </div>
             ) : (
               <Table>
-                <TableHeader className="sticky top-0 bg-background z-10">
-                  <TableRow>
-                    <TableHead className="w-[50px] text-center"><Checkbox checked={regSourceData.length > 0 && regCheckedIds.size === regSourceData.length} onCheckedChange={toggleRegAll} /></TableHead>
-                    {regSourceType === "item" && <><TableHead className="w-[120px]">품목코드</TableHead><TableHead>품목명</TableHead><TableHead className="w-[120px]">규격</TableHead></>}
-                    {regSourceType === "order" && <><TableHead className="w-[110px]">수주번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[100px]">규격</TableHead><TableHead className="w-[80px] text-right">수량</TableHead><TableHead className="w-[100px]">납기일</TableHead></>}
-                    {regSourceType === "production" && <><TableHead className="w-[110px]">계획번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[80px] text-right">계획수량</TableHead><TableHead className="w-[90px]">시작일</TableHead><TableHead className="w-[90px]">완료일</TableHead><TableHead className="w-[100px]">설비</TableHead></>}
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground"><Checkbox checked={regSourceData.length > 0 && regCheckedIds.size === regSourceData.length} onCheckedChange={toggleRegAll} /></TableHead>
+                    {regSourceType === "item" && <><TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead><TableHead>품목명</TableHead><TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead></>}
+                    {regSourceType === "order" && <><TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수주번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[100px]">규격</TableHead><TableHead className="w-[80px] text-right">수량</TableHead><TableHead className="w-[100px]">납기일</TableHead></>}
+                    {regSourceType === "production" && <><TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[80px] text-right">계획수량</TableHead><TableHead className="w-[90px]">시작일</TableHead><TableHead className="w-[90px]">완료일</TableHead><TableHead className="w-[100px]">설비</TableHead></>}
                   </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -587,11 +579,11 @@ export default function WorkInstructionPage() {
                     const id = getRegId(item);
                     const checked = regCheckedIds.has(id);
                     return (
-                      <TableRow key={`${regSourceType}-${id}-${idx}`} className={cn("cursor-pointer hover:bg-muted/50", checked && "bg-primary/5")} onClick={() => toggleRegItem(id)}>
+                      <TableRow key={`${regSourceType}-${id}-${idx}`} className={cn("cursor-pointer hover:bg-muted/30", checked && "bg-primary/5")} onClick={() => toggleRegItem(id)}>
                         <TableCell className="text-center" onClick={e => e.stopPropagation()}><Checkbox checked={checked} onCheckedChange={() => toggleRegItem(id)} /></TableCell>
-                        {regSourceType === "item" && <><TableCell className="text-xs font-medium">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-xs">{item.spec || "-"}</TableCell></>}
-                        {regSourceType === "order" && <><TableCell className="text-xs">{item.order_no}</TableCell><TableCell className="text-xs">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-xs">{item.spec || "-"}</TableCell><TableCell className="text-right text-xs">{Number(item.qty || 0).toLocaleString()}</TableCell><TableCell className="text-xs">{item.due_date || "-"}</TableCell></>}
-                        {regSourceType === "production" && <><TableCell className="text-xs">{item.plan_no}</TableCell><TableCell className="text-xs">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-right text-xs">{Number(item.plan_qty || 0).toLocaleString()}</TableCell><TableCell className="text-xs">{item.start_date ? String(item.start_date).split("T")[0] : "-"}</TableCell><TableCell className="text-xs">{item.end_date ? String(item.end_date).split("T")[0] : "-"}</TableCell><TableCell className="text-xs">{item.equipment_name || "-"}</TableCell></>}
+                        {regSourceType === "item" && <><TableCell className="text-[13px] font-medium">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-[13px]">{item.spec || "-"}</TableCell></>}
+                        {regSourceType === "order" && <><TableCell className="text-[13px]">{item.order_no}</TableCell><TableCell className="text-[13px]">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-[13px]">{item.spec || "-"}</TableCell><TableCell className="text-right text-[13px]">{Number(item.qty || 0).toLocaleString()}</TableCell><TableCell className="text-[13px]">{item.due_date || "-"}</TableCell></>}
+                        {regSourceType === "production" && <><TableCell className="text-[13px]">{item.plan_no}</TableCell><TableCell className="text-[13px]">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-right text-[13px]">{Number(item.plan_qty || 0).toLocaleString()}</TableCell><TableCell className="text-[13px]">{item.start_date ? String(item.start_date).split("T")[0] : "-"}</TableCell><TableCell className="text-[13px]">{item.end_date ? String(item.end_date).split("T")[0] : "-"}</TableCell><TableCell className="text-[13px]">{item.equipment_name || "-"}</TableCell></>}
                       </TableRow>
                     );
                   })}
@@ -604,9 +596,9 @@ export default function WorkInstructionPage() {
             <div className="px-6 py-2 border-t bg-muted/10 flex items-center justify-between shrink-0">
               <span className="text-xs text-muted-foreground">총 {regTotalCount}건 (선택: {regCheckedIds.size}건)</span>
               <div className="flex items-center gap-1">
-                <Button variant="outline" size="icon" className="h-7 w-7" disabled={regPage <= 1} onClick={() => { const p = regPage - 1; setRegPage(p); fetchRegSource(p); }}><ChevronLeft className="w-3.5 h-3.5" /></Button>
+                <Button variant="ghost" size="icon" className="h-7 w-7" disabled={regPage <= 1} onClick={() => { const p = regPage - 1; setRegPage(p); fetchRegSource(p); }}><ChevronLeft className="w-3.5 h-3.5" /></Button>
                 <span className="text-xs font-medium px-2">{regPage} / {totalRegPages}</span>
-                <Button variant="outline" size="icon" className="h-7 w-7" disabled={regPage >= totalRegPages} onClick={() => { const p = regPage + 1; setRegPage(p); fetchRegSource(p); }}><ChevronRight className="w-3.5 h-3.5" /></Button>
+                <Button variant="ghost" size="icon" className="h-7 w-7" disabled={regPage >= totalRegPages} onClick={() => { const p = regPage + 1; setRegPage(p); fetchRegSource(p); }}><ChevronRight className="w-3.5 h-3.5" /></Button>
               </div>
             </div>
           )}
@@ -619,65 +611,59 @@ export default function WorkInstructionPage() {
       </Dialog>
 
       {/* ── 2단계: 확인 모달 ── */}
-      <FullscreenDialog
-        open={isConfirmModalOpen}
-        onOpenChange={setIsConfirmModalOpen}
-        title="작업지시 적용 확인"
-        description="기본 정보를 입력하고 '최종 적용' 버튼을 눌러주세요."
-        footer={
-          <>
-            <Button variant="outline" onClick={() => { setIsConfirmModalOpen(false); setIsRegModalOpen(true); }}><ChevronLeft className="w-4 h-4 mr-1" /> 이전</Button>
-            <Button variant="outline" onClick={() => setIsConfirmModalOpen(false)}>취소</Button>
-            <Button onClick={finalizeRegistration} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <CheckCircle2 className="w-4 h-4 mr-1.5" />} 최종 적용</Button>
-          </>
-        }
-      >
+      <Dialog open={isConfirmModalOpen} onOpenChange={setIsConfirmModalOpen}>
+        <DialogContent className="max-w-[1100px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>작업지시 적용 확인</DialogTitle>
+            <DialogDescription>기본 정보를 입력하고 '최종 적용' 버튼을 눌러주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
           <div className="space-y-5">
             <div className="bg-muted/30 border rounded-lg p-5">
-              <h4 className="text-sm font-semibold mb-4">작업지시 기본 정보</h4>
-              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-                <div className="space-y-1.5"><Label className="text-xs">작업지시번호</Label><Input value={confirmWiNo} readOnly className="h-9 bg-muted/50 text-muted-foreground" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">상태</Label>
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground">작업지시 기본 정보</h4>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-3">
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업지시번호</Label><Input value={confirmWiNo} readOnly className="h-9 bg-muted cursor-not-allowed font-mono" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
                   <Select value={confirmStatus} onValueChange={setConfirmStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select>
                 </div>
-                <div className="space-y-1.5"><Label className="text-xs">시작일</Label><FormDatePicker value={confirmStartDate} onChange={setConfirmStartDate} placeholder="시작일" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">완료예정일</Label><FormDatePicker value={confirmEndDate} onChange={setConfirmEndDate} placeholder="완료예정일" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">설비</Label>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">시작일</Label><Input type="date" value={confirmStartDate} onChange={(e) => setConfirmStartDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">완료예정일</Label><Input type="date" value={confirmEndDate} onChange={(e) => setConfirmEndDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">설비</Label>
                   <Select value={nv(confirmEquipmentId)} onValueChange={v => setConfirmEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비 선택" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select>
                 </div>
-                <div className="space-y-1.5"><Label className="text-xs">작업조</Label>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업조</Label>
                   <Select value={nv(confirmWorkTeam)} onValueChange={v => setConfirmWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select>
                 </div>
-                <div className="space-y-1.5"><Label className="text-xs">작업자</Label>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업자</Label>
                   <WorkerCombobox value={confirmWorker} onChange={setConfirmWorker} open={confirmWorkerOpen} onOpenChange={setConfirmWorkerOpen} />
                 </div>
-                <div className="space-y-1.5"><Label className="text-xs">비고</Label><Input className="h-9" placeholder="비고" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">비고</Label><Input className="h-9" placeholder="비고를 입력해주세요" /></div>
               </div>
             </div>
             <div className="border rounded-lg p-5">
-              <h4 className="text-sm font-semibold mb-3">품목 목록</h4>
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground mb-3">품목 목록</h4>
               <div className="overflow-auto">
                 <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10">
-                    <TableRow>
-                      <TableHead className="w-[50px]">순번</TableHead>
-                      <TableHead className="w-[110px]">품목코드</TableHead>
-                      <TableHead>품목명</TableHead>
-                      <TableHead className="w-[80px]">규격</TableHead>
-                      <TableHead className="w-[90px]">수량</TableHead>
-                      <TableHead className="w-[180px]">라우팅</TableHead>
-                      <TableHead>비고</TableHead>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">순번</TableHead>
+                      <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                      <TableHead className="w-[180px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">라우팅</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
                       <TableHead className="w-[40px]" />
                     </TableRow>
                   </TableHeader>
                   <TableBody>
                     {confirmItems.map((item, idx) => (
                       <TableRow key={idx}>
-                        <TableCell className="text-xs text-center">{idx + 1}</TableCell>
-                        <TableCell className="text-xs font-medium">{item.itemCode}</TableCell>
+                        <TableCell className="text-[13px] text-center">{idx + 1}</TableCell>
+                        <TableCell className="text-[13px] font-medium">{item.itemCode}</TableCell>
                         <TableCell className="text-sm">{item.itemName || item.itemCode}</TableCell>
-                        <TableCell className="text-xs">{item.spec || "-"}</TableCell>
-                        <TableCell><Input type="number" className="h-7 text-xs w-20" value={item.qty} onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
+                        <TableCell className="text-[13px]">{item.spec || "-"}</TableCell>
+                        <TableCell><Input type="number" className="h-7 text-[13px] w-20" value={item.qty} onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
                         <TableCell>
                           <Select
                             value={nv(item.routing || "")}
@@ -697,7 +683,7 @@ export default function WorkInstructionPage() {
                             </SelectContent>
                           </Select>
                         </TableCell>
-                        <TableCell><Input className="h-7 text-xs" value={item.remark} placeholder="비고" onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
+                        <TableCell><Input className="h-7 text-[13px]" value={item.remark} placeholder="비고" onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
                         <TableCell><Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setConfirmItems(prev => prev.filter((_, i) => i !== idx))}><X className="w-3 h-3 text-destructive" /></Button></TableCell>
                       </TableRow>
                     ))}
@@ -706,68 +692,70 @@ export default function WorkInstructionPage() {
               </div>
             </div>
           </div>
-      </FullscreenDialog>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setIsConfirmModalOpen(false); setIsRegModalOpen(true); }}><ChevronLeft className="w-4 h-4 mr-1" /> 이전</Button>
+            <Button variant="outline" onClick={() => setIsConfirmModalOpen(false)}>취소</Button>
+            <Button onClick={finalizeRegistration} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <CheckCircle2 className="w-4 h-4 mr-1.5" />} 최종 적용</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* ── 수정 모달 ── */}
-      <FullscreenDialog
-        open={isEditModalOpen}
-        onOpenChange={(v) => { if (!v && wsModalOpen) return; setIsEditModalOpen(v); }}
-        title={`작업지시 관리 - ${editOrder?.work_instruction_no || ""}`}
-        description="품목을 추가/삭제하고 정보를 수정하세요."
-        footer={
-          <>
-            <Button variant="outline" onClick={() => setIsEditModalOpen(false)}>취소</Button>
-            <Button onClick={saveEdit} disabled={editSaving}>{editSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button>
-          </>
-        }
-      >
+      <Dialog open={isEditModalOpen} onOpenChange={(v) => { if (!v && wsModalOpen) return; setIsEditModalOpen(v); }}>
+        <DialogContent className="max-w-[1100px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{`작업지시 관리 - ${editOrder?.work_instruction_no || ""}`}</DialogTitle>
+            <DialogDescription>품목을 추가/삭제하고 정보를 수정해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
           <div className="space-y-5">
             <div className="bg-muted/30 border rounded-lg p-5">
-              <h4 className="text-sm font-semibold mb-4">기본 정보</h4>
-              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-                <div className="space-y-1.5"><Label className="text-xs">상태</Label><Select value={editStatus} onValueChange={setEditStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select></div>
-                <div className="space-y-1.5"><Label className="text-xs">시작일</Label><FormDatePicker value={editStartDate} onChange={setEditStartDate} placeholder="시작일" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">완료예정일</Label><FormDatePicker value={editEndDate} onChange={setEditEndDate} placeholder="완료예정일" /></div>
-                <div className="space-y-1.5"><Label className="text-xs">설비</Label><Select value={nv(editEquipmentId)} onValueChange={v => setEditEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select></div>
-                <div className="space-y-1.5"><Label className="text-xs">작업조</Label><Select value={nv(editWorkTeam)} onValueChange={v => setEditWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select></div>
-                <div className="space-y-1.5"><Label className="text-xs">작업자</Label>
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground">기본 정보</h4>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-3">
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">상태</Label><Select value={editStatus} onValueChange={setEditStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">시작일</Label><Input type="date" value={editStartDate} onChange={(e) => setEditStartDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">완료예정일</Label><Input type="date" value={editEndDate} onChange={(e) => setEditEndDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">설비</Label><Select value={nv(editEquipmentId)} onValueChange={v => setEditEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비 선택" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업조</Label><Select value={nv(editWorkTeam)} onValueChange={v => setEditWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업자</Label>
                   <WorkerCombobox value={editWorker} onChange={setEditWorker} open={editWorkerOpen} onOpenChange={setEditWorkerOpen} />
                 </div>
-                <div className="space-y-1.5 col-span-2"><Label className="text-xs">비고</Label><Input value={editRemark} onChange={e => setEditRemark(e.target.value)} className="h-9" placeholder="비고" /></div>
+                <div className="space-y-1 col-span-2"><Label className="text-[11px] font-semibold text-muted-foreground">비고</Label><Input value={editRemark} onChange={e => setEditRemark(e.target.value)} className="h-9" placeholder="비고를 입력해주세요" /></div>
               </div>
             </div>
 
             {/* 품목 테이블 — 라우팅/공정작업기준을 품목별로 표시 */}
             <div className="border rounded-lg overflow-hidden">
-              <div className="flex items-center justify-between p-3 bg-muted/20 border-b">
-                <span className="text-sm font-semibold">작업지시 항목</span>
-                <span className="text-xs text-muted-foreground">{editItems.length}건</span>
+              <div className="flex items-center justify-between px-4 py-2.5 bg-muted/30 border-b">
+                <span className="text-[13px] font-bold text-foreground">작업지시 항목</span>
+                <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{editItems.length}건</span>
               </div>
               <div className="overflow-auto">
                 <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10">
-                    <TableRow>
-                      <TableHead className="w-[50px]">순번</TableHead>
-                      <TableHead className="w-[110px]">품목코드</TableHead>
-                      <TableHead>품목명</TableHead>
-                      <TableHead className="w-[80px]">규격</TableHead>
-                      <TableHead className="w-[90px] text-right">수량</TableHead>
-                      <TableHead className="w-[180px]">라우팅</TableHead>
-                      <TableHead className="w-[100px]">공정작업기준</TableHead>
-                      <TableHead>비고</TableHead>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">순번</TableHead>
+                      <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                      <TableHead className="w-[180px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">라우팅</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공정작업기준</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
                       <TableHead className="w-[40px]" />
                     </TableRow>
                   </TableHeader>
                   <TableBody>
                     {editItems.length === 0 ? (
-                      <TableRow><TableCell colSpan={9} className="text-center py-8 text-muted-foreground text-sm">품목이 없습니다</TableCell></TableRow>
+                      <TableRow><TableCell colSpan={9} className="text-center py-8 text-sm text-muted-foreground">등록된 품목이 없어요</TableCell></TableRow>
                     ) : editItems.map((item, idx) => (
                       <TableRow key={idx}>
-                        <TableCell className="text-xs text-center">{idx + 1}</TableCell>
-                        <TableCell className="text-xs font-medium">{item.itemCode}</TableCell>
-                        <TableCell className="text-xs max-w-[150px] truncate" title={item.itemName}>{item.itemName || "-"}</TableCell>
-                        <TableCell className="text-xs truncate" title={item.spec}>{item.spec || "-"}</TableCell>
-                        <TableCell className="text-right"><Input type="number" className="h-7 text-xs w-20 ml-auto" value={item.qty} onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
+                        <TableCell className="text-[13px] text-center">{idx + 1}</TableCell>
+                        <TableCell className="text-[13px] font-medium">{item.itemCode}</TableCell>
+                        <TableCell className="text-[13px] max-w-[150px] truncate" title={item.itemName}>{item.itemName || "-"}</TableCell>
+                        <TableCell className="text-[13px] truncate" title={item.spec}>{item.spec || "-"}</TableCell>
+                        <TableCell className="text-right"><Input type="number" className="h-7 text-[13px] w-20 ml-auto" value={item.qty} onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
                         <TableCell>
                           <Select
                             value={nv(item.routing || "")}
@@ -789,7 +777,7 @@ export default function WorkInstructionPage() {
                         </TableCell>
                         <TableCell>
                           <Button
-                            variant="outline"
+                            variant="ghost"
                             size="sm"
                             className="h-7 text-xs"
                             disabled={!item.routing}
@@ -808,7 +796,7 @@ export default function WorkInstructionPage() {
                             <ClipboardCheck className="w-3 h-3 mr-1" /> 수정
                           </Button>
                         </TableCell>
-                        <TableCell><Input className="h-7 text-xs" value={item.remark} placeholder="비고" onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
+                        <TableCell><Input className="h-7 text-[13px]" value={item.remark} placeholder="비고" onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
                         <TableCell><Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setEditItems(prev => prev.filter((_, i) => i !== idx))}><X className="w-3 h-3 text-destructive" /></Button></TableCell>
                       </TableRow>
                     ))}
@@ -816,14 +804,20 @@ export default function WorkInstructionPage() {
                 </Table>
               </div>
               {editItems.length > 0 && (
-                <div className="p-3 border-t bg-muted/20 flex items-center justify-between">
-                  <span className="text-sm font-semibold">총 수량</span>
-                  <span className="text-lg font-bold text-primary">{editItems.reduce((s, i) => s + i.qty, 0).toLocaleString()} EA</span>
+                <div className="px-4 py-2.5 border-t bg-muted/30 flex items-center justify-between">
+                  <span className="text-[13px] font-bold text-foreground">총 수량</span>
+                  <span className="text-lg font-bold font-mono text-primary">{editItems.reduce((s, i) => s + i.qty, 0).toLocaleString()} EA</span>
                 </div>
               )}
             </div>
           </div>
-      </FullscreenDialog>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEditModalOpen(false)}>취소</Button>
+            <Button onClick={saveEdit} disabled={editSaving}>{editSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 공정작업기준 수정 모달 */}
       <WorkStandardEditModal
@@ -835,6 +829,15 @@ export default function WorkInstructionPage() {
         itemName={wsModalItemName}
         itemCode={wsModalItemCode}
       />
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_7/purchase/order/page.tsx b/frontend/app/(main)/COMPANY_7/purchase/order/page.tsx
new file mode 100644
index 00000000..1bc3bc88
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/purchase/order/page.tsx
@@ -0,0 +1,1287 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  ClipboardList, Pencil, Search, X, Package, ChevronDown,
+  ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const MASTER_TABLE = "purchase_order_mng";
+const DETAIL_TABLE = "purchase_detail";
+
+const formatNumber = (val: string) => {
+  const num = val.replace(/[^\d.-]/g, "");
+  if (!num) return "";
+  const parts = num.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+const parseNumber = (val: string) => val.replace(/,/g, "");
+
+const STATUS_OPTIONS = [
+  { code: "작성중", label: "작성중" },
+  { code: "발주확정", label: "발주확정" },
+  { code: "입고완료", label: "입고완료" },
+  { code: "취소", label: "취소" },
+];
+
+const STATUS_BADGE_CLASS: Record<string, string> = {
+  "작성중": "bg-warning/10 text-warning border-warning/20",
+  "발주확정": "bg-primary/10 text-primary border-primary/20",
+  "입고완료": "bg-success/10 text-success border-success/20",
+  "취소": "bg-destructive/10 text-destructive border-destructive/20",
+};
+
+const EXCEL_COLUMNS = [
+  { key: "purchase_no", label: "발주번호" },
+  { key: "order_date", label: "발주일" },
+  { key: "supplier_name", label: "공급업체명" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "order_qty", label: "발주수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "amount", label: "금액" },
+  { key: "due_date", label: "납기일" },
+];
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "purchase_no", label: "발주번호" },
+  { key: "order_date", label: "발주일" },
+  { key: "supplier_name", label: "공급업체" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "spec", label: "규격" },
+  { key: "order_qty", label: "발주수량" },
+  { key: "received_qty", label: "입고수량" },
+  { key: "remain_qty", label: "잔량" },
+  { key: "unit_price", label: "단가" },
+  { key: "amount", label: "금액" },
+  { key: "due_date", label: "납기일" },
+  { key: "status", label: "상태" },
+  { key: "memo", label: "메모" },
+];
+
+export default function PurchaseOrderPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const [orders, setOrders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [masterForm, setMasterForm] = useState<Record<string, any>>({});
+  const [detailRows, setDetailRows] = useState<any[]>([]);
+
+  // 품목 선택 모달
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSelectedMap, setItemSelectedMap] = useState<Map<string, any>>(new Map());
+  const [itemSearchDivision, setItemSearchDivision] = useState("all");
+  const [itemPage, setItemPage] = useState(1);
+  const [itemPageSize, setItemPageSize] = useState(20);
+  const [itemTotalPages, setItemTotalPages] = useState(0);
+  const [itemTotal, setItemTotal] = useState(0);
+  const [itemPageInput, setItemPageInput] = useState("1");
+
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-purchase-order", DETAIL_TABLE, GRID_COLUMNS_CONFIG);
+
+  const isReadOnly = masterForm.status === "입고완료" || masterForm.status === "취소";
+
+  // 카테고리 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      const catColumns = ["input_mode", "price_mode"];
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      const dedup = (items: { code: string; label: string }[]) => {
+        const seen = new Set<string>();
+        return items.filter((item) => {
+          const key = item.label.replace(/\s/g, "");
+          if (seen.has(key)) return false;
+          seen.add(key);
+          return true;
+        });
+      };
+      await Promise.all(
+        catColumns.map(async (col) => {
+          try {
+            const res = await apiClient.get(`/table-categories/${MASTER_TABLE}/${col}/values`);
+            if (res.data?.success && res.data.data?.length > 0) {
+              optMap[col] = dedup(flatten(res.data.data));
+            }
+          } catch { /* skip */ }
+        })
+      );
+      try {
+        const suppRes = await apiClient.post(`/table-management/tables/supplier_mng/data`, {
+          page: 1, size: 500, autoFilter: true,
+        });
+        const supps = suppRes.data?.data?.data || suppRes.data?.data?.rows || [];
+        optMap["supplier_code"] = supps.map((s: any) => ({
+          code: s.supplier_code,
+          label: `${s.supplier_name} (${s.supplier_code})`,
+        }));
+      } catch { /* skip */ }
+      try {
+        const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
+          page: 1, size: 500, autoFilter: true,
+        });
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        optMap["manager"] = users.map((u: any) => ({
+          code: u.user_id || u.id,
+          label: `${u.user_name || u.name || u.user_id}${u.position_name ? ` (${u.position_name})` : ""}`,
+        }));
+      } catch { /* skip */ }
+      for (const col of ["unit", "material", "division"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/item_info/${col}/values`);
+          if (res.data?.success && res.data.data?.length > 0) {
+            optMap[`item_${col}`] = flatten(res.data.data);
+          }
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+      const divs = optMap["item_division"] || [];
+      const purchaseDiv = divs.find((o) => o.label === "구매관리")
+        || divs.find((o) => o.label === "원자재")
+        || divs.find((o) => o.label === "부자재");
+      if (purchaseDiv) setItemSearchDivision(purchaseDiv.code);
+    };
+    loadCategories();
+  }, []);
+
+  // 마스터 테이블 컬럼 (supplier_name, order_date 등)
+  const MASTER_COLUMNS = new Set(["supplier_name", "supplier_code", "order_date", "status"]);
+
+  // 데이터 조회
+  const fetchOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      // searchFilters를 detail / master로 분리
+      const detailFilters: any[] = [];
+      const masterExtraFilters: any[] = [];
+      for (const f of searchFilters) {
+        const filter = { columnName: f.columnName, operator: f.operator, value: f.value };
+        if (MASTER_COLUMNS.has(f.columnName)) {
+          masterExtraFilters.push(filter);
+        } else {
+          detailFilters.push(filter);
+        }
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: detailFilters.length > 0 ? { enabled: true, filters: detailFilters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "purchase_no", order: "desc" },
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+
+      const purchaseNos = [...new Set(rows.map((r: any) => r.purchase_no).filter(Boolean))];
+      let masterMap: Record<string, any> = {};
+      if (purchaseNos.length > 0) {
+        try {
+          const masterFilters: any[] = [{ columnName: "purchase_no", operator: "in", value: purchaseNos }, ...masterExtraFilters];
+          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: purchaseNos.length + 10,
+            dataFilter: { enabled: true, filters: masterFilters },
+            autoFilter: true,
+          });
+          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+          for (const m of masters) masterMap[m.purchase_no] = m;
+        } catch { /* skip */ }
+      }
+
+      const itemCodes = [...new Set(rows.map((r: any) => r.item_code).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemCodes.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemCodes.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+            autoFilter: true,
+          });
+          const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+          for (const item of items) itemMap[item.item_number] = item;
+        } catch { /* skip */ }
+      }
+
+      const resolveLabel = (key: string, code: string) => {
+        if (!code) return "";
+        const opts = categoryOptions[key];
+        if (!opts) return code;
+        return opts.find((o) => o.code === code)?.label || code;
+      };
+
+      const hasMasterFilters = masterExtraFilters.length > 0;
+      const data = rows
+        .filter((row: any) => {
+          const master = masterMap[row.purchase_no];
+          if (hasMasterFilters && !master) return false;
+          return true;
+        })
+        .map((row: any) => {
+          const item = itemMap[row.item_code];
+          const master = masterMap[row.purchase_no];
+          const rawUnit = row.unit || item?.unit || "";
+          return {
+            ...row,
+            item_name: row.item_name || item?.item_name || "",
+            spec: row.spec || item?.size || "",
+            unit: resolveLabel("item_unit", rawUnit) || rawUnit,
+            status: master?.status || "",
+            supplier_name: master?.supplier_name || "",
+            order_date: master?.order_date || "",
+            memo: row.memo || master?.memo || "",
+          };
+        });
+
+      setOrders(data);
+      setTotalCount(data.length);
+    } catch {
+      toast.error("발주 목록을 불러오는데 실패했어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters, categoryOptions]);
+
+  useEffect(() => { fetchOrders(); }, [fetchOrders]);
+
+  // purchase_no 기준 그룹핑
+  const orderGroups = useMemo(() => {
+    const map: Record<string, { master: any; details: any[] }> = {};
+    for (const row of orders) {
+      const key = row.purchase_no || row.id;
+      if (!map[key]) {
+        map[key] = {
+          master: { purchase_no: row.purchase_no, order_date: row.order_date, supplier_name: row.supplier_name, status: row.status, memo: row.memo },
+          details: [],
+        };
+      }
+      map[key].details.push(row);
+    }
+    return map;
+  }, [orders]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    const found = categoryOptions[col]?.find((o) => o.code === code);
+    return found?.label || code;
+  };
+
+  // 등록 모달 열기
+  const openRegisterModal = () => {
+    const defaultInputMode = categoryOptions["input_mode"]?.[0]?.code || "";
+    const defaultPriceMode = categoryOptions["price_mode"]?.[0]?.code || "";
+    setMasterForm({
+      input_mode: defaultInputMode,
+      price_mode: defaultPriceMode,
+      manager: user?.userId || "",
+      order_date: new Date().toISOString().split("T")[0],
+      status: "작성중",
+    });
+    setDetailRows([]);
+    setIsEditMode(false);
+    setIsModalOpen(true);
+  };
+
+  // 수정 모달 열기
+  const openEditModal = async (purchaseNo: string) => {
+    try {
+      const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+        autoFilter: true,
+      });
+      const masterData = (masterRes.data?.data?.data || masterRes.data?.data?.rows || [])[0];
+
+      const detailRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+        autoFilter: true,
+      });
+      const detailData = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+
+      setMasterForm(masterData || {});
+      setDetailRows(detailData.map((d: any, i: number) => ({ ...d, _id: d.id || `row_${i}` })));
+      setIsEditMode(true);
+      setIsModalOpen(true);
+    } catch {
+      toast.error("발주 정보를 불러오는데 실패했어요.");
+    }
+  };
+
+  // 삭제 (다중 선택)
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.error("삭제할 발주를 선택해주세요."); return; }
+    const selectedItems = orders.filter((o) => checkedIds.includes(o.id));
+    const purchaseNos = [...new Set(selectedItems.map((o) => o.purchase_no))];
+    const ok = await confirm(`${checkedIds.length}건의 발주 데이터를 삭제하시겠어요?`, {
+      description: "삭제된 데이터는 복구할 수 없어요.",
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+        data: checkedIds.map((id) => ({ id })),
+      });
+      for (const purchaseNo of purchaseNos) {
+        const remaining = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+          autoFilter: true,
+        });
+        const remainRows = remaining.data?.data?.data || remaining.data?.data?.rows || [];
+        if (remainRows.length === 0) {
+          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: 1,
+            dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+            autoFilter: true,
+          });
+          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+          if (masters.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
+              data: masters.map((m: any) => ({ id: m.id })),
+            });
+          }
+        }
+      }
+      toast.success("삭제되었어요.");
+      setCheckedIds([]);
+      fetchOrders();
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // 저장 (마스터 + 디테일)
+  const handleSave = async () => {
+    if (detailRows.length === 0) {
+      toast.error("품목을 1개 이상 추가해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, created_by, updated_by, ...masterFields } = masterForm;
+
+      if (isEditMode && id) {
+        await apiClient.put(`/table-management/tables/${MASTER_TABLE}/edit`, {
+          originalData: { id },
+          updatedData: masterFields,
+        });
+        const existingDetails = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 100,
+          dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: masterForm.purchase_no }] },
+          autoFilter: true,
+        });
+        const existings = existingDetails.data?.data?.data || existingDetails.data?.data?.rows || [];
+        if (existings.length > 0) {
+          await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+            data: existings.map((d: any) => ({ id: d.id })),
+          });
+        }
+        for (const [idx, row] of detailRows.entries()) {
+          const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
+          await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            ...detailFields,
+            purchase_no: masterForm.purchase_no,
+            seq_no: idx + 1,
+          });
+        }
+      } else {
+        const { purchase_no: _pn, ...fieldsWithoutPurchaseNo } = masterFields;
+        const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/add`, { id: crypto.randomUUID(), ...fieldsWithoutPurchaseNo });
+        const createdData = masterRes.data?.data;
+        let purchaseNo = createdData?.purchase_no;
+        if (!purchaseNo) {
+          const queryRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: 1,
+            sort: { columnName: "created_date", order: "desc" },
+            autoFilter: true,
+          });
+          const records = queryRes.data?.data?.data || queryRes.data?.data?.rows || [];
+          purchaseNo = records[0]?.purchase_no;
+        }
+        if (!purchaseNo) {
+          toast.error("발주번호를 가져올 수 없어요. 다시 시도해주세요.");
+          return;
+        }
+        for (const [idx, row] of detailRows.entries()) {
+          const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
+          await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            ...detailFields,
+            purchase_no: purchaseNo,
+            seq_no: idx + 1,
+          });
+        }
+      }
+
+      toast.success(isEditMode ? "수정되었어요." : "등록되었어요.");
+      setIsModalOpen(false);
+      fetchOrders();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 검색
+  const searchItems = async (page?: number, size?: number) => {
+    const p = page ?? itemPage;
+    const s = size ?? itemPageSize;
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      }
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      let allRows = resData?.data || resData?.rows || [];
+      if (itemSearchDivision !== "all") {
+        const divLabel = categoryOptions["item_division"]?.find((o) => o.code === itemSearchDivision)?.label || "";
+        allRows = allRows.filter((item: any) => {
+          const div = item.division || "";
+          return div.includes(itemSearchDivision) || (divLabel && div.includes(divLabel));
+        });
+      }
+      const total = allRows.length;
+      const start = (p - 1) * s;
+      setItemSearchResults(allRows.slice(start, start + s));
+      setItemTotal(total);
+      setItemTotalPages(Math.max(1, Math.ceil(total / s)));
+    } catch { /* skip */ } finally {
+      setItemSearchLoading(false);
+    }
+  };
+
+  const handleItemPageChange = (newPage: number) => {
+    if (newPage < 1 || newPage > itemTotalPages) return;
+    setItemPage(newPage);
+    setItemPageInput(String(newPage));
+    searchItems(newPage);
+  };
+
+  const commitItemPageInput = () => {
+    const parsed = parseInt(itemPageInput, 10);
+    if (isNaN(parsed) || itemPageInput.trim() === "") {
+      setItemPageInput(String(itemPage));
+      return;
+    }
+    const clamped = Math.max(1, Math.min(parsed, itemTotalPages || 1));
+    if (clamped !== itemPage) handleItemPageChange(clamped);
+    setItemPageInput(String(clamped));
+  };
+
+  const triggerNewSearch = () => {
+    setItemPage(1);
+    setItemPageInput("1");
+    searchItems(1);
+  };
+
+  const addSelectedItemsToDetail = async () => {
+    const selected = Array.from(itemSelectedMap.values());
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+
+    const supplierCode = masterForm.supplier_code;
+    const isStandard = masterForm.price_mode === "standard";
+    const isSupplier = masterForm.price_mode === "supplier";
+    let supplierPriceMap: Record<string, string> = {};
+    if (isSupplier && supplierCode) {
+      try {
+        const itemIds = selected.map((item) => item.item_number || item.id);
+        const res = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: {
+            enabled: true,
+            filters: [
+              { columnName: "supplier_id", operator: "equals", value: supplierCode },
+              { columnName: "item_id", operator: "in", value: itemIds },
+            ],
+          },
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) supplierPriceMap[p.item_id] = String(price);
+        }
+      } catch { /* skip */ }
+    }
+
+    const newRows = selected.map((item) => {
+      const itemCode = item.item_number || item.id;
+      let unitPrice = "";
+      if (isStandard) {
+        unitPrice = item.purchase_price || item.standard_price || "";
+      } else if (isSupplier && supplierCode) {
+        unitPrice = supplierPriceMap[itemCode] || "";
+      }
+      return {
+        _id: `new_${Date.now()}_${Math.random()}`,
+        item_code: itemCode,
+        item_name: item.item_name,
+        spec: item.size || "",
+        material: getCategoryLabel("item_material", item.material) || item.material || "",
+        unit: getCategoryLabel("item_unit", item.unit) || item.unit || "",
+        order_qty: "",
+        received_qty: "0",
+        remain_qty: "0",
+        unit_price: unitPrice,
+        amount: "",
+        due_date: "",
+        memo: "",
+      };
+    });
+
+    setDetailRows((prev) => [...prev, ...newRows]);
+    toast.success(`${selected.length}개 품목이 추가되었어요.`);
+    setItemSelectedMap(new Map());
+    setItemSelectOpen(false);
+  };
+
+  // 단가 재계산: 단가방식/공급업체 변경 시 기존 품목 단가 갱신
+  const recalcPrices = useCallback(async (priceMode: string, supplierCode: string) => {
+    if (detailRows.length === 0) return;
+    const isStandard = priceMode === "standard";
+    const isSupplier = priceMode === "supplier";
+
+    if (isStandard) {
+      const itemCodes = detailRows.map((r) => r.item_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+          autoFilter: true,
+        });
+        const items = res.data?.data?.data || res.data?.data?.rows || [];
+        const priceMap: Record<string, string> = {};
+        for (const item of items) {
+          const price = item.purchase_price || item.standard_price || "";
+          if (price) priceMap[item.item_number] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.item_code] || "";
+          const qty = parseFloat(row.order_qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    } else if (isSupplier && supplierCode) {
+      const itemCodes = detailRows.map((r) => r.item_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_id", operator: "equals", value: supplierCode },
+            { columnName: "item_id", operator: "in", value: itemCodes },
+          ]},
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        const priceMap: Record<string, string> = {};
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) priceMap[p.item_id] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.item_code] || "";
+          const qty = parseFloat(row.order_qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    }
+  }, [detailRows]);
+
+  const updateDetailRow = (idx: number, field: string, value: string) => {
+    setDetailRows((prev) => {
+      const next = [...prev];
+      next[idx] = { ...next[idx], [field]: value };
+      if (field === "order_qty" || field === "unit_price") {
+        const qty = parseFloat(field === "order_qty" ? value : next[idx].order_qty) || 0;
+        const price = parseFloat(field === "unit_price" ? value : next[idx].unit_price) || 0;
+        next[idx].amount = (qty * price).toString();
+        const received = parseFloat(next[idx].received_qty) || 0;
+        next[idx].remain_qty = (qty - received).toString();
+      }
+      return next;
+    });
+  };
+
+  const removeDetailRow = (idx: number) => {
+    setDetailRows((prev) => prev.filter((_, i) => i !== idx));
+  };
+
+  const handleExcelDownload = async () => {
+    if (orders.length === 0) { toast.error("다운로드할 데이터가 없어요."); return; }
+    const data = orders.map((o) => {
+      const row: Record<string, any> = {};
+      for (const col of EXCEL_COLUMNS) row[col.label] = o[col.key] || "";
+      return row;
+    });
+    await exportToExcel(data, "발주관리.xlsx", "발주목록");
+    toast.success("다운로드 완료");
+  };
+
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={DETAIL_TABLE}
+        filterId="c16-purchase-order"
+        onFilterChange={setSearchFilters}
+        dataCount={totalCount}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between flex-wrap gap-3">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-bold">발주 목록</h2>
+          <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+            {totalCount}건
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4 mr-1" /> 발주 등록
+          </Button>
+          <Button variant="outline" size="sm" disabled={checkedIds.length !== 1} onClick={() => {
+            const item = orders.find((o) => o.id === checkedIds[0]);
+            if (item) openEditModal(item.purchase_no);
+          }}>
+            <Pencil className="w-4 h-4 mr-1" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1" /> 삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4 mr-1" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4 mr-1" /> 엑셀
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+            <Settings2 className="w-4 h-4 mr-1" /> 설정
+          </Button>
+        </div>
+      </div>
+
+      {/* 데이터 테이블 — 아코디언 그룹핑 */}
+      <div className="flex-1 overflow-auto border rounded-lg bg-card">
+        {loading ? (
+          <div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
+        ) : Object.keys(orderGroups).length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+            <Package className="h-10 w-10 mb-2 opacity-30" />
+            <p className="text-sm">등록된 발주가 없어요</p>
+          </div>
+        ) : (
+          (() => {
+            const MASTER_KEYS = new Set(["purchase_no", "order_date", "supplier_name", "status", "memo"]);
+            const numCols = new Set(["order_qty", "received_qty", "remain_qty", "unit_price", "amount"]);
+
+            // ts.visibleColumns 순서를 따르되, 마스터/디테일 컬럼을 분리
+            // 고정 컬럼(품목수)은 마스터 선행 컬럼 뒤에 배치
+            const leadingMaster: typeof ts.visibleColumns = [];
+            const detailCols: typeof ts.visibleColumns = [];
+            const trailingMaster: typeof ts.visibleColumns = [];
+            let passedFirstDetail = false;
+            for (const col of ts.visibleColumns) {
+              if (MASTER_KEYS.has(col.key)) {
+                if (passedFirstDetail) trailingMaster.push(col);
+                else leadingMaster.push(col);
+              } else {
+                passedFirstDetail = true;
+                detailCols.push(col);
+              }
+            }
+
+            const renderDetailCell = (row: any, key: string) => {
+              const val = row[key];
+              if (key === "status") return val ? <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[val] || "")}>{val}</span> : "-";
+              if (numCols.has(key)) return <span className="font-mono">{val ? Number(val).toLocaleString() : "0"}</span>;
+              return val || "-";
+            };
+
+            const renderMasterHead = (col: { key: string; label: string }) => (
+              <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground", col.key === "status" && "text-center")}>
+                {col.label}
+              </TableHead>
+            );
+
+            const renderMasterCell = (col: { key: string }, m: any, purchaseNo: string) => {
+              if (col.key === "purchase_no") return <TableCell key={col.key} className="text-sm font-semibold text-primary">{purchaseNo}</TableCell>;
+              if (col.key === "order_date") return <TableCell key={col.key} className="text-sm">{m.order_date ? new Date(m.order_date).toLocaleDateString("ko-KR") : "-"}</TableCell>;
+              if (col.key === "supplier_name") return <TableCell key={col.key} className="text-sm">{m.supplier_name || "-"}</TableCell>;
+              if (col.key === "status") return <TableCell key={col.key} className="text-center">{m.status && <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[m.status] || "")}>{m.status}</span>}</TableCell>;
+              if (col.key === "memo") return <TableCell key={col.key} className="text-sm text-muted-foreground max-w-[120px] truncate">{m.memo || ""}</TableCell>;
+              return <TableCell key={col.key} />;
+            };
+
+            return (
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-8" />
+                    <TableHead className="w-10" />
+                    {leadingMaster.map(renderMasterHead)}
+                    <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground text-center">품목수</TableHead>
+                    {detailCols.map(col => (
+                      <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground", numCols.has(col.key) && "text-right")}>
+                        {col.label}{col.key === "order_qty" || col.key === "amount" ? " 합계" : ""}
+                      </TableHead>
+                    ))}
+                    {trailingMaster.map(renderMasterHead)}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {Object.entries(orderGroups).map(([purchaseNo, group]) => {
+                    const isExpanded = expandedOrders.has(purchaseNo);
+                    const detailIds = group.details.map(d => d.id);
+                    const allChecked = detailIds.length > 0 && detailIds.every(id => checkedIds.includes(id));
+                    const someChecked = detailIds.some(id => checkedIds.includes(id));
+                    const m = group.master;
+                    const totalQty = group.details.reduce((s, d) => s + (Number(d.order_qty) || 0), 0);
+                    const totalAmt = group.details.reduce((s, d) => s + (Number(d.amount) || 0), 0);
+                    return (
+                      <React.Fragment key={purchaseNo}>
+                        <TableRow
+                          style={{ borderTop: "2px solid hsl(var(--border))" }}
+                          className={cn("cursor-pointer border-l-[3px] border-l-transparent font-semibold", allChecked && "border-l-primary bg-primary/5")}
+                          onClick={() => setExpandedOrders(prev => { const next = new Set(prev); if (next.has(purchaseNo)) next.delete(purchaseNo); else next.add(purchaseNo); return next; })}
+                          onDoubleClick={() => openEditModal(purchaseNo)}
+                        >
+                          <TableCell className="text-center p-2">
+                            <ChevronDown className={cn("w-4 h-4 transition-transform text-muted-foreground", !isExpanded && "-rotate-90")} />
+                          </TableCell>
+                          <TableCell className="text-center p-2" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => allChecked ? prev.filter(id => !detailIds.includes(id)) : [...new Set([...prev, ...detailIds])]); }}>
+                            <Checkbox checked={allChecked} data-state={someChecked && !allChecked ? "indeterminate" : undefined} onCheckedChange={() => {}} />
+                          </TableCell>
+                          {leadingMaster.map(col => renderMasterCell(col, m, purchaseNo))}
+                          <TableCell className="text-sm text-center"><Badge variant="secondary" className="text-[10px]">{group.details.length}건</Badge></TableCell>
+                          {detailCols.map(col => (
+                            <TableCell key={col.key} className={cn("text-sm", numCols.has(col.key) && "text-right font-mono")}>
+                              {col.key === "order_qty" ? totalQty.toLocaleString()
+                                : col.key === "amount" ? totalAmt.toLocaleString()
+                                : ""}
+                            </TableCell>
+                          ))}
+                          {trailingMaster.map(col => renderMasterCell(col, m, purchaseNo))}
+                        </TableRow>
+                        {isExpanded && group.details.map((row) => (
+                          <TableRow key={row.id} className="bg-muted/30 text-xs">
+                            <TableCell />
+                            <TableCell className="text-center" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => prev.includes(row.id) ? prev.filter(id => id !== row.id) : [...prev, row.id]); }}>
+                              <Checkbox checked={checkedIds.includes(row.id)} onCheckedChange={() => {}} />
+                            </TableCell>
+                            {leadingMaster.map(col => <TableCell key={col.key} />)}
+                            <TableCell />
+                            {detailCols.map(col => (
+                              <TableCell key={col.key} className={cn(numCols.has(col.key) && "text-right")}>
+                                {renderDetailCell(row, col.key)}
+                              </TableCell>
+                            ))}
+                            {trailingMaster.map(col => <TableCell key={col.key} />)}
+                          </TableRow>
+                        ))}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            );
+          })()
+        )}
+        <div className="px-4 py-2 border-t text-xs text-muted-foreground">
+          전체 {Object.keys(orderGroups).length}건 (발주 기준) / {orders.length}건 (품목 기준)
+        </div>
+      </div>
+
+      {/* 발주 등록/수정 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent
+          className="max-w-[95vw] w-[1200px]"
+          style={{ maxHeight: "90vh", display: "flex", flexDirection: "column" }}
+        >
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? (isReadOnly ? "발주 상세" : "발주 수정") : "발주 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? (isReadOnly ? "발주 상세 정보를 확인해요." : "발주 정보를 수정해요.") : "새로운 발주를 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-y-auto">
+            <div className="space-y-6 py-2 pr-1">
+              {/* 기본 정보 */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  기본 정보
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <div className="grid grid-cols-4 gap-3.5">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">발주번호</Label>
+                    <Input value={masterForm.purchase_no || ""} placeholder={isEditMode ? "" : "자동생성"} className="h-9" disabled />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">발주일 <span className="text-destructive">*</span></Label>
+                    <Input
+                      type="date"
+                      value={masterForm.order_date || ""}
+                      onChange={(e) => setMasterForm((p) => ({ ...p, order_date: e.target.value }))}
+                      className="h-9"
+                      disabled={isReadOnly}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">상태</Label>
+                    {isReadOnly ? (
+                      <div className="flex items-center h-9">
+                        <span className={cn("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold", STATUS_BADGE_CLASS[masterForm.status] || "")}>
+                          {masterForm.status}
+                        </span>
+                      </div>
+                    ) : (
+                      <Select value={masterForm.status || "작성중"} onValueChange={(v) => setMasterForm((p) => ({ ...p, status: v }))}>
+                        <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          {STATUS_OPTIONS.map((s) => (
+                            <SelectItem key={s.code} value={s.code}>{s.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">입력방식</Label>
+                    <Select value={masterForm.input_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, input_mode: v }))} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["input_mode"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">단가방식</Label>
+                    <Select value={masterForm.price_mode || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, price_mode: v })); recalcPrices(v, masterForm.supplier_code || ""); }} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["price_mode"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">담당자</Label>
+                    <Select value={masterForm.manager || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager: v }))} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="담당자 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["manager"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+
+              {/* 공급업체 / 담당자 — 입력방식이 '공급업체 우선'일 때만 표시 */}
+              {masterForm.input_mode === "supplierFirst" && (
+              <div className="p-4 bg-muted/50 border border-dashed border-border rounded-lg space-y-3">
+                <div className="text-xs font-semibold text-primary flex items-center gap-1.5">
+                  <ClipboardList className="w-3.5 h-3.5" /> 공급업체 정보
+                </div>
+                <div className="grid grid-cols-2 gap-3.5">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">공급업체</Label>
+                    <Select
+                      value={masterForm.supplier_code || ""}
+                      onValueChange={(v) => {
+                        const supp = categoryOptions["supplier_code"]?.find((o) => o.code === v);
+                        const name = supp?.label.replace(` (${v})`, "") || "";
+                        setMasterForm((p) => ({ ...p, supplier_code: v, supplier_name: name }));
+                        recalcPrices(masterForm.price_mode || "", v);
+                      }}
+                      disabled={isReadOnly}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="공급업체 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["supplier_code"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+              )}
+
+              {/* 품목 내역 */}
+              <div className="space-y-2.5">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                    <Package className="w-4 h-4" /> 품목 내역
+                    <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                      {detailRows.length}
+                    </span>
+                  </div>
+                  {!isReadOnly && (
+                    <Button size="sm" onClick={() => {
+                      setItemSelectedMap(new Map());
+                      setItemPage(1);
+                      setItemPageInput("1");
+                      setItemSearchKeyword("");
+                      setItemSelectOpen(true);
+                      searchItems(1);
+                    }}>
+                      <Plus className="w-4 h-4 mr-1" /> 품목 추가
+                    </Button>
+                  )}
+                </div>
+                {detailRows.length === 0 ? (
+                  <div className="flex flex-col items-center gap-2 py-8 border border-dashed border-border rounded-lg text-muted-foreground">
+                    <Package className="w-8 h-8 opacity-40" />
+                    <span className="text-sm">아직 추가된 품목이 없어요. 위 버튼으로 품목을 추가해주세요.</span>
+                  </div>
+                ) : (
+                  <div className="border rounded-lg overflow-x-auto">
+                    <Table className="table-fixed">
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          {!isReadOnly && <TableHead className="w-[40px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground"></TableHead>}
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                          {masterForm.input_mode === "itemFirst" && (
+                            <TableHead className="w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체</TableHead>
+                          )}
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">잔량</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
+                          <TableHead className="w-[160px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {detailRows.map((row, idx) => (
+                          <TableRow key={row._id || idx}>
+                            {!isReadOnly && (
+                              <TableCell>
+                                <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-muted-foreground/50 hover:text-destructive hover:bg-destructive/5" onClick={() => removeDetailRow(idx)}>
+                                  <X className="w-3.5 h-3.5" />
+                                </Button>
+                              </TableCell>
+                            )}
+                            <TableCell className="text-[13px] font-mono max-w-[120px]"><span className="block truncate" title={row.item_code}>{row.item_code}</span></TableCell>
+                            <TableCell className="text-[13px] max-w-[120px]"><span className="block truncate" title={row.item_name}>{row.item_name}</span></TableCell>
+                            {masterForm.input_mode === "itemFirst" && (
+                              <TableCell>
+                                {isReadOnly ? (
+                                  <span className="text-xs">{(categoryOptions["supplier_code"] || []).find(o => o.code === row.supplier_code)?.label || row.supplier_code || "-"}</span>
+                                ) : (
+                                  <Select value={row.supplier_code || ""} onValueChange={(v) => {
+                                    const supp = categoryOptions["supplier_code"]?.find(o => o.code === v);
+                                    const name = supp?.label.replace(` (${v})`, "") || "";
+                                    updateDetailRow(idx, "supplier_code", v);
+                                    updateDetailRow(idx, "supplier_name", name);
+                                  }}>
+                                    <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="공급업체" /></SelectTrigger>
+                                    <SelectContent>
+                                      {(categoryOptions["supplier_code"] || []).map(o => (
+                                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                )}
+                              </TableCell>
+                            )}
+                            <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                            <TableCell className="text-[13px]">{row.unit}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs text-right font-mono block">{row.order_qty ? Number(row.order_qty).toLocaleString() : ""}</span>
+                              ) : (
+                                <Input value={formatNumber(row.order_qty || "")} onChange={(e) => updateDetailRow(idx, "order_qty", parseNumber(e.target.value))} className="h-8 text-xs text-right font-mono" />
+                              )}
+                            </TableCell>
+                            <TableCell className="text-[13px] text-right font-mono text-muted-foreground">{row.received_qty ? Number(row.received_qty).toLocaleString() : "0"}</TableCell>
+                            <TableCell className="text-[13px] text-right font-mono">{row.remain_qty ? Number(row.remain_qty).toLocaleString() : "0"}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs text-right font-mono block">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</span>
+                              ) : (
+                                <Input value={formatNumber(row.unit_price || "")} onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))} className="h-8 text-xs text-right font-mono" />
+                              )}
+                            </TableCell>
+                            <TableCell className="text-[13px] text-right font-mono font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs">{row.due_date}</span>
+                              ) : (
+                                <Input type="date" value={row.due_date || ""} onChange={(e) => updateDetailRow(idx, "due_date", e.target.value)} className="h-8 text-xs" />
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs">{row.memo}</span>
+                              ) : (
+                                <Input value={row.memo || ""} onChange={(e) => updateDetailRow(idx, "memo", e.target.value)} className="h-8 text-xs" />
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                )}
+              </div>
+
+              {/* 비고 */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  비고
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <Input
+                  value={masterForm.memo || ""}
+                  onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
+                  placeholder="특이사항이나 메모를 입력해주세요"
+                  className="h-9"
+                  disabled={isReadOnly}
+                />
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter className="border-t pt-3 mt-2">
+            {isReadOnly ? (
+              <Button variant="outline" onClick={() => setIsModalOpen(false)}>닫기</Button>
+            ) : (
+              <>
+                <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+                <Button onClick={handleSave} disabled={saving}>
+                  {saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />} 저장
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+
+          {/* 품목 선택 모달 (중첩) */}
+          <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+            <DialogContent className="max-w-3xl" style={{ maxHeight: "70vh", display: "flex", flexDirection: "column" }} onInteractOutside={(e) => e.preventDefault()}>
+              <DialogHeader>
+                <DialogTitle>품목 선택</DialogTitle>
+                <DialogDescription>발주에 추가할 품목을 선택 후 하단 버튼을 눌러주세요.</DialogDescription>
+              </DialogHeader>
+              <div className="flex gap-2">
+                <Input
+                  placeholder="품명/품목코드 검색"
+                  value={itemSearchKeyword}
+                  onChange={(e) => setItemSearchKeyword(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && triggerNewSearch()}
+                  className="h-9 flex-1"
+                />
+                <Select value={itemSearchDivision} onValueChange={setItemSearchDivision}>
+                  <SelectTrigger className="h-9 w-[130px]"><SelectValue placeholder="관리품목" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">전체</SelectItem>
+                    {(categoryOptions["item_division"] || []).map((o) => (
+                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button size="sm" onClick={triggerNewSearch} disabled={itemSearchLoading} className="h-9">
+                  {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" />조회</>}
+                </Button>
+              </div>
+              <div className="flex-1 overflow-auto border rounded-lg">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[40px] text-center">
+                        <input type="checkbox"
+                          checked={itemSearchResults.length > 0 && itemSearchResults.every((i) => itemSelectedMap.has(i.id))}
+                          onChange={(e) => {
+                            setItemSelectedMap((prev) => {
+                              const next = new Map(prev);
+                              if (e.target.checked) itemSearchResults.forEach((i) => next.set(i.id, i));
+                              else itemSearchResults.forEach((i) => next.delete(i.id));
+                              return next;
+                            });
+                          }} />
+                      </TableHead>
+                      <TableHead className="w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                      <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {itemSearchResults.length === 0 ? (
+                      <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없어요</TableCell></TableRow>
+                    ) : itemSearchResults.map((item) => (
+                      <TableRow key={item.id} className={cn("cursor-pointer", itemSelectedMap.has(item.id) && "bg-primary/5")}
+                        onClick={() => setItemSelectedMap((prev) => {
+                          const next = new Map(prev);
+                          if (next.has(item.id)) next.delete(item.id); else next.set(item.id, item);
+                          return next;
+                        })}>
+                        <TableCell className="text-center">
+                          <input type="checkbox" checked={itemSelectedMap.has(item.id)} readOnly />
+                        </TableCell>
+                        <TableCell className="text-[13px] max-w-[130px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
+                        <TableCell className="text-sm max-w-[150px]"><span className="block truncate" title={item.item_name}>{item.item_name}</span></TableCell>
+                        <TableCell className="text-[13px]">{item.size}</TableCell>
+                        <TableCell className="text-[13px]">{categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}</TableCell>
+                        <TableCell className="text-[13px]">{categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <div className="flex items-center justify-between border-t pt-2">
+                <div className="flex items-center gap-1">
+                  <span className="text-xs text-muted-foreground">표시:</span>
+                  <input type="number" min={1} max={200} value={itemPageSize}
+                    onChange={(e) => {
+                      const v = Math.min(200, Math.max(1, Number(e.target.value) || 20));
+                      setItemPageSize(v);
+                      setItemPage(1);
+                      setItemPageInput("1");
+                      searchItems(1, v);
+                    }}
+                    className="h-7 w-14 rounded-md border px-1 text-center text-xs" />
+                </div>
+                <div className="flex items-center gap-1">
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(1)} disabled={itemPage === 1 || itemSearchLoading}>
+                    <ChevronsLeft className="h-3 w-3" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemPage - 1)} disabled={itemPage === 1 || itemSearchLoading}>
+                    <ChevronLeft className="h-3 w-3" />
+                  </Button>
+                  <input type="text" inputMode="numeric" value={itemPageInput}
+                    onChange={(e) => setItemPageInput(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === "Enter") { commitItemPageInput(); (e.target as HTMLInputElement).blur(); } }}
+                    onBlur={commitItemPageInput}
+                    onFocus={(e) => e.target.select()}
+                    className="h-7 w-10 rounded-md border px-1 text-center text-xs" />
+                  <span className="text-xs text-muted-foreground">/ {itemTotalPages || 1}</span>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemPage + 1)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
+                    <ChevronRight className="h-3 w-3" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemTotalPages)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
+                    <ChevronsRight className="h-3 w-3" />
+                  </Button>
+                </div>
+                <span className="text-xs text-muted-foreground">총 {itemTotal}건</span>
+              </div>
+              <DialogFooter>
+                <div className="flex items-center gap-2 w-full justify-between">
+                  <span className="text-sm text-muted-foreground">{itemSelectedMap.size}개 선택됨</span>
+                  <div className="flex gap-2">
+                    <Button variant="outline" onClick={() => { setItemSelectedMap(new Map()); setItemSelectOpen(false); }}>취소</Button>
+                    <Button onClick={addSelectedItemsToDetail} disabled={itemSelectedMap.size === 0}>
+                      <Plus className="w-4 h-4 mr-1" /> {itemSelectedMap.size}개 추가
+                    </Button>
+                  </div>
+                </div>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={DETAIL_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchOrders()}
+      />
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/purchase/purchase-item/page.tsx b/frontend/app/(main)/COMPANY_7/purchase/purchase-item/page.tsx
new file mode 100644
index 00000000..7f211a88
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/purchase/purchase-item/page.tsx
@@ -0,0 +1,1244 @@
+"use client";
+
+/**
+ * 구매품목관리 — Type B 마스터-디테일 리디자인
+ *
+ * 좌측: 구매품목 목록 (item_info, 구매 관련 필터)
+ * 우측: 선택한 품목의 공급업체 정보 (supplier_item_mapping → supplier_mng 조인)
+ *
+ * 공급업체관리와 양방향 연동 (같은 supplier_item_mapping 테이블)
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Search, X, Settings2, Package } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const ITEM_TABLE = "item_info";
+const MAPPING_TABLE = "supplier_item_mapping";
+const SUPPLIER_TABLE = "supplier_mng";
+
+// 숫자 포맷 헬퍼
+const formatNum = (val: any): string => {
+  if (val === null || val === undefined || val === "") return "";
+  const n = Number(val);
+  return isNaN(n) ? String(val) : n.toLocaleString();
+};
+
+const ITEM_GRID_COLUMNS = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "standard_price", label: "구매단가" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
+];
+
+export default function PurchaseItemPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-purchase-item", ITEM_TABLE, ITEM_GRID_COLUMNS);
+
+  // 좌측: 품목
+  const [items, setItems] = useState<any[]>([]);
+  const [itemLoading, setItemLoading] = useState(false);
+  const [itemCount, setItemCount] = useState(0);
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 공급업체
+  const [supplierItems, setSupplierItems] = useState<any[]>([]);
+  const [supplierLoading, setSupplierLoading] = useState(false);
+  const [supplierCheckedIds, setSupplierCheckedIds] = useState<string[]>([]);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string; isDefault?: boolean }[]>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 공급업체 추가 모달
+  const [suppSelectOpen, setSuppSelectOpen] = useState(false);
+  const [suppSearchKeyword, setSuppSearchKeyword] = useState("");
+  const [suppSearchResults, setSuppSearchResults] = useState<any[]>([]);
+  const [suppSearchLoading, setSuppSearchLoading] = useState(false);
+  const [suppCheckedIds, setSuppCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 수정 모달
+  const [editItemOpen, setEditItemOpen] = useState(false);
+  const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+
+  // 공급업체 상세 입력 모달 (공급업체 품번/품명 + 단가)
+  const [suppDetailOpen, setSuppDetailOpen] = useState(false);
+  const [selectedSuppsForDetail, setSelectedSuppsForDetail] = useState<any[]>([]);
+  const [suppMappings, setSuppMappings] = useState<Record<string, Array<{ _id: string; supplier_item_code: string; supplier_item_name: string }>>>({});
+  const [suppPrices, setSuppPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [editSuppData, setEditSuppData] = useState<any>(null);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string; isDefault?: boolean }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string; isDefault?: boolean }[] => {
+        const result: { code: string; label: string; isDefault?: boolean }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel, isDefault: v.isDefault });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      // 단가 카테고리
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/supplier_item_prices/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 좌측: 품목 조회
+  const fetchItems = useCallback(async () => {
+    setItemLoading(true);
+    try {
+      const filters: { columnName: string; operator: string; value: any }[] = [];
+
+      // 구매품목/영업관리 division 필터 (다중값 컬럼이므로 contains로 매칭)
+      filters.push({ columnName: "division", operator: "contains", value: "s" });
+
+      // DynamicSearchFilter에서 전달된 필터 추가
+      for (const f of searchFilters) {
+        filters.push({ columnName: f.columnName, operator: f.operator, value: f.value });
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const CATS = ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+      setItemCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setItemLoading(false);
+    }
+  }, [searchFilters, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => { fetchItems(); }, [fetchItems]);
+
+  // 선택된 품목
+  const selectedItem = items.find((i) => i.id === selectedItemId);
+
+  // 우측: 공급업체 목록 조회
+  useEffect(() => {
+    if (!selectedItem?.item_number) { setSupplierItems([]); setSupplierCheckedIds([]); return; }
+    setSupplierCheckedIds([]);
+    const itemKey = selectedItem.item_number;
+    const fetchSupplierItems = async () => {
+      setSupplierLoading(true);
+      try {
+        // 1. supplier_item_mapping에서 해당 품목의 매핑 조회
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
+          autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        // 2. supplier_id → supplier_mng 조인 (공급업체명)
+        const custIds = [...new Set(mappings.map((m: any) => m.supplier_id).filter(Boolean))];
+        let custMap: Record<string, any> = {};
+        if (custIds.length > 0) {
+          try {
+            const custRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+              page: 1, size: custIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "in", value: custIds }] },
+              autoFilter: true,
+            });
+            for (const c of (custRes.data?.data?.data || custRes.data?.data?.rows || [])) {
+              custMap[c.supplier_code] = c;
+            }
+          } catch { /* skip */ }
+        }
+
+        // 3. supplier_item_prices 조회 (단가 정보)
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        // 4. 공급업체별 중복 제거 + 오늘 날짜 기준 단가 매칭
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o: any) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+        const seenCustIds = new Set<string>();
+        const sortedMappings = [...mappings].sort((a: any, b: any) => (a.supplier_id || "").localeCompare(b.supplier_id || ""));
+
+        setSupplierItems(sortedMappings.map((m: any) => {
+          const custKey = m.supplier_id || "";
+          const isFirstOfGroup = !seenCustIds.has(custKey);
+          if (custKey) seenCustIds.add(custKey);
+
+          const custPriceList = allPrices.filter((p: any) => p.supplier_id === custKey);
+          const todayPrice = custPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || custPriceList[0] || {};
+
+          return {
+            ...m,
+            supplier_code: isFirstOfGroup ? custKey : "",
+            supplier_name: isFirstOfGroup ? (custMap[custKey]?.supplier_name || "") : "",
+            supplier_item_code: m.supplier_item_code || "",
+            supplier_item_name: m.supplier_item_name || "",
+            base_price: todayPrice.base_price || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+        }));
+      } catch (err) {
+        console.error("공급업체 조회 실패:", err);
+      } finally {
+        setSupplierLoading(false);
+      }
+    };
+    fetchSupplierItems();
+  }, [selectedItem?.item_number, priceCategoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 공급업체 검색
+  const searchSuppliers = async () => {
+    setSuppSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (suppSearchKeyword) filters.push({ columnName: "supplier_name", operator: "contains", value: suppSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const all = res.data?.data?.data || res.data?.data?.rows || [];
+      // 이미 등록된 공급업체 제외
+      const existing = new Set(supplierItems.map((c: any) => c.supplier_id || c.supplier_code));
+      setSuppSearchResults(all.filter((c: any) => !existing.has(c.supplier_code)));
+    } catch { /* skip */ } finally { setSuppSearchLoading(false); }
+  };
+
+  // 공급업체 선택 → 상세 모달로 이동
+  const goToSuppDetail = () => {
+    const selected = suppSearchResults.filter((c) => suppCheckedIds.has(c.id));
+    if (selected.length === 0) { toast.error("공급업체를 선택해주세요."); return; }
+    setSelectedSuppsForDetail(selected);
+    const mappings: typeof suppMappings = {};
+    const prices: typeof suppPrices = {};
+    for (const cust of selected) {
+      const key = cust.supplier_code || cust.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: selectedItem?.standard_price || selectedItem?.standard_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: selectedItem?.standard_price || selectedItem?.standard_price || "",
+      }];
+    }
+    setSuppMappings(mappings);
+    setSuppPrices(prices);
+    setSuppSelectOpen(false);
+    setSuppDetailOpen(true);
+  };
+
+  const addMappingRow = (custKey: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, supplier_item_code: "", supplier_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (custKey: string, rowId: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updateMappingRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  const addPriceRow = (custKey: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (custKey: string, rowId: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1;
+          if (roundLabel === "반올림") calc = Math.round(calc / unit) * unit;
+          else if (roundLabel === "절삭") calc = Math.floor(calc / unit) * unit;
+          else if (roundLabel === "올림") calc = Math.ceil(calc / unit) * unit;
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  const openEditSupp = async (row: any) => {
+    const custKey = row.supplier_code || row.supplier_id;
+
+    // supplier_mng에서 공급업체 정보 조회
+    let custInfo: any = { supplier_code: custKey, supplier_name: row.supplier_name || "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/supplier_mng/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: custKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) custInfo = found;
+    } catch { /* skip */ }
+
+    const mappingRows = [{
+      _id: `m_existing_${row.id}`,
+      supplier_item_code: row.supplier_item_code || "",
+      supplier_item_name: row.supplier_item_name || "",
+    }].filter((m) => m.supplier_item_code || m.supplier_item_name);
+
+    const priceRows = [{
+      _id: `p_existing_${row.id}`,
+      start_date: row.start_date || "",
+      end_date: row.end_date || "",
+      currency_code: row.currency_code || "CAT_MLAMDKVN_PZJI",
+      base_price_type: row.base_price_type || "CAT_MLAMFGFT_4RZW",
+      base_price: row.base_price ? String(row.base_price) : "",
+      discount_type: row.discount_type || "",
+      discount_value: row.discount_value ? String(row.discount_value) : "",
+      rounding_type: row.rounding_type || "",
+      rounding_unit_value: row.rounding_unit_value || "",
+      calculated_price: row.calculated_price ? String(row.calculated_price) : "",
+    }].filter((p) => p.base_price || p.start_date);
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedSuppsForDetail([custInfo]);
+    setSuppMappings({ [custKey]: mappingRows });
+    setSuppPrices({ [custKey]: priceRows });
+    setEditSuppData(row);
+    setSuppDetailOpen(true);
+  };
+
+  const handleSuppDetailSave = async () => {
+    if (!selectedItem) return;
+    const isEditingExisting = !!editSuppData;
+    setSaving(true);
+    try {
+      for (const cust of selectedSuppsForDetail) {
+        const custKey = cust.supplier_code || cust.id;
+        const mappingRows = suppMappings[custKey] || [];
+
+        if (isEditingExisting && editSuppData?.id) {
+          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+            originalData: { id: editSuppData.id },
+            updatedData: {
+              supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+              supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+            },
+          });
+
+          // 기존 prices 삭제 후 재등록
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "mapping_id", operator: "equals", value: editSuppData.id },
+              ]}, autoFilter: true,
+            });
+            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+            if (existing.length > 0) {
+              await apiClient.delete(`/table-management/tables/supplier_item_prices/delete`, {
+                data: existing.map((p: any) => ({ id: p.id })),
+              });
+            }
+          } catch { /* skip */ }
+
+          const priceRows = (suppPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/supplier_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: editSuppData.id,
+              supplier_id: custKey,
+              item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        } else {
+          // 신규 등록
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            supplier_id: custKey, item_id: selectedItem.item_number,
+            supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+            supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+          });
+          const mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              supplier_id: custKey, item_id: selectedItem.item_number,
+              supplier_item_code: mappingRows[mi].supplier_item_code || "",
+              supplier_item_name: mappingRows[mi].supplier_item_name || "",
+            });
+          }
+
+          const priceRows = (suppPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/supplier_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", supplier_id: custKey, item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedSuppsForDetail.length}개 공급업체가 추가되었습니다.`);
+      setSuppDetailOpen(false);
+      setEditSuppData(null);
+      setSuppCheckedIds(new Set());
+      // 우측 새로고침
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 수정
+  const openEditItem = () => {
+    if (!selectedItem) return;
+    setEditItemForm({ ...selectedItem });
+    setEditItemOpen(true);
+  };
+
+  const handleEditSave = async () => {
+    if (!editItemForm.id) return;
+    setSaving(true);
+    try {
+      await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
+        originalData: { id: editItemForm.id },
+        updatedData: {
+          standard_price: editItemForm.standard_price || null,
+          currency_code: editItemForm.currency_code || null,
+        },
+      });
+      toast.success("수정되었습니다.");
+      setEditItemOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "수정에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 우측: 공급업체 매핑 삭제
+  const handleSupplierMappingDelete = async () => {
+    if (supplierCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${supplierCheckedIds.length}개 공급업체 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      // 관련 단가 삭제
+      for (const mappingId of supplierCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/supplier_item_prices/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      // 매핑 삭제
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: supplierCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${supplierCheckedIds.length}개 공급업체 매핑이 삭제되었습니다.`);
+      setSupplierCheckedIds([]);
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) return;
+    const data = items.map((i) => ({
+      품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
+      기준단가: i.standard_price, 구매단가: i.standard_price, 통화: i.currency_code, 상태: i.status,
+    }));
+    await exportToExcel(data, "구매품목관리.xlsx", "구매품목");
+    toast.success("다운로드 완료");
+  };
+
+  // EDataTable 컬럼 정의 (구매품목) — ts.visibleColumns 기반
+  const COLUMN_RENDER_MAP: Record<string, Partial<EDataTableColumn>> = {
+    item_number: { width: "w-[110px]" },
+    item_name: { minWidth: "min-w-[130px]" },
+    size: { width: "w-[80px]" },
+    unit: { width: "w-[60px]" },
+    standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
+    currency_code: { width: "w-[50px]" },
+    status: { width: "w-[60px]" },
+  };
+  const itemColumns: EDataTableColumn[] = ts.visibleColumns.map((col): EDataTableColumn => ({
+    key: col.key,
+    label: col.label,
+    ...COLUMN_RENDER_MAP[col.key],
+  }));
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ITEM_TABLE}
+        filterId="c16-purchase-item"
+        onFilterChange={setSearchFilters}
+        dataCount={items.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" />
+            엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 구매품목 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">구매품목 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {itemCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={itemColumns}
+                data={ts.groupData(items)}
+                rowKey={(row) => row.id}
+                loading={itemLoading}
+                emptyMessage="등록된 구매품목이 없어요"
+                selectedId={selectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
+                onRowDoubleClick={() => openEditItem()}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-purchase-item"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedItemId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Package className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">품목을 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 품목을 선택하면 공급업체 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 공급업체별 단가 헤더 */}
+                  <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 px-4">
+                    <div className="flex items-center gap-2.5">
+                      <Package className="w-3.5 h-3.5 text-muted-foreground" />
+                      <span className="text-[13px] font-bold">공급업체별 단가</span>
+                      <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">
+                        {supplierItems.length}
+                      </Badge>
+                    </div>
+                    <div className="flex gap-1.5">
+                      <Button
+                        size="sm"
+                        onClick={() => { setSuppCheckedIds(new Set()); setSuppSelectOpen(true); searchSuppliers(); }}
+                      >
+                        <Plus className="w-3.5 h-3.5" /> 공급업체 추가
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={supplierCheckedIds.length === 0}
+                        onClick={handleSupplierMappingDelete}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" /> 삭제
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 공급업체 테이블 */}
+                  <div className="flex-1 min-h-0 overflow-auto pt-px">
+                    {supplierLoading ? (
+                      <div className="flex items-center justify-center h-full">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : supplierItems.length === 0 ? (
+                      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+                        등록된 공급업체가 없어요
+                      </div>
+                    ) : (
+                      <Table noWrapper>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted h-10">
+                            <TableHead className="w-[40px] text-center px-2">
+                              <input
+                                type="checkbox"
+                                className="rounded"
+                                checked={supplierItems.length > 0 && supplierCheckedIds.length === supplierItems.length}
+                                onChange={(e) => {
+                                  if (e.target.checked) setSupplierCheckedIds(supplierItems.map((c) => c.id));
+                                  else setSupplierCheckedIds([]);
+                                }}
+                              />
+                            </TableHead>
+                            <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체코드</TableHead>
+                            <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품번</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품명</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {supplierItems.map((row) => (
+                            <TableRow
+                              key={row.id}
+                              className={cn(
+                                "cursor-pointer h-[41px]",
+                                supplierCheckedIds.includes(row.id) ? "bg-primary/5 border-l-[3px] border-l-primary" : "border-l-[3px] border-l-transparent"
+                              )}
+                              onDoubleClick={() => openEditSupp(row)}
+                            >
+                              <TableCell
+                                className="text-center px-2"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setSupplierCheckedIds((prev) =>
+                                    prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                  );
+                                }}
+                              >
+                                <input type="checkbox" className="rounded" checked={supplierCheckedIds.includes(row.id)} readOnly />
+                              </TableCell>
+                              <TableCell className="text-[13px] font-mono text-muted-foreground">{row.supplier_code}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_name}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_item_code}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right">
+                                {row.base_price ? Number(row.base_price).toLocaleString() : ""}
+                              </TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold">
+                                {row.calculated_price ? Number(row.calculated_price).toLocaleString() : ""}
+                              </TableCell>
+                              <TableCell className="text-[13px]">{row.currency_code}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 품목 수정 모달 ── */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>구매품목 수정</DialogTitle>
+            <DialogDescription>
+              {editItemForm.item_number || ""} — {editItemForm.item_name || ""}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {/* 품목 기본정보 (읽기 전용) */}
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-sm">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+
+            <div className="col-span-2 border-t my-1" />
+
+            {/* 구매 설정 (수정 가능) */}
+            <div className="space-y-1.5">
+              <Label className="text-sm">구매단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="구매단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">기준단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">통화</Label>
+              <Select
+                value={editItemForm.currency_code || ""}
+                onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="통화를 선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 공급업체 검색 및 추가 모달 ── */}
+      <Dialog open={suppSelectOpen} onOpenChange={setSuppSelectOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>공급업체 검색 및 추가</DialogTitle>
+            <DialogDescription>품목에 추가할 공급업체를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 py-2">
+            {/* 검색바 */}
+            <div className="flex gap-2">
+              <Input
+                placeholder="공급업체명으로 검색해주세요"
+                value={suppSearchKeyword}
+                onChange={(e) => setSuppSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchSuppliers()}
+                className="h-9 flex-1"
+              />
+              <Button size="sm" onClick={searchSuppliers} disabled={suppSearchLoading} className="h-9">
+                {suppSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
+              </Button>
+            </div>
+            {/* 검색 결과 테이블 */}
+            <div className="overflow-auto max-h-[350px] border rounded-lg">
+              <Table noWrapper>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="sticky top-0 bg-card w-[40px] text-center">
+                      <Checkbox
+                        checked={suppSearchResults.length > 0 && suppCheckedIds.size === suppSearchResults.length}
+                        onCheckedChange={(checked) => {
+                          if (checked === true) setSuppCheckedIds(new Set(suppSearchResults.map((c) => c.id)));
+                          else setSuppCheckedIds(new Set());
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[110px]">공급업체코드</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[130px]">공급업체명</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">거래유형</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">담당자</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {suppSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : suppSearchResults.map((c) => (
+                    <TableRow
+                      key={c.id}
+                      className={cn("cursor-pointer", suppCheckedIds.has(c.id) && "bg-primary/[0.08]")}
+                      onClick={() => setSuppCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <Checkbox
+                          checked={suppCheckedIds.has(c.id)}
+                          onCheckedChange={(checked) => {
+                            setSuppCheckedIds((prev) => {
+                              const next = new Set(prev);
+                              if (checked === true) next.add(c.id); else next.delete(c.id);
+                              return next;
+                            });
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell className="text-[13px] font-mono text-muted-foreground">{c.supplier_code}</TableCell>
+                      <TableCell className="text-sm font-medium text-foreground">{c.supplier_name}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.division}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.contact_person}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{suppCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setSuppSelectOpen(false)}>취소</Button>
+                <Button onClick={goToSuppDetail} disabled={suppCheckedIds.size === 0}>
+                  <Plus className="w-4 h-4" />
+                  {suppCheckedIds.size}개 다음
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 공급업체 상세 입력/수정 모달 ── */}
+      <Dialog open={suppDetailOpen} onOpenChange={setSuppDetailOpen}>
+        <DialogContent className="max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              공급업체 상세정보 {editSuppData ? "수정" : "입력"} — {selectedItem?.item_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editSuppData ? "공급업체 품번/품명과 기간별 단가를 수정해주세요." : "선택한 공급업체의 품번/품명과 기간별 단가를 설정해주세요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-6 py-2">
+            {selectedSuppsForDetail.map((cust, idx) => {
+              const custKey = cust.supplier_code || cust.id;
+              const mappingRows = suppMappings[custKey] || [];
+              const prices = suppPrices[custKey] || [];
+
+              return (
+                <div key={custKey} className="border rounded-lg overflow-hidden">
+                  {/* 공급업체 헤더 */}
+                  <div className="flex items-center gap-2.5 px-4 py-3 bg-muted border-b">
+                    <span className="text-[13px] font-bold text-foreground">{idx + 1}. {cust.supplier_name || custKey}</span>
+                    <span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">
+                      {custKey}
+                    </span>
+                  </div>
+
+                  <div className="flex gap-4 p-4 bg-card">
+                    {/* 좌: 공급업체 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/50">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">공급업체 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 공급업체 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.supplier_item_code}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "supplier_item_code", e.target.value)}
+                              placeholder="공급업체 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.supplier_item_name}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "supplier_item_name", e.target.value)}
+                              placeholder="공급업체 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button
+                              variant="ghost" size="sm"
+                              className="h-7 w-7 p-0 text-destructive shrink-0"
+                              onClick={() => removeMappingRow(custKey, mRow._id)}
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/30">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button
+                                  variant="ghost" size="sm"
+                                  className="h-6 w-6 p-0 text-destructive"
+                                  onClick={() => removePriceRow(custKey, price._id)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="통화" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "base_price", raw);
+                                }}
+                                className="h-8 text-xs text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-8 text-xs text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm text-foreground">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setSuppDetailOpen(false);
+                if (!editSuppData) setSuppSelectOpen(true);
+                setEditSuppData(null);
+              }}
+            >
+              {editSuppData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleSuppDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={ITEM_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchItems()}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/purchase/supplier/page.tsx b/frontend/app/(main)/COMPANY_7/purchase/supplier/page.tsx
new file mode 100644
index 00000000..521f770e
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/purchase/supplier/page.tsx
@@ -0,0 +1,2759 @@
+"use client";
+
+/**
+ * 공급업체관리 — Type B 마스터-디테일 레이아웃 (리디자인)
+ *
+ * 좌측: 공급업체 목록 (supplier_mng)
+ * 우측: 품목별 단가 + 납품처 정보 탭
+ *
+ * 모달:
+ * - 공급업체 등록/수정 (supplier_mng)
+ * - 품목 추가 (item_info 검색 → supplier_item_mapping + supplier_item_prices)
+ * - 납품처 등록 (delivery_destination)
+ */
+
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Users, Package, MapPin, Search, X, Tag, Coins, Settings2, GripVertical,
+  ChevronRight, ChevronDown,
+} from "lucide-react";
+import {
+  DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { validateField, validateForm, formatField } from "@/lib/utils/validation";
+import { getAvailableNumberingRulesForScreen, previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const SUPPLIER_TABLE = "supplier_mng";
+const MAPPING_TABLE = "supplier_item_mapping";
+const PRICE_TABLE = "supplier_item_prices";
+const DELIVERY_TABLE = "delivery_destination";
+const CONTACT_TABLE = "supplier_contact";
+
+const SUPPLIER_GRID_COLUMNS = [
+  { key: "supplier_code", label: "공급업체코드" },
+  { key: "supplier_name", label: "공급업체명" },
+  { key: "division", label: "공급업체유형" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "전화번호" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "status", label: "상태" },
+];
+
+function SortableMappingRow({ id, children }: { id: string; children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform), transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+  return (
+    <div ref={setNodeRef} style={style} className="flex gap-2 items-center">
+      <div {...attributes} {...listeners} className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0">
+        <GripVertical className="h-3.5 w-3.5" />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default function SupplierManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-supplier", SUPPLIER_TABLE, SUPPLIER_GRID_COLUMNS);
+  const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 공급업체 목록
+  const [suppliers, setSuppliers] = useState<any[]>([]);
+  const [rawSuppliers, setRawSuppliers] = useState<any[]>([]);
+  const [supplierLoading, setSupplierLoading] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
+  const [mainContactMap, setMainContactMap] = useState<Record<string, any>>({});
+  const [supplierCount, setSupplierCount] = useState(0);
+  const [selectedSupplierId, setSelectedSupplierId] = useState<string | null>(null);
+
+  // 우측: 탭
+  const [rightTab, setRightTab] = useState<"items" | "delivery">("items");
+  // 우측: 품목 단가
+  const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceGroups, setPriceGroups] = useState<Record<string, { master: any; details: any[] }>>({});
+  const [priceLoading, setPriceLoading] = useState(false);
+  const [priceCheckedIds, setPriceCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [collapsedPriceCards, setCollapsedPriceCards] = useState<Set<string>>(new Set());
+  // 우측: 납품처
+  const [deliveryItems, setDeliveryItems] = useState<any[]>([]);
+  const [deliveryLoading, setDeliveryLoading] = useState(false);
+
+  // 품목 편집 데이터 (더블클릭 시 상세 입력 모달 재활용)
+  const [editItemData, setEditItemData] = useState<any>(null);
+  const savingRef = useRef(false);
+
+  // 거래처 모달
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [supplierEditMode, setSupplierEditMode] = useState(false);
+  const [supplierForm, setSupplierForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 품목 추가 모달 (1단계: 검색/선택)
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemTotalCount, setItemTotalCount] = useState(0);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 상세 입력 모달 (2단계: 거래처 품번/품명 + 단가)
+  const [itemDetailOpen, setItemDetailOpen] = useState(false);
+  const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; supplier_item_code: string; supplier_item_name: string }>>>({});
+  const [itemPrices, setItemPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 거래처 모달 탭
+  const [supplierModalTab, setSupplierModalTab] = useState<"basic" | "contacts" | "delivery">("basic");
+  // 담당자 (supplier_contact) - 모달 내
+  const [modalContacts, setModalContacts] = useState<any[]>([]);
+  const [modalContactLoading, setModalContactLoading] = useState(false);
+  const [modalContactForm, setModalContactForm] = useState<Record<string, any>>({});
+  const [modalContactEditId, setModalContactEditId] = useState<string | null>(null);
+  const [modalContactFormOpen, setModalContactFormOpen] = useState(false);
+  const [modalContactSaving, setModalContactSaving] = useState(false);
+  // 납품처 (delivery_destination) - 모달 내
+  const [modalDeliveries, setModalDeliveries] = useState<any[]>([]);
+  const [modalDeliveryLoading, setModalDeliveryLoading] = useState(false);
+  const [modalDeliveryForm, setModalDeliveryForm] = useState<Record<string, any>>({});
+  const [modalDeliveryEditId, setModalDeliveryEditId] = useState<string | null>(null);
+  const [modalDeliveryFormOpen, setModalDeliveryFormOpen] = useState(false);
+  const [modalDeliverySaving, setModalDeliverySaving] = useState(false);
+  const [modalDeliveryFormErrors, setModalDeliveryFormErrors] = useState<Record<string, string>>({});
+
+  const [continuousInput, setContinuousInput] = useState(false);
+
+  // 세금유형 (기본정보 탭 내)
+  const [taxTypeRows, setTaxTypeRows] = useState<{ _id: string; tax_type_name: string; rate: string }[]>([]);
+  const [taxTypeOptions, setTaxTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [employeeOptions, setEmployeeOptions] = useState<{ user_id: string; user_name: string; position_name?: string }[]>([]);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const flatten = (vals: any[]): { code: string; label: string }[] => {
+      const result: { code: string; label: string }[] = [];
+      for (const v of vals) {
+        result.push({ code: v.valueCode, label: v.valueLabel });
+        if (v.children?.length) result.push(...flatten(v.children));
+      }
+      return result;
+    };
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["division", "status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${SUPPLIER_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${PRICE_TABLE}/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+
+      // 세금유형 카테고리
+      try {
+        const taxRes = await apiClient.get(`/table-categories/supplier_tax_type/tax_type_name/values`);
+        if (taxRes.data?.success) setTaxTypeOptions(flatten(taxRes.data.data || []));
+      } catch { /* skip */ }
+    };
+    load();
+    apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true })
+      .then((res) => {
+        const users = res.data?.data?.data || res.data?.data?.rows || [];
+        setEmployeeOptions(users.map((u: any) => ({
+          user_id: u.user_id, user_name: u.user_name || u.user_id, position_name: u.position_name,
+        })));
+      }).catch(() => {});
+  }, []);
+
+  // 공급업체 목록 조회
+  const fetchSuppliers = useCallback(async () => {
+    setSupplierLoading(true);
+    try {
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
+      const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "supplier_code", order: "desc" },
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setRawSuppliers(raw);
+
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const mainContact = mainContactMap[r.id];
+        return {
+          ...r,
+          division: resolve("division", r.division),
+          status: resolve("status", r.status),
+          contact_person: mainContact?.contact_name || "",
+          contact_phone: mainContact?.contact_phone || "",
+          email: mainContact?.contact_email || "",
+        };
+      });
+      // 공급업체코드 숫자 기준 내림차순 정렬
+      data.sort((a: any, b: any) => {
+        const aNum = parseInt((a.supplier_code || "").replace(/\D/g, ""), 10) || 0;
+        const bNum = parseInt((b.supplier_code || "").replace(/\D/g, ""), 10) || 0;
+        return bNum - aNum;
+      });
+      setSuppliers(data);
+      setSupplierCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("거래처 조회 실패:", err);
+      toast.error("공급업체 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setSupplierLoading(false);
+    }
+  }, [searchFilters, categoryOptions, employeeOptions, mainContactMap]);
+
+  useEffect(() => { fetchSuppliers(); }, [fetchSuppliers]);
+
+  // 메인 담당자 조회 (최초 1번 + 저장 후 갱신)
+  const fetchMainContacts = useCallback(async () => {
+    try {
+      const contactRes = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+        dataFilter: { enabled: true, filters: [{ columnName: "is_main", operator: "equals", value: "Y" }] },
+      });
+      const allContacts = contactRes.data?.data?.data || contactRes.data?.data?.rows || [];
+      const map: Record<string, any> = {};
+      for (const c of allContacts) {
+        if ((c.is_main === "Y" || c.is_main === true) && c.supplier_id) {
+          map[c.supplier_id] = c;
+        }
+      }
+      setMainContactMap(map);
+    } catch { /* skip */ }
+  }, []);
+
+  useEffect(() => { fetchMainContacts(); }, [fetchMainContacts]);
+
+  const selectedSupplier = suppliers.find((c) => c.id === selectedSupplierId);
+
+  // 선택된 공급업체의 품목 단가 조회
+  useEffect(() => {
+    if (!selectedSupplier?.supplier_code) { setPriceItems([]); setPriceCheckedIds([]); return; }
+    setPriceCheckedIds([]);
+    const fetchItems = async () => {
+      setPriceLoading(true);
+      try {
+        const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+          ]},
+          autoFilter: true,
+        });
+        const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+
+        // 품목 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
+        const grouped: Record<string, { master: any; details: any[] }> = {};
+        const flatItems: any[] = [];
+        const seenItemIds = new Set<string>();
+        for (const m of mappings) {
+          const itemKey = m.item_id || "";
+          if (seenItemIds.has(itemKey)) continue; // 품목당 첫 매핑만 마스터
+          seenItemIds.add(itemKey);
+
+          const itemInfo = itemMap[itemKey] || {};
+          const itemPriceList = allPrices
+            .filter((p: any) => p.item_id === itemKey)
+            .sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
+          const todayPrice = itemPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || itemPriceList[0] || {};
+
+          const masterRow = {
+            ...m,
+            item_number: itemKey,
+            item_name: itemInfo.item_name || "",
+            base_price_type: priceResolve("base_price_type", todayPrice.base_price_type || ""),
+            base_price: todayPrice.base_price || "",
+            discount_type: priceResolve("discount_type", todayPrice.discount_type || ""),
+            discount_value: todayPrice.discount_value || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+
+          // 단가 리스트 (라벨 변환)
+          const priceDetails = itemPriceList.map((p: any) => ({
+            ...p,
+            base_price_type_label: priceResolve("base_price_type", p.base_price_type || ""),
+            discount_type_label: priceResolve("discount_type", p.discount_type || ""),
+            currency_label: priceResolve("currency_code", p.currency_code || ""),
+            is_current: (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today),
+          }));
+
+          grouped[itemKey] = { master: masterRow, details: priceDetails };
+          flatItems.push(masterRow);
+        }
+        setPriceGroups(grouped);
+        setPriceItems(flatItems);
+      } catch (err) {
+        console.error("품목 조회 실패:", err);
+      } finally {
+        setPriceLoading(false);
+      }
+    };
+    fetchItems();
+  }, [selectedSupplier?.supplier_code]);
+
+  // 납품처 조회
+  useEffect(() => {
+    if (!selectedSupplier?.supplier_code) { setDeliveryItems([]); return; }
+    const fetchDelivery = async () => {
+      setDeliveryLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_code", operator: "equals", value: selectedSupplier.supplier_code },
+          ]},
+          autoFilter: true,
+        });
+        setDeliveryItems(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setDeliveryItems([]); } finally { setDeliveryLoading(false); }
+    };
+    fetchDelivery();
+  }, [selectedSupplier?.supplier_code]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 모달 내 담당자 목록 조회
+  const fetchModalContacts = useCallback(async (supplierId: string) => {
+    setModalContactLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      setModalContacts(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalContacts([]); } finally { setModalContactLoading(false); }
+  }, []);
+
+  // 모달 내 납품처 목록 조회
+  const fetchModalDeliveries = useCallback(async (supplierCode: string) => {
+    setModalDeliveryLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: supplierCode }] },
+        autoFilter: true,
+      });
+      setModalDeliveries(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalDeliveries([]); } finally { setModalDeliveryLoading(false); }
+  }, []);
+
+  // 담당자 저장 (등록/수정)
+  const handleModalContactSave = async () => {
+    if (!modalContactForm.contact_name) { toast.error("담당자명은 필수입니다."); return; }
+    if (modalContactEditId) {
+      // 수정 — 로컬 리스트에서 교체 + 메인 설정 시 다른 메인 해제
+      const isSettingMain = modalContactForm.is_main === "Y" || modalContactForm.is_main === true;
+      setModalContacts((prev) => prev.map((c) =>
+        (c._localId || c.id) === modalContactEditId
+          ? { ...c, ...modalContactForm }
+          : isSettingMain ? { ...c, is_main: "N" } : c
+      ));
+    } else {
+      // 추가 — 로컬 리스트에 카드 추가
+      setModalContacts((prev) => [...prev, {
+        ...modalContactForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalContactFormOpen(false);
+    setModalContactForm({});
+    setModalContactEditId(null);
+  };
+
+  // 담당자 삭제
+  const handleModalContactDelete = (contactId: string) => {
+    setModalContacts((prev) => prev.filter((c) => (c._localId || c.id) !== contactId));
+  };
+
+  // 납품처 자동채번 유틸
+  const generateDeliveryCode = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DELIVERY_TABLE}/destination_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        const allRes = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "destination_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const match = (row.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        // 로컬에 추가된 것도 포함
+        for (const d of modalDeliveries) {
+          const match = (d.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLen = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          return prefix + String(maxSeq + 1).padStart(seqLen, "0");
+        }
+      }
+    } catch { /* skip */ }
+    return "";
+  };
+
+  // 납품처 저장 (모달 내)
+  const handleModalDeliverySave = async () => {
+    if (!modalDeliveryForm.destination_name) { toast.error("납품처명은 필수입니다."); return; }
+    if (modalDeliveryEditId) {
+      const isSettingMain = modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true;
+      setModalDeliveries((prev) => prev.map((d) =>
+        (d._localId || d.id) === modalDeliveryEditId
+          ? { ...d, ...modalDeliveryForm }
+          : isSettingMain ? { ...d, is_default: "N" } : d
+      ));
+    } else {
+      setModalDeliveries((prev) => [...prev, {
+        ...modalDeliveryForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalDeliveryFormOpen(false);
+    setModalDeliveryForm({});
+    setModalDeliveryEditId(null);
+    setModalDeliveryFormErrors({});
+  };
+
+  const handleModalDeliveryDelete = (deliveryId: string) => {
+    setModalDeliveries((prev) => prev.filter((d) => (d._localId || d.id) !== deliveryId));
+  };
+
+  // 공급업체 등록 모달 열기
+  const openSupplierRegister = async () => {
+    setSupplierForm({});
+    setFormErrors({});
+    setSupplierEditMode(false);
+    setSupplierModalTab("basic");
+    setModalContacts([]);
+    setModalDeliveries([]);
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setTaxTypeRows([]);
+    setSupplierModalOpen(true);
+    // 공급업체 코드 자동 채번 — 기존 데이터 max값 기반
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${SUPPLIER_TABLE}/supplier_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        // 기존 데이터에서 CUST-XXX 패턴의 최대 순번 조회
+        const allRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "supplier_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const code = row.supplier_code || "";
+          const match = code.match(/(\d+)$/);
+          if (match) {
+            const seq = parseInt(match[1], 10);
+            if (seq > maxSeq) maxSeq = seq;
+          }
+        }
+        // preview로 접두어 패턴 가져오기
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLength = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          const nextSeq = maxSeq + 1;
+          const nextCode = prefix + String(nextSeq).padStart(seqLength, "0");
+          setSupplierForm((prev) => ({ ...prev, supplier_code: nextCode, _numberingRuleId: ruleId }));
+        }
+      }
+    } catch { /* skip */ }
+  };
+
+  const openSupplierEdit = () => {
+    if (!selectedSupplier) return;
+    const rawData = rawSuppliers.find((c) => c.id === selectedSupplierId);
+    setSupplierForm({ ...(rawData || selectedSupplier) });
+    setFormErrors({});
+    setSupplierEditMode(true);
+    setSupplierModalTab("basic");
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setModalContactForm({});
+    setModalDeliveryForm({});
+    setModalContactEditId(null);
+    setModalDeliveryEditId(null);
+    // 수정 모드에서는 바로 조회
+    const code = (rawData || selectedSupplier).supplier_code;
+    const id = (rawData || selectedSupplier).id;
+    if (id) {
+      fetchModalContacts(id);
+      // 세금유형 로드
+      apiClient.post(`/table-management/tables/supplier_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: id }] },
+        autoFilter: true,
+      }).then((res: any) => {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        setTaxTypeRows(rows.map((r: any) => ({ _id: r.id, tax_type_name: r.tax_type_name || "", rate: String(r.rate || "") })));
+      }).catch(() => setTaxTypeRows([]));
+    }
+    if (code) fetchModalDeliveries(code);
+    setSupplierModalOpen(true);
+  };
+
+  // 폼 필드 변경 시 자동 포맷팅 + 실시간 검증
+  const handleFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setSupplierForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => {
+      const next = { ...prev };
+      if (error) next[field] = error; else delete next[field];
+      return next;
+    });
+  };
+
+  // 세금유형/담당자/납품처를 한번에 저장하는 헬퍼
+  const saveSubTables = async (supplierId: string, supplierCode: string) => {
+    // 세금유형 — 기존 삭제 후 재생성
+    try {
+      const existTax = await apiClient.post(`/table-management/tables/supplier_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      const existRows = existTax.data?.data?.data || existTax.data?.data?.rows || [];
+      if (existRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/supplier_tax_type/delete`, {
+          data: existRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+      for (const t of taxTypeRows.filter((r) => r.tax_type_name)) {
+        await apiClient.post(`/table-management/tables/supplier_tax_type/add`, {
+          id: crypto.randomUUID(), supplier_id: supplierId,
+          tax_type_name: t.tax_type_name, tax_type_id: t.tax_type_name,
+          rate: t.rate ? Number(t.rate) : 0,
+        });
+      }
+    } catch { /* skip */ }
+
+    // 담당자 — 기존 삭제 후 전체 재생성
+    try {
+      const existContacts = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      const existCRows = existContacts.data?.data?.data || existContacts.data?.data?.rows || [];
+      if (existCRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${CONTACT_TABLE}/delete`, {
+          data: existCRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const c of modalContacts) {
+      try {
+        await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/add`, {
+          id: crypto.randomUUID(), supplier_id: supplierId,
+          contact_name: c.contact_name || "", contact_phone: c.contact_phone || "",
+          contact_email: c.contact_email || "", department: c.department || "",
+          is_main: c.is_main || "N", memo: c.memo || "",
+        });
+      } catch { /* skip */ }
+    }
+
+    // 납품처 — 기존 삭제 후 전체 재생성
+    try {
+      const existDeliveries = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: supplierCode }] },
+        autoFilter: true,
+      });
+      const existDRows = existDeliveries.data?.data?.data || existDeliveries.data?.data?.rows || [];
+      if (existDRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
+          data: existDRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const d of modalDeliveries) {
+      try {
+        await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
+          id: crypto.randomUUID(), supplier_code: supplierCode,
+          destination_code: d.destination_code || "", destination_name: d.destination_name || "",
+          address: d.address || "", manager_name: d.manager_name || "",
+          phone: d.phone || "", memo: d.memo || "", is_default: d.is_default || "N",
+        });
+      } catch { /* skip */ }
+    }
+  };
+
+  const handleSupplierSave = async () => {
+    if (!supplierForm.supplier_name) { toast.error("공급업체명은 필수입니다."); return; }
+    if (!supplierForm.status) { toast.error("상태는 필수입니다."); return; }
+    const errors = validateForm(supplierForm, ["contact_phone", "email", "business_number"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) {
+      toast.error("입력 형식을 확인해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, _numberingRuleId, ...fields } = supplierForm;
+      const cleanFields: Record<string, any> = {};
+      for (const [key, value] of Object.entries(fields)) {
+        cleanFields[key] = value === "" ? null : value;
+      }
+
+      if (supplierEditMode && id) {
+        // 수정
+        await apiClient.put(`/table-management/tables/${SUPPLIER_TABLE}/edit`, {
+          originalData: { id }, updatedData: cleanFields,
+        });
+        await saveSubTables(id, cleanFields.supplier_code || supplierForm.supplier_code);
+        toast.success("저장되었습니다.");
+      } else {
+        // 신규 등록
+        await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/add`, cleanFields);
+        // id 획득
+        const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: cleanFields.supplier_code }] },
+          autoFilter: true,
+        });
+        const newRow = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+        if (newRow?.id) {
+          await saveSubTables(newRow.id, cleanFields.supplier_code);
+        }
+        toast.success("공급업체가 등록되었습니다.");
+      }
+
+      fetchSuppliers();
+      fetchMainContacts();
+      if (!supplierEditMode && continuousInput) {
+        // 연속입력 — 폼 초기화하고 모달 유지
+        setSupplierForm({});
+        setModalContacts([]);
+        setModalDeliveries([]);
+        setTaxTypeRows([]);
+        setSupplierModalTab("basic");
+        // 새 코드 채번
+        try {
+          const ruleRes = await apiClient.get(`/numbering-rules/by-column/${SUPPLIER_TABLE}/supplier_code`);
+          const ruleData = ruleRes.data;
+          if (ruleData?.success && ruleData?.data?.ruleId) {
+            const ruleId = ruleData.data.ruleId;
+            const allRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, { page: 1, size: 500, autoFilter: true, sort: { columnName: "supplier_code", order: "desc" } });
+            const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+            let maxSeq = 0;
+            for (const row of allRows) { const match = (row.supplier_code || "").match(/(\d+)$/); if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; } }
+            const previewRes = await previewNumberingCode(ruleId);
+            if (previewRes.success && previewRes.data?.generatedCode) {
+              const prefix = previewRes.data.generatedCode.replace(/\d+$/, "");
+              const seqLen = (previewRes.data.generatedCode.match(/(\d+)$/) || ["", "001"])[1].length;
+              setSupplierForm({ supplier_code: prefix + String(maxSeq + 1).padStart(seqLen, "0") });
+            }
+          }
+        } catch { /* skip */ }
+        toast.success("등록 완료. 다음 공급업체를 입력하세요.");
+      } else {
+        setSupplierModalOpen(false);
+        // 우측 패널 갱신
+        if (selectedSupplierId) {
+          const cid = selectedSupplierId;
+          setSelectedSupplierId(null);
+          setTimeout(() => setSelectedSupplierId(cid), 50);
+        }
+      }
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 공급업체 삭제
+  const handleSupplierDelete = async () => {
+    if (!selectedSupplierId) return;
+    const ok = await confirm("공급업체를 삭제하시겠습니까?", {
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${SUPPLIER_TABLE}/delete`, {
+        data: [{ id: selectedSupplierId }],
+      });
+      toast.success("삭제되었습니다.");
+      setSelectedSupplierId(null);
+      fetchSuppliers();
+    } catch { toast.error("삭제에 실패했습니다."); }
+  };
+
+  // 품목 검색
+  const searchItems = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const allItems = res.data?.data?.data || res.data?.data?.rows || [];
+      setItemTotalCount(allItems.length);
+      const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
+      const PURCHASE_CODES = ["s"]; // 구매관리 카테고리 코드
+      setItemSearchResults(allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        const divCodes = (item.division || "").split(",").map((c: string) => c.trim());
+        return divCodes.some((code: string) => PURCHASE_CODES.includes(code));
+      }));
+    } catch { /* skip */ } finally { setItemSearchLoading(false); }
+  };
+
+  // 품목 선택 완료 → 상세 입력 모달로 전환
+  const goToItemDetail = () => {
+    const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+    setSelectedItemsForDetail(selected);
+    const mappings: typeof itemMappings = {};
+    const prices: typeof itemPrices = {};
+    for (const item of selected) {
+      const key = item.item_number || item.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: item.standard_price || item.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: item.standard_price || item.selling_price || "",
+      }];
+    }
+    setItemMappings(mappings);
+    setItemPrices(prices);
+    setItemSelectOpen(false);
+    setItemDetailOpen(true);
+  };
+
+  // 거래처 품번/품명 행 추가
+  const addMappingRow = (itemKey: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, supplier_item_code: "", supplier_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (itemKey: string, rowId: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const handleMappingDragEnd = (itemKey: string, event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setItemMappings((prev) => {
+      const arr = [...(prev[itemKey] || [])];
+      const oldIdx = arr.findIndex((r) => r._id === active.id);
+      const newIdx = arr.findIndex((r) => r._id === over.id);
+      return { ...prev, [itemKey]: arrayMove(arr, oldIdx, newIdx) };
+    });
+  };
+
+  const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  // 단가 행 추가
+  const addPriceRow = (itemKey: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (itemKey: string, rowId: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1; // "10원" → 10, "100원" → 100
+          if (roundLabel === "반올림") {
+            calc = Math.round(calc / unit) * unit;
+          } else if (roundLabel === "절삭") {
+            calc = Math.floor(calc / unit) * unit;
+          } else if (roundLabel === "올림") {
+            calc = Math.ceil(calc / unit) * unit;
+          }
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  // 품목 편집 열기
+  const openEditItem = async (row: any) => {
+    const itemKey = row.item_number || row.item_id;
+    let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "equals", value: itemKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) itemInfo = found;
+    } catch { /* skip */ }
+
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "supplier_id", operator: "equals", value: selectedSupplier!.supplier_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.supplier_item_code || m.supplier_item_name)
+        .map((m: any) => ({
+          _id: `m_existing_${m.id}`,
+          supplier_item_code: m.supplier_item_code || "",
+          supplier_item_name: m.supplier_item_name || "",
+        }));
+    } catch { /* skip */ }
+
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "supplier_id", operator: "equals", value: selectedSupplier!.supplier_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date ? String(p.start_date).split("T")[0] : "",
+        end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedItemsForDetail([itemInfo]);
+    setItemMappings({ [itemKey]: mappingRows });
+    setItemPrices({ [itemKey]: priceRows });
+    setEditItemData(row);
+    setItemDetailOpen(true);
+  };
+
+  const handleItemDetailSave = async () => {
+    if (!selectedSupplier) return;
+    if (savingRef.current) return;
+    savingRef.current = true;
+    const isEditingExisting = !!editItemData;
+    setSaving(true);
+    try {
+      for (const item of selectedItemsForDetail) {
+        const itemKey = item.item_number || item.id;
+        const mappingRows = itemMappings[itemKey] || [];
+
+        if (isEditingExisting && editItemData?.id) {
+          // 기존 매핑 조회
+          let existingMaps: any[] = [];
+          try {
+            const existingMappings = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingMaps = existingMappings.data?.data?.data || existingMappings.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 매핑 upsert: 기존 것은 update, 새 것은 insert, 남은 것은 delete
+          const usedExistingIds = new Set<string>();
+          let firstMappingId: string | null = editItemData.id;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const existMap = existingMaps[mi];
+            if (existMap) {
+              // update
+              await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+                originalData: { id: existMap.id },
+                updatedData: {
+                  supplier_item_code: mappingRows[mi].supplier_item_code || "",
+                  supplier_item_name: mappingRows[mi].supplier_item_name || "",
+                },
+              });
+              usedExistingIds.add(existMap.id);
+              if (mi === 0) firstMappingId = existMap.id;
+            } else {
+              // insert
+              const mRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+                id: crypto.randomUUID(),
+                supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+                supplier_item_code: mappingRows[mi].supplier_item_code || "",
+                supplier_item_name: mappingRows[mi].supplier_item_name || "",
+              });
+              if (mi === 0 && !firstMappingId) firstMappingId = mRes.data?.data?.id || null;
+            }
+          }
+          // 초과분 delete
+          const toDeleteMaps = existingMaps.filter((m) => !usedExistingIds.has(m.id));
+          if (toDeleteMaps.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: toDeleteMaps.map((m: any) => ({ id: m.id })),
+            });
+          }
+
+          // 기존 단가 조회
+          let existingPriceRows: any[] = [];
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingPriceRows = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 단가 upsert
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          const usedPriceIds = new Set<string>();
+          for (let pi = 0; pi < priceRows.length; pi++) {
+            const price = priceRows[pi];
+            const priceData = {
+              mapping_id: firstMappingId || editItemData.id,
+              supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            };
+            const existPrice = existingPriceRows[pi];
+            if (existPrice) {
+              await apiClient.put(`/table-management/tables/${PRICE_TABLE}/edit`, {
+                originalData: { id: existPrice.id },
+                updatedData: priceData,
+              });
+              usedPriceIds.add(existPrice.id);
+            } else {
+              await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+                id: crypto.randomUUID(), ...priceData,
+              });
+            }
+          }
+          // 초과분 delete
+          const toDeletePrices = existingPriceRows.filter((p) => !usedPriceIds.has(p.id));
+          if (toDeletePrices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: toDeletePrices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } else {
+          if (!mappingRows.length || !mappingRows[0]?.supplier_item_code) {
+            const existingCheck = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 1,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            if ((existingCheck.data?.data?.data || existingCheck.data?.data?.rows || []).length > 0) {
+              toast.warning(`${item.item_name || itemKey} 품목은 이미 등록되어 있습니다.`);
+              continue;
+            }
+          }
+
+          let mappingId: string | null = null;
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+            supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+            supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+          });
+          mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              supplier_item_code: mappingRows[mi].supplier_item_code || "",
+              supplier_item_name: mappingRows[mi].supplier_item_name || "",
+            });
+          }
+
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedItemsForDetail.length}개 품목이 추가되었습니다.`);
+      setItemDetailOpen(false);
+      setEditItemData(null);
+      setItemCheckedIds(new Set());
+      const cid = selectedSupplierId;
+      setSelectedSupplierId(null);
+      setTimeout(() => setSelectedSupplierId(cid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+      savingRef.current = false;
+    }
+  };
+
+  // 품목 매핑 삭제
+  const handlePriceItemDelete = async () => {
+    if (priceCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${priceCheckedIds.length}개 품목 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      for (const mappingId of priceCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: priceCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${priceCheckedIds.length}개 품목 매핑이 삭제되었습니다.`);
+      setPriceCheckedIds([]);
+      const cid = selectedSupplierId;
+      setSelectedSupplierId(null);
+      setTimeout(() => setSelectedSupplierId(cid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // EDataTable 컬럼 정의 (공급업체 목록) — ts.visibleColumns 순서를 따름
+  const supplierColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      supplier_code: { width: "w-[120px]" },
+      supplier_name: { minWidth: "min-w-[140px]" },
+      division: {
+        width: "w-[80px]",
+        render: (val: any) =>
+          val ? (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
+              {val}
+            </Badge>
+          ) : null,
+      },
+      contact_person: { width: "w-[80px]" },
+      contact_phone: { width: "w-[120px]" },
+      email: { width: "w-[160px]" },
+      business_number: { width: "w-[120px]" },
+      address: { minWidth: "min-w-[150px]" },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val}
+            </Badge>
+          ) : null,
+      },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (suppliers.length === 0) return;
+    toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
+    try {
+      const allMappings: any[] = [];
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 5000, autoFilter: true,
+      });
+      const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemIds.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+            autoFilter: true,
+          });
+          for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+            itemMap[item.item_number] = item;
+          }
+        } catch { /* skip */ }
+      }
+      for (const m of mappings) {
+        const itemInfo = itemMap[m.item_id] || {};
+        allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
+      }
+
+      const rows: Record<string, any>[] = [];
+      for (const c of suppliers) {
+        const suppMappings = allMappings.filter((m) => m.supplier_id === c.supplier_code);
+        if (suppMappings.length === 0) {
+          rows.push({
+            공급업체코드: c.supplier_code, 공급업체명: c.supplier_name,
+            공급업체유형: getCategoryLabel("division", c.division),
+            담당자: c.contact_person, 전화번호: c.contact_phone,
+            사업자번호: c.business_number, 이메일: c.email,
+            상태: getCategoryLabel("status", c.status),
+            품목코드: "", 품명: "", 규격: "",
+            공급업체품번: "", 공급업체품명: "",
+            기준가: "", 할인유형: "", 할인값: "", 단가: "", 통화: "",
+          });
+        } else {
+          for (const m of suppMappings) {
+            rows.push({
+              공급업체코드: c.supplier_code, 공급업체명: c.supplier_name,
+              공급업체유형: getCategoryLabel("division", c.division),
+              담당자: c.contact_person, 전화번호: c.contact_phone,
+              사업자번호: c.business_number, 이메일: c.email,
+              상태: getCategoryLabel("status", c.status),
+              품목코드: m.item_id || "", 품명: m.item_name || "", 규격: m.item_spec || "",
+              공급업체품번: m.supplier_item_code || "", 공급업체품명: m.supplier_item_name || "",
+              기준가: m.base_price || "", 할인유형: m.discount_type || "", 할인값: m.discount_value || "",
+              단가: m.calculated_price || "", 통화: m.currency_code || "",
+            });
+          }
+        }
+      }
+      await exportToExcel(rows, "공급업체관리.xlsx", "거래처+품목");
+      toast.dismiss("excel-dl");
+      toast.success(`${rows.length}행 다운로드 완료`);
+    } catch (err) {
+      toast.dismiss("excel-dl");
+      toast.error("다운로드에 실패했습니다.");
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={SUPPLIER_TABLE}
+        filterId="c16-supplier"
+        onFilterChange={setSearchFilters}
+        dataCount={suppliers.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button
+            variant="outline" size="sm" className="h-8" disabled={excelDetecting}
+            onClick={async () => {
+              setExcelDetecting(true);
+              try {
+                const result = await autoDetectMultiTableConfig(SUPPLIER_TABLE);
+                if (result.success && result.data) {
+                  setExcelChainConfig(result.data);
+                  setExcelUploadOpen(true);
+                } else {
+                  toast.error(result.message || "테이블 구조 분석 실패");
+                }
+              } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+            }}
+          >
+            {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />}
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 공급업체 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">공급업체 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {supplierCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <label className="flex items-center gap-1.5 cursor-pointer mr-1">
+                    <input type="checkbox" checked={showInactive} onChange={(e) => setShowInactive(e.target.checked)} className="rounded" />
+                    <span className="text-[11px] text-muted-foreground">거래정지 포함</span>
+                  </label>
+                  <Button size="sm" onClick={openSupplierRegister}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedSupplierId} onClick={openSupplierEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedSupplierId} onClick={handleSupplierDelete}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={supplierColumns}
+                data={ts.groupData(showInactive ? suppliers : suppliers.filter((c) => c.status !== "거래정지"))}
+                rowKey={(row) => row.id}
+                loading={supplierLoading}
+                emptyMessage="등록된 공급업체가 없어요"
+                selectedId={selectedSupplierId}
+                onSelect={(id) => setSelectedSupplierId(id)}
+                onRowDoubleClick={(row) => { setSelectedSupplierId(row.id); openSupplierEdit(); }}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-supplier"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedSupplierId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">공급업체를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 공급업체를 선택하면 상세 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 탭 + 버튼 통합 헤더 */}
+                  <Tabs
+                    value={rightTab}
+                    onValueChange={(v) => setRightTab(v as "items" | "delivery")}
+                    className="flex flex-col flex-1 overflow-hidden gap-0"
+                  >
+                    <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                      <TabsList className="bg-transparent h-auto p-0 rounded-none">
+                        <TabsTrigger
+                          value="items"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <Package className="w-3.5 h-3.5" /> 공급업체별 품목정보
+                          {Object.keys(priceGroups).length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{Object.keys(priceGroups).length}</Badge>
+                          )}
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="delivery"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <MapPin className="w-3.5 h-3.5" /> 납품처 정보
+                          {deliveryItems.length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{deliveryItems.length}</Badge>
+                          )}
+                        </TabsTrigger>
+                      </TabsList>
+                      <div className="flex gap-1.5">
+                        {rightTab === "items" ? (
+                          <>
+                            <Button size="sm" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
+                              <Plus className="w-3.5 h-3.5" /> 품목 추가
+                            </Button>
+                            <Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0} onClick={handlePriceItemDelete}>
+                              <Trash2 className="w-3.5 h-3.5" /> 삭제
+                            </Button>
+                          </>
+                        ) : (
+                          <Button size="sm" variant="outline" onClick={openSupplierEdit}>
+                            <Pencil className="w-3.5 h-3.5 mr-1" /> 공급업체 수정에서 관리
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 품목정보 탭 */}
+                    <TabsContent value="items" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[40px] text-center px-2">
+                                <input
+                                  type="checkbox"
+                                  className="rounded"
+                                  checked={priceItems.length > 0 && priceCheckedIds.length === priceItems.length}
+                                  onChange={(e) => setPriceCheckedIds(e.target.checked ? priceItems.map((p) => p.id) : [])}
+                                />
+                              </TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                              <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품번</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품명</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                              <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                              <TableHead className="w-[60px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                              <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {priceLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.keys(priceGroups).length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 품목이 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.entries(priceGroups).map(([itemKey, group]) => {
+                              const isExpanded = expandedItems.has(itemKey);
+                              const m = group.master;
+                              const isChecked = priceCheckedIds.includes(m.id);
+                              return (
+                                <React.Fragment key={itemKey}>
+                                  {/* 마스터 행 */}
+                                  <TableRow
+                                    className={cn(
+                                      "cursor-pointer border-l-[3px] border-l-transparent h-[41px]",
+                                      isChecked && "bg-primary/5 border-l-primary"
+                                    )}
+                                    onClick={() => {
+                                      setExpandedItems((prev) => {
+                                        const next = new Set(prev);
+                                        if (next.has(itemKey)) next.delete(itemKey); else next.add(itemKey);
+                                        return next;
+                                      });
+                                    }}
+                                    onDoubleClick={() => openEditItem(m)}
+                                  >
+                                    <TableCell
+                                      className="text-center px-2"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        setPriceCheckedIds((prev) =>
+                                          prev.includes(m.id) ? prev.filter((id) => id !== m.id) : [...prev, m.id]
+                                        );
+                                      }}
+                                    >
+                                      <input type="checkbox" className="rounded" checked={isChecked} readOnly />
+                                    </TableCell>
+                                    <TableCell className="text-[13px] font-mono">
+                                      <div className="flex items-center gap-1">
+                                        {isExpanded
+                                          ? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                          : <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                        }
+                                        {m.item_number}
+                                      </div>
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.supplier_item_code}</TableCell>
+                                    <TableCell className="text-[13px]">{m.supplier_item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.base_price_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">
+                                      {m.base_price ? Number(m.base_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.discount_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">{m.discount_value ? Number(m.discount_value).toLocaleString() : ""}</TableCell>
+                                    <TableCell className="text-[13px] text-right font-semibold">
+                                      {m.calculated_price ? Number(m.calculated_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.currency_code}</TableCell>
+                                  </TableRow>
+
+                                  {/* 현재 단가 카드 (펼쳤을 때) */}
+                                  {isExpanded && (() => {
+                                    const cp = group.details.find((p) => p.is_current) || group.details[0];
+                                    if (!cp) return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="py-3 px-4 text-xs text-muted-foreground">등록된 단가가 없어요</TableCell>
+                                      </TableRow>
+                                    );
+                                    return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="px-4 py-3">
+                                          <div className="border border-primary/20 rounded-lg bg-card overflow-hidden">
+                                            {/* 카드 헤더 */}
+                                            <div className="flex items-center justify-between px-4 py-2 bg-primary/[0.04] border-b border-primary/10">
+                                              <div className="flex items-center gap-2">
+                                                <Coins className="w-3.5 h-3.5 text-primary" />
+                                                <span className="text-xs font-semibold">적용 단가</span>
+                                                <Badge variant="secondary" className="text-[9px] px-1.5 py-0 bg-primary/10 text-primary">현재</Badge>
+                                              </div>
+                                              {group.details.length > 1 && (
+                                                <span className="text-[10px] text-muted-foreground">전체 {group.details.length}건 중</span>
+                                              )}
+                                            </div>
+                                            {/* 카드 내용 */}
+                                            <div className="px-5 py-3.5 flex items-end gap-0 text-[13px]">
+                                              <div className="flex flex-col pr-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기간</span>
+                                                <span className="font-mono text-muted-foreground text-xs">
+                                                  {cp.start_date ? String(cp.start_date).split("T")[0] : "—"} ~ {cp.end_date ? String(cp.end_date).split("T")[0] : "—"}
+                                                </span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준유형</span>
+                                                <span>{cp.base_price_type_label || "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준가</span>
+                                                <span className="font-mono font-medium">{cp.base_price ? Number(cp.base_price).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인유형</span>
+                                                <span>{cp.discount_type_label && cp.discount_type_label !== "할인없음" ? cp.discount_type_label : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인값</span>
+                                                <span className="font-mono">{cp.discount_value ? Number(cp.discount_value).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">단수처리</span>
+                                                <span>
+                                                  {cp.rounding_unit_value
+                                                    ? (priceCategoryOptions["rounding_unit_value"]?.find((o) => o.code === cp.rounding_unit_value)?.label || cp.rounding_unit_value)
+                                                    : "-"}
+                                                </span>
+                                              </div>
+                                              <span className="text-primary/50 px-4 pb-0.5 text-lg">→</span>
+                                              <div className="flex flex-col pl-1">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">계산단가</span>
+                                                <span className="text-base font-bold font-mono text-foreground">
+                                                  {(cp.calculated_price || cp.unit_price) ? Number(cp.calculated_price || cp.unit_price).toLocaleString() : "-"}
+                                                  <span className="text-xs font-normal text-muted-foreground ml-1.5">{cp.currency_label}</span>
+                                                </span>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })()}
+                                </React.Fragment>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+
+                    {/* 납품처 탭 */}
+                    <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                              <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                              <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                              <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {deliveryLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 납품처가 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.map((d) => (
+                              <TableRow key={d.id} className="h-[41px]">
+                                <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                                <TableCell className="text-sm">{d.destination_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                                <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                                <TableCell className="text-[13px]">{d.phone}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                                <TableCell className="text-center">
+                                  {d.is_default && (
+                                    <Badge variant="default" className="text-[10px] px-1.5 py-0 h-5">메인</Badge>
+                                  )}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 모달: 공급업체 등록/수정 (3탭) ── */}
+      <Dialog open={supplierModalOpen} onOpenChange={(open) => {
+        if (!open && isConfirmOpenRef.current) return;
+        setSupplierModalOpen(open);
+        if (!open) {
+          setModalContactFormOpen(false);
+          setModalDeliveryFormOpen(false);
+          setModalContactForm({});
+          setModalDeliveryForm({});
+          setModalContactEditId(null);
+          setModalDeliveryEditId(null);
+          fetchSuppliers();
+          if (supplierForm.supplier_code) {
+            const cid = selectedSupplierId;
+            setSelectedSupplierId(null);
+            setTimeout(() => setSelectedSupplierId(cid), 50);
+          }
+        }
+      }}>
+        <DialogContent className="max-w-4xl h-[85vh] flex flex-col overflow-hidden p-0">
+          <DialogHeader className="px-6 pt-5 pb-0 shrink-0">
+            <DialogTitle>{supplierEditMode ? "공급업체 수정" : "공급업체 등록"}</DialogTitle>
+            <DialogDescription>
+              {supplierEditMode ? "공급업체 정보를 수정합니다." : "새 공급업체를 등록합니다."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <Tabs value={supplierModalTab} onValueChange={(v: any) => setSupplierModalTab(v)} className="flex flex-col flex-1 overflow-hidden">
+            <div className="shrink-0">
+              <TabsList className="bg-transparent w-full h-auto p-0 rounded-none gap-0">
+                <TabsTrigger value="basic" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  기본정보
+                </TabsTrigger>
+                <TabsTrigger value="contacts" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  담당자 관리
+                  {modalContacts.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalContacts.length}</span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="delivery" className="flex-1 rounded-none py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  납품처 관리
+                  {modalDeliveries.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalDeliveries.length}</span>
+                  )}
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            {/* 기본정보 탭 */}
+            <TabsContent value="basic" className="flex-1 overflow-y-auto mt-0">
+              <div className="px-6 py-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체 코드</Label>
+                    <Input
+                      value={supplierForm.supplier_code || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, supplier_code: e.target.value }))}
+                      placeholder={supplierEditMode ? "" : "자동 생성"}
+                      className={cn("h-9 font-mono", !supplierEditMode && supplierForm.supplier_code && "bg-muted")}
+                      readOnly={!supplierEditMode && !!supplierForm.supplier_code}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={supplierForm.supplier_name || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, supplier_name: e.target.value }))}
+                      placeholder="공급업체명"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체 유형</Label>
+                    <Select
+                      value={supplierForm.division || "__none__"}
+                      onValueChange={(v) => setSupplierForm((p) => ({ ...p, division: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="공급업체 유형" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["division"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+                    <Select
+                      value={supplierForm.status || "__none__"}
+                      onValueChange={(v) => setSupplierForm((p) => ({ ...p, status: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="상태" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체담당자</Label>
+                    <Input
+                      value={supplierForm.contact_person || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, contact_person: e.target.value }))}
+                      placeholder="공급업체담당자"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">전화번호</Label>
+                    <Input
+                      value={supplierForm.contact_phone || ""}
+                      onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                      placeholder="010-0000-0000"
+                      className={cn("h-9", formErrors.contact_phone && "border-destructive")}
+                    />
+                    {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">이메일</Label>
+                    <Input
+                      value={supplierForm.email || ""}
+                      onChange={(e) => handleFormChange("email", e.target.value)}
+                      placeholder="example@email.com"
+                      className={cn("h-9", formErrors.email && "border-destructive")}
+                    />
+                    {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">사업자번호</Label>
+                    <Input
+                      value={supplierForm.business_number || ""}
+                      onChange={(e) => handleFormChange("business_number", e.target.value)}
+                      placeholder="000-00-00000"
+                      className={cn("h-9", formErrors.business_number && "border-destructive")}
+                    />
+                    {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+                  </div>
+                  <div className="space-y-1.5 col-span-2">
+                    <Label className="text-sm">주소</Label>
+                    <Input
+                      value={supplierForm.address || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="주소"
+                      className="h-9"
+                    />
+                  </div>
+                </div>
+
+                {/* 세금유형 */}
+                <div className="mt-4 pt-4 border-t">
+                  <div className="flex items-center justify-between mb-2">
+                    <Label className="text-sm font-semibold flex items-center gap-1.5">
+                      <Coins className="w-3.5 h-3.5 text-primary" /> 세금유형
+                    </Label>
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => {
+                      setTaxTypeRows((prev) => [...prev, { _id: `tax_${Date.now()}_${Math.random()}`, tax_type_name: "", rate: "" }]);
+                    }}>
+                      <Plus className="h-3 w-3 mr-1" /> 추가
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    {taxTypeRows.map((row, idx) => (
+                      <div key={row._id} className="flex gap-2 items-center">
+                        <span className="text-xs text-muted-foreground w-4 shrink-0">{idx + 1}</span>
+                        <Select value={row.tax_type_name} onValueChange={(v) => {
+                          setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, tax_type_name: v } : r));
+                        }}>
+                          <SelectTrigger className="h-9 text-[13px] flex-1"><SelectValue placeholder="세금유형 선택" /></SelectTrigger>
+                          <SelectContent>
+                            {taxTypeOptions.map((o) => (
+                              <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <Input
+                          value={row.rate}
+                          onChange={(e) => {
+                            const v = e.target.value.replace(/[^\d.]/g, "");
+                            setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, rate: v } : r));
+                          }}
+                          placeholder="세율 %"
+                          className="h-9 text-[13px] w-[80px] text-right"
+                        />
+                        <span className="text-xs text-muted-foreground">%</span>
+                        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                          onClick={() => setTaxTypeRows((prev) => prev.filter((r) => r._id !== row._id))}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* 담당자 관리 탭 */}
+            <TabsContent value="contacts" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 담당자 목록 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    담당자 {modalContacts.length}명
+                  </span>
+                  <Button size="sm" onClick={() => {
+                    setModalContactForm({});
+                    setModalContactEditId(null);
+                    setModalContactFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 담당자 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalContactLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalContacts.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Users className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 담당자가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자명</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부서</TableHead>
+                          <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalContacts].sort((a, b) => {
+                          const aMain = a.is_main === "Y" || a.is_main === true ? 0 : 1;
+                          const bMain = b.is_main === "Y" || b.is_main === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((c) => (
+                          <TableRow key={c._localId || c.id} className="h-[41px]">
+                            <TableCell className="text-sm font-medium">{c.contact_name}</TableCell>
+                            <TableCell className="text-[13px]">{c.contact_phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.contact_email}</TableCell>
+                            <TableCell className="text-[13px]">{c.department}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (c.is_main === "Y" || c.is_main === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = c.is_main === "Y" || c.is_main === true;
+                                  if (isCurrentMain) {
+                                    // 메인 해제
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id) ? { ...item, is_main: "N" } : item
+                                    ));
+                                  } else {
+                                    // 메인 설정 — 기존 메인이 있으면 확인
+                                    const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== (c._localId || c.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id)
+                                        ? { ...item, is_main: "Y" }
+                                        : { ...item, is_main: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(c.is_main === "Y" || c.is_main === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalContactForm({ ...c });
+                                    setModalContactEditId(c._localId || c.id);
+                                    setModalContactFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalContactDelete(c._localId || c.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 담당자 폼 (인라인) */}
+                {modalContactFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalContactEditId ? "담당자 수정" : "담당자 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalContactForm.contact_name || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_name: e.target.value }))}
+                          placeholder="담당자명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalContactForm.contact_phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalContactForm((p) => ({ ...p, contact_phone: formatted }));
+                          }}
+                          placeholder="010-0000-0000"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">이메일</Label>
+                        <Input
+                          value={modalContactForm.contact_email || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_email: e.target.value }))}
+                          placeholder="example@email.com"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">부서</Label>
+                        <Input
+                          value={modalContactForm.department || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, department: e.target.value }))}
+                          placeholder="부서명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalContactForm.memo || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalContactForm.is_main === "Y" || modalContactForm.is_main === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== modalContactEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalContacts((prev) => prev.map((item) => ({ ...item, is_main: "N" })));
+                                }
+                                setModalContactForm((p) => ({ ...p, is_main: "Y" }));
+                              } else {
+                                setModalContactForm((p) => ({ ...p, is_main: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 담당자</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalContactFormOpen(false); setModalContactForm({}); setModalContactEditId(null); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalContactSave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalContactEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            {/* ── 탭3: 납품처 관리 ── */}
+            <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 납품처 목록 헤더 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    납품처 {modalDeliveries.length}개
+                  </span>
+                  <Button size="sm" onClick={async () => {
+                    const code = await generateDeliveryCode();
+                    setModalDeliveryForm({ destination_code: code });
+                    setModalDeliveryEditId(null);
+                    setModalDeliveryFormErrors({});
+                    setModalDeliveryFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalDeliveryLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalDeliveries.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <MapPin className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 납품처가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalDeliveries].sort((a, b) => {
+                          const aMain = a.is_default === "Y" || a.is_default === true ? 0 : 1;
+                          const bMain = b.is_default === "Y" || b.is_default === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((d) => (
+                          <TableRow key={d._localId || d.id || d.destination_code} className="h-[41px]">
+                            <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                            <TableCell className="text-sm">{d.destination_name}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                            <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                            <TableCell className="text-[13px]">{d.phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (d.is_default === "Y" || d.is_default === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = d.is_default === "Y" || d.is_default === true;
+                                  if (isCurrentMain) {
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id) ? { ...item, is_default: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== (d._localId || d.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id)
+                                        ? { ...item, is_default: "Y" }
+                                        : { ...item, is_default: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(d.is_default === "Y" || d.is_default === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalDeliveryForm({ ...d });
+                                    setModalDeliveryEditId(d._localId || d.id);
+                                    setModalDeliveryFormErrors({});
+                                    setModalDeliveryFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalDeliveryDelete(d._localId || d.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 납품처 폼 (인라인) */}
+                {modalDeliveryFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalDeliveryEditId ? "납품처 수정" : "납품처 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처코드</Label>
+                        <Input
+                          value={modalDeliveryForm.destination_code || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
+                          placeholder="자동 생성"
+                          className={cn("h-8 text-sm font-mono", modalDeliveryForm.destination_code && "bg-muted")}
+                          readOnly={!!modalDeliveryForm.destination_code && !modalDeliveryEditId}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalDeliveryForm.destination_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
+                          placeholder="납품처명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자</Label>
+                        <Input
+                          value={modalDeliveryForm.manager_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
+                          placeholder="담당자"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 col-span-2">
+                        <Label className="text-xs">주소</Label>
+                        <Input
+                          value={modalDeliveryForm.address || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, address: e.target.value }))}
+                          placeholder="주소"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalDeliveryForm.phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalDeliveryForm((p) => ({ ...p, phone: formatted }));
+                            const err = validateField("phone", formatted);
+                            setModalDeliveryFormErrors((p) => {
+                              const n = { ...p };
+                              if (err) n.phone = err; else delete n.phone;
+                              return n;
+                            });
+                          }}
+                          placeholder="010-0000-0000"
+                          className={cn("h-8 text-sm", modalDeliveryFormErrors.phone && "border-destructive")}
+                        />
+                        {modalDeliveryFormErrors.phone && <p className="text-xs text-destructive">{modalDeliveryFormErrors.phone}</p>}
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalDeliveryForm.memo || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== modalDeliveryEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalDeliveries((prev) => prev.map((item) => ({ ...item, is_default: "N" })));
+                                }
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "Y" }));
+                              } else {
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 납품처로 설정</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalDeliveryFormOpen(false); setModalDeliveryForm({}); setModalDeliveryEditId(null); setModalDeliveryFormErrors({}); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalDeliverySave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalDeliveryEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+          <div className="border-t px-6 py-3 flex items-center gap-2 shrink-0">
+            {!supplierEditMode && (
+              <label className="flex items-center gap-2 cursor-pointer mr-auto">
+                <input type="checkbox" checked={continuousInput} onChange={(e) => setContinuousInput(e.target.checked)} className="rounded" />
+                <span className="text-sm font-medium">연속입력</span>
+              </label>
+            )}
+            <Button variant="outline" onClick={() => setSupplierModalOpen(false)}>닫기</Button>
+            <Button onClick={handleSupplierSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {supplierEditMode ? "저장" : "등록"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 선택 (1단계) ── */}
+      <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>품목 선택</DialogTitle>
+            <DialogDescription>공급업체에 추가할 품목을 선택하세요. (전체: {itemTotalCount}건 / 대상: {itemSearchResults.length}건{itemCheckedIds.size > 0 ? ` / 선택: ${itemCheckedIds.size}건` : ""})</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              placeholder="품명/품목코드 검색"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+              className="h-9 flex-1"
+            />
+            <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+              {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+            </Button>
+          </div>
+          <div className="overflow-auto max-h-[350px] border rounded-lg">
+            <Table noWrapper>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted h-10">
+                  <TableHead className="w-[40px] text-center px-2">
+                    <input
+                      type="checkbox"
+                      className="rounded"
+                      checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                      onChange={(e) => {
+                        if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                        else setItemCheckedIds(new Set());
+                      }}
+                    />
+                  </TableHead>
+                  <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="min-w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                  <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {itemSearchResults.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                      검색 결과가 없어요
+                    </TableCell>
+                  </TableRow>
+                ) : itemSearchResults.map((item) => (
+                  <TableRow
+                    key={item.id}
+                    className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                    onClick={() => setItemCheckedIds((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                      return next;
+                    })}
+                  >
+                    <TableCell className="text-center px-2">
+                      <input type="checkbox" className="rounded" checked={itemCheckedIds.has(item.id)} readOnly />
+                    </TableCell>
+                    <TableCell className="text-[13px] font-mono">
+                      <span className="block truncate" title={item.item_number}>{item.item_number}</span>
+                    </TableCell>
+                    <TableCell className="text-sm">{item.item_name}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.size}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.material}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.unit}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <DialogFooter className="flex items-center justify-between w-full">
+            <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+              <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 상세 입력 (2단계) ── */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedSupplier?.supplier_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData
+                ? "거래처 품번/품명과 기간별 단가를 수정합니다."
+                : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2 flex-1 overflow-y-auto">
+            {selectedItemsForDetail.map((item, idx) => {
+              const itemKey = item.item_number || item.id;
+              const mappingRows = itemMappings[itemKey] || [];
+              const prices = itemPrices[itemKey] || [];
+
+              return (
+                <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
+                  {/* 품목 헤더 */}
+                  <div className="px-5 py-3 bg-muted/30 border-b">
+                    <div className="font-bold">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
+                  </div>
+
+                  <div className="flex gap-4 p-5 items-stretch">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Tag className="w-3.5 h-3.5 text-primary" /> 거래처 품번/품명 관리
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 품번 추가
+                        </Button>
+                      </div>
+                      <div className="border-2 border-foreground/20 rounded-lg bg-background p-3 space-y-2 min-h-[200px] max-h-[350px] overflow-y-auto flex-1">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : (
+                          <DndContext
+                            sensors={dndSensors}
+                            collisionDetection={closestCenter}
+                            onDragEnd={(e) => handleMappingDragEnd(itemKey, e)}
+                          >
+                            <SortableContext items={mappingRows.map((r) => r._id)} strategy={verticalListSortingStrategy}>
+                              {mappingRows.map((mRow, mIdx) => (
+                                <SortableMappingRow key={mRow._id} id={mRow._id}>
+                                  <span className="text-xs text-muted-foreground/50 font-mono w-4 shrink-0 text-center">{mIdx + 1}</span>
+                                  <Input
+                                    value={mRow.supplier_item_code}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "supplier_item_code", e.target.value)}
+                                    placeholder="거래처 품번"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Input
+                                    value={mRow.supplier_item_name}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "supplier_item_name", e.target.value)}
+                                    placeholder="거래처 품명"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Button
+                                    variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                                    onClick={() => removeMappingRow(itemKey, mRow._id)}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                </SortableMappingRow>
+                              ))}
+                            </SortableContext>
+                          </DndContext>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Coins className="w-3.5 h-3.5 text-primary" /> 기간별 단가 설정
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3 flex-1 overflow-y-auto max-h-[350px]">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border-2 border-foreground/20 rounded-lg bg-background overflow-hidden">
+                            <div
+                              className="flex items-center justify-between px-4 py-2.5 cursor-pointer hover:bg-muted/50 transition-colors"
+                              onClick={() => setCollapsedPriceCards((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(price._id)) next.delete(price._id); else next.add(price._id);
+                                return next;
+                              })}
+                            >
+                              <div className="flex items-center gap-2">
+                                {collapsedPriceCards.has(price._id)
+                                  ? <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                                  : <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                                }
+                                <span className="text-[13px] font-semibold text-muted-foreground">단가 {pIdx + 1}</span>
+                                {collapsedPriceCards.has(price._id) && price.calculated_price && (
+                                  <span className="text-xs text-muted-foreground ml-2">
+                                    {price.start_date || "—"} ~ {price.end_date || "—"} · <span className="font-mono font-bold text-foreground">{Number(price.calculated_price).toLocaleString()}</span> {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                  </span>
+                                )}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                {prices.length > 1 && (
+                                  <Button
+                                    variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
+                                    onClick={(e) => { e.stopPropagation(); removePriceRow(itemKey, price._id); }}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                )}
+                              </div>
+                            </div>
+                            {!collapsedPriceCards.has(price._id) && <div className="px-4 pb-4 space-y-2.5">
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">시작일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.start_date}
+                                  onChange={(e) => {
+                                    const v = e.target.value;
+                                    updatePriceRow(itemKey, price._id, "start_date", v);
+                                    if (price.end_date && v > price.end_date) {
+                                      updatePriceRow(itemKey, price._id, "end_date", v);
+                                    }
+                                  }}
+                                  max={price.end_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <span className="text-xs text-muted-foreground mt-4">~</span>
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">종료일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.end_date}
+                                  onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                  min={price.start_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <div className="w-[80px]">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">&nbsp;</Label>
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="통화" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "base_price", raw);
+                                }}
+                                className="h-9 text-[13px] text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-9 text-[13px] text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-1.5 pt-2 border-t">
+                              <span className="text-[13px] text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-base font-mono">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                              {price.calculated_price && price.currency_code && (
+                                <span className="text-[13px] text-muted-foreground">
+                                  {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                </span>
+                              )}
+                            </div>
+                            </div>}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal
+          open={excelUploadOpen}
+          onOpenChange={(open) => {
+            setExcelUploadOpen(open);
+            if (!open) setExcelChainConfig(null);
+          }}
+          config={excelChainConfig}
+          onSuccess={() => {
+            fetchSuppliers();
+            const cid = selectedSupplierId;
+            setSelectedSupplierId(null);
+            setTimeout(() => setSelectedSupplierId(cid), 50);
+          }}
+        />
+      )}
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/quality/inspection/page.tsx b/frontend/app/(main)/COMPANY_7/quality/inspection/page.tsx
new file mode 100644
index 00000000..cacd9d02
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/quality/inspection/page.tsx
@@ -0,0 +1,1703 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Plus,
+  Trash2,
+  Save,
+  Loader2,
+  Pencil,
+  ClipboardCheck,
+  AlertTriangle,
+  Wrench,
+  Search,
+  Inbox,
+  Settings2,
+} from "lucide-react";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+/* ───── 테이블명 ───── */
+const INSPECTION_TABLE = "inspection_standard";
+
+const INSPECTION_COLUMNS = [
+  { key: "inspection_code", label: "검사코드" },
+  { key: "inspection_type", label: "검사유형" },
+  { key: "inspection_criteria", label: "검사기준" },
+  { key: "inspection_item", label: "검사항목" },
+  { key: "inspection_method", label: "검사방법" },
+  { key: "judgment_criteria", label: "판단기준" },
+  { key: "unit", label: "단위" },
+  { key: "apply_type", label: "적용구분" },
+  { key: "manager", label: "관리자" },
+];
+const DEFECT_TABLE = "defect_standard_mng";
+const EQUIPMENT_TABLE = "inspection_equipment_mng";
+
+/* ───── 카테고리 flatten ───── */
+const flattenCategories = (vals: any[]): { code: string; label: string }[] => {
+  const result: { code: string; label: string }[] = [];
+  for (const v of vals) {
+    result.push({ code: v.valueCode, label: v.valueLabel });
+    if (v.children?.length) result.push(...flattenCategories(v.children));
+  }
+  return result;
+};
+
+export default function InspectionManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-inspection", INSPECTION_TABLE, INSPECTION_COLUMNS);
+
+  const [activeTab, setActiveTab] = useState("inspection");
+
+  /* ───── 검사기준 ───── */
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspLoading, setInspLoading] = useState(false);
+  const [inspCount, setInspCount] = useState(0);
+  const [inspChecked, setInspChecked] = useState<string[]>([]);
+  const [inspModalOpen, setInspModalOpen] = useState(false);
+  const [inspEditMode, setInspEditMode] = useState(false);
+  const [inspForm, setInspForm] = useState<Record<string, any>>({});
+  const [inspSaving, setInspSaving] = useState(false);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  /* ───── 불량관리 ───── */
+  const [defects, setDefects] = useState<any[]>([]);
+  const [defLoading, setDefLoading] = useState(false);
+  const [defCount, setDefCount] = useState(0);
+  const [defChecked, setDefChecked] = useState<string[]>([]);
+  const [defModalOpen, setDefModalOpen] = useState(false);
+  const [defEditMode, setDefEditMode] = useState(false);
+  const [defForm, setDefForm] = useState<Record<string, any>>({});
+  const [defSaving, setDefSaving] = useState(false);
+  const [defKeyword, setDefKeyword] = useState("");
+
+  /* ───── 검사장비 ───── */
+  const [equipments, setEquipments] = useState<any[]>([]);
+  const [eqLoading, setEqLoading] = useState(false);
+  const [eqCount, setEqCount] = useState(0);
+  const [eqChecked, setEqChecked] = useState<string[]>([]);
+  const [eqModalOpen, setEqModalOpen] = useState(false);
+  const [eqEditMode, setEqEditMode] = useState(false);
+  const [eqForm, setEqForm] = useState<Record<string, any>>({});
+  const [eqSaving, setEqSaving] = useState(false);
+  const [eqKeyword, setEqKeyword] = useState("");
+
+  /* ───── 채번 ───── */
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  /* ───── 카테고리 옵션 ───── */
+  const [catOptions, setCatOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [userOptions, setUserOptions] = useState<{ code: string; label: string }[]>([]);
+
+  /* ═══════════════════ 카테고리 로드 ═══════════════════ */
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const catList = [
+        { table: INSPECTION_TABLE, col: "inspection_type" },
+        { table: INSPECTION_TABLE, col: "apply_type" },
+        { table: INSPECTION_TABLE, col: "inspection_method" },
+        { table: INSPECTION_TABLE, col: "judgment_criteria" },
+        { table: INSPECTION_TABLE, col: "unit" },
+        { table: DEFECT_TABLE, col: "defect_type" },
+        { table: DEFECT_TABLE, col: "severity" },
+        { table: DEFECT_TABLE, col: "inspection_type" },
+        { table: DEFECT_TABLE, col: "is_active" },
+        { table: EQUIPMENT_TABLE, col: "equipment_type" },
+        { table: EQUIPMENT_TABLE, col: "equipment_status" },
+      ];
+      await Promise.all(
+        catList.map(async ({ table, col }) => {
+          try {
+            const res = await apiClient.get(`/table-categories/${table}/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              optMap[`${table}.${col}`] = flattenCategories(res.data.data);
+            }
+          } catch {
+            /* skip */
+          }
+        }),
+      );
+      setCatOptions(optMap);
+      // 사용자 목록 로드
+      try {
+        const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
+          page: 1,
+          size: 500,
+          autoFilter: true,
+        });
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        setUserOptions(
+          users.map((u: any) => ({
+            code: u.user_id || u.id,
+            label: `${u.user_name || u.name || u.user_id}${u.dept_name ? ` (${u.dept_name})` : ""}`,
+          })),
+        );
+      } catch {
+        /* skip */
+      }
+    };
+    load();
+  }, []);
+
+  const getCatLabel = (table: string, col: string, code: string) => {
+    if (!code) return "";
+    const opts = catOptions[`${table}.${col}`];
+    if (!opts) return code;
+    // 쉼표 구분 다중 코드 지원
+    if (code.includes(",")) {
+      return code
+        .split(",")
+        .filter(Boolean)
+        .map((c) => opts.find((o) => o.code === c)?.label || c)
+        .join(", ");
+    }
+    return opts.find((o) => o.code === code)?.label || code;
+  };
+
+  const inspTableColumns = useMemo<EDataTableColumn[]>(() => {
+    return ts.visibleColumns.map((col) => {
+      const base: EDataTableColumn = { key: col.key, label: col.label };
+      if (["inspection_type", "inspection_method", "judgment_criteria", "unit", "apply_type"].includes(col.key)) {
+        base.render = (v: any, row: any) => getCatLabel(INSPECTION_TABLE, col.key, row[col.key]);
+      }
+      return base;
+    });
+  }, [ts.visibleColumns, catOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  // 다중값 컬럼 (쉼표 구분 저장) — 서버 equals 대신 contains 사용
+  const MULTI_VALUE_COLUMNS = ["inspection_type"];
+
+  const fetchInspections = useCallback(async () => {
+    setInspLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({
+        columnName: f.columnName,
+        operator: MULTI_VALUE_COLUMNS.includes(f.columnName) ? "contains" : f.operator,
+        value: f.value,
+      }));
+      const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setInspections(rows);
+      setInspCount(rows.length);
+    } catch {
+      toast.error("검사기준 조회에 실패했어요");
+    } finally {
+      setInspLoading(false);
+    }
+  }, [searchFilters]);
+
+  const fetchDefects = useCallback(async () => {
+    setDefLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DEFECT_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setDefects(rows);
+      setDefCount(rows.length);
+    } catch {
+      toast.error("불량관리 조회에 실패했어요");
+    } finally {
+      setDefLoading(false);
+    }
+  }, []);
+
+  const fetchEquipments = useCallback(async () => {
+    setEqLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setEquipments(rows);
+      setEqCount(rows.length);
+    } catch {
+      toast.error("검사장비 조회에 실패했어요");
+    } finally {
+      setEqLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchInspections();
+  }, [fetchInspections]);
+  useEffect(() => {
+    fetchDefects();
+    fetchEquipments();
+  }, []);
+
+  /* ───── 클라이언트 필터 ───── */
+  const filteredDefects = defKeyword.trim()
+    ? defects.filter(
+        (r) =>
+          (r.defect_name || "").toLowerCase().includes(defKeyword.toLowerCase()) ||
+          (r.defect_type || "").toLowerCase().includes(defKeyword.toLowerCase()),
+      )
+    : defects;
+
+  const filteredEquipments = eqKeyword.trim()
+    ? equipments.filter(
+        (r) =>
+          (r.equipment_name || "").toLowerCase().includes(eqKeyword.toLowerCase()) ||
+          (r.model_name || "").toLowerCase().includes(eqKeyword.toLowerCase()),
+      )
+    : equipments;
+
+  /* ═══════════════════ 검사기준 CRUD ═══════════════════ */
+  const openInspCreate = async () => {
+    setInspForm({});
+    setInspEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setInspModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${INSPECTION_TABLE}/inspection_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+  const openInspEdit = (row: any) => {
+    setInspForm({ ...row });
+    setInspEditMode(true);
+    setInspModalOpen(true);
+  };
+  const saveInspection = async () => {
+    if (!numberingRuleId && !inspForm.inspection_code) {
+      toast.error("검사코드는 필수예요");
+      return;
+    }
+    if (!inspForm.inspection_type) {
+      toast.error("유형을 1개 이상 선택해주세요");
+      return;
+    }
+    if (!inspForm.inspection_criteria) {
+      toast.error("검사기준은 필수예요");
+      return;
+    }
+    if (!inspForm.inspection_item) {
+      toast.error("검사항목은 필수예요");
+      return;
+    }
+    if (!inspForm.judgment_criteria) {
+      toast.error("판단기준은 필수예요");
+      return;
+    }
+    setInspSaving(true);
+    try {
+      let finalCode = inspForm.inspection_code || "";
+      if (!inspEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setInspSaving(false);
+          return;
+        }
+      }
+      if (inspEditMode) {
+        await apiClient.put(`/table-management/tables/${INSPECTION_TABLE}/edit`, {
+          originalData: { id: inspForm.id },
+          updatedData: inspForm,
+        });
+        toast.success("검사기준을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          ...inspForm,
+          inspection_code: finalCode,
+        });
+        toast.success("검사기준을 등록했어요");
+      }
+      setInspModalOpen(false);
+      fetchInspections();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setInspSaving(false);
+    }
+  };
+  const deleteInspections = async () => {
+    if (inspChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("검사기준 삭제", {
+      description: `선택한 ${inspChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${INSPECTION_TABLE}/delete`, {
+        data: inspChecked.map((id) => ({ id })),
+      });
+      toast.success(`${inspChecked.length}건을 삭제했어요`);
+      setInspChecked([]);
+      fetchInspections();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ 불량관리 CRUD ═══════════════════ */
+  const openDefCreate = async () => {
+    setDefForm({});
+    setDefEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setDefModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DEFECT_TABLE}/defect_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+  const openDefEdit = (row: any) => {
+    setDefForm({ ...row });
+    setDefEditMode(true);
+    setDefModalOpen(true);
+  };
+  const saveDefect = async () => {
+    if (!numberingRuleId && !defForm.defect_code) {
+      toast.error("불량코드는 필수예요");
+      return;
+    }
+    if (!defForm.defect_type) {
+      toast.error("불량유형은 필수예요");
+      return;
+    }
+    if (!defForm.defect_name) {
+      toast.error("불량명은 필수예요");
+      return;
+    }
+    if (!defForm.severity) {
+      toast.error("심각도는 필수예요");
+      return;
+    }
+    if (!defForm.defect_content) {
+      toast.error("불량내용은 필수예요");
+      return;
+    }
+    if (!defForm.inspection_type) {
+      toast.error("검사유형을 1개 이상 선택해주세요");
+      return;
+    }
+    setDefSaving(true);
+    try {
+      let finalCode = defForm.defect_code || "";
+      if (!defEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setDefSaving(false);
+          return;
+        }
+      }
+      if (defEditMode) {
+        await apiClient.put(`/table-management/tables/${DEFECT_TABLE}/edit`, {
+          originalData: { id: defForm.id },
+          updatedData: defForm,
+        });
+        toast.success("불량유형을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${DEFECT_TABLE}/add`, { id: crypto.randomUUID(), ...defForm, defect_code: finalCode });
+        toast.success("불량유형을 등록했어요");
+      }
+      setDefModalOpen(false);
+      fetchDefects();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setDefSaving(false);
+    }
+  };
+  const deleteDefects = async () => {
+    if (defChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("불량유형 삭제", {
+      description: `선택한 ${defChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DEFECT_TABLE}/delete`, {
+        data: defChecked.map((id) => ({ id })),
+      });
+      toast.success(`${defChecked.length}건을 삭제했어요`);
+      setDefChecked([]);
+      fetchDefects();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ 검사장비 CRUD ═══════════════════ */
+  const openEqCreate = async () => {
+    setEqForm({
+      calibration_period: "12",
+      equipment_status: "NORMAL",
+    });
+    setEqEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setEqModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${EQUIPMENT_TABLE}/equipment_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      } else {
+        // 채번 규칙 없으면 기존 수동 채번 fallback
+        const maxNum =
+          equipments
+            .map((e: any) => e.equipment_code || "")
+            .filter((c: string) => /^EQP-\d+$/.test(c))
+            .map((c: string) => parseInt(c.replace("EQP-", ""), 10))
+            .sort((a: number, b: number) => b - a)[0] || 0;
+        setEqForm((p) => ({ ...p, equipment_code: `EQP-${String(maxNum + 1).padStart(3, "0")}` }));
+      }
+    } catch {
+      // 채번 규칙 조회 실패 시 기존 수동 채번 fallback
+      const maxNum =
+        equipments
+          .map((e: any) => e.equipment_code || "")
+          .filter((c: string) => /^EQP-\d+$/.test(c))
+          .map((c: string) => parseInt(c.replace("EQP-", ""), 10))
+          .sort((a: number, b: number) => b - a)[0] || 0;
+      setEqForm((p) => ({ ...p, equipment_code: `EQP-${String(maxNum + 1).padStart(3, "0")}` }));
+    }
+  };
+  const openEqEdit = (row: any) => {
+    setEqForm({ ...row });
+    setEqEditMode(true);
+    setEqModalOpen(true);
+  };
+  const saveEquipment = async () => {
+    if (!numberingRuleId && !eqForm.equipment_code) {
+      toast.error("장비코드는 필수예요");
+      return;
+    }
+    if (!eqForm.equipment_name) {
+      toast.error("장비명은 필수예요");
+      return;
+    }
+    if (!eqForm.equipment_type) {
+      toast.error("장비유형은 필수예요");
+      return;
+    }
+    setEqSaving(true);
+    try {
+      let finalCode = eqForm.equipment_code || "";
+      if (!eqEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setEqSaving(false);
+          return;
+        }
+      }
+      if (eqEditMode) {
+        await apiClient.put(`/table-management/tables/${EQUIPMENT_TABLE}/edit`, {
+          originalData: { id: eqForm.id },
+          updatedData: eqForm,
+        });
+        toast.success("검사장비를 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/add`, { id: crypto.randomUUID(), ...eqForm, equipment_code: finalCode });
+        toast.success("검사장비를 등록했어요");
+      }
+      setEqModalOpen(false);
+      fetchEquipments();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setEqSaving(false);
+    }
+  };
+  const deleteEquipments = async () => {
+    if (eqChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("검사장비 삭제", {
+      description: `선택한 ${eqChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${EQUIPMENT_TABLE}/delete`, {
+        data: eqChecked.map((id) => ({ id })),
+      });
+      toast.success(`${eqChecked.length}건을 삭제했어요`);
+      setEqChecked([]);
+      fetchEquipments();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="bg-card rounded-lg border">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <div className="border-b px-3">
+            <TabsList className="h-auto gap-0 bg-transparent p-0">
+              <TabsTrigger
+                value="inspection"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <ClipboardCheck className="mr-2 h-4 w-4" />
+                검사기준
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {inspCount}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="defect"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <AlertTriangle className="mr-2 h-4 w-4" />
+                불량관리
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {defCount}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="equipment"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <Wrench className="mr-2 h-4 w-4" />
+                검사장비
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {eqCount}
+                </Badge>
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* ──── 검사기준 탭 ──── */}
+          <TabsContent value="inspection" className="mt-0 p-3">
+            <div className="mb-3">
+              <DynamicSearchFilter
+                tableName={INSPECTION_TABLE}
+                filterId="c16-inspection"
+                onFilterChange={setSearchFilters}
+                externalFilterConfig={ts.filterConfig}
+                dataCount={inspCount}
+                extraActions={
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" onClick={openInspCreate}>
+                      <Plus className="mr-1 h-4 w-4" />
+                      등록
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        const sel = inspections.find((r) => inspChecked.includes(r.id));
+                        if (sel) openInspEdit(sel);
+                        else toast.error("수정할 항목을 선택해주세요");
+                      }}
+                    >
+                      <Pencil className="mr-1 h-4 w-4" />
+                      수정
+                    </Button>
+                    <Button size="sm" variant="destructive" onClick={deleteInspections}>
+                      <Trash2 className="mr-1 h-4 w-4" />
+                      삭제
+                    </Button>
+                    <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                      <Settings2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                }
+              />
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <EDataTable
+                columns={inspTableColumns}
+                data={ts.groupData(inspections)}
+                loading={inspLoading}
+                emptyMessage="등록된 검사기준이 없어요"
+                showCheckbox={true}
+                checkedIds={inspChecked}
+                onCheckedChange={setInspChecked}
+                onRowDoubleClick={(row) => openInspEdit(row)}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-inspection-main"
+              />
+            </div>
+          </TabsContent>
+
+          {/* ──── 불량관리 탭 ──── */}
+          <TabsContent value="defect" className="mt-0 p-3">
+            <div className="mb-3 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="text-muted-foreground absolute top-2 left-2.5 h-3.5 w-3.5" />
+                  <Input
+                    className="h-8 w-56 pl-8 text-sm"
+                    placeholder="불량명 검색..."
+                    value={defKeyword}
+                    onChange={(e) => setDefKeyword(e.target.value)}
+                  />
+                </div>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">
+                  {filteredDefects.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openDefCreate}>
+                  <Plus className="mr-1 h-4 w-4" />
+                  등록
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const sel = defects.find((r) => defChecked.includes(r.id));
+                    if (sel) openDefEdit(sel);
+                    else toast.error("수정할 항목을 선택해주세요");
+                  }}
+                >
+                  <Pencil className="mr-1 h-4 w-4" />
+                  수정
+                </Button>
+                <Button size="sm" variant="destructive" onClick={deleteDefects}>
+                  <Trash2 className="mr-1 h-4 w-4" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={filteredDefects.length > 0 && defChecked.length === filteredDefects.length}
+                        onCheckedChange={(v) => setDefChecked(v ? filteredDefects.map((r) => r.id) : [])}
+                      />
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량코드
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량내용
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      심각도
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      검사유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      적용대상
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      사용여부
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      등록일
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      관리자
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      비고
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {defLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={12} className="py-8 text-center">
+                        <Loader2 className="text-muted-foreground mx-auto h-5 w-5 animate-spin" />
+                      </TableCell>
+                    </TableRow>
+                  ) : filteredDefects.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={12} className="text-muted-foreground py-10 text-center">
+                        <Inbox className="mx-auto mb-2 h-8 w-8 opacity-40" />
+                        <p className="text-sm">등록된 불량유형이 없어요</p>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredDefects.map((row) => {
+                      const severityLabel = getCatLabel(DEFECT_TABLE, "severity", row.severity);
+                      const severityColor =
+                        severityLabel === "치명적"
+                          ? "destructive"
+                          : severityLabel === "심각"
+                            ? "destructive"
+                            : severityLabel === "보통"
+                              ? "secondary"
+                              : "outline";
+                      return (
+                        <TableRow
+                          key={row.id}
+                          className={cn("cursor-pointer", defChecked.includes(row.id) && "bg-primary/5")}
+                          onClick={() =>
+                            setDefChecked((prev) =>
+                              prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id],
+                            )
+                          }
+                          onDoubleClick={() => openDefEdit(row)}
+                        >
+                          <TableCell onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                              checked={defChecked.includes(row.id)}
+                              onCheckedChange={(v) =>
+                                setDefChecked((prev) => (v ? [...prev, row.id] : prev.filter((id) => id !== row.id)))
+                              }
+                            />
+                          </TableCell>
+                          <TableCell className="font-semibold">{row.defect_code || "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant="secondary" className="text-[10px]">
+                              {getCatLabel(DEFECT_TABLE, "defect_type", row.defect_type)}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>{row.defect_name || "-"}</TableCell>
+                          <TableCell className="text-muted-foreground max-w-[200px] truncate">
+                            {row.defect_content || "-"}
+                          </TableCell>
+                          <TableCell>
+                            <Badge variant={severityColor as any} className="text-[10px]">
+                              {severityLabel || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-wrap gap-1">
+                              {row.inspection_type
+                                ? row.inspection_type
+                                    .split(",")
+                                    .filter(Boolean)
+                                    .map((c: string) => (
+                                      <Badge key={c} variant="outline" className="text-[10px]">
+                                        {getCatLabel(DEFECT_TABLE, "inspection_type", c)}
+                                      </Badge>
+                                    ))
+                                : "-"}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-wrap gap-1">
+                              {row.apply_target
+                                ? row.apply_target
+                                    .split(",")
+                                    .filter(Boolean)
+                                    .map((t: string) => (
+                                      <Badge key={t} variant="outline" className="text-[10px]">
+                                        {t}
+                                      </Badge>
+                                    ))
+                                : "-"}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <Badge
+                              variant={
+                                getCatLabel(DEFECT_TABLE, "is_active", row.is_active) === "사용"
+                                  ? "default"
+                                  : "secondary"
+                              }
+                              className="text-[10px]"
+                            >
+                              {getCatLabel(DEFECT_TABLE, "is_active", row.is_active) || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-muted-foreground">
+                            {row.reg_date || (row.created_date ? row.created_date.slice(0, 10) : "-")}
+                          </TableCell>
+                          <TableCell>{row.manager_id || "-"}</TableCell>
+                          <TableCell className="text-muted-foreground">{row.remarks || "-"}</TableCell>
+                        </TableRow>
+                      );
+                    })
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+
+          {/* ──── 검사장비 탭 ──── */}
+          <TabsContent value="equipment" className="mt-0 p-3">
+            <div className="mb-3 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="text-muted-foreground absolute top-2 left-2.5 h-3.5 w-3.5" />
+                  <Input
+                    className="h-8 w-56 pl-8 text-sm"
+                    placeholder="장비명 검색..."
+                    value={eqKeyword}
+                    onChange={(e) => setEqKeyword(e.target.value)}
+                  />
+                </div>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">
+                  {filteredEquipments.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openEqCreate}>
+                  <Plus className="mr-1 h-4 w-4" />
+                  등록
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const sel = equipments.find((r) => eqChecked.includes(r.id));
+                    if (sel) openEqEdit(sel);
+                    else toast.error("수정할 항목을 선택해주세요");
+                  }}
+                >
+                  <Pencil className="mr-1 h-4 w-4" />
+                  수정
+                </Button>
+                <Button size="sm" variant="destructive" onClick={deleteEquipments}>
+                  <Trash2 className="mr-1 h-4 w-4" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={filteredEquipments.length > 0 && eqChecked.length === filteredEquipments.length}
+                        onCheckedChange={(v) => setEqChecked(v ? filteredEquipments.map((r) => r.id) : [])}
+                      />
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비코드
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      모델명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      제조사
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      설치장소
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      최근교정일
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      교정주기(개월)
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비상태
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      담당자
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {eqLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={11} className="py-8 text-center">
+                        <Loader2 className="text-muted-foreground mx-auto h-5 w-5 animate-spin" />
+                      </TableCell>
+                    </TableRow>
+                  ) : filteredEquipments.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={11} className="text-muted-foreground py-10 text-center">
+                        <Inbox className="mx-auto mb-2 h-8 w-8 opacity-40" />
+                        <p className="text-sm">등록된 검사장비가 없어요</p>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredEquipments.map((row) => {
+                      const statusLabel = getCatLabel(EQUIPMENT_TABLE, "equipment_status", row.equipment_status);
+                      const statusColor =
+                        statusLabel === "정상" ? "default" : statusLabel === "폐기" ? "destructive" : "secondary";
+                      return (
+                        <TableRow
+                          key={row.id}
+                          className={cn("cursor-pointer", eqChecked.includes(row.id) && "bg-primary/5")}
+                          onClick={() =>
+                            setEqChecked((prev) =>
+                              prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id],
+                            )
+                          }
+                          onDoubleClick={() => openEqEdit(row)}
+                        >
+                          <TableCell onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                              checked={eqChecked.includes(row.id)}
+                              onCheckedChange={(v) =>
+                                setEqChecked((prev) => (v ? [...prev, row.id] : prev.filter((id) => id !== row.id)))
+                              }
+                            />
+                          </TableCell>
+                          <TableCell className="text-primary font-semibold">{row.equipment_code || "-"}</TableCell>
+                          <TableCell>{row.equipment_name || "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant="secondary" className="text-[10px]">
+                              {getCatLabel(EQUIPMENT_TABLE, "equipment_type", row.equipment_type) || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>{row.model_name || "-"}</TableCell>
+                          <TableCell>{row.manufacturer || "-"}</TableCell>
+                          <TableCell>{row.installation_location || "-"}</TableCell>
+                          <TableCell>{row.last_calibration_date || "-"}</TableCell>
+                          <TableCell>{row.calibration_period ? `${row.calibration_period}개월` : "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant={statusColor as any} className="text-[10px]">
+                              {statusLabel || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>
+                            {userOptions.find((u) => u.code === row.manager_id)?.label || row.manager_id || "-"}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* ═══════════════════ 검사기준 모달 ═══════════════════ */}
+      <Dialog open={inspModalOpen} onOpenChange={setInspModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[640px]">
+          <DialogHeader>
+            <DialogTitle>{inspEditMode ? "검사기준 수정" : "검사기준 등록"}</DialogTitle>
+            <DialogDescription>검사기준 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            {/* 검사코드 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사코드 <span className="text-destructive">*</span>
+              </Label>
+              {!inspEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : inspEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={inspForm.inspection_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={inspForm.inspection_code || ""}
+                  onChange={(e) => setInspForm((p) => ({ ...p, inspection_code: e.target.value }))}
+                  placeholder="검사코드 입력"
+                />
+              )}
+            </div>
+            {/* 유형 (다중선택) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                유형 <span className="text-destructive">*</span> (다중선택)
+              </Label>
+              <div className="flex flex-wrap gap-3 pt-1">
+                {(catOptions[`${INSPECTION_TABLE}.inspection_type`] || []).map((o) => {
+                  const types: string[] = inspForm.inspection_type
+                    ? inspForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  const checked = types.includes(o.code);
+                  return (
+                    <div key={o.code} className="flex items-center gap-1.5">
+                      <Checkbox
+                        checked={checked}
+                        onCheckedChange={(v) => {
+                          const next = v ? [...types, o.code] : types.filter((t) => t !== o.code);
+                          setInspForm((p) => ({ ...p, inspection_type: next.join(",") }));
+                        }}
+                      />
+                      <Label className="cursor-pointer text-sm">{o.label}</Label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            {/* 검사기준 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사기준 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={inspForm.inspection_criteria || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, inspection_criteria: e.target.value }))}
+                placeholder="검사기준 입력"
+              />
+            </div>
+            {/* 기준상세 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">기준상세</Label>
+              <Input
+                className="h-9"
+                value={inspForm.criteria_detail || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, criteria_detail: e.target.value }))}
+                placeholder="기준상세 입력"
+              />
+            </div>
+            {/* 검사항목 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사항목 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={inspForm.inspection_item || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, inspection_item: e.target.value }))}
+                placeholder="검사항목 입력"
+              />
+            </div>
+            {/* 검사방법 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">검사방법</Label>
+              <Select
+                value={inspForm.inspection_method || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, inspection_method: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.inspection_method`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 판단기준 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                판단기준 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={inspForm.judgment_criteria || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, judgment_criteria: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.judgment_criteria`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 단위 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">단위</Label>
+              <Select
+                value={inspForm.unit || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, unit: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.unit`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 적용구분 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">적용구분</Label>
+              <Select
+                value={inspForm.apply_type || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, apply_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.apply_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">관리자</Label>
+              <Select
+                value={inspForm.manager || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, manager: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 비고 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                value={inspForm.remark || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, remark: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setInspModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveInspection} disabled={inspSaving}>
+              {inspSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 불량관리 모달 ═══════════════════ */}
+      <Dialog open={defModalOpen} onOpenChange={setDefModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[640px]">
+          <DialogHeader>
+            <DialogTitle>{defEditMode ? "불량유형 수정" : "불량유형 등록"}</DialogTitle>
+            <DialogDescription>불량유형 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            {/* 불량코드 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량코드 <span className="text-destructive">*</span>
+              </Label>
+              {!defEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : defEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={defForm.defect_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={defForm.defect_code || ""}
+                  onChange={(e) => setDefForm((p) => ({ ...p, defect_code: e.target.value }))}
+                  placeholder="불량코드 입력"
+                />
+              )}
+            </div>
+            {/* 불량유형 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={defForm.defect_type || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, defect_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.defect_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 불량명 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={defForm.defect_name || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, defect_name: e.target.value }))}
+                placeholder="불량명 입력"
+              />
+            </div>
+            {/* 심각도 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                심각도 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={defForm.severity || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, severity: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.severity`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 불량내용 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량내용 <span className="text-destructive">*</span>
+              </Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={defForm.defect_content || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, defect_content: e.target.value }))}
+                placeholder="불량 상세 내용 및 정의를 입력하세요"
+                rows={3}
+              />
+            </div>
+            {/* 검사유형 (다중선택) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사유형 <span className="text-destructive">*</span> (다중선택)
+              </Label>
+              <div className="flex flex-wrap gap-3 rounded-md border p-3">
+                {(catOptions[`${DEFECT_TABLE}.inspection_type`] || []).map((o) => {
+                  const types: string[] = defForm.inspection_type
+                    ? defForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  const checked = types.includes(o.code);
+                  return (
+                    <div key={o.code} className="flex items-center gap-1.5">
+                      <Checkbox
+                        checked={checked}
+                        onCheckedChange={(v) => {
+                          const next = v ? [...types, o.code] : types.filter((t) => t !== o.code);
+                          setDefForm((p) => ({ ...p, inspection_type: next.join(","), apply_target: "" }));
+                        }}
+                      />
+                      <Label className="cursor-pointer text-sm">{o.label}</Label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            {/* 적용대상 (다중선택, 검사유형별 동적) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">적용대상 (다중선택)</Label>
+              <div className="min-h-[60px] rounded-md border p-3">
+                {(() => {
+                  const selectedTypes = defForm.inspection_type
+                    ? defForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  if (selectedTypes.length === 0)
+                    return <p className="text-muted-foreground text-xs">검사유형을 먼저 선택하세요</p>;
+                  const typeTargetMap: Record<string, string[]> = {};
+                  const defInspOpts = catOptions[`${DEFECT_TABLE}.inspection_type`] || [];
+                  for (const code of selectedTypes) {
+                    const label = defInspOpts.find((o) => o.code === code)?.label || "";
+                    if (label.includes("수입"))
+                      typeTargetMap[label] = ["구매입고", "외주입고", "반품입고", "무상입고", "기타입고"];
+                    else if (label.includes("공정"))
+                      typeTargetMap[label] = ["가공", "조립", "도장", "열처리", "표면처리", "용접"];
+                    else if (label.includes("출하"))
+                      typeTargetMap[label] = ["국내출하", "수출출하", "반품출하", "샘플출하"];
+                    else if (label.includes("최종")) typeTargetMap[label] = ["완제품", "반제품", "부품"];
+                  }
+                  const targets: string[] = defForm.apply_target ? defForm.apply_target.split(",").filter(Boolean) : [];
+                  return Object.entries(typeTargetMap).map(([typeName, opts]) => (
+                    <div key={typeName} className="mb-2 last:mb-0">
+                      <p className="mb-2 border-b pb-1 text-xs font-semibold">{typeName}</p>
+                      <div className="flex flex-wrap gap-3">
+                        {opts.map((t) => (
+                          <div key={t} className="flex items-center gap-1.5">
+                            <Checkbox
+                              checked={targets.includes(t)}
+                              onCheckedChange={(v) => {
+                                const next = v ? [...targets, t] : targets.filter((x) => x !== t);
+                                setDefForm((p) => ({ ...p, apply_target: next.join(",") }));
+                              }}
+                            />
+                            <Label className="cursor-pointer text-sm">{t}</Label>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ));
+                })()}
+              </div>
+            </div>
+            {/* 사용여부 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">사용여부</Label>
+              <Select
+                value={defForm.is_active || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.is_active`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">관리자</Label>
+              <Select
+                value={defForm.manager_id || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, manager_id: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 비고 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={defForm.remarks || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, remarks: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDefModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveDefect} disabled={defSaving}>
+              {defSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 검사장비 모달 ═══════════════════ */}
+      <Dialog open={eqModalOpen} onOpenChange={setEqModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[720px]">
+          <DialogHeader>
+            <DialogTitle>{eqEditMode ? "장비 수정" : "장비 등록"}</DialogTitle>
+            <DialogDescription>검사장비 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-3 gap-4">
+            {/* Row 1: 장비코드, 장비명, 장비유형 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비코드 <span className="text-destructive">*</span>
+              </Label>
+              {!eqEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : eqEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={eqForm.equipment_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={eqForm.equipment_code || ""}
+                  onChange={(e) => setEqForm((p) => ({ ...p, equipment_code: e.target.value }))}
+                  placeholder="장비코드"
+                />
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={eqForm.equipment_name || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, equipment_name: e.target.value }))}
+                placeholder="장비명 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={eqForm.equipment_type || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, equipment_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="장비유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">장비유형 선택</SelectItem>
+                  {(catOptions[`${EQUIPMENT_TABLE}.equipment_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* Row 2: 모델명, 제조사, 시리얼번호 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">모델명</Label>
+              <Input
+                className="h-9"
+                value={eqForm.model_name || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, model_name: e.target.value }))}
+                placeholder="모델명 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">제조사</Label>
+              <Input
+                className="h-9"
+                value={eqForm.manufacturer || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, manufacturer: e.target.value }))}
+                placeholder="제조사 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">시리얼번호</Label>
+              <Input
+                className="h-9"
+                value={eqForm.serial_number || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, serial_number: e.target.value }))}
+                placeholder="시리얼번호 입력"
+              />
+            </div>
+            {/* Row 3: 설치장소, 최근교정일, 교정주기 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">설치장소</Label>
+              <Input
+                className="h-9"
+                value={eqForm.installation_location || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, installation_location: e.target.value }))}
+                placeholder="설치장소 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">최근교정일</Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={eqForm.last_calibration_date || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, last_calibration_date: e.target.value }))}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">교정주기 (개월)</Label>
+              <Input
+                type="number"
+                className="h-9"
+                value={eqForm.calibration_period || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, calibration_period: e.target.value }))}
+                placeholder="12"
+              />
+            </div>
+            {/* Row 4: 장비상태, 담당자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">장비상태</Label>
+              <Select
+                value={eqForm.equipment_status || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, equipment_status: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="장비상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">장비상태 선택</SelectItem>
+                  {(catOptions[`${EQUIPMENT_TABLE}.equipment_status`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">담당자</Label>
+              <Select
+                value={eqForm.manager_id || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, manager_id: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="담당자 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">담당자 선택</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div />
+            {/* Row 5: 비고 (full width) */}
+            <div className="col-span-3 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={eqForm.remarks || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, remarks: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEqModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveEquipment} disabled={eqSaving}>
+              {eqSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/quality/item-inspection/page.tsx b/frontend/app/(main)/COMPANY_7/quality/item-inspection/page.tsx
new file mode 100644
index 00000000..2c0e1338
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/quality/item-inspection/page.tsx
@@ -0,0 +1,733 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, Pencil, Inbox, Settings2, Search, ChevronDown,
+} from "lucide-react";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const TABLE_NAME = "item_inspection_info";
+
+const GRID_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "inspection_type", label: "검사유형" },
+  { key: "item_count", label: "항목수" },
+  { key: "is_active", label: "사용여부" },
+];
+const ITEM_TABLE = "item_info";
+const INSPECTION_TABLE = "inspection_standard";
+
+const INSPECTION_TYPES = [
+  { key: "incoming_inspection", label: "수입검사", matchLabels: ["수입검사", "입고검사", "수입", "입고"] },
+  { key: "outgoing_inspection", label: "출하검사", matchLabels: ["출하검사", "출고검사", "출하", "출고"] },
+  { key: "process_inspection", label: "공정검사", matchLabels: ["공정검사", "공정"] },
+  { key: "final_inspection", label: "최종검사", matchLabels: ["최종검사", "최종", "완제품검사"] },
+] as const;
+
+type InspectionRow = {
+  id: string;
+  inspection_standard_id: string;
+  inspection_detail: string;
+  inspection_method: string;
+  apply_process: string;
+  acceptance_criteria: string;
+  is_required: boolean;
+};
+
+export default function ItemInspectionInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-item-inspection", TABLE_NAME, GRID_COLUMNS);
+
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [form, setForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  /* FK 옵션 */
+  const [itemOptions, setItemOptions] = useState<{ code: string; name: string; item_type: string; unit: string }[]>([]);
+  const [inspOptions, setInspOptions] = useState<{ code: string; label: string; detail: string; method: string; types: string[] }[]>([]);
+  const [inspTypeCatOptions, setInspTypeCatOptions] = useState<{ code: string; label: string }[]>([]);
+  const [userOptions, setUserOptions] = useState<{ code: string; label: string }[]>([]);
+
+  /* 검사유형별 검사항목 rows */
+  const [inspectionRows, setInspectionRows] = useState<Record<string, InspectionRow[]>>({});
+  const [collapsedTypes, setCollapsedTypes] = useState<Record<string, boolean>>({});
+
+  /* 품목 선택 모달 */
+  const [itemModalOpen, setItemModalOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [filteredItems, setFilteredItems] = useState<typeof itemOptions>([]);
+
+  /* ═══════════════════ FK 옵션 로드 ═══════════════════ */
+  useEffect(() => {
+    const loadOptions = async () => {
+      try {
+        const [itemRes, inspRes, userRes] = await Promise.all([
+          apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, { page: 1, size: 500, autoFilter: true }),
+          apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, { page: 1, size: 500, autoFilter: true }),
+          apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true }),
+        ]);
+        const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+        setItemOptions(items.map((r: any) => ({
+          code: r.item_number || r.item_code || "",
+          name: r.item_name || "",
+          item_type: r.type || r.item_type || "",
+          unit: r.unit || "",
+        })));
+
+        const insps = inspRes.data?.data?.data || inspRes.data?.data?.rows || [];
+        setInspOptions(insps.map((r: any) => ({
+          code: r.id,
+          label: r.inspection_criteria || r.inspection_standard || r.id,
+          detail: r.inspection_item || r.inspection_criteria || "",
+          method: r.inspection_method || "",
+          types: r.inspection_type ? r.inspection_type.split(",").filter(Boolean) : [],
+        })));
+
+        // 검사유형 카테고리 값 로드 (코드→라벨 매핑용)
+        try {
+          const catRes = await apiClient.get(`/table-categories/${INSPECTION_TABLE}/inspection_type/values`);
+          const flatCats: { code: string; label: string }[] = [];
+          const flatten = (arr: any[]) => { for (const v of arr) { flatCats.push({ code: v.valueCode, label: v.valueLabel }); if (v.children?.length) flatten(v.children); } };
+          if (catRes.data?.data?.length) flatten(catRes.data.data);
+          setInspTypeCatOptions(flatCats);
+        } catch { /* skip */ }
+
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        setUserOptions(users.map((u: any) => ({
+          code: u.user_id || u.id,
+          label: `${u.user_name || u.name || u.user_id}${u.dept_name ? ` (${u.dept_name})` : ""}`,
+        })));
+      } catch { /* skip */ }
+    };
+    loadOptions();
+  }, []);
+
+  /* ═══════════════════ 품목 선택 모달 ═══════════════════ */
+  const openItemModal = () => {
+    setItemSearchKeyword("");
+    setFilteredItems(itemOptions);
+    setItemModalOpen(true);
+  };
+
+  const handleItemSearch = () => {
+    const kw = itemSearchKeyword.trim().toLowerCase();
+    if (!kw) { setFilteredItems(itemOptions); return; }
+    setFilteredItems(itemOptions.filter(o =>
+      o.code.toLowerCase().includes(kw) || o.name.toLowerCase().includes(kw)
+    ));
+  };
+
+  const selectItem = (item: typeof itemOptions[0]) => {
+    setForm(p => ({ ...p, item_code: item.code, item_name: item.name }));
+    setItemModalOpen(false);
+  };
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setData(rows);
+      setTotalCount(rows.length);
+    } catch {
+      toast.error("품목검사정보 조회에 실패했어요");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => { fetchData(); }, [fetchData]);
+
+  // item_code별 그룹핑
+  const groupedData = useMemo(() => {
+    const map: Record<string, { item_code: string; item_name: string; is_active: string; types: string[]; rows: any[] }> = {};
+    for (const row of data) {
+      const key = row.item_code || row.id;
+      if (!map[key]) {
+        map[key] = { item_code: row.item_code, item_name: row.item_name, is_active: row.is_active || "", types: [], rows: [] };
+      }
+      map[key].rows.push(row);
+      if (row.inspection_type && !map[key].types.includes(row.inspection_type)) {
+        map[key].types.push(row.inspection_type);
+      }
+    }
+    return Object.values(map);
+  }, [data]);
+
+  // 검사기준 ID → 라벨 resolve
+  const resolveInspLabel = useCallback((id: string) => {
+    const opt = inspOptions.find(o => o.code === id);
+    return opt?.label || id || "-";
+  }, [inspOptions]);
+
+  /* ═══════════════════ CRUD ═══════════════════ */
+  const openCreate = () => { setForm({}); setEditMode(false); setInspectionRows({}); setCollapsedTypes({}); setModalOpen(true); };
+  const openEdit = async (row: any) => {
+    setForm({ ...row });
+    setEditMode(true);
+    setCollapsedTypes({});
+
+    // 같은 item_code의 모든 검사항목 행을 조회하여 유형별로 분류
+    try {
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_code", operator: "equals", value: row.item_code }] },
+        autoFilter: true,
+      });
+      const allRows = res.data?.data?.data || res.data?.data?.rows || [];
+      const rowMap: Record<string, InspectionRow[]> = {};
+      const typeFlags: Record<string, boolean> = {};
+
+      for (const r of allRows) {
+        const inspType = r.inspection_type || "";
+        // 카테고리 코드/라벨로 INSPECTION_TYPES 키 매칭
+        const matched = INSPECTION_TYPES.find(t =>
+          t.matchLabels.some(ml => inspType.includes(ml)) ||
+          inspTypeCatOptions.some(cat => inspType.includes(cat.code) && t.matchLabels.some(ml => cat.label.includes(ml)))
+        );
+        const typeKey = matched?.key || "";
+        if (!typeKey) continue;
+        typeFlags[typeKey] = true;
+        if (!rowMap[typeKey]) rowMap[typeKey] = [];
+        rowMap[typeKey].push({
+          id: r.id,
+          inspection_standard_id: r.inspection_standard_id || "",
+          inspection_detail: r.inspection_item_name || r.inspection_standard || "",
+          inspection_method: r.inspection_method || "",
+          apply_process: "",
+          acceptance_criteria: r.pass_criteria || "",
+          is_required: r.is_required === "true" || r.is_required === true,
+        });
+      }
+
+      setInspectionRows(rowMap);
+      setForm(p => ({ ...p, ...typeFlags }));
+    } catch {
+      setInspectionRows({});
+    }
+    setModalOpen(true);
+  };
+
+  /* ═══════════════════ 검사항목 행 관리 ═══════════════════ */
+  const addInspRow = (typeKey: string) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: [...(prev[typeKey] || []), {
+        id: crypto.randomUUID(),
+        inspection_standard_id: "",
+        inspection_detail: "",
+        inspection_method: "",
+        apply_process: "",
+        acceptance_criteria: "",
+        is_required: false,
+      }],
+    }));
+  };
+
+  const removeInspRow = (typeKey: string, rowId: string) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: (prev[typeKey] || []).filter(r => r.id !== rowId),
+    }));
+  };
+
+  const updateInspRow = (typeKey: string, rowId: string, field: string, value: any) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: (prev[typeKey] || []).map(r => {
+        if (r.id !== rowId) return r;
+        if (field === "inspection_standard_id") {
+          const opt = inspOptions.find(o => o.code === value);
+          return { ...r, inspection_standard_id: value, inspection_detail: opt?.detail || "", inspection_method: opt?.method || "" };
+        }
+        return { ...r, [field]: value };
+      }),
+    }));
+  };
+
+  /** 검사유형 키에 매칭되는 검사기준만 필터링 */
+  const getFilteredInspOptions = (typeKey: string) => {
+    const typeDef = INSPECTION_TYPES.find(t => t.key === typeKey);
+    if (!typeDef) return inspOptions;
+    // matchLabels와 카테고리 라벨을 비교하여 해당 카테고리 코드를 찾음
+    const matchCodes = inspTypeCatOptions
+      .filter(cat => typeDef.matchLabels.some(ml => cat.label.includes(ml)))
+      .map(cat => cat.code);
+    if (matchCodes.length === 0) return inspOptions;
+    return inspOptions.filter(opt => opt.types.some(t => matchCodes.includes(t)));
+  };
+
+  const toggleCollapse = (typeKey: string) => {
+    setCollapsedTypes(prev => ({ ...prev, [typeKey]: !prev[typeKey] }));
+  };
+
+  const handleSave = async () => {
+    if (!form.item_code) { toast.error("품목코드는 필수 입력이에요"); return; }
+    setSaving(true);
+    try {
+      // 기존 행 삭제 (수정 모드)
+      if (editMode) {
+        const existRes = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_code", operator: "equals", value: form.item_code }] },
+          autoFilter: true,
+        });
+        const existing = existRes.data?.data?.data || existRes.data?.data?.rows || [];
+        if (existing.length > 0) {
+          await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+            data: existing.map((r: any) => ({ id: r.id })),
+          });
+        }
+      }
+
+      // 검사유형별 항목을 개별 행으로 INSERT
+      const enabledTypes = INSPECTION_TYPES.filter(t => !!form[t.key]);
+      const rows: any[] = [];
+      for (const t of enabledTypes) {
+        const typeLabel = t.label;
+        const typeRows = inspectionRows[t.key] || [];
+        if (typeRows.length === 0) {
+          // 유형만 체크하고 항목 없는 경우에도 1행 생성
+          rows.push({
+            id: crypto.randomUUID(),
+            item_code: form.item_code,
+            item_name: form.item_name,
+            inspection_type: typeLabel,
+            is_active: form.is_active || "사용",
+            manager_id: form.manager_id || "",
+            memo: form.remarks || "",
+          });
+        } else {
+          for (const r of typeRows) {
+            rows.push({
+              id: crypto.randomUUID(),
+              item_code: form.item_code,
+              item_name: form.item_name,
+              inspection_type: typeLabel,
+              inspection_standard_id: r.inspection_standard_id || "",
+              inspection_item_name: r.inspection_detail || "",
+              inspection_method: r.inspection_method || "",
+              pass_criteria: r.acceptance_criteria || "",
+              is_required: r.is_required ? "true" : "false",
+              is_active: form.is_active || "사용",
+              manager_id: form.manager_id || "",
+              memo: form.remarks || "",
+            });
+          }
+        }
+      }
+
+      for (const row of rows) {
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, row);
+      }
+
+      toast.success(editMode ? "품목검사정보를 수정했어요" : "품목검사정보를 등록했어요");
+      setModalOpen(false);
+      fetchData();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setSaving(false); }
+  };
+
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("품목검사정보 삭제", {
+      description: `선택한 ${checkedIds.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+        data: checkedIds.map(id => ({ id })),
+      });
+      toast.success(`${checkedIds.length}건을 삭제했어요`);
+      setCheckedIds([]);
+      fetchData();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="rounded-lg border bg-card">
+        <div className="px-3 py-2.5 border-b bg-muted/50">
+          <DynamicSearchFilter
+            tableName={TABLE_NAME}
+            filterId="c16-item-inspection"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={ts.filterConfig}
+            dataCount={totalCount}
+            extraActions={
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = data.find(r => checkedIds.includes(r.id));
+                  if (sel) {
+                    const group = groupedData.find(g => g.item_code === sel.item_code);
+                    openEdit(group?.rows[0] || sel);
+                  } else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={handleDelete}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+            }
+          />
+        </div>
+        <div className="p-3 overflow-auto">
+          {loading ? (
+            <div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
+          ) : groupedData.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+              <Inbox className="h-10 w-10 mb-2 opacity-30" />
+              <p className="text-sm">등록된 품목검사정보가 없어요</p>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted">
+                  <TableHead className="w-10" />
+                  <TableHead className="w-10"><Checkbox checked={groupedData.length > 0 && checkedIds.length === data.length} onCheckedChange={(v) => setCheckedIds(v ? data.map(r => r.id) : [])} /></TableHead>
+                  {ts.visibleColumns.map((col) => (
+                    <TableHead key={col.key} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground" style={ts.thStyle(col.key)}>
+                      {col.label}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {ts.groupData(groupedData).map((group) => {
+                  if ((group as any)._isGroupSummary || (group as any)._isGroupHeader) return null;
+                  const isExpanded = expandedItems.has(group.item_code);
+                  const groupIds = group.rows.map((r: any) => r.id);
+                  const allChecked = groupIds.every((id: string) => checkedIds.includes(id));
+                  const renderCell = (key: string) => {
+                    switch (key) {
+                      case "item_code": return <TableCell key={key} className="text-sm font-medium text-primary">{group.item_code}</TableCell>;
+                      case "item_name": return <TableCell key={key} className="text-sm">{group.item_name}</TableCell>;
+                      case "inspection_type": return (
+                        <TableCell key={key}>
+                          <div className="flex gap-1 flex-wrap">
+                            {group.types.map((t: string) => <Badge key={t} variant="secondary" className="text-[10px]">{t}</Badge>)}
+                          </div>
+                        </TableCell>
+                      );
+                      case "item_count": return <TableCell key={key} className="text-sm text-center">{group.rows.filter((r: any) => r.inspection_standard_id).length}</TableCell>;
+                      case "is_active": return (
+                        <TableCell key={key}>
+                          <Badge variant={group.is_active === "사용" || group.is_active === "true" ? "default" : "secondary"} className="text-[10px]">
+                            {group.is_active === "사용" || group.is_active === "true" ? "사용" : "미사용"}
+                          </Badge>
+                        </TableCell>
+                      );
+                      default: return <TableCell key={key}>{(group as any)[key] ?? ""}</TableCell>;
+                    }
+                  };
+                  return (
+                    <React.Fragment key={group.item_code}>
+                      <TableRow
+                        className={cn("cursor-pointer border-l-2 border-l-transparent", allChecked && "border-l-primary bg-primary/5")}
+                        onClick={() => setExpandedItems(prev => { const next = new Set(prev); if (next.has(group.item_code)) next.delete(group.item_code); else next.add(group.item_code); return next; })}
+                        onDoubleClick={() => openEdit(group.rows[0])}
+                      >
+                        <TableCell className="text-center p-2">
+                          <ChevronDown className={cn("w-4 h-4 transition-transform text-muted-foreground", !isExpanded && "-rotate-90")} />
+                        </TableCell>
+                        <TableCell className="text-center p-2" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => allChecked ? prev.filter(id => !groupIds.includes(id)) : [...new Set([...prev, ...groupIds])]); }}>
+                          <Checkbox checked={allChecked} onCheckedChange={() => {}} />
+                        </TableCell>
+                        {ts.visibleColumns.map((col) => renderCell(col.key))}
+                      </TableRow>
+                      {isExpanded && group.rows.filter((r: any) => r.inspection_standard_id).map((row: any) => (
+                        <TableRow key={row.id} className="bg-muted/30 text-xs">
+                          <TableCell />
+                          <TableCell />
+                          <TableCell className="pl-6 text-muted-foreground">{row.inspection_type}</TableCell>
+                          <TableCell>{resolveInspLabel(row.inspection_standard_id)}</TableCell>
+                          <TableCell>{row.inspection_item_name || "-"}</TableCell>
+                          <TableCell>{row.inspection_method || "-"}</TableCell>
+                          <TableCell>{row.pass_criteria || "-"}</TableCell>
+                        </TableRow>
+                      ))}
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+          <div className="mt-2 text-xs text-muted-foreground">전체 {groupedData.length}건 (품목 기준)</div>
+        </div>
+      </div>
+
+      {/* ═══════════════════ 등록/수정 모달 (품목선택 뷰 포함) ═══════════════════ */}
+      <Dialog open={modalOpen} onOpenChange={(open) => { if (!open) setItemModalOpen(false); setModalOpen(open); }}>
+        <DialogContent className={cn("max-w-[95vw] max-h-[85vh] overflow-y-auto", itemModalOpen ? "sm:max-w-xl" : "sm:max-w-4xl")}>
+          {itemModalOpen ? (
+            <>
+              <DialogHeader>
+                <DialogTitle>품목 선택</DialogTitle>
+                <DialogDescription>품목코드 또는 품목명으로 검색</DialogDescription>
+              </DialogHeader>
+              <div className="flex gap-2">
+                <Input
+                  className="h-9 flex-1"
+                  placeholder="품목코드 또는 품목명으로 검색"
+                  value={itemSearchKeyword}
+                  onChange={(e) => setItemSearchKeyword(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === "Enter") handleItemSearch(); }}
+                />
+                <Button size="sm" className="h-9" onClick={handleItemSearch}>
+                  <Search className="w-4 h-4 mr-1" />검색
+                </Button>
+              </div>
+              <div className="border rounded-lg overflow-auto max-h-[50vh]">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="text-[11px] font-bold">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold">품목명</TableHead>
+                      <TableHead className="text-[11px] font-bold">품목유형</TableHead>
+                      <TableHead className="text-[11px] font-bold">단위</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredItems.length === 0 ? (
+                      <TableRow><TableCell colSpan={4} className="text-center py-8 text-muted-foreground text-sm">검색 결과가 없어요</TableCell></TableRow>
+                    ) : filteredItems.map((item) => (
+                      <TableRow
+                        key={item.code}
+                        className="cursor-pointer hover:bg-primary/5"
+                        onClick={() => selectItem(item)}
+                      >
+                        <TableCell className="text-sm">{item.code}</TableCell>
+                        <TableCell className="text-sm">{item.name}</TableCell>
+                        <TableCell className="text-sm">{item.item_type}</TableCell>
+                        <TableCell className="text-sm">{item.unit}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setItemModalOpen(false)}>취소</Button>
+              </DialogFooter>
+            </>
+          ) : (
+            <>
+              <DialogHeader>
+                <DialogTitle>{editMode ? "품목검사정보 수정" : "품목검사정보 등록"}</DialogTitle>
+                <DialogDescription className="sr-only">품목검사정보를 등록합니다</DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4">
+                {/* 품목 정보 */}
+                <div className="space-y-3">
+                  <h4 className="text-sm font-semibold flex items-center gap-1.5">📦 품목 정보</h4>
+                  <div className="flex items-end gap-2">
+                    <div className="space-y-1.5 flex-1">
+                      <Label className="text-xs font-semibold text-muted-foreground">품목코드 <span className="text-destructive">*</span></Label>
+                      <Input className="h-9 bg-muted" value={form.item_code || ""} readOnly placeholder="품목코드" />
+                    </div>
+                    <div className="space-y-1.5 flex-1">
+                      <Label className="text-xs font-semibold text-muted-foreground">품목명 <span className="text-destructive">*</span></Label>
+                      <Input className="h-9 bg-muted" value={form.item_name || ""} readOnly placeholder="품목명" />
+                    </div>
+                    <Button type="button" variant="outline" size="sm" className="h-9 px-3 shrink-0" onClick={openItemModal}>
+                      <Search className="w-4 h-4 mr-1" />품목선택
+                    </Button>
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-1.5">
+                      <Label className="text-xs font-semibold text-muted-foreground">사용여부</Label>
+                      <Select value={form.is_active === false ? "N" : "Y"} onValueChange={(v) => setForm(p => ({ ...p, is_active: v === "Y" }))}>
+                        <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">사용</SelectItem>
+                          <SelectItem value="N">미사용</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-xs font-semibold text-muted-foreground">관리자</Label>
+                      <Select value={form.manager || ""} onValueChange={(v) => setForm(p => ({ ...p, manager: v }))}>
+                        <SelectTrigger className="h-9"><SelectValue placeholder="관리자 선택" /></SelectTrigger>
+                        <SelectContent>
+                          {userOptions.map(o => (
+                            <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold text-muted-foreground">비고</Label>
+                    <textarea
+                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                      value={form.remarks || ""}
+                      onChange={(e) => setForm(p => ({ ...p, remarks: e.target.value }))}
+                      placeholder="비고 사항"
+                    />
+                  </div>
+                </div>
+                {/* 검사유형 선택 */}
+                <div className="space-y-3">
+                  <h4 className="text-sm font-semibold flex items-center gap-1.5">✅ 검사유형 선택</h4>
+                  <div className="flex flex-wrap gap-4">
+                    {INSPECTION_TYPES.map(({ key, label }) => (
+                      <div key={key} className="flex items-center gap-1.5">
+                        <Checkbox
+                          checked={!!form[key]}
+                          onCheckedChange={(v) => setForm(p => ({ ...p, [key]: !!v }))}
+                        />
+                        <Label className="text-sm cursor-pointer">{label}</Label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                {/* 검사유형별 검사항목 설정 */}
+                {INSPECTION_TYPES.filter(t => !!form[t.key]).map(({ key, label }) => (
+                  <div key={key} className="space-y-2">
+                    <button
+                      type="button"
+                      className="w-full flex items-center gap-2 py-2 px-3 rounded-md border bg-muted/50 hover:bg-muted text-left"
+                      onClick={() => toggleCollapse(key)}
+                    >
+                      <Badge variant="default" className="text-xs">{label}</Badge>
+                      <span className="text-sm font-medium">검사항목 설정</span>
+                      <ChevronDown className={cn("w-4 h-4 ml-auto transition-transform", collapsedTypes[key] && "-rotate-90")} />
+                    </button>
+                    {!collapsedTypes[key] && (
+                      <div className="space-y-2 pl-1">
+                        <div className="flex items-center justify-between">
+                          <span className="text-xs font-semibold text-muted-foreground">검사항목 목록</span>
+                          <Button type="button" size="sm" variant="outline" className="h-7 text-xs" onClick={() => addInspRow(key)}>
+                            <Plus className="w-3 h-3 mr-1" />항목추가
+                          </Button>
+                        </div>
+                        <div className="border rounded-lg overflow-hidden">
+                          <Table>
+                            <TableHeader>
+                              <TableRow className="bg-muted/50 hover:bg-muted/50">
+                                <TableHead className="text-[10px] font-bold w-[170px]">검사기준 선택</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[130px]">검사기준 상세</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[90px]">검사방법</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[100px]">적용공정</TableHead>
+                                <TableHead className="text-[10px] font-bold">합격기준 (판단기준별)</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[40px]">필수</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[36px]" />
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                              {(!inspectionRows[key] || inspectionRows[key].length === 0) ? (
+                                <TableRow><TableCell colSpan={7} className="text-center py-4 text-xs text-muted-foreground">항목추가 버튼으로 검사항목을 추가하세요</TableCell></TableRow>
+                              ) : inspectionRows[key].map((row) => (
+                                <TableRow key={row.id}>
+                                  <TableCell className="p-1">
+                                    <Select value={row.inspection_standard_id || ""} onValueChange={(v) => updateInspRow(key, row.id, "inspection_standard_id", v)}>
+                                      <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="검사기준 선택" /></SelectTrigger>
+                                      <SelectContent>
+                                        {getFilteredInspOptions(key).map(o => (
+                                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input className="h-8 text-xs bg-muted" value={row.inspection_detail} readOnly placeholder="검사기준 상세" />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input className="h-8 text-xs bg-muted" value={row.inspection_method} readOnly placeholder="선택" />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Select value={row.apply_process || ""} onValueChange={(v) => updateInspRow(key, row.id, "apply_process", v)}>
+                                      <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="공정 선택" /></SelectTrigger>
+                                      <SelectContent>
+                                        <SelectItem value="incoming">입고</SelectItem>
+                                        <SelectItem value="process">공정</SelectItem>
+                                        <SelectItem value="outgoing">출고</SelectItem>
+                                        <SelectItem value="final">최종</SelectItem>
+                                      </SelectContent>
+                                    </Select>
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input
+                                      className="h-8 text-xs"
+                                      value={row.acceptance_criteria}
+                                      onChange={(e) => updateInspRow(key, row.id, "acceptance_criteria", e.target.value)}
+                                      placeholder={row.inspection_standard_id ? "합격기준 입력" : "검사기준을 먼저 선택하세요"}
+                                      disabled={!row.inspection_standard_id}
+                                    />
+                                  </TableCell>
+                                  <TableCell className="p-1 text-center">
+                                    <Checkbox checked={row.is_required} onCheckedChange={(v) => updateInspRow(key, row.id, "is_required", !!v)} />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Button type="button" variant="destructive" size="sm" className="h-7 w-7 p-0" onClick={() => removeInspRow(key, row.id)}>
+                                      <Trash2 className="w-3.5 h-3.5" />
+                                    </Button>
+                                  </TableCell>
+                                </TableRow>
+                              ))}
+                            </TableBody>
+                          </Table>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setModalOpen(false)}>취소</Button>
+                <Button onClick={handleSave} disabled={saving}>
+                  {saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+                  저장
+                </Button>
+              </DialogFooter>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/sales/claim/page.tsx b/frontend/app/(main)/COMPANY_7/sales/claim/page.tsx
index 86ba092d..a2c89599 100644
--- a/frontend/app/(main)/COMPANY_7/sales/claim/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/sales/claim/page.tsx
@@ -10,14 +10,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -39,11 +31,26 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import {
   Download,
   Plus,
   Save,
-  BarChart3,
   ClipboardList,
   Inbox,
   Check,
@@ -51,21 +58,36 @@ import {
   Loader2,
   FileSpreadsheet,
   Trash2,
+  Pencil,
+  FileText,
+  Wrench,
+  Settings2,
 } from "lucide-react";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 
 // --- 상수 ---
 const TABLE_NAME = "claim_mng";
 
+const GRID_COLUMNS = [
+  { key: "claim_no", label: "클레임번호" },
+  { key: "claim_date", label: "접수일자" },
+  { key: "claim_type", label: "유형" },
+  { key: "claim_status", label: "상태" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "manager_name", label: "담당자" },
+  { key: "claim_content", label: "클레임 내용" },
+];
+
 type ClaimType = "불량" | "교환" | "반품" | "배송지연" | "기타";
 type ClaimStatus = "접수" | "처리중" | "완료" | "취소";
 
@@ -99,35 +121,25 @@ interface SalesOrderOption {
   status: string;
 }
 
-const getClaimTypeStyle = (type: string) => {
-  switch (type) {
-    case "불량":
-      return "bg-rose-100 text-rose-800 border-rose-200";
-    case "교환":
-      return "bg-amber-100 text-amber-800 border-amber-200";
-    case "반품":
-      return "bg-blue-100 text-blue-800 border-blue-200";
-    case "배송지연":
-      return "bg-indigo-100 text-indigo-800 border-indigo-200";
-    case "기타":
-      return "bg-gray-100 text-gray-800 border-gray-200";
-    default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+// Badge variant 매핑 (CSS 변수 기반)
+const getClaimStatusVariant = (status: string) => {
+  switch (status) {
+    case "접수": return "default" as const;
+    case "처리중": return "secondary" as const;
+    case "완료": return "outline" as const;
+    case "취소": return "destructive" as const;
+    default: return "secondary" as const;
   }
 };
 
-const getClaimStatusStyle = (status: string) => {
-  switch (status) {
-    case "접수":
-      return "bg-blue-100 text-blue-800 border-blue-200";
-    case "처리중":
-      return "bg-amber-100 text-amber-800 border-amber-200";
-    case "완료":
-      return "bg-emerald-100 text-emerald-800 border-emerald-200";
-    case "취소":
-      return "bg-rose-100 text-rose-800 border-rose-200";
-    default:
-      return "bg-gray-100 text-gray-800 border-gray-200";
+const getClaimTypeVariant = (type: string) => {
+  switch (type) {
+    case "불량": return "destructive" as const;
+    case "교환": return "warning" as const;
+    case "반품": return "default" as const;
+    case "배송지연": return "secondary" as const;
+    case "기타": return "outline" as const;
+    default: return "outline" as const;
   }
 };
 
@@ -135,15 +147,16 @@ const CLAIM_TYPES: ClaimType[] = ["불량", "교환", "반품", "배송지연",
 const CLAIM_STATUSES: ClaimStatus[] = ["접수", "처리중", "완료", "취소"];
 
 export default function ClaimManagementPage() {
-  const { user } = useAuth();
+  useAuth();
   const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-claim", TABLE_NAME, GRID_COLUMNS);
 
   const [data, setData] = useState<ClaimRow[]>([]);
   const [loading, setLoading] = useState(false);
   const [totalCount, setTotalCount] = useState(0);
   const [selectedClaimNo, setSelectedClaimNo] = useState<string | null>(null);
 
-  // 검색 필터 (DynamicSearchFilter)
+  // 검색 필터 (DynamicSearchFilter에서 관리)
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 엑셀 업로드
@@ -165,11 +178,11 @@ export default function ClaimManagementPage() {
   const [customersLoading, setCustomersLoading] = useState(false);
   const [ordersLoading, setOrdersLoading] = useState(false);
 
-  // --- 데이터 조회 (table-management API + autoFilter로 멀티테넌시 자동 적용) ---
+  // --- 데이터 조회 (서버사이드 필터 + autoFilter 멀티테넌시) ---
   const fetchData = useCallback(async () => {
     setLoading(true);
     try {
-      const filters: any[] = searchFilters.map((f) => ({
+      const filters = searchFilters.map(f => ({
         columnName: f.columnName,
         operator: f.operator,
         value: f.value,
@@ -179,15 +192,14 @@ export default function ClaimManagementPage() {
         page: 1,
         size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
-        autoFilter: true, // company_code 자동 필터링
+        autoFilter: true,
         sort: { columnName: "claim_date", order: "desc" },
       });
 
       const rows: ClaimRow[] = res.data?.data?.data || res.data?.data?.rows || [];
       setData(rows);
       setTotalCount(res.data?.data?.total || rows.length);
-    } catch (err) {
-      console.error("클레임 조회 실패:", err);
+    } catch {
       toast.error("클레임 목록을 불러오는데 실패했습니다.");
     } finally {
       setLoading(false);
@@ -198,6 +210,7 @@ export default function ClaimManagementPage() {
     fetchData();
   }, [fetchData]);
 
+
   // 거래처 목록 조회 (autoFilter로 멀티테넌시 적용)
   const fetchCustomers = useCallback(async (force = false) => {
     if (!force && customers.length > 0) return;
@@ -206,7 +219,7 @@ export default function ClaimManagementPage() {
       const res = await apiClient.post("/table-management/tables/customer_mng/data", {
         page: 1,
         size: 9999,
-        autoFilter: { enabled: true },
+        autoFilter: true,
       });
       const rows = res.data?.data?.data || res.data?.data?.rows;
       if (res.data?.success && Array.isArray(rows)) {
@@ -216,8 +229,8 @@ export default function ClaimManagementPage() {
         }));
         setCustomers(list);
       }
-    } catch (e) {
-      console.error("거래처 목록 조회 실패:", e);
+    } catch {
+      /* skip */
     } finally {
       setCustomersLoading(false);
     }
@@ -231,7 +244,7 @@ export default function ClaimManagementPage() {
       const res = await apiClient.post("/table-management/tables/sales_order_mng/data", {
         page: 1,
         size: 9999,
-        autoFilter: { enabled: true },
+        autoFilter: true,
       });
       const rows = res.data?.data?.data || res.data?.data?.rows;
       if (res.data?.success && Array.isArray(rows)) {
@@ -249,8 +262,8 @@ export default function ClaimManagementPage() {
         }
         setSalesOrders(list);
       }
-    } catch (e) {
-      console.error("수주 목록 조회 실패:", e);
+    } catch {
+      /* skip */
     } finally {
       setOrdersLoading(false);
     }
@@ -325,27 +338,24 @@ export default function ClaimManagementPage() {
 
     setSaving(true);
     try {
-      // company_code, writer, created_date 등 시스템 필드는 제외 (백엔드가 자동 주입)
       const { id, company_code, writer, created_date, updated_date, created_by, updated_by, ...saveFields } = formData as any;
 
       if (isEditMode && id) {
-        // 수정
         await apiClient.put(`/table-management/tables/${TABLE_NAME}/edit`, {
           originalData: { id },
           updatedData: saveFields,
         });
-        toast.success("클레임이 수정되었습니다.");
+        toast.success("클레임이 수정되었어요.");
       } else {
-        // 등록
         await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, saveFields);
-        toast.success("클레임이 등록되었습니다.");
+        toast.success("클레임이 등록되었어요.");
       }
 
       setIsModalOpen(false);
-      fetchData(); // 목록 새로고침
+      fetchData();
     } catch (err: any) {
       console.error("클레임 저장 실패:", err);
-      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
     } finally {
       setSaving(false);
     }
@@ -366,19 +376,19 @@ export default function ClaimManagementPage() {
       await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
         data: [{ id: claim.id }],
       });
-      toast.success("클레임이 삭제되었습니다.");
+      toast.success("클레임이 삭제되었어요.");
       if (selectedClaimNo === claimNo) setSelectedClaimNo(null);
       fetchData();
     } catch (err: any) {
       console.error("클레임 삭제 실패:", err);
-      toast.error(err.response?.data?.message || "삭제에 실패했습니다.");
+      toast.error(err.response?.data?.message || "삭제에 실패했어요.");
     }
   };
 
   // 엑셀 다운로드
   const handleExcelDownload = async () => {
     if (data.length === 0) {
-      toast.error("다운로드할 데이터가 없습니다.");
+      toast.error("다운로드할 데이터가 없어요.");
       return;
     }
     try {
@@ -398,7 +408,7 @@ export default function ClaimManagementPage() {
       toast.success("엑셀 다운로드 완료");
     } catch (err) {
       console.error("엑셀 다운로드 실패:", err);
-      toast.error("엑셀 다운로드에 실패했습니다.");
+      toast.error("엑셀 다운로드에 실패했어요.");
     }
   };
 
@@ -407,306 +417,211 @@ export default function ClaimManagementPage() {
     [data, selectedClaimNo]
   );
 
-  const statCards: {
-    label: string;
-    value: number;
-    gradient: string;
-    textColor: string;
-  }[] = [
-    {
-      label: "접수",
-      value: statusCounts["접수"],
-      gradient: "from-indigo-500 to-purple-600",
-      textColor: "text-white",
-    },
-    {
-      label: "처리중",
-      value: statusCounts["처리중"],
-      gradient: "from-amber-400 to-orange-500",
-      textColor: "text-white",
-    },
-    {
-      label: "완료",
-      value: statusCounts["완료"],
-      gradient: "from-cyan-400 to-blue-500",
-      textColor: "text-white",
-    },
-    {
-      label: "취소",
-      value: statusCounts["취소"],
-      gradient: "from-slate-300 to-slate-400",
-      textColor: "text-slate-800",
-    },
-  ];
-
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4">
-      {/* 검색 섹션 — DynamicSearchFilter 사용 */}
+    <div className="flex flex-col h-[calc(100vh-4rem)] overflow-hidden">
+      {/* 검색 필터 (DynamicSearchFilter) */}
       <DynamicSearchFilter
         tableName={TABLE_NAME}
-        filterId="sales-claim"
+        filterId="c16-claim"
         onFilterChange={setSearchFilters}
-        dataCount={totalCount}
+        dataCount={data.length}
+        externalFilterConfig={ts.filterConfig}
       />
 
-      {/* 메인 분할 레이아웃 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
-        <ResizablePanelGroup direction="horizontal">
-          {/* 왼쪽: 클레임 목록 */}
+      {/* ───── 메인 분할 레이아웃 ───── */}
+      <div className="flex-1 overflow-hidden">
+        <ResizablePanelGroup direction="horizontal" className="h-full">
+          {/* ── 좌측: 클레임 목록 (65%) ── */}
           <ResizablePanel defaultSize={65} minSize={35}>
-            <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2">
-                  <ClipboardList className="w-4 h-4" />
-                  클레임 목록
-                  <Badge variant="secondary" className="font-normal">
-                    {totalCount}건
-                  </Badge>
-                  {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
-                </div>
+            <div className="flex flex-col h-full bg-card">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
                 <div className="flex items-center gap-2">
+                  <ClipboardList className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-[13px] font-bold text-foreground">클레임 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {data.length}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <div className="flex items-center gap-1.5">
                   <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
-                    <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
+                    <FileSpreadsheet className="w-3.5 h-3.5" />
+                    업로드
                   </Button>
                   <Button variant="outline" size="sm" onClick={handleExcelDownload}>
-                    <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
+                    <Download className="w-3.5 h-3.5" />
+                    다운로드
                   </Button>
                   <Button size="sm" onClick={openRegisterModal}>
-                    <Plus className="w-4 h-4 mr-1.5" /> 클레임 등록
+                    <Plus className="w-3.5 h-3.5" />
+                    등록
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="h-4 w-4" />
                   </Button>
                 </div>
               </div>
 
-              <div className="flex-1 overflow-auto">
-                <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                    <TableRow>
-                      <TableHead className="w-[50px] text-center">No</TableHead>
-                      <TableHead className="w-[130px]">클레임번호</TableHead>
-                      <TableHead className="w-[110px]">접수일자</TableHead>
-                      <TableHead className="w-[90px] text-center">유형</TableHead>
-                      <TableHead className="w-[90px] text-center">상태</TableHead>
-                      <TableHead className="w-[150px]">거래처명</TableHead>
-                      <TableHead className="w-[100px]">담당자</TableHead>
-                      <TableHead className="w-[120px]">수주번호</TableHead>
-                      <TableHead>클레임 내용</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {data.length === 0 ? (
-                      <TableRow>
-                        <TableCell
-                          colSpan={9}
-                          className="h-32 text-center text-muted-foreground"
-                        >
-                          <div className="flex flex-col items-center gap-2">
-                            <Inbox className="w-8 h-8 text-muted-foreground/50" />
-                            <span>{loading ? "데이터를 불러오는 중..." : "등록된 클레임이 없습니다"}</span>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      data.map((claim, idx) => (
-                        <TableRow
-                          key={claim.id}
-                          className={cn(
-                            "cursor-pointer hover:bg-muted/50 transition-colors",
-                            selectedClaimNo === claim.claim_no && "bg-primary/5"
-                          )}
-                          onClick={() => handleRowClick(claim.claim_no)}
-                          onDoubleClick={() => openEditModal(claim.claim_no)}
-                        >
-                          <TableCell className="text-center text-muted-foreground">
-                            {idx + 1}
-                          </TableCell>
-                          <TableCell className="font-medium">
-                            {claim.claim_no}
-                          </TableCell>
-                          <TableCell>{claim.claim_date}</TableCell>
-                          <TableCell className="text-center">
-                            <span
-                              className={cn(
-                                "px-2 py-1 rounded-full text-[11px] font-medium border",
-                                getClaimTypeStyle(claim.claim_type)
-                              )}
-                            >
-                              {claim.claim_type}
-                            </span>
-                          </TableCell>
-                          <TableCell className="text-center">
-                            <span
-                              className={cn(
-                                "px-2 py-1 rounded-full text-[11px] font-medium border",
-                                getClaimStatusStyle(claim.claim_status)
-                              )}
-                            >
-                              {claim.claim_status}
-                            </span>
-                          </TableCell>
-                          <TableCell>{claim.customer_name}</TableCell>
-                          <TableCell>{claim.manager_name || "-"}</TableCell>
-                          <TableCell className="text-muted-foreground text-xs">
-                            {claim.order_no || "-"}
-                          </TableCell>
-                          <TableCell className="text-xs text-muted-foreground truncate max-w-[300px]">
-                            {claim.claim_content || "-"}
-                          </TableCell>
-                        </TableRow>
-                      ))
-                    )}
-                  </TableBody>
-                </Table>
-              </div>
+              {/* 테이블 */}
+              <EDataTable
+                columns={ts.visibleColumns.map((col): EDataTableColumn<ClaimRow> => ({
+                  key: col.key,
+                  label: col.label,
+                  align: col.key === "claim_type" || col.key === "claim_status" ? "center" : undefined,
+                  render: col.key === "claim_type"
+                    ? (val: any) => (
+                        <Badge variant={getClaimTypeVariant(val)} className="text-[10px] px-1.5 py-0">
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "claim_status"
+                    ? (val: any) => (
+                        <Badge variant={getClaimStatusVariant(val)} className="text-[10px] px-1.5 py-0">
+                          {val}
+                        </Badge>
+                      )
+                    : undefined,
+                }))}
+                data={ts.groupData(data)}
+                loading={loading}
+                emptyMessage="등록된 클레임이 없어요"
+                rowKey={(row) => String(row.id)}
+                selectedId={selectedClaimNo ? String(data.find(c => c.claim_no === selectedClaimNo)?.id ?? "") : null}
+                onSelect={(id) => {
+                  const claim = data.find(c => String(c.id) === id);
+                  handleRowClick(claim?.claim_no ?? "");
+                }}
+                onRowDoubleClick={(row) => openEditModal(row.claim_no)}
+                showRowNumber
+                draggableColumns={false}
+              />
             </div>
           </ResizablePanel>
 
           <ResizableHandle withHandle />
 
-          {/* 오른쪽: 처리 현황 */}
+          {/* ── 우측: 클레임 상세 (35%) ── */}
           <ResizablePanel defaultSize={35} minSize={20}>
-            <div className="flex flex-col h-full bg-card">
-              <div className="flex items-center justify-between p-3 border-b shrink-0">
-                <span className="font-semibold flex items-center gap-2">
-                  <BarChart3 className="w-4 h-4" />
-                  처리 현황
-                </span>
+            <div className="flex flex-col h-full bg-card border-l">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="flex items-center gap-2">
+                  <ClipboardList className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-[13px] font-bold text-foreground">클레임 상세</span>
+                  {selectedClaim && (
+                    <span className="text-[11px] font-mono text-muted-foreground">{selectedClaim.claim_no}</span>
+                  )}
+                </div>
+                {selectedClaim && (
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => openEditModal(selectedClaim.claim_no)}
+                    >
+                      <Pencil className="w-3.5 h-3.5" />
+                      수정
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="text-destructive hover:text-destructive"
+                      onClick={() => handleDelete(selectedClaim.claim_no)}
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </Button>
+                  </div>
+                )}
               </div>
 
-              <div className="flex-1 overflow-auto p-4 space-y-5">
-                {/* 상태별 카드 */}
-                <div className="grid grid-cols-2 gap-3">
-                  {statCards.map((card) => (
-                    <div
-                      key={card.label}
-                      className={cn(
-                        "rounded-xl p-5 text-center bg-linear-to-br transition-all hover:-translate-y-0.5 hover:shadow-md",
-                        card.gradient,
-                        card.textColor
-                      )}
-                    >
-                      <div className="text-sm font-medium opacity-90 mb-2">
-                        {card.label}
-                      </div>
-                      <div className="text-4xl font-bold">{card.value}</div>
-                    </div>
-                  ))}
-                </div>
+              {/* 상태별 요약 카운트 */}
+              <div className="flex items-center gap-3 px-4 py-2 border-b bg-muted/20 shrink-0">
+                {([
+                  { label: "접수", count: statusCounts["접수"], variant: "default" as const },
+                  { label: "처리중", count: statusCounts["처리중"], variant: "secondary" as const },
+                  { label: "완료", count: statusCounts["완료"], variant: "outline" as const },
+                  { label: "취소", count: statusCounts["취소"], variant: "destructive" as const },
+                ]).map((item) => (
+                  <div key={item.label} className="flex items-center gap-1">
+                    <Badge variant={item.variant} className="text-[10px] px-1.5 py-0">
+                      {item.label}
+                    </Badge>
+                    <span className="text-sm font-bold tabular-nums text-foreground">{item.count}</span>
+                  </div>
+                ))}
+              </div>
 
-                {/* 선택된 클레임 상세 */}
+              {/* 상세 컨텐츠 */}
+              <div className="flex-1 overflow-auto">
                 {selectedClaim ? (
-                  <div className="space-y-4">
-                    <h3 className="text-sm font-semibold flex items-center gap-2 pt-2 border-t">
-                      <ClipboardList className="w-4 h-4" />
-                      클레임 상세 - {selectedClaim.claim_no}
-                    </h3>
-
-                    <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div className="p-4 space-y-4">
+                    {/* 기본 정보 그리드 */}
+                    <div className="grid grid-cols-2 gap-x-4 gap-y-3">
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          클레임번호
-                        </span>
-                        <span className="font-medium">
-                          {selectedClaim.claim_no}
-                        </span>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">접수일자</p>
+                        <p className="text-sm text-foreground">{selectedClaim.claim_date}</p>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          접수일자
-                        </span>
-                        <span>{selectedClaim.claim_date}</span>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">담당자</p>
+                        <p className="text-sm text-foreground">{selectedClaim.manager_name || "-"}</p>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          유형
-                        </span>
-                        <span
-                          className={cn(
-                            "px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block",
-                            getClaimTypeStyle(selectedClaim.claim_type)
-                          )}
-                        >
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">유형</p>
+                        <Badge variant={getClaimTypeVariant(selectedClaim.claim_type)} className="text-[11px]">
                           {selectedClaim.claim_type}
-                        </span>
+                        </Badge>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          상태
-                        </span>
-                        <span
-                          className={cn(
-                            "px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block",
-                            getClaimStatusStyle(selectedClaim.claim_status)
-                          )}
-                        >
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">상태</p>
+                        <Badge variant={getClaimStatusVariant(selectedClaim.claim_status)} className="text-[11px]">
                           {selectedClaim.claim_status}
-                        </span>
+                        </Badge>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          거래처명
-                        </span>
-                        <span>{selectedClaim.customer_name}</span>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">거래처명</p>
+                        <p className="text-sm font-medium text-foreground">{selectedClaim.customer_name}</p>
                       </div>
                       <div>
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          담당자
-                        </span>
-                        <span>{selectedClaim.manager_name || "-"}</span>
-                      </div>
-                      <div className="col-span-2">
-                        <span className="text-muted-foreground text-xs block mb-1">
-                          수주번호
-                        </span>
-                        <span className="text-muted-foreground">
-                          {selectedClaim.order_no || "-"}
-                        </span>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주번호</p>
+                        <p className="text-sm font-mono text-muted-foreground">{selectedClaim.order_no || "-"}</p>
                       </div>
                     </div>
 
+                    <div className="border-t" />
+
+                    {/* 클레임 내용 */}
                     <div>
-                      <span className="text-muted-foreground text-xs block mb-1">
-                        클레임 내용
-                      </span>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[60px]">
+                      <div className="flex items-center gap-1.5 mb-1.5">
+                        <FileText className="w-3.5 h-3.5 text-muted-foreground" />
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">클레임 내용</p>
+                      </div>
+                      <div className="rounded-md border bg-muted/30 p-3 text-sm text-foreground whitespace-pre-wrap min-h-[60px]">
                         {selectedClaim.claim_content || "-"}
                       </div>
                     </div>
 
+                    {/* 처리 내용 */}
                     <div>
-                      <span className="text-muted-foreground text-xs block mb-1">
-                        처리 내용
-                      </span>
-                      <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[60px]">
+                      <div className="flex items-center gap-1.5 mb-1.5">
+                        <Wrench className="w-3.5 h-3.5 text-muted-foreground" />
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">처리 내용</p>
+                      </div>
+                      <div className="rounded-md border bg-muted/30 p-3 text-sm text-foreground whitespace-pre-wrap min-h-[60px]">
                         {selectedClaim.process_content || "-"}
                       </div>
                     </div>
-
-                    <div className="flex gap-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="flex-1"
-                        onClick={() => openEditModal(selectedClaim.claim_no)}
-                      >
-                        <Save className="w-4 h-4 mr-2" /> 수정
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="text-destructive hover:text-destructive"
-                        onClick={() => handleDelete(selectedClaim.claim_no)}
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </Button>
-                    </div>
                   </div>
                 ) : (
-                  <div className="flex flex-col items-center justify-center py-10 text-center">
-                    <div className="w-14 h-14 rounded-full bg-muted flex items-center justify-center mb-3">
-                      <BarChart3 className="w-7 h-7 text-muted-foreground" />
+                  <div className="flex flex-col items-center justify-center h-full text-center p-8">
+                    <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-14 h-14 flex items-center justify-center mb-4">
+                      <Inbox className="w-7 h-7 text-muted-foreground/30" />
                     </div>
-                    <p className="text-sm text-muted-foreground">
-                      클레임을 선택하면 상세 정보가 표시됩니다
+                    <p className="text-sm font-medium text-muted-foreground mb-1">
+                      좌측에서 클레임을 선택해주세요
+                    </p>
+                    <p className="text-xs text-muted-foreground/60">
+                      클레임을 선택하면 상세 정보가 표시돼요
                     </p>
                   </div>
                 )}
@@ -716,310 +631,279 @@ export default function ClaimManagementPage() {
         </ResizablePanelGroup>
       </div>
 
-      {/* 클레임 등록/수정 모달 — FullscreenDialog 사용 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title={isEditMode ? "클레임 수정" : "클레임 등록"}
-        description={isEditMode ? "클레임 정보를 수정합니다." : "새로운 클레임을 등록합니다."}
-        defaultMaxWidth="max-w-[900px]"
-        footer={
-          <div className="flex gap-2 w-full sm:w-auto">
-            <Button
-              variant="outline"
-              onClick={() => setIsModalOpen(false)}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
+      {/* ───── 클레임 등록/수정 모달 ───── */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[900px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "클레임 수정" : "클레임 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? "클레임 정보를 수정해요." : "새로운 클레임을 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex flex-col md:flex-row gap-4 py-2">
+            {/* 왼쪽: 기본 정보 */}
+            <div className="md:w-[320px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border">
+              <h3 className="text-[13px] font-bold pb-2 border-b text-foreground">기본 정보</h3>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_no" className="text-[11px] font-semibold text-muted-foreground">클레임번호</Label>
+                <Input
+                  id="claim_no"
+                  value={formData.claim_no || ""}
+                  readOnly
+                  className="h-9 text-sm bg-muted cursor-not-allowed font-mono"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_date" className="text-[11px] font-semibold text-muted-foreground">접수일자</Label>
+                <Input
+                  id="claim_date"
+                  type="date"
+                  value={formData.claim_date || ""}
+                  onChange={(e) => handleFormChange("claim_date", e.target.value)}
+                  className="h-9 text-sm"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_type" className="text-[11px] font-semibold text-muted-foreground">
+                  클레임 유형 <span className="text-destructive">*</span>
+                </Label>
+                <Select
+                  value={formData.claim_type || ""}
+                  onValueChange={(v) => handleFormChange("claim_type", v)}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue placeholder="유형을 선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CLAIM_TYPES.map((t) => (
+                      <SelectItem key={t} value={t}>{t}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_status" className="text-[11px] font-semibold text-muted-foreground">처리 상태</Label>
+                <Select
+                  value={formData.claim_status || "접수"}
+                  onValueChange={(v) => handleFormChange("claim_status", v)}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CLAIM_STATUSES.map((s) => (
+                      <SelectItem key={s} value={s}>{s}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <Label className="text-[11px] font-semibold text-muted-foreground">
+                  거래처명 <span className="text-destructive">*</span>
+                </Label>
+                <Popover open={customerOpen} onOpenChange={setCustomerOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={customerOpen}
+                      className="h-9 w-full justify-between font-normal"
+                      onClick={() => fetchCustomers(false)}
+                    >
+                      {formData.customer_name || "거래처를 선택해주세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput placeholder="거래처 검색..." />
+                      <CommandList>
+                        {customersLoading ? (
+                          <div className="flex items-center justify-center py-6">
+                            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                            <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
+                          </div>
+                        ) : (
+                          <>
+                            <CommandEmpty className="py-4 text-center text-sm">
+                              거래처를 찾을 수 없어요.
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {customers.map((cust) => (
+                                <CommandItem
+                                  key={cust.customerCode}
+                                  value={`${cust.customerCode} ${cust.customerName}`}
+                                  onSelect={() => {
+                                    setFormData((prev) => ({
+                                      ...prev,
+                                      customer_code: cust.customerCode,
+                                      customer_name: cust.customerName,
+                                    }));
+                                    setCustomerOpen(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      formData.customer_code === cust.customerCode
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col min-w-0">
+                                    <span className="font-medium truncate">{cust.customerName}</span>
+                                    <span className="text-[10px] text-muted-foreground">{cust.customerCode}</span>
+                                  </div>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="manager_name" className="text-[11px] font-semibold text-muted-foreground">담당자</Label>
+                <Input
+                  id="manager_name"
+                  value={formData.manager_name || ""}
+                  onChange={(e) => handleFormChange("manager_name", e.target.value)}
+                  placeholder="담당자를 입력해주세요"
+                  className="h-9"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label className="text-[11px] font-semibold text-muted-foreground">수주번호</Label>
+                <Popover open={orderOpen} onOpenChange={setOrderOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={orderOpen}
+                      className="h-9 w-full justify-between font-normal"
+                      onClick={() => fetchSalesOrders(false)}
+                    >
+                      {formData.order_no || "수주번호를 선택해주세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput placeholder="수주번호 검색..." />
+                      <CommandList>
+                        {ordersLoading ? (
+                          <div className="flex items-center justify-center py-6">
+                            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                            <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
+                          </div>
+                        ) : (
+                          <>
+                            <CommandEmpty className="py-4 text-center text-sm">
+                              수주번호를 찾을 수 없어요.
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {salesOrders.map((order) => (
+                                <CommandItem
+                                  key={order.orderNo}
+                                  value={`${order.orderNo} ${order.partnerName}`}
+                                  onSelect={() => {
+                                    setFormData((prev) => ({
+                                      ...prev,
+                                      order_no: order.orderNo,
+                                    }));
+                                    setOrderOpen(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      formData.order_no === order.orderNo
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col min-w-0">
+                                    <span className="font-medium truncate">{order.orderNo}</span>
+                                    <span className="text-[10px] text-muted-foreground">
+                                      {order.status}
+                                      {order.partnerName ? ` | ${order.partnerName}` : ""}
+                                    </span>
+                                  </div>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+
+            {/* 오른쪽: 상세 내용 */}
+            <div className="flex-1 space-y-3 bg-muted/30 p-4 rounded-lg border min-w-0">
+              <h3 className="text-[13px] font-bold pb-2 border-b text-foreground">클레임 상세 내용</h3>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_content" className="text-[11px] font-semibold text-muted-foreground">
+                  클레임 내용 <span className="text-destructive">*</span>
+                </Label>
+                <Textarea
+                  id="claim_content"
+                  value={formData.claim_content || ""}
+                  onChange={(e) => handleFormChange("claim_content", e.target.value)}
+                  placeholder="클레임 내용을 상세히 입력해주세요"
+                  className="min-h-[200px] resize-y text-sm"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="process_content" className="text-[11px] font-semibold text-muted-foreground">처리 내용</Label>
+                <Textarea
+                  id="process_content"
+                  value={formData.process_content || ""}
+                  onChange={(e) => handleFormChange("process_content", e.target.value)}
+                  placeholder="처리 내용을 입력해주세요"
+                  className="min-h-[150px] resize-y text-sm"
+                />
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>
               취소
             </Button>
-            <Button
-              onClick={handleSave}
-              disabled={saving}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
+            <Button onClick={handleSave} disabled={saving}>
               {saving ? (
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                <Loader2 className="w-4 h-4 animate-spin" />
               ) : (
-                <Save className="w-4 h-4 mr-2" />
+                <Save className="w-4 h-4" />
               )}
               저장
             </Button>
-          </div>
-        }
-      >
-        <div className="flex flex-col md:flex-row gap-5">
-          {/* 왼쪽: 기본 정보 */}
-          <div className="md:w-[340px] shrink-0 space-y-4 bg-muted/30 p-4 rounded-lg border border-border/50">
-            <h3 className="text-sm font-semibold pb-2 border-b">
-              클레임 기본 정보
-            </h3>
-
-            <div>
-              <Label htmlFor="claim_no" className="text-xs sm:text-sm">
-                클레임번호
-              </Label>
-              <Input
-                id="claim_no"
-                value={formData.claim_no || ""}
-                readOnly
-                className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed"
-              />
-            </div>
-
-            <div>
-              <Label htmlFor="claim_date" className="text-xs sm:text-sm">
-                접수일자
-              </Label>
-              <FormDatePicker
-                value={formData.claim_date || ""}
-                onChange={(v) => handleFormChange("claim_date", v)}
-                placeholder="접수일자"
-              />
-            </div>
-
-            <div>
-              <Label htmlFor="claim_type" className="text-xs sm:text-sm">
-                클레임 유형 <span className="text-destructive">*</span>
-              </Label>
-              <Select
-                value={formData.claim_type || ""}
-                onValueChange={(v) => handleFormChange("claim_type", v)}
-              >
-                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                  <SelectValue placeholder="선택" />
-                </SelectTrigger>
-                <SelectContent>
-                  {CLAIM_TYPES.map((t) => (
-                    <SelectItem key={t} value={t}>
-                      {t}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div>
-              <Label htmlFor="claim_status" className="text-xs sm:text-sm">
-                처리 상태
-              </Label>
-              <Select
-                value={formData.claim_status || "접수"}
-                onValueChange={(v) => handleFormChange("claim_status", v)}
-              >
-                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {CLAIM_STATUSES.map((s) => (
-                    <SelectItem key={s} value={s}>
-                      {s}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div>
-              <Label className="text-xs sm:text-sm">
-                거래처명 <span className="text-destructive">*</span>
-              </Label>
-              <Popover open={customerOpen} onOpenChange={setCustomerOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={customerOpen}
-                    className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm font-normal"
-                    onClick={() => fetchCustomers(false)}
-                  >
-                    {formData.customer_name || "거래처 선택"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent
-                  className="p-0"
-                  style={{ width: "var(--radix-popover-trigger-width)" }}
-                  align="start"
-                >
-                  <Command>
-                    <CommandInput
-                      placeholder="거래처 검색..."
-                      className="text-xs sm:text-sm"
-                    />
-                    <CommandList>
-                      {customersLoading ? (
-                        <div className="flex items-center justify-center py-6">
-                          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-                          <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
-                        </div>
-                      ) : (
-                        <>
-                          <CommandEmpty className="text-xs sm:text-sm py-4 text-center">
-                            거래처를 찾을 수 없습니다.
-                          </CommandEmpty>
-                          <CommandGroup>
-                            {customers.map((cust) => (
-                              <CommandItem
-                                key={cust.customerCode}
-                                value={`${cust.customerCode} ${cust.customerName}`}
-                                onSelect={() => {
-                                  setFormData((prev) => ({
-                                    ...prev,
-                                    customer_code: cust.customerCode,
-                                    customer_name: cust.customerName,
-                                  }));
-                                  setCustomerOpen(false);
-                                }}
-                                className="text-xs sm:text-sm"
-                              >
-                                <Check
-                                  className={cn(
-                                    "mr-2 h-4 w-4",
-                                    formData.customer_code === cust.customerCode
-                                      ? "opacity-100"
-                                      : "opacity-0"
-                                  )}
-                                />
-                                <div className="flex flex-col">
-                                  <span className="font-medium">{cust.customerName}</span>
-                                  <span className="text-[10px] text-muted-foreground">
-                                    {cust.customerCode}
-                                  </span>
-                                </div>
-                              </CommandItem>
-                            ))}
-                          </CommandGroup>
-                        </>
-                      )}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
-
-            <div>
-              <Label htmlFor="manager_name" className="text-xs sm:text-sm">
-                담당자
-              </Label>
-              <Input
-                id="manager_name"
-                value={formData.manager_name || ""}
-                onChange={(e) => handleFormChange("manager_name", e.target.value)}
-                className="h-8 text-xs sm:h-10 sm:text-sm"
-              />
-            </div>
-
-            <div>
-              <Label className="text-xs sm:text-sm">수주번호</Label>
-              <Popover open={orderOpen} onOpenChange={setOrderOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={orderOpen}
-                    className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm font-normal"
-                    onClick={() => fetchSalesOrders(false)}
-                  >
-                    {formData.order_no || "수주번호 선택"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent
-                  className="p-0"
-                  style={{ width: "var(--radix-popover-trigger-width)" }}
-                  align="start"
-                >
-                  <Command>
-                    <CommandInput
-                      placeholder="수주번호 검색..."
-                      className="text-xs sm:text-sm"
-                    />
-                    <CommandList>
-                      {ordersLoading ? (
-                        <div className="flex items-center justify-center py-6">
-                          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-                          <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
-                        </div>
-                      ) : (
-                        <>
-                          <CommandEmpty className="text-xs sm:text-sm py-4 text-center">
-                            수주번호를 찾을 수 없습니다.
-                          </CommandEmpty>
-                          <CommandGroup>
-                            {salesOrders.map((order) => (
-                              <CommandItem
-                                key={order.orderNo}
-                                value={`${order.orderNo} ${order.partnerName}`}
-                                onSelect={() => {
-                                  setFormData((prev) => ({
-                                    ...prev,
-                                    order_no: order.orderNo,
-                                  }));
-                                  setOrderOpen(false);
-                                }}
-                                className="text-xs sm:text-sm"
-                              >
-                                <Check
-                                  className={cn(
-                                    "mr-2 h-4 w-4",
-                                    formData.order_no === order.orderNo
-                                      ? "opacity-100"
-                                      : "opacity-0"
-                                  )}
-                                />
-                                <div className="flex flex-col">
-                                  <span className="font-medium">{order.orderNo}</span>
-                                  <span className="text-[10px] text-muted-foreground">
-                                    {order.status}
-                                    {order.partnerName ? ` | ${order.partnerName}` : ""}
-                                  </span>
-                                </div>
-                              </CommandItem>
-                            ))}
-                          </CommandGroup>
-                        </>
-                      )}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
-          </div>
-
-          {/* 오른쪽: 상세 내용 */}
-          <div className="flex-1 space-y-4 bg-muted/30 p-4 rounded-lg border border-border/50 min-w-0">
-            <h3 className="text-sm font-semibold pb-2 border-b">
-              클레임 상세 내용
-            </h3>
-
-            <div className="flex flex-col flex-1">
-              <Label htmlFor="claim_content" className="text-xs sm:text-sm">
-                클레임 내용 <span className="text-destructive">*</span>
-              </Label>
-              <Textarea
-                id="claim_content"
-                value={formData.claim_content || ""}
-                onChange={(e) => handleFormChange("claim_content", e.target.value)}
-                placeholder="클레임 내용을 상세히 입력해주세요"
-                className="min-h-[200px] resize-y text-xs sm:text-sm"
-              />
-            </div>
-
-            <div>
-              <Label htmlFor="process_content" className="text-xs sm:text-sm">
-                처리 내용
-              </Label>
-              <Textarea
-                id="process_content"
-                value={formData.process_content || ""}
-                onChange={(e) => handleFormChange("process_content", e.target.value)}
-                placeholder="처리 내용을 입력해주세요"
-                className="min-h-[150px] resize-y text-xs sm:text-sm"
-              />
-            </div>
-          </div>
-        </div>
-      </FullscreenDialog>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
       {/* 엑셀 업로드 모달 */}
       <ExcelUploadModal
@@ -1028,12 +912,21 @@ export default function ClaimManagementPage() {
         tableName={TABLE_NAME}
         onSuccess={() => {
           fetchData();
-          toast.success("엑셀 업로드가 완료되었습니다.");
+          toast.success("엑셀 업로드가 완료되었어요.");
         }}
       />
 
       {/* 확인 다이얼로그 */}
       {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_7/sales/customer/page.tsx b/frontend/app/(main)/COMPANY_7/sales/customer/page.tsx
index 663ad4f3..61e1269d 100644
--- a/frontend/app/(main)/COMPANY_7/sales/customer/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/sales/customer/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 /**
- * 거래처관리 — 하드코딩 페이지
+ * 거래처관리 — Type B 마스터-디테일 레이아웃 (리디자인)
  *
  * 좌측: 거래처 목록 (customer_mng)
- * 우측: 선택한 거래처의 품목별 단가 정보 (customer_item_prices, entity join → item_info)
+ * 우측: 품목별 단가 + 납품처 정보 탭
  *
  * 모달:
  * - 거래처 등록/수정 (customer_mng)
@@ -12,100 +12,111 @@
  * - 납품처 등록 (delivery_destination)
  */
 
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
-import {
-  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
-} from "@/components/ui/dialog";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Label } from "@/components/ui/label";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
 import {
   Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
-  Users, Package, MapPin, Search, X, Maximize2, Minimize2, Settings2,
+  Users, Package, MapPin, Search, X, Tag, Coins, Settings2, GripVertical,
+  ChevronRight, ChevronDown,
 } from "lucide-react";
+import {
+  DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
 import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
 import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { validateField, validateForm, formatField } from "@/lib/utils/validation";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
+import { getAvailableNumberingRulesForScreen, previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const CUSTOMER_TABLE = "customer_mng";
 const MAPPING_TABLE = "customer_item_mapping";
 const PRICE_TABLE = "customer_item_prices";
 const DELIVERY_TABLE = "delivery_destination";
+const CONTACT_TABLE = "customer_contact";
 
-// 좌측: 거래처 목록 컬럼
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "customer_code", label: "거래처코드", width: "w-[110px]" },
-  { key: "customer_name", label: "거래처명", minWidth: "min-w-[120px]" },
-  { key: "division", label: "거래유형", width: "w-[80px]" },
-  { key: "contact_person", label: "거래처담당자", width: "w-[90px]" },
-  { key: "internal_manager", label: "사내담당자", width: "w-[90px]" },
-  { key: "contact_phone", label: "전화번호", width: "w-[110px]" },
-  { key: "business_number", label: "사업자번호", width: "w-[110px]" },
-  { key: "email", label: "이메일", width: "w-[130px]" },
-  { key: "address", label: "주소", minWidth: "min-w-[150px]" },
-  { key: "status", label: "상태", width: "w-[60px]" },
+const CUSTOMER_GRID_COLUMNS = [
+  { key: "customer_code", label: "거래처코드" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "division", label: "거래유형" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "전화번호" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "status", label: "상태" },
 ];
 
-// 우측: 품목별 단가 컬럼
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "item_number", label: "품목코드", width: "w-[100px]" },
-  { key: "item_name", label: "품명", minWidth: "min-w-[100px]" },
-  { key: "customer_item_code", label: "거래처품번", width: "w-[100px]" },
-  { key: "customer_item_name", label: "거래처품명", width: "w-[100px]" },
-  { key: "base_price_type", label: "기준유형", width: "w-[80px]" },
-  { key: "base_price", label: "기준가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "discount_type", label: "할인유형", width: "w-[70px]" },
-  { key: "discount_value", label: "할인값", width: "w-[60px]", align: "right" },
-  { key: "calculated_price", label: "단가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
-];
+function SortableMappingRow({ id, children }: { id: string; children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform), transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+  return (
+    <div ref={setNodeRef} style={style} className="flex gap-2 items-center">
+      <div {...attributes} {...listeners} className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0">
+        <GripVertical className="h-3.5 w-3.5" />
+      </div>
+      {children}
+    </div>
+  );
+}
 
 export default function CustomerManagementPage() {
   const { user } = useAuth();
-  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-customer", CUSTOMER_TABLE, CUSTOMER_GRID_COLUMNS);
+  const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 좌측: 거래처 목록
   const [customers, setCustomers] = useState<any[]>([]);
   const [rawCustomers, setRawCustomers] = useState<any[]>([]);
   const [customerLoading, setCustomerLoading] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
+  const [mainContactMap, setMainContactMap] = useState<Record<string, any>>({});
   const [customerCount, setCustomerCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [gridColumns, setGridColumns] = useState<DataGridColumn[]>(LEFT_COLUMNS);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
   const [selectedCustomerId, setSelectedCustomerId] = useState<string | null>(null);
 
   // 우측: 탭
   const [rightTab, setRightTab] = useState<"items" | "delivery">("items");
   // 우측: 품목 단가
   const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceGroups, setPriceGroups] = useState<Record<string, { master: any; details: any[] }>>({});
   const [priceLoading, setPriceLoading] = useState(false);
   const [priceCheckedIds, setPriceCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [collapsedPriceCards, setCollapsedPriceCards] = useState<Set<string>>(new Set());
   // 우측: 납품처
   const [deliveryItems, setDeliveryItems] = useState<any[]>([]);
-  const [deliveryCheckedIds, setDeliveryCheckedIds] = useState<string[]>([]);
-
-  // 품목 편집 데이터 (더블클릭 시 — 상세 입력 모달 재활용)
-  const [editItemData, setEditItemData] = useState<any>(null);
-  const savingRef = useRef(false);
   const [deliveryLoading, setDeliveryLoading] = useState(false);
 
-  // 모달
+  // 품목 편집 데이터 (더블클릭 시 상세 입력 모달 재활용)
+  const [editItemData, setEditItemData] = useState<any>(null);
+  const savingRef = useRef(false);
+
+  // 거래처 모달
   const [customerModalOpen, setCustomerModalOpen] = useState(false);
   const [customerEditMode, setCustomerEditMode] = useState(false);
   const [customerForm, setCustomerForm] = useState<Record<string, any>>({});
@@ -116,27 +127,45 @@ export default function CustomerManagementPage() {
   const [itemSelectOpen, setItemSelectOpen] = useState(false);
   const [itemSearchKeyword, setItemSearchKeyword] = useState("");
   const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemTotalCount, setItemTotalCount] = useState(0);
   const [itemSearchLoading, setItemSearchLoading] = useState(false);
   const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
 
   // 품목 상세 입력 모달 (2단계: 거래처 품번/품명 + 단가)
   const [itemDetailOpen, setItemDetailOpen] = useState(false);
   const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
-  // 품목별 거래처 품번/품명 (다중)
   const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; customer_item_code: string; customer_item_name: string }>>>({});
-  // 품목별 단가 목록
   const [itemPrices, setItemPrices] = useState<Record<string, Array<{
     _id: string; start_date: string; end_date: string; currency_code: string;
     base_price_type: string; base_price: string; discount_type: string;
     discount_value: string; rounding_type: string; rounding_unit_value: string;
     calculated_price: string;
   }>>>({});
-  // 단가 카테고리 옵션
   const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
-  // 납품처 모달
-  const [deliveryModalOpen, setDeliveryModalOpen] = useState(false);
-  const [deliveryForm, setDeliveryForm] = useState<Record<string, any>>({});
+  // 거래처 모달 탭
+  const [customerModalTab, setCustomerModalTab] = useState<"basic" | "contacts" | "delivery">("basic");
+  // 담당자 (customer_contact) - 모달 내
+  const [modalContacts, setModalContacts] = useState<any[]>([]);
+  const [modalContactLoading, setModalContactLoading] = useState(false);
+  const [modalContactForm, setModalContactForm] = useState<Record<string, any>>({});
+  const [modalContactEditId, setModalContactEditId] = useState<string | null>(null);
+  const [modalContactFormOpen, setModalContactFormOpen] = useState(false);
+  const [modalContactSaving, setModalContactSaving] = useState(false);
+  // 납품처 (delivery_destination) - 모달 내
+  const [modalDeliveries, setModalDeliveries] = useState<any[]>([]);
+  const [modalDeliveryLoading, setModalDeliveryLoading] = useState(false);
+  const [modalDeliveryForm, setModalDeliveryForm] = useState<Record<string, any>>({});
+  const [modalDeliveryEditId, setModalDeliveryEditId] = useState<string | null>(null);
+  const [modalDeliveryFormOpen, setModalDeliveryFormOpen] = useState(false);
+  const [modalDeliverySaving, setModalDeliverySaving] = useState(false);
+  const [modalDeliveryFormErrors, setModalDeliveryFormErrors] = useState<Record<string, string>>({});
+
+  const [continuousInput, setContinuousInput] = useState(false);
+
+  // 세금유형 (기본정보 탭 내)
+  const [taxTypeRows, setTaxTypeRows] = useState<{ _id: string; tax_type_name: string; rate: string }[]>([]);
+  const [taxTypeOptions, setTaxTypeOptions] = useState<{ code: string; label: string }[]>([]);
 
   // 엑셀
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
@@ -145,21 +174,21 @@ export default function CustomerManagementPage() {
 
   // 카테고리
   const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
-  // 사원 목록 (사내담당자 선택용)
   const [employeeOptions, setEmployeeOptions] = useState<{ user_id: string; user_name: string; position_name?: string }[]>([]);
 
+
   // 카테고리 로드
   useEffect(() => {
+    const flatten = (vals: any[]): { code: string; label: string }[] => {
+      const result: { code: string; label: string }[] = [];
+      for (const v of vals) {
+        result.push({ code: v.valueCode, label: v.valueLabel });
+        if (v.children?.length) result.push(...flatten(v.children));
+      }
+      return result;
+    };
     const load = async () => {
       const optMap: Record<string, { code: string; label: string }[]> = {};
-      const flatten = (vals: any[]): { code: string; label: string }[] => {
-        const result: { code: string; label: string }[] = [];
-        for (const v of vals) {
-          result.push({ code: v.valueCode, label: v.valueLabel });
-          if (v.children?.length) result.push(...flatten(v.children));
-        }
-        return result;
-      };
       for (const col of ["division", "status"]) {
         try {
           const res = await apiClient.get(`/table-categories/${CUSTOMER_TABLE}/${col}/values`);
@@ -168,7 +197,6 @@ export default function CustomerManagementPage() {
       }
       setCategoryOptions(optMap);
 
-      // 단가 카테고리
       const priceOpts: Record<string, { code: string; label: string }[]> = {};
       for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
         try {
@@ -177,9 +205,14 @@ export default function CustomerManagementPage() {
         } catch { /* skip */ }
       }
       setPriceCategoryOptions(priceOpts);
+
+      // 세금유형 카테고리
+      try {
+        const taxRes = await apiClient.get(`/table-categories/customer_tax_type/tax_type_name/values`);
+        if (taxRes.data?.success) setTaxTypeOptions(flatten(taxRes.data.data || []));
+      } catch { /* skip */ }
     };
     load();
-    // 사원 목록 로드
     apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true })
       .then((res) => {
         const users = res.data?.data?.data || res.data?.data?.rows || [];
@@ -189,57 +222,46 @@ export default function CustomerManagementPage() {
       }).catch(() => {});
   }, []);
 
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    // 컬럼 표시/숨김/순서/너비
-    const colMap = new Map(LEFT_COLUMNS.map((c) => [c.key, c]));
-    const applied: DataGridColumn[] = [];
-    for (const cs of settings.columns) {
-      if (!cs.visible) continue;
-      const orig = colMap.get(cs.columnName);
-      if (orig) {
-        applied.push({ ...orig, width: `w-[${cs.width}px]`, minWidth: undefined });
-      }
-    }
-    const settingKeys = new Set(settings.columns.map((c) => c.columnName));
-    for (const col of LEFT_COLUMNS) {
-      if (!settingKeys.has(col.key)) applied.push(col);
-    }
-    setGridColumns(applied.length > 0 ? applied : LEFT_COLUMNS);
-    // 필터 설정
-    setFilterConfig(settings.filters);
-  }, []);
-
-  useEffect(() => {
-    const saved = loadTableSettings("customer-mng");
-    if (saved) applyTableSettings(saved);
-  }, []);
-
   // 거래처 목록 조회
   const fetchCustomers = useCallback(async () => {
     setCustomerLoading(true);
     try {
-      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
       const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
+        sort: { columnName: "customer_code", order: "desc" },
       });
       const raw = res.data?.data?.data || res.data?.data?.rows || [];
-      // raw 데이터 보관 (수정 시 원본 카테고리 코드 사용)
       setRawCustomers(raw);
-      // 카테고리 코드→라벨 변환
+
       const resolve = (col: string, code: string) => {
         if (!code) return "";
         return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
       };
-      const data = raw.map((r: any) => ({
-        ...r,
-        division: resolve("division", r.division),
-        status: resolve("status", r.status),
-        internal_manager: r.internal_manager
-          ? (employeeOptions.find((e) => e.user_id === r.internal_manager)?.user_name || r.internal_manager)
-          : "",
-      }));
+      const data = raw.map((r: any) => {
+        const mainContact = mainContactMap[r.id];
+        return {
+          ...r,
+          division: resolve("division", r.division),
+          status: resolve("status", r.status),
+          contact_person: mainContact?.contact_name || "",
+          contact_phone: mainContact?.contact_phone || "",
+          email: mainContact?.contact_email || "",
+        };
+      });
+      // 거래처코드 숫자 기준 내림차순 정렬
+      data.sort((a: any, b: any) => {
+        const aNum = parseInt((a.customer_code || "").replace(/\D/g, ""), 10) || 0;
+        const bNum = parseInt((b.customer_code || "").replace(/\D/g, ""), 10) || 0;
+        return bNum - aNum;
+      });
       setCustomers(data);
       setCustomerCount(res.data?.data?.total || raw.length);
     } catch (err) {
@@ -248,20 +270,39 @@ export default function CustomerManagementPage() {
     } finally {
       setCustomerLoading(false);
     }
-  }, [searchFilters, categoryOptions, employeeOptions]);
+  }, [searchFilters, categoryOptions, employeeOptions, mainContactMap]);
 
   useEffect(() => { fetchCustomers(); }, [fetchCustomers]);
 
-  // 선택된 거래처의 품목 단가 조회
+  // 메인 담당자 조회 (최초 1번 + 저장 후 갱신)
+  const fetchMainContacts = useCallback(async () => {
+    try {
+      const contactRes = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+        dataFilter: { enabled: true, filters: [{ columnName: "is_main", operator: "equals", value: "Y" }] },
+      });
+      const allContacts = contactRes.data?.data?.data || contactRes.data?.data?.rows || [];
+      const map: Record<string, any> = {};
+      for (const c of allContacts) {
+        if ((c.is_main === "Y" || c.is_main === true) && c.customer_id) {
+          map[c.customer_id] = c;
+        }
+      }
+      setMainContactMap(map);
+    } catch { /* skip */ }
+  }, []);
+
+  useEffect(() => { fetchMainContacts(); }, [fetchMainContacts]);
+
   const selectedCustomer = customers.find((c) => c.id === selectedCustomerId);
 
+  // 선택된 거래처의 품목 단가 조회
   useEffect(() => {
     if (!selectedCustomer?.customer_code) { setPriceItems([]); setPriceCheckedIds([]); return; }
     setPriceCheckedIds([]);
     const fetchItems = async () => {
       setPriceLoading(true);
       try {
-        // 1. customer_item_mapping 조회 (품목 매핑 — 기본 데이터)
         const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
           page: 1, size: 500,
           dataFilter: { enabled: true, filters: [
@@ -271,7 +312,6 @@ export default function CustomerManagementPage() {
         });
         const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
 
-        // 2. item_id → item_info 조인 (품명 등)
         const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
         let itemMap: Record<string, any> = {};
         if (itemIds.length > 0) {
@@ -287,7 +327,6 @@ export default function CustomerManagementPage() {
           } catch { /* skip */ }
         }
 
-        // 3. customer_item_prices 조회
         let allPrices: any[] = [];
         if (mappings.length > 0) {
           try {
@@ -302,33 +341,34 @@ export default function CustomerManagementPage() {
           } catch { /* skip */ }
         }
 
-        // 4. 매핑별 행 생성 + 오늘 날짜 기준 단가 + 같은 품목 첫 행만 품목코드/품명 표시
         const priceResolve = (col: string, code: string) => {
           if (!code) return "";
           return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
         };
-        const today = new Date().toISOString().split("T")[0];
+        const now = new Date();
+        const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+
+        // 품목 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
+        const grouped: Record<string, { master: any; details: any[] }> = {};
+        const flatItems: any[] = [];
         const seenItemIds = new Set<string>();
-
-        // item_id로 정렬하여 같은 품목끼리 묶기
-        const sortedMappings = [...mappings].sort((a: any, b: any) => (a.item_id || "").localeCompare(b.item_id || ""));
-
-        setPriceItems(sortedMappings.map((m: any) => {
+        for (const m of mappings) {
           const itemKey = m.item_id || "";
-          const itemInfo = itemMap[itemKey] || {};
-          const isFirstOfGroup = !seenItemIds.has(itemKey);
-          if (itemKey) seenItemIds.add(itemKey);
+          if (seenItemIds.has(itemKey)) continue; // 품목당 첫 매핑만 마스터
+          seenItemIds.add(itemKey);
 
-          // 오늘 날짜에 해당하는 단가
-          const itemPriceList = allPrices.filter((p: any) => p.item_id === itemKey);
+          const itemInfo = itemMap[itemKey] || {};
+          const itemPriceList = allPrices
+            .filter((p: any) => p.item_id === itemKey)
+            .sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
           const todayPrice = itemPriceList.find((p: any) =>
             (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
           ) || itemPriceList[0] || {};
 
-          return {
+          const masterRow = {
             ...m,
-            item_number: isFirstOfGroup ? itemKey : "",
-            item_name: isFirstOfGroup ? (itemInfo.item_name || "") : "",
+            item_number: itemKey,
+            item_name: itemInfo.item_name || "",
             base_price_type: priceResolve("base_price_type", todayPrice.base_price_type || ""),
             base_price: todayPrice.base_price || "",
             discount_type: priceResolve("discount_type", todayPrice.discount_type || ""),
@@ -336,7 +376,21 @@ export default function CustomerManagementPage() {
             calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
             currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
           };
-        }));
+
+          // 단가 리스트 (라벨 변환)
+          const priceDetails = itemPriceList.map((p: any) => ({
+            ...p,
+            base_price_type_label: priceResolve("base_price_type", p.base_price_type || ""),
+            discount_type_label: priceResolve("discount_type", p.discount_type || ""),
+            currency_label: priceResolve("currency_code", p.currency_code || ""),
+            is_current: (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today),
+          }));
+
+          grouped[itemKey] = { master: masterRow, details: priceDetails };
+          flatItems.push(masterRow);
+        }
+        setPriceGroups(grouped);
+        setPriceItems(flatItems);
       } catch (err) {
         console.error("품목 조회 실패:", err);
       } finally {
@@ -348,8 +402,7 @@ export default function CustomerManagementPage() {
 
   // 납품처 조회
   useEffect(() => {
-    if (!selectedCustomer?.customer_code) { setDeliveryItems([]); setDeliveryCheckedIds([]); return; }
-    setDeliveryCheckedIds([]);
+    if (!selectedCustomer?.customer_code) { setDeliveryItems([]); return; }
     const fetchDelivery = async () => {
       setDeliveryLoading(true);
       try {
@@ -371,21 +424,198 @@ export default function CustomerManagementPage() {
     return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
   };
 
-  // 거래처 등록 모달
-  const openCustomerRegister = () => {
+  // 모달 내 담당자 목록 조회
+  const fetchModalContacts = useCallback(async (customerId: string) => {
+    setModalContactLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      setModalContacts(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalContacts([]); } finally { setModalContactLoading(false); }
+  }, []);
+
+  // 모달 내 납품처 목록 조회
+  const fetchModalDeliveries = useCallback(async (customerCode: string) => {
+    setModalDeliveryLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
+        autoFilter: true,
+      });
+      setModalDeliveries(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalDeliveries([]); } finally { setModalDeliveryLoading(false); }
+  }, []);
+
+  // 담당자 저장 (등록/수정)
+  const handleModalContactSave = async () => {
+    if (!modalContactForm.contact_name) { toast.error("담당자명은 필수입니다."); return; }
+    if (modalContactEditId) {
+      // 수정 — 로컬 리스트에서 교체 + 메인 설정 시 다른 메인 해제
+      const isSettingMain = modalContactForm.is_main === "Y" || modalContactForm.is_main === true;
+      setModalContacts((prev) => prev.map((c) =>
+        (c._localId || c.id) === modalContactEditId
+          ? { ...c, ...modalContactForm }
+          : isSettingMain ? { ...c, is_main: "N" } : c
+      ));
+    } else {
+      // 추가 — 로컬 리스트에 카드 추가
+      setModalContacts((prev) => [...prev, {
+        ...modalContactForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalContactFormOpen(false);
+    setModalContactForm({});
+    setModalContactEditId(null);
+  };
+
+  // 담당자 삭제
+  const handleModalContactDelete = (contactId: string) => {
+    setModalContacts((prev) => prev.filter((c) => (c._localId || c.id) !== contactId));
+  };
+
+  // 납품처 자동채번 유틸
+  const generateDeliveryCode = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DELIVERY_TABLE}/destination_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        const allRes = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "destination_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const match = (row.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        // 로컬에 추가된 것도 포함
+        for (const d of modalDeliveries) {
+          const match = (d.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLen = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          return prefix + String(maxSeq + 1).padStart(seqLen, "0");
+        }
+      }
+    } catch { /* skip */ }
+    return "";
+  };
+
+  // 납품처 저장 (모달 내)
+  const handleModalDeliverySave = async () => {
+    if (!modalDeliveryForm.destination_name) { toast.error("납품처명은 필수입니다."); return; }
+    if (modalDeliveryEditId) {
+      const isSettingMain = modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true;
+      setModalDeliveries((prev) => prev.map((d) =>
+        (d._localId || d.id) === modalDeliveryEditId
+          ? { ...d, ...modalDeliveryForm }
+          : isSettingMain ? { ...d, is_default: "N" } : d
+      ));
+    } else {
+      setModalDeliveries((prev) => [...prev, {
+        ...modalDeliveryForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalDeliveryFormOpen(false);
+    setModalDeliveryForm({});
+    setModalDeliveryEditId(null);
+    setModalDeliveryFormErrors({});
+  };
+
+  const handleModalDeliveryDelete = (deliveryId: string) => {
+    setModalDeliveries((prev) => prev.filter((d) => (d._localId || d.id) !== deliveryId));
+  };
+
+  // 거래처 등록 모달 열기
+  const openCustomerRegister = async () => {
     setCustomerForm({});
     setFormErrors({});
     setCustomerEditMode(false);
+    setCustomerModalTab("basic");
+    setModalContacts([]);
+    setModalDeliveries([]);
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setTaxTypeRows([]);
     setCustomerModalOpen(true);
+    // 거래처 코드 자동 채번 — 기존 데이터 max값 기반
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${CUSTOMER_TABLE}/customer_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        // 기존 데이터에서 CUST-XXX 패턴의 최대 순번 조회
+        const allRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "customer_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const code = row.customer_code || "";
+          const match = code.match(/(\d+)$/);
+          if (match) {
+            const seq = parseInt(match[1], 10);
+            if (seq > maxSeq) maxSeq = seq;
+          }
+        }
+        // preview로 접두어 패턴 가져오기
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLength = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          const nextSeq = maxSeq + 1;
+          const nextCode = prefix + String(nextSeq).padStart(seqLength, "0");
+          setCustomerForm((prev) => ({ ...prev, customer_code: nextCode, _numberingRuleId: ruleId }));
+        }
+      }
+    } catch { /* skip */ }
   };
 
   const openCustomerEdit = () => {
     if (!selectedCustomer) return;
-    // raw 데이터에서 원본 카테고리 코드 가져오기 (라벨 변환 전 데이터)
     const rawData = rawCustomers.find((c) => c.id === selectedCustomerId);
     setCustomerForm({ ...(rawData || selectedCustomer) });
     setFormErrors({});
     setCustomerEditMode(true);
+    setCustomerModalTab("basic");
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setModalContactForm({});
+    setModalDeliveryForm({});
+    setModalContactEditId(null);
+    setModalDeliveryEditId(null);
+    // 수정 모드에서는 바로 조회
+    const code = (rawData || selectedCustomer).customer_code;
+    const id = (rawData || selectedCustomer).id;
+    if (id) {
+      fetchModalContacts(id);
+      // 세금유형 로드
+      apiClient.post(`/table-management/tables/customer_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: id }] },
+        autoFilter: true,
+      }).then((res: any) => {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        setTaxTypeRows(rows.map((r: any) => ({ _id: r.id, tax_type_name: r.tax_type_name || "", rate: String(r.rate || "") })));
+      }).catch(() => setTaxTypeRows([]));
+    }
+    if (code) fetchModalDeliveries(code);
     setCustomerModalOpen(true);
   };
 
@@ -401,10 +631,84 @@ export default function CustomerManagementPage() {
     });
   };
 
+  // 세금유형/담당자/납품처를 한번에 저장하는 헬퍼
+  const saveSubTables = async (customerId: string, customerCode: string) => {
+    // 세금유형 — 기존 삭제 후 재생성
+    try {
+      const existTax = await apiClient.post(`/table-management/tables/customer_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      const existRows = existTax.data?.data?.data || existTax.data?.data?.rows || [];
+      if (existRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/customer_tax_type/delete`, {
+          data: existRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+      for (const t of taxTypeRows.filter((r) => r.tax_type_name)) {
+        await apiClient.post(`/table-management/tables/customer_tax_type/add`, {
+          id: crypto.randomUUID(), customer_id: customerId,
+          tax_type_name: t.tax_type_name, tax_type_id: t.tax_type_name,
+          rate: t.rate ? Number(t.rate) : 0,
+        });
+      }
+    } catch { /* skip */ }
+
+    // 담당자 — 기존 삭제 후 전체 재생성
+    try {
+      const existContacts = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      const existCRows = existContacts.data?.data?.data || existContacts.data?.data?.rows || [];
+      if (existCRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${CONTACT_TABLE}/delete`, {
+          data: existCRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const c of modalContacts) {
+      try {
+        await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/add`, {
+          id: crypto.randomUUID(), customer_id: customerId,
+          contact_name: c.contact_name || "", contact_phone: c.contact_phone || "",
+          contact_email: c.contact_email || "", department: c.department || "",
+          is_main: c.is_main || "N", memo: c.memo || "",
+        });
+      } catch { /* skip */ }
+    }
+
+    // 납품처 — 기존 삭제 후 전체 재생성
+    try {
+      const existDeliveries = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
+        autoFilter: true,
+      });
+      const existDRows = existDeliveries.data?.data?.data || existDeliveries.data?.data?.rows || [];
+      if (existDRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
+          data: existDRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const d of modalDeliveries) {
+      try {
+        await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
+          id: crypto.randomUUID(), customer_code: customerCode,
+          destination_code: d.destination_code || "", destination_name: d.destination_name || "",
+          address: d.address || "", manager_name: d.manager_name || "",
+          phone: d.phone || "", memo: d.memo || "", is_default: d.is_default || "N",
+        });
+      } catch { /* skip */ }
+    }
+  };
+
   const handleCustomerSave = async () => {
     if (!customerForm.customer_name) { toast.error("거래처명은 필수입니다."); return; }
     if (!customerForm.status) { toast.error("상태는 필수입니다."); return; }
-    // 폼 검증
     const errors = validateForm(customerForm, ["contact_phone", "email", "business_number"]);
     setFormErrors(errors);
     if (Object.keys(errors).length > 0) {
@@ -413,23 +717,72 @@ export default function CustomerManagementPage() {
     }
     setSaving(true);
     try {
-      const { id, created_date, updated_date, writer, company_code, ...fields } = customerForm;
-      // 빈 문자열을 null로 변환 (DB 타입 호환)
+      const { id, created_date, updated_date, writer, company_code, _numberingRuleId, ...fields } = customerForm;
       const cleanFields: Record<string, any> = {};
       for (const [key, value] of Object.entries(fields)) {
         cleanFields[key] = value === "" ? null : value;
       }
+
       if (customerEditMode && id) {
+        // 수정
         await apiClient.put(`/table-management/tables/${CUSTOMER_TABLE}/edit`, {
           originalData: { id }, updatedData: cleanFields,
         });
-        toast.success("수정되었습니다.");
+        await saveSubTables(id, cleanFields.customer_code || customerForm.customer_code);
+        toast.success("저장되었습니다.");
       } else {
+        // 신규 등록
         await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/add`, cleanFields);
-        toast.success("등록되었습니다.");
+        // id 획득
+        const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: cleanFields.customer_code }] },
+          autoFilter: true,
+        });
+        const newRow = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+        if (newRow?.id) {
+          await saveSubTables(newRow.id, cleanFields.customer_code);
+        }
+        toast.success("거래처가 등록되었습니다.");
       }
-      setCustomerModalOpen(false);
+
       fetchCustomers();
+      fetchMainContacts();
+      if (!customerEditMode && continuousInput) {
+        // 연속입력 — 폼 초기화하고 모달 유지
+        setCustomerForm({});
+        setModalContacts([]);
+        setModalDeliveries([]);
+        setTaxTypeRows([]);
+        setCustomerModalTab("basic");
+        // 새 코드 채번
+        try {
+          const ruleRes = await apiClient.get(`/numbering-rules/by-column/${CUSTOMER_TABLE}/customer_code`);
+          const ruleData = ruleRes.data;
+          if (ruleData?.success && ruleData?.data?.ruleId) {
+            const ruleId = ruleData.data.ruleId;
+            const allRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, { page: 1, size: 500, autoFilter: true, sort: { columnName: "customer_code", order: "desc" } });
+            const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+            let maxSeq = 0;
+            for (const row of allRows) { const match = (row.customer_code || "").match(/(\d+)$/); if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; } }
+            const previewRes = await previewNumberingCode(ruleId);
+            if (previewRes.success && previewRes.data?.generatedCode) {
+              const prefix = previewRes.data.generatedCode.replace(/\d+$/, "");
+              const seqLen = (previewRes.data.generatedCode.match(/(\d+)$/) || ["", "001"])[1].length;
+              setCustomerForm({ customer_code: prefix + String(maxSeq + 1).padStart(seqLen, "0") });
+            }
+          }
+        } catch { /* skip */ }
+        toast.success("등록 완료. 다음 거래처를 입력하세요.");
+      } else {
+        setCustomerModalOpen(false);
+        // 우측 패널 갱신
+        if (selectedCustomerId) {
+          const cid = selectedCustomerId;
+          setSelectedCustomerId(null);
+          setTimeout(() => setSelectedCustomerId(cid), 50);
+        }
+      }
     } catch (err: any) {
       toast.error(err.response?.data?.message || "저장에 실패했습니다.");
     } finally {
@@ -441,7 +794,6 @@ export default function CustomerManagementPage() {
   const handleCustomerDelete = async () => {
     if (!selectedCustomerId) return;
     const ok = await confirm("거래처를 삭제하시겠습니까?", {
-      description: "관련된 품목 매핑, 단가, 납품처 정보도 함께 삭제됩니다.",
       variant: "destructive", confirmText: "삭제",
     });
     if (!ok) return;
@@ -459,19 +811,26 @@ export default function CustomerManagementPage() {
   const searchItems = async () => {
     setItemSearchLoading(true);
     try {
-      const filters: any[] = [];
+      const filters: any[] = [
+        { columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" },
+      ];
       if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
-      // 영업관리/판매품 division 필터 (다중값 contains 매칭)
-      filters.push({ columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" });
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
-        page: 1, size: 50,
-        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters },
         autoFilter: true,
       });
       const allItems = res.data?.data?.data || res.data?.data?.rows || [];
-      // 이미 등록된 품목 제외
+      setItemTotalCount(allItems.length);
       const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
-      setItemSearchResults(allItems.filter((item: any) => !existingItemIds.has(item.item_number) && !existingItemIds.has(item.id)));
+      const seenNumbers = new Set<string>();
+      const deduped = allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        if (item.item_number && seenNumbers.has(item.item_number)) return false;
+        if (item.item_number) seenNumbers.add(item.item_number);
+        return true;
+      });
+      setItemSearchResults(deduped);
     } catch { /* skip */ } finally { setItemSearchLoading(false); }
   };
 
@@ -480,7 +839,6 @@ export default function CustomerManagementPage() {
     const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
     if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
     setSelectedItemsForDetail(selected);
-    // 초기 매핑/단가 데이터 세팅
     const mappings: typeof itemMappings = {};
     const prices: typeof itemPrices = {};
     for (const item of selected) {
@@ -508,7 +866,6 @@ export default function CustomerManagementPage() {
     }));
   };
 
-  // 거래처 품번/품명 행 삭제
   const removeMappingRow = (itemKey: string, rowId: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -516,7 +873,17 @@ export default function CustomerManagementPage() {
     }));
   };
 
-  // 거래처 품번/품명 행 수정
+  const handleMappingDragEnd = (itemKey: string, event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setItemMappings((prev) => {
+      const arr = [...(prev[itemKey] || [])];
+      const oldIdx = arr.findIndex((r) => r._id === active.id);
+      const newIdx = arr.findIndex((r) => r._id === over.id);
+      return { ...prev, [itemKey]: arrayMove(arr, oldIdx, newIdx) };
+    });
+  };
+
   const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
     setItemMappings((prev) => ({
       ...prev,
@@ -538,7 +905,6 @@ export default function CustomerManagementPage() {
     }));
   };
 
-  // 단가 행 삭제
   const removePriceRow = (itemKey: string, rowId: string) => {
     setItemPrices((prev) => ({
       ...prev,
@@ -546,34 +912,44 @@ export default function CustomerManagementPage() {
     }));
   };
 
-  // 단가 행 값 변경
   const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
     setItemPrices((prev) => ({
       ...prev,
       [itemKey]: (prev[itemKey] || []).map((r) => {
         if (r._id !== rowId) return r;
         const updated = { ...r, [field]: value };
-        // 단가 자동 계산: base_price - discount
-        if (["base_price", "discount_type", "discount_value"].includes(field)) {
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
           const bp = Number(updated.base_price) || 0;
           const dv = Number(updated.discount_value) || 0;
           const dt = updated.discount_type;
           let calc = bp;
-          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100); // 할인율
-          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv; // 할인금액
-          updated.calculated_price = String(Math.round(calc));
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1; // "10원" → 10, "100원" → 100
+          if (roundLabel === "반올림") {
+            calc = Math.round(calc / unit) * unit;
+          } else if (roundLabel === "절삭") {
+            calc = Math.floor(calc / unit) * unit;
+          } else if (roundLabel === "올림") {
+            calc = Math.ceil(calc / unit) * unit;
+          }
+          updated.calculated_price = String(Math.floor(calc));
         }
         return updated;
       }),
     }));
   };
 
-  // 품목 상세 저장 (mapping + prices 일괄)
-  // 우측 품목 편집 열기 — 등록과 동일한 상세 입력 모달을 재활용
+  // 품목 편집 열기
   const openEditItem = async (row: any) => {
     const itemKey = row.item_number || row.item_id;
-
-    // item_info에서 품목 정보 조회
     let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
     try {
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
@@ -585,7 +961,6 @@ export default function CustomerManagementPage() {
       if (found) itemInfo = found;
     } catch { /* skip */ }
 
-    // DB에서 해당 품목의 모든 매핑 조회
     let mappingRows: any[] = [];
     try {
       const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
@@ -605,7 +980,6 @@ export default function CustomerManagementPage() {
         }));
     } catch { /* skip */ }
 
-    // DB에서 해당 품목의 모든 기간별 단가 조회
     let priceRows: any[] = [];
     try {
       const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
@@ -631,7 +1005,6 @@ export default function CustomerManagementPage() {
       }));
     } catch { /* skip */ }
 
-    // 빈 단가 행이 없으면 하나 추가
     if (priceRows.length === 0) {
       priceRows.push({
         _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
@@ -643,7 +1016,7 @@ export default function CustomerManagementPage() {
     setSelectedItemsForDetail([itemInfo]);
     setItemMappings({ [itemKey]: mappingRows });
     setItemPrices({ [itemKey]: priceRows });
-    setEditItemData(row); // 편집 모드 표시용
+    setEditItemData(row);
     setItemDetailOpen(true);
   };
 
@@ -659,44 +1032,77 @@ export default function CustomerManagementPage() {
         const mappingRows = itemMappings[itemKey] || [];
 
         if (isEditingExisting && editItemData?.id) {
-          // 편집 모드: 기존 mapping UPDATE
-          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
-            originalData: { id: editItemData.id },
-            updatedData: {
-              customer_item_code: mappingRows[0]?.customer_item_code || "",
-              customer_item_name: mappingRows[0]?.customer_item_name || "",
-              base_price: null, // prices 테이블로 이동
-              discount_type: null,
-              discount_value: null,
-              calculated_price: null,
-            },
-          });
+          // 기존 매핑 조회
+          let existingMaps: any[] = [];
+          try {
+            const existingMappings = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingMaps = existingMappings.data?.data?.data || existingMappings.data?.data?.rows || [];
+          } catch { /* skip */ }
 
-          // 기존 prices 삭제 후 재등록
+          // 매핑 upsert: 기존 것은 update, 새 것은 insert, 남은 것은 delete
+          const usedExistingIds = new Set<string>();
+          let firstMappingId: string | null = editItemData.id;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const existMap = existingMaps[mi];
+            if (existMap) {
+              // update
+              await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+                originalData: { id: existMap.id },
+                updatedData: {
+                  customer_item_code: mappingRows[mi].customer_item_code || "",
+                  customer_item_name: mappingRows[mi].customer_item_name || "",
+                },
+              });
+              usedExistingIds.add(existMap.id);
+              if (mi === 0) firstMappingId = existMap.id;
+            } else {
+              // insert
+              const mRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+                id: crypto.randomUUID(),
+                customer_id: selectedCustomer.customer_code, item_id: itemKey,
+                customer_item_code: mappingRows[mi].customer_item_code || "",
+                customer_item_name: mappingRows[mi].customer_item_name || "",
+              });
+              if (mi === 0 && !firstMappingId) firstMappingId = mRes.data?.data?.id || null;
+            }
+          }
+          // 초과분 delete
+          const toDeleteMaps = existingMaps.filter((m) => !usedExistingIds.has(m.id));
+          if (toDeleteMaps.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: toDeleteMaps.map((m: any) => ({ id: m.id })),
+            });
+          }
+
+          // 기존 단가 조회
+          let existingPriceRows: any[] = [];
           try {
             const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
               page: 1, size: 100,
               dataFilter: { enabled: true, filters: [
-                { columnName: "mapping_id", operator: "equals", value: editItemData.id },
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
               ]}, autoFilter: true,
             });
-            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
-            if (existing.length > 0) {
-              await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
-                data: existing.map((p: any) => ({ id: p.id })),
-              });
-            }
+            existingPriceRows = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
           } catch { /* skip */ }
 
-          // 새 prices INSERT
+          // 단가 upsert
           const priceRows = (itemPrices[itemKey] || []).filter((p) =>
             (p.base_price && Number(p.base_price) > 0) || p.start_date
           );
-          for (const price of priceRows) {
-            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
-              mapping_id: editItemData.id,
-              customer_id: selectedCustomer.customer_code,
-              item_id: itemKey,
+          const usedPriceIds = new Set<string>();
+          for (let pi = 0; pi < priceRows.length; pi++) {
+            const price = priceRows[pi];
+            const priceData = {
+              mapping_id: firstMappingId || editItemData.id,
+              customer_id: selectedCustomer.customer_code, item_id: itemKey,
               start_date: price.start_date || null, end_date: price.end_date || null,
               currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
               base_price: price.base_price ? Number(price.base_price) : null,
@@ -704,10 +1110,28 @@ export default function CustomerManagementPage() {
               discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
               rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
               calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            };
+            const existPrice = existingPriceRows[pi];
+            if (existPrice) {
+              await apiClient.put(`/table-management/tables/${PRICE_TABLE}/edit`, {
+                originalData: { id: existPrice.id },
+                updatedData: priceData,
+              });
+              usedPriceIds.add(existPrice.id);
+            } else {
+              await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+                id: crypto.randomUUID(), ...priceData,
+              });
+            }
+          }
+          // 초과분 delete
+          const toDeletePrices = existingPriceRows.filter((p) => !usedPriceIds.has(p.id));
+          if (toDeletePrices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: toDeletePrices.map((p: any) => ({ id: p.id })),
             });
           }
         } else {
-          // 신규 등록 모드 — 거래처 품번이 없는 경우만 중복 체크
           if (!mappingRows.length || !mappingRows[0]?.customer_item_code) {
             const existingCheck = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
               page: 1, size: 1,
@@ -724,6 +1148,7 @@ export default function CustomerManagementPage() {
 
           let mappingId: string | null = null;
           const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
             customer_id: selectedCustomer.customer_code, item_id: itemKey,
             customer_item_code: mappingRows[0]?.customer_item_code || "",
             customer_item_name: mappingRows[0]?.customer_item_name || "",
@@ -732,6 +1157,7 @@ export default function CustomerManagementPage() {
 
           for (let mi = 1; mi < mappingRows.length; mi++) {
             await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
               customer_id: selectedCustomer.customer_code, item_id: itemKey,
               customer_item_code: mappingRows[mi].customer_item_code || "",
               customer_item_name: mappingRows[mi].customer_item_name || "",
@@ -743,6 +1169,7 @@ export default function CustomerManagementPage() {
           );
           for (const price of priceRows) {
             await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
               mapping_id: mappingId || "", customer_id: selectedCustomer.customer_code, item_id: itemKey,
               start_date: price.start_date || null, end_date: price.end_date || null,
               currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
@@ -759,7 +1186,6 @@ export default function CustomerManagementPage() {
       setItemDetailOpen(false);
       setEditItemData(null);
       setItemCheckedIds(new Set());
-      // 우측 새로고침
       const cid = selectedCustomerId;
       setSelectedCustomerId(null);
       setTimeout(() => setSelectedCustomerId(cid), 50);
@@ -771,26 +1197,7 @@ export default function CustomerManagementPage() {
     }
   };
 
-  // 납품처 저장
-  const handleDeliverySave = async () => {
-    if (!deliveryForm.destination_name || !selectedCustomer) return;
-    try {
-      await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
-        ...deliveryForm,
-        customer_code: selectedCustomer.customer_code,
-      });
-      toast.success("납품처가 등록되었습니다.");
-      setDeliveryModalOpen(false);
-      // 납품처 목록 새로고침
-      const cid = selectedCustomerId;
-      setSelectedCustomerId(null);
-      setTimeout(() => setSelectedCustomerId(cid), 50);
-    } catch (err: any) {
-      toast.error(err.response?.data?.message || "납품처 등록에 실패했습니다.");
-    }
-  };
-
-  // 우측: 품목 매핑 삭제 (관련 단가도 함께 삭제)
+  // 품목 매핑 삭제
   const handlePriceItemDelete = async () => {
     if (priceCheckedIds.length === 0) return;
     const ok = await confirm(`선택한 ${priceCheckedIds.length}개 품목 매핑을 삭제하시겠습니까?`, {
@@ -799,8 +1206,6 @@ export default function CustomerManagementPage() {
     });
     if (!ok) return;
     try {
-      // 매핑 삭제 — 관련 단가는 서버에서 cascade 또는 별도 삭제
-      // 먼저 관련 단가 삭제 시도
       for (const mappingId of priceCheckedIds) {
         try {
           const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
@@ -816,13 +1221,11 @@ export default function CustomerManagementPage() {
           }
         } catch { /* skip */ }
       }
-      // 매핑 삭제
       await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
         data: priceCheckedIds.map((id) => ({ id })),
       });
       toast.success(`${priceCheckedIds.length}개 품목 매핑이 삭제되었습니다.`);
       setPriceCheckedIds([]);
-      // 우측 새로고침
       const cid = selectedCustomerId;
       setSelectedCustomerId(null);
       setTimeout(() => setSelectedCustomerId(cid), 50);
@@ -831,71 +1234,78 @@ export default function CustomerManagementPage() {
     }
   };
 
-  // 우측: 납품처 삭제
-  const handleDeliveryDelete = async () => {
-    if (deliveryCheckedIds.length === 0) return;
-    const ok = await confirm(`선택한 ${deliveryCheckedIds.length}개 납품처를 삭제하시겠습니까?`, {
-      variant: "destructive", confirmText: "삭제",
-    });
-    if (!ok) return;
-    try {
-      await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
-        data: deliveryCheckedIds.map((id) => ({ id })),
-      });
-      toast.success(`${deliveryCheckedIds.length}개 납품처가 삭제되었습니다.`);
-      setDeliveryCheckedIds([]);
-      // 우측 새로고침
-      const cid = selectedCustomerId;
-      setSelectedCustomerId(null);
-      setTimeout(() => setSelectedCustomerId(cid), 50);
-    } catch {
-      toast.error("삭제에 실패했습니다.");
-    }
-  };
+  // EDataTable 컬럼 정의 (거래처 목록) — ts.visibleColumns 순서를 따름
+  const customerColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      customer_code: { width: "w-[120px]" },
+      customer_name: { minWidth: "min-w-[140px]" },
+      division: {
+        width: "w-[80px]",
+        render: (val: any) =>
+          val ? (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
+              {val}
+            </Badge>
+          ) : null,
+      },
+      contact_person: { width: "w-[80px]" },
+      contact_phone: { width: "w-[120px]" },
+      email: { width: "w-[160px]" },
+      business_number: { width: "w-[120px]" },
+      address: { minWidth: "min-w-[150px]" },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val}
+            </Badge>
+          ) : null,
+      },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
 
   // 엑셀 다운로드
   const handleExcelDownload = async () => {
     if (customers.length === 0) return;
     toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
     try {
-      // 전체 거래처의 품목 매핑 + 단가 조회
       const allMappings: any[] = [];
-      const custCodes = customers.map((c) => c.customer_code).filter(Boolean);
-
-      if (custCodes.length > 0) {
-        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
-          page: 1, size: 5000, autoFilter: true,
-        });
-        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
-
-        // item_id → item_info 조인
-        const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
-        let itemMap: Record<string, any> = {};
-        if (itemIds.length > 0) {
-          try {
-            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
-              page: 1, size: itemIds.length + 10,
-              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
-              autoFilter: true,
-            });
-            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
-              itemMap[item.item_number] = item;
-            }
-          } catch { /* skip */ }
-        }
-
-        for (const m of mappings) {
-          const itemInfo = itemMap[m.item_id] || {};
-          allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
-        }
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 5000, autoFilter: true,
+      });
+      const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemIds.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+            autoFilter: true,
+          });
+          for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+            itemMap[item.item_number] = item;
+          }
+        } catch { /* skip */ }
+      }
+      for (const m of mappings) {
+        const itemInfo = itemMap[m.item_id] || {};
+        allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
       }
 
-      // 거래처 + 품목 플랫 데이터 생성
       const rows: Record<string, any>[] = [];
       for (const c of customers) {
         const custMappings = allMappings.filter((m) => m.customer_id === c.customer_code);
         if (custMappings.length === 0) {
-          // 품목 없는 거래처도 1행
           rows.push({
             거래처코드: c.customer_code, 거래처명: c.customer_name,
             거래유형: getCategoryLabel("division", c.division),
@@ -922,360 +1332,1140 @@ export default function CustomerManagementPage() {
           }
         }
       }
-
       await exportToExcel(rows, "거래처관리.xlsx", "거래처+품목");
       toast.dismiss("excel-dl");
       toast.success(`${rows.length}행 다운로드 완료`);
     } catch (err) {
       toast.dismiss("excel-dl");
-      console.error("엑셀 다운로드 실패:", err);
       toast.error("다운로드에 실패했습니다.");
     }
   };
 
-  // 셀렉트 렌더링
-  const renderSelect = (field: string, value: string, onChange: (v: string) => void, placeholder: string) => (
-    <Select value={value || "__none__"} onValueChange={(v) => onChange(v === "__none__" ? "" : v)}>
-      <SelectTrigger className="h-9"><SelectValue placeholder={placeholder} /></SelectTrigger>
-      <SelectContent>
-        <SelectItem value="__none__">선택 안 함</SelectItem>
-        {(categoryOptions[field] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-      </SelectContent>
-    </Select>
-  );
-
   return (
-    <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
       <DynamicSearchFilter
         tableName={CUSTOMER_TABLE}
-        filterId="customer-mng"
+        filterId="c16-customer"
         onFilterChange={setSearchFilters}
-        dataCount={customerCount}
-        externalFilterConfig={filterConfig}
-        extraActions={
-          <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" disabled={excelDetecting}
-              onClick={async () => {
-                setExcelDetecting(true);
-                try {
-                  const result = await autoDetectMultiTableConfig(CUSTOMER_TABLE);
-                  if (result.success && result.data) {
-                    setExcelChainConfig(result.data);
-                    setExcelUploadOpen(true);
-                  } else {
-                    toast.error(result.message || "테이블 구조 분석 실패");
-                  }
-                } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
-              }}>
-              {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />} 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
-              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
-            </Button>
-          </div>
-        }
+        dataCount={customers.length}
+        externalFilterConfig={ts.filterConfig}
       />
 
-      {/* 분할 패널 */}
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button
+            variant="outline" size="sm" className="h-8" disabled={excelDetecting}
+            onClick={async () => {
+              setExcelDetecting(true);
+              try {
+                const result = await autoDetectMultiTableConfig(CUSTOMER_TABLE);
+                if (result.success && result.data) {
+                  setExcelChainConfig(result.data);
+                  setExcelUploadOpen(true);
+                } else {
+                  toast.error(result.message || "테이블 구조 분석 실패");
+                }
+              } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+            }}
+          >
+            {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />}
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
       <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
         <ResizablePanelGroup direction="horizontal">
           {/* 좌측: 거래처 목록 */}
           <ResizablePanel defaultSize={55} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Users className="w-4 h-4" /> 거래처 목록
-                  <Badge variant="secondary" className="font-normal">{customerCount}건</Badge>
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">거래처 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {customerCount}건
+                  </span>
                 </div>
-                <div className="flex gap-1.5">
-                  <Button size="sm" onClick={openCustomerRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
-                  <Button variant="outline" size="sm" disabled={!selectedCustomerId} onClick={openCustomerEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
-                  <Button variant="destructive" size="sm" disabled={!selectedCustomerId} onClick={handleCustomerDelete}><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                <div className="flex items-center gap-1.5">
+                  <label className="flex items-center gap-1.5 cursor-pointer mr-1">
+                    <input type="checkbox" checked={showInactive} onChange={(e) => setShowInactive(e.target.checked)} className="rounded" />
+                    <span className="text-[11px] text-muted-foreground">거래정지 포함</span>
+                  </label>
+                  <Button size="sm" onClick={openCustomerRegister}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedCustomerId} onClick={openCustomerEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedCustomerId} onClick={handleCustomerDelete}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid
-                gridId="customer-left"
-                columns={gridColumns}
-                data={customers}
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={customerColumns}
+                data={ts.groupData(showInactive ? customers : customers.filter((c) => c.status !== "거래정지"))}
+                rowKey={(row) => row.id}
                 loading={customerLoading}
+                emptyMessage="등록된 거래처가 없어요"
                 selectedId={selectedCustomerId}
-                onSelect={setSelectedCustomerId}
-                onRowDoubleClick={() => openCustomerEdit()}
-                tableName={CUSTOMER_TABLE}
-                emptyMessage="등록된 거래처가 없습니다"
+                onSelect={(id) => setSelectedCustomerId(id)}
+                onRowDoubleClick={(row) => { setSelectedCustomerId(row.id); openCustomerEdit(); }}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-customer"
               />
             </div>
           </ResizablePanel>
 
           <ResizableHandle withHandle />
 
-          {/* 우측: 탭 (품목 정보 / 납품처) */}
+          {/* 우측: 디테일 패널 */}
           <ResizablePanel defaultSize={45} minSize={25}>
             <div className="flex flex-col h-full">
-              {/* 탭 헤더 */}
-              <div className="flex items-center justify-between p-2 border-b bg-muted/10 shrink-0">
-                <div className="flex items-center gap-1">
-                  <button onClick={() => setRightTab("items")}
-                    className={cn("px-3 py-1.5 text-sm rounded-md transition-colors",
-                      rightTab === "items" ? "bg-primary text-primary-foreground font-medium" : "hover:bg-muted text-muted-foreground")}>
-                    <Package className="w-3.5 h-3.5 inline mr-1" />품목 정보
-                  </button>
-                  <button onClick={() => setRightTab("delivery")}
-                    className={cn("px-3 py-1.5 text-sm rounded-md transition-colors",
-                      rightTab === "delivery" ? "bg-primary text-primary-foreground font-medium" : "hover:bg-muted text-muted-foreground")}>
-                    <MapPin className="w-3.5 h-3.5 inline mr-1" />납품처
-                    {deliveryItems.length > 0 && <Badge variant="secondary" className="ml-1 text-[10px] px-1">{deliveryItems.length}</Badge>}
-                  </button>
-                  {selectedCustomer && <Badge variant="outline" className="font-normal ml-2 text-xs">{selectedCustomer.customer_name}</Badge>}
-                </div>
-                <div className="flex gap-1.5">
-                  {rightTab === "items" && (
-                    <>
-                      <Button variant="outline" size="sm" disabled={!selectedCustomerId}
-                        onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
-                        <Plus className="w-3.5 h-3.5 mr-1" /> 품목 추가
-                      </Button>
-                      <Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0}
-                        onClick={handlePriceItemDelete}>
-                        <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
-                      </Button>
-                    </>
-                  )}
-                  {rightTab === "delivery" && (
-                    <>
-                      <Button variant="outline" size="sm" disabled={!selectedCustomerId}
-                        onClick={() => { setDeliveryForm({}); setDeliveryModalOpen(true); }}>
-                        <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 등록
-                      </Button>
-                      <Button variant="destructive" size="sm" disabled={deliveryCheckedIds.length === 0}
-                        onClick={handleDeliveryDelete}>
-                        <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
-                      </Button>
-                    </>
-                  )}
-                </div>
-              </div>
-
-              {/* 탭 콘텐츠 */}
               {!selectedCustomerId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
-                  좌측에서 거래처를 선택하세요
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">거래처를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 거래처를 선택하면 상세 정보가 표시돼요</div>
+                  </div>
                 </div>
-              ) : rightTab === "items" ? (
-                <DataGrid
-                  gridId="customer-right-items"
-                  columns={RIGHT_COLUMNS}
-                  data={priceItems}
-                  loading={priceLoading}
-                  showRowNumber={false}
-                  showCheckbox
-                  checkedIds={priceCheckedIds}
-                  onCheckedChange={setPriceCheckedIds}
-                  tableName={MAPPING_TABLE}
-                  emptyMessage="등록된 품목이 없습니다"
-                  onRowDoubleClick={(row) => openEditItem(row)}
-                />
               ) : (
-                <DataGrid
-                  gridId="customer-right-delivery"
-                  columns={[
-                    { key: "destination_code", label: "납품처코드", width: "w-[110px]" },
-                    { key: "destination_name", label: "납품처명", minWidth: "min-w-[130px]" },
-                    { key: "address", label: "주소", minWidth: "min-w-[150px]" },
-                    { key: "manager_name", label: "담당자", width: "w-[80px]" },
-                    { key: "phone", label: "전화번호", width: "w-[110px]" },
-                    { key: "memo", label: "메모", width: "w-[100px]" },
-                    { key: "is_default", label: "기본", width: "w-[50px]" },
-                  ]}
-                  data={deliveryItems}
-                  loading={deliveryLoading}
-                  showRowNumber={false}
-                  showCheckbox
-                  checkedIds={deliveryCheckedIds}
-                  onCheckedChange={setDeliveryCheckedIds}
-                  tableName={DELIVERY_TABLE}
-                  emptyMessage="등록된 납품처가 없습니다"
-                />
+                <>
+                  {/* 탭 + 버튼 통합 헤더 */}
+                  <Tabs
+                    value={rightTab}
+                    onValueChange={(v) => setRightTab(v as "items" | "delivery")}
+                    className="flex flex-col flex-1 overflow-hidden gap-0"
+                  >
+                    <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                      <TabsList className="bg-transparent h-auto p-0 rounded-none">
+                        <TabsTrigger
+                          value="items"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <Package className="w-3.5 h-3.5" /> 거래처별 품목정보
+                          {Object.keys(priceGroups).length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{Object.keys(priceGroups).length}</Badge>
+                          )}
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="delivery"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <MapPin className="w-3.5 h-3.5" /> 납품처 정보
+                          {deliveryItems.length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{deliveryItems.length}</Badge>
+                          )}
+                        </TabsTrigger>
+                      </TabsList>
+                      <div className="flex gap-1.5">
+                        {rightTab === "items" ? (
+                          <>
+                            <Button size="sm" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
+                              <Plus className="w-3.5 h-3.5" /> 품목 추가
+                            </Button>
+                            <Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0} onClick={handlePriceItemDelete}>
+                              <Trash2 className="w-3.5 h-3.5" /> 삭제
+                            </Button>
+                          </>
+                        ) : (
+                          <Button size="sm" variant="outline" onClick={openCustomerEdit}>
+                            <Pencil className="w-3.5 h-3.5 mr-1" /> 거래처 수정에서 관리
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 품목정보 탭 */}
+                    <TabsContent value="items" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[40px] text-center px-2">
+                                <input
+                                  type="checkbox"
+                                  className="rounded"
+                                  checked={priceItems.length > 0 && priceCheckedIds.length === priceItems.length}
+                                  onChange={(e) => setPriceCheckedIds(e.target.checked ? priceItems.map((p) => p.id) : [])}
+                                />
+                              </TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                              <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품번</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품명</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                              <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                              <TableHead className="w-[60px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                              <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {priceLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.keys(priceGroups).length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 품목이 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.entries(priceGroups).map(([itemKey, group]) => {
+                              const isExpanded = expandedItems.has(itemKey);
+                              const m = group.master;
+                              const isChecked = priceCheckedIds.includes(m.id);
+                              return (
+                                <React.Fragment key={itemKey}>
+                                  {/* 마스터 행 */}
+                                  <TableRow
+                                    className={cn(
+                                      "cursor-pointer border-l-[3px] border-l-transparent h-[41px]",
+                                      isChecked && "bg-primary/5 border-l-primary"
+                                    )}
+                                    onClick={() => {
+                                      setExpandedItems((prev) => {
+                                        const next = new Set(prev);
+                                        if (next.has(itemKey)) next.delete(itemKey); else next.add(itemKey);
+                                        return next;
+                                      });
+                                    }}
+                                    onDoubleClick={() => openEditItem(m)}
+                                  >
+                                    <TableCell
+                                      className="text-center px-2"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        setPriceCheckedIds((prev) =>
+                                          prev.includes(m.id) ? prev.filter((id) => id !== m.id) : [...prev, m.id]
+                                        );
+                                      }}
+                                    >
+                                      <input type="checkbox" className="rounded" checked={isChecked} readOnly />
+                                    </TableCell>
+                                    <TableCell className="text-[13px] font-mono">
+                                      <div className="flex items-center gap-1">
+                                        {isExpanded
+                                          ? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                          : <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                        }
+                                        {m.item_number}
+                                      </div>
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.customer_item_code}</TableCell>
+                                    <TableCell className="text-[13px]">{m.customer_item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.base_price_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">
+                                      {m.base_price ? Number(m.base_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.discount_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">{m.discount_value ? Number(m.discount_value).toLocaleString() : ""}</TableCell>
+                                    <TableCell className="text-[13px] text-right font-semibold">
+                                      {m.calculated_price ? Number(m.calculated_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.currency_code}</TableCell>
+                                  </TableRow>
+
+                                  {/* 현재 단가 카드 (펼쳤을 때) */}
+                                  {isExpanded && (() => {
+                                    const cp = group.details.find((p) => p.is_current) || group.details[0];
+                                    if (!cp) return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="py-3 px-4 text-xs text-muted-foreground">등록된 단가가 없어요</TableCell>
+                                      </TableRow>
+                                    );
+                                    return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="px-4 py-3">
+                                          <div className="border border-primary/20 rounded-lg bg-card overflow-hidden">
+                                            {/* 카드 헤더 */}
+                                            <div className="flex items-center justify-between px-4 py-2 bg-primary/[0.04] border-b border-primary/10">
+                                              <div className="flex items-center gap-2">
+                                                <Coins className="w-3.5 h-3.5 text-primary" />
+                                                <span className="text-xs font-semibold">적용 단가</span>
+                                                <Badge variant="secondary" className="text-[9px] px-1.5 py-0 bg-primary/10 text-primary">현재</Badge>
+                                              </div>
+                                              {group.details.length > 1 && (
+                                                <span className="text-[10px] text-muted-foreground">전체 {group.details.length}건 중</span>
+                                              )}
+                                            </div>
+                                            {/* 카드 내용 */}
+                                            <div className="px-5 py-3.5 flex items-end gap-0 text-[13px]">
+                                              <div className="flex flex-col pr-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기간</span>
+                                                <span className="font-mono text-muted-foreground text-xs">
+                                                  {cp.start_date ? String(cp.start_date).split("T")[0] : "—"} ~ {cp.end_date ? String(cp.end_date).split("T")[0] : "—"}
+                                                </span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준유형</span>
+                                                <span>{cp.base_price_type_label || "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준가</span>
+                                                <span className="font-mono font-medium">{cp.base_price ? Number(cp.base_price).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인유형</span>
+                                                <span>{cp.discount_type_label && cp.discount_type_label !== "할인없음" ? cp.discount_type_label : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인값</span>
+                                                <span className="font-mono">{cp.discount_value ? Number(cp.discount_value).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">단수처리</span>
+                                                <span>
+                                                  {cp.rounding_unit_value
+                                                    ? (priceCategoryOptions["rounding_unit_value"]?.find((o) => o.code === cp.rounding_unit_value)?.label || cp.rounding_unit_value)
+                                                    : "-"}
+                                                </span>
+                                              </div>
+                                              <span className="text-primary/50 px-4 pb-0.5 text-lg">→</span>
+                                              <div className="flex flex-col pl-1">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">계산단가</span>
+                                                <span className="text-base font-bold font-mono text-foreground">
+                                                  {(cp.calculated_price || cp.unit_price) ? Number(cp.calculated_price || cp.unit_price).toLocaleString() : "-"}
+                                                  <span className="text-xs font-normal text-muted-foreground ml-1.5">{cp.currency_label}</span>
+                                                </span>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })()}
+                                </React.Fragment>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+
+                    {/* 납품처 탭 */}
+                    <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                              <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                              <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                              <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {deliveryLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 납품처가 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.map((d) => (
+                              <TableRow key={d.id} className="h-[41px]">
+                                <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                                <TableCell className="text-sm">{d.destination_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                                <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                                <TableCell className="text-[13px]">{d.phone}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                                <TableCell className="text-center">
+                                  {d.is_default && (
+                                    <Badge variant="default" className="text-[10px] px-1.5 py-0 h-5">메인</Badge>
+                                  )}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </>
               )}
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>
       </div>
 
-      {/* 거래처 등록/수정 모달 */}
-      <Dialog open={customerModalOpen} onOpenChange={setCustomerModalOpen}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
+      {/* ── 모달: 거래처 등록/수정 (3탭) ── */}
+      <Dialog open={customerModalOpen} onOpenChange={(open) => {
+        if (!open && isConfirmOpenRef.current) return;
+        setCustomerModalOpen(open);
+        if (!open) {
+          setModalContactFormOpen(false);
+          setModalDeliveryFormOpen(false);
+          setModalContactForm({});
+          setModalDeliveryForm({});
+          setModalContactEditId(null);
+          setModalDeliveryEditId(null);
+          fetchCustomers();
+          if (customerForm.customer_code) {
+            const cid = selectedCustomerId;
+            setSelectedCustomerId(null);
+            setTimeout(() => setSelectedCustomerId(cid), 50);
+          }
+        }
+      }}>
+        <DialogContent className="max-w-4xl h-[85vh] flex flex-col overflow-hidden p-0">
+          <DialogHeader className="px-6 pt-5 pb-0 shrink-0">
             <DialogTitle>{customerEditMode ? "거래처 수정" : "거래처 등록"}</DialogTitle>
-            <DialogDescription>{customerEditMode ? "거래처 정보를 수정합니다." : "새로운 거래처를 등록합니다."}</DialogDescription>
+            <DialogDescription>
+              {customerEditMode ? "거래처 정보를 수정합니다." : "새로운 거래처를 등록합니다."}
+            </DialogDescription>
           </DialogHeader>
-          <div className="grid grid-cols-2 gap-4 py-4">
-            <div className="space-y-1.5">
-              <Label className="text-sm">거래처 코드</Label>
-              <Input value={customerForm.customer_code || ""} onChange={(e) => setCustomerForm((p) => ({ ...p, customer_code: e.target.value }))}
-                placeholder="거래처 코드" className="h-9" disabled={customerEditMode} />
+
+          <Tabs value={customerModalTab} onValueChange={(v: any) => setCustomerModalTab(v)} className="flex flex-col flex-1 overflow-hidden">
+            <div className="shrink-0">
+              <TabsList className="bg-transparent w-full h-auto p-0 rounded-none gap-0">
+                <TabsTrigger value="basic" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  기본정보
+                </TabsTrigger>
+                <TabsTrigger value="contacts" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  담당자 관리
+                  {modalContacts.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalContacts.length}</span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="delivery" className="flex-1 rounded-none py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  납품처 관리
+                  {modalDeliveries.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalDeliveries.length}</span>
+                  )}
+                </TabsTrigger>
+              </TabsList>
             </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">거래처명 <span className="text-destructive">*</span></Label>
-              <Input value={customerForm.customer_name || ""} onChange={(e) => setCustomerForm((p) => ({ ...p, customer_name: e.target.value }))}
-                placeholder="거래처명" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">거래 유형</Label>
-              {renderSelect("division", customerForm.division, (v) => setCustomerForm((p) => ({ ...p, division: v })), "거래 유형")}
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
-              {renderSelect("status", customerForm.status, (v) => setCustomerForm((p) => ({ ...p, status: v })), "상태")}
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">거래처담당자</Label>
-              <Input value={customerForm.contact_person || ""} onChange={(e) => setCustomerForm((p) => ({ ...p, contact_person: e.target.value }))}
-                placeholder="거래처담당자" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">사내담당자</Label>
-              <Select value={customerForm.internal_manager || "__none__"} onValueChange={(v) => setCustomerForm((p) => ({ ...p, internal_manager: v === "__none__" ? "" : v }))}>
-                <SelectTrigger className="h-9"><SelectValue placeholder="사내담당자 선택" /></SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="__none__">선택 안 함</SelectItem>
-                  {employeeOptions.map((emp) => (
-                    <SelectItem key={emp.user_id} value={emp.user_id}>
-                      {emp.user_name}{emp.position_name ? ` (${emp.position_name})` : ""}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">전화번호</Label>
-              <Input value={customerForm.contact_phone || ""} onChange={(e) => handleFormChange("contact_phone", e.target.value)}
-                placeholder="010-0000-0000" className={cn("h-9", formErrors.contact_phone && "border-destructive")} />
-              {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">이메일</Label>
-              <Input value={customerForm.email || ""} onChange={(e) => handleFormChange("email", e.target.value)}
-                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
-              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">사업자번호</Label>
-              <Input value={customerForm.business_number || ""} onChange={(e) => handleFormChange("business_number", e.target.value)}
-                placeholder="000-00-00000" className={cn("h-9", formErrors.business_number && "border-destructive")} />
-              {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
-            </div>
-            <div className="space-y-1.5 col-span-2">
-              <Label className="text-sm">주소</Label>
-              <Input value={customerForm.address || ""} onChange={(e) => setCustomerForm((p) => ({ ...p, address: e.target.value }))}
-                placeholder="주소" className="h-9" />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setCustomerModalOpen(false)}>취소</Button>
+
+            {/* 기본정보 탭 */}
+            <TabsContent value="basic" className="flex-1 overflow-y-auto mt-0">
+              <div className="px-6 py-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처 코드</Label>
+                    <Input
+                      value={customerForm.customer_code || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, customer_code: e.target.value }))}
+                      placeholder={customerEditMode ? "" : "자동 생성"}
+                      className={cn("h-9 font-mono", !customerEditMode && customerForm.customer_code && "bg-muted")}
+                      readOnly={!customerEditMode && !!customerForm.customer_code}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={customerForm.customer_name || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, customer_name: e.target.value }))}
+                      placeholder="거래처명"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래 유형</Label>
+                    <Select
+                      value={customerForm.division || "__none__"}
+                      onValueChange={(v) => setCustomerForm((p) => ({ ...p, division: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="거래 유형" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["division"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+                    <Select
+                      value={customerForm.status || "__none__"}
+                      onValueChange={(v) => setCustomerForm((p) => ({ ...p, status: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="상태" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처담당자</Label>
+                    <Input
+                      value={customerForm.contact_person || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, contact_person: e.target.value }))}
+                      placeholder="거래처담당자"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">전화번호</Label>
+                    <Input
+                      value={customerForm.contact_phone || ""}
+                      onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                      placeholder="010-0000-0000"
+                      className={cn("h-9", formErrors.contact_phone && "border-destructive")}
+                    />
+                    {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">이메일</Label>
+                    <Input
+                      value={customerForm.email || ""}
+                      onChange={(e) => handleFormChange("email", e.target.value)}
+                      placeholder="example@email.com"
+                      className={cn("h-9", formErrors.email && "border-destructive")}
+                    />
+                    {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">사업자번호</Label>
+                    <Input
+                      value={customerForm.business_number || ""}
+                      onChange={(e) => handleFormChange("business_number", e.target.value)}
+                      placeholder="000-00-00000"
+                      className={cn("h-9", formErrors.business_number && "border-destructive")}
+                    />
+                    {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+                  </div>
+                  <div className="space-y-1.5 col-span-2">
+                    <Label className="text-sm">주소</Label>
+                    <Input
+                      value={customerForm.address || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="주소"
+                      className="h-9"
+                    />
+                  </div>
+                </div>
+
+                {/* 세금유형 */}
+                <div className="mt-4 pt-4 border-t">
+                  <div className="flex items-center justify-between mb-2">
+                    <Label className="text-sm font-semibold flex items-center gap-1.5">
+                      <Coins className="w-3.5 h-3.5 text-primary" /> 세금유형
+                    </Label>
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => {
+                      setTaxTypeRows((prev) => [...prev, { _id: `tax_${Date.now()}_${Math.random()}`, tax_type_name: "", rate: "" }]);
+                    }}>
+                      <Plus className="h-3 w-3 mr-1" /> 추가
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    {taxTypeRows.map((row, idx) => (
+                      <div key={row._id} className="flex gap-2 items-center">
+                        <span className="text-xs text-muted-foreground w-4 shrink-0">{idx + 1}</span>
+                        <Select value={row.tax_type_name} onValueChange={(v) => {
+                          setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, tax_type_name: v } : r));
+                        }}>
+                          <SelectTrigger className="h-9 text-[13px] flex-1"><SelectValue placeholder="세금유형 선택" /></SelectTrigger>
+                          <SelectContent>
+                            {taxTypeOptions.map((o) => (
+                              <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <Input
+                          value={row.rate}
+                          onChange={(e) => {
+                            const v = e.target.value.replace(/[^\d.]/g, "");
+                            setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, rate: v } : r));
+                          }}
+                          placeholder="세율 %"
+                          className="h-9 text-[13px] w-[80px] text-right"
+                        />
+                        <span className="text-xs text-muted-foreground">%</span>
+                        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                          onClick={() => setTaxTypeRows((prev) => prev.filter((r) => r._id !== row._id))}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* 담당자 관리 탭 */}
+            <TabsContent value="contacts" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 담당자 목록 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    담당자 {modalContacts.length}명
+                  </span>
+                  <Button size="sm" onClick={() => {
+                    setModalContactForm({});
+                    setModalContactEditId(null);
+                    setModalContactFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 담당자 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalContactLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalContacts.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Users className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 담당자가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자명</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부서</TableHead>
+                          <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalContacts].sort((a, b) => {
+                          const aMain = a.is_main === "Y" || a.is_main === true ? 0 : 1;
+                          const bMain = b.is_main === "Y" || b.is_main === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((c) => (
+                          <TableRow key={c._localId || c.id} className="h-[41px]">
+                            <TableCell className="text-sm font-medium">{c.contact_name}</TableCell>
+                            <TableCell className="text-[13px]">{c.contact_phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.contact_email}</TableCell>
+                            <TableCell className="text-[13px]">{c.department}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (c.is_main === "Y" || c.is_main === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = c.is_main === "Y" || c.is_main === true;
+                                  if (isCurrentMain) {
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id) ? { ...item, is_main: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== (c._localId || c.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id)
+                                        ? { ...item, is_main: "Y" }
+                                        : { ...item, is_main: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(c.is_main === "Y" || c.is_main === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalContactForm({ ...c });
+                                    setModalContactEditId(c._localId || c.id);
+                                    setModalContactFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalContactDelete(c._localId || c.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 담당자 폼 (인라인) */}
+                {modalContactFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalContactEditId ? "담당자 수정" : "담당자 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalContactForm.contact_name || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_name: e.target.value }))}
+                          placeholder="담당자명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalContactForm.contact_phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalContactForm((p) => ({ ...p, contact_phone: formatted }));
+                          }}
+                          placeholder="010-0000-0000"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">이메일</Label>
+                        <Input
+                          value={modalContactForm.contact_email || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_email: e.target.value }))}
+                          placeholder="example@email.com"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">부서</Label>
+                        <Input
+                          value={modalContactForm.department || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, department: e.target.value }))}
+                          placeholder="부서명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalContactForm.memo || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalContactForm.is_main === "Y" || modalContactForm.is_main === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== modalContactEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalContacts((prev) => prev.map((item) => ({ ...item, is_main: "N" })));
+                                }
+                                setModalContactForm((p) => ({ ...p, is_main: "Y" }));
+                              } else {
+                                setModalContactForm((p) => ({ ...p, is_main: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 담당자</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalContactFormOpen(false); setModalContactForm({}); setModalContactEditId(null); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalContactSave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalContactEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            {/* ── 탭3: 납품처 관리 ── */}
+            <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 납품처 목록 헤더 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    납품처 {modalDeliveries.length}개
+                  </span>
+                  <Button size="sm" onClick={async () => {
+                    const code = await generateDeliveryCode();
+                    setModalDeliveryForm({ destination_code: code });
+                    setModalDeliveryEditId(null);
+                    setModalDeliveryFormErrors({});
+                    setModalDeliveryFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalDeliveryLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalDeliveries.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <MapPin className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 납품처가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalDeliveries].sort((a, b) => {
+                          const aMain = a.is_default === "Y" || a.is_default === true ? 0 : 1;
+                          const bMain = b.is_default === "Y" || b.is_default === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((d) => (
+                          <TableRow key={d._localId || d.id || d.destination_code} className="h-[41px]">
+                            <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                            <TableCell className="text-sm">{d.destination_name}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                            <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                            <TableCell className="text-[13px]">{d.phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (d.is_default === "Y" || d.is_default === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = d.is_default === "Y" || d.is_default === true;
+                                  if (isCurrentMain) {
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id) ? { ...item, is_default: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== (d._localId || d.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id)
+                                        ? { ...item, is_default: "Y" }
+                                        : { ...item, is_default: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(d.is_default === "Y" || d.is_default === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalDeliveryForm({ ...d });
+                                    setModalDeliveryEditId(d._localId || d.id);
+                                    setModalDeliveryFormErrors({});
+                                    setModalDeliveryFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalDeliveryDelete(d._localId || d.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 납품처 폼 (인라인) */}
+                {modalDeliveryFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalDeliveryEditId ? "납품처 수정" : "납품처 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처코드</Label>
+                        <Input
+                          value={modalDeliveryForm.destination_code || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
+                          placeholder="자동 생성"
+                          className={cn("h-8 text-sm font-mono", modalDeliveryForm.destination_code && "bg-muted")}
+                          readOnly={!!modalDeliveryForm.destination_code && !modalDeliveryEditId}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalDeliveryForm.destination_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
+                          placeholder="납품처명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자</Label>
+                        <Input
+                          value={modalDeliveryForm.manager_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
+                          placeholder="담당자"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 col-span-2">
+                        <Label className="text-xs">주소</Label>
+                        <Input
+                          value={modalDeliveryForm.address || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, address: e.target.value }))}
+                          placeholder="주소"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalDeliveryForm.phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalDeliveryForm((p) => ({ ...p, phone: formatted }));
+                            const err = validateField("phone", formatted);
+                            setModalDeliveryFormErrors((p) => {
+                              const n = { ...p };
+                              if (err) n.phone = err; else delete n.phone;
+                              return n;
+                            });
+                          }}
+                          placeholder="010-0000-0000"
+                          className={cn("h-8 text-sm", modalDeliveryFormErrors.phone && "border-destructive")}
+                        />
+                        {modalDeliveryFormErrors.phone && <p className="text-xs text-destructive">{modalDeliveryFormErrors.phone}</p>}
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalDeliveryForm.memo || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== modalDeliveryEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalDeliveries((prev) => prev.map((item) => ({ ...item, is_default: "N" })));
+                                }
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "Y" }));
+                              } else {
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 납품처로 설정</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalDeliveryFormOpen(false); setModalDeliveryForm({}); setModalDeliveryEditId(null); setModalDeliveryFormErrors({}); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalDeliverySave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalDeliveryEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+          <div className="border-t px-6 py-3 flex items-center gap-2 shrink-0">
+            {!customerEditMode && (
+              <label className="flex items-center gap-2 cursor-pointer mr-auto">
+                <input type="checkbox" checked={continuousInput} onChange={(e) => setContinuousInput(e.target.checked)} className="rounded" />
+                <span className="text-sm font-medium">연속입력</span>
+              </label>
+            )}
+            <Button variant="outline" onClick={() => setCustomerModalOpen(false)}>닫기</Button>
             <Button onClick={handleCustomerSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {customerEditMode ? "저장" : "등록"}
             </Button>
-          </DialogFooter>
+          </div>
         </DialogContent>
       </Dialog>
 
-      {/* 품목 추가 모달 */}
+      {/* ── 모달: 품목 선택 (1단계) ── */}
       <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
-        <DialogContent className="max-w-3xl max-h-[70vh]" onInteractOutside={(e) => e.preventDefault()}>
+        <DialogContent className="max-w-3xl">
           <DialogHeader>
             <DialogTitle>품목 선택</DialogTitle>
-            <DialogDescription>거래처에 추가할 품목을 선택하세요.</DialogDescription>
+            <DialogDescription>거래처에 추가할 품목을 선택하세요. (전체: {itemTotalCount}건 / 대상: {itemSearchResults.length}건{itemCheckedIds.size > 0 ? ` / 선택: ${itemCheckedIds.size}건` : ""})</DialogDescription>
           </DialogHeader>
           <div className="flex gap-2 mb-3">
-            <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
+            <Input
+              placeholder="품명/품목코드 검색"
+              value={itemSearchKeyword}
               onChange={(e) => setItemSearchKeyword(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && searchItems()}
-              className="h-9 flex-1" />
+              className="h-9 flex-1"
+            />
             <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
               {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
             </Button>
           </div>
           <div className="overflow-auto max-h-[350px] border rounded-lg">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">
-                    <input type="checkbox"
+            <Table noWrapper>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted h-10">
+                  <TableHead className="w-[40px] text-center px-2">
+                    <input
+                      type="checkbox"
+                      className="rounded"
                       checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
                       onChange={(e) => {
                         if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
                         else setItemCheckedIds(new Set());
-                      }} />
+                      }}
+                    />
                   </TableHead>
-                  <TableHead className="w-[120px]">품목코드</TableHead>
-                  <TableHead className="min-w-[140px]">품명</TableHead>
-                  <TableHead className="w-[100px]">규격</TableHead>
-                  <TableHead className="w-[100px]">재질</TableHead>
-                  <TableHead className="w-[60px]">단위</TableHead>
+                  <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="min-w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                  <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {itemSearchResults.length === 0 ? (
-                  <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                      검색 결과가 없어요
+                    </TableCell>
+                  </TableRow>
                 ) : itemSearchResults.map((item) => (
-                  <TableRow key={item.id} className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                  <TableRow
+                    key={item.id}
+                    className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
                     onClick={() => setItemCheckedIds((prev) => {
                       const next = new Set(prev);
                       if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
                       return next;
-                    })}>
-                    <TableCell className="text-center"><input type="checkbox" checked={itemCheckedIds.has(item.id)} readOnly /></TableCell>
-                    <TableCell className="text-xs max-w-[120px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
+                    })}
+                  >
+                    <TableCell className="text-center px-2">
+                      <input type="checkbox" className="rounded" checked={itemCheckedIds.has(item.id)} readOnly />
+                    </TableCell>
+                    <TableCell className="text-[13px] font-mono">
+                      <span className="block truncate" title={item.item_number}>{item.item_number}</span>
+                    </TableCell>
                     <TableCell className="text-sm">{item.item_name}</TableCell>
-                    <TableCell className="text-xs">{item.size}</TableCell>
-                    <TableCell className="text-xs">{item.material}</TableCell>
-                    <TableCell className="text-xs">{item.unit}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.size}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.material}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.unit}</TableCell>
                   </TableRow>
                 ))}
               </TableBody>
             </Table>
           </div>
-          <DialogFooter>
-            <div className="flex items-center gap-2 w-full justify-between">
-              <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
-              <div className="flex gap-2">
-                <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
-                <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
-                  <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
-                </Button>
-              </div>
+          <DialogFooter className="flex items-center justify-between w-full">
+            <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+              <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+              </Button>
             </div>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* 품목 상세정보 입력 모달 (2단계) */}
-      <FullscreenDialog
-        open={itemDetailOpen}
-        onOpenChange={setItemDetailOpen}
-        title={`📋 품목 상세정보 ${editItemData ? "수정" : "입력"} — ${selectedCustomer?.customer_name || ""}`}
-        description={editItemData ? "거래처 품번/품명과 기간별 단가를 수정합니다." : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
-        defaultMaxWidth="max-w-[1100px]"
-        footer={
-          <>
-            <Button variant="outline" onClick={() => {
-              setItemDetailOpen(false);
-              if (!editItemData) setItemSelectOpen(true); // 신규일 때만 품목 선택으로 돌아감
-              setEditItemData(null);
-            }}>{editItemData ? "취소" : "← 이전"}</Button>
-            <Button onClick={handleItemDetailSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 품목 추가 완료
-            </Button>
-          </>
-        }
-      >
-
-          <div className="space-y-6 py-2">
+      {/* ── 모달: 품목 상세 입력 (2단계) ── */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedCustomer?.customer_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData
+                ? "거래처 품번/품명과 기간별 단가를 수정합니다."
+                : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2 flex-1 overflow-y-auto">
             {selectedItemsForDetail.map((item, idx) => {
               const itemKey = item.item_number || item.id;
               const mappingRows = itemMappings[itemKey] || [];
@@ -1289,124 +2479,227 @@ export default function CustomerManagementPage() {
                     <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
                   </div>
 
-                  <div className="flex gap-4 p-4">
-                    {/* 좌: 거래처 품번/품명 (다중) */}
-                    <div className="flex-1 border rounded-lg p-4 bg-blue-50/30 dark:bg-blue-950/10">
-                      <div className="flex items-center justify-between mb-3">
-                        <span className="text-sm font-semibold">🏷 거래처 품번/품명 관리</span>
+                  <div className="flex gap-4 p-5 items-stretch">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Tag className="w-3.5 h-3.5 text-primary" /> 거래처 품번/품명 관리
+                        </span>
                         <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
                           <Plus className="h-3 w-3 mr-1" /> 품번 추가
                         </Button>
                       </div>
-                      <div className="space-y-2">
+                      <div className="border-2 border-foreground/20 rounded-lg bg-background p-3 space-y-2 min-h-[200px] max-h-[350px] overflow-y-auto flex-1">
                         {mappingRows.length === 0 ? (
-                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없습니다</div>
-                        ) : (<>
-                          <div className="flex gap-2 items-center text-[10px] text-muted-foreground font-medium">
-                            <span className="w-4 shrink-0"></span>
-                            <span className="flex-1">거래처 품번</span>
-                            <span className="flex-1">거래처 품명</span>
-                            <span className="w-7 shrink-0"></span>
-                          </div>
-                          {mappingRows.map((mRow, mIdx) => (
-                          <div key={mRow._id} className="flex gap-2 items-center">
-                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
-                            <Input value={mRow.customer_item_code}
-                              onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_code", e.target.value)}
-                              placeholder="거래처 품번" className="h-8 text-sm flex-1" />
-                            <Input value={mRow.customer_item_name}
-                              onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_name", e.target.value)}
-                              placeholder="거래처 품명" className="h-8 text-sm flex-1" />
-                            <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
-                              onClick={() => removeMappingRow(itemKey, mRow._id)}>
-                              <X className="h-3 w-3" />
-                            </Button>
-                          </div>
-                        ))}
-                        </>)}
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : (
+                          <DndContext
+                            sensors={dndSensors}
+                            collisionDetection={closestCenter}
+                            onDragEnd={(e) => handleMappingDragEnd(itemKey, e)}
+                          >
+                            <SortableContext items={mappingRows.map((r) => r._id)} strategy={verticalListSortingStrategy}>
+                              {mappingRows.map((mRow, mIdx) => (
+                                <SortableMappingRow key={mRow._id} id={mRow._id}>
+                                  <span className="text-xs text-muted-foreground/50 font-mono w-4 shrink-0 text-center">{mIdx + 1}</span>
+                                  <Input
+                                    value={mRow.customer_item_code}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_code", e.target.value)}
+                                    placeholder="거래처 품번"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Input
+                                    value={mRow.customer_item_name}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_name", e.target.value)}
+                                    placeholder="거래처 품명"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Button
+                                    variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                                    onClick={() => removeMappingRow(itemKey, mRow._id)}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                </SortableMappingRow>
+                              ))}
+                            </SortableContext>
+                          </DndContext>
+                        )}
                       </div>
                     </div>
 
                     {/* 우: 기간별 단가 */}
-                    <div className="flex-1 border rounded-lg p-4 bg-amber-50/30 dark:bg-amber-950/10">
-                      <div className="flex items-center justify-between mb-3">
-                        <span className="text-sm font-semibold">💰 기간별 단가 설정</span>
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Coins className="w-3.5 h-3.5 text-primary" /> 기간별 단가 설정
+                        </span>
                         <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
                           <Plus className="h-3 w-3 mr-1" /> 단가 추가
                         </Button>
                       </div>
-
-                      <div className="space-y-3">
+                      <div className="space-y-3 flex-1 overflow-y-auto max-h-[350px]">
                         {prices.map((price, pIdx) => (
-                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
-                            <div className="flex items-center justify-between">
-                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
-                              {prices.length > 1 && (
-                                <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
-                                  onClick={() => removePriceRow(itemKey, price._id)}>
-                                  <X className="h-3 w-3" />
-                                </Button>
-                              )}
+                          <div key={price._id} className="border-2 border-foreground/20 rounded-lg bg-background overflow-hidden">
+                            <div
+                              className="flex items-center justify-between px-4 py-2.5 cursor-pointer hover:bg-muted/50 transition-colors"
+                              onClick={() => setCollapsedPriceCards((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(price._id)) next.delete(price._id); else next.add(price._id);
+                                return next;
+                              })}
+                            >
+                              <div className="flex items-center gap-2">
+                                {collapsedPriceCards.has(price._id)
+                                  ? <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                                  : <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                                }
+                                <span className="text-[13px] font-semibold text-muted-foreground">단가 {pIdx + 1}</span>
+                                {collapsedPriceCards.has(price._id) && price.calculated_price && (
+                                  <span className="text-xs text-muted-foreground ml-2">
+                                    {price.start_date || "—"} ~ {price.end_date || "—"} · <span className="font-mono font-bold text-foreground">{Number(price.calculated_price).toLocaleString()}</span> {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                  </span>
+                                )}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                {prices.length > 1 && (
+                                  <Button
+                                    variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
+                                    onClick={(e) => { e.stopPropagation(); removePriceRow(itemKey, price._id); }}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                )}
+                              </div>
                             </div>
-                            {/* 기간 */}
+                            {!collapsedPriceCards.has(price._id) && <div className="px-4 pb-4 space-y-2.5">
+                            {/* 기간 + 통화 */}
                             <div className="flex gap-2 items-center">
                               <div className="flex-1">
-                                <FormDatePicker value={price.start_date}
-                                  onChange={(v) => updatePriceRow(itemKey, price._id, "start_date", v)} placeholder="시작일" />
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">시작일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.start_date}
+                                  onChange={(e) => {
+                                    const v = e.target.value;
+                                    updatePriceRow(itemKey, price._id, "start_date", v);
+                                    if (price.end_date && v > price.end_date) {
+                                      updatePriceRow(itemKey, price._id, "end_date", v);
+                                    }
+                                  }}
+                                  max={price.end_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
                               </div>
-                              <span className="text-xs text-muted-foreground">~</span>
+                              <span className="text-xs text-muted-foreground mt-4">~</span>
                               <div className="flex-1">
-                                <FormDatePicker value={price.end_date}
-                                  onChange={(v) => updatePriceRow(itemKey, price._id, "end_date", v)} placeholder="종료일" />
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">종료일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.end_date}
+                                  onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                  min={price.start_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
                               </div>
                               <div className="w-[80px]">
-                                <Select value={price.currency_code} onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="통화" /></SelectTrigger>
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">&nbsp;</Label>
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="통화" /></SelectTrigger>
                                   <SelectContent>
-                                    {(priceCategoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
                                   </SelectContent>
                                 </Select>
                               </div>
                             </div>
-                            {/* 기준가/할인/반올림 */}
-                            <div className="flex gap-2 items-center">
-                              <div className="w-[90px]">
-                                <Select value={price.base_price_type} onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준" /></SelectTrigger>
-                                  <SelectContent>
-                                    {(priceCategoryOptions["base_price_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-                                  </SelectContent>
-                                </Select>
-                              </div>
-                              <Input value={price.base_price}
-                                onChange={(e) => updatePriceRow(itemKey, price._id, "base_price", e.target.value)}
-                                className="h-8 text-xs text-right flex-1" placeholder="기준가" />
-                              <div className="w-[90px]">
-                                <Select value={price.discount_type} onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
-                                  <SelectContent>
-                                    <SelectItem value="none">할인없음</SelectItem>
-                                    {(priceCategoryOptions["discount_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-                                  </SelectContent>
-                                </Select>
-                              </div>
-                              <Input value={price.discount_value}
-                                onChange={(e) => updatePriceRow(itemKey, price._id, "discount_value", e.target.value)}
-                                className="h-8 text-xs text-right w-[60px]" placeholder="0" />
-                              <div className="w-[90px]">
-                                <Select value={price.rounding_unit_value} onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}>
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
-                                  <SelectContent>
-                                    {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-                                  </SelectContent>
-                                </Select>
-                              </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "base_price", raw);
+                                }}
+                                className="h-9 text-[13px] text-right col-span-3"
+                                placeholder="기준가"
+                              />
                             </div>
-                            {/* 계산된 단가 표시 */}
-                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
-                              <span className="text-xs text-muted-foreground">계산 단가:</span>
-                              <span className="font-bold text-sm">{price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}</span>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-9 text-[13px] text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
                             </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-1.5 pt-2 border-t">
+                              <span className="text-[13px] text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-base font-mono">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                              {price.calculated_price && price.currency_code && (
+                                <span className="text-[13px] text-muted-foreground">
+                                  {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                </span>
+                              )}
+                            </div>
+                            </div>}
                           </div>
                         ))}
                       </div>
@@ -1416,57 +2709,21 @@ export default function CustomerManagementPage() {
               );
             })}
           </div>
-
-      </FullscreenDialog>
-
-      {/* 납품처 등록 모달 */}
-      <Dialog open={deliveryModalOpen} onOpenChange={setDeliveryModalOpen}>
-        <DialogContent className="max-w-lg">
-          <DialogHeader>
-            <DialogTitle>납품처 등록</DialogTitle>
-            <DialogDescription>{selectedCustomer?.customer_name}의 납품처를 등록합니다.</DialogDescription>
-          </DialogHeader>
-          <div className="grid grid-cols-2 gap-4 py-4">
-            <div className="space-y-1.5">
-              <Label className="text-sm">납품처코드</Label>
-              <Input value={deliveryForm.destination_code || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
-                placeholder="납품처코드" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">납품처명 <span className="text-destructive">*</span></Label>
-              <Input value={deliveryForm.destination_name || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
-                placeholder="납품처명" className="h-9" />
-            </div>
-            <div className="space-y-1.5 col-span-2">
-              <Label className="text-sm">주소</Label>
-              <Input value={deliveryForm.address || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, address: e.target.value }))}
-                placeholder="주소" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">담당자</Label>
-              <Input value={deliveryForm.manager_name || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
-                placeholder="담당자" className="h-9" />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-sm">전화번호</Label>
-              <Input value={deliveryForm.phone || ""} onChange={(e) => {
-                const formatted = formatField("phone", e.target.value);
-                setDeliveryForm((p) => ({ ...p, phone: formatted }));
-                const err = validateField("phone", formatted);
-                setFormErrors((p) => { const n = { ...p }; if (err) n.delivery_phone = err; else delete n.delivery_phone; return n; });
-              }}
-                placeholder="010-0000-0000" className={cn("h-9", formErrors.delivery_phone && "border-destructive")} />
-              {formErrors.delivery_phone && <p className="text-xs text-destructive">{formErrors.delivery_phone}</p>}
-            </div>
-            <div className="space-y-1.5 col-span-2">
-              <Label className="text-sm">메모</Label>
-              <Input value={deliveryForm.memo || ""} onChange={(e) => setDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
-                placeholder="메모" className="h-9" />
-            </div>
-          </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setDeliveryModalOpen(false)}>취소</Button>
-            <Button onClick={handleDeliverySave}><Save className="w-4 h-4 mr-1.5" /> 저장</Button>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -1482,7 +2739,6 @@ export default function CustomerManagementPage() {
           config={excelChainConfig}
           onSuccess={() => {
             fetchCustomers();
-            // 우측 새로고침
             const cid = selectedCustomerId;
             setSelectedCustomerId(null);
             setTimeout(() => setSelectedCustomerId(cid), 50);
@@ -1490,12 +2746,14 @@ export default function CustomerManagementPage() {
         />
       )}
 
+      {/* 테이블 설정 모달 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={CUSTOMER_TABLE}
-        settingsId="customer-mng"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
 
       {ConfirmDialogComponent}
diff --git a/frontend/app/(main)/COMPANY_7/sales/order/page.tsx b/frontend/app/(main)/COMPANY_7/sales/order/page.tsx
index d1bd0c17..f9a358d4 100644
--- a/frontend/app/(main)/COMPANY_7/sales/order/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/sales/order/page.tsx
@@ -1,21 +1,22 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-// Card, CardContent 제거 — DynamicSearchFilter가 대체
-import { Badge } from "@/components/ui/badge";
 import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
-  Plus, Trash2, RotateCcw, Save, Loader2, FileSpreadsheet, Download,
-  ClipboardList, Pencil, Search, X, Maximize2, Minimize2, Truck, Settings2,
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  ClipboardList, Pencil, Search, X, Truck, Package,
   ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,
+  Settings2, RotateCcw, Filter, Check, ArrowUp, ArrowDown,
 } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
@@ -23,17 +24,15 @@ import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
 import { ShippingPlanBatchModal } from "@/components/common/ShippingPlanBatchModal";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { SmartSelect } from "@/components/common/SmartSelect";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 
 const DETAIL_TABLE = "sales_order_detail";
+const MASTER_TABLE = "sales_order_mng";
 
-// 천단위 구분자 표시용 (입력 중에는 콤마 포함 표시, 저장 시 숫자만)
+// 천단위 구분자 표시용
 const formatNumber = (val: string) => {
   const num = val.replace(/[^\d.-]/g, "");
   if (!num) return "";
@@ -42,28 +41,116 @@ const formatNumber = (val: string) => {
   return parts.join(".");
 };
 const parseNumber = (val: string) => val.replace(/,/g, "");
-const MASTER_TABLE = "sales_order_mng";
 
-// 메인 목록 테이블 컬럼 (sales_order_detail 기준)
-const GRID_COLUMNS: DataGridColumn[] = [
-  { key: "order_no", label: "수주번호", width: "w-[120px]" },
-  { key: "part_code", label: "품번", width: "w-[120px]", editable: true },
-  { key: "part_name", label: "품명", width: "w-[150px]", editable: true },
-  { key: "spec", label: "규격", width: "w-[120px]", editable: true },
-  { key: "unit", label: "단위", width: "w-[70px]", editable: true },
-  { key: "qty", label: "수량", width: "w-[90px]", editable: true, inputType: "number", formatNumber: true, align: "right" },
-  { key: "ship_qty", label: "출하수량", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "balance_qty", label: "잔량", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "unit_price", label: "단가", width: "w-[100px]", editable: true, inputType: "number", formatNumber: true, align: "right" },
-  { key: "amount", label: "금액", width: "w-[110px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[70px]" },
-  { key: "due_date", label: "납기일", width: "w-[110px]" },
-  { key: "memo", label: "메모", width: "w-[100px]", editable: true },
+// 플랫 테이블 컬럼 정의 (마스터+디테일 통합)
+const FLAT_COLUMNS = [
+  { key: "order_no", label: "수주번호", source: "master" },
+  { key: "partner_id", label: "거래처", source: "master" },
+  { key: "order_date", label: "수주일", source: "master" },
+  { key: "part_code", label: "품번", source: "detail" },
+  { key: "part_name", label: "품명", source: "detail" },
+  { key: "spec", label: "규격", source: "detail" },
+  { key: "unit", label: "단위", source: "detail" },
+  { key: "qty", label: "수량", source: "detail" },
+  { key: "ship_qty", label: "출하수량", source: "detail" },
+  { key: "balance_qty", label: "잔량", source: "detail" },
+  { key: "unit_price", label: "단가", source: "detail" },
+  { key: "amount", label: "금액", source: "detail" },
+  { key: "due_date", label: "납기일", source: "detail" },
+  { key: "memo", label: "메모", source: "master" },
 ];
 
-// 조건부 레이어 설정 (input_mode, sell_mode에 따라 표시 필드가 달라짐)
-// Zone 10: input_mode → 공급업체우선(CAT_MLZWPH5R_983R) / 품목우선(CAT_MLZWPUQC_PB8Z)
-// Zone 17: sell_mode → 해외판매(CAT_MLZWFF2Z_BQCV)
+const DETAIL_HEADER_COLS = FLAT_COLUMNS.filter((c) => c.source === "detail");
+
+// 필터용 전체 키
+const GRID_COLUMNS_CONFIG = FLAT_COLUMNS.map(({ key, label }) => ({ key, label }));
+
+// 총 컬럼 수: 체크박스(1) + 플랫 컬럼(14) = 15
+const TOTAL_COLS = 15;
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
 
 export default function SalesOrderPage() {
   const { user } = useAuth();
@@ -77,13 +164,13 @@ export default function SalesOrderPage() {
 
   // 모달
   const [isModalOpen, setIsModalOpen] = useState(false);
-  // isModalFullscreen 제거됨 — FullscreenDialog 사용
   const [isEditMode, setIsEditMode] = useState(false);
   const [saving, setSaving] = useState(false);
   const [masterForm, setMasterForm] = useState<Record<string, any>>({});
   const [detailRows, setDetailRows] = useState<any[]>([]);
+  const [allowPriceEdit, setAllowPriceEdit] = useState(true);
 
-  // 품목 선택 모달 (리피터에서 품목 추가용)
+  // 품목 선택 모달
   const [itemSelectOpen, setItemSelectOpen] = useState(false);
   const [itemSearchKeyword, setItemSearchKeyword] = useState("");
   const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
@@ -108,38 +195,15 @@ export default function SalesOrderPage() {
   // 체크된 행 (다중선택)
   const [checkedIds, setCheckedIds] = useState<string[]>([]);
 
+  // 납품처 목록
+  const [deliveryOptions, setDeliveryOptions] = useState<{ code: string; label: string }[]>([]);
+
   // 테이블 설정
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [gridColumns, setGridColumns] = useState<DataGridColumn[]>(GRID_COLUMNS);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
+  const ts = useTableSettings("c16-sales-order", DETAIL_TABLE, GRID_COLUMNS_CONFIG);
 
-  // 테이블 설정 적용 (컬럼 + 필터)
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    // 컬럼 표시/숨김/순서/너비
-    const colMap = new Map(GRID_COLUMNS.map((c) => [c.key, c]));
-    const applied: DataGridColumn[] = [];
-    for (const cs of settings.columns) {
-      if (!cs.visible) continue;
-      const orig = colMap.get(cs.columnName);
-      if (orig) {
-        applied.push({ ...orig, width: `w-[${cs.width}px]`, minWidth: undefined });
-      }
-    }
-    const settingKeys = new Set(settings.columns.map((c) => c.columnName));
-    for (const col of GRID_COLUMNS) {
-      if (!settingKeys.has(col.key)) applied.push(col);
-    }
-    setGridColumns(applied.length > 0 ? applied : GRID_COLUMNS);
-
-    // 필터 설정 → DynamicSearchFilter에 전달
-    setFilterConfig(settings.filters);
-  }, []);
-
-  // 마운트 시 저장된 설정 복원
-  useEffect(() => {
-    const saved = loadTableSettings("sales-order");
-    if (saved) applyTableSettings(saved);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  // 헤더 필터 & 정렬
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
 
   // 카테고리 로드
   useEffect(() => {
@@ -154,7 +218,6 @@ export default function SalesOrderPage() {
         }
         return result;
       };
-      // 라벨 치환 + 중복 제거 (같은 label이면 첫 번째만 유지)
       const LABEL_REPLACE: Record<string, string> = {
         "공급업체 우선": "거래처 우선",
         "공급업체우선": "거래처 우선",
@@ -180,7 +243,7 @@ export default function SalesOrderPage() {
           } catch { /* skip */ }
         })
       );
-      // 거래처 목록도 로드
+      // 거래처 목록
       try {
         const custRes = await apiClient.post(`/table-management/tables/customer_mng/data`, {
           page: 1, size: 500, autoFilter: true,
@@ -188,7 +251,7 @@ export default function SalesOrderPage() {
         const custs = custRes.data?.data?.data || custRes.data?.data?.rows || [];
         optMap["partner_id"] = custs.map((c: any) => ({ code: c.customer_code, label: `${c.customer_name} (${c.customer_code})` }));
       } catch { /* skip */ }
-      // 사용자 목록 로드 (담당자 선택용)
+      // 사용자 목록
       try {
         const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
           page: 1, size: 500, autoFilter: true,
@@ -199,7 +262,7 @@ export default function SalesOrderPage() {
           label: `${u.user_name || u.name || u.user_id}${u.position_name ? ` (${u.position_name})` : ""}`,
         }));
       } catch { /* skip */ }
-      // item_info 카테고리도 로드 (unit, material 등 코드→라벨 변환용)
+      // item_info 카테고리
       for (const col of ["unit", "material", "division", "type"]) {
         try {
           const res = await apiClient.get(`/table-categories/item_info/${col}/values`);
@@ -209,7 +272,7 @@ export default function SalesOrderPage() {
         } catch { /* skip */ }
       }
       setCategoryOptions(optMap);
-      // division 기본값: 영업관리/제품/판매품 라벨 순서로 탐색
+      // division 기본값
       const divs = optMap["item_division"] || [];
       const salesDiv = divs.find((o: any) => o.label === "영업관리")
         || divs.find((o: any) => o.label === "제품")
@@ -223,11 +286,12 @@ export default function SalesOrderPage() {
   const fetchOrders = useCallback(async () => {
     setLoading(true);
     try {
-      const filters: any[] = searchFilters.map((f) => ({
+      const filters = searchFilters.map(f => ({
         columnName: f.columnName,
         operator: f.operator,
         value: f.value,
       }));
+
       const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
@@ -236,7 +300,7 @@ export default function SalesOrderPage() {
       });
       const rows = res.data?.data?.data || res.data?.data?.rows || [];
 
-      // order_no → sales_order_mng 조인 (memo 등 마스터 필드 보강)
+      // order_no → sales_order_mng 조인
       const orderNos = [...new Set(rows.map((r: any) => r.order_no).filter(Boolean))];
       let masterMap: Record<string, any> = {};
       if (orderNos.length > 0) {
@@ -247,13 +311,11 @@ export default function SalesOrderPage() {
             autoFilter: true,
           });
           const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
-          for (const m of masters) {
-            masterMap[m.order_no] = m;
-          }
+          for (const m of masters) masterMap[m.order_no] = m;
         } catch { /* skip */ }
       }
 
-      // part_code → item_info 조인 (품명/규격이 비어있는 경우 보강)
+      // part_code → item_info 조인
       const partCodes = [...new Set(rows.map((r: any) => r.part_code).filter(Boolean))];
       let itemMap: Record<string, any> = {};
       if (partCodes.length > 0) {
@@ -264,9 +326,7 @@ export default function SalesOrderPage() {
             autoFilter: true,
           });
           const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
-          for (const item of items) {
-            itemMap[item.item_number] = item;
-          }
+          for (const item of items) itemMap[item.item_number] = item;
         } catch { /* skip */ }
       }
 
@@ -285,8 +345,10 @@ export default function SalesOrderPage() {
           ...row,
           part_name: row.part_name || item?.item_name || "",
           spec: row.spec || item?.size || "",
+          material: row.material || (item ? (resolveLabel("item_material", item.material) || item.material || "") : ""),
           unit: resolveLabel("item_unit", rawUnit) || rawUnit,
           memo: row.memo || master?.memo || "",
+          _master: master || {},
         };
       });
 
@@ -301,16 +363,103 @@ export default function SalesOrderPage() {
 
   useEffect(() => { fetchOrders(); }, [fetchOrders]);
 
+  // 카테고리 코드→라벨 변환
+  const resolveLabel = useCallback((key: string, code: string) => {
+    if (!code) return "";
+    if (key === "partner_id" || key === "manager_id" || key === "price_mode") {
+      return categoryOptions[key]?.find((o) => o.code === code)?.label || code;
+    }
+    return code;
+  }, [categoryOptions]);
+
+  // 플랫 행 생성 (마스터 필드를 각 디테일 행에 병합)
+  const flatRows = useMemo(() => {
+    return orders.map((row) => {
+      const master = row._master || {};
+      return {
+        ...row,
+        partner_id: resolveLabel("partner_id", master.partner_id || row.partner_id || ""),
+        order_date: master.order_date || row.order_date || "",
+        memo: row.memo || master.memo || "",
+      };
+    });
+  }, [orders, resolveLabel]);
+
+  // 컬럼별 고유값 (헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of FLAT_COLUMNS) {
+      const values = new Set<string>();
+      flatRows.forEach((row) => {
+        const val = row[col.key];
+        if (val !== null && val !== undefined && val !== "") values.add(String(val));
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [flatRows]);
+
+  // 필터 + 정렬 적용된 플랫 데이터
+  const filteredFlatRows = useMemo(() => {
+    let rows = [...flatRows];
+
+    // 1차: 헤더 필터 적용
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      rows = rows.filter((row) => {
+        const cellVal = row[colKey] != null ? String(row[colKey]) : "";
+        return values.has(cellVal);
+      });
+    }
+
+    // 2차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      rows.sort((a, b) => {
+        const av = a[key] ?? "";
+        const bv = b[key] ?? "";
+        const na = Number(av); const nb = Number(bv);
+        if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+        return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+      });
+    }
+
+    return rows;
+  }, [flatRows, headerFilters, sortState]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
+  };
+
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
+  };
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
+    );
+  };
+
   const getCategoryLabel = (col: string, code: string) => {
     if (!code) return "";
     const found = categoryOptions[col]?.find((o) => o.code === code);
     return found?.label || code;
   };
 
-  // 등록 모달 열기
-  // 납품처 목록 (거래처 선택 시 조회)
-  const [deliveryOptions, setDeliveryOptions] = useState<{ code: string; label: string }[]>([]);
-
   const loadDeliveryOptions = async (customerCode: string) => {
     if (!customerCode) { setDeliveryOptions([]); return; }
     try {
@@ -327,22 +476,24 @@ export default function SalesOrderPage() {
     } catch { setDeliveryOptions([]); }
   };
 
+  // 등록 모달 열기
   const openRegisterModal = () => {
-    // 기본값: 각 카테고리의 첫 번째 옵션
     const defaultSellMode = categoryOptions["sell_mode"]?.[0]?.code || "";
     const defaultInputMode = categoryOptions["input_mode"]?.[0]?.code || "";
     const defaultPriceMode = categoryOptions["price_mode"]?.[0]?.code || "";
-    setMasterForm({ input_mode: defaultInputMode, sell_mode: defaultSellMode, price_mode: defaultPriceMode, manager_id: user?.userId || "", order_date: new Date().toISOString().split("T")[0] });
+    setMasterForm({
+      input_mode: defaultInputMode, sell_mode: defaultSellMode, price_mode: defaultPriceMode,
+      manager_id: user?.userId || "", order_date: new Date().toISOString().split("T")[0],
+    });
     setDetailRows([]);
     setDeliveryOptions([]);
     setIsEditMode(false);
     setIsModalOpen(true);
   };
 
-  // 수정 모달 열기 (order_no로 마스터 + 디테일 조회)
+  // 수정 모달 열기
   const openEditModal = async (orderNo: string) => {
     try {
-      // 마스터 조회
       const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
         page: 1, size: 1,
         dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
@@ -350,7 +501,6 @@ export default function SalesOrderPage() {
       });
       const masterData = (masterRes.data?.data?.data || masterRes.data?.data?.rows || [])[0];
 
-      // 디테일 조회
       const detailRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
         page: 1, size: 100,
         dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
@@ -367,42 +517,29 @@ export default function SalesOrderPage() {
     }
   };
 
-  // 삭제 (다중 선택)
+  // 삭제 (마스터 단위)
   const handleDelete = async () => {
     if (checkedIds.length === 0) { toast.error("삭제할 수주를 선택해주세요."); return; }
     const selectedItems = orders.filter((o) => checkedIds.includes(o.id));
     const orderNos = [...new Set(selectedItems.map((o) => o.order_no))];
-    const ok = await confirm(`${checkedIds.length}건의 수주 데이터를 삭제하시겠습니까?`, {
+    const ok = await confirm(`${orderNos.length}건의 수주를 삭제하시겠습니까?`, {
       description: "삭제된 데이터는 복구할 수 없습니다.",
       variant: "destructive",
       confirmText: "삭제",
     });
     if (!ok) return;
     try {
-      // 선택된 디테일 행 삭제
-      await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
-        data: checkedIds.map((id) => ({ id })),
-      });
-      // 해당 수주번호의 남은 디테일이 없으면 마스터도 삭제
       for (const orderNo of orderNos) {
-        const remaining = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
           page: 1, size: 1,
           dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
           autoFilter: true,
         });
-        const rows = remaining.data?.data?.data || remaining.data?.data?.rows || [];
-        if (rows.length === 0) {
-          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
-            page: 1, size: 1,
-            dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
-            autoFilter: true,
+        const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+        if (masters.length > 0) {
+          await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
+            data: masters.map((m: any) => ({ id: m.id })),
           });
-          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
-          if (masters.length > 0) {
-            await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
-              data: masters.map((m: any) => ({ id: m.id })),
-            });
-          }
         }
       }
       toast.success("삭제되었습니다.");
@@ -423,18 +560,14 @@ export default function SalesOrderPage() {
       toast.error("품목을 1개 이상 추가해주세요.");
       return;
     }
-
     setSaving(true);
     try {
       const { id, created_date, updated_date, writer, company_code, created_by, updated_by, ...masterFields } = masterForm;
-
       if (isEditMode && id) {
-        // 마스터 수정
         await apiClient.put(`/table-management/tables/${MASTER_TABLE}/edit`, {
           originalData: { id },
           updatedData: masterFields,
         });
-        // 기존 디테일 삭제 후 재삽입
         const existingDetails = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
           page: 1, size: 100,
           dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: masterForm.order_no }] },
@@ -447,19 +580,16 @@ export default function SalesOrderPage() {
           });
         }
       } else {
-        // 마스터 등록
         await apiClient.post(`/table-management/tables/${MASTER_TABLE}/add`, masterFields);
       }
-
-      // 디테일 등록
       for (const row of detailRows) {
         const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
         await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
           ...detailFields,
+          id: crypto.randomUUID(),
           order_no: masterForm.order_no,
         });
       }
-
       toast.success(isEditMode ? "수정되었습니다." : "등록되었습니다.");
       setIsModalOpen(false);
       fetchOrders();
@@ -470,29 +600,34 @@ export default function SalesOrderPage() {
     }
   };
 
-  // 품목 검색 (리피터에서 추가)
+  // 품목 검색
   const searchItems = async (page?: number, size?: number) => {
     const p = page ?? itemPage;
     const s = size ?? itemPageSize;
     setItemSearchLoading(true);
     try {
       const filters: any[] = [];
-      if (itemSearchKeyword) {
-        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
-      }
-      // division 필터는 다중값(쉼표 구분)이므로 contains로 부분 매칭
-      if (itemSearchDivision !== "all") {
-        filters.push({ columnName: "division", operator: "contains", value: itemSearchDivision });
-      }
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
       const res = await apiClient.post(`/table-management/tables/item_info/data`, {
-        page: p, size: s,
+        page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
         autoFilter: true,
       });
       const resData = res.data?.data;
-      setItemSearchResults(resData?.data || resData?.rows || []);
-      setItemTotal(resData?.total || 0);
-      setItemTotalPages(resData?.totalPages || Math.ceil((resData?.total || 0) / s));
+      let allRows = resData?.data || resData?.rows || [];
+      // 관리품목 필터 (코드/라벨 혼재 대응)
+      if (itemSearchDivision !== "all") {
+        const divLabel = categoryOptions["item_division"]?.find((o) => o.code === itemSearchDivision)?.label || "";
+        allRows = allRows.filter((item: any) => {
+          const div = item.division || "";
+          return div.includes(itemSearchDivision) || (divLabel && div.includes(divLabel));
+        });
+      }
+      const total = allRows.length;
+      const start = (p - 1) * s;
+      setItemSearchResults(allRows.slice(start, start + s));
+      setItemTotal(total);
+      setItemTotalPages(Math.max(1, Math.ceil(total / s)));
     } catch { /* skip */ } finally {
       setItemSearchLoading(false);
     }
@@ -507,10 +642,7 @@ export default function SalesOrderPage() {
 
   const commitItemPageInput = () => {
     const parsed = parseInt(itemPageInput, 10);
-    if (isNaN(parsed) || itemPageInput.trim() === "") {
-      setItemPageInput(String(itemPage));
-      return;
-    }
+    if (isNaN(parsed) || itemPageInput.trim() === "") { setItemPageInput(String(itemPage)); return; }
     const clamped = Math.max(1, Math.min(parsed, itemTotalPages || 1));
     if (clamped !== itemPage) handleItemPageChange(clamped);
     setItemPageInput(String(clamped));
@@ -526,18 +658,15 @@ export default function SalesOrderPage() {
     const selected = Array.from(itemSelectedMap.values());
     if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
 
-    // 단가방식에 따라 단가 조회
     const isStandardPrice = masterForm.price_mode === "CAT_MM0BUZKL_HJ7U" || masterForm.price_mode === "CAT_MLKG792S_54WJ";
     const isCustomerPrice = masterForm.price_mode === "CAT_MM0BV3OS_41DX" || masterForm.price_mode === "CAT_MLKG7D8K_N8SI";
     const partnerId = masterForm.partner_id;
-    const today = new Date().toISOString().split("T")[0];
 
-    // 거래처별 단가 조회 (선택된 품목들에 대해)
     let customerPriceMap: Record<string, string> = {};
     if (isCustomerPrice && partnerId) {
       try {
         const itemIds = selected.map((item) => item.item_number || item.id);
-        const res = await apiClient.post(`/table-management/tables/customer_item_mapping/data`, {
+        const res = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
           page: 1, size: 500,
           dataFilter: {
             enabled: true,
@@ -548,41 +677,42 @@ export default function SalesOrderPage() {
           },
           autoFilter: true,
         });
-        const mappings = res.data?.data?.data || res.data?.data?.rows || [];
-        for (const m of mappings) {
-          // calculated_price 우선, 없으면 current_unit_price
-          const price = m.calculated_price || m.current_unit_price || "";
-          if (price) customerPriceMap[m.item_id] = String(price);
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        for (const p of prices) {
+          const start = p.start_date || "";
+          const end = p.end_date || "";
+          if (start && start > today) continue;
+          if (end && end < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) {
+            const existing = customerPriceMap[p.item_id];
+            if (!existing || Number(price) > 0) customerPriceMap[p.item_id] = String(price);
+          }
         }
-      } catch (err) {
-        // 단가 조회 실패 시 무시
-      }
+      } catch { /* skip */ }
     }
 
     const newRows = selected.map((item) => {
       const itemCode = item.item_number || item.id;
       let unitPrice = "";
-
       if (isStandardPrice) {
-        // 기준단가: item_info의 standard_price 또는 selling_price
         unitPrice = item.standard_price || item.selling_price || "";
       } else if (isCustomerPrice && partnerId) {
-        // 거래처별 단가
         unitPrice = customerPriceMap[itemCode] || "";
       }
-
       return {
         _id: `new_${Date.now()}_${Math.random()}`,
         part_code: itemCode,
         part_name: item.item_name,
         spec: item.size || "",
         material: getCategoryLabel("item_material", item.material) || item.material || "",
+        packing_material: "",
         unit: getCategoryLabel("item_unit", item.unit) || item.unit || "",
-        qty: "",
-        standard_price: item.standard_price || "",
+        qty: "1",
+        pack_qty: "0",
         unit_price: unitPrice,
-        amount: "",
-        currency_code: item.currency_code || "",
+        amount: unitPrice ? String(1 * parseFloat(unitPrice)) : "",
         due_date: "",
       };
     });
@@ -593,11 +723,73 @@ export default function SalesOrderPage() {
     setItemSelectOpen(false);
   };
 
+  // 단가 재계산: 단가방식/거래처 변경 시 기존 품목 단가 갱신
+  const recalcPrices = useCallback(async (priceMode: string, partnerId: string) => {
+    if (detailRows.length === 0) return;
+    const STANDARD_CODES = ["CAT_MM0BUZKL_HJ7U", "CAT_MLKG792S_54WJ"];
+    const CUSTOMER_CODES = ["CAT_MM0BV3OS_41DX", "CAT_MLKG7D8K_N8SI"];
+    const isStandard = STANDARD_CODES.includes(priceMode);
+    const isCustomer = CUSTOMER_CODES.includes(priceMode);
+
+    if (isStandard) {
+      // 품목 기준단가 조회
+      const itemCodes = detailRows.map((r) => r.part_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+          autoFilter: true,
+        });
+        const items = res.data?.data?.data || res.data?.data?.rows || [];
+        const priceMap: Record<string, string> = {};
+        for (const item of items) {
+          const price = item.standard_price || item.selling_price || "";
+          if (price) priceMap[item.item_number] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.part_code] || "";
+          const qty = parseFloat(row.qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    } else if (isCustomer && partnerId) {
+      // 거래처별 단가 조회
+      const itemCodes = detailRows.map((r) => r.part_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "customer_id", operator: "equals", value: partnerId },
+            { columnName: "item_id", operator: "in", value: itemCodes },
+          ]},
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        const priceMap: Record<string, string> = {};
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) priceMap[p.item_id] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.part_code] || "";
+          const qty = parseFloat(row.qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    }
+  }, [detailRows]);
+
   const updateDetailRow = (idx: number, field: string, value: string) => {
     setDetailRows((prev) => {
       const next = [...prev];
       next[idx] = { ...next[idx], [field]: value };
-      // 수량 × 단가 = 금액 자동 계산
       if (field === "qty" || field === "unit_price") {
         const qty = parseFloat(field === "qty" ? value : next[idx].qty) || 0;
         const price = parseFloat(field === "unit_price" ? value : next[idx].unit_price) || 0;
@@ -611,17 +803,21 @@ export default function SalesOrderPage() {
     setDetailRows((prev) => prev.filter((_, i) => i !== idx));
   };
 
-  // input_mode 값으로 레이어 판단
-  // 거래처 우선 (구: 공급업체 우선) - 두 코드 모두 지원
+  // 조건부 레이어 판단
   const isSupplierFirst = masterForm.input_mode === "CAT_MLZWPH5R_983R" || masterForm.input_mode === "CAT_MLKG5KP8_C39W";
-  const isItemFirst = masterForm.input_mode === "CAT_MLZWPUQC_PB8Z" || masterForm.input_mode === "CAT_MLKG5FZO_HS1B";
   const isOverseas = masterForm.sell_mode === "CAT_MLZWFF2Z_BQCV" || masterForm.sell_mode === "CAT_MLKGAR2W_HAPO";
 
   const handleExcelDownload = async () => {
     if (orders.length === 0) { toast.error("다운로드할 데이터가 없습니다."); return; }
+    const cols = ["order_no","part_code","part_name","spec","unit","qty","ship_qty","balance_qty","unit_price","amount","currency_code","due_date","memo"];
+    const labels: Record<string, string> = {
+      order_no:"수주번호",part_code:"품번",part_name:"품명",spec:"규격",unit:"단위",
+      qty:"수량",ship_qty:"출하수량",balance_qty:"잔량",unit_price:"단가",
+      amount:"금액",currency_code:"통화",due_date:"납기일",memo:"메모",
+    };
     const data = orders.map((o) => {
       const row: Record<string, any> = {};
-      for (const col of GRID_COLUMNS) row[col.label] = o[col.key] || "";
+      for (const col of cols) row[labels[col]] = o[col] || "";
       return row;
     });
     await exportToExcel(data, "수주관리.xlsx", "수주목록");
@@ -630,260 +826,603 @@ export default function SalesOrderPage() {
 
   return (
     <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 필터 (사용자 설정 가능) */}
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground">
+        <span>영업관리</span>
+        <span className="opacity-40">/</span>
+        <span className="font-medium text-foreground">수주관리</span>
+      </nav>
+
+      {/* 검색 필터 (DynamicSearchFilter) */}
       <DynamicSearchFilter
         tableName={DETAIL_TABLE}
-        filterId="sales-order"
+        filterId="c16-sales-order"
         onFilterChange={setSearchFilters}
-        dataCount={totalCount}
-        externalFilterConfig={filterConfig}
+        dataCount={orders.length}
+        externalFilterConfig={ts.filterConfig}
       />
 
-      {/* 메인 테이블 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm flex flex-col">
-        <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-          <div className="font-semibold flex items-center gap-2 text-sm">
-            <ClipboardList className="w-5 h-5" /> 수주 목록
-            <Badge variant="secondary" className="font-normal">{totalCount}건</Badge>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
-              <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
-            </Button>
-            <Button size="sm" onClick={openRegisterModal}>
-              <Plus className="w-4 h-4 mr-1.5" /> 수주 등록
-            </Button>
-            <Button variant="outline" size="sm" disabled={checkedIds.length !== 1} onClick={() => {
+      {/* 액션 바 */}
+      <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-bold">수주 목록</h2>
+          <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+            {totalCount}건
+          </span>
+        </div>
+        <div className="flex items-center gap-2 overflow-x-auto">
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4" /> 등록
+          </Button>
+          <Button
+            variant="outline" size="sm"
+            disabled={checkedIds.length !== 1}
+            onClick={() => {
               const item = orders.find((o) => o.id === checkedIds[0]);
               if (item) openEditModal(item.order_no);
-            }}>
-              <Pencil className="w-4 h-4 mr-1.5" /> 수정
-            </Button>
-            <Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDelete}>
-              <Trash2 className="w-4 h-4 mr-1.5" /> 삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
-            </Button>
-            <Button variant="outline" size="sm" disabled={checkedIds.length === 0} onClick={() => setShippingPlanOpen(true)}>
-              <Truck className="w-4 h-4 mr-1.5" /> 출하계획 {checkedIds.length > 0 && `(${checkedIds.length})`}
-            </Button>
-            <Button variant="outline" size="sm" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-          </div>
+            }}
+          >
+            <Pencil className="w-4 h-4" /> 수정
+          </Button>
+          <Button
+            variant="outline" size="sm"
+            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10 hover:text-destructive"
+            disabled={checkedIds.length === 0}
+            onClick={handleDelete}
+          >
+            <Trash2 className="w-4 h-4" /> 삭제{checkedIds.length > 0 && ` (${checkedIds.length})`}
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4" /> 엑셀
+          </Button>
+          <Button variant="outline" size="sm" disabled={checkedIds.length === 0} onClick={() => setShippingPlanOpen(true)}>
+            <Truck className="w-4 h-4" /> 출하계획{checkedIds.length > 0 && ` (${checkedIds.length})`}
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+            <Settings2 className="w-4 h-4" /> 설정
+          </Button>
         </div>
+      </div>
 
-        <DataGrid
-          gridId="sales-order"
-          columns={gridColumns}
-          data={orders}
-          loading={loading}
-          showCheckbox
-          showRowNumber={false}
-          checkedIds={checkedIds}
-          onCheckedChange={setCheckedIds}
-          onRowDoubleClick={(row) => openEditModal(row.order_no)}
-          tableName={DETAIL_TABLE}
-          emptyMessage="등록된 수주가 없습니다"
-          onCellEdit={() => fetchOrders()}
-        />
+      {/* 데이터 테이블 (플랫 리스트) */}
+      <div className="flex-1 overflow-hidden rounded-lg border border-border bg-card">
+        <div className="h-full overflow-auto">
+          <Table style={{ minWidth: "1500px" }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "100px" }} />
+              <col style={{ width: "120px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "70px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "90px" }} />
+              <col style={{ width: "110px" }} />
+              <col style={{ width: "100px" }} />
+              <col style={{ width: "120px" }} />
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = filteredFlatRows.map((r) => r.id);
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
+                  <Checkbox
+                    checked={(() => {
+                      const allFilteredIds = filteredFlatRows.map((r) => r.id);
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
+                  />
+                </TableHead>
+                {FLAT_COLUMNS.map((col) => {
+                  const isRight = ["qty", "ship_qty", "balance_qty", "unit_price", "amount"].includes(col.key);
+                  return (
+                    <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none", isRight && "text-right")}>
+                      <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                        <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                          <span className="truncate">{col.label}</span>
+                          {sortState?.key === col.key && (
+                            sortState.direction === "asc"
+                              ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                              : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                          )}
+                        </div>
+                        {(columnUniqueValues[col.key] || []).length > 0 && (
+                          <HeaderFilterPopover
+                            colKey={col.key} colLabel={col.label}
+                            uniqueValues={columnUniqueValues[col.key] || []}
+                            filterValues={headerFilters[col.key] || new Set<string>()}
+                            onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                          />
+                        )}
+                      </div>
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
+                  </TableCell>
+                </TableRow>
+              ) : filteredFlatRows.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <ClipboardList className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 수주가 없어요</span>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                filteredFlatRows.map((row) => {
+                  const isChecked = checkedIds.includes(row.id);
+                  return (
+                    <TableRow
+                      key={row.id}
+                      className={cn(
+                        "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                        isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                      )}
+                      onClick={() => {
+                        setCheckedIds((prev) =>
+                          prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                        );
+                      }}
+                      onDoubleClick={() => openEditModal(row.order_no)}
+                    >
+                      <TableCell
+                        className="text-center cursor-pointer"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setCheckedIds((prev) =>
+                            prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                          );
+                        }}
+                      >
+                        <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                      </TableCell>
+                      <TableCell className="font-mono whitespace-nowrap text-[13px]">{row.order_no}</TableCell>
+                      <TableCell className="text-[13px] truncate max-w-[140px]"><span className="block truncate">{row.partner_id || ""}</span></TableCell>
+                      <TableCell className="whitespace-nowrap text-[13px]">{row.order_date || ""}</TableCell>
+                      <TableCell className="font-mono text-[13px]">{row.part_code}</TableCell>
+                      <TableCell className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.part_name}>{row.part_name}</span></TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                      <TableCell className="text-[13px]">{row.unit}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.qty ? Number(row.qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px] text-muted-foreground">{row.ship_qty ? Number(row.ship_qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.balance_qty ? Number(row.balance_qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px] font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-[13px]">{row.due_date || ""}</TableCell>
+                      <TableCell className="text-muted-foreground"><span className="block truncate max-w-[120px]">{row.memo || ""}</span></TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
       </div>
 
       {/* 수주 등록/수정 모달 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title={isEditMode ? "수주 수정" : "수주 등록"}
-        description={isEditMode ? "수주 정보를 수정합니다." : "새로운 수주를 등록합니다."}
-        footer={
-          <>
-            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
-            <Button onClick={handleSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
-            </Button>
-          </>
-        }
-      >
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="flex flex-col gap-0 p-0 max-w-5xl w-full" style={{ maxHeight: "85vh" }}>
+          <DialogHeader className="shrink-0 border-b border-border px-6 py-5">
+            <DialogTitle className="text-[17px] font-bold">
+              {isEditMode ? "수주 수정" : "수주 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-sm text-muted-foreground">
+              {isEditMode ? "수주 정보를 수정합니다." : "새로운 수주를 등록합니다."}
+            </DialogDescription>
+          </DialogHeader>
 
-          <div className="space-y-4 py-2">
-            {/* 기본 레이어 (항상 표시) */}
-            <div className="grid grid-cols-4 gap-4">
-              <div className="space-y-1.5">
-                <Label className="text-sm">수주번호 <span className="text-destructive">*</span></Label>
-                <Input value={masterForm.order_no || ""} onChange={(e) => setMasterForm((p) => ({ ...p, order_no: e.target.value }))}
-                  placeholder="수주번호" className="h-9" disabled={isEditMode} />
+          <div className="flex-1 overflow-y-auto px-6 py-5 space-y-6">
+            {/* 기본 정보 섹션 */}
+            <div className="space-y-3">
+              <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                기본 정보
+                <div className="flex-1 h-px bg-border" />
               </div>
-              <div className="space-y-1.5">
-                <Label className="text-sm">수주일</Label>
-                <FormDatePicker value={masterForm.order_date || ""} onChange={(v) => setMasterForm((p) => ({ ...p, order_date: v }))} placeholder="수주일" />
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-sm">판매 유형</Label>
-                <SmartSelect options={categoryOptions["sell_mode"] || []} value={masterForm.sell_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, sell_mode: v }))} placeholder="선택" />
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-sm">입력방식</Label>
-                <SmartSelect options={categoryOptions["input_mode"] || []} value={masterForm.input_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, input_mode: v }))} placeholder="선택" />
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-sm">단가방식</Label>
-                <SmartSelect options={categoryOptions["price_mode"] || []} value={masterForm.price_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, price_mode: v }))} placeholder="선택" />
+              <div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    수주번호 <span className="text-destructive">*</span>
+                  </Label>
+                  <Input
+                    value={masterForm.order_no || ""}
+                    onChange={(e) => setMasterForm((p) => ({ ...p, order_no: e.target.value }))}
+                    placeholder="수주번호" className="h-9" disabled={isEditMode}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    수주일 <span className="text-destructive">*</span>
+                  </Label>
+                  <Input
+                    type="date"
+                    value={masterForm.order_date || ""}
+                    onChange={(e) => setMasterForm((p) => ({ ...p, order_date: e.target.value }))}
+                    className="h-9"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    판매유형 <span className="text-destructive">*</span>
+                  </Label>
+                  <Select value={masterForm.sell_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, sell_mode: v }))}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                    <SelectContent>
+                      {(categoryOptions["sell_mode"] || []).map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">입력방식</Label>
+                  <Select value={masterForm.input_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, input_mode: v }))}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                    <SelectContent>
+                      {(categoryOptions["input_mode"] || []).map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">단가방식</Label>
+                  <Select value={masterForm.price_mode || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, price_mode: v })); recalcPrices(v, masterForm.partner_id || ""); }}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                    <SelectContent>
+                      {(categoryOptions["price_mode"] || []).map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex items-end pb-1">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <Checkbox checked={allowPriceEdit} onCheckedChange={(v) => setAllowPriceEdit(!!v)} />
+                    <span className="text-sm font-medium">단가 수정 허용</span>
+                  </label>
+                </div>
               </div>
             </div>
 
-            {/* 레이어 2: 거래처 우선 (거래처, 담당자, 납품처, 납품장소) */}
+            {/* 거래처 우선 조건부 레이어 */}
             {isSupplierFirst && (
-              <div className="grid grid-cols-4 gap-4 border-t pt-4">
-                <div className="space-y-1.5">
-                  <Label className="text-sm">거래처</Label>
-                  <SmartSelect options={categoryOptions["partner_id"] || []} value={masterForm.partner_id || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, partner_id: v, delivery_partner_id: "" })); loadDeliveryOptions(v); }} placeholder="거래처 선택" />
+              <div className="rounded-lg border border-dashed border-border bg-muted/50 p-4 space-y-3">
+                <div className="flex items-center gap-1.5 text-xs font-semibold text-primary">
+                  <ClipboardList className="w-3.5 h-3.5" /> 거래처 정보
                 </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">담당자</Label>
-                  <SmartSelect options={categoryOptions["manager_id"] || []} value={masterForm.manager_id || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager_id: v }))} placeholder="담당자 선택" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">납품처</Label>
-                  {deliveryOptions.length > 0 ? (
-                    <SmartSelect options={deliveryOptions} value={masterForm.delivery_partner_id || ""} onValueChange={(v) => {
-                      setMasterForm((p) => ({ ...p, delivery_partner_id: v }));
-                      const found = deliveryOptions.find((o) => o.code === v);
-                      if (found) {
-                        const addr = found.label.match(/\((.+)\)$/)?.[1] || "";
-                        if (addr) setMasterForm((p) => ({ ...p, delivery_partner_id: v, delivery_address: addr }));
-                      }
-                    }} placeholder="납품처 선택" />
-                  ) : (
-                    <Input value={masterForm.delivery_partner_id || ""} onChange={(e) => setMasterForm((p) => ({ ...p, delivery_partner_id: e.target.value }))}
-                      placeholder={masterForm.partner_id ? "등록된 납품처 없음" : "거래처를 먼저 선택하세요"} className="h-9" disabled={!masterForm.partner_id} />
-                  )}
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">납품장소</Label>
-                  <Input value={masterForm.delivery_address || ""} onChange={(e) => setMasterForm((p) => ({ ...p, delivery_address: e.target.value }))}
-                    placeholder="납품장소" className="h-9" />
+                <div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">거래처</Label>
+                    <Select
+                      value={masterForm.partner_id || ""}
+                      onValueChange={(v) => { setMasterForm((p) => ({ ...p, partner_id: v, delivery_partner_id: "" })); loadDeliveryOptions(v); recalcPrices(masterForm.price_mode || "", v); }}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="거래처 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["partner_id"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자</Label>
+                    <Select value={masterForm.manager_id || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager_id: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="담당자 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["manager_id"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">납품처</Label>
+                    {deliveryOptions.length > 0 ? (
+                      <Select
+                        value={masterForm.delivery_partner_id || ""}
+                        onValueChange={(v) => {
+                          setMasterForm((p) => ({ ...p, delivery_partner_id: v }));
+                          const found = deliveryOptions.find((o) => o.code === v);
+                          if (found) {
+                            const addr = found.label.match(/\((.+)\)$/)?.[1] || "";
+                            if (addr) setMasterForm((p) => ({ ...p, delivery_partner_id: v, delivery_address: addr }));
+                          }
+                        }}
+                      >
+                        <SelectTrigger className="h-9"><SelectValue placeholder="납품처 선택" /></SelectTrigger>
+                        <SelectContent>
+                          {deliveryOptions.map((o) => (
+                            <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={masterForm.delivery_partner_id || ""}
+                        onChange={(e) => setMasterForm((p) => ({ ...p, delivery_partner_id: e.target.value }))}
+                        placeholder={masterForm.partner_id ? "등록된 납품처 없음" : "거래처를 먼저 선택해주세요"}
+                        className="h-9" disabled={!masterForm.partner_id}
+                      />
+                    )}
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">납품장소</Label>
+                    <Input
+                      value={masterForm.delivery_address || ""}
+                      onChange={(e) => setMasterForm((p) => ({ ...p, delivery_address: e.target.value }))}
+                      placeholder="납품장소" className="h-9"
+                    />
+                  </div>
                 </div>
               </div>
             )}
 
-            {/* 레이어 4: 해외판매 (인코텀즈, 결제조건, 통화, 선적항, 도착항, HS코드) */}
+            {/* 해외판매 조건부 레이어 */}
             {isOverseas && (
-              <div className="grid grid-cols-3 gap-4 border-t pt-4">
-                <div className="space-y-1.5">
-                  <Label className="text-sm">인코텀즈</Label>
-                  <SmartSelect options={categoryOptions["incoterms"] || []} value={masterForm.incoterms || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, incoterms: v }))} placeholder="선택" />
+              <div className="rounded-lg border border-dashed border-border bg-muted/50 p-4 space-y-3">
+                <div className="flex items-center gap-1.5 text-xs font-semibold text-primary">
+                  해외판매 추가 정보
                 </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">결제조건</Label>
-                  <SmartSelect options={categoryOptions["payment_term"] || []} value={masterForm.payment_term || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, payment_term: v }))} placeholder="선택" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">통화</Label>
-                  <Input value={masterForm.currency || ""} onChange={(e) => setMasterForm((p) => ({ ...p, currency: e.target.value }))}
-                    placeholder="KRW" className="h-9" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">선적항</Label>
-                  <Input value={masterForm.port_of_loading || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_loading: e.target.value }))}
-                    className="h-9" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">도착항</Label>
-                  <Input value={masterForm.port_of_discharge || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_discharge: e.target.value }))}
-                    className="h-9" />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-sm">HS Code</Label>
-                  <Input value={masterForm.hs_code || ""} onChange={(e) => setMasterForm((p) => ({ ...p, hs_code: e.target.value }))}
-                    className="h-9" />
+                <div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-3">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">인코텀즈</Label>
+                    <Select value={masterForm.incoterms || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, incoterms: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["incoterms"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">결제조건</Label>
+                    <Select value={masterForm.payment_term || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, payment_term: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["payment_term"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">통화</Label>
+                    <Select value={masterForm.currency || "KRW"} onValueChange={(v) => setMasterForm((p) => ({ ...p, currency: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="통화 선택" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="KRW">KRW (원)</SelectItem>
+                        <SelectItem value="USD">USD (달러)</SelectItem>
+                        <SelectItem value="EUR">EUR (유로)</SelectItem>
+                        <SelectItem value="JPY">JPY (엔)</SelectItem>
+                        <SelectItem value="CNY">CNY (위안)</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">선적항</Label>
+                    <Input value={masterForm.port_of_loading || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_loading: e.target.value }))} className="h-9" />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">도착항</Label>
+                    <Input value={masterForm.port_of_discharge || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_discharge: e.target.value }))} className="h-9" />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">HS Code</Label>
+                    <Input value={masterForm.hs_code || ""} onChange={(e) => setMasterForm((p) => ({ ...p, hs_code: e.target.value }))} className="h-9 font-mono text-xs" />
+                  </div>
                 </div>
               </div>
             )}
 
-            {/* 리피터 그리드 (품목 목록) — 레이어 2,3 공통 */}
-            <div className="border rounded-lg">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10">
-                <span className="text-sm font-semibold">수주 품목</span>
-                <Button size="sm" variant="outline" onClick={() => { setItemSelectedMap(new Map()); setItemPage(1); setItemPageInput("1"); setItemSearchKeyword(""); setItemSelectOpen(true); searchItems(1); }}>
-                  <Plus className="w-4 h-4 mr-1" /> 품목 추가
+            {/* 품목 내역 리피터 */}
+            <div className="space-y-2.5">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  <Package className="w-4 h-4" /> 품목 내역
+                  <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                    {detailRows.length}
+                  </span>
+                </div>
+                <Button size="sm" onClick={() => {
+                  setItemSelectedMap(new Map());
+                  setItemPage(1);
+                  setItemPageInput("1");
+                  setItemSearchKeyword("");
+                  setItemSelectOpen(true);
+                  searchItems(1);
+                }}>
+                  <Plus className="w-4 h-4" /> 품목 추가
                 </Button>
               </div>
-              <div className="overflow-auto max-h-[300px]">
-                <Table className="table-fixed">
-                  <TableHeader className="sticky top-0 bg-background z-10">
-                    <TableRow>
-                      <TableHead className="w-[40px]"></TableHead>
-                      <TableHead className="w-[120px]">품번</TableHead>
-                      <TableHead className="w-[120px]">품명</TableHead>
-                      <TableHead className="w-[80px]">규격</TableHead>
-                      <TableHead className="w-[60px]">단위</TableHead>
-                      <TableHead className="w-[100px]">기준단가</TableHead>
-                      <TableHead className="w-[90px]">수량</TableHead>
-                      <TableHead className="w-[100px]">단가</TableHead>
-                      <TableHead className="w-[100px]">금액</TableHead>
-                      <TableHead className="w-[70px]">통화</TableHead>
-                      <TableHead className="w-[160px]">납기일</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {detailRows.length === 0 ? (
-                      <TableRow><TableCell colSpan={11} className="text-center text-muted-foreground py-8">품목을 추가해주세요</TableCell></TableRow>
-                    ) : detailRows.map((row, idx) => (
-                      <TableRow key={row._id || idx}>
-                        <TableCell>
-                          <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive" onClick={() => removeDetailRow(idx)}>
-                            <X className="w-3.5 h-3.5" />
-                          </Button>
-                        </TableCell>
-                        <TableCell className="text-xs max-w-[120px]"><span className="block truncate" title={row.part_code}>{row.part_code}</span></TableCell>
-                        <TableCell className="text-xs max-w-[120px]"><span className="block truncate" title={row.part_name}>{row.part_name}</span></TableCell>
-                        <TableCell className="text-xs">{row.spec}</TableCell>
-                        <TableCell className="text-xs">{row.unit}</TableCell>
-                        <TableCell className="text-sm text-right text-muted-foreground">{row.standard_price ? Number(row.standard_price).toLocaleString() : ""}</TableCell>
-                        <TableCell>
-                          <Input value={formatNumber(row.qty || "")} onChange={(e) => updateDetailRow(idx, "qty", parseNumber(e.target.value))}
-                            className="h-8 text-sm text-right" />
-                        </TableCell>
-                        <TableCell>
-                          <Input value={formatNumber(row.unit_price || "")} onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))}
-                            className="h-8 text-sm text-right" />
-                        </TableCell>
-                        <TableCell className="text-sm text-right font-medium">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
-                        <TableCell>
-                          <Input value={row.currency_code || ""} onChange={(e) => updateDetailRow(idx, "currency_code", e.target.value)}
-                            className="h-8 text-sm" />
-                        </TableCell>
-                        <TableCell>
-                          <FormDatePicker value={row.due_date || ""} onChange={(v) => updateDetailRow(idx, "due_date", v)} placeholder="납기일" />
-                        </TableCell>
+              {detailRows.length === 0 ? (
+                <div className="flex flex-col items-center gap-2 rounded-lg border border-dashed border-border py-8 text-muted-foreground">
+                  <Package className="h-8 w-8 opacity-40" />
+                  <span className="text-sm">아직 추가된 품목이 없어요. 위 버튼으로 품목을 추가해주세요.</span>
+                </div>
+              ) : (
+                <div className="overflow-x-auto rounded-lg border border-border">
+                  <Table noWrapper className="min-w-max w-full">
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="w-10 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                        <TableHead className="w-28 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                        <TableHead className="w-32 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                        <TableHead className="w-20 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                        <TableHead className="w-20 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                        <TableHead className="w-24 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장재</TableHead>
+                        <TableHead className="w-20 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                        <TableHead className="w-20 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                        <TableHead className="w-20 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장수량</TableHead>
+                        <TableHead className="w-24 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                        <TableHead className="w-24 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
+                        <TableHead className="w-32 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>
+                        <TableHead className="w-24 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">분할/삭제</TableHead>
                       </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </div>
+                    </TableHeader>
+                    <TableBody>
+                      {detailRows.map((row, idx) => (
+                        <TableRow key={row._id || idx}>
+                          <TableCell className="text-center font-mono text-[13px] text-muted-foreground/50">{idx + 1}</TableCell>
+                          <TableCell className="max-w-[112px]">
+                            <span className="block truncate font-mono text-[13px]" title={row.part_code}>{row.part_code}</span>
+                          </TableCell>
+                          <TableCell className="max-w-[128px]">
+                            <span className="block truncate text-[13px]" title={row.part_name}>{row.part_name}</span>
+                          </TableCell>
+                          <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                          <TableCell className="text-[13px] text-muted-foreground">{row.material}</TableCell>
+                          <TableCell>
+                            <Input
+                              value={row.packing_material || ""}
+                              onChange={(e) => updateDetailRow(idx, "packing_material", e.target.value)}
+                              placeholder="포장재"
+                              className="h-8 text-xs"
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Select value={row.unit || ""} onValueChange={(v) => updateDetailRow(idx, "unit", v)}>
+                              <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                              <SelectContent>
+                                {(categoryOptions["item_unit"] || []).map((o) => (
+                                  <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="number"
+                              min="1"
+                              value={row.qty || "1"}
+                              onChange={(e) => updateDetailRow(idx, "qty", e.target.value)}
+                              className="h-8 text-xs text-right font-mono w-16"
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="number"
+                              min="0"
+                              value={row.pack_qty || "0"}
+                              onChange={(e) => updateDetailRow(idx, "pack_qty", e.target.value)}
+                              className="h-8 text-xs text-right font-mono w-16"
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              value={formatNumber(row.unit_price || "")}
+                              onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))}
+                              readOnly={!allowPriceEdit}
+                              className={cn("h-8 text-xs text-right font-mono w-20", !allowPriceEdit && "bg-muted cursor-not-allowed")}
+                            />
+                          </TableCell>
+                          <TableCell className="text-right font-mono text-[13px] font-semibold">
+                            {row.amount ? Number(row.amount).toLocaleString() : "0"}
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="date"
+                              value={row.due_date || ""}
+                              onChange={(e) => updateDetailRow(idx, "due_date", e.target.value)}
+                              className="h-8 text-xs"
+                            />
+                          </TableCell>
+                          <TableCell className="text-center">
+                            <div className="flex items-center gap-1 justify-center">
+                              <Button
+                                variant="default" size="sm"
+                                className="h-7 px-2 text-[11px] bg-emerald-500 hover:bg-emerald-600 text-white"
+                                onClick={() => {
+                                  setDetailRows((prev) => {
+                                    const next = [...prev];
+                                    const newRow = { ...next[idx], _id: `split_${Date.now()}_${Math.random()}` };
+                                    next.splice(idx + 1, 0, newRow);
+                                    return next;
+                                  });
+                                  toast.success("행이 분할되었어요");
+                                }}
+                              >
+                                분할
+                              </Button>
+                              <Button
+                                variant="ghost" size="sm"
+                                className="h-7 w-7 p-0 text-muted-foreground/50 hover:text-destructive hover:bg-destructive/5"
+                                onClick={() => removeDetailRow(idx)}
+                              >
+                                <X className="w-3.5 h-3.5" />
+                              </Button>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
             </div>
 
-            {/* 메모 */}
-            <div className="space-y-1.5">
-              <Label className="text-sm">메모</Label>
-              <Input value={masterForm.memo || ""} onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
-                placeholder="메모" className="h-9" />
+            {/* 비고 */}
+            <div className="space-y-3">
+              <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                비고
+                <div className="flex-1 h-px bg-border" />
+              </div>
+              <textarea
+                value={masterForm.memo || ""}
+                onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
+                placeholder="특이사항이나 메모를 입력해주세요"
+                rows={3}
+                className="w-full rounded-md border border-input bg-muted px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring/25 resize-vertical min-h-[80px]"
+              />
             </div>
           </div>
 
-          {/* 품목 선택 모달 (등록 모달 내부에 중첩) */}
+          <DialogFooter className="shrink-0 border-t border-border px-6 py-4">
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />} 저장
+            </Button>
+          </DialogFooter>
+
+          {/* 품목 선택 중첩 모달 */}
           <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
-            <DialogContent className="max-w-3xl max-h-[70vh]" onInteractOutside={(e) => e.preventDefault()}>
+            <DialogContent className="max-w-3xl" style={{ maxHeight: "70vh" }} onInteractOutside={(e) => e.preventDefault()}>
               <DialogHeader>
                 <DialogTitle>품목 선택</DialogTitle>
                 <DialogDescription>수주에 추가할 품목을 선택 후 하단 버튼을 눌러주세요.</DialogDescription>
               </DialogHeader>
               <div className="flex gap-2 mb-3">
-                <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
+                <Input
+                  placeholder="품명/품목코드 검색"
+                  value={itemSearchKeyword}
                   onChange={(e) => setItemSearchKeyword(e.target.value)}
                   onKeyDown={(e) => e.key === "Enter" && triggerNewSearch()}
-                  className="h-9 flex-1" />
+                  className="h-9 flex-1"
+                />
                 <Select value={itemSearchDivision} onValueChange={setItemSearchDivision}>
                   <SelectTrigger className="h-9 w-[130px]"><SelectValue placeholder="관리품목" /></SelectTrigger>
                   <SelectContent>
@@ -894,15 +1433,16 @@ export default function SalesOrderPage() {
                   </SelectContent>
                 </Select>
                 <Button size="sm" onClick={triggerNewSearch} disabled={itemSearchLoading} className="h-9">
-                  {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+                  {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" />조회</>}
                 </Button>
               </div>
-              <div className="overflow-auto max-h-[320px] border rounded-lg">
-                <Table>
-                  <TableHeader className="sticky top-0 bg-background z-10">
-                    <TableRow>
-                      <TableHead className="w-[40px] text-center">
-                        <input type="checkbox"
+              <div className="overflow-auto rounded-lg border border-border" style={{ maxHeight: "320px" }}>
+                <Table noWrapper>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-10 text-center">
+                        <input
+                          type="checkbox"
                           checked={itemSearchResults.length > 0 && itemSearchResults.every((i) => itemSelectedMap.has(i.id))}
                           onChange={(e) => {
                             setItemSelectedMap((prev) => {
@@ -911,33 +1451,47 @@ export default function SalesOrderPage() {
                               else itemSearchResults.forEach((i) => next.delete(i.id));
                               return next;
                             });
-                          }} />
+                          }}
+                        />
                       </TableHead>
-                      <TableHead className="w-[130px]">품목코드</TableHead>
-                      <TableHead className="min-w-[150px]">품명</TableHead>
-                      <TableHead className="w-[100px]">규격</TableHead>
-                      <TableHead className="w-[100px]">재질</TableHead>
-                      <TableHead className="w-[60px]">단위</TableHead>
+                      <TableHead className="w-32 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="w-24 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-24 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                      <TableHead className="w-16 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
                     {itemSearchResults.length === 0 ? (
-                      <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
+                      <TableRow>
+                        <TableCell colSpan={6} className="py-8 text-center text-muted-foreground">검색 결과가 없어요</TableCell>
+                      </TableRow>
                     ) : itemSearchResults.map((item) => (
-                      <TableRow key={item.id} className={cn("cursor-pointer", itemSelectedMap.has(item.id) && "bg-primary/5")}
+                      <TableRow
+                        key={item.id}
+                        className={cn("cursor-pointer", itemSelectedMap.has(item.id) && "bg-primary/5")}
                         onClick={() => setItemSelectedMap((prev) => {
                           const next = new Map(prev);
                           if (next.has(item.id)) next.delete(item.id); else next.set(item.id, item);
                           return next;
-                        })}>
+                        })}
+                      >
                         <TableCell className="text-center">
                           <input type="checkbox" checked={itemSelectedMap.has(item.id)} readOnly />
                         </TableCell>
-                        <TableCell className="text-xs max-w-[130px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
-                        <TableCell className="text-sm max-w-[150px]"><span className="block truncate" title={item.item_name}>{item.item_name}</span></TableCell>
-                        <TableCell className="text-xs">{item.size}</TableCell>
-                        <TableCell className="text-xs">{categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}</TableCell>
-                        <TableCell className="text-xs">{categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}</TableCell>
+                        <TableCell className="max-w-[128px]">
+                          <span className="block truncate text-[13px]" title={item.item_number}>{item.item_number}</span>
+                        </TableCell>
+                        <TableCell className="max-w-[150px]">
+                          <span className="block truncate text-sm" title={item.item_name}>{item.item_name}</span>
+                        </TableCell>
+                        <TableCell className="text-[13px]">{item.size}</TableCell>
+                        <TableCell className="text-[13px]">
+                          {categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}
+                        </TableCell>
+                        <TableCell className="text-[13px]">
+                          {categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}
+                        </TableCell>
                       </TableRow>
                     ))}
                   </TableBody>
@@ -946,7 +1500,8 @@ export default function SalesOrderPage() {
               <div className="flex items-center justify-between w-full border-t pt-2">
                 <div className="flex items-center gap-1">
                   <span className="text-xs text-muted-foreground">표시:</span>
-                  <input type="number" min={1} max={200} value={itemPageSize}
+                  <input
+                    type="number" min={1} max={200} value={itemPageSize}
                     onChange={(e) => {
                       const v = Math.min(200, Math.max(1, Number(e.target.value) || 20));
                       setItemPageSize(v);
@@ -954,7 +1509,8 @@ export default function SalesOrderPage() {
                       setItemPageInput("1");
                       searchItems(1, v);
                     }}
-                    className="h-7 w-14 rounded-md border px-1 text-center text-xs" />
+                    className="h-7 w-14 rounded-md border px-1 text-center text-xs"
+                  />
                 </div>
                 <div className="flex items-center gap-1">
                   <Button variant="outline" size="sm" className="h-7 w-7 p-0"
@@ -965,12 +1521,14 @@ export default function SalesOrderPage() {
                     onClick={() => handleItemPageChange(itemPage - 1)} disabled={itemPage === 1 || itemSearchLoading}>
                     <ChevronLeft className="h-3 w-3" />
                   </Button>
-                  <input type="text" inputMode="numeric" value={itemPageInput}
+                  <input
+                    type="text" inputMode="numeric" value={itemPageInput}
                     onChange={(e) => setItemPageInput(e.target.value)}
                     onKeyDown={(e) => { if (e.key === "Enter") { commitItemPageInput(); (e.target as HTMLInputElement).blur(); } }}
                     onBlur={commitItemPageInput}
                     onFocus={(e) => e.target.select()}
-                    className="h-7 w-10 rounded-md border px-1 text-center text-xs" />
+                    className="h-7 w-10 rounded-md border px-1 text-center text-xs"
+                  />
                   <span className="text-xs text-muted-foreground">/ {itemTotalPages || 1}</span>
                   <Button variant="outline" size="sm" className="h-7 w-7 p-0"
                     onClick={() => handleItemPageChange(itemPage + 1)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
@@ -984,19 +1542,20 @@ export default function SalesOrderPage() {
                 <span className="text-xs text-muted-foreground">총 {itemTotal}건</span>
               </div>
               <DialogFooter>
-                <div className="flex items-center gap-2 w-full justify-between">
+                <div className="flex w-full items-center justify-between">
                   <span className="text-sm text-muted-foreground">{itemSelectedMap.size}개 선택됨</span>
                   <div className="flex gap-2">
                     <Button variant="outline" onClick={() => { setItemSelectedMap(new Map()); setItemSelectOpen(false); }}>취소</Button>
                     <Button onClick={addSelectedItemsToDetail} disabled={itemSelectedMap.size === 0}>
-                      <Plus className="w-4 h-4 mr-1" /> {itemSelectedMap.size}개 추가
+                      <Plus className="w-4 h-4 mr-1" />{itemSelectedMap.size}개 추가
                     </Button>
                   </div>
                 </div>
               </DialogFooter>
             </DialogContent>
           </Dialog>
-      </FullscreenDialog>
+        </DialogContent>
+      </Dialog>
 
       {/* 출하계획 동시 등록 모달 */}
       <ShippingPlanBatchModal
@@ -1017,11 +1576,12 @@ export default function SalesOrderPage() {
 
       {/* 테이블 설정 모달 */}
       <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={DETAIL_TABLE}
-        settingsId="sales-order"
-        onSave={applyTableSettings}
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
 
       {/* 공통 확인 다이얼로그 */}
diff --git a/frontend/app/(main)/COMPANY_7/sales/sales-item/page.tsx b/frontend/app/(main)/COMPANY_7/sales/sales-item/page.tsx
index 7847fa55..1558ac64 100644
--- a/frontend/app/(main)/COMPANY_7/sales/sales-item/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/sales/sales-item/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 /**
- * 판매품목정보 — 하드코딩 페이지
+ * 판매품목정보 — Type B 마스터-디테일 리디자인
  *
  * 좌측: 판매품목 목록 (item_info, 판매 관련 필터)
  * 우측: 선택한 품목의 거래처 정보 (customer_item_mapping → customer_mng 조인)
@@ -12,69 +12,61 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Badge } from "@/components/ui/badge";
-import {
-  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Package, Users, Search, X, Settings2 } from "lucide-react";
+import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Users, Package, Search, X, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
-import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
-import { TableSettingsModal, TableSettings, loadTableSettings } from "@/components/common/TableSettingsModal";
-import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
 import { useConfirmDialog } from "@/components/common/ConfirmDialog";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
 import { exportToExcel } from "@/lib/utils/excelExport";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 
 const ITEM_TABLE = "item_info";
 const MAPPING_TABLE = "customer_item_mapping";
 const CUSTOMER_TABLE = "customer_mng";
 
-// 좌측: 판매품목 컬럼
-const LEFT_COLUMNS: DataGridColumn[] = [
-  { key: "item_number", label: "품번", width: "w-[110px]" },
-  { key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
-  { key: "size", label: "규격", width: "w-[90px]" },
-  { key: "unit", label: "단위", width: "w-[60px]" },
-  { key: "standard_price", label: "기준단가", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "selling_price", label: "판매가격", width: "w-[90px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
-  { key: "status", label: "상태", width: "w-[60px]" },
-];
+// 숫자 포맷 헬퍼
+const formatNum = (val: any): string => {
+  if (val === null || val === undefined || val === "") return "";
+  const n = Number(val);
+  return isNaN(n) ? String(val) : n.toLocaleString();
+};
 
-// 우측: 거래처 정보 컬럼
-const RIGHT_COLUMNS: DataGridColumn[] = [
-  { key: "customer_code", label: "거래처코드", width: "w-[110px]" },
-  { key: "customer_name", label: "거래처명", minWidth: "min-w-[120px]" },
-  { key: "customer_item_code", label: "거래처품번", width: "w-[100px]" },
-  { key: "customer_item_name", label: "거래처품명", width: "w-[100px]" },
-  { key: "base_price", label: "기준가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "calculated_price", label: "단가", width: "w-[80px]", formatNumber: true, align: "right" },
-  { key: "currency_code", label: "통화", width: "w-[50px]" },
+const ITEM_GRID_COLUMNS = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "selling_price", label: "판매가격" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
 ];
 
 export default function SalesItemPage() {
   const { user } = useAuth();
-  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-sales-item", ITEM_TABLE, ITEM_GRID_COLUMNS);
 
   // 좌측: 품목
   const [items, setItems] = useState<any[]>([]);
   const [itemLoading, setItemLoading] = useState(false);
   const [itemCount, setItemCount] = useState(0);
-  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
   const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
 
-  // 테이블 설정
-  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
-  const [filterConfig, setFilterConfig] = useState<TableSettings["filters"] | undefined>();
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 우측: 거래처
   const [customerItems, setCustomerItems] = useState<any[]>([]);
@@ -83,6 +75,7 @@ export default function SalesItemPage() {
 
   // 카테고리
   const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string; isDefault?: boolean }[]>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
 
   // 거래처 추가 모달
   const [custSelectOpen, setCustSelectOpen] = useState(false);
@@ -99,6 +92,7 @@ export default function SalesItemPage() {
   // 엑셀
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
 
+
   // 거래처 상세 입력 모달 (거래처 품번/품명 + 단가)
   const [custDetailOpen, setCustDetailOpen] = useState(false);
   const [selectedCustsForDetail, setSelectedCustsForDetail] = useState<any[]>([]);
@@ -109,19 +103,8 @@ export default function SalesItemPage() {
     discount_value: string; rounding_type: string; rounding_unit_value: string;
     calculated_price: string;
   }>>>({});
-  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
   const [editCustData, setEditCustData] = useState<any>(null);
 
-  // 테이블 설정 적용 (필터)
-  const applyTableSettings = useCallback((settings: TableSettings) => {
-    setFilterConfig(settings.filters);
-  }, []);
-
-  // 마운트 시 저장된 설정 복원
-  useEffect(() => {
-    const saved = loadTableSettings("sales-item");
-    if (saved) applyTableSettings(saved);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // 카테고리 로드
   useEffect(() => {
@@ -165,11 +148,16 @@ export default function SalesItemPage() {
   const fetchItems = useCallback(async () => {
     setItemLoading(true);
     try {
-      const filters: { columnName: string; operator: string; value: any }[] = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const filters: { columnName: string; operator: string; value: any }[] = [];
 
       // 판매품목/영업관리 division 필터 (다중값 컬럼이므로 contains로 매칭)
       filters.push({ columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" });
 
+      // DynamicSearchFilter에서 전달된 필터 추가
+      for (const f of searchFilters) {
+        filters.push({ columnName: f.columnName, operator: f.operator, value: f.value });
+      }
+
       const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
         page: 1, size: 500,
         dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
@@ -192,7 +180,7 @@ export default function SalesItemPage() {
     } finally {
       setItemLoading(false);
     }
-  }, [searchFilters, categoryOptions]);
+  }, [searchFilters, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => { fetchItems(); }, [fetchItems]);
 
@@ -253,8 +241,6 @@ export default function SalesItemPage() {
         };
         const today = new Date().toISOString().split("T")[0];
         const seenCustIds = new Set<string>();
-
-        // customer_id로 정렬하여 같은 거래처끼리 묶기
         const sortedMappings = [...mappings].sort((a: any, b: any) => (a.customer_id || "").localeCompare(b.customer_id || ""));
 
         setCustomerItems(sortedMappings.map((m: any) => {
@@ -262,7 +248,6 @@ export default function SalesItemPage() {
           const isFirstOfGroup = !seenCustIds.has(custKey);
           if (custKey) seenCustIds.add(custKey);
 
-          // 오늘 날짜에 해당하는 단가
           const custPriceList = allPrices.filter((p: any) => p.customer_id === custKey);
           const todayPrice = custPriceList.find((p: any) =>
             (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
@@ -286,7 +271,7 @@ export default function SalesItemPage() {
       }
     };
     fetchCustomerItems();
-  }, [selectedItem?.item_number, priceCategoryOptions]);
+  }, [selectedItem?.item_number, priceCategoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // 거래처 검색
   const searchCustomers = async () => {
@@ -377,14 +362,25 @@ export default function SalesItemPage() {
       [custKey]: (prev[custKey] || []).map((r) => {
         if (r._id !== rowId) return r;
         const updated = { ...r, [field]: value };
-        if (["base_price", "discount_type", "discount_value"].includes(field)) {
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
           const bp = Number(updated.base_price) || 0;
           const dv = Number(updated.discount_value) || 0;
           const dt = updated.discount_type;
           let calc = bp;
           if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
           else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
-          updated.calculated_price = String(Math.round(calc));
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1;
+          if (roundLabel === "반올림") calc = Math.round(calc / unit) * unit;
+          else if (roundLabel === "절삭") calc = Math.floor(calc / unit) * unit;
+          else if (roundLabel === "올림") calc = Math.ceil(calc / unit) * unit;
+          updated.calculated_price = String(Math.floor(calc));
         }
         return updated;
       }),
@@ -406,25 +402,51 @@ export default function SalesItemPage() {
       if (found) custInfo = found;
     } catch { /* skip */ }
 
-    const mappingRows = [{
-      _id: `m_existing_${row.id}`,
-      customer_item_code: row.customer_item_code || "",
-      customer_item_name: row.customer_item_name || "",
-    }].filter((m) => m.customer_item_code || m.customer_item_name);
+    // 매핑 조회
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/customer_item_mapping/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: custKey },
+          { columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
+        ]}, autoFilter: true,
+      });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.customer_item_code || m.customer_item_name)
+        .map((m: any) => ({
+          _id: `m_existing_${m.id}`,
+          customer_item_code: m.customer_item_code || "",
+          customer_item_name: m.customer_item_name || "",
+        }));
+    } catch { /* skip */ }
 
-    const priceRows = [{
-      _id: `p_existing_${row.id}`,
-      start_date: row.start_date || "",
-      end_date: row.end_date || "",
-      currency_code: row.currency_code || "CAT_MLAMDKVN_PZJI",
-      base_price_type: row.base_price_type || "CAT_MLAMFGFT_4RZW",
-      base_price: row.base_price ? String(row.base_price) : "",
-      discount_type: row.discount_type || "",
-      discount_value: row.discount_value ? String(row.discount_value) : "",
-      rounding_type: row.rounding_type || "",
-      rounding_unit_value: row.rounding_unit_value || "",
-      calculated_price: row.calculated_price ? String(row.calculated_price) : "",
-    }].filter((p) => p.base_price || p.start_date);
+    // 단가 전체 조회
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: custKey },
+          { columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date ? String(p.start_date).split("T")[0] : "",
+        end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
 
     if (priceRows.length === 0) {
       priceRows.push({
@@ -480,6 +502,7 @@ export default function SalesItemPage() {
           );
           for (const price of priceRows) {
             await apiClient.post(`/table-management/tables/customer_item_prices/add`, {
+              id: crypto.randomUUID(),
               mapping_id: editCustData.id,
               customer_id: custKey,
               item_id: selectedItem.item_number,
@@ -494,6 +517,7 @@ export default function SalesItemPage() {
         } else {
           // 신규 등록
           const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
             customer_id: custKey, item_id: selectedItem.item_number,
             customer_item_code: mappingRows[0]?.customer_item_code || "",
             customer_item_name: mappingRows[0]?.customer_item_name || "",
@@ -502,6 +526,7 @@ export default function SalesItemPage() {
 
           for (let mi = 1; mi < mappingRows.length; mi++) {
             await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
               customer_id: custKey, item_id: selectedItem.item_number,
               customer_item_code: mappingRows[mi].customer_item_code || "",
               customer_item_name: mappingRows[mi].customer_item_name || "",
@@ -513,6 +538,7 @@ export default function SalesItemPage() {
           );
           for (const price of priceRows) {
             await apiClient.post(`/table-management/tables/customer_item_prices/add`, {
+              id: crypto.randomUUID(),
               mapping_id: mappingId || "", customer_id: custKey, item_id: selectedItem.item_number,
               start_date: price.start_date || null, end_date: price.end_date || null,
               currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
@@ -599,7 +625,6 @@ export default function SalesItemPage() {
       });
       toast.success(`${customerCheckedIds.length}개 거래처 매핑이 삭제되었습니다.`);
       setCustomerCheckedIds([]);
-      // 우측 새로고침
       const sid = selectedItemId;
       setSelectedItemId(null);
       setTimeout(() => setSelectedItemId(sid), 50);
@@ -619,214 +644,355 @@ export default function SalesItemPage() {
     toast.success("다운로드 완료");
   };
 
+  // EDataTable 컬럼 정의 (판매품목)
+  const itemColumns: EDataTableColumn[] = [
+    { key: "item_number", label: "품번", width: "w-[110px]" },
+    { key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
+    { key: "size", label: "규격", width: "w-[80px]" },
+    { key: "unit", label: "단위", width: "w-[60px]" },
+    { key: "standard_price", label: "기준단가", width: "w-[90px]", align: "right", formatNumber: true },
+    { key: "selling_price", label: "판매가격", width: "w-[90px]", align: "right", formatNumber: true },
+    { key: "currency_code", label: "통화", width: "w-[50px]" },
+    { key: "status", label: "상태", width: "w-[60px]" },
+  ];
+
   return (
-    <div className="flex h-full flex-col gap-3 p-3">
-      {/* 검색 */}
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
       <DynamicSearchFilter
         tableName={ITEM_TABLE}
-        filterId="sales-item"
+        filterId="c16-sales-item"
         onFilterChange={setSearchFilters}
-        dataCount={itemCount}
-        externalFilterConfig={filterConfig}
-        extraActions={
-          <div className="flex gap-1.5">
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setTableSettingsOpen(true)}>
-              <Settings2 className="w-4 h-4 mr-1.5" /> 테이블 설정
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
-              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
-            </Button>
-          </div>
-        }
+        dataCount={items.length}
+        externalFilterConfig={ts.filterConfig}
       />
 
-      {/* 분할 패널 */}
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" />
+            엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
       <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
         <ResizablePanelGroup direction="horizontal">
-          {/* 좌측: 판매품목 */}
+
+          {/* 좌측: 판매품목 목록 */}
           <ResizablePanel defaultSize={55} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Package className="w-4 h-4" /> 판매품목 목록
-                  <Badge variant="secondary" className="font-normal">{itemCount}건</Badge>
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">판매품목 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {itemCount}건
+                  </span>
                 </div>
-                <div className="flex gap-1.5">
+                <div className="flex items-center gap-1.5">
                   <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
                     <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
                   </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
                 </div>
               </div>
-              <DataGrid
-                gridId="sales-item-left"
-                columns={LEFT_COLUMNS}
-                data={items}
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={itemColumns}
+                data={ts.groupData(items)}
+                rowKey={(row) => row.id}
                 loading={itemLoading}
+                emptyMessage="등록된 판매품목이 없어요"
                 selectedId={selectedItemId}
-                onSelect={setSelectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
                 onRowDoubleClick={() => openEditItem()}
-                emptyMessage="등록된 판매품목이 없습니다"
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-sales-item"
               />
             </div>
           </ResizablePanel>
 
           <ResizableHandle withHandle />
 
-          {/* 우측: 거래처 정보 */}
+          {/* 우측: 디테일 패널 */}
           <ResizablePanel defaultSize={45} minSize={25}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  <Users className="w-4 h-4" /> 거래처 정보
-                  {selectedItem && <Badge variant="outline" className="font-normal">{selectedItem.item_name}</Badge>}
-                </div>
-                <div className="flex gap-1.5">
-                  <Button variant="outline" size="sm" disabled={!selectedItemId}
-                    onClick={() => { setCustCheckedIds(new Set()); setCustSelectOpen(true); searchCustomers(); }}>
-                    <Plus className="w-3.5 h-3.5 mr-1" /> 거래처 추가
-                  </Button>
-                  <Button variant="destructive" size="sm" disabled={customerCheckedIds.length === 0}
-                    onClick={handleCustomerMappingDelete}>
-                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
-                  </Button>
-                </div>
-              </div>
               {!selectedItemId ? (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
-                  좌측에서 품목을 선택하세요
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Package className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">품목을 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 품목을 선택하면 상세 정보가 표시돼요</div>
+                  </div>
                 </div>
               ) : (
-                <DataGrid
-                  gridId="sales-item-right"
-                  columns={RIGHT_COLUMNS}
-                  data={customerItems}
-                  loading={customerLoading}
-                  showRowNumber={false}
-                  showCheckbox
-                  checkedIds={customerCheckedIds}
-                  onCheckedChange={setCustomerCheckedIds}
-                  emptyMessage="등록된 거래처가 없습니다"
-                  onRowDoubleClick={(row) => openEditCust(row)}
-                />
+                <>
+                  {/* 거래처별 단가 헤더 */}
+                  <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                    <div className="flex items-center gap-2.5 px-4">
+                      <Users className="w-3.5 h-3.5 text-muted-foreground" />
+                      <span className="text-xs font-semibold">거래처별 단가</span>
+                      {customerItems.length > 0 && (
+                        <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{customerItems.length}</Badge>
+                      )}
+                    </div>
+                    <div className="flex gap-1.5">
+                      <Button
+                        size="sm"
+                        onClick={() => { setCustCheckedIds(new Set()); setCustSelectOpen(true); searchCustomers(); }}
+                      >
+                        <Plus className="w-3.5 h-3.5" /> 거래처 추가
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={customerCheckedIds.length === 0}
+                        onClick={handleCustomerMappingDelete}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" /> 삭제
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 거래처 테이블 */}
+                  <div className="flex-1 min-h-0 overflow-auto pt-px">
+                    {customerLoading ? (
+                      <div className="flex items-center justify-center h-full">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : customerItems.length === 0 ? (
+                      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+                        등록된 거래처가 없어요
+                      </div>
+                    ) : (
+                      <Table noWrapper>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted h-10">
+                            <TableHead className="w-[40px] text-center px-2">
+                              <Checkbox
+                                checked={customerItems.length > 0 && customerCheckedIds.length === customerItems.length}
+                                onCheckedChange={(checked) => {
+                                  if (checked === true) setCustomerCheckedIds(customerItems.map((c) => c.id));
+                                  else setCustomerCheckedIds([]);
+                                }}
+                              />
+                            </TableHead>
+                            <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처코드</TableHead>
+                            <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품번</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품명</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {customerItems.map((row) => (
+                            <TableRow
+                              key={row.id}
+                              className={cn(
+                                "cursor-pointer h-[41px]",
+                                customerCheckedIds.includes(row.id) ? "bg-primary/[0.08]" : "hover:bg-accent"
+                              )}
+                              onClick={() => {
+                                setCustomerCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                              onDoubleClick={() => openEditCust(row)}
+                            >
+                              <TableCell className="text-center px-2">
+                                <Checkbox
+                                  checked={customerCheckedIds.includes(row.id)}
+                                  onCheckedChange={() => {}}
+                                />
+                              </TableCell>
+                              <TableCell className="text-[13px] font-mono text-muted-foreground">{row.customer_code}</TableCell>
+                              <TableCell className="text-sm text-foreground">{row.customer_name}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.customer_item_code}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.customer_item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right font-mono text-muted-foreground">{formatNum(row.base_price)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-mono text-foreground font-semibold">{formatNum(row.calculated_price)}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.currency_code}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </>
               )}
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>
       </div>
 
-      {/* 품목 수정 모달 */}
-      <FullscreenDialog
-        open={editItemOpen}
-        onOpenChange={setEditItemOpen}
-        title="판매품목 수정"
-        description={`${editItemForm.item_number || ""} — ${editItemForm.item_name || ""}`}
-        defaultMaxWidth="max-w-2xl"
-        footer={
-          <>
+      {/* ── 품목 수정 모달 ── */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>판매품목 수정</DialogTitle>
+            <DialogDescription>
+              {editItemForm.item_number || ""} — {editItemForm.item_name || ""}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {/* 품목 기본정보 (읽기 전용) */}
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+
+            <div className="col-span-2 border-t my-1" />
+
+            {/* 판매 설정 (수정 가능) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">판매가격</Label>
+              <Input
+                value={editItemForm.selling_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
+                placeholder="판매가격을 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">기준단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">통화</Label>
+              <Select
+                value={editItemForm.currency_code || ""}
+                onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="통화를 선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
             <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
             <Button onClick={handleEditSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
             </Button>
-          </>
-        }
-      >
-        <div className="grid grid-cols-2 gap-4 py-4">
-          {/* 품목 기본정보 (읽기 전용) */}
-          {[
-            { key: "item_number", label: "품목코드" },
-            { key: "item_name", label: "품명" },
-            { key: "size", label: "규격" },
-            { key: "unit", label: "단위" },
-            { key: "material", label: "재질" },
-            { key: "status", label: "상태" },
-          ].map((f) => (
-            <div key={f.key} className="space-y-1.5">
-              <Label className="text-sm text-muted-foreground">{f.label}</Label>
-              <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
-            </div>
-          ))}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
-          <div className="col-span-2 border-t my-2" />
-
-          {/* 판매 설정 (수정 가능) */}
-          <div className="space-y-1.5">
-            <Label className="text-sm">판매가격</Label>
-            <Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
-              placeholder="판매가격" className="h-9" />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-sm">기준단가</Label>
-            <Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
-              placeholder="기준단가" className="h-9" />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-sm">통화</Label>
-            <Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
-              <SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
-              <SelectContent>
-                {(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </FullscreenDialog>
-
-      {/* 거래처 추가 모달 */}
+      {/* ── 거래처 검색 및 추가 모달 ── */}
       <Dialog open={custSelectOpen} onOpenChange={setCustSelectOpen}>
-        <DialogContent className="max-w-2xl max-h-[70vh]">
+        <DialogContent className="max-w-2xl">
           <DialogHeader>
-            <DialogTitle>거래처 선택</DialogTitle>
-            <DialogDescription>품목에 추가할 거래처를 선택하세요.</DialogDescription>
+            <DialogTitle>거래처 검색 및 추가</DialogTitle>
+            <DialogDescription>품목에 추가할 거래처를 선택해주세요.</DialogDescription>
           </DialogHeader>
-          <div className="flex gap-2 mb-3">
-            <Input placeholder="거래처명 검색" value={custSearchKeyword}
-              onChange={(e) => setCustSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && searchCustomers()}
-              className="h-9 flex-1" />
-            <Button size="sm" onClick={searchCustomers} disabled={custSearchLoading} className="h-9">
-              {custSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
-            </Button>
-          </div>
-          <div className="overflow-auto max-h-[350px] border rounded-lg">
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">
-                    <input type="checkbox"
-                      checked={custSearchResults.length > 0 && custCheckedIds.size === custSearchResults.length}
-                      onChange={(e) => {
-                        if (e.target.checked) setCustCheckedIds(new Set(custSearchResults.map((c) => c.id)));
-                        else setCustCheckedIds(new Set());
-                      }} />
-                  </TableHead>
-                  <TableHead className="w-[110px]">거래처코드</TableHead>
-                  <TableHead className="min-w-[130px]">거래처명</TableHead>
-                  <TableHead className="w-[80px]">거래유형</TableHead>
-                  <TableHead className="w-[80px]">담당자</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {custSearchResults.length === 0 ? (
-                  <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
-                ) : custSearchResults.map((c) => (
-                  <TableRow key={c.id} className={cn("cursor-pointer", custCheckedIds.has(c.id) && "bg-primary/5")}
-                    onClick={() => setCustCheckedIds((prev) => {
-                      const next = new Set(prev);
-                      if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
-                      return next;
-                    })}>
-                    <TableCell className="text-center"><input type="checkbox" checked={custCheckedIds.has(c.id)} readOnly /></TableCell>
-                    <TableCell className="text-xs">{c.customer_code}</TableCell>
-                    <TableCell className="text-sm">{c.customer_name}</TableCell>
-                    <TableCell className="text-xs">{c.division}</TableCell>
-                    <TableCell className="text-xs">{c.contact_person}</TableCell>
+          <div className="space-y-3 py-2">
+            {/* 검색바 */}
+            <div className="flex gap-2">
+              <Input
+                placeholder="거래처명으로 검색해주세요"
+                value={custSearchKeyword}
+                onChange={(e) => setCustSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchCustomers()}
+                className="h-9 flex-1"
+              />
+              <Button size="sm" onClick={searchCustomers} disabled={custSearchLoading} className="h-9">
+                {custSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
+              </Button>
+            </div>
+            {/* 검색 결과 테이블 */}
+            <div className="overflow-auto max-h-[350px] border rounded-lg">
+              <Table noWrapper>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="sticky top-0 bg-card w-[40px] text-center">
+                      <Checkbox
+                        checked={custSearchResults.length > 0 && custCheckedIds.size === custSearchResults.length}
+                        onCheckedChange={(checked) => {
+                          if (checked === true) setCustCheckedIds(new Set(custSearchResults.map((c) => c.id)));
+                          else setCustCheckedIds(new Set());
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[110px]">거래처코드</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[130px]">거래처명</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">거래유형</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">담당자</TableHead>
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+                </TableHeader>
+                <TableBody>
+                  {custSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : custSearchResults.map((c) => (
+                    <TableRow
+                      key={c.id}
+                      className={cn("cursor-pointer", custCheckedIds.has(c.id) && "bg-primary/[0.08]")}
+                      onClick={() => setCustCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <Checkbox
+                          checked={custCheckedIds.has(c.id)}
+                          onCheckedChange={(checked) => {
+                            setCustCheckedIds((prev) => {
+                              const next = new Set(prev);
+                              if (checked === true) next.add(c.id); else next.delete(c.id);
+                              return next;
+                            });
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell className="text-[13px] font-mono text-muted-foreground">{c.customer_code}</TableCell>
+                      <TableCell className="text-sm font-medium text-foreground">{c.customer_name}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.division}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.contact_person}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
           </div>
           <DialogFooter>
             <div className="flex items-center gap-2 w-full justify-between">
@@ -834,7 +1000,8 @@ export default function SalesItemPage() {
               <div className="flex gap-2">
                 <Button variant="outline" onClick={() => setCustSelectOpen(false)}>취소</Button>
                 <Button onClick={goToCustDetail} disabled={custCheckedIds.size === 0}>
-                  <Plus className="w-4 h-4 mr-1" /> {custCheckedIds.size}개 다음
+                  <Plus className="w-4 h-4" />
+                  {custCheckedIds.size}개 다음
                 </Button>
               </div>
             </div>
@@ -842,155 +1009,243 @@ export default function SalesItemPage() {
         </DialogContent>
       </Dialog>
 
-      {/* 거래처 상세 입력/수정 모달 */}
-      <FullscreenDialog
-        open={custDetailOpen}
-        onOpenChange={setCustDetailOpen}
-        title={`📋 거래처 상세정보 ${editCustData ? "수정" : "입력"} — ${selectedItem?.item_name || ""}`}
-        description={editCustData ? "거래처 품번/품명과 기간별 단가를 수정합니다." : "선택한 거래처의 품번/품명과 기간별 단가를 설정합니다."}
-        defaultMaxWidth="max-w-[1100px]"
-        footer={
-          <>
-            <Button variant="outline" onClick={() => {
-              setCustDetailOpen(false);
-              if (!editCustData) setCustSelectOpen(true);
-              setEditCustData(null);
-            }}>{editCustData ? "취소" : "← 이전"}</Button>
-            <Button onClick={handleCustDetailSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
-            </Button>
-          </>
-        }
-      >
-        <div className="space-y-6 py-2">
-          {selectedCustsForDetail.map((cust, idx) => {
-            const custKey = cust.customer_code || cust.id;
-            const mappingRows = custMappings[custKey] || [];
-            const prices = custPrices[custKey] || [];
+      {/* ── 거래처 상세 입력/수정 모달 ── */}
+      <Dialog open={custDetailOpen} onOpenChange={setCustDetailOpen}>
+        <DialogContent className="max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              거래처 상세정보 {editCustData ? "수정" : "입력"} — {selectedItem?.item_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editCustData ? "거래처 품번/품명과 기간별 단가를 수정해주세요." : "선택한 거래처의 품번/품명과 기간별 단가를 설정해주세요."}
+            </DialogDescription>
+          </DialogHeader>
 
-            return (
-              <div key={custKey} className="border rounded-xl overflow-hidden bg-card">
-                <div className="px-5 py-3 bg-muted/30 border-b">
-                  <div className="font-bold">{idx + 1}. {cust.customer_name || custKey}</div>
-                  <div className="text-xs text-muted-foreground">{custKey}</div>
-                </div>
+          <div className="space-y-6 py-2">
+            {selectedCustsForDetail.map((cust, idx) => {
+              const custKey = cust.customer_code || cust.id;
+              const mappingRows = custMappings[custKey] || [];
+              const prices = custPrices[custKey] || [];
 
-                <div className="flex gap-4 p-4">
-                  {/* 좌: 거래처 품번/품명 */}
-                  <div className="flex-1 border rounded-lg p-4 bg-blue-50/30 dark:bg-blue-950/10">
-                    <div className="flex items-center justify-between mb-3">
-                      <span className="text-sm font-semibold">거래처 품번/품명 관리</span>
-                      <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
-                        <Plus className="h-3 w-3 mr-1" /> 품번 추가
-                      </Button>
-                    </div>
-                    <div className="space-y-2">
-                      {mappingRows.length === 0 ? (
-                        <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없습니다</div>
-                      ) : mappingRows.map((mRow, mIdx) => (
-                        <div key={mRow._id} className="flex gap-2 items-center">
-                          <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
-                          <Input value={mRow.customer_item_code}
-                            onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_code", e.target.value)}
-                            placeholder="거래처 품번" className="h-8 text-sm flex-1" />
-                          <Input value={mRow.customer_item_name}
-                            onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_name", e.target.value)}
-                            placeholder="거래처 품명" className="h-8 text-sm flex-1" />
-                          <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
-                            onClick={() => removeMappingRow(custKey, mRow._id)}>
-                            <X className="h-3 w-3" />
-                          </Button>
-                        </div>
-                      ))}
-                    </div>
+              return (
+                <div key={custKey} className="border rounded-lg overflow-hidden">
+                  {/* 거래처 헤더 */}
+                  <div className="flex items-center gap-2.5 px-4 py-3 bg-muted border-b">
+                    <span className="text-[13px] font-bold text-foreground">{idx + 1}. {cust.customer_name || custKey}</span>
+                    <span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">
+                      {custKey}
+                    </span>
                   </div>
 
-                  {/* 우: 기간별 단가 */}
-                  <div className="flex-1 border rounded-lg p-4 bg-amber-50/30 dark:bg-amber-950/10">
-                    <div className="flex items-center justify-between mb-3">
-                      <span className="text-sm font-semibold">기간별 단가 설정</span>
-                      <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
-                        <Plus className="h-3 w-3 mr-1" /> 단가 추가
-                      </Button>
+                  <div className="flex gap-4 p-4 bg-card">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/50">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">거래처 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.customer_item_code}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_code", e.target.value)}
+                              placeholder="거래처 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.customer_item_name}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_name", e.target.value)}
+                              placeholder="거래처 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button
+                              variant="ghost" size="sm"
+                              className="h-7 w-7 p-0 text-destructive shrink-0"
+                              onClick={() => removeMappingRow(custKey, mRow._id)}
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
                     </div>
-                    <div className="space-y-3">
-                      {prices.map((price, pIdx) => (
-                        <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
-                          <div className="flex items-center justify-between">
-                            <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
-                            {prices.length > 1 && (
-                              <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
-                                onClick={() => removePriceRow(custKey, price._id)}>
-                                <X className="h-3 w-3" />
-                              </Button>
-                            )}
-                          </div>
-                          <div className="flex gap-2 items-center">
-                            <div className="flex-1">
-                              <FormDatePicker value={price.start_date}
-                                onChange={(v) => updatePriceRow(custKey, price._id, "start_date", v)} placeholder="시작일" />
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/30">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button
+                                  variant="ghost" size="sm"
+                                  className="h-6 w-6 p-0 text-destructive"
+                                  onClick={() => removePriceRow(custKey, price._id)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
                             </div>
-                            <span className="text-xs text-muted-foreground">~</span>
-                            <div className="flex-1">
-                              <FormDatePicker value={price.end_date}
-                                onChange={(v) => updatePriceRow(custKey, price._id, "end_date", v)} placeholder="종료일" />
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="통화" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
                             </div>
-                            <div className="w-[80px]">
-                              <Select value={price.currency_code} onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}>
-                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="통화" /></SelectTrigger>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
                                 <SelectContent>
-                                  {(priceCategoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
                                 </SelectContent>
                               </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "base_price", raw);
+                                }}
+                                className="h-8 text-xs text-right col-span-3"
+                                placeholder="기준가"
+                              />
                             </div>
-                          </div>
-                          <div className="flex gap-2 items-center">
-                            <div className="w-[90px]">
-                              <Select value={price.base_price_type} onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}>
-                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준" /></SelectTrigger>
-                                <SelectContent>
-                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
-                                </SelectContent>
-                              </Select>
-                            </div>
-                            <Input value={price.base_price}
-                              onChange={(e) => updatePriceRow(custKey, price._id, "base_price", e.target.value)}
-                              className="h-8 text-xs text-right flex-1" placeholder="기준가" />
-                            <div className="w-[90px]">
-                              <Select value={price.discount_type} onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}
+                              >
                                 <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
                                 <SelectContent>
                                   <SelectItem value="none">할인없음</SelectItem>
-                                  {(priceCategoryOptions["discount_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
                                 </SelectContent>
                               </Select>
-                            </div>
-                            <Input value={price.discount_value}
-                              onChange={(e) => updatePriceRow(custKey, price._id, "discount_value", e.target.value)}
-                              className="h-8 text-xs text-right w-[60px]" placeholder="0" />
-                            <div className="w-[90px]">
-                              <Select value={price.rounding_unit_value} onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-8 text-xs text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}
+                              >
                                 <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
                                 <SelectContent>
-                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
                                 </SelectContent>
                               </Select>
                             </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm text-foreground">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                            </div>
                           </div>
-                          <div className="flex items-center justify-end gap-2 pt-1 border-t">
-                            <span className="text-xs text-muted-foreground">계산 단가:</span>
-                            <span className="font-bold text-sm">{price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}</span>
-                          </div>
-                        </div>
-                      ))}
+                        ))}
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            );
-          })}
-        </div>
-      </FullscreenDialog>
+              );
+            })}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setCustDetailOpen(false);
+                if (!editCustData) setCustSelectOpen(true);
+                setEditCustData(null);
+              }}
+            >
+              {editCustData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleCustDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
 
       {/* 엑셀 업로드 */}
       <ExcelUploadModal
@@ -1002,14 +1257,6 @@ export default function SalesItemPage() {
       />
 
       {ConfirmDialogComponent}
-
-      <TableSettingsModal
-        open={tableSettingsOpen}
-        onOpenChange={setTableSettingsOpen}
-        tableName={ITEM_TABLE}
-        settingsId="sales-item"
-        onSave={applyTableSettings}
-      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_7/sales/shipping-order/page.tsx b/frontend/app/(main)/COMPANY_7/sales/shipping-order/page.tsx
index 25e52ead..2ed29b40 100644
--- a/frontend/app/(main)/COMPANY_7/sales/shipping-order/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/sales/shipping-order/page.tsx
@@ -1,20 +1,17 @@
 "use client";
 
-import React, { useState, useMemo, useEffect, useCallback, useRef } from "react";
+import React, { useState, useMemo, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Plus, Trash2, RotateCcw, Save, X, ChevronDown, ChevronRight, ChevronLeft, ChevronsLeft, ChevronsRight, Truck, Search, Loader2, FileSpreadsheet } from "lucide-react";
+import { Plus, Trash2, Save, X, ChevronDown, ChevronRight, ChevronLeft, ChevronsLeft, ChevronsRight, Search, Loader2, FileSpreadsheet, Inbox, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
 import {
   getShippingOrderList,
   saveShippingOrder,
@@ -25,7 +22,25 @@ import {
   getItemSource,
 } from "@/lib/api/shipping";
 import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
-import { FullscreenDialog } from "@/components/common/FullscreenDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "instruction_no", label: "출하지시번호" },
+  { key: "ship_date", label: "출하일자" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "transport_company", label: "운송업체" },
+  { key: "vehicle_no", label: "차량번호" },
+  { key: "driver_name", label: "기사명" },
+  { key: "status", label: "상태" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "qty", label: "수량" },
+  { key: "source_type", label: "소스" },
+  { key: "remark", label: "비고" },
+];
 
 type DataSourceType = "shipmentPlan" | "salesOrder" | "itemInfo";
 
@@ -40,19 +55,19 @@ const getStatusLabel = (s: string) => STATUS_OPTIONS.find(o => o.value === s)?.l
 
 const getStatusColor = (s: string) => {
   switch (s) {
-    case "READY": return "bg-amber-100 text-amber-800 border-amber-200";
-    case "IN_PROGRESS": return "bg-blue-100 text-blue-800 border-blue-200";
-    case "COMPLETED": return "bg-emerald-100 text-emerald-800 border-emerald-200";
-    default: return "bg-gray-100 text-gray-800 border-gray-200";
+    case "READY": return "bg-warning/10 text-warning";
+    case "IN_PROGRESS": return "bg-primary/10 text-primary";
+    case "COMPLETED": return "bg-success/10 text-success";
+    default: return "bg-muted text-muted-foreground";
   }
 };
 
 const getSourceBadge = (s: string) => {
   switch (s) {
-    case "shipmentPlan": return { label: "출하계획", cls: "bg-blue-100 text-blue-700" };
-    case "salesOrder": return { label: "수주", cls: "bg-emerald-100 text-emerald-700" };
-    case "itemInfo": return { label: "품목", cls: "bg-purple-100 text-purple-700" };
-    default: return { label: s, cls: "bg-gray-100 text-gray-700" };
+    case "shipmentPlan": return { label: "출하계획", cls: "bg-primary/10 text-primary" };
+    case "salesOrder": return { label: "수주", cls: "bg-success/10 text-success" };
+    case "itemInfo": return { label: "품목", cls: "bg-secondary text-secondary-foreground" };
+    default: return { label: s, cls: "bg-muted text-muted-foreground" };
   }
 };
 
@@ -73,19 +88,14 @@ interface SelectedItem {
 }
 
 export default function ShippingOrderPage() {
+  const ts = useTableSettings("c16-shipping-order", "shipment_instruction", GRID_COLUMNS);
   const [orders, setOrders] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [checkedIds, setCheckedIds] = useState<number[]>([]);
   const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
 
-  // 검색
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [searchCustomer, setSearchCustomer] = useState("");
-  const [debouncedKeyword, setDebouncedKeyword] = useState("");
-  const [debouncedCustomer, setDebouncedCustomer] = useState("");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 엑셀 업로드
   const [excelUploadOpen, setExcelUploadOpen] = useState(false);
@@ -121,36 +131,25 @@ export default function ShippingOrderPage() {
   const [sourcePageSize, setSourcePageSize] = useState(20);
   const [sourceTotalCount, setSourceTotalCount] = useState(0);
 
-  // 텍스트 입력 debounce (500ms)
-  useEffect(() => {
-    const t = setTimeout(() => setDebouncedKeyword(searchKeyword), 500);
-    return () => clearTimeout(t);
-  }, [searchKeyword]);
-
-  useEffect(() => {
-    const t = setTimeout(() => setDebouncedCustomer(searchCustomer), 500);
-    return () => clearTimeout(t);
-  }, [searchCustomer]);
-
-  // 초기 날짜
-  useEffect(() => {
-    const today = new Date();
-    const from = new Date(today);
-    from.setMonth(from.getMonth() - 1);
-    setSearchDateFrom(from.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-  }, []);
 
   // 데이터 조회
   const fetchOrders = useCallback(async () => {
     setLoading(true);
     try {
       const params: any = {};
-      if (searchDateFrom) params.dateFrom = searchDateFrom;
-      if (searchDateTo) params.dateTo = searchDateTo;
-      if (searchStatus !== "all") params.status = searchStatus;
-      if (debouncedCustomer.trim()) params.customer = debouncedCustomer.trim();
-      if (debouncedKeyword.trim()) params.keyword = debouncedKeyword.trim();
+      for (const f of searchFilters) {
+        if (f.columnName === "ship_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split(",");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status") {
+          params.status = f.value;
+        } else if (f.columnName === "customer_name") {
+          params.customer = f.value;
+        } else {
+          params.keyword = f.value;
+        }
+      }
 
       const result = await getShippingOrderList(params);
       if (result.success) setOrders(result.data || []);
@@ -159,10 +158,10 @@ export default function ShippingOrderPage() {
     } finally {
       setLoading(false);
     }
-  }, [searchDateFrom, searchDateTo, searchStatus, debouncedCustomer, debouncedKeyword]);
+  }, [searchFilters]);
 
   useEffect(() => {
-    if (searchDateFrom && searchDateTo) fetchOrders();
+    fetchOrders();
   }, [fetchOrders]);
 
   // 소스 데이터 조회
@@ -203,24 +202,6 @@ export default function ShippingOrderPage() {
     }
   }, [isModalOpen, dataSource]);
 
-  // 핸들러
-  const handleResetSearch = () => {
-    setSearchKeyword("");
-    setSearchCustomer("");
-    setDebouncedKeyword("");
-    setDebouncedCustomer("");
-    setSearchStatus("all");
-    const today = new Date();
-    const from = new Date(today);
-    from.setMonth(from.getMonth() - 1);
-    setSearchDateFrom(from.toISOString().split("T")[0]);
-    setSearchDateTo(today.toISOString().split("T")[0]);
-  };
-
-  const handleCheckAll = (checked: boolean) => {
-    setCheckedIds(checked ? orders.map((o: any) => o.id) : []);
-  };
-
   const handleDeleteSelected = async () => {
     if (checkedIds.length === 0) return;
     if (!confirm(`선택한 ${checkedIds.length}개의 출하지시를 삭제하시겠습니까?`)) return;
@@ -229,7 +210,7 @@ export default function ShippingOrderPage() {
       if (result.success) {
         setCheckedIds([]);
         fetchOrders();
-        alert("삭제되었습니다.");
+        alert("삭제되었어요.");
       }
     } catch (err: any) {
       alert(err.message || "삭제 실패");
@@ -257,7 +238,6 @@ export default function ShippingOrderPage() {
       const items = order.items || [];
       setSelectedItems(items.filter((it: any) => it.id).map((it: any) => {
         const srcType = it.source_type || "shipmentPlan";
-        // 소스 데이터와 매칭할 수 있도록 원래 소스 id를 사용
         let sourceId: string | number = it.id;
         if (srcType === "shipmentPlan" && it.shipment_plan_id) sourceId = it.shipment_plan_id;
         else if (srcType === "salesOrder" && it.detail_id) sourceId = it.detail_id;
@@ -314,12 +294,10 @@ export default function ShippingOrderPage() {
       : item.item_code;
 
     const exists = selectedItems.findIndex(s => {
-      // 같은 소스 타입에서 id 매칭
       if (s.sourceType === dataSource) {
         if (dataSource === "itemInfo") return s.itemCode === key;
         return String(s.id) === String(key);
       }
-      // 다른 소스 타입이라도 원래 소스 id로 매칭
       if (dataSource === "shipmentPlan" && s.shipmentPlanId) return String(s.shipmentPlanId) === String(item.id);
       if (dataSource === "salesOrder" && s.detailId) return String(s.detailId) === String(item.id);
       return false;
@@ -385,7 +363,7 @@ export default function ShippingOrderPage() {
           spec: item.spec,
           material: item.material,
           orderQty: item.orderQty,
-          planQty: item.planQty,
+          planQty: item.orderQty,
           shipQty: 0,
           sourceType: item.sourceType,
           shipmentPlanId: item.shipmentPlanId,
@@ -398,7 +376,7 @@ export default function ShippingOrderPage() {
       if (result.success) {
         setIsModalOpen(false);
         fetchOrders();
-        alert(isEditMode ? "출하지시가 수정되었습니다." : "출하지시가 등록되었습니다.");
+        alert(isEditMode ? "출하지시가 수정되었어요." : "출하지시가 등록되었어요.");
       } else {
         alert(result.message || "저장 실패");
       }
@@ -411,6 +389,70 @@ export default function ShippingOrderPage() {
 
   const formatDate = (d: string) => d ? d.split("T")[0] : "-";
 
+  // 출하지시 데이터를 플랫한 행 목록으로 변환 (EDataTable용)
+  const flattenedOrders = useMemo(() => {
+    const rows: any[] = [];
+    for (const order of orders) {
+      const items = Array.isArray(order.items) ? order.items.filter((it: any) => it.id) : [];
+      if (items.length === 0) {
+        rows.push({
+          _rowId: String(order.id),
+          _orderId: order.id,
+          _order: order,
+          instruction_no: order.instruction_no,
+          ship_date: formatDate(order.instruction_date),
+          customer_name: order.customer_name || "-",
+          transport_company: order.carrier_name || "-",
+          vehicle_no: order.vehicle_no || "-",
+          driver_name: order.driver_name || "-",
+          status: order.status,
+          item_code: "-",
+          item_name: "-",
+          qty: 0,
+          source_type: "-",
+          remark: order.memo || "-",
+        });
+      } else {
+        items.forEach((item: any, idx: number) => {
+          rows.push({
+            _rowId: `${order.id}-${item.id}`,
+            _orderId: order.id,
+            _order: order,
+            instruction_no: idx === 0 ? order.instruction_no : "",
+            ship_date: idx === 0 ? formatDate(order.instruction_date) : "",
+            customer_name: idx === 0 ? (order.customer_name || "-") : "",
+            transport_company: idx === 0 ? (order.carrier_name || "-") : "",
+            vehicle_no: idx === 0 ? (order.vehicle_no || "-") : "",
+            driver_name: idx === 0 ? (order.driver_name || "-") : "",
+            status: idx === 0 ? order.status : "",
+            item_code: item.item_code || "",
+            item_name: item.item_name || "",
+            qty: Number(item.order_qty || 0),
+            source_type: item.source_type || "",
+            remark: idx === 0 ? (order.memo || "-") : "",
+          });
+        });
+      }
+    }
+    return rows;
+  }, [orders]);
+
+  // checkedIds를 order.id 기준으로 관리하므로 _orderId로 매핑
+  const flatCheckedRowIds = useMemo(() => {
+    return flattenedOrders
+      .filter((r) => checkedIds.includes(r._orderId))
+      .map((r) => r._rowId);
+  }, [flattenedOrders, checkedIds]);
+
+  const handleFlatCheckedChange = useCallback((rowIds: string[]) => {
+    const orderIds = new Set<number>();
+    for (const rowId of rowIds) {
+      const row = flattenedOrders.find((r) => r._rowId === rowId);
+      if (row) orderIds.add(row._orderId);
+    }
+    setCheckedIds(Array.from(orderIds));
+  }, [flattenedOrders]);
+
   const dataSourceTitle: Record<DataSourceType, string> = {
     shipmentPlan: "출하계획 목록",
     salesOrder: "수주정보 목록",
@@ -418,272 +460,213 @@ export default function ShippingOrderPage() {
   };
 
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4">
-      {/* 검색 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">출하지시번호</Label>
-            <Input placeholder="검색" className="w-[160px] h-9" value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSearch()} />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">거래처</Label>
-            <Input placeholder="거래처 검색" className="w-[140px] h-9" value={searchCustomer}
-              onChange={(e) => setSearchCustomer(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSearch()} />
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[110px] h-9"><SelectValue placeholder="전체" /></SelectTrigger>
-              <SelectContent>
-                {STATUS_OPTIONS.map(o => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">출하일자</Label>
-            <div className="flex items-center gap-2">
-              <div className="w-[160px]">
-                <FormDatePicker value={searchDateFrom} onChange={setSearchDateFrom} placeholder="시작일" />
-              </div>
-              <span className="text-muted-foreground">~</span>
-              <div className="w-[160px]">
-                <FormDatePicker value={searchDateTo} onChange={setSearchDateTo} placeholder="종료일" />
-              </div>
-            </div>
-          </div>
-          <div className="flex-1" />
-          <div className="flex items-center gap-2">
-            {loading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+    <div className="flex flex-col h-full p-4 gap-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>영업관리</span>
+        <span className="text-muted-foreground/40">/</span>
+        <span className="font-semibold text-foreground">출하지시</span>
+      </nav>
 
-      {/* 메인 테이블 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm flex flex-col">
-        <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-          <div className="font-semibold flex items-center gap-2 text-sm">
-            <Truck className="w-5 h-5" /> 출하지시 관리
-            <Badge variant="secondary" className="font-normal">{orders.length}건</Badge>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
-              <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
-            </Button>
-            <Button size="sm" onClick={() => openModal()}>
-              <Plus className="w-4 h-4 mr-1.5" /> 출하지시 등록
-            </Button>
-            <Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDeleteSelected}>
-              <Trash2 className="w-4 h-4 mr-1.5" /> 선택삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
-            </Button>
-          </div>
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ts.tableName}
+        filterId="c16-shipping-order"
+        onFilterChange={setSearchFilters}
+        dataCount={orders.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between flex-wrap gap-3 shrink-0">
+        <div className="flex items-center gap-2">
+          <h2 className="text-[15px] font-bold text-foreground">출하지시 관리</h2>
+          <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+            {orders.length}건
+          </span>
+          {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
         </div>
-
-        <div className="flex-1 overflow-auto">
-          {loading ? (
-            <div className="flex items-center justify-center h-32">
-              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-            </div>
-          ) : (
-            <Table>
-              <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                <TableRow>
-                  <TableHead className="w-[40px] text-center">
-                    <Checkbox checked={orders.length > 0 && checkedIds.length === orders.length} onCheckedChange={handleCheckAll} />
-                  </TableHead>
-                  <TableHead className="w-[140px]">출하지시번호</TableHead>
-                  <TableHead className="w-[100px] text-center">출하일자</TableHead>
-                  <TableHead className="w-[120px]">거래처명</TableHead>
-                  <TableHead className="w-[100px]">운송업체</TableHead>
-                  <TableHead className="w-[90px]">차량번호</TableHead>
-                  <TableHead className="w-[80px]">기사명</TableHead>
-                  <TableHead className="w-[80px] text-center">상태</TableHead>
-                  <TableHead className="w-[100px]">품번</TableHead>
-                  <TableHead className="w-[130px]">품명</TableHead>
-                  <TableHead className="w-[70px] text-right">수량</TableHead>
-                  <TableHead className="w-[80px] text-center">소스</TableHead>
-                  <TableHead>비고</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {orders.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={13} className="h-40 text-center text-muted-foreground">
-                      <div className="flex flex-col items-center gap-2">
-                        <Truck className="w-12 h-12 text-muted-foreground/30" />
-                        <div className="font-medium">등록된 출하지시가 없습니다</div>
-                        <div className="text-sm">출하지시 등록 버튼으로 등록하세요</div>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ) : (
-                  orders.map((order: any) => {
-                    const items = Array.isArray(order.items) ? order.items.filter((it: any) => it.id) : [];
-                    if (items.length === 0) {
-                      return (
-                        <TableRow key={order.id} className={cn("cursor-pointer hover:bg-muted/50", selectedOrderId === order.id && "bg-primary/5")} onClick={() => setSelectedOrderId(order.id)} onDoubleClick={() => openModal(order)}>
-                          <TableCell className="text-center" onClick={e => e.stopPropagation()}>
-                            <Checkbox checked={checkedIds.includes(order.id)} onCheckedChange={(c) => {
-                              if (c) setCheckedIds(p => [...p, order.id]);
-                              else setCheckedIds(p => p.filter(i => i !== order.id));
-                            }} />
-                          </TableCell>
-                          <TableCell className="font-medium">{order.instruction_no}</TableCell>
-                          <TableCell className="text-center">{formatDate(order.instruction_date)}</TableCell>
-                          <TableCell>{order.customer_name || "-"}</TableCell>
-                          <TableCell>{order.carrier_name || "-"}</TableCell>
-                          <TableCell>{order.vehicle_no || "-"}</TableCell>
-                          <TableCell>{order.driver_name || "-"}</TableCell>
-                          <TableCell className="text-center">
-                            <span className={cn("px-2 py-1 rounded-full text-[11px] font-medium border", getStatusColor(order.status))}>{getStatusLabel(order.status)}</span>
-                          </TableCell>
-                          <TableCell>-</TableCell>
-                          <TableCell>-</TableCell>
-                          <TableCell className="text-right">0</TableCell>
-                          <TableCell className="text-center">-</TableCell>
-                          <TableCell className="text-xs text-muted-foreground truncate max-w-[100px]">{order.memo || "-"}</TableCell>
-                        </TableRow>
-                      );
-                    }
-                    return items.map((item: any, itemIdx: number) => (
-                      <TableRow key={`${order.id}-${item.id}`} className={cn("cursor-pointer hover:bg-muted/50", selectedOrderId === order.id && "bg-primary/5")} onClick={() => setSelectedOrderId(order.id)} onDoubleClick={() => openModal(order)}>
-                        <TableCell className="text-center" onClick={e => e.stopPropagation()}>
-                          {itemIdx === 0 && <Checkbox checked={checkedIds.includes(order.id)} onCheckedChange={(c) => {
-                            if (c) setCheckedIds(p => [...p, order.id]);
-                            else setCheckedIds(p => p.filter(i => i !== order.id));
-                          }} />}
-                        </TableCell>
-                        <TableCell className="font-medium">{itemIdx === 0 ? order.instruction_no : ""}</TableCell>
-                        <TableCell className="text-center">{itemIdx === 0 ? formatDate(order.instruction_date) : ""}</TableCell>
-                        <TableCell>{itemIdx === 0 ? (order.customer_name || "-") : ""}</TableCell>
-                        <TableCell>{itemIdx === 0 ? (order.carrier_name || "-") : ""}</TableCell>
-                        <TableCell>{itemIdx === 0 ? (order.vehicle_no || "-") : ""}</TableCell>
-                        <TableCell>{itemIdx === 0 ? (order.driver_name || "-") : ""}</TableCell>
-                        <TableCell className="text-center">
-                          {itemIdx === 0 && <span className={cn("px-2 py-1 rounded-full text-[11px] font-medium border", getStatusColor(order.status))}>{getStatusLabel(order.status)}</span>}
-                        </TableCell>
-                        <TableCell className="text-xs text-muted-foreground">{item.item_code}</TableCell>
-                        <TableCell className="font-medium text-sm">{item.item_name}</TableCell>
-                        <TableCell className="text-right">{Number(item.order_qty || 0).toLocaleString()}</TableCell>
-                        <TableCell className="text-center">
-                          {(() => { const b = getSourceBadge(item.source_type || ""); return <span className={cn("px-2 py-0.5 rounded-full text-[10px]", b.cls)}>{b.label}</span>; })()}
-                        </TableCell>
-                        <TableCell className="text-xs text-muted-foreground truncate max-w-[100px]">{itemIdx === 0 ? (order.memo || "-") : ""}</TableCell>
-                      </TableRow>
-                    ));
-                  })
-                )}
-              </TableBody>
-            </Table>
-          )}
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5" />
+            엑셀 업로드
+          </Button>
+          <Button size="sm" onClick={() => openModal()}>
+            <Plus className="w-3.5 h-3.5" />
+            출하지시 등록
+          </Button>
+          <div className="w-px h-5 bg-border" />
+          <Button
+            variant="outline"
+            size="sm"
+            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+            disabled={checkedIds.length === 0}
+            onClick={handleDeleteSelected}
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+            선택삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
+          </Button>
+          <div className="w-px h-5 bg-border" />
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
         </div>
       </div>
 
+      {/* 메인 테이블 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card flex flex-col">
+        <EDataTable
+          columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+            key: col.key,
+            label: col.label,
+            align: col.key === "qty" ? "right" : col.key === "status" || col.key === "source_type" || col.key === "ship_date" ? "center" : undefined,
+            formatNumber: col.key === "qty",
+            sortable: false,
+            filterable: false,
+            render: col.key === "status"
+              ? (val: any) => val ? (
+                  <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(val))}>
+                    {getStatusLabel(val)}
+                  </span>
+                ) : null
+              : col.key === "source_type"
+              ? (val: any) => {
+                  if (!val || val === "-") return <span>-</span>;
+                  const b = getSourceBadge(val);
+                  return <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", b.cls)}>{b.label}</span>;
+                }
+              : undefined,
+          }))}
+          data={ts.groupData(flattenedOrders)}
+          rowKey={(row) => row._rowId}
+          loading={loading}
+          emptyMessage="등록된 출하지시가 없어요"
+          showCheckbox
+          checkedIds={flatCheckedRowIds}
+          onCheckedChange={handleFlatCheckedChange}
+          selectedId={selectedOrderId != null ? String(selectedOrderId) : null}
+          onRowClick={(row) => setSelectedOrderId(row._orderId)}
+          onRowDoubleClick={(row) => openModal(row._order)}
+          showPagination
+          draggableColumns={false}
+          columnOrderKey="c16-shipping-order"
+        />
+      </div>
+
       {/* 등록/수정 모달 */}
-      <FullscreenDialog
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title={isEditMode ? "출하지시 수정" : "출하지시 등록"}
-        description={isEditMode ? "출하지시 정보를 수정합니다." : "왼쪽에서 데이터를 선택하고 오른쪽에서 출하지시 정보를 입력하세요."}
-        defaultMaxWidth="max-w-[90vw]"
-        defaultWidth="w-[1400px]"
-        className="h-[90vh]"
-        contentClassName="overflow-hidden flex flex-col"
-        footer={
-          <>
-            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
-            <Button onClick={handleSave} disabled={saving}>
-              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
-            </Button>
-          </>
-        }
-      >
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[90vw] w-[1400px] h-[90vh] flex flex-col overflow-hidden p-0 gap-0">
+          <DialogHeader className="px-4 py-3 border-b shrink-0">
+            <DialogTitle className="text-[15px] font-bold">
+              {isEditMode ? "출하지시 수정" : "출하지시 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-xs text-muted-foreground mt-0.5">
+              {isEditMode ? "출하지시 정보를 수정해요." : "왼쪽에서 데이터를 선택하고 오른쪽에서 출하지시 정보를 입력해요."}
+            </DialogDescription>
+          </DialogHeader>
 
           <div className="flex-1 overflow-hidden">
             <ResizablePanelGroup direction="horizontal">
               {/* 왼쪽: 데이터 소스 */}
               <ResizablePanel defaultSize={55} minSize={30}>
                 <div className="flex flex-col h-full">
-                  <div className="p-3 border-b bg-muted/30 flex flex-wrap items-center gap-2 shrink-0">
+                  {/* 소스 검색 헤더 */}
+                  <div className="px-4 py-2 border-b bg-muted/50 flex flex-wrap items-center gap-2 shrink-0">
                     <Select value={dataSource} onValueChange={(v) => setDataSource(v as DataSourceType)}>
-                      <SelectTrigger className="w-[130px] h-8 text-xs"><SelectValue /></SelectTrigger>
+                      <SelectTrigger className="w-[120px] h-9 text-xs"><SelectValue /></SelectTrigger>
                       <SelectContent>
                         <SelectItem value="shipmentPlan">출하계획</SelectItem>
                         <SelectItem value="salesOrder">수주정보</SelectItem>
                         <SelectItem value="itemInfo">품목정보</SelectItem>
                       </SelectContent>
                     </Select>
-                    <Input placeholder="품번, 품명 검색" className="flex-1 h-8 text-xs min-w-[120px]"
-                      value={sourceKeyword} onChange={(e) => setSourceKeyword(e.target.value)}
-                      onKeyDown={(e) => { if (e.key === "Enter") { setSourcePage(1); fetchSourceData(1); }}} />
-                    <Button size="sm" className="h-8 text-xs" onClick={() => { setSourcePage(1); fetchSourceData(1); }} disabled={sourceLoading}>
+                    <Input
+                      placeholder="품번, 품명 검색"
+                      className="flex-1 h-9 text-xs min-w-[120px]"
+                      value={sourceKeyword}
+                      onChange={(e) => setSourceKeyword(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") { setSourcePage(1); fetchSourceData(1); }
+                      }}
+                    />
+                    <Button
+                      size="sm"
+                      className="h-8 text-xs"
+                      onClick={() => { setSourcePage(1); fetchSourceData(1); }}
+                      disabled={sourceLoading}
+                    >
                       {sourceLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Search className="w-3 h-3" />}
                       <span className="ml-1">조회</span>
                     </Button>
                   </div>
 
-                  <div className="px-4 py-2 flex items-center justify-between border-b shrink-0">
-                    <div className="text-sm font-medium">
-                      {dataSourceTitle[dataSource]}
-                      <span className="text-muted-foreground ml-2 font-normal">
-                        선택: <span className="text-primary font-semibold">{selectedItems.length}</span>개
-                      </span>
-                    </div>
+                  {/* 소스 서브 헤더 */}
+                  <div className="px-3 py-1.5 flex items-center gap-2 border-b bg-muted/30 shrink-0">
+                    <span className="text-[13px] font-bold text-foreground">{dataSourceTitle[dataSource]}</span>
+                    <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                      선택 {selectedItems.length}개
+                    </span>
                   </div>
 
+                  {/* 소스 테이블 */}
                   <div className="flex-1 overflow-auto">
                     {sourceLoading ? (
-                      <div className="flex items-center justify-center py-12"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
+                      <div className="flex items-center justify-center py-12">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
                     ) : sourceData.length === 0 ? (
-                      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-                        <div className="text-sm">조회 버튼을 눌러 데이터를 불러오세요</div>
+                      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                        <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
+                          <Search className="w-5 h-5 text-muted-foreground/30" />
+                        </div>
+                        <p className="text-sm">조회 버튼을 눌러 데이터를 불러와주세요</p>
                       </div>
                     ) : (
                       <Table>
-                        <TableHeader className="sticky top-0 bg-background z-10">
-                          <TableRow>
-                            <TableHead className="w-[40px] text-center">선택</TableHead>
-                            <TableHead className="w-[100px]">품번</TableHead>
-                            <TableHead>품명</TableHead>
-                            <TableHead className="w-[100px]">규격</TableHead>
-                            <TableHead className="w-[100px]">거래처</TableHead>
-                            <TableHead className="w-[70px] text-right">수량</TableHead>
-                            {dataSource === "shipmentPlan" && <TableHead className="w-[70px] text-center">상태</TableHead>}
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">선택</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                            <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처</TableHead>
+                            <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                            {dataSource === "shipmentPlan" && <TableHead className="w-[70px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
                           </TableRow>
                         </TableHeader>
                         <TableBody>
                           {sourceData.map((item: any, idx: number) => {
                             const itemId = dataSource === "itemInfo" ? item.item_code : item.id;
                             const isSelected = selectedItems.some(s => {
-                              // 같은 소스 타입에서 id 매칭
                               if (s.sourceType === dataSource) {
                                 if (dataSource === "itemInfo") return s.itemCode === itemId;
                                 return String(s.id) === String(itemId);
                               }
-                              // 다른 소스 타입이라도 같은 품번이면 중복 방지
                               if (dataSource === "shipmentPlan" && s.shipmentPlanId) return String(s.shipmentPlanId) === String(item.id);
                               if (dataSource === "salesOrder" && s.detailId) return String(s.detailId) === String(item.id);
                               return false;
                             });
                             return (
-                              <TableRow key={`${dataSource}-${itemId}-${idx}`} className={cn("cursor-pointer hover:bg-muted/50", isSelected && "bg-primary/5")} onClick={() => toggleSourceItem(item)}>
+                              <TableRow
+                                key={`${dataSource}-${itemId}-${idx}`}
+                                className={cn("cursor-pointer transition-colors", isSelected && "bg-primary/5")}
+                                onClick={() => toggleSourceItem(item)}
+                              >
                                 <TableCell className="text-center" onClick={e => e.stopPropagation()}>
                                   <Checkbox checked={isSelected} onCheckedChange={() => toggleSourceItem(item)} />
                                 </TableCell>
-                                <TableCell className="text-xs">{item.item_code || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{item.item_code || "-"}</TableCell>
                                 <TableCell className="text-sm font-medium">{item.item_name || "-"}</TableCell>
-                                <TableCell className="text-xs text-muted-foreground">{item.spec || "-"}</TableCell>
-                                <TableCell className="text-xs">{item.customer_name || "-"}</TableCell>
-                                <TableCell className="text-right text-xs">{Number(item.plan_qty || item.qty || item.balance_qty || 0).toLocaleString()}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{item.spec || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{item.customer_name || "-"}</TableCell>
+                                <TableCell className="text-right text-[13px]">
+                                  {Number(item.plan_qty || item.qty || item.balance_qty || 0).toLocaleString()}
+                                </TableCell>
                                 {dataSource === "shipmentPlan" && (
                                   <TableCell className="text-center">
-                                    <Badge variant="secondary" className="text-[10px]">{getStatusLabel(item.status)}</Badge>
+                                    <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", getStatusColor(item.status))}>
+                                      {getStatusLabel(item.status)}
+                                    </span>
                                   </TableCell>
                                 )}
                               </TableRow>
@@ -696,7 +679,7 @@ export default function ShippingOrderPage() {
 
                   {/* 페이징 */}
                   {sourceTotalCount > 0 && (
-                    <div className="px-4 py-2 border-t bg-muted/10 flex items-center justify-between shrink-0">
+                    <div className="px-3 py-1.5 border-t bg-muted/30 flex items-center justify-between shrink-0">
                       <div className="flex items-center gap-2">
                         <span className="text-muted-foreground text-[11px]">표시:</span>
                         <Input
@@ -710,9 +693,7 @@ export default function ShippingOrderPage() {
                           }}
                           className="h-7 w-[60px] text-center text-[11px]"
                         />
-                        <span className="text-muted-foreground text-[11px]">
-                          총 {sourceTotalCount}건
-                        </span>
+                        <span className="text-muted-foreground text-[11px]">총 {sourceTotalCount}건</span>
                       </div>
                       <div className="flex items-center gap-1">
                         <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
@@ -723,12 +704,16 @@ export default function ShippingOrderPage() {
                           onClick={() => { const p = sourcePage - 1; setSourcePage(p); fetchSourceData(p); }}>
                           <ChevronLeft className="w-3.5 h-3.5" />
                         </Button>
-                        <span className="text-xs font-medium px-2">{sourcePage} / {Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize))}</span>
-                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                        <span className="text-xs font-medium px-2">
+                          {sourcePage} / {Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize))}
+                        </span>
+                        <Button variant="outline" size="icon" className="h-7 w-7"
+                          disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
                           onClick={() => { const p = sourcePage + 1; setSourcePage(p); fetchSourceData(p); }}>
                           <ChevronRight className="w-3.5 h-3.5" />
                         </Button>
-                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                        <Button variant="outline" size="icon" className="h-7 w-7"
+                          disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
                           onClick={() => { const p = Math.ceil(sourceTotalCount / sourcePageSize); setSourcePage(p); fetchSourceData(p); }}>
                           <ChevronsRight className="w-3.5 h-3.5" />
                         </Button>
@@ -742,25 +727,32 @@ export default function ShippingOrderPage() {
 
               {/* 오른쪽: 폼 */}
               <ResizablePanel defaultSize={45} minSize={30}>
-                <div className="flex flex-col h-full overflow-auto p-5 bg-muted/20 gap-5">
+                <div className="flex flex-col h-full overflow-auto p-4 gap-4">
                   {/* 기본 정보 */}
-                  <div className="bg-background border rounded-lg p-5 shrink-0">
-                    <h3 className="text-sm font-semibold mb-4">기본 정보</h3>
-                    <div className="grid grid-cols-2 gap-4">
-                      <div className="space-y-1.5">
-                        <Label className="text-xs">출하지시번호</Label>
+                  <div className="border rounded-lg p-4 shrink-0">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-3">기본 정보</p>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">출하지시번호</Label>
                         <Input value={formOrderNumber} readOnly className="h-9 bg-muted/50 text-muted-foreground" />
                       </div>
-                      <div className="space-y-1.5">
-                        <Label className="text-xs">출하지시일 <span className="text-destructive">*</span></Label>
-                        <FormDatePicker value={formOrderDate} onChange={setFormOrderDate} placeholder="날짜 선택" />
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">
+                          출하지시일 <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                          type="date"
+                          className="h-9"
+                          value={formOrderDate}
+                          onChange={(e) => setFormOrderDate(e.target.value)}
+                        />
                       </div>
-                      <div className="space-y-1.5">
-                        <Label className="text-xs">거래처</Label>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">거래처</Label>
                         <Input value={formCustomer} readOnly placeholder="품목 선택 시 자동" className="h-9 bg-muted/50" />
                       </div>
-                      <div className="space-y-1.5">
-                        <Label className="text-xs">상태</Label>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
                         <Select value={formStatus} onValueChange={setFormStatus}>
                           <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
                           <SelectContent>
@@ -774,45 +766,80 @@ export default function ShippingOrderPage() {
                   </div>
 
                   {/* 운송 정보 */}
-                  <div className="bg-amber-50 border border-amber-200 rounded-lg overflow-hidden shrink-0">
-                    <button className="w-full px-5 py-3 flex items-center justify-between text-left" onClick={() => setIsTransportCollapsed(!isTransportCollapsed)}>
-                      <h3 className="text-sm font-semibold text-amber-900 flex items-center gap-2">
-                        <Truck className="w-4 h-4" /> 운송 정보 <span className="text-[11px] font-normal text-muted-foreground">(선택사항)</span>
-                      </h3>
-                      {isTransportCollapsed ? <ChevronRight className="w-4 h-4 text-amber-700" /> : <ChevronDown className="w-4 h-4 text-amber-700" />}
+                  <div className="bg-muted/50 border rounded-lg overflow-hidden shrink-0">
+                    <button
+                      className="w-full px-4 py-2.5 flex items-center justify-between text-left"
+                      onClick={() => setIsTransportCollapsed(!isTransportCollapsed)}
+                    >
+                      <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2">
+                        운송 정보 <span className="text-[10px] font-normal">(선택사항)</span>
+                      </p>
+                      {isTransportCollapsed
+                        ? <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />
+                        : <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+                      }
                     </button>
                     {!isTransportCollapsed && (
-                      <div className="px-5 pb-4 grid grid-cols-3 gap-3">
-                        <div className="space-y-1.5"><Label className="text-xs">운송업체</Label><Input value={formCarrier} onChange={(e) => setFormCarrier(e.target.value)} className="h-9" /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">차량번호</Label><Input value={formVehicle} onChange={(e) => setFormVehicle(e.target.value)} className="h-9" /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">기사명</Label><Input value={formDriver} onChange={(e) => setFormDriver(e.target.value)} className="h-9" /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">연락처</Label><Input value={formDriverPhone} onChange={(e) => setFormDriverPhone(e.target.value)} className="h-9" /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">도착예정일시</Label><FormDatePicker value={formArrival} onChange={setFormArrival} placeholder="도착예정일시" includeTime /></div>
-                        <div className="space-y-1.5"><Label className="text-xs">배송지</Label><Input value={formAddress} onChange={(e) => setFormAddress(e.target.value)} className="h-9" /></div>
+                      <div className="px-4 pb-3 grid grid-cols-3 gap-3">
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">운송업체</Label>
+                          <Input value={formCarrier} onChange={(e) => setFormCarrier(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">차량번호</Label>
+                          <Input value={formVehicle} onChange={(e) => setFormVehicle(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">기사명</Label>
+                          <Input value={formDriver} onChange={(e) => setFormDriver(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">연락처</Label>
+                          <Input value={formDriverPhone} onChange={(e) => setFormDriverPhone(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">도착예정일시</Label>
+                          <Input
+                            type="datetime-local"
+                            className="h-9"
+                            value={formArrival}
+                            onChange={(e) => setFormArrival(e.target.value)}
+                          />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">배송지</Label>
+                          <Input value={formAddress} onChange={(e) => setFormAddress(e.target.value)} className="h-9" />
+                        </div>
                       </div>
                     )}
                   </div>
 
                   {/* 선택된 품목 */}
-                  <div className="bg-background border rounded-lg p-5 flex-1 flex flex-col min-h-[200px]">
-                    <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
-                      선택된 품목 <Badge variant="default" className="text-[10px]">{selectedItems.length}</Badge>
-                    </h3>
+                  <div className="border rounded-lg p-4 flex-1 flex flex-col min-h-[200px]">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-2 flex items-center gap-2">
+                      선택된 품목
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {selectedItems.length}
+                      </span>
+                    </p>
                     <div className="flex-1 overflow-auto min-h-0">
                       {selectedItems.length === 0 ? (
-                        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
-                          <div className="text-sm">왼쪽에서 데이터를 선택하세요</div>
+                        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground border-2 border-dashed rounded-lg gap-2">
+                          <div className="w-10 h-10 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
+                            <Inbox className="w-4 h-4 text-muted-foreground/30" />
+                          </div>
+                          <p className="text-sm">왼쪽에서 데이터를 선택해주세요</p>
                         </div>
                       ) : (
                         <Table>
-                          <TableHeader className="sticky top-0 bg-background z-10">
-                            <TableRow>
-                              <TableHead className="w-[40px] text-center">소스</TableHead>
-                              <TableHead className="w-[90px]">품번</TableHead>
-                              <TableHead>품명</TableHead>
-                              <TableHead className="w-[90px] text-center">출하수량</TableHead>
-                              <TableHead className="w-[70px] text-right">계획수량</TableHead>
-                              <TableHead className="w-[40px] text-center">삭제</TableHead>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">소스</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                              <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[90px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하수량</TableHead>
+                              <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획수량</TableHead>
+                              <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">삭제</TableHead>
                             </TableRow>
                           </TableHeader>
                           <TableBody>
@@ -821,15 +848,24 @@ export default function ShippingOrderPage() {
                               return (
                                 <TableRow key={`${item.sourceType}-${item.id}-${idx}`}>
                                   <TableCell className="text-center">
-                                    <span className={cn("px-1.5 py-0.5 rounded text-[10px]", b.cls)}>{b.label.charAt(0)}</span>
+                                    <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", b.cls)}>
+                                      {b.label.charAt(0)}
+                                    </span>
                                   </TableCell>
-                                  <TableCell className="text-xs">{item.itemCode}</TableCell>
+                                  <TableCell className="text-[13px]">{item.itemCode}</TableCell>
                                   <TableCell className="text-sm font-medium">{item.itemName}</TableCell>
                                   <TableCell className="text-center">
-                                    <Input type="number" value={item.orderQty} onChange={(e) => updateOrderQty(idx, parseInt(e.target.value) || 0)}
-                                      min={1} className="h-7 w-[70px] text-xs text-right mx-auto" />
+                                    <Input
+                                      type="number"
+                                      value={item.orderQty}
+                                      onChange={(e) => updateOrderQty(idx, parseInt(e.target.value) || 0)}
+                                      min={1}
+                                      className="h-7 w-[70px] text-xs text-right mx-auto"
+                                    />
+                                  </TableCell>
+                                  <TableCell className="text-right text-[13px]">
+                                    {item.planQty ? item.planQty.toLocaleString() : "-"}
                                   </TableCell>
-                                  <TableCell className="text-right text-xs">{item.planQty ? item.planQty.toLocaleString() : "-"}</TableCell>
                                   <TableCell className="text-center">
                                     <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => removeSelectedItem(idx)}>
                                       <X className="w-3.5 h-3.5 text-destructive" />
@@ -845,25 +881,47 @@ export default function ShippingOrderPage() {
                   </div>
 
                   {/* 메모 */}
-                  <div className="bg-background border rounded-lg p-5 shrink-0">
-                    <h3 className="text-sm font-semibold mb-3">메모</h3>
-                    <Textarea value={formMemo} onChange={(e) => setFormMemo(e.target.value)} placeholder="출하지시 관련 메모" rows={2} className="resize-y" />
+                  <div className="border rounded-lg p-4 shrink-0">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-2">메모</p>
+                    <Textarea
+                      value={formMemo}
+                      onChange={(e) => setFormMemo(e.target.value)}
+                      placeholder="출하지시 관련 메모를 입력해주세요"
+                      rows={2}
+                      className="resize-y"
+                    />
                   </div>
                 </div>
               </ResizablePanel>
             </ResizablePanelGroup>
           </div>
 
-      </FullscreenDialog>
+          {/* 모달 하단 버튼 */}
+          <div className="flex items-center justify-end gap-2 px-4 py-3 border-t shrink-0">
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
 
       {/* 엑셀 업로드 모달 */}
       <ExcelUploadModal
         open={excelUploadOpen}
         onOpenChange={setExcelUploadOpen}
-        tableName="shipment_instruction"
-        onSuccess={() => {
-          fetchOrders();
-        }}
+        tableName="shipping-order"
+        onSuccess={() => { fetchOrders(); }}
+      />
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
       />
     </div>
   );
diff --git a/frontend/app/(main)/COMPANY_7/sales/shipping-plan/page.tsx b/frontend/app/(main)/COMPANY_7/sales/shipping-plan/page.tsx
index e77e7066..747ac23d 100644
--- a/frontend/app/(main)/COMPANY_7/sales/shipping-plan/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/sales/shipping-plan/page.tsx
@@ -3,21 +3,34 @@
 import React, { useState, useMemo, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Search, Download, X, Save, Ban, RotateCcw, Loader2 } from "lucide-react";
+import { X, Save, Loader2, Inbox, Settings2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
   getShipmentPlanList,
   updateShipmentPlan,
   type ShipmentPlanListItem,
 } from "@/lib/api/shipping";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "order_no", label: "수주번호" },
+  { key: "due_date", label: "납기일" },
+  { key: "customer_name", label: "거래처" },
+  { key: "part_code", label: "품목코드" },
+  { key: "part_name", label: "품목명" },
+  { key: "order_qty", label: "수주수량" },
+  { key: "plan_qty", label: "계획수량" },
+  { key: "plan_date", label: "계획일" },
+  { key: "status", label: "상태" },
+];
 
 const STATUS_OPTIONS = [
   { value: "all", label: "전체" },
@@ -36,28 +49,25 @@ const getStatusLabel = (status: string) => {
 
 const getStatusColor = (status: string) => {
   switch (status) {
-    case "READY": return "bg-blue-100 text-blue-800 border-blue-200";
-    case "CONFIRMED": return "bg-indigo-100 text-indigo-800 border-indigo-200";
-    case "SHIPPING": return "bg-amber-100 text-amber-800 border-amber-200";
-    case "COMPLETED": return "bg-emerald-100 text-emerald-800 border-emerald-200";
-    case "CANCEL_REQUEST": return "bg-rose-100 text-rose-800 border-rose-200";
-    case "CANCELLED": return "bg-slate-100 text-slate-800 border-slate-200";
-    default: return "bg-gray-100 text-gray-800 border-gray-200";
+    case "READY": return "bg-primary/10 text-primary";
+    case "CONFIRMED": return "bg-secondary text-secondary-foreground";
+    case "SHIPPING": return "bg-warning/10 text-warning";
+    case "COMPLETED": return "bg-success/10 text-success";
+    case "CANCEL_REQUEST": return "bg-destructive/10 text-destructive";
+    case "CANCELLED": return "bg-muted text-muted-foreground";
+    default: return "bg-muted text-muted-foreground";
   }
 };
 
 export default function ShippingPlanPage() {
+  const ts = useTableSettings("c16-shipping-plan", "shipment_plan", GRID_COLUMNS);
   const [data, setData] = useState<ShipmentPlanListItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [selectedId, setSelectedId] = useState<number | null>(null);
   const [checkedIds, setCheckedIds] = useState<number[]>([]);
 
-  // 검색
-  const [searchDateFrom, setSearchDateFrom] = useState("");
-  const [searchDateTo, setSearchDateTo] = useState("");
-  const [searchStatus, setSearchStatus] = useState("all");
-  const [searchCustomer, setSearchCustomer] = useState("");
-  const [searchKeyword, setSearchKeyword] = useState("");
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
 
   // 상세 패널 편집
   const [editPlanQty, setEditPlanQty] = useState("");
@@ -66,28 +76,25 @@ export default function ShippingPlanPage() {
   const [isDetailChanged, setIsDetailChanged] = useState(false);
   const [saving, setSaving] = useState(false);
 
-  // 날짜 초기화
-  useEffect(() => {
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    const oneMonthLater = new Date(today);
-    oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
-
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(oneMonthLater.toISOString().split("T")[0]);
-  }, []);
 
   // 데이터 조회
   const fetchData = useCallback(async () => {
     setLoading(true);
     try {
       const params: any = {};
-      if (searchDateFrom) params.dateFrom = searchDateFrom;
-      if (searchDateTo) params.dateTo = searchDateTo;
-      if (searchStatus !== "all") params.status = searchStatus;
-      if (searchCustomer.trim()) params.customer = searchCustomer.trim();
-      if (searchKeyword.trim()) params.keyword = searchKeyword.trim();
+      for (const f of searchFilters) {
+        if (f.columnName === "plan_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split(",");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status") {
+          params.status = f.value;
+        } else if (f.columnName === "customer_name") {
+          params.customer = f.value;
+        } else {
+          params.keyword = f.value;
+        }
+      }
 
       const result = await getShipmentPlanList(params);
       if (result.success) {
@@ -98,37 +105,21 @@ export default function ShippingPlanPage() {
     } finally {
       setLoading(false);
     }
-  }, [searchDateFrom, searchDateTo, searchStatus, searchCustomer, searchKeyword]);
+  }, [searchFilters]);
 
-  // 초기 로드 + 검색 시 자동 조회
+  // searchFilters 변경 시 자동 조회
   useEffect(() => {
-    if (searchDateFrom && searchDateTo) {
-      fetchData();
-    }
-  }, [searchDateFrom, searchDateTo]);
-
-  const handleSearch = () => fetchData();
-
-  const handleResetSearch = () => {
-    setSearchStatus("all");
-    setSearchCustomer("");
-    setSearchKeyword("");
-    const today = new Date();
-    const threeMonthsAgo = new Date(today);
-    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
-    const oneMonthLater = new Date(today);
-    oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
-    setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
-    setSearchDateTo(oneMonthLater.toISOString().split("T")[0]);
-  };
+    fetchData();
+  }, [fetchData]);
 
   const selectedPlan = useMemo(() => data.find(p => p.id === selectedId), [data, selectedId]);
 
   const groupedData = useMemo(() => {
-    const orderMap = new Map<string, ShipmentPlanListItem[]>();
+    const grouped = ts.groupData(data);
+    const orderMap = new Map<string, any[]>();
     const orderKeys: string[] = [];
-    data.forEach(plan => {
-      const key = plan.order_no || `_no_order_${plan.id}`;
+    grouped.forEach(plan => {
+      const key = (plan as any)._isGroupSummary ? `_summary_${orderKeys.length}` : (plan.order_no || `_no_order_${plan.id}`);
       if (!orderMap.has(key)) {
         orderMap.set(key, []);
         orderKeys.push(key);
@@ -139,7 +130,7 @@ export default function ShippingPlanPage() {
       orderNo: key,
       plans: orderMap.get(key)!,
     }));
-  }, [data]);
+  }, [data, ts.groupData]);
 
   const handleRowClick = (plan: ShipmentPlanListItem) => {
     if (isDetailChanged && selectedId !== plan.id) {
@@ -160,20 +151,12 @@ export default function ShippingPlanPage() {
     }
   };
 
-  const handleCheck = (id: number, checked: boolean) => {
-    if (checked) {
-      setCheckedIds(prev => [...prev, id]);
-    } else {
-      setCheckedIds(prev => prev.filter(i => i !== id));
-    }
-  };
-
   const handleSaveDetail = async () => {
     if (!selectedId || !selectedPlan) return;
 
     const qty = Number(editPlanQty);
     if (qty <= 0) {
-      alert("계획수량은 0보다 커야 합니다.");
+      alert("계획수량은 0보다 커야 해요.");
       return;
     }
     if (!editPlanDate) {
@@ -190,7 +173,7 @@ export default function ShippingPlanPage() {
       });
       if (result.success) {
         setIsDetailChanged(false);
-        alert("저장되었습니다.");
+        alert("저장되었어요.");
         fetchData();
       } else {
         alert(result.message || "저장 실패");
@@ -213,345 +196,259 @@ export default function ShippingPlanPage() {
   };
 
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4">
-      {/* 검색 영역 */}
-      <Card className="shrink-0">
-        <CardContent className="p-4 flex flex-wrap items-end gap-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">출하계획일</Label>
-            <div className="flex items-center gap-2">
-              <Input
-                type="date"
-                className="w-[140px] h-9"
-                value={searchDateFrom}
-                onChange={(e) => setSearchDateFrom(e.target.value)}
-              />
-              <span className="text-muted-foreground">~</span>
-              <Input
-                type="date"
-                className="w-[140px] h-9"
-                value={searchDateTo}
-                onChange={(e) => setSearchDateTo(e.target.value)}
-              />
-            </div>
-          </div>
+    <div className="flex flex-col h-full p-4 gap-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>영업관리</span>
+        <span className="text-muted-foreground/40">/</span>
+        <span className="font-semibold text-foreground">출하계획</span>
+      </nav>
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">상태</Label>
-            <Select value={searchStatus} onValueChange={setSearchStatus}>
-              <SelectTrigger className="w-[120px] h-9">
-                <SelectValue placeholder="전체" />
-              </SelectTrigger>
-              <SelectContent>
-                {STATUS_OPTIONS.map(o => (
-                  <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName="shipment_plan"
+        filterId="c16-shipping-plan"
+        onFilterChange={setSearchFilters}
+        dataCount={data.length}
+        externalFilterConfig={ts.filterConfig}
+      />
 
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">거래처</Label>
-            <Input
-              placeholder="거래처 검색"
-              className="w-[150px] h-9"
-              value={searchCustomer}
-              onChange={(e) => setSearchCustomer(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-            />
-          </div>
-
-          <div className="space-y-1.5">
-            <Label className="text-xs text-muted-foreground">수주번호/품목</Label>
-            <Input
-              placeholder="수주번호 / 품목 검색"
-              className="w-[220px] h-9"
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-            />
-          </div>
-
-          <div className="flex-1" />
-
-          <div className="flex items-center gap-2">
-            <Button size="sm" className="h-9" onClick={handleSearch} disabled={loading}>
-              {loading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Search className="w-4 h-4 mr-2" />}
-              조회
-            </Button>
-            <Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
-              <RotateCcw className="w-4 h-4 mr-2" /> 초기화
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* 테이블 + 상세 패널 */}
-      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+      {/* 마스터-디테일 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
         <ResizablePanelGroup direction="horizontal">
-          <ResizablePanel defaultSize={selectedId ? 65 : 100} minSize={30}>
+          {/* 좌측: 출하계획 목록 */}
+          <ResizablePanel defaultSize={60} minSize={30}>
             <div className="flex flex-col h-full">
-              <div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
-                <div className="font-semibold flex items-center gap-2 text-sm">
-                  출하계획 목록
-                  <Badge variant="secondary" className="font-normal">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-bold text-foreground">출하계획 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
                     {data.length}건
-                  </Badge>
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
                 </div>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
               </div>
 
+              {/* 테이블 */}
               <div className="flex-1 overflow-auto">
-                {loading ? (
-                  <div className="flex items-center justify-center h-32">
-                    <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-                  </div>
-                ) : (
-                  <Table>
-                    <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
-                      <TableRow>
-                        <TableHead className="w-[40px] text-center">
-                          <Checkbox
-                            checked={data.length > 0 && checkedIds.length === data.filter(p => p.status !== "CANCELLED").length}
-                            onCheckedChange={handleCheckAll}
-                          />
-                        </TableHead>
-                        <TableHead className="w-[10%]">수주번호</TableHead>
-                        <TableHead className="w-[8%] text-center">납기일</TableHead>
-                        <TableHead className="w-[12%]">거래처</TableHead>
-                        <TableHead className="w-[20%]">품목코드</TableHead>
-                        <TableHead className="w-[20%]">품목명</TableHead>
-                        <TableHead className="w-[7%] text-right">수주수량</TableHead>
-                        <TableHead className="w-[7%] text-right">계획수량</TableHead>
-                        <TableHead className="w-[8%] text-center">출하계획일</TableHead>
-                        <TableHead className="w-[6%] text-center">상태</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {groupedData.length === 0 ? (
-                        <TableRow>
-                          <TableCell colSpan={10} className="h-32 text-center text-muted-foreground">
-                            출하계획이 없습니다.
-                          </TableCell>
-                        </TableRow>
-                      ) : (
-                        groupedData.map((group) =>
-                          group.plans.map((plan, planIdx) => (
-                            <TableRow
-                              key={plan.id}
-                              className={cn(
-                                "cursor-pointer hover:bg-muted/50 transition-colors",
-                                selectedId === plan.id && "bg-primary/5",
-                                plan.status === "CANCELLED" && "opacity-60 bg-slate-50",
-                                planIdx === 0 && "border-t-2 border-t-border"
-                              )}
-                              onClick={() => handleRowClick(plan)}
-                            >
-                              <TableCell className="text-center" onClick={e => e.stopPropagation()}>
-                                {planIdx === 0 && (
-                                  <Checkbox
-                                    checked={group.plans.every(p => checkedIds.includes(p.id))}
-                                    onCheckedChange={(c) => {
-                                      if (c) {
-                                        setCheckedIds(prev => [...new Set([...prev, ...group.plans.filter(p => p.status !== "CANCELLED").map(p => p.id)])]);
-                                      } else {
-                                        setCheckedIds(prev => prev.filter(id => !group.plans.some(p => p.id === id)));
-                                      }
-                                    }}
-                                  />
-                                )}
-                              </TableCell>
-                              <TableCell className="font-medium">
-                                {planIdx === 0 ? (plan.order_no || "-") : ""}
-                              </TableCell>
-                              <TableCell className="text-center">
-                                {planIdx === 0 ? formatDate(plan.due_date) : ""}
-                              </TableCell>
-                              <TableCell>
-                                {planIdx === 0 ? (plan.customer_name || "-") : ""}
-                              </TableCell>
-                              <TableCell className="text-muted-foreground text-xs">{plan.part_code || "-"}</TableCell>
-                              <TableCell className="font-medium">{plan.part_name || "-"}</TableCell>
-                              <TableCell className="text-right">{formatNumber(plan.order_qty)}</TableCell>
-                              <TableCell className="text-right font-semibold text-primary">{formatNumber(plan.plan_qty)}</TableCell>
-                              <TableCell className="text-center">{formatDate(plan.plan_date)}</TableCell>
-                              <TableCell className="text-center">
-                                <span className={cn("px-2 py-1 rounded-full text-[11px] font-medium border", getStatusColor(plan.status))}>
-                                  {getStatusLabel(plan.status)}
-                                </span>
-                              </TableCell>
-                            </TableRow>
-                          ))
-                        )
-                      )}
-                    </TableBody>
-                  </Table>
-                )}
+                <EDataTable
+                  columns={[
+                    { key: "order_no", label: "수주번호", render: (val: any) => <span className="font-medium text-sm">{val || "-"}</span> },
+                    { key: "due_date", label: "납기일", align: "center" as const, render: (val: any) => <span className="text-sm">{formatDate(val)}</span> },
+                    { key: "customer_name", label: "거래처", render: (val: any) => <span className="text-sm">{val || "-"}</span> },
+                    { key: "part_code", label: "품목코드", render: (val: any) => <span className="text-muted-foreground text-[13px]">{val || "-"}</span> },
+                    { key: "part_name", label: "품목명", render: (val: any) => <span className="font-medium text-sm">{val || "-"}</span> },
+                    { key: "order_qty", label: "수주수량", align: "right" as const, formatNumber: true },
+                    { key: "plan_qty", label: "계획수량", align: "right" as const, render: (val: any) => <span className="font-semibold text-primary text-sm">{formatNumber(val)}</span> },
+                    { key: "plan_date", label: "계획일", align: "center" as const, render: (val: any) => <span className="text-sm">{formatDate(val)}</span> },
+                    { key: "status", label: "상태", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(val))}>{getStatusLabel(val)}</span> },
+                  ] as EDataTableColumn<ShipmentPlanListItem>[]}
+                  data={data}
+                  rowKey={(row) => String(row.id)}
+                  loading={loading}
+                  emptyMessage="출하계획이 없어요"
+                  selectedId={selectedId !== null ? String(selectedId) : null}
+                  onSelect={(id) => {
+                    if (id) {
+                      const plan = data.find(p => String(p.id) === id);
+                      if (plan) handleRowClick(plan);
+                    }
+                  }}
+                  onRowClick={(row) => handleRowClick(row)}
+                  showCheckbox
+                  checkedIds={checkedIds.map(String)}
+                  onCheckedChange={(ids) => setCheckedIds(ids.map(Number))}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
               </div>
             </div>
           </ResizablePanel>
 
-          {/* 상세 패널 */}
-          {selectedId && selectedPlan && (
-            <>
-              <ResizableHandle withHandle />
-              <ResizablePanel defaultSize={35} minSize={25}>
-                <div className="flex flex-col h-full bg-card">
-                  <div className="flex items-center justify-between p-3 border-b shrink-0">
-                    <span className="font-semibold text-sm">
-                      {selectedPlan.shipment_plan_no || `#${selectedPlan.id}`}
-                    </span>
-                    <div className="flex items-center gap-2">
-                      <Button
-                        size="sm"
-                        onClick={handleSaveDetail}
-                        disabled={!isDetailChanged || saving}
-                        className={cn(isDetailChanged ? "bg-primary" : "bg-muted text-muted-foreground")}
-                      >
-                        {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
-                        저장
-                      </Button>
-                      <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setSelectedId(null)}>
-                        <X className="w-4 h-4" />
-                      </Button>
+          <ResizableHandle withHandle />
+
+          {/* 우측: 상세 패널 */}
+          <ResizablePanel defaultSize={40} minSize={20}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-bold text-foreground">출하계획 상세</span>
+                  {selectedPlan && (
+                    <span className="text-[11px] font-mono text-muted-foreground">{selectedPlan.shipment_plan_no}</span>
+                  )}
+                </div>
+                {selectedPlan && (
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      size="sm"
+                      onClick={handleSaveDetail}
+                      disabled={!isDetailChanged || saving}
+                      variant={isDetailChanged ? "default" : "secondary"}
+                    >
+                      {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
+                      저장
+                    </Button>
+                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setSelectedId(null)}>
+                      <X className="w-3.5 h-3.5" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {/* 상세 컨텐츠 */}
+              {selectedPlan ? (
+                <div className="flex-1 overflow-auto p-4 space-y-4">
+                  {/* 기본 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">상태</p>
+                      <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium inline-block", getStatusColor(selectedPlan.status))}>
+                        {getStatusLabel(selectedPlan.status)}
+                      </span>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주번호</p>
+                      <p className="text-sm font-mono text-muted-foreground">{selectedPlan.order_no || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">거래처</p>
+                      <p className="text-sm font-medium text-foreground">{selectedPlan.customer_name || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">납기일</p>
+                      <p className="text-sm text-foreground">{formatDate(selectedPlan.due_date)}</p>
                     </div>
                   </div>
 
-                  <div className="flex-1 overflow-auto p-4 space-y-6">
-                    {/* 기본 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">기본 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">상태</span>
-                          <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getStatusColor(selectedPlan.status))}>
-                            {getStatusLabel(selectedPlan.status)}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">수주번호</span>
-                          <span>{selectedPlan.order_no || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">거래처</span>
-                          <span>{selectedPlan.customer_name || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">등록일</span>
-                          <span>{formatDate(selectedPlan.created_date)}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">납기일</span>
-                          <span>{formatDate(selectedPlan.due_date)}</span>
-                        </div>
-                      </div>
-                    </section>
+                  <div className="border-t" />
 
-                    {/* 품목 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">품목 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm bg-muted/30 p-3 rounded-md border border-border/50">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">품목코드</span>
-                          <span>{selectedPlan.part_code || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">품목명</span>
-                          <span className="font-medium">{selectedPlan.part_name || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">규격</span>
-                          <span>{selectedPlan.spec || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">재질</span>
-                          <span>{selectedPlan.material || "-"}</span>
-                        </div>
+                  {/* 품목 정보 */}
+                  <div>
+                    <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-2">품목 정보</p>
+                    <div className="grid grid-cols-2 gap-3 bg-muted/30 border rounded-md p-3">
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">품목코드</p>
+                        <p className="text-sm font-mono text-muted-foreground">{selectedPlan.part_code || "-"}</p>
                       </div>
-                    </section>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">품목명</p>
+                        <p className="text-sm font-medium text-foreground">{selectedPlan.part_name || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">규격</p>
+                        <p className="text-sm text-foreground">{selectedPlan.spec || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">재질</p>
+                        <p className="text-sm text-foreground">{selectedPlan.material || "-"}</p>
+                      </div>
+                    </div>
+                  </div>
 
-                    {/* 수량 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">수량 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-4 text-sm">
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">수주수량</span>
-                          <span>{formatNumber(selectedPlan.order_qty)}</span>
-                        </div>
-                        <div>
-                          <Label className="text-muted-foreground text-xs block mb-1">계획수량</Label>
-                          <Input
-                            type="number"
-                            className="h-8"
-                            value={editPlanQty}
-                            onChange={(e) => { setEditPlanQty(e.target.value); setIsDetailChanged(true); }}
-                            disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
-                          />
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">출하수량</span>
-                          <span>{formatNumber(selectedPlan.shipped_qty)}</span>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground text-xs block mb-1">잔여수량</span>
-                          <span className={cn("font-semibold",
-                            (Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty)) > 0
-                              ? "text-destructive"
-                              : "text-emerald-600"
-                          )}>
-                            {formatNumber(Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty))}
-                          </span>
-                        </div>
-                      </div>
-                    </section>
+                  <div className="border-t" />
 
-                    {/* 출하 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">출하 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-4 text-sm">
-                        <div className="col-span-2">
-                          <Label className="text-muted-foreground text-xs block mb-1">출하계획일</Label>
-                          <Input
-                            type="date"
-                            className="h-8"
-                            value={editPlanDate}
-                            onChange={(e) => { setEditPlanDate(e.target.value); setIsDetailChanged(true); }}
-                            disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
-                          />
-                        </div>
-                        <div className="col-span-2">
-                          <Label className="text-muted-foreground text-xs block mb-1">비고</Label>
-                          <Textarea
-                            className="min-h-[80px] resize-y"
-                            value={editMemo}
-                            onChange={(e) => { setEditMemo(e.target.value); setIsDetailChanged(true); }}
-                            disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
-                            placeholder="비고 입력"
-                          />
-                        </div>
-                      </div>
-                    </section>
+                  {/* 수량 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주수량</p>
+                      <p className="text-sm text-foreground">{formatNumber(selectedPlan.order_qty)}</p>
+                    </div>
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">계획수량</Label>
+                      <Input
+                        type="number"
+                        className="h-9"
+                        value={editPlanQty}
+                        onChange={(e) => { setEditPlanQty(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                      />
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">출하수량</p>
+                      <p className="text-sm text-foreground">{formatNumber(selectedPlan.shipped_qty)}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">잔여수량</p>
+                      <p className={cn(
+                        "font-semibold text-sm",
+                        (Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty)) > 0
+                          ? "text-destructive"
+                          : "text-success"
+                      )}>
+                        {formatNumber(Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty))}
+                      </p>
+                    </div>
+                  </div>
 
-                    {/* 등록자 정보 */}
-                    <section>
-                      <h3 className="text-sm font-semibold mb-3">등록 정보</h3>
-                      <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm text-muted-foreground">
-                        <div>
-                          <span className="text-xs block mb-1">등록자</span>
-                          <span className="text-foreground">{selectedPlan.created_by || "-"}</span>
-                        </div>
-                        <div>
-                          <span className="text-xs block mb-1">등록일시</span>
-                          <span className="text-foreground">{selectedPlan.created_date ? new Date(selectedPlan.created_date).toLocaleString("ko-KR") : "-"}</span>
-                        </div>
-                      </div>
-                    </section>
+                  <div className="border-t" />
+
+                  {/* 출하 정보 */}
+                  <div className="space-y-3">
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">출하계획일</Label>
+                      <Input
+                        type="date"
+                        className="h-9"
+                        value={editPlanDate}
+                        onChange={(e) => { setEditPlanDate(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                      />
+                    </div>
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">비고</Label>
+                      <Textarea
+                        className="min-h-[80px] resize-y text-sm"
+                        value={editMemo}
+                        onChange={(e) => { setEditMemo(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                        placeholder="비고를 입력해주세요"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 등록 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">등록자</p>
+                      <p className="text-sm text-foreground">{selectedPlan.created_by || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">등록일시</p>
+                      <p className="text-sm text-foreground">
+                        {selectedPlan.created_date ? new Date(selectedPlan.created_date).toLocaleString("ko-KR") : "-"}
+                      </p>
+                    </div>
                   </div>
                 </div>
-              </ResizablePanel>
-            </>
-          )}
+              ) : (
+                <div className="flex flex-col items-center justify-center h-full text-center p-8 text-muted-foreground">
+                  <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center mb-4">
+                    <Inbox className="w-6 h-6 text-muted-foreground/30" />
+                  </div>
+                  <p className="text-sm font-medium">좌측에서 출하계획을 선택해주세요</p>
+                  <p className="text-xs text-muted-foreground/60 mt-1">선택하면 상세 정보가 표시돼요</p>
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
         </ResizablePanelGroup>
       </div>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/COMPANY_8/design/change-management/page.tsx b/frontend/app/(main)/COMPANY_8/design/change-management/page.tsx
new file mode 100644
index 00000000..39f06769
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/design/change-management/page.tsx
@@ -0,0 +1,1524 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Plus,
+  Save,
+  Inbox,
+  Pencil,
+  FileText,
+  XCircle,
+  ArrowRight,
+  Paperclip,
+  Upload,
+  Loader2,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  getDesignRequestList,
+  createDesignRequest,
+  updateDesignRequest,
+  addRequestHistory,
+  getEcnList,
+  createEcn,
+  updateEcn,
+} from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// --- Types ---
+type ChangeType = "설계오류" | "원가절감" | "고객요청" | "공정개선" | "법규대응";
+type EcrStatus = "요청접수" | "영향도분석" | "ECN발행" | "기각";
+type EcnStatus = "ECN발행" | "도면변경" | "통보완료" | "적용완료";
+type TabType = "ecr" | "ecn";
+
+interface EcrHistory {
+  status: string;
+  date: string;
+  user: string;
+  desc: string;
+}
+
+interface EcrItem {
+  id: string;
+  _id?: string;
+  date: string;
+  changeType: ChangeType;
+  urgency: "보통" | "긴급";
+  status: EcrStatus;
+  target: string;
+  drawingNo: string;
+  reqDept: string;
+  requester: string;
+  reason: string;
+  content: string;
+  impact: string[];
+  applyTiming: string;
+  ecnNo: string;
+  history: EcrHistory[];
+}
+
+interface EcnItem {
+  id: string;
+  _id?: string;
+  ecrNo: string;
+  ecrId?: string;
+  date: string;
+  applyDate: string;
+  status: EcnStatus;
+  target: string;
+  drawingBefore: string;
+  drawingAfter: string;
+  designer: string;
+  before: string;
+  after: string;
+  reason: string;
+  notifyDepts: string[];
+  remark: string;
+  history: EcrHistory[];
+}
+
+// --- Style Helpers ---
+const getChangeTypeStyle = (type: ChangeType) => {
+  switch (type) {
+    case "설계오류":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "원가절감":
+      return "bg-success/10 text-success border-success/20";
+    case "고객요청":
+      return "bg-info/10 text-info border-info/20";
+    case "공정개선":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "법규대응":
+      return "bg-primary/10 text-primary border-primary/20";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getEcrStatusStyle = (status: EcrStatus) => {
+  switch (status) {
+    case "요청접수":
+      return "bg-info/10 text-info border-info/20";
+    case "영향도분석":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "ECN발행":
+      return "bg-success/10 text-success border-success/20";
+    case "기각":
+      return "bg-muted text-muted-foreground border-border";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getEcnStatusStyle = (status: EcnStatus) => {
+  switch (status) {
+    case "ECN발행":
+      return "bg-info/10 text-info border-info/20";
+    case "도면변경":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "통보완료":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "적용완료":
+      return "bg-success/10 text-success border-success/20";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getImpactBadgeStyle = (impact: string) => {
+  switch (impact) {
+    case "BOM":
+      return "bg-info/10 text-info border-info/20";
+    case "공정":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "금형":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "검사기준":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "구매":
+    case "원가":
+      return "bg-success/10 text-success border-success/20";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getTimelineStatusStyle = (status: string) => {
+  switch (status) {
+    case "기각":
+      return "bg-muted text-muted-foreground border-border";
+    case "적용완료":
+    case "ECN발행":
+      return "bg-success/10 text-success border-success/20";
+    case "영향도분석":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "도면변경":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "통보완료":
+      return "bg-info/10 text-info border-info/20";
+    default:
+      return "bg-info/10 text-info border-info/20";
+  }
+};
+
+// --- Constants ---
+const CHANGE_TYPES: ChangeType[] = ["설계오류", "원가절감", "고객요청", "공정개선", "법규대응"];
+const ECR_STATUSES: EcrStatus[] = ["요청접수", "영향도분석", "ECN발행", "기각"];
+const ECN_STATUSES: EcnStatus[] = ["ECN발행", "도면변경", "통보완료", "적용완료"];
+const DEPARTMENTS = ["품질팀", "생산팀", "영업팀", "구매팀", "설계팀"];
+const DESIGNERS = ["이설계", "박도면", "최기구", "김전장"];
+const IMPACT_OPTIONS = [
+  { key: "BOM", label: "BOM 변경" },
+  { key: "공정", label: "공정 변경" },
+  { key: "금형", label: "금형 변경" },
+  { key: "검사기준", label: "검사기준 변경" },
+  { key: "구매", label: "구매 변경" },
+  { key: "원가", label: "원가 영향" },
+];
+const NOTIFY_DEPTS = [
+  { key: "생산팀", label: "생산팀" },
+  { key: "품질팀", label: "품질팀" },
+  { key: "구매팀", label: "구매팀" },
+  { key: "영업팀", label: "영업팀" },
+  { key: "물류팀", label: "물류팀" },
+  { key: "금형팀", label: "금형팀" },
+];
+
+// --- API Response Mapping ---
+function mapEcrFromApi(raw: any): EcrItem {
+  const history = (raw.history || []).map((h: any) => ({
+    status: h.step || h.status || "",
+    date: h.history_date || "",
+    user: h.user_name || "",
+    desc: h.description || "",
+  }));
+  return {
+    id: raw.request_no || raw.id || "",
+    _id: raw.id,
+    date: raw.request_date || "",
+    changeType: (raw.change_type as ChangeType) || "설계오류",
+    urgency: (raw.urgency as "보통" | "긴급") || "보통",
+    status: (raw.status as EcrStatus) || "요청접수",
+    target: raw.target_name || "",
+    drawingNo: raw.drawing_no || "",
+    reqDept: raw.req_dept || "",
+    requester: raw.requester || "",
+    reason: raw.reason || "",
+    content: raw.content || "",
+    impact: Array.isArray(raw.impact) ? raw.impact : [],
+    applyTiming: raw.apply_timing || "",
+    ecnNo: raw.ecn_no || "",
+    history,
+  };
+}
+
+function mapEcnFromApi(raw: any, ecrData: EcrItem[]): EcnItem {
+  const history = (raw.history || []).map((h: any) => ({
+    status: h.status || "",
+    date: h.history_date || "",
+    user: h.user_name || "",
+    desc: h.description || "",
+  }));
+  const ecrNo = raw.ecr_id
+    ? ecrData.find((e) => e._id === raw.ecr_id)?.id ?? raw.ecr_id
+    : "";
+  return {
+    id: raw.ecn_no || raw.id || "",
+    _id: raw.id,
+    ecrNo,
+    ecrId: raw.ecr_id,
+    date: raw.ecn_date || "",
+    applyDate: raw.apply_date || "",
+    status: (raw.status as EcnStatus) || "ECN발행",
+    target: raw.target || "",
+    drawingBefore: raw.drawing_before || "",
+    drawingAfter: raw.drawing_after || "",
+    designer: raw.designer || "",
+    before: raw.before_content || "",
+    after: raw.after_content || "",
+    reason: raw.reason || "",
+    notifyDepts: Array.isArray(raw.notify_depts) ? raw.notify_depts : [],
+    remark: raw.remark || "",
+    history,
+  };
+}
+
+// --- Timeline Component ---
+function Timeline({ history }: { history: EcrHistory[] }) {
+  return (
+    <div className="space-y-0">
+      {history.map((h, idx) => {
+        const isLast = idx === history.length - 1;
+        const isRejected = h.status === "기각";
+        const isCompleted = h.status === "적용완료";
+        return (
+          <div key={idx} className="flex gap-3 relative">
+            <div className="flex flex-col items-center">
+              <div
+                className={cn(
+                  "w-3 h-3 rounded-full border-2 mt-1.5 shrink-0",
+                  isLast && isRejected
+                    ? "bg-destructive border-destructive/60"
+                    : isLast && isCompleted
+                      ? "bg-success border-success/60"
+                      : isLast
+                        ? "bg-primary border-primary/50 ring-4 ring-primary/10"
+                        : "bg-success border-success/60"
+                )}
+              />
+              {!isLast && (
+                <div className="w-px flex-1 bg-border min-h-[24px]" />
+              )}
+            </div>
+            <div className="pb-4 min-w-0">
+              <div className="flex items-center gap-2 mb-0.5">
+                <span
+                  className={cn(
+                    "px-2 py-0.5 rounded-full text-[10px] font-medium border",
+                    getTimelineStatusStyle(h.status)
+                  )}
+                >
+                  {h.status}
+                </span>
+              </div>
+              <p className="text-xs text-foreground">{h.desc}</p>
+              <p className="text-[11px] text-muted-foreground mt-0.5">
+                {h.date} · {h.user}
+              </p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// --- Grid Columns ---
+const ECR_GRID_COLUMNS = [
+  { key: "request_no", label: "ECR번호" },
+  { key: "change_type", label: "변경유형" },
+  { key: "status", label: "상태" },
+  { key: "urgency", label: "긴급" },
+  { key: "target_name", label: "대상 품목/설비" },
+  { key: "drawing_no", label: "도면번호" },
+  { key: "req_dept", label: "요청부서" },
+  { key: "requester", label: "요청자" },
+  { key: "request_date", label: "요청일자" },
+  { key: "ecn_no", label: "관련 ECN" },
+];
+
+const ECN_GRID_COLUMNS = [
+  { key: "ecn_no", label: "ECN번호" },
+  { key: "status", label: "상태" },
+  { key: "target", label: "대상 품목/설비" },
+  { key: "drawing_after", label: "도면 (변경 후)" },
+  { key: "designer", label: "설계담당" },
+  { key: "ecn_date", label: "발행일자" },
+  { key: "apply_date", label: "적용일자" },
+  { key: "notify_depts", label: "통보 부서" },
+  { key: "ecr_id", label: "관련 ECR" },
+];
+
+// --- Main Component ---
+export default function DesignChangeManagementPage() {
+  const tsEcr = useTableSettings("c16-change-management-ecr", "dsn_design_request", ECR_GRID_COLUMNS);
+  const tsEcn = useTableSettings("c16-change-management-ecn", "dsn_ecn", ECN_GRID_COLUMNS);
+  const [currentTab, setCurrentTab] = useState<TabType>("ecr");
+  const [ecrData, setEcrData] = useState<EcrItem[]>([]);
+  const [ecnData, setEcnData] = useState<EcnItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // ECR 모달
+  const [isEcrModalOpen, setIsEcrModalOpen] = useState(false);
+  const [isEcrEditMode, setIsEcrEditMode] = useState(false);
+  const [ecrForm, setEcrForm] = useState<Partial<EcrItem>>({});
+  const [ecrImpactChecks, setEcrImpactChecks] = useState<Record<string, boolean>>({});
+
+  // ECN 모달
+  const [isEcnModalOpen, setIsEcnModalOpen] = useState(false);
+  const [ecnForm, setEcnForm] = useState<Partial<EcnItem>>({});
+  const [ecnNotifyChecks, setEcnNotifyChecks] = useState<Record<string, boolean>>({});
+
+  // 기각 모달
+  const [isRejectModalOpen, setIsRejectModalOpen] = useState(false);
+  const [rejectReason, setRejectReason] = useState("");
+  const [rejectTargetId, setRejectTargetId] = useState("");
+
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [ecrRes, ecnRes] = await Promise.all([
+        getDesignRequestList({ source_type: "ecr" }),
+        getEcnList(),
+      ]);
+      if (ecrRes.success && ecrRes.data) {
+        setEcrData((ecrRes.data as any[]).map(mapEcrFromApi));
+      }
+      if (ecnRes.success && ecnRes.data) {
+        const ecrList = ecrRes.success && ecrRes.data ? (ecrRes.data as any[]).map(mapEcrFromApi) : [];
+        setEcnData((ecnRes.data as any[]).map((r) => mapEcnFromApi(r, ecrList)));
+      }
+    } catch {
+      toast.error("데이터를 불러오는데 실패했어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // snake_case → camelCase 매핑 (ECR)
+  const ecrFieldMap: Record<string, string> = {
+    request_no: "id",
+    request_date: "date",
+    change_type: "changeType",
+    target_name: "target",
+    drawing_no: "drawingNo",
+    req_dept: "reqDept",
+    ecn_no: "ecnNo",
+    apply_timing: "applyTiming",
+  };
+  // snake_case → camelCase 매핑 (ECN)
+  const ecnFieldMap: Record<string, string> = {
+    ecn_no: "id",
+    ecn_date: "date",
+    apply_date: "applyDate",
+    drawing_before: "drawingBefore",
+    drawing_after: "drawingAfter",
+    ecr_id: "ecrNo",
+    notify_depts: "notifyDepts",
+  };
+  const getFieldValue = (obj: any, colName: string, map: Record<string, string>): string => {
+    const key = map[colName] || colName;
+    const val = obj[key];
+    if (Array.isArray(val)) return val.join(",");
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
+  const applyFilters = (items: any[], map: Record<string, string>) => {
+    if (searchFilters.length === 0) return items;
+    return items.filter((item) => {
+      for (const f of searchFilters) {
+        const val = getFieldValue(item, f.columnName, map);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (val !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) return false;
+          if (to && val > to) return false;
+        }
+      }
+      return true;
+    });
+  };
+
+  // --- Filtered Data ---
+  const filteredEcr = useMemo(() => {
+    return applyFilters(ecrData, ecrFieldMap)
+      .sort((a: EcrItem, b: EcrItem) => b.date.localeCompare(a.date));
+  }, [ecrData, searchFilters]);
+
+  const filteredEcn = useMemo(() => {
+    return applyFilters(ecnData, ecnFieldMap)
+      .sort((a: EcnItem, b: EcnItem) => b.date.localeCompare(a.date));
+  }, [ecnData, searchFilters]);
+
+  // --- Status Counts ---
+  const ecrStatusCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    ECR_STATUSES.forEach((s) => (counts[s] = ecrData.filter((r) => r.status === s).length));
+    return counts;
+  }, [ecrData]);
+
+  const ecnStatusCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    ECN_STATUSES.forEach((s) => (counts[s] = ecnData.filter((r) => r.status === s).length));
+    return counts;
+  }, [ecnData]);
+
+  // --- Selected Items ---
+  const selectedEcr = useMemo(
+    () => (currentTab === "ecr" ? ecrData.find((r) => r.id === selectedId) : null),
+    [ecrData, selectedId, currentTab]
+  );
+  const selectedEcn = useMemo(
+    () => (currentTab === "ecn" ? ecnData.find((r) => r.id === selectedId) : null),
+    [ecnData, selectedId, currentTab]
+  );
+
+  // --- Tab Switch ---
+  const handleTabSwitch = (tab: TabType) => {
+    setCurrentTab(tab);
+    setSelectedId(null);
+  };
+
+  const handleFilterByStatus = (_status: string) => {
+    // Status filter now handled by DynamicSearchFilter
+  };
+
+  // --- ECR/ECN Navigation ---
+  const navigateToLink = (targetId: string) => {
+    setDetailOpen(false);
+    if (targetId.startsWith("ECN")) {
+      setCurrentTab("ecn");
+      setSelectedId(targetId);
+    } else if (targetId.startsWith("ECR")) {
+      setCurrentTab("ecr");
+      setSelectedId(targetId);
+    }
+  };
+
+  // --- ECR Number Generator ---
+  const generateEcrNo = useCallback(() => {
+    const year = new Date().getFullYear();
+    const prefix = `ECR-${year}-`;
+    const existing = ecrData.filter((r) => r.id.startsWith(prefix));
+    const maxNum = existing.reduce((max, r) => {
+      const num = parseInt(r.id.split("-")[2]);
+      return num > max ? num : max;
+    }, 0);
+    return `${prefix}${String(maxNum + 1).padStart(4, "0")}`;
+  }, [ecrData]);
+
+  const generateEcnNo = useCallback(() => {
+    const year = new Date().getFullYear();
+    const prefix = `ECN-${year}-`;
+    const existing = ecnData.filter((r) => r.id.startsWith(prefix));
+    const maxNum = existing.reduce((max, r) => {
+      const num = parseInt(r.id.split("-")[2]);
+      return num > max ? num : max;
+    }, 0);
+    return `${prefix}${String(maxNum + 1).padStart(4, "0")}`;
+  }, [ecnData]);
+
+  // --- ECR Modal ---
+  const openEcrRegisterModal = () => {
+    setIsEcrEditMode(false);
+    setEcrForm({
+      id: generateEcrNo(),
+      date: new Date().toISOString().split("T")[0],
+      changeType: undefined,
+      urgency: "보통",
+      target: "",
+      drawingNo: "",
+      reqDept: "",
+      requester: "",
+      reason: "",
+      content: "",
+      applyTiming: "즉시",
+    });
+    setEcrImpactChecks({});
+    setIsEcrModalOpen(true);
+  };
+
+  const openEcrEditModal = (id: string) => {
+    const item = ecrData.find((r) => r.id === id);
+    if (!item) return;
+    setIsEcrEditMode(true);
+    setEcrForm({ ...item });
+    const checks: Record<string, boolean> = {};
+    IMPACT_OPTIONS.forEach((opt) => {
+      checks[opt.key] = item.impact.includes(opt.key);
+    });
+    setEcrImpactChecks(checks);
+    setIsEcrModalOpen(true);
+  };
+
+  const handleSaveEcr = async () => {
+    if (!ecrForm.changeType) {
+      toast.error("변경 유형을 선택해 주세요.");
+      return;
+    }
+    if (!ecrForm.target?.trim()) {
+      toast.error("대상 품목/설비를 입력해 주세요.");
+      return;
+    }
+    if (!ecrForm.reason?.trim()) {
+      toast.error("변경 사유를 입력해 주세요.");
+      return;
+    }
+    if (!ecrForm.content?.trim()) {
+      toast.error("변경 요구 내용을 입력해 주세요.");
+      return;
+    }
+
+    const impact = IMPACT_OPTIONS.filter((opt) => ecrImpactChecks[opt.key]).map((opt) => opt.key);
+    const reqDate = ecrForm.date || new Date().toISOString().split("T")[0];
+    const historyEntry = {
+      step: "요청접수",
+      history_date: reqDate,
+      user_name: ecrForm.requester || "시스템",
+      description: `${ecrForm.reqDept || ""}에서 ECR 등록`,
+    };
+
+    if (isEcrEditMode && ecrForm._id) {
+      const res = await updateDesignRequest(ecrForm._id, {
+        request_no: ecrForm.id,
+        request_date: reqDate,
+        change_type: ecrForm.changeType,
+        urgency: ecrForm.urgency || "보통",
+        target_name: ecrForm.target,
+        drawing_no: ecrForm.drawingNo || "",
+        req_dept: ecrForm.reqDept || "",
+        requester: ecrForm.requester || "",
+        reason: ecrForm.reason,
+        content: ecrForm.content,
+        impact,
+        apply_timing: ecrForm.applyTiming || "즉시",
+      });
+      if (res.success) {
+        toast.success("ECR이 수정되었어요.");
+        setIsEcrModalOpen(false);
+        fetchData();
+      } else {
+        toast.error(res.message || "ECR 수정에 실패했어요.");
+      }
+    } else {
+      const res = await createDesignRequest({
+        request_no: ecrForm.id || generateEcrNo(),
+        source_type: "ecr",
+        request_date: reqDate,
+        change_type: ecrForm.changeType,
+        urgency: ecrForm.urgency || "보통",
+        status: "요청접수",
+        target_name: ecrForm.target,
+        drawing_no: ecrForm.drawingNo || "",
+        req_dept: ecrForm.reqDept || "",
+        requester: ecrForm.requester || "",
+        reason: ecrForm.reason,
+        content: ecrForm.content,
+        impact,
+        apply_timing: ecrForm.applyTiming || "즉시",
+        history: [historyEntry],
+      });
+      if (res.success) {
+        toast.success("ECR이 등록되었어요.");
+        setIsEcrModalOpen(false);
+        fetchData();
+      } else {
+        toast.error(res.message || "ECR 등록에 실패했어요.");
+      }
+    }
+  };
+
+  // --- ECN Modal ---
+  const openEcnIssueModal = (ecrId: string) => {
+    const ecr = ecrData.find((r) => r.id === ecrId);
+    if (!ecr) return;
+
+    setEcnForm({
+      id: generateEcnNo(),
+      ecrNo: ecrId,
+      ecrId: ecr._id,
+      date: new Date().toISOString().split("T")[0],
+      target: ecr.target,
+      reason: ecr.reason,
+      drawingBefore: ecr.drawingNo,
+      drawingAfter: "",
+      designer: "",
+      before: "",
+      after: "",
+      applyDate: "",
+      remark: "",
+    });
+    setEcnNotifyChecks({});
+    setIsEcnModalOpen(true);
+  };
+
+  const handleSaveEcn = async () => {
+    if (!ecnForm.after?.trim()) {
+      toast.error("변경 후(TO-BE) 내용을 입력해 주세요.");
+      return;
+    }
+    if (!ecnForm.applyDate) {
+      toast.error("적용일자를 입력해 주세요.");
+      return;
+    }
+    if (!ecnForm.ecrId) {
+      toast.error("관련 ECR 정보가 없어요.");
+      return;
+    }
+
+    const notifyDepts = NOTIFY_DEPTS.filter((d) => ecnNotifyChecks[d.key]).map((d) => d.key);
+    const ecnDate = ecnForm.date || new Date().toISOString().split("T")[0];
+    const historyEntry = {
+      status: "ECN발행",
+      history_date: ecnDate,
+      user_name: ecnForm.designer || "시스템",
+      description: "ECN 발행",
+    };
+
+    const ecnNo = ecnForm.id || generateEcnNo();
+    const res = await createEcn({
+      ecn_no: ecnNo,
+      ecr_id: ecnForm.ecrId,
+      ecn_date: ecnDate,
+      apply_date: ecnForm.applyDate,
+      status: "ECN발행",
+      target: ecnForm.target || "",
+      drawing_before: ecnForm.drawingBefore || "",
+      drawing_after: ecnForm.drawingAfter || "(미정)",
+      designer: ecnForm.designer || "",
+      before_content: ecnForm.before || "",
+      after_content: ecnForm.after || "",
+      reason: ecnForm.reason || "",
+      remark: ecnForm.remark || "",
+      notify_depts: notifyDepts,
+      history: [historyEntry],
+    });
+
+    if (res.success) {
+      await updateDesignRequest(ecnForm.ecrId!, {
+        status: "ECN발행",
+        ecn_no: ecnNo,
+      });
+      await addRequestHistory(ecnForm.ecrId!, {
+        step: "ECN발행",
+        history_date: ecnDate,
+        user_name: ecnForm.designer || "시스템",
+        description: `${ecnNo} 발행`,
+      });
+      toast.success("ECN이 발행되었어요.");
+      setIsEcnModalOpen(false);
+      fetchData();
+    } else {
+      toast.error(res.message || "ECN 발행에 실패했어요.");
+    }
+  };
+
+  // --- ECR Reject ---
+  const openRejectModal = (id: string) => {
+    setRejectTargetId(id);
+    setRejectReason("");
+    setIsRejectModalOpen(true);
+  };
+
+  const handleRejectSubmit = async () => {
+    if (!rejectReason.trim()) {
+      toast.error("기각 사유를 입력해 주세요.");
+      return;
+    }
+
+    const ecr = ecrData.find((r) => r.id === rejectTargetId);
+    if (!ecr?._id) {
+      toast.error("ECR 정보를 찾을 수 없어요.");
+      return;
+    }
+
+    const updateRes = await updateDesignRequest(ecr._id, { status: "기각", review_memo: rejectReason });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "ECR 기각에 실패했어요.");
+      return;
+    }
+    await addRequestHistory(ecr._id, {
+      step: "기각",
+      history_date: new Date().toISOString().split("T")[0],
+      user_name: "설계팀",
+      description: rejectReason,
+    });
+    toast.success("ECR이 기각되었어요.");
+    setIsRejectModalOpen(false);
+    fetchData();
+  };
+
+  // --- Stat Cards ---
+  const ecrStatCards = [
+    { label: "요청접수", value: ecrStatusCounts["요청접수"] || 0, color: "text-info" },
+    { label: "영향도분석", value: ecrStatusCounts["영향도분석"] || 0, color: "text-warning" },
+    { label: "ECN발행", value: ecrStatusCounts["ECN발행"] || 0, color: "text-success" },
+  ];
+
+  const ecnStatCards = [
+    { label: "도면변경", value: ecnStatusCounts["도면변경"] || 0, color: "text-primary" },
+    { label: "통보완료", value: ecnStatusCounts["통보완료"] || 0, color: "text-info" },
+    { label: "적용완료", value: ecnStatusCounts["적용완료"] || 0, color: "text-success" },
+  ];
+
+  const currentStatCards = currentTab === "ecr" ? ecrStatCards : ecnStatCards;
+  const currentList = currentTab === "ecr" ? filteredEcr : filteredEcn;
+
+  const handleRowClick = (id: string) => {
+    setSelectedId(id);
+    setDetailOpen(true);
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3 relative">
+      {loading && (
+        <div className="absolute inset-0 bg-background/50 flex items-center justify-center z-50">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        </div>
+      )}
+
+      {/* 탭 선택 + 검색 필터 */}
+      <div className="shrink-0 flex flex-col gap-2">
+        <div className="flex items-center gap-3 px-1">
+          <Select value={currentTab} onValueChange={(v) => handleTabSwitch(v as TabType)}>
+            <SelectTrigger className="w-[170px] h-9">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="ecr">ECR (변경요청)</SelectItem>
+              <SelectItem value="ecn">ECN (변경통지)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        {currentTab === "ecr" ? (
+          <DynamicSearchFilter
+            tableName="dsn_design_request"
+            filterId="c16-change-management-ecr"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={tsEcr.filterConfig}
+            dataCount={filteredEcr.length}
+          />
+        ) : (
+          <DynamicSearchFilter
+            tableName="dsn_ecn"
+            filterId="c16-change-management-ecn"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={tsEcn.filterConfig}
+            dataCount={filteredEcn.length}
+          />
+        )}
+      </div>
+
+      {/* 현황 카드 */}
+      <div className="grid grid-cols-3 gap-3 shrink-0">
+        {currentStatCards.map((card) => (
+          <button
+            key={card.label}
+            onClick={() => handleFilterByStatus(card.label)}
+            className="rounded-lg border bg-card px-3 py-2 text-left transition-colors hover:bg-accent/50"
+          >
+            <div className="text-[10px] text-muted-foreground">{card.label}</div>
+            <div className={cn("text-xl font-bold", card.color)}>{card.value}</div>
+          </button>
+        ))}
+      </div>
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold">
+            {currentTab === "ecr" ? "설계변경요청(ECR) 목록" : "설계변경통지(ECN) 목록"}
+          </h2>
+          <Badge variant="secondary" className="font-mono">{currentList.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          {currentTab === "ecr" && (
+            <Button size="sm" onClick={openEcrRegisterModal}>
+              <Plus className="w-4 h-4 mr-1.5" /> ECR 등록
+            </Button>
+          )}
+          <Button variant="ghost" size="sm" onClick={() => (currentTab === "ecr" ? tsEcr : tsEcn).setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 테이블 영역 */}
+      <div className="flex-1 flex flex-col overflow-hidden border rounded-lg bg-card">
+        <div className="flex-1 overflow-auto">
+          {currentTab === "ecr" ? (
+            <EDataTable
+              columns={[
+                { key: "id", label: "ECR번호", width: "w-[140px]", render: (val: any) => <span className="font-semibold text-primary">{val}</span> },
+                { key: "changeType", label: "변경유형", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getChangeTypeStyle(val))}>{val}</span> },
+                { key: "status", label: "상태", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcrStatusStyle(val))}>{val}</span> },
+                { key: "urgency", label: "긴급", width: "w-[60px]", align: "center" as const, render: (val: any) => val === "긴급" ? <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-destructive/10 text-destructive border-destructive/20">긴급</span> : <span>-</span> },
+                { key: "target", label: "대상 품목/설비", width: "w-[200px]" },
+                { key: "drawingNo", label: "도면번호", width: "w-[150px]" },
+                { key: "reqDept", label: "요청부서", width: "w-[80px]" },
+                { key: "requester", label: "요청자", width: "w-[70px]" },
+                { key: "date", label: "요청일자", width: "w-[100px]" },
+                { key: "ecnNo", label: "관련 ECN", width: "w-[130px]", render: (val: any) => val ? <button className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-info/10 text-info border border-info/20 hover:bg-info/20 transition-colors" onClick={(e) => { e.stopPropagation(); navigateToLink(val); }}>{val} <ArrowRight className="w-3 h-3 inline" /></button> : <span>-</span> },
+              ] as EDataTableColumn<EcrItem>[]}
+              data={tsEcr.groupData(filteredEcr)}
+              rowKey={(row) => row.id}
+              selectedId={selectedId}
+              onSelect={(id) => { if (id) handleRowClick(id); }}
+              onRowClick={(row) => handleRowClick(row.id)}
+              emptyMessage="조건에 맞는 ECR이 없어요"
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+            />
+          ) : (
+            <EDataTable
+              columns={[
+                { key: "id", label: "ECN번호", width: "w-[140px]", render: (val: any) => <span className="font-semibold text-primary">{val}</span> },
+                { key: "status", label: "상태", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcnStatusStyle(val))}>{val}</span> },
+                { key: "target", label: "대상 품목/설비", width: "w-[200px]" },
+                { key: "drawingAfter", label: "도면 (변경 후)", width: "w-[160px]", render: (val: any) => <span className="text-[13px] text-success font-medium">{val}</span> },
+                { key: "designer", label: "설계담당", width: "w-[80px]" },
+                { key: "date", label: "발행일자", width: "w-[100px]" },
+                { key: "applyDate", label: "적용일자", width: "w-[100px]" },
+                { key: "notifyDepts", label: "통보 부서", width: "w-[140px]", render: (val: any) => <span className="text-[13px] text-muted-foreground">{Array.isArray(val) ? val.join(", ") : val}</span> },
+                { key: "ecrNo", label: "관련 ECR", width: "w-[130px]", render: (val: any) => <button className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-warning/10 text-warning border border-warning/20 hover:bg-warning/20 transition-colors" onClick={(e) => { e.stopPropagation(); navigateToLink(val); }}>{val} <ArrowRight className="w-3 h-3 inline" /></button> },
+              ] as EDataTableColumn<EcnItem>[]}
+              data={tsEcn.groupData(filteredEcn)}
+              rowKey={(row) => row.id}
+              selectedId={selectedId}
+              onSelect={(id) => { if (id) handleRowClick(id); }}
+              onRowClick={(row) => handleRowClick(row.id)}
+              emptyMessage="조건에 맞는 ECN이 없어요"
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* 상세 정보 다이얼로그 */}
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="max-w-[900px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{currentTab === "ecr" ? `ECR 상세 — ${selectedEcr?.id || ""}` : `ECN 상세 — ${selectedEcn?.id || ""}`}</DialogTitle>
+            <DialogDescription>{currentTab === "ecr" ? "설계변경요청의 상세 정보를 확인해요." : "설계변경통지의 상세 정보를 확인해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="space-y-5">
+          {/* ECR 상세 */}
+          {selectedEcr ? (
+            <>
+              <section>
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
+                  기본 정보
+                </h3>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">ECR번호</span>
+                    <span className="font-medium text-primary">{selectedEcr.id}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">상태</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcrStatusStyle(selectedEcr.status))}>
+                      {selectedEcr.status}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">변경 유형</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getChangeTypeStyle(selectedEcr.changeType))}>
+                      {selectedEcr.changeType}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">긴급도</span>
+                    <span>
+                      {selectedEcr.urgency === "긴급" ? (
+                        <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-destructive/10 text-destructive border-destructive/20">긴급</span>
+                      ) : (
+                        "보통"
+                      )}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
+                    <span className="font-medium">{selectedEcr.target}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">도면번호</span>
+                    <span>{selectedEcr.drawingNo}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">요청부서 / 요청자</span>
+                    <span>{selectedEcr.reqDept} / {selectedEcr.requester}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">요청일자</span>
+                    <span>{selectedEcr.date}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">희망 적용시점</span>
+                    <span>{selectedEcr.applyTiming}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">관련 ECN</span>
+                    {selectedEcr.ecnNo ? (
+                      <button
+                        className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-info/10 text-info border border-info/20 hover:bg-info/20 transition-colors"
+                        onClick={() => navigateToLink(selectedEcr.ecnNo)}
+                      >
+                        {selectedEcr.ecnNo} <ArrowRight className="w-3 h-3 inline" />
+                      </button>
+                    ) : (
+                      <span className="text-muted-foreground">미발행</span>
+                    )}
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
+                  {selectedEcr.reason}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 요구 내용</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
+                  {selectedEcr.content}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">영향 범위</h3>
+                <div className="flex flex-wrap gap-1.5">
+                  {selectedEcr.impact.map((imp) => (
+                    <span key={imp} className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getImpactBadgeStyle(imp))}>
+                      {imp}
+                    </span>
+                  ))}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
+                <Timeline history={selectedEcr.history} />
+              </section>
+            </>
+          ) : selectedEcn ? (
+            <>
+              <section>
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
+                  ECN 기본 정보
+                </h3>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">ECN번호</span>
+                    <span className="font-medium text-primary">{selectedEcn.id}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">상태</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcnStatusStyle(selectedEcn.status))}>
+                      {selectedEcn.status}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
+                    <span className="font-medium">{selectedEcn.target}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">설계담당</span>
+                    <span>{selectedEcn.designer}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">발행일자</span>
+                    <span>{selectedEcn.date}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">적용일자</span>
+                    <span>{selectedEcn.applyDate}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">관련 ECR</span>
+                    <button
+                      className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-warning/10 text-warning border border-warning/20 hover:bg-warning/20 transition-colors"
+                      onClick={() => navigateToLink(selectedEcn.ecrNo)}
+                    >
+                      {selectedEcn.ecrNo} <ArrowRight className="w-3 h-3 inline" />
+                    </button>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">통보 부서</span>
+                    <span className="text-xs">{selectedEcn.notifyDepts.join(", ")}</span>
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 전/후 비교</h3>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="bg-destructive/5 p-3 rounded-md border border-destructive/20">
+                    <div className="text-xs font-semibold text-destructive mb-1.5">
+                      변경 전 ({selectedEcn.drawingBefore})
+                    </div>
+                    <div className="text-sm whitespace-pre-wrap">{selectedEcn.before}</div>
+                  </div>
+                  <div className="bg-success/5 p-3 rounded-md border border-success/20">
+                    <div className="text-xs font-semibold text-success mb-1.5">
+                      변경 후 ({selectedEcn.drawingAfter})
+                    </div>
+                    <div className="text-sm whitespace-pre-wrap">{selectedEcn.after}</div>
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap">
+                  {selectedEcn.reason}
+                </div>
+                {selectedEcn.remark && (
+                  <p className="text-xs text-muted-foreground mt-2">비고: {selectedEcn.remark}</p>
+                )}
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
+                <Timeline history={selectedEcn.history} />
+              </section>
+            </>
+          ) : null}
+        </div>
+          </div>
+          <DialogFooter>
+            {selectedEcr && (
+              <>
+                <Button variant="outline" size="sm" onClick={() => { setDetailOpen(false); openEcrEditModal(selectedEcr.id); }}>
+                  <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                </Button>
+                {selectedEcr.status === "영향도분석" && (
+                  <>
+                    <Button size="sm" onClick={() => { setDetailOpen(false); openEcnIssueModal(selectedEcr.id); }}>
+                      <FileText className="w-3.5 h-3.5 mr-1" /> ECN 발행
+                    </Button>
+                    <Button variant="destructive" size="sm" onClick={() => { setDetailOpen(false); openRejectModal(selectedEcr.id); }}>
+                      <XCircle className="w-3.5 h-3.5 mr-1" /> 기각
+                    </Button>
+                  </>
+                )}
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ECR 등록/수정 모달 */}
+      <Dialog open={isEcrModalOpen} onOpenChange={setIsEcrModalOpen}>
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{isEcrEditMode ? "설계변경요청(ECR) 수정" : "설계변경요청(ECR) 등록"}</DialogTitle>
+            <DialogDescription>{isEcrEditMode ? "ECR 정보를 수정해요." : "새로운 설계변경요청을 등록해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-5 p-6">
+              {/* 좌측: 요청 정보 */}
+              <div className="md:w-[380px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                <h3 className="text-sm font-semibold pb-2 border-b">변경 요청 정보</h3>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">ECR번호</Label>
+                  <Input value={ecrForm.id || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청일자</Label>
+                    <Input
+                      type="date"
+                      value={ecrForm.date || ""}
+                      onChange={(e) => setEcrForm((p) => ({ ...p, date: e.target.value }))}
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">희망 적용시점</Label>
+                    <Select value={ecrForm.applyTiming || "즉시"} onValueChange={(v) => setEcrForm((p) => ({ ...p, applyTiming: v }))}>
+                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="즉시">즉시 적용</SelectItem>
+                        <SelectItem value="재고소진후">재고 소진 후</SelectItem>
+                        <SelectItem value="특정일자">특정 일자</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 유형 <span className="text-destructive">*</span></Label>
+                    <Select value={ecrForm.changeType || ""} onValueChange={(v) => setEcrForm((p) => ({ ...p, changeType: v as ChangeType }))}>
+                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {CHANGE_TYPES.map((t) => (
+                          <SelectItem key={t} value={t}>{t}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">긴급도</Label>
+                    <Select value={ecrForm.urgency || "보통"} onValueChange={(v) => setEcrForm((p) => ({ ...p, urgency: v as "보통" | "긴급" }))}>
+                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="보통">보통</SelectItem>
+                        <SelectItem value="긴급">긴급</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 품목/설비 <span className="text-destructive">*</span></Label>
+                  <Input
+                    value={ecrForm.target || ""}
+                    onChange={(e) => setEcrForm((p) => ({ ...p, target: e.target.value }))}
+                    placeholder="품목코드 / 설비명"
+                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                  />
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 도면번호</Label>
+                  <Input
+                    value={ecrForm.drawingNo || ""}
+                    onChange={(e) => setEcrForm((p) => ({ ...p, drawingNo: e.target.value }))}
+                    placeholder="DWG-XXX-XXX"
+                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청부서</Label>
+                    <Select value={ecrForm.reqDept || ""} onValueChange={(v) => setEcrForm((p) => ({ ...p, reqDept: v }))}>
+                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {DEPARTMENTS.map((d) => (
+                          <SelectItem key={d} value={d}>{d}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청자</Label>
+                    <Input
+                      value={ecrForm.requester || ""}
+                      onChange={(e) => setEcrForm((p) => ({ ...p, requester: e.target.value }))}
+                      placeholder="요청자명"
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* 우측: 변경 내용 */}
+              <div className="flex-1 min-w-0 flex flex-col gap-4">
+                <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50 flex-1">
+                  <h3 className="text-sm font-semibold pb-2 border-b">변경 내용</h3>
+
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 사유 <span className="text-destructive">*</span></Label>
+                    <Textarea
+                      value={ecrForm.reason || ""}
+                      onChange={(e) => setEcrForm((p) => ({ ...p, reason: e.target.value }))}
+                      placeholder="변경이 필요한 구체적인 사유를 기술해 주세요"
+                      className="min-h-[80px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 요구 내용 <span className="text-destructive">*</span></Label>
+                    <Textarea
+                      value={ecrForm.content || ""}
+                      onChange={(e) => setEcrForm((p) => ({ ...p, content: e.target.value }))}
+                      placeholder="어떻게 변경해야 하는지 구체적으로 기술해 주세요"
+                      className="min-h-[80px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">영향 범위 (해당 항목 체크)</Label>
+                    <div className="grid grid-cols-3 gap-2 mt-2">
+                      {IMPACT_OPTIONS.map((opt) => (
+                        <label
+                          key={opt.key}
+                          className="flex items-center gap-2 px-3 py-2 bg-background border rounded-md text-xs cursor-pointer hover:bg-muted/50 transition-colors"
+                        >
+                          <Checkbox
+                            checked={!!ecrImpactChecks[opt.key]}
+                            onCheckedChange={(c) =>
+                              setEcrImpactChecks((prev) => ({ ...prev, [opt.key]: !!c }))
+                            }
+                          />
+                          {opt.label}
+                        </label>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="space-y-2 bg-muted/30 p-4 rounded-lg border border-border/50">
+                  <h3 className="text-sm font-semibold pb-2 border-b flex items-center gap-2">
+                    <Paperclip className="w-3.5 h-3.5" /> 첨부파일
+                  </h3>
+                  <div className="border-2 border-dashed border-border rounded-md p-4 text-center text-xs text-muted-foreground cursor-pointer hover:border-primary/50 hover:bg-muted/30 transition-colors">
+                    <Upload className="w-5 h-5 mx-auto mb-1.5 text-muted-foreground" />
+                    클릭하여 파일 첨부 (불량 사진, 참고 도면 등)
+                  </div>
+                </div>
+              </div>
+        </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEcrModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveEcr}>
+              <Save className="w-4 h-4 mr-1.5" /> 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ECN 발행 모달 */}
+      <Dialog open={isEcnModalOpen} onOpenChange={setIsEcnModalOpen}>
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>ECN 발행 (설계변경통지)</DialogTitle>
+            <DialogDescription>ECR 기반으로 설계변경통지를 발행해요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-5 p-6">
+              {/* 좌측 */}
+              <div className="md:w-[380px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                <h3 className="text-sm font-semibold pb-2 border-b">ECN 기본 정보</h3>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">ECN번호</Label>
+                  <Input value={ecnForm.id || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">관련 ECR번호</Label>
+                  <Input value={ecnForm.ecrNo || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">발행일자</Label>
+                    <Input
+                      type="date"
+                      value={ecnForm.date || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, date: e.target.value }))}
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">적용일자 <span className="text-destructive">*</span></Label>
+                    <Input
+                      type="date"
+                      value={ecnForm.applyDate || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, applyDate: e.target.value }))}
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 품목/설비</Label>
+                  <Input value={ecnForm.target || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">도면번호 (변경 후)</Label>
+                  <Input
+                    value={ecnForm.drawingAfter || ""}
+                    onChange={(e) => setEcnForm((p) => ({ ...p, drawingAfter: e.target.value }))}
+                    placeholder="변경된 도면번호 (Rev 포함)"
+                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                  />
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설계 담당</Label>
+                  <Select value={ecnForm.designer || ""} onValueChange={(v) => setEcnForm((p) => ({ ...p, designer: v }))}>
+                    <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                      <SelectValue placeholder="선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {DESIGNERS.map((d) => (
+                        <SelectItem key={d} value={d}>{d}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              {/* 우측 */}
+              <div className="flex-1 min-w-0 flex flex-col gap-4">
+                <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                  <h3 className="text-sm font-semibold pb-2 border-b">변경 전/후 비교</h3>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 전 (AS-IS)</Label>
+                    <Textarea
+                      value={ecnForm.before || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, before: e.target.value }))}
+                      placeholder="변경 전 상태/사양/치수 등"
+                      className="min-h-[80px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 후 (TO-BE) <span className="text-destructive">*</span></Label>
+                    <Textarea
+                      value={ecnForm.after || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, after: e.target.value }))}
+                      placeholder="변경 후 상태/사양/치수 등"
+                      className="min-h-[80px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                  <h3 className="text-sm font-semibold pb-2 border-b">통보 대상 부서</h3>
+                  <div className="grid grid-cols-3 gap-2">
+                    {NOTIFY_DEPTS.map((dept) => (
+                      <label
+                        key={dept.key}
+                        className="flex items-center gap-2 px-3 py-2 bg-background border rounded-md text-xs cursor-pointer hover:bg-muted/50 transition-colors"
+                      >
+                        <Checkbox
+                          checked={!!ecnNotifyChecks[dept.key]}
+                          onCheckedChange={(c) =>
+                            setEcnNotifyChecks((prev) => ({ ...prev, [dept.key]: !!c }))
+                          }
+                        />
+                        {dept.label}
+                      </label>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                  <h3 className="text-sm font-semibold pb-2 border-b">변경 사유 및 비고</h3>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 사유 요약</Label>
+                    <Textarea
+                      value={ecnForm.reason || ""}
+                      readOnly
+                      className="min-h-[60px] resize-y text-xs sm:text-sm bg-muted cursor-not-allowed"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">비고</Label>
+                    <Textarea
+                      value={ecnForm.remark || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, remark: e.target.value }))}
+                      placeholder="추가 참고사항"
+                      className="min-h-[60px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+                </div>
+              </div>
+        </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEcnModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveEcn}>
+              <FileText className="w-4 h-4 mr-1.5" /> ECN 발행
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 기각 모달 */}
+      <Dialog open={isRejectModalOpen} onOpenChange={setIsRejectModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg flex items-center gap-2">
+              <XCircle className="w-5 h-5 text-destructive" />
+              ECR 기각
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              {rejectTargetId}을 기각 처리해요.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 sm:space-y-4">
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">기각 사유 <span className="text-destructive">*</span></Label>
+              <Textarea
+                value={rejectReason}
+                onChange={(e) => setRejectReason(e.target.value)}
+                placeholder="기각 사유를 상세히 입력해 주세요"
+                className="min-h-[100px] resize-y text-xs sm:text-sm"
+              />
+            </div>
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setIsRejectModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              취소
+            </Button>
+            <Button variant="destructive" onClick={handleRejectSubmit} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              <XCircle className="w-4 h-4 mr-2" /> 기각 처리
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={tsEcr.open}
+        onOpenChange={tsEcr.setOpen}
+        tableName={tsEcr.tableName}
+        settingsId={tsEcr.settingsId}
+        defaultVisibleKeys={tsEcr.defaultVisibleKeys}
+        onSave={tsEcr.applySettings}
+      />
+      <TableSettingsModal
+        open={tsEcn.open}
+        onOpenChange={tsEcn.setOpen}
+        tableName={tsEcn.tableName}
+        settingsId={tsEcn.settingsId}
+        defaultVisibleKeys={tsEcn.defaultVisibleKeys}
+        onSave={tsEcn.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/design/design-request/page.tsx b/frontend/app/(main)/COMPANY_8/design/design-request/page.tsx
new file mode 100644
index 00000000..e83c22b3
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/design/design-request/page.tsx
@@ -0,0 +1,781 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import {
+  Plus,
+  Pencil,
+  Trash2,
+  Calendar,
+  Upload,
+  Ruler,
+  FileText,
+  Loader2,
+  Inbox,
+  Save,
+  Settings2,
+} from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import {
+  getDesignRequestList,
+  createDesignRequest,
+  updateDesignRequest,
+  deleteDesignRequest,
+} from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+
+// ========== 타입 ==========
+interface HistoryItem {
+  id?: string;
+  step: string;
+  history_date: string;
+  user_name: string;
+  description: string;
+}
+
+interface DesignRequest {
+  id: string;
+  request_no: string;
+  source_type: string;
+  request_date: string;
+  due_date: string;
+  design_type: string;
+  priority: string;
+  status: string;
+  approval_step: string;
+  target_name: string;
+  customer: string;
+  req_dept: string;
+  requester: string;
+  designer: string;
+  order_no: string;
+  spec: string;
+  change_type: string;
+  drawing_no: string;
+  urgency: string;
+  reason: string;
+  content: string;
+  apply_timing: string;
+  review_memo: string;
+  project_id: string;
+  ecn_no: string;
+  created_date: string;
+  updated_date: string;
+  writer: string;
+  company_code: string;
+  history: HistoryItem[];
+  impact: string[];
+}
+
+// ========== 스타일 맵 ==========
+const STATUS_STYLES: Record<string, string> = {
+  신규접수: "bg-muted text-foreground",
+  접수대기: "bg-muted text-foreground",
+  검토중: "bg-warning/10 text-warning",
+  설계진행: "bg-info/10 text-info",
+  설계검토: "bg-primary/10 text-primary",
+  출도완료: "bg-success/10 text-success",
+  반려: "bg-destructive/10 text-destructive",
+  종료: "bg-muted text-muted-foreground",
+};
+
+const TYPE_STYLES: Record<string, string> = {
+  신규설계: "bg-info/10 text-info",
+  유사설계: "bg-success/10 text-success",
+  개조설계: "bg-warning/10 text-warning",
+};
+
+const PRIORITY_STYLES: Record<string, string> = {
+  긴급: "bg-destructive/10 text-destructive",
+  높음: "bg-warning/10 text-warning",
+  보통: "bg-muted text-foreground",
+  낮음: "bg-success/10 text-success",
+};
+
+const STATUS_PROGRESS: Record<string, number> = {
+  신규접수: 0,
+  접수대기: 0,
+  검토중: 20,
+  설계진행: 50,
+  설계검토: 80,
+  출도완료: 100,
+  반려: 0,
+  종료: 100,
+};
+
+function getProgressColor(p: number) {
+  if (p >= 100) return "bg-success";
+  if (p >= 60) return "bg-warning";
+  if (p >= 20) return "bg-info";
+  return "bg-muted";
+}
+
+function getProgressTextColor(p: number) {
+  if (p >= 100) return "text-success";
+  if (p >= 60) return "text-warning";
+  if (p >= 20) return "text-info";
+  return "text-muted-foreground";
+}
+
+const INITIAL_FORM = {
+  request_no: "",
+  request_date: "",
+  due_date: "",
+  design_type: "",
+  priority: "보통",
+  target_name: "",
+  customer: "",
+  req_dept: "",
+  requester: "",
+  designer: "",
+  order_no: "",
+  spec: "",
+  drawing_no: "",
+  content: "",
+};
+
+// ========== Grid Columns ==========
+const DR_GRID_COLUMNS = [
+  { key: "request_no", label: "의뢰번호" },
+  { key: "design_type", label: "유형" },
+  { key: "status", label: "상태" },
+  { key: "priority", label: "우선순위" },
+  { key: "target_name", label: "설비/제품명" },
+  { key: "customer", label: "고객명" },
+  { key: "designer", label: "설계담당" },
+  { key: "due_date", label: "납기" },
+  { key: "progress", label: "진행률" },
+];
+
+// ========== 메인 컴포넌트 ==========
+export default function DesignRequestPage() {
+  const ts = useTableSettings("c16-design-request", "dsn_design_request", DR_GRID_COLUMNS);
+  const [requests, setRequests] = useState<DesignRequest[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [detailOpen, setDetailOpen] = useState(false);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [form, setForm] = useState(INITIAL_FORM);
+
+  const today = useMemo(() => new Date(), []);
+
+  // 데이터 조회
+  const fetchRequests = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string> = { source_type: "dr" };
+      const res = await getDesignRequestList(params);
+      if (res.success && res.data) {
+        setRequests(res.data);
+      } else {
+        setRequests([]);
+      }
+    } catch {
+      setRequests([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchRequests();
+  }, [fetchRequests]);
+
+  // 클라이언트 사이드 필터링 (DynamicSearchFilter)
+  const filteredRequests = useMemo(() => {
+    if (searchFilters.length === 0) return requests;
+    return requests.filter((item) => {
+      for (const f of searchFilters) {
+        const val = item[f.columnName as keyof DesignRequest];
+        const strVal = val !== undefined && val !== null ? (Array.isArray(val) ? val.join(",") : String(val)) : "";
+        if (f.operator === "contains") {
+          if (!strVal.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (strVal !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(strVal)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && strVal < from) return false;
+          if (to && strVal > to) return false;
+        }
+      }
+      return true;
+    });
+  }, [requests, searchFilters]);
+
+  const selectedItem = useMemo(() => {
+    if (!selectedId) return null;
+    return requests.find((r) => r.id === selectedId) || null;
+  }, [selectedId, requests]);
+
+  const statusCounts = useMemo(() => {
+    return {
+      접수대기: requests.filter((r) => r.status === "접수대기" || r.status === "신규접수").length,
+      설계진행: requests.filter((r) => r.status === "설계진행").length,
+      출도완료: requests.filter((r) => r.status === "출도완료").length,
+    };
+  }, [requests]);
+
+
+  // 채번: 기존 데이터 기반으로 다음 번호 생성
+  const generateNextNo = useCallback(() => {
+    const year = new Date().getFullYear();
+    const existing = requests.filter((r) => r.request_no?.startsWith(`DR-${year}-`));
+    const maxNum = existing.reduce((max, r) => {
+      const parts = r.request_no?.split("-");
+      const num = parts?.length >= 3 ? parseInt(parts[2]) : 0;
+      return num > max ? num : max;
+    }, 0);
+    return `DR-${year}-${String(maxNum + 1).padStart(4, "0")}`;
+  }, [requests]);
+
+  const handleOpenRegister = useCallback(() => {
+    setIsEditMode(false);
+    setEditingId(null);
+    setForm({
+      ...INITIAL_FORM,
+      request_no: generateNextNo(),
+      request_date: new Date().toISOString().split("T")[0],
+    });
+    setModalOpen(true);
+  }, [generateNextNo]);
+
+  const handleOpenEdit = useCallback(() => {
+    if (!selectedItem) return;
+    setIsEditMode(true);
+    setEditingId(selectedItem.id);
+    setForm({
+      request_no: selectedItem.request_no || "",
+      request_date: selectedItem.request_date || "",
+      due_date: selectedItem.due_date || "",
+      design_type: selectedItem.design_type || "",
+      priority: selectedItem.priority || "보통",
+      target_name: selectedItem.target_name || "",
+      customer: selectedItem.customer || "",
+      req_dept: selectedItem.req_dept || "",
+      requester: selectedItem.requester || "",
+      designer: selectedItem.designer || "",
+      order_no: selectedItem.order_no || "",
+      spec: selectedItem.spec || "",
+      drawing_no: selectedItem.drawing_no || "",
+      content: selectedItem.content || "",
+    });
+    setDetailOpen(false);
+    setModalOpen(true);
+  }, [selectedItem]);
+
+  const handleSave = useCallback(async () => {
+    if (!form.target_name.trim()) { toast.error("설비/제품명을 입력해 주세요."); return; }
+    if (!form.design_type) { toast.error("의뢰 유형을 선택해 주세요."); return; }
+    if (!form.due_date) { toast.error("납기를 입력해 주세요."); return; }
+    if (!form.spec.trim()) { toast.error("요구사양을 입력해 주세요."); return; }
+
+    setSaving(true);
+    try {
+      const payload = {
+        request_no: form.request_no,
+        source_type: "dr",
+        request_date: form.request_date,
+        due_date: form.due_date,
+        design_type: form.design_type,
+        priority: form.priority,
+        target_name: form.target_name,
+        customer: form.customer,
+        req_dept: form.req_dept,
+        requester: form.requester,
+        designer: form.designer,
+        order_no: form.order_no,
+        spec: form.spec,
+        drawing_no: form.drawing_no,
+        content: form.content,
+      };
+
+      let res;
+      if (isEditMode && editingId) {
+        res = await updateDesignRequest(editingId, payload);
+      } else {
+        res = await createDesignRequest({
+          ...payload,
+          status: "신규접수",
+          history: [{
+            step: "신규접수",
+            history_date: form.request_date || new Date().toISOString().split("T")[0],
+            user_name: form.requester || "시스템",
+            description: `${form.req_dept || ""}에서 설계의뢰 등록`,
+          }],
+        });
+      }
+
+      if (res.success) {
+        toast.success(isEditMode ? "수정되었어요." : "등록되었어요.");
+        setModalOpen(false);
+        await fetchRequests();
+        if (isEditMode && editingId) {
+          setSelectedId(editingId);
+        } else if (res.data?.id) {
+          setSelectedId(res.data.id);
+        }
+      } else {
+        toast.error(res.message || "저장에 실패했어요.");
+      }
+    } catch (err: any) {
+      toast.error("저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  }, [form, isEditMode, editingId, fetchRequests]);
+
+  const handleDelete = useCallback(async () => {
+    if (!selectedId || !selectedItem) return;
+    const displayNo = selectedItem.request_no || selectedId;
+    if (!confirm(`${displayNo} 설계의뢰를 삭제할까요?`)) return;
+
+    try {
+      const res = await deleteDesignRequest(selectedId);
+      if (res.success) {
+        toast.success("삭제되었어요.");
+        setSelectedId(null);
+        setDetailOpen(false);
+        await fetchRequests();
+      } else {
+        toast.error(res.message || "삭제에 실패했어요.");
+      }
+    } catch (err: any) {
+      toast.error("삭제에 실패했어요.");
+    }
+  }, [selectedId, selectedItem, fetchRequests]);
+
+  const getDueDateInfo = useCallback(
+    (dueDate: string) => {
+      if (!dueDate) return { text: "-", color: "text-muted-foreground" };
+      const due = new Date(dueDate);
+      const diff = Math.ceil((due.getTime() - today.getTime()) / 86400000);
+      if (diff < 0) return { text: `${Math.abs(diff)}일 초과`, color: "text-destructive" };
+      if (diff === 0) return { text: "오늘", color: "text-warning" };
+      if (diff <= 7) return { text: `${diff}일 남음`, color: "text-warning" };
+      return { text: `${diff}일 남음`, color: "text-success" };
+    },
+    [today]
+  );
+
+  const getProgress = useCallback((status: string) => {
+    return STATUS_PROGRESS[status] ?? 0;
+  }, []);
+
+  const handleRowClick = useCallback((id: string) => {
+    setSelectedId(id);
+    setDetailOpen(true);
+  }, []);
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 검색 필터 */}
+      <div className="shrink-0">
+        <DynamicSearchFilter
+          tableName="dsn_design_request"
+          filterId="c16-design-request"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredRequests.length}
+        />
+      </div>
+
+      {/* 현황 카드 */}
+      <div className="grid grid-cols-3 gap-3 shrink-0">
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">접수대기</div>
+          <div className="text-xl font-bold text-info">{statusCounts.접수대기}</div>
+        </div>
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">설계진행</div>
+          <div className="text-xl font-bold text-warning">{statusCounts.설계진행}</div>
+        </div>
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">출도완료</div>
+          <div className="text-xl font-bold text-success">{statusCounts.출도완료}</div>
+        </div>
+      </div>
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold">설계의뢰 관리</h2>
+          <Badge variant="secondary" className="font-mono">{filteredRequests.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" onClick={handleOpenRegister}>
+            <Plus className="w-4 h-4 mr-1.5" /> 설계의뢰 등록
+          </Button>
+          <div className="mx-1 h-6 w-px bg-border" />
+          <Button variant="outline" size="sm" disabled={!selectedId} onClick={handleOpenEdit}>
+            <Pencil className="w-4 h-4 mr-1.5" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 테이블 영역 */}
+      <div className="flex-1 flex flex-col overflow-hidden border rounded-lg bg-card">
+        <EDataTable<DesignRequest>
+          columns={ts.visibleColumns.map((col): EDataTableColumn<DesignRequest> => ({
+            key: col.key,
+            label: col.label,
+            width: col.key === "request_no" ? "w-[100px]" : col.key === "design_type" ? "w-[70px]" : col.key === "status" ? "w-[70px]" : col.key === "priority" ? "w-[60px]" : col.key === "customer" ? "w-[90px]" : col.key === "designer" ? "w-[70px]" : col.key === "due_date" ? "w-[85px]" : col.key === "progress" ? "w-[65px]" : undefined,
+            align: (col.key === "design_type" || col.key === "status" || col.key === "priority" || col.key === "progress") ? "center" : undefined,
+            render: col.key === "request_no"
+              ? (val: any) => <span className="text-[11px] font-semibold text-primary">{val || "-"}</span>
+              : col.key === "design_type"
+              ? (val: any) => val ? <Badge className={cn("text-[9px]", TYPE_STYLES[val])}>{val}</Badge> : <span>-</span>
+              : col.key === "status"
+              ? (val: any) => <Badge className={cn("text-[9px]", STATUS_STYLES[val])}>{val}</Badge>
+              : col.key === "priority"
+              ? (val: any) => <Badge className={cn("text-[9px]", PRIORITY_STYLES[val])}>{val}</Badge>
+              : col.key === "progress"
+              ? (_val: any, row: DesignRequest) => {
+                  const progress = STATUS_PROGRESS[row.status] ?? 0;
+                  return (
+                    <div className="flex items-center gap-1.5">
+                      <div className="h-1.5 w-12 overflow-hidden rounded-full bg-muted">
+                        <div className={cn("h-full rounded-full transition-all", getProgressColor(progress))} style={{ width: `${progress}%` }} />
+                      </div>
+                      <span className={cn("text-[10px] font-semibold", getProgressTextColor(progress))}>{progress}%</span>
+                    </div>
+                  );
+                }
+              : undefined,
+          }))}
+          data={ts.groupData(filteredRequests)}
+          loading={loading}
+          emptyMessage="등록된 설계의뢰가 없어요"
+          selectedId={selectedId}
+          onSelect={(id) => setSelectedId(id)}
+          onRowClick={(row) => handleRowClick(row.id)}
+          draggableColumns={false}
+        />
+      </div>
+
+      {/* 상세 정보 다이얼로그 */}
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="max-w-[900px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{selectedItem ? `설계의뢰 상세 — ${selectedItem.request_no}` : "설계의뢰 상세"}</DialogTitle>
+            <DialogDescription>설계의뢰의 상세 정보를 확인해요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        {selectedItem && (
+          <div className="space-y-4">
+            {/* 기본 정보 */}
+            <div>
+              <div className="mb-2 text-xs font-bold">
+                <FileText className="mr-1 inline h-3.5 w-3.5" />기본 정보
+              </div>
+              <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-lg border bg-muted/10 p-3">
+                <InfoRow label="의뢰번호" value={<span className="font-semibold text-primary">{selectedItem.request_no || "-"}</span>} />
+                <InfoRow label="상태" value={<Badge className={cn("text-[10px]", STATUS_STYLES[selectedItem.status])}>{selectedItem.status}</Badge>} />
+                <InfoRow label="유형" value={selectedItem.design_type ? <Badge className={cn("text-[10px]", TYPE_STYLES[selectedItem.design_type])}>{selectedItem.design_type}</Badge> : "-"} />
+                <InfoRow label="우선순위" value={<Badge className={cn("text-[10px]", PRIORITY_STYLES[selectedItem.priority])}>{selectedItem.priority}</Badge>} />
+                <InfoRow label="설비/제품명" value={selectedItem.target_name || "-"} />
+                <InfoRow label="고객명" value={selectedItem.customer || "-"} />
+                <InfoRow label="의뢰부서 / 의뢰자" value={`${selectedItem.req_dept || "-"} / ${selectedItem.requester || "-"}`} />
+                <InfoRow label="설계담당" value={selectedItem.designer || "미배정"} />
+                <InfoRow label="의뢰일자" value={selectedItem.request_date || "-"} />
+                <InfoRow
+                  label="납기"
+                  value={
+                    selectedItem.due_date ? (
+                      <span>
+                        {selectedItem.due_date}{" "}
+                        <span className={cn("text-[11px]", getDueDateInfo(selectedItem.due_date).color)}>
+                          ({getDueDateInfo(selectedItem.due_date).text})
+                        </span>
+                      </span>
+                    ) : "-"
+                  }
+                />
+                <InfoRow label="수주번호" value={selectedItem.order_no || "-"} />
+                <InfoRow
+                  label="진행률"
+                  value={
+                    (() => {
+                      const progress = getProgress(selectedItem.status);
+                      return (
+                        <div className="flex items-center gap-2">
+                          <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
+                            <div className={cn("h-full rounded-full", getProgressColor(progress))} style={{ width: `${progress}%` }} />
+                          </div>
+                          <span className={cn("text-xs font-bold", getProgressTextColor(progress))}>{progress}%</span>
+                        </div>
+                      );
+                    })()
+                  }
+                />
+              </div>
+            </div>
+
+            {/* 요구사양 */}
+            <div>
+              <div className="mb-2 text-xs font-bold">
+                <FileText className="mr-1 inline h-3.5 w-3.5" />요구사양
+              </div>
+              <div className="rounded-lg border bg-muted/10 p-3">
+                <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed">{selectedItem.spec || "-"}</pre>
+                {selectedItem.drawing_no && (
+                  <div className="mt-2 text-xs">
+                    <span className="text-muted-foreground">참조 도면: </span>
+                    <span className="text-primary">{selectedItem.drawing_no}</span>
+                  </div>
+                )}
+                {selectedItem.content && (
+                  <div className="mt-1 text-xs">
+                    <span className="text-muted-foreground">비고: </span>{selectedItem.content}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* 진행 이력 */}
+            {selectedItem.history && selectedItem.history.length > 0 && (
+              <div>
+                <div className="mb-2 text-xs font-bold">
+                  <Calendar className="mr-1 inline h-3.5 w-3.5" />진행 이력
+                </div>
+                <div className="space-y-0">
+                  {selectedItem.history.map((h, idx) => {
+                    const isLast = idx === selectedItem.history.length - 1;
+                    const isDone = h.step === "출도완료" || h.step === "종료";
+                    return (
+                      <div key={h.id || idx} className="flex gap-3">
+                        <div className="flex flex-col items-center">
+                          <div
+                            className={cn(
+                              "mt-1 h-2.5 w-2.5 shrink-0 rounded-full border-2",
+                              isLast && !isDone
+                                ? "border-primary bg-primary"
+                                : isDone || !isLast
+                                  ? "border-success bg-success"
+                                  : "border-muted-foreground bg-muted-foreground"
+                            )}
+                          />
+                          {!isLast && <div className="w-px flex-1 bg-border" />}
+                        </div>
+                        <div className="pb-3">
+                          <Badge className={cn("text-[9px]", STATUS_STYLES[h.step])}>{h.step}</Badge>
+                          <div className="mt-0.5 text-xs">{h.description}</div>
+                          <div className="text-[10px] text-muted-foreground">{h.history_date} · {h.user_name}</div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+          </div>
+          <DialogFooter>
+            {selectedItem && (
+              <>
+                <Button variant="outline" size="sm" onClick={handleOpenEdit}>
+                  <Pencil className="mr-1 h-3.5 w-3.5" />수정
+                </Button>
+                <Button variant="outline" size="sm" className="text-destructive hover:text-destructive" onClick={handleDelete}>
+                  <Trash2 className="mr-1 h-3.5 w-3.5" />삭제
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "설계의뢰 수정" : "설계의뢰 등록"}</DialogTitle>
+            <DialogDescription>{isEditMode ? "설계의뢰 정보를 수정해요." : "새 설계의뢰를 등록해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-6 p-6">
+          {/* 좌측: 기본 정보 */}
+          <div className="md:w-[420px] shrink-0 space-y-4">
+            <h3 className="text-sm font-semibold pb-2 border-b">의뢰 기본 정보</h3>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰번호</Label>
+              <Input value={form.request_no} readOnly className="h-9 bg-muted cursor-not-allowed" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰일자</Label>
+                <Input type="date" value={form.request_date} onChange={(e) => setForm((p) => ({ ...p, request_date: e.target.value }))} className="h-9" />
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">납기 <span className="text-destructive">*</span></Label>
+                <Input type="date" value={form.due_date} onChange={(e) => setForm((p) => ({ ...p, due_date: e.target.value }))} className="h-9" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰 유형 <span className="text-destructive">*</span></Label>
+                <Select value={form.design_type} onValueChange={(v) => setForm((p) => ({ ...p, design_type: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["신규설계", "유사설계", "개조설계"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">우선순위 <span className="text-destructive">*</span></Label>
+                <Select value={form.priority} onValueChange={(v) => setForm((p) => ({ ...p, priority: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설비/제품명 <span className="text-destructive">*</span></Label>
+              <Input value={form.target_name} onChange={(e) => setForm((p) => ({ ...p, target_name: e.target.value }))} placeholder="설비 또는 제품명 입력" className="h-9" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰부서</Label>
+                <Select value={form.req_dept} onValueChange={(v) => setForm((p) => ({ ...p, req_dept: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["영업팀", "기획팀", "생산팀", "품질팀"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰자</Label>
+                <Input value={form.requester} onChange={(e) => setForm((p) => ({ ...p, requester: e.target.value }))} placeholder="의뢰자명" className="h-9" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">고객명</Label>
+                <Input value={form.customer} onChange={(e) => setForm((p) => ({ ...p, customer: e.target.value }))} placeholder="고객/거래처명" className="h-9" />
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">수주번호</Label>
+                <Input value={form.order_no} onChange={(e) => setForm((p) => ({ ...p, order_no: e.target.value }))} placeholder="관련 수주번호" className="h-9" />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설계담당자</Label>
+              <Select value={form.designer} onValueChange={(v) => setForm((p) => ({ ...p, designer: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  {["이설계", "박도면", "최기구", "김전장"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* 우측: 상세 내용 */}
+          <div className="flex min-w-0 flex-1 flex-col gap-4">
+            <h3 className="text-sm font-semibold pb-2 border-b">요구사양 및 설명</h3>
+            <div className="flex-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요구사양 <span className="text-destructive">*</span></Label>
+              <Textarea
+                value={form.spec}
+                onChange={(e) => setForm((p) => ({ ...p, spec: e.target.value }))}
+                placeholder={"고객 요구사양 또는 설비 사양을 상세히 기술해주세요\n\n예시:\n- 작업 대상: SUS304 Φ20 파이프\n- 가공 방식: 자동 절단 + 면취\n- 생산 속도: 60EA/분\n- 치수 공차: ±0.1mm"}
+                className="min-h-[180px]"
+              />
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">참조 도면번호</Label>
+              <Input value={form.drawing_no} onChange={(e) => setForm((p) => ({ ...p, drawing_no: e.target.value }))} placeholder="유사 설비명 또는 참조 도면번호" className="h-9" />
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">비고</Label>
+              <Textarea value={form.content} onChange={(e) => setForm((p) => ({ ...p, content: e.target.value }))} placeholder="기타 참고 사항" className="min-h-[70px]" rows={3} />
+            </div>
+            <div>
+              <h3 className="text-sm font-semibold pb-2 border-b mb-2">첨부파일</h3>
+              <div className="cursor-pointer rounded-lg border-2 border-dashed p-5 text-center transition-colors hover:border-primary hover:bg-accent/50">
+                <Upload className="mx-auto h-6 w-6 text-muted-foreground" />
+                <div className="mt-1.5 text-sm text-muted-foreground">클릭하여 파일 첨부 (사양서, 도면, 사진 등)</div>
+              </div>
+            </div>
+          </div>
+        </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setModalOpen(false)} disabled={saving}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
+
+// ========== 정보 행 서브컴포넌트 ==========
+function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex items-start gap-1">
+      <span className="min-w-[80px] shrink-0 text-[11px] text-muted-foreground">{label}</span>
+      <span className="text-xs font-medium">{value}</span>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/design/my-work/page.tsx b/frontend/app/(main)/COMPANY_8/design/my-work/page.tsx
new file mode 100644
index 00000000..8c136cb9
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/design/my-work/page.tsx
@@ -0,0 +1,1958 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import {
+  Circle,
+  CheckCircle2,
+  AlertCircle,
+  Clock,
+  LayoutGrid,
+  List,
+  Timer,
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  ChevronUp,
+  Plus,
+  Trash2,
+  Paperclip,
+  ShoppingCart,
+  Handshake,
+  FileText,
+  Image as ImageIcon,
+  Ruler,
+  Box,
+  FolderOpen,
+  Upload,
+  X,
+  Pencil,
+  Calendar,
+  Search,
+  RotateCcw,
+  ClipboardList,
+  FileEdit,
+  Inbox,
+  Loader2,
+  PointerIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Progress } from "@/components/ui/progress";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Slider } from "@/components/ui/slider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { useAuth } from "@/hooks/useAuth";
+import {
+  getMyWork,
+  updateTask,
+  createWorkLog,
+  deleteWorkLog,
+  createSubItem,
+  updateSubItem,
+  deleteSubItem,
+  createPurchaseReq,
+  createCoopReq,
+  addCoopResponse,
+} from "@/lib/api/design";
+
+// ========== 타입 ==========
+interface SubItem {
+  id: number | string;
+  _id?: string;
+  name: string;
+  weight: number;
+  progress: number;
+  status: string;
+}
+interface Attachment {
+  id: number;
+  name: string;
+  type: string;
+  size: string;
+}
+interface PurchaseReq {
+  id: number | string;
+  _id?: string;
+  item: string;
+  qty: number;
+  unit: string;
+  reason: string;
+  status: string;
+}
+interface CoopResponse {
+  date: string;
+  user: string;
+  content: string;
+}
+interface CoopReq {
+  id: string;
+  _id?: string;
+  toUser: string;
+  toDept: string;
+  title: string;
+  desc: string;
+  status: string;
+  dueDate: string;
+  responses: CoopResponse[];
+}
+interface WorkLog {
+  _id?: string;
+  startDt: string;
+  endDt: string;
+  hours: number;
+  desc: string;
+  subItemId: number | string | null;
+  attachments: Attachment[];
+  purchaseReqs: PurchaseReq[];
+  coopReqs: CoopReq[];
+}
+interface Task {
+  _id?: string;
+  name: string;
+  category: string;
+  assignee: string;
+  start: string;
+  end: string;
+  status: string;
+  progress: number;
+  priority: string;
+  subItems: SubItem[];
+  workLogs: WorkLog[];
+}
+interface Project {
+  id: string;
+  project_id?: string;
+  name: string;
+  customer: string;
+  status: string;
+  tasks: Task[];
+}
+interface MyTask extends Task {
+  projectId: string;
+  projectName: string;
+}
+
+// ========== 유틸 ==========
+const USER_INFO: Record<string, { role: string; color: string }> = {
+  최기구: { role: "기구설계 파트", color: "bg-primary" },
+  이설계: { role: "기구설계 파트", color: "bg-chart-2" },
+  김전장: { role: "전장설계 파트", color: "bg-warning" },
+  박도면: { role: "기구설계 파트", color: "bg-chart-3" },
+  정SW: { role: "SW개발 파트", color: "bg-destructive" },
+  한조립: { role: "조립/시운전 파트", color: "bg-chart-1" },
+  박구매: { role: "구매/조달 파트", color: "bg-info" },
+  팀장: { role: "설계팀 팀장", color: "bg-success" },
+};
+
+const USERS = Object.keys(USER_INFO);
+
+function calcHours(s: string, e: string): number {
+  if (!s || !e) return 0;
+  const d = (new Date(e).getTime() - new Date(s).getTime()) / 3600000;
+  return d > 0 ? Math.round(d * 10) / 10 : 0;
+}
+
+function calcAutoProgress(task: Task): number {
+  if (!task.subItems?.length) return task.progress;
+  const tw = task.subItems.reduce((s, i) => s + i.weight, 0);
+  if (!tw) return 0;
+  return Math.round(
+    task.subItems.reduce((s, i) => s + (i.progress * i.weight) / tw, 0)
+  );
+}
+
+function fmtDtShort(dt: string) {
+  if (!dt) return "";
+  return dt.substring(5, 10) + " " + dt.substring(11, 16);
+}
+
+function getWeekStart(d: Date): Date {
+  const r = new Date(d);
+  const day = r.getDay();
+  r.setDate(r.getDate() - day + (day === 0 ? -6 : 1));
+  r.setHours(0, 0, 0, 0);
+  return r;
+}
+
+function getFileIcon(type: string) {
+  switch (type) {
+    case "image":
+      return <ImageIcon className="h-4 w-4" />;
+    case "drawing":
+      return <Ruler className="h-4 w-4" />;
+    case "3d":
+      return <Box className="h-4 w-4" />;
+    case "document":
+      return <FileText className="h-4 w-4" />;
+    default:
+      return <FolderOpen className="h-4 w-4" />;
+  }
+}
+
+function getFileType(name: string): string {
+  const ext = (name.split(".").pop() || "").toLowerCase();
+  if (["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(ext))
+    return "image";
+  if (["dwg", "dxf"].includes(ext)) return "drawing";
+  if (["step", "stp", "igs", "stl"].includes(ext)) return "3d";
+  if (
+    ["pdf", "doc", "docx", "xlsx", "xls", "pptx", "txt", "csv"].includes(ext)
+  )
+    return "document";
+  return "other";
+}
+
+function getProgressColor(p: number) {
+  if (p >= 80) return "text-success";
+  if (p >= 40) return "text-primary";
+  if (p > 0) return "text-warning";
+  return "text-muted-foreground";
+}
+
+function getProgressBg(p: number) {
+  if (p >= 80) return "bg-success";
+  if (p >= 40) return "bg-primary";
+  if (p > 0) return "bg-warning";
+  return "bg-muted";
+}
+
+const STATUS_STYLES: Record<string, string> = {
+  대기: "bg-muted text-foreground",
+  진행중: "bg-primary/10 text-primary",
+  검토중: "bg-warning/10 text-warning",
+  완료: "bg-success/10 text-success",
+  지연: "bg-destructive/10 text-destructive",
+};
+
+const PRIORITY_STYLES: Record<string, string> = {
+  긴급: "bg-destructive/10 text-destructive",
+  높음: "bg-warning/10 text-warning",
+  보통: "bg-muted text-foreground",
+  낮음: "bg-success/10 text-success",
+};
+
+const PR_STATUS_STYLES: Record<string, string> = {
+  요청: "bg-destructive/10 text-destructive",
+  견적중: "bg-warning/10 text-warning",
+  발주완료: "bg-primary/10 text-primary",
+  입고완료: "bg-success/10 text-success",
+};
+
+const CR_STATUS_STYLES: Record<string, string> = {
+  요청: "bg-warning/10 text-warning",
+  접수: "bg-warning/10 text-warning",
+  진행중: "bg-primary/10 text-primary",
+  완료: "bg-success/10 text-success",
+};
+
+const CR_NEXT: Record<string, string> = {
+  요청: "접수",
+  접수: "진행중",
+  진행중: "완료",
+};
+
+// ========== API 응답 매핑 ==========
+function mapApiTaskToTask(api: any): Task {
+  const subItems: SubItem[] = (api.sub_items || []).map((s: any) => ({
+    id: s.id,
+    _id: String(s.id),
+    name: s.name || "",
+    weight: Number(s.weight) || 0,
+    progress: Number(s.progress) || 0,
+    status: s.status || "대기",
+  }));
+  const workLogs: WorkLog[] = (api.work_logs || []).map((w: any) => {
+    const attachments: Attachment[] = (w.attachments || []).map((a: any) => ({
+      id: a.id ?? a.file_name?.length ?? 0,
+      name: a.file_name || a.name || "",
+      type: a.file_type || getFileType(a.file_name || ""),
+      size: a.file_size || a.size || "",
+    }));
+    const purchaseReqs: PurchaseReq[] = (w.purchase_reqs || []).map((pr: any) => ({
+      id: pr.id,
+      _id: pr.id ? String(pr.id) : undefined,
+      item: pr.item || "",
+      qty: Number(pr.qty) || 1,
+      unit: pr.unit || "EA",
+      reason: pr.reason || "",
+      status: pr.status || "요청",
+    }));
+    const coopReqs: CoopReq[] = (w.coop_reqs || []).map((c: any) => ({
+      id: c.id || `CR-${String(c.id)}`,
+      _id: c.id ? String(c.id) : undefined,
+      toUser: c.to_user || "",
+      toDept: c.to_dept || "",
+      title: c.title || "",
+      desc: c.description || c.desc || "",
+      status: c.status || "요청",
+      dueDate: c.due_date || "",
+      responses: (c.responses || []).map((r: any) => ({
+        date: r.response_date || r.date || "",
+        user: r.user_name || r.user || "",
+        content: r.content || "",
+      })),
+    }));
+    return {
+      _id: w.id ? String(w.id) : undefined,
+      startDt: w.start_dt || "",
+      endDt: w.end_dt || "",
+      hours: Number(w.hours) || 0,
+      desc: w.description || w.desc || "",
+      subItemId: w.sub_item_id ?? null,
+      attachments,
+      purchaseReqs,
+      coopReqs,
+    };
+  });
+  return {
+    _id: api.id ? String(api.id) : undefined,
+    name: api.name || "",
+    category: api.category || "",
+    assignee: api.assignee || "",
+    start: api.start_date || api.start || "",
+    end: api.end_date || api.end || "",
+    status: api.status || "대기",
+    progress: Number(api.progress) || 0,
+    priority: api.priority || "보통",
+    subItems,
+    workLogs,
+  };
+}
+
+function mapApiTasksToProjects(apiTasks: any[]): Project[] {
+  const projectMap = new Map<string, Project>();
+  for (const api of apiTasks) {
+    const pId = api.project_id || api.project_no;
+    const pNo = api.project_no || api.project_id || "";
+    if (!projectMap.has(pId)) {
+      projectMap.set(pId, {
+        id: pNo,
+        project_id: pId,
+        name: api.project_name || "",
+        customer: api.project_customer || "",
+        status: api.project_status || "진행중",
+        tasks: [],
+      });
+    }
+    projectMap.get(pId)!.tasks.push(mapApiTaskToTask(api));
+  }
+  return Array.from(projectMap.values());
+}
+
+// ========== 메인 컴포넌트 ==========
+export default function MyWorkPage() {
+  const { userName } = useAuth();
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentUser, setCurrentUser] = useState(userName || "최기구");
+  const [viewMode, setViewMode] = useState<"kanban" | "list" | "timesheet">("kanban");
+  const [timesheetWeekOffset, setTimesheetWeekOffset] = useState(0);
+
+  // 필터
+  const [filterProject, setFilterProject] = useState("");
+  const [filterStatus, setFilterStatus] = useState("");
+  const [filterPriority, setFilterPriority] = useState("");
+  const [filterCategory, setFilterCategory] = useState("");
+  const [filterKeyword, setFilterKeyword] = useState("");
+
+  // 선택된 업무
+  const [selectedTaskKey, setSelectedTaskKey] = useState<string | null>(null);
+  const [selectedSubItemId, setSelectedSubItemId] = useState<number | string>("__unassigned__");
+
+  // 편집 상태
+  const [editingLogIdx, setEditingLogIdx] = useState<number>(-1);
+  const [editForm, setEditForm] = useState({ startDt: "", endDt: "", desc: "" });
+
+  // 수행항목 추가
+  const [newSiName, setNewSiName] = useState("");
+  const [newSiWeight, setNewSiWeight] = useState("");
+
+  // 모달
+  const [attModalOpen, setAttModalOpen] = useState(false);
+  const [prModalOpen, setPrModalOpen] = useState(false);
+  const [crModalOpen, setCrModalOpen] = useState(false);
+  const [modalLogIdx, setModalLogIdx] = useState(-1);
+  const [modalAttachments, setModalAttachments] = useState<Attachment[]>([]);
+  const [modalPurchaseReqs, setModalPurchaseReqs] = useState<PurchaseReq[]>([]);
+  const [modalCoopReqs, setModalCoopReqs] = useState<CoopReq[]>([]);
+
+  // 구매요청 폼
+  const [prForm, setPrForm] = useState({ item: "", qty: "1", unit: "EA", reason: "", status: "요청" });
+  // 협조요청 폼
+  const [crForm, setCrForm] = useState({ title: "", toUser: "", desc: "", dueDate: "" });
+
+  const today = useMemo(() => new Date(), []);
+  const todayStr = useMemo(() => {
+    const dn = ["일", "월", "화", "수", "목", "금", "토"];
+    return `${today.getFullYear()}.${String(today.getMonth() + 1).padStart(2, "0")}.${String(today.getDate()).padStart(2, "0")} (${dn[today.getDay()]})`;
+  }, [today]);
+
+  const projectsRef = React.useRef<Project[]>([]);
+  projectsRef.current = projects;
+
+  const fetchMyWork = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: { status?: string; project_id?: string } = {};
+      if (filterStatus && filterStatus !== "__all__") params.status = filterStatus;
+      if (filterProject && filterProject !== "__all__") {
+        const proj = projectsRef.current.find((p) => p.id === filterProject || p.project_id === filterProject);
+        if (proj?.project_id) params.project_id = proj.project_id;
+        else params.project_id = filterProject;
+      }
+      const res = await getMyWork(params);
+      if (res.success && res.data) {
+        setProjects(mapApiTasksToProjects(res.data));
+      } else {
+        setProjects([]);
+      }
+    } catch {
+      toast.error("업무 목록을 불러오는데 실패했어요.");
+      setProjects([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [filterStatus, filterProject]);
+
+  useEffect(() => {
+    if (userName) setCurrentUser(userName);
+  }, [userName]);
+
+  useEffect(() => {
+    fetchMyWork();
+  }, [fetchMyWork]);
+
+  const projectList = useMemo(() => {
+    const ids = new Set<string>();
+    projects.forEach((p) => ids.add(`${p.id}|${p.name}`));
+    return Array.from(ids).map((v) => {
+      const [id, name] = v.split("|");
+      return { id, name };
+    });
+  }, [projects]);
+
+  // 내 업무 목록
+  const myTasks = useMemo<MyTask[]>(() => {
+    const tasks: MyTask[] = [];
+    projects.forEach((p) =>
+      p.tasks.forEach((t) => {
+        if (t.assignee === currentUser)
+          tasks.push({ ...t, projectId: p.id, projectName: p.name });
+      })
+    );
+    return tasks;
+  }, [projects, currentUser]);
+
+  // 필터링된 업무
+  const filteredTasks = useMemo(() => {
+    return myTasks.filter((t) => {
+      if (filterProject && filterProject !== "__all__" && t.projectId !== filterProject) return false;
+      if (filterStatus && filterStatus !== "__all__" && t.status !== filterStatus) return false;
+      if (filterPriority && filterPriority !== "__all__" && (t.priority || "보통") !== filterPriority) return false;
+      if (filterCategory && filterCategory !== "__all__" && t.category !== filterCategory) return false;
+      if (filterKeyword && !t.name.toLowerCase().includes(filterKeyword.toLowerCase()) && !t.projectName.toLowerCase().includes(filterKeyword.toLowerCase())) return false;
+      return true;
+    });
+  }, [myTasks, filterProject, filterStatus, filterPriority, filterCategory, filterKeyword]);
+
+  // 수신된 협조요청
+  const receivedCoops = useMemo(() => {
+    const coops: (CoopReq & { projectId: string; projectName: string; taskName: string; fromUser: string })[] = [];
+    projects.forEach((p) =>
+      p.tasks.forEach((t) =>
+        (t.workLogs || []).forEach((wl) =>
+          (wl.coopReqs || []).forEach((cr) => {
+            if (cr.toUser === currentUser && cr.status !== "완료")
+              coops.push({ ...cr, projectId: p.id, projectName: p.name, taskName: t.name, fromUser: t.assignee });
+          })
+        )
+      )
+    );
+    return coops;
+  }, [projects, currentUser]);
+
+  // 선택된 업무 참조
+  const selectedTask = useMemo(() => {
+    if (!selectedTaskKey) return null;
+    const [pid, tname] = selectedTaskKey.split("||");
+    for (const p of projects) {
+      if (p.id === pid) {
+        const t = p.tasks.find((task) => task.name === tname);
+        if (t) return { task: t, projectId: p.id, projectName: p.name };
+      }
+    }
+    return null;
+  }, [selectedTaskKey, projects]);
+
+  // 통계
+  const stats = useMemo(() => {
+    const total = myTasks.length + receivedCoops.length;
+    const progress = myTasks.filter((t) => t.status === "진행중").length;
+    const done = myTasks.filter((t) => t.status === "완료").length;
+    const delay = myTasks.filter((t) => t.status !== "완료" && new Date(t.end) < today).length;
+    const ws = getWeekStart(today);
+    const we = new Date(ws);
+    we.setDate(we.getDate() + 6);
+    let wh = 0;
+    myTasks.forEach((t) =>
+      (t.workLogs || []).forEach((l) => {
+        const ld = new Date(l.startDt);
+        if (ld >= ws && ld <= we) wh += l.hours;
+      })
+    );
+    return { total, progress, done, delay, weekHours: wh };
+  }, [myTasks, receivedCoops, today]);
+
+  const handleSelectTask = useCallback((pid: string, tname: string) => {
+    setSelectedTaskKey(`${pid}||${tname}`);
+    setEditingLogIdx(-1);
+    setSelectedSubItemId("__unassigned__");
+  }, []);
+
+  const handleResetFilter = useCallback(() => {
+    setFilterProject("");
+    setFilterStatus("");
+    setFilterPriority("");
+    setFilterCategory("");
+    setFilterKeyword("");
+  }, []);
+
+  // 업무 데이터 변경 헬퍼
+  const updateProjects = useCallback((updater: (draft: Project[]) => void) => {
+    setProjects((prev) => {
+      const copy = JSON.parse(JSON.stringify(prev));
+      updater(copy);
+      return copy;
+    });
+  }, []);
+
+  const getTaskRef = useCallback(
+    (projectId: string, taskName: string) => {
+      for (const p of projects) {
+        if (p.id === projectId) {
+          return p.tasks.find((t) => t.name === taskName) || null;
+        }
+      }
+      return null;
+    },
+    [projects]
+  );
+
+  // 수행항목 추가
+  const handleAddSubItem = useCallback(async () => {
+    if (!selectedTask || !newSiName.trim()) return;
+    const w = parseInt(newSiWeight) || 0;
+    if (w <= 0) return;
+    const taskId = selectedTask.task._id;
+    if (!taskId) return;
+    const res = await createSubItem(taskId, { name: newSiName.trim(), weight: w, progress: 0, status: "대기" });
+    if (res.success) {
+      toast.success("수행항목이 추가되었어요.");
+      setNewSiName("");
+      setNewSiWeight("");
+      fetchMyWork();
+    } else {
+      toast.error(res.message || "수행항목 추가에 실패했어요.");
+    }
+  }, [selectedTask, newSiName, newSiWeight, fetchMyWork]);
+
+  // 수행항목 삭제
+  const handleDeleteSubItem = useCallback(
+    async (idx: number) => {
+      if (!selectedTask) return;
+      const si = selectedTask.task.subItems[idx];
+      const siId = si?._id ?? si?.id;
+      if (siId) {
+        const res = await deleteSubItem(String(siId));
+        if (res.success) {
+          toast.success("수행항목이 삭제되었어요.");
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "수행항목 삭제에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t) {
+                t.subItems.splice(idx, 1);
+                t.progress = calcAutoProgress(t);
+              }
+            }
+          }
+        });
+      }
+    },
+    [selectedTask, updateProjects, fetchMyWork]
+  );
+
+  // 수행항목 체크 토글
+  const handleToggleSubCheck = useCallback(
+    async (idx: number) => {
+      if (!selectedTask) return;
+      const si = selectedTask.task.subItems[idx];
+      const siId = si?._id ?? si?.id;
+      const newProgress = (si?.progress ?? 0) >= 100 ? 0 : 100;
+      const newStatus = newProgress >= 100 ? "완료" : "대기";
+      if (siId) {
+        const res = await updateSubItem(String(siId), { progress: newProgress, status: newStatus });
+        if (res.success) {
+          toast.success("수행항목이 업데이트되었어요.");
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "수행항목 업데이트에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t && t.subItems[idx]) {
+                t.subItems[idx].progress = newProgress;
+                t.subItems[idx].status = newStatus;
+                t.progress = calcAutoProgress(t);
+              }
+            }
+          }
+        });
+      }
+    },
+    [selectedTask, updateProjects, fetchMyWork]
+  );
+
+  // 수행항목 진행률 변경
+  const handleUpdateSubProgress = useCallback(
+    async (siId: number | string, val: number) => {
+      if (!selectedTask) return;
+      const si = selectedTask.task.subItems.find((s) => s.id === siId || s._id === String(siId));
+      const apiId = si?._id ?? si?.id;
+      if (apiId) {
+        const res = await updateSubItem(String(apiId), {
+          progress: val,
+          status: val >= 100 ? "완료" : val > 0 ? "진행중" : "대기",
+        });
+        if (res.success) {
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "진행률 업데이트에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t) {
+                const subSi = t.subItems.find((s) => s.id === siId || s._id === String(siId));
+                if (subSi) {
+                  subSi.progress = val;
+                  subSi.status = val >= 100 ? "완료" : val > 0 ? "진행중" : "대기";
+                  t.progress = calcAutoProgress(t);
+                }
+              }
+            }
+          }
+        });
+      }
+    },
+    [selectedTask, updateProjects, fetchMyWork]
+  );
+
+  // 수행기록 편집 시작
+  const handleStartEdit = useCallback(
+    (idx: number) => {
+      if (!selectedTask) return;
+      const log = selectedTask.task.workLogs[idx];
+      if (log) {
+        setEditForm({ startDt: log.startDt, endDt: log.endDt, desc: log.desc });
+      }
+      setEditingLogIdx(idx);
+    },
+    [selectedTask]
+  );
+
+  // 새 기록 추가 시작
+  const handleStartNewLog = useCallback(
+    (siId: number | string | null) => {
+      const now = new Date();
+      const ds = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+      setEditForm({ startDt: `${ds}T08:00`, endDt: `${ds}T17:00`, desc: "" });
+      setEditingLogIdx(-2);
+      if (siId === null) setSelectedSubItemId("__unassigned__");
+      else setSelectedSubItemId(siId);
+    },
+    []
+  );
+
+  // 기록 저장
+  const handleSaveLog = useCallback(
+    async (logIdx: number, siId: number | string | null) => {
+      if (!selectedTask) return;
+      if (!editForm.startDt || !editForm.endDt || !editForm.desc.trim()) return;
+      const hours = calcHours(editForm.startDt, editForm.endDt);
+      if (hours <= 0) return;
+      const taskId = selectedTask.task._id;
+      if (!taskId) return;
+      if (logIdx < 0) {
+        const res = await createWorkLog(taskId, {
+          start_dt: editForm.startDt,
+          end_dt: editForm.endDt,
+          hours,
+          description: editForm.desc.trim(),
+          sub_item_id: siId ?? null,
+        });
+        if (res.success) {
+          toast.success("작업일지가 등록되었어요.");
+          setEditingLogIdx(-1);
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "작업일지 등록에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t) {
+                t.workLogs[logIdx] = { ...t.workLogs[logIdx], startDt: editForm.startDt, endDt: editForm.endDt, hours, desc: editForm.desc.trim(), subItemId: siId, attachments: t.workLogs[logIdx].attachments || [], purchaseReqs: t.workLogs[logIdx].purchaseReqs || [], coopReqs: t.workLogs[logIdx].coopReqs || [] };
+              }
+            }
+          }
+        });
+        setEditingLogIdx(-1);
+      }
+    },
+    [selectedTask, editForm, updateProjects, fetchMyWork]
+  );
+
+  // 기록 삭제
+  const handleDeleteLog = useCallback(
+    async (idx: number) => {
+      if (!selectedTask) return;
+      const log = selectedTask.task.workLogs[idx];
+      const workLogId = log?._id;
+      if (workLogId) {
+        const res = await deleteWorkLog(String(workLogId));
+        if (res.success) {
+          toast.success("작업일지가 삭제되었어요.");
+          setEditingLogIdx(-1);
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "작업일지 삭제에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t) t.workLogs.splice(idx, 1);
+            }
+          }
+        });
+        setEditingLogIdx(-1);
+      }
+    },
+    [selectedTask, updateProjects, fetchMyWork]
+  );
+
+  // 모달: 첨부파일
+  const openAttModal = useCallback(
+    (logIdx: number) => {
+      if (!selectedTask) return;
+      setModalLogIdx(logIdx);
+      const atts = logIdx >= 0 ? [...(selectedTask.task.workLogs[logIdx]?.attachments || [])] : [];
+      setModalAttachments(atts);
+      setAttModalOpen(true);
+    },
+    [selectedTask]
+  );
+
+  const saveAttModal = useCallback(() => {
+    if (!selectedTask || modalLogIdx < 0) return;
+    updateProjects((draft) => {
+      for (const p of draft) {
+        if (p.id === selectedTask.projectId) {
+          const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+          if (t && t.workLogs[modalLogIdx]) t.workLogs[modalLogIdx].attachments = [...modalAttachments];
+        }
+      }
+    });
+    setAttModalOpen(false);
+  }, [selectedTask, modalLogIdx, modalAttachments, updateProjects]);
+
+  // 모달: 구매요청
+  const openPrModal = useCallback(
+    (logIdx: number) => {
+      if (!selectedTask) return;
+      setModalLogIdx(logIdx);
+      const prs = logIdx >= 0 ? [...(selectedTask.task.workLogs[logIdx]?.purchaseReqs || []).map((p) => ({ ...p }))] : [];
+      setModalPurchaseReqs(prs);
+      setPrModalOpen(true);
+    },
+    [selectedTask]
+  );
+
+  const savePrModal = useCallback(async () => {
+    if (!selectedTask || modalLogIdx < 0) return;
+    const workLog = selectedTask.task.workLogs[modalLogIdx];
+    const workLogId = workLog?._id;
+    if (workLogId) {
+      const newItems = modalPurchaseReqs.filter((pr) => !pr._id);
+      for (const pr of newItems) {
+        const res = await createPurchaseReq(String(workLogId), {
+          item: pr.item,
+          qty: pr.qty,
+          unit: pr.unit,
+          reason: pr.reason,
+          status: pr.status,
+        });
+        if (!res.success) {
+          toast.error(res.message || "구매요청 등록에 실패했어요.");
+          return;
+        }
+      }
+      if (newItems.length > 0) toast.success("구매요청이 등록되었어요.");
+    }
+    updateProjects((draft) => {
+      for (const p of draft) {
+        if (p.id === selectedTask.projectId) {
+          const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+          if (t && t.workLogs[modalLogIdx]) t.workLogs[modalLogIdx].purchaseReqs = [...modalPurchaseReqs];
+        }
+      }
+    });
+    setPrModalOpen(false);
+    if (workLogId && newItems.length > 0) fetchMyWork();
+  }, [selectedTask, modalLogIdx, modalPurchaseReqs, updateProjects, fetchMyWork]);
+
+  // 모달: 협조요청
+  const openCrModal = useCallback(
+    (logIdx: number) => {
+      if (!selectedTask) return;
+      setModalLogIdx(logIdx);
+      const crs = logIdx >= 0 ? [...(selectedTask.task.workLogs[logIdx]?.coopReqs || []).map((c) => ({ ...c, responses: [...(c.responses || [])] }))] : [];
+      setModalCoopReqs(crs);
+      setCrModalOpen(true);
+    },
+    [selectedTask]
+  );
+
+  const saveCrModal = useCallback(async () => {
+    if (!selectedTask || modalLogIdx < 0) return;
+    const workLog = selectedTask.task.workLogs[modalLogIdx];
+    const workLogId = workLog?._id;
+    if (workLogId) {
+      const newItems = modalCoopReqs.filter((cr) => !cr._id);
+      for (const cr of newItems) {
+        const res = await createCoopReq(String(workLogId), {
+          to_user: cr.toUser,
+          to_dept: cr.toDept,
+          title: cr.title,
+          description: cr.desc,
+          due_date: cr.dueDate,
+        });
+        if (!res.success) {
+          toast.error(res.message || "협조요청 등록에 실패했어요.");
+          return;
+        }
+      }
+      if (newItems.length > 0) toast.success("협조요청이 등록되었어요.");
+    }
+    updateProjects((draft) => {
+      for (const p of draft) {
+        if (p.id === selectedTask.projectId) {
+          const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+          if (t && t.workLogs[modalLogIdx]) t.workLogs[modalLogIdx].coopReqs = [...modalCoopReqs];
+        }
+      }
+    });
+    setCrModalOpen(false);
+    if (workLogId && modalCoopReqs.filter((cr) => !cr._id).length > 0) fetchMyWork();
+  }, [selectedTask, modalLogIdx, modalCoopReqs, updateProjects, fetchMyWork]);
+
+  // ===== 칸반 보드 =====
+  const kanbanCols = useMemo(() => {
+    const cols: Record<string, MyTask[]> = { 대기: [], 진행중: [], 검토중: [], 완료: [] };
+    filteredTasks.forEach((t) => {
+      if (cols[t.status]) cols[t.status].push(t);
+    });
+    return cols;
+  }, [filteredTasks]);
+
+  const kanbanConfig = [
+    { key: "대기", icon: <Circle className="h-3.5 w-3.5" />, color: "border-muted-foreground/30", titleColor: "text-muted-foreground" },
+    { key: "진행중", icon: <Circle className="h-3.5 w-3.5 text-primary" />, color: "border-primary", titleColor: "text-primary" },
+    { key: "검토중", icon: <Circle className="h-3.5 w-3.5 text-warning" />, color: "border-warning", titleColor: "text-warning" },
+    { key: "완료", icon: <CheckCircle2 className="h-3.5 w-3.5 text-success" />, color: "border-success", titleColor: "text-success" },
+  ];
+
+  // ===== 타임시트 =====
+  const timesheetData = useMemo(() => {
+    const ws = getWeekStart(today);
+    ws.setDate(ws.getDate() + timesheetWeekOffset * 7);
+    const we = new Date(ws);
+    we.setDate(we.getDate() + 6);
+    const dn = ["월", "화", "수", "목", "금", "토", "일"];
+    const wds: Date[] = [];
+    for (let i = 0; i < 7; i++) {
+      const d = new Date(ws);
+      d.setDate(d.getDate() + i);
+      wds.push(d);
+    }
+    const ph: Record<string, { id: string; name: string; days: number[]; total: number; tasks: Record<string, number[]> }> = {};
+    myTasks.forEach((t) => {
+      const k = `${t.projectId}|${t.projectName}`;
+      if (!ph[k]) ph[k] = { id: t.projectId, name: t.projectName, days: [0, 0, 0, 0, 0, 0, 0], total: 0, tasks: {} };
+      (t.workLogs || []).forEach((l) => {
+        const ld = new Date(l.startDt);
+        const di = wds.findIndex((d) => d.toDateString() === ld.toDateString());
+        if (di >= 0) {
+          ph[k].days[di] += l.hours;
+          ph[k].total += l.hours;
+          if (!ph[k].tasks[t.name]) ph[k].tasks[t.name] = [0, 0, 0, 0, 0, 0, 0];
+          ph[k].tasks[t.name][di] += l.hours;
+        }
+      });
+    });
+    const dt = [0, 0, 0, 0, 0, 0, 0];
+    Object.values(ph).forEach((p) => p.days.forEach((h, i) => (dt[i] += h)));
+    const gt = dt.reduce((s, h) => s + h, 0);
+    return { ws, we, dn, wds, ph, dt, gt };
+  }, [myTasks, today, timesheetWeekOffset]);
+
+  // ========== 렌더링 ==========
+  if (loading && projects.length === 0) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 p-3">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        <span className="text-sm text-muted-foreground">업무 목록을 불러오는 중...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 헤더 */}
+      <div className="flex shrink-0 items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="flex flex-col gap-0.5">
+            <div className="flex items-center gap-1 text-[11px] text-muted-foreground">
+              <span>설계관리</span>
+              <ChevronRight className="h-3 w-3" />
+              <span className="text-foreground">내업무현황</span>
+            </div>
+            <h1 className="text-lg font-bold leading-tight">내 업무 현황</h1>
+          </div>
+          <div className="flex items-center gap-2 rounded-lg border bg-card px-2.5 py-1.5">
+            <Avatar className="h-7 w-7">
+              <AvatarFallback className={cn("text-xs font-bold text-white", USER_INFO[currentUser]?.color || "bg-primary")}>
+                {currentUser.charAt(0)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="leading-tight">
+              <div className="text-xs font-semibold">{currentUser}</div>
+              <div className="text-[10px] text-muted-foreground">{USER_INFO[currentUser]?.role}</div>
+            </div>
+            <Select value={currentUser} onValueChange={(v) => { setCurrentUser(v); setSelectedTaskKey(null); }}>
+              <SelectTrigger className="h-6 w-20 border-0 bg-transparent text-xs text-primary" size="xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {USERS.map((u) => (
+                  <SelectItem key={u} value={u}>{u}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <div className="flex items-center gap-1.5 rounded-lg border bg-card px-2.5 py-1.5 text-xs text-muted-foreground">
+          <Calendar className="h-3.5 w-3.5" />
+          {todayStr}
+        </div>
+      </div>
+
+      {/* 검색 필터 */}
+      <div className="shrink-0 rounded-lg border border-border bg-card px-5 py-4">
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] items-end gap-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트</span>
+            <Select value={filterProject} onValueChange={setFilterProject}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 프로젝트" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 프로젝트</SelectItem>
+                {projectList.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>{p.id} {p.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">진행상태</span>
+            <Select value={filterStatus} onValueChange={setFilterStatus}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 상태" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 상태</SelectItem>
+                {["대기", "진행중", "검토중", "완료"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">우선순위</span>
+            <Select value={filterPriority} onValueChange={setFilterPriority}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 우선순위" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 우선순위</SelectItem>
+                {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무유형</span>
+            <Select value={filterCategory} onValueChange={setFilterCategory}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 유형" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 유형</SelectItem>
+                {["기구설계", "전장설계", "SW개발", "구매/조달", "조립/시운전", "검토/승인"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">검색어</span>
+            <div className="relative">
+              <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={filterKeyword}
+                onChange={(e) => setFilterKeyword(e.target.value)}
+                placeholder="업무명 검색..."
+                className="h-9 pl-8 text-xs"
+              />
+            </div>
+          </div>
+          <div className="flex items-end justify-end gap-2">
+            <Button variant="outline" size="sm" className="h-9" onClick={handleResetFilter}>
+              <RotateCcw className="mr-1.5 h-4 w-4" />
+              초기화
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* 통계 요약 바 */}
+      <div className="shrink-0 rounded-lg border border-border bg-card px-5 py-3">
+        <div className="flex flex-wrap items-center gap-5">
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10">
+              <ClipboardList className="h-3.5 w-3.5 text-primary" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.total}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">전체</span>
+            </div>
+          </div>
+          <div className="h-4 w-px bg-border" />
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-warning/10">
+              <Circle className="h-3.5 w-3.5 text-warning" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.progress}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">진행중</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-success/10">
+              <CheckCircle2 className="h-3.5 w-3.5 text-success" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.done}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">완료</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className={cn("flex h-7 w-7 items-center justify-center rounded-md", stats.delay > 0 ? "bg-destructive/10" : "bg-muted")}>
+              <AlertCircle className={cn("h-3.5 w-3.5", stats.delay > 0 ? "text-destructive" : "text-muted-foreground")} />
+            </div>
+            <div className="leading-none">
+              <span className={cn("text-sm font-bold", stats.delay > 0 && "text-destructive")}>{stats.delay}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">지연</span>
+            </div>
+          </div>
+          <div className="h-4 w-px bg-border" />
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-info/10">
+              <Clock className="h-3.5 w-3.5 text-info" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.weekHours}h</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">이번주 투입</span>
+            </div>
+          </div>
+          <div className="ml-auto flex items-center gap-2">
+            <span className="rounded-full border border-primary/15 bg-primary/8 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+              {filteredTasks.length}건
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* 메인 영역 */}
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1 rounded-lg">
+        {/* 왼쪽: 업무 현황 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
+            <div className="flex shrink-0 items-center justify-between border-b bg-muted/50 px-4 py-2.5">
+              <div className="flex items-center gap-2">
+                <ClipboardList className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-semibold">업무 현황</span>
+                <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                  {filteredTasks.length}건
+                </span>
+              </div>
+              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as any)}>
+                <TabsList className="h-7">
+                  <TabsTrigger value="kanban" className="h-5 gap-1 px-2 text-[11px]">
+                    <LayoutGrid className="h-3 w-3" />보드
+                  </TabsTrigger>
+                  <TabsTrigger value="list" className="h-5 gap-1 px-2 text-[11px]">
+                    <List className="h-3 w-3" />목록
+                  </TabsTrigger>
+                  <TabsTrigger value="timesheet" className="h-5 gap-1 px-2 text-[11px]">
+                    <Timer className="h-3 w-3" />타임시트
+                  </TabsTrigger>
+                </TabsList>
+              </Tabs>
+            </div>
+            <ScrollArea className="flex-1">
+              <div className="p-2">
+                {viewMode === "kanban" && (
+                  <div className="grid grid-cols-4 gap-2">
+                    {kanbanConfig.map((col) => {
+                      const tasks = kanbanCols[col.key] || [];
+                      const extraCount = col.key === "대기" ? receivedCoops.length : 0;
+                      return (
+                        <div key={col.key} className="flex flex-col rounded-lg border bg-muted/30 p-2">
+                          <div className={cn("mb-2 flex items-center justify-between rounded-md border-l-[3px] bg-card px-2 py-1.5", col.color)}>
+                            <span className={cn("flex items-center gap-1.5 text-xs font-bold", col.titleColor)}>
+                              {col.icon}{col.key}
+                            </span>
+                            <span className="rounded-full border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] font-bold text-muted-foreground">{tasks.length + extraCount}</span>
+                          </div>
+                          <div className="flex flex-1 flex-col gap-1.5 overflow-y-auto">
+                            {col.key === "대기" && receivedCoops.map((cr, i) => (
+                              <div key={`coop-${i}`} className="rounded-md border border-warning/30 bg-warning/10 p-2">
+                                <div className="text-[10px] text-warning">
+                                  <Handshake className="mr-0.5 inline h-3 w-3" /> 협조 · {cr.fromUser}
+                                </div>
+                                <div className="text-xs font-semibold">{cr.title}</div>
+                                <div className="mt-0.5 text-[10px] text-muted-foreground">{cr.projectName}</div>
+                                <div className={cn("mt-0.5 text-[10px]", new Date(cr.dueDate) < today ? "font-semibold text-destructive" : "text-success")}>
+                                  <Calendar className="mr-0.5 inline h-3 w-3" />{cr.dueDate}
+                                </div>
+                              </div>
+                            ))}
+                            {tasks.map((t) => {
+                              const isDelay = t.status !== "완료" && new Date(t.end) < today;
+                              const dd = Math.ceil((new Date(t.end).getTime() - today.getTime()) / 86400000);
+                              const dueText = isDelay ? `${Math.abs(dd)}일 초과` : dd === 0 ? "오늘" : dd <= 3 ? `D-${dd}` : t.end;
+                              const attCount = (t.workLogs || []).reduce((n, wl) => n + (wl.attachments || []).length, 0);
+                              const coopCount = (t.workLogs || []).reduce((n, wl) => n + (wl.coopReqs || []).filter((c) => c.status !== "완료").length, 0);
+                              const isSelected = selectedTaskKey === `${t.projectId}||${t.name}`;
+                              return (
+                                <div
+                                  key={`${t.projectId}-${t.name}`}
+                                  className={cn(
+                                    "cursor-pointer rounded-md border bg-card p-2 transition-all",
+                                    isSelected && "border-primary ring-2 ring-primary/20"
+                                  )}
+                                  onClick={() => handleSelectTask(t.projectId, t.name)}
+                                >
+                                  <div className="text-[10px] text-muted-foreground">{t.projectId} · {t.projectName}</div>
+                                  <div className="text-xs font-semibold">{t.name}</div>
+                                  <div className="mt-1 flex items-center justify-between">
+                                    <Badge className={cn("h-4 px-1.5 text-[9px]", PRIORITY_STYLES[t.priority || "보통"])}>{t.priority || "보통"}</Badge>
+                                    <span className="text-[10px] text-muted-foreground">{t.category}</span>
+                                  </div>
+                                  <div className="mt-1 flex items-center gap-1.5">
+                                    <div className="h-1 flex-1 overflow-hidden rounded-full bg-muted">
+                                      <div className={cn("h-full rounded-full", getProgressBg(t.progress))} style={{ width: `${t.progress}%` }} />
+                                    </div>
+                                    <span className={cn("text-[10px] font-semibold", getProgressColor(t.progress))}>{t.progress}%</span>
+                                  </div>
+                                  <div className={cn("mt-0.5 text-[10px]", isDelay ? "font-semibold text-destructive" : dd <= 3 ? "text-warning" : "text-success")}>
+                                    <Calendar className="mr-0.5 inline h-3 w-3" />{dueText}
+                                  </div>
+                                  {(coopCount > 0 || attCount > 0) && (
+                                    <div className="mt-1 flex gap-1">
+                                      {coopCount > 0 && <Badge variant="outline" className="h-4 gap-0.5 px-1 text-[9px]"><Handshake className="h-2.5 w-2.5" />{coopCount}</Badge>}
+                                      {attCount > 0 && <Badge variant="outline" className="h-4 gap-0.5 px-1 text-[9px]"><Paperclip className="h-2.5 w-2.5" />{attCount}</Badge>}
+                                    </div>
+                                  )}
+                                </div>
+                              );
+                            })}
+                            {tasks.length === 0 && extraCount === 0 && (
+                              <div className="py-3 text-center text-[11px] text-muted-foreground">업무가 없어요</div>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+
+                {viewMode === "list" && (
+                  <EDataTable
+                    columns={[
+                      { key: "projectId", label: "프로젝트", width: "w-[90px]", render: (_v, row) => (
+                        <div className="text-[10px]">
+                          <span className="font-semibold text-primary">{row.projectId}</span>
+                          <br />
+                          <span className="text-muted-foreground">{row.projectName}</span>
+                        </div>
+                      )},
+                      { key: "name", label: "업무명" },
+                      { key: "category", label: "유형", width: "w-[65px]" },
+                      { key: "status", label: "상태", width: "w-[55px]", align: "center", render: (_v, row) => {
+                        const isDelay = row.status !== "완료" && new Date(row.end) < today;
+                        const displayStatus = isDelay ? "지연" : row.status;
+                        return <Badge className={cn("text-[10px]", STATUS_STYLES[displayStatus])}>{displayStatus}</Badge>;
+                      }},
+                      { key: "end", label: "종료일", width: "w-[80px]", render: (v, row) => {
+                        const isDelay = row.status !== "완료" && new Date(row.end) < today;
+                        return <span className={cn("text-[11px]", isDelay && "font-semibold text-destructive")}>{v}</span>;
+                      }},
+                      { key: "progress", label: "진행률", width: "w-[70px]", sortable: true, render: (v) => (
+                        <div className="flex items-center gap-1.5">
+                          <div className="h-1 w-12 overflow-hidden rounded-full bg-muted">
+                            <div className={cn("h-full rounded-full", getProgressBg(v))} style={{ width: `${v}%` }} />
+                          </div>
+                          <span className="text-[10px]">{v}%</span>
+                        </div>
+                      )},
+                    ] as EDataTableColumn<MyTask>[]}
+                    data={[...filteredTasks].sort((a, b) => {
+                      const ad = a.status !== "완료" && new Date(a.end) < today;
+                      const bd = b.status !== "완료" && new Date(b.end) < today;
+                      if (ad && !bd) return -1;
+                      if (!ad && bd) return 1;
+                      const ord: Record<string, number> = { 진행중: 0, 대기: 1, 검토중: 2, 완료: 3 };
+                      return (ord[a.status] ?? 9) - (ord[b.status] ?? 9);
+                    })}
+                    rowKey={(row) => `${row.projectId}||${row.name}`}
+                    selectedId={selectedTaskKey}
+                    onRowClick={(row) => handleSelectTask(row.projectId, row.name)}
+                    emptyMessage="검색 결과가 없어요"
+                    showPagination={false}
+                    draggableColumns={false}
+                  />
+                )}
+
+                {viewMode === "timesheet" && (
+                  <div>
+                    <div className="mb-2 flex items-center gap-2">
+                      <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setTimesheetWeekOffset((p) => p - 1)}>
+                        <ChevronLeft className="h-3 w-3" />
+                      </Button>
+                      <span className="text-sm font-semibold">
+                        <Calendar className="mr-1 inline h-3.5 w-3.5" />
+                        {timesheetData.ws.getMonth() + 1}/{timesheetData.ws.getDate()} ~ {timesheetData.we.getMonth() + 1}/{timesheetData.we.getDate()}
+                      </span>
+                      <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setTimesheetWeekOffset((p) => p + 1)}>
+                        <ChevronRight className="h-3 w-3" />
+                      </Button>
+                      {timesheetWeekOffset !== 0 && (
+                        <Button variant="outline" size="sm" className="h-7 text-xs text-primary" onClick={() => setTimesheetWeekOffset(0)}>이번주</Button>
+                      )}
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        총 <strong className="text-primary">{timesheetData.gt}h</strong>
+                      </span>
+                    </div>
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="min-w-[120px] text-[11px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">프로젝트/업무</TableHead>
+                          {timesheetData.wds.map((d, i) => (
+                            <TableHead
+                              key={i}
+                              className={cn(
+                                "text-center text-[10px]",
+                                i >= 5 && "bg-destructive/5",
+                                d.toDateString() === today.toDateString() && "bg-primary/5 text-primary"
+                              )}
+                            >
+                              {timesheetData.dn[i]}
+                              <br />
+                              <span className="text-[9px]">{d.getMonth() + 1}/{d.getDate()}</span>
+                            </TableHead>
+                          ))}
+                          <TableHead className="text-center text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">합계</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {Object.keys(timesheetData.ph).length === 0 && (
+                          <TableRow>
+                            <TableCell colSpan={9} className="py-8 text-center text-[13px] text-muted-foreground">기록이 없어요</TableCell>
+                          </TableRow>
+                        )}
+                        {Object.values(timesheetData.ph).map((p) => (
+                          <React.Fragment key={p.id}>
+                            <TableRow className="bg-muted/50">
+                              <TableCell className="text-[10px] font-bold text-primary">{p.id} {p.name}</TableCell>
+                              {p.days.map((v, i) => (
+                                <TableCell key={i} className={cn("text-center text-[11px] font-semibold", i >= 5 && "bg-destructive/5", v > 0 ? "" : "text-muted-foreground/30")}>
+                                  {v > 0 ? `${v}h` : "-"}
+                                </TableCell>
+                              ))}
+                              <TableCell className="text-center text-[13px] font-bold text-primary">{p.total}h</TableCell>
+                            </TableRow>
+                            {Object.entries(p.tasks).map(([tn, days]) => {
+                              const tt = days.reduce((s, v) => s + v, 0);
+                              return (
+                                <TableRow key={tn}>
+                                  <TableCell className="pl-4 text-[10px] text-muted-foreground">└ {tn}</TableCell>
+                                  {days.map((v, i) => (
+                                    <TableCell key={i} className={cn("text-center text-[10px]", i >= 5 && "bg-destructive/5", v > 0 ? "" : "text-muted-foreground/30")}>
+                                      {v > 0 ? `${v}h` : "-"}
+                                    </TableCell>
+                                  ))}
+                                  <TableCell className="text-center text-[10px] font-semibold">{tt}h</TableCell>
+                                </TableRow>
+                              );
+                            })}
+                          </React.Fragment>
+                        ))}
+                        <TableRow className="bg-primary/5 font-bold">
+                          <TableCell className="text-[11px]">합계</TableCell>
+                          {timesheetData.dt.map((v, i) => (
+                            <TableCell key={i} className={cn("text-center text-[11px]", i >= 5 && "bg-destructive/5", v > 0 ? "text-primary" : "text-muted-foreground/30")}>
+                              {v > 0 ? `${v}h` : "-"}
+                            </TableCell>
+                          ))}
+                          <TableCell className="text-center text-sm font-bold text-primary">{timesheetData.gt}h</TableCell>
+                        </TableRow>
+                      </TableBody>
+                    </Table>
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 오른쪽: 상세 패널 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
+            {!selectedTask ? (
+              <div className="flex h-full flex-col items-center justify-center gap-3 text-muted-foreground">
+                <div className="flex h-14 w-14 items-center justify-center rounded-full border-2 border-dashed border-border">
+                  <PointerIcon className="h-6 w-6 text-muted-foreground/50" />
+                </div>
+                <div className="text-center">
+                  <p className="text-sm font-medium">업무를 선택해주세요</p>
+                  <p className="text-xs text-muted-foreground/60">왼쪽 목록에서 업무를 클릭하면 상세 정보가 표시돼요</p>
+                </div>
+              </div>
+            ) : (
+              <>
+                {/* 상세 헤더 */}
+                <div className="flex shrink-0 items-center justify-between border-b bg-muted/50 px-3 py-2">
+                  <h3 className="text-[13px] font-bold">{selectedTask.task.name}</h3>
+                  <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => setSelectedTaskKey(null)}>
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+
+                {/* 업무 정보 바 */}
+                <div className="shrink-0 border-b bg-muted/10 px-3 py-2">
+                  <div className="grid grid-cols-[auto_1fr_auto_1fr] gap-x-3 gap-y-0.5 text-xs">
+                    <span className="text-muted-foreground">프로젝트</span>
+                    <span className="font-semibold text-primary">{selectedTask.projectId} {selectedTask.projectName}</span>
+                    <span className="text-muted-foreground">상태</span>
+                    <span className="flex items-center gap-1.5">
+                      <Badge className={cn("text-[10px]", STATUS_STYLES[selectedTask.task.status])}>{selectedTask.task.status}</Badge>
+                      {selectedTask.task.subItems.length > 0 && <Badge variant="outline" className="text-[9px]">자동</Badge>}
+                    </span>
+                    <span className="text-muted-foreground">유형</span>
+                    <span className="font-semibold">{selectedTask.task.category}</span>
+                    <span className="text-muted-foreground">기간</span>
+                    <span className="font-semibold">{selectedTask.task.start} ~ {selectedTask.task.end}</span>
+                  </div>
+                  <div className="mt-1.5 flex items-center gap-2">
+                    <Progress value={selectedTask.task.subItems.length > 0 ? calcAutoProgress(selectedTask.task) : selectedTask.task.progress} className="h-1.5 flex-1" />
+                    <span className={cn("text-sm font-bold", getProgressColor(selectedTask.task.subItems.length > 0 ? calcAutoProgress(selectedTask.task) : selectedTask.task.progress))}>
+                      {selectedTask.task.subItems.length > 0 ? calcAutoProgress(selectedTask.task) : selectedTask.task.progress}%
+                    </span>
+                  </div>
+                </div>
+
+                {/* 수행항목 + 기록 분할 */}
+                <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+                  {/* 수행항목 */}
+                  <ResizablePanel defaultSize={40} minSize={20}>
+                    <div className="flex h-full flex-col">
+                      <div className="shrink-0 border-b bg-muted/50 px-3 py-1.5">
+                        <h3 className="text-[13px] font-bold">수행항목</h3>
+                      </div>
+                      <ScrollArea className="flex-1">
+                        {/* 추가 입력 */}
+                        <div className="flex gap-1 border-b bg-muted/10 p-2">
+                          <Input value={newSiName} onChange={(e) => setNewSiName(e.target.value)} placeholder="수행항목 추가..." className="h-6 flex-1 text-xs" />
+                          <Input value={newSiWeight} onChange={(e) => setNewSiWeight(e.target.value)} placeholder="%" type="number" className="h-6 w-10 text-xs" min={1} max={100} />
+                          <Button size="sm" className="h-6 px-2 text-[10px]" onClick={handleAddSubItem}>
+                            <Plus className="mr-0.5 h-3 w-3" />추가
+                          </Button>
+                        </div>
+
+                        {/* 수행항목 리스트 */}
+                        {selectedTask.task.subItems.map((si, idx) => {
+                          const done = si.progress >= 100;
+                          const siLogs = selectedTask.task.workLogs.filter((wl) => wl.subItemId == si.id || String(wl.subItemId) === String(si.id));
+                          const isSelected = selectedSubItemId === si.id;
+                          return (
+                            <div
+                              key={si.id}
+                              className={cn(
+                                "flex cursor-pointer items-center gap-1.5 border-b px-2.5 py-1.5 transition-colors hover:bg-accent/50",
+                                isSelected && "border-l-2 border-l-primary bg-accent"
+                              )}
+                              onClick={() => { setSelectedSubItemId(si.id); setEditingLogIdx(-1); }}
+                            >
+                              <Checkbox
+                                checked={done}
+                                onCheckedChange={() => handleToggleSubCheck(idx)}
+                                onClick={(e) => e.stopPropagation()}
+                                className="h-4 w-4"
+                              />
+                              <span className={cn("min-w-0 flex-1 truncate text-[13px] font-semibold", done && "text-muted-foreground line-through")}>
+                                {si.name}
+                              </span>
+                              <Badge variant="outline" className="h-4 px-1 text-[9px]">{si.weight}%</Badge>
+                              <div className="h-1 w-10 overflow-hidden rounded-full bg-muted">
+                                <div className={cn("h-full rounded-full", getProgressBg(si.progress))} style={{ width: `${si.progress}%` }} />
+                              </div>
+                              <span className={cn("min-w-[28px] text-right text-[10px] font-bold", getProgressColor(si.progress))}>{si.progress}%</span>
+                              <span className="min-w-[16px] text-center text-[10px] text-muted-foreground">{siLogs.length}</span>
+                              <Button variant="ghost" size="sm" className="h-5 w-5 p-0 opacity-20 hover:opacity-100" onClick={(e) => { e.stopPropagation(); handleDeleteSubItem(idx); }}>
+                                <Trash2 className="h-3 w-3" />
+                              </Button>
+                            </div>
+                          );
+                        })}
+
+                        {/* 요약 */}
+                        {selectedTask.task.subItems.length > 0 && (
+                          <div className="flex items-center justify-between border-b bg-primary/5 px-2.5 py-1 text-[11px]">
+                            <span>
+                              가중 진행률: <strong className="text-primary">{calcAutoProgress(selectedTask.task)}%</strong>
+                              {selectedTask.task.subItems.reduce((s, i) => s + i.weight, 0) !== 100 && (
+                                <span className="text-destructive"> (합계:{selectedTask.task.subItems.reduce((s, i) => s + i.weight, 0)}%)</span>
+                              )}
+                            </span>
+                            <span className="text-muted-foreground">
+                              {selectedTask.task.subItems.filter((i) => i.progress >= 100).length}/{selectedTask.task.subItems.length}
+                            </span>
+                          </div>
+                        )}
+
+                        {/* 일반 수행기록 */}
+                        <div
+                          className={cn(
+                            "flex cursor-pointer items-center gap-1.5 border-t px-2.5 py-1.5 text-xs font-bold text-muted-foreground transition-colors hover:bg-accent/50",
+                            selectedSubItemId === "__unassigned__" && "border-l-2 border-l-primary bg-accent"
+                          )}
+                          onClick={() => { setSelectedSubItemId("__unassigned__"); setEditingLogIdx(-1); }}
+                        >
+                          <FileEdit className="h-3.5 w-3.5" />
+                          일반 수행기록
+                          <span className="ml-1 text-[10px] font-normal text-muted-foreground">
+                            ({selectedTask.task.workLogs.filter((wl) => !wl.subItemId).length}건)
+                          </span>
+                        </div>
+                      </ScrollArea>
+                    </div>
+                  </ResizablePanel>
+
+                  <ResizableHandle />
+
+                  {/* 수행기록 */}
+                  <ResizablePanel defaultSize={60} minSize={30}>
+                    <div className="flex h-full flex-col">
+                      <div className="shrink-0 border-b bg-muted/50 px-3 py-1.5">
+                        <h3 className="text-[13px] font-bold">수행기록</h3>
+                      </div>
+                      <ScrollArea className="flex-1">
+                        {selectedSubItemId === "__unassigned__" ? (
+                          <RenderLogs
+                            title="일반 수행기록"
+                            logs={selectedTask.task.workLogs
+                              .map((wl, i) => ({ ...wl, _idx: i }))
+                              .filter((wl) => !wl.subItemId)
+                              .sort((a, b) => b.startDt.localeCompare(a.startDt))}
+                            editingLogIdx={editingLogIdx}
+                            editForm={editForm}
+                            setEditForm={setEditForm}
+                            onStartEdit={handleStartEdit}
+                            onStartNew={() => handleStartNewLog(null)}
+                            onSave={(logIdx) => handleSaveLog(logIdx, null)}
+                            onCancel={() => setEditingLogIdx(-1)}
+                            onDelete={handleDeleteLog}
+                            onOpenAtt={openAttModal}
+                            onOpenPr={openPrModal}
+                            onOpenCr={openCrModal}
+                          />
+                        ) : (
+                          (() => {
+                            const si = selectedTask.task.subItems.find((s) => s.id === selectedSubItemId);
+                            if (!si) return (
+                              <div className="flex h-full flex-col items-center justify-center gap-1 text-muted-foreground">
+                                <PointerIcon className="h-6 w-6" />
+                                <span className="text-xs">왼쪽에서 수행항목을 선택하세요</span>
+                              </div>
+                            );
+                            const siLogs = selectedTask.task.workLogs
+                              .map((wl, i) => ({ ...wl, _idx: i }))
+                              .filter((wl) => wl.subItemId == si.id || String(wl.subItemId) === String(si.id))
+                              .sort((a, b) => b.startDt.localeCompare(a.startDt));
+                            return (
+                              <>
+                                <div className="border-b bg-muted/10 p-2.5">
+                                  <div className="flex items-center gap-2">
+                                    <span className="text-sm font-bold">{si.name}</span>
+                                    <Badge variant="outline" className="text-[9px]">{si.weight}%</Badge>
+                                  </div>
+                                  <div className="mt-1.5 flex items-center gap-2">
+                                    <Slider
+                                      className="flex-1"
+                                      value={[si.progress]}
+                                      min={0}
+                                      max={100}
+                                      step={5}
+                                      onValueChange={([v]) => handleUpdateSubProgress(si.id, v)}
+                                    />
+                                    <span className={cn("min-w-[32px] text-right text-xs font-bold", getProgressColor(si.progress))}>{si.progress}%</span>
+                                  </div>
+                                  <div className="mt-0.5 text-[10px] text-muted-foreground">{siLogs.length}건의 기록</div>
+                                </div>
+                                <RenderLogs
+                                  title={si.name}
+                                  logs={siLogs}
+                                  editingLogIdx={editingLogIdx}
+                                  editForm={editForm}
+                                  setEditForm={setEditForm}
+                                  onStartEdit={handleStartEdit}
+                                  onStartNew={() => handleStartNewLog(si.id)}
+                                  onSave={(logIdx) => handleSaveLog(logIdx, si.id)}
+                                  onCancel={() => setEditingLogIdx(-1)}
+                                  onDelete={handleDeleteLog}
+                                  onOpenAtt={openAttModal}
+                                  onOpenPr={openPrModal}
+                                  onOpenCr={openCrModal}
+                                />
+                              </>
+                            );
+                          })()
+                        )}
+                      </ScrollArea>
+                    </div>
+                  </ResizablePanel>
+                </ResizablePanelGroup>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 첨부파일 모달 */}
+      <Dialog open={attModalOpen} onOpenChange={setAttModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="text-base"><Paperclip className="mr-1.5 inline h-4 w-4" />첨부파일 ({modalAttachments.length})</DialogTitle>
+            <DialogDescription className="text-xs">파일을 추가하거나 삭제할 수 있습니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-2">
+            {modalAttachments.map((f, i) => (
+              <div key={f.id} className="flex items-center gap-2 rounded-md border bg-muted/50 p-2">
+                {getFileIcon(f.type)}
+                <div className="flex-1">
+                  <div className="text-xs font-semibold">{f.name}</div>
+                  <div className="text-[10px] text-muted-foreground">{f.type} · {f.size}</div>
+                </div>
+                <Button variant="outline" size="sm" className="h-6 text-[10px] text-destructive" onClick={() => setModalAttachments((p) => p.filter((_, idx) => idx !== i))}>삭제</Button>
+              </div>
+            ))}
+            <div
+              className="cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors hover:border-primary hover:bg-accent/50"
+              onClick={() => {
+                const name = prompt("파일명 (예: photo.jpg, drawing.dwg)");
+                if (!name) return;
+                setModalAttachments((p) => [...p, { id: Date.now(), name, type: getFileType(name), size: `${(Math.random() * 10 + 0.5).toFixed(1)}MB` }]);
+              }}
+            >
+              <Upload className="mx-auto h-5 w-5 text-muted-foreground" />
+              <div className="mt-1 text-xs text-muted-foreground">클릭하여 파일 추가</div>
+            </div>
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setAttModalOpen(false)} className="h-8 text-xs">닫기</Button>
+            <Button onClick={saveAttModal} className="h-8 text-xs">저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 구매요청 모달 */}
+      <Dialog open={prModalOpen} onOpenChange={setPrModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="text-base"><ShoppingCart className="mr-1.5 inline h-4 w-4" />구매요청 관리</DialogTitle>
+            <DialogDescription className="text-xs">구매요청을 등록하고 관리합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="grid grid-cols-2 gap-2">
+              <div>
+                <Label className="text-xs">자재명 *</Label>
+                <Input value={prForm.item} onChange={(e) => setPrForm((p) => ({ ...p, item: e.target.value }))} placeholder="예: LM가이드 HSR15-R" className="h-7 text-xs" />
+              </div>
+              <div className="grid grid-cols-2 gap-1">
+                <div>
+                  <Label className="text-xs">수량</Label>
+                  <Input value={prForm.qty} onChange={(e) => setPrForm((p) => ({ ...p, qty: e.target.value }))} type="number" className="h-7 text-xs" min={1} />
+                </div>
+                <div>
+                  <Label className="text-xs">단위</Label>
+                  <Select value={prForm.unit} onValueChange={(v) => setPrForm((p) => ({ ...p, unit: v }))}>
+                    <SelectTrigger className="h-7 text-xs" size="xs"><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      {["EA", "SET", "BOX", "M", "KG"].map((u) => (<SelectItem key={u} value={u}>{u}</SelectItem>))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">사유</Label>
+              <Input value={prForm.reason} onChange={(e) => setPrForm((p) => ({ ...p, reason: e.target.value }))} placeholder="구매 사유 입력" className="h-7 text-xs" />
+            </div>
+            <div className="flex items-end gap-2">
+              <div className="flex-1">
+                <Label className="text-xs">상태</Label>
+                <Select value={prForm.status} onValueChange={(v) => setPrForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-7 text-xs" size="xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {["요청", "견적중", "발주완료", "입고완료"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <Button size="sm" className="h-7 text-xs" onClick={() => {
+                if (!prForm.item.trim()) return;
+                setModalPurchaseReqs((p) => [...p, { id: Date.now(), item: prForm.item.trim(), qty: parseInt(prForm.qty) || 1, unit: prForm.unit, reason: prForm.reason, status: prForm.status }]);
+                setPrForm((p) => ({ ...p, item: "", reason: "" }));
+              }}>
+                <Plus className="mr-0.5 h-3 w-3" />추가
+              </Button>
+            </div>
+            <div className="text-xs font-semibold">등록된 구매요청 ({modalPurchaseReqs.length})</div>
+            {modalPurchaseReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없어요.</div>}
+            {modalPurchaseReqs.map((pr, i) => (
+              <div key={pr.id} className="flex items-center gap-2 rounded-md border bg-muted/50 p-2">
+                <ShoppingCart className="h-3.5 w-3.5" />
+                <strong className="text-xs">{pr.item}</strong>
+                <span className="text-[10px] text-muted-foreground">{pr.qty} {pr.unit}</span>
+                {pr.reason && <span className="text-[10px] text-muted-foreground">{pr.reason}</span>}
+                <Badge className={cn("text-[9px]", PR_STATUS_STYLES[pr.status])}>{pr.status}</Badge>
+                <Button variant="ghost" size="sm" className="ml-auto h-5 w-5 p-0 opacity-30 hover:opacity-100" onClick={() => setModalPurchaseReqs((p) => p.filter((_, idx) => idx !== i))}>
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
+            ))}
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setPrModalOpen(false)} className="h-8 text-xs">닫기</Button>
+            <Button onClick={savePrModal} className="h-8 text-xs">저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 협조요청 모달 */}
+      <Dialog open={crModalOpen} onOpenChange={setCrModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="text-base"><Handshake className="mr-1.5 inline h-4 w-4" />협조요청 관리</DialogTitle>
+            <DialogDescription className="text-xs">협조요청을 등록하고 관리합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <Label className="text-xs">요청 제목 *</Label>
+              <Input value={crForm.title} onChange={(e) => setCrForm((p) => ({ ...p, title: e.target.value }))} placeholder="협조 요청 제목" className="h-7 text-xs" />
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <div>
+                <Label className="text-xs">대상자 *</Label>
+                <Select value={crForm.toUser} onValueChange={(v) => setCrForm((p) => ({ ...p, toUser: v }))}>
+                  <SelectTrigger className="h-7 text-xs" size="xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {USERS.filter((u) => u !== currentUser).map((u) => (<SelectItem key={u} value={u}>{u} ({USER_INFO[u].role})</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">기한</Label>
+                <Input type="date" value={crForm.dueDate} onChange={(e) => setCrForm((p) => ({ ...p, dueDate: e.target.value }))} className="h-7 text-xs" />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">요청 내용</Label>
+              <Textarea value={crForm.desc} onChange={(e) => setCrForm((p) => ({ ...p, desc: e.target.value }))} placeholder="상세 요청 내용" className="min-h-[50px] text-xs" rows={2} />
+            </div>
+            <div className="text-right">
+              <Button size="sm" className="h-7 text-xs" onClick={() => {
+                if (!crForm.title.trim() || !crForm.toUser) return;
+                setModalCoopReqs((p) => [...p, { id: `CR-${Date.now()}`, toUser: crForm.toUser, toDept: USER_INFO[crForm.toUser]?.role || "", title: crForm.title.trim(), desc: crForm.desc, status: "요청", dueDate: crForm.dueDate, responses: [] }]);
+                setCrForm((p) => ({ ...p, title: "", desc: "" }));
+              }}>
+                <Plus className="mr-0.5 h-3 w-3" />추가
+              </Button>
+            </div>
+            <div className="text-xs font-semibold">등록된 협조요청 ({modalCoopReqs.length})</div>
+            {modalCoopReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없어요.</div>}
+            {modalCoopReqs.map((cr, i) => (
+              <div key={cr.id} className="space-y-1 rounded-md border bg-muted/50 p-2">
+                <div className="flex items-center gap-2">
+                  <Handshake className="h-3.5 w-3.5" />
+                  <strong className="flex-1 text-xs">{cr.title}</strong>
+                  <span className="text-[10px] text-muted-foreground">{cr.toUser} ({cr.toDept})</span>
+                  <Badge className={cn("text-[9px]", CR_STATUS_STYLES[cr.status])}>{cr.status}</Badge>
+                  <Button variant="ghost" size="sm" className="h-5 w-5 p-0 opacity-30 hover:opacity-100" onClick={() => setModalCoopReqs((p) => p.filter((_, idx) => idx !== i))}>
+                    <Trash2 className="h-3 w-3" />
+                  </Button>
+                </div>
+                {cr.desc && <div className="pl-5 text-[11px] text-muted-foreground">{cr.desc}</div>}
+                <div className="pl-5 text-[10px] text-muted-foreground">기한: {cr.dueDate}</div>
+                {(cr.responses || []).map((r, ri) => (
+                  <div key={ri} className="pl-5 text-[10px] text-muted-foreground">
+                    <strong className="text-primary">{r.user}</strong>: {r.content} <span className="text-muted-foreground">({r.date})</span>
+                  </div>
+                ))}
+                {cr.toUser === currentUser && cr.status !== "완료" && CR_NEXT[cr.status] && (
+                  <div className="pl-5">
+                    <Button size="sm" className="h-5 px-2 text-[10px]" onClick={() => {
+                      setModalCoopReqs((p) => p.map((c, idx) => idx === i ? { ...c, status: CR_NEXT[c.status] || c.status } : c));
+                    }}>
+                      {CR_NEXT[cr.status]}
+                    </Button>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setCrModalOpen(false)} className="h-8 text-xs">닫기</Button>
+            <Button onClick={saveCrModal} className="h-8 text-xs">저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+// ========== 수행기록 렌더 서브컴포넌트 ==========
+interface RenderLogsProps {
+  title: string;
+  logs: (WorkLog & { _idx: number })[];
+  editingLogIdx: number;
+  editForm: { startDt: string; endDt: string; desc: string };
+  setEditForm: React.Dispatch<React.SetStateAction<{ startDt: string; endDt: string; desc: string }>>;
+  onStartEdit: (idx: number) => void;
+  onStartNew: () => void;
+  onSave: (logIdx: number) => void;
+  onCancel: () => void;
+  onDelete: (idx: number) => void;
+  onOpenAtt: (idx: number) => void;
+  onOpenPr: (idx: number) => void;
+  onOpenCr: (idx: number) => void;
+}
+
+function RenderLogs({ title, logs, editingLogIdx, editForm, setEditForm, onStartEdit, onStartNew, onSave, onCancel, onDelete, onOpenAtt, onOpenPr, onOpenCr }: RenderLogsProps) {
+  return (
+    <div>
+      {logs.length === 0 && editingLogIdx !== -2 && (
+        <div className="flex flex-col items-center justify-center gap-1 py-8 text-muted-foreground">
+          <FileEdit className="h-6 w-6" />
+          <span className="text-xs">기록이 없어요</span>
+        </div>
+      )}
+      {logs.map((log) => {
+        const idx = log._idx;
+        if (editingLogIdx === idx) {
+          return (
+            <EditLogRow
+              key={idx}
+              logIdx={idx}
+              editForm={editForm}
+              setEditForm={setEditForm}
+              onSave={onSave}
+              onCancel={onCancel}
+              onOpenAtt={onOpenAtt}
+              onOpenPr={onOpenPr}
+              onOpenCr={onOpenCr}
+              attCount={(log.attachments || []).length}
+              prCount={(log.purchaseReqs || []).length}
+              crCount={(log.coopReqs || []).length}
+            />
+          );
+        }
+        const attC = (log.attachments || []).length;
+        const prC = (log.purchaseReqs || []).length;
+        const crC = (log.coopReqs || []).length;
+        return (
+          <div
+            key={idx}
+            className="flex cursor-pointer items-center gap-1.5 border-b px-2.5 py-1.5 text-xs transition-colors hover:bg-accent/50"
+            onClick={() => onStartEdit(idx)}
+            title="클릭하여 수정"
+          >
+            <span className="min-w-[75px] text-[11px] text-muted-foreground">{fmtDtShort(log.startDt)}~{log.endDt.substring(11, 16)}</span>
+            <Badge variant="outline" className="h-4 min-w-[26px] justify-center px-1 text-[10px] font-bold text-primary">{log.hours}h</Badge>
+            <span className="min-w-0 flex-1 truncate">{log.desc}</span>
+            <div className="flex gap-1">
+              {attC > 0 && (
+                <Badge variant="outline" className="h-4 cursor-pointer gap-0.5 px-1 text-[9px] hover:border-primary" onClick={(e) => { e.stopPropagation(); onOpenAtt(idx); }}>
+                  <Paperclip className="h-2.5 w-2.5" />{attC}
+                </Badge>
+              )}
+              {prC > 0 && (
+                <Badge className="h-4 cursor-pointer gap-0.5 bg-warning/10 px-1 text-[9px] text-warning hover:bg-warning/20" onClick={(e) => { e.stopPropagation(); onOpenPr(idx); }}>
+                  <ShoppingCart className="h-2.5 w-2.5" />{prC}
+                </Badge>
+              )}
+              {crC > 0 && (
+                <Badge className="h-4 cursor-pointer gap-0.5 bg-info/10 px-1 text-[9px] text-info hover:bg-info/20" onClick={(e) => { e.stopPropagation(); onOpenCr(idx); }}>
+                  <Handshake className="h-2.5 w-2.5" />{crC}
+                </Badge>
+              )}
+            </div>
+            <Button variant="ghost" size="sm" className="h-5 w-5 p-0 opacity-20 hover:opacity-100" onClick={(e) => { e.stopPropagation(); onDelete(idx); }}>
+              <Trash2 className="h-3 w-3" />
+            </Button>
+          </div>
+        );
+      })}
+      {editingLogIdx === -2 && (
+        <EditLogRow
+          logIdx={-1}
+          editForm={editForm}
+          setEditForm={setEditForm}
+          onSave={onSave}
+          onCancel={onCancel}
+          onOpenAtt={onOpenAtt}
+          onOpenPr={onOpenPr}
+          onOpenCr={onOpenCr}
+          attCount={0}
+          prCount={0}
+          crCount={0}
+        />
+      )}
+      <Button variant="outline" size="sm" className="m-2 h-6 border-dashed text-[10px] text-muted-foreground" onClick={onStartNew}>
+        <Plus className="mr-0.5 h-3 w-3" />기록 추가
+      </Button>
+    </div>
+  );
+}
+
+// ========== 편집 행 ==========
+interface EditLogRowProps {
+  logIdx: number;
+  editForm: { startDt: string; endDt: string; desc: string };
+  setEditForm: React.Dispatch<React.SetStateAction<{ startDt: string; endDt: string; desc: string }>>;
+  onSave: (logIdx: number) => void;
+  onCancel: () => void;
+  onOpenAtt: (idx: number) => void;
+  onOpenPr: (idx: number) => void;
+  onOpenCr: (idx: number) => void;
+  attCount: number;
+  prCount: number;
+  crCount: number;
+}
+
+function EditLogRow({ logIdx, editForm, setEditForm, onSave, onCancel, onOpenAtt, onOpenPr, onOpenCr, attCount, prCount, crCount }: EditLogRowProps) {
+  const hours = calcHours(editForm.startDt, editForm.endDt);
+  return (
+    <div className="space-y-1.5 rounded-md border border-primary/30 bg-primary/5 p-2.5">
+      <div className="flex flex-wrap items-center gap-1.5">
+        <Input type="datetime-local" value={editForm.startDt} onChange={(e) => setEditForm((p) => ({ ...p, startDt: e.target.value }))} className="h-6 w-[155px] text-[11px]" />
+        <span className="text-xs text-muted-foreground">~</span>
+        <Input type="datetime-local" value={editForm.endDt} onChange={(e) => setEditForm((p) => ({ ...p, endDt: e.target.value }))} className="h-6 w-[155px] text-[11px]" />
+        <span className="min-w-[30px] text-xs font-semibold text-primary">{hours}h</span>
+      </div>
+      <Textarea
+        value={editForm.desc}
+        onChange={(e) => setEditForm((p) => ({ ...p, desc: e.target.value }))}
+        placeholder="수행 내용을 입력하세요..."
+        className="min-h-[32px] text-xs"
+        rows={1}
+      />
+      <div className="flex items-center justify-between">
+        <div className="flex gap-1">
+          <Button variant="outline" size="sm" className="h-5 px-1.5 text-[9px]" onClick={() => onOpenAtt(logIdx)}>
+            <Paperclip className="mr-0.5 h-2.5 w-2.5" />첨부{attCount > 0 && ` (${attCount})`}
+          </Button>
+          <Button variant="outline" size="sm" className="h-5 px-1.5 text-[9px]" onClick={() => onOpenPr(logIdx)}>
+            <ShoppingCart className="mr-0.5 h-2.5 w-2.5" />구매{prCount > 0 && ` (${prCount})`}
+          </Button>
+          <Button variant="outline" size="sm" className="h-5 px-1.5 text-[9px]" onClick={() => onOpenCr(logIdx)}>
+            <Handshake className="mr-0.5 h-2.5 w-2.5" />협조{crCount > 0 && ` (${crCount})`}
+          </Button>
+        </div>
+        <div className="flex gap-1">
+          <Button variant="outline" size="sm" className="h-5 px-2 text-[10px]" onClick={onCancel}>취소</Button>
+          <Button size="sm" className="h-5 bg-success px-2 text-[10px] hover:bg-success/90" onClick={() => onSave(logIdx)}>저장</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/design/project/page.tsx b/frontend/app/(main)/COMPANY_8/design/project/page.tsx
new file mode 100644
index 00000000..7e66b696
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/design/project/page.tsx
@@ -0,0 +1,1501 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Textarea } from "@/components/ui/textarea";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Plus,
+  Save,
+  Pencil,
+  Trash2,
+  ChevronRight,
+  FolderOpen,
+  Rocket,
+  ClipboardList,
+  BarChart3,
+  Users,
+  FileText,
+  Loader2,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  getProjectList,
+  createProject,
+  updateProject,
+  getTasksByProject,
+  createTask,
+  updateTask,
+  deleteTask,
+} from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// --- Types ---
+type ProjectStatus = "진행중" | "계획" | "보류" | "완료";
+type TaskStatus = "대기" | "진행중" | "검토중" | "완료";
+type RelationType = "sub" | "depend" | "related";
+
+interface WorkLog {
+  date: string;
+  hours: number;
+  desc: string;
+  progressBefore: number;
+  progressAfter: number;
+  author: string;
+}
+
+interface Issue {
+  id: number;
+  title: string;
+  status: string;
+  priority: string;
+  desc: string;
+  registeredBy: string;
+  registeredDate: string;
+  resolvedDate?: string;
+}
+
+interface Task {
+  id?: string;
+  name: string;
+  category: string;
+  assignee: string;
+  start: string;
+  end: string;
+  status: TaskStatus;
+  progress: number;
+  remark: string;
+  workLogs: WorkLog[];
+  issues: Issue[];
+}
+
+interface Project {
+  id: string;
+  projectNo: string;
+  name: string;
+  status: ProjectStatus;
+  pm: string;
+  customer: string;
+  startDate: string;
+  endDate: string;
+  sourceNo: string;
+  desc: string;
+  progress: number;
+  parentId: string | null;
+  relation: RelationType | null;
+  tasks: Task[];
+}
+
+// API 응답(snake_case) -> 프론트(camelCase) 매핑
+function mapWorkLog(w: any): WorkLog {
+  const dt = w.start_dt || w.date;
+  const date = typeof dt === "string" ? dt.split("T")[0] : "";
+  return {
+    date,
+    hours: Number(w.hours) || 0,
+    desc: w.description || w.desc || "",
+    progressBefore: Number(w.progress_before) || 0,
+    progressAfter: Number(w.progress_after) || 0,
+    author: w.author || "",
+  };
+}
+
+function mapIssue(i: any): Issue {
+  return {
+    id: i.id,
+    title: i.title || "",
+    status: i.status || "",
+    priority: i.priority || "",
+    desc: i.description || i.desc || "",
+    registeredBy: i.registered_by || "",
+    registeredDate: i.registered_date || "",
+    resolvedDate: i.resolved_date,
+  };
+}
+
+function mapTask(t: any): Task {
+  const workLogs = (t.work_logs || t.workLogs || []).map(mapWorkLog);
+  const issues = (t.issues || []).map(mapIssue);
+  const start = t.start_date || t.start || "";
+  const end = t.end_date || t.end || "";
+  return {
+    id: t.id,
+    name: t.name || "",
+    category: t.category || "기구설계",
+    assignee: t.assignee || "",
+    start: typeof start === "string" ? start.split("T")[0] : "",
+    end: typeof end === "string" ? end.split("T")[0] : "",
+    status: (t.status || "대기") as TaskStatus,
+    progress: Number(t.progress) || 0,
+    remark: t.remark || "",
+    workLogs,
+    issues,
+  };
+}
+
+function mapProject(p: any): Project {
+  const tasks = (p.tasks || []).map(mapTask);
+  return {
+    id: p.id,
+    projectNo: p.project_no || p.id,
+    name: p.name || "",
+    status: (p.status || "계획") as ProjectStatus,
+    pm: p.pm || "",
+    customer: p.customer || "",
+    startDate: (p.start_date || "").toString().split("T")[0],
+    endDate: (p.end_date || "").toString().split("T")[0],
+    sourceNo: p.source_no || "",
+    desc: p.description || p.desc || "",
+    progress: Number(p.progress) || 0,
+    parentId: p.parent_id || null,
+    relation: (p.relation_type || p.relation) as RelationType | null,
+    tasks,
+  };
+}
+
+// --- 상태 색상 (CSS 변수 기반) ---
+const getStatusColor = (status: ProjectStatus) => {
+  switch (status) {
+    case "진행중":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "계획":
+      return "bg-muted text-muted-foreground border-border";
+    case "보류":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "완료":
+      return "bg-primary/15 text-primary border-primary/25";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getTaskStatusColor = (status: string) => {
+  switch (status) {
+    case "대기":
+      return "bg-muted text-muted-foreground";
+    case "진행중":
+      return "bg-primary/10 text-primary";
+    case "검토중":
+      return "bg-destructive/10 text-destructive";
+    case "완료":
+      return "bg-primary/15 text-primary";
+    case "지연":
+      return "bg-destructive/10 text-destructive";
+    default:
+      return "bg-muted text-muted-foreground";
+  }
+};
+
+const getRelationLabel = (r: RelationType | null) => {
+  if (!r) return "";
+  const m: Record<RelationType, string> = {
+    sub: "하위",
+    depend: "종속",
+    related: "연관",
+  };
+  return m[r];
+};
+
+const getRelationColor = (r: RelationType | null) => {
+  if (!r) return "";
+  const m: Record<RelationType, string> = {
+    sub: "bg-primary/10 text-primary",
+    depend: "bg-destructive/10 text-destructive",
+    related: "bg-secondary text-secondary-foreground",
+  };
+  return m[r];
+};
+
+const categoryIcons: Record<string, string> = {
+  기구설계: "⚙️",
+  전장설계: "⚡",
+  SW개발: "💻",
+  "구매/조달": "📦",
+  "조립/시운전": "🔧",
+  "검토/승인": "✅",
+};
+
+const progressColor = (p: number) =>
+  p >= 80 ? "bg-primary" : p >= 40 ? "bg-primary/70" : p > 0 ? "bg-primary/40" : "bg-muted-foreground/30";
+
+const progressTextColor = (p: number) =>
+  p >= 80 ? "text-primary" : p >= 40 ? "text-primary/80" : p > 0 ? "text-primary/60" : "text-muted-foreground";
+
+// --- Helper functions ---
+function getChildren(projects: Project[], parentId: string): Project[] {
+  return projects.filter((p) => p.parentId === parentId);
+}
+
+function getAllDescendants(projects: Project[], parentId: string): Project[] {
+  const children = getChildren(projects, parentId);
+  let all = [...children];
+  children.forEach((c) => {
+    all = all.concat(getAllDescendants(projects, c.id));
+  });
+  return all;
+}
+
+// --- Grid Columns ---
+const PROJECT_GRID_COLUMNS = [
+  { key: "project_no", label: "프로젝트번호" },
+  { key: "status", label: "상태" },
+  { key: "name", label: "프로젝트명" },
+  { key: "pm", label: "PM" },
+  { key: "customer", label: "고객" },
+  { key: "start_date", label: "시작일" },
+  { key: "end_date", label: "종료예정" },
+  { key: "progress", label: "진행률" },
+  { key: "source_no", label: "원접수번호" },
+];
+
+// --- Component ---
+export default function DesignProjectPage() {
+  const ts = useTableSettings("c16-design-project", "dsn_project", PROJECT_GRID_COLUMNS);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>({});
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 상세 탭
+  const [detailTab, setDetailTab] = useState("wbs");
+
+  // 모달
+  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
+  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
+  const [isTaskDetailOpen, setIsTaskDetailOpen] = useState(false);
+  const [editingTaskIdx, setEditingTaskIdx] = useState(-1);
+  const [taskDetailIdx, setTaskDetailIdx] = useState(-1);
+  const [taskDetailTab, setTaskDetailTab] = useState("log");
+
+  // 프로젝트 폼
+  const [formProjectId, setFormProjectId] = useState("");
+  const [formProjectNo, setFormProjectNo] = useState("");
+  const [formName, setFormName] = useState("");
+  const [formStartDate, setFormStartDate] = useState("");
+  const [formEndDate, setFormEndDate] = useState("");
+  const [formPM, setFormPM] = useState("");
+  const [formCustomer, setFormCustomer] = useState("");
+  const [formSourceNo, setFormSourceNo] = useState("");
+  const [formDesc, setFormDesc] = useState("");
+  const [formParentId, setFormParentId] = useState("");
+  const [formRelation, setFormRelation] = useState<RelationType>("sub");
+
+  // 태스크 폼
+  const [tName, setTName] = useState("");
+  const [tCategory, setTCategory] = useState("기구설계");
+  const [tAssignee, setTAssignee] = useState("");
+  const [tStart, setTStart] = useState("");
+  const [tEnd, setTEnd] = useState("");
+  const [tStatus, setTStatus] = useState<TaskStatus>("대기");
+  const [tProgress, setTProgress] = useState(0);
+  const [tRemark, setTRemark] = useState("");
+
+  const fetchProjects = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await getProjectList();
+      if (res.success && res.data) {
+        const mapped = (res.data as any[]).map(mapProject);
+        setProjects(mapped);
+      } else {
+        setProjects([]);
+      }
+    } catch {
+      toast.error("프로젝트 목록을 불러오는데 실패했습니다.");
+      setProjects([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchProjects();
+  }, [fetchProjects]);
+
+  const fetchTaskDetails = useCallback(async (projectId: string) => {
+    try {
+      const res = await getTasksByProject(projectId);
+      if (res.success && res.data) {
+        const tasks = (res.data as any[]).map(mapTask);
+        setProjects((prev) =>
+          prev.map((p) => (p.id === projectId ? { ...p, tasks } : p))
+        );
+      }
+    } catch {
+      toast.error("업무 상세를 불러오는데 실패했습니다.");
+    }
+  }, []);
+
+  // snake_case → camelCase 매핑 (DynamicSearchFilter의 columnName은 snake_case)
+  const fieldMap: Record<string, string> = {
+    project_no: "projectNo",
+    start_date: "startDate",
+    end_date: "endDate",
+    source_no: "sourceNo",
+  };
+  const getFieldValue = (obj: any, colName: string): string => {
+    const key = fieldMap[colName] || colName;
+    const val = obj[key];
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
+  // 필터링
+  const filteredProjects = useMemo(() => {
+    if (searchFilters.length === 0) return projects;
+
+    const matched = new Set<string>();
+    projects.forEach((p) => {
+      let pass = true;
+      for (const f of searchFilters) {
+        const val = getFieldValue(p, f.columnName);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) { pass = false; break; }
+        } else if (f.operator === "equals") {
+          if (val !== f.value) { pass = false; break; }
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) { pass = false; break; }
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) { pass = false; break; }
+          if (to && val > to) { pass = false; break; }
+        }
+      }
+      if (pass) matched.add(p.id);
+    });
+
+    const result = new Set(matched);
+    matched.forEach((id) => {
+      getAllDescendants(projects, id).forEach((d) => result.add(d.id));
+    });
+    matched.forEach((id) => {
+      let current = projects.find((p) => p.id === id);
+      while (current?.parentId) {
+        result.add(current.parentId);
+        current = projects.find((p) => p.id === current!.parentId);
+      }
+    });
+
+    return projects.filter((p) => result.has(p.id));
+  }, [projects, searchFilters]);
+
+  const selectedProject = useMemo(
+    () => projects.find((p) => p.id === selectedId),
+    [projects, selectedId]
+  );
+
+  // 트리 렌더
+  const buildTreeRows = useCallback(
+    (parentId: string | null, depth: number): { project: Project; depth: number }[] => {
+      const children = filteredProjects.filter((p) => p.parentId === parentId);
+      const rows: { project: Project; depth: number }[] = [];
+      children.forEach((child) => {
+        rows.push({ project: child, depth });
+        if (expandedIds[child.id] !== false) {
+          rows.push(...buildTreeRows(child.id, depth + 1));
+        }
+      });
+      return rows;
+    },
+    [filteredProjects, expandedIds]
+  );
+
+  const treeRows = useMemo(() => buildTreeRows(null, 0), [buildTreeRows]);
+
+  const toggleExpand = (id: string) => {
+    setExpandedIds((prev) => ({
+      ...prev,
+      [id]: prev[id] === undefined ? false : !prev[id],
+    }));
+  };
+
+
+  // --- 프로젝트 모달 ---
+  const openProjectModal = (editProject?: Project, presetParentId?: string) => {
+    if (editProject) {
+      setFormProjectId(editProject.id);
+      setFormProjectNo(editProject.projectNo);
+      setFormName(editProject.name);
+      setFormStartDate(editProject.startDate);
+      setFormEndDate(editProject.endDate);
+      setFormPM(editProject.pm);
+      setFormCustomer(editProject.customer);
+      setFormSourceNo(editProject.sourceNo);
+      setFormDesc(editProject.desc);
+      setFormParentId(editProject.parentId || "");
+      setFormRelation((editProject.relation as RelationType) || "sub");
+    } else {
+      const maxNum = projects.reduce((max, p) => {
+        const match = p.projectNo?.match(/PJ-\d{4}-(\d+)/);
+        const num = match ? parseInt(match[1], 10) : 0;
+        return num > max ? num : max;
+      }, 0);
+      const year = new Date().getFullYear();
+      const newProjectNo = `PJ-${year}-${String(maxNum + 1).padStart(4, "0")}`;
+      setFormProjectId("");
+      setFormProjectNo(newProjectNo);
+      setFormName("");
+      setFormStartDate(new Date().toISOString().split("T")[0]);
+      setFormEndDate("");
+      setFormPM("");
+      setFormCustomer("");
+      setFormSourceNo("");
+      setFormDesc("");
+      setFormParentId(presetParentId || "");
+      setFormRelation("sub");
+
+      if (presetParentId) {
+        const parent = projects.find((p) => p.id === presetParentId);
+        if (parent) {
+          setFormCustomer(parent.customer);
+          setFormEndDate(parent.endDate);
+        }
+      }
+    }
+    setIsProjectModalOpen(true);
+  };
+
+  const handleSaveProject = async () => {
+    if (!formName.trim()) { toast.error("프로젝트명을 입력하세요."); return; }
+    if (!formStartDate) { toast.error("시작일을 입력하세요."); return; }
+    if (!formEndDate) { toast.error("종료예정일을 입력하세요."); return; }
+    if (!formPM) { toast.error("PM을 선택하세요."); return; }
+
+    const existing = projects.find((p) => p.id === formProjectId);
+    const payload = {
+      project_no: formProjectNo || formProjectId,
+      name: formName,
+      status: (existing?.status || "계획") as ProjectStatus,
+      pm: formPM,
+      customer: formCustomer,
+      start_date: formStartDate,
+      end_date: formEndDate,
+      source_no: formSourceNo,
+      description: formDesc,
+      progress: existing?.progress ?? 0,
+      parent_id: formParentId || null,
+      relation_type: formParentId ? formRelation : null,
+    };
+
+    const isEdit = !!formProjectId;
+    try {
+      if (isEdit) {
+        const res = await updateProject(formProjectId, payload);
+        if (res.success) {
+          toast.success("프로젝트가 수정되었습니다.");
+          await fetchProjects();
+          setIsProjectModalOpen(false);
+        } else {
+          toast.error(res.message || "프로젝트 수정에 실패했습니다.");
+        }
+      } else {
+        const res = await createProject(payload);
+        if (res.success && res.data) {
+          toast.success("프로젝트가 등록되었습니다.");
+          await fetchProjects();
+          if (formParentId) {
+            setExpandedIds((prev) => ({ ...prev, [formParentId]: true }));
+          }
+          const projectId = (res.data as any).id;
+          setSelectedId(projectId);
+          fetchTaskDetails(projectId);
+          setIsProjectModalOpen(false);
+        } else {
+          toast.error(res.message || "프로젝트 등록에 실패했습니다.");
+        }
+      }
+    } catch {
+      toast.error("프로젝트 저장에 실패했습니다.");
+    }
+  };
+
+  // --- 태스크 모달 ---
+  const openTaskModal = (idx?: number) => {
+    if (idx !== undefined && selectedProject) {
+      const t = selectedProject.tasks[idx];
+      setEditingTaskIdx(idx);
+      setTName(t.name);
+      setTCategory(t.category);
+      setTAssignee(t.assignee);
+      setTStart(t.start);
+      setTEnd(t.end);
+      setTStatus(t.status);
+      setTProgress(t.progress);
+      setTRemark(t.remark);
+    } else {
+      setEditingTaskIdx(-1);
+      setTName("");
+      setTCategory("기구설계");
+      setTAssignee("");
+      setTStart(selectedProject?.startDate || "");
+      setTEnd(selectedProject?.endDate || "");
+      setTStatus("대기");
+      setTProgress(0);
+      setTRemark("");
+    }
+    setIsTaskModalOpen(true);
+  };
+
+  const handleSaveTask = async () => {
+    if (!tName.trim()) { toast.error("업무명을 입력하세요."); return; }
+    if (!tAssignee) { toast.error("담당자를 선택하세요."); return; }
+    if (!tStart || !tEnd) { toast.error("시작일과 종료일을 입력하세요."); return; }
+    if (!selectedId) return;
+
+    const payload = {
+      name: tName,
+      category: tCategory,
+      assignee: tAssignee,
+      start_date: tStart,
+      end_date: tEnd,
+      status: tStatus,
+      progress: tProgress,
+      priority: "보통",
+      remark: tRemark,
+      sort_order: String(editingTaskIdx >= 0 ? editingTaskIdx : selectedProject?.tasks.length ?? 0),
+    };
+
+    try {
+      if (editingTaskIdx >= 0 && selectedProject?.tasks[editingTaskIdx]?.id) {
+        const taskId = selectedProject.tasks[editingTaskIdx].id!;
+        const res = await updateTask(taskId, payload);
+        if (res.success) {
+          toast.success("업무가 수정되었습니다.");
+          await fetchTaskDetails(selectedId);
+          setIsTaskModalOpen(false);
+        } else {
+          toast.error(res.message || "업무 수정에 실패했습니다.");
+        }
+      } else {
+        const res = await createTask(selectedId, payload);
+        if (res.success) {
+          toast.success("업무가 등록되었습니다.");
+          await fetchTaskDetails(selectedId);
+          await fetchProjects();
+          setIsTaskModalOpen(false);
+        } else {
+          toast.error(res.message || "업무 등록에 실패했습니다.");
+        }
+      }
+    } catch {
+      toast.error("업무 저장에 실패했습니다.");
+    }
+  };
+
+  const handleDeleteTask = async (idx: number) => {
+    if (!selectedProject || !selectedId) return;
+    const task = selectedProject.tasks[idx];
+    if (!task) return;
+    if (!confirm(`"${task.name}" 업무를 삭제하시겠습니까?`)) return;
+
+    const taskId = task.id;
+    if (!taskId) {
+      toast.error("삭제할 업무 정보를 찾을 수 없습니다.");
+      return;
+    }
+
+    try {
+      const res = await deleteTask(taskId);
+      if (res.success) {
+        toast.success("업무가 삭제되었습니다.");
+        await fetchTaskDetails(selectedId);
+        await fetchProjects();
+      } else {
+        toast.error(res.message || "업무 삭제에 실패했습니다.");
+      }
+    } catch {
+      toast.error("업무 삭제에 실패했습니다.");
+    }
+  };
+
+  // --- 상세 패널 계산 ---
+  const childProjects = useMemo(
+    () => (selectedId ? getChildren(projects, selectedId) : []),
+    [projects, selectedId]
+  );
+
+  const taskStats = useMemo(() => {
+    if (!selectedProject) return { total: 0, completed: 0, inProgress: 0, delayed: 0 };
+    const total = selectedProject.tasks.length;
+    const completed = selectedProject.tasks.filter((t) => t.status === "완료").length;
+    const inProgress = selectedProject.tasks.filter((t) => t.status === "진행중").length;
+    const delayed = selectedProject.tasks.filter(
+      (t) => t.status !== "완료" && new Date(t.end) < new Date()
+    ).length;
+    return { total, completed, inProgress, delayed };
+  }, [selectedProject]);
+
+  // 카테고리별 그룹핑 (WBS)
+  const tasksByCategory = useMemo(() => {
+    if (!selectedProject) return {};
+    const groups: Record<string, (Task & { _idx: number })[]> = {};
+    selectedProject.tasks.forEach((t, i) => {
+      if (!groups[t.category]) groups[t.category] = [];
+      groups[t.category].push({ ...t, _idx: i });
+    });
+    return groups;
+  }, [selectedProject]);
+
+  // 팀원별 그룹핑
+  const teamMembers = useMemo(() => {
+    if (!selectedProject) return {};
+    const members: Record<string, Task[]> = {};
+    selectedProject.tasks.forEach((t) => {
+      if (!members[t.assignee]) members[t.assignee] = [];
+      members[t.assignee].push(t);
+    });
+    return members;
+  }, [selectedProject]);
+
+  const parentProject = useMemo(
+    () => (selectedProject?.parentId ? projects.find((p) => p.id === selectedProject.parentId) : null),
+    [projects, selectedProject]
+  );
+
+  // 태스크 상세
+  const detailTask = useMemo(
+    () => (selectedProject && taskDetailIdx >= 0 ? selectedProject.tasks[taskDetailIdx] : null),
+    [selectedProject, taskDetailIdx]
+  );
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-4rem)] gap-3 p-3">
+      {/* 검색 필터 */}
+      <div className="shrink-0">
+        <DynamicSearchFilter
+          tableName="dsn_project"
+          filterId="c16-design-project"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredProjects.length}
+        />
+      </div>
+
+      {/* 좌우 분할 메인 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 왼쪽: 프로젝트 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold flex items-center gap-2">
+                  프로젝트 목록
+                  <span className="text-xs font-medium text-primary bg-primary/8 border border-primary/15 rounded-md px-1.5 py-0.5">{filteredProjects.length}건</span>
+                </div>
+                <Button size="sm" onClick={() => openProjectModal()}>
+                  <Plus className="w-4 h-4 mr-1.5" /> 프로젝트 등록
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={[
+                    { key: "projectNo", label: "프로젝트번호", width: "w-[160px]", render: (_val: any, row: any) => {
+                      const depth = row._depth ?? 0;
+                      const hasChildren = filteredProjects.some((c) => c.parentId === row.id);
+                      const isExpanded = expandedIds[row.id] !== false;
+                      return (
+                        <div className="flex items-center gap-1" style={{ paddingLeft: depth * 20 }}>
+                          {hasChildren ? (
+                            <button className="p-0.5 rounded hover:bg-muted transition-transform" onClick={(e) => { e.stopPropagation(); toggleExpand(row.id); }}>
+                              <ChevronRight className={cn("w-3.5 h-3.5 text-muted-foreground transition-transform", isExpanded && "rotate-90")} />
+                            </button>
+                          ) : (<span className="w-4" />)}
+                          <span className={cn("font-semibold text-xs", depth === 0 ? "text-primary" : depth === 1 ? "text-primary/80" : "text-primary/60")}>{row.projectNo}</span>
+                          {row.relation && (<span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(row.relation))}>{getRelationLabel(row.relation)}</span>)}
+                        </div>
+                      );
+                    }},
+                    { key: "status", label: "상태", width: "w-[80px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(val))}>{val}</span> },
+                    { key: "name", label: "프로젝트명", width: "w-[200px]", render: (val: any, row: any) => {
+                      const childCount = getAllDescendants(projects, row.id).length;
+                      return (<><span className="font-medium text-sm">{val}</span>{childCount > 0 && <Badge variant="outline" className="ml-1.5 text-[10px] py-0 px-1.5 font-normal"><FolderOpen className="w-3 h-3 mr-0.5" /> {childCount}</Badge>}</>);
+                    }},
+                    { key: "pm", label: "PM", width: "w-[70px]" },
+                    { key: "customer", label: "고객", width: "w-[80px]" },
+                    { key: "startDate", label: "시작일", width: "w-[90px]" },
+                    { key: "endDate", label: "종료예정", width: "w-[90px]" },
+                    { key: "progress", label: "진행률", width: "w-[100px]", align: "center" as const, render: (val: any) => (
+                      <div className="flex items-center gap-1.5">
+                        <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                          <div className={cn("h-full rounded-full transition-all", progressColor(val))} style={{ width: `${val}%` }} />
+                        </div>
+                        <span className={cn("text-[11px] font-medium min-w-[28px] text-right", progressTextColor(val))}>{val}%</span>
+                      </div>
+                    )},
+                    { key: "sourceNo", label: "원접수번호", width: "w-[90px]", render: (val: any) => <span className="text-[13px] text-muted-foreground">{val || "-"}</span> },
+                  ] as EDataTableColumn[]}
+                  data={ts.groupData(treeRows.map(({ project: p, depth }) => ({ ...p, _depth: depth })))}
+                  rowKey={(row) => row.id}
+                  loading={loading}
+                  emptyMessage="조건에 맞는 프로젝트가 없어요"
+                  selectedId={selectedId}
+                  onSelect={(id) => {
+                    if (id) {
+                      setSelectedId(id);
+                      setDetailTab("wbs");
+                      fetchTaskDetails(id);
+                    }
+                  }}
+                  onRowClick={(row) => {
+                    setSelectedId(row.id);
+                    setDetailTab("wbs");
+                    fetchTaskDetails(row.id);
+                  }}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 오른쪽: 상세 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 상세 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                {selectedProject ? (
+                  <div className="text-[13px] font-bold flex items-center gap-2">
+                    {selectedProject.name}
+                    <Badge variant="outline" className="text-[11px] font-normal px-1.5 py-0">{selectedProject.projectNo}</Badge>
+                  </div>
+                ) : (
+                  <div className="text-[13px] font-bold flex items-center gap-2">
+                    <ClipboardList className="w-3.5 h-3.5" /> 프로젝트 상세
+                  </div>
+                )}
+                {selectedProject && (
+                  <div className="flex items-center gap-1.5">
+                    <Button size="sm" variant="default" className="h-7 text-xs" onClick={() => openTaskModal()}>
+                      <Plus className="w-3.5 h-3.5 mr-1" /> 업무 추가
+                    </Button>
+                    <Button size="sm" variant="secondary" className="h-7 text-xs" onClick={() => openProjectModal(undefined, selectedProject.id)}>
+                      <FolderOpen className="w-3.5 h-3.5 mr-1" /> 하위 프로젝트
+                    </Button>
+                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openProjectModal(selectedProject)}>
+                      <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {!selectedId || !selectedProject ? (
+                <div className="flex-1 flex items-center justify-center p-8">
+                  <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-12 py-10 text-center">
+                    <Rocket className="h-10 w-10 text-muted-foreground/40" />
+                    <p className="text-sm text-muted-foreground">좌측에서 프로젝트를 선택해주세요</p>
+                  </div>
+                </div>
+              ) : (
+              <div className="flex-1 overflow-auto p-3 space-y-3">
+                    {/* 상위 프로젝트 링크 */}
+                    {parentProject && (
+                      <div
+                        className="flex items-center gap-2 px-3 py-2 bg-primary/5 rounded-md border-l-[3px] border-primary text-sm cursor-pointer hover:bg-primary/10 transition-colors"
+                        onClick={() => { setSelectedId(parentProject.id); setDetailTab("wbs"); fetchTaskDetails(parentProject.id); }}
+                      >
+                        <span className="text-muted-foreground">상위:</span>
+                        <span className="text-primary font-semibold">{parentProject.projectNo} - {parentProject.name}</span>
+                        {selectedProject.relation && (
+                          <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(selectedProject.relation))}>
+                            {getRelationLabel(selectedProject.relation)}
+                          </span>
+                        )}
+                      </div>
+                    )}
+
+                    {/* 개요 카드 */}
+                    <div className="space-y-1.5">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 현황</span>
+                      <div className="grid grid-cols-5 gap-2">
+                        {[
+                          { label: "전체 업무", value: taskStats.total, color: "text-primary", bg: "bg-primary/5 border-primary/10" },
+                          { label: "완료", value: taskStats.completed, color: "text-primary", bg: "bg-primary/5 border-primary/10" },
+                          { label: "진행중", value: taskStats.inProgress, color: "text-primary/80", bg: "bg-primary/5 border-primary/10" },
+                          { label: "지연", value: taskStats.delayed, color: "text-destructive", bg: "bg-destructive/5 border-destructive/10" },
+                          { label: "하위 프로젝트", value: childProjects.length, color: "text-foreground", bg: "bg-muted/40 border-border" },
+                        ].map((item) => (
+                          <div key={item.label} className={cn("rounded-lg p-2.5 text-center border transition-colors hover:opacity-80", item.bg)}>
+                            <div className="text-[10px] text-muted-foreground mb-0.5">{item.label}</div>
+                            <div className={cn("text-xl font-bold", item.color)}>{item.value}</div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 탭 */}
+                    <Tabs value={detailTab} onValueChange={setDetailTab} className="flex flex-col flex-1 overflow-hidden gap-0">
+                      <TabsList className="bg-card w-full justify-start rounded-none border-b border-border p-0 h-auto shrink-0">
+                        {[
+                          { value: "wbs", icon: <ClipboardList className="w-3.5 h-3.5" />, label: "WBS" },
+                          { value: "gantt", icon: <BarChart3 className="w-3.5 h-3.5" />, label: "간트차트" },
+                          { value: "team", icon: <Users className="w-3.5 h-3.5" />, label: "팀원" },
+                          { value: "subprojects", icon: <FolderOpen className="w-3.5 h-3.5" />, label: `하위(${childProjects.length})` },
+                        ].map((tab) => (
+                          <TabsTrigger
+                            key={tab.value}
+                            value={tab.value}
+                            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                          >
+                            {tab.icon} {tab.label}
+                          </TabsTrigger>
+                        ))}
+                      </TabsList>
+
+                      {/* WBS 탭 */}
+                      <TabsContent value="wbs" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
+                        {selectedProject.tasks.length === 0 ? (
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <ClipboardList className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">등록된 업무가 없어요</span>
+                          </div>
+                        ) : (
+                          <Table>
+                            <TableHeader className="sticky top-0 z-10">
+                              <TableRow className="bg-muted hover:bg-muted">
+                                <TableHead className="w-[180px] text-[11px] uppercase tracking-wide">업무명</TableHead>
+                                <TableHead className="w-[70px] text-[11px] uppercase tracking-wide">담당자</TableHead>
+                                <TableHead className="w-[85px] text-[11px] uppercase tracking-wide">시작일</TableHead>
+                                <TableHead className="w-[85px] text-[11px] uppercase tracking-wide">종료일</TableHead>
+                                <TableHead className="w-[70px] text-center text-[11px] uppercase tracking-wide">상태</TableHead>
+                                <TableHead className="w-[90px] text-center text-[11px] uppercase tracking-wide">진행률</TableHead>
+                                <TableHead className="w-[80px] text-center text-[11px] uppercase tracking-wide">관리</TableHead>
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                              {Object.entries(tasksByCategory).map(([cat, tasks]) => {
+                                const catProg = Math.round(tasks.reduce((s, t) => s + t.progress, 0) / tasks.length);
+                                return (
+                                  <React.Fragment key={cat}>
+                                    <TableRow className="bg-muted/30">
+                                      <TableCell colSpan={5} className="font-semibold text-sm">
+                                        {categoryIcons[cat] || "📋"} {cat}
+                                      </TableCell>
+                                      <TableCell className="text-center">
+                                        <span className={cn("text-xs font-semibold", progressTextColor(catProg))}>{catProg}%</span>
+                                      </TableCell>
+                                      <TableCell />
+                                    </TableRow>
+                                    {tasks.map((task) => {
+                                      const isDelay = task.status !== "완료" && new Date(task.end) < new Date();
+                                      const displayStatus = isDelay ? "지연" : task.status;
+                                      return (
+                                        <TableRow key={task._idx}>
+                                          <TableCell className="pl-8 text-[13px]">{task.name}</TableCell>
+                                          <TableCell className="text-[13px]">{task.assignee}</TableCell>
+                                          <TableCell className="text-[13px] text-muted-foreground">{task.start}</TableCell>
+                                          <TableCell className={cn("text-[13px]", isDelay && "text-destructive font-semibold")}>{task.end}</TableCell>
+                                          <TableCell className="text-center">
+                                            <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", getTaskStatusColor(displayStatus))}>
+                                              {displayStatus}
+                                            </span>
+                                          </TableCell>
+                                          <TableCell>
+                                            <div className="flex items-center gap-1">
+                                              <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                                                <div className={cn("h-full rounded-full", progressColor(task.progress))} style={{ width: `${task.progress}%` }} />
+                                              </div>
+                                              <span className="text-[10px] text-muted-foreground min-w-[24px] text-right">{task.progress}%</span>
+                                            </div>
+                                          </TableCell>
+                                          <TableCell className="text-center">
+                                            <div className="flex items-center justify-center gap-0.5">
+                                              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => { setTaskDetailIdx(task._idx); setTaskDetailTab("log"); setIsTaskDetailOpen(true); }}>
+                                                <FileText className="w-3.5 h-3.5" />
+                                              </Button>
+                                              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => openTaskModal(task._idx)}>
+                                                <Pencil className="w-3.5 h-3.5" />
+                                              </Button>
+                                              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeleteTask(task._idx)}>
+                                                <Trash2 className="w-3.5 h-3.5 text-destructive" />
+                                              </Button>
+                                            </div>
+                                          </TableCell>
+                                        </TableRow>
+                                      );
+                                    })}
+                                  </React.Fragment>
+                                );
+                              })}
+                            </TableBody>
+                          </Table>
+                        )}
+                      </TabsContent>
+
+                      {/* 간트차트 탭 */}
+                      <TabsContent value="gantt" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
+                        {selectedProject.tasks.length === 0 ? (
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <BarChart3 className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">업무를 등록하면 간트차트가 표시돼요</span>
+                          </div>
+                        ) : (
+                          <GanttChart tasks={selectedProject.tasks} startDate={selectedProject.startDate} endDate={selectedProject.endDate} />
+                        )}
+                      </TabsContent>
+
+                      {/* 팀원 탭 */}
+                      <TabsContent value="team" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
+                        {selectedProject.tasks.length === 0 ? (
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <Users className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">업무를 등록하면 팀원 현황이 표시돼요</span>
+                          </div>
+                        ) : (
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                            {Object.entries(teamMembers).map(([name, tasks], idx) => {
+                              const avgProg = Math.round(tasks.reduce((s, t) => s + t.progress, 0) / tasks.length);
+                              const isPM = name === selectedProject.pm;
+                              const avatarColors = ["bg-primary", "bg-primary/80", "bg-primary/60", "bg-destructive/70"];
+                              return (
+                                <div key={name} className="border rounded-lg p-4 hover:shadow-sm transition-shadow">
+                                  <div className="flex items-center gap-3 mb-3">
+                                    <div className={cn("w-10 h-10 rounded-full flex items-center justify-center text-primary-foreground font-bold", avatarColors[idx % 4])}>
+                                      {name.charAt(0)}
+                                    </div>
+                                    <div>
+                                      <div className="font-semibold text-sm flex items-center gap-1.5">
+                                        {name}
+                                        {isPM && <Badge variant="secondary" className="text-[10px] py-0">PM</Badge>}
+                                      </div>
+                                      <div className="text-xs text-muted-foreground">
+                                        업무 {tasks.length}건 (진행중 {tasks.filter((t) => t.status === "진행중").length}건)
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <ul className="space-y-1 mb-3">
+                                    {tasks.map((t, ti) => {
+                                      const isDelay = t.status !== "완료" && new Date(t.end) < new Date();
+                                      return (
+                                        <li key={ti} className="flex items-center justify-between text-xs py-1 border-b border-muted/50 last:border-0">
+                                          <span>
+                                            {isDelay ? "🔴" : t.status === "완료" ? "✅" : t.status === "진행중" ? "🔵" : "⚪"} {t.name}
+                                          </span>
+                                          <span className={cn("text-[11px]", isDelay ? "text-destructive" : "text-muted-foreground")}>{t.progress}%</span>
+                                        </li>
+                                      );
+                                    })}
+                                  </ul>
+                                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                    <span>종합:</span>
+                                    <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                                      <div className={cn("h-full rounded-full", progressColor(avgProg))} style={{ width: `${avgProg}%` }} />
+                                    </div>
+                                    <span className={cn("font-semibold", progressTextColor(avgProg))}>{avgProg}%</span>
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </TabsContent>
+
+                      {/* 하위 프로젝트 탭 */}
+                      <TabsContent value="subprojects" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                          {childProjects.map((child) => {
+                            const completedCount = child.tasks.filter((t) => t.status === "완료").length;
+                            return (
+                              <div
+                                key={child.id}
+                                className="border rounded-lg p-4 cursor-pointer hover:border-primary hover:shadow-sm transition-all"
+                                onClick={() => { setSelectedId(child.id); setDetailTab("wbs"); fetchTaskDetails(child.id); }}
+                              >
+                                <div className="flex items-center justify-between mb-2">
+                                  <div>
+                                    <div className="text-xs font-semibold text-primary">{child.projectNo}</div>
+                                    {child.relation && (
+                                      <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(child.relation))}>
+                                        {getRelationLabel(child.relation)}
+                                      </span>
+                                    )}
+                                  </div>
+                                  <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(child.status))}>{child.status}</span>
+                                </div>
+                                <div className="font-semibold text-sm mb-2">{child.name}</div>
+                                <div className="flex gap-3 text-xs text-muted-foreground mb-2">
+                                  <span>👤 {child.pm}</span>
+                                  <span>📅 {child.startDate} ~ {child.endDate}</span>
+                                </div>
+                                <div className="text-xs text-muted-foreground mb-2">
+                                  업무 {child.tasks.length}건 (완료 {completedCount}건)
+                                </div>
+                                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                  <span>진행률</span>
+                                  <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                                    <div className={cn("h-full rounded-full", progressColor(child.progress))} style={{ width: `${child.progress}%` }} />
+                                  </div>
+                                  <span className={cn("font-semibold", progressTextColor(child.progress))}>{child.progress}%</span>
+                                </div>
+                              </div>
+                            );
+                          })}
+                          <div
+                            className="border-2 border-dashed rounded-lg p-4 flex flex-col items-center justify-center min-h-[120px] cursor-pointer text-muted-foreground hover:border-primary hover:text-primary hover:bg-primary/5 transition-all"
+                            onClick={() => openProjectModal(undefined, selectedProject.id)}
+                          >
+                            <Plus className="w-7 h-7 mb-1" />
+                            <span className="text-sm font-medium">하위 프로젝트 등록</span>
+                          </div>
+                        </div>
+                      </TabsContent>
+                    </Tabs>
+                  </div>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 프로젝트 등록/수정 모달 */}
+      <Dialog open={isProjectModalOpen} onOpenChange={setIsProjectModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              {projects.some((p) => p.id === formProjectId)
+                ? "프로젝트 수정"
+                : formParentId
+                ? "하위 프로젝트 등록"
+                : "프로젝트 등록"}
+            </DialogTitle>
+            <DialogDescription>프로젝트 기본 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 sm:space-y-4">
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 번호</span>
+              <Input value={formProjectNo || formProjectId} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted/50" />
+            </div>
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트명 <span className="text-destructive">*</span></span>
+              <Input value={formName} onChange={(e) => setFormName(e.target.value)} placeholder="프로젝트명" className="h-8 text-xs sm:h-10 sm:text-sm" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">시작일 <span className="text-destructive">*</span></span>
+                <Input type="date" value={formStartDate} onChange={(e) => setFormStartDate(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">종료예정일 <span className="text-destructive">*</span></span>
+                <Input type="date" value={formEndDate} onChange={(e) => setFormEndDate(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">PM <span className="text-destructive">*</span></span>
+                <Select value={formPM || "none"} onValueChange={(v) => setFormPM(v === "none" ? "" : v)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">선택</SelectItem>
+                    <SelectItem value="이설계">이설계</SelectItem>
+                    <SelectItem value="박도면">박도면</SelectItem>
+                    <SelectItem value="최기구">최기구</SelectItem>
+                    <SelectItem value="김전장">김전장</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">고객</span>
+                <Input value={formCustomer} onChange={(e) => setFormCustomer(e.target.value)} placeholder="고객/거래처명" className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상위 프로젝트</span>
+                <Select value={formParentId || "none"} onValueChange={(v) => setFormParentId(v === "none" ? "" : v)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="없음" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">없음 (최상위)</SelectItem>
+                    {projects.filter((p) => p.id !== formProjectId).map((p) => (
+                      <SelectItem key={p.id} value={p.id}>{p.projectNo} - {p.name}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">관계 유형</span>
+                <Select value={formRelation} onValueChange={(v) => setFormRelation(v as RelationType)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="sub">하위 프로젝트</SelectItem>
+                    <SelectItem value="depend">종속 프로젝트</SelectItem>
+                    <SelectItem value="related">연관 프로젝트</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">원접수번호</span>
+              <Input value={formSourceNo} onChange={(e) => setFormSourceNo(e.target.value)} placeholder="DR-XXXX-XXXX" className="h-8 text-xs sm:h-10 sm:text-sm" />
+            </div>
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">설명</span>
+              <Textarea value={formDesc} onChange={(e) => setFormDesc(e.target.value)} placeholder="프로젝트 개요" rows={3} />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsProjectModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveProject}>
+              <Save className="w-4 h-4 mr-1.5" /> 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 업무 등록/수정 모달 */}
+      <Dialog open={isTaskModalOpen} onOpenChange={setIsTaskModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{editingTaskIdx >= 0 ? "업무 수정" : "업무 등록"}</DialogTitle>
+            <DialogDescription>업무 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무명 <span className="text-destructive">*</span></span>
+              <Input value={tName} onChange={(e) => setTName(e.target.value)} placeholder="업무명" className="h-8 text-xs sm:h-10 sm:text-sm" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무 유형</span>
+                <Select value={tCategory} onValueChange={setTCategory}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {["기구설계", "전장설계", "SW개발", "구매/조달", "조립/시운전", "검토/승인"].map((c) => (
+                      <SelectItem key={c} value={c}>{c}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자 <span className="text-destructive">*</span></span>
+                <Select value={tAssignee || "none"} onValueChange={(v) => setTAssignee(v === "none" ? "" : v)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">선택</SelectItem>
+                    {["이설계", "박도면", "최기구", "김전장", "정SW", "한조립", "박구매", "팀장"].map((n) => (
+                      <SelectItem key={n} value={n}>{n}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">시작일 <span className="text-destructive">*</span></span>
+                <Input type="date" value={tStart} onChange={(e) => setTStart(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">종료일 <span className="text-destructive">*</span></span>
+                <Input type="date" value={tEnd} onChange={(e) => setTEnd(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상태</span>
+                <Select value={tStatus} onValueChange={(v) => setTStatus(v as TaskStatus)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {(["대기", "진행중", "검토중", "완료"] as TaskStatus[]).map((s) => (
+                      <SelectItem key={s} value={s}>{s}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">진행률 (%)</span>
+                <Input type="number" min={0} max={100} value={tProgress} onChange={(e) => setTProgress(Number(e.target.value))} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+            </div>
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">비고</span>
+              <Textarea value={tRemark} onChange={(e) => setTRemark(e.target.value)} placeholder="비고 사항" rows={2} />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsTaskModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveTask}>
+              <Save className="w-4 h-4 mr-1.5" /> 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 태스크 상세 모달 (수행기록/이슈) */}
+      <Dialog open={isTaskDetailOpen} onOpenChange={setIsTaskDetailOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-3xl max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{detailTask?.name || "업무 상세"}</DialogTitle>
+            <DialogDescription>업무 이력 및 이슈를 확인해주세요.</DialogDescription>
+          </DialogHeader>
+          {detailTask && (
+            <>
+              {/* 태스크 요약 */}
+              <div className="grid grid-cols-2 gap-2 bg-muted/20 p-3 rounded-lg border text-xs">
+                <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">유형</span><span className="font-medium">{detailTask.category}</span></div>
+                <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">담당자</span><span className="font-medium">{detailTask.assignee}</span></div>
+                <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">기간</span><span className="font-medium">{detailTask.start} ~ {detailTask.end}</span></div>
+                <div className="flex gap-2 items-center">
+                  <span className="text-muted-foreground w-[50px]">진행률</span>
+                  <div className="flex items-center gap-1.5 flex-1">
+                    <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden max-w-[60px]">
+                      <div className={cn("h-full rounded-full", progressColor(detailTask.progress))} style={{ width: `${detailTask.progress}%` }} />
+                    </div>
+                    <span className={cn("font-semibold", progressTextColor(detailTask.progress))}>{detailTask.progress}%</span>
+                  </div>
+                </div>
+              </div>
+
+              <Tabs value={taskDetailTab} onValueChange={setTaskDetailTab}>
+                <TabsList className="w-full">
+                  <TabsTrigger value="log" className="flex-1 text-xs">수행이력 ({detailTask.workLogs?.length || 0})</TabsTrigger>
+                  <TabsTrigger value="issue" className="flex-1 text-xs">이슈 ({detailTask.issues?.length || 0})</TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="log" className="mt-3">
+                  <div className="bg-primary/5 rounded-md p-2.5 mb-3 text-xs text-primary border border-primary/20">
+                    수행기록 등록/수정은 <strong>내업무현황</strong> 메뉴에서 진행해요.
+                  </div>
+                  {(!detailTask.workLogs || detailTask.workLogs.length === 0) ? (
+                    <div className="flex flex-col items-center gap-2 py-8 mx-auto max-w-xs border border-dashed border-border rounded-lg">
+                      <ClipboardList className="w-8 h-8 text-muted-foreground/30" />
+                      <span className="text-sm text-muted-foreground">등록된 수행기록이 없어요</span>
+                    </div>
+                  ) : (
+                    <div className="space-y-2 max-h-[300px] overflow-y-auto">
+                      {[...detailTask.workLogs].sort((a, b) => b.date.localeCompare(a.date)).map((log, i) => {
+                        const d = new Date(log.date);
+                        const days = ["일", "월", "화", "수", "목", "금", "토"];
+                        return (
+                          <div key={i} className="flex gap-3 p-3 bg-muted/20 rounded-lg border text-xs">
+                            <div className="bg-background border rounded-md px-2 py-1.5 text-center min-w-[55px] shrink-0">
+                              <div className="text-[10px] text-muted-foreground">{d.getMonth() + 1}월</div>
+                              <div className="text-lg font-bold">{d.getDate()}</div>
+                              <div className="text-[10px] text-muted-foreground">{days[d.getDay()]}</div>
+                            </div>
+                            <div className="flex-1">
+                              <div className="text-sm mb-1">{log.desc}</div>
+                              <div className="flex gap-2 text-muted-foreground flex-wrap">
+                                <Badge variant="secondary" className="text-[10px] py-0">⏱ {log.hours}h</Badge>
+                                {log.progressBefore !== undefined && (
+                                  <Badge variant="outline" className="text-[10px] py-0 bg-primary/5 text-primary border-primary/20">
+                                    📈 {log.progressBefore}% → {log.progressAfter}%
+                                  </Badge>
+                                )}
+                                {log.author && <span>👤 {log.author}</span>}
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </TabsContent>
+
+                <TabsContent value="issue" className="mt-3">
+                  {(!detailTask.issues || detailTask.issues.length === 0) ? (
+                    <div className="flex flex-col items-center gap-2 py-8 mx-auto max-w-xs border border-dashed border-border rounded-lg">
+                      <ClipboardList className="w-8 h-8 text-muted-foreground/30" />
+                      <span className="text-sm text-muted-foreground">등록된 이슈가 없어요</span>
+                    </div>
+                  ) : (
+                    <div className="space-y-2 max-h-[300px] overflow-y-auto">
+                      {detailTask.issues.map((issue) => {
+                        const priorityColor = issue.priority === "긴급" ? "text-destructive" : issue.priority === "높음" ? "text-destructive/70" : "text-muted-foreground";
+                        const statusBadge = issue.status === "해결" ? "bg-primary/10 text-primary" : issue.status === "진행중" ? "bg-primary/10 text-primary" : "bg-destructive/10 text-destructive";
+                        return (
+                          <div key={issue.id} className="border rounded-lg p-3">
+                            <div className="flex items-center justify-between mb-1.5">
+                              <div className="font-semibold text-xs flex items-center gap-1">
+                                <span className={priorityColor}>●</span> {issue.title}
+                              </div>
+                              <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", statusBadge)}>{issue.status}</span>
+                            </div>
+                            <div className="text-xs text-muted-foreground mb-1">{issue.desc}</div>
+                            <div className="flex gap-2 text-[11px] text-muted-foreground">
+                              <span>📅 {issue.registeredDate}</span>
+                              <span>👤 {issue.registeredBy}</span>
+                              {issue.resolvedDate && <span>✅ {issue.resolvedDate}</span>}
+                              <span className={priorityColor}>⚡ {issue.priority}</span>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </TabsContent>
+              </Tabs>
+            </>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsTaskDetailOpen(false)}>닫기</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
+
+// --- 간트차트 컴포넌트 ---
+function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: string; endDate: string }) {
+  const pStart = new Date(startDate);
+  const pEnd = new Date(endDate);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const totalDays = Math.ceil((pEnd.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24)) + 1;
+  const useWeekly = totalDays > 90;
+  const cellWidth = useWeekly ? 50 : 28;
+
+  const dates: Date[] = [];
+  const cur = new Date(pStart);
+  if (useWeekly) {
+    while (cur <= pEnd) {
+      dates.push(new Date(cur));
+      cur.setDate(cur.getDate() + 7);
+    }
+  } else {
+    while (cur <= pEnd) {
+      dates.push(new Date(cur));
+      cur.setDate(cur.getDate() + 1);
+    }
+  }
+
+  const barColors: Record<string, string> = {
+    기구설계: "bg-primary",
+    전장설계: "bg-primary/80",
+    SW개발: "bg-primary/60",
+    "구매/조달": "bg-secondary-foreground/70",
+    "조립/시운전": "bg-destructive/70",
+    "검토/승인": "bg-muted-foreground",
+  };
+
+  const todayFromStart = Math.ceil((today.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24));
+  const todayLeft = useWeekly ? (todayFromStart / 7) * cellWidth + 180 : todayFromStart * cellWidth + 180;
+  const showTodayLine = today >= pStart && today <= pEnd;
+
+  return (
+    <div className="border rounded-lg overflow-hidden">
+      {/* 범례 */}
+      <div className="flex gap-3 p-2 flex-wrap text-[11px] border-b bg-muted/20">
+        {Object.entries(barColors).map(([cat, color]) => (
+          <span key={cat} className="flex items-center gap-1">
+            {categoryIcons[cat]} <span className={cn("w-3 h-3 rounded-sm", color)} /> {cat}
+          </span>
+        ))}
+        <span className="text-destructive font-semibold">│ 오늘</span>
+      </div>
+
+      <div className="overflow-x-auto relative">
+        {showTodayLine && (
+          <div className="absolute top-0 bottom-0 w-[2px] bg-destructive z-5" style={{ left: todayLeft }} />
+        )}
+
+        {/* 헤더 */}
+        <div className="flex border-b sticky top-0 bg-muted/50 z-4">
+          <div className="w-[180px] min-w-[180px] p-2 text-xs font-semibold text-muted-foreground border-r shrink-0">업무명</div>
+          <div className="flex">
+            {dates.map((d, i) => {
+              const dow = d.getDay();
+              const isWeekend = (dow === 0 || dow === 6) && !useWeekly;
+              const isToday = d.toDateString() === today.toDateString();
+              return (
+                <div
+                  key={i}
+                  className={cn(
+                    "text-center text-[10px] text-muted-foreground border-r py-1.5",
+                    isWeekend && "bg-muted/30",
+                    isToday && "bg-primary/5 text-primary font-bold"
+                  )}
+                  style={{ minWidth: cellWidth }}
+                >
+                  {useWeekly ? `${d.getMonth() + 1}/${d.getDate()}` : d.getDate()}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* 행 */}
+        {tasks.map((task, i) => {
+          const tStart = new Date(task.start);
+          const tEnd = new Date(task.end);
+          const dayFromStart = Math.max(0, Math.ceil((tStart.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24)));
+          const taskDays = Math.max(1, Math.ceil((tEnd.getTime() - tStart.getTime()) / (1000 * 60 * 60 * 24)) + 1);
+          const leftPos = useWeekly ? (dayFromStart / 7) * cellWidth : dayFromStart * cellWidth;
+          const barWidth = useWeekly ? (taskDays / 7) * cellWidth : taskDays * cellWidth;
+          const barColor = barColors[task.category] || "bg-primary";
+
+          return (
+            <div key={i} className="flex border-b hover:bg-muted/30 min-h-[34px]">
+              <div className="w-[180px] min-w-[180px] px-3 py-2 text-xs text-muted-foreground border-r truncate shrink-0" title={task.name}>{task.name}</div>
+              <div className="flex relative items-center" style={{ minWidth: dates.length * cellWidth }}>
+                {dates.map((d, di) => {
+                  const dow = d.getDay();
+                  const isWeekend = (dow === 0 || dow === 6) && !useWeekly;
+                  return <div key={di} className={cn("border-r h-full", isWeekend && "bg-muted/30")} style={{ minWidth: cellWidth }} />;
+                })}
+                <div
+                  className={cn("absolute h-5 rounded text-[10px] text-primary-foreground flex items-center justify-center font-semibold", barColor)}
+                  style={{ left: leftPos, width: Math.max(barWidth, 16), top: "50%", transform: "translateY(-50%)" }}
+                >
+                  {barWidth > 30 ? `${task.progress}%` : ""}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/design/task-management/page.tsx b/frontend/app/(main)/COMPANY_8/design/task-management/page.tsx
new file mode 100644
index 00000000..f5603e46
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/design/task-management/page.tsx
@@ -0,0 +1,1288 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  RefreshCw,
+  ClipboardList,
+  Pencil,
+  Inbox,
+  CheckCircle2,
+  XCircle,
+  Rocket,
+  Eye,
+  ArrowRight,
+  Check,
+  ChevronsUpDown,
+  UserCircle,
+  Loader2,
+  User,
+  Users,
+  Settings2,
+} from "lucide-react";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  getDesignRequestList,
+  updateDesignRequest,
+  addRequestHistory,
+  createProject,
+} from "@/lib/api/design";
+import { getUserList } from "@/lib/api/user";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+
+// --- Types ---
+type SourceType = "dr" | "ecr";
+type TaskStatus = "신규접수" | "검토중" | "승인완료" | "반려" | "프로젝트생성";
+type Priority = "긴급" | "높음" | "보통" | "낮음";
+type MainTab = "all" | "dr" | "ecr";
+
+interface HistoryItem {
+  step: string;
+  date: string;
+  user: string;
+  desc: string;
+}
+
+interface TaskItem {
+  dbId: string;
+  id: string;
+  sourceType: SourceType;
+  date: string;
+  dueDate: string;
+  priority: Priority;
+  status: TaskStatus;
+  approvalStep: number;
+  targetName: string;
+  customer: string;
+  reqDept: string;
+  requester: string;
+  designer: string;
+  orderNo?: string;
+  designType?: string;
+  spec?: string;
+  changeType?: string;
+  drawingNo?: string;
+  reason?: string;
+  impact?: string[];
+  reviewMemo: string;
+  projectNo?: string;
+  history: HistoryItem[];
+}
+
+// --- 상태/우선순위 배지 색상 ---
+const getStatusVariant = (status: TaskStatus) => {
+  switch (status) {
+    case "신규접수":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "검토중":
+      return "bg-muted text-muted-foreground border-border";
+    case "승인완료":
+      return "bg-primary/15 text-primary border-primary/25";
+    case "반려":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "프로젝트생성":
+      return "bg-secondary text-secondary-foreground border-border";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getPriorityVariant = (priority: Priority) => {
+  switch (priority) {
+    case "긴급":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "높음":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "보통":
+      return "bg-muted text-muted-foreground border-border";
+    case "낮음":
+      return "bg-muted text-muted-foreground border-border";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getSourceBadge = (type: SourceType) => {
+  if (type === "dr")
+    return "bg-primary/10 text-primary border-primary/20";
+  return "bg-secondary text-secondary-foreground border-border";
+};
+
+const getStepIcon = (step: string) => {
+  switch (step) {
+    case "접수": return <Inbox className="inline h-4 w-4 mr-1" />;
+    case "검토": return <Eye className="inline h-4 w-4 mr-1" />;
+    case "승인": return <CheckCircle2 className="inline h-4 w-4 mr-1" />;
+    case "반려": return <XCircle className="inline h-4 w-4 mr-1" />;
+    case "프로젝트": return <Rocket className="inline h-4 w-4 mr-1" />;
+    default: return <ClipboardList className="inline h-4 w-4 mr-1" />;
+  }
+};
+
+// --- API 응답 → TaskItem 매핑 ---
+function mapApiToTaskItem(r: any): TaskItem {
+  const historyRaw = Array.isArray(r.history) ? r.history : [];
+  const history: HistoryItem[] = historyRaw.map((h: any) => ({
+    step: h.step || "",
+    date: h.history_date || "",
+    user: h.user_name || "",
+    desc: h.description || "",
+  }));
+  const impact = Array.isArray(r.impact) ? r.impact : [];
+  const formatDate = (d: string | null | undefined) =>
+    d ? (d.includes("T") ? d.split("T")[0] : d) : "";
+  return {
+    dbId: r.id,
+    id: r.request_no || r.id,
+    sourceType: (r.source_type === "ecr" ? "ecr" : "dr") as SourceType,
+    date: formatDate(r.request_date),
+    dueDate: formatDate(r.due_date),
+    priority: (r.priority || "보통") as Priority,
+    status: (r.status || "신규접수") as TaskStatus,
+    approvalStep: typeof r.approval_step === "number" ? r.approval_step : 0,
+    targetName: r.target_name || "",
+    customer: r.customer || "",
+    reqDept: r.req_dept || "",
+    requester: r.requester || "",
+    designer: r.designer || "",
+    orderNo: r.order_no,
+    designType: r.design_type,
+    spec: r.spec,
+    changeType: r.change_type,
+    drawingNo: r.drawing_no,
+    reason: r.reason,
+    impact: impact.length ? impact : undefined,
+    reviewMemo: r.review_memo || "",
+    projectNo: r.project_id,
+    history,
+  };
+}
+
+// --- 승인 프로세스 스텝 ---
+const APPROVAL_STEPS = [
+  { label: "접수", step: 0 },
+  { label: "검토", step: 1 },
+  { label: "내부승인", step: 2 },
+  { label: "프로젝트", step: 3 },
+];
+
+// --- 현황 카드 설정 ---
+const STAT_CARDS: { label: string; status: TaskStatus; color: string; textColor: string }[] = [
+  { label: "신규접수", status: "신규접수", color: "bg-primary", textColor: "text-primary-foreground" },
+  { label: "검토중", status: "검토중", color: "bg-muted border border-border", textColor: "text-foreground" },
+  { label: "승인완료", status: "승인완료", color: "bg-primary/80", textColor: "text-primary-foreground" },
+  { label: "반려", status: "반려", color: "bg-destructive", textColor: "text-destructive-foreground" },
+  { label: "프로젝트", status: "프로젝트생성", color: "bg-secondary", textColor: "text-secondary-foreground" },
+];
+
+interface EmployeeOption {
+  userId: string;
+  userName: string;
+  deptName: string;
+}
+
+const TASK_GRID_COLUMNS = [
+  { key: "source_type", label: "구분" },
+  { key: "request_no", label: "접수번호" },
+  { key: "status", label: "상태" },
+  { key: "priority", label: "우선순위" },
+  { key: "target_name", label: "설비/품목명" },
+  { key: "req_dept", label: "의뢰부서" },
+  { key: "requester", label: "의뢰자" },
+  { key: "request_date", label: "접수일자" },
+  { key: "due_date", label: "희망납기" },
+  { key: "designer", label: "설계담당" },
+];
+
+export default function DesignTaskManagementPage() {
+  const ts = useTableSettings("c16-task-management", "dsn_design_request", TASK_GRID_COLUMNS);
+  const { user, userName, loading: authLoading } = useAuth();
+  const [allTasks, setAllTasks] = useState<TaskItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+  const [currentTab, setCurrentTab] = useState<MainTab>("all");
+  const [employees, setEmployees] = useState<EmployeeOption[]>([]);
+  const [myTasksOnly, setMyTasksOnly] = useState(true);
+
+  const fetchEmployees = useCallback(async () => {
+    try {
+      const res = await getUserList({ size: 1000 });
+      if (res.success && res.data) {
+        const list = (res.data as any[]).map((u: any) => ({
+          userId: u.user_id || u.userId,
+          userName: u.user_name || u.userName || "",
+          deptName: u.dept_name || u.deptName || "",
+        }));
+        setEmployees(list);
+      }
+    } catch {
+      // 사원 목록 로드 실패 시 빈 배열 유지
+    }
+  }, []);
+
+  const fetchTasks = useCallback(async () => {
+    setLoading(true);
+    const res = await getDesignRequestList({});
+    setLoading(false);
+    if (res.success && res.data) {
+      const mapped = (res.data as any[]).map(mapApiToTaskItem);
+      setAllTasks(mapped);
+    } else {
+      toast.error(res.message || "데이터를 불러오지 못했습니다.");
+      setAllTasks([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchTasks();
+    fetchEmployees();
+  }, [fetchTasks, fetchEmployees]);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 담당자 선택 모달 상태
+  const [designerModalOpen, setDesignerModalOpen] = useState(false);
+  const [designerModalTaskId, setDesignerModalTaskId] = useState<string | null>(null);
+  const [designerModalValue, setDesignerModalValue] = useState("");
+  const [designerComboOpen, setDesignerComboOpen] = useState(false);
+
+  // 모달 상태
+  const [rejectModalOpen, setRejectModalOpen] = useState(false);
+  const [rejectTaskId, setRejectTaskId] = useState<string | null>(null);
+  const [rejectReason, setRejectReason] = useState("");
+  const [projectModalOpen, setProjectModalOpen] = useState(false);
+  const [projectTaskId, setProjectTaskId] = useState<string | null>(null);
+  const [pmComboOpen, setPmComboOpen] = useState(false);
+  const [projectForm, setProjectForm] = useState({
+    projNo: "",
+    projName: "",
+    projSourceNo: "",
+    projStartDate: "",
+    projEndDate: "",
+    projPM: "",
+    projCustomer: "",
+    projDesc: "",
+  });
+
+  // 검토 메모
+  const [reviewMemoText, setReviewMemoText] = useState("");
+
+  // 현재 사용자 관련 업무만 필터링
+  const myRelatedTasks = useMemo(() => {
+    if (!myTasksOnly || !userName) return allTasks;
+    const currentUserName = userName;
+    const currentDeptName = user?.deptName || "";
+    return allTasks.filter((item) => {
+      if (item.requester === currentUserName) return true;
+      if (item.designer === currentUserName) return true;
+      if (currentDeptName && item.reqDept === currentDeptName) return true;
+      const inHistory = item.history.some((h) => h.user === currentUserName);
+      if (inHistory) return true;
+      return false;
+    });
+  }, [allTasks, myTasksOnly, userName, user?.deptName]);
+
+  // 탭별 카운트
+  const tabCounts = useMemo(() => {
+    const drItems = myRelatedTasks.filter((t) => t.sourceType === "dr");
+    const ecrItems = myRelatedTasks.filter((t) => t.sourceType === "ecr");
+    const newDR = drItems.filter((t) => t.status === "신규접수").length;
+    const newECR = ecrItems.filter((t) => t.status === "신규접수").length;
+    return {
+      all: newDR + newECR || myRelatedTasks.length,
+      allIsNew: newDR + newECR > 0,
+      dr: newDR || drItems.length,
+      drIsNew: newDR > 0,
+      ecr: newECR || ecrItems.length,
+      ecrIsNew: newECR > 0,
+    };
+  }, [myRelatedTasks]);
+
+  // snake_case → camelCase 매핑 (DynamicSearchFilter의 columnName은 snake_case)
+  const taskFieldMap: Record<string, string> = {
+    source_type: "sourceType",
+    request_no: "id",
+    target_name: "targetName",
+    req_dept: "reqDept",
+    request_date: "date",
+    due_date: "dueDate",
+    approval_step: "approvalStep",
+    design_type: "designType",
+    drawing_no: "drawingNo",
+    change_type: "changeType",
+    review_memo: "reviewMemo",
+    project_id: "projectNo",
+  };
+  const getTaskFieldValue = (obj: any, colName: string): string => {
+    const key = taskFieldMap[colName] || colName;
+    const val = obj[key];
+    if (Array.isArray(val)) return val.join(",");
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
+  // 필터링된 데이터
+  const filteredData = useMemo(() => {
+    return myRelatedTasks.filter((item) => {
+      if (currentTab === "dr" && item.sourceType !== "dr") return false;
+      if (currentTab === "ecr" && item.sourceType !== "ecr") return false;
+      for (const f of searchFilters) {
+        const val = getTaskFieldValue(item, f.columnName);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (val !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) return false;
+          if (to && val > to) return false;
+        }
+      }
+      return true;
+    });
+  }, [myRelatedTasks, currentTab, searchFilters]);
+
+  // 현황 통계
+  const stats = useMemo(() => {
+    return {
+      신규접수: myRelatedTasks.filter((t) => t.status === "신규접수").length,
+      검토중: myRelatedTasks.filter((t) => t.status === "검토중").length,
+      승인완료: myRelatedTasks.filter((t) => t.status === "승인완료").length,
+      반려: myRelatedTasks.filter((t) => t.status === "반려").length,
+      프로젝트생성: myRelatedTasks.filter((t) => t.status === "프로젝트생성").length,
+    };
+  }, [myRelatedTasks]);
+
+  const selectedTask = useMemo(
+    () => allTasks.find((t) => t.dbId === selectedTaskId) || null,
+    [allTasks, selectedTaskId]
+  );
+
+  // 선택된 업무 변경 시 메모 동기화
+  useEffect(() => {
+    if (selectedTask) {
+      setReviewMemoText(selectedTask.reviewMemo || "");
+    }
+  }, [selectedTask]);
+
+  // --- 액션 핸들러 ---
+  const handleSelectTask = useCallback((dbId: string) => {
+    setSelectedTaskId(dbId);
+  }, []);
+
+  const handleOpenDesignerModal = useCallback((dbId: string) => {
+    setDesignerModalTaskId(dbId);
+    setDesignerModalValue("");
+    setDesignerComboOpen(false);
+    setDesignerModalOpen(true);
+  }, []);
+
+  const handleConfirmDesigner = useCallback(async () => {
+    if (!designerModalValue) {
+      toast.error("설계 담당자를 선택하세요.");
+      return;
+    }
+    if (!designerModalTaskId) return;
+
+    const selected = employees.find((e) => e.userId === designerModalValue);
+    const designerName = selected?.userName || designerModalValue;
+
+    const historyDate = new Date().toISOString().split("T")[0];
+    const historyRes = await addRequestHistory(designerModalTaskId, {
+      step: "검토",
+      history_date: historyDate,
+      user_name: designerName,
+      description: "검토 착수 - 담당자 배정",
+    });
+    if (!historyRes.success) {
+      toast.error(historyRes.message || "이력 추가에 실패했습니다.");
+      return;
+    }
+
+    const updateRes = await updateDesignRequest(designerModalTaskId, {
+      status: "검토중",
+      approval_step: 1,
+      designer: designerName,
+    });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "상태 업데이트에 실패했습니다.");
+      return;
+    }
+    setDesignerModalOpen(false);
+    toast.success("검토가 착수되었습니다.");
+    fetchTasks();
+  }, [designerModalTaskId, designerModalValue, employees, fetchTasks]);
+
+  const handleApprove = useCallback(
+    async (dbId: string) => {
+      if (!confirm("내부 승인을 진행하시겠습니까?")) return;
+
+      const historyDate = new Date().toISOString().split("T")[0];
+      const historyRes = await addRequestHistory(dbId, {
+        step: "승인",
+        history_date: historyDate,
+        user_name: "팀장",
+        description: "내부 검토 완료, 승인 처리",
+      });
+      if (!historyRes.success) {
+        toast.error(historyRes.message || "이력 추가에 실패했습니다.");
+        return;
+      }
+
+      const updateRes = await updateDesignRequest(dbId, {
+        status: "승인완료",
+        approval_step: 3,
+      });
+      if (!updateRes.success) {
+        toast.error(updateRes.message || "상태 업데이트에 실패했습니다.");
+        return;
+      }
+      toast.success("승인 처리되었습니다.");
+      fetchTasks();
+    },
+    [fetchTasks]
+  );
+
+  const handleOpenRejectModal = useCallback((dbId: string) => {
+    setRejectTaskId(dbId);
+    setRejectReason("");
+    setRejectModalOpen(true);
+  }, []);
+
+  const handleConfirmReject = useCallback(async () => {
+    if (!rejectReason.trim()) {
+      toast.error("반려 사유를 입력하세요.");
+      return;
+    }
+    if (!rejectTaskId) return;
+
+    const historyDate = new Date().toISOString().split("T")[0];
+    const historyRes = await addRequestHistory(rejectTaskId, {
+      step: "반려",
+      history_date: historyDate,
+      user_name: "팀장",
+      description: rejectReason,
+    });
+    if (!historyRes.success) {
+      toast.error(historyRes.message || "이력 추가에 실패했습니다.");
+      return;
+    }
+
+    const updateRes = await updateDesignRequest(rejectTaskId, {
+      status: "반려",
+      approval_step: -1,
+      review_memo: rejectReason,
+    });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "상태 업데이트에 실패했습니다.");
+      return;
+    }
+    setRejectModalOpen(false);
+    toast.success("반려 처리되었습니다.");
+    fetchTasks();
+  }, [rejectTaskId, rejectReason, fetchTasks]);
+
+  const handleOpenProjectModal = useCallback(
+    (dbId: string) => {
+      const task = allTasks.find((t) => t.dbId === dbId);
+      if (!task) return;
+
+      const year = new Date().getFullYear();
+      const existingProjects = allTasks.filter((t) => t.projectNo).length;
+      const projNo = `PJ-${year}-${String(existingProjects + 1).padStart(4, "0")}`;
+
+      setProjectTaskId(dbId);
+      const matchedEmployee = employees.find((e) => e.userName === task.designer);
+      setProjectForm({
+        projNo,
+        projName: task.targetName,
+        projSourceNo: task.id,
+        projStartDate: new Date().toISOString().split("T")[0],
+        projEndDate: task.dueDate,
+        projPM: matchedEmployee?.userId || "",
+        projCustomer: task.customer || task.reqDept,
+        projDesc: task.sourceType === "dr" ? task.spec || "" : task.reason || "",
+      });
+      setProjectModalOpen(true);
+    },
+    [allTasks, employees]
+  );
+
+  const handleCreateProject = useCallback(async () => {
+    if (!projectForm.projName.trim()) { toast.error("프로젝트명을 입력하세요."); return; }
+    if (!projectForm.projStartDate) { toast.error("시작일을 입력하세요."); return; }
+    if (!projectForm.projEndDate) { toast.error("종료예정일을 입력하세요."); return; }
+    if (!projectForm.projPM) { toast.error("PM을 선택하세요."); return; }
+    if (!projectTaskId) return;
+
+    const pmEmployee = employees.find((e) => e.userId === projectForm.projPM);
+    const pmName = pmEmployee?.userName || projectForm.projPM;
+
+    // 1) 실제 프로젝트 테이블(dsn_project)에 INSERT
+    const projectRes = await createProject({
+      project_no: projectForm.projNo,
+      name: projectForm.projName,
+      status: "계획",
+      pm: pmName,
+      customer: projectForm.projCustomer,
+      start_date: projectForm.projStartDate,
+      end_date: projectForm.projEndDate,
+      source_no: projectForm.projSourceNo,
+      description: projectForm.projDesc,
+      progress: "0",
+    });
+    if (!projectRes.success) {
+      toast.error(projectRes.message || "프로젝트 생성에 실패했습니다.");
+      return;
+    }
+
+    const createdProjectId = projectRes.data?.id || projectForm.projNo;
+
+    // 2) 이력 추가
+    const historyDate = new Date().toISOString().split("T")[0];
+    const historyRes = await addRequestHistory(projectTaskId, {
+      step: "프로젝트",
+      history_date: historyDate,
+      user_name: pmName,
+      description: `${projectForm.projNo} 프로젝트 생성 - ${projectForm.projName}`,
+    });
+    if (!historyRes.success) {
+      toast.error(historyRes.message || "이력 추가에 실패했습니다.");
+      return;
+    }
+
+    // 3) 설계요청 상태 업데이트 + 프로젝트 ID 연결
+    const updateRes = await updateDesignRequest(projectTaskId, {
+      status: "프로젝트생성",
+      approval_step: 4,
+      project_id: createdProjectId,
+    });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "상태 업데이트에 실패했습니다.");
+      return;
+    }
+    setProjectModalOpen(false);
+    toast.success(`프로젝트 ${projectForm.projNo}가 생성되었습니다.`);
+    fetchTasks();
+  }, [projectForm, projectTaskId, employees, fetchTasks]);
+
+  const handleSaveReviewMemo = useCallback(async () => {
+    if (!selectedTaskId) return;
+
+    const updateRes = await updateDesignRequest(selectedTaskId, {
+      review_memo: reviewMemoText,
+    });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "메모 저장에 실패했습니다.");
+      return;
+    }
+    toast.success("검토 메모가 저장되었습니다.");
+    fetchTasks();
+  }, [selectedTaskId, reviewMemoText, fetchTasks]);
+
+  const handleFilterByStatus = useCallback((_status: TaskStatus) => {
+    // Status filter now handled by DynamicSearchFilter
+  }, []);
+
+  // 납기 남은 일수 계산
+  const getDueDateInfo = (dueDate: string) => {
+    const due = new Date(dueDate);
+    const today = new Date();
+    const diffDays = Math.ceil((due.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+    const color = diffDays < 0 ? "text-destructive" : diffDays <= 7 ? "text-primary" : "text-muted-foreground";
+    const text = diffDays < 0 ? `${Math.abs(diffDays)}일 초과` : diffDays === 0 ? "오늘" : `${diffDays}일 남음`;
+    return { color, text };
+  };
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col overflow-hidden bg-background">
+      {/* 탭 바 */}
+      <div className="flex items-center border-b-2 border-border bg-card px-5">
+        {([
+          { key: "all" as MainTab, label: "전체", icon: <ClipboardList className="h-4 w-4" />, count: tabCounts.all, isNew: tabCounts.allIsNew },
+          { key: "dr" as MainTab, label: "설계의뢰(DR)", icon: <Pencil className="h-4 w-4" />, count: tabCounts.dr, isNew: tabCounts.drIsNew },
+          { key: "ecr" as MainTab, label: "설계변경(ECR)", icon: <RefreshCw className="h-4 w-4" />, count: tabCounts.ecr, isNew: tabCounts.ecrIsNew },
+        ]).map((tab) => (
+          <button
+            key={tab.key}
+            className={cn(
+              "relative flex items-center gap-2 px-6 py-3.5 text-sm font-semibold transition-colors",
+              currentTab === tab.key
+                ? "text-primary after:absolute after:bottom-[-2px] after:left-0 after:right-0 after:h-0.5 after:bg-primary"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground"
+            )}
+            onClick={() => {
+              setCurrentTab(tab.key);
+              setSelectedTaskId(null);
+            }}
+          >
+            {tab.icon}
+            {tab.label}
+            <span
+              className={cn(
+                "min-w-[20px] rounded-full px-1.5 py-0.5 text-center text-[11px] font-bold",
+                tab.isNew ? "bg-destructive text-destructive-foreground" : "bg-muted text-muted-foreground"
+              )}
+            >
+              {tab.count}
+            </span>
+          </button>
+        ))}
+        <div className="flex-1" />
+        <div className="flex items-center gap-3">
+          {userName && (
+            <div className="flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
+              <UserCircle className="h-3.5 w-3.5" />
+              {userName}
+              {user?.deptName && <span className="text-primary/60">({user.deptName})</span>}
+            </div>
+          )}
+          <div className="flex items-center overflow-hidden rounded-full border border-border">
+            <button
+              className={cn(
+                "flex items-center gap-1 px-3 py-1.5 text-xs font-medium transition-colors",
+                myTasksOnly
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-card text-muted-foreground hover:text-foreground"
+              )}
+              onClick={() => setMyTasksOnly(true)}
+            >
+              <User className="h-3 w-3" />
+              내 업무
+            </button>
+            <button
+              className={cn(
+                "flex items-center gap-1 px-3 py-1.5 text-xs font-medium transition-colors",
+                !myTasksOnly
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-card text-muted-foreground hover:text-foreground"
+              )}
+              onClick={() => setMyTasksOnly(false)}
+            >
+              <Users className="h-3 w-3" />
+              전체
+            </button>
+          </div>
+          <div className="flex items-center gap-1.5 rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">
+            <span className="h-2 w-2 animate-pulse rounded-full bg-primary" />
+            실시간 동기화 중
+          </div>
+        </div>
+      </div>
+
+      {/* 검색 필터 */}
+      <div className="border-b border-border bg-card px-4 py-3">
+        <DynamicSearchFilter
+          tableName="dsn_design_request"
+          filterId="c16-task-management"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredData.length}
+        />
+      </div>
+
+      {/* 좌우 분할 패널 */}
+      <div className="flex-1 overflow-hidden p-3">
+        <ResizablePanelGroup direction="horizontal" className="h-full rounded-lg border border-border">
+          {/* 왼쪽: 접수 목록 */}
+          <ResizablePanel defaultSize={58} minSize={35}>
+            <div className="flex h-full flex-col bg-card">
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold flex items-center gap-2">
+                  {myTasksOnly ? "내 관련 업무" : "접수 업무 목록"}
+                  <span className="text-primary bg-primary/8 border border-primary/15 rounded-md px-1.5 py-0.5 text-[11px] font-semibold">{filteredData.length}건</span>
+                  {myTasksOnly && (
+                    <span className="text-xs font-normal text-muted-foreground">
+                      전체 {allTasks.length}건 중
+                    </span>
+                  )}
+                </div>
+                <Button size="sm" variant="outline" onClick={fetchTasks} disabled={loading}>
+                  {loading ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                  동기화
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+              <EDataTable<TaskItem>
+                columns={ts.visibleColumns.map((col): EDataTableColumn<TaskItem> => ({
+                  key: col.key === "request_no" ? "id" : col.key === "target_name" ? "targetName" : col.key === "req_dept" ? "reqDept" : col.key === "request_date" ? "date" : col.key === "due_date" ? "dueDate" : col.key === "source_type" ? "sourceType" : col.key,
+                  label: col.label,
+                  width: col.key === "source_type" ? "w-[60px]" : col.key === "request_no" ? "w-[130px]" : col.key === "status" ? "w-[90px]" : col.key === "priority" ? "w-[80px]" : col.key === "target_name" ? "min-w-[180px]" : col.key === "req_dept" ? "w-[90px]" : col.key === "requester" ? "w-[80px]" : col.key === "request_date" ? "w-[100px]" : col.key === "due_date" ? "w-[100px]" : col.key === "designer" ? "w-[80px]" : undefined,
+                  align: (col.key === "source_type" || col.key === "status" || col.key === "priority") ? "center" : undefined,
+                  render: col.key === "source_type"
+                    ? (val: any, row: TaskItem) => (
+                        <Badge variant="outline" className={cn("text-[10px] font-bold", getSourceBadge(row.sourceType))}>
+                          {row.sourceType === "dr" ? "DR" : "ECR"}
+                        </Badge>
+                      )
+                    : col.key === "request_no"
+                    ? (val: any, row: TaskItem) => (
+                        <span className={cn("text-[13px] font-semibold", row.sourceType === "dr" ? "text-primary" : "text-secondary-foreground")}>
+                          {val}
+                        </span>
+                      )
+                    : col.key === "status"
+                    ? (val: any) => (
+                        <Badge variant="outline" className={cn("text-[10px]", getStatusVariant(val))}>
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "priority"
+                    ? (val: any) => (
+                        <Badge variant="outline" className={cn("text-[10px]", getPriorityVariant(val))}>
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "designer"
+                    ? (val: any) => val ? <span>{val}</span> : <span className="text-muted-foreground">미배정</span>
+                    : undefined,
+                }))}
+                data={ts.groupData(filteredData)}
+                loading={loading}
+                emptyMessage="조건에 맞는 업무가 없어요"
+                rowKey={(row) => row.dbId}
+                selectedId={selectedTaskId}
+                onSelect={(id) => handleSelectTask(id ?? "")}
+                draggableColumns={false}
+                showPagination={false}
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 오른쪽: 검토 및 승인 */}
+          <ResizablePanel defaultSize={42} minSize={30}>
+            <div className="flex h-full flex-col bg-card">
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold">검토 및 승인</div>
+              </div>
+              <div className="flex-1 overflow-auto p-3">
+                {/* 업무 현황 */}
+                <div className="mb-3 space-y-1.5">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무 현황</span>
+                  <div className="grid grid-cols-5 gap-2">
+                    {STAT_CARDS.map((card) => (
+                      <button
+                        key={card.status}
+                        className={cn(
+                          "rounded-lg p-2.5 text-center transition-all hover:-translate-y-0.5 hover:shadow-md",
+                          card.color, card.textColor
+                        )}
+                        onClick={() => handleFilterByStatus(card.status)}
+                      >
+                        <div className="text-[11px] font-medium opacity-90 leading-tight">{card.label}</div>
+                        <div className="text-xl font-bold mt-0.5">{stats[card.status]}</div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* 상세 정보 */}
+                {!selectedTask ? (
+                  <div className="flex items-center justify-center p-6">
+                    <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-10 py-8 text-center">
+                      <Inbox className="h-10 w-10 text-muted-foreground/40" />
+                      <p className="text-sm text-muted-foreground">좌측에서 업무를 선택해주세요</p>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="space-y-3">
+                    {/* 승인 프로세스 */}
+                    <div className="rounded-lg border border-border/80 bg-muted/30 p-3.5">
+                      <h3 className="mb-3 text-sm font-bold text-foreground">승인 프로세스</h3>
+                      <div className="mb-3 flex items-center gap-1">
+                        {APPROVAL_STEPS.map((s, idx) => {
+                          let stepClass = "border-border bg-card text-muted-foreground";
+                          if (selectedTask.status === "반려" && idx >= 2) {
+                            stepClass = idx === 2 ? "border-destructive bg-destructive/5 text-destructive" : "border-border bg-card text-muted-foreground";
+                          } else if (selectedTask.approvalStep > idx) {
+                            stepClass = "border-primary bg-primary/5 text-primary";
+                          } else if (selectedTask.approvalStep === idx) {
+                            stepClass = "border-primary bg-primary/5 text-primary ring-2 ring-primary/10";
+                          }
+                          return (
+                            <React.Fragment key={s.label}>
+                              <div className={cn("flex min-w-[70px] flex-col items-center gap-1 rounded-lg border-2 px-3 py-2 text-center text-xs font-semibold transition-all", stepClass)}>
+                                {s.label}
+                              </div>
+                              {idx < APPROVAL_STEPS.length - 1 && (
+                                <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground/50" />
+                              )}
+                            </React.Fragment>
+                          );
+                        })}
+                      </div>
+
+                      {/* 액션 버튼 */}
+                      <div className="flex flex-wrap gap-2">
+                        {selectedTask.status === "신규접수" && (
+                          <>
+                            <Button size="sm" variant="default" onClick={() => handleOpenDesignerModal(selectedTask.dbId)}>
+                              <Eye className="mr-1 h-3.5 w-3.5" /> 검토 착수
+                            </Button>
+                            <Button size="sm" variant="destructive" onClick={() => handleOpenRejectModal(selectedTask.dbId)}>
+                              <XCircle className="mr-1 h-3.5 w-3.5" /> 반려
+                            </Button>
+                          </>
+                        )}
+                        {selectedTask.status === "검토중" && (
+                          <>
+                            <Button size="sm" variant="default" onClick={() => handleApprove(selectedTask.dbId)}>
+                              <CheckCircle2 className="mr-1 h-3.5 w-3.5" /> 내부 승인
+                            </Button>
+                            <Button size="sm" variant="destructive" onClick={() => handleOpenRejectModal(selectedTask.dbId)}>
+                              <XCircle className="mr-1 h-3.5 w-3.5" /> 반려
+                            </Button>
+                          </>
+                        )}
+                        {selectedTask.status === "승인완료" && (
+                          <Button size="sm" variant="default" onClick={() => handleOpenProjectModal(selectedTask.dbId)}>
+                            <Rocket className="mr-1 h-3.5 w-3.5" /> 프로젝트 생성
+                          </Button>
+                        )}
+                        {selectedTask.status === "프로젝트생성" && selectedTask.projectNo && (
+                          <Button size="sm" variant="default" onClick={() => toast.info(`${selectedTask.projectNo} 프로젝트 → 설계프로젝트관리 메뉴에서 확인`)}>
+                            프로젝트 보기 ({selectedTask.projectNo})
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 접수 정보 */}
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">접수 정보</h3>
+                      <div className="text-xs">
+                        <table className="w-full border-collapse">
+                          <tbody>
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">접수번호</td>
+                              <td className={cn("border border-muted px-2 py-1.5 font-semibold", selectedTask.sourceType === "dr" ? "text-primary" : "text-secondary-foreground")}>
+                                {selectedTask.id}
+                              </td>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">구분</td>
+                              <td className="border border-muted px-2 py-1.5">
+                                <Badge variant="outline" className={cn("text-[10px] font-bold", getSourceBadge(selectedTask.sourceType))}>
+                                  {selectedTask.sourceType === "dr" ? "설계의뢰(DR)" : "설계변경(ECR)"}
+                                </Badge>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">상태</td>
+                              <td className="border border-muted px-2 py-1.5">
+                                <Badge variant="outline" className={cn("text-[10px]", getStatusVariant(selectedTask.status))}>
+                                  {selectedTask.status}
+                                </Badge>
+                              </td>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">우선순위</td>
+                              <td className="border border-muted px-2 py-1.5">
+                                <Badge variant="outline" className={cn("text-[10px]", getPriorityVariant(selectedTask.priority))}>
+                                  {selectedTask.priority}
+                                </Badge>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">
+                                {selectedTask.sourceType === "dr" ? "설비/품목명" : "품목명"}
+                              </td>
+                              <td colSpan={3} className="border border-muted px-2 py-1.5 font-medium">{selectedTask.targetName}</td>
+                            </tr>
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">의뢰부서</td>
+                              <td className="border border-muted px-2 py-1.5">{selectedTask.reqDept}</td>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">의뢰자</td>
+                              <td className="border border-muted px-2 py-1.5">{selectedTask.requester}</td>
+                            </tr>
+                            {selectedTask.sourceType === "dr" ? (
+                              <>
+                                <tr>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">설계유형</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.designType || "-"}</td>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">고객명</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.customer || "-"}</td>
+                                </tr>
+                                <tr>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">수주번호</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.orderNo || "-"}</td>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">설계담당</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.designer || <span className="text-muted-foreground">미배정</span>}</td>
+                                </tr>
+                              </>
+                            ) : (
+                              <>
+                                <tr>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">변경유형</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.changeType || "-"}</td>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">도면번호</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.drawingNo || "-"}</td>
+                                </tr>
+                                <tr>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">설계담당</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.designer || <span className="text-muted-foreground">미배정</span>}</td>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">영향범위</td>
+                                  <td className="border border-muted px-2 py-1.5">
+                                    {selectedTask.impact ? (
+                                      <div className="flex flex-wrap gap-1">
+                                        {selectedTask.impact.map((i) => (
+                                          <Badge key={i} variant="outline" className="bg-primary/5 text-[10px] text-primary">{i}</Badge>
+                                        ))}
+                                      </div>
+                                    ) : "-"}
+                                  </td>
+                                </tr>
+                              </>
+                            )}
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">접수일자</td>
+                              <td className="border border-muted px-2 py-1.5">{selectedTask.date}</td>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">희망납기</td>
+                              <td className="border border-muted px-2 py-1.5">
+                                {selectedTask.dueDate}{" "}
+                                <span className={cn("text-[10px]", getDueDateInfo(selectedTask.dueDate).color)}>
+                                  ({getDueDateInfo(selectedTask.dueDate).text})
+                                </span>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+
+                    {/* 요구사양 / 변경사유 */}
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">
+                        {selectedTask.sourceType === "dr" ? "요구사양" : "변경 사유"}
+                      </h3>
+                      <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed text-foreground">
+                        {selectedTask.sourceType === "dr" ? selectedTask.spec : selectedTask.reason}
+                      </pre>
+                    </div>
+
+                    {/* 검토 메모 */}
+                    <div className="rounded-lg border border-primary/20 bg-primary/5 p-3.5">
+                      <h3 className="mb-2 text-sm font-semibold text-foreground">검토 의견 / 메모</h3>
+                      <Textarea
+                        value={reviewMemoText}
+                        onChange={(e) => setReviewMemoText(e.target.value)}
+                        placeholder="검토 의견을 기록해주세요..."
+                        className="min-h-[60px] text-xs"
+                      />
+                      <div className="mt-2 text-right">
+                        <Button size="sm" onClick={handleSaveReviewMemo}>
+                          메모 저장
+                        </Button>
+                      </div>
+                    </div>
+
+                    {/* 처리 이력 */}
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">처리 이력</h3>
+                      <div className="relative pl-6">
+                        <div className="absolute bottom-0 left-[7px] top-0 w-0.5 bg-border" />
+                        {selectedTask.history.map((h, idx) => {
+                          const isLast = idx === selectedTask.history.length - 1;
+                          let dotColor = "bg-primary ring-primary";
+                          if (isLast) {
+                            if (h.step === "반려") dotColor = "bg-destructive ring-destructive";
+                            else if (h.step !== "프로젝트") dotColor = "bg-primary ring-primary animate-pulse";
+                          }
+                          return (
+                            <div key={idx} className={cn("relative pb-5", isLast && "pb-0")}>
+                              <div className={cn("absolute -left-[17px] top-1 h-3 w-3 rounded-full border-2 border-white ring-2", dotColor)} />
+                              <div className="pl-1">
+                                <div className="text-xs font-semibold text-foreground">
+                                  {getStepIcon(h.step)}
+                                  {h.step}
+                                </div>
+                                <div className="text-[11px] text-muted-foreground">{h.desc}</div>
+                                <div className="text-[10px] text-muted-foreground/70">{h.date} · {h.user}</div>
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 설계 담당자 선택 모달 */}
+      <Dialog open={designerModalOpen} onOpenChange={setDesignerModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>설계 담당자 배정</DialogTitle>
+            <DialogDescription>검토를 진행할 설계 담당자를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                설계 담당자 <span className="text-destructive">*</span>
+              </span>
+              <Popover open={designerComboOpen} onOpenChange={setDesignerComboOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={designerComboOpen}
+                    className="mt-1 h-9 w-full justify-between text-sm"
+                  >
+                    {designerModalValue
+                      ? (() => {
+                          const emp = employees.find((e) => e.userId === designerModalValue);
+                          return emp ? `${emp.userName} (${emp.deptName || "부서 미지정"})` : designerModalValue;
+                        })()
+                      : "사원 선택"}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                  <Command>
+                    <CommandInput placeholder="이름, 부서로 검색..." />
+                    <CommandList>
+                      <CommandEmpty className="py-3 text-center text-sm">사원을 찾을 수 없어요.</CommandEmpty>
+                      <CommandGroup>
+                        {employees.map((emp) => (
+                          <CommandItem
+                            key={emp.userId}
+                            value={`${emp.userName} ${emp.deptName} ${emp.userId}`}
+                            onSelect={() => {
+                              setDesignerModalValue(emp.userId);
+                              setDesignerComboOpen(false);
+                            }}
+                          >
+                            <Check className={cn("mr-2 h-4 w-4", designerModalValue === emp.userId ? "opacity-100" : "opacity-0")} />
+                            <UserCircle className="mr-2 h-4 w-4 text-muted-foreground" />
+                            <div className="flex flex-col">
+                              <span className="font-medium">{emp.userName}</span>
+                              <span className="text-[10px] text-muted-foreground">{emp.deptName || "부서 미지정"}</span>
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDesignerModalOpen(false)}>취소</Button>
+            <Button onClick={handleConfirmDesigner}>검토 착수</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 반려 사유 모달 */}
+      <Dialog open={rejectModalOpen} onOpenChange={setRejectModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>반려 처리</DialogTitle>
+            <DialogDescription>반려 사유를 상세히 기술해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                반려 사유 <span className="text-destructive">*</span>
+              </span>
+              <Textarea
+                value={rejectReason}
+                onChange={(e) => setRejectReason(e.target.value)}
+                placeholder="반려 사유를 상세히 기술해주세요"
+                className="mt-1 min-h-[120px] text-sm"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRejectModalOpen(false)}>취소</Button>
+            <Button variant="destructive" onClick={handleConfirmReject}>반려 확인</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 프로젝트 생성 모달 */}
+      <Dialog open={projectModalOpen} onOpenChange={setProjectModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>설계 프로젝트 생성</DialogTitle>
+            <DialogDescription>프로젝트 기본 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+        <div className="space-y-4">
+          <div className="rounded-lg bg-muted/50 p-4">
+            <h4 className="mb-3 border-b border-border pb-2 text-sm font-semibold">프로젝트 기본 정보</h4>
+            <div className="space-y-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 번호</span>
+                <Input value={projectForm.projNo} readOnly className="mt-1 h-9 bg-muted text-sm" />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                  프로젝트명 <span className="text-destructive">*</span>
+                </span>
+                <Input
+                  value={projectForm.projName}
+                  onChange={(e) => setProjectForm((p) => ({ ...p, projName: e.target.value }))}
+                  placeholder="프로젝트명 입력"
+                  className="mt-1 h-9 text-sm"
+                />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">원 접수번호</span>
+                <Input value={projectForm.projSourceNo} readOnly className="mt-1 h-9 bg-muted text-sm" />
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    시작일 <span className="text-destructive">*</span>
+                  </span>
+                  <Input
+                    type="date"
+                    value={projectForm.projStartDate}
+                    onChange={(e) => setProjectForm((p) => ({ ...p, projStartDate: e.target.value }))}
+                    className="mt-1 h-9 text-sm"
+                  />
+                </div>
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    종료예정일 <span className="text-destructive">*</span>
+                  </span>
+                  <Input
+                    type="date"
+                    value={projectForm.projEndDate}
+                    onChange={(e) => setProjectForm((p) => ({ ...p, projEndDate: e.target.value }))}
+                    className="mt-1 h-9 text-sm"
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    PM <span className="text-destructive">*</span>
+                  </span>
+                  <Popover open={pmComboOpen} onOpenChange={setPmComboOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={pmComboOpen}
+                        className="mt-1 h-9 w-full justify-between text-sm"
+                      >
+                        {projectForm.projPM
+                          ? employees.find((e) => e.userId === projectForm.projPM)?.userName || projectForm.projPM
+                          : "PM 선택"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                      <Command>
+                        <CommandInput placeholder="사원 검색..." />
+                        <CommandList>
+                          <CommandEmpty className="py-3 text-center text-sm">사원을 찾을 수 없어요.</CommandEmpty>
+                          <CommandGroup>
+                            {employees.map((emp) => (
+                              <CommandItem
+                                key={emp.userId}
+                                value={`${emp.userName} ${emp.deptName} ${emp.userId}`}
+                                onSelect={() => {
+                                  setProjectForm((p) => ({ ...p, projPM: emp.userId }));
+                                  setPmComboOpen(false);
+                                }}
+                              >
+                                <Check className={cn("mr-2 h-4 w-4", projectForm.projPM === emp.userId ? "opacity-100" : "opacity-0")} />
+                                <div className="flex flex-col">
+                                  <span className="font-medium">{emp.userName}</span>
+                                  <span className="text-[10px] text-muted-foreground">{emp.deptName || "부서 미지정"}</span>
+                                </div>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">고객명</span>
+                  <Input value={projectForm.projCustomer} readOnly className="mt-1 h-9 bg-muted text-sm" />
+                </div>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 설명</span>
+                <Textarea
+                  value={projectForm.projDesc}
+                  onChange={(e) => setProjectForm((p) => ({ ...p, projDesc: e.target.value }))}
+                  placeholder="프로젝트 개요 및 목표를 기술해주세요"
+                  className="mt-1 min-h-[80px] text-sm"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setProjectModalOpen(false)}>취소</Button>
+            <Button onClick={handleCreateProject}>프로젝트 생성</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/equipment/info/page.tsx b/frontend/app/(main)/COMPANY_8/equipment/info/page.tsx
new file mode 100644
index 00000000..cd53e9b1
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/equipment/info/page.tsx
@@ -0,0 +1,950 @@
+"use client";
+
+/**
+ * 설비정보 — 하드코딩 페이지
+ *
+ * 좌측: 설비 목록 (equipment_mng)
+ * 우측: 탭 (기본정보 / 점검항목 / 소모품)
+ * 점검항목 복사 기능 포함
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Inbox, ClipboardCheck, Package, Copy, Info, Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { ImageUpload } from "@/components/common/ImageUpload";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const EQUIP_TABLE = "equipment_mng";
+const INSPECTION_TABLE = "equipment_inspection_item";
+const CONSUMABLE_TABLE = "equipment_consumable";
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "equipment_code", label: "설비코드" },
+  { key: "equipment_name", label: "설비명" },
+  { key: "equipment_type", label: "설비유형" },
+  { key: "manufacturer", label: "제조사" },
+  { key: "installation_location", label: "설치장소" },
+  { key: "operation_status", label: "가동상태" },
+];
+export default function EquipmentInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 좌측
+  const [equipments, setEquipments] = useState<any[]>([]);
+  const [equipLoading, setEquipLoading] = useState(false);
+  const [equipCount, setEquipCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [selectedEquipId, setSelectedEquipId] = useState<string | null>(null);
+
+  // 우측 탭
+  const [rightTab, setRightTab] = useState<"info" | "inspection" | "consumable">("info");
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspectionLoading, setInspectionLoading] = useState(false);
+  const [consumables, setConsumables] = useState<any[]>([]);
+  const [consumableLoading, setConsumableLoading] = useState(false);
+
+  // 카테고리
+  const [catOptions, setCatOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 설비 등록/수정 모달
+  const [equipModalOpen, setEquipModalOpen] = useState(false);
+  const [equipEditMode, setEquipEditMode] = useState(false);
+  const [equipForm, setEquipForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 기본정보 탭 편집 폼
+  const [infoForm, setInfoForm] = useState<Record<string, any>>({});
+  const [infoSaving, setInfoSaving] = useState(false);
+
+  // 점검항목 추가/수정 모달
+  const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
+  const [inspectionForm, setInspectionForm] = useState<Record<string, any>>({});
+  const [inspectionContinuous, setInspectionContinuous] = useState(false);
+  const [inspectionEditMode, setInspectionEditMode] = useState(false);
+
+  // 소모품 추가/수정 모달
+  const [consumableModalOpen, setConsumableModalOpen] = useState(false);
+  const [consumableForm, setConsumableForm] = useState<Record<string, any>>({});
+  const [consumableContinuous, setConsumableContinuous] = useState(false);
+  const [consumableEditMode, setConsumableEditMode] = useState(false);
+  const [consumableItemOptions, setConsumableItemOptions] = useState<any[]>([]);
+
+  // 점검항목 복사
+  const [copyModalOpen, setCopyModalOpen] = useState(false);
+  const [copySourceEquip, setCopySourceEquip] = useState("");
+  const [copyItems, setCopyItems] = useState<any[]>([]);
+  const [copyChecked, setCopyChecked] = useState<Set<string>>(new Set());
+  const [copyLoading, setCopyLoading] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-equipment-info", EQUIP_TABLE, GRID_COLUMNS_CONFIG);
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["equipment_type", "operation_status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${EQUIP_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      for (const col of ["inspection_cycle", "inspection_method"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${INSPECTION_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCatOptions(optMap);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return catOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      equipment_code: { width: "w-[110px]" },
+      equipment_name: { minWidth: "min-w-[130px]", truncate: true, render: (v) => v || "-" },
+      equipment_type: { width: "w-[90px]", render: (v) => v || "-" },
+      manufacturer: { width: "w-[100px]", render: (v) => v || "-" },
+      installation_location: { width: "w-[100px]", render: (v) => v || "-" },
+      operation_status: { width: "w-[80px]", render: (v) => v || "-" },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 설비 조회
+  const fetchEquipments = useCallback(async () => {
+    setEquipLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${EQUIP_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setEquipments(raw.map((r: any) => ({
+        ...r,
+        equipment_type: resolve("equipment_type", r.equipment_type),
+        operation_status: resolve("operation_status", r.operation_status),
+      })));
+      setEquipCount(res.data?.data?.total || raw.length);
+    } catch { toast.error("설비 목록 조회 실패"); } finally { setEquipLoading(false); }
+  }, [searchFilters, catOptions]);
+
+  useEffect(() => { fetchEquipments(); }, [fetchEquipments]);
+
+  const selectedEquip = equipments.find((e) => e.id === selectedEquipId);
+
+  // 기본정보 탭 폼 초기화 (설비 선택 변경 시)
+  useEffect(() => {
+    if (selectedEquip) setInfoForm({ ...selectedEquip });
+    else setInfoForm({});
+  }, [selectedEquipId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 기본정보 저장
+  const handleInfoSave = async () => {
+    if (!infoForm.id) return;
+    setInfoSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, ...fields } = infoForm;
+      await apiClient.put(`/table-management/tables/${EQUIP_TABLE}/edit`, { originalData: { id }, updatedData: fields });
+      toast.success("저장되었습니다.");
+      fetchEquipments();
+    } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); }
+    finally { setInfoSaving(false); }
+  };
+
+  // 우측: 점검항목 조회
+  useEffect(() => {
+    if (!selectedEquip?.equipment_code) { setInspections([]); return; }
+    const fetchData = async () => {
+      setInspectionLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "equipment_code", operator: "equals", value: selectedEquip.equipment_code }] },
+          autoFilter: true,
+        });
+        setInspections(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setInspections([]); } finally { setInspectionLoading(false); }
+    };
+    fetchData();
+  }, [selectedEquip?.equipment_code]);
+
+  // 우측: 소모품 조회
+  useEffect(() => {
+    if (!selectedEquip?.equipment_code) { setConsumables([]); return; }
+    const fetchData = async () => {
+      setConsumableLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "equipment_code", operator: "equals", value: selectedEquip.equipment_code }] },
+          autoFilter: true,
+        });
+        setConsumables(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setConsumables([]); } finally { setConsumableLoading(false); }
+    };
+    fetchData();
+  }, [selectedEquip?.equipment_code]);
+
+  // 새로고침 헬퍼
+  const refreshRight = () => {
+    const eid = selectedEquipId;
+    setSelectedEquipId(null);
+    setTimeout(() => setSelectedEquipId(eid), 50);
+  };
+
+  // 설비 등록/수정
+  const openEquipRegister = () => { setEquipForm({}); setEquipEditMode(false); setEquipModalOpen(true); };
+  const openEquipEdit = () => { if (!selectedEquip) return; setEquipForm({ ...selectedEquip }); setEquipEditMode(true); setEquipModalOpen(true); };
+
+  const handleEquipSave = async () => {
+    if (!equipForm.equipment_name) { toast.error("설비명은 필수입니다."); return; }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, ...fields } = equipForm;
+      if (equipEditMode && id) {
+        await apiClient.put(`/table-management/tables/${EQUIP_TABLE}/edit`, { originalData: { id }, updatedData: fields });
+        toast.success("수정되었습니다.");
+      } else {
+        await apiClient.post(`/table-management/tables/${EQUIP_TABLE}/add`, { id: crypto.randomUUID(), ...fields });
+        toast.success("등록되었습니다.");
+      }
+      setEquipModalOpen(false); fetchEquipments();
+    } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
+  };
+
+  const handleEquipDelete = async () => {
+    if (!selectedEquipId) return;
+    const ok = await confirm("설비를 삭제하시겠습니까?", { description: "관련 점검항목, 소모품도 함께 삭제됩니다.", variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${EQUIP_TABLE}/delete`, { data: [{ id: selectedEquipId }] });
+      toast.success("삭제되었습니다."); setSelectedEquipId(null); fetchEquipments();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // 점검항목 추가
+  const handleInspectionSave = async () => {
+    if (!inspectionForm.inspection_item) { toast.error("점검항목명은 필수입니다."); return; }
+    if (!inspectionForm.inspection_cycle) { toast.error("점검주기는 필수입니다."); return; }
+    if (!inspectionForm.inspection_method) { toast.error("점검방법은 필수입니다."); return; }
+    const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+    const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+    if (isNumeric && !inspectionForm.unit) { toast.error("측정단위가 필수입니다."); return; }
+    // 기준값/오차범위 → 하한치/상한치 자동 계산
+    const saveData = { ...inspectionForm };
+    if (isNumeric && saveData.standard_value) {
+      const std = Number(saveData.standard_value) || 0;
+      const tol = Number(saveData.tolerance) || 0;
+      saveData.lower_limit = String(std - tol);
+      saveData.upper_limit = String(std + tol);
+    }
+    if (!isNumeric) {
+      saveData.unit = "";
+      saveData.standard_value = "";
+      saveData.tolerance = "";
+      saveData.lower_limit = "";
+      saveData.upper_limit = "";
+    }
+    setSaving(true);
+    try {
+      if (inspectionEditMode) {
+        await apiClient.put(`/table-management/tables/${INSPECTION_TABLE}/edit`, {
+          originalData: { id: saveData.id }, updatedData: { ...saveData, equipment_code: selectedEquip?.equipment_code },
+        });
+        toast.success("수정되었습니다.");
+        setInspectionModalOpen(false);
+      } else {
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          id: crypto.randomUUID(), ...saveData, equipment_code: selectedEquip?.equipment_code,
+        });
+        toast.success("추가되었습니다.");
+        if (inspectionContinuous) {
+          setInspectionForm({});
+        } else {
+          setInspectionModalOpen(false);
+        }
+      }
+      refreshRight();
+    } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
+  };
+
+  // 소모품 품목 로드
+  const loadConsumableItems = async () => {
+    try {
+      const flatten = (vals: any[]): any[] => {
+        const r: any[] = [];
+        for (const v of vals) { r.push(v); if (v.children?.length) r.push(...flatten(v.children)); }
+        return r;
+      };
+      const [typeRes, divRes] = await Promise.all([
+        apiClient.get(`/table-categories/item_info/type/values`),
+        apiClient.get(`/table-categories/item_info/division/values`),
+      ]);
+      const consumableType = flatten(typeRes.data?.data || []).find((t: any) => t.valueLabel === "소모품");
+      const consumableDiv = flatten(divRes.data?.data || []).find((t: any) => t.valueLabel === "소모품");
+      if (!consumableType && !consumableDiv) { setConsumableItemOptions([]); return; }
+      const filters: any[] = [];
+      if (consumableType) filters.push({ columnName: "type", operator: "equals", value: consumableType.valueCode });
+      if (consumableDiv) filters.push({ columnName: "division", operator: "equals", value: consumableDiv.valueCode });
+      const results = await Promise.all(filters.map((f) =>
+        apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [f] },
+          autoFilter: true,
+        })
+      ));
+      const allItems = new Map<string, any>();
+      for (const res of results) {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        for (const row of rows) allItems.set(row.id, row);
+      }
+      setConsumableItemOptions(Array.from(allItems.values()));
+    } catch { setConsumableItemOptions([]); }
+  };
+
+  const handleConsumableSave = async () => {
+    if (!consumableForm.consumable_name) { toast.error("소모품명은 필수입니다."); return; }
+    setSaving(true);
+    try {
+      if (consumableEditMode) {
+        await apiClient.put(`/table-management/tables/${CONSUMABLE_TABLE}/edit`, {
+          originalData: { id: consumableForm.id }, updatedData: { ...consumableForm, equipment_code: selectedEquip?.equipment_code },
+        });
+        toast.success("수정되었습니다.");
+        setConsumableModalOpen(false);
+      } else {
+        await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/add`, {
+          id: crypto.randomUUID(), ...consumableForm, equipment_code: selectedEquip?.equipment_code,
+        });
+        toast.success("추가되었습니다.");
+        if (consumableContinuous) {
+          setConsumableForm({});
+        } else {
+          setConsumableModalOpen(false);
+        }
+      }
+      refreshRight();
+    } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
+  };
+
+  // 점검항목 복사
+  const loadCopyItems = async (equipCode: string) => {
+    setCopySourceEquip(equipCode);
+    setCopyChecked(new Set());
+    if (!equipCode) { setCopyItems([]); return; }
+    setCopyLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "equipment_code", operator: "equals", value: equipCode }] },
+        autoFilter: true,
+      });
+      setCopyItems(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setCopyItems([]); } finally { setCopyLoading(false); }
+  };
+
+  const handleCopyApply = async () => {
+    const selected = copyItems.filter((i) => copyChecked.has(i.id));
+    if (selected.length === 0) { toast.error("복사할 항목을 선택해주세요."); return; }
+    setSaving(true);
+    try {
+      for (const item of selected) {
+        const { id, created_date, updated_date, writer, company_code, equipment_code, ...fields } = item;
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          ...fields, equipment_code: selectedEquip?.equipment_code,
+        });
+      }
+      toast.success(`${selected.length}개 점검항목이 복사되었습니다.`);
+      setCopyModalOpen(false); refreshRight();
+    } catch { toast.error("복사 실패"); } finally { setSaving(false); }
+  };
+
+  // 엑셀
+  const handleExcelDownload = async () => {
+    if (equipments.length === 0) return;
+    await exportToExcel(equipments.map((e) => ({
+      설비코드: e.equipment_code, 설비명: e.equipment_name, 설비유형: e.equipment_type,
+      제조사: e.manufacturer, 모델명: e.model_name, 설치장소: e.installation_location,
+      도입일자: e.introduction_date, 가동상태: e.operation_status,
+    })), "설비정보.xlsx", "설비");
+    toast.success("다운로드 완료");
+  };
+
+  // 셀렉트 렌더링 헬퍼
+  const catSelect = (key: string, value: string, onChange: (v: string) => void, placeholder: string) => (
+    <Select value={value || ""} onValueChange={onChange}>
+      <SelectTrigger className="h-9"><SelectValue placeholder={placeholder} /></SelectTrigger>
+      <SelectContent>
+        {(catOptions[key] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+      </SelectContent>
+    </Select>
+  );
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>설비관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">설비정보</span>
+      </div>
+
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={EQUIP_TABLE}
+        filterId="c16-equipment-info"
+        onFilterChange={setSearchFilters}
+        dataCount={equipCount}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex gap-1.5">
+            <Button variant="outline" size="sm" className="h-9" disabled={excelDetecting}
+              onClick={async () => {
+                setExcelDetecting(true);
+                try {
+                  const r = await autoDetectMultiTableConfig(EQUIP_TABLE);
+                  if (r.success && r.data) { setExcelChainConfig(r.data); setExcelUploadOpen(true); }
+                  else toast.error("테이블 구조 분석 실패");
+                } catch { toast.error("오류"); } finally { setExcelDetecting(false); }
+              }}>
+              {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />} 엑셀 업로드
+            </Button>
+            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
+              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+            </Button>
+          </div>
+        }
+      />
+
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 설비 목록 */}
+          <ResizablePanel defaultSize={40} minSize={25}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">설비 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{equipCount}건</span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" onClick={openEquipRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
+                  <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={openEquipEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
+                  <div className="h-4 w-px bg-border" />
+                  <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={handleEquipDelete} className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                  <div className="h-4 w-px bg-border" />
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <EDataTable
+                columns={mainTableColumns}
+                data={ts.groupData(equipments)}
+                loading={equipLoading}
+                emptyMessage="등록된 설비가 없어요"
+                selectedId={selectedEquipId}
+                onSelect={(id) => setSelectedEquipId(id)}
+                onRowDoubleClick={() => openEquipEdit()}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-equipment-info-main"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 탭 */}
+          <ResizablePanel defaultSize={60} minSize={30}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between p-2 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-1">
+                  {([["info", "기본정보", Info], ["inspection", "점검항목", ClipboardCheck], ["consumable", "소모품", Package]] as const).map(([tab, label, Icon]) => (
+                    <button key={tab} onClick={() => setRightTab(tab)}
+                      className={cn("px-3 py-1.5 text-sm rounded-md transition-colors flex items-center gap-1",
+                        rightTab === tab ? "bg-primary text-primary-foreground font-medium" : "hover:bg-muted text-muted-foreground")}>
+                      <Icon className="w-3.5 h-3.5" />{label}
+                      {tab === "inspection" && inspections.length > 0 && <Badge variant="secondary" className="ml-1 text-[10px] px-1">{inspections.length}</Badge>}
+                      {tab === "consumable" && consumables.length > 0 && <Badge variant="secondary" className="ml-1 text-[10px] px-1">{consumables.length}</Badge>}
+                    </button>
+                  ))}
+                  {selectedEquip && <Badge variant="outline" className="font-normal ml-2 text-xs">{selectedEquip.equipment_name}</Badge>}
+                </div>
+                <div className="flex gap-1.5">
+                  {rightTab === "inspection" && (
+                    <>
+                      <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setInspectionForm({}); setInspectionEditMode(false); setInspectionModalOpen(true); }}>
+                        <Plus className="w-3.5 h-3.5 mr-1" /> 추가
+                      </Button>
+                      <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setCopySourceEquip(""); setCopyItems([]); setCopyChecked(new Set()); setCopyModalOpen(true); }}>
+                        <Copy className="w-3.5 h-3.5 mr-1" /> 복사
+                      </Button>
+                    </>
+                  )}
+                  {rightTab === "consumable" && (
+                    <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setConsumableForm({}); setConsumableEditMode(false); loadConsumableItems(); setConsumableModalOpen(true); }}>
+                      <Plus className="w-3.5 h-3.5 mr-1" /> 추가
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              {!selectedEquipId ? (
+                <div className="flex-1 flex flex-col items-center justify-center gap-3 m-3 border-2 border-dashed rounded-lg text-center">
+                  <Inbox className="w-12 h-12 text-muted-foreground/40" />
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">설비를 선택해주세요</p>
+                    <p className="text-xs text-muted-foreground mt-1">좌측에서 설비를 선택하면 상세 정보가 표시돼요</p>
+                  </div>
+                </div>
+              ) : rightTab === "info" ? (
+                <div className="p-4 overflow-auto">
+                  <div className="flex justify-end mb-3">
+                    <Button size="sm" onClick={handleInfoSave} disabled={infoSaving}>
+                      {infoSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+                    </Button>
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-1.5">
+                      <Label className="text-sm text-muted-foreground">설비코드</Label>
+                      <Input value={infoForm.equipment_code || ""} className="h-9 bg-muted/50" disabled />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">설비명</Label>
+                      <Input value={infoForm.equipment_name || ""} onChange={(e) => setInfoForm((p) => ({ ...p, equipment_name: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">설비유형</Label>
+                      {catSelect("equipment_type", infoForm.equipment_type, (v) => setInfoForm((p) => ({ ...p, equipment_type: v })), "설비유형")}
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">설치장소</Label>
+                      <Input value={infoForm.installation_location || ""} onChange={(e) => setInfoForm((p) => ({ ...p, installation_location: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">제조사</Label>
+                      <Input value={infoForm.manufacturer || ""} onChange={(e) => setInfoForm((p) => ({ ...p, manufacturer: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">모델명</Label>
+                      <Input value={infoForm.model_name || ""} onChange={(e) => setInfoForm((p) => ({ ...p, model_name: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">도입일자</Label>
+                      <Input type="date" value={infoForm.introduction_date || ""} onChange={(e) => setInfoForm((p) => ({ ...p, introduction_date: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">가동상태</Label>
+                      {catSelect("operation_status", infoForm.operation_status, (v) => setInfoForm((p) => ({ ...p, operation_status: v })), "가동상태")}
+                    </div>
+                    <div className="space-y-1.5 col-span-2">
+                      <Label className="text-sm">비고</Label>
+                      <Input value={infoForm.remarks || ""} onChange={(e) => setInfoForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5 col-span-2">
+                      <Label className="text-sm">이미지</Label>
+                      <ImageUpload value={infoForm.image_path} onChange={(v) => setInfoForm((p) => ({ ...p, image_path: v }))}
+                        tableName={EQUIP_TABLE} recordId={infoForm.id} columnName="image_path" />
+                    </div>
+                  </div>
+                </div>
+              ) : rightTab === "inspection" ? (
+                <div className="flex-1 overflow-auto">
+                  {inspectionLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : inspections.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <ClipboardCheck className="w-8 h-8 mb-2 opacity-40" />
+                      <p className="text-sm">점검항목이 없어요</p>
+                    </div>
+                  ) : (
+                    <Table noWrapper>
+                      <thead className="sticky top-0 z-10 bg-card">
+                        <TableRow>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검항목</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">하한치</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한치</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검내용</TableHead>
+                        </TableRow>
+                      </thead>
+                      <TableBody>
+                        {inspections.map((item) => (
+                          <TableRow key={item.id} className="cursor-pointer hover:bg-primary/5" onDoubleClick={() => {
+                            const std = item.standard_value || "";
+                            const tol = item.tolerance || "";
+                            setInspectionForm({ ...item, standard_value: std, tolerance: tol });
+                            setInspectionEditMode(true);
+                            setInspectionModalOpen(true);
+                          }}>
+                            <TableCell className="text-sm">{item.inspection_item || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
+                            <TableCell className="text-[13px]">{resolve("inspection_method", item.inspection_method)}</TableCell>
+                            <TableCell className="text-[13px]">{item.lower_limit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.upper_limit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.inspection_content || "-"}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              ) : (
+                <div className="flex-1 overflow-auto">
+                  {consumableLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : consumables.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Package className="w-8 h-8 mb-2 opacity-40" />
+                      <p className="text-sm">소모품이 없어요</p>
+                    </div>
+                  ) : (
+                    <Table noWrapper>
+                      <thead className="sticky top-0 z-10 bg-card">
+                        <TableRow>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">소모품명</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">교체주기</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">제조사</TableHead>
+                        </TableRow>
+                      </thead>
+                      <TableBody>
+                        {consumables.map((item) => (
+                          <TableRow key={item.id} className="cursor-pointer hover:bg-primary/5" onDoubleClick={() => {
+                            setConsumableForm({ ...item });
+                            setConsumableEditMode(true);
+                            loadConsumableItems();
+                            setConsumableModalOpen(true);
+                          }}>
+                            <TableCell className="text-sm">{item.consumable_name || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.replacement_cycle || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.specification || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.manufacturer || "-"}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 설비 등록/수정 모달 */}
+      <Dialog open={equipModalOpen} onOpenChange={setEquipModalOpen}>
+        <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{equipEditMode ? "설비 수정" : "설비 등록"}</DialogTitle>
+            <DialogDescription>{equipEditMode ? "설비 정보를 수정합니다." : "새로운 설비를 등록합니다."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+            <div className="grid grid-cols-2 gap-4 py-4">
+              <div className="space-y-1.5"><Label className="text-sm">설비코드</Label>
+                <Input value={equipForm.equipment_code || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_code: e.target.value }))} placeholder="설비코드" className="h-9" disabled={equipEditMode} /></div>
+              <div className="space-y-1.5"><Label className="text-sm">설비명 <span className="text-destructive">*</span></Label>
+                <Input value={equipForm.equipment_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_name: e.target.value }))} placeholder="설비명" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">설비유형</Label>
+                {catSelect("equipment_type", equipForm.equipment_type, (v) => setEquipForm((p) => ({ ...p, equipment_type: v })), "설비유형")}</div>
+              <div className="space-y-1.5"><Label className="text-sm">가동상태</Label>
+                {catSelect("operation_status", equipForm.operation_status, (v) => setEquipForm((p) => ({ ...p, operation_status: v })), "가동상태")}</div>
+              <div className="space-y-1.5"><Label className="text-sm">설치장소</Label>
+                <Input value={equipForm.installation_location || ""} onChange={(e) => setEquipForm((p) => ({ ...p, installation_location: e.target.value }))} placeholder="설치장소" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">제조사</Label>
+                <Input value={equipForm.manufacturer || ""} onChange={(e) => setEquipForm((p) => ({ ...p, manufacturer: e.target.value }))} placeholder="제조사" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">모델명</Label>
+                <Input value={equipForm.model_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, model_name: e.target.value }))} placeholder="모델명" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">도입일자</Label>
+                <Input type="date" value={equipForm.introduction_date || ""} onChange={(e) => setEquipForm((p) => ({ ...p, introduction_date: e.target.value }))} className="h-9" /></div>
+              <div className="space-y-1.5 col-span-2"><Label className="text-sm">비고</Label>
+                <Input value={equipForm.remarks || ""} onChange={(e) => setEquipForm((p) => ({ ...p, remarks: e.target.value }))} placeholder="비고" className="h-9" /></div>
+              <div className="space-y-1.5 col-span-2"><Label className="text-sm">이미지</Label>
+                <ImageUpload value={equipForm.image_path} onChange={(v) => setEquipForm((p) => ({ ...p, image_path: v }))}
+                  tableName={EQUIP_TABLE} recordId={equipForm.id} columnName="image_path" /></div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEquipModalOpen(false)}>취소</Button>
+            <Button onClick={handleEquipSave} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 점검항목 추가 모달 */}
+      <Dialog open={inspectionModalOpen} onOpenChange={setInspectionModalOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader><DialogTitle>{inspectionEditMode ? "점검항목 수정" : "점검항목 추가"}</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 점검항목을 {inspectionEditMode ? "수정" : "추가"}합니다.</DialogDescription></DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1.5"><Label className="text-sm">점검항목명 <span className="text-destructive">*</span></Label>
+                <Input value={inspectionForm.inspection_item || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_item: e.target.value }))} placeholder="예: 온도점검, 진동점검" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">점검주기 <span className="text-destructive">*</span></Label>
+                {catSelect("inspection_cycle", inspectionForm.inspection_cycle, (v) => setInspectionForm((p) => ({ ...p, inspection_cycle: v })), "점검주기")}</div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1.5"><Label className="text-sm">점검방법 <span className="text-destructive">*</span></Label>
+                {catSelect("inspection_method", inspectionForm.inspection_method, (v) => {
+                  const label = resolve("inspection_method", v);
+                  const isNum = ["숫자", "치수검사"].includes(label) || ["숫자", "치수검사"].includes(v);
+                  if (!isNum) {
+                    setInspectionForm((p) => ({ ...p, inspection_method: v, unit: "", standard_value: "", tolerance: "", lower_limit: "", upper_limit: "" }));
+                  } else {
+                    setInspectionForm((p) => ({ ...p, inspection_method: v }));
+                  }
+                }, "점검방법")}</div>
+              {(() => {
+                const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+                const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+                if (!isNumeric) return null;
+                return (
+                  <div className="space-y-1.5"><Label className="text-sm">측정 단위 <span className="text-destructive">*</span></Label>
+                    <Input value={inspectionForm.unit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, unit: e.target.value }))} placeholder="예: ℃, mm, V" className="h-9" /></div>
+                );
+              })()}
+            </div>
+            {(() => {
+              const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+              const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+              if (!isNumeric) return null;
+              return (
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5"><Label className="text-sm">기준값</Label>
+                    <Input value={inspectionForm.standard_value || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, standard_value: e.target.value }))} placeholder="기준값 입력" className="h-9" type="number" /></div>
+                  <div className="space-y-1.5"><Label className="text-sm">±오차범위</Label>
+                    <Input value={inspectionForm.tolerance || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, tolerance: e.target.value }))} placeholder="허용 오차범위" className="h-9" type="number" /></div>
+                </div>
+              );
+            })()}
+            <div className="space-y-1.5"><Label className="text-sm">점검내용</Label>
+              <textarea
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={inspectionForm.inspection_content || ""}
+                onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_content: e.target.value }))}
+                placeholder="점검 항목 및 내용 입력"
+              /></div>
+            <div className="space-y-1.5"><Label className="text-sm">체크리스트 (선택사항)</Label>
+              <textarea
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={inspectionForm.checklist || ""}
+                onChange={(e) => setInspectionForm((p) => ({ ...p, checklist: e.target.value }))}
+                placeholder="점검 체크리스트 입력 (줄바꿈으로 구분)"
+              /></div>
+          </div>
+          <DialogFooter className="flex items-center justify-between sm:justify-between">
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <Checkbox checked={inspectionContinuous} onCheckedChange={(c) => setInspectionContinuous(!!c)} />
+              저장 후 계속 입력
+            </label>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setInspectionModalOpen(false)}>취소</Button>
+              <Button onClick={handleInspectionSave} disabled={saving}><Save className="w-4 h-4 mr-1.5" /> 저장</Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 소모품 추가 모달 */}
+      <Dialog open={consumableModalOpen} onOpenChange={setConsumableModalOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader><DialogTitle>{consumableEditMode ? "소모품 수정" : "소모품 추가"}</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 소모품을 {consumableEditMode ? "수정" : "추가"}합니다.</DialogDescription></DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            <div className="space-y-1.5 col-span-2"><Label className="text-sm">소모품명 <span className="text-destructive">*</span></Label>
+              {consumableItemOptions.length > 0 ? (
+                <Select value={consumableForm.consumable_name || ""} onValueChange={(v) => {
+                  const item = consumableItemOptions.find((i) => (i.item_name || i.item_number) === v);
+                  setConsumableForm((p) => ({
+                    ...p,
+                    consumable_name: v,
+                    specification: item?.size || p.specification || "",
+                    unit: item?.unit || p.unit || "",
+                    manufacturer: item?.manufacturer || p.manufacturer || "",
+                  }));
+                }}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="소모품 선택" /></SelectTrigger>
+                  <SelectContent>
+                    {consumableItemOptions.map((item) => (
+                      <SelectItem key={item.id} value={item.item_name || item.item_number}>
+                        {item.item_name}{item.size ? ` (${item.size})` : ""}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <div>
+                  <Input value={consumableForm.consumable_name || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, consumable_name: e.target.value }))}
+                    placeholder="소모품명 직접 입력" className="h-9" />
+                  <p className="text-xs text-muted-foreground mt-1">품목정보에 소모품 타입 품목을 등록하면 선택 가능합니다</p>
+                </div>
+              )}</div>
+            <div className="space-y-1.5"><Label className="text-sm">교체주기</Label>
+              <Input value={consumableForm.replacement_cycle || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, replacement_cycle: e.target.value }))} placeholder="교체주기" className="h-9" /></div>
+            <div className="space-y-1.5"><Label className="text-sm">단위</Label>
+              <Input value={consumableForm.unit || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, unit: e.target.value }))} placeholder="단위" className="h-9" /></div>
+            <div className="space-y-1.5"><Label className="text-sm">규격</Label>
+              <Input value={consumableForm.specification || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, specification: e.target.value }))} placeholder="규격" className="h-9" /></div>
+            <div className="space-y-1.5"><Label className="text-sm">제조사</Label>
+              <Input value={consumableForm.manufacturer || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, manufacturer: e.target.value }))} placeholder="제조사" className="h-9" /></div>
+            <div className="space-y-1.5 col-span-2"><Label className="text-sm">이미지</Label>
+              <ImageUpload value={consumableForm.image_path} onChange={(v) => setConsumableForm((p) => ({ ...p, image_path: v }))}
+                tableName={CONSUMABLE_TABLE} columnName="image_path" /></div>
+          </div>
+          <DialogFooter className="flex items-center justify-between sm:justify-between">
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <Checkbox checked={consumableContinuous} onCheckedChange={(c) => setConsumableContinuous(!!c)} />
+              저장 후 계속 입력
+            </label>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setConsumableModalOpen(false)}>취소</Button>
+              <Button onClick={handleConsumableSave} disabled={saving}><Save className="w-4 h-4 mr-1.5" /> 저장</Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 점검항목 복사 모달 */}
+      <Dialog open={copyModalOpen} onOpenChange={setCopyModalOpen}>
+        <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden">
+          <DialogHeader><DialogTitle>점검항목 복사</DialogTitle>
+            <DialogDescription>다른 설비의 점검항목을 선택하여 {selectedEquip?.equipment_name}에 복사합니다.</DialogDescription></DialogHeader>
+          <div className="space-y-3 flex-1 overflow-y-auto">
+            <div className="space-y-1.5">
+              <Label className="text-sm">소스 설비 선택</Label>
+              <Select value={copySourceEquip} onValueChange={(v) => loadCopyItems(v)}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="복사할 설비 선택" /></SelectTrigger>
+                <SelectContent>
+                  {equipments.filter((e) => e.equipment_code !== selectedEquip?.equipment_code).map((e) => (
+                    <SelectItem key={e.equipment_code} value={e.equipment_code}>{e.equipment_name} ({e.equipment_code})</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="border rounded-lg overflow-auto max-h-[300px]">
+              {copyLoading ? (
+                <div className="flex items-center justify-center py-8"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
+              ) : copyItems.length === 0 ? (
+                <div className="text-center text-muted-foreground py-8 text-sm">{copySourceEquip ? "점검항목이 없어요" : "설비를 선택해주세요"}</div>
+              ) : (
+                <Table noWrapper>
+                  <thead className="sticky top-0 z-10 bg-card">
+                    <TableRow>
+                      <TableHead className="w-[40px] text-center">
+                        <input type="checkbox" checked={copyItems.length > 0 && copyChecked.size === copyItems.length}
+                          onChange={(e) => { if (e.target.checked) setCopyChecked(new Set(copyItems.map((i) => i.id))); else setCopyChecked(new Set()); }} />
+                      </TableHead>
+                      <TableHead>점검항목</TableHead><TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead><TableHead className="w-[70px]">하한</TableHead>
+                      <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한</TableHead><TableHead className="w-[60px]">단위</TableHead>
+                    </TableRow>
+                  </thead>
+                  <TableBody>
+                    {copyItems.map((item) => (
+                      <TableRow key={item.id} className={cn("cursor-pointer", copyChecked.has(item.id) && "bg-primary/5")}
+                        onClick={() => setCopyChecked((prev) => { const n = new Set(prev); if (n.has(item.id)) n.delete(item.id); else n.add(item.id); return n; })}>
+                        <TableCell className="text-center"><input type="checkbox" checked={copyChecked.has(item.id)} readOnly /></TableCell>
+                        <TableCell className="text-sm">{item.inspection_item}</TableCell>
+                        <TableCell className="text-[13px]">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
+                        <TableCell className="text-[13px]">{resolve("inspection_method", item.inspection_method)}</TableCell>
+                        <TableCell className="text-[13px]">{item.lower_limit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{item.upper_limit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              )}
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{copyChecked.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setCopyModalOpen(false)}>취소</Button>
+                <Button onClick={handleCopyApply} disabled={saving || copyChecked.size === 0}>
+                  {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Copy className="w-4 h-4 mr-1.5" />} 복사 적용
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal open={excelUploadOpen}
+          onOpenChange={(open) => { setExcelUploadOpen(open); if (!open) setExcelChainConfig(null); }}
+          config={excelChainConfig} onSuccess={() => { fetchEquipments(); refreshRight(); }} />
+      )}
+
+      {/* 테이블 설정 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/equipment/plc-settings/page.tsx b/frontend/app/(main)/COMPANY_8/equipment/plc-settings/page.tsx
new file mode 100644
index 00000000..4e94d293
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/equipment/plc-settings/page.tsx
@@ -0,0 +1,501 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, Pencil, Cpu, Settings2, Search, Inbox,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+
+/* ───── 테이블명 ───── */
+const DATATYPE_TABLE = "plc_data_type";
+
+const DATATYPE_COLUMNS = [
+  { key: "equipment_code", label: "설비코드" },
+  { key: "data_type", label: "데이터타입" },
+  { key: "unit", label: "단위" },
+  { key: "tag_address", label: "태그주소" },
+  { key: "collection_interval", label: "수집주기" },
+  { key: "lower_limit", label: "하한값" },
+  { key: "upper_limit", label: "상한값" },
+  { key: "is_active", label: "사용여부" },
+];
+const COLLECTION_TABLE = "plc_collection_config";
+const EQUIPMENT_TABLE = "equipment_mng";
+
+/* ───── Cron 한글 변환 ───── */
+const cronToKorean = (cron: string): string => {
+  if (!cron) return "";
+  const parts = cron.trim().split(/\s+/);
+  if (parts.length < 5) return cron;
+  const [min, hour] = parts;
+  if (min === "*" && hour === "*") return "매 분마다";
+  if (min !== "*" && hour === "*") return `매시 ${min}분마다`;
+  if (min === "0" && hour !== "*") return `매일 ${hour}시 정각`;
+  if (min === "*/5") return "5분마다";
+  if (min === "*/10") return "10분마다";
+  if (min === "*/30") return "30분마다";
+  return cron;
+};
+
+/* ───── 카테고리 flatten ───── */
+const flattenCategories = (vals: any[]): { code: string; label: string }[] => {
+  const result: { code: string; label: string }[] = [];
+  for (const v of vals) {
+    result.push({ code: v.valueCode, label: v.valueLabel });
+    if (v.children?.length) result.push(...flattenCategories(v.children));
+  }
+  return result;
+};
+
+export default function PlcSettingsPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-plc-settings", DATATYPE_TABLE, DATATYPE_COLUMNS);
+
+  const [activeTab, setActiveTab] = useState("datatype");
+
+  /* ───── PLC 데이터타입 ───── */
+  const [datatypes, setDatatypes] = useState<any[]>([]);
+  const [dtLoading, setDtLoading] = useState(false);
+  const [dtCount, setDtCount] = useState(0);
+  const [dtChecked, setDtChecked] = useState<string[]>([]);
+  const [dtModalOpen, setDtModalOpen] = useState(false);
+  const [dtEditMode, setDtEditMode] = useState(false);
+  const [dtForm, setDtForm] = useState<Record<string, any>>({});
+  const [dtSaving, setDtSaving] = useState(false);
+  const [dtKeyword, setDtKeyword] = useState("");
+
+  /* ───── 수집 설정 ───── */
+  const [configs, setConfigs] = useState<any[]>([]);
+  const [cfgLoading, setCfgLoading] = useState(false);
+  const [cfgCount, setCfgCount] = useState(0);
+  const [cfgChecked, setCfgChecked] = useState<string[]>([]);
+  const [cfgModalOpen, setCfgModalOpen] = useState(false);
+  const [cfgEditMode, setCfgEditMode] = useState(false);
+  const [cfgForm, setCfgForm] = useState<Record<string, any>>({});
+  const [cfgSaving, setCfgSaving] = useState(false);
+  const [cfgKeyword, setCfgKeyword] = useState("");
+
+  /* ───── FK + 카테고리 옵션 ───── */
+  const [equipOptions, setEquipOptions] = useState<{ code: string; label: string }[]>([]);
+  const [collectionTypeOptions, setCollectionTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const eqRes = await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/data`, { page: 1, size: 500, autoFilter: true });
+        const eqs = eqRes.data?.data?.data || eqRes.data?.data?.rows || [];
+        setEquipOptions(eqs.map((r: any) => ({ code: r.equipment_code, label: `${r.equipment_code} - ${r.equipment_name || ""}` })));
+      } catch { /* skip */ }
+      try {
+        const catRes = await apiClient.get(`/table-categories/${COLLECTION_TABLE}/collection_type/values`);
+        if (catRes.data?.data?.length > 0) {
+          setCollectionTypeOptions(flattenCategories(catRes.data.data));
+        }
+      } catch { /* skip */ }
+    };
+    load();
+  }, []);
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  const fetchDatatypes = useCallback(async (keyword?: string) => {
+    setDtLoading(true);
+    try {
+      const kw = keyword !== undefined ? keyword : dtKeyword;
+      const filters: any[] = [];
+      if (kw.trim()) filters.push({ columnName: "equipment_code", operator: "contains", value: kw.trim() });
+      const res = await apiClient.post(`/table-management/tables/${DATATYPE_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setDatatypes(rows);
+      setDtCount(rows.length);
+    } catch { toast.error("PLC 데이터타입 조회에 실패했어요"); }
+    finally { setDtLoading(false); }
+  }, [dtKeyword]);
+
+  const fetchConfigs = useCallback(async (keyword?: string) => {
+    setCfgLoading(true);
+    try {
+      const kw = keyword !== undefined ? keyword : cfgKeyword;
+      const filters: any[] = [];
+      if (kw.trim()) filters.push({ columnName: "config_name", operator: "contains", value: kw.trim() });
+      const res = await apiClient.post(`/table-management/tables/${COLLECTION_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setConfigs(rows);
+      setCfgCount(rows.length);
+    } catch { toast.error("수집 설정 조회에 실패했어요"); }
+    finally { setCfgLoading(false); }
+  }, [cfgKeyword]);
+
+  useEffect(() => { fetchDatatypes(); fetchConfigs(); }, []);
+
+  /* ═══════════════════ 데이터타입 CRUD ═══════════════════ */
+  const openDtCreate = () => { setDtForm({}); setDtEditMode(false); setDtModalOpen(true); };
+  const openDtEdit = (row: any) => { setDtForm({ ...row }); setDtEditMode(true); setDtModalOpen(true); };
+  const saveDt = async () => {
+    if (!dtForm.equipment_code) { toast.error("설비코드는 필수 입력이에요"); return; }
+    setDtSaving(true);
+    try {
+      if (dtEditMode) {
+        await apiClient.put(`/table-management/tables/${DATATYPE_TABLE}/edit`, {
+          originalData: { id: dtForm.id }, updatedData: dtForm,
+        });
+        toast.success("PLC 데이터타입을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${DATATYPE_TABLE}/add`, dtForm);
+        toast.success("PLC 데이터타입을 등록했어요");
+      }
+      setDtModalOpen(false);
+      fetchDatatypes();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setDtSaving(false); }
+  };
+  const deleteDt = async () => {
+    if (dtChecked.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("PLC 데이터타입 삭제", { description: `선택한 ${dtChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.` });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DATATYPE_TABLE}/delete`, {
+        data: dtChecked.map(id => ({ id })),
+      });
+      toast.success(`${dtChecked.length}건을 삭제했어요`);
+      setDtChecked([]);
+      fetchDatatypes();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ 수집 설정 CRUD ═══════════════════ */
+  const openCfgCreate = () => { setCfgForm({}); setCfgEditMode(false); setCfgModalOpen(true); };
+  const openCfgEdit = (row: any) => { setCfgForm({ ...row }); setCfgEditMode(true); setCfgModalOpen(true); };
+  const saveCfg = async () => {
+    if (!cfgForm.config_name) { toast.error("설정명은 필수 입력이에요"); return; }
+    setCfgSaving(true);
+    try {
+      if (cfgEditMode) {
+        await apiClient.put(`/table-management/tables/${COLLECTION_TABLE}/edit`, {
+          originalData: { id: cfgForm.id }, updatedData: cfgForm,
+        });
+        toast.success("수집 설정을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${COLLECTION_TABLE}/add`, cfgForm);
+        toast.success("수집 설정을 등록했어요");
+      }
+      setCfgModalOpen(false);
+      fetchConfigs();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setCfgSaving(false); }
+  };
+  const deleteCfg = async () => {
+    if (cfgChecked.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("수집 설정 삭제", { description: `선택한 ${cfgChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.` });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${COLLECTION_TABLE}/delete`, {
+        data: cfgChecked.map(id => ({ id })),
+      });
+      toast.success(`${cfgChecked.length}건을 삭제했어요`);
+      setCfgChecked([]);
+      fetchConfigs();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="rounded-lg border bg-card">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <div className="border-b px-3">
+            <TabsList className="bg-transparent h-auto p-0 gap-0">
+              <TabsTrigger
+                value="datatype"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-3 text-sm font-medium"
+              >
+                <Cpu className="w-4 h-4 mr-2" />
+                PLC 데이터타입
+                <Badge variant="secondary" className="ml-2 bg-primary/10 text-primary text-xs">{dtCount}</Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="collection"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-3 text-sm font-medium"
+              >
+                <Settings2 className="w-4 h-4 mr-2" />
+                수집 설정
+                <Badge variant="secondary" className="ml-2 bg-primary/10 text-primary text-xs">{cfgCount}</Badge>
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* ──── PLC 데이터타입 탭 ──── */}
+          <TabsContent value="datatype" className="p-3 mt-0">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    className="h-8 pl-8 w-56 text-sm"
+                    placeholder="설비코드 검색..."
+                    value={dtKeyword}
+                    onChange={(e) => setDtKeyword(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && fetchDatatypes(dtKeyword)}
+                  />
+                </div>
+                <Button size="sm" variant="outline" className="h-8" onClick={() => fetchDatatypes(dtKeyword)}>
+                  <Search className="w-3.5 h-3.5 mr-1" />검색
+                </Button>
+                <Button size="sm" variant="ghost" className="h-8" onClick={() => { setDtKeyword(""); fetchDatatypes(""); }}>
+                  초기화
+                </Button>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">{dtCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openDtCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = datatypes.find(r => dtChecked.includes(r.id));
+                  if (sel) openDtEdit(sel); else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={deleteDt}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <EDataTable
+                columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+                  key: col.key,
+                  label: col.label,
+                  align: col.key === "is_active" ? "center" : undefined,
+                  render: col.key === "is_active"
+                    ? (val: any) => <Badge variant={val ? "default" : "secondary"} className="text-xs">{val ? "사용" : "미사용"}</Badge>
+                    : undefined,
+                }))}
+                data={ts.groupData(datatypes)}
+                loading={dtLoading}
+                emptyMessage="등록된 PLC 데이터타입이 없어요"
+                showCheckbox
+                checkedIds={dtChecked}
+                onCheckedChange={setDtChecked}
+                onRowDoubleClick={(row) => openDtEdit(row)}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </TabsContent>
+
+          {/* ──── 수집 설정 탭 ──── */}
+          <TabsContent value="collection" className="p-3 mt-0">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    className="h-8 pl-8 w-56 text-sm"
+                    placeholder="설정명 검색..."
+                    value={cfgKeyword}
+                    onChange={(e) => setCfgKeyword(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && fetchConfigs(cfgKeyword)}
+                  />
+                </div>
+                <Button size="sm" variant="outline" className="h-8" onClick={() => fetchConfigs(cfgKeyword)}>
+                  <Search className="w-3.5 h-3.5 mr-1" />검색
+                </Button>
+                <Button size="sm" variant="ghost" className="h-8" onClick={() => { setCfgKeyword(""); fetchConfigs(""); }}>
+                  초기화
+                </Button>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">{cfgCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openCfgCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = configs.find(r => cfgChecked.includes(r.id));
+                  if (sel) openCfgEdit(sel); else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={deleteCfg}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+              </div>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <EDataTable
+                columns={[
+                  { key: "config_name", label: "설정명" },
+                  { key: "source_connection_id", label: "소스연결ID", width: "w-[110px]" },
+                  { key: "source_table", label: "소스테이블", width: "w-[120px]" },
+                  { key: "target_table", label: "대상테이블", width: "w-[120px]" },
+                  { key: "collection_type", label: "수집유형", width: "w-[90px]" },
+                  { key: "schedule_cron", label: "스케줄(Cron)", width: "w-[120px]", render: (val: any) => <span className="font-mono text-[13px]">{val}</span> },
+                  { key: "is_active", label: "사용여부", width: "w-[80px]", align: "center" as const, render: (val: any) => <Badge variant={val ? "default" : "secondary"} className="text-xs">{val ? "사용" : "미사용"}</Badge> },
+                ] as EDataTableColumn[]}
+                data={configs}
+                loading={cfgLoading}
+                emptyMessage="등록된 수집 설정이 없어요"
+                showCheckbox
+                checkedIds={cfgChecked}
+                onCheckedChange={setCfgChecked}
+                onRowDoubleClick={(row) => openCfgEdit(row)}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* ═══════════════════ PLC 데이터타입 모달 ═══════════════════ */}
+      <Dialog open={dtModalOpen} onOpenChange={setDtModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{dtEditMode ? "PLC 데이터타입 수정" : "PLC 데이터타입 등록"}</DialogTitle>
+            <DialogDescription>PLC 데이터타입 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">설비코드 <span className="text-destructive">*</span></Label>
+              <Select value={dtForm.equipment_code || ""} onValueChange={(v) => setDtForm(p => ({ ...p, equipment_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="설비를 선택해주세요" /></SelectTrigger>
+                <SelectContent>
+                  {equipOptions.map(o => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">데이터타입</Label>
+              <Input className="h-9" value={dtForm.data_type || ""} onChange={(e) => setDtForm(p => ({ ...p, data_type: e.target.value }))} placeholder="예: 온도, 압력" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">단위</Label>
+              <Input className="h-9" value={dtForm.unit || ""} onChange={(e) => setDtForm(p => ({ ...p, unit: e.target.value }))} placeholder="예: ℃, bar" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">태그주소</Label>
+              <Input className="h-9" value={dtForm.tag_address || ""} onChange={(e) => setDtForm(p => ({ ...p, tag_address: e.target.value }))} placeholder="예: D100" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">수집주기</Label>
+              <Input className="h-9" value={dtForm.collection_interval || ""} onChange={(e) => setDtForm(p => ({ ...p, collection_interval: e.target.value }))} placeholder="예: 1000ms" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">하한값</Label>
+              <Input className="h-9" type="number" value={dtForm.lower_limit ?? ""} onChange={(e) => setDtForm(p => ({ ...p, lower_limit: e.target.value }))} placeholder="하한값" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">상한값</Label>
+              <Input className="h-9" type="number" value={dtForm.upper_limit ?? ""} onChange={(e) => setDtForm(p => ({ ...p, upper_limit: e.target.value }))} placeholder="상한값" />
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <div className="flex items-center gap-2">
+                <Checkbox checked={dtForm.is_active ?? true} onCheckedChange={(v) => setDtForm(p => ({ ...p, is_active: !!v }))} />
+                <Label className="text-sm">사용</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDtModalOpen(false)}>취소</Button>
+            <Button onClick={saveDt} disabled={dtSaving}>
+              {dtSaving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 수집 설정 모달 ═══════════════════ */}
+      <Dialog open={cfgModalOpen} onOpenChange={setCfgModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{cfgEditMode ? "수집 설정 수정" : "수집 설정 등록"}</DialogTitle>
+            <DialogDescription>수집 설정 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">설정명 <span className="text-destructive">*</span></Label>
+              <Input className="h-9" value={cfgForm.config_name || ""} onChange={(e) => setCfgForm(p => ({ ...p, config_name: e.target.value }))} placeholder="설정명을 입력해주세요" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">소스연결ID</Label>
+              <Input className="h-9" value={cfgForm.source_connection_id || ""} onChange={(e) => setCfgForm(p => ({ ...p, source_connection_id: e.target.value }))} placeholder="소스연결ID" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">수집유형</Label>
+              {collectionTypeOptions.length > 0 ? (
+                <Select value={cfgForm.collection_type || ""} onValueChange={(v) => setCfgForm(p => ({ ...p, collection_type: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택해주세요" /></SelectTrigger>
+                  <SelectContent>
+                    {collectionTypeOptions.map(o => (
+                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <Input className="h-9" value={cfgForm.collection_type || ""} onChange={(e) => setCfgForm(p => ({ ...p, collection_type: e.target.value }))} placeholder="수집유형" />
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">소스테이블</Label>
+              <Input className="h-9" value={cfgForm.source_table || ""} onChange={(e) => setCfgForm(p => ({ ...p, source_table: e.target.value }))} placeholder="소스테이블명" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">대상테이블</Label>
+              <Input className="h-9" value={cfgForm.target_table || ""} onChange={(e) => setCfgForm(p => ({ ...p, target_table: e.target.value }))} placeholder="대상테이블명" />
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">스케줄 (Cron)</Label>
+              <Input className="h-9 font-mono text-sm" value={cfgForm.schedule_cron || ""} onChange={(e) => setCfgForm(p => ({ ...p, schedule_cron: e.target.value }))} placeholder="예: */5 * * * * (5분마다)" />
+              {cfgForm.schedule_cron && (
+                <p className="text-xs text-muted-foreground mt-1">{cronToKorean(cfgForm.schedule_cron)}</p>
+              )}
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <div className="flex items-center gap-2">
+                <Checkbox checked={cfgForm.is_active ?? true} onCheckedChange={(v) => setCfgForm(p => ({ ...p, is_active: !!v }))} />
+                <Label className="text-sm">사용</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCfgModalOpen(false)}>취소</Button>
+            <Button onClick={saveCfg} disabled={cfgSaving}>
+              {cfgSaving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/logistics/info/page.tsx b/frontend/app/(main)/COMPANY_8/logistics/info/page.tsx
new file mode 100644
index 00000000..543dd3dd
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/logistics/info/page.tsx
@@ -0,0 +1,905 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import {
+  Truck,
+  DollarSign,
+  FileText,
+  MapPin,
+  Car,
+  Plus,
+  Trash2,
+  Download,
+  Pencil,
+  RefreshCw,
+  Inbox,
+  Loader2,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// ========== 타입 & 상수 ==========
+type TabKey = "carrier" | "cost" | "contract" | "route" | "vehicle";
+
+interface TabColumnDef {
+  key: string;
+  label: string;
+  width?: string;
+  align?: "left" | "center" | "right";
+  formatNumber?: boolean;
+}
+
+interface FormFieldDef {
+  key: string;
+  label: string;
+  type: "text" | "number" | "select" | "smartselect" | "date";
+  required?: boolean;
+  referenceKey?: "carrier" | "route";
+  categoryKey?: string;
+  options?: { value: string; label: string }[];
+  placeholder?: string;
+}
+
+interface TabConfig {
+  key: TabKey;
+  label: string;
+  icon: React.ReactNode;
+  tableName: string;
+  columns: TabColumnDef[];
+  formFields: FormFieldDef[];
+  defaultSortColumn: string;
+}
+
+const TAB_CONFIGS: TabConfig[] = [
+  {
+    key: "carrier",
+    label: "운송업체",
+    icon: <Truck className="h-3.5 w-3.5" />,
+    tableName: "carrier_mng",
+    defaultSortColumn: "carrier_code",
+    columns: [
+      { key: "carrier_code", label: "업체코드", width: "120px" },
+      { key: "carrier_name", label: "업체명", width: "160px" },
+      { key: "carrier_type", label: "업체유형", width: "100px" },
+      { key: "contact_person", label: "담당자", width: "100px" },
+      { key: "contact_phone", label: "연락처", width: "130px" },
+      { key: "email", label: "이메일", width: "180px" },
+      { key: "address", label: "주소", width: "220px" },
+      { key: "rating", label: "등급", width: "70px", align: "center" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "carrier_code", label: "업체코드", type: "text", required: true, placeholder: "업체코드를 입력해주세요" },
+      { key: "carrier_name", label: "업체명", type: "text", required: true, placeholder: "업체명을 입력해주세요" },
+      { key: "carrier_type", label: "업체유형", type: "select", required: true, categoryKey: "carrier_mng:carrier_type", placeholder: "업체유형을 선택해주세요" },
+      { key: "contact_person", label: "담당자", type: "text", placeholder: "담당자명" },
+      { key: "contact_phone", label: "연락처", type: "text", placeholder: "예: 02-1234-5678" },
+      { key: "email", label: "이메일", type: "text", placeholder: "email@example.com" },
+      { key: "address", label: "주소", type: "text", placeholder: "주소를 입력해주세요" },
+      { key: "rating", label: "등급", type: "select", categoryKey: "carrier_mng:rating", placeholder: "등급을 선택해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "cost",
+    label: "물류비",
+    icon: <DollarSign className="h-3.5 w-3.5" />,
+    tableName: "logistics_cost_mng",
+    defaultSortColumn: "carrier_code",
+    columns: [
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "route_code", label: "구간코드", width: "120px" },
+      { key: "base_fee", label: "기본요금", width: "110px", align: "right", formatNumber: true },
+      { key: "unit", label: "단위", width: "70px", align: "center" },
+      { key: "unit_fee", label: "단가", width: "110px", align: "right", formatNumber: true },
+      { key: "min_weight", label: "최소중량", width: "100px", align: "right", formatNumber: true },
+      { key: "max_weight", label: "최대중량", width: "100px", align: "right", formatNumber: true },
+      { key: "delivery_days", label: "배송일수", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "route_code", label: "배송구간", type: "smartselect", required: true, referenceKey: "route" },
+      { key: "base_fee", label: "기본요금", type: "number", placeholder: "0" },
+      { key: "unit", label: "단위", type: "text", placeholder: "kg, 건 등" },
+      { key: "unit_fee", label: "단가", type: "number", placeholder: "0" },
+      { key: "min_weight", label: "최소중량", type: "number", placeholder: "0" },
+      { key: "max_weight", label: "최대중량", type: "number", placeholder: "0" },
+      { key: "delivery_days", label: "배송일수", type: "number", placeholder: "0" },
+    ],
+  },
+  {
+    key: "contract",
+    label: "계약서",
+    icon: <FileText className="h-3.5 w-3.5" />,
+    tableName: "carrier_contract_mng",
+    defaultSortColumn: "contract_no",
+    columns: [
+      { key: "contract_no", label: "계약번호", width: "130px" },
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "contract_start_date", label: "시작일", width: "110px" },
+      { key: "contract_end_date", label: "종료일", width: "110px" },
+      { key: "contract_amount", label: "계약금액", width: "130px", align: "right", formatNumber: true },
+      { key: "contact_person", label: "담당자", width: "100px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "contract_no", label: "계약번호", type: "text", required: true, placeholder: "계약번호를 입력해주세요" },
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "contract_start_date", label: "시작일", type: "date", required: true },
+      { key: "contract_end_date", label: "종료일", type: "date", required: true },
+      { key: "contract_amount", label: "계약금액", type: "number", placeholder: "0" },
+      { key: "contact_person", label: "담당자", type: "text", placeholder: "담당자명을 입력해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_contract_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "route",
+    label: "배송구간",
+    icon: <MapPin className="h-3.5 w-3.5" />,
+    tableName: "delivery_route_mng",
+    defaultSortColumn: "route_code",
+    columns: [
+      { key: "route_code", label: "구간코드", width: "120px" },
+      { key: "route_name", label: "구간명", width: "160px" },
+      { key: "departure", label: "출발지", width: "120px" },
+      { key: "destination", label: "도착지", width: "120px" },
+      { key: "distance_km", label: "거리(km)", width: "100px", align: "right", formatNumber: true },
+      { key: "avg_time_hours", label: "평균시간(h)", width: "100px", align: "right" },
+      { key: "route_type", label: "구간유형", width: "100px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "route_code", label: "구간코드", type: "text", required: true, placeholder: "구간코드를 입력해주세요" },
+      { key: "departure", label: "출발지", type: "text", required: true, placeholder: "출발지" },
+      { key: "destination", label: "도착지", type: "text", required: true, placeholder: "도착지" },
+      { key: "distance_km", label: "거리(km)", type: "number", placeholder: "0" },
+      { key: "avg_time_hours", label: "평균시간(h)", type: "number", placeholder: "0" },
+      { key: "route_type", label: "구간유형", type: "select", categoryKey: "delivery_route_mng:route_type", placeholder: "유형을 선택해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "delivery_route_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "vehicle",
+    label: "차량",
+    icon: <Car className="h-3.5 w-3.5" />,
+    tableName: "carrier_vehicle_mng",
+    defaultSortColumn: "vehicle_code",
+    columns: [
+      { key: "vehicle_code", label: "차량코드", width: "120px" },
+      { key: "vehicle_number", label: "차량번호", width: "120px" },
+      { key: "vehicle_type", label: "차량유형", width: "100px" },
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "load_capacity_kg", label: "적재용량(kg)", width: "120px", align: "right", formatNumber: true },
+      { key: "driver_name", label: "운전자", width: "100px" },
+      { key: "last_maintenance_date", label: "최종정비일", width: "110px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "vehicle_code", label: "차량코드", type: "text", required: true, placeholder: "차량코드를 입력해주세요" },
+      { key: "vehicle_number", label: "차량번호", type: "text", required: true, placeholder: "12가 3456" },
+      { key: "vehicle_type", label: "차량유형", type: "select", required: true, categoryKey: "carrier_vehicle_mng:vehicle_type", placeholder: "차량유형을 선택해주세요" },
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "load_capacity_kg", label: "적재용량(kg)", type: "number", placeholder: "0" },
+      { key: "driver_name", label: "운전자", type: "text", placeholder: "운전자명" },
+      { key: "last_maintenance_date", label: "최종정비일", type: "date" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_vehicle_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+];
+
+// 카테고리 계층 평탄화
+function flattenCategories(items: any[]): { value: string; label: string }[] {
+  const result: { value: string; label: string }[] = [];
+  function walk(arr: any[]) {
+    for (const item of arr) {
+      if (item.value || item.name) {
+        result.push({
+          value: item.value || item.name,
+          label: item.label || item.name || item.value,
+        });
+      }
+      if (item.children?.length) walk(item.children);
+    }
+  }
+  walk(items);
+  return result;
+}
+
+// 채번 대상 필드 매핑: tableName → 코드 필드 key
+const NUMBERING_FIELD_MAP: Record<string, string> = {
+  carrier_mng: "carrier_code",
+  delivery_route_mng: "route_code",
+  carrier_vehicle_mng: "vehicle_code",
+};
+
+// ========== 메인 컴포넌트 ==========
+export default function LogisticsInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 탭 상태
+  const [activeTab, setActiveTab] = useState<TabKey>("carrier");
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 탭별 독립 상태
+  const [tabData, setTabData] = useState<Record<TabKey, any[]>>({
+    carrier: [], cost: [], contract: [], route: [], vehicle: [],
+  });
+  const [tabLoading, setTabLoading] = useState<Record<TabKey, boolean>>({
+    carrier: false, cost: false, contract: false, route: false, vehicle: false,
+  });
+  const [tabChecked, setTabChecked] = useState<Record<TabKey, string[]>>({
+    carrier: [], cost: [], contract: [], route: [], vehicle: [],
+  });
+
+  // FK 참조 데이터 (캐싱)
+  const [carrierOptions, setCarrierOptions] = useState<{ code: string; label: string }[]>([]);
+  const [routeOptions, setRouteOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 카테고리 옵션 캐시
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { value: string; label: string }[]>>({});
+  const loadedCategories = useRef(new Set<string>());
+
+  // 모달 상태
+  const [formOpen, setFormOpen] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [editId, setEditId] = useState<string | null>(null);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 테이블 설정 (탭별)
+  const tsCarrier = useTableSettings("c16-logistics-carrier", TAB_CONFIGS[0].tableName, TAB_CONFIGS[0].columns);
+  const tsCost = useTableSettings("c16-logistics-cost", TAB_CONFIGS[1].tableName, TAB_CONFIGS[1].columns);
+  const tsContract = useTableSettings("c16-logistics-contract", TAB_CONFIGS[2].tableName, TAB_CONFIGS[2].columns);
+  const tsRoute = useTableSettings("c16-logistics-route", TAB_CONFIGS[3].tableName, TAB_CONFIGS[3].columns);
+  const tsVehicle = useTableSettings("c16-logistics-vehicle", TAB_CONFIGS[4].tableName, TAB_CONFIGS[4].columns);
+  const tsMap: Record<TabKey, typeof tsCarrier> = { carrier: tsCarrier, cost: tsCost, contract: tsContract, route: tsRoute, vehicle: tsVehicle };
+  const activeTs = tsMap[activeTab];
+
+  const activeConfig = useMemo(
+    () => TAB_CONFIGS.find((c) => c.key === activeTab)!,
+    [activeTab]
+  );
+
+  // 컬럼 가시성 헬퍼
+  const getVisibleColumns = (tabKey: TabKey) => tsMap[tabKey].visibleColumns;
+
+  // 클라이언트 사이드 필터링
+  const filteredData = useMemo(() => {
+    const data = tabData[activeTab];
+    if (searchFilters.length === 0) return data;
+    return data.filter((row) =>
+      searchFilters.every((f) => {
+        if (!f.value) return true;
+        const kw = f.value.toLowerCase();
+        if (f.columnName) {
+          return String(row[f.columnName] ?? "").toLowerCase().includes(kw);
+        }
+        return Object.values(row).some((v) => String(v ?? "").toLowerCase().includes(kw));
+      })
+    );
+  }, [tabData, activeTab, searchFilters]);
+
+  // FK 참조 데이터 로드
+  const loadReferences = useCallback(async () => {
+    try {
+      const [carrierRes, routeRes] = await Promise.all([
+        apiClient.post("/table-management/tables/carrier_mng/data", {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "carrier_code", order: "asc" },
+        }),
+        apiClient.post("/table-management/tables/delivery_route_mng/data", {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "route_code", order: "asc" },
+        }),
+      ]);
+      const carriers = carrierRes.data?.data?.data || carrierRes.data?.data?.rows || [];
+      setCarrierOptions(
+        carriers.map((r: any) => ({
+          code: r.carrier_code || "",
+          label: `${r.carrier_code} - ${r.carrier_name || ""}`,
+        }))
+      );
+      const routes = routeRes.data?.data?.data || routeRes.data?.data?.rows || [];
+      setRouteOptions(
+        routes.map((r: any) => ({
+          code: r.route_code || "",
+          label: `${r.route_code} - ${r.route_name || ""}`,
+        }))
+      );
+    } catch {
+      // FK 참조 로드 실패 시 무시
+    }
+  }, []);
+
+  useEffect(() => {
+    loadReferences();
+  }, [loadReferences]);
+
+  // 카테고리 옵션 로드
+  const loadCategoryOptions = useCallback(async (tableColumn: string) => {
+    if (loadedCategories.current.has(tableColumn)) return;
+    loadedCategories.current.add(tableColumn);
+    const [tableName, columnName] = tableColumn.split(":");
+    try {
+      const res = await apiClient.get(`/table-categories/${tableName}/${columnName}/values`);
+      const data = res.data?.data || [];
+      setCategoryOptions((prev) => ({
+        ...prev,
+        [tableColumn]: data.length > 0 ? flattenCategories(data) : [],
+      }));
+    } catch {
+      setCategoryOptions((prev) => ({ ...prev, [tableColumn]: [] }));
+    }
+  }, []);
+
+  // 활성 탭의 카테고리 로드
+  useEffect(() => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    config.formFields.forEach((f) => {
+      if (f.categoryKey) loadCategoryOptions(f.categoryKey);
+    });
+  }, [activeTab, loadCategoryOptions]);
+
+  // 데이터 조회
+  const fetchTabData = useCallback(async (tab: TabKey) => {
+    const config = TAB_CONFIGS.find((c) => c.key === tab);
+    if (!config) return;
+    setTabLoading((prev) => ({ ...prev, [tab]: true }));
+    try {
+      const res = await apiClient.post(
+        `/table-management/tables/${config.tableName}/data`,
+        {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: config.defaultSortColumn, order: "asc" },
+        }
+      );
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setTabData((prev) => ({ ...prev, [tab]: rows }));
+    } catch {
+      toast.error("데이터를 불러오는 데 실패했어요.");
+      setTabData((prev) => ({ ...prev, [tab]: [] }));
+    } finally {
+      setTabLoading((prev) => ({ ...prev, [tab]: false }));
+    }
+  }, []);
+
+  // 초기 데이터 로드 (탭 전환 시)
+  useEffect(() => {
+    fetchTabData(activeTab);
+  }, [activeTab, fetchTabData]);
+
+  // 탭 변경
+  const handleTabChange = useCallback((tab: string) => {
+    setActiveTab(tab as TabKey);
+    setSearchFilters([]);
+  }, []);
+
+  // 등록 모달 열기
+  const handleOpenAdd = useCallback(async () => {
+    setEditMode(false);
+    setEditId(null);
+    setFormData({});
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setFormOpen(true);
+
+    // 현재 탭의 채번 규칙 조회
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    const codeField = NUMBERING_FIELD_MAP[config.tableName];
+    if (!codeField) return; // 채번 대상이 아닌 탭
+
+    try {
+      const ruleRes = await apiClient.get(
+        `/numbering-rules/by-column/${config.tableName}/${codeField}`
+      );
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시 — 사용자가 직접 입력
+    }
+  }, [activeTab]);
+
+  // 수정 모달 열기
+  const handleOpenEdit = useCallback((row: any) => {
+    setEditMode(true);
+    setEditId(row.id ? String(row.id) : null);
+    setFormData({ ...row });
+    setFormOpen(true);
+  }, []);
+
+  // 저장
+  const handleSave = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+
+    // 필수값 검증 (등록 모드에서 채번 대상 코드 필드는 자동 할당이므로 스킵)
+    const numberingCodeField = NUMBERING_FIELD_MAP[config.tableName];
+    for (const field of config.formFields) {
+      if (!editMode && numberingRuleId && field.key === numberingCodeField) continue;
+      if (field.required && !formData[field.key]?.toString().trim()) {
+        toast.error(`${field.label}은(는) 필수 입력이에요.`);
+        return;
+      }
+    }
+
+    try {
+      // 배송구간: 출발지→도착지 로 구간명 자동 생성
+      const saveData = { ...formData };
+      if (activeTab === "route" && saveData.departure && saveData.destination) {
+        saveData.route_name = `${saveData.departure}→${saveData.destination}`;
+      }
+
+      if (editMode && editId) {
+        await apiClient.put(`/table-management/tables/${config.tableName}/edit`, {
+          originalData: { id: editId },
+          updatedData: saveData,
+        });
+        toast.success("수정이 완료되었어요.");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        const codeField = NUMBERING_FIELD_MAP[config.tableName];
+        if (codeField && numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            saveData[codeField] = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+
+        await apiClient.post(
+          `/table-management/tables/${config.tableName}/add`,
+          { id: crypto.randomUUID(), ...saveData }
+        );
+        toast.success("등록이 완료되었어요.");
+      }
+      setFormOpen(false);
+      fetchTabData(activeTab);
+      // FK 참조 테이블 변경 시 캐시 갱신
+      if (activeTab === "carrier" || activeTab === "route") {
+        loadReferences();
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    }
+  }, [activeTab, editMode, editId, formData, fetchTabData, loadReferences, numberingRuleId]);
+
+  // 삭제
+  const handleDelete = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    const ids = tabChecked[activeTab];
+    if (ids.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요.");
+      return;
+    }
+    const ok = await confirm(`선택한 ${ids.length}건을 삭제할까요?`, {
+      description: "삭제된 데이터는 복구할 수 없어요.",
+      variant: "destructive",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(
+        `/table-management/tables/${config.tableName}/delete`,
+        { data: ids.map((id) => ({ id })) }
+      );
+      toast.success(`${ids.length}건이 삭제되었어요.`);
+      setTabChecked((prev) => ({ ...prev, [activeTab]: [] }));
+      fetchTabData(activeTab);
+      if (activeTab === "carrier" || activeTab === "route") {
+        loadReferences();
+      }
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  }, [activeTab, tabChecked, confirm, fetchTabData, loadReferences]);
+
+  // 엑셀 다운로드 (필터된 데이터 기준)
+  const handleExcelDownload = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    if (filteredData.length === 0) {
+      toast.error("다운로드할 데이터가 없어요.");
+      return;
+    }
+    const exportData = filteredData.map((row) => {
+      const obj: Record<string, any> = {};
+      config.columns.forEach((col) => {
+        obj[col.label] = row[col.key] ?? "";
+      });
+      return obj;
+    });
+    await exportToExcel(exportData, `${config.label}.xlsx`, config.label);
+    toast.success("엑셀 다운로드가 완료되었어요.");
+  }, [activeTab, filteredData]);
+
+  // 폼 필드 변경
+  const updateFormField = useCallback((key: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [key]: value }));
+  }, []);
+
+  // 행 체크 토글
+  const toggleRowCheck = useCallback((tabKey: TabKey, rowId: string) => {
+    setTabChecked((prev) => {
+      const ids = prev[tabKey];
+      return {
+        ...prev,
+        [tabKey]: ids.includes(rowId) ? ids.filter((x) => x !== rowId) : [...ids, rowId],
+      };
+    });
+  }, []);
+
+  // 전체 체크 토글
+  const toggleAllCheck = useCallback((tabKey: TabKey, checked: boolean) => {
+    setTabChecked((prev) => ({
+      ...prev,
+      [tabKey]: checked ? tabData[tabKey].map((r: any) => String(r.id)) : [],
+    }));
+  }, [tabData]);
+
+  // 폼 필드 렌더
+  const renderFormField = useCallback(
+    (field: FormFieldDef) => {
+      const value = formData[field.key] ?? "";
+      // 현재 탭의 채번 대상 코드 필드인지 확인
+      const numberingCodeField = NUMBERING_FIELD_MAP[activeConfig.tableName];
+      const isNumberingTarget = !editMode && numberingRuleId && field.key === numberingCodeField;
+      // 수정 모드에서 코드/번호 필드는 읽기전용
+      const isCodeField =
+        editMode &&
+        field.type === "text" &&
+        (field.key.endsWith("_code") || field.key.endsWith("_no"));
+
+      switch (field.type) {
+        case "text":
+          // 등록 모드 + 채번 대상 필드: readOnly로 미리보기 코드 표시
+          if (isNumberingTarget) {
+            return (
+              <Input
+                value={previewCode || ""}
+                readOnly
+                placeholder="채번 조회 중..."
+                className="h-9 text-sm bg-muted text-muted-foreground"
+              />
+            );
+          }
+          return (
+            <Input
+              value={value}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              placeholder={field.placeholder}
+              readOnly={isCodeField}
+              className={cn(
+                "h-9 text-sm",
+                isCodeField && "bg-muted text-muted-foreground"
+              )}
+            />
+          );
+        case "number":
+          return (
+            <Input
+              type="number"
+              value={value}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              placeholder={field.placeholder}
+              className="h-9 text-sm"
+            />
+          );
+        case "select": {
+          const opts =
+            field.options ||
+            (field.categoryKey ? categoryOptions[field.categoryKey] : []) ||
+            [];
+          return (
+            <Select
+              value={String(value)}
+              onValueChange={(v) => updateFormField(field.key, v)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder={field.placeholder || "선택해주세요"} />
+              </SelectTrigger>
+              <SelectContent>
+                {opts.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          );
+        }
+        case "smartselect": {
+          // SmartSelect 대신 Select로 직접 구현
+          const opts =
+            field.referenceKey === "carrier" ? carrierOptions : routeOptions;
+          return (
+            <Select
+              value={String(value)}
+              onValueChange={(v) => updateFormField(field.key, v)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder={field.placeholder || "선택해주세요"} />
+              </SelectTrigger>
+              <SelectContent>
+                {opts.map((o) => (
+                  <SelectItem key={o.code} value={o.code}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          );
+        }
+        case "date":
+          return (
+            <Input
+              type="date"
+              value={value ? String(value).split("T")[0] : ""}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              className="h-9 text-sm"
+            />
+          );
+        default:
+          return null;
+      }
+    },
+    [formData, editMode, carrierOptions, routeOptions, categoryOptions, updateFormField, activeConfig, numberingRuleId, previewCode]
+  );
+
+  // ========== 렌더링 ==========
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={activeConfig.tableName}
+        filterId="c16-logistics-info"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={activeTs.filterConfig}
+        dataCount={filteredData.length}
+      />
+
+      {/* 탭 + 콘텐츠 영역 */}
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border bg-card"
+      >
+        <TabsList className="h-auto w-full shrink-0 justify-start gap-0 rounded-none border-b bg-muted/30 p-0">
+          {TAB_CONFIGS.map((tab) => (
+            <TabsTrigger
+              key={tab.key}
+              value={tab.key}
+              className="flex items-center gap-1.5 rounded-none border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-muted-foreground data-[state=active]:border-primary data-[state=active]:font-semibold data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              {tab.icon}
+              {tab.label}
+              <Badge
+                variant="outline"
+                className="ml-1 h-5 min-w-[22px] justify-center px-1.5 font-mono text-[10px]"
+              >
+                {tabData[tab.key]?.length || 0}
+              </Badge>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {TAB_CONFIGS.map((tab) => {
+          const displayData = tab.key === activeTab ? filteredData : tabData[tab.key];
+          const isAllChecked =
+            tabData[tab.key].length > 0 &&
+            tabData[tab.key].every((r: any) => tabChecked[tab.key].includes(String(r.id)));
+
+          return (
+            <TabsContent
+              key={tab.key}
+              value={tab.key}
+              className="m-0 flex flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
+            >
+              {/* 액션 바 */}
+              <div className="flex shrink-0 items-center justify-between border-b px-3 py-2">
+                <div className="flex items-center gap-2">
+                  <h2 className="text-sm font-bold">{tab.label} 목록</h2>
+                  <Badge className="bg-primary/10 font-mono text-[11px] text-primary">
+                    {tab.key === activeTab ? displayData.length : tabData[tab.key]?.length || 0}건
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" className="h-8 text-xs" onClick={handleOpenAdd}>
+                    <Plus className="mr-1 h-3.5 w-3.5" />
+                    등록
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs"
+                    disabled={tabChecked[tab.key].length !== 1}
+                    onClick={() => {
+                      const row = tabData[tab.key].find(
+                        (r: any) => String(r.id) === tabChecked[tab.key][0]
+                      );
+                      if (row) handleOpenEdit(row);
+                    }}
+                  >
+                    <Pencil className="mr-1 h-3.5 w-3.5" />
+                    수정
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs text-destructive hover:bg-destructive/10"
+                    disabled={tabChecked[tab.key].length === 0}
+                    onClick={handleDelete}
+                  >
+                    <Trash2 className="mr-1 h-3.5 w-3.5" />
+                    삭제
+                  </Button>
+                  <div className="mx-1 h-5 w-px bg-border" />
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs"
+                    onClick={handleExcelDownload}
+                  >
+                    <Download className="mr-1 h-3.5 w-3.5" />
+                    엑셀
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => fetchTabData(tab.key)}
+                  >
+                    <RefreshCw
+                      className={cn(
+                        "h-3.5 w-3.5",
+                        tabLoading[tab.key] && "animate-spin"
+                      )}
+                    />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => activeTs.setOpen(true)}
+                  >
+                    <Settings2 className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 테이블 영역 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={getVisibleColumns(tab.key).map((col): EDataTableColumn => ({
+                    key: col.key,
+                    label: col.label,
+                    align: col.align,
+                    formatNumber: col.formatNumber,
+                    truncate: true,
+                  }))}
+                  data={tsMap[tab.key].groupData(displayData)}
+                  rowKey={(row: any) => String(row.id)}
+                  loading={tabLoading[tab.key]}
+                  emptyMessage={`등록된 ${tab.label} 정보가 없어요`}
+                  showCheckbox
+                  checkedIds={tabChecked[tab.key]}
+                  onCheckedChange={(ids) => setTabChecked((prev) => ({ ...prev, [tab.key]: ids }))}
+                  onRowDoubleClick={(row) => handleOpenEdit(row)}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
+              </div>
+            </TabsContent>
+          );
+        })}
+      </Tabs>
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={formOpen} onOpenChange={setFormOpen}>
+        <DialogContent className="flex max-h-[85vh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[680px]">
+          <DialogHeader className="shrink-0 border-b px-6 py-4">
+            <DialogTitle>
+              {activeConfig.label} {editMode ? "수정" : "등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {editMode
+                ? `${activeConfig.label} 정보를 수정해주세요.`
+                : `새 ${activeConfig.label} 정보를 입력해주세요.`}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto p-6">
+            <div className="grid grid-cols-2 gap-4">
+              {activeConfig.formFields.map((field) => (
+                <div key={field.key} className="flex flex-col gap-1.5">
+                  <Label className="text-xs font-semibold text-muted-foreground">
+                    {field.label}
+                    {field.required && (
+                      <span className="ml-0.5 text-destructive">*</span>
+                    )}
+                  </Label>
+                  {renderFormField(field)}
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="shrink-0 border-t">
+            <div className="flex items-center justify-end gap-2 px-6 py-3">
+              <Button variant="outline" onClick={() => setFormOpen(false)}>
+                취소
+              </Button>
+              <Button onClick={handleSave}>
+                {editMode ? "수정" : "등록"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={activeTs.open}
+        onOpenChange={activeTs.setOpen}
+        tableName={activeTs.tableName}
+        settingsId={activeTs.settingsId}
+        defaultVisibleKeys={activeTs.defaultVisibleKeys}
+        onSave={activeTs.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/logistics/inventory/page.tsx b/frontend/app/(main)/COMPANY_8/logistics/inventory/page.tsx
new file mode 100644
index 00000000..7d2a96c6
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/logistics/inventory/page.tsx
@@ -0,0 +1,738 @@
+"use client";
+
+/**
+ * 재고현황 — 하드코딩 페이지 (Type B 마스터-디테일)
+ *
+ * 좌측: 재고 목록 (inventory_stock, item_info JOIN)
+ * 우측: 선택 품목의 재고 이동 이력 (inventory_history)
+ *
+ * ★ 재고 직접 등록/삭제 불가 — 입출고를 통해서만 변동, 조정만 가능
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Package,
+  Loader2,
+  Download,
+  ClipboardEdit,
+  History,
+  AlertTriangle,
+  RefreshCw,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { toast } from "sonner";
+import { exportToExcel } from "@/lib/utils/excelExport";
+
+const STOCK_TABLE = "inventory_stock";
+
+const STOCK_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "warehouse_code", label: "창고" },
+  { key: "location_code", label: "위치" },
+  { key: "current_qty", label: "현재수량", align: "right" as const },
+  { key: "safety_qty", label: "안전재고", align: "right" as const },
+  { key: "unit", label: "단위" },
+  { key: "status", label: "상태" },
+];
+const HISTORY_TABLE = "inventory_history";
+
+const getStatusVariant = (
+  status: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "정상":
+      return "default";
+    case "부족":
+      return "destructive";
+    case "과잉":
+      return "secondary";
+    default:
+      return "outline";
+  }
+};
+
+const getHistoryTypeVariant = (
+  type: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (type) {
+    case "입고":
+      return "default";
+    case "출고":
+      return "secondary";
+    case "조정":
+      return "outline";
+    case "입고취소":
+    case "이동":
+      return "destructive";
+    default:
+      return "outline";
+  }
+};
+
+export default function InventoryStatusPage() {
+  const { user } = useAuth();
+  const ts = useTableSettings("c16-inventory", STOCK_TABLE, STOCK_COLUMNS);
+
+  // 좌측: 재고 목록
+  const [stockItems, setStockItems] = useState<any[]>([]);
+  const [stockLoading, setStockLoading] = useState(false);
+  const [selectedStockId, setSelectedStockId] = useState<string | null>(null);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 이동 이력
+  const [historyItems, setHistoryItems] = useState<any[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+
+  // 조정 모달
+  const [adjustModalOpen, setAdjustModalOpen] = useState(false);
+  const [adjustForm, setAdjustForm] = useState<{
+    adjust_type: string;
+    adjust_qty: string;
+    reason: string;
+  }>({ adjust_type: "증가", adjust_qty: "", reason: "" });
+  const [adjustSaving, setAdjustSaving] = useState(false);
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["status", "unit"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${STOCK_TABLE}/${col}/values`
+          );
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setCategoryOptions(optMap);
+    };
+    load();
+  }, []);
+
+  // 재고 목록 조회
+  const fetchStock = useCallback(async () => {
+    setStockLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const [stockRes, itemRes, whRes] = await Promise.all([
+        apiClient.post(`/table-management/tables/${STOCK_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+          autoFilter: true,
+          sort: { columnName: "item_code", order: "asc" },
+        }),
+        apiClient.post(`/table-management/tables/item_info/data`, { page: 1, size: 500, autoFilter: true }),
+        apiClient.post(`/table-management/tables/warehouse_info/data`, { page: 1, size: 500, autoFilter: true }),
+      ]);
+      const raw = stockRes.data?.data?.data || stockRes.data?.data?.rows || [];
+      const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+      const warehouses = whRes.data?.data?.data || whRes.data?.data?.rows || [];
+      const itemMap = new Map(items.map((i: any) => [i.item_number || i.item_code, { name: i.item_name || "", unit: i.unit || "" }]));
+      const whMap = new Map(warehouses.map((w: any) => [w.warehouse_code, w.warehouse_name || w.warehouse_code]));
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const itemInfo = itemMap.get(r.item_code) as any;
+        return {
+          ...r,
+          item_name: itemInfo?.name || "",
+          unit: itemInfo?.unit || resolve("unit", r.unit),
+          warehouse_name: whMap.get(r.warehouse_code) || r.warehouse_code || "",
+          status: resolve("status", r.status),
+          _isLow: r.safety_qty && Number(r.current_qty) < Number(r.safety_qty),
+        };
+      });
+      setStockItems(data);
+    } catch {
+      toast.error("재고 목록을 불러오지 못했어요");
+    } finally {
+      setStockLoading(false);
+    }
+  }, [categoryOptions, searchFilters]);
+
+  useEffect(() => {
+    fetchStock();
+  }, [fetchStock]);
+
+  // 선택된 재고
+  const selectedStock = stockItems.find((s) => s.id === selectedStockId);
+
+  // 이력 조회
+  const fetchHistory = useCallback(async () => {
+    if (!selectedStock?.item_code) {
+      setHistoryItems([]);
+      return;
+    }
+    setHistoryLoading(true);
+    try {
+      const historyFilters: any[] = [
+        {
+          columnName: "item_code",
+          operator: "equals",
+          value: selectedStock.item_code,
+        },
+      ];
+      if (selectedStock.warehouse_code) {
+        historyFilters.push({
+          columnName: "warehouse_code",
+          operator: "equals",
+          value: selectedStock.warehouse_code,
+        });
+      }
+      const res = await apiClient.post(
+        `/table-management/tables/${HISTORY_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: { enabled: true, filters: historyFilters },
+          autoFilter: true,
+          sort: { columnName: "transaction_date", order: "desc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setHistoryItems(raw);
+    } catch {
+      toast.error("재고 이력을 불러오지 못했어요");
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, [selectedStock?.item_code, selectedStock?.warehouse_code]);
+
+  useEffect(() => {
+    fetchHistory();
+  }, [fetchHistory]);
+
+  // 재고 조정 저장
+  const handleAdjustSave = async () => {
+    if (!selectedStock) return;
+    const qty = Number(adjustForm.adjust_qty);
+    if (!qty || qty <= 0) {
+      toast.error("조정 수량을 입력해주세요");
+      return;
+    }
+    if (!adjustForm.reason.trim()) {
+      toast.error("조정 사유를 입력해주세요");
+      return;
+    }
+    setAdjustSaving(true);
+    try {
+      const changeQty = adjustForm.adjust_type === "증가" ? qty : -qty;
+      const afterQty = Number(selectedStock.current_qty || 0) + changeQty;
+
+      await apiClient.post(
+        `/table-management/tables/${HISTORY_TABLE}/add`,
+        {
+          id: crypto.randomUUID(),
+          item_code: selectedStock.item_code,
+          warehouse_code: selectedStock.warehouse_code || "",
+          location_code: selectedStock.location_code || "",
+          transaction_type: "조정",
+          transaction_date: new Date().toISOString(),
+          quantity: String(changeQty),
+          balance_qty: String(afterQty),
+          remark: adjustForm.reason.trim(),
+        }
+      );
+
+      await apiClient.put(
+        `/table-management/tables/${STOCK_TABLE}/edit`,
+        {
+          originalData: { id: selectedStock.id },
+          updatedData: { current_qty: afterQty },
+        }
+      );
+
+      toast.success("재고가 조정되었어요");
+      setAdjustModalOpen(false);
+      setAdjustForm({ adjust_type: "증가", adjust_qty: "", reason: "" });
+      fetchStock();
+    } catch {
+      toast.error("재고 조정에 실패했어요");
+    } finally {
+      setAdjustSaving(false);
+    }
+  };
+
+  // EDataTable 컬럼 정의
+  const stockColumns: EDataTableColumn[] = ts.visibleColumns.map((col) => {
+    const base: EDataTableColumn = { key: col.key, label: col.label, align: col.align };
+    if (col.key === "current_qty") {
+      return {
+        ...base,
+        align: "right" as const,
+        render: (val: any, row: any) => (
+          <span className="font-mono">
+            <span className={cn(row._isLow && "text-destructive font-bold")}>
+              {Number(row.current_qty || 0).toLocaleString()}
+            </span>
+            {row._isLow && (
+              <AlertTriangle className="inline h-3 w-3 text-destructive ml-1" />
+            )}
+          </span>
+        ),
+      };
+    }
+    if (col.key === "safety_qty") {
+      return {
+        ...base,
+        align: "right" as const,
+        formatNumber: true,
+      };
+    }
+    if (col.key === "status") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getStatusVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    return base;
+  });
+
+  // 엑셀 내보내기
+  const handleExcelExport = () => {
+    if (stockItems.length === 0) {
+      toast.error("내보낼 데이터가 없어요");
+      return;
+    }
+    exportToExcel(
+      stockItems.map((r) => ({
+        품목코드: r.item_code,
+        품명: r.item_name,
+        창고: r.warehouse_name || r.warehouse_code,
+        위치: r.location_code,
+        현재수량: r.current_qty,
+        안전재고: r.safety_qty,
+        단위: r.unit,
+        상태: r.status,
+      })),
+      "재고현황"
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3">
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={STOCK_TABLE}
+        filterId="c16-inventory"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={stockItems.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1 text-xs"
+              onClick={handleExcelExport}
+            >
+              <Download className="h-3.5 w-3.5" />
+              엑셀
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 패널 */}
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="flex-1 rounded-lg border bg-card"
+      >
+        {/* 좌측: 재고 목록 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+              <div className="flex items-center gap-2">
+                <span className="text-[13px] font-bold">재고 목록</span>
+                <Badge variant="default" className="rounded-full text-[11px]">
+                  {stockItems.length}건
+                </Badge>
+              </div>
+            </div>
+
+            <EDataTable
+              columns={stockColumns}
+              data={ts.groupData(stockItems)}
+              rowKey={(row) => row.id}
+              loading={stockLoading}
+              emptyMessage="등록된 재고가 없어요"
+              selectedId={selectedStockId}
+              onSelect={(id) => setSelectedStockId(id)}
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+              columnOrderKey="c16-inventory"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 상세 이력 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex flex-col h-full">
+            {!selectedStock ? (
+              <div className="flex flex-col items-center justify-center flex-1 m-5 border-2 border-dashed rounded-lg border-border">
+                <Package className="h-12 w-12 text-muted-foreground/40 mb-4" />
+                <p className="text-sm font-semibold text-muted-foreground">
+                  품목을 선택해주세요
+                </p>
+                <p className="text-xs text-muted-foreground/70 mt-1">
+                  좌측에서 품목을 선택하면 재고 이력이 표시돼요
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                  <div className="flex items-center gap-2">
+                    <History className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-[13px] font-bold">
+                      {selectedStock.item_name || selectedStock.item_code}
+                    </span>
+                    <Badge
+                      variant="outline"
+                      className="rounded-full text-[11px] font-mono"
+                    >
+                      {selectedStock.item_code}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-1.5 text-xs">
+                      <span className="text-muted-foreground">현재:</span>
+                      <span
+                        className={cn(
+                          "font-bold font-mono",
+                          selectedStock._isLow
+                            ? "text-destructive"
+                            : "text-foreground"
+                        )}
+                      >
+                        {Number(selectedStock.current_qty || 0).toLocaleString()}
+                      </span>
+                      {selectedStock._isLow && (
+                        <AlertTriangle className="h-3.5 w-3.5 text-destructive" />
+                      )}
+                    </div>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={() => {
+                        setAdjustForm({
+                          adjust_type: "증가",
+                          adjust_qty: "",
+                          reason: "",
+                        });
+                        setAdjustModalOpen(true);
+                      }}
+                    >
+                      <ClipboardEdit className="h-3.5 w-3.5" />
+                      재고 조정
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 재고 요약 카드 */}
+                <div className="grid grid-cols-4 gap-2 px-4 py-3 border-b">
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">현재수량</span>
+                    <span className="text-sm font-bold font-mono">
+                      {Number(selectedStock.current_qty || 0).toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">안전재고</span>
+                    <span className="text-sm font-bold font-mono">
+                      {Number(selectedStock.safety_qty || 0).toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">창고</span>
+                    <span className="text-sm font-bold truncate max-w-full">
+                      {selectedStock.warehouse_name || "-"}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">상태</span>
+                    <Badge
+                      variant={getStatusVariant(selectedStock.status)}
+                      className="text-[10px] mt-0.5"
+                    >
+                      {selectedStock.status || "-"}
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* 이력 서브헤더 */}
+                <div className="flex items-center justify-between px-4 py-2 border-b">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-semibold text-muted-foreground">
+                      재고 이동 이력
+                    </span>
+                    <Badge variant="secondary" className="rounded-full text-[10px]">
+                      {historyItems.length}건
+                    </Badge>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={fetchHistory}
+                  >
+                    <RefreshCw className="h-3 w-3" />
+                    새로고침
+                  </Button>
+                </div>
+
+                {/* 이력 테이블 */}
+                <div className="flex-1 overflow-auto">
+                  {historyLoading ? (
+                    <div className="flex items-center justify-center h-20">
+                      <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : historyItems.length === 0 ? (
+                    <div className="flex items-center justify-center h-20 text-xs text-muted-foreground">
+                      재고 이동 이력이 없어요
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="w-8 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">일자</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                          <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">변동수량</TableHead>
+                          <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이후수량</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                          <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사유</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">처리자</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {historyItems.map((h, idx) => (
+                          <TableRow key={h.id || idx} className="text-xs">
+                            <TableCell className="text-center text-muted-foreground">
+                              {idx + 1}
+                            </TableCell>
+                            <TableCell className="font-mono">
+                              {h.transaction_date ? String(h.transaction_date).slice(0, 10) : h.history_date || ""}
+                            </TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getHistoryTypeVariant(h.transaction_type || h.history_type)}
+                                className="text-[10px]"
+                              >
+                                {h.transaction_type || h.history_type}
+                              </Badge>
+                            </TableCell>
+                            <TableCell
+                              className={cn(
+                                "text-right font-mono",
+                                Number(h.quantity ?? h.change_qty) > 0
+                                  ? "text-primary"
+                                  : "text-destructive"
+                              )}
+                            >
+                              {Number(h.quantity ?? h.change_qty) > 0 ? "+" : ""}
+                              {Number(h.quantity ?? h.change_qty ?? 0).toLocaleString()}
+                            </TableCell>
+                            <TableCell className="text-right font-mono">
+                              {Number(h.balance_qty ?? h.after_qty ?? 0).toLocaleString()}
+                            </TableCell>
+                            <TableCell className="font-mono truncate max-w-[120px]">
+                              {h.reference_number || h.reference_no || ""}
+                            </TableCell>
+                            <TableCell className="truncate max-w-[150px]">
+                              {h.remark || h.reason || ""}
+                            </TableCell>
+                            <TableCell>{h.writer || h.created_by || ""}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 재고 조정 Dialog */}
+      <Dialog open={adjustModalOpen} onOpenChange={setAdjustModalOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>재고 조정</DialogTitle>
+            <DialogDescription>
+              {selectedStock
+                ? `${selectedStock.item_name || selectedStock.item_code} — 현재 수량: ${Number(selectedStock.current_qty || 0).toLocaleString()}`
+                : ""}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-2">
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 유형
+              </Label>
+              <Select
+                value={adjustForm.adjust_type}
+                onValueChange={(v) =>
+                  setAdjustForm((prev) => ({ ...prev, adjust_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="조정 유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="증가">증가 (입고 보정)</SelectItem>
+                  <SelectItem value="감소">감소 (출고 보정)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 수량
+              </Label>
+              <Input
+                type="number"
+                min={1}
+                placeholder="수량을 입력해주세요"
+                value={adjustForm.adjust_qty}
+                onChange={(e) =>
+                  setAdjustForm((prev) => ({
+                    ...prev,
+                    adjust_qty: e.target.value,
+                  }))
+                }
+              />
+              {adjustForm.adjust_qty && selectedStock && (
+                <p className="text-xs text-muted-foreground">
+                  조정 후 수량:{" "}
+                  <span className="font-mono font-bold">
+                    {(
+                      Number(selectedStock.current_qty || 0) +
+                      (adjustForm.adjust_type === "증가" ? 1 : -1) *
+                        Number(adjustForm.adjust_qty || 0)
+                    ).toLocaleString()}
+                  </span>
+                </p>
+              )}
+            </div>
+
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 사유 *
+              </Label>
+              <Textarea
+                placeholder="조정 사유를 입력해주세요"
+                rows={3}
+                value={adjustForm.reason}
+                onChange={(e) =>
+                  setAdjustForm((prev) => ({
+                    ...prev,
+                    reason: e.target.value,
+                  }))
+                }
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setAdjustModalOpen(false)}
+            >
+              취소
+            </Button>
+            <Button onClick={handleAdjustSave} disabled={adjustSaving}>
+              {adjustSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              조정하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/logistics/material-status/page.tsx b/frontend/app/(main)/COMPANY_8/logistics/material-status/page.tsx
new file mode 100644
index 00000000..eb87ba92
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/logistics/material-status/page.tsx
@@ -0,0 +1,629 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+// Card 제거 — rounded-lg border bg-card 패턴 사용
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Search,
+  RotateCcw,
+  Package,
+  ClipboardList,
+  Factory,
+  MapPin,
+  AlertTriangle,
+  CheckCircle2,
+  Loader2,
+  Inbox,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  getWorkOrders,
+  getMaterialStatus,
+  getWarehouses,
+  type WorkOrder,
+  type MaterialData,
+  type WarehouseData,
+} from "@/lib/api/materialStatus";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+
+const GRID_COLUMNS = [
+  { key: "plan_no", label: "계획번호" },
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "plan_qty", label: "수량" },
+  { key: "plan_date", label: "일자" },
+  { key: "status", label: "상태" },
+];
+
+const formatDate = (date: Date) => {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+};
+
+const getStatusLabel = (status: string) => {
+  const map: Record<string, string> = {
+    planned: "계획",
+    in_progress: "진행중",
+    completed: "완료",
+    pending: "대기",
+    cancelled: "취소",
+  };
+  return map[status] || status;
+};
+
+const getStatusStyle = (status: string) => {
+  const map: Record<string, string> = {
+    planned: "bg-secondary text-secondary-foreground border-border",
+    pending: "bg-secondary text-secondary-foreground border-border",
+    in_progress: "bg-primary/10 text-primary border-primary/20",
+    completed: "bg-accent text-accent-foreground border-accent/50",
+    cancelled: "bg-muted text-muted-foreground border-border",
+  };
+  return map[status] || "bg-muted text-muted-foreground border-border";
+};
+
+export default function MaterialStatusPage() {
+  const ts = useTableSettings("c16-material-status", "work_instruction", GRID_COLUMNS);
+  const today = new Date();
+  const monthAgo = new Date(today);
+  monthAgo.setMonth(today.getMonth() - 1);
+
+  const [searchDateFrom, setSearchDateFrom] = useState(formatDate(monthAgo));
+  const [searchDateTo, setSearchDateTo] = useState(formatDate(today));
+  const [searchItemCode, setSearchItemCode] = useState("");
+  const [searchItemName, setSearchItemName] = useState("");
+
+  const [workOrders, setWorkOrders] = useState<WorkOrder[]>([]);
+  const [workOrdersLoading, setWorkOrdersLoading] = useState(false);
+  const [checkedWoIds, setCheckedWoIds] = useState<string[]>([]);
+  const [selectedWoId, setSelectedWoId] = useState<string | null>(null);
+
+  const [warehouses, setWarehouses] = useState<WarehouseData[]>([]);
+  const [warehouse, setWarehouse] = useState("");
+  const [materialSearch, setMaterialSearch] = useState("");
+  const [showShortageOnly, setShowShortageOnly] = useState(false);
+  const [materials, setMaterials] = useState<MaterialData[]>([]);
+  const [materialsLoading, setMaterialsLoading] = useState(false);
+
+  // 창고 목록 초기 로드
+  useEffect(() => {
+    (async () => {
+      const res = await getWarehouses();
+      if (res.success && res.data) {
+        setWarehouses(res.data);
+      }
+    })();
+  }, []);
+
+  // 작업지시 검색
+  const handleSearch = useCallback(async () => {
+    setWorkOrdersLoading(true);
+    try {
+      const res = await getWorkOrders({
+        dateFrom: searchDateFrom,
+        dateTo: searchDateTo,
+        itemCode: searchItemCode || undefined,
+        itemName: searchItemName || undefined,
+      });
+      if (res.success && res.data) {
+        setWorkOrders(res.data);
+        setCheckedWoIds([]);
+        setSelectedWoId(null);
+        setMaterials([]);
+      }
+    } finally {
+      setWorkOrdersLoading(false);
+    }
+  }, [searchDateFrom, searchDateTo, searchItemCode, searchItemName]);
+
+  // 초기 로드
+  useEffect(() => {
+    handleSearch();
+  }, []);
+
+  const isAllChecked =
+    workOrders.length > 0 && checkedWoIds.length === workOrders.length;
+
+  const handleCheckAll = useCallback(
+    (checked: boolean) => {
+      setCheckedWoIds(checked ? workOrders.map((wo) => wo.id) : []);
+    },
+    [workOrders]
+  );
+
+  const handleCheckWo = useCallback((id: string, checked: boolean) => {
+    setCheckedWoIds((prev) =>
+      checked ? [...prev, id] : prev.filter((i) => i !== id)
+    );
+  }, []);
+
+  const handleSelectWo = useCallback((id: string) => {
+    setSelectedWoId((prev) => (prev === id ? null : id));
+  }, []);
+
+  // 선택된 작업지시의 자재 조회
+  const handleLoadSelectedMaterials = useCallback(async () => {
+    if (checkedWoIds.length === 0) {
+      alert("자재를 조회할 작업지시를 선택해주세요.");
+      return;
+    }
+
+    setMaterialsLoading(true);
+    try {
+      const res = await getMaterialStatus({
+        planIds: checkedWoIds,
+        warehouseCode: warehouse || undefined,
+      });
+      if (res.success && res.data) {
+        setMaterials(res.data);
+      }
+    } finally {
+      setMaterialsLoading(false);
+    }
+  }, [checkedWoIds, warehouse]);
+
+  const handleResetSearch = useCallback(() => {
+    const t = new Date();
+    const m = new Date(t);
+    m.setMonth(t.getMonth() - 1);
+    setSearchDateFrom(formatDate(m));
+    setSearchDateTo(formatDate(t));
+    setSearchItemCode("");
+    setSearchItemName("");
+    setMaterialSearch("");
+    setShowShortageOnly(false);
+  }, []);
+
+  const filteredMaterials = useMemo(() => {
+    return materials.filter((m) => {
+      const searchLower = materialSearch.toLowerCase();
+      const matchesSearch =
+        !materialSearch ||
+        m.code.toLowerCase().includes(searchLower) ||
+        m.name.toLowerCase().includes(searchLower);
+      const matchesShortage = !showShortageOnly || m.current < m.required;
+      return matchesSearch && matchesShortage;
+    });
+  }, [materials, materialSearch, showShortageOnly]);
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 검색 영역 */}
+      <div className="shrink-0 flex flex-wrap items-end gap-3 rounded-lg border bg-card p-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">기간</span>
+            <div className="flex items-center gap-1.5">
+              <Input
+                type="date"
+                className="h-9 w-[140px]"
+                value={searchDateFrom}
+                onChange={(e) => setSearchDateFrom(e.target.value)}
+              />
+              <span className="text-muted-foreground/50 text-xs">~</span>
+              <Input
+                type="date"
+                className="h-9 w-[140px]"
+                value={searchDateTo}
+                onChange={(e) => setSearchDateTo(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목코드</span>
+            <Input
+              placeholder="품목코드"
+              className="h-9 w-[140px]"
+              value={searchItemCode}
+              onChange={(e) => setSearchItemCode(e.target.value)}
+            />
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목명</span>
+            <Input
+              placeholder="품목명"
+              className="h-9 w-[140px]"
+              value={searchItemName}
+              onChange={(e) => setSearchItemName(e.target.value)}
+            />
+          </div>
+
+          <div className="flex-1" />
+
+          <div className="flex items-end gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-9"
+              onClick={handleResetSearch}
+            >
+              <RotateCcw className="mr-1 h-4 w-4" />
+              초기화
+            </Button>
+            <Button
+              size="sm"
+              className="h-9"
+              onClick={handleSearch}
+              disabled={workOrdersLoading}
+            >
+              {workOrdersLoading ? (
+                <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+              ) : (
+                <Search className="mr-1 h-4 w-4" />
+              )}
+              검색
+            </Button>
+          </div>
+      </div>
+
+      {/* 메인 콘텐츠 (좌우 분할) */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 왼쪽: 작업지시 리스트 */}
+          <ResizablePanel defaultSize={35} minSize={25}>
+            <div className="flex h-full flex-col">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between border-b bg-muted/30 px-3 py-2.5 shrink-0">
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    checked={isAllChecked}
+                    onCheckedChange={handleCheckAll}
+                  />
+                  <ClipboardList className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-semibold">작업지시 리스트</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                    {workOrders.length}건
+                  </span>
+                  <Button
+                    size="sm"
+                    className="h-8"
+                    onClick={handleLoadSelectedMaterials}
+                    disabled={materialsLoading}
+                  >
+                    {materialsLoading ? (
+                      <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Search className="mr-1.5 h-3.5 w-3.5" />
+                    )}
+                    자재조회
+                  </Button>
+                  <Button variant="ghost" size="sm" className="h-8" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 작업지시 목록 */}
+              <div className="flex-1 space-y-2 overflow-auto p-3">
+                {workOrdersLoading ? (
+                  <div className="flex flex-col items-center justify-center py-12 text-center">
+                    <Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
+                    <p className="text-sm text-muted-foreground">
+                      작업지시를 조회하고 있어요...
+                    </p>
+                  </div>
+                ) : workOrders.length === 0 ? (
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Inbox className="h-10 w-10 text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">
+                      조회된 작업지시가 없어요
+                    </p>
+                  </div>
+                ) : (
+                  ts.groupData(workOrders).map((wo) => {
+                    if ((wo as any)._isGroupSummary || (wo as any)._isGroupHeader) return null;
+                    return (
+                      <div
+                        key={wo.id}
+                        className={cn(
+                          "flex gap-3 rounded-lg border p-3 transition-all cursor-pointer",
+                          "hover:border-primary/50 hover:shadow-sm",
+                          selectedWoId === wo.id
+                            ? "border-primary bg-primary/5 shadow-sm"
+                            : "border-border"
+                        )}
+                        onClick={() => handleSelectWo(wo.id)}
+                      >
+                        <div
+                          className="flex items-start pt-0.5"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Checkbox
+                            checked={checkedWoIds.includes(wo.id)}
+                            onCheckedChange={(c) =>
+                              handleCheckWo(wo.id, c as boolean)
+                            }
+                          />
+                        </div>
+                        <div className="flex flex-1 flex-col gap-1.5">
+                          <div className="flex items-center gap-2">
+                            {ts.isVisible("plan_no") && (
+                              <span className="text-sm font-bold text-primary">
+                                {wo.plan_no || wo.work_order_no || `WO-${wo.id}`}
+                              </span>
+                            )}
+                            {ts.isVisible("status") && (
+                              <span
+                                className={cn(
+                                  "ml-auto rounded-md border px-2 py-0.5 text-[11px] font-semibold",
+                                  getStatusStyle(wo.status)
+                                )}
+                              >
+                                {getStatusLabel(wo.status)}
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1.5">
+                            {ts.isVisible("item_name") && (
+                              <span className="text-sm font-semibold">
+                                {wo.item_name}
+                              </span>
+                            )}
+                            {ts.isVisible("item_code") && (
+                              <span className="text-xs text-muted-foreground">
+                                ({wo.item_code})
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                            {ts.isVisible("plan_qty") && (
+                              <>
+                                <span>수량:</span>
+                                <span className="font-semibold text-foreground">
+                                  {Number(wo.plan_qty).toLocaleString()}개
+                                </span>
+                              </>
+                            )}
+                            {ts.isVisible("plan_qty") && ts.isVisible("plan_date") && (
+                              <span className="mx-1">|</span>
+                            )}
+                            {ts.isVisible("plan_date") && (
+                              <>
+                                <span>일자:</span>
+                                <span className="font-semibold text-foreground">
+                                  {wo.plan_date
+                                    ? new Date(wo.plan_date)
+                                        .toISOString()
+                                        .slice(0, 10)
+                                    : "-"}
+                                </span>
+                              </>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 오른쪽: 원자재 현황 */}
+          <ResizablePanel defaultSize={65} minSize={35}>
+            <div className="flex h-full flex-col">
+              {/* 패널 헤더 */}
+              <div className="flex items-center gap-2 border-b bg-muted/30 px-3 py-2.5 shrink-0">
+                <Factory className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-semibold">원자재 재고 현황</span>
+              </div>
+
+              {/* 필터 */}
+              <div className="flex flex-wrap items-center gap-3 border-b bg-muted/30 px-4 py-2.5 shrink-0">
+                <Input
+                  placeholder="원자재 검색"
+                  className="h-8 min-w-[150px] flex-1 text-xs"
+                  value={materialSearch}
+                  onChange={(e) => setMaterialSearch(e.target.value)}
+                />
+                <Select value={warehouse} onValueChange={setWarehouse}>
+                  <SelectTrigger className="h-8 w-[180px] text-xs">
+                    <SelectValue placeholder="전체 창고" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__all__">전체 창고</SelectItem>
+                    {warehouses.map((wh) => (
+                      <SelectItem
+                        key={wh.warehouse_code}
+                        value={wh.warehouse_code}
+                      >
+                        {wh.warehouse_name}
+                        {wh.warehouse_type
+                          ? ` (${wh.warehouse_type})`
+                          : ""}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <label className="flex cursor-pointer items-center gap-2 text-xs font-medium">
+                  <Checkbox
+                    checked={showShortageOnly}
+                    onCheckedChange={(c) => setShowShortageOnly(c as boolean)}
+                  />
+                  <span>부족한 것만 보기</span>
+                </label>
+                <span className="ml-auto rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                  {filteredMaterials.length}개 품목
+                </span>
+              </div>
+
+              {/* 원자재 목록 */}
+              <div className="flex-1 space-y-2 overflow-auto p-3">
+                {materialsLoading ? (
+                  <div className="flex flex-col items-center justify-center py-12 text-center">
+                    <Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
+                    <p className="text-sm text-muted-foreground">
+                      자재현황을 조회하고 있어요...
+                    </p>
+                  </div>
+                ) : materials.length === 0 ? (
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Inbox className="h-10 w-10 text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">
+                      작업지시를 선택하고 자재조회 버튼을 클릭해주세요
+                    </p>
+                  </div>
+                ) : filteredMaterials.length === 0 ? (
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Package className="h-10 w-10 text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">
+                      조회된 원자재가 없어요
+                    </p>
+                  </div>
+                ) : (
+                  filteredMaterials.map((material) => {
+                    const shortage = material.required - material.current;
+                    const isShortage = shortage > 0;
+                    const percentage =
+                      material.required > 0
+                        ? Math.min(
+                            (material.current / material.required) * 100,
+                            100
+                          )
+                        : 100;
+
+                    return (
+                      <div
+                        key={material.code}
+                        className={cn(
+                          "rounded-lg border p-3 transition-all hover:shadow-sm",
+                          isShortage
+                            ? "border-destructive/30 bg-destructive/5"
+                            : "border-primary/15 bg-primary/5"
+                        )}
+                      >
+                        {/* 메인 정보 라인 */}
+                        <div className="flex flex-wrap items-center gap-2">
+                          <span className="text-sm font-bold">
+                            {material.name}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            ({material.code})
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            |
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            필요:
+                          </span>
+                          <span className="text-xs font-semibold text-primary">
+                            {material.required.toLocaleString()}
+                            {material.unit}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            |
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            현재:
+                          </span>
+                          <span
+                            className={cn(
+                              "text-xs font-semibold",
+                              isShortage
+                                ? "text-destructive"
+                                : "text-foreground"
+                            )}
+                          >
+                            {material.current.toLocaleString()}
+                            {material.unit}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            |
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            {isShortage ? "부족:" : "여유:"}
+                          </span>
+                          <span
+                            className={cn(
+                              "text-xs font-semibold",
+                              isShortage
+                                ? "text-destructive"
+                                : "text-primary"
+                            )}
+                          >
+                            {Math.abs(shortage).toLocaleString()}
+                            {material.unit}
+                          </span>
+                          <span className="text-xs font-semibold text-muted-foreground">
+                            ({percentage.toFixed(0)}%)
+                          </span>
+
+                          {isShortage ? (
+                            <span className="ml-auto inline-flex items-center gap-1 rounded-md border border-destructive bg-destructive/10 px-2 py-0.5 text-[11px] font-semibold text-destructive">
+                              <AlertTriangle className="h-3 w-3" />
+                              부족
+                            </span>
+                          ) : (
+                            <span className="ml-auto inline-flex items-center gap-1 rounded-md border border-primary bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary">
+                              <CheckCircle2 className="h-3 w-3" />
+                              충분
+                            </span>
+                          )}
+                        </div>
+
+                        {/* 위치별 재고 */}
+                        {material.locations.length > 0 && (
+                          <div className="mt-2 flex flex-wrap items-center gap-1.5">
+                            <MapPin className="h-3.5 w-3.5 text-muted-foreground" />
+                            {material.locations.map((loc, idx) => (
+                              <span
+                                key={idx}
+                                className="inline-flex items-center gap-1 rounded bg-muted/40 px-2 py-0.5 text-xs transition-colors hover:bg-muted/60"
+                              >
+                                <span className="font-semibold font-mono text-primary">
+                                  {loc.location || loc.warehouse}
+                                </span>
+                                <span className="font-semibold">
+                                  {loc.qty.toLocaleString()}
+                                  {material.unit}
+                                </span>
+                              </span>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/logistics/outbound/page.tsx b/frontend/app/(main)/COMPANY_8/logistics/outbound/page.tsx
new file mode 100644
index 00000000..c1ffbd40
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/logistics/outbound/page.tsx
@@ -0,0 +1,1840 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Search,
+  Plus,
+  Trash2,
+  Loader2,
+  PackageOpen,
+  X,
+  Save,
+  ChevronRight,
+  ChevronLeft,
+  ChevronDown,
+  ChevronsLeft,
+  ChevronsRight,
+  Inbox,
+  Settings2,
+  Filter,
+  Check,
+  ArrowUp,
+  ArrowDown,
+} from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+// API: /outbound/*
+import {
+  getOutboundList,
+  createOutbound,
+  updateOutbound,
+  deleteOutbound,
+  generateOutboundNumber,
+  getOutboundWarehouses,
+  getOutboundLocations,
+  getShipmentInstructionSources,
+  getPurchaseOrderSources,
+  getItemSources,
+  type OutboundItem,
+  type ShipmentInstructionSource,
+  type PurchaseOrderSource,
+  type ItemSource,
+  type LocationOption,
+  type WarehouseOption,
+} from "@/lib/api/outbound";
+
+// 출고유형 옵션
+const OUTBOUND_TYPES = [
+  { value: "판매출고", label: "판매출고", color: "bg-primary/10 text-primary" },
+  { value: "반품출고", label: "반품출고", color: "bg-destructive/10 text-destructive" },
+  { value: "기타출고", label: "기타출고", color: "bg-muted text-muted-foreground" },
+];
+
+const OUTBOUND_STATUS_OPTIONS = [
+  { value: "대기", label: "대기", color: "bg-secondary text-secondary-foreground" },
+  { value: "출고완료", label: "출고완료", color: "bg-primary/10 text-primary" },
+  { value: "부분출고", label: "부분출고", color: "bg-accent text-accent-foreground" },
+  { value: "출고취소", label: "출고취소", color: "bg-destructive/10 text-destructive" },
+];
+
+const getTypeColor = (type: string) => OUTBOUND_TYPES.find((t) => t.value === type)?.color || "bg-muted text-muted-foreground";
+const getStatusColor = (status: string) => OUTBOUND_STATUS_OPTIONS.find((s) => s.value === status)?.color || "bg-muted text-muted-foreground";
+
+// 소스 테이블 한글명 매핑
+const SOURCE_TYPE_LABEL: Record<string, string> = {
+  shipment_instruction_detail: "출하지시",
+  purchase_order_mng: "발주",
+  item_info: "품목",
+};
+
+const GRID_COLUMNS = [
+  { key: "outbound_number", label: "출고번호" },
+  { key: "outbound_type", label: "출고유형" },
+  { key: "outbound_date", label: "출고일" },
+  { key: "reference_number", label: "참조번호" },
+  { key: "source_type", label: "데이터출처" },
+  { key: "customer_name", label: "거래처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "outbound_qty", label: "출고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+  { key: "warehouse_name", label: "창고" },
+  { key: "outbound_status", label: "출고상태" },
+  { key: "remark", label: "비고" },
+];
+
+// 마스터 헤더 레이아웃 (출고번호 뒤)
+const MASTER_BODY_LAYOUT = [
+  { key: "outbound_type", label: "출고유형", colSpan: 1 },
+  { key: "outbound_date", label: "출고일", colSpan: 1 },
+  { key: "reference_number", label: "참조번호", colSpan: 1 },
+  { key: "customer_name", label: "거래처", colSpan: 1 },
+  { key: "warehouse_name", label: "창고", colSpan: 1 },
+  { key: "outbound_status", label: "출고상태", colSpan: 1 },
+  { key: "memo", label: "비고", colSpan: 1 },
+];
+
+// 디테일 헤더 컬럼
+const DETAIL_HEADER_COLS = [
+  { key: "source_type", label: "출처" },
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "specification", label: "규격" },
+  { key: "outbound_qty", label: "출고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+];
+
+// 마스터 필드 키 목록 (필터 분류용)
+const MASTER_KEYS = new Set(["outbound_number", ...MASTER_BODY_LAYOUT.map((c) => c.key)]);
+
+// 디테일 필드 키 매핑 (GRID_COLUMNS key → DETAIL_HEADER_COLS key)
+const DETAIL_KEY_MAP: Record<string, string> = {
+  source_type: "source_type",
+  item_number: "item_code",
+  item_name: "item_name",
+  spec: "specification",
+  outbound_qty: "outbound_qty",
+  unit_price: "unit_price",
+  total_amount: "total_amount",
+};
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 선택된 소스 아이템 (등록 모달에서 사용)
+interface SelectedSourceItem {
+  key: string;
+  outbound_type: string;
+  reference_number: string;
+  customer_code: string;
+  customer_name: string;
+  item_number: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  unit: string;
+  outbound_qty: number;
+  unit_price: number;
+  total_amount: number;
+  source_type: string;
+  source_id: string;
+}
+
+export default function OutboundPage() {
+  const ts = useTableSettings("c16-outbound", "outbound_mng", GRID_COLUMNS);
+
+  // ts.visibleColumns 기반 마스터/디테일 컬럼 계산
+  const visibleMasterLayout = useMemo(() => {
+    const ordered: typeof MASTER_BODY_LAYOUT = [];
+    for (const vc of ts.visibleColumns) {
+      const m = MASTER_BODY_LAYOUT.find((ml) => ml.key === vc.key);
+      if (m) ordered.push(m);
+    }
+    return ordered.length > 0 ? ordered : MASTER_BODY_LAYOUT;
+  }, [ts.visibleColumns]);
+
+  const visibleDetailCols = useMemo(() => {
+    const ordered: typeof DETAIL_HEADER_COLS = [];
+    for (const vc of ts.visibleColumns) {
+      const detailKey = DETAIL_KEY_MAP[vc.key];
+      if (detailKey) {
+        const d = DETAIL_HEADER_COLS.find((dc) => dc.key === detailKey);
+        if (d) ordered.push(d);
+      }
+    }
+    return ordered.length > 0 ? ordered : DETAIL_HEADER_COLS;
+  }, [ts.visibleColumns]);
+
+  const TOTAL_COLS = 3 + visibleMasterLayout.length;
+
+  // 목록 데이터
+  const [data, setData] = useState<OutboundItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 마스터-디테일 그룹 테이블 state
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+  const [closingOrders, setClosingOrders] = useState<Set<string>>(new Set());
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
+
+  // 등록 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalOutboundType, setModalOutboundType] = useState("판매출고");
+  const [modalOutboundNo, setModalOutboundNo] = useState("");
+  const [modalOutboundDate, setModalOutboundDate] = useState("");
+  const [modalWarehouse, setModalWarehouse] = useState("");
+  const [modalLocation, setModalLocation] = useState("");
+  const [modalManager, setModalManager] = useState("");
+  const [modalMemo, setModalMemo] = useState("");
+  const [selectedItems, setSelectedItems] = useState<SelectedSourceItem[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // 수정 모드 (등록 모달을 재활용)
+  const [editMode, setEditMode] = useState(false);
+  const [editItemIds, setEditItemIds] = useState<string[]>([]);
+
+  // 소스 데이터
+  const [sourceKeyword, setSourceKeyword] = useState("");
+  const [sourceLoading, setSourceLoading] = useState(false);
+  const [shipmentInstructions, setShipmentInstructions] = useState<ShipmentInstructionSource[]>([]);
+  const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrderSource[]>([]);
+  const [items, setItems] = useState<ItemSource[]>([]);
+  const [warehouses, setWarehouses] = useState<WarehouseOption[]>([]);
+  const [locations, setLocations] = useState<LocationOption[]>([]);
+
+  // 소스 데이터 페이징 (클라이언트 사이드)
+  const [sourcePage, setSourcePage] = useState(1);
+  const [sourcePageSize, setSourcePageSize] = useState(20);
+
+  // 목록 조회
+  const fetchList = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string | undefined> = {};
+      for (const f of searchFilters) {
+        if (!f.value) continue;
+        if (f.columnName === "outbound_type") params.outbound_type = f.value;
+        else if (f.columnName === "outbound_status") params.outbound_status = f.value;
+        else if (f.columnName === "outbound_date" && f.operator === "between") {
+          const [from, to] = f.value.split("~").map((s) => s.trim());
+          if (from) params.date_from = from;
+          if (to) params.date_to = to;
+        } else {
+          params.search_keyword = f.value;
+        }
+      }
+      const res = await getOutboundList(params);
+      if (res.success) setData(res.data);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchList();
+  }, [fetchList]);
+
+  // 창고 목록 로드
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await getOutboundWarehouses();
+        if (res.success) setWarehouses(res.data);
+      } catch {
+        // ignore
+      }
+    })();
+  }, []);
+
+  // --- 마스터-디테일 그룹핑, 필터, 정렬 ---
+
+  // outbound_number 기준 그룹핑 + 필터 + 정렬
+  const filteredGroups = useMemo(() => {
+    // 1차: outbound_number 기준 그룹핑
+    const allGroups: Record<string, { master: OutboundItem; details: OutboundItem[] }> = {};
+    for (const row of data) {
+      const key = row.outbound_number || "_no_number";
+      if (!allGroups[key]) {
+        allGroups[key] = { master: row, details: [] };
+      }
+      allGroups[key].details.push(row);
+    }
+
+    // 마스터 필터 / 디테일 필터 분리
+    const masterFilters: Record<string, Set<string>> = {};
+    const detailFilters: Record<string, Set<string>> = {};
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      if (MASTER_KEYS.has(colKey)) masterFilters[colKey] = values;
+      else detailFilters[colKey] = values;
+    }
+
+    // 2차: 마스터 필터 적용 (그룹 단위)
+    let entries = Object.entries(allGroups);
+    if (Object.keys(masterFilters).length > 0) {
+      entries = entries.filter(([, group]) =>
+        Object.entries(masterFilters).every(([colKey, values]) => {
+          const raw = (group.master as any)?.[colKey] ?? "";
+          return values.has(String(raw));
+        })
+      );
+    }
+
+    // 3차: 디테일 필터 적용 (행 단위)
+    if (Object.keys(detailFilters).length > 0) {
+      entries = entries
+        .map(([outNo, group]) => {
+          const filtered = group.details.filter((row) =>
+            Object.entries(detailFilters).every(([colKey, values]) => {
+              let cellVal = (row as any)[colKey] != null ? String((row as any)[colKey]) : "";
+              if (colKey === "source_type") cellVal = SOURCE_TYPE_LABEL[cellVal] || cellVal;
+              return values.has(cellVal);
+            })
+          );
+          return [outNo, { ...group, details: filtered }] as [string, typeof group];
+        })
+        .filter(([, group]) => group.details.length > 0);
+    }
+
+    // 4차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      if (MASTER_KEYS.has(key)) {
+        entries.sort(([, a], [, b]) => {
+          const av = (a.master as any)?.[key] ?? "";
+          const bv = (b.master as any)?.[key] ?? "";
+          const na = Number(av); const nb = Number(bv);
+          if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+          return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+        });
+      } else {
+        entries.forEach(([, group]) => {
+          group.details.sort((a, b) => {
+            let av: any = (a as any)[key] ?? "";
+            let bv: any = (b as any)[key] ?? "";
+            if (key === "source_type") { av = SOURCE_TYPE_LABEL[av] || av; bv = SOURCE_TYPE_LABEL[bv] || bv; }
+            const na = Number(av); const nb = Number(bv);
+            if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+            return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+          });
+        });
+      }
+    }
+
+    return Object.fromEntries(entries);
+  }, [data, headerFilters, sortState]);
+
+  // 마스터 컬럼별 고유값 (헤더 필터용)
+  const masterUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    const seenMasters = new Map<string, OutboundItem>();
+    data.forEach((row) => {
+      if (row.outbound_number && !seenMasters.has(row.outbound_number)) {
+        seenMasters.set(row.outbound_number, row);
+      }
+    });
+    const masters = Array.from(seenMasters.values());
+    for (const col of [{ key: "outbound_number", label: "출고번호" }, ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label }))]) {
+      const values = new Set<string>();
+      masters.forEach((m) => {
+        const val = (m as any)?.[col.key];
+        if (val !== null && val !== undefined && val !== "") values.add(String(val));
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 디테일 컬럼별 고유값 (디테일 서브헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of DETAIL_HEADER_COLS) {
+      const values = new Set<string>();
+      data.forEach((row) => {
+        let val = (row as any)[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "source_type") val = SOURCE_TYPE_LABEL[val] || val;
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
+  };
+
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
+  };
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
+    );
+  };
+
+  // 삭제
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) return;
+    if (!confirm(`선택한 ${checkedIds.length}건을 삭제하시겠습니까?`)) return;
+    for (const id of checkedIds) {
+      await deleteOutbound(id);
+    }
+    setCheckedIds([]);
+    fetchList();
+  };
+
+  // --- 등록 모달 ---
+
+  const loadSourceData = useCallback(
+    async (type: string, keyword?: string) => {
+      setSourceLoading(true);
+      try {
+        if (type === "판매출고") {
+          const res = await getShipmentInstructionSources(keyword || undefined);
+          if (res.success) setShipmentInstructions(res.data);
+        } else if (type === "반품출고") {
+          const res = await getPurchaseOrderSources(keyword || undefined);
+          if (res.success) setPurchaseOrders(res.data);
+        } else {
+          const res = await getItemSources(keyword || undefined);
+          if (res.success) setItems(res.data);
+        }
+      } catch {
+        // ignore
+      } finally {
+        setSourceLoading(false);
+      }
+    },
+    []
+  );
+
+  const openRegisterModal = async () => {
+    const defaultType = "판매출고";
+    setEditMode(false);
+    setEditItemIds([]);
+    setModalOutboundType(defaultType);
+    setModalOutboundDate(new Date().toISOString().split("T")[0]);
+    setModalWarehouse("");
+    setModalLocation("");
+    setModalManager("");
+    setModalMemo("");
+    setSelectedItems([]);
+    setSourceKeyword("");
+    setShipmentInstructions([]);
+    setPurchaseOrders([]);
+    setItems([]);
+    setIsModalOpen(true);
+
+    try {
+      const [numRes] = await Promise.all([
+        generateOutboundNumber(),
+        loadSourceData(defaultType),
+      ]);
+      if (numRes.success) setModalOutboundNo(numRes.data);
+    } catch {
+      setModalOutboundNo("");
+    }
+  };
+
+  // 수정 모달 열기 (같은 출고번호 묶어서)
+  const openEditModal = (row: OutboundItem) => {
+    const outNo = row.outbound_number;
+    const grouped = data.filter((d) => d.outbound_number === outNo);
+    const first = grouped[0] || row;
+
+    setEditMode(true);
+    setEditItemIds(grouped.map((g) => g.id));
+    setModalOutboundNo(outNo);
+    setModalOutboundType(first.outbound_type || "판매출고");
+    setModalOutboundDate(first.outbound_date ? first.outbound_date.slice(0, 10) : "");
+    setModalWarehouse(first.warehouse_code || "");
+    setModalLocation(first.location_code || "");
+    setModalManager(first.manager_id || "");
+    setModalMemo(first.memo || "");
+    setSelectedItems(
+      grouped.map((g) => ({
+        key: g.id,
+        outbound_type: g.outbound_type || "",
+        reference_number: g.reference_number || "",
+        customer_code: g.customer_code || "",
+        customer_name: g.customer_name || "",
+        item_number: g.item_code || "",
+        item_name: g.item_name || "",
+        spec: g.specification || "",
+        material: g.material || "",
+        unit: g.unit || "",
+        outbound_qty: Number(g.outbound_qty) || 0,
+        unit_price: Number(g.unit_price) || 0,
+        total_amount: Number(g.total_amount) || 0,
+        source_type: g.source_type || "",
+        source_id: (g as any).source_id || "",
+      }))
+    );
+    setSourceKeyword("");
+    setIsModalOpen(true);
+    loadSourceData(first.outbound_type || "판매출고");
+  };
+
+  const searchSourceData = useCallback(async () => {
+    setSourcePage(1);
+    await loadSourceData(modalOutboundType, sourceKeyword || undefined);
+  }, [modalOutboundType, sourceKeyword, loadSourceData]);
+
+  // 현재 출고유형에 따른 전체 소스 데이터
+  const allSourceData = useMemo(() => {
+    if (modalOutboundType === "판매출고") return shipmentInstructions;
+    if (modalOutboundType === "반품출고") return purchaseOrders;
+    return items;
+  }, [modalOutboundType, shipmentInstructions, purchaseOrders, items]);
+
+  const sourceTotalCount = allSourceData.length;
+  const sourceTotalPages = Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize));
+
+  // 현재 페이지에 해당하는 slice
+  const pagedShipmentInstructions = useMemo(() => {
+    if (modalOutboundType !== "판매출고") return [];
+    const start = (sourcePage - 1) * sourcePageSize;
+    return shipmentInstructions.slice(start, start + sourcePageSize);
+  }, [modalOutboundType, shipmentInstructions, sourcePage, sourcePageSize]);
+
+  const pagedPurchaseOrders = useMemo(() => {
+    if (modalOutboundType !== "반품출고") return [];
+    const start = (sourcePage - 1) * sourcePageSize;
+    return purchaseOrders.slice(start, start + sourcePageSize);
+  }, [modalOutboundType, purchaseOrders, sourcePage, sourcePageSize]);
+
+  const pagedItems = useMemo(() => {
+    if (modalOutboundType !== "기타출고") return [];
+    const start = (sourcePage - 1) * sourcePageSize;
+    return items.slice(start, start + sourcePageSize);
+  }, [modalOutboundType, items, sourcePage, sourcePageSize]);
+
+  const handleOutboundTypeChange = useCallback(
+    (type: string) => {
+      setModalOutboundType(type);
+      setSourceKeyword("");
+      setSourcePage(1);
+      setShipmentInstructions([]);
+      setPurchaseOrders([]);
+      setItems([]);
+      setSelectedItems([]);
+      loadSourceData(type);
+    },
+    [loadSourceData]
+  );
+
+  // 출하지시 품목 추가 (판매출고)
+  const addShipmentInstruction = (si: ShipmentInstructionSource) => {
+    const key = `si-${si.detail_id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        outbound_type: "판매출고",
+        reference_number: si.instruction_no,
+        customer_code: si.partner_id,
+        customer_name: si.partner_id,
+        item_number: si.item_code,
+        item_name: si.item_name,
+        spec: si.spec || "",
+        material: si.material || "",
+        unit: "EA",
+        outbound_qty: si.remain_qty,
+        unit_price: 0,
+        total_amount: 0,
+        source_type: "shipment_instruction_detail",
+        source_id: String(si.detail_id),
+      },
+    ]);
+  };
+
+  // 발주 품목 추가 (반품출고)
+  const addPurchaseOrder = (po: PurchaseOrderSource) => {
+    const key = `po-${po.id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        outbound_type: "반품출고",
+        reference_number: po.purchase_no,
+        customer_code: po.supplier_code,
+        customer_name: po.supplier_name,
+        item_number: po.item_code,
+        item_name: po.item_name,
+        spec: po.spec || "",
+        material: po.material || "",
+        unit: "EA",
+        outbound_qty: po.received_qty,
+        unit_price: po.unit_price,
+        total_amount: po.received_qty * po.unit_price,
+        source_type: "purchase_order_mng",
+        source_id: po.id,
+      },
+    ]);
+  };
+
+  // 품목 추가 (기타출고)
+  const addItem = (item: ItemSource) => {
+    const key = `item-${item.id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        outbound_type: "기타출고",
+        reference_number: item.item_number,
+        customer_code: "",
+        customer_name: "",
+        item_number: item.item_number,
+        item_name: item.item_name,
+        spec: item.spec || "",
+        material: item.material || "",
+        unit: item.unit || "EA",
+        outbound_qty: 0,
+        unit_price: item.standard_price,
+        total_amount: 0,
+        source_type: "item_info",
+        source_id: item.id,
+      },
+    ]);
+  };
+
+  // 선택 품목 수량 변경
+  const updateItemQty = (key: string, qty: number) => {
+    setSelectedItems((prev) =>
+      prev.map((item) =>
+        item.key === key
+          ? { ...item, outbound_qty: qty, total_amount: qty * item.unit_price }
+          : item
+      )
+    );
+  };
+
+  // 선택 품목 단가 변경
+  const updateItemPrice = (key: string, price: number) => {
+    setSelectedItems((prev) =>
+      prev.map((item) =>
+        item.key === key
+          ? { ...item, unit_price: price, total_amount: item.outbound_qty * price }
+          : item
+      )
+    );
+  };
+
+  // 선택 품목 삭제
+  const removeItem = (key: string) => {
+    setSelectedItems((prev) => prev.filter((item) => item.key !== key));
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (selectedItems.length === 0) {
+      alert("출고할 품목을 선택해주세요.");
+      return;
+    }
+    if (!modalOutboundDate) {
+      alert("출고일을 입력해주세요.");
+      return;
+    }
+
+    const zeroQtyItems = selectedItems.filter((i) => !i.outbound_qty || i.outbound_qty <= 0);
+    if (zeroQtyItems.length > 0) {
+      alert("출고수량이 0인 품목이 있습니다. 수량을 입력해주세요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      if (editMode) {
+        const currentKeys = new Set(selectedItems.map((i) => i.key));
+        // 삭제: editItemIds에 있지만 selectedItems에 없는 것
+        const toDelete = editItemIds.filter((id) => !currentKeys.has(id));
+        // 수정: editItemIds에도 있고 selectedItems에도 있는 것
+        const toUpdate = selectedItems.filter((i) => editItemIds.includes(i.key));
+        // 추가: editItemIds에 없는 새 아이템
+        const toCreate = selectedItems.filter((i) => !editItemIds.includes(i.key));
+
+        await Promise.all([
+          ...toDelete.map((id) => deleteOutbound(id)),
+          ...toUpdate.map((item) =>
+            updateOutbound(item.key, {
+              outbound_date: modalOutboundDate,
+              outbound_qty: item.outbound_qty,
+              unit_price: item.unit_price,
+              total_amount: item.total_amount,
+              warehouse_code: modalWarehouse || undefined,
+              location_code: modalLocation || undefined,
+              manager_id: modalManager || undefined,
+              memo: modalMemo || undefined,
+            } as any)
+          ),
+          ...(toCreate.length > 0
+            ? [createOutbound({
+                outbound_number: modalOutboundNo,
+                outbound_date: modalOutboundDate,
+                warehouse_code: modalWarehouse || undefined,
+                location_code: modalLocation || undefined,
+                manager_id: modalManager || undefined,
+                memo: modalMemo || undefined,
+                items: toCreate.map((item) => ({
+                  outbound_type: item.outbound_type,
+                  reference_number: item.reference_number,
+                  customer_code: item.customer_code,
+                  customer_name: item.customer_name,
+                  item_code: item.item_number,
+                  item_name: item.item_name,
+                  spec: item.spec,
+                  material: item.material,
+                  unit: item.unit,
+                  outbound_qty: item.outbound_qty,
+                  unit_price: item.unit_price,
+                  total_amount: item.total_amount,
+                  source_type: item.source_type,
+                  source_id: item.source_id,
+                  outbound_status: "출고완료",
+                })),
+              })]
+            : []),
+        ]);
+        toast.success("출고 정보를 수정했어요");
+        setIsModalOpen(false);
+        fetchList();
+      } else {
+        const res = await createOutbound({
+          outbound_number: modalOutboundNo,
+          outbound_date: modalOutboundDate,
+          warehouse_code: modalWarehouse || undefined,
+          location_code: modalLocation || undefined,
+          manager_id: modalManager || undefined,
+          memo: modalMemo || undefined,
+          items: selectedItems.map((item) => ({
+            outbound_type: item.outbound_type,
+            reference_number: item.reference_number,
+            customer_code: item.customer_code,
+            customer_name: item.customer_name,
+            item_code: item.item_number,
+            item_name: item.item_name,
+            spec: item.spec,
+            material: item.material,
+            unit: item.unit,
+            outbound_qty: item.outbound_qty,
+            unit_price: item.unit_price,
+            total_amount: item.total_amount,
+            source_type: item.source_type,
+            source_id: item.source_id,
+            outbound_status: "출고완료",
+          })),
+        });
+
+        if (res.success) {
+          toast.success(res.message || "출고 등록 완료");
+          setIsModalOpen(false);
+          fetchList();
+        }
+      }
+    } catch {
+      toast.error(editMode ? "수정에 실패했어요" : "출고 등록 중 오류가 발생했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+
+
+  // 합계 계산
+  const totalSummary = useMemo(() => {
+    return {
+      count: selectedItems.length,
+      qty: selectedItems.reduce((sum, i) => sum + (i.outbound_qty || 0), 0),
+      amount: selectedItems.reduce((sum, i) => sum + (i.total_amount || 0), 0),
+    };
+  }, [selectedItems]);
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 검색 영역 */}
+      <DynamicSearchFilter
+        tableName="outbound_mng"
+        filterId="c16-outbound"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={data.length}
+      />
+
+      {/* 출고 목록 테이블 */}
+      <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+        {/* 패널 헤더 */}
+        <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2.5 shrink-0">
+          <div className="flex items-center gap-2">
+            <PackageOpen className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-semibold">출고 목록</span>
+            <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+              {data.length}건
+            </span>
+          </div>
+          <div className="flex gap-2">
+            <Button size="sm" onClick={openRegisterModal} className="h-8">
+              <Plus className="mr-1 h-3.5 w-3.5" />
+              출고 등록
+            </Button>
+            <Button
+              size="sm"
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={checkedIds.length === 0}
+              className="h-8"
+            >
+              <Trash2 className="mr-1 h-3.5 w-3.5" />
+              삭제 ({checkedIds.length})
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="h-full overflow-auto">
+          <Table style={{ minWidth: `${216 + visibleMasterLayout.length * 120}px` }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "36px" }} />
+              <col style={{ width: "140px" }} />
+              {visibleMasterLayout.map((col) => (
+                <col key={col.key} style={{ width: ts.getWidth(col.key) ? `${ts.getWidth(col.key)}px` : undefined }} />
+              ))}
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
+                  <Checkbox
+                    checked={(() => {
+                      const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
+                  />
+                </TableHead>
+                <TableHead />
+                {/* 출고번호 */}
+                <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                  <div className="inline-flex items-center gap-1">
+                    <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort("outbound_number")}>
+                      <span className="truncate">출고번호</span>
+                      {sortState?.key === "outbound_number" && (
+                        sortState.direction === "asc"
+                          ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                          : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                      )}
+                    </div>
+                    {(masterUniqueValues["outbound_number"] || []).length > 0 && (
+                      <HeaderFilterPopover
+                        colKey="outbound_number" colLabel="출고번호"
+                        uniqueValues={masterUniqueValues["outbound_number"] || []}
+                        filterValues={headerFilters["outbound_number"] || new Set<string>()}
+                        onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                      />
+                    )}
+                  </div>
+                </TableHead>
+                {/* 마스터 필드 헤더 (ts.visibleColumns 순서) */}
+                {visibleMasterLayout.map((col) => (
+                  <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                    <div className="inline-flex items-center gap-1">
+                      <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                        <span className="truncate">{col.label}</span>
+                        {sortState?.key === col.key && (
+                          sortState.direction === "asc"
+                            ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                            : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                        )}
+                      </div>
+                      {(masterUniqueValues[col.key] || []).length > 0 && (
+                        <HeaderFilterPopover
+                          colKey={col.key} colLabel={col.label}
+                          uniqueValues={masterUniqueValues[col.key] || []}
+                          filterValues={headerFilters[col.key] || new Set<string>()}
+                          onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                        />
+                      )}
+                    </div>
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
+                  </TableCell>
+                </TableRow>
+              ) : Object.keys(filteredGroups).length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <PackageOpen className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 출고 내역이 없어요</span>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                Object.entries(filteredGroups).map(([outboundNo, group]) => {
+                  const isExpanded = expandedOrders.has(outboundNo);
+                  const detailIds = group.details.map((d) => d.id);
+                  const allDetailChecked = detailIds.length > 0 && detailIds.every((id) => checkedIds.includes(id));
+                  const someDetailChecked = detailIds.some((id) => checkedIds.includes(id));
+                  const master = group.master;
+                  return (
+                    <React.Fragment key={outboundNo}>
+                      {/* 마스터 행 */}
+                      <TableRow
+                        style={{ borderTop: "2px solid hsl(var(--border))" }}
+                        className={cn(
+                          "cursor-pointer border-l-[3px] border-l-transparent font-semibold tree-master-row",
+                          allDetailChecked && "border-l-primary bg-primary/5"
+                        )}
+                        onClick={() => {
+                          if (expandedOrders.has(outboundNo)) {
+                            setClosingOrders((prev) => new Set(prev).add(outboundNo));
+                            setTimeout(() => {
+                              setExpandedOrders((prev) => { const next = new Set(prev); next.delete(outboundNo); return next; });
+                              setClosingOrders((prev) => { const next = new Set(prev); next.delete(outboundNo); return next; });
+                            }, 200);
+                          } else {
+                            setExpandedOrders((prev) => new Set(prev).add(outboundNo));
+                          }
+                        }}
+                        onDoubleClick={() => openEditModal(group.details[0])}
+                      >
+                        <TableCell
+                          className="text-center cursor-pointer"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setCheckedIds((prev) => {
+                              if (allDetailChecked) return prev.filter((id) => !detailIds.includes(id));
+                              return [...new Set([...prev, ...detailIds])];
+                            });
+                          }}
+                        >
+                          <Checkbox
+                            checked={allDetailChecked}
+                            data-state={someDetailChecked && !allDetailChecked ? "indeterminate" : undefined}
+                            onCheckedChange={() => {}}
+                          />
+                        </TableCell>
+                        <TableCell className="text-center">
+                          {isExpanded
+                            ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            : <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          }
+                        </TableCell>
+                        {/* 출고번호 */}
+                        <TableCell className="font-mono whitespace-nowrap">
+                          {outboundNo}
+                          <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
+                        </TableCell>
+                        {/* 마스터 필드 (ts.visibleColumns 순서) */}
+                        {visibleMasterLayout.map((col) => {
+                          switch (col.key) {
+                            case "outbound_type": return (
+                              <TableCell key={col.key}>
+                                <Badge variant="outline" className={cn("text-[11px]", getTypeColor(master.outbound_type))}>
+                                  {master.outbound_type || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "outbound_date": return (
+                              <TableCell key={col.key} className="whitespace-nowrap text-[13px]">
+                                {master.outbound_date ? new Date(master.outbound_date).toLocaleDateString("ko-KR") : "-"}
+                              </TableCell>
+                            );
+                            case "reference_number": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.reference_number || ""}</span>
+                              </TableCell>
+                            );
+                            case "customer_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.customer_name || ""}</span>
+                              </TableCell>
+                            );
+                            case "warehouse_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
+                              </TableCell>
+                            );
+                            case "outbound_status": return (
+                              <TableCell key={col.key}>
+                                <Badge variant="outline" className={cn("text-[11px]", getStatusColor(master.outbound_status))}>
+                                  {master.outbound_status || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "memo": return (
+                              <TableCell key={col.key} className="text-muted-foreground">
+                                <span className="block truncate max-w-[120px]">{master.memo || ""}</span>
+                              </TableCell>
+                            );
+                            default: return <TableCell key={col.key} className="text-[13px]">{(master as any)[col.key] ?? ""}</TableCell>;
+                          }
+                        })}
+                      </TableRow>
+
+                      {/* 디테일 서브 헤더 (펼쳤을 때만) */}
+                      {isExpanded && (
+                        <TableRow
+                          className={cn(
+                            "border-l-[3px] border-l-primary/30 bg-muted/60",
+                            closingOrders.has(outboundNo) ? "tree-detail-row-closing" : "tree-detail-row",
+                          )}
+                        >
+                          <TableCell />
+                          <TableCell />
+                          <TableCell />
+                          {visibleDetailCols.map((col) => {
+                            const isRight = ["outbound_qty", "unit_price", "total_amount"].includes(col.key);
+                            const isSorted = sortState?.key === col.key;
+                            const uniqueVals = Array.from(new Set(
+                              group.details.map((d) => {
+                                let v = (d as any)[col.key];
+                                if (col.key === "source_type") v = SOURCE_TYPE_LABEL[v] || v;
+                                return v;
+                              }).filter((v: any) => v != null && v !== "").map(String)
+                            )).sort();
+                            const filterVals = headerFilters[col.key] || new Set<string>();
+                            return (
+                              <TableCell
+                                key={col.key}
+                                className={cn(
+                                  "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 select-none",
+                                  isRight && "text-right",
+                                )}
+                              >
+                                <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                                  <div
+                                    className="flex items-center gap-1 cursor-pointer min-w-0"
+                                    onClick={() => handleSort(col.key)}
+                                  >
+                                    <span className="truncate">{col.label}</span>
+                                    {isSorted && (
+                                      sortState!.direction === "asc"
+                                        ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                                        : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                                    )}
+                                  </div>
+                                  {uniqueVals.length > 0 && (
+                                    <HeaderFilterPopover
+                                      colKey={col.key} colLabel={col.label}
+                                      uniqueValues={uniqueVals} filterValues={filterVals}
+                                      onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                                    />
+                                  )}
+                                </div>
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                      )}
+
+                      {/* 디테일 행 (펼쳤을 때만) */}
+                      {isExpanded && group.details.map((row, detailIdx) => {
+                        const isClosing = closingOrders.has(outboundNo);
+                        const isChecked = checkedIds.includes(row.id);
+                        return (
+                          <TableRow
+                            key={`${row.id}-${detailIdx}`}
+                            className={cn(
+                              "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                              isClosing ? "tree-detail-row-closing" : "tree-detail-row",
+                              isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                            )}
+                            onClick={() => {
+                              setCheckedIds((prev) =>
+                                prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                              );
+                            }}
+                            onDoubleClick={() => openEditModal(row)}
+                          >
+                            <TableCell
+                              className="text-center cursor-pointer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                            >
+                              <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                            </TableCell>
+                            <TableCell className="relative">
+                              <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
+                            </TableCell>
+                            <TableCell />
+                            {visibleDetailCols.map((col) => {
+                              switch (col.key) {
+                                case "source_type": return <TableCell key={col.key} className="text-[13px]">{row.source_type ? (SOURCE_TYPE_LABEL[row.source_type] || row.source_type) : "-"}</TableCell>;
+                                case "item_code": return <TableCell key={col.key} className="font-mono text-[13px]">{row.item_code || ""}</TableCell>;
+                                case "item_name": return <TableCell key={col.key} className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>;
+                                case "specification": return <TableCell key={col.key} className="text-[13px] text-muted-foreground">{row.specification || ""}</TableCell>;
+                                case "outbound_qty": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.outbound_qty ? Number(row.outbound_qty).toLocaleString() : ""}</TableCell>;
+                                case "unit_price": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>;
+                                case "total_amount": return <TableCell key={col.key} className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>;
+                                default: return <TableCell key={col.key} className="text-[13px]">{(row as any)[col.key] ?? ""}</TableCell>;
+                              }
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                    </React.Fragment>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      {/* 출고 등록 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="flex flex-col gap-0 p-0 sm:max-w-[1600px] w-[95vw] h-[90vh] overflow-hidden">
+          <DialogHeader className="shrink-0 border-b px-6 py-4">
+            <DialogTitle>{editMode ? "출고 수정" : "출고 등록"}</DialogTitle>
+            <DialogDescription>{editMode ? "출고 정보를 수정해주세요." : "출고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가해주세요."}</DialogDescription>
+          </DialogHeader>
+
+          {/* 출고유형 선택 */}
+          <div className="flex shrink-0 items-center gap-4 border-b bg-muted/30 px-6 py-3">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고유형</span>
+            <Select value={modalOutboundType} onValueChange={handleOutboundTypeChange}>
+              <SelectTrigger className="h-9 w-[160px] text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {OUTBOUND_TYPES.map((t) => (
+                  <SelectItem key={t.value} value={t.value}>
+                    {t.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <span className="text-muted-foreground ml-auto text-xs italic">
+              {modalOutboundType === "판매출고"
+                ? "출하지시 데이터에서 출고 처리해요"
+                : modalOutboundType === "반품출고"
+                  ? "발주(입고) 데이터에서 반품 출고 처리해요"
+                  : "품목 데이터를 직접 선택하여 출고 처리해요"}
+            </span>
+          </div>
+
+          {/* 메인 콘텐츠 */}
+          <div className="flex-1 overflow-hidden">
+            <ResizablePanelGroup direction="horizontal">
+              {/* 좌측: 소스 데이터 */}
+              <ResizablePanel defaultSize={60} minSize={35}>
+                <div className="flex h-full flex-col">
+                  <div className="flex items-center gap-2 border-b px-4 py-3">
+                    <Input
+                      placeholder={
+                        modalOutboundType === "판매출고"
+                          ? "출하지시번호 / 품목명"
+                          : modalOutboundType === "반품출고"
+                            ? "발주번호 / 품목명 / 공급처"
+                            : "품목번호 / 품목명"
+                      }
+                      value={sourceKeyword}
+                      onChange={(e) => setSourceKeyword(e.target.value)}
+                      onKeyDown={(e) => e.key === "Enter" && searchSourceData()}
+                      className="h-8 flex-1 text-xs"
+                    />
+                    <Button size="sm" onClick={searchSourceData} className="h-8">
+                      <Search className="mr-1 h-3 w-3" />
+                      검색
+                    </Button>
+                  </div>
+
+                  <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2 shrink-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                        {modalOutboundType === "판매출고"
+                          ? "미출고 출하지시 목록"
+                          : modalOutboundType === "반품출고"
+                            ? "입고된 발주 목록"
+                            : "품목 목록"}
+                      </span>
+                      {sourceTotalCount > 0 && (
+                        <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                          {sourceTotalCount}건
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex-1 overflow-auto">
+                    {sourceLoading ? (
+                      <div className="flex h-40 items-center justify-center">
+                        <Loader2 className="h-5 w-5 animate-spin" />
+                      </div>
+                    ) : modalOutboundType === "판매출고" ? (
+                      <SourceShipmentInstructionTable
+                        data={pagedShipmentInstructions}
+                        onAdd={addShipmentInstruction}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    ) : modalOutboundType === "반품출고" ? (
+                      <SourcePurchaseOrderTable
+                        data={pagedPurchaseOrders}
+                        onAdd={addPurchaseOrder}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    ) : (
+                      <SourceItemTable
+                        data={pagedItems}
+                        onAdd={addItem}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    )}
+                  </div>
+
+                  {/* 페이징 바 */}
+                  {sourceTotalCount > 0 && (
+                    <div className="flex items-center justify-between border-t bg-muted/10 px-4 py-2 shrink-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-muted-foreground text-[11px]">표시:</span>
+                        <Input
+                          type="number"
+                          min={1}
+                          max={500}
+                          value={sourcePageSize}
+                          onChange={(e) => {
+                            const v = parseInt(e.target.value, 10);
+                            if (v > 0) { setSourcePageSize(v); setSourcePage(1); }
+                          }}
+                          className="h-7 w-[60px] text-center text-[11px]"
+                        />
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => setSourcePage(1)}>
+                          <ChevronsLeft className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => setSourcePage((p) => p - 1)}>
+                          <ChevronLeft className="h-3.5 w-3.5" />
+                        </Button>
+                        <span className="text-xs font-medium px-2">{sourcePage} / {sourceTotalPages}</span>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= sourceTotalPages}
+                          onClick={() => setSourcePage((p) => p + 1)}>
+                          <ChevronRight className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= sourceTotalPages}
+                          onClick={() => setSourcePage(sourceTotalPages)}>
+                          <ChevronsRight className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle onPointerDown={(e) => e.stopPropagation()} />
+
+              {/* 우측: 출고 정보 + 선택 품목 */}
+              <ResizablePanel defaultSize={40} minSize={25}>
+                <div className="flex h-full flex-col">
+                  <div className="space-y-3 border-b bg-muted/30 px-4 py-3">
+                    <h4 className="text-[13px] font-bold text-foreground">출고 정보</h4>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고번호</span>
+                        <Input
+                          value={modalOutboundNo}
+                          readOnly
+                          className="bg-muted cursor-not-allowed h-8 font-mono text-xs"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                          출고일 <span className="text-destructive">*</span>
+                        </span>
+                        <Input
+                          type="date"
+                          value={modalOutboundDate}
+                          onChange={(e) => setModalOutboundDate(e.target.value)}
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">창고</span>
+                        <Select value={modalWarehouse} onValueChange={(v) => {
+                          setModalWarehouse(v);
+                          setModalLocation("");
+                          if (v) {
+                            getOutboundLocations(v).then((r) => { if (r.success) setLocations(r.data); }).catch(() => {});
+                          } else {
+                            setLocations([]);
+                          }
+                        }}>
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="창고 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {warehouses.map((w) => (
+                              <SelectItem key={w.warehouse_code} value={w.warehouse_code}>
+                                {w.warehouse_name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">위치</span>
+                        <Select value={modalLocation || "__none__"} onValueChange={(v) => setModalLocation(v === "__none__" ? "" : v)}>
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="위치 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="__none__">위치 선택</SelectItem>
+                            {locations.map((l) => (
+                              <SelectItem key={l.location_code} value={l.location_code}>
+                                {l.location_name || l.location_code}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자</span>
+                        <Input
+                          value={modalManager}
+                          onChange={(e) => setModalManager(e.target.value)}
+                          placeholder="담당자"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">메모</span>
+                        <Input
+                          value={modalMemo}
+                          onChange={(e) => setModalMemo(e.target.value)}
+                          placeholder="메모"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex-1 overflow-auto px-4 py-2">
+                    <div className="mb-2 flex items-center gap-2">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고 처리 품목</span>
+                      <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                        {selectedItems.length}건
+                      </span>
+                    </div>
+
+                    {selectedItems.length === 0 ? (
+                      <div className="flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+                        <PackageOpen className="h-8 w-8 text-muted-foreground/30" />
+                        좌측에서 품목을 선택하여 추가해주세요
+                      </div>
+                    ) : (
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출고유형</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
+                            <TableHead className="w-[30px] p-2" />
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {selectedItems.map((item, idx) => (
+                            <TableRow key={item.key} className="text-xs">
+                              <TableCell className="p-2 text-center">{idx + 1}</TableCell>
+                              <TableCell className="p-2">
+                                <Badge variant="outline" className={cn("text-[10px]", getTypeColor(item.outbound_type))}>
+                                  {item.outbound_type || "-"}
+                                </Badge>
+                              </TableCell>
+                              <TableCell className="max-w-[180px] p-2">
+                                <div className="flex flex-col">
+                                  <span className="truncate font-medium" title={item.item_name}>
+                                    {item.item_name}
+                                  </span>
+                                  <span className="text-muted-foreground truncate text-[10px]" title={`${item.item_number}${item.spec ? ` | ${item.spec}` : ""}`}>
+                                    {item.item_number}
+                                    {item.spec ? ` | ${item.spec}` : ""}
+                                  </span>
+                                </div>
+                              </TableCell>
+                              <TableCell className="p-2 text-[11px]">{item.reference_number}</TableCell>
+                              <TableCell className="p-2 text-right">
+                                <Input
+                                  type="number"
+                                  value={item.outbound_qty || ""}
+                                  onChange={(e) => updateItemQty(item.key, Number(e.target.value) || 0)}
+                                  className="h-7 w-[70px] text-right text-xs"
+                                  min={0}
+                                />
+                              </TableCell>
+                              <TableCell className="p-2 text-right">
+                                <Input
+                                  type="number"
+                                  value={item.unit_price || ""}
+                                  onChange={(e) => updateItemPrice(item.key, Number(e.target.value) || 0)}
+                                  className="h-7 w-[70px] text-right text-xs"
+                                  min={0}
+                                />
+                              </TableCell>
+                              <TableCell className="p-2 text-right text-[13px] font-semibold">
+                                {item.total_amount.toLocaleString()}
+                              </TableCell>
+                              <TableCell className="p-2 text-center">
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-6 w-6"
+                                  onClick={() => removeItem(item.key)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+
+          <div className="shrink-0 border-t">
+            <div className="flex w-full items-center justify-between px-6 py-3">
+              <div className="text-muted-foreground text-xs">
+                {selectedItems.length > 0 ? (
+                  <>
+                    {totalSummary.count}건 | 수량 합계:{" "}
+                    {totalSummary.qty.toLocaleString()} | 금액 합계:{" "}
+                    {totalSummary.amount.toLocaleString()}원
+                  </>
+                ) : (
+                  "품목을 추가해주세요"
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsModalOpen(false)}
+                  className="h-9 text-sm"
+                >
+                  취소
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={saving || selectedItems.length === 0}
+                  className="h-9 text-sm"
+                >
+                  {saving ? (
+                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="mr-1 h-4 w-4" />
+                  )}
+                  저장
+                </Button>
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
+
+// --- 소스 데이터 테이블 컴포넌트들 ---
+
+function SourceShipmentInstructionTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: ShipmentInstructionSource[];
+  onAdd: (si: ShipmentInstructionSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 출하지시 데이터를 조회해주세요
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하지시번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하일</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출고수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">미출고</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((si) => {
+          const isSelected = selectedKeys.includes(`si-${si.detail_id}`);
+          return (
+            <TableRow
+              key={si.detail_id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(si)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">추가됨</Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[130px] truncate p-2 font-medium" title={si.instruction_no}>{si.instruction_no}</TableCell>
+              <TableCell className="p-2">
+                {si.instruction_date
+                  ? new Date(si.instruction_date).toLocaleDateString("ko-KR")
+                  : "-"}
+              </TableCell>
+              <TableCell className="max-w-[200px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={si.item_name}>{si.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={`${si.item_code}${si.spec ? ` | ${si.spec}` : ""}`}>
+                    {si.item_code}
+                    {si.spec ? ` | ${si.spec}` : ""}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(si.plan_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(si.ship_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right font-semibold text-primary">
+                {Number(si.remain_qty).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+function SourcePurchaseOrderTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: PurchaseOrderSource[];
+  onAdd: (po: PurchaseOrderSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 발주 데이터를 조회해주세요
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((po) => {
+          const isSelected = selectedKeys.includes(`po-${po.id}`);
+          return (
+            <TableRow
+              key={po.id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(po)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">추가됨</Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[120px] truncate p-2 font-medium" title={po.purchase_no}>{po.purchase_no}</TableCell>
+              <TableCell className="max-w-[120px] truncate p-2" title={po.supplier_name}>{po.supplier_name}</TableCell>
+              <TableCell className="max-w-[200px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={po.item_name}>{po.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={`${po.item_code}${po.spec ? ` | ${po.spec}` : ""}`}>
+                    {po.item_code}
+                    {po.spec ? ` | ${po.spec}` : ""}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(po.order_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right font-semibold text-primary">
+                {Number(po.received_qty).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+function SourceItemTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: ItemSource[];
+  onAdd: (item: ItemSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 품목 데이터를 조회해주세요
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+          <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((item) => {
+          const isSelected = selectedKeys.includes(`item-${item.id}`);
+          return (
+            <TableRow
+              key={item.id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(item)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">추가됨</Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[250px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={item.item_name}>{item.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={item.item_number}>
+                    {item.item_number}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={item.spec || "-"}>{item.spec || "-"}</TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={item.material || "-"}>{item.material || "-"}</TableCell>
+              <TableCell className="p-2">{item.unit || "-"}</TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(item.standard_price).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/logistics/packaging/page.tsx b/frontend/app/(main)/COMPANY_8/logistics/packaging/page.tsx
new file mode 100644
index 00000000..6ae340aa
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/logistics/packaging/page.tsx
@@ -0,0 +1,1033 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandInput, CommandList, CommandEmpty, CommandItem } from "@/components/ui/command";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import {
+  Plus, Trash2, Loader2, Package, Box, X, Save, Edit2, Download, ChevronsUpDown, Check, Inbox, Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  getPkgUnits, createPkgUnit, updatePkgUnit, deletePkgUnit,
+  getPkgUnitItems, createPkgUnitItem, deletePkgUnitItem,
+  getLoadingUnits, createLoadingUnit, updateLoadingUnit, deleteLoadingUnit,
+  getLoadingUnitPkgs, createLoadingUnitPkg, deleteLoadingUnitPkg,
+  getItemsByDivision, getGeneralItems,
+  type PkgUnit, type PkgUnitItem, type LoadingUnit, type LoadingUnitPkg, type ItemInfoForPkg,
+} from "@/lib/api/packaging";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "pkg_code", label: "품목코드" },
+  { key: "pkg_name", label: "포장명" },
+  { key: "pkg_type", label: "유형" },
+  { key: "size", label: "크기(mm)" },
+  { key: "max_weight", label: "최대중량" },
+  { key: "status", label: "상태" },
+];
+
+// --- 코드 → 라벨 매핑 ---
+const PKG_TYPE_LABEL: Record<string, string> = {
+  BOX: "박스", PACK: "팩", CANBOARD: "캔보드", AIRCAP: "에어캡",
+  ZIPCOS: "집코스", CYLINDER: "원통형", POLYCARTON: "포리/카톤",
+};
+const LOADING_TYPE_LABEL: Record<string, string> = {
+  PALLET: "파렛트", WOOD_PALLET: "목재파렛트", PLASTIC_PALLET: "플라스틱파렛트",
+  ALU_PALLET: "알루미늄파렛트", CONTAINER: "컨테이너", STEEL_BOX: "철재함",
+  CAGE: "케이지", ETC: "기타",
+};
+const STATUS_LABEL: Record<string, string> = { ACTIVE: "사용", INACTIVE: "미사용" };
+
+const getStatusColor = (s: string) => s === "ACTIVE" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground";
+const fmtSize = (w: any, l: any, h: any) => {
+  const vals = [w, l, h].map(v => Number(v) || 0);
+  return vals.some(v => v > 0) ? vals.join("×") : "-";
+};
+
+// 규격 문자열에서 치수 파싱
+function parseSpecDimensions(spec: string | null) {
+  if (!spec) return { w: 0, l: 0, h: 0 };
+  const m3 = spec.match(/(\d+)\s*[x×]\s*(\d+)\s*[x×]\s*(\d+)/i);
+  if (m3) return { w: parseInt(m3[1]), l: parseInt(m3[2]), h: parseInt(m3[3]) };
+  const m2 = spec.match(/(\d+)\s*[x×]\s*(\d+)/i);
+  if (m2) return { w: parseInt(m2[1]), l: parseInt(m2[2]), h: 0 };
+  return { w: 0, l: 0, h: 0 };
+}
+
+export default function PackagingPage() {
+  const ts = useTableSettings("c16-packaging", "pkg_unit", GRID_COLUMNS);
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const [activeTab, setActiveTab] = useState<"packing" | "loading">("packing");
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 포장재 데이터
+  const [pkgUnits, setPkgUnits] = useState<PkgUnit[]>([]);
+  const [pkgLoading, setPkgLoading] = useState(false);
+  const [selectedPkg, setSelectedPkg] = useState<PkgUnit | null>(null);
+  const [pkgItems, setPkgItems] = useState<PkgUnitItem[]>([]);
+  const [pkgItemsLoading, setPkgItemsLoading] = useState(false);
+
+  // 적재함 데이터
+  const [loadingUnits, setLoadingUnits] = useState<LoadingUnit[]>([]);
+  const [loadingLoading, setLoadingLoading] = useState(false);
+  const [selectedLoading, setSelectedLoading] = useState<LoadingUnit | null>(null);
+  const [loadingPkgs, setLoadingPkgs] = useState<LoadingUnitPkg[]>([]);
+  const [loadingPkgsLoading, setLoadingPkgsLoading] = useState(false);
+
+  // 모달
+  const [pkgModalOpen, setPkgModalOpen] = useState(false);
+  const [pkgModalMode, setPkgModalMode] = useState<"create" | "edit">("create");
+  const [pkgForm, setPkgForm] = useState<Record<string, any>>({});
+  const [pkgItemOptions, setPkgItemOptions] = useState<ItemInfoForPkg[]>([]);
+  const [pkgItemPopoverOpen, setPkgItemPopoverOpen] = useState(false);
+
+  const [loadModalOpen, setLoadModalOpen] = useState(false);
+  const [loadModalMode, setLoadModalMode] = useState<"create" | "edit">("create");
+  const [loadForm, setLoadForm] = useState<Record<string, any>>({});
+  const [loadItemOptions, setLoadItemOptions] = useState<ItemInfoForPkg[]>([]);
+  const [loadItemPopoverOpen, setLoadItemPopoverOpen] = useState(false);
+
+  const [itemMatchModalOpen, setItemMatchModalOpen] = useState(false);
+  const [itemMatchKeyword, setItemMatchKeyword] = useState("");
+  const [itemMatchResults, setItemMatchResults] = useState<ItemInfoForPkg[]>([]);
+  const [itemMatchSelected, setItemMatchSelected] = useState<ItemInfoForPkg | null>(null);
+  const [itemMatchQty, setItemMatchQty] = useState(1);
+
+  const [pkgMatchModalOpen, setPkgMatchModalOpen] = useState(false);
+  const [pkgMatchQty, setPkgMatchQty] = useState(1);
+  const [pkgMatchMethod, setPkgMatchMethod] = useState("");
+  const [pkgMatchSelected, setPkgMatchSelected] = useState<PkgUnit | null>(null);
+  const [pkgMatchSearchKw, setPkgMatchSearchKw] = useState("");
+
+  const [saving, setSaving] = useState(false);
+
+  // --- 데이터 로드 ---
+  const fetchPkgUnits = useCallback(async () => {
+    setPkgLoading(true);
+    try {
+      const res = await getPkgUnits();
+      if (res.success) setPkgUnits(res.data);
+    } catch { /* ignore */ } finally { setPkgLoading(false); }
+  }, []);
+
+  const fetchLoadingUnits = useCallback(async () => {
+    setLoadingLoading(true);
+    try {
+      const res = await getLoadingUnits();
+      if (res.success) setLoadingUnits(res.data);
+    } catch { /* ignore */ } finally { setLoadingLoading(false); }
+  }, []);
+
+  useEffect(() => { fetchPkgUnits(); fetchLoadingUnits(); }, [fetchPkgUnits, fetchLoadingUnits]);
+
+  // 포장재 선택 시 매칭 품목 로드
+  const selectPkg = useCallback(async (pkg: PkgUnit) => {
+    setSelectedPkg(pkg);
+    setPkgItemsLoading(true);
+    try {
+      const res = await getPkgUnitItems(pkg.pkg_code);
+      if (res.success) setPkgItems(res.data);
+    } catch { setPkgItems([]); } finally { setPkgItemsLoading(false); }
+  }, []);
+
+  // 적재함 선택 시 포장구성 로드
+  const selectLoading = useCallback(async (lu: LoadingUnit) => {
+    setSelectedLoading(lu);
+    setLoadingPkgsLoading(true);
+    try {
+      const res = await getLoadingUnitPkgs(lu.loading_code);
+      if (res.success) setLoadingPkgs(res.data);
+    } catch { setLoadingPkgs([]); } finally { setLoadingPkgsLoading(false); }
+  }, []);
+
+  // 검색 필터 적용
+  const filteredPkgUnits = pkgUnits.filter((p) => {
+    if (searchFilters.length === 0) return true;
+    return searchFilters.every((f) => {
+      if (!f.value) return true;
+      const kw = f.value.toLowerCase();
+      return Object.values(p).some((v) => String(v ?? "").toLowerCase().includes(kw));
+    });
+  });
+
+  const filteredLoadingUnits = loadingUnits.filter((l) => {
+    if (searchFilters.length === 0) return true;
+    return searchFilters.every((f) => {
+      if (!f.value) return true;
+      const kw = f.value.toLowerCase();
+      return Object.values(l).some((v) => String(v ?? "").toLowerCase().includes(kw));
+    });
+  });
+
+  // --- 포장재 등록/수정 모달 ---
+  const openPkgModal = async (mode: "create" | "edit") => {
+    setPkgModalMode(mode);
+    if (mode === "edit" && selectedPkg) {
+      setPkgForm({ ...selectedPkg });
+    } else {
+      setPkgForm({ pkg_code: "", pkg_name: "", pkg_type: "", status: "ACTIVE", width_mm: "", length_mm: "", height_mm: "", self_weight_kg: "", max_load_kg: "", volume_l: "", remarks: "" });
+    }
+    setPkgItemPopoverOpen(false);
+    try {
+      const res = await getItemsByDivision("포장재");
+      if (res.success) setPkgItemOptions(res.data);
+    } catch { setPkgItemOptions([]); }
+    setPkgModalOpen(true);
+  };
+
+  const onPkgItemSelect = (item: ItemInfoForPkg) => {
+    setPkgItemPopoverOpen(false);
+    const dims = parseSpecDimensions(item.size);
+    setPkgForm((prev) => ({
+      ...prev,
+      pkg_code: item.item_number,
+      pkg_name: item.item_name,
+      width_mm: dims.w || prev.width_mm,
+      length_mm: dims.l || prev.length_mm,
+      height_mm: dims.h || prev.height_mm,
+    }));
+  };
+
+  const savePkgUnit = async () => {
+    if (!pkgForm.pkg_code || !pkgForm.pkg_name) { toast.error("포장코드와 포장명은 필수입니다."); return; }
+    if (!pkgForm.pkg_type) { toast.error("포장유형을 선택해주세요."); return; }
+    setSaving(true);
+    try {
+      if (pkgModalMode === "create") {
+        const res = await createPkgUnit(pkgForm);
+        if (res.success) { toast.success("포장재 등록 완료"); setPkgModalOpen(false); fetchPkgUnits(); }
+      } else {
+        const res = await updatePkgUnit(pkgForm.id, pkgForm);
+        if (res.success) { toast.success("포장재 수정 완료"); setPkgModalOpen(false); fetchPkgUnits(); setSelectedPkg(res.data); }
+      }
+    } catch { toast.error("저장 실패"); } finally { setSaving(false); }
+  };
+
+  const handleDeletePkg = async (pkg: PkgUnit) => {
+    const ok = await confirm(`"${pkg.pkg_name}" 포장재를 삭제하시겠습니까?`, { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await deletePkgUnit(pkg.id);
+      toast.success("삭제 완료");
+      setSelectedPkg(null); setPkgItems([]);
+      fetchPkgUnits();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // --- 적재함 등록/수정 모달 ---
+  const openLoadModal = async (mode: "create" | "edit") => {
+    setLoadModalMode(mode);
+    if (mode === "edit" && selectedLoading) {
+      setLoadForm({ ...selectedLoading });
+    } else {
+      setLoadForm({ loading_code: "", loading_name: "", loading_type: "", status: "ACTIVE", width_mm: "", length_mm: "", height_mm: "", self_weight_kg: "", max_load_kg: "", max_stack: "", remarks: "" });
+    }
+    setLoadItemPopoverOpen(false);
+    try {
+      const res = await getItemsByDivision("적재함");
+      if (res.success) setLoadItemOptions(res.data);
+    } catch { setLoadItemOptions([]); }
+    setLoadModalOpen(true);
+  };
+
+  const onLoadItemSelect = (item: ItemInfoForPkg) => {
+    setLoadItemPopoverOpen(false);
+    const dims = parseSpecDimensions(item.size);
+    setLoadForm((prev) => ({
+      ...prev,
+      loading_code: item.item_number,
+      loading_name: item.item_name,
+      width_mm: dims.w || prev.width_mm,
+      length_mm: dims.l || prev.length_mm,
+      height_mm: dims.h || prev.height_mm,
+    }));
+  };
+
+  const saveLoadingUnit = async () => {
+    if (!loadForm.loading_code || !loadForm.loading_name) { toast.error("적재함코드와 적재함명은 필수입니다."); return; }
+    if (!loadForm.loading_type) { toast.error("적재유형을 선택해주세요."); return; }
+    setSaving(true);
+    try {
+      if (loadModalMode === "create") {
+        const res = await createLoadingUnit(loadForm);
+        if (res.success) { toast.success("적재함 등록 완료"); setLoadModalOpen(false); fetchLoadingUnits(); }
+      } else {
+        const res = await updateLoadingUnit(loadForm.id, loadForm);
+        if (res.success) { toast.success("적재함 수정 완료"); setLoadModalOpen(false); fetchLoadingUnits(); setSelectedLoading(res.data); }
+      }
+    } catch { toast.error("저장 실패"); } finally { setSaving(false); }
+  };
+
+  const handleDeleteLoading = async (lu: LoadingUnit) => {
+    const ok = await confirm(`"${lu.loading_name}" 적재함을 삭제하시겠습니까?`, { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await deleteLoadingUnit(lu.id);
+      toast.success("삭제 완료");
+      setSelectedLoading(null); setLoadingPkgs([]);
+      fetchLoadingUnits();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // --- 품목 추가 모달 (포장재 매칭) ---
+  const openItemMatchModal = async () => {
+    setItemMatchKeyword(""); setItemMatchSelected(null); setItemMatchQty(1);
+    setItemMatchModalOpen(true);
+    try {
+      const res = await getGeneralItems();
+      if (res.success) setItemMatchResults(res.data);
+    } catch { setItemMatchResults([]); }
+  };
+
+  const searchItemsForMatch = async () => {
+    try {
+      const res = await getGeneralItems(itemMatchKeyword || undefined);
+      if (res.success) setItemMatchResults(res.data);
+    } catch { setItemMatchResults([]); }
+  };
+
+  const saveItemMatch = async () => {
+    if (!selectedPkg || !itemMatchSelected) { toast.error("품목을 선택해주세요."); return; }
+    if (itemMatchQty <= 0) { toast.error("포장수량을 입력해주세요."); return; }
+    setSaving(true);
+    try {
+      const res = await createPkgUnitItem({
+        pkg_code: selectedPkg.pkg_code,
+        item_number: itemMatchSelected.item_number,
+        pkg_qty: itemMatchQty,
+      });
+      if (res.success) { toast.success("품목 추가 완료"); setItemMatchModalOpen(false); selectPkg(selectedPkg); }
+    } catch { toast.error("추가 실패"); } finally { setSaving(false); }
+  };
+
+  const handleDeletePkgItem = async (item: PkgUnitItem) => {
+    const ok = await confirm("매칭 품목을 삭제하시겠습니까?", { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await deletePkgUnitItem(item.id);
+      toast.success("삭제 완료");
+      if (selectedPkg) selectPkg(selectedPkg);
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // --- 포장단위 추가 모달 (적재함 구성) ---
+  const openPkgMatchModal = () => {
+    setPkgMatchSelected(null); setPkgMatchQty(1); setPkgMatchMethod(""); setPkgMatchSearchKw("");
+    setPkgMatchModalOpen(true);
+  };
+
+  const savePkgMatch = async () => {
+    if (!selectedLoading || !pkgMatchSelected) { toast.error("포장단위를 선택해주세요."); return; }
+    if (pkgMatchQty <= 0) { toast.error("최대적재수량을 입력해주세요."); return; }
+    setSaving(true);
+    try {
+      const res = await createLoadingUnitPkg({
+        loading_code: selectedLoading.loading_code,
+        pkg_code: pkgMatchSelected.pkg_code,
+        max_load_qty: pkgMatchQty,
+        load_method: pkgMatchMethod || undefined,
+      });
+      if (res.success) { toast.success("포장단위 추가 완료"); setPkgMatchModalOpen(false); selectLoading(selectedLoading); }
+    } catch { toast.error("추가 실패"); } finally { setSaving(false); }
+  };
+
+  const handleDeleteLoadPkg = async (lp: LoadingUnitPkg) => {
+    const ok = await confirm("적재 구성을 삭제하시겠습니까?", { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await deleteLoadingUnitPkg(lp.id);
+      toast.success("삭제 완료");
+      if (selectedLoading) selectLoading(selectedLoading);
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-4">
+
+      {/* 1. 필터 바 */}
+      <DynamicSearchFilter
+        tableName="pkg_unit"
+        filterId="c16-packaging"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={activeTab === "packing" ? filteredPkgUnits.length : filteredLoadingUnits.length}
+      />
+
+      {/* 2. 탭 바 */}
+      <div className="flex shrink-0 gap-1 border-b">
+        {(
+          [
+            ["packing", "포장재 관리", filteredPkgUnits.length],
+            ["loading", "적재함 관리", filteredLoadingUnits.length],
+          ] as const
+        ).map(([tab, label, count]) => (
+          <button
+            key={tab}
+            onClick={() => {
+              setActiveTab(tab);
+              if (tab === "packing") { setSelectedLoading(null); setLoadingPkgs([]); }
+              else { setSelectedPkg(null); setPkgItems([]); }
+            }}
+            className={cn(
+              "-mb-px flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors",
+              activeTab === tab
+                ? "border-primary text-primary"
+                : "border-transparent text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {tab === "packing" ? <Package className="h-4 w-4" /> : <Box className="h-4 w-4" />}
+            {label}
+            <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+              {count}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/* 3. 액션 바 */}
+      <div className="flex shrink-0 items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold">
+            {activeTab === "packing" ? "포장재 목록" : "적재함 목록"}
+          </h3>
+          {(activeTab === "packing" ? pkgLoading : loadingLoading) && (
+            <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+          )}
+        </div>
+        <div className="flex items-center gap-1.5">
+          {activeTab === "packing" && selectedPkg && (
+            <>
+              <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openPkgModal("edit")}>
+                <Edit2 className="mr-1 h-3 w-3" /> 수정
+              </Button>
+              <Button
+                size="sm" variant="outline"
+                className="h-7 text-xs text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                onClick={() => handleDeletePkg(selectedPkg)}
+              >
+                <Trash2 className="mr-1 h-3 w-3" /> 삭제
+              </Button>
+              <div className="h-4 w-px bg-border" />
+            </>
+          )}
+          {activeTab === "loading" && selectedLoading && (
+            <>
+              <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openLoadModal("edit")}>
+                <Edit2 className="mr-1 h-3 w-3" /> 수정
+              </Button>
+              <Button
+                size="sm" variant="outline"
+                className="h-7 text-xs text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                onClick={() => handleDeleteLoading(selectedLoading)}
+              >
+                <Trash2 className="mr-1 h-3 w-3" /> 삭제
+              </Button>
+              <div className="h-4 w-px bg-border" />
+            </>
+          )}
+          <Button
+            size="sm"
+            onClick={() => activeTab === "packing" ? openPkgModal("create") : openLoadModal("create")}
+          >
+            <Plus className="mr-1 h-3.5 w-3.5" /> 등록
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 4. 콘텐츠 영역 */}
+      {activeTab === "packing" ? (
+        <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+          {/* 포장재 목록 테이블 */}
+          <div className={cn("overflow-auto", selectedPkg ? "flex-[0_0_50%] border-b" : "flex-1")}>
+            <EDataTable
+              columns={ts.visibleColumns.map((col): EDataTableColumn<PkgUnit> => {
+                const renderMap: Record<string, Partial<EDataTableColumn<PkgUnit>>> = {
+                  pkg_type: { width: "w-[80px]", render: (v: any) => PKG_TYPE_LABEL[v] || v || "-" },
+                  size: { width: "w-[100px]", render: (_v: any, row: any) => fmtSize(row.width_mm, row.length_mm, row.height_mm) },
+                  max_weight: { width: "w-[80px]", align: "right", render: (v: any) => Number(v || 0) > 0 ? `${v}kg` : "-" },
+                  max_load_kg: { width: "w-[80px]", align: "right", render: (v: any) => Number(v || 0) > 0 ? `${v}kg` : "-" },
+                  status: { width: "w-[60px]", align: "center", render: (v: any) => (
+                    <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(v))}>
+                      {STATUS_LABEL[v] || v}
+                    </span>
+                  )},
+                };
+                return { key: col.key, label: col.label, ...renderMap[col.key] };
+              })}
+              data={ts.groupData(filteredPkgUnits)}
+              rowKey={(row) => String(row.id)}
+              loading={pkgLoading}
+              emptyMessage="등록된 포장재가 없어요"
+              selectedId={selectedPkg ? String(selectedPkg.id) : null}
+              onSelect={(id) => {
+                const pkg = filteredPkgUnits.find((p) => String(p.id) === id);
+                if (pkg) selectPkg(pkg);
+              }}
+              showPagination={false}
+              draggableColumns
+              columnOrderKey="c16-packaging-pkg"
+            />
+          </div>
+
+          {/* 매칭 품목 서브패널 */}
+          {selectedPkg && (
+            <>
+              <div className="flex shrink-0 items-center justify-between bg-muted/50 px-4 py-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">매칭 품목</span>
+                  <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+                    {pkgItems.length}건
+                  </span>
+                  <span className="max-w-[200px] truncate text-[11px] text-muted-foreground">
+                    — {selectedPkg.pkg_name}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openItemMatchModal}>
+                    <Plus className="mr-1 h-3 w-3" /> 품목 추가
+                  </Button>
+                  <Button
+                    size="sm" variant="ghost" className="h-7 w-7 p-0 text-muted-foreground"
+                    onClick={() => { setSelectedPkg(null); setPkgItems([]); }}
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <div className="flex-1 overflow-auto">
+                {pkgItemsLoading ? (
+                  <div className="flex h-24 items-center justify-center">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : pkgItems.length === 0 ? (
+                  <div className="flex h-24 flex-col items-center justify-center gap-1.5">
+                    <Inbox className="h-5 w-5 text-muted-foreground/40" />
+                    <p className="text-xs text-muted-foreground">매칭된 품목이 없어요</p>
+                  </div>
+                ) : (
+                  <Table>
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                        <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장수량</TableHead>
+                        <TableHead className="p-2 w-[40px]" />
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {pkgItems.map((item) => (
+                        <TableRow key={item.id} className="text-xs">
+                          <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
+                          <TableCell className="p-2">{item.item_name || "-"}</TableCell>
+                          <TableCell className="p-2">{item.spec || "-"}</TableCell>
+                          <TableCell className="p-2">{item.unit || "EA"}</TableCell>
+                          <TableCell className="p-2 text-right font-semibold">{Number(item.pkg_qty).toLocaleString()}</TableCell>
+                          <TableCell className="p-2 text-center">
+                            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeletePkgItem(item)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      ) : (
+        /* 적재함 관리 탭 */
+        <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+          {/* 적재함 목록 테이블 */}
+          <div className={cn("overflow-auto", selectedLoading ? "flex-[0_0_50%] border-b" : "flex-1")}>
+            <Table>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted">
+                  <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">적재함명</TableHead>
+                  <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">크기(mm)</TableHead>
+                  <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대적재</TableHead>
+                  <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {loadingLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-32 text-center">
+                      <Loader2 className="mx-auto h-5 w-5 animate-spin text-muted-foreground" />
+                    </TableCell>
+                  </TableRow>
+                ) : filteredLoadingUnits.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-40 text-center">
+                      <div className="flex flex-col items-center justify-center gap-2">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-full border-2 border-dashed border-muted-foreground/20">
+                          <Inbox className="h-6 w-6 text-muted-foreground/40" />
+                        </div>
+                        <p className="text-xs text-muted-foreground">등록된 적재함이 없어요</p>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ) : filteredLoadingUnits.map((l) => (
+                  <TableRow
+                    key={l.id}
+                    className={cn(
+                      "cursor-pointer text-xs transition-colors",
+                      selectedLoading?.id === l.id ? "bg-primary/5" : "hover:bg-muted/50"
+                    )}
+                    onClick={() => selectLoading(l)}
+                  >
+                    <TableCell className="p-2 font-medium">{l.loading_code}</TableCell>
+                    <TableCell className="p-2">{l.loading_name}</TableCell>
+                    <TableCell className="p-2">{LOADING_TYPE_LABEL[l.loading_type] || l.loading_type || "-"}</TableCell>
+                    <TableCell className="p-2 text-[10px] tabular-nums">{fmtSize(l.width_mm, l.length_mm, l.height_mm)}</TableCell>
+                    <TableCell className="p-2 text-right">{Number(l.max_load_kg || 0) > 0 ? `${l.max_load_kg}kg` : "-"}</TableCell>
+                    <TableCell className="p-2 text-center">
+                      <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(l.status))}>
+                        {STATUS_LABEL[l.status] || l.status}
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          {/* 포장구성 서브패널 */}
+          {selectedLoading && (
+            <>
+              <div className="flex shrink-0 items-center justify-between bg-muted/50 px-4 py-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">적재 가능 포장단위</span>
+                  <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+                    {loadingPkgs.length}건
+                  </span>
+                  <span className="max-w-[200px] truncate text-[11px] text-muted-foreground">
+                    — {selectedLoading.loading_name}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openPkgMatchModal}>
+                    <Plus className="mr-1 h-3 w-3" /> 포장단위 추가
+                  </Button>
+                  <Button
+                    size="sm" variant="ghost" className="h-7 w-7 p-0 text-muted-foreground"
+                    onClick={() => { setSelectedLoading(null); setLoadingPkgs([]); }}
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <div className="flex-1 overflow-auto">
+                {loadingPkgsLoading ? (
+                  <div className="flex h-24 items-center justify-center">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : loadingPkgs.length === 0 ? (
+                  <div className="flex h-24 flex-col items-center justify-center gap-1.5">
+                    <Inbox className="h-5 w-5 text-muted-foreground/40" />
+                    <p className="text-xs text-muted-foreground">등록된 포장단위가 없어요</p>
+                  </div>
+                ) : (
+                  <Table>
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장코드</TableHead>
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장명</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                        <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대수량</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">적재방향</TableHead>
+                        <TableHead className="p-2 w-[40px]" />
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {loadingPkgs.map((lp) => (
+                        <TableRow key={lp.id} className="text-xs">
+                          <TableCell className="p-2 font-medium">{lp.pkg_code}</TableCell>
+                          <TableCell className="p-2">{lp.pkg_name || "-"}</TableCell>
+                          <TableCell className="p-2">{PKG_TYPE_LABEL[lp.pkg_type || ""] || lp.pkg_type || "-"}</TableCell>
+                          <TableCell className="p-2 text-right font-semibold">{Number(lp.max_load_qty).toLocaleString()}</TableCell>
+                          <TableCell className="p-2">{lp.load_method || "-"}</TableCell>
+                          <TableCell className="p-2 text-center">
+                            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeleteLoadPkg(lp)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* 포장재 등록/수정 모달 */}
+      <Dialog open={pkgModalOpen} onOpenChange={setPkgModalOpen}>
+        <DialogContent className="max-w-2xl" style={{ maxHeight: "90vh", overflowY: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{pkgModalMode === "create" ? "포장재 등록" : "포장재 수정"}</DialogTitle>
+            <DialogDescription>품목정보에서 포장재를 선택하면 코드와 이름이 자동 연동됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            {pkgModalMode === "create" && (
+              <div className="rounded-lg border bg-muted/50 p-4">
+                <Label className="mb-2 block text-xs font-semibold">품목정보 연결 (구분: 포장재)</Label>
+                <Popover open={pkgItemPopoverOpen} onOpenChange={setPkgItemPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" role="combobox" className="h-9 w-full justify-between text-sm font-normal">
+                      {pkgForm.pkg_code ? `${pkgForm.pkg_name} (${pkgForm.pkg_code})` : "품목정보에서 포장재를 선택하세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                    <Command filter={(value, search) => {
+                      const item = pkgItemOptions.find((i) => i.id === value);
+                      if (!item) return 0;
+                      const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
+                      return target.includes(search.toLowerCase()) ? 1 : 0;
+                    }}>
+                      <CommandInput placeholder="품목코드 / 품목명 검색..." />
+                      <CommandList className="max-h-[200px]">
+                        <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                        {pkgItemOptions.map((item) => (
+                          <CommandItem key={item.id} value={item.id} onSelect={() => onPkgItemSelect(item)} className="text-xs">
+                            <Check className={cn("mr-2 h-3 w-3", pkgForm.pkg_code === item.item_number ? "opacity-100" : "opacity-0")} />
+                            <span className="font-medium">{item.item_name}</span>
+                            <span className="ml-2 text-muted-foreground">{item.item_number}</span>
+                            {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
+                          </CommandItem>
+                        ))}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+            <div className="grid grid-cols-2 gap-4">
+              <div><Label className="text-xs">품목코드</Label><Input value={pkgForm.pkg_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div><Label className="text-xs">포장명</Label><Input value={pkgForm.pkg_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div>
+                <Label className="text-xs">포장유형 <span className="text-destructive">*</span></Label>
+                <Select value={pkgForm.pkg_type || ""} onValueChange={(v) => setPkgForm((p) => ({ ...p, pkg_type: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>{Object.entries(PKG_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">상태</Label>
+                <Select value={pkgForm.status || "ACTIVE"} onValueChange={(v) => setPkgForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold">규격정보</Label>
+              <div className="mt-2 grid grid-cols-3 gap-3">
+                <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={pkgForm.width_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={pkgForm.length_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={pkgForm.height_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={pkgForm.self_weight_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={pkgForm.max_load_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">내용적(L)</Label><Input type="number" value={pkgForm.volume_l || ""} onChange={(e) => setPkgForm((p) => ({ ...p, volume_l: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+              </div>
+            </div>
+            <div><Label className="text-xs">비고</Label><Input value={pkgForm.remarks || ""} onChange={(e) => setPkgForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setPkgModalOpen(false)}>취소</Button>
+            <Button onClick={savePkgUnit} disabled={saving}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 적재함 등록/수정 모달 */}
+      <Dialog open={loadModalOpen} onOpenChange={setLoadModalOpen}>
+        <DialogContent className="max-w-2xl" style={{ maxHeight: "90vh", overflowY: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{loadModalMode === "create" ? "적재함 등록" : "적재함 수정"}</DialogTitle>
+            <DialogDescription>품목정보에서 적재함을 선택하면 코드와 이름이 자동 연동됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            {loadModalMode === "create" && (
+              <div className="rounded-lg border bg-muted/50 p-4">
+                <Label className="mb-2 block text-xs font-semibold">품목정보 연결 (구분: 적재함)</Label>
+                <Popover open={loadItemPopoverOpen} onOpenChange={setLoadItemPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" role="combobox" className="h-9 w-full justify-between text-sm font-normal">
+                      {loadForm.loading_code ? `${loadForm.loading_name} (${loadForm.loading_code})` : "품목정보에서 적재함을 선택하세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                    <Command filter={(value, search) => {
+                      const item = loadItemOptions.find((i) => i.id === value);
+                      if (!item) return 0;
+                      const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
+                      return target.includes(search.toLowerCase()) ? 1 : 0;
+                    }}>
+                      <CommandInput placeholder="품목코드 / 품목명 검색..." />
+                      <CommandList className="max-h-[200px]">
+                        <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                        {loadItemOptions.map((item) => (
+                          <CommandItem key={item.id} value={item.id} onSelect={() => onLoadItemSelect(item)} className="text-xs">
+                            <Check className={cn("mr-2 h-3 w-3", loadForm.loading_code === item.item_number ? "opacity-100" : "opacity-0")} />
+                            <span className="font-medium">{item.item_name}</span>
+                            <span className="ml-2 text-muted-foreground">{item.item_number}</span>
+                            {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
+                          </CommandItem>
+                        ))}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+            <div className="grid grid-cols-2 gap-4">
+              <div><Label className="text-xs">적재함코드</Label><Input value={loadForm.loading_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div><Label className="text-xs">적재함명</Label><Input value={loadForm.loading_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div>
+                <Label className="text-xs">적재유형 <span className="text-destructive">*</span></Label>
+                <Select value={loadForm.loading_type || ""} onValueChange={(v) => setLoadForm((p) => ({ ...p, loading_type: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>{Object.entries(LOADING_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">상태</Label>
+                <Select value={loadForm.status || "ACTIVE"} onValueChange={(v) => setLoadForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold">규격정보</Label>
+              <div className="mt-2 grid grid-cols-3 gap-3">
+                <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={loadForm.width_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={loadForm.length_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={loadForm.height_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={loadForm.self_weight_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={loadForm.max_load_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대단수</Label><Input type="number" value={loadForm.max_stack || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_stack: e.target.value }))} className="h-9 text-xs" /></div>
+              </div>
+            </div>
+            <div><Label className="text-xs">비고</Label><Input value={loadForm.remarks || ""} onChange={(e) => setLoadForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setLoadModalOpen(false)}>취소</Button>
+            <Button onClick={saveLoadingUnit} disabled={saving}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 품목 추가 모달 (포장재 매칭) */}
+      <Dialog open={itemMatchModalOpen} onOpenChange={setItemMatchModalOpen}>
+        <DialogContent className="max-w-[900px]">
+          <DialogHeader>
+            <DialogTitle>품목 추가 — {selectedPkg?.pkg_name}</DialogTitle>
+            <DialogDescription>포장재에 매칭할 품목을 검색하여 추가합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <Input
+              placeholder="품목코드 / 품목명 검색 (입력 시 자동 검색)"
+              value={itemMatchKeyword}
+              onChange={(e) => {
+                setItemMatchKeyword(e.target.value);
+                const kw = e.target.value;
+                clearTimeout((window as any).__itemMatchTimer);
+                (window as any).__itemMatchTimer = setTimeout(async () => {
+                  try {
+                    const res = await getGeneralItems(kw || undefined);
+                    if (res.success) setItemMatchResults(res.data);
+                  } catch { /* ignore */ }
+                }, 300);
+              }}
+              className="h-9 text-xs"
+            />
+            <div className="max-h-[300px] overflow-auto rounded border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="p-2 w-[30px]" />
+                    <TableHead className="w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                    <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {itemMatchResults.filter(i => !pkgItems.some(pi => pi.item_number === i.item_number)).length === 0 ? (
+                    <TableRow><TableCell colSpan={6} className="h-16 text-center text-[13px] text-muted-foreground">검색 결과가 없습니다</TableCell></TableRow>
+                  ) : itemMatchResults.filter(i => !pkgItems.some(pi => pi.item_number === i.item_number)).map((item) => (
+                    <TableRow
+                      key={item.id}
+                      className={cn("cursor-pointer text-xs", itemMatchSelected?.id === item.id && "bg-primary/10")}
+                      onClick={() => setItemMatchSelected(item)}
+                    >
+                      <TableCell className="p-2 text-center">{itemMatchSelected?.id === item.id ? "✓" : ""}</TableCell>
+                      <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
+                      <TableCell className="p-2">{item.item_name}</TableCell>
+                      <TableCell className="p-2">{item.spec || "-"}</TableCell>
+                      <TableCell className="p-2">{item.material || "-"}</TableCell>
+                      <TableCell className="p-2">{item.unit || "EA"}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+            <div className="flex items-end gap-4">
+              <div className="flex-1">
+                <Label className="text-xs">선택된 품목</Label>
+                <Input
+                  value={itemMatchSelected ? `${itemMatchSelected.item_name} (${itemMatchSelected.item_number})` : ""}
+                  readOnly className="h-9 bg-muted text-xs"
+                />
+              </div>
+              <div className="w-[120px]">
+                <Label htmlFor="pkg-item-match-qty" className="text-xs">포장수량(EA) <span className="text-destructive">*</span></Label>
+                <Input
+                  id="pkg-item-match-qty" type="number" value={itemMatchQty}
+                  onChange={(e) => setItemMatchQty(Number(e.target.value) || 0)}
+                  min={1} className="h-9 text-xs"
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setItemMatchModalOpen(false)}>취소</Button>
+            <Button type="button" data-action-type="custom" onClick={saveItemMatch} disabled={saving || !itemMatchSelected}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 포장단위 추가 모달 (적재함 구성) */}
+      <Dialog open={pkgMatchModalOpen} onOpenChange={setPkgMatchModalOpen}>
+        <DialogContent className="max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>포장단위 추가 — {selectedLoading?.loading_name}</DialogTitle>
+            <DialogDescription>적재함에 적재할 포장단위를 선택합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <Input
+              placeholder="포장코드 / 포장명 검색"
+              value={pkgMatchSearchKw}
+              onChange={(e) => setPkgMatchSearchKw(e.target.value)}
+              className="h-9 text-xs"
+            />
+            <div className="max-h-[300px] overflow-auto rounded border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="p-2 w-[30px]" />
+                    <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장코드</TableHead>
+                    <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장명</TableHead>
+                    <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">크기(mm)</TableHead>
+                    <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대중량</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {(() => {
+                    const kw = pkgMatchSearchKw.toLowerCase();
+                    const filtered = pkgUnits.filter(p =>
+                      p.status === "ACTIVE"
+                      && !loadingPkgs.some(lp => lp.pkg_code === p.pkg_code)
+                      && (!kw || p.pkg_code?.toLowerCase().includes(kw) || p.pkg_name?.toLowerCase().includes(kw))
+                    );
+                    return filtered.length === 0 ? (
+                      <TableRow><TableCell colSpan={6} className="h-16 text-center text-[13px] text-muted-foreground">추가 가능한 포장단위가 없습니다</TableCell></TableRow>
+                    ) : filtered.map((p) => (
+                      <TableRow
+                        key={p.id}
+                        className={cn("cursor-pointer text-xs", pkgMatchSelected?.id === p.id && "bg-primary/10")}
+                        onClick={() => setPkgMatchSelected(p)}
+                      >
+                        <TableCell className="p-2 text-center">{pkgMatchSelected?.id === p.id ? "✓" : ""}</TableCell>
+                        <TableCell className="p-2 font-medium">{p.pkg_code}</TableCell>
+                        <TableCell className="p-2">{p.pkg_name}</TableCell>
+                        <TableCell className="p-2">{PKG_TYPE_LABEL[p.pkg_type] || p.pkg_type}</TableCell>
+                        <TableCell className="p-2 text-[10px]">{fmtSize(p.width_mm, p.length_mm, p.height_mm)}</TableCell>
+                        <TableCell className="p-2 text-right">{Number(p.max_load_kg || 0) > 0 ? `${p.max_load_kg}kg` : "-"}</TableCell>
+                      </TableRow>
+                    ));
+                  })()}
+                </TableBody>
+              </Table>
+            </div>
+            <div className="flex items-end gap-4">
+              <div className="w-[150px]">
+                <Label htmlFor="loading-pkg-match-qty" className="text-xs">최대적재수량 <span className="text-destructive">*</span></Label>
+                <Input
+                  id="loading-pkg-match-qty" type="number" value={pkgMatchQty}
+                  onChange={(e) => setPkgMatchQty(Number(e.target.value) || 0)}
+                  min={1} className="h-9 text-xs"
+                />
+              </div>
+              <div className="flex-1">
+                <Label className="text-xs">적재방향</Label>
+                <Input
+                  value={pkgMatchMethod}
+                  onChange={(e) => setPkgMatchMethod(e.target.value)}
+                  placeholder="수직/수평/혼합"
+                  className="h-9 text-xs"
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setPkgMatchModalOpen(false)}>취소</Button>
+            <Button type="button" data-action-type="custom" onClick={savePkgMatch} disabled={saving || !pkgMatchSelected}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/logistics/receiving/page.tsx b/frontend/app/(main)/COMPANY_8/logistics/receiving/page.tsx
new file mode 100644
index 00000000..85cdc23c
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/logistics/receiving/page.tsx
@@ -0,0 +1,1808 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Search,
+  Plus,
+  Trash2,
+  Loader2,
+  Inbox,
+  X,
+  Save,
+  ChevronRight,
+  ChevronDown,
+  ChevronLeft,
+  ChevronsLeft,
+  ChevronsRight,
+  Settings2,
+  Filter,
+  Check,
+  ArrowUp,
+  ArrowDown,
+} from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+// EDataTable 제거 — 마스터-디테일 그룹 테이블로 교체
+// API: /receiving/*
+import {
+  getReceivingList,
+  createReceiving,
+  deleteReceiving,
+  generateReceivingNumber,
+  getReceivingWarehouses,
+  getPurchaseOrderSources,
+  getShipmentSources,
+  getItemSources,
+  type InboundItem,
+  type PurchaseOrderSource,
+  type ShipmentSource,
+  type ItemSource,
+  type WarehouseOption,
+} from "@/lib/api/receiving";
+
+const GRID_COLUMNS = [
+  { key: "inbound_number", label: "입고번호" },
+  { key: "inbound_type", label: "입고유형" },
+  { key: "inbound_date", label: "입고일" },
+  { key: "reference_number", label: "참조번호" },
+  { key: "source_type", label: "데이터출처" },
+  { key: "supplier_name", label: "공급처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "inbound_qty", label: "입고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+  { key: "warehouse_name", label: "창고" },
+  { key: "inbound_status", label: "입고상태" },
+  { key: "remark", label: "비고" },
+];
+
+// 마스터 헤더 레이아웃 (입고번호 뒤, 디테일 7컬럼 위에 colSpan으로 맵핑)
+const MASTER_BODY_LAYOUT = [
+  { key: "inbound_type", label: "입고유형", colSpan: 1 },
+  { key: "inbound_date", label: "입고일", colSpan: 1 },
+  { key: "reference_number", label: "참조번호", colSpan: 1 },
+  { key: "supplier_name", label: "공급처", colSpan: 1 },
+  { key: "warehouse_name", label: "창고", colSpan: 1 },
+  { key: "inbound_status", label: "입고상태", colSpan: 1 },
+  { key: "memo", label: "비고", colSpan: 1 },
+];
+
+// 디테일 헤더 컬럼
+const DETAIL_HEADER_COLS = [
+  { key: "source_table", label: "출처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "inbound_qty", label: "입고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+];
+
+// 마스터 필드 키 목록 (필터 분류용)
+const MASTER_KEYS = new Set(["inbound_number", ...MASTER_BODY_LAYOUT.map((c) => c.key)]);
+
+// 디테일 필드 키 매핑 (GRID_COLUMNS key → DETAIL_HEADER_COLS key)
+const DETAIL_KEY_MAP: Record<string, string> = {
+  source_type: "source_table",
+  item_number: "item_number",
+  item_name: "item_name",
+  spec: "spec",
+  inbound_qty: "inbound_qty",
+  unit_price: "unit_price",
+  total_amount: "total_amount",
+};
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 입고유형 옵션
+const INBOUND_TYPES = [
+  { value: "구매입고", label: "구매입고" },
+  { value: "외주입고", label: "외주입고" },
+  { value: "사급자재입고", label: "사급자재입고" },
+  { value: "반품입고", label: "반품입고" },
+  { value: "기타입고", label: "기타입고" },
+];
+
+// 입고유형 카테고리 코드→라벨 매핑
+const INBOUND_TYPE_CODE_MAP: Record<string, string> = {
+  CAT_MLYTB8ON_A3AU: "구매입고",
+  CAT_MLYTBMH6_9AB7: "외주입고",
+  CAT_MLYTBSLW_5N81: "사급자재입고",
+  CAT_MLYTBGEV_N23U: "반품입고",
+  CAT_MLYTBYLU_0Z5T: "기타입고",
+};
+const resolveInboundType = (v: string) => INBOUND_TYPE_CODE_MAP[v] || v || "-";
+
+const INBOUND_STATUS_OPTIONS = [
+  { value: "대기", label: "대기" },
+  { value: "입고완료", label: "입고완료" },
+  { value: "부분입고", label: "부분입고" },
+  { value: "입고취소", label: "입고취소" },
+];
+
+const getTypeVariant = (type: string): "default" | "secondary" | "outline" => {
+  switch (type) {
+    case "구매입고": return "default";
+    case "반품입고": return "secondary";
+    default: return "outline";
+  }
+};
+
+const getStatusVariant = (status: string): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "입고완료": return "default";
+    case "부분입고": return "secondary";
+    case "입고취소": return "destructive";
+    default: return "outline";
+  }
+};
+
+// 소스 테이블 한글명 매핑
+const SOURCE_TABLE_LABEL: Record<string, string> = {
+  purchase_order_mng: "발주",
+  shipment_instruction_detail: "출하",
+  item_info: "품목",
+};
+
+// 선택된 소스 아이템 (등록 모달에서 사용)
+interface SelectedSourceItem {
+  key: string;
+  inbound_type: string;
+  reference_number: string;
+  supplier_code: string;
+  supplier_name: string;
+  item_number: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  unit: string;
+  inbound_qty: number;
+  unit_price: number;
+  total_amount: number;
+  source_table: string;
+  source_id: string;
+}
+
+export default function ReceivingPage() {
+  const ts = useTableSettings("c16-receiving", "inbound_mng", GRID_COLUMNS);
+
+  // ts.visibleColumns 기반 마스터/디테일 컬럼 계산
+  const visibleMasterLayout = useMemo(() => {
+    const ordered: typeof MASTER_BODY_LAYOUT = [];
+    for (const vc of ts.visibleColumns) {
+      const m = MASTER_BODY_LAYOUT.find((ml) => ml.key === vc.key);
+      if (m) ordered.push(m);
+    }
+    return ordered.length > 0 ? ordered : MASTER_BODY_LAYOUT;
+  }, [ts.visibleColumns]);
+
+  const visibleDetailCols = useMemo(() => {
+    const ordered: typeof DETAIL_HEADER_COLS = [];
+    for (const vc of ts.visibleColumns) {
+      const detailKey = DETAIL_KEY_MAP[vc.key];
+      if (detailKey) {
+        const d = DETAIL_HEADER_COLS.find((dc) => dc.key === detailKey);
+        if (d) ordered.push(d);
+      }
+    }
+    return ordered.length > 0 ? ordered : DETAIL_HEADER_COLS;
+  }, [ts.visibleColumns]);
+
+  const TOTAL_COLS = 3 + visibleMasterLayout.length;
+
+  // 목록 데이터
+  const [data, setData] = useState<InboundItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 마스터-디테일 그룹 테이블
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+  const [closingOrders, setClosingOrders] = useState<Set<string>>(new Set());
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
+
+  // 등록 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalInboundType, setModalInboundType] = useState("구매입고");
+  const [modalInboundNo, setModalInboundNo] = useState("");
+  const [modalInboundDate, setModalInboundDate] = useState("");
+  const [modalWarehouse, setModalWarehouse] = useState("");
+  const [modalLocation, setModalLocation] = useState("");
+  const [modalInspector, setModalInspector] = useState("");
+  const [modalManager, setModalManager] = useState("");
+  const [modalMemo, setModalMemo] = useState("");
+  const [selectedItems, setSelectedItems] = useState<SelectedSourceItem[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // 소스 데이터
+  const [sourceKeyword, setSourceKeyword] = useState("");
+  const [sourceLoading, setSourceLoading] = useState(false);
+  const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrderSource[]>([]);
+  const [shipments, setShipments] = useState<ShipmentSource[]>([]);
+  const [items, setItems] = useState<ItemSource[]>([]);
+  const [warehouses, setWarehouses] = useState<WarehouseOption[]>([]);
+
+  // 소스 데이터 페이징
+  const [sourcePage, setSourcePage] = useState(1);
+  const [sourcePageSize, setSourcePageSize] = useState(20);
+  const [sourceTotalCount, setSourceTotalCount] = useState(0);
+
+  // 구매관리 division 코드 (라벨 기준 조회)
+  const [purchaseDivisionCode, setPurchaseDivisionCode] = useState<string>("");
+
+  // 구매관리 division 코드 로드
+  useEffect(() => {
+    // division 카테고리에서 "구매관리" 라벨의 코드 조회
+    apiClient.get("/table-categories/item_info/division/values").then((res) => {
+      const vals = res.data?.data || [];
+      const found = vals.find((v: any) => (v.value_label || v.label) === "구매관리");
+      if (found) setPurchaseDivisionCode(found.value_code || found.code);
+    }).catch(() => {});
+  }, []);
+
+  // 목록 조회
+  const fetchList = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string | undefined> = {};
+      for (const f of searchFilters) {
+        if (!f.value) continue;
+        if (f.columnName === "inbound_type") params.inbound_type = f.value;
+        else if (f.columnName === "inbound_status") params.inbound_status = f.value;
+        else if (f.columnName === "inbound_date" && f.operator === "between") {
+          const [from, to] = f.value.split("~").map((s) => s.trim());
+          if (from) params.date_from = from;
+          if (to) params.date_to = to;
+        } else {
+          params.search_keyword = f.value;
+        }
+      }
+      const res = await getReceivingList(params);
+      if (res.success) setData(res.data);
+    } catch {
+      // 에러 무시
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchList();
+  }, [fetchList]);
+
+  // 창고 목록 로드
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await getReceivingWarehouses();
+        if (res.success) setWarehouses(res.data);
+      } catch {
+        // ignore
+      }
+    })();
+  }, []);
+
+  // 필터 + 정렬 적용된 데이터 -> 그룹핑
+  const filteredGroups = useMemo(() => {
+    // 1차: inbound_number 기준 그룹핑
+    const allGroups: Record<string, { master: InboundItem; details: InboundItem[] }> = {};
+    for (const row of data) {
+      const key = row.inbound_number || "_no_inbound";
+      if (!allGroups[key]) {
+        allGroups[key] = { master: row, details: [] };
+      }
+      allGroups[key].details.push(row);
+    }
+
+    // 마스터 필터 / 디테일 필터 분리
+    const masterFilters: Record<string, Set<string>> = {};
+    const detailFilters: Record<string, Set<string>> = {};
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      if (MASTER_KEYS.has(colKey)) masterFilters[colKey] = values;
+      else detailFilters[colKey] = values;
+    }
+
+    // 2차: 마스터 필터 적용 (그룹 단위)
+    let entries = Object.entries(allGroups);
+    if (Object.keys(masterFilters).length > 0) {
+      entries = entries.filter(([, group]) =>
+        Object.entries(masterFilters).every(([colKey, values]) => {
+          let raw = (group.master as any)?.[colKey] ?? "";
+          // 입고유형은 코드→라벨 변환된 값으로 비교
+          if (colKey === "inbound_type") raw = resolveInboundType(String(raw));
+          return values.has(String(raw));
+        })
+      );
+    }
+
+    // 3차: 디테일 필터 적용 (행 단위)
+    if (Object.keys(detailFilters).length > 0) {
+      entries = entries
+        .map(([inboundNo, group]) => {
+          const filtered = group.details.filter((row) =>
+            Object.entries(detailFilters).every(([colKey, values]) => {
+              let cellVal = (row as any)[colKey] != null ? String((row as any)[colKey]) : "";
+              if (colKey === "source_table") cellVal = SOURCE_TABLE_LABEL[cellVal] || cellVal;
+              return values.has(cellVal);
+            })
+          );
+          return [inboundNo, { ...group, details: filtered }] as [string, typeof group];
+        })
+        .filter(([, group]) => group.details.length > 0);
+    }
+
+    // 4차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      if (MASTER_KEYS.has(key)) {
+        entries.sort(([, a], [, b]) => {
+          let av: any = (a.master as any)?.[key] ?? "";
+          let bv: any = (b.master as any)?.[key] ?? "";
+          if (key === "inbound_type") { av = resolveInboundType(String(av)); bv = resolveInboundType(String(bv)); }
+          const na = Number(av); const nb = Number(bv);
+          if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+          return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+        });
+      } else {
+        entries.forEach(([, group]) => {
+          group.details.sort((a, b) => {
+            const av = (a as any)[key] ?? "";
+            const bv = (b as any)[key] ?? "";
+            const na = Number(av); const nb = Number(bv);
+            if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+            return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+          });
+        });
+      }
+    }
+
+    return Object.fromEntries(entries);
+  }, [data, headerFilters, sortState]);
+
+  // 마스터 컬럼별 고유값 (마스터 헤더 필터용)
+  const masterUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    const seenMasters = new Map<string, InboundItem>();
+    data.forEach((row) => {
+      if (row.inbound_number && !seenMasters.has(row.inbound_number)) {
+        seenMasters.set(row.inbound_number, row);
+      }
+    });
+    const masters = Array.from(seenMasters.values());
+    for (const col of [{ key: "inbound_number", label: "입고번호" }, ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label }))]) {
+      const values = new Set<string>();
+      masters.forEach((m) => {
+        let val = (m as any)?.[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "inbound_type") val = resolveInboundType(String(val));
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 디테일 컬럼별 고유값 (디테일 서브헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of DETAIL_HEADER_COLS) {
+      const values = new Set<string>();
+      data.forEach((row) => {
+        let val = (row as any)[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "source_table") val = SOURCE_TABLE_LABEL[val] || val;
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
+  };
+
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
+  };
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
+    );
+  };
+
+  // 삭제
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) return;
+    if (!confirm(`선택한 ${checkedIds.length}건을 삭제하시겠습니까?`)) return;
+    for (const id of checkedIds) {
+      await deleteReceiving(id);
+    }
+    setCheckedIds([]);
+    fetchList();
+  };
+
+  // --- 등록 모달 ---
+
+  // 소스 데이터 로드 함수
+  const loadSourceData = useCallback(
+    async (type: string, keyword?: string, pageOverride?: number) => {
+      setSourceLoading(true);
+      try {
+        const params = {
+          keyword: keyword || undefined,
+          page: pageOverride ?? sourcePage,
+          pageSize: sourcePageSize,
+        };
+        if (type === "구매입고") {
+          const res = await getPurchaseOrderSources(params);
+          if (res.success) {
+            setPurchaseOrders(res.data);
+            setSourceTotalCount(res.totalCount || 0);
+          }
+        } else if (type === "반품입고") {
+          const res = await getShipmentSources(params);
+          if (res.success) {
+            setShipments(res.data);
+            setSourceTotalCount(res.totalCount || 0);
+          }
+        } else {
+          const res = await getItemSources({ ...params, division: purchaseDivisionCode || undefined });
+          if (res.success) {
+            setItems(res.data);
+            setSourceTotalCount(res.totalCount || 0);
+          }
+        }
+      } catch {
+        // ignore
+      } finally {
+        setSourceLoading(false);
+      }
+    },
+    [sourcePage, sourcePageSize]
+  );
+
+  const openRegisterModal = async () => {
+    const defaultType = "구매입고";
+    setModalInboundType(defaultType);
+    setModalInboundDate(new Date().toISOString().split("T")[0]);
+    setModalWarehouse("");
+    setModalLocation("");
+    setModalInspector("");
+    setModalManager("");
+    setModalMemo("");
+    setSelectedItems([]);
+    setSourceKeyword("");
+    setPurchaseOrders([]);
+    setShipments([]);
+    setItems([]);
+    setSourcePage(1);
+    setSourceTotalCount(0);
+    setIsModalOpen(true);
+
+    // 입고번호 생성 + 발주 데이터 동시 로드
+    try {
+      const [numRes] = await Promise.all([
+        generateReceivingNumber(),
+        loadSourceData(defaultType, undefined, 1),
+      ]);
+      if (numRes.success) setModalInboundNo(numRes.data);
+    } catch {
+      setModalInboundNo("");
+    }
+  };
+
+  // 검색 버튼 클릭 시
+  const searchSourceData = useCallback(async () => {
+    setSourcePage(1);
+    await loadSourceData(modalInboundType, sourceKeyword || undefined, 1);
+  }, [modalInboundType, sourceKeyword, loadSourceData]);
+
+  // 입고유형 변경 시 소스 데이터 자동 리로드
+  const handleInboundTypeChange = useCallback(
+    (type: string) => {
+      setModalInboundType(type);
+      setSourceKeyword("");
+      setPurchaseOrders([]);
+      setShipments([]);
+      setItems([]);
+      setSelectedItems([]);
+      setSourcePage(1);
+      setSourceTotalCount(0);
+      loadSourceData(type, undefined, 1);
+    },
+    [loadSourceData]
+  );
+
+  // 발주 품목 추가
+  const addPurchaseOrder = (po: PurchaseOrderSource) => {
+    const key = `po-${po.id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        inbound_type: "구매입고",
+        reference_number: po.purchase_no,
+        supplier_code: po.supplier_code,
+        supplier_name: po.supplier_name,
+        item_number: po.item_code,
+        item_name: po.item_name,
+        spec: po.spec || "",
+        material: po.material || "",
+        unit: "EA",
+        inbound_qty: po.remain_qty,
+        unit_price: po.unit_price,
+        total_amount: po.remain_qty * po.unit_price,
+        source_table: po.source_table || "purchase_order_mng",
+        source_id: po.id,
+      },
+    ]);
+  };
+
+  // 출하 품목 추가
+  const addShipment = (sh: ShipmentSource) => {
+    const key = `sh-${sh.detail_id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        inbound_type: "반품입고",
+        reference_number: sh.instruction_no,
+        supplier_code: "",
+        supplier_name: sh.partner_id,
+        item_number: sh.item_code,
+        item_name: sh.item_name,
+        spec: sh.spec || "",
+        material: sh.material || "",
+        unit: "EA",
+        inbound_qty: sh.ship_qty,
+        unit_price: 0,
+        total_amount: 0,
+        source_table: "shipment_instruction_detail",
+        source_id: String(sh.detail_id),
+      },
+    ]);
+  };
+
+  // 품목 추가
+  const addItem = (item: ItemSource) => {
+    const key = `item-${item.id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        inbound_type: "기타입고",
+        reference_number: item.item_number,
+        supplier_code: "",
+        supplier_name: "",
+        item_number: item.item_number,
+        item_name: item.item_name,
+        spec: item.spec || "",
+        material: item.material || "",
+        unit: item.unit || "EA",
+        inbound_qty: 0,
+        unit_price: item.standard_price,
+        total_amount: 0,
+        source_table: "item_info",
+        source_id: item.id,
+      },
+    ]);
+  };
+
+  // 선택 품목 수량 변경
+  const updateItemQty = (key: string, qty: number) => {
+    setSelectedItems((prev) =>
+      prev.map((item) =>
+        item.key === key
+          ? { ...item, inbound_qty: qty, total_amount: qty * item.unit_price }
+          : item
+      )
+    );
+  };
+
+  // 선택 품목 단가 변경
+  const updateItemPrice = (key: string, price: number) => {
+    setSelectedItems((prev) =>
+      prev.map((item) =>
+        item.key === key
+          ? { ...item, unit_price: price, total_amount: item.inbound_qty * price }
+          : item
+      )
+    );
+  };
+
+  // 선택 품목 삭제
+  const removeItem = (key: string) => {
+    setSelectedItems((prev) => prev.filter((item) => item.key !== key));
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (selectedItems.length === 0) {
+      alert("입고할 품목을 선택해주세요.");
+      return;
+    }
+    if (!modalInboundDate) {
+      alert("입고일을 입력해주세요.");
+      return;
+    }
+
+    const zeroQtyItems = selectedItems.filter((i) => !i.inbound_qty || i.inbound_qty <= 0);
+    if (zeroQtyItems.length > 0) {
+      alert("입고수량이 0인 품목이 있습니다. 수량을 입력해주세요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const res = await createReceiving({
+        inbound_number: modalInboundNo,
+        inbound_date: modalInboundDate,
+        warehouse_code: modalWarehouse || undefined,
+        location_code: modalLocation || undefined,
+        inspector: modalInspector || undefined,
+        manager: modalManager || undefined,
+        memo: modalMemo || undefined,
+        items: selectedItems.map((item) => ({
+          inbound_type: item.inbound_type,
+          reference_number: item.reference_number,
+          supplier_code: item.supplier_code,
+          supplier_name: item.supplier_name,
+          item_number: item.item_number,
+          item_name: item.item_name,
+          spec: item.spec,
+          material: item.material,
+          unit: item.unit,
+          inbound_qty: item.inbound_qty,
+          unit_price: item.unit_price,
+          total_amount: item.total_amount,
+          source_table: item.source_table,
+          source_id: item.source_id,
+          inbound_status: "입고완료",
+          inspection_status: "대기",
+        })),
+      });
+
+      if (res.success) {
+        alert(res.message || "입고 등록 완료");
+        setIsModalOpen(false);
+        fetchList();
+      }
+    } catch {
+      alert("입고 등록 중 오류가 발생했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 합계 계산
+  const totalSummary = useMemo(() => {
+    return {
+      count: selectedItems.length,
+      qty: selectedItems.reduce((sum, i) => sum + (i.inbound_qty || 0), 0),
+      amount: selectedItems.reduce((sum, i) => sum + (i.total_amount || 0), 0),
+    };
+  }, [selectedItems]);
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>물류관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">입고관리</span>
+      </div>
+
+      {/* 검색 영역 */}
+      <DynamicSearchFilter
+        tableName="inbound_mng"
+        filterId="c16-receiving"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={data.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button size="sm" onClick={openRegisterModal} className="h-9">
+              <Plus className="mr-1 h-4 w-4" />
+              입고 등록
+            </Button>
+            <div className="h-4 w-px bg-border" />
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={handleDelete}
+              disabled={checkedIds.length === 0}
+              className="h-9 text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+            >
+              <Trash2 className="mr-1 h-4 w-4" />
+              삭제 ({checkedIds.length})
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 입고 목록 테이블 (마스터-디테일 그룹) */}
+      <div className="flex-1 overflow-hidden rounded-lg border border-border bg-card">
+        <div className="flex items-center justify-between border-b bg-muted/50 px-4 py-2.5">
+          <div className="flex items-center gap-2">
+            <h3 className="text-[13px] font-bold">입고 목록</h3>
+            <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+              {Object.keys(filteredGroups).length}건
+            </span>
+          </div>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="h-[calc(100%-44px)] overflow-auto">
+          <Table style={{ minWidth: `${216 + visibleMasterLayout.length * 120}px` }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "36px" }} />
+              <col style={{ width: "140px" }} />
+              {visibleMasterLayout.map((col) => (
+                <col key={col.key} style={{ width: ts.getWidth(col.key) ? `${ts.getWidth(col.key)}px` : undefined }} />
+              ))}
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
+                  <Checkbox
+                    checked={(() => {
+                      const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
+                  />
+                </TableHead>
+                <TableHead />
+                {/* 입고번호 (별도 컬럼) */}
+                <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                  <div className="inline-flex items-center gap-1">
+                    <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort("inbound_number")}>
+                      <span className="truncate">입고번호</span>
+                      {sortState?.key === "inbound_number" && (
+                        sortState.direction === "asc"
+                          ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                          : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                      )}
+                    </div>
+                    {(masterUniqueValues["inbound_number"] || []).length > 0 && (
+                      <HeaderFilterPopover
+                        colKey="inbound_number" colLabel="입고번호"
+                        uniqueValues={masterUniqueValues["inbound_number"] || []}
+                        filterValues={headerFilters["inbound_number"] || new Set<string>()}
+                        onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                      />
+                    )}
+                  </div>
+                </TableHead>
+                {/* 마스터 필드 헤더 (ts.visibleColumns 순서) */}
+                {visibleMasterLayout.map((col) => (
+                  <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                    <div className="inline-flex items-center gap-1">
+                      <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                        <span className="truncate">{col.label}</span>
+                        {sortState?.key === col.key && (
+                          sortState.direction === "asc"
+                            ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                            : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                        )}
+                      </div>
+                      {(masterUniqueValues[col.key] || []).length > 0 && (
+                        <HeaderFilterPopover
+                          colKey={col.key} colLabel={col.label}
+                          uniqueValues={masterUniqueValues[col.key] || []}
+                          filterValues={headerFilters[col.key] || new Set<string>()}
+                          onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                        />
+                      )}
+                    </div>
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
+                  </TableCell>
+                </TableRow>
+              ) : Object.keys(filteredGroups).length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <Inbox className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 입고 내역이 없어요</span>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                Object.entries(filteredGroups).map(([inboundNo, group]) => {
+                  const isExpanded = expandedOrders.has(inboundNo);
+                  const detailIds = group.details.map((d) => d.id);
+                  const allDetailChecked = detailIds.length > 0 && detailIds.every((id) => checkedIds.includes(id));
+                  const someDetailChecked = detailIds.some((id) => checkedIds.includes(id));
+                  const master = group.master;
+                  return (
+                    <React.Fragment key={inboundNo}>
+                      {/* 마스터 행 */}
+                      <TableRow
+                        style={{ borderTop: "2px solid hsl(var(--border))" }}
+                        className={cn(
+                          "cursor-pointer border-l-[3px] border-l-transparent font-semibold tree-master-row",
+                          allDetailChecked && "border-l-primary bg-primary/5"
+                        )}
+                        onClick={() => {
+                          if (expandedOrders.has(inboundNo)) {
+                            setClosingOrders((prev) => new Set(prev).add(inboundNo));
+                            setTimeout(() => {
+                              setExpandedOrders((prev) => { const next = new Set(prev); next.delete(inboundNo); return next; });
+                              setClosingOrders((prev) => { const next = new Set(prev); next.delete(inboundNo); return next; });
+                            }, 200);
+                          } else {
+                            setExpandedOrders((prev) => new Set(prev).add(inboundNo));
+                          }
+                        }}
+                      >
+                        <TableCell
+                          className="text-center cursor-pointer"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setCheckedIds((prev) => {
+                              if (allDetailChecked) return prev.filter((id) => !detailIds.includes(id));
+                              return [...new Set([...prev, ...detailIds])];
+                            });
+                          }}
+                        >
+                          <Checkbox
+                            checked={allDetailChecked}
+                            data-state={someDetailChecked && !allDetailChecked ? "indeterminate" : undefined}
+                            onCheckedChange={() => {}}
+                          />
+                        </TableCell>
+                        <TableCell className="text-center">
+                          {isExpanded
+                            ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            : <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          }
+                        </TableCell>
+                        {/* 입고번호 */}
+                        <TableCell className="font-mono whitespace-nowrap">
+                          {inboundNo}
+                          <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
+                        </TableCell>
+                        {/* 마스터 필드 (ts.visibleColumns 순서) */}
+                        {visibleMasterLayout.map((col) => {
+                          switch (col.key) {
+                            case "inbound_type": return (
+                              <TableCell key={col.key} className="text-[13px]">
+                                <Badge variant={getTypeVariant(resolveInboundType(master.inbound_type))} className="text-[11px]">
+                                  {resolveInboundType(master.inbound_type)}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "inbound_date": return (
+                              <TableCell key={col.key} className="text-[13px] whitespace-nowrap">
+                                {master.inbound_date ? new Date(master.inbound_date).toLocaleDateString("ko-KR") : "-"}
+                              </TableCell>
+                            );
+                            case "reference_number": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.reference_number || ""}</span>
+                              </TableCell>
+                            );
+                            case "supplier_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.supplier_name || ""}</span>
+                              </TableCell>
+                            );
+                            case "warehouse_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
+                              </TableCell>
+                            );
+                            case "inbound_status": return (
+                              <TableCell key={col.key} className="text-[13px]">
+                                <Badge variant={getStatusVariant(master.inbound_status)} className="text-[11px]">
+                                  {master.inbound_status || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "memo": return (
+                              <TableCell key={col.key} className="text-muted-foreground text-[13px]">
+                                <span className="block truncate max-w-[110px]">{master.memo || ""}</span>
+                              </TableCell>
+                            );
+                            default: return <TableCell key={col.key} className="text-[13px]">{(master as any)[col.key] ?? ""}</TableCell>;
+                          }
+                        })}
+                      </TableRow>
+
+                      {/* 디테일 서브 헤더 (펼쳤을 때만) */}
+                      {isExpanded && (
+                        <TableRow
+                          className={cn(
+                            "border-l-[3px] border-l-primary/30 bg-muted/60",
+                            closingOrders.has(inboundNo) ? "tree-detail-row-closing" : "tree-detail-row",
+                          )}
+                        >
+                          <TableCell />
+                          <TableCell />
+                          <TableCell />
+                          {visibleDetailCols.map((col) => {
+                            const isRight = ["inbound_qty", "unit_price", "total_amount"].includes(col.key);
+                            const isSorted = sortState?.key === col.key;
+                            const uniqueVals = Array.from(new Set(
+                              group.details.map((d) => {
+                                let v = (d as any)[col.key];
+                                if (col.key === "source_table") v = SOURCE_TABLE_LABEL[v] || v;
+                                return v;
+                              }).filter((v: any) => v != null && v !== "").map(String)
+                            )).sort();
+                            const filterVals = headerFilters[col.key] || new Set<string>();
+                            return (
+                              <TableCell
+                                key={col.key}
+                                className={cn(
+                                  "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 select-none",
+                                  isRight && "text-right",
+                                )}
+                              >
+                                <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                                  <div
+                                    className="flex items-center gap-1 cursor-pointer min-w-0"
+                                    onClick={() => handleSort(col.key)}
+                                  >
+                                    <span className="truncate">{col.label}</span>
+                                    {isSorted && (
+                                      sortState!.direction === "asc"
+                                        ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                                        : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                                    )}
+                                  </div>
+                                  {uniqueVals.length > 0 && (
+                                    <HeaderFilterPopover
+                                      colKey={col.key} colLabel={col.label}
+                                      uniqueValues={uniqueVals} filterValues={filterVals}
+                                      onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                                    />
+                                  )}
+                                </div>
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                      )}
+
+                      {/* 디테일 행 (펼쳤을 때만) */}
+                      {isExpanded && group.details.map((row, detailIdx) => {
+                        const isClosing = closingOrders.has(inboundNo);
+                        const isChecked = checkedIds.includes(row.id);
+                        return (
+                          <TableRow
+                            key={`${row.id}-${detailIdx}`}
+                            className={cn(
+                              "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                              isClosing ? "tree-detail-row-closing" : "tree-detail-row",
+                              isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                            )}
+                            onClick={() => {
+                              setCheckedIds((prev) =>
+                                prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                              );
+                            }}
+                          >
+                            <TableCell
+                              className="text-center cursor-pointer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                            >
+                              <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                            </TableCell>
+                            <TableCell className="relative">
+                              <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
+                            </TableCell>
+                            <TableCell />
+                            {visibleDetailCols.map((col) => {
+                              switch (col.key) {
+                                case "source_table": return <TableCell key={col.key} className="text-[13px]">{row.source_table ? SOURCE_TABLE_LABEL[row.source_table] || row.source_table : "-"}</TableCell>;
+                                case "item_number": return <TableCell key={col.key} className="font-mono text-[13px]">{row.item_number || ""}</TableCell>;
+                                case "item_name": return <TableCell key={col.key} className="text-[13px] max-w-[160px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>;
+                                case "spec": return <TableCell key={col.key} className="text-[13px] text-muted-foreground">{row.spec || ""}</TableCell>;
+                                case "inbound_qty": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.inbound_qty ? Number(row.inbound_qty).toLocaleString() : ""}</TableCell>;
+                                case "unit_price": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>;
+                                case "total_amount": return <TableCell key={col.key} className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>;
+                                default: return <TableCell key={col.key} className="text-[13px]">{(row as any)[col.key] ?? ""}</TableCell>;
+                              }
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                    </React.Fragment>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      {/* 입고 등록 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="sm:max-w-[1600px] w-[95vw] h-[90vh] p-0 flex flex-col overflow-hidden">
+          <DialogHeader className="shrink-0 px-6 pt-4 pb-2 border-b">
+            <DialogTitle>입고 등록</DialogTitle>
+            <DialogDescription>
+              입고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가해 주세요.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-hidden flex flex-col">
+
+          {/* 입고유형 선택 */}
+          <div className="flex items-center gap-4 border-b bg-muted/30 px-6 py-2.5">
+            <Label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide">입고유형</Label>
+            <Select value={modalInboundType} onValueChange={handleInboundTypeChange}>
+              <SelectTrigger className="h-9 w-[160px] text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {INBOUND_TYPES.map((t) => (
+                  <SelectItem key={t.value} value={t.value}>
+                    {t.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <span className="text-muted-foreground ml-auto text-xs italic">
+              {modalInboundType === "구매입고"
+                ? "발주 데이터에서 입고 처리합니다."
+                : modalInboundType === "반품입고"
+                  ? "출하 데이터에서 반품 입고 처리합니다."
+                  : "품목 데이터를 직접 선택하여 입고 처리합니다."}
+            </span>
+          </div>
+
+          {/* 메인 콘텐츠: 좌측 소스 데이터 / 우측 선택 품목 */}
+          <div className="flex-1 overflow-hidden">
+            <ResizablePanelGroup direction="horizontal">
+              {/* 좌측: 근거 데이터 검색 */}
+              <ResizablePanel defaultSize={60} minSize={35}>
+                <div className="flex h-full flex-col">
+                  {/* 소스 검색 바 */}
+                  <div className="flex items-center gap-2 border-b px-4 py-2.5">
+                    <Input
+                      placeholder={
+                        modalInboundType === "구매입고"
+                          ? "발주번호 / 품목명 / 공급처"
+                          : modalInboundType === "반품입고"
+                            ? "출하번호 / 품목명"
+                            : "품목번호 / 품목명"
+                      }
+                      value={sourceKeyword}
+                      onChange={(e) => setSourceKeyword(e.target.value)}
+                      onKeyDown={(e) => e.key === "Enter" && searchSourceData()}
+                      className="h-9 flex-1 text-xs"
+                    />
+                    <Button size="sm" onClick={searchSourceData} className="h-9">
+                      <Search className="mr-1 h-3 w-3" />
+                      검색
+                    </Button>
+                  </div>
+
+                  {/* 소스 데이터 테이블 */}
+                  <div className="flex-1 overflow-auto">
+                    <div className="flex items-center gap-2 px-4 py-2.5 bg-muted/50 border-b">
+                      <h4 className="text-[13px] font-bold">
+                        {modalInboundType === "구매입고"
+                          ? "미입고 발주 목록"
+                          : modalInboundType === "반품입고"
+                            ? "출하 목록"
+                            : "품목 목록"}
+                      </h4>
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {sourceTotalCount}건
+                      </span>
+                    </div>
+
+                    {sourceLoading ? (
+                      <div className="flex h-40 items-center justify-center">
+                        <Loader2 className="h-5 w-5 animate-spin" />
+                      </div>
+                    ) : modalInboundType === "구매입고" ? (
+                      <SourcePurchaseOrderTable
+                        data={purchaseOrders}
+                        onAdd={addPurchaseOrder}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    ) : modalInboundType === "반품입고" ? (
+                      <SourceShipmentTable
+                        data={shipments}
+                        onAdd={addShipment}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    ) : (
+                      <SourceItemTable
+                        data={items}
+                        onAdd={addItem}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    )}
+                  </div>
+
+                  {/* 페이징 */}
+                  {sourceTotalCount > 0 && (
+                    <div className="flex shrink-0 items-center justify-between border-t bg-muted/30 px-4 py-2">
+                      <div className="flex items-center gap-2">
+                        <span className="text-muted-foreground text-[11px]">표시:</span>
+                        <Input
+                          type="number"
+                          min={1}
+                          max={500}
+                          value={sourcePageSize}
+                          onChange={(e) => {
+                            const v = parseInt(e.target.value, 10);
+                            if (v > 0) {
+                              setSourcePageSize(v);
+                              setSourcePage(1);
+                              loadSourceData(modalInboundType, sourceKeyword || undefined, 1);
+                            }
+                          }}
+                          className="h-7 w-[60px] text-center text-[11px]"
+                        />
+                        <span className="text-muted-foreground text-[11px]">
+                          총 {sourceTotalCount}건
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => { setSourcePage(1); loadSourceData(modalInboundType, sourceKeyword || undefined, 1); }}>
+                          <ChevronsLeft className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => { const p = sourcePage - 1; setSourcePage(p); loadSourceData(modalInboundType, sourceKeyword || undefined, p); }}>
+                          <ChevronLeft className="h-3.5 w-3.5" />
+                        </Button>
+                        <span className="px-2 text-xs font-medium">{sourcePage} / {Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize))}</span>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                          onClick={() => { const p = sourcePage + 1; setSourcePage(p); loadSourceData(modalInboundType, sourceKeyword || undefined, p); }}>
+                          <ChevronRight className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                          onClick={() => { const p = Math.ceil(sourceTotalCount / sourcePageSize); setSourcePage(p); loadSourceData(modalInboundType, sourceKeyword || undefined, p); }}>
+                          <ChevronsRight className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle onPointerDown={(e) => e.stopPropagation()} />
+
+              {/* 우측: 입고 정보 + 선택 품목 */}
+              <ResizablePanel defaultSize={40} minSize={25}>
+                <div className="flex h-full flex-col">
+                  {/* 입고 정보 입력 */}
+                  <div className="space-y-3 border-b bg-muted/30 px-4 py-3">
+                    <h4 className="text-[13px] font-bold text-foreground">입고 정보</h4>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">입고번호</Label>
+                        <Input
+                          value={modalInboundNo}
+                          readOnly
+                          className="bg-muted h-9 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">
+                          입고일 <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                          type="date"
+                          value={modalInboundDate}
+                          onChange={(e) => setModalInboundDate(e.target.value)}
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">창고</Label>
+                        <Select value={modalWarehouse} onValueChange={setModalWarehouse}>
+                          <SelectTrigger className="h-9 text-xs">
+                            <SelectValue placeholder="창고 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {warehouses.map((w) => (
+                              <SelectItem key={w.warehouse_code} value={w.warehouse_code}>
+                                {w.warehouse_name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">위치</Label>
+                        <Input
+                          value={modalLocation}
+                          onChange={(e) => setModalLocation(e.target.value)}
+                          placeholder="위치 입력"
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">검수자</Label>
+                        <Input
+                          value={modalInspector}
+                          onChange={(e) => setModalInspector(e.target.value)}
+                          placeholder="검수자"
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">담당자</Label>
+                        <Input
+                          value={modalManager}
+                          onChange={(e) => setModalManager(e.target.value)}
+                          placeholder="담당자"
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                      <div className="col-span-2">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">메모</Label>
+                        <Input
+                          value={modalMemo}
+                          onChange={(e) => setModalMemo(e.target.value)}
+                          placeholder="메모"
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 선택된 품목 테이블 */}
+                  <div className="flex-1 overflow-auto">
+                    <div className="flex items-center gap-2 border-b bg-muted/50 px-4 py-2.5">
+                      <h4 className="text-[13px] font-bold">입고 처리 품목</h4>
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {selectedItems.length}건
+                      </span>
+                    </div>
+
+                    {selectedItems.length === 0 ? (
+                      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+                        <Inbox className="h-8 w-8 opacity-30" />
+                        <p className="text-xs font-medium">좌측에서 품목을 선택하여 추가해 주세요</p>
+                      </div>
+                    ) : (
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                            <TableHead className="w-[80px] p-2 text-right">
+                              수량
+                            </TableHead>
+                            <TableHead className="w-[80px] p-2 text-right">
+                              단가
+                            </TableHead>
+                            <TableHead className="w-[90px] p-2 text-right">
+                              금액
+                            </TableHead>
+                            <TableHead className="w-[30px] p-2" />
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {selectedItems.map((item, idx) => (
+                            <TableRow key={item.key} className="text-xs">
+                              <TableCell className="p-2 text-center">
+                                {idx + 1}
+                              </TableCell>
+                              <TableCell className="max-w-[180px] p-2">
+                                <div className="flex flex-col">
+                                  <span className="truncate font-medium" title={item.item_name}>
+                                    {item.item_name}
+                                  </span>
+                                  <span className="text-muted-foreground truncate text-[10px]" title={`${item.item_number}${item.spec ? ` | ${item.spec}` : ""}`}>
+                                    {item.item_number}
+                                    {item.spec ? ` | ${item.spec}` : ""}
+                                  </span>
+                                </div>
+                              </TableCell>
+                              <TableCell className="p-2 text-[11px]">
+                                {item.reference_number}
+                              </TableCell>
+                              <TableCell className="p-2 text-right">
+                                <Input
+                                  type="number"
+                                  value={item.inbound_qty || ""}
+                                  onChange={(e) =>
+                                    updateItemQty(
+                                      item.key,
+                                      Number(e.target.value) || 0
+                                    )
+                                  }
+                                  className="h-7 w-[70px] text-right text-xs"
+                                  min={0}
+                                />
+                              </TableCell>
+                              <TableCell className="p-2 text-right">
+                                <Input
+                                  type="number"
+                                  value={item.unit_price || ""}
+                                  onChange={(e) =>
+                                    updateItemPrice(
+                                      item.key,
+                                      Number(e.target.value) || 0
+                                    )
+                                  }
+                                  className="h-7 w-[70px] text-right text-xs"
+                                  min={0}
+                                />
+                              </TableCell>
+                              <TableCell className="p-2 text-right text-[13px] font-semibold">
+                                {item.total_amount.toLocaleString()}
+                              </TableCell>
+                              <TableCell className="p-2 text-center">
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-6 w-6"
+                                  onClick={() => removeItem(item.key)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+
+          </div>
+          <DialogFooter className="shrink-0 border-t px-0 py-0">
+            <div className="flex w-full items-center justify-between px-6 py-2.5">
+              <div className="text-muted-foreground text-xs">
+                {selectedItems.length > 0 ? (
+                  <span className="flex items-center gap-3">
+                    <span className="font-semibold text-foreground">{totalSummary.count}건</span>
+                    <span>수량 합계: <span className="font-medium text-foreground">{totalSummary.qty.toLocaleString()}</span></span>
+                    <span>금액 합계: <span className="font-medium text-foreground">{totalSummary.amount.toLocaleString()}원</span></span>
+                  </span>
+                ) : (
+                  "품목을 추가해 주세요"
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsModalOpen(false)}
+                  className="h-9 text-sm"
+                >
+                  취소
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={saving || selectedItems.length === 0}
+                  className="h-9 text-sm"
+                >
+                  {saving ? (
+                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="mr-1 h-4 w-4" />
+                  )}
+                  저장
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
+
+// --- 소스 데이터 테이블 컴포넌트들 ---
+
+function SourcePurchaseOrderTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: PurchaseOrderSource[];
+  onAdd: (po: PurchaseOrderSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 발주 데이터를 조회해 주세요</p>
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">미입고</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((po, idx) => {
+          const isSelected = selectedKeys.includes(`po-${po.id}`);
+          return (
+            <TableRow
+              key={`${po.source_table || 'po'}-${po.id}-${idx}`}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(po)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">
+                    추가됨
+                  </Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[120px] truncate p-2 font-medium" title={po.purchase_no}>{po.purchase_no}</TableCell>
+              <TableCell className="max-w-[120px] truncate p-2" title={po.supplier_name}>{po.supplier_name}</TableCell>
+              <TableCell className="max-w-[200px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={po.item_name}>{po.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={`${po.item_code}${po.spec ? ` | ${po.spec}` : ""}`}>
+                    {po.item_code}
+                    {po.spec ? ` | ${po.spec}` : ""}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(po.order_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(po.received_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right font-semibold text-primary">
+                {Number(po.remain_qty).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+function SourceShipmentTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: ShipmentSource[];
+  onAdd: (sh: ShipmentSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 출하 데이터를 조회해 주세요</p>
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하일</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하수량</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((sh) => {
+          const isSelected = selectedKeys.includes(`sh-${sh.detail_id}`);
+          return (
+            <TableRow
+              key={sh.detail_id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(sh)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">
+                    추가됨
+                  </Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[130px] truncate p-2 font-medium" title={sh.instruction_no}>{sh.instruction_no}</TableCell>
+              <TableCell className="p-2">
+                {sh.instruction_date
+                  ? new Date(sh.instruction_date).toLocaleDateString("ko-KR")
+                  : "-"}
+              </TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={sh.partner_id}>{sh.partner_id}</TableCell>
+              <TableCell className="max-w-[200px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={sh.item_name}>{sh.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={`${sh.item_code}${sh.spec ? ` | ${sh.spec}` : ""}`}>
+                    {sh.item_code}
+                    {sh.spec ? ` | ${sh.spec}` : ""}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="p-2 text-right font-semibold">
+                {Number(sh.ship_qty).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+function SourceItemTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: ItemSource[];
+  onAdd: (item: ItemSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 품목 데이터를 조회해 주세요</p>
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+          <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((item) => {
+          const isSelected = selectedKeys.includes(`item-${item.id}`);
+          return (
+            <TableRow
+              key={item.id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(item)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">
+                    추가됨
+                  </Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[250px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={item.item_name}>{item.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={item.item_number}>
+                    {item.item_number}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={item.spec || "-"}>{item.spec || "-"}</TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={item.material || "-"}>{item.material || "-"}</TableCell>
+              <TableCell className="p-2">{item.unit || "-"}</TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(item.standard_price).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/logistics/warehouse/page.tsx b/frontend/app/(main)/COMPANY_8/logistics/warehouse/page.tsx
new file mode 100644
index 00000000..96b3d47e
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/logistics/warehouse/page.tsx
@@ -0,0 +1,1608 @@
+"use client";
+
+/**
+ * 창고정보관리 — 하드코딩 페이지 (Type B 마스터-디테일)
+ *
+ * 좌측: 창고 목록 (warehouse_info)
+ * 우측: 선택 창고의 로케이션 목록 (warehouse_location)
+ *
+ * ★ 하위 위치가 있으면 창고 삭제 불가
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Plus,
+  Trash2,
+  Loader2,
+  Download,
+  MapPin,
+  Building2,
+  Settings2,
+  Layers,
+  Info,
+  Eye,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+
+const WAREHOUSE_TABLE = "warehouse_info";
+
+const WAREHOUSE_COLUMNS = [
+  { key: "warehouse_code", label: "창고코드" },
+  { key: "warehouse_name", label: "창고명" },
+  { key: "warehouse_type", label: "유형" },
+  { key: "manager", label: "관리자" },
+  { key: "status", label: "상태" },
+];
+const LOCATION_TABLE = "warehouse_location";
+
+const getStatusVariant = (
+  status: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "사용":
+    case "사용중":
+      return "default";
+    case "미사용":
+      return "secondary";
+    case "폐쇄":
+      return "destructive";
+    default:
+      return "outline";
+  }
+};
+
+const getTypeVariant = (
+  type: string
+): "default" | "secondary" | "outline" => {
+  switch (type) {
+    case "원자재":
+    case "일반":
+      return "default";
+    case "완제품":
+    case "보관":
+      return "secondary";
+    default:
+      return "outline";
+  }
+};
+
+export default function WarehouseManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-warehouse", WAREHOUSE_TABLE, WAREHOUSE_COLUMNS);
+
+  // 좌측: 창고 목록
+  const [warehouses, setWarehouses] = useState<any[]>([]);
+  const [warehouseLoading, setWarehouseLoading] = useState(false);
+  const [warehouseCount, setWarehouseCount] = useState(0);
+  const [selectedWarehouseId, setSelectedWarehouseId] = useState<string | null>(null);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 로케이션 목록
+  const [locations, setLocations] = useState<any[]>([]);
+  const [locationLoading, setLocationLoading] = useState(false);
+  const [locationCheckedIds, setLocationCheckedIds] = useState<string[]>([]);
+
+  // 모달: 창고 등록/수정
+  const [warehouseModalOpen, setWarehouseModalOpen] = useState(false);
+  const [warehouseEditMode, setWarehouseEditMode] = useState(false);
+  const [warehouseForm, setWarehouseForm] = useState<Record<string, any>>({});
+  const [warehouseSaving, setWarehouseSaving] = useState(false);
+
+  // 모달: 위치 등록/수정
+  const [locationModalOpen, setLocationModalOpen] = useState(false);
+  const [locationEditMode, setLocationEditMode] = useState(false);
+  const [locationForm, setLocationForm] = useState<Record<string, any>>({});
+  const [locationSaving, setLocationSaving] = useState(false);
+
+  // 위치코드 자동 채번
+  const [locNumberingRuleId, setLocNumberingRuleId] = useState<string | null>(null);
+  const [locPreviewCode, setLocPreviewCode] = useState<string | null>(null);
+  const [whNumberingRuleId, setWhNumberingRuleId] = useState<string | null>(null);
+  const [whPreviewCode, setWhPreviewCode] = useState<string | null>(null);
+
+  // 모달: 랙 구조 일괄 등록
+  const [rackModalOpen, setRackModalOpen] = useState(false);
+  const [rackFloor, setRackFloor] = useState("");
+  const [rackZone, setRackZone] = useState("");
+  const [rackConditions, setRackConditions] = useState<
+    { id: string; startRow: number; endRow: number; levels: number }[]
+  >([]);
+  const [rackLocationType, setRackLocationType] = useState("");
+  const [rackStatus, setRackStatus] = useState("");
+  const [rackPreview, setRackPreview] = useState<any[]>([]);
+  const [rackSaving, setRackSaving] = useState(false);
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+  const [locationCategoryOptions, setLocationCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+
+      const whOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["warehouse_type", "status"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${WAREHOUSE_TABLE}/${col}/values`
+          );
+          if (res.data?.success) whOpts[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setCategoryOptions(whOpts);
+
+      const locOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["location_type", "status", "floor", "zone"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${LOCATION_TABLE}/${col}/values`
+          );
+          if (res.data?.success) locOpts[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setLocationCategoryOptions(locOpts);
+    };
+    load();
+  }, []);
+
+  // 카테고리 코드→라벨 변환 헬퍼
+  const resolveCategory = useCallback(
+    (
+      optMap: Record<string, { code: string; label: string }[]>,
+      col: string,
+      code: string
+    ) => {
+      if (!code) return "";
+      return optMap[col]?.find((o) => o.code === code)?.label || code;
+    },
+    []
+  );
+
+  // 창고 목록 조회
+  const fetchWarehouses = useCallback(async () => {
+    setWarehouseLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(
+        `/table-management/tables/${WAREHOUSE_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+          autoFilter: true,
+          sort: { columnName: "warehouse_code", order: "asc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const data = raw.map((r: any) => ({
+        ...r,
+        warehouse_type: resolveCategory(categoryOptions, "warehouse_type", r.warehouse_type),
+        status: resolveCategory(categoryOptions, "status", r.status),
+      }));
+      setWarehouses(data);
+      setWarehouseCount(res.data?.data?.total || raw.length);
+    } catch {
+      toast.error("창고 목록을 불러오지 못했어요");
+    } finally {
+      setWarehouseLoading(false);
+    }
+  }, [categoryOptions, resolveCategory, searchFilters]);
+
+  useEffect(() => {
+    fetchWarehouses();
+  }, [fetchWarehouses]);
+
+  // 선택된 창고
+  const selectedWarehouse = warehouses.find((w) => w.id === selectedWarehouseId);
+
+  // 로케이션 조회
+  const fetchLocations = useCallback(async () => {
+    if (!selectedWarehouse?.warehouse_code) {
+      setLocations([]);
+      return;
+    }
+    setLocationLoading(true);
+    try {
+      const res = await apiClient.post(
+        `/table-management/tables/${LOCATION_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: {
+            enabled: true,
+            filters: [
+              {
+                columnName: "warehouse_code",
+                operator: "equals",
+                value: selectedWarehouse.warehouse_code,
+              },
+            ],
+          },
+          autoFilter: true,
+          sort: { columnName: "location_code", order: "asc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const data = raw.map((r: any) => ({
+        ...r,
+        location_type: resolveCategory(locationCategoryOptions, "location_type", r.location_type),
+        status: resolveCategory(locationCategoryOptions, "status", r.status),
+      }));
+      setLocations(data);
+    } catch {
+      toast.error("위치 목록을 불러오지 못했어요");
+    } finally {
+      setLocationLoading(false);
+    }
+  }, [selectedWarehouse?.warehouse_code, locationCategoryOptions, resolveCategory]);
+
+  useEffect(() => {
+    setLocationCheckedIds([]);
+    fetchLocations();
+  }, [fetchLocations]);
+
+  // 체크박스 헬퍼
+  const allLocationChecked =
+    locations.length > 0 && locationCheckedIds.length === locations.length;
+  const someLocationChecked =
+    locationCheckedIds.length > 0 && locationCheckedIds.length < locations.length;
+
+  const toggleAllLocations = (checked: boolean) => {
+    setLocationCheckedIds(checked ? locations.map((l) => l.id) : []);
+  };
+
+  const toggleLocation = (id: string, checked: boolean) => {
+    setLocationCheckedIds((prev) =>
+      checked ? [...prev, id] : prev.filter((i) => i !== id)
+    );
+  };
+
+  // ─── 창고 CRUD ───
+
+  const openWarehouseCreateModal = async () => {
+    setWarehouseEditMode(false);
+    setWarehouseForm({});
+    setWhNumberingRuleId(null);
+    setWhPreviewCode(null);
+    setWarehouseModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/warehouse_info/warehouse_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setWhNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setWhPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openWarehouseEditModal = (row: any) => {
+    setWarehouseEditMode(true);
+    setWarehouseForm({ ...row });
+    setWarehouseModalOpen(true);
+  };
+
+  const handleWarehouseSave = async () => {
+    if (!whNumberingRuleId && !warehouseForm.warehouse_code?.trim()) {
+      toast.error("창고코드를 입력해주세요");
+      return;
+    }
+    if (!warehouseForm.warehouse_name?.trim()) {
+      toast.error("창고명을 입력해주세요");
+      return;
+    }
+    setWarehouseSaving(true);
+    try {
+      let finalWarehouseCode = warehouseForm.warehouse_code?.trim() || "";
+      if (!warehouseEditMode && whNumberingRuleId) {
+        const allocRes = await allocateNumberingCode(whNumberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalWarehouseCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setWarehouseSaving(false);
+          return;
+        }
+      }
+      const fields = {
+        warehouse_code: finalWarehouseCode,
+        warehouse_name: warehouseForm.warehouse_name?.trim(),
+        warehouse_type: warehouseForm.warehouse_type || "",
+        manager: warehouseForm.manager || "",
+        address: warehouseForm.address || "",
+        status: warehouseForm.status || "",
+        description: warehouseForm.description || "",
+      };
+
+      // 신규 등록 시 창고코드 중복 체크
+      if (!warehouseEditMode) {
+        const dup = warehouses.find(w => w.warehouse_code === fields.warehouse_code);
+        if (dup) {
+          toast.error(`창고코드 "${fields.warehouse_code}"가 이미 존재해요`);
+          setWarehouseSaving(false);
+          return;
+        }
+      }
+
+      if (warehouseEditMode && warehouseForm.id) {
+        await apiClient.put(
+          `/table-management/tables/${WAREHOUSE_TABLE}/edit`,
+          {
+            originalData: { id: warehouseForm.id },
+            updatedData: fields,
+          }
+        );
+        toast.success("창고 정보가 수정되었어요");
+      } else {
+        await apiClient.post(
+          `/table-management/tables/${WAREHOUSE_TABLE}/add`,
+          { id: crypto.randomUUID(), ...fields }
+        );
+        toast.success("창고가 등록되었어요");
+      }
+      setWarehouseModalOpen(false);
+      fetchWarehouses();
+    } catch {
+      toast.error(warehouseEditMode ? "창고 수정에 실패했어요" : "창고 등록에 실패했어요");
+    } finally {
+      setWarehouseSaving(false);
+    }
+  };
+
+  const handleWarehouseDelete = async () => {
+    if (!selectedWarehouse) return;
+    if (locations.length > 0) {
+      toast.error("하위 위치가 있어 삭제할 수 없어요. 위치를 먼저 삭제해주세요.");
+      return;
+    }
+    const ok = await confirm(
+      `"${selectedWarehouse.warehouse_name}" 창고를 삭제할까요?`
+    );
+    if (!ok) return;
+    try {
+      await apiClient.delete(
+        `/table-management/tables/${WAREHOUSE_TABLE}/delete`,
+        { data: [{ id: selectedWarehouse.id }] }
+      );
+      toast.success("창고가 삭제되었어요");
+      setSelectedWarehouseId(null);
+      fetchWarehouses();
+    } catch {
+      toast.error("창고 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 위치 CRUD ───
+
+  const openLocationCreateModal = async () => {
+    setLocationEditMode(false);
+    setLocationForm({ warehouse_code: selectedWarehouse?.warehouse_code || "" });
+    setLocNumberingRuleId(null);
+    setLocPreviewCode(null);
+    setLocationModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/warehouse_location/location_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setLocNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setLocPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openLocationEditModal = (row: any) => {
+    setLocationEditMode(true);
+    setLocationForm({ ...row });
+    setLocationModalOpen(true);
+  };
+
+  const handleLocationSave = async () => {
+    if (!locNumberingRuleId && !locationForm.location_code?.trim()) {
+      toast.error("위치코드를 입력해주세요");
+      return;
+    }
+    if (!locationForm.location_name?.trim()) {
+      toast.error("위치명을 입력해주세요");
+      return;
+    }
+    setLocationSaving(true);
+    try {
+      let finalLocationCode = locationForm.location_code?.trim() || "";
+      if (!locationEditMode && locNumberingRuleId) {
+        const allocRes = await allocateNumberingCode(locNumberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalLocationCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setLocationSaving(false);
+          return;
+        }
+      }
+
+      const fields = {
+        warehouse_code: locationForm.warehouse_code || selectedWarehouse?.warehouse_code || "",
+        location_code: finalLocationCode,
+        location_name: locationForm.location_name?.trim(),
+        floor: locationForm.floor || "",
+        zone: locationForm.zone || "",
+        row_num: locationForm.row_num || "",
+        level_num: locationForm.level_num || "",
+        location_type: locationForm.location_type || "",
+        status: locationForm.status || "",
+      };
+
+      if (locationEditMode && locationForm.id) {
+        await apiClient.put(
+          `/table-management/tables/${LOCATION_TABLE}/edit`,
+          {
+            originalData: { id: locationForm.id },
+            updatedData: fields,
+          }
+        );
+        toast.success("위치 정보가 수정되었어요");
+      } else {
+        await apiClient.post(
+          `/table-management/tables/${LOCATION_TABLE}/add`,
+          { id: crypto.randomUUID(), ...fields }
+        );
+        toast.success("위치가 등록되었어요");
+      }
+      setLocationModalOpen(false);
+      fetchLocations();
+    } catch {
+      toast.error(locationEditMode ? "위치 수정에 실패했어요" : "위치 등록에 실패했어요");
+    } finally {
+      setLocationSaving(false);
+    }
+  };
+
+  const handleLocationDelete = async () => {
+    if (locationCheckedIds.length === 0) {
+      toast.error("삭제할 위치를 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`${locationCheckedIds.length}건의 위치를 삭제할까요?`);
+    if (!ok) return;
+    try {
+      for (const id of locationCheckedIds) {
+        await apiClient.delete(
+          `/table-management/tables/${LOCATION_TABLE}/delete`,
+          { data: [{ id }] }
+        );
+      }
+      toast.success(`${locationCheckedIds.length}건의 위치가 삭제되었어요`);
+      setLocationCheckedIds([]);
+      fetchLocations();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "위치 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 랙 구조 일괄 등록 ───
+
+  const openRackModal = () => {
+    setRackFloor("");
+    setRackZone("");
+    setRackConditions([]);
+    setRackLocationType("");
+    setRackStatus("");
+    setRackPreview([]);
+    setRackSaving(false);
+    setRackModalOpen(true);
+  };
+
+  const addRackCondition = () => {
+    const lastEnd = rackConditions.length > 0
+      ? rackConditions[rackConditions.length - 1].endRow
+      : 0;
+    setRackConditions((prev) => [
+      ...prev,
+      { id: crypto.randomUUID(), startRow: lastEnd + 1, endRow: lastEnd + 1, levels: 1 },
+    ]);
+  };
+
+  const updateRackCondition = (id: string, field: string, value: number) => {
+    setRackConditions((prev) =>
+      prev.map((c) => (c.id === id ? { ...c, [field]: value } : c))
+    );
+  };
+
+  const removeRackCondition = (id: string) => {
+    setRackConditions((prev) => prev.filter((c) => c.id !== id));
+  };
+
+  const generateRackPreview = () => {
+    if (!rackFloor.trim() || !rackZone.trim()) {
+      toast.error("층과 구역을 입력해주세요");
+      return;
+    }
+    if (rackConditions.length === 0) {
+      toast.error("조건을 1개 이상 추가해주세요");
+      return;
+    }
+    // 조건 유효성 검사
+    for (const cond of rackConditions) {
+      if (cond.startRow < 1 || cond.endRow < 1 || cond.levels < 1) {
+        toast.error("열 범위와 단 수는 1 이상이어야 합니다");
+        return;
+      }
+      if (cond.endRow < cond.startRow) {
+        toast.error("끝 열은 시작 열보다 크거나 같아야 합니다");
+        return;
+      }
+    }
+
+    const whCode = selectedWarehouse?.warehouse_code || "";
+    // 카테고리 코드→라벨 변환 (셀렉트에서 코드가 저장되므로)
+    const floorOpts = locationCategoryOptions["floor"] || [];
+    const zoneOpts = locationCategoryOptions["zone"] || [];
+    const floorLabel = floorOpts.find(o => o.code === rackFloor)?.label || rackFloor.trim();
+    const zoneLabel = zoneOpts.find(o => o.code === rackZone)?.label || rackZone.trim();
+    const floorCode = floorLabel.replace(/층$/, "");
+    const zoneCode = zoneLabel.replace(/구역$/, "");
+
+    // 기존 위치코드 Set (중복 체크용)
+    const existingCodes = new Set(locations.map((l: any) => l.location_code));
+    const seen = new Set<string>();
+    const items: any[] = [];
+    const duplicates: string[] = [];
+
+    for (const cond of rackConditions) {
+      for (let row = cond.startRow; row <= cond.endRow; row++) {
+        for (let level = 1; level <= cond.levels; level++) {
+          const rowStr = String(row).padStart(2, "0");
+          const locationCode = `${whCode}-${floorCode}${zoneCode}-${rowStr}-${level}`;
+          // 미리보기 내부 중복 제거
+          if (seen.has(locationCode)) continue;
+          seen.add(locationCode);
+          // 기존 DB 데이터와 중복 체크
+          if (existingCodes.has(locationCode)) {
+            duplicates.push(locationCode);
+            continue;
+          }
+          const locationName = `${zoneCode}구역-${rowStr}열-${level}단`;
+          items.push({
+            location_code: locationCode,
+            location_name: locationName,
+            warehouse_code: whCode,
+            floor: floorLabel,
+            zone: zoneLabel,
+            row_num: String(row),
+            level_num: String(level),
+            location_type: rackLocationType,
+            status: rackStatus,
+          });
+        }
+      }
+    }
+    if (duplicates.length > 0) {
+      toast.error(`이미 등록된 위치 ${duplicates.length}건이 제외되었어요 (예: ${duplicates.slice(0, 3).join(", ")})`);
+    }
+    setRackPreview(items);
+  };
+
+  const handleRackBulkSave = async () => {
+    if (rackPreview.length === 0) {
+      toast.error("미리보기를 먼저 생성해주세요");
+      return;
+    }
+    setRackSaving(true);
+    try {
+      let successCount = 0;
+      for (const item of rackPreview) {
+        await apiClient.post(
+          `/table-management/tables/${LOCATION_TABLE}/add`,
+          { id: crypto.randomUUID(), ...item }
+        );
+        successCount++;
+      }
+      toast.success(`${successCount}개의 위치가 등록되었어요`);
+      setRackModalOpen(false);
+      fetchLocations();
+    } catch (err) {
+      toast.error("일괄 등록 중 오류가 발생했어요");
+    } finally {
+      setRackSaving(false);
+    }
+  };
+
+  // 랙 조건별 통계
+  const getRackConditionCount = (cond: { startRow: number; endRow: number; levels: number }) => {
+    if (cond.endRow < cond.startRow || cond.startRow < 1 || cond.levels < 1) return 0;
+    return (cond.endRow - cond.startRow + 1) * cond.levels;
+  };
+
+  // 랙 미리보기 통계
+  const rackStats = {
+    totalLocations: rackPreview.length,
+    totalRows: rackConditions.reduce((acc, c) => {
+      if (c.endRow >= c.startRow && c.startRow >= 1) return acc + (c.endRow - c.startRow + 1);
+      return acc;
+    }, 0),
+    maxLevels: rackConditions.reduce((acc, c) => Math.max(acc, c.levels || 0), 0),
+  };
+
+  // EDataTable 컬럼 정의
+  const warehouseColumns: EDataTableColumn[] = ts.visibleColumns.map((col) => {
+    const base: EDataTableColumn = { key: col.key, label: col.label };
+    if (col.key === "warehouse_type") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getTypeVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    if (col.key === "status") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getStatusVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    return base;
+  });
+
+  // 엑셀 내보내기
+  const handleExcelExport = () => {
+    if (warehouses.length === 0) {
+      toast.error("내보낼 데이터가 없어요");
+      return;
+    }
+    exportToExcel(
+      warehouses.map((r) => ({
+        창고코드: r.warehouse_code,
+        창고명: r.warehouse_name,
+        유형: r.warehouse_type,
+        관리자: r.manager,
+        상태: r.status,
+      })),
+      "창고정보"
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={WAREHOUSE_TABLE}
+        filterId="c16-warehouse"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={warehouses.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1 text-xs"
+              onClick={handleExcelExport}
+            >
+              <Download className="h-3.5 w-3.5" />
+              엑셀
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 패널 */}
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="flex-1 rounded-lg border bg-card"
+      >
+        {/* 좌측: 창고 목록 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+              <div className="flex items-center gap-2">
+                <span className="text-[13px] font-bold">창고 목록</span>
+                <Badge variant="default" className="rounded-full text-[11px]">
+                  {warehouses.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Button
+                  size="sm"
+                  className="h-7 gap-1 text-xs"
+                  onClick={openWarehouseCreateModal}
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                  등록
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-7 gap-1 text-xs text-destructive hover:text-destructive"
+                  onClick={handleWarehouseDelete}
+                  disabled={!selectedWarehouse}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+
+            <EDataTable
+              columns={warehouseColumns}
+              data={ts.groupData(warehouses)}
+              rowKey={(row) => row.id}
+              loading={warehouseLoading}
+              emptyMessage="등록된 창고가 없어요"
+              selectedId={selectedWarehouseId}
+              onSelect={(id) => setSelectedWarehouseId(id)}
+              onRowDoubleClick={(row) => openWarehouseEditModal(row)}
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+              columnOrderKey="c16-warehouse"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 로케이션 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex flex-col h-full">
+            {!selectedWarehouse ? (
+              <div className="flex flex-col items-center justify-center flex-1 m-5 border-2 border-dashed rounded-lg border-border">
+                <Building2 className="h-12 w-12 text-muted-foreground/40 mb-4" />
+                <p className="text-sm font-semibold text-muted-foreground">
+                  창고를 선택해주세요
+                </p>
+                <p className="text-xs text-muted-foreground/70 mt-1">
+                  좌측에서 창고를 선택하면 위치 정보가 표시돼요
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                  <div className="flex items-center gap-2">
+                    <MapPin className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-[13px] font-bold">
+                      {selectedWarehouse.warehouse_name}
+                    </span>
+                    <Badge
+                      variant="outline"
+                      className="rounded-full text-[11px] font-mono"
+                    >
+                      {selectedWarehouse.warehouse_code}
+                    </Badge>
+                    <Badge variant="secondary" className="rounded-full text-[10px]">
+                      {locations.length}개 위치
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={openRackModal}
+                    >
+                      <Layers className="h-3.5 w-3.5" />
+                      랙 구조 등록
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs text-destructive hover:text-destructive"
+                      onClick={handleLocationDelete}
+                      disabled={locationCheckedIds.length === 0}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                      삭제
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 로케이션 테이블 */}
+                <div className="flex-1 overflow-auto">
+                  {locationLoading ? (
+                    <div className="flex items-center justify-center h-32">
+                      <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : locations.length === 0 ? (
+                    <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">
+                      등록된 위치가 없어요
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="w-10 text-center">
+                            <Checkbox
+                              checked={
+                                someLocationChecked
+                                  ? "indeterminate"
+                                  : allLocationChecked
+                              }
+                              onCheckedChange={(v) =>
+                                toggleAllLocations(v === true)
+                              }
+                              aria-label="전체 선택"
+                            />
+                          </TableHead>
+                          <TableHead className="w-8 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">위치코드</TableHead>
+                          <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">위치명</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">층</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">구역</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">열</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {locations.map((loc, idx) => (
+                          <TableRow
+                            key={loc.id}
+                            className={cn(
+                              "cursor-pointer text-xs",
+                              locationCheckedIds.includes(loc.id) && "bg-primary/5"
+                            )}
+                            onDoubleClick={() => openLocationEditModal(loc)}
+                          >
+                            <TableCell className="text-center">
+                              <Checkbox
+                                checked={locationCheckedIds.includes(loc.id)}
+                                onCheckedChange={(v) =>
+                                  toggleLocation(loc.id, v === true)
+                                }
+                                aria-label="행 선택"
+                              />
+                            </TableCell>
+                            <TableCell className="text-center text-muted-foreground">
+                              {idx + 1}
+                            </TableCell>
+                            <TableCell className="font-mono truncate max-w-[110px]">
+                              {loc.location_code}
+                            </TableCell>
+                            <TableCell className="truncate max-w-[120px]">
+                              {loc.location_name}
+                            </TableCell>
+                            <TableCell className="text-center">{loc.floor}</TableCell>
+                            <TableCell>{loc.zone}</TableCell>
+                            <TableCell className="text-center">{loc.row_num}</TableCell>
+                            <TableCell className="text-center">{loc.level_num}</TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getTypeVariant(loc.location_type)}
+                                className="text-[10px]"
+                              >
+                                {loc.location_type}
+                              </Badge>
+                            </TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getStatusVariant(loc.status)}
+                                className="text-[10px]"
+                              >
+                                {loc.status}
+                              </Badge>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 창고 등록/수정 Dialog */}
+      <Dialog open={warehouseModalOpen} onOpenChange={setWarehouseModalOpen}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle>
+              {warehouseEditMode ? "창고 수정" : "창고 등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {warehouseEditMode
+                ? "창고 정보를 수정해주세요"
+                : "새로운 창고를 등록해주세요"}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid grid-cols-2 gap-4 py-2">
+            {/* 창고코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                창고코드 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={warehouseEditMode ? (warehouseForm.warehouse_code || "") : (whPreviewCode || "")}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_code: e.target.value }))
+                }
+                placeholder={warehouseEditMode ? "" : (whNumberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                disabled={warehouseEditMode}
+                readOnly={!warehouseEditMode && !!whNumberingRuleId}
+              />
+            </div>
+            {/* 창고명 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                창고명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={warehouseForm.warehouse_name || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_name: e.target.value }))
+                }
+                placeholder="창고명을 입력해주세요"
+              />
+            </div>
+            {/* 유형 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">유형</Label>
+              <Select
+                value={warehouseForm.warehouse_type || ""}
+                onValueChange={(v) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["warehouse_type"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">관리자</Label>
+              <Input
+                value={warehouseForm.manager || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, manager: e.target.value }))
+                }
+                placeholder="관리자를 입력해주세요"
+              />
+            </div>
+            {/* 상태 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+              <Select
+                value={warehouseForm.status || ""}
+                onValueChange={(v) =>
+                  setWarehouseForm((prev) => ({ ...prev, status: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["status"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 주소 (전체 너비) */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">주소</Label>
+              <Input
+                value={warehouseForm.address || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, address: e.target.value }))
+                }
+                placeholder="주소를 입력해주세요"
+              />
+            </div>
+            {/* 비고 (전체 너비) */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">비고</Label>
+              <Input
+                value={warehouseForm.description || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, description: e.target.value }))
+                }
+                placeholder="비고를 입력해주세요"
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setWarehouseModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleWarehouseSave} disabled={warehouseSaving}>
+              {warehouseSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              {warehouseEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 위치 등록/수정 Dialog */}
+      <Dialog open={locationModalOpen} onOpenChange={setLocationModalOpen}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle>
+              {locationEditMode ? "위치 수정" : "위치 등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {locationEditMode
+                ? "위치 정보를 수정해주세요"
+                : `${selectedWarehouse?.warehouse_name || ""} 창고에 새 위치를 등록해주세요`}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid grid-cols-2 gap-4 py-2">
+            {/* 창고코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">창고코드</Label>
+              <Input value={locationForm.warehouse_code || ""} disabled />
+            </div>
+            {/* 위치코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                위치코드 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={locationEditMode ? (locationForm.location_code || "") : (locPreviewCode || "")}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, location_code: e.target.value }))
+                }
+                placeholder={locationEditMode ? "" : (locNumberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                disabled={locationEditMode}
+                readOnly={!locationEditMode && !!locNumberingRuleId}
+              />
+            </div>
+            {/* 위치명 */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                위치명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={locationForm.location_name || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, location_name: e.target.value }))
+                }
+                placeholder="위치명을 입력해주세요"
+              />
+            </div>
+            {/* 층 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">층</Label>
+              <Input
+                value={locationForm.floor || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, floor: e.target.value }))
+                }
+                placeholder="층을 입력해주세요"
+              />
+            </div>
+            {/* 구역 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">구역</Label>
+              <Input
+                value={locationForm.zone || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, zone: e.target.value }))
+                }
+                placeholder="구역을 입력해주세요"
+              />
+            </div>
+            {/* 열 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">열</Label>
+              <Input
+                value={locationForm.row_num || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, row_num: e.target.value }))
+                }
+                placeholder="열을 입력해주세요"
+              />
+            </div>
+            {/* 단 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">단</Label>
+              <Input
+                value={locationForm.level_num || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, level_num: e.target.value }))
+                }
+                placeholder="단을 입력해주세요"
+              />
+            </div>
+            {/* 위치유형 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">위치유형</Label>
+              <Select
+                value={locationForm.location_type || ""}
+                onValueChange={(v) =>
+                  setLocationForm((prev) => ({ ...prev, location_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="위치유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(locationCategoryOptions["location_type"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 상태 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+              <Select
+                value={locationForm.status || ""}
+                onValueChange={(v) =>
+                  setLocationForm((prev) => ({ ...prev, status: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(locationCategoryOptions["status"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setLocationModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleLocationSave} disabled={locationSaving}>
+              {locationSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              {locationEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 랙 구조 일괄 등록 Dialog */}
+      <Dialog open={rackModalOpen} onOpenChange={setRackModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-3xl p-0 !gap-0" style={{ maxHeight: "90vh", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+          <div className="px-6 pt-6 pb-3 shrink-0">
+            <DialogTitle className="flex items-center gap-2">
+              <Layers className="h-5 w-5" />
+              랙 구조 일괄 등록
+            </DialogTitle>
+            <DialogDescription className="mt-1">
+              {selectedWarehouse?.warehouse_name} ({selectedWarehouse?.warehouse_code}) 창고에 랙 구조를 일괄 등록합니다
+            </DialogDescription>
+          </div>
+
+          <div className="flex-1 overflow-y-auto min-h-0">
+            <div className="space-y-6 px-6 py-4">
+              {/* 기본 정보 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  📍 기본 정보
+                </h3>
+                <div className="grid grid-cols-3 gap-4">
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      창고 <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      value={`${selectedWarehouse?.warehouse_name || ""} (${selectedWarehouse?.warehouse_code || ""})`}
+                      disabled
+                    />
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      층 <span className="text-destructive">*</span>
+                    </Label>
+                    {(locationCategoryOptions["floor"] || []).length > 0 ? (
+                      <Select value={rackFloor} onValueChange={setRackFloor}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="층 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(locationCategoryOptions["floor"] || []).map((o) => (
+                            <SelectItem key={o.code} value={o.code}>
+                              {o.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={rackFloor}
+                        onChange={(e) => setRackFloor(e.target.value)}
+                        placeholder="예: B1, 1F, 2F"
+                      />
+                    )}
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      구역 <span className="text-destructive">*</span>
+                    </Label>
+                    {(locationCategoryOptions["zone"] || []).length > 0 ? (
+                      <Select value={rackZone} onValueChange={setRackZone}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="구역 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(locationCategoryOptions["zone"] || []).map((o) => (
+                            <SelectItem key={o.code} value={o.code}>
+                              {o.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={rackZone}
+                        onChange={(e) => setRackZone(e.target.value)}
+                        placeholder="예: A, B, C"
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* 랙 라인 구조 설정 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  📊 랙 라인 구조 설정
+                </h3>
+
+                {/* 안내 박스 */}
+                <div className="rounded-lg bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 p-3 mb-3">
+                  <div className="flex items-start gap-2">
+                    <Info className="h-4 w-4 text-blue-600 dark:text-blue-400 mt-0.5 shrink-0" />
+                    <div className="text-xs text-blue-700 dark:text-blue-300 space-y-0.5">
+                      <p>1. 조건 추가 버튼을 클릭하여 랙 라인 조건을 생성하세요</p>
+                      <p>2. 각 조건마다 열 범위와 단 수를 입력하세요</p>
+                      <p>3. 예시: 조건1(1~3열, 3단), 조건2(4~6열, 5단)</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-xs text-muted-foreground">
+                    {rackConditions.length}개 조건
+                  </span>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={addRackCondition}
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    조건 추가
+                  </Button>
+                </div>
+
+                {rackConditions.length === 0 ? (
+                  <div className="flex flex-col items-center justify-center py-8 border-2 border-dashed rounded-lg border-border">
+                    <Layers className="h-8 w-8 text-muted-foreground/40 mb-2" />
+                    <p className="text-sm text-muted-foreground mb-2">
+                      조건을 추가하여 랙 구조를 설정하세요
+                    </p>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={addRackCondition}
+                    >
+                      <Plus className="h-3.5 w-3.5" />
+                      첫 번째 조건 추가
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {rackConditions.map((cond, idx) => (
+                      <div
+                        key={cond.id}
+                        className="flex items-center gap-3 rounded-lg border p-3 bg-card"
+                      >
+                        <span className="text-xs font-bold text-muted-foreground w-10 shrink-0">
+                          조건{idx + 1}
+                        </span>
+                        <div className="flex items-center gap-1.5 flex-1">
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-20 text-center text-xs"
+                            value={cond.startRow || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "startRow", Number(e.target.value) || 0)
+                            }
+                            placeholder="시작"
+                          />
+                          <span className="text-xs text-muted-foreground">~</span>
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-20 text-center text-xs"
+                            value={cond.endRow || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "endRow", Number(e.target.value) || 0)
+                            }
+                            placeholder="끝"
+                          />
+                          <span className="text-xs text-muted-foreground">열,</span>
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-16 text-center text-xs"
+                            value={cond.levels || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "levels", Number(e.target.value) || 0)
+                            }
+                            placeholder="단"
+                          />
+                          <span className="text-xs text-muted-foreground">단</span>
+                        </div>
+                        {getRackConditionCount(cond) > 0 && (
+                          <Badge variant="secondary" className="text-[10px] shrink-0">
+                            {cond.startRow}열 ~ {cond.endRow}열 × {cond.levels}단 = {getRackConditionCount(cond)}개
+                          </Badge>
+                        )}
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-7 w-7 p-0 text-destructive hover:text-destructive shrink-0"
+                          onClick={() => removeRackCondition(cond.id)}
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* 공통 설정 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  ⚙️ 공통 설정
+                </h3>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      위치 유형
+                    </Label>
+                    <Select value={rackLocationType} onValueChange={setRackLocationType}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="위치유형 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(locationCategoryOptions["location_type"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>
+                            {o.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      사용 여부
+                    </Label>
+                    <Select value={rackStatus} onValueChange={setRackStatus}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="상태 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(locationCategoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>
+                            {o.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+
+              {/* 등록 미리보기 */}
+              <div>
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-sm font-bold flex items-center gap-1.5">
+                    👁️ 등록 미리보기
+                  </h3>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={generateRackPreview}
+                  >
+                    <Eye className="h-3.5 w-3.5" />
+                    미리보기 생성
+                  </Button>
+                </div>
+
+                {rackPreview.length > 0 && (
+                  <>
+                    {/* 통계 카드 */}
+                    <div className="grid grid-cols-3 gap-3 mb-3">
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">총 위치</p>
+                        <p className="text-lg font-bold">{rackStats.totalLocations}개</p>
+                      </div>
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">열 수</p>
+                        <p className="text-lg font-bold">{rackStats.totalRows}개</p>
+                      </div>
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">최대 단</p>
+                        <p className="text-lg font-bold">{rackStats.maxLevels}</p>
+                      </div>
+                    </div>
+
+                    {/* 미리보기 테이블 */}
+                    <div className="rounded-lg border overflow-hidden max-h-[300px] overflow-y-auto">
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-10 text-center text-[11px] font-bold text-muted-foreground">No</TableHead>
+                            <TableHead className="text-[11px] font-bold text-muted-foreground">위치코드</TableHead>
+                            <TableHead className="text-[11px] font-bold text-muted-foreground">위치명</TableHead>
+                            <TableHead className="w-14 text-center text-[11px] font-bold text-muted-foreground">층</TableHead>
+                            <TableHead className="w-14 text-center text-[11px] font-bold text-muted-foreground">구역</TableHead>
+                            <TableHead className="w-12 text-center text-[11px] font-bold text-muted-foreground">열</TableHead>
+                            <TableHead className="w-12 text-center text-[11px] font-bold text-muted-foreground">단</TableHead>
+                            <TableHead className="w-16 text-[11px] font-bold text-muted-foreground">유형</TableHead>
+                            <TableHead className="w-16 text-[11px] font-bold text-muted-foreground">비고</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {rackPreview.map((item, idx) => (
+                            <TableRow key={idx} className="text-xs">
+                              <TableCell className="text-center text-muted-foreground">
+                                {idx + 1}
+                              </TableCell>
+                              <TableCell className="font-mono">{item.location_code}</TableCell>
+                              <TableCell>{item.location_name}</TableCell>
+                              <TableCell className="text-center">{item.floor}</TableCell>
+                              <TableCell className="text-center">{item.zone}</TableCell>
+                              <TableCell className="text-center">{item.row_num}</TableCell>
+                              <TableCell className="text-center">{item.level_num}</TableCell>
+                              <TableCell>
+                                {resolveCategory(locationCategoryOptions, "location_type", item.location_type) || "-"}
+                              </TableCell>
+                              <TableCell>-</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </>
+                )}
+
+                {rackPreview.length === 0 && (
+                  <div className="flex flex-col items-center justify-center py-6 border-2 border-dashed rounded-lg border-border text-sm text-muted-foreground">
+                    위의 설정을 완료한 뒤 미리보기 생성 버튼을 클릭하세요
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2 px-6 py-4 border-t shrink-0 bg-background">
+            <Button variant="outline" onClick={() => setRackModalOpen(false)}>
+              취소
+            </Button>
+            <Button
+              onClick={handleRackBulkSave}
+              disabled={rackSaving || rackPreview.length === 0}
+            >
+              {rackSaving && <Loader2 className="h-4 w-4 animate-spin mr-1" />}
+              일괄 등록 ({rackPreview.length}건)
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/master-data/company/page.tsx b/frontend/app/(main)/COMPANY_8/master-data/company/page.tsx
new file mode 100644
index 00000000..9d7f2dea
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/master-data/company/page.tsx
@@ -0,0 +1,759 @@
+"use client";
+
+/**
+ * 회사관리 — Type D 탭 멀티뷰 (2탭)
+ *
+ * Tab 1: 회사정보 (company_mng 단일 레코드 폼)
+ * Tab 2: 부서관리 (dept_info 트리 + user_info 목록)
+ */
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Building2, Users, Pencil, Save, Loader2, Plus, Trash2,
+  Upload, X, Image as ImageIcon, ChevronRight, FolderOpen, Folder,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import * as departmentAPI from "@/lib/api/department";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { formatField, validateField, validateForm } from "@/lib/utils/validation";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const COMPANY_TABLE = "company_mng";
+const DEPT_TABLE = "dept_info";
+const USER_TABLE = "user_info";
+
+/* ── 트리 노드 타입 ── */
+interface DeptNode {
+  dept_code: string;
+  dept_name: string;
+  parent_dept_code: string | null;
+  status?: string;
+  children: DeptNode[];
+}
+
+export default function CompanyPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  /* ===================== Tab 1: 회사정보 ===================== */
+  const [companyData, setCompanyData] = useState<Record<string, any>>({});
+  const [companyForm, setCompanyForm] = useState<Record<string, any>>({});
+  const [companyLoading, setCompanyLoading] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  // 이미지 업로드 refs
+  const imageRef = useRef<HTMLInputElement>(null);
+  const logoRef = useRef<HTMLInputElement>(null);
+  const sealRef = useRef<HTMLInputElement>(null);
+
+  // 이미지 미리보기
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [logoPreview, setLogoPreview] = useState<string | null>(null);
+  const [sealPreview, setSealPreview] = useState<string | null>(null);
+
+  const fetchCompany = useCallback(async () => {
+    setCompanyLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${COMPANY_TABLE}/data`, {
+        page: 1, size: 1, autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      if (rows.length > 0) {
+        setCompanyData(rows[0]);
+        setCompanyForm(rows[0]);
+        if (rows[0].company_image) setImagePreview(rows[0].company_image);
+        if (rows[0].company_logo) setLogoPreview(rows[0].company_logo);
+        if (rows[0].company_seal) setSealPreview(rows[0].company_seal);
+      }
+    } catch {
+      toast.error("회사 정보를 불러오는데 실패했어요.");
+    } finally {
+      setCompanyLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchCompany(); }, [fetchCompany]);
+
+  const handleImageUpload = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    field: string,
+    setPreview: React.Dispatch<React.SetStateAction<string | null>>,
+  ) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result as string;
+      setPreview(result);
+      setCompanyForm((prev) => ({ ...prev, [field]: result }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleCompanySave = async () => {
+    if (!companyForm.company_name) {
+      toast.error("회사명은 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_at, updated_at, writer, created_date, updated_date, regdate, company_code, ...updatedData } = companyForm;
+
+      if (companyData.company_code) {
+        await apiClient.put(`/table-management/tables/${COMPANY_TABLE}/edit`, {
+          originalData: { company_code: companyData.company_code },
+          updatedData,
+        });
+      } else {
+        await apiClient.post(`/table-management/tables/${COMPANY_TABLE}/add`, { company_code, ...updatedData });
+      }
+      toast.success("회사 정보가 저장되었어요.");
+      setEditMode(false);
+      fetchCompany();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const cancelEdit = () => {
+    setCompanyForm(companyData);
+    setImagePreview(companyData.company_image || null);
+    setLogoPreview(companyData.company_logo || null);
+    setSealPreview(companyData.company_seal || null);
+    setEditMode(false);
+  };
+
+  /* ===================== Tab 2: 부서관리 ===================== */
+  const [depts, setDepts] = useState<any[]>([]);
+  const [deptTree, setDeptTree] = useState<DeptNode[]>([]);
+  const [deptLoading, setDeptLoading] = useState(false);
+  const [selectedDeptCode, setSelectedDeptCode] = useState<string | null>(null);
+  const [expandedDepts, setExpandedDepts] = useState<Set<string>>(new Set());
+
+  // 사원
+  const [members, setMembers] = useState<any[]>([]);
+  const [memberLoading, setMemberLoading] = useState(false);
+
+  // 부서 모달
+  const [deptModalOpen, setDeptModalOpen] = useState(false);
+  const [deptEditMode, setDeptEditMode] = useState(false);
+  const [deptForm, setDeptForm] = useState<Record<string, any>>({});
+  const [deptSaving, setDeptSaving] = useState(false);
+
+  // 채번
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 사원 모달
+  const [userModalOpen, setUserModalOpen] = useState(false);
+  const [userEditMode, setUserEditMode] = useState(false);
+  const [userForm, setUserForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+
+  // 트리 구성
+  const buildTree = (flatDepts: any[]): DeptNode[] => {
+    const map: Record<string, DeptNode> = {};
+    const roots: DeptNode[] = [];
+    flatDepts.forEach((d) => {
+      map[d.dept_code] = { ...d, children: [] };
+    });
+    flatDepts.forEach((d) => {
+      const node = map[d.dept_code];
+      if (d.parent_dept_code && map[d.parent_dept_code]) {
+        map[d.parent_dept_code].children.push(node);
+      } else {
+        roots.push(node);
+      }
+    });
+    return roots;
+  };
+
+  const fetchDepts = useCallback(async () => {
+    setDeptLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DEPT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setDepts(raw);
+      setDeptTree(buildTree(raw));
+      // 전부 펼치기
+      setExpandedDepts(new Set(raw.map((d: any) => d.dept_code)));
+    } catch {
+      toast.error("부서 목록을 불러오는데 실패했어요.");
+    } finally {
+      setDeptLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchDepts(); }, [fetchDepts]);
+
+  const selectedDept = depts.find((d) => d.dept_code === selectedDeptCode);
+
+  // 사원 조회
+  const fetchMembers = useCallback(async () => {
+    if (!selectedDeptCode) { setMembers([]); return; }
+    setMemberLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${USER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "dept_code", operator: "equals", value: selectedDeptCode }] },
+        autoFilter: true,
+      });
+      setMembers(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setMembers([]); } finally { setMemberLoading(false); }
+  }, [selectedDeptCode]);
+
+  useEffect(() => { fetchMembers(); }, [fetchMembers]);
+
+  // 트리 토글
+  const toggleExpand = (code: string) => {
+    setExpandedDepts((prev) => {
+      const next = new Set(prev);
+      if (next.has(code)) next.delete(code); else next.add(code);
+      return next;
+    });
+  };
+
+  // 부서 등록
+  const openDeptRegister = async () => {
+    setDeptForm({});
+    setDeptEditMode(false);
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setDeptModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/dept_info/dept_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openDeptEdit = () => {
+    if (!selectedDept) return;
+    setDeptForm({ ...selectedDept });
+    setDeptEditMode(true);
+    setDeptModalOpen(true);
+  };
+
+  const handleDeptSave = async () => {
+    if (!deptForm.dept_name) { toast.error("부서명은 필수예요."); return; }
+    const parentCode = (deptForm.parent_dept_code && deptForm.parent_dept_code !== "none") ? deptForm.parent_dept_code : null;
+    setDeptSaving(true);
+    try {
+      if (deptEditMode && deptForm.dept_code) {
+        const response = await departmentAPI.updateDepartment(deptForm.dept_code, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "수정에 실패했어요."); return; }
+        toast.success("수정되었어요.");
+      } else {
+        const companyCode = user?.companyCode || "";
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else { toast.error("채번 코드 할당에 실패했어요."); return; }
+        }
+        const response = await departmentAPI.createDepartment(companyCode, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+          dept_code: allocatedCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "등록에 실패했어요."); return; }
+        toast.success("등록되었어요.");
+      }
+      setDeptModalOpen(false);
+      fetchDepts();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setDeptSaving(false);
+    }
+  };
+
+  const handleDeptDelete = async () => {
+    if (!selectedDeptCode) return;
+    const ok = await confirm("부서를 삭제할까요?", {
+      description: "해당 부서에 소속된 사원 정보는 유지돼요.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      const response = await departmentAPI.deleteDepartment(selectedDeptCode);
+      if (!response.success) { toast.error((response as any).error || "삭제에 실패했어요."); return; }
+      toast.success((response as any).message || "삭제되었어요.");
+      setSelectedDeptCode(null);
+      fetchDepts();
+    } catch { toast.error("삭제에 실패했어요."); }
+  };
+
+  // 사원 추가/수정
+  const openUserModal = (editData?: any) => {
+    if (editData) {
+      setUserEditMode(true);
+      setUserForm({ ...editData, user_password: "" });
+    } else {
+      setUserEditMode(false);
+      setUserForm({ dept_code: selectedDeptCode || "", user_password: "" });
+    }
+    setFormErrors({});
+    setUserModalOpen(true);
+  };
+
+  const handleUserFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setUserForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => { const n = { ...prev }; if (error) n[field] = error; else delete n[field]; return n; });
+  };
+
+  const handleUserSave = async () => {
+    if (!userForm.user_id) { toast.error("사용자 ID는 필수예요."); return; }
+    if (!userForm.user_name) { toast.error("사용자 이름은 필수예요."); return; }
+    if (!userForm.dept_code) { toast.error("부서는 필수예요."); return; }
+    const errors = validateForm(userForm, ["cell_phone", "email"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) { toast.error("입력 형식을 확인해주세요."); return; }
+    setDeptSaving(true);
+    try {
+      const password = userForm.user_password || (!userEditMode ? "qlalfqjsgh11" : undefined);
+      await apiClient.post("/admin/users/with-dept", {
+        userInfo: {
+          user_id: userForm.user_id,
+          user_name: userForm.user_name,
+          user_name_eng: userForm.user_name_eng || undefined,
+          user_password: password || undefined,
+          email: userEditMode ? (userForm.email || null) : (userForm.email || undefined),
+          tel: userForm.tel || undefined,
+          cell_phone: userEditMode ? (userForm.cell_phone || null) : (userForm.cell_phone || undefined),
+          sabun: userEditMode ? (userForm.sabun || null) : (userForm.sabun || undefined),
+          position_name: userForm.position_name || undefined,
+          dept_code: userForm.dept_code || undefined,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name || undefined,
+          status: userForm.status || "active",
+        },
+        mainDept: userForm.dept_code ? {
+          dept_code: userForm.dept_code,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name,
+          position_name: userForm.position_name || undefined,
+        } : undefined,
+        isUpdate: userEditMode,
+      });
+      toast.success(userEditMode ? "사원 정보가 수정되었어요." : "사원이 추가되었어요.");
+      setUserModalOpen(false);
+      fetchMembers();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setDeptSaving(false);
+    }
+  };
+
+  // EDataTable 컬럼 정의 (사원 목록)
+  const companyMemberColumns: EDataTableColumn[] = [
+    { key: "sabun", label: "사번", width: "w-[80px]", render: (val: any) => <span className="text-[13px]">{val || "-"}</span> },
+    { key: "user_name", label: "이름", width: "w-[90px]" },
+    { key: "user_id", label: "사용자ID", width: "w-[100px]" },
+    { key: "position_name", label: "직급", width: "w-[80px]", render: (val: any) => <span>{val || "-"}</span> },
+    { key: "cell_phone", label: "휴대폰", width: "w-[120px]", render: (val: any) => <span>{val || "-"}</span> },
+    { key: "email", label: "이메일" },
+  ];
+
+  /* ── 트리 렌더 ── */
+  const renderTree = (nodes: DeptNode[], depth = 0) => {
+    return nodes.map((node) => {
+      const isExpanded = expandedDepts.has(node.dept_code);
+      const isSelected = selectedDeptCode === node.dept_code;
+      const hasChildren = node.children.length > 0;
+      return (
+        <div key={node.dept_code}>
+          <div
+            className={cn(
+              "flex items-center gap-1.5 px-3 py-2 cursor-pointer text-sm transition-colors hover:bg-accent",
+              isSelected && "bg-primary/10 text-primary font-semibold border-l-2 border-primary",
+              !isSelected && "border-l-2 border-transparent",
+            )}
+            style={{ paddingLeft: `${12 + depth * 20}px` }}
+            onClick={() => setSelectedDeptCode(isSelected ? null : node.dept_code)}
+          >
+            {hasChildren ? (
+              <button
+                className="p-0.5 rounded hover:bg-accent"
+                onClick={(e) => { e.stopPropagation(); toggleExpand(node.dept_code); }}
+              >
+                <ChevronRight className={cn("w-3.5 h-3.5 transition-transform", isExpanded && "rotate-90")} />
+              </button>
+            ) : (
+              <span className="w-4.5" />
+            )}
+            {isExpanded && hasChildren
+              ? <FolderOpen className="w-4 h-4 text-muted-foreground" />
+              : <Folder className="w-4 h-4 text-muted-foreground" />
+            }
+            <span className="truncate">{node.dept_name}</span>
+            {node.status === "inactive" && <Badge variant="outline" className="text-[10px] px-1 py-0">비활성</Badge>}
+          </div>
+          {isExpanded && hasChildren && renderTree(node.children, depth + 1)}
+        </div>
+      );
+    });
+  };
+
+  /* ── 이미지 업로드 박스 ── */
+  const ImageUploadBox = ({
+    label, preview, inputRef, field, setPreview,
+  }: {
+    label: string;
+    preview: string | null;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    field: string;
+    setPreview: React.Dispatch<React.SetStateAction<string | null>>;
+  }) => (
+    <div className="flex flex-col gap-2">
+      <Label className="text-sm font-medium">{label}</Label>
+      <div className="relative w-40 h-40 rounded-lg border-2 border-dashed border-border bg-muted/50 flex items-center justify-center overflow-hidden group">
+        {preview ? (
+          <>
+            <img src={preview} alt={label} className="w-full h-full object-contain" />
+            {editMode && (
+              <div className="absolute inset-0 bg-foreground/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                <Button size="sm" variant="secondary" className="h-7 text-xs" onClick={() => inputRef.current?.click()}>
+                  <Upload className="w-3 h-3 mr-1" /> 변경
+                </Button>
+                <Button size="sm" variant="destructive" className="h-7 text-xs" onClick={() => {
+                  setPreview(null);
+                  setCompanyForm((prev) => ({ ...prev, [field]: null }));
+                }}>
+                  <X className="w-3 h-3" />
+                </Button>
+              </div>
+            )}
+          </>
+        ) : (
+          <button
+            className="flex flex-col items-center gap-1.5 text-muted-foreground"
+            onClick={() => editMode && inputRef.current?.click()}
+            disabled={!editMode}
+          >
+            <ImageIcon className="w-8 h-8" />
+            <span className="text-xs">{editMode ? "이미지 업로드" : "이미지 없음"}</span>
+          </button>
+        )}
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={(e) => handleImageUpload(e, field, setPreview)}
+      />
+    </div>
+  );
+
+  return (
+    <div className="h-[calc(100vh-4rem)] flex flex-col overflow-hidden">
+      {/* 탭 컨테이너 */}
+      <Tabs defaultValue="company" className="flex flex-col h-full gap-0 min-h-0">
+        {/* 탭 헤더 — border-b 스타일 */}
+        <div className="shrink-0 border-b bg-background px-4">
+          <TabsList className="h-12 bg-transparent gap-1">
+            <TabsTrigger
+              value="company"
+              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 gap-1.5"
+            >
+              <Building2 className="w-4 h-4" /> 회사정보
+            </TabsTrigger>
+          </TabsList>
+        </div>
+
+        {/* ===================== Tab 1: 회사정보 ===================== */}
+        <TabsContent value="company" className="flex-1 overflow-auto mt-0 p-4">
+          <div className="border rounded-lg bg-card">
+            {/* 패널 헤더 */}
+            <div className="flex items-center justify-between px-6 py-3 border-b bg-muted/30">
+              <div className="font-semibold flex items-center gap-2 text-sm">
+                <Building2 className="w-4 h-4 text-muted-foreground" />
+                <span>회사 기본정보</span>
+              </div>
+              <div className="flex gap-1.5">
+                {editMode ? (
+                  <>
+                    <Button variant="outline" size="sm" onClick={cancelEdit}>취소</Button>
+                    <Button size="sm" onClick={handleCompanySave} disabled={saving}>
+                      {saving ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <Save className="w-3.5 h-3.5 mr-1" />}
+                      저장해요
+                    </Button>
+                  </>
+                ) : (
+                  <Button size="sm" onClick={() => setEditMode(true)}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {companyLoading ? (
+              <div className="flex items-center justify-center py-20">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : (
+              <div className="p-6 space-y-6">
+                {/* 기본 정보 섹션 제목 */}
+                <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  기본 정보
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+
+                {/* 기본 정보 그리드 (2열) */}
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">회사코드</Label>
+                    <Input value={companyForm.company_code || ""} className="h-9 bg-muted/50" disabled readOnly />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      회사명 <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      value={companyForm.company_name || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, company_name: e.target.value }))}
+                      placeholder="회사명을 입력해주세요"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">사업자등록번호</Label>
+                    <Input
+                      value={companyForm.business_registration_number || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, business_registration_number: e.target.value }))}
+                      placeholder="000-00-00000"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대표자명</Label>
+                    <Input
+                      value={companyForm.representative_name || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, representative_name: e.target.value }))}
+                      placeholder="대표자명"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대표전화</Label>
+                    <Input
+                      value={companyForm.representative_phone || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, representative_phone: e.target.value }))}
+                      placeholder="02-0000-0000"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">팩스</Label>
+                    <Input
+                      value={companyForm.fax || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, fax: e.target.value }))}
+                      placeholder="02-0000-0001"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">이메일</Label>
+                    <Input
+                      value={companyForm.email || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, email: e.target.value }))}
+                      placeholder="example@company.com"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">홈페이지</Label>
+                    <Input
+                      value={companyForm.website || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, website: e.target.value }))}
+                      placeholder="https://www.company.com"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="col-span-2 space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">주소</Label>
+                    <Input
+                      value={companyForm.address || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="회사 주소를 입력해주세요"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                </div>
+
+                {/* 이미지 섹션 */}
+                <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  이미지 관리
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <div className="flex gap-6">
+                  <ImageUploadBox label="회사 이미지" preview={imagePreview} inputRef={imageRef} field="company_image" setPreview={setImagePreview} />
+                  <ImageUploadBox label="회사 로고" preview={logoPreview} inputRef={logoRef} field="company_logo" setPreview={setLogoPreview} />
+                  <ImageUploadBox label="직인" preview={sealPreview} inputRef={sealRef} field="company_seal" setPreview={setSealPreview} />
+                </div>
+              </div>
+            )}
+          </div>
+        </TabsContent>
+
+      </Tabs>
+
+      {/* ── 부서 등록/수정 모달 ── */}
+      <Dialog open={deptModalOpen} onOpenChange={setDeptModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{deptEditMode ? "부서 수정" : "부서 등록"}</DialogTitle>
+            <DialogDescription>{deptEditMode ? "부서 정보를 수정해요." : "새로운 부서를 등록해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서코드</Label>
+              <Input
+                value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
+                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성됩니다")}
+                className="h-9" disabled readOnly
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서명 <span className="text-destructive">*</span></Label>
+              <Input
+                value={deptForm.dept_name || ""}
+                onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
+                placeholder="부서명" className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">상위부서</Label>
+              <Select value={deptForm.parent_dept_code || ""} onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="상위부서 선택 (선택사항)" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">없음</SelectItem>
+                  {depts.filter((d) => d.dept_code !== deptForm.dept_code).map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name} ({d.dept_code})</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeptModalOpen(false)}>취소</Button>
+            <Button onClick={handleDeptSave} disabled={deptSaving}>
+              {deptSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 사원 추가/수정 모달 ── */}
+      <Dialog open={userModalOpen} onOpenChange={setUserModalOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{userEditMode ? "사원 정보 수정" : "사원 추가"}</DialogTitle>
+            <DialogDescription>
+              {userEditMode
+                ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정해요.`
+                : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가해요.` : "사원을 추가해요."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-sm">사용자 ID <span className="text-destructive">*</span></Label>
+              <Input value={userForm.user_id || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
+                placeholder="사용자 ID" className="h-9" disabled={userEditMode} />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">이름 <span className="text-destructive">*</span></Label>
+              <Input value={userForm.user_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
+                placeholder="이름" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">사번</Label>
+              <Input value={userForm.sabun || ""} onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
+                placeholder="사번" className="h-9" autoComplete="off" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">비밀번호</Label>
+              <Input value={userForm.user_password || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
+                placeholder={userEditMode ? "변경 시에만 입력" : "미입력 시 qlalfqjsgh11"} className="h-9" type="password" autoComplete="new-password" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">직급</Label>
+              <Input value={userForm.position_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
+                placeholder="직급" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서 <span className="text-destructive">*</span></Label>
+              <Select value={userForm.dept_code || ""} onValueChange={(v) => setUserForm((p) => ({ ...p, dept_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="부서 선택" /></SelectTrigger>
+                <SelectContent>
+                  {depts.map((d) => <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">휴대폰</Label>
+              <Input value={userForm.cell_phone || ""} onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
+                placeholder="010-0000-0000" className={cn("h-9", formErrors.cell_phone && "border-destructive")} />
+              {formErrors.cell_phone && <p className="text-xs text-destructive">{formErrors.cell_phone}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">이메일</Label>
+              <Input value={userForm.email || ""} onChange={(e) => handleUserFormChange("email", e.target.value)}
+                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
+              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">입사일</Label>
+              <Input type="date" value={userForm.regdate || ""} onChange={(e) => setUserForm((p) => ({ ...p, regdate: e.target.value }))} className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">퇴사일</Label>
+              <Input type="date" value={userForm.end_date || ""} onChange={(e) => setUserForm((p) => ({ ...p, end_date: e.target.value }))} className="h-9" />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserModalOpen(false)}>취소</Button>
+            <Button onClick={handleUserSave} disabled={deptSaving}>
+              {deptSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/master-data/department/page.tsx b/frontend/app/(main)/COMPANY_8/master-data/department/page.tsx
new file mode 100644
index 00000000..23f70f2b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/master-data/department/page.tsx
@@ -0,0 +1,772 @@
+"use client";
+
+/**
+ * 부서관리 — 하드코딩 페이지
+ *
+ * 좌측: 부서 목록 (dept_info)
+ * 우측: 선택한 부서의 인원 목록 (user_info)
+ *
+ * 모달: 부서 등록(dept_info), 사원 추가(user_info)
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Users, Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import * as departmentAPI from "@/lib/api/department";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { formatField, validateField, validateForm } from "@/lib/utils/validation";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const DEPT_TABLE = "dept_info";
+const USER_TABLE = "user_info";
+const DEPT_COLUMNS = [
+  { key: "parent_dept_code", label: "상위부서" },
+  { key: "status", label: "상태" },
+];
+
+export default function DepartmentPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 부서
+  const [depts, setDepts] = useState<any[]>([]);
+  const [deptLoading, setDeptLoading] = useState(false);
+  const [deptCount, setDeptCount] = useState(0);
+  const [selectedDeptId, setSelectedDeptId] = useState<string | null>(null);
+
+  // 우측: 사원
+  const [members, setMembers] = useState<any[]>([]);
+  const [memberLoading, setMemberLoading] = useState(false);
+
+  // 부서 모달
+  const [deptModalOpen, setDeptModalOpen] = useState(false);
+  const [deptEditMode, setDeptEditMode] = useState(false);
+  const [deptForm, setDeptForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 사원 모달
+  const [userModalOpen, setUserModalOpen] = useState(false);
+  const [userEditMode, setUserEditMode] = useState(false);
+  const [userForm, setUserForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+
+  // 사원 탭 (재직중/퇴사)
+  const [memberTab, setMemberTab] = useState<"active" | "resigned">("active");
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-department", DEPT_TABLE, DEPT_COLUMNS);
+
+  // 부서 조회
+  const fetchDepts = useCallback(async () => {
+    setDeptLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${DEPT_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      // dept_info에 id 컬럼이 없으므로 dept_code를 id로 매핑
+      const data = raw.map((d: any) => ({ ...d, id: d.id || d.dept_code }));
+      setDepts(data);
+      setDeptCount(res.data?.data?.total || data.length);
+    } catch (err) {
+      toast.error("부서 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setDeptLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => { fetchDepts(); }, [fetchDepts]);
+
+  // 선택된 부서
+  const selectedDept = depts.find((d) => d.id === selectedDeptId);
+  const selectedDeptCode = selectedDept?.dept_code || null;
+
+  // 우측: 사원 조회 (부서 미선택 → 전체, 선택 → 해당 부서)
+  const fetchMembers = useCallback(async () => {
+    setMemberLoading(true);
+    try {
+      const filters = selectedDeptCode
+        ? [{ columnName: "dept_code", operator: "equals", value: selectedDeptCode }]
+        : [];
+      const res = await apiClient.post(`/table-management/tables/${USER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      setMembers(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setMembers([]); } finally { setMemberLoading(false); }
+  }, [selectedDeptCode]);
+
+  useEffect(() => { fetchMembers(); }, [fetchMembers]);
+
+  // 부서 등록
+  const openDeptRegister = async () => {
+    setDeptForm({});
+    setDeptEditMode(false);
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setDeptModalOpen(true);
+
+    // 채번 규칙 조회 (dept_info.dept_code) — path params로 직접 호출
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/dept_info/dept_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시
+    }
+  };
+
+  const openDeptEdit = () => {
+    if (!selectedDept) return;
+    setDeptForm({ ...selectedDept });
+    setDeptEditMode(true);
+    setDeptModalOpen(true);
+  };
+
+  const handleDeptSave = async () => {
+    if (!deptForm.dept_name) { toast.error("부서명은 필수입니다."); return; }
+    const parentCode = (deptForm.parent_dept_code && deptForm.parent_dept_code !== "none") ? deptForm.parent_dept_code : null;
+    setSaving(true);
+    try {
+      if (deptEditMode && deptForm.dept_code) {
+        const response = await departmentAPI.updateDepartment(deptForm.dept_code, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "수정에 실패했습니다."); return; }
+        toast.success("수정되었습니다.");
+      } else {
+        const companyCode = user?.companyCode || "";
+
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+
+        const response = await departmentAPI.createDepartment(companyCode, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+          dept_code: allocatedCode,
+        });
+        if (!response.success) {
+          toast.error((response as any).error || "등록에 실패했습니다.");
+          return;
+        }
+        toast.success("등록되었습니다.");
+      }
+      setDeptModalOpen(false);
+      fetchDepts();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 부서 삭제
+  const handleDeptDelete = async () => {
+    if (!selectedDeptCode) return;
+    const ok = await confirm("부서를 삭제하시겠습니까?", {
+      description: "해당 부서에 소속된 사원 정보는 유지됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      const response = await departmentAPI.deleteDepartment(selectedDeptCode);
+      if (!response.success) { toast.error((response as any).error || "삭제에 실패했습니다."); return; }
+      toast.success(response.message || "삭제되었습니다.");
+      setSelectedDeptId(null);
+      fetchDepts();
+    } catch { toast.error("삭제에 실패했습니다."); }
+  };
+
+  // 사원 추가/수정
+  const openUserModal = (editData?: any) => {
+    if (editData) {
+      setUserEditMode(true);
+      setUserForm({ ...editData, user_password: "" });
+    } else {
+      setUserEditMode(false);
+      setUserForm({ dept_code: selectedDeptCode || "", user_password: "" });
+    }
+    setFormErrors({});
+    setUserModalOpen(true);
+  };
+
+  const handleUserFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setUserForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => { const n = { ...prev }; if (error) n[field] = error; else delete n[field]; return n; });
+  };
+
+  const handleUserSave = async () => {
+    if (!userForm.user_id) { toast.error("사용자 ID는 필수입니다."); return; }
+    if (!userForm.user_name) { toast.error("사용자 이름은 필수입니다."); return; }
+    if (!userForm.dept_code) { toast.error("부서는 필수입니다."); return; }
+    const errors = validateForm(userForm, ["cell_phone", "email"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) { toast.error("입력 형식을 확인해주세요."); return; }
+
+    setSaving(true);
+    try {
+      // 비밀번호 미입력 시 기본값 (신규만)
+      const password = userForm.user_password || (!userEditMode ? "qlalfqjsgh11" : undefined);
+
+      await apiClient.post("/admin/users/with-dept", {
+        userInfo: {
+          user_id: userForm.user_id,
+          user_name: userForm.user_name,
+          user_name_eng: userForm.user_name_eng || undefined,
+          user_password: password || undefined,
+          email: userEditMode ? (userForm.email || null) : (userForm.email || undefined),
+          tel: userForm.tel || undefined,
+          cell_phone: userEditMode ? (userForm.cell_phone || null) : (userForm.cell_phone || undefined),
+          sabun: userEditMode ? (userForm.sabun || null) : (userForm.sabun || undefined),
+          position_name: userForm.position_name || undefined,
+          dept_code: userForm.dept_code || undefined,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name || undefined,
+          status: userForm.status || "active",
+          end_date: userForm.end_date || null,
+        },
+        mainDept: userForm.dept_code ? {
+          dept_code: userForm.dept_code,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name,
+          position_name: userForm.position_name || undefined,
+        } : undefined,
+        isUpdate: userEditMode,
+      });
+      toast.success(userEditMode ? "사원 정보가 수정되었습니다." : "사원이 추가되었습니다.");
+      setUserModalOpen(false);
+      fetchMembers();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (depts.length === 0) return;
+    const data = depts.map((d) => ({
+      부서코드: d.dept_code, 부서명: d.dept_name, 상위부서: d.parent_dept_code, 상태: d.status,
+    }));
+    await exportToExcel(data, "부서관리.xlsx", "부서");
+    toast.success("다운로드 완료");
+  };
+
+  // 퇴사일 기반 재직/퇴사 분리
+  const _now = new Date();
+  const today = `${_now.getFullYear()}-${String(_now.getMonth() + 1).padStart(2, "0")}-${String(_now.getDate()).padStart(2, "0")}`;
+  const activeMembers = members.filter((m) => !m.end_date || m.end_date.substring(0, 10) >= today);
+  const resignedMembers = members.filter((m) => m.end_date && m.end_date.substring(0, 10) < today);
+
+  // EDataTable 컬럼 정의 (부서 목록) — ts.visibleColumns 순서를 따름
+  const deptColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      dept_code: { width: "w-[120px]" },
+      dept_name: { minWidth: "min-w-[140px]" },
+      parent_dept_code: {
+        width: "w-[110px]",
+        render: (val: any) => <span className="text-[13px] text-muted-foreground">{val || "\u2014"}</span>,
+      },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "active" ? "default" : "outline"}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val === "active" ? "활성" : (val || "\u2014")}
+            </Badge>
+          ) : null,
+      },
+    };
+    // dept_code, dept_name은 항상 표시 (DEPT_COLUMNS에 포함되지 않으므로 visibleColumns에 없음)
+    const fixedCols: EDataTableColumn[] = [
+      { key: "dept_code", label: "부서코드", ...colProps["dept_code"] },
+      { key: "dept_name", label: "부서명", ...colProps["dept_name"] },
+    ];
+    const dynamicCols = ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+    return [...fixedCols, ...dynamicCols];
+  }, [ts.visibleColumns]);
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={DEPT_TABLE}
+        filterId="c16-department"
+        onFilterChange={setSearchFilters}
+        dataCount={deptCount}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex gap-1.5">
+            <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+              엑셀 업로드
+            </Button>
+            <Button variant="outline" size="sm" className="h-8" onClick={() => void handleExcelDownload()}>
+              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 부서 목록 */}
+          <ResizablePanel defaultSize={40} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-3 border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">부서 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {deptCount}건
+                  </span>
+                </div>
+                <div className="flex gap-1.5">
+                  <Button size="sm" onClick={() => void openDeptRegister()}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedDeptCode} onClick={openDeptEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedDeptCode} onClick={() => void handleDeptDelete()}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 부서 테이블 */}
+              <EDataTable
+                columns={deptColumns}
+                data={ts.groupData(depts)}
+                rowKey={(row) => row.id}
+                loading={deptLoading}
+                emptyMessage="등록된 부서가 없어요"
+                selectedId={selectedDeptId}
+                onSelect={(id) => setSelectedDeptId(id)}
+                onRowDoubleClick={() => openDeptEdit()}
+                showRowNumber
+                showPagination={false}
+                draggableColumns={false}
+                columnOrderKey="c16-department"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 사원 목록 */}
+          <ResizablePanel defaultSize={60} minSize={30}>
+            <div className="flex flex-col h-full">
+              {!selectedDeptId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">부서를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 부서를 선택하면 소속 사원 목록이 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 디테일 헤더 */}
+                  <div className="flex items-center gap-3 px-4 py-3 border-b bg-muted shrink-0">
+                    <span className="text-[13px] font-bold">{selectedDept?.dept_name || "-"}</span>
+                    <span className="font-mono text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                      {selectedDept?.dept_code || "-"}
+                    </span>
+                    <div className="ml-auto">
+                      <Button variant="outline" size="sm" onClick={() => openUserModal()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        사원 추가
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 재직/퇴사 탭 */}
+                  <div className="flex border-b border-border px-4 shrink-0 bg-muted">
+                    <button
+                      onClick={() => setMemberTab("active")}
+                      className={cn("px-4 py-2.5 text-xs font-semibold border-b-2 transition-colors",
+                        memberTab === "active" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+                      )}
+                    >
+                      재직중
+                      {activeMembers.length > 0 && (
+                        <Badge variant="secondary" className="ml-1.5 text-[10px] px-1.5 py-0">{activeMembers.length}</Badge>
+                      )}
+                    </button>
+                    <button
+                      onClick={() => setMemberTab("resigned")}
+                      className={cn("px-4 py-2.5 text-xs font-semibold border-b-2 transition-colors",
+                        memberTab === "resigned" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+                      )}
+                    >
+                      퇴사
+                      {resignedMembers.length > 0 && (
+                        <Badge variant="secondary" className="ml-1.5 text-[10px] px-1.5 py-0">{resignedMembers.length}</Badge>
+                      )}
+                    </button>
+                  </div>
+
+                  <div className="flex-1 overflow-auto">
+                    {memberLoading ? (
+                      <div className="flex flex-col items-center justify-center py-12">
+                        <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                      </div>
+                    ) : memberTab === "active" ? (
+                      activeMembers.length === 0 ? (
+                        <div className="text-center py-8 text-muted-foreground text-sm">재직중인 사원이 없어요</div>
+                      ) : (
+                        <Table noWrapper>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center px-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사번</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이름</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사용자ID</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">직급</TableHead>
+                              <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">휴대폰</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {activeMembers.map((member, idx) => (
+                              <TableRow
+                                key={member.id || member.user_id}
+                                className="cursor-pointer select-none hover:bg-muted/50"
+                                onDoubleClick={() => openUserModal(member)}
+                              >
+                                <TableCell className="text-center text-[13px] text-muted-foreground px-2">{idx + 1}</TableCell>
+                                <TableCell className="font-mono text-[13px] text-muted-foreground">{member.sabun || "—"}</TableCell>
+                                <TableCell className="text-sm font-medium">{member.user_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.user_id}</TableCell>
+                                <TableCell className="text-[13px]">{member.position_name || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.cell_phone || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.email || "—"}</TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      )
+                    ) : (
+                      resignedMembers.length === 0 ? (
+                        <div className="text-center py-8 text-muted-foreground text-sm">퇴사한 사원이 없어요</div>
+                      ) : (
+                        <Table noWrapper>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center px-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사번</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이름</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사용자ID</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">직급</TableHead>
+                              <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">휴대폰</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">퇴사일</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {resignedMembers.map((member, idx) => (
+                              <TableRow
+                                key={member.id || member.user_id}
+                                className="cursor-pointer select-none hover:bg-muted/50"
+                                onDoubleClick={() => openUserModal(member)}
+                              >
+                                <TableCell className="text-center text-[13px] text-muted-foreground px-2">{idx + 1}</TableCell>
+                                <TableCell className="font-mono text-[13px] text-muted-foreground">{member.sabun || "—"}</TableCell>
+                                <TableCell className="text-sm font-medium">{member.user_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.user_id}</TableCell>
+                                <TableCell className="text-[13px]">{member.position_name || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.cell_phone || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.email || "—"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.end_date ? member.end_date.substring(0, 10) : "—"}</TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      )
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 부서 등록/수정 모달 */}
+      <Dialog open={deptModalOpen} onOpenChange={setDeptModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{deptEditMode ? "부서 수정" : "부서 등록"}</DialogTitle>
+            <DialogDescription>{deptEditMode ? "부서 정보를 수정합니다." : "새로운 부서를 등록합니다."}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-2">
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">부서코드</span>
+              <Input
+                value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
+                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                className="h-9"
+                disabled
+                readOnly
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                부서명 <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={deptForm.dept_name || ""}
+                onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
+                placeholder="부서명을 입력해 주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상위부서</span>
+              <Select
+                value={deptForm.parent_dept_code || ""}
+                onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="상위부서 선택 (선택사항)" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">없음</SelectItem>
+                  {depts.filter((d) => d.dept_code !== deptForm.dept_code).map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name} ({d.dept_code})</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeptModalOpen(false)}>취소</Button>
+            <Button onClick={() => void handleDeptSave()} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 사원 추가/수정 모달 */}
+      <Dialog open={userModalOpen} onOpenChange={setUserModalOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{userEditMode ? "사원 정보 수정" : "사원 추가"}</DialogTitle>
+            <DialogDescription>
+              {userEditMode
+                ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정합니다.`
+                : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가합니다.` : "사원을 추가합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                사용자 ID <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={userForm.user_id || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
+                placeholder="사용자 ID를 입력해 주세요"
+                className="h-9"
+                disabled={userEditMode}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                이름 <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={userForm.user_name || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
+                placeholder="이름을 입력해 주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">사번</span>
+              <Input
+                value={userForm.sabun || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
+                placeholder="사번"
+                className="h-9"
+                autoComplete="off"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">비밀번호</span>
+              <Input
+                value={userForm.user_password || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
+                placeholder={userEditMode ? "변경 시에만 입력해 주세요" : "미입력 시 기본값이 설정돼요"}
+                className="h-9"
+                type="password"
+                autoComplete="new-password"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">직급</span>
+              <Input
+                value={userForm.position_name || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
+                placeholder="직급"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                부서 <span className="text-destructive">*</span>
+              </span>
+              <Select value={userForm.dept_code || ""} onValueChange={(v) => setUserForm((p) => ({ ...p, dept_code: v }))}>
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="부서를 선택해 주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {depts.map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">휴대폰</span>
+              <Input
+                value={userForm.cell_phone || ""}
+                onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
+                placeholder="010-0000-0000"
+                className={cn("h-9", formErrors.cell_phone && "border-destructive")}
+              />
+              {formErrors.cell_phone && <p className="text-xs text-destructive">{formErrors.cell_phone}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">이메일</span>
+              <Input
+                value={userForm.email || ""}
+                onChange={(e) => handleUserFormChange("email", e.target.value)}
+                placeholder="example@email.com"
+                className={cn("h-9", formErrors.email && "border-destructive")}
+              />
+              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">입사일</span>
+              <Input
+                type="date"
+                value={userForm.regdate ? userForm.regdate.substring(0, 10) : ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, regdate: e.target.value }))}
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">퇴사일</span>
+              <Input
+                type="date"
+                value={userForm.end_date ? userForm.end_date.substring(0, 10) : ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, end_date: e.target.value }))}
+                className="h-9"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserModalOpen(false)}>취소</Button>
+            <Button onClick={() => void handleUserSave()} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={DEPT_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchDepts()}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/master-data/item-info/page.tsx b/frontend/app/(main)/COMPANY_8/master-data/item-info/page.tsx
new file mode 100644
index 00000000..375fd900
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/master-data/item-info/page.tsx
@@ -0,0 +1,596 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  Pencil, Copy, Settings2, Check, ChevronsUpDown,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { ImageUpload } from "@/components/common/ImageUpload";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { toast } from "sonner";
+
+// 검색 가능한 카테고리 콤보박스
+function CategoryCombobox({ options, value, onChange, placeholder }: {
+  options: { code: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selected = options.find((o) => o.code === value);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
+          <span className="truncate">{selected?.label || <span className="text-muted-foreground">{placeholder}</span>}</span>
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8" />
+          <CommandList>
+            <CommandEmpty>검색 결과가 없어요</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {options.map((opt) => (
+                <CommandItem key={opt.code} value={opt.label} onSelect={() => { onChange(opt.code); setOpen(false); }}>
+                  <Check className={cn("mr-2 h-3.5 w-3.5", value === opt.code ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 다중 선택 카테고리 콤보박스
+function MultiCategoryCombobox({ options, value, onChange, placeholder }: {
+  options: { code: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selectedCodes = value ? value.split(",").map((c) => c.trim()).filter(Boolean) : [];
+  const selectedLabels = selectedCodes.map((code) => options.find((o) => o.code === code)?.label || code).filter(Boolean);
+
+  const toggle = (code: string) => {
+    const next = selectedCodes.includes(code)
+      ? selectedCodes.filter((c) => c !== code)
+      : [...selectedCodes, code];
+    onChange(next.join(","));
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
+          <span className="truncate">
+            {selectedLabels.length > 0
+              ? selectedLabels.join(", ")
+              : <span className="text-muted-foreground">{placeholder}</span>}
+          </span>
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8" />
+          <CommandList>
+            <CommandEmpty>검색 결과가 없어요</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {options.map((opt) => (
+                <CommandItem key={opt.code} value={opt.label} onSelect={() => toggle(opt.code)}>
+                  <Check className={cn("mr-2 h-3.5 w-3.5", selectedCodes.includes(opt.code) ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const TABLE_NAME = "item_info";
+
+const GRID_COLUMNS = [
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "image", label: "이미지", type: "image" },
+  { key: "division", label: "관리품목" },
+  { key: "type", label: "품목구분" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "material", label: "재질" },
+  { key: "status", label: "상태" },
+  { key: "selling_price", label: "판매가격", align: "right" as const, formatNumber: true },
+  { key: "standard_price", label: "기준단가", align: "right" as const, formatNumber: true },
+  { key: "weight", label: "중량", align: "right" as const },
+  { key: "inventory_unit", label: "재고단위" },
+  { key: "user_type01", label: "대분류" },
+  { key: "user_type02", label: "중분류" },
+  { key: "lead_time", label: "생산 리드타임(일)", align: "right" as const },
+];
+
+const FORM_FIELDS = [
+  { key: "item_number", label: "품목코드", type: "text", required: true, disabled: true, placeholder: "자동 채번" },
+  { key: "item_name", label: "품명", type: "text", required: true },
+  { key: "division", label: "관리품목", type: "multi-category" },
+  { key: "type", label: "품목구분", type: "category" },
+  { key: "size", label: "규격", type: "text" },
+  { key: "unit", label: "단위", type: "category" },
+  { key: "material", label: "재질", type: "category" },
+  { key: "status", label: "상태", type: "category" },
+  { key: "weight", label: "중량", type: "text", placeholder: "숫자 입력 (예: 3.5)" },
+  { key: "volum", label: "부피", type: "text", placeholder: "숫자 입력 (예: 100)" },
+  { key: "specific_gravity", label: "비중", type: "text", placeholder: "숫자 입력 (예: 7.85)" },
+  { key: "inventory_unit", label: "재고단위", type: "category" },
+  { key: "selling_price", label: "판매가격", type: "text" },
+  { key: "standard_price", label: "기준단가", type: "text" },
+  { key: "currency_code", label: "통화", type: "category" },
+  { key: "user_type01", label: "대분류", type: "category" },
+  { key: "user_type02", label: "중분류", type: "category" },
+  { key: "lead_time", label: "생산 리드타임(일)", type: "text", placeholder: "숫자 입력 (예: 7)" },
+  { key: "image", label: "품목 이미지", type: "image" },
+  { key: "meno", label: "메모", type: "textarea" },
+];
+
+const CATEGORY_COLUMNS = [
+  "division", "type", "unit", "material", "status",
+  "inventory_unit", "currency_code", "user_type01", "user_type02",
+];
+
+export default function ItemInfoPage() {
+  const { user } = useAuth();
+  const ts = useTableSettings("c16-item-info", TABLE_NAME, GRID_COLUMNS);
+  const [items, setItems] = useState<any[]>([]);
+  const [rawItems, setRawItems] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editId, setEditId] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+
+  // 엑셀 업로드
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 카테고리 옵션 (API에서 로드)
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 선택된 행
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  // 카테고리 옵션 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      try {
+        const optMap: Record<string, { code: string; label: string }[]> = {};
+        const flatten = (vals: any[]): { code: string; label: string }[] => {
+          const result: { code: string; label: string }[] = [];
+          for (const v of vals) {
+            result.push({ code: v.valueCode, label: v.valueLabel });
+            if (v.children?.length) result.push(...flatten(v.children));
+          }
+          return result;
+        };
+
+        await Promise.all(
+          CATEGORY_COLUMNS.map(async (colName) => {
+            try {
+              const res = await apiClient.get(`/table-categories/${TABLE_NAME}/${colName}/values`);
+              if (res.data?.success && res.data.data?.length > 0) {
+                optMap[colName] = flatten(res.data.data);
+              }
+            } catch { /* skip */ }
+          })
+        );
+        setCategoryOptions(optMap);
+      } catch (err) {
+        console.error("카테고리 로드 실패:", err);
+      }
+    };
+    loadCategories();
+  }, []);
+
+  // 데이터 조회
+  const fetchItems = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1,
+        size: 99999,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        // 쉼표 구분 다중값 지원
+        if (code.includes(",")) {
+          return code.split(",").map((c) => {
+            const trimmed = c.trim();
+            if (!trimmed || trimmed === "s") return "";
+            return categoryOptions[col]?.find((o) => o.code === trimmed)?.label || trimmed;
+          }).filter(Boolean).join(", ");
+        }
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      setRawItems(raw);
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATEGORY_COLUMNS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [categoryOptions, searchFilters]);
+
+  useEffect(() => {
+    fetchItems();
+  }, [fetchItems]);
+
+  // 채번 미리보기 로드
+  const loadNumberingPreview = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${TABLE_NAME}/item_number`);
+      const rule = ruleRes.data?.data;
+      if (rule?.ruleId) {
+        const previewRes = await apiClient.post(`/numbering-rules/${rule.ruleId}/preview`, { formData: {} });
+        return previewRes.data?.data?.generatedCode || "";
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+    return "";
+  };
+
+  // 등록 모달 열기
+  const openRegisterModal = async () => {
+    setFormData({});
+    setIsEditMode(false);
+    setEditId(null);
+    setIsModalOpen(true);
+    // 채번 컬럼 자동 로드
+    const code = await loadNumberingPreview();
+    if (code) setFormData(prev => ({ ...prev, item_number: code }));
+  };
+
+  // 수정 모달 열기
+  const openEditModal = (item: any) => {
+    const raw = rawItems.find((r) => r.id === item.id) || item;
+    setFormData({ ...raw });
+    setIsEditMode(true);
+    setEditId(item.id);
+    setIsModalOpen(true);
+  };
+
+  // 복사 모달 열기
+  const openCopyModal = async (item: any) => {
+    const raw = rawItems.find((r) => r.id === item.id) || item;
+    const { id, item_number, created_date, updated_date, writer, ...rest } = raw;
+    setFormData(rest);
+    setIsEditMode(false);
+    setEditId(null);
+    const code = await loadNumberingPreview();
+    if (code) setFormData(prev => ({ ...prev, item_number: code }));
+    setIsModalOpen(true);
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (!formData.item_name) {
+      toast.error("품명은 필수 입력이에요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      if (isEditMode && editId) {
+        const { id, created_date, updated_date, writer, company_code, ...updateFields } = formData;
+        await apiClient.put(`/table-management/tables/${TABLE_NAME}/edit`, {
+          originalData: { id: editId },
+          updatedData: updateFields,
+        });
+        toast.success("수정되었어요.");
+      } else {
+        const { id, created_date, updated_date, ...insertFields } = formData;
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, { id: crypto.randomUUID(), ...insertFields });
+        toast.success("등록되었어요.");
+      }
+      setIsModalOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      console.error("저장 실패:", err);
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 삭제
+  const handleDelete = async () => {
+    if (!selectedId) {
+      toast.error("삭제할 품목을 선택해 주세요.");
+      return;
+    }
+    if (!confirm("선택한 품목을 삭제할까요?")) return;
+
+    try {
+      await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+        data: [{ id: selectedId }],
+      });
+      toast.success("삭제되었어요.");
+      setSelectedId(null);
+      fetchItems();
+    } catch (err) {
+      console.error("삭제 실패:", err);
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) {
+      toast.error("다운로드할 데이터가 없어요.");
+      return;
+    }
+    const exportData = items.map((item) => {
+      const row: Record<string, any> = {};
+      for (const col of GRID_COLUMNS) {
+        row[col.label] = item[col.key] || "";
+      }
+      return row;
+    });
+    await exportToExcel(exportData, "품목정보.xlsx", "품목정보");
+    toast.success("엑셀 다운로드 완료");
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-0">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={TABLE_NAME}
+        filterId="c16-item-info"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between px-4 py-2.5 border-b">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-semibold">품목 관리</span>
+          <Badge variant="secondary" className="font-mono text-xs">{items.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
+          </Button>
+          <div className="mx-1 h-5 w-px bg-border" />
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4 mr-1.5" /> 품목 등록
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!selectedId}
+            onClick={() => {
+              const item = items.find((i) => i.id === selectedId);
+              if (item) openCopyModal(item);
+            }}
+          >
+            <Copy className="w-4 h-4 mr-1.5" /> 복사
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!selectedId}
+            onClick={() => {
+              const item = items.find((i) => i.id === selectedId);
+              if (item) openEditModal(item);
+            }}
+          >
+            <Pencil className="w-4 h-4 mr-1.5" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 메인 테이블 */}
+      <EDataTable
+        columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+          key: col.key,
+          label: col.label,
+          align: (col as any).type === "image" ? "center" : col.align as "left" | "center" | "right" | undefined,
+          formatNumber: (col as any).formatNumber,
+          width: (col as any).type === "image" ? "w-[50px]" : undefined,
+          render: (col as any).type === "image" ? (val: any) => (
+            val ? (
+              <img src={String(val).startsWith("http") || String(val).startsWith("/") ? val : `/api/files/preview/${val}`} alt="" className="h-8 w-8 rounded object-cover border border-border mx-auto" onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
+            ) : <div className="h-8 w-8 rounded bg-muted mx-auto" />
+          ) : undefined,
+        }))}
+        data={ts.groupData(items)}
+        loading={loading}
+        emptyMessage="등록된 품목이 없어요"
+        selectedId={selectedId}
+        onSelect={(id) => setSelectedId(id)}
+        onRowDoubleClick={(row) => openEditModal(row)}
+        showRowNumber
+        draggableColumns={false}
+      />
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="sm:max-w-[600px] w-[95vw] max-h-[90vh] flex flex-col p-0 overflow-hidden">
+          <DialogHeader className="shrink-0 px-6 pt-5 pb-3 border-b">
+            <DialogTitle>{isEditMode ? "품목 수정" : "품목 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? "품목 정보를 수정해요." : "새로운 품목을 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-y-auto">
+            <div className="grid grid-cols-2 gap-4 p-6">
+              {FORM_FIELDS.map((field) => (
+                <div
+                  key={field.key}
+                  className={cn("space-y-1.5", (field.type === "textarea" || field.type === "image") && "col-span-2")}
+                >
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    {field.label}
+                    {field.required && <span className="text-destructive ml-1">*</span>}
+                  </Label>
+                  {field.type === "image" ? (
+                    <ImageUpload
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      tableName={TABLE_NAME}
+                      recordId={formData.id || ""}
+                      columnName={field.key}
+                      height="h-32"
+                    />
+                  ) : field.type === "multi-category" ? (
+                    <MultiCategoryCombobox
+                      options={categoryOptions[field.key] || []}
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      placeholder={`${field.label} 선택`}
+                    />
+                  ) : field.type === "category" ? (
+                    <CategoryCombobox
+                      options={categoryOptions[field.key] || []}
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      placeholder={`${field.label} 선택`}
+                    />
+                  ) : field.type === "textarea" ? (
+                    <Textarea
+                      value={formData[field.key] || ""}
+                      onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                      placeholder={field.label}
+                      rows={3}
+                    />
+                  ) : ["selling_price", "standard_price"].includes(field.key) ? (
+                    <Input
+                      value={formData[field.key] ? Number(String(formData[field.key]).replace(/,/g, "")).toLocaleString() : ""}
+                      onChange={(e) => {
+                        const raw = e.target.value.replace(/[^\d.-]/g, "");
+                        setFormData((prev) => ({ ...prev, [field.key]: raw }));
+                      }}
+                      placeholder={field.placeholder || field.label}
+                      className="h-9 text-right"
+                    />
+                  ) : (
+                    <Input
+                      value={formData[field.key] || ""}
+                      onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                      placeholder={field.placeholder || (field.disabled ? "자동 채번" : field.label)}
+                      disabled={field.disabled && !isEditMode}
+                      className="h-9"
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <DialogFooter className="shrink-0 border-t px-6 py-3">
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving
+                ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+                : <Save className="w-4 h-4 mr-1.5" />
+              }
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 모달 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={TABLE_NAME}
+        userId={user?.userId}
+        onSuccess={() => {
+          fetchItems();
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/master-data/options/page.tsx b/frontend/app/(main)/COMPANY_8/master-data/options/page.tsx
new file mode 100644
index 00000000..7506ad94
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/master-data/options/page.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { Settings2, Tags, Hash } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { CategoryColumnList } from "@/components/table-category/CategoryColumnList";
+import { CategoryValueManager } from "@/components/table-category/CategoryValueManager";
+import { NumberingRuleDesigner } from "@/components/numbering-rule/NumberingRuleDesigner";
+
+const TABS = [
+  { id: "category", label: "카테고리 설정", icon: Tags },
+  { id: "numbering", label: "코드 설정", icon: Hash },
+] as const;
+
+type TabId = (typeof TABS)[number]["id"];
+
+export default function OptionsSettingPage() {
+  const [activeTab, setActiveTab] = useState<TabId>("category");
+
+  const [selectedColumn, setSelectedColumn] = useState<string | null>(null);
+  const [selectedColumnLabel, setSelectedColumnLabel] = useState("");
+  const [selectedTableName, setSelectedTableName] = useState("");
+
+  const [leftWidth, setLeftWidth] = useState(340);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = useCallback(() => {
+    setIsDragging(true);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      setLeftWidth(Math.max(260, Math.min(500, e.clientX - rect.left)));
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
+
+  return (
+    <div className="flex h-full flex-col p-3 gap-3">
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <Settings2 className="h-4 w-4 text-primary" />
+          <h1 className="text-sm font-semibold">옵션 설정</h1>
+        </div>
+        <div className="flex bg-muted rounded-md p-0.5 gap-0.5">
+          {TABS.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  "flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-all",
+                  activeTab === tab.id
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <Icon className="h-3.5 w-3.5" />
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0">
+        {activeTab === "category" && (
+          <div ref={containerRef} className="flex h-full">
+            <div
+              style={{ width: leftWidth }}
+              className="shrink-0 border rounded-lg bg-card overflow-hidden"
+            >
+              <CategoryColumnList
+                tableName=""
+                selectedColumn={selectedColumn}
+                onColumnSelect={(uniqueKey, label, tableName) => {
+                  setSelectedColumn(uniqueKey);
+                  setSelectedColumnLabel(label);
+                  setSelectedTableName(tableName);
+                }}
+              />
+            </div>
+
+            <div
+              onMouseDown={handleMouseDown}
+              className={cn(
+                "w-1.5 mx-0.5 cursor-col-resize rounded-full transition-colors shrink-0",
+                isDragging ? "bg-primary" : "bg-border hover:bg-primary/50"
+              )}
+            />
+
+            <div className="flex-1 min-w-0 border rounded-lg bg-card overflow-hidden">
+              {selectedColumn && selectedTableName ? (
+                <CategoryValueManager
+                  tableName={selectedTableName}
+                  columnName={selectedColumn.includes(".") ? selectedColumn.split(".").pop()! : selectedColumn}
+                  columnLabel={selectedColumnLabel}
+                />
+              ) : (
+                <div className="flex h-full items-center justify-center">
+                  <div className="text-center space-y-2">
+                    <Tags className="h-8 w-8 mx-auto text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">좌측에서 카테고리 컬럼을 선택해주세요</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {activeTab === "numbering" && (
+          <div className="h-full border rounded-lg bg-card overflow-auto">
+            <NumberingRuleDesigner />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/mold/info/page.tsx b/frontend/app/(main)/COMPANY_8/mold/info/page.tsx
new file mode 100644
index 00000000..dcd92eac
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/mold/info/page.tsx
@@ -0,0 +1,1450 @@
+"use client";
+
+/**
+ * 금형정보 — Type E 카드리스트형
+ *
+ * 좌측: 금형 카드 리스트 (이미지 + 코드 + 이름 + 유형뱃지 + 수명진행률)
+ * 우측: 금형 상세 + 탭 3개 (일련번호 / 점검항목 / 부품)
+ * 전용 API: /molds/*
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Plus, Trash2, Loader2, Pencil, Box, Inbox, Search,
+  Wrench, ClipboardCheck, Package, LayoutGrid, List,
+  Image as ImageIcon, Upload, X as XIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+
+// ─── API base ───
+const API = "/mold";
+
+// ─── 상태/유형 매핑 ───
+const STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  ACTIVE: { label: "사용중", variant: "default" },
+  INSPECTION: { label: "점검중", variant: "secondary" },
+  REPAIR: { label: "수리중", variant: "outline" },
+  DISPOSED: { label: "폐기", variant: "destructive" },
+};
+
+const SERIAL_STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  IN_USE: { label: "사용중", variant: "default" },
+  STORED: { label: "보관중", variant: "secondary" },
+  REPAIR: { label: "수리중", variant: "outline" },
+  DISPOSED: { label: "폐기", variant: "destructive" },
+};
+
+// ─── 수명 진행률 색상 ───
+function getProgressColor(pct: number) {
+  if (pct < 60) return "bg-success";
+  if (pct < 85) return "bg-warning";
+  return "bg-destructive";
+}
+
+function getProgressTextColor(pct: number) {
+  if (pct < 60) return "text-success";
+  if (pct < 85) return "text-warning";
+  return "text-destructive";
+}
+
+export default function MoldInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // ─── 좌측: 금형 목록 ───
+  const [molds, setMolds] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedMoldCode, setSelectedMoldCode] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<"list" | "grid">("list");
+
+  // ─── 검색 필터 ───
+  const [filterCode, setFilterCode] = useState("");
+  const [filterName, setFilterName] = useState("");
+  const [filterType, setFilterType] = useState("");
+  const [filterStatus, setFilterStatus] = useState("");
+
+  // ─── 우측: 상세 ───
+  const [detail, setDetail] = useState<any>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [serialSummary, setSerialSummary] = useState<any>(null);
+  const [rightTab, setRightTab] = useState("serial");
+
+  // ─── 일련번호 ───
+  const [serials, setSerials] = useState<any[]>([]);
+  const [serialLoading, setSerialLoading] = useState(false);
+
+  // ─── 점검항목 ───
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspectionLoading, setInspectionLoading] = useState(false);
+
+  // ─── 부품 ───
+  const [parts, setParts] = useState<any[]>([]);
+  const [partLoading, setPartLoading] = useState(false);
+
+  // ─── 모달 ───
+  const [moldModalOpen, setMoldModalOpen] = useState(false);
+  const [moldEditMode, setMoldEditMode] = useState(false);
+  const [moldForm, setMoldForm] = useState<Record<string, any>>({});
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [moldImagePreview, setMoldImagePreview] = useState<string | null>(null);
+  const moldImageRef = React.useRef<HTMLInputElement>(null);
+
+  const [serialModalOpen, setSerialModalOpen] = useState(false);
+  const [serialForm, setSerialForm] = useState<Record<string, any>>({});
+
+  const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
+  const [inspectionForm, setInspectionForm] = useState<Record<string, any>>({});
+
+  const [partModalOpen, setPartModalOpen] = useState(false);
+  const [partForm, setPartForm] = useState<Record<string, any>>({});
+
+  // ─── 금형 목록 조회 ───
+  const fetchMolds = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      if (filterCode) params.mold_code = filterCode;
+      if (filterName) params.mold_name = filterName;
+      if (filterType) params.mold_type = filterType;
+      if (filterStatus) params.operation_status = filterStatus;
+
+      const res = await apiClient.get(API, { params });
+      setMolds(res.data?.data || []);
+    } catch {
+      toast.error("금형 목록을 불러올 수 없어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [filterCode, filterName, filterType, filterStatus]);
+
+  useEffect(() => { fetchMolds(); }, [fetchMolds]);
+
+  // ─── 금형 상세 + 하위 데이터 ───
+  const fetchDetail = useCallback(async (code: string) => {
+    setDetailLoading(true);
+    try {
+      const [detailRes, summaryRes] = await Promise.all([
+        apiClient.get(`${API}/${code}`),
+        apiClient.get(`${API}/${code}/serial-summary`),
+      ]);
+      setDetail(detailRes.data?.data || null);
+      setSerialSummary(summaryRes.data?.data || null);
+    } catch {
+      toast.error("금형 상세를 불러올 수 없어요.");
+    } finally {
+      setDetailLoading(false);
+    }
+  }, []);
+
+  const fetchSerials = useCallback(async (code: string) => {
+    setSerialLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/serials`);
+      setSerials(res.data?.data || []);
+    } catch {
+      toast.error("일련번호를 불러올 수 없어요.");
+    } finally {
+      setSerialLoading(false);
+    }
+  }, []);
+
+  const fetchInspections = useCallback(async (code: string) => {
+    setInspectionLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/inspections`);
+      setInspections(res.data?.data || []);
+    } catch {
+      toast.error("점검항목을 불러올 수 없어요.");
+    } finally {
+      setInspectionLoading(false);
+    }
+  }, []);
+
+  const fetchParts = useCallback(async (code: string) => {
+    setPartLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/parts`);
+      setParts(res.data?.data || []);
+    } catch {
+      toast.error("부품을 불러올 수 없어요.");
+    } finally {
+      setPartLoading(false);
+    }
+  }, []);
+
+  // 금형 선택
+  const handleSelectMold = useCallback((code: string) => {
+    setSelectedMoldCode(code);
+    setRightTab("serial");
+    fetchDetail(code);
+    fetchSerials(code);
+    fetchInspections(code);
+    fetchParts(code);
+  }, [fetchDetail, fetchSerials, fetchInspections, fetchParts]);
+
+  // 탭 변경 시 재조회
+  useEffect(() => {
+    if (!selectedMoldCode) return;
+    if (rightTab === "serial") fetchSerials(selectedMoldCode);
+    else if (rightTab === "inspection") fetchInspections(selectedMoldCode);
+    else if (rightTab === "part") fetchParts(selectedMoldCode);
+  }, [rightTab, selectedMoldCode, fetchSerials, fetchInspections, fetchParts]);
+
+  // ─── 금형 CRUD ───
+  const handleOpenRegister = async () => {
+    setMoldEditMode(false);
+    setMoldForm({});
+    setMoldImagePreview(null);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setMoldModalOpen(true);
+
+    // 채번 규칙 조회 (mold_mng.mold_code)
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/mold_mng/mold_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시 — 수동 입력 모드
+    }
+  };
+
+  const handleOpenEdit = () => {
+    if (!detail) return;
+    setMoldEditMode(true);
+    setMoldForm({ ...detail });
+    setMoldImagePreview(detail.image_path || null);
+    setMoldModalOpen(true);
+  };
+
+  const handleMoldImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result as string;
+      setMoldImagePreview(result);
+      setMoldForm((prev) => ({ ...prev, image_path: result }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleSaveMold = async () => {
+    // 등록 모드에서 채번이 없으면 수동 입력 필수
+    if (!moldEditMode && !numberingRuleId && !moldForm.mold_code) {
+      toast.error("금형코드와 금형명은 필수예요.");
+      return;
+    }
+    if (!moldForm.mold_name) {
+      toast.error("금형명은 필수예요.");
+      return;
+    }
+    if (moldEditMode && !moldForm.mold_code) {
+      toast.error("금형코드가 없어요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      if (moldEditMode) {
+        await apiClient.put(`${API}/${moldForm.mold_code}`, moldForm);
+        toast.success("금형이 수정되었어요.");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let saveData = { ...moldForm };
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            saveData.mold_code = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했어요.");
+            return;
+          }
+        }
+        await apiClient.post(API, saveData);
+        toast.success("금형이 등록되었어요.");
+      }
+      setMoldModalOpen(false);
+      fetchMolds();
+      if (moldEditMode && selectedMoldCode === moldForm.mold_code) {
+        fetchDetail(moldForm.mold_code);
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteMold = async () => {
+    if (!selectedMoldCode || !detail) return;
+    const ok = await confirm(
+      "금형을 삭제하시겠어요?",
+      { description: `"${detail.mold_name}" 금형과 하위 일련번호, 점검항목, 부품이 모두 삭제돼요.`, variant: "destructive" },
+    );
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/${selectedMoldCode}`);
+      toast.success("금형이 삭제되었어요.");
+      setSelectedMoldCode(null);
+      setDetail(null);
+      fetchMolds();
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 일련번호 CRUD ───
+  const handleSaveSerial = async () => {
+    if (!selectedMoldCode) return;
+    setSaving(true);
+    try {
+      if (serialForm.id) {
+        await apiClient.put(`${API}/serials/${serialForm.id}`, serialForm);
+        toast.success("일련번호가 수정되었어요.");
+      } else {
+        await apiClient.post(`${API}/${selectedMoldCode}/serials`, serialForm);
+        toast.success("일련번호가 등록되었어요.");
+      }
+      setSerialModalOpen(false);
+      setSerialForm({});
+      fetchSerials(selectedMoldCode);
+      fetchDetail(selectedMoldCode);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteSerial = async (id: number) => {
+    const ok = await confirm("이 일련번호를 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/serials/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) {
+        fetchSerials(selectedMoldCode);
+        fetchDetail(selectedMoldCode);
+      }
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 점검항목 CRUD ───
+  const handleAddInspection = async () => {
+    if (!selectedMoldCode) return;
+    if (!inspectionForm.inspection_item) {
+      toast.error("점검항목명은 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      await apiClient.post(`${API}/${selectedMoldCode}/inspections`, inspectionForm);
+      toast.success("점검항목이 등록되었어요.");
+      setInspectionModalOpen(false);
+      setInspectionForm({});
+      fetchInspections(selectedMoldCode);
+    } catch {
+      toast.error("등록에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteInspection = async (id: number) => {
+    const ok = await confirm("이 점검항목을 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/inspections/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) fetchInspections(selectedMoldCode);
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 부품 CRUD ───
+  const handleAddPart = async () => {
+    if (!selectedMoldCode) return;
+    if (!partForm.part_name) {
+      toast.error("부품명은 필수예요.");
+      return;
+    }
+    if (!partForm.replacement_cycle) {
+      toast.error("교체주기는 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      await apiClient.post(`${API}/${selectedMoldCode}/parts`, partForm);
+      toast.success("부품이 등록되었어요.");
+      setPartModalOpen(false);
+      setPartForm({});
+      fetchParts(selectedMoldCode);
+    } catch {
+      toast.error("등록에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeletePart = async (id: number) => {
+    const ok = await confirm("이 부품을 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/parts/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) fetchParts(selectedMoldCode);
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 수명 진행률 계산 ───
+  const calcLifePct = (mold: any) => {
+    const max = Number(mold.shot_count) || 0;
+    const current = Number(mold.current_shot_count) || 0;
+    if (max <= 0) return 0;
+    return Math.min(Math.round((current / max) * 100), 100);
+  };
+
+  // ─── 카드 렌더링 ───
+  const renderCard = (mold: any) => {
+    const pct = calcLifePct(mold);
+    const st = STATUS_MAP[mold.operation_status] || { label: mold.operation_status || "-", variant: "secondary" as const };
+    const isSelected = selectedMoldCode === mold.mold_code;
+
+    return (
+      <div
+        key={mold.mold_code}
+        onClick={() => handleSelectMold(mold.mold_code)}
+        className={cn(
+          "rounded-lg border cursor-pointer transition-all overflow-hidden",
+          "hover:shadow-md hover:-translate-y-0.5",
+          isSelected
+            ? "border-primary ring-2 ring-primary/25"
+            : "border-border hover:border-border",
+          viewMode === "list" ? "flex flex-row" : "",
+        )}
+      >
+        {/* 이미지 영역 */}
+        <div className={cn(
+          "bg-muted flex items-center justify-center relative",
+          viewMode === "list"
+            ? "w-[120px] min-w-[120px] min-h-[100px]"
+            : "h-[160px]",
+        )}>
+          {mold.image_path ? (
+            <img
+              src={mold.image_path}
+              alt={mold.mold_name}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <Box className="w-8 h-8 text-muted-foreground/50" />
+          )}
+          <div className="absolute top-2 right-2">
+            <Badge variant={st.variant} className="text-[10px]">{st.label}</Badge>
+          </div>
+        </div>
+
+        {/* 본문 */}
+        <div className={cn("flex-1 p-3", viewMode === "list" && "flex items-center gap-4")}>
+          <div className="flex-1 min-w-0">
+            <p className="text-xs text-muted-foreground font-mono truncate">{mold.mold_code}</p>
+            <p className="text-sm font-semibold truncate">{mold.mold_name}</p>
+            {mold.mold_type && (
+              <Badge variant="outline" className="text-[10px] mt-1">{mold.mold_type}</Badge>
+            )}
+          </div>
+
+          {/* 수명 진행률 */}
+          <div className={cn("mt-2", viewMode === "list" && "mt-0 min-w-[140px]")}>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-[11px] text-muted-foreground">수명</span>
+              <span className={cn("text-[11px] font-mono font-semibold", getProgressTextColor(pct))}>
+                {pct}%
+              </span>
+            </div>
+            <div className="h-1 bg-muted rounded-full overflow-hidden">
+              <div
+                className={cn("h-full rounded-full transition-all", getProgressColor(pct))}
+                style={{ width: `${pct}%` }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // ─── 선택 금형 상세 ───
+  const selectedMold = detail;
+  const lifePct = selectedMold ? calcLifePct(selectedMold) : 0;
+
+  return (
+    <div className="flex flex-col h-full p-3 gap-3 overflow-hidden">
+      {ConfirmDialogComponent}
+
+      {/* 검색 필터 */}
+      <div className="rounded-lg border bg-card p-3">
+        <div className="flex flex-wrap items-end gap-3">
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형코드</Label>
+            <Input
+              className="h-9 w-[160px] text-sm"
+              placeholder="코드를 입력해주세요"
+              value={filterCode}
+              onChange={(e) => setFilterCode(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형명</Label>
+            <Input
+              className="h-9 w-[160px] text-sm"
+              placeholder="금형명을 입력해주세요"
+              value={filterName}
+              onChange={(e) => setFilterName(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형유형</Label>
+            <Select value={filterType || "__all__"} onValueChange={(v) => setFilterType(v === "__all__" ? "" : v)}>
+              <SelectTrigger className="h-9 w-[140px] text-sm">
+                <SelectValue placeholder="전체" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체</SelectItem>
+                <SelectItem value="사출금형">사출금형</SelectItem>
+                <SelectItem value="프레스금형">프레스금형</SelectItem>
+                <SelectItem value="다이캐스팅">다이캐스팅</SelectItem>
+                <SelectItem value="단조금형">단조금형</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">상태</Label>
+            <Select value={filterStatus || "__all__"} onValueChange={(v) => setFilterStatus(v === "__all__" ? "" : v)}>
+              <SelectTrigger className="h-9 w-[140px] text-sm">
+                <SelectValue placeholder="전체" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체</SelectItem>
+                <SelectItem value="ACTIVE">사용중</SelectItem>
+                <SelectItem value="INSPECTION">점검중</SelectItem>
+                <SelectItem value="REPAIR">수리중</SelectItem>
+                <SelectItem value="DISPOSED">폐기</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <Button size="sm" className="h-9" onClick={fetchMolds}>
+            <Search className="w-4 h-4 mr-1" />
+            조회
+          </Button>
+        </div>
+      </div>
+
+      {/* 메인 분할 패널 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 rounded-lg border bg-card overflow-hidden">
+        {/* ─── 좌측: 카드 리스트 ─── */}
+        <ResizablePanel defaultSize={35} minSize={20} maxSize={50}>
+          <div className="flex flex-col h-full">
+            {/* 패널 헤더 */}
+            <div className="flex items-center justify-between px-4 py-3 border-b">
+              <div className="flex items-center gap-2">
+                <h3 className="text-sm font-semibold">금형 목록</h3>
+                <span className="text-xs font-mono font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full">
+                  {molds.length}
+                </span>
+              </div>
+              <div className="flex items-center gap-1.5">
+                {/* 뷰 토글 */}
+                <div className="flex border rounded overflow-hidden">
+                  <button
+                    onClick={() => setViewMode("grid")}
+                    className={cn(
+                      "p-1.5 transition-colors",
+                      viewMode === "grid"
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground/50 hover:text-muted-foreground hover:bg-accent",
+                    )}
+                  >
+                    <LayoutGrid className="w-3.5 h-3.5" />
+                  </button>
+                  <button
+                    onClick={() => setViewMode("list")}
+                    className={cn(
+                      "p-1.5 transition-colors border-l",
+                      viewMode === "list"
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground/50 hover:text-muted-foreground hover:bg-accent",
+                    )}
+                  >
+                    <List className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+                <Button size="sm" className="h-8" onClick={handleOpenRegister}>
+                  <Plus className="w-4 h-4 mr-1" />
+                  등록
+                </Button>
+              </div>
+            </div>
+
+            {/* 카드 스크롤 영역 */}
+            <div className="flex-1 overflow-y-auto p-2">
+              {loading ? (
+                <div className="flex items-center justify-center h-40">
+                  <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : molds.length === 0 ? (
+                <div className="flex flex-col items-center justify-center h-40 gap-2 text-muted-foreground">
+                  <Inbox className="w-10 h-10 opacity-40" />
+                  <p className="text-sm">등록된 금형이 없어요.</p>
+                </div>
+              ) : (
+                <div className={cn(
+                  "grid gap-2",
+                  viewMode === "grid"
+                    ? "grid-cols-[repeat(auto-fill,minmax(200px,1fr))]"
+                    : "grid-cols-1",
+                )}>
+                  {molds.map(renderCard)}
+                </div>
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* ─── 우측: 상세 ─── */}
+        <ResizablePanel defaultSize={65} minSize={40}>
+          <div className="flex flex-col h-full overflow-y-auto">
+            {!selectedMoldCode ? (
+              <div className="flex flex-col items-center justify-center h-full gap-3 text-muted-foreground">
+                <Box className="w-14 h-14 opacity-30" />
+                <p className="text-sm font-medium">좌측에서 금형을 선택해주세요</p>
+                <p className="text-xs text-muted-foreground/60">금형을 선택하면 상세 정보를 확인할 수 있어요</p>
+              </div>
+            ) : detailLoading ? (
+              <div className="flex items-center justify-center h-full">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : selectedMold ? (
+              <div className="p-5">
+                {/* 상세 헤더 */}
+                <div className="flex gap-5 pb-5 border-b mb-4">
+                  {/* 이미지 */}
+                  <div className="w-[200px] min-w-[200px] h-[200px] bg-muted rounded-lg flex items-center justify-center border">
+                    {selectedMold.image_path ? (
+                      <img
+                        src={selectedMold.image_path}
+                        alt={selectedMold.mold_name}
+                        className="w-full h-full object-cover rounded-lg"
+                      />
+                    ) : (
+                      <ImageIcon className="w-16 h-16 text-muted-foreground/40" />
+                    )}
+                  </div>
+
+                  {/* 메타 정보 */}
+                  <div className="flex-1 flex flex-col justify-center min-w-0">
+                    <p className="text-xs text-muted-foreground font-mono mb-1">{selectedMold.mold_code}</p>
+                    <h2 className="text-xl font-bold mb-2 truncate">{selectedMold.mold_name}</h2>
+                    <div className="flex gap-1.5 mb-4 flex-wrap">
+                      {selectedMold.mold_type && (
+                        <Badge variant="outline">{selectedMold.mold_type}</Badge>
+                      )}
+                      {selectedMold.category && (
+                        <Badge variant="secondary">{selectedMold.category}</Badge>
+                      )}
+                      <Badge variant={STATUS_MAP[selectedMold.operation_status]?.variant || "secondary"}>
+                        {STATUS_MAP[selectedMold.operation_status]?.label || selectedMold.operation_status || "-"}
+                      </Badge>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-x-5 gap-y-2 text-sm">
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">제조사</span>
+                        <p className="text-foreground">{selectedMold.manufacturer || "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">제작일</span>
+                        <p className="text-foreground">{selectedMold.manufacturing_date || "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">캐비티수</span>
+                        <p className="text-foreground font-mono">{selectedMold.cavity_count ?? "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">수량</span>
+                        <p className="text-foreground font-mono">{selectedMold.mold_quantity ?? "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">최대수명</span>
+                        <p className="text-foreground font-mono">{Number(selectedMold.shot_count || 0).toLocaleString()}회</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">보증수명</span>
+                        <p className="text-foreground font-mono">{Number(selectedMold.warranty_shot_count || 0).toLocaleString()}회</p>
+                      </div>
+                    </div>
+
+                    {/* 수명 진행률 바 */}
+                    <div className="mt-3">
+                      <div className="flex items-center justify-between mb-1">
+                        <span className="text-xs text-muted-foreground">수명 사용률</span>
+                        <span className={cn("text-sm font-mono font-semibold", getProgressTextColor(lifePct))}>
+                          {lifePct}%
+                        </span>
+                      </div>
+                      <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                        <div
+                          className={cn("h-full rounded-full transition-all", getProgressColor(lifePct))}
+                          style={{ width: `${lifePct}%` }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 액션 버튼 */}
+                  <div className="flex flex-col gap-2 flex-shrink-0">
+                    <Button variant="outline" size="sm" className="h-8" onClick={handleOpenEdit}>
+                      <Pencil className="w-3.5 h-3.5 mr-1" />
+                      수정
+                    </Button>
+                    <Button variant="outline" size="sm" className="h-8 text-destructive hover:text-destructive" onClick={handleDeleteMold}>
+                      <Trash2 className="w-3.5 h-3.5 mr-1" />
+                      삭제
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 탭 3개 */}
+                <Tabs value={rightTab} onValueChange={setRightTab}>
+                  <TabsList className="w-full justify-start border-b rounded-none bg-transparent h-auto p-0">
+                    <TabsTrigger
+                      value="serial"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <Wrench className="w-4 h-4 mr-1.5" />
+                      일련번호
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {serials.length}
+                      </span>
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="inspection"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <ClipboardCheck className="w-4 h-4 mr-1.5" />
+                      점검항목
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {inspections.length}
+                      </span>
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="part"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <Package className="w-4 h-4 mr-1.5" />
+                      부품
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {parts.length}
+                      </span>
+                    </TabsTrigger>
+                  </TabsList>
+
+                  {/* ─── 탭1: 일련번호 ─── */}
+                  <TabsContent value="serial" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">
+                        {serialSummary && (
+                          <>
+                            사용중 {serialSummary.in_use || 0} · 보관중 {serialSummary.stored || 0} · 수리중 {serialSummary.repair || 0} · 폐기 {serialSummary.disposed || 0}
+                          </>
+                        )}
+                      </span>
+                      <Button size="sm" className="h-8" onClick={() => { setSerialForm({}); setSerialModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        일련번호 등록
+                      </Button>
+                    </div>
+                    {serialLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : serials.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <Wrench className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 일련번호가 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">일련번호</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[200px]">샷수 현황</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">보관위치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                              <TableHead className="text-xs w-[80px]">작업</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {serials.map((s: any) => {
+                              const ss = SERIAL_STATUS_MAP[s.status] || { label: s.status || "-", variant: "secondary" as const };
+                              const maxShot = detail?.shot_count || 0;
+                              const curShot = s.current_shot_count || 0;
+                              const pct = maxShot > 0 ? Math.min(Math.round((curShot / maxShot) * 100), 100) : 0;
+                              return (
+                                <TableRow key={s.id}>
+                                  <TableCell className="text-[13px] font-mono font-semibold">{s.serial_number}</TableCell>
+                                  <TableCell>
+                                    <Badge variant={ss.variant} className="text-[10px]">{ss.label}</Badge>
+                                  </TableCell>
+                                  <TableCell>
+                                    {maxShot > 0 ? (
+                                      <div className="space-y-1">
+                                        <div className="flex items-center gap-2">
+                                          <div className="flex-1 h-3 bg-muted rounded-full overflow-hidden">
+                                            <div
+                                              className={cn("h-full rounded-full transition-all", getProgressColor(pct))}
+                                              style={{ width: `${pct}%` }}
+                                            />
+                                          </div>
+                                          <span className={cn("text-xs font-bold min-w-[36px] text-right", getProgressTextColor(pct))}>
+                                            {pct}%
+                                          </span>
+                                        </div>
+                                        <p className="text-[11px] text-muted-foreground">
+                                          {curShot.toLocaleString()} / {maxShot.toLocaleString()}
+                                        </p>
+                                      </div>
+                                    ) : (
+                                      <span className="text-xs text-muted-foreground">-</span>
+                                    )}
+                                  </TableCell>
+                                  <TableCell className="text-[13px]">{s.storage_location || "-"}</TableCell>
+                                  <TableCell className="text-[13px] text-muted-foreground">{s.remarks || "-"}</TableCell>
+                                  <TableCell>
+                                    <div className="flex items-center gap-1">
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-7 w-7 p-0"
+                                        onClick={() => {
+                                          setSerialForm(s);
+                                          setSerialModalOpen(true);
+                                        }}
+                                      >
+                                        <Pencil className="w-3.5 h-3.5" />
+                                      </Button>
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                        onClick={() => handleDeleteSerial(s.id)}
+                                      >
+                                        <Trash2 className="w-3.5 h-3.5" />
+                                      </Button>
+                                    </div>
+                                  </TableCell>
+                                </TableRow>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+
+                  {/* ─── 탭2: 점검항목 ─── */}
+                  <TabsContent value="inspection" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">점검항목 목록</span>
+                      <Button size="sm" className="h-8" onClick={() => { setInspectionForm({}); setInspectionModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        점검항목 등록
+                      </Button>
+                    </div>
+                    {inspectionLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : inspections.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <ClipboardCheck className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 점검항목이 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검항목</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">하한치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                              <TableHead className="text-xs w-[60px]" />
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {inspections.map((ins: any) => (
+                              <TableRow key={ins.id}>
+                                <TableCell className="text-[13px] font-medium">{ins.inspection_item}</TableCell>
+                                <TableCell className="text-[13px]">{ins.inspection_cycle || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{ins.inspection_method || "-"}</TableCell>
+                                <TableCell className="text-[13px] font-mono">{ins.lower_limit || "-"}</TableCell>
+                                <TableCell className="text-[13px] font-mono">{ins.upper_limit || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{ins.unit || "-"}</TableCell>
+                                <TableCell>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                    onClick={() => handleDeleteInspection(ins.id)}
+                                  >
+                                    <Trash2 className="w-3.5 h-3.5" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+
+                  {/* ─── 탭3: 부품 ─── */}
+                  <TabsContent value="part" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">부품 목록</span>
+                      <Button size="sm" className="h-8" onClick={() => { setPartForm({}); setPartModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        부품 등록
+                      </Button>
+                    </div>
+                    {partLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : parts.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <Package className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 부품이 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부품명</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">교체주기</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">제조사</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                              <TableHead className="text-xs w-[60px]" />
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {parts.map((p: any) => (
+                              <TableRow key={p.id}>
+                                <TableCell className="text-[13px] font-medium">{p.part_name}</TableCell>
+                                <TableCell className="text-[13px]">{p.replacement_cycle || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.unit || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.specification || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.manufacturer || "-"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{p.remarks || "-"}</TableCell>
+                                <TableCell>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                    onClick={() => handleDeletePart(p.id)}
+                                  >
+                                    <Trash2 className="w-3.5 h-3.5" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+                </Tabs>
+              </div>
+            ) : null}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 금형 등록/수정 모달 ========== */}
+      <Dialog open={moldModalOpen} onOpenChange={setMoldModalOpen}>
+        <DialogContent className="max-w-3xl overflow-y-auto" style={{ maxHeight: "90vh" }}>
+          <DialogHeader>
+            <DialogTitle>{moldEditMode ? "금형 수정" : "금형 등록"}</DialogTitle>
+            <DialogDescription>금형 기본 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형코드 <span className="text-destructive">*</span></Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldEditMode ? (moldForm.mold_code || "") : (numberingRuleId ? (previewCode || "") : (moldForm.mold_code || ""))}
+                  onChange={(e) => {
+                    if (!moldEditMode && !numberingRuleId) {
+                      setMoldForm({ ...moldForm, mold_code: e.target.value });
+                    }
+                  }}
+                  readOnly={moldEditMode || !!numberingRuleId}
+                  placeholder={moldEditMode ? "" : (numberingRuleId ? (previewCode ? "" : "자동 생성 중...") : "금형코드를 입력해주세요")}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형명 <span className="text-destructive">*</span></Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.mold_name || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, mold_name: e.target.value })}
+                  placeholder="금형명을 입력해주세요"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형유형</Label>
+                <Select
+                  value={moldForm.mold_type || ""}
+                  onValueChange={(v) => setMoldForm({ ...moldForm, mold_type: v })}
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="사출금형">사출금형</SelectItem>
+                    <SelectItem value="프레스금형">프레스금형</SelectItem>
+                    <SelectItem value="다이캐스팅">다이캐스팅</SelectItem>
+                    <SelectItem value="단조금형">단조금형</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">카테고리</Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.category || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, category: e.target.value })}
+                  placeholder="카테고리"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">제조사</Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.manufacturer || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, manufacturer: e.target.value })}
+                  placeholder="제조사"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">제작일</Label>
+                <Input
+                  type="date"
+                  className="h-9 text-sm"
+                  value={moldForm.manufacturing_date || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, manufacturing_date: e.target.value })}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">캐비티수</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.cavity_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, cavity_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">최대수명 (샷수)</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.shot_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, shot_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형수량</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.mold_quantity ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, mold_quantity: e.target.value })}
+                  min={1}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">가동상태</Label>
+                <Select
+                  value={moldForm.operation_status || ""}
+                  onValueChange={(v) => setMoldForm({ ...moldForm, operation_status: v })}
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="ACTIVE">사용중</SelectItem>
+                    <SelectItem value="INSPECTION">점검중</SelectItem>
+                    <SelectItem value="REPAIR">수리중</SelectItem>
+                    <SelectItem value="DISPOSED">폐기</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">보증수명 (샷수)</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.warranty_shot_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, warranty_shot_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형 이미지</Label>
+                <div className="relative w-full h-32 rounded-lg border-2 border-dashed border-border bg-muted/50 flex items-center justify-center overflow-hidden group">
+                  {moldImagePreview ? (
+                    <>
+                      <img src={moldImagePreview} alt="금형 이미지" className="w-full h-full object-contain" />
+                      <div className="absolute inset-0 bg-foreground/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                        <Button size="sm" variant="secondary" className="h-7 text-xs" type="button" onClick={() => moldImageRef.current?.click()}>
+                          <Upload className="w-3 h-3 mr-1" /> 변경
+                        </Button>
+                        <Button size="sm" variant="destructive" className="h-7 text-xs" type="button" onClick={() => {
+                          setMoldImagePreview(null);
+                          setMoldForm((prev) => ({ ...prev, image_path: null }));
+                        }}>
+                          <XIcon className="w-3 h-3" />
+                        </Button>
+                      </div>
+                    </>
+                  ) : (
+                    <button
+                      type="button"
+                      className="flex flex-col items-center gap-1.5 text-muted-foreground"
+                      onClick={() => moldImageRef.current?.click()}
+                    >
+                      <ImageIcon className="w-8 h-8" />
+                      <span className="text-xs">이미지 업로드</span>
+                    </button>
+                  )}
+                </div>
+                <input
+                  ref={moldImageRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleMoldImageUpload}
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setMoldModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleSaveMold} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              {moldEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 일련번호 등록/수정 모달 ========== */}
+      <Dialog open={serialModalOpen} onOpenChange={setSerialModalOpen}>
+        <DialogContent className="sm:max-w-[480px]">
+          <DialogHeader>
+            <DialogTitle>{serialForm.id ? "일련번호 수정" : "일련번호 등록"}</DialogTitle>
+            <DialogDescription>{serialForm.id ? `${serialForm.serial_number} 정보를 수정해요.` : "일련번호는 자동으로 채번돼요."}</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">상태</Label>
+              <Select
+                value={serialForm.status || "STORED"}
+                onValueChange={(v) => setSerialForm({ ...serialForm, status: v })}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="IN_USE">사용중</SelectItem>
+                  <SelectItem value="STORED">보관중</SelectItem>
+                  <SelectItem value="REPAIR">수리중</SelectItem>
+                  <SelectItem value="DISPOSED">폐기</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">현재 샷수</Label>
+              <Input
+                type="number"
+                className="h-9 text-sm font-mono"
+                value={serialForm.current_shot_count ?? ""}
+                onChange={(e) => setSerialForm({ ...serialForm, current_shot_count: e.target.value ? Number(e.target.value) : null })}
+                placeholder="0"
+                min={0}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">보관위치</Label>
+              <Input
+                className="h-9 text-sm"
+                value={serialForm.storage_location || ""}
+                onChange={(e) => setSerialForm({ ...serialForm, storage_location: e.target.value })}
+                placeholder="보관위치"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">비고</Label>
+              <Input
+                className="h-9 text-sm"
+                value={serialForm.remarks || ""}
+                onChange={(e) => setSerialForm({ ...serialForm, remarks: e.target.value })}
+                placeholder="비고"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setSerialModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleSaveSerial} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              {serialForm.id ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 점검항목 등록 모달 ========== */}
+      <Dialog open={inspectionModalOpen} onOpenChange={setInspectionModalOpen}>
+        <DialogContent className="sm:max-w-[560px]">
+          <DialogHeader>
+            <DialogTitle>점검항목 등록</DialogTitle>
+            <DialogDescription>금형 점검항목을 등록해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">점검항목명 <span className="text-destructive">*</span></Label>
+              <Input
+                className="h-9 text-sm"
+                value={inspectionForm.inspection_item || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_item: e.target.value })}
+                placeholder="점검항목명"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">점검주기</Label>
+              <Input
+                className="h-9 text-sm"
+                value={inspectionForm.inspection_cycle || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_cycle: e.target.value })}
+                placeholder="예: 월 1회"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">점검방법 <span className="text-destructive">*</span></Label>
+              <Select
+                value={inspectionForm.inspection_method || ""}
+                onValueChange={(v) => {
+                  const updated: Record<string, any> = { ...inspectionForm, inspection_method: v };
+                  if (v !== "숫자") {
+                    updated.lower_limit = "";
+                    updated.upper_limit = "";
+                    updated.unit = "";
+                  }
+                  setInspectionForm(updated);
+                }}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue placeholder="선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="숫자">숫자</SelectItem>
+                  <SelectItem value="텍스트">텍스트</SelectItem>
+                  <SelectItem value="합격/불합격">합격/불합격</SelectItem>
+                  <SelectItem value="양호/불량">양호/불량</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            {inspectionForm.inspection_method === "숫자" && (
+              <>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">기준값</Label>
+                  <Input
+                    type="number"
+                    className="h-9 text-sm font-mono"
+                    value={inspectionForm.lower_limit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, lower_limit: e.target.value })}
+                    placeholder="기준값"
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">±오차범위</Label>
+                  <Input
+                    type="number"
+                    className="h-9 text-sm font-mono"
+                    value={inspectionForm.upper_limit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, upper_limit: e.target.value })}
+                    placeholder="허용 오차"
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">단위</Label>
+                  <Input
+                    className="h-9 text-sm"
+                    value={inspectionForm.unit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, unit: e.target.value })}
+                    placeholder="mm, ℃ 등"
+                  />
+                </div>
+              </>
+            )}
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">점검내용</Label>
+              <textarea
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 resize-y"
+                value={inspectionForm.inspection_content || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_content: e.target.value })}
+                placeholder="상세 내용"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setInspectionModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleAddInspection} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              등록하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 부품 등록 모달 ========== */}
+      <Dialog open={partModalOpen} onOpenChange={setPartModalOpen}>
+        <DialogContent className="sm:max-w-[560px]">
+          <DialogHeader>
+            <DialogTitle>부품 등록</DialogTitle>
+            <DialogDescription>금형 부품을 등록해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">부품명 <span className="text-destructive">*</span></Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.part_name || ""}
+                onChange={(e) => setPartForm({ ...partForm, part_name: e.target.value })}
+                placeholder="부품명"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">교체주기 <span className="text-destructive">*</span></Label>
+              <Select
+                value={partForm.replacement_cycle || ""}
+                onValueChange={(v) => setPartForm({ ...partForm, replacement_cycle: v })}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue placeholder="선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1만 샷">1만 샷</SelectItem>
+                  <SelectItem value="5만 샷">5만 샷</SelectItem>
+                  <SelectItem value="10만 샷">10만 샷</SelectItem>
+                  <SelectItem value="월 1회">월 1회</SelectItem>
+                  <SelectItem value="3개월">3개월</SelectItem>
+                  <SelectItem value="6개월">6개월</SelectItem>
+                  <SelectItem value="1년">1년</SelectItem>
+                  <SelectItem value="수시">수시</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">단위</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.unit || ""}
+                onChange={(e) => setPartForm({ ...partForm, unit: e.target.value })}
+                placeholder="EA, SET 등"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">규격</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.specification || ""}
+                onChange={(e) => setPartForm({ ...partForm, specification: e.target.value })}
+                placeholder="규격"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">제조사</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.manufacturer || ""}
+                onChange={(e) => setPartForm({ ...partForm, manufacturer: e.target.value })}
+                placeholder="제조사"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">비고</Label>
+              <textarea
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 resize-y"
+                value={partForm.remarks || ""}
+                onChange={(e) => setPartForm({ ...partForm, remarks: e.target.value })}
+                placeholder="비고"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setPartModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleAddPart} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              등록하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/monitoring/equipment/page.tsx b/frontend/app/(main)/COMPANY_8/monitoring/equipment/page.tsx
new file mode 100644
index 00000000..ccb5aaf6
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/monitoring/equipment/page.tsx
@@ -0,0 +1,575 @@
+"use client";
+
+/**
+ * 설비운영모니터링 — 하드코딩 페이지
+ *
+ * 설비(equipment_mng) 목록 + 작업지시(work_instruction) 연결
+ * 실시간 카드 그리드 형태 모니터링 대시보드
+ */
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Wrench,
+  Zap,
+  Pause,
+  Power,
+} from "lucide-react";
+
+/* ───── 상태 정의 ───── */
+
+type OperationStatus = "running" | "idle" | "maintenance" | "off" | "unknown";
+
+interface StatusConfig {
+  label: string;
+  color: string;
+  bg: string;
+  border: string;
+  bar: string;
+  icon: React.ReactNode;
+  badgeBg: string;
+  badgeText: string;
+  cardGlow: string;
+}
+
+const STATUS_MAP: Record<OperationStatus, StatusConfig> = {
+  running: {
+    label: "가동중",
+    color: "text-emerald-400",
+    bg: "bg-emerald-500/10",
+    border: "border-emerald-500/30",
+    bar: "bg-emerald-400",
+    icon: <Zap className="h-4 w-4" />,
+    badgeBg: "bg-emerald-500/20",
+    badgeText: "text-emerald-300",
+    cardGlow: "shadow-emerald-500/5",
+  },
+  idle: {
+    label: "대기",
+    color: "text-amber-400",
+    bg: "bg-amber-500/10",
+    border: "border-amber-500/30",
+    bar: "bg-amber-400",
+    icon: <Pause className="h-4 w-4" />,
+    badgeBg: "bg-amber-500/20",
+    badgeText: "text-amber-300",
+    cardGlow: "shadow-amber-500/5",
+  },
+  maintenance: {
+    label: "점검/수리",
+    color: "text-red-400",
+    bg: "bg-red-500/10",
+    border: "border-red-500/30",
+    bar: "bg-red-400",
+    icon: <Wrench className="h-4 w-4" />,
+    badgeBg: "bg-red-500/20",
+    badgeText: "text-red-300",
+    cardGlow: "shadow-red-500/5",
+  },
+  off: {
+    label: "비가동",
+    color: "text-gray-400",
+    bg: "bg-gray-500/10",
+    border: "border-gray-500/30",
+    bar: "bg-gray-500",
+    icon: <Power className="h-4 w-4" />,
+    badgeBg: "bg-gray-500/20",
+    badgeText: "text-gray-400",
+    cardGlow: "shadow-gray-500/5",
+  },
+  unknown: {
+    label: "미설정",
+    color: "text-gray-500",
+    bg: "bg-gray-500/10",
+    border: "border-gray-600/30",
+    bar: "bg-gray-600",
+    icon: <Power className="h-4 w-4" />,
+    badgeBg: "bg-gray-600/20",
+    badgeText: "text-gray-500",
+    cardGlow: "",
+  },
+};
+
+/** operation_status 값 → 내부 키 매핑 */
+function resolveStatus(raw: string | null | undefined): OperationStatus {
+  if (!raw) return "unknown";
+  const v = raw.trim().toLowerCase();
+  if (["running", "가동", "가동중"].includes(v)) return "running";
+  if (["idle", "대기"].includes(v)) return "idle";
+  if (["maintenance", "점검", "수리", "점검/수리", "점검중"].includes(v)) return "maintenance";
+  if (["off", "비가동", "정지"].includes(v)) return "off";
+  return "unknown";
+}
+
+/* ───── 타입 ───── */
+
+interface Equipment {
+  id: string;
+  equipment_code: string;
+  equipment_name: string;
+  equipment_type: string;
+  installation_location: string;
+  operation_status: string;
+  manufacturer: string;
+  model_name: string;
+  image_path: string;
+}
+
+interface WorkInstruction {
+  id: string;
+  instruction_number: string;
+  item_name: string;
+  equipment_id: string;
+  worker_name: string;
+  status: string;
+}
+
+/* ───── 컴포넌트 ───── */
+
+export default function EquipmentMonitoringPage() {
+  const [equipments, setEquipments] = useState<Equipment[]>([]);
+  const [workInstructions, setWorkInstructions] = useState<WorkInstruction[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [filterStatus, setFilterStatus] = useState<OperationStatus | "all">("all");
+  const autoRefreshRef = useRef(autoRefresh);
+
+  // autoRefreshRef 동기화
+  useEffect(() => {
+    autoRefreshRef.current = autoRefresh;
+  }, [autoRefresh]);
+
+  /* ── 시간 업데이트 ── */
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* ── 데이터 fetch ── */
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      const [equipRes, wiRes] = await Promise.all([
+        apiClient.post("/table-management/tables/equipment_mng/data", {
+          autoFilter: true,
+          page: 1,
+          size: 500,
+        }),
+        apiClient.get("/work-instruction/list").catch(() => ({ data: { data: [] } })),
+      ]);
+
+      const eqRows: Equipment[] = equipRes.data?.data?.rows ?? equipRes.data?.rows ?? [];
+      setEquipments(eqRows);
+
+      const wiRows: WorkInstruction[] = wiRes.data?.data ?? wiRes.data?.rows ?? [];
+      setWorkInstructions(wiRows);
+    } catch (err) {
+      console.error("설비 모니터링 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ── 자동 갱신 (30초) ── */
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (autoRefreshRef.current) fetchData();
+    }, 30000);
+    return () => clearInterval(interval);
+  }, [fetchData]);
+
+  /* ── 요약 통계 ── */
+  const stats = useMemo(() => {
+    const counts: Record<OperationStatus, number> = {
+      running: 0,
+      idle: 0,
+      maintenance: 0,
+      off: 0,
+      unknown: 0,
+    };
+    equipments.forEach((eq) => {
+      const s = resolveStatus(eq.operation_status);
+      counts[s]++;
+    });
+    return { total: equipments.length, ...counts };
+  }, [equipments]);
+
+  /* ── 필터된 설비 ── */
+  const filteredEquipments = useMemo(() => {
+    if (filterStatus === "all") return equipments;
+    return equipments.filter((eq) => resolveStatus(eq.operation_status) === filterStatus);
+  }, [equipments, filterStatus]);
+
+  /* ── 설비별 작업지시 맵 ── */
+  const wiMap = useMemo(() => {
+    const map: Record<string, WorkInstruction[]> = {};
+    workInstructions.forEach((wi) => {
+      if (wi.equipment_id) {
+        if (!map[wi.equipment_id]) map[wi.equipment_id] = [];
+        map[wi.equipment_id].push(wi);
+      }
+    });
+    return map;
+  }, [workInstructions]);
+
+  /* ── 가동률 (모킹 — 센서 미연동) ── */
+  const getUtilization = (eq: Equipment): number | null => {
+    const s = resolveStatus(eq.operation_status);
+    if (s === "running") return 75 + Math.floor(Math.random() * 20); // 75~94
+    if (s === "idle") return 20 + Math.floor(Math.random() * 30); // 20~49
+    if (s === "maintenance") return 0;
+    if (s === "off") return 0;
+    return null;
+  };
+
+  /* ── 요약 카드 배열 ── */
+  const summaryCards: {
+    label: string;
+    count: number;
+    status: OperationStatus | "total";
+    color: string;
+    bg: string;
+    border: string;
+    icon: React.ReactNode;
+  }[] = [
+    {
+      label: "전체설비",
+      count: stats.total,
+      status: "total",
+      color: "text-blue-400",
+      bg: "bg-blue-500/10",
+      border: "border-blue-500/30",
+      icon: <Inbox className="h-5 w-5" />,
+    },
+    {
+      label: "가동중",
+      count: stats.running,
+      status: "running",
+      color: "text-emerald-400",
+      bg: "bg-emerald-500/10",
+      border: "border-emerald-500/30",
+      icon: <Zap className="h-5 w-5" />,
+    },
+    {
+      label: "대기",
+      count: stats.idle,
+      status: "idle",
+      color: "text-amber-400",
+      bg: "bg-amber-500/10",
+      border: "border-amber-500/30",
+      icon: <Pause className="h-5 w-5" />,
+    },
+    {
+      label: "점검/수리",
+      count: stats.maintenance,
+      status: "maintenance",
+      color: "text-red-400",
+      bg: "bg-red-500/10",
+      border: "border-red-500/30",
+      icon: <Wrench className="h-5 w-5" />,
+    },
+    {
+      label: "비가동",
+      count: stats.off + stats.unknown,
+      status: "off",
+      color: "text-gray-400",
+      bg: "bg-gray-500/10",
+      border: "border-gray-500/30",
+      icon: <Power className="h-5 w-5" />,
+    },
+  ];
+
+  /* ── 필터 pill ── */
+  const filterPills: { label: string; value: OperationStatus | "all"; color: string }[] = [
+    { label: "전체", value: "all", color: "bg-blue-500/20 text-blue-300 hover:bg-blue-500/30" },
+    { label: "가동중", value: "running", color: "bg-emerald-500/20 text-emerald-300 hover:bg-emerald-500/30" },
+    { label: "대기", value: "idle", color: "bg-amber-500/20 text-amber-300 hover:bg-amber-500/30" },
+    { label: "점검/수리", value: "maintenance", color: "bg-red-500/20 text-red-300 hover:bg-red-500/30" },
+    { label: "비가동", value: "off", color: "bg-gray-500/20 text-gray-300 hover:bg-gray-500/30" },
+  ];
+
+  /* ── 포맷 ── */
+  const formatTime = (d: Date) =>
+    d.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
+  const formatDate = (d: Date) =>
+    d.toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", weekday: "short" });
+
+  /* ────────────── 렌더 ────────────── */
+
+  return (
+    <div className="min-h-screen bg-gray-950 text-white p-4 md:p-6 space-y-5">
+      {/* ── 헤더 ── */}
+      <header className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <div className="h-8 w-1.5 rounded-full bg-amber-400" />
+          <h1 className="text-2xl font-bold tracking-tight">설비운영모니터링</h1>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* 현재 시간 */}
+          <div className="flex items-center gap-2 text-sm text-gray-400 bg-gray-800/60 rounded-lg px-3 py-1.5 border border-gray-700/50">
+            <Clock className="h-4 w-4" />
+            <span className="font-mono">{formatDate(currentTime)}</span>
+            <span className="font-mono text-white">{formatTime(currentTime)}</span>
+          </div>
+
+          {/* 자동갱신 토글 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn(
+              "border-gray-700 text-xs gap-1.5",
+              autoRefresh
+                ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20"
+                : "bg-gray-800 text-gray-400 hover:bg-gray-700"
+            )}
+            onClick={() => setAutoRefresh((v) => !v)}
+          >
+            <span className={cn("h-1.5 w-1.5 rounded-full", autoRefresh ? "bg-emerald-400 animate-pulse" : "bg-gray-600")} />
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+
+          {/* 새로고침 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-gray-700 bg-gray-800 text-gray-300 hover:bg-gray-700 gap-1.5"
+            onClick={fetchData}
+            disabled={loading}
+          >
+            <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+            새로고침
+          </Button>
+        </div>
+      </header>
+
+      {/* ── 요약 카드 5개 ── */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
+        {summaryCards.map((card) => (
+          <button
+            key={card.label}
+            onClick={() =>
+              setFilterStatus(card.status === "total" ? "all" : (card.status as OperationStatus))
+            }
+            className={cn(
+              "relative flex items-center gap-3 rounded-xl border px-4 py-3 transition-all hover:scale-[1.02]",
+              card.bg,
+              card.border,
+              "hover:shadow-lg"
+            )}
+          >
+            <div className={cn("flex items-center justify-center rounded-lg p-2", card.bg, card.color)}>
+              {card.icon}
+            </div>
+            <div className="text-left">
+              <p className="text-xs text-gray-500">{card.label}</p>
+              <p className={cn("text-2xl font-bold tabular-nums", card.color)}>{card.count}</p>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {/* ── 필터 pill ── */}
+      <div className="flex flex-wrap gap-2">
+        {filterPills.map((pill) => (
+          <button
+            key={pill.value}
+            onClick={() => setFilterStatus(pill.value)}
+            className={cn(
+              "rounded-full px-4 py-1.5 text-sm font-medium transition-all",
+              filterStatus === pill.value
+                ? cn(pill.color, "ring-1 ring-white/20")
+                : "bg-gray-800/60 text-gray-500 hover:text-gray-300 hover:bg-gray-800"
+            )}
+          >
+            {pill.label}
+          </button>
+        ))}
+        <span className="ml-auto text-sm text-gray-600 self-center">
+          {filteredEquipments.length}대 표시
+        </span>
+      </div>
+
+      {/* ── 로딩 ── */}
+      {loading && equipments.length === 0 && (
+        <div className="flex items-center justify-center py-20">
+          <Loader2 className="h-8 w-8 animate-spin text-gray-600" />
+          <span className="ml-3 text-gray-500">설비 데이터를 불러오는 중...</span>
+        </div>
+      )}
+
+      {/* ── 데이터 없음 ── */}
+      {!loading && equipments.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-gray-600">
+          <Inbox className="h-12 w-12 mb-3" />
+          <p className="text-lg">등록된 설비가 없습니다.</p>
+        </div>
+      )}
+
+      {/* ── 설비 카드 그리드 ── */}
+      {filteredEquipments.length > 0 && (
+        <div
+          className="grid gap-4"
+          style={{ gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))" }}
+        >
+          {filteredEquipments.map((eq) => {
+            const status = resolveStatus(eq.operation_status);
+            const cfg = STATUS_MAP[status];
+            const utilization = getUtilization(eq);
+            const eqWIs = wiMap[eq.id] ?? [];
+
+            return (
+              <div
+                key={eq.id}
+                className={cn(
+                  "relative overflow-hidden rounded-xl border bg-gray-900/80 backdrop-blur transition-all hover:shadow-lg",
+                  cfg.border,
+                  cfg.cardGlow
+                )}
+              >
+                {/* 좌측 색상 바 */}
+                <div className={cn("absolute left-0 top-0 bottom-0 w-1 rounded-l-xl", cfg.bar)} />
+
+                {/* 상단: 설비명 + 상태 배지 */}
+                <div className="flex items-start justify-between px-4 pt-3 pb-2 pl-5">
+                  <div className="min-w-0 flex-1">
+                    <h3 className="text-base font-semibold text-white truncate">
+                      {eq.equipment_name || "이름 없음"}
+                    </h3>
+                    <p className="text-xs text-gray-500 mt-0.5 truncate">
+                      {eq.equipment_type || "-"} · {eq.installation_location || "-"}
+                    </p>
+                  </div>
+                  <Badge
+                    className={cn(
+                      "ml-2 shrink-0 border-0 gap-1 text-xs font-medium",
+                      cfg.badgeBg,
+                      cfg.badgeText
+                    )}
+                  >
+                    {cfg.icon}
+                    {cfg.label}
+                  </Badge>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 정보 그리드 */}
+                <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 px-4 pl-5 py-2.5 text-sm">
+                  <div>
+                    <span className="text-gray-500 text-xs">금일 가동시간</span>
+                    <p className="text-white font-medium">-</p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">생산수량</span>
+                    <p className="text-white font-medium">-</p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">작업자</span>
+                    <p className="text-white font-medium">
+                      {eqWIs.length > 0 && eqWIs[0].worker_name
+                        ? eqWIs[0].worker_name
+                        : "-"}
+                    </p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">설비코드</span>
+                    <p className="text-white font-medium truncate">{eq.equipment_code || "-"}</p>
+                  </div>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 가동률 프로그레스 */}
+                <div className="px-4 pl-5 py-2.5">
+                  <div className="flex items-center justify-between text-xs mb-1.5">
+                    <span className="text-gray-500">가동률</span>
+                    <span className={cn("font-bold tabular-nums", utilization !== null ? cfg.color : "text-gray-600")}>
+                      {utilization !== null ? `${utilization}%` : "-"}
+                    </span>
+                  </div>
+                  <div className="h-2 w-full rounded-full bg-gray-800 overflow-hidden">
+                    {utilization !== null && (
+                      <div
+                        className={cn("h-full rounded-full transition-all duration-700", cfg.bar)}
+                        style={{ width: `${utilization}%` }}
+                      />
+                    )}
+                  </div>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 현재 작업지시 */}
+                <div className="px-4 pl-5 py-2.5">
+                  <p className="text-xs text-gray-500 mb-1">현재 작업지시</p>
+                  {eqWIs.length > 0 ? (
+                    <div className="space-y-1">
+                      {eqWIs.slice(0, 2).map((wi) => (
+                        <div key={wi.id} className="flex items-center gap-2 text-sm">
+                          <span className="text-blue-400 font-mono text-xs shrink-0">
+                            {wi.instruction_number || "-"}
+                          </span>
+                          <span className="text-gray-300 truncate">
+                            {wi.item_name || "-"}
+                          </span>
+                        </div>
+                      ))}
+                      {eqWIs.length > 2 && (
+                        <p className="text-xs text-gray-600">+{eqWIs.length - 2}건 더</p>
+                      )}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-gray-600 italic">배정된 작업 없음</p>
+                  )}
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 센서 데이터 (PLC 미연동) */}
+                <div className="flex items-center gap-4 px-4 pl-5 py-2.5 text-xs">
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">온도</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">압력</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">RPM</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* 필터 결과 없음 */}
+      {!loading && equipments.length > 0 && filteredEquipments.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 text-gray-600">
+          <Inbox className="h-10 w-10 mb-2" />
+          <p>해당 상태의 설비가 없습니다.</p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/monitoring/production/page.tsx b/frontend/app/(main)/COMPANY_8/monitoring/production/page.tsx
new file mode 100644
index 00000000..fb8aa24b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/monitoring/production/page.tsx
@@ -0,0 +1,504 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Timer,
+  CheckCircle2,
+  AlertTriangle,
+  TrendingUp,
+  Play,
+  Pause,
+} from "lucide-react";
+
+// ─── 타입 정의 ─────────────────────────────────────────────
+interface WorkInstructionDetail {
+  item_name?: string;
+  spec?: string;
+  customer_name?: string;
+}
+
+interface WorkInstruction {
+  id: string;
+  wi_id?: string;
+  work_instruction_no: string;
+  status: string; // 일반 / 긴급
+  qty: number;
+  completed_qty: number;
+  start_date: string | null;
+  end_date: string | null;
+  worker: string | null;
+  equipment_id: string | null;
+  equipment_name?: string | null;
+  details?: WorkInstructionDetail[];
+}
+
+interface ProcessStep {
+  wo_id: string;
+  process_name: string;
+  status: string; // acceptable / completed
+  seq_no: number;
+}
+
+type FilterTab = "전체" | "대기" | "진행중" | "완료";
+
+// ─── 유틸리티 ──────────────────────────────────────────────
+function formatDate(dateStr: string | null | undefined): string {
+  if (!dateStr) return "-";
+  try {
+    const d = new Date(dateStr);
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+  } catch {
+    return dateStr;
+  }
+}
+
+function formatTime(date: Date): string {
+  const h = String(date.getHours()).padStart(2, "0");
+  const m = String(date.getMinutes()).padStart(2, "0");
+  const s = String(date.getSeconds()).padStart(2, "0");
+  return `${h}:${m}:${s}`;
+}
+
+// 작업지시별 공정현황으로 진행상태 계산
+function computeProgress(
+  wiId: string,
+  processMap: Map<string, ProcessStep[]>
+): "대기" | "진행중" | "완료" {
+  const steps = processMap.get(wiId);
+  if (!steps || steps.length === 0) return "대기";
+  const completedCount = steps.filter((s) => s.status === "completed").length;
+  if (completedCount === 0) return "대기";
+  if (completedCount === steps.length) return "완료";
+  return "진행중";
+}
+
+// ─── 메인 컴포넌트 ────────────────────────────────────────
+export default function ProductionMonitoringPage() {
+  const [workInstructions, setWorkInstructions] = useState<WorkInstruction[]>([]);
+  const [processMap, setProcessMap] = useState<Map<string, ProcessStep[]>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [activeTab, setActiveTab] = useState<FilterTab>("전체");
+
+  // ─── 실시간 시계 ─────────────────────────────────────────
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // ─── 데이터 로드 ─────────────────────────────────────────
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+
+      // 작업지시 목록 조회
+      const wiRes = await apiClient.get("/work-instruction/list");
+      const wiRaw: WorkInstruction[] =
+        wiRes.data?.success && Array.isArray(wiRes.data.data) ? wiRes.data.data : [];
+      // 작업지시번호 기준 중복 제거 (디테일 JOIN으로 중복 발생 가능)
+      const seen = new Set<string>();
+      const wiData = wiRaw.filter((wi) => {
+        const key = wi.work_instruction_no || wi.id;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+      setWorkInstructions(wiData);
+
+      // 공정현황 조회 (실패해도 작업지시는 표시)
+      try {
+        const procRes = await apiClient.post("/table-management/tables/work_order_process/data", {
+          page: 1, size: 1000, autoFilter: true,
+        });
+        const rows: ProcessStep[] = procRes.data?.data?.data || procRes.data?.data?.rows || procRes.data?.data || [];
+
+        // wo_id별로 그룹핑 후, 같은 seq_no+process_name은 1건으로 합침 (배치 실행 이력 중복 제거)
+        const rawMap = new Map<string, ProcessStep[]>();
+        rows.forEach((row) => {
+          const key = String(row.wo_id);
+          if (!rawMap.has(key)) rawMap.set(key, []);
+          rawMap.get(key)!.push(row);
+        });
+
+        const map = new Map<string, ProcessStep[]>();
+        rawMap.forEach((steps, woId) => {
+          // seq_no + process_name 기준으로 대표 1건만 (completed 우선)
+          const grouped = new Map<string, ProcessStep>();
+          for (const s of steps) {
+            const gk = `${s.seq_no}_${s.process_name}`;
+            const existing = grouped.get(gk);
+            if (!existing || (s.status === "completed" && existing.status !== "completed")) {
+              grouped.set(gk, s);
+            }
+          }
+          const deduped = Array.from(grouped.values()).sort((a, b) => (a.seq_no ?? 0) - (b.seq_no ?? 0));
+          map.set(woId, deduped);
+        });
+        setProcessMap(map);
+      } catch {
+        // 공정현황 조회 실패 → 빈 맵 유지
+        setProcessMap(new Map());
+      }
+    } catch (err) {
+      console.error("생산모니터링 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // ─── 자동갱신 (30초) ─────────────────────────────────────
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const timer = setInterval(fetchData, 30000);
+    return () => clearInterval(timer);
+  }, [autoRefresh, fetchData]);
+
+  // ─── 통계 계산 ───────────────────────────────────────────
+  const stats = useMemo(() => {
+    let waiting = 0;
+    let inProgress = 0;
+    let completed = 0;
+    let totalQty = 0;
+    let completedQty = 0;
+
+    workInstructions.forEach((wi) => {
+      const progress = computeProgress(wi.wi_id || wi.id, processMap);
+      if (progress === "대기") waiting++;
+      else if (progress === "진행중") inProgress++;
+      else completed++;
+      totalQty += Number((wi as any).total_qty || wi.qty || 0);
+      completedQty += Number(wi.completed_qty) || 0;
+    });
+
+    const achievementRate = totalQty > 0 ? Math.round((completedQty / totalQty) * 100) : 0;
+
+    return { waiting, inProgress, completed, achievementRate };
+  }, [workInstructions, processMap]);
+
+  // ─── 필터링된 작업 목록 ──────────────────────────────────
+  const filteredInstructions = useMemo(() => {
+    return workInstructions.filter((wi) => {
+      if (activeTab === "전체") return true;
+      const progress = computeProgress(wi.wi_id || wi.id, processMap);
+      return progress === activeTab;
+    });
+  }, [workInstructions, processMap, activeTab]);
+
+  // ─── 렌더링 ──────────────────────────────────────────────
+  return (
+    <div className="flex flex-col h-full min-h-0 bg-background p-4 gap-4 overflow-auto">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between flex-shrink-0">
+        <h1 className="text-2xl font-bold text-foreground">생산모니터링</h1>
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5 text-muted-foreground text-sm">
+            <Clock className="w-4 h-4" />
+            <span className="font-mono">{formatTime(currentTime)}</span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={loading}
+            className="gap-1.5"
+          >
+            <RefreshCw className={cn("w-4 h-4", loading && "animate-spin")} />
+            새로고침
+          </Button>
+          <Button
+            variant={autoRefresh ? "default" : "outline"}
+            size="sm"
+            onClick={() => setAutoRefresh(!autoRefresh)}
+            className="gap-1.5"
+          >
+            {autoRefresh ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+        </div>
+      </div>
+
+      {/* 요약 카드 */}
+      <div className="grid grid-cols-4 gap-4 flex-shrink-0">
+        <SummaryCard
+          icon={<Timer className="w-5 h-5" />}
+          label="대기중"
+          value={stats.waiting}
+          colorClass="text-amber-500 bg-amber-500/10 border-amber-500/20"
+        />
+        <SummaryCard
+          icon={<Loader2 className="w-5 h-5" />}
+          label="진행중"
+          value={stats.inProgress}
+          colorClass="text-blue-500 bg-blue-500/10 border-blue-500/20"
+        />
+        <SummaryCard
+          icon={<CheckCircle2 className="w-5 h-5" />}
+          label="완료"
+          value={stats.completed}
+          colorClass="text-emerald-500 bg-emerald-500/10 border-emerald-500/20"
+        />
+        <SummaryCard
+          icon={<TrendingUp className="w-5 h-5" />}
+          label="달성율"
+          value={`${stats.achievementRate}%`}
+          colorClass="text-purple-500 bg-purple-500/10 border-purple-500/20"
+        />
+      </div>
+
+      {/* 탭 필터 */}
+      <div className="flex items-center gap-2 flex-shrink-0">
+        {(["전체", "대기", "진행중", "완료"] as FilterTab[]).map((tab) => (
+          <Button
+            key={tab}
+            variant={activeTab === tab ? "default" : "outline"}
+            size="sm"
+            onClick={() => setActiveTab(tab)}
+            className={cn(
+              "min-w-[64px]",
+              activeTab === tab && tab === "대기" && "bg-amber-500 hover:bg-amber-600 text-white",
+              activeTab === tab && tab === "진행중" && "bg-blue-500 hover:bg-blue-600 text-white",
+              activeTab === tab && tab === "완료" && "bg-emerald-500 hover:bg-emerald-600 text-white"
+            )}
+          >
+            {tab}
+            {tab === "전체" && ` (${workInstructions.length})`}
+            {tab === "대기" && ` (${stats.waiting})`}
+            {tab === "진행중" && ` (${stats.inProgress})`}
+            {tab === "완료" && ` (${stats.completed})`}
+          </Button>
+        ))}
+      </div>
+
+      {/* 로딩 상태 */}
+      {loading && workInstructions.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <Loader2 className="w-10 h-10 animate-spin mb-3" />
+          <span className="text-sm">데이터를 불러오는 중입니다...</span>
+        </div>
+      )}
+
+      {/* 빈 상태 */}
+      {!loading && filteredInstructions.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <Inbox className="w-12 h-12 mb-3" />
+          <span className="text-sm">
+            {activeTab === "전체"
+              ? "등록된 작업지시가 없습니다."
+              : `"${activeTab}" 상태의 작업지시가 없습니다.`}
+          </span>
+        </div>
+      )}
+
+      {/* 작업 카드 그리드 */}
+      {filteredInstructions.length > 0 && (
+        <div
+          className="grid gap-4 flex-1"
+          style={{ gridTemplateColumns: "repeat(auto-fill, minmax(420px, 1fr))" }}
+        >
+          {filteredInstructions.map((wi, idx) => (
+            <WorkCard
+              key={wi.id || `wi-${idx}`}
+              instruction={wi}
+              steps={processMap.get(wi.wi_id || wi.id) || []}
+              progress={computeProgress(wi.wi_id || wi.id, processMap)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── 요약 카드 ─────────────────────────────────────────────
+function SummaryCard({
+  icon,
+  label,
+  value,
+  colorClass,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: number | string;
+  colorClass: string;
+}) {
+  return (
+    <div className="bg-card border rounded-lg p-4 flex items-center gap-4">
+      <div className={cn("p-2.5 rounded-lg border", colorClass)}>{icon}</div>
+      <div className="flex flex-col">
+        <span className="text-xs text-muted-foreground">{label}</span>
+        <span className="text-2xl font-bold text-foreground">{value}</span>
+      </div>
+    </div>
+  );
+}
+
+// ─── 작업 카드 ─────────────────────────────────────────────
+function WorkCard({
+  instruction: wi,
+  steps,
+  progress,
+}: {
+  instruction: WorkInstruction;
+  steps: ProcessStep[];
+  progress: "대기" | "진행중" | "완료";
+}) {
+  // API 응답은 flat 구조 (details 배열 아님)
+  const itemName = (wi as any).item_name || "-";
+  const spec = (wi as any).item_spec || "-";
+  const customerName = (wi as any).customer_name || "-";
+
+  // 진척률 (total_qty 또는 qty)
+  const totalQty = Number((wi as any).total_qty || wi.qty || 0);
+  const completedQty = Number(wi.completed_qty || 0);
+  const progressPercent = totalQty > 0 ? Math.min(100, Math.round((completedQty / totalQty) * 100)) : 0;
+
+  // 공정 현황 계산
+  const completedSteps = steps.filter((s) => s.status === "completed").length;
+  const currentStep = steps.find((s) => s.status !== "completed");
+
+  // 프로그레스바 색상
+  const barColor =
+    progressPercent >= 100
+      ? "bg-emerald-500"
+      : progressPercent >= 50
+        ? "bg-blue-500"
+        : "bg-amber-500";
+
+  // 상태 배지 스타일
+  const statusBadge: Record<string, string> = {
+    "대기": "bg-amber-500/10 text-amber-500 border-amber-500/30",
+    "진행중": "bg-blue-500/10 text-blue-500 border-blue-500/30",
+    "완료": "bg-emerald-500/10 text-emerald-500 border-emerald-500/30",
+  };
+
+  const isUrgent = wi.status === "긴급";
+
+  return (
+    <div className="bg-card border rounded-lg overflow-hidden flex flex-col">
+      {/* 카드 헤더 */}
+      <div className="flex items-center justify-between px-4 py-3 border-b bg-muted/30">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-sm text-foreground">
+            {wi.work_instruction_no}
+          </span>
+          {isUrgent && (
+            <Badge
+              variant="outline"
+              className="bg-red-500/10 text-red-500 border-red-500/30 text-xs gap-1"
+            >
+              <AlertTriangle className="w-3 h-3" />
+              긴급
+            </Badge>
+          )}
+        </div>
+        <Badge variant="outline" className={cn("text-xs", statusBadge[progress])}>
+          {progress}
+        </Badge>
+      </div>
+
+      {/* 카드 본문 - 정보 */}
+      <div className="px-4 py-3 grid grid-cols-2 gap-x-4 gap-y-1.5 text-sm border-b">
+        <InfoRow label="품목명" value={itemName} />
+        <InfoRow label="규격" value={spec} />
+        <InfoRow label="거래처" value={customerName} />
+        <InfoRow label="작업자" value={wi.worker || "-"} />
+        <InfoRow label="납기일" value={formatDate(wi.end_date)} />
+        <InfoRow label="설비" value={wi.equipment_name || wi.equipment_id || "-"} />
+      </div>
+
+      {/* 공정현황 */}
+      <div className="px-4 py-3 border-b">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs text-muted-foreground font-medium">공정현황</span>
+          {steps.length > 0 && (
+            <span className="text-xs text-muted-foreground">
+              완료 {completedSteps}/{steps.length}
+              {currentStep && (
+                <span>
+                  {" "}
+                  · 현재: <span className="text-blue-400">{currentStep.process_name}</span>
+                </span>
+              )}
+            </span>
+          )}
+        </div>
+        {steps.length > 0 ? (
+          <div className="flex gap-1 flex-wrap">
+            {steps.map((step, idx) => {
+              const isDone = step.status === "completed";
+              const isCurrent = !isDone && idx === completedSteps;
+              return (
+                <span
+                  key={`${step.wo_id}-${step.seq_no}-${idx}`}
+                  className={cn(
+                    "px-2 py-0.5 rounded text-xs font-medium transition-all",
+                    isDone && "bg-emerald-500/20 text-emerald-400",
+                    isCurrent && "bg-blue-500/20 text-blue-400 animate-pulse",
+                    !isDone && !isCurrent && "bg-muted text-muted-foreground"
+                  )}
+                >
+                  {step.process_name}
+                </span>
+              );
+            })}
+          </div>
+        ) : (
+          <span className="text-xs text-muted-foreground">공정 정보 없음</span>
+        )}
+      </div>
+
+      {/* 프로그레스바 */}
+      <div className="px-4 py-3">
+        <div className="flex items-center justify-between mb-1.5">
+          <span className="text-xs text-muted-foreground">
+            {completedQty} / {totalQty}
+          </span>
+          <span
+            className={cn(
+              "text-xs font-bold",
+              progressPercent >= 100
+                ? "text-emerald-500"
+                : progressPercent >= 50
+                  ? "text-blue-500"
+                  : "text-amber-500"
+            )}
+          >
+            {progressPercent}%
+          </span>
+        </div>
+        <div className="w-full h-2.5 bg-muted rounded-full overflow-hidden">
+          <div
+            className={cn("h-full rounded-full transition-all duration-500", barColor)}
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── 정보 행 ───────────────────────────────────────────────
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center gap-1.5 min-w-0">
+      <span className="text-muted-foreground shrink-0">{label}:</span>
+      <span className="text-foreground truncate">{value}</span>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/monitoring/quality/page.tsx b/frontend/app/(main)/COMPANY_8/monitoring/quality/page.tsx
new file mode 100644
index 00000000..b0135bbe
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/monitoring/quality/page.tsx
@@ -0,0 +1,512 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Search,
+  ClipboardCheck,
+} from "lucide-react";
+
+/* ───── 타입 ───── */
+interface ProcessRow {
+  id: number;
+  wo_id: number;
+  process_code: string;
+  process_name: string;
+  status: string;
+  plan_qty: number;
+  input_qty: number;
+  good_qty: number;
+  defect_qty: number;
+  started_at: string | null;
+  completed_at: string | null;
+  worker_name: string;
+}
+
+interface InspectionRow {
+  no: number;
+  inspectionNo: string;
+  inspectionType: string;
+  itemName: string;
+  spec: string;
+  inspectionQty: number;
+  goodQty: number;
+  defectQty: number;
+  defectRate: number;
+  result: "합격" | "불합격" | "대기";
+  inspectorName: string;
+  inspectedAt: string;
+  remark: string;
+}
+
+/* ───── 탭 정의 ───── */
+const TABS = [
+  { key: "all", label: "전체" },
+  { key: "process", label: "공정검사" },
+  { key: "incoming", label: "입고검사" },
+  { key: "shipping", label: "출하검사" },
+] as const;
+type TabKey = (typeof TABS)[number]["key"];
+
+/* ───── 유틸 ───── */
+const fmt = (n: number) => n.toLocaleString("ko-KR");
+const pct = (n: number) =>
+  `${n.toFixed(1)}%`;
+
+const badgeVariant = (
+  type: "result" | "type" | "defectRate",
+  value: string | number,
+) => {
+  if (type === "result") {
+    if (value === "합격")
+      return "bg-emerald-100 text-emerald-700 border-emerald-200";
+    if (value === "불합격") return "bg-red-100 text-red-700 border-red-200";
+    return "bg-amber-100 text-amber-700 border-amber-200";
+  }
+  if (type === "type") {
+    if (value === "공정검사")
+      return "bg-purple-100 text-purple-700 border-purple-200";
+    if (value === "입고검사") return "bg-blue-100 text-blue-700 border-blue-200";
+    return "bg-emerald-100 text-emerald-700 border-emerald-200";
+  }
+  // defectRate
+  const rate = typeof value === "number" ? value : parseFloat(String(value));
+  if (rate > 3) return "text-red-600 font-semibold";
+  if (rate >= 1) return "text-amber-600 font-semibold";
+  return "text-emerald-600";
+};
+
+/* ───── 컴포넌트 ───── */
+export default function QualityMonitoringPage() {
+  const [processData, setProcessData] = useState<ProcessRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [activeTab, setActiveTab] = useState<TabKey>("all");
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  /* ───── 시계 ───── */
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* ───── 데이터 조회 ───── */
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await apiClient.post(
+        "/table-management/tables/work_order_process/data",
+        { autoFilter: true },
+      );
+      const rows: ProcessRow[] = res.data?.data?.rows ?? res.data?.rows ?? [];
+      setProcessData(rows);
+    } catch (err) {
+      console.error("품질점검현황 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ───── 자동 갱신 ───── */
+  useEffect(() => {
+    if (autoRefresh) {
+      intervalRef.current = setInterval(fetchData, 30_000);
+    }
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [autoRefresh, fetchData]);
+
+  /* ───── 검사 행 변환 ───── */
+  const inspectionRows: InspectionRow[] = useMemo(() => {
+    const today = new Date().toISOString().slice(0, 10);
+
+    return processData
+      .filter((r) => {
+        // 금일 데이터만
+        const dt = r.completed_at || r.started_at || "";
+        return dt.slice(0, 10) === today;
+      })
+      .map((r, idx) => {
+        const inspQty = r.input_qty || r.plan_qty || 0;
+        const goodQty = r.good_qty ?? 0;
+        const defectQty = r.defect_qty ?? 0;
+        const defectRate = inspQty > 0 ? (defectQty / inspQty) * 100 : 0;
+        const result: InspectionRow["result"] =
+          r.status !== "completed"
+            ? "대기"
+            : defectQty > 0
+              ? "불합격"
+              : "합격";
+
+        return {
+          no: idx + 1,
+          inspectionNo: `QC-${String(r.id).padStart(8, "0").slice(0, 8)}`,
+          inspectionType: "공정검사",
+          itemName: r.process_name || "-",
+          spec: r.process_code || "-",
+          inspectionQty: inspQty,
+          goodQty,
+          defectQty,
+          defectRate,
+          result,
+          inspectorName: r.worker_name || "-",
+          inspectedAt: r.completed_at || r.started_at || "-",
+          remark: "",
+        };
+      });
+  }, [processData]);
+
+  /* ───── 탭 필터링 ───── */
+  const filteredRows = useMemo(() => {
+    if (activeTab === "all" || activeTab === "process") return inspectionRows;
+    // 입고/출하는 데이터 없음
+    return [];
+  }, [activeTab, inspectionRows]);
+
+  /* ───── 요약 통계 ───── */
+  const summary = useMemo(() => {
+    const total = inspectionRows.length;
+    const passed = inspectionRows.filter((r) => r.result === "합격").length;
+    const failed = inspectionRows.filter((r) => r.result === "불합격").length;
+    const pending = inspectionRows.filter((r) => r.result === "대기").length;
+    const passRate = total > 0 ? (passed / total) * 100 : 0;
+    return { total, passed, failed, pending, passRate };
+  }, [inspectionRows]);
+
+  /* ───── 요약 카드 정의 ───── */
+  const summaryCards = [
+    {
+      label: "금일 검사건수",
+      value: fmt(summary.total),
+      sub: "건",
+      color: "from-slate-500 to-slate-600",
+      textColor: "text-white",
+    },
+    {
+      label: "합격",
+      value: fmt(summary.passed),
+      sub: "건",
+      color: "from-emerald-500 to-emerald-600",
+      textColor: "text-white",
+    },
+    {
+      label: "불합격",
+      value: fmt(summary.failed),
+      sub: "건",
+      color: "from-red-500 to-red-600",
+      textColor: "text-white",
+    },
+    {
+      label: "검사대기",
+      value: fmt(summary.pending),
+      sub: "건",
+      color: "from-amber-500 to-amber-600",
+      textColor: "text-white",
+    },
+    {
+      label: "합격률",
+      value: pct(summary.passRate),
+      sub: "",
+      color: "from-purple-500 to-purple-600",
+      textColor: "text-white",
+    },
+  ];
+
+  /* ───── 렌더링 ───── */
+  return (
+    <div className="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
+      {/* ── 헤더 ── */}
+      <div className="flex items-center justify-between px-6 py-4 bg-white dark:bg-gray-800 border-b">
+        <div className="flex items-center gap-3">
+          <ClipboardCheck className="h-6 w-6 text-emerald-600" />
+          <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+            품질점검현황{" "}
+            <span className="text-emerald-600">모니터링</span>
+          </h1>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            <Clock className="h-4 w-4" />
+            <span className="font-mono">
+              {currentTime.toLocaleString("ko-KR", {
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit",
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+                hour12: false,
+              })}
+            </span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={loading}
+          >
+            {loading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+            <span className="ml-1">새로고침</span>
+          </Button>
+          <Button
+            variant={autoRefresh ? "default" : "outline"}
+            size="sm"
+            onClick={() => setAutoRefresh((p) => !p)}
+            className={cn(
+              autoRefresh &&
+                "bg-emerald-600 hover:bg-emerald-700 text-white",
+            )}
+          >
+            <Clock className="h-4 w-4 mr-1" />
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+        </div>
+      </div>
+
+      {/* ── 본문 ── */}
+      <div className="flex-1 overflow-auto p-6 space-y-6">
+        {/* 요약 카드 */}
+        <div className="grid grid-cols-5 gap-4">
+          {summaryCards.map((card) => (
+            <div
+              key={card.label}
+              className={cn(
+                "rounded-xl bg-gradient-to-br p-5 shadow-md",
+                card.color,
+              )}
+            >
+              <p className="text-sm font-medium text-white/80">
+                {card.label}
+              </p>
+              <p className={cn("mt-2 text-3xl font-bold", card.textColor)}>
+                {card.value}
+                {card.sub && (
+                  <span className="ml-1 text-base font-normal text-white/70">
+                    {card.sub}
+                  </span>
+                )}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* 검사유형 탭 */}
+        <div className="flex items-center gap-2">
+          {TABS.map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={cn(
+                "px-4 py-1.5 rounded-full text-sm font-medium transition-colors",
+                activeTab === tab.key
+                  ? "bg-emerald-600 text-white shadow"
+                  : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border",
+              )}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* 테이블 영역 */}
+        <div className="bg-white dark:bg-gray-800 rounded-xl shadow border overflow-hidden">
+          {/* 입고/출하 준비중 */}
+          {(activeTab === "incoming" || activeTab === "shipping") ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Search className="h-12 w-12 mb-4 opacity-40" />
+              <p className="text-lg font-medium">준비중</p>
+              <p className="text-sm mt-1">
+                {activeTab === "incoming" ? "입고검사" : "출하검사"} 데이터는
+                아직 지원되지 않습니다.
+              </p>
+            </div>
+          ) : loading && filteredRows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Loader2 className="h-10 w-10 animate-spin mb-4" />
+              <p>데이터를 불러오는 중...</p>
+            </div>
+          ) : filteredRows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Inbox className="h-12 w-12 mb-4 opacity-40" />
+              <p className="text-lg font-medium">금일 검사 데이터가 없습니다</p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow className="bg-gray-50 dark:bg-gray-700/50">
+                    <TableHead className="w-[50px] text-center">No</TableHead>
+                    <TableHead className="min-w-[120px]">검사번호</TableHead>
+                    <TableHead className="min-w-[90px] text-center">
+                      검사유형
+                    </TableHead>
+                    <TableHead className="min-w-[140px]">품목명</TableHead>
+                    <TableHead className="min-w-[100px]">규격</TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      검사수량
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      합격수량
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      불합격수량
+                    </TableHead>
+                    <TableHead className="min-w-[70px] text-right">
+                      불량율
+                    </TableHead>
+                    <TableHead className="min-w-[160px] text-center">
+                      검사결과
+                    </TableHead>
+                    <TableHead className="min-w-[70px] text-center">
+                      판정
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-center">
+                      검사자
+                    </TableHead>
+                    <TableHead className="min-w-[150px]">검사일시</TableHead>
+                    <TableHead className="min-w-[100px]">비고</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredRows.map((row) => {
+                    const goodPct =
+                      row.inspectionQty > 0
+                        ? (row.goodQty / row.inspectionQty) * 100
+                        : 0;
+                    const defectPct =
+                      row.inspectionQty > 0
+                        ? (row.defectQty / row.inspectionQty) * 100
+                        : 0;
+
+                    return (
+                      <TableRow
+                        key={row.no}
+                        className="hover:bg-gray-50 dark:hover:bg-gray-700/30"
+                      >
+                        <TableCell className="text-center text-sm text-gray-500">
+                          {row.no}
+                        </TableCell>
+                        <TableCell className="font-mono text-sm">
+                          {row.inspectionNo}
+                        </TableCell>
+                        <TableCell className="text-center">
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-xs",
+                              badgeVariant("type", row.inspectionType),
+                            )}
+                          >
+                            {row.inspectionType}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-sm font-medium">
+                          {row.itemName}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-500">
+                          {row.spec}
+                        </TableCell>
+                        <TableCell className="text-right text-sm">
+                          {fmt(row.inspectionQty)}
+                        </TableCell>
+                        <TableCell className="text-right text-sm text-emerald-600">
+                          {fmt(row.goodQty)}
+                        </TableCell>
+                        <TableCell className="text-right text-sm text-red-600">
+                          {fmt(row.defectQty)}
+                        </TableCell>
+                        <TableCell
+                          className={cn(
+                            "text-right text-sm",
+                            badgeVariant("defectRate", row.defectRate),
+                          )}
+                        >
+                          {pct(row.defectRate)}
+                        </TableCell>
+                        {/* 검사결과 프로그레스바 */}
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <div className="flex-1 h-3 bg-gray-100 dark:bg-gray-600 rounded-full overflow-hidden flex">
+                              <div
+                                className="h-full bg-emerald-500 transition-all"
+                                style={{ width: `${goodPct}%` }}
+                              />
+                              <div
+                                className="h-full bg-red-500 transition-all"
+                                style={{ width: `${defectPct}%` }}
+                              />
+                            </div>
+                            <span className="text-xs text-gray-400 whitespace-nowrap w-[42px] text-right">
+                              {pct(goodPct)}
+                            </span>
+                          </div>
+                        </TableCell>
+                        {/* 판정 배지 */}
+                        <TableCell className="text-center">
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-xs",
+                              badgeVariant("result", row.result),
+                            )}
+                          >
+                            {row.result}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-center text-sm">
+                          {row.inspectorName}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-500">
+                          {row.inspectedAt !== "-"
+                            ? new Date(row.inspectedAt).toLocaleString(
+                                "ko-KR",
+                                {
+                                  month: "2-digit",
+                                  day: "2-digit",
+                                  hour: "2-digit",
+                                  minute: "2-digit",
+                                  hour12: false,
+                                },
+                              )
+                            : "-"}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-400">
+                          {row.remark || "-"}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/outsourcing/subcontractor-item/page.tsx b/frontend/app/(main)/COMPANY_8/outsourcing/subcontractor-item/page.tsx
new file mode 100644
index 00000000..ad6622da
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/outsourcing/subcontractor-item/page.tsx
@@ -0,0 +1,582 @@
+"use client";
+
+/**
+ * 외주품목정보 — 하드코딩 페이지
+ *
+ * 좌측: 품목 목록 (subcontractor_item_mapping 기반 품목, item_info 조인)
+ * 우측: 선택한 품목의 외주업체 정보 (subcontractor_item_mapping → subcontractor_mng 조인)
+ *
+ * 외주업체관리와 양방향 연동 (같은 subcontractor_item_mapping 테이블)
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Plus, Save, Loader2, FileSpreadsheet, Download, Pencil, Inbox, Search, RotateCcw, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const ITEM_TABLE = "item_info";
+const MAPPING_TABLE = "subcontractor_item_mapping";
+const SUBCONTRACTOR_TABLE = "subcontractor_mng";
+
+const formatNum = (v: any) => (v == null || v === "" ? "-" : Number(v).toLocaleString());
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "selling_price", label: "판매가격" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
+];
+export default function SubcontractorItemPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 좌측: 품목
+  const [items, setItems] = useState<any[]>([]);
+  const [itemLoading, setItemLoading] = useState(false);
+  const [itemCount, setItemCount] = useState(0);
+  const [inputKeyword, setInputKeyword] = useState("");
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  // 우측: 외주업체
+  const [subcontractorItems, setSubcontractorItems] = useState<any[]>([]);
+  const [subcontractorLoading, setSubcontractorLoading] = useState(false);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 외주업체 추가 모달
+  const [subSelectOpen, setSubSelectOpen] = useState(false);
+  const [subSearchKeyword, setSubSearchKeyword] = useState("");
+  const [subSearchResults, setSubSearchResults] = useState<any[]>([]);
+  const [subSearchLoading, setSubSearchLoading] = useState(false);
+  const [subCheckedIds, setSubCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 수정 모달
+  const [editItemOpen, setEditItemOpen] = useState(false);
+  const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-subcontractor-item", ITEM_TABLE, GRID_COLUMNS_CONFIG);
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      item_number: { width: "w-[110px]" },
+      item_name: { minWidth: "min-w-[130px]", render: (v) => v || "-" },
+      size: { width: "w-[90px]", render: (v) => v || "-" },
+      unit: { width: "w-[60px]", render: (v) => v || "-" },
+      standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
+      selling_price: { width: "w-[90px]", align: "right", formatNumber: true },
+      currency_code: { width: "w-[50px]", render: (v) => v || "-" },
+      status: { width: "w-[60px]", render: (v) => v || "-" },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 좌측: 품목 조회 (division이 "외주관리"인 품목만 필터링)
+  const outsourcingDivisionCode = categoryOptions["division"]?.find(
+    (o) => o.label === "외주관리" || o.label === "외주" || o.label.includes("외주")
+  )?.code;
+
+  const fetchItems = useCallback(async () => {
+    setItemLoading(true);
+    try {
+      const filters: any[] = [];
+      if (outsourcingDivisionCode) {
+        filters.push({ columnName: "division", operator: "equals", value: outsourcingDivisionCode });
+      }
+      if (searchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: searchKeyword });
+      }
+      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const CATS = ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+      setItemCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setItemLoading(false);
+    }
+  }, [searchKeyword, categoryOptions, outsourcingDivisionCode]);
+
+  useEffect(() => { fetchItems(); }, [fetchItems]);
+
+  // 선택된 품목
+  const selectedItem = items.find((i) => i.id === selectedItemId);
+
+  // 우측: 외주업체 목록 조회
+  useEffect(() => {
+    if (!selectedItem?.item_number) { setSubcontractorItems([]); return; }
+    const itemKey = selectedItem.item_number;
+    const fetchSubcontractorItems = async () => {
+      setSubcontractorLoading(true);
+      try {
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
+          autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        const subIds = [...new Set(mappings.map((m: any) => m.subcontractor_id).filter(Boolean))];
+        let subMap: Record<string, any> = {};
+        if (subIds.length > 0) {
+          try {
+            const subRes = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
+              page: 1, size: subIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "subcontractor_code", operator: "in", value: subIds }] },
+              autoFilter: true,
+            });
+            for (const s of (subRes.data?.data?.data || subRes.data?.data?.rows || [])) {
+              subMap[s.subcontractor_code] = s;
+            }
+          } catch { /* skip */ }
+        }
+
+        setSubcontractorItems(mappings.map((m: any) => ({
+          ...m,
+          subcontractor_code: m.subcontractor_id,
+          subcontractor_name: subMap[m.subcontractor_id]?.subcontractor_name || "",
+        })));
+      } catch (err) {
+        console.error("외주업체 조회 실패:", err);
+      } finally {
+        setSubcontractorLoading(false);
+      }
+    };
+    fetchSubcontractorItems();
+  }, [selectedItem?.item_number]);
+
+  // 외주업체 검색
+  const searchSubcontractors = async () => {
+    setSubSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (subSearchKeyword) filters.push({ columnName: "subcontractor_name", operator: "contains", value: subSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const all = res.data?.data?.data || res.data?.data?.rows || [];
+      const existing = new Set(subcontractorItems.map((s: any) => s.subcontractor_id || s.subcontractor_code));
+      setSubSearchResults(all.filter((s: any) => !existing.has(s.subcontractor_code)));
+    } catch { /* skip */ } finally { setSubSearchLoading(false); }
+  };
+
+  // 외주업체 추가 저장
+  const addSelectedSubcontractors = async () => {
+    const selected = subSearchResults.filter((s) => subCheckedIds.has(s.id));
+    if (selected.length === 0 || !selectedItem) return;
+    try {
+      for (const sub of selected) {
+        await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          subcontractor_id: sub.subcontractor_code,
+          item_id: selectedItem.item_number,
+        });
+      }
+      toast.success(`${selected.length}개 외주업체가 추가되었습니다.`);
+      setSubCheckedIds(new Set());
+      setSubSelectOpen(false);
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "외주업체 추가에 실패했습니다.");
+    }
+  };
+
+  // 품목 수정
+  const openEditItem = () => {
+    if (!selectedItem) return;
+    setEditItemForm({ ...selectedItem });
+    setEditItemOpen(true);
+  };
+
+  const handleEditSave = async () => {
+    if (!editItemForm.id) return;
+    setSaving(true);
+    try {
+      await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
+        originalData: { id: editItemForm.id },
+        updatedData: {
+          selling_price: editItemForm.selling_price || null,
+          standard_price: editItemForm.standard_price || null,
+          currency_code: editItemForm.currency_code || null,
+        },
+      });
+      toast.success("수정되었습니다.");
+      setEditItemOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "수정에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) return;
+    const data = items.map((i) => ({
+      품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
+      기준단가: i.standard_price, 판매가격: i.selling_price, 통화: i.currency_code, 상태: i.status,
+    }));
+    await exportToExcel(data, "외주품목정보.xlsx", "외주품목");
+    toast.success("다운로드 완료");
+  };
+
+  const handleSearch = () => setSearchKeyword(inputKeyword);
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>외주관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">외주품목정보</span>
+      </div>
+
+      {/* 검색 바 */}
+      <div className="flex items-center gap-2 px-4 py-3 bg-card border rounded-lg shrink-0">
+        <span className="text-[11px] font-semibold text-muted-foreground whitespace-nowrap">품명</span>
+        <Input
+          className="h-9 w-[200px]"
+          placeholder="품명 검색"
+          value={inputKeyword}
+          onChange={(e) => setInputKeyword(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+        />
+        <Button variant="outline" size="sm" className="h-9" onClick={() => { setInputKeyword(""); setSearchKeyword(""); }}>
+          <RotateCcw className="w-3.5 h-3.5 mr-1" /> 초기화
+        </Button>
+        <Button size="sm" className="h-9" onClick={handleSearch}>
+          <Search className="w-3.5 h-3.5 mr-1" /> 조회
+        </Button>
+        <div className="ml-auto flex gap-1.5">
+          <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 외주품목 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">외주품목 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{itemCount}건</span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <EDataTable
+                columns={mainTableColumns}
+                data={ts.groupData(items)}
+                loading={itemLoading}
+                emptyMessage="등록된 외주품목이 없어요"
+                selectedId={selectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
+                onRowDoubleClick={() => openEditItem()}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-subcontractor-item-main"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 외주업체 정보 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">외주업체 정보</h3>
+                  {selectedItem && <Badge variant="outline" className="font-normal">{selectedItem.item_name}</Badge>}
+                </div>
+                <Button variant="outline" size="sm" disabled={!selectedItemId}
+                  onClick={() => { setSubCheckedIds(new Set()); setSubSelectOpen(true); searchSubcontractors(); }}>
+                  <Plus className="w-3.5 h-3.5 mr-1" /> 외주업체 추가
+                </Button>
+              </div>
+              {!selectedItemId ? (
+                <div className="flex-1 flex flex-col items-center justify-center gap-3 m-3 border-2 border-dashed rounded-lg text-center">
+                  <Inbox className="w-12 h-12 text-muted-foreground/40" />
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">품목을 선택해주세요</p>
+                    <p className="text-xs text-muted-foreground mt-1">좌측에서 품목을 선택하면 외주업체 정보가 표시돼요</p>
+                  </div>
+                </div>
+              ) : subcontractorLoading ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : subcontractorItems.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                  <Inbox className="w-8 h-8 mb-2 opacity-40" />
+                  <p className="text-sm">등록된 외주업체가 없어요</p>
+                </div>
+              ) : (
+                <div className="flex-1 overflow-auto">
+                  <Table noWrapper>
+                    <thead className="sticky top-0 z-10 bg-card">
+                      <TableRow>
+                        <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
+                        <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
+                        <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품번</TableHead>
+                        <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품명</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                        <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                      </TableRow>
+                    </thead>
+                    <TableBody>
+                      {subcontractorItems.map((item, idx) => (
+                        <TableRow key={item.id || idx}>
+                          <TableCell className="text-[13px] font-mono">{item.subcontractor_code || "-"}</TableCell>
+                          <TableCell className="text-sm">{item.subcontractor_name || "-"}</TableCell>
+                          <TableCell className="text-[13px]">{item.subcontractor_item_code || "-"}</TableCell>
+                          <TableCell className="text-[13px]">{item.subcontractor_item_name || "-"}</TableCell>
+                          <TableCell className="text-[13px] text-right font-mono">{formatNum(item.base_price)}</TableCell>
+                          <TableCell className="text-[13px] text-right font-mono">{formatNum(item.calculated_price)}</TableCell>
+                          <TableCell className="text-[13px]">{item.currency_code || "-"}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 품목 수정 모달 */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>외주품목 수정</DialogTitle>
+            <DialogDescription>{editItemForm.item_number || ""} — {editItemForm.item_name || ""}</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-sm text-muted-foreground">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+            <div className="col-span-2 border-t my-2" />
+            <div className="space-y-1.5">
+              <Label className="text-sm">판매가격</Label>
+              <Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
+                placeholder="판매가격" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">기준단가</Label>
+              <Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">통화</Label>
+              <Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 외주업체 추가 모달 */}
+      <Dialog open={subSelectOpen} onOpenChange={setSubSelectOpen}>
+        <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>외주업체 선택</DialogTitle>
+            <DialogDescription>품목에 추가할 외주업체를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="외주업체명 검색" value={subSearchKeyword}
+              onChange={(e) => setSubSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchSubcontractors()}
+              className="h-9 flex-1" />
+            <Button size="sm" onClick={searchSubcontractors} disabled={subSearchLoading} className="h-9">
+              {subSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto border rounded-lg">
+            <Table noWrapper>
+              <thead className="sticky top-0 z-10 bg-card">
+                <TableRow>
+                  <TableHead className="w-[40px] text-center">
+                    <input type="checkbox"
+                      checked={subSearchResults.length > 0 && subCheckedIds.size === subSearchResults.length}
+                      onChange={(e) => {
+                        if (e.target.checked) setSubCheckedIds(new Set(subSearchResults.map((s) => s.id)));
+                        else setSubCheckedIds(new Set());
+                      }} />
+                  </TableHead>
+                  <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
+                  <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
+                  <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래유형</TableHead>
+                  <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                </TableRow>
+              </thead>
+              <TableBody>
+                {subSearchResults.length === 0 ? (
+                  <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없어요</TableCell></TableRow>
+                ) : subSearchResults.map((s) => (
+                  <TableRow key={s.id} className={cn("cursor-pointer", subCheckedIds.has(s.id) && "bg-primary/5")}
+                    onClick={() => setSubCheckedIds((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(s.id)) next.delete(s.id); else next.add(s.id);
+                      return next;
+                    })}>
+                    <TableCell className="text-center"><input type="checkbox" checked={subCheckedIds.has(s.id)} readOnly /></TableCell>
+                    <TableCell className="text-[13px]">{s.subcontractor_code}</TableCell>
+                    <TableCell className="text-sm">{s.subcontractor_name}</TableCell>
+                    <TableCell className="text-[13px]">{s.division}</TableCell>
+                    <TableCell className="text-[13px]">{s.contact_person}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{subCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setSubSelectOpen(false)}>취소</Button>
+                <Button onClick={addSelectedSubcontractors} disabled={subCheckedIds.size === 0}>
+                  <Plus className="w-4 h-4 mr-1" /> {subCheckedIds.size}개 추가
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={ITEM_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchItems()}
+      />
+
+      {/* 테이블 설정 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/outsourcing/subcontractor/page.tsx b/frontend/app/(main)/COMPANY_8/outsourcing/subcontractor/page.tsx
new file mode 100644
index 00000000..934c03c5
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/outsourcing/subcontractor/page.tsx
@@ -0,0 +1,1410 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Wrench, Package, Search, X, RefreshCw, Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { validateField, validateForm, formatField } from "@/lib/utils/validation";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const SUBCONTRACTOR_TABLE = "subcontractor_mng";
+const MAPPING_TABLE = "subcontractor_item_mapping";
+const PRICE_TABLE = "subcontractor_item_prices";
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "subcontractor_code", label: "외주사코드" },
+  { key: "subcontractor_name", label: "외주사명" },
+  { key: "division", label: "업체 유형" },
+  { key: "status", label: "상태" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "담당자 전화번호" },
+  { key: "contact_email", label: "담당자 이메일" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "phone", label: "전화번호" },
+  { key: "fax", label: "팩스" },
+  { key: "representative", label: "대표자명" },
+  { key: "grade", label: "등급" },
+  { key: "process_type", label: "공정 유형" },
+  { key: "payment_terms", label: "결제 조건" },
+  { key: "remarks", label: "비고" },
+  { key: "writer", label: "작성자" },
+  { key: "created_date", label: "생성일시" },
+  { key: "updated_date", label: "수정일시" },
+];
+export default function SubcontractorManagementPage() {
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 외주업체 목록
+  const [subcontractors, setSubcontractors] = useState<any[]>([]);
+  const [subcontractorLoading, setSubcontractorLoading] = useState(false);
+  const [subcontractorCount, setSubcontractorCount] = useState(0);
+  const [selectedSubcontractorId, setSelectedSubcontractorId] = useState<string | null>(null);
+
+  // 우측: 품목 단가
+  const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceLoading, setPriceLoading] = useState(false);
+
+  // 품목 편집 데이터
+  const [editItemData, setEditItemData] = useState<any>(null);
+
+  // 외주업체 등록/수정 모달
+  const [subcontractorModalOpen, setSubcontractorModalOpen] = useState(false);
+  const [subcontractorEditMode, setSubcontractorEditMode] = useState(false);
+  const [subcontractorForm, setSubcontractorForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 품목 추가 모달 (1단계: 검색/선택)
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 상세 입력 모달 (2단계)
+  const [itemDetailOpen, setItemDetailOpen] = useState(false);
+  const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{
+    _id: string; subcontractor_item_code: string; subcontractor_item_name: string;
+  }>>>({});
+  const [itemPrices, setItemPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 테이블 설정
+  const DEFAULT_VISIBLE_KEYS = ["subcontractor_code", "subcontractor_name", "division", "status", "contact_person", "contact_phone"];
+  const ts = useTableSettings("c16-subcontractor-v2", SUBCONTRACTOR_TABLE, GRID_COLUMNS_CONFIG, DEFAULT_VISIBLE_KEYS);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["division", "status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${SUBCONTRACTOR_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${PRICE_TABLE}/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+    };
+    load();
+  }, []);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 셀 렌더링 헬퍼
+  const renderCellValue = (row: any, key: string) => {
+    const val = key === "division" ? (row.division_label || row.division)
+      : key === "status" ? (row.status_label || row.status)
+      : row[key];
+    if (!val) return "-";
+    if (key === "subcontractor_code") return <span className="text-primary">{val}</span>;
+    if (key === "division") return <Badge variant="secondary" className="text-[10px] px-1.5 py-0">{val}</Badge>;
+    if (key === "status") return <Badge variant="outline" className="text-[10px] px-1.5 py-0">{val}</Badge>;
+    if (key === "subcontractor_name") return <span className="font-medium">{val}</span>;
+    return val;
+  };
+
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      render: (value: any, row: any) => renderCellValue(row, col.key),
+    }));
+  }, [ts.visibleColumns, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 외주업체 목록 조회
+  const fetchSubcontractors = useCallback(async () => {
+    setSubcontractorLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+
+      const res = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => ({
+        ...r,
+        division_label: resolve("division", r.division),
+        status_label: resolve("status", r.status),
+      }));
+      setSubcontractors(data);
+      setSubcontractorCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      toast.error("외주업체 목록을 불러오지 못했어요");
+    } finally {
+      setSubcontractorLoading(false);
+    }
+  }, [searchFilters, categoryOptions]);
+
+  useEffect(() => { fetchSubcontractors(); }, [fetchSubcontractors]);
+
+  // 선택된 외주업체
+  const selectedSubcontractor = subcontractors.find((c) => c.id === selectedSubcontractorId);
+
+  // 선택된 외주업체의 품목 단가 조회
+  useEffect(() => {
+    if (!selectedSubcontractor?.subcontractor_code) { setPriceItems([]); return; }
+    const fetchItems = async () => {
+      setPriceLoading(true);
+      try {
+        const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor.subcontractor_code },
+          ]},
+          autoFilter: true,
+        });
+        const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        let priceMap: Record<string, any> = {};
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor.subcontractor_code },
+              ]},
+              autoFilter: true,
+            });
+            const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+            for (const p of prices) {
+              const key = p.item_id;
+              if (!priceMap[key] || (p.start_date && (!priceMap[key].start_date || p.start_date > priceMap[key].start_date))) {
+                priceMap[key] = p;
+              }
+            }
+          } catch { /* skip */ }
+        }
+
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
+        };
+        setPriceItems(mappings.map((m: any) => {
+          const itemInfo = itemMap[m.item_id] || {};
+          const price = priceMap[m.item_id] || {};
+          return {
+            ...m,
+            item_number: m.item_id,
+            item_name: itemInfo.item_name || "",
+            base_price_type: priceResolve("base_price_type", price.base_price_type || m.base_price_type || ""),
+            base_price: price.base_price || m.base_price || "",
+            discount_type: priceResolve("discount_type", price.discount_type || m.discount_type || ""),
+            discount_value: price.discount_value || m.discount_value || "",
+            rounding_type: priceResolve("rounding_unit_value", price.rounding_type || m.rounding_type || ""),
+            calculated_price: price.calculated_price || m.calculated_price || "",
+            currency_code: priceResolve("currency_code", price.currency_code || m.currency_code || ""),
+          };
+        }));
+      } catch (err) {
+        // 품목 조회 실패 시 무시
+      } finally {
+        setPriceLoading(false);
+      }
+    };
+    fetchItems();
+  }, [selectedSubcontractor?.subcontractor_code, priceCategoryOptions]);
+
+  // 외주업체 등록 모달 열기
+  const openSubcontractorRegister = async () => {
+    setSubcontractorForm({});
+    setFormErrors({});
+    setSubcontractorEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setSubcontractorModalOpen(true);
+
+    // 채번 규칙 조회 (subcontractor_mng.subcontractor_code)
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/subcontractor_mng/subcontractor_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시
+    }
+  };
+
+  const openSubcontractorEdit = () => {
+    if (!selectedSubcontractor) return;
+    setSubcontractorForm({ ...selectedSubcontractor });
+    setFormErrors({});
+    setSubcontractorEditMode(true);
+    setSubcontractorModalOpen(true);
+  };
+
+  const handleFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setSubcontractorForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => {
+      const next = { ...prev };
+      if (error) next[field] = error; else delete next[field];
+      return next;
+    });
+  };
+
+  const handleSubcontractorSave = async () => {
+    if (!subcontractorForm.subcontractor_name) { toast.error("외주업체명은 필수예요"); return; }
+    if (!subcontractorForm.status) { toast.error("상태는 필수예요"); return; }
+    const errors = validateForm(subcontractorForm, ["contact_phone", "email", "business_number"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) {
+      toast.error("입력 형식을 확인해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, division_label, status_label, ...fields } = subcontractorForm;
+      if (subcontractorEditMode && id) {
+        await apiClient.put(`/table-management/tables/${SUBCONTRACTOR_TABLE}/edit`, {
+          originalData: { id }, updatedData: fields,
+        });
+        toast.success("수정되었어요");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+        const saveFields = allocatedCode ? { ...fields, subcontractor_code: allocatedCode } : fields;
+        await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/add`, { id: crypto.randomUUID(), ...saveFields });
+        toast.success("등록되었어요");
+      }
+      setSubcontractorModalOpen(false);
+      fetchSubcontractors();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 외주업체 삭제
+  const handleSubcontractorDelete = async () => {
+    if (!selectedSubcontractorId) return;
+    const ok = await confirm("외주업체를 삭제할까요?", {
+      description: "관련된 품목 매핑, 단가 정보도 함께 삭제돼요",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${SUBCONTRACTOR_TABLE}/delete`, {
+        data: [{ id: selectedSubcontractorId }],
+      });
+      toast.success("삭제되었어요");
+      setSelectedSubcontractorId(null);
+      fetchSubcontractors();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  // 품목 검색
+  const searchItems = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const allItems = res.data?.data?.data || res.data?.data?.rows || [];
+      const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
+      const OUTSOURCING_CODE = "CAT_MMDJB7R4_TO3T";
+      setItemSearchResults(allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        const div = item.division || "";
+        return div.includes(OUTSOURCING_CODE) || div.includes("외주");
+      }));
+    } catch { /* skip */ } finally { setItemSearchLoading(false); }
+  };
+
+  // 품목 선택 완료 → 상세 입력 모달로 전환
+  const goToItemDetail = () => {
+    const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
+    if (selected.length === 0) { toast.error("품목을 선택해주세요"); return; }
+    setSelectedItemsForDetail(selected);
+    const mappings: typeof itemMappings = {};
+    const prices: typeof itemPrices = {};
+    for (const item of selected) {
+      const key = item.item_number || item.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: item.standard_price || item.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: item.standard_price || item.selling_price || "",
+      }];
+    }
+    setItemMappings(mappings);
+    setItemPrices(prices);
+    setEditItemData(null);
+    setItemSelectOpen(false);
+    setItemDetailOpen(true);
+  };
+
+  const addMappingRow = (itemKey: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, subcontractor_item_code: "", subcontractor_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (itemKey: string, rowId: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  const addPriceRow = (itemKey: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (itemKey: string, rowId: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          updated.calculated_price = String(Math.round(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  // 우측 품목 편집 열기 — 해당 item_number의 모든 매핑+단가를 로드
+  const openEditItem = async (row: any) => {
+    const itemKey = row.item_number || row.item_id;
+    let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "equals", value: itemKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) itemInfo = found;
+    } catch { /* skip */ }
+
+    // 같은 item_number를 가진 모든 priceItems 행에서 매핑 정보 추출
+    const allRowsForItem = priceItems.filter((p: any) => (p.item_number || p.item_id) === itemKey);
+    const allMappingIds = allRowsForItem.map((r: any) => r.id).filter(Boolean);
+
+    const mappingRows = allRowsForItem
+      .filter((r: any) => r.subcontractor_item_code || r.subcontractor_item_name)
+      .map((r: any) => ({
+        _id: `m_existing_${r.id}`,
+        subcontractor_item_code: r.subcontractor_item_code || "",
+        subcontractor_item_name: r.subcontractor_item_name || "",
+      }));
+
+    // 서버에서 이 item+subcontractor의 모든 단가를 raw 코드로 가져오기
+    let priceRows: Array<{
+      _id: string; start_date: string; end_date: string; currency_code: string;
+      base_price_type: string; base_price: string; discount_type: string;
+      discount_value: string; rounding_type: string; rounding_unit_value: string;
+      calculated_price: string;
+    }> = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor!.subcontractor_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]},
+        autoFilter: true,
+      });
+      const rawPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = rawPrices.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date || "",
+        end_date: p.end_date || "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedItemsForDetail([itemInfo]);
+    setItemMappings({ [itemKey]: mappingRows });
+    setItemPrices({ [itemKey]: priceRows });
+    // editItemData에 원본 매핑 ID 목록 저장 (삭제 시 사용)
+    setEditItemData({ ...row, _allMappingIds: allMappingIds });
+    setItemDetailOpen(true);
+  };
+
+  const handleItemDetailSave = async () => {
+    if (!selectedSubcontractor) return;
+    const isEditingExisting = !!editItemData;
+    setSaving(true);
+    try {
+      for (const item of selectedItemsForDetail) {
+        const itemKey = item.item_number || item.id;
+        const mappingRows = itemMappings[itemKey] || [];
+
+        if (isEditingExisting && editItemData?.id) {
+          // 1) 기존 매핑 모두 삭제
+          const allMappingIds: string[] = editItemData._allMappingIds || [editItemData.id];
+          if (allMappingIds.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: allMappingIds.map((mid: string) => ({ id: mid })),
+            });
+          }
+
+          // 2) 기존 단가 모두 삭제 (subcontractor_id + item_id 기준)
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor.subcontractor_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+            if (existing.length > 0) {
+              await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+                data: existing.map((p: any) => ({ id: p.id })),
+              });
+            }
+          } catch { /* skip */ }
+
+          // 3) 모든 매핑 재삽입
+          let firstMappingId: string | null = null;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const newId = crypto.randomUUID();
+            if (mi === 0) firstMappingId = newId;
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: newId,
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              subcontractor_item_code: mappingRows[mi].subcontractor_item_code || "",
+              subcontractor_item_name: mappingRows[mi].subcontractor_item_name || "",
+            });
+          }
+          // 매핑이 비어있으면 빈 매핑 1개 생성 (item_id 연결 유지)
+          if (mappingRows.length === 0) {
+            firstMappingId = crypto.randomUUID();
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: firstMappingId,
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              subcontractor_item_code: "",
+              subcontractor_item_name: "",
+            });
+          }
+
+          // 4) 모든 단가 재삽입
+          const filteredPriceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of filteredPriceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: firstMappingId || "",
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        } else {
+          let mappingId: string | null = null;
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
+            subcontractor_item_code: mappingRows[0]?.subcontractor_item_code || "",
+            subcontractor_item_name: mappingRows[0]?.subcontractor_item_name || "",
+          });
+          mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
+              subcontractor_item_code: mappingRows[mi].subcontractor_item_code || "",
+              subcontractor_item_name: mappingRows[mi].subcontractor_item_name || "",
+            });
+          }
+
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었어요" : `${selectedItemsForDetail.length}개 품목이 추가되었어요`);
+      setItemDetailOpen(false);
+      setEditItemData(null);
+      setItemCheckedIds(new Set());
+      const cid = selectedSubcontractorId;
+      setSelectedSubcontractorId(null);
+      setTimeout(() => setSelectedSubcontractorId(cid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (subcontractors.length === 0) return;
+    toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
+    try {
+      const allMappings: any[] = [];
+      const subCodes = subcontractors.map((c) => c.subcontractor_code).filter(Boolean);
+
+      if (subCodes.length > 0) {
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 5000, autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        for (const m of mappings) {
+          const itemInfo = itemMap[m.item_id] || {};
+          allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
+        }
+      }
+
+      const rows: Record<string, any>[] = [];
+      for (const c of subcontractors) {
+        const subMappings = allMappings.filter((m) => m.subcontractor_id === c.subcontractor_code);
+        if (subMappings.length === 0) {
+          rows.push({
+            외주업체코드: c.subcontractor_code, 외주업체명: c.subcontractor_name,
+            거래유형: getCategoryLabel("division", c.division),
+            담당자: c.contact_person, 전화번호: c.contact_phone,
+            사업자번호: c.business_number, 이메일: c.email,
+            상태: getCategoryLabel("status", c.status),
+            품목코드: "", 품명: "", 규격: "",
+            외주품번: "", 외주품명: "",
+            기준가: "", 할인유형: "", 할인값: "", 단가: "", 통화: "",
+          });
+        } else {
+          for (const m of subMappings) {
+            rows.push({
+              외주업체코드: c.subcontractor_code, 외주업체명: c.subcontractor_name,
+              거래유형: getCategoryLabel("division", c.division),
+              담당자: c.contact_person, 전화번호: c.contact_phone,
+              사업자번호: c.business_number, 이메일: c.email,
+              상태: getCategoryLabel("status", c.status),
+              품목코드: m.item_id || "", 품명: m.item_name || "", 규격: m.item_spec || "",
+              외주품번: m.subcontractor_item_code || "", 외주품명: m.subcontractor_item_name || "",
+              기준가: m.base_price || "", 할인유형: m.discount_type || "", 할인값: m.discount_value || "",
+              단가: m.calculated_price || "", 통화: m.currency_code || "",
+            });
+          }
+        }
+      }
+
+      await exportToExcel(rows, "외주업체관리.xlsx", "외주업체+품목");
+      toast.dismiss("excel-dl");
+      toast.success(`${rows.length}행 다운로드 완료`);
+    } catch (err) {
+      toast.dismiss("excel-dl");
+      toast.error("다운로드에 실패했어요");
+    }
+  };
+
+  // 셀렉트 렌더링
+  const renderSelect = (field: string, value: string, onChange: (v: string) => void, placeholder: string) => (
+    <Select value={value || ""} onValueChange={onChange}>
+      <SelectTrigger className="h-9 text-sm"><SelectValue placeholder={placeholder} /></SelectTrigger>
+      <SelectContent>
+        {(categoryOptions[field] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+      </SelectContent>
+    </Select>
+  );
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>외주관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="font-medium text-foreground">외주사관리</span>
+      </nav>
+
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={SUBCONTRACTOR_TABLE}
+        filterId="c16-subcontractor"
+        onFilterChange={setSearchFilters}
+        dataCount={subcontractorCount}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={excelDetecting}
+              onClick={async () => {
+                setExcelDetecting(true);
+                try {
+                  const result = await autoDetectMultiTableConfig(SUBCONTRACTOR_TABLE);
+                  if (result.success && result.data) {
+                    setExcelChainConfig(result.data);
+                    setExcelUploadOpen(true);
+                  } else {
+                    toast.error(result.message || "테이블 구조 분석 실패");
+                  }
+                } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+              }}
+            >
+              {excelDetecting
+                ? <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                : <FileSpreadsheet className="mr-1.5 h-4 w-4" />}
+              엑셀업로드
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+              <Download className="mr-1.5 h-4 w-4" />
+              엑셀다운로드
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 분할 패널 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg">
+
+        {/* 좌측: 외주업체 목록 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-3 shrink-0">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-semibold">외주업체 목록</span>
+                <Badge variant="outline" className="text-xs px-1.5 py-0">{subcontractorCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Button size="sm" onClick={openSubcontractorRegister}>
+                  <Plus className="h-3.5 w-3.5 mr-1" /> 등록
+                </Button>
+                <Button variant="outline" size="sm" disabled={!selectedSubcontractorId} onClick={openSubcontractorEdit}>
+                  <Pencil className="h-3.5 w-3.5 mr-1" /> 수정
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={!selectedSubcontractorId}
+                  onClick={handleSubcontractorDelete}
+                  className="text-destructive border-destructive/20 hover:bg-destructive/10"
+                >
+                  <Trash2 className="h-3.5 w-3.5 mr-1" /> 삭제
+                </Button>
+                <Button variant="ghost" size="sm" onClick={fetchSubcontractors} disabled={subcontractorLoading}>
+                  {subcontractorLoading
+                    ? <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    : <RefreshCw className="h-3.5 w-3.5" />}
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                  <Settings2 className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            </div>
+            <EDataTable
+              columns={mainTableColumns}
+              data={ts.groupData(subcontractors)}
+              loading={subcontractorLoading}
+              emptyMessage="등록된 외주업체가 없어요"
+              selectedId={selectedSubcontractorId}
+              onSelect={(id) => setSelectedSubcontractorId(id)}
+              onRowDoubleClick={() => openSubcontractorEdit()}
+              showPagination={true}
+              draggableColumns={false}
+              columnOrderKey="c16-subcontractor-main"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 품목 정보 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-3 shrink-0">
+              <div className="flex items-center gap-2">
+                {selectedSubcontractor ? (
+                  <>
+                    <span className="text-sm font-semibold">{selectedSubcontractor.subcontractor_name}</span>
+                    <Badge variant="outline" className="text-[10px] px-1.5 py-0">{selectedSubcontractor.subcontractor_code}</Badge>
+                  </>
+                ) : (
+                  <>
+                    <Package className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-semibold">품목 정보</span>
+                  </>
+                )}
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!selectedSubcontractorId}
+                onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}
+              >
+                <Plus className="h-3.5 w-3.5 mr-1" /> 품목 추가
+              </Button>
+            </div>
+            <div className="flex-1 overflow-auto">
+              {!selectedSubcontractorId ? (
+                <div className="flex items-center justify-center h-full">
+                  <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-12 py-10 text-center">
+                    <Wrench className="h-10 w-10 text-muted-foreground opacity-30" />
+                    <p className="text-sm text-muted-foreground">좌측에서 외주사를 선택해주세요</p>
+                  </div>
+                </div>
+              ) : priceLoading ? (
+                <div className="flex items-center justify-center py-16">
+                  <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                </div>
+              ) : priceItems.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+                  <Package className="h-12 w-12 mb-3 opacity-30" />
+                  <p className="text-sm font-medium">등록된 품목이 없어요</p>
+                </div>
+              ) : (
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품번</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품명</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {(() => {
+                      // item_number 기준 그룹화 (순서 유지)
+                      const grouped: { itemNumber: string; rows: any[] }[] = [];
+                      const groupMap = new Map<string, any[]>();
+                      for (const item of priceItems) {
+                        const key = item.item_number || item.item_id || item.id;
+                        if (!groupMap.has(key)) {
+                          const rows: any[] = [];
+                          groupMap.set(key, rows);
+                          grouped.push({ itemNumber: key, rows });
+                        }
+                        groupMap.get(key)!.push(item);
+                      }
+                      return grouped.map((group, gIdx) =>
+                        group.rows.map((item, rowIdx) => (
+                          <TableRow
+                            key={item.id}
+                            className={cn(
+                              "cursor-pointer hover:bg-muted/50",
+                              rowIdx === 0 && gIdx > 0 && "border-t-2 border-t-border/60"
+                            )}
+                            onDoubleClick={() => openEditItem(item)}
+                          >
+                            <TableCell className="text-[13px] text-primary">
+                              {rowIdx === 0 ? item.item_number : ""}
+                            </TableCell>
+                            <TableCell className="text-[13px]">
+                              {rowIdx === 0 ? item.item_name : ""}
+                            </TableCell>
+                            <TableCell className="text-[13px]">{item.subcontractor_item_code || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.subcontractor_item_name || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.base_price_type || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right">{item.base_price ? Number(item.base_price).toLocaleString() : "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.discount_type || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right">{item.discount_value || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right font-semibold">{item.calculated_price ? Number(item.calculated_price).toLocaleString() : "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.currency_code || "-"}</TableCell>
+                          </TableRow>
+                        ))
+                      );
+                    })()}
+                  </TableBody>
+                </Table>
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 모달들 ========== */}
+
+      {/* 외주업체 등록/수정 모달 */}
+      <Dialog open={subcontractorModalOpen} onOpenChange={setSubcontractorModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[680px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{subcontractorEditMode ? "외주업체 수정" : "외주업체 등록"}</DialogTitle>
+            <DialogDescription>
+              {subcontractorEditMode ? "외주업체 정보를 수정해요." : "새로운 외주업체를 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-xs">외주업체 코드</Label>
+              <Input
+                value={subcontractorEditMode ? (subcontractorForm.subcontractor_code || "") : (previewCode || subcontractorForm.subcontractor_code || "")}
+                onChange={(e) => {
+                  if (!subcontractorEditMode && !numberingRuleId) {
+                    setSubcontractorForm((p) => ({ ...p, subcontractor_code: e.target.value }));
+                  }
+                }}
+                placeholder={numberingRuleId && !subcontractorEditMode ? "자동 생성돼요" : "외주업체 코드"}
+                className="h-9 text-sm"
+                readOnly={!!numberingRuleId && !subcontractorEditMode}
+                disabled={subcontractorEditMode}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">외주업체명 <span className="text-destructive">*</span></Label>
+              <Input
+                value={subcontractorForm.subcontractor_name || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, subcontractor_name: e.target.value }))}
+                placeholder="외주업체명"
+                className="h-9 text-sm"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">거래 유형</Label>
+              {renderSelect("division", subcontractorForm.division, (v) => setSubcontractorForm((p) => ({ ...p, division: v })), "거래 유형")}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">상태 <span className="text-destructive">*</span></Label>
+              {renderSelect("status", subcontractorForm.status, (v) => setSubcontractorForm((p) => ({ ...p, status: v })), "상태")}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">담당자</Label>
+              <Input
+                value={subcontractorForm.contact_person || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, contact_person: e.target.value }))}
+                placeholder="담당자"
+                className="h-9 text-sm"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">전화번호</Label>
+              <Input
+                value={subcontractorForm.contact_phone || ""}
+                onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                placeholder="010-0000-0000"
+                className={cn("h-9 text-sm", formErrors.contact_phone && "border-destructive")}
+              />
+              {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">이메일</Label>
+              <Input
+                value={subcontractorForm.email || ""}
+                onChange={(e) => handleFormChange("email", e.target.value)}
+                placeholder="example@email.com"
+                className={cn("h-9 text-sm", formErrors.email && "border-destructive")}
+              />
+              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">사업자번호</Label>
+              <Input
+                value={subcontractorForm.business_number || ""}
+                onChange={(e) => handleFormChange("business_number", e.target.value)}
+                placeholder="000-00-00000"
+                className={cn("h-9 text-sm", formErrors.business_number && "border-destructive")}
+              />
+              {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs">주소</Label>
+              <Input
+                value={subcontractorForm.address || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, address: e.target.value }))}
+                placeholder="주소"
+                className="h-9 text-sm"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setSubcontractorModalOpen(false)}>취소</Button>
+            <Button onClick={handleSubcontractorSave} disabled={saving}>
+              {saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <Save className="h-4 w-4 mr-1.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 품목 추가 모달 (1단계: 검색/선택) */}
+      <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[780px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>품목 선택</DialogTitle>
+            <DialogDescription>외주업체에 추가할 품목을 선택해요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="flex gap-2">
+              <Input
+                placeholder="품명/품목코드 검색"
+                value={itemSearchKeyword}
+                onChange={(e) => setItemSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchItems()}
+                className="h-9 flex-1 text-sm"
+              />
+              <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+                {itemSearchLoading
+                  ? <Loader2 className="h-4 w-4 animate-spin" />
+                  : <><Search className="h-4 w-4 mr-1" />조회</>}
+              </Button>
+            </div>
+            <div className="overflow-auto max-h-[350px] rounded-md border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[40px] text-center">
+                      <input
+                        type="checkbox"
+                        checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                        onChange={(e) => {
+                          if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                          else setItemCheckedIds(new Set());
+                        }}
+                        className="h-4 w-4"
+                      />
+                    </TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {itemSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : itemSearchResults.map((item) => (
+                    <TableRow
+                      key={item.id}
+                      className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                      onClick={() => setItemCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <input type="checkbox" checked={itemCheckedIds.has(item.id)} readOnly className="h-4 w-4" />
+                      </TableCell>
+                      <TableCell className="text-[13px]">{item.item_number}</TableCell>
+                      <TableCell className="text-[13px]">{item.item_name}</TableCell>
+                      <TableCell className="text-[13px]">{item.size}</TableCell>
+                      <TableCell className="text-[13px]">{item.material}</TableCell>
+                      <TableCell className="text-[13px]">{item.unit}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center justify-between w-full">
+              <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+                <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                  <Plus className="h-4 w-4 mr-1" />
+                  {itemCheckedIds.size}개 다음
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 품목 상세정보 입력 모달 (2단계) */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedSubcontractor?.subcontractor_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData ? "외주 품번/품명과 기간별 단가를 수정해요" : "선택한 품목의 외주 품번/품명과 기간별 단가를 설정해요"}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2">
+            {selectedItemsForDetail.map((item, idx) => {
+              const itemKey = item.item_number || item.id;
+              const mappingRows = itemMappings[itemKey] || [];
+              const prices = itemPrices[itemKey] || [];
+
+              return (
+                <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
+                  {/* 품목 헤더 */}
+                  <div className="px-5 py-3 bg-muted/30 border-b">
+                    <div className="font-semibold text-sm">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
+                  </div>
+
+                  <div className="flex gap-4 p-4">
+                    {/* 좌: 외주 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/20">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold">외주 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 외주 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.subcontractor_item_code}
+                              onChange={(e) => updateMappingRow(itemKey, mRow._id, "subcontractor_item_code", e.target.value)}
+                              placeholder="외주 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.subcontractor_item_name}
+                              onChange={(e) => updateMappingRow(itemKey, mRow._id, "subcontractor_item_name", e.target.value)}
+                              placeholder="외주 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0" onClick={() => removeMappingRow(itemKey, mRow._id)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/20">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive" onClick={() => removePriceRow(itemKey, price._id)}>
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                            {/* 기간 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select value={price.currency_code || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="통화" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준가/할인/반올림 */}
+                            <div className="flex gap-2 items-center">
+                              <div className="w-[90px]">
+                                <Select value={price.base_price_type || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["base_price_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                              <Input
+                                value={price.base_price}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "base_price", e.target.value)}
+                                className="h-8 text-xs text-right flex-1"
+                                placeholder="기준가"
+                              />
+                              <div className="w-[90px]">
+                                <Select value={price.discount_type || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인유형" /></SelectTrigger>
+                                  <SelectContent>
+                                    <SelectItem value="none">할인없음</SelectItem>
+                                    {(priceCategoryOptions["discount_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                              <Input
+                                value={price.discount_value}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "discount_value", e.target.value)}
+                                className="h-8 text-xs text-right w-[60px]"
+                                placeholder="0"
+                              />
+                              <div className="w-[90px]">
+                                <Select value={price.rounding_unit_value || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 계산 단가 표시 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm">{price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}</span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <Save className="h-4 w-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal
+          open={excelUploadOpen}
+          onOpenChange={(open) => {
+            setExcelUploadOpen(open);
+            if (!open) setExcelChainConfig(null);
+          }}
+          config={excelChainConfig}
+          onSuccess={() => {
+            fetchSubcontractors();
+            const cid = selectedSubcontractorId;
+            setSelectedSubcontractorId(null);
+            setTimeout(() => setSelectedSubcontractorId(cid), 50);
+          }}
+        />
+      )}
+
+      {/* 테이블 설정 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        includeAutoColumns={["created_date", "updated_date", "writer"]}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/production/bom/page.tsx b/frontend/app/(main)/COMPANY_8/production/bom/page.tsx
new file mode 100644
index 00000000..0563f47b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/production/bom/page.tsx
@@ -0,0 +1,2521 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  ChevronRight,
+  ChevronDown,
+  ChevronsDown,
+  ChevronsUp,
+  Plus,
+  Trash2,
+  Search,
+  Loader2,
+  Inbox,
+  Upload,
+  Download,
+  GitBranch,
+  History,
+  CheckCircle2,
+  RotateCcw,
+  X,
+  FileText,
+  Play,
+  Copy,
+  Settings2,
+  Save,
+  Package,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// ─── 상수 ───────────────────────────────────────
+const BOM_TABLE = "bom";
+const BOM_DETAIL_TABLE = "bom_detail";
+
+const BOM_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "bom_type", label: "BOM 유형" },
+  { key: "version", label: "버전" },
+  { key: "effective_date", label: "유효시작일" },
+  { key: "status", label: "상태" },
+];
+
+
+const STATUS_MAP: Record<string, { label: string; className: string }> = {
+  active: { label: "활성", className: "bg-success/10 text-success" },
+  draft: { label: "초안", className: "bg-warning/10 text-warning" },
+  expired: { label: "만료", className: "bg-destructive/10 text-destructive" },
+  inactive: { label: "비활성", className: "bg-muted text-muted-foreground" },
+};
+
+const VERSION_STATUS_MAP: Record<string, { label: string; className: string }> = {
+  active: { label: "사용중", className: "bg-success/10 text-success" },
+  developing: { label: "개발중", className: "bg-warning/10 text-warning" },
+  inactive: { label: "비활성", className: "bg-muted text-muted-foreground" },
+};
+
+const BOM_TYPE_OPTIONS = [
+  { code: "production", label: "생산 BOM" },
+  { code: "design", label: "설계 BOM" },
+  { code: "cost", label: "원가 BOM" },
+];
+
+// ─── 인터페이스 ─────────────────────────────────
+interface BomRow {
+  id: string;
+  item_id?: string;
+  item_code?: string;
+  item_name?: string;
+  bom_type?: string;
+  version?: string;
+  base_qty?: string;
+  unit?: string;
+  status?: string;
+  effective_date?: string;
+  expiry_date?: string;
+  remark?: string;
+  current_version_id?: string;
+  [key: string]: any;
+}
+
+interface BomDetail {
+  id: string;
+  bom_id: string;
+  version_id?: string;
+  parent_detail_id?: string | null;
+  child_item_id?: string;
+  item_number?: string;
+  item_name?: string;
+  item_type?: string;
+  quantity?: string;
+  unit?: string;
+  process_type?: string;
+  loss_rate?: string;
+  remark?: string;
+  level?: string;
+  seq_no?: string;
+  spec?: string;
+  writer?: string;
+  updated_date?: string;
+  [key: string]: any;
+}
+
+interface BomVersion {
+  id: string;
+  bom_id: string;
+  version_name: string;
+  revision?: number;
+  status: string;
+  created_by?: string;
+  created_date?: string;
+  detail_count?: number;
+}
+
+interface BomHistoryEntry {
+  id: string;
+  bom_id: string;
+  revision?: string;
+  version?: string;
+  change_type: string;
+  change_description?: string;
+  changed_by?: string;
+  changed_date?: string;
+}
+
+interface TreeNode extends BomDetail {
+  children: TreeNode[];
+  expanded?: boolean;
+  _isNew?: boolean;        // 신규 노드 (DB에 없음)
+  _isModified?: boolean;   // 수정된 노드
+  _tempId?: string;        // 임시 ID
+  _level?: number;         // flattenTree에서 사용
+  _isVirtualRoot?: boolean; // 가상 루트(BOM 마스터) 노드
+}
+
+// ─── 트리 구성 헬퍼 ─────────────────────────────
+function buildTree(details: BomDetail[]): TreeNode[] {
+  const nodeMap = new Map<string, TreeNode>();
+  const roots: TreeNode[] = [];
+
+  for (const d of details) {
+    nodeMap.set(d.id, { ...d, children: [], expanded: true });
+  }
+
+  for (const d of details) {
+    const node = nodeMap.get(d.id)!;
+    if (d.parent_detail_id && nodeMap.has(d.parent_detail_id)) {
+      nodeMap.get(d.parent_detail_id)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+
+  return roots;
+}
+
+function flattenTree(nodes: TreeNode[], level = 0): (TreeNode & { _level: number })[] {
+  const result: (TreeNode & { _level: number })[] = [];
+  for (const node of nodes) {
+    result.push({ ...node, _level: level });
+    if (node.expanded && node.children.length > 0) {
+      result.push(...flattenTree(node.children, level + 1));
+    }
+  }
+  return result;
+}
+
+// ─── 타입 뱃지 색상 ────────────────────────────
+// BOM 이력 변경 유형 색상
+const CHANGE_TYPE_STYLE: Record<string, string> = {
+  "등록": "bg-primary/10 text-primary ring-primary/20",
+  "수정": "bg-amber-50 text-amber-600 ring-amber-200",
+  "추가": "bg-emerald-50 text-emerald-600 ring-emerald-200",
+  "삭제": "bg-destructive/10 text-destructive ring-red-200",
+  "버전변경": "bg-blue-50 text-blue-600 ring-blue-200",
+  "excel_upload": "bg-blue-50 text-blue-600 ring-blue-200",
+};
+const CHANGE_TYPE_OPTIONS = ["등록", "수정", "추가", "삭제", "버전변경", "기타"];
+
+function getItemTypeBadge(type?: string) {
+  switch (type) {
+    case "원자재":
+    case "raw":
+      return { label: "원자재", className: "bg-success/10 text-success border-success/20" };
+    case "반제품":
+    case "semi":
+      return { label: "반제품", className: "bg-warning/10 text-warning border-warning/20" };
+    case "완제품":
+    case "finished":
+      return { label: "완제품", className: "bg-primary/10 text-primary border-primary/20" };
+    default:
+      return { label: type || "-", className: "bg-muted text-muted-foreground" };
+  }
+}
+
+// ─── 메인 컴포넌트 ──────────────────────────────
+export default function BomManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-bom", BOM_TABLE, BOM_COLUMNS);
+
+  // BOM 목록 상태
+  const [bomList, setBomList] = useState<BomRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [selectedBomId, setSelectedBomId] = useState<string | null>(null);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+
+  // 상세 데이터
+  const [bomHeader, setBomHeader] = useState<BomRow | null>(null);
+  const [bomDetails, setBomDetails] = useState<BomDetail[]>([]);
+  const [treeNodes, setTreeNodes] = useState<TreeNode[]>([]);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  // 트리 토글
+  const [treeDirection, setTreeDirection] = useState<"forward" | "reverse">("forward");
+  const [treeBasis, setTreeBasis] = useState<"material" | "process">("material");
+
+  // 버전 관리
+  const [versions, setVersions] = useState<BomVersion[]>([]);
+  const [currentVersionId, setCurrentVersionId] = useState<string | null>(null);
+  const [versionLoading, setVersionLoading] = useState(false);
+  const [newVersionName, setNewVersionName] = useState("");
+  const [showNewVersionDialog, setShowNewVersionDialog] = useState(false);
+
+  // 이력 관리
+  const [historyList, setHistoryList] = useState<BomHistoryEntry[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [showHistoryDialog, setShowHistoryDialog] = useState(false);
+  const [newHistory, setNewHistory] = useState({ change_type: "", change_description: "" });
+
+  // 등록 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [masterForm, setMasterForm] = useState<Record<string, any>>({
+    item_id: "",
+    item_code: "",
+    item_name: "",
+    bom_type: "",
+    base_qty: "1",
+    unit: "",
+    version: "1.0",
+    status: "draft",
+    effective_date: "",
+    expiry_date: "",
+    remark: "",
+  });
+  const [modalDetailRows, setModalDetailRows] = useState<any[]>([]);
+
+  // 품목 검색 모달
+  const [showItemSearchModal, setShowItemSearchModal] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSearchTarget, setItemSearchTarget] = useState<"master" | "detail">("master");
+
+  // 엑셀 업로드
+  const [showExcelUpload, setShowExcelUpload] = useState(false);
+  const [excelFile, setExcelFile] = useState<File | null>(null);
+  const [excelUploading, setExcelUploading] = useState(false);
+
+  // 우측 탭
+  const [rightTab, setRightTab] = useState<"tree" | "version" | "history">("tree");
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 트리 편집 state
+  const [editingTree, setEditingTree] = useState<TreeNode[]>([]);
+  const [treeHasChanges, setTreeHasChanges] = useState(false);
+
+  // 공정 마스터 목록
+  const [processOptions, setProcessOptions] = useState<{ code: string; label: string }[]>([]);
+  useEffect(() => {
+    apiClient.get("/process-info/processes?useYn=Y").then((res) => {
+      const list = res.data?.data || [];
+      setProcessOptions(list.map((p: any) => ({ code: p.process_code, label: `${p.process_name} (${p.process_code})` })));
+    }).catch(() => {});
+  }, []);
+
+  // 트리뷰 행 선택 / 수정 모달
+  const [selectedTreeNodeId, setSelectedTreeNodeId] = useState<string | null>(null);
+  const [editingNodeId, setEditingNodeId] = useState<string | null>(null);
+  const [treeEditModalOpen, setTreeEditModalOpen] = useState(false);
+  const [treeEditTarget, setTreeEditTarget] = useState<TreeNode | null>(null);
+  const [treeEditForm, setTreeEditForm] = useState<Record<string, any>>({});
+
+  // 역전개 (Where Used)
+  const [treeViewMode, setTreeViewMode] = useState<"forward" | "reverse">("forward");
+  const [whereUsedData, setWhereUsedData] = useState<any[]>([]);
+  const [whereUsedLoading, setWhereUsedLoading] = useState(false);
+  const [originalDetailIds, setOriginalDetailIds] = useState<Set<string>>(new Set());
+  const [addTargetParentId, setAddTargetParentId] = useState<string | null>(null);
+  const [treeItemSearchOpen, setTreeItemSearchOpen] = useState(false);
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+  // ─── 데이터 로드 ──────────────────────────────
+  const fetchBomList = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+
+      const res = await apiClient.post(`/table-management/tables/${BOM_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "created_at", order: "desc" },
+      });
+
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setBomList(rows);
+      setTotalCount(rows.length);
+    } catch (err: any) {
+      toast.error("BOM 목록 조회에 실패했어요");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchBomList();
+  }, [fetchBomList]);
+
+  // 카테고리 옵션 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      try {
+        const columns = ["bom_type", "status"];
+        const detailColumns = ["process_type"];
+        const results: Record<string, { code: string; label: string }[]> = {};
+
+        for (const col of columns) {
+          try {
+            const res = await apiClient.get(`/table-categories/${BOM_TABLE}/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              const flatten = (items: any[]): { code: string; label: string }[] => {
+                const result: { code: string; label: string }[] = [];
+                for (const item of items) {
+                  result.push({ code: item.value || item.code, label: item.label || item.value });
+                  if (item.children?.length) {
+                    result.push(...flatten(item.children));
+                  }
+                }
+                return result;
+              };
+              results[col] = flatten(res.data.data);
+            }
+          } catch {}
+        }
+
+        // bom_detail 테이블의 카테고리
+        for (const col of detailColumns) {
+          try {
+            const res = await apiClient.get(`/table-categories/bom_detail/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              const flatten = (items: any[]): { code: string; label: string }[] => {
+                const result: { code: string; label: string }[] = [];
+                for (const item of items) {
+                  result.push({ code: item.value || item.code, label: item.label || item.value });
+                  if (item.children?.length) result.push(...flatten(item.children));
+                }
+                return result;
+              };
+              results[col] = flatten(res.data.data);
+            }
+          } catch {}
+        }
+
+        // item_info의 division 카테고리
+        try {
+          const res = await apiClient.get(`/table-categories/item_info/division/values`);
+          if (res.data?.data?.length > 0) {
+            const flatten = (items: any[]): { code: string; label: string }[] => {
+              const result: { code: string; label: string }[] = [];
+              for (const item of items) {
+                result.push({ code: item.valueCode || item.value || item.code, label: item.valueLabel || item.label || item.value });
+                if (item.children?.length) result.push(...flatten(item.children));
+              }
+              return result;
+            };
+            results["division"] = flatten(res.data.data);
+          }
+        } catch {}
+
+        setCategoryOptions(results);
+      } catch {}
+    };
+    loadCategories();
+  }, []);
+
+  // ─── BOM 상세 로드 ────────────────────────────
+  const fetchBomDetail = useCallback(async (bomId: string) => {
+    setDetailLoading(true);
+    try {
+      // 헤더 조회
+      const headerRes = await apiClient.get(`/bom/${bomId}/header`);
+      const header = headerRes.data?.data || headerRes.data;
+      setBomHeader(header);
+      setCurrentVersionId(header?.current_version_id || null);
+
+      // 디테일 조회 (현재 버전)
+      const versionId = header?.current_version_id;
+      const detailFilters: any[] = [{ columnName: "bom_id", operator: "equals", value: bomId }];
+      if (versionId) {
+        detailFilters.push({ columnName: "version_id", operator: "equals", value: versionId });
+      }
+
+      const detailRes = await apiClient.post(`/table-management/tables/${BOM_DETAIL_TABLE}/data`, {
+        page: 1,
+        size: 1000,
+        dataFilter: { enabled: true, filters: detailFilters },
+        sort: { columnName: "parent_detail_id", order: "asc" },
+      });
+
+      let details = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+
+      // item_info 조인을 위해 child_item_id 수집
+      const itemIds = [...new Set(details.map((d: any) => d.child_item_id).filter(Boolean))];
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1,
+            size: 1000,
+            dataFilter: {
+              enabled: true,
+              filters: [{ columnName: "id", operator: "in", value: itemIds }],
+            },
+          });
+          const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+          const itemMap = new Map(items.map((i: any) => [i.id, i]));
+
+          details = details.map((d: any) => {
+            const item = itemMap.get(d.child_item_id) as any;
+            const divisionRaw = item?.division || "";
+            // 카테고리 코드 → 라벨 변환 (쉼표 구분 다중값 지원)
+            const divisionLabel = divisionRaw.split(",").map((code: string) => {
+              const c = code.trim();
+              return categoryOptions["division"]?.find((o) => o.code === c)?.label || c;
+            }).filter((v: string) => v && v !== "s").join(", ");
+            return {
+              ...d,
+              item_number: item?.item_number || "",
+              item_name: item?.item_name || "",
+              item_type: divisionLabel,
+              unit: d.unit || item?.unit || "",
+              spec: item?.size || item?.spec || "",
+              writer: d.writer || "",
+              updated_date: d.updated_at || d.updated_date || "",
+            };
+          });
+        } catch {}
+      }
+
+      setBomDetails(details);
+      const tree = buildTree(details);
+      setTreeNodes(tree);
+
+      // 편집용 트리 동기화
+      setEditingTree(buildTree(details));
+      setOriginalDetailIds(new Set(details.map((d: any) => d.id)));
+      setTreeHasChanges(false);
+      // 기본 전개: 모든 노드 + 가상 루트 펼침
+      const allIds = new Set<string>();
+      if (header?.id) allIds.add(`__root_${header.id}`);
+      const collectIds = (nodes: TreeNode[]) => {
+        for (const n of nodes) {
+          allIds.add(n.id || "");
+          if (n.children.length > 0) collectIds(n.children);
+        }
+      };
+      collectIds(tree);
+      setExpandedNodes(allIds);
+    } catch (err: any) {
+      toast.error("BOM 상세 조회에 실패했어요");
+    } finally {
+      setDetailLoading(false);
+    }
+  }, [categoryOptions]);
+
+  // 버전 목록 로드
+  const fetchVersions = useCallback(async (bomId: string) => {
+    setVersionLoading(true);
+    try {
+      const res = await apiClient.get(`/bom/${bomId}/versions`);
+      const resData = res.data;
+      setVersions(resData?.data || []);
+      setCurrentVersionId(resData?.currentVersionId || null);
+    } catch (err: any) {
+      toast.error("버전 목록 조회에 실패했어요");
+    } finally {
+      setVersionLoading(false);
+    }
+  }, []);
+
+  // 이력 목록 로드
+  const fetchHistory = useCallback(async (bomId: string) => {
+    setHistoryLoading(true);
+    try {
+      const res = await apiClient.get(`/bom/${bomId}/history`);
+      setHistoryList(res.data?.data || []);
+    } catch (err: any) {
+      toast.error("이력 조회에 실패했어요");
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, []);
+
+  // BOM 선택 시 상세 로드
+  useEffect(() => {
+    if (selectedBomId) {
+      fetchBomDetail(selectedBomId);
+      if (rightTab === "version") fetchVersions(selectedBomId);
+      if (rightTab === "history") fetchHistory(selectedBomId);
+    } else {
+      setBomHeader(null);
+      setBomDetails([]);
+      setTreeNodes([]);
+      setEditingTree([]);
+      setTreeHasChanges(false);
+      setOriginalDetailIds(new Set());
+      setExpandedNodes(new Set());
+      setVersions([]);
+      setHistoryList([]);
+    }
+  }, [selectedBomId, fetchBomDetail, fetchVersions, fetchHistory, rightTab]);
+
+  // ─── 트리 토글 핸들러 ─────────────────────────
+  const toggleTreeNode = useCallback((nodeId: string) => {
+    const toggle = (nodes: TreeNode[]): TreeNode[] =>
+      nodes.map((n) =>
+        n.id === nodeId
+          ? { ...n, expanded: !n.expanded }
+          : { ...n, children: toggle(n.children) }
+      );
+    setTreeNodes((prev) => toggle(prev));
+  }, []);
+
+  const flatTree = useMemo(() => flattenTree(treeNodes), [treeNodes]);
+
+  // ─── 트리 편집 헬퍼 ──────────────────────────
+
+  // 트리 노드 토글 (펼침/접음)
+  const toggleEditTreeNode = useCallback((nodeId: string) => {
+    setExpandedNodes((prev) => {
+      const next = new Set(prev);
+      if (next.has(nodeId)) next.delete(nodeId);
+      else next.add(nodeId);
+      return next;
+    });
+  }, []);
+
+  // 전체 펼침
+  const expandAll = useCallback(() => {
+    const allIds = new Set<string>();
+    if (bomHeader?.id) allIds.add(`__root_${bomHeader.id}`);
+    const collect = (nodes: TreeNode[]) => {
+      for (const n of nodes) {
+        allIds.add(n.id || n._tempId || "");
+        if (n.children.length > 0) collect(n.children);
+      }
+    };
+    collect(editingTree);
+    setExpandedNodes(allIds);
+  }, [editingTree, bomHeader]);
+
+  // 역전개 (Where Used) 조회 — 현재 BOM 품목이 어디에 사용되는지
+  const fetchWhereUsed = useCallback(async () => {
+    if (!bomHeader?.item_code && !bomHeader?.item_id) return;
+    setWhereUsedLoading(true);
+    try {
+      // bom_detail에서 child_item_id가 현재 품목인 행 조회
+      const itemId = bomHeader.item_id || bomHeader.id;
+      const res = await apiClient.post(`/table-management/tables/bom_detail/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "child_item_id", operator: "equals", value: itemId }] },
+        autoFilter: true,
+      });
+      const details = res.data?.data?.data || res.data?.data?.rows || [];
+
+      // 각 bom_id로 BOM 마스터 정보 조회
+      const bomIds = [...new Set(details.map((d: any) => d.bom_id).filter(Boolean))];
+      const results: any[] = [];
+      for (const bomId of bomIds) {
+        try {
+          const bomRes = await apiClient.post(`/table-management/tables/bom/data`, {
+            page: 1, size: 1,
+            dataFilter: { enabled: true, filters: [{ columnName: "id", operator: "equals", value: bomId }] },
+            autoFilter: true,
+          });
+          const bom = (bomRes.data?.data?.data || bomRes.data?.data?.rows || [])[0];
+          if (bom) {
+            const detail = details.find((d: any) => d.bom_id === bomId);
+            results.push({
+              bom_id: bomId,
+              item_code: bom.item_code || bom.item_number || "",
+              item_name: bom.item_name || "",
+              quantity: detail?.quantity || "1",
+              unit: detail?.unit || "",
+              process_type: detail?.process_type || "",
+            });
+          }
+        } catch {}
+      }
+      setWhereUsedData(results);
+    } catch {
+      setWhereUsedData([]);
+    } finally {
+      setWhereUsedLoading(false);
+    }
+  }, [bomHeader]);
+
+  // 전체 접음
+  const collapseAll = useCallback(() => {
+    // 루트는 항상 펼침 유지, 나머지만 접음
+    const rootOnly = new Set<string>();
+    if (bomHeader?.id) rootOnly.add(`__root_${bomHeader.id}`);
+    setExpandedNodes(rootOnly);
+  }, [bomHeader]);
+
+  // 편집 트리 평탄화 (useMemo) — 가상 루트(BOM 마스터) 포함
+  const editingFlatTree = useMemo(() => {
+    const result: TreeNode[] = [];
+    // 가상 루트 (BOM 마스터)
+    if (bomHeader) {
+      const rootId = `__root_${bomHeader.id}`;
+      result.push({
+        id: rootId,
+        bom_id: bomHeader.id,
+        _tempId: undefined,
+        _isNew: false,
+        _isModified: false,
+        _level: 0,
+        _isVirtualRoot: true,
+        item_number: bomHeader.item_code || bomHeader.item_number || "",
+        item_name: bomHeader.item_name || "",
+        quantity: bomHeader.base_qty || "1",
+        unit: bomHeader.unit || "",
+        process_type: "",
+        loss_rate: "",
+        remark: bomHeader.remark || "",
+        spec: "",
+        writer: "",
+        updated_date: "",
+        item_type: "",
+        children: editingTree,
+      } as any);
+    }
+    // 하위 노드 평탄화 (레벨 +1)
+    const flatten = (nodes: TreeNode[], level: number) => {
+      for (const node of nodes) {
+        const nodeKey = node.id || node._tempId || "";
+        result.push({ ...node, _level: level });
+        if (node.children.length > 0 && expandedNodes.has(nodeKey)) {
+          flatten(node.children, level + 1);
+        }
+      }
+    };
+    const rootId = bomHeader ? `__root_${bomHeader.id}` : "";
+    if (!bomHeader || expandedNodes.has(rootId)) {
+      flatten(editingTree, bomHeader ? 1 : 0);
+    }
+    return result;
+  }, [editingTree, expandedNodes, bomHeader]);
+
+  // 트리에서 노드를 찾아서 업데이트
+  const updateTreeNode = (tree: TreeNode[], nodeId: string, updater: (node: TreeNode) => TreeNode): TreeNode[] => {
+    return tree.map(node => {
+      if ((node.id || node._tempId) === nodeId) return updater(node);
+      if (node.children.length > 0) return { ...node, children: updateTreeNode(node.children, nodeId, updater) };
+      return node;
+    });
+  };
+
+  // 트리에서 노드 삭제 (하위 포함)
+  const removeTreeNode = (tree: TreeNode[], nodeId: string): TreeNode[] => {
+    return tree.filter(node => {
+      if ((node.id || node._tempId) === nodeId) return false;
+      if (node.children.length > 0) node.children = removeTreeNode(node.children, nodeId);
+      return true;
+    });
+  };
+
+  // 트리에 자식 노드 추가
+  const addChildToNode = (tree: TreeNode[], parentId: string | null, newNode: TreeNode): TreeNode[] => {
+    if (parentId === null) return [...tree, newNode];
+    return tree.map(node => {
+      const nodeKey = node.id || node._tempId;
+      if (nodeKey === parentId) {
+        return { ...node, children: [...node.children, newNode], expanded: true };
+      }
+      if (node.children.length > 0) return { ...node, children: addChildToNode(node.children, parentId, newNode) };
+      return node;
+    });
+  };
+
+  // 노드 찾기 헬퍼
+  const findNodeById = (nodes: TreeNode[], id: string): TreeNode | null => {
+    for (const node of nodes) {
+      if ((node.id || node._tempId) === id) return node;
+      const found = findNodeById(node.children, id);
+      if (found) return found;
+    }
+    return null;
+  };
+
+  // 인라인 필드 변경
+  const handleTreeFieldChange = (nodeId: string, field: string, value: string) => {
+    setEditingTree(prev => updateTreeNode(prev, nodeId, node => ({
+      ...node, [field]: value, _isModified: !node._isNew ? true : node._isModified,
+    })));
+    setTreeHasChanges(true);
+  };
+
+  // 노드 삭제
+  const handleTreeDeleteNode = async (nodeId: string) => {
+    if (!await confirm("이 품목과 하위 품목을 삭제할까요?", { variant: "destructive" })) return;
+    setEditingTree(prev => removeTreeNode(prev, nodeId));
+    setTreeHasChanges(true);
+  };
+
+  // 하위 품목 추가 시작
+  const handleTreeAddChild = (parentId: string | null) => {
+    setAddTargetParentId(parentId);
+    setTreeItemSearchOpen(true);
+    searchItems("");
+  };
+
+  // 트리 품목 선택 완료 (트리에 추가)
+  const handleTreeItemSelect = (item: any) => {
+    // 1. 자기 자신 추가 방지 (BOM 마스터 품목과 동일한 품목)
+    if (bomHeader && (item.id === bomHeader.item_id || item.item_number === bomHeader.item_code)) {
+      toast.error("자기 자신을 BOM에 추가할 수 없습니다");
+      return;
+    }
+
+    // 2. 같은 경로에 동일 품목 중복 방지 (조상 노드에 같은 품목이 있으면 순환)
+    const getAncestorItemIds = (tree: TreeNode[], targetId: string | null): Set<string> => {
+      const ids = new Set<string>();
+      if (!targetId) return ids;
+      const collectPath = (nodes: TreeNode[], path: TreeNode[]): boolean => {
+        for (const n of nodes) {
+          const nk = n.id || n._tempId || "";
+          if (nk === targetId) {
+            path.forEach(p => { if (p.child_item_id) ids.add(p.child_item_id); });
+            if (n.child_item_id) ids.add(n.child_item_id);
+            return true;
+          }
+          if (n.children.length > 0 && collectPath(n.children, [...path, n])) return true;
+        }
+        return false;
+      };
+      collectPath(tree, []);
+      return ids;
+    };
+    const ancestorIds = getAncestorItemIds(editingTree, addTargetParentId);
+    if (ancestorIds.has(item.id)) {
+      toast.error("상위 경로에 이미 동일 품목이 있어 순환 참조가 발생합니다");
+      return;
+    }
+
+    const tempId = `temp_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+    const parentNode = addTargetParentId ? findNodeById(editingTree, addTargetParentId) : null;
+    const newLevel = parentNode ? ((parentNode._level ?? parentNode.level ?? 0) as number) + 1 : 0;
+
+    const newNode: TreeNode = {
+      id: "",
+      _tempId: tempId,
+      _isNew: true,
+      bom_id: selectedBomId || "",
+      parent_detail_id: addTargetParentId,
+      child_item_id: item.id,
+      item_number: item.item_number || "",
+      item_name: item.item_name || "",
+      item_type: item.division || "",
+      level: String(newLevel),
+      quantity: "1",
+      unit: item.unit || "",
+      process_type: "",
+      loss_rate: "0",
+      remark: "",
+      children: [],
+      expanded: true,
+    };
+
+    setEditingTree(prev => addChildToNode(prev, addTargetParentId, newNode));
+    setExpandedNodes(prev => {
+      const next = new Set(prev);
+      next.add(tempId);
+      if (addTargetParentId) next.add(addTargetParentId);
+      return next;
+    });
+    setTreeHasChanges(true);
+    setTreeItemSearchOpen(false);
+  };
+
+  // ─── 트리 저장 ────────────────────────────────
+  const handleSaveTree = async () => {
+    if (!selectedBomId || !treeHasChanges) return;
+
+    setSaving(true);
+    try {
+      // 1. version_id 확보
+      let versionId = currentVersionId;
+      if (!versionId) {
+        const initRes = await apiClient.post(`/bom/${selectedBomId}/initialize-version`, {});
+        versionId = initRes.data?.data?.versionId;
+      }
+
+      // 2. 트리 평탄화
+      const flatNodes: any[] = [];
+      const flattenForSave = (nodes: TreeNode[], parentId: string | null, level: number) => {
+        nodes.forEach((node, idx) => {
+          const nodeKey = node.id || node._tempId || "";
+          flatNodes.push({
+            ...node,
+            _nodeKey: nodeKey,
+            parent_detail_id: parentId,
+            level: String(level),
+            seq_no: String(idx + 1),
+            bom_id: selectedBomId,
+            version_id: versionId,
+          });
+          if (node.children.length > 0) flattenForSave(node.children, nodeKey, level + 1);
+        });
+      };
+      flattenForSave(editingTree, null, 0);
+
+      // 3. 분류: INSERT / UPDATE / DELETE
+      const currentIds = new Set(flatNodes.filter(n => n.id && !n._isNew).map(n => n.id));
+      const toDelete = [...originalDetailIds].filter(id => !currentIds.has(id));
+      const toInsert = flatNodes.filter(n => n._isNew);
+      const toUpdate = flatNodes.filter(n => n.id && !n._isNew && n._isModified);
+
+      // 4. DELETE
+      if (toDelete.length > 0) {
+        await apiClient.delete(`/table-management/tables/bom_detail/delete`, {
+          data: toDelete.map(id => ({ id })),
+        });
+      }
+
+      // 5. INSERT (순서 중요: 부모 먼저)
+      const tempToRealId: Record<string, string> = {};
+      for (const node of toInsert) {
+        let parentId = node.parent_detail_id;
+        if (parentId && tempToRealId[parentId]) parentId = tempToRealId[parentId];
+
+        const newId = crypto.randomUUID();
+        const res = await apiClient.post(`/table-management/tables/bom_detail/add`, {
+          id: newId,
+          bom_id: selectedBomId,
+          version_id: versionId,
+          parent_detail_id: parentId && !parentId.startsWith("temp_") ? parentId : null,
+          child_item_id: node.child_item_id,
+          level: node.level,
+          seq_no: node.seq_no,
+          quantity: node.quantity || "1",
+          unit: node.unit || "",
+          process_type: node.process_type || "",
+          loss_rate: node.loss_rate || "0",
+          remark: node.remark || "",
+          writer: user?.userId || "",
+          company_code: user?.company_code || "",
+        });
+
+        const realId = res.data?.data?.id || newId;
+        if (node._tempId) tempToRealId[node._tempId] = realId;
+      }
+
+      // 6. INSERT된 노드의 자식들 parent_detail_id 업데이트
+      for (const node of toInsert) {
+        if (!node._tempId) continue;
+        const childNodes = flatNodes.filter(n => n.parent_detail_id === node._tempId);
+        for (const child of childNodes) {
+          if (child.id && !child._isNew && tempToRealId[node._tempId]) {
+            await apiClient.put(`/table-management/tables/bom_detail/edit`, {
+              originalData: { id: child.id },
+              updatedData: { parent_detail_id: tempToRealId[node._tempId] },
+            });
+          }
+        }
+      }
+
+      // 7. UPDATE
+      for (const node of toUpdate) {
+        let parentId = node.parent_detail_id;
+        if (parentId && tempToRealId[parentId]) parentId = tempToRealId[parentId];
+
+        await apiClient.put(`/table-management/tables/bom_detail/edit`, {
+          originalData: { id: node.id },
+          updatedData: {
+            bom_id: selectedBomId,
+            version_id: versionId,
+            quantity: node.quantity,
+            unit: node.unit,
+            process_type: node.process_type,
+            loss_rate: node.loss_rate,
+            remark: node.remark,
+            level: node.level,
+            seq_no: node.seq_no,
+            parent_detail_id: parentId,
+          },
+        });
+      }
+
+      // 이력 자동 기록 (변경 내용 상세)
+      const historyParts: string[] = [];
+      // 추가된 품목
+      for (const n of toInsert) {
+        historyParts.push(`${n.item_number || "품목"} 추가 (소요량: ${n.quantity || 1})`);
+      }
+      // 수정된 품목 (변경 전후 비교)
+      for (const n of toUpdate) {
+        const orig = bomDetails.find((d: any) => d.id === n.id);
+        if (orig) {
+          const changes: string[] = [];
+          if (String(orig.quantity || "") !== String(n.quantity || "")) changes.push(`소요량 ${orig.quantity || "-"} → ${n.quantity || "-"}`);
+          if (String(orig.process_type || "") !== String(n.process_type || "")) changes.push(`공정 변경`);
+          if (String(orig.loss_rate || "") !== String(n.loss_rate || "")) changes.push(`손실율 ${orig.loss_rate || "0"} → ${n.loss_rate || "0"}`);
+          if (String(orig.remark || "") !== String(n.remark || "")) changes.push(`비고 변경`);
+          if (changes.length > 0) historyParts.push(`${n.item_number || "품목"}: ${changes.join(", ")}`);
+        }
+      }
+      // 삭제된 품목
+      for (const id of toDelete) {
+        const orig = bomDetails.find((d: any) => d.id === id);
+        historyParts.push(`${orig?.item_number || "품목"} 삭제`);
+      }
+      if (historyParts.length > 0) {
+        apiClient.post(`/bom/${selectedBomId}/history`, {
+          change_type: historyParts.some(p => p.includes("추가")) ? "추가" : historyParts.some(p => p.includes("삭제")) ? "삭제" : "수정",
+          change_description: historyParts.join("; "),
+        }).catch(() => {});
+      }
+
+      toast.success("BOM 트리가 저장되었어요");
+      setTreeHasChanges(false);
+      fetchBomDetail(selectedBomId);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "트리 저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ─── BOM 삭제 ────────────────────────────────
+  const handleDeleteBom = async () => {
+    if (checkedIds.length === 0) {
+      toast.error("삭제할 BOM을 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`선택한 ${checkedIds.length}건의 BOM을 삭제할까요?`);
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${BOM_TABLE}/delete`, {
+        data: checkedIds.map((id) => ({ id })),
+      });
+      toast.success("BOM이 삭제되었어요");
+      setCheckedIds([]);
+      setSelectedBomId(null);
+      fetchBomList();
+    } catch {
+      toast.error("BOM 삭제에 실패했어요");
+    }
+  };
+
+  // ─── BOM 등록/수정 ───────────────────────────
+  const openCreateModal = () => {
+    setIsEditMode(false);
+    setMasterForm({
+      item_id: "",
+      item_code: "",
+      item_name: "",
+      bom_type: "",
+      base_qty: "1",
+      unit: "",
+      version: "1.0",
+      status: "draft",
+      effective_date: "",
+      expiry_date: "",
+      remark: "",
+    });
+    setModalDetailRows([]);
+    setIsModalOpen(true);
+  };
+
+  const openEditModal = () => {
+    if (!bomHeader) return;
+    setIsEditMode(true);
+    setMasterForm({
+      id: bomHeader.id,
+      item_id: bomHeader.item_id || "",
+      item_code: bomHeader.item_code || bomHeader.item_number || "",
+      item_name: bomHeader.item_name || "",
+      bom_type: bomHeader.bom_type || "",
+      base_qty: bomHeader.base_qty || "1",
+      unit: bomHeader.unit || "",
+      version: bomHeader.version || "1.0",
+      status: bomHeader.status || "draft",
+      effective_date: bomHeader.effective_date || "",
+      expiry_date: bomHeader.expiry_date || "",
+      remark: bomHeader.remark || "",
+    });
+
+    setModalDetailRows(
+      bomDetails.map((d, i) => ({
+        _idx: i,
+        child_item_id: d.child_item_id || "",
+        item_number: d.item_number || "",
+        item_name: d.item_name || "",
+        quantity: d.quantity || "1",
+        unit: d.unit || "",
+        process_type: d.process_type || "",
+        loss_rate: d.loss_rate || "0",
+        remark: d.remark || "",
+      }))
+    );
+    setIsModalOpen(true);
+  };
+
+  const handleSaveBom = async () => {
+    if (!masterForm.item_id) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+    if (!masterForm.bom_type) {
+      toast.error("BOM 유형을 선택해주세요");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const bomFields: Record<string, any> = {
+        item_id: masterForm.item_id,
+        item_code: masterForm.item_code,
+        item_name: masterForm.item_name,
+        bom_type: masterForm.bom_type,
+        base_qty: masterForm.base_qty || "1",
+        unit: masterForm.unit || "",
+        version: masterForm.version || "1.0",
+        status: masterForm.status || "draft",
+        effective_date: masterForm.effective_date || null,
+        expiry_date: masterForm.expiry_date || null,
+        remark: masterForm.remark || "",
+        writer: user?.userId || "",
+        company_code: user?.company_code || "",
+      };
+
+      let bomId: string;
+
+      if (isEditMode && masterForm.id) {
+        await apiClient.put(`/table-management/tables/${BOM_TABLE}/edit`, {
+          originalData: { id: masterForm.id },
+          updatedData: bomFields,
+        });
+        bomId = masterForm.id;
+      } else {
+        const res = await apiClient.post(`/table-management/tables/${BOM_TABLE}/add`, { id: crypto.randomUUID(), ...bomFields });
+        bomId = res.data?.data?.id || res.data?.id;
+      }
+
+      // 초기 버전 생성 (신규 BOM)
+      if (!isEditMode && bomId) {
+        try {
+          await apiClient.post(`/bom/${bomId}/initialize-version`, {});
+        } catch {}
+      }
+
+      // 디테일 저장: 기존 삭제 후 재등록
+      if (isEditMode && masterForm.id) {
+        const existingDetails = bomDetails.filter((d) => d.bom_id === bomId);
+        if (existingDetails.length > 0) {
+          await apiClient.delete(`/table-management/tables/${BOM_DETAIL_TABLE}/delete`, {
+            data: existingDetails.map((d) => ({ id: d.id })),
+          });
+        }
+      }
+
+      // 현재 버전 ID 가져오기
+      let versionId = currentVersionId;
+      if (!versionId && bomId) {
+        try {
+          const verRes = await apiClient.get(`/bom/${bomId}/versions`);
+          const verData = verRes.data?.data || verRes.data;
+          versionId = verData?.currentVersionId || null;
+        } catch {}
+      }
+
+      for (let i = 0; i < modalDetailRows.length; i++) {
+        const row = modalDetailRows[i];
+        if (!row.child_item_id) continue;
+        await apiClient.post(`/table-management/tables/${BOM_DETAIL_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          bom_id: bomId,
+          version_id: versionId || null,
+          parent_detail_id: null,
+          child_item_id: row.child_item_id,
+          quantity: row.quantity || "1",
+          unit: row.unit || "",
+          process_type: row.process_type || "",
+          loss_rate: row.loss_rate || "0",
+          remark: row.remark || "",
+          level: "0",
+          seq_no: String(i + 1),
+          writer: user?.userId || "",
+          company_code: user?.company_code || "",
+        });
+      }
+
+      toast.success(isEditMode ? "BOM이 수정되었어요" : "BOM이 등록되었어요");
+      setIsModalOpen(false);
+      fetchBomList();
+      if (bomId) {
+        setSelectedBomId(bomId);
+        fetchBomDetail(bomId);
+        fetchVersions(bomId);
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "BOM 저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ─── 품목 검색 ───────────────────────────────
+  const searchItems = async (keyword?: string) => {
+    const kw = (keyword ?? itemSearchKeyword).trim();
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (kw) {
+        filters.push({ columnName: "item_name", operator: "contains", value: kw });
+      }
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1,
+        size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      let rows = res.data?.data?.data || res.data?.data?.rows || [];
+
+      // 키워드가 있고 품명으로 못 찾으면 품목코드로 재시도
+      if (kw && rows.length === 0) {
+        const res2 = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 50,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "contains", value: kw }] },
+          autoFilter: true,
+        });
+        rows = res2.data?.data?.data || res2.data?.data?.rows || [];
+      }
+      setItemSearchResults(rows);
+    } catch {
+      toast.error("품목 검색에 실패했어요");
+    } finally {
+      setItemSearchLoading(false);
+    }
+  };
+
+  const selectItem = (item: any) => {
+    if (itemSearchTarget === "master") {
+      setMasterForm((prev) => ({
+        ...prev,
+        item_id: item.id,
+        item_code: item.item_number || "",
+        item_name: item.item_name || "",
+        unit: item.unit || prev.unit,
+      }));
+      setShowItemSearchModal(false);
+    } else {
+      setModalDetailRows((prev) => [
+        ...prev,
+        {
+          _idx: prev.length,
+          child_item_id: item.id,
+          item_number: item.item_number || "",
+          item_name: item.item_name || "",
+          quantity: "1",
+          unit: item.unit || "",
+          process_type: "",
+          loss_rate: "0",
+          remark: "",
+        },
+      ]);
+      setShowItemSearchModal(false);
+    }
+    setItemSearchKeyword("");
+    setItemSearchResults([]);
+  };
+
+  // ─── 버전 관리 ───────────────────────────────
+  const handleCreateVersion = async () => {
+    if (!selectedBomId) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions`, {
+        versionName: newVersionName.trim() || undefined,
+      });
+      apiClient.post(`/bom/${selectedBomId}/history`, { change_type: "버전변경", change_description: `새 버전 생성: ${newVersionName.trim() || "자동"}` }).catch(() => {});
+      toast.success("새 버전이 생성되었어요");
+      setShowNewVersionDialog(false);
+      setNewVersionName("");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 생성에 실패했어요");
+    }
+  };
+
+  const handleLoadVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions/${versionId}/load`);
+      toast.success("버전을 불러왔어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 불러오기에 실패했어요");
+    }
+  };
+
+  const handleActivateVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    const ok = await confirm("이 버전을 사용 확정할까요? 기존 활성 버전은 비활성 처리돼요.");
+    if (!ok) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions/${versionId}/activate`);
+      apiClient.post(`/bom/${selectedBomId}/history`, { change_type: "버전변경", change_description: `버전 사용 확정` }).catch(() => {});
+      toast.success("버전이 사용 확정되었어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 확정에 실패했어요");
+    }
+  };
+
+  const handleDeleteVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    const ok = await confirm("이 버전을 삭제할까요? 관련 디테일 데이터도 함께 삭제돼요.");
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/bom/${selectedBomId}/versions/${versionId}`);
+      toast.success("버전이 삭제되었어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 이력 관리 ───────────────────────────────
+  const handleAddHistory = async () => {
+    if (!selectedBomId) return;
+    if (!newHistory.change_type) {
+      toast.error("변경 유형을 입력해주세요");
+      return;
+    }
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/history`, {
+        change_type: newHistory.change_type,
+        change_description: newHistory.change_description,
+        changed_by: user?.userId || "",
+      });
+      toast.success("이력이 추가되었어요");
+      setShowHistoryDialog(false);
+      setNewHistory({ change_type: "", change_description: "" });
+      fetchHistory(selectedBomId);
+    } catch (err: any) {
+      toast.error("이력 추가에 실패했어요");
+    }
+  };
+
+  // ─── 엑셀 업로드 ────────────────────────────
+  const handleExcelUpload = async () => {
+    if (!excelFile) {
+      toast.error("엑셀 파일을 선택해주세요");
+      return;
+    }
+    setExcelUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", excelFile);
+
+      const endpoint = selectedBomId
+        ? `/bom/${selectedBomId}/excel-upload-version`
+        : `/bom/excel-upload`;
+
+      const res = await apiClient.post(endpoint, formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+
+      const result = res.data?.data || res.data;
+      if (result?.success) {
+        toast.success(`엑셀 업로드 완료 (${result.insertedCount}건 등록)`);
+        setShowExcelUpload(false);
+        setExcelFile(null);
+        fetchBomList();
+        if (result.createdBomId) {
+          setSelectedBomId(result.createdBomId);
+        }
+      } else {
+        toast.error(result?.errors?.join("\n") || "엑셀 업로드에 실패했어요");
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "엑셀 업로드에 실패했어요");
+    } finally {
+      setExcelUploading(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (!selectedBomId) {
+      toast.error("BOM을 선택해주세요");
+      return;
+    }
+    try {
+      const res = await apiClient.get(`/bom/${selectedBomId}/excel-download`);
+      const data = res.data?.data || [];
+      if (data.length === 0) {
+        toast.error("다운로드할 데이터가 없어요");
+        return;
+      }
+      exportToExcel(data, `BOM_${bomHeader?.item_code || selectedBomId}`);
+      toast.success("엑셀 다운로드를 시작했어요");
+    } catch {
+      toast.error("엑셀 다운로드에 실패했어요");
+    }
+  };
+
+  // ─── 상태 뱃지 렌더 ───────────────────────────
+  const renderStatusBadge = (status?: string) => {
+    const info = STATUS_MAP[status || ""] || { label: status || "-", className: "bg-muted text-muted-foreground" };
+    return (
+      <span className={cn("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium", info.className)}>
+        <span className="w-1.5 h-1.5 rounded-full bg-current" />
+        {info.label}
+      </span>
+    );
+  };
+
+  // ─── 렌더링 ──────────────────────────────────
+  return (
+    <div className="flex flex-col h-full">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 px-5 py-3 text-xs text-muted-foreground bg-muted/50 border-b shrink-0">
+        <span>생산관리</span>
+        <ChevronRight className="w-3.5 h-3.5 text-muted-foreground/50" />
+        <span className="font-semibold text-foreground">BOM 관리</span>
+      </nav>
+
+      {/* 검색 필터 */}
+      <div className="px-4 py-2.5 border-b bg-muted/50 shrink-0">
+        <DynamicSearchFilter
+          tableName={BOM_TABLE}
+          filterId="c16-bom"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={totalCount}
+          extraActions={
+            <div className="flex items-center gap-2">
+              <Button size="sm" variant="outline" className="h-8 text-xs" onClick={() => setShowExcelUpload(true)}>
+                <Upload className="w-3.5 h-3.5 mr-1.5" />
+                엑셀 업로드
+              </Button>
+              <Button size="sm" variant="outline" className="h-8 text-xs" onClick={handleExcelDownload} disabled={!selectedBomId}>
+                <Download className="w-3.5 h-3.5 mr-1.5" />
+                엑셀 다운로드
+              </Button>
+            </div>
+          }
+        />
+      </div>
+
+      {/* 메인 콘텐츠: 좌우 분할 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card mx-3 mb-3">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: BOM 목록 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold text-foreground">BOM 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {totalCount}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" onClick={openCreateModal}>
+                    <Plus className="w-3.5 h-3.5 mr-1" />
+                    등록
+                  </Button>
+                  <div className="w-px h-4 bg-border mx-0.5" />
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                    onClick={handleDeleteBom}
+                    disabled={checkedIds.length === 0}
+                  >
+                    <Trash2 className="w-3.5 h-3.5 mr-1" />
+                    삭제
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* BOM 목록 테이블 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+                    key: col.key,
+                    label: col.label,
+                    render: col.key === "item_code"
+                      ? (_val: any, row: any) => <span className="font-mono text-[13px]">{row.item_code || row.item_number || "-"}</span>
+                      : col.key === "bom_type"
+                      ? (_val: any, row: any) => <span className="text-[13px]">{BOM_TYPE_OPTIONS.find((o) => o.code === row.bom_type)?.label || row.bom_type || "-"}</span>
+                      : col.key === "status"
+                      ? (_val: any, row: any) => renderStatusBadge(row.status)
+                      : undefined,
+                  }))}
+                  data={ts.groupData(bomList)}
+                  loading={loading}
+                  emptyMessage="등록된 BOM이 없어요"
+                  showCheckbox
+                  checkedIds={checkedIds}
+                  onCheckedChange={setCheckedIds}
+                  selectedId={selectedBomId}
+                  onSelect={(id) => setSelectedBomId(id)}
+                  onRowClick={(row) => setSelectedBomId(row.id)}
+                  showPagination
+                  draggableColumns={false}
+                  columnOrderKey="c16-bom"
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 상세 + 트리뷰 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            {!selectedBomId ? (
+              <div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
+                <Inbox className="w-10 h-10 text-muted-foreground/40" />
+                <p className="text-sm">좌측에서 BOM을 선택해주세요</p>
+              </div>
+            ) : (
+              <div className="flex flex-col h-full">
+                {/* 상세 카드 */}
+                <div className="border-b shrink-0">
+                  <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                    <h3 className="text-[13px] font-bold text-foreground">BOM 상세정보</h3>
+                    <Button size="sm" variant="ghost" onClick={openEditModal}>
+                      <FileText className="w-3.5 h-3.5 mr-1" />
+                      편집
+                    </Button>
+                  </div>
+                  {detailLoading ? (
+                    <div className="flex items-center justify-center py-8">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : bomHeader ? (
+                    <div className="grid grid-cols-2 text-sm">
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">품목코드</span>
+                        <span className="font-mono text-xs">{bomHeader.item_code || bomHeader.item_number || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">품명</span>
+                        <span className="text-xs">{bomHeader.item_name || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">BOM 유형</span>
+                        <span className="text-xs">{BOM_TYPE_OPTIONS.find((o) => o.code === bomHeader.bom_type)?.label || bomHeader.bom_type || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">버전</span>
+                        <span className="text-xs">{bomHeader.version || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">기준수량</span>
+                        <span className="text-xs">{bomHeader.base_qty || "1"} {bomHeader.unit || ""}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">상태</span>
+                        {renderStatusBadge(bomHeader.status)}
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 col-span-2">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">메모</span>
+                        <span className="text-xs text-muted-foreground">{bomHeader.remark || "-"}</span>
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+
+                {/* 하단 탭: 트리뷰 / 버전 / 이력 */}
+                <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+                  <Tabs value={rightTab} onValueChange={(v) => {
+                    setRightTab(v as any);
+                    if (v === "version" && selectedBomId) fetchVersions(selectedBomId);
+                    if (v === "history" && selectedBomId) fetchHistory(selectedBomId);
+                  }}>
+                    <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/50 shrink-0">
+                      <TabsList className="h-8">
+                        <TabsTrigger value="tree" className="text-xs px-3 h-7">
+                          <GitBranch className="w-3.5 h-3.5 mr-1" />
+                          트리뷰
+                        </TabsTrigger>
+                        <TabsTrigger value="version" className="text-xs px-3 h-7">
+                          <Copy className="w-3.5 h-3.5 mr-1" />
+                          버전
+                        </TabsTrigger>
+                        <TabsTrigger value="history" className="text-xs px-3 h-7">
+                          <History className="w-3.5 h-3.5 mr-1" />
+                          이력
+                        </TabsTrigger>
+                      </TabsList>
+
+                    </div>
+
+                    {/* 트리뷰 탭 */}
+                    <TabsContent value="tree" className="flex-1 overflow-auto p-0 m-0">
+                      {/* 상단 액션바 */}
+                      <div className="flex items-center justify-between border-b px-3 py-2 bg-muted/30">
+                        <div className="flex items-center gap-2">
+                          <Button size="sm" variant="outline" onClick={() => handleTreeAddChild(null)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />루트 품목 추가
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => {
+                              if (selectedTreeNodeId && !selectedTreeNodeId.startsWith("__root_")) {
+                                handleTreeAddChild(selectedTreeNodeId);
+                              }
+                            }}
+                            disabled={!selectedTreeNodeId || selectedTreeNodeId.startsWith("__root_")}
+                          >
+                            <Plus className="w-3.5 h-3.5 mr-1" />하위 품목 추가
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                            onClick={() => {
+                              if (selectedTreeNodeId && !selectedTreeNodeId.startsWith("__root_")) {
+                                handleTreeDeleteNode(selectedTreeNodeId);
+                                setSelectedTreeNodeId(null);
+                                setEditingNodeId(null);
+                              }
+                            }}
+                            disabled={!selectedTreeNodeId || selectedTreeNodeId.startsWith("__root_")}
+                          >
+                            <Trash2 className="w-3.5 h-3.5 mr-1" />선택 삭제
+                          </Button>
+                          <div className="w-px h-5 bg-border" />
+                          <div className="flex overflow-hidden rounded-md border">
+                            <button onClick={() => { setTreeViewMode("forward"); }} className={cn("h-7 px-2.5 text-[11px] font-medium transition-colors", treeViewMode === "forward" ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-muted")}>
+                              정전개
+                            </button>
+                            <button onClick={() => { setTreeViewMode("reverse"); fetchWhereUsed(); }} className={cn("h-7 border-l px-2.5 text-[11px] font-medium transition-colors", treeViewMode === "reverse" ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-muted")}>
+                              역전개
+                            </button>
+                          </div>
+                          {treeViewMode === "forward" && (
+                            <>
+                              <Button size="sm" variant="ghost" onClick={expandAll}>
+                                <ChevronsDown className="w-3.5 h-3.5 mr-1" />펼침
+                              </Button>
+                              <Button size="sm" variant="ghost" onClick={collapseAll}>
+                                <ChevronsUp className="w-3.5 h-3.5 mr-1" />접음
+                              </Button>
+                            </>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2">
+                          {treeHasChanges && <Badge variant="secondary" className="text-warning">변경됨</Badge>}
+                          <Button size="sm" onClick={handleSaveTree} disabled={!treeHasChanges || saving}>
+                            {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin mr-1" /> : <Save className="w-3.5 h-3.5 mr-1" />}
+                            저장
+                          </Button>
+                        </div>
+                      </div>
+
+                      {/* 역전개 (Where Used) 뷰 */}
+                      {treeViewMode === "reverse" ? (
+                        <div className="flex-1 overflow-auto">
+                          {whereUsedLoading ? (
+                            <div className="flex h-40 items-center justify-center">
+                              <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                            </div>
+                          ) : (
+                            <div className="p-4">
+                              <div className="flex items-center gap-2 mb-4">
+                                <Package className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-sm font-semibold">{bomHeader?.item_name || ""}</span>
+                                <span className="font-mono text-xs text-muted-foreground">({bomHeader?.item_code || ""})</span>
+                              </div>
+                              <div className="text-xs text-muted-foreground mb-3">사용처 (Where Used)</div>
+                              {whereUsedData.length === 0 ? (
+                                <div className="flex flex-col items-center justify-center h-32 text-muted-foreground gap-2">
+                                  <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                                  <p className="text-xs">이 품목을 사용하는 BOM이 없습니다</p>
+                                </div>
+                              ) : (
+                                <div className="space-y-2">
+                                  {whereUsedData.map((wu, idx) => (
+                                    <div key={idx} className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent/50 cursor-pointer" onClick={() => {
+                                      // 해당 BOM 선택
+                                      setSelectedBomId(wu.bom_id);
+                                      setTreeViewMode("forward");
+                                    }}>
+                                      <Package className="h-4 w-4 text-primary shrink-0" />
+                                      <div className="min-w-0 flex-1">
+                                        <div className="flex items-center gap-2">
+                                          <span className="text-sm font-semibold">{wu.item_name}</span>
+                                          <span className="font-mono text-[11px] text-muted-foreground">({wu.item_code})</span>
+                                        </div>
+                                        <div className="mt-0.5 flex gap-3 text-[11px] text-muted-foreground">
+                                          <span>소요량: <b className="text-foreground">{wu.quantity}</b> {wu.unit}</span>
+                                          {wu.process_type && <span>공정: <b className="text-foreground">{wu.process_type}</b></span>}
+                                        </div>
+                                      </div>
+                                      <ChevronRight className="h-4 w-4 text-muted-foreground/50 shrink-0" />
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      ) : editingFlatTree.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center h-40 text-muted-foreground gap-2">
+                          <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                          <p className="text-xs">등록된 하위 품목이 없습니다</p>
+                          <Button size="sm" variant="outline" onClick={() => handleTreeAddChild(null)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />첫 품목 추가
+                          </Button>
+                        </div>
+                      ) : (
+                        <table className="w-full border-collapse text-xs" style={{ minWidth: "1100px" }}>
+                          <colgroup><col style={{ width: "60px" }} /><col style={{ width: "140px" }} /><col /><col style={{ width: "70px" }} /><col style={{ width: "50px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "150px" }} /><col style={{ width: "80px" }} /></colgroup>
+                          <thead className="sticky top-0 z-10">
+                            <tr className="border-b bg-muted">
+                              <th className="px-2 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">레벨</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">품번</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">품명</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">소요량</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">단위</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">공정구분</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">규격</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">비고</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">작성자</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">수정일시</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">관리품목</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {editingFlatTree.map((node) => {
+                              const nodeKey = node.id || node._tempId || "";
+                              const isVirtualRoot = (node as any)._isVirtualRoot === true;
+                              const typeBadge = getItemTypeBadge(node.item_type);
+                              const hasChildren = isVirtualRoot ? editingTree.length > 0 : node.children.length > 0;
+                              const isExpanded = expandedNodes.has(nodeKey);
+                              const isSelected = selectedTreeNodeId === nodeKey;
+                              const isEditing = editingNodeId === nodeKey && !isVirtualRoot;
+                              const level = node._level || 0;
+
+                              const depthBarColor = isVirtualRoot ? "bg-primary/70"
+                                : level === 1 ? "bg-emerald-400"
+                                : level === 2 ? "bg-amber-400"
+                                : level >= 3 ? "bg-purple-400" : "bg-muted/60";
+
+                              const depthBg = isVirtualRoot
+                                ? "border-border bg-primary/10 font-medium hover:bg-primary/20"
+                                : isSelected
+                                  ? "border-border bg-primary/5"
+                                  : level === 1 ? "border-border bg-background hover:bg-muted/60"
+                                  : level >= 2 ? "border-border bg-muted/40 hover:bg-muted/50"
+                                  : "border-border bg-background hover:bg-muted/60";
+
+                              return (
+                                <tr
+                                  key={nodeKey}
+                                  className={cn("group cursor-pointer border-b transition-colors", depthBg)}
+                                  onClick={() => {
+                                    if (editingNodeId && editingNodeId !== nodeKey) setEditingNodeId(null);
+                                    setSelectedTreeNodeId(nodeKey);
+                                    if (hasChildren) toggleEditTreeNode(nodeKey);
+                                  }}
+                                  onDoubleClick={() => {
+                                    if (!isVirtualRoot) {
+                                      setTreeEditTarget(node);
+                                      setTreeEditForm({ quantity: node.quantity || "1", unit: node.unit || "", process_type: node.process_type || "", loss_rate: node.loss_rate || "0", spec: node.spec || "", material: node.material || "", remark: node.remark || "" });
+                                      setTreeEditModalOpen(true);
+                                    }
+                                  }}
+                                >
+                                  {/* 레벨 + 좌측 색상바 + 토글 */}
+                                  <td className="relative px-1 py-2" style={{ paddingLeft: `${level * 16 + 8}px` }}>
+                                    <div className={cn("absolute left-0 top-0 h-full w-[3px]", depthBarColor)} />
+                                    <div className="flex items-center gap-1">
+                                      <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
+                                        {hasChildren ? (
+                                          isExpanded ? <ChevronDown className={cn("h-3.5 w-3.5", isVirtualRoot ? "text-primary" : "text-muted-foreground/70")} />
+                                          : <ChevronRight className={cn("h-3.5 w-3.5", isVirtualRoot ? "text-primary" : "text-muted-foreground/70")} />
+                                        ) : (
+                                          <span className="h-1 w-1 rounded-full bg-muted-foreground/40" />
+                                        )}
+                                      </span>
+                                      <span className="text-[11px]">{level}</span>
+                                    </div>
+                                  </td>
+                                  {/* 품번 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">
+                                    <span className={cn("font-mono text-[11px]", isVirtualRoot && "font-bold text-foreground")}>
+                                      {node.item_number || "-"}
+                                    </span>
+                                  </td>
+                                  {/* 품명 */}
+                                  <td className={cn("overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2", isVirtualRoot && "font-bold")}>
+                                    {node.item_name || "-"}
+                                  </td>
+                                  {/* 소요량 */}
+                                  <td className="px-3 py-2 text-center">{isVirtualRoot ? (bomHeader?.base_qty || "1") : (node.quantity || "-")}</td>
+                                  {/* 단위 */}
+                                  <td className="px-3 py-2 text-center">{isVirtualRoot ? "-" : (node.unit || "-")}</td>
+                                  {/* 공정구분 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.process_type || "-")}</td>
+                                  {/* 규격 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.spec || "-")}</td>
+                                  {/* 비고 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.remark || "-")}</td>
+                                  {/* 작성자 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 text-muted-foreground">{isVirtualRoot ? "-" : (node.writer || "-")}</td>
+                                  {/* 수정일시 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 text-muted-foreground">
+                                    {isVirtualRoot ? "-" : (node.updated_date ? new Date(node.updated_date).toLocaleString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }) : "-")}
+                                  </td>
+                                  {/* 관리품목 */}
+                                  <td className="px-2 py-2" style={{ minWidth: "150px" }}>
+                                    {isVirtualRoot ? <span className="text-center block">-</span> : (
+                                      node.item_type ? (
+                                        <div className="flex flex-row items-center gap-1 flex-nowrap">{node.item_type.split(",").map((t: string, i: number) => {
+                                          const trimmed = t.trim();
+                                          if (!trimmed) return null;
+                                          return <span key={i} className="shrink-0 rounded px-1 py-0.5 text-[9px] font-medium bg-muted text-muted-foreground">{trimmed}</span>;
+                                        })}</div>
+                                      ) : "-"
+                                    )}
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      )}
+                    </TabsContent>
+
+                    {/* 버전 탭 */}
+                    <TabsContent value="version" className="flex-1 overflow-auto m-0">
+                      <div className="p-3">
+                        <div className="flex items-center justify-between mb-3">
+                          <span className="text-xs text-muted-foreground">
+                            {versions.length}개 버전
+                          </span>
+                          <Button size="sm" onClick={() => setShowNewVersionDialog(true)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />
+                            새 버전
+                          </Button>
+                        </div>
+                        {versionLoading ? (
+                          <div className="flex items-center justify-center py-8">
+                            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                          </div>
+                        ) : versions.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                            <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                            <p className="text-xs">버전 데이터가 없어요</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-2">
+                            {versions.map((ver) => {
+                              const isActive = ver.id === currentVersionId;
+                              const statusInfo = VERSION_STATUS_MAP[ver.status] || { label: ver.status, className: "bg-muted text-muted-foreground" };
+                              return (
+                                <div
+                                  key={ver.id}
+                                  className={cn(
+                                    "flex items-center justify-between p-3 rounded-lg border transition-colors",
+                                    isActive ? "border-primary/30 bg-primary/5" : "hover:bg-muted/50"
+                                  )}
+                                >
+                                  <div className="flex items-center gap-3">
+                                    <div className="flex flex-col gap-0.5">
+                                      <div className="flex items-center gap-2">
+                                        <span className="text-sm font-semibold">{ver.version_name}</span>
+                                        <span className={cn("text-[10px] font-medium px-1.5 py-0.5 rounded-full", statusInfo.className)}>
+                                          {statusInfo.label}
+                                        </span>
+                                        {isActive && (
+                                          <Badge variant="outline" className="text-[10px] h-4 border-primary/30 text-primary">
+                                            현재
+                                          </Badge>
+                                        )}
+                                      </div>
+                                      <span className="text-[11px] text-muted-foreground">
+                                        {ver.detail_count || 0}개 구성품 · {ver.created_date ? new Date(ver.created_date).toLocaleDateString("ko-KR") : "-"}
+                                      </span>
+                                    </div>
+                                  </div>
+                                  <div className="flex items-center gap-1">
+                                    {!isActive && (
+                                      <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => handleLoadVersion(ver.id)}>
+                                        <RotateCcw className="w-3 h-3 mr-1" />
+                                        불러오기
+                                      </Button>
+                                    )}
+                                    {ver.status !== "active" && (
+                                      <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => handleActivateVersion(ver.id)}>
+                                        <CheckCircle2 className="w-3 h-3 mr-1" />
+                                        확정
+                                      </Button>
+                                    )}
+                                    {ver.status !== "active" && (
+                                      <Button
+                                        size="sm"
+                                        variant="ghost"
+                                        className="h-7 text-xs text-destructive hover:text-destructive"
+                                        onClick={() => handleDeleteVersion(ver.id)}
+                                      >
+                                        <Trash2 className="w-3 h-3" />
+                                      </Button>
+                                    )}
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    </TabsContent>
+
+                    {/* 이력 탭 */}
+                    <TabsContent value="history" className="flex-1 overflow-auto m-0">
+                      <div className="p-3">
+                        <div className="flex items-center justify-between mb-3">
+                          <span className="text-xs text-muted-foreground">
+                            {historyList.length}건 이력
+                          </span>
+                        </div>
+                        {historyLoading ? (
+                          <div className="flex items-center justify-center py-8">
+                            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                          </div>
+                        ) : historyList.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                            <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                            <p className="text-xs">이력 데이터가 없어요</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-2">
+                            {historyList.map((entry) => {
+                              const typeStyle = CHANGE_TYPE_STYLE[entry.change_type] || "bg-muted text-muted-foreground ring-border";
+                              return (
+                                <div key={entry.id} className="p-3 rounded-lg border hover:bg-muted/50 transition-colors">
+                                  <div className="flex items-center justify-between mb-1">
+                                    <div className="flex items-center gap-2">
+                                      <span className={cn("inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium ring-1 ring-inset", typeStyle)}>
+                                        {entry.change_type}
+                                      </span>
+                                      {(entry.revision || entry.version) && (
+                                        <span className="text-[10px] text-muted-foreground">
+                                          {entry.revision && `차수 ${entry.revision}`}{entry.revision && entry.version && " / "}{entry.version && `v${entry.version}`}
+                                        </span>
+                                      )}
+                                    </div>
+                                    <span className="text-[10px] text-muted-foreground">
+                                      {entry.changed_date ? new Date(entry.changed_date).toLocaleString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }) : "-"}
+                                    </span>
+                                  </div>
+                                  <p className="text-xs mt-1">{entry.change_description || "-"}</p>
+                                  {entry.changed_by && (
+                                    <span className="text-[10px] text-muted-foreground/60 mt-1 block">
+                                      {entry.changed_by}
+                                    </span>
+                                  )}
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </div>
+              </div>
+            )}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ─── BOM 등록/수정 모달 ─────────────────── */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto" onPointerDownOutside={(e) => { if (showItemSearchModal) e.preventDefault(); }}>
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "BOM 수정" : "BOM 등록"}</DialogTitle>
+            <DialogDescription>{isEditMode ? "BOM 정보를 수정해요" : "새로운 BOM을 등록해요"}</DialogDescription>
+          </DialogHeader>
+        <div className="space-y-6">
+          {/* 기본정보 */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                품목 <span className="text-destructive">*</span>
+              </Label>
+              <div className="flex gap-2">
+                <Input
+                  className="h-9 flex-1"
+                  value={masterForm.item_code ? `${masterForm.item_code} - ${masterForm.item_name}` : ""}
+                  placeholder="품목을 검색해주세요"
+                  readOnly
+                  onClick={() => {
+                    setItemSearchTarget("master");
+                    setItemSearchKeyword("");
+                    setShowItemSearchModal(true);
+                    searchItems("");
+                  }}
+                />
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="h-9 px-3"
+                  onClick={() => {
+                    setItemSearchTarget("master");
+                    setItemSearchKeyword("");
+                    setShowItemSearchModal(true);
+                    searchItems("");
+                  }}
+                >
+                  <Search className="w-3.5 h-3.5" />
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                BOM 유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={masterForm.bom_type || ""} onValueChange={(v) => setMasterForm((prev) => ({ ...prev, bom_type: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  {BOM_TYPE_OPTIONS.map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">기준수량</Label>
+              <Input
+                className="h-9"
+                type="number"
+                value={masterForm.base_qty}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, base_qty: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">단위</Label>
+              <Input
+                className="h-9"
+                value={masterForm.unit}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, unit: e.target.value }))}
+                placeholder="EA"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                버전 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={masterForm.version}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, version: e.target.value }))}
+                placeholder="1.0"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">상태</Label>
+              <Select value={masterForm.status || "draft"} onValueChange={(v) => setMasterForm((prev) => ({ ...prev, status: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="draft">초안</SelectItem>
+                  <SelectItem value="active">활성</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                유효 시작일 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={masterForm.effective_date || ""}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, effective_date: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">유효 종료일</Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={masterForm.expiry_date || ""}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, expiry_date: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs font-medium">메모</Label>
+              <Textarea
+                className="min-h-[60px] resize-none"
+                value={masterForm.remark}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, remark: e.target.value }))}
+                placeholder="메모를 입력해주세요"
+              />
+            </div>
+          </div>
+
+          {/* BOM 구성품목 */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <h4 className="text-sm font-semibold">BOM 구성품목</h4>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  setItemSearchTarget("detail");
+                  setItemSearchKeyword("");
+                  setShowItemSearchModal(true);
+                  searchItems("");
+                }}
+              >
+                <Plus className="w-3.5 h-3.5 mr-1" />
+                품목 추가
+              </Button>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                    <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                    <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공정유형</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">손실율(%)</TableHead>
+                    <TableHead className="w-[40px]" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {modalDetailRows.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={8} className="text-center py-8 text-muted-foreground text-[13px]">
+                        구성품목을 추가해주세요
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    modalDetailRows.map((row, idx) => (
+                      <TableRow key={idx}>
+                        <TableCell className="text-center text-muted-foreground text-[13px]">{idx + 1}</TableCell>
+                        <TableCell className="font-mono text-[13px]">{row.item_number}</TableCell>
+                        <TableCell className="text-[13px]">{row.item_name}</TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[70px] text-xs"
+                            type="number"
+                            value={row.quantity}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].quantity = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell className="text-[13px]">{row.unit}</TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[90px] text-xs"
+                            value={row.process_type}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].process_type = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                            placeholder="공정"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[70px] text-xs"
+                            type="number"
+                            value={row.loss_rate}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].loss_rate = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                            onClick={() => setModalDetailRows((prev) => prev.filter((_, i) => i !== idx))}
+                          >
+                            <X className="w-3.5 h-3.5" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)} disabled={saving}>
+              취소
+            </Button>
+            <Button onClick={handleSaveBom} disabled={saving}>
+              {saving && <Loader2 className="w-3.5 h-3.5 animate-spin mr-1.5" />}
+              {isEditMode ? "수정" : "등록"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 품목 검색 모달 ──────────────────────── */}
+      <Dialog open={showItemSearchModal} onOpenChange={setShowItemSearchModal}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>품목 검색</DialogTitle>
+            <DialogDescription>품목코드 또는 품명으로 검색해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              className="h-9 flex-1"
+              placeholder="품목코드 또는 품명 입력"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+            />
+            <Button size="sm" className="h-9" onClick={() => searchItems()} disabled={itemSearchLoading}>
+              {itemSearchLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}
+            </Button>
+          </div>
+          <div className="max-h-[300px] overflow-auto border rounded-lg">
+            {itemSearchResults.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground gap-1">
+                <Search className="w-6 h-6 text-muted-foreground/40" />
+                <p className="text-xs">검색어를 입력해주세요</p>
+              </div>
+            ) : (
+              itemSearchResults.map((item) => {
+                const badge = getItemTypeBadge(item.division);
+                return (
+                  <div
+                    key={item.id}
+                    className="flex items-center gap-3 px-3 py-2 border-b last:border-b-0 hover:bg-accent cursor-pointer transition-colors"
+                    onClick={() => selectItem(item)}
+                  >
+                    <span className={cn("text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0", badge.className)}>
+                      {badge.label}
+                    </span>
+                    <span className="font-mono text-[11px] text-muted-foreground">{item.item_number}</span>
+                    <span className="text-xs">{item.item_name}</span>
+                    <span className="ml-auto text-[11px] text-muted-foreground">{item.unit || ""}</span>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 품목 수정 모달 (더블클릭) ─────────────────── */}
+      <Dialog open={treeEditModalOpen} onOpenChange={setTreeEditModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>품목 수정</DialogTitle>
+            <DialogDescription>선택한 품목의 BOM 구성 정보를 수정합니다</DialogDescription>
+          </DialogHeader>
+          {treeEditTarget && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">품목코드</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditTarget.item_number || ""} readOnly />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">품목명</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditTarget.item_name || ""} readOnly />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">구성수량 <span className="text-destructive">*</span></Label>
+                  <Input className="h-9" type="number" value={treeEditForm.quantity || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, quantity: e.target.value }))} />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">단위</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.unit || "-"} readOnly />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">공정</Label>
+                  <Select value={treeEditForm.process_type || ""} onValueChange={(v) => setTreeEditForm((p) => ({ ...p, process_type: v }))}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="공정 선택" /></SelectTrigger>
+                    <SelectContent>
+                      {processOptions.map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">로스율 (%)</Label>
+                  <Input className="h-9" type="number" value={treeEditForm.loss_rate || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, loss_rate: e.target.value }))} />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">규격</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.spec || "-"} readOnly />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">재질</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.material || "-"} readOnly />
+                </div>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold text-muted-foreground">메모</Label>
+                <textarea className="flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm" value={treeEditForm.remark || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, remark: e.target.value }))} placeholder="비고 사항을 입력하세요" />
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setTreeEditModalOpen(false)}>취소</Button>
+            <Button onClick={() => {
+              if (treeEditTarget) {
+                const nodeKey = treeEditTarget.id || treeEditTarget._tempId || "";
+                setEditingTree(prev => updateTreeNode(prev, nodeKey, node => ({
+                  ...node,
+                  quantity: treeEditForm.quantity || "1",
+                  process_type: treeEditForm.process_type || "",
+                  loss_rate: treeEditForm.loss_rate || "0",
+                  remark: treeEditForm.remark || "",
+                  _isModified: !node._isNew ? true : node._isModified,
+                })));
+                setTreeHasChanges(true);
+              }
+              setTreeEditModalOpen(false);
+            }}>저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 트리 품목 검색 모달 ─────────────────── */}
+      <Dialog open={treeItemSearchOpen} onOpenChange={setTreeItemSearchOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>품목 검색 (트리 추가)</DialogTitle>
+            <DialogDescription>추가할 품목을 검색해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              className="h-9 flex-1"
+              placeholder="품목코드 또는 품명 입력"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+            />
+            <Button size="sm" className="h-9" onClick={() => searchItems()} disabled={itemSearchLoading}>
+              {itemSearchLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}
+            </Button>
+          </div>
+          <div className="max-h-[300px] overflow-auto border rounded-lg">
+            {itemSearchResults.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground gap-1">
+                <Search className="w-6 h-6 text-muted-foreground/40" />
+                <p className="text-xs">검색어를 입력해주세요</p>
+              </div>
+            ) : (
+              itemSearchResults.filter((item) => {
+                // 자기 자신 제외
+                if (bomHeader && (item.id === bomHeader.item_id || item.item_number === bomHeader.item_code)) return false;
+                // 조상 경로 순환 참조 제외
+                if (addTargetParentId) {
+                  const collectAncestorIds = (nodes: TreeNode[], targetId: string, path: string[]): string[] | null => {
+                    for (const n of nodes) {
+                      const nk = n.id || n._tempId || "";
+                      if (nk === targetId) return [...path, n.child_item_id || ""];
+                      if (n.children.length > 0) {
+                        const r = collectAncestorIds(n.children, targetId, [...path, n.child_item_id || ""]);
+                        if (r) return r;
+                      }
+                    }
+                    return null;
+                  };
+                  const ancestors = collectAncestorIds(editingTree, addTargetParentId, []);
+                  if (ancestors && ancestors.includes(item.id)) return false;
+                }
+                return true;
+              }).map((item) => {
+                const badge = getItemTypeBadge(item.division);
+                return (
+                  <div
+                    key={item.id}
+                    className="flex items-center gap-3 px-3 py-2 border-b last:border-b-0 hover:bg-accent cursor-pointer transition-colors"
+                    onClick={() => handleTreeItemSelect(item)}
+                  >
+                    <span className={cn("text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0", badge.className)}>
+                      {badge.label}
+                    </span>
+                    <span className="font-mono text-[11px] text-muted-foreground">{item.item_number}</span>
+                    <span className="text-xs">{item.item_name}</span>
+                    <span className="ml-auto text-[11px] text-muted-foreground">{item.unit || ""}</span>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 새 버전 생성 다이얼로그 ────────────── */}
+      <Dialog open={showNewVersionDialog} onOpenChange={setShowNewVersionDialog}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>새 버전 생성</DialogTitle>
+            <DialogDescription>현재 버전의 데이터를 복사하여 새 버전을 만들어요</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-xs font-medium">버전명 (비워두면 자동 채번)</Label>
+            <Input
+              className="h-9"
+              value={newVersionName}
+              onChange={(e) => setNewVersionName(e.target.value)}
+              placeholder="예: 2.0"
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowNewVersionDialog(false)}>
+              취소
+            </Button>
+            <Button onClick={handleCreateVersion}>
+              <Plus className="w-3.5 h-3.5 mr-1" />
+              생성
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 이력 추가 다이얼로그 ───────────────── */}
+      <Dialog open={showHistoryDialog} onOpenChange={setShowHistoryDialog}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>이력 추가</DialogTitle>
+            <DialogDescription>BOM 변경 이력을 기록해요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                변경 유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={newHistory.change_type} onValueChange={(v) => setNewHistory((prev) => ({ ...prev, change_type: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="변경 유형 선택" /></SelectTrigger>
+                <SelectContent>
+                  {CHANGE_TYPE_OPTIONS.map((t) => (
+                    <SelectItem key={t} value={t}>{t}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">변경 내용</Label>
+              <Textarea
+                className="min-h-[80px] resize-none"
+                value={newHistory.change_description}
+                onChange={(e) => setNewHistory((prev) => ({ ...prev, change_description: e.target.value }))}
+                placeholder="변경 내용을 입력해주세요"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowHistoryDialog(false)}>
+              취소
+            </Button>
+            <Button onClick={handleAddHistory}>
+              <Plus className="w-3.5 h-3.5 mr-1" />
+              추가
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 엑셀 업로드 다이얼로그 ────────────── */}
+      <Dialog open={showExcelUpload} onOpenChange={setShowExcelUpload}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>BOM 엑셀 업로드</DialogTitle>
+            <DialogDescription>
+              {selectedBomId
+                ? "선택한 BOM에 새 버전을 엑셀로 생성해요"
+                : "엑셀 파일로 새 BOM을 생성해요"}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="border-2 border-dashed rounded-lg p-6 text-center">
+              <input
+                type="file"
+                accept=".xlsx,.xls"
+                className="hidden"
+                id="excel-file-input"
+                onChange={(e) => setExcelFile(e.target.files?.[0] || null)}
+              />
+              <label htmlFor="excel-file-input" className="cursor-pointer">
+                <Upload className="w-8 h-8 mx-auto mb-2 text-muted-foreground/40" />
+                <p className="text-sm text-muted-foreground mb-1">
+                  {excelFile ? excelFile.name : "클릭하여 파일을 선택해주세요"}
+                </p>
+                <p className="text-[10px] text-muted-foreground/60">.xlsx, .xls 형식</p>
+              </label>
+            </div>
+            <div className="bg-muted/50 rounded-lg p-3 text-xs text-muted-foreground space-y-1">
+              <p className="font-medium text-foreground">엑셀 형식 안내</p>
+              <p>레벨 0: BOM 마스터 (최상위 품목)</p>
+              <p>레벨 1: 직접 자품목</p>
+              <p>레벨 2+: 자품목의 자품목</p>
+              <p>필수 컬럼: level, item_number, quantity</p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setShowExcelUpload(false); setExcelFile(null); }}>
+              취소
+            </Button>
+            <Button onClick={handleExcelUpload} disabled={!excelFile || excelUploading}>
+              {excelUploading && <Loader2 className="w-3.5 h-3.5 animate-spin mr-1.5" />}
+              업로드
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/production/plan-management/page.tsx b/frontend/app/(main)/COMPANY_8/production/plan-management/page.tsx
new file mode 100644
index 00000000..546ed739
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/production/plan-management/page.tsx
@@ -0,0 +1,1850 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Upload,
+  Download,
+  RefreshCw,
+  ChevronRight,
+  Save,
+  Trash2,
+  Zap,
+  Package,
+  Wrench,
+  AlertTriangle,
+  ClipboardList,
+  Calendar,
+  Scissors,
+  Loader2,
+  Maximize2,
+  Minimize2,
+  Merge,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  getOrderSummary,
+  getStockShortage,
+  getPlans,
+  updatePlan,
+  deletePlan,
+  generateSchedule,
+  previewSchedule,
+  mergeSchedules,
+  generateSemiSchedule,
+  splitSchedule,
+  type OrderSummaryItem,
+  type StockShortageItem,
+  type ProductionPlan,
+  type GenerateScheduleRequest,
+  type GenerateScheduleResponse,
+} from "@/lib/api/production";
+import TimelineScheduler, {
+  type TimelineResource,
+  type TimelineEvent,
+  type ZoomLevel,
+  type StatusColor,
+} from "@/components/common/TimelineScheduler";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { apiClient } from "@/lib/api/client";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+
+// ─── 상수 ───
+
+const STATUS_COLORS: StatusColor[] = [
+  { key: "planned", label: "계획", bgClass: "from-blue-500 to-blue-600" },
+  { key: "work-order", label: "지시", bgClass: "from-amber-500 to-amber-600" },
+  { key: "in-progress", label: "진행", bgClass: "from-emerald-500 to-emerald-600" },
+  { key: "completed", label: "완료", bgClass: "from-gray-400 to-gray-500" },
+];
+
+const STATUS_LABEL: Record<string, string> = {
+  planned: "계획",
+  "work-order": "작업지시",
+  "in-progress": "진행중",
+  completed: "완료",
+};
+
+// 수주 테이블 컬럼 설정
+const ORDER_COLUMNS = [
+  { key: "total_order_qty", label: "총수주량" },
+  { key: "total_ship_qty", label: "출고량" },
+  { key: "total_balance_qty", label: "잔량" },
+  { key: "current_stock", label: "현재고" },
+  { key: "safety_stock", label: "안전재고" },
+  { key: "existing_plan_qty", label: "기생산계획량" },
+  { key: "in_progress_qty", label: "생산진행" },
+  { key: "required_plan_qty", label: "필요생산계획" },
+  { key: "lead_time", label: "리드타임(일)" },
+];
+
+// ========== 메인 컴포넌트 ==========
+
+export default function ProductionPlanManagementPage() {
+  // 탭 상태
+  const [leftTab, setLeftTab] = useState("order");
+  const [rightTab, setRightTab] = useState("finished");
+
+  // 전체화면 토글
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  // 로딩 상태
+  const [loadingOrders, setLoadingOrders] = useState(false);
+  const [loadingStock, setLoadingStock] = useState(false);
+  const [loadingPlans, setLoadingPlans] = useState(false);
+  const [generating, setGenerating] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  // 데이터 상태
+  const [orderItems, setOrderItems] = useState<OrderSummaryItem[]>([]);
+  const [stockItems, setStockItems] = useState<StockShortageItem[]>([]);
+  const [finishedPlans, setFinishedPlans] = useState<ProductionPlan[]>([]);
+  const [semiPlans, setSemiPlans] = useState<ProductionPlan[]>([]);
+  const [equipmentList, setEquipmentList] = useState<{ id: string; equipment_code: string; equipment_name: string }[]>([]);
+
+  // 선택/토글 상태
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [selectedItemGroups, setSelectedItemGroups] = useState<Set<string>>(new Set());
+  const [filterUnplannedOrdersOnly, setFilterUnplannedOrdersOnly] = useState(false);
+  const [selectedStockItems, setSelectedStockItems] = useState<Set<string>>(new Set());
+
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [searchItemCode, setSearchItemCode] = useState("");
+  const [searchStatus, setSearchStatus] = useState("all");
+  const [searchStartDate, setSearchStartDate] = useState("");
+  const [searchEndDate, setSearchEndDate] = useState("");
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-plan-management", "sales_order_mng", ORDER_COLUMNS);
+
+  // 타임라인 옵션
+  const [recalculateUnstarted, setRecalculateUnstarted] = useState(true);
+  const [finishedZoom, setFinishedZoom] = useState<ZoomLevel>("week");
+  const [semiZoom, setSemiZoom] = useState<ZoomLevel>("week");
+
+  // 반제품 옵션
+  const [semiConsiderStock, setSemiConsiderStock] = useState(true);
+  const [semiRecalculate, setSemiRecalculate] = useState(false);
+  const [semiExcludeUsed, setSemiExcludeUsed] = useState(true);
+
+  // 모달 상태
+  const [scheduleModalOpen, setScheduleModalOpen] = useState(false);
+  const [orderImportModalOpen, setOrderImportModalOpen] = useState(false);
+  const [stockImportModalOpen, setStockImportModalOpen] = useState(false);
+  const [changeConfirmModalOpen, setChangeConfirmModalOpen] = useState(false);
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 모달 데이터
+  const [selectedPlan, setSelectedPlan] = useState<ProductionPlan | null>(null);
+  const [modalQuantity, setModalQuantity] = useState(0);
+  const [modalStartDate, setModalStartDate] = useState("");
+  const [modalEndDate, setModalEndDate] = useState("");
+  const [modalManager, setModalManager] = useState("");
+  const [modalWorkOrderNo, setModalWorkOrderNo] = useState("");
+  const [modalRemarks, setModalRemarks] = useState("");
+  const [modalEquipmentId, setModalEquipmentId] = useState("");
+
+  // 미리보기 데이터
+  const [previewData, setPreviewData] = useState<GenerateScheduleResponse | null>(null);
+
+  // 불러오기 모드
+  const [importMode, setImportMode] = useState<"add" | "new">("add");
+
+  // 병합: 타임라인에서 선택된 계획 ID
+  const [selectedPlanIds, setSelectedPlanIds] = useState<Set<number>>(new Set());
+
+  // useConfirmDialog
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // ========== 데이터 로드 ==========
+
+  const fetchOrderSummary = useCallback(async () => {
+    setLoadingOrders(true);
+    try {
+      const res = await getOrderSummary({
+        excludePlanned: filterUnplannedOrdersOnly,
+        itemCode: searchItemCode || undefined,
+      });
+      if (res.success) setOrderItems(res.data || []);
+    } catch (err: any) {
+      toast.error("수주 데이터 조회 실패: " + (err.message || ""));
+    } finally {
+      setLoadingOrders(false);
+    }
+  }, [filterUnplannedOrdersOnly, searchItemCode]);
+
+  const fetchStockShortage = useCallback(async () => {
+    setLoadingStock(true);
+    try {
+      const res = await getStockShortage();
+      if (res.success) setStockItems(res.data || []);
+    } catch (err: any) {
+      toast.error("안전재고 부족분 조회 실패: " + (err.message || ""));
+    } finally {
+      setLoadingStock(false);
+    }
+  }, []);
+
+  const fetchPlans = useCallback(async () => {
+    setLoadingPlans(true);
+    try {
+      const [finRes, semiRes] = await Promise.all([
+        getPlans({
+          productType: "완제품",
+          status: searchStatus !== "all" ? searchStatus : undefined,
+          startDate: searchStartDate || undefined,
+          endDate: searchEndDate || undefined,
+          itemCode: searchItemCode || undefined,
+        }),
+        getPlans({
+          productType: "반제품",
+          status: searchStatus !== "all" ? searchStatus : undefined,
+          startDate: searchStartDate || undefined,
+          endDate: searchEndDate || undefined,
+        }),
+      ]);
+      if (finRes.success) setFinishedPlans(finRes.data || []);
+      if (semiRes.success) setSemiPlans(semiRes.data || []);
+    } catch (err: any) {
+      toast.error("생산계획 조회 실패: " + (err.message || ""));
+    } finally {
+      setLoadingPlans(false);
+    }
+  }, [searchStatus, searchStartDate, searchEndDate, searchItemCode]);
+
+  const fetchEquipmentList = useCallback(async () => {
+    try {
+      const res = await apiClient.get("/process-info/equipments");
+      if (res.data?.success) setEquipmentList(res.data.data || []);
+    } catch {
+      // 설비 목록 없어도 정상 동작
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchOrderSummary();
+    fetchStockShortage();
+    fetchPlans();
+    fetchEquipmentList();
+  }, []);
+
+  // ========== DynamicSearchFilter 콜백 ==========
+
+  const handleSearchFilterChange = useCallback((filters: FilterValue[]) => {
+    setSearchFilters(filters);
+    let itemCode = "";
+    let status = "all";
+    let startDate = "";
+    let endDate = "";
+    for (const f of filters) {
+      if (f.columnName === "item_code" && f.value) itemCode = f.value;
+      if (f.columnName === "status" && f.value) status = f.value;
+      if (f.columnName === "start_date" && f.operator === "between" && f.value) {
+        const [s, e] = f.value.split("|");
+        if (s) startDate = s;
+        if (e) endDate = e;
+      }
+    }
+    setSearchItemCode(itemCode);
+    setSearchStatus(status || "all");
+    setSearchStartDate(startDate);
+    setSearchEndDate(endDate);
+  }, []);
+
+  useEffect(() => {
+    if (searchFilters.length > 0) {
+      fetchOrderSummary();
+      fetchPlans();
+    }
+  }, [searchItemCode, searchStatus, searchStartDate, searchEndDate]);
+
+  // ========== 토글/선택 핸들러 ==========
+
+  const toggleItemExpand = useCallback((itemCode: string) => {
+    setExpandedItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(itemCode)) next.delete(itemCode);
+      else next.add(itemCode);
+      return next;
+    });
+  }, []);
+
+  const toggleItemGroupSelect = useCallback((itemCode: string) => {
+    setSelectedItemGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(itemCode)) next.delete(itemCode);
+      else next.add(itemCode);
+      return next;
+    });
+  }, []);
+
+  const toggleAllItemGroups = useCallback(
+    (checked: boolean) => {
+      setSelectedItemGroups(checked ? new Set(orderItems.map((i) => i.item_code)) : new Set());
+    },
+    [orderItems]
+  );
+
+  const toggleStockItem = useCallback((itemCode: string) => {
+    setSelectedStockItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(itemCode)) next.delete(itemCode);
+      else next.add(itemCode);
+      return next;
+    });
+  }, []);
+
+  const toggleAllStockItems = useCallback(
+    (checked: boolean) => {
+      setSelectedStockItems(checked ? new Set(stockItems.map((i) => i.item_code)) : new Set());
+    },
+    [stockItems]
+  );
+
+  // ========== 타임라인 리소스 & 이벤트 ==========
+
+  const finishedResources: TimelineResource[] = useMemo(() => {
+    const map = new Map<string, TimelineResource>();
+    for (const p of finishedPlans) {
+      if (!map.has(p.item_code)) {
+        map.set(p.item_code, {
+          id: p.item_code,
+          label: p.item_code,
+          subLabel: p.item_name,
+        });
+      }
+    }
+    return Array.from(map.values());
+  }, [finishedPlans]);
+
+  const finishedEvents: TimelineEvent[] = useMemo(() => {
+    return finishedPlans.map((p) => ({
+      id: p.id,
+      resourceId: p.item_code,
+      startDate: p.start_date?.split("T")[0] || "",
+      endDate: p.end_date?.split("T")[0] || "",
+      label: `${Number(p.plan_qty).toLocaleString()}`,
+      status: p.status,
+      progress: Number(p.progress_rate) || 0,
+      data: p,
+    }));
+  }, [finishedPlans]);
+
+  const semiResources: TimelineResource[] = useMemo(() => {
+    const map = new Map<string, TimelineResource>();
+    for (const p of semiPlans) {
+      if (!map.has(p.item_code)) {
+        map.set(p.item_code, {
+          id: p.item_code,
+          label: p.item_code,
+          subLabel: p.item_name,
+        });
+      }
+    }
+    return Array.from(map.values());
+  }, [semiPlans]);
+
+  const semiEvents: TimelineEvent[] = useMemo(() => {
+    return semiPlans.map((p) => ({
+      id: p.id,
+      resourceId: p.item_code,
+      startDate: p.start_date?.split("T")[0] || "",
+      endDate: p.end_date?.split("T")[0] || "",
+      label: `${Number(p.plan_qty).toLocaleString()}`,
+      status: p.status,
+      progress: Number(p.progress_rate) || 0,
+      data: p,
+    }));
+  }, [semiPlans]);
+
+  // ========== 액션 핸들러 ==========
+
+  const handleSearch = useCallback(() => {
+    fetchOrderSummary();
+    fetchPlans();
+  }, [fetchOrderSummary, fetchPlans]);
+
+  // 자동 스케줄 생성 (preview → confirm → apply)
+  const handleGenerateSchedule = useCallback(async () => {
+    if (selectedItemGroups.size === 0) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+
+    // 납기일별로 분리하여 각각 계획 생성
+    const items: GenerateScheduleRequest["items"] = [];
+    orderItems
+      .filter((item) => selectedItemGroups.has(item.item_code))
+      .forEach((item) => {
+        const leadTime = Number(item.lead_time) || 0;
+        // 재계산 모드: 기존 planned를 삭제 후 재생성 → 수주 잔량에서 진행중만 빼기
+        const totalRequired = recalculateUnstarted
+          ? Number(item.total_balance_qty || 0) - Number(item.in_progress_qty || 0)
+          : Number(item.required_plan_qty);
+        if (totalRequired <= 0) return;
+
+        // 수주가 여러 건이고 납기일이 다르면 각각 분리
+        if (item.orders && item.orders.length > 1) {
+          const byDueDate = new Map<string, number>();
+          for (const order of item.orders) {
+            const dd = order.due_date || new Date().toISOString().split("T")[0];
+            byDueDate.set(dd, (byDueDate.get(dd) || 0) + Number(order.balance_qty || 0));
+          }
+          if (byDueDate.size > 1) {
+            // 납기일별 잔량 비율로 required_plan_qty 분배
+            const totalBalance = Number(item.total_balance_qty) || 1;
+            let distributed = 0;
+            const entries = [...byDueDate.entries()];
+            entries.forEach(([dueDate, balanceQty], idx) => {
+              if (balanceQty <= 0) return;
+              // 마지막 건은 나머지 할당 (반올림 오차 방지)
+              const qty = idx === entries.length - 1
+                ? totalRequired - distributed
+                : Math.round(totalRequired * (balanceQty / totalBalance));
+              if (qty <= 0) return;
+              distributed += qty;
+              items.push({
+                item_code: item.item_code,
+                item_name: item.item_name,
+                required_qty: qty,
+                earliest_due_date: dueDate,
+                lead_time: leadTime,
+              });
+            });
+          } else {
+            items.push({
+              item_code: item.item_code,
+              item_name: item.item_name,
+              required_qty: totalRequired,
+              earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+              lead_time: leadTime,
+            });
+          }
+        } else {
+          items.push({
+            item_code: item.item_code,
+            item_name: item.item_name,
+            required_qty: totalRequired,
+            earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+            lead_time: leadTime,
+          });
+        }
+      });
+
+    // items가 비어있으면 사용자에게 알림
+
+
+    if (items.length === 0) {
+      toast.error("계획 수량이 있는 품목이 없습니다. 수주 잔량을 확인해주세요.");
+      return;
+    }
+
+    setGenerating(true);
+    try {
+      const req: GenerateScheduleRequest = {
+        items,
+        options: {
+          safety_lead_time: 0,
+          recalculate_unstarted: recalculateUnstarted,
+          product_type: "완제품",
+        },
+      };
+      const previewRes = await previewSchedule(req);
+      if (previewRes.success) {
+        setPreviewData(previewRes.data);
+        setChangeConfirmModalOpen(true);
+      }
+    } catch (err: any) {
+      toast.error("스케줄 미리보기 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [selectedItemGroups, orderItems, recalculateUnstarted]);
+
+  const handleApplySchedule = useCallback(async () => {
+    if (selectedItemGroups.size === 0) return;
+
+    // 납기일별로 분리하여 각각 계획 생성
+    const items: GenerateScheduleRequest["items"] = [];
+    orderItems
+      .filter((item) => selectedItemGroups.has(item.item_code))
+      .forEach((item) => {
+        const leadTime = Number(item.lead_time) || 0;
+        const totalRequired = recalculateUnstarted
+          ? Number(item.required_plan_qty) + Number(item.existing_plan_qty || 0)
+          : Number(item.required_plan_qty);
+        if (totalRequired <= 0) return;
+
+        if (item.orders && item.orders.length > 1) {
+          const byDueDate = new Map<string, number>();
+          for (const order of item.orders) {
+            const dd = order.due_date || new Date().toISOString().split("T")[0];
+            byDueDate.set(dd, (byDueDate.get(dd) || 0) + Number(order.balance_qty || 0));
+          }
+          if (byDueDate.size > 1) {
+            const totalBalance = Number(item.total_balance_qty) || 1;
+            let distributed = 0;
+            const entries = [...byDueDate.entries()];
+            entries.forEach(([dueDate, balanceQty], idx) => {
+              if (balanceQty <= 0) return;
+              const qty = idx === entries.length - 1
+                ? totalRequired - distributed
+                : Math.round(totalRequired * (balanceQty / totalBalance));
+              if (qty <= 0) return;
+              distributed += qty;
+              items.push({
+                item_code: item.item_code,
+                item_name: item.item_name,
+                required_qty: qty,
+                earliest_due_date: dueDate,
+                lead_time: leadTime,
+              });
+            });
+          } else {
+            items.push({
+              item_code: item.item_code,
+              item_name: item.item_name,
+              required_qty: totalRequired,
+              earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+              lead_time: leadTime,
+            });
+          }
+        } else {
+          items.push({
+            item_code: item.item_code,
+            item_name: item.item_name,
+            required_qty: totalRequired,
+            earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+            lead_time: leadTime,
+          });
+        }
+      });
+
+    setGenerating(true);
+    try {
+      const res = await generateSchedule({
+        items,
+        options: {
+          safety_lead_time: 0,
+          recalculate_unstarted: recalculateUnstarted,
+          product_type: "완제품",
+        },
+      });
+      if (res.success) {
+        toast.success(`스케줄이 생성되었습니다 (${res.data.summary.total}건)`);
+        setChangeConfirmModalOpen(false);
+        setPreviewData(null);
+        fetchPlans();
+        fetchOrderSummary();
+      }
+    } catch (err: any) {
+      toast.error("스케줄 생성 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [selectedItemGroups, orderItems, recalculateUnstarted, fetchPlans, fetchOrderSummary]);
+
+  // 타임라인 초기화 (계획 상태만 삭제)
+  const handleClearTimeline = useCallback(async () => {
+    if (finishedPlans.length === 0) {
+      toast.info("삭제할 계획이 없습니다");
+      return;
+    }
+    const plannedIds = finishedPlans.filter((p) => p.status === "planned").map((p) => p.id);
+    if (plannedIds.length === 0) {
+      toast.info("삭제 가능한 계획이 없습니다 (계획 상태만 삭제 가능)");
+      return;
+    }
+    const ok = await confirm(`${plannedIds.length}건의 계획을 삭제하시겠습니까?`, {
+      description: "삭제된 계획은 복구할 수 없습니다.",
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+
+    try {
+      const results = await Promise.allSettled(plannedIds.map((id) => deletePlan(id)));
+      const failedIds = plannedIds.filter((_, i) => results[i].status === "rejected");
+      const succeededCount = plannedIds.length - failedIds.length;
+
+      if (failedIds.length === plannedIds.length) {
+        // 전부 삭제 실패
+        toast.error(`${failedIds.length}건 모두 삭제에 실패했습니다. 다시 시도해주세요.`);
+      } else if (failedIds.length > 0) {
+        // 일부 삭제 실패
+        toast.warning(
+          `${succeededCount}건 삭제 완료, ${failedIds.length}건 삭제 실패. 실패 항목을 다시 시도해주세요.`
+        );
+      } else {
+        // 전부 성공
+        toast.success(`${plannedIds.length}건의 계획이 삭제되었습니다`);
+      }
+      fetchPlans();
+    } catch (err: any) {
+      toast.error("삭제 실패: " + (err.message || ""));
+    }
+  }, [finishedPlans, fetchPlans, confirm]);
+
+  // 반제품 자동 생성
+  const handleGenerateSemiSchedule = useCallback(async () => {
+    const planIds = finishedPlans.map((p) => p.id);
+    if (planIds.length === 0) {
+      toast.error("완제품 생산계획이 없습니다");
+      return;
+    }
+    setGenerating(true);
+    try {
+      const res = await generateSemiSchedule(planIds, {
+        considerStock: semiConsiderStock,
+        excludeUsed: semiExcludeUsed,
+      });
+      if (res.success) {
+        toast.success(`반제품 계획 ${res.data.count}건이 생성되었습니다`);
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("반제품 계획 생성 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [finishedPlans, semiConsiderStock, semiExcludeUsed, fetchPlans]);
+
+  // 스케줄 상세 모달 열기
+  const openScheduleDetail = useCallback((event: TimelineEvent) => {
+    const plan = event.data as ProductionPlan;
+    if (!plan) return;
+    setSelectedPlan(plan);
+    setModalQuantity(Number(plan.plan_qty));
+    setModalStartDate(plan.start_date?.split("T")[0] || "");
+    setModalEndDate(plan.end_date?.split("T")[0] || "");
+    setModalManager((plan as any).manager_name || "");
+    setModalWorkOrderNo((plan as any).work_order_no || "");
+    setModalRemarks(plan.remarks || "");
+    setModalEquipmentId((plan as any).equipment_code || (plan.equipment_id ? String(plan.equipment_id) : ""));
+    setScheduleModalOpen(true);
+  }, []);
+
+  const handleSavePlan = useCallback(async () => {
+    if (!selectedPlan) return;
+    setSaving(true);
+    try {
+      const res = await updatePlan(selectedPlan.id, {
+        plan_qty: modalQuantity,
+        start_date: modalStartDate,
+        end_date: modalEndDate,
+        manager_name: modalManager,
+        work_order_no: modalWorkOrderNo,
+        remarks: modalRemarks,
+        equipment_id: modalEquipmentId ? Number(modalEquipmentId) : null,
+      } as any);
+      if (res.success) {
+        toast.success("생산계획이 수정되었습니다");
+        setScheduleModalOpen(false);
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("수정 실패: " + (err.message || ""));
+    } finally {
+      setSaving(false);
+    }
+  }, [selectedPlan, modalQuantity, modalStartDate, modalEndDate, modalManager, modalWorkOrderNo, modalRemarks, modalEquipmentId, fetchPlans]);
+
+  const handleDeletePlan = useCallback(async () => {
+    if (!selectedPlan) return;
+    const ok = await confirm("이 생산계획을 삭제하시겠습니까?", {
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await deletePlan(selectedPlan.id);
+      toast.success("삭제되었습니다");
+      setScheduleModalOpen(false);
+      fetchPlans();
+    } catch (err: any) {
+      toast.error("삭제 실패: " + (err.message || ""));
+    }
+  }, [selectedPlan, fetchPlans, confirm]);
+
+  const handleSplitSchedule = useCallback(async (splitQty: number) => {
+    if (!selectedPlan || splitQty <= 0) return;
+    try {
+      const res = await splitSchedule(selectedPlan.id, splitQty);
+      if (res.success) {
+        toast.success("계획이 분할되었습니다");
+        setScheduleModalOpen(false);
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("분할 실패: " + (err.message || ""));
+    }
+  }, [selectedPlan, fetchPlans]);
+
+  // 병합 핸들러
+  const handleMergeSchedules = useCallback(async () => {
+    if (selectedPlanIds.size < 2) {
+      toast.error("2개 이상의 계획을 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`${selectedPlanIds.size}건의 계획을 병합하시겠습니까?`, {
+      description: "동일 품목의 계획이 하나로 병합됩니다.",
+      confirmText: "병합",
+    });
+    if (!ok) return;
+
+    try {
+      const ids = Array.from(selectedPlanIds);
+      const productType = rightTab === "finished" ? "완제품" : "반제품";
+      const res = await mergeSchedules(ids, productType);
+      if (res.success) {
+        toast.success("계획이 병합되었습니다");
+        setSelectedPlanIds(new Set());
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("병합 실패: " + (err.message || ""));
+    }
+  }, [selectedPlanIds, rightTab, fetchPlans, confirm]);
+
+  // 타임라인 이벤트 드래그 이동
+  const handleEventMove = useCallback(async (eventId: string | number, newStart: string, newEnd: string) => {
+    try {
+      const res = await updatePlan(Number(eventId), {
+        start_date: newStart,
+        end_date: newEnd,
+      } as any);
+      if (res.success) {
+        toast.success("일정이 변경되었습니다");
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("일정 변경 실패: " + (err.message || ""));
+    }
+  }, [fetchPlans]);
+
+  // 타임라인 이벤트 리사이즈
+  const handleEventResize = useCallback(async (eventId: string | number, newStart: string, newEnd: string) => {
+    try {
+      const res = await updatePlan(Number(eventId), {
+        start_date: newStart,
+        end_date: newEnd,
+      } as any);
+      if (res.success) {
+        toast.success("기간이 변경되었습니다");
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("기간 변경 실패: " + (err.message || ""));
+    }
+  }, [fetchPlans]);
+
+  // 불러오기 처리
+  const handleImportOrderItems = useCallback(async () => {
+    if (selectedItemGroups.size === 0) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+    const items = orderItems
+      .filter((item) => selectedItemGroups.has(item.item_code))
+      .map((item) => ({
+        item_code: item.item_code,
+        item_name: item.item_name,
+        required_qty: (importMode !== "new" && recalculateUnstarted)
+          ? Number(item.total_balance_qty || 0) - Number(item.in_progress_qty || 0)
+          : Number(item.required_plan_qty),
+        earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+      }))
+      .filter((item) => item.required_qty > 0);
+
+    setGenerating(true);
+    try {
+      const res = await generateSchedule({
+        items,
+        options: {
+          safety_lead_time: 0,
+          recalculate_unstarted: importMode === "new" ? false : recalculateUnstarted,
+          product_type: "완제품",
+        },
+      });
+      if (res.success) {
+        toast.success("품목을 불러왔습니다");
+        setOrderImportModalOpen(false);
+        fetchPlans();
+        fetchOrderSummary();
+      }
+    } catch (err: any) {
+      toast.error("불러오기 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [selectedItemGroups, orderItems, importMode, recalculateUnstarted, fetchPlans, fetchOrderSummary]);
+
+  const handleImportStockItems = useCallback(async () => {
+    if (selectedStockItems.size === 0) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+    const items = stockItems
+      .filter((item) => selectedStockItems.has(item.item_code))
+      .map((item) => ({
+        item_code: item.item_code,
+        item_name: item.item_name,
+        required_qty: Number(item.recommended_qty),
+        earliest_due_date: new Date().toISOString().split("T")[0],
+      }));
+
+    setGenerating(true);
+    try {
+      const res = await generateSchedule({
+        items,
+        options: {
+          safety_lead_time: 0,
+          recalculate_unstarted: importMode === "new" ? false : true,
+          product_type: "완제품",
+        },
+      });
+      if (res.success) {
+        toast.success("안전재고 부족 품목을 불러왔습니다");
+        setStockImportModalOpen(false);
+        fetchPlans();
+        fetchStockShortage();
+      }
+    } catch (err: any) {
+      toast.error("불러오기 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [selectedStockItems, stockItems, importMode, fetchPlans, fetchStockShortage]);
+
+  // 엑셀 다운로드
+  const handleExcelDownload = useCallback(async () => {
+    const plans = rightTab === "finished" ? finishedPlans : semiPlans;
+    if (plans.length === 0) {
+      toast.error("다운로드할 데이터가 없습니다");
+      return;
+    }
+    const data = plans.map((p) => ({
+      계획번호: p.plan_no || "",
+      품목코드: p.item_code,
+      품목명: p.item_name,
+      제품구분: p.product_type,
+      수량: Number(p.plan_qty),
+      완료수량: Number(p.completed_qty),
+      진행률: `${p.progress_rate || 0}%`,
+      시작일: p.start_date?.split("T")[0] || "",
+      종료일: p.end_date?.split("T")[0] || "",
+      납기일: p.due_date?.split("T")[0] || "",
+      상태: STATUS_LABEL[p.status] || p.status,
+      설비: p.equipment_name || "",
+      비고: p.remarks || "",
+    }));
+    const type = rightTab === "finished" ? "완제품" : "반제품";
+    await exportToExcel(data, `생산계획_${type}.xlsx`, `${type} 생산계획`);
+    toast.success("엑셀 다운로드 완료");
+  }, [rightTab, finishedPlans, semiPlans]);
+
+  // 좌측 테이블 엑셀 다운로드
+  const handleLeftExcelDownload = useCallback(async () => {
+    if (leftTab === "order") {
+      if (orderItems.length === 0) { toast.error("데이터가 없습니다"); return; }
+      const data = orderItems.map((i) => ({
+        품목코드: i.item_code,
+        품목명: i.item_name,
+        총수주량: Number(i.total_order_qty),
+        출고량: Number(i.total_ship_qty),
+        잔량: Number(i.total_balance_qty),
+        현재고: Number(i.current_stock),
+        안전재고: Number(i.safety_stock),
+        기생산계획량: Number(i.existing_plan_qty),
+        생산진행: Number(i.in_progress_qty),
+        필요생산계획: Number(i.required_plan_qty),
+        "리드타임(일)": Number(i.lead_time) || 0,
+      }));
+      await exportToExcel(data, "수주데이터.xlsx", "수주데이터");
+    } else {
+      if (stockItems.length === 0) { toast.error("데이터가 없습니다"); return; }
+      const data = stockItems.map((s) => ({
+        품목코드: s.item_code,
+        품목명: s.item_name,
+        현재고: Number(s.current_qty),
+        안전재고: Number(s.safety_qty),
+        부족수량: Number(s.shortage_qty),
+        권장생산량: Number(s.recommended_qty),
+        최종입고일: s.last_in_date || "",
+      }));
+      await exportToExcel(data, "안전재고부족분.xlsx", "안전재고 부족분");
+    }
+    toast.success("엑셀 다운로드 완료");
+  }, [leftTab, orderItems, stockItems]);
+
+  // 숫자 포맷
+  const formatNumber = (num: number | string) => Number(num).toLocaleString();
+
+  // (컬럼 표시는 ts.visibleColumns 순서를 따름)
+
+  return (
+    <div className={cn("flex flex-col gap-3", isFullscreen ? "fixed inset-0 z-50 bg-background p-4" : "h-full p-3")}>
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>생산관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="font-medium text-foreground">생산계획</span>
+      </nav>
+
+      {/* 상단 바 */}
+      <DynamicSearchFilter
+        tableName="sales_order_mng"
+        filterId="c16-plan-management"
+        onFilterChange={handleSearchFilterChange}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" className="text-success border-success/30 hover:bg-success/10" onClick={() => setExcelUploadOpen(true)}>
+              <Upload className="mr-1.5 h-4 w-4" />
+              엑셀업로드
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+              <Download className="mr-1.5 h-4 w-4" />
+              엑셀다운로드
+            </Button>
+            <Button variant="ghost" size="sm" onClick={() => setIsFullscreen((p) => !p)}>
+              {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 데이터 섹션 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg">
+        {/* 왼쪽 패널 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <Tabs value={leftTab} onValueChange={setLeftTab} className="flex h-full flex-col">
+              <div className="shrink-0 border-b bg-muted/30 px-5">
+                <TabsList className="h-11 bg-transparent gap-1">
+                  <TabsTrigger value="order" className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 text-sm">
+                    <ClipboardList className="mr-1.5 h-4 w-4" />
+                    수주데이터
+                  </TabsTrigger>
+                  <TabsTrigger value="stock" className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 text-sm">
+                    <AlertTriangle className="mr-1.5 h-4 w-4" />
+                    안전재고 부족분
+                  </TabsTrigger>
+                </TabsList>
+              </div>
+
+              {/* 수주데이터 탭 */}
+              <TabsContent value="order" className="flex-1 overflow-hidden mt-0 flex flex-col">
+                <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
+                  <span className="text-base font-semibold">수주 목록</span>
+                  <div className="flex items-center gap-2">
+                    <label className="flex items-center gap-1.5 rounded-md border border-primary/20 bg-primary/5 px-3 py-1.5 text-xs cursor-pointer">
+                      <Checkbox
+                        checked={filterUnplannedOrdersOnly}
+                        onCheckedChange={(c) => {
+                          setFilterUnplannedOrdersOnly(!!c);
+                          setTimeout(fetchOrderSummary, 0);
+                        }}
+                        className="h-4 w-4"
+                      />
+                      <span className="font-medium text-foreground">계획에 없는 품목만</span>
+                    </label>
+                    <Button size="sm" variant="outline" className="text-success border-success/30 hover:bg-success/10" onClick={() => setOrderImportModalOpen(true)}>
+                      <Download className="mr-1 h-3.5 w-3.5" />
+                      불러오기
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={handleLeftExcelDownload}>
+                      <Download className="mr-1 h-3.5 w-3.5" />
+                      엑셀
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={fetchOrderSummary} disabled={loadingOrders}>
+                      {loadingOrders ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                      새로고침
+                    </Button>
+                    <Button size="sm" variant="ghost" onClick={() => ts.setOpen(true)}>
+                      <Settings2 className="h-3.5 w-3.5" />
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex-1 overflow-auto p-4">
+                  {loadingOrders ? (
+                    <div className="flex items-center justify-center py-16">
+                      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                    </div>
+                  ) : orderItems.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+                      <ClipboardList className="h-12 w-12 mb-3 opacity-50" />
+                      <p className="text-base font-medium mb-2">수주 데이터가 없습니다</p>
+                    </div>
+                  ) : (
+                    <div className="overflow-x-auto rounded-md border">
+                      {(() => {
+                        // 디테일 행에서 개별 값을 표시하는 컬럼 매핑
+                        const DETAIL_VALUE_MAP: Record<string, string> = {
+                          total_order_qty: "order_qty",
+                          total_ship_qty: "ship_qty",
+                          total_balance_qty: "balance_qty",
+                        };
+
+                        // 그룹 행에서 특수 렌더링이 필요한 컬럼
+                        const renderGroupCell = (col: { key: string }, item: any) => {
+                          if (col.key === "required_plan_qty") {
+                            return (
+                              <TableCell key={col.key} style={ts.thStyle(col.key)} className={cn("text-[13px] text-right font-bold", Number(item.required_plan_qty) > 0 ? "text-destructive" : "text-success")} onClick={() => toggleItemExpand(item.item_code)}>
+                                {formatNumber(item.required_plan_qty)}
+                              </TableCell>
+                            );
+                          }
+                          if (col.key === "lead_time") {
+                            return (
+                              <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
+                                {Number(item.lead_time) > 0 ? `${item.lead_time}일` : "-"}
+                              </TableCell>
+                            );
+                          }
+                          return (
+                            <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
+                              {formatNumber(item[col.key])}
+                            </TableCell>
+                          );
+                        };
+
+                        return (
+                      <Table style={{ tableLayout: "fixed" }}>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px]">
+                              <Checkbox checked={selectedItemGroups.size === orderItems.length && orderItems.length > 0} onCheckedChange={(c) => toggleAllItemGroups(!!c)} className="h-4 w-4" />
+                            </TableHead>
+                            <TableHead className="w-[40px]" />
+                            <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                            <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            {ts.visibleColumns.map((col) => (
+                              <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                                {col.label}
+                              </TableHead>
+                            ))}
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {ts.groupData(orderItems).map((item, rowIdx) => {
+                            if (item._isGroupSummary) {
+                              return (
+                                <TableRow key={`summary-${rowIdx}`} className="bg-muted/60 font-semibold border-t border-primary/20">
+                                  <TableCell />
+                                  <TableCell />
+                                  <TableCell colSpan={2} />
+                                  {ts.visibleColumns.map((col) => {
+                                    const v = (item as any)[col.key];
+                                    return (
+                                    <TableCell key={col.key} style={ts.thStyle(col.key)} className={typeof v === "number" ? "text-right font-mono text-[13px]" : "text-[13px] text-primary"}>
+                                      {typeof v === "number" ? Number(v).toLocaleString() : (v || "")}
+                                    </TableCell>
+                                    );
+                                  })}
+                                </TableRow>
+                              );
+                            }
+                            return (
+                            <React.Fragment key={item.item_code || rowIdx}>
+                              <TableRow className={cn("cursor-pointer border-t-2 border-t-primary/30 bg-primary/5 font-semibold hover:bg-primary/10", selectedItemGroups.has(item.item_code) && "bg-primary/10")}>
+                                <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+                                  <Checkbox checked={selectedItemGroups.has(item.item_code)} onCheckedChange={() => toggleItemGroupSelect(item.item_code)} className="h-4 w-4" />
+                                </TableCell>
+                                <TableCell className="text-center" onClick={() => toggleItemExpand(item.item_code)}>
+                                  <ChevronRight className={cn("h-4 w-4 transition-transform duration-200", expandedItems.has(item.item_code) && "rotate-90")} />
+                                </TableCell>
+                                <TableCell style={{ width: "140px", minWidth: "140px" }} className="text-[13px] text-primary truncate" onClick={() => toggleItemExpand(item.item_code)}>{item.item_code}</TableCell>
+                                <TableCell style={{ width: "140px", minWidth: "140px" }} className="text-[13px] text-primary truncate" onClick={() => toggleItemExpand(item.item_code)}>{item.item_name}</TableCell>
+                                {ts.visibleColumns.map((col) => renderGroupCell(col, item))}
+                              </TableRow>
+                              {expandedItems.has(item.item_code) && item.orders?.map((detail: any) => {
+                                let remainColSpan = 0;
+                                for (const col of ts.visibleColumns) {
+                                  if (!DETAIL_VALUE_MAP[col.key]) remainColSpan++;
+                                }
+                                return (
+                                <TableRow key={detail.id || detail.order_no} className="cursor-pointer hover:bg-muted/50">
+                                  <TableCell />
+                                  <TableCell />
+                                  <TableCell colSpan={2} className="pl-10">
+                                    <div className="flex items-center gap-2 text-xs">
+                                      <span className="text-muted-foreground">수주번호:</span>
+                                      <span className="font-medium">{detail.order_no}</span>
+                                      <span className="text-muted-foreground">거래처:</span>
+                                      <span>{detail.customer_name || "-"}</span>
+                                      <Badge variant="secondary" className="text-[10px] px-2 py-0">
+                                        {detail.status || "일반"}
+                                      </Badge>
+                                    </div>
+                                  </TableCell>
+                                  {ts.visibleColumns.map((col) => {
+                                    const detailKey = DETAIL_VALUE_MAP[col.key];
+                                    if (detailKey) {
+                                      return <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right">{formatNumber(detail[detailKey])}</TableCell>;
+                                    }
+                                    return null;
+                                  })}
+                                  {remainColSpan > 0 && (
+                                    <TableCell colSpan={remainColSpan} className="text-[13px] text-muted-foreground">
+                                      납기일: {detail.due_date || "-"}
+                                    </TableCell>
+                                  )}
+                                </TableRow>
+                                );
+                              })}
+                            </React.Fragment>
+                            );
+                          })}
+                        </TableBody>
+                      </Table>
+                        );
+                      })()}
+                    </div>
+                  )}
+                </div>
+              </TabsContent>
+
+              {/* 안전재고 부족분 탭 */}
+              <TabsContent value="stock" className="flex-1 overflow-hidden mt-0 flex flex-col">
+                <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
+                  <span className="text-base font-semibold">안전재고 부족 품목</span>
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" variant="outline" className="text-success border-success/30 hover:bg-success/10" onClick={() => setStockImportModalOpen(true)}>
+                      <Download className="mr-1 h-3.5 w-3.5" />
+                      불러오기
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={handleLeftExcelDownload}>
+                      <Download className="mr-1 h-3.5 w-3.5" />
+                      엑셀
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={fetchStockShortage} disabled={loadingStock}>
+                      {loadingStock ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                      새로고침
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex-1 overflow-auto p-4">
+                  {loadingStock ? (
+                    <div className="flex items-center justify-center py-16">
+                      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                    </div>
+                  ) : stockItems.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+                      <AlertTriangle className="h-12 w-12 mb-3 opacity-50" />
+                      <p className="text-base font-medium mb-2">안전재고 부족 품목이 없습니다</p>
+                    </div>
+                  ) : (
+                    <div className="overflow-x-auto rounded-md border">
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px]">
+                              <Checkbox checked={selectedStockItems.size === stockItems.length && stockItems.length > 0} onCheckedChange={(c) => toggleAllStockItems(!!c)} className="h-4 w-4" />
+                            </TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">현재고</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">안전재고</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부족수량</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">권장생산량</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최종입고일</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {stockItems.map((stock) => (
+                            <TableRow key={stock.item_code} className="cursor-pointer hover:bg-muted/50">
+                              <TableCell>
+                                <Checkbox checked={selectedStockItems.has(stock.item_code)} onCheckedChange={() => toggleStockItem(stock.item_code)} className="h-4 w-4" />
+                              </TableCell>
+                              <TableCell className="text-[13px]">{stock.item_code}</TableCell>
+                              <TableCell className="text-[13px]">{stock.item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right">{formatNumber(stock.current_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right">{formatNumber(stock.safety_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold text-destructive">{formatNumber(stock.shortage_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold text-success">{formatNumber(stock.recommended_qty)}</TableCell>
+                              <TableCell className="text-[13px]">{stock.last_in_date || "-"}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  )}
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 오른쪽 패널 — 타임라인 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <Tabs value={rightTab} onValueChange={setRightTab} className="flex h-full flex-col">
+              <div className="shrink-0 border-b bg-muted/30 px-5">
+                <TabsList className="h-11 bg-transparent gap-1">
+                  <TabsTrigger value="finished" className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 text-sm">
+                    <Package className="mr-1.5 h-4 w-4" />
+                    완제품 생산계획
+                  </TabsTrigger>
+                  <TabsTrigger value="semi" className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 text-sm">
+                    <Wrench className="mr-1.5 h-4 w-4" />
+                    반제품 생산계획
+                  </TabsTrigger>
+                </TabsList>
+              </div>
+
+              {/* 완제품 생산계획 */}
+              <TabsContent value="finished" className="flex-1 overflow-hidden mt-0 flex flex-col">
+                <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
+                  <span className="text-base font-semibold flex items-center gap-1.5">
+                    <Calendar className="h-4 w-4" />
+                    완제품 생산 타임라인
+                    <Badge variant="outline" className="ml-2">{finishedPlans.length}건</Badge>
+                  </span>
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" variant="outline" onClick={fetchPlans} disabled={loadingPlans}>
+                      {loadingPlans ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                      새로고침
+                    </Button>
+                    {selectedPlanIds.size >= 2 && (
+                      <Button size="sm" variant="outline" onClick={handleMergeSchedules}>
+                        <Merge className="mr-1 h-3.5 w-3.5" />
+                        병합 ({selectedPlanIds.size})
+                      </Button>
+                    )}
+                    <Button size="sm" onClick={handleGenerateSchedule} disabled={generating || selectedItemGroups.size === 0}>
+                      {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Zap className="mr-1 h-3.5 w-3.5" />}
+                      자동 스케줄 생성
+                    </Button>
+                    <Button size="sm" variant="ghost" className="text-destructive" onClick={handleClearTimeline}>
+                      <Trash2 className="mr-1 h-3.5 w-3.5" />
+                      초기화
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex-1 overflow-auto p-4">
+                  {/* 옵션 */}
+                  <div className="rounded-lg border bg-muted/30 p-3 mb-4">
+                    <div className="flex items-center gap-4 flex-wrap">
+                      <div className="flex items-center gap-1.5">
+                        <Checkbox checked={recalculateUnstarted} onCheckedChange={(c) => setRecalculateUnstarted(!!c)} className="h-4 w-4" />
+                        <Label className="text-xs cursor-pointer">미진행 계획 재계산</Label>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 타임라인 */}
+                  <TimelineScheduler
+                    resources={finishedResources}
+                    events={finishedEvents}
+                    zoomLevel={finishedZoom}
+                    onZoomChange={setFinishedZoom}
+                    statusColors={STATUS_COLORS}
+                    showProgress
+                    showMilestones
+                    showTodayLine
+                    showLegend
+                    conflictDetection
+                    loading={loadingPlans}
+                    emptyMessage="생산 스케줄이 없습니다"
+                    emptyIcon={<Package className="h-12 w-12 mb-3 opacity-50" />}
+                    onEventClick={openScheduleDetail}
+                    onEventMove={handleEventMove}
+                    onEventResize={handleEventResize}
+                  />
+                </div>
+              </TabsContent>
+
+              {/* 반제품 생산계획 */}
+              <TabsContent value="semi" className="flex-1 overflow-hidden mt-0 flex flex-col">
+                <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
+                  <span className="text-base font-semibold flex items-center gap-1.5">
+                    <Wrench className="h-4 w-4" />
+                    반제품 생산 타임라인
+                    <Badge variant="outline" className="ml-2">{semiPlans.length}건</Badge>
+                  </span>
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" variant="outline" onClick={fetchPlans} disabled={loadingPlans}>
+                      {loadingPlans ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                      새로고침
+                    </Button>
+                    <Button size="sm" onClick={handleGenerateSemiSchedule} disabled={generating}>
+                      {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Zap className="mr-1 h-3.5 w-3.5" />}
+                      반제품 계획 자동 생성
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex-1 overflow-auto p-4">
+                  <div className="flex gap-3 mb-4">
+                    <div className="flex-1 rounded-lg border border-primary/20 bg-primary/5 p-4">
+                      <p className="font-semibold text-foreground text-sm mb-3">반제품 계획 생성 옵션</p>
+                      <div className="flex flex-col gap-2">
+                        <label className="flex items-center gap-1.5 cursor-pointer text-xs">
+                          <Checkbox checked={semiConsiderStock} onCheckedChange={(c) => setSemiConsiderStock(!!c)} className="h-4 w-4" />
+                          <span className="font-medium">현재고 및 안전재고 감안</span>
+                        </label>
+                        <label className="flex items-center gap-1.5 cursor-pointer text-xs">
+                          <Checkbox checked={semiRecalculate} onCheckedChange={(c) => setSemiRecalculate(!!c)} className="h-4 w-4" />
+                          <span className="font-medium">진행중인 계획 유지하고 재계산</span>
+                        </label>
+                        <label className="flex items-center gap-1.5 cursor-pointer text-xs">
+                          <Checkbox checked={semiExcludeUsed} onCheckedChange={(c) => setSemiExcludeUsed(!!c)} className="h-4 w-4" />
+                          <span className="font-medium">투입 완료된 반제품 제외</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex-1 rounded-lg border border-warning/20 bg-warning/5 p-4">
+                      <p className="font-semibold text-foreground text-sm mb-2">반제품 계획 안내</p>
+                      <ul className="text-xs text-foreground space-y-1 leading-relaxed">
+                        <li>완제품 생산계획 기준으로 필요한 반제품 계획 자동 생성</li>
+                        <li>모품목 생산 시작일 고려하여 납기일 설정</li>
+                        <li>BOM(자재명세서) 정보 기반 필요 수량 계산</li>
+                      </ul>
+                    </div>
+                  </div>
+
+                  {/* 반제품 타임라인 */}
+                  <TimelineScheduler
+                    resources={semiResources}
+                    events={semiEvents}
+                    zoomLevel={semiZoom}
+                    onZoomChange={setSemiZoom}
+                    statusColors={STATUS_COLORS}
+                    showProgress
+                    showTodayLine
+                    showLegend
+                    conflictDetection
+                    loading={loadingPlans}
+                    emptyMessage="반제품 생산 스케줄이 없습니다"
+                    emptyIcon={<Wrench className="h-12 w-12 mb-3 opacity-50" />}
+                    onEventClick={openScheduleDetail}
+                    onEventMove={handleEventMove}
+                    onEventResize={handleEventResize}
+                  />
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 모달들 ========== */}
+
+      {/* 스케줄 상세/편집 모달 */}
+      <Dialog open={scheduleModalOpen} onOpenChange={setScheduleModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[650px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg flex items-center gap-2">
+              <ClipboardList className="h-5 w-5" />
+              생산 스케줄 상세
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              생산 스케줄의 상세 정보를 확인하고 수정할 수 있습니다
+            </DialogDescription>
+          </DialogHeader>
+
+          {selectedPlan && (
+            <div className="space-y-4">
+              <div>
+                <p className="text-sm font-semibold mb-3 pb-2 border-b">기본 정보</p>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs">품목코드</Label>
+                    <Input value={selectedPlan.item_code} readOnly className="h-9 text-xs bg-muted/50" />
+                  </div>
+                  <div>
+                    <Label className="text-xs">품목명</Label>
+                    <Input value={selectedPlan.item_name || ""} readOnly className="h-9 text-xs bg-muted/50" />
+                  </div>
+                  <div>
+                    <Label className="text-xs">계획번호</Label>
+                    <Input value={selectedPlan.plan_no || ""} readOnly className="h-9 text-xs bg-muted/50" />
+                  </div>
+                  <div>
+                    <Label className="text-xs">상태</Label>
+                    <Badge variant="secondary" className="mt-1">
+                      {STATUS_LABEL[selectedPlan.status] || selectedPlan.status}
+                    </Badge>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <p className="text-sm font-semibold mb-3 pb-2 border-b">생산 정보</p>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs">총 생산수량</Label>
+                    <Input type="number" value={modalQuantity} onChange={(e) => setModalQuantity(Number(e.target.value))} className="h-9 text-xs" min={0} />
+                  </div>
+                  <div>
+                    <Label className="text-xs">설비</Label>
+                    <Select value={modalEquipmentId} onValueChange={setModalEquipmentId}>
+                      <SelectTrigger className="h-9 text-xs">
+                        <SelectValue placeholder="설비 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">미지정</SelectItem>
+                        {equipmentList.map((eq) => (
+                          <SelectItem key={eq.id} value={eq.equipment_code || eq.id}>
+                            {eq.equipment_name} ({eq.equipment_code})
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <div className="mt-3 rounded-lg border border-success/20 bg-success/5 p-3">
+                  <p className="text-xs font-semibold text-foreground mb-2">계획 기간 설정</p>
+                  <div className="grid grid-cols-3 gap-3">
+                    <div>
+                      <Label className="text-[11px] text-muted-foreground">시작일</Label>
+                      <Input type="date" value={modalStartDate} onChange={(e) => setModalStartDate(e.target.value)} className="h-9 text-xs" />
+                    </div>
+                    <div>
+                      <Label className="text-[11px] text-muted-foreground">종료일</Label>
+                      <Input type="date" value={modalEndDate} onChange={(e) => setModalEndDate(e.target.value)} className="h-9 text-xs" />
+                    </div>
+                    <div>
+                      <Label className="text-[11px] text-muted-foreground">생산 기간</Label>
+                      <div className="flex h-9 items-center justify-center rounded-md border bg-muted/50 text-xs font-semibold text-primary">
+                        {modalStartDate && modalEndDate
+                          ? `${Math.ceil((new Date(modalEndDate).getTime() - new Date(modalStartDate).getTime()) / (1000 * 60 * 60 * 24) + 1)}일`
+                          : "-"}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="rounded-lg border border-warning/20 bg-warning/5 p-4">
+                <div className="flex items-center justify-between mb-2">
+                  <p className="text-sm font-semibold flex items-center gap-1.5">
+                    <Scissors className="h-4 w-4" />
+                    계획 분할
+                  </p>
+                  <Button
+                    size="sm"
+                    variant="warning"
+                    className="h-7 text-xs"
+                    onClick={() => {
+                      const qty = Math.floor(modalQuantity / 2);
+                      if (qty > 0) handleSplitSchedule(qty);
+                    }}
+                  >
+                    2분할
+                  </Button>
+                </div>
+                <p className="text-xs text-foreground">하나의 생산계획을 여러 개로 분할합니다.</p>
+              </div>
+
+              <div>
+                <p className="text-sm font-semibold mb-3 pb-2 border-b">추가 정보</p>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs">담당자</Label>
+                    <Input value={modalManager} onChange={(e) => setModalManager(e.target.value)} className="h-9 text-xs" placeholder="담당자명" />
+                  </div>
+                  <div>
+                    <Label className="text-xs">작업지시번호</Label>
+                    <Input value={modalWorkOrderNo} onChange={(e) => setModalWorkOrderNo(e.target.value)} className="h-9 text-xs" placeholder="자동생성" />
+                  </div>
+                  <div className="col-span-2">
+                    <Label className="text-xs">비고</Label>
+                    <Input value={modalRemarks} onChange={(e) => setModalRemarks(e.target.value)} className="h-9 text-xs" placeholder="비고사항 입력" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={handleDeletePlan} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10">
+              <Trash2 className="mr-1 h-3.5 w-3.5" />
+              삭제
+            </Button>
+            <Button variant="outline" onClick={() => setScheduleModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              취소
+            </Button>
+            <Button onClick={handleSavePlan} disabled={saving} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {saving ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Save className="mr-1 h-3.5 w-3.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 수주 불러오기 모달 */}
+      <Dialog open={orderImportModalOpen} onOpenChange={setOrderImportModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">신규 수주 품목 불러오기</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">선택한 수주 품목을 생산계획에 추가합니다</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
+                <ClipboardList className="h-4 w-4" />
+                선택된 품목
+              </p>
+              <div className="space-y-2 max-h-[200px] overflow-y-auto">
+                {selectedItemGroups.size > 0
+                  ? Array.from(selectedItemGroups).map((code) => {
+                      const item = orderItems.find((i) => i.item_code === code);
+                      if (!item) return null;
+                      const hasExistingPlan = Number(item.existing_plan_qty) > 0;
+                      return (
+                        <div key={code} className="rounded-lg border bg-muted/30 p-3">
+                          <div className="flex items-center justify-between mb-1">
+                            <span className="text-sm font-semibold">{item.item_code} - {item.item_name}</span>
+                            {hasExistingPlan && <Badge variant="secondary" className="text-[10px]">가계획완료</Badge>}
+                          </div>
+                          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                            <span>수주: {item.order_count}건</span>
+                            <span className="text-border">|</span>
+                            <span>잔량: {formatNumber(item.total_balance_qty)} EA</span>
+                            <span className="text-border">|</span>
+                            <span>재고: {formatNumber(item.current_stock)} EA</span>
+                            <span className="text-border">|</span>
+                            <span>필요수량: <span className={Number(item.required_plan_qty) > 0 ? "text-destructive font-semibold" : ""}>{formatNumber(item.required_plan_qty)} EA</span></span>
+                          </div>
+                        </div>
+                      );
+                    })
+                  : <p className="text-xs text-muted-foreground p-3 text-center">선택된 품목이 없습니다.</p>}
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-warning/20 bg-warning/5 p-3">
+              <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
+                <AlertTriangle className="h-4 w-4 text-warning" />
+                주의사항
+              </p>
+              <ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside leading-relaxed">
+                <li>기존 계획에 추가 시 새로운 수주의 납기를 기준으로 종료일이 조정됩니다.</li>
+                <li>기존 계획이 없으면 새 계획이 자동 생성됩니다.</li>
+                <li>수주정보(수주번호)가 있으면 관련 정보가 연결됩니다.</li>
+                <li>수량이 0이거나 음수인 품목은 건너뜁니다.</li>
+              </ul>
+            </div>
+
+            <div>
+              <p className="font-semibold text-sm mb-2">계획 추가 방식을 선택하세요</p>
+              <div className="grid gap-3">
+                <label className={cn("flex items-center rounded-lg border-2 p-4 cursor-pointer transition-all", importMode === "add" ? "border-primary bg-primary/5" : "border-border hover:border-primary/50")} onClick={() => setImportMode("add")}>
+                  <input type="radio" name="importMode" value="add" checked={importMode === "add"} onChange={() => setImportMode("add")} className="mr-3 h-4 w-4" />
+                  <div>
+                    <p className="font-semibold text-sm">+ 기존 계획에 추가</p>
+                    <p className="text-xs text-muted-foreground">같은 품목의 기존 계획에 수주 건만을 추가하거나 수량을 합산합니다.</p>
+                  </div>
+                </label>
+                <label className={cn("flex items-center rounded-lg border-2 p-4 cursor-pointer transition-all", importMode === "new" ? "border-primary bg-primary/5" : "border-border hover:border-primary/50")} onClick={() => setImportMode("new")}>
+                  <input type="radio" name="importMode" value="new" checked={importMode === "new"} onChange={() => setImportMode("new")} className="mr-3 h-4 w-4" />
+                  <div>
+                    <p className="font-semibold text-sm">별도 계획으로 생성</p>
+                    <p className="text-xs text-muted-foreground">이전 수량/일정 무시하고 생산계획을 생성합니다.</p>
+                  </div>
+                </label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setOrderImportModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
+            <Button onClick={handleImportOrderItems} disabled={generating || selectedItemGroups.size === 0} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Download className="mr-1 h-3.5 w-3.5" />}
+              불러오기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 안전재고 불러오기 모달 */}
+      <Dialog open={stockImportModalOpen} onOpenChange={setStockImportModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">안전재고 부족 품목 불러오기</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">선택한 안전재고 부족 품목을 생산계획에 추가합니다</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
+                <AlertTriangle className="h-4 w-4" />
+                선택된 품목
+              </p>
+              <div className="space-y-2 max-h-[200px] overflow-y-auto">
+                {selectedStockItems.size > 0
+                  ? Array.from(selectedStockItems).map((code) => {
+                      const stock = stockItems.find((s) => s.item_code === code);
+                      if (!stock) return null;
+                      return (
+                        <div key={code} className="rounded-lg border bg-muted/30 p-3">
+                          <div className="flex items-center justify-between mb-1">
+                            <span className="text-sm font-semibold">{stock.item_code} - {stock.item_name}</span>
+                            <Badge variant="destructive" className="text-[10px]">재고부족</Badge>
+                          </div>
+                          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                            <span>현재고: {formatNumber(stock.current_qty)} EA</span>
+                            <span className="text-border">|</span>
+                            <span>안전재고: {formatNumber(stock.safety_qty)} EA</span>
+                            <span className="text-border">|</span>
+                            <span>권장생산: <span className="text-destructive font-semibold">{formatNumber(stock.recommended_qty)} EA</span></span>
+                          </div>
+                        </div>
+                      );
+                    })
+                  : <p className="text-xs text-muted-foreground p-3 text-center">선택된 품목이 없습니다.</p>}
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-warning/20 bg-warning/5 p-3">
+              <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
+                <AlertTriangle className="h-4 w-4 text-warning" />
+                주의사항
+              </p>
+              <ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside leading-relaxed">
+                <li>안전재고 기준으로 부족분만큼 생산계획을 생성합니다.</li>
+                <li>현재 재고와 안전재고 차이를 기반으로 수량이 산정됩니다.</li>
+                <li>기존 계획이 있는 품목은 추가 방식에 따라 합산 또는 별도 생성됩니다.</li>
+              </ul>
+            </div>
+
+            <div>
+              <p className="font-semibold text-sm mb-2">계획 추가 방식을 선택하세요</p>
+              <div className="grid gap-3">
+                <label className={cn("flex items-center rounded-lg border-2 p-4 cursor-pointer transition-all", importMode === "add" ? "border-primary bg-primary/5" : "border-border hover:border-primary/50")} onClick={() => setImportMode("add")}>
+                  <input type="radio" name="stockImportMode" value="add" checked={importMode === "add"} onChange={() => setImportMode("add")} className="mr-3 h-4 w-4" />
+                  <div>
+                    <p className="font-semibold text-sm">+ 기존 계획에 추가</p>
+                    <p className="text-xs text-muted-foreground">같은 품목의 기존 계획에 수량을 합산합니다.</p>
+                  </div>
+                </label>
+                <label className={cn("flex items-center rounded-lg border-2 p-4 cursor-pointer transition-all", importMode === "new" ? "border-primary bg-primary/5" : "border-border hover:border-primary/50")} onClick={() => setImportMode("new")}>
+                  <input type="radio" name="stockImportMode" value="new" checked={importMode === "new"} onChange={() => setImportMode("new")} className="mr-3 h-4 w-4" />
+                  <div>
+                    <p className="font-semibold text-sm">별도 계획으로 생성</p>
+                    <p className="text-xs text-muted-foreground">이전 수량/일정 무시하고 생산계획을 생성합니다.</p>
+                  </div>
+                </label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setStockImportModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
+            <Button onClick={handleImportStockItems} disabled={generating || selectedStockItems.size === 0} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Download className="mr-1 h-3.5 w-3.5" />}
+              불러오기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 변경사항 확인(미리보기) 모달 */}
+      <Dialog open={changeConfirmModalOpen} onOpenChange={setChangeConfirmModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[800px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">생산계획 변경사항 확인</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">아래 변경사항을 검토하신 후 확인 버튼을 클릭하면 생산계획이 업데이트됩니다</DialogDescription>
+          </DialogHeader>
+
+          {previewData && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-4 gap-3">
+                <div className="rounded-lg border bg-primary/10 p-3 text-center">
+                  <p className="text-2xl font-bold text-foreground">{previewData.summary?.total ?? 0}</p>
+                  <p className="text-xs text-muted-foreground mt-1">총 계획</p>
+                </div>
+                <div className="rounded-lg border bg-success/10 p-3 text-center">
+                  <p className="text-2xl font-bold text-foreground">{previewData.summary?.new_count ?? 0}</p>
+                  <p className="text-xs text-muted-foreground mt-1">신규 생성</p>
+                </div>
+                <div className="rounded-lg border bg-warning/10 p-3 text-center">
+                  <p className="text-2xl font-bold text-foreground">{previewData.summary?.kept_count ?? 0}</p>
+                  <p className="text-xs text-muted-foreground mt-1">유지됨</p>
+                </div>
+                <div className="rounded-lg border bg-destructive/10 p-3 text-center">
+                  <p className="text-2xl font-bold text-foreground">{previewData.summary?.deleted_count ?? 0}</p>
+                  <p className="text-xs text-muted-foreground mt-1">삭제됨</p>
+                </div>
+              </div>
+
+              {(previewData.schedules?.length || 0) > 0 && (
+                <div>
+                  <p className="text-sm font-semibold mb-2 text-success flex items-center gap-1.5">
+                    <Zap className="h-4 w-4" />
+                    신규 생성 ({previewData.schedules?.length || 0}건)
+                  </p>
+                  <div className="rounded-md border border-success/20 overflow-x-auto">
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">시작일</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">종료일</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {(previewData.schedules || []).map((s: any, idx: number) => (
+                          <TableRow key={`new-${idx}`}>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty || s.required_qty)}</TableCell>
+                            <TableCell className="text-[13px]">{s.start_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.end_date?.split("T")[0]}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+              )}
+
+              {(previewData.deletedSchedules?.length || 0) > 0 && (
+                <div>
+                  <p className="text-sm font-semibold mb-2 text-destructive flex items-center gap-1.5">
+                    <Trash2 className="h-4 w-4" />
+                    삭제 예정 ({previewData.deletedSchedules?.length || 0}건)
+                  </p>
+                  <div className="rounded-md border border-destructive/20 overflow-x-auto">
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">시작일</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">종료일</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {(previewData.deletedSchedules || []).map((s: any, idx: number) => (
+                          <TableRow key={`del-${idx}`} className="text-destructive/80">
+                            <TableCell className="text-[13px]">{s.plan_no || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty)}</TableCell>
+                            <TableCell className="text-[13px]">{s.start_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.end_date?.split("T")[0]}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+              )}
+
+              {(previewData.keptSchedules?.length || 0) > 0 && (
+                <div>
+                  <p className="text-sm font-semibold mb-2 text-warning flex items-center gap-1.5">
+                    <Package className="h-4 w-4" />
+                    유지됨 ({previewData.keptSchedules?.length || 0}건)
+                  </p>
+                  <div className="rounded-md border border-warning/20 overflow-x-auto">
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {(previewData.keptSchedules || []).map((s: any, idx: number) => (
+                          <TableRow key={`kept-${idx}`}>
+                            <TableCell className="text-[13px]">{s.plan_no || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty)}</TableCell>
+                            <TableCell className="text-[13px]">
+                              <Badge variant="outline" className="text-[10px]">{STATUS_LABEL[s.status] || s.status}</Badge>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setChangeConfirmModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
+            <Button onClick={handleApplySchedule} disabled={generating} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : null}
+              확인 및 적용
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 모달 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName="production_plan_mng"
+        onSuccess={() => {
+          fetchPlans();
+          fetchOrderSummary();
+        }}
+      />
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* ConfirmDialog 렌더 */}
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/production/process-info/ItemRoutingTab.tsx b/frontend/app/(main)/COMPANY_8/production/process-info/ItemRoutingTab.tsx
new file mode 100644
index 00000000..a5b136c2
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/production/process-info/ItemRoutingTab.tsx
@@ -0,0 +1,994 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { GitBranch, Loader2, PackagePlus, Pencil, Plus, Save, Search, Star, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  createRoutingVersion,
+  getProcessList,
+  getRegisteredItems,
+  getRoutingDetails,
+  getRoutingVersions,
+  registerItemsBatch,
+  saveRoutingDetails,
+  searchAllItems,
+  unregisterItem,
+  type ItemForRouting,
+  type ProcessMaster,
+  type RegisteredItem,
+  type RoutingDetail,
+  type RoutingVersion,
+} from "@/lib/api/processInfo";
+import { cn } from "@/lib/utils";
+
+function normalizeDefaultFlag(v: RoutingVersion): boolean {
+  const raw = v.is_default as unknown;
+  if (typeof raw === "boolean") return raw;
+  if (raw === "t" || raw === true || raw === "Y" || raw === "true") return true;
+  return false;
+}
+
+function sortDetailsBySeq(rows: RoutingDetail[]): RoutingDetail[] {
+  return [...rows].sort((a, b) => {
+    const na = parseInt(String(a.seq_no), 10) || 0;
+    const nb = parseInt(String(b.seq_no), 10) || 0;
+    return na - nb;
+  });
+}
+
+export function ItemRoutingTab() {
+  const [searchInput, setSearchInput] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [items, setItems] = useState<RegisteredItem[]>([]);
+  const [itemsLoading, setItemsLoading] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<RegisteredItem | null>(null);
+
+  const [versions, setVersions] = useState<RoutingVersion[]>([]);
+  const [versionsLoading, setVersionsLoading] = useState(false);
+  const [selectedVersionId, setSelectedVersionId] = useState<string | null>(null);
+
+  const [details, setDetails] = useState<RoutingDetail[]>([]);
+  const [detailsLoading, setDetailsLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const [selectedDetailIds, setSelectedDetailIds] = useState<Set<string>>(new Set());
+
+  const [processes, setProcesses] = useState<ProcessMaster[]>([]);
+  const [processesLoading, setProcessesLoading] = useState(false);
+
+  const [versionDialogOpen, setVersionDialogOpen] = useState(false);
+  const [versionName, setVersionName] = useState("");
+  const [versionDescription, setVersionDescription] = useState("");
+  const [versionIsDefault, setVersionIsDefault] = useState(false);
+  const [versionSubmitting, setVersionSubmitting] = useState(false);
+
+  const [detailDialogOpen, setDetailDialogOpen] = useState(false);
+  const [detailDialogMode, setDetailDialogMode] = useState<"add" | "edit">("add");
+  const [editingDetailId, setEditingDetailId] = useState<string | null>(null);
+  const [formProcessCode, setFormProcessCode] = useState("");
+  const [formSeqNo, setFormSeqNo] = useState("");
+  const [formRequired, setFormRequired] = useState("Y");
+  const [formFixedOrder, setFormFixedOrder] = useState("Y");
+  const [formWorkType, setFormWorkType] = useState("내부");
+  const [formStandardTime, setFormStandardTime] = useState("");
+  const [formOutsource, setFormOutsource] = useState("");
+  const [detailSubmitting, setDetailSubmitting] = useState(false);
+
+  const [registerDialogOpen, setRegisterDialogOpen] = useState(false);
+  const [registerSearch, setRegisterSearch] = useState("");
+  const [registerSearchDebounced, setRegisterSearchDebounced] = useState("");
+  const [registerItems, setRegisterItems] = useState<ItemForRouting[]>([]);
+  const [registerLoading, setRegisterLoading] = useState(false);
+  const [registerSelectedIds, setRegisterSelectedIds] = useState<Set<string>>(new Set());
+  const [registerSubmitting, setRegisterSubmitting] = useState(false);
+
+  useEffect(() => {
+    const t = window.setTimeout(() => setDebouncedSearch(searchInput.trim()), 300);
+    return () => window.clearTimeout(t);
+  }, [searchInput]);
+
+  useEffect(() => {
+    const t = window.setTimeout(() => setRegisterSearchDebounced(registerSearch.trim()), 300);
+    return () => window.clearTimeout(t);
+  }, [registerSearch]);
+
+  const loadItems = useCallback(async (search: string) => {
+    setItemsLoading(true);
+    try {
+      const res = await getRegisteredItems(search || undefined);
+      if (res.success && res.data) {
+        setItems(res.data);
+      } else {
+        toast.error(res.message || "품목 목록을 불러오지 못했어요");
+        setItems([]);
+      }
+    } finally {
+      setItemsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadItems(debouncedSearch);
+  }, [debouncedSearch, loadItems]);
+
+  const loadProcesses = useCallback(async () => {
+    setProcessesLoading(true);
+    try {
+      const procRes = await getProcessList({ useYn: "Y" });
+      if (!procRes.success || !procRes.data) {
+        toast.error(procRes.message || "공정 목록을 불러오지 못했어요");
+        setProcesses([]);
+        return;
+      }
+      setProcesses(procRes.data);
+    } finally {
+      setProcessesLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadProcesses();
+  }, [loadProcesses]);
+
+  const loadRegisterItems = useCallback(async (search: string) => {
+    setRegisterLoading(true);
+    try {
+      const res = await searchAllItems(search || undefined);
+      if (res.success && res.data) {
+        setRegisterItems(res.data);
+      } else {
+        setRegisterItems([]);
+      }
+    } finally {
+      setRegisterLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!registerDialogOpen) return;
+    void loadRegisterItems(registerSearchDebounced);
+  }, [registerSearchDebounced, registerDialogOpen, loadRegisterItems]);
+
+  const registeredItemCodes = useMemo(() => new Set(items.map((i) => i.item_code)), [items]);
+
+  const handleRegisterItems = async () => {
+    if (registerSelectedIds.size === 0) {
+      toast.error("등록할 품목을 선택해주세요");
+      return;
+    }
+    setRegisterSubmitting(true);
+    try {
+      const selected = registerItems.filter((ri) => registerSelectedIds.has(ri.id));
+      const batchItems = selected.map((item) => ({
+        itemId: item.id,
+        itemCode: item.item_number,
+      }));
+      const res = await registerItemsBatch(batchItems);
+      if (res.success) {
+        toast.success(`${batchItems.length}건 품목이 등록되었어요`);
+        setRegisterDialogOpen(false);
+        setRegisterSearch("");
+        setRegisterSelectedIds(new Set());
+        void loadItems(debouncedSearch);
+      } else {
+        toast.error(res.message || "품목 등록에 실패했어요");
+      }
+    } finally {
+      setRegisterSubmitting(false);
+    }
+  };
+
+  const loadVersions = useCallback(async (item: RegisteredItem, preferVersionId?: string) => {
+    setVersionsLoading(true);
+    setVersions([]);
+    setSelectedVersionId(null);
+    setDetails([]);
+    setSelectedDetailIds(new Set());
+    try {
+      const res = await getRoutingVersions(item.item_code);
+      if (!res.success || !res.data) {
+        toast.error(res.message || "라우팅 버전을 불러오지 못했어요");
+        return;
+      }
+      const list = res.data.map((v) => ({ ...v, is_default: normalizeDefaultFlag(v) }));
+      setVersions(list);
+      const preferred = preferVersionId ? list.find((v) => v.id === preferVersionId) : undefined;
+      const def = list.find((v) => v.is_default);
+      const pick = preferred ?? def ?? list[0];
+      if (pick) setSelectedVersionId(pick.id);
+    } finally {
+      setVersionsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!selectedItem) return;
+    void loadVersions(selectedItem);
+  }, [selectedItem, loadVersions]);
+
+  const loadDetails = useCallback(async (versionId: string) => {
+    setDetailsLoading(true);
+    setSelectedDetailIds(new Set());
+    try {
+      const res = await getRoutingDetails(versionId);
+      if (res.success && res.data) {
+        setDetails(sortDetailsBySeq(res.data));
+      } else {
+        toast.error(res.message || "라우팅 공정을 불러오지 못했어요");
+        setDetails([]);
+      }
+    } finally {
+      setDetailsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!selectedVersionId) {
+      setDetails([]);
+      return;
+    }
+    void loadDetails(selectedVersionId);
+  }, [selectedVersionId, loadDetails]);
+
+  const showOutsourceField = formWorkType === "외주" || formWorkType === "선택가능";
+
+  const openAddDetailDialog = () => {
+    if (!selectedVersionId) {
+      toast.error("먼저 라우팅 버전을 선택해주세요");
+      return;
+    }
+    setDetailDialogMode("add");
+    setEditingDetailId(null);
+    setFormProcessCode("");
+    const nextSeq = details.length === 0 ? 1 : Math.max(...details.map((d) => parseInt(String(d.seq_no), 10) || 0)) + 1;
+    setFormSeqNo(String(nextSeq));
+    setFormRequired("Y");
+    setFormFixedOrder("Y");
+    setFormWorkType("내부");
+    setFormStandardTime("");
+    setFormOutsource("");
+    setDetailDialogOpen(true);
+  };
+
+  const openEditDetailDialog = () => {
+    if (!selectedVersionId) {
+      toast.error("먼저 라우팅 버전을 선택해주세요");
+      return;
+    }
+    if (selectedDetailIds.size !== 1) {
+      toast.error("수정할 공정 한 건만 선택해주세요");
+      return;
+    }
+    const id = [...selectedDetailIds][0];
+    const row = details.find((d) => d.id === id);
+    if (!row) {
+      toast.error("선택한 공정을 찾을 수 없어요");
+      return;
+    }
+    setDetailDialogMode("edit");
+    setEditingDetailId(row.id);
+    setFormProcessCode(row.process_code);
+    setFormSeqNo(String(row.seq_no));
+    setFormRequired(row.is_required === "N" ? "N" : "Y");
+    setFormFixedOrder(row.is_fixed_order === "N" ? "N" : "Y");
+    setFormWorkType(row.work_type || "내부");
+    setFormStandardTime(row.standard_time || "");
+    setFormOutsource(row.outsource_supplier || "");
+    setDetailDialogOpen(true);
+  };
+
+  const submitDetailForm = () => {
+    if (!selectedVersionId) return;
+    if (!formProcessCode) {
+      toast.error("공정을 선택해주세요");
+      return;
+    }
+    const seq = parseInt(formSeqNo, 10);
+    if (Number.isNaN(seq) || seq < 1) {
+      toast.error("올바른 순번을 입력해주세요");
+      return;
+    }
+    const st = formStandardTime.trim();
+    if (st !== "" && Number.isNaN(Number(st))) {
+      toast.error("표준작업시간은 숫자로 입력해주세요");
+      return;
+    }
+    const proc = processes.find((p) => p.process_code === formProcessCode);
+    const outsource = showOutsourceField ? formOutsource.trim() : "";
+
+    setDetailSubmitting(true);
+    try {
+      if (detailDialogMode === "add") {
+        const newRow: RoutingDetail = {
+          id: `new-${crypto.randomUUID()}`,
+          routing_version_id: selectedVersionId,
+          seq_no: String(seq),
+          process_code: formProcessCode,
+          process_name: proc?.process_name,
+          is_required: formRequired,
+          is_fixed_order: formFixedOrder,
+          work_type: formWorkType,
+          standard_time: st || "0",
+          outsource_supplier: outsource,
+        };
+        setDetails((prev) => sortDetailsBySeq([...prev, newRow]));
+        toast.success("공정이 추가되었어요. 저장을 눌러 반영해주세요");
+      } else if (editingDetailId) {
+        setDetails((prev) =>
+          sortDetailsBySeq(
+            prev.map((d) =>
+              d.id === editingDetailId
+                ? {
+                    ...d,
+                    seq_no: String(seq),
+                    process_code: formProcessCode,
+                    process_name: proc?.process_name ?? d.process_name,
+                    is_required: formRequired,
+                    is_fixed_order: formFixedOrder,
+                    work_type: formWorkType,
+                    standard_time: st || "0",
+                    outsource_supplier: outsource,
+                  }
+                : d,
+            ),
+          ),
+        );
+        toast.success("공정이 수정되었어요. 저장을 눌러 반영해주세요");
+      }
+      setDetailDialogOpen(false);
+    } finally {
+      setDetailSubmitting(false);
+    }
+  };
+
+  const deleteSelectedDetails = () => {
+    if (selectedDetailIds.size === 0) {
+      toast.error("삭제할 공정을 선택해주세요");
+      return;
+    }
+    setDetails((prev) => prev.filter((d) => !selectedDetailIds.has(d.id)));
+    setSelectedDetailIds(new Set());
+    toast.success("선택한 공정이 제거되었어요. 저장을 눌러 반영해주세요");
+  };
+
+  const persistDetails = async () => {
+    if (!selectedVersionId) {
+      toast.error("저장할 버전이 없어요");
+      return;
+    }
+    const payload = details.map((d) => ({
+      seq_no: String(d.seq_no),
+      process_code: d.process_code,
+      is_required: d.is_required || "Y",
+      is_fixed_order: d.is_fixed_order || "Y",
+      work_type: d.work_type || "내부",
+      standard_time: String(d.standard_time ?? "0"),
+      outsource_supplier: d.outsource_supplier || "",
+    }));
+
+    setSaving(true);
+    try {
+      const res = await saveRoutingDetails(selectedVersionId, payload);
+      if (res.success) {
+        toast.success("저장되었어요");
+        await loadDetails(selectedVersionId);
+      } else {
+        toast.error(res.message || "저장에 실패했어요");
+      }
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const submitNewVersion = async () => {
+    if (!selectedItem) return;
+    const name = versionName.trim();
+    if (!name) {
+      toast.error("버전명을 입력해주세요");
+      return;
+    }
+    setVersionSubmitting(true);
+    try {
+      const res = await createRoutingVersion({
+        item_code: selectedItem.item_code,
+        version_name: name,
+        description: versionDescription.trim() || undefined,
+        is_default: versionIsDefault || undefined,
+      });
+      if (res.success && res.data) {
+        toast.success("버전이 추가되었어요");
+        setVersionDialogOpen(false);
+        setVersionName("");
+        setVersionDescription("");
+        setVersionIsDefault(false);
+        const created = res.data as RoutingVersion;
+        await loadVersions(selectedItem, created?.id);
+      } else {
+        toast.error(res.message || "버전 추가에 실패했어요");
+      }
+    } finally {
+      setVersionSubmitting(false);
+    }
+  };
+
+  const detailsGridData = useMemo(
+    () =>
+      details.map((d) => ({
+        ...d,
+        process_display: d.process_name || d.process_code,
+        outsource_display: d.outsource_supplier || "—",
+      })),
+    [details],
+  );
+
+  return (
+    <div className="flex h-full flex-col">
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+        {/* 좌측: 등록 품목 */}
+        <ResizablePanel defaultSize={30} minSize={18}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <PackagePlus className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">등록 품목</span>
+              <Badge variant="secondary" className="font-mono text-xs">
+                {items.length}건
+              </Badge>
+              <div className="ml-auto">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setRegisterSearch("");
+                    setRegisterSelectedIds(new Set());
+                    setRegisterItems([]);
+                    setRegisterDialogOpen(true);
+                  }}
+                >
+                  <Plus className="mr-1 h-3.5 w-3.5" />
+                  품목 등록
+                </Button>
+              </div>
+            </div>
+
+            <div className="border-b px-3 py-2">
+              <div className="relative">
+                <Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  value={searchInput}
+                  onChange={(e) => setSearchInput(e.target.value)}
+                  placeholder="품목코드 / 품목명 검색"
+                  className="h-8 pl-8 text-xs"
+                  aria-label="품목 검색"
+                />
+              </div>
+            </div>
+
+            <div className="min-h-0 flex-1 overflow-auto p-3">
+              {itemsLoading ? (
+                <div className="flex items-center justify-center gap-2 py-12 text-muted-foreground">
+                  <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                  <span className="text-sm">불러오는 중...</span>
+                </div>
+              ) : items.length === 0 ? (
+                <div className="flex flex-col items-center justify-center gap-3 py-12">
+                  <p className="text-sm text-muted-foreground">등록된 품목이 없어요</p>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      setRegisterSearch("");
+                      setRegisterSelectedIds(new Set());
+                      setRegisterItems([]);
+                      setRegisterDialogOpen(true);
+                    }}
+                  >
+                    <PackagePlus className="mr-1 h-3.5 w-3.5" />
+                    품목 등록하기
+                  </Button>
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {items.map((item) => {
+                    const active = selectedItem?.id === item.id;
+                    return (
+                      <button
+                        key={item.id}
+                        type="button"
+                        onClick={() => setSelectedItem(item)}
+                        className={cn(
+                          "w-full rounded-lg border p-3 text-left transition-colors",
+                          "border-border bg-card hover:bg-muted/30",
+                          active && "border-primary ring-2 ring-ring/30",
+                        )}
+                      >
+                        <p className="text-sm font-medium text-foreground">{item.item_code}</p>
+                        <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">{item.item_name}</p>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 버전 + 라우팅 상세 */}
+        <ResizablePanel defaultSize={70} minSize={35}>
+          <div className="flex h-full flex-col">
+            {!selectedItem ? (
+              <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+                <GitBranch className="h-10 w-10 opacity-40" />
+                <p className="text-sm font-medium text-foreground">좌측에서 품목을 선택해주세요</p>
+                <p className="max-w-xs text-xs">품목을 선택하면 라우팅 버전과 공정을 관리할 수 있어요</p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center gap-3 border-b bg-muted/30 px-4 py-2">
+                  <GitBranch className="h-4 w-4 shrink-0 text-muted-foreground" />
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-semibold">{selectedItem.item_name}</p>
+                    <p className="text-xs text-muted-foreground">품목코드 {selectedItem.item_code}</p>
+                  </div>
+                  <div className="flex shrink-0 gap-2">
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={async () => {
+                        if (!selectedItem.registered_id) return;
+                        const res = await unregisterItem(selectedItem.registered_id);
+                        if (res.success) {
+                          toast.success("품목 등록이 해제되었어요");
+                          setSelectedItem(null);
+                          void loadItems(debouncedSearch);
+                        } else {
+                          toast.error(res.message || "등록 해제에 실패했어요");
+                        }
+                      }}
+                    >
+                      <Trash2 className="mr-1 h-3.5 w-3.5" />
+                      등록 해제
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={() => {
+                        setVersionName("");
+                        setVersionDescription("");
+                        setVersionIsDefault(false);
+                        setVersionDialogOpen(true);
+                      }}
+                    >
+                      <Plus className="mr-1 h-3.5 w-3.5" />
+                      버전 추가
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 버전 pills */}
+                <div className="border-b bg-muted/30 px-4 py-2">
+                  {versionsLoading ? (
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Loader2 className="h-4 w-4 animate-spin text-primary" />
+                      버전 불러오는 중...
+                    </div>
+                  ) : versions.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">
+                      등록된 버전이 없어요. 버전을 추가해주세요.
+                    </p>
+                  ) : (
+                    <div className="flex flex-wrap items-center gap-2">
+                      {versions.map((v) => {
+                        const selected = v.id === selectedVersionId;
+                        const def = normalizeDefaultFlag(v);
+                        return (
+                          <button
+                            key={v.id}
+                            type="button"
+                            onClick={() => setSelectedVersionId(v.id)}
+                            className={cn(
+                              "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors",
+                              selected
+                                ? "border-primary bg-primary text-primary-foreground"
+                                : "border-border bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                            )}
+                          >
+                            {def && (
+                              <Star
+                                className={cn(
+                                  "h-3.5 w-3.5",
+                                  selected ? "fill-primary-foreground" : "fill-warning text-warning",
+                                )}
+                                aria-label="기본 버전"
+                              />
+                            )}
+                            {v.version_name}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+
+                {/* 액션 바 */}
+                <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-semibold">라우팅 공정</span>
+                    <Badge variant="secondary" className="font-mono text-xs">
+                      {details.length}건
+                    </Badge>
+                  </div>
+                  <div className="flex gap-2">
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={openAddDetailDialog}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Plus className="mr-1 h-3.5 w-3.5" />
+                    공정 추가
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={openEditDetailDialog}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Pencil className="mr-1 h-3.5 w-3.5" />
+                    수정
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={deleteSelectedDetails}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Trash2 className="mr-1 h-3.5 w-3.5" />
+                    선택 삭제
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={() => void persistDetails()}
+                    disabled={!selectedVersionId || detailsLoading || saving}
+                  >
+                    {saving ? (
+                      <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Save className="mr-1 h-3.5 w-3.5" />
+                    )}
+                    저장
+                  </Button>
+                  </div>
+                </div>
+
+                {/* 라우팅 공정 테이블 */}
+                <div className="min-h-0 flex-1 overflow-auto">
+                  {!selectedVersionId ? (
+                    <p className="py-8 text-center text-sm text-muted-foreground">버전을 선택해주세요</p>
+                  ) : (
+                    <EDataTable
+                      columns={[
+                        { key: "seq_no", label: "순번", width: "w-[80px]", align: "center" as const },
+                        { key: "process_display", label: "공정명" },
+                        { key: "is_required", label: "필수", width: "w-[80px]", align: "center" as const },
+                        { key: "is_fixed_order", label: "순서고정", width: "w-[90px]", align: "center" as const },
+                        { key: "work_type", label: "작업구분", width: "w-[100px]" },
+                        { key: "standard_time", label: "표준시간", width: "w-[90px]", align: "right" as const },
+                        { key: "outsource_display", label: "외주업체" },
+                      ] as EDataTableColumn[]}
+                      data={detailsGridData}
+                      rowKey={(row) => row.id}
+                      loading={detailsLoading}
+                      emptyMessage="등록된 공정이 없어요"
+                      showCheckbox
+                      checkedIds={Array.from(selectedDetailIds)}
+                      onCheckedChange={(ids) => setSelectedDetailIds(new Set(ids))}
+                      showPagination={false}
+                      draggableColumns={false}
+                    />
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 버전 추가 모달 */}
+      <Dialog open={versionDialogOpen} onOpenChange={setVersionDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>라우팅 버전 추가</DialogTitle>
+            <DialogDescription>선택한 품목에 새 라우팅 버전을 추가해요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                버전명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={versionName}
+                onChange={(e) => setVersionName(e.target.value)}
+                placeholder="예: Rev.A"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설명</Label>
+              <Input
+                value={versionDescription}
+                onChange={(e) => setVersionDescription(e.target.value)}
+                placeholder="선택 입력"
+                className="h-9"
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="versionDefault"
+                checked={versionIsDefault}
+                onCheckedChange={(c) => setVersionIsDefault(c === true)}
+              />
+              <Label htmlFor="versionDefault" className="text-sm font-normal">
+                기본 버전으로 설정
+              </Label>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setVersionDialogOpen(false)} disabled={versionSubmitting}>
+              취소
+            </Button>
+            <Button onClick={() => void submitNewVersion()} disabled={versionSubmitting}>
+              {versionSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              추가해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 공정 추가/수정 모달 */}
+      <Dialog open={detailDialogOpen} onOpenChange={setDetailDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{detailDialogMode === "add" ? "공정 추가" : "공정 수정"}</DialogTitle>
+            <DialogDescription>라우팅 공정 순서에 반영할 내용을 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                공정 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={formProcessCode} onValueChange={setFormProcessCode}>
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder={processesLoading ? "불러오는 중..." : "공정 선택"} />
+                </SelectTrigger>
+                <SelectContent>
+                  {processes.map((p) => (
+                    <SelectItem key={p.id} value={p.process_code}>
+                      {p.process_name} ({p.process_code})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                순번 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                type="number"
+                min={1}
+                value={formSeqNo}
+                onChange={(e) => setFormSeqNo(e.target.value)}
+                className="h-9"
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">필수여부</Label>
+                <Select value={formRequired} onValueChange={setFormRequired}>
+                  <SelectTrigger className="h-9" size="sm">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Y">Y</SelectItem>
+                    <SelectItem value="N">N</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">순서고정여부</Label>
+                <Select value={formFixedOrder} onValueChange={setFormFixedOrder}>
+                  <SelectTrigger className="h-9" size="sm">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Y">Y</SelectItem>
+                    <SelectItem value="N">N</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">작업구분</Label>
+              <Select value={formWorkType} onValueChange={setFormWorkType}>
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="내부">내부</SelectItem>
+                  <SelectItem value="외주">외주</SelectItem>
+                  <SelectItem value="선택가능">선택가능</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">표준작업시간(분)</Label>
+              <Input
+                type="number"
+                min={0}
+                step={1}
+                value={formStandardTime}
+                onChange={(e) => setFormStandardTime(e.target.value)}
+                placeholder="0"
+                className="h-9"
+              />
+            </div>
+            {showOutsourceField && (
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">외주업체</Label>
+                <Input
+                  value={formOutsource}
+                  onChange={(e) => setFormOutsource(e.target.value)}
+                  placeholder="외주 업체명"
+                  className="h-9"
+                />
+              </div>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDetailDialogOpen(false)} disabled={detailSubmitting}>
+              취소
+            </Button>
+            <Button onClick={submitDetailForm} disabled={detailSubmitting}>
+              {detailSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              확인
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 품목 등록 모달 */}
+      <Dialog open={registerDialogOpen} onOpenChange={setRegisterDialogOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>품목 등록</DialogTitle>
+            <DialogDescription>라우팅에 추가할 품목을 검색하고 선택해주세요</DialogDescription>
+          </DialogHeader>
+        <div className="space-y-3">
+          <div className="relative">
+            <Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={registerSearch}
+              onChange={(e) => setRegisterSearch(e.target.value)}
+              placeholder="품목코드 / 품목명으로 검색"
+              className="h-9 pl-8 text-xs"
+              aria-label="품목 검색"
+            />
+          </div>
+          <div className="max-h-[400px] overflow-auto rounded-md border">
+            {registerLoading ? (
+              <div className="flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground">
+                <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                검색 중...
+              </div>
+            ) : registerItems.length === 0 ? (
+              <p className="py-8 text-center text-sm text-muted-foreground">
+                {registerSearchDebounced ? "검색 결과가 없어요" : "품목을 검색해주세요"}
+              </p>
+            ) : (
+              <Table>
+                <TableHeader className="sticky top-0 bg-background z-10">
+                  <TableRow>
+                    <TableHead className="w-10 text-center text-muted-foreground">
+                      <Checkbox
+                        checked={
+                          registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number)).length > 0 &&
+                          registerItems
+                            .filter((ri) => !registeredItemCodes.has(ri.item_number))
+                            .every((ri) => registerSelectedIds.has(ri.id))
+                        }
+                        onCheckedChange={(checked) => {
+                          const next = new Set(registerSelectedIds);
+                          const available = registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number));
+                          if (checked) {
+                            available.forEach((ri) => next.add(ri.id));
+                          } else {
+                            available.forEach((ri) => next.delete(ri.id));
+                          }
+                          setRegisterSelectedIds(next);
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="text-xs text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-xs text-muted-foreground">품목명</TableHead>
+                    <TableHead className="text-xs text-muted-foreground">상태</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {registerItems.map((ri) => {
+                    const alreadyRegistered = registeredItemCodes.has(ri.item_number);
+                    return (
+                      <TableRow key={ri.id} className={cn("hover:bg-muted/30", alreadyRegistered && "opacity-50")}>
+                        <TableCell className="text-center">
+                          <Checkbox
+                            checked={registerSelectedIds.has(ri.id)}
+                            disabled={alreadyRegistered}
+                            onCheckedChange={(checked) => {
+                              const next = new Set(registerSelectedIds);
+                              if (checked) next.add(ri.id);
+                              else next.delete(ri.id);
+                              setRegisterSelectedIds(next);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell className="text-xs">{ri.item_number}</TableCell>
+                        <TableCell className="text-xs">{ri.item_name}</TableCell>
+                        <TableCell className="text-xs">
+                          {alreadyRegistered ? (
+                            <span className="text-muted-foreground">등록됨</span>
+                          ) : (
+                            <span className="text-primary">미등록</span>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            )}
+          </div>
+          </div>
+          <DialogFooter className="flex-row items-center justify-between sm:justify-between">
+            {registerSelectedIds.size > 0 ? (
+              <p className="text-xs text-muted-foreground">{registerSelectedIds.size}건 선택됨</p>
+            ) : (
+              <div />
+            )}
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setRegisterDialogOpen(false)}>
+                취소
+              </Button>
+              <Button
+                onClick={() => void handleRegisterItems()}
+                disabled={registerSubmitting || registerSelectedIds.size === 0}
+              >
+                {registerSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                등록 ({registerSelectedIds.size}건)
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/production/process-info/ProcessMasterTab.tsx b/frontend/app/(main)/COMPANY_8/production/process-info/ProcessMasterTab.tsx
new file mode 100644
index 00000000..cfbee962
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/production/process-info/ProcessMasterTab.tsx
@@ -0,0 +1,664 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  Loader2,
+  Settings,
+  Plus,
+  Pencil,
+  Trash2,
+  Search,
+  RotateCcw,
+  Wrench,
+} from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import {
+  getProcessList,
+  createProcess,
+  updateProcess,
+  deleteProcesses,
+  getProcessEquipments,
+  addProcessEquipment,
+  removeProcessEquipment,
+  getEquipmentList,
+  type ProcessMaster,
+  type ProcessEquipment,
+  type Equipment,
+} from "@/lib/api/processInfo"; // API: /process-info/*
+import { getCategoryValues } from "@/lib/api/tableCategoryValue";
+
+const ALL_VALUE = "__all__";
+
+export function ProcessMasterTab() {
+  const [processes, setProcesses] = useState<ProcessMaster[]>([]);
+  const [equipmentMaster, setEquipmentMaster] = useState<Equipment[]>([]);
+  const [processTypeOptions, setProcessTypeOptions] = useState<{ valueCode: string; valueLabel: string }[]>([]);
+  const [loadingInitial, setLoadingInitial] = useState(true);
+  const [loadingList, setLoadingList] = useState(false);
+  const [loadingEquipments, setLoadingEquipments] = useState(false);
+
+  const [filterCode, setFilterCode] = useState("");
+  const [filterName, setFilterName] = useState("");
+  const [filterType, setFilterType] = useState<string>(ALL_VALUE);
+  const [filterUseYn, setFilterUseYn] = useState<string>(ALL_VALUE);
+
+  const [selectedProcess, setSelectedProcess] = useState<ProcessMaster | null>(null);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());
+
+  const [processEquipments, setProcessEquipments] = useState<ProcessEquipment[]>([]);
+  const [equipmentPick, setEquipmentPick] = useState<string>("");
+  const [addingEquipment, setAddingEquipment] = useState(false);
+
+  const [formOpen, setFormOpen] = useState(false);
+  const [formMode, setFormMode] = useState<"add" | "edit">("add");
+  const [savingForm, setSavingForm] = useState(false);
+  const [formProcessCode, setFormProcessCode] = useState("");
+  const [formProcessName, setFormProcessName] = useState("");
+  const [formProcessType, setFormProcessType] = useState<string>("");
+  const [formStandardTime, setFormStandardTime] = useState("");
+  const [formWorkerCount, setFormWorkerCount] = useState("");
+  const [formUseYn, setFormUseYn] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  const processTypeMap = useMemo(() => {
+    const m = new Map<string, string>();
+    processTypeOptions.forEach((o) => m.set(o.valueCode, o.valueLabel));
+    return m;
+  }, [processTypeOptions]);
+
+  const getProcessTypeLabel = useCallback(
+    (code: string) => processTypeMap.get(code) ?? code,
+    [processTypeMap]
+  );
+
+  const loadProcesses = useCallback(async () => {
+    setLoadingList(true);
+    try {
+      const res = await getProcessList({
+        processCode: filterCode.trim() || undefined,
+        processName: filterName.trim() || undefined,
+        processType: filterType === ALL_VALUE ? undefined : filterType,
+        useYn: filterUseYn === ALL_VALUE ? undefined : filterUseYn,
+      });
+      if (!res.success) {
+        toast.error(res.message || "공정 목록을 불러오지 못했어요");
+        return;
+      }
+      setProcesses(res.data ?? []);
+    } finally {
+      setLoadingList(false);
+    }
+  }, [filterCode, filterName, filterType, filterUseYn]);
+
+  const loadInitial = useCallback(async () => {
+    setLoadingInitial(true);
+    try {
+      const [procRes, eqRes] = await Promise.all([getProcessList(), getEquipmentList()]);
+      if (!procRes.success) {
+        toast.error(procRes.message || "공정 목록을 불러오지 못했어요");
+      } else {
+        setProcesses(procRes.data ?? []);
+      }
+      if (!eqRes.success) {
+        toast.error(eqRes.message || "설비 목록을 불러오지 못했어요");
+      } else {
+        setEquipmentMaster(eqRes.data ?? []);
+      }
+      const ptRes = await getCategoryValues("process_mng", "process_type");
+      if (ptRes.success && "data" in ptRes && Array.isArray(ptRes.data)) {
+        const activeValues = ptRes.data.filter((v: any) => v.isActive !== false);
+        const seen = new Set<string>();
+        const unique = activeValues.filter((v: any) => {
+          if (seen.has(v.valueCode)) return false;
+          seen.add(v.valueCode);
+          return true;
+        });
+        setProcessTypeOptions(unique.map((v: any) => ({ valueCode: v.valueCode, valueLabel: v.valueLabel })));
+      }
+    } finally {
+      setLoadingInitial(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadInitial();
+  }, [loadInitial]);
+
+  useEffect(() => {
+    setSelectedProcess((prev) => {
+      if (!prev) return prev;
+      if (!processes.some((p) => p.id === prev.id)) return null;
+      return prev;
+    });
+  }, [processes]);
+
+  useEffect(() => {
+    setEquipmentPick("");
+  }, [selectedProcess?.id]);
+
+  useEffect(() => {
+    if (!selectedProcess) {
+      setProcessEquipments([]);
+      return;
+    }
+    let cancelled = false;
+    setLoadingEquipments(true);
+    void (async () => {
+      const res = await getProcessEquipments(selectedProcess.process_code);
+      if (cancelled) return;
+      if (!res.success) {
+        toast.error(res.message || "공정 설비를 불러오지 못했어요");
+        setProcessEquipments([]);
+      } else {
+        setProcessEquipments(res.data ?? []);
+      }
+      setLoadingEquipments(false);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedProcess?.process_code]);
+
+  const handleResetFilters = () => {
+    setFilterCode("");
+    setFilterName("");
+    setFilterType(ALL_VALUE);
+    setFilterUseYn(ALL_VALUE);
+  };
+
+  const handleSearch = () => {
+    void loadProcesses();
+  };
+
+  const openAdd = () => {
+    setFormMode("add");
+    setEditingId(null);
+    setFormProcessCode("");
+    setFormProcessName("");
+    setFormProcessType(processTypeOptions[0]?.valueCode ?? "");
+    setFormStandardTime("");
+    setFormWorkerCount("");
+    setFormUseYn("Y");
+    setFormOpen(true);
+  };
+
+  const openEdit = () => {
+    if (!selectedProcess) {
+      toast.message("수정할 공정을 좌측 목록에서 선택해주세요");
+      return;
+    }
+    setFormMode("edit");
+    setEditingId(selectedProcess.id);
+    setFormProcessCode(selectedProcess.process_code);
+    setFormProcessName(selectedProcess.process_name);
+    setFormProcessType(selectedProcess.process_type);
+    setFormStandardTime(selectedProcess.standard_time ?? "");
+    setFormWorkerCount(selectedProcess.worker_count ?? "");
+    setFormUseYn(selectedProcess.use_yn);
+    setFormOpen(true);
+  };
+
+  const submitForm = async () => {
+    if (!formProcessName.trim()) {
+      toast.error("공정명을 입력해주세요");
+      return;
+    }
+
+    setSavingForm(true);
+    try {
+      if (formMode === "add") {
+        const res = await createProcess({
+          process_name: formProcessName.trim(),
+          process_type: formProcessType,
+          standard_time: formStandardTime.trim() || "0",
+          worker_count: formWorkerCount.trim() || "0",
+          use_yn: formUseYn,
+        });
+        if (!res.success || !res.data) {
+          toast.error(res.message || "등록에 실패했어요");
+          return;
+        }
+        toast.success("공정이 등록되었어요");
+        setFormOpen(false);
+        await loadProcesses();
+        setSelectedProcess(res.data);
+        setSelectedIds(new Set());
+      } else if (editingId) {
+        const res = await updateProcess(editingId, {
+          process_name: formProcessName.trim(),
+          process_type: formProcessType,
+          standard_time: formStandardTime.trim() || "0",
+          worker_count: formWorkerCount.trim() || "0",
+          use_yn: formUseYn,
+        });
+        if (!res.success || !res.data) {
+          toast.error(res.message || "수정에 실패했어요");
+          return;
+        }
+        toast.success("공정이 수정되었어요");
+        setFormOpen(false);
+        await loadProcesses();
+        setSelectedProcess(res.data);
+      }
+    } finally {
+      setSavingForm(false);
+    }
+  };
+
+  const openDelete = () => {
+    if (selectedIds.size === 0) {
+      toast.message("삭제할 공정을 체크박스로 선택해주세요");
+      return;
+    }
+    setDeleteOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    const ids = Array.from(selectedIds);
+    setDeleting(true);
+    try {
+      const res = await deleteProcesses(ids);
+      if (!res.success) {
+        toast.error(res.message || "삭제에 실패했어요");
+        return;
+      }
+      toast.success(`${ids.length}건 삭제되었어요`);
+      setDeleteOpen(false);
+      setSelectedIds(new Set());
+      if (selectedProcess && ids.includes(selectedProcess.id)) {
+        setSelectedProcess(null);
+      }
+      await loadProcesses();
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const availableEquipments = useMemo(() => {
+    const used = new Set(processEquipments.map((e) => e.equipment_code));
+    return equipmentMaster.filter((e) => !used.has(e.equipment_code));
+  }, [equipmentMaster, processEquipments]);
+
+  const handleAddEquipment = async () => {
+    if (!selectedProcess) return;
+    if (!equipmentPick) {
+      toast.message("추가할 설비를 선택해주세요");
+      return;
+    }
+    setAddingEquipment(true);
+    try {
+      const res = await addProcessEquipment({
+        process_code: selectedProcess.process_code,
+        equipment_code: equipmentPick,
+      });
+      if (!res.success) {
+        toast.error(res.message || "설비 추가에 실패했어요");
+        return;
+      }
+      toast.success("설비가 등록되었어요");
+      setEquipmentPick("");
+      const listRes = await getProcessEquipments(selectedProcess.process_code);
+      if (listRes.success && listRes.data) setProcessEquipments(listRes.data);
+    } finally {
+      setAddingEquipment(false);
+    }
+  };
+
+  const handleRemoveEquipment = async (row: ProcessEquipment) => {
+    const res = await removeProcessEquipment(row.id);
+    if (!res.success) {
+      toast.error(res.message || "설비 제거에 실패했어요");
+      return;
+    }
+    toast.success("설비가 제거되었어요");
+    if (selectedProcess) {
+      const listRes = await getProcessEquipments(selectedProcess.process_code);
+      if (listRes.success && listRes.data) setProcessEquipments(listRes.data);
+    }
+  };
+
+  const listBusy = loadingInitial || loadingList;
+
+  // 표시용 데이터
+  const processGridData = useMemo(
+    () =>
+      processes.map((p) => ({
+        ...p,
+        process_type_display: getProcessTypeLabel(p.process_type),
+        use_yn_display: p.use_yn === "Y" ? "사용" : "미사용",
+      })),
+    [processes, getProcessTypeLabel]
+  );
+
+  return (
+    <div className="flex h-full flex-col">
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+        {/* 좌측: 공정 목록 */}
+        <ResizablePanel defaultSize={50} minSize={30}>
+          <div className="flex h-full flex-col">
+            {/* 패널 헤더 */}
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">공정 마스터</span>
+              <Badge variant="secondary" className="font-mono text-xs">
+                {processes.length}건
+              </Badge>
+            </div>
+
+            {/* 필터 바 */}
+            <div className="flex flex-wrap items-center gap-2 border-b px-3 py-2">
+              <Input value={filterCode} onChange={(e) => setFilterCode(e.target.value)} placeholder="공정코드" className="h-8 w-[110px] text-xs" />
+              <Input value={filterName} onChange={(e) => setFilterName(e.target.value)} placeholder="공정명" className="h-8 w-[130px] text-xs" />
+              <Select value={filterType} onValueChange={setFilterType}>
+                <SelectTrigger className="h-8 w-[110px] text-xs">
+                  <SelectValue placeholder="유형 전체" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>전체</SelectItem>
+                  {processTypeOptions.map((o, idx) => (
+                    <SelectItem key={`pt-filter-${idx}`} value={o.valueCode}>{o.valueLabel}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select value={filterUseYn} onValueChange={setFilterUseYn}>
+                <SelectTrigger className="h-8 w-[100px] text-xs">
+                  <SelectValue placeholder="사용 전체" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>전체</SelectItem>
+                  <SelectItem value="Y">사용</SelectItem>
+                  <SelectItem value="N">미사용</SelectItem>
+                </SelectContent>
+              </Select>
+              <div className="flex-1" />
+              {listBusy && <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />}
+              <Button size="sm" className="h-8 gap-1 text-xs" onClick={handleSearch} disabled={listBusy}>
+                <Search className="h-3 w-3" />조회
+              </Button>
+              <Button variant="ghost" size="sm" className="h-8 gap-1 text-xs text-muted-foreground" onClick={handleResetFilters}>
+                <RotateCcw className="h-3 w-3" />초기화
+              </Button>
+            </div>
+
+            {/* 액션 바 */}
+            <div className="flex items-center justify-end gap-2 border-b bg-muted/30 px-4 py-2">
+              <Button size="sm" onClick={openAdd}>
+                <Plus className="mr-1 h-3.5 w-3.5" />
+                공정 추가
+              </Button>
+              <Button variant="secondary" size="sm" onClick={openEdit}>
+                <Pencil className="mr-1 h-3.5 w-3.5" />
+                수정
+              </Button>
+              <Button variant="destructive" size="sm" onClick={openDelete}>
+                <Trash2 className="mr-1 h-3.5 w-3.5" />
+                삭제
+              </Button>
+            </div>
+
+            {/* 공정 목록 테이블 */}
+            <div className="min-h-0 flex-1 overflow-auto">
+              <EDataTable
+                columns={[
+                  { key: "process_code", label: "공정코드", width: "w-[130px]", render: (val: any) => <span className="font-mono text-xs">{val}</span> },
+                  { key: "process_name", label: "공정명" },
+                  { key: "process_type_display", label: "공정유형", width: "w-[120px]" },
+                  { key: "standard_time", label: "표준시간(분)", width: "w-[110px]", align: "right" as const },
+                  { key: "worker_count", label: "작업인원", width: "w-[90px]", align: "right" as const },
+                  { key: "use_yn_display", label: "사용여부", width: "w-[90px]", align: "center" as const },
+                ] as EDataTableColumn[]}
+                data={processGridData}
+                rowKey={(row) => row.id}
+                loading={listBusy}
+                emptyMessage="조회된 공정이 없어요"
+                selectedId={selectedProcess?.id ?? null}
+                onSelect={(id) => {
+                  const proc = processes.find((p) => p.id === id);
+                  setSelectedProcess(proc || null);
+                }}
+                onRowClick={(row) => {
+                  const proc = processes.find((p) => p.id === row.id);
+                  setSelectedProcess(proc || null);
+                }}
+                showCheckbox
+                checkedIds={Array.from(selectedIds)}
+                onCheckedChange={(ids) => setSelectedIds(new Set(ids))}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 공정별 설비 */}
+        <ResizablePanel defaultSize={50} minSize={30}>
+          <div className="flex h-full flex-col">
+            {/* 패널 헤더 */}
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <Wrench className="h-4 w-4 text-muted-foreground" />
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-semibold">공정별 사용설비</p>
+                {selectedProcess ? (
+                  <p className="truncate text-xs text-muted-foreground">
+                    {selectedProcess.process_name} ({selectedProcess.process_code})
+                  </p>
+                ) : (
+                  <p className="text-xs text-muted-foreground">공정을 선택해주세요</p>
+                )}
+              </div>
+            </div>
+
+            {!selectedProcess ? (
+              <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+                <Settings className="h-10 w-10 opacity-40" />
+                <p className="text-sm font-medium text-foreground">좌측에서 공정을 선택해주세요</p>
+                <p className="max-w-xs text-xs">
+                  목록 행을 클릭하면 이 공정에 연결된 설비를 관리할 수 있어요
+                </p>
+              </div>
+            ) : (
+              <div className="flex min-h-0 flex-1 flex-col gap-3 p-4">
+                <div className="flex items-end gap-2">
+                  <div className="min-w-0 flex-1 space-y-1">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설비 선택</Label>
+                    <Select
+                      key={selectedProcess.id}
+                      value={equipmentPick || undefined}
+                      onValueChange={setEquipmentPick}
+                      disabled={addingEquipment || availableEquipments.length === 0}
+                    >
+                      <SelectTrigger className="h-9" size="sm">
+                        <SelectValue placeholder="설비를 선택해주세요" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availableEquipments.map((eq) => (
+                          <SelectItem key={eq.id} value={eq.equipment_code}>
+                            {eq.equipment_code} · {eq.equipment_name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <Button
+                    size="sm"
+                    onClick={() => void handleAddEquipment()}
+                    disabled={addingEquipment || !equipmentPick}
+                  >
+                    {addingEquipment ? (
+                      <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Plus className="mr-1 h-3.5 w-3.5" />
+                    )}
+                    추가
+                  </Button>
+                </div>
+
+                <div className="min-h-0 flex-1 overflow-auto">
+                  {loadingEquipments ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Loader2 className="h-7 w-7 animate-spin" />
+                      <p className="mt-2 text-sm">설비 목록을 불러오고 있어요...</p>
+                    </div>
+                  ) : processEquipments.length === 0 ? (
+                    <p className="py-8 text-center text-sm text-muted-foreground">
+                      등록된 설비가 없어요. 상단에서 설비를 추가해주세요.
+                    </p>
+                  ) : (
+                    <ul className="space-y-2">
+                      {processEquipments.map((pe) => (
+                        <li key={pe.id} className="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:bg-muted/30">
+                          <div className="min-w-0 flex-1">
+                            <p className="truncate text-sm font-medium">{pe.equipment_code}</p>
+                            <p className="truncate text-xs text-muted-foreground">{pe.equipment_name || "설비명 없음"}</p>
+                          </div>
+                          <Button variant="ghost" size="sm" onClick={() => void handleRemoveEquipment(pe)}>
+                            <Trash2 className="mr-1 h-3.5 w-3.5" />
+                            제거
+                          </Button>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 공정 등록/수정 모달 */}
+      <Dialog open={formOpen} onOpenChange={setFormOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{formMode === "add" ? "공정 추가" : "공정 수정"}</DialogTitle>
+            <DialogDescription>공정 마스터 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                공정명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={formProcessName}
+                onChange={(e) => setFormProcessName(e.target.value)}
+                placeholder="공정명을 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">공정유형</Label>
+              <Select value={formProcessType} onValueChange={setFormProcessType}>
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder="선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {processTypeOptions.map((o, idx) => (
+                    <SelectItem key={`pt-form-${idx}`} value={o.valueCode}>{o.valueLabel}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">표준작업시간(분)</Label>
+              <Input
+                value={formStandardTime}
+                onChange={(e) => setFormStandardTime(e.target.value)}
+                placeholder="0"
+                inputMode="numeric"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">작업인원수</Label>
+              <Input
+                value={formWorkerCount}
+                onChange={(e) => setFormWorkerCount(e.target.value)}
+                placeholder="0"
+                inputMode="numeric"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">사용여부</Label>
+              <Select value={formUseYn} onValueChange={setFormUseYn}>
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder="선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Y">사용</SelectItem>
+                  <SelectItem value="N">미사용</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setFormOpen(false)} disabled={savingForm}>취소</Button>
+            <Button onClick={() => void submitForm()} disabled={savingForm}>
+              {savingForm && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 삭제 확인 */}
+      <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>공정 삭제</DialogTitle>
+            <DialogDescription>
+              선택한 {selectedIds.size}건의 공정을 삭제해요. 연결된 공정-설비 매핑도 함께 삭제돼요. 이 작업은 되돌릴 수 없어요.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2">
+            <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>취소</Button>
+            <Button variant="destructive" onClick={() => void confirmDelete()} disabled={deleting}>
+              {deleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              삭제해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/production/process-info/ProcessWorkStandardTab.tsx b/frontend/app/(main)/COMPANY_8/production/process-info/ProcessWorkStandardTab.tsx
new file mode 100644
index 00000000..21007c05
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/production/process-info/ProcessWorkStandardTab.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { ProcessWorkStandardComponent } from "@/lib/registry/components/v2-process-work-standard/ProcessWorkStandardComponent";
+
+export function ProcessWorkStandardTab() {
+  return (
+    <div className="h-[calc(100vh-12rem)]">
+      <ProcessWorkStandardComponent
+        config={{
+          itemListMode: "registered",
+          screenCode: "screen_1599",
+          leftPanelTitle: "등록 품목 및 공정",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/production/process-info/page.tsx b/frontend/app/(main)/COMPANY_8/production/process-info/page.tsx
new file mode 100644
index 00000000..a7b81550
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/production/process-info/page.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Settings,
+  GitBranch,
+  ClipboardList,
+  ChevronRight,
+  Factory,
+  Keyboard,
+  Plus,
+  Pencil,
+  Trash2,
+  List,
+  Settings2,
+} from "lucide-react";
+import { ProcessMasterTab } from "./ProcessMasterTab";
+import { ItemRoutingTab } from "./ItemRoutingTab";
+import { ProcessWorkStandardTab } from "./ProcessWorkStandardTab";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+
+const GRID_COLUMNS = [
+  { key: "process_code", label: "공정코드" },
+  { key: "process_name", label: "공정명" },
+  { key: "process_type", label: "공정유형" },
+  { key: "standard_time", label: "표준시간(분)" },
+  { key: "worker_count", label: "작업인원" },
+  { key: "use_yn", label: "사용여부" },
+];
+
+const TAB_META = [
+  {
+    value: "process",
+    label: "공정 마스터",
+    shortLabel: "공정",
+    description: "공정코드/유형/표준시간/사용설비 관리",
+    detailDesc: "공정코드, 공정유형, 표준시간을 등록하고 사용 설비를 매핑합니다.",
+    icon: Settings,
+    color: "text-blue-500",
+    badgeColor: "bg-blue-50 text-blue-700 ring-blue-600/20",
+    shortcut: "1",
+    actions: ["공정 등록", "공정 수정", "공정 삭제", "설비 연결"],
+  },
+  {
+    value: "routing",
+    label: "품목별 라우팅",
+    shortLabel: "라우팅",
+    description: "품목 라우팅 버전 및 공정 순서 관리",
+    detailDesc: "품목별 생산 라우팅 버전을 관리하고 공정 순서 및 소요시간을 설정합니다.",
+    icon: GitBranch,
+    color: "text-emerald-500",
+    badgeColor: "bg-emerald-50 text-emerald-700 ring-emerald-600/20",
+    shortcut: "2",
+    actions: ["버전 생성", "공정 순서 설정", "품목 등록", "품목 해제"],
+  },
+  {
+    value: "workstandard",
+    label: "공정 작업기준",
+    shortLabel: "작업기준",
+    description: "공정별 작업기준서 및 작업 표준 관리",
+    detailDesc: "공정별 작업기준서를 등록하고 작업 표준을 문서화하여 품질을 관리합니다.",
+    icon: ClipboardList,
+    color: "text-violet-500",
+    badgeColor: "bg-violet-50 text-violet-700 ring-violet-600/20",
+    shortcut: "3",
+    actions: ["기준서 등록", "기준서 수정", "기준서 삭제", "작업 표준 관리"],
+  },
+] as const;
+
+type TabValue = (typeof TAB_META)[number]["value"];
+
+const ACTION_ICONS = [Plus, Pencil, Trash2, List] as const;
+
+export default function ProcessInfoPage() {
+  const ts = useTableSettings("c16-process-info", "process_mst", GRID_COLUMNS);
+  const [activeTab, setActiveTab] = useState<TabValue>("process");
+  const [showShortcutHint, setShowShortcutHint] = useState(false);
+
+  const activeMeta = TAB_META.find((t) => t.value === activeTab)!;
+
+  const handleTabChange = useCallback((value: string) => {
+    setActiveTab(value as TabValue);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!e.altKey) return;
+      const tabByShortcut = TAB_META.find((t) => t.shortcut === e.key);
+      if (tabByShortcut) {
+        e.preventDefault();
+        setActiveTab(tabByShortcut.value);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col bg-muted/30">
+      {/* 페이지 헤더 */}
+      <div className="shrink-0 border-b bg-background px-6 py-3">
+        <nav
+          className="mb-1 flex items-center gap-1 text-xs text-muted-foreground"
+          aria-label="breadcrumb"
+        >
+          <Factory className="h-3 w-3" />
+          <span>생산관리</span>
+          <ChevronRight className="h-3 w-3 opacity-50" />
+          <span className="font-medium text-foreground">공정정보관리</span>
+        </nav>
+        <div className="flex items-center justify-between">
+          <div className="flex items-baseline gap-2">
+            <h1 className="text-base font-semibold text-foreground">공정정보관리</h1>
+            <span className="text-xs text-muted-foreground">{activeMeta.description}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+            <button
+              type="button"
+              className="flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              onClick={() => setShowShortcutHint((v) => !v)}
+              aria-label="키보드 단축키 보기"
+            >
+              <Keyboard className="h-3 w-3" />
+              <span>단축키</span>
+            </button>
+          </div>
+        </div>
+        {showShortcutHint && (
+          <div className="mt-2 flex items-center gap-3 rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground">
+            <span className="font-medium text-foreground">탭 전환:</span>
+            {TAB_META.map((t) => (
+              <span key={t.value} className="flex items-center gap-1">
+                <kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-mono text-[10px]">
+                  Alt+{t.shortcut}
+                </kbd>
+                <span>{t.shortLabel}</span>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex min-h-0 flex-1 flex-col"
+      >
+        {/* 탭 네비게이션 */}
+        <div className="shrink-0 border-b bg-background px-4">
+          <TabsList className="h-12 bg-transparent gap-1">
+            {TAB_META.map(({ value, label, icon: Icon, shortcut }) => (
+              <TabsTrigger
+                key={value}
+                value={value}
+                className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 gap-1.5"
+                aria-label={`${label} (Alt+${shortcut})`}
+              >
+                <Icon className="h-4 w-4" />
+                {label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
+
+        {/* 탭 설명 배너 */}
+        <div className="shrink-0 border-b bg-background/60 px-6 py-2">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span
+                className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset ${activeMeta.badgeColor}`}
+              >
+                {activeMeta.shortLabel}
+              </span>
+              <span className="text-xs text-muted-foreground">{activeMeta.detailDesc}</span>
+            </div>
+            <div className="hidden items-center gap-2 sm:flex">
+              {activeMeta.actions.map((action, i) => {
+                const ActionIcon = ACTION_ICONS[i % ACTION_ICONS.length];
+                return (
+                  <span
+                    key={action}
+                    className="flex items-center gap-1 text-xs text-muted-foreground/70"
+                  >
+                    <ActionIcon className="h-3 w-3" />
+                    {action}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* 탭 컨텐츠 */}
+        <TabsContent value="process" className="min-h-0 flex-1 overflow-hidden mt-0">
+          <ProcessMasterTab />
+        </TabsContent>
+
+        <TabsContent value="routing" className="min-h-0 flex-1 overflow-hidden mt-0">
+          <ItemRoutingTab />
+        </TabsContent>
+
+        <TabsContent value="workstandard" className="min-h-0 flex-1 overflow-hidden mt-0">
+          <ProcessWorkStandardTab />
+        </TabsContent>
+      </Tabs>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/production/work-instruction/WorkStandardEditModal.tsx b/frontend/app/(main)/COMPANY_8/production/work-instruction/WorkStandardEditModal.tsx
new file mode 100644
index 00000000..d9167dcb
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/production/work-instruction/WorkStandardEditModal.tsx
@@ -0,0 +1,1007 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { cn } from "@/lib/utils";
+import {
+  Loader2, Save, RotateCcw, Plus, Trash2, Pencil, ClipboardCheck,
+  GripVertical, AlertCircle, ClipboardList,
+} from "lucide-react";
+import { toast } from "sonner";
+import {
+  getWIWorkStandard, copyWorkStandard, saveWIWorkStandard, resetWIWorkStandard,
+  WIWorkItem, WIWorkItemDetail, WIWorkStandardProcess,
+} from "@/lib/api/workInstruction";
+
+interface WorkStandardEditModalProps {
+  open: boolean;
+  onClose: () => void;
+  workInstructionNo: string;
+  routingVersionId: string;
+  routingName: string;
+  itemName: string;
+  itemCode: string;
+}
+
+const PHASES = [
+  { key: "PRE", label: "작업 전 (Pre-Work)" },
+  { key: "IN", label: "작업 중 (In-Work)" },
+  { key: "POST", label: "작업 후 (Post-Work)" },
+];
+
+const DETAIL_TYPES = [
+  { value: "checklist", label: "체크리스트" },
+  { value: "inspection", label: "검사항목" },
+  { value: "procedure", label: "작업절차" },
+  { value: "input", label: "직접입력" },
+  { value: "lookup", label: "문서참조" },
+  { value: "equip_inspection", label: "설비점검" },
+  { value: "equip_condition", label: "설비조건" },
+  { value: "production_result", label: "실적등록" },
+  { value: "material_input", label: "자재투입" },
+];
+
+const INPUT_TYPES = [
+  { value: "text", label: "텍스트" },
+  { value: "number", label: "숫자" },
+  { value: "date", label: "날짜" },
+  { value: "textarea", label: "장문 텍스트" },
+];
+
+const UNIT_OPTIONS = [
+  "mm", "cm", "m", "μm", "℃", "℉", "bar", "Pa", "MPa", "psi",
+  "RPM", "kg", "N", "N·m", "m/s", "m/min", "A", "V", "kW", "%",
+  "L/min", "Hz", "dB", "ea", "g", "mg", "ml", "L",
+];
+
+const getDetailTypeLabel = (type: string) =>
+  DETAIL_TYPES.find(d => d.value === type)?.label || type;
+
+const getContentSummary = (detail: WIWorkItemDetail): string => {
+  const type = detail.detail_type;
+  if (type === "inspection") {
+    const parts = [detail.content];
+    if (detail.inspection_method) parts.push(`[${detail.inspection_method}]`);
+    if (detail.base_value) {
+      parts.push(`(기준: ${detail.base_value}${detail.tolerance ? ` ±${detail.tolerance}` : ""} ${detail.unit || ""})`);
+    }
+    return parts.join(" ");
+  }
+  if (type === "procedure" && detail.duration_minutes) {
+    return `${detail.content} (${detail.duration_minutes}분)`;
+  }
+  if (type === "input" && detail.input_type) {
+    const typeMap: Record<string, string> = { text: "텍스트", number: "숫자", date: "날짜", textarea: "장문" };
+    return `${detail.content} [${typeMap[detail.input_type] || detail.input_type}]`;
+  }
+  if (type === "lookup") return "품목 등록 문서 (자동 연동)";
+  if (type === "equip_inspection") return detail.content || "설비점검";
+  if (type === "equip_condition") {
+    const parts = [detail.content];
+    if (detail.condition_base_value) {
+      parts.push(`(기준: ${detail.condition_base_value}${detail.condition_tolerance ? ` ±${detail.condition_tolerance}` : ""} ${detail.condition_unit || ""})`);
+    }
+    return parts.join(" ");
+  }
+  if (type === "production_result") return "작업수량 / 불량수량 / 양품수량";
+  if (type === "material_input") return "BOM 구성 자재 (자동 연동)";
+  return detail.content || "-";
+};
+
+export function WorkStandardEditModal({
+  open,
+  onClose,
+  workInstructionNo,
+  routingVersionId,
+  routingName,
+  itemName,
+  itemCode,
+}: WorkStandardEditModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [processes, setProcesses] = useState<WIWorkStandardProcess[]>([]);
+  const [isCustom, setIsCustom] = useState(false);
+  const [selectedProcessIdx, setSelectedProcessIdx] = useState(0);
+  const [selectedWorkItemIdByPhase, setSelectedWorkItemIdByPhase] = useState<Record<string, string | null>>({});
+  const [dirty, setDirty] = useState(false);
+
+  // 작업항목 추가/수정 모달
+  const [addItemOpen, setAddItemOpen] = useState(false);
+  const [addItemPhase, setAddItemPhase] = useState("PRE");
+  const [addItemTitle, setAddItemTitle] = useState("");
+  const [addItemRequired, setAddItemRequired] = useState("Y");
+  const [editingWorkItem, setEditingWorkItem] = useState<WIWorkItem | null>(null);
+
+  // 상세 추가/수정 모달
+  const [detailModalOpen, setDetailModalOpen] = useState(false);
+  const [detailModalMode, setDetailModalMode] = useState<"add" | "edit">("add");
+  const [detailModalPhase, setDetailModalPhase] = useState("PRE");
+  const [detailFormData, setDetailFormData] = useState<Partial<WIWorkItemDetail>>({});
+  const [editingDetail, setEditingDetail] = useState<WIWorkItemDetail | null>(null);
+
+  // 데이터 로드
+  const loadData = useCallback(async () => {
+    if (!workInstructionNo || !routingVersionId) return;
+    setLoading(true);
+    try {
+      const res = await getWIWorkStandard(workInstructionNo, routingVersionId);
+      if (res.success && res.data) {
+        setProcesses(res.data.processes);
+        setIsCustom(res.data.isCustom);
+        setSelectedProcessIdx(0);
+        setSelectedWorkItemIdByPhase({});
+        setDirty(false);
+      }
+    } catch (err) {
+      console.error("공정작업기준 로드 실패", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [workInstructionNo, routingVersionId]);
+
+  useEffect(() => {
+    if (open) loadData();
+  }, [open, loadData]);
+
+  const currentProcess = processes[selectedProcessIdx] || null;
+
+  // Phase별 작업항목 그룹핑 (MAIN을 IN으로 매핑)
+  const workItemsByPhase = useMemo(() => {
+    if (!currentProcess) return {};
+    const map: Record<string, WIWorkItem[]> = {};
+    for (const phase of PHASES) {
+      map[phase.key] = currentProcess.workItems.filter(
+        wi => wi.work_phase === phase.key || (phase.key === "IN" && wi.work_phase === "MAIN")
+      );
+    }
+    return map;
+  }, [currentProcess]);
+
+  // 커스텀 복사 확인 후 수정
+  const ensureCustom = useCallback(async () => {
+    if (isCustom) return true;
+    try {
+      const res = await copyWorkStandard(workInstructionNo, routingVersionId);
+      if (res.success) {
+        await loadData();
+        setIsCustom(true);
+        return true;
+      }
+    } catch (err) {
+      toast.error("원본 복사에 실패했습니다");
+    }
+    return false;
+  }, [isCustom, workInstructionNo, routingVersionId, loadData]);
+
+  // 작업항목 추가 모달 열기
+  const openAddWorkItem = useCallback((phaseKey: string) => {
+    setAddItemPhase(phaseKey);
+    setAddItemTitle("");
+    setAddItemRequired("Y");
+    setEditingWorkItem(null);
+    setAddItemOpen(true);
+  }, []);
+
+  // 작업항목 수정 모달 열기
+  const openEditWorkItem = useCallback((item: WIWorkItem) => {
+    setAddItemPhase(item.work_phase);
+    setAddItemTitle(item.title);
+    setAddItemRequired(item.is_required);
+    setEditingWorkItem(item);
+    setAddItemOpen(true);
+  }, []);
+
+  // 작업항목 추가/수정 처리
+  const handleSaveWorkItem = useCallback(async () => {
+    if (!addItemTitle.trim()) { toast.error("제목을 입력하세요"); return; }
+    const ok = await ensureCustom();
+    if (!ok || !currentProcess) return;
+
+    if (editingWorkItem) {
+      // 수정
+      setProcesses(prev => {
+        const next = [...prev];
+        const workItems = [...next[selectedProcessIdx].workItems];
+        const idx = workItems.findIndex(wi => wi.id === editingWorkItem.id);
+        if (idx >= 0) {
+          workItems[idx] = { ...workItems[idx], title: addItemTitle.trim(), is_required: addItemRequired };
+        }
+        next[selectedProcessIdx] = { ...next[selectedProcessIdx], workItems };
+        return next;
+      });
+    } else {
+      // 추가
+      const phaseKey = addItemPhase === "IN" ? "IN" : addItemPhase;
+      const phaseItems = currentProcess.workItems.filter(
+        wi => wi.work_phase === phaseKey || (phaseKey === "IN" && wi.work_phase === "MAIN")
+      );
+      const newItem: WIWorkItem = {
+        id: `temp-${Date.now()}`,
+        routing_detail_id: currentProcess.routing_detail_id,
+        work_phase: phaseKey,
+        title: addItemTitle.trim(),
+        is_required: addItemRequired,
+        sort_order: phaseItems.length + 1,
+        details: [],
+      };
+
+      setProcesses(prev => {
+        const next = [...prev];
+        next[selectedProcessIdx] = {
+          ...next[selectedProcessIdx],
+          workItems: [...next[selectedProcessIdx].workItems, newItem],
+        };
+        return next;
+      });
+
+      setSelectedWorkItemIdByPhase(prev => ({ ...prev, [addItemPhase]: newItem.id! }));
+    }
+
+    setAddItemOpen(false);
+    setDirty(true);
+  }, [addItemTitle, addItemRequired, addItemPhase, ensureCustom, currentProcess, selectedProcessIdx, editingWorkItem]);
+
+  // 작업항목 삭제
+  const handleDeleteWorkItem = useCallback(async (id: string, phaseKey: string) => {
+    const ok = await ensureCustom();
+    if (!ok) return;
+
+    setProcesses(prev => {
+      const next = [...prev];
+      next[selectedProcessIdx] = {
+        ...next[selectedProcessIdx],
+        workItems: next[selectedProcessIdx].workItems.filter(wi => wi.id !== id),
+      };
+      return next;
+    });
+    if (selectedWorkItemIdByPhase[phaseKey] === id) {
+      setSelectedWorkItemIdByPhase(prev => ({ ...prev, [phaseKey]: null }));
+    }
+    setDirty(true);
+  }, [ensureCustom, selectedProcessIdx, selectedWorkItemIdByPhase]);
+
+  // 상세 추가 모달 열기
+  const openAddDetail = useCallback((phaseKey: string) => {
+    setDetailModalPhase(phaseKey);
+    setDetailModalMode("add");
+    setEditingDetail(null);
+    setDetailFormData({
+      detail_type: DETAIL_TYPES[0].value,
+      content: "",
+      is_required: "Y",
+    });
+    setDetailModalOpen(true);
+  }, []);
+
+  // 상세 수정 모달 열기
+  const openEditDetail = useCallback((detail: WIWorkItemDetail, phaseKey: string) => {
+    setDetailModalPhase(phaseKey);
+    setDetailModalMode("edit");
+    setEditingDetail(detail);
+    setDetailFormData({ ...detail });
+    setDetailModalOpen(true);
+  }, []);
+
+  // 상세 추가/수정 처리
+  const handleSaveDetail = useCallback(async () => {
+    const type = detailFormData.detail_type || "";
+    if (!type) return;
+
+    // 유효성 검사 (내용이 필요한 유형)
+    const needsContent = ["checklist", "procedure", "input", "equip_condition"];
+    if (needsContent.includes(type) && !detailFormData.content?.trim()) {
+      toast.error("내용을 입력하세요");
+      return;
+    }
+    if (type === "inspection" && !detailFormData.content?.trim()) {
+      toast.error("검사 항목명을 입력하세요");
+      return;
+    }
+
+    const workItemId = selectedWorkItemIdByPhase[detailModalPhase];
+    if (!workItemId) return;
+    const ok = await ensureCustom();
+    if (!ok) return;
+
+    // content 자동 설정 (UI에서 직접 입력이 없는 유형들)
+    const submitData = { ...detailFormData };
+    if (type === "lookup") submitData.content = submitData.content || "품목 등록 문서 (자동 연동)";
+    if (type === "equip_inspection") submitData.content = submitData.content || "설비점검";
+    if (type === "production_result") submitData.content = submitData.content || "작업수량 / 불량수량 / 양품수량";
+    if (type === "material_input") submitData.content = submitData.content || "BOM 구성 자재 (자동 연동)";
+
+    setProcesses(prev => {
+      const next = [...prev];
+      const workItems = [...next[selectedProcessIdx].workItems];
+      const wiIdx = workItems.findIndex(wi => wi.id === workItemId);
+      if (wiIdx < 0) return prev;
+
+      if (detailModalMode === "edit" && editingDetail) {
+        // 수정
+        const details = (workItems[wiIdx].details || []).map(d =>
+          d.id === editingDetail.id ? { ...d, ...submitData } : d
+        );
+        workItems[wiIdx] = { ...workItems[wiIdx], details };
+      } else {
+        // 추가
+        const newDetail: WIWorkItemDetail = {
+          ...submitData,
+          id: `temp-detail-${Date.now()}`,
+          work_item_id: workItemId,
+          sort_order: (workItems[wiIdx].details?.length || 0) + 1,
+        };
+        workItems[wiIdx] = {
+          ...workItems[wiIdx],
+          details: [...(workItems[wiIdx].details || []), newDetail],
+          detail_count: (workItems[wiIdx].detail_count || 0) + 1,
+        };
+      }
+      next[selectedProcessIdx] = { ...next[selectedProcessIdx], workItems };
+      return next;
+    });
+
+    setDetailModalOpen(false);
+    setDirty(true);
+  }, [detailFormData, detailModalPhase, detailModalMode, editingDetail, selectedWorkItemIdByPhase, ensureCustom, selectedProcessIdx]);
+
+  // 상세 삭제
+  const handleDeleteDetail = useCallback(async (detailId: string, phaseKey: string) => {
+    const workItemId = selectedWorkItemIdByPhase[phaseKey];
+    if (!workItemId) return;
+    const ok = await ensureCustom();
+    if (!ok) return;
+
+    setProcesses(prev => {
+      const next = [...prev];
+      const workItems = [...next[selectedProcessIdx].workItems];
+      const wiIdx = workItems.findIndex(wi => wi.id === workItemId);
+      if (wiIdx >= 0) {
+        workItems[wiIdx] = {
+          ...workItems[wiIdx],
+          details: (workItems[wiIdx].details || []).filter(d => d.id !== detailId),
+          detail_count: Math.max(0, (workItems[wiIdx].detail_count || 1) - 1),
+        };
+      }
+      next[selectedProcessIdx] = { ...next[selectedProcessIdx], workItems };
+      return next;
+    });
+    setDirty(true);
+  }, [selectedWorkItemIdByPhase, ensureCustom, selectedProcessIdx]);
+
+  // 저장
+  const handleSave = useCallback(async () => {
+    if (!currentProcess) return;
+    setSaving(true);
+    try {
+      const ok = await ensureCustom();
+      if (!ok) return;
+
+      const res = await saveWIWorkStandard(
+        workInstructionNo,
+        currentProcess.routing_detail_id,
+        currentProcess.workItems
+      );
+      if (res.success) {
+        toast.success("공정작업기준이 저장되었습니다");
+        setDirty(false);
+        await loadData();
+      } else {
+        toast.error("저장에 실패했습니다");
+      }
+    } catch (err) {
+      toast.error("저장 중 오류가 발생했습니다");
+    } finally {
+      setSaving(false);
+    }
+  }, [currentProcess, ensureCustom, workInstructionNo, loadData]);
+
+  // 원본으로 초기화
+  const handleReset = useCallback(async () => {
+    if (!confirm("커스터마이징한 내용을 모두 삭제하고 원본으로 되돌리시겠습니까?")) return;
+    try {
+      const res = await resetWIWorkStandard(workInstructionNo);
+      if (res.success) {
+        toast.success("원본으로 초기화되었습니다");
+        await loadData();
+      }
+    } catch (err) {
+      toast.error("초기화에 실패했습니다");
+    }
+  }, [workInstructionNo, loadData]);
+
+  const updateDetailField = (field: string, value: unknown) => {
+    setDetailFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={v => { if (!v) onClose(); }}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[1200px] h-[85vh] flex flex-col p-0 gap-0">
+        <DialogHeader className="px-6 py-4 border-b shrink-0">
+          <DialogTitle className="text-base flex items-center gap-2">
+            <ClipboardCheck className="w-4 h-4" />
+            공정작업기준 수정 - {itemName}
+            {routingName && <Badge variant="secondary" className="text-xs ml-2">{routingName}</Badge>}
+            {isCustom && <Badge variant="outline" className="text-xs ml-1 border-amber-300 text-amber-700">커스텀</Badge>}
+          </DialogTitle>
+          <DialogDescription className="text-xs">
+            작업지시 [{workInstructionNo}]에 대한 공정작업기준을 수정합니다. 원본에 영향을 주지 않습니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        {loading ? (
+          <div className="flex-1 flex items-center justify-center">
+            <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+          </div>
+        ) : processes.length === 0 ? (
+          <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
+            <AlertCircle className="w-10 h-10 mb-3 opacity-30" />
+            <p className="text-sm">라우팅에 등록된 공정이 없습니다</p>
+          </div>
+        ) : (
+          <div className="flex-1 flex flex-col overflow-hidden">
+            {/* 공정 탭 */}
+            <div className="flex items-center gap-1 px-4 py-2 border-b bg-muted/30 overflow-x-auto shrink-0">
+              {processes.map((proc, idx) => (
+                <Button
+                  key={proc.routing_detail_id}
+                  variant={selectedProcessIdx === idx ? "default" : "ghost"}
+                  size="sm"
+                  className={cn("text-xs shrink-0 h-8", selectedProcessIdx === idx && "shadow-sm")}
+                  onClick={() => {
+                    setSelectedProcessIdx(idx);
+                    setSelectedWorkItemIdByPhase({});
+                  }}
+                >
+                  <span className="mr-1.5 font-mono text-[10px] opacity-70">{proc.seq_no}.</span>
+                  {proc.process_name}
+                  {proc.workItems.length > 0 && (
+                    <Badge variant="secondary" className="ml-1.5 text-[10px] h-4 px-1">{proc.workItems.length}</Badge>
+                  )}
+                </Button>
+              ))}
+            </div>
+
+            {/* Phase별 세로 섹션 */}
+            <div className="flex-1 overflow-y-auto space-y-4 p-4">
+              {PHASES.map(phase => {
+                const phaseItems = workItemsByPhase[phase.key] || [];
+                const selectedWiId = selectedWorkItemIdByPhase[phase.key] || null;
+                const selectedWi = phaseItems.find(wi => wi.id === selectedWiId) || null;
+
+                return (
+                  <div key={phase.key} className="rounded-lg border bg-card">
+                    {/* 섹션 헤더 */}
+                    <div className="flex items-center justify-between border-b px-4 py-2.5">
+                      <div className="flex items-center gap-2">
+                        <h3 className="text-sm font-semibold">{phase.label}</h3>
+                        <Badge variant="secondary" className="h-5 rounded-full px-2 text-[10px]">
+                          {phaseItems.length}개 항목
+                        </Badge>
+                      </div>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-7 gap-1 text-xs"
+                        onClick={() => openAddWorkItem(phase.key)}
+                      >
+                        <Plus className="h-3 w-3" />
+                        작업항목 추가
+                      </Button>
+                    </div>
+
+                    {/* 좌우 분할 */}
+                    <div className="flex min-h-[140px]">
+                      {/* 좌측: 240px 작업항목 카드 */}
+                      <div className="w-[240px] shrink-0 border-r p-2">
+                        {phaseItems.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-6 text-center">
+                            <ClipboardList className="mb-1 h-6 w-6 text-muted-foreground/40" />
+                            <p className="text-[11px] text-muted-foreground">등록된 항목이 없습니다</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-1.5">
+                            {phaseItems.map(item => (
+                              <div
+                                key={item.id}
+                                onClick={() => setSelectedWorkItemIdByPhase(prev => ({ ...prev, [phase.key]: item.id! }))}
+                                className={cn(
+                                  "group flex cursor-pointer items-start gap-2 rounded-lg border p-3 transition-all",
+                                  "hover:border-primary/30 hover:shadow-sm",
+                                  selectedWiId === item.id
+                                    ? "border-primary bg-primary/5 shadow-sm"
+                                    : "border-border bg-card"
+                                )}
+                              >
+                                <GripVertical className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground/50" />
+                                <div className="min-w-0 flex-1">
+                                  <div className="flex items-center gap-2">
+                                    <span className="truncate text-sm font-medium">{item.title}</span>
+                                  </div>
+                                  <div className="mt-1 flex items-center gap-2">
+                                    <Badge variant="secondary" className="h-5 px-1.5 text-[10px] font-normal">
+                                      {item.details?.length || item.detail_count || 0}개
+                                    </Badge>
+                                    <Badge
+                                      variant={item.is_required === "Y" ? "default" : "outline"}
+                                      className="h-5 px-1.5 text-[10px] font-normal"
+                                    >
+                                      {item.is_required === "Y" ? "필수" : "선택"}
+                                    </Badge>
+                                  </div>
+                                </div>
+                                <div className="flex shrink-0 gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+                                  <Button
+                                    variant="ghost" size="icon" className="h-6 w-6"
+                                    onClick={e => { e.stopPropagation(); openEditWorkItem(item); }}
+                                  >
+                                    <Pencil className="h-3 w-3" />
+                                  </Button>
+                                  <Button
+                                    variant="ghost" size="icon" className="h-6 w-6 text-destructive hover:text-destructive"
+                                    onClick={e => { e.stopPropagation(); handleDeleteWorkItem(item.id!, phase.key); }}
+                                  >
+                                    <Trash2 className="h-3 w-3" />
+                                  </Button>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+
+                      {/* 우측: 상세 테이블 */}
+                      <div className="flex-1 flex flex-col">
+                        {!selectedWi ? (
+                          <div className="flex h-full flex-col items-center justify-center text-center">
+                            <p className="text-sm text-muted-foreground">왼쪽에서 항목을 선택하세요</p>
+                          </div>
+                        ) : (
+                          <>
+                            {/* 상세 헤더 */}
+                            <div className="flex items-center justify-between border-b px-4 py-2">
+                              <div className="flex items-center gap-2">
+                                <span className="text-sm font-semibold">{selectedWi.title}</span>
+                                <Badge variant="secondary" className="text-[10px]">
+                                  {selectedWi.details?.length || 0}개
+                                </Badge>
+                              </div>
+                              <Button
+                                variant="outline" size="sm" className="h-7 gap-1 text-xs"
+                                onClick={() => openAddDetail(phase.key)}
+                              >
+                                <Plus className="h-3 w-3" />
+                                상세 추가
+                              </Button>
+                            </div>
+
+                            {/* 테이블 */}
+                            <div className="flex-1 overflow-y-auto">
+                              <table className="w-full text-xs">
+                                <thead className="sticky top-0 bg-muted/50">
+                                  <tr className="border-b">
+                                    <th className="w-12 px-2 py-2 text-center font-medium text-muted-foreground">순서</th>
+                                    <th className="w-20 px-2 py-2 text-left font-medium text-muted-foreground">유형</th>
+                                    <th className="px-2 py-2 text-left font-medium text-muted-foreground">내용</th>
+                                    <th className="w-14 px-2 py-2 text-center font-medium text-muted-foreground">필수</th>
+                                    <th className="w-16 px-2 py-2 text-center font-medium text-muted-foreground">관리</th>
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                  {(selectedWi.details || []).map((detail, idx) => (
+                                    <tr key={detail.id || idx} className="border-b transition-colors hover:bg-muted/30">
+                                      <td className="px-2 py-1.5 text-center text-muted-foreground">{idx + 1}</td>
+                                      <td className="px-2 py-1.5">
+                                        <Badge variant="outline" className="text-[10px] font-normal">
+                                          {getDetailTypeLabel(detail.detail_type || "checklist")}
+                                        </Badge>
+                                      </td>
+                                      <td className="px-2 py-1.5">{getContentSummary(detail)}</td>
+                                      <td className="px-2 py-1.5 text-center">
+                                        <Badge
+                                          variant={detail.is_required === "Y" ? "default" : "secondary"}
+                                          className="text-[10px] font-normal"
+                                        >
+                                          {detail.is_required === "Y" ? "필수" : "선택"}
+                                        </Badge>
+                                      </td>
+                                      <td className="px-2 py-1.5 text-center">
+                                        <div className="flex justify-center gap-0.5">
+                                          <Button
+                                            variant="ghost" size="icon" className="h-6 w-6"
+                                            onClick={() => openEditDetail(detail, phase.key)}
+                                          >
+                                            <Pencil className="h-3 w-3" />
+                                          </Button>
+                                          <Button
+                                            variant="ghost" size="icon" className="h-6 w-6 text-destructive hover:text-destructive"
+                                            onClick={() => handleDeleteDetail(detail.id!, phase.key)}
+                                          >
+                                            <Trash2 className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </td>
+                                    </tr>
+                                  ))}
+                                </tbody>
+                              </table>
+
+                              {(!selectedWi.details || selectedWi.details.length === 0) && (
+                                <div className="flex flex-col items-center justify-center py-8 text-center">
+                                  <p className="text-xs text-muted-foreground">
+                                    상세 항목이 없습니다. &quot;상세 추가&quot; 버튼을 클릭하여 추가하세요.
+                                  </p>
+                                </div>
+                              )}
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        <DialogFooter className="px-6 py-3 border-t shrink-0 flex items-center justify-between">
+          <div>
+            {isCustom && (
+              <Button variant="outline" size="sm" className="text-xs" onClick={handleReset}>
+                <RotateCcw className="w-3.5 h-3.5 mr-1.5" /> 원본으로 초기화
+              </Button>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" onClick={onClose}>닫기</Button>
+            <Button onClick={handleSave} disabled={saving || (!dirty && isCustom)}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
+            </Button>
+          </div>
+        </DialogFooter>
+
+        {/* 작업항목 추가/수정 다이얼로그 */}
+        <Dialog open={addItemOpen} onOpenChange={setAddItemOpen}>
+          <DialogContent className="max-w-[95vw] sm:max-w-[400px]" onClick={e => e.stopPropagation()}>
+            <DialogHeader>
+              <DialogTitle className="text-base">
+                작업항목 {editingWorkItem ? "수정" : "추가"}
+              </DialogTitle>
+              <DialogDescription className="text-xs">
+                {PHASES.find(p => p.key === addItemPhase)?.label} 단계에 작업항목을 {editingWorkItem ? "수정" : "추가"}합니다.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-3">
+              <div>
+                <Label className="text-xs">제목 *</Label>
+                <Input value={addItemTitle} onChange={e => setAddItemTitle(e.target.value)} placeholder="작업항목 제목" className="h-8 text-xs mt-1" />
+              </div>
+              <div className="flex items-center gap-2">
+                <Checkbox checked={addItemRequired === "Y"} onCheckedChange={v => setAddItemRequired(v ? "Y" : "N")} />
+                <Label className="text-xs">필수 항목</Label>
+              </div>
+            </div>
+            <DialogFooter className="gap-2">
+              <Button variant="outline" size="sm" onClick={() => setAddItemOpen(false)}>취소</Button>
+              <Button size="sm" onClick={handleSaveWorkItem}>{editingWorkItem ? "수정" : "추가"}</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* 상세 추가/수정 다이얼로그 (유형별 동적 필드) */}
+        <Dialog open={detailModalOpen} onOpenChange={v => { if (!v) setDetailModalOpen(false); }}>
+          <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
+            <DialogHeader>
+              <DialogTitle className="text-base">
+                상세 항목 {detailModalMode === "add" ? "추가" : "수정"}
+              </DialogTitle>
+              <DialogDescription className="text-xs">
+                상세 항목의 유형을 선택하고 내용을 입력하세요
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4">
+              {/* 유형 선택 */}
+              <div>
+                <Label className="text-xs">유형 <span className="text-destructive">*</span></Label>
+                <Select
+                  value={detailFormData.detail_type || ""}
+                  onValueChange={v => {
+                    setDetailFormData({
+                      detail_type: v,
+                      is_required: detailFormData.is_required || "Y",
+                    });
+                  }}
+                >
+                  <SelectTrigger className="mt-1 h-8 text-xs">
+                    <SelectValue placeholder="선택하세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {DETAIL_TYPES.map(dt => (
+                      <SelectItem key={dt.value} value={dt.value} className="text-xs">{dt.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* 체크리스트 */}
+              {detailFormData.detail_type === "checklist" && (
+                <div>
+                  <Label className="text-xs">체크 내용 <span className="text-destructive">*</span></Label>
+                  <Input
+                    value={detailFormData.content || ""}
+                    onChange={e => updateDetailField("content", e.target.value)}
+                    placeholder="예: 전원 상태 확인"
+                    className="mt-1 h-8 text-xs"
+                  />
+                </div>
+              )}
+
+              {/* 검사항목 */}
+              {detailFormData.detail_type === "inspection" && (
+                <>
+                  <div>
+                    <Label className="text-xs">검사 항목명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="예: 외경 치수"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <Label className="text-xs">검사 방법</Label>
+                      <Input
+                        value={detailFormData.inspection_method || ""}
+                        onChange={e => updateDetailField("inspection_method", e.target.value)}
+                        placeholder="예: 마이크로미터"
+                        className="mt-1 h-8 text-xs"
+                      />
+                    </div>
+                    <div>
+                      <Label className="text-xs">단위</Label>
+                      <Select
+                        value={detailFormData.unit || ""}
+                        onValueChange={v => updateDetailField("unit", v)}
+                      >
+                        <SelectTrigger className="mt-1 h-8 text-xs">
+                          <SelectValue placeholder="단위 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {UNIT_OPTIONS.map(u => (
+                            <SelectItem key={u} value={u}>{u}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="rounded-lg border bg-muted/30 p-3">
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.base_value || ""}
+                          onChange={e => updateDetailField("base_value", e.target.value)}
+                          placeholder="기준값"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                      <span className="text-sm font-semibold text-muted-foreground">&plusmn;</span>
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.tolerance || ""}
+                          onChange={e => updateDetailField("tolerance", e.target.value)}
+                          placeholder="오차범위"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {/* 작업절차 */}
+              {detailFormData.detail_type === "procedure" && (
+                <>
+                  <div>
+                    <Label className="text-xs">작업 내용 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="예: 자재 투입"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs">소요 시간 (분)</Label>
+                    <Input
+                      type="number"
+                      value={detailFormData.duration_minutes ?? ""}
+                      onChange={e => updateDetailField("duration_minutes", e.target.value ? Number(e.target.value) : undefined)}
+                      placeholder="예: 5"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                </>
+              )}
+
+              {/* 직접입력 */}
+              {detailFormData.detail_type === "input" && (
+                <>
+                  <div>
+                    <Label className="text-xs">입력 항목명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="예: 작업자 의견"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs">입력 타입</Label>
+                    <Select
+                      value={detailFormData.input_type || "text"}
+                      onValueChange={v => updateDetailField("input_type", v)}
+                    >
+                      <SelectTrigger className="mt-1 h-8 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {INPUT_TYPES.map(t => (
+                          <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </>
+              )}
+
+              {/* 문서참조 */}
+              {detailFormData.detail_type === "lookup" && (
+                <div className="flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2.5">
+                  <span className="text-xs text-blue-800">
+                    해당 품목에 등록된 문서를 자동으로 불러옵니다.
+                  </span>
+                </div>
+              )}
+
+              {/* 설비점검 */}
+              {detailFormData.detail_type === "equip_inspection" && (
+                <div>
+                  <Label className="text-xs">점검 내용</Label>
+                  <Input
+                    value={detailFormData.content || ""}
+                    onChange={e => updateDetailField("content", e.target.value)}
+                    placeholder="예: 설비 가동 전 안전 점검"
+                    className="mt-1 h-8 text-xs"
+                  />
+                </div>
+              )}
+
+              {/* 설비조건 */}
+              {detailFormData.detail_type === "equip_condition" && (
+                <>
+                  <div>
+                    <Label className="text-xs">조건명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="조건명 (예: 온도, 압력, RPM)"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div className="rounded-lg border bg-muted/30 p-3 space-y-3">
+                    <div className="flex gap-2">
+                      <div className="flex-[0.6]">
+                        <Select
+                          value={detailFormData.condition_unit || ""}
+                          onValueChange={v => updateDetailField("condition_unit", v)}
+                        >
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="단위" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {UNIT_OPTIONS.map(u => (
+                              <SelectItem key={u} value={u}>{u}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.condition_base_value || ""}
+                          onChange={e => updateDetailField("condition_base_value", e.target.value)}
+                          placeholder="기준값"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                      <span className="text-sm font-semibold text-muted-foreground">&plusmn;</span>
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.condition_tolerance || ""}
+                          onChange={e => updateDetailField("condition_tolerance", e.target.value)}
+                          placeholder="오차범위"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {/* 실적등록 */}
+              {detailFormData.detail_type === "production_result" && (
+                <div className="rounded-lg border border-sky-200 bg-sky-50 p-3">
+                  <p className="text-xs font-semibold text-sky-800">작업수량 / 불량수량 / 양품수량</p>
+                  <p className="mt-1 text-[11px] text-muted-foreground">실적 입력 항목이 자동으로 생성됩니다.</p>
+                </div>
+              )}
+
+              {/* 자재투입 */}
+              {detailFormData.detail_type === "material_input" && (
+                <div className="rounded-lg border border-sky-200 bg-sky-50 p-3">
+                  <p className="text-xs font-semibold text-sky-800">BOM 구성 자재 (자동 연동)</p>
+                  <p className="mt-1 text-[11px] text-muted-foreground">품목에 등록된 BOM 구성 자재가 자동으로 적용됩니다.</p>
+                </div>
+              )}
+
+              {/* 필수 여부 (모든 유형 공통) */}
+              {detailFormData.detail_type && (
+                <div>
+                  <Label className="text-xs">필수 여부</Label>
+                  <Select
+                    value={detailFormData.is_required || "Y"}
+                    onValueChange={v => updateDetailField("is_required", v)}
+                  >
+                    <SelectTrigger className="mt-1 h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y">필수</SelectItem>
+                      <SelectItem value="N">선택</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+
+              {/* 비고 (모든 유형 공통) */}
+              {detailFormData.detail_type && (
+                <div>
+                  <Label className="text-xs">비고</Label>
+                  <Input
+                    value={detailFormData.remark || ""}
+                    onChange={e => updateDetailField("remark", e.target.value)}
+                    placeholder="비고 입력"
+                    className="mt-1 h-8 text-xs"
+                  />
+                </div>
+              )}
+            </div>
+
+            <DialogFooter className="gap-2">
+              <Button variant="outline" size="sm" onClick={() => setDetailModalOpen(false)}>취소</Button>
+              <Button size="sm" onClick={handleSaveDetail}>{detailModalMode === "add" ? "추가" : "수정"}</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/production/work-instruction/page.tsx b/frontend/app/(main)/COMPANY_8/production/work-instruction/page.tsx
new file mode 100644
index 00000000..08ace7ec
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/production/work-instruction/page.tsx
@@ -0,0 +1,843 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Plus, Trash2, Save, X, ChevronLeft, ChevronRight, Search, Loader2, Wrench, Pencil, CheckCircle2, ArrowRight, Check, ChevronsUpDown, ClipboardCheck, Inbox, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+// API: /work-instruction/*
+import {
+  getWorkInstructionList, previewWorkInstructionNo, saveWorkInstruction, deleteWorkInstructions,
+  getWIItemSource, getWISalesOrderSource, getWIProductionPlanSource, getEquipmentList, getEmployeeList,
+  getRoutingVersions, RoutingVersionData,
+} from "@/lib/api/workInstruction";
+import { WorkStandardEditModal } from "./WorkStandardEditModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "work_instruction_no", label: "작업지시번호" },
+  { key: "status", label: "상태" },
+  { key: "progress", label: "진행현황" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "qty", label: "수량" },
+  { key: "equipment", label: "설비" },
+  { key: "routing", label: "라우팅" },
+  { key: "work_team", label: "작업조" },
+  { key: "worker", label: "작업자" },
+  { key: "start_date", label: "시작일" },
+  { key: "end_date", label: "완료일" },
+  { key: "actions", label: "작업" },
+];
+
+type SourceType = "production" | "order" | "item";
+
+const STATUS_BADGE: Record<string, { label: string; cls: string }> = {
+  "일반": { label: "일반", cls: "bg-primary/10 text-primary border-primary/20" },
+  "긴급": { label: "긴급", cls: "bg-destructive/10 text-destructive border-destructive/20" },
+};
+const PROGRESS_BADGE: Record<string, { label: string; cls: string }> = {
+  "대기": { label: "대기", cls: "bg-warning/10 text-warning" },
+  "진행중": { label: "진행중", cls: "bg-primary/10 text-primary" },
+  "완료": { label: "완료", cls: "bg-success/10 text-success" },
+};
+
+interface EquipmentOption { id: string; equipment_code: string; equipment_name: string; }
+interface EmployeeOption { user_id: string; user_name: string; dept_name: string | null; }
+interface SelectedItem {
+  itemCode: string; itemName: string; spec: string; qty: number; remark: string;
+  sourceType: SourceType; sourceTable: string; sourceId: string | number;
+  routing?: string; routingOptions?: RoutingVersionData[];
+}
+
+export default function WorkInstructionPage() {
+  const ts = useTableSettings("c16-work-instruction", "work_instruction", GRID_COLUMNS);
+  const [orders, setOrders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [equipmentOptions, setEquipmentOptions] = useState<EquipmentOption[]>([]);
+  const [employeeOptions, setEmployeeOptions] = useState<EmployeeOption[]>([]);
+
+  // 검색
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 1단계: 등록 모달
+  const [isRegModalOpen, setIsRegModalOpen] = useState(false);
+  const [regSourceType, setRegSourceType] = useState<SourceType | "">("");
+  const [regSourceData, setRegSourceData] = useState<any[]>([]);
+  const [regSourceLoading, setRegSourceLoading] = useState(false);
+  const [regKeyword, setRegKeyword] = useState("");
+  const [regCheckedIds, setRegCheckedIds] = useState<Set<string>>(new Set());
+  const [regMergeSameItem, setRegMergeSameItem] = useState(true);
+  const [regPage, setRegPage] = useState(1);
+  const [regPageSize] = useState(20);
+  const [regTotalCount, setRegTotalCount] = useState(0);
+
+  // 2단계: 확인 모달
+  const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
+  const [confirmItems, setConfirmItems] = useState<SelectedItem[]>([]);
+  const [confirmWiNo, setConfirmWiNo] = useState("");
+  const [confirmStatus, setConfirmStatus] = useState("일반");
+  const [confirmStartDate, setConfirmStartDate] = useState("");
+  const [confirmEndDate, setConfirmEndDate] = useState("");
+  const nv = (v: string) => v || "none";
+  const fromNv = (v: string) => v === "none" ? "" : v;
+  const [confirmEquipmentId, setConfirmEquipmentId] = useState("");
+  const [confirmWorkTeam, setConfirmWorkTeam] = useState("");
+  const [confirmWorker, setConfirmWorker] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  // 등록 확인 모달 — 인라인 추가 폼
+  const [confirmAddQty, setConfirmAddQty] = useState("");
+  const [confirmAddWorkerOpen, setConfirmAddWorkerOpen] = useState(false);
+
+  // 수정 모달
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [editOrder, setEditOrder] = useState<any>(null);
+  const [editItems, setEditItems] = useState<SelectedItem[]>([]);
+  const [editStatus, setEditStatus] = useState("일반");
+  const [editStartDate, setEditStartDate] = useState("");
+  const [editEndDate, setEditEndDate] = useState("");
+  const [editEquipmentId, setEditEquipmentId] = useState("");
+  const [editWorkTeam, setEditWorkTeam] = useState("");
+  const [editWorker, setEditWorker] = useState("");
+  const [editRemark, setEditRemark] = useState("");
+  const [editSaving, setEditSaving] = useState(false);
+  const [addQty, setAddQty] = useState("");
+  const [addEquipment, setAddEquipment] = useState("");
+  const [addWorkTeam, setAddWorkTeam] = useState("");
+  const [addWorker, setAddWorker] = useState("");
+  const [confirmWorkerOpen, setConfirmWorkerOpen] = useState(false);
+  const [editWorkerOpen, setEditWorkerOpen] = useState(false);
+  const [addWorkerOpen, setAddWorkerOpen] = useState(false);
+
+  // 라우팅 관련 상태
+  const [confirmRouting, setConfirmRouting] = useState("");
+  const [confirmRoutingOptions, setConfirmRoutingOptions] = useState<RoutingVersionData[]>([]);
+  const [editRouting, setEditRouting] = useState("");
+  const [editRoutingOptions, setEditRoutingOptions] = useState<RoutingVersionData[]>([]);
+
+  // 공정작업기준 모달 상태
+  const [wsModalOpen, setWsModalOpen] = useState(false);
+  const [wsModalWiNo, setWsModalWiNo] = useState("");
+  const [wsModalRoutingId, setWsModalRoutingId] = useState("");
+  const [wsModalRoutingName, setWsModalRoutingName] = useState("");
+  const [wsModalItemName, setWsModalItemName] = useState("");
+  const [wsModalItemCode, setWsModalItemCode] = useState("");
+
+  useEffect(() => {
+    getEquipmentList().then(r => { if (r.success) setEquipmentOptions(r.data || []); });
+    getEmployeeList().then(r => { if (r.success) setEmployeeOptions(r.data || []); });
+  }, []);
+
+  const fetchOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: any = {};
+      for (const f of searchFilters) {
+        if (f.columnName === "start_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split("|");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status" && f.value) {
+          params.status = f.value;
+        } else if (f.columnName === "progress" && f.value) {
+          params.progressStatus = f.value;
+        } else if (f.columnName === "work_instruction_no" && f.value) {
+          params.keyword = f.value;
+        } else if (f.columnName === "item_name" && f.value) {
+          params.keyword = f.value;
+        }
+      }
+      const r = await getWorkInstructionList(params);
+      if (r.success) setOrders(r.data || []);
+    } catch {} finally { setLoading(false); }
+  }, [searchFilters]);
+
+  useEffect(() => { fetchOrders(); }, [fetchOrders]);
+
+  // ─── 1단계 등록 ───
+  const openRegModal = () => {
+    setRegSourceType("production"); setRegSourceData([]); setRegKeyword(""); setRegCheckedIds(new Set());
+    setRegPage(1); setRegTotalCount(0); setRegMergeSameItem(true); setIsRegModalOpen(true);
+  };
+
+  const fetchRegSource = useCallback(async (pageOverride?: number) => {
+    if (!regSourceType) return;
+    setRegSourceLoading(true);
+    try {
+      const p = pageOverride ?? regPage;
+      const params: any = { page: p, pageSize: regPageSize };
+      if (regKeyword.trim()) params.keyword = regKeyword.trim();
+      let r;
+      switch (regSourceType) {
+        case "production": r = await getWIProductionPlanSource(params); break;
+        case "order": r = await getWISalesOrderSource(params); break;
+        case "item": r = await getWIItemSource(params); break;
+      }
+      if (r?.success) { setRegSourceData(r.data || []); setRegTotalCount(r.totalCount || 0); }
+    } catch {} finally { setRegSourceLoading(false); }
+  }, [regSourceType, regKeyword, regPage, regPageSize]);
+
+  useEffect(() => { if (isRegModalOpen && regSourceType) { setRegPage(1); setRegCheckedIds(new Set()); fetchRegSource(1); } }, [regSourceType]);
+
+  const getRegId = (item: any) => regSourceType === "item" ? (item.item_code || item.id) : String(item.id);
+  const toggleRegItem = (id: string) => { setRegCheckedIds(prev => { const n = new Set(prev); if (n.has(id)) n.delete(id); else n.add(id); return n; }); };
+  const toggleRegAll = () => { if (regCheckedIds.size === regSourceData.length) setRegCheckedIds(new Set()); else setRegCheckedIds(new Set(regSourceData.map(getRegId))); };
+
+  const applyRegistration = () => {
+    if (regCheckedIds.size === 0) { alert("품목을 선택해주세요."); return; }
+    const items: SelectedItem[] = [];
+    for (const item of regSourceData) {
+      if (!regCheckedIds.has(getRegId(item))) continue;
+      if (regSourceType === "item") items.push({ itemCode: item.item_code, itemName: item.item_name || "", spec: item.spec || "", qty: 1, remark: "", sourceType: "item", sourceTable: "item_info", sourceId: item.item_code });
+      else if (regSourceType === "order") items.push({ itemCode: item.item_code || "", itemName: item.item_name || "", spec: item.spec || "", qty: Number(item.qty || 1), remark: "", sourceType: "order", sourceTable: "sales_order_detail", sourceId: item.id });
+      else items.push({ itemCode: item.item_code || "", itemName: item.item_name || "", spec: "", qty: Number(item.plan_qty || 1), remark: "", sourceType: "production", sourceTable: "production_plan_mng", sourceId: item.id });
+    }
+
+    // 동일품목 합산
+    if (regMergeSameItem) {
+      const merged = new Map<string, SelectedItem>();
+      for (const it of items) {
+        const key = it.itemCode;
+        if (merged.has(key)) { merged.get(key)!.qty += it.qty; }
+        else { merged.set(key, { ...it }); }
+      }
+      setConfirmItems(Array.from(merged.values()));
+    } else {
+      setConfirmItems(items);
+    }
+
+    setConfirmWiNo("불러오는 중...");
+    setConfirmStatus("일반"); setConfirmStartDate(new Date().toISOString().split("T")[0]);
+    setConfirmEndDate(""); setConfirmEquipmentId(""); setConfirmWorkTeam(""); setConfirmWorker("");
+    setConfirmRouting(""); setConfirmRoutingOptions([]);
+    previewWorkInstructionNo().then(r => { if (r.success) setConfirmWiNo(r.instructionNo); else setConfirmWiNo("(자동생성)"); }).catch(() => setConfirmWiNo("(자동생성)"));
+
+    // 품목별 라우팅 옵션 로드
+    const finalItems = regMergeSameItem ? Array.from(new Map(items.map(i => [i.itemCode, i])).values()) : items;
+    const uniqueItemCodes = [...new Set(finalItems.map(i => i.itemCode).filter(Boolean))];
+    for (const ic of uniqueItemCodes) {
+      getRoutingVersions("__new__", ic).then(r => {
+        if (r.success && r.data) {
+          setConfirmItems(prev => prev.map(it => {
+            if (it.itemCode !== ic) return it;
+            const defaultRv = r.data.find(rv => rv.is_default);
+            return { ...it, routingOptions: r.data, routing: defaultRv?.id || "" };
+          }));
+        }
+      }).catch(() => {});
+    }
+
+    setIsRegModalOpen(false); setIsConfirmModalOpen(true);
+  };
+
+  // 등록 확인 모달 — 인라인 품목 추가
+  const addConfirmItem = () => {
+    if (!confirmAddQty || Number(confirmAddQty) <= 0) { alert("수량을 입력해주세요."); return; }
+    const firstItem = confirmItems[0];
+    setConfirmItems(prev => [...prev, {
+      itemCode: firstItem?.itemCode || "", itemName: firstItem?.itemName || "", spec: firstItem?.spec || "",
+      qty: Number(confirmAddQty), remark: "",
+      sourceType: "item" as SourceType, sourceTable: "item_info", sourceId: firstItem?.itemCode || "",
+    }]);
+    setConfirmAddQty("");
+  };
+
+  // ─── 2단계 최종 적용 ───
+  const finalizeRegistration = async () => {
+    if (confirmItems.length === 0) { alert("품목이 없습니다."); return; }
+    setSaving(true);
+    try {
+      const payload = {
+        status: confirmStatus, startDate: confirmStartDate, endDate: confirmEndDate,
+        equipmentId: confirmEquipmentId, workTeam: confirmWorkTeam, worker: confirmWorker,
+        routing: confirmRouting || null,
+        items: confirmItems.map(i => ({ itemNumber: i.itemCode, itemCode: i.itemCode, qty: String(i.qty), remark: i.remark, sourceTable: i.sourceTable, sourceId: String(i.sourceId), partCode: i.itemCode, routing: i.routing || null })),
+      };
+      const r = await saveWorkInstruction(payload);
+      if (r.success) { setIsConfirmModalOpen(false); fetchOrders(); alert("작업지시가 등록되었습니다."); }
+      else alert(r.message || "저장 실패");
+    } catch (e: any) { alert(e.message || "저장 실패"); } finally { setSaving(false); }
+  };
+
+  // ─── 수정 모달 ───
+  const openEditModal = (order: any) => {
+    const wiNo = order.work_instruction_no;
+    const relatedDetails = orders.filter(o => o.work_instruction_no === wiNo);
+    setEditOrder(order); setEditStatus(order.status || "일반");
+    setEditStartDate(order.start_date || ""); setEditEndDate(order.end_date || "");
+    setEditEquipmentId(order.equipment_id || ""); setEditWorkTeam(order.work_team || "");
+    setEditWorker(order.worker || ""); setEditRemark(order.wi_remark || "");
+    const items: SelectedItem[] = relatedDetails.map((d: any) => ({
+      itemCode: d.item_number || d.part_code || "", itemName: d.item_name || "", spec: d.item_spec || "",
+      qty: Number(d.detail_qty || 0), remark: d.detail_remark || "",
+      sourceType: (d.source_table === "sales_order_detail" ? "order" : d.source_table === "production_plan_mng" ? "production" : "item") as SourceType,
+      sourceTable: d.source_table || "item_info", sourceId: d.source_id || "",
+      routing: d.detail_routing_version_id || order.routing_version_id || "",
+      routingOptions: [],
+    }));
+    setEditItems(items);
+    setAddQty(""); setAddEquipment(""); setAddWorkTeam(""); setAddWorker("");
+    setEditRouting(order.routing_version_id || "");
+    setEditRoutingOptions([]);
+
+    // 품목별 라우팅 옵션 로드
+    const uniqueItemCodes = [...new Set(items.map(i => i.itemCode).filter(Boolean))];
+    for (const ic of uniqueItemCodes) {
+      getRoutingVersions(wiNo, ic).then(r => {
+        if (r.success && r.data) {
+          setEditItems(prev => prev.map(it => {
+            if (it.itemCode !== ic) return it;
+            const opts = r.data;
+            const hasRouting = it.routing && opts.some(rv => rv.id === it.routing);
+            return {
+              ...it,
+              routingOptions: opts,
+              routing: hasRouting ? it.routing : (opts.find(rv => rv.is_default)?.id || it.routing || ""),
+            };
+          }));
+        }
+      }).catch(() => {});
+    }
+
+    setIsEditModalOpen(true);
+  };
+
+  const addEditItem = () => {
+    if (!addQty || Number(addQty) <= 0) { alert("수량을 입력해주세요."); return; }
+    setEditItems(prev => [...prev, {
+      itemCode: editOrder?.item_number || "", itemName: editOrder?.item_name || "", spec: editOrder?.item_spec || "",
+      qty: Number(addQty), remark: "", sourceType: "item", sourceTable: "item_info", sourceId: editOrder?.item_number || "",
+    }]);
+    setAddQty("");
+  };
+
+  const saveEdit = async () => {
+    if (!editOrder || editItems.length === 0) { alert("품목이 없습니다."); return; }
+    setEditSaving(true);
+    try {
+      const payload = {
+        id: editOrder.wi_id, status: editStatus, startDate: editStartDate, endDate: editEndDate,
+        equipmentId: editEquipmentId, workTeam: editWorkTeam, worker: editWorker, remark: editRemark,
+        routing: editRouting || null,
+        items: editItems.map(i => ({ itemNumber: i.itemCode, itemCode: i.itemCode, qty: String(i.qty), remark: i.remark, sourceTable: i.sourceTable, sourceId: String(i.sourceId), partCode: i.itemCode, routing: i.routing || null })),
+      };
+      const r = await saveWorkInstruction(payload);
+      if (r.success) { setIsEditModalOpen(false); fetchOrders(); alert("수정되었습니다."); }
+      else alert(r.message || "저장 실패");
+    } catch (e: any) { alert(e.message || "저장 실패"); } finally { setEditSaving(false); }
+  };
+
+  const handleDelete = async (wiId: string) => {
+    if (!confirm("이 작업지시를 삭제하시겠습니까?")) return;
+    const r = await deleteWorkInstructions([wiId]);
+    if (r.success) { fetchOrders(); } else alert(r.message || "삭제 실패");
+  };
+
+  const getProgress = (o: any) => {
+    const t = Number(o.total_qty || 0), c = Number(o.completed_qty || 0);
+    return t === 0 ? 0 : Math.min(100, Math.round((c / t) * 100));
+  };
+  const getProgressLabel = (o: any) => { const p = getProgress(o); if (o.progress_status) return o.progress_status; if (p >= 100) return "완료"; if (p > 0) return "진행중"; return "대기"; };
+  const totalRegPages = Math.max(1, Math.ceil(regTotalCount / regPageSize));
+
+  const getDisplayNo = (o: any) => {
+    const cnt = Number(o.detail_count || 1);
+    const seq = Number(o.detail_seq || 1);
+    if (cnt <= 1) return o.work_instruction_no || "-";
+    return `${o.work_instruction_no}-${String(seq).padStart(2, "0")}`;
+  };
+
+  const openWorkStandardModal = (wiNo: string, routingVersionId: string, routingName: string, itemName: string, itemCode: string) => {
+    if (!routingVersionId) { alert("라우팅이 선택되지 않았습니다."); return; }
+    setWsModalWiNo(wiNo);
+    setWsModalRoutingId(routingVersionId);
+    setWsModalRoutingName(routingName);
+    setWsModalItemName(itemName);
+    setWsModalItemCode(itemCode);
+    setWsModalOpen(true);
+  };
+
+  const getWorkerName = (userId: string) => {
+    if (!userId) return "-";
+    const emp = employeeOptions.find(e => e.user_id === userId);
+    return emp ? emp.user_name : userId;
+  };
+
+  const WorkerCombobox = ({ value, onChange, open, onOpenChange, className, triggerClassName }: {
+    value: string; onChange: (v: string) => void; open: boolean; onOpenChange: (v: boolean) => void;
+    className?: string; triggerClassName?: string;
+  }) => (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open}
+          className={cn("w-full justify-between font-normal", triggerClassName || "h-9 text-sm")}>
+          {value ? (employeeOptions.find(e => e.user_id === value)?.user_name || value) : "작업자 선택"}
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="이름 검색..." className="text-xs" />
+          <CommandList>
+            <CommandEmpty className="text-xs py-4 text-center">사원을 찾을 수 없습니다</CommandEmpty>
+            <CommandGroup>
+              <CommandItem value="__none__" onSelect={() => { onChange(""); onOpenChange(false); }} className="text-xs">
+                <Check className={cn("mr-2 h-3.5 w-3.5", !value ? "opacity-100" : "opacity-0")} />
+                선택 안 함
+              </CommandItem>
+              {employeeOptions.map(emp => (
+                <CommandItem key={emp.user_id} value={`${emp.user_name} ${emp.user_id}`}
+                  onSelect={() => { onChange(emp.user_id); onOpenChange(false); }} className="text-xs">
+                  <Check className={cn("mr-2 h-3.5 w-3.5", value === emp.user_id ? "opacity-100" : "opacity-0")} />
+                  {emp.user_name}{emp.dept_name ? ` (${emp.dept_name})` : ""}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-4rem)] p-3 gap-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName="work_instruction"
+        filterId="c16-work-instruction"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={new Set(orders.map(o => o.work_instruction_no)).size}
+      />
+
+      {/* 메인 테이블 */}
+      <div className="flex-1 overflow-hidden border bg-card rounded-lg flex flex-col">
+        <div className="flex flex-col h-full">
+          {/* 패널 헤더 */}
+          <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/30 shrink-0">
+            <div className="flex items-center gap-2">
+              <Wrench className="w-4 h-4 text-muted-foreground" />
+              <span className="text-[13px] font-bold text-foreground">작업지시 목록</span>
+              <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                {new Set(orders.map(o => o.work_instruction_no)).size}건 ({orders.length}행)
+              </span>
+              {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button size="sm" onClick={openRegModal}>
+                <Plus className="w-3.5 h-3.5" /> 작업지시 등록
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                <Settings2 className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          {/* 테이블 */}
+          <EDataTable
+            columns={[
+              { key: "work_instruction_no", label: "작업지시번호", width: "w-[150px]", render: (_v, row) => <span className="font-mono text-[13px] font-medium">{getDisplayNo(row)}</span> },
+              { key: "status", label: "상태", width: "w-[70px]", align: "center", render: (v) => {
+                const sBadge = STATUS_BADGE[v] || STATUS_BADGE["일반"];
+                return <Badge variant="outline" className={cn("text-[10px]", sBadge.cls)}>{sBadge.label}</Badge>;
+              }},
+              { key: "progress", label: "진행현황", width: "w-[100px]", align: "center", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return <span className="text-[10px] text-muted-foreground">↑</span>;
+                const pct = getProgress(row);
+                const pLabel = getProgressLabel(row);
+                const pBadge = PROGRESS_BADGE[pLabel] || PROGRESS_BADGE["대기"];
+                return (
+                  <div className="flex flex-col items-center gap-1">
+                    <Badge variant="secondary" className={cn("text-[10px]", pBadge.cls)}>{pBadge.label}</Badge>
+                    <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
+                      <div className={cn("h-full rounded-full transition-all", pct >= 100 ? "bg-success" : pct > 0 ? "bg-primary" : "bg-muted-foreground/30")} style={{ width: `${pct}%` }} />
+                    </div>
+                    <span className="text-[10px] text-muted-foreground">{pct}%</span>
+                  </div>
+                );
+              }},
+              { key: "item_name", label: "품목명", render: (_v, row) => row.item_name || row.item_number || "-" },
+              { key: "item_spec", label: "규격", width: "w-[100px]" },
+              { key: "detail_qty", label: "수량", width: "w-[80px]", align: "right", formatNumber: true },
+              { key: "equipment_name", label: "설비", width: "w-[120px]", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "routing", label: "라우팅", width: "w-[120px]", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return "";
+                if (row.routing_version_id) {
+                  return (
+                    <button
+                      className="text-primary underline underline-offset-2 hover:text-primary/80 cursor-pointer text-xs text-left"
+                      onClick={e => {
+                        e.stopPropagation();
+                        openWorkStandardModal(row.work_instruction_no, row.routing_version_id, row.routing_name || "", row.item_name || row.item_number || "", row.item_number || "");
+                      }}
+                    >
+                      {row.routing_name || "라우팅"} <ClipboardCheck className="w-3 h-3 inline ml-0.5" />
+                    </button>
+                  );
+                }
+                return <span className="text-muted-foreground">-</span>;
+              }},
+              { key: "work_team", label: "작업조", width: "w-[80px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "worker", label: "작업자", width: "w-[100px]", render: (v, row) => Number(row.detail_seq) === 1 ? getWorkerName(v) : "" },
+              { key: "start_date", label: "시작일", width: "w-[100px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "end_date", label: "완료일", width: "w-[100px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "actions", label: "작업", width: "w-[150px]", align: "center", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return null;
+                return (
+                  <div className="flex items-center justify-center gap-1">
+                    <Button variant="ghost" size="sm" className="h-7 text-xs px-2" onClick={() => openEditModal(row)}><Pencil className="w-3 h-3" /> 수정</Button>
+                    <Button variant="ghost" size="sm" className="h-7 text-xs px-2 text-destructive hover:text-destructive" onClick={() => handleDelete(row.wi_id)}><Trash2 className="w-3 h-3" /></Button>
+                  </div>
+                );
+              }},
+            ] as EDataTableColumn[]}
+            data={ts.groupData(orders)}
+            rowKey={(row) => `${row.wi_id}-${row.detail_id}`}
+            loading={loading}
+            emptyMessage="등록된 작업지시가 없어요"
+            showPagination
+            draggableColumns
+            columnOrderKey="c16-work-instruction"
+          />
+        </div>
+      </div>
+
+      {/* ── 1단계: 등록 모달 ── */}
+      <Dialog open={isRegModalOpen} onOpenChange={setIsRegModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[1200px] h-[80vh] flex flex-col p-0 gap-0">
+          <DialogHeader className="px-6 py-4 border-b shrink-0">
+            <DialogTitle className="text-base flex items-center gap-2"><Plus className="w-4 h-4" /> 작업지시 등록</DialogTitle>
+            <DialogDescription className="text-xs text-muted-foreground">근거를 선택하고 품목을 체크한 후 "작업지시 적용" 버튼을 눌러주세요.</DialogDescription>
+          </DialogHeader>
+
+          <div className="px-6 py-3 border-b bg-muted/30 flex items-center gap-3 flex-wrap shrink-0">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground whitespace-nowrap">근거</span>
+            <Select value={regSourceType} onValueChange={v => setRegSourceType(v as SourceType)}>
+              <SelectTrigger className="h-9 w-[160px]"><SelectValue placeholder="선택" /></SelectTrigger>
+              <SelectContent><SelectItem value="production">생산계획</SelectItem><SelectItem value="order">수주</SelectItem><SelectItem value="item">품목정보</SelectItem></SelectContent>
+            </Select>
+            {regSourceType && (<>
+              <Input placeholder="검색..." value={regKeyword} onChange={e => setRegKeyword(e.target.value)} className="h-9 w-[220px]"
+                onKeyDown={e => { if (e.key === "Enter") { setRegPage(1); fetchRegSource(1); } }} />
+              <Button size="sm" className="h-9" onClick={() => { setRegPage(1); fetchRegSource(1); }} disabled={regSourceLoading}>
+                {regSourceLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}<span className="ml-1.5">조회</span>
+              </Button>
+            </>)}
+            <div className="flex-1" />
+            <label className="flex items-center gap-1.5 cursor-pointer select-none">
+              <Checkbox checked={regMergeSameItem} onCheckedChange={v => setRegMergeSameItem(!!v)} />
+              <span className="text-xs font-semibold text-foreground">동일품목 합산</span>
+            </label>
+          </div>
+
+          <div className="flex-1 overflow-auto px-6 py-4">
+            {!regSourceType ? (
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-12 h-12 flex items-center justify-center mb-4">
+                  <Search className="w-6 h-6 text-muted-foreground/40" />
+                </div>
+                <p className="text-sm font-medium text-muted-foreground mb-1">근거를 선택해주세요</p>
+                <p className="text-xs text-muted-foreground/60">근거를 선택하고 검색하면 품목이 표시돼요</p>
+              </div>
+            ) : regSourceLoading ? (
+              <div className="flex items-center justify-center h-full"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
+            ) : regSourceData.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-12 h-12 flex items-center justify-center mb-4">
+                  <Inbox className="w-6 h-6 text-muted-foreground/40" />
+                </div>
+                <p className="text-sm font-medium text-muted-foreground mb-1">검색 결과가 없어요</p>
+                <p className="text-xs text-muted-foreground/60">다른 키워드로 검색해주세요</p>
+              </div>
+            ) : (
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground"><Checkbox checked={regSourceData.length > 0 && regCheckedIds.size === regSourceData.length} onCheckedChange={toggleRegAll} /></TableHead>
+                    {regSourceType === "item" && <><TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead><TableHead>품목명</TableHead><TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead></>}
+                    {regSourceType === "order" && <><TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수주번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[100px]">규격</TableHead><TableHead className="w-[80px] text-right">수량</TableHead><TableHead className="w-[100px]">납기일</TableHead></>}
+                    {regSourceType === "production" && <><TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[80px] text-right">계획수량</TableHead><TableHead className="w-[90px]">시작일</TableHead><TableHead className="w-[90px]">완료일</TableHead><TableHead className="w-[100px]">설비</TableHead></>}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {regSourceData.map((item, idx) => {
+                    const id = getRegId(item);
+                    const checked = regCheckedIds.has(id);
+                    return (
+                      <TableRow key={`${regSourceType}-${id}-${idx}`} className={cn("cursor-pointer hover:bg-muted/30", checked && "bg-primary/5")} onClick={() => toggleRegItem(id)}>
+                        <TableCell className="text-center" onClick={e => e.stopPropagation()}><Checkbox checked={checked} onCheckedChange={() => toggleRegItem(id)} /></TableCell>
+                        {regSourceType === "item" && <><TableCell className="text-[13px] font-medium">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-[13px]">{item.spec || "-"}</TableCell></>}
+                        {regSourceType === "order" && <><TableCell className="text-[13px]">{item.order_no}</TableCell><TableCell className="text-[13px]">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-[13px]">{item.spec || "-"}</TableCell><TableCell className="text-right text-[13px]">{Number(item.qty || 0).toLocaleString()}</TableCell><TableCell className="text-[13px]">{item.due_date || "-"}</TableCell></>}
+                        {regSourceType === "production" && <><TableCell className="text-[13px]">{item.plan_no}</TableCell><TableCell className="text-[13px]">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-right text-[13px]">{Number(item.plan_qty || 0).toLocaleString()}</TableCell><TableCell className="text-[13px]">{item.start_date ? String(item.start_date).split("T")[0] : "-"}</TableCell><TableCell className="text-[13px]">{item.end_date ? String(item.end_date).split("T")[0] : "-"}</TableCell><TableCell className="text-[13px]">{item.equipment_name || "-"}</TableCell></>}
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            )}
+          </div>
+
+          {regTotalCount > 0 && (
+            <div className="px-6 py-2 border-t bg-muted/10 flex items-center justify-between shrink-0">
+              <span className="text-xs text-muted-foreground">총 {regTotalCount}건 (선택: {regCheckedIds.size}건)</span>
+              <div className="flex items-center gap-1">
+                <Button variant="ghost" size="icon" className="h-7 w-7" disabled={regPage <= 1} onClick={() => { const p = regPage - 1; setRegPage(p); fetchRegSource(p); }}><ChevronLeft className="w-3.5 h-3.5" /></Button>
+                <span className="text-xs font-medium px-2">{regPage} / {totalRegPages}</span>
+                <Button variant="ghost" size="icon" className="h-7 w-7" disabled={regPage >= totalRegPages} onClick={() => { const p = regPage + 1; setRegPage(p); fetchRegSource(p); }}><ChevronRight className="w-3.5 h-3.5" /></Button>
+              </div>
+            </div>
+          )}
+
+          <DialogFooter className="px-6 py-3 border-t shrink-0">
+            <Button variant="outline" onClick={() => setIsRegModalOpen(false)}>취소</Button>
+            <Button onClick={applyRegistration} disabled={regCheckedIds.size === 0}><ArrowRight className="w-4 h-4 mr-1.5" /> 작업지시 적용</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 2단계: 확인 모달 ── */}
+      <Dialog open={isConfirmModalOpen} onOpenChange={setIsConfirmModalOpen}>
+        <DialogContent className="max-w-[1100px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>작업지시 적용 확인</DialogTitle>
+            <DialogDescription>기본 정보를 입력하고 '최종 적용' 버튼을 눌러주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+          <div className="space-y-5">
+            <div className="bg-muted/30 border rounded-lg p-5">
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground">작업지시 기본 정보</h4>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-3">
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업지시번호</Label><Input value={confirmWiNo} readOnly className="h-9 bg-muted cursor-not-allowed font-mono" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+                  <Select value={confirmStatus} onValueChange={setConfirmStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select>
+                </div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">시작일</Label><Input type="date" value={confirmStartDate} onChange={(e) => setConfirmStartDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">완료예정일</Label><Input type="date" value={confirmEndDate} onChange={(e) => setConfirmEndDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">설비</Label>
+                  <Select value={nv(confirmEquipmentId)} onValueChange={v => setConfirmEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비 선택" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select>
+                </div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업조</Label>
+                  <Select value={nv(confirmWorkTeam)} onValueChange={v => setConfirmWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select>
+                </div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업자</Label>
+                  <WorkerCombobox value={confirmWorker} onChange={setConfirmWorker} open={confirmWorkerOpen} onOpenChange={setConfirmWorkerOpen} />
+                </div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">비고</Label><Input className="h-9" placeholder="비고를 입력해주세요" /></div>
+              </div>
+            </div>
+            <div className="border rounded-lg p-5">
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground mb-3">품목 목록</h4>
+              <div className="overflow-auto">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">순번</TableHead>
+                      <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                      <TableHead className="w-[180px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">라우팅</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                      <TableHead className="w-[40px]" />
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {confirmItems.map((item, idx) => (
+                      <TableRow key={idx}>
+                        <TableCell className="text-[13px] text-center">{idx + 1}</TableCell>
+                        <TableCell className="text-[13px] font-medium">{item.itemCode}</TableCell>
+                        <TableCell className="text-sm">{item.itemName || item.itemCode}</TableCell>
+                        <TableCell className="text-[13px]">{item.spec || "-"}</TableCell>
+                        <TableCell><Input type="number" className="h-7 text-[13px] w-20" value={item.qty} onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
+                        <TableCell>
+                          <Select
+                            value={nv(item.routing || "")}
+                            onValueChange={v => {
+                              const val = fromNv(v);
+                              setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, routing: val } : it));
+                            }}
+                          >
+                            <SelectTrigger className="h-7 text-xs"><SelectValue placeholder="라우팅" /></SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="none">선택 안 함</SelectItem>
+                              {(item.routingOptions || []).map((rv: RoutingVersionData) => (
+                                <SelectItem key={rv.id} value={rv.id}>
+                                  {rv.version_name || "라우팅"} {rv.is_default ? "(기본)" : ""} - {rv.processes.length}공정
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </TableCell>
+                        <TableCell><Input className="h-7 text-[13px]" value={item.remark} placeholder="비고" onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
+                        <TableCell><Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setConfirmItems(prev => prev.filter((_, i) => i !== idx))}><X className="w-3 h-3 text-destructive" /></Button></TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setIsConfirmModalOpen(false); setIsRegModalOpen(true); }}><ChevronLeft className="w-4 h-4 mr-1" /> 이전</Button>
+            <Button variant="outline" onClick={() => setIsConfirmModalOpen(false)}>취소</Button>
+            <Button onClick={finalizeRegistration} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <CheckCircle2 className="w-4 h-4 mr-1.5" />} 최종 적용</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 수정 모달 ── */}
+      <Dialog open={isEditModalOpen} onOpenChange={(v) => { if (!v && wsModalOpen) return; setIsEditModalOpen(v); }}>
+        <DialogContent className="max-w-[1100px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{`작업지시 관리 - ${editOrder?.work_instruction_no || ""}`}</DialogTitle>
+            <DialogDescription>품목을 추가/삭제하고 정보를 수정해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+          <div className="space-y-5">
+            <div className="bg-muted/30 border rounded-lg p-5">
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground">기본 정보</h4>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-3">
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">상태</Label><Select value={editStatus} onValueChange={setEditStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">시작일</Label><Input type="date" value={editStartDate} onChange={(e) => setEditStartDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">완료예정일</Label><Input type="date" value={editEndDate} onChange={(e) => setEditEndDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">설비</Label><Select value={nv(editEquipmentId)} onValueChange={v => setEditEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비 선택" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업조</Label><Select value={nv(editWorkTeam)} onValueChange={v => setEditWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업자</Label>
+                  <WorkerCombobox value={editWorker} onChange={setEditWorker} open={editWorkerOpen} onOpenChange={setEditWorkerOpen} />
+                </div>
+                <div className="space-y-1 col-span-2"><Label className="text-[11px] font-semibold text-muted-foreground">비고</Label><Input value={editRemark} onChange={e => setEditRemark(e.target.value)} className="h-9" placeholder="비고를 입력해주세요" /></div>
+              </div>
+            </div>
+
+            {/* 품목 테이블 — 라우팅/공정작업기준을 품목별로 표시 */}
+            <div className="border rounded-lg overflow-hidden">
+              <div className="flex items-center justify-between px-4 py-2.5 bg-muted/30 border-b">
+                <span className="text-[13px] font-bold text-foreground">작업지시 항목</span>
+                <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{editItems.length}건</span>
+              </div>
+              <div className="overflow-auto">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">순번</TableHead>
+                      <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                      <TableHead className="w-[180px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">라우팅</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공정작업기준</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                      <TableHead className="w-[40px]" />
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {editItems.length === 0 ? (
+                      <TableRow><TableCell colSpan={9} className="text-center py-8 text-sm text-muted-foreground">등록된 품목이 없어요</TableCell></TableRow>
+                    ) : editItems.map((item, idx) => (
+                      <TableRow key={idx}>
+                        <TableCell className="text-[13px] text-center">{idx + 1}</TableCell>
+                        <TableCell className="text-[13px] font-medium">{item.itemCode}</TableCell>
+                        <TableCell className="text-[13px] max-w-[150px] truncate" title={item.itemName}>{item.itemName || "-"}</TableCell>
+                        <TableCell className="text-[13px] truncate" title={item.spec}>{item.spec || "-"}</TableCell>
+                        <TableCell className="text-right"><Input type="number" className="h-7 text-[13px] w-20 ml-auto" value={item.qty} onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
+                        <TableCell>
+                          <Select
+                            value={nv(item.routing || "")}
+                            onValueChange={v => {
+                              const val = fromNv(v);
+                              setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, routing: val } : it));
+                            }}
+                          >
+                            <SelectTrigger className="h-7 text-xs"><SelectValue placeholder="라우팅" /></SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="none">선택 안 함</SelectItem>
+                              {(item.routingOptions || []).map((rv: RoutingVersionData) => (
+                                <SelectItem key={rv.id} value={rv.id}>
+                                  {rv.version_name || "라우팅"} {rv.is_default ? "(기본)" : ""} - {rv.processes.length}공정
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 text-xs"
+                            disabled={!item.routing}
+                            onClick={() => {
+                              if (!editOrder || !item.routing) return;
+                              const rv = (item.routingOptions || []).find((r: RoutingVersionData) => r.id === item.routing);
+                              openWorkStandardModal(
+                                editOrder.work_instruction_no,
+                                item.routing,
+                                rv?.version_name || "",
+                                item.itemName || item.itemCode || "",
+                                item.itemCode || ""
+                              );
+                            }}
+                          >
+                            <ClipboardCheck className="w-3 h-3 mr-1" /> 수정
+                          </Button>
+                        </TableCell>
+                        <TableCell><Input className="h-7 text-[13px]" value={item.remark} placeholder="비고" onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
+                        <TableCell><Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setEditItems(prev => prev.filter((_, i) => i !== idx))}><X className="w-3 h-3 text-destructive" /></Button></TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              {editItems.length > 0 && (
+                <div className="px-4 py-2.5 border-t bg-muted/30 flex items-center justify-between">
+                  <span className="text-[13px] font-bold text-foreground">총 수량</span>
+                  <span className="text-lg font-bold font-mono text-primary">{editItems.reduce((s, i) => s + i.qty, 0).toLocaleString()} EA</span>
+                </div>
+              )}
+            </div>
+          </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEditModalOpen(false)}>취소</Button>
+            <Button onClick={saveEdit} disabled={editSaving}>{editSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 공정작업기준 수정 모달 */}
+      <WorkStandardEditModal
+        open={wsModalOpen}
+        onClose={() => setWsModalOpen(false)}
+        workInstructionNo={wsModalWiNo}
+        routingVersionId={wsModalRoutingId}
+        routingName={wsModalRoutingName}
+        itemName={wsModalItemName}
+        itemCode={wsModalItemCode}
+      />
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/purchase/order/page.tsx b/frontend/app/(main)/COMPANY_8/purchase/order/page.tsx
new file mode 100644
index 00000000..1bc3bc88
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/purchase/order/page.tsx
@@ -0,0 +1,1287 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  ClipboardList, Pencil, Search, X, Package, ChevronDown,
+  ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const MASTER_TABLE = "purchase_order_mng";
+const DETAIL_TABLE = "purchase_detail";
+
+const formatNumber = (val: string) => {
+  const num = val.replace(/[^\d.-]/g, "");
+  if (!num) return "";
+  const parts = num.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+const parseNumber = (val: string) => val.replace(/,/g, "");
+
+const STATUS_OPTIONS = [
+  { code: "작성중", label: "작성중" },
+  { code: "발주확정", label: "발주확정" },
+  { code: "입고완료", label: "입고완료" },
+  { code: "취소", label: "취소" },
+];
+
+const STATUS_BADGE_CLASS: Record<string, string> = {
+  "작성중": "bg-warning/10 text-warning border-warning/20",
+  "발주확정": "bg-primary/10 text-primary border-primary/20",
+  "입고완료": "bg-success/10 text-success border-success/20",
+  "취소": "bg-destructive/10 text-destructive border-destructive/20",
+};
+
+const EXCEL_COLUMNS = [
+  { key: "purchase_no", label: "발주번호" },
+  { key: "order_date", label: "발주일" },
+  { key: "supplier_name", label: "공급업체명" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "order_qty", label: "발주수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "amount", label: "금액" },
+  { key: "due_date", label: "납기일" },
+];
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "purchase_no", label: "발주번호" },
+  { key: "order_date", label: "발주일" },
+  { key: "supplier_name", label: "공급업체" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "spec", label: "규격" },
+  { key: "order_qty", label: "발주수량" },
+  { key: "received_qty", label: "입고수량" },
+  { key: "remain_qty", label: "잔량" },
+  { key: "unit_price", label: "단가" },
+  { key: "amount", label: "금액" },
+  { key: "due_date", label: "납기일" },
+  { key: "status", label: "상태" },
+  { key: "memo", label: "메모" },
+];
+
+export default function PurchaseOrderPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const [orders, setOrders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [masterForm, setMasterForm] = useState<Record<string, any>>({});
+  const [detailRows, setDetailRows] = useState<any[]>([]);
+
+  // 품목 선택 모달
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSelectedMap, setItemSelectedMap] = useState<Map<string, any>>(new Map());
+  const [itemSearchDivision, setItemSearchDivision] = useState("all");
+  const [itemPage, setItemPage] = useState(1);
+  const [itemPageSize, setItemPageSize] = useState(20);
+  const [itemTotalPages, setItemTotalPages] = useState(0);
+  const [itemTotal, setItemTotal] = useState(0);
+  const [itemPageInput, setItemPageInput] = useState("1");
+
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-purchase-order", DETAIL_TABLE, GRID_COLUMNS_CONFIG);
+
+  const isReadOnly = masterForm.status === "입고완료" || masterForm.status === "취소";
+
+  // 카테고리 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      const catColumns = ["input_mode", "price_mode"];
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      const dedup = (items: { code: string; label: string }[]) => {
+        const seen = new Set<string>();
+        return items.filter((item) => {
+          const key = item.label.replace(/\s/g, "");
+          if (seen.has(key)) return false;
+          seen.add(key);
+          return true;
+        });
+      };
+      await Promise.all(
+        catColumns.map(async (col) => {
+          try {
+            const res = await apiClient.get(`/table-categories/${MASTER_TABLE}/${col}/values`);
+            if (res.data?.success && res.data.data?.length > 0) {
+              optMap[col] = dedup(flatten(res.data.data));
+            }
+          } catch { /* skip */ }
+        })
+      );
+      try {
+        const suppRes = await apiClient.post(`/table-management/tables/supplier_mng/data`, {
+          page: 1, size: 500, autoFilter: true,
+        });
+        const supps = suppRes.data?.data?.data || suppRes.data?.data?.rows || [];
+        optMap["supplier_code"] = supps.map((s: any) => ({
+          code: s.supplier_code,
+          label: `${s.supplier_name} (${s.supplier_code})`,
+        }));
+      } catch { /* skip */ }
+      try {
+        const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
+          page: 1, size: 500, autoFilter: true,
+        });
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        optMap["manager"] = users.map((u: any) => ({
+          code: u.user_id || u.id,
+          label: `${u.user_name || u.name || u.user_id}${u.position_name ? ` (${u.position_name})` : ""}`,
+        }));
+      } catch { /* skip */ }
+      for (const col of ["unit", "material", "division"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/item_info/${col}/values`);
+          if (res.data?.success && res.data.data?.length > 0) {
+            optMap[`item_${col}`] = flatten(res.data.data);
+          }
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+      const divs = optMap["item_division"] || [];
+      const purchaseDiv = divs.find((o) => o.label === "구매관리")
+        || divs.find((o) => o.label === "원자재")
+        || divs.find((o) => o.label === "부자재");
+      if (purchaseDiv) setItemSearchDivision(purchaseDiv.code);
+    };
+    loadCategories();
+  }, []);
+
+  // 마스터 테이블 컬럼 (supplier_name, order_date 등)
+  const MASTER_COLUMNS = new Set(["supplier_name", "supplier_code", "order_date", "status"]);
+
+  // 데이터 조회
+  const fetchOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      // searchFilters를 detail / master로 분리
+      const detailFilters: any[] = [];
+      const masterExtraFilters: any[] = [];
+      for (const f of searchFilters) {
+        const filter = { columnName: f.columnName, operator: f.operator, value: f.value };
+        if (MASTER_COLUMNS.has(f.columnName)) {
+          masterExtraFilters.push(filter);
+        } else {
+          detailFilters.push(filter);
+        }
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: detailFilters.length > 0 ? { enabled: true, filters: detailFilters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "purchase_no", order: "desc" },
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+
+      const purchaseNos = [...new Set(rows.map((r: any) => r.purchase_no).filter(Boolean))];
+      let masterMap: Record<string, any> = {};
+      if (purchaseNos.length > 0) {
+        try {
+          const masterFilters: any[] = [{ columnName: "purchase_no", operator: "in", value: purchaseNos }, ...masterExtraFilters];
+          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: purchaseNos.length + 10,
+            dataFilter: { enabled: true, filters: masterFilters },
+            autoFilter: true,
+          });
+          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+          for (const m of masters) masterMap[m.purchase_no] = m;
+        } catch { /* skip */ }
+      }
+
+      const itemCodes = [...new Set(rows.map((r: any) => r.item_code).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemCodes.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemCodes.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+            autoFilter: true,
+          });
+          const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+          for (const item of items) itemMap[item.item_number] = item;
+        } catch { /* skip */ }
+      }
+
+      const resolveLabel = (key: string, code: string) => {
+        if (!code) return "";
+        const opts = categoryOptions[key];
+        if (!opts) return code;
+        return opts.find((o) => o.code === code)?.label || code;
+      };
+
+      const hasMasterFilters = masterExtraFilters.length > 0;
+      const data = rows
+        .filter((row: any) => {
+          const master = masterMap[row.purchase_no];
+          if (hasMasterFilters && !master) return false;
+          return true;
+        })
+        .map((row: any) => {
+          const item = itemMap[row.item_code];
+          const master = masterMap[row.purchase_no];
+          const rawUnit = row.unit || item?.unit || "";
+          return {
+            ...row,
+            item_name: row.item_name || item?.item_name || "",
+            spec: row.spec || item?.size || "",
+            unit: resolveLabel("item_unit", rawUnit) || rawUnit,
+            status: master?.status || "",
+            supplier_name: master?.supplier_name || "",
+            order_date: master?.order_date || "",
+            memo: row.memo || master?.memo || "",
+          };
+        });
+
+      setOrders(data);
+      setTotalCount(data.length);
+    } catch {
+      toast.error("발주 목록을 불러오는데 실패했어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters, categoryOptions]);
+
+  useEffect(() => { fetchOrders(); }, [fetchOrders]);
+
+  // purchase_no 기준 그룹핑
+  const orderGroups = useMemo(() => {
+    const map: Record<string, { master: any; details: any[] }> = {};
+    for (const row of orders) {
+      const key = row.purchase_no || row.id;
+      if (!map[key]) {
+        map[key] = {
+          master: { purchase_no: row.purchase_no, order_date: row.order_date, supplier_name: row.supplier_name, status: row.status, memo: row.memo },
+          details: [],
+        };
+      }
+      map[key].details.push(row);
+    }
+    return map;
+  }, [orders]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    const found = categoryOptions[col]?.find((o) => o.code === code);
+    return found?.label || code;
+  };
+
+  // 등록 모달 열기
+  const openRegisterModal = () => {
+    const defaultInputMode = categoryOptions["input_mode"]?.[0]?.code || "";
+    const defaultPriceMode = categoryOptions["price_mode"]?.[0]?.code || "";
+    setMasterForm({
+      input_mode: defaultInputMode,
+      price_mode: defaultPriceMode,
+      manager: user?.userId || "",
+      order_date: new Date().toISOString().split("T")[0],
+      status: "작성중",
+    });
+    setDetailRows([]);
+    setIsEditMode(false);
+    setIsModalOpen(true);
+  };
+
+  // 수정 모달 열기
+  const openEditModal = async (purchaseNo: string) => {
+    try {
+      const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+        autoFilter: true,
+      });
+      const masterData = (masterRes.data?.data?.data || masterRes.data?.data?.rows || [])[0];
+
+      const detailRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+        autoFilter: true,
+      });
+      const detailData = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+
+      setMasterForm(masterData || {});
+      setDetailRows(detailData.map((d: any, i: number) => ({ ...d, _id: d.id || `row_${i}` })));
+      setIsEditMode(true);
+      setIsModalOpen(true);
+    } catch {
+      toast.error("발주 정보를 불러오는데 실패했어요.");
+    }
+  };
+
+  // 삭제 (다중 선택)
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.error("삭제할 발주를 선택해주세요."); return; }
+    const selectedItems = orders.filter((o) => checkedIds.includes(o.id));
+    const purchaseNos = [...new Set(selectedItems.map((o) => o.purchase_no))];
+    const ok = await confirm(`${checkedIds.length}건의 발주 데이터를 삭제하시겠어요?`, {
+      description: "삭제된 데이터는 복구할 수 없어요.",
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+        data: checkedIds.map((id) => ({ id })),
+      });
+      for (const purchaseNo of purchaseNos) {
+        const remaining = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+          autoFilter: true,
+        });
+        const remainRows = remaining.data?.data?.data || remaining.data?.data?.rows || [];
+        if (remainRows.length === 0) {
+          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: 1,
+            dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+            autoFilter: true,
+          });
+          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+          if (masters.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
+              data: masters.map((m: any) => ({ id: m.id })),
+            });
+          }
+        }
+      }
+      toast.success("삭제되었어요.");
+      setCheckedIds([]);
+      fetchOrders();
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // 저장 (마스터 + 디테일)
+  const handleSave = async () => {
+    if (detailRows.length === 0) {
+      toast.error("품목을 1개 이상 추가해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, created_by, updated_by, ...masterFields } = masterForm;
+
+      if (isEditMode && id) {
+        await apiClient.put(`/table-management/tables/${MASTER_TABLE}/edit`, {
+          originalData: { id },
+          updatedData: masterFields,
+        });
+        const existingDetails = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 100,
+          dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: masterForm.purchase_no }] },
+          autoFilter: true,
+        });
+        const existings = existingDetails.data?.data?.data || existingDetails.data?.data?.rows || [];
+        if (existings.length > 0) {
+          await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+            data: existings.map((d: any) => ({ id: d.id })),
+          });
+        }
+        for (const [idx, row] of detailRows.entries()) {
+          const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
+          await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            ...detailFields,
+            purchase_no: masterForm.purchase_no,
+            seq_no: idx + 1,
+          });
+        }
+      } else {
+        const { purchase_no: _pn, ...fieldsWithoutPurchaseNo } = masterFields;
+        const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/add`, { id: crypto.randomUUID(), ...fieldsWithoutPurchaseNo });
+        const createdData = masterRes.data?.data;
+        let purchaseNo = createdData?.purchase_no;
+        if (!purchaseNo) {
+          const queryRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: 1,
+            sort: { columnName: "created_date", order: "desc" },
+            autoFilter: true,
+          });
+          const records = queryRes.data?.data?.data || queryRes.data?.data?.rows || [];
+          purchaseNo = records[0]?.purchase_no;
+        }
+        if (!purchaseNo) {
+          toast.error("발주번호를 가져올 수 없어요. 다시 시도해주세요.");
+          return;
+        }
+        for (const [idx, row] of detailRows.entries()) {
+          const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
+          await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            ...detailFields,
+            purchase_no: purchaseNo,
+            seq_no: idx + 1,
+          });
+        }
+      }
+
+      toast.success(isEditMode ? "수정되었어요." : "등록되었어요.");
+      setIsModalOpen(false);
+      fetchOrders();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 검색
+  const searchItems = async (page?: number, size?: number) => {
+    const p = page ?? itemPage;
+    const s = size ?? itemPageSize;
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      }
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      let allRows = resData?.data || resData?.rows || [];
+      if (itemSearchDivision !== "all") {
+        const divLabel = categoryOptions["item_division"]?.find((o) => o.code === itemSearchDivision)?.label || "";
+        allRows = allRows.filter((item: any) => {
+          const div = item.division || "";
+          return div.includes(itemSearchDivision) || (divLabel && div.includes(divLabel));
+        });
+      }
+      const total = allRows.length;
+      const start = (p - 1) * s;
+      setItemSearchResults(allRows.slice(start, start + s));
+      setItemTotal(total);
+      setItemTotalPages(Math.max(1, Math.ceil(total / s)));
+    } catch { /* skip */ } finally {
+      setItemSearchLoading(false);
+    }
+  };
+
+  const handleItemPageChange = (newPage: number) => {
+    if (newPage < 1 || newPage > itemTotalPages) return;
+    setItemPage(newPage);
+    setItemPageInput(String(newPage));
+    searchItems(newPage);
+  };
+
+  const commitItemPageInput = () => {
+    const parsed = parseInt(itemPageInput, 10);
+    if (isNaN(parsed) || itemPageInput.trim() === "") {
+      setItemPageInput(String(itemPage));
+      return;
+    }
+    const clamped = Math.max(1, Math.min(parsed, itemTotalPages || 1));
+    if (clamped !== itemPage) handleItemPageChange(clamped);
+    setItemPageInput(String(clamped));
+  };
+
+  const triggerNewSearch = () => {
+    setItemPage(1);
+    setItemPageInput("1");
+    searchItems(1);
+  };
+
+  const addSelectedItemsToDetail = async () => {
+    const selected = Array.from(itemSelectedMap.values());
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+
+    const supplierCode = masterForm.supplier_code;
+    const isStandard = masterForm.price_mode === "standard";
+    const isSupplier = masterForm.price_mode === "supplier";
+    let supplierPriceMap: Record<string, string> = {};
+    if (isSupplier && supplierCode) {
+      try {
+        const itemIds = selected.map((item) => item.item_number || item.id);
+        const res = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: {
+            enabled: true,
+            filters: [
+              { columnName: "supplier_id", operator: "equals", value: supplierCode },
+              { columnName: "item_id", operator: "in", value: itemIds },
+            ],
+          },
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) supplierPriceMap[p.item_id] = String(price);
+        }
+      } catch { /* skip */ }
+    }
+
+    const newRows = selected.map((item) => {
+      const itemCode = item.item_number || item.id;
+      let unitPrice = "";
+      if (isStandard) {
+        unitPrice = item.purchase_price || item.standard_price || "";
+      } else if (isSupplier && supplierCode) {
+        unitPrice = supplierPriceMap[itemCode] || "";
+      }
+      return {
+        _id: `new_${Date.now()}_${Math.random()}`,
+        item_code: itemCode,
+        item_name: item.item_name,
+        spec: item.size || "",
+        material: getCategoryLabel("item_material", item.material) || item.material || "",
+        unit: getCategoryLabel("item_unit", item.unit) || item.unit || "",
+        order_qty: "",
+        received_qty: "0",
+        remain_qty: "0",
+        unit_price: unitPrice,
+        amount: "",
+        due_date: "",
+        memo: "",
+      };
+    });
+
+    setDetailRows((prev) => [...prev, ...newRows]);
+    toast.success(`${selected.length}개 품목이 추가되었어요.`);
+    setItemSelectedMap(new Map());
+    setItemSelectOpen(false);
+  };
+
+  // 단가 재계산: 단가방식/공급업체 변경 시 기존 품목 단가 갱신
+  const recalcPrices = useCallback(async (priceMode: string, supplierCode: string) => {
+    if (detailRows.length === 0) return;
+    const isStandard = priceMode === "standard";
+    const isSupplier = priceMode === "supplier";
+
+    if (isStandard) {
+      const itemCodes = detailRows.map((r) => r.item_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+          autoFilter: true,
+        });
+        const items = res.data?.data?.data || res.data?.data?.rows || [];
+        const priceMap: Record<string, string> = {};
+        for (const item of items) {
+          const price = item.purchase_price || item.standard_price || "";
+          if (price) priceMap[item.item_number] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.item_code] || "";
+          const qty = parseFloat(row.order_qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    } else if (isSupplier && supplierCode) {
+      const itemCodes = detailRows.map((r) => r.item_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_id", operator: "equals", value: supplierCode },
+            { columnName: "item_id", operator: "in", value: itemCodes },
+          ]},
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        const priceMap: Record<string, string> = {};
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) priceMap[p.item_id] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.item_code] || "";
+          const qty = parseFloat(row.order_qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    }
+  }, [detailRows]);
+
+  const updateDetailRow = (idx: number, field: string, value: string) => {
+    setDetailRows((prev) => {
+      const next = [...prev];
+      next[idx] = { ...next[idx], [field]: value };
+      if (field === "order_qty" || field === "unit_price") {
+        const qty = parseFloat(field === "order_qty" ? value : next[idx].order_qty) || 0;
+        const price = parseFloat(field === "unit_price" ? value : next[idx].unit_price) || 0;
+        next[idx].amount = (qty * price).toString();
+        const received = parseFloat(next[idx].received_qty) || 0;
+        next[idx].remain_qty = (qty - received).toString();
+      }
+      return next;
+    });
+  };
+
+  const removeDetailRow = (idx: number) => {
+    setDetailRows((prev) => prev.filter((_, i) => i !== idx));
+  };
+
+  const handleExcelDownload = async () => {
+    if (orders.length === 0) { toast.error("다운로드할 데이터가 없어요."); return; }
+    const data = orders.map((o) => {
+      const row: Record<string, any> = {};
+      for (const col of EXCEL_COLUMNS) row[col.label] = o[col.key] || "";
+      return row;
+    });
+    await exportToExcel(data, "발주관리.xlsx", "발주목록");
+    toast.success("다운로드 완료");
+  };
+
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={DETAIL_TABLE}
+        filterId="c16-purchase-order"
+        onFilterChange={setSearchFilters}
+        dataCount={totalCount}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between flex-wrap gap-3">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-bold">발주 목록</h2>
+          <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+            {totalCount}건
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4 mr-1" /> 발주 등록
+          </Button>
+          <Button variant="outline" size="sm" disabled={checkedIds.length !== 1} onClick={() => {
+            const item = orders.find((o) => o.id === checkedIds[0]);
+            if (item) openEditModal(item.purchase_no);
+          }}>
+            <Pencil className="w-4 h-4 mr-1" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1" /> 삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4 mr-1" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4 mr-1" /> 엑셀
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+            <Settings2 className="w-4 h-4 mr-1" /> 설정
+          </Button>
+        </div>
+      </div>
+
+      {/* 데이터 테이블 — 아코디언 그룹핑 */}
+      <div className="flex-1 overflow-auto border rounded-lg bg-card">
+        {loading ? (
+          <div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
+        ) : Object.keys(orderGroups).length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+            <Package className="h-10 w-10 mb-2 opacity-30" />
+            <p className="text-sm">등록된 발주가 없어요</p>
+          </div>
+        ) : (
+          (() => {
+            const MASTER_KEYS = new Set(["purchase_no", "order_date", "supplier_name", "status", "memo"]);
+            const numCols = new Set(["order_qty", "received_qty", "remain_qty", "unit_price", "amount"]);
+
+            // ts.visibleColumns 순서를 따르되, 마스터/디테일 컬럼을 분리
+            // 고정 컬럼(품목수)은 마스터 선행 컬럼 뒤에 배치
+            const leadingMaster: typeof ts.visibleColumns = [];
+            const detailCols: typeof ts.visibleColumns = [];
+            const trailingMaster: typeof ts.visibleColumns = [];
+            let passedFirstDetail = false;
+            for (const col of ts.visibleColumns) {
+              if (MASTER_KEYS.has(col.key)) {
+                if (passedFirstDetail) trailingMaster.push(col);
+                else leadingMaster.push(col);
+              } else {
+                passedFirstDetail = true;
+                detailCols.push(col);
+              }
+            }
+
+            const renderDetailCell = (row: any, key: string) => {
+              const val = row[key];
+              if (key === "status") return val ? <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[val] || "")}>{val}</span> : "-";
+              if (numCols.has(key)) return <span className="font-mono">{val ? Number(val).toLocaleString() : "0"}</span>;
+              return val || "-";
+            };
+
+            const renderMasterHead = (col: { key: string; label: string }) => (
+              <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground", col.key === "status" && "text-center")}>
+                {col.label}
+              </TableHead>
+            );
+
+            const renderMasterCell = (col: { key: string }, m: any, purchaseNo: string) => {
+              if (col.key === "purchase_no") return <TableCell key={col.key} className="text-sm font-semibold text-primary">{purchaseNo}</TableCell>;
+              if (col.key === "order_date") return <TableCell key={col.key} className="text-sm">{m.order_date ? new Date(m.order_date).toLocaleDateString("ko-KR") : "-"}</TableCell>;
+              if (col.key === "supplier_name") return <TableCell key={col.key} className="text-sm">{m.supplier_name || "-"}</TableCell>;
+              if (col.key === "status") return <TableCell key={col.key} className="text-center">{m.status && <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[m.status] || "")}>{m.status}</span>}</TableCell>;
+              if (col.key === "memo") return <TableCell key={col.key} className="text-sm text-muted-foreground max-w-[120px] truncate">{m.memo || ""}</TableCell>;
+              return <TableCell key={col.key} />;
+            };
+
+            return (
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-8" />
+                    <TableHead className="w-10" />
+                    {leadingMaster.map(renderMasterHead)}
+                    <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground text-center">품목수</TableHead>
+                    {detailCols.map(col => (
+                      <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground", numCols.has(col.key) && "text-right")}>
+                        {col.label}{col.key === "order_qty" || col.key === "amount" ? " 합계" : ""}
+                      </TableHead>
+                    ))}
+                    {trailingMaster.map(renderMasterHead)}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {Object.entries(orderGroups).map(([purchaseNo, group]) => {
+                    const isExpanded = expandedOrders.has(purchaseNo);
+                    const detailIds = group.details.map(d => d.id);
+                    const allChecked = detailIds.length > 0 && detailIds.every(id => checkedIds.includes(id));
+                    const someChecked = detailIds.some(id => checkedIds.includes(id));
+                    const m = group.master;
+                    const totalQty = group.details.reduce((s, d) => s + (Number(d.order_qty) || 0), 0);
+                    const totalAmt = group.details.reduce((s, d) => s + (Number(d.amount) || 0), 0);
+                    return (
+                      <React.Fragment key={purchaseNo}>
+                        <TableRow
+                          style={{ borderTop: "2px solid hsl(var(--border))" }}
+                          className={cn("cursor-pointer border-l-[3px] border-l-transparent font-semibold", allChecked && "border-l-primary bg-primary/5")}
+                          onClick={() => setExpandedOrders(prev => { const next = new Set(prev); if (next.has(purchaseNo)) next.delete(purchaseNo); else next.add(purchaseNo); return next; })}
+                          onDoubleClick={() => openEditModal(purchaseNo)}
+                        >
+                          <TableCell className="text-center p-2">
+                            <ChevronDown className={cn("w-4 h-4 transition-transform text-muted-foreground", !isExpanded && "-rotate-90")} />
+                          </TableCell>
+                          <TableCell className="text-center p-2" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => allChecked ? prev.filter(id => !detailIds.includes(id)) : [...new Set([...prev, ...detailIds])]); }}>
+                            <Checkbox checked={allChecked} data-state={someChecked && !allChecked ? "indeterminate" : undefined} onCheckedChange={() => {}} />
+                          </TableCell>
+                          {leadingMaster.map(col => renderMasterCell(col, m, purchaseNo))}
+                          <TableCell className="text-sm text-center"><Badge variant="secondary" className="text-[10px]">{group.details.length}건</Badge></TableCell>
+                          {detailCols.map(col => (
+                            <TableCell key={col.key} className={cn("text-sm", numCols.has(col.key) && "text-right font-mono")}>
+                              {col.key === "order_qty" ? totalQty.toLocaleString()
+                                : col.key === "amount" ? totalAmt.toLocaleString()
+                                : ""}
+                            </TableCell>
+                          ))}
+                          {trailingMaster.map(col => renderMasterCell(col, m, purchaseNo))}
+                        </TableRow>
+                        {isExpanded && group.details.map((row) => (
+                          <TableRow key={row.id} className="bg-muted/30 text-xs">
+                            <TableCell />
+                            <TableCell className="text-center" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => prev.includes(row.id) ? prev.filter(id => id !== row.id) : [...prev, row.id]); }}>
+                              <Checkbox checked={checkedIds.includes(row.id)} onCheckedChange={() => {}} />
+                            </TableCell>
+                            {leadingMaster.map(col => <TableCell key={col.key} />)}
+                            <TableCell />
+                            {detailCols.map(col => (
+                              <TableCell key={col.key} className={cn(numCols.has(col.key) && "text-right")}>
+                                {renderDetailCell(row, col.key)}
+                              </TableCell>
+                            ))}
+                            {trailingMaster.map(col => <TableCell key={col.key} />)}
+                          </TableRow>
+                        ))}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            );
+          })()
+        )}
+        <div className="px-4 py-2 border-t text-xs text-muted-foreground">
+          전체 {Object.keys(orderGroups).length}건 (발주 기준) / {orders.length}건 (품목 기준)
+        </div>
+      </div>
+
+      {/* 발주 등록/수정 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent
+          className="max-w-[95vw] w-[1200px]"
+          style={{ maxHeight: "90vh", display: "flex", flexDirection: "column" }}
+        >
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? (isReadOnly ? "발주 상세" : "발주 수정") : "발주 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? (isReadOnly ? "발주 상세 정보를 확인해요." : "발주 정보를 수정해요.") : "새로운 발주를 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-y-auto">
+            <div className="space-y-6 py-2 pr-1">
+              {/* 기본 정보 */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  기본 정보
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <div className="grid grid-cols-4 gap-3.5">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">발주번호</Label>
+                    <Input value={masterForm.purchase_no || ""} placeholder={isEditMode ? "" : "자동생성"} className="h-9" disabled />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">발주일 <span className="text-destructive">*</span></Label>
+                    <Input
+                      type="date"
+                      value={masterForm.order_date || ""}
+                      onChange={(e) => setMasterForm((p) => ({ ...p, order_date: e.target.value }))}
+                      className="h-9"
+                      disabled={isReadOnly}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">상태</Label>
+                    {isReadOnly ? (
+                      <div className="flex items-center h-9">
+                        <span className={cn("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold", STATUS_BADGE_CLASS[masterForm.status] || "")}>
+                          {masterForm.status}
+                        </span>
+                      </div>
+                    ) : (
+                      <Select value={masterForm.status || "작성중"} onValueChange={(v) => setMasterForm((p) => ({ ...p, status: v }))}>
+                        <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          {STATUS_OPTIONS.map((s) => (
+                            <SelectItem key={s.code} value={s.code}>{s.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">입력방식</Label>
+                    <Select value={masterForm.input_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, input_mode: v }))} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["input_mode"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">단가방식</Label>
+                    <Select value={masterForm.price_mode || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, price_mode: v })); recalcPrices(v, masterForm.supplier_code || ""); }} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["price_mode"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">담당자</Label>
+                    <Select value={masterForm.manager || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager: v }))} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="담당자 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["manager"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+
+              {/* 공급업체 / 담당자 — 입력방식이 '공급업체 우선'일 때만 표시 */}
+              {masterForm.input_mode === "supplierFirst" && (
+              <div className="p-4 bg-muted/50 border border-dashed border-border rounded-lg space-y-3">
+                <div className="text-xs font-semibold text-primary flex items-center gap-1.5">
+                  <ClipboardList className="w-3.5 h-3.5" /> 공급업체 정보
+                </div>
+                <div className="grid grid-cols-2 gap-3.5">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">공급업체</Label>
+                    <Select
+                      value={masterForm.supplier_code || ""}
+                      onValueChange={(v) => {
+                        const supp = categoryOptions["supplier_code"]?.find((o) => o.code === v);
+                        const name = supp?.label.replace(` (${v})`, "") || "";
+                        setMasterForm((p) => ({ ...p, supplier_code: v, supplier_name: name }));
+                        recalcPrices(masterForm.price_mode || "", v);
+                      }}
+                      disabled={isReadOnly}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="공급업체 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["supplier_code"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+              )}
+
+              {/* 품목 내역 */}
+              <div className="space-y-2.5">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                    <Package className="w-4 h-4" /> 품목 내역
+                    <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                      {detailRows.length}
+                    </span>
+                  </div>
+                  {!isReadOnly && (
+                    <Button size="sm" onClick={() => {
+                      setItemSelectedMap(new Map());
+                      setItemPage(1);
+                      setItemPageInput("1");
+                      setItemSearchKeyword("");
+                      setItemSelectOpen(true);
+                      searchItems(1);
+                    }}>
+                      <Plus className="w-4 h-4 mr-1" /> 품목 추가
+                    </Button>
+                  )}
+                </div>
+                {detailRows.length === 0 ? (
+                  <div className="flex flex-col items-center gap-2 py-8 border border-dashed border-border rounded-lg text-muted-foreground">
+                    <Package className="w-8 h-8 opacity-40" />
+                    <span className="text-sm">아직 추가된 품목이 없어요. 위 버튼으로 품목을 추가해주세요.</span>
+                  </div>
+                ) : (
+                  <div className="border rounded-lg overflow-x-auto">
+                    <Table className="table-fixed">
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          {!isReadOnly && <TableHead className="w-[40px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground"></TableHead>}
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                          {masterForm.input_mode === "itemFirst" && (
+                            <TableHead className="w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체</TableHead>
+                          )}
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">잔량</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
+                          <TableHead className="w-[160px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {detailRows.map((row, idx) => (
+                          <TableRow key={row._id || idx}>
+                            {!isReadOnly && (
+                              <TableCell>
+                                <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-muted-foreground/50 hover:text-destructive hover:bg-destructive/5" onClick={() => removeDetailRow(idx)}>
+                                  <X className="w-3.5 h-3.5" />
+                                </Button>
+                              </TableCell>
+                            )}
+                            <TableCell className="text-[13px] font-mono max-w-[120px]"><span className="block truncate" title={row.item_code}>{row.item_code}</span></TableCell>
+                            <TableCell className="text-[13px] max-w-[120px]"><span className="block truncate" title={row.item_name}>{row.item_name}</span></TableCell>
+                            {masterForm.input_mode === "itemFirst" && (
+                              <TableCell>
+                                {isReadOnly ? (
+                                  <span className="text-xs">{(categoryOptions["supplier_code"] || []).find(o => o.code === row.supplier_code)?.label || row.supplier_code || "-"}</span>
+                                ) : (
+                                  <Select value={row.supplier_code || ""} onValueChange={(v) => {
+                                    const supp = categoryOptions["supplier_code"]?.find(o => o.code === v);
+                                    const name = supp?.label.replace(` (${v})`, "") || "";
+                                    updateDetailRow(idx, "supplier_code", v);
+                                    updateDetailRow(idx, "supplier_name", name);
+                                  }}>
+                                    <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="공급업체" /></SelectTrigger>
+                                    <SelectContent>
+                                      {(categoryOptions["supplier_code"] || []).map(o => (
+                                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                )}
+                              </TableCell>
+                            )}
+                            <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                            <TableCell className="text-[13px]">{row.unit}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs text-right font-mono block">{row.order_qty ? Number(row.order_qty).toLocaleString() : ""}</span>
+                              ) : (
+                                <Input value={formatNumber(row.order_qty || "")} onChange={(e) => updateDetailRow(idx, "order_qty", parseNumber(e.target.value))} className="h-8 text-xs text-right font-mono" />
+                              )}
+                            </TableCell>
+                            <TableCell className="text-[13px] text-right font-mono text-muted-foreground">{row.received_qty ? Number(row.received_qty).toLocaleString() : "0"}</TableCell>
+                            <TableCell className="text-[13px] text-right font-mono">{row.remain_qty ? Number(row.remain_qty).toLocaleString() : "0"}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs text-right font-mono block">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</span>
+                              ) : (
+                                <Input value={formatNumber(row.unit_price || "")} onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))} className="h-8 text-xs text-right font-mono" />
+                              )}
+                            </TableCell>
+                            <TableCell className="text-[13px] text-right font-mono font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs">{row.due_date}</span>
+                              ) : (
+                                <Input type="date" value={row.due_date || ""} onChange={(e) => updateDetailRow(idx, "due_date", e.target.value)} className="h-8 text-xs" />
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs">{row.memo}</span>
+                              ) : (
+                                <Input value={row.memo || ""} onChange={(e) => updateDetailRow(idx, "memo", e.target.value)} className="h-8 text-xs" />
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                )}
+              </div>
+
+              {/* 비고 */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  비고
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <Input
+                  value={masterForm.memo || ""}
+                  onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
+                  placeholder="특이사항이나 메모를 입력해주세요"
+                  className="h-9"
+                  disabled={isReadOnly}
+                />
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter className="border-t pt-3 mt-2">
+            {isReadOnly ? (
+              <Button variant="outline" onClick={() => setIsModalOpen(false)}>닫기</Button>
+            ) : (
+              <>
+                <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+                <Button onClick={handleSave} disabled={saving}>
+                  {saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />} 저장
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+
+          {/* 품목 선택 모달 (중첩) */}
+          <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+            <DialogContent className="max-w-3xl" style={{ maxHeight: "70vh", display: "flex", flexDirection: "column" }} onInteractOutside={(e) => e.preventDefault()}>
+              <DialogHeader>
+                <DialogTitle>품목 선택</DialogTitle>
+                <DialogDescription>발주에 추가할 품목을 선택 후 하단 버튼을 눌러주세요.</DialogDescription>
+              </DialogHeader>
+              <div className="flex gap-2">
+                <Input
+                  placeholder="품명/품목코드 검색"
+                  value={itemSearchKeyword}
+                  onChange={(e) => setItemSearchKeyword(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && triggerNewSearch()}
+                  className="h-9 flex-1"
+                />
+                <Select value={itemSearchDivision} onValueChange={setItemSearchDivision}>
+                  <SelectTrigger className="h-9 w-[130px]"><SelectValue placeholder="관리품목" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">전체</SelectItem>
+                    {(categoryOptions["item_division"] || []).map((o) => (
+                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button size="sm" onClick={triggerNewSearch} disabled={itemSearchLoading} className="h-9">
+                  {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" />조회</>}
+                </Button>
+              </div>
+              <div className="flex-1 overflow-auto border rounded-lg">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[40px] text-center">
+                        <input type="checkbox"
+                          checked={itemSearchResults.length > 0 && itemSearchResults.every((i) => itemSelectedMap.has(i.id))}
+                          onChange={(e) => {
+                            setItemSelectedMap((prev) => {
+                              const next = new Map(prev);
+                              if (e.target.checked) itemSearchResults.forEach((i) => next.set(i.id, i));
+                              else itemSearchResults.forEach((i) => next.delete(i.id));
+                              return next;
+                            });
+                          }} />
+                      </TableHead>
+                      <TableHead className="w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                      <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {itemSearchResults.length === 0 ? (
+                      <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없어요</TableCell></TableRow>
+                    ) : itemSearchResults.map((item) => (
+                      <TableRow key={item.id} className={cn("cursor-pointer", itemSelectedMap.has(item.id) && "bg-primary/5")}
+                        onClick={() => setItemSelectedMap((prev) => {
+                          const next = new Map(prev);
+                          if (next.has(item.id)) next.delete(item.id); else next.set(item.id, item);
+                          return next;
+                        })}>
+                        <TableCell className="text-center">
+                          <input type="checkbox" checked={itemSelectedMap.has(item.id)} readOnly />
+                        </TableCell>
+                        <TableCell className="text-[13px] max-w-[130px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
+                        <TableCell className="text-sm max-w-[150px]"><span className="block truncate" title={item.item_name}>{item.item_name}</span></TableCell>
+                        <TableCell className="text-[13px]">{item.size}</TableCell>
+                        <TableCell className="text-[13px]">{categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}</TableCell>
+                        <TableCell className="text-[13px]">{categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <div className="flex items-center justify-between border-t pt-2">
+                <div className="flex items-center gap-1">
+                  <span className="text-xs text-muted-foreground">표시:</span>
+                  <input type="number" min={1} max={200} value={itemPageSize}
+                    onChange={(e) => {
+                      const v = Math.min(200, Math.max(1, Number(e.target.value) || 20));
+                      setItemPageSize(v);
+                      setItemPage(1);
+                      setItemPageInput("1");
+                      searchItems(1, v);
+                    }}
+                    className="h-7 w-14 rounded-md border px-1 text-center text-xs" />
+                </div>
+                <div className="flex items-center gap-1">
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(1)} disabled={itemPage === 1 || itemSearchLoading}>
+                    <ChevronsLeft className="h-3 w-3" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemPage - 1)} disabled={itemPage === 1 || itemSearchLoading}>
+                    <ChevronLeft className="h-3 w-3" />
+                  </Button>
+                  <input type="text" inputMode="numeric" value={itemPageInput}
+                    onChange={(e) => setItemPageInput(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === "Enter") { commitItemPageInput(); (e.target as HTMLInputElement).blur(); } }}
+                    onBlur={commitItemPageInput}
+                    onFocus={(e) => e.target.select()}
+                    className="h-7 w-10 rounded-md border px-1 text-center text-xs" />
+                  <span className="text-xs text-muted-foreground">/ {itemTotalPages || 1}</span>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemPage + 1)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
+                    <ChevronRight className="h-3 w-3" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemTotalPages)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
+                    <ChevronsRight className="h-3 w-3" />
+                  </Button>
+                </div>
+                <span className="text-xs text-muted-foreground">총 {itemTotal}건</span>
+              </div>
+              <DialogFooter>
+                <div className="flex items-center gap-2 w-full justify-between">
+                  <span className="text-sm text-muted-foreground">{itemSelectedMap.size}개 선택됨</span>
+                  <div className="flex gap-2">
+                    <Button variant="outline" onClick={() => { setItemSelectedMap(new Map()); setItemSelectOpen(false); }}>취소</Button>
+                    <Button onClick={addSelectedItemsToDetail} disabled={itemSelectedMap.size === 0}>
+                      <Plus className="w-4 h-4 mr-1" /> {itemSelectedMap.size}개 추가
+                    </Button>
+                  </div>
+                </div>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={DETAIL_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchOrders()}
+      />
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/purchase/purchase-item/page.tsx b/frontend/app/(main)/COMPANY_8/purchase/purchase-item/page.tsx
new file mode 100644
index 00000000..7f211a88
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/purchase/purchase-item/page.tsx
@@ -0,0 +1,1244 @@
+"use client";
+
+/**
+ * 구매품목관리 — Type B 마스터-디테일 리디자인
+ *
+ * 좌측: 구매품목 목록 (item_info, 구매 관련 필터)
+ * 우측: 선택한 품목의 공급업체 정보 (supplier_item_mapping → supplier_mng 조인)
+ *
+ * 공급업체관리와 양방향 연동 (같은 supplier_item_mapping 테이블)
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Search, X, Settings2, Package } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const ITEM_TABLE = "item_info";
+const MAPPING_TABLE = "supplier_item_mapping";
+const SUPPLIER_TABLE = "supplier_mng";
+
+// 숫자 포맷 헬퍼
+const formatNum = (val: any): string => {
+  if (val === null || val === undefined || val === "") return "";
+  const n = Number(val);
+  return isNaN(n) ? String(val) : n.toLocaleString();
+};
+
+const ITEM_GRID_COLUMNS = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "standard_price", label: "구매단가" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
+];
+
+export default function PurchaseItemPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-purchase-item", ITEM_TABLE, ITEM_GRID_COLUMNS);
+
+  // 좌측: 품목
+  const [items, setItems] = useState<any[]>([]);
+  const [itemLoading, setItemLoading] = useState(false);
+  const [itemCount, setItemCount] = useState(0);
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 공급업체
+  const [supplierItems, setSupplierItems] = useState<any[]>([]);
+  const [supplierLoading, setSupplierLoading] = useState(false);
+  const [supplierCheckedIds, setSupplierCheckedIds] = useState<string[]>([]);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string; isDefault?: boolean }[]>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 공급업체 추가 모달
+  const [suppSelectOpen, setSuppSelectOpen] = useState(false);
+  const [suppSearchKeyword, setSuppSearchKeyword] = useState("");
+  const [suppSearchResults, setSuppSearchResults] = useState<any[]>([]);
+  const [suppSearchLoading, setSuppSearchLoading] = useState(false);
+  const [suppCheckedIds, setSuppCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 수정 모달
+  const [editItemOpen, setEditItemOpen] = useState(false);
+  const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+
+  // 공급업체 상세 입력 모달 (공급업체 품번/품명 + 단가)
+  const [suppDetailOpen, setSuppDetailOpen] = useState(false);
+  const [selectedSuppsForDetail, setSelectedSuppsForDetail] = useState<any[]>([]);
+  const [suppMappings, setSuppMappings] = useState<Record<string, Array<{ _id: string; supplier_item_code: string; supplier_item_name: string }>>>({});
+  const [suppPrices, setSuppPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [editSuppData, setEditSuppData] = useState<any>(null);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string; isDefault?: boolean }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string; isDefault?: boolean }[] => {
+        const result: { code: string; label: string; isDefault?: boolean }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel, isDefault: v.isDefault });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      // 단가 카테고리
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/supplier_item_prices/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 좌측: 품목 조회
+  const fetchItems = useCallback(async () => {
+    setItemLoading(true);
+    try {
+      const filters: { columnName: string; operator: string; value: any }[] = [];
+
+      // 구매품목/영업관리 division 필터 (다중값 컬럼이므로 contains로 매칭)
+      filters.push({ columnName: "division", operator: "contains", value: "s" });
+
+      // DynamicSearchFilter에서 전달된 필터 추가
+      for (const f of searchFilters) {
+        filters.push({ columnName: f.columnName, operator: f.operator, value: f.value });
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const CATS = ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+      setItemCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setItemLoading(false);
+    }
+  }, [searchFilters, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => { fetchItems(); }, [fetchItems]);
+
+  // 선택된 품목
+  const selectedItem = items.find((i) => i.id === selectedItemId);
+
+  // 우측: 공급업체 목록 조회
+  useEffect(() => {
+    if (!selectedItem?.item_number) { setSupplierItems([]); setSupplierCheckedIds([]); return; }
+    setSupplierCheckedIds([]);
+    const itemKey = selectedItem.item_number;
+    const fetchSupplierItems = async () => {
+      setSupplierLoading(true);
+      try {
+        // 1. supplier_item_mapping에서 해당 품목의 매핑 조회
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
+          autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        // 2. supplier_id → supplier_mng 조인 (공급업체명)
+        const custIds = [...new Set(mappings.map((m: any) => m.supplier_id).filter(Boolean))];
+        let custMap: Record<string, any> = {};
+        if (custIds.length > 0) {
+          try {
+            const custRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+              page: 1, size: custIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "in", value: custIds }] },
+              autoFilter: true,
+            });
+            for (const c of (custRes.data?.data?.data || custRes.data?.data?.rows || [])) {
+              custMap[c.supplier_code] = c;
+            }
+          } catch { /* skip */ }
+        }
+
+        // 3. supplier_item_prices 조회 (단가 정보)
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        // 4. 공급업체별 중복 제거 + 오늘 날짜 기준 단가 매칭
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o: any) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+        const seenCustIds = new Set<string>();
+        const sortedMappings = [...mappings].sort((a: any, b: any) => (a.supplier_id || "").localeCompare(b.supplier_id || ""));
+
+        setSupplierItems(sortedMappings.map((m: any) => {
+          const custKey = m.supplier_id || "";
+          const isFirstOfGroup = !seenCustIds.has(custKey);
+          if (custKey) seenCustIds.add(custKey);
+
+          const custPriceList = allPrices.filter((p: any) => p.supplier_id === custKey);
+          const todayPrice = custPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || custPriceList[0] || {};
+
+          return {
+            ...m,
+            supplier_code: isFirstOfGroup ? custKey : "",
+            supplier_name: isFirstOfGroup ? (custMap[custKey]?.supplier_name || "") : "",
+            supplier_item_code: m.supplier_item_code || "",
+            supplier_item_name: m.supplier_item_name || "",
+            base_price: todayPrice.base_price || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+        }));
+      } catch (err) {
+        console.error("공급업체 조회 실패:", err);
+      } finally {
+        setSupplierLoading(false);
+      }
+    };
+    fetchSupplierItems();
+  }, [selectedItem?.item_number, priceCategoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 공급업체 검색
+  const searchSuppliers = async () => {
+    setSuppSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (suppSearchKeyword) filters.push({ columnName: "supplier_name", operator: "contains", value: suppSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const all = res.data?.data?.data || res.data?.data?.rows || [];
+      // 이미 등록된 공급업체 제외
+      const existing = new Set(supplierItems.map((c: any) => c.supplier_id || c.supplier_code));
+      setSuppSearchResults(all.filter((c: any) => !existing.has(c.supplier_code)));
+    } catch { /* skip */ } finally { setSuppSearchLoading(false); }
+  };
+
+  // 공급업체 선택 → 상세 모달로 이동
+  const goToSuppDetail = () => {
+    const selected = suppSearchResults.filter((c) => suppCheckedIds.has(c.id));
+    if (selected.length === 0) { toast.error("공급업체를 선택해주세요."); return; }
+    setSelectedSuppsForDetail(selected);
+    const mappings: typeof suppMappings = {};
+    const prices: typeof suppPrices = {};
+    for (const cust of selected) {
+      const key = cust.supplier_code || cust.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: selectedItem?.standard_price || selectedItem?.standard_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: selectedItem?.standard_price || selectedItem?.standard_price || "",
+      }];
+    }
+    setSuppMappings(mappings);
+    setSuppPrices(prices);
+    setSuppSelectOpen(false);
+    setSuppDetailOpen(true);
+  };
+
+  const addMappingRow = (custKey: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, supplier_item_code: "", supplier_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (custKey: string, rowId: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updateMappingRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  const addPriceRow = (custKey: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (custKey: string, rowId: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1;
+          if (roundLabel === "반올림") calc = Math.round(calc / unit) * unit;
+          else if (roundLabel === "절삭") calc = Math.floor(calc / unit) * unit;
+          else if (roundLabel === "올림") calc = Math.ceil(calc / unit) * unit;
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  const openEditSupp = async (row: any) => {
+    const custKey = row.supplier_code || row.supplier_id;
+
+    // supplier_mng에서 공급업체 정보 조회
+    let custInfo: any = { supplier_code: custKey, supplier_name: row.supplier_name || "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/supplier_mng/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: custKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) custInfo = found;
+    } catch { /* skip */ }
+
+    const mappingRows = [{
+      _id: `m_existing_${row.id}`,
+      supplier_item_code: row.supplier_item_code || "",
+      supplier_item_name: row.supplier_item_name || "",
+    }].filter((m) => m.supplier_item_code || m.supplier_item_name);
+
+    const priceRows = [{
+      _id: `p_existing_${row.id}`,
+      start_date: row.start_date || "",
+      end_date: row.end_date || "",
+      currency_code: row.currency_code || "CAT_MLAMDKVN_PZJI",
+      base_price_type: row.base_price_type || "CAT_MLAMFGFT_4RZW",
+      base_price: row.base_price ? String(row.base_price) : "",
+      discount_type: row.discount_type || "",
+      discount_value: row.discount_value ? String(row.discount_value) : "",
+      rounding_type: row.rounding_type || "",
+      rounding_unit_value: row.rounding_unit_value || "",
+      calculated_price: row.calculated_price ? String(row.calculated_price) : "",
+    }].filter((p) => p.base_price || p.start_date);
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedSuppsForDetail([custInfo]);
+    setSuppMappings({ [custKey]: mappingRows });
+    setSuppPrices({ [custKey]: priceRows });
+    setEditSuppData(row);
+    setSuppDetailOpen(true);
+  };
+
+  const handleSuppDetailSave = async () => {
+    if (!selectedItem) return;
+    const isEditingExisting = !!editSuppData;
+    setSaving(true);
+    try {
+      for (const cust of selectedSuppsForDetail) {
+        const custKey = cust.supplier_code || cust.id;
+        const mappingRows = suppMappings[custKey] || [];
+
+        if (isEditingExisting && editSuppData?.id) {
+          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+            originalData: { id: editSuppData.id },
+            updatedData: {
+              supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+              supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+            },
+          });
+
+          // 기존 prices 삭제 후 재등록
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "mapping_id", operator: "equals", value: editSuppData.id },
+              ]}, autoFilter: true,
+            });
+            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+            if (existing.length > 0) {
+              await apiClient.delete(`/table-management/tables/supplier_item_prices/delete`, {
+                data: existing.map((p: any) => ({ id: p.id })),
+              });
+            }
+          } catch { /* skip */ }
+
+          const priceRows = (suppPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/supplier_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: editSuppData.id,
+              supplier_id: custKey,
+              item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        } else {
+          // 신규 등록
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            supplier_id: custKey, item_id: selectedItem.item_number,
+            supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+            supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+          });
+          const mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              supplier_id: custKey, item_id: selectedItem.item_number,
+              supplier_item_code: mappingRows[mi].supplier_item_code || "",
+              supplier_item_name: mappingRows[mi].supplier_item_name || "",
+            });
+          }
+
+          const priceRows = (suppPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/supplier_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", supplier_id: custKey, item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedSuppsForDetail.length}개 공급업체가 추가되었습니다.`);
+      setSuppDetailOpen(false);
+      setEditSuppData(null);
+      setSuppCheckedIds(new Set());
+      // 우측 새로고침
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 수정
+  const openEditItem = () => {
+    if (!selectedItem) return;
+    setEditItemForm({ ...selectedItem });
+    setEditItemOpen(true);
+  };
+
+  const handleEditSave = async () => {
+    if (!editItemForm.id) return;
+    setSaving(true);
+    try {
+      await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
+        originalData: { id: editItemForm.id },
+        updatedData: {
+          standard_price: editItemForm.standard_price || null,
+          currency_code: editItemForm.currency_code || null,
+        },
+      });
+      toast.success("수정되었습니다.");
+      setEditItemOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "수정에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 우측: 공급업체 매핑 삭제
+  const handleSupplierMappingDelete = async () => {
+    if (supplierCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${supplierCheckedIds.length}개 공급업체 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      // 관련 단가 삭제
+      for (const mappingId of supplierCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/supplier_item_prices/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      // 매핑 삭제
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: supplierCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${supplierCheckedIds.length}개 공급업체 매핑이 삭제되었습니다.`);
+      setSupplierCheckedIds([]);
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) return;
+    const data = items.map((i) => ({
+      품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
+      기준단가: i.standard_price, 구매단가: i.standard_price, 통화: i.currency_code, 상태: i.status,
+    }));
+    await exportToExcel(data, "구매품목관리.xlsx", "구매품목");
+    toast.success("다운로드 완료");
+  };
+
+  // EDataTable 컬럼 정의 (구매품목) — ts.visibleColumns 기반
+  const COLUMN_RENDER_MAP: Record<string, Partial<EDataTableColumn>> = {
+    item_number: { width: "w-[110px]" },
+    item_name: { minWidth: "min-w-[130px]" },
+    size: { width: "w-[80px]" },
+    unit: { width: "w-[60px]" },
+    standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
+    currency_code: { width: "w-[50px]" },
+    status: { width: "w-[60px]" },
+  };
+  const itemColumns: EDataTableColumn[] = ts.visibleColumns.map((col): EDataTableColumn => ({
+    key: col.key,
+    label: col.label,
+    ...COLUMN_RENDER_MAP[col.key],
+  }));
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ITEM_TABLE}
+        filterId="c16-purchase-item"
+        onFilterChange={setSearchFilters}
+        dataCount={items.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" />
+            엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 구매품목 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">구매품목 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {itemCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={itemColumns}
+                data={ts.groupData(items)}
+                rowKey={(row) => row.id}
+                loading={itemLoading}
+                emptyMessage="등록된 구매품목이 없어요"
+                selectedId={selectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
+                onRowDoubleClick={() => openEditItem()}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-purchase-item"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedItemId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Package className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">품목을 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 품목을 선택하면 공급업체 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 공급업체별 단가 헤더 */}
+                  <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 px-4">
+                    <div className="flex items-center gap-2.5">
+                      <Package className="w-3.5 h-3.5 text-muted-foreground" />
+                      <span className="text-[13px] font-bold">공급업체별 단가</span>
+                      <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">
+                        {supplierItems.length}
+                      </Badge>
+                    </div>
+                    <div className="flex gap-1.5">
+                      <Button
+                        size="sm"
+                        onClick={() => { setSuppCheckedIds(new Set()); setSuppSelectOpen(true); searchSuppliers(); }}
+                      >
+                        <Plus className="w-3.5 h-3.5" /> 공급업체 추가
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={supplierCheckedIds.length === 0}
+                        onClick={handleSupplierMappingDelete}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" /> 삭제
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 공급업체 테이블 */}
+                  <div className="flex-1 min-h-0 overflow-auto pt-px">
+                    {supplierLoading ? (
+                      <div className="flex items-center justify-center h-full">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : supplierItems.length === 0 ? (
+                      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+                        등록된 공급업체가 없어요
+                      </div>
+                    ) : (
+                      <Table noWrapper>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted h-10">
+                            <TableHead className="w-[40px] text-center px-2">
+                              <input
+                                type="checkbox"
+                                className="rounded"
+                                checked={supplierItems.length > 0 && supplierCheckedIds.length === supplierItems.length}
+                                onChange={(e) => {
+                                  if (e.target.checked) setSupplierCheckedIds(supplierItems.map((c) => c.id));
+                                  else setSupplierCheckedIds([]);
+                                }}
+                              />
+                            </TableHead>
+                            <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체코드</TableHead>
+                            <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품번</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품명</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {supplierItems.map((row) => (
+                            <TableRow
+                              key={row.id}
+                              className={cn(
+                                "cursor-pointer h-[41px]",
+                                supplierCheckedIds.includes(row.id) ? "bg-primary/5 border-l-[3px] border-l-primary" : "border-l-[3px] border-l-transparent"
+                              )}
+                              onDoubleClick={() => openEditSupp(row)}
+                            >
+                              <TableCell
+                                className="text-center px-2"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setSupplierCheckedIds((prev) =>
+                                    prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                  );
+                                }}
+                              >
+                                <input type="checkbox" className="rounded" checked={supplierCheckedIds.includes(row.id)} readOnly />
+                              </TableCell>
+                              <TableCell className="text-[13px] font-mono text-muted-foreground">{row.supplier_code}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_name}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_item_code}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right">
+                                {row.base_price ? Number(row.base_price).toLocaleString() : ""}
+                              </TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold">
+                                {row.calculated_price ? Number(row.calculated_price).toLocaleString() : ""}
+                              </TableCell>
+                              <TableCell className="text-[13px]">{row.currency_code}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 품목 수정 모달 ── */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>구매품목 수정</DialogTitle>
+            <DialogDescription>
+              {editItemForm.item_number || ""} — {editItemForm.item_name || ""}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {/* 품목 기본정보 (읽기 전용) */}
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-sm">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+
+            <div className="col-span-2 border-t my-1" />
+
+            {/* 구매 설정 (수정 가능) */}
+            <div className="space-y-1.5">
+              <Label className="text-sm">구매단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="구매단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">기준단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">통화</Label>
+              <Select
+                value={editItemForm.currency_code || ""}
+                onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="통화를 선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 공급업체 검색 및 추가 모달 ── */}
+      <Dialog open={suppSelectOpen} onOpenChange={setSuppSelectOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>공급업체 검색 및 추가</DialogTitle>
+            <DialogDescription>품목에 추가할 공급업체를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 py-2">
+            {/* 검색바 */}
+            <div className="flex gap-2">
+              <Input
+                placeholder="공급업체명으로 검색해주세요"
+                value={suppSearchKeyword}
+                onChange={(e) => setSuppSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchSuppliers()}
+                className="h-9 flex-1"
+              />
+              <Button size="sm" onClick={searchSuppliers} disabled={suppSearchLoading} className="h-9">
+                {suppSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
+              </Button>
+            </div>
+            {/* 검색 결과 테이블 */}
+            <div className="overflow-auto max-h-[350px] border rounded-lg">
+              <Table noWrapper>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="sticky top-0 bg-card w-[40px] text-center">
+                      <Checkbox
+                        checked={suppSearchResults.length > 0 && suppCheckedIds.size === suppSearchResults.length}
+                        onCheckedChange={(checked) => {
+                          if (checked === true) setSuppCheckedIds(new Set(suppSearchResults.map((c) => c.id)));
+                          else setSuppCheckedIds(new Set());
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[110px]">공급업체코드</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[130px]">공급업체명</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">거래유형</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">담당자</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {suppSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : suppSearchResults.map((c) => (
+                    <TableRow
+                      key={c.id}
+                      className={cn("cursor-pointer", suppCheckedIds.has(c.id) && "bg-primary/[0.08]")}
+                      onClick={() => setSuppCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <Checkbox
+                          checked={suppCheckedIds.has(c.id)}
+                          onCheckedChange={(checked) => {
+                            setSuppCheckedIds((prev) => {
+                              const next = new Set(prev);
+                              if (checked === true) next.add(c.id); else next.delete(c.id);
+                              return next;
+                            });
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell className="text-[13px] font-mono text-muted-foreground">{c.supplier_code}</TableCell>
+                      <TableCell className="text-sm font-medium text-foreground">{c.supplier_name}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.division}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.contact_person}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{suppCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setSuppSelectOpen(false)}>취소</Button>
+                <Button onClick={goToSuppDetail} disabled={suppCheckedIds.size === 0}>
+                  <Plus className="w-4 h-4" />
+                  {suppCheckedIds.size}개 다음
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 공급업체 상세 입력/수정 모달 ── */}
+      <Dialog open={suppDetailOpen} onOpenChange={setSuppDetailOpen}>
+        <DialogContent className="max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              공급업체 상세정보 {editSuppData ? "수정" : "입력"} — {selectedItem?.item_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editSuppData ? "공급업체 품번/품명과 기간별 단가를 수정해주세요." : "선택한 공급업체의 품번/품명과 기간별 단가를 설정해주세요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-6 py-2">
+            {selectedSuppsForDetail.map((cust, idx) => {
+              const custKey = cust.supplier_code || cust.id;
+              const mappingRows = suppMappings[custKey] || [];
+              const prices = suppPrices[custKey] || [];
+
+              return (
+                <div key={custKey} className="border rounded-lg overflow-hidden">
+                  {/* 공급업체 헤더 */}
+                  <div className="flex items-center gap-2.5 px-4 py-3 bg-muted border-b">
+                    <span className="text-[13px] font-bold text-foreground">{idx + 1}. {cust.supplier_name || custKey}</span>
+                    <span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">
+                      {custKey}
+                    </span>
+                  </div>
+
+                  <div className="flex gap-4 p-4 bg-card">
+                    {/* 좌: 공급업체 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/50">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">공급업체 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 공급업체 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.supplier_item_code}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "supplier_item_code", e.target.value)}
+                              placeholder="공급업체 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.supplier_item_name}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "supplier_item_name", e.target.value)}
+                              placeholder="공급업체 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button
+                              variant="ghost" size="sm"
+                              className="h-7 w-7 p-0 text-destructive shrink-0"
+                              onClick={() => removeMappingRow(custKey, mRow._id)}
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/30">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button
+                                  variant="ghost" size="sm"
+                                  className="h-6 w-6 p-0 text-destructive"
+                                  onClick={() => removePriceRow(custKey, price._id)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="통화" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "base_price", raw);
+                                }}
+                                className="h-8 text-xs text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-8 text-xs text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm text-foreground">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setSuppDetailOpen(false);
+                if (!editSuppData) setSuppSelectOpen(true);
+                setEditSuppData(null);
+              }}
+            >
+              {editSuppData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleSuppDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={ITEM_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchItems()}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/purchase/supplier/page.tsx b/frontend/app/(main)/COMPANY_8/purchase/supplier/page.tsx
new file mode 100644
index 00000000..521f770e
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/purchase/supplier/page.tsx
@@ -0,0 +1,2759 @@
+"use client";
+
+/**
+ * 공급업체관리 — Type B 마스터-디테일 레이아웃 (리디자인)
+ *
+ * 좌측: 공급업체 목록 (supplier_mng)
+ * 우측: 품목별 단가 + 납품처 정보 탭
+ *
+ * 모달:
+ * - 공급업체 등록/수정 (supplier_mng)
+ * - 품목 추가 (item_info 검색 → supplier_item_mapping + supplier_item_prices)
+ * - 납품처 등록 (delivery_destination)
+ */
+
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Users, Package, MapPin, Search, X, Tag, Coins, Settings2, GripVertical,
+  ChevronRight, ChevronDown,
+} from "lucide-react";
+import {
+  DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { validateField, validateForm, formatField } from "@/lib/utils/validation";
+import { getAvailableNumberingRulesForScreen, previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const SUPPLIER_TABLE = "supplier_mng";
+const MAPPING_TABLE = "supplier_item_mapping";
+const PRICE_TABLE = "supplier_item_prices";
+const DELIVERY_TABLE = "delivery_destination";
+const CONTACT_TABLE = "supplier_contact";
+
+const SUPPLIER_GRID_COLUMNS = [
+  { key: "supplier_code", label: "공급업체코드" },
+  { key: "supplier_name", label: "공급업체명" },
+  { key: "division", label: "공급업체유형" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "전화번호" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "status", label: "상태" },
+];
+
+function SortableMappingRow({ id, children }: { id: string; children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform), transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+  return (
+    <div ref={setNodeRef} style={style} className="flex gap-2 items-center">
+      <div {...attributes} {...listeners} className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0">
+        <GripVertical className="h-3.5 w-3.5" />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default function SupplierManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-supplier", SUPPLIER_TABLE, SUPPLIER_GRID_COLUMNS);
+  const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 공급업체 목록
+  const [suppliers, setSuppliers] = useState<any[]>([]);
+  const [rawSuppliers, setRawSuppliers] = useState<any[]>([]);
+  const [supplierLoading, setSupplierLoading] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
+  const [mainContactMap, setMainContactMap] = useState<Record<string, any>>({});
+  const [supplierCount, setSupplierCount] = useState(0);
+  const [selectedSupplierId, setSelectedSupplierId] = useState<string | null>(null);
+
+  // 우측: 탭
+  const [rightTab, setRightTab] = useState<"items" | "delivery">("items");
+  // 우측: 품목 단가
+  const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceGroups, setPriceGroups] = useState<Record<string, { master: any; details: any[] }>>({});
+  const [priceLoading, setPriceLoading] = useState(false);
+  const [priceCheckedIds, setPriceCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [collapsedPriceCards, setCollapsedPriceCards] = useState<Set<string>>(new Set());
+  // 우측: 납품처
+  const [deliveryItems, setDeliveryItems] = useState<any[]>([]);
+  const [deliveryLoading, setDeliveryLoading] = useState(false);
+
+  // 품목 편집 데이터 (더블클릭 시 상세 입력 모달 재활용)
+  const [editItemData, setEditItemData] = useState<any>(null);
+  const savingRef = useRef(false);
+
+  // 거래처 모달
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [supplierEditMode, setSupplierEditMode] = useState(false);
+  const [supplierForm, setSupplierForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 품목 추가 모달 (1단계: 검색/선택)
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemTotalCount, setItemTotalCount] = useState(0);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 상세 입력 모달 (2단계: 거래처 품번/품명 + 단가)
+  const [itemDetailOpen, setItemDetailOpen] = useState(false);
+  const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; supplier_item_code: string; supplier_item_name: string }>>>({});
+  const [itemPrices, setItemPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 거래처 모달 탭
+  const [supplierModalTab, setSupplierModalTab] = useState<"basic" | "contacts" | "delivery">("basic");
+  // 담당자 (supplier_contact) - 모달 내
+  const [modalContacts, setModalContacts] = useState<any[]>([]);
+  const [modalContactLoading, setModalContactLoading] = useState(false);
+  const [modalContactForm, setModalContactForm] = useState<Record<string, any>>({});
+  const [modalContactEditId, setModalContactEditId] = useState<string | null>(null);
+  const [modalContactFormOpen, setModalContactFormOpen] = useState(false);
+  const [modalContactSaving, setModalContactSaving] = useState(false);
+  // 납품처 (delivery_destination) - 모달 내
+  const [modalDeliveries, setModalDeliveries] = useState<any[]>([]);
+  const [modalDeliveryLoading, setModalDeliveryLoading] = useState(false);
+  const [modalDeliveryForm, setModalDeliveryForm] = useState<Record<string, any>>({});
+  const [modalDeliveryEditId, setModalDeliveryEditId] = useState<string | null>(null);
+  const [modalDeliveryFormOpen, setModalDeliveryFormOpen] = useState(false);
+  const [modalDeliverySaving, setModalDeliverySaving] = useState(false);
+  const [modalDeliveryFormErrors, setModalDeliveryFormErrors] = useState<Record<string, string>>({});
+
+  const [continuousInput, setContinuousInput] = useState(false);
+
+  // 세금유형 (기본정보 탭 내)
+  const [taxTypeRows, setTaxTypeRows] = useState<{ _id: string; tax_type_name: string; rate: string }[]>([]);
+  const [taxTypeOptions, setTaxTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [employeeOptions, setEmployeeOptions] = useState<{ user_id: string; user_name: string; position_name?: string }[]>([]);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const flatten = (vals: any[]): { code: string; label: string }[] => {
+      const result: { code: string; label: string }[] = [];
+      for (const v of vals) {
+        result.push({ code: v.valueCode, label: v.valueLabel });
+        if (v.children?.length) result.push(...flatten(v.children));
+      }
+      return result;
+    };
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["division", "status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${SUPPLIER_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${PRICE_TABLE}/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+
+      // 세금유형 카테고리
+      try {
+        const taxRes = await apiClient.get(`/table-categories/supplier_tax_type/tax_type_name/values`);
+        if (taxRes.data?.success) setTaxTypeOptions(flatten(taxRes.data.data || []));
+      } catch { /* skip */ }
+    };
+    load();
+    apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true })
+      .then((res) => {
+        const users = res.data?.data?.data || res.data?.data?.rows || [];
+        setEmployeeOptions(users.map((u: any) => ({
+          user_id: u.user_id, user_name: u.user_name || u.user_id, position_name: u.position_name,
+        })));
+      }).catch(() => {});
+  }, []);
+
+  // 공급업체 목록 조회
+  const fetchSuppliers = useCallback(async () => {
+    setSupplierLoading(true);
+    try {
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
+      const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "supplier_code", order: "desc" },
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setRawSuppliers(raw);
+
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const mainContact = mainContactMap[r.id];
+        return {
+          ...r,
+          division: resolve("division", r.division),
+          status: resolve("status", r.status),
+          contact_person: mainContact?.contact_name || "",
+          contact_phone: mainContact?.contact_phone || "",
+          email: mainContact?.contact_email || "",
+        };
+      });
+      // 공급업체코드 숫자 기준 내림차순 정렬
+      data.sort((a: any, b: any) => {
+        const aNum = parseInt((a.supplier_code || "").replace(/\D/g, ""), 10) || 0;
+        const bNum = parseInt((b.supplier_code || "").replace(/\D/g, ""), 10) || 0;
+        return bNum - aNum;
+      });
+      setSuppliers(data);
+      setSupplierCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("거래처 조회 실패:", err);
+      toast.error("공급업체 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setSupplierLoading(false);
+    }
+  }, [searchFilters, categoryOptions, employeeOptions, mainContactMap]);
+
+  useEffect(() => { fetchSuppliers(); }, [fetchSuppliers]);
+
+  // 메인 담당자 조회 (최초 1번 + 저장 후 갱신)
+  const fetchMainContacts = useCallback(async () => {
+    try {
+      const contactRes = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+        dataFilter: { enabled: true, filters: [{ columnName: "is_main", operator: "equals", value: "Y" }] },
+      });
+      const allContacts = contactRes.data?.data?.data || contactRes.data?.data?.rows || [];
+      const map: Record<string, any> = {};
+      for (const c of allContacts) {
+        if ((c.is_main === "Y" || c.is_main === true) && c.supplier_id) {
+          map[c.supplier_id] = c;
+        }
+      }
+      setMainContactMap(map);
+    } catch { /* skip */ }
+  }, []);
+
+  useEffect(() => { fetchMainContacts(); }, [fetchMainContacts]);
+
+  const selectedSupplier = suppliers.find((c) => c.id === selectedSupplierId);
+
+  // 선택된 공급업체의 품목 단가 조회
+  useEffect(() => {
+    if (!selectedSupplier?.supplier_code) { setPriceItems([]); setPriceCheckedIds([]); return; }
+    setPriceCheckedIds([]);
+    const fetchItems = async () => {
+      setPriceLoading(true);
+      try {
+        const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+          ]},
+          autoFilter: true,
+        });
+        const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+
+        // 품목 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
+        const grouped: Record<string, { master: any; details: any[] }> = {};
+        const flatItems: any[] = [];
+        const seenItemIds = new Set<string>();
+        for (const m of mappings) {
+          const itemKey = m.item_id || "";
+          if (seenItemIds.has(itemKey)) continue; // 품목당 첫 매핑만 마스터
+          seenItemIds.add(itemKey);
+
+          const itemInfo = itemMap[itemKey] || {};
+          const itemPriceList = allPrices
+            .filter((p: any) => p.item_id === itemKey)
+            .sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
+          const todayPrice = itemPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || itemPriceList[0] || {};
+
+          const masterRow = {
+            ...m,
+            item_number: itemKey,
+            item_name: itemInfo.item_name || "",
+            base_price_type: priceResolve("base_price_type", todayPrice.base_price_type || ""),
+            base_price: todayPrice.base_price || "",
+            discount_type: priceResolve("discount_type", todayPrice.discount_type || ""),
+            discount_value: todayPrice.discount_value || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+
+          // 단가 리스트 (라벨 변환)
+          const priceDetails = itemPriceList.map((p: any) => ({
+            ...p,
+            base_price_type_label: priceResolve("base_price_type", p.base_price_type || ""),
+            discount_type_label: priceResolve("discount_type", p.discount_type || ""),
+            currency_label: priceResolve("currency_code", p.currency_code || ""),
+            is_current: (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today),
+          }));
+
+          grouped[itemKey] = { master: masterRow, details: priceDetails };
+          flatItems.push(masterRow);
+        }
+        setPriceGroups(grouped);
+        setPriceItems(flatItems);
+      } catch (err) {
+        console.error("품목 조회 실패:", err);
+      } finally {
+        setPriceLoading(false);
+      }
+    };
+    fetchItems();
+  }, [selectedSupplier?.supplier_code]);
+
+  // 납품처 조회
+  useEffect(() => {
+    if (!selectedSupplier?.supplier_code) { setDeliveryItems([]); return; }
+    const fetchDelivery = async () => {
+      setDeliveryLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_code", operator: "equals", value: selectedSupplier.supplier_code },
+          ]},
+          autoFilter: true,
+        });
+        setDeliveryItems(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setDeliveryItems([]); } finally { setDeliveryLoading(false); }
+    };
+    fetchDelivery();
+  }, [selectedSupplier?.supplier_code]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 모달 내 담당자 목록 조회
+  const fetchModalContacts = useCallback(async (supplierId: string) => {
+    setModalContactLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      setModalContacts(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalContacts([]); } finally { setModalContactLoading(false); }
+  }, []);
+
+  // 모달 내 납품처 목록 조회
+  const fetchModalDeliveries = useCallback(async (supplierCode: string) => {
+    setModalDeliveryLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: supplierCode }] },
+        autoFilter: true,
+      });
+      setModalDeliveries(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalDeliveries([]); } finally { setModalDeliveryLoading(false); }
+  }, []);
+
+  // 담당자 저장 (등록/수정)
+  const handleModalContactSave = async () => {
+    if (!modalContactForm.contact_name) { toast.error("담당자명은 필수입니다."); return; }
+    if (modalContactEditId) {
+      // 수정 — 로컬 리스트에서 교체 + 메인 설정 시 다른 메인 해제
+      const isSettingMain = modalContactForm.is_main === "Y" || modalContactForm.is_main === true;
+      setModalContacts((prev) => prev.map((c) =>
+        (c._localId || c.id) === modalContactEditId
+          ? { ...c, ...modalContactForm }
+          : isSettingMain ? { ...c, is_main: "N" } : c
+      ));
+    } else {
+      // 추가 — 로컬 리스트에 카드 추가
+      setModalContacts((prev) => [...prev, {
+        ...modalContactForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalContactFormOpen(false);
+    setModalContactForm({});
+    setModalContactEditId(null);
+  };
+
+  // 담당자 삭제
+  const handleModalContactDelete = (contactId: string) => {
+    setModalContacts((prev) => prev.filter((c) => (c._localId || c.id) !== contactId));
+  };
+
+  // 납품처 자동채번 유틸
+  const generateDeliveryCode = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DELIVERY_TABLE}/destination_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        const allRes = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "destination_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const match = (row.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        // 로컬에 추가된 것도 포함
+        for (const d of modalDeliveries) {
+          const match = (d.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLen = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          return prefix + String(maxSeq + 1).padStart(seqLen, "0");
+        }
+      }
+    } catch { /* skip */ }
+    return "";
+  };
+
+  // 납품처 저장 (모달 내)
+  const handleModalDeliverySave = async () => {
+    if (!modalDeliveryForm.destination_name) { toast.error("납품처명은 필수입니다."); return; }
+    if (modalDeliveryEditId) {
+      const isSettingMain = modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true;
+      setModalDeliveries((prev) => prev.map((d) =>
+        (d._localId || d.id) === modalDeliveryEditId
+          ? { ...d, ...modalDeliveryForm }
+          : isSettingMain ? { ...d, is_default: "N" } : d
+      ));
+    } else {
+      setModalDeliveries((prev) => [...prev, {
+        ...modalDeliveryForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalDeliveryFormOpen(false);
+    setModalDeliveryForm({});
+    setModalDeliveryEditId(null);
+    setModalDeliveryFormErrors({});
+  };
+
+  const handleModalDeliveryDelete = (deliveryId: string) => {
+    setModalDeliveries((prev) => prev.filter((d) => (d._localId || d.id) !== deliveryId));
+  };
+
+  // 공급업체 등록 모달 열기
+  const openSupplierRegister = async () => {
+    setSupplierForm({});
+    setFormErrors({});
+    setSupplierEditMode(false);
+    setSupplierModalTab("basic");
+    setModalContacts([]);
+    setModalDeliveries([]);
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setTaxTypeRows([]);
+    setSupplierModalOpen(true);
+    // 공급업체 코드 자동 채번 — 기존 데이터 max값 기반
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${SUPPLIER_TABLE}/supplier_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        // 기존 데이터에서 CUST-XXX 패턴의 최대 순번 조회
+        const allRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "supplier_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const code = row.supplier_code || "";
+          const match = code.match(/(\d+)$/);
+          if (match) {
+            const seq = parseInt(match[1], 10);
+            if (seq > maxSeq) maxSeq = seq;
+          }
+        }
+        // preview로 접두어 패턴 가져오기
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLength = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          const nextSeq = maxSeq + 1;
+          const nextCode = prefix + String(nextSeq).padStart(seqLength, "0");
+          setSupplierForm((prev) => ({ ...prev, supplier_code: nextCode, _numberingRuleId: ruleId }));
+        }
+      }
+    } catch { /* skip */ }
+  };
+
+  const openSupplierEdit = () => {
+    if (!selectedSupplier) return;
+    const rawData = rawSuppliers.find((c) => c.id === selectedSupplierId);
+    setSupplierForm({ ...(rawData || selectedSupplier) });
+    setFormErrors({});
+    setSupplierEditMode(true);
+    setSupplierModalTab("basic");
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setModalContactForm({});
+    setModalDeliveryForm({});
+    setModalContactEditId(null);
+    setModalDeliveryEditId(null);
+    // 수정 모드에서는 바로 조회
+    const code = (rawData || selectedSupplier).supplier_code;
+    const id = (rawData || selectedSupplier).id;
+    if (id) {
+      fetchModalContacts(id);
+      // 세금유형 로드
+      apiClient.post(`/table-management/tables/supplier_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: id }] },
+        autoFilter: true,
+      }).then((res: any) => {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        setTaxTypeRows(rows.map((r: any) => ({ _id: r.id, tax_type_name: r.tax_type_name || "", rate: String(r.rate || "") })));
+      }).catch(() => setTaxTypeRows([]));
+    }
+    if (code) fetchModalDeliveries(code);
+    setSupplierModalOpen(true);
+  };
+
+  // 폼 필드 변경 시 자동 포맷팅 + 실시간 검증
+  const handleFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setSupplierForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => {
+      const next = { ...prev };
+      if (error) next[field] = error; else delete next[field];
+      return next;
+    });
+  };
+
+  // 세금유형/담당자/납품처를 한번에 저장하는 헬퍼
+  const saveSubTables = async (supplierId: string, supplierCode: string) => {
+    // 세금유형 — 기존 삭제 후 재생성
+    try {
+      const existTax = await apiClient.post(`/table-management/tables/supplier_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      const existRows = existTax.data?.data?.data || existTax.data?.data?.rows || [];
+      if (existRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/supplier_tax_type/delete`, {
+          data: existRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+      for (const t of taxTypeRows.filter((r) => r.tax_type_name)) {
+        await apiClient.post(`/table-management/tables/supplier_tax_type/add`, {
+          id: crypto.randomUUID(), supplier_id: supplierId,
+          tax_type_name: t.tax_type_name, tax_type_id: t.tax_type_name,
+          rate: t.rate ? Number(t.rate) : 0,
+        });
+      }
+    } catch { /* skip */ }
+
+    // 담당자 — 기존 삭제 후 전체 재생성
+    try {
+      const existContacts = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      const existCRows = existContacts.data?.data?.data || existContacts.data?.data?.rows || [];
+      if (existCRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${CONTACT_TABLE}/delete`, {
+          data: existCRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const c of modalContacts) {
+      try {
+        await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/add`, {
+          id: crypto.randomUUID(), supplier_id: supplierId,
+          contact_name: c.contact_name || "", contact_phone: c.contact_phone || "",
+          contact_email: c.contact_email || "", department: c.department || "",
+          is_main: c.is_main || "N", memo: c.memo || "",
+        });
+      } catch { /* skip */ }
+    }
+
+    // 납품처 — 기존 삭제 후 전체 재생성
+    try {
+      const existDeliveries = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: supplierCode }] },
+        autoFilter: true,
+      });
+      const existDRows = existDeliveries.data?.data?.data || existDeliveries.data?.data?.rows || [];
+      if (existDRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
+          data: existDRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const d of modalDeliveries) {
+      try {
+        await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
+          id: crypto.randomUUID(), supplier_code: supplierCode,
+          destination_code: d.destination_code || "", destination_name: d.destination_name || "",
+          address: d.address || "", manager_name: d.manager_name || "",
+          phone: d.phone || "", memo: d.memo || "", is_default: d.is_default || "N",
+        });
+      } catch { /* skip */ }
+    }
+  };
+
+  const handleSupplierSave = async () => {
+    if (!supplierForm.supplier_name) { toast.error("공급업체명은 필수입니다."); return; }
+    if (!supplierForm.status) { toast.error("상태는 필수입니다."); return; }
+    const errors = validateForm(supplierForm, ["contact_phone", "email", "business_number"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) {
+      toast.error("입력 형식을 확인해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, _numberingRuleId, ...fields } = supplierForm;
+      const cleanFields: Record<string, any> = {};
+      for (const [key, value] of Object.entries(fields)) {
+        cleanFields[key] = value === "" ? null : value;
+      }
+
+      if (supplierEditMode && id) {
+        // 수정
+        await apiClient.put(`/table-management/tables/${SUPPLIER_TABLE}/edit`, {
+          originalData: { id }, updatedData: cleanFields,
+        });
+        await saveSubTables(id, cleanFields.supplier_code || supplierForm.supplier_code);
+        toast.success("저장되었습니다.");
+      } else {
+        // 신규 등록
+        await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/add`, cleanFields);
+        // id 획득
+        const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: cleanFields.supplier_code }] },
+          autoFilter: true,
+        });
+        const newRow = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+        if (newRow?.id) {
+          await saveSubTables(newRow.id, cleanFields.supplier_code);
+        }
+        toast.success("공급업체가 등록되었습니다.");
+      }
+
+      fetchSuppliers();
+      fetchMainContacts();
+      if (!supplierEditMode && continuousInput) {
+        // 연속입력 — 폼 초기화하고 모달 유지
+        setSupplierForm({});
+        setModalContacts([]);
+        setModalDeliveries([]);
+        setTaxTypeRows([]);
+        setSupplierModalTab("basic");
+        // 새 코드 채번
+        try {
+          const ruleRes = await apiClient.get(`/numbering-rules/by-column/${SUPPLIER_TABLE}/supplier_code`);
+          const ruleData = ruleRes.data;
+          if (ruleData?.success && ruleData?.data?.ruleId) {
+            const ruleId = ruleData.data.ruleId;
+            const allRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, { page: 1, size: 500, autoFilter: true, sort: { columnName: "supplier_code", order: "desc" } });
+            const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+            let maxSeq = 0;
+            for (const row of allRows) { const match = (row.supplier_code || "").match(/(\d+)$/); if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; } }
+            const previewRes = await previewNumberingCode(ruleId);
+            if (previewRes.success && previewRes.data?.generatedCode) {
+              const prefix = previewRes.data.generatedCode.replace(/\d+$/, "");
+              const seqLen = (previewRes.data.generatedCode.match(/(\d+)$/) || ["", "001"])[1].length;
+              setSupplierForm({ supplier_code: prefix + String(maxSeq + 1).padStart(seqLen, "0") });
+            }
+          }
+        } catch { /* skip */ }
+        toast.success("등록 완료. 다음 공급업체를 입력하세요.");
+      } else {
+        setSupplierModalOpen(false);
+        // 우측 패널 갱신
+        if (selectedSupplierId) {
+          const cid = selectedSupplierId;
+          setSelectedSupplierId(null);
+          setTimeout(() => setSelectedSupplierId(cid), 50);
+        }
+      }
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 공급업체 삭제
+  const handleSupplierDelete = async () => {
+    if (!selectedSupplierId) return;
+    const ok = await confirm("공급업체를 삭제하시겠습니까?", {
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${SUPPLIER_TABLE}/delete`, {
+        data: [{ id: selectedSupplierId }],
+      });
+      toast.success("삭제되었습니다.");
+      setSelectedSupplierId(null);
+      fetchSuppliers();
+    } catch { toast.error("삭제에 실패했습니다."); }
+  };
+
+  // 품목 검색
+  const searchItems = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const allItems = res.data?.data?.data || res.data?.data?.rows || [];
+      setItemTotalCount(allItems.length);
+      const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
+      const PURCHASE_CODES = ["s"]; // 구매관리 카테고리 코드
+      setItemSearchResults(allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        const divCodes = (item.division || "").split(",").map((c: string) => c.trim());
+        return divCodes.some((code: string) => PURCHASE_CODES.includes(code));
+      }));
+    } catch { /* skip */ } finally { setItemSearchLoading(false); }
+  };
+
+  // 품목 선택 완료 → 상세 입력 모달로 전환
+  const goToItemDetail = () => {
+    const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+    setSelectedItemsForDetail(selected);
+    const mappings: typeof itemMappings = {};
+    const prices: typeof itemPrices = {};
+    for (const item of selected) {
+      const key = item.item_number || item.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: item.standard_price || item.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: item.standard_price || item.selling_price || "",
+      }];
+    }
+    setItemMappings(mappings);
+    setItemPrices(prices);
+    setItemSelectOpen(false);
+    setItemDetailOpen(true);
+  };
+
+  // 거래처 품번/품명 행 추가
+  const addMappingRow = (itemKey: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, supplier_item_code: "", supplier_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (itemKey: string, rowId: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const handleMappingDragEnd = (itemKey: string, event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setItemMappings((prev) => {
+      const arr = [...(prev[itemKey] || [])];
+      const oldIdx = arr.findIndex((r) => r._id === active.id);
+      const newIdx = arr.findIndex((r) => r._id === over.id);
+      return { ...prev, [itemKey]: arrayMove(arr, oldIdx, newIdx) };
+    });
+  };
+
+  const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  // 단가 행 추가
+  const addPriceRow = (itemKey: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (itemKey: string, rowId: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1; // "10원" → 10, "100원" → 100
+          if (roundLabel === "반올림") {
+            calc = Math.round(calc / unit) * unit;
+          } else if (roundLabel === "절삭") {
+            calc = Math.floor(calc / unit) * unit;
+          } else if (roundLabel === "올림") {
+            calc = Math.ceil(calc / unit) * unit;
+          }
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  // 품목 편집 열기
+  const openEditItem = async (row: any) => {
+    const itemKey = row.item_number || row.item_id;
+    let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "equals", value: itemKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) itemInfo = found;
+    } catch { /* skip */ }
+
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "supplier_id", operator: "equals", value: selectedSupplier!.supplier_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.supplier_item_code || m.supplier_item_name)
+        .map((m: any) => ({
+          _id: `m_existing_${m.id}`,
+          supplier_item_code: m.supplier_item_code || "",
+          supplier_item_name: m.supplier_item_name || "",
+        }));
+    } catch { /* skip */ }
+
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "supplier_id", operator: "equals", value: selectedSupplier!.supplier_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date ? String(p.start_date).split("T")[0] : "",
+        end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedItemsForDetail([itemInfo]);
+    setItemMappings({ [itemKey]: mappingRows });
+    setItemPrices({ [itemKey]: priceRows });
+    setEditItemData(row);
+    setItemDetailOpen(true);
+  };
+
+  const handleItemDetailSave = async () => {
+    if (!selectedSupplier) return;
+    if (savingRef.current) return;
+    savingRef.current = true;
+    const isEditingExisting = !!editItemData;
+    setSaving(true);
+    try {
+      for (const item of selectedItemsForDetail) {
+        const itemKey = item.item_number || item.id;
+        const mappingRows = itemMappings[itemKey] || [];
+
+        if (isEditingExisting && editItemData?.id) {
+          // 기존 매핑 조회
+          let existingMaps: any[] = [];
+          try {
+            const existingMappings = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingMaps = existingMappings.data?.data?.data || existingMappings.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 매핑 upsert: 기존 것은 update, 새 것은 insert, 남은 것은 delete
+          const usedExistingIds = new Set<string>();
+          let firstMappingId: string | null = editItemData.id;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const existMap = existingMaps[mi];
+            if (existMap) {
+              // update
+              await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+                originalData: { id: existMap.id },
+                updatedData: {
+                  supplier_item_code: mappingRows[mi].supplier_item_code || "",
+                  supplier_item_name: mappingRows[mi].supplier_item_name || "",
+                },
+              });
+              usedExistingIds.add(existMap.id);
+              if (mi === 0) firstMappingId = existMap.id;
+            } else {
+              // insert
+              const mRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+                id: crypto.randomUUID(),
+                supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+                supplier_item_code: mappingRows[mi].supplier_item_code || "",
+                supplier_item_name: mappingRows[mi].supplier_item_name || "",
+              });
+              if (mi === 0 && !firstMappingId) firstMappingId = mRes.data?.data?.id || null;
+            }
+          }
+          // 초과분 delete
+          const toDeleteMaps = existingMaps.filter((m) => !usedExistingIds.has(m.id));
+          if (toDeleteMaps.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: toDeleteMaps.map((m: any) => ({ id: m.id })),
+            });
+          }
+
+          // 기존 단가 조회
+          let existingPriceRows: any[] = [];
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingPriceRows = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 단가 upsert
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          const usedPriceIds = new Set<string>();
+          for (let pi = 0; pi < priceRows.length; pi++) {
+            const price = priceRows[pi];
+            const priceData = {
+              mapping_id: firstMappingId || editItemData.id,
+              supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            };
+            const existPrice = existingPriceRows[pi];
+            if (existPrice) {
+              await apiClient.put(`/table-management/tables/${PRICE_TABLE}/edit`, {
+                originalData: { id: existPrice.id },
+                updatedData: priceData,
+              });
+              usedPriceIds.add(existPrice.id);
+            } else {
+              await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+                id: crypto.randomUUID(), ...priceData,
+              });
+            }
+          }
+          // 초과분 delete
+          const toDeletePrices = existingPriceRows.filter((p) => !usedPriceIds.has(p.id));
+          if (toDeletePrices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: toDeletePrices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } else {
+          if (!mappingRows.length || !mappingRows[0]?.supplier_item_code) {
+            const existingCheck = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 1,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            if ((existingCheck.data?.data?.data || existingCheck.data?.data?.rows || []).length > 0) {
+              toast.warning(`${item.item_name || itemKey} 품목은 이미 등록되어 있습니다.`);
+              continue;
+            }
+          }
+
+          let mappingId: string | null = null;
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+            supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+            supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+          });
+          mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              supplier_item_code: mappingRows[mi].supplier_item_code || "",
+              supplier_item_name: mappingRows[mi].supplier_item_name || "",
+            });
+          }
+
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedItemsForDetail.length}개 품목이 추가되었습니다.`);
+      setItemDetailOpen(false);
+      setEditItemData(null);
+      setItemCheckedIds(new Set());
+      const cid = selectedSupplierId;
+      setSelectedSupplierId(null);
+      setTimeout(() => setSelectedSupplierId(cid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+      savingRef.current = false;
+    }
+  };
+
+  // 품목 매핑 삭제
+  const handlePriceItemDelete = async () => {
+    if (priceCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${priceCheckedIds.length}개 품목 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      for (const mappingId of priceCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: priceCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${priceCheckedIds.length}개 품목 매핑이 삭제되었습니다.`);
+      setPriceCheckedIds([]);
+      const cid = selectedSupplierId;
+      setSelectedSupplierId(null);
+      setTimeout(() => setSelectedSupplierId(cid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // EDataTable 컬럼 정의 (공급업체 목록) — ts.visibleColumns 순서를 따름
+  const supplierColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      supplier_code: { width: "w-[120px]" },
+      supplier_name: { minWidth: "min-w-[140px]" },
+      division: {
+        width: "w-[80px]",
+        render: (val: any) =>
+          val ? (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
+              {val}
+            </Badge>
+          ) : null,
+      },
+      contact_person: { width: "w-[80px]" },
+      contact_phone: { width: "w-[120px]" },
+      email: { width: "w-[160px]" },
+      business_number: { width: "w-[120px]" },
+      address: { minWidth: "min-w-[150px]" },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val}
+            </Badge>
+          ) : null,
+      },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (suppliers.length === 0) return;
+    toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
+    try {
+      const allMappings: any[] = [];
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 5000, autoFilter: true,
+      });
+      const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemIds.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+            autoFilter: true,
+          });
+          for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+            itemMap[item.item_number] = item;
+          }
+        } catch { /* skip */ }
+      }
+      for (const m of mappings) {
+        const itemInfo = itemMap[m.item_id] || {};
+        allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
+      }
+
+      const rows: Record<string, any>[] = [];
+      for (const c of suppliers) {
+        const suppMappings = allMappings.filter((m) => m.supplier_id === c.supplier_code);
+        if (suppMappings.length === 0) {
+          rows.push({
+            공급업체코드: c.supplier_code, 공급업체명: c.supplier_name,
+            공급업체유형: getCategoryLabel("division", c.division),
+            담당자: c.contact_person, 전화번호: c.contact_phone,
+            사업자번호: c.business_number, 이메일: c.email,
+            상태: getCategoryLabel("status", c.status),
+            품목코드: "", 품명: "", 규격: "",
+            공급업체품번: "", 공급업체품명: "",
+            기준가: "", 할인유형: "", 할인값: "", 단가: "", 통화: "",
+          });
+        } else {
+          for (const m of suppMappings) {
+            rows.push({
+              공급업체코드: c.supplier_code, 공급업체명: c.supplier_name,
+              공급업체유형: getCategoryLabel("division", c.division),
+              담당자: c.contact_person, 전화번호: c.contact_phone,
+              사업자번호: c.business_number, 이메일: c.email,
+              상태: getCategoryLabel("status", c.status),
+              품목코드: m.item_id || "", 품명: m.item_name || "", 규격: m.item_spec || "",
+              공급업체품번: m.supplier_item_code || "", 공급업체품명: m.supplier_item_name || "",
+              기준가: m.base_price || "", 할인유형: m.discount_type || "", 할인값: m.discount_value || "",
+              단가: m.calculated_price || "", 통화: m.currency_code || "",
+            });
+          }
+        }
+      }
+      await exportToExcel(rows, "공급업체관리.xlsx", "거래처+품목");
+      toast.dismiss("excel-dl");
+      toast.success(`${rows.length}행 다운로드 완료`);
+    } catch (err) {
+      toast.dismiss("excel-dl");
+      toast.error("다운로드에 실패했습니다.");
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={SUPPLIER_TABLE}
+        filterId="c16-supplier"
+        onFilterChange={setSearchFilters}
+        dataCount={suppliers.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button
+            variant="outline" size="sm" className="h-8" disabled={excelDetecting}
+            onClick={async () => {
+              setExcelDetecting(true);
+              try {
+                const result = await autoDetectMultiTableConfig(SUPPLIER_TABLE);
+                if (result.success && result.data) {
+                  setExcelChainConfig(result.data);
+                  setExcelUploadOpen(true);
+                } else {
+                  toast.error(result.message || "테이블 구조 분석 실패");
+                }
+              } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+            }}
+          >
+            {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />}
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 공급업체 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">공급업체 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {supplierCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <label className="flex items-center gap-1.5 cursor-pointer mr-1">
+                    <input type="checkbox" checked={showInactive} onChange={(e) => setShowInactive(e.target.checked)} className="rounded" />
+                    <span className="text-[11px] text-muted-foreground">거래정지 포함</span>
+                  </label>
+                  <Button size="sm" onClick={openSupplierRegister}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedSupplierId} onClick={openSupplierEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedSupplierId} onClick={handleSupplierDelete}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={supplierColumns}
+                data={ts.groupData(showInactive ? suppliers : suppliers.filter((c) => c.status !== "거래정지"))}
+                rowKey={(row) => row.id}
+                loading={supplierLoading}
+                emptyMessage="등록된 공급업체가 없어요"
+                selectedId={selectedSupplierId}
+                onSelect={(id) => setSelectedSupplierId(id)}
+                onRowDoubleClick={(row) => { setSelectedSupplierId(row.id); openSupplierEdit(); }}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-supplier"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedSupplierId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">공급업체를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 공급업체를 선택하면 상세 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 탭 + 버튼 통합 헤더 */}
+                  <Tabs
+                    value={rightTab}
+                    onValueChange={(v) => setRightTab(v as "items" | "delivery")}
+                    className="flex flex-col flex-1 overflow-hidden gap-0"
+                  >
+                    <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                      <TabsList className="bg-transparent h-auto p-0 rounded-none">
+                        <TabsTrigger
+                          value="items"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <Package className="w-3.5 h-3.5" /> 공급업체별 품목정보
+                          {Object.keys(priceGroups).length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{Object.keys(priceGroups).length}</Badge>
+                          )}
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="delivery"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <MapPin className="w-3.5 h-3.5" /> 납품처 정보
+                          {deliveryItems.length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{deliveryItems.length}</Badge>
+                          )}
+                        </TabsTrigger>
+                      </TabsList>
+                      <div className="flex gap-1.5">
+                        {rightTab === "items" ? (
+                          <>
+                            <Button size="sm" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
+                              <Plus className="w-3.5 h-3.5" /> 품목 추가
+                            </Button>
+                            <Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0} onClick={handlePriceItemDelete}>
+                              <Trash2 className="w-3.5 h-3.5" /> 삭제
+                            </Button>
+                          </>
+                        ) : (
+                          <Button size="sm" variant="outline" onClick={openSupplierEdit}>
+                            <Pencil className="w-3.5 h-3.5 mr-1" /> 공급업체 수정에서 관리
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 품목정보 탭 */}
+                    <TabsContent value="items" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[40px] text-center px-2">
+                                <input
+                                  type="checkbox"
+                                  className="rounded"
+                                  checked={priceItems.length > 0 && priceCheckedIds.length === priceItems.length}
+                                  onChange={(e) => setPriceCheckedIds(e.target.checked ? priceItems.map((p) => p.id) : [])}
+                                />
+                              </TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                              <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품번</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품명</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                              <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                              <TableHead className="w-[60px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                              <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {priceLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.keys(priceGroups).length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 품목이 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.entries(priceGroups).map(([itemKey, group]) => {
+                              const isExpanded = expandedItems.has(itemKey);
+                              const m = group.master;
+                              const isChecked = priceCheckedIds.includes(m.id);
+                              return (
+                                <React.Fragment key={itemKey}>
+                                  {/* 마스터 행 */}
+                                  <TableRow
+                                    className={cn(
+                                      "cursor-pointer border-l-[3px] border-l-transparent h-[41px]",
+                                      isChecked && "bg-primary/5 border-l-primary"
+                                    )}
+                                    onClick={() => {
+                                      setExpandedItems((prev) => {
+                                        const next = new Set(prev);
+                                        if (next.has(itemKey)) next.delete(itemKey); else next.add(itemKey);
+                                        return next;
+                                      });
+                                    }}
+                                    onDoubleClick={() => openEditItem(m)}
+                                  >
+                                    <TableCell
+                                      className="text-center px-2"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        setPriceCheckedIds((prev) =>
+                                          prev.includes(m.id) ? prev.filter((id) => id !== m.id) : [...prev, m.id]
+                                        );
+                                      }}
+                                    >
+                                      <input type="checkbox" className="rounded" checked={isChecked} readOnly />
+                                    </TableCell>
+                                    <TableCell className="text-[13px] font-mono">
+                                      <div className="flex items-center gap-1">
+                                        {isExpanded
+                                          ? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                          : <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                        }
+                                        {m.item_number}
+                                      </div>
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.supplier_item_code}</TableCell>
+                                    <TableCell className="text-[13px]">{m.supplier_item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.base_price_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">
+                                      {m.base_price ? Number(m.base_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.discount_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">{m.discount_value ? Number(m.discount_value).toLocaleString() : ""}</TableCell>
+                                    <TableCell className="text-[13px] text-right font-semibold">
+                                      {m.calculated_price ? Number(m.calculated_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.currency_code}</TableCell>
+                                  </TableRow>
+
+                                  {/* 현재 단가 카드 (펼쳤을 때) */}
+                                  {isExpanded && (() => {
+                                    const cp = group.details.find((p) => p.is_current) || group.details[0];
+                                    if (!cp) return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="py-3 px-4 text-xs text-muted-foreground">등록된 단가가 없어요</TableCell>
+                                      </TableRow>
+                                    );
+                                    return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="px-4 py-3">
+                                          <div className="border border-primary/20 rounded-lg bg-card overflow-hidden">
+                                            {/* 카드 헤더 */}
+                                            <div className="flex items-center justify-between px-4 py-2 bg-primary/[0.04] border-b border-primary/10">
+                                              <div className="flex items-center gap-2">
+                                                <Coins className="w-3.5 h-3.5 text-primary" />
+                                                <span className="text-xs font-semibold">적용 단가</span>
+                                                <Badge variant="secondary" className="text-[9px] px-1.5 py-0 bg-primary/10 text-primary">현재</Badge>
+                                              </div>
+                                              {group.details.length > 1 && (
+                                                <span className="text-[10px] text-muted-foreground">전체 {group.details.length}건 중</span>
+                                              )}
+                                            </div>
+                                            {/* 카드 내용 */}
+                                            <div className="px-5 py-3.5 flex items-end gap-0 text-[13px]">
+                                              <div className="flex flex-col pr-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기간</span>
+                                                <span className="font-mono text-muted-foreground text-xs">
+                                                  {cp.start_date ? String(cp.start_date).split("T")[0] : "—"} ~ {cp.end_date ? String(cp.end_date).split("T")[0] : "—"}
+                                                </span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준유형</span>
+                                                <span>{cp.base_price_type_label || "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준가</span>
+                                                <span className="font-mono font-medium">{cp.base_price ? Number(cp.base_price).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인유형</span>
+                                                <span>{cp.discount_type_label && cp.discount_type_label !== "할인없음" ? cp.discount_type_label : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인값</span>
+                                                <span className="font-mono">{cp.discount_value ? Number(cp.discount_value).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">단수처리</span>
+                                                <span>
+                                                  {cp.rounding_unit_value
+                                                    ? (priceCategoryOptions["rounding_unit_value"]?.find((o) => o.code === cp.rounding_unit_value)?.label || cp.rounding_unit_value)
+                                                    : "-"}
+                                                </span>
+                                              </div>
+                                              <span className="text-primary/50 px-4 pb-0.5 text-lg">→</span>
+                                              <div className="flex flex-col pl-1">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">계산단가</span>
+                                                <span className="text-base font-bold font-mono text-foreground">
+                                                  {(cp.calculated_price || cp.unit_price) ? Number(cp.calculated_price || cp.unit_price).toLocaleString() : "-"}
+                                                  <span className="text-xs font-normal text-muted-foreground ml-1.5">{cp.currency_label}</span>
+                                                </span>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })()}
+                                </React.Fragment>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+
+                    {/* 납품처 탭 */}
+                    <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                              <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                              <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                              <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {deliveryLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 납품처가 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.map((d) => (
+                              <TableRow key={d.id} className="h-[41px]">
+                                <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                                <TableCell className="text-sm">{d.destination_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                                <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                                <TableCell className="text-[13px]">{d.phone}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                                <TableCell className="text-center">
+                                  {d.is_default && (
+                                    <Badge variant="default" className="text-[10px] px-1.5 py-0 h-5">메인</Badge>
+                                  )}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 모달: 공급업체 등록/수정 (3탭) ── */}
+      <Dialog open={supplierModalOpen} onOpenChange={(open) => {
+        if (!open && isConfirmOpenRef.current) return;
+        setSupplierModalOpen(open);
+        if (!open) {
+          setModalContactFormOpen(false);
+          setModalDeliveryFormOpen(false);
+          setModalContactForm({});
+          setModalDeliveryForm({});
+          setModalContactEditId(null);
+          setModalDeliveryEditId(null);
+          fetchSuppliers();
+          if (supplierForm.supplier_code) {
+            const cid = selectedSupplierId;
+            setSelectedSupplierId(null);
+            setTimeout(() => setSelectedSupplierId(cid), 50);
+          }
+        }
+      }}>
+        <DialogContent className="max-w-4xl h-[85vh] flex flex-col overflow-hidden p-0">
+          <DialogHeader className="px-6 pt-5 pb-0 shrink-0">
+            <DialogTitle>{supplierEditMode ? "공급업체 수정" : "공급업체 등록"}</DialogTitle>
+            <DialogDescription>
+              {supplierEditMode ? "공급업체 정보를 수정합니다." : "새 공급업체를 등록합니다."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <Tabs value={supplierModalTab} onValueChange={(v: any) => setSupplierModalTab(v)} className="flex flex-col flex-1 overflow-hidden">
+            <div className="shrink-0">
+              <TabsList className="bg-transparent w-full h-auto p-0 rounded-none gap-0">
+                <TabsTrigger value="basic" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  기본정보
+                </TabsTrigger>
+                <TabsTrigger value="contacts" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  담당자 관리
+                  {modalContacts.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalContacts.length}</span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="delivery" className="flex-1 rounded-none py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  납품처 관리
+                  {modalDeliveries.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalDeliveries.length}</span>
+                  )}
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            {/* 기본정보 탭 */}
+            <TabsContent value="basic" className="flex-1 overflow-y-auto mt-0">
+              <div className="px-6 py-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체 코드</Label>
+                    <Input
+                      value={supplierForm.supplier_code || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, supplier_code: e.target.value }))}
+                      placeholder={supplierEditMode ? "" : "자동 생성"}
+                      className={cn("h-9 font-mono", !supplierEditMode && supplierForm.supplier_code && "bg-muted")}
+                      readOnly={!supplierEditMode && !!supplierForm.supplier_code}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={supplierForm.supplier_name || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, supplier_name: e.target.value }))}
+                      placeholder="공급업체명"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체 유형</Label>
+                    <Select
+                      value={supplierForm.division || "__none__"}
+                      onValueChange={(v) => setSupplierForm((p) => ({ ...p, division: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="공급업체 유형" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["division"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+                    <Select
+                      value={supplierForm.status || "__none__"}
+                      onValueChange={(v) => setSupplierForm((p) => ({ ...p, status: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="상태" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체담당자</Label>
+                    <Input
+                      value={supplierForm.contact_person || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, contact_person: e.target.value }))}
+                      placeholder="공급업체담당자"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">전화번호</Label>
+                    <Input
+                      value={supplierForm.contact_phone || ""}
+                      onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                      placeholder="010-0000-0000"
+                      className={cn("h-9", formErrors.contact_phone && "border-destructive")}
+                    />
+                    {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">이메일</Label>
+                    <Input
+                      value={supplierForm.email || ""}
+                      onChange={(e) => handleFormChange("email", e.target.value)}
+                      placeholder="example@email.com"
+                      className={cn("h-9", formErrors.email && "border-destructive")}
+                    />
+                    {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">사업자번호</Label>
+                    <Input
+                      value={supplierForm.business_number || ""}
+                      onChange={(e) => handleFormChange("business_number", e.target.value)}
+                      placeholder="000-00-00000"
+                      className={cn("h-9", formErrors.business_number && "border-destructive")}
+                    />
+                    {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+                  </div>
+                  <div className="space-y-1.5 col-span-2">
+                    <Label className="text-sm">주소</Label>
+                    <Input
+                      value={supplierForm.address || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="주소"
+                      className="h-9"
+                    />
+                  </div>
+                </div>
+
+                {/* 세금유형 */}
+                <div className="mt-4 pt-4 border-t">
+                  <div className="flex items-center justify-between mb-2">
+                    <Label className="text-sm font-semibold flex items-center gap-1.5">
+                      <Coins className="w-3.5 h-3.5 text-primary" /> 세금유형
+                    </Label>
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => {
+                      setTaxTypeRows((prev) => [...prev, { _id: `tax_${Date.now()}_${Math.random()}`, tax_type_name: "", rate: "" }]);
+                    }}>
+                      <Plus className="h-3 w-3 mr-1" /> 추가
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    {taxTypeRows.map((row, idx) => (
+                      <div key={row._id} className="flex gap-2 items-center">
+                        <span className="text-xs text-muted-foreground w-4 shrink-0">{idx + 1}</span>
+                        <Select value={row.tax_type_name} onValueChange={(v) => {
+                          setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, tax_type_name: v } : r));
+                        }}>
+                          <SelectTrigger className="h-9 text-[13px] flex-1"><SelectValue placeholder="세금유형 선택" /></SelectTrigger>
+                          <SelectContent>
+                            {taxTypeOptions.map((o) => (
+                              <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <Input
+                          value={row.rate}
+                          onChange={(e) => {
+                            const v = e.target.value.replace(/[^\d.]/g, "");
+                            setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, rate: v } : r));
+                          }}
+                          placeholder="세율 %"
+                          className="h-9 text-[13px] w-[80px] text-right"
+                        />
+                        <span className="text-xs text-muted-foreground">%</span>
+                        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                          onClick={() => setTaxTypeRows((prev) => prev.filter((r) => r._id !== row._id))}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* 담당자 관리 탭 */}
+            <TabsContent value="contacts" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 담당자 목록 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    담당자 {modalContacts.length}명
+                  </span>
+                  <Button size="sm" onClick={() => {
+                    setModalContactForm({});
+                    setModalContactEditId(null);
+                    setModalContactFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 담당자 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalContactLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalContacts.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Users className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 담당자가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자명</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부서</TableHead>
+                          <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalContacts].sort((a, b) => {
+                          const aMain = a.is_main === "Y" || a.is_main === true ? 0 : 1;
+                          const bMain = b.is_main === "Y" || b.is_main === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((c) => (
+                          <TableRow key={c._localId || c.id} className="h-[41px]">
+                            <TableCell className="text-sm font-medium">{c.contact_name}</TableCell>
+                            <TableCell className="text-[13px]">{c.contact_phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.contact_email}</TableCell>
+                            <TableCell className="text-[13px]">{c.department}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (c.is_main === "Y" || c.is_main === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = c.is_main === "Y" || c.is_main === true;
+                                  if (isCurrentMain) {
+                                    // 메인 해제
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id) ? { ...item, is_main: "N" } : item
+                                    ));
+                                  } else {
+                                    // 메인 설정 — 기존 메인이 있으면 확인
+                                    const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== (c._localId || c.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id)
+                                        ? { ...item, is_main: "Y" }
+                                        : { ...item, is_main: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(c.is_main === "Y" || c.is_main === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalContactForm({ ...c });
+                                    setModalContactEditId(c._localId || c.id);
+                                    setModalContactFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalContactDelete(c._localId || c.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 담당자 폼 (인라인) */}
+                {modalContactFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalContactEditId ? "담당자 수정" : "담당자 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalContactForm.contact_name || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_name: e.target.value }))}
+                          placeholder="담당자명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalContactForm.contact_phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalContactForm((p) => ({ ...p, contact_phone: formatted }));
+                          }}
+                          placeholder="010-0000-0000"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">이메일</Label>
+                        <Input
+                          value={modalContactForm.contact_email || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_email: e.target.value }))}
+                          placeholder="example@email.com"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">부서</Label>
+                        <Input
+                          value={modalContactForm.department || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, department: e.target.value }))}
+                          placeholder="부서명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalContactForm.memo || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalContactForm.is_main === "Y" || modalContactForm.is_main === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== modalContactEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalContacts((prev) => prev.map((item) => ({ ...item, is_main: "N" })));
+                                }
+                                setModalContactForm((p) => ({ ...p, is_main: "Y" }));
+                              } else {
+                                setModalContactForm((p) => ({ ...p, is_main: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 담당자</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalContactFormOpen(false); setModalContactForm({}); setModalContactEditId(null); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalContactSave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalContactEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            {/* ── 탭3: 납품처 관리 ── */}
+            <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 납품처 목록 헤더 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    납품처 {modalDeliveries.length}개
+                  </span>
+                  <Button size="sm" onClick={async () => {
+                    const code = await generateDeliveryCode();
+                    setModalDeliveryForm({ destination_code: code });
+                    setModalDeliveryEditId(null);
+                    setModalDeliveryFormErrors({});
+                    setModalDeliveryFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalDeliveryLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalDeliveries.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <MapPin className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 납품처가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalDeliveries].sort((a, b) => {
+                          const aMain = a.is_default === "Y" || a.is_default === true ? 0 : 1;
+                          const bMain = b.is_default === "Y" || b.is_default === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((d) => (
+                          <TableRow key={d._localId || d.id || d.destination_code} className="h-[41px]">
+                            <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                            <TableCell className="text-sm">{d.destination_name}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                            <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                            <TableCell className="text-[13px]">{d.phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (d.is_default === "Y" || d.is_default === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = d.is_default === "Y" || d.is_default === true;
+                                  if (isCurrentMain) {
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id) ? { ...item, is_default: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== (d._localId || d.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id)
+                                        ? { ...item, is_default: "Y" }
+                                        : { ...item, is_default: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(d.is_default === "Y" || d.is_default === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalDeliveryForm({ ...d });
+                                    setModalDeliveryEditId(d._localId || d.id);
+                                    setModalDeliveryFormErrors({});
+                                    setModalDeliveryFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalDeliveryDelete(d._localId || d.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 납품처 폼 (인라인) */}
+                {modalDeliveryFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalDeliveryEditId ? "납품처 수정" : "납품처 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처코드</Label>
+                        <Input
+                          value={modalDeliveryForm.destination_code || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
+                          placeholder="자동 생성"
+                          className={cn("h-8 text-sm font-mono", modalDeliveryForm.destination_code && "bg-muted")}
+                          readOnly={!!modalDeliveryForm.destination_code && !modalDeliveryEditId}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalDeliveryForm.destination_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
+                          placeholder="납품처명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자</Label>
+                        <Input
+                          value={modalDeliveryForm.manager_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
+                          placeholder="담당자"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 col-span-2">
+                        <Label className="text-xs">주소</Label>
+                        <Input
+                          value={modalDeliveryForm.address || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, address: e.target.value }))}
+                          placeholder="주소"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalDeliveryForm.phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalDeliveryForm((p) => ({ ...p, phone: formatted }));
+                            const err = validateField("phone", formatted);
+                            setModalDeliveryFormErrors((p) => {
+                              const n = { ...p };
+                              if (err) n.phone = err; else delete n.phone;
+                              return n;
+                            });
+                          }}
+                          placeholder="010-0000-0000"
+                          className={cn("h-8 text-sm", modalDeliveryFormErrors.phone && "border-destructive")}
+                        />
+                        {modalDeliveryFormErrors.phone && <p className="text-xs text-destructive">{modalDeliveryFormErrors.phone}</p>}
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalDeliveryForm.memo || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== modalDeliveryEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalDeliveries((prev) => prev.map((item) => ({ ...item, is_default: "N" })));
+                                }
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "Y" }));
+                              } else {
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 납품처로 설정</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalDeliveryFormOpen(false); setModalDeliveryForm({}); setModalDeliveryEditId(null); setModalDeliveryFormErrors({}); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalDeliverySave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalDeliveryEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+          <div className="border-t px-6 py-3 flex items-center gap-2 shrink-0">
+            {!supplierEditMode && (
+              <label className="flex items-center gap-2 cursor-pointer mr-auto">
+                <input type="checkbox" checked={continuousInput} onChange={(e) => setContinuousInput(e.target.checked)} className="rounded" />
+                <span className="text-sm font-medium">연속입력</span>
+              </label>
+            )}
+            <Button variant="outline" onClick={() => setSupplierModalOpen(false)}>닫기</Button>
+            <Button onClick={handleSupplierSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {supplierEditMode ? "저장" : "등록"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 선택 (1단계) ── */}
+      <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>품목 선택</DialogTitle>
+            <DialogDescription>공급업체에 추가할 품목을 선택하세요. (전체: {itemTotalCount}건 / 대상: {itemSearchResults.length}건{itemCheckedIds.size > 0 ? ` / 선택: ${itemCheckedIds.size}건` : ""})</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              placeholder="품명/품목코드 검색"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+              className="h-9 flex-1"
+            />
+            <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+              {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+            </Button>
+          </div>
+          <div className="overflow-auto max-h-[350px] border rounded-lg">
+            <Table noWrapper>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted h-10">
+                  <TableHead className="w-[40px] text-center px-2">
+                    <input
+                      type="checkbox"
+                      className="rounded"
+                      checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                      onChange={(e) => {
+                        if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                        else setItemCheckedIds(new Set());
+                      }}
+                    />
+                  </TableHead>
+                  <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="min-w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                  <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {itemSearchResults.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                      검색 결과가 없어요
+                    </TableCell>
+                  </TableRow>
+                ) : itemSearchResults.map((item) => (
+                  <TableRow
+                    key={item.id}
+                    className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                    onClick={() => setItemCheckedIds((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                      return next;
+                    })}
+                  >
+                    <TableCell className="text-center px-2">
+                      <input type="checkbox" className="rounded" checked={itemCheckedIds.has(item.id)} readOnly />
+                    </TableCell>
+                    <TableCell className="text-[13px] font-mono">
+                      <span className="block truncate" title={item.item_number}>{item.item_number}</span>
+                    </TableCell>
+                    <TableCell className="text-sm">{item.item_name}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.size}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.material}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.unit}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <DialogFooter className="flex items-center justify-between w-full">
+            <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+              <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 상세 입력 (2단계) ── */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedSupplier?.supplier_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData
+                ? "거래처 품번/품명과 기간별 단가를 수정합니다."
+                : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2 flex-1 overflow-y-auto">
+            {selectedItemsForDetail.map((item, idx) => {
+              const itemKey = item.item_number || item.id;
+              const mappingRows = itemMappings[itemKey] || [];
+              const prices = itemPrices[itemKey] || [];
+
+              return (
+                <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
+                  {/* 품목 헤더 */}
+                  <div className="px-5 py-3 bg-muted/30 border-b">
+                    <div className="font-bold">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
+                  </div>
+
+                  <div className="flex gap-4 p-5 items-stretch">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Tag className="w-3.5 h-3.5 text-primary" /> 거래처 품번/품명 관리
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 품번 추가
+                        </Button>
+                      </div>
+                      <div className="border-2 border-foreground/20 rounded-lg bg-background p-3 space-y-2 min-h-[200px] max-h-[350px] overflow-y-auto flex-1">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : (
+                          <DndContext
+                            sensors={dndSensors}
+                            collisionDetection={closestCenter}
+                            onDragEnd={(e) => handleMappingDragEnd(itemKey, e)}
+                          >
+                            <SortableContext items={mappingRows.map((r) => r._id)} strategy={verticalListSortingStrategy}>
+                              {mappingRows.map((mRow, mIdx) => (
+                                <SortableMappingRow key={mRow._id} id={mRow._id}>
+                                  <span className="text-xs text-muted-foreground/50 font-mono w-4 shrink-0 text-center">{mIdx + 1}</span>
+                                  <Input
+                                    value={mRow.supplier_item_code}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "supplier_item_code", e.target.value)}
+                                    placeholder="거래처 품번"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Input
+                                    value={mRow.supplier_item_name}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "supplier_item_name", e.target.value)}
+                                    placeholder="거래처 품명"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Button
+                                    variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                                    onClick={() => removeMappingRow(itemKey, mRow._id)}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                </SortableMappingRow>
+                              ))}
+                            </SortableContext>
+                          </DndContext>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Coins className="w-3.5 h-3.5 text-primary" /> 기간별 단가 설정
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3 flex-1 overflow-y-auto max-h-[350px]">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border-2 border-foreground/20 rounded-lg bg-background overflow-hidden">
+                            <div
+                              className="flex items-center justify-between px-4 py-2.5 cursor-pointer hover:bg-muted/50 transition-colors"
+                              onClick={() => setCollapsedPriceCards((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(price._id)) next.delete(price._id); else next.add(price._id);
+                                return next;
+                              })}
+                            >
+                              <div className="flex items-center gap-2">
+                                {collapsedPriceCards.has(price._id)
+                                  ? <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                                  : <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                                }
+                                <span className="text-[13px] font-semibold text-muted-foreground">단가 {pIdx + 1}</span>
+                                {collapsedPriceCards.has(price._id) && price.calculated_price && (
+                                  <span className="text-xs text-muted-foreground ml-2">
+                                    {price.start_date || "—"} ~ {price.end_date || "—"} · <span className="font-mono font-bold text-foreground">{Number(price.calculated_price).toLocaleString()}</span> {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                  </span>
+                                )}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                {prices.length > 1 && (
+                                  <Button
+                                    variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
+                                    onClick={(e) => { e.stopPropagation(); removePriceRow(itemKey, price._id); }}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                )}
+                              </div>
+                            </div>
+                            {!collapsedPriceCards.has(price._id) && <div className="px-4 pb-4 space-y-2.5">
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">시작일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.start_date}
+                                  onChange={(e) => {
+                                    const v = e.target.value;
+                                    updatePriceRow(itemKey, price._id, "start_date", v);
+                                    if (price.end_date && v > price.end_date) {
+                                      updatePriceRow(itemKey, price._id, "end_date", v);
+                                    }
+                                  }}
+                                  max={price.end_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <span className="text-xs text-muted-foreground mt-4">~</span>
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">종료일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.end_date}
+                                  onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                  min={price.start_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <div className="w-[80px]">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">&nbsp;</Label>
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="통화" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "base_price", raw);
+                                }}
+                                className="h-9 text-[13px] text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-9 text-[13px] text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-1.5 pt-2 border-t">
+                              <span className="text-[13px] text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-base font-mono">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                              {price.calculated_price && price.currency_code && (
+                                <span className="text-[13px] text-muted-foreground">
+                                  {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                </span>
+                              )}
+                            </div>
+                            </div>}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal
+          open={excelUploadOpen}
+          onOpenChange={(open) => {
+            setExcelUploadOpen(open);
+            if (!open) setExcelChainConfig(null);
+          }}
+          config={excelChainConfig}
+          onSuccess={() => {
+            fetchSuppliers();
+            const cid = selectedSupplierId;
+            setSelectedSupplierId(null);
+            setTimeout(() => setSelectedSupplierId(cid), 50);
+          }}
+        />
+      )}
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/quality/inspection/page.tsx b/frontend/app/(main)/COMPANY_8/quality/inspection/page.tsx
new file mode 100644
index 00000000..cacd9d02
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/quality/inspection/page.tsx
@@ -0,0 +1,1703 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Plus,
+  Trash2,
+  Save,
+  Loader2,
+  Pencil,
+  ClipboardCheck,
+  AlertTriangle,
+  Wrench,
+  Search,
+  Inbox,
+  Settings2,
+} from "lucide-react";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+/* ───── 테이블명 ───── */
+const INSPECTION_TABLE = "inspection_standard";
+
+const INSPECTION_COLUMNS = [
+  { key: "inspection_code", label: "검사코드" },
+  { key: "inspection_type", label: "검사유형" },
+  { key: "inspection_criteria", label: "검사기준" },
+  { key: "inspection_item", label: "검사항목" },
+  { key: "inspection_method", label: "검사방법" },
+  { key: "judgment_criteria", label: "판단기준" },
+  { key: "unit", label: "단위" },
+  { key: "apply_type", label: "적용구분" },
+  { key: "manager", label: "관리자" },
+];
+const DEFECT_TABLE = "defect_standard_mng";
+const EQUIPMENT_TABLE = "inspection_equipment_mng";
+
+/* ───── 카테고리 flatten ───── */
+const flattenCategories = (vals: any[]): { code: string; label: string }[] => {
+  const result: { code: string; label: string }[] = [];
+  for (const v of vals) {
+    result.push({ code: v.valueCode, label: v.valueLabel });
+    if (v.children?.length) result.push(...flattenCategories(v.children));
+  }
+  return result;
+};
+
+export default function InspectionManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-inspection", INSPECTION_TABLE, INSPECTION_COLUMNS);
+
+  const [activeTab, setActiveTab] = useState("inspection");
+
+  /* ───── 검사기준 ───── */
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspLoading, setInspLoading] = useState(false);
+  const [inspCount, setInspCount] = useState(0);
+  const [inspChecked, setInspChecked] = useState<string[]>([]);
+  const [inspModalOpen, setInspModalOpen] = useState(false);
+  const [inspEditMode, setInspEditMode] = useState(false);
+  const [inspForm, setInspForm] = useState<Record<string, any>>({});
+  const [inspSaving, setInspSaving] = useState(false);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  /* ───── 불량관리 ───── */
+  const [defects, setDefects] = useState<any[]>([]);
+  const [defLoading, setDefLoading] = useState(false);
+  const [defCount, setDefCount] = useState(0);
+  const [defChecked, setDefChecked] = useState<string[]>([]);
+  const [defModalOpen, setDefModalOpen] = useState(false);
+  const [defEditMode, setDefEditMode] = useState(false);
+  const [defForm, setDefForm] = useState<Record<string, any>>({});
+  const [defSaving, setDefSaving] = useState(false);
+  const [defKeyword, setDefKeyword] = useState("");
+
+  /* ───── 검사장비 ───── */
+  const [equipments, setEquipments] = useState<any[]>([]);
+  const [eqLoading, setEqLoading] = useState(false);
+  const [eqCount, setEqCount] = useState(0);
+  const [eqChecked, setEqChecked] = useState<string[]>([]);
+  const [eqModalOpen, setEqModalOpen] = useState(false);
+  const [eqEditMode, setEqEditMode] = useState(false);
+  const [eqForm, setEqForm] = useState<Record<string, any>>({});
+  const [eqSaving, setEqSaving] = useState(false);
+  const [eqKeyword, setEqKeyword] = useState("");
+
+  /* ───── 채번 ───── */
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  /* ───── 카테고리 옵션 ───── */
+  const [catOptions, setCatOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [userOptions, setUserOptions] = useState<{ code: string; label: string }[]>([]);
+
+  /* ═══════════════════ 카테고리 로드 ═══════════════════ */
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const catList = [
+        { table: INSPECTION_TABLE, col: "inspection_type" },
+        { table: INSPECTION_TABLE, col: "apply_type" },
+        { table: INSPECTION_TABLE, col: "inspection_method" },
+        { table: INSPECTION_TABLE, col: "judgment_criteria" },
+        { table: INSPECTION_TABLE, col: "unit" },
+        { table: DEFECT_TABLE, col: "defect_type" },
+        { table: DEFECT_TABLE, col: "severity" },
+        { table: DEFECT_TABLE, col: "inspection_type" },
+        { table: DEFECT_TABLE, col: "is_active" },
+        { table: EQUIPMENT_TABLE, col: "equipment_type" },
+        { table: EQUIPMENT_TABLE, col: "equipment_status" },
+      ];
+      await Promise.all(
+        catList.map(async ({ table, col }) => {
+          try {
+            const res = await apiClient.get(`/table-categories/${table}/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              optMap[`${table}.${col}`] = flattenCategories(res.data.data);
+            }
+          } catch {
+            /* skip */
+          }
+        }),
+      );
+      setCatOptions(optMap);
+      // 사용자 목록 로드
+      try {
+        const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
+          page: 1,
+          size: 500,
+          autoFilter: true,
+        });
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        setUserOptions(
+          users.map((u: any) => ({
+            code: u.user_id || u.id,
+            label: `${u.user_name || u.name || u.user_id}${u.dept_name ? ` (${u.dept_name})` : ""}`,
+          })),
+        );
+      } catch {
+        /* skip */
+      }
+    };
+    load();
+  }, []);
+
+  const getCatLabel = (table: string, col: string, code: string) => {
+    if (!code) return "";
+    const opts = catOptions[`${table}.${col}`];
+    if (!opts) return code;
+    // 쉼표 구분 다중 코드 지원
+    if (code.includes(",")) {
+      return code
+        .split(",")
+        .filter(Boolean)
+        .map((c) => opts.find((o) => o.code === c)?.label || c)
+        .join(", ");
+    }
+    return opts.find((o) => o.code === code)?.label || code;
+  };
+
+  const inspTableColumns = useMemo<EDataTableColumn[]>(() => {
+    return ts.visibleColumns.map((col) => {
+      const base: EDataTableColumn = { key: col.key, label: col.label };
+      if (["inspection_type", "inspection_method", "judgment_criteria", "unit", "apply_type"].includes(col.key)) {
+        base.render = (v: any, row: any) => getCatLabel(INSPECTION_TABLE, col.key, row[col.key]);
+      }
+      return base;
+    });
+  }, [ts.visibleColumns, catOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  // 다중값 컬럼 (쉼표 구분 저장) — 서버 equals 대신 contains 사용
+  const MULTI_VALUE_COLUMNS = ["inspection_type"];
+
+  const fetchInspections = useCallback(async () => {
+    setInspLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({
+        columnName: f.columnName,
+        operator: MULTI_VALUE_COLUMNS.includes(f.columnName) ? "contains" : f.operator,
+        value: f.value,
+      }));
+      const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setInspections(rows);
+      setInspCount(rows.length);
+    } catch {
+      toast.error("검사기준 조회에 실패했어요");
+    } finally {
+      setInspLoading(false);
+    }
+  }, [searchFilters]);
+
+  const fetchDefects = useCallback(async () => {
+    setDefLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DEFECT_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setDefects(rows);
+      setDefCount(rows.length);
+    } catch {
+      toast.error("불량관리 조회에 실패했어요");
+    } finally {
+      setDefLoading(false);
+    }
+  }, []);
+
+  const fetchEquipments = useCallback(async () => {
+    setEqLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setEquipments(rows);
+      setEqCount(rows.length);
+    } catch {
+      toast.error("검사장비 조회에 실패했어요");
+    } finally {
+      setEqLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchInspections();
+  }, [fetchInspections]);
+  useEffect(() => {
+    fetchDefects();
+    fetchEquipments();
+  }, []);
+
+  /* ───── 클라이언트 필터 ───── */
+  const filteredDefects = defKeyword.trim()
+    ? defects.filter(
+        (r) =>
+          (r.defect_name || "").toLowerCase().includes(defKeyword.toLowerCase()) ||
+          (r.defect_type || "").toLowerCase().includes(defKeyword.toLowerCase()),
+      )
+    : defects;
+
+  const filteredEquipments = eqKeyword.trim()
+    ? equipments.filter(
+        (r) =>
+          (r.equipment_name || "").toLowerCase().includes(eqKeyword.toLowerCase()) ||
+          (r.model_name || "").toLowerCase().includes(eqKeyword.toLowerCase()),
+      )
+    : equipments;
+
+  /* ═══════════════════ 검사기준 CRUD ═══════════════════ */
+  const openInspCreate = async () => {
+    setInspForm({});
+    setInspEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setInspModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${INSPECTION_TABLE}/inspection_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+  const openInspEdit = (row: any) => {
+    setInspForm({ ...row });
+    setInspEditMode(true);
+    setInspModalOpen(true);
+  };
+  const saveInspection = async () => {
+    if (!numberingRuleId && !inspForm.inspection_code) {
+      toast.error("검사코드는 필수예요");
+      return;
+    }
+    if (!inspForm.inspection_type) {
+      toast.error("유형을 1개 이상 선택해주세요");
+      return;
+    }
+    if (!inspForm.inspection_criteria) {
+      toast.error("검사기준은 필수예요");
+      return;
+    }
+    if (!inspForm.inspection_item) {
+      toast.error("검사항목은 필수예요");
+      return;
+    }
+    if (!inspForm.judgment_criteria) {
+      toast.error("판단기준은 필수예요");
+      return;
+    }
+    setInspSaving(true);
+    try {
+      let finalCode = inspForm.inspection_code || "";
+      if (!inspEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setInspSaving(false);
+          return;
+        }
+      }
+      if (inspEditMode) {
+        await apiClient.put(`/table-management/tables/${INSPECTION_TABLE}/edit`, {
+          originalData: { id: inspForm.id },
+          updatedData: inspForm,
+        });
+        toast.success("검사기준을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          ...inspForm,
+          inspection_code: finalCode,
+        });
+        toast.success("검사기준을 등록했어요");
+      }
+      setInspModalOpen(false);
+      fetchInspections();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setInspSaving(false);
+    }
+  };
+  const deleteInspections = async () => {
+    if (inspChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("검사기준 삭제", {
+      description: `선택한 ${inspChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${INSPECTION_TABLE}/delete`, {
+        data: inspChecked.map((id) => ({ id })),
+      });
+      toast.success(`${inspChecked.length}건을 삭제했어요`);
+      setInspChecked([]);
+      fetchInspections();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ 불량관리 CRUD ═══════════════════ */
+  const openDefCreate = async () => {
+    setDefForm({});
+    setDefEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setDefModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DEFECT_TABLE}/defect_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+  const openDefEdit = (row: any) => {
+    setDefForm({ ...row });
+    setDefEditMode(true);
+    setDefModalOpen(true);
+  };
+  const saveDefect = async () => {
+    if (!numberingRuleId && !defForm.defect_code) {
+      toast.error("불량코드는 필수예요");
+      return;
+    }
+    if (!defForm.defect_type) {
+      toast.error("불량유형은 필수예요");
+      return;
+    }
+    if (!defForm.defect_name) {
+      toast.error("불량명은 필수예요");
+      return;
+    }
+    if (!defForm.severity) {
+      toast.error("심각도는 필수예요");
+      return;
+    }
+    if (!defForm.defect_content) {
+      toast.error("불량내용은 필수예요");
+      return;
+    }
+    if (!defForm.inspection_type) {
+      toast.error("검사유형을 1개 이상 선택해주세요");
+      return;
+    }
+    setDefSaving(true);
+    try {
+      let finalCode = defForm.defect_code || "";
+      if (!defEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setDefSaving(false);
+          return;
+        }
+      }
+      if (defEditMode) {
+        await apiClient.put(`/table-management/tables/${DEFECT_TABLE}/edit`, {
+          originalData: { id: defForm.id },
+          updatedData: defForm,
+        });
+        toast.success("불량유형을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${DEFECT_TABLE}/add`, { id: crypto.randomUUID(), ...defForm, defect_code: finalCode });
+        toast.success("불량유형을 등록했어요");
+      }
+      setDefModalOpen(false);
+      fetchDefects();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setDefSaving(false);
+    }
+  };
+  const deleteDefects = async () => {
+    if (defChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("불량유형 삭제", {
+      description: `선택한 ${defChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DEFECT_TABLE}/delete`, {
+        data: defChecked.map((id) => ({ id })),
+      });
+      toast.success(`${defChecked.length}건을 삭제했어요`);
+      setDefChecked([]);
+      fetchDefects();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ 검사장비 CRUD ═══════════════════ */
+  const openEqCreate = async () => {
+    setEqForm({
+      calibration_period: "12",
+      equipment_status: "NORMAL",
+    });
+    setEqEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setEqModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${EQUIPMENT_TABLE}/equipment_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      } else {
+        // 채번 규칙 없으면 기존 수동 채번 fallback
+        const maxNum =
+          equipments
+            .map((e: any) => e.equipment_code || "")
+            .filter((c: string) => /^EQP-\d+$/.test(c))
+            .map((c: string) => parseInt(c.replace("EQP-", ""), 10))
+            .sort((a: number, b: number) => b - a)[0] || 0;
+        setEqForm((p) => ({ ...p, equipment_code: `EQP-${String(maxNum + 1).padStart(3, "0")}` }));
+      }
+    } catch {
+      // 채번 규칙 조회 실패 시 기존 수동 채번 fallback
+      const maxNum =
+        equipments
+          .map((e: any) => e.equipment_code || "")
+          .filter((c: string) => /^EQP-\d+$/.test(c))
+          .map((c: string) => parseInt(c.replace("EQP-", ""), 10))
+          .sort((a: number, b: number) => b - a)[0] || 0;
+      setEqForm((p) => ({ ...p, equipment_code: `EQP-${String(maxNum + 1).padStart(3, "0")}` }));
+    }
+  };
+  const openEqEdit = (row: any) => {
+    setEqForm({ ...row });
+    setEqEditMode(true);
+    setEqModalOpen(true);
+  };
+  const saveEquipment = async () => {
+    if (!numberingRuleId && !eqForm.equipment_code) {
+      toast.error("장비코드는 필수예요");
+      return;
+    }
+    if (!eqForm.equipment_name) {
+      toast.error("장비명은 필수예요");
+      return;
+    }
+    if (!eqForm.equipment_type) {
+      toast.error("장비유형은 필수예요");
+      return;
+    }
+    setEqSaving(true);
+    try {
+      let finalCode = eqForm.equipment_code || "";
+      if (!eqEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setEqSaving(false);
+          return;
+        }
+      }
+      if (eqEditMode) {
+        await apiClient.put(`/table-management/tables/${EQUIPMENT_TABLE}/edit`, {
+          originalData: { id: eqForm.id },
+          updatedData: eqForm,
+        });
+        toast.success("검사장비를 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/add`, { id: crypto.randomUUID(), ...eqForm, equipment_code: finalCode });
+        toast.success("검사장비를 등록했어요");
+      }
+      setEqModalOpen(false);
+      fetchEquipments();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setEqSaving(false);
+    }
+  };
+  const deleteEquipments = async () => {
+    if (eqChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("검사장비 삭제", {
+      description: `선택한 ${eqChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${EQUIPMENT_TABLE}/delete`, {
+        data: eqChecked.map((id) => ({ id })),
+      });
+      toast.success(`${eqChecked.length}건을 삭제했어요`);
+      setEqChecked([]);
+      fetchEquipments();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="bg-card rounded-lg border">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <div className="border-b px-3">
+            <TabsList className="h-auto gap-0 bg-transparent p-0">
+              <TabsTrigger
+                value="inspection"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <ClipboardCheck className="mr-2 h-4 w-4" />
+                검사기준
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {inspCount}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="defect"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <AlertTriangle className="mr-2 h-4 w-4" />
+                불량관리
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {defCount}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="equipment"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <Wrench className="mr-2 h-4 w-4" />
+                검사장비
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {eqCount}
+                </Badge>
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* ──── 검사기준 탭 ──── */}
+          <TabsContent value="inspection" className="mt-0 p-3">
+            <div className="mb-3">
+              <DynamicSearchFilter
+                tableName={INSPECTION_TABLE}
+                filterId="c16-inspection"
+                onFilterChange={setSearchFilters}
+                externalFilterConfig={ts.filterConfig}
+                dataCount={inspCount}
+                extraActions={
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" onClick={openInspCreate}>
+                      <Plus className="mr-1 h-4 w-4" />
+                      등록
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        const sel = inspections.find((r) => inspChecked.includes(r.id));
+                        if (sel) openInspEdit(sel);
+                        else toast.error("수정할 항목을 선택해주세요");
+                      }}
+                    >
+                      <Pencil className="mr-1 h-4 w-4" />
+                      수정
+                    </Button>
+                    <Button size="sm" variant="destructive" onClick={deleteInspections}>
+                      <Trash2 className="mr-1 h-4 w-4" />
+                      삭제
+                    </Button>
+                    <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                      <Settings2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                }
+              />
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <EDataTable
+                columns={inspTableColumns}
+                data={ts.groupData(inspections)}
+                loading={inspLoading}
+                emptyMessage="등록된 검사기준이 없어요"
+                showCheckbox={true}
+                checkedIds={inspChecked}
+                onCheckedChange={setInspChecked}
+                onRowDoubleClick={(row) => openInspEdit(row)}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-inspection-main"
+              />
+            </div>
+          </TabsContent>
+
+          {/* ──── 불량관리 탭 ──── */}
+          <TabsContent value="defect" className="mt-0 p-3">
+            <div className="mb-3 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="text-muted-foreground absolute top-2 left-2.5 h-3.5 w-3.5" />
+                  <Input
+                    className="h-8 w-56 pl-8 text-sm"
+                    placeholder="불량명 검색..."
+                    value={defKeyword}
+                    onChange={(e) => setDefKeyword(e.target.value)}
+                  />
+                </div>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">
+                  {filteredDefects.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openDefCreate}>
+                  <Plus className="mr-1 h-4 w-4" />
+                  등록
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const sel = defects.find((r) => defChecked.includes(r.id));
+                    if (sel) openDefEdit(sel);
+                    else toast.error("수정할 항목을 선택해주세요");
+                  }}
+                >
+                  <Pencil className="mr-1 h-4 w-4" />
+                  수정
+                </Button>
+                <Button size="sm" variant="destructive" onClick={deleteDefects}>
+                  <Trash2 className="mr-1 h-4 w-4" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={filteredDefects.length > 0 && defChecked.length === filteredDefects.length}
+                        onCheckedChange={(v) => setDefChecked(v ? filteredDefects.map((r) => r.id) : [])}
+                      />
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량코드
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량내용
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      심각도
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      검사유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      적용대상
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      사용여부
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      등록일
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      관리자
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      비고
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {defLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={12} className="py-8 text-center">
+                        <Loader2 className="text-muted-foreground mx-auto h-5 w-5 animate-spin" />
+                      </TableCell>
+                    </TableRow>
+                  ) : filteredDefects.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={12} className="text-muted-foreground py-10 text-center">
+                        <Inbox className="mx-auto mb-2 h-8 w-8 opacity-40" />
+                        <p className="text-sm">등록된 불량유형이 없어요</p>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredDefects.map((row) => {
+                      const severityLabel = getCatLabel(DEFECT_TABLE, "severity", row.severity);
+                      const severityColor =
+                        severityLabel === "치명적"
+                          ? "destructive"
+                          : severityLabel === "심각"
+                            ? "destructive"
+                            : severityLabel === "보통"
+                              ? "secondary"
+                              : "outline";
+                      return (
+                        <TableRow
+                          key={row.id}
+                          className={cn("cursor-pointer", defChecked.includes(row.id) && "bg-primary/5")}
+                          onClick={() =>
+                            setDefChecked((prev) =>
+                              prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id],
+                            )
+                          }
+                          onDoubleClick={() => openDefEdit(row)}
+                        >
+                          <TableCell onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                              checked={defChecked.includes(row.id)}
+                              onCheckedChange={(v) =>
+                                setDefChecked((prev) => (v ? [...prev, row.id] : prev.filter((id) => id !== row.id)))
+                              }
+                            />
+                          </TableCell>
+                          <TableCell className="font-semibold">{row.defect_code || "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant="secondary" className="text-[10px]">
+                              {getCatLabel(DEFECT_TABLE, "defect_type", row.defect_type)}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>{row.defect_name || "-"}</TableCell>
+                          <TableCell className="text-muted-foreground max-w-[200px] truncate">
+                            {row.defect_content || "-"}
+                          </TableCell>
+                          <TableCell>
+                            <Badge variant={severityColor as any} className="text-[10px]">
+                              {severityLabel || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-wrap gap-1">
+                              {row.inspection_type
+                                ? row.inspection_type
+                                    .split(",")
+                                    .filter(Boolean)
+                                    .map((c: string) => (
+                                      <Badge key={c} variant="outline" className="text-[10px]">
+                                        {getCatLabel(DEFECT_TABLE, "inspection_type", c)}
+                                      </Badge>
+                                    ))
+                                : "-"}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-wrap gap-1">
+                              {row.apply_target
+                                ? row.apply_target
+                                    .split(",")
+                                    .filter(Boolean)
+                                    .map((t: string) => (
+                                      <Badge key={t} variant="outline" className="text-[10px]">
+                                        {t}
+                                      </Badge>
+                                    ))
+                                : "-"}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <Badge
+                              variant={
+                                getCatLabel(DEFECT_TABLE, "is_active", row.is_active) === "사용"
+                                  ? "default"
+                                  : "secondary"
+                              }
+                              className="text-[10px]"
+                            >
+                              {getCatLabel(DEFECT_TABLE, "is_active", row.is_active) || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-muted-foreground">
+                            {row.reg_date || (row.created_date ? row.created_date.slice(0, 10) : "-")}
+                          </TableCell>
+                          <TableCell>{row.manager_id || "-"}</TableCell>
+                          <TableCell className="text-muted-foreground">{row.remarks || "-"}</TableCell>
+                        </TableRow>
+                      );
+                    })
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+
+          {/* ──── 검사장비 탭 ──── */}
+          <TabsContent value="equipment" className="mt-0 p-3">
+            <div className="mb-3 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="text-muted-foreground absolute top-2 left-2.5 h-3.5 w-3.5" />
+                  <Input
+                    className="h-8 w-56 pl-8 text-sm"
+                    placeholder="장비명 검색..."
+                    value={eqKeyword}
+                    onChange={(e) => setEqKeyword(e.target.value)}
+                  />
+                </div>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">
+                  {filteredEquipments.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openEqCreate}>
+                  <Plus className="mr-1 h-4 w-4" />
+                  등록
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const sel = equipments.find((r) => eqChecked.includes(r.id));
+                    if (sel) openEqEdit(sel);
+                    else toast.error("수정할 항목을 선택해주세요");
+                  }}
+                >
+                  <Pencil className="mr-1 h-4 w-4" />
+                  수정
+                </Button>
+                <Button size="sm" variant="destructive" onClick={deleteEquipments}>
+                  <Trash2 className="mr-1 h-4 w-4" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={filteredEquipments.length > 0 && eqChecked.length === filteredEquipments.length}
+                        onCheckedChange={(v) => setEqChecked(v ? filteredEquipments.map((r) => r.id) : [])}
+                      />
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비코드
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      모델명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      제조사
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      설치장소
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      최근교정일
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      교정주기(개월)
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비상태
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      담당자
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {eqLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={11} className="py-8 text-center">
+                        <Loader2 className="text-muted-foreground mx-auto h-5 w-5 animate-spin" />
+                      </TableCell>
+                    </TableRow>
+                  ) : filteredEquipments.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={11} className="text-muted-foreground py-10 text-center">
+                        <Inbox className="mx-auto mb-2 h-8 w-8 opacity-40" />
+                        <p className="text-sm">등록된 검사장비가 없어요</p>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredEquipments.map((row) => {
+                      const statusLabel = getCatLabel(EQUIPMENT_TABLE, "equipment_status", row.equipment_status);
+                      const statusColor =
+                        statusLabel === "정상" ? "default" : statusLabel === "폐기" ? "destructive" : "secondary";
+                      return (
+                        <TableRow
+                          key={row.id}
+                          className={cn("cursor-pointer", eqChecked.includes(row.id) && "bg-primary/5")}
+                          onClick={() =>
+                            setEqChecked((prev) =>
+                              prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id],
+                            )
+                          }
+                          onDoubleClick={() => openEqEdit(row)}
+                        >
+                          <TableCell onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                              checked={eqChecked.includes(row.id)}
+                              onCheckedChange={(v) =>
+                                setEqChecked((prev) => (v ? [...prev, row.id] : prev.filter((id) => id !== row.id)))
+                              }
+                            />
+                          </TableCell>
+                          <TableCell className="text-primary font-semibold">{row.equipment_code || "-"}</TableCell>
+                          <TableCell>{row.equipment_name || "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant="secondary" className="text-[10px]">
+                              {getCatLabel(EQUIPMENT_TABLE, "equipment_type", row.equipment_type) || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>{row.model_name || "-"}</TableCell>
+                          <TableCell>{row.manufacturer || "-"}</TableCell>
+                          <TableCell>{row.installation_location || "-"}</TableCell>
+                          <TableCell>{row.last_calibration_date || "-"}</TableCell>
+                          <TableCell>{row.calibration_period ? `${row.calibration_period}개월` : "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant={statusColor as any} className="text-[10px]">
+                              {statusLabel || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>
+                            {userOptions.find((u) => u.code === row.manager_id)?.label || row.manager_id || "-"}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* ═══════════════════ 검사기준 모달 ═══════════════════ */}
+      <Dialog open={inspModalOpen} onOpenChange={setInspModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[640px]">
+          <DialogHeader>
+            <DialogTitle>{inspEditMode ? "검사기준 수정" : "검사기준 등록"}</DialogTitle>
+            <DialogDescription>검사기준 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            {/* 검사코드 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사코드 <span className="text-destructive">*</span>
+              </Label>
+              {!inspEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : inspEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={inspForm.inspection_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={inspForm.inspection_code || ""}
+                  onChange={(e) => setInspForm((p) => ({ ...p, inspection_code: e.target.value }))}
+                  placeholder="검사코드 입력"
+                />
+              )}
+            </div>
+            {/* 유형 (다중선택) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                유형 <span className="text-destructive">*</span> (다중선택)
+              </Label>
+              <div className="flex flex-wrap gap-3 pt-1">
+                {(catOptions[`${INSPECTION_TABLE}.inspection_type`] || []).map((o) => {
+                  const types: string[] = inspForm.inspection_type
+                    ? inspForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  const checked = types.includes(o.code);
+                  return (
+                    <div key={o.code} className="flex items-center gap-1.5">
+                      <Checkbox
+                        checked={checked}
+                        onCheckedChange={(v) => {
+                          const next = v ? [...types, o.code] : types.filter((t) => t !== o.code);
+                          setInspForm((p) => ({ ...p, inspection_type: next.join(",") }));
+                        }}
+                      />
+                      <Label className="cursor-pointer text-sm">{o.label}</Label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            {/* 검사기준 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사기준 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={inspForm.inspection_criteria || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, inspection_criteria: e.target.value }))}
+                placeholder="검사기준 입력"
+              />
+            </div>
+            {/* 기준상세 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">기준상세</Label>
+              <Input
+                className="h-9"
+                value={inspForm.criteria_detail || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, criteria_detail: e.target.value }))}
+                placeholder="기준상세 입력"
+              />
+            </div>
+            {/* 검사항목 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사항목 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={inspForm.inspection_item || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, inspection_item: e.target.value }))}
+                placeholder="검사항목 입력"
+              />
+            </div>
+            {/* 검사방법 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">검사방법</Label>
+              <Select
+                value={inspForm.inspection_method || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, inspection_method: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.inspection_method`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 판단기준 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                판단기준 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={inspForm.judgment_criteria || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, judgment_criteria: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.judgment_criteria`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 단위 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">단위</Label>
+              <Select
+                value={inspForm.unit || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, unit: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.unit`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 적용구분 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">적용구분</Label>
+              <Select
+                value={inspForm.apply_type || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, apply_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.apply_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">관리자</Label>
+              <Select
+                value={inspForm.manager || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, manager: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 비고 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                value={inspForm.remark || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, remark: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setInspModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveInspection} disabled={inspSaving}>
+              {inspSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 불량관리 모달 ═══════════════════ */}
+      <Dialog open={defModalOpen} onOpenChange={setDefModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[640px]">
+          <DialogHeader>
+            <DialogTitle>{defEditMode ? "불량유형 수정" : "불량유형 등록"}</DialogTitle>
+            <DialogDescription>불량유형 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            {/* 불량코드 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량코드 <span className="text-destructive">*</span>
+              </Label>
+              {!defEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : defEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={defForm.defect_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={defForm.defect_code || ""}
+                  onChange={(e) => setDefForm((p) => ({ ...p, defect_code: e.target.value }))}
+                  placeholder="불량코드 입력"
+                />
+              )}
+            </div>
+            {/* 불량유형 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={defForm.defect_type || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, defect_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.defect_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 불량명 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={defForm.defect_name || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, defect_name: e.target.value }))}
+                placeholder="불량명 입력"
+              />
+            </div>
+            {/* 심각도 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                심각도 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={defForm.severity || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, severity: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.severity`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 불량내용 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량내용 <span className="text-destructive">*</span>
+              </Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={defForm.defect_content || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, defect_content: e.target.value }))}
+                placeholder="불량 상세 내용 및 정의를 입력하세요"
+                rows={3}
+              />
+            </div>
+            {/* 검사유형 (다중선택) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사유형 <span className="text-destructive">*</span> (다중선택)
+              </Label>
+              <div className="flex flex-wrap gap-3 rounded-md border p-3">
+                {(catOptions[`${DEFECT_TABLE}.inspection_type`] || []).map((o) => {
+                  const types: string[] = defForm.inspection_type
+                    ? defForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  const checked = types.includes(o.code);
+                  return (
+                    <div key={o.code} className="flex items-center gap-1.5">
+                      <Checkbox
+                        checked={checked}
+                        onCheckedChange={(v) => {
+                          const next = v ? [...types, o.code] : types.filter((t) => t !== o.code);
+                          setDefForm((p) => ({ ...p, inspection_type: next.join(","), apply_target: "" }));
+                        }}
+                      />
+                      <Label className="cursor-pointer text-sm">{o.label}</Label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            {/* 적용대상 (다중선택, 검사유형별 동적) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">적용대상 (다중선택)</Label>
+              <div className="min-h-[60px] rounded-md border p-3">
+                {(() => {
+                  const selectedTypes = defForm.inspection_type
+                    ? defForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  if (selectedTypes.length === 0)
+                    return <p className="text-muted-foreground text-xs">검사유형을 먼저 선택하세요</p>;
+                  const typeTargetMap: Record<string, string[]> = {};
+                  const defInspOpts = catOptions[`${DEFECT_TABLE}.inspection_type`] || [];
+                  for (const code of selectedTypes) {
+                    const label = defInspOpts.find((o) => o.code === code)?.label || "";
+                    if (label.includes("수입"))
+                      typeTargetMap[label] = ["구매입고", "외주입고", "반품입고", "무상입고", "기타입고"];
+                    else if (label.includes("공정"))
+                      typeTargetMap[label] = ["가공", "조립", "도장", "열처리", "표면처리", "용접"];
+                    else if (label.includes("출하"))
+                      typeTargetMap[label] = ["국내출하", "수출출하", "반품출하", "샘플출하"];
+                    else if (label.includes("최종")) typeTargetMap[label] = ["완제품", "반제품", "부품"];
+                  }
+                  const targets: string[] = defForm.apply_target ? defForm.apply_target.split(",").filter(Boolean) : [];
+                  return Object.entries(typeTargetMap).map(([typeName, opts]) => (
+                    <div key={typeName} className="mb-2 last:mb-0">
+                      <p className="mb-2 border-b pb-1 text-xs font-semibold">{typeName}</p>
+                      <div className="flex flex-wrap gap-3">
+                        {opts.map((t) => (
+                          <div key={t} className="flex items-center gap-1.5">
+                            <Checkbox
+                              checked={targets.includes(t)}
+                              onCheckedChange={(v) => {
+                                const next = v ? [...targets, t] : targets.filter((x) => x !== t);
+                                setDefForm((p) => ({ ...p, apply_target: next.join(",") }));
+                              }}
+                            />
+                            <Label className="cursor-pointer text-sm">{t}</Label>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ));
+                })()}
+              </div>
+            </div>
+            {/* 사용여부 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">사용여부</Label>
+              <Select
+                value={defForm.is_active || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.is_active`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">관리자</Label>
+              <Select
+                value={defForm.manager_id || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, manager_id: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 비고 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={defForm.remarks || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, remarks: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDefModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveDefect} disabled={defSaving}>
+              {defSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 검사장비 모달 ═══════════════════ */}
+      <Dialog open={eqModalOpen} onOpenChange={setEqModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[720px]">
+          <DialogHeader>
+            <DialogTitle>{eqEditMode ? "장비 수정" : "장비 등록"}</DialogTitle>
+            <DialogDescription>검사장비 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-3 gap-4">
+            {/* Row 1: 장비코드, 장비명, 장비유형 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비코드 <span className="text-destructive">*</span>
+              </Label>
+              {!eqEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : eqEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={eqForm.equipment_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={eqForm.equipment_code || ""}
+                  onChange={(e) => setEqForm((p) => ({ ...p, equipment_code: e.target.value }))}
+                  placeholder="장비코드"
+                />
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={eqForm.equipment_name || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, equipment_name: e.target.value }))}
+                placeholder="장비명 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={eqForm.equipment_type || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, equipment_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="장비유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">장비유형 선택</SelectItem>
+                  {(catOptions[`${EQUIPMENT_TABLE}.equipment_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* Row 2: 모델명, 제조사, 시리얼번호 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">모델명</Label>
+              <Input
+                className="h-9"
+                value={eqForm.model_name || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, model_name: e.target.value }))}
+                placeholder="모델명 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">제조사</Label>
+              <Input
+                className="h-9"
+                value={eqForm.manufacturer || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, manufacturer: e.target.value }))}
+                placeholder="제조사 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">시리얼번호</Label>
+              <Input
+                className="h-9"
+                value={eqForm.serial_number || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, serial_number: e.target.value }))}
+                placeholder="시리얼번호 입력"
+              />
+            </div>
+            {/* Row 3: 설치장소, 최근교정일, 교정주기 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">설치장소</Label>
+              <Input
+                className="h-9"
+                value={eqForm.installation_location || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, installation_location: e.target.value }))}
+                placeholder="설치장소 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">최근교정일</Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={eqForm.last_calibration_date || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, last_calibration_date: e.target.value }))}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">교정주기 (개월)</Label>
+              <Input
+                type="number"
+                className="h-9"
+                value={eqForm.calibration_period || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, calibration_period: e.target.value }))}
+                placeholder="12"
+              />
+            </div>
+            {/* Row 4: 장비상태, 담당자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">장비상태</Label>
+              <Select
+                value={eqForm.equipment_status || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, equipment_status: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="장비상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">장비상태 선택</SelectItem>
+                  {(catOptions[`${EQUIPMENT_TABLE}.equipment_status`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">담당자</Label>
+              <Select
+                value={eqForm.manager_id || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, manager_id: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="담당자 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">담당자 선택</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div />
+            {/* Row 5: 비고 (full width) */}
+            <div className="col-span-3 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={eqForm.remarks || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, remarks: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEqModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveEquipment} disabled={eqSaving}>
+              {eqSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/quality/item-inspection/page.tsx b/frontend/app/(main)/COMPANY_8/quality/item-inspection/page.tsx
new file mode 100644
index 00000000..2c0e1338
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/quality/item-inspection/page.tsx
@@ -0,0 +1,733 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, Pencil, Inbox, Settings2, Search, ChevronDown,
+} from "lucide-react";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const TABLE_NAME = "item_inspection_info";
+
+const GRID_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "inspection_type", label: "검사유형" },
+  { key: "item_count", label: "항목수" },
+  { key: "is_active", label: "사용여부" },
+];
+const ITEM_TABLE = "item_info";
+const INSPECTION_TABLE = "inspection_standard";
+
+const INSPECTION_TYPES = [
+  { key: "incoming_inspection", label: "수입검사", matchLabels: ["수입검사", "입고검사", "수입", "입고"] },
+  { key: "outgoing_inspection", label: "출하검사", matchLabels: ["출하검사", "출고검사", "출하", "출고"] },
+  { key: "process_inspection", label: "공정검사", matchLabels: ["공정검사", "공정"] },
+  { key: "final_inspection", label: "최종검사", matchLabels: ["최종검사", "최종", "완제품검사"] },
+] as const;
+
+type InspectionRow = {
+  id: string;
+  inspection_standard_id: string;
+  inspection_detail: string;
+  inspection_method: string;
+  apply_process: string;
+  acceptance_criteria: string;
+  is_required: boolean;
+};
+
+export default function ItemInspectionInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-item-inspection", TABLE_NAME, GRID_COLUMNS);
+
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [form, setForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  /* FK 옵션 */
+  const [itemOptions, setItemOptions] = useState<{ code: string; name: string; item_type: string; unit: string }[]>([]);
+  const [inspOptions, setInspOptions] = useState<{ code: string; label: string; detail: string; method: string; types: string[] }[]>([]);
+  const [inspTypeCatOptions, setInspTypeCatOptions] = useState<{ code: string; label: string }[]>([]);
+  const [userOptions, setUserOptions] = useState<{ code: string; label: string }[]>([]);
+
+  /* 검사유형별 검사항목 rows */
+  const [inspectionRows, setInspectionRows] = useState<Record<string, InspectionRow[]>>({});
+  const [collapsedTypes, setCollapsedTypes] = useState<Record<string, boolean>>({});
+
+  /* 품목 선택 모달 */
+  const [itemModalOpen, setItemModalOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [filteredItems, setFilteredItems] = useState<typeof itemOptions>([]);
+
+  /* ═══════════════════ FK 옵션 로드 ═══════════════════ */
+  useEffect(() => {
+    const loadOptions = async () => {
+      try {
+        const [itemRes, inspRes, userRes] = await Promise.all([
+          apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, { page: 1, size: 500, autoFilter: true }),
+          apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, { page: 1, size: 500, autoFilter: true }),
+          apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true }),
+        ]);
+        const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+        setItemOptions(items.map((r: any) => ({
+          code: r.item_number || r.item_code || "",
+          name: r.item_name || "",
+          item_type: r.type || r.item_type || "",
+          unit: r.unit || "",
+        })));
+
+        const insps = inspRes.data?.data?.data || inspRes.data?.data?.rows || [];
+        setInspOptions(insps.map((r: any) => ({
+          code: r.id,
+          label: r.inspection_criteria || r.inspection_standard || r.id,
+          detail: r.inspection_item || r.inspection_criteria || "",
+          method: r.inspection_method || "",
+          types: r.inspection_type ? r.inspection_type.split(",").filter(Boolean) : [],
+        })));
+
+        // 검사유형 카테고리 값 로드 (코드→라벨 매핑용)
+        try {
+          const catRes = await apiClient.get(`/table-categories/${INSPECTION_TABLE}/inspection_type/values`);
+          const flatCats: { code: string; label: string }[] = [];
+          const flatten = (arr: any[]) => { for (const v of arr) { flatCats.push({ code: v.valueCode, label: v.valueLabel }); if (v.children?.length) flatten(v.children); } };
+          if (catRes.data?.data?.length) flatten(catRes.data.data);
+          setInspTypeCatOptions(flatCats);
+        } catch { /* skip */ }
+
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        setUserOptions(users.map((u: any) => ({
+          code: u.user_id || u.id,
+          label: `${u.user_name || u.name || u.user_id}${u.dept_name ? ` (${u.dept_name})` : ""}`,
+        })));
+      } catch { /* skip */ }
+    };
+    loadOptions();
+  }, []);
+
+  /* ═══════════════════ 품목 선택 모달 ═══════════════════ */
+  const openItemModal = () => {
+    setItemSearchKeyword("");
+    setFilteredItems(itemOptions);
+    setItemModalOpen(true);
+  };
+
+  const handleItemSearch = () => {
+    const kw = itemSearchKeyword.trim().toLowerCase();
+    if (!kw) { setFilteredItems(itemOptions); return; }
+    setFilteredItems(itemOptions.filter(o =>
+      o.code.toLowerCase().includes(kw) || o.name.toLowerCase().includes(kw)
+    ));
+  };
+
+  const selectItem = (item: typeof itemOptions[0]) => {
+    setForm(p => ({ ...p, item_code: item.code, item_name: item.name }));
+    setItemModalOpen(false);
+  };
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setData(rows);
+      setTotalCount(rows.length);
+    } catch {
+      toast.error("품목검사정보 조회에 실패했어요");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => { fetchData(); }, [fetchData]);
+
+  // item_code별 그룹핑
+  const groupedData = useMemo(() => {
+    const map: Record<string, { item_code: string; item_name: string; is_active: string; types: string[]; rows: any[] }> = {};
+    for (const row of data) {
+      const key = row.item_code || row.id;
+      if (!map[key]) {
+        map[key] = { item_code: row.item_code, item_name: row.item_name, is_active: row.is_active || "", types: [], rows: [] };
+      }
+      map[key].rows.push(row);
+      if (row.inspection_type && !map[key].types.includes(row.inspection_type)) {
+        map[key].types.push(row.inspection_type);
+      }
+    }
+    return Object.values(map);
+  }, [data]);
+
+  // 검사기준 ID → 라벨 resolve
+  const resolveInspLabel = useCallback((id: string) => {
+    const opt = inspOptions.find(o => o.code === id);
+    return opt?.label || id || "-";
+  }, [inspOptions]);
+
+  /* ═══════════════════ CRUD ═══════════════════ */
+  const openCreate = () => { setForm({}); setEditMode(false); setInspectionRows({}); setCollapsedTypes({}); setModalOpen(true); };
+  const openEdit = async (row: any) => {
+    setForm({ ...row });
+    setEditMode(true);
+    setCollapsedTypes({});
+
+    // 같은 item_code의 모든 검사항목 행을 조회하여 유형별로 분류
+    try {
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_code", operator: "equals", value: row.item_code }] },
+        autoFilter: true,
+      });
+      const allRows = res.data?.data?.data || res.data?.data?.rows || [];
+      const rowMap: Record<string, InspectionRow[]> = {};
+      const typeFlags: Record<string, boolean> = {};
+
+      for (const r of allRows) {
+        const inspType = r.inspection_type || "";
+        // 카테고리 코드/라벨로 INSPECTION_TYPES 키 매칭
+        const matched = INSPECTION_TYPES.find(t =>
+          t.matchLabels.some(ml => inspType.includes(ml)) ||
+          inspTypeCatOptions.some(cat => inspType.includes(cat.code) && t.matchLabels.some(ml => cat.label.includes(ml)))
+        );
+        const typeKey = matched?.key || "";
+        if (!typeKey) continue;
+        typeFlags[typeKey] = true;
+        if (!rowMap[typeKey]) rowMap[typeKey] = [];
+        rowMap[typeKey].push({
+          id: r.id,
+          inspection_standard_id: r.inspection_standard_id || "",
+          inspection_detail: r.inspection_item_name || r.inspection_standard || "",
+          inspection_method: r.inspection_method || "",
+          apply_process: "",
+          acceptance_criteria: r.pass_criteria || "",
+          is_required: r.is_required === "true" || r.is_required === true,
+        });
+      }
+
+      setInspectionRows(rowMap);
+      setForm(p => ({ ...p, ...typeFlags }));
+    } catch {
+      setInspectionRows({});
+    }
+    setModalOpen(true);
+  };
+
+  /* ═══════════════════ 검사항목 행 관리 ═══════════════════ */
+  const addInspRow = (typeKey: string) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: [...(prev[typeKey] || []), {
+        id: crypto.randomUUID(),
+        inspection_standard_id: "",
+        inspection_detail: "",
+        inspection_method: "",
+        apply_process: "",
+        acceptance_criteria: "",
+        is_required: false,
+      }],
+    }));
+  };
+
+  const removeInspRow = (typeKey: string, rowId: string) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: (prev[typeKey] || []).filter(r => r.id !== rowId),
+    }));
+  };
+
+  const updateInspRow = (typeKey: string, rowId: string, field: string, value: any) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: (prev[typeKey] || []).map(r => {
+        if (r.id !== rowId) return r;
+        if (field === "inspection_standard_id") {
+          const opt = inspOptions.find(o => o.code === value);
+          return { ...r, inspection_standard_id: value, inspection_detail: opt?.detail || "", inspection_method: opt?.method || "" };
+        }
+        return { ...r, [field]: value };
+      }),
+    }));
+  };
+
+  /** 검사유형 키에 매칭되는 검사기준만 필터링 */
+  const getFilteredInspOptions = (typeKey: string) => {
+    const typeDef = INSPECTION_TYPES.find(t => t.key === typeKey);
+    if (!typeDef) return inspOptions;
+    // matchLabels와 카테고리 라벨을 비교하여 해당 카테고리 코드를 찾음
+    const matchCodes = inspTypeCatOptions
+      .filter(cat => typeDef.matchLabels.some(ml => cat.label.includes(ml)))
+      .map(cat => cat.code);
+    if (matchCodes.length === 0) return inspOptions;
+    return inspOptions.filter(opt => opt.types.some(t => matchCodes.includes(t)));
+  };
+
+  const toggleCollapse = (typeKey: string) => {
+    setCollapsedTypes(prev => ({ ...prev, [typeKey]: !prev[typeKey] }));
+  };
+
+  const handleSave = async () => {
+    if (!form.item_code) { toast.error("품목코드는 필수 입력이에요"); return; }
+    setSaving(true);
+    try {
+      // 기존 행 삭제 (수정 모드)
+      if (editMode) {
+        const existRes = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_code", operator: "equals", value: form.item_code }] },
+          autoFilter: true,
+        });
+        const existing = existRes.data?.data?.data || existRes.data?.data?.rows || [];
+        if (existing.length > 0) {
+          await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+            data: existing.map((r: any) => ({ id: r.id })),
+          });
+        }
+      }
+
+      // 검사유형별 항목을 개별 행으로 INSERT
+      const enabledTypes = INSPECTION_TYPES.filter(t => !!form[t.key]);
+      const rows: any[] = [];
+      for (const t of enabledTypes) {
+        const typeLabel = t.label;
+        const typeRows = inspectionRows[t.key] || [];
+        if (typeRows.length === 0) {
+          // 유형만 체크하고 항목 없는 경우에도 1행 생성
+          rows.push({
+            id: crypto.randomUUID(),
+            item_code: form.item_code,
+            item_name: form.item_name,
+            inspection_type: typeLabel,
+            is_active: form.is_active || "사용",
+            manager_id: form.manager_id || "",
+            memo: form.remarks || "",
+          });
+        } else {
+          for (const r of typeRows) {
+            rows.push({
+              id: crypto.randomUUID(),
+              item_code: form.item_code,
+              item_name: form.item_name,
+              inspection_type: typeLabel,
+              inspection_standard_id: r.inspection_standard_id || "",
+              inspection_item_name: r.inspection_detail || "",
+              inspection_method: r.inspection_method || "",
+              pass_criteria: r.acceptance_criteria || "",
+              is_required: r.is_required ? "true" : "false",
+              is_active: form.is_active || "사용",
+              manager_id: form.manager_id || "",
+              memo: form.remarks || "",
+            });
+          }
+        }
+      }
+
+      for (const row of rows) {
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, row);
+      }
+
+      toast.success(editMode ? "품목검사정보를 수정했어요" : "품목검사정보를 등록했어요");
+      setModalOpen(false);
+      fetchData();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setSaving(false); }
+  };
+
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("품목검사정보 삭제", {
+      description: `선택한 ${checkedIds.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+        data: checkedIds.map(id => ({ id })),
+      });
+      toast.success(`${checkedIds.length}건을 삭제했어요`);
+      setCheckedIds([]);
+      fetchData();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="rounded-lg border bg-card">
+        <div className="px-3 py-2.5 border-b bg-muted/50">
+          <DynamicSearchFilter
+            tableName={TABLE_NAME}
+            filterId="c16-item-inspection"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={ts.filterConfig}
+            dataCount={totalCount}
+            extraActions={
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = data.find(r => checkedIds.includes(r.id));
+                  if (sel) {
+                    const group = groupedData.find(g => g.item_code === sel.item_code);
+                    openEdit(group?.rows[0] || sel);
+                  } else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={handleDelete}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+            }
+          />
+        </div>
+        <div className="p-3 overflow-auto">
+          {loading ? (
+            <div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
+          ) : groupedData.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+              <Inbox className="h-10 w-10 mb-2 opacity-30" />
+              <p className="text-sm">등록된 품목검사정보가 없어요</p>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted">
+                  <TableHead className="w-10" />
+                  <TableHead className="w-10"><Checkbox checked={groupedData.length > 0 && checkedIds.length === data.length} onCheckedChange={(v) => setCheckedIds(v ? data.map(r => r.id) : [])} /></TableHead>
+                  {ts.visibleColumns.map((col) => (
+                    <TableHead key={col.key} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground" style={ts.thStyle(col.key)}>
+                      {col.label}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {ts.groupData(groupedData).map((group) => {
+                  if ((group as any)._isGroupSummary || (group as any)._isGroupHeader) return null;
+                  const isExpanded = expandedItems.has(group.item_code);
+                  const groupIds = group.rows.map((r: any) => r.id);
+                  const allChecked = groupIds.every((id: string) => checkedIds.includes(id));
+                  const renderCell = (key: string) => {
+                    switch (key) {
+                      case "item_code": return <TableCell key={key} className="text-sm font-medium text-primary">{group.item_code}</TableCell>;
+                      case "item_name": return <TableCell key={key} className="text-sm">{group.item_name}</TableCell>;
+                      case "inspection_type": return (
+                        <TableCell key={key}>
+                          <div className="flex gap-1 flex-wrap">
+                            {group.types.map((t: string) => <Badge key={t} variant="secondary" className="text-[10px]">{t}</Badge>)}
+                          </div>
+                        </TableCell>
+                      );
+                      case "item_count": return <TableCell key={key} className="text-sm text-center">{group.rows.filter((r: any) => r.inspection_standard_id).length}</TableCell>;
+                      case "is_active": return (
+                        <TableCell key={key}>
+                          <Badge variant={group.is_active === "사용" || group.is_active === "true" ? "default" : "secondary"} className="text-[10px]">
+                            {group.is_active === "사용" || group.is_active === "true" ? "사용" : "미사용"}
+                          </Badge>
+                        </TableCell>
+                      );
+                      default: return <TableCell key={key}>{(group as any)[key] ?? ""}</TableCell>;
+                    }
+                  };
+                  return (
+                    <React.Fragment key={group.item_code}>
+                      <TableRow
+                        className={cn("cursor-pointer border-l-2 border-l-transparent", allChecked && "border-l-primary bg-primary/5")}
+                        onClick={() => setExpandedItems(prev => { const next = new Set(prev); if (next.has(group.item_code)) next.delete(group.item_code); else next.add(group.item_code); return next; })}
+                        onDoubleClick={() => openEdit(group.rows[0])}
+                      >
+                        <TableCell className="text-center p-2">
+                          <ChevronDown className={cn("w-4 h-4 transition-transform text-muted-foreground", !isExpanded && "-rotate-90")} />
+                        </TableCell>
+                        <TableCell className="text-center p-2" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => allChecked ? prev.filter(id => !groupIds.includes(id)) : [...new Set([...prev, ...groupIds])]); }}>
+                          <Checkbox checked={allChecked} onCheckedChange={() => {}} />
+                        </TableCell>
+                        {ts.visibleColumns.map((col) => renderCell(col.key))}
+                      </TableRow>
+                      {isExpanded && group.rows.filter((r: any) => r.inspection_standard_id).map((row: any) => (
+                        <TableRow key={row.id} className="bg-muted/30 text-xs">
+                          <TableCell />
+                          <TableCell />
+                          <TableCell className="pl-6 text-muted-foreground">{row.inspection_type}</TableCell>
+                          <TableCell>{resolveInspLabel(row.inspection_standard_id)}</TableCell>
+                          <TableCell>{row.inspection_item_name || "-"}</TableCell>
+                          <TableCell>{row.inspection_method || "-"}</TableCell>
+                          <TableCell>{row.pass_criteria || "-"}</TableCell>
+                        </TableRow>
+                      ))}
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+          <div className="mt-2 text-xs text-muted-foreground">전체 {groupedData.length}건 (품목 기준)</div>
+        </div>
+      </div>
+
+      {/* ═══════════════════ 등록/수정 모달 (품목선택 뷰 포함) ═══════════════════ */}
+      <Dialog open={modalOpen} onOpenChange={(open) => { if (!open) setItemModalOpen(false); setModalOpen(open); }}>
+        <DialogContent className={cn("max-w-[95vw] max-h-[85vh] overflow-y-auto", itemModalOpen ? "sm:max-w-xl" : "sm:max-w-4xl")}>
+          {itemModalOpen ? (
+            <>
+              <DialogHeader>
+                <DialogTitle>품목 선택</DialogTitle>
+                <DialogDescription>품목코드 또는 품목명으로 검색</DialogDescription>
+              </DialogHeader>
+              <div className="flex gap-2">
+                <Input
+                  className="h-9 flex-1"
+                  placeholder="품목코드 또는 품목명으로 검색"
+                  value={itemSearchKeyword}
+                  onChange={(e) => setItemSearchKeyword(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === "Enter") handleItemSearch(); }}
+                />
+                <Button size="sm" className="h-9" onClick={handleItemSearch}>
+                  <Search className="w-4 h-4 mr-1" />검색
+                </Button>
+              </div>
+              <div className="border rounded-lg overflow-auto max-h-[50vh]">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="text-[11px] font-bold">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold">품목명</TableHead>
+                      <TableHead className="text-[11px] font-bold">품목유형</TableHead>
+                      <TableHead className="text-[11px] font-bold">단위</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredItems.length === 0 ? (
+                      <TableRow><TableCell colSpan={4} className="text-center py-8 text-muted-foreground text-sm">검색 결과가 없어요</TableCell></TableRow>
+                    ) : filteredItems.map((item) => (
+                      <TableRow
+                        key={item.code}
+                        className="cursor-pointer hover:bg-primary/5"
+                        onClick={() => selectItem(item)}
+                      >
+                        <TableCell className="text-sm">{item.code}</TableCell>
+                        <TableCell className="text-sm">{item.name}</TableCell>
+                        <TableCell className="text-sm">{item.item_type}</TableCell>
+                        <TableCell className="text-sm">{item.unit}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setItemModalOpen(false)}>취소</Button>
+              </DialogFooter>
+            </>
+          ) : (
+            <>
+              <DialogHeader>
+                <DialogTitle>{editMode ? "품목검사정보 수정" : "품목검사정보 등록"}</DialogTitle>
+                <DialogDescription className="sr-only">품목검사정보를 등록합니다</DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4">
+                {/* 품목 정보 */}
+                <div className="space-y-3">
+                  <h4 className="text-sm font-semibold flex items-center gap-1.5">📦 품목 정보</h4>
+                  <div className="flex items-end gap-2">
+                    <div className="space-y-1.5 flex-1">
+                      <Label className="text-xs font-semibold text-muted-foreground">품목코드 <span className="text-destructive">*</span></Label>
+                      <Input className="h-9 bg-muted" value={form.item_code || ""} readOnly placeholder="품목코드" />
+                    </div>
+                    <div className="space-y-1.5 flex-1">
+                      <Label className="text-xs font-semibold text-muted-foreground">품목명 <span className="text-destructive">*</span></Label>
+                      <Input className="h-9 bg-muted" value={form.item_name || ""} readOnly placeholder="품목명" />
+                    </div>
+                    <Button type="button" variant="outline" size="sm" className="h-9 px-3 shrink-0" onClick={openItemModal}>
+                      <Search className="w-4 h-4 mr-1" />품목선택
+                    </Button>
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-1.5">
+                      <Label className="text-xs font-semibold text-muted-foreground">사용여부</Label>
+                      <Select value={form.is_active === false ? "N" : "Y"} onValueChange={(v) => setForm(p => ({ ...p, is_active: v === "Y" }))}>
+                        <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">사용</SelectItem>
+                          <SelectItem value="N">미사용</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-xs font-semibold text-muted-foreground">관리자</Label>
+                      <Select value={form.manager || ""} onValueChange={(v) => setForm(p => ({ ...p, manager: v }))}>
+                        <SelectTrigger className="h-9"><SelectValue placeholder="관리자 선택" /></SelectTrigger>
+                        <SelectContent>
+                          {userOptions.map(o => (
+                            <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold text-muted-foreground">비고</Label>
+                    <textarea
+                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                      value={form.remarks || ""}
+                      onChange={(e) => setForm(p => ({ ...p, remarks: e.target.value }))}
+                      placeholder="비고 사항"
+                    />
+                  </div>
+                </div>
+                {/* 검사유형 선택 */}
+                <div className="space-y-3">
+                  <h4 className="text-sm font-semibold flex items-center gap-1.5">✅ 검사유형 선택</h4>
+                  <div className="flex flex-wrap gap-4">
+                    {INSPECTION_TYPES.map(({ key, label }) => (
+                      <div key={key} className="flex items-center gap-1.5">
+                        <Checkbox
+                          checked={!!form[key]}
+                          onCheckedChange={(v) => setForm(p => ({ ...p, [key]: !!v }))}
+                        />
+                        <Label className="text-sm cursor-pointer">{label}</Label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                {/* 검사유형별 검사항목 설정 */}
+                {INSPECTION_TYPES.filter(t => !!form[t.key]).map(({ key, label }) => (
+                  <div key={key} className="space-y-2">
+                    <button
+                      type="button"
+                      className="w-full flex items-center gap-2 py-2 px-3 rounded-md border bg-muted/50 hover:bg-muted text-left"
+                      onClick={() => toggleCollapse(key)}
+                    >
+                      <Badge variant="default" className="text-xs">{label}</Badge>
+                      <span className="text-sm font-medium">검사항목 설정</span>
+                      <ChevronDown className={cn("w-4 h-4 ml-auto transition-transform", collapsedTypes[key] && "-rotate-90")} />
+                    </button>
+                    {!collapsedTypes[key] && (
+                      <div className="space-y-2 pl-1">
+                        <div className="flex items-center justify-between">
+                          <span className="text-xs font-semibold text-muted-foreground">검사항목 목록</span>
+                          <Button type="button" size="sm" variant="outline" className="h-7 text-xs" onClick={() => addInspRow(key)}>
+                            <Plus className="w-3 h-3 mr-1" />항목추가
+                          </Button>
+                        </div>
+                        <div className="border rounded-lg overflow-hidden">
+                          <Table>
+                            <TableHeader>
+                              <TableRow className="bg-muted/50 hover:bg-muted/50">
+                                <TableHead className="text-[10px] font-bold w-[170px]">검사기준 선택</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[130px]">검사기준 상세</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[90px]">검사방법</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[100px]">적용공정</TableHead>
+                                <TableHead className="text-[10px] font-bold">합격기준 (판단기준별)</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[40px]">필수</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[36px]" />
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                              {(!inspectionRows[key] || inspectionRows[key].length === 0) ? (
+                                <TableRow><TableCell colSpan={7} className="text-center py-4 text-xs text-muted-foreground">항목추가 버튼으로 검사항목을 추가하세요</TableCell></TableRow>
+                              ) : inspectionRows[key].map((row) => (
+                                <TableRow key={row.id}>
+                                  <TableCell className="p-1">
+                                    <Select value={row.inspection_standard_id || ""} onValueChange={(v) => updateInspRow(key, row.id, "inspection_standard_id", v)}>
+                                      <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="검사기준 선택" /></SelectTrigger>
+                                      <SelectContent>
+                                        {getFilteredInspOptions(key).map(o => (
+                                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input className="h-8 text-xs bg-muted" value={row.inspection_detail} readOnly placeholder="검사기준 상세" />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input className="h-8 text-xs bg-muted" value={row.inspection_method} readOnly placeholder="선택" />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Select value={row.apply_process || ""} onValueChange={(v) => updateInspRow(key, row.id, "apply_process", v)}>
+                                      <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="공정 선택" /></SelectTrigger>
+                                      <SelectContent>
+                                        <SelectItem value="incoming">입고</SelectItem>
+                                        <SelectItem value="process">공정</SelectItem>
+                                        <SelectItem value="outgoing">출고</SelectItem>
+                                        <SelectItem value="final">최종</SelectItem>
+                                      </SelectContent>
+                                    </Select>
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input
+                                      className="h-8 text-xs"
+                                      value={row.acceptance_criteria}
+                                      onChange={(e) => updateInspRow(key, row.id, "acceptance_criteria", e.target.value)}
+                                      placeholder={row.inspection_standard_id ? "합격기준 입력" : "검사기준을 먼저 선택하세요"}
+                                      disabled={!row.inspection_standard_id}
+                                    />
+                                  </TableCell>
+                                  <TableCell className="p-1 text-center">
+                                    <Checkbox checked={row.is_required} onCheckedChange={(v) => updateInspRow(key, row.id, "is_required", !!v)} />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Button type="button" variant="destructive" size="sm" className="h-7 w-7 p-0" onClick={() => removeInspRow(key, row.id)}>
+                                      <Trash2 className="w-3.5 h-3.5" />
+                                    </Button>
+                                  </TableCell>
+                                </TableRow>
+                              ))}
+                            </TableBody>
+                          </Table>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setModalOpen(false)}>취소</Button>
+                <Button onClick={handleSave} disabled={saving}>
+                  {saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+                  저장
+                </Button>
+              </DialogFooter>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/sales/claim/page.tsx b/frontend/app/(main)/COMPANY_8/sales/claim/page.tsx
new file mode 100644
index 00000000..a2c89599
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/sales/claim/page.tsx
@@ -0,0 +1,932 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Download,
+  Plus,
+  Save,
+  ClipboardList,
+  Inbox,
+  Check,
+  ChevronsUpDown,
+  Loader2,
+  FileSpreadsheet,
+  Trash2,
+  Pencil,
+  FileText,
+  Wrench,
+  Settings2,
+} from "lucide-react";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+
+// --- 상수 ---
+const TABLE_NAME = "claim_mng";
+
+const GRID_COLUMNS = [
+  { key: "claim_no", label: "클레임번호" },
+  { key: "claim_date", label: "접수일자" },
+  { key: "claim_type", label: "유형" },
+  { key: "claim_status", label: "상태" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "manager_name", label: "담당자" },
+  { key: "claim_content", label: "클레임 내용" },
+];
+
+type ClaimType = "불량" | "교환" | "반품" | "배송지연" | "기타";
+type ClaimStatus = "접수" | "처리중" | "완료" | "취소";
+
+interface ClaimRow {
+  id: number;
+  claim_no: string;
+  claim_date: string;
+  claim_type: string;
+  claim_status: string;
+  customer_code: string;
+  customer_name: string;
+  manager_name: string;
+  order_no: string;
+  claim_content: string;
+  process_content: string;
+  company_code?: string;
+  writer?: string;
+  created_date?: string;
+  updated_date?: string;
+  [key: string]: any;
+}
+
+interface CustomerOption {
+  customerCode: string;
+  customerName: string;
+}
+
+interface SalesOrderOption {
+  orderNo: string;
+  partnerName: string;
+  status: string;
+}
+
+// Badge variant 매핑 (CSS 변수 기반)
+const getClaimStatusVariant = (status: string) => {
+  switch (status) {
+    case "접수": return "default" as const;
+    case "처리중": return "secondary" as const;
+    case "완료": return "outline" as const;
+    case "취소": return "destructive" as const;
+    default: return "secondary" as const;
+  }
+};
+
+const getClaimTypeVariant = (type: string) => {
+  switch (type) {
+    case "불량": return "destructive" as const;
+    case "교환": return "warning" as const;
+    case "반품": return "default" as const;
+    case "배송지연": return "secondary" as const;
+    case "기타": return "outline" as const;
+    default: return "outline" as const;
+  }
+};
+
+const CLAIM_TYPES: ClaimType[] = ["불량", "교환", "반품", "배송지연", "기타"];
+const CLAIM_STATUSES: ClaimStatus[] = ["접수", "처리중", "완료", "취소"];
+
+export default function ClaimManagementPage() {
+  useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-claim", TABLE_NAME, GRID_COLUMNS);
+
+  const [data, setData] = useState<ClaimRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [selectedClaimNo, setSelectedClaimNo] = useState<string | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 엑셀 업로드
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 모달 상태
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [formData, setFormData] = useState<Partial<ClaimRow>>({});
+
+  // Combobox 상태
+  const [customerOpen, setCustomerOpen] = useState(false);
+  const [orderOpen, setOrderOpen] = useState(false);
+
+  // DB 데이터
+  const [customers, setCustomers] = useState<CustomerOption[]>([]);
+  const [salesOrders, setSalesOrders] = useState<SalesOrderOption[]>([]);
+  const [customersLoading, setCustomersLoading] = useState(false);
+  const [ordersLoading, setOrdersLoading] = useState(false);
+
+  // --- 데이터 조회 (서버사이드 필터 + autoFilter 멀티테넌시) ---
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "claim_date", order: "desc" },
+      });
+
+      const rows: ClaimRow[] = res.data?.data?.data || res.data?.data?.rows || [];
+      setData(rows);
+      setTotalCount(res.data?.data?.total || rows.length);
+    } catch {
+      toast.error("클레임 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+
+  // 거래처 목록 조회 (autoFilter로 멀티테넌시 적용)
+  const fetchCustomers = useCallback(async (force = false) => {
+    if (!force && customers.length > 0) return;
+    setCustomersLoading(true);
+    try {
+      const res = await apiClient.post("/table-management/tables/customer_mng/data", {
+        page: 1,
+        size: 9999,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows;
+      if (res.data?.success && Array.isArray(rows)) {
+        const list: CustomerOption[] = rows.map((row: any) => ({
+          customerCode: row.customer_code || row.id || "",
+          customerName: row.customer_name || "",
+        }));
+        setCustomers(list);
+      }
+    } catch {
+      /* skip */
+    } finally {
+      setCustomersLoading(false);
+    }
+  }, [customers.length]);
+
+  // 수주 목록 조회 (autoFilter로 멀티테넌시 적용)
+  const fetchSalesOrders = useCallback(async (force = false) => {
+    if (!force && salesOrders.length > 0) return;
+    setOrdersLoading(true);
+    try {
+      const res = await apiClient.post("/table-management/tables/sales_order_mng/data", {
+        page: 1,
+        size: 9999,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows;
+      if (res.data?.success && Array.isArray(rows)) {
+        const seen = new Set<string>();
+        const list: SalesOrderOption[] = [];
+        for (const row of rows) {
+          const orderNo = row.order_no || "";
+          if (!orderNo || seen.has(orderNo)) continue;
+          seen.add(orderNo);
+          list.push({
+            orderNo,
+            partnerName: row.partner_id || "",
+            status: row.status || "",
+          });
+        }
+        setSalesOrders(list);
+      }
+    } catch {
+      /* skip */
+    } finally {
+      setOrdersLoading(false);
+    }
+  }, [salesOrders.length]);
+
+  // 상태별 카운트
+  const statusCounts = useMemo(() => {
+    const counts = { 접수: 0, 처리중: 0, 완료: 0, 취소: 0 };
+    data.forEach((claim) => {
+      if (counts[claim.claim_status as keyof typeof counts] !== undefined) {
+        counts[claim.claim_status as keyof typeof counts]++;
+      }
+    });
+    return counts;
+  }, [data]);
+
+  // 클레임번호 자동 생성
+  const generateClaimNo = useCallback(() => {
+    const year = new Date().getFullYear();
+    const prefix = `CLM-${year}-`;
+    const existingNumbers = data
+      .filter((c) => c.claim_no?.startsWith(prefix))
+      .map((c) => parseInt(c.claim_no.replace(prefix, ""), 10))
+      .filter((n) => !isNaN(n));
+    const maxNumber = existingNumbers.length > 0 ? Math.max(...existingNumbers) : 0;
+    return `${prefix}${String(maxNumber + 1).padStart(3, "0")}`;
+  }, [data]);
+
+  const handleRowClick = (claimNo: string) => {
+    setSelectedClaimNo(claimNo);
+  };
+
+  const openRegisterModal = () => {
+    setIsEditMode(false);
+    setFormData({
+      claim_no: generateClaimNo(),
+      claim_date: new Date().toISOString().split("T")[0],
+      claim_type: undefined,
+      claim_status: "접수",
+      customer_code: "",
+      customer_name: "",
+      manager_name: "",
+      order_no: "",
+      claim_content: "",
+      process_content: "",
+    });
+    setIsModalOpen(true);
+    fetchCustomers(true);
+    fetchSalesOrders(true);
+  };
+
+  const openEditModal = (claimNo: string) => {
+    const claim = data.find((c) => c.claim_no === claimNo);
+    if (!claim) return;
+    setIsEditMode(true);
+    setFormData({ ...claim });
+    setIsModalOpen(true);
+    fetchCustomers(true);
+    fetchSalesOrders(true);
+  };
+
+  const handleFormChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  // --- 저장 (table-management API, company_code 자동 주입) ---
+  const handleSave = async () => {
+    if (!formData.claim_type || !formData.customer_name || !formData.claim_content) {
+      toast.error("필수 항목을 모두 입력해주세요. (클레임유형, 거래처명, 클레임내용)");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const { id, company_code, writer, created_date, updated_date, created_by, updated_by, ...saveFields } = formData as any;
+
+      if (isEditMode && id) {
+        await apiClient.put(`/table-management/tables/${TABLE_NAME}/edit`, {
+          originalData: { id },
+          updatedData: saveFields,
+        });
+        toast.success("클레임이 수정되었어요.");
+      } else {
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, saveFields);
+        toast.success("클레임이 등록되었어요.");
+      }
+
+      setIsModalOpen(false);
+      fetchData();
+    } catch (err: any) {
+      console.error("클레임 저장 실패:", err);
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // --- 삭제 ---
+  const handleDelete = async (claimNo: string) => {
+    const claim = data.find((c) => c.claim_no === claimNo);
+    if (!claim) return;
+
+    const ok = await confirm(`클레임 ${claimNo}을(를) 삭제하시겠습니까?`, {
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+
+    try {
+      await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+        data: [{ id: claim.id }],
+      });
+      toast.success("클레임이 삭제되었어요.");
+      if (selectedClaimNo === claimNo) setSelectedClaimNo(null);
+      fetchData();
+    } catch (err: any) {
+      console.error("클레임 삭제 실패:", err);
+      toast.error(err.response?.data?.message || "삭제에 실패했어요.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (data.length === 0) {
+      toast.error("다운로드할 데이터가 없어요.");
+      return;
+    }
+    try {
+      const exportData = data.map((row) => ({
+        클레임번호: row.claim_no,
+        접수일자: row.claim_date,
+        클레임유형: row.claim_type,
+        처리상태: row.claim_status,
+        거래처코드: row.customer_code,
+        거래처명: row.customer_name,
+        담당자: row.manager_name,
+        수주번호: row.order_no,
+        클레임내용: row.claim_content,
+        처리내용: row.process_content,
+      }));
+      await exportToExcel(exportData, "클레임관리.xlsx", "클레임");
+      toast.success("엑셀 다운로드 완료");
+    } catch (err) {
+      console.error("엑셀 다운로드 실패:", err);
+      toast.error("엑셀 다운로드에 실패했어요.");
+    }
+  };
+
+  const selectedClaim = useMemo(
+    () => data.find((c) => c.claim_no === selectedClaimNo),
+    [data, selectedClaimNo]
+  );
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-4rem)] overflow-hidden">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={TABLE_NAME}
+        filterId="c16-claim"
+        onFilterChange={setSearchFilters}
+        dataCount={data.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* ───── 메인 분할 레이아웃 ───── */}
+      <div className="flex-1 overflow-hidden">
+        <ResizablePanelGroup direction="horizontal" className="h-full">
+          {/* ── 좌측: 클레임 목록 (65%) ── */}
+          <ResizablePanel defaultSize={65} minSize={35}>
+            <div className="flex flex-col h-full bg-card">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="flex items-center gap-2">
+                  <ClipboardList className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-[13px] font-bold text-foreground">클레임 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {data.length}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+                    <FileSpreadsheet className="w-3.5 h-3.5" />
+                    업로드
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+                    <Download className="w-3.5 h-3.5" />
+                    다운로드
+                  </Button>
+                  <Button size="sm" onClick={openRegisterModal}>
+                    <Plus className="w-3.5 h-3.5" />
+                    등록
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 테이블 */}
+              <EDataTable
+                columns={ts.visibleColumns.map((col): EDataTableColumn<ClaimRow> => ({
+                  key: col.key,
+                  label: col.label,
+                  align: col.key === "claim_type" || col.key === "claim_status" ? "center" : undefined,
+                  render: col.key === "claim_type"
+                    ? (val: any) => (
+                        <Badge variant={getClaimTypeVariant(val)} className="text-[10px] px-1.5 py-0">
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "claim_status"
+                    ? (val: any) => (
+                        <Badge variant={getClaimStatusVariant(val)} className="text-[10px] px-1.5 py-0">
+                          {val}
+                        </Badge>
+                      )
+                    : undefined,
+                }))}
+                data={ts.groupData(data)}
+                loading={loading}
+                emptyMessage="등록된 클레임이 없어요"
+                rowKey={(row) => String(row.id)}
+                selectedId={selectedClaimNo ? String(data.find(c => c.claim_no === selectedClaimNo)?.id ?? "") : null}
+                onSelect={(id) => {
+                  const claim = data.find(c => String(c.id) === id);
+                  handleRowClick(claim?.claim_no ?? "");
+                }}
+                onRowDoubleClick={(row) => openEditModal(row.claim_no)}
+                showRowNumber
+                draggableColumns={false}
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* ── 우측: 클레임 상세 (35%) ── */}
+          <ResizablePanel defaultSize={35} minSize={20}>
+            <div className="flex flex-col h-full bg-card border-l">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="flex items-center gap-2">
+                  <ClipboardList className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-[13px] font-bold text-foreground">클레임 상세</span>
+                  {selectedClaim && (
+                    <span className="text-[11px] font-mono text-muted-foreground">{selectedClaim.claim_no}</span>
+                  )}
+                </div>
+                {selectedClaim && (
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => openEditModal(selectedClaim.claim_no)}
+                    >
+                      <Pencil className="w-3.5 h-3.5" />
+                      수정
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="text-destructive hover:text-destructive"
+                      onClick={() => handleDelete(selectedClaim.claim_no)}
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {/* 상태별 요약 카운트 */}
+              <div className="flex items-center gap-3 px-4 py-2 border-b bg-muted/20 shrink-0">
+                {([
+                  { label: "접수", count: statusCounts["접수"], variant: "default" as const },
+                  { label: "처리중", count: statusCounts["처리중"], variant: "secondary" as const },
+                  { label: "완료", count: statusCounts["완료"], variant: "outline" as const },
+                  { label: "취소", count: statusCounts["취소"], variant: "destructive" as const },
+                ]).map((item) => (
+                  <div key={item.label} className="flex items-center gap-1">
+                    <Badge variant={item.variant} className="text-[10px] px-1.5 py-0">
+                      {item.label}
+                    </Badge>
+                    <span className="text-sm font-bold tabular-nums text-foreground">{item.count}</span>
+                  </div>
+                ))}
+              </div>
+
+              {/* 상세 컨텐츠 */}
+              <div className="flex-1 overflow-auto">
+                {selectedClaim ? (
+                  <div className="p-4 space-y-4">
+                    {/* 기본 정보 그리드 */}
+                    <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">접수일자</p>
+                        <p className="text-sm text-foreground">{selectedClaim.claim_date}</p>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">담당자</p>
+                        <p className="text-sm text-foreground">{selectedClaim.manager_name || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">유형</p>
+                        <Badge variant={getClaimTypeVariant(selectedClaim.claim_type)} className="text-[11px]">
+                          {selectedClaim.claim_type}
+                        </Badge>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">상태</p>
+                        <Badge variant={getClaimStatusVariant(selectedClaim.claim_status)} className="text-[11px]">
+                          {selectedClaim.claim_status}
+                        </Badge>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">거래처명</p>
+                        <p className="text-sm font-medium text-foreground">{selectedClaim.customer_name}</p>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주번호</p>
+                        <p className="text-sm font-mono text-muted-foreground">{selectedClaim.order_no || "-"}</p>
+                      </div>
+                    </div>
+
+                    <div className="border-t" />
+
+                    {/* 클레임 내용 */}
+                    <div>
+                      <div className="flex items-center gap-1.5 mb-1.5">
+                        <FileText className="w-3.5 h-3.5 text-muted-foreground" />
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">클레임 내용</p>
+                      </div>
+                      <div className="rounded-md border bg-muted/30 p-3 text-sm text-foreground whitespace-pre-wrap min-h-[60px]">
+                        {selectedClaim.claim_content || "-"}
+                      </div>
+                    </div>
+
+                    {/* 처리 내용 */}
+                    <div>
+                      <div className="flex items-center gap-1.5 mb-1.5">
+                        <Wrench className="w-3.5 h-3.5 text-muted-foreground" />
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">처리 내용</p>
+                      </div>
+                      <div className="rounded-md border bg-muted/30 p-3 text-sm text-foreground whitespace-pre-wrap min-h-[60px]">
+                        {selectedClaim.process_content || "-"}
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex flex-col items-center justify-center h-full text-center p-8">
+                    <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-14 h-14 flex items-center justify-center mb-4">
+                      <Inbox className="w-7 h-7 text-muted-foreground/30" />
+                    </div>
+                    <p className="text-sm font-medium text-muted-foreground mb-1">
+                      좌측에서 클레임을 선택해주세요
+                    </p>
+                    <p className="text-xs text-muted-foreground/60">
+                      클레임을 선택하면 상세 정보가 표시돼요
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ───── 클레임 등록/수정 모달 ───── */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[900px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "클레임 수정" : "클레임 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? "클레임 정보를 수정해요." : "새로운 클레임을 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex flex-col md:flex-row gap-4 py-2">
+            {/* 왼쪽: 기본 정보 */}
+            <div className="md:w-[320px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border">
+              <h3 className="text-[13px] font-bold pb-2 border-b text-foreground">기본 정보</h3>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_no" className="text-[11px] font-semibold text-muted-foreground">클레임번호</Label>
+                <Input
+                  id="claim_no"
+                  value={formData.claim_no || ""}
+                  readOnly
+                  className="h-9 text-sm bg-muted cursor-not-allowed font-mono"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_date" className="text-[11px] font-semibold text-muted-foreground">접수일자</Label>
+                <Input
+                  id="claim_date"
+                  type="date"
+                  value={formData.claim_date || ""}
+                  onChange={(e) => handleFormChange("claim_date", e.target.value)}
+                  className="h-9 text-sm"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_type" className="text-[11px] font-semibold text-muted-foreground">
+                  클레임 유형 <span className="text-destructive">*</span>
+                </Label>
+                <Select
+                  value={formData.claim_type || ""}
+                  onValueChange={(v) => handleFormChange("claim_type", v)}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue placeholder="유형을 선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CLAIM_TYPES.map((t) => (
+                      <SelectItem key={t} value={t}>{t}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_status" className="text-[11px] font-semibold text-muted-foreground">처리 상태</Label>
+                <Select
+                  value={formData.claim_status || "접수"}
+                  onValueChange={(v) => handleFormChange("claim_status", v)}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CLAIM_STATUSES.map((s) => (
+                      <SelectItem key={s} value={s}>{s}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <Label className="text-[11px] font-semibold text-muted-foreground">
+                  거래처명 <span className="text-destructive">*</span>
+                </Label>
+                <Popover open={customerOpen} onOpenChange={setCustomerOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={customerOpen}
+                      className="h-9 w-full justify-between font-normal"
+                      onClick={() => fetchCustomers(false)}
+                    >
+                      {formData.customer_name || "거래처를 선택해주세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput placeholder="거래처 검색..." />
+                      <CommandList>
+                        {customersLoading ? (
+                          <div className="flex items-center justify-center py-6">
+                            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                            <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
+                          </div>
+                        ) : (
+                          <>
+                            <CommandEmpty className="py-4 text-center text-sm">
+                              거래처를 찾을 수 없어요.
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {customers.map((cust) => (
+                                <CommandItem
+                                  key={cust.customerCode}
+                                  value={`${cust.customerCode} ${cust.customerName}`}
+                                  onSelect={() => {
+                                    setFormData((prev) => ({
+                                      ...prev,
+                                      customer_code: cust.customerCode,
+                                      customer_name: cust.customerName,
+                                    }));
+                                    setCustomerOpen(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      formData.customer_code === cust.customerCode
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col min-w-0">
+                                    <span className="font-medium truncate">{cust.customerName}</span>
+                                    <span className="text-[10px] text-muted-foreground">{cust.customerCode}</span>
+                                  </div>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="manager_name" className="text-[11px] font-semibold text-muted-foreground">담당자</Label>
+                <Input
+                  id="manager_name"
+                  value={formData.manager_name || ""}
+                  onChange={(e) => handleFormChange("manager_name", e.target.value)}
+                  placeholder="담당자를 입력해주세요"
+                  className="h-9"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label className="text-[11px] font-semibold text-muted-foreground">수주번호</Label>
+                <Popover open={orderOpen} onOpenChange={setOrderOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={orderOpen}
+                      className="h-9 w-full justify-between font-normal"
+                      onClick={() => fetchSalesOrders(false)}
+                    >
+                      {formData.order_no || "수주번호를 선택해주세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput placeholder="수주번호 검색..." />
+                      <CommandList>
+                        {ordersLoading ? (
+                          <div className="flex items-center justify-center py-6">
+                            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                            <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
+                          </div>
+                        ) : (
+                          <>
+                            <CommandEmpty className="py-4 text-center text-sm">
+                              수주번호를 찾을 수 없어요.
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {salesOrders.map((order) => (
+                                <CommandItem
+                                  key={order.orderNo}
+                                  value={`${order.orderNo} ${order.partnerName}`}
+                                  onSelect={() => {
+                                    setFormData((prev) => ({
+                                      ...prev,
+                                      order_no: order.orderNo,
+                                    }));
+                                    setOrderOpen(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      formData.order_no === order.orderNo
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col min-w-0">
+                                    <span className="font-medium truncate">{order.orderNo}</span>
+                                    <span className="text-[10px] text-muted-foreground">
+                                      {order.status}
+                                      {order.partnerName ? ` | ${order.partnerName}` : ""}
+                                    </span>
+                                  </div>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+
+            {/* 오른쪽: 상세 내용 */}
+            <div className="flex-1 space-y-3 bg-muted/30 p-4 rounded-lg border min-w-0">
+              <h3 className="text-[13px] font-bold pb-2 border-b text-foreground">클레임 상세 내용</h3>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_content" className="text-[11px] font-semibold text-muted-foreground">
+                  클레임 내용 <span className="text-destructive">*</span>
+                </Label>
+                <Textarea
+                  id="claim_content"
+                  value={formData.claim_content || ""}
+                  onChange={(e) => handleFormChange("claim_content", e.target.value)}
+                  placeholder="클레임 내용을 상세히 입력해주세요"
+                  className="min-h-[200px] resize-y text-sm"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="process_content" className="text-[11px] font-semibold text-muted-foreground">처리 내용</Label>
+                <Textarea
+                  id="process_content"
+                  value={formData.process_content || ""}
+                  onChange={(e) => handleFormChange("process_content", e.target.value)}
+                  placeholder="처리 내용을 입력해주세요"
+                  className="min-h-[150px] resize-y text-sm"
+                />
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <Save className="w-4 h-4" />
+              )}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 모달 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={TABLE_NAME}
+        onSuccess={() => {
+          fetchData();
+          toast.success("엑셀 업로드가 완료되었어요.");
+        }}
+      />
+
+      {/* 확인 다이얼로그 */}
+      {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/sales/customer/page.tsx b/frontend/app/(main)/COMPANY_8/sales/customer/page.tsx
new file mode 100644
index 00000000..61e1269d
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/sales/customer/page.tsx
@@ -0,0 +1,2762 @@
+"use client";
+
+/**
+ * 거래처관리 — Type B 마스터-디테일 레이아웃 (리디자인)
+ *
+ * 좌측: 거래처 목록 (customer_mng)
+ * 우측: 품목별 단가 + 납품처 정보 탭
+ *
+ * 모달:
+ * - 거래처 등록/수정 (customer_mng)
+ * - 품목 추가 (item_info 검색 → customer_item_mapping + customer_item_prices)
+ * - 납품처 등록 (delivery_destination)
+ */
+
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Users, Package, MapPin, Search, X, Tag, Coins, Settings2, GripVertical,
+  ChevronRight, ChevronDown,
+} from "lucide-react";
+import {
+  DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { validateField, validateForm, formatField } from "@/lib/utils/validation";
+import { getAvailableNumberingRulesForScreen, previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const CUSTOMER_TABLE = "customer_mng";
+const MAPPING_TABLE = "customer_item_mapping";
+const PRICE_TABLE = "customer_item_prices";
+const DELIVERY_TABLE = "delivery_destination";
+const CONTACT_TABLE = "customer_contact";
+
+const CUSTOMER_GRID_COLUMNS = [
+  { key: "customer_code", label: "거래처코드" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "division", label: "거래유형" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "전화번호" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "status", label: "상태" },
+];
+
+function SortableMappingRow({ id, children }: { id: string; children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform), transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+  return (
+    <div ref={setNodeRef} style={style} className="flex gap-2 items-center">
+      <div {...attributes} {...listeners} className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0">
+        <GripVertical className="h-3.5 w-3.5" />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default function CustomerManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-customer", CUSTOMER_TABLE, CUSTOMER_GRID_COLUMNS);
+  const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 거래처 목록
+  const [customers, setCustomers] = useState<any[]>([]);
+  const [rawCustomers, setRawCustomers] = useState<any[]>([]);
+  const [customerLoading, setCustomerLoading] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
+  const [mainContactMap, setMainContactMap] = useState<Record<string, any>>({});
+  const [customerCount, setCustomerCount] = useState(0);
+  const [selectedCustomerId, setSelectedCustomerId] = useState<string | null>(null);
+
+  // 우측: 탭
+  const [rightTab, setRightTab] = useState<"items" | "delivery">("items");
+  // 우측: 품목 단가
+  const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceGroups, setPriceGroups] = useState<Record<string, { master: any; details: any[] }>>({});
+  const [priceLoading, setPriceLoading] = useState(false);
+  const [priceCheckedIds, setPriceCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [collapsedPriceCards, setCollapsedPriceCards] = useState<Set<string>>(new Set());
+  // 우측: 납품처
+  const [deliveryItems, setDeliveryItems] = useState<any[]>([]);
+  const [deliveryLoading, setDeliveryLoading] = useState(false);
+
+  // 품목 편집 데이터 (더블클릭 시 상세 입력 모달 재활용)
+  const [editItemData, setEditItemData] = useState<any>(null);
+  const savingRef = useRef(false);
+
+  // 거래처 모달
+  const [customerModalOpen, setCustomerModalOpen] = useState(false);
+  const [customerEditMode, setCustomerEditMode] = useState(false);
+  const [customerForm, setCustomerForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 품목 추가 모달 (1단계: 검색/선택)
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemTotalCount, setItemTotalCount] = useState(0);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 상세 입력 모달 (2단계: 거래처 품번/품명 + 단가)
+  const [itemDetailOpen, setItemDetailOpen] = useState(false);
+  const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; customer_item_code: string; customer_item_name: string }>>>({});
+  const [itemPrices, setItemPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 거래처 모달 탭
+  const [customerModalTab, setCustomerModalTab] = useState<"basic" | "contacts" | "delivery">("basic");
+  // 담당자 (customer_contact) - 모달 내
+  const [modalContacts, setModalContacts] = useState<any[]>([]);
+  const [modalContactLoading, setModalContactLoading] = useState(false);
+  const [modalContactForm, setModalContactForm] = useState<Record<string, any>>({});
+  const [modalContactEditId, setModalContactEditId] = useState<string | null>(null);
+  const [modalContactFormOpen, setModalContactFormOpen] = useState(false);
+  const [modalContactSaving, setModalContactSaving] = useState(false);
+  // 납품처 (delivery_destination) - 모달 내
+  const [modalDeliveries, setModalDeliveries] = useState<any[]>([]);
+  const [modalDeliveryLoading, setModalDeliveryLoading] = useState(false);
+  const [modalDeliveryForm, setModalDeliveryForm] = useState<Record<string, any>>({});
+  const [modalDeliveryEditId, setModalDeliveryEditId] = useState<string | null>(null);
+  const [modalDeliveryFormOpen, setModalDeliveryFormOpen] = useState(false);
+  const [modalDeliverySaving, setModalDeliverySaving] = useState(false);
+  const [modalDeliveryFormErrors, setModalDeliveryFormErrors] = useState<Record<string, string>>({});
+
+  const [continuousInput, setContinuousInput] = useState(false);
+
+  // 세금유형 (기본정보 탭 내)
+  const [taxTypeRows, setTaxTypeRows] = useState<{ _id: string; tax_type_name: string; rate: string }[]>([]);
+  const [taxTypeOptions, setTaxTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [employeeOptions, setEmployeeOptions] = useState<{ user_id: string; user_name: string; position_name?: string }[]>([]);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const flatten = (vals: any[]): { code: string; label: string }[] => {
+      const result: { code: string; label: string }[] = [];
+      for (const v of vals) {
+        result.push({ code: v.valueCode, label: v.valueLabel });
+        if (v.children?.length) result.push(...flatten(v.children));
+      }
+      return result;
+    };
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["division", "status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${CUSTOMER_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${PRICE_TABLE}/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+
+      // 세금유형 카테고리
+      try {
+        const taxRes = await apiClient.get(`/table-categories/customer_tax_type/tax_type_name/values`);
+        if (taxRes.data?.success) setTaxTypeOptions(flatten(taxRes.data.data || []));
+      } catch { /* skip */ }
+    };
+    load();
+    apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true })
+      .then((res) => {
+        const users = res.data?.data?.data || res.data?.data?.rows || [];
+        setEmployeeOptions(users.map((u: any) => ({
+          user_id: u.user_id, user_name: u.user_name || u.user_id, position_name: u.position_name,
+        })));
+      }).catch(() => {});
+  }, []);
+
+  // 거래처 목록 조회
+  const fetchCustomers = useCallback(async () => {
+    setCustomerLoading(true);
+    try {
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
+      const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "customer_code", order: "desc" },
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setRawCustomers(raw);
+
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const mainContact = mainContactMap[r.id];
+        return {
+          ...r,
+          division: resolve("division", r.division),
+          status: resolve("status", r.status),
+          contact_person: mainContact?.contact_name || "",
+          contact_phone: mainContact?.contact_phone || "",
+          email: mainContact?.contact_email || "",
+        };
+      });
+      // 거래처코드 숫자 기준 내림차순 정렬
+      data.sort((a: any, b: any) => {
+        const aNum = parseInt((a.customer_code || "").replace(/\D/g, ""), 10) || 0;
+        const bNum = parseInt((b.customer_code || "").replace(/\D/g, ""), 10) || 0;
+        return bNum - aNum;
+      });
+      setCustomers(data);
+      setCustomerCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("거래처 조회 실패:", err);
+      toast.error("거래처 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setCustomerLoading(false);
+    }
+  }, [searchFilters, categoryOptions, employeeOptions, mainContactMap]);
+
+  useEffect(() => { fetchCustomers(); }, [fetchCustomers]);
+
+  // 메인 담당자 조회 (최초 1번 + 저장 후 갱신)
+  const fetchMainContacts = useCallback(async () => {
+    try {
+      const contactRes = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+        dataFilter: { enabled: true, filters: [{ columnName: "is_main", operator: "equals", value: "Y" }] },
+      });
+      const allContacts = contactRes.data?.data?.data || contactRes.data?.data?.rows || [];
+      const map: Record<string, any> = {};
+      for (const c of allContacts) {
+        if ((c.is_main === "Y" || c.is_main === true) && c.customer_id) {
+          map[c.customer_id] = c;
+        }
+      }
+      setMainContactMap(map);
+    } catch { /* skip */ }
+  }, []);
+
+  useEffect(() => { fetchMainContacts(); }, [fetchMainContacts]);
+
+  const selectedCustomer = customers.find((c) => c.id === selectedCustomerId);
+
+  // 선택된 거래처의 품목 단가 조회
+  useEffect(() => {
+    if (!selectedCustomer?.customer_code) { setPriceItems([]); setPriceCheckedIds([]); return; }
+    setPriceCheckedIds([]);
+    const fetchItems = async () => {
+      setPriceLoading(true);
+      try {
+        const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+          ]},
+          autoFilter: true,
+        });
+        const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
+        };
+        const now = new Date();
+        const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+
+        // 품목 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
+        const grouped: Record<string, { master: any; details: any[] }> = {};
+        const flatItems: any[] = [];
+        const seenItemIds = new Set<string>();
+        for (const m of mappings) {
+          const itemKey = m.item_id || "";
+          if (seenItemIds.has(itemKey)) continue; // 품목당 첫 매핑만 마스터
+          seenItemIds.add(itemKey);
+
+          const itemInfo = itemMap[itemKey] || {};
+          const itemPriceList = allPrices
+            .filter((p: any) => p.item_id === itemKey)
+            .sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
+          const todayPrice = itemPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || itemPriceList[0] || {};
+
+          const masterRow = {
+            ...m,
+            item_number: itemKey,
+            item_name: itemInfo.item_name || "",
+            base_price_type: priceResolve("base_price_type", todayPrice.base_price_type || ""),
+            base_price: todayPrice.base_price || "",
+            discount_type: priceResolve("discount_type", todayPrice.discount_type || ""),
+            discount_value: todayPrice.discount_value || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+
+          // 단가 리스트 (라벨 변환)
+          const priceDetails = itemPriceList.map((p: any) => ({
+            ...p,
+            base_price_type_label: priceResolve("base_price_type", p.base_price_type || ""),
+            discount_type_label: priceResolve("discount_type", p.discount_type || ""),
+            currency_label: priceResolve("currency_code", p.currency_code || ""),
+            is_current: (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today),
+          }));
+
+          grouped[itemKey] = { master: masterRow, details: priceDetails };
+          flatItems.push(masterRow);
+        }
+        setPriceGroups(grouped);
+        setPriceItems(flatItems);
+      } catch (err) {
+        console.error("품목 조회 실패:", err);
+      } finally {
+        setPriceLoading(false);
+      }
+    };
+    fetchItems();
+  }, [selectedCustomer?.customer_code]);
+
+  // 납품처 조회
+  useEffect(() => {
+    if (!selectedCustomer?.customer_code) { setDeliveryItems([]); return; }
+    const fetchDelivery = async () => {
+      setDeliveryLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "customer_code", operator: "equals", value: selectedCustomer.customer_code },
+          ]},
+          autoFilter: true,
+        });
+        setDeliveryItems(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setDeliveryItems([]); } finally { setDeliveryLoading(false); }
+    };
+    fetchDelivery();
+  }, [selectedCustomer?.customer_code]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 모달 내 담당자 목록 조회
+  const fetchModalContacts = useCallback(async (customerId: string) => {
+    setModalContactLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      setModalContacts(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalContacts([]); } finally { setModalContactLoading(false); }
+  }, []);
+
+  // 모달 내 납품처 목록 조회
+  const fetchModalDeliveries = useCallback(async (customerCode: string) => {
+    setModalDeliveryLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
+        autoFilter: true,
+      });
+      setModalDeliveries(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalDeliveries([]); } finally { setModalDeliveryLoading(false); }
+  }, []);
+
+  // 담당자 저장 (등록/수정)
+  const handleModalContactSave = async () => {
+    if (!modalContactForm.contact_name) { toast.error("담당자명은 필수입니다."); return; }
+    if (modalContactEditId) {
+      // 수정 — 로컬 리스트에서 교체 + 메인 설정 시 다른 메인 해제
+      const isSettingMain = modalContactForm.is_main === "Y" || modalContactForm.is_main === true;
+      setModalContacts((prev) => prev.map((c) =>
+        (c._localId || c.id) === modalContactEditId
+          ? { ...c, ...modalContactForm }
+          : isSettingMain ? { ...c, is_main: "N" } : c
+      ));
+    } else {
+      // 추가 — 로컬 리스트에 카드 추가
+      setModalContacts((prev) => [...prev, {
+        ...modalContactForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalContactFormOpen(false);
+    setModalContactForm({});
+    setModalContactEditId(null);
+  };
+
+  // 담당자 삭제
+  const handleModalContactDelete = (contactId: string) => {
+    setModalContacts((prev) => prev.filter((c) => (c._localId || c.id) !== contactId));
+  };
+
+  // 납품처 자동채번 유틸
+  const generateDeliveryCode = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DELIVERY_TABLE}/destination_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        const allRes = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "destination_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const match = (row.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        // 로컬에 추가된 것도 포함
+        for (const d of modalDeliveries) {
+          const match = (d.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLen = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          return prefix + String(maxSeq + 1).padStart(seqLen, "0");
+        }
+      }
+    } catch { /* skip */ }
+    return "";
+  };
+
+  // 납품처 저장 (모달 내)
+  const handleModalDeliverySave = async () => {
+    if (!modalDeliveryForm.destination_name) { toast.error("납품처명은 필수입니다."); return; }
+    if (modalDeliveryEditId) {
+      const isSettingMain = modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true;
+      setModalDeliveries((prev) => prev.map((d) =>
+        (d._localId || d.id) === modalDeliveryEditId
+          ? { ...d, ...modalDeliveryForm }
+          : isSettingMain ? { ...d, is_default: "N" } : d
+      ));
+    } else {
+      setModalDeliveries((prev) => [...prev, {
+        ...modalDeliveryForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalDeliveryFormOpen(false);
+    setModalDeliveryForm({});
+    setModalDeliveryEditId(null);
+    setModalDeliveryFormErrors({});
+  };
+
+  const handleModalDeliveryDelete = (deliveryId: string) => {
+    setModalDeliveries((prev) => prev.filter((d) => (d._localId || d.id) !== deliveryId));
+  };
+
+  // 거래처 등록 모달 열기
+  const openCustomerRegister = async () => {
+    setCustomerForm({});
+    setFormErrors({});
+    setCustomerEditMode(false);
+    setCustomerModalTab("basic");
+    setModalContacts([]);
+    setModalDeliveries([]);
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setTaxTypeRows([]);
+    setCustomerModalOpen(true);
+    // 거래처 코드 자동 채번 — 기존 데이터 max값 기반
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${CUSTOMER_TABLE}/customer_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        // 기존 데이터에서 CUST-XXX 패턴의 최대 순번 조회
+        const allRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "customer_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const code = row.customer_code || "";
+          const match = code.match(/(\d+)$/);
+          if (match) {
+            const seq = parseInt(match[1], 10);
+            if (seq > maxSeq) maxSeq = seq;
+          }
+        }
+        // preview로 접두어 패턴 가져오기
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLength = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          const nextSeq = maxSeq + 1;
+          const nextCode = prefix + String(nextSeq).padStart(seqLength, "0");
+          setCustomerForm((prev) => ({ ...prev, customer_code: nextCode, _numberingRuleId: ruleId }));
+        }
+      }
+    } catch { /* skip */ }
+  };
+
+  const openCustomerEdit = () => {
+    if (!selectedCustomer) return;
+    const rawData = rawCustomers.find((c) => c.id === selectedCustomerId);
+    setCustomerForm({ ...(rawData || selectedCustomer) });
+    setFormErrors({});
+    setCustomerEditMode(true);
+    setCustomerModalTab("basic");
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setModalContactForm({});
+    setModalDeliveryForm({});
+    setModalContactEditId(null);
+    setModalDeliveryEditId(null);
+    // 수정 모드에서는 바로 조회
+    const code = (rawData || selectedCustomer).customer_code;
+    const id = (rawData || selectedCustomer).id;
+    if (id) {
+      fetchModalContacts(id);
+      // 세금유형 로드
+      apiClient.post(`/table-management/tables/customer_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: id }] },
+        autoFilter: true,
+      }).then((res: any) => {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        setTaxTypeRows(rows.map((r: any) => ({ _id: r.id, tax_type_name: r.tax_type_name || "", rate: String(r.rate || "") })));
+      }).catch(() => setTaxTypeRows([]));
+    }
+    if (code) fetchModalDeliveries(code);
+    setCustomerModalOpen(true);
+  };
+
+  // 폼 필드 변경 시 자동 포맷팅 + 실시간 검증
+  const handleFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setCustomerForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => {
+      const next = { ...prev };
+      if (error) next[field] = error; else delete next[field];
+      return next;
+    });
+  };
+
+  // 세금유형/담당자/납품처를 한번에 저장하는 헬퍼
+  const saveSubTables = async (customerId: string, customerCode: string) => {
+    // 세금유형 — 기존 삭제 후 재생성
+    try {
+      const existTax = await apiClient.post(`/table-management/tables/customer_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      const existRows = existTax.data?.data?.data || existTax.data?.data?.rows || [];
+      if (existRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/customer_tax_type/delete`, {
+          data: existRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+      for (const t of taxTypeRows.filter((r) => r.tax_type_name)) {
+        await apiClient.post(`/table-management/tables/customer_tax_type/add`, {
+          id: crypto.randomUUID(), customer_id: customerId,
+          tax_type_name: t.tax_type_name, tax_type_id: t.tax_type_name,
+          rate: t.rate ? Number(t.rate) : 0,
+        });
+      }
+    } catch { /* skip */ }
+
+    // 담당자 — 기존 삭제 후 전체 재생성
+    try {
+      const existContacts = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      const existCRows = existContacts.data?.data?.data || existContacts.data?.data?.rows || [];
+      if (existCRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${CONTACT_TABLE}/delete`, {
+          data: existCRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const c of modalContacts) {
+      try {
+        await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/add`, {
+          id: crypto.randomUUID(), customer_id: customerId,
+          contact_name: c.contact_name || "", contact_phone: c.contact_phone || "",
+          contact_email: c.contact_email || "", department: c.department || "",
+          is_main: c.is_main || "N", memo: c.memo || "",
+        });
+      } catch { /* skip */ }
+    }
+
+    // 납품처 — 기존 삭제 후 전체 재생성
+    try {
+      const existDeliveries = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
+        autoFilter: true,
+      });
+      const existDRows = existDeliveries.data?.data?.data || existDeliveries.data?.data?.rows || [];
+      if (existDRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
+          data: existDRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const d of modalDeliveries) {
+      try {
+        await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
+          id: crypto.randomUUID(), customer_code: customerCode,
+          destination_code: d.destination_code || "", destination_name: d.destination_name || "",
+          address: d.address || "", manager_name: d.manager_name || "",
+          phone: d.phone || "", memo: d.memo || "", is_default: d.is_default || "N",
+        });
+      } catch { /* skip */ }
+    }
+  };
+
+  const handleCustomerSave = async () => {
+    if (!customerForm.customer_name) { toast.error("거래처명은 필수입니다."); return; }
+    if (!customerForm.status) { toast.error("상태는 필수입니다."); return; }
+    const errors = validateForm(customerForm, ["contact_phone", "email", "business_number"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) {
+      toast.error("입력 형식을 확인해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, _numberingRuleId, ...fields } = customerForm;
+      const cleanFields: Record<string, any> = {};
+      for (const [key, value] of Object.entries(fields)) {
+        cleanFields[key] = value === "" ? null : value;
+      }
+
+      if (customerEditMode && id) {
+        // 수정
+        await apiClient.put(`/table-management/tables/${CUSTOMER_TABLE}/edit`, {
+          originalData: { id }, updatedData: cleanFields,
+        });
+        await saveSubTables(id, cleanFields.customer_code || customerForm.customer_code);
+        toast.success("저장되었습니다.");
+      } else {
+        // 신규 등록
+        await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/add`, cleanFields);
+        // id 획득
+        const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: cleanFields.customer_code }] },
+          autoFilter: true,
+        });
+        const newRow = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+        if (newRow?.id) {
+          await saveSubTables(newRow.id, cleanFields.customer_code);
+        }
+        toast.success("거래처가 등록되었습니다.");
+      }
+
+      fetchCustomers();
+      fetchMainContacts();
+      if (!customerEditMode && continuousInput) {
+        // 연속입력 — 폼 초기화하고 모달 유지
+        setCustomerForm({});
+        setModalContacts([]);
+        setModalDeliveries([]);
+        setTaxTypeRows([]);
+        setCustomerModalTab("basic");
+        // 새 코드 채번
+        try {
+          const ruleRes = await apiClient.get(`/numbering-rules/by-column/${CUSTOMER_TABLE}/customer_code`);
+          const ruleData = ruleRes.data;
+          if (ruleData?.success && ruleData?.data?.ruleId) {
+            const ruleId = ruleData.data.ruleId;
+            const allRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, { page: 1, size: 500, autoFilter: true, sort: { columnName: "customer_code", order: "desc" } });
+            const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+            let maxSeq = 0;
+            for (const row of allRows) { const match = (row.customer_code || "").match(/(\d+)$/); if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; } }
+            const previewRes = await previewNumberingCode(ruleId);
+            if (previewRes.success && previewRes.data?.generatedCode) {
+              const prefix = previewRes.data.generatedCode.replace(/\d+$/, "");
+              const seqLen = (previewRes.data.generatedCode.match(/(\d+)$/) || ["", "001"])[1].length;
+              setCustomerForm({ customer_code: prefix + String(maxSeq + 1).padStart(seqLen, "0") });
+            }
+          }
+        } catch { /* skip */ }
+        toast.success("등록 완료. 다음 거래처를 입력하세요.");
+      } else {
+        setCustomerModalOpen(false);
+        // 우측 패널 갱신
+        if (selectedCustomerId) {
+          const cid = selectedCustomerId;
+          setSelectedCustomerId(null);
+          setTimeout(() => setSelectedCustomerId(cid), 50);
+        }
+      }
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 거래처 삭제
+  const handleCustomerDelete = async () => {
+    if (!selectedCustomerId) return;
+    const ok = await confirm("거래처를 삭제하시겠습니까?", {
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${CUSTOMER_TABLE}/delete`, {
+        data: [{ id: selectedCustomerId }],
+      });
+      toast.success("삭제되었습니다.");
+      setSelectedCustomerId(null);
+      fetchCustomers();
+    } catch { toast.error("삭제에 실패했습니다."); }
+  };
+
+  // 품목 검색
+  const searchItems = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [
+        { columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" },
+      ];
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters },
+        autoFilter: true,
+      });
+      const allItems = res.data?.data?.data || res.data?.data?.rows || [];
+      setItemTotalCount(allItems.length);
+      const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
+      const seenNumbers = new Set<string>();
+      const deduped = allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        if (item.item_number && seenNumbers.has(item.item_number)) return false;
+        if (item.item_number) seenNumbers.add(item.item_number);
+        return true;
+      });
+      setItemSearchResults(deduped);
+    } catch { /* skip */ } finally { setItemSearchLoading(false); }
+  };
+
+  // 품목 선택 완료 → 상세 입력 모달로 전환
+  const goToItemDetail = () => {
+    const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+    setSelectedItemsForDetail(selected);
+    const mappings: typeof itemMappings = {};
+    const prices: typeof itemPrices = {};
+    for (const item of selected) {
+      const key = item.item_number || item.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: item.standard_price || item.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: item.standard_price || item.selling_price || "",
+      }];
+    }
+    setItemMappings(mappings);
+    setItemPrices(prices);
+    setItemSelectOpen(false);
+    setItemDetailOpen(true);
+  };
+
+  // 거래처 품번/품명 행 추가
+  const addMappingRow = (itemKey: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, customer_item_code: "", customer_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (itemKey: string, rowId: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const handleMappingDragEnd = (itemKey: string, event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setItemMappings((prev) => {
+      const arr = [...(prev[itemKey] || [])];
+      const oldIdx = arr.findIndex((r) => r._id === active.id);
+      const newIdx = arr.findIndex((r) => r._id === over.id);
+      return { ...prev, [itemKey]: arrayMove(arr, oldIdx, newIdx) };
+    });
+  };
+
+  const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  // 단가 행 추가
+  const addPriceRow = (itemKey: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (itemKey: string, rowId: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1; // "10원" → 10, "100원" → 100
+          if (roundLabel === "반올림") {
+            calc = Math.round(calc / unit) * unit;
+          } else if (roundLabel === "절삭") {
+            calc = Math.floor(calc / unit) * unit;
+          } else if (roundLabel === "올림") {
+            calc = Math.ceil(calc / unit) * unit;
+          }
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  // 품목 편집 열기
+  const openEditItem = async (row: any) => {
+    const itemKey = row.item_number || row.item_id;
+    let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "equals", value: itemKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) itemInfo = found;
+    } catch { /* skip */ }
+
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: selectedCustomer!.customer_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.customer_item_code || m.customer_item_name)
+        .map((m: any) => ({
+          _id: `m_existing_${m.id}`,
+          customer_item_code: m.customer_item_code || "",
+          customer_item_name: m.customer_item_name || "",
+        }));
+    } catch { /* skip */ }
+
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: selectedCustomer!.customer_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date ? String(p.start_date).split("T")[0] : "",
+        end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedItemsForDetail([itemInfo]);
+    setItemMappings({ [itemKey]: mappingRows });
+    setItemPrices({ [itemKey]: priceRows });
+    setEditItemData(row);
+    setItemDetailOpen(true);
+  };
+
+  const handleItemDetailSave = async () => {
+    if (!selectedCustomer) return;
+    if (savingRef.current) return;
+    savingRef.current = true;
+    const isEditingExisting = !!editItemData;
+    setSaving(true);
+    try {
+      for (const item of selectedItemsForDetail) {
+        const itemKey = item.item_number || item.id;
+        const mappingRows = itemMappings[itemKey] || [];
+
+        if (isEditingExisting && editItemData?.id) {
+          // 기존 매핑 조회
+          let existingMaps: any[] = [];
+          try {
+            const existingMappings = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingMaps = existingMappings.data?.data?.data || existingMappings.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 매핑 upsert: 기존 것은 update, 새 것은 insert, 남은 것은 delete
+          const usedExistingIds = new Set<string>();
+          let firstMappingId: string | null = editItemData.id;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const existMap = existingMaps[mi];
+            if (existMap) {
+              // update
+              await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+                originalData: { id: existMap.id },
+                updatedData: {
+                  customer_item_code: mappingRows[mi].customer_item_code || "",
+                  customer_item_name: mappingRows[mi].customer_item_name || "",
+                },
+              });
+              usedExistingIds.add(existMap.id);
+              if (mi === 0) firstMappingId = existMap.id;
+            } else {
+              // insert
+              const mRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+                id: crypto.randomUUID(),
+                customer_id: selectedCustomer.customer_code, item_id: itemKey,
+                customer_item_code: mappingRows[mi].customer_item_code || "",
+                customer_item_name: mappingRows[mi].customer_item_name || "",
+              });
+              if (mi === 0 && !firstMappingId) firstMappingId = mRes.data?.data?.id || null;
+            }
+          }
+          // 초과분 delete
+          const toDeleteMaps = existingMaps.filter((m) => !usedExistingIds.has(m.id));
+          if (toDeleteMaps.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: toDeleteMaps.map((m: any) => ({ id: m.id })),
+            });
+          }
+
+          // 기존 단가 조회
+          let existingPriceRows: any[] = [];
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingPriceRows = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 단가 upsert
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          const usedPriceIds = new Set<string>();
+          for (let pi = 0; pi < priceRows.length; pi++) {
+            const price = priceRows[pi];
+            const priceData = {
+              mapping_id: firstMappingId || editItemData.id,
+              customer_id: selectedCustomer.customer_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            };
+            const existPrice = existingPriceRows[pi];
+            if (existPrice) {
+              await apiClient.put(`/table-management/tables/${PRICE_TABLE}/edit`, {
+                originalData: { id: existPrice.id },
+                updatedData: priceData,
+              });
+              usedPriceIds.add(existPrice.id);
+            } else {
+              await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+                id: crypto.randomUUID(), ...priceData,
+              });
+            }
+          }
+          // 초과분 delete
+          const toDeletePrices = existingPriceRows.filter((p) => !usedPriceIds.has(p.id));
+          if (toDeletePrices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: toDeletePrices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } else {
+          if (!mappingRows.length || !mappingRows[0]?.customer_item_code) {
+            const existingCheck = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 1,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            if ((existingCheck.data?.data?.data || existingCheck.data?.data?.rows || []).length > 0) {
+              toast.warning(`${item.item_name || itemKey} 품목은 이미 등록되어 있습니다.`);
+              continue;
+            }
+          }
+
+          let mappingId: string | null = null;
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            customer_id: selectedCustomer.customer_code, item_id: itemKey,
+            customer_item_code: mappingRows[0]?.customer_item_code || "",
+            customer_item_name: mappingRows[0]?.customer_item_name || "",
+          });
+          mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              customer_id: selectedCustomer.customer_code, item_id: itemKey,
+              customer_item_code: mappingRows[mi].customer_item_code || "",
+              customer_item_name: mappingRows[mi].customer_item_name || "",
+            });
+          }
+
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", customer_id: selectedCustomer.customer_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedItemsForDetail.length}개 품목이 추가되었습니다.`);
+      setItemDetailOpen(false);
+      setEditItemData(null);
+      setItemCheckedIds(new Set());
+      const cid = selectedCustomerId;
+      setSelectedCustomerId(null);
+      setTimeout(() => setSelectedCustomerId(cid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+      savingRef.current = false;
+    }
+  };
+
+  // 품목 매핑 삭제
+  const handlePriceItemDelete = async () => {
+    if (priceCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${priceCheckedIds.length}개 품목 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      for (const mappingId of priceCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: priceCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${priceCheckedIds.length}개 품목 매핑이 삭제되었습니다.`);
+      setPriceCheckedIds([]);
+      const cid = selectedCustomerId;
+      setSelectedCustomerId(null);
+      setTimeout(() => setSelectedCustomerId(cid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // EDataTable 컬럼 정의 (거래처 목록) — ts.visibleColumns 순서를 따름
+  const customerColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      customer_code: { width: "w-[120px]" },
+      customer_name: { minWidth: "min-w-[140px]" },
+      division: {
+        width: "w-[80px]",
+        render: (val: any) =>
+          val ? (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
+              {val}
+            </Badge>
+          ) : null,
+      },
+      contact_person: { width: "w-[80px]" },
+      contact_phone: { width: "w-[120px]" },
+      email: { width: "w-[160px]" },
+      business_number: { width: "w-[120px]" },
+      address: { minWidth: "min-w-[150px]" },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val}
+            </Badge>
+          ) : null,
+      },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (customers.length === 0) return;
+    toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
+    try {
+      const allMappings: any[] = [];
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 5000, autoFilter: true,
+      });
+      const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemIds.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+            autoFilter: true,
+          });
+          for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+            itemMap[item.item_number] = item;
+          }
+        } catch { /* skip */ }
+      }
+      for (const m of mappings) {
+        const itemInfo = itemMap[m.item_id] || {};
+        allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
+      }
+
+      const rows: Record<string, any>[] = [];
+      for (const c of customers) {
+        const custMappings = allMappings.filter((m) => m.customer_id === c.customer_code);
+        if (custMappings.length === 0) {
+          rows.push({
+            거래처코드: c.customer_code, 거래처명: c.customer_name,
+            거래유형: getCategoryLabel("division", c.division),
+            담당자: c.contact_person, 전화번호: c.contact_phone,
+            사업자번호: c.business_number, 이메일: c.email,
+            상태: getCategoryLabel("status", c.status),
+            품목코드: "", 품명: "", 규격: "",
+            거래처품번: "", 거래처품명: "",
+            기준가: "", 할인유형: "", 할인값: "", 단가: "", 통화: "",
+          });
+        } else {
+          for (const m of custMappings) {
+            rows.push({
+              거래처코드: c.customer_code, 거래처명: c.customer_name,
+              거래유형: getCategoryLabel("division", c.division),
+              담당자: c.contact_person, 전화번호: c.contact_phone,
+              사업자번호: c.business_number, 이메일: c.email,
+              상태: getCategoryLabel("status", c.status),
+              품목코드: m.item_id || "", 품명: m.item_name || "", 규격: m.item_spec || "",
+              거래처품번: m.customer_item_code || "", 거래처품명: m.customer_item_name || "",
+              기준가: m.base_price || "", 할인유형: m.discount_type || "", 할인값: m.discount_value || "",
+              단가: m.calculated_price || "", 통화: m.currency_code || "",
+            });
+          }
+        }
+      }
+      await exportToExcel(rows, "거래처관리.xlsx", "거래처+품목");
+      toast.dismiss("excel-dl");
+      toast.success(`${rows.length}행 다운로드 완료`);
+    } catch (err) {
+      toast.dismiss("excel-dl");
+      toast.error("다운로드에 실패했습니다.");
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={CUSTOMER_TABLE}
+        filterId="c16-customer"
+        onFilterChange={setSearchFilters}
+        dataCount={customers.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button
+            variant="outline" size="sm" className="h-8" disabled={excelDetecting}
+            onClick={async () => {
+              setExcelDetecting(true);
+              try {
+                const result = await autoDetectMultiTableConfig(CUSTOMER_TABLE);
+                if (result.success && result.data) {
+                  setExcelChainConfig(result.data);
+                  setExcelUploadOpen(true);
+                } else {
+                  toast.error(result.message || "테이블 구조 분석 실패");
+                }
+              } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+            }}
+          >
+            {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />}
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 거래처 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">거래처 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {customerCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <label className="flex items-center gap-1.5 cursor-pointer mr-1">
+                    <input type="checkbox" checked={showInactive} onChange={(e) => setShowInactive(e.target.checked)} className="rounded" />
+                    <span className="text-[11px] text-muted-foreground">거래정지 포함</span>
+                  </label>
+                  <Button size="sm" onClick={openCustomerRegister}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedCustomerId} onClick={openCustomerEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedCustomerId} onClick={handleCustomerDelete}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={customerColumns}
+                data={ts.groupData(showInactive ? customers : customers.filter((c) => c.status !== "거래정지"))}
+                rowKey={(row) => row.id}
+                loading={customerLoading}
+                emptyMessage="등록된 거래처가 없어요"
+                selectedId={selectedCustomerId}
+                onSelect={(id) => setSelectedCustomerId(id)}
+                onRowDoubleClick={(row) => { setSelectedCustomerId(row.id); openCustomerEdit(); }}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-customer"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedCustomerId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">거래처를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 거래처를 선택하면 상세 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 탭 + 버튼 통합 헤더 */}
+                  <Tabs
+                    value={rightTab}
+                    onValueChange={(v) => setRightTab(v as "items" | "delivery")}
+                    className="flex flex-col flex-1 overflow-hidden gap-0"
+                  >
+                    <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                      <TabsList className="bg-transparent h-auto p-0 rounded-none">
+                        <TabsTrigger
+                          value="items"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <Package className="w-3.5 h-3.5" /> 거래처별 품목정보
+                          {Object.keys(priceGroups).length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{Object.keys(priceGroups).length}</Badge>
+                          )}
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="delivery"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <MapPin className="w-3.5 h-3.5" /> 납품처 정보
+                          {deliveryItems.length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{deliveryItems.length}</Badge>
+                          )}
+                        </TabsTrigger>
+                      </TabsList>
+                      <div className="flex gap-1.5">
+                        {rightTab === "items" ? (
+                          <>
+                            <Button size="sm" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
+                              <Plus className="w-3.5 h-3.5" /> 품목 추가
+                            </Button>
+                            <Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0} onClick={handlePriceItemDelete}>
+                              <Trash2 className="w-3.5 h-3.5" /> 삭제
+                            </Button>
+                          </>
+                        ) : (
+                          <Button size="sm" variant="outline" onClick={openCustomerEdit}>
+                            <Pencil className="w-3.5 h-3.5 mr-1" /> 거래처 수정에서 관리
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 품목정보 탭 */}
+                    <TabsContent value="items" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[40px] text-center px-2">
+                                <input
+                                  type="checkbox"
+                                  className="rounded"
+                                  checked={priceItems.length > 0 && priceCheckedIds.length === priceItems.length}
+                                  onChange={(e) => setPriceCheckedIds(e.target.checked ? priceItems.map((p) => p.id) : [])}
+                                />
+                              </TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                              <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품번</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품명</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                              <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                              <TableHead className="w-[60px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                              <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {priceLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.keys(priceGroups).length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 품목이 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.entries(priceGroups).map(([itemKey, group]) => {
+                              const isExpanded = expandedItems.has(itemKey);
+                              const m = group.master;
+                              const isChecked = priceCheckedIds.includes(m.id);
+                              return (
+                                <React.Fragment key={itemKey}>
+                                  {/* 마스터 행 */}
+                                  <TableRow
+                                    className={cn(
+                                      "cursor-pointer border-l-[3px] border-l-transparent h-[41px]",
+                                      isChecked && "bg-primary/5 border-l-primary"
+                                    )}
+                                    onClick={() => {
+                                      setExpandedItems((prev) => {
+                                        const next = new Set(prev);
+                                        if (next.has(itemKey)) next.delete(itemKey); else next.add(itemKey);
+                                        return next;
+                                      });
+                                    }}
+                                    onDoubleClick={() => openEditItem(m)}
+                                  >
+                                    <TableCell
+                                      className="text-center px-2"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        setPriceCheckedIds((prev) =>
+                                          prev.includes(m.id) ? prev.filter((id) => id !== m.id) : [...prev, m.id]
+                                        );
+                                      }}
+                                    >
+                                      <input type="checkbox" className="rounded" checked={isChecked} readOnly />
+                                    </TableCell>
+                                    <TableCell className="text-[13px] font-mono">
+                                      <div className="flex items-center gap-1">
+                                        {isExpanded
+                                          ? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                          : <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                        }
+                                        {m.item_number}
+                                      </div>
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.customer_item_code}</TableCell>
+                                    <TableCell className="text-[13px]">{m.customer_item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.base_price_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">
+                                      {m.base_price ? Number(m.base_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.discount_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">{m.discount_value ? Number(m.discount_value).toLocaleString() : ""}</TableCell>
+                                    <TableCell className="text-[13px] text-right font-semibold">
+                                      {m.calculated_price ? Number(m.calculated_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.currency_code}</TableCell>
+                                  </TableRow>
+
+                                  {/* 현재 단가 카드 (펼쳤을 때) */}
+                                  {isExpanded && (() => {
+                                    const cp = group.details.find((p) => p.is_current) || group.details[0];
+                                    if (!cp) return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="py-3 px-4 text-xs text-muted-foreground">등록된 단가가 없어요</TableCell>
+                                      </TableRow>
+                                    );
+                                    return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="px-4 py-3">
+                                          <div className="border border-primary/20 rounded-lg bg-card overflow-hidden">
+                                            {/* 카드 헤더 */}
+                                            <div className="flex items-center justify-between px-4 py-2 bg-primary/[0.04] border-b border-primary/10">
+                                              <div className="flex items-center gap-2">
+                                                <Coins className="w-3.5 h-3.5 text-primary" />
+                                                <span className="text-xs font-semibold">적용 단가</span>
+                                                <Badge variant="secondary" className="text-[9px] px-1.5 py-0 bg-primary/10 text-primary">현재</Badge>
+                                              </div>
+                                              {group.details.length > 1 && (
+                                                <span className="text-[10px] text-muted-foreground">전체 {group.details.length}건 중</span>
+                                              )}
+                                            </div>
+                                            {/* 카드 내용 */}
+                                            <div className="px-5 py-3.5 flex items-end gap-0 text-[13px]">
+                                              <div className="flex flex-col pr-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기간</span>
+                                                <span className="font-mono text-muted-foreground text-xs">
+                                                  {cp.start_date ? String(cp.start_date).split("T")[0] : "—"} ~ {cp.end_date ? String(cp.end_date).split("T")[0] : "—"}
+                                                </span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준유형</span>
+                                                <span>{cp.base_price_type_label || "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준가</span>
+                                                <span className="font-mono font-medium">{cp.base_price ? Number(cp.base_price).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인유형</span>
+                                                <span>{cp.discount_type_label && cp.discount_type_label !== "할인없음" ? cp.discount_type_label : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인값</span>
+                                                <span className="font-mono">{cp.discount_value ? Number(cp.discount_value).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">단수처리</span>
+                                                <span>
+                                                  {cp.rounding_unit_value
+                                                    ? (priceCategoryOptions["rounding_unit_value"]?.find((o) => o.code === cp.rounding_unit_value)?.label || cp.rounding_unit_value)
+                                                    : "-"}
+                                                </span>
+                                              </div>
+                                              <span className="text-primary/50 px-4 pb-0.5 text-lg">→</span>
+                                              <div className="flex flex-col pl-1">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">계산단가</span>
+                                                <span className="text-base font-bold font-mono text-foreground">
+                                                  {(cp.calculated_price || cp.unit_price) ? Number(cp.calculated_price || cp.unit_price).toLocaleString() : "-"}
+                                                  <span className="text-xs font-normal text-muted-foreground ml-1.5">{cp.currency_label}</span>
+                                                </span>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })()}
+                                </React.Fragment>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+
+                    {/* 납품처 탭 */}
+                    <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                              <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                              <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                              <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {deliveryLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 납품처가 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.map((d) => (
+                              <TableRow key={d.id} className="h-[41px]">
+                                <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                                <TableCell className="text-sm">{d.destination_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                                <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                                <TableCell className="text-[13px]">{d.phone}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                                <TableCell className="text-center">
+                                  {d.is_default && (
+                                    <Badge variant="default" className="text-[10px] px-1.5 py-0 h-5">메인</Badge>
+                                  )}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 모달: 거래처 등록/수정 (3탭) ── */}
+      <Dialog open={customerModalOpen} onOpenChange={(open) => {
+        if (!open && isConfirmOpenRef.current) return;
+        setCustomerModalOpen(open);
+        if (!open) {
+          setModalContactFormOpen(false);
+          setModalDeliveryFormOpen(false);
+          setModalContactForm({});
+          setModalDeliveryForm({});
+          setModalContactEditId(null);
+          setModalDeliveryEditId(null);
+          fetchCustomers();
+          if (customerForm.customer_code) {
+            const cid = selectedCustomerId;
+            setSelectedCustomerId(null);
+            setTimeout(() => setSelectedCustomerId(cid), 50);
+          }
+        }
+      }}>
+        <DialogContent className="max-w-4xl h-[85vh] flex flex-col overflow-hidden p-0">
+          <DialogHeader className="px-6 pt-5 pb-0 shrink-0">
+            <DialogTitle>{customerEditMode ? "거래처 수정" : "거래처 등록"}</DialogTitle>
+            <DialogDescription>
+              {customerEditMode ? "거래처 정보를 수정합니다." : "새로운 거래처를 등록합니다."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <Tabs value={customerModalTab} onValueChange={(v: any) => setCustomerModalTab(v)} className="flex flex-col flex-1 overflow-hidden">
+            <div className="shrink-0">
+              <TabsList className="bg-transparent w-full h-auto p-0 rounded-none gap-0">
+                <TabsTrigger value="basic" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  기본정보
+                </TabsTrigger>
+                <TabsTrigger value="contacts" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  담당자 관리
+                  {modalContacts.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalContacts.length}</span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="delivery" className="flex-1 rounded-none py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  납품처 관리
+                  {modalDeliveries.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalDeliveries.length}</span>
+                  )}
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            {/* 기본정보 탭 */}
+            <TabsContent value="basic" className="flex-1 overflow-y-auto mt-0">
+              <div className="px-6 py-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처 코드</Label>
+                    <Input
+                      value={customerForm.customer_code || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, customer_code: e.target.value }))}
+                      placeholder={customerEditMode ? "" : "자동 생성"}
+                      className={cn("h-9 font-mono", !customerEditMode && customerForm.customer_code && "bg-muted")}
+                      readOnly={!customerEditMode && !!customerForm.customer_code}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={customerForm.customer_name || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, customer_name: e.target.value }))}
+                      placeholder="거래처명"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래 유형</Label>
+                    <Select
+                      value={customerForm.division || "__none__"}
+                      onValueChange={(v) => setCustomerForm((p) => ({ ...p, division: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="거래 유형" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["division"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+                    <Select
+                      value={customerForm.status || "__none__"}
+                      onValueChange={(v) => setCustomerForm((p) => ({ ...p, status: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="상태" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처담당자</Label>
+                    <Input
+                      value={customerForm.contact_person || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, contact_person: e.target.value }))}
+                      placeholder="거래처담당자"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">전화번호</Label>
+                    <Input
+                      value={customerForm.contact_phone || ""}
+                      onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                      placeholder="010-0000-0000"
+                      className={cn("h-9", formErrors.contact_phone && "border-destructive")}
+                    />
+                    {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">이메일</Label>
+                    <Input
+                      value={customerForm.email || ""}
+                      onChange={(e) => handleFormChange("email", e.target.value)}
+                      placeholder="example@email.com"
+                      className={cn("h-9", formErrors.email && "border-destructive")}
+                    />
+                    {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">사업자번호</Label>
+                    <Input
+                      value={customerForm.business_number || ""}
+                      onChange={(e) => handleFormChange("business_number", e.target.value)}
+                      placeholder="000-00-00000"
+                      className={cn("h-9", formErrors.business_number && "border-destructive")}
+                    />
+                    {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+                  </div>
+                  <div className="space-y-1.5 col-span-2">
+                    <Label className="text-sm">주소</Label>
+                    <Input
+                      value={customerForm.address || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="주소"
+                      className="h-9"
+                    />
+                  </div>
+                </div>
+
+                {/* 세금유형 */}
+                <div className="mt-4 pt-4 border-t">
+                  <div className="flex items-center justify-between mb-2">
+                    <Label className="text-sm font-semibold flex items-center gap-1.5">
+                      <Coins className="w-3.5 h-3.5 text-primary" /> 세금유형
+                    </Label>
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => {
+                      setTaxTypeRows((prev) => [...prev, { _id: `tax_${Date.now()}_${Math.random()}`, tax_type_name: "", rate: "" }]);
+                    }}>
+                      <Plus className="h-3 w-3 mr-1" /> 추가
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    {taxTypeRows.map((row, idx) => (
+                      <div key={row._id} className="flex gap-2 items-center">
+                        <span className="text-xs text-muted-foreground w-4 shrink-0">{idx + 1}</span>
+                        <Select value={row.tax_type_name} onValueChange={(v) => {
+                          setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, tax_type_name: v } : r));
+                        }}>
+                          <SelectTrigger className="h-9 text-[13px] flex-1"><SelectValue placeholder="세금유형 선택" /></SelectTrigger>
+                          <SelectContent>
+                            {taxTypeOptions.map((o) => (
+                              <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <Input
+                          value={row.rate}
+                          onChange={(e) => {
+                            const v = e.target.value.replace(/[^\d.]/g, "");
+                            setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, rate: v } : r));
+                          }}
+                          placeholder="세율 %"
+                          className="h-9 text-[13px] w-[80px] text-right"
+                        />
+                        <span className="text-xs text-muted-foreground">%</span>
+                        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                          onClick={() => setTaxTypeRows((prev) => prev.filter((r) => r._id !== row._id))}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* 담당자 관리 탭 */}
+            <TabsContent value="contacts" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 담당자 목록 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    담당자 {modalContacts.length}명
+                  </span>
+                  <Button size="sm" onClick={() => {
+                    setModalContactForm({});
+                    setModalContactEditId(null);
+                    setModalContactFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 담당자 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalContactLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalContacts.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Users className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 담당자가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자명</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부서</TableHead>
+                          <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalContacts].sort((a, b) => {
+                          const aMain = a.is_main === "Y" || a.is_main === true ? 0 : 1;
+                          const bMain = b.is_main === "Y" || b.is_main === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((c) => (
+                          <TableRow key={c._localId || c.id} className="h-[41px]">
+                            <TableCell className="text-sm font-medium">{c.contact_name}</TableCell>
+                            <TableCell className="text-[13px]">{c.contact_phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.contact_email}</TableCell>
+                            <TableCell className="text-[13px]">{c.department}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (c.is_main === "Y" || c.is_main === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = c.is_main === "Y" || c.is_main === true;
+                                  if (isCurrentMain) {
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id) ? { ...item, is_main: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== (c._localId || c.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id)
+                                        ? { ...item, is_main: "Y" }
+                                        : { ...item, is_main: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(c.is_main === "Y" || c.is_main === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalContactForm({ ...c });
+                                    setModalContactEditId(c._localId || c.id);
+                                    setModalContactFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalContactDelete(c._localId || c.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 담당자 폼 (인라인) */}
+                {modalContactFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalContactEditId ? "담당자 수정" : "담당자 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalContactForm.contact_name || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_name: e.target.value }))}
+                          placeholder="담당자명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalContactForm.contact_phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalContactForm((p) => ({ ...p, contact_phone: formatted }));
+                          }}
+                          placeholder="010-0000-0000"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">이메일</Label>
+                        <Input
+                          value={modalContactForm.contact_email || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_email: e.target.value }))}
+                          placeholder="example@email.com"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">부서</Label>
+                        <Input
+                          value={modalContactForm.department || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, department: e.target.value }))}
+                          placeholder="부서명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalContactForm.memo || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalContactForm.is_main === "Y" || modalContactForm.is_main === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== modalContactEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalContacts((prev) => prev.map((item) => ({ ...item, is_main: "N" })));
+                                }
+                                setModalContactForm((p) => ({ ...p, is_main: "Y" }));
+                              } else {
+                                setModalContactForm((p) => ({ ...p, is_main: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 담당자</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalContactFormOpen(false); setModalContactForm({}); setModalContactEditId(null); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalContactSave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalContactEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            {/* ── 탭3: 납품처 관리 ── */}
+            <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 납품처 목록 헤더 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    납품처 {modalDeliveries.length}개
+                  </span>
+                  <Button size="sm" onClick={async () => {
+                    const code = await generateDeliveryCode();
+                    setModalDeliveryForm({ destination_code: code });
+                    setModalDeliveryEditId(null);
+                    setModalDeliveryFormErrors({});
+                    setModalDeliveryFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalDeliveryLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalDeliveries.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <MapPin className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 납품처가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalDeliveries].sort((a, b) => {
+                          const aMain = a.is_default === "Y" || a.is_default === true ? 0 : 1;
+                          const bMain = b.is_default === "Y" || b.is_default === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((d) => (
+                          <TableRow key={d._localId || d.id || d.destination_code} className="h-[41px]">
+                            <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                            <TableCell className="text-sm">{d.destination_name}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                            <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                            <TableCell className="text-[13px]">{d.phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (d.is_default === "Y" || d.is_default === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = d.is_default === "Y" || d.is_default === true;
+                                  if (isCurrentMain) {
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id) ? { ...item, is_default: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== (d._localId || d.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id)
+                                        ? { ...item, is_default: "Y" }
+                                        : { ...item, is_default: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(d.is_default === "Y" || d.is_default === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalDeliveryForm({ ...d });
+                                    setModalDeliveryEditId(d._localId || d.id);
+                                    setModalDeliveryFormErrors({});
+                                    setModalDeliveryFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalDeliveryDelete(d._localId || d.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 납품처 폼 (인라인) */}
+                {modalDeliveryFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalDeliveryEditId ? "납품처 수정" : "납품처 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처코드</Label>
+                        <Input
+                          value={modalDeliveryForm.destination_code || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
+                          placeholder="자동 생성"
+                          className={cn("h-8 text-sm font-mono", modalDeliveryForm.destination_code && "bg-muted")}
+                          readOnly={!!modalDeliveryForm.destination_code && !modalDeliveryEditId}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalDeliveryForm.destination_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
+                          placeholder="납품처명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자</Label>
+                        <Input
+                          value={modalDeliveryForm.manager_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
+                          placeholder="담당자"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 col-span-2">
+                        <Label className="text-xs">주소</Label>
+                        <Input
+                          value={modalDeliveryForm.address || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, address: e.target.value }))}
+                          placeholder="주소"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalDeliveryForm.phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalDeliveryForm((p) => ({ ...p, phone: formatted }));
+                            const err = validateField("phone", formatted);
+                            setModalDeliveryFormErrors((p) => {
+                              const n = { ...p };
+                              if (err) n.phone = err; else delete n.phone;
+                              return n;
+                            });
+                          }}
+                          placeholder="010-0000-0000"
+                          className={cn("h-8 text-sm", modalDeliveryFormErrors.phone && "border-destructive")}
+                        />
+                        {modalDeliveryFormErrors.phone && <p className="text-xs text-destructive">{modalDeliveryFormErrors.phone}</p>}
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalDeliveryForm.memo || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== modalDeliveryEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalDeliveries((prev) => prev.map((item) => ({ ...item, is_default: "N" })));
+                                }
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "Y" }));
+                              } else {
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 납품처로 설정</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalDeliveryFormOpen(false); setModalDeliveryForm({}); setModalDeliveryEditId(null); setModalDeliveryFormErrors({}); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalDeliverySave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalDeliveryEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+          <div className="border-t px-6 py-3 flex items-center gap-2 shrink-0">
+            {!customerEditMode && (
+              <label className="flex items-center gap-2 cursor-pointer mr-auto">
+                <input type="checkbox" checked={continuousInput} onChange={(e) => setContinuousInput(e.target.checked)} className="rounded" />
+                <span className="text-sm font-medium">연속입력</span>
+              </label>
+            )}
+            <Button variant="outline" onClick={() => setCustomerModalOpen(false)}>닫기</Button>
+            <Button onClick={handleCustomerSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {customerEditMode ? "저장" : "등록"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 선택 (1단계) ── */}
+      <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>품목 선택</DialogTitle>
+            <DialogDescription>거래처에 추가할 품목을 선택하세요. (전체: {itemTotalCount}건 / 대상: {itemSearchResults.length}건{itemCheckedIds.size > 0 ? ` / 선택: ${itemCheckedIds.size}건` : ""})</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              placeholder="품명/품목코드 검색"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+              className="h-9 flex-1"
+            />
+            <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+              {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+            </Button>
+          </div>
+          <div className="overflow-auto max-h-[350px] border rounded-lg">
+            <Table noWrapper>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted h-10">
+                  <TableHead className="w-[40px] text-center px-2">
+                    <input
+                      type="checkbox"
+                      className="rounded"
+                      checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                      onChange={(e) => {
+                        if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                        else setItemCheckedIds(new Set());
+                      }}
+                    />
+                  </TableHead>
+                  <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="min-w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                  <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {itemSearchResults.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                      검색 결과가 없어요
+                    </TableCell>
+                  </TableRow>
+                ) : itemSearchResults.map((item) => (
+                  <TableRow
+                    key={item.id}
+                    className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                    onClick={() => setItemCheckedIds((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                      return next;
+                    })}
+                  >
+                    <TableCell className="text-center px-2">
+                      <input type="checkbox" className="rounded" checked={itemCheckedIds.has(item.id)} readOnly />
+                    </TableCell>
+                    <TableCell className="text-[13px] font-mono">
+                      <span className="block truncate" title={item.item_number}>{item.item_number}</span>
+                    </TableCell>
+                    <TableCell className="text-sm">{item.item_name}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.size}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.material}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.unit}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <DialogFooter className="flex items-center justify-between w-full">
+            <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+              <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 상세 입력 (2단계) ── */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedCustomer?.customer_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData
+                ? "거래처 품번/품명과 기간별 단가를 수정합니다."
+                : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2 flex-1 overflow-y-auto">
+            {selectedItemsForDetail.map((item, idx) => {
+              const itemKey = item.item_number || item.id;
+              const mappingRows = itemMappings[itemKey] || [];
+              const prices = itemPrices[itemKey] || [];
+
+              return (
+                <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
+                  {/* 품목 헤더 */}
+                  <div className="px-5 py-3 bg-muted/30 border-b">
+                    <div className="font-bold">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
+                  </div>
+
+                  <div className="flex gap-4 p-5 items-stretch">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Tag className="w-3.5 h-3.5 text-primary" /> 거래처 품번/품명 관리
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 품번 추가
+                        </Button>
+                      </div>
+                      <div className="border-2 border-foreground/20 rounded-lg bg-background p-3 space-y-2 min-h-[200px] max-h-[350px] overflow-y-auto flex-1">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : (
+                          <DndContext
+                            sensors={dndSensors}
+                            collisionDetection={closestCenter}
+                            onDragEnd={(e) => handleMappingDragEnd(itemKey, e)}
+                          >
+                            <SortableContext items={mappingRows.map((r) => r._id)} strategy={verticalListSortingStrategy}>
+                              {mappingRows.map((mRow, mIdx) => (
+                                <SortableMappingRow key={mRow._id} id={mRow._id}>
+                                  <span className="text-xs text-muted-foreground/50 font-mono w-4 shrink-0 text-center">{mIdx + 1}</span>
+                                  <Input
+                                    value={mRow.customer_item_code}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_code", e.target.value)}
+                                    placeholder="거래처 품번"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Input
+                                    value={mRow.customer_item_name}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_name", e.target.value)}
+                                    placeholder="거래처 품명"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Button
+                                    variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                                    onClick={() => removeMappingRow(itemKey, mRow._id)}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                </SortableMappingRow>
+                              ))}
+                            </SortableContext>
+                          </DndContext>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Coins className="w-3.5 h-3.5 text-primary" /> 기간별 단가 설정
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3 flex-1 overflow-y-auto max-h-[350px]">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border-2 border-foreground/20 rounded-lg bg-background overflow-hidden">
+                            <div
+                              className="flex items-center justify-between px-4 py-2.5 cursor-pointer hover:bg-muted/50 transition-colors"
+                              onClick={() => setCollapsedPriceCards((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(price._id)) next.delete(price._id); else next.add(price._id);
+                                return next;
+                              })}
+                            >
+                              <div className="flex items-center gap-2">
+                                {collapsedPriceCards.has(price._id)
+                                  ? <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                                  : <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                                }
+                                <span className="text-[13px] font-semibold text-muted-foreground">단가 {pIdx + 1}</span>
+                                {collapsedPriceCards.has(price._id) && price.calculated_price && (
+                                  <span className="text-xs text-muted-foreground ml-2">
+                                    {price.start_date || "—"} ~ {price.end_date || "—"} · <span className="font-mono font-bold text-foreground">{Number(price.calculated_price).toLocaleString()}</span> {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                  </span>
+                                )}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                {prices.length > 1 && (
+                                  <Button
+                                    variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
+                                    onClick={(e) => { e.stopPropagation(); removePriceRow(itemKey, price._id); }}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                )}
+                              </div>
+                            </div>
+                            {!collapsedPriceCards.has(price._id) && <div className="px-4 pb-4 space-y-2.5">
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">시작일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.start_date}
+                                  onChange={(e) => {
+                                    const v = e.target.value;
+                                    updatePriceRow(itemKey, price._id, "start_date", v);
+                                    if (price.end_date && v > price.end_date) {
+                                      updatePriceRow(itemKey, price._id, "end_date", v);
+                                    }
+                                  }}
+                                  max={price.end_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <span className="text-xs text-muted-foreground mt-4">~</span>
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">종료일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.end_date}
+                                  onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                  min={price.start_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <div className="w-[80px]">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">&nbsp;</Label>
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="통화" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "base_price", raw);
+                                }}
+                                className="h-9 text-[13px] text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-9 text-[13px] text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-1.5 pt-2 border-t">
+                              <span className="text-[13px] text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-base font-mono">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                              {price.calculated_price && price.currency_code && (
+                                <span className="text-[13px] text-muted-foreground">
+                                  {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                </span>
+                              )}
+                            </div>
+                            </div>}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal
+          open={excelUploadOpen}
+          onOpenChange={(open) => {
+            setExcelUploadOpen(open);
+            if (!open) setExcelChainConfig(null);
+          }}
+          config={excelChainConfig}
+          onSuccess={() => {
+            fetchCustomers();
+            const cid = selectedCustomerId;
+            setSelectedCustomerId(null);
+            setTimeout(() => setSelectedCustomerId(cid), 50);
+          }}
+        />
+      )}
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/sales/order/page.tsx b/frontend/app/(main)/COMPANY_8/sales/order/page.tsx
new file mode 100644
index 00000000..f9a358d4
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/sales/order/page.tsx
@@ -0,0 +1,1591 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  ClipboardList, Pencil, Search, X, Truck, Package,
+  ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,
+  Settings2, RotateCcw, Filter, Check, ArrowUp, ArrowDown,
+} from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { ShippingPlanBatchModal } from "@/components/common/ShippingPlanBatchModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+
+const DETAIL_TABLE = "sales_order_detail";
+const MASTER_TABLE = "sales_order_mng";
+
+// 천단위 구분자 표시용
+const formatNumber = (val: string) => {
+  const num = val.replace(/[^\d.-]/g, "");
+  if (!num) return "";
+  const parts = num.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+const parseNumber = (val: string) => val.replace(/,/g, "");
+
+// 플랫 테이블 컬럼 정의 (마스터+디테일 통합)
+const FLAT_COLUMNS = [
+  { key: "order_no", label: "수주번호", source: "master" },
+  { key: "partner_id", label: "거래처", source: "master" },
+  { key: "order_date", label: "수주일", source: "master" },
+  { key: "part_code", label: "품번", source: "detail" },
+  { key: "part_name", label: "품명", source: "detail" },
+  { key: "spec", label: "규격", source: "detail" },
+  { key: "unit", label: "단위", source: "detail" },
+  { key: "qty", label: "수량", source: "detail" },
+  { key: "ship_qty", label: "출하수량", source: "detail" },
+  { key: "balance_qty", label: "잔량", source: "detail" },
+  { key: "unit_price", label: "단가", source: "detail" },
+  { key: "amount", label: "금액", source: "detail" },
+  { key: "due_date", label: "납기일", source: "detail" },
+  { key: "memo", label: "메모", source: "master" },
+];
+
+const DETAIL_HEADER_COLS = FLAT_COLUMNS.filter((c) => c.source === "detail");
+
+// 필터용 전체 키
+const GRID_COLUMNS_CONFIG = FLAT_COLUMNS.map(({ key, label }) => ({ key, label }));
+
+// 총 컬럼 수: 체크박스(1) + 플랫 컬럼(14) = 15
+const TOTAL_COLS = 15;
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default function SalesOrderPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const [orders, setOrders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [masterForm, setMasterForm] = useState<Record<string, any>>({});
+  const [detailRows, setDetailRows] = useState<any[]>([]);
+  const [allowPriceEdit, setAllowPriceEdit] = useState(true);
+
+  // 품목 선택 모달
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSelectedMap, setItemSelectedMap] = useState<Map<string, any>>(new Map());
+  const [itemSearchDivision, setItemSearchDivision] = useState("all");
+  const [itemPage, setItemPage] = useState(1);
+  const [itemPageSize, setItemPageSize] = useState(20);
+  const [itemTotalPages, setItemTotalPages] = useState(0);
+  const [itemTotal, setItemTotal] = useState(0);
+  const [itemPageInput, setItemPageInput] = useState("1");
+
+  // 엑셀 업로드
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 출하계획 모달
+  const [shippingPlanOpen, setShippingPlanOpen] = useState(false);
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 체크된 행 (다중선택)
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+
+  // 납품처 목록
+  const [deliveryOptions, setDeliveryOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-sales-order", DETAIL_TABLE, GRID_COLUMNS_CONFIG);
+
+  // 헤더 필터 & 정렬
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
+
+  // 카테고리 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      const catColumns = ["sell_mode", "input_mode", "price_mode", "incoterms", "payment_term"];
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      const LABEL_REPLACE: Record<string, string> = {
+        "공급업체 우선": "거래처 우선",
+        "공급업체우선": "거래처 우선",
+      };
+      const dedup = (items: { code: string; label: string }[]) => {
+        const seen = new Set<string>();
+        return items
+          .map((item) => ({ ...item, label: LABEL_REPLACE[item.label] || item.label }))
+          .filter((item) => {
+            const key = item.label.replace(/\s/g, "");
+            if (seen.has(key)) return false;
+            seen.add(key);
+            return true;
+          });
+      };
+      await Promise.all(
+        catColumns.map(async (col) => {
+          try {
+            const res = await apiClient.get(`/table-categories/${MASTER_TABLE}/${col}/values`);
+            if (res.data?.success && res.data.data?.length > 0) {
+              optMap[col] = dedup(flatten(res.data.data));
+            }
+          } catch { /* skip */ }
+        })
+      );
+      // 거래처 목록
+      try {
+        const custRes = await apiClient.post(`/table-management/tables/customer_mng/data`, {
+          page: 1, size: 500, autoFilter: true,
+        });
+        const custs = custRes.data?.data?.data || custRes.data?.data?.rows || [];
+        optMap["partner_id"] = custs.map((c: any) => ({ code: c.customer_code, label: `${c.customer_name} (${c.customer_code})` }));
+      } catch { /* skip */ }
+      // 사용자 목록
+      try {
+        const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
+          page: 1, size: 500, autoFilter: true,
+        });
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        optMap["manager_id"] = users.map((u: any) => ({
+          code: u.user_id || u.id,
+          label: `${u.user_name || u.name || u.user_id}${u.position_name ? ` (${u.position_name})` : ""}`,
+        }));
+      } catch { /* skip */ }
+      // item_info 카테고리
+      for (const col of ["unit", "material", "division", "type"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/item_info/${col}/values`);
+          if (res.data?.success && res.data.data?.length > 0) {
+            optMap[`item_${col}`] = flatten(res.data.data);
+          }
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+      // division 기본값
+      const divs = optMap["item_division"] || [];
+      const salesDiv = divs.find((o: any) => o.label === "영업관리")
+        || divs.find((o: any) => o.label === "제품")
+        || divs.find((o: any) => o.label === "판매품");
+      if (salesDiv) setItemSearchDivision(salesDiv.code);
+    };
+    loadCategories();
+  }, []);
+
+  // 데이터 조회
+  const fetchOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
+      const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "order_no", order: "desc" },
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+
+      // order_no → sales_order_mng 조인
+      const orderNos = [...new Set(rows.map((r: any) => r.order_no).filter(Boolean))];
+      let masterMap: Record<string, any> = {};
+      if (orderNos.length > 0) {
+        try {
+          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: orderNos.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "in", value: orderNos }] },
+            autoFilter: true,
+          });
+          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+          for (const m of masters) masterMap[m.order_no] = m;
+        } catch { /* skip */ }
+      }
+
+      // part_code → item_info 조인
+      const partCodes = [...new Set(rows.map((r: any) => r.part_code).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (partCodes.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: partCodes.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: partCodes }] },
+            autoFilter: true,
+          });
+          const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+          for (const item of items) itemMap[item.item_number] = item;
+        } catch { /* skip */ }
+      }
+
+      // 조인 적용 + 카테고리 코드→라벨 변환
+      const resolveLabel = (key: string, code: string) => {
+        if (!code) return "";
+        const opts = categoryOptions[key];
+        if (!opts) return code;
+        return opts.find((o) => o.code === code)?.label || code;
+      };
+      const data = rows.map((row: any) => {
+        const item = itemMap[row.part_code];
+        const master = masterMap[row.order_no];
+        const rawUnit = row.unit || item?.unit || "";
+        return {
+          ...row,
+          part_name: row.part_name || item?.item_name || "",
+          spec: row.spec || item?.size || "",
+          material: row.material || (item ? (resolveLabel("item_material", item.material) || item.material || "") : ""),
+          unit: resolveLabel("item_unit", rawUnit) || rawUnit,
+          memo: row.memo || master?.memo || "",
+          _master: master || {},
+        };
+      });
+
+      setOrders(data);
+      setTotalCount(res.data?.data?.total || data.length);
+    } catch (err) {
+      toast.error("수주 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => { fetchOrders(); }, [fetchOrders]);
+
+  // 카테고리 코드→라벨 변환
+  const resolveLabel = useCallback((key: string, code: string) => {
+    if (!code) return "";
+    if (key === "partner_id" || key === "manager_id" || key === "price_mode") {
+      return categoryOptions[key]?.find((o) => o.code === code)?.label || code;
+    }
+    return code;
+  }, [categoryOptions]);
+
+  // 플랫 행 생성 (마스터 필드를 각 디테일 행에 병합)
+  const flatRows = useMemo(() => {
+    return orders.map((row) => {
+      const master = row._master || {};
+      return {
+        ...row,
+        partner_id: resolveLabel("partner_id", master.partner_id || row.partner_id || ""),
+        order_date: master.order_date || row.order_date || "",
+        memo: row.memo || master.memo || "",
+      };
+    });
+  }, [orders, resolveLabel]);
+
+  // 컬럼별 고유값 (헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of FLAT_COLUMNS) {
+      const values = new Set<string>();
+      flatRows.forEach((row) => {
+        const val = row[col.key];
+        if (val !== null && val !== undefined && val !== "") values.add(String(val));
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [flatRows]);
+
+  // 필터 + 정렬 적용된 플랫 데이터
+  const filteredFlatRows = useMemo(() => {
+    let rows = [...flatRows];
+
+    // 1차: 헤더 필터 적용
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      rows = rows.filter((row) => {
+        const cellVal = row[colKey] != null ? String(row[colKey]) : "";
+        return values.has(cellVal);
+      });
+    }
+
+    // 2차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      rows.sort((a, b) => {
+        const av = a[key] ?? "";
+        const bv = b[key] ?? "";
+        const na = Number(av); const nb = Number(bv);
+        if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+        return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+      });
+    }
+
+    return rows;
+  }, [flatRows, headerFilters, sortState]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
+  };
+
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
+  };
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
+    );
+  };
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    const found = categoryOptions[col]?.find((o) => o.code === code);
+    return found?.label || code;
+  };
+
+  const loadDeliveryOptions = async (customerCode: string) => {
+    if (!customerCode) { setDeliveryOptions([]); return; }
+    try {
+      const res = await apiClient.post(`/table-management/tables/delivery_destination/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setDeliveryOptions(rows.map((r: any) => ({
+        code: r.destination_code || r.id,
+        label: `${r.destination_name}${r.address ? ` (${r.address})` : ""}`,
+      })));
+    } catch { setDeliveryOptions([]); }
+  };
+
+  // 등록 모달 열기
+  const openRegisterModal = () => {
+    const defaultSellMode = categoryOptions["sell_mode"]?.[0]?.code || "";
+    const defaultInputMode = categoryOptions["input_mode"]?.[0]?.code || "";
+    const defaultPriceMode = categoryOptions["price_mode"]?.[0]?.code || "";
+    setMasterForm({
+      input_mode: defaultInputMode, sell_mode: defaultSellMode, price_mode: defaultPriceMode,
+      manager_id: user?.userId || "", order_date: new Date().toISOString().split("T")[0],
+    });
+    setDetailRows([]);
+    setDeliveryOptions([]);
+    setIsEditMode(false);
+    setIsModalOpen(true);
+  };
+
+  // 수정 모달 열기
+  const openEditModal = async (orderNo: string) => {
+    try {
+      const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
+        autoFilter: true,
+      });
+      const masterData = (masterRes.data?.data?.data || masterRes.data?.data?.rows || [])[0];
+
+      const detailRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
+        autoFilter: true,
+      });
+      const detailData = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+
+      setMasterForm(masterData || {});
+      setDetailRows(detailData.map((d: any, i: number) => ({ ...d, _id: d.id || `row_${i}` })));
+      setIsEditMode(true);
+      setIsModalOpen(true);
+    } catch (err) {
+      toast.error("수주 정보를 불러오는데 실패했습니다.");
+    }
+  };
+
+  // 삭제 (마스터 단위)
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.error("삭제할 수주를 선택해주세요."); return; }
+    const selectedItems = orders.filter((o) => checkedIds.includes(o.id));
+    const orderNos = [...new Set(selectedItems.map((o) => o.order_no))];
+    const ok = await confirm(`${orderNos.length}건의 수주를 삭제하시겠습니까?`, {
+      description: "삭제된 데이터는 복구할 수 없습니다.",
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      for (const orderNo of orderNos) {
+        const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
+          autoFilter: true,
+        });
+        const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+        if (masters.length > 0) {
+          await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
+            data: masters.map((m: any) => ({ id: m.id })),
+          });
+        }
+      }
+      toast.success("삭제되었습니다.");
+      setCheckedIds([]);
+      fetchOrders();
+    } catch (err) {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // 저장 (마스터 + 디테일)
+  const handleSave = async () => {
+    if (!masterForm.order_no && !isEditMode) {
+      toast.error("수주번호는 필수입니다.");
+      return;
+    }
+    if (detailRows.length === 0) {
+      toast.error("품목을 1개 이상 추가해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, created_by, updated_by, ...masterFields } = masterForm;
+      if (isEditMode && id) {
+        await apiClient.put(`/table-management/tables/${MASTER_TABLE}/edit`, {
+          originalData: { id },
+          updatedData: masterFields,
+        });
+        const existingDetails = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 100,
+          dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: masterForm.order_no }] },
+          autoFilter: true,
+        });
+        const existings = existingDetails.data?.data?.data || existingDetails.data?.data?.rows || [];
+        if (existings.length > 0) {
+          await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+            data: existings.map((d: any) => ({ id: d.id })),
+          });
+        }
+      } else {
+        await apiClient.post(`/table-management/tables/${MASTER_TABLE}/add`, masterFields);
+      }
+      for (const row of detailRows) {
+        const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
+        await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
+          ...detailFields,
+          id: crypto.randomUUID(),
+          order_no: masterForm.order_no,
+        });
+      }
+      toast.success(isEditMode ? "수정되었습니다." : "등록되었습니다.");
+      setIsModalOpen(false);
+      fetchOrders();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 검색
+  const searchItems = async (page?: number, size?: number) => {
+    const p = page ?? itemPage;
+    const s = size ?? itemPageSize;
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      let allRows = resData?.data || resData?.rows || [];
+      // 관리품목 필터 (코드/라벨 혼재 대응)
+      if (itemSearchDivision !== "all") {
+        const divLabel = categoryOptions["item_division"]?.find((o) => o.code === itemSearchDivision)?.label || "";
+        allRows = allRows.filter((item: any) => {
+          const div = item.division || "";
+          return div.includes(itemSearchDivision) || (divLabel && div.includes(divLabel));
+        });
+      }
+      const total = allRows.length;
+      const start = (p - 1) * s;
+      setItemSearchResults(allRows.slice(start, start + s));
+      setItemTotal(total);
+      setItemTotalPages(Math.max(1, Math.ceil(total / s)));
+    } catch { /* skip */ } finally {
+      setItemSearchLoading(false);
+    }
+  };
+
+  const handleItemPageChange = (newPage: number) => {
+    if (newPage < 1 || newPage > itemTotalPages) return;
+    setItemPage(newPage);
+    setItemPageInput(String(newPage));
+    searchItems(newPage);
+  };
+
+  const commitItemPageInput = () => {
+    const parsed = parseInt(itemPageInput, 10);
+    if (isNaN(parsed) || itemPageInput.trim() === "") { setItemPageInput(String(itemPage)); return; }
+    const clamped = Math.max(1, Math.min(parsed, itemTotalPages || 1));
+    if (clamped !== itemPage) handleItemPageChange(clamped);
+    setItemPageInput(String(clamped));
+  };
+
+  const triggerNewSearch = () => {
+    setItemPage(1);
+    setItemPageInput("1");
+    searchItems(1);
+  };
+
+  const addSelectedItemsToDetail = async () => {
+    const selected = Array.from(itemSelectedMap.values());
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+
+    const isStandardPrice = masterForm.price_mode === "CAT_MM0BUZKL_HJ7U" || masterForm.price_mode === "CAT_MLKG792S_54WJ";
+    const isCustomerPrice = masterForm.price_mode === "CAT_MM0BV3OS_41DX" || masterForm.price_mode === "CAT_MLKG7D8K_N8SI";
+    const partnerId = masterForm.partner_id;
+
+    let customerPriceMap: Record<string, string> = {};
+    if (isCustomerPrice && partnerId) {
+      try {
+        const itemIds = selected.map((item) => item.item_number || item.id);
+        const res = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: {
+            enabled: true,
+            filters: [
+              { columnName: "customer_id", operator: "equals", value: partnerId },
+              { columnName: "item_id", operator: "in", value: itemIds },
+            ],
+          },
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        for (const p of prices) {
+          const start = p.start_date || "";
+          const end = p.end_date || "";
+          if (start && start > today) continue;
+          if (end && end < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) {
+            const existing = customerPriceMap[p.item_id];
+            if (!existing || Number(price) > 0) customerPriceMap[p.item_id] = String(price);
+          }
+        }
+      } catch { /* skip */ }
+    }
+
+    const newRows = selected.map((item) => {
+      const itemCode = item.item_number || item.id;
+      let unitPrice = "";
+      if (isStandardPrice) {
+        unitPrice = item.standard_price || item.selling_price || "";
+      } else if (isCustomerPrice && partnerId) {
+        unitPrice = customerPriceMap[itemCode] || "";
+      }
+      return {
+        _id: `new_${Date.now()}_${Math.random()}`,
+        part_code: itemCode,
+        part_name: item.item_name,
+        spec: item.size || "",
+        material: getCategoryLabel("item_material", item.material) || item.material || "",
+        packing_material: "",
+        unit: getCategoryLabel("item_unit", item.unit) || item.unit || "",
+        qty: "1",
+        pack_qty: "0",
+        unit_price: unitPrice,
+        amount: unitPrice ? String(1 * parseFloat(unitPrice)) : "",
+        due_date: "",
+      };
+    });
+
+    setDetailRows((prev) => [...prev, ...newRows]);
+    toast.success(`${selected.length}개 품목이 추가되었습니다.`);
+    setItemSelectedMap(new Map());
+    setItemSelectOpen(false);
+  };
+
+  // 단가 재계산: 단가방식/거래처 변경 시 기존 품목 단가 갱신
+  const recalcPrices = useCallback(async (priceMode: string, partnerId: string) => {
+    if (detailRows.length === 0) return;
+    const STANDARD_CODES = ["CAT_MM0BUZKL_HJ7U", "CAT_MLKG792S_54WJ"];
+    const CUSTOMER_CODES = ["CAT_MM0BV3OS_41DX", "CAT_MLKG7D8K_N8SI"];
+    const isStandard = STANDARD_CODES.includes(priceMode);
+    const isCustomer = CUSTOMER_CODES.includes(priceMode);
+
+    if (isStandard) {
+      // 품목 기준단가 조회
+      const itemCodes = detailRows.map((r) => r.part_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+          autoFilter: true,
+        });
+        const items = res.data?.data?.data || res.data?.data?.rows || [];
+        const priceMap: Record<string, string> = {};
+        for (const item of items) {
+          const price = item.standard_price || item.selling_price || "";
+          if (price) priceMap[item.item_number] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.part_code] || "";
+          const qty = parseFloat(row.qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    } else if (isCustomer && partnerId) {
+      // 거래처별 단가 조회
+      const itemCodes = detailRows.map((r) => r.part_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "customer_id", operator: "equals", value: partnerId },
+            { columnName: "item_id", operator: "in", value: itemCodes },
+          ]},
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        const priceMap: Record<string, string> = {};
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) priceMap[p.item_id] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.part_code] || "";
+          const qty = parseFloat(row.qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    }
+  }, [detailRows]);
+
+  const updateDetailRow = (idx: number, field: string, value: string) => {
+    setDetailRows((prev) => {
+      const next = [...prev];
+      next[idx] = { ...next[idx], [field]: value };
+      if (field === "qty" || field === "unit_price") {
+        const qty = parseFloat(field === "qty" ? value : next[idx].qty) || 0;
+        const price = parseFloat(field === "unit_price" ? value : next[idx].unit_price) || 0;
+        next[idx].amount = (qty * price).toString();
+      }
+      return next;
+    });
+  };
+
+  const removeDetailRow = (idx: number) => {
+    setDetailRows((prev) => prev.filter((_, i) => i !== idx));
+  };
+
+  // 조건부 레이어 판단
+  const isSupplierFirst = masterForm.input_mode === "CAT_MLZWPH5R_983R" || masterForm.input_mode === "CAT_MLKG5KP8_C39W";
+  const isOverseas = masterForm.sell_mode === "CAT_MLZWFF2Z_BQCV" || masterForm.sell_mode === "CAT_MLKGAR2W_HAPO";
+
+  const handleExcelDownload = async () => {
+    if (orders.length === 0) { toast.error("다운로드할 데이터가 없습니다."); return; }
+    const cols = ["order_no","part_code","part_name","spec","unit","qty","ship_qty","balance_qty","unit_price","amount","currency_code","due_date","memo"];
+    const labels: Record<string, string> = {
+      order_no:"수주번호",part_code:"품번",part_name:"품명",spec:"규격",unit:"단위",
+      qty:"수량",ship_qty:"출하수량",balance_qty:"잔량",unit_price:"단가",
+      amount:"금액",currency_code:"통화",due_date:"납기일",memo:"메모",
+    };
+    const data = orders.map((o) => {
+      const row: Record<string, any> = {};
+      for (const col of cols) row[labels[col]] = o[col] || "";
+      return row;
+    });
+    await exportToExcel(data, "수주관리.xlsx", "수주목록");
+    toast.success("다운로드 완료");
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground">
+        <span>영업관리</span>
+        <span className="opacity-40">/</span>
+        <span className="font-medium text-foreground">수주관리</span>
+      </nav>
+
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={DETAIL_TABLE}
+        filterId="c16-sales-order"
+        onFilterChange={setSearchFilters}
+        dataCount={orders.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-bold">수주 목록</h2>
+          <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+            {totalCount}건
+          </span>
+        </div>
+        <div className="flex items-center gap-2 overflow-x-auto">
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4" /> 등록
+          </Button>
+          <Button
+            variant="outline" size="sm"
+            disabled={checkedIds.length !== 1}
+            onClick={() => {
+              const item = orders.find((o) => o.id === checkedIds[0]);
+              if (item) openEditModal(item.order_no);
+            }}
+          >
+            <Pencil className="w-4 h-4" /> 수정
+          </Button>
+          <Button
+            variant="outline" size="sm"
+            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10 hover:text-destructive"
+            disabled={checkedIds.length === 0}
+            onClick={handleDelete}
+          >
+            <Trash2 className="w-4 h-4" /> 삭제{checkedIds.length > 0 && ` (${checkedIds.length})`}
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4" /> 엑셀
+          </Button>
+          <Button variant="outline" size="sm" disabled={checkedIds.length === 0} onClick={() => setShippingPlanOpen(true)}>
+            <Truck className="w-4 h-4" /> 출하계획{checkedIds.length > 0 && ` (${checkedIds.length})`}
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+            <Settings2 className="w-4 h-4" /> 설정
+          </Button>
+        </div>
+      </div>
+
+      {/* 데이터 테이블 (플랫 리스트) */}
+      <div className="flex-1 overflow-hidden rounded-lg border border-border bg-card">
+        <div className="h-full overflow-auto">
+          <Table style={{ minWidth: "1500px" }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "100px" }} />
+              <col style={{ width: "120px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "70px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "80px" }} />
+              <col style={{ width: "90px" }} />
+              <col style={{ width: "110px" }} />
+              <col style={{ width: "100px" }} />
+              <col style={{ width: "120px" }} />
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = filteredFlatRows.map((r) => r.id);
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
+                  <Checkbox
+                    checked={(() => {
+                      const allFilteredIds = filteredFlatRows.map((r) => r.id);
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
+                  />
+                </TableHead>
+                {FLAT_COLUMNS.map((col) => {
+                  const isRight = ["qty", "ship_qty", "balance_qty", "unit_price", "amount"].includes(col.key);
+                  return (
+                    <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none", isRight && "text-right")}>
+                      <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                        <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                          <span className="truncate">{col.label}</span>
+                          {sortState?.key === col.key && (
+                            sortState.direction === "asc"
+                              ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                              : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                          )}
+                        </div>
+                        {(columnUniqueValues[col.key] || []).length > 0 && (
+                          <HeaderFilterPopover
+                            colKey={col.key} colLabel={col.label}
+                            uniqueValues={columnUniqueValues[col.key] || []}
+                            filterValues={headerFilters[col.key] || new Set<string>()}
+                            onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                          />
+                        )}
+                      </div>
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
+                  </TableCell>
+                </TableRow>
+              ) : filteredFlatRows.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <ClipboardList className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 수주가 없어요</span>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                filteredFlatRows.map((row) => {
+                  const isChecked = checkedIds.includes(row.id);
+                  return (
+                    <TableRow
+                      key={row.id}
+                      className={cn(
+                        "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                        isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                      )}
+                      onClick={() => {
+                        setCheckedIds((prev) =>
+                          prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                        );
+                      }}
+                      onDoubleClick={() => openEditModal(row.order_no)}
+                    >
+                      <TableCell
+                        className="text-center cursor-pointer"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setCheckedIds((prev) =>
+                            prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                          );
+                        }}
+                      >
+                        <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                      </TableCell>
+                      <TableCell className="font-mono whitespace-nowrap text-[13px]">{row.order_no}</TableCell>
+                      <TableCell className="text-[13px] truncate max-w-[140px]"><span className="block truncate">{row.partner_id || ""}</span></TableCell>
+                      <TableCell className="whitespace-nowrap text-[13px]">{row.order_date || ""}</TableCell>
+                      <TableCell className="font-mono text-[13px]">{row.part_code}</TableCell>
+                      <TableCell className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.part_name}>{row.part_name}</span></TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                      <TableCell className="text-[13px]">{row.unit}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.qty ? Number(row.qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px] text-muted-foreground">{row.ship_qty ? Number(row.ship_qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.balance_qty ? Number(row.balance_qty).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-right font-mono text-[13px] font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
+                      <TableCell className="text-[13px]">{row.due_date || ""}</TableCell>
+                      <TableCell className="text-muted-foreground"><span className="block truncate max-w-[120px]">{row.memo || ""}</span></TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      {/* 수주 등록/수정 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="flex flex-col gap-0 p-0 max-w-5xl w-full" style={{ maxHeight: "85vh" }}>
+          <DialogHeader className="shrink-0 border-b border-border px-6 py-5">
+            <DialogTitle className="text-[17px] font-bold">
+              {isEditMode ? "수주 수정" : "수주 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-sm text-muted-foreground">
+              {isEditMode ? "수주 정보를 수정합니다." : "새로운 수주를 등록합니다."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-y-auto px-6 py-5 space-y-6">
+            {/* 기본 정보 섹션 */}
+            <div className="space-y-3">
+              <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                기본 정보
+                <div className="flex-1 h-px bg-border" />
+              </div>
+              <div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    수주번호 <span className="text-destructive">*</span>
+                  </Label>
+                  <Input
+                    value={masterForm.order_no || ""}
+                    onChange={(e) => setMasterForm((p) => ({ ...p, order_no: e.target.value }))}
+                    placeholder="수주번호" className="h-9" disabled={isEditMode}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    수주일 <span className="text-destructive">*</span>
+                  </Label>
+                  <Input
+                    type="date"
+                    value={masterForm.order_date || ""}
+                    onChange={(e) => setMasterForm((p) => ({ ...p, order_date: e.target.value }))}
+                    className="h-9"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    판매유형 <span className="text-destructive">*</span>
+                  </Label>
+                  <Select value={masterForm.sell_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, sell_mode: v }))}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                    <SelectContent>
+                      {(categoryOptions["sell_mode"] || []).map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">입력방식</Label>
+                  <Select value={masterForm.input_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, input_mode: v }))}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                    <SelectContent>
+                      {(categoryOptions["input_mode"] || []).map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">단가방식</Label>
+                  <Select value={masterForm.price_mode || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, price_mode: v })); recalcPrices(v, masterForm.partner_id || ""); }}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                    <SelectContent>
+                      {(categoryOptions["price_mode"] || []).map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex items-end pb-1">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <Checkbox checked={allowPriceEdit} onCheckedChange={(v) => setAllowPriceEdit(!!v)} />
+                    <span className="text-sm font-medium">단가 수정 허용</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            {/* 거래처 우선 조건부 레이어 */}
+            {isSupplierFirst && (
+              <div className="rounded-lg border border-dashed border-border bg-muted/50 p-4 space-y-3">
+                <div className="flex items-center gap-1.5 text-xs font-semibold text-primary">
+                  <ClipboardList className="w-3.5 h-3.5" /> 거래처 정보
+                </div>
+                <div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">거래처</Label>
+                    <Select
+                      value={masterForm.partner_id || ""}
+                      onValueChange={(v) => { setMasterForm((p) => ({ ...p, partner_id: v, delivery_partner_id: "" })); loadDeliveryOptions(v); recalcPrices(masterForm.price_mode || "", v); }}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="거래처 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["partner_id"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자</Label>
+                    <Select value={masterForm.manager_id || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager_id: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="담당자 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["manager_id"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">납품처</Label>
+                    {deliveryOptions.length > 0 ? (
+                      <Select
+                        value={masterForm.delivery_partner_id || ""}
+                        onValueChange={(v) => {
+                          setMasterForm((p) => ({ ...p, delivery_partner_id: v }));
+                          const found = deliveryOptions.find((o) => o.code === v);
+                          if (found) {
+                            const addr = found.label.match(/\((.+)\)$/)?.[1] || "";
+                            if (addr) setMasterForm((p) => ({ ...p, delivery_partner_id: v, delivery_address: addr }));
+                          }
+                        }}
+                      >
+                        <SelectTrigger className="h-9"><SelectValue placeholder="납품처 선택" /></SelectTrigger>
+                        <SelectContent>
+                          {deliveryOptions.map((o) => (
+                            <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={masterForm.delivery_partner_id || ""}
+                        onChange={(e) => setMasterForm((p) => ({ ...p, delivery_partner_id: e.target.value }))}
+                        placeholder={masterForm.partner_id ? "등록된 납품처 없음" : "거래처를 먼저 선택해주세요"}
+                        className="h-9" disabled={!masterForm.partner_id}
+                      />
+                    )}
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">납품장소</Label>
+                    <Input
+                      value={masterForm.delivery_address || ""}
+                      onChange={(e) => setMasterForm((p) => ({ ...p, delivery_address: e.target.value }))}
+                      placeholder="납품장소" className="h-9"
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* 해외판매 조건부 레이어 */}
+            {isOverseas && (
+              <div className="rounded-lg border border-dashed border-border bg-muted/50 p-4 space-y-3">
+                <div className="flex items-center gap-1.5 text-xs font-semibold text-primary">
+                  해외판매 추가 정보
+                </div>
+                <div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-3">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">인코텀즈</Label>
+                    <Select value={masterForm.incoterms || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, incoterms: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["incoterms"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">결제조건</Label>
+                    <Select value={masterForm.payment_term || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, payment_term: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["payment_term"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">통화</Label>
+                    <Select value={masterForm.currency || "KRW"} onValueChange={(v) => setMasterForm((p) => ({ ...p, currency: v }))}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="통화 선택" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="KRW">KRW (원)</SelectItem>
+                        <SelectItem value="USD">USD (달러)</SelectItem>
+                        <SelectItem value="EUR">EUR (유로)</SelectItem>
+                        <SelectItem value="JPY">JPY (엔)</SelectItem>
+                        <SelectItem value="CNY">CNY (위안)</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">선적항</Label>
+                    <Input value={masterForm.port_of_loading || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_loading: e.target.value }))} className="h-9" />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">도착항</Label>
+                    <Input value={masterForm.port_of_discharge || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_discharge: e.target.value }))} className="h-9" />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">HS Code</Label>
+                    <Input value={masterForm.hs_code || ""} onChange={(e) => setMasterForm((p) => ({ ...p, hs_code: e.target.value }))} className="h-9 font-mono text-xs" />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* 품목 내역 리피터 */}
+            <div className="space-y-2.5">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  <Package className="w-4 h-4" /> 품목 내역
+                  <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                    {detailRows.length}
+                  </span>
+                </div>
+                <Button size="sm" onClick={() => {
+                  setItemSelectedMap(new Map());
+                  setItemPage(1);
+                  setItemPageInput("1");
+                  setItemSearchKeyword("");
+                  setItemSelectOpen(true);
+                  searchItems(1);
+                }}>
+                  <Plus className="w-4 h-4" /> 품목 추가
+                </Button>
+              </div>
+              {detailRows.length === 0 ? (
+                <div className="flex flex-col items-center gap-2 rounded-lg border border-dashed border-border py-8 text-muted-foreground">
+                  <Package className="h-8 w-8 opacity-40" />
+                  <span className="text-sm">아직 추가된 품목이 없어요. 위 버튼으로 품목을 추가해주세요.</span>
+                </div>
+              ) : (
+                <div className="overflow-x-auto rounded-lg border border-border">
+                  <Table noWrapper className="min-w-max w-full">
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="w-10 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                        <TableHead className="w-28 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                        <TableHead className="w-32 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                        <TableHead className="w-20 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                        <TableHead className="w-20 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                        <TableHead className="w-24 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장재</TableHead>
+                        <TableHead className="w-20 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                        <TableHead className="w-20 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                        <TableHead className="w-20 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장수량</TableHead>
+                        <TableHead className="w-24 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                        <TableHead className="w-24 text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
+                        <TableHead className="w-32 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>
+                        <TableHead className="w-24 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">분할/삭제</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {detailRows.map((row, idx) => (
+                        <TableRow key={row._id || idx}>
+                          <TableCell className="text-center font-mono text-[13px] text-muted-foreground/50">{idx + 1}</TableCell>
+                          <TableCell className="max-w-[112px]">
+                            <span className="block truncate font-mono text-[13px]" title={row.part_code}>{row.part_code}</span>
+                          </TableCell>
+                          <TableCell className="max-w-[128px]">
+                            <span className="block truncate text-[13px]" title={row.part_name}>{row.part_name}</span>
+                          </TableCell>
+                          <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                          <TableCell className="text-[13px] text-muted-foreground">{row.material}</TableCell>
+                          <TableCell>
+                            <Input
+                              value={row.packing_material || ""}
+                              onChange={(e) => updateDetailRow(idx, "packing_material", e.target.value)}
+                              placeholder="포장재"
+                              className="h-8 text-xs"
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Select value={row.unit || ""} onValueChange={(v) => updateDetailRow(idx, "unit", v)}>
+                              <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                              <SelectContent>
+                                {(categoryOptions["item_unit"] || []).map((o) => (
+                                  <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="number"
+                              min="1"
+                              value={row.qty || "1"}
+                              onChange={(e) => updateDetailRow(idx, "qty", e.target.value)}
+                              className="h-8 text-xs text-right font-mono w-16"
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="number"
+                              min="0"
+                              value={row.pack_qty || "0"}
+                              onChange={(e) => updateDetailRow(idx, "pack_qty", e.target.value)}
+                              className="h-8 text-xs text-right font-mono w-16"
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              value={formatNumber(row.unit_price || "")}
+                              onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))}
+                              readOnly={!allowPriceEdit}
+                              className={cn("h-8 text-xs text-right font-mono w-20", !allowPriceEdit && "bg-muted cursor-not-allowed")}
+                            />
+                          </TableCell>
+                          <TableCell className="text-right font-mono text-[13px] font-semibold">
+                            {row.amount ? Number(row.amount).toLocaleString() : "0"}
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="date"
+                              value={row.due_date || ""}
+                              onChange={(e) => updateDetailRow(idx, "due_date", e.target.value)}
+                              className="h-8 text-xs"
+                            />
+                          </TableCell>
+                          <TableCell className="text-center">
+                            <div className="flex items-center gap-1 justify-center">
+                              <Button
+                                variant="default" size="sm"
+                                className="h-7 px-2 text-[11px] bg-emerald-500 hover:bg-emerald-600 text-white"
+                                onClick={() => {
+                                  setDetailRows((prev) => {
+                                    const next = [...prev];
+                                    const newRow = { ...next[idx], _id: `split_${Date.now()}_${Math.random()}` };
+                                    next.splice(idx + 1, 0, newRow);
+                                    return next;
+                                  });
+                                  toast.success("행이 분할되었어요");
+                                }}
+                              >
+                                분할
+                              </Button>
+                              <Button
+                                variant="ghost" size="sm"
+                                className="h-7 w-7 p-0 text-muted-foreground/50 hover:text-destructive hover:bg-destructive/5"
+                                onClick={() => removeDetailRow(idx)}
+                              >
+                                <X className="w-3.5 h-3.5" />
+                              </Button>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </div>
+
+            {/* 비고 */}
+            <div className="space-y-3">
+              <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                비고
+                <div className="flex-1 h-px bg-border" />
+              </div>
+              <textarea
+                value={masterForm.memo || ""}
+                onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
+                placeholder="특이사항이나 메모를 입력해주세요"
+                rows={3}
+                className="w-full rounded-md border border-input bg-muted px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring/25 resize-vertical min-h-[80px]"
+              />
+            </div>
+          </div>
+
+          <DialogFooter className="shrink-0 border-t border-border px-6 py-4">
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />} 저장
+            </Button>
+          </DialogFooter>
+
+          {/* 품목 선택 중첩 모달 */}
+          <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+            <DialogContent className="max-w-3xl" style={{ maxHeight: "70vh" }} onInteractOutside={(e) => e.preventDefault()}>
+              <DialogHeader>
+                <DialogTitle>품목 선택</DialogTitle>
+                <DialogDescription>수주에 추가할 품목을 선택 후 하단 버튼을 눌러주세요.</DialogDescription>
+              </DialogHeader>
+              <div className="flex gap-2 mb-3">
+                <Input
+                  placeholder="품명/품목코드 검색"
+                  value={itemSearchKeyword}
+                  onChange={(e) => setItemSearchKeyword(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && triggerNewSearch()}
+                  className="h-9 flex-1"
+                />
+                <Select value={itemSearchDivision} onValueChange={setItemSearchDivision}>
+                  <SelectTrigger className="h-9 w-[130px]"><SelectValue placeholder="관리품목" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">전체</SelectItem>
+                    {(categoryOptions["item_division"] || []).map((o) => (
+                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button size="sm" onClick={triggerNewSearch} disabled={itemSearchLoading} className="h-9">
+                  {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" />조회</>}
+                </Button>
+              </div>
+              <div className="overflow-auto rounded-lg border border-border" style={{ maxHeight: "320px" }}>
+                <Table noWrapper>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-10 text-center">
+                        <input
+                          type="checkbox"
+                          checked={itemSearchResults.length > 0 && itemSearchResults.every((i) => itemSelectedMap.has(i.id))}
+                          onChange={(e) => {
+                            setItemSelectedMap((prev) => {
+                              const next = new Map(prev);
+                              if (e.target.checked) itemSearchResults.forEach((i) => next.set(i.id, i));
+                              else itemSearchResults.forEach((i) => next.delete(i.id));
+                              return next;
+                            });
+                          }}
+                        />
+                      </TableHead>
+                      <TableHead className="w-32 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="w-24 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-24 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                      <TableHead className="w-16 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {itemSearchResults.length === 0 ? (
+                      <TableRow>
+                        <TableCell colSpan={6} className="py-8 text-center text-muted-foreground">검색 결과가 없어요</TableCell>
+                      </TableRow>
+                    ) : itemSearchResults.map((item) => (
+                      <TableRow
+                        key={item.id}
+                        className={cn("cursor-pointer", itemSelectedMap.has(item.id) && "bg-primary/5")}
+                        onClick={() => setItemSelectedMap((prev) => {
+                          const next = new Map(prev);
+                          if (next.has(item.id)) next.delete(item.id); else next.set(item.id, item);
+                          return next;
+                        })}
+                      >
+                        <TableCell className="text-center">
+                          <input type="checkbox" checked={itemSelectedMap.has(item.id)} readOnly />
+                        </TableCell>
+                        <TableCell className="max-w-[128px]">
+                          <span className="block truncate text-[13px]" title={item.item_number}>{item.item_number}</span>
+                        </TableCell>
+                        <TableCell className="max-w-[150px]">
+                          <span className="block truncate text-sm" title={item.item_name}>{item.item_name}</span>
+                        </TableCell>
+                        <TableCell className="text-[13px]">{item.size}</TableCell>
+                        <TableCell className="text-[13px]">
+                          {categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}
+                        </TableCell>
+                        <TableCell className="text-[13px]">
+                          {categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <div className="flex items-center justify-between w-full border-t pt-2">
+                <div className="flex items-center gap-1">
+                  <span className="text-xs text-muted-foreground">표시:</span>
+                  <input
+                    type="number" min={1} max={200} value={itemPageSize}
+                    onChange={(e) => {
+                      const v = Math.min(200, Math.max(1, Number(e.target.value) || 20));
+                      setItemPageSize(v);
+                      setItemPage(1);
+                      setItemPageInput("1");
+                      searchItems(1, v);
+                    }}
+                    className="h-7 w-14 rounded-md border px-1 text-center text-xs"
+                  />
+                </div>
+                <div className="flex items-center gap-1">
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0"
+                    onClick={() => handleItemPageChange(1)} disabled={itemPage === 1 || itemSearchLoading}>
+                    <ChevronsLeft className="h-3 w-3" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0"
+                    onClick={() => handleItemPageChange(itemPage - 1)} disabled={itemPage === 1 || itemSearchLoading}>
+                    <ChevronLeft className="h-3 w-3" />
+                  </Button>
+                  <input
+                    type="text" inputMode="numeric" value={itemPageInput}
+                    onChange={(e) => setItemPageInput(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === "Enter") { commitItemPageInput(); (e.target as HTMLInputElement).blur(); } }}
+                    onBlur={commitItemPageInput}
+                    onFocus={(e) => e.target.select()}
+                    className="h-7 w-10 rounded-md border px-1 text-center text-xs"
+                  />
+                  <span className="text-xs text-muted-foreground">/ {itemTotalPages || 1}</span>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0"
+                    onClick={() => handleItemPageChange(itemPage + 1)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
+                    <ChevronRight className="h-3 w-3" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0"
+                    onClick={() => handleItemPageChange(itemTotalPages)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
+                    <ChevronsRight className="h-3 w-3" />
+                  </Button>
+                </div>
+                <span className="text-xs text-muted-foreground">총 {itemTotal}건</span>
+              </div>
+              <DialogFooter>
+                <div className="flex w-full items-center justify-between">
+                  <span className="text-sm text-muted-foreground">{itemSelectedMap.size}개 선택됨</span>
+                  <div className="flex gap-2">
+                    <Button variant="outline" onClick={() => { setItemSelectedMap(new Map()); setItemSelectOpen(false); }}>취소</Button>
+                    <Button onClick={addSelectedItemsToDetail} disabled={itemSelectedMap.size === 0}>
+                      <Plus className="w-4 h-4 mr-1" />{itemSelectedMap.size}개 추가
+                    </Button>
+                  </div>
+                </div>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </DialogContent>
+      </Dialog>
+
+      {/* 출하계획 동시 등록 모달 */}
+      <ShippingPlanBatchModal
+        open={shippingPlanOpen}
+        onOpenChange={setShippingPlanOpen}
+        selectedDetailIds={checkedIds}
+        onSuccess={fetchOrders}
+      />
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={DETAIL_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchOrders()}
+      />
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 공통 확인 다이얼로그 */}
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/sales/quote/page.tsx b/frontend/app/(main)/COMPANY_8/sales/quote/page.tsx
new file mode 100644
index 00000000..18e106c9
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/sales/quote/page.tsx
@@ -0,0 +1,995 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, FileText,
+} from "lucide-react";
+import { apiClient } from "@/lib/api/client";
+import { reportApi } from "@/lib/api/reportApi";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import {
+  ResizablePanelGroup, ResizablePanel, ResizableHandle,
+} from "@/components/ui/resizable";
+import { ReportInlineViewer } from "@/components/report/ReportInlineViewer";
+import { ReportMaster, ComponentConfig } from "@/types/report";
+
+const MASTER_TABLE = "quote_mng";
+
+const fmt = (val: string) => {
+  const num = val.replace(/[^\d.-]/g, "");
+  if (!num) return "";
+  const parts = num.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+const pn = (val: string) => val.replace(/,/g, "");
+
+const GRID_COLUMNS: DataGridColumn[] = [
+  { key: "quote_no", label: "견적번호", width: "w-[120px]" },
+  { key: "customer_name", label: "거래처명", width: "w-[150px]" },
+  { key: "quote_date", label: "견적일자", width: "w-[110px]" },
+  { key: "valid_until", label: "유효기한", width: "w-[110px]" },
+  { key: "total_amount", label: "견적금액", width: "w-[120px]", formatNumber: true, align: "right" },
+  { key: "status_label", label: "상태", width: "w-[90px]" },
+  { key: "manager", label: "담당자", width: "w-[100px]" },
+  { key: "domestic_type", label: "국내/국외", width: "w-[90px]" },
+];
+
+const STATUS_MAP: Record<string, string> = {
+  draft: "작성중", pending: "검토중", approved: "승인", rejected: "반려", converted: "수주전환",
+};
+
+const EMPTY_ITEM = {
+  item_code: "", item_name: "", spec: "", qty: "1", unit: "EA",
+  request_length: "", unit_price: "0", supply_amount: "0", vat_amount: "0", total_amount: "0", notes: "",
+};
+
+export default function QuoteManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  const [quotes, setQuotes] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [selectedRow, setSelectedRow] = useState<any | null>(null);
+
+  // 컴포넌트 클릭 편집 모달
+  const [editComp, setEditComp] = useState<ComponentConfig | null>(null);
+  const [editValues, setEditValues] = useState<Record<string, string>>({});
+  const [items, setItems] = useState<(typeof EMPTY_ITEM)[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // 기본정보 모달
+  const [basicInfoOpen, setBasicInfoOpen] = useState(false);
+  const [basicForm, setBasicForm] = useState({ quote_date: "", valid_until: "", status: "draft" });
+
+  // 엑셀 / 리포트
+  const [excelOpen, setExcelOpen] = useState(false);
+  const [reportList, setReportList] = useState<ReportMaster[]>([]);
+  const [selectedReportId, setSelectedReportId] = useState<string | null>(null);
+  const [reportKey, setReportKey] = useState(0);
+
+  // 품목 검색
+  const [itemSearchOpen, setItemSearchOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSelectedMap, setItemSelectedMap] = useState<Map<string, any>>(new Map());
+
+  // 거래처 검색
+  const [custSearchOpen, setCustSearchOpen] = useState(false);
+  const [custSearchKeyword, setCustSearchKeyword] = useState("");
+  const [custSearchResults, setCustSearchResults] = useState<any[]>([]);
+  const [custSearchLoading, setCustSearchLoading] = useState(false);
+
+  // 사원(담당자) 검색
+  const [userSearchOpen, setUserSearchOpen] = useState(false);
+  const [userSearchKeyword, setUserSearchKeyword] = useState("");
+  const [userSearchResults, setUserSearchResults] = useState<any[]>([]);
+  const [userSearchLoading, setUserSearchLoading] = useState(false);
+
+  // ── 데이터 로드 ──
+
+  const mapRow = (r: any) => ({
+    ...r, id: String(r.objid), status_label: STATUS_MAP[r.status] ?? r.status, total_amount: Number(r.total_amount || 0),
+  });
+
+  const fetchQuotes = useCallback(async () => {
+    if (!user) return;
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      searchFilters.forEach((f) => { if (f.value) params[f.columnName] = f.value; });
+      const res = await apiClient.get("/quotes/list", { params });
+      const mapped = (res.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+    } catch { toast.error("견적 목록 조회 실패"); }
+    finally { setLoading(false); }
+  }, [user, searchFilters]);
+
+  useEffect(() => { fetchQuotes(); }, [fetchQuotes]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await reportApi.getReports({ page: 1, limit: 100 });
+        if (res.success) {
+          const items = res.data.items ?? [];
+          setReportList(items);
+          if (items.length > 0 && !selectedReportId) setSelectedReportId(items[0].report_id);
+        }
+      } catch { /* 무시 */ }
+    })();
+  }, []);
+
+  // ── "신규" → DB에 draft 즉시 생성 → 자동 선택 ──
+
+  const handleCreate = async () => {
+    try {
+      const numRes = await apiClient.get("/quotes/generate-number");
+      const quoteNo = numRes.data?.data?.quoteNo ?? "";
+      const createRes = await apiClient.post("/quotes", {
+        quote_no: quoteNo,
+        quote_date: new Date().toISOString().split("T")[0],
+        status: "draft",
+        customer_name: "",
+        items: [],
+      });
+      toast.success("신규 견적이 생성되었습니다. 우측 양식에서 각 영역을 클릭하여 입력하세요.");
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+
+      const newObjid = createRes.data?.data?.objid;
+      const newRow = newObjid ? mapped.find((r: any) => r.objid === newObjid) : mapped[0];
+      if (newRow) setSelectedRow(newRow);
+    } catch { toast.error("견적 생성 실패"); }
+  };
+
+  // ── 삭제 ──
+
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.info("삭제할 견적을 선택하세요."); return; }
+    const ok = await confirm(`${checkedIds.length}건의 견적을 삭제하시겠습니까?`, { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      for (const id of checkedIds) await apiClient.delete(`/quotes/${id}`);
+      toast.success("삭제 완료");
+      setCheckedIds([]);
+      setSelectedRow(null);
+      fetchQuotes();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // ── 컴포넌트 클릭 → 편집 모달 ──
+
+  const handleComponentClick = async (comp: ComponentConfig) => {
+    if (!selectedRow) return;
+    setEditComp(comp);
+
+    if (comp.type === "table") {
+      // 테이블 → 품목 편집
+      try {
+        const res = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const d = res.data?.data;
+        setItems(
+          (d?.items || []).length > 0
+            ? d.items.map((it: any) => ({
+                item_code: it.item_code || "", item_name: it.item_name || "", spec: it.spec || "",
+                qty: String(it.qty ?? 1), unit: it.unit || "EA",
+                request_length: it.request_length ? String(it.request_length) : "",
+                unit_price: String(it.unit_price ?? 0), supply_amount: String(it.supply_amount ?? 0),
+                vat_amount: String(it.vat_amount ?? 0), total_amount: String(it.total_amount ?? 0),
+                notes: it.notes || "",
+              }))
+            : [{ ...EMPTY_ITEM }],
+        );
+      } catch { setItems([{ ...EMPTY_ITEM }]); }
+    } else if (comp.type === "card") {
+      const cardItems = (comp as any).cardItems ?? [];
+      // 우측 카드 (회사정보 + 담당자) → 담당자 선택
+      const hasCompanyField = cardItems.some((ci: any) =>
+        ["company_name_self", "ceo_self", "biz_no_self", "address_self"].includes(ci.fieldName || "")
+      );
+      if (hasCompanyField) {
+        setUserSearchKeyword("");
+        setUserSearchResults([]);
+        setUserSearchOpen(true);
+        searchUsers();
+        return;
+      }
+      // 좌측 카드 (거래처) → 거래처 검색
+      const hasCustomerField = cardItems.some((ci: any) =>
+        ["customer_name", "customer_ceo", "customer_biz_no"].includes(ci.fieldName || "")
+      );
+      if (hasCustomerField) {
+        setCustSearchKeyword("");
+        setCustSearchResults([]);
+        setCustSearchOpen(true);
+        searchCustomers();
+        return;
+      }
+      // 기타 카드
+      const vals: Record<string, string> = {};
+      cardItems.forEach((ci: any) => {
+        if (ci.fieldName) vals[ci.fieldName] = selectedRow[ci.fieldName] ?? ci.value ?? "";
+      });
+      setEditValues(vals);
+    } else if (comp.type === "text" || comp.type === "label") {
+      // 텍스트 → 기본정보 모달 하나로 통합
+      const basicFields = ["quote_no", "quote_date", "valid_until", "status"];
+      if (comp.fieldName && basicFields.includes(comp.fieldName)) {
+        // 기본정보 모달
+        const detail = await apiClient.get(`/quotes/${selectedRow.objid}`).then(r => r.data?.data).catch(() => null);
+        setBasicForm({
+          quote_date: detail?.quote_date || "",
+          valid_until: detail?.valid_until || "",
+          status: detail?.status || "draft",
+        });
+        setBasicInfoOpen(true);
+        setEditComp(null);
+        return;
+      }
+      // 기타 텍스트 (제목 등)
+      toast.info("이 영역은 리포트 디자이너에서 수정하세요.");
+      setEditComp(null);
+      return;
+    } else if (comp.type === "calculation") {
+      // 계산은 읽기 전용 안내
+      toast.info("계산 컴포넌트는 품목 데이터에서 자동 계산됩니다.");
+      setEditComp(null);
+    } else if (comp.type === "signature" || comp.type === "stamp") {
+      toast.info("서명/도장은 리포트 디자이너에서 설정하세요.");
+      setEditComp(null);
+    } else {
+      setEditValues({});
+    }
+  };
+
+  // ── 컴포넌트 편집 저장 ──
+
+  const handleEditSave = async () => {
+    if (!selectedRow || !editComp) return;
+    setSaving(true);
+    try {
+      if (editComp.type === "table") {
+        // 품목 저장 — 기존 견적 데이터 불러와서 품목만 교체
+        const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const existing = detailRes.data?.data ?? {};
+        const payload = {
+          ...existing,
+          items: items.filter((it) => it.item_name).map((it) => ({
+            item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+            qty: Number(pn(it.qty)) || 0, unit: it.unit,
+            request_length: it.request_length ? Number(it.request_length) : null,
+            unit_price: Number(pn(it.unit_price)) || 0,
+            supply_amount: Number(pn(it.supply_amount)) || 0,
+            vat_amount: Number(pn(it.vat_amount)) || 0,
+            total_amount: Number(pn(it.total_amount)) || 0,
+            notes: it.notes,
+          })),
+        };
+        await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      } else {
+        // 텍스트/카드 → 해당 필드만 업데이트
+        const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const existing = detailRes.data?.data ?? {};
+        const payload = { ...existing, ...editValues };
+        // items는 기존 유지
+        payload.items = (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0),
+          notes: it.notes,
+        }));
+        await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      }
+
+      toast.success("저장되었습니다.");
+      setEditComp(null);
+
+      // 목록 + 리포트 갱신
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 거래처 검색 ──
+
+  const searchCustomers = async () => {
+    setCustSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (custSearchKeyword) {
+        filters.push({ columnName: "customer_name", operator: "contains", value: custSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/customer_mng/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setCustSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("거래처 조회 실패"); }
+    finally { setCustSearchLoading(false); }
+  };
+
+  const selectCustomer = async (cust: any) => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        customer_objid: cust.objid || null,
+        customer_name: cust.customer_name || "",
+        customer_ceo: cust.contact_person || "",
+        customer_biz_no: cust.business_number || "",
+        customer_address: cust.address || "",
+        customer_contact: cust.contact_person || "",
+        customer_phone: cust.contact_phone || "",
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success(`${payload.customer_name} 거래처 적용 완료`);
+      setCustSearchOpen(false);
+      setEditComp(null);
+
+      // 목록 + 리포트 갱신
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 기본정보 저장 ──
+
+  const handleBasicInfoSave = async () => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        quote_date: basicForm.quote_date,
+        valid_until: basicForm.valid_until,
+        status: basicForm.status,
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success("기본정보 저장 완료");
+      setBasicInfoOpen(false);
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 사원(담당자) 검색 ──
+
+  const searchUsers = async () => {
+    setUserSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (userSearchKeyword) {
+        filters.push({ columnName: "user_name", operator: "contains", value: userSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/user_info/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setUserSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("사원 조회 실패"); }
+    finally { setUserSearchLoading(false); }
+  };
+
+  const selectUser = async (usr: any) => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        manager: usr.user_name || "",
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success(`담당자: ${payload.manager} 적용`);
+      setUserSearchOpen(false);
+      setEditComp(null);
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 품목 검색 ──
+
+  const searchItemInfo = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/item_info/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setItemSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("품목 조회 실패"); }
+    finally { setItemSearchLoading(false); }
+  };
+
+  const toggleItemSelect = (row: any) => {
+    const key = row.item_number || row.objid || row.id;
+    setItemSelectedMap((prev) => {
+      const next = new Map(prev);
+      if (next.has(key)) next.delete(key); else next.set(key, row);
+      return next;
+    });
+  };
+
+  const addSelectedItemsToQuote = () => {
+    const selected = Array.from(itemSelectedMap.values());
+    if (selected.length === 0) { toast.info("품목을 선택하세요."); return; }
+    const newItems = selected.map((item) => calcItem({
+      item_code: item.item_number || item.item_code || "",
+      item_name: item.item_name || "",
+      spec: item.spec || item.standard || "",
+      qty: "1",
+      unit: item.unit || "EA",
+      request_length: "",
+      unit_price: String(item.selling_price || item.standard_price || 0),
+      supply_amount: "0",
+      vat_amount: "0",
+      total_amount: "0",
+      notes: "",
+    }));
+    setItems((prev) => [...prev, ...newItems]);
+    setItemSearchOpen(false);
+    setItemSelectedMap(new Map());
+    setItemSearchKeyword("");
+    toast.success(`${selected.length}건 품목 추가`);
+  };
+
+  // ── 품목 계산 ──
+
+  const calcItem = (item: typeof EMPTY_ITEM) => {
+    const qty = Number(pn(item.qty)) || 0;
+    const price = Number(pn(item.unit_price)) || 0;
+    const supply = qty * price;
+    const vat = Math.round(supply * 0.1);
+    return { ...item, supply_amount: String(supply), vat_amount: String(vat), total_amount: String(supply + vat) };
+  };
+  const updateItem = (idx: number, field: string, value: string) => {
+    setItems((prev) => {
+      const next = [...prev];
+      next[idx] = { ...next[idx], [field]: value };
+      if (field === "qty" || field === "unit_price") next[idx] = calcItem(next[idx]);
+      return next;
+    });
+  };
+  const addItem = () => setItems((prev) => [...prev, { ...EMPTY_ITEM }]);
+  const removeItem = (idx: number) => setItems((prev) => prev.filter((_, i) => i !== idx));
+  const totalSupply = items.reduce((s, it) => s + (Number(pn(it.supply_amount)) || 0), 0);
+  const totalVat = items.reduce((s, it) => s + (Number(pn(it.vat_amount)) || 0), 0);
+  const totalAmount = totalSupply + totalVat;
+
+  // ── 행 클릭 ──
+
+  const handleRowClick = (row: any) => setSelectedRow(row);
+
+  const contextParams = selectedRow
+    ? { "$1": selectedRow.objid, "$2": user?.companyCode || "COMPANY_7", objid: selectedRow.objid, quote_no: selectedRow.quote_no, customer_name: selectedRow.customer_name, quote_date: selectedRow.quote_date }
+    : undefined;
+
+  // ── 편집 모달 제목/타입 판별 ──
+
+  const getModalTitle = () => {
+    if (!editComp) return "";
+    if (editComp.type === "table") return "견적 품목";
+    if (editComp.type === "card") {
+      const items = (editComp as any).cardItems ?? [];
+      const title = (editComp as any).headerText || (editComp as any).title || "";
+      if (title) return title;
+      if (items.length > 0) return items[0].label ?? "카드 정보";
+      return "카드 정보";
+    }
+    if (editComp.type === "text" || editComp.type === "label") {
+      if (editComp.fieldName) return editComp.fieldName;
+      return "텍스트 편집";
+    }
+    return editComp.type;
+  };
+
+  // ── JSX ──
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      <DynamicSearchFilter tableName={MASTER_TABLE} filterId="quote-mng-filter"
+        onFilterChange={(filters) => setSearchFilters(filters)} dataCount={totalCount} />
+
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg border">
+        {/* 좌측: 견적 목록 */}
+        <ResizablePanel defaultSize={55} minSize={35}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center justify-between border-b bg-white px-3 py-2">
+              <span className="text-sm font-semibold text-gray-700">
+                견적 목록 <span className="text-gray-400">{totalCount}건</span>
+              </span>
+              <div className="flex items-center gap-1.5">
+                <Button variant="outline" size="sm" className="gap-1 text-xs" onClick={() => setExcelOpen(true)}>
+                  <FileSpreadsheet className="h-3.5 w-3.5" /> 업로드
+                </Button>
+                <Button variant="outline" size="sm" className="gap-1 text-xs"
+                  onClick={() => quotes.length > 0 ? exportToExcel(quotes, "견적목록.xlsx", "견적목록") : toast.info("데이터 없음")}>
+                  <Download className="h-3.5 w-3.5" /> 다운로드
+                </Button>
+                <Button size="sm" className="gap-1 text-xs" onClick={handleCreate}>
+                  <Plus className="h-3.5 w-3.5" /> 신규
+                </Button>
+                <Button variant="destructive" size="sm" className="gap-1 text-xs" onClick={handleDelete}>
+                  <Trash2 className="h-3.5 w-3.5" /> 삭제
+                </Button>
+              </div>
+            </div>
+            <div className="flex-1 overflow-hidden">
+              <DataGrid gridId="quote-mng" columns={GRID_COLUMNS} data={quotes} showCheckbox tableName={MASTER_TABLE}
+                checkedIds={checkedIds} onCheckedChange={setCheckedIds}
+                onRowClick={handleRowClick} selectedId={selectedRow?.objid ? String(selectedRow.objid) : null} />
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 리포트 뷰어 — 컴포넌트 클릭 가능 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center gap-2 border-b bg-white px-3 py-2">
+              <FileText className="h-4 w-4 text-gray-500" />
+              <span className="text-sm font-semibold text-gray-700">견적서</span>
+              <Select value={selectedReportId ?? ""} onValueChange={(v) => setSelectedReportId(v || null)}>
+                <SelectTrigger className="ml-auto h-7 w-[180px] text-xs">
+                  <SelectValue placeholder="리포트 양식 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {reportList.map((r) => (
+                    <SelectItem key={r.report_id} value={r.report_id} className="text-xs">
+                      {r.report_name_kor || r.report_name_eng || r.report_id}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex-1 overflow-hidden">
+              {!selectedRow ? (
+                <div className="flex h-full items-center justify-center text-center text-gray-400">
+                  <div>
+                    <FileText className="mx-auto mb-3 h-12 w-12 opacity-30" />
+                    <p className="text-sm font-medium">견적을 선택해주세요</p>
+                    <p className="mt-1 text-xs text-gray-300">&quot;신규&quot; 버튼으로 생성하거나 좌측에서 선택하세요.</p>
+                  </div>
+                </div>
+              ) : !selectedReportId ? (
+                <div className="flex h-full items-center justify-center text-center text-gray-400">
+                  <div>
+                    <FileText className="mx-auto mb-3 h-12 w-12 opacity-30" />
+                    <p className="text-sm font-medium">리포트 양식을 선택해주세요</p>
+                  </div>
+                </div>
+              ) : (
+                <ReportInlineViewer
+                  key={reportKey}
+                  reportId={selectedReportId}
+                  contextParams={contextParams}
+                  onComponentClick={handleComponentClick}
+                />
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ═══ 컴포넌트 클릭 편집 모달 (동적) ═══ */}
+
+      {/* 텍스트/카드 편집 모달 */}
+      <Dialog open={!!editComp && editComp.type !== "table"} onOpenChange={(o) => !o && setEditComp(null)}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{getModalTitle()}</DialogTitle>
+            <DialogDescription>값을 수정한 후 저장 버튼을 누르세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-3">
+            {Object.entries(editValues).map(([key, val]) => (
+              <div key={key}>
+                <Label className="text-xs">{key}</Label>
+                {val.length > 60 ? (
+                  <Textarea className="mt-1" rows={3} value={val}
+                    onChange={(e) => setEditValues((p) => ({ ...p, [key]: e.target.value }))} />
+                ) : (
+                  <Input className="mt-1" value={val}
+                    onChange={(e) => setEditValues((p) => ({ ...p, [key]: e.target.value }))} />
+                )}
+              </div>
+            ))}
+            {Object.keys(editValues).length === 0 && (
+              <p className="text-sm text-gray-400">이 컴포넌트에 편집 가능한 필드가 없습니다.</p>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditComp(null)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving || Object.keys(editValues).length === 0} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블(품목) 편집 모달 */}
+      <Dialog open={!!editComp && editComp.type === "table"} onOpenChange={(o) => { if (!o && itemSearchOpen) return; if (!o) setEditComp(null); }}>
+        <DialogContent className="flex max-h-[80vh] max-w-4xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>견적 품목</DialogTitle>
+            <DialogDescription>품목을 추가/수정합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-auto">
+            <div className="mb-3 flex gap-2">
+              <Button size="sm" className="gap-1 text-xs" onClick={() => { setItemSelectedMap(new Map()); setItemSearchResults([]); setItemSearchKeyword(""); setItemSearchOpen(true); searchItemInfo(); }}>
+                <Plus className="h-3.5 w-3.5" /> 품목 검색/추가
+              </Button>
+              <Button variant="outline" size="sm" className="gap-1 text-xs" onClick={addItem}>
+                <Plus className="h-3.5 w-3.5" /> 빈 행 추가
+              </Button>
+            </div>
+            <div className="overflow-auto rounded border">
+              <table className="w-full text-xs">
+                <thead className="sticky top-0 bg-gray-50">
+                  <tr>
+                    <th className="w-8 px-2 py-2 text-center">#</th>
+                    <th className="px-2 py-2 text-left">품목코드</th>
+                    <th className="px-2 py-2 text-left">품목명</th>
+                    <th className="px-2 py-2 text-left">규격</th>
+                    <th className="w-20 px-2 py-2 text-right">수량</th>
+                    <th className="w-16 px-2 py-2 text-center">단위</th>
+                    <th className="w-24 px-2 py-2 text-right">단가</th>
+                    <th className="w-24 px-2 py-2 text-right">공급가액</th>
+                    <th className="w-20 px-2 py-2 text-right">부가세</th>
+                    <th className="w-24 px-2 py-2 text-right">합계</th>
+                    <th className="w-8" />
+                  </tr>
+                </thead>
+                <tbody>
+                  {items.map((item, idx) => (
+                    <tr key={idx} className="border-t">
+                      <td className="px-2 py-1 text-center text-gray-400">{idx + 1}</td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.item_code} onChange={(e) => updateItem(idx, "item_code", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.item_name} onChange={(e) => updateItem(idx, "item_name", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.spec} onChange={(e) => updateItem(idx, "spec", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-right text-xs" value={fmt(item.qty)} onChange={(e) => updateItem(idx, "qty", pn(e.target.value))} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-center text-xs" value={item.unit} onChange={(e) => updateItem(idx, "unit", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-right text-xs" value={fmt(item.unit_price)} onChange={(e) => updateItem(idx, "unit_price", pn(e.target.value))} /></td>
+                      <td className="px-2 py-1 text-right">{fmt(item.supply_amount)}</td>
+                      <td className="px-2 py-1 text-right">{fmt(item.vat_amount)}</td>
+                      <td className="px-2 py-1 text-right font-medium">{fmt(item.total_amount)}</td>
+                      <td className="px-1 py-1">
+                        <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => removeItem(idx)}>
+                          <Trash2 className="h-3 w-3 text-red-400" />
+                        </Button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className="mt-3 rounded bg-gray-50 p-3 text-sm">
+              <div className="flex justify-between"><span>공급가액</span><span>{fmt(String(totalSupply))}원</span></div>
+              <div className="flex justify-between"><span>부가세</span><span>{fmt(String(totalVat))}원</span></div>
+              <div className="flex justify-between border-t pt-2 font-bold"><span>합계금액</span><span>{fmt(String(totalAmount))}원</span></div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditComp(null)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 기본정보 모달 ═══ */}
+      <Dialog open={basicInfoOpen} onOpenChange={setBasicInfoOpen}>
+        <DialogContent className="max-w-md" onOpenAutoFocus={(e) => e.preventDefault()}>
+          <DialogHeader>
+            <DialogTitle>기본 정보</DialogTitle>
+            <DialogDescription>견적 기본 정보를 수정합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label className="text-xs">견적번호</Label>
+              <Input className="mt-1" value={selectedRow?.quote_no || ""} disabled />
+            </div>
+            <div>
+              <Label className="text-xs">견적일자 *</Label>
+              <div className="mt-1">
+                <FormDatePicker value={basicForm.quote_date} onChange={(v) => setBasicForm((p) => ({ ...p, quote_date: v }))} />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">유효기한 *</Label>
+              <div className="mt-1">
+                <FormDatePicker value={basicForm.valid_until} onChange={(v) => setBasicForm((p) => ({ ...p, valid_until: v }))} />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">상태</Label>
+              <Select value={basicForm.status} onValueChange={(v) => setBasicForm((p) => ({ ...p, status: v }))}>
+                <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {Object.entries(STATUS_MAP).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setBasicInfoOpen(false)}>취소</Button>
+            <Button onClick={handleBasicInfoSave} disabled={saving} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 담당자(사원) 검색 모달 ═══ */}
+      <Dialog open={userSearchOpen} onOpenChange={setUserSearchOpen}>
+        <DialogContent className="flex max-h-[70vh] max-w-lg flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>담당자 선택</DialogTitle>
+            <DialogDescription>담당자를 검색하여 선택하세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="이름 검색" value={userSearchKeyword}
+              onChange={(e) => setUserSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchUsers()} className="text-sm" />
+            <Button onClick={searchUsers} disabled={userSearchLoading} className="shrink-0">
+              {userSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left">이름</th>
+                  <th className="px-3 py-2 text-left">부서</th>
+                  <th className="px-3 py-2 text-left">직위</th>
+                  <th className="w-16 px-2 py-2 text-center">선택</th>
+                </tr>
+              </thead>
+              <tbody>
+                {userSearchResults.length === 0 ? (
+                  <tr><td colSpan={4} className="px-4 py-8 text-center text-gray-400">
+                    {userSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : userSearchResults.map((row, i) => (
+                  <tr key={row.objid || row.user_id || i} className="cursor-pointer border-t hover:bg-blue-50"
+                    onClick={() => selectUser(row)}>
+                    <td className="px-3 py-2 font-medium">{row.user_name || "-"}</td>
+                    <td className="px-3 py-2">{row.department || row.dept_name || "-"}</td>
+                    <td className="px-3 py-2">{row.position || row.rank || "-"}</td>
+                    <td className="px-2 py-2 text-center">
+                      <Button size="sm" variant="outline" className="h-6 text-xs"
+                        onClick={(e) => { e.stopPropagation(); selectUser(row); }}>선택</Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserSearchOpen(false)}>취소</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 거래처 검색 모달 ═══ */}
+      <Dialog open={custSearchOpen} onOpenChange={setCustSearchOpen}>
+        <DialogContent className="flex max-h-[80vh] max-w-2xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>거래처 검색</DialogTitle>
+            <DialogDescription>거래처를 검색하여 선택하세요. 선택하면 자동으로 적용됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="거래처명 검색" value={custSearchKeyword}
+              onChange={(e) => setCustSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchCustomers()} className="text-sm" />
+            <Button onClick={searchCustomers} disabled={custSearchLoading} className="shrink-0 gap-1">
+              {custSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left">거래처명</th>
+                  <th className="px-3 py-2 text-left">대표자</th>
+                  <th className="px-3 py-2 text-left">사업자번호</th>
+                  <th className="px-3 py-2 text-left">연락처</th>
+                  <th className="w-16 px-2 py-2 text-center">선택</th>
+                </tr>
+              </thead>
+              <tbody>
+                {custSearchResults.length === 0 ? (
+                  <tr><td colSpan={5} className="px-4 py-8 text-center text-gray-400">
+                    {custSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : custSearchResults.map((row, i) => (
+                  <tr key={row.objid || i} className="cursor-pointer border-t hover:bg-blue-50"
+                    onClick={() => selectCustomer(row)}>
+                    <td className="px-3 py-2 font-medium">{row.customer_name || "-"}</td>
+                    <td className="px-3 py-2">{row.contact_person || "-"}</td>
+                    <td className="px-3 py-2">{row.business_number || "-"}</td>
+                    <td className="px-3 py-2">{row.contact_phone || "-"}</td>
+                    <td className="px-2 py-2 text-center">
+                      <Button size="sm" variant="outline" className="h-6 text-xs"
+                        onClick={(e) => { e.stopPropagation(); selectCustomer(row); }}>선택</Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCustSearchOpen(false)}>취소</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 품목 검색 모달 ═══ */}
+      <Dialog open={itemSearchOpen} onOpenChange={setItemSearchOpen}>
+        <DialogContent className="flex max-h-[80vh] max-w-3xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>품목 검색</DialogTitle>
+            <DialogDescription>추가할 품목을 검색하여 선택하세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItemInfo()} className="text-sm" />
+            <Button onClick={searchItemInfo} disabled={itemSearchLoading} className="shrink-0 gap-1">
+              {itemSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="w-10 px-2 py-2 text-center">선택</th>
+                  <th className="px-2 py-2 text-left">품목코드</th>
+                  <th className="px-2 py-2 text-left">품명</th>
+                  <th className="px-2 py-2 text-left">규격</th>
+                  <th className="w-16 px-2 py-2 text-center">단위</th>
+                  <th className="w-24 px-2 py-2 text-right">단가</th>
+                </tr>
+              </thead>
+              <tbody>
+                {itemSearchResults.length === 0 ? (
+                  <tr><td colSpan={6} className="px-4 py-8 text-center text-gray-400">
+                    {itemSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : itemSearchResults.map((row, i) => {
+                  const key = row.item_number || row.objid || row.id || i;
+                  const checked = itemSelectedMap.has(key);
+                  return (
+                    <tr key={key} className={`cursor-pointer border-t ${checked ? "bg-blue-50" : "hover:bg-gray-50"}`}
+                      onClick={() => toggleItemSelect(row)}>
+                      <td className="px-2 py-1.5 text-center">
+                        <input type="checkbox" checked={checked} readOnly className="accent-blue-500" />
+                      </td>
+                      <td className="px-2 py-1.5">{row.item_number || row.item_code || "-"}</td>
+                      <td className="px-2 py-1.5">{row.item_name || "-"}</td>
+                      <td className="px-2 py-1.5">{row.spec || row.standard || "-"}</td>
+                      <td className="px-2 py-1.5 text-center">{row.unit || "EA"}</td>
+                      <td className="px-2 py-1.5 text-right">{fmt(String(row.selling_price || row.standard_price || 0))}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter className="flex items-center justify-between">
+            <span className="text-xs text-gray-500">선택: {itemSelectedMap.size}건</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSearchOpen(false)}>취소</Button>
+              <Button onClick={addSelectedItemsToQuote} disabled={itemSelectedMap.size === 0} className="gap-1">
+                <Plus className="h-4 w-4" /> 선택 품목 추가
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ExcelUploadModal open={excelOpen} onOpenChange={setExcelOpen} tableName={MASTER_TABLE} />
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/sales/sales-item/page.tsx b/frontend/app/(main)/COMPANY_8/sales/sales-item/page.tsx
new file mode 100644
index 00000000..d02bfef5
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/sales/sales-item/page.tsx
@@ -0,0 +1,1245 @@
+"use client";
+
+/**
+ * 판매품목정보 — Type B 마스터-디테일 리디자인
+ *
+ * 좌측: 판매품목 목록 (item_info, 판매 관련 필터)
+ * 우측: 선택한 품목의 거래처 정보 (customer_item_mapping → customer_mng 조인)
+ *
+ * 거래처관리와 양방향 연동 (같은 customer_item_mapping 테이블)
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Users, Package, Search, X, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const ITEM_TABLE = "item_info";
+const MAPPING_TABLE = "customer_item_mapping";
+const CUSTOMER_TABLE = "customer_mng";
+
+// 숫자 포맷 헬퍼
+const formatNum = (val: any): string => {
+  if (val === null || val === undefined || val === "") return "";
+  const n = Number(val);
+  return isNaN(n) ? String(val) : n.toLocaleString();
+};
+
+const ITEM_GRID_COLUMNS = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "selling_price", label: "판매가격" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
+];
+
+export default function SalesItemPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-sales-item", ITEM_TABLE, ITEM_GRID_COLUMNS);
+
+  // 좌측: 품목
+  const [items, setItems] = useState<any[]>([]);
+  const [itemLoading, setItemLoading] = useState(false);
+  const [itemCount, setItemCount] = useState(0);
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 거래처
+  const [customerItems, setCustomerItems] = useState<any[]>([]);
+  const [customerLoading, setCustomerLoading] = useState(false);
+  const [customerCheckedIds, setCustomerCheckedIds] = useState<string[]>([]);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string; isDefault?: boolean }[]>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 거래처 추가 모달
+  const [custSelectOpen, setCustSelectOpen] = useState(false);
+  const [custSearchKeyword, setCustSearchKeyword] = useState("");
+  const [custSearchResults, setCustSearchResults] = useState<any[]>([]);
+  const [custSearchLoading, setCustSearchLoading] = useState(false);
+  const [custCheckedIds, setCustCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 수정 모달
+  const [editItemOpen, setEditItemOpen] = useState(false);
+  const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+
+  // 거래처 상세 입력 모달 (거래처 품번/품명 + 단가)
+  const [custDetailOpen, setCustDetailOpen] = useState(false);
+  const [selectedCustsForDetail, setSelectedCustsForDetail] = useState<any[]>([]);
+  const [custMappings, setCustMappings] = useState<Record<string, Array<{ _id: string; customer_item_code: string; customer_item_name: string }>>>({});
+  const [custPrices, setCustPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [editCustData, setEditCustData] = useState<any>(null);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string; isDefault?: boolean }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string; isDefault?: boolean }[] => {
+        const result: { code: string; label: string; isDefault?: boolean }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel, isDefault: v.isDefault });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      // 단가 카테고리
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/customer_item_prices/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 좌측: 품목 조회
+  const fetchItems = useCallback(async () => {
+    setItemLoading(true);
+    try {
+      const filters: { columnName: string; operator: string; value: any }[] = [];
+
+      // 판매품목/영업관리 division 필터 (다중값 컬럼이므로 contains로 매칭)
+      filters.push({ columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" });
+
+      // DynamicSearchFilter에서 전달된 필터 추가
+      for (const f of searchFilters) {
+        filters.push({ columnName: f.columnName, operator: f.operator, value: f.value });
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const CATS = ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+      setItemCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setItemLoading(false);
+    }
+  }, [searchFilters, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => { fetchItems(); }, [fetchItems]);
+
+  // 선택된 품목
+  const selectedItem = items.find((i) => i.id === selectedItemId);
+
+  // 우측: 거래처 목록 조회
+  useEffect(() => {
+    if (!selectedItem?.item_number) { setCustomerItems([]); setCustomerCheckedIds([]); return; }
+    setCustomerCheckedIds([]);
+    const itemKey = selectedItem.item_number;
+    const fetchCustomerItems = async () => {
+      setCustomerLoading(true);
+      try {
+        // 1. customer_item_mapping에서 해당 품목의 매핑 조회
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
+          autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        // 2. customer_id → customer_mng 조인 (거래처명)
+        const custIds = [...new Set(mappings.map((m: any) => m.customer_id).filter(Boolean))];
+        let custMap: Record<string, any> = {};
+        if (custIds.length > 0) {
+          try {
+            const custRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+              page: 1, size: custIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "in", value: custIds }] },
+              autoFilter: true,
+            });
+            for (const c of (custRes.data?.data?.data || custRes.data?.data?.rows || [])) {
+              custMap[c.customer_code] = c;
+            }
+          } catch { /* skip */ }
+        }
+
+        // 3. customer_item_prices 조회 (단가 정보)
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        // 4. 거래처별 중복 제거 + 오늘 날짜 기준 단가 매칭
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o: any) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+        const seenCustIds = new Set<string>();
+        const sortedMappings = [...mappings].sort((a: any, b: any) => (a.customer_id || "").localeCompare(b.customer_id || ""));
+
+        setCustomerItems(sortedMappings.map((m: any) => {
+          const custKey = m.customer_id || "";
+          const isFirstOfGroup = !seenCustIds.has(custKey);
+          if (custKey) seenCustIds.add(custKey);
+
+          const custPriceList = allPrices.filter((p: any) => p.customer_id === custKey);
+          const todayPrice = custPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || custPriceList[0] || {};
+
+          return {
+            ...m,
+            customer_code: isFirstOfGroup ? custKey : "",
+            customer_name: isFirstOfGroup ? (custMap[custKey]?.customer_name || "") : "",
+            customer_item_code: m.customer_item_code || "",
+            customer_item_name: m.customer_item_name || "",
+            base_price: todayPrice.base_price || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+        }));
+      } catch (err) {
+        console.error("거래처 조회 실패:", err);
+      } finally {
+        setCustomerLoading(false);
+      }
+    };
+    fetchCustomerItems();
+  }, [selectedItem?.item_number, priceCategoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 거래처 검색
+  const searchCustomers = async () => {
+    setCustSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (custSearchKeyword) filters.push({ columnName: "customer_name", operator: "contains", value: custSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const all = res.data?.data?.data || res.data?.data?.rows || [];
+      // 이미 등록된 거래처 제외
+      const existing = new Set(customerItems.map((c: any) => c.customer_id || c.customer_code));
+      setCustSearchResults(all.filter((c: any) => !existing.has(c.customer_code)));
+    } catch { /* skip */ } finally { setCustSearchLoading(false); }
+  };
+
+  // 거래처 선택 → 상세 모달로 이동
+  const goToCustDetail = () => {
+    const selected = custSearchResults.filter((c) => custCheckedIds.has(c.id));
+    if (selected.length === 0) { toast.error("거래처를 선택해주세요."); return; }
+    setSelectedCustsForDetail(selected);
+    const mappings: typeof custMappings = {};
+    const prices: typeof custPrices = {};
+    for (const cust of selected) {
+      const key = cust.customer_code || cust.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: selectedItem?.standard_price || selectedItem?.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: selectedItem?.standard_price || selectedItem?.selling_price || "",
+      }];
+    }
+    setCustMappings(mappings);
+    setCustPrices(prices);
+    setCustSelectOpen(false);
+    setCustDetailOpen(true);
+  };
+
+  const addMappingRow = (custKey: string) => {
+    setCustMappings((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, customer_item_code: "", customer_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (custKey: string, rowId: string) => {
+    setCustMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updateMappingRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setCustMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  const addPriceRow = (custKey: string) => {
+    setCustPrices((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (custKey: string, rowId: string) => {
+    setCustPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setCustPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1;
+          if (roundLabel === "반올림") calc = Math.round(calc / unit) * unit;
+          else if (roundLabel === "절삭") calc = Math.floor(calc / unit) * unit;
+          else if (roundLabel === "올림") calc = Math.ceil(calc / unit) * unit;
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  const openEditCust = async (row: any) => {
+    const custKey = row.customer_code || row.customer_id;
+
+    // customer_mng에서 거래처 정보 조회
+    let custInfo: any = { customer_code: custKey, customer_name: row.customer_name || "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/customer_mng/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: custKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) custInfo = found;
+    } catch { /* skip */ }
+
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/customer_item_mapping/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: custKey },
+          { columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
+        ]}, autoFilter: true,
+      });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.customer_item_code || m.customer_item_name)
+        .map((m: any) => ({ _id: `m_existing_${m.id}`, customer_item_code: m.customer_item_code || "", customer_item_name: m.customer_item_name || "" }));
+    } catch { /* skip */ }
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: custKey },
+          { columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`, start_date: p.start_date ? String(p.start_date).split("T")[0] : "", end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI", base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "", discount_type: p.discount_type || "", discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "", rounding_unit_value: p.rounding_unit_value || "", calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+    if (priceRows.length === 0) {
+      priceRows.push({ _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "" });
+    }
+
+    setSelectedCustsForDetail([custInfo]);
+    setCustMappings({ [custKey]: mappingRows });
+    setCustPrices({ [custKey]: priceRows });
+    setEditCustData(row);
+    setCustDetailOpen(true);
+  };
+
+  const handleCustDetailSave = async () => {
+    if (!selectedItem) return;
+    const isEditingExisting = !!editCustData;
+    setSaving(true);
+    try {
+      for (const cust of selectedCustsForDetail) {
+        const custKey = cust.customer_code || cust.id;
+        const mappingRows = custMappings[custKey] || [];
+
+        if (isEditingExisting && editCustData?.id) {
+          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+            originalData: { id: editCustData.id },
+            updatedData: {
+              customer_item_code: mappingRows[0]?.customer_item_code || "",
+              customer_item_name: mappingRows[0]?.customer_item_name || "",
+            },
+          });
+
+          // 기존 prices 삭제 후 재등록
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "mapping_id", operator: "equals", value: editCustData.id },
+              ]}, autoFilter: true,
+            });
+            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+            if (existing.length > 0) {
+              await apiClient.delete(`/table-management/tables/customer_item_prices/delete`, {
+                data: existing.map((p: any) => ({ id: p.id })),
+              });
+            }
+          } catch { /* skip */ }
+
+          const priceRows = (custPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/customer_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: editCustData.id,
+              customer_id: custKey,
+              item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        } else {
+          // 신규 등록
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            customer_id: custKey, item_id: selectedItem.item_number,
+            customer_item_code: mappingRows[0]?.customer_item_code || "",
+            customer_item_name: mappingRows[0]?.customer_item_name || "",
+          });
+          const mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              customer_id: custKey, item_id: selectedItem.item_number,
+              customer_item_code: mappingRows[mi].customer_item_code || "",
+              customer_item_name: mappingRows[mi].customer_item_name || "",
+            });
+          }
+
+          const priceRows = (custPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/customer_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", customer_id: custKey, item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedCustsForDetail.length}개 거래처가 추가되었습니다.`);
+      setCustDetailOpen(false);
+      setEditCustData(null);
+      setCustCheckedIds(new Set());
+      // 우측 새로고침
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 수정
+  const openEditItem = () => {
+    if (!selectedItem) return;
+    setEditItemForm({ ...selectedItem });
+    setEditItemOpen(true);
+  };
+
+  const handleEditSave = async () => {
+    if (!editItemForm.id) return;
+    setSaving(true);
+    try {
+      await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
+        originalData: { id: editItemForm.id },
+        updatedData: {
+          selling_price: editItemForm.selling_price || null,
+          standard_price: editItemForm.standard_price || null,
+          currency_code: editItemForm.currency_code || null,
+        },
+      });
+      toast.success("수정되었습니다.");
+      setEditItemOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "수정에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 우측: 거래처 매핑 삭제
+  const handleCustomerMappingDelete = async () => {
+    if (customerCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${customerCheckedIds.length}개 거래처 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      // 관련 단가 삭제
+      for (const mappingId of customerCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/customer_item_prices/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      // 매핑 삭제
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: customerCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${customerCheckedIds.length}개 거래처 매핑이 삭제되었습니다.`);
+      setCustomerCheckedIds([]);
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) return;
+    const data = items.map((i) => ({
+      품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
+      기준단가: i.standard_price, 판매가격: i.selling_price, 통화: i.currency_code, 상태: i.status,
+    }));
+    await exportToExcel(data, "판매품목정보.xlsx", "판매품목");
+    toast.success("다운로드 완료");
+  };
+
+  // EDataTable 컬럼 정의 (판매품목)
+  const itemColumns: EDataTableColumn[] = [
+    { key: "item_number", label: "품번", width: "w-[110px]" },
+    { key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
+    { key: "size", label: "규격", width: "w-[80px]" },
+    { key: "unit", label: "단위", width: "w-[60px]" },
+    { key: "standard_price", label: "기준단가", width: "w-[90px]", align: "right", formatNumber: true },
+    { key: "selling_price", label: "판매가격", width: "w-[90px]", align: "right", formatNumber: true },
+    { key: "currency_code", label: "통화", width: "w-[50px]" },
+    { key: "status", label: "상태", width: "w-[60px]" },
+  ];
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ITEM_TABLE}
+        filterId="c16-sales-item"
+        onFilterChange={setSearchFilters}
+        dataCount={items.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" />
+            엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+
+          {/* 좌측: 판매품목 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">판매품목 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {itemCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={itemColumns}
+                data={ts.groupData(items)}
+                rowKey={(row) => row.id}
+                loading={itemLoading}
+                emptyMessage="등록된 판매품목이 없어요"
+                selectedId={selectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
+                onRowDoubleClick={() => openEditItem()}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-sales-item"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedItemId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Package className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">품목을 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 품목을 선택하면 상세 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 거래처별 단가 헤더 */}
+                  <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                    <div className="flex items-center gap-2.5 px-4">
+                      <Users className="w-3.5 h-3.5 text-muted-foreground" />
+                      <span className="text-xs font-semibold">거래처별 단가</span>
+                      {customerItems.length > 0 && (
+                        <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{customerItems.length}</Badge>
+                      )}
+                    </div>
+                    <div className="flex gap-1.5">
+                      <Button
+                        size="sm"
+                        onClick={() => { setCustCheckedIds(new Set()); setCustSelectOpen(true); searchCustomers(); }}
+                      >
+                        <Plus className="w-3.5 h-3.5" /> 거래처 추가
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={customerCheckedIds.length === 0}
+                        onClick={handleCustomerMappingDelete}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" /> 삭제
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 거래처 테이블 */}
+                  <div className="flex-1 min-h-0 overflow-auto pt-px">
+                    {customerLoading ? (
+                      <div className="flex items-center justify-center h-full">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : customerItems.length === 0 ? (
+                      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+                        등록된 거래처가 없어요
+                      </div>
+                    ) : (
+                      <Table noWrapper>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted h-10">
+                            <TableHead className="w-[40px] text-center px-2">
+                              <Checkbox
+                                checked={customerItems.length > 0 && customerCheckedIds.length === customerItems.length}
+                                onCheckedChange={(checked) => {
+                                  if (checked === true) setCustomerCheckedIds(customerItems.map((c) => c.id));
+                                  else setCustomerCheckedIds([]);
+                                }}
+                              />
+                            </TableHead>
+                            <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처코드</TableHead>
+                            <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품번</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품명</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {customerItems.map((row) => (
+                            <TableRow
+                              key={row.id}
+                              className={cn(
+                                "cursor-pointer h-[41px]",
+                                customerCheckedIds.includes(row.id) ? "bg-primary/[0.08]" : "hover:bg-accent"
+                              )}
+                              onClick={() => {
+                                setCustomerCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                              onDoubleClick={() => openEditCust(row)}
+                            >
+                              <TableCell className="text-center px-2">
+                                <Checkbox
+                                  checked={customerCheckedIds.includes(row.id)}
+                                  onCheckedChange={() => {}}
+                                />
+                              </TableCell>
+                              <TableCell className="text-[13px] font-mono text-muted-foreground">{row.customer_code}</TableCell>
+                              <TableCell className="text-sm text-foreground">{row.customer_name}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.customer_item_code}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.customer_item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right font-mono text-muted-foreground">{formatNum(row.base_price)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-mono text-foreground font-semibold">{formatNum(row.calculated_price)}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.currency_code}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 품목 수정 모달 ── */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>판매품목 수정</DialogTitle>
+            <DialogDescription>
+              {editItemForm.item_number || ""} — {editItemForm.item_name || ""}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {/* 품목 기본정보 (읽기 전용) */}
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+
+            <div className="col-span-2 border-t my-1" />
+
+            {/* 판매 설정 (수정 가능) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">판매가격</Label>
+              <Input
+                value={editItemForm.selling_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
+                placeholder="판매가격을 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">기준단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">통화</Label>
+              <Select
+                value={editItemForm.currency_code || ""}
+                onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="통화를 선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 거래처 검색 및 추가 모달 ── */}
+      <Dialog open={custSelectOpen} onOpenChange={setCustSelectOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>거래처 검색 및 추가</DialogTitle>
+            <DialogDescription>품목에 추가할 거래처를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 py-2">
+            {/* 검색바 */}
+            <div className="flex gap-2">
+              <Input
+                placeholder="거래처명으로 검색해주세요"
+                value={custSearchKeyword}
+                onChange={(e) => setCustSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchCustomers()}
+                className="h-9 flex-1"
+              />
+              <Button size="sm" onClick={searchCustomers} disabled={custSearchLoading} className="h-9">
+                {custSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
+              </Button>
+            </div>
+            {/* 검색 결과 테이블 */}
+            <div className="overflow-auto max-h-[350px] border rounded-lg">
+              <Table noWrapper>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="sticky top-0 bg-card w-[40px] text-center">
+                      <Checkbox
+                        checked={custSearchResults.length > 0 && custCheckedIds.size === custSearchResults.length}
+                        onCheckedChange={(checked) => {
+                          if (checked === true) setCustCheckedIds(new Set(custSearchResults.map((c) => c.id)));
+                          else setCustCheckedIds(new Set());
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[110px]">거래처코드</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[130px]">거래처명</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">거래유형</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">담당자</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {custSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : custSearchResults.map((c) => (
+                    <TableRow
+                      key={c.id}
+                      className={cn("cursor-pointer", custCheckedIds.has(c.id) && "bg-primary/[0.08]")}
+                      onClick={() => setCustCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <Checkbox
+                          checked={custCheckedIds.has(c.id)}
+                          onCheckedChange={(checked) => {
+                            setCustCheckedIds((prev) => {
+                              const next = new Set(prev);
+                              if (checked === true) next.add(c.id); else next.delete(c.id);
+                              return next;
+                            });
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell className="text-[13px] font-mono text-muted-foreground">{c.customer_code}</TableCell>
+                      <TableCell className="text-sm font-medium text-foreground">{c.customer_name}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.division}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.contact_person}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{custCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setCustSelectOpen(false)}>취소</Button>
+                <Button onClick={goToCustDetail} disabled={custCheckedIds.size === 0}>
+                  <Plus className="w-4 h-4" />
+                  {custCheckedIds.size}개 다음
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 거래처 상세 입력/수정 모달 ── */}
+      <Dialog open={custDetailOpen} onOpenChange={setCustDetailOpen}>
+        <DialogContent className="max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              거래처 상세정보 {editCustData ? "수정" : "입력"} — {selectedItem?.item_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editCustData ? "거래처 품번/품명과 기간별 단가를 수정해주세요." : "선택한 거래처의 품번/품명과 기간별 단가를 설정해주세요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-6 py-2">
+            {selectedCustsForDetail.map((cust, idx) => {
+              const custKey = cust.customer_code || cust.id;
+              const mappingRows = custMappings[custKey] || [];
+              const prices = custPrices[custKey] || [];
+
+              return (
+                <div key={custKey} className="border rounded-lg overflow-hidden">
+                  {/* 거래처 헤더 */}
+                  <div className="flex items-center gap-2.5 px-4 py-3 bg-muted border-b">
+                    <span className="text-[13px] font-bold text-foreground">{idx + 1}. {cust.customer_name || custKey}</span>
+                    <span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">
+                      {custKey}
+                    </span>
+                  </div>
+
+                  <div className="flex gap-4 p-4 bg-card">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/50">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">거래처 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.customer_item_code}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_code", e.target.value)}
+                              placeholder="거래처 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.customer_item_name}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_name", e.target.value)}
+                              placeholder="거래처 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button
+                              variant="ghost" size="sm"
+                              className="h-7 w-7 p-0 text-destructive shrink-0"
+                              onClick={() => removeMappingRow(custKey, mRow._id)}
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/30">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button
+                                  variant="ghost" size="sm"
+                                  className="h-6 w-6 p-0 text-destructive"
+                                  onClick={() => removePriceRow(custKey, price._id)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="통화" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "base_price", raw);
+                                }}
+                                className="h-8 text-xs text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-8 text-xs text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm text-foreground">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setCustDetailOpen(false);
+                if (!editCustData) setCustSelectOpen(true);
+                setEditCustData(null);
+              }}
+            >
+              {editCustData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleCustDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={ITEM_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchItems()}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/sales/shipping-order/page.tsx b/frontend/app/(main)/COMPANY_8/sales/shipping-order/page.tsx
new file mode 100644
index 00000000..2ed29b40
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/sales/shipping-order/page.tsx
@@ -0,0 +1,928 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Plus, Trash2, Save, X, ChevronDown, ChevronRight, ChevronLeft, ChevronsLeft, ChevronsRight, Search, Loader2, FileSpreadsheet, Inbox, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  getShippingOrderList,
+  saveShippingOrder,
+  deleteShippingOrders,
+  previewShippingOrderNo,
+  getShipmentPlanSource,
+  getSalesOrderSource,
+  getItemSource,
+} from "@/lib/api/shipping";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "instruction_no", label: "출하지시번호" },
+  { key: "ship_date", label: "출하일자" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "transport_company", label: "운송업체" },
+  { key: "vehicle_no", label: "차량번호" },
+  { key: "driver_name", label: "기사명" },
+  { key: "status", label: "상태" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "qty", label: "수량" },
+  { key: "source_type", label: "소스" },
+  { key: "remark", label: "비고" },
+];
+
+type DataSourceType = "shipmentPlan" | "salesOrder" | "itemInfo";
+
+const STATUS_OPTIONS = [
+  { value: "all", label: "전체" },
+  { value: "READY", label: "준비중" },
+  { value: "IN_PROGRESS", label: "진행중" },
+  { value: "COMPLETED", label: "완료" },
+];
+
+const getStatusLabel = (s: string) => STATUS_OPTIONS.find(o => o.value === s)?.label || s;
+
+const getStatusColor = (s: string) => {
+  switch (s) {
+    case "READY": return "bg-warning/10 text-warning";
+    case "IN_PROGRESS": return "bg-primary/10 text-primary";
+    case "COMPLETED": return "bg-success/10 text-success";
+    default: return "bg-muted text-muted-foreground";
+  }
+};
+
+const getSourceBadge = (s: string) => {
+  switch (s) {
+    case "shipmentPlan": return { label: "출하계획", cls: "bg-primary/10 text-primary" };
+    case "salesOrder": return { label: "수주", cls: "bg-success/10 text-success" };
+    case "itemInfo": return { label: "품목", cls: "bg-secondary text-secondary-foreground" };
+    default: return { label: s, cls: "bg-muted text-muted-foreground" };
+  }
+};
+
+interface SelectedItem {
+  id: string | number;
+  itemCode: string;
+  itemName: string;
+  spec: string;
+  material: string;
+  customer: string;
+  planQty: number;
+  orderQty: number;
+  sourceType: DataSourceType;
+  shipmentPlanId?: number;
+  salesOrderId?: number;
+  detailId?: string;
+  partnerCode?: string;
+}
+
+export default function ShippingOrderPage() {
+  const ts = useTableSettings("c16-shipping-order", "shipment_instruction", GRID_COLUMNS);
+  const [orders, setOrders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [checkedIds, setCheckedIds] = useState<number[]>([]);
+  const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 엑셀 업로드
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editId, setEditId] = useState<number | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  // 모달 폼
+  const [formOrderNumber, setFormOrderNumber] = useState("");
+  const [formOrderDate, setFormOrderDate] = useState("");
+  const [formCustomer, setFormCustomer] = useState("");
+  const [formPartnerId, setFormPartnerId] = useState("");
+  const [formStatus, setFormStatus] = useState("READY");
+  const [formCarrier, setFormCarrier] = useState("");
+  const [formVehicle, setFormVehicle] = useState("");
+  const [formDriver, setFormDriver] = useState("");
+  const [formDriverPhone, setFormDriverPhone] = useState("");
+  const [formArrival, setFormArrival] = useState("");
+  const [formAddress, setFormAddress] = useState("");
+  const [formMemo, setFormMemo] = useState("");
+  const [isTransportCollapsed, setIsTransportCollapsed] = useState(false);
+
+  // 모달 왼쪽 패널
+  const [dataSource, setDataSource] = useState<DataSourceType>("shipmentPlan");
+  const [sourceKeyword, setSourceKeyword] = useState("");
+  const [sourceData, setSourceData] = useState<any[]>([]);
+  const [sourceLoading, setSourceLoading] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<SelectedItem[]>([]);
+  const [sourcePage, setSourcePage] = useState(1);
+  const [sourcePageSize, setSourcePageSize] = useState(20);
+  const [sourceTotalCount, setSourceTotalCount] = useState(0);
+
+
+  // 데이터 조회
+  const fetchOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: any = {};
+      for (const f of searchFilters) {
+        if (f.columnName === "ship_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split(",");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status") {
+          params.status = f.value;
+        } else if (f.columnName === "customer_name") {
+          params.customer = f.value;
+        } else {
+          params.keyword = f.value;
+        }
+      }
+
+      const result = await getShippingOrderList(params);
+      if (result.success) setOrders(result.data || []);
+    } catch (err) {
+      console.error("출하지시 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  // 소스 데이터 조회
+  const fetchSourceData = useCallback(async (pageOverride?: number) => {
+    setSourceLoading(true);
+    try {
+      const currentPage = pageOverride ?? sourcePage;
+      const params: any = { page: currentPage, pageSize: sourcePageSize };
+      if (sourceKeyword.trim()) params.keyword = sourceKeyword.trim();
+
+      let result;
+      switch (dataSource) {
+        case "shipmentPlan":
+          result = await getShipmentPlanSource(params);
+          break;
+        case "salesOrder":
+          result = await getSalesOrderSource(params);
+          break;
+        case "itemInfo":
+          result = await getItemSource(params);
+          break;
+      }
+      if (result?.success) {
+        setSourceData(result.data || []);
+        setSourceTotalCount(result.totalCount || 0);
+      }
+    } catch (err) {
+      console.error("소스 데이터 조회 실패:", err);
+    } finally {
+      setSourceLoading(false);
+    }
+  }, [dataSource, sourceKeyword, sourcePage, sourcePageSize]);
+
+  useEffect(() => {
+    if (isModalOpen) {
+      setSourcePage(1);
+      fetchSourceData(1);
+    }
+  }, [isModalOpen, dataSource]);
+
+  const handleDeleteSelected = async () => {
+    if (checkedIds.length === 0) return;
+    if (!confirm(`선택한 ${checkedIds.length}개의 출하지시를 삭제하시겠습니까?`)) return;
+    try {
+      const result = await deleteShippingOrders(checkedIds);
+      if (result.success) {
+        setCheckedIds([]);
+        fetchOrders();
+        alert("삭제되었어요.");
+      }
+    } catch (err: any) {
+      alert(err.message || "삭제 실패");
+    }
+  };
+
+  // 모달 열기
+  const openModal = (order?: any) => {
+    if (order) {
+      setIsEditMode(true);
+      setEditId(order.id);
+      setFormOrderNumber(order.instruction_no || "");
+      setFormOrderDate(order.instruction_date ? order.instruction_date.split("T")[0] : "");
+      setFormCustomer(order.customer_name || "");
+      setFormPartnerId(order.partner_id || "");
+      setFormStatus(order.status || "READY");
+      setFormCarrier(order.carrier_name || "");
+      setFormVehicle(order.vehicle_no || "");
+      setFormDriver(order.driver_name || "");
+      setFormDriverPhone(order.driver_contact || "");
+      setFormArrival(order.arrival_time ? new Date(order.arrival_time).toLocaleString("sv-SE", { timeZone: "Asia/Seoul" }).replace(" ", "T").slice(0, 16) : "");
+      setFormAddress(order.delivery_address || "");
+      setFormMemo(order.memo || "");
+
+      const items = order.items || [];
+      setSelectedItems(items.filter((it: any) => it.id).map((it: any) => {
+        const srcType = it.source_type || "shipmentPlan";
+        let sourceId: string | number = it.id;
+        if (srcType === "shipmentPlan" && it.shipment_plan_id) sourceId = it.shipment_plan_id;
+        else if (srcType === "salesOrder" && it.detail_id) sourceId = it.detail_id;
+        else if (srcType === "itemInfo") sourceId = it.item_code || "";
+
+        return {
+          id: sourceId,
+          itemCode: it.item_code || "",
+          itemName: it.item_name || "",
+          spec: it.spec || "",
+          material: it.material || "",
+          customer: order.customer_name || "",
+          planQty: Number(it.plan_qty || 0),
+          orderQty: Number(it.order_qty || 0),
+          sourceType: srcType,
+          shipmentPlanId: it.shipment_plan_id,
+          salesOrderId: it.sales_order_id,
+          detailId: it.detail_id,
+          partnerCode: order.partner_id,
+        };
+      }));
+    } else {
+      setIsEditMode(false);
+      setEditId(null);
+      setFormOrderNumber("불러오는 중...");
+      setFormOrderDate(new Date().toISOString().split("T")[0]);
+      previewShippingOrderNo().then(r => {
+        if (r.success) setFormOrderNumber(r.instructionNo);
+        else setFormOrderNumber("(자동생성)");
+      }).catch(() => setFormOrderNumber("(자동생성)"));
+      setFormCustomer("");
+      setFormPartnerId("");
+      setFormStatus("READY");
+      setFormCarrier("");
+      setFormVehicle("");
+      setFormDriver("");
+      setFormDriverPhone("");
+      setFormArrival("");
+      setFormAddress("");
+      setFormMemo("");
+      setSelectedItems([]);
+    }
+    setDataSource("shipmentPlan");
+    setSourceKeyword("");
+    setSourceData([]);
+    setIsTransportCollapsed(false);
+    setIsModalOpen(true);
+  };
+
+  // 소스 아이템 선택 토글
+  const toggleSourceItem = (item: any) => {
+    const key = dataSource === "shipmentPlan" ? item.id
+      : dataSource === "salesOrder" ? item.id
+      : item.item_code;
+
+    const exists = selectedItems.findIndex(s => {
+      if (s.sourceType === dataSource) {
+        if (dataSource === "itemInfo") return s.itemCode === key;
+        return String(s.id) === String(key);
+      }
+      if (dataSource === "shipmentPlan" && s.shipmentPlanId) return String(s.shipmentPlanId) === String(item.id);
+      if (dataSource === "salesOrder" && s.detailId) return String(s.detailId) === String(item.id);
+      return false;
+    });
+
+    if (exists > -1) {
+      setSelectedItems(prev => prev.filter((_, i) => i !== exists));
+    } else {
+      const newItem: SelectedItem = {
+        id: key,
+        itemCode: item.item_code || "",
+        itemName: item.item_name || "",
+        spec: item.spec || "",
+        material: item.material || "",
+        customer: item.customer_name || "",
+        planQty: Number(item.plan_qty || item.qty || item.balance_qty || 0),
+        orderQty: Number(item.plan_qty || item.balance_qty || item.qty || 1),
+        sourceType: dataSource,
+        shipmentPlanId: dataSource === "shipmentPlan" ? item.id : undefined,
+        salesOrderId: dataSource === "salesOrder" ? (item.master_id || undefined) : undefined,
+        detailId: dataSource === "salesOrder" ? item.id : (dataSource === "shipmentPlan" ? item.detail_id : undefined),
+        partnerCode: item.partner_code || "",
+      };
+      setSelectedItems(prev => [...prev, newItem]);
+
+      if (!formCustomer && item.customer_name) {
+        setFormCustomer(item.customer_name);
+        setFormPartnerId(item.partner_code || "");
+      }
+    }
+  };
+
+  const removeSelectedItem = (idx: number) => {
+    setSelectedItems(prev => prev.filter((_, i) => i !== idx));
+  };
+
+  const updateOrderQty = (idx: number, val: number) => {
+    setSelectedItems(prev => prev.map((item, i) => i === idx ? { ...item, orderQty: val } : item));
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (!formOrderDate) { alert("출하지시일을 입력해주세요."); return; }
+    if (selectedItems.length === 0) { alert("품목을 선택해주세요."); return; }
+
+    setSaving(true);
+    try {
+      const payload = {
+        id: isEditMode ? editId : undefined,
+        instructionDate: formOrderDate,
+        partnerId: formPartnerId || formCustomer,
+        status: formStatus,
+        memo: formMemo,
+        carrierName: formCarrier,
+        vehicleNo: formVehicle,
+        driverName: formDriver,
+        driverContact: formDriverPhone,
+        arrivalTime: formArrival ? `${formArrival}+09:00` : null,
+        deliveryAddress: formAddress,
+        items: selectedItems.map(item => ({
+          itemCode: item.itemCode,
+          itemName: item.itemName,
+          spec: item.spec,
+          material: item.material,
+          orderQty: item.orderQty,
+          planQty: item.orderQty,
+          shipQty: 0,
+          sourceType: item.sourceType,
+          shipmentPlanId: item.shipmentPlanId,
+          salesOrderId: item.salesOrderId,
+          detailId: item.detailId,
+        })),
+      };
+
+      const result = await saveShippingOrder(payload);
+      if (result.success) {
+        setIsModalOpen(false);
+        fetchOrders();
+        alert(isEditMode ? "출하지시가 수정되었어요." : "출하지시가 등록되었어요.");
+      } else {
+        alert(result.message || "저장 실패");
+      }
+    } catch (err: any) {
+      alert(err.message || "저장 중 오류 발생");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const formatDate = (d: string) => d ? d.split("T")[0] : "-";
+
+  // 출하지시 데이터를 플랫한 행 목록으로 변환 (EDataTable용)
+  const flattenedOrders = useMemo(() => {
+    const rows: any[] = [];
+    for (const order of orders) {
+      const items = Array.isArray(order.items) ? order.items.filter((it: any) => it.id) : [];
+      if (items.length === 0) {
+        rows.push({
+          _rowId: String(order.id),
+          _orderId: order.id,
+          _order: order,
+          instruction_no: order.instruction_no,
+          ship_date: formatDate(order.instruction_date),
+          customer_name: order.customer_name || "-",
+          transport_company: order.carrier_name || "-",
+          vehicle_no: order.vehicle_no || "-",
+          driver_name: order.driver_name || "-",
+          status: order.status,
+          item_code: "-",
+          item_name: "-",
+          qty: 0,
+          source_type: "-",
+          remark: order.memo || "-",
+        });
+      } else {
+        items.forEach((item: any, idx: number) => {
+          rows.push({
+            _rowId: `${order.id}-${item.id}`,
+            _orderId: order.id,
+            _order: order,
+            instruction_no: idx === 0 ? order.instruction_no : "",
+            ship_date: idx === 0 ? formatDate(order.instruction_date) : "",
+            customer_name: idx === 0 ? (order.customer_name || "-") : "",
+            transport_company: idx === 0 ? (order.carrier_name || "-") : "",
+            vehicle_no: idx === 0 ? (order.vehicle_no || "-") : "",
+            driver_name: idx === 0 ? (order.driver_name || "-") : "",
+            status: idx === 0 ? order.status : "",
+            item_code: item.item_code || "",
+            item_name: item.item_name || "",
+            qty: Number(item.order_qty || 0),
+            source_type: item.source_type || "",
+            remark: idx === 0 ? (order.memo || "-") : "",
+          });
+        });
+      }
+    }
+    return rows;
+  }, [orders]);
+
+  // checkedIds를 order.id 기준으로 관리하므로 _orderId로 매핑
+  const flatCheckedRowIds = useMemo(() => {
+    return flattenedOrders
+      .filter((r) => checkedIds.includes(r._orderId))
+      .map((r) => r._rowId);
+  }, [flattenedOrders, checkedIds]);
+
+  const handleFlatCheckedChange = useCallback((rowIds: string[]) => {
+    const orderIds = new Set<number>();
+    for (const rowId of rowIds) {
+      const row = flattenedOrders.find((r) => r._rowId === rowId);
+      if (row) orderIds.add(row._orderId);
+    }
+    setCheckedIds(Array.from(orderIds));
+  }, [flattenedOrders]);
+
+  const dataSourceTitle: Record<DataSourceType, string> = {
+    shipmentPlan: "출하계획 목록",
+    salesOrder: "수주정보 목록",
+    itemInfo: "품목정보 목록",
+  };
+
+  return (
+    <div className="flex flex-col h-full p-4 gap-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>영업관리</span>
+        <span className="text-muted-foreground/40">/</span>
+        <span className="font-semibold text-foreground">출하지시</span>
+      </nav>
+
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ts.tableName}
+        filterId="c16-shipping-order"
+        onFilterChange={setSearchFilters}
+        dataCount={orders.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between flex-wrap gap-3 shrink-0">
+        <div className="flex items-center gap-2">
+          <h2 className="text-[15px] font-bold text-foreground">출하지시 관리</h2>
+          <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+            {orders.length}건
+          </span>
+          {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5" />
+            엑셀 업로드
+          </Button>
+          <Button size="sm" onClick={() => openModal()}>
+            <Plus className="w-3.5 h-3.5" />
+            출하지시 등록
+          </Button>
+          <div className="w-px h-5 bg-border" />
+          <Button
+            variant="outline"
+            size="sm"
+            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+            disabled={checkedIds.length === 0}
+            onClick={handleDeleteSelected}
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+            선택삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
+          </Button>
+          <div className="w-px h-5 bg-border" />
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 메인 테이블 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card flex flex-col">
+        <EDataTable
+          columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+            key: col.key,
+            label: col.label,
+            align: col.key === "qty" ? "right" : col.key === "status" || col.key === "source_type" || col.key === "ship_date" ? "center" : undefined,
+            formatNumber: col.key === "qty",
+            sortable: false,
+            filterable: false,
+            render: col.key === "status"
+              ? (val: any) => val ? (
+                  <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(val))}>
+                    {getStatusLabel(val)}
+                  </span>
+                ) : null
+              : col.key === "source_type"
+              ? (val: any) => {
+                  if (!val || val === "-") return <span>-</span>;
+                  const b = getSourceBadge(val);
+                  return <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", b.cls)}>{b.label}</span>;
+                }
+              : undefined,
+          }))}
+          data={ts.groupData(flattenedOrders)}
+          rowKey={(row) => row._rowId}
+          loading={loading}
+          emptyMessage="등록된 출하지시가 없어요"
+          showCheckbox
+          checkedIds={flatCheckedRowIds}
+          onCheckedChange={handleFlatCheckedChange}
+          selectedId={selectedOrderId != null ? String(selectedOrderId) : null}
+          onRowClick={(row) => setSelectedOrderId(row._orderId)}
+          onRowDoubleClick={(row) => openModal(row._order)}
+          showPagination
+          draggableColumns={false}
+          columnOrderKey="c16-shipping-order"
+        />
+      </div>
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[90vw] w-[1400px] h-[90vh] flex flex-col overflow-hidden p-0 gap-0">
+          <DialogHeader className="px-4 py-3 border-b shrink-0">
+            <DialogTitle className="text-[15px] font-bold">
+              {isEditMode ? "출하지시 수정" : "출하지시 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-xs text-muted-foreground mt-0.5">
+              {isEditMode ? "출하지시 정보를 수정해요." : "왼쪽에서 데이터를 선택하고 오른쪽에서 출하지시 정보를 입력해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-hidden">
+            <ResizablePanelGroup direction="horizontal">
+              {/* 왼쪽: 데이터 소스 */}
+              <ResizablePanel defaultSize={55} minSize={30}>
+                <div className="flex flex-col h-full">
+                  {/* 소스 검색 헤더 */}
+                  <div className="px-4 py-2 border-b bg-muted/50 flex flex-wrap items-center gap-2 shrink-0">
+                    <Select value={dataSource} onValueChange={(v) => setDataSource(v as DataSourceType)}>
+                      <SelectTrigger className="w-[120px] h-9 text-xs"><SelectValue /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="shipmentPlan">출하계획</SelectItem>
+                        <SelectItem value="salesOrder">수주정보</SelectItem>
+                        <SelectItem value="itemInfo">품목정보</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <Input
+                      placeholder="품번, 품명 검색"
+                      className="flex-1 h-9 text-xs min-w-[120px]"
+                      value={sourceKeyword}
+                      onChange={(e) => setSourceKeyword(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") { setSourcePage(1); fetchSourceData(1); }
+                      }}
+                    />
+                    <Button
+                      size="sm"
+                      className="h-8 text-xs"
+                      onClick={() => { setSourcePage(1); fetchSourceData(1); }}
+                      disabled={sourceLoading}
+                    >
+                      {sourceLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Search className="w-3 h-3" />}
+                      <span className="ml-1">조회</span>
+                    </Button>
+                  </div>
+
+                  {/* 소스 서브 헤더 */}
+                  <div className="px-3 py-1.5 flex items-center gap-2 border-b bg-muted/30 shrink-0">
+                    <span className="text-[13px] font-bold text-foreground">{dataSourceTitle[dataSource]}</span>
+                    <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                      선택 {selectedItems.length}개
+                    </span>
+                  </div>
+
+                  {/* 소스 테이블 */}
+                  <div className="flex-1 overflow-auto">
+                    {sourceLoading ? (
+                      <div className="flex items-center justify-center py-12">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : sourceData.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                        <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
+                          <Search className="w-5 h-5 text-muted-foreground/30" />
+                        </div>
+                        <p className="text-sm">조회 버튼을 눌러 데이터를 불러와주세요</p>
+                      </div>
+                    ) : (
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">선택</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                            <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처</TableHead>
+                            <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                            {dataSource === "shipmentPlan" && <TableHead className="w-[70px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {sourceData.map((item: any, idx: number) => {
+                            const itemId = dataSource === "itemInfo" ? item.item_code : item.id;
+                            const isSelected = selectedItems.some(s => {
+                              if (s.sourceType === dataSource) {
+                                if (dataSource === "itemInfo") return s.itemCode === itemId;
+                                return String(s.id) === String(itemId);
+                              }
+                              if (dataSource === "shipmentPlan" && s.shipmentPlanId) return String(s.shipmentPlanId) === String(item.id);
+                              if (dataSource === "salesOrder" && s.detailId) return String(s.detailId) === String(item.id);
+                              return false;
+                            });
+                            return (
+                              <TableRow
+                                key={`${dataSource}-${itemId}-${idx}`}
+                                className={cn("cursor-pointer transition-colors", isSelected && "bg-primary/5")}
+                                onClick={() => toggleSourceItem(item)}
+                              >
+                                <TableCell className="text-center" onClick={e => e.stopPropagation()}>
+                                  <Checkbox checked={isSelected} onCheckedChange={() => toggleSourceItem(item)} />
+                                </TableCell>
+                                <TableCell className="text-[13px]">{item.item_code || "-"}</TableCell>
+                                <TableCell className="text-sm font-medium">{item.item_name || "-"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{item.spec || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{item.customer_name || "-"}</TableCell>
+                                <TableCell className="text-right text-[13px]">
+                                  {Number(item.plan_qty || item.qty || item.balance_qty || 0).toLocaleString()}
+                                </TableCell>
+                                {dataSource === "shipmentPlan" && (
+                                  <TableCell className="text-center">
+                                    <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", getStatusColor(item.status))}>
+                                      {getStatusLabel(item.status)}
+                                    </span>
+                                  </TableCell>
+                                )}
+                              </TableRow>
+                            );
+                          })}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+
+                  {/* 페이징 */}
+                  {sourceTotalCount > 0 && (
+                    <div className="px-3 py-1.5 border-t bg-muted/30 flex items-center justify-between shrink-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-muted-foreground text-[11px]">표시:</span>
+                        <Input
+                          type="number"
+                          min={1}
+                          max={500}
+                          value={sourcePageSize}
+                          onChange={(e) => {
+                            const v = parseInt(e.target.value, 10);
+                            if (v > 0) { setSourcePageSize(v); setSourcePage(1); fetchSourceData(1); }
+                          }}
+                          className="h-7 w-[60px] text-center text-[11px]"
+                        />
+                        <span className="text-muted-foreground text-[11px]">총 {sourceTotalCount}건</span>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => { setSourcePage(1); fetchSourceData(1); }}>
+                          <ChevronsLeft className="w-3.5 h-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => { const p = sourcePage - 1; setSourcePage(p); fetchSourceData(p); }}>
+                          <ChevronLeft className="w-3.5 h-3.5" />
+                        </Button>
+                        <span className="text-xs font-medium px-2">
+                          {sourcePage} / {Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize))}
+                        </span>
+                        <Button variant="outline" size="icon" className="h-7 w-7"
+                          disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                          onClick={() => { const p = sourcePage + 1; setSourcePage(p); fetchSourceData(p); }}>
+                          <ChevronRight className="w-3.5 h-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7"
+                          disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                          onClick={() => { const p = Math.ceil(sourceTotalCount / sourcePageSize); setSourcePage(p); fetchSourceData(p); }}>
+                          <ChevronsRight className="w-3.5 h-3.5" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle onPointerDown={(e) => e.stopPropagation()} />
+
+              {/* 오른쪽: 폼 */}
+              <ResizablePanel defaultSize={45} minSize={30}>
+                <div className="flex flex-col h-full overflow-auto p-4 gap-4">
+                  {/* 기본 정보 */}
+                  <div className="border rounded-lg p-4 shrink-0">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-3">기본 정보</p>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">출하지시번호</Label>
+                        <Input value={formOrderNumber} readOnly className="h-9 bg-muted/50 text-muted-foreground" />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">
+                          출하지시일 <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                          type="date"
+                          className="h-9"
+                          value={formOrderDate}
+                          onChange={(e) => setFormOrderDate(e.target.value)}
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">거래처</Label>
+                        <Input value={formCustomer} readOnly placeholder="품목 선택 시 자동" className="h-9 bg-muted/50" />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+                        <Select value={formStatus} onValueChange={setFormStatus}>
+                          <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="READY">준비중</SelectItem>
+                            <SelectItem value="IN_PROGRESS">진행중</SelectItem>
+                            <SelectItem value="COMPLETED">완료</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 운송 정보 */}
+                  <div className="bg-muted/50 border rounded-lg overflow-hidden shrink-0">
+                    <button
+                      className="w-full px-4 py-2.5 flex items-center justify-between text-left"
+                      onClick={() => setIsTransportCollapsed(!isTransportCollapsed)}
+                    >
+                      <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2">
+                        운송 정보 <span className="text-[10px] font-normal">(선택사항)</span>
+                      </p>
+                      {isTransportCollapsed
+                        ? <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />
+                        : <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+                      }
+                    </button>
+                    {!isTransportCollapsed && (
+                      <div className="px-4 pb-3 grid grid-cols-3 gap-3">
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">운송업체</Label>
+                          <Input value={formCarrier} onChange={(e) => setFormCarrier(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">차량번호</Label>
+                          <Input value={formVehicle} onChange={(e) => setFormVehicle(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">기사명</Label>
+                          <Input value={formDriver} onChange={(e) => setFormDriver(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">연락처</Label>
+                          <Input value={formDriverPhone} onChange={(e) => setFormDriverPhone(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">도착예정일시</Label>
+                          <Input
+                            type="datetime-local"
+                            className="h-9"
+                            value={formArrival}
+                            onChange={(e) => setFormArrival(e.target.value)}
+                          />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">배송지</Label>
+                          <Input value={formAddress} onChange={(e) => setFormAddress(e.target.value)} className="h-9" />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 선택된 품목 */}
+                  <div className="border rounded-lg p-4 flex-1 flex flex-col min-h-[200px]">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-2 flex items-center gap-2">
+                      선택된 품목
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {selectedItems.length}
+                      </span>
+                    </p>
+                    <div className="flex-1 overflow-auto min-h-0">
+                      {selectedItems.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground border-2 border-dashed rounded-lg gap-2">
+                          <div className="w-10 h-10 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
+                            <Inbox className="w-4 h-4 text-muted-foreground/30" />
+                          </div>
+                          <p className="text-sm">왼쪽에서 데이터를 선택해주세요</p>
+                        </div>
+                      ) : (
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">소스</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                              <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[90px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하수량</TableHead>
+                              <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획수량</TableHead>
+                              <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">삭제</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {selectedItems.map((item, idx) => {
+                              const b = getSourceBadge(item.sourceType);
+                              return (
+                                <TableRow key={`${item.sourceType}-${item.id}-${idx}`}>
+                                  <TableCell className="text-center">
+                                    <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", b.cls)}>
+                                      {b.label.charAt(0)}
+                                    </span>
+                                  </TableCell>
+                                  <TableCell className="text-[13px]">{item.itemCode}</TableCell>
+                                  <TableCell className="text-sm font-medium">{item.itemName}</TableCell>
+                                  <TableCell className="text-center">
+                                    <Input
+                                      type="number"
+                                      value={item.orderQty}
+                                      onChange={(e) => updateOrderQty(idx, parseInt(e.target.value) || 0)}
+                                      min={1}
+                                      className="h-7 w-[70px] text-xs text-right mx-auto"
+                                    />
+                                  </TableCell>
+                                  <TableCell className="text-right text-[13px]">
+                                    {item.planQty ? item.planQty.toLocaleString() : "-"}
+                                  </TableCell>
+                                  <TableCell className="text-center">
+                                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => removeSelectedItem(idx)}>
+                                      <X className="w-3.5 h-3.5 text-destructive" />
+                                    </Button>
+                                  </TableCell>
+                                </TableRow>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* 메모 */}
+                  <div className="border rounded-lg p-4 shrink-0">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-2">메모</p>
+                    <Textarea
+                      value={formMemo}
+                      onChange={(e) => setFormMemo(e.target.value)}
+                      placeholder="출하지시 관련 메모를 입력해주세요"
+                      rows={2}
+                      className="resize-y"
+                    />
+                  </div>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+
+          {/* 모달 하단 버튼 */}
+          <div className="flex items-center justify-end gap-2 px-4 py-3 border-t shrink-0">
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 모달 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName="shipping-order"
+        onSuccess={() => { fetchOrders(); }}
+      />
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_8/sales/shipping-plan/page.tsx b/frontend/app/(main)/COMPANY_8/sales/shipping-plan/page.tsx
new file mode 100644
index 00000000..747ac23d
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_8/sales/shipping-plan/page.tsx
@@ -0,0 +1,454 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { X, Save, Loader2, Inbox, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  getShipmentPlanList,
+  updateShipmentPlan,
+  type ShipmentPlanListItem,
+} from "@/lib/api/shipping";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "order_no", label: "수주번호" },
+  { key: "due_date", label: "납기일" },
+  { key: "customer_name", label: "거래처" },
+  { key: "part_code", label: "품목코드" },
+  { key: "part_name", label: "품목명" },
+  { key: "order_qty", label: "수주수량" },
+  { key: "plan_qty", label: "계획수량" },
+  { key: "plan_date", label: "계획일" },
+  { key: "status", label: "상태" },
+];
+
+const STATUS_OPTIONS = [
+  { value: "all", label: "전체" },
+  { value: "READY", label: "준비" },
+  { value: "CONFIRMED", label: "확정" },
+  { value: "SHIPPING", label: "출하중" },
+  { value: "COMPLETED", label: "완료" },
+  { value: "CANCEL_REQUEST", label: "취소요청" },
+  { value: "CANCELLED", label: "취소완료" },
+];
+
+const getStatusLabel = (status: string) => {
+  const found = STATUS_OPTIONS.find(o => o.value === status);
+  return found?.label || status;
+};
+
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case "READY": return "bg-primary/10 text-primary";
+    case "CONFIRMED": return "bg-secondary text-secondary-foreground";
+    case "SHIPPING": return "bg-warning/10 text-warning";
+    case "COMPLETED": return "bg-success/10 text-success";
+    case "CANCEL_REQUEST": return "bg-destructive/10 text-destructive";
+    case "CANCELLED": return "bg-muted text-muted-foreground";
+    default: return "bg-muted text-muted-foreground";
+  }
+};
+
+export default function ShippingPlanPage() {
+  const ts = useTableSettings("c16-shipping-plan", "shipment_plan", GRID_COLUMNS);
+  const [data, setData] = useState<ShipmentPlanListItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const [checkedIds, setCheckedIds] = useState<number[]>([]);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 상세 패널 편집
+  const [editPlanQty, setEditPlanQty] = useState("");
+  const [editPlanDate, setEditPlanDate] = useState("");
+  const [editMemo, setEditMemo] = useState("");
+  const [isDetailChanged, setIsDetailChanged] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+
+  // 데이터 조회
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: any = {};
+      for (const f of searchFilters) {
+        if (f.columnName === "plan_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split(",");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status") {
+          params.status = f.value;
+        } else if (f.columnName === "customer_name") {
+          params.customer = f.value;
+        } else {
+          params.keyword = f.value;
+        }
+      }
+
+      const result = await getShipmentPlanList(params);
+      if (result.success) {
+        setData(result.data || []);
+      }
+    } catch (err) {
+      console.error("출하계획 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  // searchFilters 변경 시 자동 조회
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const selectedPlan = useMemo(() => data.find(p => p.id === selectedId), [data, selectedId]);
+
+  const groupedData = useMemo(() => {
+    const grouped = ts.groupData(data);
+    const orderMap = new Map<string, any[]>();
+    const orderKeys: string[] = [];
+    grouped.forEach(plan => {
+      const key = (plan as any)._isGroupSummary ? `_summary_${orderKeys.length}` : (plan.order_no || `_no_order_${plan.id}`);
+      if (!orderMap.has(key)) {
+        orderMap.set(key, []);
+        orderKeys.push(key);
+      }
+      orderMap.get(key)!.push(plan);
+    });
+    return orderKeys.map(key => ({
+      orderNo: key,
+      plans: orderMap.get(key)!,
+    }));
+  }, [data, ts.groupData]);
+
+  const handleRowClick = (plan: ShipmentPlanListItem) => {
+    if (isDetailChanged && selectedId !== plan.id) {
+      if (!confirm("변경사항이 있습니다. 저장하지 않고 이동하시겠습니까?")) return;
+    }
+    setSelectedId(plan.id);
+    setEditPlanQty(String(Number(plan.plan_qty)));
+    setEditPlanDate(plan.plan_date ? plan.plan_date.split("T")[0] : "");
+    setEditMemo(plan.memo || "");
+    setIsDetailChanged(false);
+  };
+
+  const handleCheckAll = (checked: boolean) => {
+    if (checked) {
+      setCheckedIds(data.filter(p => p.status !== "CANCELLED").map(p => p.id));
+    } else {
+      setCheckedIds([]);
+    }
+  };
+
+  const handleSaveDetail = async () => {
+    if (!selectedId || !selectedPlan) return;
+
+    const qty = Number(editPlanQty);
+    if (qty <= 0) {
+      alert("계획수량은 0보다 커야 해요.");
+      return;
+    }
+    if (!editPlanDate) {
+      alert("출하계획일을 입력해주세요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const result = await updateShipmentPlan(selectedId, {
+        planQty: qty,
+        planDate: editPlanDate,
+        memo: editMemo,
+      });
+      if (result.success) {
+        setIsDetailChanged(false);
+        alert("저장되었어요.");
+        fetchData();
+      } else {
+        alert(result.message || "저장 실패");
+      }
+    } catch (err: any) {
+      alert(err.message || "저장 중 오류 발생");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const formatDate = (dateStr: string) => {
+    if (!dateStr) return "-";
+    return dateStr.split("T")[0];
+  };
+
+  const formatNumber = (val: string | number) => {
+    const num = Number(val);
+    return isNaN(num) ? "0" : num.toLocaleString();
+  };
+
+  return (
+    <div className="flex flex-col h-full p-4 gap-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>영업관리</span>
+        <span className="text-muted-foreground/40">/</span>
+        <span className="font-semibold text-foreground">출하계획</span>
+      </nav>
+
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName="shipment_plan"
+        filterId="c16-shipping-plan"
+        onFilterChange={setSearchFilters}
+        dataCount={data.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 마스터-디테일 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 출하계획 목록 */}
+          <ResizablePanel defaultSize={60} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-bold text-foreground">출하계획 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {data.length}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {/* 테이블 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={[
+                    { key: "order_no", label: "수주번호", render: (val: any) => <span className="font-medium text-sm">{val || "-"}</span> },
+                    { key: "due_date", label: "납기일", align: "center" as const, render: (val: any) => <span className="text-sm">{formatDate(val)}</span> },
+                    { key: "customer_name", label: "거래처", render: (val: any) => <span className="text-sm">{val || "-"}</span> },
+                    { key: "part_code", label: "품목코드", render: (val: any) => <span className="text-muted-foreground text-[13px]">{val || "-"}</span> },
+                    { key: "part_name", label: "품목명", render: (val: any) => <span className="font-medium text-sm">{val || "-"}</span> },
+                    { key: "order_qty", label: "수주수량", align: "right" as const, formatNumber: true },
+                    { key: "plan_qty", label: "계획수량", align: "right" as const, render: (val: any) => <span className="font-semibold text-primary text-sm">{formatNumber(val)}</span> },
+                    { key: "plan_date", label: "계획일", align: "center" as const, render: (val: any) => <span className="text-sm">{formatDate(val)}</span> },
+                    { key: "status", label: "상태", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(val))}>{getStatusLabel(val)}</span> },
+                  ] as EDataTableColumn<ShipmentPlanListItem>[]}
+                  data={data}
+                  rowKey={(row) => String(row.id)}
+                  loading={loading}
+                  emptyMessage="출하계획이 없어요"
+                  selectedId={selectedId !== null ? String(selectedId) : null}
+                  onSelect={(id) => {
+                    if (id) {
+                      const plan = data.find(p => String(p.id) === id);
+                      if (plan) handleRowClick(plan);
+                    }
+                  }}
+                  onRowClick={(row) => handleRowClick(row)}
+                  showCheckbox
+                  checkedIds={checkedIds.map(String)}
+                  onCheckedChange={(ids) => setCheckedIds(ids.map(Number))}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 상세 패널 */}
+          <ResizablePanel defaultSize={40} minSize={20}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-bold text-foreground">출하계획 상세</span>
+                  {selectedPlan && (
+                    <span className="text-[11px] font-mono text-muted-foreground">{selectedPlan.shipment_plan_no}</span>
+                  )}
+                </div>
+                {selectedPlan && (
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      size="sm"
+                      onClick={handleSaveDetail}
+                      disabled={!isDetailChanged || saving}
+                      variant={isDetailChanged ? "default" : "secondary"}
+                    >
+                      {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
+                      저장
+                    </Button>
+                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setSelectedId(null)}>
+                      <X className="w-3.5 h-3.5" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {/* 상세 컨텐츠 */}
+              {selectedPlan ? (
+                <div className="flex-1 overflow-auto p-4 space-y-4">
+                  {/* 기본 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">상태</p>
+                      <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium inline-block", getStatusColor(selectedPlan.status))}>
+                        {getStatusLabel(selectedPlan.status)}
+                      </span>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주번호</p>
+                      <p className="text-sm font-mono text-muted-foreground">{selectedPlan.order_no || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">거래처</p>
+                      <p className="text-sm font-medium text-foreground">{selectedPlan.customer_name || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">납기일</p>
+                      <p className="text-sm text-foreground">{formatDate(selectedPlan.due_date)}</p>
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 품목 정보 */}
+                  <div>
+                    <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-2">품목 정보</p>
+                    <div className="grid grid-cols-2 gap-3 bg-muted/30 border rounded-md p-3">
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">품목코드</p>
+                        <p className="text-sm font-mono text-muted-foreground">{selectedPlan.part_code || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">품목명</p>
+                        <p className="text-sm font-medium text-foreground">{selectedPlan.part_name || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">규격</p>
+                        <p className="text-sm text-foreground">{selectedPlan.spec || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">재질</p>
+                        <p className="text-sm text-foreground">{selectedPlan.material || "-"}</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 수량 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주수량</p>
+                      <p className="text-sm text-foreground">{formatNumber(selectedPlan.order_qty)}</p>
+                    </div>
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">계획수량</Label>
+                      <Input
+                        type="number"
+                        className="h-9"
+                        value={editPlanQty}
+                        onChange={(e) => { setEditPlanQty(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                      />
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">출하수량</p>
+                      <p className="text-sm text-foreground">{formatNumber(selectedPlan.shipped_qty)}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">잔여수량</p>
+                      <p className={cn(
+                        "font-semibold text-sm",
+                        (Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty)) > 0
+                          ? "text-destructive"
+                          : "text-success"
+                      )}>
+                        {formatNumber(Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty))}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 출하 정보 */}
+                  <div className="space-y-3">
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">출하계획일</Label>
+                      <Input
+                        type="date"
+                        className="h-9"
+                        value={editPlanDate}
+                        onChange={(e) => { setEditPlanDate(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                      />
+                    </div>
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">비고</Label>
+                      <Textarea
+                        className="min-h-[80px] resize-y text-sm"
+                        value={editMemo}
+                        onChange={(e) => { setEditMemo(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                        placeholder="비고를 입력해주세요"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 등록 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">등록자</p>
+                      <p className="text-sm text-foreground">{selectedPlan.created_by || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">등록일시</p>
+                      <p className="text-sm text-foreground">
+                        {selectedPlan.created_date ? new Date(selectedPlan.created_date).toLocaleString("ko-KR") : "-"}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex flex-col items-center justify-center h-full text-center p-8 text-muted-foreground">
+                  <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center mb-4">
+                    <Inbox className="w-6 h-6 text-muted-foreground/30" />
+                  </div>
+                  <p className="text-sm font-medium">좌측에서 출하계획을 선택해주세요</p>
+                  <p className="text-xs text-muted-foreground/60 mt-1">선택하면 상세 정보가 표시돼요</p>
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/design/change-management/page.tsx b/frontend/app/(main)/COMPANY_9/design/change-management/page.tsx
new file mode 100644
index 00000000..39f06769
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/design/change-management/page.tsx
@@ -0,0 +1,1524 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Plus,
+  Save,
+  Inbox,
+  Pencil,
+  FileText,
+  XCircle,
+  ArrowRight,
+  Paperclip,
+  Upload,
+  Loader2,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  getDesignRequestList,
+  createDesignRequest,
+  updateDesignRequest,
+  addRequestHistory,
+  getEcnList,
+  createEcn,
+  updateEcn,
+} from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// --- Types ---
+type ChangeType = "설계오류" | "원가절감" | "고객요청" | "공정개선" | "법규대응";
+type EcrStatus = "요청접수" | "영향도분석" | "ECN발행" | "기각";
+type EcnStatus = "ECN발행" | "도면변경" | "통보완료" | "적용완료";
+type TabType = "ecr" | "ecn";
+
+interface EcrHistory {
+  status: string;
+  date: string;
+  user: string;
+  desc: string;
+}
+
+interface EcrItem {
+  id: string;
+  _id?: string;
+  date: string;
+  changeType: ChangeType;
+  urgency: "보통" | "긴급";
+  status: EcrStatus;
+  target: string;
+  drawingNo: string;
+  reqDept: string;
+  requester: string;
+  reason: string;
+  content: string;
+  impact: string[];
+  applyTiming: string;
+  ecnNo: string;
+  history: EcrHistory[];
+}
+
+interface EcnItem {
+  id: string;
+  _id?: string;
+  ecrNo: string;
+  ecrId?: string;
+  date: string;
+  applyDate: string;
+  status: EcnStatus;
+  target: string;
+  drawingBefore: string;
+  drawingAfter: string;
+  designer: string;
+  before: string;
+  after: string;
+  reason: string;
+  notifyDepts: string[];
+  remark: string;
+  history: EcrHistory[];
+}
+
+// --- Style Helpers ---
+const getChangeTypeStyle = (type: ChangeType) => {
+  switch (type) {
+    case "설계오류":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "원가절감":
+      return "bg-success/10 text-success border-success/20";
+    case "고객요청":
+      return "bg-info/10 text-info border-info/20";
+    case "공정개선":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "법규대응":
+      return "bg-primary/10 text-primary border-primary/20";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getEcrStatusStyle = (status: EcrStatus) => {
+  switch (status) {
+    case "요청접수":
+      return "bg-info/10 text-info border-info/20";
+    case "영향도분석":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "ECN발행":
+      return "bg-success/10 text-success border-success/20";
+    case "기각":
+      return "bg-muted text-muted-foreground border-border";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getEcnStatusStyle = (status: EcnStatus) => {
+  switch (status) {
+    case "ECN발행":
+      return "bg-info/10 text-info border-info/20";
+    case "도면변경":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "통보완료":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "적용완료":
+      return "bg-success/10 text-success border-success/20";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getImpactBadgeStyle = (impact: string) => {
+  switch (impact) {
+    case "BOM":
+      return "bg-info/10 text-info border-info/20";
+    case "공정":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "금형":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "검사기준":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "구매":
+    case "원가":
+      return "bg-success/10 text-success border-success/20";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getTimelineStatusStyle = (status: string) => {
+  switch (status) {
+    case "기각":
+      return "bg-muted text-muted-foreground border-border";
+    case "적용완료":
+    case "ECN발행":
+      return "bg-success/10 text-success border-success/20";
+    case "영향도분석":
+      return "bg-warning/10 text-warning border-warning/20";
+    case "도면변경":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "통보완료":
+      return "bg-info/10 text-info border-info/20";
+    default:
+      return "bg-info/10 text-info border-info/20";
+  }
+};
+
+// --- Constants ---
+const CHANGE_TYPES: ChangeType[] = ["설계오류", "원가절감", "고객요청", "공정개선", "법규대응"];
+const ECR_STATUSES: EcrStatus[] = ["요청접수", "영향도분석", "ECN발행", "기각"];
+const ECN_STATUSES: EcnStatus[] = ["ECN발행", "도면변경", "통보완료", "적용완료"];
+const DEPARTMENTS = ["품질팀", "생산팀", "영업팀", "구매팀", "설계팀"];
+const DESIGNERS = ["이설계", "박도면", "최기구", "김전장"];
+const IMPACT_OPTIONS = [
+  { key: "BOM", label: "BOM 변경" },
+  { key: "공정", label: "공정 변경" },
+  { key: "금형", label: "금형 변경" },
+  { key: "검사기준", label: "검사기준 변경" },
+  { key: "구매", label: "구매 변경" },
+  { key: "원가", label: "원가 영향" },
+];
+const NOTIFY_DEPTS = [
+  { key: "생산팀", label: "생산팀" },
+  { key: "품질팀", label: "품질팀" },
+  { key: "구매팀", label: "구매팀" },
+  { key: "영업팀", label: "영업팀" },
+  { key: "물류팀", label: "물류팀" },
+  { key: "금형팀", label: "금형팀" },
+];
+
+// --- API Response Mapping ---
+function mapEcrFromApi(raw: any): EcrItem {
+  const history = (raw.history || []).map((h: any) => ({
+    status: h.step || h.status || "",
+    date: h.history_date || "",
+    user: h.user_name || "",
+    desc: h.description || "",
+  }));
+  return {
+    id: raw.request_no || raw.id || "",
+    _id: raw.id,
+    date: raw.request_date || "",
+    changeType: (raw.change_type as ChangeType) || "설계오류",
+    urgency: (raw.urgency as "보통" | "긴급") || "보통",
+    status: (raw.status as EcrStatus) || "요청접수",
+    target: raw.target_name || "",
+    drawingNo: raw.drawing_no || "",
+    reqDept: raw.req_dept || "",
+    requester: raw.requester || "",
+    reason: raw.reason || "",
+    content: raw.content || "",
+    impact: Array.isArray(raw.impact) ? raw.impact : [],
+    applyTiming: raw.apply_timing || "",
+    ecnNo: raw.ecn_no || "",
+    history,
+  };
+}
+
+function mapEcnFromApi(raw: any, ecrData: EcrItem[]): EcnItem {
+  const history = (raw.history || []).map((h: any) => ({
+    status: h.status || "",
+    date: h.history_date || "",
+    user: h.user_name || "",
+    desc: h.description || "",
+  }));
+  const ecrNo = raw.ecr_id
+    ? ecrData.find((e) => e._id === raw.ecr_id)?.id ?? raw.ecr_id
+    : "";
+  return {
+    id: raw.ecn_no || raw.id || "",
+    _id: raw.id,
+    ecrNo,
+    ecrId: raw.ecr_id,
+    date: raw.ecn_date || "",
+    applyDate: raw.apply_date || "",
+    status: (raw.status as EcnStatus) || "ECN발행",
+    target: raw.target || "",
+    drawingBefore: raw.drawing_before || "",
+    drawingAfter: raw.drawing_after || "",
+    designer: raw.designer || "",
+    before: raw.before_content || "",
+    after: raw.after_content || "",
+    reason: raw.reason || "",
+    notifyDepts: Array.isArray(raw.notify_depts) ? raw.notify_depts : [],
+    remark: raw.remark || "",
+    history,
+  };
+}
+
+// --- Timeline Component ---
+function Timeline({ history }: { history: EcrHistory[] }) {
+  return (
+    <div className="space-y-0">
+      {history.map((h, idx) => {
+        const isLast = idx === history.length - 1;
+        const isRejected = h.status === "기각";
+        const isCompleted = h.status === "적용완료";
+        return (
+          <div key={idx} className="flex gap-3 relative">
+            <div className="flex flex-col items-center">
+              <div
+                className={cn(
+                  "w-3 h-3 rounded-full border-2 mt-1.5 shrink-0",
+                  isLast && isRejected
+                    ? "bg-destructive border-destructive/60"
+                    : isLast && isCompleted
+                      ? "bg-success border-success/60"
+                      : isLast
+                        ? "bg-primary border-primary/50 ring-4 ring-primary/10"
+                        : "bg-success border-success/60"
+                )}
+              />
+              {!isLast && (
+                <div className="w-px flex-1 bg-border min-h-[24px]" />
+              )}
+            </div>
+            <div className="pb-4 min-w-0">
+              <div className="flex items-center gap-2 mb-0.5">
+                <span
+                  className={cn(
+                    "px-2 py-0.5 rounded-full text-[10px] font-medium border",
+                    getTimelineStatusStyle(h.status)
+                  )}
+                >
+                  {h.status}
+                </span>
+              </div>
+              <p className="text-xs text-foreground">{h.desc}</p>
+              <p className="text-[11px] text-muted-foreground mt-0.5">
+                {h.date} · {h.user}
+              </p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// --- Grid Columns ---
+const ECR_GRID_COLUMNS = [
+  { key: "request_no", label: "ECR번호" },
+  { key: "change_type", label: "변경유형" },
+  { key: "status", label: "상태" },
+  { key: "urgency", label: "긴급" },
+  { key: "target_name", label: "대상 품목/설비" },
+  { key: "drawing_no", label: "도면번호" },
+  { key: "req_dept", label: "요청부서" },
+  { key: "requester", label: "요청자" },
+  { key: "request_date", label: "요청일자" },
+  { key: "ecn_no", label: "관련 ECN" },
+];
+
+const ECN_GRID_COLUMNS = [
+  { key: "ecn_no", label: "ECN번호" },
+  { key: "status", label: "상태" },
+  { key: "target", label: "대상 품목/설비" },
+  { key: "drawing_after", label: "도면 (변경 후)" },
+  { key: "designer", label: "설계담당" },
+  { key: "ecn_date", label: "발행일자" },
+  { key: "apply_date", label: "적용일자" },
+  { key: "notify_depts", label: "통보 부서" },
+  { key: "ecr_id", label: "관련 ECR" },
+];
+
+// --- Main Component ---
+export default function DesignChangeManagementPage() {
+  const tsEcr = useTableSettings("c16-change-management-ecr", "dsn_design_request", ECR_GRID_COLUMNS);
+  const tsEcn = useTableSettings("c16-change-management-ecn", "dsn_ecn", ECN_GRID_COLUMNS);
+  const [currentTab, setCurrentTab] = useState<TabType>("ecr");
+  const [ecrData, setEcrData] = useState<EcrItem[]>([]);
+  const [ecnData, setEcnData] = useState<EcnItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // ECR 모달
+  const [isEcrModalOpen, setIsEcrModalOpen] = useState(false);
+  const [isEcrEditMode, setIsEcrEditMode] = useState(false);
+  const [ecrForm, setEcrForm] = useState<Partial<EcrItem>>({});
+  const [ecrImpactChecks, setEcrImpactChecks] = useState<Record<string, boolean>>({});
+
+  // ECN 모달
+  const [isEcnModalOpen, setIsEcnModalOpen] = useState(false);
+  const [ecnForm, setEcnForm] = useState<Partial<EcnItem>>({});
+  const [ecnNotifyChecks, setEcnNotifyChecks] = useState<Record<string, boolean>>({});
+
+  // 기각 모달
+  const [isRejectModalOpen, setIsRejectModalOpen] = useState(false);
+  const [rejectReason, setRejectReason] = useState("");
+  const [rejectTargetId, setRejectTargetId] = useState("");
+
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [ecrRes, ecnRes] = await Promise.all([
+        getDesignRequestList({ source_type: "ecr" }),
+        getEcnList(),
+      ]);
+      if (ecrRes.success && ecrRes.data) {
+        setEcrData((ecrRes.data as any[]).map(mapEcrFromApi));
+      }
+      if (ecnRes.success && ecnRes.data) {
+        const ecrList = ecrRes.success && ecrRes.data ? (ecrRes.data as any[]).map(mapEcrFromApi) : [];
+        setEcnData((ecnRes.data as any[]).map((r) => mapEcnFromApi(r, ecrList)));
+      }
+    } catch {
+      toast.error("데이터를 불러오는데 실패했어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // snake_case → camelCase 매핑 (ECR)
+  const ecrFieldMap: Record<string, string> = {
+    request_no: "id",
+    request_date: "date",
+    change_type: "changeType",
+    target_name: "target",
+    drawing_no: "drawingNo",
+    req_dept: "reqDept",
+    ecn_no: "ecnNo",
+    apply_timing: "applyTiming",
+  };
+  // snake_case → camelCase 매핑 (ECN)
+  const ecnFieldMap: Record<string, string> = {
+    ecn_no: "id",
+    ecn_date: "date",
+    apply_date: "applyDate",
+    drawing_before: "drawingBefore",
+    drawing_after: "drawingAfter",
+    ecr_id: "ecrNo",
+    notify_depts: "notifyDepts",
+  };
+  const getFieldValue = (obj: any, colName: string, map: Record<string, string>): string => {
+    const key = map[colName] || colName;
+    const val = obj[key];
+    if (Array.isArray(val)) return val.join(",");
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
+  const applyFilters = (items: any[], map: Record<string, string>) => {
+    if (searchFilters.length === 0) return items;
+    return items.filter((item) => {
+      for (const f of searchFilters) {
+        const val = getFieldValue(item, f.columnName, map);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (val !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) return false;
+          if (to && val > to) return false;
+        }
+      }
+      return true;
+    });
+  };
+
+  // --- Filtered Data ---
+  const filteredEcr = useMemo(() => {
+    return applyFilters(ecrData, ecrFieldMap)
+      .sort((a: EcrItem, b: EcrItem) => b.date.localeCompare(a.date));
+  }, [ecrData, searchFilters]);
+
+  const filteredEcn = useMemo(() => {
+    return applyFilters(ecnData, ecnFieldMap)
+      .sort((a: EcnItem, b: EcnItem) => b.date.localeCompare(a.date));
+  }, [ecnData, searchFilters]);
+
+  // --- Status Counts ---
+  const ecrStatusCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    ECR_STATUSES.forEach((s) => (counts[s] = ecrData.filter((r) => r.status === s).length));
+    return counts;
+  }, [ecrData]);
+
+  const ecnStatusCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    ECN_STATUSES.forEach((s) => (counts[s] = ecnData.filter((r) => r.status === s).length));
+    return counts;
+  }, [ecnData]);
+
+  // --- Selected Items ---
+  const selectedEcr = useMemo(
+    () => (currentTab === "ecr" ? ecrData.find((r) => r.id === selectedId) : null),
+    [ecrData, selectedId, currentTab]
+  );
+  const selectedEcn = useMemo(
+    () => (currentTab === "ecn" ? ecnData.find((r) => r.id === selectedId) : null),
+    [ecnData, selectedId, currentTab]
+  );
+
+  // --- Tab Switch ---
+  const handleTabSwitch = (tab: TabType) => {
+    setCurrentTab(tab);
+    setSelectedId(null);
+  };
+
+  const handleFilterByStatus = (_status: string) => {
+    // Status filter now handled by DynamicSearchFilter
+  };
+
+  // --- ECR/ECN Navigation ---
+  const navigateToLink = (targetId: string) => {
+    setDetailOpen(false);
+    if (targetId.startsWith("ECN")) {
+      setCurrentTab("ecn");
+      setSelectedId(targetId);
+    } else if (targetId.startsWith("ECR")) {
+      setCurrentTab("ecr");
+      setSelectedId(targetId);
+    }
+  };
+
+  // --- ECR Number Generator ---
+  const generateEcrNo = useCallback(() => {
+    const year = new Date().getFullYear();
+    const prefix = `ECR-${year}-`;
+    const existing = ecrData.filter((r) => r.id.startsWith(prefix));
+    const maxNum = existing.reduce((max, r) => {
+      const num = parseInt(r.id.split("-")[2]);
+      return num > max ? num : max;
+    }, 0);
+    return `${prefix}${String(maxNum + 1).padStart(4, "0")}`;
+  }, [ecrData]);
+
+  const generateEcnNo = useCallback(() => {
+    const year = new Date().getFullYear();
+    const prefix = `ECN-${year}-`;
+    const existing = ecnData.filter((r) => r.id.startsWith(prefix));
+    const maxNum = existing.reduce((max, r) => {
+      const num = parseInt(r.id.split("-")[2]);
+      return num > max ? num : max;
+    }, 0);
+    return `${prefix}${String(maxNum + 1).padStart(4, "0")}`;
+  }, [ecnData]);
+
+  // --- ECR Modal ---
+  const openEcrRegisterModal = () => {
+    setIsEcrEditMode(false);
+    setEcrForm({
+      id: generateEcrNo(),
+      date: new Date().toISOString().split("T")[0],
+      changeType: undefined,
+      urgency: "보통",
+      target: "",
+      drawingNo: "",
+      reqDept: "",
+      requester: "",
+      reason: "",
+      content: "",
+      applyTiming: "즉시",
+    });
+    setEcrImpactChecks({});
+    setIsEcrModalOpen(true);
+  };
+
+  const openEcrEditModal = (id: string) => {
+    const item = ecrData.find((r) => r.id === id);
+    if (!item) return;
+    setIsEcrEditMode(true);
+    setEcrForm({ ...item });
+    const checks: Record<string, boolean> = {};
+    IMPACT_OPTIONS.forEach((opt) => {
+      checks[opt.key] = item.impact.includes(opt.key);
+    });
+    setEcrImpactChecks(checks);
+    setIsEcrModalOpen(true);
+  };
+
+  const handleSaveEcr = async () => {
+    if (!ecrForm.changeType) {
+      toast.error("변경 유형을 선택해 주세요.");
+      return;
+    }
+    if (!ecrForm.target?.trim()) {
+      toast.error("대상 품목/설비를 입력해 주세요.");
+      return;
+    }
+    if (!ecrForm.reason?.trim()) {
+      toast.error("변경 사유를 입력해 주세요.");
+      return;
+    }
+    if (!ecrForm.content?.trim()) {
+      toast.error("변경 요구 내용을 입력해 주세요.");
+      return;
+    }
+
+    const impact = IMPACT_OPTIONS.filter((opt) => ecrImpactChecks[opt.key]).map((opt) => opt.key);
+    const reqDate = ecrForm.date || new Date().toISOString().split("T")[0];
+    const historyEntry = {
+      step: "요청접수",
+      history_date: reqDate,
+      user_name: ecrForm.requester || "시스템",
+      description: `${ecrForm.reqDept || ""}에서 ECR 등록`,
+    };
+
+    if (isEcrEditMode && ecrForm._id) {
+      const res = await updateDesignRequest(ecrForm._id, {
+        request_no: ecrForm.id,
+        request_date: reqDate,
+        change_type: ecrForm.changeType,
+        urgency: ecrForm.urgency || "보통",
+        target_name: ecrForm.target,
+        drawing_no: ecrForm.drawingNo || "",
+        req_dept: ecrForm.reqDept || "",
+        requester: ecrForm.requester || "",
+        reason: ecrForm.reason,
+        content: ecrForm.content,
+        impact,
+        apply_timing: ecrForm.applyTiming || "즉시",
+      });
+      if (res.success) {
+        toast.success("ECR이 수정되었어요.");
+        setIsEcrModalOpen(false);
+        fetchData();
+      } else {
+        toast.error(res.message || "ECR 수정에 실패했어요.");
+      }
+    } else {
+      const res = await createDesignRequest({
+        request_no: ecrForm.id || generateEcrNo(),
+        source_type: "ecr",
+        request_date: reqDate,
+        change_type: ecrForm.changeType,
+        urgency: ecrForm.urgency || "보통",
+        status: "요청접수",
+        target_name: ecrForm.target,
+        drawing_no: ecrForm.drawingNo || "",
+        req_dept: ecrForm.reqDept || "",
+        requester: ecrForm.requester || "",
+        reason: ecrForm.reason,
+        content: ecrForm.content,
+        impact,
+        apply_timing: ecrForm.applyTiming || "즉시",
+        history: [historyEntry],
+      });
+      if (res.success) {
+        toast.success("ECR이 등록되었어요.");
+        setIsEcrModalOpen(false);
+        fetchData();
+      } else {
+        toast.error(res.message || "ECR 등록에 실패했어요.");
+      }
+    }
+  };
+
+  // --- ECN Modal ---
+  const openEcnIssueModal = (ecrId: string) => {
+    const ecr = ecrData.find((r) => r.id === ecrId);
+    if (!ecr) return;
+
+    setEcnForm({
+      id: generateEcnNo(),
+      ecrNo: ecrId,
+      ecrId: ecr._id,
+      date: new Date().toISOString().split("T")[0],
+      target: ecr.target,
+      reason: ecr.reason,
+      drawingBefore: ecr.drawingNo,
+      drawingAfter: "",
+      designer: "",
+      before: "",
+      after: "",
+      applyDate: "",
+      remark: "",
+    });
+    setEcnNotifyChecks({});
+    setIsEcnModalOpen(true);
+  };
+
+  const handleSaveEcn = async () => {
+    if (!ecnForm.after?.trim()) {
+      toast.error("변경 후(TO-BE) 내용을 입력해 주세요.");
+      return;
+    }
+    if (!ecnForm.applyDate) {
+      toast.error("적용일자를 입력해 주세요.");
+      return;
+    }
+    if (!ecnForm.ecrId) {
+      toast.error("관련 ECR 정보가 없어요.");
+      return;
+    }
+
+    const notifyDepts = NOTIFY_DEPTS.filter((d) => ecnNotifyChecks[d.key]).map((d) => d.key);
+    const ecnDate = ecnForm.date || new Date().toISOString().split("T")[0];
+    const historyEntry = {
+      status: "ECN발행",
+      history_date: ecnDate,
+      user_name: ecnForm.designer || "시스템",
+      description: "ECN 발행",
+    };
+
+    const ecnNo = ecnForm.id || generateEcnNo();
+    const res = await createEcn({
+      ecn_no: ecnNo,
+      ecr_id: ecnForm.ecrId,
+      ecn_date: ecnDate,
+      apply_date: ecnForm.applyDate,
+      status: "ECN발행",
+      target: ecnForm.target || "",
+      drawing_before: ecnForm.drawingBefore || "",
+      drawing_after: ecnForm.drawingAfter || "(미정)",
+      designer: ecnForm.designer || "",
+      before_content: ecnForm.before || "",
+      after_content: ecnForm.after || "",
+      reason: ecnForm.reason || "",
+      remark: ecnForm.remark || "",
+      notify_depts: notifyDepts,
+      history: [historyEntry],
+    });
+
+    if (res.success) {
+      await updateDesignRequest(ecnForm.ecrId!, {
+        status: "ECN발행",
+        ecn_no: ecnNo,
+      });
+      await addRequestHistory(ecnForm.ecrId!, {
+        step: "ECN발행",
+        history_date: ecnDate,
+        user_name: ecnForm.designer || "시스템",
+        description: `${ecnNo} 발행`,
+      });
+      toast.success("ECN이 발행되었어요.");
+      setIsEcnModalOpen(false);
+      fetchData();
+    } else {
+      toast.error(res.message || "ECN 발행에 실패했어요.");
+    }
+  };
+
+  // --- ECR Reject ---
+  const openRejectModal = (id: string) => {
+    setRejectTargetId(id);
+    setRejectReason("");
+    setIsRejectModalOpen(true);
+  };
+
+  const handleRejectSubmit = async () => {
+    if (!rejectReason.trim()) {
+      toast.error("기각 사유를 입력해 주세요.");
+      return;
+    }
+
+    const ecr = ecrData.find((r) => r.id === rejectTargetId);
+    if (!ecr?._id) {
+      toast.error("ECR 정보를 찾을 수 없어요.");
+      return;
+    }
+
+    const updateRes = await updateDesignRequest(ecr._id, { status: "기각", review_memo: rejectReason });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "ECR 기각에 실패했어요.");
+      return;
+    }
+    await addRequestHistory(ecr._id, {
+      step: "기각",
+      history_date: new Date().toISOString().split("T")[0],
+      user_name: "설계팀",
+      description: rejectReason,
+    });
+    toast.success("ECR이 기각되었어요.");
+    setIsRejectModalOpen(false);
+    fetchData();
+  };
+
+  // --- Stat Cards ---
+  const ecrStatCards = [
+    { label: "요청접수", value: ecrStatusCounts["요청접수"] || 0, color: "text-info" },
+    { label: "영향도분석", value: ecrStatusCounts["영향도분석"] || 0, color: "text-warning" },
+    { label: "ECN발행", value: ecrStatusCounts["ECN발행"] || 0, color: "text-success" },
+  ];
+
+  const ecnStatCards = [
+    { label: "도면변경", value: ecnStatusCounts["도면변경"] || 0, color: "text-primary" },
+    { label: "통보완료", value: ecnStatusCounts["통보완료"] || 0, color: "text-info" },
+    { label: "적용완료", value: ecnStatusCounts["적용완료"] || 0, color: "text-success" },
+  ];
+
+  const currentStatCards = currentTab === "ecr" ? ecrStatCards : ecnStatCards;
+  const currentList = currentTab === "ecr" ? filteredEcr : filteredEcn;
+
+  const handleRowClick = (id: string) => {
+    setSelectedId(id);
+    setDetailOpen(true);
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3 relative">
+      {loading && (
+        <div className="absolute inset-0 bg-background/50 flex items-center justify-center z-50">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        </div>
+      )}
+
+      {/* 탭 선택 + 검색 필터 */}
+      <div className="shrink-0 flex flex-col gap-2">
+        <div className="flex items-center gap-3 px-1">
+          <Select value={currentTab} onValueChange={(v) => handleTabSwitch(v as TabType)}>
+            <SelectTrigger className="w-[170px] h-9">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="ecr">ECR (변경요청)</SelectItem>
+              <SelectItem value="ecn">ECN (변경통지)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        {currentTab === "ecr" ? (
+          <DynamicSearchFilter
+            tableName="dsn_design_request"
+            filterId="c16-change-management-ecr"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={tsEcr.filterConfig}
+            dataCount={filteredEcr.length}
+          />
+        ) : (
+          <DynamicSearchFilter
+            tableName="dsn_ecn"
+            filterId="c16-change-management-ecn"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={tsEcn.filterConfig}
+            dataCount={filteredEcn.length}
+          />
+        )}
+      </div>
+
+      {/* 현황 카드 */}
+      <div className="grid grid-cols-3 gap-3 shrink-0">
+        {currentStatCards.map((card) => (
+          <button
+            key={card.label}
+            onClick={() => handleFilterByStatus(card.label)}
+            className="rounded-lg border bg-card px-3 py-2 text-left transition-colors hover:bg-accent/50"
+          >
+            <div className="text-[10px] text-muted-foreground">{card.label}</div>
+            <div className={cn("text-xl font-bold", card.color)}>{card.value}</div>
+          </button>
+        ))}
+      </div>
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold">
+            {currentTab === "ecr" ? "설계변경요청(ECR) 목록" : "설계변경통지(ECN) 목록"}
+          </h2>
+          <Badge variant="secondary" className="font-mono">{currentList.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          {currentTab === "ecr" && (
+            <Button size="sm" onClick={openEcrRegisterModal}>
+              <Plus className="w-4 h-4 mr-1.5" /> ECR 등록
+            </Button>
+          )}
+          <Button variant="ghost" size="sm" onClick={() => (currentTab === "ecr" ? tsEcr : tsEcn).setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 테이블 영역 */}
+      <div className="flex-1 flex flex-col overflow-hidden border rounded-lg bg-card">
+        <div className="flex-1 overflow-auto">
+          {currentTab === "ecr" ? (
+            <EDataTable
+              columns={[
+                { key: "id", label: "ECR번호", width: "w-[140px]", render: (val: any) => <span className="font-semibold text-primary">{val}</span> },
+                { key: "changeType", label: "변경유형", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getChangeTypeStyle(val))}>{val}</span> },
+                { key: "status", label: "상태", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcrStatusStyle(val))}>{val}</span> },
+                { key: "urgency", label: "긴급", width: "w-[60px]", align: "center" as const, render: (val: any) => val === "긴급" ? <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-destructive/10 text-destructive border-destructive/20">긴급</span> : <span>-</span> },
+                { key: "target", label: "대상 품목/설비", width: "w-[200px]" },
+                { key: "drawingNo", label: "도면번호", width: "w-[150px]" },
+                { key: "reqDept", label: "요청부서", width: "w-[80px]" },
+                { key: "requester", label: "요청자", width: "w-[70px]" },
+                { key: "date", label: "요청일자", width: "w-[100px]" },
+                { key: "ecnNo", label: "관련 ECN", width: "w-[130px]", render: (val: any) => val ? <button className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-info/10 text-info border border-info/20 hover:bg-info/20 transition-colors" onClick={(e) => { e.stopPropagation(); navigateToLink(val); }}>{val} <ArrowRight className="w-3 h-3 inline" /></button> : <span>-</span> },
+              ] as EDataTableColumn<EcrItem>[]}
+              data={tsEcr.groupData(filteredEcr)}
+              rowKey={(row) => row.id}
+              selectedId={selectedId}
+              onSelect={(id) => { if (id) handleRowClick(id); }}
+              onRowClick={(row) => handleRowClick(row.id)}
+              emptyMessage="조건에 맞는 ECR이 없어요"
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+            />
+          ) : (
+            <EDataTable
+              columns={[
+                { key: "id", label: "ECN번호", width: "w-[140px]", render: (val: any) => <span className="font-semibold text-primary">{val}</span> },
+                { key: "status", label: "상태", width: "w-[90px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcnStatusStyle(val))}>{val}</span> },
+                { key: "target", label: "대상 품목/설비", width: "w-[200px]" },
+                { key: "drawingAfter", label: "도면 (변경 후)", width: "w-[160px]", render: (val: any) => <span className="text-[13px] text-success font-medium">{val}</span> },
+                { key: "designer", label: "설계담당", width: "w-[80px]" },
+                { key: "date", label: "발행일자", width: "w-[100px]" },
+                { key: "applyDate", label: "적용일자", width: "w-[100px]" },
+                { key: "notifyDepts", label: "통보 부서", width: "w-[140px]", render: (val: any) => <span className="text-[13px] text-muted-foreground">{Array.isArray(val) ? val.join(", ") : val}</span> },
+                { key: "ecrNo", label: "관련 ECR", width: "w-[130px]", render: (val: any) => <button className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-warning/10 text-warning border border-warning/20 hover:bg-warning/20 transition-colors" onClick={(e) => { e.stopPropagation(); navigateToLink(val); }}>{val} <ArrowRight className="w-3 h-3 inline" /></button> },
+              ] as EDataTableColumn<EcnItem>[]}
+              data={tsEcn.groupData(filteredEcn)}
+              rowKey={(row) => row.id}
+              selectedId={selectedId}
+              onSelect={(id) => { if (id) handleRowClick(id); }}
+              onRowClick={(row) => handleRowClick(row.id)}
+              emptyMessage="조건에 맞는 ECN이 없어요"
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* 상세 정보 다이얼로그 */}
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="max-w-[900px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{currentTab === "ecr" ? `ECR 상세 — ${selectedEcr?.id || ""}` : `ECN 상세 — ${selectedEcn?.id || ""}`}</DialogTitle>
+            <DialogDescription>{currentTab === "ecr" ? "설계변경요청의 상세 정보를 확인해요." : "설계변경통지의 상세 정보를 확인해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="space-y-5">
+          {/* ECR 상세 */}
+          {selectedEcr ? (
+            <>
+              <section>
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
+                  기본 정보
+                </h3>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">ECR번호</span>
+                    <span className="font-medium text-primary">{selectedEcr.id}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">상태</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcrStatusStyle(selectedEcr.status))}>
+                      {selectedEcr.status}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">변경 유형</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getChangeTypeStyle(selectedEcr.changeType))}>
+                      {selectedEcr.changeType}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">긴급도</span>
+                    <span>
+                      {selectedEcr.urgency === "긴급" ? (
+                        <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-destructive/10 text-destructive border-destructive/20">긴급</span>
+                      ) : (
+                        "보통"
+                      )}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
+                    <span className="font-medium">{selectedEcr.target}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">도면번호</span>
+                    <span>{selectedEcr.drawingNo}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">요청부서 / 요청자</span>
+                    <span>{selectedEcr.reqDept} / {selectedEcr.requester}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">요청일자</span>
+                    <span>{selectedEcr.date}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">희망 적용시점</span>
+                    <span>{selectedEcr.applyTiming}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">관련 ECN</span>
+                    {selectedEcr.ecnNo ? (
+                      <button
+                        className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-info/10 text-info border border-info/20 hover:bg-info/20 transition-colors"
+                        onClick={() => navigateToLink(selectedEcr.ecnNo)}
+                      >
+                        {selectedEcr.ecnNo} <ArrowRight className="w-3 h-3 inline" />
+                      </button>
+                    ) : (
+                      <span className="text-muted-foreground">미발행</span>
+                    )}
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
+                  {selectedEcr.reason}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 요구 내용</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
+                  {selectedEcr.content}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">영향 범위</h3>
+                <div className="flex flex-wrap gap-1.5">
+                  {selectedEcr.impact.map((imp) => (
+                    <span key={imp} className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getImpactBadgeStyle(imp))}>
+                      {imp}
+                    </span>
+                  ))}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
+                <Timeline history={selectedEcr.history} />
+              </section>
+            </>
+          ) : selectedEcn ? (
+            <>
+              <section>
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
+                  ECN 기본 정보
+                </h3>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">ECN번호</span>
+                    <span className="font-medium text-primary">{selectedEcn.id}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">상태</span>
+                    <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcnStatusStyle(selectedEcn.status))}>
+                      {selectedEcn.status}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
+                    <span className="font-medium">{selectedEcn.target}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">설계담당</span>
+                    <span>{selectedEcn.designer}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">발행일자</span>
+                    <span>{selectedEcn.date}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">적용일자</span>
+                    <span>{selectedEcn.applyDate}</span>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">관련 ECR</span>
+                    <button
+                      className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-warning/10 text-warning border border-warning/20 hover:bg-warning/20 transition-colors"
+                      onClick={() => navigateToLink(selectedEcn.ecrNo)}
+                    >
+                      {selectedEcn.ecrNo} <ArrowRight className="w-3 h-3 inline" />
+                    </button>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground text-xs block mb-1">통보 부서</span>
+                    <span className="text-xs">{selectedEcn.notifyDepts.join(", ")}</span>
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 전/후 비교</h3>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="bg-destructive/5 p-3 rounded-md border border-destructive/20">
+                    <div className="text-xs font-semibold text-destructive mb-1.5">
+                      변경 전 ({selectedEcn.drawingBefore})
+                    </div>
+                    <div className="text-sm whitespace-pre-wrap">{selectedEcn.before}</div>
+                  </div>
+                  <div className="bg-success/5 p-3 rounded-md border border-success/20">
+                    <div className="text-xs font-semibold text-success mb-1.5">
+                      변경 후 ({selectedEcn.drawingAfter})
+                    </div>
+                    <div className="text-sm whitespace-pre-wrap">{selectedEcn.after}</div>
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-2">변경 사유</h3>
+                <div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap">
+                  {selectedEcn.reason}
+                </div>
+                {selectedEcn.remark && (
+                  <p className="text-xs text-muted-foreground mt-2">비고: {selectedEcn.remark}</p>
+                )}
+              </section>
+
+              <section>
+                <h3 className="text-sm font-semibold mb-3">처리 이력</h3>
+                <Timeline history={selectedEcn.history} />
+              </section>
+            </>
+          ) : null}
+        </div>
+          </div>
+          <DialogFooter>
+            {selectedEcr && (
+              <>
+                <Button variant="outline" size="sm" onClick={() => { setDetailOpen(false); openEcrEditModal(selectedEcr.id); }}>
+                  <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                </Button>
+                {selectedEcr.status === "영향도분석" && (
+                  <>
+                    <Button size="sm" onClick={() => { setDetailOpen(false); openEcnIssueModal(selectedEcr.id); }}>
+                      <FileText className="w-3.5 h-3.5 mr-1" /> ECN 발행
+                    </Button>
+                    <Button variant="destructive" size="sm" onClick={() => { setDetailOpen(false); openRejectModal(selectedEcr.id); }}>
+                      <XCircle className="w-3.5 h-3.5 mr-1" /> 기각
+                    </Button>
+                  </>
+                )}
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ECR 등록/수정 모달 */}
+      <Dialog open={isEcrModalOpen} onOpenChange={setIsEcrModalOpen}>
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{isEcrEditMode ? "설계변경요청(ECR) 수정" : "설계변경요청(ECR) 등록"}</DialogTitle>
+            <DialogDescription>{isEcrEditMode ? "ECR 정보를 수정해요." : "새로운 설계변경요청을 등록해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-5 p-6">
+              {/* 좌측: 요청 정보 */}
+              <div className="md:w-[380px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                <h3 className="text-sm font-semibold pb-2 border-b">변경 요청 정보</h3>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">ECR번호</Label>
+                  <Input value={ecrForm.id || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청일자</Label>
+                    <Input
+                      type="date"
+                      value={ecrForm.date || ""}
+                      onChange={(e) => setEcrForm((p) => ({ ...p, date: e.target.value }))}
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">희망 적용시점</Label>
+                    <Select value={ecrForm.applyTiming || "즉시"} onValueChange={(v) => setEcrForm((p) => ({ ...p, applyTiming: v }))}>
+                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="즉시">즉시 적용</SelectItem>
+                        <SelectItem value="재고소진후">재고 소진 후</SelectItem>
+                        <SelectItem value="특정일자">특정 일자</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 유형 <span className="text-destructive">*</span></Label>
+                    <Select value={ecrForm.changeType || ""} onValueChange={(v) => setEcrForm((p) => ({ ...p, changeType: v as ChangeType }))}>
+                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {CHANGE_TYPES.map((t) => (
+                          <SelectItem key={t} value={t}>{t}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">긴급도</Label>
+                    <Select value={ecrForm.urgency || "보통"} onValueChange={(v) => setEcrForm((p) => ({ ...p, urgency: v as "보통" | "긴급" }))}>
+                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="보통">보통</SelectItem>
+                        <SelectItem value="긴급">긴급</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 품목/설비 <span className="text-destructive">*</span></Label>
+                  <Input
+                    value={ecrForm.target || ""}
+                    onChange={(e) => setEcrForm((p) => ({ ...p, target: e.target.value }))}
+                    placeholder="품목코드 / 설비명"
+                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                  />
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 도면번호</Label>
+                  <Input
+                    value={ecrForm.drawingNo || ""}
+                    onChange={(e) => setEcrForm((p) => ({ ...p, drawingNo: e.target.value }))}
+                    placeholder="DWG-XXX-XXX"
+                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청부서</Label>
+                    <Select value={ecrForm.reqDept || ""} onValueChange={(v) => setEcrForm((p) => ({ ...p, reqDept: v }))}>
+                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {DEPARTMENTS.map((d) => (
+                          <SelectItem key={d} value={d}>{d}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요청자</Label>
+                    <Input
+                      value={ecrForm.requester || ""}
+                      onChange={(e) => setEcrForm((p) => ({ ...p, requester: e.target.value }))}
+                      placeholder="요청자명"
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* 우측: 변경 내용 */}
+              <div className="flex-1 min-w-0 flex flex-col gap-4">
+                <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50 flex-1">
+                  <h3 className="text-sm font-semibold pb-2 border-b">변경 내용</h3>
+
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 사유 <span className="text-destructive">*</span></Label>
+                    <Textarea
+                      value={ecrForm.reason || ""}
+                      onChange={(e) => setEcrForm((p) => ({ ...p, reason: e.target.value }))}
+                      placeholder="변경이 필요한 구체적인 사유를 기술해 주세요"
+                      className="min-h-[80px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 요구 내용 <span className="text-destructive">*</span></Label>
+                    <Textarea
+                      value={ecrForm.content || ""}
+                      onChange={(e) => setEcrForm((p) => ({ ...p, content: e.target.value }))}
+                      placeholder="어떻게 변경해야 하는지 구체적으로 기술해 주세요"
+                      className="min-h-[80px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">영향 범위 (해당 항목 체크)</Label>
+                    <div className="grid grid-cols-3 gap-2 mt-2">
+                      {IMPACT_OPTIONS.map((opt) => (
+                        <label
+                          key={opt.key}
+                          className="flex items-center gap-2 px-3 py-2 bg-background border rounded-md text-xs cursor-pointer hover:bg-muted/50 transition-colors"
+                        >
+                          <Checkbox
+                            checked={!!ecrImpactChecks[opt.key]}
+                            onCheckedChange={(c) =>
+                              setEcrImpactChecks((prev) => ({ ...prev, [opt.key]: !!c }))
+                            }
+                          />
+                          {opt.label}
+                        </label>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="space-y-2 bg-muted/30 p-4 rounded-lg border border-border/50">
+                  <h3 className="text-sm font-semibold pb-2 border-b flex items-center gap-2">
+                    <Paperclip className="w-3.5 h-3.5" /> 첨부파일
+                  </h3>
+                  <div className="border-2 border-dashed border-border rounded-md p-4 text-center text-xs text-muted-foreground cursor-pointer hover:border-primary/50 hover:bg-muted/30 transition-colors">
+                    <Upload className="w-5 h-5 mx-auto mb-1.5 text-muted-foreground" />
+                    클릭하여 파일 첨부 (불량 사진, 참고 도면 등)
+                  </div>
+                </div>
+              </div>
+        </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEcrModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveEcr}>
+              <Save className="w-4 h-4 mr-1.5" /> 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ECN 발행 모달 */}
+      <Dialog open={isEcnModalOpen} onOpenChange={setIsEcnModalOpen}>
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>ECN 발행 (설계변경통지)</DialogTitle>
+            <DialogDescription>ECR 기반으로 설계변경통지를 발행해요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-5 p-6">
+              {/* 좌측 */}
+              <div className="md:w-[380px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                <h3 className="text-sm font-semibold pb-2 border-b">ECN 기본 정보</h3>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">ECN번호</Label>
+                  <Input value={ecnForm.id || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">관련 ECR번호</Label>
+                  <Input value={ecnForm.ecrNo || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">발행일자</Label>
+                    <Input
+                      type="date"
+                      value={ecnForm.date || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, date: e.target.value }))}
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">적용일자 <span className="text-destructive">*</span></Label>
+                    <Input
+                      type="date"
+                      value={ecnForm.applyDate || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, applyDate: e.target.value }))}
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대상 품목/설비</Label>
+                  <Input value={ecnForm.target || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">도면번호 (변경 후)</Label>
+                  <Input
+                    value={ecnForm.drawingAfter || ""}
+                    onChange={(e) => setEcnForm((p) => ({ ...p, drawingAfter: e.target.value }))}
+                    placeholder="변경된 도면번호 (Rev 포함)"
+                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                  />
+                </div>
+
+                <div>
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설계 담당</Label>
+                  <Select value={ecnForm.designer || ""} onValueChange={(v) => setEcnForm((p) => ({ ...p, designer: v }))}>
+                    <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                      <SelectValue placeholder="선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {DESIGNERS.map((d) => (
+                        <SelectItem key={d} value={d}>{d}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              {/* 우측 */}
+              <div className="flex-1 min-w-0 flex flex-col gap-4">
+                <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                  <h3 className="text-sm font-semibold pb-2 border-b">변경 전/후 비교</h3>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 전 (AS-IS)</Label>
+                    <Textarea
+                      value={ecnForm.before || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, before: e.target.value }))}
+                      placeholder="변경 전 상태/사양/치수 등"
+                      className="min-h-[80px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 후 (TO-BE) <span className="text-destructive">*</span></Label>
+                    <Textarea
+                      value={ecnForm.after || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, after: e.target.value }))}
+                      placeholder="변경 후 상태/사양/치수 등"
+                      className="min-h-[80px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                  <h3 className="text-sm font-semibold pb-2 border-b">통보 대상 부서</h3>
+                  <div className="grid grid-cols-3 gap-2">
+                    {NOTIFY_DEPTS.map((dept) => (
+                      <label
+                        key={dept.key}
+                        className="flex items-center gap-2 px-3 py-2 bg-background border rounded-md text-xs cursor-pointer hover:bg-muted/50 transition-colors"
+                      >
+                        <Checkbox
+                          checked={!!ecnNotifyChecks[dept.key]}
+                          onCheckedChange={(c) =>
+                            setEcnNotifyChecks((prev) => ({ ...prev, [dept.key]: !!c }))
+                          }
+                        />
+                        {dept.label}
+                      </label>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
+                  <h3 className="text-sm font-semibold pb-2 border-b">변경 사유 및 비고</h3>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">변경 사유 요약</Label>
+                    <Textarea
+                      value={ecnForm.reason || ""}
+                      readOnly
+                      className="min-h-[60px] resize-y text-xs sm:text-sm bg-muted cursor-not-allowed"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">비고</Label>
+                    <Textarea
+                      value={ecnForm.remark || ""}
+                      onChange={(e) => setEcnForm((p) => ({ ...p, remark: e.target.value }))}
+                      placeholder="추가 참고사항"
+                      className="min-h-[60px] resize-y text-xs sm:text-sm"
+                    />
+                  </div>
+                </div>
+              </div>
+        </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEcnModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveEcn}>
+              <FileText className="w-4 h-4 mr-1.5" /> ECN 발행
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 기각 모달 */}
+      <Dialog open={isRejectModalOpen} onOpenChange={setIsRejectModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg flex items-center gap-2">
+              <XCircle className="w-5 h-5 text-destructive" />
+              ECR 기각
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              {rejectTargetId}을 기각 처리해요.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 sm:space-y-4">
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">기각 사유 <span className="text-destructive">*</span></Label>
+              <Textarea
+                value={rejectReason}
+                onChange={(e) => setRejectReason(e.target.value)}
+                placeholder="기각 사유를 상세히 입력해 주세요"
+                className="min-h-[100px] resize-y text-xs sm:text-sm"
+              />
+            </div>
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setIsRejectModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              취소
+            </Button>
+            <Button variant="destructive" onClick={handleRejectSubmit} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              <XCircle className="w-4 h-4 mr-2" /> 기각 처리
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={tsEcr.open}
+        onOpenChange={tsEcr.setOpen}
+        tableName={tsEcr.tableName}
+        settingsId={tsEcr.settingsId}
+        defaultVisibleKeys={tsEcr.defaultVisibleKeys}
+        onSave={tsEcr.applySettings}
+      />
+      <TableSettingsModal
+        open={tsEcn.open}
+        onOpenChange={tsEcn.setOpen}
+        tableName={tsEcn.tableName}
+        settingsId={tsEcn.settingsId}
+        defaultVisibleKeys={tsEcn.defaultVisibleKeys}
+        onSave={tsEcn.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/design/design-request/page.tsx b/frontend/app/(main)/COMPANY_9/design/design-request/page.tsx
new file mode 100644
index 00000000..e83c22b3
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/design/design-request/page.tsx
@@ -0,0 +1,781 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import {
+  Plus,
+  Pencil,
+  Trash2,
+  Calendar,
+  Upload,
+  Ruler,
+  FileText,
+  Loader2,
+  Inbox,
+  Save,
+  Settings2,
+} from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import {
+  getDesignRequestList,
+  createDesignRequest,
+  updateDesignRequest,
+  deleteDesignRequest,
+} from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+
+// ========== 타입 ==========
+interface HistoryItem {
+  id?: string;
+  step: string;
+  history_date: string;
+  user_name: string;
+  description: string;
+}
+
+interface DesignRequest {
+  id: string;
+  request_no: string;
+  source_type: string;
+  request_date: string;
+  due_date: string;
+  design_type: string;
+  priority: string;
+  status: string;
+  approval_step: string;
+  target_name: string;
+  customer: string;
+  req_dept: string;
+  requester: string;
+  designer: string;
+  order_no: string;
+  spec: string;
+  change_type: string;
+  drawing_no: string;
+  urgency: string;
+  reason: string;
+  content: string;
+  apply_timing: string;
+  review_memo: string;
+  project_id: string;
+  ecn_no: string;
+  created_date: string;
+  updated_date: string;
+  writer: string;
+  company_code: string;
+  history: HistoryItem[];
+  impact: string[];
+}
+
+// ========== 스타일 맵 ==========
+const STATUS_STYLES: Record<string, string> = {
+  신규접수: "bg-muted text-foreground",
+  접수대기: "bg-muted text-foreground",
+  검토중: "bg-warning/10 text-warning",
+  설계진행: "bg-info/10 text-info",
+  설계검토: "bg-primary/10 text-primary",
+  출도완료: "bg-success/10 text-success",
+  반려: "bg-destructive/10 text-destructive",
+  종료: "bg-muted text-muted-foreground",
+};
+
+const TYPE_STYLES: Record<string, string> = {
+  신규설계: "bg-info/10 text-info",
+  유사설계: "bg-success/10 text-success",
+  개조설계: "bg-warning/10 text-warning",
+};
+
+const PRIORITY_STYLES: Record<string, string> = {
+  긴급: "bg-destructive/10 text-destructive",
+  높음: "bg-warning/10 text-warning",
+  보통: "bg-muted text-foreground",
+  낮음: "bg-success/10 text-success",
+};
+
+const STATUS_PROGRESS: Record<string, number> = {
+  신규접수: 0,
+  접수대기: 0,
+  검토중: 20,
+  설계진행: 50,
+  설계검토: 80,
+  출도완료: 100,
+  반려: 0,
+  종료: 100,
+};
+
+function getProgressColor(p: number) {
+  if (p >= 100) return "bg-success";
+  if (p >= 60) return "bg-warning";
+  if (p >= 20) return "bg-info";
+  return "bg-muted";
+}
+
+function getProgressTextColor(p: number) {
+  if (p >= 100) return "text-success";
+  if (p >= 60) return "text-warning";
+  if (p >= 20) return "text-info";
+  return "text-muted-foreground";
+}
+
+const INITIAL_FORM = {
+  request_no: "",
+  request_date: "",
+  due_date: "",
+  design_type: "",
+  priority: "보통",
+  target_name: "",
+  customer: "",
+  req_dept: "",
+  requester: "",
+  designer: "",
+  order_no: "",
+  spec: "",
+  drawing_no: "",
+  content: "",
+};
+
+// ========== Grid Columns ==========
+const DR_GRID_COLUMNS = [
+  { key: "request_no", label: "의뢰번호" },
+  { key: "design_type", label: "유형" },
+  { key: "status", label: "상태" },
+  { key: "priority", label: "우선순위" },
+  { key: "target_name", label: "설비/제품명" },
+  { key: "customer", label: "고객명" },
+  { key: "designer", label: "설계담당" },
+  { key: "due_date", label: "납기" },
+  { key: "progress", label: "진행률" },
+];
+
+// ========== 메인 컴포넌트 ==========
+export default function DesignRequestPage() {
+  const ts = useTableSettings("c16-design-request", "dsn_design_request", DR_GRID_COLUMNS);
+  const [requests, setRequests] = useState<DesignRequest[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [detailOpen, setDetailOpen] = useState(false);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [form, setForm] = useState(INITIAL_FORM);
+
+  const today = useMemo(() => new Date(), []);
+
+  // 데이터 조회
+  const fetchRequests = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string> = { source_type: "dr" };
+      const res = await getDesignRequestList(params);
+      if (res.success && res.data) {
+        setRequests(res.data);
+      } else {
+        setRequests([]);
+      }
+    } catch {
+      setRequests([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchRequests();
+  }, [fetchRequests]);
+
+  // 클라이언트 사이드 필터링 (DynamicSearchFilter)
+  const filteredRequests = useMemo(() => {
+    if (searchFilters.length === 0) return requests;
+    return requests.filter((item) => {
+      for (const f of searchFilters) {
+        const val = item[f.columnName as keyof DesignRequest];
+        const strVal = val !== undefined && val !== null ? (Array.isArray(val) ? val.join(",") : String(val)) : "";
+        if (f.operator === "contains") {
+          if (!strVal.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (strVal !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(strVal)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && strVal < from) return false;
+          if (to && strVal > to) return false;
+        }
+      }
+      return true;
+    });
+  }, [requests, searchFilters]);
+
+  const selectedItem = useMemo(() => {
+    if (!selectedId) return null;
+    return requests.find((r) => r.id === selectedId) || null;
+  }, [selectedId, requests]);
+
+  const statusCounts = useMemo(() => {
+    return {
+      접수대기: requests.filter((r) => r.status === "접수대기" || r.status === "신규접수").length,
+      설계진행: requests.filter((r) => r.status === "설계진행").length,
+      출도완료: requests.filter((r) => r.status === "출도완료").length,
+    };
+  }, [requests]);
+
+
+  // 채번: 기존 데이터 기반으로 다음 번호 생성
+  const generateNextNo = useCallback(() => {
+    const year = new Date().getFullYear();
+    const existing = requests.filter((r) => r.request_no?.startsWith(`DR-${year}-`));
+    const maxNum = existing.reduce((max, r) => {
+      const parts = r.request_no?.split("-");
+      const num = parts?.length >= 3 ? parseInt(parts[2]) : 0;
+      return num > max ? num : max;
+    }, 0);
+    return `DR-${year}-${String(maxNum + 1).padStart(4, "0")}`;
+  }, [requests]);
+
+  const handleOpenRegister = useCallback(() => {
+    setIsEditMode(false);
+    setEditingId(null);
+    setForm({
+      ...INITIAL_FORM,
+      request_no: generateNextNo(),
+      request_date: new Date().toISOString().split("T")[0],
+    });
+    setModalOpen(true);
+  }, [generateNextNo]);
+
+  const handleOpenEdit = useCallback(() => {
+    if (!selectedItem) return;
+    setIsEditMode(true);
+    setEditingId(selectedItem.id);
+    setForm({
+      request_no: selectedItem.request_no || "",
+      request_date: selectedItem.request_date || "",
+      due_date: selectedItem.due_date || "",
+      design_type: selectedItem.design_type || "",
+      priority: selectedItem.priority || "보통",
+      target_name: selectedItem.target_name || "",
+      customer: selectedItem.customer || "",
+      req_dept: selectedItem.req_dept || "",
+      requester: selectedItem.requester || "",
+      designer: selectedItem.designer || "",
+      order_no: selectedItem.order_no || "",
+      spec: selectedItem.spec || "",
+      drawing_no: selectedItem.drawing_no || "",
+      content: selectedItem.content || "",
+    });
+    setDetailOpen(false);
+    setModalOpen(true);
+  }, [selectedItem]);
+
+  const handleSave = useCallback(async () => {
+    if (!form.target_name.trim()) { toast.error("설비/제품명을 입력해 주세요."); return; }
+    if (!form.design_type) { toast.error("의뢰 유형을 선택해 주세요."); return; }
+    if (!form.due_date) { toast.error("납기를 입력해 주세요."); return; }
+    if (!form.spec.trim()) { toast.error("요구사양을 입력해 주세요."); return; }
+
+    setSaving(true);
+    try {
+      const payload = {
+        request_no: form.request_no,
+        source_type: "dr",
+        request_date: form.request_date,
+        due_date: form.due_date,
+        design_type: form.design_type,
+        priority: form.priority,
+        target_name: form.target_name,
+        customer: form.customer,
+        req_dept: form.req_dept,
+        requester: form.requester,
+        designer: form.designer,
+        order_no: form.order_no,
+        spec: form.spec,
+        drawing_no: form.drawing_no,
+        content: form.content,
+      };
+
+      let res;
+      if (isEditMode && editingId) {
+        res = await updateDesignRequest(editingId, payload);
+      } else {
+        res = await createDesignRequest({
+          ...payload,
+          status: "신규접수",
+          history: [{
+            step: "신규접수",
+            history_date: form.request_date || new Date().toISOString().split("T")[0],
+            user_name: form.requester || "시스템",
+            description: `${form.req_dept || ""}에서 설계의뢰 등록`,
+          }],
+        });
+      }
+
+      if (res.success) {
+        toast.success(isEditMode ? "수정되었어요." : "등록되었어요.");
+        setModalOpen(false);
+        await fetchRequests();
+        if (isEditMode && editingId) {
+          setSelectedId(editingId);
+        } else if (res.data?.id) {
+          setSelectedId(res.data.id);
+        }
+      } else {
+        toast.error(res.message || "저장에 실패했어요.");
+      }
+    } catch (err: any) {
+      toast.error("저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  }, [form, isEditMode, editingId, fetchRequests]);
+
+  const handleDelete = useCallback(async () => {
+    if (!selectedId || !selectedItem) return;
+    const displayNo = selectedItem.request_no || selectedId;
+    if (!confirm(`${displayNo} 설계의뢰를 삭제할까요?`)) return;
+
+    try {
+      const res = await deleteDesignRequest(selectedId);
+      if (res.success) {
+        toast.success("삭제되었어요.");
+        setSelectedId(null);
+        setDetailOpen(false);
+        await fetchRequests();
+      } else {
+        toast.error(res.message || "삭제에 실패했어요.");
+      }
+    } catch (err: any) {
+      toast.error("삭제에 실패했어요.");
+    }
+  }, [selectedId, selectedItem, fetchRequests]);
+
+  const getDueDateInfo = useCallback(
+    (dueDate: string) => {
+      if (!dueDate) return { text: "-", color: "text-muted-foreground" };
+      const due = new Date(dueDate);
+      const diff = Math.ceil((due.getTime() - today.getTime()) / 86400000);
+      if (diff < 0) return { text: `${Math.abs(diff)}일 초과`, color: "text-destructive" };
+      if (diff === 0) return { text: "오늘", color: "text-warning" };
+      if (diff <= 7) return { text: `${diff}일 남음`, color: "text-warning" };
+      return { text: `${diff}일 남음`, color: "text-success" };
+    },
+    [today]
+  );
+
+  const getProgress = useCallback((status: string) => {
+    return STATUS_PROGRESS[status] ?? 0;
+  }, []);
+
+  const handleRowClick = useCallback((id: string) => {
+    setSelectedId(id);
+    setDetailOpen(true);
+  }, []);
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 검색 필터 */}
+      <div className="shrink-0">
+        <DynamicSearchFilter
+          tableName="dsn_design_request"
+          filterId="c16-design-request"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredRequests.length}
+        />
+      </div>
+
+      {/* 현황 카드 */}
+      <div className="grid grid-cols-3 gap-3 shrink-0">
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">접수대기</div>
+          <div className="text-xl font-bold text-info">{statusCounts.접수대기}</div>
+        </div>
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">설계진행</div>
+          <div className="text-xl font-bold text-warning">{statusCounts.설계진행}</div>
+        </div>
+        <div className="rounded-lg border bg-card px-3 py-2 text-left">
+          <div className="text-[10px] text-muted-foreground">출도완료</div>
+          <div className="text-xl font-bold text-success">{statusCounts.출도완료}</div>
+        </div>
+      </div>
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold">설계의뢰 관리</h2>
+          <Badge variant="secondary" className="font-mono">{filteredRequests.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" onClick={handleOpenRegister}>
+            <Plus className="w-4 h-4 mr-1.5" /> 설계의뢰 등록
+          </Button>
+          <div className="mx-1 h-6 w-px bg-border" />
+          <Button variant="outline" size="sm" disabled={!selectedId} onClick={handleOpenEdit}>
+            <Pencil className="w-4 h-4 mr-1.5" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 테이블 영역 */}
+      <div className="flex-1 flex flex-col overflow-hidden border rounded-lg bg-card">
+        <EDataTable<DesignRequest>
+          columns={ts.visibleColumns.map((col): EDataTableColumn<DesignRequest> => ({
+            key: col.key,
+            label: col.label,
+            width: col.key === "request_no" ? "w-[100px]" : col.key === "design_type" ? "w-[70px]" : col.key === "status" ? "w-[70px]" : col.key === "priority" ? "w-[60px]" : col.key === "customer" ? "w-[90px]" : col.key === "designer" ? "w-[70px]" : col.key === "due_date" ? "w-[85px]" : col.key === "progress" ? "w-[65px]" : undefined,
+            align: (col.key === "design_type" || col.key === "status" || col.key === "priority" || col.key === "progress") ? "center" : undefined,
+            render: col.key === "request_no"
+              ? (val: any) => <span className="text-[11px] font-semibold text-primary">{val || "-"}</span>
+              : col.key === "design_type"
+              ? (val: any) => val ? <Badge className={cn("text-[9px]", TYPE_STYLES[val])}>{val}</Badge> : <span>-</span>
+              : col.key === "status"
+              ? (val: any) => <Badge className={cn("text-[9px]", STATUS_STYLES[val])}>{val}</Badge>
+              : col.key === "priority"
+              ? (val: any) => <Badge className={cn("text-[9px]", PRIORITY_STYLES[val])}>{val}</Badge>
+              : col.key === "progress"
+              ? (_val: any, row: DesignRequest) => {
+                  const progress = STATUS_PROGRESS[row.status] ?? 0;
+                  return (
+                    <div className="flex items-center gap-1.5">
+                      <div className="h-1.5 w-12 overflow-hidden rounded-full bg-muted">
+                        <div className={cn("h-full rounded-full transition-all", getProgressColor(progress))} style={{ width: `${progress}%` }} />
+                      </div>
+                      <span className={cn("text-[10px] font-semibold", getProgressTextColor(progress))}>{progress}%</span>
+                    </div>
+                  );
+                }
+              : undefined,
+          }))}
+          data={ts.groupData(filteredRequests)}
+          loading={loading}
+          emptyMessage="등록된 설계의뢰가 없어요"
+          selectedId={selectedId}
+          onSelect={(id) => setSelectedId(id)}
+          onRowClick={(row) => handleRowClick(row.id)}
+          draggableColumns={false}
+        />
+      </div>
+
+      {/* 상세 정보 다이얼로그 */}
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="max-w-[900px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{selectedItem ? `설계의뢰 상세 — ${selectedItem.request_no}` : "설계의뢰 상세"}</DialogTitle>
+            <DialogDescription>설계의뢰의 상세 정보를 확인해요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        {selectedItem && (
+          <div className="space-y-4">
+            {/* 기본 정보 */}
+            <div>
+              <div className="mb-2 text-xs font-bold">
+                <FileText className="mr-1 inline h-3.5 w-3.5" />기본 정보
+              </div>
+              <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-lg border bg-muted/10 p-3">
+                <InfoRow label="의뢰번호" value={<span className="font-semibold text-primary">{selectedItem.request_no || "-"}</span>} />
+                <InfoRow label="상태" value={<Badge className={cn("text-[10px]", STATUS_STYLES[selectedItem.status])}>{selectedItem.status}</Badge>} />
+                <InfoRow label="유형" value={selectedItem.design_type ? <Badge className={cn("text-[10px]", TYPE_STYLES[selectedItem.design_type])}>{selectedItem.design_type}</Badge> : "-"} />
+                <InfoRow label="우선순위" value={<Badge className={cn("text-[10px]", PRIORITY_STYLES[selectedItem.priority])}>{selectedItem.priority}</Badge>} />
+                <InfoRow label="설비/제품명" value={selectedItem.target_name || "-"} />
+                <InfoRow label="고객명" value={selectedItem.customer || "-"} />
+                <InfoRow label="의뢰부서 / 의뢰자" value={`${selectedItem.req_dept || "-"} / ${selectedItem.requester || "-"}`} />
+                <InfoRow label="설계담당" value={selectedItem.designer || "미배정"} />
+                <InfoRow label="의뢰일자" value={selectedItem.request_date || "-"} />
+                <InfoRow
+                  label="납기"
+                  value={
+                    selectedItem.due_date ? (
+                      <span>
+                        {selectedItem.due_date}{" "}
+                        <span className={cn("text-[11px]", getDueDateInfo(selectedItem.due_date).color)}>
+                          ({getDueDateInfo(selectedItem.due_date).text})
+                        </span>
+                      </span>
+                    ) : "-"
+                  }
+                />
+                <InfoRow label="수주번호" value={selectedItem.order_no || "-"} />
+                <InfoRow
+                  label="진행률"
+                  value={
+                    (() => {
+                      const progress = getProgress(selectedItem.status);
+                      return (
+                        <div className="flex items-center gap-2">
+                          <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
+                            <div className={cn("h-full rounded-full", getProgressColor(progress))} style={{ width: `${progress}%` }} />
+                          </div>
+                          <span className={cn("text-xs font-bold", getProgressTextColor(progress))}>{progress}%</span>
+                        </div>
+                      );
+                    })()
+                  }
+                />
+              </div>
+            </div>
+
+            {/* 요구사양 */}
+            <div>
+              <div className="mb-2 text-xs font-bold">
+                <FileText className="mr-1 inline h-3.5 w-3.5" />요구사양
+              </div>
+              <div className="rounded-lg border bg-muted/10 p-3">
+                <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed">{selectedItem.spec || "-"}</pre>
+                {selectedItem.drawing_no && (
+                  <div className="mt-2 text-xs">
+                    <span className="text-muted-foreground">참조 도면: </span>
+                    <span className="text-primary">{selectedItem.drawing_no}</span>
+                  </div>
+                )}
+                {selectedItem.content && (
+                  <div className="mt-1 text-xs">
+                    <span className="text-muted-foreground">비고: </span>{selectedItem.content}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* 진행 이력 */}
+            {selectedItem.history && selectedItem.history.length > 0 && (
+              <div>
+                <div className="mb-2 text-xs font-bold">
+                  <Calendar className="mr-1 inline h-3.5 w-3.5" />진행 이력
+                </div>
+                <div className="space-y-0">
+                  {selectedItem.history.map((h, idx) => {
+                    const isLast = idx === selectedItem.history.length - 1;
+                    const isDone = h.step === "출도완료" || h.step === "종료";
+                    return (
+                      <div key={h.id || idx} className="flex gap-3">
+                        <div className="flex flex-col items-center">
+                          <div
+                            className={cn(
+                              "mt-1 h-2.5 w-2.5 shrink-0 rounded-full border-2",
+                              isLast && !isDone
+                                ? "border-primary bg-primary"
+                                : isDone || !isLast
+                                  ? "border-success bg-success"
+                                  : "border-muted-foreground bg-muted-foreground"
+                            )}
+                          />
+                          {!isLast && <div className="w-px flex-1 bg-border" />}
+                        </div>
+                        <div className="pb-3">
+                          <Badge className={cn("text-[9px]", STATUS_STYLES[h.step])}>{h.step}</Badge>
+                          <div className="mt-0.5 text-xs">{h.description}</div>
+                          <div className="text-[10px] text-muted-foreground">{h.history_date} · {h.user_name}</div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+          </div>
+          <DialogFooter>
+            {selectedItem && (
+              <>
+                <Button variant="outline" size="sm" onClick={handleOpenEdit}>
+                  <Pencil className="mr-1 h-3.5 w-3.5" />수정
+                </Button>
+                <Button variant="outline" size="sm" className="text-destructive hover:text-destructive" onClick={handleDelete}>
+                  <Trash2 className="mr-1 h-3.5 w-3.5" />삭제
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DialogContent className="max-w-5xl w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "설계의뢰 수정" : "설계의뢰 등록"}</DialogTitle>
+            <DialogDescription>{isEditMode ? "설계의뢰 정보를 수정해요." : "새 설계의뢰를 등록해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col md:flex-row gap-6 p-6">
+          {/* 좌측: 기본 정보 */}
+          <div className="md:w-[420px] shrink-0 space-y-4">
+            <h3 className="text-sm font-semibold pb-2 border-b">의뢰 기본 정보</h3>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰번호</Label>
+              <Input value={form.request_no} readOnly className="h-9 bg-muted cursor-not-allowed" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰일자</Label>
+                <Input type="date" value={form.request_date} onChange={(e) => setForm((p) => ({ ...p, request_date: e.target.value }))} className="h-9" />
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">납기 <span className="text-destructive">*</span></Label>
+                <Input type="date" value={form.due_date} onChange={(e) => setForm((p) => ({ ...p, due_date: e.target.value }))} className="h-9" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰 유형 <span className="text-destructive">*</span></Label>
+                <Select value={form.design_type} onValueChange={(v) => setForm((p) => ({ ...p, design_type: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["신규설계", "유사설계", "개조설계"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">우선순위 <span className="text-destructive">*</span></Label>
+                <Select value={form.priority} onValueChange={(v) => setForm((p) => ({ ...p, priority: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설비/제품명 <span className="text-destructive">*</span></Label>
+              <Input value={form.target_name} onChange={(e) => setForm((p) => ({ ...p, target_name: e.target.value }))} placeholder="설비 또는 제품명 입력" className="h-9" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰부서</Label>
+                <Select value={form.req_dept} onValueChange={(v) => setForm((p) => ({ ...p, req_dept: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {["영업팀", "기획팀", "생산팀", "품질팀"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">의뢰자</Label>
+                <Input value={form.requester} onChange={(e) => setForm((p) => ({ ...p, requester: e.target.value }))} placeholder="의뢰자명" className="h-9" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">고객명</Label>
+                <Input value={form.customer} onChange={(e) => setForm((p) => ({ ...p, customer: e.target.value }))} placeholder="고객/거래처명" className="h-9" />
+              </div>
+              <div>
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">수주번호</Label>
+                <Input value={form.order_no} onChange={(e) => setForm((p) => ({ ...p, order_no: e.target.value }))} placeholder="관련 수주번호" className="h-9" />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설계담당자</Label>
+              <Select value={form.designer} onValueChange={(v) => setForm((p) => ({ ...p, designer: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  {["이설계", "박도면", "최기구", "김전장"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* 우측: 상세 내용 */}
+          <div className="flex min-w-0 flex-1 flex-col gap-4">
+            <h3 className="text-sm font-semibold pb-2 border-b">요구사양 및 설명</h3>
+            <div className="flex-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">요구사양 <span className="text-destructive">*</span></Label>
+              <Textarea
+                value={form.spec}
+                onChange={(e) => setForm((p) => ({ ...p, spec: e.target.value }))}
+                placeholder={"고객 요구사양 또는 설비 사양을 상세히 기술해주세요\n\n예시:\n- 작업 대상: SUS304 Φ20 파이프\n- 가공 방식: 자동 절단 + 면취\n- 생산 속도: 60EA/분\n- 치수 공차: ±0.1mm"}
+                className="min-h-[180px]"
+              />
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">참조 도면번호</Label>
+              <Input value={form.drawing_no} onChange={(e) => setForm((p) => ({ ...p, drawing_no: e.target.value }))} placeholder="유사 설비명 또는 참조 도면번호" className="h-9" />
+            </div>
+            <div>
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">비고</Label>
+              <Textarea value={form.content} onChange={(e) => setForm((p) => ({ ...p, content: e.target.value }))} placeholder="기타 참고 사항" className="min-h-[70px]" rows={3} />
+            </div>
+            <div>
+              <h3 className="text-sm font-semibold pb-2 border-b mb-2">첨부파일</h3>
+              <div className="cursor-pointer rounded-lg border-2 border-dashed p-5 text-center transition-colors hover:border-primary hover:bg-accent/50">
+                <Upload className="mx-auto h-6 w-6 text-muted-foreground" />
+                <div className="mt-1.5 text-sm text-muted-foreground">클릭하여 파일 첨부 (사양서, 도면, 사진 등)</div>
+              </div>
+            </div>
+          </div>
+        </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setModalOpen(false)} disabled={saving}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
+
+// ========== 정보 행 서브컴포넌트 ==========
+function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex items-start gap-1">
+      <span className="min-w-[80px] shrink-0 text-[11px] text-muted-foreground">{label}</span>
+      <span className="text-xs font-medium">{value}</span>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/design/my-work/page.tsx b/frontend/app/(main)/COMPANY_9/design/my-work/page.tsx
new file mode 100644
index 00000000..8c136cb9
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/design/my-work/page.tsx
@@ -0,0 +1,1958 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import {
+  Circle,
+  CheckCircle2,
+  AlertCircle,
+  Clock,
+  LayoutGrid,
+  List,
+  Timer,
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  ChevronUp,
+  Plus,
+  Trash2,
+  Paperclip,
+  ShoppingCart,
+  Handshake,
+  FileText,
+  Image as ImageIcon,
+  Ruler,
+  Box,
+  FolderOpen,
+  Upload,
+  X,
+  Pencil,
+  Calendar,
+  Search,
+  RotateCcw,
+  ClipboardList,
+  FileEdit,
+  Inbox,
+  Loader2,
+  PointerIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Progress } from "@/components/ui/progress";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Slider } from "@/components/ui/slider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { useAuth } from "@/hooks/useAuth";
+import {
+  getMyWork,
+  updateTask,
+  createWorkLog,
+  deleteWorkLog,
+  createSubItem,
+  updateSubItem,
+  deleteSubItem,
+  createPurchaseReq,
+  createCoopReq,
+  addCoopResponse,
+} from "@/lib/api/design";
+
+// ========== 타입 ==========
+interface SubItem {
+  id: number | string;
+  _id?: string;
+  name: string;
+  weight: number;
+  progress: number;
+  status: string;
+}
+interface Attachment {
+  id: number;
+  name: string;
+  type: string;
+  size: string;
+}
+interface PurchaseReq {
+  id: number | string;
+  _id?: string;
+  item: string;
+  qty: number;
+  unit: string;
+  reason: string;
+  status: string;
+}
+interface CoopResponse {
+  date: string;
+  user: string;
+  content: string;
+}
+interface CoopReq {
+  id: string;
+  _id?: string;
+  toUser: string;
+  toDept: string;
+  title: string;
+  desc: string;
+  status: string;
+  dueDate: string;
+  responses: CoopResponse[];
+}
+interface WorkLog {
+  _id?: string;
+  startDt: string;
+  endDt: string;
+  hours: number;
+  desc: string;
+  subItemId: number | string | null;
+  attachments: Attachment[];
+  purchaseReqs: PurchaseReq[];
+  coopReqs: CoopReq[];
+}
+interface Task {
+  _id?: string;
+  name: string;
+  category: string;
+  assignee: string;
+  start: string;
+  end: string;
+  status: string;
+  progress: number;
+  priority: string;
+  subItems: SubItem[];
+  workLogs: WorkLog[];
+}
+interface Project {
+  id: string;
+  project_id?: string;
+  name: string;
+  customer: string;
+  status: string;
+  tasks: Task[];
+}
+interface MyTask extends Task {
+  projectId: string;
+  projectName: string;
+}
+
+// ========== 유틸 ==========
+const USER_INFO: Record<string, { role: string; color: string }> = {
+  최기구: { role: "기구설계 파트", color: "bg-primary" },
+  이설계: { role: "기구설계 파트", color: "bg-chart-2" },
+  김전장: { role: "전장설계 파트", color: "bg-warning" },
+  박도면: { role: "기구설계 파트", color: "bg-chart-3" },
+  정SW: { role: "SW개발 파트", color: "bg-destructive" },
+  한조립: { role: "조립/시운전 파트", color: "bg-chart-1" },
+  박구매: { role: "구매/조달 파트", color: "bg-info" },
+  팀장: { role: "설계팀 팀장", color: "bg-success" },
+};
+
+const USERS = Object.keys(USER_INFO);
+
+function calcHours(s: string, e: string): number {
+  if (!s || !e) return 0;
+  const d = (new Date(e).getTime() - new Date(s).getTime()) / 3600000;
+  return d > 0 ? Math.round(d * 10) / 10 : 0;
+}
+
+function calcAutoProgress(task: Task): number {
+  if (!task.subItems?.length) return task.progress;
+  const tw = task.subItems.reduce((s, i) => s + i.weight, 0);
+  if (!tw) return 0;
+  return Math.round(
+    task.subItems.reduce((s, i) => s + (i.progress * i.weight) / tw, 0)
+  );
+}
+
+function fmtDtShort(dt: string) {
+  if (!dt) return "";
+  return dt.substring(5, 10) + " " + dt.substring(11, 16);
+}
+
+function getWeekStart(d: Date): Date {
+  const r = new Date(d);
+  const day = r.getDay();
+  r.setDate(r.getDate() - day + (day === 0 ? -6 : 1));
+  r.setHours(0, 0, 0, 0);
+  return r;
+}
+
+function getFileIcon(type: string) {
+  switch (type) {
+    case "image":
+      return <ImageIcon className="h-4 w-4" />;
+    case "drawing":
+      return <Ruler className="h-4 w-4" />;
+    case "3d":
+      return <Box className="h-4 w-4" />;
+    case "document":
+      return <FileText className="h-4 w-4" />;
+    default:
+      return <FolderOpen className="h-4 w-4" />;
+  }
+}
+
+function getFileType(name: string): string {
+  const ext = (name.split(".").pop() || "").toLowerCase();
+  if (["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(ext))
+    return "image";
+  if (["dwg", "dxf"].includes(ext)) return "drawing";
+  if (["step", "stp", "igs", "stl"].includes(ext)) return "3d";
+  if (
+    ["pdf", "doc", "docx", "xlsx", "xls", "pptx", "txt", "csv"].includes(ext)
+  )
+    return "document";
+  return "other";
+}
+
+function getProgressColor(p: number) {
+  if (p >= 80) return "text-success";
+  if (p >= 40) return "text-primary";
+  if (p > 0) return "text-warning";
+  return "text-muted-foreground";
+}
+
+function getProgressBg(p: number) {
+  if (p >= 80) return "bg-success";
+  if (p >= 40) return "bg-primary";
+  if (p > 0) return "bg-warning";
+  return "bg-muted";
+}
+
+const STATUS_STYLES: Record<string, string> = {
+  대기: "bg-muted text-foreground",
+  진행중: "bg-primary/10 text-primary",
+  검토중: "bg-warning/10 text-warning",
+  완료: "bg-success/10 text-success",
+  지연: "bg-destructive/10 text-destructive",
+};
+
+const PRIORITY_STYLES: Record<string, string> = {
+  긴급: "bg-destructive/10 text-destructive",
+  높음: "bg-warning/10 text-warning",
+  보통: "bg-muted text-foreground",
+  낮음: "bg-success/10 text-success",
+};
+
+const PR_STATUS_STYLES: Record<string, string> = {
+  요청: "bg-destructive/10 text-destructive",
+  견적중: "bg-warning/10 text-warning",
+  발주완료: "bg-primary/10 text-primary",
+  입고완료: "bg-success/10 text-success",
+};
+
+const CR_STATUS_STYLES: Record<string, string> = {
+  요청: "bg-warning/10 text-warning",
+  접수: "bg-warning/10 text-warning",
+  진행중: "bg-primary/10 text-primary",
+  완료: "bg-success/10 text-success",
+};
+
+const CR_NEXT: Record<string, string> = {
+  요청: "접수",
+  접수: "진행중",
+  진행중: "완료",
+};
+
+// ========== API 응답 매핑 ==========
+function mapApiTaskToTask(api: any): Task {
+  const subItems: SubItem[] = (api.sub_items || []).map((s: any) => ({
+    id: s.id,
+    _id: String(s.id),
+    name: s.name || "",
+    weight: Number(s.weight) || 0,
+    progress: Number(s.progress) || 0,
+    status: s.status || "대기",
+  }));
+  const workLogs: WorkLog[] = (api.work_logs || []).map((w: any) => {
+    const attachments: Attachment[] = (w.attachments || []).map((a: any) => ({
+      id: a.id ?? a.file_name?.length ?? 0,
+      name: a.file_name || a.name || "",
+      type: a.file_type || getFileType(a.file_name || ""),
+      size: a.file_size || a.size || "",
+    }));
+    const purchaseReqs: PurchaseReq[] = (w.purchase_reqs || []).map((pr: any) => ({
+      id: pr.id,
+      _id: pr.id ? String(pr.id) : undefined,
+      item: pr.item || "",
+      qty: Number(pr.qty) || 1,
+      unit: pr.unit || "EA",
+      reason: pr.reason || "",
+      status: pr.status || "요청",
+    }));
+    const coopReqs: CoopReq[] = (w.coop_reqs || []).map((c: any) => ({
+      id: c.id || `CR-${String(c.id)}`,
+      _id: c.id ? String(c.id) : undefined,
+      toUser: c.to_user || "",
+      toDept: c.to_dept || "",
+      title: c.title || "",
+      desc: c.description || c.desc || "",
+      status: c.status || "요청",
+      dueDate: c.due_date || "",
+      responses: (c.responses || []).map((r: any) => ({
+        date: r.response_date || r.date || "",
+        user: r.user_name || r.user || "",
+        content: r.content || "",
+      })),
+    }));
+    return {
+      _id: w.id ? String(w.id) : undefined,
+      startDt: w.start_dt || "",
+      endDt: w.end_dt || "",
+      hours: Number(w.hours) || 0,
+      desc: w.description || w.desc || "",
+      subItemId: w.sub_item_id ?? null,
+      attachments,
+      purchaseReqs,
+      coopReqs,
+    };
+  });
+  return {
+    _id: api.id ? String(api.id) : undefined,
+    name: api.name || "",
+    category: api.category || "",
+    assignee: api.assignee || "",
+    start: api.start_date || api.start || "",
+    end: api.end_date || api.end || "",
+    status: api.status || "대기",
+    progress: Number(api.progress) || 0,
+    priority: api.priority || "보통",
+    subItems,
+    workLogs,
+  };
+}
+
+function mapApiTasksToProjects(apiTasks: any[]): Project[] {
+  const projectMap = new Map<string, Project>();
+  for (const api of apiTasks) {
+    const pId = api.project_id || api.project_no;
+    const pNo = api.project_no || api.project_id || "";
+    if (!projectMap.has(pId)) {
+      projectMap.set(pId, {
+        id: pNo,
+        project_id: pId,
+        name: api.project_name || "",
+        customer: api.project_customer || "",
+        status: api.project_status || "진행중",
+        tasks: [],
+      });
+    }
+    projectMap.get(pId)!.tasks.push(mapApiTaskToTask(api));
+  }
+  return Array.from(projectMap.values());
+}
+
+// ========== 메인 컴포넌트 ==========
+export default function MyWorkPage() {
+  const { userName } = useAuth();
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentUser, setCurrentUser] = useState(userName || "최기구");
+  const [viewMode, setViewMode] = useState<"kanban" | "list" | "timesheet">("kanban");
+  const [timesheetWeekOffset, setTimesheetWeekOffset] = useState(0);
+
+  // 필터
+  const [filterProject, setFilterProject] = useState("");
+  const [filterStatus, setFilterStatus] = useState("");
+  const [filterPriority, setFilterPriority] = useState("");
+  const [filterCategory, setFilterCategory] = useState("");
+  const [filterKeyword, setFilterKeyword] = useState("");
+
+  // 선택된 업무
+  const [selectedTaskKey, setSelectedTaskKey] = useState<string | null>(null);
+  const [selectedSubItemId, setSelectedSubItemId] = useState<number | string>("__unassigned__");
+
+  // 편집 상태
+  const [editingLogIdx, setEditingLogIdx] = useState<number>(-1);
+  const [editForm, setEditForm] = useState({ startDt: "", endDt: "", desc: "" });
+
+  // 수행항목 추가
+  const [newSiName, setNewSiName] = useState("");
+  const [newSiWeight, setNewSiWeight] = useState("");
+
+  // 모달
+  const [attModalOpen, setAttModalOpen] = useState(false);
+  const [prModalOpen, setPrModalOpen] = useState(false);
+  const [crModalOpen, setCrModalOpen] = useState(false);
+  const [modalLogIdx, setModalLogIdx] = useState(-1);
+  const [modalAttachments, setModalAttachments] = useState<Attachment[]>([]);
+  const [modalPurchaseReqs, setModalPurchaseReqs] = useState<PurchaseReq[]>([]);
+  const [modalCoopReqs, setModalCoopReqs] = useState<CoopReq[]>([]);
+
+  // 구매요청 폼
+  const [prForm, setPrForm] = useState({ item: "", qty: "1", unit: "EA", reason: "", status: "요청" });
+  // 협조요청 폼
+  const [crForm, setCrForm] = useState({ title: "", toUser: "", desc: "", dueDate: "" });
+
+  const today = useMemo(() => new Date(), []);
+  const todayStr = useMemo(() => {
+    const dn = ["일", "월", "화", "수", "목", "금", "토"];
+    return `${today.getFullYear()}.${String(today.getMonth() + 1).padStart(2, "0")}.${String(today.getDate()).padStart(2, "0")} (${dn[today.getDay()]})`;
+  }, [today]);
+
+  const projectsRef = React.useRef<Project[]>([]);
+  projectsRef.current = projects;
+
+  const fetchMyWork = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: { status?: string; project_id?: string } = {};
+      if (filterStatus && filterStatus !== "__all__") params.status = filterStatus;
+      if (filterProject && filterProject !== "__all__") {
+        const proj = projectsRef.current.find((p) => p.id === filterProject || p.project_id === filterProject);
+        if (proj?.project_id) params.project_id = proj.project_id;
+        else params.project_id = filterProject;
+      }
+      const res = await getMyWork(params);
+      if (res.success && res.data) {
+        setProjects(mapApiTasksToProjects(res.data));
+      } else {
+        setProjects([]);
+      }
+    } catch {
+      toast.error("업무 목록을 불러오는데 실패했어요.");
+      setProjects([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [filterStatus, filterProject]);
+
+  useEffect(() => {
+    if (userName) setCurrentUser(userName);
+  }, [userName]);
+
+  useEffect(() => {
+    fetchMyWork();
+  }, [fetchMyWork]);
+
+  const projectList = useMemo(() => {
+    const ids = new Set<string>();
+    projects.forEach((p) => ids.add(`${p.id}|${p.name}`));
+    return Array.from(ids).map((v) => {
+      const [id, name] = v.split("|");
+      return { id, name };
+    });
+  }, [projects]);
+
+  // 내 업무 목록
+  const myTasks = useMemo<MyTask[]>(() => {
+    const tasks: MyTask[] = [];
+    projects.forEach((p) =>
+      p.tasks.forEach((t) => {
+        if (t.assignee === currentUser)
+          tasks.push({ ...t, projectId: p.id, projectName: p.name });
+      })
+    );
+    return tasks;
+  }, [projects, currentUser]);
+
+  // 필터링된 업무
+  const filteredTasks = useMemo(() => {
+    return myTasks.filter((t) => {
+      if (filterProject && filterProject !== "__all__" && t.projectId !== filterProject) return false;
+      if (filterStatus && filterStatus !== "__all__" && t.status !== filterStatus) return false;
+      if (filterPriority && filterPriority !== "__all__" && (t.priority || "보통") !== filterPriority) return false;
+      if (filterCategory && filterCategory !== "__all__" && t.category !== filterCategory) return false;
+      if (filterKeyword && !t.name.toLowerCase().includes(filterKeyword.toLowerCase()) && !t.projectName.toLowerCase().includes(filterKeyword.toLowerCase())) return false;
+      return true;
+    });
+  }, [myTasks, filterProject, filterStatus, filterPriority, filterCategory, filterKeyword]);
+
+  // 수신된 협조요청
+  const receivedCoops = useMemo(() => {
+    const coops: (CoopReq & { projectId: string; projectName: string; taskName: string; fromUser: string })[] = [];
+    projects.forEach((p) =>
+      p.tasks.forEach((t) =>
+        (t.workLogs || []).forEach((wl) =>
+          (wl.coopReqs || []).forEach((cr) => {
+            if (cr.toUser === currentUser && cr.status !== "완료")
+              coops.push({ ...cr, projectId: p.id, projectName: p.name, taskName: t.name, fromUser: t.assignee });
+          })
+        )
+      )
+    );
+    return coops;
+  }, [projects, currentUser]);
+
+  // 선택된 업무 참조
+  const selectedTask = useMemo(() => {
+    if (!selectedTaskKey) return null;
+    const [pid, tname] = selectedTaskKey.split("||");
+    for (const p of projects) {
+      if (p.id === pid) {
+        const t = p.tasks.find((task) => task.name === tname);
+        if (t) return { task: t, projectId: p.id, projectName: p.name };
+      }
+    }
+    return null;
+  }, [selectedTaskKey, projects]);
+
+  // 통계
+  const stats = useMemo(() => {
+    const total = myTasks.length + receivedCoops.length;
+    const progress = myTasks.filter((t) => t.status === "진행중").length;
+    const done = myTasks.filter((t) => t.status === "완료").length;
+    const delay = myTasks.filter((t) => t.status !== "완료" && new Date(t.end) < today).length;
+    const ws = getWeekStart(today);
+    const we = new Date(ws);
+    we.setDate(we.getDate() + 6);
+    let wh = 0;
+    myTasks.forEach((t) =>
+      (t.workLogs || []).forEach((l) => {
+        const ld = new Date(l.startDt);
+        if (ld >= ws && ld <= we) wh += l.hours;
+      })
+    );
+    return { total, progress, done, delay, weekHours: wh };
+  }, [myTasks, receivedCoops, today]);
+
+  const handleSelectTask = useCallback((pid: string, tname: string) => {
+    setSelectedTaskKey(`${pid}||${tname}`);
+    setEditingLogIdx(-1);
+    setSelectedSubItemId("__unassigned__");
+  }, []);
+
+  const handleResetFilter = useCallback(() => {
+    setFilterProject("");
+    setFilterStatus("");
+    setFilterPriority("");
+    setFilterCategory("");
+    setFilterKeyword("");
+  }, []);
+
+  // 업무 데이터 변경 헬퍼
+  const updateProjects = useCallback((updater: (draft: Project[]) => void) => {
+    setProjects((prev) => {
+      const copy = JSON.parse(JSON.stringify(prev));
+      updater(copy);
+      return copy;
+    });
+  }, []);
+
+  const getTaskRef = useCallback(
+    (projectId: string, taskName: string) => {
+      for (const p of projects) {
+        if (p.id === projectId) {
+          return p.tasks.find((t) => t.name === taskName) || null;
+        }
+      }
+      return null;
+    },
+    [projects]
+  );
+
+  // 수행항목 추가
+  const handleAddSubItem = useCallback(async () => {
+    if (!selectedTask || !newSiName.trim()) return;
+    const w = parseInt(newSiWeight) || 0;
+    if (w <= 0) return;
+    const taskId = selectedTask.task._id;
+    if (!taskId) return;
+    const res = await createSubItem(taskId, { name: newSiName.trim(), weight: w, progress: 0, status: "대기" });
+    if (res.success) {
+      toast.success("수행항목이 추가되었어요.");
+      setNewSiName("");
+      setNewSiWeight("");
+      fetchMyWork();
+    } else {
+      toast.error(res.message || "수행항목 추가에 실패했어요.");
+    }
+  }, [selectedTask, newSiName, newSiWeight, fetchMyWork]);
+
+  // 수행항목 삭제
+  const handleDeleteSubItem = useCallback(
+    async (idx: number) => {
+      if (!selectedTask) return;
+      const si = selectedTask.task.subItems[idx];
+      const siId = si?._id ?? si?.id;
+      if (siId) {
+        const res = await deleteSubItem(String(siId));
+        if (res.success) {
+          toast.success("수행항목이 삭제되었어요.");
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "수행항목 삭제에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t) {
+                t.subItems.splice(idx, 1);
+                t.progress = calcAutoProgress(t);
+              }
+            }
+          }
+        });
+      }
+    },
+    [selectedTask, updateProjects, fetchMyWork]
+  );
+
+  // 수행항목 체크 토글
+  const handleToggleSubCheck = useCallback(
+    async (idx: number) => {
+      if (!selectedTask) return;
+      const si = selectedTask.task.subItems[idx];
+      const siId = si?._id ?? si?.id;
+      const newProgress = (si?.progress ?? 0) >= 100 ? 0 : 100;
+      const newStatus = newProgress >= 100 ? "완료" : "대기";
+      if (siId) {
+        const res = await updateSubItem(String(siId), { progress: newProgress, status: newStatus });
+        if (res.success) {
+          toast.success("수행항목이 업데이트되었어요.");
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "수행항목 업데이트에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t && t.subItems[idx]) {
+                t.subItems[idx].progress = newProgress;
+                t.subItems[idx].status = newStatus;
+                t.progress = calcAutoProgress(t);
+              }
+            }
+          }
+        });
+      }
+    },
+    [selectedTask, updateProjects, fetchMyWork]
+  );
+
+  // 수행항목 진행률 변경
+  const handleUpdateSubProgress = useCallback(
+    async (siId: number | string, val: number) => {
+      if (!selectedTask) return;
+      const si = selectedTask.task.subItems.find((s) => s.id === siId || s._id === String(siId));
+      const apiId = si?._id ?? si?.id;
+      if (apiId) {
+        const res = await updateSubItem(String(apiId), {
+          progress: val,
+          status: val >= 100 ? "완료" : val > 0 ? "진행중" : "대기",
+        });
+        if (res.success) {
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "진행률 업데이트에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t) {
+                const subSi = t.subItems.find((s) => s.id === siId || s._id === String(siId));
+                if (subSi) {
+                  subSi.progress = val;
+                  subSi.status = val >= 100 ? "완료" : val > 0 ? "진행중" : "대기";
+                  t.progress = calcAutoProgress(t);
+                }
+              }
+            }
+          }
+        });
+      }
+    },
+    [selectedTask, updateProjects, fetchMyWork]
+  );
+
+  // 수행기록 편집 시작
+  const handleStartEdit = useCallback(
+    (idx: number) => {
+      if (!selectedTask) return;
+      const log = selectedTask.task.workLogs[idx];
+      if (log) {
+        setEditForm({ startDt: log.startDt, endDt: log.endDt, desc: log.desc });
+      }
+      setEditingLogIdx(idx);
+    },
+    [selectedTask]
+  );
+
+  // 새 기록 추가 시작
+  const handleStartNewLog = useCallback(
+    (siId: number | string | null) => {
+      const now = new Date();
+      const ds = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+      setEditForm({ startDt: `${ds}T08:00`, endDt: `${ds}T17:00`, desc: "" });
+      setEditingLogIdx(-2);
+      if (siId === null) setSelectedSubItemId("__unassigned__");
+      else setSelectedSubItemId(siId);
+    },
+    []
+  );
+
+  // 기록 저장
+  const handleSaveLog = useCallback(
+    async (logIdx: number, siId: number | string | null) => {
+      if (!selectedTask) return;
+      if (!editForm.startDt || !editForm.endDt || !editForm.desc.trim()) return;
+      const hours = calcHours(editForm.startDt, editForm.endDt);
+      if (hours <= 0) return;
+      const taskId = selectedTask.task._id;
+      if (!taskId) return;
+      if (logIdx < 0) {
+        const res = await createWorkLog(taskId, {
+          start_dt: editForm.startDt,
+          end_dt: editForm.endDt,
+          hours,
+          description: editForm.desc.trim(),
+          sub_item_id: siId ?? null,
+        });
+        if (res.success) {
+          toast.success("작업일지가 등록되었어요.");
+          setEditingLogIdx(-1);
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "작업일지 등록에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t) {
+                t.workLogs[logIdx] = { ...t.workLogs[logIdx], startDt: editForm.startDt, endDt: editForm.endDt, hours, desc: editForm.desc.trim(), subItemId: siId, attachments: t.workLogs[logIdx].attachments || [], purchaseReqs: t.workLogs[logIdx].purchaseReqs || [], coopReqs: t.workLogs[logIdx].coopReqs || [] };
+              }
+            }
+          }
+        });
+        setEditingLogIdx(-1);
+      }
+    },
+    [selectedTask, editForm, updateProjects, fetchMyWork]
+  );
+
+  // 기록 삭제
+  const handleDeleteLog = useCallback(
+    async (idx: number) => {
+      if (!selectedTask) return;
+      const log = selectedTask.task.workLogs[idx];
+      const workLogId = log?._id;
+      if (workLogId) {
+        const res = await deleteWorkLog(String(workLogId));
+        if (res.success) {
+          toast.success("작업일지가 삭제되었어요.");
+          setEditingLogIdx(-1);
+          fetchMyWork();
+        } else {
+          toast.error(res.message || "작업일지 삭제에 실패했어요.");
+        }
+      } else {
+        updateProjects((draft) => {
+          for (const p of draft) {
+            if (p.id === selectedTask.projectId) {
+              const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+              if (t) t.workLogs.splice(idx, 1);
+            }
+          }
+        });
+        setEditingLogIdx(-1);
+      }
+    },
+    [selectedTask, updateProjects, fetchMyWork]
+  );
+
+  // 모달: 첨부파일
+  const openAttModal = useCallback(
+    (logIdx: number) => {
+      if (!selectedTask) return;
+      setModalLogIdx(logIdx);
+      const atts = logIdx >= 0 ? [...(selectedTask.task.workLogs[logIdx]?.attachments || [])] : [];
+      setModalAttachments(atts);
+      setAttModalOpen(true);
+    },
+    [selectedTask]
+  );
+
+  const saveAttModal = useCallback(() => {
+    if (!selectedTask || modalLogIdx < 0) return;
+    updateProjects((draft) => {
+      for (const p of draft) {
+        if (p.id === selectedTask.projectId) {
+          const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+          if (t && t.workLogs[modalLogIdx]) t.workLogs[modalLogIdx].attachments = [...modalAttachments];
+        }
+      }
+    });
+    setAttModalOpen(false);
+  }, [selectedTask, modalLogIdx, modalAttachments, updateProjects]);
+
+  // 모달: 구매요청
+  const openPrModal = useCallback(
+    (logIdx: number) => {
+      if (!selectedTask) return;
+      setModalLogIdx(logIdx);
+      const prs = logIdx >= 0 ? [...(selectedTask.task.workLogs[logIdx]?.purchaseReqs || []).map((p) => ({ ...p }))] : [];
+      setModalPurchaseReqs(prs);
+      setPrModalOpen(true);
+    },
+    [selectedTask]
+  );
+
+  const savePrModal = useCallback(async () => {
+    if (!selectedTask || modalLogIdx < 0) return;
+    const workLog = selectedTask.task.workLogs[modalLogIdx];
+    const workLogId = workLog?._id;
+    if (workLogId) {
+      const newItems = modalPurchaseReqs.filter((pr) => !pr._id);
+      for (const pr of newItems) {
+        const res = await createPurchaseReq(String(workLogId), {
+          item: pr.item,
+          qty: pr.qty,
+          unit: pr.unit,
+          reason: pr.reason,
+          status: pr.status,
+        });
+        if (!res.success) {
+          toast.error(res.message || "구매요청 등록에 실패했어요.");
+          return;
+        }
+      }
+      if (newItems.length > 0) toast.success("구매요청이 등록되었어요.");
+    }
+    updateProjects((draft) => {
+      for (const p of draft) {
+        if (p.id === selectedTask.projectId) {
+          const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+          if (t && t.workLogs[modalLogIdx]) t.workLogs[modalLogIdx].purchaseReqs = [...modalPurchaseReqs];
+        }
+      }
+    });
+    setPrModalOpen(false);
+    if (workLogId && newItems.length > 0) fetchMyWork();
+  }, [selectedTask, modalLogIdx, modalPurchaseReqs, updateProjects, fetchMyWork]);
+
+  // 모달: 협조요청
+  const openCrModal = useCallback(
+    (logIdx: number) => {
+      if (!selectedTask) return;
+      setModalLogIdx(logIdx);
+      const crs = logIdx >= 0 ? [...(selectedTask.task.workLogs[logIdx]?.coopReqs || []).map((c) => ({ ...c, responses: [...(c.responses || [])] }))] : [];
+      setModalCoopReqs(crs);
+      setCrModalOpen(true);
+    },
+    [selectedTask]
+  );
+
+  const saveCrModal = useCallback(async () => {
+    if (!selectedTask || modalLogIdx < 0) return;
+    const workLog = selectedTask.task.workLogs[modalLogIdx];
+    const workLogId = workLog?._id;
+    if (workLogId) {
+      const newItems = modalCoopReqs.filter((cr) => !cr._id);
+      for (const cr of newItems) {
+        const res = await createCoopReq(String(workLogId), {
+          to_user: cr.toUser,
+          to_dept: cr.toDept,
+          title: cr.title,
+          description: cr.desc,
+          due_date: cr.dueDate,
+        });
+        if (!res.success) {
+          toast.error(res.message || "협조요청 등록에 실패했어요.");
+          return;
+        }
+      }
+      if (newItems.length > 0) toast.success("협조요청이 등록되었어요.");
+    }
+    updateProjects((draft) => {
+      for (const p of draft) {
+        if (p.id === selectedTask.projectId) {
+          const t = p.tasks.find((x) => x.name === selectedTask.task.name);
+          if (t && t.workLogs[modalLogIdx]) t.workLogs[modalLogIdx].coopReqs = [...modalCoopReqs];
+        }
+      }
+    });
+    setCrModalOpen(false);
+    if (workLogId && modalCoopReqs.filter((cr) => !cr._id).length > 0) fetchMyWork();
+  }, [selectedTask, modalLogIdx, modalCoopReqs, updateProjects, fetchMyWork]);
+
+  // ===== 칸반 보드 =====
+  const kanbanCols = useMemo(() => {
+    const cols: Record<string, MyTask[]> = { 대기: [], 진행중: [], 검토중: [], 완료: [] };
+    filteredTasks.forEach((t) => {
+      if (cols[t.status]) cols[t.status].push(t);
+    });
+    return cols;
+  }, [filteredTasks]);
+
+  const kanbanConfig = [
+    { key: "대기", icon: <Circle className="h-3.5 w-3.5" />, color: "border-muted-foreground/30", titleColor: "text-muted-foreground" },
+    { key: "진행중", icon: <Circle className="h-3.5 w-3.5 text-primary" />, color: "border-primary", titleColor: "text-primary" },
+    { key: "검토중", icon: <Circle className="h-3.5 w-3.5 text-warning" />, color: "border-warning", titleColor: "text-warning" },
+    { key: "완료", icon: <CheckCircle2 className="h-3.5 w-3.5 text-success" />, color: "border-success", titleColor: "text-success" },
+  ];
+
+  // ===== 타임시트 =====
+  const timesheetData = useMemo(() => {
+    const ws = getWeekStart(today);
+    ws.setDate(ws.getDate() + timesheetWeekOffset * 7);
+    const we = new Date(ws);
+    we.setDate(we.getDate() + 6);
+    const dn = ["월", "화", "수", "목", "금", "토", "일"];
+    const wds: Date[] = [];
+    for (let i = 0; i < 7; i++) {
+      const d = new Date(ws);
+      d.setDate(d.getDate() + i);
+      wds.push(d);
+    }
+    const ph: Record<string, { id: string; name: string; days: number[]; total: number; tasks: Record<string, number[]> }> = {};
+    myTasks.forEach((t) => {
+      const k = `${t.projectId}|${t.projectName}`;
+      if (!ph[k]) ph[k] = { id: t.projectId, name: t.projectName, days: [0, 0, 0, 0, 0, 0, 0], total: 0, tasks: {} };
+      (t.workLogs || []).forEach((l) => {
+        const ld = new Date(l.startDt);
+        const di = wds.findIndex((d) => d.toDateString() === ld.toDateString());
+        if (di >= 0) {
+          ph[k].days[di] += l.hours;
+          ph[k].total += l.hours;
+          if (!ph[k].tasks[t.name]) ph[k].tasks[t.name] = [0, 0, 0, 0, 0, 0, 0];
+          ph[k].tasks[t.name][di] += l.hours;
+        }
+      });
+    });
+    const dt = [0, 0, 0, 0, 0, 0, 0];
+    Object.values(ph).forEach((p) => p.days.forEach((h, i) => (dt[i] += h)));
+    const gt = dt.reduce((s, h) => s + h, 0);
+    return { ws, we, dn, wds, ph, dt, gt };
+  }, [myTasks, today, timesheetWeekOffset]);
+
+  // ========== 렌더링 ==========
+  if (loading && projects.length === 0) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 p-3">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        <span className="text-sm text-muted-foreground">업무 목록을 불러오는 중...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 헤더 */}
+      <div className="flex shrink-0 items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="flex flex-col gap-0.5">
+            <div className="flex items-center gap-1 text-[11px] text-muted-foreground">
+              <span>설계관리</span>
+              <ChevronRight className="h-3 w-3" />
+              <span className="text-foreground">내업무현황</span>
+            </div>
+            <h1 className="text-lg font-bold leading-tight">내 업무 현황</h1>
+          </div>
+          <div className="flex items-center gap-2 rounded-lg border bg-card px-2.5 py-1.5">
+            <Avatar className="h-7 w-7">
+              <AvatarFallback className={cn("text-xs font-bold text-white", USER_INFO[currentUser]?.color || "bg-primary")}>
+                {currentUser.charAt(0)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="leading-tight">
+              <div className="text-xs font-semibold">{currentUser}</div>
+              <div className="text-[10px] text-muted-foreground">{USER_INFO[currentUser]?.role}</div>
+            </div>
+            <Select value={currentUser} onValueChange={(v) => { setCurrentUser(v); setSelectedTaskKey(null); }}>
+              <SelectTrigger className="h-6 w-20 border-0 bg-transparent text-xs text-primary" size="xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {USERS.map((u) => (
+                  <SelectItem key={u} value={u}>{u}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <div className="flex items-center gap-1.5 rounded-lg border bg-card px-2.5 py-1.5 text-xs text-muted-foreground">
+          <Calendar className="h-3.5 w-3.5" />
+          {todayStr}
+        </div>
+      </div>
+
+      {/* 검색 필터 */}
+      <div className="shrink-0 rounded-lg border border-border bg-card px-5 py-4">
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] items-end gap-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트</span>
+            <Select value={filterProject} onValueChange={setFilterProject}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 프로젝트" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 프로젝트</SelectItem>
+                {projectList.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>{p.id} {p.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">진행상태</span>
+            <Select value={filterStatus} onValueChange={setFilterStatus}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 상태" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 상태</SelectItem>
+                {["대기", "진행중", "검토중", "완료"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">우선순위</span>
+            <Select value={filterPriority} onValueChange={setFilterPriority}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 우선순위" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 우선순위</SelectItem>
+                {["긴급", "높음", "보통", "낮음"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무유형</span>
+            <Select value={filterCategory} onValueChange={setFilterCategory}>
+              <SelectTrigger className="h-9 w-full text-xs">
+                <SelectValue placeholder="전체 유형" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체 유형</SelectItem>
+                {["기구설계", "전장설계", "SW개발", "구매/조달", "조립/시운전", "검토/승인"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">검색어</span>
+            <div className="relative">
+              <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={filterKeyword}
+                onChange={(e) => setFilterKeyword(e.target.value)}
+                placeholder="업무명 검색..."
+                className="h-9 pl-8 text-xs"
+              />
+            </div>
+          </div>
+          <div className="flex items-end justify-end gap-2">
+            <Button variant="outline" size="sm" className="h-9" onClick={handleResetFilter}>
+              <RotateCcw className="mr-1.5 h-4 w-4" />
+              초기화
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* 통계 요약 바 */}
+      <div className="shrink-0 rounded-lg border border-border bg-card px-5 py-3">
+        <div className="flex flex-wrap items-center gap-5">
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10">
+              <ClipboardList className="h-3.5 w-3.5 text-primary" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.total}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">전체</span>
+            </div>
+          </div>
+          <div className="h-4 w-px bg-border" />
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-warning/10">
+              <Circle className="h-3.5 w-3.5 text-warning" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.progress}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">진행중</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-success/10">
+              <CheckCircle2 className="h-3.5 w-3.5 text-success" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.done}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">완료</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className={cn("flex h-7 w-7 items-center justify-center rounded-md", stats.delay > 0 ? "bg-destructive/10" : "bg-muted")}>
+              <AlertCircle className={cn("h-3.5 w-3.5", stats.delay > 0 ? "text-destructive" : "text-muted-foreground")} />
+            </div>
+            <div className="leading-none">
+              <span className={cn("text-sm font-bold", stats.delay > 0 && "text-destructive")}>{stats.delay}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">지연</span>
+            </div>
+          </div>
+          <div className="h-4 w-px bg-border" />
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-info/10">
+              <Clock className="h-3.5 w-3.5 text-info" />
+            </div>
+            <div className="leading-none">
+              <span className="text-sm font-bold">{stats.weekHours}h</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">이번주 투입</span>
+            </div>
+          </div>
+          <div className="ml-auto flex items-center gap-2">
+            <span className="rounded-full border border-primary/15 bg-primary/8 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+              {filteredTasks.length}건
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* 메인 영역 */}
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1 rounded-lg">
+        {/* 왼쪽: 업무 현황 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
+            <div className="flex shrink-0 items-center justify-between border-b bg-muted/50 px-4 py-2.5">
+              <div className="flex items-center gap-2">
+                <ClipboardList className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-semibold">업무 현황</span>
+                <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                  {filteredTasks.length}건
+                </span>
+              </div>
+              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as any)}>
+                <TabsList className="h-7">
+                  <TabsTrigger value="kanban" className="h-5 gap-1 px-2 text-[11px]">
+                    <LayoutGrid className="h-3 w-3" />보드
+                  </TabsTrigger>
+                  <TabsTrigger value="list" className="h-5 gap-1 px-2 text-[11px]">
+                    <List className="h-3 w-3" />목록
+                  </TabsTrigger>
+                  <TabsTrigger value="timesheet" className="h-5 gap-1 px-2 text-[11px]">
+                    <Timer className="h-3 w-3" />타임시트
+                  </TabsTrigger>
+                </TabsList>
+              </Tabs>
+            </div>
+            <ScrollArea className="flex-1">
+              <div className="p-2">
+                {viewMode === "kanban" && (
+                  <div className="grid grid-cols-4 gap-2">
+                    {kanbanConfig.map((col) => {
+                      const tasks = kanbanCols[col.key] || [];
+                      const extraCount = col.key === "대기" ? receivedCoops.length : 0;
+                      return (
+                        <div key={col.key} className="flex flex-col rounded-lg border bg-muted/30 p-2">
+                          <div className={cn("mb-2 flex items-center justify-between rounded-md border-l-[3px] bg-card px-2 py-1.5", col.color)}>
+                            <span className={cn("flex items-center gap-1.5 text-xs font-bold", col.titleColor)}>
+                              {col.icon}{col.key}
+                            </span>
+                            <span className="rounded-full border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] font-bold text-muted-foreground">{tasks.length + extraCount}</span>
+                          </div>
+                          <div className="flex flex-1 flex-col gap-1.5 overflow-y-auto">
+                            {col.key === "대기" && receivedCoops.map((cr, i) => (
+                              <div key={`coop-${i}`} className="rounded-md border border-warning/30 bg-warning/10 p-2">
+                                <div className="text-[10px] text-warning">
+                                  <Handshake className="mr-0.5 inline h-3 w-3" /> 협조 · {cr.fromUser}
+                                </div>
+                                <div className="text-xs font-semibold">{cr.title}</div>
+                                <div className="mt-0.5 text-[10px] text-muted-foreground">{cr.projectName}</div>
+                                <div className={cn("mt-0.5 text-[10px]", new Date(cr.dueDate) < today ? "font-semibold text-destructive" : "text-success")}>
+                                  <Calendar className="mr-0.5 inline h-3 w-3" />{cr.dueDate}
+                                </div>
+                              </div>
+                            ))}
+                            {tasks.map((t) => {
+                              const isDelay = t.status !== "완료" && new Date(t.end) < today;
+                              const dd = Math.ceil((new Date(t.end).getTime() - today.getTime()) / 86400000);
+                              const dueText = isDelay ? `${Math.abs(dd)}일 초과` : dd === 0 ? "오늘" : dd <= 3 ? `D-${dd}` : t.end;
+                              const attCount = (t.workLogs || []).reduce((n, wl) => n + (wl.attachments || []).length, 0);
+                              const coopCount = (t.workLogs || []).reduce((n, wl) => n + (wl.coopReqs || []).filter((c) => c.status !== "완료").length, 0);
+                              const isSelected = selectedTaskKey === `${t.projectId}||${t.name}`;
+                              return (
+                                <div
+                                  key={`${t.projectId}-${t.name}`}
+                                  className={cn(
+                                    "cursor-pointer rounded-md border bg-card p-2 transition-all",
+                                    isSelected && "border-primary ring-2 ring-primary/20"
+                                  )}
+                                  onClick={() => handleSelectTask(t.projectId, t.name)}
+                                >
+                                  <div className="text-[10px] text-muted-foreground">{t.projectId} · {t.projectName}</div>
+                                  <div className="text-xs font-semibold">{t.name}</div>
+                                  <div className="mt-1 flex items-center justify-between">
+                                    <Badge className={cn("h-4 px-1.5 text-[9px]", PRIORITY_STYLES[t.priority || "보통"])}>{t.priority || "보통"}</Badge>
+                                    <span className="text-[10px] text-muted-foreground">{t.category}</span>
+                                  </div>
+                                  <div className="mt-1 flex items-center gap-1.5">
+                                    <div className="h-1 flex-1 overflow-hidden rounded-full bg-muted">
+                                      <div className={cn("h-full rounded-full", getProgressBg(t.progress))} style={{ width: `${t.progress}%` }} />
+                                    </div>
+                                    <span className={cn("text-[10px] font-semibold", getProgressColor(t.progress))}>{t.progress}%</span>
+                                  </div>
+                                  <div className={cn("mt-0.5 text-[10px]", isDelay ? "font-semibold text-destructive" : dd <= 3 ? "text-warning" : "text-success")}>
+                                    <Calendar className="mr-0.5 inline h-3 w-3" />{dueText}
+                                  </div>
+                                  {(coopCount > 0 || attCount > 0) && (
+                                    <div className="mt-1 flex gap-1">
+                                      {coopCount > 0 && <Badge variant="outline" className="h-4 gap-0.5 px-1 text-[9px]"><Handshake className="h-2.5 w-2.5" />{coopCount}</Badge>}
+                                      {attCount > 0 && <Badge variant="outline" className="h-4 gap-0.5 px-1 text-[9px]"><Paperclip className="h-2.5 w-2.5" />{attCount}</Badge>}
+                                    </div>
+                                  )}
+                                </div>
+                              );
+                            })}
+                            {tasks.length === 0 && extraCount === 0 && (
+                              <div className="py-3 text-center text-[11px] text-muted-foreground">업무가 없어요</div>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+
+                {viewMode === "list" && (
+                  <EDataTable
+                    columns={[
+                      { key: "projectId", label: "프로젝트", width: "w-[90px]", render: (_v, row) => (
+                        <div className="text-[10px]">
+                          <span className="font-semibold text-primary">{row.projectId}</span>
+                          <br />
+                          <span className="text-muted-foreground">{row.projectName}</span>
+                        </div>
+                      )},
+                      { key: "name", label: "업무명" },
+                      { key: "category", label: "유형", width: "w-[65px]" },
+                      { key: "status", label: "상태", width: "w-[55px]", align: "center", render: (_v, row) => {
+                        const isDelay = row.status !== "완료" && new Date(row.end) < today;
+                        const displayStatus = isDelay ? "지연" : row.status;
+                        return <Badge className={cn("text-[10px]", STATUS_STYLES[displayStatus])}>{displayStatus}</Badge>;
+                      }},
+                      { key: "end", label: "종료일", width: "w-[80px]", render: (v, row) => {
+                        const isDelay = row.status !== "완료" && new Date(row.end) < today;
+                        return <span className={cn("text-[11px]", isDelay && "font-semibold text-destructive")}>{v}</span>;
+                      }},
+                      { key: "progress", label: "진행률", width: "w-[70px]", sortable: true, render: (v) => (
+                        <div className="flex items-center gap-1.5">
+                          <div className="h-1 w-12 overflow-hidden rounded-full bg-muted">
+                            <div className={cn("h-full rounded-full", getProgressBg(v))} style={{ width: `${v}%` }} />
+                          </div>
+                          <span className="text-[10px]">{v}%</span>
+                        </div>
+                      )},
+                    ] as EDataTableColumn<MyTask>[]}
+                    data={[...filteredTasks].sort((a, b) => {
+                      const ad = a.status !== "완료" && new Date(a.end) < today;
+                      const bd = b.status !== "완료" && new Date(b.end) < today;
+                      if (ad && !bd) return -1;
+                      if (!ad && bd) return 1;
+                      const ord: Record<string, number> = { 진행중: 0, 대기: 1, 검토중: 2, 완료: 3 };
+                      return (ord[a.status] ?? 9) - (ord[b.status] ?? 9);
+                    })}
+                    rowKey={(row) => `${row.projectId}||${row.name}`}
+                    selectedId={selectedTaskKey}
+                    onRowClick={(row) => handleSelectTask(row.projectId, row.name)}
+                    emptyMessage="검색 결과가 없어요"
+                    showPagination={false}
+                    draggableColumns={false}
+                  />
+                )}
+
+                {viewMode === "timesheet" && (
+                  <div>
+                    <div className="mb-2 flex items-center gap-2">
+                      <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setTimesheetWeekOffset((p) => p - 1)}>
+                        <ChevronLeft className="h-3 w-3" />
+                      </Button>
+                      <span className="text-sm font-semibold">
+                        <Calendar className="mr-1 inline h-3.5 w-3.5" />
+                        {timesheetData.ws.getMonth() + 1}/{timesheetData.ws.getDate()} ~ {timesheetData.we.getMonth() + 1}/{timesheetData.we.getDate()}
+                      </span>
+                      <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setTimesheetWeekOffset((p) => p + 1)}>
+                        <ChevronRight className="h-3 w-3" />
+                      </Button>
+                      {timesheetWeekOffset !== 0 && (
+                        <Button variant="outline" size="sm" className="h-7 text-xs text-primary" onClick={() => setTimesheetWeekOffset(0)}>이번주</Button>
+                      )}
+                      <span className="ml-auto text-xs text-muted-foreground">
+                        총 <strong className="text-primary">{timesheetData.gt}h</strong>
+                      </span>
+                    </div>
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="min-w-[120px] text-[11px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">프로젝트/업무</TableHead>
+                          {timesheetData.wds.map((d, i) => (
+                            <TableHead
+                              key={i}
+                              className={cn(
+                                "text-center text-[10px]",
+                                i >= 5 && "bg-destructive/5",
+                                d.toDateString() === today.toDateString() && "bg-primary/5 text-primary"
+                              )}
+                            >
+                              {timesheetData.dn[i]}
+                              <br />
+                              <span className="text-[9px]">{d.getMonth() + 1}/{d.getDate()}</span>
+                            </TableHead>
+                          ))}
+                          <TableHead className="text-center text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">합계</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {Object.keys(timesheetData.ph).length === 0 && (
+                          <TableRow>
+                            <TableCell colSpan={9} className="py-8 text-center text-[13px] text-muted-foreground">기록이 없어요</TableCell>
+                          </TableRow>
+                        )}
+                        {Object.values(timesheetData.ph).map((p) => (
+                          <React.Fragment key={p.id}>
+                            <TableRow className="bg-muted/50">
+                              <TableCell className="text-[10px] font-bold text-primary">{p.id} {p.name}</TableCell>
+                              {p.days.map((v, i) => (
+                                <TableCell key={i} className={cn("text-center text-[11px] font-semibold", i >= 5 && "bg-destructive/5", v > 0 ? "" : "text-muted-foreground/30")}>
+                                  {v > 0 ? `${v}h` : "-"}
+                                </TableCell>
+                              ))}
+                              <TableCell className="text-center text-[13px] font-bold text-primary">{p.total}h</TableCell>
+                            </TableRow>
+                            {Object.entries(p.tasks).map(([tn, days]) => {
+                              const tt = days.reduce((s, v) => s + v, 0);
+                              return (
+                                <TableRow key={tn}>
+                                  <TableCell className="pl-4 text-[10px] text-muted-foreground">└ {tn}</TableCell>
+                                  {days.map((v, i) => (
+                                    <TableCell key={i} className={cn("text-center text-[10px]", i >= 5 && "bg-destructive/5", v > 0 ? "" : "text-muted-foreground/30")}>
+                                      {v > 0 ? `${v}h` : "-"}
+                                    </TableCell>
+                                  ))}
+                                  <TableCell className="text-center text-[10px] font-semibold">{tt}h</TableCell>
+                                </TableRow>
+                              );
+                            })}
+                          </React.Fragment>
+                        ))}
+                        <TableRow className="bg-primary/5 font-bold">
+                          <TableCell className="text-[11px]">합계</TableCell>
+                          {timesheetData.dt.map((v, i) => (
+                            <TableCell key={i} className={cn("text-center text-[11px]", i >= 5 && "bg-destructive/5", v > 0 ? "text-primary" : "text-muted-foreground/30")}>
+                              {v > 0 ? `${v}h` : "-"}
+                            </TableCell>
+                          ))}
+                          <TableCell className="text-center text-sm font-bold text-primary">{timesheetData.gt}h</TableCell>
+                        </TableRow>
+                      </TableBody>
+                    </Table>
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 오른쪽: 상세 패널 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-card">
+            {!selectedTask ? (
+              <div className="flex h-full flex-col items-center justify-center gap-3 text-muted-foreground">
+                <div className="flex h-14 w-14 items-center justify-center rounded-full border-2 border-dashed border-border">
+                  <PointerIcon className="h-6 w-6 text-muted-foreground/50" />
+                </div>
+                <div className="text-center">
+                  <p className="text-sm font-medium">업무를 선택해주세요</p>
+                  <p className="text-xs text-muted-foreground/60">왼쪽 목록에서 업무를 클릭하면 상세 정보가 표시돼요</p>
+                </div>
+              </div>
+            ) : (
+              <>
+                {/* 상세 헤더 */}
+                <div className="flex shrink-0 items-center justify-between border-b bg-muted/50 px-3 py-2">
+                  <h3 className="text-[13px] font-bold">{selectedTask.task.name}</h3>
+                  <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => setSelectedTaskKey(null)}>
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+
+                {/* 업무 정보 바 */}
+                <div className="shrink-0 border-b bg-muted/10 px-3 py-2">
+                  <div className="grid grid-cols-[auto_1fr_auto_1fr] gap-x-3 gap-y-0.5 text-xs">
+                    <span className="text-muted-foreground">프로젝트</span>
+                    <span className="font-semibold text-primary">{selectedTask.projectId} {selectedTask.projectName}</span>
+                    <span className="text-muted-foreground">상태</span>
+                    <span className="flex items-center gap-1.5">
+                      <Badge className={cn("text-[10px]", STATUS_STYLES[selectedTask.task.status])}>{selectedTask.task.status}</Badge>
+                      {selectedTask.task.subItems.length > 0 && <Badge variant="outline" className="text-[9px]">자동</Badge>}
+                    </span>
+                    <span className="text-muted-foreground">유형</span>
+                    <span className="font-semibold">{selectedTask.task.category}</span>
+                    <span className="text-muted-foreground">기간</span>
+                    <span className="font-semibold">{selectedTask.task.start} ~ {selectedTask.task.end}</span>
+                  </div>
+                  <div className="mt-1.5 flex items-center gap-2">
+                    <Progress value={selectedTask.task.subItems.length > 0 ? calcAutoProgress(selectedTask.task) : selectedTask.task.progress} className="h-1.5 flex-1" />
+                    <span className={cn("text-sm font-bold", getProgressColor(selectedTask.task.subItems.length > 0 ? calcAutoProgress(selectedTask.task) : selectedTask.task.progress))}>
+                      {selectedTask.task.subItems.length > 0 ? calcAutoProgress(selectedTask.task) : selectedTask.task.progress}%
+                    </span>
+                  </div>
+                </div>
+
+                {/* 수행항목 + 기록 분할 */}
+                <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+                  {/* 수행항목 */}
+                  <ResizablePanel defaultSize={40} minSize={20}>
+                    <div className="flex h-full flex-col">
+                      <div className="shrink-0 border-b bg-muted/50 px-3 py-1.5">
+                        <h3 className="text-[13px] font-bold">수행항목</h3>
+                      </div>
+                      <ScrollArea className="flex-1">
+                        {/* 추가 입력 */}
+                        <div className="flex gap-1 border-b bg-muted/10 p-2">
+                          <Input value={newSiName} onChange={(e) => setNewSiName(e.target.value)} placeholder="수행항목 추가..." className="h-6 flex-1 text-xs" />
+                          <Input value={newSiWeight} onChange={(e) => setNewSiWeight(e.target.value)} placeholder="%" type="number" className="h-6 w-10 text-xs" min={1} max={100} />
+                          <Button size="sm" className="h-6 px-2 text-[10px]" onClick={handleAddSubItem}>
+                            <Plus className="mr-0.5 h-3 w-3" />추가
+                          </Button>
+                        </div>
+
+                        {/* 수행항목 리스트 */}
+                        {selectedTask.task.subItems.map((si, idx) => {
+                          const done = si.progress >= 100;
+                          const siLogs = selectedTask.task.workLogs.filter((wl) => wl.subItemId == si.id || String(wl.subItemId) === String(si.id));
+                          const isSelected = selectedSubItemId === si.id;
+                          return (
+                            <div
+                              key={si.id}
+                              className={cn(
+                                "flex cursor-pointer items-center gap-1.5 border-b px-2.5 py-1.5 transition-colors hover:bg-accent/50",
+                                isSelected && "border-l-2 border-l-primary bg-accent"
+                              )}
+                              onClick={() => { setSelectedSubItemId(si.id); setEditingLogIdx(-1); }}
+                            >
+                              <Checkbox
+                                checked={done}
+                                onCheckedChange={() => handleToggleSubCheck(idx)}
+                                onClick={(e) => e.stopPropagation()}
+                                className="h-4 w-4"
+                              />
+                              <span className={cn("min-w-0 flex-1 truncate text-[13px] font-semibold", done && "text-muted-foreground line-through")}>
+                                {si.name}
+                              </span>
+                              <Badge variant="outline" className="h-4 px-1 text-[9px]">{si.weight}%</Badge>
+                              <div className="h-1 w-10 overflow-hidden rounded-full bg-muted">
+                                <div className={cn("h-full rounded-full", getProgressBg(si.progress))} style={{ width: `${si.progress}%` }} />
+                              </div>
+                              <span className={cn("min-w-[28px] text-right text-[10px] font-bold", getProgressColor(si.progress))}>{si.progress}%</span>
+                              <span className="min-w-[16px] text-center text-[10px] text-muted-foreground">{siLogs.length}</span>
+                              <Button variant="ghost" size="sm" className="h-5 w-5 p-0 opacity-20 hover:opacity-100" onClick={(e) => { e.stopPropagation(); handleDeleteSubItem(idx); }}>
+                                <Trash2 className="h-3 w-3" />
+                              </Button>
+                            </div>
+                          );
+                        })}
+
+                        {/* 요약 */}
+                        {selectedTask.task.subItems.length > 0 && (
+                          <div className="flex items-center justify-between border-b bg-primary/5 px-2.5 py-1 text-[11px]">
+                            <span>
+                              가중 진행률: <strong className="text-primary">{calcAutoProgress(selectedTask.task)}%</strong>
+                              {selectedTask.task.subItems.reduce((s, i) => s + i.weight, 0) !== 100 && (
+                                <span className="text-destructive"> (합계:{selectedTask.task.subItems.reduce((s, i) => s + i.weight, 0)}%)</span>
+                              )}
+                            </span>
+                            <span className="text-muted-foreground">
+                              {selectedTask.task.subItems.filter((i) => i.progress >= 100).length}/{selectedTask.task.subItems.length}
+                            </span>
+                          </div>
+                        )}
+
+                        {/* 일반 수행기록 */}
+                        <div
+                          className={cn(
+                            "flex cursor-pointer items-center gap-1.5 border-t px-2.5 py-1.5 text-xs font-bold text-muted-foreground transition-colors hover:bg-accent/50",
+                            selectedSubItemId === "__unassigned__" && "border-l-2 border-l-primary bg-accent"
+                          )}
+                          onClick={() => { setSelectedSubItemId("__unassigned__"); setEditingLogIdx(-1); }}
+                        >
+                          <FileEdit className="h-3.5 w-3.5" />
+                          일반 수행기록
+                          <span className="ml-1 text-[10px] font-normal text-muted-foreground">
+                            ({selectedTask.task.workLogs.filter((wl) => !wl.subItemId).length}건)
+                          </span>
+                        </div>
+                      </ScrollArea>
+                    </div>
+                  </ResizablePanel>
+
+                  <ResizableHandle />
+
+                  {/* 수행기록 */}
+                  <ResizablePanel defaultSize={60} minSize={30}>
+                    <div className="flex h-full flex-col">
+                      <div className="shrink-0 border-b bg-muted/50 px-3 py-1.5">
+                        <h3 className="text-[13px] font-bold">수행기록</h3>
+                      </div>
+                      <ScrollArea className="flex-1">
+                        {selectedSubItemId === "__unassigned__" ? (
+                          <RenderLogs
+                            title="일반 수행기록"
+                            logs={selectedTask.task.workLogs
+                              .map((wl, i) => ({ ...wl, _idx: i }))
+                              .filter((wl) => !wl.subItemId)
+                              .sort((a, b) => b.startDt.localeCompare(a.startDt))}
+                            editingLogIdx={editingLogIdx}
+                            editForm={editForm}
+                            setEditForm={setEditForm}
+                            onStartEdit={handleStartEdit}
+                            onStartNew={() => handleStartNewLog(null)}
+                            onSave={(logIdx) => handleSaveLog(logIdx, null)}
+                            onCancel={() => setEditingLogIdx(-1)}
+                            onDelete={handleDeleteLog}
+                            onOpenAtt={openAttModal}
+                            onOpenPr={openPrModal}
+                            onOpenCr={openCrModal}
+                          />
+                        ) : (
+                          (() => {
+                            const si = selectedTask.task.subItems.find((s) => s.id === selectedSubItemId);
+                            if (!si) return (
+                              <div className="flex h-full flex-col items-center justify-center gap-1 text-muted-foreground">
+                                <PointerIcon className="h-6 w-6" />
+                                <span className="text-xs">왼쪽에서 수행항목을 선택하세요</span>
+                              </div>
+                            );
+                            const siLogs = selectedTask.task.workLogs
+                              .map((wl, i) => ({ ...wl, _idx: i }))
+                              .filter((wl) => wl.subItemId == si.id || String(wl.subItemId) === String(si.id))
+                              .sort((a, b) => b.startDt.localeCompare(a.startDt));
+                            return (
+                              <>
+                                <div className="border-b bg-muted/10 p-2.5">
+                                  <div className="flex items-center gap-2">
+                                    <span className="text-sm font-bold">{si.name}</span>
+                                    <Badge variant="outline" className="text-[9px]">{si.weight}%</Badge>
+                                  </div>
+                                  <div className="mt-1.5 flex items-center gap-2">
+                                    <Slider
+                                      className="flex-1"
+                                      value={[si.progress]}
+                                      min={0}
+                                      max={100}
+                                      step={5}
+                                      onValueChange={([v]) => handleUpdateSubProgress(si.id, v)}
+                                    />
+                                    <span className={cn("min-w-[32px] text-right text-xs font-bold", getProgressColor(si.progress))}>{si.progress}%</span>
+                                  </div>
+                                  <div className="mt-0.5 text-[10px] text-muted-foreground">{siLogs.length}건의 기록</div>
+                                </div>
+                                <RenderLogs
+                                  title={si.name}
+                                  logs={siLogs}
+                                  editingLogIdx={editingLogIdx}
+                                  editForm={editForm}
+                                  setEditForm={setEditForm}
+                                  onStartEdit={handleStartEdit}
+                                  onStartNew={() => handleStartNewLog(si.id)}
+                                  onSave={(logIdx) => handleSaveLog(logIdx, si.id)}
+                                  onCancel={() => setEditingLogIdx(-1)}
+                                  onDelete={handleDeleteLog}
+                                  onOpenAtt={openAttModal}
+                                  onOpenPr={openPrModal}
+                                  onOpenCr={openCrModal}
+                                />
+                              </>
+                            );
+                          })()
+                        )}
+                      </ScrollArea>
+                    </div>
+                  </ResizablePanel>
+                </ResizablePanelGroup>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 첨부파일 모달 */}
+      <Dialog open={attModalOpen} onOpenChange={setAttModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="text-base"><Paperclip className="mr-1.5 inline h-4 w-4" />첨부파일 ({modalAttachments.length})</DialogTitle>
+            <DialogDescription className="text-xs">파일을 추가하거나 삭제할 수 있습니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-2">
+            {modalAttachments.map((f, i) => (
+              <div key={f.id} className="flex items-center gap-2 rounded-md border bg-muted/50 p-2">
+                {getFileIcon(f.type)}
+                <div className="flex-1">
+                  <div className="text-xs font-semibold">{f.name}</div>
+                  <div className="text-[10px] text-muted-foreground">{f.type} · {f.size}</div>
+                </div>
+                <Button variant="outline" size="sm" className="h-6 text-[10px] text-destructive" onClick={() => setModalAttachments((p) => p.filter((_, idx) => idx !== i))}>삭제</Button>
+              </div>
+            ))}
+            <div
+              className="cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors hover:border-primary hover:bg-accent/50"
+              onClick={() => {
+                const name = prompt("파일명 (예: photo.jpg, drawing.dwg)");
+                if (!name) return;
+                setModalAttachments((p) => [...p, { id: Date.now(), name, type: getFileType(name), size: `${(Math.random() * 10 + 0.5).toFixed(1)}MB` }]);
+              }}
+            >
+              <Upload className="mx-auto h-5 w-5 text-muted-foreground" />
+              <div className="mt-1 text-xs text-muted-foreground">클릭하여 파일 추가</div>
+            </div>
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setAttModalOpen(false)} className="h-8 text-xs">닫기</Button>
+            <Button onClick={saveAttModal} className="h-8 text-xs">저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 구매요청 모달 */}
+      <Dialog open={prModalOpen} onOpenChange={setPrModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="text-base"><ShoppingCart className="mr-1.5 inline h-4 w-4" />구매요청 관리</DialogTitle>
+            <DialogDescription className="text-xs">구매요청을 등록하고 관리합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="grid grid-cols-2 gap-2">
+              <div>
+                <Label className="text-xs">자재명 *</Label>
+                <Input value={prForm.item} onChange={(e) => setPrForm((p) => ({ ...p, item: e.target.value }))} placeholder="예: LM가이드 HSR15-R" className="h-7 text-xs" />
+              </div>
+              <div className="grid grid-cols-2 gap-1">
+                <div>
+                  <Label className="text-xs">수량</Label>
+                  <Input value={prForm.qty} onChange={(e) => setPrForm((p) => ({ ...p, qty: e.target.value }))} type="number" className="h-7 text-xs" min={1} />
+                </div>
+                <div>
+                  <Label className="text-xs">단위</Label>
+                  <Select value={prForm.unit} onValueChange={(v) => setPrForm((p) => ({ ...p, unit: v }))}>
+                    <SelectTrigger className="h-7 text-xs" size="xs"><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      {["EA", "SET", "BOX", "M", "KG"].map((u) => (<SelectItem key={u} value={u}>{u}</SelectItem>))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">사유</Label>
+              <Input value={prForm.reason} onChange={(e) => setPrForm((p) => ({ ...p, reason: e.target.value }))} placeholder="구매 사유 입력" className="h-7 text-xs" />
+            </div>
+            <div className="flex items-end gap-2">
+              <div className="flex-1">
+                <Label className="text-xs">상태</Label>
+                <Select value={prForm.status} onValueChange={(v) => setPrForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-7 text-xs" size="xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {["요청", "견적중", "발주완료", "입고완료"].map((s) => (<SelectItem key={s} value={s}>{s}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <Button size="sm" className="h-7 text-xs" onClick={() => {
+                if (!prForm.item.trim()) return;
+                setModalPurchaseReqs((p) => [...p, { id: Date.now(), item: prForm.item.trim(), qty: parseInt(prForm.qty) || 1, unit: prForm.unit, reason: prForm.reason, status: prForm.status }]);
+                setPrForm((p) => ({ ...p, item: "", reason: "" }));
+              }}>
+                <Plus className="mr-0.5 h-3 w-3" />추가
+              </Button>
+            </div>
+            <div className="text-xs font-semibold">등록된 구매요청 ({modalPurchaseReqs.length})</div>
+            {modalPurchaseReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없어요.</div>}
+            {modalPurchaseReqs.map((pr, i) => (
+              <div key={pr.id} className="flex items-center gap-2 rounded-md border bg-muted/50 p-2">
+                <ShoppingCart className="h-3.5 w-3.5" />
+                <strong className="text-xs">{pr.item}</strong>
+                <span className="text-[10px] text-muted-foreground">{pr.qty} {pr.unit}</span>
+                {pr.reason && <span className="text-[10px] text-muted-foreground">{pr.reason}</span>}
+                <Badge className={cn("text-[9px]", PR_STATUS_STYLES[pr.status])}>{pr.status}</Badge>
+                <Button variant="ghost" size="sm" className="ml-auto h-5 w-5 p-0 opacity-30 hover:opacity-100" onClick={() => setModalPurchaseReqs((p) => p.filter((_, idx) => idx !== i))}>
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
+            ))}
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setPrModalOpen(false)} className="h-8 text-xs">닫기</Button>
+            <Button onClick={savePrModal} className="h-8 text-xs">저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 협조요청 모달 */}
+      <Dialog open={crModalOpen} onOpenChange={setCrModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="text-base"><Handshake className="mr-1.5 inline h-4 w-4" />협조요청 관리</DialogTitle>
+            <DialogDescription className="text-xs">협조요청을 등록하고 관리합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <Label className="text-xs">요청 제목 *</Label>
+              <Input value={crForm.title} onChange={(e) => setCrForm((p) => ({ ...p, title: e.target.value }))} placeholder="협조 요청 제목" className="h-7 text-xs" />
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <div>
+                <Label className="text-xs">대상자 *</Label>
+                <Select value={crForm.toUser} onValueChange={(v) => setCrForm((p) => ({ ...p, toUser: v }))}>
+                  <SelectTrigger className="h-7 text-xs" size="xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    {USERS.filter((u) => u !== currentUser).map((u) => (<SelectItem key={u} value={u}>{u} ({USER_INFO[u].role})</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">기한</Label>
+                <Input type="date" value={crForm.dueDate} onChange={(e) => setCrForm((p) => ({ ...p, dueDate: e.target.value }))} className="h-7 text-xs" />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">요청 내용</Label>
+              <Textarea value={crForm.desc} onChange={(e) => setCrForm((p) => ({ ...p, desc: e.target.value }))} placeholder="상세 요청 내용" className="min-h-[50px] text-xs" rows={2} />
+            </div>
+            <div className="text-right">
+              <Button size="sm" className="h-7 text-xs" onClick={() => {
+                if (!crForm.title.trim() || !crForm.toUser) return;
+                setModalCoopReqs((p) => [...p, { id: `CR-${Date.now()}`, toUser: crForm.toUser, toDept: USER_INFO[crForm.toUser]?.role || "", title: crForm.title.trim(), desc: crForm.desc, status: "요청", dueDate: crForm.dueDate, responses: [] }]);
+                setCrForm((p) => ({ ...p, title: "", desc: "" }));
+              }}>
+                <Plus className="mr-0.5 h-3 w-3" />추가
+              </Button>
+            </div>
+            <div className="text-xs font-semibold">등록된 협조요청 ({modalCoopReqs.length})</div>
+            {modalCoopReqs.length === 0 && <div className="py-3 text-center text-xs text-muted-foreground">등록된 요청이 없어요.</div>}
+            {modalCoopReqs.map((cr, i) => (
+              <div key={cr.id} className="space-y-1 rounded-md border bg-muted/50 p-2">
+                <div className="flex items-center gap-2">
+                  <Handshake className="h-3.5 w-3.5" />
+                  <strong className="flex-1 text-xs">{cr.title}</strong>
+                  <span className="text-[10px] text-muted-foreground">{cr.toUser} ({cr.toDept})</span>
+                  <Badge className={cn("text-[9px]", CR_STATUS_STYLES[cr.status])}>{cr.status}</Badge>
+                  <Button variant="ghost" size="sm" className="h-5 w-5 p-0 opacity-30 hover:opacity-100" onClick={() => setModalCoopReqs((p) => p.filter((_, idx) => idx !== i))}>
+                    <Trash2 className="h-3 w-3" />
+                  </Button>
+                </div>
+                {cr.desc && <div className="pl-5 text-[11px] text-muted-foreground">{cr.desc}</div>}
+                <div className="pl-5 text-[10px] text-muted-foreground">기한: {cr.dueDate}</div>
+                {(cr.responses || []).map((r, ri) => (
+                  <div key={ri} className="pl-5 text-[10px] text-muted-foreground">
+                    <strong className="text-primary">{r.user}</strong>: {r.content} <span className="text-muted-foreground">({r.date})</span>
+                  </div>
+                ))}
+                {cr.toUser === currentUser && cr.status !== "완료" && CR_NEXT[cr.status] && (
+                  <div className="pl-5">
+                    <Button size="sm" className="h-5 px-2 text-[10px]" onClick={() => {
+                      setModalCoopReqs((p) => p.map((c, idx) => idx === i ? { ...c, status: CR_NEXT[c.status] || c.status } : c));
+                    }}>
+                      {CR_NEXT[cr.status]}
+                    </Button>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setCrModalOpen(false)} className="h-8 text-xs">닫기</Button>
+            <Button onClick={saveCrModal} className="h-8 text-xs">저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+// ========== 수행기록 렌더 서브컴포넌트 ==========
+interface RenderLogsProps {
+  title: string;
+  logs: (WorkLog & { _idx: number })[];
+  editingLogIdx: number;
+  editForm: { startDt: string; endDt: string; desc: string };
+  setEditForm: React.Dispatch<React.SetStateAction<{ startDt: string; endDt: string; desc: string }>>;
+  onStartEdit: (idx: number) => void;
+  onStartNew: () => void;
+  onSave: (logIdx: number) => void;
+  onCancel: () => void;
+  onDelete: (idx: number) => void;
+  onOpenAtt: (idx: number) => void;
+  onOpenPr: (idx: number) => void;
+  onOpenCr: (idx: number) => void;
+}
+
+function RenderLogs({ title, logs, editingLogIdx, editForm, setEditForm, onStartEdit, onStartNew, onSave, onCancel, onDelete, onOpenAtt, onOpenPr, onOpenCr }: RenderLogsProps) {
+  return (
+    <div>
+      {logs.length === 0 && editingLogIdx !== -2 && (
+        <div className="flex flex-col items-center justify-center gap-1 py-8 text-muted-foreground">
+          <FileEdit className="h-6 w-6" />
+          <span className="text-xs">기록이 없어요</span>
+        </div>
+      )}
+      {logs.map((log) => {
+        const idx = log._idx;
+        if (editingLogIdx === idx) {
+          return (
+            <EditLogRow
+              key={idx}
+              logIdx={idx}
+              editForm={editForm}
+              setEditForm={setEditForm}
+              onSave={onSave}
+              onCancel={onCancel}
+              onOpenAtt={onOpenAtt}
+              onOpenPr={onOpenPr}
+              onOpenCr={onOpenCr}
+              attCount={(log.attachments || []).length}
+              prCount={(log.purchaseReqs || []).length}
+              crCount={(log.coopReqs || []).length}
+            />
+          );
+        }
+        const attC = (log.attachments || []).length;
+        const prC = (log.purchaseReqs || []).length;
+        const crC = (log.coopReqs || []).length;
+        return (
+          <div
+            key={idx}
+            className="flex cursor-pointer items-center gap-1.5 border-b px-2.5 py-1.5 text-xs transition-colors hover:bg-accent/50"
+            onClick={() => onStartEdit(idx)}
+            title="클릭하여 수정"
+          >
+            <span className="min-w-[75px] text-[11px] text-muted-foreground">{fmtDtShort(log.startDt)}~{log.endDt.substring(11, 16)}</span>
+            <Badge variant="outline" className="h-4 min-w-[26px] justify-center px-1 text-[10px] font-bold text-primary">{log.hours}h</Badge>
+            <span className="min-w-0 flex-1 truncate">{log.desc}</span>
+            <div className="flex gap-1">
+              {attC > 0 && (
+                <Badge variant="outline" className="h-4 cursor-pointer gap-0.5 px-1 text-[9px] hover:border-primary" onClick={(e) => { e.stopPropagation(); onOpenAtt(idx); }}>
+                  <Paperclip className="h-2.5 w-2.5" />{attC}
+                </Badge>
+              )}
+              {prC > 0 && (
+                <Badge className="h-4 cursor-pointer gap-0.5 bg-warning/10 px-1 text-[9px] text-warning hover:bg-warning/20" onClick={(e) => { e.stopPropagation(); onOpenPr(idx); }}>
+                  <ShoppingCart className="h-2.5 w-2.5" />{prC}
+                </Badge>
+              )}
+              {crC > 0 && (
+                <Badge className="h-4 cursor-pointer gap-0.5 bg-info/10 px-1 text-[9px] text-info hover:bg-info/20" onClick={(e) => { e.stopPropagation(); onOpenCr(idx); }}>
+                  <Handshake className="h-2.5 w-2.5" />{crC}
+                </Badge>
+              )}
+            </div>
+            <Button variant="ghost" size="sm" className="h-5 w-5 p-0 opacity-20 hover:opacity-100" onClick={(e) => { e.stopPropagation(); onDelete(idx); }}>
+              <Trash2 className="h-3 w-3" />
+            </Button>
+          </div>
+        );
+      })}
+      {editingLogIdx === -2 && (
+        <EditLogRow
+          logIdx={-1}
+          editForm={editForm}
+          setEditForm={setEditForm}
+          onSave={onSave}
+          onCancel={onCancel}
+          onOpenAtt={onOpenAtt}
+          onOpenPr={onOpenPr}
+          onOpenCr={onOpenCr}
+          attCount={0}
+          prCount={0}
+          crCount={0}
+        />
+      )}
+      <Button variant="outline" size="sm" className="m-2 h-6 border-dashed text-[10px] text-muted-foreground" onClick={onStartNew}>
+        <Plus className="mr-0.5 h-3 w-3" />기록 추가
+      </Button>
+    </div>
+  );
+}
+
+// ========== 편집 행 ==========
+interface EditLogRowProps {
+  logIdx: number;
+  editForm: { startDt: string; endDt: string; desc: string };
+  setEditForm: React.Dispatch<React.SetStateAction<{ startDt: string; endDt: string; desc: string }>>;
+  onSave: (logIdx: number) => void;
+  onCancel: () => void;
+  onOpenAtt: (idx: number) => void;
+  onOpenPr: (idx: number) => void;
+  onOpenCr: (idx: number) => void;
+  attCount: number;
+  prCount: number;
+  crCount: number;
+}
+
+function EditLogRow({ logIdx, editForm, setEditForm, onSave, onCancel, onOpenAtt, onOpenPr, onOpenCr, attCount, prCount, crCount }: EditLogRowProps) {
+  const hours = calcHours(editForm.startDt, editForm.endDt);
+  return (
+    <div className="space-y-1.5 rounded-md border border-primary/30 bg-primary/5 p-2.5">
+      <div className="flex flex-wrap items-center gap-1.5">
+        <Input type="datetime-local" value={editForm.startDt} onChange={(e) => setEditForm((p) => ({ ...p, startDt: e.target.value }))} className="h-6 w-[155px] text-[11px]" />
+        <span className="text-xs text-muted-foreground">~</span>
+        <Input type="datetime-local" value={editForm.endDt} onChange={(e) => setEditForm((p) => ({ ...p, endDt: e.target.value }))} className="h-6 w-[155px] text-[11px]" />
+        <span className="min-w-[30px] text-xs font-semibold text-primary">{hours}h</span>
+      </div>
+      <Textarea
+        value={editForm.desc}
+        onChange={(e) => setEditForm((p) => ({ ...p, desc: e.target.value }))}
+        placeholder="수행 내용을 입력하세요..."
+        className="min-h-[32px] text-xs"
+        rows={1}
+      />
+      <div className="flex items-center justify-between">
+        <div className="flex gap-1">
+          <Button variant="outline" size="sm" className="h-5 px-1.5 text-[9px]" onClick={() => onOpenAtt(logIdx)}>
+            <Paperclip className="mr-0.5 h-2.5 w-2.5" />첨부{attCount > 0 && ` (${attCount})`}
+          </Button>
+          <Button variant="outline" size="sm" className="h-5 px-1.5 text-[9px]" onClick={() => onOpenPr(logIdx)}>
+            <ShoppingCart className="mr-0.5 h-2.5 w-2.5" />구매{prCount > 0 && ` (${prCount})`}
+          </Button>
+          <Button variant="outline" size="sm" className="h-5 px-1.5 text-[9px]" onClick={() => onOpenCr(logIdx)}>
+            <Handshake className="mr-0.5 h-2.5 w-2.5" />협조{crCount > 0 && ` (${crCount})`}
+          </Button>
+        </div>
+        <div className="flex gap-1">
+          <Button variant="outline" size="sm" className="h-5 px-2 text-[10px]" onClick={onCancel}>취소</Button>
+          <Button size="sm" className="h-5 bg-success px-2 text-[10px] hover:bg-success/90" onClick={() => onSave(logIdx)}>저장</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/design/project/page.tsx b/frontend/app/(main)/COMPANY_9/design/project/page.tsx
new file mode 100644
index 00000000..7e66b696
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/design/project/page.tsx
@@ -0,0 +1,1501 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Textarea } from "@/components/ui/textarea";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Plus,
+  Save,
+  Pencil,
+  Trash2,
+  ChevronRight,
+  FolderOpen,
+  Rocket,
+  ClipboardList,
+  BarChart3,
+  Users,
+  FileText,
+  Loader2,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  getProjectList,
+  createProject,
+  updateProject,
+  getTasksByProject,
+  createTask,
+  updateTask,
+  deleteTask,
+} from "@/lib/api/design";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// --- Types ---
+type ProjectStatus = "진행중" | "계획" | "보류" | "완료";
+type TaskStatus = "대기" | "진행중" | "검토중" | "완료";
+type RelationType = "sub" | "depend" | "related";
+
+interface WorkLog {
+  date: string;
+  hours: number;
+  desc: string;
+  progressBefore: number;
+  progressAfter: number;
+  author: string;
+}
+
+interface Issue {
+  id: number;
+  title: string;
+  status: string;
+  priority: string;
+  desc: string;
+  registeredBy: string;
+  registeredDate: string;
+  resolvedDate?: string;
+}
+
+interface Task {
+  id?: string;
+  name: string;
+  category: string;
+  assignee: string;
+  start: string;
+  end: string;
+  status: TaskStatus;
+  progress: number;
+  remark: string;
+  workLogs: WorkLog[];
+  issues: Issue[];
+}
+
+interface Project {
+  id: string;
+  projectNo: string;
+  name: string;
+  status: ProjectStatus;
+  pm: string;
+  customer: string;
+  startDate: string;
+  endDate: string;
+  sourceNo: string;
+  desc: string;
+  progress: number;
+  parentId: string | null;
+  relation: RelationType | null;
+  tasks: Task[];
+}
+
+// API 응답(snake_case) -> 프론트(camelCase) 매핑
+function mapWorkLog(w: any): WorkLog {
+  const dt = w.start_dt || w.date;
+  const date = typeof dt === "string" ? dt.split("T")[0] : "";
+  return {
+    date,
+    hours: Number(w.hours) || 0,
+    desc: w.description || w.desc || "",
+    progressBefore: Number(w.progress_before) || 0,
+    progressAfter: Number(w.progress_after) || 0,
+    author: w.author || "",
+  };
+}
+
+function mapIssue(i: any): Issue {
+  return {
+    id: i.id,
+    title: i.title || "",
+    status: i.status || "",
+    priority: i.priority || "",
+    desc: i.description || i.desc || "",
+    registeredBy: i.registered_by || "",
+    registeredDate: i.registered_date || "",
+    resolvedDate: i.resolved_date,
+  };
+}
+
+function mapTask(t: any): Task {
+  const workLogs = (t.work_logs || t.workLogs || []).map(mapWorkLog);
+  const issues = (t.issues || []).map(mapIssue);
+  const start = t.start_date || t.start || "";
+  const end = t.end_date || t.end || "";
+  return {
+    id: t.id,
+    name: t.name || "",
+    category: t.category || "기구설계",
+    assignee: t.assignee || "",
+    start: typeof start === "string" ? start.split("T")[0] : "",
+    end: typeof end === "string" ? end.split("T")[0] : "",
+    status: (t.status || "대기") as TaskStatus,
+    progress: Number(t.progress) || 0,
+    remark: t.remark || "",
+    workLogs,
+    issues,
+  };
+}
+
+function mapProject(p: any): Project {
+  const tasks = (p.tasks || []).map(mapTask);
+  return {
+    id: p.id,
+    projectNo: p.project_no || p.id,
+    name: p.name || "",
+    status: (p.status || "계획") as ProjectStatus,
+    pm: p.pm || "",
+    customer: p.customer || "",
+    startDate: (p.start_date || "").toString().split("T")[0],
+    endDate: (p.end_date || "").toString().split("T")[0],
+    sourceNo: p.source_no || "",
+    desc: p.description || p.desc || "",
+    progress: Number(p.progress) || 0,
+    parentId: p.parent_id || null,
+    relation: (p.relation_type || p.relation) as RelationType | null,
+    tasks,
+  };
+}
+
+// --- 상태 색상 (CSS 변수 기반) ---
+const getStatusColor = (status: ProjectStatus) => {
+  switch (status) {
+    case "진행중":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "계획":
+      return "bg-muted text-muted-foreground border-border";
+    case "보류":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "완료":
+      return "bg-primary/15 text-primary border-primary/25";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getTaskStatusColor = (status: string) => {
+  switch (status) {
+    case "대기":
+      return "bg-muted text-muted-foreground";
+    case "진행중":
+      return "bg-primary/10 text-primary";
+    case "검토중":
+      return "bg-destructive/10 text-destructive";
+    case "완료":
+      return "bg-primary/15 text-primary";
+    case "지연":
+      return "bg-destructive/10 text-destructive";
+    default:
+      return "bg-muted text-muted-foreground";
+  }
+};
+
+const getRelationLabel = (r: RelationType | null) => {
+  if (!r) return "";
+  const m: Record<RelationType, string> = {
+    sub: "하위",
+    depend: "종속",
+    related: "연관",
+  };
+  return m[r];
+};
+
+const getRelationColor = (r: RelationType | null) => {
+  if (!r) return "";
+  const m: Record<RelationType, string> = {
+    sub: "bg-primary/10 text-primary",
+    depend: "bg-destructive/10 text-destructive",
+    related: "bg-secondary text-secondary-foreground",
+  };
+  return m[r];
+};
+
+const categoryIcons: Record<string, string> = {
+  기구설계: "⚙️",
+  전장설계: "⚡",
+  SW개발: "💻",
+  "구매/조달": "📦",
+  "조립/시운전": "🔧",
+  "검토/승인": "✅",
+};
+
+const progressColor = (p: number) =>
+  p >= 80 ? "bg-primary" : p >= 40 ? "bg-primary/70" : p > 0 ? "bg-primary/40" : "bg-muted-foreground/30";
+
+const progressTextColor = (p: number) =>
+  p >= 80 ? "text-primary" : p >= 40 ? "text-primary/80" : p > 0 ? "text-primary/60" : "text-muted-foreground";
+
+// --- Helper functions ---
+function getChildren(projects: Project[], parentId: string): Project[] {
+  return projects.filter((p) => p.parentId === parentId);
+}
+
+function getAllDescendants(projects: Project[], parentId: string): Project[] {
+  const children = getChildren(projects, parentId);
+  let all = [...children];
+  children.forEach((c) => {
+    all = all.concat(getAllDescendants(projects, c.id));
+  });
+  return all;
+}
+
+// --- Grid Columns ---
+const PROJECT_GRID_COLUMNS = [
+  { key: "project_no", label: "프로젝트번호" },
+  { key: "status", label: "상태" },
+  { key: "name", label: "프로젝트명" },
+  { key: "pm", label: "PM" },
+  { key: "customer", label: "고객" },
+  { key: "start_date", label: "시작일" },
+  { key: "end_date", label: "종료예정" },
+  { key: "progress", label: "진행률" },
+  { key: "source_no", label: "원접수번호" },
+];
+
+// --- Component ---
+export default function DesignProjectPage() {
+  const ts = useTableSettings("c16-design-project", "dsn_project", PROJECT_GRID_COLUMNS);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>({});
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 상세 탭
+  const [detailTab, setDetailTab] = useState("wbs");
+
+  // 모달
+  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
+  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
+  const [isTaskDetailOpen, setIsTaskDetailOpen] = useState(false);
+  const [editingTaskIdx, setEditingTaskIdx] = useState(-1);
+  const [taskDetailIdx, setTaskDetailIdx] = useState(-1);
+  const [taskDetailTab, setTaskDetailTab] = useState("log");
+
+  // 프로젝트 폼
+  const [formProjectId, setFormProjectId] = useState("");
+  const [formProjectNo, setFormProjectNo] = useState("");
+  const [formName, setFormName] = useState("");
+  const [formStartDate, setFormStartDate] = useState("");
+  const [formEndDate, setFormEndDate] = useState("");
+  const [formPM, setFormPM] = useState("");
+  const [formCustomer, setFormCustomer] = useState("");
+  const [formSourceNo, setFormSourceNo] = useState("");
+  const [formDesc, setFormDesc] = useState("");
+  const [formParentId, setFormParentId] = useState("");
+  const [formRelation, setFormRelation] = useState<RelationType>("sub");
+
+  // 태스크 폼
+  const [tName, setTName] = useState("");
+  const [tCategory, setTCategory] = useState("기구설계");
+  const [tAssignee, setTAssignee] = useState("");
+  const [tStart, setTStart] = useState("");
+  const [tEnd, setTEnd] = useState("");
+  const [tStatus, setTStatus] = useState<TaskStatus>("대기");
+  const [tProgress, setTProgress] = useState(0);
+  const [tRemark, setTRemark] = useState("");
+
+  const fetchProjects = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await getProjectList();
+      if (res.success && res.data) {
+        const mapped = (res.data as any[]).map(mapProject);
+        setProjects(mapped);
+      } else {
+        setProjects([]);
+      }
+    } catch {
+      toast.error("프로젝트 목록을 불러오는데 실패했습니다.");
+      setProjects([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchProjects();
+  }, [fetchProjects]);
+
+  const fetchTaskDetails = useCallback(async (projectId: string) => {
+    try {
+      const res = await getTasksByProject(projectId);
+      if (res.success && res.data) {
+        const tasks = (res.data as any[]).map(mapTask);
+        setProjects((prev) =>
+          prev.map((p) => (p.id === projectId ? { ...p, tasks } : p))
+        );
+      }
+    } catch {
+      toast.error("업무 상세를 불러오는데 실패했습니다.");
+    }
+  }, []);
+
+  // snake_case → camelCase 매핑 (DynamicSearchFilter의 columnName은 snake_case)
+  const fieldMap: Record<string, string> = {
+    project_no: "projectNo",
+    start_date: "startDate",
+    end_date: "endDate",
+    source_no: "sourceNo",
+  };
+  const getFieldValue = (obj: any, colName: string): string => {
+    const key = fieldMap[colName] || colName;
+    const val = obj[key];
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
+  // 필터링
+  const filteredProjects = useMemo(() => {
+    if (searchFilters.length === 0) return projects;
+
+    const matched = new Set<string>();
+    projects.forEach((p) => {
+      let pass = true;
+      for (const f of searchFilters) {
+        const val = getFieldValue(p, f.columnName);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) { pass = false; break; }
+        } else if (f.operator === "equals") {
+          if (val !== f.value) { pass = false; break; }
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) { pass = false; break; }
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) { pass = false; break; }
+          if (to && val > to) { pass = false; break; }
+        }
+      }
+      if (pass) matched.add(p.id);
+    });
+
+    const result = new Set(matched);
+    matched.forEach((id) => {
+      getAllDescendants(projects, id).forEach((d) => result.add(d.id));
+    });
+    matched.forEach((id) => {
+      let current = projects.find((p) => p.id === id);
+      while (current?.parentId) {
+        result.add(current.parentId);
+        current = projects.find((p) => p.id === current!.parentId);
+      }
+    });
+
+    return projects.filter((p) => result.has(p.id));
+  }, [projects, searchFilters]);
+
+  const selectedProject = useMemo(
+    () => projects.find((p) => p.id === selectedId),
+    [projects, selectedId]
+  );
+
+  // 트리 렌더
+  const buildTreeRows = useCallback(
+    (parentId: string | null, depth: number): { project: Project; depth: number }[] => {
+      const children = filteredProjects.filter((p) => p.parentId === parentId);
+      const rows: { project: Project; depth: number }[] = [];
+      children.forEach((child) => {
+        rows.push({ project: child, depth });
+        if (expandedIds[child.id] !== false) {
+          rows.push(...buildTreeRows(child.id, depth + 1));
+        }
+      });
+      return rows;
+    },
+    [filteredProjects, expandedIds]
+  );
+
+  const treeRows = useMemo(() => buildTreeRows(null, 0), [buildTreeRows]);
+
+  const toggleExpand = (id: string) => {
+    setExpandedIds((prev) => ({
+      ...prev,
+      [id]: prev[id] === undefined ? false : !prev[id],
+    }));
+  };
+
+
+  // --- 프로젝트 모달 ---
+  const openProjectModal = (editProject?: Project, presetParentId?: string) => {
+    if (editProject) {
+      setFormProjectId(editProject.id);
+      setFormProjectNo(editProject.projectNo);
+      setFormName(editProject.name);
+      setFormStartDate(editProject.startDate);
+      setFormEndDate(editProject.endDate);
+      setFormPM(editProject.pm);
+      setFormCustomer(editProject.customer);
+      setFormSourceNo(editProject.sourceNo);
+      setFormDesc(editProject.desc);
+      setFormParentId(editProject.parentId || "");
+      setFormRelation((editProject.relation as RelationType) || "sub");
+    } else {
+      const maxNum = projects.reduce((max, p) => {
+        const match = p.projectNo?.match(/PJ-\d{4}-(\d+)/);
+        const num = match ? parseInt(match[1], 10) : 0;
+        return num > max ? num : max;
+      }, 0);
+      const year = new Date().getFullYear();
+      const newProjectNo = `PJ-${year}-${String(maxNum + 1).padStart(4, "0")}`;
+      setFormProjectId("");
+      setFormProjectNo(newProjectNo);
+      setFormName("");
+      setFormStartDate(new Date().toISOString().split("T")[0]);
+      setFormEndDate("");
+      setFormPM("");
+      setFormCustomer("");
+      setFormSourceNo("");
+      setFormDesc("");
+      setFormParentId(presetParentId || "");
+      setFormRelation("sub");
+
+      if (presetParentId) {
+        const parent = projects.find((p) => p.id === presetParentId);
+        if (parent) {
+          setFormCustomer(parent.customer);
+          setFormEndDate(parent.endDate);
+        }
+      }
+    }
+    setIsProjectModalOpen(true);
+  };
+
+  const handleSaveProject = async () => {
+    if (!formName.trim()) { toast.error("프로젝트명을 입력하세요."); return; }
+    if (!formStartDate) { toast.error("시작일을 입력하세요."); return; }
+    if (!formEndDate) { toast.error("종료예정일을 입력하세요."); return; }
+    if (!formPM) { toast.error("PM을 선택하세요."); return; }
+
+    const existing = projects.find((p) => p.id === formProjectId);
+    const payload = {
+      project_no: formProjectNo || formProjectId,
+      name: formName,
+      status: (existing?.status || "계획") as ProjectStatus,
+      pm: formPM,
+      customer: formCustomer,
+      start_date: formStartDate,
+      end_date: formEndDate,
+      source_no: formSourceNo,
+      description: formDesc,
+      progress: existing?.progress ?? 0,
+      parent_id: formParentId || null,
+      relation_type: formParentId ? formRelation : null,
+    };
+
+    const isEdit = !!formProjectId;
+    try {
+      if (isEdit) {
+        const res = await updateProject(formProjectId, payload);
+        if (res.success) {
+          toast.success("프로젝트가 수정되었습니다.");
+          await fetchProjects();
+          setIsProjectModalOpen(false);
+        } else {
+          toast.error(res.message || "프로젝트 수정에 실패했습니다.");
+        }
+      } else {
+        const res = await createProject(payload);
+        if (res.success && res.data) {
+          toast.success("프로젝트가 등록되었습니다.");
+          await fetchProjects();
+          if (formParentId) {
+            setExpandedIds((prev) => ({ ...prev, [formParentId]: true }));
+          }
+          const projectId = (res.data as any).id;
+          setSelectedId(projectId);
+          fetchTaskDetails(projectId);
+          setIsProjectModalOpen(false);
+        } else {
+          toast.error(res.message || "프로젝트 등록에 실패했습니다.");
+        }
+      }
+    } catch {
+      toast.error("프로젝트 저장에 실패했습니다.");
+    }
+  };
+
+  // --- 태스크 모달 ---
+  const openTaskModal = (idx?: number) => {
+    if (idx !== undefined && selectedProject) {
+      const t = selectedProject.tasks[idx];
+      setEditingTaskIdx(idx);
+      setTName(t.name);
+      setTCategory(t.category);
+      setTAssignee(t.assignee);
+      setTStart(t.start);
+      setTEnd(t.end);
+      setTStatus(t.status);
+      setTProgress(t.progress);
+      setTRemark(t.remark);
+    } else {
+      setEditingTaskIdx(-1);
+      setTName("");
+      setTCategory("기구설계");
+      setTAssignee("");
+      setTStart(selectedProject?.startDate || "");
+      setTEnd(selectedProject?.endDate || "");
+      setTStatus("대기");
+      setTProgress(0);
+      setTRemark("");
+    }
+    setIsTaskModalOpen(true);
+  };
+
+  const handleSaveTask = async () => {
+    if (!tName.trim()) { toast.error("업무명을 입력하세요."); return; }
+    if (!tAssignee) { toast.error("담당자를 선택하세요."); return; }
+    if (!tStart || !tEnd) { toast.error("시작일과 종료일을 입력하세요."); return; }
+    if (!selectedId) return;
+
+    const payload = {
+      name: tName,
+      category: tCategory,
+      assignee: tAssignee,
+      start_date: tStart,
+      end_date: tEnd,
+      status: tStatus,
+      progress: tProgress,
+      priority: "보통",
+      remark: tRemark,
+      sort_order: String(editingTaskIdx >= 0 ? editingTaskIdx : selectedProject?.tasks.length ?? 0),
+    };
+
+    try {
+      if (editingTaskIdx >= 0 && selectedProject?.tasks[editingTaskIdx]?.id) {
+        const taskId = selectedProject.tasks[editingTaskIdx].id!;
+        const res = await updateTask(taskId, payload);
+        if (res.success) {
+          toast.success("업무가 수정되었습니다.");
+          await fetchTaskDetails(selectedId);
+          setIsTaskModalOpen(false);
+        } else {
+          toast.error(res.message || "업무 수정에 실패했습니다.");
+        }
+      } else {
+        const res = await createTask(selectedId, payload);
+        if (res.success) {
+          toast.success("업무가 등록되었습니다.");
+          await fetchTaskDetails(selectedId);
+          await fetchProjects();
+          setIsTaskModalOpen(false);
+        } else {
+          toast.error(res.message || "업무 등록에 실패했습니다.");
+        }
+      }
+    } catch {
+      toast.error("업무 저장에 실패했습니다.");
+    }
+  };
+
+  const handleDeleteTask = async (idx: number) => {
+    if (!selectedProject || !selectedId) return;
+    const task = selectedProject.tasks[idx];
+    if (!task) return;
+    if (!confirm(`"${task.name}" 업무를 삭제하시겠습니까?`)) return;
+
+    const taskId = task.id;
+    if (!taskId) {
+      toast.error("삭제할 업무 정보를 찾을 수 없습니다.");
+      return;
+    }
+
+    try {
+      const res = await deleteTask(taskId);
+      if (res.success) {
+        toast.success("업무가 삭제되었습니다.");
+        await fetchTaskDetails(selectedId);
+        await fetchProjects();
+      } else {
+        toast.error(res.message || "업무 삭제에 실패했습니다.");
+      }
+    } catch {
+      toast.error("업무 삭제에 실패했습니다.");
+    }
+  };
+
+  // --- 상세 패널 계산 ---
+  const childProjects = useMemo(
+    () => (selectedId ? getChildren(projects, selectedId) : []),
+    [projects, selectedId]
+  );
+
+  const taskStats = useMemo(() => {
+    if (!selectedProject) return { total: 0, completed: 0, inProgress: 0, delayed: 0 };
+    const total = selectedProject.tasks.length;
+    const completed = selectedProject.tasks.filter((t) => t.status === "완료").length;
+    const inProgress = selectedProject.tasks.filter((t) => t.status === "진행중").length;
+    const delayed = selectedProject.tasks.filter(
+      (t) => t.status !== "완료" && new Date(t.end) < new Date()
+    ).length;
+    return { total, completed, inProgress, delayed };
+  }, [selectedProject]);
+
+  // 카테고리별 그룹핑 (WBS)
+  const tasksByCategory = useMemo(() => {
+    if (!selectedProject) return {};
+    const groups: Record<string, (Task & { _idx: number })[]> = {};
+    selectedProject.tasks.forEach((t, i) => {
+      if (!groups[t.category]) groups[t.category] = [];
+      groups[t.category].push({ ...t, _idx: i });
+    });
+    return groups;
+  }, [selectedProject]);
+
+  // 팀원별 그룹핑
+  const teamMembers = useMemo(() => {
+    if (!selectedProject) return {};
+    const members: Record<string, Task[]> = {};
+    selectedProject.tasks.forEach((t) => {
+      if (!members[t.assignee]) members[t.assignee] = [];
+      members[t.assignee].push(t);
+    });
+    return members;
+  }, [selectedProject]);
+
+  const parentProject = useMemo(
+    () => (selectedProject?.parentId ? projects.find((p) => p.id === selectedProject.parentId) : null),
+    [projects, selectedProject]
+  );
+
+  // 태스크 상세
+  const detailTask = useMemo(
+    () => (selectedProject && taskDetailIdx >= 0 ? selectedProject.tasks[taskDetailIdx] : null),
+    [selectedProject, taskDetailIdx]
+  );
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-4rem)] gap-3 p-3">
+      {/* 검색 필터 */}
+      <div className="shrink-0">
+        <DynamicSearchFilter
+          tableName="dsn_project"
+          filterId="c16-design-project"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredProjects.length}
+        />
+      </div>
+
+      {/* 좌우 분할 메인 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 왼쪽: 프로젝트 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold flex items-center gap-2">
+                  프로젝트 목록
+                  <span className="text-xs font-medium text-primary bg-primary/8 border border-primary/15 rounded-md px-1.5 py-0.5">{filteredProjects.length}건</span>
+                </div>
+                <Button size="sm" onClick={() => openProjectModal()}>
+                  <Plus className="w-4 h-4 mr-1.5" /> 프로젝트 등록
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={[
+                    { key: "projectNo", label: "프로젝트번호", width: "w-[160px]", render: (_val: any, row: any) => {
+                      const depth = row._depth ?? 0;
+                      const hasChildren = filteredProjects.some((c) => c.parentId === row.id);
+                      const isExpanded = expandedIds[row.id] !== false;
+                      return (
+                        <div className="flex items-center gap-1" style={{ paddingLeft: depth * 20 }}>
+                          {hasChildren ? (
+                            <button className="p-0.5 rounded hover:bg-muted transition-transform" onClick={(e) => { e.stopPropagation(); toggleExpand(row.id); }}>
+                              <ChevronRight className={cn("w-3.5 h-3.5 text-muted-foreground transition-transform", isExpanded && "rotate-90")} />
+                            </button>
+                          ) : (<span className="w-4" />)}
+                          <span className={cn("font-semibold text-xs", depth === 0 ? "text-primary" : depth === 1 ? "text-primary/80" : "text-primary/60")}>{row.projectNo}</span>
+                          {row.relation && (<span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(row.relation))}>{getRelationLabel(row.relation)}</span>)}
+                        </div>
+                      );
+                    }},
+                    { key: "status", label: "상태", width: "w-[80px]", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(val))}>{val}</span> },
+                    { key: "name", label: "프로젝트명", width: "w-[200px]", render: (val: any, row: any) => {
+                      const childCount = getAllDescendants(projects, row.id).length;
+                      return (<><span className="font-medium text-sm">{val}</span>{childCount > 0 && <Badge variant="outline" className="ml-1.5 text-[10px] py-0 px-1.5 font-normal"><FolderOpen className="w-3 h-3 mr-0.5" /> {childCount}</Badge>}</>);
+                    }},
+                    { key: "pm", label: "PM", width: "w-[70px]" },
+                    { key: "customer", label: "고객", width: "w-[80px]" },
+                    { key: "startDate", label: "시작일", width: "w-[90px]" },
+                    { key: "endDate", label: "종료예정", width: "w-[90px]" },
+                    { key: "progress", label: "진행률", width: "w-[100px]", align: "center" as const, render: (val: any) => (
+                      <div className="flex items-center gap-1.5">
+                        <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                          <div className={cn("h-full rounded-full transition-all", progressColor(val))} style={{ width: `${val}%` }} />
+                        </div>
+                        <span className={cn("text-[11px] font-medium min-w-[28px] text-right", progressTextColor(val))}>{val}%</span>
+                      </div>
+                    )},
+                    { key: "sourceNo", label: "원접수번호", width: "w-[90px]", render: (val: any) => <span className="text-[13px] text-muted-foreground">{val || "-"}</span> },
+                  ] as EDataTableColumn[]}
+                  data={ts.groupData(treeRows.map(({ project: p, depth }) => ({ ...p, _depth: depth })))}
+                  rowKey={(row) => row.id}
+                  loading={loading}
+                  emptyMessage="조건에 맞는 프로젝트가 없어요"
+                  selectedId={selectedId}
+                  onSelect={(id) => {
+                    if (id) {
+                      setSelectedId(id);
+                      setDetailTab("wbs");
+                      fetchTaskDetails(id);
+                    }
+                  }}
+                  onRowClick={(row) => {
+                    setSelectedId(row.id);
+                    setDetailTab("wbs");
+                    fetchTaskDetails(row.id);
+                  }}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 오른쪽: 상세 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 상세 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                {selectedProject ? (
+                  <div className="text-[13px] font-bold flex items-center gap-2">
+                    {selectedProject.name}
+                    <Badge variant="outline" className="text-[11px] font-normal px-1.5 py-0">{selectedProject.projectNo}</Badge>
+                  </div>
+                ) : (
+                  <div className="text-[13px] font-bold flex items-center gap-2">
+                    <ClipboardList className="w-3.5 h-3.5" /> 프로젝트 상세
+                  </div>
+                )}
+                {selectedProject && (
+                  <div className="flex items-center gap-1.5">
+                    <Button size="sm" variant="default" className="h-7 text-xs" onClick={() => openTaskModal()}>
+                      <Plus className="w-3.5 h-3.5 mr-1" /> 업무 추가
+                    </Button>
+                    <Button size="sm" variant="secondary" className="h-7 text-xs" onClick={() => openProjectModal(undefined, selectedProject.id)}>
+                      <FolderOpen className="w-3.5 h-3.5 mr-1" /> 하위 프로젝트
+                    </Button>
+                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openProjectModal(selectedProject)}>
+                      <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {!selectedId || !selectedProject ? (
+                <div className="flex-1 flex items-center justify-center p-8">
+                  <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-12 py-10 text-center">
+                    <Rocket className="h-10 w-10 text-muted-foreground/40" />
+                    <p className="text-sm text-muted-foreground">좌측에서 프로젝트를 선택해주세요</p>
+                  </div>
+                </div>
+              ) : (
+              <div className="flex-1 overflow-auto p-3 space-y-3">
+                    {/* 상위 프로젝트 링크 */}
+                    {parentProject && (
+                      <div
+                        className="flex items-center gap-2 px-3 py-2 bg-primary/5 rounded-md border-l-[3px] border-primary text-sm cursor-pointer hover:bg-primary/10 transition-colors"
+                        onClick={() => { setSelectedId(parentProject.id); setDetailTab("wbs"); fetchTaskDetails(parentProject.id); }}
+                      >
+                        <span className="text-muted-foreground">상위:</span>
+                        <span className="text-primary font-semibold">{parentProject.projectNo} - {parentProject.name}</span>
+                        {selectedProject.relation && (
+                          <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(selectedProject.relation))}>
+                            {getRelationLabel(selectedProject.relation)}
+                          </span>
+                        )}
+                      </div>
+                    )}
+
+                    {/* 개요 카드 */}
+                    <div className="space-y-1.5">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 현황</span>
+                      <div className="grid grid-cols-5 gap-2">
+                        {[
+                          { label: "전체 업무", value: taskStats.total, color: "text-primary", bg: "bg-primary/5 border-primary/10" },
+                          { label: "완료", value: taskStats.completed, color: "text-primary", bg: "bg-primary/5 border-primary/10" },
+                          { label: "진행중", value: taskStats.inProgress, color: "text-primary/80", bg: "bg-primary/5 border-primary/10" },
+                          { label: "지연", value: taskStats.delayed, color: "text-destructive", bg: "bg-destructive/5 border-destructive/10" },
+                          { label: "하위 프로젝트", value: childProjects.length, color: "text-foreground", bg: "bg-muted/40 border-border" },
+                        ].map((item) => (
+                          <div key={item.label} className={cn("rounded-lg p-2.5 text-center border transition-colors hover:opacity-80", item.bg)}>
+                            <div className="text-[10px] text-muted-foreground mb-0.5">{item.label}</div>
+                            <div className={cn("text-xl font-bold", item.color)}>{item.value}</div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 탭 */}
+                    <Tabs value={detailTab} onValueChange={setDetailTab} className="flex flex-col flex-1 overflow-hidden gap-0">
+                      <TabsList className="bg-card w-full justify-start rounded-none border-b border-border p-0 h-auto shrink-0">
+                        {[
+                          { value: "wbs", icon: <ClipboardList className="w-3.5 h-3.5" />, label: "WBS" },
+                          { value: "gantt", icon: <BarChart3 className="w-3.5 h-3.5" />, label: "간트차트" },
+                          { value: "team", icon: <Users className="w-3.5 h-3.5" />, label: "팀원" },
+                          { value: "subprojects", icon: <FolderOpen className="w-3.5 h-3.5" />, label: `하위(${childProjects.length})` },
+                        ].map((tab) => (
+                          <TabsTrigger
+                            key={tab.value}
+                            value={tab.value}
+                            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                          >
+                            {tab.icon} {tab.label}
+                          </TabsTrigger>
+                        ))}
+                      </TabsList>
+
+                      {/* WBS 탭 */}
+                      <TabsContent value="wbs" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
+                        {selectedProject.tasks.length === 0 ? (
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <ClipboardList className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">등록된 업무가 없어요</span>
+                          </div>
+                        ) : (
+                          <Table>
+                            <TableHeader className="sticky top-0 z-10">
+                              <TableRow className="bg-muted hover:bg-muted">
+                                <TableHead className="w-[180px] text-[11px] uppercase tracking-wide">업무명</TableHead>
+                                <TableHead className="w-[70px] text-[11px] uppercase tracking-wide">담당자</TableHead>
+                                <TableHead className="w-[85px] text-[11px] uppercase tracking-wide">시작일</TableHead>
+                                <TableHead className="w-[85px] text-[11px] uppercase tracking-wide">종료일</TableHead>
+                                <TableHead className="w-[70px] text-center text-[11px] uppercase tracking-wide">상태</TableHead>
+                                <TableHead className="w-[90px] text-center text-[11px] uppercase tracking-wide">진행률</TableHead>
+                                <TableHead className="w-[80px] text-center text-[11px] uppercase tracking-wide">관리</TableHead>
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                              {Object.entries(tasksByCategory).map(([cat, tasks]) => {
+                                const catProg = Math.round(tasks.reduce((s, t) => s + t.progress, 0) / tasks.length);
+                                return (
+                                  <React.Fragment key={cat}>
+                                    <TableRow className="bg-muted/30">
+                                      <TableCell colSpan={5} className="font-semibold text-sm">
+                                        {categoryIcons[cat] || "📋"} {cat}
+                                      </TableCell>
+                                      <TableCell className="text-center">
+                                        <span className={cn("text-xs font-semibold", progressTextColor(catProg))}>{catProg}%</span>
+                                      </TableCell>
+                                      <TableCell />
+                                    </TableRow>
+                                    {tasks.map((task) => {
+                                      const isDelay = task.status !== "완료" && new Date(task.end) < new Date();
+                                      const displayStatus = isDelay ? "지연" : task.status;
+                                      return (
+                                        <TableRow key={task._idx}>
+                                          <TableCell className="pl-8 text-[13px]">{task.name}</TableCell>
+                                          <TableCell className="text-[13px]">{task.assignee}</TableCell>
+                                          <TableCell className="text-[13px] text-muted-foreground">{task.start}</TableCell>
+                                          <TableCell className={cn("text-[13px]", isDelay && "text-destructive font-semibold")}>{task.end}</TableCell>
+                                          <TableCell className="text-center">
+                                            <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", getTaskStatusColor(displayStatus))}>
+                                              {displayStatus}
+                                            </span>
+                                          </TableCell>
+                                          <TableCell>
+                                            <div className="flex items-center gap-1">
+                                              <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                                                <div className={cn("h-full rounded-full", progressColor(task.progress))} style={{ width: `${task.progress}%` }} />
+                                              </div>
+                                              <span className="text-[10px] text-muted-foreground min-w-[24px] text-right">{task.progress}%</span>
+                                            </div>
+                                          </TableCell>
+                                          <TableCell className="text-center">
+                                            <div className="flex items-center justify-center gap-0.5">
+                                              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => { setTaskDetailIdx(task._idx); setTaskDetailTab("log"); setIsTaskDetailOpen(true); }}>
+                                                <FileText className="w-3.5 h-3.5" />
+                                              </Button>
+                                              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => openTaskModal(task._idx)}>
+                                                <Pencil className="w-3.5 h-3.5" />
+                                              </Button>
+                                              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeleteTask(task._idx)}>
+                                                <Trash2 className="w-3.5 h-3.5 text-destructive" />
+                                              </Button>
+                                            </div>
+                                          </TableCell>
+                                        </TableRow>
+                                      );
+                                    })}
+                                  </React.Fragment>
+                                );
+                              })}
+                            </TableBody>
+                          </Table>
+                        )}
+                      </TabsContent>
+
+                      {/* 간트차트 탭 */}
+                      <TabsContent value="gantt" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
+                        {selectedProject.tasks.length === 0 ? (
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <BarChart3 className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">업무를 등록하면 간트차트가 표시돼요</span>
+                          </div>
+                        ) : (
+                          <GanttChart tasks={selectedProject.tasks} startDate={selectedProject.startDate} endDate={selectedProject.endDate} />
+                        )}
+                      </TabsContent>
+
+                      {/* 팀원 탭 */}
+                      <TabsContent value="team" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
+                        {selectedProject.tasks.length === 0 ? (
+                          <div className="flex flex-col items-center gap-2 py-10 mx-auto max-w-[240px] border border-dashed border-border rounded-lg">
+                            <Users className="w-10 h-10 text-muted-foreground/30" />
+                            <span className="text-sm text-muted-foreground">업무를 등록하면 팀원 현황이 표시돼요</span>
+                          </div>
+                        ) : (
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                            {Object.entries(teamMembers).map(([name, tasks], idx) => {
+                              const avgProg = Math.round(tasks.reduce((s, t) => s + t.progress, 0) / tasks.length);
+                              const isPM = name === selectedProject.pm;
+                              const avatarColors = ["bg-primary", "bg-primary/80", "bg-primary/60", "bg-destructive/70"];
+                              return (
+                                <div key={name} className="border rounded-lg p-4 hover:shadow-sm transition-shadow">
+                                  <div className="flex items-center gap-3 mb-3">
+                                    <div className={cn("w-10 h-10 rounded-full flex items-center justify-center text-primary-foreground font-bold", avatarColors[idx % 4])}>
+                                      {name.charAt(0)}
+                                    </div>
+                                    <div>
+                                      <div className="font-semibold text-sm flex items-center gap-1.5">
+                                        {name}
+                                        {isPM && <Badge variant="secondary" className="text-[10px] py-0">PM</Badge>}
+                                      </div>
+                                      <div className="text-xs text-muted-foreground">
+                                        업무 {tasks.length}건 (진행중 {tasks.filter((t) => t.status === "진행중").length}건)
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <ul className="space-y-1 mb-3">
+                                    {tasks.map((t, ti) => {
+                                      const isDelay = t.status !== "완료" && new Date(t.end) < new Date();
+                                      return (
+                                        <li key={ti} className="flex items-center justify-between text-xs py-1 border-b border-muted/50 last:border-0">
+                                          <span>
+                                            {isDelay ? "🔴" : t.status === "완료" ? "✅" : t.status === "진행중" ? "🔵" : "⚪"} {t.name}
+                                          </span>
+                                          <span className={cn("text-[11px]", isDelay ? "text-destructive" : "text-muted-foreground")}>{t.progress}%</span>
+                                        </li>
+                                      );
+                                    })}
+                                  </ul>
+                                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                    <span>종합:</span>
+                                    <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                                      <div className={cn("h-full rounded-full", progressColor(avgProg))} style={{ width: `${avgProg}%` }} />
+                                    </div>
+                                    <span className={cn("font-semibold", progressTextColor(avgProg))}>{avgProg}%</span>
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </TabsContent>
+
+                      {/* 하위 프로젝트 탭 */}
+                      <TabsContent value="subprojects" className="flex flex-col flex-1 overflow-auto mt-0 p-2.5">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                          {childProjects.map((child) => {
+                            const completedCount = child.tasks.filter((t) => t.status === "완료").length;
+                            return (
+                              <div
+                                key={child.id}
+                                className="border rounded-lg p-4 cursor-pointer hover:border-primary hover:shadow-sm transition-all"
+                                onClick={() => { setSelectedId(child.id); setDetailTab("wbs"); fetchTaskDetails(child.id); }}
+                              >
+                                <div className="flex items-center justify-between mb-2">
+                                  <div>
+                                    <div className="text-xs font-semibold text-primary">{child.projectNo}</div>
+                                    {child.relation && (
+                                      <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", getRelationColor(child.relation))}>
+                                        {getRelationLabel(child.relation)}
+                                      </span>
+                                    )}
+                                  </div>
+                                  <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(child.status))}>{child.status}</span>
+                                </div>
+                                <div className="font-semibold text-sm mb-2">{child.name}</div>
+                                <div className="flex gap-3 text-xs text-muted-foreground mb-2">
+                                  <span>👤 {child.pm}</span>
+                                  <span>📅 {child.startDate} ~ {child.endDate}</span>
+                                </div>
+                                <div className="text-xs text-muted-foreground mb-2">
+                                  업무 {child.tasks.length}건 (완료 {completedCount}건)
+                                </div>
+                                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                  <span>진행률</span>
+                                  <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                                    <div className={cn("h-full rounded-full", progressColor(child.progress))} style={{ width: `${child.progress}%` }} />
+                                  </div>
+                                  <span className={cn("font-semibold", progressTextColor(child.progress))}>{child.progress}%</span>
+                                </div>
+                              </div>
+                            );
+                          })}
+                          <div
+                            className="border-2 border-dashed rounded-lg p-4 flex flex-col items-center justify-center min-h-[120px] cursor-pointer text-muted-foreground hover:border-primary hover:text-primary hover:bg-primary/5 transition-all"
+                            onClick={() => openProjectModal(undefined, selectedProject.id)}
+                          >
+                            <Plus className="w-7 h-7 mb-1" />
+                            <span className="text-sm font-medium">하위 프로젝트 등록</span>
+                          </div>
+                        </div>
+                      </TabsContent>
+                    </Tabs>
+                  </div>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 프로젝트 등록/수정 모달 */}
+      <Dialog open={isProjectModalOpen} onOpenChange={setIsProjectModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              {projects.some((p) => p.id === formProjectId)
+                ? "프로젝트 수정"
+                : formParentId
+                ? "하위 프로젝트 등록"
+                : "프로젝트 등록"}
+            </DialogTitle>
+            <DialogDescription>프로젝트 기본 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 sm:space-y-4">
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 번호</span>
+              <Input value={formProjectNo || formProjectId} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted/50" />
+            </div>
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트명 <span className="text-destructive">*</span></span>
+              <Input value={formName} onChange={(e) => setFormName(e.target.value)} placeholder="프로젝트명" className="h-8 text-xs sm:h-10 sm:text-sm" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">시작일 <span className="text-destructive">*</span></span>
+                <Input type="date" value={formStartDate} onChange={(e) => setFormStartDate(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">종료예정일 <span className="text-destructive">*</span></span>
+                <Input type="date" value={formEndDate} onChange={(e) => setFormEndDate(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">PM <span className="text-destructive">*</span></span>
+                <Select value={formPM || "none"} onValueChange={(v) => setFormPM(v === "none" ? "" : v)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">선택</SelectItem>
+                    <SelectItem value="이설계">이설계</SelectItem>
+                    <SelectItem value="박도면">박도면</SelectItem>
+                    <SelectItem value="최기구">최기구</SelectItem>
+                    <SelectItem value="김전장">김전장</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">고객</span>
+                <Input value={formCustomer} onChange={(e) => setFormCustomer(e.target.value)} placeholder="고객/거래처명" className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상위 프로젝트</span>
+                <Select value={formParentId || "none"} onValueChange={(v) => setFormParentId(v === "none" ? "" : v)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="없음" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">없음 (최상위)</SelectItem>
+                    {projects.filter((p) => p.id !== formProjectId).map((p) => (
+                      <SelectItem key={p.id} value={p.id}>{p.projectNo} - {p.name}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">관계 유형</span>
+                <Select value={formRelation} onValueChange={(v) => setFormRelation(v as RelationType)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="sub">하위 프로젝트</SelectItem>
+                    <SelectItem value="depend">종속 프로젝트</SelectItem>
+                    <SelectItem value="related">연관 프로젝트</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">원접수번호</span>
+              <Input value={formSourceNo} onChange={(e) => setFormSourceNo(e.target.value)} placeholder="DR-XXXX-XXXX" className="h-8 text-xs sm:h-10 sm:text-sm" />
+            </div>
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">설명</span>
+              <Textarea value={formDesc} onChange={(e) => setFormDesc(e.target.value)} placeholder="프로젝트 개요" rows={3} />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsProjectModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveProject}>
+              <Save className="w-4 h-4 mr-1.5" /> 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 업무 등록/수정 모달 */}
+      <Dialog open={isTaskModalOpen} onOpenChange={setIsTaskModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{editingTaskIdx >= 0 ? "업무 수정" : "업무 등록"}</DialogTitle>
+            <DialogDescription>업무 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무명 <span className="text-destructive">*</span></span>
+              <Input value={tName} onChange={(e) => setTName(e.target.value)} placeholder="업무명" className="h-8 text-xs sm:h-10 sm:text-sm" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무 유형</span>
+                <Select value={tCategory} onValueChange={setTCategory}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {["기구설계", "전장설계", "SW개발", "구매/조달", "조립/시운전", "검토/승인"].map((c) => (
+                      <SelectItem key={c} value={c}>{c}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자 <span className="text-destructive">*</span></span>
+                <Select value={tAssignee || "none"} onValueChange={(v) => setTAssignee(v === "none" ? "" : v)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">선택</SelectItem>
+                    {["이설계", "박도면", "최기구", "김전장", "정SW", "한조립", "박구매", "팀장"].map((n) => (
+                      <SelectItem key={n} value={n}>{n}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">시작일 <span className="text-destructive">*</span></span>
+                <Input type="date" value={tStart} onChange={(e) => setTStart(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">종료일 <span className="text-destructive">*</span></span>
+                <Input type="date" value={tEnd} onChange={(e) => setTEnd(e.target.value)} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상태</span>
+                <Select value={tStatus} onValueChange={(v) => setTStatus(v as TaskStatus)}>
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {(["대기", "진행중", "검토중", "완료"] as TaskStatus[]).map((s) => (
+                      <SelectItem key={s} value={s}>{s}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">진행률 (%)</span>
+                <Input type="number" min={0} max={100} value={tProgress} onChange={(e) => setTProgress(Number(e.target.value))} className="h-8 text-xs sm:h-10 sm:text-sm" />
+              </div>
+            </div>
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">비고</span>
+              <Textarea value={tRemark} onChange={(e) => setTRemark(e.target.value)} placeholder="비고 사항" rows={2} />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsTaskModalOpen(false)}>취소</Button>
+            <Button onClick={handleSaveTask}>
+              <Save className="w-4 h-4 mr-1.5" /> 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 태스크 상세 모달 (수행기록/이슈) */}
+      <Dialog open={isTaskDetailOpen} onOpenChange={setIsTaskDetailOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-3xl max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{detailTask?.name || "업무 상세"}</DialogTitle>
+            <DialogDescription>업무 이력 및 이슈를 확인해주세요.</DialogDescription>
+          </DialogHeader>
+          {detailTask && (
+            <>
+              {/* 태스크 요약 */}
+              <div className="grid grid-cols-2 gap-2 bg-muted/20 p-3 rounded-lg border text-xs">
+                <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">유형</span><span className="font-medium">{detailTask.category}</span></div>
+                <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">담당자</span><span className="font-medium">{detailTask.assignee}</span></div>
+                <div className="flex gap-2"><span className="text-muted-foreground w-[50px]">기간</span><span className="font-medium">{detailTask.start} ~ {detailTask.end}</span></div>
+                <div className="flex gap-2 items-center">
+                  <span className="text-muted-foreground w-[50px]">진행률</span>
+                  <div className="flex items-center gap-1.5 flex-1">
+                    <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden max-w-[60px]">
+                      <div className={cn("h-full rounded-full", progressColor(detailTask.progress))} style={{ width: `${detailTask.progress}%` }} />
+                    </div>
+                    <span className={cn("font-semibold", progressTextColor(detailTask.progress))}>{detailTask.progress}%</span>
+                  </div>
+                </div>
+              </div>
+
+              <Tabs value={taskDetailTab} onValueChange={setTaskDetailTab}>
+                <TabsList className="w-full">
+                  <TabsTrigger value="log" className="flex-1 text-xs">수행이력 ({detailTask.workLogs?.length || 0})</TabsTrigger>
+                  <TabsTrigger value="issue" className="flex-1 text-xs">이슈 ({detailTask.issues?.length || 0})</TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="log" className="mt-3">
+                  <div className="bg-primary/5 rounded-md p-2.5 mb-3 text-xs text-primary border border-primary/20">
+                    수행기록 등록/수정은 <strong>내업무현황</strong> 메뉴에서 진행해요.
+                  </div>
+                  {(!detailTask.workLogs || detailTask.workLogs.length === 0) ? (
+                    <div className="flex flex-col items-center gap-2 py-8 mx-auto max-w-xs border border-dashed border-border rounded-lg">
+                      <ClipboardList className="w-8 h-8 text-muted-foreground/30" />
+                      <span className="text-sm text-muted-foreground">등록된 수행기록이 없어요</span>
+                    </div>
+                  ) : (
+                    <div className="space-y-2 max-h-[300px] overflow-y-auto">
+                      {[...detailTask.workLogs].sort((a, b) => b.date.localeCompare(a.date)).map((log, i) => {
+                        const d = new Date(log.date);
+                        const days = ["일", "월", "화", "수", "목", "금", "토"];
+                        return (
+                          <div key={i} className="flex gap-3 p-3 bg-muted/20 rounded-lg border text-xs">
+                            <div className="bg-background border rounded-md px-2 py-1.5 text-center min-w-[55px] shrink-0">
+                              <div className="text-[10px] text-muted-foreground">{d.getMonth() + 1}월</div>
+                              <div className="text-lg font-bold">{d.getDate()}</div>
+                              <div className="text-[10px] text-muted-foreground">{days[d.getDay()]}</div>
+                            </div>
+                            <div className="flex-1">
+                              <div className="text-sm mb-1">{log.desc}</div>
+                              <div className="flex gap-2 text-muted-foreground flex-wrap">
+                                <Badge variant="secondary" className="text-[10px] py-0">⏱ {log.hours}h</Badge>
+                                {log.progressBefore !== undefined && (
+                                  <Badge variant="outline" className="text-[10px] py-0 bg-primary/5 text-primary border-primary/20">
+                                    📈 {log.progressBefore}% → {log.progressAfter}%
+                                  </Badge>
+                                )}
+                                {log.author && <span>👤 {log.author}</span>}
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </TabsContent>
+
+                <TabsContent value="issue" className="mt-3">
+                  {(!detailTask.issues || detailTask.issues.length === 0) ? (
+                    <div className="flex flex-col items-center gap-2 py-8 mx-auto max-w-xs border border-dashed border-border rounded-lg">
+                      <ClipboardList className="w-8 h-8 text-muted-foreground/30" />
+                      <span className="text-sm text-muted-foreground">등록된 이슈가 없어요</span>
+                    </div>
+                  ) : (
+                    <div className="space-y-2 max-h-[300px] overflow-y-auto">
+                      {detailTask.issues.map((issue) => {
+                        const priorityColor = issue.priority === "긴급" ? "text-destructive" : issue.priority === "높음" ? "text-destructive/70" : "text-muted-foreground";
+                        const statusBadge = issue.status === "해결" ? "bg-primary/10 text-primary" : issue.status === "진행중" ? "bg-primary/10 text-primary" : "bg-destructive/10 text-destructive";
+                        return (
+                          <div key={issue.id} className="border rounded-lg p-3">
+                            <div className="flex items-center justify-between mb-1.5">
+                              <div className="font-semibold text-xs flex items-center gap-1">
+                                <span className={priorityColor}>●</span> {issue.title}
+                              </div>
+                              <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", statusBadge)}>{issue.status}</span>
+                            </div>
+                            <div className="text-xs text-muted-foreground mb-1">{issue.desc}</div>
+                            <div className="flex gap-2 text-[11px] text-muted-foreground">
+                              <span>📅 {issue.registeredDate}</span>
+                              <span>👤 {issue.registeredBy}</span>
+                              {issue.resolvedDate && <span>✅ {issue.resolvedDate}</span>}
+                              <span className={priorityColor}>⚡ {issue.priority}</span>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </TabsContent>
+              </Tabs>
+            </>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsTaskDetailOpen(false)}>닫기</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
+
+// --- 간트차트 컴포넌트 ---
+function GanttChart({ tasks, startDate, endDate }: { tasks: Task[]; startDate: string; endDate: string }) {
+  const pStart = new Date(startDate);
+  const pEnd = new Date(endDate);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const totalDays = Math.ceil((pEnd.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24)) + 1;
+  const useWeekly = totalDays > 90;
+  const cellWidth = useWeekly ? 50 : 28;
+
+  const dates: Date[] = [];
+  const cur = new Date(pStart);
+  if (useWeekly) {
+    while (cur <= pEnd) {
+      dates.push(new Date(cur));
+      cur.setDate(cur.getDate() + 7);
+    }
+  } else {
+    while (cur <= pEnd) {
+      dates.push(new Date(cur));
+      cur.setDate(cur.getDate() + 1);
+    }
+  }
+
+  const barColors: Record<string, string> = {
+    기구설계: "bg-primary",
+    전장설계: "bg-primary/80",
+    SW개발: "bg-primary/60",
+    "구매/조달": "bg-secondary-foreground/70",
+    "조립/시운전": "bg-destructive/70",
+    "검토/승인": "bg-muted-foreground",
+  };
+
+  const todayFromStart = Math.ceil((today.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24));
+  const todayLeft = useWeekly ? (todayFromStart / 7) * cellWidth + 180 : todayFromStart * cellWidth + 180;
+  const showTodayLine = today >= pStart && today <= pEnd;
+
+  return (
+    <div className="border rounded-lg overflow-hidden">
+      {/* 범례 */}
+      <div className="flex gap-3 p-2 flex-wrap text-[11px] border-b bg-muted/20">
+        {Object.entries(barColors).map(([cat, color]) => (
+          <span key={cat} className="flex items-center gap-1">
+            {categoryIcons[cat]} <span className={cn("w-3 h-3 rounded-sm", color)} /> {cat}
+          </span>
+        ))}
+        <span className="text-destructive font-semibold">│ 오늘</span>
+      </div>
+
+      <div className="overflow-x-auto relative">
+        {showTodayLine && (
+          <div className="absolute top-0 bottom-0 w-[2px] bg-destructive z-5" style={{ left: todayLeft }} />
+        )}
+
+        {/* 헤더 */}
+        <div className="flex border-b sticky top-0 bg-muted/50 z-4">
+          <div className="w-[180px] min-w-[180px] p-2 text-xs font-semibold text-muted-foreground border-r shrink-0">업무명</div>
+          <div className="flex">
+            {dates.map((d, i) => {
+              const dow = d.getDay();
+              const isWeekend = (dow === 0 || dow === 6) && !useWeekly;
+              const isToday = d.toDateString() === today.toDateString();
+              return (
+                <div
+                  key={i}
+                  className={cn(
+                    "text-center text-[10px] text-muted-foreground border-r py-1.5",
+                    isWeekend && "bg-muted/30",
+                    isToday && "bg-primary/5 text-primary font-bold"
+                  )}
+                  style={{ minWidth: cellWidth }}
+                >
+                  {useWeekly ? `${d.getMonth() + 1}/${d.getDate()}` : d.getDate()}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* 행 */}
+        {tasks.map((task, i) => {
+          const tStart = new Date(task.start);
+          const tEnd = new Date(task.end);
+          const dayFromStart = Math.max(0, Math.ceil((tStart.getTime() - pStart.getTime()) / (1000 * 60 * 60 * 24)));
+          const taskDays = Math.max(1, Math.ceil((tEnd.getTime() - tStart.getTime()) / (1000 * 60 * 60 * 24)) + 1);
+          const leftPos = useWeekly ? (dayFromStart / 7) * cellWidth : dayFromStart * cellWidth;
+          const barWidth = useWeekly ? (taskDays / 7) * cellWidth : taskDays * cellWidth;
+          const barColor = barColors[task.category] || "bg-primary";
+
+          return (
+            <div key={i} className="flex border-b hover:bg-muted/30 min-h-[34px]">
+              <div className="w-[180px] min-w-[180px] px-3 py-2 text-xs text-muted-foreground border-r truncate shrink-0" title={task.name}>{task.name}</div>
+              <div className="flex relative items-center" style={{ minWidth: dates.length * cellWidth }}>
+                {dates.map((d, di) => {
+                  const dow = d.getDay();
+                  const isWeekend = (dow === 0 || dow === 6) && !useWeekly;
+                  return <div key={di} className={cn("border-r h-full", isWeekend && "bg-muted/30")} style={{ minWidth: cellWidth }} />;
+                })}
+                <div
+                  className={cn("absolute h-5 rounded text-[10px] text-primary-foreground flex items-center justify-center font-semibold", barColor)}
+                  style={{ left: leftPos, width: Math.max(barWidth, 16), top: "50%", transform: "translateY(-50%)" }}
+                >
+                  {barWidth > 30 ? `${task.progress}%` : ""}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/design/task-management/page.tsx b/frontend/app/(main)/COMPANY_9/design/task-management/page.tsx
new file mode 100644
index 00000000..f5603e46
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/design/task-management/page.tsx
@@ -0,0 +1,1288 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  RefreshCw,
+  ClipboardList,
+  Pencil,
+  Inbox,
+  CheckCircle2,
+  XCircle,
+  Rocket,
+  Eye,
+  ArrowRight,
+  Check,
+  ChevronsUpDown,
+  UserCircle,
+  Loader2,
+  User,
+  Users,
+  Settings2,
+} from "lucide-react";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  getDesignRequestList,
+  updateDesignRequest,
+  addRequestHistory,
+  createProject,
+} from "@/lib/api/design";
+import { getUserList } from "@/lib/api/user";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+
+// --- Types ---
+type SourceType = "dr" | "ecr";
+type TaskStatus = "신규접수" | "검토중" | "승인완료" | "반려" | "프로젝트생성";
+type Priority = "긴급" | "높음" | "보통" | "낮음";
+type MainTab = "all" | "dr" | "ecr";
+
+interface HistoryItem {
+  step: string;
+  date: string;
+  user: string;
+  desc: string;
+}
+
+interface TaskItem {
+  dbId: string;
+  id: string;
+  sourceType: SourceType;
+  date: string;
+  dueDate: string;
+  priority: Priority;
+  status: TaskStatus;
+  approvalStep: number;
+  targetName: string;
+  customer: string;
+  reqDept: string;
+  requester: string;
+  designer: string;
+  orderNo?: string;
+  designType?: string;
+  spec?: string;
+  changeType?: string;
+  drawingNo?: string;
+  reason?: string;
+  impact?: string[];
+  reviewMemo: string;
+  projectNo?: string;
+  history: HistoryItem[];
+}
+
+// --- 상태/우선순위 배지 색상 ---
+const getStatusVariant = (status: TaskStatus) => {
+  switch (status) {
+    case "신규접수":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "검토중":
+      return "bg-muted text-muted-foreground border-border";
+    case "승인완료":
+      return "bg-primary/15 text-primary border-primary/25";
+    case "반려":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "프로젝트생성":
+      return "bg-secondary text-secondary-foreground border-border";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getPriorityVariant = (priority: Priority) => {
+  switch (priority) {
+    case "긴급":
+      return "bg-destructive/10 text-destructive border-destructive/20";
+    case "높음":
+      return "bg-primary/10 text-primary border-primary/20";
+    case "보통":
+      return "bg-muted text-muted-foreground border-border";
+    case "낮음":
+      return "bg-muted text-muted-foreground border-border";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+};
+
+const getSourceBadge = (type: SourceType) => {
+  if (type === "dr")
+    return "bg-primary/10 text-primary border-primary/20";
+  return "bg-secondary text-secondary-foreground border-border";
+};
+
+const getStepIcon = (step: string) => {
+  switch (step) {
+    case "접수": return <Inbox className="inline h-4 w-4 mr-1" />;
+    case "검토": return <Eye className="inline h-4 w-4 mr-1" />;
+    case "승인": return <CheckCircle2 className="inline h-4 w-4 mr-1" />;
+    case "반려": return <XCircle className="inline h-4 w-4 mr-1" />;
+    case "프로젝트": return <Rocket className="inline h-4 w-4 mr-1" />;
+    default: return <ClipboardList className="inline h-4 w-4 mr-1" />;
+  }
+};
+
+// --- API 응답 → TaskItem 매핑 ---
+function mapApiToTaskItem(r: any): TaskItem {
+  const historyRaw = Array.isArray(r.history) ? r.history : [];
+  const history: HistoryItem[] = historyRaw.map((h: any) => ({
+    step: h.step || "",
+    date: h.history_date || "",
+    user: h.user_name || "",
+    desc: h.description || "",
+  }));
+  const impact = Array.isArray(r.impact) ? r.impact : [];
+  const formatDate = (d: string | null | undefined) =>
+    d ? (d.includes("T") ? d.split("T")[0] : d) : "";
+  return {
+    dbId: r.id,
+    id: r.request_no || r.id,
+    sourceType: (r.source_type === "ecr" ? "ecr" : "dr") as SourceType,
+    date: formatDate(r.request_date),
+    dueDate: formatDate(r.due_date),
+    priority: (r.priority || "보통") as Priority,
+    status: (r.status || "신규접수") as TaskStatus,
+    approvalStep: typeof r.approval_step === "number" ? r.approval_step : 0,
+    targetName: r.target_name || "",
+    customer: r.customer || "",
+    reqDept: r.req_dept || "",
+    requester: r.requester || "",
+    designer: r.designer || "",
+    orderNo: r.order_no,
+    designType: r.design_type,
+    spec: r.spec,
+    changeType: r.change_type,
+    drawingNo: r.drawing_no,
+    reason: r.reason,
+    impact: impact.length ? impact : undefined,
+    reviewMemo: r.review_memo || "",
+    projectNo: r.project_id,
+    history,
+  };
+}
+
+// --- 승인 프로세스 스텝 ---
+const APPROVAL_STEPS = [
+  { label: "접수", step: 0 },
+  { label: "검토", step: 1 },
+  { label: "내부승인", step: 2 },
+  { label: "프로젝트", step: 3 },
+];
+
+// --- 현황 카드 설정 ---
+const STAT_CARDS: { label: string; status: TaskStatus; color: string; textColor: string }[] = [
+  { label: "신규접수", status: "신규접수", color: "bg-primary", textColor: "text-primary-foreground" },
+  { label: "검토중", status: "검토중", color: "bg-muted border border-border", textColor: "text-foreground" },
+  { label: "승인완료", status: "승인완료", color: "bg-primary/80", textColor: "text-primary-foreground" },
+  { label: "반려", status: "반려", color: "bg-destructive", textColor: "text-destructive-foreground" },
+  { label: "프로젝트", status: "프로젝트생성", color: "bg-secondary", textColor: "text-secondary-foreground" },
+];
+
+interface EmployeeOption {
+  userId: string;
+  userName: string;
+  deptName: string;
+}
+
+const TASK_GRID_COLUMNS = [
+  { key: "source_type", label: "구분" },
+  { key: "request_no", label: "접수번호" },
+  { key: "status", label: "상태" },
+  { key: "priority", label: "우선순위" },
+  { key: "target_name", label: "설비/품목명" },
+  { key: "req_dept", label: "의뢰부서" },
+  { key: "requester", label: "의뢰자" },
+  { key: "request_date", label: "접수일자" },
+  { key: "due_date", label: "희망납기" },
+  { key: "designer", label: "설계담당" },
+];
+
+export default function DesignTaskManagementPage() {
+  const ts = useTableSettings("c16-task-management", "dsn_design_request", TASK_GRID_COLUMNS);
+  const { user, userName, loading: authLoading } = useAuth();
+  const [allTasks, setAllTasks] = useState<TaskItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+  const [currentTab, setCurrentTab] = useState<MainTab>("all");
+  const [employees, setEmployees] = useState<EmployeeOption[]>([]);
+  const [myTasksOnly, setMyTasksOnly] = useState(true);
+
+  const fetchEmployees = useCallback(async () => {
+    try {
+      const res = await getUserList({ size: 1000 });
+      if (res.success && res.data) {
+        const list = (res.data as any[]).map((u: any) => ({
+          userId: u.user_id || u.userId,
+          userName: u.user_name || u.userName || "",
+          deptName: u.dept_name || u.deptName || "",
+        }));
+        setEmployees(list);
+      }
+    } catch {
+      // 사원 목록 로드 실패 시 빈 배열 유지
+    }
+  }, []);
+
+  const fetchTasks = useCallback(async () => {
+    setLoading(true);
+    const res = await getDesignRequestList({});
+    setLoading(false);
+    if (res.success && res.data) {
+      const mapped = (res.data as any[]).map(mapApiToTaskItem);
+      setAllTasks(mapped);
+    } else {
+      toast.error(res.message || "데이터를 불러오지 못했습니다.");
+      setAllTasks([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchTasks();
+    fetchEmployees();
+  }, [fetchTasks, fetchEmployees]);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 담당자 선택 모달 상태
+  const [designerModalOpen, setDesignerModalOpen] = useState(false);
+  const [designerModalTaskId, setDesignerModalTaskId] = useState<string | null>(null);
+  const [designerModalValue, setDesignerModalValue] = useState("");
+  const [designerComboOpen, setDesignerComboOpen] = useState(false);
+
+  // 모달 상태
+  const [rejectModalOpen, setRejectModalOpen] = useState(false);
+  const [rejectTaskId, setRejectTaskId] = useState<string | null>(null);
+  const [rejectReason, setRejectReason] = useState("");
+  const [projectModalOpen, setProjectModalOpen] = useState(false);
+  const [projectTaskId, setProjectTaskId] = useState<string | null>(null);
+  const [pmComboOpen, setPmComboOpen] = useState(false);
+  const [projectForm, setProjectForm] = useState({
+    projNo: "",
+    projName: "",
+    projSourceNo: "",
+    projStartDate: "",
+    projEndDate: "",
+    projPM: "",
+    projCustomer: "",
+    projDesc: "",
+  });
+
+  // 검토 메모
+  const [reviewMemoText, setReviewMemoText] = useState("");
+
+  // 현재 사용자 관련 업무만 필터링
+  const myRelatedTasks = useMemo(() => {
+    if (!myTasksOnly || !userName) return allTasks;
+    const currentUserName = userName;
+    const currentDeptName = user?.deptName || "";
+    return allTasks.filter((item) => {
+      if (item.requester === currentUserName) return true;
+      if (item.designer === currentUserName) return true;
+      if (currentDeptName && item.reqDept === currentDeptName) return true;
+      const inHistory = item.history.some((h) => h.user === currentUserName);
+      if (inHistory) return true;
+      return false;
+    });
+  }, [allTasks, myTasksOnly, userName, user?.deptName]);
+
+  // 탭별 카운트
+  const tabCounts = useMemo(() => {
+    const drItems = myRelatedTasks.filter((t) => t.sourceType === "dr");
+    const ecrItems = myRelatedTasks.filter((t) => t.sourceType === "ecr");
+    const newDR = drItems.filter((t) => t.status === "신규접수").length;
+    const newECR = ecrItems.filter((t) => t.status === "신규접수").length;
+    return {
+      all: newDR + newECR || myRelatedTasks.length,
+      allIsNew: newDR + newECR > 0,
+      dr: newDR || drItems.length,
+      drIsNew: newDR > 0,
+      ecr: newECR || ecrItems.length,
+      ecrIsNew: newECR > 0,
+    };
+  }, [myRelatedTasks]);
+
+  // snake_case → camelCase 매핑 (DynamicSearchFilter의 columnName은 snake_case)
+  const taskFieldMap: Record<string, string> = {
+    source_type: "sourceType",
+    request_no: "id",
+    target_name: "targetName",
+    req_dept: "reqDept",
+    request_date: "date",
+    due_date: "dueDate",
+    approval_step: "approvalStep",
+    design_type: "designType",
+    drawing_no: "drawingNo",
+    change_type: "changeType",
+    review_memo: "reviewMemo",
+    project_id: "projectNo",
+  };
+  const getTaskFieldValue = (obj: any, colName: string): string => {
+    const key = taskFieldMap[colName] || colName;
+    const val = obj[key];
+    if (Array.isArray(val)) return val.join(",");
+    return val !== undefined && val !== null ? String(val) : "";
+  };
+
+  // 필터링된 데이터
+  const filteredData = useMemo(() => {
+    return myRelatedTasks.filter((item) => {
+      if (currentTab === "dr" && item.sourceType !== "dr") return false;
+      if (currentTab === "ecr" && item.sourceType !== "ecr") return false;
+      for (const f of searchFilters) {
+        const val = getTaskFieldValue(item, f.columnName);
+        if (f.operator === "contains") {
+          if (!val.toLowerCase().includes(f.value.toLowerCase())) return false;
+        } else if (f.operator === "equals") {
+          if (val !== f.value) return false;
+        } else if (f.operator === "in") {
+          const allowed = f.value.split("|");
+          if (!allowed.includes(val)) return false;
+        } else if (f.operator === "between") {
+          const [from, to] = f.value.split("|");
+          if (from && val < from) return false;
+          if (to && val > to) return false;
+        }
+      }
+      return true;
+    });
+  }, [myRelatedTasks, currentTab, searchFilters]);
+
+  // 현황 통계
+  const stats = useMemo(() => {
+    return {
+      신규접수: myRelatedTasks.filter((t) => t.status === "신규접수").length,
+      검토중: myRelatedTasks.filter((t) => t.status === "검토중").length,
+      승인완료: myRelatedTasks.filter((t) => t.status === "승인완료").length,
+      반려: myRelatedTasks.filter((t) => t.status === "반려").length,
+      프로젝트생성: myRelatedTasks.filter((t) => t.status === "프로젝트생성").length,
+    };
+  }, [myRelatedTasks]);
+
+  const selectedTask = useMemo(
+    () => allTasks.find((t) => t.dbId === selectedTaskId) || null,
+    [allTasks, selectedTaskId]
+  );
+
+  // 선택된 업무 변경 시 메모 동기화
+  useEffect(() => {
+    if (selectedTask) {
+      setReviewMemoText(selectedTask.reviewMemo || "");
+    }
+  }, [selectedTask]);
+
+  // --- 액션 핸들러 ---
+  const handleSelectTask = useCallback((dbId: string) => {
+    setSelectedTaskId(dbId);
+  }, []);
+
+  const handleOpenDesignerModal = useCallback((dbId: string) => {
+    setDesignerModalTaskId(dbId);
+    setDesignerModalValue("");
+    setDesignerComboOpen(false);
+    setDesignerModalOpen(true);
+  }, []);
+
+  const handleConfirmDesigner = useCallback(async () => {
+    if (!designerModalValue) {
+      toast.error("설계 담당자를 선택하세요.");
+      return;
+    }
+    if (!designerModalTaskId) return;
+
+    const selected = employees.find((e) => e.userId === designerModalValue);
+    const designerName = selected?.userName || designerModalValue;
+
+    const historyDate = new Date().toISOString().split("T")[0];
+    const historyRes = await addRequestHistory(designerModalTaskId, {
+      step: "검토",
+      history_date: historyDate,
+      user_name: designerName,
+      description: "검토 착수 - 담당자 배정",
+    });
+    if (!historyRes.success) {
+      toast.error(historyRes.message || "이력 추가에 실패했습니다.");
+      return;
+    }
+
+    const updateRes = await updateDesignRequest(designerModalTaskId, {
+      status: "검토중",
+      approval_step: 1,
+      designer: designerName,
+    });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "상태 업데이트에 실패했습니다.");
+      return;
+    }
+    setDesignerModalOpen(false);
+    toast.success("검토가 착수되었습니다.");
+    fetchTasks();
+  }, [designerModalTaskId, designerModalValue, employees, fetchTasks]);
+
+  const handleApprove = useCallback(
+    async (dbId: string) => {
+      if (!confirm("내부 승인을 진행하시겠습니까?")) return;
+
+      const historyDate = new Date().toISOString().split("T")[0];
+      const historyRes = await addRequestHistory(dbId, {
+        step: "승인",
+        history_date: historyDate,
+        user_name: "팀장",
+        description: "내부 검토 완료, 승인 처리",
+      });
+      if (!historyRes.success) {
+        toast.error(historyRes.message || "이력 추가에 실패했습니다.");
+        return;
+      }
+
+      const updateRes = await updateDesignRequest(dbId, {
+        status: "승인완료",
+        approval_step: 3,
+      });
+      if (!updateRes.success) {
+        toast.error(updateRes.message || "상태 업데이트에 실패했습니다.");
+        return;
+      }
+      toast.success("승인 처리되었습니다.");
+      fetchTasks();
+    },
+    [fetchTasks]
+  );
+
+  const handleOpenRejectModal = useCallback((dbId: string) => {
+    setRejectTaskId(dbId);
+    setRejectReason("");
+    setRejectModalOpen(true);
+  }, []);
+
+  const handleConfirmReject = useCallback(async () => {
+    if (!rejectReason.trim()) {
+      toast.error("반려 사유를 입력하세요.");
+      return;
+    }
+    if (!rejectTaskId) return;
+
+    const historyDate = new Date().toISOString().split("T")[0];
+    const historyRes = await addRequestHistory(rejectTaskId, {
+      step: "반려",
+      history_date: historyDate,
+      user_name: "팀장",
+      description: rejectReason,
+    });
+    if (!historyRes.success) {
+      toast.error(historyRes.message || "이력 추가에 실패했습니다.");
+      return;
+    }
+
+    const updateRes = await updateDesignRequest(rejectTaskId, {
+      status: "반려",
+      approval_step: -1,
+      review_memo: rejectReason,
+    });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "상태 업데이트에 실패했습니다.");
+      return;
+    }
+    setRejectModalOpen(false);
+    toast.success("반려 처리되었습니다.");
+    fetchTasks();
+  }, [rejectTaskId, rejectReason, fetchTasks]);
+
+  const handleOpenProjectModal = useCallback(
+    (dbId: string) => {
+      const task = allTasks.find((t) => t.dbId === dbId);
+      if (!task) return;
+
+      const year = new Date().getFullYear();
+      const existingProjects = allTasks.filter((t) => t.projectNo).length;
+      const projNo = `PJ-${year}-${String(existingProjects + 1).padStart(4, "0")}`;
+
+      setProjectTaskId(dbId);
+      const matchedEmployee = employees.find((e) => e.userName === task.designer);
+      setProjectForm({
+        projNo,
+        projName: task.targetName,
+        projSourceNo: task.id,
+        projStartDate: new Date().toISOString().split("T")[0],
+        projEndDate: task.dueDate,
+        projPM: matchedEmployee?.userId || "",
+        projCustomer: task.customer || task.reqDept,
+        projDesc: task.sourceType === "dr" ? task.spec || "" : task.reason || "",
+      });
+      setProjectModalOpen(true);
+    },
+    [allTasks, employees]
+  );
+
+  const handleCreateProject = useCallback(async () => {
+    if (!projectForm.projName.trim()) { toast.error("프로젝트명을 입력하세요."); return; }
+    if (!projectForm.projStartDate) { toast.error("시작일을 입력하세요."); return; }
+    if (!projectForm.projEndDate) { toast.error("종료예정일을 입력하세요."); return; }
+    if (!projectForm.projPM) { toast.error("PM을 선택하세요."); return; }
+    if (!projectTaskId) return;
+
+    const pmEmployee = employees.find((e) => e.userId === projectForm.projPM);
+    const pmName = pmEmployee?.userName || projectForm.projPM;
+
+    // 1) 실제 프로젝트 테이블(dsn_project)에 INSERT
+    const projectRes = await createProject({
+      project_no: projectForm.projNo,
+      name: projectForm.projName,
+      status: "계획",
+      pm: pmName,
+      customer: projectForm.projCustomer,
+      start_date: projectForm.projStartDate,
+      end_date: projectForm.projEndDate,
+      source_no: projectForm.projSourceNo,
+      description: projectForm.projDesc,
+      progress: "0",
+    });
+    if (!projectRes.success) {
+      toast.error(projectRes.message || "프로젝트 생성에 실패했습니다.");
+      return;
+    }
+
+    const createdProjectId = projectRes.data?.id || projectForm.projNo;
+
+    // 2) 이력 추가
+    const historyDate = new Date().toISOString().split("T")[0];
+    const historyRes = await addRequestHistory(projectTaskId, {
+      step: "프로젝트",
+      history_date: historyDate,
+      user_name: pmName,
+      description: `${projectForm.projNo} 프로젝트 생성 - ${projectForm.projName}`,
+    });
+    if (!historyRes.success) {
+      toast.error(historyRes.message || "이력 추가에 실패했습니다.");
+      return;
+    }
+
+    // 3) 설계요청 상태 업데이트 + 프로젝트 ID 연결
+    const updateRes = await updateDesignRequest(projectTaskId, {
+      status: "프로젝트생성",
+      approval_step: 4,
+      project_id: createdProjectId,
+    });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "상태 업데이트에 실패했습니다.");
+      return;
+    }
+    setProjectModalOpen(false);
+    toast.success(`프로젝트 ${projectForm.projNo}가 생성되었습니다.`);
+    fetchTasks();
+  }, [projectForm, projectTaskId, employees, fetchTasks]);
+
+  const handleSaveReviewMemo = useCallback(async () => {
+    if (!selectedTaskId) return;
+
+    const updateRes = await updateDesignRequest(selectedTaskId, {
+      review_memo: reviewMemoText,
+    });
+    if (!updateRes.success) {
+      toast.error(updateRes.message || "메모 저장에 실패했습니다.");
+      return;
+    }
+    toast.success("검토 메모가 저장되었습니다.");
+    fetchTasks();
+  }, [selectedTaskId, reviewMemoText, fetchTasks]);
+
+  const handleFilterByStatus = useCallback((_status: TaskStatus) => {
+    // Status filter now handled by DynamicSearchFilter
+  }, []);
+
+  // 납기 남은 일수 계산
+  const getDueDateInfo = (dueDate: string) => {
+    const due = new Date(dueDate);
+    const today = new Date();
+    const diffDays = Math.ceil((due.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+    const color = diffDays < 0 ? "text-destructive" : diffDays <= 7 ? "text-primary" : "text-muted-foreground";
+    const text = diffDays < 0 ? `${Math.abs(diffDays)}일 초과` : diffDays === 0 ? "오늘" : `${diffDays}일 남음`;
+    return { color, text };
+  };
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col overflow-hidden bg-background">
+      {/* 탭 바 */}
+      <div className="flex items-center border-b-2 border-border bg-card px-5">
+        {([
+          { key: "all" as MainTab, label: "전체", icon: <ClipboardList className="h-4 w-4" />, count: tabCounts.all, isNew: tabCounts.allIsNew },
+          { key: "dr" as MainTab, label: "설계의뢰(DR)", icon: <Pencil className="h-4 w-4" />, count: tabCounts.dr, isNew: tabCounts.drIsNew },
+          { key: "ecr" as MainTab, label: "설계변경(ECR)", icon: <RefreshCw className="h-4 w-4" />, count: tabCounts.ecr, isNew: tabCounts.ecrIsNew },
+        ]).map((tab) => (
+          <button
+            key={tab.key}
+            className={cn(
+              "relative flex items-center gap-2 px-6 py-3.5 text-sm font-semibold transition-colors",
+              currentTab === tab.key
+                ? "text-primary after:absolute after:bottom-[-2px] after:left-0 after:right-0 after:h-0.5 after:bg-primary"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground"
+            )}
+            onClick={() => {
+              setCurrentTab(tab.key);
+              setSelectedTaskId(null);
+            }}
+          >
+            {tab.icon}
+            {tab.label}
+            <span
+              className={cn(
+                "min-w-[20px] rounded-full px-1.5 py-0.5 text-center text-[11px] font-bold",
+                tab.isNew ? "bg-destructive text-destructive-foreground" : "bg-muted text-muted-foreground"
+              )}
+            >
+              {tab.count}
+            </span>
+          </button>
+        ))}
+        <div className="flex-1" />
+        <div className="flex items-center gap-3">
+          {userName && (
+            <div className="flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
+              <UserCircle className="h-3.5 w-3.5" />
+              {userName}
+              {user?.deptName && <span className="text-primary/60">({user.deptName})</span>}
+            </div>
+          )}
+          <div className="flex items-center overflow-hidden rounded-full border border-border">
+            <button
+              className={cn(
+                "flex items-center gap-1 px-3 py-1.5 text-xs font-medium transition-colors",
+                myTasksOnly
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-card text-muted-foreground hover:text-foreground"
+              )}
+              onClick={() => setMyTasksOnly(true)}
+            >
+              <User className="h-3 w-3" />
+              내 업무
+            </button>
+            <button
+              className={cn(
+                "flex items-center gap-1 px-3 py-1.5 text-xs font-medium transition-colors",
+                !myTasksOnly
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-card text-muted-foreground hover:text-foreground"
+              )}
+              onClick={() => setMyTasksOnly(false)}
+            >
+              <Users className="h-3 w-3" />
+              전체
+            </button>
+          </div>
+          <div className="flex items-center gap-1.5 rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">
+            <span className="h-2 w-2 animate-pulse rounded-full bg-primary" />
+            실시간 동기화 중
+          </div>
+        </div>
+      </div>
+
+      {/* 검색 필터 */}
+      <div className="border-b border-border bg-card px-4 py-3">
+        <DynamicSearchFilter
+          tableName="dsn_design_request"
+          filterId="c16-task-management"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={filteredData.length}
+        />
+      </div>
+
+      {/* 좌우 분할 패널 */}
+      <div className="flex-1 overflow-hidden p-3">
+        <ResizablePanelGroup direction="horizontal" className="h-full rounded-lg border border-border">
+          {/* 왼쪽: 접수 목록 */}
+          <ResizablePanel defaultSize={58} minSize={35}>
+            <div className="flex h-full flex-col bg-card">
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold flex items-center gap-2">
+                  {myTasksOnly ? "내 관련 업무" : "접수 업무 목록"}
+                  <span className="text-primary bg-primary/8 border border-primary/15 rounded-md px-1.5 py-0.5 text-[11px] font-semibold">{filteredData.length}건</span>
+                  {myTasksOnly && (
+                    <span className="text-xs font-normal text-muted-foreground">
+                      전체 {allTasks.length}건 중
+                    </span>
+                  )}
+                </div>
+                <Button size="sm" variant="outline" onClick={fetchTasks} disabled={loading}>
+                  {loading ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                  동기화
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+              <EDataTable<TaskItem>
+                columns={ts.visibleColumns.map((col): EDataTableColumn<TaskItem> => ({
+                  key: col.key === "request_no" ? "id" : col.key === "target_name" ? "targetName" : col.key === "req_dept" ? "reqDept" : col.key === "request_date" ? "date" : col.key === "due_date" ? "dueDate" : col.key === "source_type" ? "sourceType" : col.key,
+                  label: col.label,
+                  width: col.key === "source_type" ? "w-[60px]" : col.key === "request_no" ? "w-[130px]" : col.key === "status" ? "w-[90px]" : col.key === "priority" ? "w-[80px]" : col.key === "target_name" ? "min-w-[180px]" : col.key === "req_dept" ? "w-[90px]" : col.key === "requester" ? "w-[80px]" : col.key === "request_date" ? "w-[100px]" : col.key === "due_date" ? "w-[100px]" : col.key === "designer" ? "w-[80px]" : undefined,
+                  align: (col.key === "source_type" || col.key === "status" || col.key === "priority") ? "center" : undefined,
+                  render: col.key === "source_type"
+                    ? (val: any, row: TaskItem) => (
+                        <Badge variant="outline" className={cn("text-[10px] font-bold", getSourceBadge(row.sourceType))}>
+                          {row.sourceType === "dr" ? "DR" : "ECR"}
+                        </Badge>
+                      )
+                    : col.key === "request_no"
+                    ? (val: any, row: TaskItem) => (
+                        <span className={cn("text-[13px] font-semibold", row.sourceType === "dr" ? "text-primary" : "text-secondary-foreground")}>
+                          {val}
+                        </span>
+                      )
+                    : col.key === "status"
+                    ? (val: any) => (
+                        <Badge variant="outline" className={cn("text-[10px]", getStatusVariant(val))}>
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "priority"
+                    ? (val: any) => (
+                        <Badge variant="outline" className={cn("text-[10px]", getPriorityVariant(val))}>
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "designer"
+                    ? (val: any) => val ? <span>{val}</span> : <span className="text-muted-foreground">미배정</span>
+                    : undefined,
+                }))}
+                data={ts.groupData(filteredData)}
+                loading={loading}
+                emptyMessage="조건에 맞는 업무가 없어요"
+                rowKey={(row) => row.dbId}
+                selectedId={selectedTaskId}
+                onSelect={(id) => handleSelectTask(id ?? "")}
+                draggableColumns={false}
+                showPagination={false}
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 오른쪽: 검토 및 승인 */}
+          <ResizablePanel defaultSize={42} minSize={30}>
+            <div className="flex h-full flex-col bg-card">
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="text-[13px] font-bold">검토 및 승인</div>
+              </div>
+              <div className="flex-1 overflow-auto p-3">
+                {/* 업무 현황 */}
+                <div className="mb-3 space-y-1.5">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">업무 현황</span>
+                  <div className="grid grid-cols-5 gap-2">
+                    {STAT_CARDS.map((card) => (
+                      <button
+                        key={card.status}
+                        className={cn(
+                          "rounded-lg p-2.5 text-center transition-all hover:-translate-y-0.5 hover:shadow-md",
+                          card.color, card.textColor
+                        )}
+                        onClick={() => handleFilterByStatus(card.status)}
+                      >
+                        <div className="text-[11px] font-medium opacity-90 leading-tight">{card.label}</div>
+                        <div className="text-xl font-bold mt-0.5">{stats[card.status]}</div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* 상세 정보 */}
+                {!selectedTask ? (
+                  <div className="flex items-center justify-center p-6">
+                    <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-10 py-8 text-center">
+                      <Inbox className="h-10 w-10 text-muted-foreground/40" />
+                      <p className="text-sm text-muted-foreground">좌측에서 업무를 선택해주세요</p>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="space-y-3">
+                    {/* 승인 프로세스 */}
+                    <div className="rounded-lg border border-border/80 bg-muted/30 p-3.5">
+                      <h3 className="mb-3 text-sm font-bold text-foreground">승인 프로세스</h3>
+                      <div className="mb-3 flex items-center gap-1">
+                        {APPROVAL_STEPS.map((s, idx) => {
+                          let stepClass = "border-border bg-card text-muted-foreground";
+                          if (selectedTask.status === "반려" && idx >= 2) {
+                            stepClass = idx === 2 ? "border-destructive bg-destructive/5 text-destructive" : "border-border bg-card text-muted-foreground";
+                          } else if (selectedTask.approvalStep > idx) {
+                            stepClass = "border-primary bg-primary/5 text-primary";
+                          } else if (selectedTask.approvalStep === idx) {
+                            stepClass = "border-primary bg-primary/5 text-primary ring-2 ring-primary/10";
+                          }
+                          return (
+                            <React.Fragment key={s.label}>
+                              <div className={cn("flex min-w-[70px] flex-col items-center gap-1 rounded-lg border-2 px-3 py-2 text-center text-xs font-semibold transition-all", stepClass)}>
+                                {s.label}
+                              </div>
+                              {idx < APPROVAL_STEPS.length - 1 && (
+                                <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground/50" />
+                              )}
+                            </React.Fragment>
+                          );
+                        })}
+                      </div>
+
+                      {/* 액션 버튼 */}
+                      <div className="flex flex-wrap gap-2">
+                        {selectedTask.status === "신규접수" && (
+                          <>
+                            <Button size="sm" variant="default" onClick={() => handleOpenDesignerModal(selectedTask.dbId)}>
+                              <Eye className="mr-1 h-3.5 w-3.5" /> 검토 착수
+                            </Button>
+                            <Button size="sm" variant="destructive" onClick={() => handleOpenRejectModal(selectedTask.dbId)}>
+                              <XCircle className="mr-1 h-3.5 w-3.5" /> 반려
+                            </Button>
+                          </>
+                        )}
+                        {selectedTask.status === "검토중" && (
+                          <>
+                            <Button size="sm" variant="default" onClick={() => handleApprove(selectedTask.dbId)}>
+                              <CheckCircle2 className="mr-1 h-3.5 w-3.5" /> 내부 승인
+                            </Button>
+                            <Button size="sm" variant="destructive" onClick={() => handleOpenRejectModal(selectedTask.dbId)}>
+                              <XCircle className="mr-1 h-3.5 w-3.5" /> 반려
+                            </Button>
+                          </>
+                        )}
+                        {selectedTask.status === "승인완료" && (
+                          <Button size="sm" variant="default" onClick={() => handleOpenProjectModal(selectedTask.dbId)}>
+                            <Rocket className="mr-1 h-3.5 w-3.5" /> 프로젝트 생성
+                          </Button>
+                        )}
+                        {selectedTask.status === "프로젝트생성" && selectedTask.projectNo && (
+                          <Button size="sm" variant="default" onClick={() => toast.info(`${selectedTask.projectNo} 프로젝트 → 설계프로젝트관리 메뉴에서 확인`)}>
+                            프로젝트 보기 ({selectedTask.projectNo})
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 접수 정보 */}
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">접수 정보</h3>
+                      <div className="text-xs">
+                        <table className="w-full border-collapse">
+                          <tbody>
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">접수번호</td>
+                              <td className={cn("border border-muted px-2 py-1.5 font-semibold", selectedTask.sourceType === "dr" ? "text-primary" : "text-secondary-foreground")}>
+                                {selectedTask.id}
+                              </td>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">구분</td>
+                              <td className="border border-muted px-2 py-1.5">
+                                <Badge variant="outline" className={cn("text-[10px] font-bold", getSourceBadge(selectedTask.sourceType))}>
+                                  {selectedTask.sourceType === "dr" ? "설계의뢰(DR)" : "설계변경(ECR)"}
+                                </Badge>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">상태</td>
+                              <td className="border border-muted px-2 py-1.5">
+                                <Badge variant="outline" className={cn("text-[10px]", getStatusVariant(selectedTask.status))}>
+                                  {selectedTask.status}
+                                </Badge>
+                              </td>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">우선순위</td>
+                              <td className="border border-muted px-2 py-1.5">
+                                <Badge variant="outline" className={cn("text-[10px]", getPriorityVariant(selectedTask.priority))}>
+                                  {selectedTask.priority}
+                                </Badge>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">
+                                {selectedTask.sourceType === "dr" ? "설비/품목명" : "품목명"}
+                              </td>
+                              <td colSpan={3} className="border border-muted px-2 py-1.5 font-medium">{selectedTask.targetName}</td>
+                            </tr>
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">의뢰부서</td>
+                              <td className="border border-muted px-2 py-1.5">{selectedTask.reqDept}</td>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">의뢰자</td>
+                              <td className="border border-muted px-2 py-1.5">{selectedTask.requester}</td>
+                            </tr>
+                            {selectedTask.sourceType === "dr" ? (
+                              <>
+                                <tr>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">설계유형</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.designType || "-"}</td>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">고객명</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.customer || "-"}</td>
+                                </tr>
+                                <tr>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">수주번호</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.orderNo || "-"}</td>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">설계담당</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.designer || <span className="text-muted-foreground">미배정</span>}</td>
+                                </tr>
+                              </>
+                            ) : (
+                              <>
+                                <tr>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">변경유형</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.changeType || "-"}</td>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">도면번호</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.drawingNo || "-"}</td>
+                                </tr>
+                                <tr>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">설계담당</td>
+                                  <td className="border border-muted px-2 py-1.5">{selectedTask.designer || <span className="text-muted-foreground">미배정</span>}</td>
+                                  <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">영향범위</td>
+                                  <td className="border border-muted px-2 py-1.5">
+                                    {selectedTask.impact ? (
+                                      <div className="flex flex-wrap gap-1">
+                                        {selectedTask.impact.map((i) => (
+                                          <Badge key={i} variant="outline" className="bg-primary/5 text-[10px] text-primary">{i}</Badge>
+                                        ))}
+                                      </div>
+                                    ) : "-"}
+                                  </td>
+                                </tr>
+                              </>
+                            )}
+                            <tr>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">접수일자</td>
+                              <td className="border border-muted px-2 py-1.5">{selectedTask.date}</td>
+                              <td className="whitespace-nowrap border border-muted bg-muted/70 px-2 py-1.5 font-semibold text-muted-foreground">희망납기</td>
+                              <td className="border border-muted px-2 py-1.5">
+                                {selectedTask.dueDate}{" "}
+                                <span className={cn("text-[10px]", getDueDateInfo(selectedTask.dueDate).color)}>
+                                  ({getDueDateInfo(selectedTask.dueDate).text})
+                                </span>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+
+                    {/* 요구사양 / 변경사유 */}
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">
+                        {selectedTask.sourceType === "dr" ? "요구사양" : "변경 사유"}
+                      </h3>
+                      <pre className="whitespace-pre-wrap font-sans text-xs leading-relaxed text-foreground">
+                        {selectedTask.sourceType === "dr" ? selectedTask.spec : selectedTask.reason}
+                      </pre>
+                    </div>
+
+                    {/* 검토 메모 */}
+                    <div className="rounded-lg border border-primary/20 bg-primary/5 p-3.5">
+                      <h3 className="mb-2 text-sm font-semibold text-foreground">검토 의견 / 메모</h3>
+                      <Textarea
+                        value={reviewMemoText}
+                        onChange={(e) => setReviewMemoText(e.target.value)}
+                        placeholder="검토 의견을 기록해주세요..."
+                        className="min-h-[60px] text-xs"
+                      />
+                      <div className="mt-2 text-right">
+                        <Button size="sm" onClick={handleSaveReviewMemo}>
+                          메모 저장
+                        </Button>
+                      </div>
+                    </div>
+
+                    {/* 처리 이력 */}
+                    <div className="rounded-lg bg-muted/30 border border-border/60 p-3.5">
+                      <h3 className="mb-3 border-b border-border pb-2 text-sm font-semibold text-foreground">처리 이력</h3>
+                      <div className="relative pl-6">
+                        <div className="absolute bottom-0 left-[7px] top-0 w-0.5 bg-border" />
+                        {selectedTask.history.map((h, idx) => {
+                          const isLast = idx === selectedTask.history.length - 1;
+                          let dotColor = "bg-primary ring-primary";
+                          if (isLast) {
+                            if (h.step === "반려") dotColor = "bg-destructive ring-destructive";
+                            else if (h.step !== "프로젝트") dotColor = "bg-primary ring-primary animate-pulse";
+                          }
+                          return (
+                            <div key={idx} className={cn("relative pb-5", isLast && "pb-0")}>
+                              <div className={cn("absolute -left-[17px] top-1 h-3 w-3 rounded-full border-2 border-white ring-2", dotColor)} />
+                              <div className="pl-1">
+                                <div className="text-xs font-semibold text-foreground">
+                                  {getStepIcon(h.step)}
+                                  {h.step}
+                                </div>
+                                <div className="text-[11px] text-muted-foreground">{h.desc}</div>
+                                <div className="text-[10px] text-muted-foreground/70">{h.date} · {h.user}</div>
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 설계 담당자 선택 모달 */}
+      <Dialog open={designerModalOpen} onOpenChange={setDesignerModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>설계 담당자 배정</DialogTitle>
+            <DialogDescription>검토를 진행할 설계 담당자를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                설계 담당자 <span className="text-destructive">*</span>
+              </span>
+              <Popover open={designerComboOpen} onOpenChange={setDesignerComboOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={designerComboOpen}
+                    className="mt-1 h-9 w-full justify-between text-sm"
+                  >
+                    {designerModalValue
+                      ? (() => {
+                          const emp = employees.find((e) => e.userId === designerModalValue);
+                          return emp ? `${emp.userName} (${emp.deptName || "부서 미지정"})` : designerModalValue;
+                        })()
+                      : "사원 선택"}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                  <Command>
+                    <CommandInput placeholder="이름, 부서로 검색..." />
+                    <CommandList>
+                      <CommandEmpty className="py-3 text-center text-sm">사원을 찾을 수 없어요.</CommandEmpty>
+                      <CommandGroup>
+                        {employees.map((emp) => (
+                          <CommandItem
+                            key={emp.userId}
+                            value={`${emp.userName} ${emp.deptName} ${emp.userId}`}
+                            onSelect={() => {
+                              setDesignerModalValue(emp.userId);
+                              setDesignerComboOpen(false);
+                            }}
+                          >
+                            <Check className={cn("mr-2 h-4 w-4", designerModalValue === emp.userId ? "opacity-100" : "opacity-0")} />
+                            <UserCircle className="mr-2 h-4 w-4 text-muted-foreground" />
+                            <div className="flex flex-col">
+                              <span className="font-medium">{emp.userName}</span>
+                              <span className="text-[10px] text-muted-foreground">{emp.deptName || "부서 미지정"}</span>
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDesignerModalOpen(false)}>취소</Button>
+            <Button onClick={handleConfirmDesigner}>검토 착수</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 반려 사유 모달 */}
+      <Dialog open={rejectModalOpen} onOpenChange={setRejectModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>반려 처리</DialogTitle>
+            <DialogDescription>반려 사유를 상세히 기술해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                반려 사유 <span className="text-destructive">*</span>
+              </span>
+              <Textarea
+                value={rejectReason}
+                onChange={(e) => setRejectReason(e.target.value)}
+                placeholder="반려 사유를 상세히 기술해주세요"
+                className="mt-1 min-h-[120px] text-sm"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRejectModalOpen(false)}>취소</Button>
+            <Button variant="destructive" onClick={handleConfirmReject}>반려 확인</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 프로젝트 생성 모달 */}
+      <Dialog open={projectModalOpen} onOpenChange={setProjectModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>설계 프로젝트 생성</DialogTitle>
+            <DialogDescription>프로젝트 기본 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+        <div className="space-y-4">
+          <div className="rounded-lg bg-muted/50 p-4">
+            <h4 className="mb-3 border-b border-border pb-2 text-sm font-semibold">프로젝트 기본 정보</h4>
+            <div className="space-y-3">
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 번호</span>
+                <Input value={projectForm.projNo} readOnly className="mt-1 h-9 bg-muted text-sm" />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                  프로젝트명 <span className="text-destructive">*</span>
+                </span>
+                <Input
+                  value={projectForm.projName}
+                  onChange={(e) => setProjectForm((p) => ({ ...p, projName: e.target.value }))}
+                  placeholder="프로젝트명 입력"
+                  className="mt-1 h-9 text-sm"
+                />
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">원 접수번호</span>
+                <Input value={projectForm.projSourceNo} readOnly className="mt-1 h-9 bg-muted text-sm" />
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    시작일 <span className="text-destructive">*</span>
+                  </span>
+                  <Input
+                    type="date"
+                    value={projectForm.projStartDate}
+                    onChange={(e) => setProjectForm((p) => ({ ...p, projStartDate: e.target.value }))}
+                    className="mt-1 h-9 text-sm"
+                  />
+                </div>
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    종료예정일 <span className="text-destructive">*</span>
+                  </span>
+                  <Input
+                    type="date"
+                    value={projectForm.projEndDate}
+                    onChange={(e) => setProjectForm((p) => ({ ...p, projEndDate: e.target.value }))}
+                    className="mt-1 h-9 text-sm"
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    PM <span className="text-destructive">*</span>
+                  </span>
+                  <Popover open={pmComboOpen} onOpenChange={setPmComboOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={pmComboOpen}
+                        className="mt-1 h-9 w-full justify-between text-sm"
+                      >
+                        {projectForm.projPM
+                          ? employees.find((e) => e.userId === projectForm.projPM)?.userName || projectForm.projPM
+                          : "PM 선택"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                      <Command>
+                        <CommandInput placeholder="사원 검색..." />
+                        <CommandList>
+                          <CommandEmpty className="py-3 text-center text-sm">사원을 찾을 수 없어요.</CommandEmpty>
+                          <CommandGroup>
+                            {employees.map((emp) => (
+                              <CommandItem
+                                key={emp.userId}
+                                value={`${emp.userName} ${emp.deptName} ${emp.userId}`}
+                                onSelect={() => {
+                                  setProjectForm((p) => ({ ...p, projPM: emp.userId }));
+                                  setPmComboOpen(false);
+                                }}
+                              >
+                                <Check className={cn("mr-2 h-4 w-4", projectForm.projPM === emp.userId ? "opacity-100" : "opacity-0")} />
+                                <div className="flex flex-col">
+                                  <span className="font-medium">{emp.userName}</span>
+                                  <span className="text-[10px] text-muted-foreground">{emp.deptName || "부서 미지정"}</span>
+                                </div>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                <div>
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">고객명</span>
+                  <Input value={projectForm.projCustomer} readOnly className="mt-1 h-9 bg-muted text-sm" />
+                </div>
+              </div>
+              <div>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">프로젝트 설명</span>
+                <Textarea
+                  value={projectForm.projDesc}
+                  onChange={(e) => setProjectForm((p) => ({ ...p, projDesc: e.target.value }))}
+                  placeholder="프로젝트 개요 및 목표를 기술해주세요"
+                  className="mt-1 min-h-[80px] text-sm"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setProjectModalOpen(false)}>취소</Button>
+            <Button onClick={handleCreateProject}>프로젝트 생성</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/equipment/info/page.tsx b/frontend/app/(main)/COMPANY_9/equipment/info/page.tsx
new file mode 100644
index 00000000..cd53e9b1
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/equipment/info/page.tsx
@@ -0,0 +1,950 @@
+"use client";
+
+/**
+ * 설비정보 — 하드코딩 페이지
+ *
+ * 좌측: 설비 목록 (equipment_mng)
+ * 우측: 탭 (기본정보 / 점검항목 / 소모품)
+ * 점검항목 복사 기능 포함
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Inbox, ClipboardCheck, Package, Copy, Info, Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { ImageUpload } from "@/components/common/ImageUpload";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const EQUIP_TABLE = "equipment_mng";
+const INSPECTION_TABLE = "equipment_inspection_item";
+const CONSUMABLE_TABLE = "equipment_consumable";
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "equipment_code", label: "설비코드" },
+  { key: "equipment_name", label: "설비명" },
+  { key: "equipment_type", label: "설비유형" },
+  { key: "manufacturer", label: "제조사" },
+  { key: "installation_location", label: "설치장소" },
+  { key: "operation_status", label: "가동상태" },
+];
+export default function EquipmentInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 좌측
+  const [equipments, setEquipments] = useState<any[]>([]);
+  const [equipLoading, setEquipLoading] = useState(false);
+  const [equipCount, setEquipCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [selectedEquipId, setSelectedEquipId] = useState<string | null>(null);
+
+  // 우측 탭
+  const [rightTab, setRightTab] = useState<"info" | "inspection" | "consumable">("info");
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspectionLoading, setInspectionLoading] = useState(false);
+  const [consumables, setConsumables] = useState<any[]>([]);
+  const [consumableLoading, setConsumableLoading] = useState(false);
+
+  // 카테고리
+  const [catOptions, setCatOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 설비 등록/수정 모달
+  const [equipModalOpen, setEquipModalOpen] = useState(false);
+  const [equipEditMode, setEquipEditMode] = useState(false);
+  const [equipForm, setEquipForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 기본정보 탭 편집 폼
+  const [infoForm, setInfoForm] = useState<Record<string, any>>({});
+  const [infoSaving, setInfoSaving] = useState(false);
+
+  // 점검항목 추가/수정 모달
+  const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
+  const [inspectionForm, setInspectionForm] = useState<Record<string, any>>({});
+  const [inspectionContinuous, setInspectionContinuous] = useState(false);
+  const [inspectionEditMode, setInspectionEditMode] = useState(false);
+
+  // 소모품 추가/수정 모달
+  const [consumableModalOpen, setConsumableModalOpen] = useState(false);
+  const [consumableForm, setConsumableForm] = useState<Record<string, any>>({});
+  const [consumableContinuous, setConsumableContinuous] = useState(false);
+  const [consumableEditMode, setConsumableEditMode] = useState(false);
+  const [consumableItemOptions, setConsumableItemOptions] = useState<any[]>([]);
+
+  // 점검항목 복사
+  const [copyModalOpen, setCopyModalOpen] = useState(false);
+  const [copySourceEquip, setCopySourceEquip] = useState("");
+  const [copyItems, setCopyItems] = useState<any[]>([]);
+  const [copyChecked, setCopyChecked] = useState<Set<string>>(new Set());
+  const [copyLoading, setCopyLoading] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-equipment-info", EQUIP_TABLE, GRID_COLUMNS_CONFIG);
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["equipment_type", "operation_status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${EQUIP_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      for (const col of ["inspection_cycle", "inspection_method"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${INSPECTION_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCatOptions(optMap);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return catOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      equipment_code: { width: "w-[110px]" },
+      equipment_name: { minWidth: "min-w-[130px]", truncate: true, render: (v) => v || "-" },
+      equipment_type: { width: "w-[90px]", render: (v) => v || "-" },
+      manufacturer: { width: "w-[100px]", render: (v) => v || "-" },
+      installation_location: { width: "w-[100px]", render: (v) => v || "-" },
+      operation_status: { width: "w-[80px]", render: (v) => v || "-" },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 설비 조회
+  const fetchEquipments = useCallback(async () => {
+    setEquipLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${EQUIP_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setEquipments(raw.map((r: any) => ({
+        ...r,
+        equipment_type: resolve("equipment_type", r.equipment_type),
+        operation_status: resolve("operation_status", r.operation_status),
+      })));
+      setEquipCount(res.data?.data?.total || raw.length);
+    } catch { toast.error("설비 목록 조회 실패"); } finally { setEquipLoading(false); }
+  }, [searchFilters, catOptions]);
+
+  useEffect(() => { fetchEquipments(); }, [fetchEquipments]);
+
+  const selectedEquip = equipments.find((e) => e.id === selectedEquipId);
+
+  // 기본정보 탭 폼 초기화 (설비 선택 변경 시)
+  useEffect(() => {
+    if (selectedEquip) setInfoForm({ ...selectedEquip });
+    else setInfoForm({});
+  }, [selectedEquipId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 기본정보 저장
+  const handleInfoSave = async () => {
+    if (!infoForm.id) return;
+    setInfoSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, ...fields } = infoForm;
+      await apiClient.put(`/table-management/tables/${EQUIP_TABLE}/edit`, { originalData: { id }, updatedData: fields });
+      toast.success("저장되었습니다.");
+      fetchEquipments();
+    } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); }
+    finally { setInfoSaving(false); }
+  };
+
+  // 우측: 점검항목 조회
+  useEffect(() => {
+    if (!selectedEquip?.equipment_code) { setInspections([]); return; }
+    const fetchData = async () => {
+      setInspectionLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "equipment_code", operator: "equals", value: selectedEquip.equipment_code }] },
+          autoFilter: true,
+        });
+        setInspections(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setInspections([]); } finally { setInspectionLoading(false); }
+    };
+    fetchData();
+  }, [selectedEquip?.equipment_code]);
+
+  // 우측: 소모품 조회
+  useEffect(() => {
+    if (!selectedEquip?.equipment_code) { setConsumables([]); return; }
+    const fetchData = async () => {
+      setConsumableLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "equipment_code", operator: "equals", value: selectedEquip.equipment_code }] },
+          autoFilter: true,
+        });
+        setConsumables(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setConsumables([]); } finally { setConsumableLoading(false); }
+    };
+    fetchData();
+  }, [selectedEquip?.equipment_code]);
+
+  // 새로고침 헬퍼
+  const refreshRight = () => {
+    const eid = selectedEquipId;
+    setSelectedEquipId(null);
+    setTimeout(() => setSelectedEquipId(eid), 50);
+  };
+
+  // 설비 등록/수정
+  const openEquipRegister = () => { setEquipForm({}); setEquipEditMode(false); setEquipModalOpen(true); };
+  const openEquipEdit = () => { if (!selectedEquip) return; setEquipForm({ ...selectedEquip }); setEquipEditMode(true); setEquipModalOpen(true); };
+
+  const handleEquipSave = async () => {
+    if (!equipForm.equipment_name) { toast.error("설비명은 필수입니다."); return; }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, ...fields } = equipForm;
+      if (equipEditMode && id) {
+        await apiClient.put(`/table-management/tables/${EQUIP_TABLE}/edit`, { originalData: { id }, updatedData: fields });
+        toast.success("수정되었습니다.");
+      } else {
+        await apiClient.post(`/table-management/tables/${EQUIP_TABLE}/add`, { id: crypto.randomUUID(), ...fields });
+        toast.success("등록되었습니다.");
+      }
+      setEquipModalOpen(false); fetchEquipments();
+    } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
+  };
+
+  const handleEquipDelete = async () => {
+    if (!selectedEquipId) return;
+    const ok = await confirm("설비를 삭제하시겠습니까?", { description: "관련 점검항목, 소모품도 함께 삭제됩니다.", variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${EQUIP_TABLE}/delete`, { data: [{ id: selectedEquipId }] });
+      toast.success("삭제되었습니다."); setSelectedEquipId(null); fetchEquipments();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // 점검항목 추가
+  const handleInspectionSave = async () => {
+    if (!inspectionForm.inspection_item) { toast.error("점검항목명은 필수입니다."); return; }
+    if (!inspectionForm.inspection_cycle) { toast.error("점검주기는 필수입니다."); return; }
+    if (!inspectionForm.inspection_method) { toast.error("점검방법은 필수입니다."); return; }
+    const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+    const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+    if (isNumeric && !inspectionForm.unit) { toast.error("측정단위가 필수입니다."); return; }
+    // 기준값/오차범위 → 하한치/상한치 자동 계산
+    const saveData = { ...inspectionForm };
+    if (isNumeric && saveData.standard_value) {
+      const std = Number(saveData.standard_value) || 0;
+      const tol = Number(saveData.tolerance) || 0;
+      saveData.lower_limit = String(std - tol);
+      saveData.upper_limit = String(std + tol);
+    }
+    if (!isNumeric) {
+      saveData.unit = "";
+      saveData.standard_value = "";
+      saveData.tolerance = "";
+      saveData.lower_limit = "";
+      saveData.upper_limit = "";
+    }
+    setSaving(true);
+    try {
+      if (inspectionEditMode) {
+        await apiClient.put(`/table-management/tables/${INSPECTION_TABLE}/edit`, {
+          originalData: { id: saveData.id }, updatedData: { ...saveData, equipment_code: selectedEquip?.equipment_code },
+        });
+        toast.success("수정되었습니다.");
+        setInspectionModalOpen(false);
+      } else {
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          id: crypto.randomUUID(), ...saveData, equipment_code: selectedEquip?.equipment_code,
+        });
+        toast.success("추가되었습니다.");
+        if (inspectionContinuous) {
+          setInspectionForm({});
+        } else {
+          setInspectionModalOpen(false);
+        }
+      }
+      refreshRight();
+    } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
+  };
+
+  // 소모품 품목 로드
+  const loadConsumableItems = async () => {
+    try {
+      const flatten = (vals: any[]): any[] => {
+        const r: any[] = [];
+        for (const v of vals) { r.push(v); if (v.children?.length) r.push(...flatten(v.children)); }
+        return r;
+      };
+      const [typeRes, divRes] = await Promise.all([
+        apiClient.get(`/table-categories/item_info/type/values`),
+        apiClient.get(`/table-categories/item_info/division/values`),
+      ]);
+      const consumableType = flatten(typeRes.data?.data || []).find((t: any) => t.valueLabel === "소모품");
+      const consumableDiv = flatten(divRes.data?.data || []).find((t: any) => t.valueLabel === "소모품");
+      if (!consumableType && !consumableDiv) { setConsumableItemOptions([]); return; }
+      const filters: any[] = [];
+      if (consumableType) filters.push({ columnName: "type", operator: "equals", value: consumableType.valueCode });
+      if (consumableDiv) filters.push({ columnName: "division", operator: "equals", value: consumableDiv.valueCode });
+      const results = await Promise.all(filters.map((f) =>
+        apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [f] },
+          autoFilter: true,
+        })
+      ));
+      const allItems = new Map<string, any>();
+      for (const res of results) {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        for (const row of rows) allItems.set(row.id, row);
+      }
+      setConsumableItemOptions(Array.from(allItems.values()));
+    } catch { setConsumableItemOptions([]); }
+  };
+
+  const handleConsumableSave = async () => {
+    if (!consumableForm.consumable_name) { toast.error("소모품명은 필수입니다."); return; }
+    setSaving(true);
+    try {
+      if (consumableEditMode) {
+        await apiClient.put(`/table-management/tables/${CONSUMABLE_TABLE}/edit`, {
+          originalData: { id: consumableForm.id }, updatedData: { ...consumableForm, equipment_code: selectedEquip?.equipment_code },
+        });
+        toast.success("수정되었습니다.");
+        setConsumableModalOpen(false);
+      } else {
+        await apiClient.post(`/table-management/tables/${CONSUMABLE_TABLE}/add`, {
+          id: crypto.randomUUID(), ...consumableForm, equipment_code: selectedEquip?.equipment_code,
+        });
+        toast.success("추가되었습니다.");
+        if (consumableContinuous) {
+          setConsumableForm({});
+        } else {
+          setConsumableModalOpen(false);
+        }
+      }
+      refreshRight();
+    } catch (err: any) { toast.error(err.response?.data?.message || "저장 실패"); } finally { setSaving(false); }
+  };
+
+  // 점검항목 복사
+  const loadCopyItems = async (equipCode: string) => {
+    setCopySourceEquip(equipCode);
+    setCopyChecked(new Set());
+    if (!equipCode) { setCopyItems([]); return; }
+    setCopyLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "equipment_code", operator: "equals", value: equipCode }] },
+        autoFilter: true,
+      });
+      setCopyItems(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setCopyItems([]); } finally { setCopyLoading(false); }
+  };
+
+  const handleCopyApply = async () => {
+    const selected = copyItems.filter((i) => copyChecked.has(i.id));
+    if (selected.length === 0) { toast.error("복사할 항목을 선택해주세요."); return; }
+    setSaving(true);
+    try {
+      for (const item of selected) {
+        const { id, created_date, updated_date, writer, company_code, equipment_code, ...fields } = item;
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          ...fields, equipment_code: selectedEquip?.equipment_code,
+        });
+      }
+      toast.success(`${selected.length}개 점검항목이 복사되었습니다.`);
+      setCopyModalOpen(false); refreshRight();
+    } catch { toast.error("복사 실패"); } finally { setSaving(false); }
+  };
+
+  // 엑셀
+  const handleExcelDownload = async () => {
+    if (equipments.length === 0) return;
+    await exportToExcel(equipments.map((e) => ({
+      설비코드: e.equipment_code, 설비명: e.equipment_name, 설비유형: e.equipment_type,
+      제조사: e.manufacturer, 모델명: e.model_name, 설치장소: e.installation_location,
+      도입일자: e.introduction_date, 가동상태: e.operation_status,
+    })), "설비정보.xlsx", "설비");
+    toast.success("다운로드 완료");
+  };
+
+  // 셀렉트 렌더링 헬퍼
+  const catSelect = (key: string, value: string, onChange: (v: string) => void, placeholder: string) => (
+    <Select value={value || ""} onValueChange={onChange}>
+      <SelectTrigger className="h-9"><SelectValue placeholder={placeholder} /></SelectTrigger>
+      <SelectContent>
+        {(catOptions[key] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+      </SelectContent>
+    </Select>
+  );
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>설비관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">설비정보</span>
+      </div>
+
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={EQUIP_TABLE}
+        filterId="c16-equipment-info"
+        onFilterChange={setSearchFilters}
+        dataCount={equipCount}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex gap-1.5">
+            <Button variant="outline" size="sm" className="h-9" disabled={excelDetecting}
+              onClick={async () => {
+                setExcelDetecting(true);
+                try {
+                  const r = await autoDetectMultiTableConfig(EQUIP_TABLE);
+                  if (r.success && r.data) { setExcelChainConfig(r.data); setExcelUploadOpen(true); }
+                  else toast.error("테이블 구조 분석 실패");
+                } catch { toast.error("오류"); } finally { setExcelDetecting(false); }
+              }}>
+              {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />} 엑셀 업로드
+            </Button>
+            <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
+              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+            </Button>
+          </div>
+        }
+      />
+
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 설비 목록 */}
+          <ResizablePanel defaultSize={40} minSize={25}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">설비 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{equipCount}건</span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" onClick={openEquipRegister}><Plus className="w-3.5 h-3.5 mr-1" /> 등록</Button>
+                  <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={openEquipEdit}><Pencil className="w-3.5 h-3.5 mr-1" /> 수정</Button>
+                  <div className="h-4 w-px bg-border" />
+                  <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={handleEquipDelete} className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"><Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제</Button>
+                  <div className="h-4 w-px bg-border" />
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <EDataTable
+                columns={mainTableColumns}
+                data={ts.groupData(equipments)}
+                loading={equipLoading}
+                emptyMessage="등록된 설비가 없어요"
+                selectedId={selectedEquipId}
+                onSelect={(id) => setSelectedEquipId(id)}
+                onRowDoubleClick={() => openEquipEdit()}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-equipment-info-main"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 탭 */}
+          <ResizablePanel defaultSize={60} minSize={30}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between p-2 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-1">
+                  {([["info", "기본정보", Info], ["inspection", "점검항목", ClipboardCheck], ["consumable", "소모품", Package]] as const).map(([tab, label, Icon]) => (
+                    <button key={tab} onClick={() => setRightTab(tab)}
+                      className={cn("px-3 py-1.5 text-sm rounded-md transition-colors flex items-center gap-1",
+                        rightTab === tab ? "bg-primary text-primary-foreground font-medium" : "hover:bg-muted text-muted-foreground")}>
+                      <Icon className="w-3.5 h-3.5" />{label}
+                      {tab === "inspection" && inspections.length > 0 && <Badge variant="secondary" className="ml-1 text-[10px] px-1">{inspections.length}</Badge>}
+                      {tab === "consumable" && consumables.length > 0 && <Badge variant="secondary" className="ml-1 text-[10px] px-1">{consumables.length}</Badge>}
+                    </button>
+                  ))}
+                  {selectedEquip && <Badge variant="outline" className="font-normal ml-2 text-xs">{selectedEquip.equipment_name}</Badge>}
+                </div>
+                <div className="flex gap-1.5">
+                  {rightTab === "inspection" && (
+                    <>
+                      <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setInspectionForm({}); setInspectionEditMode(false); setInspectionModalOpen(true); }}>
+                        <Plus className="w-3.5 h-3.5 mr-1" /> 추가
+                      </Button>
+                      <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setCopySourceEquip(""); setCopyItems([]); setCopyChecked(new Set()); setCopyModalOpen(true); }}>
+                        <Copy className="w-3.5 h-3.5 mr-1" /> 복사
+                      </Button>
+                    </>
+                  )}
+                  {rightTab === "consumable" && (
+                    <Button variant="outline" size="sm" disabled={!selectedEquipId} onClick={() => { setConsumableForm({}); setConsumableEditMode(false); loadConsumableItems(); setConsumableModalOpen(true); }}>
+                      <Plus className="w-3.5 h-3.5 mr-1" /> 추가
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              {!selectedEquipId ? (
+                <div className="flex-1 flex flex-col items-center justify-center gap-3 m-3 border-2 border-dashed rounded-lg text-center">
+                  <Inbox className="w-12 h-12 text-muted-foreground/40" />
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">설비를 선택해주세요</p>
+                    <p className="text-xs text-muted-foreground mt-1">좌측에서 설비를 선택하면 상세 정보가 표시돼요</p>
+                  </div>
+                </div>
+              ) : rightTab === "info" ? (
+                <div className="p-4 overflow-auto">
+                  <div className="flex justify-end mb-3">
+                    <Button size="sm" onClick={handleInfoSave} disabled={infoSaving}>
+                      {infoSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+                    </Button>
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-1.5">
+                      <Label className="text-sm text-muted-foreground">설비코드</Label>
+                      <Input value={infoForm.equipment_code || ""} className="h-9 bg-muted/50" disabled />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">설비명</Label>
+                      <Input value={infoForm.equipment_name || ""} onChange={(e) => setInfoForm((p) => ({ ...p, equipment_name: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">설비유형</Label>
+                      {catSelect("equipment_type", infoForm.equipment_type, (v) => setInfoForm((p) => ({ ...p, equipment_type: v })), "설비유형")}
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">설치장소</Label>
+                      <Input value={infoForm.installation_location || ""} onChange={(e) => setInfoForm((p) => ({ ...p, installation_location: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">제조사</Label>
+                      <Input value={infoForm.manufacturer || ""} onChange={(e) => setInfoForm((p) => ({ ...p, manufacturer: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">모델명</Label>
+                      <Input value={infoForm.model_name || ""} onChange={(e) => setInfoForm((p) => ({ ...p, model_name: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">도입일자</Label>
+                      <Input type="date" value={infoForm.introduction_date || ""} onChange={(e) => setInfoForm((p) => ({ ...p, introduction_date: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-sm">가동상태</Label>
+                      {catSelect("operation_status", infoForm.operation_status, (v) => setInfoForm((p) => ({ ...p, operation_status: v })), "가동상태")}
+                    </div>
+                    <div className="space-y-1.5 col-span-2">
+                      <Label className="text-sm">비고</Label>
+                      <Input value={infoForm.remarks || ""} onChange={(e) => setInfoForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9" />
+                    </div>
+                    <div className="space-y-1.5 col-span-2">
+                      <Label className="text-sm">이미지</Label>
+                      <ImageUpload value={infoForm.image_path} onChange={(v) => setInfoForm((p) => ({ ...p, image_path: v }))}
+                        tableName={EQUIP_TABLE} recordId={infoForm.id} columnName="image_path" />
+                    </div>
+                  </div>
+                </div>
+              ) : rightTab === "inspection" ? (
+                <div className="flex-1 overflow-auto">
+                  {inspectionLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : inspections.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <ClipboardCheck className="w-8 h-8 mb-2 opacity-40" />
+                      <p className="text-sm">점검항목이 없어요</p>
+                    </div>
+                  ) : (
+                    <Table noWrapper>
+                      <thead className="sticky top-0 z-10 bg-card">
+                        <TableRow>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검항목</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">하한치</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한치</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검내용</TableHead>
+                        </TableRow>
+                      </thead>
+                      <TableBody>
+                        {inspections.map((item) => (
+                          <TableRow key={item.id} className="cursor-pointer hover:bg-primary/5" onDoubleClick={() => {
+                            const std = item.standard_value || "";
+                            const tol = item.tolerance || "";
+                            setInspectionForm({ ...item, standard_value: std, tolerance: tol });
+                            setInspectionEditMode(true);
+                            setInspectionModalOpen(true);
+                          }}>
+                            <TableCell className="text-sm">{item.inspection_item || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
+                            <TableCell className="text-[13px]">{resolve("inspection_method", item.inspection_method)}</TableCell>
+                            <TableCell className="text-[13px]">{item.lower_limit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.upper_limit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.inspection_content || "-"}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              ) : (
+                <div className="flex-1 overflow-auto">
+                  {consumableLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : consumables.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Package className="w-8 h-8 mb-2 opacity-40" />
+                      <p className="text-sm">소모품이 없어요</p>
+                    </div>
+                  ) : (
+                    <Table noWrapper>
+                      <thead className="sticky top-0 z-10 bg-card">
+                        <TableRow>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">소모품명</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">교체주기</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">제조사</TableHead>
+                        </TableRow>
+                      </thead>
+                      <TableBody>
+                        {consumables.map((item) => (
+                          <TableRow key={item.id} className="cursor-pointer hover:bg-primary/5" onDoubleClick={() => {
+                            setConsumableForm({ ...item });
+                            setConsumableEditMode(true);
+                            loadConsumableItems();
+                            setConsumableModalOpen(true);
+                          }}>
+                            <TableCell className="text-sm">{item.consumable_name || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.replacement_cycle || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.specification || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.manufacturer || "-"}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 설비 등록/수정 모달 */}
+      <Dialog open={equipModalOpen} onOpenChange={setEquipModalOpen}>
+        <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{equipEditMode ? "설비 수정" : "설비 등록"}</DialogTitle>
+            <DialogDescription>{equipEditMode ? "설비 정보를 수정합니다." : "새로운 설비를 등록합니다."}</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+            <div className="grid grid-cols-2 gap-4 py-4">
+              <div className="space-y-1.5"><Label className="text-sm">설비코드</Label>
+                <Input value={equipForm.equipment_code || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_code: e.target.value }))} placeholder="설비코드" className="h-9" disabled={equipEditMode} /></div>
+              <div className="space-y-1.5"><Label className="text-sm">설비명 <span className="text-destructive">*</span></Label>
+                <Input value={equipForm.equipment_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, equipment_name: e.target.value }))} placeholder="설비명" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">설비유형</Label>
+                {catSelect("equipment_type", equipForm.equipment_type, (v) => setEquipForm((p) => ({ ...p, equipment_type: v })), "설비유형")}</div>
+              <div className="space-y-1.5"><Label className="text-sm">가동상태</Label>
+                {catSelect("operation_status", equipForm.operation_status, (v) => setEquipForm((p) => ({ ...p, operation_status: v })), "가동상태")}</div>
+              <div className="space-y-1.5"><Label className="text-sm">설치장소</Label>
+                <Input value={equipForm.installation_location || ""} onChange={(e) => setEquipForm((p) => ({ ...p, installation_location: e.target.value }))} placeholder="설치장소" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">제조사</Label>
+                <Input value={equipForm.manufacturer || ""} onChange={(e) => setEquipForm((p) => ({ ...p, manufacturer: e.target.value }))} placeholder="제조사" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">모델명</Label>
+                <Input value={equipForm.model_name || ""} onChange={(e) => setEquipForm((p) => ({ ...p, model_name: e.target.value }))} placeholder="모델명" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">도입일자</Label>
+                <Input type="date" value={equipForm.introduction_date || ""} onChange={(e) => setEquipForm((p) => ({ ...p, introduction_date: e.target.value }))} className="h-9" /></div>
+              <div className="space-y-1.5 col-span-2"><Label className="text-sm">비고</Label>
+                <Input value={equipForm.remarks || ""} onChange={(e) => setEquipForm((p) => ({ ...p, remarks: e.target.value }))} placeholder="비고" className="h-9" /></div>
+              <div className="space-y-1.5 col-span-2"><Label className="text-sm">이미지</Label>
+                <ImageUpload value={equipForm.image_path} onChange={(v) => setEquipForm((p) => ({ ...p, image_path: v }))}
+                  tableName={EQUIP_TABLE} recordId={equipForm.id} columnName="image_path" /></div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEquipModalOpen(false)}>취소</Button>
+            <Button onClick={handleEquipSave} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 점검항목 추가 모달 */}
+      <Dialog open={inspectionModalOpen} onOpenChange={setInspectionModalOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader><DialogTitle>{inspectionEditMode ? "점검항목 수정" : "점검항목 추가"}</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 점검항목을 {inspectionEditMode ? "수정" : "추가"}합니다.</DialogDescription></DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1.5"><Label className="text-sm">점검항목명 <span className="text-destructive">*</span></Label>
+                <Input value={inspectionForm.inspection_item || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_item: e.target.value }))} placeholder="예: 온도점검, 진동점검" className="h-9" /></div>
+              <div className="space-y-1.5"><Label className="text-sm">점검주기 <span className="text-destructive">*</span></Label>
+                {catSelect("inspection_cycle", inspectionForm.inspection_cycle, (v) => setInspectionForm((p) => ({ ...p, inspection_cycle: v })), "점검주기")}</div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1.5"><Label className="text-sm">점검방법 <span className="text-destructive">*</span></Label>
+                {catSelect("inspection_method", inspectionForm.inspection_method, (v) => {
+                  const label = resolve("inspection_method", v);
+                  const isNum = ["숫자", "치수검사"].includes(label) || ["숫자", "치수검사"].includes(v);
+                  if (!isNum) {
+                    setInspectionForm((p) => ({ ...p, inspection_method: v, unit: "", standard_value: "", tolerance: "", lower_limit: "", upper_limit: "" }));
+                  } else {
+                    setInspectionForm((p) => ({ ...p, inspection_method: v }));
+                  }
+                }, "점검방법")}</div>
+              {(() => {
+                const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+                const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+                if (!isNumeric) return null;
+                return (
+                  <div className="space-y-1.5"><Label className="text-sm">측정 단위 <span className="text-destructive">*</span></Label>
+                    <Input value={inspectionForm.unit || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, unit: e.target.value }))} placeholder="예: ℃, mm, V" className="h-9" /></div>
+                );
+              })()}
+            </div>
+            {(() => {
+              const methodLabel = resolve("inspection_method", inspectionForm.inspection_method);
+              const isNumeric = ["숫자", "치수검사"].includes(methodLabel) || ["숫자", "치수검사"].includes(inspectionForm.inspection_method);
+              if (!isNumeric) return null;
+              return (
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5"><Label className="text-sm">기준값</Label>
+                    <Input value={inspectionForm.standard_value || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, standard_value: e.target.value }))} placeholder="기준값 입력" className="h-9" type="number" /></div>
+                  <div className="space-y-1.5"><Label className="text-sm">±오차범위</Label>
+                    <Input value={inspectionForm.tolerance || ""} onChange={(e) => setInspectionForm((p) => ({ ...p, tolerance: e.target.value }))} placeholder="허용 오차범위" className="h-9" type="number" /></div>
+                </div>
+              );
+            })()}
+            <div className="space-y-1.5"><Label className="text-sm">점검내용</Label>
+              <textarea
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={inspectionForm.inspection_content || ""}
+                onChange={(e) => setInspectionForm((p) => ({ ...p, inspection_content: e.target.value }))}
+                placeholder="점검 항목 및 내용 입력"
+              /></div>
+            <div className="space-y-1.5"><Label className="text-sm">체크리스트 (선택사항)</Label>
+              <textarea
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={inspectionForm.checklist || ""}
+                onChange={(e) => setInspectionForm((p) => ({ ...p, checklist: e.target.value }))}
+                placeholder="점검 체크리스트 입력 (줄바꿈으로 구분)"
+              /></div>
+          </div>
+          <DialogFooter className="flex items-center justify-between sm:justify-between">
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <Checkbox checked={inspectionContinuous} onCheckedChange={(c) => setInspectionContinuous(!!c)} />
+              저장 후 계속 입력
+            </label>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setInspectionModalOpen(false)}>취소</Button>
+              <Button onClick={handleInspectionSave} disabled={saving}><Save className="w-4 h-4 mr-1.5" /> 저장</Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 소모품 추가 모달 */}
+      <Dialog open={consumableModalOpen} onOpenChange={setConsumableModalOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader><DialogTitle>{consumableEditMode ? "소모품 수정" : "소모품 추가"}</DialogTitle><DialogDescription>{selectedEquip?.equipment_name}에 소모품을 {consumableEditMode ? "수정" : "추가"}합니다.</DialogDescription></DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            <div className="space-y-1.5 col-span-2"><Label className="text-sm">소모품명 <span className="text-destructive">*</span></Label>
+              {consumableItemOptions.length > 0 ? (
+                <Select value={consumableForm.consumable_name || ""} onValueChange={(v) => {
+                  const item = consumableItemOptions.find((i) => (i.item_name || i.item_number) === v);
+                  setConsumableForm((p) => ({
+                    ...p,
+                    consumable_name: v,
+                    specification: item?.size || p.specification || "",
+                    unit: item?.unit || p.unit || "",
+                    manufacturer: item?.manufacturer || p.manufacturer || "",
+                  }));
+                }}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="소모품 선택" /></SelectTrigger>
+                  <SelectContent>
+                    {consumableItemOptions.map((item) => (
+                      <SelectItem key={item.id} value={item.item_name || item.item_number}>
+                        {item.item_name}{item.size ? ` (${item.size})` : ""}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <div>
+                  <Input value={consumableForm.consumable_name || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, consumable_name: e.target.value }))}
+                    placeholder="소모품명 직접 입력" className="h-9" />
+                  <p className="text-xs text-muted-foreground mt-1">품목정보에 소모품 타입 품목을 등록하면 선택 가능합니다</p>
+                </div>
+              )}</div>
+            <div className="space-y-1.5"><Label className="text-sm">교체주기</Label>
+              <Input value={consumableForm.replacement_cycle || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, replacement_cycle: e.target.value }))} placeholder="교체주기" className="h-9" /></div>
+            <div className="space-y-1.5"><Label className="text-sm">단위</Label>
+              <Input value={consumableForm.unit || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, unit: e.target.value }))} placeholder="단위" className="h-9" /></div>
+            <div className="space-y-1.5"><Label className="text-sm">규격</Label>
+              <Input value={consumableForm.specification || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, specification: e.target.value }))} placeholder="규격" className="h-9" /></div>
+            <div className="space-y-1.5"><Label className="text-sm">제조사</Label>
+              <Input value={consumableForm.manufacturer || ""} onChange={(e) => setConsumableForm((p) => ({ ...p, manufacturer: e.target.value }))} placeholder="제조사" className="h-9" /></div>
+            <div className="space-y-1.5 col-span-2"><Label className="text-sm">이미지</Label>
+              <ImageUpload value={consumableForm.image_path} onChange={(v) => setConsumableForm((p) => ({ ...p, image_path: v }))}
+                tableName={CONSUMABLE_TABLE} columnName="image_path" /></div>
+          </div>
+          <DialogFooter className="flex items-center justify-between sm:justify-between">
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <Checkbox checked={consumableContinuous} onCheckedChange={(c) => setConsumableContinuous(!!c)} />
+              저장 후 계속 입력
+            </label>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setConsumableModalOpen(false)}>취소</Button>
+              <Button onClick={handleConsumableSave} disabled={saving}><Save className="w-4 h-4 mr-1.5" /> 저장</Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 점검항목 복사 모달 */}
+      <Dialog open={copyModalOpen} onOpenChange={setCopyModalOpen}>
+        <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden">
+          <DialogHeader><DialogTitle>점검항목 복사</DialogTitle>
+            <DialogDescription>다른 설비의 점검항목을 선택하여 {selectedEquip?.equipment_name}에 복사합니다.</DialogDescription></DialogHeader>
+          <div className="space-y-3 flex-1 overflow-y-auto">
+            <div className="space-y-1.5">
+              <Label className="text-sm">소스 설비 선택</Label>
+              <Select value={copySourceEquip} onValueChange={(v) => loadCopyItems(v)}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="복사할 설비 선택" /></SelectTrigger>
+                <SelectContent>
+                  {equipments.filter((e) => e.equipment_code !== selectedEquip?.equipment_code).map((e) => (
+                    <SelectItem key={e.equipment_code} value={e.equipment_code}>{e.equipment_name} ({e.equipment_code})</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="border rounded-lg overflow-auto max-h-[300px]">
+              {copyLoading ? (
+                <div className="flex items-center justify-center py-8"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
+              ) : copyItems.length === 0 ? (
+                <div className="text-center text-muted-foreground py-8 text-sm">{copySourceEquip ? "점검항목이 없어요" : "설비를 선택해주세요"}</div>
+              ) : (
+                <Table noWrapper>
+                  <thead className="sticky top-0 z-10 bg-card">
+                    <TableRow>
+                      <TableHead className="w-[40px] text-center">
+                        <input type="checkbox" checked={copyItems.length > 0 && copyChecked.size === copyItems.length}
+                          onChange={(e) => { if (e.target.checked) setCopyChecked(new Set(copyItems.map((i) => i.id))); else setCopyChecked(new Set()); }} />
+                      </TableHead>
+                      <TableHead>점검항목</TableHead><TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead><TableHead className="w-[70px]">하한</TableHead>
+                      <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한</TableHead><TableHead className="w-[60px]">단위</TableHead>
+                    </TableRow>
+                  </thead>
+                  <TableBody>
+                    {copyItems.map((item) => (
+                      <TableRow key={item.id} className={cn("cursor-pointer", copyChecked.has(item.id) && "bg-primary/5")}
+                        onClick={() => setCopyChecked((prev) => { const n = new Set(prev); if (n.has(item.id)) n.delete(item.id); else n.add(item.id); return n; })}>
+                        <TableCell className="text-center"><input type="checkbox" checked={copyChecked.has(item.id)} readOnly /></TableCell>
+                        <TableCell className="text-sm">{item.inspection_item}</TableCell>
+                        <TableCell className="text-[13px]">{resolve("inspection_cycle", item.inspection_cycle)}</TableCell>
+                        <TableCell className="text-[13px]">{resolve("inspection_method", item.inspection_method)}</TableCell>
+                        <TableCell className="text-[13px]">{item.lower_limit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{item.upper_limit || "-"}</TableCell>
+                        <TableCell className="text-[13px]">{item.unit || "-"}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              )}
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{copyChecked.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setCopyModalOpen(false)}>취소</Button>
+                <Button onClick={handleCopyApply} disabled={saving || copyChecked.size === 0}>
+                  {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Copy className="w-4 h-4 mr-1.5" />} 복사 적용
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal open={excelUploadOpen}
+          onOpenChange={(open) => { setExcelUploadOpen(open); if (!open) setExcelChainConfig(null); }}
+          config={excelChainConfig} onSuccess={() => { fetchEquipments(); refreshRight(); }} />
+      )}
+
+      {/* 테이블 설정 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/equipment/plc-settings/page.tsx b/frontend/app/(main)/COMPANY_9/equipment/plc-settings/page.tsx
new file mode 100644
index 00000000..4e94d293
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/equipment/plc-settings/page.tsx
@@ -0,0 +1,501 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, Pencil, Cpu, Settings2, Search, Inbox,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+
+/* ───── 테이블명 ───── */
+const DATATYPE_TABLE = "plc_data_type";
+
+const DATATYPE_COLUMNS = [
+  { key: "equipment_code", label: "설비코드" },
+  { key: "data_type", label: "데이터타입" },
+  { key: "unit", label: "단위" },
+  { key: "tag_address", label: "태그주소" },
+  { key: "collection_interval", label: "수집주기" },
+  { key: "lower_limit", label: "하한값" },
+  { key: "upper_limit", label: "상한값" },
+  { key: "is_active", label: "사용여부" },
+];
+const COLLECTION_TABLE = "plc_collection_config";
+const EQUIPMENT_TABLE = "equipment_mng";
+
+/* ───── Cron 한글 변환 ───── */
+const cronToKorean = (cron: string): string => {
+  if (!cron) return "";
+  const parts = cron.trim().split(/\s+/);
+  if (parts.length < 5) return cron;
+  const [min, hour] = parts;
+  if (min === "*" && hour === "*") return "매 분마다";
+  if (min !== "*" && hour === "*") return `매시 ${min}분마다`;
+  if (min === "0" && hour !== "*") return `매일 ${hour}시 정각`;
+  if (min === "*/5") return "5분마다";
+  if (min === "*/10") return "10분마다";
+  if (min === "*/30") return "30분마다";
+  return cron;
+};
+
+/* ───── 카테고리 flatten ───── */
+const flattenCategories = (vals: any[]): { code: string; label: string }[] => {
+  const result: { code: string; label: string }[] = [];
+  for (const v of vals) {
+    result.push({ code: v.valueCode, label: v.valueLabel });
+    if (v.children?.length) result.push(...flattenCategories(v.children));
+  }
+  return result;
+};
+
+export default function PlcSettingsPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-plc-settings", DATATYPE_TABLE, DATATYPE_COLUMNS);
+
+  const [activeTab, setActiveTab] = useState("datatype");
+
+  /* ───── PLC 데이터타입 ───── */
+  const [datatypes, setDatatypes] = useState<any[]>([]);
+  const [dtLoading, setDtLoading] = useState(false);
+  const [dtCount, setDtCount] = useState(0);
+  const [dtChecked, setDtChecked] = useState<string[]>([]);
+  const [dtModalOpen, setDtModalOpen] = useState(false);
+  const [dtEditMode, setDtEditMode] = useState(false);
+  const [dtForm, setDtForm] = useState<Record<string, any>>({});
+  const [dtSaving, setDtSaving] = useState(false);
+  const [dtKeyword, setDtKeyword] = useState("");
+
+  /* ───── 수집 설정 ───── */
+  const [configs, setConfigs] = useState<any[]>([]);
+  const [cfgLoading, setCfgLoading] = useState(false);
+  const [cfgCount, setCfgCount] = useState(0);
+  const [cfgChecked, setCfgChecked] = useState<string[]>([]);
+  const [cfgModalOpen, setCfgModalOpen] = useState(false);
+  const [cfgEditMode, setCfgEditMode] = useState(false);
+  const [cfgForm, setCfgForm] = useState<Record<string, any>>({});
+  const [cfgSaving, setCfgSaving] = useState(false);
+  const [cfgKeyword, setCfgKeyword] = useState("");
+
+  /* ───── FK + 카테고리 옵션 ───── */
+  const [equipOptions, setEquipOptions] = useState<{ code: string; label: string }[]>([]);
+  const [collectionTypeOptions, setCollectionTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const eqRes = await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/data`, { page: 1, size: 500, autoFilter: true });
+        const eqs = eqRes.data?.data?.data || eqRes.data?.data?.rows || [];
+        setEquipOptions(eqs.map((r: any) => ({ code: r.equipment_code, label: `${r.equipment_code} - ${r.equipment_name || ""}` })));
+      } catch { /* skip */ }
+      try {
+        const catRes = await apiClient.get(`/table-categories/${COLLECTION_TABLE}/collection_type/values`);
+        if (catRes.data?.data?.length > 0) {
+          setCollectionTypeOptions(flattenCategories(catRes.data.data));
+        }
+      } catch { /* skip */ }
+    };
+    load();
+  }, []);
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  const fetchDatatypes = useCallback(async (keyword?: string) => {
+    setDtLoading(true);
+    try {
+      const kw = keyword !== undefined ? keyword : dtKeyword;
+      const filters: any[] = [];
+      if (kw.trim()) filters.push({ columnName: "equipment_code", operator: "contains", value: kw.trim() });
+      const res = await apiClient.post(`/table-management/tables/${DATATYPE_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setDatatypes(rows);
+      setDtCount(rows.length);
+    } catch { toast.error("PLC 데이터타입 조회에 실패했어요"); }
+    finally { setDtLoading(false); }
+  }, [dtKeyword]);
+
+  const fetchConfigs = useCallback(async (keyword?: string) => {
+    setCfgLoading(true);
+    try {
+      const kw = keyword !== undefined ? keyword : cfgKeyword;
+      const filters: any[] = [];
+      if (kw.trim()) filters.push({ columnName: "config_name", operator: "contains", value: kw.trim() });
+      const res = await apiClient.post(`/table-management/tables/${COLLECTION_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setConfigs(rows);
+      setCfgCount(rows.length);
+    } catch { toast.error("수집 설정 조회에 실패했어요"); }
+    finally { setCfgLoading(false); }
+  }, [cfgKeyword]);
+
+  useEffect(() => { fetchDatatypes(); fetchConfigs(); }, []);
+
+  /* ═══════════════════ 데이터타입 CRUD ═══════════════════ */
+  const openDtCreate = () => { setDtForm({}); setDtEditMode(false); setDtModalOpen(true); };
+  const openDtEdit = (row: any) => { setDtForm({ ...row }); setDtEditMode(true); setDtModalOpen(true); };
+  const saveDt = async () => {
+    if (!dtForm.equipment_code) { toast.error("설비코드는 필수 입력이에요"); return; }
+    setDtSaving(true);
+    try {
+      if (dtEditMode) {
+        await apiClient.put(`/table-management/tables/${DATATYPE_TABLE}/edit`, {
+          originalData: { id: dtForm.id }, updatedData: dtForm,
+        });
+        toast.success("PLC 데이터타입을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${DATATYPE_TABLE}/add`, dtForm);
+        toast.success("PLC 데이터타입을 등록했어요");
+      }
+      setDtModalOpen(false);
+      fetchDatatypes();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setDtSaving(false); }
+  };
+  const deleteDt = async () => {
+    if (dtChecked.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("PLC 데이터타입 삭제", { description: `선택한 ${dtChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.` });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DATATYPE_TABLE}/delete`, {
+        data: dtChecked.map(id => ({ id })),
+      });
+      toast.success(`${dtChecked.length}건을 삭제했어요`);
+      setDtChecked([]);
+      fetchDatatypes();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ 수집 설정 CRUD ═══════════════════ */
+  const openCfgCreate = () => { setCfgForm({}); setCfgEditMode(false); setCfgModalOpen(true); };
+  const openCfgEdit = (row: any) => { setCfgForm({ ...row }); setCfgEditMode(true); setCfgModalOpen(true); };
+  const saveCfg = async () => {
+    if (!cfgForm.config_name) { toast.error("설정명은 필수 입력이에요"); return; }
+    setCfgSaving(true);
+    try {
+      if (cfgEditMode) {
+        await apiClient.put(`/table-management/tables/${COLLECTION_TABLE}/edit`, {
+          originalData: { id: cfgForm.id }, updatedData: cfgForm,
+        });
+        toast.success("수집 설정을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${COLLECTION_TABLE}/add`, cfgForm);
+        toast.success("수집 설정을 등록했어요");
+      }
+      setCfgModalOpen(false);
+      fetchConfigs();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setCfgSaving(false); }
+  };
+  const deleteCfg = async () => {
+    if (cfgChecked.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("수집 설정 삭제", { description: `선택한 ${cfgChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.` });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${COLLECTION_TABLE}/delete`, {
+        data: cfgChecked.map(id => ({ id })),
+      });
+      toast.success(`${cfgChecked.length}건을 삭제했어요`);
+      setCfgChecked([]);
+      fetchConfigs();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="rounded-lg border bg-card">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <div className="border-b px-3">
+            <TabsList className="bg-transparent h-auto p-0 gap-0">
+              <TabsTrigger
+                value="datatype"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-3 text-sm font-medium"
+              >
+                <Cpu className="w-4 h-4 mr-2" />
+                PLC 데이터타입
+                <Badge variant="secondary" className="ml-2 bg-primary/10 text-primary text-xs">{dtCount}</Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="collection"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-3 text-sm font-medium"
+              >
+                <Settings2 className="w-4 h-4 mr-2" />
+                수집 설정
+                <Badge variant="secondary" className="ml-2 bg-primary/10 text-primary text-xs">{cfgCount}</Badge>
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* ──── PLC 데이터타입 탭 ──── */}
+          <TabsContent value="datatype" className="p-3 mt-0">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    className="h-8 pl-8 w-56 text-sm"
+                    placeholder="설비코드 검색..."
+                    value={dtKeyword}
+                    onChange={(e) => setDtKeyword(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && fetchDatatypes(dtKeyword)}
+                  />
+                </div>
+                <Button size="sm" variant="outline" className="h-8" onClick={() => fetchDatatypes(dtKeyword)}>
+                  <Search className="w-3.5 h-3.5 mr-1" />검색
+                </Button>
+                <Button size="sm" variant="ghost" className="h-8" onClick={() => { setDtKeyword(""); fetchDatatypes(""); }}>
+                  초기화
+                </Button>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">{dtCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openDtCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = datatypes.find(r => dtChecked.includes(r.id));
+                  if (sel) openDtEdit(sel); else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={deleteDt}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <EDataTable
+                columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+                  key: col.key,
+                  label: col.label,
+                  align: col.key === "is_active" ? "center" : undefined,
+                  render: col.key === "is_active"
+                    ? (val: any) => <Badge variant={val ? "default" : "secondary"} className="text-xs">{val ? "사용" : "미사용"}</Badge>
+                    : undefined,
+                }))}
+                data={ts.groupData(datatypes)}
+                loading={dtLoading}
+                emptyMessage="등록된 PLC 데이터타입이 없어요"
+                showCheckbox
+                checkedIds={dtChecked}
+                onCheckedChange={setDtChecked}
+                onRowDoubleClick={(row) => openDtEdit(row)}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </TabsContent>
+
+          {/* ──── 수집 설정 탭 ──── */}
+          <TabsContent value="collection" className="p-3 mt-0">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    className="h-8 pl-8 w-56 text-sm"
+                    placeholder="설정명 검색..."
+                    value={cfgKeyword}
+                    onChange={(e) => setCfgKeyword(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && fetchConfigs(cfgKeyword)}
+                  />
+                </div>
+                <Button size="sm" variant="outline" className="h-8" onClick={() => fetchConfigs(cfgKeyword)}>
+                  <Search className="w-3.5 h-3.5 mr-1" />검색
+                </Button>
+                <Button size="sm" variant="ghost" className="h-8" onClick={() => { setCfgKeyword(""); fetchConfigs(""); }}>
+                  초기화
+                </Button>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">{cfgCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openCfgCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = configs.find(r => cfgChecked.includes(r.id));
+                  if (sel) openCfgEdit(sel); else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={deleteCfg}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+              </div>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <EDataTable
+                columns={[
+                  { key: "config_name", label: "설정명" },
+                  { key: "source_connection_id", label: "소스연결ID", width: "w-[110px]" },
+                  { key: "source_table", label: "소스테이블", width: "w-[120px]" },
+                  { key: "target_table", label: "대상테이블", width: "w-[120px]" },
+                  { key: "collection_type", label: "수집유형", width: "w-[90px]" },
+                  { key: "schedule_cron", label: "스케줄(Cron)", width: "w-[120px]", render: (val: any) => <span className="font-mono text-[13px]">{val}</span> },
+                  { key: "is_active", label: "사용여부", width: "w-[80px]", align: "center" as const, render: (val: any) => <Badge variant={val ? "default" : "secondary"} className="text-xs">{val ? "사용" : "미사용"}</Badge> },
+                ] as EDataTableColumn[]}
+                data={configs}
+                loading={cfgLoading}
+                emptyMessage="등록된 수집 설정이 없어요"
+                showCheckbox
+                checkedIds={cfgChecked}
+                onCheckedChange={setCfgChecked}
+                onRowDoubleClick={(row) => openCfgEdit(row)}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* ═══════════════════ PLC 데이터타입 모달 ═══════════════════ */}
+      <Dialog open={dtModalOpen} onOpenChange={setDtModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{dtEditMode ? "PLC 데이터타입 수정" : "PLC 데이터타입 등록"}</DialogTitle>
+            <DialogDescription>PLC 데이터타입 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">설비코드 <span className="text-destructive">*</span></Label>
+              <Select value={dtForm.equipment_code || ""} onValueChange={(v) => setDtForm(p => ({ ...p, equipment_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="설비를 선택해주세요" /></SelectTrigger>
+                <SelectContent>
+                  {equipOptions.map(o => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">데이터타입</Label>
+              <Input className="h-9" value={dtForm.data_type || ""} onChange={(e) => setDtForm(p => ({ ...p, data_type: e.target.value }))} placeholder="예: 온도, 압력" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">단위</Label>
+              <Input className="h-9" value={dtForm.unit || ""} onChange={(e) => setDtForm(p => ({ ...p, unit: e.target.value }))} placeholder="예: ℃, bar" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">태그주소</Label>
+              <Input className="h-9" value={dtForm.tag_address || ""} onChange={(e) => setDtForm(p => ({ ...p, tag_address: e.target.value }))} placeholder="예: D100" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">수집주기</Label>
+              <Input className="h-9" value={dtForm.collection_interval || ""} onChange={(e) => setDtForm(p => ({ ...p, collection_interval: e.target.value }))} placeholder="예: 1000ms" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">하한값</Label>
+              <Input className="h-9" type="number" value={dtForm.lower_limit ?? ""} onChange={(e) => setDtForm(p => ({ ...p, lower_limit: e.target.value }))} placeholder="하한값" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">상한값</Label>
+              <Input className="h-9" type="number" value={dtForm.upper_limit ?? ""} onChange={(e) => setDtForm(p => ({ ...p, upper_limit: e.target.value }))} placeholder="상한값" />
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <div className="flex items-center gap-2">
+                <Checkbox checked={dtForm.is_active ?? true} onCheckedChange={(v) => setDtForm(p => ({ ...p, is_active: !!v }))} />
+                <Label className="text-sm">사용</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDtModalOpen(false)}>취소</Button>
+            <Button onClick={saveDt} disabled={dtSaving}>
+              {dtSaving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 수집 설정 모달 ═══════════════════ */}
+      <Dialog open={cfgModalOpen} onOpenChange={setCfgModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{cfgEditMode ? "수집 설정 수정" : "수집 설정 등록"}</DialogTitle>
+            <DialogDescription>수집 설정 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">설정명 <span className="text-destructive">*</span></Label>
+              <Input className="h-9" value={cfgForm.config_name || ""} onChange={(e) => setCfgForm(p => ({ ...p, config_name: e.target.value }))} placeholder="설정명을 입력해주세요" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">소스연결ID</Label>
+              <Input className="h-9" value={cfgForm.source_connection_id || ""} onChange={(e) => setCfgForm(p => ({ ...p, source_connection_id: e.target.value }))} placeholder="소스연결ID" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">수집유형</Label>
+              {collectionTypeOptions.length > 0 ? (
+                <Select value={cfgForm.collection_type || ""} onValueChange={(v) => setCfgForm(p => ({ ...p, collection_type: v }))}>
+                  <SelectTrigger className="h-9"><SelectValue placeholder="선택해주세요" /></SelectTrigger>
+                  <SelectContent>
+                    {collectionTypeOptions.map(o => (
+                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <Input className="h-9" value={cfgForm.collection_type || ""} onChange={(e) => setCfgForm(p => ({ ...p, collection_type: e.target.value }))} placeholder="수집유형" />
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">소스테이블</Label>
+              <Input className="h-9" value={cfgForm.source_table || ""} onChange={(e) => setCfgForm(p => ({ ...p, source_table: e.target.value }))} placeholder="소스테이블명" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground">대상테이블</Label>
+              <Input className="h-9" value={cfgForm.target_table || ""} onChange={(e) => setCfgForm(p => ({ ...p, target_table: e.target.value }))} placeholder="대상테이블명" />
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs font-semibold text-muted-foreground">스케줄 (Cron)</Label>
+              <Input className="h-9 font-mono text-sm" value={cfgForm.schedule_cron || ""} onChange={(e) => setCfgForm(p => ({ ...p, schedule_cron: e.target.value }))} placeholder="예: */5 * * * * (5분마다)" />
+              {cfgForm.schedule_cron && (
+                <p className="text-xs text-muted-foreground mt-1">{cronToKorean(cfgForm.schedule_cron)}</p>
+              )}
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <div className="flex items-center gap-2">
+                <Checkbox checked={cfgForm.is_active ?? true} onCheckedChange={(v) => setCfgForm(p => ({ ...p, is_active: !!v }))} />
+                <Label className="text-sm">사용</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCfgModalOpen(false)}>취소</Button>
+            <Button onClick={saveCfg} disabled={cfgSaving}>
+              {cfgSaving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/logistics/info/page.tsx b/frontend/app/(main)/COMPANY_9/logistics/info/page.tsx
new file mode 100644
index 00000000..543dd3dd
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/logistics/info/page.tsx
@@ -0,0 +1,905 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import {
+  Truck,
+  DollarSign,
+  FileText,
+  MapPin,
+  Car,
+  Plus,
+  Trash2,
+  Download,
+  Pencil,
+  RefreshCw,
+  Inbox,
+  Loader2,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// ========== 타입 & 상수 ==========
+type TabKey = "carrier" | "cost" | "contract" | "route" | "vehicle";
+
+interface TabColumnDef {
+  key: string;
+  label: string;
+  width?: string;
+  align?: "left" | "center" | "right";
+  formatNumber?: boolean;
+}
+
+interface FormFieldDef {
+  key: string;
+  label: string;
+  type: "text" | "number" | "select" | "smartselect" | "date";
+  required?: boolean;
+  referenceKey?: "carrier" | "route";
+  categoryKey?: string;
+  options?: { value: string; label: string }[];
+  placeholder?: string;
+}
+
+interface TabConfig {
+  key: TabKey;
+  label: string;
+  icon: React.ReactNode;
+  tableName: string;
+  columns: TabColumnDef[];
+  formFields: FormFieldDef[];
+  defaultSortColumn: string;
+}
+
+const TAB_CONFIGS: TabConfig[] = [
+  {
+    key: "carrier",
+    label: "운송업체",
+    icon: <Truck className="h-3.5 w-3.5" />,
+    tableName: "carrier_mng",
+    defaultSortColumn: "carrier_code",
+    columns: [
+      { key: "carrier_code", label: "업체코드", width: "120px" },
+      { key: "carrier_name", label: "업체명", width: "160px" },
+      { key: "carrier_type", label: "업체유형", width: "100px" },
+      { key: "contact_person", label: "담당자", width: "100px" },
+      { key: "contact_phone", label: "연락처", width: "130px" },
+      { key: "email", label: "이메일", width: "180px" },
+      { key: "address", label: "주소", width: "220px" },
+      { key: "rating", label: "등급", width: "70px", align: "center" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "carrier_code", label: "업체코드", type: "text", required: true, placeholder: "업체코드를 입력해주세요" },
+      { key: "carrier_name", label: "업체명", type: "text", required: true, placeholder: "업체명을 입력해주세요" },
+      { key: "carrier_type", label: "업체유형", type: "select", required: true, categoryKey: "carrier_mng:carrier_type", placeholder: "업체유형을 선택해주세요" },
+      { key: "contact_person", label: "담당자", type: "text", placeholder: "담당자명" },
+      { key: "contact_phone", label: "연락처", type: "text", placeholder: "예: 02-1234-5678" },
+      { key: "email", label: "이메일", type: "text", placeholder: "email@example.com" },
+      { key: "address", label: "주소", type: "text", placeholder: "주소를 입력해주세요" },
+      { key: "rating", label: "등급", type: "select", categoryKey: "carrier_mng:rating", placeholder: "등급을 선택해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "cost",
+    label: "물류비",
+    icon: <DollarSign className="h-3.5 w-3.5" />,
+    tableName: "logistics_cost_mng",
+    defaultSortColumn: "carrier_code",
+    columns: [
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "route_code", label: "구간코드", width: "120px" },
+      { key: "base_fee", label: "기본요금", width: "110px", align: "right", formatNumber: true },
+      { key: "unit", label: "단위", width: "70px", align: "center" },
+      { key: "unit_fee", label: "단가", width: "110px", align: "right", formatNumber: true },
+      { key: "min_weight", label: "최소중량", width: "100px", align: "right", formatNumber: true },
+      { key: "max_weight", label: "최대중량", width: "100px", align: "right", formatNumber: true },
+      { key: "delivery_days", label: "배송일수", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "route_code", label: "배송구간", type: "smartselect", required: true, referenceKey: "route" },
+      { key: "base_fee", label: "기본요금", type: "number", placeholder: "0" },
+      { key: "unit", label: "단위", type: "text", placeholder: "kg, 건 등" },
+      { key: "unit_fee", label: "단가", type: "number", placeholder: "0" },
+      { key: "min_weight", label: "최소중량", type: "number", placeholder: "0" },
+      { key: "max_weight", label: "최대중량", type: "number", placeholder: "0" },
+      { key: "delivery_days", label: "배송일수", type: "number", placeholder: "0" },
+    ],
+  },
+  {
+    key: "contract",
+    label: "계약서",
+    icon: <FileText className="h-3.5 w-3.5" />,
+    tableName: "carrier_contract_mng",
+    defaultSortColumn: "contract_no",
+    columns: [
+      { key: "contract_no", label: "계약번호", width: "130px" },
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "contract_start_date", label: "시작일", width: "110px" },
+      { key: "contract_end_date", label: "종료일", width: "110px" },
+      { key: "contract_amount", label: "계약금액", width: "130px", align: "right", formatNumber: true },
+      { key: "contact_person", label: "담당자", width: "100px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "contract_no", label: "계약번호", type: "text", required: true, placeholder: "계약번호를 입력해주세요" },
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "contract_start_date", label: "시작일", type: "date", required: true },
+      { key: "contract_end_date", label: "종료일", type: "date", required: true },
+      { key: "contract_amount", label: "계약금액", type: "number", placeholder: "0" },
+      { key: "contact_person", label: "담당자", type: "text", placeholder: "담당자명을 입력해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_contract_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "route",
+    label: "배송구간",
+    icon: <MapPin className="h-3.5 w-3.5" />,
+    tableName: "delivery_route_mng",
+    defaultSortColumn: "route_code",
+    columns: [
+      { key: "route_code", label: "구간코드", width: "120px" },
+      { key: "route_name", label: "구간명", width: "160px" },
+      { key: "departure", label: "출발지", width: "120px" },
+      { key: "destination", label: "도착지", width: "120px" },
+      { key: "distance_km", label: "거리(km)", width: "100px", align: "right", formatNumber: true },
+      { key: "avg_time_hours", label: "평균시간(h)", width: "100px", align: "right" },
+      { key: "route_type", label: "구간유형", width: "100px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "route_code", label: "구간코드", type: "text", required: true, placeholder: "구간코드를 입력해주세요" },
+      { key: "departure", label: "출발지", type: "text", required: true, placeholder: "출발지" },
+      { key: "destination", label: "도착지", type: "text", required: true, placeholder: "도착지" },
+      { key: "distance_km", label: "거리(km)", type: "number", placeholder: "0" },
+      { key: "avg_time_hours", label: "평균시간(h)", type: "number", placeholder: "0" },
+      { key: "route_type", label: "구간유형", type: "select", categoryKey: "delivery_route_mng:route_type", placeholder: "유형을 선택해주세요" },
+      { key: "status", label: "상태", type: "select", categoryKey: "delivery_route_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+  {
+    key: "vehicle",
+    label: "차량",
+    icon: <Car className="h-3.5 w-3.5" />,
+    tableName: "carrier_vehicle_mng",
+    defaultSortColumn: "vehicle_code",
+    columns: [
+      { key: "vehicle_code", label: "차량코드", width: "120px" },
+      { key: "vehicle_number", label: "차량번호", width: "120px" },
+      { key: "vehicle_type", label: "차량유형", width: "100px" },
+      { key: "carrier_code", label: "운송업체", width: "120px" },
+      { key: "load_capacity_kg", label: "적재용량(kg)", width: "120px", align: "right", formatNumber: true },
+      { key: "driver_name", label: "운전자", width: "100px" },
+      { key: "last_maintenance_date", label: "최종정비일", width: "110px" },
+      { key: "status", label: "상태", width: "80px", align: "center" },
+    ],
+    formFields: [
+      { key: "vehicle_code", label: "차량코드", type: "text", required: true, placeholder: "차량코드를 입력해주세요" },
+      { key: "vehicle_number", label: "차량번호", type: "text", required: true, placeholder: "12가 3456" },
+      { key: "vehicle_type", label: "차량유형", type: "select", required: true, categoryKey: "carrier_vehicle_mng:vehicle_type", placeholder: "차량유형을 선택해주세요" },
+      { key: "carrier_code", label: "운송업체", type: "smartselect", required: true, referenceKey: "carrier" },
+      { key: "load_capacity_kg", label: "적재용량(kg)", type: "number", placeholder: "0" },
+      { key: "driver_name", label: "운전자", type: "text", placeholder: "운전자명" },
+      { key: "last_maintenance_date", label: "최종정비일", type: "date" },
+      { key: "status", label: "상태", type: "select", categoryKey: "carrier_vehicle_mng:status", placeholder: "상태를 선택해주세요" },
+    ],
+  },
+];
+
+// 카테고리 계층 평탄화
+function flattenCategories(items: any[]): { value: string; label: string }[] {
+  const result: { value: string; label: string }[] = [];
+  function walk(arr: any[]) {
+    for (const item of arr) {
+      if (item.value || item.name) {
+        result.push({
+          value: item.value || item.name,
+          label: item.label || item.name || item.value,
+        });
+      }
+      if (item.children?.length) walk(item.children);
+    }
+  }
+  walk(items);
+  return result;
+}
+
+// 채번 대상 필드 매핑: tableName → 코드 필드 key
+const NUMBERING_FIELD_MAP: Record<string, string> = {
+  carrier_mng: "carrier_code",
+  delivery_route_mng: "route_code",
+  carrier_vehicle_mng: "vehicle_code",
+};
+
+// ========== 메인 컴포넌트 ==========
+export default function LogisticsInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 탭 상태
+  const [activeTab, setActiveTab] = useState<TabKey>("carrier");
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 탭별 독립 상태
+  const [tabData, setTabData] = useState<Record<TabKey, any[]>>({
+    carrier: [], cost: [], contract: [], route: [], vehicle: [],
+  });
+  const [tabLoading, setTabLoading] = useState<Record<TabKey, boolean>>({
+    carrier: false, cost: false, contract: false, route: false, vehicle: false,
+  });
+  const [tabChecked, setTabChecked] = useState<Record<TabKey, string[]>>({
+    carrier: [], cost: [], contract: [], route: [], vehicle: [],
+  });
+
+  // FK 참조 데이터 (캐싱)
+  const [carrierOptions, setCarrierOptions] = useState<{ code: string; label: string }[]>([]);
+  const [routeOptions, setRouteOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 카테고리 옵션 캐시
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { value: string; label: string }[]>>({});
+  const loadedCategories = useRef(new Set<string>());
+
+  // 모달 상태
+  const [formOpen, setFormOpen] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [editId, setEditId] = useState<string | null>(null);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 테이블 설정 (탭별)
+  const tsCarrier = useTableSettings("c16-logistics-carrier", TAB_CONFIGS[0].tableName, TAB_CONFIGS[0].columns);
+  const tsCost = useTableSettings("c16-logistics-cost", TAB_CONFIGS[1].tableName, TAB_CONFIGS[1].columns);
+  const tsContract = useTableSettings("c16-logistics-contract", TAB_CONFIGS[2].tableName, TAB_CONFIGS[2].columns);
+  const tsRoute = useTableSettings("c16-logistics-route", TAB_CONFIGS[3].tableName, TAB_CONFIGS[3].columns);
+  const tsVehicle = useTableSettings("c16-logistics-vehicle", TAB_CONFIGS[4].tableName, TAB_CONFIGS[4].columns);
+  const tsMap: Record<TabKey, typeof tsCarrier> = { carrier: tsCarrier, cost: tsCost, contract: tsContract, route: tsRoute, vehicle: tsVehicle };
+  const activeTs = tsMap[activeTab];
+
+  const activeConfig = useMemo(
+    () => TAB_CONFIGS.find((c) => c.key === activeTab)!,
+    [activeTab]
+  );
+
+  // 컬럼 가시성 헬퍼
+  const getVisibleColumns = (tabKey: TabKey) => tsMap[tabKey].visibleColumns;
+
+  // 클라이언트 사이드 필터링
+  const filteredData = useMemo(() => {
+    const data = tabData[activeTab];
+    if (searchFilters.length === 0) return data;
+    return data.filter((row) =>
+      searchFilters.every((f) => {
+        if (!f.value) return true;
+        const kw = f.value.toLowerCase();
+        if (f.columnName) {
+          return String(row[f.columnName] ?? "").toLowerCase().includes(kw);
+        }
+        return Object.values(row).some((v) => String(v ?? "").toLowerCase().includes(kw));
+      })
+    );
+  }, [tabData, activeTab, searchFilters]);
+
+  // FK 참조 데이터 로드
+  const loadReferences = useCallback(async () => {
+    try {
+      const [carrierRes, routeRes] = await Promise.all([
+        apiClient.post("/table-management/tables/carrier_mng/data", {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "carrier_code", order: "asc" },
+        }),
+        apiClient.post("/table-management/tables/delivery_route_mng/data", {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "route_code", order: "asc" },
+        }),
+      ]);
+      const carriers = carrierRes.data?.data?.data || carrierRes.data?.data?.rows || [];
+      setCarrierOptions(
+        carriers.map((r: any) => ({
+          code: r.carrier_code || "",
+          label: `${r.carrier_code} - ${r.carrier_name || ""}`,
+        }))
+      );
+      const routes = routeRes.data?.data?.data || routeRes.data?.data?.rows || [];
+      setRouteOptions(
+        routes.map((r: any) => ({
+          code: r.route_code || "",
+          label: `${r.route_code} - ${r.route_name || ""}`,
+        }))
+      );
+    } catch {
+      // FK 참조 로드 실패 시 무시
+    }
+  }, []);
+
+  useEffect(() => {
+    loadReferences();
+  }, [loadReferences]);
+
+  // 카테고리 옵션 로드
+  const loadCategoryOptions = useCallback(async (tableColumn: string) => {
+    if (loadedCategories.current.has(tableColumn)) return;
+    loadedCategories.current.add(tableColumn);
+    const [tableName, columnName] = tableColumn.split(":");
+    try {
+      const res = await apiClient.get(`/table-categories/${tableName}/${columnName}/values`);
+      const data = res.data?.data || [];
+      setCategoryOptions((prev) => ({
+        ...prev,
+        [tableColumn]: data.length > 0 ? flattenCategories(data) : [],
+      }));
+    } catch {
+      setCategoryOptions((prev) => ({ ...prev, [tableColumn]: [] }));
+    }
+  }, []);
+
+  // 활성 탭의 카테고리 로드
+  useEffect(() => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    config.formFields.forEach((f) => {
+      if (f.categoryKey) loadCategoryOptions(f.categoryKey);
+    });
+  }, [activeTab, loadCategoryOptions]);
+
+  // 데이터 조회
+  const fetchTabData = useCallback(async (tab: TabKey) => {
+    const config = TAB_CONFIGS.find((c) => c.key === tab);
+    if (!config) return;
+    setTabLoading((prev) => ({ ...prev, [tab]: true }));
+    try {
+      const res = await apiClient.post(
+        `/table-management/tables/${config.tableName}/data`,
+        {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: config.defaultSortColumn, order: "asc" },
+        }
+      );
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setTabData((prev) => ({ ...prev, [tab]: rows }));
+    } catch {
+      toast.error("데이터를 불러오는 데 실패했어요.");
+      setTabData((prev) => ({ ...prev, [tab]: [] }));
+    } finally {
+      setTabLoading((prev) => ({ ...prev, [tab]: false }));
+    }
+  }, []);
+
+  // 초기 데이터 로드 (탭 전환 시)
+  useEffect(() => {
+    fetchTabData(activeTab);
+  }, [activeTab, fetchTabData]);
+
+  // 탭 변경
+  const handleTabChange = useCallback((tab: string) => {
+    setActiveTab(tab as TabKey);
+    setSearchFilters([]);
+  }, []);
+
+  // 등록 모달 열기
+  const handleOpenAdd = useCallback(async () => {
+    setEditMode(false);
+    setEditId(null);
+    setFormData({});
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setFormOpen(true);
+
+    // 현재 탭의 채번 규칙 조회
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    const codeField = NUMBERING_FIELD_MAP[config.tableName];
+    if (!codeField) return; // 채번 대상이 아닌 탭
+
+    try {
+      const ruleRes = await apiClient.get(
+        `/numbering-rules/by-column/${config.tableName}/${codeField}`
+      );
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시 — 사용자가 직접 입력
+    }
+  }, [activeTab]);
+
+  // 수정 모달 열기
+  const handleOpenEdit = useCallback((row: any) => {
+    setEditMode(true);
+    setEditId(row.id ? String(row.id) : null);
+    setFormData({ ...row });
+    setFormOpen(true);
+  }, []);
+
+  // 저장
+  const handleSave = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+
+    // 필수값 검증 (등록 모드에서 채번 대상 코드 필드는 자동 할당이므로 스킵)
+    const numberingCodeField = NUMBERING_FIELD_MAP[config.tableName];
+    for (const field of config.formFields) {
+      if (!editMode && numberingRuleId && field.key === numberingCodeField) continue;
+      if (field.required && !formData[field.key]?.toString().trim()) {
+        toast.error(`${field.label}은(는) 필수 입력이에요.`);
+        return;
+      }
+    }
+
+    try {
+      // 배송구간: 출발지→도착지 로 구간명 자동 생성
+      const saveData = { ...formData };
+      if (activeTab === "route" && saveData.departure && saveData.destination) {
+        saveData.route_name = `${saveData.departure}→${saveData.destination}`;
+      }
+
+      if (editMode && editId) {
+        await apiClient.put(`/table-management/tables/${config.tableName}/edit`, {
+          originalData: { id: editId },
+          updatedData: saveData,
+        });
+        toast.success("수정이 완료되었어요.");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        const codeField = NUMBERING_FIELD_MAP[config.tableName];
+        if (codeField && numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            saveData[codeField] = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+
+        await apiClient.post(
+          `/table-management/tables/${config.tableName}/add`,
+          { id: crypto.randomUUID(), ...saveData }
+        );
+        toast.success("등록이 완료되었어요.");
+      }
+      setFormOpen(false);
+      fetchTabData(activeTab);
+      // FK 참조 테이블 변경 시 캐시 갱신
+      if (activeTab === "carrier" || activeTab === "route") {
+        loadReferences();
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    }
+  }, [activeTab, editMode, editId, formData, fetchTabData, loadReferences, numberingRuleId]);
+
+  // 삭제
+  const handleDelete = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    const ids = tabChecked[activeTab];
+    if (ids.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요.");
+      return;
+    }
+    const ok = await confirm(`선택한 ${ids.length}건을 삭제할까요?`, {
+      description: "삭제된 데이터는 복구할 수 없어요.",
+      variant: "destructive",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(
+        `/table-management/tables/${config.tableName}/delete`,
+        { data: ids.map((id) => ({ id })) }
+      );
+      toast.success(`${ids.length}건이 삭제되었어요.`);
+      setTabChecked((prev) => ({ ...prev, [activeTab]: [] }));
+      fetchTabData(activeTab);
+      if (activeTab === "carrier" || activeTab === "route") {
+        loadReferences();
+      }
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  }, [activeTab, tabChecked, confirm, fetchTabData, loadReferences]);
+
+  // 엑셀 다운로드 (필터된 데이터 기준)
+  const handleExcelDownload = useCallback(async () => {
+    const config = TAB_CONFIGS.find((c) => c.key === activeTab);
+    if (!config) return;
+    if (filteredData.length === 0) {
+      toast.error("다운로드할 데이터가 없어요.");
+      return;
+    }
+    const exportData = filteredData.map((row) => {
+      const obj: Record<string, any> = {};
+      config.columns.forEach((col) => {
+        obj[col.label] = row[col.key] ?? "";
+      });
+      return obj;
+    });
+    await exportToExcel(exportData, `${config.label}.xlsx`, config.label);
+    toast.success("엑셀 다운로드가 완료되었어요.");
+  }, [activeTab, filteredData]);
+
+  // 폼 필드 변경
+  const updateFormField = useCallback((key: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [key]: value }));
+  }, []);
+
+  // 행 체크 토글
+  const toggleRowCheck = useCallback((tabKey: TabKey, rowId: string) => {
+    setTabChecked((prev) => {
+      const ids = prev[tabKey];
+      return {
+        ...prev,
+        [tabKey]: ids.includes(rowId) ? ids.filter((x) => x !== rowId) : [...ids, rowId],
+      };
+    });
+  }, []);
+
+  // 전체 체크 토글
+  const toggleAllCheck = useCallback((tabKey: TabKey, checked: boolean) => {
+    setTabChecked((prev) => ({
+      ...prev,
+      [tabKey]: checked ? tabData[tabKey].map((r: any) => String(r.id)) : [],
+    }));
+  }, [tabData]);
+
+  // 폼 필드 렌더
+  const renderFormField = useCallback(
+    (field: FormFieldDef) => {
+      const value = formData[field.key] ?? "";
+      // 현재 탭의 채번 대상 코드 필드인지 확인
+      const numberingCodeField = NUMBERING_FIELD_MAP[activeConfig.tableName];
+      const isNumberingTarget = !editMode && numberingRuleId && field.key === numberingCodeField;
+      // 수정 모드에서 코드/번호 필드는 읽기전용
+      const isCodeField =
+        editMode &&
+        field.type === "text" &&
+        (field.key.endsWith("_code") || field.key.endsWith("_no"));
+
+      switch (field.type) {
+        case "text":
+          // 등록 모드 + 채번 대상 필드: readOnly로 미리보기 코드 표시
+          if (isNumberingTarget) {
+            return (
+              <Input
+                value={previewCode || ""}
+                readOnly
+                placeholder="채번 조회 중..."
+                className="h-9 text-sm bg-muted text-muted-foreground"
+              />
+            );
+          }
+          return (
+            <Input
+              value={value}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              placeholder={field.placeholder}
+              readOnly={isCodeField}
+              className={cn(
+                "h-9 text-sm",
+                isCodeField && "bg-muted text-muted-foreground"
+              )}
+            />
+          );
+        case "number":
+          return (
+            <Input
+              type="number"
+              value={value}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              placeholder={field.placeholder}
+              className="h-9 text-sm"
+            />
+          );
+        case "select": {
+          const opts =
+            field.options ||
+            (field.categoryKey ? categoryOptions[field.categoryKey] : []) ||
+            [];
+          return (
+            <Select
+              value={String(value)}
+              onValueChange={(v) => updateFormField(field.key, v)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder={field.placeholder || "선택해주세요"} />
+              </SelectTrigger>
+              <SelectContent>
+                {opts.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          );
+        }
+        case "smartselect": {
+          // SmartSelect 대신 Select로 직접 구현
+          const opts =
+            field.referenceKey === "carrier" ? carrierOptions : routeOptions;
+          return (
+            <Select
+              value={String(value)}
+              onValueChange={(v) => updateFormField(field.key, v)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder={field.placeholder || "선택해주세요"} />
+              </SelectTrigger>
+              <SelectContent>
+                {opts.map((o) => (
+                  <SelectItem key={o.code} value={o.code}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          );
+        }
+        case "date":
+          return (
+            <Input
+              type="date"
+              value={value ? String(value).split("T")[0] : ""}
+              onChange={(e) => updateFormField(field.key, e.target.value)}
+              className="h-9 text-sm"
+            />
+          );
+        default:
+          return null;
+      }
+    },
+    [formData, editMode, carrierOptions, routeOptions, categoryOptions, updateFormField, activeConfig, numberingRuleId, previewCode]
+  );
+
+  // ========== 렌더링 ==========
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={activeConfig.tableName}
+        filterId="c16-logistics-info"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={activeTs.filterConfig}
+        dataCount={filteredData.length}
+      />
+
+      {/* 탭 + 콘텐츠 영역 */}
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border bg-card"
+      >
+        <TabsList className="h-auto w-full shrink-0 justify-start gap-0 rounded-none border-b bg-muted/30 p-0">
+          {TAB_CONFIGS.map((tab) => (
+            <TabsTrigger
+              key={tab.key}
+              value={tab.key}
+              className="flex items-center gap-1.5 rounded-none border-b-2 border-transparent px-4 py-2.5 text-sm font-medium text-muted-foreground data-[state=active]:border-primary data-[state=active]:font-semibold data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              {tab.icon}
+              {tab.label}
+              <Badge
+                variant="outline"
+                className="ml-1 h-5 min-w-[22px] justify-center px-1.5 font-mono text-[10px]"
+              >
+                {tabData[tab.key]?.length || 0}
+              </Badge>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {TAB_CONFIGS.map((tab) => {
+          const displayData = tab.key === activeTab ? filteredData : tabData[tab.key];
+          const isAllChecked =
+            tabData[tab.key].length > 0 &&
+            tabData[tab.key].every((r: any) => tabChecked[tab.key].includes(String(r.id)));
+
+          return (
+            <TabsContent
+              key={tab.key}
+              value={tab.key}
+              className="m-0 flex flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
+            >
+              {/* 액션 바 */}
+              <div className="flex shrink-0 items-center justify-between border-b px-3 py-2">
+                <div className="flex items-center gap-2">
+                  <h2 className="text-sm font-bold">{tab.label} 목록</h2>
+                  <Badge className="bg-primary/10 font-mono text-[11px] text-primary">
+                    {tab.key === activeTab ? displayData.length : tabData[tab.key]?.length || 0}건
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" className="h-8 text-xs" onClick={handleOpenAdd}>
+                    <Plus className="mr-1 h-3.5 w-3.5" />
+                    등록
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs"
+                    disabled={tabChecked[tab.key].length !== 1}
+                    onClick={() => {
+                      const row = tabData[tab.key].find(
+                        (r: any) => String(r.id) === tabChecked[tab.key][0]
+                      );
+                      if (row) handleOpenEdit(row);
+                    }}
+                  >
+                    <Pencil className="mr-1 h-3.5 w-3.5" />
+                    수정
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs text-destructive hover:bg-destructive/10"
+                    disabled={tabChecked[tab.key].length === 0}
+                    onClick={handleDelete}
+                  >
+                    <Trash2 className="mr-1 h-3.5 w-3.5" />
+                    삭제
+                  </Button>
+                  <div className="mx-1 h-5 w-px bg-border" />
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 text-xs"
+                    onClick={handleExcelDownload}
+                  >
+                    <Download className="mr-1 h-3.5 w-3.5" />
+                    엑셀
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => fetchTabData(tab.key)}
+                  >
+                    <RefreshCw
+                      className={cn(
+                        "h-3.5 w-3.5",
+                        tabLoading[tab.key] && "animate-spin"
+                      )}
+                    />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => activeTs.setOpen(true)}
+                  >
+                    <Settings2 className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 테이블 영역 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={getVisibleColumns(tab.key).map((col): EDataTableColumn => ({
+                    key: col.key,
+                    label: col.label,
+                    align: col.align,
+                    formatNumber: col.formatNumber,
+                    truncate: true,
+                  }))}
+                  data={tsMap[tab.key].groupData(displayData)}
+                  rowKey={(row: any) => String(row.id)}
+                  loading={tabLoading[tab.key]}
+                  emptyMessage={`등록된 ${tab.label} 정보가 없어요`}
+                  showCheckbox
+                  checkedIds={tabChecked[tab.key]}
+                  onCheckedChange={(ids) => setTabChecked((prev) => ({ ...prev, [tab.key]: ids }))}
+                  onRowDoubleClick={(row) => handleOpenEdit(row)}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
+              </div>
+            </TabsContent>
+          );
+        })}
+      </Tabs>
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={formOpen} onOpenChange={setFormOpen}>
+        <DialogContent className="flex max-h-[85vh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[680px]">
+          <DialogHeader className="shrink-0 border-b px-6 py-4">
+            <DialogTitle>
+              {activeConfig.label} {editMode ? "수정" : "등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {editMode
+                ? `${activeConfig.label} 정보를 수정해주세요.`
+                : `새 ${activeConfig.label} 정보를 입력해주세요.`}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto p-6">
+            <div className="grid grid-cols-2 gap-4">
+              {activeConfig.formFields.map((field) => (
+                <div key={field.key} className="flex flex-col gap-1.5">
+                  <Label className="text-xs font-semibold text-muted-foreground">
+                    {field.label}
+                    {field.required && (
+                      <span className="ml-0.5 text-destructive">*</span>
+                    )}
+                  </Label>
+                  {renderFormField(field)}
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="shrink-0 border-t">
+            <div className="flex items-center justify-end gap-2 px-6 py-3">
+              <Button variant="outline" onClick={() => setFormOpen(false)}>
+                취소
+              </Button>
+              <Button onClick={handleSave}>
+                {editMode ? "수정" : "등록"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={activeTs.open}
+        onOpenChange={activeTs.setOpen}
+        tableName={activeTs.tableName}
+        settingsId={activeTs.settingsId}
+        defaultVisibleKeys={activeTs.defaultVisibleKeys}
+        onSave={activeTs.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/logistics/inventory/page.tsx b/frontend/app/(main)/COMPANY_9/logistics/inventory/page.tsx
new file mode 100644
index 00000000..7d2a96c6
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/logistics/inventory/page.tsx
@@ -0,0 +1,738 @@
+"use client";
+
+/**
+ * 재고현황 — 하드코딩 페이지 (Type B 마스터-디테일)
+ *
+ * 좌측: 재고 목록 (inventory_stock, item_info JOIN)
+ * 우측: 선택 품목의 재고 이동 이력 (inventory_history)
+ *
+ * ★ 재고 직접 등록/삭제 불가 — 입출고를 통해서만 변동, 조정만 가능
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Package,
+  Loader2,
+  Download,
+  ClipboardEdit,
+  History,
+  AlertTriangle,
+  RefreshCw,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { toast } from "sonner";
+import { exportToExcel } from "@/lib/utils/excelExport";
+
+const STOCK_TABLE = "inventory_stock";
+
+const STOCK_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "warehouse_code", label: "창고" },
+  { key: "location_code", label: "위치" },
+  { key: "current_qty", label: "현재수량", align: "right" as const },
+  { key: "safety_qty", label: "안전재고", align: "right" as const },
+  { key: "unit", label: "단위" },
+  { key: "status", label: "상태" },
+];
+const HISTORY_TABLE = "inventory_history";
+
+const getStatusVariant = (
+  status: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "정상":
+      return "default";
+    case "부족":
+      return "destructive";
+    case "과잉":
+      return "secondary";
+    default:
+      return "outline";
+  }
+};
+
+const getHistoryTypeVariant = (
+  type: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (type) {
+    case "입고":
+      return "default";
+    case "출고":
+      return "secondary";
+    case "조정":
+      return "outline";
+    case "입고취소":
+    case "이동":
+      return "destructive";
+    default:
+      return "outline";
+  }
+};
+
+export default function InventoryStatusPage() {
+  const { user } = useAuth();
+  const ts = useTableSettings("c16-inventory", STOCK_TABLE, STOCK_COLUMNS);
+
+  // 좌측: 재고 목록
+  const [stockItems, setStockItems] = useState<any[]>([]);
+  const [stockLoading, setStockLoading] = useState(false);
+  const [selectedStockId, setSelectedStockId] = useState<string | null>(null);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 이동 이력
+  const [historyItems, setHistoryItems] = useState<any[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+
+  // 조정 모달
+  const [adjustModalOpen, setAdjustModalOpen] = useState(false);
+  const [adjustForm, setAdjustForm] = useState<{
+    adjust_type: string;
+    adjust_qty: string;
+    reason: string;
+  }>({ adjust_type: "증가", adjust_qty: "", reason: "" });
+  const [adjustSaving, setAdjustSaving] = useState(false);
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["status", "unit"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${STOCK_TABLE}/${col}/values`
+          );
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setCategoryOptions(optMap);
+    };
+    load();
+  }, []);
+
+  // 재고 목록 조회
+  const fetchStock = useCallback(async () => {
+    setStockLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const [stockRes, itemRes, whRes] = await Promise.all([
+        apiClient.post(`/table-management/tables/${STOCK_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+          autoFilter: true,
+          sort: { columnName: "item_code", order: "asc" },
+        }),
+        apiClient.post(`/table-management/tables/item_info/data`, { page: 1, size: 500, autoFilter: true }),
+        apiClient.post(`/table-management/tables/warehouse_info/data`, { page: 1, size: 500, autoFilter: true }),
+      ]);
+      const raw = stockRes.data?.data?.data || stockRes.data?.data?.rows || [];
+      const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+      const warehouses = whRes.data?.data?.data || whRes.data?.data?.rows || [];
+      const itemMap = new Map(items.map((i: any) => [i.item_number || i.item_code, { name: i.item_name || "", unit: i.unit || "" }]));
+      const whMap = new Map(warehouses.map((w: any) => [w.warehouse_code, w.warehouse_name || w.warehouse_code]));
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const itemInfo = itemMap.get(r.item_code) as any;
+        return {
+          ...r,
+          item_name: itemInfo?.name || "",
+          unit: itemInfo?.unit || resolve("unit", r.unit),
+          warehouse_name: whMap.get(r.warehouse_code) || r.warehouse_code || "",
+          status: resolve("status", r.status),
+          _isLow: r.safety_qty && Number(r.current_qty) < Number(r.safety_qty),
+        };
+      });
+      setStockItems(data);
+    } catch {
+      toast.error("재고 목록을 불러오지 못했어요");
+    } finally {
+      setStockLoading(false);
+    }
+  }, [categoryOptions, searchFilters]);
+
+  useEffect(() => {
+    fetchStock();
+  }, [fetchStock]);
+
+  // 선택된 재고
+  const selectedStock = stockItems.find((s) => s.id === selectedStockId);
+
+  // 이력 조회
+  const fetchHistory = useCallback(async () => {
+    if (!selectedStock?.item_code) {
+      setHistoryItems([]);
+      return;
+    }
+    setHistoryLoading(true);
+    try {
+      const historyFilters: any[] = [
+        {
+          columnName: "item_code",
+          operator: "equals",
+          value: selectedStock.item_code,
+        },
+      ];
+      if (selectedStock.warehouse_code) {
+        historyFilters.push({
+          columnName: "warehouse_code",
+          operator: "equals",
+          value: selectedStock.warehouse_code,
+        });
+      }
+      const res = await apiClient.post(
+        `/table-management/tables/${HISTORY_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: { enabled: true, filters: historyFilters },
+          autoFilter: true,
+          sort: { columnName: "transaction_date", order: "desc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setHistoryItems(raw);
+    } catch {
+      toast.error("재고 이력을 불러오지 못했어요");
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, [selectedStock?.item_code, selectedStock?.warehouse_code]);
+
+  useEffect(() => {
+    fetchHistory();
+  }, [fetchHistory]);
+
+  // 재고 조정 저장
+  const handleAdjustSave = async () => {
+    if (!selectedStock) return;
+    const qty = Number(adjustForm.adjust_qty);
+    if (!qty || qty <= 0) {
+      toast.error("조정 수량을 입력해주세요");
+      return;
+    }
+    if (!adjustForm.reason.trim()) {
+      toast.error("조정 사유를 입력해주세요");
+      return;
+    }
+    setAdjustSaving(true);
+    try {
+      const changeQty = adjustForm.adjust_type === "증가" ? qty : -qty;
+      const afterQty = Number(selectedStock.current_qty || 0) + changeQty;
+
+      await apiClient.post(
+        `/table-management/tables/${HISTORY_TABLE}/add`,
+        {
+          id: crypto.randomUUID(),
+          item_code: selectedStock.item_code,
+          warehouse_code: selectedStock.warehouse_code || "",
+          location_code: selectedStock.location_code || "",
+          transaction_type: "조정",
+          transaction_date: new Date().toISOString(),
+          quantity: String(changeQty),
+          balance_qty: String(afterQty),
+          remark: adjustForm.reason.trim(),
+        }
+      );
+
+      await apiClient.put(
+        `/table-management/tables/${STOCK_TABLE}/edit`,
+        {
+          originalData: { id: selectedStock.id },
+          updatedData: { current_qty: afterQty },
+        }
+      );
+
+      toast.success("재고가 조정되었어요");
+      setAdjustModalOpen(false);
+      setAdjustForm({ adjust_type: "증가", adjust_qty: "", reason: "" });
+      fetchStock();
+    } catch {
+      toast.error("재고 조정에 실패했어요");
+    } finally {
+      setAdjustSaving(false);
+    }
+  };
+
+  // EDataTable 컬럼 정의
+  const stockColumns: EDataTableColumn[] = ts.visibleColumns.map((col) => {
+    const base: EDataTableColumn = { key: col.key, label: col.label, align: col.align };
+    if (col.key === "current_qty") {
+      return {
+        ...base,
+        align: "right" as const,
+        render: (val: any, row: any) => (
+          <span className="font-mono">
+            <span className={cn(row._isLow && "text-destructive font-bold")}>
+              {Number(row.current_qty || 0).toLocaleString()}
+            </span>
+            {row._isLow && (
+              <AlertTriangle className="inline h-3 w-3 text-destructive ml-1" />
+            )}
+          </span>
+        ),
+      };
+    }
+    if (col.key === "safety_qty") {
+      return {
+        ...base,
+        align: "right" as const,
+        formatNumber: true,
+      };
+    }
+    if (col.key === "status") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getStatusVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    return base;
+  });
+
+  // 엑셀 내보내기
+  const handleExcelExport = () => {
+    if (stockItems.length === 0) {
+      toast.error("내보낼 데이터가 없어요");
+      return;
+    }
+    exportToExcel(
+      stockItems.map((r) => ({
+        품목코드: r.item_code,
+        품명: r.item_name,
+        창고: r.warehouse_name || r.warehouse_code,
+        위치: r.location_code,
+        현재수량: r.current_qty,
+        안전재고: r.safety_qty,
+        단위: r.unit,
+        상태: r.status,
+      })),
+      "재고현황"
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3">
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={STOCK_TABLE}
+        filterId="c16-inventory"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={stockItems.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1 text-xs"
+              onClick={handleExcelExport}
+            >
+              <Download className="h-3.5 w-3.5" />
+              엑셀
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 패널 */}
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="flex-1 rounded-lg border bg-card"
+      >
+        {/* 좌측: 재고 목록 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+              <div className="flex items-center gap-2">
+                <span className="text-[13px] font-bold">재고 목록</span>
+                <Badge variant="default" className="rounded-full text-[11px]">
+                  {stockItems.length}건
+                </Badge>
+              </div>
+            </div>
+
+            <EDataTable
+              columns={stockColumns}
+              data={ts.groupData(stockItems)}
+              rowKey={(row) => row.id}
+              loading={stockLoading}
+              emptyMessage="등록된 재고가 없어요"
+              selectedId={selectedStockId}
+              onSelect={(id) => setSelectedStockId(id)}
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+              columnOrderKey="c16-inventory"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 상세 이력 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex flex-col h-full">
+            {!selectedStock ? (
+              <div className="flex flex-col items-center justify-center flex-1 m-5 border-2 border-dashed rounded-lg border-border">
+                <Package className="h-12 w-12 text-muted-foreground/40 mb-4" />
+                <p className="text-sm font-semibold text-muted-foreground">
+                  품목을 선택해주세요
+                </p>
+                <p className="text-xs text-muted-foreground/70 mt-1">
+                  좌측에서 품목을 선택하면 재고 이력이 표시돼요
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                  <div className="flex items-center gap-2">
+                    <History className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-[13px] font-bold">
+                      {selectedStock.item_name || selectedStock.item_code}
+                    </span>
+                    <Badge
+                      variant="outline"
+                      className="rounded-full text-[11px] font-mono"
+                    >
+                      {selectedStock.item_code}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-1.5 text-xs">
+                      <span className="text-muted-foreground">현재:</span>
+                      <span
+                        className={cn(
+                          "font-bold font-mono",
+                          selectedStock._isLow
+                            ? "text-destructive"
+                            : "text-foreground"
+                        )}
+                      >
+                        {Number(selectedStock.current_qty || 0).toLocaleString()}
+                      </span>
+                      {selectedStock._isLow && (
+                        <AlertTriangle className="h-3.5 w-3.5 text-destructive" />
+                      )}
+                    </div>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={() => {
+                        setAdjustForm({
+                          adjust_type: "증가",
+                          adjust_qty: "",
+                          reason: "",
+                        });
+                        setAdjustModalOpen(true);
+                      }}
+                    >
+                      <ClipboardEdit className="h-3.5 w-3.5" />
+                      재고 조정
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 재고 요약 카드 */}
+                <div className="grid grid-cols-4 gap-2 px-4 py-3 border-b">
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">현재수량</span>
+                    <span className="text-sm font-bold font-mono">
+                      {Number(selectedStock.current_qty || 0).toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">안전재고</span>
+                    <span className="text-sm font-bold font-mono">
+                      {Number(selectedStock.safety_qty || 0).toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">창고</span>
+                    <span className="text-sm font-bold truncate max-w-full">
+                      {selectedStock.warehouse_name || "-"}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-center p-2 rounded-md bg-muted/50">
+                    <span className="text-[10px] text-muted-foreground">상태</span>
+                    <Badge
+                      variant={getStatusVariant(selectedStock.status)}
+                      className="text-[10px] mt-0.5"
+                    >
+                      {selectedStock.status || "-"}
+                    </Badge>
+                  </div>
+                </div>
+
+                {/* 이력 서브헤더 */}
+                <div className="flex items-center justify-between px-4 py-2 border-b">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-semibold text-muted-foreground">
+                      재고 이동 이력
+                    </span>
+                    <Badge variant="secondary" className="rounded-full text-[10px]">
+                      {historyItems.length}건
+                    </Badge>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={fetchHistory}
+                  >
+                    <RefreshCw className="h-3 w-3" />
+                    새로고침
+                  </Button>
+                </div>
+
+                {/* 이력 테이블 */}
+                <div className="flex-1 overflow-auto">
+                  {historyLoading ? (
+                    <div className="flex items-center justify-center h-20">
+                      <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : historyItems.length === 0 ? (
+                    <div className="flex items-center justify-center h-20 text-xs text-muted-foreground">
+                      재고 이동 이력이 없어요
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="w-8 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">일자</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                          <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">변동수량</TableHead>
+                          <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이후수량</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                          <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사유</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">처리자</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {historyItems.map((h, idx) => (
+                          <TableRow key={h.id || idx} className="text-xs">
+                            <TableCell className="text-center text-muted-foreground">
+                              {idx + 1}
+                            </TableCell>
+                            <TableCell className="font-mono">
+                              {h.transaction_date ? String(h.transaction_date).slice(0, 10) : h.history_date || ""}
+                            </TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getHistoryTypeVariant(h.transaction_type || h.history_type)}
+                                className="text-[10px]"
+                              >
+                                {h.transaction_type || h.history_type}
+                              </Badge>
+                            </TableCell>
+                            <TableCell
+                              className={cn(
+                                "text-right font-mono",
+                                Number(h.quantity ?? h.change_qty) > 0
+                                  ? "text-primary"
+                                  : "text-destructive"
+                              )}
+                            >
+                              {Number(h.quantity ?? h.change_qty) > 0 ? "+" : ""}
+                              {Number(h.quantity ?? h.change_qty ?? 0).toLocaleString()}
+                            </TableCell>
+                            <TableCell className="text-right font-mono">
+                              {Number(h.balance_qty ?? h.after_qty ?? 0).toLocaleString()}
+                            </TableCell>
+                            <TableCell className="font-mono truncate max-w-[120px]">
+                              {h.reference_number || h.reference_no || ""}
+                            </TableCell>
+                            <TableCell className="truncate max-w-[150px]">
+                              {h.remark || h.reason || ""}
+                            </TableCell>
+                            <TableCell>{h.writer || h.created_by || ""}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 재고 조정 Dialog */}
+      <Dialog open={adjustModalOpen} onOpenChange={setAdjustModalOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>재고 조정</DialogTitle>
+            <DialogDescription>
+              {selectedStock
+                ? `${selectedStock.item_name || selectedStock.item_code} — 현재 수량: ${Number(selectedStock.current_qty || 0).toLocaleString()}`
+                : ""}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-2">
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 유형
+              </Label>
+              <Select
+                value={adjustForm.adjust_type}
+                onValueChange={(v) =>
+                  setAdjustForm((prev) => ({ ...prev, adjust_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="조정 유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="증가">증가 (입고 보정)</SelectItem>
+                  <SelectItem value="감소">감소 (출고 보정)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 수량
+              </Label>
+              <Input
+                type="number"
+                min={1}
+                placeholder="수량을 입력해주세요"
+                value={adjustForm.adjust_qty}
+                onChange={(e) =>
+                  setAdjustForm((prev) => ({
+                    ...prev,
+                    adjust_qty: e.target.value,
+                  }))
+                }
+              />
+              {adjustForm.adjust_qty && selectedStock && (
+                <p className="text-xs text-muted-foreground">
+                  조정 후 수량:{" "}
+                  <span className="font-mono font-bold">
+                    {(
+                      Number(selectedStock.current_qty || 0) +
+                      (adjustForm.adjust_type === "증가" ? 1 : -1) *
+                        Number(adjustForm.adjust_qty || 0)
+                    ).toLocaleString()}
+                  </span>
+                </p>
+              )}
+            </div>
+
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                조정 사유 *
+              </Label>
+              <Textarea
+                placeholder="조정 사유를 입력해주세요"
+                rows={3}
+                value={adjustForm.reason}
+                onChange={(e) =>
+                  setAdjustForm((prev) => ({
+                    ...prev,
+                    reason: e.target.value,
+                  }))
+                }
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setAdjustModalOpen(false)}
+            >
+              취소
+            </Button>
+            <Button onClick={handleAdjustSave} disabled={adjustSaving}>
+              {adjustSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              조정하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/logistics/material-status/page.tsx b/frontend/app/(main)/COMPANY_9/logistics/material-status/page.tsx
new file mode 100644
index 00000000..eb87ba92
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/logistics/material-status/page.tsx
@@ -0,0 +1,629 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+// Card 제거 — rounded-lg border bg-card 패턴 사용
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Search,
+  RotateCcw,
+  Package,
+  ClipboardList,
+  Factory,
+  MapPin,
+  AlertTriangle,
+  CheckCircle2,
+  Loader2,
+  Inbox,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  getWorkOrders,
+  getMaterialStatus,
+  getWarehouses,
+  type WorkOrder,
+  type MaterialData,
+  type WarehouseData,
+} from "@/lib/api/materialStatus";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+
+const GRID_COLUMNS = [
+  { key: "plan_no", label: "계획번호" },
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "plan_qty", label: "수량" },
+  { key: "plan_date", label: "일자" },
+  { key: "status", label: "상태" },
+];
+
+const formatDate = (date: Date) => {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+};
+
+const getStatusLabel = (status: string) => {
+  const map: Record<string, string> = {
+    planned: "계획",
+    in_progress: "진행중",
+    completed: "완료",
+    pending: "대기",
+    cancelled: "취소",
+  };
+  return map[status] || status;
+};
+
+const getStatusStyle = (status: string) => {
+  const map: Record<string, string> = {
+    planned: "bg-secondary text-secondary-foreground border-border",
+    pending: "bg-secondary text-secondary-foreground border-border",
+    in_progress: "bg-primary/10 text-primary border-primary/20",
+    completed: "bg-accent text-accent-foreground border-accent/50",
+    cancelled: "bg-muted text-muted-foreground border-border",
+  };
+  return map[status] || "bg-muted text-muted-foreground border-border";
+};
+
+export default function MaterialStatusPage() {
+  const ts = useTableSettings("c16-material-status", "work_instruction", GRID_COLUMNS);
+  const today = new Date();
+  const monthAgo = new Date(today);
+  monthAgo.setMonth(today.getMonth() - 1);
+
+  const [searchDateFrom, setSearchDateFrom] = useState(formatDate(monthAgo));
+  const [searchDateTo, setSearchDateTo] = useState(formatDate(today));
+  const [searchItemCode, setSearchItemCode] = useState("");
+  const [searchItemName, setSearchItemName] = useState("");
+
+  const [workOrders, setWorkOrders] = useState<WorkOrder[]>([]);
+  const [workOrdersLoading, setWorkOrdersLoading] = useState(false);
+  const [checkedWoIds, setCheckedWoIds] = useState<string[]>([]);
+  const [selectedWoId, setSelectedWoId] = useState<string | null>(null);
+
+  const [warehouses, setWarehouses] = useState<WarehouseData[]>([]);
+  const [warehouse, setWarehouse] = useState("");
+  const [materialSearch, setMaterialSearch] = useState("");
+  const [showShortageOnly, setShowShortageOnly] = useState(false);
+  const [materials, setMaterials] = useState<MaterialData[]>([]);
+  const [materialsLoading, setMaterialsLoading] = useState(false);
+
+  // 창고 목록 초기 로드
+  useEffect(() => {
+    (async () => {
+      const res = await getWarehouses();
+      if (res.success && res.data) {
+        setWarehouses(res.data);
+      }
+    })();
+  }, []);
+
+  // 작업지시 검색
+  const handleSearch = useCallback(async () => {
+    setWorkOrdersLoading(true);
+    try {
+      const res = await getWorkOrders({
+        dateFrom: searchDateFrom,
+        dateTo: searchDateTo,
+        itemCode: searchItemCode || undefined,
+        itemName: searchItemName || undefined,
+      });
+      if (res.success && res.data) {
+        setWorkOrders(res.data);
+        setCheckedWoIds([]);
+        setSelectedWoId(null);
+        setMaterials([]);
+      }
+    } finally {
+      setWorkOrdersLoading(false);
+    }
+  }, [searchDateFrom, searchDateTo, searchItemCode, searchItemName]);
+
+  // 초기 로드
+  useEffect(() => {
+    handleSearch();
+  }, []);
+
+  const isAllChecked =
+    workOrders.length > 0 && checkedWoIds.length === workOrders.length;
+
+  const handleCheckAll = useCallback(
+    (checked: boolean) => {
+      setCheckedWoIds(checked ? workOrders.map((wo) => wo.id) : []);
+    },
+    [workOrders]
+  );
+
+  const handleCheckWo = useCallback((id: string, checked: boolean) => {
+    setCheckedWoIds((prev) =>
+      checked ? [...prev, id] : prev.filter((i) => i !== id)
+    );
+  }, []);
+
+  const handleSelectWo = useCallback((id: string) => {
+    setSelectedWoId((prev) => (prev === id ? null : id));
+  }, []);
+
+  // 선택된 작업지시의 자재 조회
+  const handleLoadSelectedMaterials = useCallback(async () => {
+    if (checkedWoIds.length === 0) {
+      alert("자재를 조회할 작업지시를 선택해주세요.");
+      return;
+    }
+
+    setMaterialsLoading(true);
+    try {
+      const res = await getMaterialStatus({
+        planIds: checkedWoIds,
+        warehouseCode: warehouse || undefined,
+      });
+      if (res.success && res.data) {
+        setMaterials(res.data);
+      }
+    } finally {
+      setMaterialsLoading(false);
+    }
+  }, [checkedWoIds, warehouse]);
+
+  const handleResetSearch = useCallback(() => {
+    const t = new Date();
+    const m = new Date(t);
+    m.setMonth(t.getMonth() - 1);
+    setSearchDateFrom(formatDate(m));
+    setSearchDateTo(formatDate(t));
+    setSearchItemCode("");
+    setSearchItemName("");
+    setMaterialSearch("");
+    setShowShortageOnly(false);
+  }, []);
+
+  const filteredMaterials = useMemo(() => {
+    return materials.filter((m) => {
+      const searchLower = materialSearch.toLowerCase();
+      const matchesSearch =
+        !materialSearch ||
+        m.code.toLowerCase().includes(searchLower) ||
+        m.name.toLowerCase().includes(searchLower);
+      const matchesShortage = !showShortageOnly || m.current < m.required;
+      return matchesSearch && matchesShortage;
+    });
+  }, [materials, materialSearch, showShortageOnly]);
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 검색 영역 */}
+      <div className="shrink-0 flex flex-wrap items-end gap-3 rounded-lg border bg-card p-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">기간</span>
+            <div className="flex items-center gap-1.5">
+              <Input
+                type="date"
+                className="h-9 w-[140px]"
+                value={searchDateFrom}
+                onChange={(e) => setSearchDateFrom(e.target.value)}
+              />
+              <span className="text-muted-foreground/50 text-xs">~</span>
+              <Input
+                type="date"
+                className="h-9 w-[140px]"
+                value={searchDateTo}
+                onChange={(e) => setSearchDateTo(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목코드</span>
+            <Input
+              placeholder="품목코드"
+              className="h-9 w-[140px]"
+              value={searchItemCode}
+              onChange={(e) => setSearchItemCode(e.target.value)}
+            />
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목명</span>
+            <Input
+              placeholder="품목명"
+              className="h-9 w-[140px]"
+              value={searchItemName}
+              onChange={(e) => setSearchItemName(e.target.value)}
+            />
+          </div>
+
+          <div className="flex-1" />
+
+          <div className="flex items-end gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-9"
+              onClick={handleResetSearch}
+            >
+              <RotateCcw className="mr-1 h-4 w-4" />
+              초기화
+            </Button>
+            <Button
+              size="sm"
+              className="h-9"
+              onClick={handleSearch}
+              disabled={workOrdersLoading}
+            >
+              {workOrdersLoading ? (
+                <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+              ) : (
+                <Search className="mr-1 h-4 w-4" />
+              )}
+              검색
+            </Button>
+          </div>
+      </div>
+
+      {/* 메인 콘텐츠 (좌우 분할) */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 왼쪽: 작업지시 리스트 */}
+          <ResizablePanel defaultSize={35} minSize={25}>
+            <div className="flex h-full flex-col">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between border-b bg-muted/30 px-3 py-2.5 shrink-0">
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    checked={isAllChecked}
+                    onCheckedChange={handleCheckAll}
+                  />
+                  <ClipboardList className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-semibold">작업지시 리스트</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                    {workOrders.length}건
+                  </span>
+                  <Button
+                    size="sm"
+                    className="h-8"
+                    onClick={handleLoadSelectedMaterials}
+                    disabled={materialsLoading}
+                  >
+                    {materialsLoading ? (
+                      <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Search className="mr-1.5 h-3.5 w-3.5" />
+                    )}
+                    자재조회
+                  </Button>
+                  <Button variant="ghost" size="sm" className="h-8" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 작업지시 목록 */}
+              <div className="flex-1 space-y-2 overflow-auto p-3">
+                {workOrdersLoading ? (
+                  <div className="flex flex-col items-center justify-center py-12 text-center">
+                    <Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
+                    <p className="text-sm text-muted-foreground">
+                      작업지시를 조회하고 있어요...
+                    </p>
+                  </div>
+                ) : workOrders.length === 0 ? (
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Inbox className="h-10 w-10 text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">
+                      조회된 작업지시가 없어요
+                    </p>
+                  </div>
+                ) : (
+                  ts.groupData(workOrders).map((wo) => {
+                    if ((wo as any)._isGroupSummary || (wo as any)._isGroupHeader) return null;
+                    return (
+                      <div
+                        key={wo.id}
+                        className={cn(
+                          "flex gap-3 rounded-lg border p-3 transition-all cursor-pointer",
+                          "hover:border-primary/50 hover:shadow-sm",
+                          selectedWoId === wo.id
+                            ? "border-primary bg-primary/5 shadow-sm"
+                            : "border-border"
+                        )}
+                        onClick={() => handleSelectWo(wo.id)}
+                      >
+                        <div
+                          className="flex items-start pt-0.5"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Checkbox
+                            checked={checkedWoIds.includes(wo.id)}
+                            onCheckedChange={(c) =>
+                              handleCheckWo(wo.id, c as boolean)
+                            }
+                          />
+                        </div>
+                        <div className="flex flex-1 flex-col gap-1.5">
+                          <div className="flex items-center gap-2">
+                            {ts.isVisible("plan_no") && (
+                              <span className="text-sm font-bold text-primary">
+                                {wo.plan_no || wo.work_order_no || `WO-${wo.id}`}
+                              </span>
+                            )}
+                            {ts.isVisible("status") && (
+                              <span
+                                className={cn(
+                                  "ml-auto rounded-md border px-2 py-0.5 text-[11px] font-semibold",
+                                  getStatusStyle(wo.status)
+                                )}
+                              >
+                                {getStatusLabel(wo.status)}
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1.5">
+                            {ts.isVisible("item_name") && (
+                              <span className="text-sm font-semibold">
+                                {wo.item_name}
+                              </span>
+                            )}
+                            {ts.isVisible("item_code") && (
+                              <span className="text-xs text-muted-foreground">
+                                ({wo.item_code})
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                            {ts.isVisible("plan_qty") && (
+                              <>
+                                <span>수량:</span>
+                                <span className="font-semibold text-foreground">
+                                  {Number(wo.plan_qty).toLocaleString()}개
+                                </span>
+                              </>
+                            )}
+                            {ts.isVisible("plan_qty") && ts.isVisible("plan_date") && (
+                              <span className="mx-1">|</span>
+                            )}
+                            {ts.isVisible("plan_date") && (
+                              <>
+                                <span>일자:</span>
+                                <span className="font-semibold text-foreground">
+                                  {wo.plan_date
+                                    ? new Date(wo.plan_date)
+                                        .toISOString()
+                                        .slice(0, 10)
+                                    : "-"}
+                                </span>
+                              </>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 오른쪽: 원자재 현황 */}
+          <ResizablePanel defaultSize={65} minSize={35}>
+            <div className="flex h-full flex-col">
+              {/* 패널 헤더 */}
+              <div className="flex items-center gap-2 border-b bg-muted/30 px-3 py-2.5 shrink-0">
+                <Factory className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-semibold">원자재 재고 현황</span>
+              </div>
+
+              {/* 필터 */}
+              <div className="flex flex-wrap items-center gap-3 border-b bg-muted/30 px-4 py-2.5 shrink-0">
+                <Input
+                  placeholder="원자재 검색"
+                  className="h-8 min-w-[150px] flex-1 text-xs"
+                  value={materialSearch}
+                  onChange={(e) => setMaterialSearch(e.target.value)}
+                />
+                <Select value={warehouse} onValueChange={setWarehouse}>
+                  <SelectTrigger className="h-8 w-[180px] text-xs">
+                    <SelectValue placeholder="전체 창고" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__all__">전체 창고</SelectItem>
+                    {warehouses.map((wh) => (
+                      <SelectItem
+                        key={wh.warehouse_code}
+                        value={wh.warehouse_code}
+                      >
+                        {wh.warehouse_name}
+                        {wh.warehouse_type
+                          ? ` (${wh.warehouse_type})`
+                          : ""}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <label className="flex cursor-pointer items-center gap-2 text-xs font-medium">
+                  <Checkbox
+                    checked={showShortageOnly}
+                    onCheckedChange={(c) => setShowShortageOnly(c as boolean)}
+                  />
+                  <span>부족한 것만 보기</span>
+                </label>
+                <span className="ml-auto rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                  {filteredMaterials.length}개 품목
+                </span>
+              </div>
+
+              {/* 원자재 목록 */}
+              <div className="flex-1 space-y-2 overflow-auto p-3">
+                {materialsLoading ? (
+                  <div className="flex flex-col items-center justify-center py-12 text-center">
+                    <Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
+                    <p className="text-sm text-muted-foreground">
+                      자재현황을 조회하고 있어요...
+                    </p>
+                  </div>
+                ) : materials.length === 0 ? (
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Inbox className="h-10 w-10 text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">
+                      작업지시를 선택하고 자재조회 버튼을 클릭해주세요
+                    </p>
+                  </div>
+                ) : filteredMaterials.length === 0 ? (
+                  <div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
+                    <Package className="h-10 w-10 text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">
+                      조회된 원자재가 없어요
+                    </p>
+                  </div>
+                ) : (
+                  filteredMaterials.map((material) => {
+                    const shortage = material.required - material.current;
+                    const isShortage = shortage > 0;
+                    const percentage =
+                      material.required > 0
+                        ? Math.min(
+                            (material.current / material.required) * 100,
+                            100
+                          )
+                        : 100;
+
+                    return (
+                      <div
+                        key={material.code}
+                        className={cn(
+                          "rounded-lg border p-3 transition-all hover:shadow-sm",
+                          isShortage
+                            ? "border-destructive/30 bg-destructive/5"
+                            : "border-primary/15 bg-primary/5"
+                        )}
+                      >
+                        {/* 메인 정보 라인 */}
+                        <div className="flex flex-wrap items-center gap-2">
+                          <span className="text-sm font-bold">
+                            {material.name}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            ({material.code})
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            |
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            필요:
+                          </span>
+                          <span className="text-xs font-semibold text-primary">
+                            {material.required.toLocaleString()}
+                            {material.unit}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            |
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            현재:
+                          </span>
+                          <span
+                            className={cn(
+                              "text-xs font-semibold",
+                              isShortage
+                                ? "text-destructive"
+                                : "text-foreground"
+                            )}
+                          >
+                            {material.current.toLocaleString()}
+                            {material.unit}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            |
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            {isShortage ? "부족:" : "여유:"}
+                          </span>
+                          <span
+                            className={cn(
+                              "text-xs font-semibold",
+                              isShortage
+                                ? "text-destructive"
+                                : "text-primary"
+                            )}
+                          >
+                            {Math.abs(shortage).toLocaleString()}
+                            {material.unit}
+                          </span>
+                          <span className="text-xs font-semibold text-muted-foreground">
+                            ({percentage.toFixed(0)}%)
+                          </span>
+
+                          {isShortage ? (
+                            <span className="ml-auto inline-flex items-center gap-1 rounded-md border border-destructive bg-destructive/10 px-2 py-0.5 text-[11px] font-semibold text-destructive">
+                              <AlertTriangle className="h-3 w-3" />
+                              부족
+                            </span>
+                          ) : (
+                            <span className="ml-auto inline-flex items-center gap-1 rounded-md border border-primary bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary">
+                              <CheckCircle2 className="h-3 w-3" />
+                              충분
+                            </span>
+                          )}
+                        </div>
+
+                        {/* 위치별 재고 */}
+                        {material.locations.length > 0 && (
+                          <div className="mt-2 flex flex-wrap items-center gap-1.5">
+                            <MapPin className="h-3.5 w-3.5 text-muted-foreground" />
+                            {material.locations.map((loc, idx) => (
+                              <span
+                                key={idx}
+                                className="inline-flex items-center gap-1 rounded bg-muted/40 px-2 py-0.5 text-xs transition-colors hover:bg-muted/60"
+                              >
+                                <span className="font-semibold font-mono text-primary">
+                                  {loc.location || loc.warehouse}
+                                </span>
+                                <span className="font-semibold">
+                                  {loc.qty.toLocaleString()}
+                                  {material.unit}
+                                </span>
+                              </span>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/logistics/outbound/page.tsx b/frontend/app/(main)/COMPANY_9/logistics/outbound/page.tsx
new file mode 100644
index 00000000..c1ffbd40
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/logistics/outbound/page.tsx
@@ -0,0 +1,1840 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Search,
+  Plus,
+  Trash2,
+  Loader2,
+  PackageOpen,
+  X,
+  Save,
+  ChevronRight,
+  ChevronLeft,
+  ChevronDown,
+  ChevronsLeft,
+  ChevronsRight,
+  Inbox,
+  Settings2,
+  Filter,
+  Check,
+  ArrowUp,
+  ArrowDown,
+} from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+// API: /outbound/*
+import {
+  getOutboundList,
+  createOutbound,
+  updateOutbound,
+  deleteOutbound,
+  generateOutboundNumber,
+  getOutboundWarehouses,
+  getOutboundLocations,
+  getShipmentInstructionSources,
+  getPurchaseOrderSources,
+  getItemSources,
+  type OutboundItem,
+  type ShipmentInstructionSource,
+  type PurchaseOrderSource,
+  type ItemSource,
+  type LocationOption,
+  type WarehouseOption,
+} from "@/lib/api/outbound";
+
+// 출고유형 옵션
+const OUTBOUND_TYPES = [
+  { value: "판매출고", label: "판매출고", color: "bg-primary/10 text-primary" },
+  { value: "반품출고", label: "반품출고", color: "bg-destructive/10 text-destructive" },
+  { value: "기타출고", label: "기타출고", color: "bg-muted text-muted-foreground" },
+];
+
+const OUTBOUND_STATUS_OPTIONS = [
+  { value: "대기", label: "대기", color: "bg-secondary text-secondary-foreground" },
+  { value: "출고완료", label: "출고완료", color: "bg-primary/10 text-primary" },
+  { value: "부분출고", label: "부분출고", color: "bg-accent text-accent-foreground" },
+  { value: "출고취소", label: "출고취소", color: "bg-destructive/10 text-destructive" },
+];
+
+const getTypeColor = (type: string) => OUTBOUND_TYPES.find((t) => t.value === type)?.color || "bg-muted text-muted-foreground";
+const getStatusColor = (status: string) => OUTBOUND_STATUS_OPTIONS.find((s) => s.value === status)?.color || "bg-muted text-muted-foreground";
+
+// 소스 테이블 한글명 매핑
+const SOURCE_TYPE_LABEL: Record<string, string> = {
+  shipment_instruction_detail: "출하지시",
+  purchase_order_mng: "발주",
+  item_info: "품목",
+};
+
+const GRID_COLUMNS = [
+  { key: "outbound_number", label: "출고번호" },
+  { key: "outbound_type", label: "출고유형" },
+  { key: "outbound_date", label: "출고일" },
+  { key: "reference_number", label: "참조번호" },
+  { key: "source_type", label: "데이터출처" },
+  { key: "customer_name", label: "거래처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "outbound_qty", label: "출고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+  { key: "warehouse_name", label: "창고" },
+  { key: "outbound_status", label: "출고상태" },
+  { key: "remark", label: "비고" },
+];
+
+// 마스터 헤더 레이아웃 (출고번호 뒤)
+const MASTER_BODY_LAYOUT = [
+  { key: "outbound_type", label: "출고유형", colSpan: 1 },
+  { key: "outbound_date", label: "출고일", colSpan: 1 },
+  { key: "reference_number", label: "참조번호", colSpan: 1 },
+  { key: "customer_name", label: "거래처", colSpan: 1 },
+  { key: "warehouse_name", label: "창고", colSpan: 1 },
+  { key: "outbound_status", label: "출고상태", colSpan: 1 },
+  { key: "memo", label: "비고", colSpan: 1 },
+];
+
+// 디테일 헤더 컬럼
+const DETAIL_HEADER_COLS = [
+  { key: "source_type", label: "출처" },
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "specification", label: "규격" },
+  { key: "outbound_qty", label: "출고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+];
+
+// 마스터 필드 키 목록 (필터 분류용)
+const MASTER_KEYS = new Set(["outbound_number", ...MASTER_BODY_LAYOUT.map((c) => c.key)]);
+
+// 디테일 필드 키 매핑 (GRID_COLUMNS key → DETAIL_HEADER_COLS key)
+const DETAIL_KEY_MAP: Record<string, string> = {
+  source_type: "source_type",
+  item_number: "item_code",
+  item_name: "item_name",
+  spec: "specification",
+  outbound_qty: "outbound_qty",
+  unit_price: "unit_price",
+  total_amount: "total_amount",
+};
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 선택된 소스 아이템 (등록 모달에서 사용)
+interface SelectedSourceItem {
+  key: string;
+  outbound_type: string;
+  reference_number: string;
+  customer_code: string;
+  customer_name: string;
+  item_number: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  unit: string;
+  outbound_qty: number;
+  unit_price: number;
+  total_amount: number;
+  source_type: string;
+  source_id: string;
+}
+
+export default function OutboundPage() {
+  const ts = useTableSettings("c16-outbound", "outbound_mng", GRID_COLUMNS);
+
+  // ts.visibleColumns 기반 마스터/디테일 컬럼 계산
+  const visibleMasterLayout = useMemo(() => {
+    const ordered: typeof MASTER_BODY_LAYOUT = [];
+    for (const vc of ts.visibleColumns) {
+      const m = MASTER_BODY_LAYOUT.find((ml) => ml.key === vc.key);
+      if (m) ordered.push(m);
+    }
+    return ordered.length > 0 ? ordered : MASTER_BODY_LAYOUT;
+  }, [ts.visibleColumns]);
+
+  const visibleDetailCols = useMemo(() => {
+    const ordered: typeof DETAIL_HEADER_COLS = [];
+    for (const vc of ts.visibleColumns) {
+      const detailKey = DETAIL_KEY_MAP[vc.key];
+      if (detailKey) {
+        const d = DETAIL_HEADER_COLS.find((dc) => dc.key === detailKey);
+        if (d) ordered.push(d);
+      }
+    }
+    return ordered.length > 0 ? ordered : DETAIL_HEADER_COLS;
+  }, [ts.visibleColumns]);
+
+  const TOTAL_COLS = 3 + visibleMasterLayout.length;
+
+  // 목록 데이터
+  const [data, setData] = useState<OutboundItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 마스터-디테일 그룹 테이블 state
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+  const [closingOrders, setClosingOrders] = useState<Set<string>>(new Set());
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
+
+  // 등록 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalOutboundType, setModalOutboundType] = useState("판매출고");
+  const [modalOutboundNo, setModalOutboundNo] = useState("");
+  const [modalOutboundDate, setModalOutboundDate] = useState("");
+  const [modalWarehouse, setModalWarehouse] = useState("");
+  const [modalLocation, setModalLocation] = useState("");
+  const [modalManager, setModalManager] = useState("");
+  const [modalMemo, setModalMemo] = useState("");
+  const [selectedItems, setSelectedItems] = useState<SelectedSourceItem[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // 수정 모드 (등록 모달을 재활용)
+  const [editMode, setEditMode] = useState(false);
+  const [editItemIds, setEditItemIds] = useState<string[]>([]);
+
+  // 소스 데이터
+  const [sourceKeyword, setSourceKeyword] = useState("");
+  const [sourceLoading, setSourceLoading] = useState(false);
+  const [shipmentInstructions, setShipmentInstructions] = useState<ShipmentInstructionSource[]>([]);
+  const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrderSource[]>([]);
+  const [items, setItems] = useState<ItemSource[]>([]);
+  const [warehouses, setWarehouses] = useState<WarehouseOption[]>([]);
+  const [locations, setLocations] = useState<LocationOption[]>([]);
+
+  // 소스 데이터 페이징 (클라이언트 사이드)
+  const [sourcePage, setSourcePage] = useState(1);
+  const [sourcePageSize, setSourcePageSize] = useState(20);
+
+  // 목록 조회
+  const fetchList = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string | undefined> = {};
+      for (const f of searchFilters) {
+        if (!f.value) continue;
+        if (f.columnName === "outbound_type") params.outbound_type = f.value;
+        else if (f.columnName === "outbound_status") params.outbound_status = f.value;
+        else if (f.columnName === "outbound_date" && f.operator === "between") {
+          const [from, to] = f.value.split("~").map((s) => s.trim());
+          if (from) params.date_from = from;
+          if (to) params.date_to = to;
+        } else {
+          params.search_keyword = f.value;
+        }
+      }
+      const res = await getOutboundList(params);
+      if (res.success) setData(res.data);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchList();
+  }, [fetchList]);
+
+  // 창고 목록 로드
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await getOutboundWarehouses();
+        if (res.success) setWarehouses(res.data);
+      } catch {
+        // ignore
+      }
+    })();
+  }, []);
+
+  // --- 마스터-디테일 그룹핑, 필터, 정렬 ---
+
+  // outbound_number 기준 그룹핑 + 필터 + 정렬
+  const filteredGroups = useMemo(() => {
+    // 1차: outbound_number 기준 그룹핑
+    const allGroups: Record<string, { master: OutboundItem; details: OutboundItem[] }> = {};
+    for (const row of data) {
+      const key = row.outbound_number || "_no_number";
+      if (!allGroups[key]) {
+        allGroups[key] = { master: row, details: [] };
+      }
+      allGroups[key].details.push(row);
+    }
+
+    // 마스터 필터 / 디테일 필터 분리
+    const masterFilters: Record<string, Set<string>> = {};
+    const detailFilters: Record<string, Set<string>> = {};
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      if (MASTER_KEYS.has(colKey)) masterFilters[colKey] = values;
+      else detailFilters[colKey] = values;
+    }
+
+    // 2차: 마스터 필터 적용 (그룹 단위)
+    let entries = Object.entries(allGroups);
+    if (Object.keys(masterFilters).length > 0) {
+      entries = entries.filter(([, group]) =>
+        Object.entries(masterFilters).every(([colKey, values]) => {
+          const raw = (group.master as any)?.[colKey] ?? "";
+          return values.has(String(raw));
+        })
+      );
+    }
+
+    // 3차: 디테일 필터 적용 (행 단위)
+    if (Object.keys(detailFilters).length > 0) {
+      entries = entries
+        .map(([outNo, group]) => {
+          const filtered = group.details.filter((row) =>
+            Object.entries(detailFilters).every(([colKey, values]) => {
+              let cellVal = (row as any)[colKey] != null ? String((row as any)[colKey]) : "";
+              if (colKey === "source_type") cellVal = SOURCE_TYPE_LABEL[cellVal] || cellVal;
+              return values.has(cellVal);
+            })
+          );
+          return [outNo, { ...group, details: filtered }] as [string, typeof group];
+        })
+        .filter(([, group]) => group.details.length > 0);
+    }
+
+    // 4차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      if (MASTER_KEYS.has(key)) {
+        entries.sort(([, a], [, b]) => {
+          const av = (a.master as any)?.[key] ?? "";
+          const bv = (b.master as any)?.[key] ?? "";
+          const na = Number(av); const nb = Number(bv);
+          if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+          return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+        });
+      } else {
+        entries.forEach(([, group]) => {
+          group.details.sort((a, b) => {
+            let av: any = (a as any)[key] ?? "";
+            let bv: any = (b as any)[key] ?? "";
+            if (key === "source_type") { av = SOURCE_TYPE_LABEL[av] || av; bv = SOURCE_TYPE_LABEL[bv] || bv; }
+            const na = Number(av); const nb = Number(bv);
+            if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+            return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+          });
+        });
+      }
+    }
+
+    return Object.fromEntries(entries);
+  }, [data, headerFilters, sortState]);
+
+  // 마스터 컬럼별 고유값 (헤더 필터용)
+  const masterUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    const seenMasters = new Map<string, OutboundItem>();
+    data.forEach((row) => {
+      if (row.outbound_number && !seenMasters.has(row.outbound_number)) {
+        seenMasters.set(row.outbound_number, row);
+      }
+    });
+    const masters = Array.from(seenMasters.values());
+    for (const col of [{ key: "outbound_number", label: "출고번호" }, ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label }))]) {
+      const values = new Set<string>();
+      masters.forEach((m) => {
+        const val = (m as any)?.[col.key];
+        if (val !== null && val !== undefined && val !== "") values.add(String(val));
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 디테일 컬럼별 고유값 (디테일 서브헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of DETAIL_HEADER_COLS) {
+      const values = new Set<string>();
+      data.forEach((row) => {
+        let val = (row as any)[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "source_type") val = SOURCE_TYPE_LABEL[val] || val;
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
+  };
+
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
+  };
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
+    );
+  };
+
+  // 삭제
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) return;
+    if (!confirm(`선택한 ${checkedIds.length}건을 삭제하시겠습니까?`)) return;
+    for (const id of checkedIds) {
+      await deleteOutbound(id);
+    }
+    setCheckedIds([]);
+    fetchList();
+  };
+
+  // --- 등록 모달 ---
+
+  const loadSourceData = useCallback(
+    async (type: string, keyword?: string) => {
+      setSourceLoading(true);
+      try {
+        if (type === "판매출고") {
+          const res = await getShipmentInstructionSources(keyword || undefined);
+          if (res.success) setShipmentInstructions(res.data);
+        } else if (type === "반품출고") {
+          const res = await getPurchaseOrderSources(keyword || undefined);
+          if (res.success) setPurchaseOrders(res.data);
+        } else {
+          const res = await getItemSources(keyword || undefined);
+          if (res.success) setItems(res.data);
+        }
+      } catch {
+        // ignore
+      } finally {
+        setSourceLoading(false);
+      }
+    },
+    []
+  );
+
+  const openRegisterModal = async () => {
+    const defaultType = "판매출고";
+    setEditMode(false);
+    setEditItemIds([]);
+    setModalOutboundType(defaultType);
+    setModalOutboundDate(new Date().toISOString().split("T")[0]);
+    setModalWarehouse("");
+    setModalLocation("");
+    setModalManager("");
+    setModalMemo("");
+    setSelectedItems([]);
+    setSourceKeyword("");
+    setShipmentInstructions([]);
+    setPurchaseOrders([]);
+    setItems([]);
+    setIsModalOpen(true);
+
+    try {
+      const [numRes] = await Promise.all([
+        generateOutboundNumber(),
+        loadSourceData(defaultType),
+      ]);
+      if (numRes.success) setModalOutboundNo(numRes.data);
+    } catch {
+      setModalOutboundNo("");
+    }
+  };
+
+  // 수정 모달 열기 (같은 출고번호 묶어서)
+  const openEditModal = (row: OutboundItem) => {
+    const outNo = row.outbound_number;
+    const grouped = data.filter((d) => d.outbound_number === outNo);
+    const first = grouped[0] || row;
+
+    setEditMode(true);
+    setEditItemIds(grouped.map((g) => g.id));
+    setModalOutboundNo(outNo);
+    setModalOutboundType(first.outbound_type || "판매출고");
+    setModalOutboundDate(first.outbound_date ? first.outbound_date.slice(0, 10) : "");
+    setModalWarehouse(first.warehouse_code || "");
+    setModalLocation(first.location_code || "");
+    setModalManager(first.manager_id || "");
+    setModalMemo(first.memo || "");
+    setSelectedItems(
+      grouped.map((g) => ({
+        key: g.id,
+        outbound_type: g.outbound_type || "",
+        reference_number: g.reference_number || "",
+        customer_code: g.customer_code || "",
+        customer_name: g.customer_name || "",
+        item_number: g.item_code || "",
+        item_name: g.item_name || "",
+        spec: g.specification || "",
+        material: g.material || "",
+        unit: g.unit || "",
+        outbound_qty: Number(g.outbound_qty) || 0,
+        unit_price: Number(g.unit_price) || 0,
+        total_amount: Number(g.total_amount) || 0,
+        source_type: g.source_type || "",
+        source_id: (g as any).source_id || "",
+      }))
+    );
+    setSourceKeyword("");
+    setIsModalOpen(true);
+    loadSourceData(first.outbound_type || "판매출고");
+  };
+
+  const searchSourceData = useCallback(async () => {
+    setSourcePage(1);
+    await loadSourceData(modalOutboundType, sourceKeyword || undefined);
+  }, [modalOutboundType, sourceKeyword, loadSourceData]);
+
+  // 현재 출고유형에 따른 전체 소스 데이터
+  const allSourceData = useMemo(() => {
+    if (modalOutboundType === "판매출고") return shipmentInstructions;
+    if (modalOutboundType === "반품출고") return purchaseOrders;
+    return items;
+  }, [modalOutboundType, shipmentInstructions, purchaseOrders, items]);
+
+  const sourceTotalCount = allSourceData.length;
+  const sourceTotalPages = Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize));
+
+  // 현재 페이지에 해당하는 slice
+  const pagedShipmentInstructions = useMemo(() => {
+    if (modalOutboundType !== "판매출고") return [];
+    const start = (sourcePage - 1) * sourcePageSize;
+    return shipmentInstructions.slice(start, start + sourcePageSize);
+  }, [modalOutboundType, shipmentInstructions, sourcePage, sourcePageSize]);
+
+  const pagedPurchaseOrders = useMemo(() => {
+    if (modalOutboundType !== "반품출고") return [];
+    const start = (sourcePage - 1) * sourcePageSize;
+    return purchaseOrders.slice(start, start + sourcePageSize);
+  }, [modalOutboundType, purchaseOrders, sourcePage, sourcePageSize]);
+
+  const pagedItems = useMemo(() => {
+    if (modalOutboundType !== "기타출고") return [];
+    const start = (sourcePage - 1) * sourcePageSize;
+    return items.slice(start, start + sourcePageSize);
+  }, [modalOutboundType, items, sourcePage, sourcePageSize]);
+
+  const handleOutboundTypeChange = useCallback(
+    (type: string) => {
+      setModalOutboundType(type);
+      setSourceKeyword("");
+      setSourcePage(1);
+      setShipmentInstructions([]);
+      setPurchaseOrders([]);
+      setItems([]);
+      setSelectedItems([]);
+      loadSourceData(type);
+    },
+    [loadSourceData]
+  );
+
+  // 출하지시 품목 추가 (판매출고)
+  const addShipmentInstruction = (si: ShipmentInstructionSource) => {
+    const key = `si-${si.detail_id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        outbound_type: "판매출고",
+        reference_number: si.instruction_no,
+        customer_code: si.partner_id,
+        customer_name: si.partner_id,
+        item_number: si.item_code,
+        item_name: si.item_name,
+        spec: si.spec || "",
+        material: si.material || "",
+        unit: "EA",
+        outbound_qty: si.remain_qty,
+        unit_price: 0,
+        total_amount: 0,
+        source_type: "shipment_instruction_detail",
+        source_id: String(si.detail_id),
+      },
+    ]);
+  };
+
+  // 발주 품목 추가 (반품출고)
+  const addPurchaseOrder = (po: PurchaseOrderSource) => {
+    const key = `po-${po.id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        outbound_type: "반품출고",
+        reference_number: po.purchase_no,
+        customer_code: po.supplier_code,
+        customer_name: po.supplier_name,
+        item_number: po.item_code,
+        item_name: po.item_name,
+        spec: po.spec || "",
+        material: po.material || "",
+        unit: "EA",
+        outbound_qty: po.received_qty,
+        unit_price: po.unit_price,
+        total_amount: po.received_qty * po.unit_price,
+        source_type: "purchase_order_mng",
+        source_id: po.id,
+      },
+    ]);
+  };
+
+  // 품목 추가 (기타출고)
+  const addItem = (item: ItemSource) => {
+    const key = `item-${item.id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        outbound_type: "기타출고",
+        reference_number: item.item_number,
+        customer_code: "",
+        customer_name: "",
+        item_number: item.item_number,
+        item_name: item.item_name,
+        spec: item.spec || "",
+        material: item.material || "",
+        unit: item.unit || "EA",
+        outbound_qty: 0,
+        unit_price: item.standard_price,
+        total_amount: 0,
+        source_type: "item_info",
+        source_id: item.id,
+      },
+    ]);
+  };
+
+  // 선택 품목 수량 변경
+  const updateItemQty = (key: string, qty: number) => {
+    setSelectedItems((prev) =>
+      prev.map((item) =>
+        item.key === key
+          ? { ...item, outbound_qty: qty, total_amount: qty * item.unit_price }
+          : item
+      )
+    );
+  };
+
+  // 선택 품목 단가 변경
+  const updateItemPrice = (key: string, price: number) => {
+    setSelectedItems((prev) =>
+      prev.map((item) =>
+        item.key === key
+          ? { ...item, unit_price: price, total_amount: item.outbound_qty * price }
+          : item
+      )
+    );
+  };
+
+  // 선택 품목 삭제
+  const removeItem = (key: string) => {
+    setSelectedItems((prev) => prev.filter((item) => item.key !== key));
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (selectedItems.length === 0) {
+      alert("출고할 품목을 선택해주세요.");
+      return;
+    }
+    if (!modalOutboundDate) {
+      alert("출고일을 입력해주세요.");
+      return;
+    }
+
+    const zeroQtyItems = selectedItems.filter((i) => !i.outbound_qty || i.outbound_qty <= 0);
+    if (zeroQtyItems.length > 0) {
+      alert("출고수량이 0인 품목이 있습니다. 수량을 입력해주세요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      if (editMode) {
+        const currentKeys = new Set(selectedItems.map((i) => i.key));
+        // 삭제: editItemIds에 있지만 selectedItems에 없는 것
+        const toDelete = editItemIds.filter((id) => !currentKeys.has(id));
+        // 수정: editItemIds에도 있고 selectedItems에도 있는 것
+        const toUpdate = selectedItems.filter((i) => editItemIds.includes(i.key));
+        // 추가: editItemIds에 없는 새 아이템
+        const toCreate = selectedItems.filter((i) => !editItemIds.includes(i.key));
+
+        await Promise.all([
+          ...toDelete.map((id) => deleteOutbound(id)),
+          ...toUpdate.map((item) =>
+            updateOutbound(item.key, {
+              outbound_date: modalOutboundDate,
+              outbound_qty: item.outbound_qty,
+              unit_price: item.unit_price,
+              total_amount: item.total_amount,
+              warehouse_code: modalWarehouse || undefined,
+              location_code: modalLocation || undefined,
+              manager_id: modalManager || undefined,
+              memo: modalMemo || undefined,
+            } as any)
+          ),
+          ...(toCreate.length > 0
+            ? [createOutbound({
+                outbound_number: modalOutboundNo,
+                outbound_date: modalOutboundDate,
+                warehouse_code: modalWarehouse || undefined,
+                location_code: modalLocation || undefined,
+                manager_id: modalManager || undefined,
+                memo: modalMemo || undefined,
+                items: toCreate.map((item) => ({
+                  outbound_type: item.outbound_type,
+                  reference_number: item.reference_number,
+                  customer_code: item.customer_code,
+                  customer_name: item.customer_name,
+                  item_code: item.item_number,
+                  item_name: item.item_name,
+                  spec: item.spec,
+                  material: item.material,
+                  unit: item.unit,
+                  outbound_qty: item.outbound_qty,
+                  unit_price: item.unit_price,
+                  total_amount: item.total_amount,
+                  source_type: item.source_type,
+                  source_id: item.source_id,
+                  outbound_status: "출고완료",
+                })),
+              })]
+            : []),
+        ]);
+        toast.success("출고 정보를 수정했어요");
+        setIsModalOpen(false);
+        fetchList();
+      } else {
+        const res = await createOutbound({
+          outbound_number: modalOutboundNo,
+          outbound_date: modalOutboundDate,
+          warehouse_code: modalWarehouse || undefined,
+          location_code: modalLocation || undefined,
+          manager_id: modalManager || undefined,
+          memo: modalMemo || undefined,
+          items: selectedItems.map((item) => ({
+            outbound_type: item.outbound_type,
+            reference_number: item.reference_number,
+            customer_code: item.customer_code,
+            customer_name: item.customer_name,
+            item_code: item.item_number,
+            item_name: item.item_name,
+            spec: item.spec,
+            material: item.material,
+            unit: item.unit,
+            outbound_qty: item.outbound_qty,
+            unit_price: item.unit_price,
+            total_amount: item.total_amount,
+            source_type: item.source_type,
+            source_id: item.source_id,
+            outbound_status: "출고완료",
+          })),
+        });
+
+        if (res.success) {
+          toast.success(res.message || "출고 등록 완료");
+          setIsModalOpen(false);
+          fetchList();
+        }
+      }
+    } catch {
+      toast.error(editMode ? "수정에 실패했어요" : "출고 등록 중 오류가 발생했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+
+
+  // 합계 계산
+  const totalSummary = useMemo(() => {
+    return {
+      count: selectedItems.length,
+      qty: selectedItems.reduce((sum, i) => sum + (i.outbound_qty || 0), 0),
+      amount: selectedItems.reduce((sum, i) => sum + (i.total_amount || 0), 0),
+    };
+  }, [selectedItems]);
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-3">
+      {/* 검색 영역 */}
+      <DynamicSearchFilter
+        tableName="outbound_mng"
+        filterId="c16-outbound"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={data.length}
+      />
+
+      {/* 출고 목록 테이블 */}
+      <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+        {/* 패널 헤더 */}
+        <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2.5 shrink-0">
+          <div className="flex items-center gap-2">
+            <PackageOpen className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-semibold">출고 목록</span>
+            <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+              {data.length}건
+            </span>
+          </div>
+          <div className="flex gap-2">
+            <Button size="sm" onClick={openRegisterModal} className="h-8">
+              <Plus className="mr-1 h-3.5 w-3.5" />
+              출고 등록
+            </Button>
+            <Button
+              size="sm"
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={checkedIds.length === 0}
+              className="h-8"
+            >
+              <Trash2 className="mr-1 h-3.5 w-3.5" />
+              삭제 ({checkedIds.length})
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="h-full overflow-auto">
+          <Table style={{ minWidth: `${216 + visibleMasterLayout.length * 120}px` }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "36px" }} />
+              <col style={{ width: "140px" }} />
+              {visibleMasterLayout.map((col) => (
+                <col key={col.key} style={{ width: ts.getWidth(col.key) ? `${ts.getWidth(col.key)}px` : undefined }} />
+              ))}
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
+                  <Checkbox
+                    checked={(() => {
+                      const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
+                  />
+                </TableHead>
+                <TableHead />
+                {/* 출고번호 */}
+                <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                  <div className="inline-flex items-center gap-1">
+                    <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort("outbound_number")}>
+                      <span className="truncate">출고번호</span>
+                      {sortState?.key === "outbound_number" && (
+                        sortState.direction === "asc"
+                          ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                          : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                      )}
+                    </div>
+                    {(masterUniqueValues["outbound_number"] || []).length > 0 && (
+                      <HeaderFilterPopover
+                        colKey="outbound_number" colLabel="출고번호"
+                        uniqueValues={masterUniqueValues["outbound_number"] || []}
+                        filterValues={headerFilters["outbound_number"] || new Set<string>()}
+                        onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                      />
+                    )}
+                  </div>
+                </TableHead>
+                {/* 마스터 필드 헤더 (ts.visibleColumns 순서) */}
+                {visibleMasterLayout.map((col) => (
+                  <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                    <div className="inline-flex items-center gap-1">
+                      <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                        <span className="truncate">{col.label}</span>
+                        {sortState?.key === col.key && (
+                          sortState.direction === "asc"
+                            ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                            : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                        )}
+                      </div>
+                      {(masterUniqueValues[col.key] || []).length > 0 && (
+                        <HeaderFilterPopover
+                          colKey={col.key} colLabel={col.label}
+                          uniqueValues={masterUniqueValues[col.key] || []}
+                          filterValues={headerFilters[col.key] || new Set<string>()}
+                          onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                        />
+                      )}
+                    </div>
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
+                  </TableCell>
+                </TableRow>
+              ) : Object.keys(filteredGroups).length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <PackageOpen className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 출고 내역이 없어요</span>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                Object.entries(filteredGroups).map(([outboundNo, group]) => {
+                  const isExpanded = expandedOrders.has(outboundNo);
+                  const detailIds = group.details.map((d) => d.id);
+                  const allDetailChecked = detailIds.length > 0 && detailIds.every((id) => checkedIds.includes(id));
+                  const someDetailChecked = detailIds.some((id) => checkedIds.includes(id));
+                  const master = group.master;
+                  return (
+                    <React.Fragment key={outboundNo}>
+                      {/* 마스터 행 */}
+                      <TableRow
+                        style={{ borderTop: "2px solid hsl(var(--border))" }}
+                        className={cn(
+                          "cursor-pointer border-l-[3px] border-l-transparent font-semibold tree-master-row",
+                          allDetailChecked && "border-l-primary bg-primary/5"
+                        )}
+                        onClick={() => {
+                          if (expandedOrders.has(outboundNo)) {
+                            setClosingOrders((prev) => new Set(prev).add(outboundNo));
+                            setTimeout(() => {
+                              setExpandedOrders((prev) => { const next = new Set(prev); next.delete(outboundNo); return next; });
+                              setClosingOrders((prev) => { const next = new Set(prev); next.delete(outboundNo); return next; });
+                            }, 200);
+                          } else {
+                            setExpandedOrders((prev) => new Set(prev).add(outboundNo));
+                          }
+                        }}
+                        onDoubleClick={() => openEditModal(group.details[0])}
+                      >
+                        <TableCell
+                          className="text-center cursor-pointer"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setCheckedIds((prev) => {
+                              if (allDetailChecked) return prev.filter((id) => !detailIds.includes(id));
+                              return [...new Set([...prev, ...detailIds])];
+                            });
+                          }}
+                        >
+                          <Checkbox
+                            checked={allDetailChecked}
+                            data-state={someDetailChecked && !allDetailChecked ? "indeterminate" : undefined}
+                            onCheckedChange={() => {}}
+                          />
+                        </TableCell>
+                        <TableCell className="text-center">
+                          {isExpanded
+                            ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            : <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          }
+                        </TableCell>
+                        {/* 출고번호 */}
+                        <TableCell className="font-mono whitespace-nowrap">
+                          {outboundNo}
+                          <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
+                        </TableCell>
+                        {/* 마스터 필드 (ts.visibleColumns 순서) */}
+                        {visibleMasterLayout.map((col) => {
+                          switch (col.key) {
+                            case "outbound_type": return (
+                              <TableCell key={col.key}>
+                                <Badge variant="outline" className={cn("text-[11px]", getTypeColor(master.outbound_type))}>
+                                  {master.outbound_type || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "outbound_date": return (
+                              <TableCell key={col.key} className="whitespace-nowrap text-[13px]">
+                                {master.outbound_date ? new Date(master.outbound_date).toLocaleDateString("ko-KR") : "-"}
+                              </TableCell>
+                            );
+                            case "reference_number": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.reference_number || ""}</span>
+                              </TableCell>
+                            );
+                            case "customer_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.customer_name || ""}</span>
+                              </TableCell>
+                            );
+                            case "warehouse_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
+                              </TableCell>
+                            );
+                            case "outbound_status": return (
+                              <TableCell key={col.key}>
+                                <Badge variant="outline" className={cn("text-[11px]", getStatusColor(master.outbound_status))}>
+                                  {master.outbound_status || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "memo": return (
+                              <TableCell key={col.key} className="text-muted-foreground">
+                                <span className="block truncate max-w-[120px]">{master.memo || ""}</span>
+                              </TableCell>
+                            );
+                            default: return <TableCell key={col.key} className="text-[13px]">{(master as any)[col.key] ?? ""}</TableCell>;
+                          }
+                        })}
+                      </TableRow>
+
+                      {/* 디테일 서브 헤더 (펼쳤을 때만) */}
+                      {isExpanded && (
+                        <TableRow
+                          className={cn(
+                            "border-l-[3px] border-l-primary/30 bg-muted/60",
+                            closingOrders.has(outboundNo) ? "tree-detail-row-closing" : "tree-detail-row",
+                          )}
+                        >
+                          <TableCell />
+                          <TableCell />
+                          <TableCell />
+                          {visibleDetailCols.map((col) => {
+                            const isRight = ["outbound_qty", "unit_price", "total_amount"].includes(col.key);
+                            const isSorted = sortState?.key === col.key;
+                            const uniqueVals = Array.from(new Set(
+                              group.details.map((d) => {
+                                let v = (d as any)[col.key];
+                                if (col.key === "source_type") v = SOURCE_TYPE_LABEL[v] || v;
+                                return v;
+                              }).filter((v: any) => v != null && v !== "").map(String)
+                            )).sort();
+                            const filterVals = headerFilters[col.key] || new Set<string>();
+                            return (
+                              <TableCell
+                                key={col.key}
+                                className={cn(
+                                  "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 select-none",
+                                  isRight && "text-right",
+                                )}
+                              >
+                                <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                                  <div
+                                    className="flex items-center gap-1 cursor-pointer min-w-0"
+                                    onClick={() => handleSort(col.key)}
+                                  >
+                                    <span className="truncate">{col.label}</span>
+                                    {isSorted && (
+                                      sortState!.direction === "asc"
+                                        ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                                        : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                                    )}
+                                  </div>
+                                  {uniqueVals.length > 0 && (
+                                    <HeaderFilterPopover
+                                      colKey={col.key} colLabel={col.label}
+                                      uniqueValues={uniqueVals} filterValues={filterVals}
+                                      onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                                    />
+                                  )}
+                                </div>
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                      )}
+
+                      {/* 디테일 행 (펼쳤을 때만) */}
+                      {isExpanded && group.details.map((row, detailIdx) => {
+                        const isClosing = closingOrders.has(outboundNo);
+                        const isChecked = checkedIds.includes(row.id);
+                        return (
+                          <TableRow
+                            key={`${row.id}-${detailIdx}`}
+                            className={cn(
+                              "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                              isClosing ? "tree-detail-row-closing" : "tree-detail-row",
+                              isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                            )}
+                            onClick={() => {
+                              setCheckedIds((prev) =>
+                                prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                              );
+                            }}
+                            onDoubleClick={() => openEditModal(row)}
+                          >
+                            <TableCell
+                              className="text-center cursor-pointer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                            >
+                              <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                            </TableCell>
+                            <TableCell className="relative">
+                              <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
+                            </TableCell>
+                            <TableCell />
+                            {visibleDetailCols.map((col) => {
+                              switch (col.key) {
+                                case "source_type": return <TableCell key={col.key} className="text-[13px]">{row.source_type ? (SOURCE_TYPE_LABEL[row.source_type] || row.source_type) : "-"}</TableCell>;
+                                case "item_code": return <TableCell key={col.key} className="font-mono text-[13px]">{row.item_code || ""}</TableCell>;
+                                case "item_name": return <TableCell key={col.key} className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>;
+                                case "specification": return <TableCell key={col.key} className="text-[13px] text-muted-foreground">{row.specification || ""}</TableCell>;
+                                case "outbound_qty": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.outbound_qty ? Number(row.outbound_qty).toLocaleString() : ""}</TableCell>;
+                                case "unit_price": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>;
+                                case "total_amount": return <TableCell key={col.key} className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>;
+                                default: return <TableCell key={col.key} className="text-[13px]">{(row as any)[col.key] ?? ""}</TableCell>;
+                              }
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                    </React.Fragment>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      {/* 출고 등록 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="flex flex-col gap-0 p-0 sm:max-w-[1600px] w-[95vw] h-[90vh] overflow-hidden">
+          <DialogHeader className="shrink-0 border-b px-6 py-4">
+            <DialogTitle>{editMode ? "출고 수정" : "출고 등록"}</DialogTitle>
+            <DialogDescription>{editMode ? "출고 정보를 수정해주세요." : "출고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가해주세요."}</DialogDescription>
+          </DialogHeader>
+
+          {/* 출고유형 선택 */}
+          <div className="flex shrink-0 items-center gap-4 border-b bg-muted/30 px-6 py-3">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고유형</span>
+            <Select value={modalOutboundType} onValueChange={handleOutboundTypeChange}>
+              <SelectTrigger className="h-9 w-[160px] text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {OUTBOUND_TYPES.map((t) => (
+                  <SelectItem key={t.value} value={t.value}>
+                    {t.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <span className="text-muted-foreground ml-auto text-xs italic">
+              {modalOutboundType === "판매출고"
+                ? "출하지시 데이터에서 출고 처리해요"
+                : modalOutboundType === "반품출고"
+                  ? "발주(입고) 데이터에서 반품 출고 처리해요"
+                  : "품목 데이터를 직접 선택하여 출고 처리해요"}
+            </span>
+          </div>
+
+          {/* 메인 콘텐츠 */}
+          <div className="flex-1 overflow-hidden">
+            <ResizablePanelGroup direction="horizontal">
+              {/* 좌측: 소스 데이터 */}
+              <ResizablePanel defaultSize={60} minSize={35}>
+                <div className="flex h-full flex-col">
+                  <div className="flex items-center gap-2 border-b px-4 py-3">
+                    <Input
+                      placeholder={
+                        modalOutboundType === "판매출고"
+                          ? "출하지시번호 / 품목명"
+                          : modalOutboundType === "반품출고"
+                            ? "발주번호 / 품목명 / 공급처"
+                            : "품목번호 / 품목명"
+                      }
+                      value={sourceKeyword}
+                      onChange={(e) => setSourceKeyword(e.target.value)}
+                      onKeyDown={(e) => e.key === "Enter" && searchSourceData()}
+                      className="h-8 flex-1 text-xs"
+                    />
+                    <Button size="sm" onClick={searchSourceData} className="h-8">
+                      <Search className="mr-1 h-3 w-3" />
+                      검색
+                    </Button>
+                  </div>
+
+                  <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2 shrink-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                        {modalOutboundType === "판매출고"
+                          ? "미출고 출하지시 목록"
+                          : modalOutboundType === "반품출고"
+                            ? "입고된 발주 목록"
+                            : "품목 목록"}
+                      </span>
+                      {sourceTotalCount > 0 && (
+                        <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                          {sourceTotalCount}건
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex-1 overflow-auto">
+                    {sourceLoading ? (
+                      <div className="flex h-40 items-center justify-center">
+                        <Loader2 className="h-5 w-5 animate-spin" />
+                      </div>
+                    ) : modalOutboundType === "판매출고" ? (
+                      <SourceShipmentInstructionTable
+                        data={pagedShipmentInstructions}
+                        onAdd={addShipmentInstruction}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    ) : modalOutboundType === "반품출고" ? (
+                      <SourcePurchaseOrderTable
+                        data={pagedPurchaseOrders}
+                        onAdd={addPurchaseOrder}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    ) : (
+                      <SourceItemTable
+                        data={pagedItems}
+                        onAdd={addItem}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    )}
+                  </div>
+
+                  {/* 페이징 바 */}
+                  {sourceTotalCount > 0 && (
+                    <div className="flex items-center justify-between border-t bg-muted/10 px-4 py-2 shrink-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-muted-foreground text-[11px]">표시:</span>
+                        <Input
+                          type="number"
+                          min={1}
+                          max={500}
+                          value={sourcePageSize}
+                          onChange={(e) => {
+                            const v = parseInt(e.target.value, 10);
+                            if (v > 0) { setSourcePageSize(v); setSourcePage(1); }
+                          }}
+                          className="h-7 w-[60px] text-center text-[11px]"
+                        />
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => setSourcePage(1)}>
+                          <ChevronsLeft className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => setSourcePage((p) => p - 1)}>
+                          <ChevronLeft className="h-3.5 w-3.5" />
+                        </Button>
+                        <span className="text-xs font-medium px-2">{sourcePage} / {sourceTotalPages}</span>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= sourceTotalPages}
+                          onClick={() => setSourcePage((p) => p + 1)}>
+                          <ChevronRight className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= sourceTotalPages}
+                          onClick={() => setSourcePage(sourceTotalPages)}>
+                          <ChevronsRight className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle onPointerDown={(e) => e.stopPropagation()} />
+
+              {/* 우측: 출고 정보 + 선택 품목 */}
+              <ResizablePanel defaultSize={40} minSize={25}>
+                <div className="flex h-full flex-col">
+                  <div className="space-y-3 border-b bg-muted/30 px-4 py-3">
+                    <h4 className="text-[13px] font-bold text-foreground">출고 정보</h4>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고번호</span>
+                        <Input
+                          value={modalOutboundNo}
+                          readOnly
+                          className="bg-muted cursor-not-allowed h-8 font-mono text-xs"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                          출고일 <span className="text-destructive">*</span>
+                        </span>
+                        <Input
+                          type="date"
+                          value={modalOutboundDate}
+                          onChange={(e) => setModalOutboundDate(e.target.value)}
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">창고</span>
+                        <Select value={modalWarehouse} onValueChange={(v) => {
+                          setModalWarehouse(v);
+                          setModalLocation("");
+                          if (v) {
+                            getOutboundLocations(v).then((r) => { if (r.success) setLocations(r.data); }).catch(() => {});
+                          } else {
+                            setLocations([]);
+                          }
+                        }}>
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="창고 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {warehouses.map((w) => (
+                              <SelectItem key={w.warehouse_code} value={w.warehouse_code}>
+                                {w.warehouse_name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">위치</span>
+                        <Select value={modalLocation || "__none__"} onValueChange={(v) => setModalLocation(v === "__none__" ? "" : v)}>
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="위치 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="__none__">위치 선택</SelectItem>
+                            {locations.map((l) => (
+                              <SelectItem key={l.location_code} value={l.location_code}>
+                                {l.location_name || l.location_code}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자</span>
+                        <Input
+                          value={modalManager}
+                          onChange={(e) => setModalManager(e.target.value)}
+                          placeholder="담당자"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">메모</span>
+                        <Input
+                          value={modalMemo}
+                          onChange={(e) => setModalMemo(e.target.value)}
+                          placeholder="메모"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex-1 overflow-auto px-4 py-2">
+                    <div className="mb-2 flex items-center gap-2">
+                      <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">출고 처리 품목</span>
+                      <span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                        {selectedItems.length}건
+                      </span>
+                    </div>
+
+                    {selectedItems.length === 0 ? (
+                      <div className="flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+                        <PackageOpen className="h-8 w-8 text-muted-foreground/30" />
+                        좌측에서 품목을 선택하여 추가해주세요
+                      </div>
+                    ) : (
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출고유형</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
+                            <TableHead className="w-[30px] p-2" />
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {selectedItems.map((item, idx) => (
+                            <TableRow key={item.key} className="text-xs">
+                              <TableCell className="p-2 text-center">{idx + 1}</TableCell>
+                              <TableCell className="p-2">
+                                <Badge variant="outline" className={cn("text-[10px]", getTypeColor(item.outbound_type))}>
+                                  {item.outbound_type || "-"}
+                                </Badge>
+                              </TableCell>
+                              <TableCell className="max-w-[180px] p-2">
+                                <div className="flex flex-col">
+                                  <span className="truncate font-medium" title={item.item_name}>
+                                    {item.item_name}
+                                  </span>
+                                  <span className="text-muted-foreground truncate text-[10px]" title={`${item.item_number}${item.spec ? ` | ${item.spec}` : ""}`}>
+                                    {item.item_number}
+                                    {item.spec ? ` | ${item.spec}` : ""}
+                                  </span>
+                                </div>
+                              </TableCell>
+                              <TableCell className="p-2 text-[11px]">{item.reference_number}</TableCell>
+                              <TableCell className="p-2 text-right">
+                                <Input
+                                  type="number"
+                                  value={item.outbound_qty || ""}
+                                  onChange={(e) => updateItemQty(item.key, Number(e.target.value) || 0)}
+                                  className="h-7 w-[70px] text-right text-xs"
+                                  min={0}
+                                />
+                              </TableCell>
+                              <TableCell className="p-2 text-right">
+                                <Input
+                                  type="number"
+                                  value={item.unit_price || ""}
+                                  onChange={(e) => updateItemPrice(item.key, Number(e.target.value) || 0)}
+                                  className="h-7 w-[70px] text-right text-xs"
+                                  min={0}
+                                />
+                              </TableCell>
+                              <TableCell className="p-2 text-right text-[13px] font-semibold">
+                                {item.total_amount.toLocaleString()}
+                              </TableCell>
+                              <TableCell className="p-2 text-center">
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-6 w-6"
+                                  onClick={() => removeItem(item.key)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+
+          <div className="shrink-0 border-t">
+            <div className="flex w-full items-center justify-between px-6 py-3">
+              <div className="text-muted-foreground text-xs">
+                {selectedItems.length > 0 ? (
+                  <>
+                    {totalSummary.count}건 | 수량 합계:{" "}
+                    {totalSummary.qty.toLocaleString()} | 금액 합계:{" "}
+                    {totalSummary.amount.toLocaleString()}원
+                  </>
+                ) : (
+                  "품목을 추가해주세요"
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsModalOpen(false)}
+                  className="h-9 text-sm"
+                >
+                  취소
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={saving || selectedItems.length === 0}
+                  className="h-9 text-sm"
+                >
+                  {saving ? (
+                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="mr-1 h-4 w-4" />
+                  )}
+                  저장
+                </Button>
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
+
+// --- 소스 데이터 테이블 컴포넌트들 ---
+
+function SourceShipmentInstructionTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: ShipmentInstructionSource[];
+  onAdd: (si: ShipmentInstructionSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 출하지시 데이터를 조회해주세요
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하지시번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하일</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출고수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">미출고</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((si) => {
+          const isSelected = selectedKeys.includes(`si-${si.detail_id}`);
+          return (
+            <TableRow
+              key={si.detail_id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(si)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">추가됨</Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[130px] truncate p-2 font-medium" title={si.instruction_no}>{si.instruction_no}</TableCell>
+              <TableCell className="p-2">
+                {si.instruction_date
+                  ? new Date(si.instruction_date).toLocaleDateString("ko-KR")
+                  : "-"}
+              </TableCell>
+              <TableCell className="max-w-[200px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={si.item_name}>{si.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={`${si.item_code}${si.spec ? ` | ${si.spec}` : ""}`}>
+                    {si.item_code}
+                    {si.spec ? ` | ${si.spec}` : ""}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(si.plan_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(si.ship_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right font-semibold text-primary">
+                {Number(si.remain_qty).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+function SourcePurchaseOrderTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: PurchaseOrderSource[];
+  onAdd: (po: PurchaseOrderSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 발주 데이터를 조회해주세요
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((po) => {
+          const isSelected = selectedKeys.includes(`po-${po.id}`);
+          return (
+            <TableRow
+              key={po.id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(po)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">추가됨</Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[120px] truncate p-2 font-medium" title={po.purchase_no}>{po.purchase_no}</TableCell>
+              <TableCell className="max-w-[120px] truncate p-2" title={po.supplier_name}>{po.supplier_name}</TableCell>
+              <TableCell className="max-w-[200px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={po.item_name}>{po.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={`${po.item_code}${po.spec ? ` | ${po.spec}` : ""}`}>
+                    {po.item_code}
+                    {po.spec ? ` | ${po.spec}` : ""}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(po.order_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right font-semibold text-primary">
+                {Number(po.received_qty).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+function SourceItemTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: ItemSource[];
+  onAdd: (item: ItemSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="m-4 flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border text-xs text-muted-foreground">
+        <Inbox className="h-8 w-8 text-muted-foreground/30" />
+        검색 버튼을 눌러 품목 데이터를 조회해주세요
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+          <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((item) => {
+          const isSelected = selectedKeys.includes(`item-${item.id}`);
+          return (
+            <TableRow
+              key={item.id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(item)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">추가됨</Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[250px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={item.item_name}>{item.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={item.item_number}>
+                    {item.item_number}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={item.spec || "-"}>{item.spec || "-"}</TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={item.material || "-"}>{item.material || "-"}</TableCell>
+              <TableCell className="p-2">{item.unit || "-"}</TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(item.standard_price).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/logistics/packaging/page.tsx b/frontend/app/(main)/COMPANY_9/logistics/packaging/page.tsx
new file mode 100644
index 00000000..6ae340aa
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/logistics/packaging/page.tsx
@@ -0,0 +1,1033 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandInput, CommandList, CommandEmpty, CommandItem } from "@/components/ui/command";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import {
+  Plus, Trash2, Loader2, Package, Box, X, Save, Edit2, Download, ChevronsUpDown, Check, Inbox, Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  getPkgUnits, createPkgUnit, updatePkgUnit, deletePkgUnit,
+  getPkgUnitItems, createPkgUnitItem, deletePkgUnitItem,
+  getLoadingUnits, createLoadingUnit, updateLoadingUnit, deleteLoadingUnit,
+  getLoadingUnitPkgs, createLoadingUnitPkg, deleteLoadingUnitPkg,
+  getItemsByDivision, getGeneralItems,
+  type PkgUnit, type PkgUnitItem, type LoadingUnit, type LoadingUnitPkg, type ItemInfoForPkg,
+} from "@/lib/api/packaging";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "pkg_code", label: "품목코드" },
+  { key: "pkg_name", label: "포장명" },
+  { key: "pkg_type", label: "유형" },
+  { key: "size", label: "크기(mm)" },
+  { key: "max_weight", label: "최대중량" },
+  { key: "status", label: "상태" },
+];
+
+// --- 코드 → 라벨 매핑 ---
+const PKG_TYPE_LABEL: Record<string, string> = {
+  BOX: "박스", PACK: "팩", CANBOARD: "캔보드", AIRCAP: "에어캡",
+  ZIPCOS: "집코스", CYLINDER: "원통형", POLYCARTON: "포리/카톤",
+};
+const LOADING_TYPE_LABEL: Record<string, string> = {
+  PALLET: "파렛트", WOOD_PALLET: "목재파렛트", PLASTIC_PALLET: "플라스틱파렛트",
+  ALU_PALLET: "알루미늄파렛트", CONTAINER: "컨테이너", STEEL_BOX: "철재함",
+  CAGE: "케이지", ETC: "기타",
+};
+const STATUS_LABEL: Record<string, string> = { ACTIVE: "사용", INACTIVE: "미사용" };
+
+const getStatusColor = (s: string) => s === "ACTIVE" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground";
+const fmtSize = (w: any, l: any, h: any) => {
+  const vals = [w, l, h].map(v => Number(v) || 0);
+  return vals.some(v => v > 0) ? vals.join("×") : "-";
+};
+
+// 규격 문자열에서 치수 파싱
+function parseSpecDimensions(spec: string | null) {
+  if (!spec) return { w: 0, l: 0, h: 0 };
+  const m3 = spec.match(/(\d+)\s*[x×]\s*(\d+)\s*[x×]\s*(\d+)/i);
+  if (m3) return { w: parseInt(m3[1]), l: parseInt(m3[2]), h: parseInt(m3[3]) };
+  const m2 = spec.match(/(\d+)\s*[x×]\s*(\d+)/i);
+  if (m2) return { w: parseInt(m2[1]), l: parseInt(m2[2]), h: 0 };
+  return { w: 0, l: 0, h: 0 };
+}
+
+export default function PackagingPage() {
+  const ts = useTableSettings("c16-packaging", "pkg_unit", GRID_COLUMNS);
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const [activeTab, setActiveTab] = useState<"packing" | "loading">("packing");
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 포장재 데이터
+  const [pkgUnits, setPkgUnits] = useState<PkgUnit[]>([]);
+  const [pkgLoading, setPkgLoading] = useState(false);
+  const [selectedPkg, setSelectedPkg] = useState<PkgUnit | null>(null);
+  const [pkgItems, setPkgItems] = useState<PkgUnitItem[]>([]);
+  const [pkgItemsLoading, setPkgItemsLoading] = useState(false);
+
+  // 적재함 데이터
+  const [loadingUnits, setLoadingUnits] = useState<LoadingUnit[]>([]);
+  const [loadingLoading, setLoadingLoading] = useState(false);
+  const [selectedLoading, setSelectedLoading] = useState<LoadingUnit | null>(null);
+  const [loadingPkgs, setLoadingPkgs] = useState<LoadingUnitPkg[]>([]);
+  const [loadingPkgsLoading, setLoadingPkgsLoading] = useState(false);
+
+  // 모달
+  const [pkgModalOpen, setPkgModalOpen] = useState(false);
+  const [pkgModalMode, setPkgModalMode] = useState<"create" | "edit">("create");
+  const [pkgForm, setPkgForm] = useState<Record<string, any>>({});
+  const [pkgItemOptions, setPkgItemOptions] = useState<ItemInfoForPkg[]>([]);
+  const [pkgItemPopoverOpen, setPkgItemPopoverOpen] = useState(false);
+
+  const [loadModalOpen, setLoadModalOpen] = useState(false);
+  const [loadModalMode, setLoadModalMode] = useState<"create" | "edit">("create");
+  const [loadForm, setLoadForm] = useState<Record<string, any>>({});
+  const [loadItemOptions, setLoadItemOptions] = useState<ItemInfoForPkg[]>([]);
+  const [loadItemPopoverOpen, setLoadItemPopoverOpen] = useState(false);
+
+  const [itemMatchModalOpen, setItemMatchModalOpen] = useState(false);
+  const [itemMatchKeyword, setItemMatchKeyword] = useState("");
+  const [itemMatchResults, setItemMatchResults] = useState<ItemInfoForPkg[]>([]);
+  const [itemMatchSelected, setItemMatchSelected] = useState<ItemInfoForPkg | null>(null);
+  const [itemMatchQty, setItemMatchQty] = useState(1);
+
+  const [pkgMatchModalOpen, setPkgMatchModalOpen] = useState(false);
+  const [pkgMatchQty, setPkgMatchQty] = useState(1);
+  const [pkgMatchMethod, setPkgMatchMethod] = useState("");
+  const [pkgMatchSelected, setPkgMatchSelected] = useState<PkgUnit | null>(null);
+  const [pkgMatchSearchKw, setPkgMatchSearchKw] = useState("");
+
+  const [saving, setSaving] = useState(false);
+
+  // --- 데이터 로드 ---
+  const fetchPkgUnits = useCallback(async () => {
+    setPkgLoading(true);
+    try {
+      const res = await getPkgUnits();
+      if (res.success) setPkgUnits(res.data);
+    } catch { /* ignore */ } finally { setPkgLoading(false); }
+  }, []);
+
+  const fetchLoadingUnits = useCallback(async () => {
+    setLoadingLoading(true);
+    try {
+      const res = await getLoadingUnits();
+      if (res.success) setLoadingUnits(res.data);
+    } catch { /* ignore */ } finally { setLoadingLoading(false); }
+  }, []);
+
+  useEffect(() => { fetchPkgUnits(); fetchLoadingUnits(); }, [fetchPkgUnits, fetchLoadingUnits]);
+
+  // 포장재 선택 시 매칭 품목 로드
+  const selectPkg = useCallback(async (pkg: PkgUnit) => {
+    setSelectedPkg(pkg);
+    setPkgItemsLoading(true);
+    try {
+      const res = await getPkgUnitItems(pkg.pkg_code);
+      if (res.success) setPkgItems(res.data);
+    } catch { setPkgItems([]); } finally { setPkgItemsLoading(false); }
+  }, []);
+
+  // 적재함 선택 시 포장구성 로드
+  const selectLoading = useCallback(async (lu: LoadingUnit) => {
+    setSelectedLoading(lu);
+    setLoadingPkgsLoading(true);
+    try {
+      const res = await getLoadingUnitPkgs(lu.loading_code);
+      if (res.success) setLoadingPkgs(res.data);
+    } catch { setLoadingPkgs([]); } finally { setLoadingPkgsLoading(false); }
+  }, []);
+
+  // 검색 필터 적용
+  const filteredPkgUnits = pkgUnits.filter((p) => {
+    if (searchFilters.length === 0) return true;
+    return searchFilters.every((f) => {
+      if (!f.value) return true;
+      const kw = f.value.toLowerCase();
+      return Object.values(p).some((v) => String(v ?? "").toLowerCase().includes(kw));
+    });
+  });
+
+  const filteredLoadingUnits = loadingUnits.filter((l) => {
+    if (searchFilters.length === 0) return true;
+    return searchFilters.every((f) => {
+      if (!f.value) return true;
+      const kw = f.value.toLowerCase();
+      return Object.values(l).some((v) => String(v ?? "").toLowerCase().includes(kw));
+    });
+  });
+
+  // --- 포장재 등록/수정 모달 ---
+  const openPkgModal = async (mode: "create" | "edit") => {
+    setPkgModalMode(mode);
+    if (mode === "edit" && selectedPkg) {
+      setPkgForm({ ...selectedPkg });
+    } else {
+      setPkgForm({ pkg_code: "", pkg_name: "", pkg_type: "", status: "ACTIVE", width_mm: "", length_mm: "", height_mm: "", self_weight_kg: "", max_load_kg: "", volume_l: "", remarks: "" });
+    }
+    setPkgItemPopoverOpen(false);
+    try {
+      const res = await getItemsByDivision("포장재");
+      if (res.success) setPkgItemOptions(res.data);
+    } catch { setPkgItemOptions([]); }
+    setPkgModalOpen(true);
+  };
+
+  const onPkgItemSelect = (item: ItemInfoForPkg) => {
+    setPkgItemPopoverOpen(false);
+    const dims = parseSpecDimensions(item.size);
+    setPkgForm((prev) => ({
+      ...prev,
+      pkg_code: item.item_number,
+      pkg_name: item.item_name,
+      width_mm: dims.w || prev.width_mm,
+      length_mm: dims.l || prev.length_mm,
+      height_mm: dims.h || prev.height_mm,
+    }));
+  };
+
+  const savePkgUnit = async () => {
+    if (!pkgForm.pkg_code || !pkgForm.pkg_name) { toast.error("포장코드와 포장명은 필수입니다."); return; }
+    if (!pkgForm.pkg_type) { toast.error("포장유형을 선택해주세요."); return; }
+    setSaving(true);
+    try {
+      if (pkgModalMode === "create") {
+        const res = await createPkgUnit(pkgForm);
+        if (res.success) { toast.success("포장재 등록 완료"); setPkgModalOpen(false); fetchPkgUnits(); }
+      } else {
+        const res = await updatePkgUnit(pkgForm.id, pkgForm);
+        if (res.success) { toast.success("포장재 수정 완료"); setPkgModalOpen(false); fetchPkgUnits(); setSelectedPkg(res.data); }
+      }
+    } catch { toast.error("저장 실패"); } finally { setSaving(false); }
+  };
+
+  const handleDeletePkg = async (pkg: PkgUnit) => {
+    const ok = await confirm(`"${pkg.pkg_name}" 포장재를 삭제하시겠습니까?`, { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await deletePkgUnit(pkg.id);
+      toast.success("삭제 완료");
+      setSelectedPkg(null); setPkgItems([]);
+      fetchPkgUnits();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // --- 적재함 등록/수정 모달 ---
+  const openLoadModal = async (mode: "create" | "edit") => {
+    setLoadModalMode(mode);
+    if (mode === "edit" && selectedLoading) {
+      setLoadForm({ ...selectedLoading });
+    } else {
+      setLoadForm({ loading_code: "", loading_name: "", loading_type: "", status: "ACTIVE", width_mm: "", length_mm: "", height_mm: "", self_weight_kg: "", max_load_kg: "", max_stack: "", remarks: "" });
+    }
+    setLoadItemPopoverOpen(false);
+    try {
+      const res = await getItemsByDivision("적재함");
+      if (res.success) setLoadItemOptions(res.data);
+    } catch { setLoadItemOptions([]); }
+    setLoadModalOpen(true);
+  };
+
+  const onLoadItemSelect = (item: ItemInfoForPkg) => {
+    setLoadItemPopoverOpen(false);
+    const dims = parseSpecDimensions(item.size);
+    setLoadForm((prev) => ({
+      ...prev,
+      loading_code: item.item_number,
+      loading_name: item.item_name,
+      width_mm: dims.w || prev.width_mm,
+      length_mm: dims.l || prev.length_mm,
+      height_mm: dims.h || prev.height_mm,
+    }));
+  };
+
+  const saveLoadingUnit = async () => {
+    if (!loadForm.loading_code || !loadForm.loading_name) { toast.error("적재함코드와 적재함명은 필수입니다."); return; }
+    if (!loadForm.loading_type) { toast.error("적재유형을 선택해주세요."); return; }
+    setSaving(true);
+    try {
+      if (loadModalMode === "create") {
+        const res = await createLoadingUnit(loadForm);
+        if (res.success) { toast.success("적재함 등록 완료"); setLoadModalOpen(false); fetchLoadingUnits(); }
+      } else {
+        const res = await updateLoadingUnit(loadForm.id, loadForm);
+        if (res.success) { toast.success("적재함 수정 완료"); setLoadModalOpen(false); fetchLoadingUnits(); setSelectedLoading(res.data); }
+      }
+    } catch { toast.error("저장 실패"); } finally { setSaving(false); }
+  };
+
+  const handleDeleteLoading = async (lu: LoadingUnit) => {
+    const ok = await confirm(`"${lu.loading_name}" 적재함을 삭제하시겠습니까?`, { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await deleteLoadingUnit(lu.id);
+      toast.success("삭제 완료");
+      setSelectedLoading(null); setLoadingPkgs([]);
+      fetchLoadingUnits();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // --- 품목 추가 모달 (포장재 매칭) ---
+  const openItemMatchModal = async () => {
+    setItemMatchKeyword(""); setItemMatchSelected(null); setItemMatchQty(1);
+    setItemMatchModalOpen(true);
+    try {
+      const res = await getGeneralItems();
+      if (res.success) setItemMatchResults(res.data);
+    } catch { setItemMatchResults([]); }
+  };
+
+  const searchItemsForMatch = async () => {
+    try {
+      const res = await getGeneralItems(itemMatchKeyword || undefined);
+      if (res.success) setItemMatchResults(res.data);
+    } catch { setItemMatchResults([]); }
+  };
+
+  const saveItemMatch = async () => {
+    if (!selectedPkg || !itemMatchSelected) { toast.error("품목을 선택해주세요."); return; }
+    if (itemMatchQty <= 0) { toast.error("포장수량을 입력해주세요."); return; }
+    setSaving(true);
+    try {
+      const res = await createPkgUnitItem({
+        pkg_code: selectedPkg.pkg_code,
+        item_number: itemMatchSelected.item_number,
+        pkg_qty: itemMatchQty,
+      });
+      if (res.success) { toast.success("품목 추가 완료"); setItemMatchModalOpen(false); selectPkg(selectedPkg); }
+    } catch { toast.error("추가 실패"); } finally { setSaving(false); }
+  };
+
+  const handleDeletePkgItem = async (item: PkgUnitItem) => {
+    const ok = await confirm("매칭 품목을 삭제하시겠습니까?", { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await deletePkgUnitItem(item.id);
+      toast.success("삭제 완료");
+      if (selectedPkg) selectPkg(selectedPkg);
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // --- 포장단위 추가 모달 (적재함 구성) ---
+  const openPkgMatchModal = () => {
+    setPkgMatchSelected(null); setPkgMatchQty(1); setPkgMatchMethod(""); setPkgMatchSearchKw("");
+    setPkgMatchModalOpen(true);
+  };
+
+  const savePkgMatch = async () => {
+    if (!selectedLoading || !pkgMatchSelected) { toast.error("포장단위를 선택해주세요."); return; }
+    if (pkgMatchQty <= 0) { toast.error("최대적재수량을 입력해주세요."); return; }
+    setSaving(true);
+    try {
+      const res = await createLoadingUnitPkg({
+        loading_code: selectedLoading.loading_code,
+        pkg_code: pkgMatchSelected.pkg_code,
+        max_load_qty: pkgMatchQty,
+        load_method: pkgMatchMethod || undefined,
+      });
+      if (res.success) { toast.success("포장단위 추가 완료"); setPkgMatchModalOpen(false); selectLoading(selectedLoading); }
+    } catch { toast.error("추가 실패"); } finally { setSaving(false); }
+  };
+
+  const handleDeleteLoadPkg = async (lp: LoadingUnitPkg) => {
+    const ok = await confirm("적재 구성을 삭제하시겠습니까?", { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      await deleteLoadingUnitPkg(lp.id);
+      toast.success("삭제 완료");
+      if (selectedLoading) selectLoading(selectedLoading);
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-3 p-4">
+
+      {/* 1. 필터 바 */}
+      <DynamicSearchFilter
+        tableName="pkg_unit"
+        filterId="c16-packaging"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={activeTab === "packing" ? filteredPkgUnits.length : filteredLoadingUnits.length}
+      />
+
+      {/* 2. 탭 바 */}
+      <div className="flex shrink-0 gap-1 border-b">
+        {(
+          [
+            ["packing", "포장재 관리", filteredPkgUnits.length],
+            ["loading", "적재함 관리", filteredLoadingUnits.length],
+          ] as const
+        ).map(([tab, label, count]) => (
+          <button
+            key={tab}
+            onClick={() => {
+              setActiveTab(tab);
+              if (tab === "packing") { setSelectedLoading(null); setLoadingPkgs([]); }
+              else { setSelectedPkg(null); setPkgItems([]); }
+            }}
+            className={cn(
+              "-mb-px flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors",
+              activeTab === tab
+                ? "border-primary text-primary"
+                : "border-transparent text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {tab === "packing" ? <Package className="h-4 w-4" /> : <Box className="h-4 w-4" />}
+            {label}
+            <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+              {count}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/* 3. 액션 바 */}
+      <div className="flex shrink-0 items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold">
+            {activeTab === "packing" ? "포장재 목록" : "적재함 목록"}
+          </h3>
+          {(activeTab === "packing" ? pkgLoading : loadingLoading) && (
+            <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+          )}
+        </div>
+        <div className="flex items-center gap-1.5">
+          {activeTab === "packing" && selectedPkg && (
+            <>
+              <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openPkgModal("edit")}>
+                <Edit2 className="mr-1 h-3 w-3" /> 수정
+              </Button>
+              <Button
+                size="sm" variant="outline"
+                className="h-7 text-xs text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                onClick={() => handleDeletePkg(selectedPkg)}
+              >
+                <Trash2 className="mr-1 h-3 w-3" /> 삭제
+              </Button>
+              <div className="h-4 w-px bg-border" />
+            </>
+          )}
+          {activeTab === "loading" && selectedLoading && (
+            <>
+              <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => openLoadModal("edit")}>
+                <Edit2 className="mr-1 h-3 w-3" /> 수정
+              </Button>
+              <Button
+                size="sm" variant="outline"
+                className="h-7 text-xs text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                onClick={() => handleDeleteLoading(selectedLoading)}
+              >
+                <Trash2 className="mr-1 h-3 w-3" /> 삭제
+              </Button>
+              <div className="h-4 w-px bg-border" />
+            </>
+          )}
+          <Button
+            size="sm"
+            onClick={() => activeTab === "packing" ? openPkgModal("create") : openLoadModal("create")}
+          >
+            <Plus className="mr-1 h-3.5 w-3.5" /> 등록
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 4. 콘텐츠 영역 */}
+      {activeTab === "packing" ? (
+        <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+          {/* 포장재 목록 테이블 */}
+          <div className={cn("overflow-auto", selectedPkg ? "flex-[0_0_50%] border-b" : "flex-1")}>
+            <EDataTable
+              columns={ts.visibleColumns.map((col): EDataTableColumn<PkgUnit> => {
+                const renderMap: Record<string, Partial<EDataTableColumn<PkgUnit>>> = {
+                  pkg_type: { width: "w-[80px]", render: (v: any) => PKG_TYPE_LABEL[v] || v || "-" },
+                  size: { width: "w-[100px]", render: (_v: any, row: any) => fmtSize(row.width_mm, row.length_mm, row.height_mm) },
+                  max_weight: { width: "w-[80px]", align: "right", render: (v: any) => Number(v || 0) > 0 ? `${v}kg` : "-" },
+                  max_load_kg: { width: "w-[80px]", align: "right", render: (v: any) => Number(v || 0) > 0 ? `${v}kg` : "-" },
+                  status: { width: "w-[60px]", align: "center", render: (v: any) => (
+                    <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(v))}>
+                      {STATUS_LABEL[v] || v}
+                    </span>
+                  )},
+                };
+                return { key: col.key, label: col.label, ...renderMap[col.key] };
+              })}
+              data={ts.groupData(filteredPkgUnits)}
+              rowKey={(row) => String(row.id)}
+              loading={pkgLoading}
+              emptyMessage="등록된 포장재가 없어요"
+              selectedId={selectedPkg ? String(selectedPkg.id) : null}
+              onSelect={(id) => {
+                const pkg = filteredPkgUnits.find((p) => String(p.id) === id);
+                if (pkg) selectPkg(pkg);
+              }}
+              showPagination={false}
+              draggableColumns
+              columnOrderKey="c16-packaging-pkg"
+            />
+          </div>
+
+          {/* 매칭 품목 서브패널 */}
+          {selectedPkg && (
+            <>
+              <div className="flex shrink-0 items-center justify-between bg-muted/50 px-4 py-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">매칭 품목</span>
+                  <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+                    {pkgItems.length}건
+                  </span>
+                  <span className="max-w-[200px] truncate text-[11px] text-muted-foreground">
+                    — {selectedPkg.pkg_name}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openItemMatchModal}>
+                    <Plus className="mr-1 h-3 w-3" /> 품목 추가
+                  </Button>
+                  <Button
+                    size="sm" variant="ghost" className="h-7 w-7 p-0 text-muted-foreground"
+                    onClick={() => { setSelectedPkg(null); setPkgItems([]); }}
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <div className="flex-1 overflow-auto">
+                {pkgItemsLoading ? (
+                  <div className="flex h-24 items-center justify-center">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : pkgItems.length === 0 ? (
+                  <div className="flex h-24 flex-col items-center justify-center gap-1.5">
+                    <Inbox className="h-5 w-5 text-muted-foreground/40" />
+                    <p className="text-xs text-muted-foreground">매칭된 품목이 없어요</p>
+                  </div>
+                ) : (
+                  <Table>
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                        <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장수량</TableHead>
+                        <TableHead className="p-2 w-[40px]" />
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {pkgItems.map((item) => (
+                        <TableRow key={item.id} className="text-xs">
+                          <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
+                          <TableCell className="p-2">{item.item_name || "-"}</TableCell>
+                          <TableCell className="p-2">{item.spec || "-"}</TableCell>
+                          <TableCell className="p-2">{item.unit || "EA"}</TableCell>
+                          <TableCell className="p-2 text-right font-semibold">{Number(item.pkg_qty).toLocaleString()}</TableCell>
+                          <TableCell className="p-2 text-center">
+                            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeletePkgItem(item)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      ) : (
+        /* 적재함 관리 탭 */
+        <div className="flex flex-1 flex-col overflow-hidden rounded-lg border bg-card">
+          {/* 적재함 목록 테이블 */}
+          <div className={cn("overflow-auto", selectedLoading ? "flex-[0_0_50%] border-b" : "flex-1")}>
+            <Table>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted">
+                  <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">적재함명</TableHead>
+                  <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">크기(mm)</TableHead>
+                  <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대적재</TableHead>
+                  <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {loadingLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-32 text-center">
+                      <Loader2 className="mx-auto h-5 w-5 animate-spin text-muted-foreground" />
+                    </TableCell>
+                  </TableRow>
+                ) : filteredLoadingUnits.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-40 text-center">
+                      <div className="flex flex-col items-center justify-center gap-2">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-full border-2 border-dashed border-muted-foreground/20">
+                          <Inbox className="h-6 w-6 text-muted-foreground/40" />
+                        </div>
+                        <p className="text-xs text-muted-foreground">등록된 적재함이 없어요</p>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ) : filteredLoadingUnits.map((l) => (
+                  <TableRow
+                    key={l.id}
+                    className={cn(
+                      "cursor-pointer text-xs transition-colors",
+                      selectedLoading?.id === l.id ? "bg-primary/5" : "hover:bg-muted/50"
+                    )}
+                    onClick={() => selectLoading(l)}
+                  >
+                    <TableCell className="p-2 font-medium">{l.loading_code}</TableCell>
+                    <TableCell className="p-2">{l.loading_name}</TableCell>
+                    <TableCell className="p-2">{LOADING_TYPE_LABEL[l.loading_type] || l.loading_type || "-"}</TableCell>
+                    <TableCell className="p-2 text-[10px] tabular-nums">{fmtSize(l.width_mm, l.length_mm, l.height_mm)}</TableCell>
+                    <TableCell className="p-2 text-right">{Number(l.max_load_kg || 0) > 0 ? `${l.max_load_kg}kg` : "-"}</TableCell>
+                    <TableCell className="p-2 text-center">
+                      <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(l.status))}>
+                        {STATUS_LABEL[l.status] || l.status}
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          {/* 포장구성 서브패널 */}
+          {selectedLoading && (
+            <>
+              <div className="flex shrink-0 items-center justify-between bg-muted/50 px-4 py-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">적재 가능 포장단위</span>
+                  <span className="rounded-full border border-primary/15 bg-primary/10 px-2 py-0.5 font-mono text-[11px] font-semibold text-primary">
+                    {loadingPkgs.length}건
+                  </span>
+                  <span className="max-w-[200px] truncate text-[11px] text-muted-foreground">
+                    — {selectedLoading.loading_name}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" variant="outline" className="h-7 text-xs" onClick={openPkgMatchModal}>
+                    <Plus className="mr-1 h-3 w-3" /> 포장단위 추가
+                  </Button>
+                  <Button
+                    size="sm" variant="ghost" className="h-7 w-7 p-0 text-muted-foreground"
+                    onClick={() => { setSelectedLoading(null); setLoadingPkgs([]); }}
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <div className="flex-1 overflow-auto">
+                {loadingPkgsLoading ? (
+                  <div className="flex h-24 items-center justify-center">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : loadingPkgs.length === 0 ? (
+                  <div className="flex h-24 flex-col items-center justify-center gap-1.5">
+                    <Inbox className="h-5 w-5 text-muted-foreground/40" />
+                    <p className="text-xs text-muted-foreground">등록된 포장단위가 없어요</p>
+                  </div>
+                ) : (
+                  <Table>
+                    <TableHeader className="sticky top-0 z-10">
+                      <TableRow className="bg-muted hover:bg-muted">
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장코드</TableHead>
+                        <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장명</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                        <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대수량</TableHead>
+                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">적재방향</TableHead>
+                        <TableHead className="p-2 w-[40px]" />
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {loadingPkgs.map((lp) => (
+                        <TableRow key={lp.id} className="text-xs">
+                          <TableCell className="p-2 font-medium">{lp.pkg_code}</TableCell>
+                          <TableCell className="p-2">{lp.pkg_name || "-"}</TableCell>
+                          <TableCell className="p-2">{PKG_TYPE_LABEL[lp.pkg_type || ""] || lp.pkg_type || "-"}</TableCell>
+                          <TableCell className="p-2 text-right font-semibold">{Number(lp.max_load_qty).toLocaleString()}</TableCell>
+                          <TableCell className="p-2">{lp.load_method || "-"}</TableCell>
+                          <TableCell className="p-2 text-center">
+                            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleDeleteLoadPkg(lp)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* 포장재 등록/수정 모달 */}
+      <Dialog open={pkgModalOpen} onOpenChange={setPkgModalOpen}>
+        <DialogContent className="max-w-2xl" style={{ maxHeight: "90vh", overflowY: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{pkgModalMode === "create" ? "포장재 등록" : "포장재 수정"}</DialogTitle>
+            <DialogDescription>품목정보에서 포장재를 선택하면 코드와 이름이 자동 연동됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            {pkgModalMode === "create" && (
+              <div className="rounded-lg border bg-muted/50 p-4">
+                <Label className="mb-2 block text-xs font-semibold">품목정보 연결 (구분: 포장재)</Label>
+                <Popover open={pkgItemPopoverOpen} onOpenChange={setPkgItemPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" role="combobox" className="h-9 w-full justify-between text-sm font-normal">
+                      {pkgForm.pkg_code ? `${pkgForm.pkg_name} (${pkgForm.pkg_code})` : "품목정보에서 포장재를 선택하세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                    <Command filter={(value, search) => {
+                      const item = pkgItemOptions.find((i) => i.id === value);
+                      if (!item) return 0;
+                      const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
+                      return target.includes(search.toLowerCase()) ? 1 : 0;
+                    }}>
+                      <CommandInput placeholder="품목코드 / 품목명 검색..." />
+                      <CommandList className="max-h-[200px]">
+                        <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                        {pkgItemOptions.map((item) => (
+                          <CommandItem key={item.id} value={item.id} onSelect={() => onPkgItemSelect(item)} className="text-xs">
+                            <Check className={cn("mr-2 h-3 w-3", pkgForm.pkg_code === item.item_number ? "opacity-100" : "opacity-0")} />
+                            <span className="font-medium">{item.item_name}</span>
+                            <span className="ml-2 text-muted-foreground">{item.item_number}</span>
+                            {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
+                          </CommandItem>
+                        ))}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+            <div className="grid grid-cols-2 gap-4">
+              <div><Label className="text-xs">품목코드</Label><Input value={pkgForm.pkg_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div><Label className="text-xs">포장명</Label><Input value={pkgForm.pkg_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div>
+                <Label className="text-xs">포장유형 <span className="text-destructive">*</span></Label>
+                <Select value={pkgForm.pkg_type || ""} onValueChange={(v) => setPkgForm((p) => ({ ...p, pkg_type: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>{Object.entries(PKG_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">상태</Label>
+                <Select value={pkgForm.status || "ACTIVE"} onValueChange={(v) => setPkgForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold">규격정보</Label>
+              <div className="mt-2 grid grid-cols-3 gap-3">
+                <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={pkgForm.width_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={pkgForm.length_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={pkgForm.height_mm || ""} onChange={(e) => setPkgForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={pkgForm.self_weight_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={pkgForm.max_load_kg || ""} onChange={(e) => setPkgForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">내용적(L)</Label><Input type="number" value={pkgForm.volume_l || ""} onChange={(e) => setPkgForm((p) => ({ ...p, volume_l: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+              </div>
+            </div>
+            <div><Label className="text-xs">비고</Label><Input value={pkgForm.remarks || ""} onChange={(e) => setPkgForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setPkgModalOpen(false)}>취소</Button>
+            <Button onClick={savePkgUnit} disabled={saving}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 적재함 등록/수정 모달 */}
+      <Dialog open={loadModalOpen} onOpenChange={setLoadModalOpen}>
+        <DialogContent className="max-w-2xl" style={{ maxHeight: "90vh", overflowY: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{loadModalMode === "create" ? "적재함 등록" : "적재함 수정"}</DialogTitle>
+            <DialogDescription>품목정보에서 적재함을 선택하면 코드와 이름이 자동 연동됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            {loadModalMode === "create" && (
+              <div className="rounded-lg border bg-muted/50 p-4">
+                <Label className="mb-2 block text-xs font-semibold">품목정보 연결 (구분: 적재함)</Label>
+                <Popover open={loadItemPopoverOpen} onOpenChange={setLoadItemPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" role="combobox" className="h-9 w-full justify-between text-sm font-normal">
+                      {loadForm.loading_code ? `${loadForm.loading_name} (${loadForm.loading_code})` : "품목정보에서 적재함을 선택하세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                    <Command filter={(value, search) => {
+                      const item = loadItemOptions.find((i) => i.id === value);
+                      if (!item) return 0;
+                      const target = `${item.item_number} ${item.item_name} ${item.size || ""}`.toLowerCase();
+                      return target.includes(search.toLowerCase()) ? 1 : 0;
+                    }}>
+                      <CommandInput placeholder="품목코드 / 품목명 검색..." />
+                      <CommandList className="max-h-[200px]">
+                        <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                        {loadItemOptions.map((item) => (
+                          <CommandItem key={item.id} value={item.id} onSelect={() => onLoadItemSelect(item)} className="text-xs">
+                            <Check className={cn("mr-2 h-3 w-3", loadForm.loading_code === item.item_number ? "opacity-100" : "opacity-0")} />
+                            <span className="font-medium">{item.item_name}</span>
+                            <span className="ml-2 text-muted-foreground">{item.item_number}</span>
+                            {item.size && <span className="ml-auto text-[10px] text-muted-foreground">{item.size}</span>}
+                          </CommandItem>
+                        ))}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+            <div className="grid grid-cols-2 gap-4">
+              <div><Label className="text-xs">적재함코드</Label><Input value={loadForm.loading_code || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div><Label className="text-xs">적재함명</Label><Input value={loadForm.loading_name || ""} readOnly className="h-9 bg-muted text-xs" /></div>
+              <div>
+                <Label className="text-xs">적재유형 <span className="text-destructive">*</span></Label>
+                <Select value={loadForm.loading_type || ""} onValueChange={(v) => setLoadForm((p) => ({ ...p, loading_type: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue placeholder="선택" /></SelectTrigger>
+                  <SelectContent>{Object.entries(LOADING_TYPE_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label className="text-xs">상태</Label>
+                <Select value={loadForm.status || "ACTIVE"} onValueChange={(v) => setLoadForm((p) => ({ ...p, status: v }))}>
+                  <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>{Object.entries(STATUS_LABEL).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}</SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold">규격정보</Label>
+              <div className="mt-2 grid grid-cols-3 gap-3">
+                <div><Label className="text-[10px]">가로(mm)</Label><Input type="number" value={loadForm.width_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, width_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">세로(mm)</Label><Input type="number" value={loadForm.length_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, length_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">높이(mm)</Label><Input type="number" value={loadForm.height_mm || ""} onChange={(e) => setLoadForm((p) => ({ ...p, height_mm: e.target.value }))} className="h-9 text-xs" /></div>
+                <div><Label className="text-[10px]">자체중량(kg)</Label><Input type="number" value={loadForm.self_weight_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, self_weight_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대적재중량(kg)</Label><Input type="number" value={loadForm.max_load_kg || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_load_kg: e.target.value }))} className="h-9 text-xs" step="0.1" /></div>
+                <div><Label className="text-[10px]">최대단수</Label><Input type="number" value={loadForm.max_stack || ""} onChange={(e) => setLoadForm((p) => ({ ...p, max_stack: e.target.value }))} className="h-9 text-xs" /></div>
+              </div>
+            </div>
+            <div><Label className="text-xs">비고</Label><Input value={loadForm.remarks || ""} onChange={(e) => setLoadForm((p) => ({ ...p, remarks: e.target.value }))} className="h-9 text-xs" placeholder="메모" /></div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setLoadModalOpen(false)}>취소</Button>
+            <Button onClick={saveLoadingUnit} disabled={saving}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 품목 추가 모달 (포장재 매칭) */}
+      <Dialog open={itemMatchModalOpen} onOpenChange={setItemMatchModalOpen}>
+        <DialogContent className="max-w-[900px]">
+          <DialogHeader>
+            <DialogTitle>품목 추가 — {selectedPkg?.pkg_name}</DialogTitle>
+            <DialogDescription>포장재에 매칭할 품목을 검색하여 추가합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <Input
+              placeholder="품목코드 / 품목명 검색 (입력 시 자동 검색)"
+              value={itemMatchKeyword}
+              onChange={(e) => {
+                setItemMatchKeyword(e.target.value);
+                const kw = e.target.value;
+                clearTimeout((window as any).__itemMatchTimer);
+                (window as any).__itemMatchTimer = setTimeout(async () => {
+                  try {
+                    const res = await getGeneralItems(kw || undefined);
+                    if (res.success) setItemMatchResults(res.data);
+                  } catch { /* ignore */ }
+                }, 300);
+              }}
+              className="h-9 text-xs"
+            />
+            <div className="max-h-[300px] overflow-auto rounded border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="p-2 w-[30px]" />
+                    <TableHead className="w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                    <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {itemMatchResults.filter(i => !pkgItems.some(pi => pi.item_number === i.item_number)).length === 0 ? (
+                    <TableRow><TableCell colSpan={6} className="h-16 text-center text-[13px] text-muted-foreground">검색 결과가 없습니다</TableCell></TableRow>
+                  ) : itemMatchResults.filter(i => !pkgItems.some(pi => pi.item_number === i.item_number)).map((item) => (
+                    <TableRow
+                      key={item.id}
+                      className={cn("cursor-pointer text-xs", itemMatchSelected?.id === item.id && "bg-primary/10")}
+                      onClick={() => setItemMatchSelected(item)}
+                    >
+                      <TableCell className="p-2 text-center">{itemMatchSelected?.id === item.id ? "✓" : ""}</TableCell>
+                      <TableCell className="p-2 font-medium">{item.item_number}</TableCell>
+                      <TableCell className="p-2">{item.item_name}</TableCell>
+                      <TableCell className="p-2">{item.spec || "-"}</TableCell>
+                      <TableCell className="p-2">{item.material || "-"}</TableCell>
+                      <TableCell className="p-2">{item.unit || "EA"}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+            <div className="flex items-end gap-4">
+              <div className="flex-1">
+                <Label className="text-xs">선택된 품목</Label>
+                <Input
+                  value={itemMatchSelected ? `${itemMatchSelected.item_name} (${itemMatchSelected.item_number})` : ""}
+                  readOnly className="h-9 bg-muted text-xs"
+                />
+              </div>
+              <div className="w-[120px]">
+                <Label htmlFor="pkg-item-match-qty" className="text-xs">포장수량(EA) <span className="text-destructive">*</span></Label>
+                <Input
+                  id="pkg-item-match-qty" type="number" value={itemMatchQty}
+                  onChange={(e) => setItemMatchQty(Number(e.target.value) || 0)}
+                  min={1} className="h-9 text-xs"
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setItemMatchModalOpen(false)}>취소</Button>
+            <Button type="button" data-action-type="custom" onClick={saveItemMatch} disabled={saving || !itemMatchSelected}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 포장단위 추가 모달 (적재함 구성) */}
+      <Dialog open={pkgMatchModalOpen} onOpenChange={setPkgMatchModalOpen}>
+        <DialogContent className="max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>포장단위 추가 — {selectedLoading?.loading_name}</DialogTitle>
+            <DialogDescription>적재함에 적재할 포장단위를 선택합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <Input
+              placeholder="포장코드 / 포장명 검색"
+              value={pkgMatchSearchKw}
+              onChange={(e) => setPkgMatchSearchKw(e.target.value)}
+              className="h-9 text-xs"
+            />
+            <div className="max-h-[300px] overflow-auto rounded border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="p-2 w-[30px]" />
+                    <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장코드</TableHead>
+                    <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장명</TableHead>
+                    <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">크기(mm)</TableHead>
+                    <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대중량</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {(() => {
+                    const kw = pkgMatchSearchKw.toLowerCase();
+                    const filtered = pkgUnits.filter(p =>
+                      p.status === "ACTIVE"
+                      && !loadingPkgs.some(lp => lp.pkg_code === p.pkg_code)
+                      && (!kw || p.pkg_code?.toLowerCase().includes(kw) || p.pkg_name?.toLowerCase().includes(kw))
+                    );
+                    return filtered.length === 0 ? (
+                      <TableRow><TableCell colSpan={6} className="h-16 text-center text-[13px] text-muted-foreground">추가 가능한 포장단위가 없습니다</TableCell></TableRow>
+                    ) : filtered.map((p) => (
+                      <TableRow
+                        key={p.id}
+                        className={cn("cursor-pointer text-xs", pkgMatchSelected?.id === p.id && "bg-primary/10")}
+                        onClick={() => setPkgMatchSelected(p)}
+                      >
+                        <TableCell className="p-2 text-center">{pkgMatchSelected?.id === p.id ? "✓" : ""}</TableCell>
+                        <TableCell className="p-2 font-medium">{p.pkg_code}</TableCell>
+                        <TableCell className="p-2">{p.pkg_name}</TableCell>
+                        <TableCell className="p-2">{PKG_TYPE_LABEL[p.pkg_type] || p.pkg_type}</TableCell>
+                        <TableCell className="p-2 text-[10px]">{fmtSize(p.width_mm, p.length_mm, p.height_mm)}</TableCell>
+                        <TableCell className="p-2 text-right">{Number(p.max_load_kg || 0) > 0 ? `${p.max_load_kg}kg` : "-"}</TableCell>
+                      </TableRow>
+                    ));
+                  })()}
+                </TableBody>
+              </Table>
+            </div>
+            <div className="flex items-end gap-4">
+              <div className="w-[150px]">
+                <Label htmlFor="loading-pkg-match-qty" className="text-xs">최대적재수량 <span className="text-destructive">*</span></Label>
+                <Input
+                  id="loading-pkg-match-qty" type="number" value={pkgMatchQty}
+                  onChange={(e) => setPkgMatchQty(Number(e.target.value) || 0)}
+                  min={1} className="h-9 text-xs"
+                />
+              </div>
+              <div className="flex-1">
+                <Label className="text-xs">적재방향</Label>
+                <Input
+                  value={pkgMatchMethod}
+                  onChange={(e) => setPkgMatchMethod(e.target.value)}
+                  placeholder="수직/수평/혼합"
+                  className="h-9 text-xs"
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setPkgMatchModalOpen(false)}>취소</Button>
+            <Button type="button" data-action-type="custom" onClick={savePkgMatch} disabled={saving || !pkgMatchSelected}>
+              {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : null} 추가
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/logistics/receiving/page.tsx b/frontend/app/(main)/COMPANY_9/logistics/receiving/page.tsx
new file mode 100644
index 00000000..85cdc23c
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/logistics/receiving/page.tsx
@@ -0,0 +1,1808 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Search,
+  Plus,
+  Trash2,
+  Loader2,
+  Inbox,
+  X,
+  Save,
+  ChevronRight,
+  ChevronDown,
+  ChevronLeft,
+  ChevronsLeft,
+  ChevronsRight,
+  Settings2,
+  Filter,
+  Check,
+  ArrowUp,
+  ArrowDown,
+} from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+// EDataTable 제거 — 마스터-디테일 그룹 테이블로 교체
+// API: /receiving/*
+import {
+  getReceivingList,
+  createReceiving,
+  deleteReceiving,
+  generateReceivingNumber,
+  getReceivingWarehouses,
+  getPurchaseOrderSources,
+  getShipmentSources,
+  getItemSources,
+  type InboundItem,
+  type PurchaseOrderSource,
+  type ShipmentSource,
+  type ItemSource,
+  type WarehouseOption,
+} from "@/lib/api/receiving";
+
+const GRID_COLUMNS = [
+  { key: "inbound_number", label: "입고번호" },
+  { key: "inbound_type", label: "입고유형" },
+  { key: "inbound_date", label: "입고일" },
+  { key: "reference_number", label: "참조번호" },
+  { key: "source_type", label: "데이터출처" },
+  { key: "supplier_name", label: "공급처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "inbound_qty", label: "입고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+  { key: "warehouse_name", label: "창고" },
+  { key: "inbound_status", label: "입고상태" },
+  { key: "remark", label: "비고" },
+];
+
+// 마스터 헤더 레이아웃 (입고번호 뒤, 디테일 7컬럼 위에 colSpan으로 맵핑)
+const MASTER_BODY_LAYOUT = [
+  { key: "inbound_type", label: "입고유형", colSpan: 1 },
+  { key: "inbound_date", label: "입고일", colSpan: 1 },
+  { key: "reference_number", label: "참조번호", colSpan: 1 },
+  { key: "supplier_name", label: "공급처", colSpan: 1 },
+  { key: "warehouse_name", label: "창고", colSpan: 1 },
+  { key: "inbound_status", label: "입고상태", colSpan: 1 },
+  { key: "memo", label: "비고", colSpan: 1 },
+];
+
+// 디테일 헤더 컬럼
+const DETAIL_HEADER_COLS = [
+  { key: "source_table", label: "출처" },
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "inbound_qty", label: "입고수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "total_amount", label: "금액" },
+];
+
+// 마스터 필드 키 목록 (필터 분류용)
+const MASTER_KEYS = new Set(["inbound_number", ...MASTER_BODY_LAYOUT.map((c) => c.key)]);
+
+// 디테일 필드 키 매핑 (GRID_COLUMNS key → DETAIL_HEADER_COLS key)
+const DETAIL_KEY_MAP: Record<string, string> = {
+  source_type: "source_table",
+  item_number: "item_number",
+  item_name: "item_name",
+  spec: "spec",
+  inbound_qty: "inbound_qty",
+  unit_price: "unit_price",
+  total_amount: "total_amount",
+};
+
+// 헤더 필터 Popover
+function HeaderFilterPopover({
+  colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
+}: {
+  colKey: string;
+  colLabel: string;
+  uniqueValues: string[];
+  filterValues: Set<string>;
+  onToggle: (colKey: string, value: string) => void;
+  onClear: (colKey: string) => void;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const hasFilter = filterValues.size > 0;
+  const filteredValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
+            hasFilter && "text-primary bg-primary/10",
+          )}
+          title="필터"
+        >
+          <Filter className="h-3 w-3" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between border-b pb-2">
+            <span className="text-xs font-medium">필터: {colLabel}</span>
+            {hasFilter && (
+              <button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
+                초기화
+              </button>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+            <Input
+              value={filterSearch}
+              onChange={(e) => setFilterSearch(e.target.value)}
+              placeholder="검색..."
+              className="h-7 text-xs pl-7"
+            />
+          </div>
+          <div className="max-h-52 space-y-0.5 overflow-y-auto">
+            {filteredValues.slice(0, 100).map((val) => {
+              const isSelected = filterValues.has(val);
+              return (
+                <div
+                  key={val}
+                  className={cn(
+                    "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
+                    isSelected && "bg-primary/10",
+                  )}
+                  onClick={() => onToggle(colKey, val)}
+                >
+                  <div className={cn(
+                    "flex h-4 w-4 items-center justify-center rounded border shrink-0",
+                    isSelected ? "bg-primary border-primary" : "border-input",
+                  )}>
+                    {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
+                  </div>
+                  <span className="truncate">{val || "(빈 값)"}</span>
+                </div>
+              );
+            })}
+            {filteredValues.length > 100 && (
+              <div className="text-muted-foreground px-2 py-1 text-xs">
+                ...외 {filteredValues.length - 100}개
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 입고유형 옵션
+const INBOUND_TYPES = [
+  { value: "구매입고", label: "구매입고" },
+  { value: "외주입고", label: "외주입고" },
+  { value: "사급자재입고", label: "사급자재입고" },
+  { value: "반품입고", label: "반품입고" },
+  { value: "기타입고", label: "기타입고" },
+];
+
+// 입고유형 카테고리 코드→라벨 매핑
+const INBOUND_TYPE_CODE_MAP: Record<string, string> = {
+  CAT_MLYTB8ON_A3AU: "구매입고",
+  CAT_MLYTBMH6_9AB7: "외주입고",
+  CAT_MLYTBSLW_5N81: "사급자재입고",
+  CAT_MLYTBGEV_N23U: "반품입고",
+  CAT_MLYTBYLU_0Z5T: "기타입고",
+};
+const resolveInboundType = (v: string) => INBOUND_TYPE_CODE_MAP[v] || v || "-";
+
+const INBOUND_STATUS_OPTIONS = [
+  { value: "대기", label: "대기" },
+  { value: "입고완료", label: "입고완료" },
+  { value: "부분입고", label: "부분입고" },
+  { value: "입고취소", label: "입고취소" },
+];
+
+const getTypeVariant = (type: string): "default" | "secondary" | "outline" => {
+  switch (type) {
+    case "구매입고": return "default";
+    case "반품입고": return "secondary";
+    default: return "outline";
+  }
+};
+
+const getStatusVariant = (status: string): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "입고완료": return "default";
+    case "부분입고": return "secondary";
+    case "입고취소": return "destructive";
+    default: return "outline";
+  }
+};
+
+// 소스 테이블 한글명 매핑
+const SOURCE_TABLE_LABEL: Record<string, string> = {
+  purchase_order_mng: "발주",
+  shipment_instruction_detail: "출하",
+  item_info: "품목",
+};
+
+// 선택된 소스 아이템 (등록 모달에서 사용)
+interface SelectedSourceItem {
+  key: string;
+  inbound_type: string;
+  reference_number: string;
+  supplier_code: string;
+  supplier_name: string;
+  item_number: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  unit: string;
+  inbound_qty: number;
+  unit_price: number;
+  total_amount: number;
+  source_table: string;
+  source_id: string;
+}
+
+export default function ReceivingPage() {
+  const ts = useTableSettings("c16-receiving", "inbound_mng", GRID_COLUMNS);
+
+  // ts.visibleColumns 기반 마스터/디테일 컬럼 계산
+  const visibleMasterLayout = useMemo(() => {
+    const ordered: typeof MASTER_BODY_LAYOUT = [];
+    for (const vc of ts.visibleColumns) {
+      const m = MASTER_BODY_LAYOUT.find((ml) => ml.key === vc.key);
+      if (m) ordered.push(m);
+    }
+    return ordered.length > 0 ? ordered : MASTER_BODY_LAYOUT;
+  }, [ts.visibleColumns]);
+
+  const visibleDetailCols = useMemo(() => {
+    const ordered: typeof DETAIL_HEADER_COLS = [];
+    for (const vc of ts.visibleColumns) {
+      const detailKey = DETAIL_KEY_MAP[vc.key];
+      if (detailKey) {
+        const d = DETAIL_HEADER_COLS.find((dc) => dc.key === detailKey);
+        if (d) ordered.push(d);
+      }
+    }
+    return ordered.length > 0 ? ordered : DETAIL_HEADER_COLS;
+  }, [ts.visibleColumns]);
+
+  const TOTAL_COLS = 3 + visibleMasterLayout.length;
+
+  // 목록 데이터
+  const [data, setData] = useState<InboundItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 마스터-디테일 그룹 테이블
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+  const [closingOrders, setClosingOrders] = useState<Set<string>>(new Set());
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+  const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
+
+  // 등록 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalInboundType, setModalInboundType] = useState("구매입고");
+  const [modalInboundNo, setModalInboundNo] = useState("");
+  const [modalInboundDate, setModalInboundDate] = useState("");
+  const [modalWarehouse, setModalWarehouse] = useState("");
+  const [modalLocation, setModalLocation] = useState("");
+  const [modalInspector, setModalInspector] = useState("");
+  const [modalManager, setModalManager] = useState("");
+  const [modalMemo, setModalMemo] = useState("");
+  const [selectedItems, setSelectedItems] = useState<SelectedSourceItem[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // 소스 데이터
+  const [sourceKeyword, setSourceKeyword] = useState("");
+  const [sourceLoading, setSourceLoading] = useState(false);
+  const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrderSource[]>([]);
+  const [shipments, setShipments] = useState<ShipmentSource[]>([]);
+  const [items, setItems] = useState<ItemSource[]>([]);
+  const [warehouses, setWarehouses] = useState<WarehouseOption[]>([]);
+
+  // 소스 데이터 페이징
+  const [sourcePage, setSourcePage] = useState(1);
+  const [sourcePageSize, setSourcePageSize] = useState(20);
+  const [sourceTotalCount, setSourceTotalCount] = useState(0);
+
+  // 구매관리 division 코드 (라벨 기준 조회)
+  const [purchaseDivisionCode, setPurchaseDivisionCode] = useState<string>("");
+
+  // 구매관리 division 코드 로드
+  useEffect(() => {
+    // division 카테고리에서 "구매관리" 라벨의 코드 조회
+    apiClient.get("/table-categories/item_info/division/values").then((res) => {
+      const vals = res.data?.data || [];
+      const found = vals.find((v: any) => (v.value_label || v.label) === "구매관리");
+      if (found) setPurchaseDivisionCode(found.value_code || found.code);
+    }).catch(() => {});
+  }, []);
+
+  // 목록 조회
+  const fetchList = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string | undefined> = {};
+      for (const f of searchFilters) {
+        if (!f.value) continue;
+        if (f.columnName === "inbound_type") params.inbound_type = f.value;
+        else if (f.columnName === "inbound_status") params.inbound_status = f.value;
+        else if (f.columnName === "inbound_date" && f.operator === "between") {
+          const [from, to] = f.value.split("~").map((s) => s.trim());
+          if (from) params.date_from = from;
+          if (to) params.date_to = to;
+        } else {
+          params.search_keyword = f.value;
+        }
+      }
+      const res = await getReceivingList(params);
+      if (res.success) setData(res.data);
+    } catch {
+      // 에러 무시
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchList();
+  }, [fetchList]);
+
+  // 창고 목록 로드
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await getReceivingWarehouses();
+        if (res.success) setWarehouses(res.data);
+      } catch {
+        // ignore
+      }
+    })();
+  }, []);
+
+  // 필터 + 정렬 적용된 데이터 -> 그룹핑
+  const filteredGroups = useMemo(() => {
+    // 1차: inbound_number 기준 그룹핑
+    const allGroups: Record<string, { master: InboundItem; details: InboundItem[] }> = {};
+    for (const row of data) {
+      const key = row.inbound_number || "_no_inbound";
+      if (!allGroups[key]) {
+        allGroups[key] = { master: row, details: [] };
+      }
+      allGroups[key].details.push(row);
+    }
+
+    // 마스터 필터 / 디테일 필터 분리
+    const masterFilters: Record<string, Set<string>> = {};
+    const detailFilters: Record<string, Set<string>> = {};
+    for (const [colKey, values] of Object.entries(headerFilters)) {
+      if (values.size === 0) continue;
+      if (MASTER_KEYS.has(colKey)) masterFilters[colKey] = values;
+      else detailFilters[colKey] = values;
+    }
+
+    // 2차: 마스터 필터 적용 (그룹 단위)
+    let entries = Object.entries(allGroups);
+    if (Object.keys(masterFilters).length > 0) {
+      entries = entries.filter(([, group]) =>
+        Object.entries(masterFilters).every(([colKey, values]) => {
+          let raw = (group.master as any)?.[colKey] ?? "";
+          // 입고유형은 코드→라벨 변환된 값으로 비교
+          if (colKey === "inbound_type") raw = resolveInboundType(String(raw));
+          return values.has(String(raw));
+        })
+      );
+    }
+
+    // 3차: 디테일 필터 적용 (행 단위)
+    if (Object.keys(detailFilters).length > 0) {
+      entries = entries
+        .map(([inboundNo, group]) => {
+          const filtered = group.details.filter((row) =>
+            Object.entries(detailFilters).every(([colKey, values]) => {
+              let cellVal = (row as any)[colKey] != null ? String((row as any)[colKey]) : "";
+              if (colKey === "source_table") cellVal = SOURCE_TABLE_LABEL[cellVal] || cellVal;
+              return values.has(cellVal);
+            })
+          );
+          return [inboundNo, { ...group, details: filtered }] as [string, typeof group];
+        })
+        .filter(([, group]) => group.details.length > 0);
+    }
+
+    // 4차: 정렬
+    if (sortState) {
+      const { key, direction } = sortState;
+      if (MASTER_KEYS.has(key)) {
+        entries.sort(([, a], [, b]) => {
+          let av: any = (a.master as any)?.[key] ?? "";
+          let bv: any = (b.master as any)?.[key] ?? "";
+          if (key === "inbound_type") { av = resolveInboundType(String(av)); bv = resolveInboundType(String(bv)); }
+          const na = Number(av); const nb = Number(bv);
+          if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+          return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+        });
+      } else {
+        entries.forEach(([, group]) => {
+          group.details.sort((a, b) => {
+            const av = (a as any)[key] ?? "";
+            const bv = (b as any)[key] ?? "";
+            const na = Number(av); const nb = Number(bv);
+            if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
+            return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+          });
+        });
+      }
+    }
+
+    return Object.fromEntries(entries);
+  }, [data, headerFilters, sortState]);
+
+  // 마스터 컬럼별 고유값 (마스터 헤더 필터용)
+  const masterUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    const seenMasters = new Map<string, InboundItem>();
+    data.forEach((row) => {
+      if (row.inbound_number && !seenMasters.has(row.inbound_number)) {
+        seenMasters.set(row.inbound_number, row);
+      }
+    });
+    const masters = Array.from(seenMasters.values());
+    for (const col of [{ key: "inbound_number", label: "입고번호" }, ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label }))]) {
+      const values = new Set<string>();
+      masters.forEach((m) => {
+        let val = (m as any)?.[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "inbound_type") val = resolveInboundType(String(val));
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 디테일 컬럼별 고유값 (디테일 서브헤더 필터용)
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of DETAIL_HEADER_COLS) {
+      const values = new Set<string>();
+      data.forEach((row) => {
+        let val = (row as any)[col.key];
+        if (val !== null && val !== undefined && val !== "") {
+          if (col.key === "source_table") val = SOURCE_TABLE_LABEL[val] || val;
+          values.add(String(val));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [data]);
+
+  // 헤더 필터 토글/초기화
+  const toggleHeaderFilter = (colKey: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      const set = new Set(next[colKey] || []);
+      if (set.has(value)) set.delete(value); else set.add(value);
+      if (set.size === 0) delete next[colKey]; else next[colKey] = set;
+      return next;
+    });
+  };
+
+  const clearHeaderFilter = (colKey: string) => {
+    setHeaderFilters((prev) => {
+      const next = { ...prev };
+      delete next[colKey];
+      return next;
+    });
+  };
+
+  const handleSort = (key: string) => {
+    setSortState((prev) =>
+      prev?.key === key
+        ? prev.direction === "asc" ? { key, direction: "desc" } : null
+        : { key, direction: "asc" }
+    );
+  };
+
+  // 삭제
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) return;
+    if (!confirm(`선택한 ${checkedIds.length}건을 삭제하시겠습니까?`)) return;
+    for (const id of checkedIds) {
+      await deleteReceiving(id);
+    }
+    setCheckedIds([]);
+    fetchList();
+  };
+
+  // --- 등록 모달 ---
+
+  // 소스 데이터 로드 함수
+  const loadSourceData = useCallback(
+    async (type: string, keyword?: string, pageOverride?: number) => {
+      setSourceLoading(true);
+      try {
+        const params = {
+          keyword: keyword || undefined,
+          page: pageOverride ?? sourcePage,
+          pageSize: sourcePageSize,
+        };
+        if (type === "구매입고") {
+          const res = await getPurchaseOrderSources(params);
+          if (res.success) {
+            setPurchaseOrders(res.data);
+            setSourceTotalCount(res.totalCount || 0);
+          }
+        } else if (type === "반품입고") {
+          const res = await getShipmentSources(params);
+          if (res.success) {
+            setShipments(res.data);
+            setSourceTotalCount(res.totalCount || 0);
+          }
+        } else {
+          const res = await getItemSources({ ...params, division: purchaseDivisionCode || undefined });
+          if (res.success) {
+            setItems(res.data);
+            setSourceTotalCount(res.totalCount || 0);
+          }
+        }
+      } catch {
+        // ignore
+      } finally {
+        setSourceLoading(false);
+      }
+    },
+    [sourcePage, sourcePageSize]
+  );
+
+  const openRegisterModal = async () => {
+    const defaultType = "구매입고";
+    setModalInboundType(defaultType);
+    setModalInboundDate(new Date().toISOString().split("T")[0]);
+    setModalWarehouse("");
+    setModalLocation("");
+    setModalInspector("");
+    setModalManager("");
+    setModalMemo("");
+    setSelectedItems([]);
+    setSourceKeyword("");
+    setPurchaseOrders([]);
+    setShipments([]);
+    setItems([]);
+    setSourcePage(1);
+    setSourceTotalCount(0);
+    setIsModalOpen(true);
+
+    // 입고번호 생성 + 발주 데이터 동시 로드
+    try {
+      const [numRes] = await Promise.all([
+        generateReceivingNumber(),
+        loadSourceData(defaultType, undefined, 1),
+      ]);
+      if (numRes.success) setModalInboundNo(numRes.data);
+    } catch {
+      setModalInboundNo("");
+    }
+  };
+
+  // 검색 버튼 클릭 시
+  const searchSourceData = useCallback(async () => {
+    setSourcePage(1);
+    await loadSourceData(modalInboundType, sourceKeyword || undefined, 1);
+  }, [modalInboundType, sourceKeyword, loadSourceData]);
+
+  // 입고유형 변경 시 소스 데이터 자동 리로드
+  const handleInboundTypeChange = useCallback(
+    (type: string) => {
+      setModalInboundType(type);
+      setSourceKeyword("");
+      setPurchaseOrders([]);
+      setShipments([]);
+      setItems([]);
+      setSelectedItems([]);
+      setSourcePage(1);
+      setSourceTotalCount(0);
+      loadSourceData(type, undefined, 1);
+    },
+    [loadSourceData]
+  );
+
+  // 발주 품목 추가
+  const addPurchaseOrder = (po: PurchaseOrderSource) => {
+    const key = `po-${po.id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        inbound_type: "구매입고",
+        reference_number: po.purchase_no,
+        supplier_code: po.supplier_code,
+        supplier_name: po.supplier_name,
+        item_number: po.item_code,
+        item_name: po.item_name,
+        spec: po.spec || "",
+        material: po.material || "",
+        unit: "EA",
+        inbound_qty: po.remain_qty,
+        unit_price: po.unit_price,
+        total_amount: po.remain_qty * po.unit_price,
+        source_table: po.source_table || "purchase_order_mng",
+        source_id: po.id,
+      },
+    ]);
+  };
+
+  // 출하 품목 추가
+  const addShipment = (sh: ShipmentSource) => {
+    const key = `sh-${sh.detail_id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        inbound_type: "반품입고",
+        reference_number: sh.instruction_no,
+        supplier_code: "",
+        supplier_name: sh.partner_id,
+        item_number: sh.item_code,
+        item_name: sh.item_name,
+        spec: sh.spec || "",
+        material: sh.material || "",
+        unit: "EA",
+        inbound_qty: sh.ship_qty,
+        unit_price: 0,
+        total_amount: 0,
+        source_table: "shipment_instruction_detail",
+        source_id: String(sh.detail_id),
+      },
+    ]);
+  };
+
+  // 품목 추가
+  const addItem = (item: ItemSource) => {
+    const key = `item-${item.id}`;
+    if (selectedItems.some((s) => s.key === key)) return;
+    setSelectedItems((prev) => [
+      ...prev,
+      {
+        key,
+        inbound_type: "기타입고",
+        reference_number: item.item_number,
+        supplier_code: "",
+        supplier_name: "",
+        item_number: item.item_number,
+        item_name: item.item_name,
+        spec: item.spec || "",
+        material: item.material || "",
+        unit: item.unit || "EA",
+        inbound_qty: 0,
+        unit_price: item.standard_price,
+        total_amount: 0,
+        source_table: "item_info",
+        source_id: item.id,
+      },
+    ]);
+  };
+
+  // 선택 품목 수량 변경
+  const updateItemQty = (key: string, qty: number) => {
+    setSelectedItems((prev) =>
+      prev.map((item) =>
+        item.key === key
+          ? { ...item, inbound_qty: qty, total_amount: qty * item.unit_price }
+          : item
+      )
+    );
+  };
+
+  // 선택 품목 단가 변경
+  const updateItemPrice = (key: string, price: number) => {
+    setSelectedItems((prev) =>
+      prev.map((item) =>
+        item.key === key
+          ? { ...item, unit_price: price, total_amount: item.inbound_qty * price }
+          : item
+      )
+    );
+  };
+
+  // 선택 품목 삭제
+  const removeItem = (key: string) => {
+    setSelectedItems((prev) => prev.filter((item) => item.key !== key));
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (selectedItems.length === 0) {
+      alert("입고할 품목을 선택해주세요.");
+      return;
+    }
+    if (!modalInboundDate) {
+      alert("입고일을 입력해주세요.");
+      return;
+    }
+
+    const zeroQtyItems = selectedItems.filter((i) => !i.inbound_qty || i.inbound_qty <= 0);
+    if (zeroQtyItems.length > 0) {
+      alert("입고수량이 0인 품목이 있습니다. 수량을 입력해주세요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const res = await createReceiving({
+        inbound_number: modalInboundNo,
+        inbound_date: modalInboundDate,
+        warehouse_code: modalWarehouse || undefined,
+        location_code: modalLocation || undefined,
+        inspector: modalInspector || undefined,
+        manager: modalManager || undefined,
+        memo: modalMemo || undefined,
+        items: selectedItems.map((item) => ({
+          inbound_type: item.inbound_type,
+          reference_number: item.reference_number,
+          supplier_code: item.supplier_code,
+          supplier_name: item.supplier_name,
+          item_number: item.item_number,
+          item_name: item.item_name,
+          spec: item.spec,
+          material: item.material,
+          unit: item.unit,
+          inbound_qty: item.inbound_qty,
+          unit_price: item.unit_price,
+          total_amount: item.total_amount,
+          source_table: item.source_table,
+          source_id: item.source_id,
+          inbound_status: "입고완료",
+          inspection_status: "대기",
+        })),
+      });
+
+      if (res.success) {
+        alert(res.message || "입고 등록 완료");
+        setIsModalOpen(false);
+        fetchList();
+      }
+    } catch {
+      alert("입고 등록 중 오류가 발생했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 합계 계산
+  const totalSummary = useMemo(() => {
+    return {
+      count: selectedItems.length,
+      qty: selectedItems.reduce((sum, i) => sum + (i.inbound_qty || 0), 0),
+      amount: selectedItems.reduce((sum, i) => sum + (i.total_amount || 0), 0),
+    };
+  }, [selectedItems]);
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>물류관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">입고관리</span>
+      </div>
+
+      {/* 검색 영역 */}
+      <DynamicSearchFilter
+        tableName="inbound_mng"
+        filterId="c16-receiving"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={data.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button size="sm" onClick={openRegisterModal} className="h-9">
+              <Plus className="mr-1 h-4 w-4" />
+              입고 등록
+            </Button>
+            <div className="h-4 w-px bg-border" />
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={handleDelete}
+              disabled={checkedIds.length === 0}
+              className="h-9 text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+            >
+              <Trash2 className="mr-1 h-4 w-4" />
+              삭제 ({checkedIds.length})
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 입고 목록 테이블 (마스터-디테일 그룹) */}
+      <div className="flex-1 overflow-hidden rounded-lg border border-border bg-card">
+        <div className="flex items-center justify-between border-b bg-muted/50 px-4 py-2.5">
+          <div className="flex items-center gap-2">
+            <h3 className="text-[13px] font-bold">입고 목록</h3>
+            <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+              {Object.keys(filteredGroups).length}건
+            </span>
+          </div>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="h-[calc(100%-44px)] overflow-auto">
+          <Table style={{ minWidth: `${216 + visibleMasterLayout.length * 120}px` }}>
+            <colgroup>
+              <col style={{ width: "40px" }} />
+              <col style={{ width: "36px" }} />
+              <col style={{ width: "140px" }} />
+              {visibleMasterLayout.map((col) => (
+                <col key={col.key} style={{ width: ts.getWidth(col.key) ? `${ts.getWidth(col.key)}px` : undefined }} />
+              ))}
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow className="bg-muted hover:bg-muted">
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                    const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    setCheckedIds(allChecked ? [] : allFilteredIds);
+                  }}
+                >
+                  <Checkbox
+                    checked={(() => {
+                      const allFilteredIds = Object.values(filteredGroups).flatMap((g) => g.details.map((d) => d.id));
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
+                  />
+                </TableHead>
+                <TableHead />
+                {/* 입고번호 (별도 컬럼) */}
+                <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                  <div className="inline-flex items-center gap-1">
+                    <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort("inbound_number")}>
+                      <span className="truncate">입고번호</span>
+                      {sortState?.key === "inbound_number" && (
+                        sortState.direction === "asc"
+                          ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                          : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                      )}
+                    </div>
+                    {(masterUniqueValues["inbound_number"] || []).length > 0 && (
+                      <HeaderFilterPopover
+                        colKey="inbound_number" colLabel="입고번호"
+                        uniqueValues={masterUniqueValues["inbound_number"] || []}
+                        filterValues={headerFilters["inbound_number"] || new Set<string>()}
+                        onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                      />
+                    )}
+                  </div>
+                </TableHead>
+                {/* 마스터 필드 헤더 (ts.visibleColumns 순서) */}
+                {visibleMasterLayout.map((col) => (
+                  <TableHead key={col.key} colSpan={col.colSpan} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none">
+                    <div className="inline-flex items-center gap-1">
+                      <div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
+                        <span className="truncate">{col.label}</span>
+                        {sortState?.key === col.key && (
+                          sortState.direction === "asc"
+                            ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                            : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                        )}
+                      </div>
+                      {(masterUniqueValues[col.key] || []).length > 0 && (
+                        <HeaderFilterPopover
+                          colKey={col.key} colLabel={col.label}
+                          uniqueValues={masterUniqueValues[col.key] || []}
+                          filterValues={headerFilters[col.key] || new Set<string>()}
+                          onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                        />
+                      )}
+                    </div>
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
+                  </TableCell>
+                </TableRow>
+              ) : Object.keys(filteredGroups).length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <Inbox className="h-8 w-8 opacity-30" />
+                      <span className="text-sm">등록된 입고 내역이 없어요</span>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                Object.entries(filteredGroups).map(([inboundNo, group]) => {
+                  const isExpanded = expandedOrders.has(inboundNo);
+                  const detailIds = group.details.map((d) => d.id);
+                  const allDetailChecked = detailIds.length > 0 && detailIds.every((id) => checkedIds.includes(id));
+                  const someDetailChecked = detailIds.some((id) => checkedIds.includes(id));
+                  const master = group.master;
+                  return (
+                    <React.Fragment key={inboundNo}>
+                      {/* 마스터 행 */}
+                      <TableRow
+                        style={{ borderTop: "2px solid hsl(var(--border))" }}
+                        className={cn(
+                          "cursor-pointer border-l-[3px] border-l-transparent font-semibold tree-master-row",
+                          allDetailChecked && "border-l-primary bg-primary/5"
+                        )}
+                        onClick={() => {
+                          if (expandedOrders.has(inboundNo)) {
+                            setClosingOrders((prev) => new Set(prev).add(inboundNo));
+                            setTimeout(() => {
+                              setExpandedOrders((prev) => { const next = new Set(prev); next.delete(inboundNo); return next; });
+                              setClosingOrders((prev) => { const next = new Set(prev); next.delete(inboundNo); return next; });
+                            }, 200);
+                          } else {
+                            setExpandedOrders((prev) => new Set(prev).add(inboundNo));
+                          }
+                        }}
+                      >
+                        <TableCell
+                          className="text-center cursor-pointer"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setCheckedIds((prev) => {
+                              if (allDetailChecked) return prev.filter((id) => !detailIds.includes(id));
+                              return [...new Set([...prev, ...detailIds])];
+                            });
+                          }}
+                        >
+                          <Checkbox
+                            checked={allDetailChecked}
+                            data-state={someDetailChecked && !allDetailChecked ? "indeterminate" : undefined}
+                            onCheckedChange={() => {}}
+                          />
+                        </TableCell>
+                        <TableCell className="text-center">
+                          {isExpanded
+                            ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            : <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          }
+                        </TableCell>
+                        {/* 입고번호 */}
+                        <TableCell className="font-mono whitespace-nowrap">
+                          {inboundNo}
+                          <span className="ml-1.5 text-xs font-normal text-muted-foreground opacity-60">({group.details.length})</span>
+                        </TableCell>
+                        {/* 마스터 필드 (ts.visibleColumns 순서) */}
+                        {visibleMasterLayout.map((col) => {
+                          switch (col.key) {
+                            case "inbound_type": return (
+                              <TableCell key={col.key} className="text-[13px]">
+                                <Badge variant={getTypeVariant(resolveInboundType(master.inbound_type))} className="text-[11px]">
+                                  {resolveInboundType(master.inbound_type)}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "inbound_date": return (
+                              <TableCell key={col.key} className="text-[13px] whitespace-nowrap">
+                                {master.inbound_date ? new Date(master.inbound_date).toLocaleDateString("ko-KR") : "-"}
+                              </TableCell>
+                            );
+                            case "reference_number": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.reference_number || ""}</span>
+                              </TableCell>
+                            );
+                            case "supplier_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.supplier_name || ""}</span>
+                              </TableCell>
+                            );
+                            case "warehouse_name": return (
+                              <TableCell key={col.key} className="text-[13px] truncate max-w-0">
+                                <span className="block truncate">{master.warehouse_name || master.warehouse_code || ""}</span>
+                              </TableCell>
+                            );
+                            case "inbound_status": return (
+                              <TableCell key={col.key} className="text-[13px]">
+                                <Badge variant={getStatusVariant(master.inbound_status)} className="text-[11px]">
+                                  {master.inbound_status || "-"}
+                                </Badge>
+                              </TableCell>
+                            );
+                            case "memo": return (
+                              <TableCell key={col.key} className="text-muted-foreground text-[13px]">
+                                <span className="block truncate max-w-[110px]">{master.memo || ""}</span>
+                              </TableCell>
+                            );
+                            default: return <TableCell key={col.key} className="text-[13px]">{(master as any)[col.key] ?? ""}</TableCell>;
+                          }
+                        })}
+                      </TableRow>
+
+                      {/* 디테일 서브 헤더 (펼쳤을 때만) */}
+                      {isExpanded && (
+                        <TableRow
+                          className={cn(
+                            "border-l-[3px] border-l-primary/30 bg-muted/60",
+                            closingOrders.has(inboundNo) ? "tree-detail-row-closing" : "tree-detail-row",
+                          )}
+                        >
+                          <TableCell />
+                          <TableCell />
+                          <TableCell />
+                          {visibleDetailCols.map((col) => {
+                            const isRight = ["inbound_qty", "unit_price", "total_amount"].includes(col.key);
+                            const isSorted = sortState?.key === col.key;
+                            const uniqueVals = Array.from(new Set(
+                              group.details.map((d) => {
+                                let v = (d as any)[col.key];
+                                if (col.key === "source_table") v = SOURCE_TABLE_LABEL[v] || v;
+                                return v;
+                              }).filter((v: any) => v != null && v !== "").map(String)
+                            )).sort();
+                            const filterVals = headerFilters[col.key] || new Set<string>();
+                            return (
+                              <TableCell
+                                key={col.key}
+                                className={cn(
+                                  "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 select-none",
+                                  isRight && "text-right",
+                                )}
+                              >
+                                <div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
+                                  <div
+                                    className="flex items-center gap-1 cursor-pointer min-w-0"
+                                    onClick={() => handleSort(col.key)}
+                                  >
+                                    <span className="truncate">{col.label}</span>
+                                    {isSorted && (
+                                      sortState!.direction === "asc"
+                                        ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+                                        : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+                                    )}
+                                  </div>
+                                  {uniqueVals.length > 0 && (
+                                    <HeaderFilterPopover
+                                      colKey={col.key} colLabel={col.label}
+                                      uniqueValues={uniqueVals} filterValues={filterVals}
+                                      onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
+                                    />
+                                  )}
+                                </div>
+                              </TableCell>
+                            );
+                          })}
+                        </TableRow>
+                      )}
+
+                      {/* 디테일 행 (펼쳤을 때만) */}
+                      {isExpanded && group.details.map((row, detailIdx) => {
+                        const isClosing = closingOrders.has(inboundNo);
+                        const isChecked = checkedIds.includes(row.id);
+                        return (
+                          <TableRow
+                            key={`${row.id}-${detailIdx}`}
+                            className={cn(
+                              "cursor-pointer border-l-[3px] border-l-transparent transition-all",
+                              isClosing ? "tree-detail-row-closing" : "tree-detail-row",
+                              isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
+                            )}
+                            onClick={() => {
+                              setCheckedIds((prev) =>
+                                prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                              );
+                            }}
+                          >
+                            <TableCell
+                              className="text-center cursor-pointer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                            >
+                              <Checkbox checked={isChecked} onCheckedChange={() => {}} />
+                            </TableCell>
+                            <TableCell className="relative">
+                              <div className="tree-connector" data-last={detailIdx === group.details.length - 1 ? "true" : "false"} />
+                            </TableCell>
+                            <TableCell />
+                            {visibleDetailCols.map((col) => {
+                              switch (col.key) {
+                                case "source_table": return <TableCell key={col.key} className="text-[13px]">{row.source_table ? SOURCE_TABLE_LABEL[row.source_table] || row.source_table : "-"}</TableCell>;
+                                case "item_number": return <TableCell key={col.key} className="font-mono text-[13px]">{row.item_number || ""}</TableCell>;
+                                case "item_name": return <TableCell key={col.key} className="text-[13px] max-w-[160px]"><span className="block truncate" title={row.item_name || ""}>{row.item_name || ""}</span></TableCell>;
+                                case "spec": return <TableCell key={col.key} className="text-[13px] text-muted-foreground">{row.spec || ""}</TableCell>;
+                                case "inbound_qty": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.inbound_qty ? Number(row.inbound_qty).toLocaleString() : ""}</TableCell>;
+                                case "unit_price": return <TableCell key={col.key} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>;
+                                case "total_amount": return <TableCell key={col.key} className="text-right font-mono text-[13px] font-semibold">{row.total_amount ? Number(row.total_amount).toLocaleString() : ""}</TableCell>;
+                                default: return <TableCell key={col.key} className="text-[13px]">{(row as any)[col.key] ?? ""}</TableCell>;
+                              }
+                            })}
+                          </TableRow>
+                        );
+                      })}
+                    </React.Fragment>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      {/* 입고 등록 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="sm:max-w-[1600px] w-[95vw] h-[90vh] p-0 flex flex-col overflow-hidden">
+          <DialogHeader className="shrink-0 px-6 pt-4 pb-2 border-b">
+            <DialogTitle>입고 등록</DialogTitle>
+            <DialogDescription>
+              입고유형을 선택하고, 좌측에서 근거 데이터를 검색하여 추가해 주세요.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-hidden flex flex-col">
+
+          {/* 입고유형 선택 */}
+          <div className="flex items-center gap-4 border-b bg-muted/30 px-6 py-2.5">
+            <Label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide">입고유형</Label>
+            <Select value={modalInboundType} onValueChange={handleInboundTypeChange}>
+              <SelectTrigger className="h-9 w-[160px] text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {INBOUND_TYPES.map((t) => (
+                  <SelectItem key={t.value} value={t.value}>
+                    {t.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <span className="text-muted-foreground ml-auto text-xs italic">
+              {modalInboundType === "구매입고"
+                ? "발주 데이터에서 입고 처리합니다."
+                : modalInboundType === "반품입고"
+                  ? "출하 데이터에서 반품 입고 처리합니다."
+                  : "품목 데이터를 직접 선택하여 입고 처리합니다."}
+            </span>
+          </div>
+
+          {/* 메인 콘텐츠: 좌측 소스 데이터 / 우측 선택 품목 */}
+          <div className="flex-1 overflow-hidden">
+            <ResizablePanelGroup direction="horizontal">
+              {/* 좌측: 근거 데이터 검색 */}
+              <ResizablePanel defaultSize={60} minSize={35}>
+                <div className="flex h-full flex-col">
+                  {/* 소스 검색 바 */}
+                  <div className="flex items-center gap-2 border-b px-4 py-2.5">
+                    <Input
+                      placeholder={
+                        modalInboundType === "구매입고"
+                          ? "발주번호 / 품목명 / 공급처"
+                          : modalInboundType === "반품입고"
+                            ? "출하번호 / 품목명"
+                            : "품목번호 / 품목명"
+                      }
+                      value={sourceKeyword}
+                      onChange={(e) => setSourceKeyword(e.target.value)}
+                      onKeyDown={(e) => e.key === "Enter" && searchSourceData()}
+                      className="h-9 flex-1 text-xs"
+                    />
+                    <Button size="sm" onClick={searchSourceData} className="h-9">
+                      <Search className="mr-1 h-3 w-3" />
+                      검색
+                    </Button>
+                  </div>
+
+                  {/* 소스 데이터 테이블 */}
+                  <div className="flex-1 overflow-auto">
+                    <div className="flex items-center gap-2 px-4 py-2.5 bg-muted/50 border-b">
+                      <h4 className="text-[13px] font-bold">
+                        {modalInboundType === "구매입고"
+                          ? "미입고 발주 목록"
+                          : modalInboundType === "반품입고"
+                            ? "출하 목록"
+                            : "품목 목록"}
+                      </h4>
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {sourceTotalCount}건
+                      </span>
+                    </div>
+
+                    {sourceLoading ? (
+                      <div className="flex h-40 items-center justify-center">
+                        <Loader2 className="h-5 w-5 animate-spin" />
+                      </div>
+                    ) : modalInboundType === "구매입고" ? (
+                      <SourcePurchaseOrderTable
+                        data={purchaseOrders}
+                        onAdd={addPurchaseOrder}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    ) : modalInboundType === "반품입고" ? (
+                      <SourceShipmentTable
+                        data={shipments}
+                        onAdd={addShipment}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    ) : (
+                      <SourceItemTable
+                        data={items}
+                        onAdd={addItem}
+                        selectedKeys={selectedItems.map((s) => s.key)}
+                      />
+                    )}
+                  </div>
+
+                  {/* 페이징 */}
+                  {sourceTotalCount > 0 && (
+                    <div className="flex shrink-0 items-center justify-between border-t bg-muted/30 px-4 py-2">
+                      <div className="flex items-center gap-2">
+                        <span className="text-muted-foreground text-[11px]">표시:</span>
+                        <Input
+                          type="number"
+                          min={1}
+                          max={500}
+                          value={sourcePageSize}
+                          onChange={(e) => {
+                            const v = parseInt(e.target.value, 10);
+                            if (v > 0) {
+                              setSourcePageSize(v);
+                              setSourcePage(1);
+                              loadSourceData(modalInboundType, sourceKeyword || undefined, 1);
+                            }
+                          }}
+                          className="h-7 w-[60px] text-center text-[11px]"
+                        />
+                        <span className="text-muted-foreground text-[11px]">
+                          총 {sourceTotalCount}건
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => { setSourcePage(1); loadSourceData(modalInboundType, sourceKeyword || undefined, 1); }}>
+                          <ChevronsLeft className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => { const p = sourcePage - 1; setSourcePage(p); loadSourceData(modalInboundType, sourceKeyword || undefined, p); }}>
+                          <ChevronLeft className="h-3.5 w-3.5" />
+                        </Button>
+                        <span className="px-2 text-xs font-medium">{sourcePage} / {Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize))}</span>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                          onClick={() => { const p = sourcePage + 1; setSourcePage(p); loadSourceData(modalInboundType, sourceKeyword || undefined, p); }}>
+                          <ChevronRight className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                          onClick={() => { const p = Math.ceil(sourceTotalCount / sourcePageSize); setSourcePage(p); loadSourceData(modalInboundType, sourceKeyword || undefined, p); }}>
+                          <ChevronsRight className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle onPointerDown={(e) => e.stopPropagation()} />
+
+              {/* 우측: 입고 정보 + 선택 품목 */}
+              <ResizablePanel defaultSize={40} minSize={25}>
+                <div className="flex h-full flex-col">
+                  {/* 입고 정보 입력 */}
+                  <div className="space-y-3 border-b bg-muted/30 px-4 py-3">
+                    <h4 className="text-[13px] font-bold text-foreground">입고 정보</h4>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">입고번호</Label>
+                        <Input
+                          value={modalInboundNo}
+                          readOnly
+                          className="bg-muted h-9 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">
+                          입고일 <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                          type="date"
+                          value={modalInboundDate}
+                          onChange={(e) => setModalInboundDate(e.target.value)}
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">창고</Label>
+                        <Select value={modalWarehouse} onValueChange={setModalWarehouse}>
+                          <SelectTrigger className="h-9 text-xs">
+                            <SelectValue placeholder="창고 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {warehouses.map((w) => (
+                              <SelectItem key={w.warehouse_code} value={w.warehouse_code}>
+                                {w.warehouse_name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">위치</Label>
+                        <Input
+                          value={modalLocation}
+                          onChange={(e) => setModalLocation(e.target.value)}
+                          placeholder="위치 입력"
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">검수자</Label>
+                        <Input
+                          value={modalInspector}
+                          onChange={(e) => setModalInspector(e.target.value)}
+                          placeholder="검수자"
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-[11px] font-semibold text-muted-foreground">담당자</Label>
+                        <Input
+                          value={modalManager}
+                          onChange={(e) => setModalManager(e.target.value)}
+                          placeholder="담당자"
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                      <div className="col-span-2">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">메모</Label>
+                        <Input
+                          value={modalMemo}
+                          onChange={(e) => setModalMemo(e.target.value)}
+                          placeholder="메모"
+                          className="h-9 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 선택된 품목 테이블 */}
+                  <div className="flex-1 overflow-auto">
+                    <div className="flex items-center gap-2 border-b bg-muted/50 px-4 py-2.5">
+                      <h4 className="text-[13px] font-bold">입고 처리 품목</h4>
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {selectedItems.length}건
+                      </span>
+                    </div>
+
+                    {selectedItems.length === 0 ? (
+                      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+                        <Inbox className="h-8 w-8 opacity-30" />
+                        <p className="text-xs font-medium">좌측에서 품목을 선택하여 추가해 주세요</p>
+                      </div>
+                    ) : (
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>
+                            <TableHead className="w-[80px] p-2 text-right">
+                              수량
+                            </TableHead>
+                            <TableHead className="w-[80px] p-2 text-right">
+                              단가
+                            </TableHead>
+                            <TableHead className="w-[90px] p-2 text-right">
+                              금액
+                            </TableHead>
+                            <TableHead className="w-[30px] p-2" />
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {selectedItems.map((item, idx) => (
+                            <TableRow key={item.key} className="text-xs">
+                              <TableCell className="p-2 text-center">
+                                {idx + 1}
+                              </TableCell>
+                              <TableCell className="max-w-[180px] p-2">
+                                <div className="flex flex-col">
+                                  <span className="truncate font-medium" title={item.item_name}>
+                                    {item.item_name}
+                                  </span>
+                                  <span className="text-muted-foreground truncate text-[10px]" title={`${item.item_number}${item.spec ? ` | ${item.spec}` : ""}`}>
+                                    {item.item_number}
+                                    {item.spec ? ` | ${item.spec}` : ""}
+                                  </span>
+                                </div>
+                              </TableCell>
+                              <TableCell className="p-2 text-[11px]">
+                                {item.reference_number}
+                              </TableCell>
+                              <TableCell className="p-2 text-right">
+                                <Input
+                                  type="number"
+                                  value={item.inbound_qty || ""}
+                                  onChange={(e) =>
+                                    updateItemQty(
+                                      item.key,
+                                      Number(e.target.value) || 0
+                                    )
+                                  }
+                                  className="h-7 w-[70px] text-right text-xs"
+                                  min={0}
+                                />
+                              </TableCell>
+                              <TableCell className="p-2 text-right">
+                                <Input
+                                  type="number"
+                                  value={item.unit_price || ""}
+                                  onChange={(e) =>
+                                    updateItemPrice(
+                                      item.key,
+                                      Number(e.target.value) || 0
+                                    )
+                                  }
+                                  className="h-7 w-[70px] text-right text-xs"
+                                  min={0}
+                                />
+                              </TableCell>
+                              <TableCell className="p-2 text-right text-[13px] font-semibold">
+                                {item.total_amount.toLocaleString()}
+                              </TableCell>
+                              <TableCell className="p-2 text-center">
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-6 w-6"
+                                  onClick={() => removeItem(item.key)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+
+          </div>
+          <DialogFooter className="shrink-0 border-t px-0 py-0">
+            <div className="flex w-full items-center justify-between px-6 py-2.5">
+              <div className="text-muted-foreground text-xs">
+                {selectedItems.length > 0 ? (
+                  <span className="flex items-center gap-3">
+                    <span className="font-semibold text-foreground">{totalSummary.count}건</span>
+                    <span>수량 합계: <span className="font-medium text-foreground">{totalSummary.qty.toLocaleString()}</span></span>
+                    <span>금액 합계: <span className="font-medium text-foreground">{totalSummary.amount.toLocaleString()}원</span></span>
+                  </span>
+                ) : (
+                  "품목을 추가해 주세요"
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsModalOpen(false)}
+                  className="h-9 text-sm"
+                >
+                  취소
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={saving || selectedItems.length === 0}
+                  className="h-9 text-sm"
+                >
+                  {saving ? (
+                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="mr-1 h-4 w-4" />
+                  )}
+                  저장
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
+
+// --- 소스 데이터 테이블 컴포넌트들 ---
+
+function SourcePurchaseOrderTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: PurchaseOrderSource[];
+  onAdd: (po: PurchaseOrderSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 발주 데이터를 조회해 주세요</p>
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">미입고</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((po, idx) => {
+          const isSelected = selectedKeys.includes(`po-${po.id}`);
+          return (
+            <TableRow
+              key={`${po.source_table || 'po'}-${po.id}-${idx}`}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(po)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">
+                    추가됨
+                  </Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[120px] truncate p-2 font-medium" title={po.purchase_no}>{po.purchase_no}</TableCell>
+              <TableCell className="max-w-[120px] truncate p-2" title={po.supplier_name}>{po.supplier_name}</TableCell>
+              <TableCell className="max-w-[200px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={po.item_name}>{po.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={`${po.item_code}${po.spec ? ` | ${po.spec}` : ""}`}>
+                    {po.item_code}
+                    {po.spec ? ` | ${po.spec}` : ""}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(po.order_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(po.received_qty).toLocaleString()}
+              </TableCell>
+              <TableCell className="p-2 text-right font-semibold text-primary">
+                {Number(po.remain_qty).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+function SourceShipmentTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: ShipmentSource[];
+  onAdd: (sh: ShipmentSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 출하 데이터를 조회해 주세요</p>
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하번호</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하일</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처</TableHead>
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하수량</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((sh) => {
+          const isSelected = selectedKeys.includes(`sh-${sh.detail_id}`);
+          return (
+            <TableRow
+              key={sh.detail_id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(sh)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">
+                    추가됨
+                  </Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[130px] truncate p-2 font-medium" title={sh.instruction_no}>{sh.instruction_no}</TableCell>
+              <TableCell className="p-2">
+                {sh.instruction_date
+                  ? new Date(sh.instruction_date).toLocaleDateString("ko-KR")
+                  : "-"}
+              </TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={sh.partner_id}>{sh.partner_id}</TableCell>
+              <TableCell className="max-w-[200px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={sh.item_name}>{sh.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={`${sh.item_code}${sh.spec ? ` | ${sh.spec}` : ""}`}>
+                    {sh.item_code}
+                    {sh.spec ? ` | ${sh.spec}` : ""}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="p-2 text-right font-semibold">
+                {Number(sh.ship_qty).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+function SourceItemTable({
+  data,
+  onAdd,
+  selectedKeys,
+}: {
+  data: ItemSource[];
+  onAdd: (item: ItemSource) => void;
+  selectedKeys: string[];
+}) {
+  if (data.length === 0) {
+    return (
+      <div className="flex h-32 flex-col items-center justify-center gap-1.5 text-muted-foreground border-2 border-dashed rounded-lg m-4">
+        <Inbox className="h-8 w-8 opacity-30" />
+        <p className="text-xs font-medium">검색 버튼을 눌러 품목 데이터를 조회해 주세요</p>
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10">
+        <TableRow className="bg-muted hover:bg-muted">
+          <TableHead className="w-[40px] p-2" />
+          <TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+          <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((item) => {
+          const isSelected = selectedKeys.includes(`item-${item.id}`);
+          return (
+            <TableRow
+              key={item.id}
+              className={cn(
+                "cursor-pointer text-xs transition-colors",
+                isSelected && "bg-primary/5"
+              )}
+              onClick={() => !isSelected && onAdd(item)}
+            >
+              <TableCell className="p-2 text-center">
+                {isSelected ? (
+                  <Badge className="bg-primary/20 text-primary text-[10px]">
+                    추가됨
+                  </Badge>
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-4 w-4" />
+                )}
+              </TableCell>
+              <TableCell className="max-w-[250px] p-2">
+                <div className="flex flex-col">
+                  <span className="truncate font-medium" title={item.item_name}>{item.item_name}</span>
+                  <span className="text-muted-foreground truncate text-[10px]" title={item.item_number}>
+                    {item.item_number}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={item.spec || "-"}>{item.spec || "-"}</TableCell>
+              <TableCell className="max-w-[100px] truncate p-2" title={item.material || "-"}>{item.material || "-"}</TableCell>
+              <TableCell className="p-2">{item.unit || "-"}</TableCell>
+              <TableCell className="p-2 text-right">
+                {Number(item.standard_price).toLocaleString()}
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/logistics/warehouse/page.tsx b/frontend/app/(main)/COMPANY_9/logistics/warehouse/page.tsx
new file mode 100644
index 00000000..96b3d47e
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/logistics/warehouse/page.tsx
@@ -0,0 +1,1608 @@
+"use client";
+
+/**
+ * 창고정보관리 — 하드코딩 페이지 (Type B 마스터-디테일)
+ *
+ * 좌측: 창고 목록 (warehouse_info)
+ * 우측: 선택 창고의 로케이션 목록 (warehouse_location)
+ *
+ * ★ 하위 위치가 있으면 창고 삭제 불가
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Plus,
+  Trash2,
+  Loader2,
+  Download,
+  MapPin,
+  Building2,
+  Settings2,
+  Layers,
+  Info,
+  Eye,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+
+const WAREHOUSE_TABLE = "warehouse_info";
+
+const WAREHOUSE_COLUMNS = [
+  { key: "warehouse_code", label: "창고코드" },
+  { key: "warehouse_name", label: "창고명" },
+  { key: "warehouse_type", label: "유형" },
+  { key: "manager", label: "관리자" },
+  { key: "status", label: "상태" },
+];
+const LOCATION_TABLE = "warehouse_location";
+
+const getStatusVariant = (
+  status: string
+): "default" | "secondary" | "outline" | "destructive" => {
+  switch (status) {
+    case "사용":
+    case "사용중":
+      return "default";
+    case "미사용":
+      return "secondary";
+    case "폐쇄":
+      return "destructive";
+    default:
+      return "outline";
+  }
+};
+
+const getTypeVariant = (
+  type: string
+): "default" | "secondary" | "outline" => {
+  switch (type) {
+    case "원자재":
+    case "일반":
+      return "default";
+    case "완제품":
+    case "보관":
+      return "secondary";
+    default:
+      return "outline";
+  }
+};
+
+export default function WarehouseManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-warehouse", WAREHOUSE_TABLE, WAREHOUSE_COLUMNS);
+
+  // 좌측: 창고 목록
+  const [warehouses, setWarehouses] = useState<any[]>([]);
+  const [warehouseLoading, setWarehouseLoading] = useState(false);
+  const [warehouseCount, setWarehouseCount] = useState(0);
+  const [selectedWarehouseId, setSelectedWarehouseId] = useState<string | null>(null);
+
+  // 검색 필터
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 로케이션 목록
+  const [locations, setLocations] = useState<any[]>([]);
+  const [locationLoading, setLocationLoading] = useState(false);
+  const [locationCheckedIds, setLocationCheckedIds] = useState<string[]>([]);
+
+  // 모달: 창고 등록/수정
+  const [warehouseModalOpen, setWarehouseModalOpen] = useState(false);
+  const [warehouseEditMode, setWarehouseEditMode] = useState(false);
+  const [warehouseForm, setWarehouseForm] = useState<Record<string, any>>({});
+  const [warehouseSaving, setWarehouseSaving] = useState(false);
+
+  // 모달: 위치 등록/수정
+  const [locationModalOpen, setLocationModalOpen] = useState(false);
+  const [locationEditMode, setLocationEditMode] = useState(false);
+  const [locationForm, setLocationForm] = useState<Record<string, any>>({});
+  const [locationSaving, setLocationSaving] = useState(false);
+
+  // 위치코드 자동 채번
+  const [locNumberingRuleId, setLocNumberingRuleId] = useState<string | null>(null);
+  const [locPreviewCode, setLocPreviewCode] = useState<string | null>(null);
+  const [whNumberingRuleId, setWhNumberingRuleId] = useState<string | null>(null);
+  const [whPreviewCode, setWhPreviewCode] = useState<string | null>(null);
+
+  // 모달: 랙 구조 일괄 등록
+  const [rackModalOpen, setRackModalOpen] = useState(false);
+  const [rackFloor, setRackFloor] = useState("");
+  const [rackZone, setRackZone] = useState("");
+  const [rackConditions, setRackConditions] = useState<
+    { id: string; startRow: number; endRow: number; levels: number }[]
+  >([]);
+  const [rackLocationType, setRackLocationType] = useState("");
+  const [rackStatus, setRackStatus] = useState("");
+  const [rackPreview, setRackPreview] = useState<any[]>([]);
+  const [rackSaving, setRackSaving] = useState(false);
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+  const [locationCategoryOptions, setLocationCategoryOptions] = useState<
+    Record<string, { code: string; label: string }[]>
+  >({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+
+      const whOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["warehouse_type", "status"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${WAREHOUSE_TABLE}/${col}/values`
+          );
+          if (res.data?.success) whOpts[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setCategoryOptions(whOpts);
+
+      const locOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["location_type", "status", "floor", "zone"]) {
+        try {
+          const res = await apiClient.get(
+            `/table-categories/${LOCATION_TABLE}/${col}/values`
+          );
+          if (res.data?.success) locOpts[col] = flatten(res.data.data || []);
+        } catch {
+          /* skip */
+        }
+      }
+      setLocationCategoryOptions(locOpts);
+    };
+    load();
+  }, []);
+
+  // 카테고리 코드→라벨 변환 헬퍼
+  const resolveCategory = useCallback(
+    (
+      optMap: Record<string, { code: string; label: string }[]>,
+      col: string,
+      code: string
+    ) => {
+      if (!code) return "";
+      return optMap[col]?.find((o) => o.code === code)?.label || code;
+    },
+    []
+  );
+
+  // 창고 목록 조회
+  const fetchWarehouses = useCallback(async () => {
+    setWarehouseLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(
+        `/table-management/tables/${WAREHOUSE_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+          autoFilter: true,
+          sort: { columnName: "warehouse_code", order: "asc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const data = raw.map((r: any) => ({
+        ...r,
+        warehouse_type: resolveCategory(categoryOptions, "warehouse_type", r.warehouse_type),
+        status: resolveCategory(categoryOptions, "status", r.status),
+      }));
+      setWarehouses(data);
+      setWarehouseCount(res.data?.data?.total || raw.length);
+    } catch {
+      toast.error("창고 목록을 불러오지 못했어요");
+    } finally {
+      setWarehouseLoading(false);
+    }
+  }, [categoryOptions, resolveCategory, searchFilters]);
+
+  useEffect(() => {
+    fetchWarehouses();
+  }, [fetchWarehouses]);
+
+  // 선택된 창고
+  const selectedWarehouse = warehouses.find((w) => w.id === selectedWarehouseId);
+
+  // 로케이션 조회
+  const fetchLocations = useCallback(async () => {
+    if (!selectedWarehouse?.warehouse_code) {
+      setLocations([]);
+      return;
+    }
+    setLocationLoading(true);
+    try {
+      const res = await apiClient.post(
+        `/table-management/tables/${LOCATION_TABLE}/data`,
+        {
+          page: 1,
+          size: 500,
+          dataFilter: {
+            enabled: true,
+            filters: [
+              {
+                columnName: "warehouse_code",
+                operator: "equals",
+                value: selectedWarehouse.warehouse_code,
+              },
+            ],
+          },
+          autoFilter: true,
+          sort: { columnName: "location_code", order: "asc" },
+        }
+      );
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const data = raw.map((r: any) => ({
+        ...r,
+        location_type: resolveCategory(locationCategoryOptions, "location_type", r.location_type),
+        status: resolveCategory(locationCategoryOptions, "status", r.status),
+      }));
+      setLocations(data);
+    } catch {
+      toast.error("위치 목록을 불러오지 못했어요");
+    } finally {
+      setLocationLoading(false);
+    }
+  }, [selectedWarehouse?.warehouse_code, locationCategoryOptions, resolveCategory]);
+
+  useEffect(() => {
+    setLocationCheckedIds([]);
+    fetchLocations();
+  }, [fetchLocations]);
+
+  // 체크박스 헬퍼
+  const allLocationChecked =
+    locations.length > 0 && locationCheckedIds.length === locations.length;
+  const someLocationChecked =
+    locationCheckedIds.length > 0 && locationCheckedIds.length < locations.length;
+
+  const toggleAllLocations = (checked: boolean) => {
+    setLocationCheckedIds(checked ? locations.map((l) => l.id) : []);
+  };
+
+  const toggleLocation = (id: string, checked: boolean) => {
+    setLocationCheckedIds((prev) =>
+      checked ? [...prev, id] : prev.filter((i) => i !== id)
+    );
+  };
+
+  // ─── 창고 CRUD ───
+
+  const openWarehouseCreateModal = async () => {
+    setWarehouseEditMode(false);
+    setWarehouseForm({});
+    setWhNumberingRuleId(null);
+    setWhPreviewCode(null);
+    setWarehouseModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/warehouse_info/warehouse_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setWhNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setWhPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openWarehouseEditModal = (row: any) => {
+    setWarehouseEditMode(true);
+    setWarehouseForm({ ...row });
+    setWarehouseModalOpen(true);
+  };
+
+  const handleWarehouseSave = async () => {
+    if (!whNumberingRuleId && !warehouseForm.warehouse_code?.trim()) {
+      toast.error("창고코드를 입력해주세요");
+      return;
+    }
+    if (!warehouseForm.warehouse_name?.trim()) {
+      toast.error("창고명을 입력해주세요");
+      return;
+    }
+    setWarehouseSaving(true);
+    try {
+      let finalWarehouseCode = warehouseForm.warehouse_code?.trim() || "";
+      if (!warehouseEditMode && whNumberingRuleId) {
+        const allocRes = await allocateNumberingCode(whNumberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalWarehouseCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setWarehouseSaving(false);
+          return;
+        }
+      }
+      const fields = {
+        warehouse_code: finalWarehouseCode,
+        warehouse_name: warehouseForm.warehouse_name?.trim(),
+        warehouse_type: warehouseForm.warehouse_type || "",
+        manager: warehouseForm.manager || "",
+        address: warehouseForm.address || "",
+        status: warehouseForm.status || "",
+        description: warehouseForm.description || "",
+      };
+
+      // 신규 등록 시 창고코드 중복 체크
+      if (!warehouseEditMode) {
+        const dup = warehouses.find(w => w.warehouse_code === fields.warehouse_code);
+        if (dup) {
+          toast.error(`창고코드 "${fields.warehouse_code}"가 이미 존재해요`);
+          setWarehouseSaving(false);
+          return;
+        }
+      }
+
+      if (warehouseEditMode && warehouseForm.id) {
+        await apiClient.put(
+          `/table-management/tables/${WAREHOUSE_TABLE}/edit`,
+          {
+            originalData: { id: warehouseForm.id },
+            updatedData: fields,
+          }
+        );
+        toast.success("창고 정보가 수정되었어요");
+      } else {
+        await apiClient.post(
+          `/table-management/tables/${WAREHOUSE_TABLE}/add`,
+          { id: crypto.randomUUID(), ...fields }
+        );
+        toast.success("창고가 등록되었어요");
+      }
+      setWarehouseModalOpen(false);
+      fetchWarehouses();
+    } catch {
+      toast.error(warehouseEditMode ? "창고 수정에 실패했어요" : "창고 등록에 실패했어요");
+    } finally {
+      setWarehouseSaving(false);
+    }
+  };
+
+  const handleWarehouseDelete = async () => {
+    if (!selectedWarehouse) return;
+    if (locations.length > 0) {
+      toast.error("하위 위치가 있어 삭제할 수 없어요. 위치를 먼저 삭제해주세요.");
+      return;
+    }
+    const ok = await confirm(
+      `"${selectedWarehouse.warehouse_name}" 창고를 삭제할까요?`
+    );
+    if (!ok) return;
+    try {
+      await apiClient.delete(
+        `/table-management/tables/${WAREHOUSE_TABLE}/delete`,
+        { data: [{ id: selectedWarehouse.id }] }
+      );
+      toast.success("창고가 삭제되었어요");
+      setSelectedWarehouseId(null);
+      fetchWarehouses();
+    } catch {
+      toast.error("창고 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 위치 CRUD ───
+
+  const openLocationCreateModal = async () => {
+    setLocationEditMode(false);
+    setLocationForm({ warehouse_code: selectedWarehouse?.warehouse_code || "" });
+    setLocNumberingRuleId(null);
+    setLocPreviewCode(null);
+    setLocationModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/warehouse_location/location_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setLocNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setLocPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openLocationEditModal = (row: any) => {
+    setLocationEditMode(true);
+    setLocationForm({ ...row });
+    setLocationModalOpen(true);
+  };
+
+  const handleLocationSave = async () => {
+    if (!locNumberingRuleId && !locationForm.location_code?.trim()) {
+      toast.error("위치코드를 입력해주세요");
+      return;
+    }
+    if (!locationForm.location_name?.trim()) {
+      toast.error("위치명을 입력해주세요");
+      return;
+    }
+    setLocationSaving(true);
+    try {
+      let finalLocationCode = locationForm.location_code?.trim() || "";
+      if (!locationEditMode && locNumberingRuleId) {
+        const allocRes = await allocateNumberingCode(locNumberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalLocationCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setLocationSaving(false);
+          return;
+        }
+      }
+
+      const fields = {
+        warehouse_code: locationForm.warehouse_code || selectedWarehouse?.warehouse_code || "",
+        location_code: finalLocationCode,
+        location_name: locationForm.location_name?.trim(),
+        floor: locationForm.floor || "",
+        zone: locationForm.zone || "",
+        row_num: locationForm.row_num || "",
+        level_num: locationForm.level_num || "",
+        location_type: locationForm.location_type || "",
+        status: locationForm.status || "",
+      };
+
+      if (locationEditMode && locationForm.id) {
+        await apiClient.put(
+          `/table-management/tables/${LOCATION_TABLE}/edit`,
+          {
+            originalData: { id: locationForm.id },
+            updatedData: fields,
+          }
+        );
+        toast.success("위치 정보가 수정되었어요");
+      } else {
+        await apiClient.post(
+          `/table-management/tables/${LOCATION_TABLE}/add`,
+          { id: crypto.randomUUID(), ...fields }
+        );
+        toast.success("위치가 등록되었어요");
+      }
+      setLocationModalOpen(false);
+      fetchLocations();
+    } catch {
+      toast.error(locationEditMode ? "위치 수정에 실패했어요" : "위치 등록에 실패했어요");
+    } finally {
+      setLocationSaving(false);
+    }
+  };
+
+  const handleLocationDelete = async () => {
+    if (locationCheckedIds.length === 0) {
+      toast.error("삭제할 위치를 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`${locationCheckedIds.length}건의 위치를 삭제할까요?`);
+    if (!ok) return;
+    try {
+      for (const id of locationCheckedIds) {
+        await apiClient.delete(
+          `/table-management/tables/${LOCATION_TABLE}/delete`,
+          { data: [{ id }] }
+        );
+      }
+      toast.success(`${locationCheckedIds.length}건의 위치가 삭제되었어요`);
+      setLocationCheckedIds([]);
+      fetchLocations();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "위치 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 랙 구조 일괄 등록 ───
+
+  const openRackModal = () => {
+    setRackFloor("");
+    setRackZone("");
+    setRackConditions([]);
+    setRackLocationType("");
+    setRackStatus("");
+    setRackPreview([]);
+    setRackSaving(false);
+    setRackModalOpen(true);
+  };
+
+  const addRackCondition = () => {
+    const lastEnd = rackConditions.length > 0
+      ? rackConditions[rackConditions.length - 1].endRow
+      : 0;
+    setRackConditions((prev) => [
+      ...prev,
+      { id: crypto.randomUUID(), startRow: lastEnd + 1, endRow: lastEnd + 1, levels: 1 },
+    ]);
+  };
+
+  const updateRackCondition = (id: string, field: string, value: number) => {
+    setRackConditions((prev) =>
+      prev.map((c) => (c.id === id ? { ...c, [field]: value } : c))
+    );
+  };
+
+  const removeRackCondition = (id: string) => {
+    setRackConditions((prev) => prev.filter((c) => c.id !== id));
+  };
+
+  const generateRackPreview = () => {
+    if (!rackFloor.trim() || !rackZone.trim()) {
+      toast.error("층과 구역을 입력해주세요");
+      return;
+    }
+    if (rackConditions.length === 0) {
+      toast.error("조건을 1개 이상 추가해주세요");
+      return;
+    }
+    // 조건 유효성 검사
+    for (const cond of rackConditions) {
+      if (cond.startRow < 1 || cond.endRow < 1 || cond.levels < 1) {
+        toast.error("열 범위와 단 수는 1 이상이어야 합니다");
+        return;
+      }
+      if (cond.endRow < cond.startRow) {
+        toast.error("끝 열은 시작 열보다 크거나 같아야 합니다");
+        return;
+      }
+    }
+
+    const whCode = selectedWarehouse?.warehouse_code || "";
+    // 카테고리 코드→라벨 변환 (셀렉트에서 코드가 저장되므로)
+    const floorOpts = locationCategoryOptions["floor"] || [];
+    const zoneOpts = locationCategoryOptions["zone"] || [];
+    const floorLabel = floorOpts.find(o => o.code === rackFloor)?.label || rackFloor.trim();
+    const zoneLabel = zoneOpts.find(o => o.code === rackZone)?.label || rackZone.trim();
+    const floorCode = floorLabel.replace(/층$/, "");
+    const zoneCode = zoneLabel.replace(/구역$/, "");
+
+    // 기존 위치코드 Set (중복 체크용)
+    const existingCodes = new Set(locations.map((l: any) => l.location_code));
+    const seen = new Set<string>();
+    const items: any[] = [];
+    const duplicates: string[] = [];
+
+    for (const cond of rackConditions) {
+      for (let row = cond.startRow; row <= cond.endRow; row++) {
+        for (let level = 1; level <= cond.levels; level++) {
+          const rowStr = String(row).padStart(2, "0");
+          const locationCode = `${whCode}-${floorCode}${zoneCode}-${rowStr}-${level}`;
+          // 미리보기 내부 중복 제거
+          if (seen.has(locationCode)) continue;
+          seen.add(locationCode);
+          // 기존 DB 데이터와 중복 체크
+          if (existingCodes.has(locationCode)) {
+            duplicates.push(locationCode);
+            continue;
+          }
+          const locationName = `${zoneCode}구역-${rowStr}열-${level}단`;
+          items.push({
+            location_code: locationCode,
+            location_name: locationName,
+            warehouse_code: whCode,
+            floor: floorLabel,
+            zone: zoneLabel,
+            row_num: String(row),
+            level_num: String(level),
+            location_type: rackLocationType,
+            status: rackStatus,
+          });
+        }
+      }
+    }
+    if (duplicates.length > 0) {
+      toast.error(`이미 등록된 위치 ${duplicates.length}건이 제외되었어요 (예: ${duplicates.slice(0, 3).join(", ")})`);
+    }
+    setRackPreview(items);
+  };
+
+  const handleRackBulkSave = async () => {
+    if (rackPreview.length === 0) {
+      toast.error("미리보기를 먼저 생성해주세요");
+      return;
+    }
+    setRackSaving(true);
+    try {
+      let successCount = 0;
+      for (const item of rackPreview) {
+        await apiClient.post(
+          `/table-management/tables/${LOCATION_TABLE}/add`,
+          { id: crypto.randomUUID(), ...item }
+        );
+        successCount++;
+      }
+      toast.success(`${successCount}개의 위치가 등록되었어요`);
+      setRackModalOpen(false);
+      fetchLocations();
+    } catch (err) {
+      toast.error("일괄 등록 중 오류가 발생했어요");
+    } finally {
+      setRackSaving(false);
+    }
+  };
+
+  // 랙 조건별 통계
+  const getRackConditionCount = (cond: { startRow: number; endRow: number; levels: number }) => {
+    if (cond.endRow < cond.startRow || cond.startRow < 1 || cond.levels < 1) return 0;
+    return (cond.endRow - cond.startRow + 1) * cond.levels;
+  };
+
+  // 랙 미리보기 통계
+  const rackStats = {
+    totalLocations: rackPreview.length,
+    totalRows: rackConditions.reduce((acc, c) => {
+      if (c.endRow >= c.startRow && c.startRow >= 1) return acc + (c.endRow - c.startRow + 1);
+      return acc;
+    }, 0),
+    maxLevels: rackConditions.reduce((acc, c) => Math.max(acc, c.levels || 0), 0),
+  };
+
+  // EDataTable 컬럼 정의
+  const warehouseColumns: EDataTableColumn[] = ts.visibleColumns.map((col) => {
+    const base: EDataTableColumn = { key: col.key, label: col.label };
+    if (col.key === "warehouse_type") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getTypeVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    if (col.key === "status") {
+      return {
+        ...base,
+        render: (val: any) => (
+          <Badge variant={getStatusVariant(val)} className="text-[10px]">
+            {val}
+          </Badge>
+        ),
+      };
+    }
+    return base;
+  });
+
+  // 엑셀 내보내기
+  const handleExcelExport = () => {
+    if (warehouses.length === 0) {
+      toast.error("내보낼 데이터가 없어요");
+      return;
+    }
+    exportToExcel(
+      warehouses.map((r) => ({
+        창고코드: r.warehouse_code,
+        창고명: r.warehouse_name,
+        유형: r.warehouse_type,
+        관리자: r.manager,
+        상태: r.status,
+      })),
+      "창고정보"
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-full gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      {/* 검색 바 */}
+      <DynamicSearchFilter
+        tableName={WAREHOUSE_TABLE}
+        filterId="c16-warehouse"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={warehouses.length}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1 text-xs"
+              onClick={handleExcelExport}
+            >
+              <Download className="h-3.5 w-3.5" />
+              엑셀
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 px-2" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 패널 */}
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="flex-1 rounded-lg border bg-card"
+      >
+        {/* 좌측: 창고 목록 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex flex-col h-full">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+              <div className="flex items-center gap-2">
+                <span className="text-[13px] font-bold">창고 목록</span>
+                <Badge variant="default" className="rounded-full text-[11px]">
+                  {warehouses.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Button
+                  size="sm"
+                  className="h-7 gap-1 text-xs"
+                  onClick={openWarehouseCreateModal}
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                  등록
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-7 gap-1 text-xs text-destructive hover:text-destructive"
+                  onClick={handleWarehouseDelete}
+                  disabled={!selectedWarehouse}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+
+            <EDataTable
+              columns={warehouseColumns}
+              data={ts.groupData(warehouses)}
+              rowKey={(row) => row.id}
+              loading={warehouseLoading}
+              emptyMessage="등록된 창고가 없어요"
+              selectedId={selectedWarehouseId}
+              onSelect={(id) => setSelectedWarehouseId(id)}
+              onRowDoubleClick={(row) => openWarehouseEditModal(row)}
+              showRowNumber
+              showPagination={false}
+              draggableColumns={false}
+              columnOrderKey="c16-warehouse"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 로케이션 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex flex-col h-full">
+            {!selectedWarehouse ? (
+              <div className="flex flex-col items-center justify-center flex-1 m-5 border-2 border-dashed rounded-lg border-border">
+                <Building2 className="h-12 w-12 text-muted-foreground/40 mb-4" />
+                <p className="text-sm font-semibold text-muted-foreground">
+                  창고를 선택해주세요
+                </p>
+                <p className="text-xs text-muted-foreground/70 mt-1">
+                  좌측에서 창고를 선택하면 위치 정보가 표시돼요
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                  <div className="flex items-center gap-2">
+                    <MapPin className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-[13px] font-bold">
+                      {selectedWarehouse.warehouse_name}
+                    </span>
+                    <Badge
+                      variant="outline"
+                      className="rounded-full text-[11px] font-mono"
+                    >
+                      {selectedWarehouse.warehouse_code}
+                    </Badge>
+                    <Badge variant="secondary" className="rounded-full text-[10px]">
+                      {locations.length}개 위치
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={openRackModal}
+                    >
+                      <Layers className="h-3.5 w-3.5" />
+                      랙 구조 등록
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs text-destructive hover:text-destructive"
+                      onClick={handleLocationDelete}
+                      disabled={locationCheckedIds.length === 0}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                      삭제
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 로케이션 테이블 */}
+                <div className="flex-1 overflow-auto">
+                  {locationLoading ? (
+                    <div className="flex items-center justify-center h-32">
+                      <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : locations.length === 0 ? (
+                    <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">
+                      등록된 위치가 없어요
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="w-10 text-center">
+                            <Checkbox
+                              checked={
+                                someLocationChecked
+                                  ? "indeterminate"
+                                  : allLocationChecked
+                              }
+                              onCheckedChange={(v) =>
+                                toggleAllLocations(v === true)
+                              }
+                              aria-label="전체 선택"
+                            />
+                          </TableHead>
+                          <TableHead className="w-8 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">위치코드</TableHead>
+                          <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">위치명</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">층</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">구역</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">열</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>
+                          <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {locations.map((loc, idx) => (
+                          <TableRow
+                            key={loc.id}
+                            className={cn(
+                              "cursor-pointer text-xs",
+                              locationCheckedIds.includes(loc.id) && "bg-primary/5"
+                            )}
+                            onDoubleClick={() => openLocationEditModal(loc)}
+                          >
+                            <TableCell className="text-center">
+                              <Checkbox
+                                checked={locationCheckedIds.includes(loc.id)}
+                                onCheckedChange={(v) =>
+                                  toggleLocation(loc.id, v === true)
+                                }
+                                aria-label="행 선택"
+                              />
+                            </TableCell>
+                            <TableCell className="text-center text-muted-foreground">
+                              {idx + 1}
+                            </TableCell>
+                            <TableCell className="font-mono truncate max-w-[110px]">
+                              {loc.location_code}
+                            </TableCell>
+                            <TableCell className="truncate max-w-[120px]">
+                              {loc.location_name}
+                            </TableCell>
+                            <TableCell className="text-center">{loc.floor}</TableCell>
+                            <TableCell>{loc.zone}</TableCell>
+                            <TableCell className="text-center">{loc.row_num}</TableCell>
+                            <TableCell className="text-center">{loc.level_num}</TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getTypeVariant(loc.location_type)}
+                                className="text-[10px]"
+                              >
+                                {loc.location_type}
+                              </Badge>
+                            </TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={getStatusVariant(loc.status)}
+                                className="text-[10px]"
+                              >
+                                {loc.status}
+                              </Badge>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 창고 등록/수정 Dialog */}
+      <Dialog open={warehouseModalOpen} onOpenChange={setWarehouseModalOpen}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle>
+              {warehouseEditMode ? "창고 수정" : "창고 등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {warehouseEditMode
+                ? "창고 정보를 수정해주세요"
+                : "새로운 창고를 등록해주세요"}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid grid-cols-2 gap-4 py-2">
+            {/* 창고코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                창고코드 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={warehouseEditMode ? (warehouseForm.warehouse_code || "") : (whPreviewCode || "")}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_code: e.target.value }))
+                }
+                placeholder={warehouseEditMode ? "" : (whNumberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                disabled={warehouseEditMode}
+                readOnly={!warehouseEditMode && !!whNumberingRuleId}
+              />
+            </div>
+            {/* 창고명 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                창고명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={warehouseForm.warehouse_name || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_name: e.target.value }))
+                }
+                placeholder="창고명을 입력해주세요"
+              />
+            </div>
+            {/* 유형 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">유형</Label>
+              <Select
+                value={warehouseForm.warehouse_type || ""}
+                onValueChange={(v) =>
+                  setWarehouseForm((prev) => ({ ...prev, warehouse_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["warehouse_type"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">관리자</Label>
+              <Input
+                value={warehouseForm.manager || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, manager: e.target.value }))
+                }
+                placeholder="관리자를 입력해주세요"
+              />
+            </div>
+            {/* 상태 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+              <Select
+                value={warehouseForm.status || ""}
+                onValueChange={(v) =>
+                  setWarehouseForm((prev) => ({ ...prev, status: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["status"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 주소 (전체 너비) */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">주소</Label>
+              <Input
+                value={warehouseForm.address || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, address: e.target.value }))
+                }
+                placeholder="주소를 입력해주세요"
+              />
+            </div>
+            {/* 비고 (전체 너비) */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">비고</Label>
+              <Input
+                value={warehouseForm.description || ""}
+                onChange={(e) =>
+                  setWarehouseForm((prev) => ({ ...prev, description: e.target.value }))
+                }
+                placeholder="비고를 입력해주세요"
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setWarehouseModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleWarehouseSave} disabled={warehouseSaving}>
+              {warehouseSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              {warehouseEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 위치 등록/수정 Dialog */}
+      <Dialog open={locationModalOpen} onOpenChange={setLocationModalOpen}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle>
+              {locationEditMode ? "위치 수정" : "위치 등록"}
+            </DialogTitle>
+            <DialogDescription>
+              {locationEditMode
+                ? "위치 정보를 수정해주세요"
+                : `${selectedWarehouse?.warehouse_name || ""} 창고에 새 위치를 등록해주세요`}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid grid-cols-2 gap-4 py-2">
+            {/* 창고코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">창고코드</Label>
+              <Input value={locationForm.warehouse_code || ""} disabled />
+            </div>
+            {/* 위치코드 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                위치코드 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={locationEditMode ? (locationForm.location_code || "") : (locPreviewCode || "")}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, location_code: e.target.value }))
+                }
+                placeholder={locationEditMode ? "" : (locNumberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                disabled={locationEditMode}
+                readOnly={!locationEditMode && !!locNumberingRuleId}
+              />
+            </div>
+            {/* 위치명 */}
+            <div className="grid gap-1.5 col-span-2">
+              <Label className="text-[11px] font-semibold text-muted-foreground">
+                위치명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={locationForm.location_name || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, location_name: e.target.value }))
+                }
+                placeholder="위치명을 입력해주세요"
+              />
+            </div>
+            {/* 층 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">층</Label>
+              <Input
+                value={locationForm.floor || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, floor: e.target.value }))
+                }
+                placeholder="층을 입력해주세요"
+              />
+            </div>
+            {/* 구역 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">구역</Label>
+              <Input
+                value={locationForm.zone || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, zone: e.target.value }))
+                }
+                placeholder="구역을 입력해주세요"
+              />
+            </div>
+            {/* 열 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">열</Label>
+              <Input
+                value={locationForm.row_num || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, row_num: e.target.value }))
+                }
+                placeholder="열을 입력해주세요"
+              />
+            </div>
+            {/* 단 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">단</Label>
+              <Input
+                value={locationForm.level_num || ""}
+                onChange={(e) =>
+                  setLocationForm((prev) => ({ ...prev, level_num: e.target.value }))
+                }
+                placeholder="단을 입력해주세요"
+              />
+            </div>
+            {/* 위치유형 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">위치유형</Label>
+              <Select
+                value={locationForm.location_type || ""}
+                onValueChange={(v) =>
+                  setLocationForm((prev) => ({ ...prev, location_type: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="위치유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(locationCategoryOptions["location_type"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 상태 */}
+            <div className="grid gap-1.5">
+              <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+              <Select
+                value={locationForm.status || ""}
+                onValueChange={(v) =>
+                  setLocationForm((prev) => ({ ...prev, status: v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(locationCategoryOptions["status"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setLocationModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleLocationSave} disabled={locationSaving}>
+              {locationSaving && (
+                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+              )}
+              {locationEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 랙 구조 일괄 등록 Dialog */}
+      <Dialog open={rackModalOpen} onOpenChange={setRackModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-3xl p-0 !gap-0" style={{ maxHeight: "90vh", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+          <div className="px-6 pt-6 pb-3 shrink-0">
+            <DialogTitle className="flex items-center gap-2">
+              <Layers className="h-5 w-5" />
+              랙 구조 일괄 등록
+            </DialogTitle>
+            <DialogDescription className="mt-1">
+              {selectedWarehouse?.warehouse_name} ({selectedWarehouse?.warehouse_code}) 창고에 랙 구조를 일괄 등록합니다
+            </DialogDescription>
+          </div>
+
+          <div className="flex-1 overflow-y-auto min-h-0">
+            <div className="space-y-6 px-6 py-4">
+              {/* 기본 정보 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  📍 기본 정보
+                </h3>
+                <div className="grid grid-cols-3 gap-4">
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      창고 <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      value={`${selectedWarehouse?.warehouse_name || ""} (${selectedWarehouse?.warehouse_code || ""})`}
+                      disabled
+                    />
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      층 <span className="text-destructive">*</span>
+                    </Label>
+                    {(locationCategoryOptions["floor"] || []).length > 0 ? (
+                      <Select value={rackFloor} onValueChange={setRackFloor}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="층 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(locationCategoryOptions["floor"] || []).map((o) => (
+                            <SelectItem key={o.code} value={o.code}>
+                              {o.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={rackFloor}
+                        onChange={(e) => setRackFloor(e.target.value)}
+                        placeholder="예: B1, 1F, 2F"
+                      />
+                    )}
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      구역 <span className="text-destructive">*</span>
+                    </Label>
+                    {(locationCategoryOptions["zone"] || []).length > 0 ? (
+                      <Select value={rackZone} onValueChange={setRackZone}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="구역 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(locationCategoryOptions["zone"] || []).map((o) => (
+                            <SelectItem key={o.code} value={o.code}>
+                              {o.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        value={rackZone}
+                        onChange={(e) => setRackZone(e.target.value)}
+                        placeholder="예: A, B, C"
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* 랙 라인 구조 설정 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  📊 랙 라인 구조 설정
+                </h3>
+
+                {/* 안내 박스 */}
+                <div className="rounded-lg bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 p-3 mb-3">
+                  <div className="flex items-start gap-2">
+                    <Info className="h-4 w-4 text-blue-600 dark:text-blue-400 mt-0.5 shrink-0" />
+                    <div className="text-xs text-blue-700 dark:text-blue-300 space-y-0.5">
+                      <p>1. 조건 추가 버튼을 클릭하여 랙 라인 조건을 생성하세요</p>
+                      <p>2. 각 조건마다 열 범위와 단 수를 입력하세요</p>
+                      <p>3. 예시: 조건1(1~3열, 3단), 조건2(4~6열, 5단)</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-xs text-muted-foreground">
+                    {rackConditions.length}개 조건
+                  </span>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={addRackCondition}
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    조건 추가
+                  </Button>
+                </div>
+
+                {rackConditions.length === 0 ? (
+                  <div className="flex flex-col items-center justify-center py-8 border-2 border-dashed rounded-lg border-border">
+                    <Layers className="h-8 w-8 text-muted-foreground/40 mb-2" />
+                    <p className="text-sm text-muted-foreground mb-2">
+                      조건을 추가하여 랙 구조를 설정하세요
+                    </p>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1 text-xs"
+                      onClick={addRackCondition}
+                    >
+                      <Plus className="h-3.5 w-3.5" />
+                      첫 번째 조건 추가
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {rackConditions.map((cond, idx) => (
+                      <div
+                        key={cond.id}
+                        className="flex items-center gap-3 rounded-lg border p-3 bg-card"
+                      >
+                        <span className="text-xs font-bold text-muted-foreground w-10 shrink-0">
+                          조건{idx + 1}
+                        </span>
+                        <div className="flex items-center gap-1.5 flex-1">
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-20 text-center text-xs"
+                            value={cond.startRow || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "startRow", Number(e.target.value) || 0)
+                            }
+                            placeholder="시작"
+                          />
+                          <span className="text-xs text-muted-foreground">~</span>
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-20 text-center text-xs"
+                            value={cond.endRow || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "endRow", Number(e.target.value) || 0)
+                            }
+                            placeholder="끝"
+                          />
+                          <span className="text-xs text-muted-foreground">열,</span>
+                          <Input
+                            type="number"
+                            min={1}
+                            className="h-8 w-16 text-center text-xs"
+                            value={cond.levels || ""}
+                            onChange={(e) =>
+                              updateRackCondition(cond.id, "levels", Number(e.target.value) || 0)
+                            }
+                            placeholder="단"
+                          />
+                          <span className="text-xs text-muted-foreground">단</span>
+                        </div>
+                        {getRackConditionCount(cond) > 0 && (
+                          <Badge variant="secondary" className="text-[10px] shrink-0">
+                            {cond.startRow}열 ~ {cond.endRow}열 × {cond.levels}단 = {getRackConditionCount(cond)}개
+                          </Badge>
+                        )}
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-7 w-7 p-0 text-destructive hover:text-destructive shrink-0"
+                          onClick={() => removeRackCondition(cond.id)}
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* 공통 설정 */}
+              <div>
+                <h3 className="text-sm font-bold mb-3 flex items-center gap-1.5">
+                  ⚙️ 공통 설정
+                </h3>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      위치 유형
+                    </Label>
+                    <Select value={rackLocationType} onValueChange={setRackLocationType}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="위치유형 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(locationCategoryOptions["location_type"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>
+                            {o.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="grid gap-1.5">
+                    <Label className="text-[11px] font-semibold text-muted-foreground">
+                      사용 여부
+                    </Label>
+                    <Select value={rackStatus} onValueChange={setRackStatus}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="상태 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(locationCategoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>
+                            {o.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+
+              {/* 등록 미리보기 */}
+              <div>
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-sm font-bold flex items-center gap-1.5">
+                    👁️ 등록 미리보기
+                  </h3>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 gap-1 text-xs"
+                    onClick={generateRackPreview}
+                  >
+                    <Eye className="h-3.5 w-3.5" />
+                    미리보기 생성
+                  </Button>
+                </div>
+
+                {rackPreview.length > 0 && (
+                  <>
+                    {/* 통계 카드 */}
+                    <div className="grid grid-cols-3 gap-3 mb-3">
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">총 위치</p>
+                        <p className="text-lg font-bold">{rackStats.totalLocations}개</p>
+                      </div>
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">열 수</p>
+                        <p className="text-lg font-bold">{rackStats.totalRows}개</p>
+                      </div>
+                      <div className="rounded-lg border bg-muted/50 p-3 text-center">
+                        <p className="text-[11px] text-muted-foreground">최대 단</p>
+                        <p className="text-lg font-bold">{rackStats.maxLevels}</p>
+                      </div>
+                    </div>
+
+                    {/* 미리보기 테이블 */}
+                    <div className="rounded-lg border overflow-hidden max-h-[300px] overflow-y-auto">
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-10 text-center text-[11px] font-bold text-muted-foreground">No</TableHead>
+                            <TableHead className="text-[11px] font-bold text-muted-foreground">위치코드</TableHead>
+                            <TableHead className="text-[11px] font-bold text-muted-foreground">위치명</TableHead>
+                            <TableHead className="w-14 text-center text-[11px] font-bold text-muted-foreground">층</TableHead>
+                            <TableHead className="w-14 text-center text-[11px] font-bold text-muted-foreground">구역</TableHead>
+                            <TableHead className="w-12 text-center text-[11px] font-bold text-muted-foreground">열</TableHead>
+                            <TableHead className="w-12 text-center text-[11px] font-bold text-muted-foreground">단</TableHead>
+                            <TableHead className="w-16 text-[11px] font-bold text-muted-foreground">유형</TableHead>
+                            <TableHead className="w-16 text-[11px] font-bold text-muted-foreground">비고</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {rackPreview.map((item, idx) => (
+                            <TableRow key={idx} className="text-xs">
+                              <TableCell className="text-center text-muted-foreground">
+                                {idx + 1}
+                              </TableCell>
+                              <TableCell className="font-mono">{item.location_code}</TableCell>
+                              <TableCell>{item.location_name}</TableCell>
+                              <TableCell className="text-center">{item.floor}</TableCell>
+                              <TableCell className="text-center">{item.zone}</TableCell>
+                              <TableCell className="text-center">{item.row_num}</TableCell>
+                              <TableCell className="text-center">{item.level_num}</TableCell>
+                              <TableCell>
+                                {resolveCategory(locationCategoryOptions, "location_type", item.location_type) || "-"}
+                              </TableCell>
+                              <TableCell>-</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </>
+                )}
+
+                {rackPreview.length === 0 && (
+                  <div className="flex flex-col items-center justify-center py-6 border-2 border-dashed rounded-lg border-border text-sm text-muted-foreground">
+                    위의 설정을 완료한 뒤 미리보기 생성 버튼을 클릭하세요
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2 px-6 py-4 border-t shrink-0 bg-background">
+            <Button variant="outline" onClick={() => setRackModalOpen(false)}>
+              취소
+            </Button>
+            <Button
+              onClick={handleRackBulkSave}
+              disabled={rackSaving || rackPreview.length === 0}
+            >
+              {rackSaving && <Loader2 className="h-4 w-4 animate-spin mr-1" />}
+              일괄 등록 ({rackPreview.length}건)
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/master-data/company/page.tsx b/frontend/app/(main)/COMPANY_9/master-data/company/page.tsx
new file mode 100644
index 00000000..9d7f2dea
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/master-data/company/page.tsx
@@ -0,0 +1,759 @@
+"use client";
+
+/**
+ * 회사관리 — Type D 탭 멀티뷰 (2탭)
+ *
+ * Tab 1: 회사정보 (company_mng 단일 레코드 폼)
+ * Tab 2: 부서관리 (dept_info 트리 + user_info 목록)
+ */
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Building2, Users, Pencil, Save, Loader2, Plus, Trash2,
+  Upload, X, Image as ImageIcon, ChevronRight, FolderOpen, Folder,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import * as departmentAPI from "@/lib/api/department";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { formatField, validateField, validateForm } from "@/lib/utils/validation";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const COMPANY_TABLE = "company_mng";
+const DEPT_TABLE = "dept_info";
+const USER_TABLE = "user_info";
+
+/* ── 트리 노드 타입 ── */
+interface DeptNode {
+  dept_code: string;
+  dept_name: string;
+  parent_dept_code: string | null;
+  status?: string;
+  children: DeptNode[];
+}
+
+export default function CompanyPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  /* ===================== Tab 1: 회사정보 ===================== */
+  const [companyData, setCompanyData] = useState<Record<string, any>>({});
+  const [companyForm, setCompanyForm] = useState<Record<string, any>>({});
+  const [companyLoading, setCompanyLoading] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  // 이미지 업로드 refs
+  const imageRef = useRef<HTMLInputElement>(null);
+  const logoRef = useRef<HTMLInputElement>(null);
+  const sealRef = useRef<HTMLInputElement>(null);
+
+  // 이미지 미리보기
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [logoPreview, setLogoPreview] = useState<string | null>(null);
+  const [sealPreview, setSealPreview] = useState<string | null>(null);
+
+  const fetchCompany = useCallback(async () => {
+    setCompanyLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${COMPANY_TABLE}/data`, {
+        page: 1, size: 1, autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      if (rows.length > 0) {
+        setCompanyData(rows[0]);
+        setCompanyForm(rows[0]);
+        if (rows[0].company_image) setImagePreview(rows[0].company_image);
+        if (rows[0].company_logo) setLogoPreview(rows[0].company_logo);
+        if (rows[0].company_seal) setSealPreview(rows[0].company_seal);
+      }
+    } catch {
+      toast.error("회사 정보를 불러오는데 실패했어요.");
+    } finally {
+      setCompanyLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchCompany(); }, [fetchCompany]);
+
+  const handleImageUpload = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    field: string,
+    setPreview: React.Dispatch<React.SetStateAction<string | null>>,
+  ) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result as string;
+      setPreview(result);
+      setCompanyForm((prev) => ({ ...prev, [field]: result }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleCompanySave = async () => {
+    if (!companyForm.company_name) {
+      toast.error("회사명은 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_at, updated_at, writer, created_date, updated_date, regdate, company_code, ...updatedData } = companyForm;
+
+      if (companyData.company_code) {
+        await apiClient.put(`/table-management/tables/${COMPANY_TABLE}/edit`, {
+          originalData: { company_code: companyData.company_code },
+          updatedData,
+        });
+      } else {
+        await apiClient.post(`/table-management/tables/${COMPANY_TABLE}/add`, { company_code, ...updatedData });
+      }
+      toast.success("회사 정보가 저장되었어요.");
+      setEditMode(false);
+      fetchCompany();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const cancelEdit = () => {
+    setCompanyForm(companyData);
+    setImagePreview(companyData.company_image || null);
+    setLogoPreview(companyData.company_logo || null);
+    setSealPreview(companyData.company_seal || null);
+    setEditMode(false);
+  };
+
+  /* ===================== Tab 2: 부서관리 ===================== */
+  const [depts, setDepts] = useState<any[]>([]);
+  const [deptTree, setDeptTree] = useState<DeptNode[]>([]);
+  const [deptLoading, setDeptLoading] = useState(false);
+  const [selectedDeptCode, setSelectedDeptCode] = useState<string | null>(null);
+  const [expandedDepts, setExpandedDepts] = useState<Set<string>>(new Set());
+
+  // 사원
+  const [members, setMembers] = useState<any[]>([]);
+  const [memberLoading, setMemberLoading] = useState(false);
+
+  // 부서 모달
+  const [deptModalOpen, setDeptModalOpen] = useState(false);
+  const [deptEditMode, setDeptEditMode] = useState(false);
+  const [deptForm, setDeptForm] = useState<Record<string, any>>({});
+  const [deptSaving, setDeptSaving] = useState(false);
+
+  // 채번
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 사원 모달
+  const [userModalOpen, setUserModalOpen] = useState(false);
+  const [userEditMode, setUserEditMode] = useState(false);
+  const [userForm, setUserForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+
+  // 트리 구성
+  const buildTree = (flatDepts: any[]): DeptNode[] => {
+    const map: Record<string, DeptNode> = {};
+    const roots: DeptNode[] = [];
+    flatDepts.forEach((d) => {
+      map[d.dept_code] = { ...d, children: [] };
+    });
+    flatDepts.forEach((d) => {
+      const node = map[d.dept_code];
+      if (d.parent_dept_code && map[d.parent_dept_code]) {
+        map[d.parent_dept_code].children.push(node);
+      } else {
+        roots.push(node);
+      }
+    });
+    return roots;
+  };
+
+  const fetchDepts = useCallback(async () => {
+    setDeptLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DEPT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setDepts(raw);
+      setDeptTree(buildTree(raw));
+      // 전부 펼치기
+      setExpandedDepts(new Set(raw.map((d: any) => d.dept_code)));
+    } catch {
+      toast.error("부서 목록을 불러오는데 실패했어요.");
+    } finally {
+      setDeptLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchDepts(); }, [fetchDepts]);
+
+  const selectedDept = depts.find((d) => d.dept_code === selectedDeptCode);
+
+  // 사원 조회
+  const fetchMembers = useCallback(async () => {
+    if (!selectedDeptCode) { setMembers([]); return; }
+    setMemberLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${USER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "dept_code", operator: "equals", value: selectedDeptCode }] },
+        autoFilter: true,
+      });
+      setMembers(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setMembers([]); } finally { setMemberLoading(false); }
+  }, [selectedDeptCode]);
+
+  useEffect(() => { fetchMembers(); }, [fetchMembers]);
+
+  // 트리 토글
+  const toggleExpand = (code: string) => {
+    setExpandedDepts((prev) => {
+      const next = new Set(prev);
+      if (next.has(code)) next.delete(code); else next.add(code);
+      return next;
+    });
+  };
+
+  // 부서 등록
+  const openDeptRegister = async () => {
+    setDeptForm({});
+    setDeptEditMode(false);
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setDeptModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/dept_info/dept_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+
+  const openDeptEdit = () => {
+    if (!selectedDept) return;
+    setDeptForm({ ...selectedDept });
+    setDeptEditMode(true);
+    setDeptModalOpen(true);
+  };
+
+  const handleDeptSave = async () => {
+    if (!deptForm.dept_name) { toast.error("부서명은 필수예요."); return; }
+    const parentCode = (deptForm.parent_dept_code && deptForm.parent_dept_code !== "none") ? deptForm.parent_dept_code : null;
+    setDeptSaving(true);
+    try {
+      if (deptEditMode && deptForm.dept_code) {
+        const response = await departmentAPI.updateDepartment(deptForm.dept_code, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "수정에 실패했어요."); return; }
+        toast.success("수정되었어요.");
+      } else {
+        const companyCode = user?.companyCode || "";
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else { toast.error("채번 코드 할당에 실패했어요."); return; }
+        }
+        const response = await departmentAPI.createDepartment(companyCode, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+          dept_code: allocatedCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "등록에 실패했어요."); return; }
+        toast.success("등록되었어요.");
+      }
+      setDeptModalOpen(false);
+      fetchDepts();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setDeptSaving(false);
+    }
+  };
+
+  const handleDeptDelete = async () => {
+    if (!selectedDeptCode) return;
+    const ok = await confirm("부서를 삭제할까요?", {
+      description: "해당 부서에 소속된 사원 정보는 유지돼요.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      const response = await departmentAPI.deleteDepartment(selectedDeptCode);
+      if (!response.success) { toast.error((response as any).error || "삭제에 실패했어요."); return; }
+      toast.success((response as any).message || "삭제되었어요.");
+      setSelectedDeptCode(null);
+      fetchDepts();
+    } catch { toast.error("삭제에 실패했어요."); }
+  };
+
+  // 사원 추가/수정
+  const openUserModal = (editData?: any) => {
+    if (editData) {
+      setUserEditMode(true);
+      setUserForm({ ...editData, user_password: "" });
+    } else {
+      setUserEditMode(false);
+      setUserForm({ dept_code: selectedDeptCode || "", user_password: "" });
+    }
+    setFormErrors({});
+    setUserModalOpen(true);
+  };
+
+  const handleUserFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setUserForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => { const n = { ...prev }; if (error) n[field] = error; else delete n[field]; return n; });
+  };
+
+  const handleUserSave = async () => {
+    if (!userForm.user_id) { toast.error("사용자 ID는 필수예요."); return; }
+    if (!userForm.user_name) { toast.error("사용자 이름은 필수예요."); return; }
+    if (!userForm.dept_code) { toast.error("부서는 필수예요."); return; }
+    const errors = validateForm(userForm, ["cell_phone", "email"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) { toast.error("입력 형식을 확인해주세요."); return; }
+    setDeptSaving(true);
+    try {
+      const password = userForm.user_password || (!userEditMode ? "qlalfqjsgh11" : undefined);
+      await apiClient.post("/admin/users/with-dept", {
+        userInfo: {
+          user_id: userForm.user_id,
+          user_name: userForm.user_name,
+          user_name_eng: userForm.user_name_eng || undefined,
+          user_password: password || undefined,
+          email: userEditMode ? (userForm.email || null) : (userForm.email || undefined),
+          tel: userForm.tel || undefined,
+          cell_phone: userEditMode ? (userForm.cell_phone || null) : (userForm.cell_phone || undefined),
+          sabun: userEditMode ? (userForm.sabun || null) : (userForm.sabun || undefined),
+          position_name: userForm.position_name || undefined,
+          dept_code: userForm.dept_code || undefined,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name || undefined,
+          status: userForm.status || "active",
+        },
+        mainDept: userForm.dept_code ? {
+          dept_code: userForm.dept_code,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name,
+          position_name: userForm.position_name || undefined,
+        } : undefined,
+        isUpdate: userEditMode,
+      });
+      toast.success(userEditMode ? "사원 정보가 수정되었어요." : "사원이 추가되었어요.");
+      setUserModalOpen(false);
+      fetchMembers();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setDeptSaving(false);
+    }
+  };
+
+  // EDataTable 컬럼 정의 (사원 목록)
+  const companyMemberColumns: EDataTableColumn[] = [
+    { key: "sabun", label: "사번", width: "w-[80px]", render: (val: any) => <span className="text-[13px]">{val || "-"}</span> },
+    { key: "user_name", label: "이름", width: "w-[90px]" },
+    { key: "user_id", label: "사용자ID", width: "w-[100px]" },
+    { key: "position_name", label: "직급", width: "w-[80px]", render: (val: any) => <span>{val || "-"}</span> },
+    { key: "cell_phone", label: "휴대폰", width: "w-[120px]", render: (val: any) => <span>{val || "-"}</span> },
+    { key: "email", label: "이메일" },
+  ];
+
+  /* ── 트리 렌더 ── */
+  const renderTree = (nodes: DeptNode[], depth = 0) => {
+    return nodes.map((node) => {
+      const isExpanded = expandedDepts.has(node.dept_code);
+      const isSelected = selectedDeptCode === node.dept_code;
+      const hasChildren = node.children.length > 0;
+      return (
+        <div key={node.dept_code}>
+          <div
+            className={cn(
+              "flex items-center gap-1.5 px-3 py-2 cursor-pointer text-sm transition-colors hover:bg-accent",
+              isSelected && "bg-primary/10 text-primary font-semibold border-l-2 border-primary",
+              !isSelected && "border-l-2 border-transparent",
+            )}
+            style={{ paddingLeft: `${12 + depth * 20}px` }}
+            onClick={() => setSelectedDeptCode(isSelected ? null : node.dept_code)}
+          >
+            {hasChildren ? (
+              <button
+                className="p-0.5 rounded hover:bg-accent"
+                onClick={(e) => { e.stopPropagation(); toggleExpand(node.dept_code); }}
+              >
+                <ChevronRight className={cn("w-3.5 h-3.5 transition-transform", isExpanded && "rotate-90")} />
+              </button>
+            ) : (
+              <span className="w-4.5" />
+            )}
+            {isExpanded && hasChildren
+              ? <FolderOpen className="w-4 h-4 text-muted-foreground" />
+              : <Folder className="w-4 h-4 text-muted-foreground" />
+            }
+            <span className="truncate">{node.dept_name}</span>
+            {node.status === "inactive" && <Badge variant="outline" className="text-[10px] px-1 py-0">비활성</Badge>}
+          </div>
+          {isExpanded && hasChildren && renderTree(node.children, depth + 1)}
+        </div>
+      );
+    });
+  };
+
+  /* ── 이미지 업로드 박스 ── */
+  const ImageUploadBox = ({
+    label, preview, inputRef, field, setPreview,
+  }: {
+    label: string;
+    preview: string | null;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    field: string;
+    setPreview: React.Dispatch<React.SetStateAction<string | null>>;
+  }) => (
+    <div className="flex flex-col gap-2">
+      <Label className="text-sm font-medium">{label}</Label>
+      <div className="relative w-40 h-40 rounded-lg border-2 border-dashed border-border bg-muted/50 flex items-center justify-center overflow-hidden group">
+        {preview ? (
+          <>
+            <img src={preview} alt={label} className="w-full h-full object-contain" />
+            {editMode && (
+              <div className="absolute inset-0 bg-foreground/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                <Button size="sm" variant="secondary" className="h-7 text-xs" onClick={() => inputRef.current?.click()}>
+                  <Upload className="w-3 h-3 mr-1" /> 변경
+                </Button>
+                <Button size="sm" variant="destructive" className="h-7 text-xs" onClick={() => {
+                  setPreview(null);
+                  setCompanyForm((prev) => ({ ...prev, [field]: null }));
+                }}>
+                  <X className="w-3 h-3" />
+                </Button>
+              </div>
+            )}
+          </>
+        ) : (
+          <button
+            className="flex flex-col items-center gap-1.5 text-muted-foreground"
+            onClick={() => editMode && inputRef.current?.click()}
+            disabled={!editMode}
+          >
+            <ImageIcon className="w-8 h-8" />
+            <span className="text-xs">{editMode ? "이미지 업로드" : "이미지 없음"}</span>
+          </button>
+        )}
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={(e) => handleImageUpload(e, field, setPreview)}
+      />
+    </div>
+  );
+
+  return (
+    <div className="h-[calc(100vh-4rem)] flex flex-col overflow-hidden">
+      {/* 탭 컨테이너 */}
+      <Tabs defaultValue="company" className="flex flex-col h-full gap-0 min-h-0">
+        {/* 탭 헤더 — border-b 스타일 */}
+        <div className="shrink-0 border-b bg-background px-4">
+          <TabsList className="h-12 bg-transparent gap-1">
+            <TabsTrigger
+              value="company"
+              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 gap-1.5"
+            >
+              <Building2 className="w-4 h-4" /> 회사정보
+            </TabsTrigger>
+          </TabsList>
+        </div>
+
+        {/* ===================== Tab 1: 회사정보 ===================== */}
+        <TabsContent value="company" className="flex-1 overflow-auto mt-0 p-4">
+          <div className="border rounded-lg bg-card">
+            {/* 패널 헤더 */}
+            <div className="flex items-center justify-between px-6 py-3 border-b bg-muted/30">
+              <div className="font-semibold flex items-center gap-2 text-sm">
+                <Building2 className="w-4 h-4 text-muted-foreground" />
+                <span>회사 기본정보</span>
+              </div>
+              <div className="flex gap-1.5">
+                {editMode ? (
+                  <>
+                    <Button variant="outline" size="sm" onClick={cancelEdit}>취소</Button>
+                    <Button size="sm" onClick={handleCompanySave} disabled={saving}>
+                      {saving ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <Save className="w-3.5 h-3.5 mr-1" />}
+                      저장해요
+                    </Button>
+                  </>
+                ) : (
+                  <Button size="sm" onClick={() => setEditMode(true)}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {companyLoading ? (
+              <div className="flex items-center justify-center py-20">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : (
+              <div className="p-6 space-y-6">
+                {/* 기본 정보 섹션 제목 */}
+                <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  기본 정보
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+
+                {/* 기본 정보 그리드 (2열) */}
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">회사코드</Label>
+                    <Input value={companyForm.company_code || ""} className="h-9 bg-muted/50" disabled readOnly />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      회사명 <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      value={companyForm.company_name || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, company_name: e.target.value }))}
+                      placeholder="회사명을 입력해주세요"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">사업자등록번호</Label>
+                    <Input
+                      value={companyForm.business_registration_number || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, business_registration_number: e.target.value }))}
+                      placeholder="000-00-00000"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대표자명</Label>
+                    <Input
+                      value={companyForm.representative_name || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, representative_name: e.target.value }))}
+                      placeholder="대표자명"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">대표전화</Label>
+                    <Input
+                      value={companyForm.representative_phone || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, representative_phone: e.target.value }))}
+                      placeholder="02-0000-0000"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">팩스</Label>
+                    <Input
+                      value={companyForm.fax || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, fax: e.target.value }))}
+                      placeholder="02-0000-0001"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">이메일</Label>
+                    <Input
+                      value={companyForm.email || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, email: e.target.value }))}
+                      placeholder="example@company.com"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">홈페이지</Label>
+                    <Input
+                      value={companyForm.website || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, website: e.target.value }))}
+                      placeholder="https://www.company.com"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                  <div className="col-span-2 space-y-1.5">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">주소</Label>
+                    <Input
+                      value={companyForm.address || ""}
+                      onChange={(e) => setCompanyForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="회사 주소를 입력해주세요"
+                      className="h-9" disabled={!editMode}
+                    />
+                  </div>
+                </div>
+
+                {/* 이미지 섹션 */}
+                <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  이미지 관리
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <div className="flex gap-6">
+                  <ImageUploadBox label="회사 이미지" preview={imagePreview} inputRef={imageRef} field="company_image" setPreview={setImagePreview} />
+                  <ImageUploadBox label="회사 로고" preview={logoPreview} inputRef={logoRef} field="company_logo" setPreview={setLogoPreview} />
+                  <ImageUploadBox label="직인" preview={sealPreview} inputRef={sealRef} field="company_seal" setPreview={setSealPreview} />
+                </div>
+              </div>
+            )}
+          </div>
+        </TabsContent>
+
+      </Tabs>
+
+      {/* ── 부서 등록/수정 모달 ── */}
+      <Dialog open={deptModalOpen} onOpenChange={setDeptModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{deptEditMode ? "부서 수정" : "부서 등록"}</DialogTitle>
+            <DialogDescription>{deptEditMode ? "부서 정보를 수정해요." : "새로운 부서를 등록해요."}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서코드</Label>
+              <Input
+                value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
+                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성됩니다")}
+                className="h-9" disabled readOnly
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서명 <span className="text-destructive">*</span></Label>
+              <Input
+                value={deptForm.dept_name || ""}
+                onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
+                placeholder="부서명" className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">상위부서</Label>
+              <Select value={deptForm.parent_dept_code || ""} onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="상위부서 선택 (선택사항)" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">없음</SelectItem>
+                  {depts.filter((d) => d.dept_code !== deptForm.dept_code).map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name} ({d.dept_code})</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeptModalOpen(false)}>취소</Button>
+            <Button onClick={handleDeptSave} disabled={deptSaving}>
+              {deptSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 사원 추가/수정 모달 ── */}
+      <Dialog open={userModalOpen} onOpenChange={setUserModalOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{userEditMode ? "사원 정보 수정" : "사원 추가"}</DialogTitle>
+            <DialogDescription>
+              {userEditMode
+                ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정해요.`
+                : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가해요.` : "사원을 추가해요."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-sm">사용자 ID <span className="text-destructive">*</span></Label>
+              <Input value={userForm.user_id || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
+                placeholder="사용자 ID" className="h-9" disabled={userEditMode} />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">이름 <span className="text-destructive">*</span></Label>
+              <Input value={userForm.user_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
+                placeholder="이름" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">사번</Label>
+              <Input value={userForm.sabun || ""} onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
+                placeholder="사번" className="h-9" autoComplete="off" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">비밀번호</Label>
+              <Input value={userForm.user_password || ""} onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
+                placeholder={userEditMode ? "변경 시에만 입력" : "미입력 시 qlalfqjsgh11"} className="h-9" type="password" autoComplete="new-password" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">직급</Label>
+              <Input value={userForm.position_name || ""} onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
+                placeholder="직급" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">부서 <span className="text-destructive">*</span></Label>
+              <Select value={userForm.dept_code || ""} onValueChange={(v) => setUserForm((p) => ({ ...p, dept_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="부서 선택" /></SelectTrigger>
+                <SelectContent>
+                  {depts.map((d) => <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">휴대폰</Label>
+              <Input value={userForm.cell_phone || ""} onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
+                placeholder="010-0000-0000" className={cn("h-9", formErrors.cell_phone && "border-destructive")} />
+              {formErrors.cell_phone && <p className="text-xs text-destructive">{formErrors.cell_phone}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">이메일</Label>
+              <Input value={userForm.email || ""} onChange={(e) => handleUserFormChange("email", e.target.value)}
+                placeholder="example@email.com" className={cn("h-9", formErrors.email && "border-destructive")} />
+              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">입사일</Label>
+              <Input type="date" value={userForm.regdate || ""} onChange={(e) => setUserForm((p) => ({ ...p, regdate: e.target.value }))} className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">퇴사일</Label>
+              <Input type="date" value={userForm.end_date || ""} onChange={(e) => setUserForm((p) => ({ ...p, end_date: e.target.value }))} className="h-9" />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserModalOpen(false)}>취소</Button>
+            <Button onClick={handleUserSave} disabled={deptSaving}>
+              {deptSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/master-data/department/page.tsx b/frontend/app/(main)/COMPANY_9/master-data/department/page.tsx
new file mode 100644
index 00000000..23f70f2b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/master-data/department/page.tsx
@@ -0,0 +1,772 @@
+"use client";
+
+/**
+ * 부서관리 — 하드코딩 페이지
+ *
+ * 좌측: 부서 목록 (dept_info)
+ * 우측: 선택한 부서의 인원 목록 (user_info)
+ *
+ * 모달: 부서 등록(dept_info), 사원 추가(user_info)
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Users, Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import * as departmentAPI from "@/lib/api/department";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { formatField, validateField, validateForm } from "@/lib/utils/validation";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const DEPT_TABLE = "dept_info";
+const USER_TABLE = "user_info";
+const DEPT_COLUMNS = [
+  { key: "parent_dept_code", label: "상위부서" },
+  { key: "status", label: "상태" },
+];
+
+export default function DepartmentPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 부서
+  const [depts, setDepts] = useState<any[]>([]);
+  const [deptLoading, setDeptLoading] = useState(false);
+  const [deptCount, setDeptCount] = useState(0);
+  const [selectedDeptId, setSelectedDeptId] = useState<string | null>(null);
+
+  // 우측: 사원
+  const [members, setMembers] = useState<any[]>([]);
+  const [memberLoading, setMemberLoading] = useState(false);
+
+  // 부서 모달
+  const [deptModalOpen, setDeptModalOpen] = useState(false);
+  const [deptEditMode, setDeptEditMode] = useState(false);
+  const [deptForm, setDeptForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 사원 모달
+  const [userModalOpen, setUserModalOpen] = useState(false);
+  const [userEditMode, setUserEditMode] = useState(false);
+  const [userForm, setUserForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+
+  // 사원 탭 (재직중/퇴사)
+  const [memberTab, setMemberTab] = useState<"active" | "resigned">("active");
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-department", DEPT_TABLE, DEPT_COLUMNS);
+
+  // 부서 조회
+  const fetchDepts = useCallback(async () => {
+    setDeptLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${DEPT_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      // dept_info에 id 컬럼이 없으므로 dept_code를 id로 매핑
+      const data = raw.map((d: any) => ({ ...d, id: d.id || d.dept_code }));
+      setDepts(data);
+      setDeptCount(res.data?.data?.total || data.length);
+    } catch (err) {
+      toast.error("부서 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setDeptLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => { fetchDepts(); }, [fetchDepts]);
+
+  // 선택된 부서
+  const selectedDept = depts.find((d) => d.id === selectedDeptId);
+  const selectedDeptCode = selectedDept?.dept_code || null;
+
+  // 우측: 사원 조회 (부서 미선택 → 전체, 선택 → 해당 부서)
+  const fetchMembers = useCallback(async () => {
+    setMemberLoading(true);
+    try {
+      const filters = selectedDeptCode
+        ? [{ columnName: "dept_code", operator: "equals", value: selectedDeptCode }]
+        : [];
+      const res = await apiClient.post(`/table-management/tables/${USER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      setMembers(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setMembers([]); } finally { setMemberLoading(false); }
+  }, [selectedDeptCode]);
+
+  useEffect(() => { fetchMembers(); }, [fetchMembers]);
+
+  // 부서 등록
+  const openDeptRegister = async () => {
+    setDeptForm({});
+    setDeptEditMode(false);
+    setPreviewCode(null);
+    setNumberingRuleId(null);
+    setDeptModalOpen(true);
+
+    // 채번 규칙 조회 (dept_info.dept_code) — path params로 직접 호출
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/dept_info/dept_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시
+    }
+  };
+
+  const openDeptEdit = () => {
+    if (!selectedDept) return;
+    setDeptForm({ ...selectedDept });
+    setDeptEditMode(true);
+    setDeptModalOpen(true);
+  };
+
+  const handleDeptSave = async () => {
+    if (!deptForm.dept_name) { toast.error("부서명은 필수입니다."); return; }
+    const parentCode = (deptForm.parent_dept_code && deptForm.parent_dept_code !== "none") ? deptForm.parent_dept_code : null;
+    setSaving(true);
+    try {
+      if (deptEditMode && deptForm.dept_code) {
+        const response = await departmentAPI.updateDepartment(deptForm.dept_code, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+        });
+        if (!response.success) { toast.error((response as any).error || "수정에 실패했습니다."); return; }
+        toast.success("수정되었습니다.");
+      } else {
+        const companyCode = user?.companyCode || "";
+
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+
+        const response = await departmentAPI.createDepartment(companyCode, {
+          dept_name: deptForm.dept_name,
+          parent_dept_code: parentCode,
+          dept_code: allocatedCode,
+        });
+        if (!response.success) {
+          toast.error((response as any).error || "등록에 실패했습니다.");
+          return;
+        }
+        toast.success("등록되었습니다.");
+      }
+      setDeptModalOpen(false);
+      fetchDepts();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 부서 삭제
+  const handleDeptDelete = async () => {
+    if (!selectedDeptCode) return;
+    const ok = await confirm("부서를 삭제하시겠습니까?", {
+      description: "해당 부서에 소속된 사원 정보는 유지됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      const response = await departmentAPI.deleteDepartment(selectedDeptCode);
+      if (!response.success) { toast.error((response as any).error || "삭제에 실패했습니다."); return; }
+      toast.success(response.message || "삭제되었습니다.");
+      setSelectedDeptId(null);
+      fetchDepts();
+    } catch { toast.error("삭제에 실패했습니다."); }
+  };
+
+  // 사원 추가/수정
+  const openUserModal = (editData?: any) => {
+    if (editData) {
+      setUserEditMode(true);
+      setUserForm({ ...editData, user_password: "" });
+    } else {
+      setUserEditMode(false);
+      setUserForm({ dept_code: selectedDeptCode || "", user_password: "" });
+    }
+    setFormErrors({});
+    setUserModalOpen(true);
+  };
+
+  const handleUserFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setUserForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => { const n = { ...prev }; if (error) n[field] = error; else delete n[field]; return n; });
+  };
+
+  const handleUserSave = async () => {
+    if (!userForm.user_id) { toast.error("사용자 ID는 필수입니다."); return; }
+    if (!userForm.user_name) { toast.error("사용자 이름은 필수입니다."); return; }
+    if (!userForm.dept_code) { toast.error("부서는 필수입니다."); return; }
+    const errors = validateForm(userForm, ["cell_phone", "email"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) { toast.error("입력 형식을 확인해주세요."); return; }
+
+    setSaving(true);
+    try {
+      // 비밀번호 미입력 시 기본값 (신규만)
+      const password = userForm.user_password || (!userEditMode ? "qlalfqjsgh11" : undefined);
+
+      await apiClient.post("/admin/users/with-dept", {
+        userInfo: {
+          user_id: userForm.user_id,
+          user_name: userForm.user_name,
+          user_name_eng: userForm.user_name_eng || undefined,
+          user_password: password || undefined,
+          email: userEditMode ? (userForm.email || null) : (userForm.email || undefined),
+          tel: userForm.tel || undefined,
+          cell_phone: userEditMode ? (userForm.cell_phone || null) : (userForm.cell_phone || undefined),
+          sabun: userEditMode ? (userForm.sabun || null) : (userForm.sabun || undefined),
+          position_name: userForm.position_name || undefined,
+          dept_code: userForm.dept_code || undefined,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name || undefined,
+          status: userForm.status || "active",
+          end_date: userForm.end_date || null,
+        },
+        mainDept: userForm.dept_code ? {
+          dept_code: userForm.dept_code,
+          dept_name: depts.find((d) => d.dept_code === userForm.dept_code)?.dept_name,
+          position_name: userForm.position_name || undefined,
+        } : undefined,
+        isUpdate: userEditMode,
+      });
+      toast.success(userEditMode ? "사원 정보가 수정되었습니다." : "사원이 추가되었습니다.");
+      setUserModalOpen(false);
+      fetchMembers();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (depts.length === 0) return;
+    const data = depts.map((d) => ({
+      부서코드: d.dept_code, 부서명: d.dept_name, 상위부서: d.parent_dept_code, 상태: d.status,
+    }));
+    await exportToExcel(data, "부서관리.xlsx", "부서");
+    toast.success("다운로드 완료");
+  };
+
+  // 퇴사일 기반 재직/퇴사 분리
+  const _now = new Date();
+  const today = `${_now.getFullYear()}-${String(_now.getMonth() + 1).padStart(2, "0")}-${String(_now.getDate()).padStart(2, "0")}`;
+  const activeMembers = members.filter((m) => !m.end_date || m.end_date.substring(0, 10) >= today);
+  const resignedMembers = members.filter((m) => m.end_date && m.end_date.substring(0, 10) < today);
+
+  // EDataTable 컬럼 정의 (부서 목록) — ts.visibleColumns 순서를 따름
+  const deptColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      dept_code: { width: "w-[120px]" },
+      dept_name: { minWidth: "min-w-[140px]" },
+      parent_dept_code: {
+        width: "w-[110px]",
+        render: (val: any) => <span className="text-[13px] text-muted-foreground">{val || "\u2014"}</span>,
+      },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "active" ? "default" : "outline"}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val === "active" ? "활성" : (val || "\u2014")}
+            </Badge>
+          ) : null,
+      },
+    };
+    // dept_code, dept_name은 항상 표시 (DEPT_COLUMNS에 포함되지 않으므로 visibleColumns에 없음)
+    const fixedCols: EDataTableColumn[] = [
+      { key: "dept_code", label: "부서코드", ...colProps["dept_code"] },
+      { key: "dept_name", label: "부서명", ...colProps["dept_name"] },
+    ];
+    const dynamicCols = ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+    return [...fixedCols, ...dynamicCols];
+  }, [ts.visibleColumns]);
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={DEPT_TABLE}
+        filterId="c16-department"
+        onFilterChange={setSearchFilters}
+        dataCount={deptCount}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex gap-1.5">
+            <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+              <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+              엑셀 업로드
+            </Button>
+            <Button variant="outline" size="sm" className="h-8" onClick={() => void handleExcelDownload()}>
+              <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 부서 목록 */}
+          <ResizablePanel defaultSize={40} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-3 border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">부서 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {deptCount}건
+                  </span>
+                </div>
+                <div className="flex gap-1.5">
+                  <Button size="sm" onClick={() => void openDeptRegister()}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedDeptCode} onClick={openDeptEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedDeptCode} onClick={() => void handleDeptDelete()}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 부서 테이블 */}
+              <EDataTable
+                columns={deptColumns}
+                data={ts.groupData(depts)}
+                rowKey={(row) => row.id}
+                loading={deptLoading}
+                emptyMessage="등록된 부서가 없어요"
+                selectedId={selectedDeptId}
+                onSelect={(id) => setSelectedDeptId(id)}
+                onRowDoubleClick={() => openDeptEdit()}
+                showRowNumber
+                showPagination={false}
+                draggableColumns={false}
+                columnOrderKey="c16-department"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 사원 목록 */}
+          <ResizablePanel defaultSize={60} minSize={30}>
+            <div className="flex flex-col h-full">
+              {!selectedDeptId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">부서를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 부서를 선택하면 소속 사원 목록이 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 디테일 헤더 */}
+                  <div className="flex items-center gap-3 px-4 py-3 border-b bg-muted shrink-0">
+                    <span className="text-[13px] font-bold">{selectedDept?.dept_name || "-"}</span>
+                    <span className="font-mono text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                      {selectedDept?.dept_code || "-"}
+                    </span>
+                    <div className="ml-auto">
+                      <Button variant="outline" size="sm" onClick={() => openUserModal()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        사원 추가
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 재직/퇴사 탭 */}
+                  <div className="flex border-b border-border px-4 shrink-0 bg-muted">
+                    <button
+                      onClick={() => setMemberTab("active")}
+                      className={cn("px-4 py-2.5 text-xs font-semibold border-b-2 transition-colors",
+                        memberTab === "active" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+                      )}
+                    >
+                      재직중
+                      {activeMembers.length > 0 && (
+                        <Badge variant="secondary" className="ml-1.5 text-[10px] px-1.5 py-0">{activeMembers.length}</Badge>
+                      )}
+                    </button>
+                    <button
+                      onClick={() => setMemberTab("resigned")}
+                      className={cn("px-4 py-2.5 text-xs font-semibold border-b-2 transition-colors",
+                        memberTab === "resigned" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+                      )}
+                    >
+                      퇴사
+                      {resignedMembers.length > 0 && (
+                        <Badge variant="secondary" className="ml-1.5 text-[10px] px-1.5 py-0">{resignedMembers.length}</Badge>
+                      )}
+                    </button>
+                  </div>
+
+                  <div className="flex-1 overflow-auto">
+                    {memberLoading ? (
+                      <div className="flex flex-col items-center justify-center py-12">
+                        <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                      </div>
+                    ) : memberTab === "active" ? (
+                      activeMembers.length === 0 ? (
+                        <div className="text-center py-8 text-muted-foreground text-sm">재직중인 사원이 없어요</div>
+                      ) : (
+                        <Table noWrapper>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center px-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사번</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이름</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사용자ID</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">직급</TableHead>
+                              <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">휴대폰</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {activeMembers.map((member, idx) => (
+                              <TableRow
+                                key={member.id || member.user_id}
+                                className="cursor-pointer select-none hover:bg-muted/50"
+                                onDoubleClick={() => openUserModal(member)}
+                              >
+                                <TableCell className="text-center text-[13px] text-muted-foreground px-2">{idx + 1}</TableCell>
+                                <TableCell className="font-mono text-[13px] text-muted-foreground">{member.sabun || "—"}</TableCell>
+                                <TableCell className="text-sm font-medium">{member.user_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.user_id}</TableCell>
+                                <TableCell className="text-[13px]">{member.position_name || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.cell_phone || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.email || "—"}</TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      )
+                    ) : (
+                      resignedMembers.length === 0 ? (
+                        <div className="text-center py-8 text-muted-foreground text-sm">퇴사한 사원이 없어요</div>
+                      ) : (
+                        <Table noWrapper>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center px-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사번</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이름</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사용자ID</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">직급</TableHead>
+                              <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">휴대폰</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">퇴사일</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {resignedMembers.map((member, idx) => (
+                              <TableRow
+                                key={member.id || member.user_id}
+                                className="cursor-pointer select-none hover:bg-muted/50"
+                                onDoubleClick={() => openUserModal(member)}
+                              >
+                                <TableCell className="text-center text-[13px] text-muted-foreground px-2">{idx + 1}</TableCell>
+                                <TableCell className="font-mono text-[13px] text-muted-foreground">{member.sabun || "—"}</TableCell>
+                                <TableCell className="text-sm font-medium">{member.user_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.user_id}</TableCell>
+                                <TableCell className="text-[13px]">{member.position_name || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.cell_phone || "—"}</TableCell>
+                                <TableCell className="text-[13px]">{member.email || "—"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{member.end_date ? member.end_date.substring(0, 10) : "—"}</TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      )
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 부서 등록/수정 모달 */}
+      <Dialog open={deptModalOpen} onOpenChange={setDeptModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{deptEditMode ? "부서 수정" : "부서 등록"}</DialogTitle>
+            <DialogDescription>{deptEditMode ? "부서 정보를 수정합니다." : "새로운 부서를 등록합니다."}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-2">
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">부서코드</span>
+              <Input
+                value={deptEditMode ? (deptForm.dept_code || "") : (previewCode || "")}
+                placeholder={deptEditMode ? "" : (numberingRuleId ? "채번 조회 중..." : "자동 생성돼요")}
+                className="h-9"
+                disabled
+                readOnly
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                부서명 <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={deptForm.dept_name || ""}
+                onChange={(e) => setDeptForm((p) => ({ ...p, dept_name: e.target.value }))}
+                placeholder="부서명을 입력해 주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">상위부서</span>
+              <Select
+                value={deptForm.parent_dept_code || ""}
+                onValueChange={(v) => setDeptForm((p) => ({ ...p, parent_dept_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="상위부서 선택 (선택사항)" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">없음</SelectItem>
+                  {depts.filter((d) => d.dept_code !== deptForm.dept_code).map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name} ({d.dept_code})</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeptModalOpen(false)}>취소</Button>
+            <Button onClick={() => void handleDeptSave()} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 사원 추가/수정 모달 */}
+      <Dialog open={userModalOpen} onOpenChange={setUserModalOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{userEditMode ? "사원 정보 수정" : "사원 추가"}</DialogTitle>
+            <DialogDescription>
+              {userEditMode
+                ? `${userForm.user_name} (${userForm.user_id}) 사원 정보를 수정합니다.`
+                : selectedDept ? `${selectedDept.dept_name} 부서에 사원을 추가합니다.` : "사원을 추가합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                사용자 ID <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={userForm.user_id || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_id: e.target.value }))}
+                placeholder="사용자 ID를 입력해 주세요"
+                className="h-9"
+                disabled={userEditMode}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                이름 <span className="text-destructive">*</span>
+              </span>
+              <Input
+                value={userForm.user_name || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_name: e.target.value }))}
+                placeholder="이름을 입력해 주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">사번</span>
+              <Input
+                value={userForm.sabun || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, sabun: e.target.value }))}
+                placeholder="사번"
+                className="h-9"
+                autoComplete="off"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">비밀번호</span>
+              <Input
+                value={userForm.user_password || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, user_password: e.target.value }))}
+                placeholder={userEditMode ? "변경 시에만 입력해 주세요" : "미입력 시 기본값이 설정돼요"}
+                className="h-9"
+                type="password"
+                autoComplete="new-password"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">직급</span>
+              <Input
+                value={userForm.position_name || ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, position_name: e.target.value }))}
+                placeholder="직급"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                부서 <span className="text-destructive">*</span>
+              </span>
+              <Select value={userForm.dept_code || ""} onValueChange={(v) => setUserForm((p) => ({ ...p, dept_code: v }))}>
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="부서를 선택해 주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {depts.map((d) => (
+                    <SelectItem key={d.dept_code} value={d.dept_code}>{d.dept_name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">휴대폰</span>
+              <Input
+                value={userForm.cell_phone || ""}
+                onChange={(e) => handleUserFormChange("cell_phone", e.target.value)}
+                placeholder="010-0000-0000"
+                className={cn("h-9", formErrors.cell_phone && "border-destructive")}
+              />
+              {formErrors.cell_phone && <p className="text-xs text-destructive">{formErrors.cell_phone}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">이메일</span>
+              <Input
+                value={userForm.email || ""}
+                onChange={(e) => handleUserFormChange("email", e.target.value)}
+                placeholder="example@email.com"
+                className={cn("h-9", formErrors.email && "border-destructive")}
+              />
+              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">입사일</span>
+              <Input
+                type="date"
+                value={userForm.regdate ? userForm.regdate.substring(0, 10) : ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, regdate: e.target.value }))}
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className="block text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">퇴사일</span>
+              <Input
+                type="date"
+                value={userForm.end_date ? userForm.end_date.substring(0, 10) : ""}
+                onChange={(e) => setUserForm((p) => ({ ...p, end_date: e.target.value }))}
+                className="h-9"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserModalOpen(false)}>취소</Button>
+            <Button onClick={() => void handleUserSave()} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={DEPT_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchDepts()}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/master-data/item-info/page.tsx b/frontend/app/(main)/COMPANY_9/master-data/item-info/page.tsx
new file mode 100644
index 00000000..375fd900
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/master-data/item-info/page.tsx
@@ -0,0 +1,596 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  Pencil, Copy, Settings2, Check, ChevronsUpDown,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { ImageUpload } from "@/components/common/ImageUpload";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { toast } from "sonner";
+
+// 검색 가능한 카테고리 콤보박스
+function CategoryCombobox({ options, value, onChange, placeholder }: {
+  options: { code: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selected = options.find((o) => o.code === value);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
+          <span className="truncate">{selected?.label || <span className="text-muted-foreground">{placeholder}</span>}</span>
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8" />
+          <CommandList>
+            <CommandEmpty>검색 결과가 없어요</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {options.map((opt) => (
+                <CommandItem key={opt.code} value={opt.label} onSelect={() => { onChange(opt.code); setOpen(false); }}>
+                  <Check className={cn("mr-2 h-3.5 w-3.5", value === opt.code ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 다중 선택 카테고리 콤보박스
+function MultiCategoryCombobox({ options, value, onChange, placeholder }: {
+  options: { code: string; label: string }[];
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selectedCodes = value ? value.split(",").map((c) => c.trim()).filter(Boolean) : [];
+  const selectedLabels = selectedCodes.map((code) => options.find((o) => o.code === code)?.label || code).filter(Boolean);
+
+  const toggle = (code: string) => {
+    const next = selectedCodes.includes(code)
+      ? selectedCodes.filter((c) => c !== code)
+      : [...selectedCodes, code];
+    onChange(next.join(","));
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
+          <span className="truncate">
+            {selectedLabels.length > 0
+              ? selectedLabels.join(", ")
+              : <span className="text-muted-foreground">{placeholder}</span>}
+          </span>
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8" />
+          <CommandList>
+            <CommandEmpty>검색 결과가 없어요</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {options.map((opt) => (
+                <CommandItem key={opt.code} value={opt.label} onSelect={() => toggle(opt.code)}>
+                  <Check className={cn("mr-2 h-3.5 w-3.5", selectedCodes.includes(opt.code) ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const TABLE_NAME = "item_info";
+
+const GRID_COLUMNS = [
+  { key: "item_number", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "image", label: "이미지", type: "image" },
+  { key: "division", label: "관리품목" },
+  { key: "type", label: "품목구분" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "material", label: "재질" },
+  { key: "status", label: "상태" },
+  { key: "selling_price", label: "판매가격", align: "right" as const, formatNumber: true },
+  { key: "standard_price", label: "기준단가", align: "right" as const, formatNumber: true },
+  { key: "weight", label: "중량", align: "right" as const },
+  { key: "inventory_unit", label: "재고단위" },
+  { key: "user_type01", label: "대분류" },
+  { key: "user_type02", label: "중분류" },
+  { key: "lead_time", label: "생산 리드타임(일)", align: "right" as const },
+];
+
+const FORM_FIELDS = [
+  { key: "item_number", label: "품목코드", type: "text", required: true, disabled: true, placeholder: "자동 채번" },
+  { key: "item_name", label: "품명", type: "text", required: true },
+  { key: "division", label: "관리품목", type: "multi-category" },
+  { key: "type", label: "품목구분", type: "category" },
+  { key: "size", label: "규격", type: "text" },
+  { key: "unit", label: "단위", type: "category" },
+  { key: "material", label: "재질", type: "category" },
+  { key: "status", label: "상태", type: "category" },
+  { key: "weight", label: "중량", type: "text", placeholder: "숫자 입력 (예: 3.5)" },
+  { key: "volum", label: "부피", type: "text", placeholder: "숫자 입력 (예: 100)" },
+  { key: "specific_gravity", label: "비중", type: "text", placeholder: "숫자 입력 (예: 7.85)" },
+  { key: "inventory_unit", label: "재고단위", type: "category" },
+  { key: "selling_price", label: "판매가격", type: "text" },
+  { key: "standard_price", label: "기준단가", type: "text" },
+  { key: "currency_code", label: "통화", type: "category" },
+  { key: "user_type01", label: "대분류", type: "category" },
+  { key: "user_type02", label: "중분류", type: "category" },
+  { key: "lead_time", label: "생산 리드타임(일)", type: "text", placeholder: "숫자 입력 (예: 7)" },
+  { key: "image", label: "품목 이미지", type: "image" },
+  { key: "meno", label: "메모", type: "textarea" },
+];
+
+const CATEGORY_COLUMNS = [
+  "division", "type", "unit", "material", "status",
+  "inventory_unit", "currency_code", "user_type01", "user_type02",
+];
+
+export default function ItemInfoPage() {
+  const { user } = useAuth();
+  const ts = useTableSettings("c16-item-info", TABLE_NAME, GRID_COLUMNS);
+  const [items, setItems] = useState<any[]>([]);
+  const [rawItems, setRawItems] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editId, setEditId] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+
+  // 엑셀 업로드
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 카테고리 옵션 (API에서 로드)
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 선택된 행
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  // 카테고리 옵션 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      try {
+        const optMap: Record<string, { code: string; label: string }[]> = {};
+        const flatten = (vals: any[]): { code: string; label: string }[] => {
+          const result: { code: string; label: string }[] = [];
+          for (const v of vals) {
+            result.push({ code: v.valueCode, label: v.valueLabel });
+            if (v.children?.length) result.push(...flatten(v.children));
+          }
+          return result;
+        };
+
+        await Promise.all(
+          CATEGORY_COLUMNS.map(async (colName) => {
+            try {
+              const res = await apiClient.get(`/table-categories/${TABLE_NAME}/${colName}/values`);
+              if (res.data?.success && res.data.data?.length > 0) {
+                optMap[colName] = flatten(res.data.data);
+              }
+            } catch { /* skip */ }
+          })
+        );
+        setCategoryOptions(optMap);
+      } catch (err) {
+        console.error("카테고리 로드 실패:", err);
+      }
+    };
+    loadCategories();
+  }, []);
+
+  // 데이터 조회
+  const fetchItems = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1,
+        size: 99999,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        // 쉼표 구분 다중값 지원
+        if (code.includes(",")) {
+          return code.split(",").map((c) => {
+            const trimmed = c.trim();
+            if (!trimmed || trimmed === "s") return "";
+            return categoryOptions[col]?.find((o) => o.code === trimmed)?.label || trimmed;
+          }).filter(Boolean).join(", ");
+        }
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      setRawItems(raw);
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATEGORY_COLUMNS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [categoryOptions, searchFilters]);
+
+  useEffect(() => {
+    fetchItems();
+  }, [fetchItems]);
+
+  // 채번 미리보기 로드
+  const loadNumberingPreview = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${TABLE_NAME}/item_number`);
+      const rule = ruleRes.data?.data;
+      if (rule?.ruleId) {
+        const previewRes = await apiClient.post(`/numbering-rules/${rule.ruleId}/preview`, { formData: {} });
+        return previewRes.data?.data?.generatedCode || "";
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+    return "";
+  };
+
+  // 등록 모달 열기
+  const openRegisterModal = async () => {
+    setFormData({});
+    setIsEditMode(false);
+    setEditId(null);
+    setIsModalOpen(true);
+    // 채번 컬럼 자동 로드
+    const code = await loadNumberingPreview();
+    if (code) setFormData(prev => ({ ...prev, item_number: code }));
+  };
+
+  // 수정 모달 열기
+  const openEditModal = (item: any) => {
+    const raw = rawItems.find((r) => r.id === item.id) || item;
+    setFormData({ ...raw });
+    setIsEditMode(true);
+    setEditId(item.id);
+    setIsModalOpen(true);
+  };
+
+  // 복사 모달 열기
+  const openCopyModal = async (item: any) => {
+    const raw = rawItems.find((r) => r.id === item.id) || item;
+    const { id, item_number, created_date, updated_date, writer, ...rest } = raw;
+    setFormData(rest);
+    setIsEditMode(false);
+    setEditId(null);
+    const code = await loadNumberingPreview();
+    if (code) setFormData(prev => ({ ...prev, item_number: code }));
+    setIsModalOpen(true);
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (!formData.item_name) {
+      toast.error("품명은 필수 입력이에요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      if (isEditMode && editId) {
+        const { id, created_date, updated_date, writer, company_code, ...updateFields } = formData;
+        await apiClient.put(`/table-management/tables/${TABLE_NAME}/edit`, {
+          originalData: { id: editId },
+          updatedData: updateFields,
+        });
+        toast.success("수정되었어요.");
+      } else {
+        const { id, created_date, updated_date, ...insertFields } = formData;
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, { id: crypto.randomUUID(), ...insertFields });
+        toast.success("등록되었어요.");
+      }
+      setIsModalOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      console.error("저장 실패:", err);
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 삭제
+  const handleDelete = async () => {
+    if (!selectedId) {
+      toast.error("삭제할 품목을 선택해 주세요.");
+      return;
+    }
+    if (!confirm("선택한 품목을 삭제할까요?")) return;
+
+    try {
+      await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+        data: [{ id: selectedId }],
+      });
+      toast.success("삭제되었어요.");
+      setSelectedId(null);
+      fetchItems();
+    } catch (err) {
+      console.error("삭제 실패:", err);
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) {
+      toast.error("다운로드할 데이터가 없어요.");
+      return;
+    }
+    const exportData = items.map((item) => {
+      const row: Record<string, any> = {};
+      for (const col of GRID_COLUMNS) {
+        row[col.label] = item[col.key] || "";
+      }
+      return row;
+    });
+    await exportToExcel(exportData, "품목정보.xlsx", "품목정보");
+    toast.success("엑셀 다운로드 완료");
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-0">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={TABLE_NAME}
+        filterId="c16-item-info"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between px-4 py-2.5 border-b">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-semibold">품목 관리</span>
+          <Badge variant="secondary" className="font-mono text-xs">{items.length}건</Badge>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
+          </Button>
+          <div className="mx-1 h-5 w-px bg-border" />
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4 mr-1.5" /> 품목 등록
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!selectedId}
+            onClick={() => {
+              const item = items.find((i) => i.id === selectedId);
+              if (item) openCopyModal(item);
+            }}
+          >
+            <Copy className="w-4 h-4 mr-1.5" /> 복사
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!selectedId}
+            onClick={() => {
+              const item = items.find((i) => i.id === selectedId);
+              if (item) openEditModal(item);
+            }}
+          >
+            <Pencil className="w-4 h-4 mr-1.5" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={!selectedId} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1.5" /> 삭제
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 메인 테이블 */}
+      <EDataTable
+        columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+          key: col.key,
+          label: col.label,
+          align: (col as any).type === "image" ? "center" : col.align as "left" | "center" | "right" | undefined,
+          formatNumber: (col as any).formatNumber,
+          width: (col as any).type === "image" ? "w-[50px]" : undefined,
+          render: (col as any).type === "image" ? (val: any) => (
+            val ? (
+              <img src={String(val).startsWith("http") || String(val).startsWith("/") ? val : `/api/files/preview/${val}`} alt="" className="h-8 w-8 rounded object-cover border border-border mx-auto" onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
+            ) : <div className="h-8 w-8 rounded bg-muted mx-auto" />
+          ) : undefined,
+        }))}
+        data={ts.groupData(items)}
+        loading={loading}
+        emptyMessage="등록된 품목이 없어요"
+        selectedId={selectedId}
+        onSelect={(id) => setSelectedId(id)}
+        onRowDoubleClick={(row) => openEditModal(row)}
+        showRowNumber
+        draggableColumns={false}
+      />
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="sm:max-w-[600px] w-[95vw] max-h-[90vh] flex flex-col p-0 overflow-hidden">
+          <DialogHeader className="shrink-0 px-6 pt-5 pb-3 border-b">
+            <DialogTitle>{isEditMode ? "품목 수정" : "품목 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? "품목 정보를 수정해요." : "새로운 품목을 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-y-auto">
+            <div className="grid grid-cols-2 gap-4 p-6">
+              {FORM_FIELDS.map((field) => (
+                <div
+                  key={field.key}
+                  className={cn("space-y-1.5", (field.type === "textarea" || field.type === "image") && "col-span-2")}
+                >
+                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    {field.label}
+                    {field.required && <span className="text-destructive ml-1">*</span>}
+                  </Label>
+                  {field.type === "image" ? (
+                    <ImageUpload
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      tableName={TABLE_NAME}
+                      recordId={formData.id || ""}
+                      columnName={field.key}
+                      height="h-32"
+                    />
+                  ) : field.type === "multi-category" ? (
+                    <MultiCategoryCombobox
+                      options={categoryOptions[field.key] || []}
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      placeholder={`${field.label} 선택`}
+                    />
+                  ) : field.type === "category" ? (
+                    <CategoryCombobox
+                      options={categoryOptions[field.key] || []}
+                      value={formData[field.key] || ""}
+                      onChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}
+                      placeholder={`${field.label} 선택`}
+                    />
+                  ) : field.type === "textarea" ? (
+                    <Textarea
+                      value={formData[field.key] || ""}
+                      onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                      placeholder={field.label}
+                      rows={3}
+                    />
+                  ) : ["selling_price", "standard_price"].includes(field.key) ? (
+                    <Input
+                      value={formData[field.key] ? Number(String(formData[field.key]).replace(/,/g, "")).toLocaleString() : ""}
+                      onChange={(e) => {
+                        const raw = e.target.value.replace(/[^\d.-]/g, "");
+                        setFormData((prev) => ({ ...prev, [field.key]: raw }));
+                      }}
+                      placeholder={field.placeholder || field.label}
+                      className="h-9 text-right"
+                    />
+                  ) : (
+                    <Input
+                      value={formData[field.key] || ""}
+                      onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                      placeholder={field.placeholder || (field.disabled ? "자동 채번" : field.label)}
+                      disabled={field.disabled && !isEditMode}
+                      className="h-9"
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <DialogFooter className="shrink-0 border-t px-6 py-3">
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving
+                ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+                : <Save className="w-4 h-4 mr-1.5" />
+              }
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 모달 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={TABLE_NAME}
+        userId={user?.userId}
+        onSuccess={() => {
+          fetchItems();
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/master-data/options/page.tsx b/frontend/app/(main)/COMPANY_9/master-data/options/page.tsx
new file mode 100644
index 00000000..7506ad94
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/master-data/options/page.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { Settings2, Tags, Hash } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { CategoryColumnList } from "@/components/table-category/CategoryColumnList";
+import { CategoryValueManager } from "@/components/table-category/CategoryValueManager";
+import { NumberingRuleDesigner } from "@/components/numbering-rule/NumberingRuleDesigner";
+
+const TABS = [
+  { id: "category", label: "카테고리 설정", icon: Tags },
+  { id: "numbering", label: "코드 설정", icon: Hash },
+] as const;
+
+type TabId = (typeof TABS)[number]["id"];
+
+export default function OptionsSettingPage() {
+  const [activeTab, setActiveTab] = useState<TabId>("category");
+
+  const [selectedColumn, setSelectedColumn] = useState<string | null>(null);
+  const [selectedColumnLabel, setSelectedColumnLabel] = useState("");
+  const [selectedTableName, setSelectedTableName] = useState("");
+
+  const [leftWidth, setLeftWidth] = useState(340);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = useCallback(() => {
+    setIsDragging(true);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      setLeftWidth(Math.max(260, Math.min(500, e.clientX - rect.left)));
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
+
+  return (
+    <div className="flex h-full flex-col p-3 gap-3">
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <Settings2 className="h-4 w-4 text-primary" />
+          <h1 className="text-sm font-semibold">옵션 설정</h1>
+        </div>
+        <div className="flex bg-muted rounded-md p-0.5 gap-0.5">
+          {TABS.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  "flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-all",
+                  activeTab === tab.id
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <Icon className="h-3.5 w-3.5" />
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0">
+        {activeTab === "category" && (
+          <div ref={containerRef} className="flex h-full">
+            <div
+              style={{ width: leftWidth }}
+              className="shrink-0 border rounded-lg bg-card overflow-hidden"
+            >
+              <CategoryColumnList
+                tableName=""
+                selectedColumn={selectedColumn}
+                onColumnSelect={(uniqueKey, label, tableName) => {
+                  setSelectedColumn(uniqueKey);
+                  setSelectedColumnLabel(label);
+                  setSelectedTableName(tableName);
+                }}
+              />
+            </div>
+
+            <div
+              onMouseDown={handleMouseDown}
+              className={cn(
+                "w-1.5 mx-0.5 cursor-col-resize rounded-full transition-colors shrink-0",
+                isDragging ? "bg-primary" : "bg-border hover:bg-primary/50"
+              )}
+            />
+
+            <div className="flex-1 min-w-0 border rounded-lg bg-card overflow-hidden">
+              {selectedColumn && selectedTableName ? (
+                <CategoryValueManager
+                  tableName={selectedTableName}
+                  columnName={selectedColumn.includes(".") ? selectedColumn.split(".").pop()! : selectedColumn}
+                  columnLabel={selectedColumnLabel}
+                />
+              ) : (
+                <div className="flex h-full items-center justify-center">
+                  <div className="text-center space-y-2">
+                    <Tags className="h-8 w-8 mx-auto text-muted-foreground/30" />
+                    <p className="text-sm text-muted-foreground">좌측에서 카테고리 컬럼을 선택해주세요</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {activeTab === "numbering" && (
+          <div className="h-full border rounded-lg bg-card overflow-auto">
+            <NumberingRuleDesigner />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/mold/info/page.tsx b/frontend/app/(main)/COMPANY_9/mold/info/page.tsx
new file mode 100644
index 00000000..dcd92eac
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/mold/info/page.tsx
@@ -0,0 +1,1450 @@
+"use client";
+
+/**
+ * 금형정보 — Type E 카드리스트형
+ *
+ * 좌측: 금형 카드 리스트 (이미지 + 코드 + 이름 + 유형뱃지 + 수명진행률)
+ * 우측: 금형 상세 + 탭 3개 (일련번호 / 점검항목 / 부품)
+ * 전용 API: /molds/*
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Plus, Trash2, Loader2, Pencil, Box, Inbox, Search,
+  Wrench, ClipboardCheck, Package, LayoutGrid, List,
+  Image as ImageIcon, Upload, X as XIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+
+// ─── API base ───
+const API = "/mold";
+
+// ─── 상태/유형 매핑 ───
+const STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  ACTIVE: { label: "사용중", variant: "default" },
+  INSPECTION: { label: "점검중", variant: "secondary" },
+  REPAIR: { label: "수리중", variant: "outline" },
+  DISPOSED: { label: "폐기", variant: "destructive" },
+};
+
+const SERIAL_STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  IN_USE: { label: "사용중", variant: "default" },
+  STORED: { label: "보관중", variant: "secondary" },
+  REPAIR: { label: "수리중", variant: "outline" },
+  DISPOSED: { label: "폐기", variant: "destructive" },
+};
+
+// ─── 수명 진행률 색상 ───
+function getProgressColor(pct: number) {
+  if (pct < 60) return "bg-success";
+  if (pct < 85) return "bg-warning";
+  return "bg-destructive";
+}
+
+function getProgressTextColor(pct: number) {
+  if (pct < 60) return "text-success";
+  if (pct < 85) return "text-warning";
+  return "text-destructive";
+}
+
+export default function MoldInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // ─── 좌측: 금형 목록 ───
+  const [molds, setMolds] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedMoldCode, setSelectedMoldCode] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<"list" | "grid">("list");
+
+  // ─── 검색 필터 ───
+  const [filterCode, setFilterCode] = useState("");
+  const [filterName, setFilterName] = useState("");
+  const [filterType, setFilterType] = useState("");
+  const [filterStatus, setFilterStatus] = useState("");
+
+  // ─── 우측: 상세 ───
+  const [detail, setDetail] = useState<any>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [serialSummary, setSerialSummary] = useState<any>(null);
+  const [rightTab, setRightTab] = useState("serial");
+
+  // ─── 일련번호 ───
+  const [serials, setSerials] = useState<any[]>([]);
+  const [serialLoading, setSerialLoading] = useState(false);
+
+  // ─── 점검항목 ───
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspectionLoading, setInspectionLoading] = useState(false);
+
+  // ─── 부품 ───
+  const [parts, setParts] = useState<any[]>([]);
+  const [partLoading, setPartLoading] = useState(false);
+
+  // ─── 모달 ───
+  const [moldModalOpen, setMoldModalOpen] = useState(false);
+  const [moldEditMode, setMoldEditMode] = useState(false);
+  const [moldForm, setMoldForm] = useState<Record<string, any>>({});
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [moldImagePreview, setMoldImagePreview] = useState<string | null>(null);
+  const moldImageRef = React.useRef<HTMLInputElement>(null);
+
+  const [serialModalOpen, setSerialModalOpen] = useState(false);
+  const [serialForm, setSerialForm] = useState<Record<string, any>>({});
+
+  const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
+  const [inspectionForm, setInspectionForm] = useState<Record<string, any>>({});
+
+  const [partModalOpen, setPartModalOpen] = useState(false);
+  const [partForm, setPartForm] = useState<Record<string, any>>({});
+
+  // ─── 금형 목록 조회 ───
+  const fetchMolds = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      if (filterCode) params.mold_code = filterCode;
+      if (filterName) params.mold_name = filterName;
+      if (filterType) params.mold_type = filterType;
+      if (filterStatus) params.operation_status = filterStatus;
+
+      const res = await apiClient.get(API, { params });
+      setMolds(res.data?.data || []);
+    } catch {
+      toast.error("금형 목록을 불러올 수 없어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [filterCode, filterName, filterType, filterStatus]);
+
+  useEffect(() => { fetchMolds(); }, [fetchMolds]);
+
+  // ─── 금형 상세 + 하위 데이터 ───
+  const fetchDetail = useCallback(async (code: string) => {
+    setDetailLoading(true);
+    try {
+      const [detailRes, summaryRes] = await Promise.all([
+        apiClient.get(`${API}/${code}`),
+        apiClient.get(`${API}/${code}/serial-summary`),
+      ]);
+      setDetail(detailRes.data?.data || null);
+      setSerialSummary(summaryRes.data?.data || null);
+    } catch {
+      toast.error("금형 상세를 불러올 수 없어요.");
+    } finally {
+      setDetailLoading(false);
+    }
+  }, []);
+
+  const fetchSerials = useCallback(async (code: string) => {
+    setSerialLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/serials`);
+      setSerials(res.data?.data || []);
+    } catch {
+      toast.error("일련번호를 불러올 수 없어요.");
+    } finally {
+      setSerialLoading(false);
+    }
+  }, []);
+
+  const fetchInspections = useCallback(async (code: string) => {
+    setInspectionLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/inspections`);
+      setInspections(res.data?.data || []);
+    } catch {
+      toast.error("점검항목을 불러올 수 없어요.");
+    } finally {
+      setInspectionLoading(false);
+    }
+  }, []);
+
+  const fetchParts = useCallback(async (code: string) => {
+    setPartLoading(true);
+    try {
+      const res = await apiClient.get(`${API}/${code}/parts`);
+      setParts(res.data?.data || []);
+    } catch {
+      toast.error("부품을 불러올 수 없어요.");
+    } finally {
+      setPartLoading(false);
+    }
+  }, []);
+
+  // 금형 선택
+  const handleSelectMold = useCallback((code: string) => {
+    setSelectedMoldCode(code);
+    setRightTab("serial");
+    fetchDetail(code);
+    fetchSerials(code);
+    fetchInspections(code);
+    fetchParts(code);
+  }, [fetchDetail, fetchSerials, fetchInspections, fetchParts]);
+
+  // 탭 변경 시 재조회
+  useEffect(() => {
+    if (!selectedMoldCode) return;
+    if (rightTab === "serial") fetchSerials(selectedMoldCode);
+    else if (rightTab === "inspection") fetchInspections(selectedMoldCode);
+    else if (rightTab === "part") fetchParts(selectedMoldCode);
+  }, [rightTab, selectedMoldCode, fetchSerials, fetchInspections, fetchParts]);
+
+  // ─── 금형 CRUD ───
+  const handleOpenRegister = async () => {
+    setMoldEditMode(false);
+    setMoldForm({});
+    setMoldImagePreview(null);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setMoldModalOpen(true);
+
+    // 채번 규칙 조회 (mold_mng.mold_code)
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/mold_mng/mold_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시 — 수동 입력 모드
+    }
+  };
+
+  const handleOpenEdit = () => {
+    if (!detail) return;
+    setMoldEditMode(true);
+    setMoldForm({ ...detail });
+    setMoldImagePreview(detail.image_path || null);
+    setMoldModalOpen(true);
+  };
+
+  const handleMoldImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result as string;
+      setMoldImagePreview(result);
+      setMoldForm((prev) => ({ ...prev, image_path: result }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleSaveMold = async () => {
+    // 등록 모드에서 채번이 없으면 수동 입력 필수
+    if (!moldEditMode && !numberingRuleId && !moldForm.mold_code) {
+      toast.error("금형코드와 금형명은 필수예요.");
+      return;
+    }
+    if (!moldForm.mold_name) {
+      toast.error("금형명은 필수예요.");
+      return;
+    }
+    if (moldEditMode && !moldForm.mold_code) {
+      toast.error("금형코드가 없어요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      if (moldEditMode) {
+        await apiClient.put(`${API}/${moldForm.mold_code}`, moldForm);
+        toast.success("금형이 수정되었어요.");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let saveData = { ...moldForm };
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            saveData.mold_code = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했어요.");
+            return;
+          }
+        }
+        await apiClient.post(API, saveData);
+        toast.success("금형이 등록되었어요.");
+      }
+      setMoldModalOpen(false);
+      fetchMolds();
+      if (moldEditMode && selectedMoldCode === moldForm.mold_code) {
+        fetchDetail(moldForm.mold_code);
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteMold = async () => {
+    if (!selectedMoldCode || !detail) return;
+    const ok = await confirm(
+      "금형을 삭제하시겠어요?",
+      { description: `"${detail.mold_name}" 금형과 하위 일련번호, 점검항목, 부품이 모두 삭제돼요.`, variant: "destructive" },
+    );
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/${selectedMoldCode}`);
+      toast.success("금형이 삭제되었어요.");
+      setSelectedMoldCode(null);
+      setDetail(null);
+      fetchMolds();
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 일련번호 CRUD ───
+  const handleSaveSerial = async () => {
+    if (!selectedMoldCode) return;
+    setSaving(true);
+    try {
+      if (serialForm.id) {
+        await apiClient.put(`${API}/serials/${serialForm.id}`, serialForm);
+        toast.success("일련번호가 수정되었어요.");
+      } else {
+        await apiClient.post(`${API}/${selectedMoldCode}/serials`, serialForm);
+        toast.success("일련번호가 등록되었어요.");
+      }
+      setSerialModalOpen(false);
+      setSerialForm({});
+      fetchSerials(selectedMoldCode);
+      fetchDetail(selectedMoldCode);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteSerial = async (id: number) => {
+    const ok = await confirm("이 일련번호를 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/serials/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) {
+        fetchSerials(selectedMoldCode);
+        fetchDetail(selectedMoldCode);
+      }
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 점검항목 CRUD ───
+  const handleAddInspection = async () => {
+    if (!selectedMoldCode) return;
+    if (!inspectionForm.inspection_item) {
+      toast.error("점검항목명은 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      await apiClient.post(`${API}/${selectedMoldCode}/inspections`, inspectionForm);
+      toast.success("점검항목이 등록되었어요.");
+      setInspectionModalOpen(false);
+      setInspectionForm({});
+      fetchInspections(selectedMoldCode);
+    } catch {
+      toast.error("등록에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteInspection = async (id: number) => {
+    const ok = await confirm("이 점검항목을 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/inspections/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) fetchInspections(selectedMoldCode);
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 부품 CRUD ───
+  const handleAddPart = async () => {
+    if (!selectedMoldCode) return;
+    if (!partForm.part_name) {
+      toast.error("부품명은 필수예요.");
+      return;
+    }
+    if (!partForm.replacement_cycle) {
+      toast.error("교체주기는 필수예요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      await apiClient.post(`${API}/${selectedMoldCode}/parts`, partForm);
+      toast.success("부품이 등록되었어요.");
+      setPartModalOpen(false);
+      setPartForm({});
+      fetchParts(selectedMoldCode);
+    } catch {
+      toast.error("등록에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDeletePart = async (id: number) => {
+    const ok = await confirm("이 부품을 삭제하시겠어요?", { variant: "destructive" });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`${API}/parts/${id}`);
+      toast.success("삭제되었어요.");
+      if (selectedMoldCode) fetchParts(selectedMoldCode);
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // ─── 수명 진행률 계산 ───
+  const calcLifePct = (mold: any) => {
+    const max = Number(mold.shot_count) || 0;
+    const current = Number(mold.current_shot_count) || 0;
+    if (max <= 0) return 0;
+    return Math.min(Math.round((current / max) * 100), 100);
+  };
+
+  // ─── 카드 렌더링 ───
+  const renderCard = (mold: any) => {
+    const pct = calcLifePct(mold);
+    const st = STATUS_MAP[mold.operation_status] || { label: mold.operation_status || "-", variant: "secondary" as const };
+    const isSelected = selectedMoldCode === mold.mold_code;
+
+    return (
+      <div
+        key={mold.mold_code}
+        onClick={() => handleSelectMold(mold.mold_code)}
+        className={cn(
+          "rounded-lg border cursor-pointer transition-all overflow-hidden",
+          "hover:shadow-md hover:-translate-y-0.5",
+          isSelected
+            ? "border-primary ring-2 ring-primary/25"
+            : "border-border hover:border-border",
+          viewMode === "list" ? "flex flex-row" : "",
+        )}
+      >
+        {/* 이미지 영역 */}
+        <div className={cn(
+          "bg-muted flex items-center justify-center relative",
+          viewMode === "list"
+            ? "w-[120px] min-w-[120px] min-h-[100px]"
+            : "h-[160px]",
+        )}>
+          {mold.image_path ? (
+            <img
+              src={mold.image_path}
+              alt={mold.mold_name}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <Box className="w-8 h-8 text-muted-foreground/50" />
+          )}
+          <div className="absolute top-2 right-2">
+            <Badge variant={st.variant} className="text-[10px]">{st.label}</Badge>
+          </div>
+        </div>
+
+        {/* 본문 */}
+        <div className={cn("flex-1 p-3", viewMode === "list" && "flex items-center gap-4")}>
+          <div className="flex-1 min-w-0">
+            <p className="text-xs text-muted-foreground font-mono truncate">{mold.mold_code}</p>
+            <p className="text-sm font-semibold truncate">{mold.mold_name}</p>
+            {mold.mold_type && (
+              <Badge variant="outline" className="text-[10px] mt-1">{mold.mold_type}</Badge>
+            )}
+          </div>
+
+          {/* 수명 진행률 */}
+          <div className={cn("mt-2", viewMode === "list" && "mt-0 min-w-[140px]")}>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-[11px] text-muted-foreground">수명</span>
+              <span className={cn("text-[11px] font-mono font-semibold", getProgressTextColor(pct))}>
+                {pct}%
+              </span>
+            </div>
+            <div className="h-1 bg-muted rounded-full overflow-hidden">
+              <div
+                className={cn("h-full rounded-full transition-all", getProgressColor(pct))}
+                style={{ width: `${pct}%` }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // ─── 선택 금형 상세 ───
+  const selectedMold = detail;
+  const lifePct = selectedMold ? calcLifePct(selectedMold) : 0;
+
+  return (
+    <div className="flex flex-col h-full p-3 gap-3 overflow-hidden">
+      {ConfirmDialogComponent}
+
+      {/* 검색 필터 */}
+      <div className="rounded-lg border bg-card p-3">
+        <div className="flex flex-wrap items-end gap-3">
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형코드</Label>
+            <Input
+              className="h-9 w-[160px] text-sm"
+              placeholder="코드를 입력해주세요"
+              value={filterCode}
+              onChange={(e) => setFilterCode(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형명</Label>
+            <Input
+              className="h-9 w-[160px] text-sm"
+              placeholder="금형명을 입력해주세요"
+              value={filterName}
+              onChange={(e) => setFilterName(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">금형유형</Label>
+            <Select value={filterType || "__all__"} onValueChange={(v) => setFilterType(v === "__all__" ? "" : v)}>
+              <SelectTrigger className="h-9 w-[140px] text-sm">
+                <SelectValue placeholder="전체" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체</SelectItem>
+                <SelectItem value="사출금형">사출금형</SelectItem>
+                <SelectItem value="프레스금형">프레스금형</SelectItem>
+                <SelectItem value="다이캐스팅">다이캐스팅</SelectItem>
+                <SelectItem value="단조금형">단조금형</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-[11px] text-muted-foreground">상태</Label>
+            <Select value={filterStatus || "__all__"} onValueChange={(v) => setFilterStatus(v === "__all__" ? "" : v)}>
+              <SelectTrigger className="h-9 w-[140px] text-sm">
+                <SelectValue placeholder="전체" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__all__">전체</SelectItem>
+                <SelectItem value="ACTIVE">사용중</SelectItem>
+                <SelectItem value="INSPECTION">점검중</SelectItem>
+                <SelectItem value="REPAIR">수리중</SelectItem>
+                <SelectItem value="DISPOSED">폐기</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <Button size="sm" className="h-9" onClick={fetchMolds}>
+            <Search className="w-4 h-4 mr-1" />
+            조회
+          </Button>
+        </div>
+      </div>
+
+      {/* 메인 분할 패널 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 rounded-lg border bg-card overflow-hidden">
+        {/* ─── 좌측: 카드 리스트 ─── */}
+        <ResizablePanel defaultSize={35} minSize={20} maxSize={50}>
+          <div className="flex flex-col h-full">
+            {/* 패널 헤더 */}
+            <div className="flex items-center justify-between px-4 py-3 border-b">
+              <div className="flex items-center gap-2">
+                <h3 className="text-sm font-semibold">금형 목록</h3>
+                <span className="text-xs font-mono font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full">
+                  {molds.length}
+                </span>
+              </div>
+              <div className="flex items-center gap-1.5">
+                {/* 뷰 토글 */}
+                <div className="flex border rounded overflow-hidden">
+                  <button
+                    onClick={() => setViewMode("grid")}
+                    className={cn(
+                      "p-1.5 transition-colors",
+                      viewMode === "grid"
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground/50 hover:text-muted-foreground hover:bg-accent",
+                    )}
+                  >
+                    <LayoutGrid className="w-3.5 h-3.5" />
+                  </button>
+                  <button
+                    onClick={() => setViewMode("list")}
+                    className={cn(
+                      "p-1.5 transition-colors border-l",
+                      viewMode === "list"
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground/50 hover:text-muted-foreground hover:bg-accent",
+                    )}
+                  >
+                    <List className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+                <Button size="sm" className="h-8" onClick={handleOpenRegister}>
+                  <Plus className="w-4 h-4 mr-1" />
+                  등록
+                </Button>
+              </div>
+            </div>
+
+            {/* 카드 스크롤 영역 */}
+            <div className="flex-1 overflow-y-auto p-2">
+              {loading ? (
+                <div className="flex items-center justify-center h-40">
+                  <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : molds.length === 0 ? (
+                <div className="flex flex-col items-center justify-center h-40 gap-2 text-muted-foreground">
+                  <Inbox className="w-10 h-10 opacity-40" />
+                  <p className="text-sm">등록된 금형이 없어요.</p>
+                </div>
+              ) : (
+                <div className={cn(
+                  "grid gap-2",
+                  viewMode === "grid"
+                    ? "grid-cols-[repeat(auto-fill,minmax(200px,1fr))]"
+                    : "grid-cols-1",
+                )}>
+                  {molds.map(renderCard)}
+                </div>
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* ─── 우측: 상세 ─── */}
+        <ResizablePanel defaultSize={65} minSize={40}>
+          <div className="flex flex-col h-full overflow-y-auto">
+            {!selectedMoldCode ? (
+              <div className="flex flex-col items-center justify-center h-full gap-3 text-muted-foreground">
+                <Box className="w-14 h-14 opacity-30" />
+                <p className="text-sm font-medium">좌측에서 금형을 선택해주세요</p>
+                <p className="text-xs text-muted-foreground/60">금형을 선택하면 상세 정보를 확인할 수 있어요</p>
+              </div>
+            ) : detailLoading ? (
+              <div className="flex items-center justify-center h-full">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : selectedMold ? (
+              <div className="p-5">
+                {/* 상세 헤더 */}
+                <div className="flex gap-5 pb-5 border-b mb-4">
+                  {/* 이미지 */}
+                  <div className="w-[200px] min-w-[200px] h-[200px] bg-muted rounded-lg flex items-center justify-center border">
+                    {selectedMold.image_path ? (
+                      <img
+                        src={selectedMold.image_path}
+                        alt={selectedMold.mold_name}
+                        className="w-full h-full object-cover rounded-lg"
+                      />
+                    ) : (
+                      <ImageIcon className="w-16 h-16 text-muted-foreground/40" />
+                    )}
+                  </div>
+
+                  {/* 메타 정보 */}
+                  <div className="flex-1 flex flex-col justify-center min-w-0">
+                    <p className="text-xs text-muted-foreground font-mono mb-1">{selectedMold.mold_code}</p>
+                    <h2 className="text-xl font-bold mb-2 truncate">{selectedMold.mold_name}</h2>
+                    <div className="flex gap-1.5 mb-4 flex-wrap">
+                      {selectedMold.mold_type && (
+                        <Badge variant="outline">{selectedMold.mold_type}</Badge>
+                      )}
+                      {selectedMold.category && (
+                        <Badge variant="secondary">{selectedMold.category}</Badge>
+                      )}
+                      <Badge variant={STATUS_MAP[selectedMold.operation_status]?.variant || "secondary"}>
+                        {STATUS_MAP[selectedMold.operation_status]?.label || selectedMold.operation_status || "-"}
+                      </Badge>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-x-5 gap-y-2 text-sm">
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">제조사</span>
+                        <p className="text-foreground">{selectedMold.manufacturer || "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">제작일</span>
+                        <p className="text-foreground">{selectedMold.manufacturing_date || "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">캐비티수</span>
+                        <p className="text-foreground font-mono">{selectedMold.cavity_count ?? "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">수량</span>
+                        <p className="text-foreground font-mono">{selectedMold.mold_quantity ?? "-"}</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">최대수명</span>
+                        <p className="text-foreground font-mono">{Number(selectedMold.shot_count || 0).toLocaleString()}회</p>
+                      </div>
+                      <div>
+                        <span className="text-[11px] text-muted-foreground/60 uppercase tracking-wider font-semibold">보증수명</span>
+                        <p className="text-foreground font-mono">{Number(selectedMold.warranty_shot_count || 0).toLocaleString()}회</p>
+                      </div>
+                    </div>
+
+                    {/* 수명 진행률 바 */}
+                    <div className="mt-3">
+                      <div className="flex items-center justify-between mb-1">
+                        <span className="text-xs text-muted-foreground">수명 사용률</span>
+                        <span className={cn("text-sm font-mono font-semibold", getProgressTextColor(lifePct))}>
+                          {lifePct}%
+                        </span>
+                      </div>
+                      <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                        <div
+                          className={cn("h-full rounded-full transition-all", getProgressColor(lifePct))}
+                          style={{ width: `${lifePct}%` }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 액션 버튼 */}
+                  <div className="flex flex-col gap-2 flex-shrink-0">
+                    <Button variant="outline" size="sm" className="h-8" onClick={handleOpenEdit}>
+                      <Pencil className="w-3.5 h-3.5 mr-1" />
+                      수정
+                    </Button>
+                    <Button variant="outline" size="sm" className="h-8 text-destructive hover:text-destructive" onClick={handleDeleteMold}>
+                      <Trash2 className="w-3.5 h-3.5 mr-1" />
+                      삭제
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 탭 3개 */}
+                <Tabs value={rightTab} onValueChange={setRightTab}>
+                  <TabsList className="w-full justify-start border-b rounded-none bg-transparent h-auto p-0">
+                    <TabsTrigger
+                      value="serial"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <Wrench className="w-4 h-4 mr-1.5" />
+                      일련번호
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {serials.length}
+                      </span>
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="inspection"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <ClipboardCheck className="w-4 h-4 mr-1.5" />
+                      점검항목
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {inspections.length}
+                      </span>
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="part"
+                      className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none"
+                    >
+                      <Package className="w-4 h-4 mr-1.5" />
+                      부품
+                      <span className="ml-1.5 text-xs font-mono bg-primary/10 text-primary px-1.5 rounded-full">
+                        {parts.length}
+                      </span>
+                    </TabsTrigger>
+                  </TabsList>
+
+                  {/* ─── 탭1: 일련번호 ─── */}
+                  <TabsContent value="serial" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">
+                        {serialSummary && (
+                          <>
+                            사용중 {serialSummary.in_use || 0} · 보관중 {serialSummary.stored || 0} · 수리중 {serialSummary.repair || 0} · 폐기 {serialSummary.disposed || 0}
+                          </>
+                        )}
+                      </span>
+                      <Button size="sm" className="h-8" onClick={() => { setSerialForm({}); setSerialModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        일련번호 등록
+                      </Button>
+                    </div>
+                    {serialLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : serials.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <Wrench className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 일련번호가 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">일련번호</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[200px]">샷수 현황</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">보관위치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                              <TableHead className="text-xs w-[80px]">작업</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {serials.map((s: any) => {
+                              const ss = SERIAL_STATUS_MAP[s.status] || { label: s.status || "-", variant: "secondary" as const };
+                              const maxShot = detail?.shot_count || 0;
+                              const curShot = s.current_shot_count || 0;
+                              const pct = maxShot > 0 ? Math.min(Math.round((curShot / maxShot) * 100), 100) : 0;
+                              return (
+                                <TableRow key={s.id}>
+                                  <TableCell className="text-[13px] font-mono font-semibold">{s.serial_number}</TableCell>
+                                  <TableCell>
+                                    <Badge variant={ss.variant} className="text-[10px]">{ss.label}</Badge>
+                                  </TableCell>
+                                  <TableCell>
+                                    {maxShot > 0 ? (
+                                      <div className="space-y-1">
+                                        <div className="flex items-center gap-2">
+                                          <div className="flex-1 h-3 bg-muted rounded-full overflow-hidden">
+                                            <div
+                                              className={cn("h-full rounded-full transition-all", getProgressColor(pct))}
+                                              style={{ width: `${pct}%` }}
+                                            />
+                                          </div>
+                                          <span className={cn("text-xs font-bold min-w-[36px] text-right", getProgressTextColor(pct))}>
+                                            {pct}%
+                                          </span>
+                                        </div>
+                                        <p className="text-[11px] text-muted-foreground">
+                                          {curShot.toLocaleString()} / {maxShot.toLocaleString()}
+                                        </p>
+                                      </div>
+                                    ) : (
+                                      <span className="text-xs text-muted-foreground">-</span>
+                                    )}
+                                  </TableCell>
+                                  <TableCell className="text-[13px]">{s.storage_location || "-"}</TableCell>
+                                  <TableCell className="text-[13px] text-muted-foreground">{s.remarks || "-"}</TableCell>
+                                  <TableCell>
+                                    <div className="flex items-center gap-1">
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-7 w-7 p-0"
+                                        onClick={() => {
+                                          setSerialForm(s);
+                                          setSerialModalOpen(true);
+                                        }}
+                                      >
+                                        <Pencil className="w-3.5 h-3.5" />
+                                      </Button>
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                        onClick={() => handleDeleteSerial(s.id)}
+                                      >
+                                        <Trash2 className="w-3.5 h-3.5" />
+                                      </Button>
+                                    </div>
+                                  </TableCell>
+                                </TableRow>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+
+                  {/* ─── 탭2: 점검항목 ─── */}
+                  <TabsContent value="inspection" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">점검항목 목록</span>
+                      <Button size="sm" className="h-8" onClick={() => { setInspectionForm({}); setInspectionModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        점검항목 등록
+                      </Button>
+                    </div>
+                    {inspectionLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : inspections.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <ClipboardCheck className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 점검항목이 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검항목</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검주기</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">점검방법</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">하한치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상한치</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                              <TableHead className="text-xs w-[60px]" />
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {inspections.map((ins: any) => (
+                              <TableRow key={ins.id}>
+                                <TableCell className="text-[13px] font-medium">{ins.inspection_item}</TableCell>
+                                <TableCell className="text-[13px]">{ins.inspection_cycle || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{ins.inspection_method || "-"}</TableCell>
+                                <TableCell className="text-[13px] font-mono">{ins.lower_limit || "-"}</TableCell>
+                                <TableCell className="text-[13px] font-mono">{ins.upper_limit || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{ins.unit || "-"}</TableCell>
+                                <TableCell>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                    onClick={() => handleDeleteInspection(ins.id)}
+                                  >
+                                    <Trash2 className="w-3.5 h-3.5" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+
+                  {/* ─── 탭3: 부품 ─── */}
+                  <TabsContent value="part" className="mt-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="text-xs font-semibold text-muted-foreground">부품 목록</span>
+                      <Button size="sm" className="h-8" onClick={() => { setPartForm({}); setPartModalOpen(true); }}>
+                        <Plus className="w-4 h-4 mr-1" />
+                        부품 등록
+                      </Button>
+                    </div>
+                    {partLoading ? (
+                      <div className="flex justify-center py-8">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : parts.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-10 gap-2 border-2 border-dashed rounded-lg text-muted-foreground">
+                        <Package className="w-8 h-8 opacity-30" />
+                        <p className="text-sm">등록된 부품이 없어요.</p>
+                      </div>
+                    ) : (
+                      <div className="border rounded-lg overflow-hidden">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부품명</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">교체주기</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">제조사</TableHead>
+                              <TableHead className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                              <TableHead className="text-xs w-[60px]" />
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {parts.map((p: any) => (
+                              <TableRow key={p.id}>
+                                <TableCell className="text-[13px] font-medium">{p.part_name}</TableCell>
+                                <TableCell className="text-[13px]">{p.replacement_cycle || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.unit || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.specification || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{p.manufacturer || "-"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{p.remarks || "-"}</TableCell>
+                                <TableCell>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                                    onClick={() => handleDeletePart(p.id)}
+                                  >
+                                    <Trash2 className="w-3.5 h-3.5" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </TabsContent>
+                </Tabs>
+              </div>
+            ) : null}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 금형 등록/수정 모달 ========== */}
+      <Dialog open={moldModalOpen} onOpenChange={setMoldModalOpen}>
+        <DialogContent className="max-w-3xl overflow-y-auto" style={{ maxHeight: "90vh" }}>
+          <DialogHeader>
+            <DialogTitle>{moldEditMode ? "금형 수정" : "금형 등록"}</DialogTitle>
+            <DialogDescription>금형 기본 정보를 입력해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형코드 <span className="text-destructive">*</span></Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldEditMode ? (moldForm.mold_code || "") : (numberingRuleId ? (previewCode || "") : (moldForm.mold_code || ""))}
+                  onChange={(e) => {
+                    if (!moldEditMode && !numberingRuleId) {
+                      setMoldForm({ ...moldForm, mold_code: e.target.value });
+                    }
+                  }}
+                  readOnly={moldEditMode || !!numberingRuleId}
+                  placeholder={moldEditMode ? "" : (numberingRuleId ? (previewCode ? "" : "자동 생성 중...") : "금형코드를 입력해주세요")}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형명 <span className="text-destructive">*</span></Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.mold_name || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, mold_name: e.target.value })}
+                  placeholder="금형명을 입력해주세요"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형유형</Label>
+                <Select
+                  value={moldForm.mold_type || ""}
+                  onValueChange={(v) => setMoldForm({ ...moldForm, mold_type: v })}
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="사출금형">사출금형</SelectItem>
+                    <SelectItem value="프레스금형">프레스금형</SelectItem>
+                    <SelectItem value="다이캐스팅">다이캐스팅</SelectItem>
+                    <SelectItem value="단조금형">단조금형</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">카테고리</Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.category || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, category: e.target.value })}
+                  placeholder="카테고리"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">제조사</Label>
+                <Input
+                  className="h-9 text-sm"
+                  value={moldForm.manufacturer || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, manufacturer: e.target.value })}
+                  placeholder="제조사"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">제작일</Label>
+                <Input
+                  type="date"
+                  className="h-9 text-sm"
+                  value={moldForm.manufacturing_date || ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, manufacturing_date: e.target.value })}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">캐비티수</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.cavity_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, cavity_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">최대수명 (샷수)</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.shot_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, shot_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형수량</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.mold_quantity ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, mold_quantity: e.target.value })}
+                  min={1}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">가동상태</Label>
+                <Select
+                  value={moldForm.operation_status || ""}
+                  onValueChange={(v) => setMoldForm({ ...moldForm, operation_status: v })}
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="ACTIVE">사용중</SelectItem>
+                    <SelectItem value="INSPECTION">점검중</SelectItem>
+                    <SelectItem value="REPAIR">수리중</SelectItem>
+                    <SelectItem value="DISPOSED">폐기</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">보증수명 (샷수)</Label>
+                <Input
+                  type="number"
+                  className="h-9 text-sm font-mono"
+                  value={moldForm.warranty_shot_count ?? ""}
+                  onChange={(e) => setMoldForm({ ...moldForm, warranty_shot_count: e.target.value })}
+                  min={0}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-xs">금형 이미지</Label>
+                <div className="relative w-full h-32 rounded-lg border-2 border-dashed border-border bg-muted/50 flex items-center justify-center overflow-hidden group">
+                  {moldImagePreview ? (
+                    <>
+                      <img src={moldImagePreview} alt="금형 이미지" className="w-full h-full object-contain" />
+                      <div className="absolute inset-0 bg-foreground/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                        <Button size="sm" variant="secondary" className="h-7 text-xs" type="button" onClick={() => moldImageRef.current?.click()}>
+                          <Upload className="w-3 h-3 mr-1" /> 변경
+                        </Button>
+                        <Button size="sm" variant="destructive" className="h-7 text-xs" type="button" onClick={() => {
+                          setMoldImagePreview(null);
+                          setMoldForm((prev) => ({ ...prev, image_path: null }));
+                        }}>
+                          <XIcon className="w-3 h-3" />
+                        </Button>
+                      </div>
+                    </>
+                  ) : (
+                    <button
+                      type="button"
+                      className="flex flex-col items-center gap-1.5 text-muted-foreground"
+                      onClick={() => moldImageRef.current?.click()}
+                    >
+                      <ImageIcon className="w-8 h-8" />
+                      <span className="text-xs">이미지 업로드</span>
+                    </button>
+                  )}
+                </div>
+                <input
+                  ref={moldImageRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleMoldImageUpload}
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setMoldModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleSaveMold} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              {moldEditMode ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 일련번호 등록/수정 모달 ========== */}
+      <Dialog open={serialModalOpen} onOpenChange={setSerialModalOpen}>
+        <DialogContent className="sm:max-w-[480px]">
+          <DialogHeader>
+            <DialogTitle>{serialForm.id ? "일련번호 수정" : "일련번호 등록"}</DialogTitle>
+            <DialogDescription>{serialForm.id ? `${serialForm.serial_number} 정보를 수정해요.` : "일련번호는 자동으로 채번돼요."}</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">상태</Label>
+              <Select
+                value={serialForm.status || "STORED"}
+                onValueChange={(v) => setSerialForm({ ...serialForm, status: v })}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="IN_USE">사용중</SelectItem>
+                  <SelectItem value="STORED">보관중</SelectItem>
+                  <SelectItem value="REPAIR">수리중</SelectItem>
+                  <SelectItem value="DISPOSED">폐기</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">현재 샷수</Label>
+              <Input
+                type="number"
+                className="h-9 text-sm font-mono"
+                value={serialForm.current_shot_count ?? ""}
+                onChange={(e) => setSerialForm({ ...serialForm, current_shot_count: e.target.value ? Number(e.target.value) : null })}
+                placeholder="0"
+                min={0}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">보관위치</Label>
+              <Input
+                className="h-9 text-sm"
+                value={serialForm.storage_location || ""}
+                onChange={(e) => setSerialForm({ ...serialForm, storage_location: e.target.value })}
+                placeholder="보관위치"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">비고</Label>
+              <Input
+                className="h-9 text-sm"
+                value={serialForm.remarks || ""}
+                onChange={(e) => setSerialForm({ ...serialForm, remarks: e.target.value })}
+                placeholder="비고"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setSerialModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleSaveSerial} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              {serialForm.id ? "수정하기" : "등록하기"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 점검항목 등록 모달 ========== */}
+      <Dialog open={inspectionModalOpen} onOpenChange={setInspectionModalOpen}>
+        <DialogContent className="sm:max-w-[560px]">
+          <DialogHeader>
+            <DialogTitle>점검항목 등록</DialogTitle>
+            <DialogDescription>금형 점검항목을 등록해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">점검항목명 <span className="text-destructive">*</span></Label>
+              <Input
+                className="h-9 text-sm"
+                value={inspectionForm.inspection_item || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_item: e.target.value })}
+                placeholder="점검항목명"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">점검주기</Label>
+              <Input
+                className="h-9 text-sm"
+                value={inspectionForm.inspection_cycle || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_cycle: e.target.value })}
+                placeholder="예: 월 1회"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">점검방법 <span className="text-destructive">*</span></Label>
+              <Select
+                value={inspectionForm.inspection_method || ""}
+                onValueChange={(v) => {
+                  const updated: Record<string, any> = { ...inspectionForm, inspection_method: v };
+                  if (v !== "숫자") {
+                    updated.lower_limit = "";
+                    updated.upper_limit = "";
+                    updated.unit = "";
+                  }
+                  setInspectionForm(updated);
+                }}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue placeholder="선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="숫자">숫자</SelectItem>
+                  <SelectItem value="텍스트">텍스트</SelectItem>
+                  <SelectItem value="합격/불합격">합격/불합격</SelectItem>
+                  <SelectItem value="양호/불량">양호/불량</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            {inspectionForm.inspection_method === "숫자" && (
+              <>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">기준값</Label>
+                  <Input
+                    type="number"
+                    className="h-9 text-sm font-mono"
+                    value={inspectionForm.lower_limit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, lower_limit: e.target.value })}
+                    placeholder="기준값"
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">±오차범위</Label>
+                  <Input
+                    type="number"
+                    className="h-9 text-sm font-mono"
+                    value={inspectionForm.upper_limit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, upper_limit: e.target.value })}
+                    placeholder="허용 오차"
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-xs">단위</Label>
+                  <Input
+                    className="h-9 text-sm"
+                    value={inspectionForm.unit || ""}
+                    onChange={(e) => setInspectionForm({ ...inspectionForm, unit: e.target.value })}
+                    placeholder="mm, ℃ 등"
+                  />
+                </div>
+              </>
+            )}
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">점검내용</Label>
+              <textarea
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 resize-y"
+                value={inspectionForm.inspection_content || ""}
+                onChange={(e) => setInspectionForm({ ...inspectionForm, inspection_content: e.target.value })}
+                placeholder="상세 내용"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setInspectionModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleAddInspection} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              등록하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ========== 부품 등록 모달 ========== */}
+      <Dialog open={partModalOpen} onOpenChange={setPartModalOpen}>
+        <DialogContent className="sm:max-w-[560px]">
+          <DialogHeader>
+            <DialogTitle>부품 등록</DialogTitle>
+            <DialogDescription>금형 부품을 등록해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-2">
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">부품명 <span className="text-destructive">*</span></Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.part_name || ""}
+                onChange={(e) => setPartForm({ ...partForm, part_name: e.target.value })}
+                placeholder="부품명"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">교체주기 <span className="text-destructive">*</span></Label>
+              <Select
+                value={partForm.replacement_cycle || ""}
+                onValueChange={(v) => setPartForm({ ...partForm, replacement_cycle: v })}
+              >
+                <SelectTrigger className="h-9 text-sm">
+                  <SelectValue placeholder="선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1만 샷">1만 샷</SelectItem>
+                  <SelectItem value="5만 샷">5만 샷</SelectItem>
+                  <SelectItem value="10만 샷">10만 샷</SelectItem>
+                  <SelectItem value="월 1회">월 1회</SelectItem>
+                  <SelectItem value="3개월">3개월</SelectItem>
+                  <SelectItem value="6개월">6개월</SelectItem>
+                  <SelectItem value="1년">1년</SelectItem>
+                  <SelectItem value="수시">수시</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">단위</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.unit || ""}
+                onChange={(e) => setPartForm({ ...partForm, unit: e.target.value })}
+                placeholder="EA, SET 등"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">규격</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.specification || ""}
+                onChange={(e) => setPartForm({ ...partForm, specification: e.target.value })}
+                placeholder="규격"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs">제조사</Label>
+              <Input
+                className="h-9 text-sm"
+                value={partForm.manufacturer || ""}
+                onChange={(e) => setPartForm({ ...partForm, manufacturer: e.target.value })}
+                placeholder="제조사"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs">비고</Label>
+              <textarea
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 resize-y"
+                value={partForm.remarks || ""}
+                onChange={(e) => setPartForm({ ...partForm, remarks: e.target.value })}
+                placeholder="비고"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setPartModalOpen(false)}>취소</Button>
+            <Button size="sm" onClick={handleAddPart} disabled={saving}>
+              {saving && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              등록하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/monitoring/equipment/page.tsx b/frontend/app/(main)/COMPANY_9/monitoring/equipment/page.tsx
new file mode 100644
index 00000000..ccb5aaf6
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/monitoring/equipment/page.tsx
@@ -0,0 +1,575 @@
+"use client";
+
+/**
+ * 설비운영모니터링 — 하드코딩 페이지
+ *
+ * 설비(equipment_mng) 목록 + 작업지시(work_instruction) 연결
+ * 실시간 카드 그리드 형태 모니터링 대시보드
+ */
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Wrench,
+  Zap,
+  Pause,
+  Power,
+} from "lucide-react";
+
+/* ───── 상태 정의 ───── */
+
+type OperationStatus = "running" | "idle" | "maintenance" | "off" | "unknown";
+
+interface StatusConfig {
+  label: string;
+  color: string;
+  bg: string;
+  border: string;
+  bar: string;
+  icon: React.ReactNode;
+  badgeBg: string;
+  badgeText: string;
+  cardGlow: string;
+}
+
+const STATUS_MAP: Record<OperationStatus, StatusConfig> = {
+  running: {
+    label: "가동중",
+    color: "text-emerald-400",
+    bg: "bg-emerald-500/10",
+    border: "border-emerald-500/30",
+    bar: "bg-emerald-400",
+    icon: <Zap className="h-4 w-4" />,
+    badgeBg: "bg-emerald-500/20",
+    badgeText: "text-emerald-300",
+    cardGlow: "shadow-emerald-500/5",
+  },
+  idle: {
+    label: "대기",
+    color: "text-amber-400",
+    bg: "bg-amber-500/10",
+    border: "border-amber-500/30",
+    bar: "bg-amber-400",
+    icon: <Pause className="h-4 w-4" />,
+    badgeBg: "bg-amber-500/20",
+    badgeText: "text-amber-300",
+    cardGlow: "shadow-amber-500/5",
+  },
+  maintenance: {
+    label: "점검/수리",
+    color: "text-red-400",
+    bg: "bg-red-500/10",
+    border: "border-red-500/30",
+    bar: "bg-red-400",
+    icon: <Wrench className="h-4 w-4" />,
+    badgeBg: "bg-red-500/20",
+    badgeText: "text-red-300",
+    cardGlow: "shadow-red-500/5",
+  },
+  off: {
+    label: "비가동",
+    color: "text-gray-400",
+    bg: "bg-gray-500/10",
+    border: "border-gray-500/30",
+    bar: "bg-gray-500",
+    icon: <Power className="h-4 w-4" />,
+    badgeBg: "bg-gray-500/20",
+    badgeText: "text-gray-400",
+    cardGlow: "shadow-gray-500/5",
+  },
+  unknown: {
+    label: "미설정",
+    color: "text-gray-500",
+    bg: "bg-gray-500/10",
+    border: "border-gray-600/30",
+    bar: "bg-gray-600",
+    icon: <Power className="h-4 w-4" />,
+    badgeBg: "bg-gray-600/20",
+    badgeText: "text-gray-500",
+    cardGlow: "",
+  },
+};
+
+/** operation_status 값 → 내부 키 매핑 */
+function resolveStatus(raw: string | null | undefined): OperationStatus {
+  if (!raw) return "unknown";
+  const v = raw.trim().toLowerCase();
+  if (["running", "가동", "가동중"].includes(v)) return "running";
+  if (["idle", "대기"].includes(v)) return "idle";
+  if (["maintenance", "점검", "수리", "점검/수리", "점검중"].includes(v)) return "maintenance";
+  if (["off", "비가동", "정지"].includes(v)) return "off";
+  return "unknown";
+}
+
+/* ───── 타입 ───── */
+
+interface Equipment {
+  id: string;
+  equipment_code: string;
+  equipment_name: string;
+  equipment_type: string;
+  installation_location: string;
+  operation_status: string;
+  manufacturer: string;
+  model_name: string;
+  image_path: string;
+}
+
+interface WorkInstruction {
+  id: string;
+  instruction_number: string;
+  item_name: string;
+  equipment_id: string;
+  worker_name: string;
+  status: string;
+}
+
+/* ───── 컴포넌트 ───── */
+
+export default function EquipmentMonitoringPage() {
+  const [equipments, setEquipments] = useState<Equipment[]>([]);
+  const [workInstructions, setWorkInstructions] = useState<WorkInstruction[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [filterStatus, setFilterStatus] = useState<OperationStatus | "all">("all");
+  const autoRefreshRef = useRef(autoRefresh);
+
+  // autoRefreshRef 동기화
+  useEffect(() => {
+    autoRefreshRef.current = autoRefresh;
+  }, [autoRefresh]);
+
+  /* ── 시간 업데이트 ── */
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* ── 데이터 fetch ── */
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      const [equipRes, wiRes] = await Promise.all([
+        apiClient.post("/table-management/tables/equipment_mng/data", {
+          autoFilter: true,
+          page: 1,
+          size: 500,
+        }),
+        apiClient.get("/work-instruction/list").catch(() => ({ data: { data: [] } })),
+      ]);
+
+      const eqRows: Equipment[] = equipRes.data?.data?.rows ?? equipRes.data?.rows ?? [];
+      setEquipments(eqRows);
+
+      const wiRows: WorkInstruction[] = wiRes.data?.data ?? wiRes.data?.rows ?? [];
+      setWorkInstructions(wiRows);
+    } catch (err) {
+      console.error("설비 모니터링 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ── 자동 갱신 (30초) ── */
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (autoRefreshRef.current) fetchData();
+    }, 30000);
+    return () => clearInterval(interval);
+  }, [fetchData]);
+
+  /* ── 요약 통계 ── */
+  const stats = useMemo(() => {
+    const counts: Record<OperationStatus, number> = {
+      running: 0,
+      idle: 0,
+      maintenance: 0,
+      off: 0,
+      unknown: 0,
+    };
+    equipments.forEach((eq) => {
+      const s = resolveStatus(eq.operation_status);
+      counts[s]++;
+    });
+    return { total: equipments.length, ...counts };
+  }, [equipments]);
+
+  /* ── 필터된 설비 ── */
+  const filteredEquipments = useMemo(() => {
+    if (filterStatus === "all") return equipments;
+    return equipments.filter((eq) => resolveStatus(eq.operation_status) === filterStatus);
+  }, [equipments, filterStatus]);
+
+  /* ── 설비별 작업지시 맵 ── */
+  const wiMap = useMemo(() => {
+    const map: Record<string, WorkInstruction[]> = {};
+    workInstructions.forEach((wi) => {
+      if (wi.equipment_id) {
+        if (!map[wi.equipment_id]) map[wi.equipment_id] = [];
+        map[wi.equipment_id].push(wi);
+      }
+    });
+    return map;
+  }, [workInstructions]);
+
+  /* ── 가동률 (모킹 — 센서 미연동) ── */
+  const getUtilization = (eq: Equipment): number | null => {
+    const s = resolveStatus(eq.operation_status);
+    if (s === "running") return 75 + Math.floor(Math.random() * 20); // 75~94
+    if (s === "idle") return 20 + Math.floor(Math.random() * 30); // 20~49
+    if (s === "maintenance") return 0;
+    if (s === "off") return 0;
+    return null;
+  };
+
+  /* ── 요약 카드 배열 ── */
+  const summaryCards: {
+    label: string;
+    count: number;
+    status: OperationStatus | "total";
+    color: string;
+    bg: string;
+    border: string;
+    icon: React.ReactNode;
+  }[] = [
+    {
+      label: "전체설비",
+      count: stats.total,
+      status: "total",
+      color: "text-blue-400",
+      bg: "bg-blue-500/10",
+      border: "border-blue-500/30",
+      icon: <Inbox className="h-5 w-5" />,
+    },
+    {
+      label: "가동중",
+      count: stats.running,
+      status: "running",
+      color: "text-emerald-400",
+      bg: "bg-emerald-500/10",
+      border: "border-emerald-500/30",
+      icon: <Zap className="h-5 w-5" />,
+    },
+    {
+      label: "대기",
+      count: stats.idle,
+      status: "idle",
+      color: "text-amber-400",
+      bg: "bg-amber-500/10",
+      border: "border-amber-500/30",
+      icon: <Pause className="h-5 w-5" />,
+    },
+    {
+      label: "점검/수리",
+      count: stats.maintenance,
+      status: "maintenance",
+      color: "text-red-400",
+      bg: "bg-red-500/10",
+      border: "border-red-500/30",
+      icon: <Wrench className="h-5 w-5" />,
+    },
+    {
+      label: "비가동",
+      count: stats.off + stats.unknown,
+      status: "off",
+      color: "text-gray-400",
+      bg: "bg-gray-500/10",
+      border: "border-gray-500/30",
+      icon: <Power className="h-5 w-5" />,
+    },
+  ];
+
+  /* ── 필터 pill ── */
+  const filterPills: { label: string; value: OperationStatus | "all"; color: string }[] = [
+    { label: "전체", value: "all", color: "bg-blue-500/20 text-blue-300 hover:bg-blue-500/30" },
+    { label: "가동중", value: "running", color: "bg-emerald-500/20 text-emerald-300 hover:bg-emerald-500/30" },
+    { label: "대기", value: "idle", color: "bg-amber-500/20 text-amber-300 hover:bg-amber-500/30" },
+    { label: "점검/수리", value: "maintenance", color: "bg-red-500/20 text-red-300 hover:bg-red-500/30" },
+    { label: "비가동", value: "off", color: "bg-gray-500/20 text-gray-300 hover:bg-gray-500/30" },
+  ];
+
+  /* ── 포맷 ── */
+  const formatTime = (d: Date) =>
+    d.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
+  const formatDate = (d: Date) =>
+    d.toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", weekday: "short" });
+
+  /* ────────────── 렌더 ────────────── */
+
+  return (
+    <div className="min-h-screen bg-gray-950 text-white p-4 md:p-6 space-y-5">
+      {/* ── 헤더 ── */}
+      <header className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <div className="h-8 w-1.5 rounded-full bg-amber-400" />
+          <h1 className="text-2xl font-bold tracking-tight">설비운영모니터링</h1>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* 현재 시간 */}
+          <div className="flex items-center gap-2 text-sm text-gray-400 bg-gray-800/60 rounded-lg px-3 py-1.5 border border-gray-700/50">
+            <Clock className="h-4 w-4" />
+            <span className="font-mono">{formatDate(currentTime)}</span>
+            <span className="font-mono text-white">{formatTime(currentTime)}</span>
+          </div>
+
+          {/* 자동갱신 토글 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn(
+              "border-gray-700 text-xs gap-1.5",
+              autoRefresh
+                ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20"
+                : "bg-gray-800 text-gray-400 hover:bg-gray-700"
+            )}
+            onClick={() => setAutoRefresh((v) => !v)}
+          >
+            <span className={cn("h-1.5 w-1.5 rounded-full", autoRefresh ? "bg-emerald-400 animate-pulse" : "bg-gray-600")} />
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+
+          {/* 새로고침 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-gray-700 bg-gray-800 text-gray-300 hover:bg-gray-700 gap-1.5"
+            onClick={fetchData}
+            disabled={loading}
+          >
+            <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+            새로고침
+          </Button>
+        </div>
+      </header>
+
+      {/* ── 요약 카드 5개 ── */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
+        {summaryCards.map((card) => (
+          <button
+            key={card.label}
+            onClick={() =>
+              setFilterStatus(card.status === "total" ? "all" : (card.status as OperationStatus))
+            }
+            className={cn(
+              "relative flex items-center gap-3 rounded-xl border px-4 py-3 transition-all hover:scale-[1.02]",
+              card.bg,
+              card.border,
+              "hover:shadow-lg"
+            )}
+          >
+            <div className={cn("flex items-center justify-center rounded-lg p-2", card.bg, card.color)}>
+              {card.icon}
+            </div>
+            <div className="text-left">
+              <p className="text-xs text-gray-500">{card.label}</p>
+              <p className={cn("text-2xl font-bold tabular-nums", card.color)}>{card.count}</p>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {/* ── 필터 pill ── */}
+      <div className="flex flex-wrap gap-2">
+        {filterPills.map((pill) => (
+          <button
+            key={pill.value}
+            onClick={() => setFilterStatus(pill.value)}
+            className={cn(
+              "rounded-full px-4 py-1.5 text-sm font-medium transition-all",
+              filterStatus === pill.value
+                ? cn(pill.color, "ring-1 ring-white/20")
+                : "bg-gray-800/60 text-gray-500 hover:text-gray-300 hover:bg-gray-800"
+            )}
+          >
+            {pill.label}
+          </button>
+        ))}
+        <span className="ml-auto text-sm text-gray-600 self-center">
+          {filteredEquipments.length}대 표시
+        </span>
+      </div>
+
+      {/* ── 로딩 ── */}
+      {loading && equipments.length === 0 && (
+        <div className="flex items-center justify-center py-20">
+          <Loader2 className="h-8 w-8 animate-spin text-gray-600" />
+          <span className="ml-3 text-gray-500">설비 데이터를 불러오는 중...</span>
+        </div>
+      )}
+
+      {/* ── 데이터 없음 ── */}
+      {!loading && equipments.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-gray-600">
+          <Inbox className="h-12 w-12 mb-3" />
+          <p className="text-lg">등록된 설비가 없습니다.</p>
+        </div>
+      )}
+
+      {/* ── 설비 카드 그리드 ── */}
+      {filteredEquipments.length > 0 && (
+        <div
+          className="grid gap-4"
+          style={{ gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))" }}
+        >
+          {filteredEquipments.map((eq) => {
+            const status = resolveStatus(eq.operation_status);
+            const cfg = STATUS_MAP[status];
+            const utilization = getUtilization(eq);
+            const eqWIs = wiMap[eq.id] ?? [];
+
+            return (
+              <div
+                key={eq.id}
+                className={cn(
+                  "relative overflow-hidden rounded-xl border bg-gray-900/80 backdrop-blur transition-all hover:shadow-lg",
+                  cfg.border,
+                  cfg.cardGlow
+                )}
+              >
+                {/* 좌측 색상 바 */}
+                <div className={cn("absolute left-0 top-0 bottom-0 w-1 rounded-l-xl", cfg.bar)} />
+
+                {/* 상단: 설비명 + 상태 배지 */}
+                <div className="flex items-start justify-between px-4 pt-3 pb-2 pl-5">
+                  <div className="min-w-0 flex-1">
+                    <h3 className="text-base font-semibold text-white truncate">
+                      {eq.equipment_name || "이름 없음"}
+                    </h3>
+                    <p className="text-xs text-gray-500 mt-0.5 truncate">
+                      {eq.equipment_type || "-"} · {eq.installation_location || "-"}
+                    </p>
+                  </div>
+                  <Badge
+                    className={cn(
+                      "ml-2 shrink-0 border-0 gap-1 text-xs font-medium",
+                      cfg.badgeBg,
+                      cfg.badgeText
+                    )}
+                  >
+                    {cfg.icon}
+                    {cfg.label}
+                  </Badge>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 정보 그리드 */}
+                <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 px-4 pl-5 py-2.5 text-sm">
+                  <div>
+                    <span className="text-gray-500 text-xs">금일 가동시간</span>
+                    <p className="text-white font-medium">-</p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">생산수량</span>
+                    <p className="text-white font-medium">-</p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">작업자</span>
+                    <p className="text-white font-medium">
+                      {eqWIs.length > 0 && eqWIs[0].worker_name
+                        ? eqWIs[0].worker_name
+                        : "-"}
+                    </p>
+                  </div>
+                  <div>
+                    <span className="text-gray-500 text-xs">설비코드</span>
+                    <p className="text-white font-medium truncate">{eq.equipment_code || "-"}</p>
+                  </div>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 가동률 프로그레스 */}
+                <div className="px-4 pl-5 py-2.5">
+                  <div className="flex items-center justify-between text-xs mb-1.5">
+                    <span className="text-gray-500">가동률</span>
+                    <span className={cn("font-bold tabular-nums", utilization !== null ? cfg.color : "text-gray-600")}>
+                      {utilization !== null ? `${utilization}%` : "-"}
+                    </span>
+                  </div>
+                  <div className="h-2 w-full rounded-full bg-gray-800 overflow-hidden">
+                    {utilization !== null && (
+                      <div
+                        className={cn("h-full rounded-full transition-all duration-700", cfg.bar)}
+                        style={{ width: `${utilization}%` }}
+                      />
+                    )}
+                  </div>
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 현재 작업지시 */}
+                <div className="px-4 pl-5 py-2.5">
+                  <p className="text-xs text-gray-500 mb-1">현재 작업지시</p>
+                  {eqWIs.length > 0 ? (
+                    <div className="space-y-1">
+                      {eqWIs.slice(0, 2).map((wi) => (
+                        <div key={wi.id} className="flex items-center gap-2 text-sm">
+                          <span className="text-blue-400 font-mono text-xs shrink-0">
+                            {wi.instruction_number || "-"}
+                          </span>
+                          <span className="text-gray-300 truncate">
+                            {wi.item_name || "-"}
+                          </span>
+                        </div>
+                      ))}
+                      {eqWIs.length > 2 && (
+                        <p className="text-xs text-gray-600">+{eqWIs.length - 2}건 더</p>
+                      )}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-gray-600 italic">배정된 작업 없음</p>
+                  )}
+                </div>
+
+                {/* 구분선 */}
+                <div className="mx-4 ml-5 border-t border-gray-800/80" />
+
+                {/* 센서 데이터 (PLC 미연동) */}
+                <div className="flex items-center gap-4 px-4 pl-5 py-2.5 text-xs">
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">온도</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">압력</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-gray-600">RPM</span>
+                    <span className="text-gray-500 font-mono">-</span>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* 필터 결과 없음 */}
+      {!loading && equipments.length > 0 && filteredEquipments.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 text-gray-600">
+          <Inbox className="h-10 w-10 mb-2" />
+          <p>해당 상태의 설비가 없습니다.</p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/monitoring/production/page.tsx b/frontend/app/(main)/COMPANY_9/monitoring/production/page.tsx
new file mode 100644
index 00000000..fb8aa24b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/monitoring/production/page.tsx
@@ -0,0 +1,504 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Timer,
+  CheckCircle2,
+  AlertTriangle,
+  TrendingUp,
+  Play,
+  Pause,
+} from "lucide-react";
+
+// ─── 타입 정의 ─────────────────────────────────────────────
+interface WorkInstructionDetail {
+  item_name?: string;
+  spec?: string;
+  customer_name?: string;
+}
+
+interface WorkInstruction {
+  id: string;
+  wi_id?: string;
+  work_instruction_no: string;
+  status: string; // 일반 / 긴급
+  qty: number;
+  completed_qty: number;
+  start_date: string | null;
+  end_date: string | null;
+  worker: string | null;
+  equipment_id: string | null;
+  equipment_name?: string | null;
+  details?: WorkInstructionDetail[];
+}
+
+interface ProcessStep {
+  wo_id: string;
+  process_name: string;
+  status: string; // acceptable / completed
+  seq_no: number;
+}
+
+type FilterTab = "전체" | "대기" | "진행중" | "완료";
+
+// ─── 유틸리티 ──────────────────────────────────────────────
+function formatDate(dateStr: string | null | undefined): string {
+  if (!dateStr) return "-";
+  try {
+    const d = new Date(dateStr);
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+  } catch {
+    return dateStr;
+  }
+}
+
+function formatTime(date: Date): string {
+  const h = String(date.getHours()).padStart(2, "0");
+  const m = String(date.getMinutes()).padStart(2, "0");
+  const s = String(date.getSeconds()).padStart(2, "0");
+  return `${h}:${m}:${s}`;
+}
+
+// 작업지시별 공정현황으로 진행상태 계산
+function computeProgress(
+  wiId: string,
+  processMap: Map<string, ProcessStep[]>
+): "대기" | "진행중" | "완료" {
+  const steps = processMap.get(wiId);
+  if (!steps || steps.length === 0) return "대기";
+  const completedCount = steps.filter((s) => s.status === "completed").length;
+  if (completedCount === 0) return "대기";
+  if (completedCount === steps.length) return "완료";
+  return "진행중";
+}
+
+// ─── 메인 컴포넌트 ────────────────────────────────────────
+export default function ProductionMonitoringPage() {
+  const [workInstructions, setWorkInstructions] = useState<WorkInstruction[]>([]);
+  const [processMap, setProcessMap] = useState<Map<string, ProcessStep[]>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [activeTab, setActiveTab] = useState<FilterTab>("전체");
+
+  // ─── 실시간 시계 ─────────────────────────────────────────
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // ─── 데이터 로드 ─────────────────────────────────────────
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+
+      // 작업지시 목록 조회
+      const wiRes = await apiClient.get("/work-instruction/list");
+      const wiRaw: WorkInstruction[] =
+        wiRes.data?.success && Array.isArray(wiRes.data.data) ? wiRes.data.data : [];
+      // 작업지시번호 기준 중복 제거 (디테일 JOIN으로 중복 발생 가능)
+      const seen = new Set<string>();
+      const wiData = wiRaw.filter((wi) => {
+        const key = wi.work_instruction_no || wi.id;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+      setWorkInstructions(wiData);
+
+      // 공정현황 조회 (실패해도 작업지시는 표시)
+      try {
+        const procRes = await apiClient.post("/table-management/tables/work_order_process/data", {
+          page: 1, size: 1000, autoFilter: true,
+        });
+        const rows: ProcessStep[] = procRes.data?.data?.data || procRes.data?.data?.rows || procRes.data?.data || [];
+
+        // wo_id별로 그룹핑 후, 같은 seq_no+process_name은 1건으로 합침 (배치 실행 이력 중복 제거)
+        const rawMap = new Map<string, ProcessStep[]>();
+        rows.forEach((row) => {
+          const key = String(row.wo_id);
+          if (!rawMap.has(key)) rawMap.set(key, []);
+          rawMap.get(key)!.push(row);
+        });
+
+        const map = new Map<string, ProcessStep[]>();
+        rawMap.forEach((steps, woId) => {
+          // seq_no + process_name 기준으로 대표 1건만 (completed 우선)
+          const grouped = new Map<string, ProcessStep>();
+          for (const s of steps) {
+            const gk = `${s.seq_no}_${s.process_name}`;
+            const existing = grouped.get(gk);
+            if (!existing || (s.status === "completed" && existing.status !== "completed")) {
+              grouped.set(gk, s);
+            }
+          }
+          const deduped = Array.from(grouped.values()).sort((a, b) => (a.seq_no ?? 0) - (b.seq_no ?? 0));
+          map.set(woId, deduped);
+        });
+        setProcessMap(map);
+      } catch {
+        // 공정현황 조회 실패 → 빈 맵 유지
+        setProcessMap(new Map());
+      }
+    } catch (err) {
+      console.error("생산모니터링 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // ─── 자동갱신 (30초) ─────────────────────────────────────
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const timer = setInterval(fetchData, 30000);
+    return () => clearInterval(timer);
+  }, [autoRefresh, fetchData]);
+
+  // ─── 통계 계산 ───────────────────────────────────────────
+  const stats = useMemo(() => {
+    let waiting = 0;
+    let inProgress = 0;
+    let completed = 0;
+    let totalQty = 0;
+    let completedQty = 0;
+
+    workInstructions.forEach((wi) => {
+      const progress = computeProgress(wi.wi_id || wi.id, processMap);
+      if (progress === "대기") waiting++;
+      else if (progress === "진행중") inProgress++;
+      else completed++;
+      totalQty += Number((wi as any).total_qty || wi.qty || 0);
+      completedQty += Number(wi.completed_qty) || 0;
+    });
+
+    const achievementRate = totalQty > 0 ? Math.round((completedQty / totalQty) * 100) : 0;
+
+    return { waiting, inProgress, completed, achievementRate };
+  }, [workInstructions, processMap]);
+
+  // ─── 필터링된 작업 목록 ──────────────────────────────────
+  const filteredInstructions = useMemo(() => {
+    return workInstructions.filter((wi) => {
+      if (activeTab === "전체") return true;
+      const progress = computeProgress(wi.wi_id || wi.id, processMap);
+      return progress === activeTab;
+    });
+  }, [workInstructions, processMap, activeTab]);
+
+  // ─── 렌더링 ──────────────────────────────────────────────
+  return (
+    <div className="flex flex-col h-full min-h-0 bg-background p-4 gap-4 overflow-auto">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between flex-shrink-0">
+        <h1 className="text-2xl font-bold text-foreground">생산모니터링</h1>
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5 text-muted-foreground text-sm">
+            <Clock className="w-4 h-4" />
+            <span className="font-mono">{formatTime(currentTime)}</span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={loading}
+            className="gap-1.5"
+          >
+            <RefreshCw className={cn("w-4 h-4", loading && "animate-spin")} />
+            새로고침
+          </Button>
+          <Button
+            variant={autoRefresh ? "default" : "outline"}
+            size="sm"
+            onClick={() => setAutoRefresh(!autoRefresh)}
+            className="gap-1.5"
+          >
+            {autoRefresh ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+        </div>
+      </div>
+
+      {/* 요약 카드 */}
+      <div className="grid grid-cols-4 gap-4 flex-shrink-0">
+        <SummaryCard
+          icon={<Timer className="w-5 h-5" />}
+          label="대기중"
+          value={stats.waiting}
+          colorClass="text-amber-500 bg-amber-500/10 border-amber-500/20"
+        />
+        <SummaryCard
+          icon={<Loader2 className="w-5 h-5" />}
+          label="진행중"
+          value={stats.inProgress}
+          colorClass="text-blue-500 bg-blue-500/10 border-blue-500/20"
+        />
+        <SummaryCard
+          icon={<CheckCircle2 className="w-5 h-5" />}
+          label="완료"
+          value={stats.completed}
+          colorClass="text-emerald-500 bg-emerald-500/10 border-emerald-500/20"
+        />
+        <SummaryCard
+          icon={<TrendingUp className="w-5 h-5" />}
+          label="달성율"
+          value={`${stats.achievementRate}%`}
+          colorClass="text-purple-500 bg-purple-500/10 border-purple-500/20"
+        />
+      </div>
+
+      {/* 탭 필터 */}
+      <div className="flex items-center gap-2 flex-shrink-0">
+        {(["전체", "대기", "진행중", "완료"] as FilterTab[]).map((tab) => (
+          <Button
+            key={tab}
+            variant={activeTab === tab ? "default" : "outline"}
+            size="sm"
+            onClick={() => setActiveTab(tab)}
+            className={cn(
+              "min-w-[64px]",
+              activeTab === tab && tab === "대기" && "bg-amber-500 hover:bg-amber-600 text-white",
+              activeTab === tab && tab === "진행중" && "bg-blue-500 hover:bg-blue-600 text-white",
+              activeTab === tab && tab === "완료" && "bg-emerald-500 hover:bg-emerald-600 text-white"
+            )}
+          >
+            {tab}
+            {tab === "전체" && ` (${workInstructions.length})`}
+            {tab === "대기" && ` (${stats.waiting})`}
+            {tab === "진행중" && ` (${stats.inProgress})`}
+            {tab === "완료" && ` (${stats.completed})`}
+          </Button>
+        ))}
+      </div>
+
+      {/* 로딩 상태 */}
+      {loading && workInstructions.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <Loader2 className="w-10 h-10 animate-spin mb-3" />
+          <span className="text-sm">데이터를 불러오는 중입니다...</span>
+        </div>
+      )}
+
+      {/* 빈 상태 */}
+      {!loading && filteredInstructions.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <Inbox className="w-12 h-12 mb-3" />
+          <span className="text-sm">
+            {activeTab === "전체"
+              ? "등록된 작업지시가 없습니다."
+              : `"${activeTab}" 상태의 작업지시가 없습니다.`}
+          </span>
+        </div>
+      )}
+
+      {/* 작업 카드 그리드 */}
+      {filteredInstructions.length > 0 && (
+        <div
+          className="grid gap-4 flex-1"
+          style={{ gridTemplateColumns: "repeat(auto-fill, minmax(420px, 1fr))" }}
+        >
+          {filteredInstructions.map((wi, idx) => (
+            <WorkCard
+              key={wi.id || `wi-${idx}`}
+              instruction={wi}
+              steps={processMap.get(wi.wi_id || wi.id) || []}
+              progress={computeProgress(wi.wi_id || wi.id, processMap)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── 요약 카드 ─────────────────────────────────────────────
+function SummaryCard({
+  icon,
+  label,
+  value,
+  colorClass,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: number | string;
+  colorClass: string;
+}) {
+  return (
+    <div className="bg-card border rounded-lg p-4 flex items-center gap-4">
+      <div className={cn("p-2.5 rounded-lg border", colorClass)}>{icon}</div>
+      <div className="flex flex-col">
+        <span className="text-xs text-muted-foreground">{label}</span>
+        <span className="text-2xl font-bold text-foreground">{value}</span>
+      </div>
+    </div>
+  );
+}
+
+// ─── 작업 카드 ─────────────────────────────────────────────
+function WorkCard({
+  instruction: wi,
+  steps,
+  progress,
+}: {
+  instruction: WorkInstruction;
+  steps: ProcessStep[];
+  progress: "대기" | "진행중" | "완료";
+}) {
+  // API 응답은 flat 구조 (details 배열 아님)
+  const itemName = (wi as any).item_name || "-";
+  const spec = (wi as any).item_spec || "-";
+  const customerName = (wi as any).customer_name || "-";
+
+  // 진척률 (total_qty 또는 qty)
+  const totalQty = Number((wi as any).total_qty || wi.qty || 0);
+  const completedQty = Number(wi.completed_qty || 0);
+  const progressPercent = totalQty > 0 ? Math.min(100, Math.round((completedQty / totalQty) * 100)) : 0;
+
+  // 공정 현황 계산
+  const completedSteps = steps.filter((s) => s.status === "completed").length;
+  const currentStep = steps.find((s) => s.status !== "completed");
+
+  // 프로그레스바 색상
+  const barColor =
+    progressPercent >= 100
+      ? "bg-emerald-500"
+      : progressPercent >= 50
+        ? "bg-blue-500"
+        : "bg-amber-500";
+
+  // 상태 배지 스타일
+  const statusBadge: Record<string, string> = {
+    "대기": "bg-amber-500/10 text-amber-500 border-amber-500/30",
+    "진행중": "bg-blue-500/10 text-blue-500 border-blue-500/30",
+    "완료": "bg-emerald-500/10 text-emerald-500 border-emerald-500/30",
+  };
+
+  const isUrgent = wi.status === "긴급";
+
+  return (
+    <div className="bg-card border rounded-lg overflow-hidden flex flex-col">
+      {/* 카드 헤더 */}
+      <div className="flex items-center justify-between px-4 py-3 border-b bg-muted/30">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-sm text-foreground">
+            {wi.work_instruction_no}
+          </span>
+          {isUrgent && (
+            <Badge
+              variant="outline"
+              className="bg-red-500/10 text-red-500 border-red-500/30 text-xs gap-1"
+            >
+              <AlertTriangle className="w-3 h-3" />
+              긴급
+            </Badge>
+          )}
+        </div>
+        <Badge variant="outline" className={cn("text-xs", statusBadge[progress])}>
+          {progress}
+        </Badge>
+      </div>
+
+      {/* 카드 본문 - 정보 */}
+      <div className="px-4 py-3 grid grid-cols-2 gap-x-4 gap-y-1.5 text-sm border-b">
+        <InfoRow label="품목명" value={itemName} />
+        <InfoRow label="규격" value={spec} />
+        <InfoRow label="거래처" value={customerName} />
+        <InfoRow label="작업자" value={wi.worker || "-"} />
+        <InfoRow label="납기일" value={formatDate(wi.end_date)} />
+        <InfoRow label="설비" value={wi.equipment_name || wi.equipment_id || "-"} />
+      </div>
+
+      {/* 공정현황 */}
+      <div className="px-4 py-3 border-b">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs text-muted-foreground font-medium">공정현황</span>
+          {steps.length > 0 && (
+            <span className="text-xs text-muted-foreground">
+              완료 {completedSteps}/{steps.length}
+              {currentStep && (
+                <span>
+                  {" "}
+                  · 현재: <span className="text-blue-400">{currentStep.process_name}</span>
+                </span>
+              )}
+            </span>
+          )}
+        </div>
+        {steps.length > 0 ? (
+          <div className="flex gap-1 flex-wrap">
+            {steps.map((step, idx) => {
+              const isDone = step.status === "completed";
+              const isCurrent = !isDone && idx === completedSteps;
+              return (
+                <span
+                  key={`${step.wo_id}-${step.seq_no}-${idx}`}
+                  className={cn(
+                    "px-2 py-0.5 rounded text-xs font-medium transition-all",
+                    isDone && "bg-emerald-500/20 text-emerald-400",
+                    isCurrent && "bg-blue-500/20 text-blue-400 animate-pulse",
+                    !isDone && !isCurrent && "bg-muted text-muted-foreground"
+                  )}
+                >
+                  {step.process_name}
+                </span>
+              );
+            })}
+          </div>
+        ) : (
+          <span className="text-xs text-muted-foreground">공정 정보 없음</span>
+        )}
+      </div>
+
+      {/* 프로그레스바 */}
+      <div className="px-4 py-3">
+        <div className="flex items-center justify-between mb-1.5">
+          <span className="text-xs text-muted-foreground">
+            {completedQty} / {totalQty}
+          </span>
+          <span
+            className={cn(
+              "text-xs font-bold",
+              progressPercent >= 100
+                ? "text-emerald-500"
+                : progressPercent >= 50
+                  ? "text-blue-500"
+                  : "text-amber-500"
+            )}
+          >
+            {progressPercent}%
+          </span>
+        </div>
+        <div className="w-full h-2.5 bg-muted rounded-full overflow-hidden">
+          <div
+            className={cn("h-full rounded-full transition-all duration-500", barColor)}
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── 정보 행 ───────────────────────────────────────────────
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center gap-1.5 min-w-0">
+      <span className="text-muted-foreground shrink-0">{label}:</span>
+      <span className="text-foreground truncate">{value}</span>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/monitoring/quality/page.tsx b/frontend/app/(main)/COMPANY_9/monitoring/quality/page.tsx
new file mode 100644
index 00000000..b0135bbe
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/monitoring/quality/page.tsx
@@ -0,0 +1,512 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import {
+  RefreshCw,
+  Clock,
+  Loader2,
+  Inbox,
+  Search,
+  ClipboardCheck,
+} from "lucide-react";
+
+/* ───── 타입 ───── */
+interface ProcessRow {
+  id: number;
+  wo_id: number;
+  process_code: string;
+  process_name: string;
+  status: string;
+  plan_qty: number;
+  input_qty: number;
+  good_qty: number;
+  defect_qty: number;
+  started_at: string | null;
+  completed_at: string | null;
+  worker_name: string;
+}
+
+interface InspectionRow {
+  no: number;
+  inspectionNo: string;
+  inspectionType: string;
+  itemName: string;
+  spec: string;
+  inspectionQty: number;
+  goodQty: number;
+  defectQty: number;
+  defectRate: number;
+  result: "합격" | "불합격" | "대기";
+  inspectorName: string;
+  inspectedAt: string;
+  remark: string;
+}
+
+/* ───── 탭 정의 ───── */
+const TABS = [
+  { key: "all", label: "전체" },
+  { key: "process", label: "공정검사" },
+  { key: "incoming", label: "입고검사" },
+  { key: "shipping", label: "출하검사" },
+] as const;
+type TabKey = (typeof TABS)[number]["key"];
+
+/* ───── 유틸 ───── */
+const fmt = (n: number) => n.toLocaleString("ko-KR");
+const pct = (n: number) =>
+  `${n.toFixed(1)}%`;
+
+const badgeVariant = (
+  type: "result" | "type" | "defectRate",
+  value: string | number,
+) => {
+  if (type === "result") {
+    if (value === "합격")
+      return "bg-emerald-100 text-emerald-700 border-emerald-200";
+    if (value === "불합격") return "bg-red-100 text-red-700 border-red-200";
+    return "bg-amber-100 text-amber-700 border-amber-200";
+  }
+  if (type === "type") {
+    if (value === "공정검사")
+      return "bg-purple-100 text-purple-700 border-purple-200";
+    if (value === "입고검사") return "bg-blue-100 text-blue-700 border-blue-200";
+    return "bg-emerald-100 text-emerald-700 border-emerald-200";
+  }
+  // defectRate
+  const rate = typeof value === "number" ? value : parseFloat(String(value));
+  if (rate > 3) return "text-red-600 font-semibold";
+  if (rate >= 1) return "text-amber-600 font-semibold";
+  return "text-emerald-600";
+};
+
+/* ───── 컴포넌트 ───── */
+export default function QualityMonitoringPage() {
+  const [processData, setProcessData] = useState<ProcessRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [activeTab, setActiveTab] = useState<TabKey>("all");
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  /* ───── 시계 ───── */
+  useEffect(() => {
+    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  /* ───── 데이터 조회 ───── */
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await apiClient.post(
+        "/table-management/tables/work_order_process/data",
+        { autoFilter: true },
+      );
+      const rows: ProcessRow[] = res.data?.data?.rows ?? res.data?.rows ?? [];
+      setProcessData(rows);
+    } catch (err) {
+      console.error("품질점검현황 데이터 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ───── 자동 갱신 ───── */
+  useEffect(() => {
+    if (autoRefresh) {
+      intervalRef.current = setInterval(fetchData, 30_000);
+    }
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [autoRefresh, fetchData]);
+
+  /* ───── 검사 행 변환 ───── */
+  const inspectionRows: InspectionRow[] = useMemo(() => {
+    const today = new Date().toISOString().slice(0, 10);
+
+    return processData
+      .filter((r) => {
+        // 금일 데이터만
+        const dt = r.completed_at || r.started_at || "";
+        return dt.slice(0, 10) === today;
+      })
+      .map((r, idx) => {
+        const inspQty = r.input_qty || r.plan_qty || 0;
+        const goodQty = r.good_qty ?? 0;
+        const defectQty = r.defect_qty ?? 0;
+        const defectRate = inspQty > 0 ? (defectQty / inspQty) * 100 : 0;
+        const result: InspectionRow["result"] =
+          r.status !== "completed"
+            ? "대기"
+            : defectQty > 0
+              ? "불합격"
+              : "합격";
+
+        return {
+          no: idx + 1,
+          inspectionNo: `QC-${String(r.id).padStart(8, "0").slice(0, 8)}`,
+          inspectionType: "공정검사",
+          itemName: r.process_name || "-",
+          spec: r.process_code || "-",
+          inspectionQty: inspQty,
+          goodQty,
+          defectQty,
+          defectRate,
+          result,
+          inspectorName: r.worker_name || "-",
+          inspectedAt: r.completed_at || r.started_at || "-",
+          remark: "",
+        };
+      });
+  }, [processData]);
+
+  /* ───── 탭 필터링 ───── */
+  const filteredRows = useMemo(() => {
+    if (activeTab === "all" || activeTab === "process") return inspectionRows;
+    // 입고/출하는 데이터 없음
+    return [];
+  }, [activeTab, inspectionRows]);
+
+  /* ───── 요약 통계 ───── */
+  const summary = useMemo(() => {
+    const total = inspectionRows.length;
+    const passed = inspectionRows.filter((r) => r.result === "합격").length;
+    const failed = inspectionRows.filter((r) => r.result === "불합격").length;
+    const pending = inspectionRows.filter((r) => r.result === "대기").length;
+    const passRate = total > 0 ? (passed / total) * 100 : 0;
+    return { total, passed, failed, pending, passRate };
+  }, [inspectionRows]);
+
+  /* ───── 요약 카드 정의 ───── */
+  const summaryCards = [
+    {
+      label: "금일 검사건수",
+      value: fmt(summary.total),
+      sub: "건",
+      color: "from-slate-500 to-slate-600",
+      textColor: "text-white",
+    },
+    {
+      label: "합격",
+      value: fmt(summary.passed),
+      sub: "건",
+      color: "from-emerald-500 to-emerald-600",
+      textColor: "text-white",
+    },
+    {
+      label: "불합격",
+      value: fmt(summary.failed),
+      sub: "건",
+      color: "from-red-500 to-red-600",
+      textColor: "text-white",
+    },
+    {
+      label: "검사대기",
+      value: fmt(summary.pending),
+      sub: "건",
+      color: "from-amber-500 to-amber-600",
+      textColor: "text-white",
+    },
+    {
+      label: "합격률",
+      value: pct(summary.passRate),
+      sub: "",
+      color: "from-purple-500 to-purple-600",
+      textColor: "text-white",
+    },
+  ];
+
+  /* ───── 렌더링 ───── */
+  return (
+    <div className="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
+      {/* ── 헤더 ── */}
+      <div className="flex items-center justify-between px-6 py-4 bg-white dark:bg-gray-800 border-b">
+        <div className="flex items-center gap-3">
+          <ClipboardCheck className="h-6 w-6 text-emerald-600" />
+          <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+            품질점검현황{" "}
+            <span className="text-emerald-600">모니터링</span>
+          </h1>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            <Clock className="h-4 w-4" />
+            <span className="font-mono">
+              {currentTime.toLocaleString("ko-KR", {
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit",
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+                hour12: false,
+              })}
+            </span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchData}
+            disabled={loading}
+          >
+            {loading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+            <span className="ml-1">새로고침</span>
+          </Button>
+          <Button
+            variant={autoRefresh ? "default" : "outline"}
+            size="sm"
+            onClick={() => setAutoRefresh((p) => !p)}
+            className={cn(
+              autoRefresh &&
+                "bg-emerald-600 hover:bg-emerald-700 text-white",
+            )}
+          >
+            <Clock className="h-4 w-4 mr-1" />
+            자동갱신 {autoRefresh ? "ON" : "OFF"}
+          </Button>
+        </div>
+      </div>
+
+      {/* ── 본문 ── */}
+      <div className="flex-1 overflow-auto p-6 space-y-6">
+        {/* 요약 카드 */}
+        <div className="grid grid-cols-5 gap-4">
+          {summaryCards.map((card) => (
+            <div
+              key={card.label}
+              className={cn(
+                "rounded-xl bg-gradient-to-br p-5 shadow-md",
+                card.color,
+              )}
+            >
+              <p className="text-sm font-medium text-white/80">
+                {card.label}
+              </p>
+              <p className={cn("mt-2 text-3xl font-bold", card.textColor)}>
+                {card.value}
+                {card.sub && (
+                  <span className="ml-1 text-base font-normal text-white/70">
+                    {card.sub}
+                  </span>
+                )}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* 검사유형 탭 */}
+        <div className="flex items-center gap-2">
+          {TABS.map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={cn(
+                "px-4 py-1.5 rounded-full text-sm font-medium transition-colors",
+                activeTab === tab.key
+                  ? "bg-emerald-600 text-white shadow"
+                  : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border",
+              )}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* 테이블 영역 */}
+        <div className="bg-white dark:bg-gray-800 rounded-xl shadow border overflow-hidden">
+          {/* 입고/출하 준비중 */}
+          {(activeTab === "incoming" || activeTab === "shipping") ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Search className="h-12 w-12 mb-4 opacity-40" />
+              <p className="text-lg font-medium">준비중</p>
+              <p className="text-sm mt-1">
+                {activeTab === "incoming" ? "입고검사" : "출하검사"} 데이터는
+                아직 지원되지 않습니다.
+              </p>
+            </div>
+          ) : loading && filteredRows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Loader2 className="h-10 w-10 animate-spin mb-4" />
+              <p>데이터를 불러오는 중...</p>
+            </div>
+          ) : filteredRows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-24 text-gray-400">
+              <Inbox className="h-12 w-12 mb-4 opacity-40" />
+              <p className="text-lg font-medium">금일 검사 데이터가 없습니다</p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow className="bg-gray-50 dark:bg-gray-700/50">
+                    <TableHead className="w-[50px] text-center">No</TableHead>
+                    <TableHead className="min-w-[120px]">검사번호</TableHead>
+                    <TableHead className="min-w-[90px] text-center">
+                      검사유형
+                    </TableHead>
+                    <TableHead className="min-w-[140px]">품목명</TableHead>
+                    <TableHead className="min-w-[100px]">규격</TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      검사수량
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      합격수량
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-right">
+                      불합격수량
+                    </TableHead>
+                    <TableHead className="min-w-[70px] text-right">
+                      불량율
+                    </TableHead>
+                    <TableHead className="min-w-[160px] text-center">
+                      검사결과
+                    </TableHead>
+                    <TableHead className="min-w-[70px] text-center">
+                      판정
+                    </TableHead>
+                    <TableHead className="min-w-[80px] text-center">
+                      검사자
+                    </TableHead>
+                    <TableHead className="min-w-[150px]">검사일시</TableHead>
+                    <TableHead className="min-w-[100px]">비고</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredRows.map((row) => {
+                    const goodPct =
+                      row.inspectionQty > 0
+                        ? (row.goodQty / row.inspectionQty) * 100
+                        : 0;
+                    const defectPct =
+                      row.inspectionQty > 0
+                        ? (row.defectQty / row.inspectionQty) * 100
+                        : 0;
+
+                    return (
+                      <TableRow
+                        key={row.no}
+                        className="hover:bg-gray-50 dark:hover:bg-gray-700/30"
+                      >
+                        <TableCell className="text-center text-sm text-gray-500">
+                          {row.no}
+                        </TableCell>
+                        <TableCell className="font-mono text-sm">
+                          {row.inspectionNo}
+                        </TableCell>
+                        <TableCell className="text-center">
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-xs",
+                              badgeVariant("type", row.inspectionType),
+                            )}
+                          >
+                            {row.inspectionType}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-sm font-medium">
+                          {row.itemName}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-500">
+                          {row.spec}
+                        </TableCell>
+                        <TableCell className="text-right text-sm">
+                          {fmt(row.inspectionQty)}
+                        </TableCell>
+                        <TableCell className="text-right text-sm text-emerald-600">
+                          {fmt(row.goodQty)}
+                        </TableCell>
+                        <TableCell className="text-right text-sm text-red-600">
+                          {fmt(row.defectQty)}
+                        </TableCell>
+                        <TableCell
+                          className={cn(
+                            "text-right text-sm",
+                            badgeVariant("defectRate", row.defectRate),
+                          )}
+                        >
+                          {pct(row.defectRate)}
+                        </TableCell>
+                        {/* 검사결과 프로그레스바 */}
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <div className="flex-1 h-3 bg-gray-100 dark:bg-gray-600 rounded-full overflow-hidden flex">
+                              <div
+                                className="h-full bg-emerald-500 transition-all"
+                                style={{ width: `${goodPct}%` }}
+                              />
+                              <div
+                                className="h-full bg-red-500 transition-all"
+                                style={{ width: `${defectPct}%` }}
+                              />
+                            </div>
+                            <span className="text-xs text-gray-400 whitespace-nowrap w-[42px] text-right">
+                              {pct(goodPct)}
+                            </span>
+                          </div>
+                        </TableCell>
+                        {/* 판정 배지 */}
+                        <TableCell className="text-center">
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-xs",
+                              badgeVariant("result", row.result),
+                            )}
+                          >
+                            {row.result}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-center text-sm">
+                          {row.inspectorName}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-500">
+                          {row.inspectedAt !== "-"
+                            ? new Date(row.inspectedAt).toLocaleString(
+                                "ko-KR",
+                                {
+                                  month: "2-digit",
+                                  day: "2-digit",
+                                  hour: "2-digit",
+                                  minute: "2-digit",
+                                  hour12: false,
+                                },
+                              )
+                            : "-"}
+                        </TableCell>
+                        <TableCell className="text-sm text-gray-400">
+                          {row.remark || "-"}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/outsourcing/subcontractor-item/page.tsx b/frontend/app/(main)/COMPANY_9/outsourcing/subcontractor-item/page.tsx
new file mode 100644
index 00000000..ad6622da
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/outsourcing/subcontractor-item/page.tsx
@@ -0,0 +1,582 @@
+"use client";
+
+/**
+ * 외주품목정보 — 하드코딩 페이지
+ *
+ * 좌측: 품목 목록 (subcontractor_item_mapping 기반 품목, item_info 조인)
+ * 우측: 선택한 품목의 외주업체 정보 (subcontractor_item_mapping → subcontractor_mng 조인)
+ *
+ * 외주업체관리와 양방향 연동 (같은 subcontractor_item_mapping 테이블)
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Plus, Save, Loader2, FileSpreadsheet, Download, Pencil, Inbox, Search, RotateCcw, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const ITEM_TABLE = "item_info";
+const MAPPING_TABLE = "subcontractor_item_mapping";
+const SUBCONTRACTOR_TABLE = "subcontractor_mng";
+
+const formatNum = (v: any) => (v == null || v === "" ? "-" : Number(v).toLocaleString());
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "selling_price", label: "판매가격" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
+];
+export default function SubcontractorItemPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 좌측: 품목
+  const [items, setItems] = useState<any[]>([]);
+  const [itemLoading, setItemLoading] = useState(false);
+  const [itemCount, setItemCount] = useState(0);
+  const [inputKeyword, setInputKeyword] = useState("");
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  // 우측: 외주업체
+  const [subcontractorItems, setSubcontractorItems] = useState<any[]>([]);
+  const [subcontractorLoading, setSubcontractorLoading] = useState(false);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 외주업체 추가 모달
+  const [subSelectOpen, setSubSelectOpen] = useState(false);
+  const [subSearchKeyword, setSubSearchKeyword] = useState("");
+  const [subSearchResults, setSubSearchResults] = useState<any[]>([]);
+  const [subSearchLoading, setSubSearchLoading] = useState(false);
+  const [subCheckedIds, setSubCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 수정 모달
+  const [editItemOpen, setEditItemOpen] = useState(false);
+  const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-subcontractor-item", ITEM_TABLE, GRID_COLUMNS_CONFIG);
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      item_number: { width: "w-[110px]" },
+      item_name: { minWidth: "min-w-[130px]", render: (v) => v || "-" },
+      size: { width: "w-[90px]", render: (v) => v || "-" },
+      unit: { width: "w-[60px]", render: (v) => v || "-" },
+      standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
+      selling_price: { width: "w-[90px]", align: "right", formatNumber: true },
+      currency_code: { width: "w-[50px]", render: (v) => v || "-" },
+      status: { width: "w-[60px]", render: (v) => v || "-" },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 좌측: 품목 조회 (division이 "외주관리"인 품목만 필터링)
+  const outsourcingDivisionCode = categoryOptions["division"]?.find(
+    (o) => o.label === "외주관리" || o.label === "외주" || o.label.includes("외주")
+  )?.code;
+
+  const fetchItems = useCallback(async () => {
+    setItemLoading(true);
+    try {
+      const filters: any[] = [];
+      if (outsourcingDivisionCode) {
+        filters.push({ columnName: "division", operator: "equals", value: outsourcingDivisionCode });
+      }
+      if (searchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: searchKeyword });
+      }
+      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const CATS = ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+      setItemCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setItemLoading(false);
+    }
+  }, [searchKeyword, categoryOptions, outsourcingDivisionCode]);
+
+  useEffect(() => { fetchItems(); }, [fetchItems]);
+
+  // 선택된 품목
+  const selectedItem = items.find((i) => i.id === selectedItemId);
+
+  // 우측: 외주업체 목록 조회
+  useEffect(() => {
+    if (!selectedItem?.item_number) { setSubcontractorItems([]); return; }
+    const itemKey = selectedItem.item_number;
+    const fetchSubcontractorItems = async () => {
+      setSubcontractorLoading(true);
+      try {
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
+          autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        const subIds = [...new Set(mappings.map((m: any) => m.subcontractor_id).filter(Boolean))];
+        let subMap: Record<string, any> = {};
+        if (subIds.length > 0) {
+          try {
+            const subRes = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
+              page: 1, size: subIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "subcontractor_code", operator: "in", value: subIds }] },
+              autoFilter: true,
+            });
+            for (const s of (subRes.data?.data?.data || subRes.data?.data?.rows || [])) {
+              subMap[s.subcontractor_code] = s;
+            }
+          } catch { /* skip */ }
+        }
+
+        setSubcontractorItems(mappings.map((m: any) => ({
+          ...m,
+          subcontractor_code: m.subcontractor_id,
+          subcontractor_name: subMap[m.subcontractor_id]?.subcontractor_name || "",
+        })));
+      } catch (err) {
+        console.error("외주업체 조회 실패:", err);
+      } finally {
+        setSubcontractorLoading(false);
+      }
+    };
+    fetchSubcontractorItems();
+  }, [selectedItem?.item_number]);
+
+  // 외주업체 검색
+  const searchSubcontractors = async () => {
+    setSubSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (subSearchKeyword) filters.push({ columnName: "subcontractor_name", operator: "contains", value: subSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const all = res.data?.data?.data || res.data?.data?.rows || [];
+      const existing = new Set(subcontractorItems.map((s: any) => s.subcontractor_id || s.subcontractor_code));
+      setSubSearchResults(all.filter((s: any) => !existing.has(s.subcontractor_code)));
+    } catch { /* skip */ } finally { setSubSearchLoading(false); }
+  };
+
+  // 외주업체 추가 저장
+  const addSelectedSubcontractors = async () => {
+    const selected = subSearchResults.filter((s) => subCheckedIds.has(s.id));
+    if (selected.length === 0 || !selectedItem) return;
+    try {
+      for (const sub of selected) {
+        await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          subcontractor_id: sub.subcontractor_code,
+          item_id: selectedItem.item_number,
+        });
+      }
+      toast.success(`${selected.length}개 외주업체가 추가되었습니다.`);
+      setSubCheckedIds(new Set());
+      setSubSelectOpen(false);
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "외주업체 추가에 실패했습니다.");
+    }
+  };
+
+  // 품목 수정
+  const openEditItem = () => {
+    if (!selectedItem) return;
+    setEditItemForm({ ...selectedItem });
+    setEditItemOpen(true);
+  };
+
+  const handleEditSave = async () => {
+    if (!editItemForm.id) return;
+    setSaving(true);
+    try {
+      await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
+        originalData: { id: editItemForm.id },
+        updatedData: {
+          selling_price: editItemForm.selling_price || null,
+          standard_price: editItemForm.standard_price || null,
+          currency_code: editItemForm.currency_code || null,
+        },
+      });
+      toast.success("수정되었습니다.");
+      setEditItemOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "수정에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) return;
+    const data = items.map((i) => ({
+      품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
+      기준단가: i.standard_price, 판매가격: i.selling_price, 통화: i.currency_code, 상태: i.status,
+    }));
+    await exportToExcel(data, "외주품목정보.xlsx", "외주품목");
+    toast.success("다운로드 완료");
+  };
+
+  const handleSearch = () => setSearchKeyword(inputKeyword);
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>외주관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="text-foreground font-medium">외주품목정보</span>
+      </div>
+
+      {/* 검색 바 */}
+      <div className="flex items-center gap-2 px-4 py-3 bg-card border rounded-lg shrink-0">
+        <span className="text-[11px] font-semibold text-muted-foreground whitespace-nowrap">품명</span>
+        <Input
+          className="h-9 w-[200px]"
+          placeholder="품명 검색"
+          value={inputKeyword}
+          onChange={(e) => setInputKeyword(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+        />
+        <Button variant="outline" size="sm" className="h-9" onClick={() => { setInputKeyword(""); setSearchKeyword(""); }}>
+          <RotateCcw className="w-3.5 h-3.5 mr-1" /> 초기화
+        </Button>
+        <Button size="sm" className="h-9" onClick={handleSearch}>
+          <Search className="w-3.5 h-3.5 mr-1" /> 조회
+        </Button>
+        <div className="ml-auto flex gap-1.5">
+          <Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 외주품목 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">외주품목 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{itemCount}건</span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <EDataTable
+                columns={mainTableColumns}
+                data={ts.groupData(items)}
+                loading={itemLoading}
+                emptyMessage="등록된 외주품목이 없어요"
+                selectedId={selectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
+                onRowDoubleClick={() => openEditItem()}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-subcontractor-item-main"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 외주업체 정보 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              <div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold">외주업체 정보</h3>
+                  {selectedItem && <Badge variant="outline" className="font-normal">{selectedItem.item_name}</Badge>}
+                </div>
+                <Button variant="outline" size="sm" disabled={!selectedItemId}
+                  onClick={() => { setSubCheckedIds(new Set()); setSubSelectOpen(true); searchSubcontractors(); }}>
+                  <Plus className="w-3.5 h-3.5 mr-1" /> 외주업체 추가
+                </Button>
+              </div>
+              {!selectedItemId ? (
+                <div className="flex-1 flex flex-col items-center justify-center gap-3 m-3 border-2 border-dashed rounded-lg text-center">
+                  <Inbox className="w-12 h-12 text-muted-foreground/40" />
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">품목을 선택해주세요</p>
+                    <p className="text-xs text-muted-foreground mt-1">좌측에서 품목을 선택하면 외주업체 정보가 표시돼요</p>
+                  </div>
+                </div>
+              ) : subcontractorLoading ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : subcontractorItems.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                  <Inbox className="w-8 h-8 mb-2 opacity-40" />
+                  <p className="text-sm">등록된 외주업체가 없어요</p>
+                </div>
+              ) : (
+                <div className="flex-1 overflow-auto">
+                  <Table noWrapper>
+                    <thead className="sticky top-0 z-10 bg-card">
+                      <TableRow>
+                        <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
+                        <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
+                        <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품번</TableHead>
+                        <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품명</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                        <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                        <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                      </TableRow>
+                    </thead>
+                    <TableBody>
+                      {subcontractorItems.map((item, idx) => (
+                        <TableRow key={item.id || idx}>
+                          <TableCell className="text-[13px] font-mono">{item.subcontractor_code || "-"}</TableCell>
+                          <TableCell className="text-sm">{item.subcontractor_name || "-"}</TableCell>
+                          <TableCell className="text-[13px]">{item.subcontractor_item_code || "-"}</TableCell>
+                          <TableCell className="text-[13px]">{item.subcontractor_item_name || "-"}</TableCell>
+                          <TableCell className="text-[13px] text-right font-mono">{formatNum(item.base_price)}</TableCell>
+                          <TableCell className="text-[13px] text-right font-mono">{formatNum(item.calculated_price)}</TableCell>
+                          <TableCell className="text-[13px]">{item.currency_code || "-"}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* 품목 수정 모달 */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>외주품목 수정</DialogTitle>
+            <DialogDescription>{editItemForm.item_number || ""} — {editItemForm.item_name || ""}</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-sm text-muted-foreground">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+            <div className="col-span-2 border-t my-2" />
+            <div className="space-y-1.5">
+              <Label className="text-sm">판매가격</Label>
+              <Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
+                placeholder="판매가격" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">기준단가</Label>
+              <Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가" className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">통화</Label>
+              <Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 외주업체 추가 모달 */}
+      <Dialog open={subSelectOpen} onOpenChange={setSubSelectOpen}>
+        <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>외주업체 선택</DialogTitle>
+            <DialogDescription>품목에 추가할 외주업체를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="외주업체명 검색" value={subSearchKeyword}
+              onChange={(e) => setSubSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchSubcontractors()}
+              className="h-9 flex-1" />
+            <Button size="sm" onClick={searchSubcontractors} disabled={subSearchLoading} className="h-9">
+              {subSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto border rounded-lg">
+            <Table noWrapper>
+              <thead className="sticky top-0 z-10 bg-card">
+                <TableRow>
+                  <TableHead className="w-[40px] text-center">
+                    <input type="checkbox"
+                      checked={subSearchResults.length > 0 && subCheckedIds.size === subSearchResults.length}
+                      onChange={(e) => {
+                        if (e.target.checked) setSubCheckedIds(new Set(subSearchResults.map((s) => s.id)));
+                        else setSubCheckedIds(new Set());
+                      }} />
+                  </TableHead>
+                  <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
+                  <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
+                  <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래유형</TableHead>
+                  <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                </TableRow>
+              </thead>
+              <TableBody>
+                {subSearchResults.length === 0 ? (
+                  <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없어요</TableCell></TableRow>
+                ) : subSearchResults.map((s) => (
+                  <TableRow key={s.id} className={cn("cursor-pointer", subCheckedIds.has(s.id) && "bg-primary/5")}
+                    onClick={() => setSubCheckedIds((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(s.id)) next.delete(s.id); else next.add(s.id);
+                      return next;
+                    })}>
+                    <TableCell className="text-center"><input type="checkbox" checked={subCheckedIds.has(s.id)} readOnly /></TableCell>
+                    <TableCell className="text-[13px]">{s.subcontractor_code}</TableCell>
+                    <TableCell className="text-sm">{s.subcontractor_name}</TableCell>
+                    <TableCell className="text-[13px]">{s.division}</TableCell>
+                    <TableCell className="text-[13px]">{s.contact_person}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{subCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setSubSelectOpen(false)}>취소</Button>
+                <Button onClick={addSelectedSubcontractors} disabled={subCheckedIds.size === 0}>
+                  <Plus className="w-4 h-4 mr-1" /> {subCheckedIds.size}개 추가
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={ITEM_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchItems()}
+      />
+
+      {/* 테이블 설정 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/outsourcing/subcontractor/page.tsx b/frontend/app/(main)/COMPANY_9/outsourcing/subcontractor/page.tsx
new file mode 100644
index 00000000..934c03c5
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/outsourcing/subcontractor/page.tsx
@@ -0,0 +1,1410 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Wrench, Package, Search, X, RefreshCw, Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { validateField, validateForm, formatField } from "@/lib/utils/validation";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const SUBCONTRACTOR_TABLE = "subcontractor_mng";
+const MAPPING_TABLE = "subcontractor_item_mapping";
+const PRICE_TABLE = "subcontractor_item_prices";
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "subcontractor_code", label: "외주사코드" },
+  { key: "subcontractor_name", label: "외주사명" },
+  { key: "division", label: "업체 유형" },
+  { key: "status", label: "상태" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "담당자 전화번호" },
+  { key: "contact_email", label: "담당자 이메일" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "phone", label: "전화번호" },
+  { key: "fax", label: "팩스" },
+  { key: "representative", label: "대표자명" },
+  { key: "grade", label: "등급" },
+  { key: "process_type", label: "공정 유형" },
+  { key: "payment_terms", label: "결제 조건" },
+  { key: "remarks", label: "비고" },
+  { key: "writer", label: "작성자" },
+  { key: "created_date", label: "생성일시" },
+  { key: "updated_date", label: "수정일시" },
+];
+export default function SubcontractorManagementPage() {
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 외주업체 목록
+  const [subcontractors, setSubcontractors] = useState<any[]>([]);
+  const [subcontractorLoading, setSubcontractorLoading] = useState(false);
+  const [subcontractorCount, setSubcontractorCount] = useState(0);
+  const [selectedSubcontractorId, setSelectedSubcontractorId] = useState<string | null>(null);
+
+  // 우측: 품목 단가
+  const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceLoading, setPriceLoading] = useState(false);
+
+  // 품목 편집 데이터
+  const [editItemData, setEditItemData] = useState<any>(null);
+
+  // 외주업체 등록/수정 모달
+  const [subcontractorModalOpen, setSubcontractorModalOpen] = useState(false);
+  const [subcontractorEditMode, setSubcontractorEditMode] = useState(false);
+  const [subcontractorForm, setSubcontractorForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 채번 시스템
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  // 품목 추가 모달 (1단계: 검색/선택)
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 상세 입력 모달 (2단계)
+  const [itemDetailOpen, setItemDetailOpen] = useState(false);
+  const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{
+    _id: string; subcontractor_item_code: string; subcontractor_item_name: string;
+  }>>>({});
+  const [itemPrices, setItemPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 테이블 설정
+  const DEFAULT_VISIBLE_KEYS = ["subcontractor_code", "subcontractor_name", "division", "status", "contact_person", "contact_phone"];
+  const ts = useTableSettings("c16-subcontractor-v2", SUBCONTRACTOR_TABLE, GRID_COLUMNS_CONFIG, DEFAULT_VISIBLE_KEYS);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["division", "status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${SUBCONTRACTOR_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${PRICE_TABLE}/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+    };
+    load();
+  }, []);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 셀 렌더링 헬퍼
+  const renderCellValue = (row: any, key: string) => {
+    const val = key === "division" ? (row.division_label || row.division)
+      : key === "status" ? (row.status_label || row.status)
+      : row[key];
+    if (!val) return "-";
+    if (key === "subcontractor_code") return <span className="text-primary">{val}</span>;
+    if (key === "division") return <Badge variant="secondary" className="text-[10px] px-1.5 py-0">{val}</Badge>;
+    if (key === "status") return <Badge variant="outline" className="text-[10px] px-1.5 py-0">{val}</Badge>;
+    if (key === "subcontractor_name") return <span className="font-medium">{val}</span>;
+    return val;
+  };
+
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      render: (value: any, row: any) => renderCellValue(row, col.key),
+    }));
+  }, [ts.visibleColumns, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 외주업체 목록 조회
+  const fetchSubcontractors = useCallback(async () => {
+    setSubcontractorLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+
+      const res = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => ({
+        ...r,
+        division_label: resolve("division", r.division),
+        status_label: resolve("status", r.status),
+      }));
+      setSubcontractors(data);
+      setSubcontractorCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      toast.error("외주업체 목록을 불러오지 못했어요");
+    } finally {
+      setSubcontractorLoading(false);
+    }
+  }, [searchFilters, categoryOptions]);
+
+  useEffect(() => { fetchSubcontractors(); }, [fetchSubcontractors]);
+
+  // 선택된 외주업체
+  const selectedSubcontractor = subcontractors.find((c) => c.id === selectedSubcontractorId);
+
+  // 선택된 외주업체의 품목 단가 조회
+  useEffect(() => {
+    if (!selectedSubcontractor?.subcontractor_code) { setPriceItems([]); return; }
+    const fetchItems = async () => {
+      setPriceLoading(true);
+      try {
+        const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor.subcontractor_code },
+          ]},
+          autoFilter: true,
+        });
+        const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        let priceMap: Record<string, any> = {};
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor.subcontractor_code },
+              ]},
+              autoFilter: true,
+            });
+            const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+            for (const p of prices) {
+              const key = p.item_id;
+              if (!priceMap[key] || (p.start_date && (!priceMap[key].start_date || p.start_date > priceMap[key].start_date))) {
+                priceMap[key] = p;
+              }
+            }
+          } catch { /* skip */ }
+        }
+
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
+        };
+        setPriceItems(mappings.map((m: any) => {
+          const itemInfo = itemMap[m.item_id] || {};
+          const price = priceMap[m.item_id] || {};
+          return {
+            ...m,
+            item_number: m.item_id,
+            item_name: itemInfo.item_name || "",
+            base_price_type: priceResolve("base_price_type", price.base_price_type || m.base_price_type || ""),
+            base_price: price.base_price || m.base_price || "",
+            discount_type: priceResolve("discount_type", price.discount_type || m.discount_type || ""),
+            discount_value: price.discount_value || m.discount_value || "",
+            rounding_type: priceResolve("rounding_unit_value", price.rounding_type || m.rounding_type || ""),
+            calculated_price: price.calculated_price || m.calculated_price || "",
+            currency_code: priceResolve("currency_code", price.currency_code || m.currency_code || ""),
+          };
+        }));
+      } catch (err) {
+        // 품목 조회 실패 시 무시
+      } finally {
+        setPriceLoading(false);
+      }
+    };
+    fetchItems();
+  }, [selectedSubcontractor?.subcontractor_code, priceCategoryOptions]);
+
+  // 외주업체 등록 모달 열기
+  const openSubcontractorRegister = async () => {
+    setSubcontractorForm({});
+    setFormErrors({});
+    setSubcontractorEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setSubcontractorModalOpen(true);
+
+    // 채번 규칙 조회 (subcontractor_mng.subcontractor_code)
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/subcontractor_mng/subcontractor_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          setPreviewCode(previewRes.data.generatedCode);
+        }
+      }
+    } catch {
+      // 채번 규칙 없으면 무시
+    }
+  };
+
+  const openSubcontractorEdit = () => {
+    if (!selectedSubcontractor) return;
+    setSubcontractorForm({ ...selectedSubcontractor });
+    setFormErrors({});
+    setSubcontractorEditMode(true);
+    setSubcontractorModalOpen(true);
+  };
+
+  const handleFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setSubcontractorForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => {
+      const next = { ...prev };
+      if (error) next[field] = error; else delete next[field];
+      return next;
+    });
+  };
+
+  const handleSubcontractorSave = async () => {
+    if (!subcontractorForm.subcontractor_name) { toast.error("외주업체명은 필수예요"); return; }
+    if (!subcontractorForm.status) { toast.error("상태는 필수예요"); return; }
+    const errors = validateForm(subcontractorForm, ["contact_phone", "email", "business_number"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) {
+      toast.error("입력 형식을 확인해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, division_label, status_label, ...fields } = subcontractorForm;
+      if (subcontractorEditMode && id) {
+        await apiClient.put(`/table-management/tables/${SUBCONTRACTOR_TABLE}/edit`, {
+          originalData: { id }, updatedData: fields,
+        });
+        toast.success("수정되었어요");
+      } else {
+        // 채번 규칙이 있으면 allocate로 실제 코드 할당
+        let allocatedCode: string | undefined;
+        if (numberingRuleId) {
+          const allocRes = await allocateNumberingCode(numberingRuleId);
+          if (allocRes.success && allocRes.data?.generatedCode) {
+            allocatedCode = allocRes.data.generatedCode;
+          } else {
+            toast.error("채번 코드 할당에 실패했습니다.");
+            return;
+          }
+        }
+        const saveFields = allocatedCode ? { ...fields, subcontractor_code: allocatedCode } : fields;
+        await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/add`, { id: crypto.randomUUID(), ...saveFields });
+        toast.success("등록되었어요");
+      }
+      setSubcontractorModalOpen(false);
+      fetchSubcontractors();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 외주업체 삭제
+  const handleSubcontractorDelete = async () => {
+    if (!selectedSubcontractorId) return;
+    const ok = await confirm("외주업체를 삭제할까요?", {
+      description: "관련된 품목 매핑, 단가 정보도 함께 삭제돼요",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${SUBCONTRACTOR_TABLE}/delete`, {
+        data: [{ id: selectedSubcontractorId }],
+      });
+      toast.success("삭제되었어요");
+      setSelectedSubcontractorId(null);
+      fetchSubcontractors();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  // 품목 검색
+  const searchItems = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const allItems = res.data?.data?.data || res.data?.data?.rows || [];
+      const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
+      const OUTSOURCING_CODE = "CAT_MMDJB7R4_TO3T";
+      setItemSearchResults(allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        const div = item.division || "";
+        return div.includes(OUTSOURCING_CODE) || div.includes("외주");
+      }));
+    } catch { /* skip */ } finally { setItemSearchLoading(false); }
+  };
+
+  // 품목 선택 완료 → 상세 입력 모달로 전환
+  const goToItemDetail = () => {
+    const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
+    if (selected.length === 0) { toast.error("품목을 선택해주세요"); return; }
+    setSelectedItemsForDetail(selected);
+    const mappings: typeof itemMappings = {};
+    const prices: typeof itemPrices = {};
+    for (const item of selected) {
+      const key = item.item_number || item.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: item.standard_price || item.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: item.standard_price || item.selling_price || "",
+      }];
+    }
+    setItemMappings(mappings);
+    setItemPrices(prices);
+    setEditItemData(null);
+    setItemSelectOpen(false);
+    setItemDetailOpen(true);
+  };
+
+  const addMappingRow = (itemKey: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, subcontractor_item_code: "", subcontractor_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (itemKey: string, rowId: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  const addPriceRow = (itemKey: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (itemKey: string, rowId: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          updated.calculated_price = String(Math.round(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  // 우측 품목 편집 열기 — 해당 item_number의 모든 매핑+단가를 로드
+  const openEditItem = async (row: any) => {
+    const itemKey = row.item_number || row.item_id;
+    let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "equals", value: itemKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) itemInfo = found;
+    } catch { /* skip */ }
+
+    // 같은 item_number를 가진 모든 priceItems 행에서 매핑 정보 추출
+    const allRowsForItem = priceItems.filter((p: any) => (p.item_number || p.item_id) === itemKey);
+    const allMappingIds = allRowsForItem.map((r: any) => r.id).filter(Boolean);
+
+    const mappingRows = allRowsForItem
+      .filter((r: any) => r.subcontractor_item_code || r.subcontractor_item_name)
+      .map((r: any) => ({
+        _id: `m_existing_${r.id}`,
+        subcontractor_item_code: r.subcontractor_item_code || "",
+        subcontractor_item_name: r.subcontractor_item_name || "",
+      }));
+
+    // 서버에서 이 item+subcontractor의 모든 단가를 raw 코드로 가져오기
+    let priceRows: Array<{
+      _id: string; start_date: string; end_date: string; currency_code: string;
+      base_price_type: string; base_price: string; discount_type: string;
+      discount_value: string; rounding_type: string; rounding_unit_value: string;
+      calculated_price: string;
+    }> = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor!.subcontractor_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]},
+        autoFilter: true,
+      });
+      const rawPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = rawPrices.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date || "",
+        end_date: p.end_date || "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedItemsForDetail([itemInfo]);
+    setItemMappings({ [itemKey]: mappingRows });
+    setItemPrices({ [itemKey]: priceRows });
+    // editItemData에 원본 매핑 ID 목록 저장 (삭제 시 사용)
+    setEditItemData({ ...row, _allMappingIds: allMappingIds });
+    setItemDetailOpen(true);
+  };
+
+  const handleItemDetailSave = async () => {
+    if (!selectedSubcontractor) return;
+    const isEditingExisting = !!editItemData;
+    setSaving(true);
+    try {
+      for (const item of selectedItemsForDetail) {
+        const itemKey = item.item_number || item.id;
+        const mappingRows = itemMappings[itemKey] || [];
+
+        if (isEditingExisting && editItemData?.id) {
+          // 1) 기존 매핑 모두 삭제
+          const allMappingIds: string[] = editItemData._allMappingIds || [editItemData.id];
+          if (allMappingIds.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: allMappingIds.map((mid: string) => ({ id: mid })),
+            });
+          }
+
+          // 2) 기존 단가 모두 삭제 (subcontractor_id + item_id 기준)
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "subcontractor_id", operator: "equals", value: selectedSubcontractor.subcontractor_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+            if (existing.length > 0) {
+              await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+                data: existing.map((p: any) => ({ id: p.id })),
+              });
+            }
+          } catch { /* skip */ }
+
+          // 3) 모든 매핑 재삽입
+          let firstMappingId: string | null = null;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const newId = crypto.randomUUID();
+            if (mi === 0) firstMappingId = newId;
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: newId,
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              subcontractor_item_code: mappingRows[mi].subcontractor_item_code || "",
+              subcontractor_item_name: mappingRows[mi].subcontractor_item_name || "",
+            });
+          }
+          // 매핑이 비어있으면 빈 매핑 1개 생성 (item_id 연결 유지)
+          if (mappingRows.length === 0) {
+            firstMappingId = crypto.randomUUID();
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: firstMappingId,
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              subcontractor_item_code: "",
+              subcontractor_item_name: "",
+            });
+          }
+
+          // 4) 모든 단가 재삽입
+          const filteredPriceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of filteredPriceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: firstMappingId || "",
+              subcontractor_id: selectedSubcontractor.subcontractor_code,
+              item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        } else {
+          let mappingId: string | null = null;
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
+            subcontractor_item_code: mappingRows[0]?.subcontractor_item_code || "",
+            subcontractor_item_name: mappingRows[0]?.subcontractor_item_name || "",
+          });
+          mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
+              subcontractor_item_code: mappingRows[mi].subcontractor_item_code || "",
+              subcontractor_item_name: mappingRows[mi].subcontractor_item_name || "",
+            });
+          }
+
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", subcontractor_id: selectedSubcontractor.subcontractor_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었어요" : `${selectedItemsForDetail.length}개 품목이 추가되었어요`);
+      setItemDetailOpen(false);
+      setEditItemData(null);
+      setItemCheckedIds(new Set());
+      const cid = selectedSubcontractorId;
+      setSelectedSubcontractorId(null);
+      setTimeout(() => setSelectedSubcontractorId(cid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (subcontractors.length === 0) return;
+    toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
+    try {
+      const allMappings: any[] = [];
+      const subCodes = subcontractors.map((c) => c.subcontractor_code).filter(Boolean);
+
+      if (subCodes.length > 0) {
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 5000, autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        for (const m of mappings) {
+          const itemInfo = itemMap[m.item_id] || {};
+          allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
+        }
+      }
+
+      const rows: Record<string, any>[] = [];
+      for (const c of subcontractors) {
+        const subMappings = allMappings.filter((m) => m.subcontractor_id === c.subcontractor_code);
+        if (subMappings.length === 0) {
+          rows.push({
+            외주업체코드: c.subcontractor_code, 외주업체명: c.subcontractor_name,
+            거래유형: getCategoryLabel("division", c.division),
+            담당자: c.contact_person, 전화번호: c.contact_phone,
+            사업자번호: c.business_number, 이메일: c.email,
+            상태: getCategoryLabel("status", c.status),
+            품목코드: "", 품명: "", 규격: "",
+            외주품번: "", 외주품명: "",
+            기준가: "", 할인유형: "", 할인값: "", 단가: "", 통화: "",
+          });
+        } else {
+          for (const m of subMappings) {
+            rows.push({
+              외주업체코드: c.subcontractor_code, 외주업체명: c.subcontractor_name,
+              거래유형: getCategoryLabel("division", c.division),
+              담당자: c.contact_person, 전화번호: c.contact_phone,
+              사업자번호: c.business_number, 이메일: c.email,
+              상태: getCategoryLabel("status", c.status),
+              품목코드: m.item_id || "", 품명: m.item_name || "", 규격: m.item_spec || "",
+              외주품번: m.subcontractor_item_code || "", 외주품명: m.subcontractor_item_name || "",
+              기준가: m.base_price || "", 할인유형: m.discount_type || "", 할인값: m.discount_value || "",
+              단가: m.calculated_price || "", 통화: m.currency_code || "",
+            });
+          }
+        }
+      }
+
+      await exportToExcel(rows, "외주업체관리.xlsx", "외주업체+품목");
+      toast.dismiss("excel-dl");
+      toast.success(`${rows.length}행 다운로드 완료`);
+    } catch (err) {
+      toast.dismiss("excel-dl");
+      toast.error("다운로드에 실패했어요");
+    }
+  };
+
+  // 셀렉트 렌더링
+  const renderSelect = (field: string, value: string, onChange: (v: string) => void, placeholder: string) => (
+    <Select value={value || ""} onValueChange={onChange}>
+      <SelectTrigger className="h-9 text-sm"><SelectValue placeholder={placeholder} /></SelectTrigger>
+      <SelectContent>
+        {(categoryOptions[field] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+      </SelectContent>
+    </Select>
+  );
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>외주관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="font-medium text-foreground">외주사관리</span>
+      </nav>
+
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={SUBCONTRACTOR_TABLE}
+        filterId="c16-subcontractor"
+        onFilterChange={setSearchFilters}
+        dataCount={subcontractorCount}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={excelDetecting}
+              onClick={async () => {
+                setExcelDetecting(true);
+                try {
+                  const result = await autoDetectMultiTableConfig(SUBCONTRACTOR_TABLE);
+                  if (result.success && result.data) {
+                    setExcelChainConfig(result.data);
+                    setExcelUploadOpen(true);
+                  } else {
+                    toast.error(result.message || "테이블 구조 분석 실패");
+                  }
+                } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+              }}
+            >
+              {excelDetecting
+                ? <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                : <FileSpreadsheet className="mr-1.5 h-4 w-4" />}
+              엑셀업로드
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+              <Download className="mr-1.5 h-4 w-4" />
+              엑셀다운로드
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 마스터-디테일 분할 패널 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg">
+
+        {/* 좌측: 외주업체 목록 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-3 shrink-0">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-semibold">외주업체 목록</span>
+                <Badge variant="outline" className="text-xs px-1.5 py-0">{subcontractorCount}건</Badge>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Button size="sm" onClick={openSubcontractorRegister}>
+                  <Plus className="h-3.5 w-3.5 mr-1" /> 등록
+                </Button>
+                <Button variant="outline" size="sm" disabled={!selectedSubcontractorId} onClick={openSubcontractorEdit}>
+                  <Pencil className="h-3.5 w-3.5 mr-1" /> 수정
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={!selectedSubcontractorId}
+                  onClick={handleSubcontractorDelete}
+                  className="text-destructive border-destructive/20 hover:bg-destructive/10"
+                >
+                  <Trash2 className="h-3.5 w-3.5 mr-1" /> 삭제
+                </Button>
+                <Button variant="ghost" size="sm" onClick={fetchSubcontractors} disabled={subcontractorLoading}>
+                  {subcontractorLoading
+                    ? <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    : <RefreshCw className="h-3.5 w-3.5" />}
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
+                  <Settings2 className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            </div>
+            <EDataTable
+              columns={mainTableColumns}
+              data={ts.groupData(subcontractors)}
+              loading={subcontractorLoading}
+              emptyMessage="등록된 외주업체가 없어요"
+              selectedId={selectedSubcontractorId}
+              onSelect={(id) => setSelectedSubcontractorId(id)}
+              onRowDoubleClick={() => openSubcontractorEdit()}
+              showPagination={true}
+              draggableColumns={false}
+              columnOrderKey="c16-subcontractor-main"
+            />
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 품목 정보 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-3 shrink-0">
+              <div className="flex items-center gap-2">
+                {selectedSubcontractor ? (
+                  <>
+                    <span className="text-sm font-semibold">{selectedSubcontractor.subcontractor_name}</span>
+                    <Badge variant="outline" className="text-[10px] px-1.5 py-0">{selectedSubcontractor.subcontractor_code}</Badge>
+                  </>
+                ) : (
+                  <>
+                    <Package className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-semibold">품목 정보</span>
+                  </>
+                )}
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!selectedSubcontractorId}
+                onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}
+              >
+                <Plus className="h-3.5 w-3.5 mr-1" /> 품목 추가
+              </Button>
+            </div>
+            <div className="flex-1 overflow-auto">
+              {!selectedSubcontractorId ? (
+                <div className="flex items-center justify-center h-full">
+                  <div className="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-12 py-10 text-center">
+                    <Wrench className="h-10 w-10 text-muted-foreground opacity-30" />
+                    <p className="text-sm text-muted-foreground">좌측에서 외주사를 선택해주세요</p>
+                  </div>
+                </div>
+              ) : priceLoading ? (
+                <div className="flex items-center justify-center py-16">
+                  <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                </div>
+              ) : priceItems.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+                  <Package className="h-12 w-12 mb-3 opacity-30" />
+                  <p className="text-sm font-medium">등록된 품목이 없어요</p>
+                </div>
+              ) : (
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품번</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품명</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                      <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                      <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {(() => {
+                      // item_number 기준 그룹화 (순서 유지)
+                      const grouped: { itemNumber: string; rows: any[] }[] = [];
+                      const groupMap = new Map<string, any[]>();
+                      for (const item of priceItems) {
+                        const key = item.item_number || item.item_id || item.id;
+                        if (!groupMap.has(key)) {
+                          const rows: any[] = [];
+                          groupMap.set(key, rows);
+                          grouped.push({ itemNumber: key, rows });
+                        }
+                        groupMap.get(key)!.push(item);
+                      }
+                      return grouped.map((group, gIdx) =>
+                        group.rows.map((item, rowIdx) => (
+                          <TableRow
+                            key={item.id}
+                            className={cn(
+                              "cursor-pointer hover:bg-muted/50",
+                              rowIdx === 0 && gIdx > 0 && "border-t-2 border-t-border/60"
+                            )}
+                            onDoubleClick={() => openEditItem(item)}
+                          >
+                            <TableCell className="text-[13px] text-primary">
+                              {rowIdx === 0 ? item.item_number : ""}
+                            </TableCell>
+                            <TableCell className="text-[13px]">
+                              {rowIdx === 0 ? item.item_name : ""}
+                            </TableCell>
+                            <TableCell className="text-[13px]">{item.subcontractor_item_code || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.subcontractor_item_name || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.base_price_type || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right">{item.base_price ? Number(item.base_price).toLocaleString() : "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.discount_type || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right">{item.discount_value || "-"}</TableCell>
+                            <TableCell className="text-[13px] text-right font-semibold">{item.calculated_price ? Number(item.calculated_price).toLocaleString() : "-"}</TableCell>
+                            <TableCell className="text-[13px]">{item.currency_code || "-"}</TableCell>
+                          </TableRow>
+                        ))
+                      );
+                    })()}
+                  </TableBody>
+                </Table>
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 모달들 ========== */}
+
+      {/* 외주업체 등록/수정 모달 */}
+      <Dialog open={subcontractorModalOpen} onOpenChange={setSubcontractorModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[680px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{subcontractorEditMode ? "외주업체 수정" : "외주업체 등록"}</DialogTitle>
+            <DialogDescription>
+              {subcontractorEditMode ? "외주업체 정보를 수정해요." : "새로운 외주업체를 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-xs">외주업체 코드</Label>
+              <Input
+                value={subcontractorEditMode ? (subcontractorForm.subcontractor_code || "") : (previewCode || subcontractorForm.subcontractor_code || "")}
+                onChange={(e) => {
+                  if (!subcontractorEditMode && !numberingRuleId) {
+                    setSubcontractorForm((p) => ({ ...p, subcontractor_code: e.target.value }));
+                  }
+                }}
+                placeholder={numberingRuleId && !subcontractorEditMode ? "자동 생성돼요" : "외주업체 코드"}
+                className="h-9 text-sm"
+                readOnly={!!numberingRuleId && !subcontractorEditMode}
+                disabled={subcontractorEditMode}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">외주업체명 <span className="text-destructive">*</span></Label>
+              <Input
+                value={subcontractorForm.subcontractor_name || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, subcontractor_name: e.target.value }))}
+                placeholder="외주업체명"
+                className="h-9 text-sm"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">거래 유형</Label>
+              {renderSelect("division", subcontractorForm.division, (v) => setSubcontractorForm((p) => ({ ...p, division: v })), "거래 유형")}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">상태 <span className="text-destructive">*</span></Label>
+              {renderSelect("status", subcontractorForm.status, (v) => setSubcontractorForm((p) => ({ ...p, status: v })), "상태")}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">담당자</Label>
+              <Input
+                value={subcontractorForm.contact_person || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, contact_person: e.target.value }))}
+                placeholder="담당자"
+                className="h-9 text-sm"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">전화번호</Label>
+              <Input
+                value={subcontractorForm.contact_phone || ""}
+                onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                placeholder="010-0000-0000"
+                className={cn("h-9 text-sm", formErrors.contact_phone && "border-destructive")}
+              />
+              {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">이메일</Label>
+              <Input
+                value={subcontractorForm.email || ""}
+                onChange={(e) => handleFormChange("email", e.target.value)}
+                placeholder="example@email.com"
+                className={cn("h-9 text-sm", formErrors.email && "border-destructive")}
+              />
+              {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">사업자번호</Label>
+              <Input
+                value={subcontractorForm.business_number || ""}
+                onChange={(e) => handleFormChange("business_number", e.target.value)}
+                placeholder="000-00-00000"
+                className={cn("h-9 text-sm", formErrors.business_number && "border-destructive")}
+              />
+              {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+            </div>
+            <div className="space-y-1.5 col-span-2">
+              <Label className="text-xs">주소</Label>
+              <Input
+                value={subcontractorForm.address || ""}
+                onChange={(e) => setSubcontractorForm((p) => ({ ...p, address: e.target.value }))}
+                placeholder="주소"
+                className="h-9 text-sm"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setSubcontractorModalOpen(false)}>취소</Button>
+            <Button onClick={handleSubcontractorSave} disabled={saving}>
+              {saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <Save className="h-4 w-4 mr-1.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 품목 추가 모달 (1단계: 검색/선택) */}
+      <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[780px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>품목 선택</DialogTitle>
+            <DialogDescription>외주업체에 추가할 품목을 선택해요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="flex gap-2">
+              <Input
+                placeholder="품명/품목코드 검색"
+                value={itemSearchKeyword}
+                onChange={(e) => setItemSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchItems()}
+                className="h-9 flex-1 text-sm"
+              />
+              <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+                {itemSearchLoading
+                  ? <Loader2 className="h-4 w-4 animate-spin" />
+                  : <><Search className="h-4 w-4 mr-1" />조회</>}
+              </Button>
+            </div>
+            <div className="overflow-auto max-h-[350px] rounded-md border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[40px] text-center">
+                      <input
+                        type="checkbox"
+                        checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                        onChange={(e) => {
+                          if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                          else setItemCheckedIds(new Set());
+                        }}
+                        className="h-4 w-4"
+                      />
+                    </TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                    <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {itemSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : itemSearchResults.map((item) => (
+                    <TableRow
+                      key={item.id}
+                      className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                      onClick={() => setItemCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <input type="checkbox" checked={itemCheckedIds.has(item.id)} readOnly className="h-4 w-4" />
+                      </TableCell>
+                      <TableCell className="text-[13px]">{item.item_number}</TableCell>
+                      <TableCell className="text-[13px]">{item.item_name}</TableCell>
+                      <TableCell className="text-[13px]">{item.size}</TableCell>
+                      <TableCell className="text-[13px]">{item.material}</TableCell>
+                      <TableCell className="text-[13px]">{item.unit}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center justify-between w-full">
+              <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+                <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                  <Plus className="h-4 w-4 mr-1" />
+                  {itemCheckedIds.size}개 다음
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 품목 상세정보 입력 모달 (2단계) */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedSubcontractor?.subcontractor_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData ? "외주 품번/품명과 기간별 단가를 수정해요" : "선택한 품목의 외주 품번/품명과 기간별 단가를 설정해요"}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2">
+            {selectedItemsForDetail.map((item, idx) => {
+              const itemKey = item.item_number || item.id;
+              const mappingRows = itemMappings[itemKey] || [];
+              const prices = itemPrices[itemKey] || [];
+
+              return (
+                <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
+                  {/* 품목 헤더 */}
+                  <div className="px-5 py-3 bg-muted/30 border-b">
+                    <div className="font-semibold text-sm">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
+                  </div>
+
+                  <div className="flex gap-4 p-4">
+                    {/* 좌: 외주 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/20">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold">외주 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 외주 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.subcontractor_item_code}
+                              onChange={(e) => updateMappingRow(itemKey, mRow._id, "subcontractor_item_code", e.target.value)}
+                              placeholder="외주 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.subcontractor_item_name}
+                              onChange={(e) => updateMappingRow(itemKey, mRow._id, "subcontractor_item_name", e.target.value)}
+                              placeholder="외주 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0" onClick={() => removeMappingRow(itemKey, mRow._id)}>
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/20">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive" onClick={() => removePriceRow(itemKey, price._id)}>
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                            {/* 기간 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select value={price.currency_code || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="통화" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준가/할인/반올림 */}
+                            <div className="flex gap-2 items-center">
+                              <div className="w-[90px]">
+                                <Select value={price.base_price_type || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["base_price_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                              <Input
+                                value={price.base_price}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "base_price", e.target.value)}
+                                className="h-8 text-xs text-right flex-1"
+                                placeholder="기준가"
+                              />
+                              <div className="w-[90px]">
+                                <Select value={price.discount_type || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인유형" /></SelectTrigger>
+                                  <SelectContent>
+                                    <SelectItem value="none">할인없음</SelectItem>
+                                    {(priceCategoryOptions["discount_type"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                              <Input
+                                value={price.discount_value}
+                                onChange={(e) => updatePriceRow(itemKey, price._id, "discount_value", e.target.value)}
+                                className="h-8 text-xs text-right w-[60px]"
+                                placeholder="0"
+                              />
+                              <div className="w-[90px]">
+                                <Select value={price.rounding_unit_value || undefined} onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}>
+                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 계산 단가 표시 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm">{price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}</span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <Save className="h-4 w-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal
+          open={excelUploadOpen}
+          onOpenChange={(open) => {
+            setExcelUploadOpen(open);
+            if (!open) setExcelChainConfig(null);
+          }}
+          config={excelChainConfig}
+          onSuccess={() => {
+            fetchSubcontractors();
+            const cid = selectedSubcontractorId;
+            setSelectedSubcontractorId(null);
+            setTimeout(() => setSelectedSubcontractorId(cid), 50);
+          }}
+        />
+      )}
+
+      {/* 테이블 설정 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        includeAutoColumns={["created_date", "updated_date", "writer"]}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/production/bom/page.tsx b/frontend/app/(main)/COMPANY_9/production/bom/page.tsx
new file mode 100644
index 00000000..0563f47b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/production/bom/page.tsx
@@ -0,0 +1,2521 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  ChevronRight,
+  ChevronDown,
+  ChevronsDown,
+  ChevronsUp,
+  Plus,
+  Trash2,
+  Search,
+  Loader2,
+  Inbox,
+  Upload,
+  Download,
+  GitBranch,
+  History,
+  CheckCircle2,
+  RotateCcw,
+  X,
+  FileText,
+  Play,
+  Copy,
+  Settings2,
+  Save,
+  Package,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+// ─── 상수 ───────────────────────────────────────
+const BOM_TABLE = "bom";
+const BOM_DETAIL_TABLE = "bom_detail";
+
+const BOM_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품명" },
+  { key: "bom_type", label: "BOM 유형" },
+  { key: "version", label: "버전" },
+  { key: "effective_date", label: "유효시작일" },
+  { key: "status", label: "상태" },
+];
+
+
+const STATUS_MAP: Record<string, { label: string; className: string }> = {
+  active: { label: "활성", className: "bg-success/10 text-success" },
+  draft: { label: "초안", className: "bg-warning/10 text-warning" },
+  expired: { label: "만료", className: "bg-destructive/10 text-destructive" },
+  inactive: { label: "비활성", className: "bg-muted text-muted-foreground" },
+};
+
+const VERSION_STATUS_MAP: Record<string, { label: string; className: string }> = {
+  active: { label: "사용중", className: "bg-success/10 text-success" },
+  developing: { label: "개발중", className: "bg-warning/10 text-warning" },
+  inactive: { label: "비활성", className: "bg-muted text-muted-foreground" },
+};
+
+const BOM_TYPE_OPTIONS = [
+  { code: "production", label: "생산 BOM" },
+  { code: "design", label: "설계 BOM" },
+  { code: "cost", label: "원가 BOM" },
+];
+
+// ─── 인터페이스 ─────────────────────────────────
+interface BomRow {
+  id: string;
+  item_id?: string;
+  item_code?: string;
+  item_name?: string;
+  bom_type?: string;
+  version?: string;
+  base_qty?: string;
+  unit?: string;
+  status?: string;
+  effective_date?: string;
+  expiry_date?: string;
+  remark?: string;
+  current_version_id?: string;
+  [key: string]: any;
+}
+
+interface BomDetail {
+  id: string;
+  bom_id: string;
+  version_id?: string;
+  parent_detail_id?: string | null;
+  child_item_id?: string;
+  item_number?: string;
+  item_name?: string;
+  item_type?: string;
+  quantity?: string;
+  unit?: string;
+  process_type?: string;
+  loss_rate?: string;
+  remark?: string;
+  level?: string;
+  seq_no?: string;
+  spec?: string;
+  writer?: string;
+  updated_date?: string;
+  [key: string]: any;
+}
+
+interface BomVersion {
+  id: string;
+  bom_id: string;
+  version_name: string;
+  revision?: number;
+  status: string;
+  created_by?: string;
+  created_date?: string;
+  detail_count?: number;
+}
+
+interface BomHistoryEntry {
+  id: string;
+  bom_id: string;
+  revision?: string;
+  version?: string;
+  change_type: string;
+  change_description?: string;
+  changed_by?: string;
+  changed_date?: string;
+}
+
+interface TreeNode extends BomDetail {
+  children: TreeNode[];
+  expanded?: boolean;
+  _isNew?: boolean;        // 신규 노드 (DB에 없음)
+  _isModified?: boolean;   // 수정된 노드
+  _tempId?: string;        // 임시 ID
+  _level?: number;         // flattenTree에서 사용
+  _isVirtualRoot?: boolean; // 가상 루트(BOM 마스터) 노드
+}
+
+// ─── 트리 구성 헬퍼 ─────────────────────────────
+function buildTree(details: BomDetail[]): TreeNode[] {
+  const nodeMap = new Map<string, TreeNode>();
+  const roots: TreeNode[] = [];
+
+  for (const d of details) {
+    nodeMap.set(d.id, { ...d, children: [], expanded: true });
+  }
+
+  for (const d of details) {
+    const node = nodeMap.get(d.id)!;
+    if (d.parent_detail_id && nodeMap.has(d.parent_detail_id)) {
+      nodeMap.get(d.parent_detail_id)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+
+  return roots;
+}
+
+function flattenTree(nodes: TreeNode[], level = 0): (TreeNode & { _level: number })[] {
+  const result: (TreeNode & { _level: number })[] = [];
+  for (const node of nodes) {
+    result.push({ ...node, _level: level });
+    if (node.expanded && node.children.length > 0) {
+      result.push(...flattenTree(node.children, level + 1));
+    }
+  }
+  return result;
+}
+
+// ─── 타입 뱃지 색상 ────────────────────────────
+// BOM 이력 변경 유형 색상
+const CHANGE_TYPE_STYLE: Record<string, string> = {
+  "등록": "bg-primary/10 text-primary ring-primary/20",
+  "수정": "bg-amber-50 text-amber-600 ring-amber-200",
+  "추가": "bg-emerald-50 text-emerald-600 ring-emerald-200",
+  "삭제": "bg-destructive/10 text-destructive ring-red-200",
+  "버전변경": "bg-blue-50 text-blue-600 ring-blue-200",
+  "excel_upload": "bg-blue-50 text-blue-600 ring-blue-200",
+};
+const CHANGE_TYPE_OPTIONS = ["등록", "수정", "추가", "삭제", "버전변경", "기타"];
+
+function getItemTypeBadge(type?: string) {
+  switch (type) {
+    case "원자재":
+    case "raw":
+      return { label: "원자재", className: "bg-success/10 text-success border-success/20" };
+    case "반제품":
+    case "semi":
+      return { label: "반제품", className: "bg-warning/10 text-warning border-warning/20" };
+    case "완제품":
+    case "finished":
+      return { label: "완제품", className: "bg-primary/10 text-primary border-primary/20" };
+    default:
+      return { label: type || "-", className: "bg-muted text-muted-foreground" };
+  }
+}
+
+// ─── 메인 컴포넌트 ──────────────────────────────
+export default function BomManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-bom", BOM_TABLE, BOM_COLUMNS);
+
+  // BOM 목록 상태
+  const [bomList, setBomList] = useState<BomRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [selectedBomId, setSelectedBomId] = useState<string | null>(null);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+
+  // 상세 데이터
+  const [bomHeader, setBomHeader] = useState<BomRow | null>(null);
+  const [bomDetails, setBomDetails] = useState<BomDetail[]>([]);
+  const [treeNodes, setTreeNodes] = useState<TreeNode[]>([]);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  // 트리 토글
+  const [treeDirection, setTreeDirection] = useState<"forward" | "reverse">("forward");
+  const [treeBasis, setTreeBasis] = useState<"material" | "process">("material");
+
+  // 버전 관리
+  const [versions, setVersions] = useState<BomVersion[]>([]);
+  const [currentVersionId, setCurrentVersionId] = useState<string | null>(null);
+  const [versionLoading, setVersionLoading] = useState(false);
+  const [newVersionName, setNewVersionName] = useState("");
+  const [showNewVersionDialog, setShowNewVersionDialog] = useState(false);
+
+  // 이력 관리
+  const [historyList, setHistoryList] = useState<BomHistoryEntry[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [showHistoryDialog, setShowHistoryDialog] = useState(false);
+  const [newHistory, setNewHistory] = useState({ change_type: "", change_description: "" });
+
+  // 등록 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [masterForm, setMasterForm] = useState<Record<string, any>>({
+    item_id: "",
+    item_code: "",
+    item_name: "",
+    bom_type: "",
+    base_qty: "1",
+    unit: "",
+    version: "1.0",
+    status: "draft",
+    effective_date: "",
+    expiry_date: "",
+    remark: "",
+  });
+  const [modalDetailRows, setModalDetailRows] = useState<any[]>([]);
+
+  // 품목 검색 모달
+  const [showItemSearchModal, setShowItemSearchModal] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSearchTarget, setItemSearchTarget] = useState<"master" | "detail">("master");
+
+  // 엑셀 업로드
+  const [showExcelUpload, setShowExcelUpload] = useState(false);
+  const [excelFile, setExcelFile] = useState<File | null>(null);
+  const [excelUploading, setExcelUploading] = useState(false);
+
+  // 우측 탭
+  const [rightTab, setRightTab] = useState<"tree" | "version" | "history">("tree");
+
+  // 카테고리 옵션
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 트리 편집 state
+  const [editingTree, setEditingTree] = useState<TreeNode[]>([]);
+  const [treeHasChanges, setTreeHasChanges] = useState(false);
+
+  // 공정 마스터 목록
+  const [processOptions, setProcessOptions] = useState<{ code: string; label: string }[]>([]);
+  useEffect(() => {
+    apiClient.get("/process-info/processes?useYn=Y").then((res) => {
+      const list = res.data?.data || [];
+      setProcessOptions(list.map((p: any) => ({ code: p.process_code, label: `${p.process_name} (${p.process_code})` })));
+    }).catch(() => {});
+  }, []);
+
+  // 트리뷰 행 선택 / 수정 모달
+  const [selectedTreeNodeId, setSelectedTreeNodeId] = useState<string | null>(null);
+  const [editingNodeId, setEditingNodeId] = useState<string | null>(null);
+  const [treeEditModalOpen, setTreeEditModalOpen] = useState(false);
+  const [treeEditTarget, setTreeEditTarget] = useState<TreeNode | null>(null);
+  const [treeEditForm, setTreeEditForm] = useState<Record<string, any>>({});
+
+  // 역전개 (Where Used)
+  const [treeViewMode, setTreeViewMode] = useState<"forward" | "reverse">("forward");
+  const [whereUsedData, setWhereUsedData] = useState<any[]>([]);
+  const [whereUsedLoading, setWhereUsedLoading] = useState(false);
+  const [originalDetailIds, setOriginalDetailIds] = useState<Set<string>>(new Set());
+  const [addTargetParentId, setAddTargetParentId] = useState<string | null>(null);
+  const [treeItemSearchOpen, setTreeItemSearchOpen] = useState(false);
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+  // ─── 데이터 로드 ──────────────────────────────
+  const fetchBomList = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+
+      const res = await apiClient.post(`/table-management/tables/${BOM_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "created_at", order: "desc" },
+      });
+
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setBomList(rows);
+      setTotalCount(rows.length);
+    } catch (err: any) {
+      toast.error("BOM 목록 조회에 실패했어요");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchBomList();
+  }, [fetchBomList]);
+
+  // 카테고리 옵션 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      try {
+        const columns = ["bom_type", "status"];
+        const detailColumns = ["process_type"];
+        const results: Record<string, { code: string; label: string }[]> = {};
+
+        for (const col of columns) {
+          try {
+            const res = await apiClient.get(`/table-categories/${BOM_TABLE}/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              const flatten = (items: any[]): { code: string; label: string }[] => {
+                const result: { code: string; label: string }[] = [];
+                for (const item of items) {
+                  result.push({ code: item.value || item.code, label: item.label || item.value });
+                  if (item.children?.length) {
+                    result.push(...flatten(item.children));
+                  }
+                }
+                return result;
+              };
+              results[col] = flatten(res.data.data);
+            }
+          } catch {}
+        }
+
+        // bom_detail 테이블의 카테고리
+        for (const col of detailColumns) {
+          try {
+            const res = await apiClient.get(`/table-categories/bom_detail/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              const flatten = (items: any[]): { code: string; label: string }[] => {
+                const result: { code: string; label: string }[] = [];
+                for (const item of items) {
+                  result.push({ code: item.value || item.code, label: item.label || item.value });
+                  if (item.children?.length) result.push(...flatten(item.children));
+                }
+                return result;
+              };
+              results[col] = flatten(res.data.data);
+            }
+          } catch {}
+        }
+
+        // item_info의 division 카테고리
+        try {
+          const res = await apiClient.get(`/table-categories/item_info/division/values`);
+          if (res.data?.data?.length > 0) {
+            const flatten = (items: any[]): { code: string; label: string }[] => {
+              const result: { code: string; label: string }[] = [];
+              for (const item of items) {
+                result.push({ code: item.valueCode || item.value || item.code, label: item.valueLabel || item.label || item.value });
+                if (item.children?.length) result.push(...flatten(item.children));
+              }
+              return result;
+            };
+            results["division"] = flatten(res.data.data);
+          }
+        } catch {}
+
+        setCategoryOptions(results);
+      } catch {}
+    };
+    loadCategories();
+  }, []);
+
+  // ─── BOM 상세 로드 ────────────────────────────
+  const fetchBomDetail = useCallback(async (bomId: string) => {
+    setDetailLoading(true);
+    try {
+      // 헤더 조회
+      const headerRes = await apiClient.get(`/bom/${bomId}/header`);
+      const header = headerRes.data?.data || headerRes.data;
+      setBomHeader(header);
+      setCurrentVersionId(header?.current_version_id || null);
+
+      // 디테일 조회 (현재 버전)
+      const versionId = header?.current_version_id;
+      const detailFilters: any[] = [{ columnName: "bom_id", operator: "equals", value: bomId }];
+      if (versionId) {
+        detailFilters.push({ columnName: "version_id", operator: "equals", value: versionId });
+      }
+
+      const detailRes = await apiClient.post(`/table-management/tables/${BOM_DETAIL_TABLE}/data`, {
+        page: 1,
+        size: 1000,
+        dataFilter: { enabled: true, filters: detailFilters },
+        sort: { columnName: "parent_detail_id", order: "asc" },
+      });
+
+      let details = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+
+      // item_info 조인을 위해 child_item_id 수집
+      const itemIds = [...new Set(details.map((d: any) => d.child_item_id).filter(Boolean))];
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1,
+            size: 1000,
+            dataFilter: {
+              enabled: true,
+              filters: [{ columnName: "id", operator: "in", value: itemIds }],
+            },
+          });
+          const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+          const itemMap = new Map(items.map((i: any) => [i.id, i]));
+
+          details = details.map((d: any) => {
+            const item = itemMap.get(d.child_item_id) as any;
+            const divisionRaw = item?.division || "";
+            // 카테고리 코드 → 라벨 변환 (쉼표 구분 다중값 지원)
+            const divisionLabel = divisionRaw.split(",").map((code: string) => {
+              const c = code.trim();
+              return categoryOptions["division"]?.find((o) => o.code === c)?.label || c;
+            }).filter((v: string) => v && v !== "s").join(", ");
+            return {
+              ...d,
+              item_number: item?.item_number || "",
+              item_name: item?.item_name || "",
+              item_type: divisionLabel,
+              unit: d.unit || item?.unit || "",
+              spec: item?.size || item?.spec || "",
+              writer: d.writer || "",
+              updated_date: d.updated_at || d.updated_date || "",
+            };
+          });
+        } catch {}
+      }
+
+      setBomDetails(details);
+      const tree = buildTree(details);
+      setTreeNodes(tree);
+
+      // 편집용 트리 동기화
+      setEditingTree(buildTree(details));
+      setOriginalDetailIds(new Set(details.map((d: any) => d.id)));
+      setTreeHasChanges(false);
+      // 기본 전개: 모든 노드 + 가상 루트 펼침
+      const allIds = new Set<string>();
+      if (header?.id) allIds.add(`__root_${header.id}`);
+      const collectIds = (nodes: TreeNode[]) => {
+        for (const n of nodes) {
+          allIds.add(n.id || "");
+          if (n.children.length > 0) collectIds(n.children);
+        }
+      };
+      collectIds(tree);
+      setExpandedNodes(allIds);
+    } catch (err: any) {
+      toast.error("BOM 상세 조회에 실패했어요");
+    } finally {
+      setDetailLoading(false);
+    }
+  }, [categoryOptions]);
+
+  // 버전 목록 로드
+  const fetchVersions = useCallback(async (bomId: string) => {
+    setVersionLoading(true);
+    try {
+      const res = await apiClient.get(`/bom/${bomId}/versions`);
+      const resData = res.data;
+      setVersions(resData?.data || []);
+      setCurrentVersionId(resData?.currentVersionId || null);
+    } catch (err: any) {
+      toast.error("버전 목록 조회에 실패했어요");
+    } finally {
+      setVersionLoading(false);
+    }
+  }, []);
+
+  // 이력 목록 로드
+  const fetchHistory = useCallback(async (bomId: string) => {
+    setHistoryLoading(true);
+    try {
+      const res = await apiClient.get(`/bom/${bomId}/history`);
+      setHistoryList(res.data?.data || []);
+    } catch (err: any) {
+      toast.error("이력 조회에 실패했어요");
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, []);
+
+  // BOM 선택 시 상세 로드
+  useEffect(() => {
+    if (selectedBomId) {
+      fetchBomDetail(selectedBomId);
+      if (rightTab === "version") fetchVersions(selectedBomId);
+      if (rightTab === "history") fetchHistory(selectedBomId);
+    } else {
+      setBomHeader(null);
+      setBomDetails([]);
+      setTreeNodes([]);
+      setEditingTree([]);
+      setTreeHasChanges(false);
+      setOriginalDetailIds(new Set());
+      setExpandedNodes(new Set());
+      setVersions([]);
+      setHistoryList([]);
+    }
+  }, [selectedBomId, fetchBomDetail, fetchVersions, fetchHistory, rightTab]);
+
+  // ─── 트리 토글 핸들러 ─────────────────────────
+  const toggleTreeNode = useCallback((nodeId: string) => {
+    const toggle = (nodes: TreeNode[]): TreeNode[] =>
+      nodes.map((n) =>
+        n.id === nodeId
+          ? { ...n, expanded: !n.expanded }
+          : { ...n, children: toggle(n.children) }
+      );
+    setTreeNodes((prev) => toggle(prev));
+  }, []);
+
+  const flatTree = useMemo(() => flattenTree(treeNodes), [treeNodes]);
+
+  // ─── 트리 편집 헬퍼 ──────────────────────────
+
+  // 트리 노드 토글 (펼침/접음)
+  const toggleEditTreeNode = useCallback((nodeId: string) => {
+    setExpandedNodes((prev) => {
+      const next = new Set(prev);
+      if (next.has(nodeId)) next.delete(nodeId);
+      else next.add(nodeId);
+      return next;
+    });
+  }, []);
+
+  // 전체 펼침
+  const expandAll = useCallback(() => {
+    const allIds = new Set<string>();
+    if (bomHeader?.id) allIds.add(`__root_${bomHeader.id}`);
+    const collect = (nodes: TreeNode[]) => {
+      for (const n of nodes) {
+        allIds.add(n.id || n._tempId || "");
+        if (n.children.length > 0) collect(n.children);
+      }
+    };
+    collect(editingTree);
+    setExpandedNodes(allIds);
+  }, [editingTree, bomHeader]);
+
+  // 역전개 (Where Used) 조회 — 현재 BOM 품목이 어디에 사용되는지
+  const fetchWhereUsed = useCallback(async () => {
+    if (!bomHeader?.item_code && !bomHeader?.item_id) return;
+    setWhereUsedLoading(true);
+    try {
+      // bom_detail에서 child_item_id가 현재 품목인 행 조회
+      const itemId = bomHeader.item_id || bomHeader.id;
+      const res = await apiClient.post(`/table-management/tables/bom_detail/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "child_item_id", operator: "equals", value: itemId }] },
+        autoFilter: true,
+      });
+      const details = res.data?.data?.data || res.data?.data?.rows || [];
+
+      // 각 bom_id로 BOM 마스터 정보 조회
+      const bomIds = [...new Set(details.map((d: any) => d.bom_id).filter(Boolean))];
+      const results: any[] = [];
+      for (const bomId of bomIds) {
+        try {
+          const bomRes = await apiClient.post(`/table-management/tables/bom/data`, {
+            page: 1, size: 1,
+            dataFilter: { enabled: true, filters: [{ columnName: "id", operator: "equals", value: bomId }] },
+            autoFilter: true,
+          });
+          const bom = (bomRes.data?.data?.data || bomRes.data?.data?.rows || [])[0];
+          if (bom) {
+            const detail = details.find((d: any) => d.bom_id === bomId);
+            results.push({
+              bom_id: bomId,
+              item_code: bom.item_code || bom.item_number || "",
+              item_name: bom.item_name || "",
+              quantity: detail?.quantity || "1",
+              unit: detail?.unit || "",
+              process_type: detail?.process_type || "",
+            });
+          }
+        } catch {}
+      }
+      setWhereUsedData(results);
+    } catch {
+      setWhereUsedData([]);
+    } finally {
+      setWhereUsedLoading(false);
+    }
+  }, [bomHeader]);
+
+  // 전체 접음
+  const collapseAll = useCallback(() => {
+    // 루트는 항상 펼침 유지, 나머지만 접음
+    const rootOnly = new Set<string>();
+    if (bomHeader?.id) rootOnly.add(`__root_${bomHeader.id}`);
+    setExpandedNodes(rootOnly);
+  }, [bomHeader]);
+
+  // 편집 트리 평탄화 (useMemo) — 가상 루트(BOM 마스터) 포함
+  const editingFlatTree = useMemo(() => {
+    const result: TreeNode[] = [];
+    // 가상 루트 (BOM 마스터)
+    if (bomHeader) {
+      const rootId = `__root_${bomHeader.id}`;
+      result.push({
+        id: rootId,
+        bom_id: bomHeader.id,
+        _tempId: undefined,
+        _isNew: false,
+        _isModified: false,
+        _level: 0,
+        _isVirtualRoot: true,
+        item_number: bomHeader.item_code || bomHeader.item_number || "",
+        item_name: bomHeader.item_name || "",
+        quantity: bomHeader.base_qty || "1",
+        unit: bomHeader.unit || "",
+        process_type: "",
+        loss_rate: "",
+        remark: bomHeader.remark || "",
+        spec: "",
+        writer: "",
+        updated_date: "",
+        item_type: "",
+        children: editingTree,
+      } as any);
+    }
+    // 하위 노드 평탄화 (레벨 +1)
+    const flatten = (nodes: TreeNode[], level: number) => {
+      for (const node of nodes) {
+        const nodeKey = node.id || node._tempId || "";
+        result.push({ ...node, _level: level });
+        if (node.children.length > 0 && expandedNodes.has(nodeKey)) {
+          flatten(node.children, level + 1);
+        }
+      }
+    };
+    const rootId = bomHeader ? `__root_${bomHeader.id}` : "";
+    if (!bomHeader || expandedNodes.has(rootId)) {
+      flatten(editingTree, bomHeader ? 1 : 0);
+    }
+    return result;
+  }, [editingTree, expandedNodes, bomHeader]);
+
+  // 트리에서 노드를 찾아서 업데이트
+  const updateTreeNode = (tree: TreeNode[], nodeId: string, updater: (node: TreeNode) => TreeNode): TreeNode[] => {
+    return tree.map(node => {
+      if ((node.id || node._tempId) === nodeId) return updater(node);
+      if (node.children.length > 0) return { ...node, children: updateTreeNode(node.children, nodeId, updater) };
+      return node;
+    });
+  };
+
+  // 트리에서 노드 삭제 (하위 포함)
+  const removeTreeNode = (tree: TreeNode[], nodeId: string): TreeNode[] => {
+    return tree.filter(node => {
+      if ((node.id || node._tempId) === nodeId) return false;
+      if (node.children.length > 0) node.children = removeTreeNode(node.children, nodeId);
+      return true;
+    });
+  };
+
+  // 트리에 자식 노드 추가
+  const addChildToNode = (tree: TreeNode[], parentId: string | null, newNode: TreeNode): TreeNode[] => {
+    if (parentId === null) return [...tree, newNode];
+    return tree.map(node => {
+      const nodeKey = node.id || node._tempId;
+      if (nodeKey === parentId) {
+        return { ...node, children: [...node.children, newNode], expanded: true };
+      }
+      if (node.children.length > 0) return { ...node, children: addChildToNode(node.children, parentId, newNode) };
+      return node;
+    });
+  };
+
+  // 노드 찾기 헬퍼
+  const findNodeById = (nodes: TreeNode[], id: string): TreeNode | null => {
+    for (const node of nodes) {
+      if ((node.id || node._tempId) === id) return node;
+      const found = findNodeById(node.children, id);
+      if (found) return found;
+    }
+    return null;
+  };
+
+  // 인라인 필드 변경
+  const handleTreeFieldChange = (nodeId: string, field: string, value: string) => {
+    setEditingTree(prev => updateTreeNode(prev, nodeId, node => ({
+      ...node, [field]: value, _isModified: !node._isNew ? true : node._isModified,
+    })));
+    setTreeHasChanges(true);
+  };
+
+  // 노드 삭제
+  const handleTreeDeleteNode = async (nodeId: string) => {
+    if (!await confirm("이 품목과 하위 품목을 삭제할까요?", { variant: "destructive" })) return;
+    setEditingTree(prev => removeTreeNode(prev, nodeId));
+    setTreeHasChanges(true);
+  };
+
+  // 하위 품목 추가 시작
+  const handleTreeAddChild = (parentId: string | null) => {
+    setAddTargetParentId(parentId);
+    setTreeItemSearchOpen(true);
+    searchItems("");
+  };
+
+  // 트리 품목 선택 완료 (트리에 추가)
+  const handleTreeItemSelect = (item: any) => {
+    // 1. 자기 자신 추가 방지 (BOM 마스터 품목과 동일한 품목)
+    if (bomHeader && (item.id === bomHeader.item_id || item.item_number === bomHeader.item_code)) {
+      toast.error("자기 자신을 BOM에 추가할 수 없습니다");
+      return;
+    }
+
+    // 2. 같은 경로에 동일 품목 중복 방지 (조상 노드에 같은 품목이 있으면 순환)
+    const getAncestorItemIds = (tree: TreeNode[], targetId: string | null): Set<string> => {
+      const ids = new Set<string>();
+      if (!targetId) return ids;
+      const collectPath = (nodes: TreeNode[], path: TreeNode[]): boolean => {
+        for (const n of nodes) {
+          const nk = n.id || n._tempId || "";
+          if (nk === targetId) {
+            path.forEach(p => { if (p.child_item_id) ids.add(p.child_item_id); });
+            if (n.child_item_id) ids.add(n.child_item_id);
+            return true;
+          }
+          if (n.children.length > 0 && collectPath(n.children, [...path, n])) return true;
+        }
+        return false;
+      };
+      collectPath(tree, []);
+      return ids;
+    };
+    const ancestorIds = getAncestorItemIds(editingTree, addTargetParentId);
+    if (ancestorIds.has(item.id)) {
+      toast.error("상위 경로에 이미 동일 품목이 있어 순환 참조가 발생합니다");
+      return;
+    }
+
+    const tempId = `temp_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+    const parentNode = addTargetParentId ? findNodeById(editingTree, addTargetParentId) : null;
+    const newLevel = parentNode ? ((parentNode._level ?? parentNode.level ?? 0) as number) + 1 : 0;
+
+    const newNode: TreeNode = {
+      id: "",
+      _tempId: tempId,
+      _isNew: true,
+      bom_id: selectedBomId || "",
+      parent_detail_id: addTargetParentId,
+      child_item_id: item.id,
+      item_number: item.item_number || "",
+      item_name: item.item_name || "",
+      item_type: item.division || "",
+      level: String(newLevel),
+      quantity: "1",
+      unit: item.unit || "",
+      process_type: "",
+      loss_rate: "0",
+      remark: "",
+      children: [],
+      expanded: true,
+    };
+
+    setEditingTree(prev => addChildToNode(prev, addTargetParentId, newNode));
+    setExpandedNodes(prev => {
+      const next = new Set(prev);
+      next.add(tempId);
+      if (addTargetParentId) next.add(addTargetParentId);
+      return next;
+    });
+    setTreeHasChanges(true);
+    setTreeItemSearchOpen(false);
+  };
+
+  // ─── 트리 저장 ────────────────────────────────
+  const handleSaveTree = async () => {
+    if (!selectedBomId || !treeHasChanges) return;
+
+    setSaving(true);
+    try {
+      // 1. version_id 확보
+      let versionId = currentVersionId;
+      if (!versionId) {
+        const initRes = await apiClient.post(`/bom/${selectedBomId}/initialize-version`, {});
+        versionId = initRes.data?.data?.versionId;
+      }
+
+      // 2. 트리 평탄화
+      const flatNodes: any[] = [];
+      const flattenForSave = (nodes: TreeNode[], parentId: string | null, level: number) => {
+        nodes.forEach((node, idx) => {
+          const nodeKey = node.id || node._tempId || "";
+          flatNodes.push({
+            ...node,
+            _nodeKey: nodeKey,
+            parent_detail_id: parentId,
+            level: String(level),
+            seq_no: String(idx + 1),
+            bom_id: selectedBomId,
+            version_id: versionId,
+          });
+          if (node.children.length > 0) flattenForSave(node.children, nodeKey, level + 1);
+        });
+      };
+      flattenForSave(editingTree, null, 0);
+
+      // 3. 분류: INSERT / UPDATE / DELETE
+      const currentIds = new Set(flatNodes.filter(n => n.id && !n._isNew).map(n => n.id));
+      const toDelete = [...originalDetailIds].filter(id => !currentIds.has(id));
+      const toInsert = flatNodes.filter(n => n._isNew);
+      const toUpdate = flatNodes.filter(n => n.id && !n._isNew && n._isModified);
+
+      // 4. DELETE
+      if (toDelete.length > 0) {
+        await apiClient.delete(`/table-management/tables/bom_detail/delete`, {
+          data: toDelete.map(id => ({ id })),
+        });
+      }
+
+      // 5. INSERT (순서 중요: 부모 먼저)
+      const tempToRealId: Record<string, string> = {};
+      for (const node of toInsert) {
+        let parentId = node.parent_detail_id;
+        if (parentId && tempToRealId[parentId]) parentId = tempToRealId[parentId];
+
+        const newId = crypto.randomUUID();
+        const res = await apiClient.post(`/table-management/tables/bom_detail/add`, {
+          id: newId,
+          bom_id: selectedBomId,
+          version_id: versionId,
+          parent_detail_id: parentId && !parentId.startsWith("temp_") ? parentId : null,
+          child_item_id: node.child_item_id,
+          level: node.level,
+          seq_no: node.seq_no,
+          quantity: node.quantity || "1",
+          unit: node.unit || "",
+          process_type: node.process_type || "",
+          loss_rate: node.loss_rate || "0",
+          remark: node.remark || "",
+          writer: user?.userId || "",
+          company_code: user?.company_code || "",
+        });
+
+        const realId = res.data?.data?.id || newId;
+        if (node._tempId) tempToRealId[node._tempId] = realId;
+      }
+
+      // 6. INSERT된 노드의 자식들 parent_detail_id 업데이트
+      for (const node of toInsert) {
+        if (!node._tempId) continue;
+        const childNodes = flatNodes.filter(n => n.parent_detail_id === node._tempId);
+        for (const child of childNodes) {
+          if (child.id && !child._isNew && tempToRealId[node._tempId]) {
+            await apiClient.put(`/table-management/tables/bom_detail/edit`, {
+              originalData: { id: child.id },
+              updatedData: { parent_detail_id: tempToRealId[node._tempId] },
+            });
+          }
+        }
+      }
+
+      // 7. UPDATE
+      for (const node of toUpdate) {
+        let parentId = node.parent_detail_id;
+        if (parentId && tempToRealId[parentId]) parentId = tempToRealId[parentId];
+
+        await apiClient.put(`/table-management/tables/bom_detail/edit`, {
+          originalData: { id: node.id },
+          updatedData: {
+            bom_id: selectedBomId,
+            version_id: versionId,
+            quantity: node.quantity,
+            unit: node.unit,
+            process_type: node.process_type,
+            loss_rate: node.loss_rate,
+            remark: node.remark,
+            level: node.level,
+            seq_no: node.seq_no,
+            parent_detail_id: parentId,
+          },
+        });
+      }
+
+      // 이력 자동 기록 (변경 내용 상세)
+      const historyParts: string[] = [];
+      // 추가된 품목
+      for (const n of toInsert) {
+        historyParts.push(`${n.item_number || "품목"} 추가 (소요량: ${n.quantity || 1})`);
+      }
+      // 수정된 품목 (변경 전후 비교)
+      for (const n of toUpdate) {
+        const orig = bomDetails.find((d: any) => d.id === n.id);
+        if (orig) {
+          const changes: string[] = [];
+          if (String(orig.quantity || "") !== String(n.quantity || "")) changes.push(`소요량 ${orig.quantity || "-"} → ${n.quantity || "-"}`);
+          if (String(orig.process_type || "") !== String(n.process_type || "")) changes.push(`공정 변경`);
+          if (String(orig.loss_rate || "") !== String(n.loss_rate || "")) changes.push(`손실율 ${orig.loss_rate || "0"} → ${n.loss_rate || "0"}`);
+          if (String(orig.remark || "") !== String(n.remark || "")) changes.push(`비고 변경`);
+          if (changes.length > 0) historyParts.push(`${n.item_number || "품목"}: ${changes.join(", ")}`);
+        }
+      }
+      // 삭제된 품목
+      for (const id of toDelete) {
+        const orig = bomDetails.find((d: any) => d.id === id);
+        historyParts.push(`${orig?.item_number || "품목"} 삭제`);
+      }
+      if (historyParts.length > 0) {
+        apiClient.post(`/bom/${selectedBomId}/history`, {
+          change_type: historyParts.some(p => p.includes("추가")) ? "추가" : historyParts.some(p => p.includes("삭제")) ? "삭제" : "수정",
+          change_description: historyParts.join("; "),
+        }).catch(() => {});
+      }
+
+      toast.success("BOM 트리가 저장되었어요");
+      setTreeHasChanges(false);
+      fetchBomDetail(selectedBomId);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "트리 저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ─── BOM 삭제 ────────────────────────────────
+  const handleDeleteBom = async () => {
+    if (checkedIds.length === 0) {
+      toast.error("삭제할 BOM을 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`선택한 ${checkedIds.length}건의 BOM을 삭제할까요?`);
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${BOM_TABLE}/delete`, {
+        data: checkedIds.map((id) => ({ id })),
+      });
+      toast.success("BOM이 삭제되었어요");
+      setCheckedIds([]);
+      setSelectedBomId(null);
+      fetchBomList();
+    } catch {
+      toast.error("BOM 삭제에 실패했어요");
+    }
+  };
+
+  // ─── BOM 등록/수정 ───────────────────────────
+  const openCreateModal = () => {
+    setIsEditMode(false);
+    setMasterForm({
+      item_id: "",
+      item_code: "",
+      item_name: "",
+      bom_type: "",
+      base_qty: "1",
+      unit: "",
+      version: "1.0",
+      status: "draft",
+      effective_date: "",
+      expiry_date: "",
+      remark: "",
+    });
+    setModalDetailRows([]);
+    setIsModalOpen(true);
+  };
+
+  const openEditModal = () => {
+    if (!bomHeader) return;
+    setIsEditMode(true);
+    setMasterForm({
+      id: bomHeader.id,
+      item_id: bomHeader.item_id || "",
+      item_code: bomHeader.item_code || bomHeader.item_number || "",
+      item_name: bomHeader.item_name || "",
+      bom_type: bomHeader.bom_type || "",
+      base_qty: bomHeader.base_qty || "1",
+      unit: bomHeader.unit || "",
+      version: bomHeader.version || "1.0",
+      status: bomHeader.status || "draft",
+      effective_date: bomHeader.effective_date || "",
+      expiry_date: bomHeader.expiry_date || "",
+      remark: bomHeader.remark || "",
+    });
+
+    setModalDetailRows(
+      bomDetails.map((d, i) => ({
+        _idx: i,
+        child_item_id: d.child_item_id || "",
+        item_number: d.item_number || "",
+        item_name: d.item_name || "",
+        quantity: d.quantity || "1",
+        unit: d.unit || "",
+        process_type: d.process_type || "",
+        loss_rate: d.loss_rate || "0",
+        remark: d.remark || "",
+      }))
+    );
+    setIsModalOpen(true);
+  };
+
+  const handleSaveBom = async () => {
+    if (!masterForm.item_id) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+    if (!masterForm.bom_type) {
+      toast.error("BOM 유형을 선택해주세요");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const bomFields: Record<string, any> = {
+        item_id: masterForm.item_id,
+        item_code: masterForm.item_code,
+        item_name: masterForm.item_name,
+        bom_type: masterForm.bom_type,
+        base_qty: masterForm.base_qty || "1",
+        unit: masterForm.unit || "",
+        version: masterForm.version || "1.0",
+        status: masterForm.status || "draft",
+        effective_date: masterForm.effective_date || null,
+        expiry_date: masterForm.expiry_date || null,
+        remark: masterForm.remark || "",
+        writer: user?.userId || "",
+        company_code: user?.company_code || "",
+      };
+
+      let bomId: string;
+
+      if (isEditMode && masterForm.id) {
+        await apiClient.put(`/table-management/tables/${BOM_TABLE}/edit`, {
+          originalData: { id: masterForm.id },
+          updatedData: bomFields,
+        });
+        bomId = masterForm.id;
+      } else {
+        const res = await apiClient.post(`/table-management/tables/${BOM_TABLE}/add`, { id: crypto.randomUUID(), ...bomFields });
+        bomId = res.data?.data?.id || res.data?.id;
+      }
+
+      // 초기 버전 생성 (신규 BOM)
+      if (!isEditMode && bomId) {
+        try {
+          await apiClient.post(`/bom/${bomId}/initialize-version`, {});
+        } catch {}
+      }
+
+      // 디테일 저장: 기존 삭제 후 재등록
+      if (isEditMode && masterForm.id) {
+        const existingDetails = bomDetails.filter((d) => d.bom_id === bomId);
+        if (existingDetails.length > 0) {
+          await apiClient.delete(`/table-management/tables/${BOM_DETAIL_TABLE}/delete`, {
+            data: existingDetails.map((d) => ({ id: d.id })),
+          });
+        }
+      }
+
+      // 현재 버전 ID 가져오기
+      let versionId = currentVersionId;
+      if (!versionId && bomId) {
+        try {
+          const verRes = await apiClient.get(`/bom/${bomId}/versions`);
+          const verData = verRes.data?.data || verRes.data;
+          versionId = verData?.currentVersionId || null;
+        } catch {}
+      }
+
+      for (let i = 0; i < modalDetailRows.length; i++) {
+        const row = modalDetailRows[i];
+        if (!row.child_item_id) continue;
+        await apiClient.post(`/table-management/tables/${BOM_DETAIL_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          bom_id: bomId,
+          version_id: versionId || null,
+          parent_detail_id: null,
+          child_item_id: row.child_item_id,
+          quantity: row.quantity || "1",
+          unit: row.unit || "",
+          process_type: row.process_type || "",
+          loss_rate: row.loss_rate || "0",
+          remark: row.remark || "",
+          level: "0",
+          seq_no: String(i + 1),
+          writer: user?.userId || "",
+          company_code: user?.company_code || "",
+        });
+      }
+
+      toast.success(isEditMode ? "BOM이 수정되었어요" : "BOM이 등록되었어요");
+      setIsModalOpen(false);
+      fetchBomList();
+      if (bomId) {
+        setSelectedBomId(bomId);
+        fetchBomDetail(bomId);
+        fetchVersions(bomId);
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "BOM 저장에 실패했어요");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ─── 품목 검색 ───────────────────────────────
+  const searchItems = async (keyword?: string) => {
+    const kw = (keyword ?? itemSearchKeyword).trim();
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (kw) {
+        filters.push({ columnName: "item_name", operator: "contains", value: kw });
+      }
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1,
+        size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      let rows = res.data?.data?.data || res.data?.data?.rows || [];
+
+      // 키워드가 있고 품명으로 못 찾으면 품목코드로 재시도
+      if (kw && rows.length === 0) {
+        const res2 = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 50,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "contains", value: kw }] },
+          autoFilter: true,
+        });
+        rows = res2.data?.data?.data || res2.data?.data?.rows || [];
+      }
+      setItemSearchResults(rows);
+    } catch {
+      toast.error("품목 검색에 실패했어요");
+    } finally {
+      setItemSearchLoading(false);
+    }
+  };
+
+  const selectItem = (item: any) => {
+    if (itemSearchTarget === "master") {
+      setMasterForm((prev) => ({
+        ...prev,
+        item_id: item.id,
+        item_code: item.item_number || "",
+        item_name: item.item_name || "",
+        unit: item.unit || prev.unit,
+      }));
+      setShowItemSearchModal(false);
+    } else {
+      setModalDetailRows((prev) => [
+        ...prev,
+        {
+          _idx: prev.length,
+          child_item_id: item.id,
+          item_number: item.item_number || "",
+          item_name: item.item_name || "",
+          quantity: "1",
+          unit: item.unit || "",
+          process_type: "",
+          loss_rate: "0",
+          remark: "",
+        },
+      ]);
+      setShowItemSearchModal(false);
+    }
+    setItemSearchKeyword("");
+    setItemSearchResults([]);
+  };
+
+  // ─── 버전 관리 ───────────────────────────────
+  const handleCreateVersion = async () => {
+    if (!selectedBomId) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions`, {
+        versionName: newVersionName.trim() || undefined,
+      });
+      apiClient.post(`/bom/${selectedBomId}/history`, { change_type: "버전변경", change_description: `새 버전 생성: ${newVersionName.trim() || "자동"}` }).catch(() => {});
+      toast.success("새 버전이 생성되었어요");
+      setShowNewVersionDialog(false);
+      setNewVersionName("");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 생성에 실패했어요");
+    }
+  };
+
+  const handleLoadVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions/${versionId}/load`);
+      toast.success("버전을 불러왔어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 불러오기에 실패했어요");
+    }
+  };
+
+  const handleActivateVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    const ok = await confirm("이 버전을 사용 확정할까요? 기존 활성 버전은 비활성 처리돼요.");
+    if (!ok) return;
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/versions/${versionId}/activate`);
+      apiClient.post(`/bom/${selectedBomId}/history`, { change_type: "버전변경", change_description: `버전 사용 확정` }).catch(() => {});
+      toast.success("버전이 사용 확정되었어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+      fetchBomList();
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 확정에 실패했어요");
+    }
+  };
+
+  const handleDeleteVersion = async (versionId: string) => {
+    if (!selectedBomId) return;
+    const ok = await confirm("이 버전을 삭제할까요? 관련 디테일 데이터도 함께 삭제돼요.");
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/bom/${selectedBomId}/versions/${versionId}`);
+      toast.success("버전이 삭제되었어요");
+      fetchVersions(selectedBomId);
+      fetchBomDetail(selectedBomId);
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "버전 삭제에 실패했어요");
+    }
+  };
+
+  // ─── 이력 관리 ───────────────────────────────
+  const handleAddHistory = async () => {
+    if (!selectedBomId) return;
+    if (!newHistory.change_type) {
+      toast.error("변경 유형을 입력해주세요");
+      return;
+    }
+    try {
+      await apiClient.post(`/bom/${selectedBomId}/history`, {
+        change_type: newHistory.change_type,
+        change_description: newHistory.change_description,
+        changed_by: user?.userId || "",
+      });
+      toast.success("이력이 추가되었어요");
+      setShowHistoryDialog(false);
+      setNewHistory({ change_type: "", change_description: "" });
+      fetchHistory(selectedBomId);
+    } catch (err: any) {
+      toast.error("이력 추가에 실패했어요");
+    }
+  };
+
+  // ─── 엑셀 업로드 ────────────────────────────
+  const handleExcelUpload = async () => {
+    if (!excelFile) {
+      toast.error("엑셀 파일을 선택해주세요");
+      return;
+    }
+    setExcelUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", excelFile);
+
+      const endpoint = selectedBomId
+        ? `/bom/${selectedBomId}/excel-upload-version`
+        : `/bom/excel-upload`;
+
+      const res = await apiClient.post(endpoint, formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+
+      const result = res.data?.data || res.data;
+      if (result?.success) {
+        toast.success(`엑셀 업로드 완료 (${result.insertedCount}건 등록)`);
+        setShowExcelUpload(false);
+        setExcelFile(null);
+        fetchBomList();
+        if (result.createdBomId) {
+          setSelectedBomId(result.createdBomId);
+        }
+      } else {
+        toast.error(result?.errors?.join("\n") || "엑셀 업로드에 실패했어요");
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "엑셀 업로드에 실패했어요");
+    } finally {
+      setExcelUploading(false);
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (!selectedBomId) {
+      toast.error("BOM을 선택해주세요");
+      return;
+    }
+    try {
+      const res = await apiClient.get(`/bom/${selectedBomId}/excel-download`);
+      const data = res.data?.data || [];
+      if (data.length === 0) {
+        toast.error("다운로드할 데이터가 없어요");
+        return;
+      }
+      exportToExcel(data, `BOM_${bomHeader?.item_code || selectedBomId}`);
+      toast.success("엑셀 다운로드를 시작했어요");
+    } catch {
+      toast.error("엑셀 다운로드에 실패했어요");
+    }
+  };
+
+  // ─── 상태 뱃지 렌더 ───────────────────────────
+  const renderStatusBadge = (status?: string) => {
+    const info = STATUS_MAP[status || ""] || { label: status || "-", className: "bg-muted text-muted-foreground" };
+    return (
+      <span className={cn("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium", info.className)}>
+        <span className="w-1.5 h-1.5 rounded-full bg-current" />
+        {info.label}
+      </span>
+    );
+  };
+
+  // ─── 렌더링 ──────────────────────────────────
+  return (
+    <div className="flex flex-col h-full">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 px-5 py-3 text-xs text-muted-foreground bg-muted/50 border-b shrink-0">
+        <span>생산관리</span>
+        <ChevronRight className="w-3.5 h-3.5 text-muted-foreground/50" />
+        <span className="font-semibold text-foreground">BOM 관리</span>
+      </nav>
+
+      {/* 검색 필터 */}
+      <div className="px-4 py-2.5 border-b bg-muted/50 shrink-0">
+        <DynamicSearchFilter
+          tableName={BOM_TABLE}
+          filterId="c16-bom"
+          onFilterChange={setSearchFilters}
+          externalFilterConfig={ts.filterConfig}
+          dataCount={totalCount}
+          extraActions={
+            <div className="flex items-center gap-2">
+              <Button size="sm" variant="outline" className="h-8 text-xs" onClick={() => setShowExcelUpload(true)}>
+                <Upload className="w-3.5 h-3.5 mr-1.5" />
+                엑셀 업로드
+              </Button>
+              <Button size="sm" variant="outline" className="h-8 text-xs" onClick={handleExcelDownload} disabled={!selectedBomId}>
+                <Download className="w-3.5 h-3.5 mr-1.5" />
+                엑셀 다운로드
+              </Button>
+            </div>
+          }
+        />
+      </div>
+
+      {/* 메인 콘텐츠: 좌우 분할 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card mx-3 mb-3">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: BOM 목록 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-[13px] font-bold text-foreground">BOM 목록</h3>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {totalCount}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button size="sm" onClick={openCreateModal}>
+                    <Plus className="w-3.5 h-3.5 mr-1" />
+                    등록
+                  </Button>
+                  <div className="w-px h-4 bg-border mx-0.5" />
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                    onClick={handleDeleteBom}
+                    disabled={checkedIds.length === 0}
+                  >
+                    <Trash2 className="w-3.5 h-3.5 mr-1" />
+                    삭제
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* BOM 목록 테이블 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+                    key: col.key,
+                    label: col.label,
+                    render: col.key === "item_code"
+                      ? (_val: any, row: any) => <span className="font-mono text-[13px]">{row.item_code || row.item_number || "-"}</span>
+                      : col.key === "bom_type"
+                      ? (_val: any, row: any) => <span className="text-[13px]">{BOM_TYPE_OPTIONS.find((o) => o.code === row.bom_type)?.label || row.bom_type || "-"}</span>
+                      : col.key === "status"
+                      ? (_val: any, row: any) => renderStatusBadge(row.status)
+                      : undefined,
+                  }))}
+                  data={ts.groupData(bomList)}
+                  loading={loading}
+                  emptyMessage="등록된 BOM이 없어요"
+                  showCheckbox
+                  checkedIds={checkedIds}
+                  onCheckedChange={setCheckedIds}
+                  selectedId={selectedBomId}
+                  onSelect={(id) => setSelectedBomId(id)}
+                  onRowClick={(row) => setSelectedBomId(row.id)}
+                  showPagination
+                  draggableColumns={false}
+                  columnOrderKey="c16-bom"
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 상세 + 트리뷰 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            {!selectedBomId ? (
+              <div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
+                <Inbox className="w-10 h-10 text-muted-foreground/40" />
+                <p className="text-sm">좌측에서 BOM을 선택해주세요</p>
+              </div>
+            ) : (
+              <div className="flex flex-col h-full">
+                {/* 상세 카드 */}
+                <div className="border-b shrink-0">
+                  <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
+                    <h3 className="text-[13px] font-bold text-foreground">BOM 상세정보</h3>
+                    <Button size="sm" variant="ghost" onClick={openEditModal}>
+                      <FileText className="w-3.5 h-3.5 mr-1" />
+                      편집
+                    </Button>
+                  </div>
+                  {detailLoading ? (
+                    <div className="flex items-center justify-center py-8">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : bomHeader ? (
+                    <div className="grid grid-cols-2 text-sm">
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">품목코드</span>
+                        <span className="font-mono text-xs">{bomHeader.item_code || bomHeader.item_number || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">품명</span>
+                        <span className="text-xs">{bomHeader.item_name || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">BOM 유형</span>
+                        <span className="text-xs">{BOM_TYPE_OPTIONS.find((o) => o.code === bomHeader.bom_type)?.label || bomHeader.bom_type || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">버전</span>
+                        <span className="text-xs">{bomHeader.version || "-"}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b border-r">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">기준수량</span>
+                        <span className="text-xs">{bomHeader.base_qty || "1"} {bomHeader.unit || ""}</span>
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 border-b">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">상태</span>
+                        {renderStatusBadge(bomHeader.status)}
+                      </div>
+                      <div className="flex flex-col gap-1 p-3 col-span-2">
+                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">메모</span>
+                        <span className="text-xs text-muted-foreground">{bomHeader.remark || "-"}</span>
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+
+                {/* 하단 탭: 트리뷰 / 버전 / 이력 */}
+                <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+                  <Tabs value={rightTab} onValueChange={(v) => {
+                    setRightTab(v as any);
+                    if (v === "version" && selectedBomId) fetchVersions(selectedBomId);
+                    if (v === "history" && selectedBomId) fetchHistory(selectedBomId);
+                  }}>
+                    <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/50 shrink-0">
+                      <TabsList className="h-8">
+                        <TabsTrigger value="tree" className="text-xs px-3 h-7">
+                          <GitBranch className="w-3.5 h-3.5 mr-1" />
+                          트리뷰
+                        </TabsTrigger>
+                        <TabsTrigger value="version" className="text-xs px-3 h-7">
+                          <Copy className="w-3.5 h-3.5 mr-1" />
+                          버전
+                        </TabsTrigger>
+                        <TabsTrigger value="history" className="text-xs px-3 h-7">
+                          <History className="w-3.5 h-3.5 mr-1" />
+                          이력
+                        </TabsTrigger>
+                      </TabsList>
+
+                    </div>
+
+                    {/* 트리뷰 탭 */}
+                    <TabsContent value="tree" className="flex-1 overflow-auto p-0 m-0">
+                      {/* 상단 액션바 */}
+                      <div className="flex items-center justify-between border-b px-3 py-2 bg-muted/30">
+                        <div className="flex items-center gap-2">
+                          <Button size="sm" variant="outline" onClick={() => handleTreeAddChild(null)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />루트 품목 추가
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => {
+                              if (selectedTreeNodeId && !selectedTreeNodeId.startsWith("__root_")) {
+                                handleTreeAddChild(selectedTreeNodeId);
+                              }
+                            }}
+                            disabled={!selectedTreeNodeId || selectedTreeNodeId.startsWith("__root_")}
+                          >
+                            <Plus className="w-3.5 h-3.5 mr-1" />하위 품목 추가
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+                            onClick={() => {
+                              if (selectedTreeNodeId && !selectedTreeNodeId.startsWith("__root_")) {
+                                handleTreeDeleteNode(selectedTreeNodeId);
+                                setSelectedTreeNodeId(null);
+                                setEditingNodeId(null);
+                              }
+                            }}
+                            disabled={!selectedTreeNodeId || selectedTreeNodeId.startsWith("__root_")}
+                          >
+                            <Trash2 className="w-3.5 h-3.5 mr-1" />선택 삭제
+                          </Button>
+                          <div className="w-px h-5 bg-border" />
+                          <div className="flex overflow-hidden rounded-md border">
+                            <button onClick={() => { setTreeViewMode("forward"); }} className={cn("h-7 px-2.5 text-[11px] font-medium transition-colors", treeViewMode === "forward" ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-muted")}>
+                              정전개
+                            </button>
+                            <button onClick={() => { setTreeViewMode("reverse"); fetchWhereUsed(); }} className={cn("h-7 border-l px-2.5 text-[11px] font-medium transition-colors", treeViewMode === "reverse" ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-muted")}>
+                              역전개
+                            </button>
+                          </div>
+                          {treeViewMode === "forward" && (
+                            <>
+                              <Button size="sm" variant="ghost" onClick={expandAll}>
+                                <ChevronsDown className="w-3.5 h-3.5 mr-1" />펼침
+                              </Button>
+                              <Button size="sm" variant="ghost" onClick={collapseAll}>
+                                <ChevronsUp className="w-3.5 h-3.5 mr-1" />접음
+                              </Button>
+                            </>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2">
+                          {treeHasChanges && <Badge variant="secondary" className="text-warning">변경됨</Badge>}
+                          <Button size="sm" onClick={handleSaveTree} disabled={!treeHasChanges || saving}>
+                            {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin mr-1" /> : <Save className="w-3.5 h-3.5 mr-1" />}
+                            저장
+                          </Button>
+                        </div>
+                      </div>
+
+                      {/* 역전개 (Where Used) 뷰 */}
+                      {treeViewMode === "reverse" ? (
+                        <div className="flex-1 overflow-auto">
+                          {whereUsedLoading ? (
+                            <div className="flex h-40 items-center justify-center">
+                              <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                            </div>
+                          ) : (
+                            <div className="p-4">
+                              <div className="flex items-center gap-2 mb-4">
+                                <Package className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-sm font-semibold">{bomHeader?.item_name || ""}</span>
+                                <span className="font-mono text-xs text-muted-foreground">({bomHeader?.item_code || ""})</span>
+                              </div>
+                              <div className="text-xs text-muted-foreground mb-3">사용처 (Where Used)</div>
+                              {whereUsedData.length === 0 ? (
+                                <div className="flex flex-col items-center justify-center h-32 text-muted-foreground gap-2">
+                                  <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                                  <p className="text-xs">이 품목을 사용하는 BOM이 없습니다</p>
+                                </div>
+                              ) : (
+                                <div className="space-y-2">
+                                  {whereUsedData.map((wu, idx) => (
+                                    <div key={idx} className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent/50 cursor-pointer" onClick={() => {
+                                      // 해당 BOM 선택
+                                      setSelectedBomId(wu.bom_id);
+                                      setTreeViewMode("forward");
+                                    }}>
+                                      <Package className="h-4 w-4 text-primary shrink-0" />
+                                      <div className="min-w-0 flex-1">
+                                        <div className="flex items-center gap-2">
+                                          <span className="text-sm font-semibold">{wu.item_name}</span>
+                                          <span className="font-mono text-[11px] text-muted-foreground">({wu.item_code})</span>
+                                        </div>
+                                        <div className="mt-0.5 flex gap-3 text-[11px] text-muted-foreground">
+                                          <span>소요량: <b className="text-foreground">{wu.quantity}</b> {wu.unit}</span>
+                                          {wu.process_type && <span>공정: <b className="text-foreground">{wu.process_type}</b></span>}
+                                        </div>
+                                      </div>
+                                      <ChevronRight className="h-4 w-4 text-muted-foreground/50 shrink-0" />
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      ) : editingFlatTree.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center h-40 text-muted-foreground gap-2">
+                          <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                          <p className="text-xs">등록된 하위 품목이 없습니다</p>
+                          <Button size="sm" variant="outline" onClick={() => handleTreeAddChild(null)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />첫 품목 추가
+                          </Button>
+                        </div>
+                      ) : (
+                        <table className="w-full border-collapse text-xs" style={{ minWidth: "1100px" }}>
+                          <colgroup><col style={{ width: "60px" }} /><col style={{ width: "140px" }} /><col /><col style={{ width: "70px" }} /><col style={{ width: "50px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "80px" }} /><col style={{ width: "150px" }} /><col style={{ width: "80px" }} /></colgroup>
+                          <thead className="sticky top-0 z-10">
+                            <tr className="border-b bg-muted">
+                              <th className="px-2 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">레벨</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">품번</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">품명</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">소요량</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">단위</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">공정구분</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">규격</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">비고</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">작성자</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-left">수정일시</th>
+                              <th className="px-3 py-2.5 text-[11px] font-semibold text-muted-foreground text-center">관리품목</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {editingFlatTree.map((node) => {
+                              const nodeKey = node.id || node._tempId || "";
+                              const isVirtualRoot = (node as any)._isVirtualRoot === true;
+                              const typeBadge = getItemTypeBadge(node.item_type);
+                              const hasChildren = isVirtualRoot ? editingTree.length > 0 : node.children.length > 0;
+                              const isExpanded = expandedNodes.has(nodeKey);
+                              const isSelected = selectedTreeNodeId === nodeKey;
+                              const isEditing = editingNodeId === nodeKey && !isVirtualRoot;
+                              const level = node._level || 0;
+
+                              const depthBarColor = isVirtualRoot ? "bg-primary/70"
+                                : level === 1 ? "bg-emerald-400"
+                                : level === 2 ? "bg-amber-400"
+                                : level >= 3 ? "bg-purple-400" : "bg-muted/60";
+
+                              const depthBg = isVirtualRoot
+                                ? "border-border bg-primary/10 font-medium hover:bg-primary/20"
+                                : isSelected
+                                  ? "border-border bg-primary/5"
+                                  : level === 1 ? "border-border bg-background hover:bg-muted/60"
+                                  : level >= 2 ? "border-border bg-muted/40 hover:bg-muted/50"
+                                  : "border-border bg-background hover:bg-muted/60";
+
+                              return (
+                                <tr
+                                  key={nodeKey}
+                                  className={cn("group cursor-pointer border-b transition-colors", depthBg)}
+                                  onClick={() => {
+                                    if (editingNodeId && editingNodeId !== nodeKey) setEditingNodeId(null);
+                                    setSelectedTreeNodeId(nodeKey);
+                                    if (hasChildren) toggleEditTreeNode(nodeKey);
+                                  }}
+                                  onDoubleClick={() => {
+                                    if (!isVirtualRoot) {
+                                      setTreeEditTarget(node);
+                                      setTreeEditForm({ quantity: node.quantity || "1", unit: node.unit || "", process_type: node.process_type || "", loss_rate: node.loss_rate || "0", spec: node.spec || "", material: node.material || "", remark: node.remark || "" });
+                                      setTreeEditModalOpen(true);
+                                    }
+                                  }}
+                                >
+                                  {/* 레벨 + 좌측 색상바 + 토글 */}
+                                  <td className="relative px-1 py-2" style={{ paddingLeft: `${level * 16 + 8}px` }}>
+                                    <div className={cn("absolute left-0 top-0 h-full w-[3px]", depthBarColor)} />
+                                    <div className="flex items-center gap-1">
+                                      <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
+                                        {hasChildren ? (
+                                          isExpanded ? <ChevronDown className={cn("h-3.5 w-3.5", isVirtualRoot ? "text-primary" : "text-muted-foreground/70")} />
+                                          : <ChevronRight className={cn("h-3.5 w-3.5", isVirtualRoot ? "text-primary" : "text-muted-foreground/70")} />
+                                        ) : (
+                                          <span className="h-1 w-1 rounded-full bg-muted-foreground/40" />
+                                        )}
+                                      </span>
+                                      <span className="text-[11px]">{level}</span>
+                                    </div>
+                                  </td>
+                                  {/* 품번 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">
+                                    <span className={cn("font-mono text-[11px]", isVirtualRoot && "font-bold text-foreground")}>
+                                      {node.item_number || "-"}
+                                    </span>
+                                  </td>
+                                  {/* 품명 */}
+                                  <td className={cn("overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2", isVirtualRoot && "font-bold")}>
+                                    {node.item_name || "-"}
+                                  </td>
+                                  {/* 소요량 */}
+                                  <td className="px-3 py-2 text-center">{isVirtualRoot ? (bomHeader?.base_qty || "1") : (node.quantity || "-")}</td>
+                                  {/* 단위 */}
+                                  <td className="px-3 py-2 text-center">{isVirtualRoot ? "-" : (node.unit || "-")}</td>
+                                  {/* 공정구분 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.process_type || "-")}</td>
+                                  {/* 규격 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.spec || "-")}</td>
+                                  {/* 비고 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2">{isVirtualRoot ? "-" : (node.remark || "-")}</td>
+                                  {/* 작성자 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 text-muted-foreground">{isVirtualRoot ? "-" : (node.writer || "-")}</td>
+                                  {/* 수정일시 */}
+                                  <td className="overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 text-muted-foreground">
+                                    {isVirtualRoot ? "-" : (node.updated_date ? new Date(node.updated_date).toLocaleString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }) : "-")}
+                                  </td>
+                                  {/* 관리품목 */}
+                                  <td className="px-2 py-2" style={{ minWidth: "150px" }}>
+                                    {isVirtualRoot ? <span className="text-center block">-</span> : (
+                                      node.item_type ? (
+                                        <div className="flex flex-row items-center gap-1 flex-nowrap">{node.item_type.split(",").map((t: string, i: number) => {
+                                          const trimmed = t.trim();
+                                          if (!trimmed) return null;
+                                          return <span key={i} className="shrink-0 rounded px-1 py-0.5 text-[9px] font-medium bg-muted text-muted-foreground">{trimmed}</span>;
+                                        })}</div>
+                                      ) : "-"
+                                    )}
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      )}
+                    </TabsContent>
+
+                    {/* 버전 탭 */}
+                    <TabsContent value="version" className="flex-1 overflow-auto m-0">
+                      <div className="p-3">
+                        <div className="flex items-center justify-between mb-3">
+                          <span className="text-xs text-muted-foreground">
+                            {versions.length}개 버전
+                          </span>
+                          <Button size="sm" onClick={() => setShowNewVersionDialog(true)}>
+                            <Plus className="w-3.5 h-3.5 mr-1" />
+                            새 버전
+                          </Button>
+                        </div>
+                        {versionLoading ? (
+                          <div className="flex items-center justify-center py-8">
+                            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                          </div>
+                        ) : versions.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                            <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                            <p className="text-xs">버전 데이터가 없어요</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-2">
+                            {versions.map((ver) => {
+                              const isActive = ver.id === currentVersionId;
+                              const statusInfo = VERSION_STATUS_MAP[ver.status] || { label: ver.status, className: "bg-muted text-muted-foreground" };
+                              return (
+                                <div
+                                  key={ver.id}
+                                  className={cn(
+                                    "flex items-center justify-between p-3 rounded-lg border transition-colors",
+                                    isActive ? "border-primary/30 bg-primary/5" : "hover:bg-muted/50"
+                                  )}
+                                >
+                                  <div className="flex items-center gap-3">
+                                    <div className="flex flex-col gap-0.5">
+                                      <div className="flex items-center gap-2">
+                                        <span className="text-sm font-semibold">{ver.version_name}</span>
+                                        <span className={cn("text-[10px] font-medium px-1.5 py-0.5 rounded-full", statusInfo.className)}>
+                                          {statusInfo.label}
+                                        </span>
+                                        {isActive && (
+                                          <Badge variant="outline" className="text-[10px] h-4 border-primary/30 text-primary">
+                                            현재
+                                          </Badge>
+                                        )}
+                                      </div>
+                                      <span className="text-[11px] text-muted-foreground">
+                                        {ver.detail_count || 0}개 구성품 · {ver.created_date ? new Date(ver.created_date).toLocaleDateString("ko-KR") : "-"}
+                                      </span>
+                                    </div>
+                                  </div>
+                                  <div className="flex items-center gap-1">
+                                    {!isActive && (
+                                      <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => handleLoadVersion(ver.id)}>
+                                        <RotateCcw className="w-3 h-3 mr-1" />
+                                        불러오기
+                                      </Button>
+                                    )}
+                                    {ver.status !== "active" && (
+                                      <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => handleActivateVersion(ver.id)}>
+                                        <CheckCircle2 className="w-3 h-3 mr-1" />
+                                        확정
+                                      </Button>
+                                    )}
+                                    {ver.status !== "active" && (
+                                      <Button
+                                        size="sm"
+                                        variant="ghost"
+                                        className="h-7 text-xs text-destructive hover:text-destructive"
+                                        onClick={() => handleDeleteVersion(ver.id)}
+                                      >
+                                        <Trash2 className="w-3 h-3" />
+                                      </Button>
+                                    )}
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    </TabsContent>
+
+                    {/* 이력 탭 */}
+                    <TabsContent value="history" className="flex-1 overflow-auto m-0">
+                      <div className="p-3">
+                        <div className="flex items-center justify-between mb-3">
+                          <span className="text-xs text-muted-foreground">
+                            {historyList.length}건 이력
+                          </span>
+                        </div>
+                        {historyLoading ? (
+                          <div className="flex items-center justify-center py-8">
+                            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                          </div>
+                        ) : historyList.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                            <Inbox className="w-8 h-8 text-muted-foreground/40" />
+                            <p className="text-xs">이력 데이터가 없어요</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-2">
+                            {historyList.map((entry) => {
+                              const typeStyle = CHANGE_TYPE_STYLE[entry.change_type] || "bg-muted text-muted-foreground ring-border";
+                              return (
+                                <div key={entry.id} className="p-3 rounded-lg border hover:bg-muted/50 transition-colors">
+                                  <div className="flex items-center justify-between mb-1">
+                                    <div className="flex items-center gap-2">
+                                      <span className={cn("inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium ring-1 ring-inset", typeStyle)}>
+                                        {entry.change_type}
+                                      </span>
+                                      {(entry.revision || entry.version) && (
+                                        <span className="text-[10px] text-muted-foreground">
+                                          {entry.revision && `차수 ${entry.revision}`}{entry.revision && entry.version && " / "}{entry.version && `v${entry.version}`}
+                                        </span>
+                                      )}
+                                    </div>
+                                    <span className="text-[10px] text-muted-foreground">
+                                      {entry.changed_date ? new Date(entry.changed_date).toLocaleString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }) : "-"}
+                                    </span>
+                                  </div>
+                                  <p className="text-xs mt-1">{entry.change_description || "-"}</p>
+                                  {entry.changed_by && (
+                                    <span className="text-[10px] text-muted-foreground/60 mt-1 block">
+                                      {entry.changed_by}
+                                    </span>
+                                  )}
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </div>
+              </div>
+            )}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ─── BOM 등록/수정 모달 ─────────────────── */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl max-h-[85vh] overflow-y-auto" onPointerDownOutside={(e) => { if (showItemSearchModal) e.preventDefault(); }}>
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "BOM 수정" : "BOM 등록"}</DialogTitle>
+            <DialogDescription>{isEditMode ? "BOM 정보를 수정해요" : "새로운 BOM을 등록해요"}</DialogDescription>
+          </DialogHeader>
+        <div className="space-y-6">
+          {/* 기본정보 */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                품목 <span className="text-destructive">*</span>
+              </Label>
+              <div className="flex gap-2">
+                <Input
+                  className="h-9 flex-1"
+                  value={masterForm.item_code ? `${masterForm.item_code} - ${masterForm.item_name}` : ""}
+                  placeholder="품목을 검색해주세요"
+                  readOnly
+                  onClick={() => {
+                    setItemSearchTarget("master");
+                    setItemSearchKeyword("");
+                    setShowItemSearchModal(true);
+                    searchItems("");
+                  }}
+                />
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="h-9 px-3"
+                  onClick={() => {
+                    setItemSearchTarget("master");
+                    setItemSearchKeyword("");
+                    setShowItemSearchModal(true);
+                    searchItems("");
+                  }}
+                >
+                  <Search className="w-3.5 h-3.5" />
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                BOM 유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={masterForm.bom_type || ""} onValueChange={(v) => setMasterForm((prev) => ({ ...prev, bom_type: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  {BOM_TYPE_OPTIONS.map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">기준수량</Label>
+              <Input
+                className="h-9"
+                type="number"
+                value={masterForm.base_qty}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, base_qty: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">단위</Label>
+              <Input
+                className="h-9"
+                value={masterForm.unit}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, unit: e.target.value }))}
+                placeholder="EA"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                버전 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={masterForm.version}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, version: e.target.value }))}
+                placeholder="1.0"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">상태</Label>
+              <Select value={masterForm.status || "draft"} onValueChange={(v) => setMasterForm((prev) => ({ ...prev, status: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="draft">초안</SelectItem>
+                  <SelectItem value="active">활성</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                유효 시작일 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={masterForm.effective_date || ""}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, effective_date: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">유효 종료일</Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={masterForm.expiry_date || ""}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, expiry_date: e.target.value }))}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5 col-span-2">
+              <Label className="text-xs font-medium">메모</Label>
+              <Textarea
+                className="min-h-[60px] resize-none"
+                value={masterForm.remark}
+                onChange={(e) => setMasterForm((prev) => ({ ...prev, remark: e.target.value }))}
+                placeholder="메모를 입력해주세요"
+              />
+            </div>
+          </div>
+
+          {/* BOM 구성품목 */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <h4 className="text-sm font-semibold">BOM 구성품목</h4>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  setItemSearchTarget("detail");
+                  setItemSearchKeyword("");
+                  setShowItemSearchModal(true);
+                  searchItems("");
+                }}
+              >
+                <Plus className="w-3.5 h-3.5 mr-1" />
+                품목 추가
+              </Button>
+            </div>
+            <div className="border rounded-lg overflow-hidden">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
+                    <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                    <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                    <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공정유형</TableHead>
+                    <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">손실율(%)</TableHead>
+                    <TableHead className="w-[40px]" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {modalDetailRows.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={8} className="text-center py-8 text-muted-foreground text-[13px]">
+                        구성품목을 추가해주세요
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    modalDetailRows.map((row, idx) => (
+                      <TableRow key={idx}>
+                        <TableCell className="text-center text-muted-foreground text-[13px]">{idx + 1}</TableCell>
+                        <TableCell className="font-mono text-[13px]">{row.item_number}</TableCell>
+                        <TableCell className="text-[13px]">{row.item_name}</TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[70px] text-xs"
+                            type="number"
+                            value={row.quantity}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].quantity = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell className="text-[13px]">{row.unit}</TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[90px] text-xs"
+                            value={row.process_type}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].process_type = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                            placeholder="공정"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Input
+                            className="h-7 w-[70px] text-xs"
+                            type="number"
+                            value={row.loss_rate}
+                            onChange={(e) => {
+                              const newRows = [...modalDetailRows];
+                              newRows[idx].loss_rate = e.target.value;
+                              setModalDetailRows(newRows);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                            onClick={() => setModalDetailRows((prev) => prev.filter((_, i) => i !== idx))}
+                          >
+                            <X className="w-3.5 h-3.5" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)} disabled={saving}>
+              취소
+            </Button>
+            <Button onClick={handleSaveBom} disabled={saving}>
+              {saving && <Loader2 className="w-3.5 h-3.5 animate-spin mr-1.5" />}
+              {isEditMode ? "수정" : "등록"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 품목 검색 모달 ──────────────────────── */}
+      <Dialog open={showItemSearchModal} onOpenChange={setShowItemSearchModal}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>품목 검색</DialogTitle>
+            <DialogDescription>품목코드 또는 품명으로 검색해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              className="h-9 flex-1"
+              placeholder="품목코드 또는 품명 입력"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+            />
+            <Button size="sm" className="h-9" onClick={() => searchItems()} disabled={itemSearchLoading}>
+              {itemSearchLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}
+            </Button>
+          </div>
+          <div className="max-h-[300px] overflow-auto border rounded-lg">
+            {itemSearchResults.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground gap-1">
+                <Search className="w-6 h-6 text-muted-foreground/40" />
+                <p className="text-xs">검색어를 입력해주세요</p>
+              </div>
+            ) : (
+              itemSearchResults.map((item) => {
+                const badge = getItemTypeBadge(item.division);
+                return (
+                  <div
+                    key={item.id}
+                    className="flex items-center gap-3 px-3 py-2 border-b last:border-b-0 hover:bg-accent cursor-pointer transition-colors"
+                    onClick={() => selectItem(item)}
+                  >
+                    <span className={cn("text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0", badge.className)}>
+                      {badge.label}
+                    </span>
+                    <span className="font-mono text-[11px] text-muted-foreground">{item.item_number}</span>
+                    <span className="text-xs">{item.item_name}</span>
+                    <span className="ml-auto text-[11px] text-muted-foreground">{item.unit || ""}</span>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 품목 수정 모달 (더블클릭) ─────────────────── */}
+      <Dialog open={treeEditModalOpen} onOpenChange={setTreeEditModalOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>품목 수정</DialogTitle>
+            <DialogDescription>선택한 품목의 BOM 구성 정보를 수정합니다</DialogDescription>
+          </DialogHeader>
+          {treeEditTarget && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">품목코드</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditTarget.item_number || ""} readOnly />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">품목명</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditTarget.item_name || ""} readOnly />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">구성수량 <span className="text-destructive">*</span></Label>
+                  <Input className="h-9" type="number" value={treeEditForm.quantity || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, quantity: e.target.value }))} />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">단위</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.unit || "-"} readOnly />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">공정</Label>
+                  <Select value={treeEditForm.process_type || ""} onValueChange={(v) => setTreeEditForm((p) => ({ ...p, process_type: v }))}>
+                    <SelectTrigger className="h-9"><SelectValue placeholder="공정 선택" /></SelectTrigger>
+                    <SelectContent>
+                      {processOptions.map((o) => (
+                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">로스율 (%)</Label>
+                  <Input className="h-9" type="number" value={treeEditForm.loss_rate || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, loss_rate: e.target.value }))} />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">규격</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.spec || "-"} readOnly />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs font-semibold text-muted-foreground">재질</Label>
+                  <Input className="h-9 bg-muted/50" value={treeEditForm.material || "-"} readOnly />
+                </div>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold text-muted-foreground">메모</Label>
+                <textarea className="flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm" value={treeEditForm.remark || ""} onChange={(e) => setTreeEditForm((p) => ({ ...p, remark: e.target.value }))} placeholder="비고 사항을 입력하세요" />
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setTreeEditModalOpen(false)}>취소</Button>
+            <Button onClick={() => {
+              if (treeEditTarget) {
+                const nodeKey = treeEditTarget.id || treeEditTarget._tempId || "";
+                setEditingTree(prev => updateTreeNode(prev, nodeKey, node => ({
+                  ...node,
+                  quantity: treeEditForm.quantity || "1",
+                  process_type: treeEditForm.process_type || "",
+                  loss_rate: treeEditForm.loss_rate || "0",
+                  remark: treeEditForm.remark || "",
+                  _isModified: !node._isNew ? true : node._isModified,
+                })));
+                setTreeHasChanges(true);
+              }
+              setTreeEditModalOpen(false);
+            }}>저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 트리 품목 검색 모달 ─────────────────── */}
+      <Dialog open={treeItemSearchOpen} onOpenChange={setTreeItemSearchOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>품목 검색 (트리 추가)</DialogTitle>
+            <DialogDescription>추가할 품목을 검색해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              className="h-9 flex-1"
+              placeholder="품목코드 또는 품명 입력"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+            />
+            <Button size="sm" className="h-9" onClick={() => searchItems()} disabled={itemSearchLoading}>
+              {itemSearchLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}
+            </Button>
+          </div>
+          <div className="max-h-[300px] overflow-auto border rounded-lg">
+            {itemSearchResults.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground gap-1">
+                <Search className="w-6 h-6 text-muted-foreground/40" />
+                <p className="text-xs">검색어를 입력해주세요</p>
+              </div>
+            ) : (
+              itemSearchResults.filter((item) => {
+                // 자기 자신 제외
+                if (bomHeader && (item.id === bomHeader.item_id || item.item_number === bomHeader.item_code)) return false;
+                // 조상 경로 순환 참조 제외
+                if (addTargetParentId) {
+                  const collectAncestorIds = (nodes: TreeNode[], targetId: string, path: string[]): string[] | null => {
+                    for (const n of nodes) {
+                      const nk = n.id || n._tempId || "";
+                      if (nk === targetId) return [...path, n.child_item_id || ""];
+                      if (n.children.length > 0) {
+                        const r = collectAncestorIds(n.children, targetId, [...path, n.child_item_id || ""]);
+                        if (r) return r;
+                      }
+                    }
+                    return null;
+                  };
+                  const ancestors = collectAncestorIds(editingTree, addTargetParentId, []);
+                  if (ancestors && ancestors.includes(item.id)) return false;
+                }
+                return true;
+              }).map((item) => {
+                const badge = getItemTypeBadge(item.division);
+                return (
+                  <div
+                    key={item.id}
+                    className="flex items-center gap-3 px-3 py-2 border-b last:border-b-0 hover:bg-accent cursor-pointer transition-colors"
+                    onClick={() => handleTreeItemSelect(item)}
+                  >
+                    <span className={cn("text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0", badge.className)}>
+                      {badge.label}
+                    </span>
+                    <span className="font-mono text-[11px] text-muted-foreground">{item.item_number}</span>
+                    <span className="text-xs">{item.item_name}</span>
+                    <span className="ml-auto text-[11px] text-muted-foreground">{item.unit || ""}</span>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 새 버전 생성 다이얼로그 ────────────── */}
+      <Dialog open={showNewVersionDialog} onOpenChange={setShowNewVersionDialog}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>새 버전 생성</DialogTitle>
+            <DialogDescription>현재 버전의 데이터를 복사하여 새 버전을 만들어요</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-xs font-medium">버전명 (비워두면 자동 채번)</Label>
+            <Input
+              className="h-9"
+              value={newVersionName}
+              onChange={(e) => setNewVersionName(e.target.value)}
+              placeholder="예: 2.0"
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowNewVersionDialog(false)}>
+              취소
+            </Button>
+            <Button onClick={handleCreateVersion}>
+              <Plus className="w-3.5 h-3.5 mr-1" />
+              생성
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 이력 추가 다이얼로그 ───────────────── */}
+      <Dialog open={showHistoryDialog} onOpenChange={setShowHistoryDialog}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>이력 추가</DialogTitle>
+            <DialogDescription>BOM 변경 이력을 기록해요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">
+                변경 유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={newHistory.change_type} onValueChange={(v) => setNewHistory((prev) => ({ ...prev, change_type: v }))}>
+                <SelectTrigger className="h-9"><SelectValue placeholder="변경 유형 선택" /></SelectTrigger>
+                <SelectContent>
+                  {CHANGE_TYPE_OPTIONS.map((t) => (
+                    <SelectItem key={t} value={t}>{t}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs font-medium">변경 내용</Label>
+              <Textarea
+                className="min-h-[80px] resize-none"
+                value={newHistory.change_description}
+                onChange={(e) => setNewHistory((prev) => ({ ...prev, change_description: e.target.value }))}
+                placeholder="변경 내용을 입력해주세요"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowHistoryDialog(false)}>
+              취소
+            </Button>
+            <Button onClick={handleAddHistory}>
+              <Plus className="w-3.5 h-3.5 mr-1" />
+              추가
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ─── 엑셀 업로드 다이얼로그 ────────────── */}
+      <Dialog open={showExcelUpload} onOpenChange={setShowExcelUpload}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>BOM 엑셀 업로드</DialogTitle>
+            <DialogDescription>
+              {selectedBomId
+                ? "선택한 BOM에 새 버전을 엑셀로 생성해요"
+                : "엑셀 파일로 새 BOM을 생성해요"}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="border-2 border-dashed rounded-lg p-6 text-center">
+              <input
+                type="file"
+                accept=".xlsx,.xls"
+                className="hidden"
+                id="excel-file-input"
+                onChange={(e) => setExcelFile(e.target.files?.[0] || null)}
+              />
+              <label htmlFor="excel-file-input" className="cursor-pointer">
+                <Upload className="w-8 h-8 mx-auto mb-2 text-muted-foreground/40" />
+                <p className="text-sm text-muted-foreground mb-1">
+                  {excelFile ? excelFile.name : "클릭하여 파일을 선택해주세요"}
+                </p>
+                <p className="text-[10px] text-muted-foreground/60">.xlsx, .xls 형식</p>
+              </label>
+            </div>
+            <div className="bg-muted/50 rounded-lg p-3 text-xs text-muted-foreground space-y-1">
+              <p className="font-medium text-foreground">엑셀 형식 안내</p>
+              <p>레벨 0: BOM 마스터 (최상위 품목)</p>
+              <p>레벨 1: 직접 자품목</p>
+              <p>레벨 2+: 자품목의 자품목</p>
+              <p>필수 컬럼: level, item_number, quantity</p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setShowExcelUpload(false); setExcelFile(null); }}>
+              취소
+            </Button>
+            <Button onClick={handleExcelUpload} disabled={!excelFile || excelUploading}>
+              {excelUploading && <Loader2 className="w-3.5 h-3.5 animate-spin mr-1.5" />}
+              업로드
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/production/plan-management/page.tsx b/frontend/app/(main)/COMPANY_9/production/plan-management/page.tsx
new file mode 100644
index 00000000..546ed739
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/production/plan-management/page.tsx
@@ -0,0 +1,1850 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Upload,
+  Download,
+  RefreshCw,
+  ChevronRight,
+  Save,
+  Trash2,
+  Zap,
+  Package,
+  Wrench,
+  AlertTriangle,
+  ClipboardList,
+  Calendar,
+  Scissors,
+  Loader2,
+  Maximize2,
+  Minimize2,
+  Merge,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import {
+  getOrderSummary,
+  getStockShortage,
+  getPlans,
+  updatePlan,
+  deletePlan,
+  generateSchedule,
+  previewSchedule,
+  mergeSchedules,
+  generateSemiSchedule,
+  splitSchedule,
+  type OrderSummaryItem,
+  type StockShortageItem,
+  type ProductionPlan,
+  type GenerateScheduleRequest,
+  type GenerateScheduleResponse,
+} from "@/lib/api/production";
+import TimelineScheduler, {
+  type TimelineResource,
+  type TimelineEvent,
+  type ZoomLevel,
+  type StatusColor,
+} from "@/components/common/TimelineScheduler";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { apiClient } from "@/lib/api/client";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+
+// ─── 상수 ───
+
+const STATUS_COLORS: StatusColor[] = [
+  { key: "planned", label: "계획", bgClass: "from-blue-500 to-blue-600" },
+  { key: "work-order", label: "지시", bgClass: "from-amber-500 to-amber-600" },
+  { key: "in-progress", label: "진행", bgClass: "from-emerald-500 to-emerald-600" },
+  { key: "completed", label: "완료", bgClass: "from-gray-400 to-gray-500" },
+];
+
+const STATUS_LABEL: Record<string, string> = {
+  planned: "계획",
+  "work-order": "작업지시",
+  "in-progress": "진행중",
+  completed: "완료",
+};
+
+// 수주 테이블 컬럼 설정
+const ORDER_COLUMNS = [
+  { key: "total_order_qty", label: "총수주량" },
+  { key: "total_ship_qty", label: "출고량" },
+  { key: "total_balance_qty", label: "잔량" },
+  { key: "current_stock", label: "현재고" },
+  { key: "safety_stock", label: "안전재고" },
+  { key: "existing_plan_qty", label: "기생산계획량" },
+  { key: "in_progress_qty", label: "생산진행" },
+  { key: "required_plan_qty", label: "필요생산계획" },
+  { key: "lead_time", label: "리드타임(일)" },
+];
+
+// ========== 메인 컴포넌트 ==========
+
+export default function ProductionPlanManagementPage() {
+  // 탭 상태
+  const [leftTab, setLeftTab] = useState("order");
+  const [rightTab, setRightTab] = useState("finished");
+
+  // 전체화면 토글
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  // 로딩 상태
+  const [loadingOrders, setLoadingOrders] = useState(false);
+  const [loadingStock, setLoadingStock] = useState(false);
+  const [loadingPlans, setLoadingPlans] = useState(false);
+  const [generating, setGenerating] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  // 데이터 상태
+  const [orderItems, setOrderItems] = useState<OrderSummaryItem[]>([]);
+  const [stockItems, setStockItems] = useState<StockShortageItem[]>([]);
+  const [finishedPlans, setFinishedPlans] = useState<ProductionPlan[]>([]);
+  const [semiPlans, setSemiPlans] = useState<ProductionPlan[]>([]);
+  const [equipmentList, setEquipmentList] = useState<{ id: string; equipment_code: string; equipment_name: string }[]>([]);
+
+  // 선택/토글 상태
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [selectedItemGroups, setSelectedItemGroups] = useState<Set<string>>(new Set());
+  const [filterUnplannedOrdersOnly, setFilterUnplannedOrdersOnly] = useState(false);
+  const [selectedStockItems, setSelectedStockItems] = useState<Set<string>>(new Set());
+
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [searchItemCode, setSearchItemCode] = useState("");
+  const [searchStatus, setSearchStatus] = useState("all");
+  const [searchStartDate, setSearchStartDate] = useState("");
+  const [searchEndDate, setSearchEndDate] = useState("");
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-plan-management", "sales_order_mng", ORDER_COLUMNS);
+
+  // 타임라인 옵션
+  const [recalculateUnstarted, setRecalculateUnstarted] = useState(true);
+  const [finishedZoom, setFinishedZoom] = useState<ZoomLevel>("week");
+  const [semiZoom, setSemiZoom] = useState<ZoomLevel>("week");
+
+  // 반제품 옵션
+  const [semiConsiderStock, setSemiConsiderStock] = useState(true);
+  const [semiRecalculate, setSemiRecalculate] = useState(false);
+  const [semiExcludeUsed, setSemiExcludeUsed] = useState(true);
+
+  // 모달 상태
+  const [scheduleModalOpen, setScheduleModalOpen] = useState(false);
+  const [orderImportModalOpen, setOrderImportModalOpen] = useState(false);
+  const [stockImportModalOpen, setStockImportModalOpen] = useState(false);
+  const [changeConfirmModalOpen, setChangeConfirmModalOpen] = useState(false);
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 모달 데이터
+  const [selectedPlan, setSelectedPlan] = useState<ProductionPlan | null>(null);
+  const [modalQuantity, setModalQuantity] = useState(0);
+  const [modalStartDate, setModalStartDate] = useState("");
+  const [modalEndDate, setModalEndDate] = useState("");
+  const [modalManager, setModalManager] = useState("");
+  const [modalWorkOrderNo, setModalWorkOrderNo] = useState("");
+  const [modalRemarks, setModalRemarks] = useState("");
+  const [modalEquipmentId, setModalEquipmentId] = useState("");
+
+  // 미리보기 데이터
+  const [previewData, setPreviewData] = useState<GenerateScheduleResponse | null>(null);
+
+  // 불러오기 모드
+  const [importMode, setImportMode] = useState<"add" | "new">("add");
+
+  // 병합: 타임라인에서 선택된 계획 ID
+  const [selectedPlanIds, setSelectedPlanIds] = useState<Set<number>>(new Set());
+
+  // useConfirmDialog
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  // ========== 데이터 로드 ==========
+
+  const fetchOrderSummary = useCallback(async () => {
+    setLoadingOrders(true);
+    try {
+      const res = await getOrderSummary({
+        excludePlanned: filterUnplannedOrdersOnly,
+        itemCode: searchItemCode || undefined,
+      });
+      if (res.success) setOrderItems(res.data || []);
+    } catch (err: any) {
+      toast.error("수주 데이터 조회 실패: " + (err.message || ""));
+    } finally {
+      setLoadingOrders(false);
+    }
+  }, [filterUnplannedOrdersOnly, searchItemCode]);
+
+  const fetchStockShortage = useCallback(async () => {
+    setLoadingStock(true);
+    try {
+      const res = await getStockShortage();
+      if (res.success) setStockItems(res.data || []);
+    } catch (err: any) {
+      toast.error("안전재고 부족분 조회 실패: " + (err.message || ""));
+    } finally {
+      setLoadingStock(false);
+    }
+  }, []);
+
+  const fetchPlans = useCallback(async () => {
+    setLoadingPlans(true);
+    try {
+      const [finRes, semiRes] = await Promise.all([
+        getPlans({
+          productType: "완제품",
+          status: searchStatus !== "all" ? searchStatus : undefined,
+          startDate: searchStartDate || undefined,
+          endDate: searchEndDate || undefined,
+          itemCode: searchItemCode || undefined,
+        }),
+        getPlans({
+          productType: "반제품",
+          status: searchStatus !== "all" ? searchStatus : undefined,
+          startDate: searchStartDate || undefined,
+          endDate: searchEndDate || undefined,
+        }),
+      ]);
+      if (finRes.success) setFinishedPlans(finRes.data || []);
+      if (semiRes.success) setSemiPlans(semiRes.data || []);
+    } catch (err: any) {
+      toast.error("생산계획 조회 실패: " + (err.message || ""));
+    } finally {
+      setLoadingPlans(false);
+    }
+  }, [searchStatus, searchStartDate, searchEndDate, searchItemCode]);
+
+  const fetchEquipmentList = useCallback(async () => {
+    try {
+      const res = await apiClient.get("/process-info/equipments");
+      if (res.data?.success) setEquipmentList(res.data.data || []);
+    } catch {
+      // 설비 목록 없어도 정상 동작
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchOrderSummary();
+    fetchStockShortage();
+    fetchPlans();
+    fetchEquipmentList();
+  }, []);
+
+  // ========== DynamicSearchFilter 콜백 ==========
+
+  const handleSearchFilterChange = useCallback((filters: FilterValue[]) => {
+    setSearchFilters(filters);
+    let itemCode = "";
+    let status = "all";
+    let startDate = "";
+    let endDate = "";
+    for (const f of filters) {
+      if (f.columnName === "item_code" && f.value) itemCode = f.value;
+      if (f.columnName === "status" && f.value) status = f.value;
+      if (f.columnName === "start_date" && f.operator === "between" && f.value) {
+        const [s, e] = f.value.split("|");
+        if (s) startDate = s;
+        if (e) endDate = e;
+      }
+    }
+    setSearchItemCode(itemCode);
+    setSearchStatus(status || "all");
+    setSearchStartDate(startDate);
+    setSearchEndDate(endDate);
+  }, []);
+
+  useEffect(() => {
+    if (searchFilters.length > 0) {
+      fetchOrderSummary();
+      fetchPlans();
+    }
+  }, [searchItemCode, searchStatus, searchStartDate, searchEndDate]);
+
+  // ========== 토글/선택 핸들러 ==========
+
+  const toggleItemExpand = useCallback((itemCode: string) => {
+    setExpandedItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(itemCode)) next.delete(itemCode);
+      else next.add(itemCode);
+      return next;
+    });
+  }, []);
+
+  const toggleItemGroupSelect = useCallback((itemCode: string) => {
+    setSelectedItemGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(itemCode)) next.delete(itemCode);
+      else next.add(itemCode);
+      return next;
+    });
+  }, []);
+
+  const toggleAllItemGroups = useCallback(
+    (checked: boolean) => {
+      setSelectedItemGroups(checked ? new Set(orderItems.map((i) => i.item_code)) : new Set());
+    },
+    [orderItems]
+  );
+
+  const toggleStockItem = useCallback((itemCode: string) => {
+    setSelectedStockItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(itemCode)) next.delete(itemCode);
+      else next.add(itemCode);
+      return next;
+    });
+  }, []);
+
+  const toggleAllStockItems = useCallback(
+    (checked: boolean) => {
+      setSelectedStockItems(checked ? new Set(stockItems.map((i) => i.item_code)) : new Set());
+    },
+    [stockItems]
+  );
+
+  // ========== 타임라인 리소스 & 이벤트 ==========
+
+  const finishedResources: TimelineResource[] = useMemo(() => {
+    const map = new Map<string, TimelineResource>();
+    for (const p of finishedPlans) {
+      if (!map.has(p.item_code)) {
+        map.set(p.item_code, {
+          id: p.item_code,
+          label: p.item_code,
+          subLabel: p.item_name,
+        });
+      }
+    }
+    return Array.from(map.values());
+  }, [finishedPlans]);
+
+  const finishedEvents: TimelineEvent[] = useMemo(() => {
+    return finishedPlans.map((p) => ({
+      id: p.id,
+      resourceId: p.item_code,
+      startDate: p.start_date?.split("T")[0] || "",
+      endDate: p.end_date?.split("T")[0] || "",
+      label: `${Number(p.plan_qty).toLocaleString()}`,
+      status: p.status,
+      progress: Number(p.progress_rate) || 0,
+      data: p,
+    }));
+  }, [finishedPlans]);
+
+  const semiResources: TimelineResource[] = useMemo(() => {
+    const map = new Map<string, TimelineResource>();
+    for (const p of semiPlans) {
+      if (!map.has(p.item_code)) {
+        map.set(p.item_code, {
+          id: p.item_code,
+          label: p.item_code,
+          subLabel: p.item_name,
+        });
+      }
+    }
+    return Array.from(map.values());
+  }, [semiPlans]);
+
+  const semiEvents: TimelineEvent[] = useMemo(() => {
+    return semiPlans.map((p) => ({
+      id: p.id,
+      resourceId: p.item_code,
+      startDate: p.start_date?.split("T")[0] || "",
+      endDate: p.end_date?.split("T")[0] || "",
+      label: `${Number(p.plan_qty).toLocaleString()}`,
+      status: p.status,
+      progress: Number(p.progress_rate) || 0,
+      data: p,
+    }));
+  }, [semiPlans]);
+
+  // ========== 액션 핸들러 ==========
+
+  const handleSearch = useCallback(() => {
+    fetchOrderSummary();
+    fetchPlans();
+  }, [fetchOrderSummary, fetchPlans]);
+
+  // 자동 스케줄 생성 (preview → confirm → apply)
+  const handleGenerateSchedule = useCallback(async () => {
+    if (selectedItemGroups.size === 0) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+
+    // 납기일별로 분리하여 각각 계획 생성
+    const items: GenerateScheduleRequest["items"] = [];
+    orderItems
+      .filter((item) => selectedItemGroups.has(item.item_code))
+      .forEach((item) => {
+        const leadTime = Number(item.lead_time) || 0;
+        // 재계산 모드: 기존 planned를 삭제 후 재생성 → 수주 잔량에서 진행중만 빼기
+        const totalRequired = recalculateUnstarted
+          ? Number(item.total_balance_qty || 0) - Number(item.in_progress_qty || 0)
+          : Number(item.required_plan_qty);
+        if (totalRequired <= 0) return;
+
+        // 수주가 여러 건이고 납기일이 다르면 각각 분리
+        if (item.orders && item.orders.length > 1) {
+          const byDueDate = new Map<string, number>();
+          for (const order of item.orders) {
+            const dd = order.due_date || new Date().toISOString().split("T")[0];
+            byDueDate.set(dd, (byDueDate.get(dd) || 0) + Number(order.balance_qty || 0));
+          }
+          if (byDueDate.size > 1) {
+            // 납기일별 잔량 비율로 required_plan_qty 분배
+            const totalBalance = Number(item.total_balance_qty) || 1;
+            let distributed = 0;
+            const entries = [...byDueDate.entries()];
+            entries.forEach(([dueDate, balanceQty], idx) => {
+              if (balanceQty <= 0) return;
+              // 마지막 건은 나머지 할당 (반올림 오차 방지)
+              const qty = idx === entries.length - 1
+                ? totalRequired - distributed
+                : Math.round(totalRequired * (balanceQty / totalBalance));
+              if (qty <= 0) return;
+              distributed += qty;
+              items.push({
+                item_code: item.item_code,
+                item_name: item.item_name,
+                required_qty: qty,
+                earliest_due_date: dueDate,
+                lead_time: leadTime,
+              });
+            });
+          } else {
+            items.push({
+              item_code: item.item_code,
+              item_name: item.item_name,
+              required_qty: totalRequired,
+              earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+              lead_time: leadTime,
+            });
+          }
+        } else {
+          items.push({
+            item_code: item.item_code,
+            item_name: item.item_name,
+            required_qty: totalRequired,
+            earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+            lead_time: leadTime,
+          });
+        }
+      });
+
+    // items가 비어있으면 사용자에게 알림
+
+
+    if (items.length === 0) {
+      toast.error("계획 수량이 있는 품목이 없습니다. 수주 잔량을 확인해주세요.");
+      return;
+    }
+
+    setGenerating(true);
+    try {
+      const req: GenerateScheduleRequest = {
+        items,
+        options: {
+          safety_lead_time: 0,
+          recalculate_unstarted: recalculateUnstarted,
+          product_type: "완제품",
+        },
+      };
+      const previewRes = await previewSchedule(req);
+      if (previewRes.success) {
+        setPreviewData(previewRes.data);
+        setChangeConfirmModalOpen(true);
+      }
+    } catch (err: any) {
+      toast.error("스케줄 미리보기 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [selectedItemGroups, orderItems, recalculateUnstarted]);
+
+  const handleApplySchedule = useCallback(async () => {
+    if (selectedItemGroups.size === 0) return;
+
+    // 납기일별로 분리하여 각각 계획 생성
+    const items: GenerateScheduleRequest["items"] = [];
+    orderItems
+      .filter((item) => selectedItemGroups.has(item.item_code))
+      .forEach((item) => {
+        const leadTime = Number(item.lead_time) || 0;
+        const totalRequired = recalculateUnstarted
+          ? Number(item.required_plan_qty) + Number(item.existing_plan_qty || 0)
+          : Number(item.required_plan_qty);
+        if (totalRequired <= 0) return;
+
+        if (item.orders && item.orders.length > 1) {
+          const byDueDate = new Map<string, number>();
+          for (const order of item.orders) {
+            const dd = order.due_date || new Date().toISOString().split("T")[0];
+            byDueDate.set(dd, (byDueDate.get(dd) || 0) + Number(order.balance_qty || 0));
+          }
+          if (byDueDate.size > 1) {
+            const totalBalance = Number(item.total_balance_qty) || 1;
+            let distributed = 0;
+            const entries = [...byDueDate.entries()];
+            entries.forEach(([dueDate, balanceQty], idx) => {
+              if (balanceQty <= 0) return;
+              const qty = idx === entries.length - 1
+                ? totalRequired - distributed
+                : Math.round(totalRequired * (balanceQty / totalBalance));
+              if (qty <= 0) return;
+              distributed += qty;
+              items.push({
+                item_code: item.item_code,
+                item_name: item.item_name,
+                required_qty: qty,
+                earliest_due_date: dueDate,
+                lead_time: leadTime,
+              });
+            });
+          } else {
+            items.push({
+              item_code: item.item_code,
+              item_name: item.item_name,
+              required_qty: totalRequired,
+              earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+              lead_time: leadTime,
+            });
+          }
+        } else {
+          items.push({
+            item_code: item.item_code,
+            item_name: item.item_name,
+            required_qty: totalRequired,
+            earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+            lead_time: leadTime,
+          });
+        }
+      });
+
+    setGenerating(true);
+    try {
+      const res = await generateSchedule({
+        items,
+        options: {
+          safety_lead_time: 0,
+          recalculate_unstarted: recalculateUnstarted,
+          product_type: "완제품",
+        },
+      });
+      if (res.success) {
+        toast.success(`스케줄이 생성되었습니다 (${res.data.summary.total}건)`);
+        setChangeConfirmModalOpen(false);
+        setPreviewData(null);
+        fetchPlans();
+        fetchOrderSummary();
+      }
+    } catch (err: any) {
+      toast.error("스케줄 생성 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [selectedItemGroups, orderItems, recalculateUnstarted, fetchPlans, fetchOrderSummary]);
+
+  // 타임라인 초기화 (계획 상태만 삭제)
+  const handleClearTimeline = useCallback(async () => {
+    if (finishedPlans.length === 0) {
+      toast.info("삭제할 계획이 없습니다");
+      return;
+    }
+    const plannedIds = finishedPlans.filter((p) => p.status === "planned").map((p) => p.id);
+    if (plannedIds.length === 0) {
+      toast.info("삭제 가능한 계획이 없습니다 (계획 상태만 삭제 가능)");
+      return;
+    }
+    const ok = await confirm(`${plannedIds.length}건의 계획을 삭제하시겠습니까?`, {
+      description: "삭제된 계획은 복구할 수 없습니다.",
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+
+    try {
+      const results = await Promise.allSettled(plannedIds.map((id) => deletePlan(id)));
+      const failedIds = plannedIds.filter((_, i) => results[i].status === "rejected");
+      const succeededCount = plannedIds.length - failedIds.length;
+
+      if (failedIds.length === plannedIds.length) {
+        // 전부 삭제 실패
+        toast.error(`${failedIds.length}건 모두 삭제에 실패했습니다. 다시 시도해주세요.`);
+      } else if (failedIds.length > 0) {
+        // 일부 삭제 실패
+        toast.warning(
+          `${succeededCount}건 삭제 완료, ${failedIds.length}건 삭제 실패. 실패 항목을 다시 시도해주세요.`
+        );
+      } else {
+        // 전부 성공
+        toast.success(`${plannedIds.length}건의 계획이 삭제되었습니다`);
+      }
+      fetchPlans();
+    } catch (err: any) {
+      toast.error("삭제 실패: " + (err.message || ""));
+    }
+  }, [finishedPlans, fetchPlans, confirm]);
+
+  // 반제품 자동 생성
+  const handleGenerateSemiSchedule = useCallback(async () => {
+    const planIds = finishedPlans.map((p) => p.id);
+    if (planIds.length === 0) {
+      toast.error("완제품 생산계획이 없습니다");
+      return;
+    }
+    setGenerating(true);
+    try {
+      const res = await generateSemiSchedule(planIds, {
+        considerStock: semiConsiderStock,
+        excludeUsed: semiExcludeUsed,
+      });
+      if (res.success) {
+        toast.success(`반제품 계획 ${res.data.count}건이 생성되었습니다`);
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("반제품 계획 생성 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [finishedPlans, semiConsiderStock, semiExcludeUsed, fetchPlans]);
+
+  // 스케줄 상세 모달 열기
+  const openScheduleDetail = useCallback((event: TimelineEvent) => {
+    const plan = event.data as ProductionPlan;
+    if (!plan) return;
+    setSelectedPlan(plan);
+    setModalQuantity(Number(plan.plan_qty));
+    setModalStartDate(plan.start_date?.split("T")[0] || "");
+    setModalEndDate(plan.end_date?.split("T")[0] || "");
+    setModalManager((plan as any).manager_name || "");
+    setModalWorkOrderNo((plan as any).work_order_no || "");
+    setModalRemarks(plan.remarks || "");
+    setModalEquipmentId((plan as any).equipment_code || (plan.equipment_id ? String(plan.equipment_id) : ""));
+    setScheduleModalOpen(true);
+  }, []);
+
+  const handleSavePlan = useCallback(async () => {
+    if (!selectedPlan) return;
+    setSaving(true);
+    try {
+      const res = await updatePlan(selectedPlan.id, {
+        plan_qty: modalQuantity,
+        start_date: modalStartDate,
+        end_date: modalEndDate,
+        manager_name: modalManager,
+        work_order_no: modalWorkOrderNo,
+        remarks: modalRemarks,
+        equipment_id: modalEquipmentId ? Number(modalEquipmentId) : null,
+      } as any);
+      if (res.success) {
+        toast.success("생산계획이 수정되었습니다");
+        setScheduleModalOpen(false);
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("수정 실패: " + (err.message || ""));
+    } finally {
+      setSaving(false);
+    }
+  }, [selectedPlan, modalQuantity, modalStartDate, modalEndDate, modalManager, modalWorkOrderNo, modalRemarks, modalEquipmentId, fetchPlans]);
+
+  const handleDeletePlan = useCallback(async () => {
+    if (!selectedPlan) return;
+    const ok = await confirm("이 생산계획을 삭제하시겠습니까?", {
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await deletePlan(selectedPlan.id);
+      toast.success("삭제되었습니다");
+      setScheduleModalOpen(false);
+      fetchPlans();
+    } catch (err: any) {
+      toast.error("삭제 실패: " + (err.message || ""));
+    }
+  }, [selectedPlan, fetchPlans, confirm]);
+
+  const handleSplitSchedule = useCallback(async (splitQty: number) => {
+    if (!selectedPlan || splitQty <= 0) return;
+    try {
+      const res = await splitSchedule(selectedPlan.id, splitQty);
+      if (res.success) {
+        toast.success("계획이 분할되었습니다");
+        setScheduleModalOpen(false);
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("분할 실패: " + (err.message || ""));
+    }
+  }, [selectedPlan, fetchPlans]);
+
+  // 병합 핸들러
+  const handleMergeSchedules = useCallback(async () => {
+    if (selectedPlanIds.size < 2) {
+      toast.error("2개 이상의 계획을 선택해주세요");
+      return;
+    }
+    const ok = await confirm(`${selectedPlanIds.size}건의 계획을 병합하시겠습니까?`, {
+      description: "동일 품목의 계획이 하나로 병합됩니다.",
+      confirmText: "병합",
+    });
+    if (!ok) return;
+
+    try {
+      const ids = Array.from(selectedPlanIds);
+      const productType = rightTab === "finished" ? "완제품" : "반제품";
+      const res = await mergeSchedules(ids, productType);
+      if (res.success) {
+        toast.success("계획이 병합되었습니다");
+        setSelectedPlanIds(new Set());
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("병합 실패: " + (err.message || ""));
+    }
+  }, [selectedPlanIds, rightTab, fetchPlans, confirm]);
+
+  // 타임라인 이벤트 드래그 이동
+  const handleEventMove = useCallback(async (eventId: string | number, newStart: string, newEnd: string) => {
+    try {
+      const res = await updatePlan(Number(eventId), {
+        start_date: newStart,
+        end_date: newEnd,
+      } as any);
+      if (res.success) {
+        toast.success("일정이 변경되었습니다");
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("일정 변경 실패: " + (err.message || ""));
+    }
+  }, [fetchPlans]);
+
+  // 타임라인 이벤트 리사이즈
+  const handleEventResize = useCallback(async (eventId: string | number, newStart: string, newEnd: string) => {
+    try {
+      const res = await updatePlan(Number(eventId), {
+        start_date: newStart,
+        end_date: newEnd,
+      } as any);
+      if (res.success) {
+        toast.success("기간이 변경되었습니다");
+        fetchPlans();
+      }
+    } catch (err: any) {
+      toast.error("기간 변경 실패: " + (err.message || ""));
+    }
+  }, [fetchPlans]);
+
+  // 불러오기 처리
+  const handleImportOrderItems = useCallback(async () => {
+    if (selectedItemGroups.size === 0) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+    const items = orderItems
+      .filter((item) => selectedItemGroups.has(item.item_code))
+      .map((item) => ({
+        item_code: item.item_code,
+        item_name: item.item_name,
+        required_qty: (importMode !== "new" && recalculateUnstarted)
+          ? Number(item.total_balance_qty || 0) - Number(item.in_progress_qty || 0)
+          : Number(item.required_plan_qty),
+        earliest_due_date: item.earliest_due_date || new Date().toISOString().split("T")[0],
+      }))
+      .filter((item) => item.required_qty > 0);
+
+    setGenerating(true);
+    try {
+      const res = await generateSchedule({
+        items,
+        options: {
+          safety_lead_time: 0,
+          recalculate_unstarted: importMode === "new" ? false : recalculateUnstarted,
+          product_type: "완제품",
+        },
+      });
+      if (res.success) {
+        toast.success("품목을 불러왔습니다");
+        setOrderImportModalOpen(false);
+        fetchPlans();
+        fetchOrderSummary();
+      }
+    } catch (err: any) {
+      toast.error("불러오기 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [selectedItemGroups, orderItems, importMode, recalculateUnstarted, fetchPlans, fetchOrderSummary]);
+
+  const handleImportStockItems = useCallback(async () => {
+    if (selectedStockItems.size === 0) {
+      toast.error("품목을 선택해주세요");
+      return;
+    }
+    const items = stockItems
+      .filter((item) => selectedStockItems.has(item.item_code))
+      .map((item) => ({
+        item_code: item.item_code,
+        item_name: item.item_name,
+        required_qty: Number(item.recommended_qty),
+        earliest_due_date: new Date().toISOString().split("T")[0],
+      }));
+
+    setGenerating(true);
+    try {
+      const res = await generateSchedule({
+        items,
+        options: {
+          safety_lead_time: 0,
+          recalculate_unstarted: importMode === "new" ? false : true,
+          product_type: "완제품",
+        },
+      });
+      if (res.success) {
+        toast.success("안전재고 부족 품목을 불러왔습니다");
+        setStockImportModalOpen(false);
+        fetchPlans();
+        fetchStockShortage();
+      }
+    } catch (err: any) {
+      toast.error("불러오기 실패: " + (err.message || ""));
+    } finally {
+      setGenerating(false);
+    }
+  }, [selectedStockItems, stockItems, importMode, fetchPlans, fetchStockShortage]);
+
+  // 엑셀 다운로드
+  const handleExcelDownload = useCallback(async () => {
+    const plans = rightTab === "finished" ? finishedPlans : semiPlans;
+    if (plans.length === 0) {
+      toast.error("다운로드할 데이터가 없습니다");
+      return;
+    }
+    const data = plans.map((p) => ({
+      계획번호: p.plan_no || "",
+      품목코드: p.item_code,
+      품목명: p.item_name,
+      제품구분: p.product_type,
+      수량: Number(p.plan_qty),
+      완료수량: Number(p.completed_qty),
+      진행률: `${p.progress_rate || 0}%`,
+      시작일: p.start_date?.split("T")[0] || "",
+      종료일: p.end_date?.split("T")[0] || "",
+      납기일: p.due_date?.split("T")[0] || "",
+      상태: STATUS_LABEL[p.status] || p.status,
+      설비: p.equipment_name || "",
+      비고: p.remarks || "",
+    }));
+    const type = rightTab === "finished" ? "완제품" : "반제품";
+    await exportToExcel(data, `생산계획_${type}.xlsx`, `${type} 생산계획`);
+    toast.success("엑셀 다운로드 완료");
+  }, [rightTab, finishedPlans, semiPlans]);
+
+  // 좌측 테이블 엑셀 다운로드
+  const handleLeftExcelDownload = useCallback(async () => {
+    if (leftTab === "order") {
+      if (orderItems.length === 0) { toast.error("데이터가 없습니다"); return; }
+      const data = orderItems.map((i) => ({
+        품목코드: i.item_code,
+        품목명: i.item_name,
+        총수주량: Number(i.total_order_qty),
+        출고량: Number(i.total_ship_qty),
+        잔량: Number(i.total_balance_qty),
+        현재고: Number(i.current_stock),
+        안전재고: Number(i.safety_stock),
+        기생산계획량: Number(i.existing_plan_qty),
+        생산진행: Number(i.in_progress_qty),
+        필요생산계획: Number(i.required_plan_qty),
+        "리드타임(일)": Number(i.lead_time) || 0,
+      }));
+      await exportToExcel(data, "수주데이터.xlsx", "수주데이터");
+    } else {
+      if (stockItems.length === 0) { toast.error("데이터가 없습니다"); return; }
+      const data = stockItems.map((s) => ({
+        품목코드: s.item_code,
+        품목명: s.item_name,
+        현재고: Number(s.current_qty),
+        안전재고: Number(s.safety_qty),
+        부족수량: Number(s.shortage_qty),
+        권장생산량: Number(s.recommended_qty),
+        최종입고일: s.last_in_date || "",
+      }));
+      await exportToExcel(data, "안전재고부족분.xlsx", "안전재고 부족분");
+    }
+    toast.success("엑셀 다운로드 완료");
+  }, [leftTab, orderItems, stockItems]);
+
+  // 숫자 포맷
+  const formatNumber = (num: number | string) => Number(num).toLocaleString();
+
+  // (컬럼 표시는 ts.visibleColumns 순서를 따름)
+
+  return (
+    <div className={cn("flex flex-col gap-3", isFullscreen ? "fixed inset-0 z-50 bg-background p-4" : "h-full p-3")}>
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>생산관리</span>
+        <span className="text-muted-foreground/50">/</span>
+        <span className="font-medium text-foreground">생산계획</span>
+      </nav>
+
+      {/* 상단 바 */}
+      <DynamicSearchFilter
+        tableName="sales_order_mng"
+        filterId="c16-plan-management"
+        onFilterChange={handleSearchFilterChange}
+        externalFilterConfig={ts.filterConfig}
+        extraActions={
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" className="text-success border-success/30 hover:bg-success/10" onClick={() => setExcelUploadOpen(true)}>
+              <Upload className="mr-1.5 h-4 w-4" />
+              엑셀업로드
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+              <Download className="mr-1.5 h-4 w-4" />
+              엑셀다운로드
+            </Button>
+            <Button variant="ghost" size="sm" onClick={() => setIsFullscreen((p) => !p)}>
+              {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+            </Button>
+          </div>
+        }
+      />
+
+      {/* 데이터 섹션 */}
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg">
+        {/* 왼쪽 패널 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <Tabs value={leftTab} onValueChange={setLeftTab} className="flex h-full flex-col">
+              <div className="shrink-0 border-b bg-muted/30 px-5">
+                <TabsList className="h-11 bg-transparent gap-1">
+                  <TabsTrigger value="order" className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 text-sm">
+                    <ClipboardList className="mr-1.5 h-4 w-4" />
+                    수주데이터
+                  </TabsTrigger>
+                  <TabsTrigger value="stock" className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 text-sm">
+                    <AlertTriangle className="mr-1.5 h-4 w-4" />
+                    안전재고 부족분
+                  </TabsTrigger>
+                </TabsList>
+              </div>
+
+              {/* 수주데이터 탭 */}
+              <TabsContent value="order" className="flex-1 overflow-hidden mt-0 flex flex-col">
+                <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
+                  <span className="text-base font-semibold">수주 목록</span>
+                  <div className="flex items-center gap-2">
+                    <label className="flex items-center gap-1.5 rounded-md border border-primary/20 bg-primary/5 px-3 py-1.5 text-xs cursor-pointer">
+                      <Checkbox
+                        checked={filterUnplannedOrdersOnly}
+                        onCheckedChange={(c) => {
+                          setFilterUnplannedOrdersOnly(!!c);
+                          setTimeout(fetchOrderSummary, 0);
+                        }}
+                        className="h-4 w-4"
+                      />
+                      <span className="font-medium text-foreground">계획에 없는 품목만</span>
+                    </label>
+                    <Button size="sm" variant="outline" className="text-success border-success/30 hover:bg-success/10" onClick={() => setOrderImportModalOpen(true)}>
+                      <Download className="mr-1 h-3.5 w-3.5" />
+                      불러오기
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={handleLeftExcelDownload}>
+                      <Download className="mr-1 h-3.5 w-3.5" />
+                      엑셀
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={fetchOrderSummary} disabled={loadingOrders}>
+                      {loadingOrders ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                      새로고침
+                    </Button>
+                    <Button size="sm" variant="ghost" onClick={() => ts.setOpen(true)}>
+                      <Settings2 className="h-3.5 w-3.5" />
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex-1 overflow-auto p-4">
+                  {loadingOrders ? (
+                    <div className="flex items-center justify-center py-16">
+                      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                    </div>
+                  ) : orderItems.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+                      <ClipboardList className="h-12 w-12 mb-3 opacity-50" />
+                      <p className="text-base font-medium mb-2">수주 데이터가 없습니다</p>
+                    </div>
+                  ) : (
+                    <div className="overflow-x-auto rounded-md border">
+                      {(() => {
+                        // 디테일 행에서 개별 값을 표시하는 컬럼 매핑
+                        const DETAIL_VALUE_MAP: Record<string, string> = {
+                          total_order_qty: "order_qty",
+                          total_ship_qty: "ship_qty",
+                          total_balance_qty: "balance_qty",
+                        };
+
+                        // 그룹 행에서 특수 렌더링이 필요한 컬럼
+                        const renderGroupCell = (col: { key: string }, item: any) => {
+                          if (col.key === "required_plan_qty") {
+                            return (
+                              <TableCell key={col.key} style={ts.thStyle(col.key)} className={cn("text-[13px] text-right font-bold", Number(item.required_plan_qty) > 0 ? "text-destructive" : "text-success")} onClick={() => toggleItemExpand(item.item_code)}>
+                                {formatNumber(item.required_plan_qty)}
+                              </TableCell>
+                            );
+                          }
+                          if (col.key === "lead_time") {
+                            return (
+                              <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
+                                {Number(item.lead_time) > 0 ? `${item.lead_time}일` : "-"}
+                              </TableCell>
+                            );
+                          }
+                          return (
+                            <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right text-primary" onClick={() => toggleItemExpand(item.item_code)}>
+                              {formatNumber(item[col.key])}
+                            </TableCell>
+                          );
+                        };
+
+                        return (
+                      <Table style={{ tableLayout: "fixed" }}>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px]">
+                              <Checkbox checked={selectedItemGroups.size === orderItems.length && orderItems.length > 0} onCheckedChange={(c) => toggleAllItemGroups(!!c)} className="h-4 w-4" />
+                            </TableHead>
+                            <TableHead className="w-[40px]" />
+                            <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                            <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            {ts.visibleColumns.map((col) => (
+                              <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                                {col.label}
+                              </TableHead>
+                            ))}
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {ts.groupData(orderItems).map((item, rowIdx) => {
+                            if (item._isGroupSummary) {
+                              return (
+                                <TableRow key={`summary-${rowIdx}`} className="bg-muted/60 font-semibold border-t border-primary/20">
+                                  <TableCell />
+                                  <TableCell />
+                                  <TableCell colSpan={2} />
+                                  {ts.visibleColumns.map((col) => {
+                                    const v = (item as any)[col.key];
+                                    return (
+                                    <TableCell key={col.key} style={ts.thStyle(col.key)} className={typeof v === "number" ? "text-right font-mono text-[13px]" : "text-[13px] text-primary"}>
+                                      {typeof v === "number" ? Number(v).toLocaleString() : (v || "")}
+                                    </TableCell>
+                                    );
+                                  })}
+                                </TableRow>
+                              );
+                            }
+                            return (
+                            <React.Fragment key={item.item_code || rowIdx}>
+                              <TableRow className={cn("cursor-pointer border-t-2 border-t-primary/30 bg-primary/5 font-semibold hover:bg-primary/10", selectedItemGroups.has(item.item_code) && "bg-primary/10")}>
+                                <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+                                  <Checkbox checked={selectedItemGroups.has(item.item_code)} onCheckedChange={() => toggleItemGroupSelect(item.item_code)} className="h-4 w-4" />
+                                </TableCell>
+                                <TableCell className="text-center" onClick={() => toggleItemExpand(item.item_code)}>
+                                  <ChevronRight className={cn("h-4 w-4 transition-transform duration-200", expandedItems.has(item.item_code) && "rotate-90")} />
+                                </TableCell>
+                                <TableCell style={{ width: "140px", minWidth: "140px" }} className="text-[13px] text-primary truncate" onClick={() => toggleItemExpand(item.item_code)}>{item.item_code}</TableCell>
+                                <TableCell style={{ width: "140px", minWidth: "140px" }} className="text-[13px] text-primary truncate" onClick={() => toggleItemExpand(item.item_code)}>{item.item_name}</TableCell>
+                                {ts.visibleColumns.map((col) => renderGroupCell(col, item))}
+                              </TableRow>
+                              {expandedItems.has(item.item_code) && item.orders?.map((detail: any) => {
+                                let remainColSpan = 0;
+                                for (const col of ts.visibleColumns) {
+                                  if (!DETAIL_VALUE_MAP[col.key]) remainColSpan++;
+                                }
+                                return (
+                                <TableRow key={detail.id || detail.order_no} className="cursor-pointer hover:bg-muted/50">
+                                  <TableCell />
+                                  <TableCell />
+                                  <TableCell colSpan={2} className="pl-10">
+                                    <div className="flex items-center gap-2 text-xs">
+                                      <span className="text-muted-foreground">수주번호:</span>
+                                      <span className="font-medium">{detail.order_no}</span>
+                                      <span className="text-muted-foreground">거래처:</span>
+                                      <span>{detail.customer_name || "-"}</span>
+                                      <Badge variant="secondary" className="text-[10px] px-2 py-0">
+                                        {detail.status || "일반"}
+                                      </Badge>
+                                    </div>
+                                  </TableCell>
+                                  {ts.visibleColumns.map((col) => {
+                                    const detailKey = DETAIL_VALUE_MAP[col.key];
+                                    if (detailKey) {
+                                      return <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] text-right">{formatNumber(detail[detailKey])}</TableCell>;
+                                    }
+                                    return null;
+                                  })}
+                                  {remainColSpan > 0 && (
+                                    <TableCell colSpan={remainColSpan} className="text-[13px] text-muted-foreground">
+                                      납기일: {detail.due_date || "-"}
+                                    </TableCell>
+                                  )}
+                                </TableRow>
+                                );
+                              })}
+                            </React.Fragment>
+                            );
+                          })}
+                        </TableBody>
+                      </Table>
+                        );
+                      })()}
+                    </div>
+                  )}
+                </div>
+              </TabsContent>
+
+              {/* 안전재고 부족분 탭 */}
+              <TabsContent value="stock" className="flex-1 overflow-hidden mt-0 flex flex-col">
+                <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
+                  <span className="text-base font-semibold">안전재고 부족 품목</span>
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" variant="outline" className="text-success border-success/30 hover:bg-success/10" onClick={() => setStockImportModalOpen(true)}>
+                      <Download className="mr-1 h-3.5 w-3.5" />
+                      불러오기
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={handleLeftExcelDownload}>
+                      <Download className="mr-1 h-3.5 w-3.5" />
+                      엑셀
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={fetchStockShortage} disabled={loadingStock}>
+                      {loadingStock ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                      새로고침
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex-1 overflow-auto p-4">
+                  {loadingStock ? (
+                    <div className="flex items-center justify-center py-16">
+                      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                    </div>
+                  ) : stockItems.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+                      <AlertTriangle className="h-12 w-12 mb-3 opacity-50" />
+                      <p className="text-base font-medium mb-2">안전재고 부족 품목이 없습니다</p>
+                    </div>
+                  ) : (
+                    <div className="overflow-x-auto rounded-md border">
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[30px]">
+                              <Checkbox checked={selectedStockItems.size === stockItems.length && stockItems.length > 0} onCheckedChange={(c) => toggleAllStockItems(!!c)} className="h-4 w-4" />
+                            </TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">현재고</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">안전재고</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부족수량</TableHead>
+                            <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">권장생산량</TableHead>
+                            <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최종입고일</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {stockItems.map((stock) => (
+                            <TableRow key={stock.item_code} className="cursor-pointer hover:bg-muted/50">
+                              <TableCell>
+                                <Checkbox checked={selectedStockItems.has(stock.item_code)} onCheckedChange={() => toggleStockItem(stock.item_code)} className="h-4 w-4" />
+                              </TableCell>
+                              <TableCell className="text-[13px]">{stock.item_code}</TableCell>
+                              <TableCell className="text-[13px]">{stock.item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right">{formatNumber(stock.current_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right">{formatNumber(stock.safety_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold text-destructive">{formatNumber(stock.shortage_qty)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold text-success">{formatNumber(stock.recommended_qty)}</TableCell>
+                              <TableCell className="text-[13px]">{stock.last_in_date || "-"}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  )}
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 오른쪽 패널 — 타임라인 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <div className="flex h-full flex-col rounded-lg border bg-card">
+            <Tabs value={rightTab} onValueChange={setRightTab} className="flex h-full flex-col">
+              <div className="shrink-0 border-b bg-muted/30 px-5">
+                <TabsList className="h-11 bg-transparent gap-1">
+                  <TabsTrigger value="finished" className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 text-sm">
+                    <Package className="mr-1.5 h-4 w-4" />
+                    완제품 생산계획
+                  </TabsTrigger>
+                  <TabsTrigger value="semi" className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 text-sm">
+                    <Wrench className="mr-1.5 h-4 w-4" />
+                    반제품 생산계획
+                  </TabsTrigger>
+                </TabsList>
+              </div>
+
+              {/* 완제품 생산계획 */}
+              <TabsContent value="finished" className="flex-1 overflow-hidden mt-0 flex flex-col">
+                <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
+                  <span className="text-base font-semibold flex items-center gap-1.5">
+                    <Calendar className="h-4 w-4" />
+                    완제품 생산 타임라인
+                    <Badge variant="outline" className="ml-2">{finishedPlans.length}건</Badge>
+                  </span>
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" variant="outline" onClick={fetchPlans} disabled={loadingPlans}>
+                      {loadingPlans ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                      새로고침
+                    </Button>
+                    {selectedPlanIds.size >= 2 && (
+                      <Button size="sm" variant="outline" onClick={handleMergeSchedules}>
+                        <Merge className="mr-1 h-3.5 w-3.5" />
+                        병합 ({selectedPlanIds.size})
+                      </Button>
+                    )}
+                    <Button size="sm" onClick={handleGenerateSchedule} disabled={generating || selectedItemGroups.size === 0}>
+                      {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Zap className="mr-1 h-3.5 w-3.5" />}
+                      자동 스케줄 생성
+                    </Button>
+                    <Button size="sm" variant="ghost" className="text-destructive" onClick={handleClearTimeline}>
+                      <Trash2 className="mr-1 h-3.5 w-3.5" />
+                      초기화
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex-1 overflow-auto p-4">
+                  {/* 옵션 */}
+                  <div className="rounded-lg border bg-muted/30 p-3 mb-4">
+                    <div className="flex items-center gap-4 flex-wrap">
+                      <div className="flex items-center gap-1.5">
+                        <Checkbox checked={recalculateUnstarted} onCheckedChange={(c) => setRecalculateUnstarted(!!c)} className="h-4 w-4" />
+                        <Label className="text-xs cursor-pointer">미진행 계획 재계산</Label>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 타임라인 */}
+                  <TimelineScheduler
+                    resources={finishedResources}
+                    events={finishedEvents}
+                    zoomLevel={finishedZoom}
+                    onZoomChange={setFinishedZoom}
+                    statusColors={STATUS_COLORS}
+                    showProgress
+                    showMilestones
+                    showTodayLine
+                    showLegend
+                    conflictDetection
+                    loading={loadingPlans}
+                    emptyMessage="생산 스케줄이 없습니다"
+                    emptyIcon={<Package className="h-12 w-12 mb-3 opacity-50" />}
+                    onEventClick={openScheduleDetail}
+                    onEventMove={handleEventMove}
+                    onEventResize={handleEventResize}
+                  />
+                </div>
+              </TabsContent>
+
+              {/* 반제품 생산계획 */}
+              <TabsContent value="semi" className="flex-1 overflow-hidden mt-0 flex flex-col">
+                <div className="flex items-center justify-between border-b bg-muted/20 px-5 py-3">
+                  <span className="text-base font-semibold flex items-center gap-1.5">
+                    <Wrench className="h-4 w-4" />
+                    반제품 생산 타임라인
+                    <Badge variant="outline" className="ml-2">{semiPlans.length}건</Badge>
+                  </span>
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" variant="outline" onClick={fetchPlans} disabled={loadingPlans}>
+                      {loadingPlans ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="mr-1 h-3.5 w-3.5" />}
+                      새로고침
+                    </Button>
+                    <Button size="sm" onClick={handleGenerateSemiSchedule} disabled={generating}>
+                      {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Zap className="mr-1 h-3.5 w-3.5" />}
+                      반제품 계획 자동 생성
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex-1 overflow-auto p-4">
+                  <div className="flex gap-3 mb-4">
+                    <div className="flex-1 rounded-lg border border-primary/20 bg-primary/5 p-4">
+                      <p className="font-semibold text-foreground text-sm mb-3">반제품 계획 생성 옵션</p>
+                      <div className="flex flex-col gap-2">
+                        <label className="flex items-center gap-1.5 cursor-pointer text-xs">
+                          <Checkbox checked={semiConsiderStock} onCheckedChange={(c) => setSemiConsiderStock(!!c)} className="h-4 w-4" />
+                          <span className="font-medium">현재고 및 안전재고 감안</span>
+                        </label>
+                        <label className="flex items-center gap-1.5 cursor-pointer text-xs">
+                          <Checkbox checked={semiRecalculate} onCheckedChange={(c) => setSemiRecalculate(!!c)} className="h-4 w-4" />
+                          <span className="font-medium">진행중인 계획 유지하고 재계산</span>
+                        </label>
+                        <label className="flex items-center gap-1.5 cursor-pointer text-xs">
+                          <Checkbox checked={semiExcludeUsed} onCheckedChange={(c) => setSemiExcludeUsed(!!c)} className="h-4 w-4" />
+                          <span className="font-medium">투입 완료된 반제품 제외</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex-1 rounded-lg border border-warning/20 bg-warning/5 p-4">
+                      <p className="font-semibold text-foreground text-sm mb-2">반제품 계획 안내</p>
+                      <ul className="text-xs text-foreground space-y-1 leading-relaxed">
+                        <li>완제품 생산계획 기준으로 필요한 반제품 계획 자동 생성</li>
+                        <li>모품목 생산 시작일 고려하여 납기일 설정</li>
+                        <li>BOM(자재명세서) 정보 기반 필요 수량 계산</li>
+                      </ul>
+                    </div>
+                  </div>
+
+                  {/* 반제품 타임라인 */}
+                  <TimelineScheduler
+                    resources={semiResources}
+                    events={semiEvents}
+                    zoomLevel={semiZoom}
+                    onZoomChange={setSemiZoom}
+                    statusColors={STATUS_COLORS}
+                    showProgress
+                    showTodayLine
+                    showLegend
+                    conflictDetection
+                    loading={loadingPlans}
+                    emptyMessage="반제품 생산 스케줄이 없습니다"
+                    emptyIcon={<Wrench className="h-12 w-12 mb-3 opacity-50" />}
+                    onEventClick={openScheduleDetail}
+                    onEventMove={handleEventMove}
+                    onEventResize={handleEventResize}
+                  />
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ========== 모달들 ========== */}
+
+      {/* 스케줄 상세/편집 모달 */}
+      <Dialog open={scheduleModalOpen} onOpenChange={setScheduleModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[650px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg flex items-center gap-2">
+              <ClipboardList className="h-5 w-5" />
+              생산 스케줄 상세
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              생산 스케줄의 상세 정보를 확인하고 수정할 수 있습니다
+            </DialogDescription>
+          </DialogHeader>
+
+          {selectedPlan && (
+            <div className="space-y-4">
+              <div>
+                <p className="text-sm font-semibold mb-3 pb-2 border-b">기본 정보</p>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs">품목코드</Label>
+                    <Input value={selectedPlan.item_code} readOnly className="h-9 text-xs bg-muted/50" />
+                  </div>
+                  <div>
+                    <Label className="text-xs">품목명</Label>
+                    <Input value={selectedPlan.item_name || ""} readOnly className="h-9 text-xs bg-muted/50" />
+                  </div>
+                  <div>
+                    <Label className="text-xs">계획번호</Label>
+                    <Input value={selectedPlan.plan_no || ""} readOnly className="h-9 text-xs bg-muted/50" />
+                  </div>
+                  <div>
+                    <Label className="text-xs">상태</Label>
+                    <Badge variant="secondary" className="mt-1">
+                      {STATUS_LABEL[selectedPlan.status] || selectedPlan.status}
+                    </Badge>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <p className="text-sm font-semibold mb-3 pb-2 border-b">생산 정보</p>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs">총 생산수량</Label>
+                    <Input type="number" value={modalQuantity} onChange={(e) => setModalQuantity(Number(e.target.value))} className="h-9 text-xs" min={0} />
+                  </div>
+                  <div>
+                    <Label className="text-xs">설비</Label>
+                    <Select value={modalEquipmentId} onValueChange={setModalEquipmentId}>
+                      <SelectTrigger className="h-9 text-xs">
+                        <SelectValue placeholder="설비 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">미지정</SelectItem>
+                        {equipmentList.map((eq) => (
+                          <SelectItem key={eq.id} value={eq.equipment_code || eq.id}>
+                            {eq.equipment_name} ({eq.equipment_code})
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <div className="mt-3 rounded-lg border border-success/20 bg-success/5 p-3">
+                  <p className="text-xs font-semibold text-foreground mb-2">계획 기간 설정</p>
+                  <div className="grid grid-cols-3 gap-3">
+                    <div>
+                      <Label className="text-[11px] text-muted-foreground">시작일</Label>
+                      <Input type="date" value={modalStartDate} onChange={(e) => setModalStartDate(e.target.value)} className="h-9 text-xs" />
+                    </div>
+                    <div>
+                      <Label className="text-[11px] text-muted-foreground">종료일</Label>
+                      <Input type="date" value={modalEndDate} onChange={(e) => setModalEndDate(e.target.value)} className="h-9 text-xs" />
+                    </div>
+                    <div>
+                      <Label className="text-[11px] text-muted-foreground">생산 기간</Label>
+                      <div className="flex h-9 items-center justify-center rounded-md border bg-muted/50 text-xs font-semibold text-primary">
+                        {modalStartDate && modalEndDate
+                          ? `${Math.ceil((new Date(modalEndDate).getTime() - new Date(modalStartDate).getTime()) / (1000 * 60 * 60 * 24) + 1)}일`
+                          : "-"}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="rounded-lg border border-warning/20 bg-warning/5 p-4">
+                <div className="flex items-center justify-between mb-2">
+                  <p className="text-sm font-semibold flex items-center gap-1.5">
+                    <Scissors className="h-4 w-4" />
+                    계획 분할
+                  </p>
+                  <Button
+                    size="sm"
+                    variant="warning"
+                    className="h-7 text-xs"
+                    onClick={() => {
+                      const qty = Math.floor(modalQuantity / 2);
+                      if (qty > 0) handleSplitSchedule(qty);
+                    }}
+                  >
+                    2분할
+                  </Button>
+                </div>
+                <p className="text-xs text-foreground">하나의 생산계획을 여러 개로 분할합니다.</p>
+              </div>
+
+              <div>
+                <p className="text-sm font-semibold mb-3 pb-2 border-b">추가 정보</p>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs">담당자</Label>
+                    <Input value={modalManager} onChange={(e) => setModalManager(e.target.value)} className="h-9 text-xs" placeholder="담당자명" />
+                  </div>
+                  <div>
+                    <Label className="text-xs">작업지시번호</Label>
+                    <Input value={modalWorkOrderNo} onChange={(e) => setModalWorkOrderNo(e.target.value)} className="h-9 text-xs" placeholder="자동생성" />
+                  </div>
+                  <div className="col-span-2">
+                    <Label className="text-xs">비고</Label>
+                    <Input value={modalRemarks} onChange={(e) => setModalRemarks(e.target.value)} className="h-9 text-xs" placeholder="비고사항 입력" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={handleDeletePlan} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10">
+              <Trash2 className="mr-1 h-3.5 w-3.5" />
+              삭제
+            </Button>
+            <Button variant="outline" onClick={() => setScheduleModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              취소
+            </Button>
+            <Button onClick={handleSavePlan} disabled={saving} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {saving ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Save className="mr-1 h-3.5 w-3.5" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 수주 불러오기 모달 */}
+      <Dialog open={orderImportModalOpen} onOpenChange={setOrderImportModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">신규 수주 품목 불러오기</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">선택한 수주 품목을 생산계획에 추가합니다</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
+                <ClipboardList className="h-4 w-4" />
+                선택된 품목
+              </p>
+              <div className="space-y-2 max-h-[200px] overflow-y-auto">
+                {selectedItemGroups.size > 0
+                  ? Array.from(selectedItemGroups).map((code) => {
+                      const item = orderItems.find((i) => i.item_code === code);
+                      if (!item) return null;
+                      const hasExistingPlan = Number(item.existing_plan_qty) > 0;
+                      return (
+                        <div key={code} className="rounded-lg border bg-muted/30 p-3">
+                          <div className="flex items-center justify-between mb-1">
+                            <span className="text-sm font-semibold">{item.item_code} - {item.item_name}</span>
+                            {hasExistingPlan && <Badge variant="secondary" className="text-[10px]">가계획완료</Badge>}
+                          </div>
+                          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                            <span>수주: {item.order_count}건</span>
+                            <span className="text-border">|</span>
+                            <span>잔량: {formatNumber(item.total_balance_qty)} EA</span>
+                            <span className="text-border">|</span>
+                            <span>재고: {formatNumber(item.current_stock)} EA</span>
+                            <span className="text-border">|</span>
+                            <span>필요수량: <span className={Number(item.required_plan_qty) > 0 ? "text-destructive font-semibold" : ""}>{formatNumber(item.required_plan_qty)} EA</span></span>
+                          </div>
+                        </div>
+                      );
+                    })
+                  : <p className="text-xs text-muted-foreground p-3 text-center">선택된 품목이 없습니다.</p>}
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-warning/20 bg-warning/5 p-3">
+              <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
+                <AlertTriangle className="h-4 w-4 text-warning" />
+                주의사항
+              </p>
+              <ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside leading-relaxed">
+                <li>기존 계획에 추가 시 새로운 수주의 납기를 기준으로 종료일이 조정됩니다.</li>
+                <li>기존 계획이 없으면 새 계획이 자동 생성됩니다.</li>
+                <li>수주정보(수주번호)가 있으면 관련 정보가 연결됩니다.</li>
+                <li>수량이 0이거나 음수인 품목은 건너뜁니다.</li>
+              </ul>
+            </div>
+
+            <div>
+              <p className="font-semibold text-sm mb-2">계획 추가 방식을 선택하세요</p>
+              <div className="grid gap-3">
+                <label className={cn("flex items-center rounded-lg border-2 p-4 cursor-pointer transition-all", importMode === "add" ? "border-primary bg-primary/5" : "border-border hover:border-primary/50")} onClick={() => setImportMode("add")}>
+                  <input type="radio" name="importMode" value="add" checked={importMode === "add"} onChange={() => setImportMode("add")} className="mr-3 h-4 w-4" />
+                  <div>
+                    <p className="font-semibold text-sm">+ 기존 계획에 추가</p>
+                    <p className="text-xs text-muted-foreground">같은 품목의 기존 계획에 수주 건만을 추가하거나 수량을 합산합니다.</p>
+                  </div>
+                </label>
+                <label className={cn("flex items-center rounded-lg border-2 p-4 cursor-pointer transition-all", importMode === "new" ? "border-primary bg-primary/5" : "border-border hover:border-primary/50")} onClick={() => setImportMode("new")}>
+                  <input type="radio" name="importMode" value="new" checked={importMode === "new"} onChange={() => setImportMode("new")} className="mr-3 h-4 w-4" />
+                  <div>
+                    <p className="font-semibold text-sm">별도 계획으로 생성</p>
+                    <p className="text-xs text-muted-foreground">이전 수량/일정 무시하고 생산계획을 생성합니다.</p>
+                  </div>
+                </label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setOrderImportModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
+            <Button onClick={handleImportOrderItems} disabled={generating || selectedItemGroups.size === 0} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Download className="mr-1 h-3.5 w-3.5" />}
+              불러오기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 안전재고 불러오기 모달 */}
+      <Dialog open={stockImportModalOpen} onOpenChange={setStockImportModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">안전재고 부족 품목 불러오기</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">선택한 안전재고 부족 품목을 생산계획에 추가합니다</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
+                <AlertTriangle className="h-4 w-4" />
+                선택된 품목
+              </p>
+              <div className="space-y-2 max-h-[200px] overflow-y-auto">
+                {selectedStockItems.size > 0
+                  ? Array.from(selectedStockItems).map((code) => {
+                      const stock = stockItems.find((s) => s.item_code === code);
+                      if (!stock) return null;
+                      return (
+                        <div key={code} className="rounded-lg border bg-muted/30 p-3">
+                          <div className="flex items-center justify-between mb-1">
+                            <span className="text-sm font-semibold">{stock.item_code} - {stock.item_name}</span>
+                            <Badge variant="destructive" className="text-[10px]">재고부족</Badge>
+                          </div>
+                          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                            <span>현재고: {formatNumber(stock.current_qty)} EA</span>
+                            <span className="text-border">|</span>
+                            <span>안전재고: {formatNumber(stock.safety_qty)} EA</span>
+                            <span className="text-border">|</span>
+                            <span>권장생산: <span className="text-destructive font-semibold">{formatNumber(stock.recommended_qty)} EA</span></span>
+                          </div>
+                        </div>
+                      );
+                    })
+                  : <p className="text-xs text-muted-foreground p-3 text-center">선택된 품목이 없습니다.</p>}
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-warning/20 bg-warning/5 p-3">
+              <p className="font-semibold text-sm mb-2 flex items-center gap-1.5">
+                <AlertTriangle className="h-4 w-4 text-warning" />
+                주의사항
+              </p>
+              <ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside leading-relaxed">
+                <li>안전재고 기준으로 부족분만큼 생산계획을 생성합니다.</li>
+                <li>현재 재고와 안전재고 차이를 기반으로 수량이 산정됩니다.</li>
+                <li>기존 계획이 있는 품목은 추가 방식에 따라 합산 또는 별도 생성됩니다.</li>
+              </ul>
+            </div>
+
+            <div>
+              <p className="font-semibold text-sm mb-2">계획 추가 방식을 선택하세요</p>
+              <div className="grid gap-3">
+                <label className={cn("flex items-center rounded-lg border-2 p-4 cursor-pointer transition-all", importMode === "add" ? "border-primary bg-primary/5" : "border-border hover:border-primary/50")} onClick={() => setImportMode("add")}>
+                  <input type="radio" name="stockImportMode" value="add" checked={importMode === "add"} onChange={() => setImportMode("add")} className="mr-3 h-4 w-4" />
+                  <div>
+                    <p className="font-semibold text-sm">+ 기존 계획에 추가</p>
+                    <p className="text-xs text-muted-foreground">같은 품목의 기존 계획에 수량을 합산합니다.</p>
+                  </div>
+                </label>
+                <label className={cn("flex items-center rounded-lg border-2 p-4 cursor-pointer transition-all", importMode === "new" ? "border-primary bg-primary/5" : "border-border hover:border-primary/50")} onClick={() => setImportMode("new")}>
+                  <input type="radio" name="stockImportMode" value="new" checked={importMode === "new"} onChange={() => setImportMode("new")} className="mr-3 h-4 w-4" />
+                  <div>
+                    <p className="font-semibold text-sm">별도 계획으로 생성</p>
+                    <p className="text-xs text-muted-foreground">이전 수량/일정 무시하고 생산계획을 생성합니다.</p>
+                  </div>
+                </label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setStockImportModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
+            <Button onClick={handleImportStockItems} disabled={generating || selectedStockItems.size === 0} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <Download className="mr-1 h-3.5 w-3.5" />}
+              불러오기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 변경사항 확인(미리보기) 모달 */}
+      <Dialog open={changeConfirmModalOpen} onOpenChange={setChangeConfirmModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[800px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">생산계획 변경사항 확인</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">아래 변경사항을 검토하신 후 확인 버튼을 클릭하면 생산계획이 업데이트됩니다</DialogDescription>
+          </DialogHeader>
+
+          {previewData && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-4 gap-3">
+                <div className="rounded-lg border bg-primary/10 p-3 text-center">
+                  <p className="text-2xl font-bold text-foreground">{previewData.summary?.total ?? 0}</p>
+                  <p className="text-xs text-muted-foreground mt-1">총 계획</p>
+                </div>
+                <div className="rounded-lg border bg-success/10 p-3 text-center">
+                  <p className="text-2xl font-bold text-foreground">{previewData.summary?.new_count ?? 0}</p>
+                  <p className="text-xs text-muted-foreground mt-1">신규 생성</p>
+                </div>
+                <div className="rounded-lg border bg-warning/10 p-3 text-center">
+                  <p className="text-2xl font-bold text-foreground">{previewData.summary?.kept_count ?? 0}</p>
+                  <p className="text-xs text-muted-foreground mt-1">유지됨</p>
+                </div>
+                <div className="rounded-lg border bg-destructive/10 p-3 text-center">
+                  <p className="text-2xl font-bold text-foreground">{previewData.summary?.deleted_count ?? 0}</p>
+                  <p className="text-xs text-muted-foreground mt-1">삭제됨</p>
+                </div>
+              </div>
+
+              {(previewData.schedules?.length || 0) > 0 && (
+                <div>
+                  <p className="text-sm font-semibold mb-2 text-success flex items-center gap-1.5">
+                    <Zap className="h-4 w-4" />
+                    신규 생성 ({previewData.schedules?.length || 0}건)
+                  </p>
+                  <div className="rounded-md border border-success/20 overflow-x-auto">
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">시작일</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">종료일</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {(previewData.schedules || []).map((s: any, idx: number) => (
+                          <TableRow key={`new-${idx}`}>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty || s.required_qty)}</TableCell>
+                            <TableCell className="text-[13px]">{s.start_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.end_date?.split("T")[0]}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+              )}
+
+              {(previewData.deletedSchedules?.length || 0) > 0 && (
+                <div>
+                  <p className="text-sm font-semibold mb-2 text-destructive flex items-center gap-1.5">
+                    <Trash2 className="h-4 w-4" />
+                    삭제 예정 ({previewData.deletedSchedules?.length || 0}건)
+                  </p>
+                  <div className="rounded-md border border-destructive/20 overflow-x-auto">
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">시작일</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">종료일</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {(previewData.deletedSchedules || []).map((s: any, idx: number) => (
+                          <TableRow key={`del-${idx}`} className="text-destructive/80">
+                            <TableCell className="text-[13px]">{s.plan_no || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty)}</TableCell>
+                            <TableCell className="text-[13px]">{s.start_date?.split("T")[0]}</TableCell>
+                            <TableCell className="text-[13px]">{s.end_date?.split("T")[0]}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+              )}
+
+              {(previewData.keptSchedules?.length || 0) > 0 && (
+                <div>
+                  <p className="text-sm font-semibold mb-2 text-warning flex items-center gap-1.5">
+                    <Package className="h-4 w-4" />
+                    유지됨 ({previewData.keptSchedules?.length || 0}건)
+                  </p>
+                  <div className="rounded-md border border-warning/20 overflow-x-auto">
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                          <TableHead className="text-xs font-bold text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                          <TableHead className="text-xs font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {(previewData.keptSchedules || []).map((s: any, idx: number) => (
+                          <TableRow key={`kept-${idx}`}>
+                            <TableCell className="text-[13px]">{s.plan_no || "-"}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_code}</TableCell>
+                            <TableCell className="text-[13px]">{s.item_name}</TableCell>
+                            <TableCell className="text-[13px] text-right">{formatNumber(s.plan_qty)}</TableCell>
+                            <TableCell className="text-[13px]">
+                              <Badge variant="outline" className="text-[10px]">{STATUS_LABEL[s.status] || s.status}</Badge>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setChangeConfirmModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
+            <Button onClick={handleApplySchedule} disabled={generating} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {generating ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : null}
+              확인 및 적용
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 모달 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName="production_plan_mng"
+        onSuccess={() => {
+          fetchPlans();
+          fetchOrderSummary();
+        }}
+      />
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* ConfirmDialog 렌더 */}
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/production/process-info/ItemRoutingTab.tsx b/frontend/app/(main)/COMPANY_9/production/process-info/ItemRoutingTab.tsx
new file mode 100644
index 00000000..a5b136c2
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/production/process-info/ItemRoutingTab.tsx
@@ -0,0 +1,994 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { GitBranch, Loader2, PackagePlus, Pencil, Plus, Save, Search, Star, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  createRoutingVersion,
+  getProcessList,
+  getRegisteredItems,
+  getRoutingDetails,
+  getRoutingVersions,
+  registerItemsBatch,
+  saveRoutingDetails,
+  searchAllItems,
+  unregisterItem,
+  type ItemForRouting,
+  type ProcessMaster,
+  type RegisteredItem,
+  type RoutingDetail,
+  type RoutingVersion,
+} from "@/lib/api/processInfo";
+import { cn } from "@/lib/utils";
+
+function normalizeDefaultFlag(v: RoutingVersion): boolean {
+  const raw = v.is_default as unknown;
+  if (typeof raw === "boolean") return raw;
+  if (raw === "t" || raw === true || raw === "Y" || raw === "true") return true;
+  return false;
+}
+
+function sortDetailsBySeq(rows: RoutingDetail[]): RoutingDetail[] {
+  return [...rows].sort((a, b) => {
+    const na = parseInt(String(a.seq_no), 10) || 0;
+    const nb = parseInt(String(b.seq_no), 10) || 0;
+    return na - nb;
+  });
+}
+
+export function ItemRoutingTab() {
+  const [searchInput, setSearchInput] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [items, setItems] = useState<RegisteredItem[]>([]);
+  const [itemsLoading, setItemsLoading] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<RegisteredItem | null>(null);
+
+  const [versions, setVersions] = useState<RoutingVersion[]>([]);
+  const [versionsLoading, setVersionsLoading] = useState(false);
+  const [selectedVersionId, setSelectedVersionId] = useState<string | null>(null);
+
+  const [details, setDetails] = useState<RoutingDetail[]>([]);
+  const [detailsLoading, setDetailsLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const [selectedDetailIds, setSelectedDetailIds] = useState<Set<string>>(new Set());
+
+  const [processes, setProcesses] = useState<ProcessMaster[]>([]);
+  const [processesLoading, setProcessesLoading] = useState(false);
+
+  const [versionDialogOpen, setVersionDialogOpen] = useState(false);
+  const [versionName, setVersionName] = useState("");
+  const [versionDescription, setVersionDescription] = useState("");
+  const [versionIsDefault, setVersionIsDefault] = useState(false);
+  const [versionSubmitting, setVersionSubmitting] = useState(false);
+
+  const [detailDialogOpen, setDetailDialogOpen] = useState(false);
+  const [detailDialogMode, setDetailDialogMode] = useState<"add" | "edit">("add");
+  const [editingDetailId, setEditingDetailId] = useState<string | null>(null);
+  const [formProcessCode, setFormProcessCode] = useState("");
+  const [formSeqNo, setFormSeqNo] = useState("");
+  const [formRequired, setFormRequired] = useState("Y");
+  const [formFixedOrder, setFormFixedOrder] = useState("Y");
+  const [formWorkType, setFormWorkType] = useState("내부");
+  const [formStandardTime, setFormStandardTime] = useState("");
+  const [formOutsource, setFormOutsource] = useState("");
+  const [detailSubmitting, setDetailSubmitting] = useState(false);
+
+  const [registerDialogOpen, setRegisterDialogOpen] = useState(false);
+  const [registerSearch, setRegisterSearch] = useState("");
+  const [registerSearchDebounced, setRegisterSearchDebounced] = useState("");
+  const [registerItems, setRegisterItems] = useState<ItemForRouting[]>([]);
+  const [registerLoading, setRegisterLoading] = useState(false);
+  const [registerSelectedIds, setRegisterSelectedIds] = useState<Set<string>>(new Set());
+  const [registerSubmitting, setRegisterSubmitting] = useState(false);
+
+  useEffect(() => {
+    const t = window.setTimeout(() => setDebouncedSearch(searchInput.trim()), 300);
+    return () => window.clearTimeout(t);
+  }, [searchInput]);
+
+  useEffect(() => {
+    const t = window.setTimeout(() => setRegisterSearchDebounced(registerSearch.trim()), 300);
+    return () => window.clearTimeout(t);
+  }, [registerSearch]);
+
+  const loadItems = useCallback(async (search: string) => {
+    setItemsLoading(true);
+    try {
+      const res = await getRegisteredItems(search || undefined);
+      if (res.success && res.data) {
+        setItems(res.data);
+      } else {
+        toast.error(res.message || "품목 목록을 불러오지 못했어요");
+        setItems([]);
+      }
+    } finally {
+      setItemsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadItems(debouncedSearch);
+  }, [debouncedSearch, loadItems]);
+
+  const loadProcesses = useCallback(async () => {
+    setProcessesLoading(true);
+    try {
+      const procRes = await getProcessList({ useYn: "Y" });
+      if (!procRes.success || !procRes.data) {
+        toast.error(procRes.message || "공정 목록을 불러오지 못했어요");
+        setProcesses([]);
+        return;
+      }
+      setProcesses(procRes.data);
+    } finally {
+      setProcessesLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadProcesses();
+  }, [loadProcesses]);
+
+  const loadRegisterItems = useCallback(async (search: string) => {
+    setRegisterLoading(true);
+    try {
+      const res = await searchAllItems(search || undefined);
+      if (res.success && res.data) {
+        setRegisterItems(res.data);
+      } else {
+        setRegisterItems([]);
+      }
+    } finally {
+      setRegisterLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!registerDialogOpen) return;
+    void loadRegisterItems(registerSearchDebounced);
+  }, [registerSearchDebounced, registerDialogOpen, loadRegisterItems]);
+
+  const registeredItemCodes = useMemo(() => new Set(items.map((i) => i.item_code)), [items]);
+
+  const handleRegisterItems = async () => {
+    if (registerSelectedIds.size === 0) {
+      toast.error("등록할 품목을 선택해주세요");
+      return;
+    }
+    setRegisterSubmitting(true);
+    try {
+      const selected = registerItems.filter((ri) => registerSelectedIds.has(ri.id));
+      const batchItems = selected.map((item) => ({
+        itemId: item.id,
+        itemCode: item.item_number,
+      }));
+      const res = await registerItemsBatch(batchItems);
+      if (res.success) {
+        toast.success(`${batchItems.length}건 품목이 등록되었어요`);
+        setRegisterDialogOpen(false);
+        setRegisterSearch("");
+        setRegisterSelectedIds(new Set());
+        void loadItems(debouncedSearch);
+      } else {
+        toast.error(res.message || "품목 등록에 실패했어요");
+      }
+    } finally {
+      setRegisterSubmitting(false);
+    }
+  };
+
+  const loadVersions = useCallback(async (item: RegisteredItem, preferVersionId?: string) => {
+    setVersionsLoading(true);
+    setVersions([]);
+    setSelectedVersionId(null);
+    setDetails([]);
+    setSelectedDetailIds(new Set());
+    try {
+      const res = await getRoutingVersions(item.item_code);
+      if (!res.success || !res.data) {
+        toast.error(res.message || "라우팅 버전을 불러오지 못했어요");
+        return;
+      }
+      const list = res.data.map((v) => ({ ...v, is_default: normalizeDefaultFlag(v) }));
+      setVersions(list);
+      const preferred = preferVersionId ? list.find((v) => v.id === preferVersionId) : undefined;
+      const def = list.find((v) => v.is_default);
+      const pick = preferred ?? def ?? list[0];
+      if (pick) setSelectedVersionId(pick.id);
+    } finally {
+      setVersionsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!selectedItem) return;
+    void loadVersions(selectedItem);
+  }, [selectedItem, loadVersions]);
+
+  const loadDetails = useCallback(async (versionId: string) => {
+    setDetailsLoading(true);
+    setSelectedDetailIds(new Set());
+    try {
+      const res = await getRoutingDetails(versionId);
+      if (res.success && res.data) {
+        setDetails(sortDetailsBySeq(res.data));
+      } else {
+        toast.error(res.message || "라우팅 공정을 불러오지 못했어요");
+        setDetails([]);
+      }
+    } finally {
+      setDetailsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!selectedVersionId) {
+      setDetails([]);
+      return;
+    }
+    void loadDetails(selectedVersionId);
+  }, [selectedVersionId, loadDetails]);
+
+  const showOutsourceField = formWorkType === "외주" || formWorkType === "선택가능";
+
+  const openAddDetailDialog = () => {
+    if (!selectedVersionId) {
+      toast.error("먼저 라우팅 버전을 선택해주세요");
+      return;
+    }
+    setDetailDialogMode("add");
+    setEditingDetailId(null);
+    setFormProcessCode("");
+    const nextSeq = details.length === 0 ? 1 : Math.max(...details.map((d) => parseInt(String(d.seq_no), 10) || 0)) + 1;
+    setFormSeqNo(String(nextSeq));
+    setFormRequired("Y");
+    setFormFixedOrder("Y");
+    setFormWorkType("내부");
+    setFormStandardTime("");
+    setFormOutsource("");
+    setDetailDialogOpen(true);
+  };
+
+  const openEditDetailDialog = () => {
+    if (!selectedVersionId) {
+      toast.error("먼저 라우팅 버전을 선택해주세요");
+      return;
+    }
+    if (selectedDetailIds.size !== 1) {
+      toast.error("수정할 공정 한 건만 선택해주세요");
+      return;
+    }
+    const id = [...selectedDetailIds][0];
+    const row = details.find((d) => d.id === id);
+    if (!row) {
+      toast.error("선택한 공정을 찾을 수 없어요");
+      return;
+    }
+    setDetailDialogMode("edit");
+    setEditingDetailId(row.id);
+    setFormProcessCode(row.process_code);
+    setFormSeqNo(String(row.seq_no));
+    setFormRequired(row.is_required === "N" ? "N" : "Y");
+    setFormFixedOrder(row.is_fixed_order === "N" ? "N" : "Y");
+    setFormWorkType(row.work_type || "내부");
+    setFormStandardTime(row.standard_time || "");
+    setFormOutsource(row.outsource_supplier || "");
+    setDetailDialogOpen(true);
+  };
+
+  const submitDetailForm = () => {
+    if (!selectedVersionId) return;
+    if (!formProcessCode) {
+      toast.error("공정을 선택해주세요");
+      return;
+    }
+    const seq = parseInt(formSeqNo, 10);
+    if (Number.isNaN(seq) || seq < 1) {
+      toast.error("올바른 순번을 입력해주세요");
+      return;
+    }
+    const st = formStandardTime.trim();
+    if (st !== "" && Number.isNaN(Number(st))) {
+      toast.error("표준작업시간은 숫자로 입력해주세요");
+      return;
+    }
+    const proc = processes.find((p) => p.process_code === formProcessCode);
+    const outsource = showOutsourceField ? formOutsource.trim() : "";
+
+    setDetailSubmitting(true);
+    try {
+      if (detailDialogMode === "add") {
+        const newRow: RoutingDetail = {
+          id: `new-${crypto.randomUUID()}`,
+          routing_version_id: selectedVersionId,
+          seq_no: String(seq),
+          process_code: formProcessCode,
+          process_name: proc?.process_name,
+          is_required: formRequired,
+          is_fixed_order: formFixedOrder,
+          work_type: formWorkType,
+          standard_time: st || "0",
+          outsource_supplier: outsource,
+        };
+        setDetails((prev) => sortDetailsBySeq([...prev, newRow]));
+        toast.success("공정이 추가되었어요. 저장을 눌러 반영해주세요");
+      } else if (editingDetailId) {
+        setDetails((prev) =>
+          sortDetailsBySeq(
+            prev.map((d) =>
+              d.id === editingDetailId
+                ? {
+                    ...d,
+                    seq_no: String(seq),
+                    process_code: formProcessCode,
+                    process_name: proc?.process_name ?? d.process_name,
+                    is_required: formRequired,
+                    is_fixed_order: formFixedOrder,
+                    work_type: formWorkType,
+                    standard_time: st || "0",
+                    outsource_supplier: outsource,
+                  }
+                : d,
+            ),
+          ),
+        );
+        toast.success("공정이 수정되었어요. 저장을 눌러 반영해주세요");
+      }
+      setDetailDialogOpen(false);
+    } finally {
+      setDetailSubmitting(false);
+    }
+  };
+
+  const deleteSelectedDetails = () => {
+    if (selectedDetailIds.size === 0) {
+      toast.error("삭제할 공정을 선택해주세요");
+      return;
+    }
+    setDetails((prev) => prev.filter((d) => !selectedDetailIds.has(d.id)));
+    setSelectedDetailIds(new Set());
+    toast.success("선택한 공정이 제거되었어요. 저장을 눌러 반영해주세요");
+  };
+
+  const persistDetails = async () => {
+    if (!selectedVersionId) {
+      toast.error("저장할 버전이 없어요");
+      return;
+    }
+    const payload = details.map((d) => ({
+      seq_no: String(d.seq_no),
+      process_code: d.process_code,
+      is_required: d.is_required || "Y",
+      is_fixed_order: d.is_fixed_order || "Y",
+      work_type: d.work_type || "내부",
+      standard_time: String(d.standard_time ?? "0"),
+      outsource_supplier: d.outsource_supplier || "",
+    }));
+
+    setSaving(true);
+    try {
+      const res = await saveRoutingDetails(selectedVersionId, payload);
+      if (res.success) {
+        toast.success("저장되었어요");
+        await loadDetails(selectedVersionId);
+      } else {
+        toast.error(res.message || "저장에 실패했어요");
+      }
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const submitNewVersion = async () => {
+    if (!selectedItem) return;
+    const name = versionName.trim();
+    if (!name) {
+      toast.error("버전명을 입력해주세요");
+      return;
+    }
+    setVersionSubmitting(true);
+    try {
+      const res = await createRoutingVersion({
+        item_code: selectedItem.item_code,
+        version_name: name,
+        description: versionDescription.trim() || undefined,
+        is_default: versionIsDefault || undefined,
+      });
+      if (res.success && res.data) {
+        toast.success("버전이 추가되었어요");
+        setVersionDialogOpen(false);
+        setVersionName("");
+        setVersionDescription("");
+        setVersionIsDefault(false);
+        const created = res.data as RoutingVersion;
+        await loadVersions(selectedItem, created?.id);
+      } else {
+        toast.error(res.message || "버전 추가에 실패했어요");
+      }
+    } finally {
+      setVersionSubmitting(false);
+    }
+  };
+
+  const detailsGridData = useMemo(
+    () =>
+      details.map((d) => ({
+        ...d,
+        process_display: d.process_name || d.process_code,
+        outsource_display: d.outsource_supplier || "—",
+      })),
+    [details],
+  );
+
+  return (
+    <div className="flex h-full flex-col">
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+        {/* 좌측: 등록 품목 */}
+        <ResizablePanel defaultSize={30} minSize={18}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <PackagePlus className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">등록 품목</span>
+              <Badge variant="secondary" className="font-mono text-xs">
+                {items.length}건
+              </Badge>
+              <div className="ml-auto">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setRegisterSearch("");
+                    setRegisterSelectedIds(new Set());
+                    setRegisterItems([]);
+                    setRegisterDialogOpen(true);
+                  }}
+                >
+                  <Plus className="mr-1 h-3.5 w-3.5" />
+                  품목 등록
+                </Button>
+              </div>
+            </div>
+
+            <div className="border-b px-3 py-2">
+              <div className="relative">
+                <Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  value={searchInput}
+                  onChange={(e) => setSearchInput(e.target.value)}
+                  placeholder="품목코드 / 품목명 검색"
+                  className="h-8 pl-8 text-xs"
+                  aria-label="품목 검색"
+                />
+              </div>
+            </div>
+
+            <div className="min-h-0 flex-1 overflow-auto p-3">
+              {itemsLoading ? (
+                <div className="flex items-center justify-center gap-2 py-12 text-muted-foreground">
+                  <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                  <span className="text-sm">불러오는 중...</span>
+                </div>
+              ) : items.length === 0 ? (
+                <div className="flex flex-col items-center justify-center gap-3 py-12">
+                  <p className="text-sm text-muted-foreground">등록된 품목이 없어요</p>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      setRegisterSearch("");
+                      setRegisterSelectedIds(new Set());
+                      setRegisterItems([]);
+                      setRegisterDialogOpen(true);
+                    }}
+                  >
+                    <PackagePlus className="mr-1 h-3.5 w-3.5" />
+                    품목 등록하기
+                  </Button>
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {items.map((item) => {
+                    const active = selectedItem?.id === item.id;
+                    return (
+                      <button
+                        key={item.id}
+                        type="button"
+                        onClick={() => setSelectedItem(item)}
+                        className={cn(
+                          "w-full rounded-lg border p-3 text-left transition-colors",
+                          "border-border bg-card hover:bg-muted/30",
+                          active && "border-primary ring-2 ring-ring/30",
+                        )}
+                      >
+                        <p className="text-sm font-medium text-foreground">{item.item_code}</p>
+                        <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">{item.item_name}</p>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 버전 + 라우팅 상세 */}
+        <ResizablePanel defaultSize={70} minSize={35}>
+          <div className="flex h-full flex-col">
+            {!selectedItem ? (
+              <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+                <GitBranch className="h-10 w-10 opacity-40" />
+                <p className="text-sm font-medium text-foreground">좌측에서 품목을 선택해주세요</p>
+                <p className="max-w-xs text-xs">품목을 선택하면 라우팅 버전과 공정을 관리할 수 있어요</p>
+              </div>
+            ) : (
+              <>
+                {/* 패널 헤더 */}
+                <div className="flex items-center gap-3 border-b bg-muted/30 px-4 py-2">
+                  <GitBranch className="h-4 w-4 shrink-0 text-muted-foreground" />
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-semibold">{selectedItem.item_name}</p>
+                    <p className="text-xs text-muted-foreground">품목코드 {selectedItem.item_code}</p>
+                  </div>
+                  <div className="flex shrink-0 gap-2">
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={async () => {
+                        if (!selectedItem.registered_id) return;
+                        const res = await unregisterItem(selectedItem.registered_id);
+                        if (res.success) {
+                          toast.success("품목 등록이 해제되었어요");
+                          setSelectedItem(null);
+                          void loadItems(debouncedSearch);
+                        } else {
+                          toast.error(res.message || "등록 해제에 실패했어요");
+                        }
+                      }}
+                    >
+                      <Trash2 className="mr-1 h-3.5 w-3.5" />
+                      등록 해제
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={() => {
+                        setVersionName("");
+                        setVersionDescription("");
+                        setVersionIsDefault(false);
+                        setVersionDialogOpen(true);
+                      }}
+                    >
+                      <Plus className="mr-1 h-3.5 w-3.5" />
+                      버전 추가
+                    </Button>
+                  </div>
+                </div>
+
+                {/* 버전 pills */}
+                <div className="border-b bg-muted/30 px-4 py-2">
+                  {versionsLoading ? (
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Loader2 className="h-4 w-4 animate-spin text-primary" />
+                      버전 불러오는 중...
+                    </div>
+                  ) : versions.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">
+                      등록된 버전이 없어요. 버전을 추가해주세요.
+                    </p>
+                  ) : (
+                    <div className="flex flex-wrap items-center gap-2">
+                      {versions.map((v) => {
+                        const selected = v.id === selectedVersionId;
+                        const def = normalizeDefaultFlag(v);
+                        return (
+                          <button
+                            key={v.id}
+                            type="button"
+                            onClick={() => setSelectedVersionId(v.id)}
+                            className={cn(
+                              "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors",
+                              selected
+                                ? "border-primary bg-primary text-primary-foreground"
+                                : "border-border bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                            )}
+                          >
+                            {def && (
+                              <Star
+                                className={cn(
+                                  "h-3.5 w-3.5",
+                                  selected ? "fill-primary-foreground" : "fill-warning text-warning",
+                                )}
+                                aria-label="기본 버전"
+                              />
+                            )}
+                            {v.version_name}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+
+                {/* 액션 바 */}
+                <div className="flex items-center justify-between border-b bg-muted/30 px-4 py-2">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-semibold">라우팅 공정</span>
+                    <Badge variant="secondary" className="font-mono text-xs">
+                      {details.length}건
+                    </Badge>
+                  </div>
+                  <div className="flex gap-2">
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={openAddDetailDialog}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Plus className="mr-1 h-3.5 w-3.5" />
+                    공정 추가
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={openEditDetailDialog}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Pencil className="mr-1 h-3.5 w-3.5" />
+                    수정
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={deleteSelectedDetails}
+                    disabled={!selectedVersionId || detailsLoading}
+                  >
+                    <Trash2 className="mr-1 h-3.5 w-3.5" />
+                    선택 삭제
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={() => void persistDetails()}
+                    disabled={!selectedVersionId || detailsLoading || saving}
+                  >
+                    {saving ? (
+                      <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Save className="mr-1 h-3.5 w-3.5" />
+                    )}
+                    저장
+                  </Button>
+                  </div>
+                </div>
+
+                {/* 라우팅 공정 테이블 */}
+                <div className="min-h-0 flex-1 overflow-auto">
+                  {!selectedVersionId ? (
+                    <p className="py-8 text-center text-sm text-muted-foreground">버전을 선택해주세요</p>
+                  ) : (
+                    <EDataTable
+                      columns={[
+                        { key: "seq_no", label: "순번", width: "w-[80px]", align: "center" as const },
+                        { key: "process_display", label: "공정명" },
+                        { key: "is_required", label: "필수", width: "w-[80px]", align: "center" as const },
+                        { key: "is_fixed_order", label: "순서고정", width: "w-[90px]", align: "center" as const },
+                        { key: "work_type", label: "작업구분", width: "w-[100px]" },
+                        { key: "standard_time", label: "표준시간", width: "w-[90px]", align: "right" as const },
+                        { key: "outsource_display", label: "외주업체" },
+                      ] as EDataTableColumn[]}
+                      data={detailsGridData}
+                      rowKey={(row) => row.id}
+                      loading={detailsLoading}
+                      emptyMessage="등록된 공정이 없어요"
+                      showCheckbox
+                      checkedIds={Array.from(selectedDetailIds)}
+                      onCheckedChange={(ids) => setSelectedDetailIds(new Set(ids))}
+                      showPagination={false}
+                      draggableColumns={false}
+                    />
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 버전 추가 모달 */}
+      <Dialog open={versionDialogOpen} onOpenChange={setVersionDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>라우팅 버전 추가</DialogTitle>
+            <DialogDescription>선택한 품목에 새 라우팅 버전을 추가해요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                버전명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={versionName}
+                onChange={(e) => setVersionName(e.target.value)}
+                placeholder="예: Rev.A"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설명</Label>
+              <Input
+                value={versionDescription}
+                onChange={(e) => setVersionDescription(e.target.value)}
+                placeholder="선택 입력"
+                className="h-9"
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="versionDefault"
+                checked={versionIsDefault}
+                onCheckedChange={(c) => setVersionIsDefault(c === true)}
+              />
+              <Label htmlFor="versionDefault" className="text-sm font-normal">
+                기본 버전으로 설정
+              </Label>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setVersionDialogOpen(false)} disabled={versionSubmitting}>
+              취소
+            </Button>
+            <Button onClick={() => void submitNewVersion()} disabled={versionSubmitting}>
+              {versionSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              추가해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 공정 추가/수정 모달 */}
+      <Dialog open={detailDialogOpen} onOpenChange={setDetailDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{detailDialogMode === "add" ? "공정 추가" : "공정 수정"}</DialogTitle>
+            <DialogDescription>라우팅 공정 순서에 반영할 내용을 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                공정 <span className="text-destructive">*</span>
+              </Label>
+              <Select value={formProcessCode} onValueChange={setFormProcessCode}>
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder={processesLoading ? "불러오는 중..." : "공정 선택"} />
+                </SelectTrigger>
+                <SelectContent>
+                  {processes.map((p) => (
+                    <SelectItem key={p.id} value={p.process_code}>
+                      {p.process_name} ({p.process_code})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                순번 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                type="number"
+                min={1}
+                value={formSeqNo}
+                onChange={(e) => setFormSeqNo(e.target.value)}
+                className="h-9"
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">필수여부</Label>
+                <Select value={formRequired} onValueChange={setFormRequired}>
+                  <SelectTrigger className="h-9" size="sm">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Y">Y</SelectItem>
+                    <SelectItem value="N">N</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">순서고정여부</Label>
+                <Select value={formFixedOrder} onValueChange={setFormFixedOrder}>
+                  <SelectTrigger className="h-9" size="sm">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Y">Y</SelectItem>
+                    <SelectItem value="N">N</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">작업구분</Label>
+              <Select value={formWorkType} onValueChange={setFormWorkType}>
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="내부">내부</SelectItem>
+                  <SelectItem value="외주">외주</SelectItem>
+                  <SelectItem value="선택가능">선택가능</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">표준작업시간(분)</Label>
+              <Input
+                type="number"
+                min={0}
+                step={1}
+                value={formStandardTime}
+                onChange={(e) => setFormStandardTime(e.target.value)}
+                placeholder="0"
+                className="h-9"
+              />
+            </div>
+            {showOutsourceField && (
+              <div className="space-y-1">
+                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">외주업체</Label>
+                <Input
+                  value={formOutsource}
+                  onChange={(e) => setFormOutsource(e.target.value)}
+                  placeholder="외주 업체명"
+                  className="h-9"
+                />
+              </div>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDetailDialogOpen(false)} disabled={detailSubmitting}>
+              취소
+            </Button>
+            <Button onClick={submitDetailForm} disabled={detailSubmitting}>
+              {detailSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              확인
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 품목 등록 모달 */}
+      <Dialog open={registerDialogOpen} onOpenChange={setRegisterDialogOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>품목 등록</DialogTitle>
+            <DialogDescription>라우팅에 추가할 품목을 검색하고 선택해주세요</DialogDescription>
+          </DialogHeader>
+        <div className="space-y-3">
+          <div className="relative">
+            <Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={registerSearch}
+              onChange={(e) => setRegisterSearch(e.target.value)}
+              placeholder="품목코드 / 품목명으로 검색"
+              className="h-9 pl-8 text-xs"
+              aria-label="품목 검색"
+            />
+          </div>
+          <div className="max-h-[400px] overflow-auto rounded-md border">
+            {registerLoading ? (
+              <div className="flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground">
+                <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                검색 중...
+              </div>
+            ) : registerItems.length === 0 ? (
+              <p className="py-8 text-center text-sm text-muted-foreground">
+                {registerSearchDebounced ? "검색 결과가 없어요" : "품목을 검색해주세요"}
+              </p>
+            ) : (
+              <Table>
+                <TableHeader className="sticky top-0 bg-background z-10">
+                  <TableRow>
+                    <TableHead className="w-10 text-center text-muted-foreground">
+                      <Checkbox
+                        checked={
+                          registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number)).length > 0 &&
+                          registerItems
+                            .filter((ri) => !registeredItemCodes.has(ri.item_number))
+                            .every((ri) => registerSelectedIds.has(ri.id))
+                        }
+                        onCheckedChange={(checked) => {
+                          const next = new Set(registerSelectedIds);
+                          const available = registerItems.filter((ri) => !registeredItemCodes.has(ri.item_number));
+                          if (checked) {
+                            available.forEach((ri) => next.add(ri.id));
+                          } else {
+                            available.forEach((ri) => next.delete(ri.id));
+                          }
+                          setRegisterSelectedIds(next);
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="text-xs text-muted-foreground">품목코드</TableHead>
+                    <TableHead className="text-xs text-muted-foreground">품목명</TableHead>
+                    <TableHead className="text-xs text-muted-foreground">상태</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {registerItems.map((ri) => {
+                    const alreadyRegistered = registeredItemCodes.has(ri.item_number);
+                    return (
+                      <TableRow key={ri.id} className={cn("hover:bg-muted/30", alreadyRegistered && "opacity-50")}>
+                        <TableCell className="text-center">
+                          <Checkbox
+                            checked={registerSelectedIds.has(ri.id)}
+                            disabled={alreadyRegistered}
+                            onCheckedChange={(checked) => {
+                              const next = new Set(registerSelectedIds);
+                              if (checked) next.add(ri.id);
+                              else next.delete(ri.id);
+                              setRegisterSelectedIds(next);
+                            }}
+                          />
+                        </TableCell>
+                        <TableCell className="text-xs">{ri.item_number}</TableCell>
+                        <TableCell className="text-xs">{ri.item_name}</TableCell>
+                        <TableCell className="text-xs">
+                          {alreadyRegistered ? (
+                            <span className="text-muted-foreground">등록됨</span>
+                          ) : (
+                            <span className="text-primary">미등록</span>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            )}
+          </div>
+          </div>
+          <DialogFooter className="flex-row items-center justify-between sm:justify-between">
+            {registerSelectedIds.size > 0 ? (
+              <p className="text-xs text-muted-foreground">{registerSelectedIds.size}건 선택됨</p>
+            ) : (
+              <div />
+            )}
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setRegisterDialogOpen(false)}>
+                취소
+              </Button>
+              <Button
+                onClick={() => void handleRegisterItems()}
+                disabled={registerSubmitting || registerSelectedIds.size === 0}
+              >
+                {registerSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                등록 ({registerSelectedIds.size}건)
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/production/process-info/ProcessMasterTab.tsx b/frontend/app/(main)/COMPANY_9/production/process-info/ProcessMasterTab.tsx
new file mode 100644
index 00000000..cfbee962
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/production/process-info/ProcessMasterTab.tsx
@@ -0,0 +1,664 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  Loader2,
+  Settings,
+  Plus,
+  Pencil,
+  Trash2,
+  Search,
+  RotateCcw,
+  Wrench,
+} from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import {
+  getProcessList,
+  createProcess,
+  updateProcess,
+  deleteProcesses,
+  getProcessEquipments,
+  addProcessEquipment,
+  removeProcessEquipment,
+  getEquipmentList,
+  type ProcessMaster,
+  type ProcessEquipment,
+  type Equipment,
+} from "@/lib/api/processInfo"; // API: /process-info/*
+import { getCategoryValues } from "@/lib/api/tableCategoryValue";
+
+const ALL_VALUE = "__all__";
+
+export function ProcessMasterTab() {
+  const [processes, setProcesses] = useState<ProcessMaster[]>([]);
+  const [equipmentMaster, setEquipmentMaster] = useState<Equipment[]>([]);
+  const [processTypeOptions, setProcessTypeOptions] = useState<{ valueCode: string; valueLabel: string }[]>([]);
+  const [loadingInitial, setLoadingInitial] = useState(true);
+  const [loadingList, setLoadingList] = useState(false);
+  const [loadingEquipments, setLoadingEquipments] = useState(false);
+
+  const [filterCode, setFilterCode] = useState("");
+  const [filterName, setFilterName] = useState("");
+  const [filterType, setFilterType] = useState<string>(ALL_VALUE);
+  const [filterUseYn, setFilterUseYn] = useState<string>(ALL_VALUE);
+
+  const [selectedProcess, setSelectedProcess] = useState<ProcessMaster | null>(null);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());
+
+  const [processEquipments, setProcessEquipments] = useState<ProcessEquipment[]>([]);
+  const [equipmentPick, setEquipmentPick] = useState<string>("");
+  const [addingEquipment, setAddingEquipment] = useState(false);
+
+  const [formOpen, setFormOpen] = useState(false);
+  const [formMode, setFormMode] = useState<"add" | "edit">("add");
+  const [savingForm, setSavingForm] = useState(false);
+  const [formProcessCode, setFormProcessCode] = useState("");
+  const [formProcessName, setFormProcessName] = useState("");
+  const [formProcessType, setFormProcessType] = useState<string>("");
+  const [formStandardTime, setFormStandardTime] = useState("");
+  const [formWorkerCount, setFormWorkerCount] = useState("");
+  const [formUseYn, setFormUseYn] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  const processTypeMap = useMemo(() => {
+    const m = new Map<string, string>();
+    processTypeOptions.forEach((o) => m.set(o.valueCode, o.valueLabel));
+    return m;
+  }, [processTypeOptions]);
+
+  const getProcessTypeLabel = useCallback(
+    (code: string) => processTypeMap.get(code) ?? code,
+    [processTypeMap]
+  );
+
+  const loadProcesses = useCallback(async () => {
+    setLoadingList(true);
+    try {
+      const res = await getProcessList({
+        processCode: filterCode.trim() || undefined,
+        processName: filterName.trim() || undefined,
+        processType: filterType === ALL_VALUE ? undefined : filterType,
+        useYn: filterUseYn === ALL_VALUE ? undefined : filterUseYn,
+      });
+      if (!res.success) {
+        toast.error(res.message || "공정 목록을 불러오지 못했어요");
+        return;
+      }
+      setProcesses(res.data ?? []);
+    } finally {
+      setLoadingList(false);
+    }
+  }, [filterCode, filterName, filterType, filterUseYn]);
+
+  const loadInitial = useCallback(async () => {
+    setLoadingInitial(true);
+    try {
+      const [procRes, eqRes] = await Promise.all([getProcessList(), getEquipmentList()]);
+      if (!procRes.success) {
+        toast.error(procRes.message || "공정 목록을 불러오지 못했어요");
+      } else {
+        setProcesses(procRes.data ?? []);
+      }
+      if (!eqRes.success) {
+        toast.error(eqRes.message || "설비 목록을 불러오지 못했어요");
+      } else {
+        setEquipmentMaster(eqRes.data ?? []);
+      }
+      const ptRes = await getCategoryValues("process_mng", "process_type");
+      if (ptRes.success && "data" in ptRes && Array.isArray(ptRes.data)) {
+        const activeValues = ptRes.data.filter((v: any) => v.isActive !== false);
+        const seen = new Set<string>();
+        const unique = activeValues.filter((v: any) => {
+          if (seen.has(v.valueCode)) return false;
+          seen.add(v.valueCode);
+          return true;
+        });
+        setProcessTypeOptions(unique.map((v: any) => ({ valueCode: v.valueCode, valueLabel: v.valueLabel })));
+      }
+    } finally {
+      setLoadingInitial(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadInitial();
+  }, [loadInitial]);
+
+  useEffect(() => {
+    setSelectedProcess((prev) => {
+      if (!prev) return prev;
+      if (!processes.some((p) => p.id === prev.id)) return null;
+      return prev;
+    });
+  }, [processes]);
+
+  useEffect(() => {
+    setEquipmentPick("");
+  }, [selectedProcess?.id]);
+
+  useEffect(() => {
+    if (!selectedProcess) {
+      setProcessEquipments([]);
+      return;
+    }
+    let cancelled = false;
+    setLoadingEquipments(true);
+    void (async () => {
+      const res = await getProcessEquipments(selectedProcess.process_code);
+      if (cancelled) return;
+      if (!res.success) {
+        toast.error(res.message || "공정 설비를 불러오지 못했어요");
+        setProcessEquipments([]);
+      } else {
+        setProcessEquipments(res.data ?? []);
+      }
+      setLoadingEquipments(false);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedProcess?.process_code]);
+
+  const handleResetFilters = () => {
+    setFilterCode("");
+    setFilterName("");
+    setFilterType(ALL_VALUE);
+    setFilterUseYn(ALL_VALUE);
+  };
+
+  const handleSearch = () => {
+    void loadProcesses();
+  };
+
+  const openAdd = () => {
+    setFormMode("add");
+    setEditingId(null);
+    setFormProcessCode("");
+    setFormProcessName("");
+    setFormProcessType(processTypeOptions[0]?.valueCode ?? "");
+    setFormStandardTime("");
+    setFormWorkerCount("");
+    setFormUseYn("Y");
+    setFormOpen(true);
+  };
+
+  const openEdit = () => {
+    if (!selectedProcess) {
+      toast.message("수정할 공정을 좌측 목록에서 선택해주세요");
+      return;
+    }
+    setFormMode("edit");
+    setEditingId(selectedProcess.id);
+    setFormProcessCode(selectedProcess.process_code);
+    setFormProcessName(selectedProcess.process_name);
+    setFormProcessType(selectedProcess.process_type);
+    setFormStandardTime(selectedProcess.standard_time ?? "");
+    setFormWorkerCount(selectedProcess.worker_count ?? "");
+    setFormUseYn(selectedProcess.use_yn);
+    setFormOpen(true);
+  };
+
+  const submitForm = async () => {
+    if (!formProcessName.trim()) {
+      toast.error("공정명을 입력해주세요");
+      return;
+    }
+
+    setSavingForm(true);
+    try {
+      if (formMode === "add") {
+        const res = await createProcess({
+          process_name: formProcessName.trim(),
+          process_type: formProcessType,
+          standard_time: formStandardTime.trim() || "0",
+          worker_count: formWorkerCount.trim() || "0",
+          use_yn: formUseYn,
+        });
+        if (!res.success || !res.data) {
+          toast.error(res.message || "등록에 실패했어요");
+          return;
+        }
+        toast.success("공정이 등록되었어요");
+        setFormOpen(false);
+        await loadProcesses();
+        setSelectedProcess(res.data);
+        setSelectedIds(new Set());
+      } else if (editingId) {
+        const res = await updateProcess(editingId, {
+          process_name: formProcessName.trim(),
+          process_type: formProcessType,
+          standard_time: formStandardTime.trim() || "0",
+          worker_count: formWorkerCount.trim() || "0",
+          use_yn: formUseYn,
+        });
+        if (!res.success || !res.data) {
+          toast.error(res.message || "수정에 실패했어요");
+          return;
+        }
+        toast.success("공정이 수정되었어요");
+        setFormOpen(false);
+        await loadProcesses();
+        setSelectedProcess(res.data);
+      }
+    } finally {
+      setSavingForm(false);
+    }
+  };
+
+  const openDelete = () => {
+    if (selectedIds.size === 0) {
+      toast.message("삭제할 공정을 체크박스로 선택해주세요");
+      return;
+    }
+    setDeleteOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    const ids = Array.from(selectedIds);
+    setDeleting(true);
+    try {
+      const res = await deleteProcesses(ids);
+      if (!res.success) {
+        toast.error(res.message || "삭제에 실패했어요");
+        return;
+      }
+      toast.success(`${ids.length}건 삭제되었어요`);
+      setDeleteOpen(false);
+      setSelectedIds(new Set());
+      if (selectedProcess && ids.includes(selectedProcess.id)) {
+        setSelectedProcess(null);
+      }
+      await loadProcesses();
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const availableEquipments = useMemo(() => {
+    const used = new Set(processEquipments.map((e) => e.equipment_code));
+    return equipmentMaster.filter((e) => !used.has(e.equipment_code));
+  }, [equipmentMaster, processEquipments]);
+
+  const handleAddEquipment = async () => {
+    if (!selectedProcess) return;
+    if (!equipmentPick) {
+      toast.message("추가할 설비를 선택해주세요");
+      return;
+    }
+    setAddingEquipment(true);
+    try {
+      const res = await addProcessEquipment({
+        process_code: selectedProcess.process_code,
+        equipment_code: equipmentPick,
+      });
+      if (!res.success) {
+        toast.error(res.message || "설비 추가에 실패했어요");
+        return;
+      }
+      toast.success("설비가 등록되었어요");
+      setEquipmentPick("");
+      const listRes = await getProcessEquipments(selectedProcess.process_code);
+      if (listRes.success && listRes.data) setProcessEquipments(listRes.data);
+    } finally {
+      setAddingEquipment(false);
+    }
+  };
+
+  const handleRemoveEquipment = async (row: ProcessEquipment) => {
+    const res = await removeProcessEquipment(row.id);
+    if (!res.success) {
+      toast.error(res.message || "설비 제거에 실패했어요");
+      return;
+    }
+    toast.success("설비가 제거되었어요");
+    if (selectedProcess) {
+      const listRes = await getProcessEquipments(selectedProcess.process_code);
+      if (listRes.success && listRes.data) setProcessEquipments(listRes.data);
+    }
+  };
+
+  const listBusy = loadingInitial || loadingList;
+
+  // 표시용 데이터
+  const processGridData = useMemo(
+    () =>
+      processes.map((p) => ({
+        ...p,
+        process_type_display: getProcessTypeLabel(p.process_type),
+        use_yn_display: p.use_yn === "Y" ? "사용" : "미사용",
+      })),
+    [processes, getProcessTypeLabel]
+  );
+
+  return (
+    <div className="flex h-full flex-col">
+      <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+        {/* 좌측: 공정 목록 */}
+        <ResizablePanel defaultSize={50} minSize={30}>
+          <div className="flex h-full flex-col">
+            {/* 패널 헤더 */}
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">공정 마스터</span>
+              <Badge variant="secondary" className="font-mono text-xs">
+                {processes.length}건
+              </Badge>
+            </div>
+
+            {/* 필터 바 */}
+            <div className="flex flex-wrap items-center gap-2 border-b px-3 py-2">
+              <Input value={filterCode} onChange={(e) => setFilterCode(e.target.value)} placeholder="공정코드" className="h-8 w-[110px] text-xs" />
+              <Input value={filterName} onChange={(e) => setFilterName(e.target.value)} placeholder="공정명" className="h-8 w-[130px] text-xs" />
+              <Select value={filterType} onValueChange={setFilterType}>
+                <SelectTrigger className="h-8 w-[110px] text-xs">
+                  <SelectValue placeholder="유형 전체" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>전체</SelectItem>
+                  {processTypeOptions.map((o, idx) => (
+                    <SelectItem key={`pt-filter-${idx}`} value={o.valueCode}>{o.valueLabel}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select value={filterUseYn} onValueChange={setFilterUseYn}>
+                <SelectTrigger className="h-8 w-[100px] text-xs">
+                  <SelectValue placeholder="사용 전체" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>전체</SelectItem>
+                  <SelectItem value="Y">사용</SelectItem>
+                  <SelectItem value="N">미사용</SelectItem>
+                </SelectContent>
+              </Select>
+              <div className="flex-1" />
+              {listBusy && <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />}
+              <Button size="sm" className="h-8 gap-1 text-xs" onClick={handleSearch} disabled={listBusy}>
+                <Search className="h-3 w-3" />조회
+              </Button>
+              <Button variant="ghost" size="sm" className="h-8 gap-1 text-xs text-muted-foreground" onClick={handleResetFilters}>
+                <RotateCcw className="h-3 w-3" />초기화
+              </Button>
+            </div>
+
+            {/* 액션 바 */}
+            <div className="flex items-center justify-end gap-2 border-b bg-muted/30 px-4 py-2">
+              <Button size="sm" onClick={openAdd}>
+                <Plus className="mr-1 h-3.5 w-3.5" />
+                공정 추가
+              </Button>
+              <Button variant="secondary" size="sm" onClick={openEdit}>
+                <Pencil className="mr-1 h-3.5 w-3.5" />
+                수정
+              </Button>
+              <Button variant="destructive" size="sm" onClick={openDelete}>
+                <Trash2 className="mr-1 h-3.5 w-3.5" />
+                삭제
+              </Button>
+            </div>
+
+            {/* 공정 목록 테이블 */}
+            <div className="min-h-0 flex-1 overflow-auto">
+              <EDataTable
+                columns={[
+                  { key: "process_code", label: "공정코드", width: "w-[130px]", render: (val: any) => <span className="font-mono text-xs">{val}</span> },
+                  { key: "process_name", label: "공정명" },
+                  { key: "process_type_display", label: "공정유형", width: "w-[120px]" },
+                  { key: "standard_time", label: "표준시간(분)", width: "w-[110px]", align: "right" as const },
+                  { key: "worker_count", label: "작업인원", width: "w-[90px]", align: "right" as const },
+                  { key: "use_yn_display", label: "사용여부", width: "w-[90px]", align: "center" as const },
+                ] as EDataTableColumn[]}
+                data={processGridData}
+                rowKey={(row) => row.id}
+                loading={listBusy}
+                emptyMessage="조회된 공정이 없어요"
+                selectedId={selectedProcess?.id ?? null}
+                onSelect={(id) => {
+                  const proc = processes.find((p) => p.id === id);
+                  setSelectedProcess(proc || null);
+                }}
+                onRowClick={(row) => {
+                  const proc = processes.find((p) => p.id === row.id);
+                  setSelectedProcess(proc || null);
+                }}
+                showCheckbox
+                checkedIds={Array.from(selectedIds)}
+                onCheckedChange={(ids) => setSelectedIds(new Set(ids))}
+                showPagination={false}
+                draggableColumns={false}
+              />
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 공정별 설비 */}
+        <ResizablePanel defaultSize={50} minSize={30}>
+          <div className="flex h-full flex-col">
+            {/* 패널 헤더 */}
+            <div className="flex items-center gap-2 border-b bg-muted/30 px-4 py-2">
+              <Wrench className="h-4 w-4 text-muted-foreground" />
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-semibold">공정별 사용설비</p>
+                {selectedProcess ? (
+                  <p className="truncate text-xs text-muted-foreground">
+                    {selectedProcess.process_name} ({selectedProcess.process_code})
+                  </p>
+                ) : (
+                  <p className="text-xs text-muted-foreground">공정을 선택해주세요</p>
+                )}
+              </div>
+            </div>
+
+            {!selectedProcess ? (
+              <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+                <Settings className="h-10 w-10 opacity-40" />
+                <p className="text-sm font-medium text-foreground">좌측에서 공정을 선택해주세요</p>
+                <p className="max-w-xs text-xs">
+                  목록 행을 클릭하면 이 공정에 연결된 설비를 관리할 수 있어요
+                </p>
+              </div>
+            ) : (
+              <div className="flex min-h-0 flex-1 flex-col gap-3 p-4">
+                <div className="flex items-end gap-2">
+                  <div className="min-w-0 flex-1 space-y-1">
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">설비 선택</Label>
+                    <Select
+                      key={selectedProcess.id}
+                      value={equipmentPick || undefined}
+                      onValueChange={setEquipmentPick}
+                      disabled={addingEquipment || availableEquipments.length === 0}
+                    >
+                      <SelectTrigger className="h-9" size="sm">
+                        <SelectValue placeholder="설비를 선택해주세요" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availableEquipments.map((eq) => (
+                          <SelectItem key={eq.id} value={eq.equipment_code}>
+                            {eq.equipment_code} · {eq.equipment_name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <Button
+                    size="sm"
+                    onClick={() => void handleAddEquipment()}
+                    disabled={addingEquipment || !equipmentPick}
+                  >
+                    {addingEquipment ? (
+                      <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Plus className="mr-1 h-3.5 w-3.5" />
+                    )}
+                    추가
+                  </Button>
+                </div>
+
+                <div className="min-h-0 flex-1 overflow-auto">
+                  {loadingEquipments ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Loader2 className="h-7 w-7 animate-spin" />
+                      <p className="mt-2 text-sm">설비 목록을 불러오고 있어요...</p>
+                    </div>
+                  ) : processEquipments.length === 0 ? (
+                    <p className="py-8 text-center text-sm text-muted-foreground">
+                      등록된 설비가 없어요. 상단에서 설비를 추가해주세요.
+                    </p>
+                  ) : (
+                    <ul className="space-y-2">
+                      {processEquipments.map((pe) => (
+                        <li key={pe.id} className="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:bg-muted/30">
+                          <div className="min-w-0 flex-1">
+                            <p className="truncate text-sm font-medium">{pe.equipment_code}</p>
+                            <p className="truncate text-xs text-muted-foreground">{pe.equipment_name || "설비명 없음"}</p>
+                          </div>
+                          <Button variant="ghost" size="sm" onClick={() => void handleRemoveEquipment(pe)}>
+                            <Trash2 className="mr-1 h-3.5 w-3.5" />
+                            제거
+                          </Button>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* 공정 등록/수정 모달 */}
+      <Dialog open={formOpen} onOpenChange={setFormOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{formMode === "add" ? "공정 추가" : "공정 수정"}</DialogTitle>
+            <DialogDescription>공정 마스터 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                공정명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={formProcessName}
+                onChange={(e) => setFormProcessName(e.target.value)}
+                placeholder="공정명을 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">공정유형</Label>
+              <Select value={formProcessType} onValueChange={setFormProcessType}>
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder="선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {processTypeOptions.map((o, idx) => (
+                    <SelectItem key={`pt-form-${idx}`} value={o.valueCode}>{o.valueLabel}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">표준작업시간(분)</Label>
+              <Input
+                value={formStandardTime}
+                onChange={(e) => setFormStandardTime(e.target.value)}
+                placeholder="0"
+                inputMode="numeric"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">작업인원수</Label>
+              <Input
+                value={formWorkerCount}
+                onChange={(e) => setFormWorkerCount(e.target.value)}
+                placeholder="0"
+                inputMode="numeric"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">사용여부</Label>
+              <Select value={formUseYn} onValueChange={setFormUseYn}>
+                <SelectTrigger className="h-9" size="sm">
+                  <SelectValue placeholder="선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Y">사용</SelectItem>
+                  <SelectItem value="N">미사용</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setFormOpen(false)} disabled={savingForm}>취소</Button>
+            <Button onClick={() => void submitForm()} disabled={savingForm}>
+              {savingForm && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              저장해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 삭제 확인 */}
+      <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>공정 삭제</DialogTitle>
+            <DialogDescription>
+              선택한 {selectedIds.size}건의 공정을 삭제해요. 연결된 공정-설비 매핑도 함께 삭제돼요. 이 작업은 되돌릴 수 없어요.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2">
+            <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>취소</Button>
+            <Button variant="destructive" onClick={() => void confirmDelete()} disabled={deleting}>
+              {deleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              삭제해요
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/production/process-info/ProcessWorkStandardTab.tsx b/frontend/app/(main)/COMPANY_9/production/process-info/ProcessWorkStandardTab.tsx
new file mode 100644
index 00000000..21007c05
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/production/process-info/ProcessWorkStandardTab.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { ProcessWorkStandardComponent } from "@/lib/registry/components/v2-process-work-standard/ProcessWorkStandardComponent";
+
+export function ProcessWorkStandardTab() {
+  return (
+    <div className="h-[calc(100vh-12rem)]">
+      <ProcessWorkStandardComponent
+        config={{
+          itemListMode: "registered",
+          screenCode: "screen_1599",
+          leftPanelTitle: "등록 품목 및 공정",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/production/process-info/page.tsx b/frontend/app/(main)/COMPANY_9/production/process-info/page.tsx
new file mode 100644
index 00000000..a7b81550
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/production/process-info/page.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Settings,
+  GitBranch,
+  ClipboardList,
+  ChevronRight,
+  Factory,
+  Keyboard,
+  Plus,
+  Pencil,
+  Trash2,
+  List,
+  Settings2,
+} from "lucide-react";
+import { ProcessMasterTab } from "./ProcessMasterTab";
+import { ItemRoutingTab } from "./ItemRoutingTab";
+import { ProcessWorkStandardTab } from "./ProcessWorkStandardTab";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+
+const GRID_COLUMNS = [
+  { key: "process_code", label: "공정코드" },
+  { key: "process_name", label: "공정명" },
+  { key: "process_type", label: "공정유형" },
+  { key: "standard_time", label: "표준시간(분)" },
+  { key: "worker_count", label: "작업인원" },
+  { key: "use_yn", label: "사용여부" },
+];
+
+const TAB_META = [
+  {
+    value: "process",
+    label: "공정 마스터",
+    shortLabel: "공정",
+    description: "공정코드/유형/표준시간/사용설비 관리",
+    detailDesc: "공정코드, 공정유형, 표준시간을 등록하고 사용 설비를 매핑합니다.",
+    icon: Settings,
+    color: "text-blue-500",
+    badgeColor: "bg-blue-50 text-blue-700 ring-blue-600/20",
+    shortcut: "1",
+    actions: ["공정 등록", "공정 수정", "공정 삭제", "설비 연결"],
+  },
+  {
+    value: "routing",
+    label: "품목별 라우팅",
+    shortLabel: "라우팅",
+    description: "품목 라우팅 버전 및 공정 순서 관리",
+    detailDesc: "품목별 생산 라우팅 버전을 관리하고 공정 순서 및 소요시간을 설정합니다.",
+    icon: GitBranch,
+    color: "text-emerald-500",
+    badgeColor: "bg-emerald-50 text-emerald-700 ring-emerald-600/20",
+    shortcut: "2",
+    actions: ["버전 생성", "공정 순서 설정", "품목 등록", "품목 해제"],
+  },
+  {
+    value: "workstandard",
+    label: "공정 작업기준",
+    shortLabel: "작업기준",
+    description: "공정별 작업기준서 및 작업 표준 관리",
+    detailDesc: "공정별 작업기준서를 등록하고 작업 표준을 문서화하여 품질을 관리합니다.",
+    icon: ClipboardList,
+    color: "text-violet-500",
+    badgeColor: "bg-violet-50 text-violet-700 ring-violet-600/20",
+    shortcut: "3",
+    actions: ["기준서 등록", "기준서 수정", "기준서 삭제", "작업 표준 관리"],
+  },
+] as const;
+
+type TabValue = (typeof TAB_META)[number]["value"];
+
+const ACTION_ICONS = [Plus, Pencil, Trash2, List] as const;
+
+export default function ProcessInfoPage() {
+  const ts = useTableSettings("c16-process-info", "process_mst", GRID_COLUMNS);
+  const [activeTab, setActiveTab] = useState<TabValue>("process");
+  const [showShortcutHint, setShowShortcutHint] = useState(false);
+
+  const activeMeta = TAB_META.find((t) => t.value === activeTab)!;
+
+  const handleTabChange = useCallback((value: string) => {
+    setActiveTab(value as TabValue);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!e.altKey) return;
+      const tabByShortcut = TAB_META.find((t) => t.shortcut === e.key);
+      if (tabByShortcut) {
+        e.preventDefault();
+        setActiveTab(tabByShortcut.value);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col bg-muted/30">
+      {/* 페이지 헤더 */}
+      <div className="shrink-0 border-b bg-background px-6 py-3">
+        <nav
+          className="mb-1 flex items-center gap-1 text-xs text-muted-foreground"
+          aria-label="breadcrumb"
+        >
+          <Factory className="h-3 w-3" />
+          <span>생산관리</span>
+          <ChevronRight className="h-3 w-3 opacity-50" />
+          <span className="font-medium text-foreground">공정정보관리</span>
+        </nav>
+        <div className="flex items-center justify-between">
+          <div className="flex items-baseline gap-2">
+            <h1 className="text-base font-semibold text-foreground">공정정보관리</h1>
+            <span className="text-xs text-muted-foreground">{activeMeta.description}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+              <Settings2 className="h-3.5 w-3.5" />
+            </Button>
+            <button
+              type="button"
+              className="flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              onClick={() => setShowShortcutHint((v) => !v)}
+              aria-label="키보드 단축키 보기"
+            >
+              <Keyboard className="h-3 w-3" />
+              <span>단축키</span>
+            </button>
+          </div>
+        </div>
+        {showShortcutHint && (
+          <div className="mt-2 flex items-center gap-3 rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground">
+            <span className="font-medium text-foreground">탭 전환:</span>
+            {TAB_META.map((t) => (
+              <span key={t.value} className="flex items-center gap-1">
+                <kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-mono text-[10px]">
+                  Alt+{t.shortcut}
+                </kbd>
+                <span>{t.shortLabel}</span>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex min-h-0 flex-1 flex-col"
+      >
+        {/* 탭 네비게이션 */}
+        <div className="shrink-0 border-b bg-background px-4">
+          <TabsList className="h-12 bg-transparent gap-1">
+            {TAB_META.map(({ value, label, icon: Icon, shortcut }) => (
+              <TabsTrigger
+                key={value}
+                value={value}
+                className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4 gap-1.5"
+                aria-label={`${label} (Alt+${shortcut})`}
+              >
+                <Icon className="h-4 w-4" />
+                {label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
+
+        {/* 탭 설명 배너 */}
+        <div className="shrink-0 border-b bg-background/60 px-6 py-2">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span
+                className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset ${activeMeta.badgeColor}`}
+              >
+                {activeMeta.shortLabel}
+              </span>
+              <span className="text-xs text-muted-foreground">{activeMeta.detailDesc}</span>
+            </div>
+            <div className="hidden items-center gap-2 sm:flex">
+              {activeMeta.actions.map((action, i) => {
+                const ActionIcon = ACTION_ICONS[i % ACTION_ICONS.length];
+                return (
+                  <span
+                    key={action}
+                    className="flex items-center gap-1 text-xs text-muted-foreground/70"
+                  >
+                    <ActionIcon className="h-3 w-3" />
+                    {action}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* 탭 컨텐츠 */}
+        <TabsContent value="process" className="min-h-0 flex-1 overflow-hidden mt-0">
+          <ProcessMasterTab />
+        </TabsContent>
+
+        <TabsContent value="routing" className="min-h-0 flex-1 overflow-hidden mt-0">
+          <ItemRoutingTab />
+        </TabsContent>
+
+        <TabsContent value="workstandard" className="min-h-0 flex-1 overflow-hidden mt-0">
+          <ProcessWorkStandardTab />
+        </TabsContent>
+      </Tabs>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/production/work-instruction/WorkStandardEditModal.tsx b/frontend/app/(main)/COMPANY_9/production/work-instruction/WorkStandardEditModal.tsx
new file mode 100644
index 00000000..d9167dcb
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/production/work-instruction/WorkStandardEditModal.tsx
@@ -0,0 +1,1007 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { cn } from "@/lib/utils";
+import {
+  Loader2, Save, RotateCcw, Plus, Trash2, Pencil, ClipboardCheck,
+  GripVertical, AlertCircle, ClipboardList,
+} from "lucide-react";
+import { toast } from "sonner";
+import {
+  getWIWorkStandard, copyWorkStandard, saveWIWorkStandard, resetWIWorkStandard,
+  WIWorkItem, WIWorkItemDetail, WIWorkStandardProcess,
+} from "@/lib/api/workInstruction";
+
+interface WorkStandardEditModalProps {
+  open: boolean;
+  onClose: () => void;
+  workInstructionNo: string;
+  routingVersionId: string;
+  routingName: string;
+  itemName: string;
+  itemCode: string;
+}
+
+const PHASES = [
+  { key: "PRE", label: "작업 전 (Pre-Work)" },
+  { key: "IN", label: "작업 중 (In-Work)" },
+  { key: "POST", label: "작업 후 (Post-Work)" },
+];
+
+const DETAIL_TYPES = [
+  { value: "checklist", label: "체크리스트" },
+  { value: "inspection", label: "검사항목" },
+  { value: "procedure", label: "작업절차" },
+  { value: "input", label: "직접입력" },
+  { value: "lookup", label: "문서참조" },
+  { value: "equip_inspection", label: "설비점검" },
+  { value: "equip_condition", label: "설비조건" },
+  { value: "production_result", label: "실적등록" },
+  { value: "material_input", label: "자재투입" },
+];
+
+const INPUT_TYPES = [
+  { value: "text", label: "텍스트" },
+  { value: "number", label: "숫자" },
+  { value: "date", label: "날짜" },
+  { value: "textarea", label: "장문 텍스트" },
+];
+
+const UNIT_OPTIONS = [
+  "mm", "cm", "m", "μm", "℃", "℉", "bar", "Pa", "MPa", "psi",
+  "RPM", "kg", "N", "N·m", "m/s", "m/min", "A", "V", "kW", "%",
+  "L/min", "Hz", "dB", "ea", "g", "mg", "ml", "L",
+];
+
+const getDetailTypeLabel = (type: string) =>
+  DETAIL_TYPES.find(d => d.value === type)?.label || type;
+
+const getContentSummary = (detail: WIWorkItemDetail): string => {
+  const type = detail.detail_type;
+  if (type === "inspection") {
+    const parts = [detail.content];
+    if (detail.inspection_method) parts.push(`[${detail.inspection_method}]`);
+    if (detail.base_value) {
+      parts.push(`(기준: ${detail.base_value}${detail.tolerance ? ` ±${detail.tolerance}` : ""} ${detail.unit || ""})`);
+    }
+    return parts.join(" ");
+  }
+  if (type === "procedure" && detail.duration_minutes) {
+    return `${detail.content} (${detail.duration_minutes}분)`;
+  }
+  if (type === "input" && detail.input_type) {
+    const typeMap: Record<string, string> = { text: "텍스트", number: "숫자", date: "날짜", textarea: "장문" };
+    return `${detail.content} [${typeMap[detail.input_type] || detail.input_type}]`;
+  }
+  if (type === "lookup") return "품목 등록 문서 (자동 연동)";
+  if (type === "equip_inspection") return detail.content || "설비점검";
+  if (type === "equip_condition") {
+    const parts = [detail.content];
+    if (detail.condition_base_value) {
+      parts.push(`(기준: ${detail.condition_base_value}${detail.condition_tolerance ? ` ±${detail.condition_tolerance}` : ""} ${detail.condition_unit || ""})`);
+    }
+    return parts.join(" ");
+  }
+  if (type === "production_result") return "작업수량 / 불량수량 / 양품수량";
+  if (type === "material_input") return "BOM 구성 자재 (자동 연동)";
+  return detail.content || "-";
+};
+
+export function WorkStandardEditModal({
+  open,
+  onClose,
+  workInstructionNo,
+  routingVersionId,
+  routingName,
+  itemName,
+  itemCode,
+}: WorkStandardEditModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [processes, setProcesses] = useState<WIWorkStandardProcess[]>([]);
+  const [isCustom, setIsCustom] = useState(false);
+  const [selectedProcessIdx, setSelectedProcessIdx] = useState(0);
+  const [selectedWorkItemIdByPhase, setSelectedWorkItemIdByPhase] = useState<Record<string, string | null>>({});
+  const [dirty, setDirty] = useState(false);
+
+  // 작업항목 추가/수정 모달
+  const [addItemOpen, setAddItemOpen] = useState(false);
+  const [addItemPhase, setAddItemPhase] = useState("PRE");
+  const [addItemTitle, setAddItemTitle] = useState("");
+  const [addItemRequired, setAddItemRequired] = useState("Y");
+  const [editingWorkItem, setEditingWorkItem] = useState<WIWorkItem | null>(null);
+
+  // 상세 추가/수정 모달
+  const [detailModalOpen, setDetailModalOpen] = useState(false);
+  const [detailModalMode, setDetailModalMode] = useState<"add" | "edit">("add");
+  const [detailModalPhase, setDetailModalPhase] = useState("PRE");
+  const [detailFormData, setDetailFormData] = useState<Partial<WIWorkItemDetail>>({});
+  const [editingDetail, setEditingDetail] = useState<WIWorkItemDetail | null>(null);
+
+  // 데이터 로드
+  const loadData = useCallback(async () => {
+    if (!workInstructionNo || !routingVersionId) return;
+    setLoading(true);
+    try {
+      const res = await getWIWorkStandard(workInstructionNo, routingVersionId);
+      if (res.success && res.data) {
+        setProcesses(res.data.processes);
+        setIsCustom(res.data.isCustom);
+        setSelectedProcessIdx(0);
+        setSelectedWorkItemIdByPhase({});
+        setDirty(false);
+      }
+    } catch (err) {
+      console.error("공정작업기준 로드 실패", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [workInstructionNo, routingVersionId]);
+
+  useEffect(() => {
+    if (open) loadData();
+  }, [open, loadData]);
+
+  const currentProcess = processes[selectedProcessIdx] || null;
+
+  // Phase별 작업항목 그룹핑 (MAIN을 IN으로 매핑)
+  const workItemsByPhase = useMemo(() => {
+    if (!currentProcess) return {};
+    const map: Record<string, WIWorkItem[]> = {};
+    for (const phase of PHASES) {
+      map[phase.key] = currentProcess.workItems.filter(
+        wi => wi.work_phase === phase.key || (phase.key === "IN" && wi.work_phase === "MAIN")
+      );
+    }
+    return map;
+  }, [currentProcess]);
+
+  // 커스텀 복사 확인 후 수정
+  const ensureCustom = useCallback(async () => {
+    if (isCustom) return true;
+    try {
+      const res = await copyWorkStandard(workInstructionNo, routingVersionId);
+      if (res.success) {
+        await loadData();
+        setIsCustom(true);
+        return true;
+      }
+    } catch (err) {
+      toast.error("원본 복사에 실패했습니다");
+    }
+    return false;
+  }, [isCustom, workInstructionNo, routingVersionId, loadData]);
+
+  // 작업항목 추가 모달 열기
+  const openAddWorkItem = useCallback((phaseKey: string) => {
+    setAddItemPhase(phaseKey);
+    setAddItemTitle("");
+    setAddItemRequired("Y");
+    setEditingWorkItem(null);
+    setAddItemOpen(true);
+  }, []);
+
+  // 작업항목 수정 모달 열기
+  const openEditWorkItem = useCallback((item: WIWorkItem) => {
+    setAddItemPhase(item.work_phase);
+    setAddItemTitle(item.title);
+    setAddItemRequired(item.is_required);
+    setEditingWorkItem(item);
+    setAddItemOpen(true);
+  }, []);
+
+  // 작업항목 추가/수정 처리
+  const handleSaveWorkItem = useCallback(async () => {
+    if (!addItemTitle.trim()) { toast.error("제목을 입력하세요"); return; }
+    const ok = await ensureCustom();
+    if (!ok || !currentProcess) return;
+
+    if (editingWorkItem) {
+      // 수정
+      setProcesses(prev => {
+        const next = [...prev];
+        const workItems = [...next[selectedProcessIdx].workItems];
+        const idx = workItems.findIndex(wi => wi.id === editingWorkItem.id);
+        if (idx >= 0) {
+          workItems[idx] = { ...workItems[idx], title: addItemTitle.trim(), is_required: addItemRequired };
+        }
+        next[selectedProcessIdx] = { ...next[selectedProcessIdx], workItems };
+        return next;
+      });
+    } else {
+      // 추가
+      const phaseKey = addItemPhase === "IN" ? "IN" : addItemPhase;
+      const phaseItems = currentProcess.workItems.filter(
+        wi => wi.work_phase === phaseKey || (phaseKey === "IN" && wi.work_phase === "MAIN")
+      );
+      const newItem: WIWorkItem = {
+        id: `temp-${Date.now()}`,
+        routing_detail_id: currentProcess.routing_detail_id,
+        work_phase: phaseKey,
+        title: addItemTitle.trim(),
+        is_required: addItemRequired,
+        sort_order: phaseItems.length + 1,
+        details: [],
+      };
+
+      setProcesses(prev => {
+        const next = [...prev];
+        next[selectedProcessIdx] = {
+          ...next[selectedProcessIdx],
+          workItems: [...next[selectedProcessIdx].workItems, newItem],
+        };
+        return next;
+      });
+
+      setSelectedWorkItemIdByPhase(prev => ({ ...prev, [addItemPhase]: newItem.id! }));
+    }
+
+    setAddItemOpen(false);
+    setDirty(true);
+  }, [addItemTitle, addItemRequired, addItemPhase, ensureCustom, currentProcess, selectedProcessIdx, editingWorkItem]);
+
+  // 작업항목 삭제
+  const handleDeleteWorkItem = useCallback(async (id: string, phaseKey: string) => {
+    const ok = await ensureCustom();
+    if (!ok) return;
+
+    setProcesses(prev => {
+      const next = [...prev];
+      next[selectedProcessIdx] = {
+        ...next[selectedProcessIdx],
+        workItems: next[selectedProcessIdx].workItems.filter(wi => wi.id !== id),
+      };
+      return next;
+    });
+    if (selectedWorkItemIdByPhase[phaseKey] === id) {
+      setSelectedWorkItemIdByPhase(prev => ({ ...prev, [phaseKey]: null }));
+    }
+    setDirty(true);
+  }, [ensureCustom, selectedProcessIdx, selectedWorkItemIdByPhase]);
+
+  // 상세 추가 모달 열기
+  const openAddDetail = useCallback((phaseKey: string) => {
+    setDetailModalPhase(phaseKey);
+    setDetailModalMode("add");
+    setEditingDetail(null);
+    setDetailFormData({
+      detail_type: DETAIL_TYPES[0].value,
+      content: "",
+      is_required: "Y",
+    });
+    setDetailModalOpen(true);
+  }, []);
+
+  // 상세 수정 모달 열기
+  const openEditDetail = useCallback((detail: WIWorkItemDetail, phaseKey: string) => {
+    setDetailModalPhase(phaseKey);
+    setDetailModalMode("edit");
+    setEditingDetail(detail);
+    setDetailFormData({ ...detail });
+    setDetailModalOpen(true);
+  }, []);
+
+  // 상세 추가/수정 처리
+  const handleSaveDetail = useCallback(async () => {
+    const type = detailFormData.detail_type || "";
+    if (!type) return;
+
+    // 유효성 검사 (내용이 필요한 유형)
+    const needsContent = ["checklist", "procedure", "input", "equip_condition"];
+    if (needsContent.includes(type) && !detailFormData.content?.trim()) {
+      toast.error("내용을 입력하세요");
+      return;
+    }
+    if (type === "inspection" && !detailFormData.content?.trim()) {
+      toast.error("검사 항목명을 입력하세요");
+      return;
+    }
+
+    const workItemId = selectedWorkItemIdByPhase[detailModalPhase];
+    if (!workItemId) return;
+    const ok = await ensureCustom();
+    if (!ok) return;
+
+    // content 자동 설정 (UI에서 직접 입력이 없는 유형들)
+    const submitData = { ...detailFormData };
+    if (type === "lookup") submitData.content = submitData.content || "품목 등록 문서 (자동 연동)";
+    if (type === "equip_inspection") submitData.content = submitData.content || "설비점검";
+    if (type === "production_result") submitData.content = submitData.content || "작업수량 / 불량수량 / 양품수량";
+    if (type === "material_input") submitData.content = submitData.content || "BOM 구성 자재 (자동 연동)";
+
+    setProcesses(prev => {
+      const next = [...prev];
+      const workItems = [...next[selectedProcessIdx].workItems];
+      const wiIdx = workItems.findIndex(wi => wi.id === workItemId);
+      if (wiIdx < 0) return prev;
+
+      if (detailModalMode === "edit" && editingDetail) {
+        // 수정
+        const details = (workItems[wiIdx].details || []).map(d =>
+          d.id === editingDetail.id ? { ...d, ...submitData } : d
+        );
+        workItems[wiIdx] = { ...workItems[wiIdx], details };
+      } else {
+        // 추가
+        const newDetail: WIWorkItemDetail = {
+          ...submitData,
+          id: `temp-detail-${Date.now()}`,
+          work_item_id: workItemId,
+          sort_order: (workItems[wiIdx].details?.length || 0) + 1,
+        };
+        workItems[wiIdx] = {
+          ...workItems[wiIdx],
+          details: [...(workItems[wiIdx].details || []), newDetail],
+          detail_count: (workItems[wiIdx].detail_count || 0) + 1,
+        };
+      }
+      next[selectedProcessIdx] = { ...next[selectedProcessIdx], workItems };
+      return next;
+    });
+
+    setDetailModalOpen(false);
+    setDirty(true);
+  }, [detailFormData, detailModalPhase, detailModalMode, editingDetail, selectedWorkItemIdByPhase, ensureCustom, selectedProcessIdx]);
+
+  // 상세 삭제
+  const handleDeleteDetail = useCallback(async (detailId: string, phaseKey: string) => {
+    const workItemId = selectedWorkItemIdByPhase[phaseKey];
+    if (!workItemId) return;
+    const ok = await ensureCustom();
+    if (!ok) return;
+
+    setProcesses(prev => {
+      const next = [...prev];
+      const workItems = [...next[selectedProcessIdx].workItems];
+      const wiIdx = workItems.findIndex(wi => wi.id === workItemId);
+      if (wiIdx >= 0) {
+        workItems[wiIdx] = {
+          ...workItems[wiIdx],
+          details: (workItems[wiIdx].details || []).filter(d => d.id !== detailId),
+          detail_count: Math.max(0, (workItems[wiIdx].detail_count || 1) - 1),
+        };
+      }
+      next[selectedProcessIdx] = { ...next[selectedProcessIdx], workItems };
+      return next;
+    });
+    setDirty(true);
+  }, [selectedWorkItemIdByPhase, ensureCustom, selectedProcessIdx]);
+
+  // 저장
+  const handleSave = useCallback(async () => {
+    if (!currentProcess) return;
+    setSaving(true);
+    try {
+      const ok = await ensureCustom();
+      if (!ok) return;
+
+      const res = await saveWIWorkStandard(
+        workInstructionNo,
+        currentProcess.routing_detail_id,
+        currentProcess.workItems
+      );
+      if (res.success) {
+        toast.success("공정작업기준이 저장되었습니다");
+        setDirty(false);
+        await loadData();
+      } else {
+        toast.error("저장에 실패했습니다");
+      }
+    } catch (err) {
+      toast.error("저장 중 오류가 발생했습니다");
+    } finally {
+      setSaving(false);
+    }
+  }, [currentProcess, ensureCustom, workInstructionNo, loadData]);
+
+  // 원본으로 초기화
+  const handleReset = useCallback(async () => {
+    if (!confirm("커스터마이징한 내용을 모두 삭제하고 원본으로 되돌리시겠습니까?")) return;
+    try {
+      const res = await resetWIWorkStandard(workInstructionNo);
+      if (res.success) {
+        toast.success("원본으로 초기화되었습니다");
+        await loadData();
+      }
+    } catch (err) {
+      toast.error("초기화에 실패했습니다");
+    }
+  }, [workInstructionNo, loadData]);
+
+  const updateDetailField = (field: string, value: unknown) => {
+    setDetailFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={v => { if (!v) onClose(); }}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[1200px] h-[85vh] flex flex-col p-0 gap-0">
+        <DialogHeader className="px-6 py-4 border-b shrink-0">
+          <DialogTitle className="text-base flex items-center gap-2">
+            <ClipboardCheck className="w-4 h-4" />
+            공정작업기준 수정 - {itemName}
+            {routingName && <Badge variant="secondary" className="text-xs ml-2">{routingName}</Badge>}
+            {isCustom && <Badge variant="outline" className="text-xs ml-1 border-amber-300 text-amber-700">커스텀</Badge>}
+          </DialogTitle>
+          <DialogDescription className="text-xs">
+            작업지시 [{workInstructionNo}]에 대한 공정작업기준을 수정합니다. 원본에 영향을 주지 않습니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        {loading ? (
+          <div className="flex-1 flex items-center justify-center">
+            <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+          </div>
+        ) : processes.length === 0 ? (
+          <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
+            <AlertCircle className="w-10 h-10 mb-3 opacity-30" />
+            <p className="text-sm">라우팅에 등록된 공정이 없습니다</p>
+          </div>
+        ) : (
+          <div className="flex-1 flex flex-col overflow-hidden">
+            {/* 공정 탭 */}
+            <div className="flex items-center gap-1 px-4 py-2 border-b bg-muted/30 overflow-x-auto shrink-0">
+              {processes.map((proc, idx) => (
+                <Button
+                  key={proc.routing_detail_id}
+                  variant={selectedProcessIdx === idx ? "default" : "ghost"}
+                  size="sm"
+                  className={cn("text-xs shrink-0 h-8", selectedProcessIdx === idx && "shadow-sm")}
+                  onClick={() => {
+                    setSelectedProcessIdx(idx);
+                    setSelectedWorkItemIdByPhase({});
+                  }}
+                >
+                  <span className="mr-1.5 font-mono text-[10px] opacity-70">{proc.seq_no}.</span>
+                  {proc.process_name}
+                  {proc.workItems.length > 0 && (
+                    <Badge variant="secondary" className="ml-1.5 text-[10px] h-4 px-1">{proc.workItems.length}</Badge>
+                  )}
+                </Button>
+              ))}
+            </div>
+
+            {/* Phase별 세로 섹션 */}
+            <div className="flex-1 overflow-y-auto space-y-4 p-4">
+              {PHASES.map(phase => {
+                const phaseItems = workItemsByPhase[phase.key] || [];
+                const selectedWiId = selectedWorkItemIdByPhase[phase.key] || null;
+                const selectedWi = phaseItems.find(wi => wi.id === selectedWiId) || null;
+
+                return (
+                  <div key={phase.key} className="rounded-lg border bg-card">
+                    {/* 섹션 헤더 */}
+                    <div className="flex items-center justify-between border-b px-4 py-2.5">
+                      <div className="flex items-center gap-2">
+                        <h3 className="text-sm font-semibold">{phase.label}</h3>
+                        <Badge variant="secondary" className="h-5 rounded-full px-2 text-[10px]">
+                          {phaseItems.length}개 항목
+                        </Badge>
+                      </div>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-7 gap-1 text-xs"
+                        onClick={() => openAddWorkItem(phase.key)}
+                      >
+                        <Plus className="h-3 w-3" />
+                        작업항목 추가
+                      </Button>
+                    </div>
+
+                    {/* 좌우 분할 */}
+                    <div className="flex min-h-[140px]">
+                      {/* 좌측: 240px 작업항목 카드 */}
+                      <div className="w-[240px] shrink-0 border-r p-2">
+                        {phaseItems.length === 0 ? (
+                          <div className="flex flex-col items-center justify-center py-6 text-center">
+                            <ClipboardList className="mb-1 h-6 w-6 text-muted-foreground/40" />
+                            <p className="text-[11px] text-muted-foreground">등록된 항목이 없습니다</p>
+                          </div>
+                        ) : (
+                          <div className="space-y-1.5">
+                            {phaseItems.map(item => (
+                              <div
+                                key={item.id}
+                                onClick={() => setSelectedWorkItemIdByPhase(prev => ({ ...prev, [phase.key]: item.id! }))}
+                                className={cn(
+                                  "group flex cursor-pointer items-start gap-2 rounded-lg border p-3 transition-all",
+                                  "hover:border-primary/30 hover:shadow-sm",
+                                  selectedWiId === item.id
+                                    ? "border-primary bg-primary/5 shadow-sm"
+                                    : "border-border bg-card"
+                                )}
+                              >
+                                <GripVertical className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground/50" />
+                                <div className="min-w-0 flex-1">
+                                  <div className="flex items-center gap-2">
+                                    <span className="truncate text-sm font-medium">{item.title}</span>
+                                  </div>
+                                  <div className="mt-1 flex items-center gap-2">
+                                    <Badge variant="secondary" className="h-5 px-1.5 text-[10px] font-normal">
+                                      {item.details?.length || item.detail_count || 0}개
+                                    </Badge>
+                                    <Badge
+                                      variant={item.is_required === "Y" ? "default" : "outline"}
+                                      className="h-5 px-1.5 text-[10px] font-normal"
+                                    >
+                                      {item.is_required === "Y" ? "필수" : "선택"}
+                                    </Badge>
+                                  </div>
+                                </div>
+                                <div className="flex shrink-0 gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+                                  <Button
+                                    variant="ghost" size="icon" className="h-6 w-6"
+                                    onClick={e => { e.stopPropagation(); openEditWorkItem(item); }}
+                                  >
+                                    <Pencil className="h-3 w-3" />
+                                  </Button>
+                                  <Button
+                                    variant="ghost" size="icon" className="h-6 w-6 text-destructive hover:text-destructive"
+                                    onClick={e => { e.stopPropagation(); handleDeleteWorkItem(item.id!, phase.key); }}
+                                  >
+                                    <Trash2 className="h-3 w-3" />
+                                  </Button>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+
+                      {/* 우측: 상세 테이블 */}
+                      <div className="flex-1 flex flex-col">
+                        {!selectedWi ? (
+                          <div className="flex h-full flex-col items-center justify-center text-center">
+                            <p className="text-sm text-muted-foreground">왼쪽에서 항목을 선택하세요</p>
+                          </div>
+                        ) : (
+                          <>
+                            {/* 상세 헤더 */}
+                            <div className="flex items-center justify-between border-b px-4 py-2">
+                              <div className="flex items-center gap-2">
+                                <span className="text-sm font-semibold">{selectedWi.title}</span>
+                                <Badge variant="secondary" className="text-[10px]">
+                                  {selectedWi.details?.length || 0}개
+                                </Badge>
+                              </div>
+                              <Button
+                                variant="outline" size="sm" className="h-7 gap-1 text-xs"
+                                onClick={() => openAddDetail(phase.key)}
+                              >
+                                <Plus className="h-3 w-3" />
+                                상세 추가
+                              </Button>
+                            </div>
+
+                            {/* 테이블 */}
+                            <div className="flex-1 overflow-y-auto">
+                              <table className="w-full text-xs">
+                                <thead className="sticky top-0 bg-muted/50">
+                                  <tr className="border-b">
+                                    <th className="w-12 px-2 py-2 text-center font-medium text-muted-foreground">순서</th>
+                                    <th className="w-20 px-2 py-2 text-left font-medium text-muted-foreground">유형</th>
+                                    <th className="px-2 py-2 text-left font-medium text-muted-foreground">내용</th>
+                                    <th className="w-14 px-2 py-2 text-center font-medium text-muted-foreground">필수</th>
+                                    <th className="w-16 px-2 py-2 text-center font-medium text-muted-foreground">관리</th>
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                  {(selectedWi.details || []).map((detail, idx) => (
+                                    <tr key={detail.id || idx} className="border-b transition-colors hover:bg-muted/30">
+                                      <td className="px-2 py-1.5 text-center text-muted-foreground">{idx + 1}</td>
+                                      <td className="px-2 py-1.5">
+                                        <Badge variant="outline" className="text-[10px] font-normal">
+                                          {getDetailTypeLabel(detail.detail_type || "checklist")}
+                                        </Badge>
+                                      </td>
+                                      <td className="px-2 py-1.5">{getContentSummary(detail)}</td>
+                                      <td className="px-2 py-1.5 text-center">
+                                        <Badge
+                                          variant={detail.is_required === "Y" ? "default" : "secondary"}
+                                          className="text-[10px] font-normal"
+                                        >
+                                          {detail.is_required === "Y" ? "필수" : "선택"}
+                                        </Badge>
+                                      </td>
+                                      <td className="px-2 py-1.5 text-center">
+                                        <div className="flex justify-center gap-0.5">
+                                          <Button
+                                            variant="ghost" size="icon" className="h-6 w-6"
+                                            onClick={() => openEditDetail(detail, phase.key)}
+                                          >
+                                            <Pencil className="h-3 w-3" />
+                                          </Button>
+                                          <Button
+                                            variant="ghost" size="icon" className="h-6 w-6 text-destructive hover:text-destructive"
+                                            onClick={() => handleDeleteDetail(detail.id!, phase.key)}
+                                          >
+                                            <Trash2 className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </td>
+                                    </tr>
+                                  ))}
+                                </tbody>
+                              </table>
+
+                              {(!selectedWi.details || selectedWi.details.length === 0) && (
+                                <div className="flex flex-col items-center justify-center py-8 text-center">
+                                  <p className="text-xs text-muted-foreground">
+                                    상세 항목이 없습니다. &quot;상세 추가&quot; 버튼을 클릭하여 추가하세요.
+                                  </p>
+                                </div>
+                              )}
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        <DialogFooter className="px-6 py-3 border-t shrink-0 flex items-center justify-between">
+          <div>
+            {isCustom && (
+              <Button variant="outline" size="sm" className="text-xs" onClick={handleReset}>
+                <RotateCcw className="w-3.5 h-3.5 mr-1.5" /> 원본으로 초기화
+              </Button>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" onClick={onClose}>닫기</Button>
+            <Button onClick={handleSave} disabled={saving || (!dirty && isCustom)}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              저장
+            </Button>
+          </div>
+        </DialogFooter>
+
+        {/* 작업항목 추가/수정 다이얼로그 */}
+        <Dialog open={addItemOpen} onOpenChange={setAddItemOpen}>
+          <DialogContent className="max-w-[95vw] sm:max-w-[400px]" onClick={e => e.stopPropagation()}>
+            <DialogHeader>
+              <DialogTitle className="text-base">
+                작업항목 {editingWorkItem ? "수정" : "추가"}
+              </DialogTitle>
+              <DialogDescription className="text-xs">
+                {PHASES.find(p => p.key === addItemPhase)?.label} 단계에 작업항목을 {editingWorkItem ? "수정" : "추가"}합니다.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-3">
+              <div>
+                <Label className="text-xs">제목 *</Label>
+                <Input value={addItemTitle} onChange={e => setAddItemTitle(e.target.value)} placeholder="작업항목 제목" className="h-8 text-xs mt-1" />
+              </div>
+              <div className="flex items-center gap-2">
+                <Checkbox checked={addItemRequired === "Y"} onCheckedChange={v => setAddItemRequired(v ? "Y" : "N")} />
+                <Label className="text-xs">필수 항목</Label>
+              </div>
+            </div>
+            <DialogFooter className="gap-2">
+              <Button variant="outline" size="sm" onClick={() => setAddItemOpen(false)}>취소</Button>
+              <Button size="sm" onClick={handleSaveWorkItem}>{editingWorkItem ? "수정" : "추가"}</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* 상세 추가/수정 다이얼로그 (유형별 동적 필드) */}
+        <Dialog open={detailModalOpen} onOpenChange={v => { if (!v) setDetailModalOpen(false); }}>
+          <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
+            <DialogHeader>
+              <DialogTitle className="text-base">
+                상세 항목 {detailModalMode === "add" ? "추가" : "수정"}
+              </DialogTitle>
+              <DialogDescription className="text-xs">
+                상세 항목의 유형을 선택하고 내용을 입력하세요
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4">
+              {/* 유형 선택 */}
+              <div>
+                <Label className="text-xs">유형 <span className="text-destructive">*</span></Label>
+                <Select
+                  value={detailFormData.detail_type || ""}
+                  onValueChange={v => {
+                    setDetailFormData({
+                      detail_type: v,
+                      is_required: detailFormData.is_required || "Y",
+                    });
+                  }}
+                >
+                  <SelectTrigger className="mt-1 h-8 text-xs">
+                    <SelectValue placeholder="선택하세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {DETAIL_TYPES.map(dt => (
+                      <SelectItem key={dt.value} value={dt.value} className="text-xs">{dt.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* 체크리스트 */}
+              {detailFormData.detail_type === "checklist" && (
+                <div>
+                  <Label className="text-xs">체크 내용 <span className="text-destructive">*</span></Label>
+                  <Input
+                    value={detailFormData.content || ""}
+                    onChange={e => updateDetailField("content", e.target.value)}
+                    placeholder="예: 전원 상태 확인"
+                    className="mt-1 h-8 text-xs"
+                  />
+                </div>
+              )}
+
+              {/* 검사항목 */}
+              {detailFormData.detail_type === "inspection" && (
+                <>
+                  <div>
+                    <Label className="text-xs">검사 항목명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="예: 외경 치수"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <Label className="text-xs">검사 방법</Label>
+                      <Input
+                        value={detailFormData.inspection_method || ""}
+                        onChange={e => updateDetailField("inspection_method", e.target.value)}
+                        placeholder="예: 마이크로미터"
+                        className="mt-1 h-8 text-xs"
+                      />
+                    </div>
+                    <div>
+                      <Label className="text-xs">단위</Label>
+                      <Select
+                        value={detailFormData.unit || ""}
+                        onValueChange={v => updateDetailField("unit", v)}
+                      >
+                        <SelectTrigger className="mt-1 h-8 text-xs">
+                          <SelectValue placeholder="단위 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {UNIT_OPTIONS.map(u => (
+                            <SelectItem key={u} value={u}>{u}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="rounded-lg border bg-muted/30 p-3">
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.base_value || ""}
+                          onChange={e => updateDetailField("base_value", e.target.value)}
+                          placeholder="기준값"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                      <span className="text-sm font-semibold text-muted-foreground">&plusmn;</span>
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.tolerance || ""}
+                          onChange={e => updateDetailField("tolerance", e.target.value)}
+                          placeholder="오차범위"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {/* 작업절차 */}
+              {detailFormData.detail_type === "procedure" && (
+                <>
+                  <div>
+                    <Label className="text-xs">작업 내용 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="예: 자재 투입"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs">소요 시간 (분)</Label>
+                    <Input
+                      type="number"
+                      value={detailFormData.duration_minutes ?? ""}
+                      onChange={e => updateDetailField("duration_minutes", e.target.value ? Number(e.target.value) : undefined)}
+                      placeholder="예: 5"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                </>
+              )}
+
+              {/* 직접입력 */}
+              {detailFormData.detail_type === "input" && (
+                <>
+                  <div>
+                    <Label className="text-xs">입력 항목명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="예: 작업자 의견"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs">입력 타입</Label>
+                    <Select
+                      value={detailFormData.input_type || "text"}
+                      onValueChange={v => updateDetailField("input_type", v)}
+                    >
+                      <SelectTrigger className="mt-1 h-8 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {INPUT_TYPES.map(t => (
+                          <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </>
+              )}
+
+              {/* 문서참조 */}
+              {detailFormData.detail_type === "lookup" && (
+                <div className="flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2.5">
+                  <span className="text-xs text-blue-800">
+                    해당 품목에 등록된 문서를 자동으로 불러옵니다.
+                  </span>
+                </div>
+              )}
+
+              {/* 설비점검 */}
+              {detailFormData.detail_type === "equip_inspection" && (
+                <div>
+                  <Label className="text-xs">점검 내용</Label>
+                  <Input
+                    value={detailFormData.content || ""}
+                    onChange={e => updateDetailField("content", e.target.value)}
+                    placeholder="예: 설비 가동 전 안전 점검"
+                    className="mt-1 h-8 text-xs"
+                  />
+                </div>
+              )}
+
+              {/* 설비조건 */}
+              {detailFormData.detail_type === "equip_condition" && (
+                <>
+                  <div>
+                    <Label className="text-xs">조건명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={detailFormData.content || ""}
+                      onChange={e => updateDetailField("content", e.target.value)}
+                      placeholder="조건명 (예: 온도, 압력, RPM)"
+                      className="mt-1 h-8 text-xs"
+                    />
+                  </div>
+                  <div className="rounded-lg border bg-muted/30 p-3 space-y-3">
+                    <div className="flex gap-2">
+                      <div className="flex-[0.6]">
+                        <Select
+                          value={detailFormData.condition_unit || ""}
+                          onValueChange={v => updateDetailField("condition_unit", v)}
+                        >
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="단위" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {UNIT_OPTIONS.map(u => (
+                              <SelectItem key={u} value={u}>{u}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.condition_base_value || ""}
+                          onChange={e => updateDetailField("condition_base_value", e.target.value)}
+                          placeholder="기준값"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                      <span className="text-sm font-semibold text-muted-foreground">&plusmn;</span>
+                      <div className="flex-1">
+                        <Input
+                          type="number"
+                          step="any"
+                          value={detailFormData.condition_tolerance || ""}
+                          onChange={e => updateDetailField("condition_tolerance", e.target.value)}
+                          placeholder="오차범위"
+                          className="h-8 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {/* 실적등록 */}
+              {detailFormData.detail_type === "production_result" && (
+                <div className="rounded-lg border border-sky-200 bg-sky-50 p-3">
+                  <p className="text-xs font-semibold text-sky-800">작업수량 / 불량수량 / 양품수량</p>
+                  <p className="mt-1 text-[11px] text-muted-foreground">실적 입력 항목이 자동으로 생성됩니다.</p>
+                </div>
+              )}
+
+              {/* 자재투입 */}
+              {detailFormData.detail_type === "material_input" && (
+                <div className="rounded-lg border border-sky-200 bg-sky-50 p-3">
+                  <p className="text-xs font-semibold text-sky-800">BOM 구성 자재 (자동 연동)</p>
+                  <p className="mt-1 text-[11px] text-muted-foreground">품목에 등록된 BOM 구성 자재가 자동으로 적용됩니다.</p>
+                </div>
+              )}
+
+              {/* 필수 여부 (모든 유형 공통) */}
+              {detailFormData.detail_type && (
+                <div>
+                  <Label className="text-xs">필수 여부</Label>
+                  <Select
+                    value={detailFormData.is_required || "Y"}
+                    onValueChange={v => updateDetailField("is_required", v)}
+                  >
+                    <SelectTrigger className="mt-1 h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y">필수</SelectItem>
+                      <SelectItem value="N">선택</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+
+              {/* 비고 (모든 유형 공통) */}
+              {detailFormData.detail_type && (
+                <div>
+                  <Label className="text-xs">비고</Label>
+                  <Input
+                    value={detailFormData.remark || ""}
+                    onChange={e => updateDetailField("remark", e.target.value)}
+                    placeholder="비고 입력"
+                    className="mt-1 h-8 text-xs"
+                  />
+                </div>
+              )}
+            </div>
+
+            <DialogFooter className="gap-2">
+              <Button variant="outline" size="sm" onClick={() => setDetailModalOpen(false)}>취소</Button>
+              <Button size="sm" onClick={handleSaveDetail}>{detailModalMode === "add" ? "추가" : "수정"}</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/production/work-instruction/page.tsx b/frontend/app/(main)/COMPANY_9/production/work-instruction/page.tsx
new file mode 100644
index 00000000..08ace7ec
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/production/work-instruction/page.tsx
@@ -0,0 +1,843 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Plus, Trash2, Save, X, ChevronLeft, ChevronRight, Search, Loader2, Wrench, Pencil, CheckCircle2, ArrowRight, Check, ChevronsUpDown, ClipboardCheck, Inbox, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+// API: /work-instruction/*
+import {
+  getWorkInstructionList, previewWorkInstructionNo, saveWorkInstruction, deleteWorkInstructions,
+  getWIItemSource, getWISalesOrderSource, getWIProductionPlanSource, getEquipmentList, getEmployeeList,
+  getRoutingVersions, RoutingVersionData,
+} from "@/lib/api/workInstruction";
+import { WorkStandardEditModal } from "./WorkStandardEditModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "work_instruction_no", label: "작업지시번호" },
+  { key: "status", label: "상태" },
+  { key: "progress", label: "진행현황" },
+  { key: "item_name", label: "품목명" },
+  { key: "spec", label: "규격" },
+  { key: "qty", label: "수량" },
+  { key: "equipment", label: "설비" },
+  { key: "routing", label: "라우팅" },
+  { key: "work_team", label: "작업조" },
+  { key: "worker", label: "작업자" },
+  { key: "start_date", label: "시작일" },
+  { key: "end_date", label: "완료일" },
+  { key: "actions", label: "작업" },
+];
+
+type SourceType = "production" | "order" | "item";
+
+const STATUS_BADGE: Record<string, { label: string; cls: string }> = {
+  "일반": { label: "일반", cls: "bg-primary/10 text-primary border-primary/20" },
+  "긴급": { label: "긴급", cls: "bg-destructive/10 text-destructive border-destructive/20" },
+};
+const PROGRESS_BADGE: Record<string, { label: string; cls: string }> = {
+  "대기": { label: "대기", cls: "bg-warning/10 text-warning" },
+  "진행중": { label: "진행중", cls: "bg-primary/10 text-primary" },
+  "완료": { label: "완료", cls: "bg-success/10 text-success" },
+};
+
+interface EquipmentOption { id: string; equipment_code: string; equipment_name: string; }
+interface EmployeeOption { user_id: string; user_name: string; dept_name: string | null; }
+interface SelectedItem {
+  itemCode: string; itemName: string; spec: string; qty: number; remark: string;
+  sourceType: SourceType; sourceTable: string; sourceId: string | number;
+  routing?: string; routingOptions?: RoutingVersionData[];
+}
+
+export default function WorkInstructionPage() {
+  const ts = useTableSettings("c16-work-instruction", "work_instruction", GRID_COLUMNS);
+  const [orders, setOrders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [equipmentOptions, setEquipmentOptions] = useState<EquipmentOption[]>([]);
+  const [employeeOptions, setEmployeeOptions] = useState<EmployeeOption[]>([]);
+
+  // 검색
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 1단계: 등록 모달
+  const [isRegModalOpen, setIsRegModalOpen] = useState(false);
+  const [regSourceType, setRegSourceType] = useState<SourceType | "">("");
+  const [regSourceData, setRegSourceData] = useState<any[]>([]);
+  const [regSourceLoading, setRegSourceLoading] = useState(false);
+  const [regKeyword, setRegKeyword] = useState("");
+  const [regCheckedIds, setRegCheckedIds] = useState<Set<string>>(new Set());
+  const [regMergeSameItem, setRegMergeSameItem] = useState(true);
+  const [regPage, setRegPage] = useState(1);
+  const [regPageSize] = useState(20);
+  const [regTotalCount, setRegTotalCount] = useState(0);
+
+  // 2단계: 확인 모달
+  const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
+  const [confirmItems, setConfirmItems] = useState<SelectedItem[]>([]);
+  const [confirmWiNo, setConfirmWiNo] = useState("");
+  const [confirmStatus, setConfirmStatus] = useState("일반");
+  const [confirmStartDate, setConfirmStartDate] = useState("");
+  const [confirmEndDate, setConfirmEndDate] = useState("");
+  const nv = (v: string) => v || "none";
+  const fromNv = (v: string) => v === "none" ? "" : v;
+  const [confirmEquipmentId, setConfirmEquipmentId] = useState("");
+  const [confirmWorkTeam, setConfirmWorkTeam] = useState("");
+  const [confirmWorker, setConfirmWorker] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  // 등록 확인 모달 — 인라인 추가 폼
+  const [confirmAddQty, setConfirmAddQty] = useState("");
+  const [confirmAddWorkerOpen, setConfirmAddWorkerOpen] = useState(false);
+
+  // 수정 모달
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [editOrder, setEditOrder] = useState<any>(null);
+  const [editItems, setEditItems] = useState<SelectedItem[]>([]);
+  const [editStatus, setEditStatus] = useState("일반");
+  const [editStartDate, setEditStartDate] = useState("");
+  const [editEndDate, setEditEndDate] = useState("");
+  const [editEquipmentId, setEditEquipmentId] = useState("");
+  const [editWorkTeam, setEditWorkTeam] = useState("");
+  const [editWorker, setEditWorker] = useState("");
+  const [editRemark, setEditRemark] = useState("");
+  const [editSaving, setEditSaving] = useState(false);
+  const [addQty, setAddQty] = useState("");
+  const [addEquipment, setAddEquipment] = useState("");
+  const [addWorkTeam, setAddWorkTeam] = useState("");
+  const [addWorker, setAddWorker] = useState("");
+  const [confirmWorkerOpen, setConfirmWorkerOpen] = useState(false);
+  const [editWorkerOpen, setEditWorkerOpen] = useState(false);
+  const [addWorkerOpen, setAddWorkerOpen] = useState(false);
+
+  // 라우팅 관련 상태
+  const [confirmRouting, setConfirmRouting] = useState("");
+  const [confirmRoutingOptions, setConfirmRoutingOptions] = useState<RoutingVersionData[]>([]);
+  const [editRouting, setEditRouting] = useState("");
+  const [editRoutingOptions, setEditRoutingOptions] = useState<RoutingVersionData[]>([]);
+
+  // 공정작업기준 모달 상태
+  const [wsModalOpen, setWsModalOpen] = useState(false);
+  const [wsModalWiNo, setWsModalWiNo] = useState("");
+  const [wsModalRoutingId, setWsModalRoutingId] = useState("");
+  const [wsModalRoutingName, setWsModalRoutingName] = useState("");
+  const [wsModalItemName, setWsModalItemName] = useState("");
+  const [wsModalItemCode, setWsModalItemCode] = useState("");
+
+  useEffect(() => {
+    getEquipmentList().then(r => { if (r.success) setEquipmentOptions(r.data || []); });
+    getEmployeeList().then(r => { if (r.success) setEmployeeOptions(r.data || []); });
+  }, []);
+
+  const fetchOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: any = {};
+      for (const f of searchFilters) {
+        if (f.columnName === "start_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split("|");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status" && f.value) {
+          params.status = f.value;
+        } else if (f.columnName === "progress" && f.value) {
+          params.progressStatus = f.value;
+        } else if (f.columnName === "work_instruction_no" && f.value) {
+          params.keyword = f.value;
+        } else if (f.columnName === "item_name" && f.value) {
+          params.keyword = f.value;
+        }
+      }
+      const r = await getWorkInstructionList(params);
+      if (r.success) setOrders(r.data || []);
+    } catch {} finally { setLoading(false); }
+  }, [searchFilters]);
+
+  useEffect(() => { fetchOrders(); }, [fetchOrders]);
+
+  // ─── 1단계 등록 ───
+  const openRegModal = () => {
+    setRegSourceType("production"); setRegSourceData([]); setRegKeyword(""); setRegCheckedIds(new Set());
+    setRegPage(1); setRegTotalCount(0); setRegMergeSameItem(true); setIsRegModalOpen(true);
+  };
+
+  const fetchRegSource = useCallback(async (pageOverride?: number) => {
+    if (!regSourceType) return;
+    setRegSourceLoading(true);
+    try {
+      const p = pageOverride ?? regPage;
+      const params: any = { page: p, pageSize: regPageSize };
+      if (regKeyword.trim()) params.keyword = regKeyword.trim();
+      let r;
+      switch (regSourceType) {
+        case "production": r = await getWIProductionPlanSource(params); break;
+        case "order": r = await getWISalesOrderSource(params); break;
+        case "item": r = await getWIItemSource(params); break;
+      }
+      if (r?.success) { setRegSourceData(r.data || []); setRegTotalCount(r.totalCount || 0); }
+    } catch {} finally { setRegSourceLoading(false); }
+  }, [regSourceType, regKeyword, regPage, regPageSize]);
+
+  useEffect(() => { if (isRegModalOpen && regSourceType) { setRegPage(1); setRegCheckedIds(new Set()); fetchRegSource(1); } }, [regSourceType]);
+
+  const getRegId = (item: any) => regSourceType === "item" ? (item.item_code || item.id) : String(item.id);
+  const toggleRegItem = (id: string) => { setRegCheckedIds(prev => { const n = new Set(prev); if (n.has(id)) n.delete(id); else n.add(id); return n; }); };
+  const toggleRegAll = () => { if (regCheckedIds.size === regSourceData.length) setRegCheckedIds(new Set()); else setRegCheckedIds(new Set(regSourceData.map(getRegId))); };
+
+  const applyRegistration = () => {
+    if (regCheckedIds.size === 0) { alert("품목을 선택해주세요."); return; }
+    const items: SelectedItem[] = [];
+    for (const item of regSourceData) {
+      if (!regCheckedIds.has(getRegId(item))) continue;
+      if (regSourceType === "item") items.push({ itemCode: item.item_code, itemName: item.item_name || "", spec: item.spec || "", qty: 1, remark: "", sourceType: "item", sourceTable: "item_info", sourceId: item.item_code });
+      else if (regSourceType === "order") items.push({ itemCode: item.item_code || "", itemName: item.item_name || "", spec: item.spec || "", qty: Number(item.qty || 1), remark: "", sourceType: "order", sourceTable: "sales_order_detail", sourceId: item.id });
+      else items.push({ itemCode: item.item_code || "", itemName: item.item_name || "", spec: "", qty: Number(item.plan_qty || 1), remark: "", sourceType: "production", sourceTable: "production_plan_mng", sourceId: item.id });
+    }
+
+    // 동일품목 합산
+    if (regMergeSameItem) {
+      const merged = new Map<string, SelectedItem>();
+      for (const it of items) {
+        const key = it.itemCode;
+        if (merged.has(key)) { merged.get(key)!.qty += it.qty; }
+        else { merged.set(key, { ...it }); }
+      }
+      setConfirmItems(Array.from(merged.values()));
+    } else {
+      setConfirmItems(items);
+    }
+
+    setConfirmWiNo("불러오는 중...");
+    setConfirmStatus("일반"); setConfirmStartDate(new Date().toISOString().split("T")[0]);
+    setConfirmEndDate(""); setConfirmEquipmentId(""); setConfirmWorkTeam(""); setConfirmWorker("");
+    setConfirmRouting(""); setConfirmRoutingOptions([]);
+    previewWorkInstructionNo().then(r => { if (r.success) setConfirmWiNo(r.instructionNo); else setConfirmWiNo("(자동생성)"); }).catch(() => setConfirmWiNo("(자동생성)"));
+
+    // 품목별 라우팅 옵션 로드
+    const finalItems = regMergeSameItem ? Array.from(new Map(items.map(i => [i.itemCode, i])).values()) : items;
+    const uniqueItemCodes = [...new Set(finalItems.map(i => i.itemCode).filter(Boolean))];
+    for (const ic of uniqueItemCodes) {
+      getRoutingVersions("__new__", ic).then(r => {
+        if (r.success && r.data) {
+          setConfirmItems(prev => prev.map(it => {
+            if (it.itemCode !== ic) return it;
+            const defaultRv = r.data.find(rv => rv.is_default);
+            return { ...it, routingOptions: r.data, routing: defaultRv?.id || "" };
+          }));
+        }
+      }).catch(() => {});
+    }
+
+    setIsRegModalOpen(false); setIsConfirmModalOpen(true);
+  };
+
+  // 등록 확인 모달 — 인라인 품목 추가
+  const addConfirmItem = () => {
+    if (!confirmAddQty || Number(confirmAddQty) <= 0) { alert("수량을 입력해주세요."); return; }
+    const firstItem = confirmItems[0];
+    setConfirmItems(prev => [...prev, {
+      itemCode: firstItem?.itemCode || "", itemName: firstItem?.itemName || "", spec: firstItem?.spec || "",
+      qty: Number(confirmAddQty), remark: "",
+      sourceType: "item" as SourceType, sourceTable: "item_info", sourceId: firstItem?.itemCode || "",
+    }]);
+    setConfirmAddQty("");
+  };
+
+  // ─── 2단계 최종 적용 ───
+  const finalizeRegistration = async () => {
+    if (confirmItems.length === 0) { alert("품목이 없습니다."); return; }
+    setSaving(true);
+    try {
+      const payload = {
+        status: confirmStatus, startDate: confirmStartDate, endDate: confirmEndDate,
+        equipmentId: confirmEquipmentId, workTeam: confirmWorkTeam, worker: confirmWorker,
+        routing: confirmRouting || null,
+        items: confirmItems.map(i => ({ itemNumber: i.itemCode, itemCode: i.itemCode, qty: String(i.qty), remark: i.remark, sourceTable: i.sourceTable, sourceId: String(i.sourceId), partCode: i.itemCode, routing: i.routing || null })),
+      };
+      const r = await saveWorkInstruction(payload);
+      if (r.success) { setIsConfirmModalOpen(false); fetchOrders(); alert("작업지시가 등록되었습니다."); }
+      else alert(r.message || "저장 실패");
+    } catch (e: any) { alert(e.message || "저장 실패"); } finally { setSaving(false); }
+  };
+
+  // ─── 수정 모달 ───
+  const openEditModal = (order: any) => {
+    const wiNo = order.work_instruction_no;
+    const relatedDetails = orders.filter(o => o.work_instruction_no === wiNo);
+    setEditOrder(order); setEditStatus(order.status || "일반");
+    setEditStartDate(order.start_date || ""); setEditEndDate(order.end_date || "");
+    setEditEquipmentId(order.equipment_id || ""); setEditWorkTeam(order.work_team || "");
+    setEditWorker(order.worker || ""); setEditRemark(order.wi_remark || "");
+    const items: SelectedItem[] = relatedDetails.map((d: any) => ({
+      itemCode: d.item_number || d.part_code || "", itemName: d.item_name || "", spec: d.item_spec || "",
+      qty: Number(d.detail_qty || 0), remark: d.detail_remark || "",
+      sourceType: (d.source_table === "sales_order_detail" ? "order" : d.source_table === "production_plan_mng" ? "production" : "item") as SourceType,
+      sourceTable: d.source_table || "item_info", sourceId: d.source_id || "",
+      routing: d.detail_routing_version_id || order.routing_version_id || "",
+      routingOptions: [],
+    }));
+    setEditItems(items);
+    setAddQty(""); setAddEquipment(""); setAddWorkTeam(""); setAddWorker("");
+    setEditRouting(order.routing_version_id || "");
+    setEditRoutingOptions([]);
+
+    // 품목별 라우팅 옵션 로드
+    const uniqueItemCodes = [...new Set(items.map(i => i.itemCode).filter(Boolean))];
+    for (const ic of uniqueItemCodes) {
+      getRoutingVersions(wiNo, ic).then(r => {
+        if (r.success && r.data) {
+          setEditItems(prev => prev.map(it => {
+            if (it.itemCode !== ic) return it;
+            const opts = r.data;
+            const hasRouting = it.routing && opts.some(rv => rv.id === it.routing);
+            return {
+              ...it,
+              routingOptions: opts,
+              routing: hasRouting ? it.routing : (opts.find(rv => rv.is_default)?.id || it.routing || ""),
+            };
+          }));
+        }
+      }).catch(() => {});
+    }
+
+    setIsEditModalOpen(true);
+  };
+
+  const addEditItem = () => {
+    if (!addQty || Number(addQty) <= 0) { alert("수량을 입력해주세요."); return; }
+    setEditItems(prev => [...prev, {
+      itemCode: editOrder?.item_number || "", itemName: editOrder?.item_name || "", spec: editOrder?.item_spec || "",
+      qty: Number(addQty), remark: "", sourceType: "item", sourceTable: "item_info", sourceId: editOrder?.item_number || "",
+    }]);
+    setAddQty("");
+  };
+
+  const saveEdit = async () => {
+    if (!editOrder || editItems.length === 0) { alert("품목이 없습니다."); return; }
+    setEditSaving(true);
+    try {
+      const payload = {
+        id: editOrder.wi_id, status: editStatus, startDate: editStartDate, endDate: editEndDate,
+        equipmentId: editEquipmentId, workTeam: editWorkTeam, worker: editWorker, remark: editRemark,
+        routing: editRouting || null,
+        items: editItems.map(i => ({ itemNumber: i.itemCode, itemCode: i.itemCode, qty: String(i.qty), remark: i.remark, sourceTable: i.sourceTable, sourceId: String(i.sourceId), partCode: i.itemCode, routing: i.routing || null })),
+      };
+      const r = await saveWorkInstruction(payload);
+      if (r.success) { setIsEditModalOpen(false); fetchOrders(); alert("수정되었습니다."); }
+      else alert(r.message || "저장 실패");
+    } catch (e: any) { alert(e.message || "저장 실패"); } finally { setEditSaving(false); }
+  };
+
+  const handleDelete = async (wiId: string) => {
+    if (!confirm("이 작업지시를 삭제하시겠습니까?")) return;
+    const r = await deleteWorkInstructions([wiId]);
+    if (r.success) { fetchOrders(); } else alert(r.message || "삭제 실패");
+  };
+
+  const getProgress = (o: any) => {
+    const t = Number(o.total_qty || 0), c = Number(o.completed_qty || 0);
+    return t === 0 ? 0 : Math.min(100, Math.round((c / t) * 100));
+  };
+  const getProgressLabel = (o: any) => { const p = getProgress(o); if (o.progress_status) return o.progress_status; if (p >= 100) return "완료"; if (p > 0) return "진행중"; return "대기"; };
+  const totalRegPages = Math.max(1, Math.ceil(regTotalCount / regPageSize));
+
+  const getDisplayNo = (o: any) => {
+    const cnt = Number(o.detail_count || 1);
+    const seq = Number(o.detail_seq || 1);
+    if (cnt <= 1) return o.work_instruction_no || "-";
+    return `${o.work_instruction_no}-${String(seq).padStart(2, "0")}`;
+  };
+
+  const openWorkStandardModal = (wiNo: string, routingVersionId: string, routingName: string, itemName: string, itemCode: string) => {
+    if (!routingVersionId) { alert("라우팅이 선택되지 않았습니다."); return; }
+    setWsModalWiNo(wiNo);
+    setWsModalRoutingId(routingVersionId);
+    setWsModalRoutingName(routingName);
+    setWsModalItemName(itemName);
+    setWsModalItemCode(itemCode);
+    setWsModalOpen(true);
+  };
+
+  const getWorkerName = (userId: string) => {
+    if (!userId) return "-";
+    const emp = employeeOptions.find(e => e.user_id === userId);
+    return emp ? emp.user_name : userId;
+  };
+
+  const WorkerCombobox = ({ value, onChange, open, onOpenChange, className, triggerClassName }: {
+    value: string; onChange: (v: string) => void; open: boolean; onOpenChange: (v: boolean) => void;
+    className?: string; triggerClassName?: string;
+  }) => (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open}
+          className={cn("w-full justify-between font-normal", triggerClassName || "h-9 text-sm")}>
+          {value ? (employeeOptions.find(e => e.user_id === value)?.user_name || value) : "작업자 선택"}
+          <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="이름 검색..." className="text-xs" />
+          <CommandList>
+            <CommandEmpty className="text-xs py-4 text-center">사원을 찾을 수 없습니다</CommandEmpty>
+            <CommandGroup>
+              <CommandItem value="__none__" onSelect={() => { onChange(""); onOpenChange(false); }} className="text-xs">
+                <Check className={cn("mr-2 h-3.5 w-3.5", !value ? "opacity-100" : "opacity-0")} />
+                선택 안 함
+              </CommandItem>
+              {employeeOptions.map(emp => (
+                <CommandItem key={emp.user_id} value={`${emp.user_name} ${emp.user_id}`}
+                  onSelect={() => { onChange(emp.user_id); onOpenChange(false); }} className="text-xs">
+                  <Check className={cn("mr-2 h-3.5 w-3.5", value === emp.user_id ? "opacity-100" : "opacity-0")} />
+                  {emp.user_name}{emp.dept_name ? ` (${emp.dept_name})` : ""}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-4rem)] p-3 gap-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName="work_instruction"
+        filterId="c16-work-instruction"
+        onFilterChange={setSearchFilters}
+        externalFilterConfig={ts.filterConfig}
+        dataCount={new Set(orders.map(o => o.work_instruction_no)).size}
+      />
+
+      {/* 메인 테이블 */}
+      <div className="flex-1 overflow-hidden border bg-card rounded-lg flex flex-col">
+        <div className="flex flex-col h-full">
+          {/* 패널 헤더 */}
+          <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/30 shrink-0">
+            <div className="flex items-center gap-2">
+              <Wrench className="w-4 h-4 text-muted-foreground" />
+              <span className="text-[13px] font-bold text-foreground">작업지시 목록</span>
+              <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                {new Set(orders.map(o => o.work_instruction_no)).size}건 ({orders.length}행)
+              </span>
+              {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button size="sm" onClick={openRegModal}>
+                <Plus className="w-3.5 h-3.5" /> 작업지시 등록
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                <Settings2 className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          {/* 테이블 */}
+          <EDataTable
+            columns={[
+              { key: "work_instruction_no", label: "작업지시번호", width: "w-[150px]", render: (_v, row) => <span className="font-mono text-[13px] font-medium">{getDisplayNo(row)}</span> },
+              { key: "status", label: "상태", width: "w-[70px]", align: "center", render: (v) => {
+                const sBadge = STATUS_BADGE[v] || STATUS_BADGE["일반"];
+                return <Badge variant="outline" className={cn("text-[10px]", sBadge.cls)}>{sBadge.label}</Badge>;
+              }},
+              { key: "progress", label: "진행현황", width: "w-[100px]", align: "center", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return <span className="text-[10px] text-muted-foreground">↑</span>;
+                const pct = getProgress(row);
+                const pLabel = getProgressLabel(row);
+                const pBadge = PROGRESS_BADGE[pLabel] || PROGRESS_BADGE["대기"];
+                return (
+                  <div className="flex flex-col items-center gap-1">
+                    <Badge variant="secondary" className={cn("text-[10px]", pBadge.cls)}>{pBadge.label}</Badge>
+                    <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
+                      <div className={cn("h-full rounded-full transition-all", pct >= 100 ? "bg-success" : pct > 0 ? "bg-primary" : "bg-muted-foreground/30")} style={{ width: `${pct}%` }} />
+                    </div>
+                    <span className="text-[10px] text-muted-foreground">{pct}%</span>
+                  </div>
+                );
+              }},
+              { key: "item_name", label: "품목명", render: (_v, row) => row.item_name || row.item_number || "-" },
+              { key: "item_spec", label: "규격", width: "w-[100px]" },
+              { key: "detail_qty", label: "수량", width: "w-[80px]", align: "right", formatNumber: true },
+              { key: "equipment_name", label: "설비", width: "w-[120px]", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "routing", label: "라우팅", width: "w-[120px]", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return "";
+                if (row.routing_version_id) {
+                  return (
+                    <button
+                      className="text-primary underline underline-offset-2 hover:text-primary/80 cursor-pointer text-xs text-left"
+                      onClick={e => {
+                        e.stopPropagation();
+                        openWorkStandardModal(row.work_instruction_no, row.routing_version_id, row.routing_name || "", row.item_name || row.item_number || "", row.item_number || "");
+                      }}
+                    >
+                      {row.routing_name || "라우팅"} <ClipboardCheck className="w-3 h-3 inline ml-0.5" />
+                    </button>
+                  );
+                }
+                return <span className="text-muted-foreground">-</span>;
+              }},
+              { key: "work_team", label: "작업조", width: "w-[80px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "worker", label: "작업자", width: "w-[100px]", render: (v, row) => Number(row.detail_seq) === 1 ? getWorkerName(v) : "" },
+              { key: "start_date", label: "시작일", width: "w-[100px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "end_date", label: "완료일", width: "w-[100px]", align: "center", render: (v, row) => Number(row.detail_seq) === 1 ? (v || "-") : "" },
+              { key: "actions", label: "작업", width: "w-[150px]", align: "center", sortable: false, filterable: false, render: (_v, row) => {
+                const isFirstOfGroup = Number(row.detail_seq) === 1;
+                if (!isFirstOfGroup) return null;
+                return (
+                  <div className="flex items-center justify-center gap-1">
+                    <Button variant="ghost" size="sm" className="h-7 text-xs px-2" onClick={() => openEditModal(row)}><Pencil className="w-3 h-3" /> 수정</Button>
+                    <Button variant="ghost" size="sm" className="h-7 text-xs px-2 text-destructive hover:text-destructive" onClick={() => handleDelete(row.wi_id)}><Trash2 className="w-3 h-3" /></Button>
+                  </div>
+                );
+              }},
+            ] as EDataTableColumn[]}
+            data={ts.groupData(orders)}
+            rowKey={(row) => `${row.wi_id}-${row.detail_id}`}
+            loading={loading}
+            emptyMessage="등록된 작업지시가 없어요"
+            showPagination
+            draggableColumns
+            columnOrderKey="c16-work-instruction"
+          />
+        </div>
+      </div>
+
+      {/* ── 1단계: 등록 모달 ── */}
+      <Dialog open={isRegModalOpen} onOpenChange={setIsRegModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[1200px] h-[80vh] flex flex-col p-0 gap-0">
+          <DialogHeader className="px-6 py-4 border-b shrink-0">
+            <DialogTitle className="text-base flex items-center gap-2"><Plus className="w-4 h-4" /> 작업지시 등록</DialogTitle>
+            <DialogDescription className="text-xs text-muted-foreground">근거를 선택하고 품목을 체크한 후 "작업지시 적용" 버튼을 눌러주세요.</DialogDescription>
+          </DialogHeader>
+
+          <div className="px-6 py-3 border-b bg-muted/30 flex items-center gap-3 flex-wrap shrink-0">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground whitespace-nowrap">근거</span>
+            <Select value={regSourceType} onValueChange={v => setRegSourceType(v as SourceType)}>
+              <SelectTrigger className="h-9 w-[160px]"><SelectValue placeholder="선택" /></SelectTrigger>
+              <SelectContent><SelectItem value="production">생산계획</SelectItem><SelectItem value="order">수주</SelectItem><SelectItem value="item">품목정보</SelectItem></SelectContent>
+            </Select>
+            {regSourceType && (<>
+              <Input placeholder="검색..." value={regKeyword} onChange={e => setRegKeyword(e.target.value)} className="h-9 w-[220px]"
+                onKeyDown={e => { if (e.key === "Enter") { setRegPage(1); fetchRegSource(1); } }} />
+              <Button size="sm" className="h-9" onClick={() => { setRegPage(1); fetchRegSource(1); }} disabled={regSourceLoading}>
+                {regSourceLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}<span className="ml-1.5">조회</span>
+              </Button>
+            </>)}
+            <div className="flex-1" />
+            <label className="flex items-center gap-1.5 cursor-pointer select-none">
+              <Checkbox checked={regMergeSameItem} onCheckedChange={v => setRegMergeSameItem(!!v)} />
+              <span className="text-xs font-semibold text-foreground">동일품목 합산</span>
+            </label>
+          </div>
+
+          <div className="flex-1 overflow-auto px-6 py-4">
+            {!regSourceType ? (
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-12 h-12 flex items-center justify-center mb-4">
+                  <Search className="w-6 h-6 text-muted-foreground/40" />
+                </div>
+                <p className="text-sm font-medium text-muted-foreground mb-1">근거를 선택해주세요</p>
+                <p className="text-xs text-muted-foreground/60">근거를 선택하고 검색하면 품목이 표시돼요</p>
+              </div>
+            ) : regSourceLoading ? (
+              <div className="flex items-center justify-center h-full"><Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /></div>
+            ) : regSourceData.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-full text-center">
+                <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-12 h-12 flex items-center justify-center mb-4">
+                  <Inbox className="w-6 h-6 text-muted-foreground/40" />
+                </div>
+                <p className="text-sm font-medium text-muted-foreground mb-1">검색 결과가 없어요</p>
+                <p className="text-xs text-muted-foreground/60">다른 키워드로 검색해주세요</p>
+              </div>
+            ) : (
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground"><Checkbox checked={regSourceData.length > 0 && regCheckedIds.size === regSourceData.length} onCheckedChange={toggleRegAll} /></TableHead>
+                    {regSourceType === "item" && <><TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead><TableHead>품목명</TableHead><TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead></>}
+                    {regSourceType === "order" && <><TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수주번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[100px]">규격</TableHead><TableHead className="w-[80px] text-right">수량</TableHead><TableHead className="w-[100px]">납기일</TableHead></>}
+                    {regSourceType === "production" && <><TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획번호</TableHead><TableHead className="w-[100px]">품번</TableHead><TableHead>품목명</TableHead><TableHead className="w-[80px] text-right">계획수량</TableHead><TableHead className="w-[90px]">시작일</TableHead><TableHead className="w-[90px]">완료일</TableHead><TableHead className="w-[100px]">설비</TableHead></>}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {regSourceData.map((item, idx) => {
+                    const id = getRegId(item);
+                    const checked = regCheckedIds.has(id);
+                    return (
+                      <TableRow key={`${regSourceType}-${id}-${idx}`} className={cn("cursor-pointer hover:bg-muted/30", checked && "bg-primary/5")} onClick={() => toggleRegItem(id)}>
+                        <TableCell className="text-center" onClick={e => e.stopPropagation()}><Checkbox checked={checked} onCheckedChange={() => toggleRegItem(id)} /></TableCell>
+                        {regSourceType === "item" && <><TableCell className="text-[13px] font-medium">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-[13px]">{item.spec || "-"}</TableCell></>}
+                        {regSourceType === "order" && <><TableCell className="text-[13px]">{item.order_no}</TableCell><TableCell className="text-[13px]">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-[13px]">{item.spec || "-"}</TableCell><TableCell className="text-right text-[13px]">{Number(item.qty || 0).toLocaleString()}</TableCell><TableCell className="text-[13px]">{item.due_date || "-"}</TableCell></>}
+                        {regSourceType === "production" && <><TableCell className="text-[13px]">{item.plan_no}</TableCell><TableCell className="text-[13px]">{item.item_code}</TableCell><TableCell className="text-sm">{item.item_name}</TableCell><TableCell className="text-right text-[13px]">{Number(item.plan_qty || 0).toLocaleString()}</TableCell><TableCell className="text-[13px]">{item.start_date ? String(item.start_date).split("T")[0] : "-"}</TableCell><TableCell className="text-[13px]">{item.end_date ? String(item.end_date).split("T")[0] : "-"}</TableCell><TableCell className="text-[13px]">{item.equipment_name || "-"}</TableCell></>}
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            )}
+          </div>
+
+          {regTotalCount > 0 && (
+            <div className="px-6 py-2 border-t bg-muted/10 flex items-center justify-between shrink-0">
+              <span className="text-xs text-muted-foreground">총 {regTotalCount}건 (선택: {regCheckedIds.size}건)</span>
+              <div className="flex items-center gap-1">
+                <Button variant="ghost" size="icon" className="h-7 w-7" disabled={regPage <= 1} onClick={() => { const p = regPage - 1; setRegPage(p); fetchRegSource(p); }}><ChevronLeft className="w-3.5 h-3.5" /></Button>
+                <span className="text-xs font-medium px-2">{regPage} / {totalRegPages}</span>
+                <Button variant="ghost" size="icon" className="h-7 w-7" disabled={regPage >= totalRegPages} onClick={() => { const p = regPage + 1; setRegPage(p); fetchRegSource(p); }}><ChevronRight className="w-3.5 h-3.5" /></Button>
+              </div>
+            </div>
+          )}
+
+          <DialogFooter className="px-6 py-3 border-t shrink-0">
+            <Button variant="outline" onClick={() => setIsRegModalOpen(false)}>취소</Button>
+            <Button onClick={applyRegistration} disabled={regCheckedIds.size === 0}><ArrowRight className="w-4 h-4 mr-1.5" /> 작업지시 적용</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 2단계: 확인 모달 ── */}
+      <Dialog open={isConfirmModalOpen} onOpenChange={setIsConfirmModalOpen}>
+        <DialogContent className="max-w-[1100px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>작업지시 적용 확인</DialogTitle>
+            <DialogDescription>기본 정보를 입력하고 '최종 적용' 버튼을 눌러주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+          <div className="space-y-5">
+            <div className="bg-muted/30 border rounded-lg p-5">
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground">작업지시 기본 정보</h4>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-3">
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업지시번호</Label><Input value={confirmWiNo} readOnly className="h-9 bg-muted cursor-not-allowed font-mono" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+                  <Select value={confirmStatus} onValueChange={setConfirmStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select>
+                </div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">시작일</Label><Input type="date" value={confirmStartDate} onChange={(e) => setConfirmStartDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">완료예정일</Label><Input type="date" value={confirmEndDate} onChange={(e) => setConfirmEndDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">설비</Label>
+                  <Select value={nv(confirmEquipmentId)} onValueChange={v => setConfirmEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비 선택" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select>
+                </div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업조</Label>
+                  <Select value={nv(confirmWorkTeam)} onValueChange={v => setConfirmWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select>
+                </div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업자</Label>
+                  <WorkerCombobox value={confirmWorker} onChange={setConfirmWorker} open={confirmWorkerOpen} onOpenChange={setConfirmWorkerOpen} />
+                </div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">비고</Label><Input className="h-9" placeholder="비고를 입력해주세요" /></div>
+              </div>
+            </div>
+            <div className="border rounded-lg p-5">
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground mb-3">품목 목록</h4>
+              <div className="overflow-auto">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">순번</TableHead>
+                      <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                      <TableHead className="w-[180px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">라우팅</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                      <TableHead className="w-[40px]" />
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {confirmItems.map((item, idx) => (
+                      <TableRow key={idx}>
+                        <TableCell className="text-[13px] text-center">{idx + 1}</TableCell>
+                        <TableCell className="text-[13px] font-medium">{item.itemCode}</TableCell>
+                        <TableCell className="text-sm">{item.itemName || item.itemCode}</TableCell>
+                        <TableCell className="text-[13px]">{item.spec || "-"}</TableCell>
+                        <TableCell><Input type="number" className="h-7 text-[13px] w-20" value={item.qty} onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
+                        <TableCell>
+                          <Select
+                            value={nv(item.routing || "")}
+                            onValueChange={v => {
+                              const val = fromNv(v);
+                              setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, routing: val } : it));
+                            }}
+                          >
+                            <SelectTrigger className="h-7 text-xs"><SelectValue placeholder="라우팅" /></SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="none">선택 안 함</SelectItem>
+                              {(item.routingOptions || []).map((rv: RoutingVersionData) => (
+                                <SelectItem key={rv.id} value={rv.id}>
+                                  {rv.version_name || "라우팅"} {rv.is_default ? "(기본)" : ""} - {rv.processes.length}공정
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </TableCell>
+                        <TableCell><Input className="h-7 text-[13px]" value={item.remark} placeholder="비고" onChange={e => setConfirmItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
+                        <TableCell><Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setConfirmItems(prev => prev.filter((_, i) => i !== idx))}><X className="w-3 h-3 text-destructive" /></Button></TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setIsConfirmModalOpen(false); setIsRegModalOpen(true); }}><ChevronLeft className="w-4 h-4 mr-1" /> 이전</Button>
+            <Button variant="outline" onClick={() => setIsConfirmModalOpen(false)}>취소</Button>
+            <Button onClick={finalizeRegistration} disabled={saving}>{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <CheckCircle2 className="w-4 h-4 mr-1.5" />} 최종 적용</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 수정 모달 ── */}
+      <Dialog open={isEditModalOpen} onOpenChange={(v) => { if (!v && wsModalOpen) return; setIsEditModalOpen(v); }}>
+        <DialogContent className="max-w-[1100px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>{`작업지시 관리 - ${editOrder?.work_instruction_no || ""}`}</DialogTitle>
+            <DialogDescription>품목을 추가/삭제하고 정보를 수정해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto">
+          <div className="space-y-5">
+            <div className="bg-muted/30 border rounded-lg p-5">
+              <h4 className="text-[13px] font-bold pb-2 border-b text-foreground">기본 정보</h4>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-3">
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">상태</Label><Select value={editStatus} onValueChange={setEditStatus}><SelectTrigger className="h-9"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="일반">일반</SelectItem><SelectItem value="긴급">긴급</SelectItem></SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">시작일</Label><Input type="date" value={editStartDate} onChange={(e) => setEditStartDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">완료예정일</Label><Input type="date" value={editEndDate} onChange={(e) => setEditEndDate(e.target.value)} className="h-9" /></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">설비</Label><Select value={nv(editEquipmentId)} onValueChange={v => setEditEquipmentId(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="설비 선택" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem>{equipmentOptions.map(eq => <SelectItem key={eq.id} value={eq.id}>{eq.equipment_name}</SelectItem>)}</SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업조</Label><Select value={nv(editWorkTeam)} onValueChange={v => setEditWorkTeam(fromNv(v))}><SelectTrigger className="h-9"><SelectValue placeholder="작업조" /></SelectTrigger><SelectContent><SelectItem value="none">선택 안 함</SelectItem><SelectItem value="주간">주간</SelectItem><SelectItem value="야간">야간</SelectItem></SelectContent></Select></div>
+                <div className="space-y-1"><Label className="text-[11px] font-semibold text-muted-foreground">작업자</Label>
+                  <WorkerCombobox value={editWorker} onChange={setEditWorker} open={editWorkerOpen} onOpenChange={setEditWorkerOpen} />
+                </div>
+                <div className="space-y-1 col-span-2"><Label className="text-[11px] font-semibold text-muted-foreground">비고</Label><Input value={editRemark} onChange={e => setEditRemark(e.target.value)} className="h-9" placeholder="비고를 입력해주세요" /></div>
+              </div>
+            </div>
+
+            {/* 품목 테이블 — 라우팅/공정작업기준을 품목별로 표시 */}
+            <div className="border rounded-lg overflow-hidden">
+              <div className="flex items-center justify-between px-4 py-2.5 bg-muted/30 border-b">
+                <span className="text-[13px] font-bold text-foreground">작업지시 항목</span>
+                <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{editItems.length}건</span>
+              </div>
+              <div className="overflow-auto">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">순번</TableHead>
+                      <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
+                      <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                      <TableHead className="w-[180px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">라우팅</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공정작업기준</TableHead>
+                      <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>
+                      <TableHead className="w-[40px]" />
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {editItems.length === 0 ? (
+                      <TableRow><TableCell colSpan={9} className="text-center py-8 text-sm text-muted-foreground">등록된 품목이 없어요</TableCell></TableRow>
+                    ) : editItems.map((item, idx) => (
+                      <TableRow key={idx}>
+                        <TableCell className="text-[13px] text-center">{idx + 1}</TableCell>
+                        <TableCell className="text-[13px] font-medium">{item.itemCode}</TableCell>
+                        <TableCell className="text-[13px] max-w-[150px] truncate" title={item.itemName}>{item.itemName || "-"}</TableCell>
+                        <TableCell className="text-[13px] truncate" title={item.spec}>{item.spec || "-"}</TableCell>
+                        <TableCell className="text-right"><Input type="number" className="h-7 text-[13px] w-20 ml-auto" value={item.qty} onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Number(e.target.value) } : it))} /></TableCell>
+                        <TableCell>
+                          <Select
+                            value={nv(item.routing || "")}
+                            onValueChange={v => {
+                              const val = fromNv(v);
+                              setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, routing: val } : it));
+                            }}
+                          >
+                            <SelectTrigger className="h-7 text-xs"><SelectValue placeholder="라우팅" /></SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="none">선택 안 함</SelectItem>
+                              {(item.routingOptions || []).map((rv: RoutingVersionData) => (
+                                <SelectItem key={rv.id} value={rv.id}>
+                                  {rv.version_name || "라우팅"} {rv.is_default ? "(기본)" : ""} - {rv.processes.length}공정
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 text-xs"
+                            disabled={!item.routing}
+                            onClick={() => {
+                              if (!editOrder || !item.routing) return;
+                              const rv = (item.routingOptions || []).find((r: RoutingVersionData) => r.id === item.routing);
+                              openWorkStandardModal(
+                                editOrder.work_instruction_no,
+                                item.routing,
+                                rv?.version_name || "",
+                                item.itemName || item.itemCode || "",
+                                item.itemCode || ""
+                              );
+                            }}
+                          >
+                            <ClipboardCheck className="w-3 h-3 mr-1" /> 수정
+                          </Button>
+                        </TableCell>
+                        <TableCell><Input className="h-7 text-[13px]" value={item.remark} placeholder="비고" onChange={e => setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, remark: e.target.value } : it))} /></TableCell>
+                        <TableCell><Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setEditItems(prev => prev.filter((_, i) => i !== idx))}><X className="w-3 h-3 text-destructive" /></Button></TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              {editItems.length > 0 && (
+                <div className="px-4 py-2.5 border-t bg-muted/30 flex items-center justify-between">
+                  <span className="text-[13px] font-bold text-foreground">총 수량</span>
+                  <span className="text-lg font-bold font-mono text-primary">{editItems.reduce((s, i) => s + i.qty, 0).toLocaleString()} EA</span>
+                </div>
+              )}
+            </div>
+          </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEditModalOpen(false)}>취소</Button>
+            <Button onClick={saveEdit} disabled={editSaving}>{editSaving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 공정작업기준 수정 모달 */}
+      <WorkStandardEditModal
+        open={wsModalOpen}
+        onClose={() => setWsModalOpen(false)}
+        workInstructionNo={wsModalWiNo}
+        routingVersionId={wsModalRoutingId}
+        routingName={wsModalRoutingName}
+        itemName={wsModalItemName}
+        itemCode={wsModalItemCode}
+      />
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/purchase/order/page.tsx b/frontend/app/(main)/COMPANY_9/purchase/order/page.tsx
new file mode 100644
index 00000000..1bc3bc88
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/purchase/order/page.tsx
@@ -0,0 +1,1287 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
+  ClipboardList, Pencil, Search, X, Package, ChevronDown,
+  ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,
+  Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const MASTER_TABLE = "purchase_order_mng";
+const DETAIL_TABLE = "purchase_detail";
+
+const formatNumber = (val: string) => {
+  const num = val.replace(/[^\d.-]/g, "");
+  if (!num) return "";
+  const parts = num.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+const parseNumber = (val: string) => val.replace(/,/g, "");
+
+const STATUS_OPTIONS = [
+  { code: "작성중", label: "작성중" },
+  { code: "발주확정", label: "발주확정" },
+  { code: "입고완료", label: "입고완료" },
+  { code: "취소", label: "취소" },
+];
+
+const STATUS_BADGE_CLASS: Record<string, string> = {
+  "작성중": "bg-warning/10 text-warning border-warning/20",
+  "발주확정": "bg-primary/10 text-primary border-primary/20",
+  "입고완료": "bg-success/10 text-success border-success/20",
+  "취소": "bg-destructive/10 text-destructive border-destructive/20",
+};
+
+const EXCEL_COLUMNS = [
+  { key: "purchase_no", label: "발주번호" },
+  { key: "order_date", label: "발주일" },
+  { key: "supplier_name", label: "공급업체명" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "order_qty", label: "발주수량" },
+  { key: "unit_price", label: "단가" },
+  { key: "amount", label: "금액" },
+  { key: "due_date", label: "납기일" },
+];
+
+const GRID_COLUMNS_CONFIG = [
+  { key: "purchase_no", label: "발주번호" },
+  { key: "order_date", label: "발주일" },
+  { key: "supplier_name", label: "공급업체" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "spec", label: "규격" },
+  { key: "order_qty", label: "발주수량" },
+  { key: "received_qty", label: "입고수량" },
+  { key: "remain_qty", label: "잔량" },
+  { key: "unit_price", label: "단가" },
+  { key: "amount", label: "금액" },
+  { key: "due_date", label: "납기일" },
+  { key: "status", label: "상태" },
+  { key: "memo", label: "메모" },
+];
+
+export default function PurchaseOrderPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const [orders, setOrders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+
+  // 검색 필터 (DynamicSearchFilter)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [masterForm, setMasterForm] = useState<Record<string, any>>({});
+  const [detailRows, setDetailRows] = useState<any[]>([]);
+
+  // 품목 선택 모달
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSelectedMap, setItemSelectedMap] = useState<Map<string, any>>(new Map());
+  const [itemSearchDivision, setItemSearchDivision] = useState("all");
+  const [itemPage, setItemPage] = useState(1);
+  const [itemPageSize, setItemPageSize] = useState(20);
+  const [itemTotalPages, setItemTotalPages] = useState(0);
+  const [itemTotal, setItemTotal] = useState(0);
+  const [itemPageInput, setItemPageInput] = useState("1");
+
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
+
+  // 테이블 설정
+  const ts = useTableSettings("c16-purchase-order", DETAIL_TABLE, GRID_COLUMNS_CONFIG);
+
+  const isReadOnly = masterForm.status === "입고완료" || masterForm.status === "취소";
+
+  // 카테고리 로드
+  useEffect(() => {
+    const loadCategories = async () => {
+      const catColumns = ["input_mode", "price_mode"];
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string }[] => {
+        const result: { code: string; label: string }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      const dedup = (items: { code: string; label: string }[]) => {
+        const seen = new Set<string>();
+        return items.filter((item) => {
+          const key = item.label.replace(/\s/g, "");
+          if (seen.has(key)) return false;
+          seen.add(key);
+          return true;
+        });
+      };
+      await Promise.all(
+        catColumns.map(async (col) => {
+          try {
+            const res = await apiClient.get(`/table-categories/${MASTER_TABLE}/${col}/values`);
+            if (res.data?.success && res.data.data?.length > 0) {
+              optMap[col] = dedup(flatten(res.data.data));
+            }
+          } catch { /* skip */ }
+        })
+      );
+      try {
+        const suppRes = await apiClient.post(`/table-management/tables/supplier_mng/data`, {
+          page: 1, size: 500, autoFilter: true,
+        });
+        const supps = suppRes.data?.data?.data || suppRes.data?.data?.rows || [];
+        optMap["supplier_code"] = supps.map((s: any) => ({
+          code: s.supplier_code,
+          label: `${s.supplier_name} (${s.supplier_code})`,
+        }));
+      } catch { /* skip */ }
+      try {
+        const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
+          page: 1, size: 500, autoFilter: true,
+        });
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        optMap["manager"] = users.map((u: any) => ({
+          code: u.user_id || u.id,
+          label: `${u.user_name || u.name || u.user_id}${u.position_name ? ` (${u.position_name})` : ""}`,
+        }));
+      } catch { /* skip */ }
+      for (const col of ["unit", "material", "division"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/item_info/${col}/values`);
+          if (res.data?.success && res.data.data?.length > 0) {
+            optMap[`item_${col}`] = flatten(res.data.data);
+          }
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+      const divs = optMap["item_division"] || [];
+      const purchaseDiv = divs.find((o) => o.label === "구매관리")
+        || divs.find((o) => o.label === "원자재")
+        || divs.find((o) => o.label === "부자재");
+      if (purchaseDiv) setItemSearchDivision(purchaseDiv.code);
+    };
+    loadCategories();
+  }, []);
+
+  // 마스터 테이블 컬럼 (supplier_name, order_date 등)
+  const MASTER_COLUMNS = new Set(["supplier_name", "supplier_code", "order_date", "status"]);
+
+  // 데이터 조회
+  const fetchOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      // searchFilters를 detail / master로 분리
+      const detailFilters: any[] = [];
+      const masterExtraFilters: any[] = [];
+      for (const f of searchFilters) {
+        const filter = { columnName: f.columnName, operator: f.operator, value: f.value };
+        if (MASTER_COLUMNS.has(f.columnName)) {
+          masterExtraFilters.push(filter);
+        } else {
+          detailFilters.push(filter);
+        }
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: detailFilters.length > 0 ? { enabled: true, filters: detailFilters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "purchase_no", order: "desc" },
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+
+      const purchaseNos = [...new Set(rows.map((r: any) => r.purchase_no).filter(Boolean))];
+      let masterMap: Record<string, any> = {};
+      if (purchaseNos.length > 0) {
+        try {
+          const masterFilters: any[] = [{ columnName: "purchase_no", operator: "in", value: purchaseNos }, ...masterExtraFilters];
+          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: purchaseNos.length + 10,
+            dataFilter: { enabled: true, filters: masterFilters },
+            autoFilter: true,
+          });
+          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+          for (const m of masters) masterMap[m.purchase_no] = m;
+        } catch { /* skip */ }
+      }
+
+      const itemCodes = [...new Set(rows.map((r: any) => r.item_code).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemCodes.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemCodes.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+            autoFilter: true,
+          });
+          const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+          for (const item of items) itemMap[item.item_number] = item;
+        } catch { /* skip */ }
+      }
+
+      const resolveLabel = (key: string, code: string) => {
+        if (!code) return "";
+        const opts = categoryOptions[key];
+        if (!opts) return code;
+        return opts.find((o) => o.code === code)?.label || code;
+      };
+
+      const hasMasterFilters = masterExtraFilters.length > 0;
+      const data = rows
+        .filter((row: any) => {
+          const master = masterMap[row.purchase_no];
+          if (hasMasterFilters && !master) return false;
+          return true;
+        })
+        .map((row: any) => {
+          const item = itemMap[row.item_code];
+          const master = masterMap[row.purchase_no];
+          const rawUnit = row.unit || item?.unit || "";
+          return {
+            ...row,
+            item_name: row.item_name || item?.item_name || "",
+            spec: row.spec || item?.size || "",
+            unit: resolveLabel("item_unit", rawUnit) || rawUnit,
+            status: master?.status || "",
+            supplier_name: master?.supplier_name || "",
+            order_date: master?.order_date || "",
+            memo: row.memo || master?.memo || "",
+          };
+        });
+
+      setOrders(data);
+      setTotalCount(data.length);
+    } catch {
+      toast.error("발주 목록을 불러오는데 실패했어요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters, categoryOptions]);
+
+  useEffect(() => { fetchOrders(); }, [fetchOrders]);
+
+  // purchase_no 기준 그룹핑
+  const orderGroups = useMemo(() => {
+    const map: Record<string, { master: any; details: any[] }> = {};
+    for (const row of orders) {
+      const key = row.purchase_no || row.id;
+      if (!map[key]) {
+        map[key] = {
+          master: { purchase_no: row.purchase_no, order_date: row.order_date, supplier_name: row.supplier_name, status: row.status, memo: row.memo },
+          details: [],
+        };
+      }
+      map[key].details.push(row);
+    }
+    return map;
+  }, [orders]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    const found = categoryOptions[col]?.find((o) => o.code === code);
+    return found?.label || code;
+  };
+
+  // 등록 모달 열기
+  const openRegisterModal = () => {
+    const defaultInputMode = categoryOptions["input_mode"]?.[0]?.code || "";
+    const defaultPriceMode = categoryOptions["price_mode"]?.[0]?.code || "";
+    setMasterForm({
+      input_mode: defaultInputMode,
+      price_mode: defaultPriceMode,
+      manager: user?.userId || "",
+      order_date: new Date().toISOString().split("T")[0],
+      status: "작성중",
+    });
+    setDetailRows([]);
+    setIsEditMode(false);
+    setIsModalOpen(true);
+  };
+
+  // 수정 모달 열기
+  const openEditModal = async (purchaseNo: string) => {
+    try {
+      const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+        autoFilter: true,
+      });
+      const masterData = (masterRes.data?.data?.data || masterRes.data?.data?.rows || [])[0];
+
+      const detailRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+        autoFilter: true,
+      });
+      const detailData = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
+
+      setMasterForm(masterData || {});
+      setDetailRows(detailData.map((d: any, i: number) => ({ ...d, _id: d.id || `row_${i}` })));
+      setIsEditMode(true);
+      setIsModalOpen(true);
+    } catch {
+      toast.error("발주 정보를 불러오는데 실패했어요.");
+    }
+  };
+
+  // 삭제 (다중 선택)
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.error("삭제할 발주를 선택해주세요."); return; }
+    const selectedItems = orders.filter((o) => checkedIds.includes(o.id));
+    const purchaseNos = [...new Set(selectedItems.map((o) => o.purchase_no))];
+    const ok = await confirm(`${checkedIds.length}건의 발주 데이터를 삭제하시겠어요?`, {
+      description: "삭제된 데이터는 복구할 수 없어요.",
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+        data: checkedIds.map((id) => ({ id })),
+      });
+      for (const purchaseNo of purchaseNos) {
+        const remaining = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+          autoFilter: true,
+        });
+        const remainRows = remaining.data?.data?.data || remaining.data?.data?.rows || [];
+        if (remainRows.length === 0) {
+          const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: 1,
+            dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: purchaseNo }] },
+            autoFilter: true,
+          });
+          const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
+          if (masters.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
+              data: masters.map((m: any) => ({ id: m.id })),
+            });
+          }
+        }
+      }
+      toast.success("삭제되었어요.");
+      setCheckedIds([]);
+      fetchOrders();
+    } catch {
+      toast.error("삭제에 실패했어요.");
+    }
+  };
+
+  // 저장 (마스터 + 디테일)
+  const handleSave = async () => {
+    if (detailRows.length === 0) {
+      toast.error("품목을 1개 이상 추가해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, created_by, updated_by, ...masterFields } = masterForm;
+
+      if (isEditMode && id) {
+        await apiClient.put(`/table-management/tables/${MASTER_TABLE}/edit`, {
+          originalData: { id },
+          updatedData: masterFields,
+        });
+        const existingDetails = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
+          page: 1, size: 100,
+          dataFilter: { enabled: true, filters: [{ columnName: "purchase_no", operator: "equals", value: masterForm.purchase_no }] },
+          autoFilter: true,
+        });
+        const existings = existingDetails.data?.data?.data || existingDetails.data?.data?.rows || [];
+        if (existings.length > 0) {
+          await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
+            data: existings.map((d: any) => ({ id: d.id })),
+          });
+        }
+        for (const [idx, row] of detailRows.entries()) {
+          const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
+          await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            ...detailFields,
+            purchase_no: masterForm.purchase_no,
+            seq_no: idx + 1,
+          });
+        }
+      } else {
+        const { purchase_no: _pn, ...fieldsWithoutPurchaseNo } = masterFields;
+        const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/add`, { id: crypto.randomUUID(), ...fieldsWithoutPurchaseNo });
+        const createdData = masterRes.data?.data;
+        let purchaseNo = createdData?.purchase_no;
+        if (!purchaseNo) {
+          const queryRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
+            page: 1, size: 1,
+            sort: { columnName: "created_date", order: "desc" },
+            autoFilter: true,
+          });
+          const records = queryRes.data?.data?.data || queryRes.data?.data?.rows || [];
+          purchaseNo = records[0]?.purchase_no;
+        }
+        if (!purchaseNo) {
+          toast.error("발주번호를 가져올 수 없어요. 다시 시도해주세요.");
+          return;
+        }
+        for (const [idx, row] of detailRows.entries()) {
+          const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
+          await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            ...detailFields,
+            purchase_no: purchaseNo,
+            seq_no: idx + 1,
+          });
+        }
+      }
+
+      toast.success(isEditMode ? "수정되었어요." : "등록되었어요.");
+      setIsModalOpen(false);
+      fetchOrders();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 검색
+  const searchItems = async (page?: number, size?: number) => {
+    const p = page ?? itemPage;
+    const s = size ?? itemPageSize;
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      }
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      let allRows = resData?.data || resData?.rows || [];
+      if (itemSearchDivision !== "all") {
+        const divLabel = categoryOptions["item_division"]?.find((o) => o.code === itemSearchDivision)?.label || "";
+        allRows = allRows.filter((item: any) => {
+          const div = item.division || "";
+          return div.includes(itemSearchDivision) || (divLabel && div.includes(divLabel));
+        });
+      }
+      const total = allRows.length;
+      const start = (p - 1) * s;
+      setItemSearchResults(allRows.slice(start, start + s));
+      setItemTotal(total);
+      setItemTotalPages(Math.max(1, Math.ceil(total / s)));
+    } catch { /* skip */ } finally {
+      setItemSearchLoading(false);
+    }
+  };
+
+  const handleItemPageChange = (newPage: number) => {
+    if (newPage < 1 || newPage > itemTotalPages) return;
+    setItemPage(newPage);
+    setItemPageInput(String(newPage));
+    searchItems(newPage);
+  };
+
+  const commitItemPageInput = () => {
+    const parsed = parseInt(itemPageInput, 10);
+    if (isNaN(parsed) || itemPageInput.trim() === "") {
+      setItemPageInput(String(itemPage));
+      return;
+    }
+    const clamped = Math.max(1, Math.min(parsed, itemTotalPages || 1));
+    if (clamped !== itemPage) handleItemPageChange(clamped);
+    setItemPageInput(String(clamped));
+  };
+
+  const triggerNewSearch = () => {
+    setItemPage(1);
+    setItemPageInput("1");
+    searchItems(1);
+  };
+
+  const addSelectedItemsToDetail = async () => {
+    const selected = Array.from(itemSelectedMap.values());
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+
+    const supplierCode = masterForm.supplier_code;
+    const isStandard = masterForm.price_mode === "standard";
+    const isSupplier = masterForm.price_mode === "supplier";
+    let supplierPriceMap: Record<string, string> = {};
+    if (isSupplier && supplierCode) {
+      try {
+        const itemIds = selected.map((item) => item.item_number || item.id);
+        const res = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: {
+            enabled: true,
+            filters: [
+              { columnName: "supplier_id", operator: "equals", value: supplierCode },
+              { columnName: "item_id", operator: "in", value: itemIds },
+            ],
+          },
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) supplierPriceMap[p.item_id] = String(price);
+        }
+      } catch { /* skip */ }
+    }
+
+    const newRows = selected.map((item) => {
+      const itemCode = item.item_number || item.id;
+      let unitPrice = "";
+      if (isStandard) {
+        unitPrice = item.purchase_price || item.standard_price || "";
+      } else if (isSupplier && supplierCode) {
+        unitPrice = supplierPriceMap[itemCode] || "";
+      }
+      return {
+        _id: `new_${Date.now()}_${Math.random()}`,
+        item_code: itemCode,
+        item_name: item.item_name,
+        spec: item.size || "",
+        material: getCategoryLabel("item_material", item.material) || item.material || "",
+        unit: getCategoryLabel("item_unit", item.unit) || item.unit || "",
+        order_qty: "",
+        received_qty: "0",
+        remain_qty: "0",
+        unit_price: unitPrice,
+        amount: "",
+        due_date: "",
+        memo: "",
+      };
+    });
+
+    setDetailRows((prev) => [...prev, ...newRows]);
+    toast.success(`${selected.length}개 품목이 추가되었어요.`);
+    setItemSelectedMap(new Map());
+    setItemSelectOpen(false);
+  };
+
+  // 단가 재계산: 단가방식/공급업체 변경 시 기존 품목 단가 갱신
+  const recalcPrices = useCallback(async (priceMode: string, supplierCode: string) => {
+    if (detailRows.length === 0) return;
+    const isStandard = priceMode === "standard";
+    const isSupplier = priceMode === "supplier";
+
+    if (isStandard) {
+      const itemCodes = detailRows.map((r) => r.item_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
+          autoFilter: true,
+        });
+        const items = res.data?.data?.data || res.data?.data?.rows || [];
+        const priceMap: Record<string, string> = {};
+        for (const item of items) {
+          const price = item.purchase_price || item.standard_price || "";
+          if (price) priceMap[item.item_number] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.item_code] || "";
+          const qty = parseFloat(row.order_qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    } else if (isSupplier && supplierCode) {
+      const itemCodes = detailRows.map((r) => r.item_code).filter(Boolean);
+      if (itemCodes.length === 0) return;
+      try {
+        const res = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_id", operator: "equals", value: supplierCode },
+            { columnName: "item_id", operator: "in", value: itemCodes },
+          ]},
+          autoFilter: true,
+        });
+        const prices = res.data?.data?.data || res.data?.data?.rows || [];
+        const today = new Date().toISOString().slice(0, 10);
+        const priceMap: Record<string, string> = {};
+        for (const p of prices) {
+          if (p.start_date && p.start_date > today) continue;
+          if (p.end_date && p.end_date < today) continue;
+          const price = p.calculated_price || p.base_price || p.unit_price || "";
+          if (price && Number(price) > 0) priceMap[p.item_id] = String(price);
+        }
+        setDetailRows((prev) => prev.map((row) => {
+          const up = priceMap[row.item_code] || "";
+          const qty = parseFloat(row.order_qty) || 0;
+          const price = parseFloat(up) || 0;
+          return { ...row, unit_price: up, amount: (qty * price).toString() };
+        }));
+      } catch { /* skip */ }
+    }
+  }, [detailRows]);
+
+  const updateDetailRow = (idx: number, field: string, value: string) => {
+    setDetailRows((prev) => {
+      const next = [...prev];
+      next[idx] = { ...next[idx], [field]: value };
+      if (field === "order_qty" || field === "unit_price") {
+        const qty = parseFloat(field === "order_qty" ? value : next[idx].order_qty) || 0;
+        const price = parseFloat(field === "unit_price" ? value : next[idx].unit_price) || 0;
+        next[idx].amount = (qty * price).toString();
+        const received = parseFloat(next[idx].received_qty) || 0;
+        next[idx].remain_qty = (qty - received).toString();
+      }
+      return next;
+    });
+  };
+
+  const removeDetailRow = (idx: number) => {
+    setDetailRows((prev) => prev.filter((_, i) => i !== idx));
+  };
+
+  const handleExcelDownload = async () => {
+    if (orders.length === 0) { toast.error("다운로드할 데이터가 없어요."); return; }
+    const data = orders.map((o) => {
+      const row: Record<string, any> = {};
+      for (const col of EXCEL_COLUMNS) row[col.label] = o[col.key] || "";
+      return row;
+    });
+    await exportToExcel(data, "발주관리.xlsx", "발주목록");
+    toast.success("다운로드 완료");
+  };
+
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      {/* 검색 필터 바 */}
+      <DynamicSearchFilter
+        tableName={DETAIL_TABLE}
+        filterId="c16-purchase-order"
+        onFilterChange={setSearchFilters}
+        dataCount={totalCount}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between flex-wrap gap-3">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-bold">발주 목록</h2>
+          <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
+            {totalCount}건
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" onClick={openRegisterModal}>
+            <Plus className="w-4 h-4 mr-1" /> 발주 등록
+          </Button>
+          <Button variant="outline" size="sm" disabled={checkedIds.length !== 1} onClick={() => {
+            const item = orders.find((o) => o.id === checkedIds[0]);
+            if (item) openEditModal(item.purchase_no);
+          }}>
+            <Pencil className="w-4 h-4 mr-1" /> 수정
+          </Button>
+          <Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDelete}>
+            <Trash2 className="w-4 h-4 mr-1" /> 삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-4 h-4 mr-1" /> 엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4 mr-1" /> 엑셀
+          </Button>
+          <div className="h-5 w-px bg-border mx-0.5" />
+          <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+            <Settings2 className="w-4 h-4 mr-1" /> 설정
+          </Button>
+        </div>
+      </div>
+
+      {/* 데이터 테이블 — 아코디언 그룹핑 */}
+      <div className="flex-1 overflow-auto border rounded-lg bg-card">
+        {loading ? (
+          <div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
+        ) : Object.keys(orderGroups).length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+            <Package className="h-10 w-10 mb-2 opacity-30" />
+            <p className="text-sm">등록된 발주가 없어요</p>
+          </div>
+        ) : (
+          (() => {
+            const MASTER_KEYS = new Set(["purchase_no", "order_date", "supplier_name", "status", "memo"]);
+            const numCols = new Set(["order_qty", "received_qty", "remain_qty", "unit_price", "amount"]);
+
+            // ts.visibleColumns 순서를 따르되, 마스터/디테일 컬럼을 분리
+            // 고정 컬럼(품목수)은 마스터 선행 컬럼 뒤에 배치
+            const leadingMaster: typeof ts.visibleColumns = [];
+            const detailCols: typeof ts.visibleColumns = [];
+            const trailingMaster: typeof ts.visibleColumns = [];
+            let passedFirstDetail = false;
+            for (const col of ts.visibleColumns) {
+              if (MASTER_KEYS.has(col.key)) {
+                if (passedFirstDetail) trailingMaster.push(col);
+                else leadingMaster.push(col);
+              } else {
+                passedFirstDetail = true;
+                detailCols.push(col);
+              }
+            }
+
+            const renderDetailCell = (row: any, key: string) => {
+              const val = row[key];
+              if (key === "status") return val ? <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[val] || "")}>{val}</span> : "-";
+              if (numCols.has(key)) return <span className="font-mono">{val ? Number(val).toLocaleString() : "0"}</span>;
+              return val || "-";
+            };
+
+            const renderMasterHead = (col: { key: string; label: string }) => (
+              <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground", col.key === "status" && "text-center")}>
+                {col.label}
+              </TableHead>
+            );
+
+            const renderMasterCell = (col: { key: string }, m: any, purchaseNo: string) => {
+              if (col.key === "purchase_no") return <TableCell key={col.key} className="text-sm font-semibold text-primary">{purchaseNo}</TableCell>;
+              if (col.key === "order_date") return <TableCell key={col.key} className="text-sm">{m.order_date ? new Date(m.order_date).toLocaleDateString("ko-KR") : "-"}</TableCell>;
+              if (col.key === "supplier_name") return <TableCell key={col.key} className="text-sm">{m.supplier_name || "-"}</TableCell>;
+              if (col.key === "status") return <TableCell key={col.key} className="text-center">{m.status && <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[m.status] || "")}>{m.status}</span>}</TableCell>;
+              if (col.key === "memo") return <TableCell key={col.key} className="text-sm text-muted-foreground max-w-[120px] truncate">{m.memo || ""}</TableCell>;
+              return <TableCell key={col.key} />;
+            };
+
+            return (
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-8" />
+                    <TableHead className="w-10" />
+                    {leadingMaster.map(renderMasterHead)}
+                    <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground text-center">품목수</TableHead>
+                    {detailCols.map(col => (
+                      <TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground", numCols.has(col.key) && "text-right")}>
+                        {col.label}{col.key === "order_qty" || col.key === "amount" ? " 합계" : ""}
+                      </TableHead>
+                    ))}
+                    {trailingMaster.map(renderMasterHead)}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {Object.entries(orderGroups).map(([purchaseNo, group]) => {
+                    const isExpanded = expandedOrders.has(purchaseNo);
+                    const detailIds = group.details.map(d => d.id);
+                    const allChecked = detailIds.length > 0 && detailIds.every(id => checkedIds.includes(id));
+                    const someChecked = detailIds.some(id => checkedIds.includes(id));
+                    const m = group.master;
+                    const totalQty = group.details.reduce((s, d) => s + (Number(d.order_qty) || 0), 0);
+                    const totalAmt = group.details.reduce((s, d) => s + (Number(d.amount) || 0), 0);
+                    return (
+                      <React.Fragment key={purchaseNo}>
+                        <TableRow
+                          style={{ borderTop: "2px solid hsl(var(--border))" }}
+                          className={cn("cursor-pointer border-l-[3px] border-l-transparent font-semibold", allChecked && "border-l-primary bg-primary/5")}
+                          onClick={() => setExpandedOrders(prev => { const next = new Set(prev); if (next.has(purchaseNo)) next.delete(purchaseNo); else next.add(purchaseNo); return next; })}
+                          onDoubleClick={() => openEditModal(purchaseNo)}
+                        >
+                          <TableCell className="text-center p-2">
+                            <ChevronDown className={cn("w-4 h-4 transition-transform text-muted-foreground", !isExpanded && "-rotate-90")} />
+                          </TableCell>
+                          <TableCell className="text-center p-2" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => allChecked ? prev.filter(id => !detailIds.includes(id)) : [...new Set([...prev, ...detailIds])]); }}>
+                            <Checkbox checked={allChecked} data-state={someChecked && !allChecked ? "indeterminate" : undefined} onCheckedChange={() => {}} />
+                          </TableCell>
+                          {leadingMaster.map(col => renderMasterCell(col, m, purchaseNo))}
+                          <TableCell className="text-sm text-center"><Badge variant="secondary" className="text-[10px]">{group.details.length}건</Badge></TableCell>
+                          {detailCols.map(col => (
+                            <TableCell key={col.key} className={cn("text-sm", numCols.has(col.key) && "text-right font-mono")}>
+                              {col.key === "order_qty" ? totalQty.toLocaleString()
+                                : col.key === "amount" ? totalAmt.toLocaleString()
+                                : ""}
+                            </TableCell>
+                          ))}
+                          {trailingMaster.map(col => renderMasterCell(col, m, purchaseNo))}
+                        </TableRow>
+                        {isExpanded && group.details.map((row) => (
+                          <TableRow key={row.id} className="bg-muted/30 text-xs">
+                            <TableCell />
+                            <TableCell className="text-center" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => prev.includes(row.id) ? prev.filter(id => id !== row.id) : [...prev, row.id]); }}>
+                              <Checkbox checked={checkedIds.includes(row.id)} onCheckedChange={() => {}} />
+                            </TableCell>
+                            {leadingMaster.map(col => <TableCell key={col.key} />)}
+                            <TableCell />
+                            {detailCols.map(col => (
+                              <TableCell key={col.key} className={cn(numCols.has(col.key) && "text-right")}>
+                                {renderDetailCell(row, col.key)}
+                              </TableCell>
+                            ))}
+                            {trailingMaster.map(col => <TableCell key={col.key} />)}
+                          </TableRow>
+                        ))}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            );
+          })()
+        )}
+        <div className="px-4 py-2 border-t text-xs text-muted-foreground">
+          전체 {Object.keys(orderGroups).length}건 (발주 기준) / {orders.length}건 (품목 기준)
+        </div>
+      </div>
+
+      {/* 발주 등록/수정 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent
+          className="max-w-[95vw] w-[1200px]"
+          style={{ maxHeight: "90vh", display: "flex", flexDirection: "column" }}
+        >
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? (isReadOnly ? "발주 상세" : "발주 수정") : "발주 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? (isReadOnly ? "발주 상세 정보를 확인해요." : "발주 정보를 수정해요.") : "새로운 발주를 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-y-auto">
+            <div className="space-y-6 py-2 pr-1">
+              {/* 기본 정보 */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  기본 정보
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <div className="grid grid-cols-4 gap-3.5">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">발주번호</Label>
+                    <Input value={masterForm.purchase_no || ""} placeholder={isEditMode ? "" : "자동생성"} className="h-9" disabled />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">발주일 <span className="text-destructive">*</span></Label>
+                    <Input
+                      type="date"
+                      value={masterForm.order_date || ""}
+                      onChange={(e) => setMasterForm((p) => ({ ...p, order_date: e.target.value }))}
+                      className="h-9"
+                      disabled={isReadOnly}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">상태</Label>
+                    {isReadOnly ? (
+                      <div className="flex items-center h-9">
+                        <span className={cn("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold", STATUS_BADGE_CLASS[masterForm.status] || "")}>
+                          {masterForm.status}
+                        </span>
+                      </div>
+                    ) : (
+                      <Select value={masterForm.status || "작성중"} onValueChange={(v) => setMasterForm((p) => ({ ...p, status: v }))}>
+                        <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          {STATUS_OPTIONS.map((s) => (
+                            <SelectItem key={s.code} value={s.code}>{s.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">입력방식</Label>
+                    <Select value={masterForm.input_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, input_mode: v }))} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["input_mode"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">단가방식</Label>
+                    <Select value={masterForm.price_mode || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, price_mode: v })); recalcPrices(v, masterForm.supplier_code || ""); }} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["price_mode"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">담당자</Label>
+                    <Select value={masterForm.manager || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager: v }))} disabled={isReadOnly}>
+                      <SelectTrigger className="h-9"><SelectValue placeholder="담당자 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["manager"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+
+              {/* 공급업체 / 담당자 — 입력방식이 '공급업체 우선'일 때만 표시 */}
+              {masterForm.input_mode === "supplierFirst" && (
+              <div className="p-4 bg-muted/50 border border-dashed border-border rounded-lg space-y-3">
+                <div className="text-xs font-semibold text-primary flex items-center gap-1.5">
+                  <ClipboardList className="w-3.5 h-3.5" /> 공급업체 정보
+                </div>
+                <div className="grid grid-cols-2 gap-3.5">
+                  <div className="space-y-1">
+                    <Label className="text-[11px] font-semibold text-muted-foreground tracking-wide">공급업체</Label>
+                    <Select
+                      value={masterForm.supplier_code || ""}
+                      onValueChange={(v) => {
+                        const supp = categoryOptions["supplier_code"]?.find((o) => o.code === v);
+                        const name = supp?.label.replace(` (${v})`, "") || "";
+                        setMasterForm((p) => ({ ...p, supplier_code: v, supplier_name: name }));
+                        recalcPrices(masterForm.price_mode || "", v);
+                      }}
+                      disabled={isReadOnly}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="공급업체 선택" /></SelectTrigger>
+                      <SelectContent>
+                        {(categoryOptions["supplier_code"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+              )}
+
+              {/* 품목 내역 */}
+              <div className="space-y-2.5">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                    <Package className="w-4 h-4" /> 품목 내역
+                    <span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
+                      {detailRows.length}
+                    </span>
+                  </div>
+                  {!isReadOnly && (
+                    <Button size="sm" onClick={() => {
+                      setItemSelectedMap(new Map());
+                      setItemPage(1);
+                      setItemPageInput("1");
+                      setItemSearchKeyword("");
+                      setItemSelectOpen(true);
+                      searchItems(1);
+                    }}>
+                      <Plus className="w-4 h-4 mr-1" /> 품목 추가
+                    </Button>
+                  )}
+                </div>
+                {detailRows.length === 0 ? (
+                  <div className="flex flex-col items-center gap-2 py-8 border border-dashed border-border rounded-lg text-muted-foreground">
+                    <Package className="w-8 h-8 opacity-40" />
+                    <span className="text-sm">아직 추가된 품목이 없어요. 위 버튼으로 품목을 추가해주세요.</span>
+                  </div>
+                ) : (
+                  <div className="border rounded-lg overflow-x-auto">
+                    <Table className="table-fixed">
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted">
+                          {!isReadOnly && <TableHead className="w-[40px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground"></TableHead>}
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                          {masterForm.input_mode === "itemFirst" && (
+                            <TableHead className="w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체</TableHead>
+                          )}
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                          <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">잔량</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                          <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
+                          <TableHead className="w-[160px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {detailRows.map((row, idx) => (
+                          <TableRow key={row._id || idx}>
+                            {!isReadOnly && (
+                              <TableCell>
+                                <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-muted-foreground/50 hover:text-destructive hover:bg-destructive/5" onClick={() => removeDetailRow(idx)}>
+                                  <X className="w-3.5 h-3.5" />
+                                </Button>
+                              </TableCell>
+                            )}
+                            <TableCell className="text-[13px] font-mono max-w-[120px]"><span className="block truncate" title={row.item_code}>{row.item_code}</span></TableCell>
+                            <TableCell className="text-[13px] max-w-[120px]"><span className="block truncate" title={row.item_name}>{row.item_name}</span></TableCell>
+                            {masterForm.input_mode === "itemFirst" && (
+                              <TableCell>
+                                {isReadOnly ? (
+                                  <span className="text-xs">{(categoryOptions["supplier_code"] || []).find(o => o.code === row.supplier_code)?.label || row.supplier_code || "-"}</span>
+                                ) : (
+                                  <Select value={row.supplier_code || ""} onValueChange={(v) => {
+                                    const supp = categoryOptions["supplier_code"]?.find(o => o.code === v);
+                                    const name = supp?.label.replace(` (${v})`, "") || "";
+                                    updateDetailRow(idx, "supplier_code", v);
+                                    updateDetailRow(idx, "supplier_name", name);
+                                  }}>
+                                    <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="공급업체" /></SelectTrigger>
+                                    <SelectContent>
+                                      {(categoryOptions["supplier_code"] || []).map(o => (
+                                        <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                )}
+                              </TableCell>
+                            )}
+                            <TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
+                            <TableCell className="text-[13px]">{row.unit}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs text-right font-mono block">{row.order_qty ? Number(row.order_qty).toLocaleString() : ""}</span>
+                              ) : (
+                                <Input value={formatNumber(row.order_qty || "")} onChange={(e) => updateDetailRow(idx, "order_qty", parseNumber(e.target.value))} className="h-8 text-xs text-right font-mono" />
+                              )}
+                            </TableCell>
+                            <TableCell className="text-[13px] text-right font-mono text-muted-foreground">{row.received_qty ? Number(row.received_qty).toLocaleString() : "0"}</TableCell>
+                            <TableCell className="text-[13px] text-right font-mono">{row.remain_qty ? Number(row.remain_qty).toLocaleString() : "0"}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs text-right font-mono block">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</span>
+                              ) : (
+                                <Input value={formatNumber(row.unit_price || "")} onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))} className="h-8 text-xs text-right font-mono" />
+                              )}
+                            </TableCell>
+                            <TableCell className="text-[13px] text-right font-mono font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs">{row.due_date}</span>
+                              ) : (
+                                <Input type="date" value={row.due_date || ""} onChange={(e) => updateDetailRow(idx, "due_date", e.target.value)} className="h-8 text-xs" />
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              {isReadOnly ? (
+                                <span className="text-xs">{row.memo}</span>
+                              ) : (
+                                <Input value={row.memo || ""} onChange={(e) => updateDetailRow(idx, "memo", e.target.value)} className="h-8 text-xs" />
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                )}
+              </div>
+
+              {/* 비고 */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
+                  비고
+                  <div className="flex-1 h-px bg-border" />
+                </div>
+                <Input
+                  value={masterForm.memo || ""}
+                  onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
+                  placeholder="특이사항이나 메모를 입력해주세요"
+                  className="h-9"
+                  disabled={isReadOnly}
+                />
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter className="border-t pt-3 mt-2">
+            {isReadOnly ? (
+              <Button variant="outline" onClick={() => setIsModalOpen(false)}>닫기</Button>
+            ) : (
+              <>
+                <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+                <Button onClick={handleSave} disabled={saving}>
+                  {saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />} 저장
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+
+          {/* 품목 선택 모달 (중첩) */}
+          <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+            <DialogContent className="max-w-3xl" style={{ maxHeight: "70vh", display: "flex", flexDirection: "column" }} onInteractOutside={(e) => e.preventDefault()}>
+              <DialogHeader>
+                <DialogTitle>품목 선택</DialogTitle>
+                <DialogDescription>발주에 추가할 품목을 선택 후 하단 버튼을 눌러주세요.</DialogDescription>
+              </DialogHeader>
+              <div className="flex gap-2">
+                <Input
+                  placeholder="품명/품목코드 검색"
+                  value={itemSearchKeyword}
+                  onChange={(e) => setItemSearchKeyword(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && triggerNewSearch()}
+                  className="h-9 flex-1"
+                />
+                <Select value={itemSearchDivision} onValueChange={setItemSearchDivision}>
+                  <SelectTrigger className="h-9 w-[130px]"><SelectValue placeholder="관리품목" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">전체</SelectItem>
+                    {(categoryOptions["item_division"] || []).map((o) => (
+                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button size="sm" onClick={triggerNewSearch} disabled={itemSearchLoading} className="h-9">
+                  {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" />조회</>}
+                </Button>
+              </div>
+              <div className="flex-1 overflow-auto border rounded-lg">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="w-[40px] text-center">
+                        <input type="checkbox"
+                          checked={itemSearchResults.length > 0 && itemSearchResults.every((i) => itemSelectedMap.has(i.id))}
+                          onChange={(e) => {
+                            setItemSelectedMap((prev) => {
+                              const next = new Map(prev);
+                              if (e.target.checked) itemSearchResults.forEach((i) => next.set(i.id, i));
+                              else itemSearchResults.forEach((i) => next.delete(i.id));
+                              return next;
+                            });
+                          }} />
+                      </TableHead>
+                      <TableHead className="w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                      <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                      <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                      <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {itemSearchResults.length === 0 ? (
+                      <TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없어요</TableCell></TableRow>
+                    ) : itemSearchResults.map((item) => (
+                      <TableRow key={item.id} className={cn("cursor-pointer", itemSelectedMap.has(item.id) && "bg-primary/5")}
+                        onClick={() => setItemSelectedMap((prev) => {
+                          const next = new Map(prev);
+                          if (next.has(item.id)) next.delete(item.id); else next.set(item.id, item);
+                          return next;
+                        })}>
+                        <TableCell className="text-center">
+                          <input type="checkbox" checked={itemSelectedMap.has(item.id)} readOnly />
+                        </TableCell>
+                        <TableCell className="text-[13px] max-w-[130px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
+                        <TableCell className="text-sm max-w-[150px]"><span className="block truncate" title={item.item_name}>{item.item_name}</span></TableCell>
+                        <TableCell className="text-[13px]">{item.size}</TableCell>
+                        <TableCell className="text-[13px]">{categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}</TableCell>
+                        <TableCell className="text-[13px]">{categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <div className="flex items-center justify-between border-t pt-2">
+                <div className="flex items-center gap-1">
+                  <span className="text-xs text-muted-foreground">표시:</span>
+                  <input type="number" min={1} max={200} value={itemPageSize}
+                    onChange={(e) => {
+                      const v = Math.min(200, Math.max(1, Number(e.target.value) || 20));
+                      setItemPageSize(v);
+                      setItemPage(1);
+                      setItemPageInput("1");
+                      searchItems(1, v);
+                    }}
+                    className="h-7 w-14 rounded-md border px-1 text-center text-xs" />
+                </div>
+                <div className="flex items-center gap-1">
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(1)} disabled={itemPage === 1 || itemSearchLoading}>
+                    <ChevronsLeft className="h-3 w-3" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemPage - 1)} disabled={itemPage === 1 || itemSearchLoading}>
+                    <ChevronLeft className="h-3 w-3" />
+                  </Button>
+                  <input type="text" inputMode="numeric" value={itemPageInput}
+                    onChange={(e) => setItemPageInput(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === "Enter") { commitItemPageInput(); (e.target as HTMLInputElement).blur(); } }}
+                    onBlur={commitItemPageInput}
+                    onFocus={(e) => e.target.select()}
+                    className="h-7 w-10 rounded-md border px-1 text-center text-xs" />
+                  <span className="text-xs text-muted-foreground">/ {itemTotalPages || 1}</span>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemPage + 1)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
+                    <ChevronRight className="h-3 w-3" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-7 w-7 p-0" onClick={() => handleItemPageChange(itemTotalPages)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
+                    <ChevronsRight className="h-3 w-3" />
+                  </Button>
+                </div>
+                <span className="text-xs text-muted-foreground">총 {itemTotal}건</span>
+              </div>
+              <DialogFooter>
+                <div className="flex items-center gap-2 w-full justify-between">
+                  <span className="text-sm text-muted-foreground">{itemSelectedMap.size}개 선택됨</span>
+                  <div className="flex gap-2">
+                    <Button variant="outline" onClick={() => { setItemSelectedMap(new Map()); setItemSelectOpen(false); }}>취소</Button>
+                    <Button onClick={addSelectedItemsToDetail} disabled={itemSelectedMap.size === 0}>
+                      <Plus className="w-4 h-4 mr-1" /> {itemSelectedMap.size}개 추가
+                    </Button>
+                  </div>
+                </div>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={DETAIL_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchOrders()}
+      />
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/purchase/purchase-item/page.tsx b/frontend/app/(main)/COMPANY_9/purchase/purchase-item/page.tsx
new file mode 100644
index 00000000..7f211a88
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/purchase/purchase-item/page.tsx
@@ -0,0 +1,1244 @@
+"use client";
+
+/**
+ * 구매품목관리 — Type B 마스터-디테일 리디자인
+ *
+ * 좌측: 구매품목 목록 (item_info, 구매 관련 필터)
+ * 우측: 선택한 품목의 공급업체 정보 (supplier_item_mapping → supplier_mng 조인)
+ *
+ * 공급업체관리와 양방향 연동 (같은 supplier_item_mapping 테이블)
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Search, X, Settings2, Package } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const ITEM_TABLE = "item_info";
+const MAPPING_TABLE = "supplier_item_mapping";
+const SUPPLIER_TABLE = "supplier_mng";
+
+// 숫자 포맷 헬퍼
+const formatNum = (val: any): string => {
+  if (val === null || val === undefined || val === "") return "";
+  const n = Number(val);
+  return isNaN(n) ? String(val) : n.toLocaleString();
+};
+
+const ITEM_GRID_COLUMNS = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "standard_price", label: "구매단가" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
+];
+
+export default function PurchaseItemPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-purchase-item", ITEM_TABLE, ITEM_GRID_COLUMNS);
+
+  // 좌측: 품목
+  const [items, setItems] = useState<any[]>([]);
+  const [itemLoading, setItemLoading] = useState(false);
+  const [itemCount, setItemCount] = useState(0);
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 공급업체
+  const [supplierItems, setSupplierItems] = useState<any[]>([]);
+  const [supplierLoading, setSupplierLoading] = useState(false);
+  const [supplierCheckedIds, setSupplierCheckedIds] = useState<string[]>([]);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string; isDefault?: boolean }[]>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 공급업체 추가 모달
+  const [suppSelectOpen, setSuppSelectOpen] = useState(false);
+  const [suppSearchKeyword, setSuppSearchKeyword] = useState("");
+  const [suppSearchResults, setSuppSearchResults] = useState<any[]>([]);
+  const [suppSearchLoading, setSuppSearchLoading] = useState(false);
+  const [suppCheckedIds, setSuppCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 수정 모달
+  const [editItemOpen, setEditItemOpen] = useState(false);
+  const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+
+  // 공급업체 상세 입력 모달 (공급업체 품번/품명 + 단가)
+  const [suppDetailOpen, setSuppDetailOpen] = useState(false);
+  const [selectedSuppsForDetail, setSelectedSuppsForDetail] = useState<any[]>([]);
+  const [suppMappings, setSuppMappings] = useState<Record<string, Array<{ _id: string; supplier_item_code: string; supplier_item_name: string }>>>({});
+  const [suppPrices, setSuppPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [editSuppData, setEditSuppData] = useState<any>(null);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string; isDefault?: boolean }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string; isDefault?: boolean }[] => {
+        const result: { code: string; label: string; isDefault?: boolean }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel, isDefault: v.isDefault });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      // 단가 카테고리
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/supplier_item_prices/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 좌측: 품목 조회
+  const fetchItems = useCallback(async () => {
+    setItemLoading(true);
+    try {
+      const filters: { columnName: string; operator: string; value: any }[] = [];
+
+      // 구매품목/영업관리 division 필터 (다중값 컬럼이므로 contains로 매칭)
+      filters.push({ columnName: "division", operator: "contains", value: "s" });
+
+      // DynamicSearchFilter에서 전달된 필터 추가
+      for (const f of searchFilters) {
+        filters.push({ columnName: f.columnName, operator: f.operator, value: f.value });
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const CATS = ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+      setItemCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setItemLoading(false);
+    }
+  }, [searchFilters, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => { fetchItems(); }, [fetchItems]);
+
+  // 선택된 품목
+  const selectedItem = items.find((i) => i.id === selectedItemId);
+
+  // 우측: 공급업체 목록 조회
+  useEffect(() => {
+    if (!selectedItem?.item_number) { setSupplierItems([]); setSupplierCheckedIds([]); return; }
+    setSupplierCheckedIds([]);
+    const itemKey = selectedItem.item_number;
+    const fetchSupplierItems = async () => {
+      setSupplierLoading(true);
+      try {
+        // 1. supplier_item_mapping에서 해당 품목의 매핑 조회
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
+          autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        // 2. supplier_id → supplier_mng 조인 (공급업체명)
+        const custIds = [...new Set(mappings.map((m: any) => m.supplier_id).filter(Boolean))];
+        let custMap: Record<string, any> = {};
+        if (custIds.length > 0) {
+          try {
+            const custRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+              page: 1, size: custIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "in", value: custIds }] },
+              autoFilter: true,
+            });
+            for (const c of (custRes.data?.data?.data || custRes.data?.data?.rows || [])) {
+              custMap[c.supplier_code] = c;
+            }
+          } catch { /* skip */ }
+        }
+
+        // 3. supplier_item_prices 조회 (단가 정보)
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        // 4. 공급업체별 중복 제거 + 오늘 날짜 기준 단가 매칭
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o: any) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+        const seenCustIds = new Set<string>();
+        const sortedMappings = [...mappings].sort((a: any, b: any) => (a.supplier_id || "").localeCompare(b.supplier_id || ""));
+
+        setSupplierItems(sortedMappings.map((m: any) => {
+          const custKey = m.supplier_id || "";
+          const isFirstOfGroup = !seenCustIds.has(custKey);
+          if (custKey) seenCustIds.add(custKey);
+
+          const custPriceList = allPrices.filter((p: any) => p.supplier_id === custKey);
+          const todayPrice = custPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || custPriceList[0] || {};
+
+          return {
+            ...m,
+            supplier_code: isFirstOfGroup ? custKey : "",
+            supplier_name: isFirstOfGroup ? (custMap[custKey]?.supplier_name || "") : "",
+            supplier_item_code: m.supplier_item_code || "",
+            supplier_item_name: m.supplier_item_name || "",
+            base_price: todayPrice.base_price || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+        }));
+      } catch (err) {
+        console.error("공급업체 조회 실패:", err);
+      } finally {
+        setSupplierLoading(false);
+      }
+    };
+    fetchSupplierItems();
+  }, [selectedItem?.item_number, priceCategoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 공급업체 검색
+  const searchSuppliers = async () => {
+    setSuppSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (suppSearchKeyword) filters.push({ columnName: "supplier_name", operator: "contains", value: suppSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const all = res.data?.data?.data || res.data?.data?.rows || [];
+      // 이미 등록된 공급업체 제외
+      const existing = new Set(supplierItems.map((c: any) => c.supplier_id || c.supplier_code));
+      setSuppSearchResults(all.filter((c: any) => !existing.has(c.supplier_code)));
+    } catch { /* skip */ } finally { setSuppSearchLoading(false); }
+  };
+
+  // 공급업체 선택 → 상세 모달로 이동
+  const goToSuppDetail = () => {
+    const selected = suppSearchResults.filter((c) => suppCheckedIds.has(c.id));
+    if (selected.length === 0) { toast.error("공급업체를 선택해주세요."); return; }
+    setSelectedSuppsForDetail(selected);
+    const mappings: typeof suppMappings = {};
+    const prices: typeof suppPrices = {};
+    for (const cust of selected) {
+      const key = cust.supplier_code || cust.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: selectedItem?.standard_price || selectedItem?.standard_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: selectedItem?.standard_price || selectedItem?.standard_price || "",
+      }];
+    }
+    setSuppMappings(mappings);
+    setSuppPrices(prices);
+    setSuppSelectOpen(false);
+    setSuppDetailOpen(true);
+  };
+
+  const addMappingRow = (custKey: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, supplier_item_code: "", supplier_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (custKey: string, rowId: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updateMappingRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setSuppMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  const addPriceRow = (custKey: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (custKey: string, rowId: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setSuppPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1;
+          if (roundLabel === "반올림") calc = Math.round(calc / unit) * unit;
+          else if (roundLabel === "절삭") calc = Math.floor(calc / unit) * unit;
+          else if (roundLabel === "올림") calc = Math.ceil(calc / unit) * unit;
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  const openEditSupp = async (row: any) => {
+    const custKey = row.supplier_code || row.supplier_id;
+
+    // supplier_mng에서 공급업체 정보 조회
+    let custInfo: any = { supplier_code: custKey, supplier_name: row.supplier_name || "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/supplier_mng/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: custKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) custInfo = found;
+    } catch { /* skip */ }
+
+    const mappingRows = [{
+      _id: `m_existing_${row.id}`,
+      supplier_item_code: row.supplier_item_code || "",
+      supplier_item_name: row.supplier_item_name || "",
+    }].filter((m) => m.supplier_item_code || m.supplier_item_name);
+
+    const priceRows = [{
+      _id: `p_existing_${row.id}`,
+      start_date: row.start_date || "",
+      end_date: row.end_date || "",
+      currency_code: row.currency_code || "CAT_MLAMDKVN_PZJI",
+      base_price_type: row.base_price_type || "CAT_MLAMFGFT_4RZW",
+      base_price: row.base_price ? String(row.base_price) : "",
+      discount_type: row.discount_type || "",
+      discount_value: row.discount_value ? String(row.discount_value) : "",
+      rounding_type: row.rounding_type || "",
+      rounding_unit_value: row.rounding_unit_value || "",
+      calculated_price: row.calculated_price ? String(row.calculated_price) : "",
+    }].filter((p) => p.base_price || p.start_date);
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedSuppsForDetail([custInfo]);
+    setSuppMappings({ [custKey]: mappingRows });
+    setSuppPrices({ [custKey]: priceRows });
+    setEditSuppData(row);
+    setSuppDetailOpen(true);
+  };
+
+  const handleSuppDetailSave = async () => {
+    if (!selectedItem) return;
+    const isEditingExisting = !!editSuppData;
+    setSaving(true);
+    try {
+      for (const cust of selectedSuppsForDetail) {
+        const custKey = cust.supplier_code || cust.id;
+        const mappingRows = suppMappings[custKey] || [];
+
+        if (isEditingExisting && editSuppData?.id) {
+          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+            originalData: { id: editSuppData.id },
+            updatedData: {
+              supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+              supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+            },
+          });
+
+          // 기존 prices 삭제 후 재등록
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "mapping_id", operator: "equals", value: editSuppData.id },
+              ]}, autoFilter: true,
+            });
+            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+            if (existing.length > 0) {
+              await apiClient.delete(`/table-management/tables/supplier_item_prices/delete`, {
+                data: existing.map((p: any) => ({ id: p.id })),
+              });
+            }
+          } catch { /* skip */ }
+
+          const priceRows = (suppPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/supplier_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: editSuppData.id,
+              supplier_id: custKey,
+              item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        } else {
+          // 신규 등록
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            supplier_id: custKey, item_id: selectedItem.item_number,
+            supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+            supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+          });
+          const mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              supplier_id: custKey, item_id: selectedItem.item_number,
+              supplier_item_code: mappingRows[mi].supplier_item_code || "",
+              supplier_item_name: mappingRows[mi].supplier_item_name || "",
+            });
+          }
+
+          const priceRows = (suppPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/supplier_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", supplier_id: custKey, item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedSuppsForDetail.length}개 공급업체가 추가되었습니다.`);
+      setSuppDetailOpen(false);
+      setEditSuppData(null);
+      setSuppCheckedIds(new Set());
+      // 우측 새로고침
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 수정
+  const openEditItem = () => {
+    if (!selectedItem) return;
+    setEditItemForm({ ...selectedItem });
+    setEditItemOpen(true);
+  };
+
+  const handleEditSave = async () => {
+    if (!editItemForm.id) return;
+    setSaving(true);
+    try {
+      await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
+        originalData: { id: editItemForm.id },
+        updatedData: {
+          standard_price: editItemForm.standard_price || null,
+          currency_code: editItemForm.currency_code || null,
+        },
+      });
+      toast.success("수정되었습니다.");
+      setEditItemOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "수정에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 우측: 공급업체 매핑 삭제
+  const handleSupplierMappingDelete = async () => {
+    if (supplierCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${supplierCheckedIds.length}개 공급업체 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      // 관련 단가 삭제
+      for (const mappingId of supplierCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/supplier_item_prices/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/supplier_item_prices/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      // 매핑 삭제
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: supplierCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${supplierCheckedIds.length}개 공급업체 매핑이 삭제되었습니다.`);
+      setSupplierCheckedIds([]);
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) return;
+    const data = items.map((i) => ({
+      품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
+      기준단가: i.standard_price, 구매단가: i.standard_price, 통화: i.currency_code, 상태: i.status,
+    }));
+    await exportToExcel(data, "구매품목관리.xlsx", "구매품목");
+    toast.success("다운로드 완료");
+  };
+
+  // EDataTable 컬럼 정의 (구매품목) — ts.visibleColumns 기반
+  const COLUMN_RENDER_MAP: Record<string, Partial<EDataTableColumn>> = {
+    item_number: { width: "w-[110px]" },
+    item_name: { minWidth: "min-w-[130px]" },
+    size: { width: "w-[80px]" },
+    unit: { width: "w-[60px]" },
+    standard_price: { width: "w-[90px]", align: "right", formatNumber: true },
+    currency_code: { width: "w-[50px]" },
+    status: { width: "w-[60px]" },
+  };
+  const itemColumns: EDataTableColumn[] = ts.visibleColumns.map((col): EDataTableColumn => ({
+    key: col.key,
+    label: col.label,
+    ...COLUMN_RENDER_MAP[col.key],
+  }));
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ITEM_TABLE}
+        filterId="c16-purchase-item"
+        onFilterChange={setSearchFilters}
+        dataCount={items.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" />
+            엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 구매품목 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">구매품목 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {itemCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={itemColumns}
+                data={ts.groupData(items)}
+                rowKey={(row) => row.id}
+                loading={itemLoading}
+                emptyMessage="등록된 구매품목이 없어요"
+                selectedId={selectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
+                onRowDoubleClick={() => openEditItem()}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-purchase-item"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedItemId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Package className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">품목을 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 품목을 선택하면 공급업체 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 공급업체별 단가 헤더 */}
+                  <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 px-4">
+                    <div className="flex items-center gap-2.5">
+                      <Package className="w-3.5 h-3.5 text-muted-foreground" />
+                      <span className="text-[13px] font-bold">공급업체별 단가</span>
+                      <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">
+                        {supplierItems.length}
+                      </Badge>
+                    </div>
+                    <div className="flex gap-1.5">
+                      <Button
+                        size="sm"
+                        onClick={() => { setSuppCheckedIds(new Set()); setSuppSelectOpen(true); searchSuppliers(); }}
+                      >
+                        <Plus className="w-3.5 h-3.5" /> 공급업체 추가
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={supplierCheckedIds.length === 0}
+                        onClick={handleSupplierMappingDelete}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" /> 삭제
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 공급업체 테이블 */}
+                  <div className="flex-1 min-h-0 overflow-auto pt-px">
+                    {supplierLoading ? (
+                      <div className="flex items-center justify-center h-full">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : supplierItems.length === 0 ? (
+                      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+                        등록된 공급업체가 없어요
+                      </div>
+                    ) : (
+                      <Table noWrapper>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted h-10">
+                            <TableHead className="w-[40px] text-center px-2">
+                              <input
+                                type="checkbox"
+                                className="rounded"
+                                checked={supplierItems.length > 0 && supplierCheckedIds.length === supplierItems.length}
+                                onChange={(e) => {
+                                  if (e.target.checked) setSupplierCheckedIds(supplierItems.map((c) => c.id));
+                                  else setSupplierCheckedIds([]);
+                                }}
+                              />
+                            </TableHead>
+                            <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체코드</TableHead>
+                            <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품번</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품명</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {supplierItems.map((row) => (
+                            <TableRow
+                              key={row.id}
+                              className={cn(
+                                "cursor-pointer h-[41px]",
+                                supplierCheckedIds.includes(row.id) ? "bg-primary/5 border-l-[3px] border-l-primary" : "border-l-[3px] border-l-transparent"
+                              )}
+                              onDoubleClick={() => openEditSupp(row)}
+                            >
+                              <TableCell
+                                className="text-center px-2"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setSupplierCheckedIds((prev) =>
+                                    prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                  );
+                                }}
+                              >
+                                <input type="checkbox" className="rounded" checked={supplierCheckedIds.includes(row.id)} readOnly />
+                              </TableCell>
+                              <TableCell className="text-[13px] font-mono text-muted-foreground">{row.supplier_code}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_name}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_item_code}</TableCell>
+                              <TableCell className="text-[13px]">{row.supplier_item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right">
+                                {row.base_price ? Number(row.base_price).toLocaleString() : ""}
+                              </TableCell>
+                              <TableCell className="text-[13px] text-right font-semibold">
+                                {row.calculated_price ? Number(row.calculated_price).toLocaleString() : ""}
+                              </TableCell>
+                              <TableCell className="text-[13px]">{row.currency_code}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 품목 수정 모달 ── */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>구매품목 수정</DialogTitle>
+            <DialogDescription>
+              {editItemForm.item_number || ""} — {editItemForm.item_name || ""}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {/* 품목 기본정보 (읽기 전용) */}
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-sm">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+
+            <div className="col-span-2 border-t my-1" />
+
+            {/* 구매 설정 (수정 가능) */}
+            <div className="space-y-1.5">
+              <Label className="text-sm">구매단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="구매단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">기준단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">통화</Label>
+              <Select
+                value={editItemForm.currency_code || ""}
+                onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="통화를 선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 공급업체 검색 및 추가 모달 ── */}
+      <Dialog open={suppSelectOpen} onOpenChange={setSuppSelectOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>공급업체 검색 및 추가</DialogTitle>
+            <DialogDescription>품목에 추가할 공급업체를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 py-2">
+            {/* 검색바 */}
+            <div className="flex gap-2">
+              <Input
+                placeholder="공급업체명으로 검색해주세요"
+                value={suppSearchKeyword}
+                onChange={(e) => setSuppSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchSuppliers()}
+                className="h-9 flex-1"
+              />
+              <Button size="sm" onClick={searchSuppliers} disabled={suppSearchLoading} className="h-9">
+                {suppSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
+              </Button>
+            </div>
+            {/* 검색 결과 테이블 */}
+            <div className="overflow-auto max-h-[350px] border rounded-lg">
+              <Table noWrapper>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="sticky top-0 bg-card w-[40px] text-center">
+                      <Checkbox
+                        checked={suppSearchResults.length > 0 && suppCheckedIds.size === suppSearchResults.length}
+                        onCheckedChange={(checked) => {
+                          if (checked === true) setSuppCheckedIds(new Set(suppSearchResults.map((c) => c.id)));
+                          else setSuppCheckedIds(new Set());
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[110px]">공급업체코드</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[130px]">공급업체명</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">거래유형</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">담당자</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {suppSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : suppSearchResults.map((c) => (
+                    <TableRow
+                      key={c.id}
+                      className={cn("cursor-pointer", suppCheckedIds.has(c.id) && "bg-primary/[0.08]")}
+                      onClick={() => setSuppCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <Checkbox
+                          checked={suppCheckedIds.has(c.id)}
+                          onCheckedChange={(checked) => {
+                            setSuppCheckedIds((prev) => {
+                              const next = new Set(prev);
+                              if (checked === true) next.add(c.id); else next.delete(c.id);
+                              return next;
+                            });
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell className="text-[13px] font-mono text-muted-foreground">{c.supplier_code}</TableCell>
+                      <TableCell className="text-sm font-medium text-foreground">{c.supplier_name}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.division}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.contact_person}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{suppCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setSuppSelectOpen(false)}>취소</Button>
+                <Button onClick={goToSuppDetail} disabled={suppCheckedIds.size === 0}>
+                  <Plus className="w-4 h-4" />
+                  {suppCheckedIds.size}개 다음
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 공급업체 상세 입력/수정 모달 ── */}
+      <Dialog open={suppDetailOpen} onOpenChange={setSuppDetailOpen}>
+        <DialogContent className="max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              공급업체 상세정보 {editSuppData ? "수정" : "입력"} — {selectedItem?.item_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editSuppData ? "공급업체 품번/품명과 기간별 단가를 수정해주세요." : "선택한 공급업체의 품번/품명과 기간별 단가를 설정해주세요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-6 py-2">
+            {selectedSuppsForDetail.map((cust, idx) => {
+              const custKey = cust.supplier_code || cust.id;
+              const mappingRows = suppMappings[custKey] || [];
+              const prices = suppPrices[custKey] || [];
+
+              return (
+                <div key={custKey} className="border rounded-lg overflow-hidden">
+                  {/* 공급업체 헤더 */}
+                  <div className="flex items-center gap-2.5 px-4 py-3 bg-muted border-b">
+                    <span className="text-[13px] font-bold text-foreground">{idx + 1}. {cust.supplier_name || custKey}</span>
+                    <span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">
+                      {custKey}
+                    </span>
+                  </div>
+
+                  <div className="flex gap-4 p-4 bg-card">
+                    {/* 좌: 공급업체 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/50">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">공급업체 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 공급업체 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.supplier_item_code}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "supplier_item_code", e.target.value)}
+                              placeholder="공급업체 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.supplier_item_name}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "supplier_item_name", e.target.value)}
+                              placeholder="공급업체 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button
+                              variant="ghost" size="sm"
+                              className="h-7 w-7 p-0 text-destructive shrink-0"
+                              onClick={() => removeMappingRow(custKey, mRow._id)}
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/30">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button
+                                  variant="ghost" size="sm"
+                                  className="h-6 w-6 p-0 text-destructive"
+                                  onClick={() => removePriceRow(custKey, price._id)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="통화" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "base_price", raw);
+                                }}
+                                className="h-8 text-xs text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-8 text-xs text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm text-foreground">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setSuppDetailOpen(false);
+                if (!editSuppData) setSuppSelectOpen(true);
+                setEditSuppData(null);
+              }}
+            >
+              {editSuppData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleSuppDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={ITEM_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchItems()}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/purchase/supplier/page.tsx b/frontend/app/(main)/COMPANY_9/purchase/supplier/page.tsx
new file mode 100644
index 00000000..521f770e
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/purchase/supplier/page.tsx
@@ -0,0 +1,2759 @@
+"use client";
+
+/**
+ * 공급업체관리 — Type B 마스터-디테일 레이아웃 (리디자인)
+ *
+ * 좌측: 공급업체 목록 (supplier_mng)
+ * 우측: 품목별 단가 + 납품처 정보 탭
+ *
+ * 모달:
+ * - 공급업체 등록/수정 (supplier_mng)
+ * - 품목 추가 (item_info 검색 → supplier_item_mapping + supplier_item_prices)
+ * - 납품처 등록 (delivery_destination)
+ */
+
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Users, Package, MapPin, Search, X, Tag, Coins, Settings2, GripVertical,
+  ChevronRight, ChevronDown,
+} from "lucide-react";
+import {
+  DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { validateField, validateForm, formatField } from "@/lib/utils/validation";
+import { getAvailableNumberingRulesForScreen, previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const SUPPLIER_TABLE = "supplier_mng";
+const MAPPING_TABLE = "supplier_item_mapping";
+const PRICE_TABLE = "supplier_item_prices";
+const DELIVERY_TABLE = "delivery_destination";
+const CONTACT_TABLE = "supplier_contact";
+
+const SUPPLIER_GRID_COLUMNS = [
+  { key: "supplier_code", label: "공급업체코드" },
+  { key: "supplier_name", label: "공급업체명" },
+  { key: "division", label: "공급업체유형" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "전화번호" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "status", label: "상태" },
+];
+
+function SortableMappingRow({ id, children }: { id: string; children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform), transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+  return (
+    <div ref={setNodeRef} style={style} className="flex gap-2 items-center">
+      <div {...attributes} {...listeners} className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0">
+        <GripVertical className="h-3.5 w-3.5" />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default function SupplierManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-supplier", SUPPLIER_TABLE, SUPPLIER_GRID_COLUMNS);
+  const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 공급업체 목록
+  const [suppliers, setSuppliers] = useState<any[]>([]);
+  const [rawSuppliers, setRawSuppliers] = useState<any[]>([]);
+  const [supplierLoading, setSupplierLoading] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
+  const [mainContactMap, setMainContactMap] = useState<Record<string, any>>({});
+  const [supplierCount, setSupplierCount] = useState(0);
+  const [selectedSupplierId, setSelectedSupplierId] = useState<string | null>(null);
+
+  // 우측: 탭
+  const [rightTab, setRightTab] = useState<"items" | "delivery">("items");
+  // 우측: 품목 단가
+  const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceGroups, setPriceGroups] = useState<Record<string, { master: any; details: any[] }>>({});
+  const [priceLoading, setPriceLoading] = useState(false);
+  const [priceCheckedIds, setPriceCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [collapsedPriceCards, setCollapsedPriceCards] = useState<Set<string>>(new Set());
+  // 우측: 납품처
+  const [deliveryItems, setDeliveryItems] = useState<any[]>([]);
+  const [deliveryLoading, setDeliveryLoading] = useState(false);
+
+  // 품목 편집 데이터 (더블클릭 시 상세 입력 모달 재활용)
+  const [editItemData, setEditItemData] = useState<any>(null);
+  const savingRef = useRef(false);
+
+  // 거래처 모달
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [supplierEditMode, setSupplierEditMode] = useState(false);
+  const [supplierForm, setSupplierForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 품목 추가 모달 (1단계: 검색/선택)
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemTotalCount, setItemTotalCount] = useState(0);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 상세 입력 모달 (2단계: 거래처 품번/품명 + 단가)
+  const [itemDetailOpen, setItemDetailOpen] = useState(false);
+  const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; supplier_item_code: string; supplier_item_name: string }>>>({});
+  const [itemPrices, setItemPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 거래처 모달 탭
+  const [supplierModalTab, setSupplierModalTab] = useState<"basic" | "contacts" | "delivery">("basic");
+  // 담당자 (supplier_contact) - 모달 내
+  const [modalContacts, setModalContacts] = useState<any[]>([]);
+  const [modalContactLoading, setModalContactLoading] = useState(false);
+  const [modalContactForm, setModalContactForm] = useState<Record<string, any>>({});
+  const [modalContactEditId, setModalContactEditId] = useState<string | null>(null);
+  const [modalContactFormOpen, setModalContactFormOpen] = useState(false);
+  const [modalContactSaving, setModalContactSaving] = useState(false);
+  // 납품처 (delivery_destination) - 모달 내
+  const [modalDeliveries, setModalDeliveries] = useState<any[]>([]);
+  const [modalDeliveryLoading, setModalDeliveryLoading] = useState(false);
+  const [modalDeliveryForm, setModalDeliveryForm] = useState<Record<string, any>>({});
+  const [modalDeliveryEditId, setModalDeliveryEditId] = useState<string | null>(null);
+  const [modalDeliveryFormOpen, setModalDeliveryFormOpen] = useState(false);
+  const [modalDeliverySaving, setModalDeliverySaving] = useState(false);
+  const [modalDeliveryFormErrors, setModalDeliveryFormErrors] = useState<Record<string, string>>({});
+
+  const [continuousInput, setContinuousInput] = useState(false);
+
+  // 세금유형 (기본정보 탭 내)
+  const [taxTypeRows, setTaxTypeRows] = useState<{ _id: string; tax_type_name: string; rate: string }[]>([]);
+  const [taxTypeOptions, setTaxTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [employeeOptions, setEmployeeOptions] = useState<{ user_id: string; user_name: string; position_name?: string }[]>([]);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const flatten = (vals: any[]): { code: string; label: string }[] => {
+      const result: { code: string; label: string }[] = [];
+      for (const v of vals) {
+        result.push({ code: v.valueCode, label: v.valueLabel });
+        if (v.children?.length) result.push(...flatten(v.children));
+      }
+      return result;
+    };
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["division", "status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${SUPPLIER_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${PRICE_TABLE}/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+
+      // 세금유형 카테고리
+      try {
+        const taxRes = await apiClient.get(`/table-categories/supplier_tax_type/tax_type_name/values`);
+        if (taxRes.data?.success) setTaxTypeOptions(flatten(taxRes.data.data || []));
+      } catch { /* skip */ }
+    };
+    load();
+    apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true })
+      .then((res) => {
+        const users = res.data?.data?.data || res.data?.data?.rows || [];
+        setEmployeeOptions(users.map((u: any) => ({
+          user_id: u.user_id, user_name: u.user_name || u.user_id, position_name: u.position_name,
+        })));
+      }).catch(() => {});
+  }, []);
+
+  // 공급업체 목록 조회
+  const fetchSuppliers = useCallback(async () => {
+    setSupplierLoading(true);
+    try {
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
+      const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "supplier_code", order: "desc" },
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setRawSuppliers(raw);
+
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const mainContact = mainContactMap[r.id];
+        return {
+          ...r,
+          division: resolve("division", r.division),
+          status: resolve("status", r.status),
+          contact_person: mainContact?.contact_name || "",
+          contact_phone: mainContact?.contact_phone || "",
+          email: mainContact?.contact_email || "",
+        };
+      });
+      // 공급업체코드 숫자 기준 내림차순 정렬
+      data.sort((a: any, b: any) => {
+        const aNum = parseInt((a.supplier_code || "").replace(/\D/g, ""), 10) || 0;
+        const bNum = parseInt((b.supplier_code || "").replace(/\D/g, ""), 10) || 0;
+        return bNum - aNum;
+      });
+      setSuppliers(data);
+      setSupplierCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("거래처 조회 실패:", err);
+      toast.error("공급업체 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setSupplierLoading(false);
+    }
+  }, [searchFilters, categoryOptions, employeeOptions, mainContactMap]);
+
+  useEffect(() => { fetchSuppliers(); }, [fetchSuppliers]);
+
+  // 메인 담당자 조회 (최초 1번 + 저장 후 갱신)
+  const fetchMainContacts = useCallback(async () => {
+    try {
+      const contactRes = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+        dataFilter: { enabled: true, filters: [{ columnName: "is_main", operator: "equals", value: "Y" }] },
+      });
+      const allContacts = contactRes.data?.data?.data || contactRes.data?.data?.rows || [];
+      const map: Record<string, any> = {};
+      for (const c of allContacts) {
+        if ((c.is_main === "Y" || c.is_main === true) && c.supplier_id) {
+          map[c.supplier_id] = c;
+        }
+      }
+      setMainContactMap(map);
+    } catch { /* skip */ }
+  }, []);
+
+  useEffect(() => { fetchMainContacts(); }, [fetchMainContacts]);
+
+  const selectedSupplier = suppliers.find((c) => c.id === selectedSupplierId);
+
+  // 선택된 공급업체의 품목 단가 조회
+  useEffect(() => {
+    if (!selectedSupplier?.supplier_code) { setPriceItems([]); setPriceCheckedIds([]); return; }
+    setPriceCheckedIds([]);
+    const fetchItems = async () => {
+      setPriceLoading(true);
+      try {
+        const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+          ]},
+          autoFilter: true,
+        });
+        const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+
+        // 품목 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
+        const grouped: Record<string, { master: any; details: any[] }> = {};
+        const flatItems: any[] = [];
+        const seenItemIds = new Set<string>();
+        for (const m of mappings) {
+          const itemKey = m.item_id || "";
+          if (seenItemIds.has(itemKey)) continue; // 품목당 첫 매핑만 마스터
+          seenItemIds.add(itemKey);
+
+          const itemInfo = itemMap[itemKey] || {};
+          const itemPriceList = allPrices
+            .filter((p: any) => p.item_id === itemKey)
+            .sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
+          const todayPrice = itemPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || itemPriceList[0] || {};
+
+          const masterRow = {
+            ...m,
+            item_number: itemKey,
+            item_name: itemInfo.item_name || "",
+            base_price_type: priceResolve("base_price_type", todayPrice.base_price_type || ""),
+            base_price: todayPrice.base_price || "",
+            discount_type: priceResolve("discount_type", todayPrice.discount_type || ""),
+            discount_value: todayPrice.discount_value || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+
+          // 단가 리스트 (라벨 변환)
+          const priceDetails = itemPriceList.map((p: any) => ({
+            ...p,
+            base_price_type_label: priceResolve("base_price_type", p.base_price_type || ""),
+            discount_type_label: priceResolve("discount_type", p.discount_type || ""),
+            currency_label: priceResolve("currency_code", p.currency_code || ""),
+            is_current: (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today),
+          }));
+
+          grouped[itemKey] = { master: masterRow, details: priceDetails };
+          flatItems.push(masterRow);
+        }
+        setPriceGroups(grouped);
+        setPriceItems(flatItems);
+      } catch (err) {
+        console.error("품목 조회 실패:", err);
+      } finally {
+        setPriceLoading(false);
+      }
+    };
+    fetchItems();
+  }, [selectedSupplier?.supplier_code]);
+
+  // 납품처 조회
+  useEffect(() => {
+    if (!selectedSupplier?.supplier_code) { setDeliveryItems([]); return; }
+    const fetchDelivery = async () => {
+      setDeliveryLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "supplier_code", operator: "equals", value: selectedSupplier.supplier_code },
+          ]},
+          autoFilter: true,
+        });
+        setDeliveryItems(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setDeliveryItems([]); } finally { setDeliveryLoading(false); }
+    };
+    fetchDelivery();
+  }, [selectedSupplier?.supplier_code]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 모달 내 담당자 목록 조회
+  const fetchModalContacts = useCallback(async (supplierId: string) => {
+    setModalContactLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      setModalContacts(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalContacts([]); } finally { setModalContactLoading(false); }
+  }, []);
+
+  // 모달 내 납품처 목록 조회
+  const fetchModalDeliveries = useCallback(async (supplierCode: string) => {
+    setModalDeliveryLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: supplierCode }] },
+        autoFilter: true,
+      });
+      setModalDeliveries(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalDeliveries([]); } finally { setModalDeliveryLoading(false); }
+  }, []);
+
+  // 담당자 저장 (등록/수정)
+  const handleModalContactSave = async () => {
+    if (!modalContactForm.contact_name) { toast.error("담당자명은 필수입니다."); return; }
+    if (modalContactEditId) {
+      // 수정 — 로컬 리스트에서 교체 + 메인 설정 시 다른 메인 해제
+      const isSettingMain = modalContactForm.is_main === "Y" || modalContactForm.is_main === true;
+      setModalContacts((prev) => prev.map((c) =>
+        (c._localId || c.id) === modalContactEditId
+          ? { ...c, ...modalContactForm }
+          : isSettingMain ? { ...c, is_main: "N" } : c
+      ));
+    } else {
+      // 추가 — 로컬 리스트에 카드 추가
+      setModalContacts((prev) => [...prev, {
+        ...modalContactForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalContactFormOpen(false);
+    setModalContactForm({});
+    setModalContactEditId(null);
+  };
+
+  // 담당자 삭제
+  const handleModalContactDelete = (contactId: string) => {
+    setModalContacts((prev) => prev.filter((c) => (c._localId || c.id) !== contactId));
+  };
+
+  // 납품처 자동채번 유틸
+  const generateDeliveryCode = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DELIVERY_TABLE}/destination_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        const allRes = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "destination_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const match = (row.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        // 로컬에 추가된 것도 포함
+        for (const d of modalDeliveries) {
+          const match = (d.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLen = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          return prefix + String(maxSeq + 1).padStart(seqLen, "0");
+        }
+      }
+    } catch { /* skip */ }
+    return "";
+  };
+
+  // 납품처 저장 (모달 내)
+  const handleModalDeliverySave = async () => {
+    if (!modalDeliveryForm.destination_name) { toast.error("납품처명은 필수입니다."); return; }
+    if (modalDeliveryEditId) {
+      const isSettingMain = modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true;
+      setModalDeliveries((prev) => prev.map((d) =>
+        (d._localId || d.id) === modalDeliveryEditId
+          ? { ...d, ...modalDeliveryForm }
+          : isSettingMain ? { ...d, is_default: "N" } : d
+      ));
+    } else {
+      setModalDeliveries((prev) => [...prev, {
+        ...modalDeliveryForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalDeliveryFormOpen(false);
+    setModalDeliveryForm({});
+    setModalDeliveryEditId(null);
+    setModalDeliveryFormErrors({});
+  };
+
+  const handleModalDeliveryDelete = (deliveryId: string) => {
+    setModalDeliveries((prev) => prev.filter((d) => (d._localId || d.id) !== deliveryId));
+  };
+
+  // 공급업체 등록 모달 열기
+  const openSupplierRegister = async () => {
+    setSupplierForm({});
+    setFormErrors({});
+    setSupplierEditMode(false);
+    setSupplierModalTab("basic");
+    setModalContacts([]);
+    setModalDeliveries([]);
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setTaxTypeRows([]);
+    setSupplierModalOpen(true);
+    // 공급업체 코드 자동 채번 — 기존 데이터 max값 기반
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${SUPPLIER_TABLE}/supplier_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        // 기존 데이터에서 CUST-XXX 패턴의 최대 순번 조회
+        const allRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "supplier_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const code = row.supplier_code || "";
+          const match = code.match(/(\d+)$/);
+          if (match) {
+            const seq = parseInt(match[1], 10);
+            if (seq > maxSeq) maxSeq = seq;
+          }
+        }
+        // preview로 접두어 패턴 가져오기
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLength = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          const nextSeq = maxSeq + 1;
+          const nextCode = prefix + String(nextSeq).padStart(seqLength, "0");
+          setSupplierForm((prev) => ({ ...prev, supplier_code: nextCode, _numberingRuleId: ruleId }));
+        }
+      }
+    } catch { /* skip */ }
+  };
+
+  const openSupplierEdit = () => {
+    if (!selectedSupplier) return;
+    const rawData = rawSuppliers.find((c) => c.id === selectedSupplierId);
+    setSupplierForm({ ...(rawData || selectedSupplier) });
+    setFormErrors({});
+    setSupplierEditMode(true);
+    setSupplierModalTab("basic");
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setModalContactForm({});
+    setModalDeliveryForm({});
+    setModalContactEditId(null);
+    setModalDeliveryEditId(null);
+    // 수정 모드에서는 바로 조회
+    const code = (rawData || selectedSupplier).supplier_code;
+    const id = (rawData || selectedSupplier).id;
+    if (id) {
+      fetchModalContacts(id);
+      // 세금유형 로드
+      apiClient.post(`/table-management/tables/supplier_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: id }] },
+        autoFilter: true,
+      }).then((res: any) => {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        setTaxTypeRows(rows.map((r: any) => ({ _id: r.id, tax_type_name: r.tax_type_name || "", rate: String(r.rate || "") })));
+      }).catch(() => setTaxTypeRows([]));
+    }
+    if (code) fetchModalDeliveries(code);
+    setSupplierModalOpen(true);
+  };
+
+  // 폼 필드 변경 시 자동 포맷팅 + 실시간 검증
+  const handleFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setSupplierForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => {
+      const next = { ...prev };
+      if (error) next[field] = error; else delete next[field];
+      return next;
+    });
+  };
+
+  // 세금유형/담당자/납품처를 한번에 저장하는 헬퍼
+  const saveSubTables = async (supplierId: string, supplierCode: string) => {
+    // 세금유형 — 기존 삭제 후 재생성
+    try {
+      const existTax = await apiClient.post(`/table-management/tables/supplier_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      const existRows = existTax.data?.data?.data || existTax.data?.data?.rows || [];
+      if (existRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/supplier_tax_type/delete`, {
+          data: existRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+      for (const t of taxTypeRows.filter((r) => r.tax_type_name)) {
+        await apiClient.post(`/table-management/tables/supplier_tax_type/add`, {
+          id: crypto.randomUUID(), supplier_id: supplierId,
+          tax_type_name: t.tax_type_name, tax_type_id: t.tax_type_name,
+          rate: t.rate ? Number(t.rate) : 0,
+        });
+      }
+    } catch { /* skip */ }
+
+    // 담당자 — 기존 삭제 후 전체 재생성
+    try {
+      const existContacts = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_id", operator: "equals", value: supplierId }] },
+        autoFilter: true,
+      });
+      const existCRows = existContacts.data?.data?.data || existContacts.data?.data?.rows || [];
+      if (existCRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${CONTACT_TABLE}/delete`, {
+          data: existCRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const c of modalContacts) {
+      try {
+        await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/add`, {
+          id: crypto.randomUUID(), supplier_id: supplierId,
+          contact_name: c.contact_name || "", contact_phone: c.contact_phone || "",
+          contact_email: c.contact_email || "", department: c.department || "",
+          is_main: c.is_main || "N", memo: c.memo || "",
+        });
+      } catch { /* skip */ }
+    }
+
+    // 납품처 — 기존 삭제 후 전체 재생성
+    try {
+      const existDeliveries = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: supplierCode }] },
+        autoFilter: true,
+      });
+      const existDRows = existDeliveries.data?.data?.data || existDeliveries.data?.data?.rows || [];
+      if (existDRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
+          data: existDRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const d of modalDeliveries) {
+      try {
+        await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
+          id: crypto.randomUUID(), supplier_code: supplierCode,
+          destination_code: d.destination_code || "", destination_name: d.destination_name || "",
+          address: d.address || "", manager_name: d.manager_name || "",
+          phone: d.phone || "", memo: d.memo || "", is_default: d.is_default || "N",
+        });
+      } catch { /* skip */ }
+    }
+  };
+
+  const handleSupplierSave = async () => {
+    if (!supplierForm.supplier_name) { toast.error("공급업체명은 필수입니다."); return; }
+    if (!supplierForm.status) { toast.error("상태는 필수입니다."); return; }
+    const errors = validateForm(supplierForm, ["contact_phone", "email", "business_number"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) {
+      toast.error("입력 형식을 확인해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, _numberingRuleId, ...fields } = supplierForm;
+      const cleanFields: Record<string, any> = {};
+      for (const [key, value] of Object.entries(fields)) {
+        cleanFields[key] = value === "" ? null : value;
+      }
+
+      if (supplierEditMode && id) {
+        // 수정
+        await apiClient.put(`/table-management/tables/${SUPPLIER_TABLE}/edit`, {
+          originalData: { id }, updatedData: cleanFields,
+        });
+        await saveSubTables(id, cleanFields.supplier_code || supplierForm.supplier_code);
+        toast.success("저장되었습니다.");
+      } else {
+        // 신규 등록
+        await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/add`, cleanFields);
+        // id 획득
+        const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "equals", value: cleanFields.supplier_code }] },
+          autoFilter: true,
+        });
+        const newRow = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+        if (newRow?.id) {
+          await saveSubTables(newRow.id, cleanFields.supplier_code);
+        }
+        toast.success("공급업체가 등록되었습니다.");
+      }
+
+      fetchSuppliers();
+      fetchMainContacts();
+      if (!supplierEditMode && continuousInput) {
+        // 연속입력 — 폼 초기화하고 모달 유지
+        setSupplierForm({});
+        setModalContacts([]);
+        setModalDeliveries([]);
+        setTaxTypeRows([]);
+        setSupplierModalTab("basic");
+        // 새 코드 채번
+        try {
+          const ruleRes = await apiClient.get(`/numbering-rules/by-column/${SUPPLIER_TABLE}/supplier_code`);
+          const ruleData = ruleRes.data;
+          if (ruleData?.success && ruleData?.data?.ruleId) {
+            const ruleId = ruleData.data.ruleId;
+            const allRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, { page: 1, size: 500, autoFilter: true, sort: { columnName: "supplier_code", order: "desc" } });
+            const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+            let maxSeq = 0;
+            for (const row of allRows) { const match = (row.supplier_code || "").match(/(\d+)$/); if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; } }
+            const previewRes = await previewNumberingCode(ruleId);
+            if (previewRes.success && previewRes.data?.generatedCode) {
+              const prefix = previewRes.data.generatedCode.replace(/\d+$/, "");
+              const seqLen = (previewRes.data.generatedCode.match(/(\d+)$/) || ["", "001"])[1].length;
+              setSupplierForm({ supplier_code: prefix + String(maxSeq + 1).padStart(seqLen, "0") });
+            }
+          }
+        } catch { /* skip */ }
+        toast.success("등록 완료. 다음 공급업체를 입력하세요.");
+      } else {
+        setSupplierModalOpen(false);
+        // 우측 패널 갱신
+        if (selectedSupplierId) {
+          const cid = selectedSupplierId;
+          setSelectedSupplierId(null);
+          setTimeout(() => setSelectedSupplierId(cid), 50);
+        }
+      }
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 공급업체 삭제
+  const handleSupplierDelete = async () => {
+    if (!selectedSupplierId) return;
+    const ok = await confirm("공급업체를 삭제하시겠습니까?", {
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${SUPPLIER_TABLE}/delete`, {
+        data: [{ id: selectedSupplierId }],
+      });
+      toast.success("삭제되었습니다.");
+      setSelectedSupplierId(null);
+      fetchSuppliers();
+    } catch { toast.error("삭제에 실패했습니다."); }
+  };
+
+  // 품목 검색
+  const searchItems = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const allItems = res.data?.data?.data || res.data?.data?.rows || [];
+      setItemTotalCount(allItems.length);
+      const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
+      const PURCHASE_CODES = ["s"]; // 구매관리 카테고리 코드
+      setItemSearchResults(allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        const divCodes = (item.division || "").split(",").map((c: string) => c.trim());
+        return divCodes.some((code: string) => PURCHASE_CODES.includes(code));
+      }));
+    } catch { /* skip */ } finally { setItemSearchLoading(false); }
+  };
+
+  // 품목 선택 완료 → 상세 입력 모달로 전환
+  const goToItemDetail = () => {
+    const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+    setSelectedItemsForDetail(selected);
+    const mappings: typeof itemMappings = {};
+    const prices: typeof itemPrices = {};
+    for (const item of selected) {
+      const key = item.item_number || item.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: item.standard_price || item.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: item.standard_price || item.selling_price || "",
+      }];
+    }
+    setItemMappings(mappings);
+    setItemPrices(prices);
+    setItemSelectOpen(false);
+    setItemDetailOpen(true);
+  };
+
+  // 거래처 품번/품명 행 추가
+  const addMappingRow = (itemKey: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, supplier_item_code: "", supplier_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (itemKey: string, rowId: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const handleMappingDragEnd = (itemKey: string, event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setItemMappings((prev) => {
+      const arr = [...(prev[itemKey] || [])];
+      const oldIdx = arr.findIndex((r) => r._id === active.id);
+      const newIdx = arr.findIndex((r) => r._id === over.id);
+      return { ...prev, [itemKey]: arrayMove(arr, oldIdx, newIdx) };
+    });
+  };
+
+  const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  // 단가 행 추가
+  const addPriceRow = (itemKey: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (itemKey: string, rowId: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1; // "10원" → 10, "100원" → 100
+          if (roundLabel === "반올림") {
+            calc = Math.round(calc / unit) * unit;
+          } else if (roundLabel === "절삭") {
+            calc = Math.floor(calc / unit) * unit;
+          } else if (roundLabel === "올림") {
+            calc = Math.ceil(calc / unit) * unit;
+          }
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  // 품목 편집 열기
+  const openEditItem = async (row: any) => {
+    const itemKey = row.item_number || row.item_id;
+    let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "equals", value: itemKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) itemInfo = found;
+    } catch { /* skip */ }
+
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "supplier_id", operator: "equals", value: selectedSupplier!.supplier_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.supplier_item_code || m.supplier_item_name)
+        .map((m: any) => ({
+          _id: `m_existing_${m.id}`,
+          supplier_item_code: m.supplier_item_code || "",
+          supplier_item_name: m.supplier_item_name || "",
+        }));
+    } catch { /* skip */ }
+
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "supplier_id", operator: "equals", value: selectedSupplier!.supplier_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date ? String(p.start_date).split("T")[0] : "",
+        end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedItemsForDetail([itemInfo]);
+    setItemMappings({ [itemKey]: mappingRows });
+    setItemPrices({ [itemKey]: priceRows });
+    setEditItemData(row);
+    setItemDetailOpen(true);
+  };
+
+  const handleItemDetailSave = async () => {
+    if (!selectedSupplier) return;
+    if (savingRef.current) return;
+    savingRef.current = true;
+    const isEditingExisting = !!editItemData;
+    setSaving(true);
+    try {
+      for (const item of selectedItemsForDetail) {
+        const itemKey = item.item_number || item.id;
+        const mappingRows = itemMappings[itemKey] || [];
+
+        if (isEditingExisting && editItemData?.id) {
+          // 기존 매핑 조회
+          let existingMaps: any[] = [];
+          try {
+            const existingMappings = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingMaps = existingMappings.data?.data?.data || existingMappings.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 매핑 upsert: 기존 것은 update, 새 것은 insert, 남은 것은 delete
+          const usedExistingIds = new Set<string>();
+          let firstMappingId: string | null = editItemData.id;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const existMap = existingMaps[mi];
+            if (existMap) {
+              // update
+              await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+                originalData: { id: existMap.id },
+                updatedData: {
+                  supplier_item_code: mappingRows[mi].supplier_item_code || "",
+                  supplier_item_name: mappingRows[mi].supplier_item_name || "",
+                },
+              });
+              usedExistingIds.add(existMap.id);
+              if (mi === 0) firstMappingId = existMap.id;
+            } else {
+              // insert
+              const mRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+                id: crypto.randomUUID(),
+                supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+                supplier_item_code: mappingRows[mi].supplier_item_code || "",
+                supplier_item_name: mappingRows[mi].supplier_item_name || "",
+              });
+              if (mi === 0 && !firstMappingId) firstMappingId = mRes.data?.data?.id || null;
+            }
+          }
+          // 초과분 delete
+          const toDeleteMaps = existingMaps.filter((m) => !usedExistingIds.has(m.id));
+          if (toDeleteMaps.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: toDeleteMaps.map((m: any) => ({ id: m.id })),
+            });
+          }
+
+          // 기존 단가 조회
+          let existingPriceRows: any[] = [];
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingPriceRows = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 단가 upsert
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          const usedPriceIds = new Set<string>();
+          for (let pi = 0; pi < priceRows.length; pi++) {
+            const price = priceRows[pi];
+            const priceData = {
+              mapping_id: firstMappingId || editItemData.id,
+              supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            };
+            const existPrice = existingPriceRows[pi];
+            if (existPrice) {
+              await apiClient.put(`/table-management/tables/${PRICE_TABLE}/edit`, {
+                originalData: { id: existPrice.id },
+                updatedData: priceData,
+              });
+              usedPriceIds.add(existPrice.id);
+            } else {
+              await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+                id: crypto.randomUUID(), ...priceData,
+              });
+            }
+          }
+          // 초과분 delete
+          const toDeletePrices = existingPriceRows.filter((p) => !usedPriceIds.has(p.id));
+          if (toDeletePrices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: toDeletePrices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } else {
+          if (!mappingRows.length || !mappingRows[0]?.supplier_item_code) {
+            const existingCheck = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 1,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "supplier_id", operator: "equals", value: selectedSupplier.supplier_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            if ((existingCheck.data?.data?.data || existingCheck.data?.data?.rows || []).length > 0) {
+              toast.warning(`${item.item_name || itemKey} 품목은 이미 등록되어 있습니다.`);
+              continue;
+            }
+          }
+
+          let mappingId: string | null = null;
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+            supplier_item_code: mappingRows[0]?.supplier_item_code || "",
+            supplier_item_name: mappingRows[0]?.supplier_item_name || "",
+          });
+          mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              supplier_item_code: mappingRows[mi].supplier_item_code || "",
+              supplier_item_name: mappingRows[mi].supplier_item_name || "",
+            });
+          }
+
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", supplier_id: selectedSupplier.supplier_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedItemsForDetail.length}개 품목이 추가되었습니다.`);
+      setItemDetailOpen(false);
+      setEditItemData(null);
+      setItemCheckedIds(new Set());
+      const cid = selectedSupplierId;
+      setSelectedSupplierId(null);
+      setTimeout(() => setSelectedSupplierId(cid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+      savingRef.current = false;
+    }
+  };
+
+  // 품목 매핑 삭제
+  const handlePriceItemDelete = async () => {
+    if (priceCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${priceCheckedIds.length}개 품목 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      for (const mappingId of priceCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: priceCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${priceCheckedIds.length}개 품목 매핑이 삭제되었습니다.`);
+      setPriceCheckedIds([]);
+      const cid = selectedSupplierId;
+      setSelectedSupplierId(null);
+      setTimeout(() => setSelectedSupplierId(cid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // EDataTable 컬럼 정의 (공급업체 목록) — ts.visibleColumns 순서를 따름
+  const supplierColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      supplier_code: { width: "w-[120px]" },
+      supplier_name: { minWidth: "min-w-[140px]" },
+      division: {
+        width: "w-[80px]",
+        render: (val: any) =>
+          val ? (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
+              {val}
+            </Badge>
+          ) : null,
+      },
+      contact_person: { width: "w-[80px]" },
+      contact_phone: { width: "w-[120px]" },
+      email: { width: "w-[160px]" },
+      business_number: { width: "w-[120px]" },
+      address: { minWidth: "min-w-[150px]" },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val}
+            </Badge>
+          ) : null,
+      },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (suppliers.length === 0) return;
+    toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
+    try {
+      const allMappings: any[] = [];
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 5000, autoFilter: true,
+      });
+      const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemIds.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+            autoFilter: true,
+          });
+          for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+            itemMap[item.item_number] = item;
+          }
+        } catch { /* skip */ }
+      }
+      for (const m of mappings) {
+        const itemInfo = itemMap[m.item_id] || {};
+        allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
+      }
+
+      const rows: Record<string, any>[] = [];
+      for (const c of suppliers) {
+        const suppMappings = allMappings.filter((m) => m.supplier_id === c.supplier_code);
+        if (suppMappings.length === 0) {
+          rows.push({
+            공급업체코드: c.supplier_code, 공급업체명: c.supplier_name,
+            공급업체유형: getCategoryLabel("division", c.division),
+            담당자: c.contact_person, 전화번호: c.contact_phone,
+            사업자번호: c.business_number, 이메일: c.email,
+            상태: getCategoryLabel("status", c.status),
+            품목코드: "", 품명: "", 규격: "",
+            공급업체품번: "", 공급업체품명: "",
+            기준가: "", 할인유형: "", 할인값: "", 단가: "", 통화: "",
+          });
+        } else {
+          for (const m of suppMappings) {
+            rows.push({
+              공급업체코드: c.supplier_code, 공급업체명: c.supplier_name,
+              공급업체유형: getCategoryLabel("division", c.division),
+              담당자: c.contact_person, 전화번호: c.contact_phone,
+              사업자번호: c.business_number, 이메일: c.email,
+              상태: getCategoryLabel("status", c.status),
+              품목코드: m.item_id || "", 품명: m.item_name || "", 규격: m.item_spec || "",
+              공급업체품번: m.supplier_item_code || "", 공급업체품명: m.supplier_item_name || "",
+              기준가: m.base_price || "", 할인유형: m.discount_type || "", 할인값: m.discount_value || "",
+              단가: m.calculated_price || "", 통화: m.currency_code || "",
+            });
+          }
+        }
+      }
+      await exportToExcel(rows, "공급업체관리.xlsx", "거래처+품목");
+      toast.dismiss("excel-dl");
+      toast.success(`${rows.length}행 다운로드 완료`);
+    } catch (err) {
+      toast.dismiss("excel-dl");
+      toast.error("다운로드에 실패했습니다.");
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={SUPPLIER_TABLE}
+        filterId="c16-supplier"
+        onFilterChange={setSearchFilters}
+        dataCount={suppliers.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button
+            variant="outline" size="sm" className="h-8" disabled={excelDetecting}
+            onClick={async () => {
+              setExcelDetecting(true);
+              try {
+                const result = await autoDetectMultiTableConfig(SUPPLIER_TABLE);
+                if (result.success && result.data) {
+                  setExcelChainConfig(result.data);
+                  setExcelUploadOpen(true);
+                } else {
+                  toast.error(result.message || "테이블 구조 분석 실패");
+                }
+              } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+            }}
+          >
+            {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />}
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 공급업체 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">공급업체 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {supplierCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <label className="flex items-center gap-1.5 cursor-pointer mr-1">
+                    <input type="checkbox" checked={showInactive} onChange={(e) => setShowInactive(e.target.checked)} className="rounded" />
+                    <span className="text-[11px] text-muted-foreground">거래정지 포함</span>
+                  </label>
+                  <Button size="sm" onClick={openSupplierRegister}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedSupplierId} onClick={openSupplierEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedSupplierId} onClick={handleSupplierDelete}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={supplierColumns}
+                data={ts.groupData(showInactive ? suppliers : suppliers.filter((c) => c.status !== "거래정지"))}
+                rowKey={(row) => row.id}
+                loading={supplierLoading}
+                emptyMessage="등록된 공급업체가 없어요"
+                selectedId={selectedSupplierId}
+                onSelect={(id) => setSelectedSupplierId(id)}
+                onRowDoubleClick={(row) => { setSelectedSupplierId(row.id); openSupplierEdit(); }}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-supplier"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedSupplierId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">공급업체를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 공급업체를 선택하면 상세 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 탭 + 버튼 통합 헤더 */}
+                  <Tabs
+                    value={rightTab}
+                    onValueChange={(v) => setRightTab(v as "items" | "delivery")}
+                    className="flex flex-col flex-1 overflow-hidden gap-0"
+                  >
+                    <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                      <TabsList className="bg-transparent h-auto p-0 rounded-none">
+                        <TabsTrigger
+                          value="items"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <Package className="w-3.5 h-3.5" /> 공급업체별 품목정보
+                          {Object.keys(priceGroups).length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{Object.keys(priceGroups).length}</Badge>
+                          )}
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="delivery"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <MapPin className="w-3.5 h-3.5" /> 납품처 정보
+                          {deliveryItems.length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{deliveryItems.length}</Badge>
+                          )}
+                        </TabsTrigger>
+                      </TabsList>
+                      <div className="flex gap-1.5">
+                        {rightTab === "items" ? (
+                          <>
+                            <Button size="sm" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
+                              <Plus className="w-3.5 h-3.5" /> 품목 추가
+                            </Button>
+                            <Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0} onClick={handlePriceItemDelete}>
+                              <Trash2 className="w-3.5 h-3.5" /> 삭제
+                            </Button>
+                          </>
+                        ) : (
+                          <Button size="sm" variant="outline" onClick={openSupplierEdit}>
+                            <Pencil className="w-3.5 h-3.5 mr-1" /> 공급업체 수정에서 관리
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 품목정보 탭 */}
+                    <TabsContent value="items" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[40px] text-center px-2">
+                                <input
+                                  type="checkbox"
+                                  className="rounded"
+                                  checked={priceItems.length > 0 && priceCheckedIds.length === priceItems.length}
+                                  onChange={(e) => setPriceCheckedIds(e.target.checked ? priceItems.map((p) => p.id) : [])}
+                                />
+                              </TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                              <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품번</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체품명</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                              <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                              <TableHead className="w-[60px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                              <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {priceLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.keys(priceGroups).length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 품목이 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.entries(priceGroups).map(([itemKey, group]) => {
+                              const isExpanded = expandedItems.has(itemKey);
+                              const m = group.master;
+                              const isChecked = priceCheckedIds.includes(m.id);
+                              return (
+                                <React.Fragment key={itemKey}>
+                                  {/* 마스터 행 */}
+                                  <TableRow
+                                    className={cn(
+                                      "cursor-pointer border-l-[3px] border-l-transparent h-[41px]",
+                                      isChecked && "bg-primary/5 border-l-primary"
+                                    )}
+                                    onClick={() => {
+                                      setExpandedItems((prev) => {
+                                        const next = new Set(prev);
+                                        if (next.has(itemKey)) next.delete(itemKey); else next.add(itemKey);
+                                        return next;
+                                      });
+                                    }}
+                                    onDoubleClick={() => openEditItem(m)}
+                                  >
+                                    <TableCell
+                                      className="text-center px-2"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        setPriceCheckedIds((prev) =>
+                                          prev.includes(m.id) ? prev.filter((id) => id !== m.id) : [...prev, m.id]
+                                        );
+                                      }}
+                                    >
+                                      <input type="checkbox" className="rounded" checked={isChecked} readOnly />
+                                    </TableCell>
+                                    <TableCell className="text-[13px] font-mono">
+                                      <div className="flex items-center gap-1">
+                                        {isExpanded
+                                          ? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                          : <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                        }
+                                        {m.item_number}
+                                      </div>
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.supplier_item_code}</TableCell>
+                                    <TableCell className="text-[13px]">{m.supplier_item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.base_price_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">
+                                      {m.base_price ? Number(m.base_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.discount_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">{m.discount_value ? Number(m.discount_value).toLocaleString() : ""}</TableCell>
+                                    <TableCell className="text-[13px] text-right font-semibold">
+                                      {m.calculated_price ? Number(m.calculated_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.currency_code}</TableCell>
+                                  </TableRow>
+
+                                  {/* 현재 단가 카드 (펼쳤을 때) */}
+                                  {isExpanded && (() => {
+                                    const cp = group.details.find((p) => p.is_current) || group.details[0];
+                                    if (!cp) return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="py-3 px-4 text-xs text-muted-foreground">등록된 단가가 없어요</TableCell>
+                                      </TableRow>
+                                    );
+                                    return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="px-4 py-3">
+                                          <div className="border border-primary/20 rounded-lg bg-card overflow-hidden">
+                                            {/* 카드 헤더 */}
+                                            <div className="flex items-center justify-between px-4 py-2 bg-primary/[0.04] border-b border-primary/10">
+                                              <div className="flex items-center gap-2">
+                                                <Coins className="w-3.5 h-3.5 text-primary" />
+                                                <span className="text-xs font-semibold">적용 단가</span>
+                                                <Badge variant="secondary" className="text-[9px] px-1.5 py-0 bg-primary/10 text-primary">현재</Badge>
+                                              </div>
+                                              {group.details.length > 1 && (
+                                                <span className="text-[10px] text-muted-foreground">전체 {group.details.length}건 중</span>
+                                              )}
+                                            </div>
+                                            {/* 카드 내용 */}
+                                            <div className="px-5 py-3.5 flex items-end gap-0 text-[13px]">
+                                              <div className="flex flex-col pr-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기간</span>
+                                                <span className="font-mono text-muted-foreground text-xs">
+                                                  {cp.start_date ? String(cp.start_date).split("T")[0] : "—"} ~ {cp.end_date ? String(cp.end_date).split("T")[0] : "—"}
+                                                </span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준유형</span>
+                                                <span>{cp.base_price_type_label || "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준가</span>
+                                                <span className="font-mono font-medium">{cp.base_price ? Number(cp.base_price).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인유형</span>
+                                                <span>{cp.discount_type_label && cp.discount_type_label !== "할인없음" ? cp.discount_type_label : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인값</span>
+                                                <span className="font-mono">{cp.discount_value ? Number(cp.discount_value).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">단수처리</span>
+                                                <span>
+                                                  {cp.rounding_unit_value
+                                                    ? (priceCategoryOptions["rounding_unit_value"]?.find((o) => o.code === cp.rounding_unit_value)?.label || cp.rounding_unit_value)
+                                                    : "-"}
+                                                </span>
+                                              </div>
+                                              <span className="text-primary/50 px-4 pb-0.5 text-lg">→</span>
+                                              <div className="flex flex-col pl-1">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">계산단가</span>
+                                                <span className="text-base font-bold font-mono text-foreground">
+                                                  {(cp.calculated_price || cp.unit_price) ? Number(cp.calculated_price || cp.unit_price).toLocaleString() : "-"}
+                                                  <span className="text-xs font-normal text-muted-foreground ml-1.5">{cp.currency_label}</span>
+                                                </span>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })()}
+                                </React.Fragment>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+
+                    {/* 납품처 탭 */}
+                    <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                              <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                              <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                              <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {deliveryLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 납품처가 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.map((d) => (
+                              <TableRow key={d.id} className="h-[41px]">
+                                <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                                <TableCell className="text-sm">{d.destination_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                                <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                                <TableCell className="text-[13px]">{d.phone}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                                <TableCell className="text-center">
+                                  {d.is_default && (
+                                    <Badge variant="default" className="text-[10px] px-1.5 py-0 h-5">메인</Badge>
+                                  )}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 모달: 공급업체 등록/수정 (3탭) ── */}
+      <Dialog open={supplierModalOpen} onOpenChange={(open) => {
+        if (!open && isConfirmOpenRef.current) return;
+        setSupplierModalOpen(open);
+        if (!open) {
+          setModalContactFormOpen(false);
+          setModalDeliveryFormOpen(false);
+          setModalContactForm({});
+          setModalDeliveryForm({});
+          setModalContactEditId(null);
+          setModalDeliveryEditId(null);
+          fetchSuppliers();
+          if (supplierForm.supplier_code) {
+            const cid = selectedSupplierId;
+            setSelectedSupplierId(null);
+            setTimeout(() => setSelectedSupplierId(cid), 50);
+          }
+        }
+      }}>
+        <DialogContent className="max-w-4xl h-[85vh] flex flex-col overflow-hidden p-0">
+          <DialogHeader className="px-6 pt-5 pb-0 shrink-0">
+            <DialogTitle>{supplierEditMode ? "공급업체 수정" : "공급업체 등록"}</DialogTitle>
+            <DialogDescription>
+              {supplierEditMode ? "공급업체 정보를 수정합니다." : "새 공급업체를 등록합니다."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <Tabs value={supplierModalTab} onValueChange={(v: any) => setSupplierModalTab(v)} className="flex flex-col flex-1 overflow-hidden">
+            <div className="shrink-0">
+              <TabsList className="bg-transparent w-full h-auto p-0 rounded-none gap-0">
+                <TabsTrigger value="basic" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  기본정보
+                </TabsTrigger>
+                <TabsTrigger value="contacts" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  담당자 관리
+                  {modalContacts.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalContacts.length}</span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="delivery" className="flex-1 rounded-none py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  납품처 관리
+                  {modalDeliveries.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalDeliveries.length}</span>
+                  )}
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            {/* 기본정보 탭 */}
+            <TabsContent value="basic" className="flex-1 overflow-y-auto mt-0">
+              <div className="px-6 py-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체 코드</Label>
+                    <Input
+                      value={supplierForm.supplier_code || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, supplier_code: e.target.value }))}
+                      placeholder={supplierEditMode ? "" : "자동 생성"}
+                      className={cn("h-9 font-mono", !supplierEditMode && supplierForm.supplier_code && "bg-muted")}
+                      readOnly={!supplierEditMode && !!supplierForm.supplier_code}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={supplierForm.supplier_name || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, supplier_name: e.target.value }))}
+                      placeholder="공급업체명"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체 유형</Label>
+                    <Select
+                      value={supplierForm.division || "__none__"}
+                      onValueChange={(v) => setSupplierForm((p) => ({ ...p, division: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="공급업체 유형" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["division"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+                    <Select
+                      value={supplierForm.status || "__none__"}
+                      onValueChange={(v) => setSupplierForm((p) => ({ ...p, status: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="상태" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">공급업체담당자</Label>
+                    <Input
+                      value={supplierForm.contact_person || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, contact_person: e.target.value }))}
+                      placeholder="공급업체담당자"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">전화번호</Label>
+                    <Input
+                      value={supplierForm.contact_phone || ""}
+                      onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                      placeholder="010-0000-0000"
+                      className={cn("h-9", formErrors.contact_phone && "border-destructive")}
+                    />
+                    {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">이메일</Label>
+                    <Input
+                      value={supplierForm.email || ""}
+                      onChange={(e) => handleFormChange("email", e.target.value)}
+                      placeholder="example@email.com"
+                      className={cn("h-9", formErrors.email && "border-destructive")}
+                    />
+                    {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">사업자번호</Label>
+                    <Input
+                      value={supplierForm.business_number || ""}
+                      onChange={(e) => handleFormChange("business_number", e.target.value)}
+                      placeholder="000-00-00000"
+                      className={cn("h-9", formErrors.business_number && "border-destructive")}
+                    />
+                    {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+                  </div>
+                  <div className="space-y-1.5 col-span-2">
+                    <Label className="text-sm">주소</Label>
+                    <Input
+                      value={supplierForm.address || ""}
+                      onChange={(e) => setSupplierForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="주소"
+                      className="h-9"
+                    />
+                  </div>
+                </div>
+
+                {/* 세금유형 */}
+                <div className="mt-4 pt-4 border-t">
+                  <div className="flex items-center justify-between mb-2">
+                    <Label className="text-sm font-semibold flex items-center gap-1.5">
+                      <Coins className="w-3.5 h-3.5 text-primary" /> 세금유형
+                    </Label>
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => {
+                      setTaxTypeRows((prev) => [...prev, { _id: `tax_${Date.now()}_${Math.random()}`, tax_type_name: "", rate: "" }]);
+                    }}>
+                      <Plus className="h-3 w-3 mr-1" /> 추가
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    {taxTypeRows.map((row, idx) => (
+                      <div key={row._id} className="flex gap-2 items-center">
+                        <span className="text-xs text-muted-foreground w-4 shrink-0">{idx + 1}</span>
+                        <Select value={row.tax_type_name} onValueChange={(v) => {
+                          setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, tax_type_name: v } : r));
+                        }}>
+                          <SelectTrigger className="h-9 text-[13px] flex-1"><SelectValue placeholder="세금유형 선택" /></SelectTrigger>
+                          <SelectContent>
+                            {taxTypeOptions.map((o) => (
+                              <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <Input
+                          value={row.rate}
+                          onChange={(e) => {
+                            const v = e.target.value.replace(/[^\d.]/g, "");
+                            setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, rate: v } : r));
+                          }}
+                          placeholder="세율 %"
+                          className="h-9 text-[13px] w-[80px] text-right"
+                        />
+                        <span className="text-xs text-muted-foreground">%</span>
+                        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                          onClick={() => setTaxTypeRows((prev) => prev.filter((r) => r._id !== row._id))}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* 담당자 관리 탭 */}
+            <TabsContent value="contacts" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 담당자 목록 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    담당자 {modalContacts.length}명
+                  </span>
+                  <Button size="sm" onClick={() => {
+                    setModalContactForm({});
+                    setModalContactEditId(null);
+                    setModalContactFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 담당자 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalContactLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalContacts.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Users className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 담당자가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자명</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부서</TableHead>
+                          <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalContacts].sort((a, b) => {
+                          const aMain = a.is_main === "Y" || a.is_main === true ? 0 : 1;
+                          const bMain = b.is_main === "Y" || b.is_main === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((c) => (
+                          <TableRow key={c._localId || c.id} className="h-[41px]">
+                            <TableCell className="text-sm font-medium">{c.contact_name}</TableCell>
+                            <TableCell className="text-[13px]">{c.contact_phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.contact_email}</TableCell>
+                            <TableCell className="text-[13px]">{c.department}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (c.is_main === "Y" || c.is_main === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = c.is_main === "Y" || c.is_main === true;
+                                  if (isCurrentMain) {
+                                    // 메인 해제
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id) ? { ...item, is_main: "N" } : item
+                                    ));
+                                  } else {
+                                    // 메인 설정 — 기존 메인이 있으면 확인
+                                    const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== (c._localId || c.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id)
+                                        ? { ...item, is_main: "Y" }
+                                        : { ...item, is_main: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(c.is_main === "Y" || c.is_main === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalContactForm({ ...c });
+                                    setModalContactEditId(c._localId || c.id);
+                                    setModalContactFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalContactDelete(c._localId || c.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 담당자 폼 (인라인) */}
+                {modalContactFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalContactEditId ? "담당자 수정" : "담당자 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalContactForm.contact_name || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_name: e.target.value }))}
+                          placeholder="담당자명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalContactForm.contact_phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalContactForm((p) => ({ ...p, contact_phone: formatted }));
+                          }}
+                          placeholder="010-0000-0000"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">이메일</Label>
+                        <Input
+                          value={modalContactForm.contact_email || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_email: e.target.value }))}
+                          placeholder="example@email.com"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">부서</Label>
+                        <Input
+                          value={modalContactForm.department || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, department: e.target.value }))}
+                          placeholder="부서명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalContactForm.memo || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalContactForm.is_main === "Y" || modalContactForm.is_main === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== modalContactEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalContacts((prev) => prev.map((item) => ({ ...item, is_main: "N" })));
+                                }
+                                setModalContactForm((p) => ({ ...p, is_main: "Y" }));
+                              } else {
+                                setModalContactForm((p) => ({ ...p, is_main: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 담당자</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalContactFormOpen(false); setModalContactForm({}); setModalContactEditId(null); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalContactSave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalContactEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            {/* ── 탭3: 납품처 관리 ── */}
+            <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 납품처 목록 헤더 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    납품처 {modalDeliveries.length}개
+                  </span>
+                  <Button size="sm" onClick={async () => {
+                    const code = await generateDeliveryCode();
+                    setModalDeliveryForm({ destination_code: code });
+                    setModalDeliveryEditId(null);
+                    setModalDeliveryFormErrors({});
+                    setModalDeliveryFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalDeliveryLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalDeliveries.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <MapPin className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 납품처가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalDeliveries].sort((a, b) => {
+                          const aMain = a.is_default === "Y" || a.is_default === true ? 0 : 1;
+                          const bMain = b.is_default === "Y" || b.is_default === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((d) => (
+                          <TableRow key={d._localId || d.id || d.destination_code} className="h-[41px]">
+                            <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                            <TableCell className="text-sm">{d.destination_name}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                            <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                            <TableCell className="text-[13px]">{d.phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (d.is_default === "Y" || d.is_default === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = d.is_default === "Y" || d.is_default === true;
+                                  if (isCurrentMain) {
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id) ? { ...item, is_default: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== (d._localId || d.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id)
+                                        ? { ...item, is_default: "Y" }
+                                        : { ...item, is_default: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(d.is_default === "Y" || d.is_default === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalDeliveryForm({ ...d });
+                                    setModalDeliveryEditId(d._localId || d.id);
+                                    setModalDeliveryFormErrors({});
+                                    setModalDeliveryFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalDeliveryDelete(d._localId || d.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 납품처 폼 (인라인) */}
+                {modalDeliveryFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalDeliveryEditId ? "납품처 수정" : "납품처 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처코드</Label>
+                        <Input
+                          value={modalDeliveryForm.destination_code || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
+                          placeholder="자동 생성"
+                          className={cn("h-8 text-sm font-mono", modalDeliveryForm.destination_code && "bg-muted")}
+                          readOnly={!!modalDeliveryForm.destination_code && !modalDeliveryEditId}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalDeliveryForm.destination_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
+                          placeholder="납품처명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자</Label>
+                        <Input
+                          value={modalDeliveryForm.manager_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
+                          placeholder="담당자"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 col-span-2">
+                        <Label className="text-xs">주소</Label>
+                        <Input
+                          value={modalDeliveryForm.address || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, address: e.target.value }))}
+                          placeholder="주소"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalDeliveryForm.phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalDeliveryForm((p) => ({ ...p, phone: formatted }));
+                            const err = validateField("phone", formatted);
+                            setModalDeliveryFormErrors((p) => {
+                              const n = { ...p };
+                              if (err) n.phone = err; else delete n.phone;
+                              return n;
+                            });
+                          }}
+                          placeholder="010-0000-0000"
+                          className={cn("h-8 text-sm", modalDeliveryFormErrors.phone && "border-destructive")}
+                        />
+                        {modalDeliveryFormErrors.phone && <p className="text-xs text-destructive">{modalDeliveryFormErrors.phone}</p>}
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalDeliveryForm.memo || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== modalDeliveryEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalDeliveries((prev) => prev.map((item) => ({ ...item, is_default: "N" })));
+                                }
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "Y" }));
+                              } else {
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 납품처로 설정</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalDeliveryFormOpen(false); setModalDeliveryForm({}); setModalDeliveryEditId(null); setModalDeliveryFormErrors({}); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalDeliverySave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalDeliveryEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+          <div className="border-t px-6 py-3 flex items-center gap-2 shrink-0">
+            {!supplierEditMode && (
+              <label className="flex items-center gap-2 cursor-pointer mr-auto">
+                <input type="checkbox" checked={continuousInput} onChange={(e) => setContinuousInput(e.target.checked)} className="rounded" />
+                <span className="text-sm font-medium">연속입력</span>
+              </label>
+            )}
+            <Button variant="outline" onClick={() => setSupplierModalOpen(false)}>닫기</Button>
+            <Button onClick={handleSupplierSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {supplierEditMode ? "저장" : "등록"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 선택 (1단계) ── */}
+      <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>품목 선택</DialogTitle>
+            <DialogDescription>공급업체에 추가할 품목을 선택하세요. (전체: {itemTotalCount}건 / 대상: {itemSearchResults.length}건{itemCheckedIds.size > 0 ? ` / 선택: ${itemCheckedIds.size}건` : ""})</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              placeholder="품명/품목코드 검색"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+              className="h-9 flex-1"
+            />
+            <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+              {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+            </Button>
+          </div>
+          <div className="overflow-auto max-h-[350px] border rounded-lg">
+            <Table noWrapper>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted h-10">
+                  <TableHead className="w-[40px] text-center px-2">
+                    <input
+                      type="checkbox"
+                      className="rounded"
+                      checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                      onChange={(e) => {
+                        if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                        else setItemCheckedIds(new Set());
+                      }}
+                    />
+                  </TableHead>
+                  <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="min-w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                  <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {itemSearchResults.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                      검색 결과가 없어요
+                    </TableCell>
+                  </TableRow>
+                ) : itemSearchResults.map((item) => (
+                  <TableRow
+                    key={item.id}
+                    className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                    onClick={() => setItemCheckedIds((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                      return next;
+                    })}
+                  >
+                    <TableCell className="text-center px-2">
+                      <input type="checkbox" className="rounded" checked={itemCheckedIds.has(item.id)} readOnly />
+                    </TableCell>
+                    <TableCell className="text-[13px] font-mono">
+                      <span className="block truncate" title={item.item_number}>{item.item_number}</span>
+                    </TableCell>
+                    <TableCell className="text-sm">{item.item_name}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.size}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.material}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.unit}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <DialogFooter className="flex items-center justify-between w-full">
+            <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+              <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 상세 입력 (2단계) ── */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedSupplier?.supplier_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData
+                ? "거래처 품번/품명과 기간별 단가를 수정합니다."
+                : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2 flex-1 overflow-y-auto">
+            {selectedItemsForDetail.map((item, idx) => {
+              const itemKey = item.item_number || item.id;
+              const mappingRows = itemMappings[itemKey] || [];
+              const prices = itemPrices[itemKey] || [];
+
+              return (
+                <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
+                  {/* 품목 헤더 */}
+                  <div className="px-5 py-3 bg-muted/30 border-b">
+                    <div className="font-bold">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
+                  </div>
+
+                  <div className="flex gap-4 p-5 items-stretch">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Tag className="w-3.5 h-3.5 text-primary" /> 거래처 품번/품명 관리
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 품번 추가
+                        </Button>
+                      </div>
+                      <div className="border-2 border-foreground/20 rounded-lg bg-background p-3 space-y-2 min-h-[200px] max-h-[350px] overflow-y-auto flex-1">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : (
+                          <DndContext
+                            sensors={dndSensors}
+                            collisionDetection={closestCenter}
+                            onDragEnd={(e) => handleMappingDragEnd(itemKey, e)}
+                          >
+                            <SortableContext items={mappingRows.map((r) => r._id)} strategy={verticalListSortingStrategy}>
+                              {mappingRows.map((mRow, mIdx) => (
+                                <SortableMappingRow key={mRow._id} id={mRow._id}>
+                                  <span className="text-xs text-muted-foreground/50 font-mono w-4 shrink-0 text-center">{mIdx + 1}</span>
+                                  <Input
+                                    value={mRow.supplier_item_code}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "supplier_item_code", e.target.value)}
+                                    placeholder="거래처 품번"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Input
+                                    value={mRow.supplier_item_name}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "supplier_item_name", e.target.value)}
+                                    placeholder="거래처 품명"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Button
+                                    variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                                    onClick={() => removeMappingRow(itemKey, mRow._id)}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                </SortableMappingRow>
+                              ))}
+                            </SortableContext>
+                          </DndContext>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Coins className="w-3.5 h-3.5 text-primary" /> 기간별 단가 설정
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3 flex-1 overflow-y-auto max-h-[350px]">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border-2 border-foreground/20 rounded-lg bg-background overflow-hidden">
+                            <div
+                              className="flex items-center justify-between px-4 py-2.5 cursor-pointer hover:bg-muted/50 transition-colors"
+                              onClick={() => setCollapsedPriceCards((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(price._id)) next.delete(price._id); else next.add(price._id);
+                                return next;
+                              })}
+                            >
+                              <div className="flex items-center gap-2">
+                                {collapsedPriceCards.has(price._id)
+                                  ? <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                                  : <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                                }
+                                <span className="text-[13px] font-semibold text-muted-foreground">단가 {pIdx + 1}</span>
+                                {collapsedPriceCards.has(price._id) && price.calculated_price && (
+                                  <span className="text-xs text-muted-foreground ml-2">
+                                    {price.start_date || "—"} ~ {price.end_date || "—"} · <span className="font-mono font-bold text-foreground">{Number(price.calculated_price).toLocaleString()}</span> {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                  </span>
+                                )}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                {prices.length > 1 && (
+                                  <Button
+                                    variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
+                                    onClick={(e) => { e.stopPropagation(); removePriceRow(itemKey, price._id); }}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                )}
+                              </div>
+                            </div>
+                            {!collapsedPriceCards.has(price._id) && <div className="px-4 pb-4 space-y-2.5">
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">시작일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.start_date}
+                                  onChange={(e) => {
+                                    const v = e.target.value;
+                                    updatePriceRow(itemKey, price._id, "start_date", v);
+                                    if (price.end_date && v > price.end_date) {
+                                      updatePriceRow(itemKey, price._id, "end_date", v);
+                                    }
+                                  }}
+                                  max={price.end_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <span className="text-xs text-muted-foreground mt-4">~</span>
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">종료일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.end_date}
+                                  onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                  min={price.start_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <div className="w-[80px]">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">&nbsp;</Label>
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="통화" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "base_price", raw);
+                                }}
+                                className="h-9 text-[13px] text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-9 text-[13px] text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-1.5 pt-2 border-t">
+                              <span className="text-[13px] text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-base font-mono">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                              {price.calculated_price && price.currency_code && (
+                                <span className="text-[13px] text-muted-foreground">
+                                  {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                </span>
+                              )}
+                            </div>
+                            </div>}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal
+          open={excelUploadOpen}
+          onOpenChange={(open) => {
+            setExcelUploadOpen(open);
+            if (!open) setExcelChainConfig(null);
+          }}
+          config={excelChainConfig}
+          onSuccess={() => {
+            fetchSuppliers();
+            const cid = selectedSupplierId;
+            setSelectedSupplierId(null);
+            setTimeout(() => setSelectedSupplierId(cid), 50);
+          }}
+        />
+      )}
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/quality/inspection/page.tsx b/frontend/app/(main)/COMPANY_9/quality/inspection/page.tsx
new file mode 100644
index 00000000..cacd9d02
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/quality/inspection/page.tsx
@@ -0,0 +1,1703 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Plus,
+  Trash2,
+  Save,
+  Loader2,
+  Pencil,
+  ClipboardCheck,
+  AlertTriangle,
+  Wrench,
+  Search,
+  Inbox,
+  Settings2,
+} from "lucide-react";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+/* ───── 테이블명 ───── */
+const INSPECTION_TABLE = "inspection_standard";
+
+const INSPECTION_COLUMNS = [
+  { key: "inspection_code", label: "검사코드" },
+  { key: "inspection_type", label: "검사유형" },
+  { key: "inspection_criteria", label: "검사기준" },
+  { key: "inspection_item", label: "검사항목" },
+  { key: "inspection_method", label: "검사방법" },
+  { key: "judgment_criteria", label: "판단기준" },
+  { key: "unit", label: "단위" },
+  { key: "apply_type", label: "적용구분" },
+  { key: "manager", label: "관리자" },
+];
+const DEFECT_TABLE = "defect_standard_mng";
+const EQUIPMENT_TABLE = "inspection_equipment_mng";
+
+/* ───── 카테고리 flatten ───── */
+const flattenCategories = (vals: any[]): { code: string; label: string }[] => {
+  const result: { code: string; label: string }[] = [];
+  for (const v of vals) {
+    result.push({ code: v.valueCode, label: v.valueLabel });
+    if (v.children?.length) result.push(...flattenCategories(v.children));
+  }
+  return result;
+};
+
+export default function InspectionManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-inspection", INSPECTION_TABLE, INSPECTION_COLUMNS);
+
+  const [activeTab, setActiveTab] = useState("inspection");
+
+  /* ───── 검사기준 ───── */
+  const [inspections, setInspections] = useState<any[]>([]);
+  const [inspLoading, setInspLoading] = useState(false);
+  const [inspCount, setInspCount] = useState(0);
+  const [inspChecked, setInspChecked] = useState<string[]>([]);
+  const [inspModalOpen, setInspModalOpen] = useState(false);
+  const [inspEditMode, setInspEditMode] = useState(false);
+  const [inspForm, setInspForm] = useState<Record<string, any>>({});
+  const [inspSaving, setInspSaving] = useState(false);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  /* ───── 불량관리 ───── */
+  const [defects, setDefects] = useState<any[]>([]);
+  const [defLoading, setDefLoading] = useState(false);
+  const [defCount, setDefCount] = useState(0);
+  const [defChecked, setDefChecked] = useState<string[]>([]);
+  const [defModalOpen, setDefModalOpen] = useState(false);
+  const [defEditMode, setDefEditMode] = useState(false);
+  const [defForm, setDefForm] = useState<Record<string, any>>({});
+  const [defSaving, setDefSaving] = useState(false);
+  const [defKeyword, setDefKeyword] = useState("");
+
+  /* ───── 검사장비 ───── */
+  const [equipments, setEquipments] = useState<any[]>([]);
+  const [eqLoading, setEqLoading] = useState(false);
+  const [eqCount, setEqCount] = useState(0);
+  const [eqChecked, setEqChecked] = useState<string[]>([]);
+  const [eqModalOpen, setEqModalOpen] = useState(false);
+  const [eqEditMode, setEqEditMode] = useState(false);
+  const [eqForm, setEqForm] = useState<Record<string, any>>({});
+  const [eqSaving, setEqSaving] = useState(false);
+  const [eqKeyword, setEqKeyword] = useState("");
+
+  /* ───── 채번 ───── */
+  const [numberingRuleId, setNumberingRuleId] = useState<string | null>(null);
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  /* ───── 카테고리 옵션 ───── */
+  const [catOptions, setCatOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [userOptions, setUserOptions] = useState<{ code: string; label: string }[]>([]);
+
+  /* ═══════════════════ 카테고리 로드 ═══════════════════ */
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      const catList = [
+        { table: INSPECTION_TABLE, col: "inspection_type" },
+        { table: INSPECTION_TABLE, col: "apply_type" },
+        { table: INSPECTION_TABLE, col: "inspection_method" },
+        { table: INSPECTION_TABLE, col: "judgment_criteria" },
+        { table: INSPECTION_TABLE, col: "unit" },
+        { table: DEFECT_TABLE, col: "defect_type" },
+        { table: DEFECT_TABLE, col: "severity" },
+        { table: DEFECT_TABLE, col: "inspection_type" },
+        { table: DEFECT_TABLE, col: "is_active" },
+        { table: EQUIPMENT_TABLE, col: "equipment_type" },
+        { table: EQUIPMENT_TABLE, col: "equipment_status" },
+      ];
+      await Promise.all(
+        catList.map(async ({ table, col }) => {
+          try {
+            const res = await apiClient.get(`/table-categories/${table}/${col}/values`);
+            if (res.data?.data?.length > 0) {
+              optMap[`${table}.${col}`] = flattenCategories(res.data.data);
+            }
+          } catch {
+            /* skip */
+          }
+        }),
+      );
+      setCatOptions(optMap);
+      // 사용자 목록 로드
+      try {
+        const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
+          page: 1,
+          size: 500,
+          autoFilter: true,
+        });
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        setUserOptions(
+          users.map((u: any) => ({
+            code: u.user_id || u.id,
+            label: `${u.user_name || u.name || u.user_id}${u.dept_name ? ` (${u.dept_name})` : ""}`,
+          })),
+        );
+      } catch {
+        /* skip */
+      }
+    };
+    load();
+  }, []);
+
+  const getCatLabel = (table: string, col: string, code: string) => {
+    if (!code) return "";
+    const opts = catOptions[`${table}.${col}`];
+    if (!opts) return code;
+    // 쉼표 구분 다중 코드 지원
+    if (code.includes(",")) {
+      return code
+        .split(",")
+        .filter(Boolean)
+        .map((c) => opts.find((o) => o.code === c)?.label || c)
+        .join(", ");
+    }
+    return opts.find((o) => o.code === code)?.label || code;
+  };
+
+  const inspTableColumns = useMemo<EDataTableColumn[]>(() => {
+    return ts.visibleColumns.map((col) => {
+      const base: EDataTableColumn = { key: col.key, label: col.label };
+      if (["inspection_type", "inspection_method", "judgment_criteria", "unit", "apply_type"].includes(col.key)) {
+        base.render = (v: any, row: any) => getCatLabel(INSPECTION_TABLE, col.key, row[col.key]);
+      }
+      return base;
+    });
+  }, [ts.visibleColumns, catOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  // 다중값 컬럼 (쉼표 구분 저장) — 서버 equals 대신 contains 사용
+  const MULTI_VALUE_COLUMNS = ["inspection_type"];
+
+  const fetchInspections = useCallback(async () => {
+    setInspLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({
+        columnName: f.columnName,
+        operator: MULTI_VALUE_COLUMNS.includes(f.columnName) ? "contains" : f.operator,
+        value: f.value,
+      }));
+      const res = await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setInspections(rows);
+      setInspCount(rows.length);
+    } catch {
+      toast.error("검사기준 조회에 실패했어요");
+    } finally {
+      setInspLoading(false);
+    }
+  }, [searchFilters]);
+
+  const fetchDefects = useCallback(async () => {
+    setDefLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DEFECT_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setDefects(rows);
+      setDefCount(rows.length);
+    } catch {
+      toast.error("불량관리 조회에 실패했어요");
+    } finally {
+      setDefLoading(false);
+    }
+  }, []);
+
+  const fetchEquipments = useCallback(async () => {
+    setEqLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/data`, {
+        page: 1,
+        size: 500,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setEquipments(rows);
+      setEqCount(rows.length);
+    } catch {
+      toast.error("검사장비 조회에 실패했어요");
+    } finally {
+      setEqLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchInspections();
+  }, [fetchInspections]);
+  useEffect(() => {
+    fetchDefects();
+    fetchEquipments();
+  }, []);
+
+  /* ───── 클라이언트 필터 ───── */
+  const filteredDefects = defKeyword.trim()
+    ? defects.filter(
+        (r) =>
+          (r.defect_name || "").toLowerCase().includes(defKeyword.toLowerCase()) ||
+          (r.defect_type || "").toLowerCase().includes(defKeyword.toLowerCase()),
+      )
+    : defects;
+
+  const filteredEquipments = eqKeyword.trim()
+    ? equipments.filter(
+        (r) =>
+          (r.equipment_name || "").toLowerCase().includes(eqKeyword.toLowerCase()) ||
+          (r.model_name || "").toLowerCase().includes(eqKeyword.toLowerCase()),
+      )
+    : equipments;
+
+  /* ═══════════════════ 검사기준 CRUD ═══════════════════ */
+  const openInspCreate = async () => {
+    setInspForm({});
+    setInspEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setInspModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${INSPECTION_TABLE}/inspection_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+  const openInspEdit = (row: any) => {
+    setInspForm({ ...row });
+    setInspEditMode(true);
+    setInspModalOpen(true);
+  };
+  const saveInspection = async () => {
+    if (!numberingRuleId && !inspForm.inspection_code) {
+      toast.error("검사코드는 필수예요");
+      return;
+    }
+    if (!inspForm.inspection_type) {
+      toast.error("유형을 1개 이상 선택해주세요");
+      return;
+    }
+    if (!inspForm.inspection_criteria) {
+      toast.error("검사기준은 필수예요");
+      return;
+    }
+    if (!inspForm.inspection_item) {
+      toast.error("검사항목은 필수예요");
+      return;
+    }
+    if (!inspForm.judgment_criteria) {
+      toast.error("판단기준은 필수예요");
+      return;
+    }
+    setInspSaving(true);
+    try {
+      let finalCode = inspForm.inspection_code || "";
+      if (!inspEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setInspSaving(false);
+          return;
+        }
+      }
+      if (inspEditMode) {
+        await apiClient.put(`/table-management/tables/${INSPECTION_TABLE}/edit`, {
+          originalData: { id: inspForm.id },
+          updatedData: inspForm,
+        });
+        toast.success("검사기준을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/add`, {
+          id: crypto.randomUUID(),
+          ...inspForm,
+          inspection_code: finalCode,
+        });
+        toast.success("검사기준을 등록했어요");
+      }
+      setInspModalOpen(false);
+      fetchInspections();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setInspSaving(false);
+    }
+  };
+  const deleteInspections = async () => {
+    if (inspChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("검사기준 삭제", {
+      description: `선택한 ${inspChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${INSPECTION_TABLE}/delete`, {
+        data: inspChecked.map((id) => ({ id })),
+      });
+      toast.success(`${inspChecked.length}건을 삭제했어요`);
+      setInspChecked([]);
+      fetchInspections();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ 불량관리 CRUD ═══════════════════ */
+  const openDefCreate = async () => {
+    setDefForm({});
+    setDefEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setDefModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DEFECT_TABLE}/defect_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      }
+    } catch { /* 채번 규칙 없으면 무시 */ }
+  };
+  const openDefEdit = (row: any) => {
+    setDefForm({ ...row });
+    setDefEditMode(true);
+    setDefModalOpen(true);
+  };
+  const saveDefect = async () => {
+    if (!numberingRuleId && !defForm.defect_code) {
+      toast.error("불량코드는 필수예요");
+      return;
+    }
+    if (!defForm.defect_type) {
+      toast.error("불량유형은 필수예요");
+      return;
+    }
+    if (!defForm.defect_name) {
+      toast.error("불량명은 필수예요");
+      return;
+    }
+    if (!defForm.severity) {
+      toast.error("심각도는 필수예요");
+      return;
+    }
+    if (!defForm.defect_content) {
+      toast.error("불량내용은 필수예요");
+      return;
+    }
+    if (!defForm.inspection_type) {
+      toast.error("검사유형을 1개 이상 선택해주세요");
+      return;
+    }
+    setDefSaving(true);
+    try {
+      let finalCode = defForm.defect_code || "";
+      if (!defEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setDefSaving(false);
+          return;
+        }
+      }
+      if (defEditMode) {
+        await apiClient.put(`/table-management/tables/${DEFECT_TABLE}/edit`, {
+          originalData: { id: defForm.id },
+          updatedData: defForm,
+        });
+        toast.success("불량유형을 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${DEFECT_TABLE}/add`, { id: crypto.randomUUID(), ...defForm, defect_code: finalCode });
+        toast.success("불량유형을 등록했어요");
+      }
+      setDefModalOpen(false);
+      fetchDefects();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setDefSaving(false);
+    }
+  };
+  const deleteDefects = async () => {
+    if (defChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("불량유형 삭제", {
+      description: `선택한 ${defChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${DEFECT_TABLE}/delete`, {
+        data: defChecked.map((id) => ({ id })),
+      });
+      toast.success(`${defChecked.length}건을 삭제했어요`);
+      setDefChecked([]);
+      fetchDefects();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ 검사장비 CRUD ═══════════════════ */
+  const openEqCreate = async () => {
+    setEqForm({
+      calibration_period: "12",
+      equipment_status: "NORMAL",
+    });
+    setEqEditMode(false);
+    setNumberingRuleId(null);
+    setPreviewCode(null);
+    setEqModalOpen(true);
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${EQUIPMENT_TABLE}/equipment_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        setNumberingRuleId(ruleId);
+        const prev = await previewNumberingCode(ruleId);
+        if (prev.success && prev.data?.generatedCode) {
+          setPreviewCode(prev.data.generatedCode);
+        }
+      } else {
+        // 채번 규칙 없으면 기존 수동 채번 fallback
+        const maxNum =
+          equipments
+            .map((e: any) => e.equipment_code || "")
+            .filter((c: string) => /^EQP-\d+$/.test(c))
+            .map((c: string) => parseInt(c.replace("EQP-", ""), 10))
+            .sort((a: number, b: number) => b - a)[0] || 0;
+        setEqForm((p) => ({ ...p, equipment_code: `EQP-${String(maxNum + 1).padStart(3, "0")}` }));
+      }
+    } catch {
+      // 채번 규칙 조회 실패 시 기존 수동 채번 fallback
+      const maxNum =
+        equipments
+          .map((e: any) => e.equipment_code || "")
+          .filter((c: string) => /^EQP-\d+$/.test(c))
+          .map((c: string) => parseInt(c.replace("EQP-", ""), 10))
+          .sort((a: number, b: number) => b - a)[0] || 0;
+      setEqForm((p) => ({ ...p, equipment_code: `EQP-${String(maxNum + 1).padStart(3, "0")}` }));
+    }
+  };
+  const openEqEdit = (row: any) => {
+    setEqForm({ ...row });
+    setEqEditMode(true);
+    setEqModalOpen(true);
+  };
+  const saveEquipment = async () => {
+    if (!numberingRuleId && !eqForm.equipment_code) {
+      toast.error("장비코드는 필수예요");
+      return;
+    }
+    if (!eqForm.equipment_name) {
+      toast.error("장비명은 필수예요");
+      return;
+    }
+    if (!eqForm.equipment_type) {
+      toast.error("장비유형은 필수예요");
+      return;
+    }
+    setEqSaving(true);
+    try {
+      let finalCode = eqForm.equipment_code || "";
+      if (!eqEditMode && numberingRuleId) {
+        const allocRes = await allocateNumberingCode(numberingRuleId);
+        if (allocRes.success && allocRes.data?.generatedCode) {
+          finalCode = allocRes.data.generatedCode;
+        } else {
+          toast.error("채번 코드 할당에 실패했습니다.");
+          setEqSaving(false);
+          return;
+        }
+      }
+      if (eqEditMode) {
+        await apiClient.put(`/table-management/tables/${EQUIPMENT_TABLE}/edit`, {
+          originalData: { id: eqForm.id },
+          updatedData: eqForm,
+        });
+        toast.success("검사장비를 수정했어요");
+      } else {
+        await apiClient.post(`/table-management/tables/${EQUIPMENT_TABLE}/add`, { id: crypto.randomUUID(), ...eqForm, equipment_code: finalCode });
+        toast.success("검사장비를 등록했어요");
+      }
+      setEqModalOpen(false);
+      fetchEquipments();
+    } catch {
+      toast.error("저장에 실패했어요");
+    } finally {
+      setEqSaving(false);
+    }
+  };
+  const deleteEquipments = async () => {
+    if (eqChecked.length === 0) {
+      toast.error("삭제할 항목을 선택해주세요");
+      return;
+    }
+    const ok = await confirm("검사장비 삭제", {
+      description: `선택한 ${eqChecked.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${EQUIPMENT_TABLE}/delete`, {
+        data: eqChecked.map((id) => ({ id })),
+      });
+      toast.success(`${eqChecked.length}건을 삭제했어요`);
+      setEqChecked([]);
+      fetchEquipments();
+    } catch {
+      toast.error("삭제에 실패했어요");
+    }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="bg-card rounded-lg border">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <div className="border-b px-3">
+            <TabsList className="h-auto gap-0 bg-transparent p-0">
+              <TabsTrigger
+                value="inspection"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <ClipboardCheck className="mr-2 h-4 w-4" />
+                검사기준
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {inspCount}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="defect"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <AlertTriangle className="mr-2 h-4 w-4" />
+                불량관리
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {defCount}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="equipment"
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent px-4 py-3 text-sm font-medium data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <Wrench className="mr-2 h-4 w-4" />
+                검사장비
+                <Badge variant="secondary" className="bg-primary/10 text-primary ml-2 text-xs">
+                  {eqCount}
+                </Badge>
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* ──── 검사기준 탭 ──── */}
+          <TabsContent value="inspection" className="mt-0 p-3">
+            <div className="mb-3">
+              <DynamicSearchFilter
+                tableName={INSPECTION_TABLE}
+                filterId="c16-inspection"
+                onFilterChange={setSearchFilters}
+                externalFilterConfig={ts.filterConfig}
+                dataCount={inspCount}
+                extraActions={
+                  <div className="flex items-center gap-2">
+                    <Button size="sm" onClick={openInspCreate}>
+                      <Plus className="mr-1 h-4 w-4" />
+                      등록
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        const sel = inspections.find((r) => inspChecked.includes(r.id));
+                        if (sel) openInspEdit(sel);
+                        else toast.error("수정할 항목을 선택해주세요");
+                      }}
+                    >
+                      <Pencil className="mr-1 h-4 w-4" />
+                      수정
+                    </Button>
+                    <Button size="sm" variant="destructive" onClick={deleteInspections}>
+                      <Trash2 className="mr-1 h-4 w-4" />
+                      삭제
+                    </Button>
+                    <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                      <Settings2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                }
+              />
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <EDataTable
+                columns={inspTableColumns}
+                data={ts.groupData(inspections)}
+                loading={inspLoading}
+                emptyMessage="등록된 검사기준이 없어요"
+                showCheckbox={true}
+                checkedIds={inspChecked}
+                onCheckedChange={setInspChecked}
+                onRowDoubleClick={(row) => openInspEdit(row)}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-inspection-main"
+              />
+            </div>
+          </TabsContent>
+
+          {/* ──── 불량관리 탭 ──── */}
+          <TabsContent value="defect" className="mt-0 p-3">
+            <div className="mb-3 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="text-muted-foreground absolute top-2 left-2.5 h-3.5 w-3.5" />
+                  <Input
+                    className="h-8 w-56 pl-8 text-sm"
+                    placeholder="불량명 검색..."
+                    value={defKeyword}
+                    onChange={(e) => setDefKeyword(e.target.value)}
+                  />
+                </div>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">
+                  {filteredDefects.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openDefCreate}>
+                  <Plus className="mr-1 h-4 w-4" />
+                  등록
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const sel = defects.find((r) => defChecked.includes(r.id));
+                    if (sel) openDefEdit(sel);
+                    else toast.error("수정할 항목을 선택해주세요");
+                  }}
+                >
+                  <Pencil className="mr-1 h-4 w-4" />
+                  수정
+                </Button>
+                <Button size="sm" variant="destructive" onClick={deleteDefects}>
+                  <Trash2 className="mr-1 h-4 w-4" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={filteredDefects.length > 0 && defChecked.length === filteredDefects.length}
+                        onCheckedChange={(v) => setDefChecked(v ? filteredDefects.map((r) => r.id) : [])}
+                      />
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량코드
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      불량내용
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      심각도
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      검사유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      적용대상
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      사용여부
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      등록일
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      관리자
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      비고
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {defLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={12} className="py-8 text-center">
+                        <Loader2 className="text-muted-foreground mx-auto h-5 w-5 animate-spin" />
+                      </TableCell>
+                    </TableRow>
+                  ) : filteredDefects.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={12} className="text-muted-foreground py-10 text-center">
+                        <Inbox className="mx-auto mb-2 h-8 w-8 opacity-40" />
+                        <p className="text-sm">등록된 불량유형이 없어요</p>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredDefects.map((row) => {
+                      const severityLabel = getCatLabel(DEFECT_TABLE, "severity", row.severity);
+                      const severityColor =
+                        severityLabel === "치명적"
+                          ? "destructive"
+                          : severityLabel === "심각"
+                            ? "destructive"
+                            : severityLabel === "보통"
+                              ? "secondary"
+                              : "outline";
+                      return (
+                        <TableRow
+                          key={row.id}
+                          className={cn("cursor-pointer", defChecked.includes(row.id) && "bg-primary/5")}
+                          onClick={() =>
+                            setDefChecked((prev) =>
+                              prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id],
+                            )
+                          }
+                          onDoubleClick={() => openDefEdit(row)}
+                        >
+                          <TableCell onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                              checked={defChecked.includes(row.id)}
+                              onCheckedChange={(v) =>
+                                setDefChecked((prev) => (v ? [...prev, row.id] : prev.filter((id) => id !== row.id)))
+                              }
+                            />
+                          </TableCell>
+                          <TableCell className="font-semibold">{row.defect_code || "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant="secondary" className="text-[10px]">
+                              {getCatLabel(DEFECT_TABLE, "defect_type", row.defect_type)}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>{row.defect_name || "-"}</TableCell>
+                          <TableCell className="text-muted-foreground max-w-[200px] truncate">
+                            {row.defect_content || "-"}
+                          </TableCell>
+                          <TableCell>
+                            <Badge variant={severityColor as any} className="text-[10px]">
+                              {severityLabel || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-wrap gap-1">
+                              {row.inspection_type
+                                ? row.inspection_type
+                                    .split(",")
+                                    .filter(Boolean)
+                                    .map((c: string) => (
+                                      <Badge key={c} variant="outline" className="text-[10px]">
+                                        {getCatLabel(DEFECT_TABLE, "inspection_type", c)}
+                                      </Badge>
+                                    ))
+                                : "-"}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-wrap gap-1">
+                              {row.apply_target
+                                ? row.apply_target
+                                    .split(",")
+                                    .filter(Boolean)
+                                    .map((t: string) => (
+                                      <Badge key={t} variant="outline" className="text-[10px]">
+                                        {t}
+                                      </Badge>
+                                    ))
+                                : "-"}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <Badge
+                              variant={
+                                getCatLabel(DEFECT_TABLE, "is_active", row.is_active) === "사용"
+                                  ? "default"
+                                  : "secondary"
+                              }
+                              className="text-[10px]"
+                            >
+                              {getCatLabel(DEFECT_TABLE, "is_active", row.is_active) || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-muted-foreground">
+                            {row.reg_date || (row.created_date ? row.created_date.slice(0, 10) : "-")}
+                          </TableCell>
+                          <TableCell>{row.manager_id || "-"}</TableCell>
+                          <TableCell className="text-muted-foreground">{row.remarks || "-"}</TableCell>
+                        </TableRow>
+                      );
+                    })
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+
+          {/* ──── 검사장비 탭 ──── */}
+          <TabsContent value="equipment" className="mt-0 p-3">
+            <div className="mb-3 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="text-muted-foreground absolute top-2 left-2.5 h-3.5 w-3.5" />
+                  <Input
+                    className="h-8 w-56 pl-8 text-sm"
+                    placeholder="장비명 검색..."
+                    value={eqKeyword}
+                    onChange={(e) => setEqKeyword(e.target.value)}
+                  />
+                </div>
+                <Badge variant="secondary" className="bg-primary/10 text-primary">
+                  {filteredEquipments.length}건
+                </Badge>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openEqCreate}>
+                  <Plus className="mr-1 h-4 w-4" />
+                  등록
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const sel = equipments.find((r) => eqChecked.includes(r.id));
+                    if (sel) openEqEdit(sel);
+                    else toast.error("수정할 항목을 선택해주세요");
+                  }}
+                >
+                  <Pencil className="mr-1 h-4 w-4" />
+                  수정
+                </Button>
+                <Button size="sm" variant="destructive" onClick={deleteEquipments}>
+                  <Trash2 className="mr-1 h-4 w-4" />
+                  삭제
+                </Button>
+              </div>
+            </div>
+            <div className="overflow-hidden rounded-lg border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={filteredEquipments.length > 0 && eqChecked.length === filteredEquipments.length}
+                        onCheckedChange={(v) => setEqChecked(v ? filteredEquipments.map((r) => r.id) : [])}
+                      />
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비코드
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비유형
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      모델명
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      제조사
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      설치장소
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      최근교정일
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      교정주기(개월)
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      장비상태
+                    </TableHead>
+                    <TableHead className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase">
+                      담당자
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {eqLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={11} className="py-8 text-center">
+                        <Loader2 className="text-muted-foreground mx-auto h-5 w-5 animate-spin" />
+                      </TableCell>
+                    </TableRow>
+                  ) : filteredEquipments.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={11} className="text-muted-foreground py-10 text-center">
+                        <Inbox className="mx-auto mb-2 h-8 w-8 opacity-40" />
+                        <p className="text-sm">등록된 검사장비가 없어요</p>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredEquipments.map((row) => {
+                      const statusLabel = getCatLabel(EQUIPMENT_TABLE, "equipment_status", row.equipment_status);
+                      const statusColor =
+                        statusLabel === "정상" ? "default" : statusLabel === "폐기" ? "destructive" : "secondary";
+                      return (
+                        <TableRow
+                          key={row.id}
+                          className={cn("cursor-pointer", eqChecked.includes(row.id) && "bg-primary/5")}
+                          onClick={() =>
+                            setEqChecked((prev) =>
+                              prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id],
+                            )
+                          }
+                          onDoubleClick={() => openEqEdit(row)}
+                        >
+                          <TableCell onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                              checked={eqChecked.includes(row.id)}
+                              onCheckedChange={(v) =>
+                                setEqChecked((prev) => (v ? [...prev, row.id] : prev.filter((id) => id !== row.id)))
+                              }
+                            />
+                          </TableCell>
+                          <TableCell className="text-primary font-semibold">{row.equipment_code || "-"}</TableCell>
+                          <TableCell>{row.equipment_name || "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant="secondary" className="text-[10px]">
+                              {getCatLabel(EQUIPMENT_TABLE, "equipment_type", row.equipment_type) || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>{row.model_name || "-"}</TableCell>
+                          <TableCell>{row.manufacturer || "-"}</TableCell>
+                          <TableCell>{row.installation_location || "-"}</TableCell>
+                          <TableCell>{row.last_calibration_date || "-"}</TableCell>
+                          <TableCell>{row.calibration_period ? `${row.calibration_period}개월` : "-"}</TableCell>
+                          <TableCell>
+                            <Badge variant={statusColor as any} className="text-[10px]">
+                              {statusLabel || "-"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell>
+                            {userOptions.find((u) => u.code === row.manager_id)?.label || row.manager_id || "-"}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* ═══════════════════ 검사기준 모달 ═══════════════════ */}
+      <Dialog open={inspModalOpen} onOpenChange={setInspModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[640px]">
+          <DialogHeader>
+            <DialogTitle>{inspEditMode ? "검사기준 수정" : "검사기준 등록"}</DialogTitle>
+            <DialogDescription>검사기준 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            {/* 검사코드 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사코드 <span className="text-destructive">*</span>
+              </Label>
+              {!inspEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : inspEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={inspForm.inspection_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={inspForm.inspection_code || ""}
+                  onChange={(e) => setInspForm((p) => ({ ...p, inspection_code: e.target.value }))}
+                  placeholder="검사코드 입력"
+                />
+              )}
+            </div>
+            {/* 유형 (다중선택) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                유형 <span className="text-destructive">*</span> (다중선택)
+              </Label>
+              <div className="flex flex-wrap gap-3 pt-1">
+                {(catOptions[`${INSPECTION_TABLE}.inspection_type`] || []).map((o) => {
+                  const types: string[] = inspForm.inspection_type
+                    ? inspForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  const checked = types.includes(o.code);
+                  return (
+                    <div key={o.code} className="flex items-center gap-1.5">
+                      <Checkbox
+                        checked={checked}
+                        onCheckedChange={(v) => {
+                          const next = v ? [...types, o.code] : types.filter((t) => t !== o.code);
+                          setInspForm((p) => ({ ...p, inspection_type: next.join(",") }));
+                        }}
+                      />
+                      <Label className="cursor-pointer text-sm">{o.label}</Label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            {/* 검사기준 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사기준 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={inspForm.inspection_criteria || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, inspection_criteria: e.target.value }))}
+                placeholder="검사기준 입력"
+              />
+            </div>
+            {/* 기준상세 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">기준상세</Label>
+              <Input
+                className="h-9"
+                value={inspForm.criteria_detail || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, criteria_detail: e.target.value }))}
+                placeholder="기준상세 입력"
+              />
+            </div>
+            {/* 검사항목 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사항목 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={inspForm.inspection_item || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, inspection_item: e.target.value }))}
+                placeholder="검사항목 입력"
+              />
+            </div>
+            {/* 검사방법 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">검사방법</Label>
+              <Select
+                value={inspForm.inspection_method || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, inspection_method: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.inspection_method`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 판단기준 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                판단기준 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={inspForm.judgment_criteria || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, judgment_criteria: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.judgment_criteria`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 단위 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">단위</Label>
+              <Select
+                value={inspForm.unit || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, unit: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.unit`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 적용구분 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">적용구분</Label>
+              <Select
+                value={inspForm.apply_type || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, apply_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${INSPECTION_TABLE}.apply_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">관리자</Label>
+              <Select
+                value={inspForm.manager || "__none__"}
+                onValueChange={(v) => setInspForm((p) => ({ ...p, manager: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 비고 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                value={inspForm.remark || ""}
+                onChange={(e) => setInspForm((p) => ({ ...p, remark: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setInspModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveInspection} disabled={inspSaving}>
+              {inspSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 불량관리 모달 ═══════════════════ */}
+      <Dialog open={defModalOpen} onOpenChange={setDefModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[640px]">
+          <DialogHeader>
+            <DialogTitle>{defEditMode ? "불량유형 수정" : "불량유형 등록"}</DialogTitle>
+            <DialogDescription>불량유형 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            {/* 불량코드 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량코드 <span className="text-destructive">*</span>
+              </Label>
+              {!defEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : defEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={defForm.defect_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={defForm.defect_code || ""}
+                  onChange={(e) => setDefForm((p) => ({ ...p, defect_code: e.target.value }))}
+                  placeholder="불량코드 입력"
+                />
+              )}
+            </div>
+            {/* 불량유형 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={defForm.defect_type || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, defect_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.defect_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 불량명 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={defForm.defect_name || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, defect_name: e.target.value }))}
+                placeholder="불량명 입력"
+              />
+            </div>
+            {/* 심각도 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                심각도 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={defForm.severity || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, severity: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.severity`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 불량내용 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">
+                불량내용 <span className="text-destructive">*</span>
+              </Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={defForm.defect_content || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, defect_content: e.target.value }))}
+                placeholder="불량 상세 내용 및 정의를 입력하세요"
+                rows={3}
+              />
+            </div>
+            {/* 검사유형 (다중선택) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                검사유형 <span className="text-destructive">*</span> (다중선택)
+              </Label>
+              <div className="flex flex-wrap gap-3 rounded-md border p-3">
+                {(catOptions[`${DEFECT_TABLE}.inspection_type`] || []).map((o) => {
+                  const types: string[] = defForm.inspection_type
+                    ? defForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  const checked = types.includes(o.code);
+                  return (
+                    <div key={o.code} className="flex items-center gap-1.5">
+                      <Checkbox
+                        checked={checked}
+                        onCheckedChange={(v) => {
+                          const next = v ? [...types, o.code] : types.filter((t) => t !== o.code);
+                          setDefForm((p) => ({ ...p, inspection_type: next.join(","), apply_target: "" }));
+                        }}
+                      />
+                      <Label className="cursor-pointer text-sm">{o.label}</Label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            {/* 적용대상 (다중선택, 검사유형별 동적) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">적용대상 (다중선택)</Label>
+              <div className="min-h-[60px] rounded-md border p-3">
+                {(() => {
+                  const selectedTypes = defForm.inspection_type
+                    ? defForm.inspection_type.split(",").filter(Boolean)
+                    : [];
+                  if (selectedTypes.length === 0)
+                    return <p className="text-muted-foreground text-xs">검사유형을 먼저 선택하세요</p>;
+                  const typeTargetMap: Record<string, string[]> = {};
+                  const defInspOpts = catOptions[`${DEFECT_TABLE}.inspection_type`] || [];
+                  for (const code of selectedTypes) {
+                    const label = defInspOpts.find((o) => o.code === code)?.label || "";
+                    if (label.includes("수입"))
+                      typeTargetMap[label] = ["구매입고", "외주입고", "반품입고", "무상입고", "기타입고"];
+                    else if (label.includes("공정"))
+                      typeTargetMap[label] = ["가공", "조립", "도장", "열처리", "표면처리", "용접"];
+                    else if (label.includes("출하"))
+                      typeTargetMap[label] = ["국내출하", "수출출하", "반품출하", "샘플출하"];
+                    else if (label.includes("최종")) typeTargetMap[label] = ["완제품", "반제품", "부품"];
+                  }
+                  const targets: string[] = defForm.apply_target ? defForm.apply_target.split(",").filter(Boolean) : [];
+                  return Object.entries(typeTargetMap).map(([typeName, opts]) => (
+                    <div key={typeName} className="mb-2 last:mb-0">
+                      <p className="mb-2 border-b pb-1 text-xs font-semibold">{typeName}</p>
+                      <div className="flex flex-wrap gap-3">
+                        {opts.map((t) => (
+                          <div key={t} className="flex items-center gap-1.5">
+                            <Checkbox
+                              checked={targets.includes(t)}
+                              onCheckedChange={(v) => {
+                                const next = v ? [...targets, t] : targets.filter((x) => x !== t);
+                                setDefForm((p) => ({ ...p, apply_target: next.join(",") }));
+                              }}
+                            />
+                            <Label className="cursor-pointer text-sm">{t}</Label>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ));
+                })()}
+              </div>
+            </div>
+            {/* 사용여부 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">사용여부</Label>
+              <Select
+                value={defForm.is_active || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {(catOptions[`${DEFECT_TABLE}.is_active`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 관리자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">관리자</Label>
+              <Select
+                value={defForm.manager_id || "__none__"}
+                onValueChange={(v) => setDefForm((p) => ({ ...p, manager_id: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* 비고 */}
+            <div className="col-span-2 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={defForm.remarks || ""}
+                onChange={(e) => setDefForm((p) => ({ ...p, remarks: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDefModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveDefect} disabled={defSaving}>
+              {defSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══════════════════ 검사장비 모달 ═══════════════════ */}
+      <Dialog open={eqModalOpen} onOpenChange={setEqModalOpen}>
+        <DialogContent className="max-h-[85vh] max-w-[95vw] overflow-y-auto sm:max-w-[720px]">
+          <DialogHeader>
+            <DialogTitle>{eqEditMode ? "장비 수정" : "장비 등록"}</DialogTitle>
+            <DialogDescription>검사장비 정보를 입력해주세요</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-3 gap-4">
+            {/* Row 1: 장비코드, 장비명, 장비유형 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비코드 <span className="text-destructive">*</span>
+              </Label>
+              {!eqEditMode && numberingRuleId ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={previewCode || ""}
+                  readOnly
+                  placeholder="채번 조회 중..."
+                />
+              ) : eqEditMode ? (
+                <Input
+                  className="h-9 bg-muted"
+                  value={eqForm.equipment_code || ""}
+                  disabled
+                />
+              ) : (
+                <Input
+                  className="h-9"
+                  value={eqForm.equipment_code || ""}
+                  onChange={(e) => setEqForm((p) => ({ ...p, equipment_code: e.target.value }))}
+                  placeholder="장비코드"
+                />
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                className="h-9"
+                value={eqForm.equipment_name || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, equipment_name: e.target.value }))}
+                placeholder="장비명 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">
+                장비유형 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={eqForm.equipment_type || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, equipment_type: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="장비유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">장비유형 선택</SelectItem>
+                  {(catOptions[`${EQUIPMENT_TABLE}.equipment_type`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {/* Row 2: 모델명, 제조사, 시리얼번호 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">모델명</Label>
+              <Input
+                className="h-9"
+                value={eqForm.model_name || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, model_name: e.target.value }))}
+                placeholder="모델명 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">제조사</Label>
+              <Input
+                className="h-9"
+                value={eqForm.manufacturer || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, manufacturer: e.target.value }))}
+                placeholder="제조사 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">시리얼번호</Label>
+              <Input
+                className="h-9"
+                value={eqForm.serial_number || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, serial_number: e.target.value }))}
+                placeholder="시리얼번호 입력"
+              />
+            </div>
+            {/* Row 3: 설치장소, 최근교정일, 교정주기 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">설치장소</Label>
+              <Input
+                className="h-9"
+                value={eqForm.installation_location || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, installation_location: e.target.value }))}
+                placeholder="설치장소 입력"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">최근교정일</Label>
+              <Input
+                type="date"
+                className="h-9"
+                value={eqForm.last_calibration_date || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, last_calibration_date: e.target.value }))}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">교정주기 (개월)</Label>
+              <Input
+                type="number"
+                className="h-9"
+                value={eqForm.calibration_period || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, calibration_period: e.target.value }))}
+                placeholder="12"
+              />
+            </div>
+            {/* Row 4: 장비상태, 담당자 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">장비상태</Label>
+              <Select
+                value={eqForm.equipment_status || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, equipment_status: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="장비상태 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">장비상태 선택</SelectItem>
+                  {(catOptions[`${EQUIPMENT_TABLE}.equipment_status`] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">담당자</Label>
+              <Select
+                value={eqForm.manager_id || "__none__"}
+                onValueChange={(v) => setEqForm((p) => ({ ...p, manager_id: v === "__none__" ? "" : v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="담당자 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">담당자 선택</SelectItem>
+                  {userOptions.map((u) => (
+                    <SelectItem key={u.code} value={u.code}>
+                      {u.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div />
+            {/* Row 5: 비고 (full width) */}
+            <div className="col-span-3 space-y-1.5">
+              <Label className="text-xs font-semibold">비고</Label>
+              <textarea
+                className="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[80px] w-full resize-y rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-[3px] focus-visible:outline-none"
+                value={eqForm.remarks || ""}
+                onChange={(e) => setEqForm((p) => ({ ...p, remarks: e.target.value }))}
+                placeholder="비고 입력"
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEqModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={saveEquipment} disabled={eqSaving}>
+              {eqSaving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/quality/item-inspection/page.tsx b/frontend/app/(main)/COMPANY_9/quality/item-inspection/page.tsx
new file mode 100644
index 00000000..2c0e1338
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/quality/item-inspection/page.tsx
@@ -0,0 +1,733 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, Pencil, Inbox, Settings2, Search, ChevronDown,
+} from "lucide-react";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const TABLE_NAME = "item_inspection_info";
+
+const GRID_COLUMNS = [
+  { key: "item_code", label: "품목코드" },
+  { key: "item_name", label: "품목명" },
+  { key: "inspection_type", label: "검사유형" },
+  { key: "item_count", label: "항목수" },
+  { key: "is_active", label: "사용여부" },
+];
+const ITEM_TABLE = "item_info";
+const INSPECTION_TABLE = "inspection_standard";
+
+const INSPECTION_TYPES = [
+  { key: "incoming_inspection", label: "수입검사", matchLabels: ["수입검사", "입고검사", "수입", "입고"] },
+  { key: "outgoing_inspection", label: "출하검사", matchLabels: ["출하검사", "출고검사", "출하", "출고"] },
+  { key: "process_inspection", label: "공정검사", matchLabels: ["공정검사", "공정"] },
+  { key: "final_inspection", label: "최종검사", matchLabels: ["최종검사", "최종", "완제품검사"] },
+] as const;
+
+type InspectionRow = {
+  id: string;
+  inspection_standard_id: string;
+  inspection_detail: string;
+  inspection_method: string;
+  apply_process: string;
+  acceptance_criteria: string;
+  is_required: boolean;
+};
+
+export default function ItemInspectionInfoPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-item-inspection", TABLE_NAME, GRID_COLUMNS);
+
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [form, setForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  /* FK 옵션 */
+  const [itemOptions, setItemOptions] = useState<{ code: string; name: string; item_type: string; unit: string }[]>([]);
+  const [inspOptions, setInspOptions] = useState<{ code: string; label: string; detail: string; method: string; types: string[] }[]>([]);
+  const [inspTypeCatOptions, setInspTypeCatOptions] = useState<{ code: string; label: string }[]>([]);
+  const [userOptions, setUserOptions] = useState<{ code: string; label: string }[]>([]);
+
+  /* 검사유형별 검사항목 rows */
+  const [inspectionRows, setInspectionRows] = useState<Record<string, InspectionRow[]>>({});
+  const [collapsedTypes, setCollapsedTypes] = useState<Record<string, boolean>>({});
+
+  /* 품목 선택 모달 */
+  const [itemModalOpen, setItemModalOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [filteredItems, setFilteredItems] = useState<typeof itemOptions>([]);
+
+  /* ═══════════════════ FK 옵션 로드 ═══════════════════ */
+  useEffect(() => {
+    const loadOptions = async () => {
+      try {
+        const [itemRes, inspRes, userRes] = await Promise.all([
+          apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, { page: 1, size: 500, autoFilter: true }),
+          apiClient.post(`/table-management/tables/${INSPECTION_TABLE}/data`, { page: 1, size: 500, autoFilter: true }),
+          apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true }),
+        ]);
+        const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
+        setItemOptions(items.map((r: any) => ({
+          code: r.item_number || r.item_code || "",
+          name: r.item_name || "",
+          item_type: r.type || r.item_type || "",
+          unit: r.unit || "",
+        })));
+
+        const insps = inspRes.data?.data?.data || inspRes.data?.data?.rows || [];
+        setInspOptions(insps.map((r: any) => ({
+          code: r.id,
+          label: r.inspection_criteria || r.inspection_standard || r.id,
+          detail: r.inspection_item || r.inspection_criteria || "",
+          method: r.inspection_method || "",
+          types: r.inspection_type ? r.inspection_type.split(",").filter(Boolean) : [],
+        })));
+
+        // 검사유형 카테고리 값 로드 (코드→라벨 매핑용)
+        try {
+          const catRes = await apiClient.get(`/table-categories/${INSPECTION_TABLE}/inspection_type/values`);
+          const flatCats: { code: string; label: string }[] = [];
+          const flatten = (arr: any[]) => { for (const v of arr) { flatCats.push({ code: v.valueCode, label: v.valueLabel }); if (v.children?.length) flatten(v.children); } };
+          if (catRes.data?.data?.length) flatten(catRes.data.data);
+          setInspTypeCatOptions(flatCats);
+        } catch { /* skip */ }
+
+        const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
+        setUserOptions(users.map((u: any) => ({
+          code: u.user_id || u.id,
+          label: `${u.user_name || u.name || u.user_id}${u.dept_name ? ` (${u.dept_name})` : ""}`,
+        })));
+      } catch { /* skip */ }
+    };
+    loadOptions();
+  }, []);
+
+  /* ═══════════════════ 품목 선택 모달 ═══════════════════ */
+  const openItemModal = () => {
+    setItemSearchKeyword("");
+    setFilteredItems(itemOptions);
+    setItemModalOpen(true);
+  };
+
+  const handleItemSearch = () => {
+    const kw = itemSearchKeyword.trim().toLowerCase();
+    if (!kw) { setFilteredItems(itemOptions); return; }
+    setFilteredItems(itemOptions.filter(o =>
+      o.code.toLowerCase().includes(kw) || o.name.toLowerCase().includes(kw)
+    ));
+  };
+
+  const selectItem = (item: typeof itemOptions[0]) => {
+    setForm(p => ({ ...p, item_code: item.code, item_name: item.name }));
+    setItemModalOpen(false);
+  };
+
+  /* ═══════════════════ 데이터 조회 ═══════════════════ */
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows || [];
+      setData(rows);
+      setTotalCount(rows.length);
+    } catch {
+      toast.error("품목검사정보 조회에 실패했어요");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => { fetchData(); }, [fetchData]);
+
+  // item_code별 그룹핑
+  const groupedData = useMemo(() => {
+    const map: Record<string, { item_code: string; item_name: string; is_active: string; types: string[]; rows: any[] }> = {};
+    for (const row of data) {
+      const key = row.item_code || row.id;
+      if (!map[key]) {
+        map[key] = { item_code: row.item_code, item_name: row.item_name, is_active: row.is_active || "", types: [], rows: [] };
+      }
+      map[key].rows.push(row);
+      if (row.inspection_type && !map[key].types.includes(row.inspection_type)) {
+        map[key].types.push(row.inspection_type);
+      }
+    }
+    return Object.values(map);
+  }, [data]);
+
+  // 검사기준 ID → 라벨 resolve
+  const resolveInspLabel = useCallback((id: string) => {
+    const opt = inspOptions.find(o => o.code === id);
+    return opt?.label || id || "-";
+  }, [inspOptions]);
+
+  /* ═══════════════════ CRUD ═══════════════════ */
+  const openCreate = () => { setForm({}); setEditMode(false); setInspectionRows({}); setCollapsedTypes({}); setModalOpen(true); };
+  const openEdit = async (row: any) => {
+    setForm({ ...row });
+    setEditMode(true);
+    setCollapsedTypes({});
+
+    // 같은 item_code의 모든 검사항목 행을 조회하여 유형별로 분류
+    try {
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_code", operator: "equals", value: row.item_code }] },
+        autoFilter: true,
+      });
+      const allRows = res.data?.data?.data || res.data?.data?.rows || [];
+      const rowMap: Record<string, InspectionRow[]> = {};
+      const typeFlags: Record<string, boolean> = {};
+
+      for (const r of allRows) {
+        const inspType = r.inspection_type || "";
+        // 카테고리 코드/라벨로 INSPECTION_TYPES 키 매칭
+        const matched = INSPECTION_TYPES.find(t =>
+          t.matchLabels.some(ml => inspType.includes(ml)) ||
+          inspTypeCatOptions.some(cat => inspType.includes(cat.code) && t.matchLabels.some(ml => cat.label.includes(ml)))
+        );
+        const typeKey = matched?.key || "";
+        if (!typeKey) continue;
+        typeFlags[typeKey] = true;
+        if (!rowMap[typeKey]) rowMap[typeKey] = [];
+        rowMap[typeKey].push({
+          id: r.id,
+          inspection_standard_id: r.inspection_standard_id || "",
+          inspection_detail: r.inspection_item_name || r.inspection_standard || "",
+          inspection_method: r.inspection_method || "",
+          apply_process: "",
+          acceptance_criteria: r.pass_criteria || "",
+          is_required: r.is_required === "true" || r.is_required === true,
+        });
+      }
+
+      setInspectionRows(rowMap);
+      setForm(p => ({ ...p, ...typeFlags }));
+    } catch {
+      setInspectionRows({});
+    }
+    setModalOpen(true);
+  };
+
+  /* ═══════════════════ 검사항목 행 관리 ═══════════════════ */
+  const addInspRow = (typeKey: string) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: [...(prev[typeKey] || []), {
+        id: crypto.randomUUID(),
+        inspection_standard_id: "",
+        inspection_detail: "",
+        inspection_method: "",
+        apply_process: "",
+        acceptance_criteria: "",
+        is_required: false,
+      }],
+    }));
+  };
+
+  const removeInspRow = (typeKey: string, rowId: string) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: (prev[typeKey] || []).filter(r => r.id !== rowId),
+    }));
+  };
+
+  const updateInspRow = (typeKey: string, rowId: string, field: string, value: any) => {
+    setInspectionRows(prev => ({
+      ...prev,
+      [typeKey]: (prev[typeKey] || []).map(r => {
+        if (r.id !== rowId) return r;
+        if (field === "inspection_standard_id") {
+          const opt = inspOptions.find(o => o.code === value);
+          return { ...r, inspection_standard_id: value, inspection_detail: opt?.detail || "", inspection_method: opt?.method || "" };
+        }
+        return { ...r, [field]: value };
+      }),
+    }));
+  };
+
+  /** 검사유형 키에 매칭되는 검사기준만 필터링 */
+  const getFilteredInspOptions = (typeKey: string) => {
+    const typeDef = INSPECTION_TYPES.find(t => t.key === typeKey);
+    if (!typeDef) return inspOptions;
+    // matchLabels와 카테고리 라벨을 비교하여 해당 카테고리 코드를 찾음
+    const matchCodes = inspTypeCatOptions
+      .filter(cat => typeDef.matchLabels.some(ml => cat.label.includes(ml)))
+      .map(cat => cat.code);
+    if (matchCodes.length === 0) return inspOptions;
+    return inspOptions.filter(opt => opt.types.some(t => matchCodes.includes(t)));
+  };
+
+  const toggleCollapse = (typeKey: string) => {
+    setCollapsedTypes(prev => ({ ...prev, [typeKey]: !prev[typeKey] }));
+  };
+
+  const handleSave = async () => {
+    if (!form.item_code) { toast.error("품목코드는 필수 입력이에요"); return; }
+    setSaving(true);
+    try {
+      // 기존 행 삭제 (수정 모드)
+      if (editMode) {
+        const existRes = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_code", operator: "equals", value: form.item_code }] },
+          autoFilter: true,
+        });
+        const existing = existRes.data?.data?.data || existRes.data?.data?.rows || [];
+        if (existing.length > 0) {
+          await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+            data: existing.map((r: any) => ({ id: r.id })),
+          });
+        }
+      }
+
+      // 검사유형별 항목을 개별 행으로 INSERT
+      const enabledTypes = INSPECTION_TYPES.filter(t => !!form[t.key]);
+      const rows: any[] = [];
+      for (const t of enabledTypes) {
+        const typeLabel = t.label;
+        const typeRows = inspectionRows[t.key] || [];
+        if (typeRows.length === 0) {
+          // 유형만 체크하고 항목 없는 경우에도 1행 생성
+          rows.push({
+            id: crypto.randomUUID(),
+            item_code: form.item_code,
+            item_name: form.item_name,
+            inspection_type: typeLabel,
+            is_active: form.is_active || "사용",
+            manager_id: form.manager_id || "",
+            memo: form.remarks || "",
+          });
+        } else {
+          for (const r of typeRows) {
+            rows.push({
+              id: crypto.randomUUID(),
+              item_code: form.item_code,
+              item_name: form.item_name,
+              inspection_type: typeLabel,
+              inspection_standard_id: r.inspection_standard_id || "",
+              inspection_item_name: r.inspection_detail || "",
+              inspection_method: r.inspection_method || "",
+              pass_criteria: r.acceptance_criteria || "",
+              is_required: r.is_required ? "true" : "false",
+              is_active: form.is_active || "사용",
+              manager_id: form.manager_id || "",
+              memo: form.remarks || "",
+            });
+          }
+        }
+      }
+
+      for (const row of rows) {
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, row);
+      }
+
+      toast.success(editMode ? "품목검사정보를 수정했어요" : "품목검사정보를 등록했어요");
+      setModalOpen(false);
+      fetchData();
+    } catch { toast.error("저장에 실패했어요"); }
+    finally { setSaving(false); }
+  };
+
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.error("삭제할 항목을 선택해주세요"); return; }
+    const ok = await confirm("품목검사정보 삭제", {
+      description: `선택한 ${checkedIds.length}건을 삭제할까요? 이 작업은 되돌릴 수 없어요.`,
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+        data: checkedIds.map(id => ({ id })),
+      });
+      toast.success(`${checkedIds.length}건을 삭제했어요`);
+      setCheckedIds([]);
+      fetchData();
+    } catch { toast.error("삭제에 실패했어요"); }
+  };
+
+  /* ═══════════════════ JSX ═══════════════════ */
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {ConfirmDialogComponent}
+
+      <div className="rounded-lg border bg-card">
+        <div className="px-3 py-2.5 border-b bg-muted/50">
+          <DynamicSearchFilter
+            tableName={TABLE_NAME}
+            filterId="c16-item-inspection"
+            onFilterChange={setSearchFilters}
+            externalFilterConfig={ts.filterConfig}
+            dataCount={totalCount}
+            extraActions={
+              <div className="flex items-center gap-2">
+                <Button size="sm" onClick={openCreate}><Plus className="w-4 h-4 mr-1" />등록</Button>
+                <Button size="sm" variant="outline" onClick={() => {
+                  const sel = data.find(r => checkedIds.includes(r.id));
+                  if (sel) {
+                    const group = groupedData.find(g => g.item_code === sel.item_code);
+                    openEdit(group?.rows[0] || sel);
+                  } else toast.error("수정할 항목을 선택해주세요");
+                }}><Pencil className="w-4 h-4 mr-1" />수정</Button>
+                <Button size="sm" variant="destructive" onClick={handleDelete}><Trash2 className="w-4 h-4 mr-1" />삭제</Button>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+            }
+          />
+        </div>
+        <div className="p-3 overflow-auto">
+          {loading ? (
+            <div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
+          ) : groupedData.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+              <Inbox className="h-10 w-10 mb-2 opacity-30" />
+              <p className="text-sm">등록된 품목검사정보가 없어요</p>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted">
+                  <TableHead className="w-10" />
+                  <TableHead className="w-10"><Checkbox checked={groupedData.length > 0 && checkedIds.length === data.length} onCheckedChange={(v) => setCheckedIds(v ? data.map(r => r.id) : [])} /></TableHead>
+                  {ts.visibleColumns.map((col) => (
+                    <TableHead key={col.key} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground" style={ts.thStyle(col.key)}>
+                      {col.label}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {ts.groupData(groupedData).map((group) => {
+                  if ((group as any)._isGroupSummary || (group as any)._isGroupHeader) return null;
+                  const isExpanded = expandedItems.has(group.item_code);
+                  const groupIds = group.rows.map((r: any) => r.id);
+                  const allChecked = groupIds.every((id: string) => checkedIds.includes(id));
+                  const renderCell = (key: string) => {
+                    switch (key) {
+                      case "item_code": return <TableCell key={key} className="text-sm font-medium text-primary">{group.item_code}</TableCell>;
+                      case "item_name": return <TableCell key={key} className="text-sm">{group.item_name}</TableCell>;
+                      case "inspection_type": return (
+                        <TableCell key={key}>
+                          <div className="flex gap-1 flex-wrap">
+                            {group.types.map((t: string) => <Badge key={t} variant="secondary" className="text-[10px]">{t}</Badge>)}
+                          </div>
+                        </TableCell>
+                      );
+                      case "item_count": return <TableCell key={key} className="text-sm text-center">{group.rows.filter((r: any) => r.inspection_standard_id).length}</TableCell>;
+                      case "is_active": return (
+                        <TableCell key={key}>
+                          <Badge variant={group.is_active === "사용" || group.is_active === "true" ? "default" : "secondary"} className="text-[10px]">
+                            {group.is_active === "사용" || group.is_active === "true" ? "사용" : "미사용"}
+                          </Badge>
+                        </TableCell>
+                      );
+                      default: return <TableCell key={key}>{(group as any)[key] ?? ""}</TableCell>;
+                    }
+                  };
+                  return (
+                    <React.Fragment key={group.item_code}>
+                      <TableRow
+                        className={cn("cursor-pointer border-l-2 border-l-transparent", allChecked && "border-l-primary bg-primary/5")}
+                        onClick={() => setExpandedItems(prev => { const next = new Set(prev); if (next.has(group.item_code)) next.delete(group.item_code); else next.add(group.item_code); return next; })}
+                        onDoubleClick={() => openEdit(group.rows[0])}
+                      >
+                        <TableCell className="text-center p-2">
+                          <ChevronDown className={cn("w-4 h-4 transition-transform text-muted-foreground", !isExpanded && "-rotate-90")} />
+                        </TableCell>
+                        <TableCell className="text-center p-2" onClick={(e) => { e.stopPropagation(); setCheckedIds(prev => allChecked ? prev.filter(id => !groupIds.includes(id)) : [...new Set([...prev, ...groupIds])]); }}>
+                          <Checkbox checked={allChecked} onCheckedChange={() => {}} />
+                        </TableCell>
+                        {ts.visibleColumns.map((col) => renderCell(col.key))}
+                      </TableRow>
+                      {isExpanded && group.rows.filter((r: any) => r.inspection_standard_id).map((row: any) => (
+                        <TableRow key={row.id} className="bg-muted/30 text-xs">
+                          <TableCell />
+                          <TableCell />
+                          <TableCell className="pl-6 text-muted-foreground">{row.inspection_type}</TableCell>
+                          <TableCell>{resolveInspLabel(row.inspection_standard_id)}</TableCell>
+                          <TableCell>{row.inspection_item_name || "-"}</TableCell>
+                          <TableCell>{row.inspection_method || "-"}</TableCell>
+                          <TableCell>{row.pass_criteria || "-"}</TableCell>
+                        </TableRow>
+                      ))}
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+          <div className="mt-2 text-xs text-muted-foreground">전체 {groupedData.length}건 (품목 기준)</div>
+        </div>
+      </div>
+
+      {/* ═══════════════════ 등록/수정 모달 (품목선택 뷰 포함) ═══════════════════ */}
+      <Dialog open={modalOpen} onOpenChange={(open) => { if (!open) setItemModalOpen(false); setModalOpen(open); }}>
+        <DialogContent className={cn("max-w-[95vw] max-h-[85vh] overflow-y-auto", itemModalOpen ? "sm:max-w-xl" : "sm:max-w-4xl")}>
+          {itemModalOpen ? (
+            <>
+              <DialogHeader>
+                <DialogTitle>품목 선택</DialogTitle>
+                <DialogDescription>품목코드 또는 품목명으로 검색</DialogDescription>
+              </DialogHeader>
+              <div className="flex gap-2">
+                <Input
+                  className="h-9 flex-1"
+                  placeholder="품목코드 또는 품목명으로 검색"
+                  value={itemSearchKeyword}
+                  onChange={(e) => setItemSearchKeyword(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === "Enter") handleItemSearch(); }}
+                />
+                <Button size="sm" className="h-9" onClick={handleItemSearch}>
+                  <Search className="w-4 h-4 mr-1" />검색
+                </Button>
+              </div>
+              <div className="border rounded-lg overflow-auto max-h-[50vh]">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10">
+                    <TableRow className="bg-muted hover:bg-muted">
+                      <TableHead className="text-[11px] font-bold">품목코드</TableHead>
+                      <TableHead className="text-[11px] font-bold">품목명</TableHead>
+                      <TableHead className="text-[11px] font-bold">품목유형</TableHead>
+                      <TableHead className="text-[11px] font-bold">단위</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredItems.length === 0 ? (
+                      <TableRow><TableCell colSpan={4} className="text-center py-8 text-muted-foreground text-sm">검색 결과가 없어요</TableCell></TableRow>
+                    ) : filteredItems.map((item) => (
+                      <TableRow
+                        key={item.code}
+                        className="cursor-pointer hover:bg-primary/5"
+                        onClick={() => selectItem(item)}
+                      >
+                        <TableCell className="text-sm">{item.code}</TableCell>
+                        <TableCell className="text-sm">{item.name}</TableCell>
+                        <TableCell className="text-sm">{item.item_type}</TableCell>
+                        <TableCell className="text-sm">{item.unit}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setItemModalOpen(false)}>취소</Button>
+              </DialogFooter>
+            </>
+          ) : (
+            <>
+              <DialogHeader>
+                <DialogTitle>{editMode ? "품목검사정보 수정" : "품목검사정보 등록"}</DialogTitle>
+                <DialogDescription className="sr-only">품목검사정보를 등록합니다</DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4">
+                {/* 품목 정보 */}
+                <div className="space-y-3">
+                  <h4 className="text-sm font-semibold flex items-center gap-1.5">📦 품목 정보</h4>
+                  <div className="flex items-end gap-2">
+                    <div className="space-y-1.5 flex-1">
+                      <Label className="text-xs font-semibold text-muted-foreground">품목코드 <span className="text-destructive">*</span></Label>
+                      <Input className="h-9 bg-muted" value={form.item_code || ""} readOnly placeholder="품목코드" />
+                    </div>
+                    <div className="space-y-1.5 flex-1">
+                      <Label className="text-xs font-semibold text-muted-foreground">품목명 <span className="text-destructive">*</span></Label>
+                      <Input className="h-9 bg-muted" value={form.item_name || ""} readOnly placeholder="품목명" />
+                    </div>
+                    <Button type="button" variant="outline" size="sm" className="h-9 px-3 shrink-0" onClick={openItemModal}>
+                      <Search className="w-4 h-4 mr-1" />품목선택
+                    </Button>
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-1.5">
+                      <Label className="text-xs font-semibold text-muted-foreground">사용여부</Label>
+                      <Select value={form.is_active === false ? "N" : "Y"} onValueChange={(v) => setForm(p => ({ ...p, is_active: v === "Y" }))}>
+                        <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">사용</SelectItem>
+                          <SelectItem value="N">미사용</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-xs font-semibold text-muted-foreground">관리자</Label>
+                      <Select value={form.manager || ""} onValueChange={(v) => setForm(p => ({ ...p, manager: v }))}>
+                        <SelectTrigger className="h-9"><SelectValue placeholder="관리자 선택" /></SelectTrigger>
+                        <SelectContent>
+                          {userOptions.map(o => (
+                            <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs font-semibold text-muted-foreground">비고</Label>
+                    <textarea
+                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[70px] resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                      value={form.remarks || ""}
+                      onChange={(e) => setForm(p => ({ ...p, remarks: e.target.value }))}
+                      placeholder="비고 사항"
+                    />
+                  </div>
+                </div>
+                {/* 검사유형 선택 */}
+                <div className="space-y-3">
+                  <h4 className="text-sm font-semibold flex items-center gap-1.5">✅ 검사유형 선택</h4>
+                  <div className="flex flex-wrap gap-4">
+                    {INSPECTION_TYPES.map(({ key, label }) => (
+                      <div key={key} className="flex items-center gap-1.5">
+                        <Checkbox
+                          checked={!!form[key]}
+                          onCheckedChange={(v) => setForm(p => ({ ...p, [key]: !!v }))}
+                        />
+                        <Label className="text-sm cursor-pointer">{label}</Label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                {/* 검사유형별 검사항목 설정 */}
+                {INSPECTION_TYPES.filter(t => !!form[t.key]).map(({ key, label }) => (
+                  <div key={key} className="space-y-2">
+                    <button
+                      type="button"
+                      className="w-full flex items-center gap-2 py-2 px-3 rounded-md border bg-muted/50 hover:bg-muted text-left"
+                      onClick={() => toggleCollapse(key)}
+                    >
+                      <Badge variant="default" className="text-xs">{label}</Badge>
+                      <span className="text-sm font-medium">검사항목 설정</span>
+                      <ChevronDown className={cn("w-4 h-4 ml-auto transition-transform", collapsedTypes[key] && "-rotate-90")} />
+                    </button>
+                    {!collapsedTypes[key] && (
+                      <div className="space-y-2 pl-1">
+                        <div className="flex items-center justify-between">
+                          <span className="text-xs font-semibold text-muted-foreground">검사항목 목록</span>
+                          <Button type="button" size="sm" variant="outline" className="h-7 text-xs" onClick={() => addInspRow(key)}>
+                            <Plus className="w-3 h-3 mr-1" />항목추가
+                          </Button>
+                        </div>
+                        <div className="border rounded-lg overflow-hidden">
+                          <Table>
+                            <TableHeader>
+                              <TableRow className="bg-muted/50 hover:bg-muted/50">
+                                <TableHead className="text-[10px] font-bold w-[170px]">검사기준 선택</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[130px]">검사기준 상세</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[90px]">검사방법</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[100px]">적용공정</TableHead>
+                                <TableHead className="text-[10px] font-bold">합격기준 (판단기준별)</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[40px]">필수</TableHead>
+                                <TableHead className="text-[10px] font-bold w-[36px]" />
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                              {(!inspectionRows[key] || inspectionRows[key].length === 0) ? (
+                                <TableRow><TableCell colSpan={7} className="text-center py-4 text-xs text-muted-foreground">항목추가 버튼으로 검사항목을 추가하세요</TableCell></TableRow>
+                              ) : inspectionRows[key].map((row) => (
+                                <TableRow key={row.id}>
+                                  <TableCell className="p-1">
+                                    <Select value={row.inspection_standard_id || ""} onValueChange={(v) => updateInspRow(key, row.id, "inspection_standard_id", v)}>
+                                      <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="검사기준 선택" /></SelectTrigger>
+                                      <SelectContent>
+                                        {getFilteredInspOptions(key).map(o => (
+                                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input className="h-8 text-xs bg-muted" value={row.inspection_detail} readOnly placeholder="검사기준 상세" />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input className="h-8 text-xs bg-muted" value={row.inspection_method} readOnly placeholder="선택" />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Select value={row.apply_process || ""} onValueChange={(v) => updateInspRow(key, row.id, "apply_process", v)}>
+                                      <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="공정 선택" /></SelectTrigger>
+                                      <SelectContent>
+                                        <SelectItem value="incoming">입고</SelectItem>
+                                        <SelectItem value="process">공정</SelectItem>
+                                        <SelectItem value="outgoing">출고</SelectItem>
+                                        <SelectItem value="final">최종</SelectItem>
+                                      </SelectContent>
+                                    </Select>
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Input
+                                      className="h-8 text-xs"
+                                      value={row.acceptance_criteria}
+                                      onChange={(e) => updateInspRow(key, row.id, "acceptance_criteria", e.target.value)}
+                                      placeholder={row.inspection_standard_id ? "합격기준 입력" : "검사기준을 먼저 선택하세요"}
+                                      disabled={!row.inspection_standard_id}
+                                    />
+                                  </TableCell>
+                                  <TableCell className="p-1 text-center">
+                                    <Checkbox checked={row.is_required} onCheckedChange={(v) => updateInspRow(key, row.id, "is_required", !!v)} />
+                                  </TableCell>
+                                  <TableCell className="p-1">
+                                    <Button type="button" variant="destructive" size="sm" className="h-7 w-7 p-0" onClick={() => removeInspRow(key, row.id)}>
+                                      <Trash2 className="w-3.5 h-3.5" />
+                                    </Button>
+                                  </TableCell>
+                                </TableRow>
+                              ))}
+                            </TableBody>
+                          </Table>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setModalOpen(false)}>취소</Button>
+                <Button onClick={handleSave} disabled={saving}>
+                  {saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+                  저장
+                </Button>
+              </DialogFooter>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/sales/claim/page.tsx b/frontend/app/(main)/COMPANY_9/sales/claim/page.tsx
new file mode 100644
index 00000000..a2c89599
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/sales/claim/page.tsx
@@ -0,0 +1,932 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Download,
+  Plus,
+  Save,
+  ClipboardList,
+  Inbox,
+  Check,
+  ChevronsUpDown,
+  Loader2,
+  FileSpreadsheet,
+  Trash2,
+  Pencil,
+  FileText,
+  Wrench,
+  Settings2,
+} from "lucide-react";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+
+// --- 상수 ---
+const TABLE_NAME = "claim_mng";
+
+const GRID_COLUMNS = [
+  { key: "claim_no", label: "클레임번호" },
+  { key: "claim_date", label: "접수일자" },
+  { key: "claim_type", label: "유형" },
+  { key: "claim_status", label: "상태" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "manager_name", label: "담당자" },
+  { key: "claim_content", label: "클레임 내용" },
+];
+
+type ClaimType = "불량" | "교환" | "반품" | "배송지연" | "기타";
+type ClaimStatus = "접수" | "처리중" | "완료" | "취소";
+
+interface ClaimRow {
+  id: number;
+  claim_no: string;
+  claim_date: string;
+  claim_type: string;
+  claim_status: string;
+  customer_code: string;
+  customer_name: string;
+  manager_name: string;
+  order_no: string;
+  claim_content: string;
+  process_content: string;
+  company_code?: string;
+  writer?: string;
+  created_date?: string;
+  updated_date?: string;
+  [key: string]: any;
+}
+
+interface CustomerOption {
+  customerCode: string;
+  customerName: string;
+}
+
+interface SalesOrderOption {
+  orderNo: string;
+  partnerName: string;
+  status: string;
+}
+
+// Badge variant 매핑 (CSS 변수 기반)
+const getClaimStatusVariant = (status: string) => {
+  switch (status) {
+    case "접수": return "default" as const;
+    case "처리중": return "secondary" as const;
+    case "완료": return "outline" as const;
+    case "취소": return "destructive" as const;
+    default: return "secondary" as const;
+  }
+};
+
+const getClaimTypeVariant = (type: string) => {
+  switch (type) {
+    case "불량": return "destructive" as const;
+    case "교환": return "warning" as const;
+    case "반품": return "default" as const;
+    case "배송지연": return "secondary" as const;
+    case "기타": return "outline" as const;
+    default: return "outline" as const;
+  }
+};
+
+const CLAIM_TYPES: ClaimType[] = ["불량", "교환", "반품", "배송지연", "기타"];
+const CLAIM_STATUSES: ClaimStatus[] = ["접수", "처리중", "완료", "취소"];
+
+export default function ClaimManagementPage() {
+  useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+  const ts = useTableSettings("c16-claim", TABLE_NAME, GRID_COLUMNS);
+
+  const [data, setData] = useState<ClaimRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [selectedClaimNo, setSelectedClaimNo] = useState<string | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 엑셀 업로드
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 모달 상태
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [formData, setFormData] = useState<Partial<ClaimRow>>({});
+
+  // Combobox 상태
+  const [customerOpen, setCustomerOpen] = useState(false);
+  const [orderOpen, setOrderOpen] = useState(false);
+
+  // DB 데이터
+  const [customers, setCustomers] = useState<CustomerOption[]>([]);
+  const [salesOrders, setSalesOrders] = useState<SalesOrderOption[]>([]);
+  const [customersLoading, setCustomersLoading] = useState(false);
+  const [ordersLoading, setOrdersLoading] = useState(false);
+
+  // --- 데이터 조회 (서버사이드 필터 + autoFilter 멀티테넌시) ---
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
+      const res = await apiClient.post(`/table-management/tables/${TABLE_NAME}/data`, {
+        page: 1,
+        size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "claim_date", order: "desc" },
+      });
+
+      const rows: ClaimRow[] = res.data?.data?.data || res.data?.data?.rows || [];
+      setData(rows);
+      setTotalCount(res.data?.data?.total || rows.length);
+    } catch {
+      toast.error("클레임 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+
+  // 거래처 목록 조회 (autoFilter로 멀티테넌시 적용)
+  const fetchCustomers = useCallback(async (force = false) => {
+    if (!force && customers.length > 0) return;
+    setCustomersLoading(true);
+    try {
+      const res = await apiClient.post("/table-management/tables/customer_mng/data", {
+        page: 1,
+        size: 9999,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows;
+      if (res.data?.success && Array.isArray(rows)) {
+        const list: CustomerOption[] = rows.map((row: any) => ({
+          customerCode: row.customer_code || row.id || "",
+          customerName: row.customer_name || "",
+        }));
+        setCustomers(list);
+      }
+    } catch {
+      /* skip */
+    } finally {
+      setCustomersLoading(false);
+    }
+  }, [customers.length]);
+
+  // 수주 목록 조회 (autoFilter로 멀티테넌시 적용)
+  const fetchSalesOrders = useCallback(async (force = false) => {
+    if (!force && salesOrders.length > 0) return;
+    setOrdersLoading(true);
+    try {
+      const res = await apiClient.post("/table-management/tables/sales_order_mng/data", {
+        page: 1,
+        size: 9999,
+        autoFilter: true,
+      });
+      const rows = res.data?.data?.data || res.data?.data?.rows;
+      if (res.data?.success && Array.isArray(rows)) {
+        const seen = new Set<string>();
+        const list: SalesOrderOption[] = [];
+        for (const row of rows) {
+          const orderNo = row.order_no || "";
+          if (!orderNo || seen.has(orderNo)) continue;
+          seen.add(orderNo);
+          list.push({
+            orderNo,
+            partnerName: row.partner_id || "",
+            status: row.status || "",
+          });
+        }
+        setSalesOrders(list);
+      }
+    } catch {
+      /* skip */
+    } finally {
+      setOrdersLoading(false);
+    }
+  }, [salesOrders.length]);
+
+  // 상태별 카운트
+  const statusCounts = useMemo(() => {
+    const counts = { 접수: 0, 처리중: 0, 완료: 0, 취소: 0 };
+    data.forEach((claim) => {
+      if (counts[claim.claim_status as keyof typeof counts] !== undefined) {
+        counts[claim.claim_status as keyof typeof counts]++;
+      }
+    });
+    return counts;
+  }, [data]);
+
+  // 클레임번호 자동 생성
+  const generateClaimNo = useCallback(() => {
+    const year = new Date().getFullYear();
+    const prefix = `CLM-${year}-`;
+    const existingNumbers = data
+      .filter((c) => c.claim_no?.startsWith(prefix))
+      .map((c) => parseInt(c.claim_no.replace(prefix, ""), 10))
+      .filter((n) => !isNaN(n));
+    const maxNumber = existingNumbers.length > 0 ? Math.max(...existingNumbers) : 0;
+    return `${prefix}${String(maxNumber + 1).padStart(3, "0")}`;
+  }, [data]);
+
+  const handleRowClick = (claimNo: string) => {
+    setSelectedClaimNo(claimNo);
+  };
+
+  const openRegisterModal = () => {
+    setIsEditMode(false);
+    setFormData({
+      claim_no: generateClaimNo(),
+      claim_date: new Date().toISOString().split("T")[0],
+      claim_type: undefined,
+      claim_status: "접수",
+      customer_code: "",
+      customer_name: "",
+      manager_name: "",
+      order_no: "",
+      claim_content: "",
+      process_content: "",
+    });
+    setIsModalOpen(true);
+    fetchCustomers(true);
+    fetchSalesOrders(true);
+  };
+
+  const openEditModal = (claimNo: string) => {
+    const claim = data.find((c) => c.claim_no === claimNo);
+    if (!claim) return;
+    setIsEditMode(true);
+    setFormData({ ...claim });
+    setIsModalOpen(true);
+    fetchCustomers(true);
+    fetchSalesOrders(true);
+  };
+
+  const handleFormChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  // --- 저장 (table-management API, company_code 자동 주입) ---
+  const handleSave = async () => {
+    if (!formData.claim_type || !formData.customer_name || !formData.claim_content) {
+      toast.error("필수 항목을 모두 입력해주세요. (클레임유형, 거래처명, 클레임내용)");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const { id, company_code, writer, created_date, updated_date, created_by, updated_by, ...saveFields } = formData as any;
+
+      if (isEditMode && id) {
+        await apiClient.put(`/table-management/tables/${TABLE_NAME}/edit`, {
+          originalData: { id },
+          updatedData: saveFields,
+        });
+        toast.success("클레임이 수정되었어요.");
+      } else {
+        await apiClient.post(`/table-management/tables/${TABLE_NAME}/add`, saveFields);
+        toast.success("클레임이 등록되었어요.");
+      }
+
+      setIsModalOpen(false);
+      fetchData();
+    } catch (err: any) {
+      console.error("클레임 저장 실패:", err);
+      toast.error(err.response?.data?.message || "저장에 실패했어요.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // --- 삭제 ---
+  const handleDelete = async (claimNo: string) => {
+    const claim = data.find((c) => c.claim_no === claimNo);
+    if (!claim) return;
+
+    const ok = await confirm(`클레임 ${claimNo}을(를) 삭제하시겠습니까?`, {
+      variant: "destructive",
+      confirmText: "삭제",
+    });
+    if (!ok) return;
+
+    try {
+      await apiClient.delete(`/table-management/tables/${TABLE_NAME}/delete`, {
+        data: [{ id: claim.id }],
+      });
+      toast.success("클레임이 삭제되었어요.");
+      if (selectedClaimNo === claimNo) setSelectedClaimNo(null);
+      fetchData();
+    } catch (err: any) {
+      console.error("클레임 삭제 실패:", err);
+      toast.error(err.response?.data?.message || "삭제에 실패했어요.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (data.length === 0) {
+      toast.error("다운로드할 데이터가 없어요.");
+      return;
+    }
+    try {
+      const exportData = data.map((row) => ({
+        클레임번호: row.claim_no,
+        접수일자: row.claim_date,
+        클레임유형: row.claim_type,
+        처리상태: row.claim_status,
+        거래처코드: row.customer_code,
+        거래처명: row.customer_name,
+        담당자: row.manager_name,
+        수주번호: row.order_no,
+        클레임내용: row.claim_content,
+        처리내용: row.process_content,
+      }));
+      await exportToExcel(exportData, "클레임관리.xlsx", "클레임");
+      toast.success("엑셀 다운로드 완료");
+    } catch (err) {
+      console.error("엑셀 다운로드 실패:", err);
+      toast.error("엑셀 다운로드에 실패했어요.");
+    }
+  };
+
+  const selectedClaim = useMemo(
+    () => data.find((c) => c.claim_no === selectedClaimNo),
+    [data, selectedClaimNo]
+  );
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-4rem)] overflow-hidden">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={TABLE_NAME}
+        filterId="c16-claim"
+        onFilterChange={setSearchFilters}
+        dataCount={data.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* ───── 메인 분할 레이아웃 ───── */}
+      <div className="flex-1 overflow-hidden">
+        <ResizablePanelGroup direction="horizontal" className="h-full">
+          {/* ── 좌측: 클레임 목록 (65%) ── */}
+          <ResizablePanel defaultSize={65} minSize={35}>
+            <div className="flex flex-col h-full bg-card">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="flex items-center gap-2">
+                  <ClipboardList className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-[13px] font-bold text-foreground">클레임 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/8 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {data.length}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+                    <FileSpreadsheet className="w-3.5 h-3.5" />
+                    업로드
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={handleExcelDownload}>
+                    <Download className="w-3.5 h-3.5" />
+                    다운로드
+                  </Button>
+                  <Button size="sm" onClick={openRegisterModal}>
+                    <Plus className="w-3.5 h-3.5" />
+                    등록
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                    <Settings2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 테이블 */}
+              <EDataTable
+                columns={ts.visibleColumns.map((col): EDataTableColumn<ClaimRow> => ({
+                  key: col.key,
+                  label: col.label,
+                  align: col.key === "claim_type" || col.key === "claim_status" ? "center" : undefined,
+                  render: col.key === "claim_type"
+                    ? (val: any) => (
+                        <Badge variant={getClaimTypeVariant(val)} className="text-[10px] px-1.5 py-0">
+                          {val}
+                        </Badge>
+                      )
+                    : col.key === "claim_status"
+                    ? (val: any) => (
+                        <Badge variant={getClaimStatusVariant(val)} className="text-[10px] px-1.5 py-0">
+                          {val}
+                        </Badge>
+                      )
+                    : undefined,
+                }))}
+                data={ts.groupData(data)}
+                loading={loading}
+                emptyMessage="등록된 클레임이 없어요"
+                rowKey={(row) => String(row.id)}
+                selectedId={selectedClaimNo ? String(data.find(c => c.claim_no === selectedClaimNo)?.id ?? "") : null}
+                onSelect={(id) => {
+                  const claim = data.find(c => String(c.id) === id);
+                  handleRowClick(claim?.claim_no ?? "");
+                }}
+                onRowDoubleClick={(row) => openEditModal(row.claim_no)}
+                showRowNumber
+                draggableColumns={false}
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* ── 우측: 클레임 상세 (35%) ── */}
+          <ResizablePanel defaultSize={35} minSize={20}>
+            <div className="flex flex-col h-full bg-card border-l">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/40 shrink-0">
+                <div className="flex items-center gap-2">
+                  <ClipboardList className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-[13px] font-bold text-foreground">클레임 상세</span>
+                  {selectedClaim && (
+                    <span className="text-[11px] font-mono text-muted-foreground">{selectedClaim.claim_no}</span>
+                  )}
+                </div>
+                {selectedClaim && (
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => openEditModal(selectedClaim.claim_no)}
+                    >
+                      <Pencil className="w-3.5 h-3.5" />
+                      수정
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="text-destructive hover:text-destructive"
+                      onClick={() => handleDelete(selectedClaim.claim_no)}
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {/* 상태별 요약 카운트 */}
+              <div className="flex items-center gap-3 px-4 py-2 border-b bg-muted/20 shrink-0">
+                {([
+                  { label: "접수", count: statusCounts["접수"], variant: "default" as const },
+                  { label: "처리중", count: statusCounts["처리중"], variant: "secondary" as const },
+                  { label: "완료", count: statusCounts["완료"], variant: "outline" as const },
+                  { label: "취소", count: statusCounts["취소"], variant: "destructive" as const },
+                ]).map((item) => (
+                  <div key={item.label} className="flex items-center gap-1">
+                    <Badge variant={item.variant} className="text-[10px] px-1.5 py-0">
+                      {item.label}
+                    </Badge>
+                    <span className="text-sm font-bold tabular-nums text-foreground">{item.count}</span>
+                  </div>
+                ))}
+              </div>
+
+              {/* 상세 컨텐츠 */}
+              <div className="flex-1 overflow-auto">
+                {selectedClaim ? (
+                  <div className="p-4 space-y-4">
+                    {/* 기본 정보 그리드 */}
+                    <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">접수일자</p>
+                        <p className="text-sm text-foreground">{selectedClaim.claim_date}</p>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">담당자</p>
+                        <p className="text-sm text-foreground">{selectedClaim.manager_name || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">유형</p>
+                        <Badge variant={getClaimTypeVariant(selectedClaim.claim_type)} className="text-[11px]">
+                          {selectedClaim.claim_type}
+                        </Badge>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">상태</p>
+                        <Badge variant={getClaimStatusVariant(selectedClaim.claim_status)} className="text-[11px]">
+                          {selectedClaim.claim_status}
+                        </Badge>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">거래처명</p>
+                        <p className="text-sm font-medium text-foreground">{selectedClaim.customer_name}</p>
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주번호</p>
+                        <p className="text-sm font-mono text-muted-foreground">{selectedClaim.order_no || "-"}</p>
+                      </div>
+                    </div>
+
+                    <div className="border-t" />
+
+                    {/* 클레임 내용 */}
+                    <div>
+                      <div className="flex items-center gap-1.5 mb-1.5">
+                        <FileText className="w-3.5 h-3.5 text-muted-foreground" />
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">클레임 내용</p>
+                      </div>
+                      <div className="rounded-md border bg-muted/30 p-3 text-sm text-foreground whitespace-pre-wrap min-h-[60px]">
+                        {selectedClaim.claim_content || "-"}
+                      </div>
+                    </div>
+
+                    {/* 처리 내용 */}
+                    <div>
+                      <div className="flex items-center gap-1.5 mb-1.5">
+                        <Wrench className="w-3.5 h-3.5 text-muted-foreground" />
+                        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">처리 내용</p>
+                      </div>
+                      <div className="rounded-md border bg-muted/30 p-3 text-sm text-foreground whitespace-pre-wrap min-h-[60px]">
+                        {selectedClaim.process_content || "-"}
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex flex-col items-center justify-center h-full text-center p-8">
+                    <div className="rounded-full border-2 border-dashed border-muted-foreground/20 w-14 h-14 flex items-center justify-center mb-4">
+                      <Inbox className="w-7 h-7 text-muted-foreground/30" />
+                    </div>
+                    <p className="text-sm font-medium text-muted-foreground mb-1">
+                      좌측에서 클레임을 선택해주세요
+                    </p>
+                    <p className="text-xs text-muted-foreground/60">
+                      클레임을 선택하면 상세 정보가 표시돼요
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ───── 클레임 등록/수정 모달 ───── */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[900px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? "클레임 수정" : "클레임 등록"}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? "클레임 정보를 수정해요." : "새로운 클레임을 등록해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex flex-col md:flex-row gap-4 py-2">
+            {/* 왼쪽: 기본 정보 */}
+            <div className="md:w-[320px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border">
+              <h3 className="text-[13px] font-bold pb-2 border-b text-foreground">기본 정보</h3>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_no" className="text-[11px] font-semibold text-muted-foreground">클레임번호</Label>
+                <Input
+                  id="claim_no"
+                  value={formData.claim_no || ""}
+                  readOnly
+                  className="h-9 text-sm bg-muted cursor-not-allowed font-mono"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_date" className="text-[11px] font-semibold text-muted-foreground">접수일자</Label>
+                <Input
+                  id="claim_date"
+                  type="date"
+                  value={formData.claim_date || ""}
+                  onChange={(e) => handleFormChange("claim_date", e.target.value)}
+                  className="h-9 text-sm"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_type" className="text-[11px] font-semibold text-muted-foreground">
+                  클레임 유형 <span className="text-destructive">*</span>
+                </Label>
+                <Select
+                  value={formData.claim_type || ""}
+                  onValueChange={(v) => handleFormChange("claim_type", v)}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue placeholder="유형을 선택해주세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CLAIM_TYPES.map((t) => (
+                      <SelectItem key={t} value={t}>{t}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_status" className="text-[11px] font-semibold text-muted-foreground">처리 상태</Label>
+                <Select
+                  value={formData.claim_status || "접수"}
+                  onValueChange={(v) => handleFormChange("claim_status", v)}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CLAIM_STATUSES.map((s) => (
+                      <SelectItem key={s} value={s}>{s}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1">
+                <Label className="text-[11px] font-semibold text-muted-foreground">
+                  거래처명 <span className="text-destructive">*</span>
+                </Label>
+                <Popover open={customerOpen} onOpenChange={setCustomerOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={customerOpen}
+                      className="h-9 w-full justify-between font-normal"
+                      onClick={() => fetchCustomers(false)}
+                    >
+                      {formData.customer_name || "거래처를 선택해주세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput placeholder="거래처 검색..." />
+                      <CommandList>
+                        {customersLoading ? (
+                          <div className="flex items-center justify-center py-6">
+                            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                            <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
+                          </div>
+                        ) : (
+                          <>
+                            <CommandEmpty className="py-4 text-center text-sm">
+                              거래처를 찾을 수 없어요.
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {customers.map((cust) => (
+                                <CommandItem
+                                  key={cust.customerCode}
+                                  value={`${cust.customerCode} ${cust.customerName}`}
+                                  onSelect={() => {
+                                    setFormData((prev) => ({
+                                      ...prev,
+                                      customer_code: cust.customerCode,
+                                      customer_name: cust.customerName,
+                                    }));
+                                    setCustomerOpen(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      formData.customer_code === cust.customerCode
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col min-w-0">
+                                    <span className="font-medium truncate">{cust.customerName}</span>
+                                    <span className="text-[10px] text-muted-foreground">{cust.customerCode}</span>
+                                  </div>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="manager_name" className="text-[11px] font-semibold text-muted-foreground">담당자</Label>
+                <Input
+                  id="manager_name"
+                  value={formData.manager_name || ""}
+                  onChange={(e) => handleFormChange("manager_name", e.target.value)}
+                  placeholder="담당자를 입력해주세요"
+                  className="h-9"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label className="text-[11px] font-semibold text-muted-foreground">수주번호</Label>
+                <Popover open={orderOpen} onOpenChange={setOrderOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={orderOpen}
+                      className="h-9 w-full justify-between font-normal"
+                      onClick={() => fetchSalesOrders(false)}
+                    >
+                      {formData.order_no || "수주번호를 선택해주세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput placeholder="수주번호 검색..." />
+                      <CommandList>
+                        {ordersLoading ? (
+                          <div className="flex items-center justify-center py-6">
+                            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                            <span className="ml-2 text-xs text-muted-foreground">로딩 중...</span>
+                          </div>
+                        ) : (
+                          <>
+                            <CommandEmpty className="py-4 text-center text-sm">
+                              수주번호를 찾을 수 없어요.
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {salesOrders.map((order) => (
+                                <CommandItem
+                                  key={order.orderNo}
+                                  value={`${order.orderNo} ${order.partnerName}`}
+                                  onSelect={() => {
+                                    setFormData((prev) => ({
+                                      ...prev,
+                                      order_no: order.orderNo,
+                                    }));
+                                    setOrderOpen(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      formData.order_no === order.orderNo
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                    )}
+                                  />
+                                  <div className="flex flex-col min-w-0">
+                                    <span className="font-medium truncate">{order.orderNo}</span>
+                                    <span className="text-[10px] text-muted-foreground">
+                                      {order.status}
+                                      {order.partnerName ? ` | ${order.partnerName}` : ""}
+                                    </span>
+                                  </div>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+
+            {/* 오른쪽: 상세 내용 */}
+            <div className="flex-1 space-y-3 bg-muted/30 p-4 rounded-lg border min-w-0">
+              <h3 className="text-[13px] font-bold pb-2 border-b text-foreground">클레임 상세 내용</h3>
+
+              <div className="space-y-1">
+                <Label htmlFor="claim_content" className="text-[11px] font-semibold text-muted-foreground">
+                  클레임 내용 <span className="text-destructive">*</span>
+                </Label>
+                <Textarea
+                  id="claim_content"
+                  value={formData.claim_content || ""}
+                  onChange={(e) => handleFormChange("claim_content", e.target.value)}
+                  placeholder="클레임 내용을 상세히 입력해주세요"
+                  className="min-h-[200px] resize-y text-sm"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="process_content" className="text-[11px] font-semibold text-muted-foreground">처리 내용</Label>
+                <Textarea
+                  id="process_content"
+                  value={formData.process_content || ""}
+                  onChange={(e) => handleFormChange("process_content", e.target.value)}
+                  placeholder="처리 내용을 입력해주세요"
+                  className="min-h-[150px] resize-y text-sm"
+                />
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <Save className="w-4 h-4" />
+              )}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 모달 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={TABLE_NAME}
+        onSuccess={() => {
+          fetchData();
+          toast.success("엑셀 업로드가 완료되었어요.");
+        }}
+      />
+
+      {/* 확인 다이얼로그 */}
+      {ConfirmDialogComponent}
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/sales/customer/page.tsx b/frontend/app/(main)/COMPANY_9/sales/customer/page.tsx
new file mode 100644
index 00000000..61e1269d
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/sales/customer/page.tsx
@@ -0,0 +1,2762 @@
+"use client";
+
+/**
+ * 거래처관리 — Type B 마스터-디테일 레이아웃 (리디자인)
+ *
+ * 좌측: 거래처 목록 (customer_mng)
+ * 우측: 품목별 단가 + 납품처 정보 탭
+ *
+ * 모달:
+ * - 거래처 등록/수정 (customer_mng)
+ * - 품목 추가 (item_info 검색 → customer_item_mapping + customer_item_prices)
+ * - 납품처 등록 (delivery_destination)
+ */
+
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Label } from "@/components/ui/label";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
+  Users, Package, MapPin, Search, X, Tag, Coins, Settings2, GripVertical,
+  ChevronRight, ChevronDown,
+} from "lucide-react";
+import {
+  DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
+import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { validateField, validateForm, formatField } from "@/lib/utils/validation";
+import { getAvailableNumberingRulesForScreen, previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const CUSTOMER_TABLE = "customer_mng";
+const MAPPING_TABLE = "customer_item_mapping";
+const PRICE_TABLE = "customer_item_prices";
+const DELIVERY_TABLE = "delivery_destination";
+const CONTACT_TABLE = "customer_contact";
+
+const CUSTOMER_GRID_COLUMNS = [
+  { key: "customer_code", label: "거래처코드" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "division", label: "거래유형" },
+  { key: "contact_person", label: "담당자" },
+  { key: "contact_phone", label: "전화번호" },
+  { key: "email", label: "이메일" },
+  { key: "business_number", label: "사업자번호" },
+  { key: "address", label: "주소" },
+  { key: "status", label: "상태" },
+];
+
+function SortableMappingRow({ id, children }: { id: string; children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform), transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+  return (
+    <div ref={setNodeRef} style={style} className="flex gap-2 items-center">
+      <div {...attributes} {...listeners} className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0">
+        <GripVertical className="h-3.5 w-3.5" />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default function CustomerManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-customer", CUSTOMER_TABLE, CUSTOMER_GRID_COLUMNS);
+  const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 좌측: 거래처 목록
+  const [customers, setCustomers] = useState<any[]>([]);
+  const [rawCustomers, setRawCustomers] = useState<any[]>([]);
+  const [customerLoading, setCustomerLoading] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
+  const [mainContactMap, setMainContactMap] = useState<Record<string, any>>({});
+  const [customerCount, setCustomerCount] = useState(0);
+  const [selectedCustomerId, setSelectedCustomerId] = useState<string | null>(null);
+
+  // 우측: 탭
+  const [rightTab, setRightTab] = useState<"items" | "delivery">("items");
+  // 우측: 품목 단가
+  const [priceItems, setPriceItems] = useState<any[]>([]);
+  const [priceGroups, setPriceGroups] = useState<Record<string, { master: any; details: any[] }>>({});
+  const [priceLoading, setPriceLoading] = useState(false);
+  const [priceCheckedIds, setPriceCheckedIds] = useState<string[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [collapsedPriceCards, setCollapsedPriceCards] = useState<Set<string>>(new Set());
+  // 우측: 납품처
+  const [deliveryItems, setDeliveryItems] = useState<any[]>([]);
+  const [deliveryLoading, setDeliveryLoading] = useState(false);
+
+  // 품목 편집 데이터 (더블클릭 시 상세 입력 모달 재활용)
+  const [editItemData, setEditItemData] = useState<any>(null);
+  const savingRef = useRef(false);
+
+  // 거래처 모달
+  const [customerModalOpen, setCustomerModalOpen] = useState(false);
+  const [customerEditMode, setCustomerEditMode] = useState(false);
+  const [customerForm, setCustomerForm] = useState<Record<string, any>>({});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 품목 추가 모달 (1단계: 검색/선택)
+  const [itemSelectOpen, setItemSelectOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemTotalCount, setItemTotalCount] = useState(0);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 상세 입력 모달 (2단계: 거래처 품번/품명 + 단가)
+  const [itemDetailOpen, setItemDetailOpen] = useState(false);
+  const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
+  const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; customer_item_code: string; customer_item_name: string }>>>({});
+  const [itemPrices, setItemPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 거래처 모달 탭
+  const [customerModalTab, setCustomerModalTab] = useState<"basic" | "contacts" | "delivery">("basic");
+  // 담당자 (customer_contact) - 모달 내
+  const [modalContacts, setModalContacts] = useState<any[]>([]);
+  const [modalContactLoading, setModalContactLoading] = useState(false);
+  const [modalContactForm, setModalContactForm] = useState<Record<string, any>>({});
+  const [modalContactEditId, setModalContactEditId] = useState<string | null>(null);
+  const [modalContactFormOpen, setModalContactFormOpen] = useState(false);
+  const [modalContactSaving, setModalContactSaving] = useState(false);
+  // 납품처 (delivery_destination) - 모달 내
+  const [modalDeliveries, setModalDeliveries] = useState<any[]>([]);
+  const [modalDeliveryLoading, setModalDeliveryLoading] = useState(false);
+  const [modalDeliveryForm, setModalDeliveryForm] = useState<Record<string, any>>({});
+  const [modalDeliveryEditId, setModalDeliveryEditId] = useState<string | null>(null);
+  const [modalDeliveryFormOpen, setModalDeliveryFormOpen] = useState(false);
+  const [modalDeliverySaving, setModalDeliverySaving] = useState(false);
+  const [modalDeliveryFormErrors, setModalDeliveryFormErrors] = useState<Record<string, string>>({});
+
+  const [continuousInput, setContinuousInput] = useState(false);
+
+  // 세금유형 (기본정보 탭 내)
+  const [taxTypeRows, setTaxTypeRows] = useState<{ _id: string; tax_type_name: string; rate: string }[]>([]);
+  const [taxTypeOptions, setTaxTypeOptions] = useState<{ code: string; label: string }[]>([]);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+  const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
+  const [excelDetecting, setExcelDetecting] = useState(false);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+  const [employeeOptions, setEmployeeOptions] = useState<{ user_id: string; user_name: string; position_name?: string }[]>([]);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const flatten = (vals: any[]): { code: string; label: string }[] => {
+      const result: { code: string; label: string }[] = [];
+      for (const v of vals) {
+        result.push({ code: v.valueCode, label: v.valueLabel });
+        if (v.children?.length) result.push(...flatten(v.children));
+      }
+      return result;
+    };
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["division", "status"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${CUSTOMER_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${PRICE_TABLE}/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+
+      // 세금유형 카테고리
+      try {
+        const taxRes = await apiClient.get(`/table-categories/customer_tax_type/tax_type_name/values`);
+        if (taxRes.data?.success) setTaxTypeOptions(flatten(taxRes.data.data || []));
+      } catch { /* skip */ }
+    };
+    load();
+    apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true })
+      .then((res) => {
+        const users = res.data?.data?.data || res.data?.data?.rows || [];
+        setEmployeeOptions(users.map((u: any) => ({
+          user_id: u.user_id, user_name: u.user_name || u.user_id, position_name: u.position_name,
+        })));
+      }).catch(() => {});
+  }, []);
+
+  // 거래처 목록 조회
+  const fetchCustomers = useCallback(async () => {
+    setCustomerLoading(true);
+    try {
+      const filters = searchFilters.map(f => ({
+        columnName: f.columnName,
+        operator: f.operator,
+        value: f.value,
+      }));
+
+      const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+        sort: { columnName: "customer_code", order: "desc" },
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      setRawCustomers(raw);
+
+      const resolve = (col: string, code: string) => {
+        if (!code) return "";
+        return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+      };
+      const data = raw.map((r: any) => {
+        const mainContact = mainContactMap[r.id];
+        return {
+          ...r,
+          division: resolve("division", r.division),
+          status: resolve("status", r.status),
+          contact_person: mainContact?.contact_name || "",
+          contact_phone: mainContact?.contact_phone || "",
+          email: mainContact?.contact_email || "",
+        };
+      });
+      // 거래처코드 숫자 기준 내림차순 정렬
+      data.sort((a: any, b: any) => {
+        const aNum = parseInt((a.customer_code || "").replace(/\D/g, ""), 10) || 0;
+        const bNum = parseInt((b.customer_code || "").replace(/\D/g, ""), 10) || 0;
+        return bNum - aNum;
+      });
+      setCustomers(data);
+      setCustomerCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("거래처 조회 실패:", err);
+      toast.error("거래처 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setCustomerLoading(false);
+    }
+  }, [searchFilters, categoryOptions, employeeOptions, mainContactMap]);
+
+  useEffect(() => { fetchCustomers(); }, [fetchCustomers]);
+
+  // 메인 담당자 조회 (최초 1번 + 저장 후 갱신)
+  const fetchMainContacts = useCallback(async () => {
+    try {
+      const contactRes = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 500, autoFilter: true,
+        dataFilter: { enabled: true, filters: [{ columnName: "is_main", operator: "equals", value: "Y" }] },
+      });
+      const allContacts = contactRes.data?.data?.data || contactRes.data?.data?.rows || [];
+      const map: Record<string, any> = {};
+      for (const c of allContacts) {
+        if ((c.is_main === "Y" || c.is_main === true) && c.customer_id) {
+          map[c.customer_id] = c;
+        }
+      }
+      setMainContactMap(map);
+    } catch { /* skip */ }
+  }, []);
+
+  useEffect(() => { fetchMainContacts(); }, [fetchMainContacts]);
+
+  const selectedCustomer = customers.find((c) => c.id === selectedCustomerId);
+
+  // 선택된 거래처의 품목 단가 조회
+  useEffect(() => {
+    if (!selectedCustomer?.customer_code) { setPriceItems([]); setPriceCheckedIds([]); return; }
+    setPriceCheckedIds([]);
+    const fetchItems = async () => {
+      setPriceLoading(true);
+      try {
+        const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+          ]},
+          autoFilter: true,
+        });
+        const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
+
+        const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
+        let itemMap: Record<string, any> = {};
+        if (itemIds.length > 0) {
+          try {
+            const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+              page: 1, size: itemIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+              autoFilter: true,
+            });
+            for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+              itemMap[item.item_number] = item;
+            }
+          } catch { /* skip */ }
+        }
+
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
+        };
+        const now = new Date();
+        const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+
+        // 품목 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
+        const grouped: Record<string, { master: any; details: any[] }> = {};
+        const flatItems: any[] = [];
+        const seenItemIds = new Set<string>();
+        for (const m of mappings) {
+          const itemKey = m.item_id || "";
+          if (seenItemIds.has(itemKey)) continue; // 품목당 첫 매핑만 마스터
+          seenItemIds.add(itemKey);
+
+          const itemInfo = itemMap[itemKey] || {};
+          const itemPriceList = allPrices
+            .filter((p: any) => p.item_id === itemKey)
+            .sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
+          const todayPrice = itemPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || itemPriceList[0] || {};
+
+          const masterRow = {
+            ...m,
+            item_number: itemKey,
+            item_name: itemInfo.item_name || "",
+            base_price_type: priceResolve("base_price_type", todayPrice.base_price_type || ""),
+            base_price: todayPrice.base_price || "",
+            discount_type: priceResolve("discount_type", todayPrice.discount_type || ""),
+            discount_value: todayPrice.discount_value || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+
+          // 단가 리스트 (라벨 변환)
+          const priceDetails = itemPriceList.map((p: any) => ({
+            ...p,
+            base_price_type_label: priceResolve("base_price_type", p.base_price_type || ""),
+            discount_type_label: priceResolve("discount_type", p.discount_type || ""),
+            currency_label: priceResolve("currency_code", p.currency_code || ""),
+            is_current: (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today),
+          }));
+
+          grouped[itemKey] = { master: masterRow, details: priceDetails };
+          flatItems.push(masterRow);
+        }
+        setPriceGroups(grouped);
+        setPriceItems(flatItems);
+      } catch (err) {
+        console.error("품목 조회 실패:", err);
+      } finally {
+        setPriceLoading(false);
+      }
+    };
+    fetchItems();
+  }, [selectedCustomer?.customer_code]);
+
+  // 납품처 조회
+  useEffect(() => {
+    if (!selectedCustomer?.customer_code) { setDeliveryItems([]); return; }
+    const fetchDelivery = async () => {
+      setDeliveryLoading(true);
+      try {
+        const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [
+            { columnName: "customer_code", operator: "equals", value: selectedCustomer.customer_code },
+          ]},
+          autoFilter: true,
+        });
+        setDeliveryItems(res.data?.data?.data || res.data?.data?.rows || []);
+      } catch { setDeliveryItems([]); } finally { setDeliveryLoading(false); }
+    };
+    fetchDelivery();
+  }, [selectedCustomer?.customer_code]);
+
+  const getCategoryLabel = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 모달 내 담당자 목록 조회
+  const fetchModalContacts = useCallback(async (customerId: string) => {
+    setModalContactLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      setModalContacts(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalContacts([]); } finally { setModalContactLoading(false); }
+  }, []);
+
+  // 모달 내 납품처 목록 조회
+  const fetchModalDeliveries = useCallback(async (customerCode: string) => {
+    setModalDeliveryLoading(true);
+    try {
+      const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 200,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
+        autoFilter: true,
+      });
+      setModalDeliveries(res.data?.data?.data || res.data?.data?.rows || []);
+    } catch { setModalDeliveries([]); } finally { setModalDeliveryLoading(false); }
+  }, []);
+
+  // 담당자 저장 (등록/수정)
+  const handleModalContactSave = async () => {
+    if (!modalContactForm.contact_name) { toast.error("담당자명은 필수입니다."); return; }
+    if (modalContactEditId) {
+      // 수정 — 로컬 리스트에서 교체 + 메인 설정 시 다른 메인 해제
+      const isSettingMain = modalContactForm.is_main === "Y" || modalContactForm.is_main === true;
+      setModalContacts((prev) => prev.map((c) =>
+        (c._localId || c.id) === modalContactEditId
+          ? { ...c, ...modalContactForm }
+          : isSettingMain ? { ...c, is_main: "N" } : c
+      ));
+    } else {
+      // 추가 — 로컬 리스트에 카드 추가
+      setModalContacts((prev) => [...prev, {
+        ...modalContactForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalContactFormOpen(false);
+    setModalContactForm({});
+    setModalContactEditId(null);
+  };
+
+  // 담당자 삭제
+  const handleModalContactDelete = (contactId: string) => {
+    setModalContacts((prev) => prev.filter((c) => (c._localId || c.id) !== contactId));
+  };
+
+  // 납품처 자동채번 유틸
+  const generateDeliveryCode = async () => {
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DELIVERY_TABLE}/destination_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        const allRes = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "destination_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const match = (row.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        // 로컬에 추가된 것도 포함
+        for (const d of modalDeliveries) {
+          const match = (d.destination_code || "").match(/(\d+)$/);
+          if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
+        }
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLen = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          return prefix + String(maxSeq + 1).padStart(seqLen, "0");
+        }
+      }
+    } catch { /* skip */ }
+    return "";
+  };
+
+  // 납품처 저장 (모달 내)
+  const handleModalDeliverySave = async () => {
+    if (!modalDeliveryForm.destination_name) { toast.error("납품처명은 필수입니다."); return; }
+    if (modalDeliveryEditId) {
+      const isSettingMain = modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true;
+      setModalDeliveries((prev) => prev.map((d) =>
+        (d._localId || d.id) === modalDeliveryEditId
+          ? { ...d, ...modalDeliveryForm }
+          : isSettingMain ? { ...d, is_default: "N" } : d
+      ));
+    } else {
+      setModalDeliveries((prev) => [...prev, {
+        ...modalDeliveryForm,
+        _localId: `local_${Date.now()}_${Math.random()}`,
+        _isNew: true,
+      }]);
+    }
+    setModalDeliveryFormOpen(false);
+    setModalDeliveryForm({});
+    setModalDeliveryEditId(null);
+    setModalDeliveryFormErrors({});
+  };
+
+  const handleModalDeliveryDelete = (deliveryId: string) => {
+    setModalDeliveries((prev) => prev.filter((d) => (d._localId || d.id) !== deliveryId));
+  };
+
+  // 거래처 등록 모달 열기
+  const openCustomerRegister = async () => {
+    setCustomerForm({});
+    setFormErrors({});
+    setCustomerEditMode(false);
+    setCustomerModalTab("basic");
+    setModalContacts([]);
+    setModalDeliveries([]);
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setTaxTypeRows([]);
+    setCustomerModalOpen(true);
+    // 거래처 코드 자동 채번 — 기존 데이터 max값 기반
+    try {
+      const ruleRes = await apiClient.get(`/numbering-rules/by-column/${CUSTOMER_TABLE}/customer_code`);
+      const ruleData = ruleRes.data;
+      if (ruleData?.success && ruleData?.data?.ruleId) {
+        const ruleId = ruleData.data.ruleId;
+        // 기존 데이터에서 CUST-XXX 패턴의 최대 순번 조회
+        const allRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+          page: 1, size: 500, autoFilter: true,
+          sort: { columnName: "customer_code", order: "desc" },
+        });
+        const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+        let maxSeq = 0;
+        for (const row of allRows) {
+          const code = row.customer_code || "";
+          const match = code.match(/(\d+)$/);
+          if (match) {
+            const seq = parseInt(match[1], 10);
+            if (seq > maxSeq) maxSeq = seq;
+          }
+        }
+        // preview로 접두어 패턴 가져오기
+        const previewRes = await previewNumberingCode(ruleId);
+        if (previewRes.success && previewRes.data?.generatedCode) {
+          const previewCode = previewRes.data.generatedCode;
+          const prefix = previewCode.replace(/\d+$/, "");
+          const seqLength = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
+          const nextSeq = maxSeq + 1;
+          const nextCode = prefix + String(nextSeq).padStart(seqLength, "0");
+          setCustomerForm((prev) => ({ ...prev, customer_code: nextCode, _numberingRuleId: ruleId }));
+        }
+      }
+    } catch { /* skip */ }
+  };
+
+  const openCustomerEdit = () => {
+    if (!selectedCustomer) return;
+    const rawData = rawCustomers.find((c) => c.id === selectedCustomerId);
+    setCustomerForm({ ...(rawData || selectedCustomer) });
+    setFormErrors({});
+    setCustomerEditMode(true);
+    setCustomerModalTab("basic");
+    setModalContactFormOpen(false);
+    setModalDeliveryFormOpen(false);
+    setModalContactForm({});
+    setModalDeliveryForm({});
+    setModalContactEditId(null);
+    setModalDeliveryEditId(null);
+    // 수정 모드에서는 바로 조회
+    const code = (rawData || selectedCustomer).customer_code;
+    const id = (rawData || selectedCustomer).id;
+    if (id) {
+      fetchModalContacts(id);
+      // 세금유형 로드
+      apiClient.post(`/table-management/tables/customer_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: id }] },
+        autoFilter: true,
+      }).then((res: any) => {
+        const rows = res.data?.data?.data || res.data?.data?.rows || [];
+        setTaxTypeRows(rows.map((r: any) => ({ _id: r.id, tax_type_name: r.tax_type_name || "", rate: String(r.rate || "") })));
+      }).catch(() => setTaxTypeRows([]));
+    }
+    if (code) fetchModalDeliveries(code);
+    setCustomerModalOpen(true);
+  };
+
+  // 폼 필드 변경 시 자동 포맷팅 + 실시간 검증
+  const handleFormChange = (field: string, value: string) => {
+    const formatted = formatField(field, value);
+    setCustomerForm((prev) => ({ ...prev, [field]: formatted }));
+    const error = validateField(field, formatted);
+    setFormErrors((prev) => {
+      const next = { ...prev };
+      if (error) next[field] = error; else delete next[field];
+      return next;
+    });
+  };
+
+  // 세금유형/담당자/납품처를 한번에 저장하는 헬퍼
+  const saveSubTables = async (customerId: string, customerCode: string) => {
+    // 세금유형 — 기존 삭제 후 재생성
+    try {
+      const existTax = await apiClient.post(`/table-management/tables/customer_tax_type/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      const existRows = existTax.data?.data?.data || existTax.data?.data?.rows || [];
+      if (existRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/customer_tax_type/delete`, {
+          data: existRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+      for (const t of taxTypeRows.filter((r) => r.tax_type_name)) {
+        await apiClient.post(`/table-management/tables/customer_tax_type/add`, {
+          id: crypto.randomUUID(), customer_id: customerId,
+          tax_type_name: t.tax_type_name, tax_type_id: t.tax_type_name,
+          rate: t.rate ? Number(t.rate) : 0,
+        });
+      }
+    } catch { /* skip */ }
+
+    // 담당자 — 기존 삭제 후 전체 재생성
+    try {
+      const existContacts = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
+        autoFilter: true,
+      });
+      const existCRows = existContacts.data?.data?.data || existContacts.data?.data?.rows || [];
+      if (existCRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${CONTACT_TABLE}/delete`, {
+          data: existCRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const c of modalContacts) {
+      try {
+        await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/add`, {
+          id: crypto.randomUUID(), customer_id: customerId,
+          contact_name: c.contact_name || "", contact_phone: c.contact_phone || "",
+          contact_email: c.contact_email || "", department: c.department || "",
+          is_main: c.is_main || "N", memo: c.memo || "",
+        });
+      } catch { /* skip */ }
+    }
+
+    // 납품처 — 기존 삭제 후 전체 재생성
+    try {
+      const existDeliveries = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
+        autoFilter: true,
+      });
+      const existDRows = existDeliveries.data?.data?.data || existDeliveries.data?.data?.rows || [];
+      if (existDRows.length > 0) {
+        await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
+          data: existDRows.map((r: any) => ({ id: r.id })),
+        });
+      }
+    } catch { /* skip */ }
+    for (const d of modalDeliveries) {
+      try {
+        await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
+          id: crypto.randomUUID(), customer_code: customerCode,
+          destination_code: d.destination_code || "", destination_name: d.destination_name || "",
+          address: d.address || "", manager_name: d.manager_name || "",
+          phone: d.phone || "", memo: d.memo || "", is_default: d.is_default || "N",
+        });
+      } catch { /* skip */ }
+    }
+  };
+
+  const handleCustomerSave = async () => {
+    if (!customerForm.customer_name) { toast.error("거래처명은 필수입니다."); return; }
+    if (!customerForm.status) { toast.error("상태는 필수입니다."); return; }
+    const errors = validateForm(customerForm, ["contact_phone", "email", "business_number"]);
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) {
+      toast.error("입력 형식을 확인해주세요.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id, created_date, updated_date, writer, company_code, _numberingRuleId, ...fields } = customerForm;
+      const cleanFields: Record<string, any> = {};
+      for (const [key, value] of Object.entries(fields)) {
+        cleanFields[key] = value === "" ? null : value;
+      }
+
+      if (customerEditMode && id) {
+        // 수정
+        await apiClient.put(`/table-management/tables/${CUSTOMER_TABLE}/edit`, {
+          originalData: { id }, updatedData: cleanFields,
+        });
+        await saveSubTables(id, cleanFields.customer_code || customerForm.customer_code);
+        toast.success("저장되었습니다.");
+      } else {
+        // 신규 등록
+        await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/add`, cleanFields);
+        // id 획득
+        const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+          page: 1, size: 1,
+          dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: cleanFields.customer_code }] },
+          autoFilter: true,
+        });
+        const newRow = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+        if (newRow?.id) {
+          await saveSubTables(newRow.id, cleanFields.customer_code);
+        }
+        toast.success("거래처가 등록되었습니다.");
+      }
+
+      fetchCustomers();
+      fetchMainContacts();
+      if (!customerEditMode && continuousInput) {
+        // 연속입력 — 폼 초기화하고 모달 유지
+        setCustomerForm({});
+        setModalContacts([]);
+        setModalDeliveries([]);
+        setTaxTypeRows([]);
+        setCustomerModalTab("basic");
+        // 새 코드 채번
+        try {
+          const ruleRes = await apiClient.get(`/numbering-rules/by-column/${CUSTOMER_TABLE}/customer_code`);
+          const ruleData = ruleRes.data;
+          if (ruleData?.success && ruleData?.data?.ruleId) {
+            const ruleId = ruleData.data.ruleId;
+            const allRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, { page: 1, size: 500, autoFilter: true, sort: { columnName: "customer_code", order: "desc" } });
+            const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
+            let maxSeq = 0;
+            for (const row of allRows) { const match = (row.customer_code || "").match(/(\d+)$/); if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; } }
+            const previewRes = await previewNumberingCode(ruleId);
+            if (previewRes.success && previewRes.data?.generatedCode) {
+              const prefix = previewRes.data.generatedCode.replace(/\d+$/, "");
+              const seqLen = (previewRes.data.generatedCode.match(/(\d+)$/) || ["", "001"])[1].length;
+              setCustomerForm({ customer_code: prefix + String(maxSeq + 1).padStart(seqLen, "0") });
+            }
+          }
+        } catch { /* skip */ }
+        toast.success("등록 완료. 다음 거래처를 입력하세요.");
+      } else {
+        setCustomerModalOpen(false);
+        // 우측 패널 갱신
+        if (selectedCustomerId) {
+          const cid = selectedCustomerId;
+          setSelectedCustomerId(null);
+          setTimeout(() => setSelectedCustomerId(cid), 50);
+        }
+      }
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 거래처 삭제
+  const handleCustomerDelete = async () => {
+    if (!selectedCustomerId) return;
+    const ok = await confirm("거래처를 삭제하시겠습니까?", {
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      await apiClient.delete(`/table-management/tables/${CUSTOMER_TABLE}/delete`, {
+        data: [{ id: selectedCustomerId }],
+      });
+      toast.success("삭제되었습니다.");
+      setSelectedCustomerId(null);
+      fetchCustomers();
+    } catch { toast.error("삭제에 실패했습니다."); }
+  };
+
+  // 품목 검색
+  const searchItems = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [
+        { columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" },
+      ];
+      if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 500,
+        dataFilter: { enabled: true, filters },
+        autoFilter: true,
+      });
+      const allItems = res.data?.data?.data || res.data?.data?.rows || [];
+      setItemTotalCount(allItems.length);
+      const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
+      const seenNumbers = new Set<string>();
+      const deduped = allItems.filter((item: any) => {
+        if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
+        if (item.item_number && seenNumbers.has(item.item_number)) return false;
+        if (item.item_number) seenNumbers.add(item.item_number);
+        return true;
+      });
+      setItemSearchResults(deduped);
+    } catch { /* skip */ } finally { setItemSearchLoading(false); }
+  };
+
+  // 품목 선택 완료 → 상세 입력 모달로 전환
+  const goToItemDetail = () => {
+    const selected = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
+    if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
+    setSelectedItemsForDetail(selected);
+    const mappings: typeof itemMappings = {};
+    const prices: typeof itemPrices = {};
+    for (const item of selected) {
+      const key = item.item_number || item.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: item.standard_price || item.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: item.standard_price || item.selling_price || "",
+      }];
+    }
+    setItemMappings(mappings);
+    setItemPrices(prices);
+    setItemSelectOpen(false);
+    setItemDetailOpen(true);
+  };
+
+  // 거래처 품번/품명 행 추가
+  const addMappingRow = (itemKey: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, customer_item_code: "", customer_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (itemKey: string, rowId: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const handleMappingDragEnd = (itemKey: string, event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setItemMappings((prev) => {
+      const arr = [...(prev[itemKey] || [])];
+      const oldIdx = arr.findIndex((r) => r._id === active.id);
+      const newIdx = arr.findIndex((r) => r._id === over.id);
+      return { ...prev, [itemKey]: arrayMove(arr, oldIdx, newIdx) };
+    });
+  };
+
+  const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemMappings((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  // 단가 행 추가
+  const addPriceRow = (itemKey: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: [...(prev[itemKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (itemKey: string, rowId: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
+    setItemPrices((prev) => ({
+      ...prev,
+      [itemKey]: (prev[itemKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1; // "10원" → 10, "100원" → 100
+          if (roundLabel === "반올림") {
+            calc = Math.round(calc / unit) * unit;
+          } else if (roundLabel === "절삭") {
+            calc = Math.floor(calc / unit) * unit;
+          } else if (roundLabel === "올림") {
+            calc = Math.ceil(calc / unit) * unit;
+          }
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  // 품목 편집 열기
+  const openEditItem = async (row: any) => {
+    const itemKey = row.item_number || row.item_id;
+    let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/item_info/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "equals", value: itemKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) itemInfo = found;
+    } catch { /* skip */ }
+
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: selectedCustomer!.customer_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.customer_item_code || m.customer_item_name)
+        .map((m: any) => ({
+          _id: `m_existing_${m.id}`,
+          customer_item_code: m.customer_item_code || "",
+          customer_item_name: m.customer_item_name || "",
+        }));
+    } catch { /* skip */ }
+
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: selectedCustomer!.customer_code },
+          { columnName: "item_id", operator: "equals", value: itemKey },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`,
+        start_date: p.start_date ? String(p.start_date).split("T")[0] : "",
+        end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
+        base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "",
+        discount_type: p.discount_type || "",
+        discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "",
+        rounding_unit_value: p.rounding_unit_value || "",
+        calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+
+    if (priceRows.length === 0) {
+      priceRows.push({
+        _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "",
+      });
+    }
+
+    setSelectedItemsForDetail([itemInfo]);
+    setItemMappings({ [itemKey]: mappingRows });
+    setItemPrices({ [itemKey]: priceRows });
+    setEditItemData(row);
+    setItemDetailOpen(true);
+  };
+
+  const handleItemDetailSave = async () => {
+    if (!selectedCustomer) return;
+    if (savingRef.current) return;
+    savingRef.current = true;
+    const isEditingExisting = !!editItemData;
+    setSaving(true);
+    try {
+      for (const item of selectedItemsForDetail) {
+        const itemKey = item.item_number || item.id;
+        const mappingRows = itemMappings[itemKey] || [];
+
+        if (isEditingExisting && editItemData?.id) {
+          // 기존 매핑 조회
+          let existingMaps: any[] = [];
+          try {
+            const existingMappings = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingMaps = existingMappings.data?.data?.data || existingMappings.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 매핑 upsert: 기존 것은 update, 새 것은 insert, 남은 것은 delete
+          const usedExistingIds = new Set<string>();
+          let firstMappingId: string | null = editItemData.id;
+          for (let mi = 0; mi < mappingRows.length; mi++) {
+            const existMap = existingMaps[mi];
+            if (existMap) {
+              // update
+              await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+                originalData: { id: existMap.id },
+                updatedData: {
+                  customer_item_code: mappingRows[mi].customer_item_code || "",
+                  customer_item_name: mappingRows[mi].customer_item_name || "",
+                },
+              });
+              usedExistingIds.add(existMap.id);
+              if (mi === 0) firstMappingId = existMap.id;
+            } else {
+              // insert
+              const mRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+                id: crypto.randomUUID(),
+                customer_id: selectedCustomer.customer_code, item_id: itemKey,
+                customer_item_code: mappingRows[mi].customer_item_code || "",
+                customer_item_name: mappingRows[mi].customer_item_name || "",
+              });
+              if (mi === 0 && !firstMappingId) firstMappingId = mRes.data?.data?.id || null;
+            }
+          }
+          // 초과분 delete
+          const toDeleteMaps = existingMaps.filter((m) => !usedExistingIds.has(m.id));
+          if (toDeleteMaps.length > 0) {
+            await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+              data: toDeleteMaps.map((m: any) => ({ id: m.id })),
+            });
+          }
+
+          // 기존 단가 조회
+          let existingPriceRows: any[] = [];
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            existingPriceRows = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+          } catch { /* skip */ }
+
+          // 단가 upsert
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          const usedPriceIds = new Set<string>();
+          for (let pi = 0; pi < priceRows.length; pi++) {
+            const price = priceRows[pi];
+            const priceData = {
+              mapping_id: firstMappingId || editItemData.id,
+              customer_id: selectedCustomer.customer_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            };
+            const existPrice = existingPriceRows[pi];
+            if (existPrice) {
+              await apiClient.put(`/table-management/tables/${PRICE_TABLE}/edit`, {
+                originalData: { id: existPrice.id },
+                updatedData: priceData,
+              });
+              usedPriceIds.add(existPrice.id);
+            } else {
+              await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+                id: crypto.randomUUID(), ...priceData,
+              });
+            }
+          }
+          // 초과분 delete
+          const toDeletePrices = existingPriceRows.filter((p) => !usedPriceIds.has(p.id));
+          if (toDeletePrices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: toDeletePrices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } else {
+          if (!mappingRows.length || !mappingRows[0]?.customer_item_code) {
+            const existingCheck = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+              page: 1, size: 1,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]}, autoFilter: true,
+            });
+            if ((existingCheck.data?.data?.data || existingCheck.data?.data?.rows || []).length > 0) {
+              toast.warning(`${item.item_name || itemKey} 품목은 이미 등록되어 있습니다.`);
+              continue;
+            }
+          }
+
+          let mappingId: string | null = null;
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            customer_id: selectedCustomer.customer_code, item_id: itemKey,
+            customer_item_code: mappingRows[0]?.customer_item_code || "",
+            customer_item_name: mappingRows[0]?.customer_item_name || "",
+          });
+          mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              customer_id: selectedCustomer.customer_code, item_id: itemKey,
+              customer_item_code: mappingRows[mi].customer_item_code || "",
+              customer_item_name: mappingRows[mi].customer_item_name || "",
+            });
+          }
+
+          const priceRows = (itemPrices[itemKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", customer_id: selectedCustomer.customer_code, item_id: itemKey,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedItemsForDetail.length}개 품목이 추가되었습니다.`);
+      setItemDetailOpen(false);
+      setEditItemData(null);
+      setItemCheckedIds(new Set());
+      const cid = selectedCustomerId;
+      setSelectedCustomerId(null);
+      setTimeout(() => setSelectedCustomerId(cid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+      savingRef.current = false;
+    }
+  };
+
+  // 품목 매핑 삭제
+  const handlePriceItemDelete = async () => {
+    if (priceCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${priceCheckedIds.length}개 품목 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      for (const mappingId of priceCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: priceCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${priceCheckedIds.length}개 품목 매핑이 삭제되었습니다.`);
+      setPriceCheckedIds([]);
+      const cid = selectedCustomerId;
+      setSelectedCustomerId(null);
+      setTimeout(() => setSelectedCustomerId(cid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // EDataTable 컬럼 정의 (거래처 목록) — ts.visibleColumns 순서를 따름
+  const customerColumns: EDataTableColumn[] = useMemo(() => {
+    const colProps: Record<string, Partial<EDataTableColumn>> = {
+      customer_code: { width: "w-[120px]" },
+      customer_name: { minWidth: "min-w-[140px]" },
+      division: {
+        width: "w-[80px]",
+        render: (val: any) =>
+          val ? (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
+              {val}
+            </Badge>
+          ) : null,
+      },
+      contact_person: { width: "w-[80px]" },
+      contact_phone: { width: "w-[120px]" },
+      email: { width: "w-[160px]" },
+      business_number: { width: "w-[120px]" },
+      address: { minWidth: "min-w-[150px]" },
+      status: {
+        width: "w-[70px]",
+        render: (val: any) =>
+          val ? (
+            <Badge
+              variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
+              className="text-[10px] px-1.5 py-0 h-5"
+            >
+              {val}
+            </Badge>
+          ) : null,
+      },
+    };
+    return ts.visibleColumns.map((col) => ({
+      key: col.key,
+      label: col.label,
+      ...colProps[col.key],
+    }));
+  }, [ts.visibleColumns]);
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (customers.length === 0) return;
+    toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
+    try {
+      const allMappings: any[] = [];
+      const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+        page: 1, size: 5000, autoFilter: true,
+      });
+      const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
+      let itemMap: Record<string, any> = {};
+      if (itemIds.length > 0) {
+        try {
+          const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
+            page: 1, size: itemIds.length + 10,
+            dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
+            autoFilter: true,
+          });
+          for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
+            itemMap[item.item_number] = item;
+          }
+        } catch { /* skip */ }
+      }
+      for (const m of mappings) {
+        const itemInfo = itemMap[m.item_id] || {};
+        allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
+      }
+
+      const rows: Record<string, any>[] = [];
+      for (const c of customers) {
+        const custMappings = allMappings.filter((m) => m.customer_id === c.customer_code);
+        if (custMappings.length === 0) {
+          rows.push({
+            거래처코드: c.customer_code, 거래처명: c.customer_name,
+            거래유형: getCategoryLabel("division", c.division),
+            담당자: c.contact_person, 전화번호: c.contact_phone,
+            사업자번호: c.business_number, 이메일: c.email,
+            상태: getCategoryLabel("status", c.status),
+            품목코드: "", 품명: "", 규격: "",
+            거래처품번: "", 거래처품명: "",
+            기준가: "", 할인유형: "", 할인값: "", 단가: "", 통화: "",
+          });
+        } else {
+          for (const m of custMappings) {
+            rows.push({
+              거래처코드: c.customer_code, 거래처명: c.customer_name,
+              거래유형: getCategoryLabel("division", c.division),
+              담당자: c.contact_person, 전화번호: c.contact_phone,
+              사업자번호: c.business_number, 이메일: c.email,
+              상태: getCategoryLabel("status", c.status),
+              품목코드: m.item_id || "", 품명: m.item_name || "", 규격: m.item_spec || "",
+              거래처품번: m.customer_item_code || "", 거래처품명: m.customer_item_name || "",
+              기준가: m.base_price || "", 할인유형: m.discount_type || "", 할인값: m.discount_value || "",
+              단가: m.calculated_price || "", 통화: m.currency_code || "",
+            });
+          }
+        }
+      }
+      await exportToExcel(rows, "거래처관리.xlsx", "거래처+품목");
+      toast.dismiss("excel-dl");
+      toast.success(`${rows.length}행 다운로드 완료`);
+    } catch (err) {
+      toast.dismiss("excel-dl");
+      toast.error("다운로드에 실패했습니다.");
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={CUSTOMER_TABLE}
+        filterId="c16-customer"
+        onFilterChange={setSearchFilters}
+        dataCount={customers.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button
+            variant="outline" size="sm" className="h-8" disabled={excelDetecting}
+            onClick={async () => {
+              setExcelDetecting(true);
+              try {
+                const result = await autoDetectMultiTableConfig(CUSTOMER_TABLE);
+                if (result.success && result.data) {
+                  setExcelChainConfig(result.data);
+                  setExcelUploadOpen(true);
+                } else {
+                  toast.error(result.message || "테이블 구조 분석 실패");
+                }
+              } catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
+            }}
+          >
+            {excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />}
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 거래처 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">거래처 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {customerCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <label className="flex items-center gap-1.5 cursor-pointer mr-1">
+                    <input type="checkbox" checked={showInactive} onChange={(e) => setShowInactive(e.target.checked)} className="rounded" />
+                    <span className="text-[11px] text-muted-foreground">거래정지 포함</span>
+                  </label>
+                  <Button size="sm" onClick={openCustomerRegister}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 등록
+                  </Button>
+                  <Button variant="outline" size="sm" disabled={!selectedCustomerId} onClick={openCustomerEdit}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="destructive" size="sm" disabled={!selectedCustomerId} onClick={handleCustomerDelete}>
+                    <Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={customerColumns}
+                data={ts.groupData(showInactive ? customers : customers.filter((c) => c.status !== "거래정지"))}
+                rowKey={(row) => row.id}
+                loading={customerLoading}
+                emptyMessage="등록된 거래처가 없어요"
+                selectedId={selectedCustomerId}
+                onSelect={(id) => setSelectedCustomerId(id)}
+                onRowDoubleClick={(row) => { setSelectedCustomerId(row.id); openCustomerEdit(); }}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-customer"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedCustomerId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">거래처를 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 거래처를 선택하면 상세 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 탭 + 버튼 통합 헤더 */}
+                  <Tabs
+                    value={rightTab}
+                    onValueChange={(v) => setRightTab(v as "items" | "delivery")}
+                    className="flex flex-col flex-1 overflow-hidden gap-0"
+                  >
+                    <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                      <TabsList className="bg-transparent h-auto p-0 rounded-none">
+                        <TabsTrigger
+                          value="items"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <Package className="w-3.5 h-3.5" /> 거래처별 품목정보
+                          {Object.keys(priceGroups).length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{Object.keys(priceGroups).length}</Badge>
+                          )}
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="delivery"
+                          className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
+                        >
+                          <MapPin className="w-3.5 h-3.5" /> 납품처 정보
+                          {deliveryItems.length > 0 && (
+                            <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{deliveryItems.length}</Badge>
+                          )}
+                        </TabsTrigger>
+                      </TabsList>
+                      <div className="flex gap-1.5">
+                        {rightTab === "items" ? (
+                          <>
+                            <Button size="sm" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
+                              <Plus className="w-3.5 h-3.5" /> 품목 추가
+                            </Button>
+                            <Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0} onClick={handlePriceItemDelete}>
+                              <Trash2 className="w-3.5 h-3.5" /> 삭제
+                            </Button>
+                          </>
+                        ) : (
+                          <Button size="sm" variant="outline" onClick={openCustomerEdit}>
+                            <Pencil className="w-3.5 h-3.5 mr-1" /> 거래처 수정에서 관리
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 품목정보 탭 */}
+                    <TabsContent value="items" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[40px] text-center px-2">
+                                <input
+                                  type="checkbox"
+                                  className="rounded"
+                                  checked={priceItems.length > 0 && priceCheckedIds.length === priceItems.length}
+                                  onChange={(e) => setPriceCheckedIds(e.target.checked ? priceItems.map((p) => p.id) : [])}
+                                />
+                              </TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                              <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품번</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품명</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                              <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
+                              <TableHead className="w-[60px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
+                              <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                              <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {priceLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.keys(priceGroups).length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 품목이 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : Object.entries(priceGroups).map(([itemKey, group]) => {
+                              const isExpanded = expandedItems.has(itemKey);
+                              const m = group.master;
+                              const isChecked = priceCheckedIds.includes(m.id);
+                              return (
+                                <React.Fragment key={itemKey}>
+                                  {/* 마스터 행 */}
+                                  <TableRow
+                                    className={cn(
+                                      "cursor-pointer border-l-[3px] border-l-transparent h-[41px]",
+                                      isChecked && "bg-primary/5 border-l-primary"
+                                    )}
+                                    onClick={() => {
+                                      setExpandedItems((prev) => {
+                                        const next = new Set(prev);
+                                        if (next.has(itemKey)) next.delete(itemKey); else next.add(itemKey);
+                                        return next;
+                                      });
+                                    }}
+                                    onDoubleClick={() => openEditItem(m)}
+                                  >
+                                    <TableCell
+                                      className="text-center px-2"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        setPriceCheckedIds((prev) =>
+                                          prev.includes(m.id) ? prev.filter((id) => id !== m.id) : [...prev, m.id]
+                                        );
+                                      }}
+                                    >
+                                      <input type="checkbox" className="rounded" checked={isChecked} readOnly />
+                                    </TableCell>
+                                    <TableCell className="text-[13px] font-mono">
+                                      <div className="flex items-center gap-1">
+                                        {isExpanded
+                                          ? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                          : <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                        }
+                                        {m.item_number}
+                                      </div>
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.customer_item_code}</TableCell>
+                                    <TableCell className="text-[13px]">{m.customer_item_name}</TableCell>
+                                    <TableCell className="text-[13px]">{m.base_price_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">
+                                      {m.base_price ? Number(m.base_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.discount_type}</TableCell>
+                                    <TableCell className="text-[13px] text-right">{m.discount_value ? Number(m.discount_value).toLocaleString() : ""}</TableCell>
+                                    <TableCell className="text-[13px] text-right font-semibold">
+                                      {m.calculated_price ? Number(m.calculated_price).toLocaleString() : ""}
+                                    </TableCell>
+                                    <TableCell className="text-[13px]">{m.currency_code}</TableCell>
+                                  </TableRow>
+
+                                  {/* 현재 단가 카드 (펼쳤을 때) */}
+                                  {isExpanded && (() => {
+                                    const cp = group.details.find((p) => p.is_current) || group.details[0];
+                                    if (!cp) return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="py-3 px-4 text-xs text-muted-foreground">등록된 단가가 없어요</TableCell>
+                                      </TableRow>
+                                    );
+                                    return (
+                                      <TableRow className="border-l-[3px] border-l-primary/30">
+                                        <TableCell colSpan={11} className="px-4 py-3">
+                                          <div className="border border-primary/20 rounded-lg bg-card overflow-hidden">
+                                            {/* 카드 헤더 */}
+                                            <div className="flex items-center justify-between px-4 py-2 bg-primary/[0.04] border-b border-primary/10">
+                                              <div className="flex items-center gap-2">
+                                                <Coins className="w-3.5 h-3.5 text-primary" />
+                                                <span className="text-xs font-semibold">적용 단가</span>
+                                                <Badge variant="secondary" className="text-[9px] px-1.5 py-0 bg-primary/10 text-primary">현재</Badge>
+                                              </div>
+                                              {group.details.length > 1 && (
+                                                <span className="text-[10px] text-muted-foreground">전체 {group.details.length}건 중</span>
+                                              )}
+                                            </div>
+                                            {/* 카드 내용 */}
+                                            <div className="px-5 py-3.5 flex items-end gap-0 text-[13px]">
+                                              <div className="flex flex-col pr-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기간</span>
+                                                <span className="font-mono text-muted-foreground text-xs">
+                                                  {cp.start_date ? String(cp.start_date).split("T")[0] : "—"} ~ {cp.end_date ? String(cp.end_date).split("T")[0] : "—"}
+                                                </span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준유형</span>
+                                                <span>{cp.base_price_type_label || "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준가</span>
+                                                <span className="font-mono font-medium">{cp.base_price ? Number(cp.base_price).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인유형</span>
+                                                <span>{cp.discount_type_label && cp.discount_type_label !== "할인없음" ? cp.discount_type_label : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5 border-r border-border/30">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인값</span>
+                                                <span className="font-mono">{cp.discount_value ? Number(cp.discount_value).toLocaleString() : "-"}</span>
+                                              </div>
+                                              <div className="flex flex-col px-5">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">단수처리</span>
+                                                <span>
+                                                  {cp.rounding_unit_value
+                                                    ? (priceCategoryOptions["rounding_unit_value"]?.find((o) => o.code === cp.rounding_unit_value)?.label || cp.rounding_unit_value)
+                                                    : "-"}
+                                                </span>
+                                              </div>
+                                              <span className="text-primary/50 px-4 pb-0.5 text-lg">→</span>
+                                              <div className="flex flex-col pl-1">
+                                                <span className="text-[10px] text-muted-foreground/50 font-medium mb-1">계산단가</span>
+                                                <span className="text-base font-bold font-mono text-foreground">
+                                                  {(cp.calculated_price || cp.unit_price) ? Number(cp.calculated_price || cp.unit_price).toLocaleString() : "-"}
+                                                  <span className="text-xs font-normal text-muted-foreground ml-1.5">{cp.currency_label}</span>
+                                                </span>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })()}
+                                </React.Fragment>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+
+                    {/* 납품처 탭 */}
+                    <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+                      <div className="flex-1 min-h-0 overflow-auto pt-px">
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                              <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                              <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                              <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                              <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                              <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                              <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {deliveryLoading ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8">
+                                  <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.length === 0 ? (
+                              <TableRow>
+                                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
+                                  등록된 납품처가 없어요
+                                </TableCell>
+                              </TableRow>
+                            ) : deliveryItems.map((d) => (
+                              <TableRow key={d.id} className="h-[41px]">
+                                <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                                <TableCell className="text-sm">{d.destination_name}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                                <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                                <TableCell className="text-[13px]">{d.phone}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                                <TableCell className="text-center">
+                                  {d.is_default && (
+                                    <Badge variant="default" className="text-[10px] px-1.5 py-0 h-5">메인</Badge>
+                                  )}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 모달: 거래처 등록/수정 (3탭) ── */}
+      <Dialog open={customerModalOpen} onOpenChange={(open) => {
+        if (!open && isConfirmOpenRef.current) return;
+        setCustomerModalOpen(open);
+        if (!open) {
+          setModalContactFormOpen(false);
+          setModalDeliveryFormOpen(false);
+          setModalContactForm({});
+          setModalDeliveryForm({});
+          setModalContactEditId(null);
+          setModalDeliveryEditId(null);
+          fetchCustomers();
+          if (customerForm.customer_code) {
+            const cid = selectedCustomerId;
+            setSelectedCustomerId(null);
+            setTimeout(() => setSelectedCustomerId(cid), 50);
+          }
+        }
+      }}>
+        <DialogContent className="max-w-4xl h-[85vh] flex flex-col overflow-hidden p-0">
+          <DialogHeader className="px-6 pt-5 pb-0 shrink-0">
+            <DialogTitle>{customerEditMode ? "거래처 수정" : "거래처 등록"}</DialogTitle>
+            <DialogDescription>
+              {customerEditMode ? "거래처 정보를 수정합니다." : "새로운 거래처를 등록합니다."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <Tabs value={customerModalTab} onValueChange={(v: any) => setCustomerModalTab(v)} className="flex flex-col flex-1 overflow-hidden">
+            <div className="shrink-0">
+              <TabsList className="bg-transparent w-full h-auto p-0 rounded-none gap-0">
+                <TabsTrigger value="basic" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  기본정보
+                </TabsTrigger>
+                <TabsTrigger value="contacts" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  담당자 관리
+                  {modalContacts.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalContacts.length}</span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="delivery" className="flex-1 rounded-none py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
+                  납품처 관리
+                  {modalDeliveries.length > 0 && (
+                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalDeliveries.length}</span>
+                  )}
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            {/* 기본정보 탭 */}
+            <TabsContent value="basic" className="flex-1 overflow-y-auto mt-0">
+              <div className="px-6 py-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처 코드</Label>
+                    <Input
+                      value={customerForm.customer_code || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, customer_code: e.target.value }))}
+                      placeholder={customerEditMode ? "" : "자동 생성"}
+                      className={cn("h-9 font-mono", !customerEditMode && customerForm.customer_code && "bg-muted")}
+                      readOnly={!customerEditMode && !!customerForm.customer_code}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처명 <span className="text-destructive">*</span></Label>
+                    <Input
+                      value={customerForm.customer_name || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, customer_name: e.target.value }))}
+                      placeholder="거래처명"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래 유형</Label>
+                    <Select
+                      value={customerForm.division || "__none__"}
+                      onValueChange={(v) => setCustomerForm((p) => ({ ...p, division: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="거래 유형" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["division"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
+                    <Select
+                      value={customerForm.status || "__none__"}
+                      onValueChange={(v) => setCustomerForm((p) => ({ ...p, status: v === "__none__" ? "" : v }))}
+                    >
+                      <SelectTrigger className="h-9"><SelectValue placeholder="상태" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">선택 안 함</SelectItem>
+                        {(categoryOptions["status"] || []).map((o) => (
+                          <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">거래처담당자</Label>
+                    <Input
+                      value={customerForm.contact_person || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, contact_person: e.target.value }))}
+                      placeholder="거래처담당자"
+                      className="h-9"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">전화번호</Label>
+                    <Input
+                      value={customerForm.contact_phone || ""}
+                      onChange={(e) => handleFormChange("contact_phone", e.target.value)}
+                      placeholder="010-0000-0000"
+                      className={cn("h-9", formErrors.contact_phone && "border-destructive")}
+                    />
+                    {formErrors.contact_phone && <p className="text-xs text-destructive">{formErrors.contact_phone}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">이메일</Label>
+                    <Input
+                      value={customerForm.email || ""}
+                      onChange={(e) => handleFormChange("email", e.target.value)}
+                      placeholder="example@email.com"
+                      className={cn("h-9", formErrors.email && "border-destructive")}
+                    />
+                    {formErrors.email && <p className="text-xs text-destructive">{formErrors.email}</p>}
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-sm">사업자번호</Label>
+                    <Input
+                      value={customerForm.business_number || ""}
+                      onChange={(e) => handleFormChange("business_number", e.target.value)}
+                      placeholder="000-00-00000"
+                      className={cn("h-9", formErrors.business_number && "border-destructive")}
+                    />
+                    {formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
+                  </div>
+                  <div className="space-y-1.5 col-span-2">
+                    <Label className="text-sm">주소</Label>
+                    <Input
+                      value={customerForm.address || ""}
+                      onChange={(e) => setCustomerForm((p) => ({ ...p, address: e.target.value }))}
+                      placeholder="주소"
+                      className="h-9"
+                    />
+                  </div>
+                </div>
+
+                {/* 세금유형 */}
+                <div className="mt-4 pt-4 border-t">
+                  <div className="flex items-center justify-between mb-2">
+                    <Label className="text-sm font-semibold flex items-center gap-1.5">
+                      <Coins className="w-3.5 h-3.5 text-primary" /> 세금유형
+                    </Label>
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => {
+                      setTaxTypeRows((prev) => [...prev, { _id: `tax_${Date.now()}_${Math.random()}`, tax_type_name: "", rate: "" }]);
+                    }}>
+                      <Plus className="h-3 w-3 mr-1" /> 추가
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    {taxTypeRows.map((row, idx) => (
+                      <div key={row._id} className="flex gap-2 items-center">
+                        <span className="text-xs text-muted-foreground w-4 shrink-0">{idx + 1}</span>
+                        <Select value={row.tax_type_name} onValueChange={(v) => {
+                          setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, tax_type_name: v } : r));
+                        }}>
+                          <SelectTrigger className="h-9 text-[13px] flex-1"><SelectValue placeholder="세금유형 선택" /></SelectTrigger>
+                          <SelectContent>
+                            {taxTypeOptions.map((o) => (
+                              <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <Input
+                          value={row.rate}
+                          onChange={(e) => {
+                            const v = e.target.value.replace(/[^\d.]/g, "");
+                            setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, rate: v } : r));
+                          }}
+                          placeholder="세율 %"
+                          className="h-9 text-[13px] w-[80px] text-right"
+                        />
+                        <span className="text-xs text-muted-foreground">%</span>
+                        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                          onClick={() => setTaxTypeRows((prev) => prev.filter((r) => r._id !== row._id))}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* 담당자 관리 탭 */}
+            <TabsContent value="contacts" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 담당자 목록 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    담당자 {modalContacts.length}명
+                  </span>
+                  <Button size="sm" onClick={() => {
+                    setModalContactForm({});
+                    setModalContactEditId(null);
+                    setModalContactFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 담당자 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalContactLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalContacts.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <Users className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 담당자가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자명</TableHead>
+                          <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부서</TableHead>
+                          <TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalContacts].sort((a, b) => {
+                          const aMain = a.is_main === "Y" || a.is_main === true ? 0 : 1;
+                          const bMain = b.is_main === "Y" || b.is_main === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((c) => (
+                          <TableRow key={c._localId || c.id} className="h-[41px]">
+                            <TableCell className="text-sm font-medium">{c.contact_name}</TableCell>
+                            <TableCell className="text-[13px]">{c.contact_phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.contact_email}</TableCell>
+                            <TableCell className="text-[13px]">{c.department}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (c.is_main === "Y" || c.is_main === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = c.is_main === "Y" || c.is_main === true;
+                                  if (isCurrentMain) {
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id) ? { ...item, is_main: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== (c._localId || c.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalContacts((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (c._localId || c.id)
+                                        ? { ...item, is_main: "Y" }
+                                        : { ...item, is_main: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(c.is_main === "Y" || c.is_main === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{c.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalContactForm({ ...c });
+                                    setModalContactEditId(c._localId || c.id);
+                                    setModalContactFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalContactDelete(c._localId || c.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 담당자 폼 (인라인) */}
+                {modalContactFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalContactEditId ? "담당자 수정" : "담당자 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalContactForm.contact_name || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_name: e.target.value }))}
+                          placeholder="담당자명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalContactForm.contact_phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalContactForm((p) => ({ ...p, contact_phone: formatted }));
+                          }}
+                          placeholder="010-0000-0000"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">이메일</Label>
+                        <Input
+                          value={modalContactForm.contact_email || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, contact_email: e.target.value }))}
+                          placeholder="example@email.com"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">부서</Label>
+                        <Input
+                          value={modalContactForm.department || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, department: e.target.value }))}
+                          placeholder="부서명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalContactForm.memo || ""}
+                          onChange={(e) => setModalContactForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalContactForm.is_main === "Y" || modalContactForm.is_main === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== modalContactEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalContacts((prev) => prev.map((item) => ({ ...item, is_main: "N" })));
+                                }
+                                setModalContactForm((p) => ({ ...p, is_main: "Y" }));
+                              } else {
+                                setModalContactForm((p) => ({ ...p, is_main: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 담당자</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalContactFormOpen(false); setModalContactForm({}); setModalContactEditId(null); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalContactSave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalContactEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            {/* ── 탭3: 납품처 관리 ── */}
+            <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
+              <div className="flex-1 overflow-hidden flex flex-col">
+                {/* 납품처 목록 헤더 */}
+                <div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
+                  <span className="text-xs text-muted-foreground font-medium">
+                    납품처 {modalDeliveries.length}개
+                  </span>
+                  <Button size="sm" onClick={async () => {
+                    const code = await generateDeliveryCode();
+                    setModalDeliveryForm({ destination_code: code });
+                    setModalDeliveryEditId(null);
+                    setModalDeliveryFormErrors({});
+                    setModalDeliveryFormOpen(true);
+                  }}>
+                    <Plus className="w-3.5 h-3.5 mr-1" /> 납품처 추가
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-auto">
+                  {modalDeliveryLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : modalDeliveries.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                      <MapPin className="w-8 h-8 mb-2 opacity-30" />
+                      <span className="text-sm">등록된 납품처가 없어요</span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader className="sticky top-0 z-10">
+                        <TableRow className="bg-muted hover:bg-muted h-10">
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
+                          <TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처명</TableHead>
+                          <TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">주소</TableHead>
+                          <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
+                          <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
+                          <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
+                          <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
+                          <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {[...modalDeliveries].sort((a, b) => {
+                          const aMain = a.is_default === "Y" || a.is_default === true ? 0 : 1;
+                          const bMain = b.is_default === "Y" || b.is_default === true ? 0 : 1;
+                          return aMain - bMain;
+                        }).map((d) => (
+                          <TableRow key={d._localId || d.id || d.destination_code} className="h-[41px]">
+                            <TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
+                            <TableCell className="text-sm">{d.destination_name}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
+                            <TableCell className="text-[13px]">{d.manager_name}</TableCell>
+                            <TableCell className="text-[13px]">{d.phone}</TableCell>
+                            <TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
+                            <TableCell className="text-center">
+                              <button
+                                className={cn(
+                                  "inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
+                                  (d.is_default === "Y" || d.is_default === true)
+                                    ? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
+                                    : "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
+                                )}
+                                onClick={async () => {
+                                  const isCurrentMain = d.is_default === "Y" || d.is_default === true;
+                                  if (isCurrentMain) {
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id) ? { ...item, is_default: "N" } : item
+                                    ));
+                                  } else {
+                                    const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== (d._localId || d.id));
+                                    if (existingMain) {
+                                      const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                      if (!ok) return;
+                                    }
+                                    setModalDeliveries((prev) => prev.map((item) =>
+                                      (item._localId || item.id) === (d._localId || d.id)
+                                        ? { ...item, is_default: "Y" }
+                                        : { ...item, is_default: "N" }
+                                    ));
+                                  }
+                                }}
+                              >
+                                {(d.is_default === "Y" || d.is_default === true) ? "★ 메인" : "메인"}
+                              </button>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0"
+                                  onClick={() => {
+                                    setModalDeliveryForm({ ...d });
+                                    setModalDeliveryEditId(d._localId || d.id);
+                                    setModalDeliveryFormErrors({});
+                                    setModalDeliveryFormOpen(true);
+                                  }}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                                <Button
+                                  variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
+                                  onClick={() => handleModalDeliveryDelete(d._localId || d.id)}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+
+                {/* 납품처 폼 (인라인) */}
+                {modalDeliveryFormOpen && (
+                  <div className="border-t bg-card px-6 py-4 shrink-0">
+                    <div className="text-sm font-semibold mb-3">{modalDeliveryEditId ? "납품처 수정" : "납품처 추가"}</div>
+                    <div className="grid grid-cols-3 gap-3">
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처코드</Label>
+                        <Input
+                          value={modalDeliveryForm.destination_code || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
+                          placeholder="자동 생성"
+                          className={cn("h-8 text-sm font-mono", modalDeliveryForm.destination_code && "bg-muted")}
+                          readOnly={!!modalDeliveryForm.destination_code && !modalDeliveryEditId}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">납품처명 <span className="text-destructive">*</span></Label>
+                        <Input
+                          value={modalDeliveryForm.destination_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
+                          placeholder="납품처명"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">담당자</Label>
+                        <Input
+                          value={modalDeliveryForm.manager_name || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
+                          placeholder="담당자"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5 col-span-2">
+                        <Label className="text-xs">주소</Label>
+                        <Input
+                          value={modalDeliveryForm.address || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, address: e.target.value }))}
+                          placeholder="주소"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">전화번호</Label>
+                        <Input
+                          value={modalDeliveryForm.phone || ""}
+                          onChange={(e) => {
+                            const formatted = formatField("phone", e.target.value);
+                            setModalDeliveryForm((p) => ({ ...p, phone: formatted }));
+                            const err = validateField("phone", formatted);
+                            setModalDeliveryFormErrors((p) => {
+                              const n = { ...p };
+                              if (err) n.phone = err; else delete n.phone;
+                              return n;
+                            });
+                          }}
+                          placeholder="010-0000-0000"
+                          className={cn("h-8 text-sm", modalDeliveryFormErrors.phone && "border-destructive")}
+                        />
+                        {modalDeliveryFormErrors.phone && <p className="text-xs text-destructive">{modalDeliveryFormErrors.phone}</p>}
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-xs">메모</Label>
+                        <Input
+                          value={modalDeliveryForm.memo || ""}
+                          onChange={(e) => setModalDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
+                          placeholder="메모"
+                          className="h-8 text-sm"
+                        />
+                      </div>
+                      <div className="flex flex-col justify-end">
+                        <label className="flex items-center gap-2 cursor-pointer h-8">
+                          <input
+                            type="checkbox"
+                            checked={modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true}
+                            onChange={async (e) => {
+                              const checked = e.target.checked;
+                              if (checked) {
+                                const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== modalDeliveryEditId);
+                                if (existingMain) {
+                                  const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
+                                  if (!ok) return;
+                                  setModalDeliveries((prev) => prev.map((item) => ({ ...item, is_default: "N" })));
+                                }
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "Y" }));
+                              } else {
+                                setModalDeliveryForm((p) => ({ ...p, is_default: "N" }));
+                              }
+                            }}
+                            className="rounded"
+                          />
+                          <span className="text-sm">메인 납품처로 설정</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2 mt-3">
+                      <Button
+                        variant="outline" size="sm"
+                        onClick={() => { setModalDeliveryFormOpen(false); setModalDeliveryForm({}); setModalDeliveryEditId(null); setModalDeliveryFormErrors({}); }}
+                      >
+                        취소
+                      </Button>
+                      <Button size="sm" onClick={() => handleModalDeliverySave()}>
+                        <Plus className="w-3.5 h-3.5 mr-1" />
+                        {modalDeliveryEditId ? "수정" : "추가"}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+          <div className="border-t px-6 py-3 flex items-center gap-2 shrink-0">
+            {!customerEditMode && (
+              <label className="flex items-center gap-2 cursor-pointer mr-auto">
+                <input type="checkbox" checked={continuousInput} onChange={(e) => setContinuousInput(e.target.checked)} className="rounded" />
+                <span className="text-sm font-medium">연속입력</span>
+              </label>
+            )}
+            <Button variant="outline" onClick={() => setCustomerModalOpen(false)}>닫기</Button>
+            <Button onClick={handleCustomerSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              {customerEditMode ? "저장" : "등록"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 선택 (1단계) ── */}
+      <Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>품목 선택</DialogTitle>
+            <DialogDescription>거래처에 추가할 품목을 선택하세요. (전체: {itemTotalCount}건 / 대상: {itemSearchResults.length}건{itemCheckedIds.size > 0 ? ` / 선택: ${itemCheckedIds.size}건` : ""})</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 mb-3">
+            <Input
+              placeholder="품명/품목코드 검색"
+              value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItems()}
+              className="h-9 flex-1"
+            />
+            <Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
+              {itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
+            </Button>
+          </div>
+          <div className="overflow-auto max-h-[350px] border rounded-lg">
+            <Table noWrapper>
+              <TableHeader className="sticky top-0 z-10">
+                <TableRow className="bg-muted hover:bg-muted h-10">
+                  <TableHead className="w-[40px] text-center px-2">
+                    <input
+                      type="checkbox"
+                      className="rounded"
+                      checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
+                      onChange={(e) => {
+                        if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
+                        else setItemCheckedIds(new Set());
+                      }}
+                    />
+                  </TableHead>
+                  <TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
+                  <TableHead className="min-w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                  <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
+                  <TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {itemSearchResults.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
+                      검색 결과가 없어요
+                    </TableCell>
+                  </TableRow>
+                ) : itemSearchResults.map((item) => (
+                  <TableRow
+                    key={item.id}
+                    className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
+                    onClick={() => setItemCheckedIds((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
+                      return next;
+                    })}
+                  >
+                    <TableCell className="text-center px-2">
+                      <input type="checkbox" className="rounded" checked={itemCheckedIds.has(item.id)} readOnly />
+                    </TableCell>
+                    <TableCell className="text-[13px] font-mono">
+                      <span className="block truncate" title={item.item_number}>{item.item_number}</span>
+                    </TableCell>
+                    <TableCell className="text-sm">{item.item_name}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.size}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.material}</TableCell>
+                    <TableCell className="text-[13px] text-muted-foreground">{item.unit}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <DialogFooter className="flex items-center justify-between w-full">
+            <span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
+              <Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
+                <Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 모달: 품목 상세 입력 (2단계) ── */}
+      <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
+        <DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>
+              품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedCustomer?.customer_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editItemData
+                ? "거래처 품번/품명과 기간별 단가를 수정합니다."
+                : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6 py-2 flex-1 overflow-y-auto">
+            {selectedItemsForDetail.map((item, idx) => {
+              const itemKey = item.item_number || item.id;
+              const mappingRows = itemMappings[itemKey] || [];
+              const prices = itemPrices[itemKey] || [];
+
+              return (
+                <div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
+                  {/* 품목 헤더 */}
+                  <div className="px-5 py-3 bg-muted/30 border-b">
+                    <div className="font-bold">{idx + 1}. {item.item_name || itemKey}</div>
+                    <div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {item.unit || ""}</div>
+                  </div>
+
+                  <div className="flex gap-4 p-5 items-stretch">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Tag className="w-3.5 h-3.5 text-primary" /> 거래처 품번/품명 관리
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 품번 추가
+                        </Button>
+                      </div>
+                      <div className="border-2 border-foreground/20 rounded-lg bg-background p-3 space-y-2 min-h-[200px] max-h-[350px] overflow-y-auto flex-1">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : (
+                          <DndContext
+                            sensors={dndSensors}
+                            collisionDetection={closestCenter}
+                            onDragEnd={(e) => handleMappingDragEnd(itemKey, e)}
+                          >
+                            <SortableContext items={mappingRows.map((r) => r._id)} strategy={verticalListSortingStrategy}>
+                              {mappingRows.map((mRow, mIdx) => (
+                                <SortableMappingRow key={mRow._id} id={mRow._id}>
+                                  <span className="text-xs text-muted-foreground/50 font-mono w-4 shrink-0 text-center">{mIdx + 1}</span>
+                                  <Input
+                                    value={mRow.customer_item_code}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_code", e.target.value)}
+                                    placeholder="거래처 품번"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Input
+                                    value={mRow.customer_item_name}
+                                    onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_name", e.target.value)}
+                                    placeholder="거래처 품명"
+                                    className="h-9 text-[13px] flex-1"
+                                  />
+                                  <Button
+                                    variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
+                                    onClick={() => removeMappingRow(itemKey, mRow._id)}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                </SortableMappingRow>
+                              ))}
+                            </SortableContext>
+                          </DndContext>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
+                      <div className="flex items-center justify-between mb-3 shrink-0">
+                        <span className="text-sm font-semibold flex items-center gap-1.5">
+                          <Coins className="w-3.5 h-3.5 text-primary" /> 기간별 단가 설정
+                        </span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
+                          <Plus className="h-3 w-3 mr-1" /> 단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3 flex-1 overflow-y-auto max-h-[350px]">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border-2 border-foreground/20 rounded-lg bg-background overflow-hidden">
+                            <div
+                              className="flex items-center justify-between px-4 py-2.5 cursor-pointer hover:bg-muted/50 transition-colors"
+                              onClick={() => setCollapsedPriceCards((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(price._id)) next.delete(price._id); else next.add(price._id);
+                                return next;
+                              })}
+                            >
+                              <div className="flex items-center gap-2">
+                                {collapsedPriceCards.has(price._id)
+                                  ? <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                                  : <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                                }
+                                <span className="text-[13px] font-semibold text-muted-foreground">단가 {pIdx + 1}</span>
+                                {collapsedPriceCards.has(price._id) && price.calculated_price && (
+                                  <span className="text-xs text-muted-foreground ml-2">
+                                    {price.start_date || "—"} ~ {price.end_date || "—"} · <span className="font-mono font-bold text-foreground">{Number(price.calculated_price).toLocaleString()}</span> {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                  </span>
+                                )}
+                              </div>
+                              <div className="flex items-center gap-1">
+                                {prices.length > 1 && (
+                                  <Button
+                                    variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
+                                    onClick={(e) => { e.stopPropagation(); removePriceRow(itemKey, price._id); }}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                )}
+                              </div>
+                            </div>
+                            {!collapsedPriceCards.has(price._id) && <div className="px-4 pb-4 space-y-2.5">
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">시작일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.start_date}
+                                  onChange={(e) => {
+                                    const v = e.target.value;
+                                    updatePriceRow(itemKey, price._id, "start_date", v);
+                                    if (price.end_date && v > price.end_date) {
+                                      updatePriceRow(itemKey, price._id, "end_date", v);
+                                    }
+                                  }}
+                                  max={price.end_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <span className="text-xs text-muted-foreground mt-4">~</span>
+                              <div className="flex-1">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">종료일</Label>
+                                <Input
+                                  type="date"
+                                  value={price.end_date}
+                                  onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
+                                  min={price.start_date || undefined}
+                                  className="h-9 text-[13px] w-full"
+                                />
+                              </div>
+                              <div className="w-[80px]">
+                                <Label className="text-[11px] text-muted-foreground mb-1 block">&nbsp;</Label>
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="통화" /></SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "base_price", raw);
+                                }}
+                                className="h-9 text-[13px] text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(itemKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-9 text-[13px] text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-1.5 pt-2 border-t">
+                              <span className="text-[13px] text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-base font-mono">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                              {price.calculated_price && price.currency_code && (
+                                <span className="text-[13px] text-muted-foreground">
+                                  {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
+                                </span>
+                              )}
+                            </div>
+                            </div>}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setItemDetailOpen(false);
+                if (!editItemData) setItemSelectOpen(true);
+                setEditItemData(null);
+              }}
+            >
+              {editItemData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleItemDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
+              품목 추가 완료
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 (멀티테이블) */}
+      {excelChainConfig && (
+        <MultiTableExcelUploadModal
+          open={excelUploadOpen}
+          onOpenChange={(open) => {
+            setExcelUploadOpen(open);
+            if (!open) setExcelChainConfig(null);
+          }}
+          config={excelChainConfig}
+          onSuccess={() => {
+            fetchCustomers();
+            const cid = selectedCustomerId;
+            setSelectedCustomerId(null);
+            setTimeout(() => setSelectedCustomerId(cid), 50);
+          }}
+        />
+      )}
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/sales/quote/page.tsx b/frontend/app/(main)/COMPANY_9/sales/quote/page.tsx
new file mode 100644
index 00000000..18e106c9
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/sales/quote/page.tsx
@@ -0,0 +1,995 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, FileText,
+} from "lucide-react";
+import { apiClient } from "@/lib/api/client";
+import { reportApi } from "@/lib/api/reportApi";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import {
+  ResizablePanelGroup, ResizablePanel, ResizableHandle,
+} from "@/components/ui/resizable";
+import { ReportInlineViewer } from "@/components/report/ReportInlineViewer";
+import { ReportMaster, ComponentConfig } from "@/types/report";
+
+const MASTER_TABLE = "quote_mng";
+
+const fmt = (val: string) => {
+  const num = val.replace(/[^\d.-]/g, "");
+  if (!num) return "";
+  const parts = num.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+const pn = (val: string) => val.replace(/,/g, "");
+
+const GRID_COLUMNS: DataGridColumn[] = [
+  { key: "quote_no", label: "견적번호", width: "w-[120px]" },
+  { key: "customer_name", label: "거래처명", width: "w-[150px]" },
+  { key: "quote_date", label: "견적일자", width: "w-[110px]" },
+  { key: "valid_until", label: "유효기한", width: "w-[110px]" },
+  { key: "total_amount", label: "견적금액", width: "w-[120px]", formatNumber: true, align: "right" },
+  { key: "status_label", label: "상태", width: "w-[90px]" },
+  { key: "manager", label: "담당자", width: "w-[100px]" },
+  { key: "domestic_type", label: "국내/국외", width: "w-[90px]" },
+];
+
+const STATUS_MAP: Record<string, string> = {
+  draft: "작성중", pending: "검토중", approved: "승인", rejected: "반려", converted: "수주전환",
+};
+
+const EMPTY_ITEM = {
+  item_code: "", item_name: "", spec: "", qty: "1", unit: "EA",
+  request_length: "", unit_price: "0", supply_amount: "0", vat_amount: "0", total_amount: "0", notes: "",
+};
+
+export default function QuoteManagementPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent } = useConfirmDialog();
+
+  const [quotes, setQuotes] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+  const [checkedIds, setCheckedIds] = useState<string[]>([]);
+  const [selectedRow, setSelectedRow] = useState<any | null>(null);
+
+  // 컴포넌트 클릭 편집 모달
+  const [editComp, setEditComp] = useState<ComponentConfig | null>(null);
+  const [editValues, setEditValues] = useState<Record<string, string>>({});
+  const [items, setItems] = useState<(typeof EMPTY_ITEM)[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  // 기본정보 모달
+  const [basicInfoOpen, setBasicInfoOpen] = useState(false);
+  const [basicForm, setBasicForm] = useState({ quote_date: "", valid_until: "", status: "draft" });
+
+  // 엑셀 / 리포트
+  const [excelOpen, setExcelOpen] = useState(false);
+  const [reportList, setReportList] = useState<ReportMaster[]>([]);
+  const [selectedReportId, setSelectedReportId] = useState<string | null>(null);
+  const [reportKey, setReportKey] = useState(0);
+
+  // 품목 검색
+  const [itemSearchOpen, setItemSearchOpen] = useState(false);
+  const [itemSearchKeyword, setItemSearchKeyword] = useState("");
+  const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
+  const [itemSearchLoading, setItemSearchLoading] = useState(false);
+  const [itemSelectedMap, setItemSelectedMap] = useState<Map<string, any>>(new Map());
+
+  // 거래처 검색
+  const [custSearchOpen, setCustSearchOpen] = useState(false);
+  const [custSearchKeyword, setCustSearchKeyword] = useState("");
+  const [custSearchResults, setCustSearchResults] = useState<any[]>([]);
+  const [custSearchLoading, setCustSearchLoading] = useState(false);
+
+  // 사원(담당자) 검색
+  const [userSearchOpen, setUserSearchOpen] = useState(false);
+  const [userSearchKeyword, setUserSearchKeyword] = useState("");
+  const [userSearchResults, setUserSearchResults] = useState<any[]>([]);
+  const [userSearchLoading, setUserSearchLoading] = useState(false);
+
+  // ── 데이터 로드 ──
+
+  const mapRow = (r: any) => ({
+    ...r, id: String(r.objid), status_label: STATUS_MAP[r.status] ?? r.status, total_amount: Number(r.total_amount || 0),
+  });
+
+  const fetchQuotes = useCallback(async () => {
+    if (!user) return;
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      searchFilters.forEach((f) => { if (f.value) params[f.columnName] = f.value; });
+      const res = await apiClient.get("/quotes/list", { params });
+      const mapped = (res.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+    } catch { toast.error("견적 목록 조회 실패"); }
+    finally { setLoading(false); }
+  }, [user, searchFilters]);
+
+  useEffect(() => { fetchQuotes(); }, [fetchQuotes]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await reportApi.getReports({ page: 1, limit: 100 });
+        if (res.success) {
+          const items = res.data.items ?? [];
+          setReportList(items);
+          if (items.length > 0 && !selectedReportId) setSelectedReportId(items[0].report_id);
+        }
+      } catch { /* 무시 */ }
+    })();
+  }, []);
+
+  // ── "신규" → DB에 draft 즉시 생성 → 자동 선택 ──
+
+  const handleCreate = async () => {
+    try {
+      const numRes = await apiClient.get("/quotes/generate-number");
+      const quoteNo = numRes.data?.data?.quoteNo ?? "";
+      const createRes = await apiClient.post("/quotes", {
+        quote_no: quoteNo,
+        quote_date: new Date().toISOString().split("T")[0],
+        status: "draft",
+        customer_name: "",
+        items: [],
+      });
+      toast.success("신규 견적이 생성되었습니다. 우측 양식에서 각 영역을 클릭하여 입력하세요.");
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+
+      const newObjid = createRes.data?.data?.objid;
+      const newRow = newObjid ? mapped.find((r: any) => r.objid === newObjid) : mapped[0];
+      if (newRow) setSelectedRow(newRow);
+    } catch { toast.error("견적 생성 실패"); }
+  };
+
+  // ── 삭제 ──
+
+  const handleDelete = async () => {
+    if (checkedIds.length === 0) { toast.info("삭제할 견적을 선택하세요."); return; }
+    const ok = await confirm(`${checkedIds.length}건의 견적을 삭제하시겠습니까?`, { variant: "destructive", confirmText: "삭제" });
+    if (!ok) return;
+    try {
+      for (const id of checkedIds) await apiClient.delete(`/quotes/${id}`);
+      toast.success("삭제 완료");
+      setCheckedIds([]);
+      setSelectedRow(null);
+      fetchQuotes();
+    } catch { toast.error("삭제 실패"); }
+  };
+
+  // ── 컴포넌트 클릭 → 편집 모달 ──
+
+  const handleComponentClick = async (comp: ComponentConfig) => {
+    if (!selectedRow) return;
+    setEditComp(comp);
+
+    if (comp.type === "table") {
+      // 테이블 → 품목 편집
+      try {
+        const res = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const d = res.data?.data;
+        setItems(
+          (d?.items || []).length > 0
+            ? d.items.map((it: any) => ({
+                item_code: it.item_code || "", item_name: it.item_name || "", spec: it.spec || "",
+                qty: String(it.qty ?? 1), unit: it.unit || "EA",
+                request_length: it.request_length ? String(it.request_length) : "",
+                unit_price: String(it.unit_price ?? 0), supply_amount: String(it.supply_amount ?? 0),
+                vat_amount: String(it.vat_amount ?? 0), total_amount: String(it.total_amount ?? 0),
+                notes: it.notes || "",
+              }))
+            : [{ ...EMPTY_ITEM }],
+        );
+      } catch { setItems([{ ...EMPTY_ITEM }]); }
+    } else if (comp.type === "card") {
+      const cardItems = (comp as any).cardItems ?? [];
+      // 우측 카드 (회사정보 + 담당자) → 담당자 선택
+      const hasCompanyField = cardItems.some((ci: any) =>
+        ["company_name_self", "ceo_self", "biz_no_self", "address_self"].includes(ci.fieldName || "")
+      );
+      if (hasCompanyField) {
+        setUserSearchKeyword("");
+        setUserSearchResults([]);
+        setUserSearchOpen(true);
+        searchUsers();
+        return;
+      }
+      // 좌측 카드 (거래처) → 거래처 검색
+      const hasCustomerField = cardItems.some((ci: any) =>
+        ["customer_name", "customer_ceo", "customer_biz_no"].includes(ci.fieldName || "")
+      );
+      if (hasCustomerField) {
+        setCustSearchKeyword("");
+        setCustSearchResults([]);
+        setCustSearchOpen(true);
+        searchCustomers();
+        return;
+      }
+      // 기타 카드
+      const vals: Record<string, string> = {};
+      cardItems.forEach((ci: any) => {
+        if (ci.fieldName) vals[ci.fieldName] = selectedRow[ci.fieldName] ?? ci.value ?? "";
+      });
+      setEditValues(vals);
+    } else if (comp.type === "text" || comp.type === "label") {
+      // 텍스트 → 기본정보 모달 하나로 통합
+      const basicFields = ["quote_no", "quote_date", "valid_until", "status"];
+      if (comp.fieldName && basicFields.includes(comp.fieldName)) {
+        // 기본정보 모달
+        const detail = await apiClient.get(`/quotes/${selectedRow.objid}`).then(r => r.data?.data).catch(() => null);
+        setBasicForm({
+          quote_date: detail?.quote_date || "",
+          valid_until: detail?.valid_until || "",
+          status: detail?.status || "draft",
+        });
+        setBasicInfoOpen(true);
+        setEditComp(null);
+        return;
+      }
+      // 기타 텍스트 (제목 등)
+      toast.info("이 영역은 리포트 디자이너에서 수정하세요.");
+      setEditComp(null);
+      return;
+    } else if (comp.type === "calculation") {
+      // 계산은 읽기 전용 안내
+      toast.info("계산 컴포넌트는 품목 데이터에서 자동 계산됩니다.");
+      setEditComp(null);
+    } else if (comp.type === "signature" || comp.type === "stamp") {
+      toast.info("서명/도장은 리포트 디자이너에서 설정하세요.");
+      setEditComp(null);
+    } else {
+      setEditValues({});
+    }
+  };
+
+  // ── 컴포넌트 편집 저장 ──
+
+  const handleEditSave = async () => {
+    if (!selectedRow || !editComp) return;
+    setSaving(true);
+    try {
+      if (editComp.type === "table") {
+        // 품목 저장 — 기존 견적 데이터 불러와서 품목만 교체
+        const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const existing = detailRes.data?.data ?? {};
+        const payload = {
+          ...existing,
+          items: items.filter((it) => it.item_name).map((it) => ({
+            item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+            qty: Number(pn(it.qty)) || 0, unit: it.unit,
+            request_length: it.request_length ? Number(it.request_length) : null,
+            unit_price: Number(pn(it.unit_price)) || 0,
+            supply_amount: Number(pn(it.supply_amount)) || 0,
+            vat_amount: Number(pn(it.vat_amount)) || 0,
+            total_amount: Number(pn(it.total_amount)) || 0,
+            notes: it.notes,
+          })),
+        };
+        await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      } else {
+        // 텍스트/카드 → 해당 필드만 업데이트
+        const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+        const existing = detailRes.data?.data ?? {};
+        const payload = { ...existing, ...editValues };
+        // items는 기존 유지
+        payload.items = (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0),
+          notes: it.notes,
+        }));
+        await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      }
+
+      toast.success("저장되었습니다.");
+      setEditComp(null);
+
+      // 목록 + 리포트 갱신
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 거래처 검색 ──
+
+  const searchCustomers = async () => {
+    setCustSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (custSearchKeyword) {
+        filters.push({ columnName: "customer_name", operator: "contains", value: custSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/customer_mng/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setCustSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("거래처 조회 실패"); }
+    finally { setCustSearchLoading(false); }
+  };
+
+  const selectCustomer = async (cust: any) => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        customer_objid: cust.objid || null,
+        customer_name: cust.customer_name || "",
+        customer_ceo: cust.contact_person || "",
+        customer_biz_no: cust.business_number || "",
+        customer_address: cust.address || "",
+        customer_contact: cust.contact_person || "",
+        customer_phone: cust.contact_phone || "",
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success(`${payload.customer_name} 거래처 적용 완료`);
+      setCustSearchOpen(false);
+      setEditComp(null);
+
+      // 목록 + 리포트 갱신
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 기본정보 저장 ──
+
+  const handleBasicInfoSave = async () => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        quote_date: basicForm.quote_date,
+        valid_until: basicForm.valid_until,
+        status: basicForm.status,
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success("기본정보 저장 완료");
+      setBasicInfoOpen(false);
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 사원(담당자) 검색 ──
+
+  const searchUsers = async () => {
+    setUserSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (userSearchKeyword) {
+        filters.push({ columnName: "user_name", operator: "contains", value: userSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/user_info/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setUserSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("사원 조회 실패"); }
+    finally { setUserSearchLoading(false); }
+  };
+
+  const selectUser = async (usr: any) => {
+    if (!selectedRow) return;
+    setSaving(true);
+    try {
+      const detailRes = await apiClient.get(`/quotes/${selectedRow.objid}`);
+      const existing = detailRes.data?.data ?? {};
+      const payload = {
+        ...existing,
+        manager: usr.user_name || "",
+        items: (existing.items || []).map((it: any) => ({
+          item_code: it.item_code, item_name: it.item_name, spec: it.spec,
+          qty: Number(it.qty ?? 0), unit: it.unit,
+          request_length: it.request_length || null,
+          unit_price: Number(it.unit_price ?? 0),
+          supply_amount: Number(it.supply_amount ?? 0),
+          vat_amount: Number(it.vat_amount ?? 0),
+          total_amount: Number(it.total_amount ?? 0), notes: it.notes,
+        })),
+      };
+      await apiClient.put(`/quotes/${selectedRow.objid}`, payload);
+      toast.success(`담당자: ${payload.manager} 적용`);
+      setUserSearchOpen(false);
+      setEditComp(null);
+
+      const listRes = await apiClient.get("/quotes/list");
+      const mapped = (listRes.data?.data ?? []).map(mapRow);
+      setQuotes(mapped);
+      setTotalCount(mapped.length);
+      const updated = mapped.find((r: any) => r.objid === selectedRow.objid);
+      if (updated) setSelectedRow(updated);
+      setReportKey((k) => k + 1);
+    } catch { toast.error("저장 실패"); }
+    finally { setSaving(false); }
+  };
+
+  // ── 품목 검색 ──
+
+  const searchItemInfo = async () => {
+    setItemSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (itemSearchKeyword) {
+        filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
+      }
+      const res = await apiClient.post("/table-management/tables/item_info/data", {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const resData = res.data?.data;
+      setItemSearchResults(resData?.data || resData?.rows || []);
+    } catch { toast.error("품목 조회 실패"); }
+    finally { setItemSearchLoading(false); }
+  };
+
+  const toggleItemSelect = (row: any) => {
+    const key = row.item_number || row.objid || row.id;
+    setItemSelectedMap((prev) => {
+      const next = new Map(prev);
+      if (next.has(key)) next.delete(key); else next.set(key, row);
+      return next;
+    });
+  };
+
+  const addSelectedItemsToQuote = () => {
+    const selected = Array.from(itemSelectedMap.values());
+    if (selected.length === 0) { toast.info("품목을 선택하세요."); return; }
+    const newItems = selected.map((item) => calcItem({
+      item_code: item.item_number || item.item_code || "",
+      item_name: item.item_name || "",
+      spec: item.spec || item.standard || "",
+      qty: "1",
+      unit: item.unit || "EA",
+      request_length: "",
+      unit_price: String(item.selling_price || item.standard_price || 0),
+      supply_amount: "0",
+      vat_amount: "0",
+      total_amount: "0",
+      notes: "",
+    }));
+    setItems((prev) => [...prev, ...newItems]);
+    setItemSearchOpen(false);
+    setItemSelectedMap(new Map());
+    setItemSearchKeyword("");
+    toast.success(`${selected.length}건 품목 추가`);
+  };
+
+  // ── 품목 계산 ──
+
+  const calcItem = (item: typeof EMPTY_ITEM) => {
+    const qty = Number(pn(item.qty)) || 0;
+    const price = Number(pn(item.unit_price)) || 0;
+    const supply = qty * price;
+    const vat = Math.round(supply * 0.1);
+    return { ...item, supply_amount: String(supply), vat_amount: String(vat), total_amount: String(supply + vat) };
+  };
+  const updateItem = (idx: number, field: string, value: string) => {
+    setItems((prev) => {
+      const next = [...prev];
+      next[idx] = { ...next[idx], [field]: value };
+      if (field === "qty" || field === "unit_price") next[idx] = calcItem(next[idx]);
+      return next;
+    });
+  };
+  const addItem = () => setItems((prev) => [...prev, { ...EMPTY_ITEM }]);
+  const removeItem = (idx: number) => setItems((prev) => prev.filter((_, i) => i !== idx));
+  const totalSupply = items.reduce((s, it) => s + (Number(pn(it.supply_amount)) || 0), 0);
+  const totalVat = items.reduce((s, it) => s + (Number(pn(it.vat_amount)) || 0), 0);
+  const totalAmount = totalSupply + totalVat;
+
+  // ── 행 클릭 ──
+
+  const handleRowClick = (row: any) => setSelectedRow(row);
+
+  const contextParams = selectedRow
+    ? { "$1": selectedRow.objid, "$2": user?.companyCode || "COMPANY_7", objid: selectedRow.objid, quote_no: selectedRow.quote_no, customer_name: selectedRow.customer_name, quote_date: selectedRow.quote_date }
+    : undefined;
+
+  // ── 편집 모달 제목/타입 판별 ──
+
+  const getModalTitle = () => {
+    if (!editComp) return "";
+    if (editComp.type === "table") return "견적 품목";
+    if (editComp.type === "card") {
+      const items = (editComp as any).cardItems ?? [];
+      const title = (editComp as any).headerText || (editComp as any).title || "";
+      if (title) return title;
+      if (items.length > 0) return items[0].label ?? "카드 정보";
+      return "카드 정보";
+    }
+    if (editComp.type === "text" || editComp.type === "label") {
+      if (editComp.fieldName) return editComp.fieldName;
+      return "텍스트 편집";
+    }
+    return editComp.type;
+  };
+
+  // ── JSX ──
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      <DynamicSearchFilter tableName={MASTER_TABLE} filterId="quote-mng-filter"
+        onFilterChange={(filters) => setSearchFilters(filters)} dataCount={totalCount} />
+
+      <ResizablePanelGroup direction="horizontal" className="flex-1 overflow-hidden rounded-lg border">
+        {/* 좌측: 견적 목록 */}
+        <ResizablePanel defaultSize={55} minSize={35}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center justify-between border-b bg-white px-3 py-2">
+              <span className="text-sm font-semibold text-gray-700">
+                견적 목록 <span className="text-gray-400">{totalCount}건</span>
+              </span>
+              <div className="flex items-center gap-1.5">
+                <Button variant="outline" size="sm" className="gap-1 text-xs" onClick={() => setExcelOpen(true)}>
+                  <FileSpreadsheet className="h-3.5 w-3.5" /> 업로드
+                </Button>
+                <Button variant="outline" size="sm" className="gap-1 text-xs"
+                  onClick={() => quotes.length > 0 ? exportToExcel(quotes, "견적목록.xlsx", "견적목록") : toast.info("데이터 없음")}>
+                  <Download className="h-3.5 w-3.5" /> 다운로드
+                </Button>
+                <Button size="sm" className="gap-1 text-xs" onClick={handleCreate}>
+                  <Plus className="h-3.5 w-3.5" /> 신규
+                </Button>
+                <Button variant="destructive" size="sm" className="gap-1 text-xs" onClick={handleDelete}>
+                  <Trash2 className="h-3.5 w-3.5" /> 삭제
+                </Button>
+              </div>
+            </div>
+            <div className="flex-1 overflow-hidden">
+              <DataGrid gridId="quote-mng" columns={GRID_COLUMNS} data={quotes} showCheckbox tableName={MASTER_TABLE}
+                checkedIds={checkedIds} onCheckedChange={setCheckedIds}
+                onRowClick={handleRowClick} selectedId={selectedRow?.objid ? String(selectedRow.objid) : null} />
+            </div>
+          </div>
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 우측: 리포트 뷰어 — 컴포넌트 클릭 가능 */}
+        <ResizablePanel defaultSize={45} minSize={25}>
+          <div className="flex h-full flex-col">
+            <div className="flex items-center gap-2 border-b bg-white px-3 py-2">
+              <FileText className="h-4 w-4 text-gray-500" />
+              <span className="text-sm font-semibold text-gray-700">견적서</span>
+              <Select value={selectedReportId ?? ""} onValueChange={(v) => setSelectedReportId(v || null)}>
+                <SelectTrigger className="ml-auto h-7 w-[180px] text-xs">
+                  <SelectValue placeholder="리포트 양식 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {reportList.map((r) => (
+                    <SelectItem key={r.report_id} value={r.report_id} className="text-xs">
+                      {r.report_name_kor || r.report_name_eng || r.report_id}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex-1 overflow-hidden">
+              {!selectedRow ? (
+                <div className="flex h-full items-center justify-center text-center text-gray-400">
+                  <div>
+                    <FileText className="mx-auto mb-3 h-12 w-12 opacity-30" />
+                    <p className="text-sm font-medium">견적을 선택해주세요</p>
+                    <p className="mt-1 text-xs text-gray-300">&quot;신규&quot; 버튼으로 생성하거나 좌측에서 선택하세요.</p>
+                  </div>
+                </div>
+              ) : !selectedReportId ? (
+                <div className="flex h-full items-center justify-center text-center text-gray-400">
+                  <div>
+                    <FileText className="mx-auto mb-3 h-12 w-12 opacity-30" />
+                    <p className="text-sm font-medium">리포트 양식을 선택해주세요</p>
+                  </div>
+                </div>
+              ) : (
+                <ReportInlineViewer
+                  key={reportKey}
+                  reportId={selectedReportId}
+                  contextParams={contextParams}
+                  onComponentClick={handleComponentClick}
+                />
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* ═══ 컴포넌트 클릭 편집 모달 (동적) ═══ */}
+
+      {/* 텍스트/카드 편집 모달 */}
+      <Dialog open={!!editComp && editComp.type !== "table"} onOpenChange={(o) => !o && setEditComp(null)}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{getModalTitle()}</DialogTitle>
+            <DialogDescription>값을 수정한 후 저장 버튼을 누르세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-3">
+            {Object.entries(editValues).map(([key, val]) => (
+              <div key={key}>
+                <Label className="text-xs">{key}</Label>
+                {val.length > 60 ? (
+                  <Textarea className="mt-1" rows={3} value={val}
+                    onChange={(e) => setEditValues((p) => ({ ...p, [key]: e.target.value }))} />
+                ) : (
+                  <Input className="mt-1" value={val}
+                    onChange={(e) => setEditValues((p) => ({ ...p, [key]: e.target.value }))} />
+                )}
+              </div>
+            ))}
+            {Object.keys(editValues).length === 0 && (
+              <p className="text-sm text-gray-400">이 컴포넌트에 편집 가능한 필드가 없습니다.</p>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditComp(null)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving || Object.keys(editValues).length === 0} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블(품목) 편집 모달 */}
+      <Dialog open={!!editComp && editComp.type === "table"} onOpenChange={(o) => { if (!o && itemSearchOpen) return; if (!o) setEditComp(null); }}>
+        <DialogContent className="flex max-h-[80vh] max-w-4xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>견적 품목</DialogTitle>
+            <DialogDescription>품목을 추가/수정합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-auto">
+            <div className="mb-3 flex gap-2">
+              <Button size="sm" className="gap-1 text-xs" onClick={() => { setItemSelectedMap(new Map()); setItemSearchResults([]); setItemSearchKeyword(""); setItemSearchOpen(true); searchItemInfo(); }}>
+                <Plus className="h-3.5 w-3.5" /> 품목 검색/추가
+              </Button>
+              <Button variant="outline" size="sm" className="gap-1 text-xs" onClick={addItem}>
+                <Plus className="h-3.5 w-3.5" /> 빈 행 추가
+              </Button>
+            </div>
+            <div className="overflow-auto rounded border">
+              <table className="w-full text-xs">
+                <thead className="sticky top-0 bg-gray-50">
+                  <tr>
+                    <th className="w-8 px-2 py-2 text-center">#</th>
+                    <th className="px-2 py-2 text-left">품목코드</th>
+                    <th className="px-2 py-2 text-left">품목명</th>
+                    <th className="px-2 py-2 text-left">규격</th>
+                    <th className="w-20 px-2 py-2 text-right">수량</th>
+                    <th className="w-16 px-2 py-2 text-center">단위</th>
+                    <th className="w-24 px-2 py-2 text-right">단가</th>
+                    <th className="w-24 px-2 py-2 text-right">공급가액</th>
+                    <th className="w-20 px-2 py-2 text-right">부가세</th>
+                    <th className="w-24 px-2 py-2 text-right">합계</th>
+                    <th className="w-8" />
+                  </tr>
+                </thead>
+                <tbody>
+                  {items.map((item, idx) => (
+                    <tr key={idx} className="border-t">
+                      <td className="px-2 py-1 text-center text-gray-400">{idx + 1}</td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.item_code} onChange={(e) => updateItem(idx, "item_code", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.item_name} onChange={(e) => updateItem(idx, "item_name", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-xs" value={item.spec} onChange={(e) => updateItem(idx, "spec", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-right text-xs" value={fmt(item.qty)} onChange={(e) => updateItem(idx, "qty", pn(e.target.value))} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-center text-xs" value={item.unit} onChange={(e) => updateItem(idx, "unit", e.target.value)} /></td>
+                      <td className="px-1 py-1"><Input className="h-7 text-right text-xs" value={fmt(item.unit_price)} onChange={(e) => updateItem(idx, "unit_price", pn(e.target.value))} /></td>
+                      <td className="px-2 py-1 text-right">{fmt(item.supply_amount)}</td>
+                      <td className="px-2 py-1 text-right">{fmt(item.vat_amount)}</td>
+                      <td className="px-2 py-1 text-right font-medium">{fmt(item.total_amount)}</td>
+                      <td className="px-1 py-1">
+                        <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => removeItem(idx)}>
+                          <Trash2 className="h-3 w-3 text-red-400" />
+                        </Button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className="mt-3 rounded bg-gray-50 p-3 text-sm">
+              <div className="flex justify-between"><span>공급가액</span><span>{fmt(String(totalSupply))}원</span></div>
+              <div className="flex justify-between"><span>부가세</span><span>{fmt(String(totalVat))}원</span></div>
+              <div className="flex justify-between border-t pt-2 font-bold"><span>합계금액</span><span>{fmt(String(totalAmount))}원</span></div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditComp(null)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 기본정보 모달 ═══ */}
+      <Dialog open={basicInfoOpen} onOpenChange={setBasicInfoOpen}>
+        <DialogContent className="max-w-md" onOpenAutoFocus={(e) => e.preventDefault()}>
+          <DialogHeader>
+            <DialogTitle>기본 정보</DialogTitle>
+            <DialogDescription>견적 기본 정보를 수정합니다.</DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label className="text-xs">견적번호</Label>
+              <Input className="mt-1" value={selectedRow?.quote_no || ""} disabled />
+            </div>
+            <div>
+              <Label className="text-xs">견적일자 *</Label>
+              <div className="mt-1">
+                <FormDatePicker value={basicForm.quote_date} onChange={(v) => setBasicForm((p) => ({ ...p, quote_date: v }))} />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">유효기한 *</Label>
+              <div className="mt-1">
+                <FormDatePicker value={basicForm.valid_until} onChange={(v) => setBasicForm((p) => ({ ...p, valid_until: v }))} />
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">상태</Label>
+              <Select value={basicForm.status} onValueChange={(v) => setBasicForm((p) => ({ ...p, status: v }))}>
+                <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {Object.entries(STATUS_MAP).map(([k, v]) => <SelectItem key={k} value={k}>{v}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setBasicInfoOpen(false)}>취소</Button>
+            <Button onClick={handleBasicInfoSave} disabled={saving} className="gap-1.5">
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} 저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 담당자(사원) 검색 모달 ═══ */}
+      <Dialog open={userSearchOpen} onOpenChange={setUserSearchOpen}>
+        <DialogContent className="flex max-h-[70vh] max-w-lg flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>담당자 선택</DialogTitle>
+            <DialogDescription>담당자를 검색하여 선택하세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="이름 검색" value={userSearchKeyword}
+              onChange={(e) => setUserSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchUsers()} className="text-sm" />
+            <Button onClick={searchUsers} disabled={userSearchLoading} className="shrink-0">
+              {userSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left">이름</th>
+                  <th className="px-3 py-2 text-left">부서</th>
+                  <th className="px-3 py-2 text-left">직위</th>
+                  <th className="w-16 px-2 py-2 text-center">선택</th>
+                </tr>
+              </thead>
+              <tbody>
+                {userSearchResults.length === 0 ? (
+                  <tr><td colSpan={4} className="px-4 py-8 text-center text-gray-400">
+                    {userSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : userSearchResults.map((row, i) => (
+                  <tr key={row.objid || row.user_id || i} className="cursor-pointer border-t hover:bg-blue-50"
+                    onClick={() => selectUser(row)}>
+                    <td className="px-3 py-2 font-medium">{row.user_name || "-"}</td>
+                    <td className="px-3 py-2">{row.department || row.dept_name || "-"}</td>
+                    <td className="px-3 py-2">{row.position || row.rank || "-"}</td>
+                    <td className="px-2 py-2 text-center">
+                      <Button size="sm" variant="outline" className="h-6 text-xs"
+                        onClick={(e) => { e.stopPropagation(); selectUser(row); }}>선택</Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUserSearchOpen(false)}>취소</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 거래처 검색 모달 ═══ */}
+      <Dialog open={custSearchOpen} onOpenChange={setCustSearchOpen}>
+        <DialogContent className="flex max-h-[80vh] max-w-2xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>거래처 검색</DialogTitle>
+            <DialogDescription>거래처를 검색하여 선택하세요. 선택하면 자동으로 적용됩니다.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="거래처명 검색" value={custSearchKeyword}
+              onChange={(e) => setCustSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchCustomers()} className="text-sm" />
+            <Button onClick={searchCustomers} disabled={custSearchLoading} className="shrink-0 gap-1">
+              {custSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left">거래처명</th>
+                  <th className="px-3 py-2 text-left">대표자</th>
+                  <th className="px-3 py-2 text-left">사업자번호</th>
+                  <th className="px-3 py-2 text-left">연락처</th>
+                  <th className="w-16 px-2 py-2 text-center">선택</th>
+                </tr>
+              </thead>
+              <tbody>
+                {custSearchResults.length === 0 ? (
+                  <tr><td colSpan={5} className="px-4 py-8 text-center text-gray-400">
+                    {custSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : custSearchResults.map((row, i) => (
+                  <tr key={row.objid || i} className="cursor-pointer border-t hover:bg-blue-50"
+                    onClick={() => selectCustomer(row)}>
+                    <td className="px-3 py-2 font-medium">{row.customer_name || "-"}</td>
+                    <td className="px-3 py-2">{row.contact_person || "-"}</td>
+                    <td className="px-3 py-2">{row.business_number || "-"}</td>
+                    <td className="px-3 py-2">{row.contact_phone || "-"}</td>
+                    <td className="px-2 py-2 text-center">
+                      <Button size="sm" variant="outline" className="h-6 text-xs"
+                        onClick={(e) => { e.stopPropagation(); selectCustomer(row); }}>선택</Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCustSearchOpen(false)}>취소</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ═══ 품목 검색 모달 ═══ */}
+      <Dialog open={itemSearchOpen} onOpenChange={setItemSearchOpen}>
+        <DialogContent className="flex max-h-[80vh] max-w-3xl flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>품목 검색</DialogTitle>
+            <DialogDescription>추가할 품목을 검색하여 선택하세요.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
+              onChange={(e) => setItemSearchKeyword(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && searchItemInfo()} className="text-sm" />
+            <Button onClick={searchItemInfo} disabled={itemSearchLoading} className="shrink-0 gap-1">
+              {itemSearchLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "검색"}
+            </Button>
+          </div>
+          <div className="flex-1 overflow-auto rounded border">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-gray-50">
+                <tr>
+                  <th className="w-10 px-2 py-2 text-center">선택</th>
+                  <th className="px-2 py-2 text-left">품목코드</th>
+                  <th className="px-2 py-2 text-left">품명</th>
+                  <th className="px-2 py-2 text-left">규격</th>
+                  <th className="w-16 px-2 py-2 text-center">단위</th>
+                  <th className="w-24 px-2 py-2 text-right">단가</th>
+                </tr>
+              </thead>
+              <tbody>
+                {itemSearchResults.length === 0 ? (
+                  <tr><td colSpan={6} className="px-4 py-8 text-center text-gray-400">
+                    {itemSearchLoading ? "검색 중..." : "검색 결과가 없습니다."}
+                  </td></tr>
+                ) : itemSearchResults.map((row, i) => {
+                  const key = row.item_number || row.objid || row.id || i;
+                  const checked = itemSelectedMap.has(key);
+                  return (
+                    <tr key={key} className={`cursor-pointer border-t ${checked ? "bg-blue-50" : "hover:bg-gray-50"}`}
+                      onClick={() => toggleItemSelect(row)}>
+                      <td className="px-2 py-1.5 text-center">
+                        <input type="checkbox" checked={checked} readOnly className="accent-blue-500" />
+                      </td>
+                      <td className="px-2 py-1.5">{row.item_number || row.item_code || "-"}</td>
+                      <td className="px-2 py-1.5">{row.item_name || "-"}</td>
+                      <td className="px-2 py-1.5">{row.spec || row.standard || "-"}</td>
+                      <td className="px-2 py-1.5 text-center">{row.unit || "EA"}</td>
+                      <td className="px-2 py-1.5 text-right">{fmt(String(row.selling_price || row.standard_price || 0))}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+          <DialogFooter className="flex items-center justify-between">
+            <span className="text-xs text-gray-500">선택: {itemSelectedMap.size}건</span>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={() => setItemSearchOpen(false)}>취소</Button>
+              <Button onClick={addSelectedItemsToQuote} disabled={itemSelectedMap.size === 0} className="gap-1">
+                <Plus className="h-4 w-4" /> 선택 품목 추가
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ExcelUploadModal open={excelOpen} onOpenChange={setExcelOpen} tableName={MASTER_TABLE} />
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/sales/sales-item/page.tsx b/frontend/app/(main)/COMPANY_9/sales/sales-item/page.tsx
new file mode 100644
index 00000000..d02bfef5
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/sales/sales-item/page.tsx
@@ -0,0 +1,1245 @@
+"use client";
+
+/**
+ * 판매품목정보 — Type B 마스터-디테일 리디자인
+ *
+ * 좌측: 판매품목 목록 (item_info, 판매 관련 필터)
+ * 우측: 선택한 품목의 거래처 정보 (customer_item_mapping → customer_mng 조인)
+ *
+ * 거래처관리와 양방향 연동 (같은 customer_item_mapping 테이블)
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Users, Package, Search, X, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const ITEM_TABLE = "item_info";
+const MAPPING_TABLE = "customer_item_mapping";
+const CUSTOMER_TABLE = "customer_mng";
+
+// 숫자 포맷 헬퍼
+const formatNum = (val: any): string => {
+  if (val === null || val === undefined || val === "") return "";
+  const n = Number(val);
+  return isNaN(n) ? String(val) : n.toLocaleString();
+};
+
+const ITEM_GRID_COLUMNS = [
+  { key: "item_number", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "size", label: "규격" },
+  { key: "unit", label: "단위" },
+  { key: "standard_price", label: "기준단가" },
+  { key: "selling_price", label: "판매가격" },
+  { key: "currency_code", label: "통화" },
+  { key: "status", label: "상태" },
+];
+
+export default function SalesItemPage() {
+  const { user } = useAuth();
+  const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
+  const ts = useTableSettings("c16-sales-item", ITEM_TABLE, ITEM_GRID_COLUMNS);
+
+  // 좌측: 품목
+  const [items, setItems] = useState<any[]>([]);
+  const [itemLoading, setItemLoading] = useState(false);
+  const [itemCount, setItemCount] = useState(0);
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 우측: 거래처
+  const [customerItems, setCustomerItems] = useState<any[]>([]);
+  const [customerLoading, setCustomerLoading] = useState(false);
+  const [customerCheckedIds, setCustomerCheckedIds] = useState<string[]>([]);
+
+  // 카테고리
+  const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string; isDefault?: boolean }[]>>({});
+  const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
+
+  // 거래처 추가 모달
+  const [custSelectOpen, setCustSelectOpen] = useState(false);
+  const [custSearchKeyword, setCustSearchKeyword] = useState("");
+  const [custSearchResults, setCustSearchResults] = useState<any[]>([]);
+  const [custSearchLoading, setCustSearchLoading] = useState(false);
+  const [custCheckedIds, setCustCheckedIds] = useState<Set<string>>(new Set());
+
+  // 품목 수정 모달
+  const [editItemOpen, setEditItemOpen] = useState(false);
+  const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+
+  // 엑셀
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+
+  // 거래처 상세 입력 모달 (거래처 품번/품명 + 단가)
+  const [custDetailOpen, setCustDetailOpen] = useState(false);
+  const [selectedCustsForDetail, setSelectedCustsForDetail] = useState<any[]>([]);
+  const [custMappings, setCustMappings] = useState<Record<string, Array<{ _id: string; customer_item_code: string; customer_item_name: string }>>>({});
+  const [custPrices, setCustPrices] = useState<Record<string, Array<{
+    _id: string; start_date: string; end_date: string; currency_code: string;
+    base_price_type: string; base_price: string; discount_type: string;
+    discount_value: string; rounding_type: string; rounding_unit_value: string;
+    calculated_price: string;
+  }>>>({});
+  const [editCustData, setEditCustData] = useState<any>(null);
+
+
+  // 카테고리 로드
+  useEffect(() => {
+    const load = async () => {
+      const optMap: Record<string, { code: string; label: string; isDefault?: boolean }[]> = {};
+      const flatten = (vals: any[]): { code: string; label: string; isDefault?: boolean }[] => {
+        const result: { code: string; label: string; isDefault?: boolean }[] = [];
+        for (const v of vals) {
+          result.push({ code: v.valueCode, label: v.valueLabel, isDefault: v.isDefault });
+          if (v.children?.length) result.push(...flatten(v.children));
+        }
+        return result;
+      };
+      for (const col of ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
+          if (res.data?.success) optMap[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setCategoryOptions(optMap);
+
+      // 단가 카테고리
+      const priceOpts: Record<string, { code: string; label: string }[]> = {};
+      for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
+        try {
+          const res = await apiClient.get(`/table-categories/customer_item_prices/${col}/values`);
+          if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
+        } catch { /* skip */ }
+      }
+      setPriceCategoryOptions(priceOpts);
+    };
+    load();
+  }, []);
+
+  const resolve = (col: string, code: string) => {
+    if (!code) return "";
+    return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
+  };
+
+  // 좌측: 품목 조회
+  const fetchItems = useCallback(async () => {
+    setItemLoading(true);
+    try {
+      const filters: { columnName: string; operator: string; value: any }[] = [];
+
+      // 판매품목/영업관리 division 필터 (다중값 컬럼이므로 contains로 매칭)
+      filters.push({ columnName: "division", operator: "contains", value: "CAT_ML8ZFVEL_1TOR" });
+
+      // DynamicSearchFilter에서 전달된 필터 추가
+      for (const f of searchFilters) {
+        filters.push({ columnName: f.columnName, operator: f.operator, value: f.value });
+      }
+
+      const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
+        page: 1, size: 500,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const raw = res.data?.data?.data || res.data?.data?.rows || [];
+      const CATS = ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
+      const data = raw.map((r: any) => {
+        const converted = { ...r };
+        for (const col of CATS) {
+          if (converted[col]) converted[col] = resolve(col, converted[col]);
+        }
+        return converted;
+      });
+      setItems(data);
+      setItemCount(res.data?.data?.total || raw.length);
+    } catch (err) {
+      console.error("품목 조회 실패:", err);
+      toast.error("품목 목록을 불러오는데 실패했습니다.");
+    } finally {
+      setItemLoading(false);
+    }
+  }, [searchFilters, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => { fetchItems(); }, [fetchItems]);
+
+  // 선택된 품목
+  const selectedItem = items.find((i) => i.id === selectedItemId);
+
+  // 우측: 거래처 목록 조회
+  useEffect(() => {
+    if (!selectedItem?.item_number) { setCustomerItems([]); setCustomerCheckedIds([]); return; }
+    setCustomerCheckedIds([]);
+    const itemKey = selectedItem.item_number;
+    const fetchCustomerItems = async () => {
+      setCustomerLoading(true);
+      try {
+        // 1. customer_item_mapping에서 해당 품목의 매핑 조회
+        const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
+          page: 1, size: 500,
+          dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
+          autoFilter: true,
+        });
+        const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+
+        // 2. customer_id → customer_mng 조인 (거래처명)
+        const custIds = [...new Set(mappings.map((m: any) => m.customer_id).filter(Boolean))];
+        let custMap: Record<string, any> = {};
+        if (custIds.length > 0) {
+          try {
+            const custRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+              page: 1, size: custIds.length + 10,
+              dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "in", value: custIds }] },
+              autoFilter: true,
+            });
+            for (const c of (custRes.data?.data?.data || custRes.data?.data?.rows || [])) {
+              custMap[c.customer_code] = c;
+            }
+          } catch { /* skip */ }
+        }
+
+        // 3. customer_item_prices 조회 (단가 정보)
+        let allPrices: any[] = [];
+        if (mappings.length > 0) {
+          try {
+            const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+              page: 1, size: 500,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "item_id", operator: "equals", value: itemKey },
+              ]},
+              autoFilter: true,
+            });
+            allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          } catch { /* skip */ }
+        }
+
+        // 4. 거래처별 중복 제거 + 오늘 날짜 기준 단가 매칭
+        const priceResolve = (col: string, code: string) => {
+          if (!code) return "";
+          return priceCategoryOptions[col]?.find((o: any) => o.code === code)?.label || code;
+        };
+        const today = new Date().toISOString().split("T")[0];
+        const seenCustIds = new Set<string>();
+        const sortedMappings = [...mappings].sort((a: any, b: any) => (a.customer_id || "").localeCompare(b.customer_id || ""));
+
+        setCustomerItems(sortedMappings.map((m: any) => {
+          const custKey = m.customer_id || "";
+          const isFirstOfGroup = !seenCustIds.has(custKey);
+          if (custKey) seenCustIds.add(custKey);
+
+          const custPriceList = allPrices.filter((p: any) => p.customer_id === custKey);
+          const todayPrice = custPriceList.find((p: any) =>
+            (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
+          ) || custPriceList[0] || {};
+
+          return {
+            ...m,
+            customer_code: isFirstOfGroup ? custKey : "",
+            customer_name: isFirstOfGroup ? (custMap[custKey]?.customer_name || "") : "",
+            customer_item_code: m.customer_item_code || "",
+            customer_item_name: m.customer_item_name || "",
+            base_price: todayPrice.base_price || "",
+            calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
+            currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
+          };
+        }));
+      } catch (err) {
+        console.error("거래처 조회 실패:", err);
+      } finally {
+        setCustomerLoading(false);
+      }
+    };
+    fetchCustomerItems();
+  }, [selectedItem?.item_number, priceCategoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 거래처 검색
+  const searchCustomers = async () => {
+    setCustSearchLoading(true);
+    try {
+      const filters: any[] = [];
+      if (custSearchKeyword) filters.push({ columnName: "customer_name", operator: "contains", value: custSearchKeyword });
+      const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
+        page: 1, size: 50,
+        dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
+        autoFilter: true,
+      });
+      const all = res.data?.data?.data || res.data?.data?.rows || [];
+      // 이미 등록된 거래처 제외
+      const existing = new Set(customerItems.map((c: any) => c.customer_id || c.customer_code));
+      setCustSearchResults(all.filter((c: any) => !existing.has(c.customer_code)));
+    } catch { /* skip */ } finally { setCustSearchLoading(false); }
+  };
+
+  // 거래처 선택 → 상세 모달로 이동
+  const goToCustDetail = () => {
+    const selected = custSearchResults.filter((c) => custCheckedIds.has(c.id));
+    if (selected.length === 0) { toast.error("거래처를 선택해주세요."); return; }
+    setSelectedCustsForDetail(selected);
+    const mappings: typeof custMappings = {};
+    const prices: typeof custPrices = {};
+    for (const cust of selected) {
+      const key = cust.customer_code || cust.id;
+      mappings[key] = [];
+      prices[key] = [{
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: selectedItem?.standard_price || selectedItem?.selling_price || "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: selectedItem?.standard_price || selectedItem?.selling_price || "",
+      }];
+    }
+    setCustMappings(mappings);
+    setCustPrices(prices);
+    setCustSelectOpen(false);
+    setCustDetailOpen(true);
+  };
+
+  const addMappingRow = (custKey: string) => {
+    setCustMappings((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, customer_item_code: "", customer_item_name: "" }],
+    }));
+  };
+
+  const removeMappingRow = (custKey: string, rowId: string) => {
+    setCustMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updateMappingRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setCustMappings((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
+    }));
+  };
+
+  const addPriceRow = (custKey: string) => {
+    setCustPrices((prev) => ({
+      ...prev,
+      [custKey]: [...(prev[custKey] || []), {
+        _id: `p_${Date.now()}_${Math.random()}`,
+        start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
+        discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
+        calculated_price: "",
+      }],
+    }));
+  };
+
+  const removePriceRow = (custKey: string, rowId: string) => {
+    setCustPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
+    }));
+  };
+
+  const updatePriceRow = (custKey: string, rowId: string, field: string, value: string) => {
+    setCustPrices((prev) => ({
+      ...prev,
+      [custKey]: (prev[custKey] || []).map((r) => {
+        if (r._id !== rowId) return r;
+        const updated = { ...r, [field]: value };
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
+          const bp = Number(updated.base_price) || 0;
+          const dv = Number(updated.discount_value) || 0;
+          const dt = updated.discount_type;
+          let calc = bp;
+          if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
+          else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
+          // 반올림 유형 + 단위 적용
+          const rv = updated.rounding_unit_value;
+          const rt = updated.rounding_type;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          const unitOpts = priceCategoryOptions["rounding_type"] || [];
+          const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
+          const unit = parseInt(unitLabel) || 1;
+          if (roundLabel === "반올림") calc = Math.round(calc / unit) * unit;
+          else if (roundLabel === "절삭") calc = Math.floor(calc / unit) * unit;
+          else if (roundLabel === "올림") calc = Math.ceil(calc / unit) * unit;
+          updated.calculated_price = String(Math.floor(calc));
+        }
+        return updated;
+      }),
+    }));
+  };
+
+  const openEditCust = async (row: any) => {
+    const custKey = row.customer_code || row.customer_id;
+
+    // customer_mng에서 거래처 정보 조회
+    let custInfo: any = { customer_code: custKey, customer_name: row.customer_name || "" };
+    try {
+      const res = await apiClient.post(`/table-management/tables/customer_mng/data`, {
+        page: 1, size: 1,
+        dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: custKey }] },
+        autoFilter: true,
+      });
+      const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
+      if (found) custInfo = found;
+    } catch { /* skip */ }
+
+    let mappingRows: any[] = [];
+    try {
+      const mapRes = await apiClient.post(`/table-management/tables/customer_item_mapping/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: custKey },
+          { columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
+        ]}, autoFilter: true,
+      });
+      const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
+      mappingRows = allMappings
+        .filter((m: any) => m.customer_item_code || m.customer_item_name)
+        .map((m: any) => ({ _id: `m_existing_${m.id}`, customer_item_code: m.customer_item_code || "", customer_item_name: m.customer_item_name || "" }));
+    } catch { /* skip */ }
+    let priceRows: any[] = [];
+    try {
+      const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+        page: 1, size: 100,
+        dataFilter: { enabled: true, filters: [
+          { columnName: "customer_id", operator: "equals", value: custKey },
+          { columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
+        ]}, autoFilter: true,
+      });
+      const allPriceData = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+      priceRows = allPriceData.map((p: any) => ({
+        _id: `p_existing_${p.id}`, start_date: p.start_date ? String(p.start_date).split("T")[0] : "", end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
+        currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI", base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
+        base_price: p.base_price ? String(p.base_price) : "", discount_type: p.discount_type || "", discount_value: p.discount_value ? String(p.discount_value) : "",
+        rounding_type: p.rounding_type || "", rounding_unit_value: p.rounding_unit_value || "", calculated_price: p.calculated_price ? String(p.calculated_price) : "",
+      }));
+    } catch { /* skip */ }
+    if (priceRows.length === 0) {
+      priceRows.push({ _id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
+        base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
+        rounding_type: "", rounding_unit_value: "", calculated_price: "" });
+    }
+
+    setSelectedCustsForDetail([custInfo]);
+    setCustMappings({ [custKey]: mappingRows });
+    setCustPrices({ [custKey]: priceRows });
+    setEditCustData(row);
+    setCustDetailOpen(true);
+  };
+
+  const handleCustDetailSave = async () => {
+    if (!selectedItem) return;
+    const isEditingExisting = !!editCustData;
+    setSaving(true);
+    try {
+      for (const cust of selectedCustsForDetail) {
+        const custKey = cust.customer_code || cust.id;
+        const mappingRows = custMappings[custKey] || [];
+
+        if (isEditingExisting && editCustData?.id) {
+          await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
+            originalData: { id: editCustData.id },
+            updatedData: {
+              customer_item_code: mappingRows[0]?.customer_item_code || "",
+              customer_item_name: mappingRows[0]?.customer_item_name || "",
+            },
+          });
+
+          // 기존 prices 삭제 후 재등록
+          try {
+            const existingPrices = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+              page: 1, size: 100,
+              dataFilter: { enabled: true, filters: [
+                { columnName: "mapping_id", operator: "equals", value: editCustData.id },
+              ]}, autoFilter: true,
+            });
+            const existing = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
+            if (existing.length > 0) {
+              await apiClient.delete(`/table-management/tables/customer_item_prices/delete`, {
+                data: existing.map((p: any) => ({ id: p.id })),
+              });
+            }
+          } catch { /* skip */ }
+
+          const priceRows = (custPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/customer_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: editCustData.id,
+              customer_id: custKey,
+              item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        } else {
+          // 신규 등록
+          const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+            id: crypto.randomUUID(),
+            customer_id: custKey, item_id: selectedItem.item_number,
+            customer_item_code: mappingRows[0]?.customer_item_code || "",
+            customer_item_name: mappingRows[0]?.customer_item_name || "",
+          });
+          const mappingId = mappingRes.data?.data?.id || null;
+
+          for (let mi = 1; mi < mappingRows.length; mi++) {
+            await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
+              id: crypto.randomUUID(),
+              customer_id: custKey, item_id: selectedItem.item_number,
+              customer_item_code: mappingRows[mi].customer_item_code || "",
+              customer_item_name: mappingRows[mi].customer_item_name || "",
+            });
+          }
+
+          const priceRows = (custPrices[custKey] || []).filter((p) =>
+            (p.base_price && Number(p.base_price) > 0) || p.start_date
+          );
+          for (const price of priceRows) {
+            await apiClient.post(`/table-management/tables/customer_item_prices/add`, {
+              id: crypto.randomUUID(),
+              mapping_id: mappingId || "", customer_id: custKey, item_id: selectedItem.item_number,
+              start_date: price.start_date || null, end_date: price.end_date || null,
+              currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
+              base_price: price.base_price ? Number(price.base_price) : null,
+              discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
+              rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
+              calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
+            });
+          }
+        }
+      }
+      toast.success(isEditingExisting ? "수정되었습니다." : `${selectedCustsForDetail.length}개 거래처가 추가되었습니다.`);
+      setCustDetailOpen(false);
+      setEditCustData(null);
+      setCustCheckedIds(new Set());
+      // 우측 새로고침
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 품목 수정
+  const openEditItem = () => {
+    if (!selectedItem) return;
+    setEditItemForm({ ...selectedItem });
+    setEditItemOpen(true);
+  };
+
+  const handleEditSave = async () => {
+    if (!editItemForm.id) return;
+    setSaving(true);
+    try {
+      await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
+        originalData: { id: editItemForm.id },
+        updatedData: {
+          selling_price: editItemForm.selling_price || null,
+          standard_price: editItemForm.standard_price || null,
+          currency_code: editItemForm.currency_code || null,
+        },
+      });
+      toast.success("수정되었습니다.");
+      setEditItemOpen(false);
+      fetchItems();
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || "수정에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 우측: 거래처 매핑 삭제
+  const handleCustomerMappingDelete = async () => {
+    if (customerCheckedIds.length === 0) return;
+    const ok = await confirm(`선택한 ${customerCheckedIds.length}개 거래처 매핑을 삭제하시겠습니까?`, {
+      description: "관련된 단가 정보도 함께 삭제됩니다.",
+      variant: "destructive", confirmText: "삭제",
+    });
+    if (!ok) return;
+    try {
+      // 관련 단가 삭제
+      for (const mappingId of customerCheckedIds) {
+        try {
+          const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
+            page: 1, size: 500,
+            dataFilter: { enabled: true, filters: [{ columnName: "mapping_id", operator: "equals", value: mappingId }] },
+            autoFilter: true,
+          });
+          const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
+          if (prices.length > 0) {
+            await apiClient.delete(`/table-management/tables/customer_item_prices/delete`, {
+              data: prices.map((p: any) => ({ id: p.id })),
+            });
+          }
+        } catch { /* skip */ }
+      }
+      // 매핑 삭제
+      await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
+        data: customerCheckedIds.map((id) => ({ id })),
+      });
+      toast.success(`${customerCheckedIds.length}개 거래처 매핑이 삭제되었습니다.`);
+      setCustomerCheckedIds([]);
+      const sid = selectedItemId;
+      setSelectedItemId(null);
+      setTimeout(() => setSelectedItemId(sid), 50);
+    } catch {
+      toast.error("삭제에 실패했습니다.");
+    }
+  };
+
+  // 엑셀 다운로드
+  const handleExcelDownload = async () => {
+    if (items.length === 0) return;
+    const data = items.map((i) => ({
+      품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
+      기준단가: i.standard_price, 판매가격: i.selling_price, 통화: i.currency_code, 상태: i.status,
+    }));
+    await exportToExcel(data, "판매품목정보.xlsx", "판매품목");
+    toast.success("다운로드 완료");
+  };
+
+  // EDataTable 컬럼 정의 (판매품목)
+  const itemColumns: EDataTableColumn[] = [
+    { key: "item_number", label: "품번", width: "w-[110px]" },
+    { key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
+    { key: "size", label: "규격", width: "w-[80px]" },
+    { key: "unit", label: "단위", width: "w-[60px]" },
+    { key: "standard_price", label: "기준단가", width: "w-[90px]", align: "right", formatNumber: true },
+    { key: "selling_price", label: "판매가격", width: "w-[90px]", align: "right", formatNumber: true },
+    { key: "currency_code", label: "통화", width: "w-[50px]" },
+    { key: "status", label: "상태", width: "w-[60px]" },
+  ];
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-4">
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ITEM_TABLE}
+        filterId="c16-sales-item"
+        onFilterChange={setSearchFilters}
+        dataCount={items.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center gap-2 px-4 shrink-0">
+        <div className="flex gap-1.5 ml-auto">
+          <Button variant="outline" size="sm" className="h-8" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />
+            엑셀 업로드
+          </Button>
+          <Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
+            <Download className="w-3.5 h-3.5 mr-1" />
+            엑셀 다운로드
+          </Button>
+        </div>
+      </div>
+
+      {/* 마스터-디테일 분할 패널 */}
+      <div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
+        <ResizablePanelGroup direction="horizontal">
+
+          {/* 좌측: 판매품목 목록 */}
+          <ResizablePanel defaultSize={55} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <span className="text-[13px] font-bold">판매품목 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
+                    {itemCount}건
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
+                    <Pencil className="w-3.5 h-3.5 mr-1" /> 수정
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
+                    <Settings2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* 거래처 테이블 */}
+              <EDataTable
+                columns={itemColumns}
+                data={ts.groupData(items)}
+                rowKey={(row) => row.id}
+                loading={itemLoading}
+                emptyMessage="등록된 판매품목이 없어요"
+                selectedId={selectedItemId}
+                onSelect={(id) => setSelectedItemId(id)}
+                onRowDoubleClick={() => openEditItem()}
+                showRowNumber
+                showPagination
+                defaultPageSize={20}
+                draggableColumns={false}
+                columnOrderKey="c16-sales-item"
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 디테일 패널 */}
+          <ResizablePanel defaultSize={45} minSize={25}>
+            <div className="flex flex-col h-full">
+              {!selectedItemId ? (
+                /* 빈 상태 */
+                <div className="flex-1 flex items-center justify-center p-5">
+                  <div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
+                    <Package className="w-12 h-12 text-muted-foreground/40 mb-4" />
+                    <div className="text-sm font-semibold text-muted-foreground mb-1.5">품목을 선택해주세요</div>
+                    <div className="text-xs text-muted-foreground">좌측에서 품목을 선택하면 상세 정보가 표시돼요</div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 거래처별 단가 헤더 */}
+                  <div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
+                    <div className="flex items-center gap-2.5 px-4">
+                      <Users className="w-3.5 h-3.5 text-muted-foreground" />
+                      <span className="text-xs font-semibold">거래처별 단가</span>
+                      {customerItems.length > 0 && (
+                        <Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{customerItems.length}</Badge>
+                      )}
+                    </div>
+                    <div className="flex gap-1.5">
+                      <Button
+                        size="sm"
+                        onClick={() => { setCustCheckedIds(new Set()); setCustSelectOpen(true); searchCustomers(); }}
+                      >
+                        <Plus className="w-3.5 h-3.5" /> 거래처 추가
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={customerCheckedIds.length === 0}
+                        onClick={handleCustomerMappingDelete}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" /> 삭제
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 거래처 테이블 */}
+                  <div className="flex-1 min-h-0 overflow-auto pt-px">
+                    {customerLoading ? (
+                      <div className="flex items-center justify-center h-full">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : customerItems.length === 0 ? (
+                      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+                        등록된 거래처가 없어요
+                      </div>
+                    ) : (
+                      <Table noWrapper>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted h-10">
+                            <TableHead className="w-[40px] text-center px-2">
+                              <Checkbox
+                                checked={customerItems.length > 0 && customerCheckedIds.length === customerItems.length}
+                                onCheckedChange={(checked) => {
+                                  if (checked === true) setCustomerCheckedIds(customerItems.map((c) => c.id));
+                                  else setCustomerCheckedIds([]);
+                                }}
+                              />
+                            </TableHead>
+                            <TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처코드</TableHead>
+                            <TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품번</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품명</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
+                            <TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
+                            <TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {customerItems.map((row) => (
+                            <TableRow
+                              key={row.id}
+                              className={cn(
+                                "cursor-pointer h-[41px]",
+                                customerCheckedIds.includes(row.id) ? "bg-primary/[0.08]" : "hover:bg-accent"
+                              )}
+                              onClick={() => {
+                                setCustomerCheckedIds((prev) =>
+                                  prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
+                                );
+                              }}
+                              onDoubleClick={() => openEditCust(row)}
+                            >
+                              <TableCell className="text-center px-2">
+                                <Checkbox
+                                  checked={customerCheckedIds.includes(row.id)}
+                                  onCheckedChange={() => {}}
+                                />
+                              </TableCell>
+                              <TableCell className="text-[13px] font-mono text-muted-foreground">{row.customer_code}</TableCell>
+                              <TableCell className="text-sm text-foreground">{row.customer_name}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.customer_item_code}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.customer_item_name}</TableCell>
+                              <TableCell className="text-[13px] text-right font-mono text-muted-foreground">{formatNum(row.base_price)}</TableCell>
+                              <TableCell className="text-[13px] text-right font-mono text-foreground font-semibold">{formatNum(row.calculated_price)}</TableCell>
+                              <TableCell className="text-[13px] text-muted-foreground">{row.currency_code}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* ── 품목 수정 모달 ── */}
+      <Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>판매품목 수정</DialogTitle>
+            <DialogDescription>
+              {editItemForm.item_number || ""} — {editItemForm.item_name || ""}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4 py-4">
+            {/* 품목 기본정보 (읽기 전용) */}
+            {[
+              { key: "item_number", label: "품목코드" },
+              { key: "item_name", label: "품명" },
+              { key: "size", label: "규격" },
+              { key: "unit", label: "단위" },
+              { key: "material", label: "재질" },
+              { key: "status", label: "상태" },
+            ].map((f) => (
+              <div key={f.key} className="space-y-1.5">
+                <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">{f.label}</Label>
+                <Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
+              </div>
+            ))}
+
+            <div className="col-span-2 border-t my-1" />
+
+            {/* 판매 설정 (수정 가능) */}
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">판매가격</Label>
+              <Input
+                value={editItemForm.selling_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
+                placeholder="판매가격을 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">기준단가</Label>
+              <Input
+                value={editItemForm.standard_price || ""}
+                onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
+                placeholder="기준단가를 입력해주세요"
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">통화</Label>
+              <Select
+                value={editItemForm.currency_code || ""}
+                onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="통화를 선택해주세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(categoryOptions["currency_code"] || []).map((o) => (
+                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
+            <Button onClick={handleEditSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 거래처 검색 및 추가 모달 ── */}
+      <Dialog open={custSelectOpen} onOpenChange={setCustSelectOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>거래처 검색 및 추가</DialogTitle>
+            <DialogDescription>품목에 추가할 거래처를 선택해주세요.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 py-2">
+            {/* 검색바 */}
+            <div className="flex gap-2">
+              <Input
+                placeholder="거래처명으로 검색해주세요"
+                value={custSearchKeyword}
+                onChange={(e) => setCustSearchKeyword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && searchCustomers()}
+                className="h-9 flex-1"
+              />
+              <Button size="sm" onClick={searchCustomers} disabled={custSearchLoading} className="h-9">
+                {custSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
+              </Button>
+            </div>
+            {/* 검색 결과 테이블 */}
+            <div className="overflow-auto max-h-[350px] border rounded-lg">
+              <Table noWrapper>
+                <TableHeader className="sticky top-0 z-10">
+                  <TableRow className="bg-muted hover:bg-muted">
+                    <TableHead className="sticky top-0 bg-card w-[40px] text-center">
+                      <Checkbox
+                        checked={custSearchResults.length > 0 && custCheckedIds.size === custSearchResults.length}
+                        onCheckedChange={(checked) => {
+                          if (checked === true) setCustCheckedIds(new Set(custSearchResults.map((c) => c.id)));
+                          else setCustCheckedIds(new Set());
+                        }}
+                      />
+                    </TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[110px]">거래처코드</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[130px]">거래처명</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">거래유형</TableHead>
+                    <TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">담당자</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {custSearchResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">
+                        검색 결과가 없어요
+                      </TableCell>
+                    </TableRow>
+                  ) : custSearchResults.map((c) => (
+                    <TableRow
+                      key={c.id}
+                      className={cn("cursor-pointer", custCheckedIds.has(c.id) && "bg-primary/[0.08]")}
+                      onClick={() => setCustCheckedIds((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
+                        return next;
+                      })}
+                    >
+                      <TableCell className="text-center">
+                        <Checkbox
+                          checked={custCheckedIds.has(c.id)}
+                          onCheckedChange={(checked) => {
+                            setCustCheckedIds((prev) => {
+                              const next = new Set(prev);
+                              if (checked === true) next.add(c.id); else next.delete(c.id);
+                              return next;
+                            });
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell className="text-[13px] font-mono text-muted-foreground">{c.customer_code}</TableCell>
+                      <TableCell className="text-sm font-medium text-foreground">{c.customer_name}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.division}</TableCell>
+                      <TableCell className="text-[13px] text-muted-foreground">{c.contact_person}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+          <DialogFooter>
+            <div className="flex items-center gap-2 w-full justify-between">
+              <span className="text-sm text-muted-foreground">{custCheckedIds.size}개 선택됨</span>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setCustSelectOpen(false)}>취소</Button>
+                <Button onClick={goToCustDetail} disabled={custCheckedIds.size === 0}>
+                  <Plus className="w-4 h-4" />
+                  {custCheckedIds.size}개 다음
+                </Button>
+              </div>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── 거래처 상세 입력/수정 모달 ── */}
+      <Dialog open={custDetailOpen} onOpenChange={setCustDetailOpen}>
+        <DialogContent className="max-w-[1100px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              거래처 상세정보 {editCustData ? "수정" : "입력"} — {selectedItem?.item_name || ""}
+            </DialogTitle>
+            <DialogDescription>
+              {editCustData ? "거래처 품번/품명과 기간별 단가를 수정해주세요." : "선택한 거래처의 품번/품명과 기간별 단가를 설정해주세요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-6 py-2">
+            {selectedCustsForDetail.map((cust, idx) => {
+              const custKey = cust.customer_code || cust.id;
+              const mappingRows = custMappings[custKey] || [];
+              const prices = custPrices[custKey] || [];
+
+              return (
+                <div key={custKey} className="border rounded-lg overflow-hidden">
+                  {/* 거래처 헤더 */}
+                  <div className="flex items-center gap-2.5 px-4 py-3 bg-muted border-b">
+                    <span className="text-[13px] font-bold text-foreground">{idx + 1}. {cust.customer_name || custKey}</span>
+                    <span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">
+                      {custKey}
+                    </span>
+                  </div>
+
+                  <div className="flex gap-4 p-4 bg-card">
+                    {/* 좌: 거래처 품번/품명 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/50">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">거래처 품번/품명 관리</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          품번 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-2">
+                        {mappingRows.length === 0 ? (
+                          <div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
+                        ) : mappingRows.map((mRow, mIdx) => (
+                          <div key={mRow._id} className="flex gap-2 items-center">
+                            <span className="text-xs text-muted-foreground w-4 shrink-0">{mIdx + 1}</span>
+                            <Input
+                              value={mRow.customer_item_code}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_code", e.target.value)}
+                              placeholder="거래처 품번"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Input
+                              value={mRow.customer_item_name}
+                              onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_name", e.target.value)}
+                              placeholder="거래처 품명"
+                              className="h-8 text-sm flex-1"
+                            />
+                            <Button
+                              variant="ghost" size="sm"
+                              className="h-7 w-7 p-0 text-destructive shrink-0"
+                              onClick={() => removeMappingRow(custKey, mRow._id)}
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* 우: 기간별 단가 */}
+                    <div className="flex-1 border rounded-lg p-4 bg-muted/30">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-sm font-semibold text-foreground">기간별 단가 설정</span>
+                        <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
+                          <Plus className="h-3 w-3" />
+                          단가 추가
+                        </Button>
+                      </div>
+                      <div className="space-y-3">
+                        {prices.map((price, pIdx) => (
+                          <div key={price._id} className="border rounded-lg p-3 bg-background space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
+                              {prices.length > 1 && (
+                                <Button
+                                  variant="ghost" size="sm"
+                                  className="h-6 w-6 p-0 text-destructive"
+                                  onClick={() => removePriceRow(custKey, price._id)}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                            {/* 기간 + 통화 */}
+                            <div className="flex gap-2 items-center">
+                              <Input
+                                type="date"
+                                value={price.start_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "start_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <span className="text-xs text-muted-foreground">~</span>
+                              <Input
+                                type="date"
+                                value={price.end_date}
+                                onChange={(e) => updatePriceRow(custKey, price._id, "end_date", e.target.value)}
+                                className="h-8 text-xs flex-1"
+                              />
+                              <div className="w-[80px]">
+                                <Select
+                                  value={price.currency_code}
+                                  onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}
+                                >
+                                  <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="통화" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {(priceCategoryOptions["currency_code"] || []).map((o) => (
+                                      <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            </div>
+                            {/* 기준유형 + 기준가 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.base_price_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["base_price_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "base_price", raw);
+                                }}
+                                className="h-8 text-xs text-right col-span-3"
+                                placeholder="기준가"
+                              />
+                            </div>
+                            {/* 할인 + 반올림 */}
+                            <div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
+                              <Select
+                                value={price.discount_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none">할인없음</SelectItem>
+                                  {(priceCategoryOptions["discount_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Input
+                                value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
+                                onChange={(e) => {
+                                  const raw = e.target.value.replace(/[^\d.-]/g, "");
+                                  updatePriceRow(custKey, price._id, "discount_value", raw);
+                                }}
+                                className="h-8 text-xs text-right"
+                                placeholder="0"
+                              />
+                              <Select
+                                value={price.rounding_unit_value}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Select
+                                value={price.rounding_type}
+                                onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_type", v)}
+                              >
+                                <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
+                                <SelectContent>
+                                  {(priceCategoryOptions["rounding_type"] || []).map((o) => (
+                                    <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            {/* 계산 단가 */}
+                            <div className="flex items-center justify-end gap-2 pt-1 border-t">
+                              <span className="text-xs text-muted-foreground">계산 단가:</span>
+                              <span className="font-bold text-sm text-foreground">
+                                {price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setCustDetailOpen(false);
+                if (!editCustData) setCustSelectOpen(true);
+                setEditCustData(null);
+              }}
+            >
+              {editCustData ? "취소" : "← 이전"}
+            </Button>
+            <Button onClick={handleCustDetailSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 테이블 설정 모달 */}
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+
+      {/* 엑셀 업로드 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName={ITEM_TABLE}
+        userId={user?.userId}
+        onSuccess={() => fetchItems()}
+      />
+
+      {ConfirmDialogComponent}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/sales/shipping-order/page.tsx b/frontend/app/(main)/COMPANY_9/sales/shipping-order/page.tsx
new file mode 100644
index 00000000..2ed29b40
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/sales/shipping-order/page.tsx
@@ -0,0 +1,928 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Plus, Trash2, Save, X, ChevronDown, ChevronRight, ChevronLeft, ChevronsLeft, ChevronsRight, Search, Loader2, FileSpreadsheet, Inbox, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  getShippingOrderList,
+  saveShippingOrder,
+  deleteShippingOrders,
+  previewShippingOrderNo,
+  getShipmentPlanSource,
+  getSalesOrderSource,
+  getItemSource,
+} from "@/lib/api/shipping";
+import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "instruction_no", label: "출하지시번호" },
+  { key: "ship_date", label: "출하일자" },
+  { key: "customer_name", label: "거래처명" },
+  { key: "transport_company", label: "운송업체" },
+  { key: "vehicle_no", label: "차량번호" },
+  { key: "driver_name", label: "기사명" },
+  { key: "status", label: "상태" },
+  { key: "item_code", label: "품번" },
+  { key: "item_name", label: "품명" },
+  { key: "qty", label: "수량" },
+  { key: "source_type", label: "소스" },
+  { key: "remark", label: "비고" },
+];
+
+type DataSourceType = "shipmentPlan" | "salesOrder" | "itemInfo";
+
+const STATUS_OPTIONS = [
+  { value: "all", label: "전체" },
+  { value: "READY", label: "준비중" },
+  { value: "IN_PROGRESS", label: "진행중" },
+  { value: "COMPLETED", label: "완료" },
+];
+
+const getStatusLabel = (s: string) => STATUS_OPTIONS.find(o => o.value === s)?.label || s;
+
+const getStatusColor = (s: string) => {
+  switch (s) {
+    case "READY": return "bg-warning/10 text-warning";
+    case "IN_PROGRESS": return "bg-primary/10 text-primary";
+    case "COMPLETED": return "bg-success/10 text-success";
+    default: return "bg-muted text-muted-foreground";
+  }
+};
+
+const getSourceBadge = (s: string) => {
+  switch (s) {
+    case "shipmentPlan": return { label: "출하계획", cls: "bg-primary/10 text-primary" };
+    case "salesOrder": return { label: "수주", cls: "bg-success/10 text-success" };
+    case "itemInfo": return { label: "품목", cls: "bg-secondary text-secondary-foreground" };
+    default: return { label: s, cls: "bg-muted text-muted-foreground" };
+  }
+};
+
+interface SelectedItem {
+  id: string | number;
+  itemCode: string;
+  itemName: string;
+  spec: string;
+  material: string;
+  customer: string;
+  planQty: number;
+  orderQty: number;
+  sourceType: DataSourceType;
+  shipmentPlanId?: number;
+  salesOrderId?: number;
+  detailId?: string;
+  partnerCode?: string;
+}
+
+export default function ShippingOrderPage() {
+  const ts = useTableSettings("c16-shipping-order", "shipment_instruction", GRID_COLUMNS);
+  const [orders, setOrders] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [checkedIds, setCheckedIds] = useState<number[]>([]);
+  const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 엑셀 업로드
+  const [excelUploadOpen, setExcelUploadOpen] = useState(false);
+
+  // 모달
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editId, setEditId] = useState<number | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  // 모달 폼
+  const [formOrderNumber, setFormOrderNumber] = useState("");
+  const [formOrderDate, setFormOrderDate] = useState("");
+  const [formCustomer, setFormCustomer] = useState("");
+  const [formPartnerId, setFormPartnerId] = useState("");
+  const [formStatus, setFormStatus] = useState("READY");
+  const [formCarrier, setFormCarrier] = useState("");
+  const [formVehicle, setFormVehicle] = useState("");
+  const [formDriver, setFormDriver] = useState("");
+  const [formDriverPhone, setFormDriverPhone] = useState("");
+  const [formArrival, setFormArrival] = useState("");
+  const [formAddress, setFormAddress] = useState("");
+  const [formMemo, setFormMemo] = useState("");
+  const [isTransportCollapsed, setIsTransportCollapsed] = useState(false);
+
+  // 모달 왼쪽 패널
+  const [dataSource, setDataSource] = useState<DataSourceType>("shipmentPlan");
+  const [sourceKeyword, setSourceKeyword] = useState("");
+  const [sourceData, setSourceData] = useState<any[]>([]);
+  const [sourceLoading, setSourceLoading] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<SelectedItem[]>([]);
+  const [sourcePage, setSourcePage] = useState(1);
+  const [sourcePageSize, setSourcePageSize] = useState(20);
+  const [sourceTotalCount, setSourceTotalCount] = useState(0);
+
+
+  // 데이터 조회
+  const fetchOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: any = {};
+      for (const f of searchFilters) {
+        if (f.columnName === "ship_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split(",");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status") {
+          params.status = f.value;
+        } else if (f.columnName === "customer_name") {
+          params.customer = f.value;
+        } else {
+          params.keyword = f.value;
+        }
+      }
+
+      const result = await getShippingOrderList(params);
+      if (result.success) setOrders(result.data || []);
+    } catch (err) {
+      console.error("출하지시 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  // 소스 데이터 조회
+  const fetchSourceData = useCallback(async (pageOverride?: number) => {
+    setSourceLoading(true);
+    try {
+      const currentPage = pageOverride ?? sourcePage;
+      const params: any = { page: currentPage, pageSize: sourcePageSize };
+      if (sourceKeyword.trim()) params.keyword = sourceKeyword.trim();
+
+      let result;
+      switch (dataSource) {
+        case "shipmentPlan":
+          result = await getShipmentPlanSource(params);
+          break;
+        case "salesOrder":
+          result = await getSalesOrderSource(params);
+          break;
+        case "itemInfo":
+          result = await getItemSource(params);
+          break;
+      }
+      if (result?.success) {
+        setSourceData(result.data || []);
+        setSourceTotalCount(result.totalCount || 0);
+      }
+    } catch (err) {
+      console.error("소스 데이터 조회 실패:", err);
+    } finally {
+      setSourceLoading(false);
+    }
+  }, [dataSource, sourceKeyword, sourcePage, sourcePageSize]);
+
+  useEffect(() => {
+    if (isModalOpen) {
+      setSourcePage(1);
+      fetchSourceData(1);
+    }
+  }, [isModalOpen, dataSource]);
+
+  const handleDeleteSelected = async () => {
+    if (checkedIds.length === 0) return;
+    if (!confirm(`선택한 ${checkedIds.length}개의 출하지시를 삭제하시겠습니까?`)) return;
+    try {
+      const result = await deleteShippingOrders(checkedIds);
+      if (result.success) {
+        setCheckedIds([]);
+        fetchOrders();
+        alert("삭제되었어요.");
+      }
+    } catch (err: any) {
+      alert(err.message || "삭제 실패");
+    }
+  };
+
+  // 모달 열기
+  const openModal = (order?: any) => {
+    if (order) {
+      setIsEditMode(true);
+      setEditId(order.id);
+      setFormOrderNumber(order.instruction_no || "");
+      setFormOrderDate(order.instruction_date ? order.instruction_date.split("T")[0] : "");
+      setFormCustomer(order.customer_name || "");
+      setFormPartnerId(order.partner_id || "");
+      setFormStatus(order.status || "READY");
+      setFormCarrier(order.carrier_name || "");
+      setFormVehicle(order.vehicle_no || "");
+      setFormDriver(order.driver_name || "");
+      setFormDriverPhone(order.driver_contact || "");
+      setFormArrival(order.arrival_time ? new Date(order.arrival_time).toLocaleString("sv-SE", { timeZone: "Asia/Seoul" }).replace(" ", "T").slice(0, 16) : "");
+      setFormAddress(order.delivery_address || "");
+      setFormMemo(order.memo || "");
+
+      const items = order.items || [];
+      setSelectedItems(items.filter((it: any) => it.id).map((it: any) => {
+        const srcType = it.source_type || "shipmentPlan";
+        let sourceId: string | number = it.id;
+        if (srcType === "shipmentPlan" && it.shipment_plan_id) sourceId = it.shipment_plan_id;
+        else if (srcType === "salesOrder" && it.detail_id) sourceId = it.detail_id;
+        else if (srcType === "itemInfo") sourceId = it.item_code || "";
+
+        return {
+          id: sourceId,
+          itemCode: it.item_code || "",
+          itemName: it.item_name || "",
+          spec: it.spec || "",
+          material: it.material || "",
+          customer: order.customer_name || "",
+          planQty: Number(it.plan_qty || 0),
+          orderQty: Number(it.order_qty || 0),
+          sourceType: srcType,
+          shipmentPlanId: it.shipment_plan_id,
+          salesOrderId: it.sales_order_id,
+          detailId: it.detail_id,
+          partnerCode: order.partner_id,
+        };
+      }));
+    } else {
+      setIsEditMode(false);
+      setEditId(null);
+      setFormOrderNumber("불러오는 중...");
+      setFormOrderDate(new Date().toISOString().split("T")[0]);
+      previewShippingOrderNo().then(r => {
+        if (r.success) setFormOrderNumber(r.instructionNo);
+        else setFormOrderNumber("(자동생성)");
+      }).catch(() => setFormOrderNumber("(자동생성)"));
+      setFormCustomer("");
+      setFormPartnerId("");
+      setFormStatus("READY");
+      setFormCarrier("");
+      setFormVehicle("");
+      setFormDriver("");
+      setFormDriverPhone("");
+      setFormArrival("");
+      setFormAddress("");
+      setFormMemo("");
+      setSelectedItems([]);
+    }
+    setDataSource("shipmentPlan");
+    setSourceKeyword("");
+    setSourceData([]);
+    setIsTransportCollapsed(false);
+    setIsModalOpen(true);
+  };
+
+  // 소스 아이템 선택 토글
+  const toggleSourceItem = (item: any) => {
+    const key = dataSource === "shipmentPlan" ? item.id
+      : dataSource === "salesOrder" ? item.id
+      : item.item_code;
+
+    const exists = selectedItems.findIndex(s => {
+      if (s.sourceType === dataSource) {
+        if (dataSource === "itemInfo") return s.itemCode === key;
+        return String(s.id) === String(key);
+      }
+      if (dataSource === "shipmentPlan" && s.shipmentPlanId) return String(s.shipmentPlanId) === String(item.id);
+      if (dataSource === "salesOrder" && s.detailId) return String(s.detailId) === String(item.id);
+      return false;
+    });
+
+    if (exists > -1) {
+      setSelectedItems(prev => prev.filter((_, i) => i !== exists));
+    } else {
+      const newItem: SelectedItem = {
+        id: key,
+        itemCode: item.item_code || "",
+        itemName: item.item_name || "",
+        spec: item.spec || "",
+        material: item.material || "",
+        customer: item.customer_name || "",
+        planQty: Number(item.plan_qty || item.qty || item.balance_qty || 0),
+        orderQty: Number(item.plan_qty || item.balance_qty || item.qty || 1),
+        sourceType: dataSource,
+        shipmentPlanId: dataSource === "shipmentPlan" ? item.id : undefined,
+        salesOrderId: dataSource === "salesOrder" ? (item.master_id || undefined) : undefined,
+        detailId: dataSource === "salesOrder" ? item.id : (dataSource === "shipmentPlan" ? item.detail_id : undefined),
+        partnerCode: item.partner_code || "",
+      };
+      setSelectedItems(prev => [...prev, newItem]);
+
+      if (!formCustomer && item.customer_name) {
+        setFormCustomer(item.customer_name);
+        setFormPartnerId(item.partner_code || "");
+      }
+    }
+  };
+
+  const removeSelectedItem = (idx: number) => {
+    setSelectedItems(prev => prev.filter((_, i) => i !== idx));
+  };
+
+  const updateOrderQty = (idx: number, val: number) => {
+    setSelectedItems(prev => prev.map((item, i) => i === idx ? { ...item, orderQty: val } : item));
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (!formOrderDate) { alert("출하지시일을 입력해주세요."); return; }
+    if (selectedItems.length === 0) { alert("품목을 선택해주세요."); return; }
+
+    setSaving(true);
+    try {
+      const payload = {
+        id: isEditMode ? editId : undefined,
+        instructionDate: formOrderDate,
+        partnerId: formPartnerId || formCustomer,
+        status: formStatus,
+        memo: formMemo,
+        carrierName: formCarrier,
+        vehicleNo: formVehicle,
+        driverName: formDriver,
+        driverContact: formDriverPhone,
+        arrivalTime: formArrival ? `${formArrival}+09:00` : null,
+        deliveryAddress: formAddress,
+        items: selectedItems.map(item => ({
+          itemCode: item.itemCode,
+          itemName: item.itemName,
+          spec: item.spec,
+          material: item.material,
+          orderQty: item.orderQty,
+          planQty: item.orderQty,
+          shipQty: 0,
+          sourceType: item.sourceType,
+          shipmentPlanId: item.shipmentPlanId,
+          salesOrderId: item.salesOrderId,
+          detailId: item.detailId,
+        })),
+      };
+
+      const result = await saveShippingOrder(payload);
+      if (result.success) {
+        setIsModalOpen(false);
+        fetchOrders();
+        alert(isEditMode ? "출하지시가 수정되었어요." : "출하지시가 등록되었어요.");
+      } else {
+        alert(result.message || "저장 실패");
+      }
+    } catch (err: any) {
+      alert(err.message || "저장 중 오류 발생");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const formatDate = (d: string) => d ? d.split("T")[0] : "-";
+
+  // 출하지시 데이터를 플랫한 행 목록으로 변환 (EDataTable용)
+  const flattenedOrders = useMemo(() => {
+    const rows: any[] = [];
+    for (const order of orders) {
+      const items = Array.isArray(order.items) ? order.items.filter((it: any) => it.id) : [];
+      if (items.length === 0) {
+        rows.push({
+          _rowId: String(order.id),
+          _orderId: order.id,
+          _order: order,
+          instruction_no: order.instruction_no,
+          ship_date: formatDate(order.instruction_date),
+          customer_name: order.customer_name || "-",
+          transport_company: order.carrier_name || "-",
+          vehicle_no: order.vehicle_no || "-",
+          driver_name: order.driver_name || "-",
+          status: order.status,
+          item_code: "-",
+          item_name: "-",
+          qty: 0,
+          source_type: "-",
+          remark: order.memo || "-",
+        });
+      } else {
+        items.forEach((item: any, idx: number) => {
+          rows.push({
+            _rowId: `${order.id}-${item.id}`,
+            _orderId: order.id,
+            _order: order,
+            instruction_no: idx === 0 ? order.instruction_no : "",
+            ship_date: idx === 0 ? formatDate(order.instruction_date) : "",
+            customer_name: idx === 0 ? (order.customer_name || "-") : "",
+            transport_company: idx === 0 ? (order.carrier_name || "-") : "",
+            vehicle_no: idx === 0 ? (order.vehicle_no || "-") : "",
+            driver_name: idx === 0 ? (order.driver_name || "-") : "",
+            status: idx === 0 ? order.status : "",
+            item_code: item.item_code || "",
+            item_name: item.item_name || "",
+            qty: Number(item.order_qty || 0),
+            source_type: item.source_type || "",
+            remark: idx === 0 ? (order.memo || "-") : "",
+          });
+        });
+      }
+    }
+    return rows;
+  }, [orders]);
+
+  // checkedIds를 order.id 기준으로 관리하므로 _orderId로 매핑
+  const flatCheckedRowIds = useMemo(() => {
+    return flattenedOrders
+      .filter((r) => checkedIds.includes(r._orderId))
+      .map((r) => r._rowId);
+  }, [flattenedOrders, checkedIds]);
+
+  const handleFlatCheckedChange = useCallback((rowIds: string[]) => {
+    const orderIds = new Set<number>();
+    for (const rowId of rowIds) {
+      const row = flattenedOrders.find((r) => r._rowId === rowId);
+      if (row) orderIds.add(row._orderId);
+    }
+    setCheckedIds(Array.from(orderIds));
+  }, [flattenedOrders]);
+
+  const dataSourceTitle: Record<DataSourceType, string> = {
+    shipmentPlan: "출하계획 목록",
+    salesOrder: "수주정보 목록",
+    itemInfo: "품목정보 목록",
+  };
+
+  return (
+    <div className="flex flex-col h-full p-4 gap-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>영업관리</span>
+        <span className="text-muted-foreground/40">/</span>
+        <span className="font-semibold text-foreground">출하지시</span>
+      </nav>
+
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName={ts.tableName}
+        filterId="c16-shipping-order"
+        onFilterChange={setSearchFilters}
+        dataCount={orders.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 액션 바 */}
+      <div className="flex items-center justify-between flex-wrap gap-3 shrink-0">
+        <div className="flex items-center gap-2">
+          <h2 className="text-[15px] font-bold text-foreground">출하지시 관리</h2>
+          <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+            {orders.length}건
+          </span>
+          {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
+            <FileSpreadsheet className="w-3.5 h-3.5" />
+            엑셀 업로드
+          </Button>
+          <Button size="sm" onClick={() => openModal()}>
+            <Plus className="w-3.5 h-3.5" />
+            출하지시 등록
+          </Button>
+          <div className="w-px h-5 bg-border" />
+          <Button
+            variant="outline"
+            size="sm"
+            className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10"
+            disabled={checkedIds.length === 0}
+            onClick={handleDeleteSelected}
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+            선택삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
+          </Button>
+          <div className="w-px h-5 bg-border" />
+          <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+            <Settings2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 메인 테이블 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card flex flex-col">
+        <EDataTable
+          columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+            key: col.key,
+            label: col.label,
+            align: col.key === "qty" ? "right" : col.key === "status" || col.key === "source_type" || col.key === "ship_date" ? "center" : undefined,
+            formatNumber: col.key === "qty",
+            sortable: false,
+            filterable: false,
+            render: col.key === "status"
+              ? (val: any) => val ? (
+                  <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(val))}>
+                    {getStatusLabel(val)}
+                  </span>
+                ) : null
+              : col.key === "source_type"
+              ? (val: any) => {
+                  if (!val || val === "-") return <span>-</span>;
+                  const b = getSourceBadge(val);
+                  return <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", b.cls)}>{b.label}</span>;
+                }
+              : undefined,
+          }))}
+          data={ts.groupData(flattenedOrders)}
+          rowKey={(row) => row._rowId}
+          loading={loading}
+          emptyMessage="등록된 출하지시가 없어요"
+          showCheckbox
+          checkedIds={flatCheckedRowIds}
+          onCheckedChange={handleFlatCheckedChange}
+          selectedId={selectedOrderId != null ? String(selectedOrderId) : null}
+          onRowClick={(row) => setSelectedOrderId(row._orderId)}
+          onRowDoubleClick={(row) => openModal(row._order)}
+          showPagination
+          draggableColumns={false}
+          columnOrderKey="c16-shipping-order"
+        />
+      </div>
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="max-w-[90vw] w-[1400px] h-[90vh] flex flex-col overflow-hidden p-0 gap-0">
+          <DialogHeader className="px-4 py-3 border-b shrink-0">
+            <DialogTitle className="text-[15px] font-bold">
+              {isEditMode ? "출하지시 수정" : "출하지시 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-xs text-muted-foreground mt-0.5">
+              {isEditMode ? "출하지시 정보를 수정해요." : "왼쪽에서 데이터를 선택하고 오른쪽에서 출하지시 정보를 입력해요."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-hidden">
+            <ResizablePanelGroup direction="horizontal">
+              {/* 왼쪽: 데이터 소스 */}
+              <ResizablePanel defaultSize={55} minSize={30}>
+                <div className="flex flex-col h-full">
+                  {/* 소스 검색 헤더 */}
+                  <div className="px-4 py-2 border-b bg-muted/50 flex flex-wrap items-center gap-2 shrink-0">
+                    <Select value={dataSource} onValueChange={(v) => setDataSource(v as DataSourceType)}>
+                      <SelectTrigger className="w-[120px] h-9 text-xs"><SelectValue /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="shipmentPlan">출하계획</SelectItem>
+                        <SelectItem value="salesOrder">수주정보</SelectItem>
+                        <SelectItem value="itemInfo">품목정보</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <Input
+                      placeholder="품번, 품명 검색"
+                      className="flex-1 h-9 text-xs min-w-[120px]"
+                      value={sourceKeyword}
+                      onChange={(e) => setSourceKeyword(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") { setSourcePage(1); fetchSourceData(1); }
+                      }}
+                    />
+                    <Button
+                      size="sm"
+                      className="h-8 text-xs"
+                      onClick={() => { setSourcePage(1); fetchSourceData(1); }}
+                      disabled={sourceLoading}
+                    >
+                      {sourceLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Search className="w-3 h-3" />}
+                      <span className="ml-1">조회</span>
+                    </Button>
+                  </div>
+
+                  {/* 소스 서브 헤더 */}
+                  <div className="px-3 py-1.5 flex items-center gap-2 border-b bg-muted/30 shrink-0">
+                    <span className="text-[13px] font-bold text-foreground">{dataSourceTitle[dataSource]}</span>
+                    <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                      선택 {selectedItems.length}개
+                    </span>
+                  </div>
+
+                  {/* 소스 테이블 */}
+                  <div className="flex-1 overflow-auto">
+                    {sourceLoading ? (
+                      <div className="flex items-center justify-center py-12">
+                        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : sourceData.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground gap-2">
+                        <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
+                          <Search className="w-5 h-5 text-muted-foreground/30" />
+                        </div>
+                        <p className="text-sm">조회 버튼을 눌러 데이터를 불러와주세요</p>
+                      </div>
+                    ) : (
+                      <Table>
+                        <TableHeader className="sticky top-0 z-10">
+                          <TableRow className="bg-muted hover:bg-muted">
+                            <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">선택</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                            <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
+                            <TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처</TableHead>
+                            <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
+                            {dataSource === "shipmentPlan" && <TableHead className="w-[70px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {sourceData.map((item: any, idx: number) => {
+                            const itemId = dataSource === "itemInfo" ? item.item_code : item.id;
+                            const isSelected = selectedItems.some(s => {
+                              if (s.sourceType === dataSource) {
+                                if (dataSource === "itemInfo") return s.itemCode === itemId;
+                                return String(s.id) === String(itemId);
+                              }
+                              if (dataSource === "shipmentPlan" && s.shipmentPlanId) return String(s.shipmentPlanId) === String(item.id);
+                              if (dataSource === "salesOrder" && s.detailId) return String(s.detailId) === String(item.id);
+                              return false;
+                            });
+                            return (
+                              <TableRow
+                                key={`${dataSource}-${itemId}-${idx}`}
+                                className={cn("cursor-pointer transition-colors", isSelected && "bg-primary/5")}
+                                onClick={() => toggleSourceItem(item)}
+                              >
+                                <TableCell className="text-center" onClick={e => e.stopPropagation()}>
+                                  <Checkbox checked={isSelected} onCheckedChange={() => toggleSourceItem(item)} />
+                                </TableCell>
+                                <TableCell className="text-[13px]">{item.item_code || "-"}</TableCell>
+                                <TableCell className="text-sm font-medium">{item.item_name || "-"}</TableCell>
+                                <TableCell className="text-[13px] text-muted-foreground">{item.spec || "-"}</TableCell>
+                                <TableCell className="text-[13px]">{item.customer_name || "-"}</TableCell>
+                                <TableCell className="text-right text-[13px]">
+                                  {Number(item.plan_qty || item.qty || item.balance_qty || 0).toLocaleString()}
+                                </TableCell>
+                                {dataSource === "shipmentPlan" && (
+                                  <TableCell className="text-center">
+                                    <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", getStatusColor(item.status))}>
+                                      {getStatusLabel(item.status)}
+                                    </span>
+                                  </TableCell>
+                                )}
+                              </TableRow>
+                            );
+                          })}
+                        </TableBody>
+                      </Table>
+                    )}
+                  </div>
+
+                  {/* 페이징 */}
+                  {sourceTotalCount > 0 && (
+                    <div className="px-3 py-1.5 border-t bg-muted/30 flex items-center justify-between shrink-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-muted-foreground text-[11px]">표시:</span>
+                        <Input
+                          type="number"
+                          min={1}
+                          max={500}
+                          value={sourcePageSize}
+                          onChange={(e) => {
+                            const v = parseInt(e.target.value, 10);
+                            if (v > 0) { setSourcePageSize(v); setSourcePage(1); fetchSourceData(1); }
+                          }}
+                          className="h-7 w-[60px] text-center text-[11px]"
+                        />
+                        <span className="text-muted-foreground text-[11px]">총 {sourceTotalCount}건</span>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => { setSourcePage(1); fetchSourceData(1); }}>
+                          <ChevronsLeft className="w-3.5 h-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7" disabled={sourcePage <= 1}
+                          onClick={() => { const p = sourcePage - 1; setSourcePage(p); fetchSourceData(p); }}>
+                          <ChevronLeft className="w-3.5 h-3.5" />
+                        </Button>
+                        <span className="text-xs font-medium px-2">
+                          {sourcePage} / {Math.max(1, Math.ceil(sourceTotalCount / sourcePageSize))}
+                        </span>
+                        <Button variant="outline" size="icon" className="h-7 w-7"
+                          disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                          onClick={() => { const p = sourcePage + 1; setSourcePage(p); fetchSourceData(p); }}>
+                          <ChevronRight className="w-3.5 h-3.5" />
+                        </Button>
+                        <Button variant="outline" size="icon" className="h-7 w-7"
+                          disabled={sourcePage >= Math.ceil(sourceTotalCount / sourcePageSize)}
+                          onClick={() => { const p = Math.ceil(sourceTotalCount / sourcePageSize); setSourcePage(p); fetchSourceData(p); }}>
+                          <ChevronsRight className="w-3.5 h-3.5" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle onPointerDown={(e) => e.stopPropagation()} />
+
+              {/* 오른쪽: 폼 */}
+              <ResizablePanel defaultSize={45} minSize={30}>
+                <div className="flex flex-col h-full overflow-auto p-4 gap-4">
+                  {/* 기본 정보 */}
+                  <div className="border rounded-lg p-4 shrink-0">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-3">기본 정보</p>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">출하지시번호</Label>
+                        <Input value={formOrderNumber} readOnly className="h-9 bg-muted/50 text-muted-foreground" />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">
+                          출하지시일 <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                          type="date"
+                          className="h-9"
+                          value={formOrderDate}
+                          onChange={(e) => setFormOrderDate(e.target.value)}
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">거래처</Label>
+                        <Input value={formCustomer} readOnly placeholder="품목 선택 시 자동" className="h-9 bg-muted/50" />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[11px] font-semibold text-muted-foreground">상태</Label>
+                        <Select value={formStatus} onValueChange={setFormStatus}>
+                          <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="READY">준비중</SelectItem>
+                            <SelectItem value="IN_PROGRESS">진행중</SelectItem>
+                            <SelectItem value="COMPLETED">완료</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 운송 정보 */}
+                  <div className="bg-muted/50 border rounded-lg overflow-hidden shrink-0">
+                    <button
+                      className="w-full px-4 py-2.5 flex items-center justify-between text-left"
+                      onClick={() => setIsTransportCollapsed(!isTransportCollapsed)}
+                    >
+                      <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2">
+                        운송 정보 <span className="text-[10px] font-normal">(선택사항)</span>
+                      </p>
+                      {isTransportCollapsed
+                        ? <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />
+                        : <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+                      }
+                    </button>
+                    {!isTransportCollapsed && (
+                      <div className="px-4 pb-3 grid grid-cols-3 gap-3">
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">운송업체</Label>
+                          <Input value={formCarrier} onChange={(e) => setFormCarrier(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">차량번호</Label>
+                          <Input value={formVehicle} onChange={(e) => setFormVehicle(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">기사명</Label>
+                          <Input value={formDriver} onChange={(e) => setFormDriver(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">연락처</Label>
+                          <Input value={formDriverPhone} onChange={(e) => setFormDriverPhone(e.target.value)} className="h-9" />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">도착예정일시</Label>
+                          <Input
+                            type="datetime-local"
+                            className="h-9"
+                            value={formArrival}
+                            onChange={(e) => setFormArrival(e.target.value)}
+                          />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[11px] font-semibold text-muted-foreground">배송지</Label>
+                          <Input value={formAddress} onChange={(e) => setFormAddress(e.target.value)} className="h-9" />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 선택된 품목 */}
+                  <div className="border rounded-lg p-4 flex-1 flex flex-col min-h-[200px]">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-2 flex items-center gap-2">
+                      선택된 품목
+                      <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                        {selectedItems.length}
+                      </span>
+                    </p>
+                    <div className="flex-1 overflow-auto min-h-0">
+                      {selectedItems.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground border-2 border-dashed rounded-lg gap-2">
+                          <div className="w-10 h-10 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
+                            <Inbox className="w-4 h-4 text-muted-foreground/30" />
+                          </div>
+                          <p className="text-sm">왼쪽에서 데이터를 선택해주세요</p>
+                        </div>
+                      ) : (
+                        <Table>
+                          <TableHeader className="sticky top-0 z-10">
+                            <TableRow className="bg-muted hover:bg-muted">
+                              <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">소스</TableHead>
+                              <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
+                              <TableHead className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
+                              <TableHead className="w-[90px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하수량</TableHead>
+                              <TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획수량</TableHead>
+                              <TableHead className="w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">삭제</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {selectedItems.map((item, idx) => {
+                              const b = getSourceBadge(item.sourceType);
+                              return (
+                                <TableRow key={`${item.sourceType}-${item.id}-${idx}`}>
+                                  <TableCell className="text-center">
+                                    <span className={cn("px-1.5 py-0.5 rounded text-[10px] font-medium", b.cls)}>
+                                      {b.label.charAt(0)}
+                                    </span>
+                                  </TableCell>
+                                  <TableCell className="text-[13px]">{item.itemCode}</TableCell>
+                                  <TableCell className="text-sm font-medium">{item.itemName}</TableCell>
+                                  <TableCell className="text-center">
+                                    <Input
+                                      type="number"
+                                      value={item.orderQty}
+                                      onChange={(e) => updateOrderQty(idx, parseInt(e.target.value) || 0)}
+                                      min={1}
+                                      className="h-7 w-[70px] text-xs text-right mx-auto"
+                                    />
+                                  </TableCell>
+                                  <TableCell className="text-right text-[13px]">
+                                    {item.planQty ? item.planQty.toLocaleString() : "-"}
+                                  </TableCell>
+                                  <TableCell className="text-center">
+                                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => removeSelectedItem(idx)}>
+                                      <X className="w-3.5 h-3.5 text-destructive" />
+                                    </Button>
+                                  </TableCell>
+                                </TableRow>
+                              );
+                            })}
+                          </TableBody>
+                        </Table>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* 메모 */}
+                  <div className="border rounded-lg p-4 shrink-0">
+                    <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-2">메모</p>
+                    <Textarea
+                      value={formMemo}
+                      onChange={(e) => setFormMemo(e.target.value)}
+                      placeholder="출하지시 관련 메모를 입력해주세요"
+                      rows={2}
+                      className="resize-y"
+                    />
+                  </div>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+
+          {/* 모달 하단 버튼 */}
+          <div className="flex items-center justify-end gap-2 px-4 py-3 border-t shrink-0">
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              저장
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 엑셀 업로드 모달 */}
+      <ExcelUploadModal
+        open={excelUploadOpen}
+        onOpenChange={setExcelUploadOpen}
+        tableName="shipping-order"
+        onSuccess={() => { fetchOrders(); }}
+      />
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_9/sales/shipping-plan/page.tsx b/frontend/app/(main)/COMPANY_9/sales/shipping-plan/page.tsx
new file mode 100644
index 00000000..747ac23d
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_9/sales/shipping-plan/page.tsx
@@ -0,0 +1,454 @@
+"use client";
+
+import React, { useState, useMemo, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { X, Save, Loader2, Inbox, Settings2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  getShipmentPlanList,
+  updateShipmentPlan,
+  type ShipmentPlanListItem,
+} from "@/lib/api/shipping";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
+
+const GRID_COLUMNS = [
+  { key: "order_no", label: "수주번호" },
+  { key: "due_date", label: "납기일" },
+  { key: "customer_name", label: "거래처" },
+  { key: "part_code", label: "품목코드" },
+  { key: "part_name", label: "품목명" },
+  { key: "order_qty", label: "수주수량" },
+  { key: "plan_qty", label: "계획수량" },
+  { key: "plan_date", label: "계획일" },
+  { key: "status", label: "상태" },
+];
+
+const STATUS_OPTIONS = [
+  { value: "all", label: "전체" },
+  { value: "READY", label: "준비" },
+  { value: "CONFIRMED", label: "확정" },
+  { value: "SHIPPING", label: "출하중" },
+  { value: "COMPLETED", label: "완료" },
+  { value: "CANCEL_REQUEST", label: "취소요청" },
+  { value: "CANCELLED", label: "취소완료" },
+];
+
+const getStatusLabel = (status: string) => {
+  const found = STATUS_OPTIONS.find(o => o.value === status);
+  return found?.label || status;
+};
+
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case "READY": return "bg-primary/10 text-primary";
+    case "CONFIRMED": return "bg-secondary text-secondary-foreground";
+    case "SHIPPING": return "bg-warning/10 text-warning";
+    case "COMPLETED": return "bg-success/10 text-success";
+    case "CANCEL_REQUEST": return "bg-destructive/10 text-destructive";
+    case "CANCELLED": return "bg-muted text-muted-foreground";
+    default: return "bg-muted text-muted-foreground";
+  }
+};
+
+export default function ShippingPlanPage() {
+  const ts = useTableSettings("c16-shipping-plan", "shipment_plan", GRID_COLUMNS);
+  const [data, setData] = useState<ShipmentPlanListItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const [checkedIds, setCheckedIds] = useState<number[]>([]);
+
+  // 검색 필터 (DynamicSearchFilter에서 관리)
+  const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
+
+  // 상세 패널 편집
+  const [editPlanQty, setEditPlanQty] = useState("");
+  const [editPlanDate, setEditPlanDate] = useState("");
+  const [editMemo, setEditMemo] = useState("");
+  const [isDetailChanged, setIsDetailChanged] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+
+  // 데이터 조회
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: any = {};
+      for (const f of searchFilters) {
+        if (f.columnName === "plan_date" && f.operator === "between" && f.value) {
+          const [from, to] = f.value.split(",");
+          if (from) params.dateFrom = from;
+          if (to) params.dateTo = to;
+        } else if (f.columnName === "status") {
+          params.status = f.value;
+        } else if (f.columnName === "customer_name") {
+          params.customer = f.value;
+        } else {
+          params.keyword = f.value;
+        }
+      }
+
+      const result = await getShipmentPlanList(params);
+      if (result.success) {
+        setData(result.data || []);
+      }
+    } catch (err) {
+      console.error("출하계획 조회 실패:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFilters]);
+
+  // searchFilters 변경 시 자동 조회
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const selectedPlan = useMemo(() => data.find(p => p.id === selectedId), [data, selectedId]);
+
+  const groupedData = useMemo(() => {
+    const grouped = ts.groupData(data);
+    const orderMap = new Map<string, any[]>();
+    const orderKeys: string[] = [];
+    grouped.forEach(plan => {
+      const key = (plan as any)._isGroupSummary ? `_summary_${orderKeys.length}` : (plan.order_no || `_no_order_${plan.id}`);
+      if (!orderMap.has(key)) {
+        orderMap.set(key, []);
+        orderKeys.push(key);
+      }
+      orderMap.get(key)!.push(plan);
+    });
+    return orderKeys.map(key => ({
+      orderNo: key,
+      plans: orderMap.get(key)!,
+    }));
+  }, [data, ts.groupData]);
+
+  const handleRowClick = (plan: ShipmentPlanListItem) => {
+    if (isDetailChanged && selectedId !== plan.id) {
+      if (!confirm("변경사항이 있습니다. 저장하지 않고 이동하시겠습니까?")) return;
+    }
+    setSelectedId(plan.id);
+    setEditPlanQty(String(Number(plan.plan_qty)));
+    setEditPlanDate(plan.plan_date ? plan.plan_date.split("T")[0] : "");
+    setEditMemo(plan.memo || "");
+    setIsDetailChanged(false);
+  };
+
+  const handleCheckAll = (checked: boolean) => {
+    if (checked) {
+      setCheckedIds(data.filter(p => p.status !== "CANCELLED").map(p => p.id));
+    } else {
+      setCheckedIds([]);
+    }
+  };
+
+  const handleSaveDetail = async () => {
+    if (!selectedId || !selectedPlan) return;
+
+    const qty = Number(editPlanQty);
+    if (qty <= 0) {
+      alert("계획수량은 0보다 커야 해요.");
+      return;
+    }
+    if (!editPlanDate) {
+      alert("출하계획일을 입력해주세요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const result = await updateShipmentPlan(selectedId, {
+        planQty: qty,
+        planDate: editPlanDate,
+        memo: editMemo,
+      });
+      if (result.success) {
+        setIsDetailChanged(false);
+        alert("저장되었어요.");
+        fetchData();
+      } else {
+        alert(result.message || "저장 실패");
+      }
+    } catch (err: any) {
+      alert(err.message || "저장 중 오류 발생");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const formatDate = (dateStr: string) => {
+    if (!dateStr) return "-";
+    return dateStr.split("T")[0];
+  };
+
+  const formatNumber = (val: string | number) => {
+    const num = Number(val);
+    return isNaN(num) ? "0" : num.toLocaleString();
+  };
+
+  return (
+    <div className="flex flex-col h-full p-4 gap-3">
+      {/* 브레드크럼 */}
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
+        <span>영업관리</span>
+        <span className="text-muted-foreground/40">/</span>
+        <span className="font-semibold text-foreground">출하계획</span>
+      </nav>
+
+      {/* 검색 필터 (DynamicSearchFilter) */}
+      <DynamicSearchFilter
+        tableName="shipment_plan"
+        filterId="c16-shipping-plan"
+        onFilterChange={setSearchFilters}
+        dataCount={data.length}
+        externalFilterConfig={ts.filterConfig}
+      />
+
+      {/* 마스터-디테일 */}
+      <div className="flex-1 overflow-hidden rounded-lg border bg-card">
+        <ResizablePanelGroup direction="horizontal">
+          {/* 좌측: 출하계획 목록 */}
+          <ResizablePanel defaultSize={60} minSize={30}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-bold text-foreground">출하계획 목록</span>
+                  <span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">
+                    {data.length}건
+                  </span>
+                  {loading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
+                </div>
+                <Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)} title="테이블 설정">
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {/* 테이블 */}
+              <div className="flex-1 overflow-auto">
+                <EDataTable
+                  columns={[
+                    { key: "order_no", label: "수주번호", render: (val: any) => <span className="font-medium text-sm">{val || "-"}</span> },
+                    { key: "due_date", label: "납기일", align: "center" as const, render: (val: any) => <span className="text-sm">{formatDate(val)}</span> },
+                    { key: "customer_name", label: "거래처", render: (val: any) => <span className="text-sm">{val || "-"}</span> },
+                    { key: "part_code", label: "품목코드", render: (val: any) => <span className="text-muted-foreground text-[13px]">{val || "-"}</span> },
+                    { key: "part_name", label: "품목명", render: (val: any) => <span className="font-medium text-sm">{val || "-"}</span> },
+                    { key: "order_qty", label: "수주수량", align: "right" as const, formatNumber: true },
+                    { key: "plan_qty", label: "계획수량", align: "right" as const, render: (val: any) => <span className="font-semibold text-primary text-sm">{formatNumber(val)}</span> },
+                    { key: "plan_date", label: "계획일", align: "center" as const, render: (val: any) => <span className="text-sm">{formatDate(val)}</span> },
+                    { key: "status", label: "상태", align: "center" as const, render: (val: any) => <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(val))}>{getStatusLabel(val)}</span> },
+                  ] as EDataTableColumn<ShipmentPlanListItem>[]}
+                  data={data}
+                  rowKey={(row) => String(row.id)}
+                  loading={loading}
+                  emptyMessage="출하계획이 없어요"
+                  selectedId={selectedId !== null ? String(selectedId) : null}
+                  onSelect={(id) => {
+                    if (id) {
+                      const plan = data.find(p => String(p.id) === id);
+                      if (plan) handleRowClick(plan);
+                    }
+                  }}
+                  onRowClick={(row) => handleRowClick(row)}
+                  showCheckbox
+                  checkedIds={checkedIds.map(String)}
+                  onCheckedChange={(ids) => setCheckedIds(ids.map(Number))}
+                  showPagination={false}
+                  draggableColumns={false}
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 우측: 상세 패널 */}
+          <ResizablePanel defaultSize={40} minSize={20}>
+            <div className="flex flex-col h-full">
+              {/* 패널 헤더 */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-bold text-foreground">출하계획 상세</span>
+                  {selectedPlan && (
+                    <span className="text-[11px] font-mono text-muted-foreground">{selectedPlan.shipment_plan_no}</span>
+                  )}
+                </div>
+                {selectedPlan && (
+                  <div className="flex items-center gap-1.5">
+                    <Button
+                      size="sm"
+                      onClick={handleSaveDetail}
+                      disabled={!isDetailChanged || saving}
+                      variant={isDetailChanged ? "default" : "secondary"}
+                    >
+                      {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
+                      저장
+                    </Button>
+                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setSelectedId(null)}>
+                      <X className="w-3.5 h-3.5" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {/* 상세 컨텐츠 */}
+              {selectedPlan ? (
+                <div className="flex-1 overflow-auto p-4 space-y-4">
+                  {/* 기본 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">상태</p>
+                      <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium inline-block", getStatusColor(selectedPlan.status))}>
+                        {getStatusLabel(selectedPlan.status)}
+                      </span>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주번호</p>
+                      <p className="text-sm font-mono text-muted-foreground">{selectedPlan.order_no || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">거래처</p>
+                      <p className="text-sm font-medium text-foreground">{selectedPlan.customer_name || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">납기일</p>
+                      <p className="text-sm text-foreground">{formatDate(selectedPlan.due_date)}</p>
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 품목 정보 */}
+                  <div>
+                    <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-2">품목 정보</p>
+                    <div className="grid grid-cols-2 gap-3 bg-muted/30 border rounded-md p-3">
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">품목코드</p>
+                        <p className="text-sm font-mono text-muted-foreground">{selectedPlan.part_code || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">품목명</p>
+                        <p className="text-sm font-medium text-foreground">{selectedPlan.part_name || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">규격</p>
+                        <p className="text-sm text-foreground">{selectedPlan.spec || "-"}</p>
+                      </div>
+                      <div>
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">재질</p>
+                        <p className="text-sm text-foreground">{selectedPlan.material || "-"}</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 수량 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">수주수량</p>
+                      <p className="text-sm text-foreground">{formatNumber(selectedPlan.order_qty)}</p>
+                    </div>
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">계획수량</Label>
+                      <Input
+                        type="number"
+                        className="h-9"
+                        value={editPlanQty}
+                        onChange={(e) => { setEditPlanQty(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                      />
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">출하수량</p>
+                      <p className="text-sm text-foreground">{formatNumber(selectedPlan.shipped_qty)}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">잔여수량</p>
+                      <p className={cn(
+                        "font-semibold text-sm",
+                        (Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty)) > 0
+                          ? "text-destructive"
+                          : "text-success"
+                      )}>
+                        {formatNumber(Number(selectedPlan.plan_qty) - Number(selectedPlan.shipped_qty))}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 출하 정보 */}
+                  <div className="space-y-3">
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">출하계획일</Label>
+                      <Input
+                        type="date"
+                        className="h-9"
+                        value={editPlanDate}
+                        onChange={(e) => { setEditPlanDate(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                      />
+                    </div>
+                    <div>
+                      <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1 block">비고</Label>
+                      <Textarea
+                        className="min-h-[80px] resize-y text-sm"
+                        value={editMemo}
+                        onChange={(e) => { setEditMemo(e.target.value); setIsDetailChanged(true); }}
+                        disabled={selectedPlan.status === "CANCELLED" || selectedPlan.status === "COMPLETED"}
+                        placeholder="비고를 입력해주세요"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="border-t" />
+
+                  {/* 등록 정보 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">등록자</p>
+                      <p className="text-sm text-foreground">{selectedPlan.created_by || "-"}</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground mb-1">등록일시</p>
+                      <p className="text-sm text-foreground">
+                        {selectedPlan.created_date ? new Date(selectedPlan.created_date).toLocaleString("ko-KR") : "-"}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex flex-col items-center justify-center h-full text-center p-8 text-muted-foreground">
+                  <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center mb-4">
+                    <Inbox className="w-6 h-6 text-muted-foreground/30" />
+                  </div>
+                  <p className="text-sm font-medium">좌측에서 출하계획을 선택해주세요</p>
+                  <p className="text-xs text-muted-foreground/60 mt-1">선택하면 상세 정보가 표시돼요</p>
+                </div>
+              )}
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      <TableSettingsModal
+        open={ts.open}
+        onOpenChange={ts.setOpen}
+        tableName={ts.tableName}
+        settingsId={ts.settingsId}
+        defaultVisibleKeys={ts.defaultVisibleKeys}
+        onSave={ts.applySettings}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/admin/screenMng/popSettingsMng/page.tsx b/frontend/app/(main)/admin/screenMng/popSettingsMng/page.tsx
new file mode 100644
index 00000000..619c3675
--- /dev/null
+++ b/frontend/app/(main)/admin/screenMng/popSettingsMng/page.tsx
@@ -0,0 +1,1053 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { apiClient } from "@/lib/api/client";
+import type { PopSettings } from "@/hooks/pop/usePopSettings";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Save,
+  RotateCcw,
+  X,
+  Plus,
+  Trash2,
+  Settings2,
+  Loader2,
+  ChevronRight,
+  ChevronDown,
+  PackageOpen,
+  Truck,
+  Factory,
+  Home,
+  Cpu,
+} from "lucide-react";
+
+// ============================================================
+// Default Settings (mirrors usePopSettings.ts DEFAULT_SETTINGS)
+// ============================================================
+const DEFAULT_SETTINGS: PopSettings = {
+  version: "hardcoded-1.0",
+  screens: {
+    processExecution: {
+      materialInput: true,
+      photoUpload: true,
+      plcEnabled: false,
+      bomFlexible: true,
+      packagingOptions: ["낱개", "박스", "파렛트"],
+      defectTypes: ["스크래치", "치수불량", "변색", "크랙", "기포"],
+      reworkTargetSelection: true,
+      groupPhotoEnabled: false,
+      dateFilter: false,
+      lastProcessInventory: "manual",
+      defaultWarehouse: false,
+      inspectionAutoJudge: "off",
+      standardTimeDisplay: false,
+      progressDisplay: false,
+    },
+    inbound: {
+      inspectionRequired: false,
+      photoUpload: false,
+      barcodeEnabled: true,
+      packagingRecord: false,
+      defectSeparation: false,
+    },
+    outbound: {
+      photoUpload: false,
+      barcodeEnabled: true,
+    },
+    home: {
+      kpiCarousel: true,
+      recentActivity: true,
+      bannerEnabled: false,
+      bannerText: "",
+      iconThemeColor: "#2563eb",
+      iconCustomImages: false,
+      dashboardLayout: "default",
+    },
+    plc: {
+      connectionType: "db",
+      refreshInterval: 5,
+      tagMappings: [],
+      alarmThresholds: [],
+    },
+  },
+};
+
+// ============================================================
+// Screen Groups & Items
+// ============================================================
+interface ScreenItem {
+  id: string;
+  name: string;
+  url: string;
+  settingsKey: string;
+  screenId: number;
+}
+
+interface ScreenGroup {
+  id: string;
+  name: string;
+  icon: string;
+  screens: ScreenItem[];
+}
+
+const SCREEN_GROUPS: ScreenGroup[] = [
+  {
+    id: "inbound",
+    name: "입고",
+    icon: "PackageOpen",
+    screens: [
+      { id: "purchase-inbound", name: "구매입고", url: "/pop/inbound/purchase", settingsKey: "inbound", screenId: 6528 },
+      { id: "inbound-cart", name: "입고 장바구니", url: "/pop/inbound/cart", settingsKey: "inbound", screenId: 6527 },
+      { id: "inbound-type", name: "입고유형선택", url: "/pop/inbound", settingsKey: "inbound", screenId: 6529 },
+    ],
+  },
+  {
+    id: "outbound",
+    name: "출고",
+    icon: "Truck",
+    screens: [
+      { id: "sales-outbound", name: "판매출고", url: "/pop/outbound/sales", settingsKey: "outbound", screenId: 5 },
+      { id: "outbound-type", name: "출고유형선택", url: "/pop/outbound", settingsKey: "outbound", screenId: 6 },
+      { id: "outbound-cart", name: "출고 장바구니", url: "/pop/outbound/cart", settingsKey: "outbound", screenId: 7010 },
+    ],
+  },
+  {
+    id: "production",
+    name: "생산",
+    icon: "Factory",
+    screens: [
+      { id: "process-execution", name: "공정실행", url: "/pop/production/process", settingsKey: "processExecution", screenId: 7 },
+      { id: "production-main", name: "생산관리", url: "/pop/production", settingsKey: "processExecution", screenId: 8 },
+    ],
+  },
+  {
+    id: "home",
+    name: "홈",
+    icon: "Home",
+    screens: [
+      { id: "home-screen", name: "홈 화면", url: "/pop/home", settingsKey: "home", screenId: 6526 },
+    ],
+  },
+  {
+    id: "plc",
+    name: "PLC",
+    icon: "Cpu",
+    screens: [
+      { id: "plc-settings", name: "PLC 연동", url: "/pop/home", settingsKey: "plc", screenId: 6526 },
+    ],
+  },
+];
+
+const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
+  PackageOpen,
+  Truck,
+  Factory,
+  Home,
+  Cpu,
+};
+
+// ============================================================
+// Settings Schema
+// ============================================================
+interface SettingField {
+  key: string;
+  label: string;
+  description: string;
+  type: "toggle" | "text" | "number" | "select" | "color" | "tags" | "array-object" | "numbering-rule";
+  defaultValue?: unknown;
+  options?: { value: string; label: string }[];
+  fields?: { key: string; label: string; type: string }[];
+  tableFilter?: string; // numbering-rule용: inbound/outbound 등
+  showOnlyForScreens?: string[]; // 특정 화면 ID에서만 표시 (예: ["inbound-cart"])
+}
+
+const SETTINGS_SCHEMA: Record<string, SettingField[]> = {
+  inbound: [
+    { key: "numberingRuleId", label: "📋 입고번호 채번규칙", description: "입고 확정 시 사용할 채번규칙을 선택합니다", type: "numbering-rule", tableFilter: "inbound", showOnlyForScreens: ["inbound-cart"] },
+    { key: "barcodeEnabled", label: "바코드 스캔 (미구현)", description: "바코드/QR 스캔 기능을 사용합니다", type: "toggle" },
+    { key: "inspectionRequired", label: "검사 필수 (미구현)", description: "입고 시 검사 항목을 필수로 표시합니다", type: "toggle" },
+    { key: "photoUpload", label: "사진 첨부 (미구현)", description: "입고 확정 시 사진 첨부를 허용합니다", type: "toggle" },
+    { key: "packagingRecord", label: "포장 기록 (미구현)", description: "포장/적재 상세 기록을 사용합니다", type: "toggle" },
+    { key: "defectSeparation", label: "불량 분리 (미구현)", description: "양품/불량 수량을 분리 입력합니다", type: "toggle" },
+  ],
+  outbound: [
+    { key: "numberingRuleId", label: "📋 출고번호 채번규칙", description: "출고 확정 시 사용할 채번규칙을 선택합니다", type: "numbering-rule", tableFilter: "outbound", showOnlyForScreens: ["outbound-cart"] },
+    { key: "barcodeEnabled", label: "바코드 스캔 (미구현)", description: "바코드/QR 스캔 기능을 사용합니다", type: "toggle" },
+    { key: "photoUpload", label: "사진 첨부 (미구현)", description: "출고 시 사진 첨부를 허용합니다", type: "toggle" },
+  ],
+  processExecution: [
+    { key: "materialInput", label: "자재 투입", description: "BOM 기반 자재 투입 탭을 표시합니다", type: "toggle" },
+    { key: "bomFlexible", label: "BOM 유동 투입 (미구현)", description: "기준과 다른 수량 투입을 허용합니다", type: "toggle" },
+    { key: "photoUpload", label: "사진 첨부 (미구현)", description: "실적 입력 시 사진 첨부를 허용합니다", type: "toggle" },
+    { key: "groupPhotoEnabled", label: "그룹별 사진", description: "체크리스트 그룹마다 사진을 첨부합니다", type: "toggle" },
+    { key: "plcEnabled", label: "PLC 연동 (미구현)", description: "설비 PLC 데이터를 자동 연동합니다", type: "toggle" },
+    { key: "reworkTargetSelection", label: "재작업 공정 지정 (미구현)", description: "불량 처리 시 특정 공정을 선택할 수 있습니다", type: "toggle" },
+    { key: "dateFilter", label: "날짜 필터 (미구현)", description: "작업지시 목록에 날짜 필터를 표시합니다", type: "toggle" },
+    {
+      key: "lastProcessInventory", label: "마지막 공정 입고 (미구현)", description: "마지막 공정 완료 시 재고 입고 방식", type: "select", options: [
+        { value: "auto", label: "자동 입고" },
+        { value: "manual", label: "수동 선택" },
+        { value: "button", label: "버튼 활성화" },
+      ],
+    },
+    { key: "defaultWarehouse", label: "기본 창고 기억 (미구현)", description: "선택한 창고를 다음에도 자동 선택합니다", type: "toggle" },
+    {
+      key: "inspectionAutoJudge", label: "검사 자동 판정 (미구현)", description: "수치 검사 시 상/하한 초과 처리 방식", type: "select", options: [
+        { value: "off", label: "사용 안 함" },
+        { value: "warn", label: "경고만 표시" },
+        { value: "fail", label: "자동 불량" },
+      ],
+    },
+    { key: "standardTimeDisplay", label: "표준시간 비교 (미구현)", description: "표준시간 대비 실제시간을 표시합니다", type: "toggle" },
+    { key: "progressDisplay", label: "진행률 표시 (미구현)", description: "작업지시 전체 진행률을 표시합니다", type: "toggle" },
+    { key: "packagingOptions", label: "포장 옵션 (미구현)", description: "포장 단위 선택지를 관리합니다", type: "tags" },
+    { key: "defectTypes", label: "불량 유형 (미구현)", description: "불량 유형 선택지를 관리합니다", type: "tags" },
+  ],
+  home: [
+    { key: "kpiCarousel", label: "KPI 캐러셀 (미구현)", description: "오늘의 현황 캐러셀을 표시합니다", type: "toggle" },
+    { key: "recentActivity", label: "최근 활동 (미구현)", description: "최근 입출고 활동을 표시합니다", type: "toggle" },
+    { key: "bannerEnabled", label: "공지 배너", description: "상단에 공지 배너를 표시합니다", type: "toggle" },
+    { key: "bannerText", label: "배너 텍스트", description: "공지 배너에 표시할 텍스트", type: "text" },
+    { key: "iconThemeColor", label: "아이콘 테마색 (미구현)", description: "메뉴 아이콘의 테마 색상", type: "color" },
+    { key: "iconCustomImages", label: "아이콘 커스텀 (미구현)", description: "메뉴 아이콘 이미지를 커스터마이즈합니다", type: "toggle" },
+    {
+      key: "dashboardLayout", label: "대시보드 구성 (미구현)", description: "홈 대시보드 레이아웃", type: "select", options: [
+        { value: "default", label: "기본" },
+        { value: "compact", label: "컴팩트" },
+        { value: "detailed", label: "상세" },
+      ],
+    },
+  ],
+  plc: [
+    {
+      key: "connectionType", label: "연결 방식", description: "PLC 데이터 연동 방식", type: "select", options: [
+        { value: "db", label: "DB 직접 연결" },
+        { value: "opcua", label: "OPC-UA" },
+        { value: "rest", label: "REST API" },
+      ],
+    },
+    { key: "refreshInterval", label: "갱신 주기(초)", description: "PLC 데이터 갱신 주기", type: "number" },
+    {
+      key: "tagMappings", label: "태그 매핑", description: "PLC 태그와 공정/체크리스트 연결", type: "array-object", fields: [
+        { key: "tagName", label: "태그명", type: "text" },
+        { key: "processCode", label: "공정코드", type: "text" },
+        { key: "checklistItemId", label: "체크리스트 항목", type: "text" },
+        { key: "unit", label: "단위", type: "text" },
+      ],
+    },
+    {
+      key: "alarmThresholds", label: "알람 임계값", description: "PLC 값 임계치 경고 설정", type: "array-object", fields: [
+        { key: "tagName", label: "태그명", type: "text" },
+        { key: "lowerLimit", label: "하한", type: "number" },
+        { key: "upperLimit", label: "상한", type: "number" },
+        { key: "action", label: "동작", type: "select" },
+      ],
+    },
+  ],
+};
+
+// ============================================================
+// 채번규칙 셀렉트 컴포넌트
+// ============================================================
+
+function NumberingRuleSelect({
+  field,
+  value,
+  onChange,
+}: {
+  field: SettingField;
+  value: unknown;
+  onChange: (value: unknown) => void;
+}) {
+  const { user } = useAuth();
+  const [rules, setRules] = useState<{ value: string; label: string }[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const loadRules = async () => {
+      setLoading(true);
+      try {
+        const companyCode = user?.companyCode || "COMPANY_7";
+        const res = await apiClient.get(`/numbering-rules?company_code=${companyCode}`);
+        const data = res.data?.data || res.data || [];
+        const allRules: any[] = Array.isArray(data) ? data : (data.rules || []);
+        // tableFilter로 필터링 (inbound/outbound 등)
+        const filtered = field.tableFilter
+          ? allRules.filter((r: any) => {
+              const t = (r.tableName || "").toLowerCase();
+              const c = (r.columnName || "").toLowerCase();
+              const n = (r.ruleName || "").toLowerCase();
+              const f = field.tableFilter!.toLowerCase();
+              return t.includes(f) || c.includes(f) || n.includes(f);
+            })
+          : allRules;
+        const finalRules = filtered.length > 0 ? filtered : allRules;
+        setRules(
+          finalRules.map((r: any) => ({
+            value: r.ruleId,
+            label: `${r.ruleName || r.tableName + "." + r.columnName}`,
+          }))
+        );
+      } catch {
+        setRules([]);
+      }
+      setLoading(false);
+    };
+    loadRules();
+  }, [user?.companyCode, field.tableFilter]);
+
+  return (
+    <div className="py-3 border-b last:border-0 space-y-1.5">
+      <Label className="text-sm font-medium">{field.label}</Label>
+      <p className="text-xs text-muted-foreground">{field.description}</p>
+      {loading ? (
+        <p className="text-xs text-muted-foreground">채번규칙 로드 중...</p>
+      ) : rules.length === 0 ? (
+        <p className="text-xs text-amber-600">등록된 채번규칙이 없습니다. PC에서 먼저 채번규칙을 등록해주세요.</p>
+      ) : (
+        <Select value={(value as string) || ""} onValueChange={onChange}>
+          <SelectTrigger className="w-full h-9">
+            <SelectValue placeholder="채번규칙을 선택하세요" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="__none__">선택 안 함 (기본)</SelectItem>
+            {rules.map((r) => (
+              <SelectItem key={r.value} value={r.value}>{r.label}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+    </div>
+  );
+}
+
+// ============================================================
+// Sub-components: TagEditor, ArrayObjectEditor
+// ============================================================
+
+function TagEditor({
+  label,
+  description,
+  tags,
+  onChange,
+}: {
+  label: string;
+  description: string;
+  tags: string[];
+  onChange: (tags: string[]) => void;
+}) {
+  const [input, setInput] = useState("");
+
+  return (
+    <div className="py-3 border-b last:border-0">
+      <Label className="text-sm font-medium">{label}</Label>
+      <p className="text-xs text-muted-foreground mt-0.5 mb-2">{description}</p>
+      <div className="flex flex-wrap gap-1.5 mb-2">
+        {tags.map((tag, idx) => (
+          <Badge key={`${tag}-${idx}`} variant="secondary" className="gap-1 pr-1">
+            {tag}
+            <button
+              onClick={() => onChange(tags.filter((_, i) => i !== idx))}
+              className="ml-0.5 hover:text-destructive"
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </Badge>
+        ))}
+      </div>
+      <div className="flex gap-2">
+        <Input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && input.trim()) {
+              e.preventDefault();
+              onChange([...tags, input.trim()]);
+              setInput("");
+            }
+          }}
+          placeholder="추가 후 Enter"
+          className="flex-1 h-8 text-sm"
+        />
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => {
+            if (input.trim()) {
+              onChange([...tags, input.trim()]);
+              setInput("");
+            }
+          }}
+        >
+          <Plus className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function ArrayObjectEditor({
+  field,
+  items,
+  onChange,
+}: {
+  field: SettingField;
+  items: Record<string, unknown>[];
+  onChange: (items: Record<string, unknown>[]) => void;
+}) {
+  const addRow = () => {
+    const newRow: Record<string, unknown> = {};
+    field.fields?.forEach((f) => {
+      newRow[f.key] = f.type === "number" ? 0 : "";
+    });
+    onChange([...items, newRow]);
+  };
+
+  const updateRow = (index: number, key: string, value: unknown) => {
+    const updated = items.map((item, i) => (i === index ? { ...item, [key]: value } : item));
+    onChange(updated);
+  };
+
+  const removeRow = (index: number) => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+
+  return (
+    <div className="py-3 border-b last:border-0">
+      <div className="flex items-center justify-between mb-2">
+        <div>
+          <Label className="text-sm font-medium">{field.label}</Label>
+          <p className="text-xs text-muted-foreground mt-0.5">{field.description}</p>
+        </div>
+        <Button type="button" variant="outline" size="sm" onClick={addRow}>
+          <Plus className="h-3.5 w-3.5 mr-1" />
+          추가
+        </Button>
+      </div>
+      {items.length === 0 && (
+        <p className="text-xs text-muted-foreground py-2">항목이 없습니다. 추가 버튼을 눌러주세요.</p>
+      )}
+      <div className="space-y-2">
+        {items.map((item, index) => (
+          <div key={index} className="flex items-start gap-2 p-2 bg-muted/30 rounded-md">
+            <div className="flex-1 grid grid-cols-2 gap-2">
+              {field.fields?.map((f) => (
+                <div key={f.key}>
+                  <Label className="text-xs text-muted-foreground">{f.label}</Label>
+                  {f.type === "number" ? (
+                    <Input
+                      type="number"
+                      value={item[f.key] as number || 0}
+                      onChange={(e) => updateRow(index, f.key, Number(e.target.value))}
+                      className="h-7 text-xs"
+                    />
+                  ) : f.type === "select" ? (
+                    <Select
+                      value={(item[f.key] as string) || ""}
+                      onValueChange={(v) => updateRow(index, f.key, v)}
+                    >
+                      <SelectTrigger size="sm" className="h-7 text-xs">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="warn">경고</SelectItem>
+                        <SelectItem value="stop">정지</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  ) : (
+                    <Input
+                      value={(item[f.key] as string) || ""}
+                      onChange={(e) => updateRow(index, f.key, e.target.value)}
+                      className="h-7 text-xs"
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 mt-4 text-muted-foreground hover:text-destructive"
+              onClick={() => removeRow(index)}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================
+// SettingRow — renders a single setting field
+// ============================================================
+function SettingRow({
+  field,
+  value,
+  onChange,
+}: {
+  field: SettingField;
+  value: unknown;
+  onChange: (value: unknown) => void;
+}) {
+  switch (field.type) {
+    case "toggle":
+      return (
+        <div className="flex items-center justify-between py-3 border-b last:border-0">
+          <div className="pr-4">
+            <Label className="text-sm font-medium">{field.label}</Label>
+            <p className="text-xs text-muted-foreground mt-0.5">{field.description}</p>
+          </div>
+          <Switch checked={!!value} onCheckedChange={onChange} />
+        </div>
+      );
+    case "text":
+      return (
+        <div className="py-3 border-b last:border-0 space-y-1.5">
+          <Label className="text-sm font-medium">{field.label}</Label>
+          <p className="text-xs text-muted-foreground">{field.description}</p>
+          <Input
+            value={(value as string) || ""}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={field.label}
+            className="h-9"
+          />
+        </div>
+      );
+    case "number":
+      return (
+        <div className="py-3 border-b last:border-0 space-y-1.5">
+          <Label className="text-sm font-medium">{field.label}</Label>
+          <p className="text-xs text-muted-foreground">{field.description}</p>
+          <Input
+            type="number"
+            value={(value as number) ?? 0}
+            onChange={(e) => onChange(Number(e.target.value))}
+            className="h-9 w-32"
+          />
+        </div>
+      );
+    case "select":
+      return (
+        <div className="py-3 border-b last:border-0 space-y-1.5">
+          <Label className="text-sm font-medium">{field.label}</Label>
+          <p className="text-xs text-muted-foreground">{field.description}</p>
+          <Select value={(value as string) || field.options?.[0]?.value || ""} onValueChange={onChange}>
+            <SelectTrigger size="sm" className="w-48">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {field.options?.map((o) => (
+                <SelectItem key={o.value} value={o.value}>
+                  {o.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      );
+    case "numbering-rule":
+      return <NumberingRuleSelect field={field} value={value} onChange={onChange} />;
+    case "color":
+      return (
+        <div className="py-3 border-b last:border-0 space-y-1.5">
+          <Label className="text-sm font-medium">{field.label}</Label>
+          <p className="text-xs text-muted-foreground">{field.description}</p>
+          <div className="flex items-center gap-2">
+            <input
+              type="color"
+              value={(value as string) || "#2563eb"}
+              onChange={(e) => onChange(e.target.value)}
+              className="w-9 h-9 rounded-md cursor-pointer border border-input p-0.5"
+            />
+            <Input
+              value={(value as string) || "#2563eb"}
+              onChange={(e) => onChange(e.target.value)}
+              className="h-9 w-32"
+              placeholder="#hex"
+            />
+          </div>
+        </div>
+      );
+    case "tags":
+      return (
+        <TagEditor
+          label={field.label}
+          description={field.description}
+          tags={(value as string[]) || []}
+          onChange={onChange}
+        />
+      );
+    case "array-object":
+      return (
+        <ArrayObjectEditor
+          field={field}
+          items={(value as Record<string, unknown>[]) || []}
+          onChange={onChange}
+        />
+      );
+    default:
+      return null;
+  }
+}
+
+// ============================================================
+// ScreenNav — top collapsible screen selector (세로 펼침)
+// ============================================================
+function ScreenNav({
+  groups,
+  selectedScreen,
+  onSelect,
+  collapsed,
+  onToggleCollapse,
+}: {
+  groups: ScreenGroup[];
+  selectedScreen: ScreenItem | null;
+  onSelect: (screen: ScreenItem) => void;
+  collapsed: boolean;
+  onToggleCollapse: () => void;
+}) {
+  const [expandedGroup, setExpandedGroup] = useState<string | null>(null);
+
+  const handleGroupClick = (groupId: string) => {
+    setExpandedGroup(expandedGroup === groupId ? null : groupId);
+  };
+
+  const handleScreenSelect = (screen: ScreenItem) => {
+    onSelect(screen);
+    setExpandedGroup(null);
+    if (!collapsed) onToggleCollapse(); // 선택 후 자동 접기
+  };
+
+  if (collapsed) {
+    // 접힌 상태: 현재 선택된 화면명 + 펼치기 버튼
+    return (
+      <div className="border-b bg-muted/20 px-4 py-2 flex items-center gap-3 shrink-0">
+        <button
+          onClick={onToggleCollapse}
+          className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-muted transition-colors text-sm"
+        >
+          <ChevronRight className="h-4 w-4 text-muted-foreground rotate-90" />
+          <span className="text-muted-foreground">화면 선택</span>
+        </button>
+        {selectedScreen && (
+          <Badge variant="secondary" className="text-xs">
+            📍 {selectedScreen.name}
+          </Badge>
+        )}
+      </div>
+    );
+  }
+
+  // 펼친 상태: 메뉴 그룹 가로 나열 + 클릭 시 하위 화면 드롭
+  return (
+    <div className="border-b bg-muted/20 shrink-0">
+      {/* 상단: 그룹 탭 가로 나열 + 접기 버튼 */}
+      <div className="flex items-center gap-1 px-4 py-2 border-b border-border/50">
+        <button
+          onClick={onToggleCollapse}
+          className="p-1.5 rounded-md hover:bg-muted transition-colors mr-2"
+          title="접기"
+        >
+          <ChevronRight className="h-4 w-4 text-muted-foreground -rotate-90" />
+        </button>
+        {groups.map((group) => {
+          const Icon = ICON_MAP[group.icon];
+          const isExpanded = expandedGroup === group.id;
+          const hasSelected = group.screens.some((s) => s.id === selectedScreen?.id);
+
+          return (
+            <button
+              key={group.id}
+              onClick={() => handleGroupClick(group.id)}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+                isExpanded
+                  ? "bg-primary text-primary-foreground"
+                  : hasSelected
+                    ? "bg-primary/10 text-primary"
+                    : "hover:bg-muted text-foreground/70"
+              }`}
+            >
+              {Icon && <Icon className="h-3.5 w-3.5" />}
+              {group.name}
+              <ChevronRight
+                className={`h-3 w-3 transition-transform ${isExpanded ? "rotate-90" : ""}`}
+              />
+            </button>
+          );
+        })}
+      </div>
+
+      {/* 하위 화면 목록 (펼쳐진 그룹) */}
+      {expandedGroup && (
+        <div className="flex items-center gap-2 px-4 py-2 bg-muted/30">
+          <span className="text-xs text-muted-foreground mr-2">
+            {groups.find((g) => g.id === expandedGroup)?.name}:
+          </span>
+          {groups
+            .find((g) => g.id === expandedGroup)
+            ?.screens.map((screen) => {
+              const isSelected = selectedScreen?.id === screen.id;
+              return (
+                <button
+                  key={screen.id}
+                  onClick={() => handleScreenSelect(screen)}
+                  className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
+                    isSelected
+                      ? "bg-primary text-primary-foreground font-medium"
+                      : "bg-background border hover:bg-muted/50"
+                  }`}
+                >
+                  {screen.name}
+                </button>
+              );
+            })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================
+// SettingsForm — auto-rendered from schema
+// ============================================================
+function SettingsForm({
+  screenName,
+  settingsKey,
+  fields,
+  values,
+  onChange,
+}: {
+  screenName: string;
+  settingsKey: string;
+  fields: SettingField[];
+  values: Record<string, unknown>;
+  onChange: (key: string, value: unknown) => void;
+}) {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center gap-2 pb-3 border-b mb-1">
+        <Settings2 className="h-5 w-5 text-primary" />
+        <h2 className="text-lg font-bold">{screenName} 설정</h2>
+        <Badge variant="outline" className="text-xs">
+          {settingsKey}
+        </Badge>
+      </div>
+      {fields.map((field) => (
+        <SettingRow
+          key={field.key}
+          field={field}
+          value={values[field.key]}
+          onChange={(v) => onChange(field.key, v)}
+        />
+      ))}
+    </div>
+  );
+}
+
+// ============================================================
+// Main Page Component
+// ============================================================
+export default function PopSettingsMngPage() {
+  const { user } = useAuth();
+  const [settings, setSettings] = useState<PopSettings>(DEFAULT_SETTINGS);
+  const [saving, setSaving] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [selectedScreen, setSelectedScreen] = useState<ScreenItem | null>(
+    SCREEN_GROUPS[0].screens[0],
+  );
+  const [navCollapsed, setNavCollapsed] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [syncToAll, setSyncToAll] = useState(false);
+  const [lastPath, setLastPath] = useState("");
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // ---- Load settings from screen_layouts_pop per screen ----
+  const fetchSettings = useCallback(async () => {
+    setLoading(true);
+    try {
+      // Collect all unique screenIds from SCREEN_GROUPS
+      const allScreens: { screenId: number; settingsKey: string }[] = [];
+      for (const group of SCREEN_GROUPS) {
+        for (const screen of group.screens) {
+          if (!allScreens.some((s) => s.screenId === screen.screenId && s.settingsKey === screen.settingsKey)) {
+            allScreens.push({ screenId: screen.screenId, settingsKey: screen.settingsKey });
+          }
+        }
+      }
+
+      // Fetch popConfig from each screen's layout-pop
+      const merged: PopSettings = JSON.parse(JSON.stringify(DEFAULT_SETTINGS));
+
+      await Promise.all(
+        allScreens.map(async ({ screenId, settingsKey }) => {
+          try {
+            const res = await apiClient.get(`/screen-management/screens/${screenId}/layout-pop`);
+            const popConfig = res.data?.data?.settings?.popConfig;
+            if (popConfig) {
+              const key = settingsKey as keyof PopSettings["screens"];
+              (merged.screens as Record<string, Record<string, unknown>>)[key] = {
+                ...(merged.screens as Record<string, Record<string, unknown>>)[key],
+                ...popConfig,
+              };
+            }
+          } catch {
+            // Screen may not have layout-pop yet, use defaults
+          }
+        }),
+      );
+
+      setSettings(merged);
+    } catch {
+      // Fallback: use defaults
+    }
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    fetchSettings();
+  }, [fetchSettings]);
+
+  // ---- iframe navigation sync ----
+  useEffect(() => {
+    const timer = setInterval(() => {
+      try {
+        const path = iframeRef.current?.contentWindow?.location.pathname;
+        if (path && path !== lastPath) {
+          setLastPath(path);
+          // 1순위: 정확 일치, 2순위: 길이 긴 url부터 startsWith 매칭 (구체적 경로 우선)
+          let bestMatch: ScreenItem | null = null;
+          let bestUrlLength = -1;
+          for (const group of SCREEN_GROUPS) {
+            for (const s of group.screens) {
+              if (path === s.url) {
+                bestMatch = s;
+                bestUrlLength = Infinity;
+                break;
+              }
+              if (path.startsWith(s.url + "/") && s.url.length > bestUrlLength) {
+                bestMatch = s;
+                bestUrlLength = s.url.length;
+              }
+            }
+            if (bestUrlLength === Infinity) break;
+          }
+          if (bestMatch) setSelectedScreen(bestMatch);
+        }
+      } catch {
+        // cross-origin: silently ignore
+      }
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [lastPath]);
+
+  // ---- Screen select handler ----
+  const handleScreenSelect = (screen: ScreenItem) => {
+    setSelectedScreen(screen);
+    if (iframeRef.current) {
+      iframeRef.current.src = screen.url;
+    }
+  };
+
+  // ---- Settings update helper ----
+  const updateScreenSetting = (settingsKey: string, fieldKey: string, value: unknown) => {
+    setSettings((prev) => ({
+      ...prev,
+      screens: {
+        ...prev.screens,
+        [settingsKey]: {
+          ...(prev.screens as Record<string, Record<string, unknown>>)[settingsKey],
+          [fieldKey]: value,
+        },
+      },
+    }));
+    setHasChanges(true);
+  };
+
+  // ---- Save to screen_layouts_pop per screen ----
+  const handleSave = async () => {
+    if (!selectedScreen) return;
+    setSaving(true);
+
+    try {
+      const currentKey = selectedScreen.settingsKey as keyof PopSettings["screens"];
+      const popConfigToSave = (settings.screens as Record<string, Record<string, unknown>>)[currentKey];
+
+      // Helper: save popConfig to a single screen's layout-pop
+      const saveToScreen = async (screenId: number, popConfig: Record<string, unknown>) => {
+        // 1. Get current layout
+        const layoutRes = await apiClient.get(`/screen-management/screens/${screenId}/layout-pop`).catch(() => null);
+        const layoutData = layoutRes?.data?.data || { version: "pop-5.0", components: {}, settings: {}, gridConfig: {} };
+
+        // 2. Update settings.popConfig
+        layoutData.settings = {
+          ...(layoutData.settings || {}),
+          popConfig,
+        };
+
+        // 3. Save
+        await apiClient.post(`/screen-management/screens/${screenId}/layout-pop`, layoutData);
+      };
+
+      // Save to the selected screen
+      await saveToScreen(selectedScreen.screenId, popConfigToSave);
+
+      // If syncToAll is on, save to all other screens with the same settingsKey
+      if (syncToAll) {
+        const otherScreens: number[] = [];
+        for (const group of SCREEN_GROUPS) {
+          for (const screen of group.screens) {
+            if (screen.settingsKey === selectedScreen.settingsKey && screen.screenId !== selectedScreen.screenId) {
+              if (!otherScreens.includes(screen.screenId)) {
+                otherScreens.push(screen.screenId);
+              }
+            }
+          }
+        }
+        await Promise.all(otherScreens.map((sid) => saveToScreen(sid, popConfigToSave)));
+      }
+
+      setHasChanges(false);
+      // Reload iframe to apply settings
+      if (iframeRef.current) {
+        iframeRef.current.contentWindow?.location.reload();
+      }
+      alert("설정이 저장되었습니다.");
+    } catch {
+      alert("저장에 실패했습니다.");
+    }
+    setSaving(false);
+  };
+
+  // ---- Reset to defaults ----
+  const handleReset = () => {
+    if (window.confirm("모든 설정을 기본값으로 초기화하시겠습니까?")) {
+      setSettings(DEFAULT_SETTINGS);
+      setHasChanges(true);
+    }
+  };
+
+  // ---- Current screen schema values ----
+  const currentSettingsKey = selectedScreen?.settingsKey || "inbound";
+  const allFields = SETTINGS_SCHEMA[currentSettingsKey] || [];
+  // showOnlyForScreens 옵션이 있으면 현재 화면 ID와 일치할 때만 표시
+  const currentFields = allFields.filter((f) => {
+    if (!f.showOnlyForScreens) return true;
+    return selectedScreen?.id ? f.showOnlyForScreens.includes(selectedScreen.id) : false;
+  });
+  const currentValues = (settings.screens as Record<string, Record<string, unknown>>)[currentSettingsKey] || {};
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* ---- Header ---- */}
+      <div className="flex items-center justify-between px-4 py-2 border-b bg-background">
+        <div className="flex items-center gap-3">
+          <Settings2 className="h-5 w-5 text-primary" />
+          <h1 className="text-base font-bold">POP 화면 설정</h1>
+          <Badge variant="outline" className="text-xs">
+            {user?.companyCode || "COMPANY_7"}
+          </Badge>
+          {hasChanges && (
+            <Badge variant="warning" className="text-xs">
+              미저장 변경
+            </Badge>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={handleReset} disabled={saving}>
+            <RotateCcw className="h-3.5 w-3.5 mr-1" />
+            기본값 초기화
+          </Button>
+          <Button size="sm" onClick={handleSave} disabled={saving || !hasChanges}>
+            {saving ? (
+              <Loader2 className="h-3.5 w-3.5 mr-1 animate-spin" />
+            ) : (
+              <Save className="h-3.5 w-3.5 mr-1" />
+            )}
+            {saving ? "저장중..." : "저장"}
+          </Button>
+        </div>
+      </div>
+
+      {/* ---- Screen Nav (top, collapsible vertically) ---- */}
+      <ScreenNav
+        groups={SCREEN_GROUPS}
+        selectedScreen={selectedScreen}
+        onSelect={handleScreenSelect}
+        collapsed={navCollapsed}
+        onToggleCollapse={() => setNavCollapsed((prev) => !prev)}
+      />
+
+      {/* ---- Body: iframe (left) + settings (right) ---- */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left: iframe (POP preview) */}
+        <div className="flex-1 min-w-0 bg-muted/10 relative">
+          {loading ? (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            </div>
+          ) : (
+            <iframe
+              ref={iframeRef}
+              src={selectedScreen?.url || "/pop/home"}
+              className="w-full h-full border-0"
+              title="POP 미리보기"
+            />
+          )}
+        </div>
+
+        {/* Right: Settings form */}
+        <div className="w-[420px] flex-shrink-0 overflow-y-auto p-4 border-l bg-background">
+          {selectedScreen && currentFields.length > 0 ? (
+            <>
+              <SettingsForm
+                screenName={selectedScreen.name}
+                settingsKey={currentSettingsKey}
+                fields={currentFields}
+                values={currentValues}
+                onChange={(key, value) => updateScreenSetting(currentSettingsKey, key, value)}
+              />
+              {/* Sync to all screens with same settingsKey */}
+              <div className="mt-4 pt-4 border-t">
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id="sync-to-all"
+                    checked={syncToAll}
+                    onCheckedChange={(checked) => setSyncToAll(!!checked)}
+                  />
+                  <Label htmlFor="sync-to-all" className="text-sm cursor-pointer">
+                    같은 유형의 모든 화면에 적용
+                  </Label>
+                </div>
+                <p className="text-xs text-muted-foreground mt-1 ml-6">
+                  저장 시 동일 설정키({currentSettingsKey})를 공유하는 화면에도 설정을 동기화합니다.
+                </p>
+              </div>
+            </>
+          ) : (
+            <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+              <Settings2 className="h-12 w-12 mb-3 opacity-30" />
+              <p className="text-sm">상단에서 화면을 선택하세요</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/admin/smart-factory-log/page.tsx b/frontend/app/(main)/admin/smart-factory-log/page.tsx
index 73a93daf..6624d061 100644
--- a/frontend/app/(main)/admin/smart-factory-log/page.tsx
+++ b/frontend/app/(main)/admin/smart-factory-log/page.tsx
@@ -5,6 +5,8 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import {
   Select,
   SelectContent,
@@ -20,6 +22,13 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
 import {
   Search,
   RefreshCw,
@@ -32,13 +41,38 @@ import {
   Building2,
   Activity,
   Users,
+  Plus,
+  Trash2,
+  Clock,
+  CalendarOff,
+  Settings,
+  List,
+  KeyRound,
+  Send,
 } from "lucide-react";
 import {
   getSmartFactoryLogs,
   getSmartFactoryLogStats,
+  getSchedules,
+  upsertSchedule,
+  deleteSchedule,
+  getTodayPlan,
+  getHolidays,
+  addHoliday,
+  deleteHoliday,
+  getApiKeys,
+  saveApiKey,
+  deleteApiKey,
+  getCompanyUsers,
+  sendNow,
   SmartFactoryLogEntry,
   SmartFactoryLogFilters,
   SmartFactoryLogStats,
+  ApiKeyEntry,
+  CompanyUser,
+  SmartFactorySchedule,
+  SmartFactoryHoliday,
+  TodayPlanEntry,
 } from "@/lib/api/smartFactoryLog";
 import { getCompanyList } from "@/lib/api/company";
 import { useAuth } from "@/hooks/useAuth";
@@ -58,6 +92,36 @@ export default function SmartFactoryLogPage() {
   const [loading, setLoading] = useState(false);
   const [total, setTotal] = useState(0);
 
+  // 스케줄 관련
+  const [schedules, setSchedules] = useState<SmartFactorySchedule[]>([]);
+  const [todayPlan, setTodayPlan] = useState<TodayPlanEntry[]>([]);
+  const [holidays, setHolidays] = useState<SmartFactoryHoliday[]>([]);
+  const [scheduleDialogOpen, setScheduleDialogOpen] = useState(false);
+  const [editingSchedule, setEditingSchedule] = useState({
+    companyCode: "",
+    isActive: true,
+    timeStart: "08:30",
+    timeEnd: "17:30",
+    excludeWeekend: true,
+    excludeHolidays: true,
+    dailyCount: 1,
+  });
+  const [apiKeys, setApiKeys] = useState<ApiKeyEntry[]>([]);
+  const [editingKey, setEditingKey] = useState({ companyCode: "", apiKey: "" });
+  const [keyDialogOpen, setKeyDialogOpen] = useState(false);
+  // 즉시 전송
+  const [sendCompany, setSendCompany] = useState("");
+  const [sendUsers, setSendUsers] = useState<CompanyUser[]>([]);
+  const [selectedUserIds, setSelectedUserIds] = useState<Set<string>>(new Set());
+  const [sendTimeStart, setSendTimeStart] = useState("08:30");
+  const [sendTimeEnd, setSendTimeEnd] = useState("17:30");
+  const [sending, setSending] = useState(false);
+
+  const [newHoliday, setNewHoliday] = useState({ date: "", name: "" });
+  const [holidayYear, setHolidayYear] = useState(String(new Date().getFullYear()));
+  const [holidayPage, setHolidayPage] = useState(1);
+  const HOLIDAY_PER_PAGE = 20;
+
   const [filters, setFilters] = useState<SmartFactoryLogFilters>({
     companyCode: "",
     sendStatus: "",
@@ -68,62 +132,113 @@ export default function SmartFactoryLogPage() {
     limit: 50,
   });
 
-  // 회사 목록 로드
-  useEffect(() => {
-    getCompanyList()
-      .then(setCompanies)
-      .catch(() => {});
-  }, []);
+  useEffect(() => { getCompanyList().then(setCompanies).catch(() => {}); }, []);
 
-  // 로그 데이터 로드
   const fetchLogs = useCallback(async () => {
     setLoading(true);
     try {
       const [logRes, statsRes] = await Promise.all([
         getSmartFactoryLogs(filters),
-        getSmartFactoryLogStats(
-          filters.companyCode || undefined,
-          30
-        ),
+        getSmartFactoryLogStats(filters.companyCode || undefined, 30),
       ]);
-      if (logRes.success) {
-        setLogs(logRes.data);
-        setTotal(logRes.total);
-      }
-      if (statsRes.success) {
-        setStats(statsRes.data);
-      }
+      if (logRes.success) { setLogs(logRes.data); setTotal(logRes.total); }
+      if (statsRes.success) setStats(statsRes.data);
     } catch (error) {
       console.error("스마트공장 로그 조회 실패:", error);
-    } finally {
-      setLoading(false);
-    }
+    } finally { setLoading(false); }
   }, [filters]);
 
-  useEffect(() => {
-    fetchLogs();
-  }, [fetchLogs]);
+  useEffect(() => { fetchLogs(); }, [fetchLogs]);
+
+  const fetchSchedules = useCallback(async () => {
+    try {
+      const [schedRes, planRes, holRes, keyRes] = await Promise.all([
+        getSchedules(), getTodayPlan(), getHolidays(), getApiKeys(),
+      ]);
+      if (schedRes.success) setSchedules(schedRes.data);
+      if (planRes.success) setTodayPlan(planRes.data);
+      if (holRes.success) setHolidays(holRes.data);
+      if (keyRes.success) setApiKeys(keyRes.data);
+    } catch (e) { console.error("스케줄 조회 실패:", e); }
+  }, []);
+
+  useEffect(() => { fetchSchedules(); }, [fetchSchedules]);
 
   const totalPages = Math.ceil(total / (filters.limit || 50));
-
   const handleFilterChange = (key: keyof SmartFactoryLogFilters, value: string) => {
     setFilters((prev) => ({ ...prev, [key]: value, page: 1 }));
   };
-
-  const formatDate = (dateStr: string) => {
+  const formatDateStr = (dateStr: string) => {
     if (!dateStr) return "-";
-    const d = new Date(dateStr);
-    return d.toLocaleString("ko-KR", {
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit",
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
+    return new Date(dateStr).toLocaleString("ko-KR", {
+      year: "numeric", month: "2-digit", day: "2-digit",
+      hour: "2-digit", minute: "2-digit", second: "2-digit",
     });
   };
 
-  // 최고관리자가 아니면 접근 불가 안내
+  const handleSendCompanyChange = async (companyCode: string) => {
+    setSendCompany(companyCode);
+    setSelectedUserIds(new Set());
+    if (!companyCode) { setSendUsers([]); return; }
+    try {
+      const res = await getCompanyUsers(companyCode);
+      if (res.success) setSendUsers(res.data);
+    } catch { setSendUsers([]); }
+  };
+
+  const handleSendNow = async () => {
+    if (!sendCompany || selectedUserIds.size === 0) return;
+    setSending(true);
+    try {
+      const res = await sendNow({
+        companyCode: sendCompany,
+        userIds: Array.from(selectedUserIds),
+      });
+      if (res.success) {
+        alert(res.message);
+        fetchLogs();
+      }
+    } catch (e) {
+      console.error("즉시 전송 실패:", e);
+      alert("전송에 실패했습니다.");
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const [scheduleError, setScheduleError] = useState("");
+  const handleSaveSchedule = async () => {
+    if (!editingSchedule.companyCode) return;
+    const keyInfo = apiKeys.find((k) => k.companyCode === editingSchedule.companyCode);
+    if (!keyInfo?.hasDbKey && !keyInfo?.hasEnvKey) {
+      setScheduleError("해당 회사의 API 키가 등록되지 않았습니다. API 키 관리 탭에서 먼저 등록해주세요.");
+      return;
+    }
+    setScheduleError("");
+    try { await upsertSchedule(editingSchedule); setScheduleDialogOpen(false); fetchSchedules(); }
+    catch (e) { console.error("스케줄 저장 실패:", e); }
+  };
+  const handleDeleteSchedule = async (companyCode: string) => {
+    if (!confirm("스케줄을 삭제하시겠습니까?")) return;
+    try { await deleteSchedule(companyCode); fetchSchedules(); }
+    catch (e) { console.error("스케줄 삭제 실패:", e); }
+  };
+  const handleAddHoliday = async () => {
+    if (!newHoliday.date || !newHoliday.name) return;
+    try { await addHoliday(newHoliday.date, newHoliday.name); setNewHoliday({ date: "", name: "" }); fetchSchedules(); }
+    catch (e) { console.error("공휴일 추가 실패:", e); }
+  };
+  const handleToggleSchedule = async (s: SmartFactorySchedule) => {
+    try {
+      await upsertSchedule({
+        companyCode: s.company_code, isActive: !s.is_active,
+        timeStart: s.time_start, timeEnd: s.time_end,
+        excludeWeekend: s.exclude_weekend, excludeHolidays: s.exclude_holidays, dailyCount: s.daily_count || 1,
+      });
+      fetchSchedules();
+    } catch (e) { console.error("스케줄 토글 실패:", e); }
+  };
+
   if (user && user.userType !== "SUPER_ADMIN" && user.companyCode !== "*") {
     return (
       <div className="flex items-center justify-center h-[60vh]">
@@ -133,346 +248,788 @@ export default function SmartFactoryLogPage() {
   }
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="flex flex-col h-[calc(100vh-64px)] overflow-hidden">
       {/* 헤더 */}
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between px-6 pt-6 pb-4 shrink-0">
         <div>
           <h1 className="text-2xl font-bold flex items-center gap-2">
             <Factory className="h-6 w-6" />
             스마트공장 활용 로그
           </h1>
           <p className="text-muted-foreground text-sm mt-1">
-            로그인 시 log.smart-factory.kr로 전송된 로그 기록
+            log.smart-factory.kr 전송 로그 관리 및 자동 전송 스케줄
           </p>
         </div>
-        <Button variant="outline" size="sm" onClick={fetchLogs} disabled={loading}>
+        <Button variant="outline" size="sm" onClick={() => { fetchLogs(); fetchSchedules(); }} disabled={loading}>
           <RefreshCw className={`h-4 w-4 mr-1 ${loading ? "animate-spin" : ""}`} />
           새로고침
         </Button>
       </div>
 
-      {/* 통계 카드 */}
-      {stats && (
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <Card>
-            <CardContent className="pt-6">
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-primary/10 rounded-lg">
-                  <Activity className="h-5 w-5 text-primary" />
-                </div>
-                <div>
-                  <p className="text-sm text-muted-foreground">최근 30일 전체</p>
-                  <p className="text-2xl font-bold">{stats.total.toLocaleString()}건</p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="pt-6">
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-green-100 rounded-lg">
-                  <CheckCircle2 className="h-5 w-5 text-green-600" />
-                </div>
-                <div>
-                  <p className="text-sm text-muted-foreground">전송 성공</p>
-                  <p className="text-2xl font-bold text-green-600">
-                    {(stats.statusCounts.find((s) => s.status === "SUCCESS")?.count || 0).toLocaleString()}건
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="pt-6">
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-red-100 rounded-lg">
-                  <XCircle className="h-5 w-5 text-red-600" />
-                </div>
-                <div>
-                  <p className="text-sm text-muted-foreground">전송 실패</p>
-                  <p className="text-2xl font-bold text-red-600">
-                    {(stats.statusCounts.find((s) => s.status === "FAIL")?.count || 0).toLocaleString()}건
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="pt-6">
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-blue-100 rounded-lg">
-                  <Building2 className="h-5 w-5 text-blue-600" />
-                </div>
-                <div>
-                  <p className="text-sm text-muted-foreground">활용 회사</p>
-                  <p className="text-2xl font-bold text-blue-600">
-                    {stats.companyCounts.length}개사
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      )}
+      {/* 탭 */}
+      <Tabs defaultValue="logs" className="flex flex-col flex-1 overflow-hidden px-6">
+        <TabsList>
+          <TabsTrigger value="logs" className="gap-1.5">
+            <List className="h-4 w-4" />
+            전송 기록
+          </TabsTrigger>
+          <TabsTrigger value="schedule" className="gap-1.5">
+            <Settings className="h-4 w-4" />
+            스케줄 설정
+          </TabsTrigger>
+          <TabsTrigger value="sendnow" className="gap-1.5">
+            <Send className="h-4 w-4" />
+            즉시 전송
+          </TabsTrigger>
+          <TabsTrigger value="apikeys" className="gap-1.5">
+            <KeyRound className="h-4 w-4" />
+            API 키 관리
+          </TabsTrigger>
+          <TabsTrigger value="holidays" className="gap-1.5">
+            <CalendarOff className="h-4 w-4" />
+            공휴일 관리
+          </TabsTrigger>
+        </TabsList>
 
-      {/* 회사별 현황 */}
-      {stats && stats.companyCounts.length > 0 && (
-        <Card>
-          <CardHeader className="pb-3">
-            <CardTitle className="text-base flex items-center gap-2">
-              <Users className="h-4 w-4" />
-              회사별 전송 현황 (최근 30일)
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
-              {stats.companyCounts.map((c) => (
-                <button
-                  key={c.companyCode}
-                  className={`p-3 rounded-lg border text-left hover:bg-accent transition-colors ${
-                    filters.companyCode === c.companyCode
-                      ? "border-primary bg-primary/5"
-                      : ""
-                  }`}
-                  onClick={() =>
-                    handleFilterChange(
-                      "companyCode",
-                      filters.companyCode === c.companyCode ? "" : c.companyCode
-                    )
-                  }
+        {/* ─── 탭 1: 전송 기록 ─── */}
+        <TabsContent value="logs" className="overflow-y-auto flex-1 pb-6">
+         <div className="space-y-6 pt-4">
+          {/* 통계 카드 */}
+          {stats && (
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="flex items-center gap-3">
+                    <div className="p-2 bg-primary/10 rounded-lg"><Activity className="h-5 w-5 text-primary" /></div>
+                    <div>
+                      <p className="text-sm text-muted-foreground">최근 30일 전체</p>
+                      <p className="text-2xl font-bold">{stats.total.toLocaleString()}건</p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="flex items-center gap-3">
+                    <div className="p-2 bg-green-100 rounded-lg"><CheckCircle2 className="h-5 w-5 text-green-600" /></div>
+                    <div>
+                      <p className="text-sm text-muted-foreground">전송 성공</p>
+                      <p className="text-2xl font-bold text-green-600">
+                        {(stats.statusCounts.find((s) => s.status === "SUCCESS")?.count || 0).toLocaleString()}건
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="flex items-center gap-3">
+                    <div className="p-2 bg-red-100 rounded-lg"><XCircle className="h-5 w-5 text-red-600" /></div>
+                    <div>
+                      <p className="text-sm text-muted-foreground">전송 실패</p>
+                      <p className="text-2xl font-bold text-red-600">
+                        {(stats.statusCounts.find((s) => s.status === "FAIL")?.count || 0).toLocaleString()}건
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="flex items-center gap-3">
+                    <div className="p-2 bg-blue-100 rounded-lg"><Building2 className="h-5 w-5 text-blue-600" /></div>
+                    <div>
+                      <p className="text-sm text-muted-foreground">활용 회사</p>
+                      <p className="text-2xl font-bold text-blue-600">{stats.companyCounts.length}개사</p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+
+          {/* 회사별 현황 */}
+          {stats && stats.companyCounts.length > 0 && (
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-base flex items-center gap-2">
+                  <Users className="h-4 w-4" />
+                  회사별 전송 현황 (최근 30일)
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+                  {stats.companyCounts.map((c) => (
+                    <button
+                      key={c.companyCode}
+                      className={`p-3 rounded-lg border text-left hover:bg-accent transition-colors ${
+                        filters.companyCode === c.companyCode ? "border-primary bg-primary/5" : ""
+                      }`}
+                      onClick={() => handleFilterChange("companyCode", filters.companyCode === c.companyCode ? "" : c.companyCode)}
+                    >
+                      <p className="text-xs text-muted-foreground truncate">{c.companyName}</p>
+                      <p className="text-lg font-semibold">{c.count.toLocaleString()}건</p>
+                    </button>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* 필터 */}
+          <Card>
+            <CardContent className="pt-6">
+              <div className="flex flex-wrap items-end gap-3">
+                <div className="flex-1 min-w-[200px]">
+                  <label className="text-xs text-muted-foreground mb-1 block">검색</label>
+                  <div className="relative">
+                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                    <Input placeholder="사용자, IP, 에러메시지..." className="pl-9"
+                      value={filters.search || ""} onChange={(e) => handleFilterChange("search", e.target.value)} />
+                  </div>
+                </div>
+                <div className="w-[180px]">
+                  <label className="text-xs text-muted-foreground mb-1 block">회사</label>
+                  <Select value={filters.companyCode || "all"} onValueChange={(v) => handleFilterChange("companyCode", v === "all" ? "" : v)}>
+                    <SelectTrigger><SelectValue placeholder="전체 회사" /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">전체 회사</SelectItem>
+                      {companies.map((c) => (<SelectItem key={c.company_code} value={c.company_code}>{c.company_name}</SelectItem>))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="w-[140px]">
+                  <label className="text-xs text-muted-foreground mb-1 block">상태</label>
+                  <Select value={filters.sendStatus || "all"} onValueChange={(v) => handleFilterChange("sendStatus", v === "all" ? "" : v)}>
+                    <SelectTrigger><SelectValue placeholder="전체" /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">전체</SelectItem>
+                      <SelectItem value="SUCCESS">성공</SelectItem>
+                      <SelectItem value="FAIL">실패</SelectItem>
+                      <SelectItem value="SKIPPED">건너뜀</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="w-[160px]">
+                  <label className="text-xs text-muted-foreground mb-1 block">시작일</label>
+                  <Input type="date" value={filters.dateFrom || ""} onChange={(e) => handleFilterChange("dateFrom", e.target.value)} />
+                </div>
+                <div className="w-[160px]">
+                  <label className="text-xs text-muted-foreground mb-1 block">종료일</label>
+                  <Input type="date" value={filters.dateTo || ""} onChange={(e) => handleFilterChange("dateTo", e.target.value)} />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* 로그 테이블 */}
+          <Card>
+            <CardHeader className="pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-base">전송 기록 ({total.toLocaleString()}건)</CardTitle>
+                <Select value={String(filters.limit || 50)} onValueChange={(v) => setFilters((prev) => ({ ...prev, limit: parseInt(v, 10), page: 1 }))}>
+                  <SelectTrigger className="w-[100px] h-8 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="20">20건</SelectItem>
+                    <SelectItem value="50">50건</SelectItem>
+                    <SelectItem value="100">100건</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="border rounded-md">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-[50px]">No</TableHead>
+                      <TableHead className="w-[120px]">회사</TableHead>
+                      <TableHead className="w-[120px]">사용자</TableHead>
+                      <TableHead className="w-[100px]">유형</TableHead>
+                      <TableHead className="w-[130px]">접속 IP</TableHead>
+                      <TableHead className="w-[90px]">상태</TableHead>
+                      <TableHead className="w-[60px]">응답</TableHead>
+                      <TableHead>에러 메시지</TableHead>
+                      <TableHead className="w-[170px]">전송 시각</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {loading ? (
+                      <TableRow><TableCell colSpan={9} className="text-center py-12 text-muted-foreground">로딩 중...</TableCell></TableRow>
+                    ) : logs.length === 0 ? (
+                      <TableRow><TableCell colSpan={9} className="text-center py-12 text-muted-foreground">로그가 없습니다.</TableCell></TableRow>
+                    ) : (
+                      logs.map((log, idx) => {
+                        const statusConf = STATUS_CONFIG[log.send_status as keyof typeof STATUS_CONFIG] || STATUS_CONFIG.FAIL;
+                        const StatusIcon = statusConf.icon;
+                        return (
+                          <TableRow key={log.id}>
+                            <TableCell className="text-muted-foreground text-xs">
+                              {total - ((filters.page || 1) - 1) * (filters.limit || 50) - idx}
+                            </TableCell>
+                            <TableCell><span className="text-xs">{log.company_name || log.company_code}</span></TableCell>
+                            <TableCell>
+                              <div>
+                                <span className="text-sm">{log.user_name || "-"}</span>
+                                <span className="text-xs text-muted-foreground block">{log.user_id}</span>
+                              </div>
+                            </TableCell>
+                            <TableCell className="text-xs">{log.use_type}</TableCell>
+                            <TableCell className="text-xs font-mono">{log.connect_ip}</TableCell>
+                            <TableCell>
+                              <Badge variant={statusConf.variant} className="gap-1 text-xs">
+                                <StatusIcon className="h-3 w-3" />{statusConf.label}
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="text-xs text-center">{log.response_status || "-"}</TableCell>
+                            <TableCell className="text-xs text-muted-foreground max-w-[300px] truncate" title={log.error_message || ""}>
+                              {log.error_message || "-"}
+                            </TableCell>
+                            <TableCell className="text-xs">{formatDateStr(log.created_at)}</TableCell>
+                          </TableRow>
+                        );
+                      })
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+
+              {totalPages > 1 && (
+                <div className="flex items-center justify-between mt-4">
+                  <p className="text-sm text-muted-foreground">
+                    {((filters.page || 1) - 1) * (filters.limit || 50) + 1}~
+                    {Math.min((filters.page || 1) * (filters.limit || 50), total)} / {total.toLocaleString()}건
+                  </p>
+                  <div className="flex items-center gap-1">
+                    <Button variant="outline" size="icon" className="h-8 w-8" disabled={(filters.page || 1) <= 1}
+                      onClick={() => setFilters((prev) => ({ ...prev, page: (prev.page || 1) - 1 }))}><ChevronLeft className="h-4 w-4" /></Button>
+                    <span className="text-sm px-2">{filters.page || 1} / {totalPages}</span>
+                    <Button variant="outline" size="icon" className="h-8 w-8" disabled={(filters.page || 1) >= totalPages}
+                      onClick={() => setFilters((prev) => ({ ...prev, page: (prev.page || 1) + 1 }))}><ChevronRight className="h-4 w-4" /></Button>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+         </div>
+        </TabsContent>
+
+        {/* ─── 탭 2: 스케줄 설정 ─── */}
+        <TabsContent value="schedule" className="overflow-y-auto flex-1 pb-6">
+         <div className="space-y-6 pt-4">
+          {/* 오늘 실행 현황 */}
+          {todayPlan.length > 0 && (
+            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
+              {todayPlan.map((p) => {
+                const companyName = schedules.find((s) => s.company_code === p.companyCode)?.company_name || p.companyCode;
+                const pct = p.total > 0 ? Math.round((p.sent / p.total) * 100) : 0;
+                return (
+                  <Card key={p.companyCode}>
+                    <CardContent className="pt-5 pb-4">
+                      <p className="text-sm font-medium truncate">{companyName}</p>
+                      <div className="mt-2 h-2 bg-muted rounded-full overflow-hidden">
+                        <div className="h-full bg-green-500 rounded-full transition-all" style={{ width: `${pct}%` }} />
+                      </div>
+                      <p className="text-xs text-muted-foreground mt-1.5">
+                        <span className="text-green-600 font-medium">{p.sent}</span> / {p.total}명 완료
+                        {p.remaining > 0 && <span className="ml-1">({p.remaining}명 남음)</span>}
+                      </p>
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </div>
+          )}
+
+          {/* 스케줄 테이블 */}
+          <Card>
+            <CardHeader className="pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-base flex items-center gap-2">
+                  <Clock className="h-4 w-4" />
+                  회사별 자동 전송 스케줄
+                </CardTitle>
+                <Button size="sm" onClick={() => {
+                  setEditingSchedule({ companyCode: "", isActive: true, timeStart: "08:30", timeEnd: "17:30", excludeWeekend: true, excludeHolidays: true, dailyCount: 1 });
+                  setScheduleError(""); setScheduleDialogOpen(true);
+                }}>
+                  <Plus className="h-4 w-4 mr-1" />스케줄 추가
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              {schedules.length === 0 ? (
+                <p className="text-sm text-muted-foreground text-center py-8">등록된 스케줄이 없습니다. 스케줄을 추가하여 자동 전송을 시작하세요.</p>
+              ) : (
+                <div className="border rounded-md">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>회사</TableHead>
+                        <TableHead className="w-[140px]">로그인 시간대</TableHead>
+                        <TableHead className="w-[90px]">주말 제외</TableHead>
+                        <TableHead className="w-[90px]">공휴일 제외</TableHead>
+                        <TableHead className="w-[70px]">횟수</TableHead>
+                        <TableHead className="w-[80px]">활성</TableHead>
+                        <TableHead className="w-[160px]">동작</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {schedules.map((s) => (
+                        <TableRow key={s.id}>
+                          <TableCell className="font-medium text-sm">{s.company_name || s.company_code}</TableCell>
+                          <TableCell className="text-sm">
+                            <span className="flex items-center gap-1"><Clock className="h-3 w-3 text-muted-foreground" />{s.time_start} ~ {s.time_end}</span>
+                          </TableCell>
+                          <TableCell>{s.exclude_weekend ? <Badge variant="secondary">Y</Badge> : <span className="text-muted-foreground text-xs">N</span>}</TableCell>
+                          <TableCell>{s.exclude_holidays ? <Badge variant="secondary">Y</Badge> : <span className="text-muted-foreground text-xs">N</span>}</TableCell>
+                          <TableCell className="text-sm text-center">{s.daily_count || 1}회</TableCell>
+                          <TableCell><Switch checked={s.is_active} onCheckedChange={() => handleToggleSchedule(s)} /></TableCell>
+                          <TableCell>
+                            <div className="flex items-center gap-1">
+                              <Button variant="outline" size="icon" className="h-7 w-7" title="수정"
+                                onClick={() => {
+                                  setEditingSchedule({
+                                    companyCode: s.company_code, isActive: s.is_active,
+                                    timeStart: s.time_start, timeEnd: s.time_end,
+                                    excludeWeekend: s.exclude_weekend, excludeHolidays: s.exclude_holidays, dailyCount: s.daily_count || 1,
+                                  });
+                                  setScheduleError(""); setScheduleDialogOpen(true);
+                                }}>
+                                <Settings className="h-3 w-3" />
+                              </Button>
+                              <Button variant="outline" size="icon" className="h-7 w-7 text-destructive" title="삭제"
+                                onClick={() => handleDeleteSchedule(s.company_code)}>
+                                <Trash2 className="h-3 w-3" />
+                              </Button>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+         </div>
+        </TabsContent>
+
+        {/* ─── 탭 3: 즉시 전송 ─── */}
+        <TabsContent value="sendnow" className="overflow-y-auto flex-1 pb-6">
+         <div className="space-y-6 pt-4">
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base flex items-center gap-2">
+                <Send className="h-4 w-4" />
+                사용자 지정 즉시 전송
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {/* 회사 선택 + 시간대 */}
+              <div className="flex flex-wrap items-end gap-3">
+                <div className="w-[200px]">
+                  <label className="text-xs text-muted-foreground mb-1 block">회사</label>
+                  <Select value={sendCompany || "none"} onValueChange={(v) => handleSendCompanyChange(v === "none" ? "" : v)}>
+                    <SelectTrigger><SelectValue placeholder="회사 선택" /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none" disabled>회사 선택</SelectItem>
+                      {companies.filter((c) => c.company_code !== "*").map((c) => (
+                        <SelectItem key={c.company_code} value={c.company_code}>{c.company_name}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <Button
+                  onClick={handleSendNow}
+                  disabled={sending || selectedUserIds.size === 0}
                 >
-                  <p className="text-xs text-muted-foreground truncate">
-                    {c.companyName}
-                  </p>
-                  <p className="text-lg font-semibold">{c.count.toLocaleString()}건</p>
-                </button>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
+                  {sending ? <RefreshCw className="h-4 w-4 mr-1 animate-spin" /> : <Send className="h-4 w-4 mr-1" />}
+                  {selectedUserIds.size > 0 ? `${selectedUserIds.size}명 전송` : "전송"}
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                선택한 사용자의 로그를 현재 시각으로 즉시 전송합니다.
+              </p>
 
-      {/* 필터 */}
-      <Card>
-        <CardContent className="pt-6">
-          <div className="flex flex-wrap items-end gap-3">
-            <div className="flex-1 min-w-[200px]">
-              <label className="text-xs text-muted-foreground mb-1 block">검색</label>
-              <div className="relative">
-                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-                <Input
-                  placeholder="사용자, IP, 에러메시지..."
-                  className="pl-9"
-                  value={filters.search || ""}
-                  onChange={(e) => handleFilterChange("search", e.target.value)}
-                />
+              {/* 사용자 목록 */}
+              {sendCompany && (
+                <div className="border rounded-md">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="w-[50px]">
+                          <input
+                            type="checkbox"
+                            className="rounded"
+                            checked={sendUsers.length > 0 && selectedUserIds.size === sendUsers.length}
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedUserIds(new Set(sendUsers.map((u) => u.user_id)));
+                              } else {
+                                setSelectedUserIds(new Set());
+                              }
+                            }}
+                          />
+                        </TableHead>
+                        <TableHead>사용자 ID</TableHead>
+                        <TableHead>이름</TableHead>
+                        <TableHead>부서</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {sendUsers.length === 0 ? (
+                        <TableRow>
+                          <TableCell colSpan={4} className="text-center py-8 text-muted-foreground">
+                            사용자가 없습니다.
+                          </TableCell>
+                        </TableRow>
+                      ) : (
+                        sendUsers.map((u) => (
+                          <TableRow key={u.user_id} className="cursor-pointer" onClick={() => {
+                            setSelectedUserIds((prev) => {
+                              const next = new Set(prev);
+                              if (next.has(u.user_id)) next.delete(u.user_id);
+                              else next.add(u.user_id);
+                              return next;
+                            });
+                          }}>
+                            <TableCell>
+                              <input
+                                type="checkbox"
+                                className="rounded"
+                                checked={selectedUserIds.has(u.user_id)}
+                                onChange={() => {}}
+                              />
+                            </TableCell>
+                            <TableCell className="text-sm font-mono">{u.user_id}</TableCell>
+                            <TableCell className="text-sm">{u.user_name}</TableCell>
+                            <TableCell className="text-sm text-muted-foreground">{u.dept_name || "-"}</TableCell>
+                          </TableRow>
+                        ))
+                      )}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+         </div>
+        </TabsContent>
+
+        {/* ─── 탭 4: API 키 관리 ─── */}
+        <TabsContent value="apikeys" className="overflow-y-auto flex-1 pb-6">
+         <div className="space-y-6 pt-4">
+          <Card>
+            <CardHeader className="pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-base flex items-center gap-2">
+                  <KeyRound className="h-4 w-4" />
+                  회사별 API 키 관리
+                </CardTitle>
+                <p className="text-sm text-muted-foreground">log.smart-factory.kr 인증키 (crtfcKey)</p>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="border rounded-md">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>회사</TableHead>
+                      <TableHead>DB 키</TableHead>
+                      <TableHead className="w-[100px]">환경변수</TableHead>
+                      <TableHead className="w-[100px]">상태</TableHead>
+                      <TableHead className="w-[140px]">동작</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {apiKeys.length === 0 ? (
+                      <TableRow>
+                        <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">회사 정보를 불러오는 중...</TableCell>
+                      </TableRow>
+                    ) : (
+                      apiKeys.map((k) => (
+                        <TableRow key={k.companyCode}>
+                          <TableCell className="font-medium text-sm">{k.companyName}</TableCell>
+                          <TableCell>
+                            {k.dbKey
+                              ? <code className="text-xs bg-muted px-1.5 py-0.5 rounded break-all">{k.dbKey}</code>
+                              : <span className="text-xs text-muted-foreground">-</span>}
+                          </TableCell>
+                          <TableCell>
+                            {k.hasEnvKey
+                              ? <Badge variant="secondary" className="text-xs">있음</Badge>
+                              : <span className="text-xs text-muted-foreground">-</span>}
+                          </TableCell>
+                          <TableCell>
+                            {k.hasDbKey || k.hasEnvKey
+                              ? <Badge variant="success" className="text-xs">사용 가능</Badge>
+                              : <Badge variant="destructive" className="text-xs">미설정</Badge>}
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex items-center gap-1">
+                              <Button variant="outline" size="sm" className="h-7 text-xs"
+                                onClick={() => { setEditingKey({ companyCode: k.companyCode, apiKey: "" }); setKeyDialogOpen(true); }}>
+                                {k.hasDbKey ? "변경" : "등록"}
+                              </Button>
+                              {k.hasDbKey && (
+                                <Button variant="outline" size="sm" className="h-7 text-xs text-destructive"
+                                  onClick={async () => {
+                                    if (!confirm(`${k.companyName}의 DB 키를 삭제하시겠습니까? 환경변수 키가 있으면 그것으로 폴백됩니다.`)) return;
+                                    await deleteApiKey(k.companyCode);
+                                    fetchSchedules();
+                                  }}>
+                                  삭제
+                                </Button>
+                              )}
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+              <p className="text-xs text-muted-foreground mt-3">
+                DB 키가 우선 사용됩니다. DB 키가 없으면 서버 환경변수(SMART_FACTORY_API_KEY_회사코드)를 사용합니다.
+              </p>
+            </CardContent>
+          </Card>
+         </div>
+        </TabsContent>
+
+        {/* ─── 탭 4: 공휴일 관리 ─── */}
+        <TabsContent value="holidays" className="flex flex-col flex-1 overflow-hidden">
+          {/* 상단 고정: 추가 폼 + 연도 필터 */}
+          <div className="shrink-0 pt-4 pb-4 space-y-4">
+            <div className="flex items-end gap-3 flex-wrap">
+              <div>
+                <label className="text-xs text-muted-foreground mb-1 block">날짜</label>
+                <Input type="date" value={newHoliday.date}
+                  onChange={(e) => setNewHoliday((p) => ({ ...p, date: e.target.value }))} className="w-[170px]" />
+              </div>
+              <div>
+                <label className="text-xs text-muted-foreground mb-1 block">공휴일명</label>
+                <Input value={newHoliday.name}
+                  onChange={(e) => setNewHoliday((p) => ({ ...p, name: e.target.value }))}
+                  placeholder="예: 설날" className="w-[220px]" />
+              </div>
+              <Button size="sm" onClick={handleAddHoliday} disabled={!newHoliday.date || !newHoliday.name}>
+                <Plus className="h-4 w-4 mr-1" />추가
+              </Button>
+              <div className="ml-auto flex items-end gap-2">
+                <div>
+                  <label className="text-xs text-muted-foreground mb-1 block">연도</label>
+                  <Select value={holidayYear} onValueChange={(v) => { setHolidayYear(v); setHolidayPage(1); }}>
+                    <SelectTrigger className="w-[100px]"><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">전체</SelectItem>
+                      {Array.from(new Set(holidays.map((h) => h.holiday_date.substring(0, 4)))).sort().map((y) => (
+                        <SelectItem key={y} value={y}>{y}년</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
               </div>
             </div>
+          </div>
 
-            <div className="w-[180px]">
-              <label className="text-xs text-muted-foreground mb-1 block">회사</label>
+          {/* 스크롤 영역: 테이블 + 페이지네이션 */}
+          <div className="flex-1 overflow-y-auto pb-6">
+            {(() => {
+              const filtered = holidayYear === "all"
+                ? holidays
+                : holidays.filter((h) => h.holiday_date.startsWith(holidayYear));
+              const totalHolidayPages = Math.ceil(filtered.length / HOLIDAY_PER_PAGE);
+              const paged = filtered.slice((holidayPage - 1) * HOLIDAY_PER_PAGE, holidayPage * HOLIDAY_PER_PAGE);
+
+              return filtered.length === 0 ? (
+                <Card>
+                  <CardContent className="py-8">
+                    <p className="text-sm text-muted-foreground text-center">등록된 공휴일이 없습니다.</p>
+                  </CardContent>
+                </Card>
+              ) : (
+                <Card>
+                  <CardHeader className="pb-3">
+                    <div className="flex items-center justify-between">
+                      <CardTitle className="text-base flex items-center gap-2">
+                        <CalendarOff className="h-4 w-4" />
+                        {holidayYear === "all" ? "전체" : `${holidayYear}년`} 공휴일
+                      </CardTitle>
+                      <p className="text-sm text-muted-foreground">{filtered.length}일</p>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="border rounded-md">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead className="w-[140px]">날짜</TableHead>
+                            <TableHead className="w-[100px]">요일</TableHead>
+                            <TableHead>공휴일명</TableHead>
+                            <TableHead className="w-[60px]"></TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {paged.map((h) => {
+                            const d = new Date(h.holiday_date + "T00:00:00");
+                            const dayName = ["일", "월", "화", "수", "목", "금", "토"][d.getDay()];
+                            const isWeekend = d.getDay() === 0 || d.getDay() === 6;
+                            return (
+                              <TableRow key={h.id}>
+                                <TableCell className="text-sm font-mono">{h.holiday_date.substring(0, 10)}</TableCell>
+                                <TableCell>
+                                  <span className={isWeekend ? "text-red-500" : ""}>{dayName}요일</span>
+                                </TableCell>
+                                <TableCell className="text-sm">{h.holiday_name}</TableCell>
+                                <TableCell>
+                                  <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-destructive"
+                                    onClick={async () => { await deleteHoliday(h.id); fetchSchedules(); }}>
+                                    <Trash2 className="h-3 w-3" />
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            );
+                          })}
+                        </TableBody>
+                      </Table>
+                    </div>
+
+                    {totalHolidayPages > 1 && (
+                      <div className="flex items-center justify-between mt-4">
+                        <p className="text-sm text-muted-foreground">
+                          {(holidayPage - 1) * HOLIDAY_PER_PAGE + 1}~{Math.min(holidayPage * HOLIDAY_PER_PAGE, filtered.length)} / {filtered.length}일
+                        </p>
+                        <div className="flex items-center gap-1">
+                          <Button variant="outline" size="icon" className="h-8 w-8" disabled={holidayPage <= 1}
+                            onClick={() => setHolidayPage((p) => p - 1)}><ChevronLeft className="h-4 w-4" /></Button>
+                          <span className="text-sm px-2">{holidayPage} / {totalHolidayPages}</span>
+                          <Button variant="outline" size="icon" className="h-8 w-8" disabled={holidayPage >= totalHolidayPages}
+                            onClick={() => setHolidayPage((p) => p + 1)}><ChevronRight className="h-4 w-4" /></Button>
+                        </div>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              );
+            })()}
+          </div>
+        </TabsContent>
+      </Tabs>
+
+      {/* 스케줄 추가/수정 Dialog */}
+      <Dialog open={scheduleDialogOpen} onOpenChange={setScheduleDialogOpen}>
+        <DialogContent className="sm:max-w-[420px]">
+          <DialogHeader>
+            <DialogTitle>{editingSchedule.companyCode && schedules.some((s) => s.company_code === editingSchedule.companyCode) ? "스케줄 수정" : "스케줄 추가"}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div>
+              <label className="text-sm font-medium mb-1 block">회사</label>
               <Select
-                value={filters.companyCode || "all"}
-                onValueChange={(v) => handleFilterChange("companyCode", v === "all" ? "" : v)}
+                value={editingSchedule.companyCode || "none"}
+                onValueChange={(v) => { setEditingSchedule((p) => ({ ...p, companyCode: v === "none" ? "" : v })); setScheduleError(""); }}
+                disabled={!!editingSchedule.companyCode && schedules.some((s) => s.company_code === editingSchedule.companyCode)}
               >
-                <SelectTrigger>
-                  <SelectValue placeholder="전체 회사" />
-                </SelectTrigger>
+                <SelectTrigger><SelectValue placeholder="회사 선택" /></SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="all">전체 회사</SelectItem>
-                  {companies.map((c) => (
-                    <SelectItem key={c.company_code} value={c.company_code}>
-                      {c.company_name}
-                    </SelectItem>
+                  <SelectItem value="none" disabled>회사 선택</SelectItem>
+                  {companies.filter((c) => c.company_code !== "*").map((c) => (
+                    <SelectItem key={c.company_code} value={c.company_code}>{c.company_name}</SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
-
-            <div className="w-[140px]">
-              <label className="text-xs text-muted-foreground mb-1 block">상태</label>
-              <Select
-                value={filters.sendStatus || "all"}
-                onValueChange={(v) => handleFilterChange("sendStatus", v === "all" ? "" : v)}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="전체" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">전체</SelectItem>
-                  <SelectItem value="SUCCESS">성공</SelectItem>
-                  <SelectItem value="FAIL">실패</SelectItem>
-                  <SelectItem value="SKIPPED">건너뜀</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="w-[160px]">
-              <label className="text-xs text-muted-foreground mb-1 block">시작일</label>
-              <Input
-                type="date"
-                value={filters.dateFrom || ""}
-                onChange={(e) => handleFilterChange("dateFrom", e.target.value)}
-              />
-            </div>
-
-            <div className="w-[160px]">
-              <label className="text-xs text-muted-foreground mb-1 block">종료일</label>
-              <Input
-                type="date"
-                value={filters.dateTo || ""}
-                onChange={(e) => handleFilterChange("dateTo", e.target.value)}
-              />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* 테이블 */}
-      <Card>
-        <CardHeader className="pb-3">
-          <div className="flex items-center justify-between">
-            <CardTitle className="text-base">
-              전송 기록 ({total.toLocaleString()}건)
-            </CardTitle>
-            <div className="flex items-center gap-2">
-              <Select
-                value={String(filters.limit || 50)}
-                onValueChange={(v) =>
-                  setFilters((prev) => ({ ...prev, limit: parseInt(v, 10), page: 1 }))
-                }
-              >
-                <SelectTrigger className="w-[100px] h-8 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="20">20건</SelectItem>
-                  <SelectItem value="50">50건</SelectItem>
-                  <SelectItem value="100">100건</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div className="border rounded-md">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-[50px]">No</TableHead>
-                  <TableHead className="w-[120px]">회사</TableHead>
-                  <TableHead className="w-[120px]">사용자</TableHead>
-                  <TableHead className="w-[100px]">유형</TableHead>
-                  <TableHead className="w-[130px]">접속 IP</TableHead>
-                  <TableHead className="w-[90px]">상태</TableHead>
-                  <TableHead className="w-[60px]">응답</TableHead>
-                  <TableHead>에러 메시지</TableHead>
-                  <TableHead className="w-[170px]">전송 시각</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {loading ? (
-                  <TableRow>
-                    <TableCell colSpan={9} className="text-center py-12 text-muted-foreground">
-                      로딩 중...
-                    </TableCell>
-                  </TableRow>
-                ) : logs.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={9} className="text-center py-12 text-muted-foreground">
-                      로그가 없습니다.
-                    </TableCell>
-                  </TableRow>
-                ) : (
-                  logs.map((log, idx) => {
-                    const statusConf = STATUS_CONFIG[log.send_status as keyof typeof STATUS_CONFIG] || STATUS_CONFIG.FAIL;
-                    const StatusIcon = statusConf.icon;
-                    return (
-                      <TableRow key={log.id}>
-                        <TableCell className="text-muted-foreground text-xs">
-                          {total - ((filters.page || 1) - 1) * (filters.limit || 50) - idx}
-                        </TableCell>
-                        <TableCell>
-                          <span className="text-xs">{log.company_name || log.company_code}</span>
-                        </TableCell>
-                        <TableCell>
-                          <div>
-                            <span className="text-sm">{log.user_name || "-"}</span>
-                            <span className="text-xs text-muted-foreground block">
-                              {log.user_id}
-                            </span>
-                          </div>
-                        </TableCell>
-                        <TableCell className="text-xs">{log.use_type}</TableCell>
-                        <TableCell className="text-xs font-mono">{log.connect_ip}</TableCell>
-                        <TableCell>
-                          <Badge variant={statusConf.variant} className="gap-1 text-xs">
-                            <StatusIcon className="h-3 w-3" />
-                            {statusConf.label}
-                          </Badge>
-                        </TableCell>
-                        <TableCell className="text-xs text-center">
-                          {log.response_status || "-"}
-                        </TableCell>
-                        <TableCell
-                          className="text-xs text-muted-foreground max-w-[300px] truncate"
-                          title={log.error_message || ""}
-                        >
-                          {log.error_message || "-"}
-                        </TableCell>
-                        <TableCell className="text-xs">{formatDate(log.created_at)}</TableCell>
-                      </TableRow>
-                    );
-                  })
-                )}
-              </TableBody>
-            </Table>
-          </div>
-
-          {/* 페이지네이션 */}
-          {totalPages > 1 && (
-            <div className="flex items-center justify-between mt-4">
-              <p className="text-sm text-muted-foreground">
-                {((filters.page || 1) - 1) * (filters.limit || 50) + 1}~
-                {Math.min((filters.page || 1) * (filters.limit || 50), total)} / {total.toLocaleString()}건
-              </p>
-              <div className="flex items-center gap-1">
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="h-8 w-8"
-                  disabled={(filters.page || 1) <= 1}
-                  onClick={() =>
-                    setFilters((prev) => ({
-                      ...prev,
-                      page: (prev.page || 1) - 1,
-                    }))
-                  }
-                >
-                  <ChevronLeft className="h-4 w-4" />
-                </Button>
-                <span className="text-sm px-2">
-                  {filters.page || 1} / {totalPages}
-                </span>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="h-8 w-8"
-                  disabled={(filters.page || 1) >= totalPages}
-                  onClick={() =>
-                    setFilters((prev) => ({
-                      ...prev,
-                      page: (prev.page || 1) + 1,
-                    }))
-                  }
-                >
-                  <ChevronRight className="h-4 w-4" />
-                </Button>
+            <div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="text-sm font-medium mb-1 block">로그인 시작</label>
+                  <Input type="time" value={editingSchedule.timeStart} onChange={(e) => setEditingSchedule((p) => ({ ...p, timeStart: e.target.value }))} />
+                </div>
+                <div>
+                  <label className="text-sm font-medium mb-1 block">로그인 종료</label>
+                  <Input type="time" value={editingSchedule.timeEnd} onChange={(e) => setEditingSchedule((p) => ({ ...p, timeEnd: e.target.value }))} />
+                </div>
               </div>
+              <p className="text-xs text-muted-foreground mt-1.5">해당 시간대에 전 직원의 로그인 이력이 랜덤 시각으로 전송됩니다</p>
             </div>
+            <div className="flex items-center justify-between">
+              <label className="text-sm">주말(토/일) 제외</label>
+              <Switch checked={editingSchedule.excludeWeekend} onCheckedChange={(v) => setEditingSchedule((p) => ({ ...p, excludeWeekend: v }))} />
+            </div>
+            <div className="flex items-center justify-between">
+              <label className="text-sm">공휴일 제외</label>
+              <Switch checked={editingSchedule.excludeHolidays} onCheckedChange={(v) => setEditingSchedule((p) => ({ ...p, excludeHolidays: v }))} />
+            </div>
+            <div className="flex items-center justify-between">
+              <div>
+                <label className="text-sm">일일 접속 횟수</label>
+                <p className="text-xs text-muted-foreground">사용자별 하루 최대 접속/종료 쌍 수</p>
+              </div>
+              <Select value={String(editingSchedule.dailyCount)} onValueChange={(v) => setEditingSchedule((p) => ({ ...p, dailyCount: parseInt(v, 10) }))}>
+                <SelectTrigger className="w-[80px]"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1">1회</SelectItem>
+                  <SelectItem value="2">2회</SelectItem>
+                  <SelectItem value="3">3회</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          {scheduleError && (
+            <p className="text-sm text-destructive px-6">{scheduleError}</p>
           )}
-        </CardContent>
-      </Card>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setScheduleDialogOpen(false)}>취소</Button>
+            <Button onClick={handleSaveSchedule} disabled={!editingSchedule.companyCode}>저장</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* API 키 등록/변경 Dialog */}
+      <Dialog open={keyDialogOpen} onOpenChange={setKeyDialogOpen}>
+        <DialogContent className="sm:max-w-[420px]">
+          <DialogHeader>
+            <DialogTitle>API 키 {editingKey.companyCode ? "등록/변경" : ""}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div>
+              <label className="text-sm font-medium mb-1 block">회사</label>
+              <p className="text-sm">
+                {apiKeys.find((k) => k.companyCode === editingKey.companyCode)?.companyName || editingKey.companyCode}
+              </p>
+            </div>
+            <div>
+              <label className="text-sm font-medium mb-1 block">API 키</label>
+              <Input
+                value={editingKey.apiKey}
+                onChange={(e) => setEditingKey((p) => ({ ...p, apiKey: e.target.value }))}
+                placeholder="스마트공장 인증키 (crtfcKey) 입력"
+                className="font-mono text-sm"
+              />
+              <p className="text-xs text-muted-foreground mt-1">AES-256-GCM 암호화하여 저장됩니다</p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setKeyDialogOpen(false)}>취소</Button>
+            <Button
+              onClick={async () => {
+                if (!editingKey.companyCode || !editingKey.apiKey) return;
+                try {
+                  await saveApiKey(editingKey.companyCode, editingKey.apiKey);
+                  setKeyDialogOpen(false);
+                  setEditingKey({ companyCode: "", apiKey: "" });
+                  fetchSchedules();
+                } catch (e) { console.error("API 키 저장 실패:", e); }
+              }}
+              disabled={!editingKey.apiKey}
+            >
+              저장
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/frontend/components/common/ImageUpload.tsx b/frontend/components/common/ImageUpload.tsx
index afd68a19..8fc52729 100644
--- a/frontend/components/common/ImageUpload.tsx
+++ b/frontend/components/common/ImageUpload.tsx
@@ -53,11 +53,14 @@ export function ImageUpload({
   const [dragOver, setDragOver] = useState(false);
   const fileRef = useRef<HTMLInputElement>(null);
 
-  // 이미지 URL 결정
+  // 이미지 URL 결정 (Next.js 프록시 우회 — 바이너리 스트림 500 에러 방지)
+  const apiBase = typeof window !== "undefined"
+    ? (process.env.NEXT_PUBLIC_API_URL || "").replace(/\/api\/?$/, "")
+    : "";
   const imageUrl = value
     ? (value.startsWith("http") || value.startsWith("/"))
       ? value
-      : `/api/files/preview/${value}`
+      : `${apiBase}/api/files/preview/${value}`
     : null;
 
   const handleUpload = useCallback(async (file: File) => {
diff --git a/frontend/components/layout/AdminPageRenderer.tsx b/frontend/components/layout/AdminPageRenderer.tsx
index e5411d96..83daea15 100644
--- a/frontend/components/layout/AdminPageRenderer.tsx
+++ b/frontend/components/layout/AdminPageRenderer.tsx
@@ -95,6 +95,8 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
   // === COMPANY_7 (탑씰) ===
   "/COMPANY_7/master-data/item-info": dynamic(() => import("@/app/(main)/COMPANY_7/master-data/item-info/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_7/master-data/department": dynamic(() => import("@/app/(main)/COMPANY_7/master-data/department/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/master-data/company": dynamic(() => import("@/app/(main)/COMPANY_7/master-data/company/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/master-data/options": dynamic(() => import("@/app/(main)/COMPANY_7/master-data/options/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_7/sales/order": dynamic(() => import("@/app/(main)/COMPANY_7/sales/order/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_7/sales/customer": dynamic(() => import("@/app/(main)/COMPANY_7/sales/customer/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_7/sales/sales-item": dynamic(() => import("@/app/(main)/COMPANY_7/sales/sales-item/page"), { ssr: false, loading: LoadingFallback }),
@@ -105,11 +107,16 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
   "/COMPANY_7/production/process-info": dynamic(() => import("@/app/(main)/COMPANY_7/production/process-info/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_7/production/work-instruction": dynamic(() => import("@/app/(main)/COMPANY_7/production/work-instruction/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_7/production/plan-management": dynamic(() => import("@/app/(main)/COMPANY_7/production/plan-management/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/production/bom": dynamic(() => import("@/app/(main)/COMPANY_7/production/bom/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_7/equipment/info": dynamic(() => import("@/app/(main)/COMPANY_7/equipment/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/equipment/plc-settings": dynamic(() => import("@/app/(main)/COMPANY_7/equipment/plc-settings/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_7/logistics/material-status": dynamic(() => import("@/app/(main)/COMPANY_7/logistics/material-status/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_7/logistics/outbound": dynamic(() => import("@/app/(main)/COMPANY_7/logistics/outbound/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_7/logistics/receiving": dynamic(() => import("@/app/(main)/COMPANY_7/logistics/receiving/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_7/logistics/packaging": dynamic(() => import("@/app/(main)/COMPANY_7/logistics/packaging/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/logistics/info": dynamic(() => import("@/app/(main)/COMPANY_7/logistics/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/logistics/inventory": dynamic(() => import("@/app/(main)/COMPANY_7/logistics/inventory/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/logistics/warehouse": dynamic(() => import("@/app/(main)/COMPANY_7/logistics/warehouse/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_7/outsourcing/subcontractor": dynamic(() => import("@/app/(main)/COMPANY_7/outsourcing/subcontractor/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_7/outsourcing/subcontractor-item": dynamic(() => import("@/app/(main)/COMPANY_7/outsourcing/subcontractor-item/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_7/design/project": dynamic(() => import("@/app/(main)/COMPANY_7/design/project/page"), { ssr: false, loading: LoadingFallback }),
@@ -128,12 +135,25 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
   "/COMPANY_16/sales/shipping-order": dynamic(() => import("@/app/(main)/COMPANY_16/sales/shipping-order/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_16/sales/shipping-plan": dynamic(() => import("@/app/(main)/COMPANY_16/sales/shipping-plan/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_16/sales/claim": dynamic(() => import("@/app/(main)/COMPANY_16/sales/claim/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_16/sales/quote": dynamic(() => import("@/app/(main)/COMPANY_16/sales/quote/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_16/production/process-info": dynamic(() => import("@/app/(main)/COMPANY_16/production/process-info/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_16/production/work-instruction": dynamic(() => import("@/app/(main)/COMPANY_16/production/work-instruction/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_16/production/plan-management": dynamic(() => import("@/app/(main)/COMPANY_16/production/plan-management/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_16/production/bom": dynamic(() => import("@/app/(main)/COMPANY_16/production/bom/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_16/equipment/info": dynamic(() => import("@/app/(main)/COMPANY_16/equipment/info/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_16/equipment/plc-settings": dynamic(() => import("@/app/(main)/COMPANY_16/equipment/plc-settings/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_16/monitoring/production": dynamic(() => import("@/app/(main)/COMPANY_16/monitoring/production/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_16/monitoring/equipment": dynamic(() => import("@/app/(main)/COMPANY_16/monitoring/equipment/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_16/monitoring/quality": dynamic(() => import("@/app/(main)/COMPANY_16/monitoring/quality/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/monitoring/production": dynamic(() => import("@/app/(main)/COMPANY_7/monitoring/production/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/monitoring/equipment": dynamic(() => import("@/app/(main)/COMPANY_7/monitoring/equipment/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/monitoring/quality": dynamic(() => import("@/app/(main)/COMPANY_7/monitoring/quality/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/purchase/order": dynamic(() => import("@/app/(main)/COMPANY_7/purchase/order/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/purchase/purchase-item": dynamic(() => import("@/app/(main)/COMPANY_7/purchase/purchase-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/purchase/supplier": dynamic(() => import("@/app/(main)/COMPANY_7/purchase/supplier/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/quality/inspection": dynamic(() => import("@/app/(main)/COMPANY_7/quality/inspection/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/quality/item-inspection": dynamic(() => import("@/app/(main)/COMPANY_7/quality/item-inspection/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_7/mold/info": dynamic(() => import("@/app/(main)/COMPANY_7/mold/info/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_16/logistics/material-status": dynamic(() => import("@/app/(main)/COMPANY_16/logistics/material-status/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_16/logistics/outbound": dynamic(() => import("@/app/(main)/COMPANY_16/logistics/outbound/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_16/logistics/receiving": dynamic(() => import("@/app/(main)/COMPANY_16/logistics/receiving/page"), { ssr: false, loading: LoadingFallback }),
@@ -154,32 +174,212 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
   "/COMPANY_16/design/my-work": dynamic(() => import("@/app/(main)/COMPANY_16/design/my-work/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_16/design/design-request": dynamic(() => import("@/app/(main)/COMPANY_16/design/design-request/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_16/design/task-management": dynamic(() => import("@/app/(main)/COMPANY_16/design/task-management/page"), { ssr: false, loading: LoadingFallback }),
+  // === COMPANY_8 (대진산업) ===
+  "/COMPANY_8/master-data/options": dynamic(() => import("@/app/(main)/COMPANY_8/master-data/options/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/master-data/item-info": dynamic(() => import("@/app/(main)/COMPANY_8/master-data/item-info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/master-data/department": dynamic(() => import("@/app/(main)/COMPANY_8/master-data/department/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/master-data/company": dynamic(() => import("@/app/(main)/COMPANY_8/master-data/company/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/sales/order": dynamic(() => import("@/app/(main)/COMPANY_8/sales/order/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/sales/customer": dynamic(() => import("@/app/(main)/COMPANY_8/sales/customer/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/sales/sales-item": dynamic(() => import("@/app/(main)/COMPANY_8/sales/sales-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/sales/shipping-order": dynamic(() => import("@/app/(main)/COMPANY_8/sales/shipping-order/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/sales/shipping-plan": dynamic(() => import("@/app/(main)/COMPANY_8/sales/shipping-plan/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/sales/claim": dynamic(() => import("@/app/(main)/COMPANY_8/sales/claim/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/sales/quote": dynamic(() => import("@/app/(main)/COMPANY_8/sales/quote/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/production/process-info": dynamic(() => import("@/app/(main)/COMPANY_8/production/process-info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/production/work-instruction": dynamic(() => import("@/app/(main)/COMPANY_8/production/work-instruction/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/production/plan-management": dynamic(() => import("@/app/(main)/COMPANY_8/production/plan-management/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/production/bom": dynamic(() => import("@/app/(main)/COMPANY_8/production/bom/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/equipment/info": dynamic(() => import("@/app/(main)/COMPANY_8/equipment/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/equipment/plc-settings": dynamic(() => import("@/app/(main)/COMPANY_8/equipment/plc-settings/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/monitoring/production": dynamic(() => import("@/app/(main)/COMPANY_8/monitoring/production/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/monitoring/equipment": dynamic(() => import("@/app/(main)/COMPANY_8/monitoring/equipment/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/monitoring/quality": dynamic(() => import("@/app/(main)/COMPANY_8/monitoring/quality/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/logistics/material-status": dynamic(() => import("@/app/(main)/COMPANY_8/logistics/material-status/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/logistics/outbound": dynamic(() => import("@/app/(main)/COMPANY_8/logistics/outbound/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/logistics/receiving": dynamic(() => import("@/app/(main)/COMPANY_8/logistics/receiving/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/logistics/packaging": dynamic(() => import("@/app/(main)/COMPANY_8/logistics/packaging/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/logistics/inventory": dynamic(() => import("@/app/(main)/COMPANY_8/logistics/inventory/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/logistics/warehouse": dynamic(() => import("@/app/(main)/COMPANY_8/logistics/warehouse/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/logistics/info": dynamic(() => import("@/app/(main)/COMPANY_8/logistics/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/outsourcing/subcontractor": dynamic(() => import("@/app/(main)/COMPANY_8/outsourcing/subcontractor/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/outsourcing/subcontractor-item": dynamic(() => import("@/app/(main)/COMPANY_8/outsourcing/subcontractor-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/purchase/order": dynamic(() => import("@/app/(main)/COMPANY_8/purchase/order/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/purchase/purchase-item": dynamic(() => import("@/app/(main)/COMPANY_8/purchase/purchase-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/purchase/supplier": dynamic(() => import("@/app/(main)/COMPANY_8/purchase/supplier/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/quality/inspection": dynamic(() => import("@/app/(main)/COMPANY_8/quality/inspection/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/quality/item-inspection": dynamic(() => import("@/app/(main)/COMPANY_8/quality/item-inspection/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/mold/info": dynamic(() => import("@/app/(main)/COMPANY_8/mold/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/design/project": dynamic(() => import("@/app/(main)/COMPANY_8/design/project/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/design/change-management": dynamic(() => import("@/app/(main)/COMPANY_8/design/change-management/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/design/my-work": dynamic(() => import("@/app/(main)/COMPANY_8/design/my-work/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/design/design-request": dynamic(() => import("@/app/(main)/COMPANY_8/design/design-request/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_8/design/task-management": dynamic(() => import("@/app/(main)/COMPANY_8/design/task-management/page"), { ssr: false, loading: LoadingFallback }),
   // === COMPANY_10 (큐앤씨) ===
+  "/COMPANY_10/master-data/options": dynamic(() => import("@/app/(main)/COMPANY_10/master-data/options/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/master-data/item-info": dynamic(() => import("@/app/(main)/COMPANY_10/master-data/item-info/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/master-data/department": dynamic(() => import("@/app/(main)/COMPANY_10/master-data/department/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/master-data/company": dynamic(() => import("@/app/(main)/COMPANY_10/master-data/company/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/sales/order": dynamic(() => import("@/app/(main)/COMPANY_10/sales/order/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/sales/customer": dynamic(() => import("@/app/(main)/COMPANY_10/sales/customer/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/sales/sales-item": dynamic(() => import("@/app/(main)/COMPANY_10/sales/sales-item/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/sales/shipping-order": dynamic(() => import("@/app/(main)/COMPANY_10/sales/shipping-order/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/sales/shipping-plan": dynamic(() => import("@/app/(main)/COMPANY_10/sales/shipping-plan/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/sales/claim": dynamic(() => import("@/app/(main)/COMPANY_10/sales/claim/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/sales/quote": dynamic(() => import("@/app/(main)/COMPANY_10/sales/quote/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/production/process-info": dynamic(() => import("@/app/(main)/COMPANY_10/production/process-info/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/production/work-instruction": dynamic(() => import("@/app/(main)/COMPANY_10/production/work-instruction/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/production/plan-management": dynamic(() => import("@/app/(main)/COMPANY_10/production/plan-management/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/production/bom": dynamic(() => import("@/app/(main)/COMPANY_10/production/bom/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/equipment/info": dynamic(() => import("@/app/(main)/COMPANY_10/equipment/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/equipment/plc-settings": dynamic(() => import("@/app/(main)/COMPANY_10/equipment/plc-settings/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/monitoring/production": dynamic(() => import("@/app/(main)/COMPANY_10/monitoring/production/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/monitoring/equipment": dynamic(() => import("@/app/(main)/COMPANY_10/monitoring/equipment/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/monitoring/quality": dynamic(() => import("@/app/(main)/COMPANY_10/monitoring/quality/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/logistics/material-status": dynamic(() => import("@/app/(main)/COMPANY_10/logistics/material-status/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/logistics/outbound": dynamic(() => import("@/app/(main)/COMPANY_10/logistics/outbound/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/logistics/receiving": dynamic(() => import("@/app/(main)/COMPANY_10/logistics/receiving/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/logistics/packaging": dynamic(() => import("@/app/(main)/COMPANY_10/logistics/packaging/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/logistics/inventory": dynamic(() => import("@/app/(main)/COMPANY_10/logistics/inventory/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/logistics/warehouse": dynamic(() => import("@/app/(main)/COMPANY_10/logistics/warehouse/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/logistics/info": dynamic(() => import("@/app/(main)/COMPANY_10/logistics/info/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/outsourcing/subcontractor": dynamic(() => import("@/app/(main)/COMPANY_10/outsourcing/subcontractor/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/outsourcing/subcontractor-item": dynamic(() => import("@/app/(main)/COMPANY_10/outsourcing/subcontractor-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/purchase/order": dynamic(() => import("@/app/(main)/COMPANY_10/purchase/order/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/purchase/purchase-item": dynamic(() => import("@/app/(main)/COMPANY_10/purchase/purchase-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/purchase/supplier": dynamic(() => import("@/app/(main)/COMPANY_10/purchase/supplier/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/quality/inspection": dynamic(() => import("@/app/(main)/COMPANY_10/quality/inspection/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/quality/item-inspection": dynamic(() => import("@/app/(main)/COMPANY_10/quality/item-inspection/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_10/mold/info": dynamic(() => import("@/app/(main)/COMPANY_10/mold/info/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/design/project": dynamic(() => import("@/app/(main)/COMPANY_10/design/project/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/design/change-management": dynamic(() => import("@/app/(main)/COMPANY_10/design/change-management/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/design/my-work": dynamic(() => import("@/app/(main)/COMPANY_10/design/my-work/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/design/design-request": dynamic(() => import("@/app/(main)/COMPANY_10/design/design-request/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_10/design/task-management": dynamic(() => import("@/app/(main)/COMPANY_10/design/task-management/page"), { ssr: false, loading: LoadingFallback }),
+  // === COMPANY_29 (시연용 회사) ===
+  "/COMPANY_29/master-data/options": dynamic(() => import("@/app/(main)/COMPANY_29/master-data/options/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/master-data/item-info": dynamic(() => import("@/app/(main)/COMPANY_29/master-data/item-info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/master-data/department": dynamic(() => import("@/app/(main)/COMPANY_29/master-data/department/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/master-data/company": dynamic(() => import("@/app/(main)/COMPANY_29/master-data/company/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/sales/order": dynamic(() => import("@/app/(main)/COMPANY_29/sales/order/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/sales/customer": dynamic(() => import("@/app/(main)/COMPANY_29/sales/customer/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/sales/sales-item": dynamic(() => import("@/app/(main)/COMPANY_29/sales/sales-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/sales/shipping-order": dynamic(() => import("@/app/(main)/COMPANY_29/sales/shipping-order/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/sales/shipping-plan": dynamic(() => import("@/app/(main)/COMPANY_29/sales/shipping-plan/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/sales/claim": dynamic(() => import("@/app/(main)/COMPANY_29/sales/claim/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/sales/quote": dynamic(() => import("@/app/(main)/COMPANY_29/sales/quote/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/production/process-info": dynamic(() => import("@/app/(main)/COMPANY_29/production/process-info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/production/work-instruction": dynamic(() => import("@/app/(main)/COMPANY_29/production/work-instruction/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/production/plan-management": dynamic(() => import("@/app/(main)/COMPANY_29/production/plan-management/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/production/bom": dynamic(() => import("@/app/(main)/COMPANY_29/production/bom/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/equipment/info": dynamic(() => import("@/app/(main)/COMPANY_29/equipment/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/equipment/plc-settings": dynamic(() => import("@/app/(main)/COMPANY_29/equipment/plc-settings/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/monitoring/production": dynamic(() => import("@/app/(main)/COMPANY_29/monitoring/production/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/monitoring/equipment": dynamic(() => import("@/app/(main)/COMPANY_29/monitoring/equipment/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/monitoring/quality": dynamic(() => import("@/app/(main)/COMPANY_29/monitoring/quality/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/logistics/material-status": dynamic(() => import("@/app/(main)/COMPANY_29/logistics/material-status/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/logistics/outbound": dynamic(() => import("@/app/(main)/COMPANY_29/logistics/outbound/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/logistics/receiving": dynamic(() => import("@/app/(main)/COMPANY_29/logistics/receiving/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/logistics/packaging": dynamic(() => import("@/app/(main)/COMPANY_29/logistics/packaging/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/logistics/inventory": dynamic(() => import("@/app/(main)/COMPANY_29/logistics/inventory/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/logistics/warehouse": dynamic(() => import("@/app/(main)/COMPANY_29/logistics/warehouse/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/logistics/info": dynamic(() => import("@/app/(main)/COMPANY_29/logistics/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/outsourcing/subcontractor": dynamic(() => import("@/app/(main)/COMPANY_29/outsourcing/subcontractor/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/outsourcing/subcontractor-item": dynamic(() => import("@/app/(main)/COMPANY_29/outsourcing/subcontractor-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/purchase/order": dynamic(() => import("@/app/(main)/COMPANY_29/purchase/order/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/purchase/purchase-item": dynamic(() => import("@/app/(main)/COMPANY_29/purchase/purchase-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/purchase/supplier": dynamic(() => import("@/app/(main)/COMPANY_29/purchase/supplier/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/quality/inspection": dynamic(() => import("@/app/(main)/COMPANY_29/quality/inspection/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/quality/item-inspection": dynamic(() => import("@/app/(main)/COMPANY_29/quality/item-inspection/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/mold/info": dynamic(() => import("@/app/(main)/COMPANY_29/mold/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/design/project": dynamic(() => import("@/app/(main)/COMPANY_29/design/project/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/design/change-management": dynamic(() => import("@/app/(main)/COMPANY_29/design/change-management/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/design/my-work": dynamic(() => import("@/app/(main)/COMPANY_29/design/my-work/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/design/design-request": dynamic(() => import("@/app/(main)/COMPANY_29/design/design-request/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_29/design/task-management": dynamic(() => import("@/app/(main)/COMPANY_29/design/task-management/page"), { ssr: false, loading: LoadingFallback }),
   // === COMPANY_9 (제일그라스) ===
+  "/COMPANY_9/master-data/item-info": dynamic(() => import("@/app/(main)/COMPANY_9/master-data/item-info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/master-data/department": dynamic(() => import("@/app/(main)/COMPANY_9/master-data/department/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/master-data/company": dynamic(() => import("@/app/(main)/COMPANY_9/master-data/company/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/master-data/options": dynamic(() => import("@/app/(main)/COMPANY_9/master-data/options/page"), { ssr: false, loading: LoadingFallback }),
   "/COMPANY_9/sales/order": dynamic(() => import("@/app/(main)/COMPANY_9/sales/order/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/sales/customer": dynamic(() => import("@/app/(main)/COMPANY_9/sales/customer/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/sales/sales-item": dynamic(() => import("@/app/(main)/COMPANY_9/sales/sales-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/sales/shipping-order": dynamic(() => import("@/app/(main)/COMPANY_9/sales/shipping-order/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/sales/shipping-plan": dynamic(() => import("@/app/(main)/COMPANY_9/sales/shipping-plan/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/sales/claim": dynamic(() => import("@/app/(main)/COMPANY_9/sales/claim/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/sales/quote": dynamic(() => import("@/app/(main)/COMPANY_9/sales/quote/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/production/process-info": dynamic(() => import("@/app/(main)/COMPANY_9/production/process-info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/production/work-instruction": dynamic(() => import("@/app/(main)/COMPANY_9/production/work-instruction/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/production/plan-management": dynamic(() => import("@/app/(main)/COMPANY_9/production/plan-management/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/production/bom": dynamic(() => import("@/app/(main)/COMPANY_9/production/bom/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/equipment/info": dynamic(() => import("@/app/(main)/COMPANY_9/equipment/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/equipment/plc-settings": dynamic(() => import("@/app/(main)/COMPANY_9/equipment/plc-settings/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/monitoring/production": dynamic(() => import("@/app/(main)/COMPANY_9/monitoring/production/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/monitoring/equipment": dynamic(() => import("@/app/(main)/COMPANY_9/monitoring/equipment/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/monitoring/quality": dynamic(() => import("@/app/(main)/COMPANY_9/monitoring/quality/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/logistics/material-status": dynamic(() => import("@/app/(main)/COMPANY_9/logistics/material-status/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/logistics/outbound": dynamic(() => import("@/app/(main)/COMPANY_9/logistics/outbound/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/logistics/receiving": dynamic(() => import("@/app/(main)/COMPANY_9/logistics/receiving/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/logistics/packaging": dynamic(() => import("@/app/(main)/COMPANY_9/logistics/packaging/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/logistics/info": dynamic(() => import("@/app/(main)/COMPANY_9/logistics/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/logistics/inventory": dynamic(() => import("@/app/(main)/COMPANY_9/logistics/inventory/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/logistics/warehouse": dynamic(() => import("@/app/(main)/COMPANY_9/logistics/warehouse/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/outsourcing/subcontractor": dynamic(() => import("@/app/(main)/COMPANY_9/outsourcing/subcontractor/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/outsourcing/subcontractor-item": dynamic(() => import("@/app/(main)/COMPANY_9/outsourcing/subcontractor-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/purchase/order": dynamic(() => import("@/app/(main)/COMPANY_9/purchase/order/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/purchase/purchase-item": dynamic(() => import("@/app/(main)/COMPANY_9/purchase/purchase-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/purchase/supplier": dynamic(() => import("@/app/(main)/COMPANY_9/purchase/supplier/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/quality/inspection": dynamic(() => import("@/app/(main)/COMPANY_9/quality/inspection/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/quality/item-inspection": dynamic(() => import("@/app/(main)/COMPANY_9/quality/item-inspection/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/mold/info": dynamic(() => import("@/app/(main)/COMPANY_9/mold/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/design/project": dynamic(() => import("@/app/(main)/COMPANY_9/design/project/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/design/change-management": dynamic(() => import("@/app/(main)/COMPANY_9/design/change-management/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/design/my-work": dynamic(() => import("@/app/(main)/COMPANY_9/design/my-work/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/design/design-request": dynamic(() => import("@/app/(main)/COMPANY_9/design/design-request/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_9/design/task-management": dynamic(() => import("@/app/(main)/COMPANY_9/design/task-management/page"), { ssr: false, loading: LoadingFallback }),
+
+  // === COMPANY_30 ===
+  "/COMPANY_30/master-data/item-info": dynamic(() => import("@/app/(main)/COMPANY_30/master-data/item-info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/master-data/department": dynamic(() => import("@/app/(main)/COMPANY_30/master-data/department/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/master-data/company": dynamic(() => import("@/app/(main)/COMPANY_30/master-data/company/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/master-data/options": dynamic(() => import("@/app/(main)/COMPANY_30/master-data/options/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/sales/order": dynamic(() => import("@/app/(main)/COMPANY_30/sales/order/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/sales/customer": dynamic(() => import("@/app/(main)/COMPANY_30/sales/customer/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/sales/sales-item": dynamic(() => import("@/app/(main)/COMPANY_30/sales/sales-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/sales/shipping-order": dynamic(() => import("@/app/(main)/COMPANY_30/sales/shipping-order/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/sales/shipping-plan": dynamic(() => import("@/app/(main)/COMPANY_30/sales/shipping-plan/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/sales/claim": dynamic(() => import("@/app/(main)/COMPANY_30/sales/claim/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/sales/quote": dynamic(() => import("@/app/(main)/COMPANY_30/sales/quote/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/production/process-info": dynamic(() => import("@/app/(main)/COMPANY_30/production/process-info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/production/work-instruction": dynamic(() => import("@/app/(main)/COMPANY_30/production/work-instruction/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/production/plan-management": dynamic(() => import("@/app/(main)/COMPANY_30/production/plan-management/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/production/bom": dynamic(() => import("@/app/(main)/COMPANY_30/production/bom/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/equipment/info": dynamic(() => import("@/app/(main)/COMPANY_30/equipment/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/equipment/plc-settings": dynamic(() => import("@/app/(main)/COMPANY_30/equipment/plc-settings/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/monitoring/production": dynamic(() => import("@/app/(main)/COMPANY_30/monitoring/production/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/monitoring/equipment": dynamic(() => import("@/app/(main)/COMPANY_30/monitoring/equipment/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/monitoring/quality": dynamic(() => import("@/app/(main)/COMPANY_30/monitoring/quality/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/logistics/material-status": dynamic(() => import("@/app/(main)/COMPANY_30/logistics/material-status/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/logistics/outbound": dynamic(() => import("@/app/(main)/COMPANY_30/logistics/outbound/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/logistics/receiving": dynamic(() => import("@/app/(main)/COMPANY_30/logistics/receiving/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/logistics/packaging": dynamic(() => import("@/app/(main)/COMPANY_30/logistics/packaging/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/logistics/info": dynamic(() => import("@/app/(main)/COMPANY_30/logistics/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/logistics/inventory": dynamic(() => import("@/app/(main)/COMPANY_30/logistics/inventory/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/logistics/warehouse": dynamic(() => import("@/app/(main)/COMPANY_30/logistics/warehouse/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/outsourcing/subcontractor": dynamic(() => import("@/app/(main)/COMPANY_30/outsourcing/subcontractor/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/outsourcing/subcontractor-item": dynamic(() => import("@/app/(main)/COMPANY_30/outsourcing/subcontractor-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/purchase/order": dynamic(() => import("@/app/(main)/COMPANY_30/purchase/order/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/purchase/purchase-item": dynamic(() => import("@/app/(main)/COMPANY_30/purchase/purchase-item/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/purchase/supplier": dynamic(() => import("@/app/(main)/COMPANY_30/purchase/supplier/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/quality/inspection": dynamic(() => import("@/app/(main)/COMPANY_30/quality/inspection/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/quality/item-inspection": dynamic(() => import("@/app/(main)/COMPANY_30/quality/item-inspection/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/mold/info": dynamic(() => import("@/app/(main)/COMPANY_30/mold/info/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/design/project": dynamic(() => import("@/app/(main)/COMPANY_30/design/project/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/design/change-management": dynamic(() => import("@/app/(main)/COMPANY_30/design/change-management/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/design/my-work": dynamic(() => import("@/app/(main)/COMPANY_30/design/my-work/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/design/design-request": dynamic(() => import("@/app/(main)/COMPANY_30/design/design-request/page"), { ssr: false, loading: LoadingFallback }),
+  "/COMPANY_30/design/task-management": dynamic(() => import("@/app/(main)/COMPANY_30/design/task-management/page"), { ssr: false, loading: LoadingFallback }),
 
   // === COMPANY_29 ===
   "/COMPANY_29/master-data/item-info": dynamic(() => import("@/app/(main)/COMPANY_29/master-data/item-info/page"), { ssr: false, loading: LoadingFallback }),
@@ -262,6 +462,8 @@ const DYNAMIC_ADMIN_IMPORTS: Record<string, () => Promise<any>> = {
   // COMPANY_7 (탑씰)
   "/COMPANY_7/master-data/item-info": () => import("@/app/(main)/COMPANY_7/master-data/item-info/page"),
   "/COMPANY_7/master-data/department": () => import("@/app/(main)/COMPANY_7/master-data/department/page"),
+  "/COMPANY_7/master-data/company": () => import("@/app/(main)/COMPANY_7/master-data/company/page"),
+  "/COMPANY_7/master-data/options": () => import("@/app/(main)/COMPANY_7/master-data/options/page"),
   "/COMPANY_7/sales/order": () => import("@/app/(main)/COMPANY_7/sales/order/page"),
   "/COMPANY_7/sales/customer": () => import("@/app/(main)/COMPANY_7/sales/customer/page"),
   "/COMPANY_7/sales/sales-item": () => import("@/app/(main)/COMPANY_7/sales/sales-item/page"),
@@ -271,11 +473,16 @@ const DYNAMIC_ADMIN_IMPORTS: Record<string, () => Promise<any>> = {
   "/COMPANY_7/production/process-info": () => import("@/app/(main)/COMPANY_7/production/process-info/page"),
   "/COMPANY_7/production/work-instruction": () => import("@/app/(main)/COMPANY_7/production/work-instruction/page"),
   "/COMPANY_7/production/plan-management": () => import("@/app/(main)/COMPANY_7/production/plan-management/page"),
+  "/COMPANY_7/production/bom": () => import("@/app/(main)/COMPANY_7/production/bom/page"),
   "/COMPANY_7/equipment/info": () => import("@/app/(main)/COMPANY_7/equipment/info/page"),
+  "/COMPANY_7/equipment/plc-settings": () => import("@/app/(main)/COMPANY_7/equipment/plc-settings/page"),
   "/COMPANY_7/logistics/material-status": () => import("@/app/(main)/COMPANY_7/logistics/material-status/page"),
   "/COMPANY_7/logistics/outbound": () => import("@/app/(main)/COMPANY_7/logistics/outbound/page"),
   "/COMPANY_7/logistics/receiving": () => import("@/app/(main)/COMPANY_7/logistics/receiving/page"),
   "/COMPANY_7/logistics/packaging": () => import("@/app/(main)/COMPANY_7/logistics/packaging/page"),
+  "/COMPANY_7/logistics/info": () => import("@/app/(main)/COMPANY_7/logistics/info/page"),
+  "/COMPANY_7/logistics/inventory": () => import("@/app/(main)/COMPANY_7/logistics/inventory/page"),
+  "/COMPANY_7/logistics/warehouse": () => import("@/app/(main)/COMPANY_7/logistics/warehouse/page"),
   "/COMPANY_7/outsourcing/subcontractor": () => import("@/app/(main)/COMPANY_7/outsourcing/subcontractor/page"),
   "/COMPANY_7/outsourcing/subcontractor-item": () => import("@/app/(main)/COMPANY_7/outsourcing/subcontractor-item/page"),
   "/COMPANY_7/design/project": () => import("@/app/(main)/COMPANY_7/design/project/page"),
@@ -308,7 +515,87 @@ const DYNAMIC_ADMIN_IMPORTS: Record<string, () => Promise<any>> = {
   "/COMPANY_10/design/design-request": () => import("@/app/(main)/COMPANY_10/design/design-request/page"),
   "/COMPANY_10/design/task-management": () => import("@/app/(main)/COMPANY_10/design/task-management/page"),
   // COMPANY_9 (제일그라스)
+  "/COMPANY_9/master-data/item-info": () => import("@/app/(main)/COMPANY_9/master-data/item-info/page"),
+  "/COMPANY_9/master-data/department": () => import("@/app/(main)/COMPANY_9/master-data/department/page"),
+  "/COMPANY_9/master-data/company": () => import("@/app/(main)/COMPANY_9/master-data/company/page"),
+  "/COMPANY_9/master-data/options": () => import("@/app/(main)/COMPANY_9/master-data/options/page"),
   "/COMPANY_9/sales/order": () => import("@/app/(main)/COMPANY_9/sales/order/page"),
+  "/COMPANY_9/sales/customer": () => import("@/app/(main)/COMPANY_9/sales/customer/page"),
+  "/COMPANY_9/sales/sales-item": () => import("@/app/(main)/COMPANY_9/sales/sales-item/page"),
+  "/COMPANY_9/sales/shipping-order": () => import("@/app/(main)/COMPANY_9/sales/shipping-order/page"),
+  "/COMPANY_9/sales/shipping-plan": () => import("@/app/(main)/COMPANY_9/sales/shipping-plan/page"),
+  "/COMPANY_9/sales/claim": () => import("@/app/(main)/COMPANY_9/sales/claim/page"),
+  "/COMPANY_9/sales/quote": () => import("@/app/(main)/COMPANY_9/sales/quote/page"),
+  "/COMPANY_9/production/process-info": () => import("@/app/(main)/COMPANY_9/production/process-info/page"),
+  "/COMPANY_9/production/work-instruction": () => import("@/app/(main)/COMPANY_9/production/work-instruction/page"),
+  "/COMPANY_9/production/plan-management": () => import("@/app/(main)/COMPANY_9/production/plan-management/page"),
+  "/COMPANY_9/production/bom": () => import("@/app/(main)/COMPANY_9/production/bom/page"),
+  "/COMPANY_9/equipment/info": () => import("@/app/(main)/COMPANY_9/equipment/info/page"),
+  "/COMPANY_9/equipment/plc-settings": () => import("@/app/(main)/COMPANY_9/equipment/plc-settings/page"),
+  "/COMPANY_9/monitoring/production": () => import("@/app/(main)/COMPANY_9/monitoring/production/page"),
+  "/COMPANY_9/monitoring/equipment": () => import("@/app/(main)/COMPANY_9/monitoring/equipment/page"),
+  "/COMPANY_9/monitoring/quality": () => import("@/app/(main)/COMPANY_9/monitoring/quality/page"),
+  "/COMPANY_9/logistics/material-status": () => import("@/app/(main)/COMPANY_9/logistics/material-status/page"),
+  "/COMPANY_9/logistics/outbound": () => import("@/app/(main)/COMPANY_9/logistics/outbound/page"),
+  "/COMPANY_9/logistics/receiving": () => import("@/app/(main)/COMPANY_9/logistics/receiving/page"),
+  "/COMPANY_9/logistics/packaging": () => import("@/app/(main)/COMPANY_9/logistics/packaging/page"),
+  "/COMPANY_9/logistics/info": () => import("@/app/(main)/COMPANY_9/logistics/info/page"),
+  "/COMPANY_9/logistics/inventory": () => import("@/app/(main)/COMPANY_9/logistics/inventory/page"),
+  "/COMPANY_9/logistics/warehouse": () => import("@/app/(main)/COMPANY_9/logistics/warehouse/page"),
+  "/COMPANY_9/outsourcing/subcontractor": () => import("@/app/(main)/COMPANY_9/outsourcing/subcontractor/page"),
+  "/COMPANY_9/outsourcing/subcontractor-item": () => import("@/app/(main)/COMPANY_9/outsourcing/subcontractor-item/page"),
+  "/COMPANY_9/purchase/order": () => import("@/app/(main)/COMPANY_9/purchase/order/page"),
+  "/COMPANY_9/purchase/purchase-item": () => import("@/app/(main)/COMPANY_9/purchase/purchase-item/page"),
+  "/COMPANY_9/purchase/supplier": () => import("@/app/(main)/COMPANY_9/purchase/supplier/page"),
+  "/COMPANY_9/quality/inspection": () => import("@/app/(main)/COMPANY_9/quality/inspection/page"),
+  "/COMPANY_9/quality/item-inspection": () => import("@/app/(main)/COMPANY_9/quality/item-inspection/page"),
+  "/COMPANY_9/mold/info": () => import("@/app/(main)/COMPANY_9/mold/info/page"),
+  "/COMPANY_9/design/project": () => import("@/app/(main)/COMPANY_9/design/project/page"),
+  "/COMPANY_9/design/change-management": () => import("@/app/(main)/COMPANY_9/design/change-management/page"),
+  "/COMPANY_9/design/my-work": () => import("@/app/(main)/COMPANY_9/design/my-work/page"),
+  "/COMPANY_9/design/design-request": () => import("@/app/(main)/COMPANY_9/design/design-request/page"),
+  "/COMPANY_9/design/task-management": () => import("@/app/(main)/COMPANY_9/design/task-management/page"),
+  // COMPANY_30
+  "/COMPANY_30/master-data/item-info": () => import("@/app/(main)/COMPANY_30/master-data/item-info/page"),
+  "/COMPANY_30/master-data/department": () => import("@/app/(main)/COMPANY_30/master-data/department/page"),
+  "/COMPANY_30/master-data/company": () => import("@/app/(main)/COMPANY_30/master-data/company/page"),
+  "/COMPANY_30/master-data/options": () => import("@/app/(main)/COMPANY_30/master-data/options/page"),
+  "/COMPANY_30/sales/order": () => import("@/app/(main)/COMPANY_30/sales/order/page"),
+  "/COMPANY_30/sales/customer": () => import("@/app/(main)/COMPANY_30/sales/customer/page"),
+  "/COMPANY_30/sales/sales-item": () => import("@/app/(main)/COMPANY_30/sales/sales-item/page"),
+  "/COMPANY_30/sales/shipping-order": () => import("@/app/(main)/COMPANY_30/sales/shipping-order/page"),
+  "/COMPANY_30/sales/shipping-plan": () => import("@/app/(main)/COMPANY_30/sales/shipping-plan/page"),
+  "/COMPANY_30/sales/claim": () => import("@/app/(main)/COMPANY_30/sales/claim/page"),
+  "/COMPANY_30/sales/quote": () => import("@/app/(main)/COMPANY_30/sales/quote/page"),
+  "/COMPANY_30/production/process-info": () => import("@/app/(main)/COMPANY_30/production/process-info/page"),
+  "/COMPANY_30/production/work-instruction": () => import("@/app/(main)/COMPANY_30/production/work-instruction/page"),
+  "/COMPANY_30/production/plan-management": () => import("@/app/(main)/COMPANY_30/production/plan-management/page"),
+  "/COMPANY_30/production/bom": () => import("@/app/(main)/COMPANY_30/production/bom/page"),
+  "/COMPANY_30/equipment/info": () => import("@/app/(main)/COMPANY_30/equipment/info/page"),
+  "/COMPANY_30/equipment/plc-settings": () => import("@/app/(main)/COMPANY_30/equipment/plc-settings/page"),
+  "/COMPANY_30/monitoring/production": () => import("@/app/(main)/COMPANY_30/monitoring/production/page"),
+  "/COMPANY_30/monitoring/equipment": () => import("@/app/(main)/COMPANY_30/monitoring/equipment/page"),
+  "/COMPANY_30/monitoring/quality": () => import("@/app/(main)/COMPANY_30/monitoring/quality/page"),
+  "/COMPANY_30/logistics/material-status": () => import("@/app/(main)/COMPANY_30/logistics/material-status/page"),
+  "/COMPANY_30/logistics/outbound": () => import("@/app/(main)/COMPANY_30/logistics/outbound/page"),
+  "/COMPANY_30/logistics/receiving": () => import("@/app/(main)/COMPANY_30/logistics/receiving/page"),
+  "/COMPANY_30/logistics/packaging": () => import("@/app/(main)/COMPANY_30/logistics/packaging/page"),
+  "/COMPANY_30/logistics/info": () => import("@/app/(main)/COMPANY_30/logistics/info/page"),
+  "/COMPANY_30/logistics/inventory": () => import("@/app/(main)/COMPANY_30/logistics/inventory/page"),
+  "/COMPANY_30/logistics/warehouse": () => import("@/app/(main)/COMPANY_30/logistics/warehouse/page"),
+  "/COMPANY_30/outsourcing/subcontractor": () => import("@/app/(main)/COMPANY_30/outsourcing/subcontractor/page"),
+  "/COMPANY_30/outsourcing/subcontractor-item": () => import("@/app/(main)/COMPANY_30/outsourcing/subcontractor-item/page"),
+  "/COMPANY_30/purchase/order": () => import("@/app/(main)/COMPANY_30/purchase/order/page"),
+  "/COMPANY_30/purchase/purchase-item": () => import("@/app/(main)/COMPANY_30/purchase/purchase-item/page"),
+  "/COMPANY_30/purchase/supplier": () => import("@/app/(main)/COMPANY_30/purchase/supplier/page"),
+  "/COMPANY_30/quality/inspection": () => import("@/app/(main)/COMPANY_30/quality/inspection/page"),
+  "/COMPANY_30/quality/item-inspection": () => import("@/app/(main)/COMPANY_30/quality/item-inspection/page"),
+  "/COMPANY_30/mold/info": () => import("@/app/(main)/COMPANY_30/mold/info/page"),
+  "/COMPANY_30/design/project": () => import("@/app/(main)/COMPANY_30/design/project/page"),
+  "/COMPANY_30/design/change-management": () => import("@/app/(main)/COMPANY_30/design/change-management/page"),
+  "/COMPANY_30/design/my-work": () => import("@/app/(main)/COMPANY_30/design/my-work/page"),
+  "/COMPANY_30/design/design-request": () => import("@/app/(main)/COMPANY_30/design/design-request/page"),
+  "/COMPANY_30/design/task-management": () => import("@/app/(main)/COMPANY_30/design/task-management/page"),
   // COMPANY_29
   "/COMPANY_29/master-data/item-info": () => import("@/app/(main)/COMPANY_29/master-data/item-info/page"),
   "/COMPANY_29/master-data/department": () => import("@/app/(main)/COMPANY_29/master-data/department/page"),
@@ -480,6 +767,7 @@ const COMPANY_PAGE_PREFIXES = [
   "/purchase/",
   "/quality/",
   "/mold/",
+  "/monitoring/",
 ];
 
 function isCompanyPage(url: string): boolean {
diff --git a/frontend/components/layout/AppLayout.tsx b/frontend/components/layout/AppLayout.tsx
index 9cc47e58..3b52d8bb 100644
--- a/frontend/components/layout/AppLayout.tsx
+++ b/frontend/components/layout/AppLayout.tsx
@@ -109,11 +109,14 @@ const convertMenuToUI = (menus: MenuItem[], userInfo: ExtendedUserInfo | null, p
     .filter((menu) => (menu.parent_obj_id || menu.PARENT_OBJ_ID) === parentId)
     .filter((menu) => (menu.status || menu.STATUS) === "active")
     .filter((menu) => {
-      // 회사관리 메뉴는 최고관리자만 표시
+      // 최고관리자 전용 메뉴 필터링
       const url = (menu.menu_url || menu.MENU_URL || "").toLowerCase();
       if (url.includes("companylist") || url.includes("company-list")) {
         return isSuperAdmin;
       }
+      if (url.includes("smart-factory-log")) {
+        return isSuperAdmin;
+      }
       return true;
     })
     .sort((a, b) => (a.seq || a.SEQ || 0) - (b.seq || b.SEQ || 0));
@@ -260,6 +263,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   });
   const [collapsedHover, setCollapsedHover] = useState(false);
   const collapsedHoverTimer = useRef<NodeJS.Timeout | null>(null);
+  const [hasPopMenus, setHasPopMenus] = useState(false);
 
   const toggleSidebarCollapse = () => {
     setSidebarCollapsed((prev) => {
@@ -344,6 +348,26 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     return () => window.removeEventListener("resize", checkIsMobile);
   }, []);
 
+  // POP 메뉴 존재 여부 확인
+  useEffect(() => {
+    const checkPopMenus = async () => {
+      try {
+        const response = await menuApi.getPopMenus();
+        if (response.success && response.data) {
+          const { childMenus, landingMenu } = response.data;
+          setHasPopMenus(!!(landingMenu?.menu_url || childMenus.length > 0));
+        } else {
+          setHasPopMenus(false);
+        }
+      } catch {
+        setHasPopMenus(false);
+      }
+    };
+    if (user) {
+      checkPopMenus();
+    }
+  }, [user]);
+
   // 프로필 관련 로직
   const {
     isModalOpen,
@@ -718,10 +742,12 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                 <FileCheck className="mr-2 h-4 w-4" />
                 <span>결재함</span>
               </DropdownMenuItem>
-              <DropdownMenuItem onClick={handlePopModeClick}>
-                <Monitor className="mr-2 h-4 w-4" />
-                <span>POP 모드</span>
-              </DropdownMenuItem>
+              {hasPopMenus && (
+                <DropdownMenuItem onClick={handlePopModeClick}>
+                  <Monitor className="mr-2 h-4 w-4" />
+                  <span>POP 모드</span>
+                </DropdownMenuItem>
+              )}
               <DropdownMenuSeparator />
               <div className="px-1 py-0.5">
                 <ThemeToggle />
@@ -978,10 +1004,12 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                   <FileCheck className="mr-2 h-4 w-4" />
                   <span>결재함</span>
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={handlePopModeClick}>
-                  <Monitor className="mr-2 h-4 w-4" />
-                  <span>POP 모드</span>
-                </DropdownMenuItem>
+                {hasPopMenus && (
+                  <DropdownMenuItem onClick={handlePopModeClick}>
+                    <Monitor className="mr-2 h-4 w-4" />
+                    <span>POP 모드</span>
+                  </DropdownMenuItem>
+                )}
                 <DropdownMenuSeparator />
                 <DropdownMenuItem onClick={handleLogout}>
                   <LogOut className="mr-2 h-4 w-4" />
diff --git a/frontend/components/pop/hardcoded/PopShell.tsx b/frontend/components/pop/hardcoded/PopShell.tsx
index 444b6193..7f538aef 100644
--- a/frontend/components/pop/hardcoded/PopShell.tsx
+++ b/frontend/components/pop/hardcoded/PopShell.tsx
@@ -2,6 +2,8 @@
 
 import React, { useState, useEffect, useRef, ReactNode } from "react";
 import { useRouter } from "next/navigation";
+import { useAuth } from "@/hooks/useAuth";
+import { usePopSettings } from "@/hooks/pop/usePopSettings";
 
 interface PopShellProps {
   children: ReactNode;
@@ -13,6 +15,10 @@ interface PopShellProps {
 
 export function PopShell({ children, showBanner = true, title, showBack = false, headerRight }: PopShellProps) {
   const router = useRouter();
+  const { user, logout } = useAuth();
+  const displayName = user?.userName || user?.userId || "사용자";
+  const deptName = user?.deptName || "";
+  const initial = displayName.charAt(0);
   const [mounted, setMounted] = useState(false);
   const [hours, setHours] = useState("00");
   const [minutes, setMinutes] = useState("00");
@@ -90,14 +96,15 @@ export function PopShell({ children, showBanner = true, title, showBack = false,
 
   const handleLogout = () => {
     setProfileOpen(false);
-    localStorage.removeItem("token");
-    localStorage.removeItem("accessToken");
-    localStorage.removeItem("refreshToken");
-    window.location.href = "/login";
+    logout();
   };
 
-  const marqueeText =
-    "[공지] 금일 오후 3시 전체 안전교육 실시 예정입니다. 전 직원 필참 바랍니다. \u00a0\u00a0|\u00a0\u00a0 [알림] 내일 설비 정기점검으로 인한 3호기 가동 중지 예정 \u00a0\u00a0|\u00a0\u00a0 [안내] 4월 생산실적 우수팀 발표 - 생산1팀 축하드립니다!";
+  // POP 설정에서 배너 텍스트 로드 (POP화면설정에서 관리)
+  const { settings: popSettings } = usePopSettings("/pop/home");
+  const homeConfig = (popSettings as any)?.screens?.home;
+  const bannerEnabled = homeConfig?.bannerEnabled ?? true;
+  const bannerText = homeConfig?.bannerText;
+  const marqueeText = bannerText || "[공지] 금일 오후 3시 전체 안전교육 실시 예정입니다. 전 직원 필참 바랍니다. \u00a0\u00a0|\u00a0\u00a0 [알림] 내일 설비 정기점검으로 인한 3호기 가동 중지 예정 \u00a0\u00a0|\u00a0\u00a0 [안내] 4월 생산실적 우수팀 발표 - 생산1팀 축하드립니다!";
 
   return (
     <div className="min-h-screen min-h-dvh flex flex-col" style={{ background: "#F5F5F5" }}>
@@ -148,7 +155,7 @@ export function PopShell({ children, showBanner = true, title, showBack = false,
               ) : (
                 <>
                   <span className="text-white text-lg font-bold tracking-tight leading-tight truncate">
-                    탑씰
+                    {user?.companyName || "POP"}
                   </span>
                   <span className="text-white/50 text-xs font-medium leading-tight">
                     현장 관리 시스템
@@ -224,14 +231,14 @@ export function PopShell({ children, showBanner = true, title, showBack = false,
               className="flex items-center gap-2.5 cursor-pointer"
             >
               <div className="hidden sm:flex flex-col items-end">
-                <span className="text-sm text-white/90 font-semibold leading-tight">김철수</span>
-                <span className="text-xs text-white/40 font-medium leading-tight">생산1팀</span>
+                <span className="text-sm text-white/90 font-semibold leading-tight">{displayName}</span>
+                <span className="text-xs text-white/40 font-medium leading-tight">{deptName}</span>
               </div>
               <div
                 className="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-sm font-bold text-white shrink-0 transition-transform active:scale-95"
                 style={{ boxShadow: "0 2px 8px rgba(59,130,246,.35)" }}
               >
-                김
+                {initial}
               </div>
             </button>
 
@@ -245,8 +252,8 @@ export function PopShell({ children, showBanner = true, title, showBack = false,
             >
               {/* User Info */}
               <div className="px-4 py-3 border-b border-gray-100">
-                <p className="text-sm font-semibold text-gray-900">김철수</p>
-                <p className="text-xs text-gray-400 mt-0.5">생산1팀</p>
+                <p className="text-sm font-semibold text-gray-900">{displayName}</p>
+                <p className="text-xs text-gray-400 mt-0.5">{deptName || user?.userId}</p>
               </div>
 
               {/* Menu Items */}
@@ -294,7 +301,7 @@ export function PopShell({ children, showBanner = true, title, showBack = false,
       </header>
 
       {/* ===== NOTICE BANNER (Marquee) ===== */}
-      {showBanner && <div className="bg-amber-50 border-b border-amber-200 px-4 py-2 flex items-center gap-3">
+      {showBanner && bannerEnabled && <div className="bg-amber-50 border-b border-amber-200 px-4 py-2 flex items-center gap-3">
         <div className="flex items-center gap-1.5 shrink-0">
           <span className="text-amber-600 text-sm">📢</span>
           <span className="text-xs font-bold text-amber-700">공지</span>
@@ -316,17 +323,7 @@ export function PopShell({ children, showBanner = true, title, showBack = false,
         {children}
       </main>
 
-      {/* ===== FOOTER ===== */}
-      <footer className="border-t border-gray-200 bg-white px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
-        <div className="max-w-[1400px] mx-auto flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-gray-400">
-          <span>&copy; 2026 탑씰. All rights reserved.</span>
-          <div className="flex items-center gap-3 sm:gap-4">
-            <span>Version 1.0.0</span>
-            <span className="hidden sm:inline">|</span>
-            <span>긴급연락: 042-XXX-XXXX</span>
-          </div>
-        </div>
-      </footer>
+      {/* FOOTER 삭제 — POP 화면에서 불필요 */}
 
       {/* Marquee keyframes */}
       <style jsx global>{`
diff --git a/frontend/components/pop/hardcoded/RecentActivity.tsx b/frontend/components/pop/hardcoded/RecentActivity.tsx
index 8ada9c51..ae1b67e3 100644
--- a/frontend/components/pop/hardcoded/RecentActivity.tsx
+++ b/frontend/components/pop/hardcoded/RecentActivity.tsx
@@ -145,9 +145,9 @@ export function RecentActivity() {
           </div>
         ) : (
           <div className="flex flex-col gap-2 sm:gap-3">
-            {activities.map((item) => (
+            {activities.map((item, idx) => (
               <div
-                key={item.id}
+                key={`${item.id}-${idx}`}
                 className="flex items-center gap-3 sm:gap-4 p-3 rounded-xl transition-all duration-150 hover:bg-gray-50 hover:translate-x-1"
               >
                 <span
diff --git a/frontend/components/pop/hardcoded/common/BarcodeScanModal.tsx b/frontend/components/pop/hardcoded/common/BarcodeScanModal.tsx
index f4d1f4bc..ac7bec6b 100644
--- a/frontend/components/pop/hardcoded/common/BarcodeScanModal.tsx
+++ b/frontend/components/pop/hardcoded/common/BarcodeScanModal.tsx
@@ -36,18 +36,22 @@ export const BarcodeScanModal: React.FC<BarcodeScanModalProps> = ({
 }) => {
   const [isScanning, setIsScanning] = useState(false);
   const [scannedCode, setScannedCode] = useState<string>("");
+  const [manualInput, setManualInput] = useState<string>("");
   const [error, setError] = useState<string>("");
   const [hasPermission, setHasPermission] = useState<boolean | null>(null);
   const webcamRef = useRef<Webcam>(null);
   const codeReaderRef = useRef<BrowserMultiFormatReader | null>(null);
   const scanIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const manualInputRef = useRef<HTMLInputElement>(null);
 
   // 바코드 리더 초기화 + 모달 열릴 때 상태 리셋
   useEffect(() => {
     if (open) {
       setScannedCode("");
+      setManualInput("");
       setError("");
       setIsScanning(false);
+      setHasPermission(null);
       codeReaderRef.current = new BrowserMultiFormatReader();
     }
 
@@ -73,10 +77,15 @@ export const BarcodeScanModal: React.FC<BarcodeScanModalProps> = ({
     }
 
     try {
-      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      // 후면 카메라 먼저 시도, 실패하면 전면 카메라 fallback
+      let stream: MediaStream;
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
+      } catch {
+        stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      }
       setHasPermission(true);
       stream.getTracks().forEach((track) => track.stop());
-      toast.success("카메라 권한이 허용되었습니다.");
     } catch (err: any) {
       setHasPermission(false);
 
@@ -154,12 +163,14 @@ export const BarcodeScanModal: React.FC<BarcodeScanModalProps> = ({
     }
   };
 
-  // 수동 확인 버튼
+  // 수동 확인 버튼 (스캔 결과 또는 직접 입력)
   const handleConfirm = () => {
-    if (scannedCode) {
-      onScanSuccess(scannedCode);
+    const code = scannedCode || manualInput.trim();
+    if (code) {
+      onScanSuccess(code); // 호출 측에서 검색 필드를 덮어쓰기
+      onOpenChange(false);
     } else {
-      toast.error("스캔된 바코드가 없습니다.");
+      toast.error("바코드를 스캔하거나 직접 입력해주세요.");
     }
   };
 
@@ -254,7 +265,10 @@ export const BarcodeScanModal: React.FC<BarcodeScanModalProps> = ({
                 audio={false}
                 screenshotFormat="image/jpeg"
                 videoConstraints={{
-                  facingMode: "environment",
+                  facingMode: { ideal: "environment" },
+                }}
+                onUserMediaError={() => {
+                  // environment 카메라 실패 시 자동 fallback (Webcam 내부 처리)
                 }}
                 className="h-full w-full object-cover"
               />
@@ -285,6 +299,41 @@ export const BarcodeScanModal: React.FC<BarcodeScanModalProps> = ({
             </div>
           )}
 
+          {/* 수동 입력 (카메라 사용 불가 시 또는 외장 스캐너 사용 시) */}
+          <div className="rounded-md border border-border bg-muted/30 p-3 space-y-2">
+            <p className="text-xs font-medium text-muted-foreground">직접 입력 또는 외장 스캐너</p>
+            <div className="flex gap-2">
+              <input
+                ref={manualInputRef}
+                type="text"
+                value={manualInput}
+                onChange={(e) => setManualInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && manualInput.trim()) {
+                    e.preventDefault();
+                    onScanSuccess(manualInput.trim());
+                    onOpenChange(false);
+                  }
+                }}
+                placeholder="바코드/QR 번호 입력 후 Enter"
+                className="flex-1 h-11 rounded-lg border border-border px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                autoFocus={hasPermission === false}
+              />
+              <Button
+                onClick={() => {
+                  if (manualInput.trim()) {
+                    onScanSuccess(manualInput.trim());
+                    onOpenChange(false);
+                  }
+                }}
+                disabled={!manualInput.trim()}
+                className="h-11 px-4"
+              >
+                확인
+              </Button>
+            </div>
+          </div>
+
           {/* 바코드 포맷 정보 */}
           <div className="rounded-md border border-border bg-muted/50 p-3">
             <div className="flex items-start gap-2">
diff --git a/frontend/components/pop/hardcoded/inbound/InboundCartPage.tsx b/frontend/components/pop/hardcoded/inbound/InboundCartPage.tsx
index 960794b4..d6a90ec3 100644
--- a/frontend/components/pop/hardcoded/inbound/InboundCartPage.tsx
+++ b/frontend/components/pop/hardcoded/inbound/InboundCartPage.tsx
@@ -310,9 +310,15 @@ export function InboundCartPage() {
 
     try {
       // 확정 시점에 채번 (동시접속 충돌 방지)
+      // POP 화면설정에서 선택한 채번규칙 사용 (없으면 기본)
       let finalNumber = "";
       try {
-        const numRes = await apiClient.get("/receiving/generate-number");
+        const settingsRes: any = await apiClient.get("/screen-management/screens/6527/layout-pop").catch(() => null);
+        const ruleId = settingsRes?.data?.data?.settings?.popConfig?.inbound?.numberingRuleId;
+        const url = ruleId && ruleId !== "__none__"
+          ? `/receiving/generate-number?ruleId=${encodeURIComponent(ruleId)}`
+          : "/receiving/generate-number";
+        const numRes = await apiClient.get(url);
         if (numRes.data?.success && numRes.data?.data) {
           finalNumber = numRes.data.data;
           setInboundNumber(finalNumber);
@@ -344,6 +350,7 @@ export function InboundCartPage() {
             reference_number: item.purchase_no,
             supplier_code: item.supplier_code,
             supplier_name: item.supplier_name,
+            inbound_status: "입고완료",
             inspection_status: inspResult?.completed
               ? "검사완료"
               : item.inspection_required
diff --git a/frontend/components/pop/hardcoded/outbound/OutboundCartPage.tsx b/frontend/components/pop/hardcoded/outbound/OutboundCartPage.tsx
index 918e0510..32bcc462 100644
--- a/frontend/components/pop/hardcoded/outbound/OutboundCartPage.tsx
+++ b/frontend/components/pop/hardcoded/outbound/OutboundCartPage.tsx
@@ -305,9 +305,16 @@ export function OutboundCartPage() {
 
     try {
       // Generate outbound number at confirm time
+      // POP 화면설정에서 선택한 채번규칙 사용 (없으면 기본)
+      // 출고 장바구니 전용 screen_id 7010
       let finalNumber = "";
       try {
-        const numRes = await apiClient.get("/outbound/generate-number");
+        const settingsRes: any = await apiClient.get("/screen-management/screens/7010/layout-pop").catch(() => null);
+        const ruleId = settingsRes?.data?.data?.settings?.popConfig?.outbound?.numberingRuleId;
+        const url = ruleId && ruleId !== "__none__"
+          ? `/outbound/generate-number?ruleId=${encodeURIComponent(ruleId)}`
+          : "/outbound/generate-number";
+        const numRes = await apiClient.get(url);
         if (numRes.data?.success && numRes.data?.data) {
           finalNumber = numRes.data.data;
           setOutboundNumber(finalNumber);
@@ -337,7 +344,7 @@ export function OutboundCartPage() {
           customer_name: item.customer_name,
           source_type: "shipment_instruction_detail",
           source_id: item.source_id || item.id,
-          outbound_status: "대기",
+          outbound_status: "출고완료",
         })),
       };
 
diff --git a/frontend/components/pop/hardcoded/production/DefectTypeModal.tsx b/frontend/components/pop/hardcoded/production/DefectTypeModal.tsx
index 39975f5a..5956288a 100644
--- a/frontend/components/pop/hardcoded/production/DefectTypeModal.tsx
+++ b/frontend/components/pop/hardcoded/production/DefectTypeModal.tsx
@@ -43,27 +43,89 @@ function QtyInput({
   onChange: (v: number) => void;
   max: number;
 }) {
+  const [padOpen, setPadOpen] = useState(false);
+  const [padValue, setPadValue] = useState(String(value));
+
+  const handlePadOpen = () => {
+    setPadValue("");
+    setPadOpen(true);
+  };
+
+  const handlePadKey = (key: string) => {
+    if (key === "backspace") {
+      setPadValue((prev) => prev.length > 1 ? prev.slice(0, -1) : "0");
+    } else if (key === "clear") {
+      setPadValue("0");
+    } else if (key === "max") {
+      setPadValue(String(max));
+    } else {
+      setPadValue((prev) => prev === "0" ? key : prev + key);
+    }
+  };
+
+  const handlePadConfirm = () => {
+    const num = Math.min(Math.max(0, parseInt(padValue, 10) || 0), max);
+    onChange(num);
+    setPadOpen(false);
+  };
+
   return (
-    <div className="flex items-center gap-2">
-      <button
-        onClick={() => onChange(Math.max(0, value - 1))}
-        className="w-10 h-10 rounded-lg bg-gray-100 text-gray-600 text-lg font-bold flex items-center justify-center active:scale-95 transition-all hover:bg-gray-200"
-      >
-        -
-      </button>
-      <span
-        className="w-12 text-center text-lg font-bold text-gray-900"
-        style={{ fontVariantNumeric: "tabular-nums" }}
-      >
-        {value}
-      </span>
-      <button
-        onClick={() => onChange(Math.min(max, value + 1))}
-        className="w-10 h-10 rounded-lg bg-gray-100 text-gray-600 text-lg font-bold flex items-center justify-center active:scale-95 transition-all hover:bg-gray-200"
-      >
-        +
-      </button>
-    </div>
+    <>
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => onChange(Math.max(0, value - 1))}
+          className="w-10 h-10 rounded-lg bg-gray-100 text-gray-600 text-lg font-bold flex items-center justify-center active:scale-95 transition-all hover:bg-gray-200"
+        >
+          -
+        </button>
+        <button
+          onClick={handlePadOpen}
+          className="w-16 h-10 text-center text-lg font-bold text-gray-900 bg-gray-50 rounded-lg border-2 border-gray-200 hover:border-red-300 active:scale-95 transition-all"
+          style={{ fontVariantNumeric: "tabular-nums" }}
+        >
+          {value}
+        </button>
+        <button
+          onClick={() => onChange(Math.min(max, value + 1))}
+          className="w-10 h-10 rounded-lg bg-gray-100 text-gray-600 text-lg font-bold flex items-center justify-center active:scale-95 transition-all hover:bg-gray-200"
+        >
+          +
+        </button>
+      </div>
+
+      {/* 숫자 키패드 모달 */}
+      {padOpen && (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center">
+          <div className="absolute inset-0 bg-black/40" onClick={() => setPadOpen(false)} />
+          <div className="relative bg-white rounded-2xl shadow-2xl p-4 w-[280px] z-10">
+            <div className="text-center mb-3">
+              <p className="text-sm text-gray-500">불량 수량 (최대 {max})</p>
+              <p className="text-3xl font-bold text-gray-900 mt-1" style={{ fontVariantNumeric: "tabular-nums" }}>{padValue || "0"}</p>
+            </div>
+            <div className="grid grid-cols-3 gap-2 mb-3">
+              {["1","2","3","4","5","6","7","8","9"].map((k) => (
+                <button key={k} onClick={() => handlePadKey(k)}
+                  className="h-12 rounded-xl bg-gray-100 text-lg font-bold text-gray-800 active:scale-95 active:bg-gray-200 transition-all">{k}</button>
+              ))}
+              <button onClick={() => handlePadKey("clear")}
+                className="h-12 rounded-xl bg-gray-200 text-sm font-bold text-gray-600 active:scale-95 transition-all">C</button>
+              <button onClick={() => handlePadKey("0")}
+                className="h-12 rounded-xl bg-gray-100 text-lg font-bold text-gray-800 active:scale-95 transition-all">0</button>
+              <button onClick={() => handlePadKey("backspace")}
+                className="h-12 rounded-xl bg-gray-200 text-sm font-bold text-gray-600 active:scale-95 transition-all">←</button>
+            </div>
+            <button onClick={() => handlePadKey("max")}
+              className="w-full h-10 rounded-xl bg-red-50 text-red-600 text-sm font-bold mb-2 active:scale-95 transition-all">MAX ({max})</button>
+            <div className="flex gap-2">
+              <button onClick={() => setPadOpen(false)}
+                className="flex-1 h-11 rounded-xl bg-gray-100 text-gray-700 font-semibold active:scale-95 transition-all">취소</button>
+              <button onClick={handlePadConfirm}
+                className="flex-1 h-11 rounded-xl bg-red-500 text-white font-bold active:scale-95 transition-all">확인</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   );
 }
 
diff --git a/frontend/components/pop/hardcoded/production/ProcessWork.tsx b/frontend/components/pop/hardcoded/production/ProcessWork.tsx
index 04681b02..bba2caa8 100644
--- a/frontend/components/pop/hardcoded/production/ProcessWork.tsx
+++ b/frontend/components/pop/hardcoded/production/ProcessWork.tsx
@@ -3,6 +3,7 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { useRouter } from "next/navigation";
 import { apiClient } from "@/lib/api/client";
+import { usePopSettings } from "@/hooks/pop/usePopSettings";
 import { dataApi } from "@/lib/api/data";
 import { ProcessTimer, type TimerStatus } from "./ProcessTimer";
 import { DefectTypeModal, type DefectEntry, type DefectType } from "./DefectTypeModal";
@@ -102,7 +103,7 @@ interface BatchHistoryItem {
   changed_by: string | null;
 }
 
-type ActiveSection = "checklist" | "result" | "inventory";
+type ActiveSection = "checklist" | "result" | "inventory" | "material";
 
 const PHASE_ORDER: Record<string, number> = { PRE: 1, IN: 2, POST: 3 };
 const PHASE_LABELS: Record<string, string> = { PRE: "작업 전", IN: "작업 중", POST: "작업 후" };
@@ -113,7 +114,7 @@ const PHASE_LABELS: Record<string, string> = { PRE: "작업 전", IN: "작업 
 
 const DESIGN = {
   bg: { page: "#F5F5F5", card: "#FFFFFF", header: "#1a1a2e", infoBar: "#1a1a2e" },
-  sidebar: { width: 220 },
+  sidebar: { width: 240 },
   timer: { fontSize: 48 },
   button: { height: 60, touchMin: 48 },
   input: { height: 52 },
@@ -311,10 +312,13 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
   const contentRef = useRef<HTMLDivElement>(null);
 
   /* ---- Core State ---- */
+  const { settings: popSettings } = usePopSettings();
+  const peSettings = popSettings.screens.processExecution;
   const [process, setProcess] = useState<ProcessData | null>(null);
   const [wiInfo, setWiInfo] = useState<WorkInstructionInfo | null>(null);
   const [checklist, setChecklist] = useState<ChecklistItem[]>([]);
   const [defectTypes, setDefectTypes] = useState<DefectType[]>([]);
+  const [processList, setProcessList] = useState<Array<{ process_code: string; process_name: string }>>([]);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
 
@@ -340,6 +344,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
   const [warehouseLocations, setWarehouseLocations] = useState<WarehouseLocation[]>([]);
   const [selectedWarehouse, setSelectedWarehouse] = useState<string>("");
   const [selectedLocation, setSelectedLocation] = useState<string>("");
+  const [packageUnit, setPackageUnit] = useState<string>("");
   const [inboundDone, setInboundDone] = useState(false);
 
   /* ---- Batch History ---- */
@@ -371,10 +376,25 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
             });
             const wi = wiRes.data?.[0] as Record<string, unknown> | undefined;
             if (wi) {
+              let itemName = String(wi.item_name || "");
+              let itemCode = String(wi.item_code || wi.item_number || "");
+
+              // item_name이 비어있고 item_id가 있으면 item_info에서 조회
+              if (!itemName && wi.item_id) {
+                try {
+                  const itemRes = await apiClient.get(`/data/item_info/${wi.item_id}`);
+                  const item = itemRes.data?.data;
+                  if (item) {
+                    itemName = String(item.item_name || "");
+                    itemCode = String(item.item_number || item.item_code || "");
+                  }
+                } catch { /* non-critical */ }
+              }
+
               setWiInfo({
                 work_instruction_no: String(wi.work_instruction_no || ""),
-                item_name: String(wi.item_name || ""),
-                item_code: String(wi.item_code || ""),
+                item_name: itemName,
+                item_code: itemCode,
                 qty: parseInt(String(wi.qty), 10) || 0,
               });
             }
@@ -413,7 +433,24 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
         setIsLastProcess(false);
       }
 
-      // 6. Warehouses
+      // 6. 같은 작업지시의 공정 목록 (재작업 공정 지정용)
+      if (procData?.wo_id) {
+        try {
+          const plRes = await dataApi.getTableData("work_order_process", {
+            size: 100,
+            filters: { wo_id: procData.wo_id },
+          });
+          const masters = ((plRes.data ?? []) as ProcessData[])
+            .filter((p) => !p.parent_process_id)
+            .sort((a, b) => parseInt(a.seq_no, 10) - parseInt(b.seq_no, 10))
+            .map((p) => ({ process_code: p.process_code, process_name: p.process_name }));
+          // 중복 제거
+          const seen = new Set<string>();
+          setProcessList(masters.filter((m) => { if (seen.has(m.process_code)) return false; seen.add(m.process_code); return true; }));
+        } catch { setProcessList([]); }
+      }
+
+      // 7. Warehouses
       try {
         const whRes = await apiClient.get("/pop/production/warehouses");
         setWarehouses(whRes.data?.data || []);
@@ -564,41 +601,65 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
   })();
 
   const handleTimerAction = async (action: "start" | "pause" | "resume" | "complete") => {
+    // 낙관적 업데이트: UI 즉시 반영
+    setProcess((prev) => {
+      if (!prev) return prev;
+      const now = new Date().toISOString();
+      if (action === "start") return { ...prev, status: "in_progress", started_at: now, paused_at: null };
+      if (action === "pause") return { ...prev, paused_at: now };
+      if (action === "resume") {
+        const pausedSec = prev.paused_at ? Math.floor((Date.now() - new Date(prev.paused_at).getTime()) / 1000) : 0;
+        return { ...prev, paused_at: null, total_paused_time: String((parseInt(prev.total_paused_time || "0", 10) || 0) + pausedSec) };
+      }
+      if (action === "complete") return { ...prev, status: "completed", completed_at: now, paused_at: null };
+      return prev;
+    });
+
+    // API 백그라운드 호출
     try {
-      const body: Record<string, unknown> = {
-        work_order_process_id: processId,
-        action,
-      };
+      const body: Record<string, unknown> = { work_order_process_id: processId, action };
       if (action === "complete") {
         body.good_qty = process?.good_qty || "0";
         body.defect_qty = process?.defect_qty || "0";
       }
-      const res = await apiClient.post("/pop/production/timer", body);
-      if (res.data?.success) {
-        await fetchProcess();
-      }
+      await apiClient.post("/pop/production/timer", body);
+      // 서버 데이터로 동기화 (조용히)
+      fetchProcess();
     } catch (error: unknown) {
       const err = error as { response?: { data?: { message?: string } } };
       alert(err.response?.data?.message || "타이머 오류");
+      fetchProcess(); // 실패 시 서버 상태로 복원
     }
   };
 
-  /* ---- Group Timer ---- */
-  const handleGroupTimerAction = async (
+  /* ---- Group Timer (낙관적 업데이트) ---- */
+  const handleGroupTimerAction = (
     action: "start" | "pause" | "resume" | "complete",
     groupItemId: string
   ) => {
-    try {
-      await apiClient.post("/pop/production/group-timer", {
-        work_order_process_id: processId,
-        source_work_item_id: groupItemId,
-        action,
-      });
-      await fetchProcess();
-    } catch (error: unknown) {
-      const err = error as { response?: { data?: { message?: string } } };
-      alert(err.response?.data?.message || "그룹 타이머 오류");
-    }
+    // 로컬 체크리스트 상태 즉시 업데이트
+    const now = new Date().toISOString();
+    setChecklist((prev) =>
+      prev.map((item) => {
+        if (item.source_work_item_id !== groupItemId) return item;
+        if (action === "start") return { ...item, group_started_at: now, group_paused_at: null };
+        if (action === "pause") return { ...item, group_paused_at: now };
+        if (action === "resume") {
+          const pausedSec = item.group_paused_at ? Math.floor((Date.now() - new Date(item.group_paused_at).getTime()) / 1000) : 0;
+          const prev_total = parseInt(item.group_total_paused_time || "0", 10) || 0;
+          return { ...item, group_paused_at: null, group_total_paused_time: String(prev_total + pausedSec) };
+        }
+        if (action === "complete") return { ...item, group_completed_at: now, group_paused_at: null };
+        return item;
+      })
+    );
+
+    // API 백그라운드 (결과 무시, 실패 시만 동기화)
+    apiClient.post("/pop/production/group-timer", {
+      work_order_process_id: processId,
+      source_work_item_id: groupItemId,
+      action,
+    }).catch(() => { fetchProcess(); });
   };
 
   /* ---- Group timer display ---- */
@@ -869,14 +930,6 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
         style={{ backgroundColor: DESIGN.bg.infoBar }}
       >
         <div className="flex items-center gap-3 sm:gap-6">
-          <button
-            onClick={() => router.back()}
-            className="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center text-white/70 hover:bg-white/20 active:scale-95 transition-all shrink-0"
-          >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-            </svg>
-          </button>
           <div className="flex items-center gap-4 sm:gap-8 flex-1 min-w-0 overflow-x-auto">
             {wiInfo && (
               <div className="flex items-center gap-1.5 shrink-0">
@@ -897,13 +950,17 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
               </span>
             </div>
             <div className="flex items-center gap-1.5 shrink-0">
-              <span className="text-white/40 text-xs">지시수량</span>
-              <span className="text-white font-bold text-sm">{inputQty.toLocaleString()}</span>
+              <span className="text-white/40 text-xs">지시</span>
+              <span className="text-white font-medium text-sm">{parseInt(process.plan_qty || "0", 10).toLocaleString()}</span>
+            </div>
+            <div className="flex items-center gap-1.5 shrink-0">
+              <span className="text-amber-400/80 text-xs">접수</span>
+              <span className="text-amber-300 font-bold text-sm">{inputQty.toLocaleString()}</span>
             </div>
           </div>
           {/* Status badge */}
           <span
-            className={`text-[10px] font-bold px-2.5 py-1 rounded-full shrink-0 ${
+            className={`text-xs font-bold px-2.5 py-1 rounded-full shrink-0 ${
               isCompleted
                 ? "bg-green-500/20 text-green-300"
                 : process.status === "in_progress"
@@ -914,7 +971,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
             {isCompleted ? "완료" : process.status === "in_progress" ? "진행중" : process.status}
           </span>
           {process.is_rework === "Y" && (
-            <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-amber-500/20 text-amber-300 shrink-0">
+            <span className="text-xs font-bold px-2 py-0.5 rounded-full bg-amber-500/20 text-amber-300 shrink-0">
               재작업
             </span>
           )}
@@ -922,76 +979,15 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
       </div>
 
       {/* ============================================================ */}
-      {/* KPI Stats Row                                                 */}
-      {/* ============================================================ */}
-      <div className="shrink-0 bg-white border-b border-gray-100">
-        <div className="grid grid-cols-4 gap-0">
-          {[
-            { label: "접수", value: inputQty, color: "text-gray-900", bgColor: "bg-gray-50" },
-            { label: "생산", value: totalProduced, color: "text-blue-700", bgColor: "bg-blue-50" },
-            { label: "양품", value: accumulatedGood, color: "text-green-700", bgColor: "bg-green-50" },
-            { label: "불량", value: accumulatedDefect, color: "text-red-700", bgColor: "bg-red-50" },
-          ].map((kpi) => (
-            <div key={kpi.label} className={`${kpi.bgColor} p-3 text-center`}>
-              <p className="text-[10px] font-medium text-gray-400">{kpi.label}</p>
-              <p className={`text-lg font-bold ${kpi.color}`} style={{ fontVariantNumeric: "tabular-nums" }}>
-                {kpi.value.toLocaleString()}
-              </p>
-            </div>
-          ))}
-        </div>
-        {/* Progress bar */}
-        {inputQty > 0 && (
-          <div className="px-4 pb-2 pt-1">
-            <div className="flex items-center justify-between text-[10px] text-gray-400 mb-0.5">
-              <span>진행률</span>
-              <span>{Math.min(100, Math.round((totalProduced / inputQty) * 100))}%</span>
-            </div>
-            <div className="h-1.5 bg-gray-100 rounded-full overflow-hidden">
-              <div
-                className="h-full rounded-full transition-all duration-500"
-                style={{
-                  width: `${Math.min(100, (totalProduced / inputQty) * 100)}%`,
-                  background:
-                    totalProduced >= inputQty
-                      ? "linear-gradient(90deg, #22c55e, #16a34a)"
-                      : "linear-gradient(90deg, #3b82f6, #1d4ed8)",
-                }}
-              />
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* ============================================================ */}
-      {/* Process Timer                                                 */}
-      {/* ============================================================ */}
-      <div className="shrink-0 mx-4 mt-3">
-        <ProcessTimer
-          status={timerStatus}
-          startedAt={process.started_at}
-          pausedAt={process.paused_at}
-          totalPausedSeconds={parseInt(process.total_paused_time || "0", 10)}
-          completedAt={process.completed_at}
-          actualWorkTime={process.actual_work_time ? parseInt(process.actual_work_time, 10) : null}
-          onStart={() => handleTimerAction("start")}
-          onPause={() => handleTimerAction("pause")}
-          onResume={() => handleTimerAction("resume")}
-          onComplete={() => handleTimerAction("complete")}
-          disabled={saving}
-        />
-      </div>
-
-      {/* ============================================================ */}
-      {/* Main Content: Sidebar + Content Area                          */}
+      {/* Main Layout: Sidebar(left) + Timer+Content(right)             */}
       {/* ============================================================ */}
       {(hasChecklist || !isConfirmed || (isLastProcess && !inboundDone)) && (
-        <div className="flex flex-1 gap-0 min-h-0 overflow-hidden mt-3">
+        <div className="flex flex-1 gap-0 min-h-0 overflow-hidden">
           {/* ========================================================= */}
-          {/* Sidebar (hidden on small screens, use top tabs instead)    */}
+          {/* Left Sidebar (always visible)                              */}
           {/* ========================================================= */}
           <div
-            className="hidden md:flex shrink-0 flex-col overflow-y-auto border-r border-gray-200 bg-white"
+            className="shrink-0 flex flex-col overflow-y-auto border-r border-gray-200 bg-gray-50"
             style={{ width: `${DESIGN.sidebar.width}px`, scrollbarWidth: "thin" }}
           >
             <div className="py-3">
@@ -1014,10 +1010,10 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                           <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                         </svg>
                       </div>
-                      <span className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">
+                      <span className="text-xs font-bold text-gray-400 uppercase tracking-wider">
                         {PHASE_LABELS[phase] || phase}
                       </span>
-                      <span className={`ml-auto text-[10px] font-semibold ${allDone ? "text-green-500" : "text-gray-300"}`}>
+                      <span className={`ml-auto text-xs font-semibold ${allDone ? "text-green-500" : "text-gray-300"}`}>
                         {phaseDone}/{phaseTotal}
                       </span>
                     </div>
@@ -1034,7 +1030,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                           }}
                           className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-all ${
                             isSelected
-                              ? "border-l-[3px] border-l-blue-500 bg-blue-50"
+                              ? "border-l-[3px] border-l-gray-900 bg-white"
                               : "border-l-[3px] border-l-transparent hover:bg-gray-50"
                           }`}
                         >
@@ -1050,7 +1046,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                           >
                             {g.title}
                           </span>
-                          <span className={`text-[10px] shrink-0 ${isDone ? "text-green-500" : "text-gray-300"}`}>
+                          <span className={`text-xs shrink-0 ${isDone ? "text-green-500" : "text-gray-300"}`}>
                             {g.completed}/{g.total}
                           </span>
                         </button>
@@ -1063,13 +1059,31 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
               {/* Result section link */}
               {!isConfirmed && (
                 <div className="mb-4">
+                  {/* 자재 투입 (설정으로 제어) */}
+                  {peSettings.materialInput && <button
+                    onClick={() => {
+                      setActiveSection("material");
+                      contentRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+                    }}
+                    className={`w-full flex items-center gap-2 px-3 py-2.5 mb-2 text-left transition-all ${
+                      activeSection === "material"
+                        ? "border-l-[3px] border-l-gray-900 bg-white"
+                        : "border-l-[3px] border-l-transparent hover:bg-gray-50"
+                    }`}
+                  >
+                    <span className="text-sm">📦</span>
+                    <span className={`text-xs ${activeSection === "material" ? "font-semibold text-blue-700" : "text-gray-600 font-medium"}`}>
+                      자재 투입
+                    </span>
+                  </button>}
+
                   <div className="flex items-center gap-2 px-3 mb-1.5">
                     <div className="w-4 h-4 rounded-full bg-amber-500 flex items-center justify-center">
                       <svg className="w-2.5 h-2.5 text-white" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15a2.25 2.25 0 012.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V19.5a2.25 2.25 0 002.25 2.25h.75" />
                       </svg>
                     </div>
-                    <span className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">실적</span>
+                    <span className="text-xs font-bold text-gray-400 uppercase tracking-wider">실적</span>
                   </div>
                   <button
                     onClick={() => {
@@ -1078,7 +1092,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                     }}
                     className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-all ${
                       activeSection === "result"
-                        ? "border-l-[3px] border-l-blue-500 bg-blue-50"
+                        ? "border-l-[3px] border-l-gray-900 bg-white"
                         : "border-l-[3px] border-l-transparent hover:bg-gray-50"
                     }`}
                   >
@@ -1104,7 +1118,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                         <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
                       </svg>
                     </div>
-                    <span className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">입고</span>
+                    <span className="text-xs font-bold text-gray-400 uppercase tracking-wider">입고</span>
                   </div>
                   <button
                     onClick={() => {
@@ -1113,7 +1127,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                     }}
                     className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-all ${
                       activeSection === "inventory"
-                        ? "border-l-[3px] border-l-blue-500 bg-blue-50"
+                        ? "border-l-[3px] border-l-gray-900 bg-white"
                         : "border-l-[3px] border-l-transparent hover:bg-gray-50"
                     }`}
                   >
@@ -1138,9 +1152,9 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
           </div>
 
           {/* ========================================================= */}
-          {/* Mobile Tabs (shown on small screens)                       */}
+          {/* Mobile Tabs (hidden — sidebar always visible)                */}
           {/* ========================================================= */}
-          <div className="md:hidden shrink-0 flex overflow-x-auto bg-white border-b border-gray-200 px-2 gap-1">
+          <div className="hidden shrink-0 flex overflow-x-auto bg-white border-b border-gray-200 px-2 gap-1">
             {availablePhases.map((phase) => {
               const phaseGroups = groupsByPhase[phase] || [];
               const phaseDone = phaseGroups.reduce((s, g) => s + g.completed, 0);
@@ -1187,9 +1201,74 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
           </div>
 
           {/* ========================================================= */}
-          {/* Content Area                                               */}
+          {/* Right Column: Timer + Content                              */}
           {/* ========================================================= */}
-          <div ref={contentRef} className="flex-1 overflow-y-auto p-4">
+          <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+            {/* Unified Timer Bar (group-level) */}
+            <div className={`shrink-0 px-4 py-3 border-b bg-white ${
+              selectedGroup?.timerPaused ? "border-amber-200" :
+              selectedGroup?.timerCompleted ? "border-green-200" : "border-gray-100"
+            }`}>
+              {(() => {
+                const g = selectedGroup;
+                const groupElapsed = g?.timerState.startedAt
+                  ? Math.max(0, Math.floor((
+                      (g.timerState.completedAt ? new Date(g.timerState.completedAt).getTime() : Date.now())
+                      - new Date(g.timerState.startedAt).getTime()
+                    ) / 1000))
+                  : 0;
+                const groupWork = selectedGroupWorkSec;
+                const isIdle = !g?.timerStarted;
+                const isPaused = g?.timerPaused;
+                const isDone = g?.timerCompleted;
+                const isRunning = g?.timerStarted && !isPaused && !isDone;
+
+                const btnClass = "h-12 min-w-[80px] rounded-xl text-base font-bold text-white active:scale-95 transition-all px-4";
+
+                return (
+                  <div className="flex items-center gap-4">
+                    <span className="text-2xl font-black tracking-wider text-gray-900" style={{ fontVariantNumeric: "tabular-nums", fontFamily: "monospace" }}>
+                      {formatTime(groupElapsed)}
+                    </span>
+                    <span className="text-lg font-semibold tracking-wider text-gray-300" style={{ fontVariantNumeric: "tabular-nums", fontFamily: "monospace" }}>
+                      {formatTime(groupWork)}
+                    </span>
+                    <span className={`flex-1 text-base font-bold truncate ${
+                      isPaused ? "text-amber-700" : isDone ? "text-green-700" : "text-gray-900"
+                    }`}>
+                      {g?.title || "그룹 선택"}
+                      {isPaused && <span className="text-xs text-amber-500 ml-2">일시정지</span>}
+                      {isDone && <span className="text-xs text-green-500 ml-2">✓ 완료</span>}
+                    </span>
+                    <div className="flex gap-2 shrink-0">
+                      {isIdle && g && (
+                        <button onClick={() => handleGroupTimerAction("start", g.itemId)} className={btnClass}
+                          style={{ background: "linear-gradient(135deg,#3b82f6,#1d4ed8)" }}>▶ 시작</button>
+                      )}
+                      {isRunning && g && (
+                        <>
+                          <button onClick={() => handleGroupTimerAction("pause", g.itemId)} className={btnClass}
+                            style={{ background: "linear-gradient(135deg,#f59e0b,#d97706)" }}>⏸ 정지</button>
+                          <button onClick={() => handleGroupTimerAction("complete", g.itemId)} className={btnClass}
+                            style={{ background: "linear-gradient(135deg,#10b981,#059669)" }}>⏹ 종료</button>
+                        </>
+                      )}
+                      {isPaused && g && (
+                        <>
+                          <button onClick={() => handleGroupTimerAction("resume", g.itemId)} className={btnClass}
+                            style={{ background: "linear-gradient(135deg,#3b82f6,#1d4ed8)" }}>▶ 재개</button>
+                          <button onClick={() => handleGroupTimerAction("complete", g.itemId)} className={btnClass}
+                            style={{ background: "linear-gradient(135deg,#10b981,#059669)" }}>⏹ 종료</button>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                );
+              })()}
+            </div>
+
+            {/* Content Area (scrollable) */}
+            <div ref={contentRef} className="flex-1 overflow-y-auto p-4">
             {/* Checklist Content */}
             {activeSection === "checklist" && selectedGroup && (
               <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
@@ -1212,70 +1291,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                   </span>
                 </div>
 
-                {/* Group Timer display + controls */}
-                {!isCompleted && (
-                  <div className="flex items-center gap-3 mb-4 p-3 rounded-xl bg-gray-50 border border-gray-200">
-                    <svg className="w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                    <span
-                      className="font-mono font-bold text-blue-700 tabular-nums"
-                      style={{ fontSize: 28, fontVariantNumeric: "tabular-nums" }}
-                    >
-                      {formatTime(selectedGroupWorkSec)}
-                    </span>
-                    <span className="text-xs text-gray-400 font-medium flex-1">그룹 타이머</span>
-
-                    {!selectedGroup.timerStarted && (
-                      <button
-                        onClick={() => handleGroupTimerAction("start", selectedGroup.itemId)}
-                        className="px-3 py-1.5 rounded-lg text-[10px] font-bold text-white active:scale-95 transition-all"
-                        style={{ background: "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)" }}
-                      >
-                        시작
-                      </button>
-                    )}
-                    {selectedGroup.timerStarted && !selectedGroup.timerCompleted && !selectedGroup.timerPaused && (
-                      <>
-                        <button
-                          onClick={() => handleGroupTimerAction("pause", selectedGroup.itemId)}
-                          className="px-3 py-1.5 rounded-lg text-[10px] font-bold text-white active:scale-95 transition-all"
-                          style={{ background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)" }}
-                        >
-                          일시정지
-                        </button>
-                        <button
-                          onClick={() => handleGroupTimerAction("complete", selectedGroup.itemId)}
-                          className="px-3 py-1.5 rounded-lg text-[10px] font-bold text-white active:scale-95 transition-all"
-                          style={{ background: "linear-gradient(135deg, #10b981 0%, #059669 100%)" }}
-                        >
-                          완료
-                        </button>
-                      </>
-                    )}
-                    {selectedGroup.timerPaused && !selectedGroup.timerCompleted && (
-                      <>
-                        <button
-                          onClick={() => handleGroupTimerAction("resume", selectedGroup.itemId)}
-                          className="px-3 py-1.5 rounded-lg text-[10px] font-bold text-white active:scale-95 transition-all"
-                          style={{ background: "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)" }}
-                        >
-                          재개
-                        </button>
-                        <button
-                          onClick={() => handleGroupTimerAction("complete", selectedGroup.itemId)}
-                          className="px-3 py-1.5 rounded-lg text-[10px] font-bold text-white active:scale-95 transition-all"
-                          style={{ background: "linear-gradient(135deg, #10b981 0%, #059669 100%)" }}
-                        >
-                          완료
-                        </button>
-                      </>
-                    )}
-                    {selectedGroup.timerCompleted && (
-                      <span className="text-[10px] font-bold text-green-600 px-3 py-1.5 rounded-lg bg-green-50 border border-green-200">완료</span>
-                    )}
-                  </div>
-                )}
+                {/* 그룹 타이머는 상단 통합 타이머로 이동 */}
 
                 {/* Mobile group navigation (sidebar not visible) */}
                 <div className="md:hidden flex overflow-x-auto gap-1.5 mb-4 pb-1">
@@ -1308,6 +1324,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                       item={item}
                       disabled={isCompleted || false}
                       onSave={handleChecklistSave}
+                      showPhoto={peSettings.groupPhotoEnabled}
                     />
                   ))}
                   {currentItems.length === 0 && (
@@ -1317,6 +1334,11 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
               </div>
             )}
 
+            {/* ====== Material Input Content (설정) ====== */}
+            {activeSection === "material" && peSettings.materialInput && (
+              <MaterialInputSection processId={processId} />
+            )}
+
             {/* ====== Result Content ====== */}
             {activeSection === "result" && !isConfirmed && (
               <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
@@ -1342,6 +1364,14 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                     </span>
                   </button>
 
+                  {/* Good Qty (자동 계산) */}
+                  <div className="flex items-center justify-between p-3.5 rounded-xl border-2 border-green-200 bg-green-50">
+                    <span className="text-sm text-green-600 font-medium">양품</span>
+                    <span className="text-xl font-bold text-green-700" style={{ fontVariantNumeric: "tabular-nums" }}>
+                      {goodQtyThisBatch > 0 ? `${goodQtyThisBatch.toLocaleString()} EA` : "0 EA"}
+                    </span>
+                  </div>
+
                   {/* Defect */}
                   <button
                     onClick={() => setDefectModal(true)}
@@ -1362,7 +1392,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                       {defectEntries.map((de) => (
                         <span
                           key={de.defect_code}
-                          className="text-[10px] px-2 py-1 rounded-full bg-red-50 text-red-600 border border-red-200 font-medium"
+                          className="text-xs px-2 py-1 rounded-full bg-red-50 text-red-600 border border-red-200 font-medium"
                         >
                           {de.defect_name}: {de.qty}개 ({de.disposition === "scrap" ? "폐기" : de.disposition === "rework" ? "재작업" : "특채"})
                         </span>
@@ -1370,16 +1400,10 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                     </div>
                   )}
 
-                  {/* Good qty preview */}
-                  {productionQty > 0 && (
-                    <div
-                      className={`text-center text-sm font-semibold px-3 py-2 rounded-lg ${
-                        goodQtyThisBatch < 0
-                          ? "bg-red-50 text-red-600 border border-red-200"
-                          : "bg-green-50 text-green-700 border border-green-200"
-                      }`}
-                    >
-                      이번 차수 양품: {goodQtyThisBatch.toLocaleString()} EA
+                  {/* 누적 현황 */}
+                  {totalProduced > 0 && (
+                    <div className="text-xs text-gray-400 text-center">
+                      누적: {totalProduced}/{inputQty} ({Math.round((totalProduced/inputQty)*100)}%)
                     </div>
                   )}
 
@@ -1393,6 +1417,33 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                   />
                 </div>
 
+                {/* 사진 첨부 (설정으로 제어) */}
+                {peSettings.photoUpload && <div className="mt-3">
+                  <label className="flex items-center gap-2 px-4 py-3 rounded-xl bg-gray-50 border-2 border-dashed border-gray-200 text-gray-500 text-sm font-medium cursor-pointer hover:bg-gray-100 active:scale-[0.98] transition-all">
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z" />
+                    </svg>
+                    📷 사진 첨부 (선택)
+                    <input type="file" accept="image/*" capture="environment" className="hidden" onChange={async (e) => {
+                      const file = e.target.files?.[0]; if (!file) return;
+                      const formData = new FormData();
+                      formData.append("file", file);
+                      formData.append("targetTable", "work_order_process");
+                      formData.append("targetObjid", processId);
+                      try {
+                        const res = await fetch("/api/files", {
+                          method: "POST",
+                          headers: { Authorization: `Bearer ${localStorage.getItem("accessToken") || localStorage.getItem("token") || ""}` },
+                          body: formData,
+                        });
+                        alert(res.ok ? "사진 첨부 완료" : "첨부 실패");
+                      } catch { alert("첨부 오류"); }
+                      e.target.value = "";
+                    }} />
+                  </label>
+                </div>}
+
                 {/* Save + Confirm buttons */}
                 <div className="flex flex-col gap-3 mt-4">
                   <button
@@ -1406,7 +1457,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                           : "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)",
                     }}
                   >
-                    {saving ? "저장중..." : "실적 저장"}
+                    {saving ? "저장중..." : (totalProduced + productionQty >= inputQty && inputQty > 0) ? "작업 완료" : "분할 완료"}
                   </button>
 
                   {totalProduced > 0 && (
@@ -1445,7 +1496,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                           {[...history].reverse().map((h, i) => (
                             <tr key={h.seq} className="border-t border-gray-100">
                               <td className="px-2 py-2">
-                                <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded ${i === 0 ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-600"}`}>
+                                <span className={`text-xs font-bold px-1.5 py-0.5 rounded ${i === 0 ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-600"}`}>
                                   #{h.seq}
                                 </span>
                               </td>
@@ -1574,6 +1625,47 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
                         </div>
                       )}
 
+                      {/* 포장 단위 (선택) */}
+                      <div>
+                        <label className="text-xs font-semibold text-gray-500 mb-1.5 block">포장 단위 (선택)</label>
+                        <div className="grid grid-cols-3 gap-2">
+                          {["낱개", "박스", "파렛트"].map((pkg) => (
+                            <button
+                              key={pkg}
+                              onClick={() => setPackageUnit((prev: string) => prev === pkg ? "" : pkg)}
+                              className={`p-2.5 rounded-xl text-sm font-medium border-2 active:scale-95 transition-all ${
+                                packageUnit === pkg
+                                  ? "border-blue-400 bg-blue-50 text-blue-700"
+                                  : "border-gray-200 bg-white text-gray-600"
+                              }`}
+                            >
+                              {pkg}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+
+                      {/* 사진 첨부 (선택) */}
+                      <label className="flex items-center gap-2 px-4 py-3 rounded-xl bg-gray-50 border-2 border-dashed border-gray-200 text-gray-500 text-sm font-medium cursor-pointer hover:bg-gray-100">
+                        📷 입고 사진 첨부 (선택)
+                        <input type="file" accept="image/*" capture="environment" className="hidden" onChange={async (e) => {
+                          const file = e.target.files?.[0]; if (!file) return;
+                          const formData = new FormData();
+                          formData.append("file", file);
+                          formData.append("targetTable", "work_order_process");
+                          formData.append("targetObjid", processId);
+                          try {
+                            const res = await fetch("/api/files", {
+                              method: "POST",
+                              headers: { Authorization: `Bearer ${localStorage.getItem("accessToken") || localStorage.getItem("token") || ""}` },
+                              body: formData,
+                            });
+                            alert(res.ok ? "사진 첨부 완료" : "첨부 실패");
+                          } catch { alert("첨부 오류"); }
+                          e.target.value = "";
+                        }} />
+                      </label>
+
                       {/* Inbound button */}
                       <button
                         onClick={handleInbound}
@@ -1610,6 +1702,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
               </div>
             )}
           </div>
+          </div>{/* end Right Column */}
         </div>
       )}
 
@@ -1679,6 +1772,7 @@ export function ProcessWork({ processId }: ProcessWorkProps) {
         defectTypes={defectTypes}
         maxQty={productionQty > 0 ? productionQty : 99999}
         initialEntries={defectEntries}
+        processList={processList}
       />
     </div>
   );
@@ -1692,10 +1786,12 @@ function ChecklistRow({
   item,
   disabled,
   onSave,
+  showPhoto = true,
 }: {
   item: ChecklistItem;
   disabled: boolean;
   onSave: (id: string, value: string, isPassed: string | null) => void;
+  showPhoto?: boolean;
 }) {
   const [localValue, setLocalValue] = useState(item.result_value || "");
   const isRecorded = item.status === "recorded" || item.status === "completed";
@@ -1703,8 +1799,23 @@ function ChecklistRow({
 
   // Inspection type: check limits
   const detailType = item.detail_type || "";
-  const isInspection = detailType === "inspection" || detailType === "number" || detailType.startsWith("inspect");
-  const isCheckbox = detailType === "checkbox" || detailType === "check";
+  // 판단기준(judgment_criteria) 우선 → 폴백으로 detail_type 매핑
+  const jc = (item as ChecklistItem & { judgment_criteria?: string }).judgment_criteria || "";
+  const isInspection =
+    jc === "CAT_JC_01" ||
+    detailType === "inspection" ||
+    detailType === "number" ||
+    detailType === "equip_condition" ||
+    detailType === "production_result" ||
+    detailType.startsWith("inspect");
+  const isCheckbox =
+    jc === "CAT_JC_03" ||
+    detailType === "checkbox" ||
+    detailType === "check" ||
+    detailType === "checklist" ||
+    detailType === "procedure" ||
+    detailType === "equip_inspection";
+  const isPlc = item.input_type === "plc" || detailType === "plc_data";
   const hasLimits = !!(item.lower_limit || item.upper_limit);
 
   const handleSave = () => {
@@ -1716,6 +1827,11 @@ function ChecklistRow({
       const lower = item.lower_limit ? parseFloat(item.lower_limit) : -Infinity;
       const upper = item.upper_limit ? parseFloat(item.upper_limit) : Infinity;
       isPassed = !isNaN(numVal) && numVal >= lower && numVal <= upper ? "Y" : "N";
+
+      if (isPassed === "N") {
+        const rangeStr = `${item.lower_limit || ""}~${item.upper_limit || ""}`;
+        alert(`⚠️ 기준 초과!\n\n입력값: ${localValue}\n허용 범위: ${rangeStr}\n\n불합격으로 기록됩니다.`);
+      }
     }
 
     onSave(item.id, localValue, isPassed);
@@ -1726,53 +1842,72 @@ function ChecklistRow({
 
   return (
     <div
-      className={`p-3 rounded-xl border transition-all ${
+      className={`p-4 rounded-xl border-2 transition-all ${
         isRecorded
           ? "border-green-200 bg-green-50/50"
           : isRequired
-          ? "border-amber-200 bg-amber-50/30"
+          ? "border-amber-300 bg-amber-50/30"
           : "border-gray-200 bg-gray-50/50"
       }`}
     >
       <div className="flex items-center justify-between mb-2">
-        <div className="flex items-center gap-2 min-w-0 flex-1">
-          {isRequired && (
-            <span className="text-[10px] font-bold text-red-500 shrink-0">필수</span>
+        <span className="text-base font-semibold text-gray-900 truncate flex-1">
+          {item.detail_label || item.detail_content || item.item_title}
+        </span>
+        <div className="flex items-center gap-2 shrink-0 ml-2">
+          {isRequired && !isRecorded && (
+            <span className="text-xs font-bold text-red-500 px-2 py-0.5 bg-red-50 rounded-full">필수</span>
+          )}
+          {isRecorded && (
+            <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+            </svg>
           )}
-          <span className="text-sm font-semibold text-gray-900 truncate">
-            {item.detail_label || item.detail_content || item.item_title}
-          </span>
         </div>
-        {isRecorded && (
-          <svg className="w-4 h-4 text-green-500 shrink-0" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-          </svg>
-        )}
       </div>
 
       {/* Range/spec info */}
       {rangeText && (
-        <div className="flex items-center gap-2 mb-2 text-[10px] text-gray-400">
-          {rangeText}
+        <div className="flex items-center gap-2 mb-2 text-sm text-gray-400">
+          📏 {rangeText}
         </div>
       )}
 
       {/* Input area */}
       {!disabled && !isRecorded && (
         <div className="flex items-center gap-2">
-          {isCheckbox ? (
-            <div className="flex gap-2">
+          {isPlc ? (
+            <div className="w-full p-3 rounded-xl bg-blue-50 border border-blue-200">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-blue-600 font-medium">📡 PLC 자동 연동</span>
+                <span className="text-xs text-blue-400">설정 필요</span>
+              </div>
+              <p className="text-xs text-blue-400 mt-1">POP 관리 설정에서 PLC 매핑을 설정하면 자동으로 값이 표시됩니다</p>
+              <input
+                type="number"
+                value={localValue}
+                onChange={(e) => setLocalValue(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleSave()}
+                placeholder="수동 입력"
+                className="mt-2 w-full px-3 py-2 rounded-lg border border-blue-200 text-sm"
+              />
+              {localValue && (
+                <button onClick={handleSave} className="mt-2 w-full py-2 rounded-lg text-sm font-bold text-white bg-blue-500">저장</button>
+              )}
+            </div>
+          ) : isCheckbox ? (
+            <div className="flex gap-3 w-full">
               <button
                 onClick={() => onSave(item.id, "Y", "Y")}
-                className="px-4 py-2 rounded-lg text-sm font-semibold bg-green-100 text-green-700 border border-green-200 hover:bg-green-200 active:scale-95 transition-all"
+                className="flex-1 py-3 rounded-xl text-base font-bold bg-green-100 text-green-700 border-2 border-green-300 hover:bg-green-200 active:scale-95 transition-all"
               >
-                합격
+                ✓ 합격
               </button>
               <button
                 onClick={() => onSave(item.id, "N", "N")}
-                className="px-4 py-2 rounded-lg text-sm font-semibold bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 active:scale-95 transition-all"
+                className="flex-1 py-3 rounded-xl text-base font-bold bg-red-100 text-red-700 border-2 border-red-300 hover:bg-red-200 active:scale-95 transition-all"
               >
-                불합격
+                ✗ 불합격
               </button>
             </div>
           ) : (
@@ -1783,13 +1918,13 @@ function ChecklistRow({
                 onChange={(e) => setLocalValue(e.target.value)}
                 onKeyDown={(e) => e.key === "Enter" && handleSave()}
                 placeholder={isInspection ? "측정값 입력" : "값 입력"}
-                className="flex-1 px-3 py-2 rounded-lg border border-gray-200 text-sm focus:outline-none focus:border-blue-300"
-                style={{ minHeight: DESIGN.button.touchMin }}
+                className="flex-1 px-4 py-3 rounded-xl border-2 border-gray-200 text-base font-medium focus:outline-none focus:border-blue-400"
+                style={{ minHeight: 48 }}
               />
               <button
                 onClick={handleSave}
                 disabled={!localValue.trim()}
-                className="px-4 py-2 rounded-lg text-sm font-semibold text-white active:scale-95 transition-all disabled:opacity-40"
+                className="px-5 py-3 rounded-xl text-base font-bold text-white active:scale-95 transition-all disabled:opacity-40"
                 style={{
                   minHeight: DESIGN.button.touchMin,
                   background: !localValue.trim()
@@ -1806,23 +1941,65 @@ function ChecklistRow({
 
       {/* Recorded value display */}
       {isRecorded && item.result_value && (
-        <div className="flex items-center gap-2 text-xs">
+        <div className="flex items-center gap-2 text-sm mt-1">
           <span className="text-gray-500">결과:</span>
           <span
-            className={`font-semibold ${
+            className={`font-bold ${
               item.is_passed === "Y" ? "text-green-600" : item.is_passed === "N" ? "text-red-600" : "text-gray-700"
             }`}
           >
             {item.result_value === "Y" ? "합격" : item.result_value === "N" ? "불합격" : item.result_value}
           </span>
           {item.is_passed === "Y" && (
-            <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-green-100 text-green-700">PASS</span>
+            <span className="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700 font-bold">PASS</span>
           )}
           {item.is_passed === "N" && (
-            <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-red-100 text-red-700">FAIL</span>
+            <span className="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700 font-bold">FAIL</span>
           )}
         </div>
       )}
+
+      {/* 사진 업로드 (설정으로 제어) */}
+      {!disabled && showPhoto && (
+        <div className="mt-2 flex items-center gap-2">
+          <label className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-100 text-gray-600 text-sm font-medium cursor-pointer hover:bg-gray-200 active:scale-95 transition-all">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" />
+              <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z" />
+            </svg>
+            사진
+            <input
+              type="file"
+              accept="image/*"
+              capture="environment"
+              className="hidden"
+              onChange={async (e) => {
+                const file = e.target.files?.[0];
+                if (!file) return;
+                const formData = new FormData();
+                formData.append("file", file);
+                formData.append("targetTable", "process_work_result");
+                formData.append("targetObjid", item.id);
+                try {
+                  const res = await fetch("/api/files", {
+                    method: "POST",
+                    headers: { Authorization: `Bearer ${localStorage.getItem("accessToken") || localStorage.getItem("token") || ""}` },
+                    body: formData,
+                  });
+                  if (res.ok) {
+                    alert("사진 업로드 완료");
+                  } else {
+                    alert("업로드 실패");
+                  }
+                } catch {
+                  alert("업로드 중 오류");
+                }
+                e.target.value = "";
+              }}
+            />
+          </label>
+        </div>
+      )}
     </div>
   );
 }
@@ -1853,3 +2030,259 @@ function buildRangeText(item: ChecklistItem): string {
 
   return parts.join(" | ");
 }
+
+/* ================================================================== */
+/* Material Quantity Keypad (소수점 지원, 자재 투입용)                  */
+/* ================================================================== */
+
+function MaterialQtyKeypad({
+  open,
+  onClose,
+  onConfirm,
+  initialValue,
+  unit,
+  requiredQty,
+  itemName,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: (val: string) => void;
+  initialValue: string;
+  unit: string;
+  requiredQty: number;
+  itemName: string;
+}) {
+  const [val, setVal] = useState(initialValue || "0");
+
+  React.useEffect(() => {
+    if (open) setVal(initialValue || "0");
+  }, [open, initialValue]);
+
+  const press = (k: string) => {
+    setVal((prev) => {
+      if (k === "backspace") return prev.length <= 1 ? "0" : prev.slice(0, -1);
+      if (k === "clear") return "0";
+      if (k === "dot") return prev.includes(".") ? prev : prev + ".";
+      if (k === "ref") return String(requiredQty);
+      if (prev === "0" && k !== ".") return k;
+      return prev + k;
+    });
+  };
+
+  if (!open) return null;
+  const numVal = parseFloat(val);
+  const lower = requiredQty * 0.8;
+  const upper = requiredQty * 1.2;
+  const outOfRange = !isNaN(numVal) && (numVal < lower || numVal > upper);
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+      <div className="relative bg-white rounded-2xl shadow-2xl p-4 w-[320px] z-10">
+        <div className="text-center mb-3">
+          <p className="text-sm text-gray-500 truncate">{itemName}</p>
+          <p className="text-xs text-blue-500 mt-0.5">기준 {requiredQty} {unit} (±20%)</p>
+          <p
+            className={`text-3xl font-bold mt-2 ${outOfRange ? "text-amber-600" : "text-gray-900"}`}
+            style={{ fontVariantNumeric: "tabular-nums" }}
+          >
+            {val} <span className="text-base text-gray-400">{unit}</span>
+          </p>
+        </div>
+        <div className="grid grid-cols-3 gap-2 mb-3">
+          {["1","2","3","4","5","6","7","8","9"].map((k) => (
+            <button key={k} onClick={() => press(k)} className="h-14 rounded-xl bg-gray-100 text-xl font-bold text-gray-800 active:scale-95 active:bg-gray-200 transition-all">{k}</button>
+          ))}
+          <button onClick={() => press("dot")} className="h-14 rounded-xl bg-gray-100 text-xl font-bold text-gray-800 active:scale-95 transition-all">.</button>
+          <button onClick={() => press("0")} className="h-14 rounded-xl bg-gray-100 text-xl font-bold text-gray-800 active:scale-95 transition-all">0</button>
+          <button onClick={() => press("backspace")} className="h-14 rounded-xl bg-gray-200 text-base font-bold text-gray-600 active:scale-95 transition-all">←</button>
+        </div>
+        <div className="flex gap-2 mb-2">
+          <button onClick={() => press("clear")} className="flex-1 h-10 rounded-xl bg-gray-100 text-gray-600 text-sm font-bold active:scale-95">초기화</button>
+          <button onClick={() => press("ref")} className="flex-1 h-10 rounded-xl bg-blue-50 text-blue-600 text-sm font-bold active:scale-95">기준값 ({requiredQty})</button>
+        </div>
+        <div className="flex gap-2">
+          <button onClick={onClose} className="flex-1 h-12 rounded-xl bg-gray-100 text-gray-700 font-semibold active:scale-95">취소</button>
+          <button onClick={() => { onConfirm(val); onClose(); }} className="flex-1 h-12 rounded-xl text-white font-bold active:scale-95" style={{ background: outOfRange ? "linear-gradient(135deg, #f59e0b, #d97706)" : "linear-gradient(135deg, #3b82f6, #1d4ed8)" }}>
+            {outOfRange ? "확인 (범위 외)" : "확인"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ================================================================== */
+/* Material Qty Input Row (키패드 트리거 버튼)                          */
+/* ================================================================== */
+
+function MaterialQtyInputRow({
+  material,
+  value,
+  onChange,
+}: {
+  material: { id: string; child_item_name: string; required_qty: number; unit: string };
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="flex items-center gap-2">
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="flex-1 px-4 py-3 rounded-xl border-2 border-gray-200 text-base font-bold text-left text-gray-900 hover:border-blue-400 active:scale-[0.98] transition-all bg-white"
+        style={{ minHeight: 56 }}
+      >
+        {value || <span className="text-gray-300 font-normal">투입 수량 입력</span>}
+      </button>
+      <span className="text-sm text-gray-500 shrink-0">{material.unit}</span>
+      <MaterialQtyKeypad
+        open={open}
+        onClose={() => setOpen(false)}
+        onConfirm={onChange}
+        initialValue={value}
+        unit={material.unit}
+        requiredQty={material.required_qty}
+        itemName={material.child_item_name}
+      />
+    </div>
+  );
+}
+
+/* ================================================================== */
+/* Material Input Section                                              */
+/* ================================================================== */
+
+function MaterialInputSection({ processId }: { processId: string }) {
+  const [bomMaterials, setBomMaterials] = React.useState<Array<{
+    id: string; child_item_id: string; child_item_code: string; child_item_name: string;
+    bom_qty: number; unit: string; required_qty: number; input_qty: number;
+  }>>([]);
+  const [inputValues, setInputValues] = React.useState<Record<string, string>>({});
+  const [inputted, setInputted] = React.useState<Array<{
+    id: string; item_code: string; item_name: string; input_qty: string; unit: string; recorded_at: string;
+  }>>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [saving, setSaving] = React.useState(false);
+
+  React.useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      try {
+        const [bomRes, inputRes] = await Promise.all([
+          apiClient.get(`/pop/production/bom-materials/${processId}`),
+          apiClient.get(`/pop/production/material-inputs/${processId}`),
+        ]);
+        setBomMaterials(bomRes.data?.data?.materials || []);
+        setInputted(inputRes.data?.data || []);
+      } catch { /* non-critical */ }
+      setLoading(false);
+    };
+    fetchData();
+  }, [processId]);
+
+  const handleSave = async () => {
+    const inputs = bomMaterials
+      .filter((m) => {
+        const val = parseFloat(inputValues[m.id] || "0");
+        return val > 0;
+      })
+      .map((m) => ({
+        child_item_id: m.child_item_id,
+        child_item_code: m.child_item_code,
+        child_item_name: m.child_item_name,
+        input_qty: parseFloat(inputValues[m.id] || "0"),
+        unit: m.unit,
+        bom_detail_id: m.id,
+        required_qty: m.required_qty,
+      }));
+
+    if (inputs.length === 0) {
+      alert("투입 수량을 입력해주세요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const res = await apiClient.post("/pop/production/material-input", {
+        work_order_process_id: processId,
+        inputs,
+      });
+      if (res.data?.success) {
+        alert(res.data.message || "투입 완료");
+        setInputValues({});
+        // 재조회
+        const inputRes = await apiClient.get(`/pop/production/material-inputs/${processId}`);
+        setInputted(inputRes.data?.data || []);
+      } else {
+        alert(res.data?.message || "투입 실패");
+      }
+    } catch {
+      alert("투입 중 오류");
+    }
+    setSaving(false);
+  };
+
+  if (loading) {
+    return <div className="text-center py-8 text-gray-400">자재 정보 조회중...</div>;
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* BOM 기준 자재 목록 */}
+      <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4">
+        <h3 className="text-base font-bold text-gray-900 mb-3">BOM 자재 목록</h3>
+        {bomMaterials.length === 0 ? (
+          <p className="text-sm text-gray-400 py-4 text-center">BOM 자재 정보가 없습니다</p>
+        ) : (
+          <div className="space-y-3">
+            {bomMaterials.map((m) => (
+              <div key={m.id} className="p-3 rounded-xl border border-gray-200 bg-gray-50">
+                <div className="flex items-center justify-between mb-2">
+                  <div>
+                    <p className="text-base font-semibold text-gray-900">{m.child_item_name}</p>
+                    <p className="text-sm text-gray-400">{m.child_item_code}</p>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-sm text-gray-500">소요량</p>
+                    <p className="text-lg font-bold text-blue-600">{m.required_qty} {m.unit}</p>
+                  </div>
+                </div>
+                <MaterialQtyInputRow
+                  material={m}
+                  value={inputValues[m.id] || ""}
+                  onChange={(v) => setInputValues((prev) => ({ ...prev, [m.id]: v }))}
+                />
+              </div>
+            ))}
+            <button
+              onClick={handleSave}
+              disabled={saving}
+              className="w-full py-4 rounded-xl text-base font-bold text-white active:scale-[0.98] transition-all disabled:opacity-40"
+              style={{ background: "linear-gradient(135deg, #3b82f6, #1d4ed8)" }}
+            >
+              {saving ? "저장중..." : "자재 투입 확정"}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* 투입 이력 */}
+      {inputted.length > 0 && (
+        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4">
+          <h3 className="text-base font-bold text-gray-900 mb-3">투입 이력</h3>
+          {inputted.map((item) => (
+            <div key={item.id} className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
+              <div>
+                <p className="text-sm font-semibold text-gray-900">{item.item_name}</p>
+                <p className="text-xs text-gray-400">{item.item_code}</p>
+              </div>
+              <p className="text-base font-bold text-green-600">{item.input_qty} {item.unit}</p>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/components/pop/hardcoded/production/WorkOrderList.tsx b/frontend/components/pop/hardcoded/production/WorkOrderList.tsx
index 3f68f8ef..97d7dc27 100644
--- a/frontend/components/pop/hardcoded/production/WorkOrderList.tsx
+++ b/frontend/components/pop/hardcoded/production/WorkOrderList.tsx
@@ -2,10 +2,12 @@
 
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { useRouter } from "next/navigation";
+import { useAuth } from "@/hooks/useAuth";
 import { apiClient } from "@/lib/api/client";
 import { dataApi } from "@/lib/api/data";
 import { AcceptProcessModal } from "./AcceptProcessModal";
 import { ProcessDetailModal, ProcessStep } from "./ProcessDetailModal";
+import { ProcessWork } from "./ProcessWork";
 
 /* ------------------------------------------------------------------ */
 /* Types                                                               */
@@ -17,6 +19,7 @@ interface WorkInstruction {
   item_id: string;
   item_name: string;
   item_code: string;
+  item_number: string;
   qty: number;
   completed_qty: number;
   status: string;
@@ -44,9 +47,13 @@ interface WorkOrderProcess {
   total_production_qty: string;
   parent_process_id: string | null;
   is_rework: string;
+  rework_source_id: string | null;
   result_status: string;
   started_at: string | null;
   completed_at: string | null;
+  accepted_by?: string;
+  accepted_at?: string | null;
+  created_date?: string;
 }
 
 interface ProcessMng {
@@ -71,7 +78,6 @@ const CARD_COLS_KEY = "workorder-card-cols";
 const DEFAULT_COLS = 1;
 
 const TABS: { key: TabFilter; label: string; color: string; bgActive: string }[] = [
-  { key: "all", label: "전체", color: "text-gray-700", bgActive: "bg-white" },
   { key: "acceptable", label: "접수가능", color: "text-amber-700", bgActive: "bg-amber-50" },
   { key: "in_progress", label: "진행중", color: "text-blue-700", bgActive: "bg-blue-50" },
   { key: "waiting", label: "대기", color: "text-gray-500", bgActive: "bg-gray-50" },
@@ -99,6 +105,113 @@ const COLS_GRID_CLASS: Record<number, string> = {
   3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
 };
 
+/* ------------------------------------------------------------------ */
+/* Fullscreen Work Modal with My-Work Drawer                           */
+/* ------------------------------------------------------------------ */
+
+function FullscreenWorkModal({
+  processId,
+  myProcesses,
+  instructionMap,
+  onSwitch,
+  onClose,
+}: {
+  processId: string;
+  myProcesses: WorkOrderProcess[];
+  instructionMap: Record<string, WorkInstruction>;
+  onSwitch: (id: string) => void;
+  onClose: () => void;
+}) {
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+
+  return (
+    <div className="fixed inset-0 z-[100] bg-white flex">
+      {/* Drawer tab handle (left edge, middle) */}
+      <button
+        onClick={() => setDrawerOpen((v) => !v)}
+        className={`absolute left-0 top-1/2 -translate-y-1/2 z-[115] h-20 w-5 flex items-center justify-center transition-all ${
+          drawerOpen ? "left-[280px]" : "left-0"
+        }`}
+        style={{
+          background: "#6d28d9",
+          borderRadius: "0 8px 8px 0",
+          boxShadow: "2px 0 8px rgba(0,0,0,0.15)",
+        }}
+      >
+        <svg className={`w-3 h-3 text-white transition-transform ${drawerOpen ? "rotate-180" : ""}`} fill="none" stroke="currentColor" strokeWidth={3} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+        </svg>
+      </button>
+
+      {/* Drawer overlay */}
+      {drawerOpen && (
+        <div className="absolute inset-0 bg-black/20 z-[111]" onClick={() => setDrawerOpen(false)} />
+      )}
+
+      {/* Drawer panel */}
+      <div
+        className={`absolute left-0 top-0 bottom-0 z-[112] bg-white border-r border-gray-200 shadow-xl transition-transform duration-300 flex flex-col ${
+          drawerOpen ? "translate-x-0" : "-translate-x-full"
+        }`}
+        style={{ width: 280 }}
+      >
+        <div className="p-4 border-b border-gray-100">
+          <h3 className="text-base font-bold text-gray-900">내 접수 목록</h3>
+          <p className="text-xs text-gray-400 mt-1">{myProcesses.length}건</p>
+        </div>
+        <div className="flex-1 overflow-y-auto p-2">
+          {myProcesses.map((proc) => {
+            const wi = instructionMap[proc.wo_id];
+            const isActive = proc.id === processId;
+            return (
+              <button
+                key={proc.id}
+                onClick={() => { onSwitch(proc.id); setDrawerOpen(false); }}
+                className={`w-full text-left p-3.5 rounded-xl mb-2 transition-all active:scale-[0.98] ${
+                  isActive
+                    ? "bg-blue-50 border-2 border-blue-400"
+                    : "bg-gray-50 border border-gray-200 hover:bg-gray-100"
+                }`}
+              >
+                <div className="text-base font-bold text-gray-900 mb-1">
+                  {wi?.work_instruction_no || "작업지시"}
+                </div>
+                <div className="text-sm text-gray-500 mb-0.5 truncate">
+                  {wi?.item_name || ""}{(wi?.item_code || wi?.item_number) ? `(${wi?.item_code || wi?.item_number})` : ""}
+                </div>
+                <div className="text-sm text-gray-600 mb-0.5">
+                  {proc.process_name} · {proc.equipment_code || "미배정"}
+                </div>
+                <div className="text-sm font-semibold text-blue-600">
+                  접수 {proc.input_qty || 0}EA
+                </div>
+              </button>
+            );
+          })}
+          {myProcesses.length === 0 && (
+            <p className="text-sm text-gray-400 text-center py-8">접수한 작업이 없습니다</p>
+          )}
+        </div>
+      </div>
+
+      {/* Close button */}
+      <button
+        onClick={onClose}
+        className="absolute top-4 right-4 z-[110] w-12 h-12 rounded-full bg-black/10 hover:bg-black/20 flex items-center justify-center active:scale-95 transition-all"
+      >
+        <svg className="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+
+      {/* ProcessWork content */}
+      <div className="flex-1 overflow-auto">
+        <ProcessWork key={processId} processId={processId} />
+      </div>
+    </div>
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /* Filter Selector Modal                                               */
 /* ------------------------------------------------------------------ */
@@ -179,11 +292,15 @@ function CompressedProcessSteps({
   currentSeqNo,
   status,
   onClick,
+  batchId,
+  allProcesses,
 }: {
   processes: WorkOrderProcess[];
   currentSeqNo: string;
   status: string;
   onClick?: () => void;
+  batchId?: string;
+  allProcesses?: WorkOrderProcess[];
 }) {
   const sorted = [...processes]
     .filter((p) => !p.parent_process_id)
@@ -194,25 +311,51 @@ function CompressedProcessSteps({
   const currentIdx = sorted.findIndex((p) => p.seq_no === currentSeqNo);
   if (currentIdx < 0) return null;
 
-  // For completed status: show all as checkmarks
+  // For completed status: batch_id 기반 진행률 표시
   if (status === "completed") {
+    // 같은 batch_id를 가진 SPLIT들이 어느 seq까지 완료했는지 추적
+    let maxCompletedSeq = parseInt(currentSeqNo, 10); // 최소한 현재 seq까지는 완료
+
+    if (batchId && allProcesses) {
+      const batchSplits = allProcesses.filter(
+        (p) => (p as Record<string, unknown>).batch_id === batchId && p.parent_process_id && p.status === "completed"
+      );
+      for (const s of batchSplits) {
+        const sSeq = parseInt(s.seq_no, 10);
+        if (sSeq > maxCompletedSeq) maxCompletedSeq = sSeq;
+      }
+    }
+
+    const completedCount = sorted.filter((p) => parseInt(p.seq_no, 10) <= maxCompletedSeq).length;
+    const allDone = completedCount === sorted.length;
+
     return (
       <div
         className="flex items-center justify-center gap-0.5 mb-3 py-2 px-3 bg-green-50 rounded-xl cursor-pointer hover:bg-green-100 transition"
         onClick={onClick}
       >
-        {sorted.map((proc, idx) => (
-          <React.Fragment key={proc.id}>
-            {idx > 0 && <span className="w-3 h-0.5 bg-green-400 shrink-0" />}
-            <span
-              className="rounded-full bg-green-500 text-white flex items-center justify-center shrink-0 text-[9px] font-bold"
-              style={{ width: idx === currentIdx ? 28 : 24, height: idx === currentIdx ? 28 : 24, fontSize: idx === currentIdx ? 10 : 9 }}
-            >
-              &#10003;
-            </span>
-          </React.Fragment>
-        ))}
-        <span className="text-[10px] text-green-600 font-bold ml-2">전체 완료</span>
+        {sorted.map((proc, idx) => {
+          const seqNum = parseInt(proc.seq_no, 10);
+          const isDone = seqNum <= maxCompletedSeq;
+          return (
+            <React.Fragment key={proc.id}>
+              {idx > 0 && <span className={`w-3 h-0.5 ${isDone ? "bg-green-400" : "bg-gray-300"} shrink-0`} />}
+              <span
+                className={`rounded-full flex items-center justify-center shrink-0 text-[9px] font-bold ${
+                  isDone
+                    ? "bg-green-500 text-white"
+                    : "bg-gray-200 text-gray-400"
+                }`}
+                style={{ width: idx === currentIdx ? 28 : 24, height: idx === currentIdx ? 28 : 24, fontSize: idx === currentIdx ? 10 : 9 }}
+              >
+                {isDone ? "\u2713" : idx + 1}
+              </span>
+            </React.Fragment>
+          );
+        })}
+        <span className="text-[10px] text-green-600 font-bold ml-2">
+          {allDone ? "전체 완료" : `${completedCount}/${sorted.length} 완료`}
+        </span>
       </div>
     );
   }
@@ -223,21 +366,26 @@ function CompressedProcessSteps({
   const beforeCollapsed = prevIdx > 0 ? prevIdx : 0;
   const afterCollapsed = sorted.length - 1 - (nextIdx < sorted.length ? nextIdx : currentIdx);
 
-  const stepDot = (proc: WorkOrderProcess, isCurrent: boolean) => {
+  // 공정명 축약 (4글자 초과 시 잘라내기)
+  const shortName = (name: string) => {
+    if (!name) return "?";
+    const clean = name.replace(/^제조반_/, "");
+    return clean.length > 4 ? clean.slice(0, 4) : clean;
+  };
+
+  const stepLabel = (proc: WorkOrderProcess, isCurrent: boolean) => {
     const isCompleted = proc.status === "completed";
     const isInProgress = proc.status === "in_progress" || proc.status === "acceptable";
-    const size = isCurrent ? 32 : 26;
-    const fontSize = isCurrent ? 11 : 9;
 
     if (isCurrent) {
       const bgColor = isInProgress ? "bg-blue-500" : isCompleted ? "bg-green-500" : "bg-amber-400";
       const ringColor = isInProgress ? "ring-blue-200" : isCompleted ? "ring-green-200" : "ring-amber-200";
       return (
         <span
-          className={`rounded-full ${bgColor} text-white ring-2 ${ringColor} flex items-center justify-center shrink-0 font-bold ${isInProgress ? "animate-pulse" : ""}`}
-          style={{ width: size, height: size, fontSize }}
+          className={`rounded-lg ${bgColor} text-white ring-2 ${ringColor} flex items-center justify-center shrink-0 font-bold px-3 ${isInProgress ? "animate-pulse" : ""}`}
+          style={{ height: 36, fontSize: 14, whiteSpace: "nowrap" }}
         >
-          {parseInt(proc.seq_no, 10)}
+          {shortName(proc.process_name)}
         </span>
       );
     }
@@ -245,20 +393,20 @@ function CompressedProcessSteps({
     if (isCompleted) {
       return (
         <span
-          className="rounded-full bg-green-100 text-green-700 border-2 border-green-400 flex items-center justify-center shrink-0 font-bold"
-          style={{ width: size, height: size, fontSize }}
+          className="rounded-lg bg-green-100 text-green-700 border border-green-400 flex items-center justify-center shrink-0 font-bold px-2.5"
+          style={{ height: 32, fontSize: 13, whiteSpace: "nowrap" }}
         >
-          {parseInt(proc.seq_no, 10)}
+          {shortName(proc.process_name)}
         </span>
       );
     }
 
     return (
       <span
-        className="rounded-full bg-gray-100 text-gray-500 border-2 border-gray-300 flex items-center justify-center shrink-0 font-bold"
-        style={{ width: size, height: size, fontSize }}
+        className="rounded-lg bg-gray-100 text-gray-500 border border-gray-300 flex items-center justify-center shrink-0 font-bold px-2.5"
+        style={{ height: 32, fontSize: 13, whiteSpace: "nowrap" }}
       >
-        {parseInt(proc.seq_no, 10)}
+        {shortName(proc.process_name)}
       </span>
     );
   };
@@ -270,12 +418,12 @@ function CompressedProcessSteps({
     return <span className={`w-3 h-0.5 ${color} shrink-0`} />;
   };
 
-  // For waiting status: no click handler, no chevron
-  const isClickable = status !== "waiting" && onClick;
+  // 모든 상태에서 클릭 가능 (공정 상세 모달)
+  const isClickable = !!onClick;
 
   return (
     <div
-      className={`flex items-center justify-center gap-0.5 mb-3 py-2 px-3 bg-gray-50 rounded-xl transition ${
+      className={`flex items-center justify-center gap-1 mb-3 py-3 px-4 bg-gray-50 rounded-xl transition ${
         isClickable ? "cursor-pointer hover:bg-gray-100" : ""
       }`}
       onClick={isClickable ? onClick : undefined}
@@ -283,7 +431,7 @@ function CompressedProcessSteps({
       {/* Collapsed before */}
       {beforeCollapsed > 0 && (
         <>
-          <span className="w-7 h-7 rounded-full bg-green-100 text-green-700 border border-green-300 flex items-center justify-center shrink-0 text-[9px] font-bold">
+          <span className="rounded-lg bg-green-100 text-green-700 border border-green-300 flex items-center justify-center shrink-0 text-xs font-bold px-2" style={{ height: 32 }}>
             +{beforeCollapsed}
           </span>
           <span className="w-3 h-0.5 bg-green-400 shrink-0" />
@@ -293,19 +441,19 @@ function CompressedProcessSteps({
       {/* Previous step */}
       {prevIdx >= 0 && (
         <>
-          {stepDot(sorted[prevIdx], false)}
-          {lineBetween(sorted[prevIdx], sorted[currentIdx])}
+          {stepLabel(sorted[prevIdx], false)}
+          <span className="w-3 h-0.5 bg-gray-300 shrink-0" />
         </>
       )}
 
       {/* Current step */}
-      {stepDot(sorted[currentIdx], true)}
+      {stepLabel(sorted[currentIdx], true)}
 
       {/* Next step */}
       {nextIdx < sorted.length && (
         <>
-          {lineBetween(sorted[currentIdx], sorted[nextIdx])}
-          {stepDot(sorted[nextIdx], false)}
+          <span className="w-3 h-0.5 bg-gray-300 shrink-0" />
+          {stepLabel(sorted[nextIdx], false)}
         </>
       )}
 
@@ -313,7 +461,7 @@ function CompressedProcessSteps({
       {afterCollapsed > 0 && (
         <>
           <span className="w-3 h-0.5 bg-gray-200 shrink-0" />
-          <span className="w-7 h-7 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center shrink-0 text-[9px] font-bold">
+          <span className="rounded-lg bg-gray-200 text-gray-500 flex items-center justify-center shrink-0 text-xs font-bold px-2" style={{ height: 32 }}>
             +{afterCollapsed}
           </span>
         </>
@@ -338,30 +486,42 @@ function AcceptableCardBody({
   planQty,
   prevGoodQty,
   availableQty,
+  reworkAvailableQty,
 }: {
   planQty: number;
   prevGoodQty: number | null;
   availableQty: number;
+  reworkAvailableQty?: number;
 }) {
   return (
-    <div className="grid grid-cols-3 gap-2 mb-3">
-      <div className="text-center bg-gray-50 rounded-xl py-4">
-        <div className="text-[13px] text-gray-400">지시수량</div>
-        <div className="text-2xl font-extrabold text-gray-900">{planQty.toLocaleString()}</div>
-      </div>
-      <div className="text-center bg-emerald-50 rounded-xl py-4">
-        <div className="text-[13px] text-emerald-500">전공정양품</div>
-        <div className="text-2xl font-extrabold text-emerald-600">
-          {prevGoodQty !== null ? prevGoodQty.toLocaleString() : "-"}
+    <>
+      <div className="grid grid-cols-3 gap-2 mb-3">
+        <div className="text-center bg-gray-50 rounded-xl py-4">
+          <div className="text-sm text-gray-400">지시수량</div>
+          <div className="text-3xl font-extrabold text-gray-900">{planQty.toLocaleString()}</div>
+        </div>
+        <div className="text-center bg-emerald-50 rounded-xl py-4">
+          <div className="text-sm text-emerald-500">전공정양품</div>
+          <div className="text-3xl font-extrabold text-emerald-600">
+            {prevGoodQty !== null ? prevGoodQty.toLocaleString() : "-"}
+          </div>
+        </div>
+        <div className="text-center bg-blue-50 rounded-xl py-4">
+          <div className="text-sm text-blue-500">접수가능</div>
+          <div className="font-extrabold text-blue-600" style={{ fontSize: 28 }}>
+            {availableQty.toLocaleString()}
+          </div>
         </div>
       </div>
-      <div className="text-center bg-blue-50 rounded-xl py-4">
-        <div className="text-[13px] text-blue-500">접수가능</div>
-        <div className="font-extrabold text-blue-600" style={{ fontSize: 28 }}>
-          {availableQty.toLocaleString()}
-        </div>
-      </div>
-    </div>
+      {reworkAvailableQty && reworkAvailableQty > 0 ? (
+        reworkAvailableQty >= availableQty ? null : (
+          <div className="flex items-center gap-2 mb-3 px-3 py-2 bg-amber-50 border border-amber-200 rounded-xl">
+            <span className="text-xs font-bold text-white bg-amber-500 px-2 py-0.5 rounded-full">리워크</span>
+            <span className="text-xs text-amber-700 font-medium">재작업 물량 {reworkAvailableQty}개 포함</span>
+          </div>
+        )
+      ) : null}
+    </>
   );
 }
 
@@ -394,20 +554,20 @@ function InProgressCardBody({
       {/* 4-col qty grid */}
       <div className="grid grid-cols-4 gap-1.5 mb-2">
         <div className="text-center bg-blue-50 rounded-xl py-3">
-          <div className="text-[13px] text-blue-500">접수</div>
-          <div className="text-2xl font-extrabold text-blue-700">{inputQty.toLocaleString()}</div>
+          <div className="text-sm text-blue-500">접수</div>
+          <div className="text-3xl font-extrabold text-blue-700">{inputQty.toLocaleString()}</div>
         </div>
         <div className="text-center bg-emerald-50 rounded-xl py-3">
-          <div className="text-[13px] text-emerald-500">양품</div>
-          <div className="text-2xl font-extrabold text-emerald-700">{goodQty.toLocaleString()}</div>
+          <div className="text-sm text-emerald-500">양품</div>
+          <div className="text-3xl font-extrabold text-emerald-700">{goodQty.toLocaleString()}</div>
         </div>
         <div className="text-center bg-red-50 rounded-xl py-3">
-          <div className="text-[13px] text-red-500">불량</div>
-          <div className="text-2xl font-extrabold text-red-700">{defectQty.toLocaleString()}</div>
+          <div className="text-sm text-red-500">불량</div>
+          <div className="text-3xl font-extrabold text-red-700">{defectQty.toLocaleString()}</div>
         </div>
         <div className="text-center bg-amber-50 rounded-xl py-3">
-          <div className="text-[13px] text-amber-500">잔여</div>
-          <div className="text-2xl font-extrabold text-amber-700">{remainQty.toLocaleString()}</div>
+          <div className="text-sm text-amber-500">잔여</div>
+          <div className="text-3xl font-extrabold text-amber-700">{remainQty.toLocaleString()}</div>
         </div>
       </div>
       {additionalAvailable > 0 && (
@@ -437,18 +597,18 @@ function WaitingCardBody({
     <>
       <div className="grid grid-cols-3 gap-2 mb-3">
         <div className="text-center bg-gray-50 rounded-xl py-3">
-          <div className="text-[13px] text-gray-400">지시수량</div>
-          <div className="text-2xl font-extrabold text-gray-900">{planQty.toLocaleString()}</div>
+          <div className="text-sm text-gray-400">지시수량</div>
+          <div className="text-3xl font-extrabold text-gray-900">{planQty.toLocaleString()}</div>
         </div>
         <div className="text-center bg-blue-50 rounded-xl py-3">
-          <div className="text-[13px] text-blue-500">이전공정</div>
+          <div className="text-sm text-blue-500">이전공정</div>
           <div className="text-base font-bold text-blue-600 truncate">{prevProcessName || "-"}</div>
           {prevProgressPct !== null && (
             <div className="text-xs text-blue-400 mt-1">진행중 ({prevProgressPct}%)</div>
           )}
         </div>
         <div className="text-center bg-gray-50 rounded-xl py-3">
-          <div className="text-[13px] text-gray-400">현재공정</div>
+          <div className="text-sm text-gray-400">현재공정</div>
           <div className="text-base font-bold text-gray-600 truncate">{currentProcessName}</div>
           <div className="text-xs text-gray-400 mt-1">{currentSeqNo}번째 공정</div>
         </div>
@@ -473,20 +633,20 @@ function CompletedCardBody({
   return (
     <div className="grid grid-cols-4 gap-1.5">
       <div className="text-center bg-emerald-50 rounded-xl py-3">
-        <div className="text-[13px] text-emerald-500">양품</div>
-        <div className="text-2xl font-extrabold text-emerald-700">{goodQty.toLocaleString()}</div>
+        <div className="text-sm text-emerald-500">양품</div>
+        <div className="text-3xl font-extrabold text-emerald-700">{goodQty.toLocaleString()}</div>
       </div>
       <div className="text-center bg-red-50 rounded-xl py-3">
-        <div className="text-[13px] text-red-500">불량</div>
-        <div className="text-2xl font-extrabold text-red-700">{defectQty.toLocaleString()}</div>
+        <div className="text-sm text-red-500">불량</div>
+        <div className="text-3xl font-extrabold text-red-700">{defectQty.toLocaleString()}</div>
       </div>
       <div className="text-center bg-gray-50 rounded-xl py-3">
-        <div className="text-[13px] text-gray-400">지시</div>
-        <div className="text-2xl font-extrabold text-gray-600">{planQty.toLocaleString()}</div>
+        <div className="text-sm text-gray-400">지시</div>
+        <div className="text-3xl font-extrabold text-gray-600">{planQty.toLocaleString()}</div>
       </div>
       <div className="text-center bg-blue-50 rounded-xl py-3">
-        <div className="text-[13px] text-blue-500">접수</div>
-        <div className="text-2xl font-extrabold text-blue-700">{inputQty.toLocaleString()}</div>
+        <div className="text-sm text-blue-500">접수</div>
+        <div className="text-3xl font-extrabold text-blue-700">{inputQty.toLocaleString()}</div>
       </div>
     </div>
   );
@@ -496,31 +656,47 @@ function CompletedCardBody({
 function ReworkCardBody({
   reworkQty,
   availableQty,
+  originProcessName,
   originProcessCode,
+  originDefectQty,
+  reworkRound,
 }: {
   reworkQty: number;
   availableQty: number;
+  originProcessName: string;
   originProcessCode: string;
+  originDefectQty: number;
+  reworkRound: number;
 }) {
   return (
     <>
+      {/* Rework info summary */}
+      <div className="mb-3 p-2.5 bg-orange-50 border border-orange-200 rounded-xl">
+        <div className="flex items-center gap-1.5 text-sm font-semibold text-orange-700">
+          <span>{originProcessName || originProcessCode}</span>
+          <span className="text-orange-400">&rarr;</span>
+          <span>불량 {originDefectQty}개</span>
+          <span className="text-orange-400">&rarr;</span>
+          <span className="bg-orange-500 text-white text-xs px-1.5 py-0.5 rounded font-bold">
+            재작업 {reworkRound}회차
+          </span>
+        </div>
+      </div>
+
       <div className="grid grid-cols-2 gap-3 mb-3">
         <div className="text-center bg-orange-50 rounded-xl py-4">
-          <div className="text-[13px] text-orange-500">재작업수량</div>
+          <div className="text-sm text-orange-500">재작업수량</div>
           <div className="font-extrabold text-orange-600" style={{ fontSize: 32 }}>
             {reworkQty.toLocaleString()}
           </div>
         </div>
         <div className="text-center bg-blue-50 rounded-xl py-4">
-          <div className="text-[13px] text-blue-500">접수가능</div>
+          <div className="text-sm text-blue-500">접수가능</div>
           <div className="font-extrabold text-blue-600" style={{ fontSize: 32 }}>
             {availableQty.toLocaleString()}
           </div>
         </div>
       </div>
-      <div className="text-center text-sm text-gray-400">
-        원공정 {originProcessCode}에서 발생한 불량 재작업
-      </div>
     </>
   );
 }
@@ -531,6 +707,8 @@ function ReworkCardBody({
 
 export function WorkOrderList() {
   const router = useRouter();
+  const { user } = useAuth();
+  const currentUserId = user?.userId || "";
 
   /* ---- State ---- */
   const [instructions, setInstructions] = useState<WorkInstruction[]>([]);
@@ -539,7 +717,7 @@ export function WorkOrderList() {
   const [equipmentList, setEquipmentList] = useState<EquipmentMng[]>([]);
   const [loading, setLoading] = useState(true);
   const [syncing, setSyncing] = useState(false);
-  const [activeTab, setActiveTab] = useState<TabFilter>("all");
+  const [activeTab, setActiveTab] = useState<TabFilter>("acceptable");
 
   /* Column layout */
   const [cardCols, setCardCols] = useState<number>(DEFAULT_COLS);
@@ -557,6 +735,7 @@ export function WorkOrderList() {
     processName: string;
     seqNo: string;
     maxQty: number;
+    reworkSourceId?: string;
   }>({ open: false, processId: "", processName: "", seqNo: "", maxQty: 0 });
   const [acceptLoading, setAcceptLoading] = useState(false);
 
@@ -566,6 +745,8 @@ export function WorkOrderList() {
     wiNo: string;
     totalQty: number;
     steps: ProcessStep[];
+    woId?: string;
+    showReworkHistory?: boolean;
   }>({ open: false, wiNo: "", totalQty: 0, steps: [] });
 
   /* ---- Load saved column preference ---- */
@@ -601,11 +782,27 @@ export function WorkOrderList() {
       }
 
       const wiRes = await apiClient.get("/work-instruction/list");
-      let wiData: WorkInstruction[] = [];
+      let wiRaw: Record<string, unknown>[] = [];
       if (wiRes.data?.data) {
-        wiData = Array.isArray(wiRes.data.data) ? wiRes.data.data : wiRes.data.data.rows || [];
+        wiRaw = Array.isArray(wiRes.data.data) ? wiRes.data.data : wiRes.data.data.rows || [];
       } else if (Array.isArray(wiRes.data)) {
-        wiData = wiRes.data;
+        wiRaw = wiRes.data;
+      }
+      // wi_id → id 매핑 + 중복 제거 (header+detail 조인이므로 첫 행만)
+      const seen = new Set<string>();
+      const wiData: WorkInstruction[] = [];
+      for (const raw of wiRaw) {
+        const wiId = String(raw.wi_id || raw.id || "");
+        if (!wiId || seen.has(wiId)) continue;
+        seen.add(wiId);
+        wiData.push({
+          ...raw,
+          id: wiId,
+          item_name: String(raw.item_name || ""),
+          item_code: String(raw.item_code || ""),
+          item_number: String(raw.item_number || ""),
+          qty: parseInt(String(raw.total_qty || raw.qty || 0), 10),
+        } as unknown as WorkInstruction);
       }
       setInstructions(wiData);
 
@@ -671,11 +868,16 @@ export function WorkOrderList() {
   }, [allProcesses]);
 
   const masterProcesses = useMemo(() => {
-    // 마스터 행 + 내가 접수한 분할 행(진행중)도 포함
+    // 마스터 행 + 분할 행(진행중/완료/리워크) — 중복 제거
+    const seen = new Set<string>();
     return allProcesses.filter((p) => {
-      if (!p.parent_process_id) return true; // 마스터 행
-      if (p.status === "in_progress" || p.status === "completed") return true; // 분할 행 (접수된 것)
-      return false;
+      if (seen.has(p.id)) return false;
+      const include =
+        !p.parent_process_id || // 마스터 행
+        p.status === "in_progress" || p.status === "completed" || // 분할 행
+        p.is_rework === "Y" || p.is_rework === "true" || p.is_rework === "1"; // 재작업
+      if (include) seen.add(p.id);
+      return include;
     });
   }, [allProcesses]);
 
@@ -690,7 +892,7 @@ export function WorkOrderList() {
 
   /* ---- Filter options ---- */
   const processFilterOptions = useMemo(() => {
-    const opts: { value: string; label: string }[] = [{ value: "__all__", label: "전체 공정" }];
+    const opts: { value: string; label: string }[] = [{ value: "__all__", label: "공정을 선택하세요" }];
     const seen = new Set<string>();
     for (const proc of masterProcesses) {
       if (proc.process_code && !seen.has(proc.process_code)) {
@@ -725,8 +927,16 @@ export function WorkOrderList() {
 
   /* ---- Filtered processes ---- */
   const filteredProcesses = useMemo(() => {
+    if (selectedProcess === "__all__") return []; // 공정 미선택 시 빈 목록
     return masterProcesses.filter((proc) => {
-      if (selectedProcess !== "__all__" && proc.process_code !== selectedProcess) return false;
+      const isRework = proc.is_rework === "Y" || proc.is_rework === "true" || proc.is_rework === "1";
+      const isMaster = !proc.parent_process_id;
+      // 완료/진행중 탭에서는 SPLIT만 표시 (마스터 제외)
+      if (isMaster && !isRework && (activeTab === "completed" || activeTab === "in_progress")) return false;
+      // 리워크 마스터가 in_progress/completed면 SPLIT이 생성된 것 → 리워크 마스터 숨김 (SPLIT은 표시)
+      if (isRework && !proc.parent_process_id && (proc.status === "in_progress" || proc.status === "completed")) return false;
+      // 재작업 카드는 공정 필터 무시 (모든 공정에서 표시)
+      if (!isRework && proc.process_code !== selectedProcess) return false;
       if (selectedEquipment !== "__all__") {
         const wi = instructionMap[proc.wo_id];
         if (!wi) return false;
@@ -737,12 +947,14 @@ export function WorkOrderList() {
       if (activeTab !== "all" && proc.status !== activeTab) return false;
       return true;
     });
-  }, [masterProcesses, selectedProcess, selectedEquipment, activeTab, instructionMap, equipmentMap]);
+  }, [masterProcesses, selectedProcess, selectedEquipment, activeTab, instructionMap, equipmentMap, currentUserId, allProcesses]);
 
   /* ---- Tab counts ---- */
   const tabCounts = useMemo(() => {
     const preFiltered = masterProcesses.filter((proc) => {
-      if (selectedProcess !== "__all__" && proc.process_code !== selectedProcess) return false;
+      const isRework = proc.is_rework === "Y" || proc.is_rework === "true" || proc.is_rework === "1";
+      // 재작업 카드는 공정 필터 무시 (모든 공정에서 표시)
+      if (selectedProcess !== "__all__" && !isRework && proc.process_code !== selectedProcess) return false;
       if (selectedEquipment !== "__all__") {
         const wi = instructionMap[proc.wo_id];
         if (!wi) return false;
@@ -760,23 +972,27 @@ export function WorkOrderList() {
       completed: 0,
     };
     for (const proc of preFiltered) {
+      const isMaster = !proc.parent_process_id;
+      const isRw = proc.is_rework === "Y" || proc.is_rework === "true" || proc.is_rework === "1";
+      // 리워크 마스터가 in_progress/completed면 SPLIT이 있으므로 카운트 제외
+      if (isRw && !proc.parent_process_id && (proc.status === "in_progress" || proc.status === "completed")) continue;
       if (proc.status === "acceptable") counts.acceptable++;
-      else if (proc.status === "in_progress") counts.in_progress++;
-      else if (proc.status === "completed") counts.completed++;
+      else if (proc.status === "in_progress" && (!isMaster || isRw)) counts.in_progress++;
+      else if (proc.status === "completed" && (!isMaster || isRw)) counts.completed++;
       else counts.waiting++;
     }
     return counts;
   }, [masterProcesses, selectedProcess, selectedEquipment, instructionMap, equipmentMap]);
 
   /* ---- Accept handler ---- */
-  const openAcceptModal = async (processId: string, processName: string, seqNo: string) => {
+  const openAcceptModal = async (processId: string, processName: string, seqNo: string, reworkSourceId?: string) => {
     try {
       const res = await apiClient.get("/pop/production/available-qty", {
         params: { work_order_process_id: processId },
       });
       const data = res.data?.data;
       const maxQty = data?.availableQty ?? 0;
-      setAcceptModal({ open: true, processId, processName, seqNo, maxQty });
+      setAcceptModal({ open: true, processId, processName, seqNo, maxQty, reworkSourceId });
     } catch {
       alert("접수가능량 조회 실패");
     }
@@ -785,18 +1001,18 @@ export function WorkOrderList() {
   const handleAccept = async (qty: number) => {
     setAcceptLoading(true);
     try {
-      const res = await apiClient.post("/pop/production/accept-process", {
+      const body: Record<string, unknown> = {
         work_order_process_id: acceptModal.processId,
         accept_qty: qty,
-      });
+      };
+      // 리워크 추적: rework_source_id가 있으면 전달 (원점 복귀 추적)
+      if (acceptModal.reworkSourceId) {
+        body.rework_source_id = acceptModal.reworkSourceId;
+      }
+      const res = await apiClient.post("/pop/production/accept-process", body);
       if (res.data?.success) {
-        const splitId = res.data.data?.id;
         setAcceptModal((m) => ({ ...m, open: false }));
-        if (splitId) {
-          router.push(`/pop/production/work/${splitId}`);
-        } else {
-          fetchAll();
-        }
+        await fetchAll();
       } else {
         alert(res.data?.message || "접수 실패");
       }
@@ -807,9 +1023,11 @@ export function WorkOrderList() {
     }
   };
 
-  /* ---- Navigate to work ---- */
+  /* ---- Open work detail as fullscreen modal ---- */
+  const [workModalProcessId, setWorkModalProcessId] = useState<string | null>(null);
+
   const goToWork = (processId: string) => {
-    router.push(`/pop/production/work/${processId}`);
+    setWorkModalProcessId(processId);
   };
 
   /* ---- Open process detail modal ---- */
@@ -841,14 +1059,50 @@ export function WorkOrderList() {
       };
     });
 
+    // Check if this wo has any rework processes
+    const hasReworks = allProcesses.some(
+      (p) => p.wo_id === proc.wo_id && (p.is_rework === "Y" || p.is_rework === "true" || p.is_rework === "1")
+    );
+
     setDetailModal({
       open: true,
       wiNo: wi?.work_instruction_no || "작업지시",
       totalQty,
       steps,
+      woId: proc.wo_id,
+      showReworkHistory: hasReworks,
     });
   };
 
+  /* ---- Helper: get split order label (접수 #N) ---- */
+  const splitOrderMap = useMemo(() => {
+    // 같은 wo_id + seq_no를 가진 SPLIT들을 그룹화하여 순서 부여
+    const groups: Record<string, WorkOrderProcess[]> = {};
+    for (const proc of allProcesses) {
+      if (!proc.parent_process_id) continue; // 마스터 행은 제외
+      if (proc.status !== "in_progress" && proc.status !== "completed") continue;
+      const key = `${proc.wo_id}__${proc.seq_no}`;
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(proc);
+    }
+
+    const result: Record<string, { order: number; total: number }> = {};
+    for (const key of Object.keys(groups)) {
+      const splits = groups[key];
+      if (splits.length <= 1) continue; // 1개면 순서 표시 불필요
+      // accepted_at 기준 정렬 (없으면 started_at, 그마저 없으면 id)
+      splits.sort((a, b) => {
+        const ta = a.accepted_at ? new Date(a.accepted_at).getTime() : (a.started_at ? new Date(a.started_at).getTime() : 0);
+        const tb = b.accepted_at ? new Date(b.accepted_at).getTime() : (b.started_at ? new Date(b.started_at).getTime() : 0);
+        return ta - tb || a.id.localeCompare(b.id);
+      });
+      for (let i = 0; i < splits.length; i++) {
+        result[splits[i].id] = { order: i + 1, total: splits.length };
+      }
+    }
+    return result;
+  }, [allProcesses]);
+
   /* ---- Helper: get previous process info ---- */
   const getPrevProcessInfo = (proc: WorkOrderProcess) => {
     const siblings = (processesByWo[proc.wo_id] || [])
@@ -862,10 +1116,27 @@ export function WorkOrderList() {
     const prevGood = parseInt(prev.good_qty || "0", 10);
     const prevPlan = parseInt(prev.plan_qty || "0", 10);
     const prevPct = prevPlan > 0 ? Math.round((prevGood / prevPlan) * 100) : 0;
+    // 앞공정에서 리워크로 완료된 양품 수량
+    const prevSeqNo = prev.seq_no;
+    const reworkGoodFromPrev = allProcesses
+      .filter((p) => p.wo_id === proc.wo_id && p.seq_no === prevSeqNo && p.parent_process_id && p.status === "completed" && (p.is_rework === "Y" || p.is_rework === "true" || p.is_rework === "1"))
+      .reduce((sum, p) => sum + (parseInt(p.good_qty || "0", 10)), 0);
+    // 현재 공정에서 이미 리워크로 접수된 수량
+    const reworkConsumedHere = allProcesses
+      .filter((p) => p.wo_id === proc.wo_id && p.seq_no === proc.seq_no && p.parent_process_id && (p.is_rework === "Y" || p.is_rework === "true" || p.is_rework === "1"))
+      .reduce((sum, p) => sum + (parseInt(p.input_qty || "0", 10)), 0);
+    const reworkAvailableQty = Math.max(0, reworkGoodFromPrev - reworkConsumedHere);
+
+    // 접수가능 수량을 초과하지 않도록 제한
+    const inputQtyNum = parseInt(proc.input_qty || "0", 10);
+    const actualAvailable = Math.max(0, prevGood - inputQtyNum);
+    const clampedReworkAvailable = Math.min(reworkAvailableQty, actualAvailable);
+
     return {
       prevGoodQty: prevGood,
       prevProcessName: prev.process_name || prev.process_code,
       prevProgressPct: prev.status === "in_progress" ? prevPct : prev.status === "completed" ? 100 : null,
+      reworkAvailableQty: clampedReworkAvailable,
     };
   };
 
@@ -998,8 +1269,8 @@ export function WorkOrderList() {
             </svg>
           </div>
           <p className="text-sm text-gray-400">
-            {activeTab === "all"
-              ? "등록된 공정이 없습니다"
+            {selectedProcess === "__all__"
+              ? "공정을 선택해주세요"
               : `${TABS.find((t) => t.key === activeTab)?.label || ""} 상태의 공정이 없습니다`}
           </p>
         </div>
@@ -1023,7 +1294,7 @@ export function WorkOrderList() {
               const goodQty = parseInt(proc.good_qty || "0", 10);
               const defectQty = parseInt(proc.defect_qty || "0", 10);
               const inputQty = parseInt(proc.input_qty || "0", 10);
-              const isRework = proc.is_rework === "true" || proc.is_rework === "1";
+              const isRework = proc.is_rework === "Y" || proc.is_rework === "true" || proc.is_rework === "1";
               const borderLeft = isRework ? "border-l-orange-500" : (BORDER_LEFT_COLOR[proc.status] || "border-l-gray-300");
               const eqName = getEquipmentName(proc);
 
@@ -1041,63 +1312,114 @@ export function WorkOrderList() {
               const prevInfo = getPrevProcessInfo(proc);
 
               // Calculate available qty for acceptable
-              const availableQty = prevInfo.prevGoodQty !== null
-                ? Math.max(0, prevInfo.prevGoodQty - inputQty)
-                : Math.max(0, planQty - inputQty);
+              const availableQty = isRework
+                ? inputQty // 리워크 카드는 input_qty 자체가 접수 대상
+                : prevInfo.prevGoodQty !== null
+                  ? Math.max(0, prevInfo.prevGoodQty - inputQty)
+                  : Math.max(0, planQty - inputQty);
 
               // Additional available for in_progress
               const additionalAvailable = Math.max(0, planQty - inputQty);
 
+              // Split order label
+              const splitInfo = splitOrderMap[proc.id];
+
+              // 합류 불가 리워크 감지: 접수가능 물량이 전부 리워크일 때
+              const reworkQtyAvail = prevInfo.reworkAvailableQty || 0;
+              const normalAvail = availableQty - reworkQtyAvail;
+              const isReworkOnly = !isRework && proc.status === "acceptable" && reworkQtyAvail > 0 && normalAvail <= 0 && availableQty > 0;
+
+              // 리워크 표시 여부 (실제 리워크 카드 OR 합류불가 리워크)
+              const showReworkBadge = isRework || isReworkOnly;
+
+              // Rework info: origin process + rework round
+              let reworkRound = 1;
+              let originProcessName = proc.process_name || proc.process_code;
+              let originProcessCode = proc.process_code;
+              let originDefectQty = defectQty;
+              if (isRework) {
+                // 리워크 마스터 카드만 카운트 (SPLIT 제외 — parent_process_id 없는 것만)
+                const reworkMasters = allProcesses.filter(
+                  (p) =>
+                    p.wo_id === proc.wo_id &&
+                    !p.parent_process_id &&
+                    (p.is_rework === "Y" || p.is_rework === "true" || p.is_rework === "1")
+                );
+                const sortedReworks = [...reworkMasters].sort((a, b) => {
+                  const da = a.created_date ? new Date(a.created_date).getTime() : 0;
+                  const db = b.created_date ? new Date(b.created_date).getTime() : 0;
+                  return da - db || a.id.localeCompare(b.id);
+                });
+                // 현재 카드가 SPLIT이면 parent(마스터)의 위치로, 마스터면 직접 위치
+                const masterId = proc.parent_process_id || proc.id;
+                const myIdx = sortedReworks.findIndex((r) => r.id === masterId);
+                reworkRound = myIdx >= 0 ? myIdx + 1 : 1;
+
+                // Find origin (source) process
+                if (proc.rework_source_id) {
+                  const origin = allProcesses.find((p) => p.id === proc.rework_source_id);
+                  if (origin) {
+                    originProcessName = origin.process_name || origin.process_code;
+                    originProcessCode = origin.process_code;
+                    originDefectQty = parseInt(origin.defect_qty || "0", 10);
+                  }
+                }
+              }
+
               return (
-                <div key={proc.id} className="card-item">
+                <div key={`${proc.id}-${proc.status}-${proc.parent_process_id || "m"}`} className="card-item">
                   <div
                     className={`bg-white rounded-2xl border-l-4 ${borderLeft} border border-gray-100 shadow-sm overflow-hidden flex flex-col ${
                       proc.status === "waiting" ? "opacity-75" : ""
-                    } ${isRework ? "border-2 border-orange-200" : ""}`}
-                    style={{ minHeight: 340 }}
+                    } ${showReworkBadge ? "border-2 border-orange-200" : ""} ${
+                      proc.status === "in_progress" ? "cursor-pointer active:scale-[0.99] transition-transform" : ""
+                    }`}
+                    style={{ height: "100%" }}
+                    onClick={proc.status === "in_progress" ? () => goToWork(proc.parent_process_id ? proc.id : (mySplits[0]?.id || proc.id)) : undefined}
                   >
                     <div className="p-4 flex-1 flex flex-col">
                       {/* Header: Work instruction number + status badge */}
                       <div className="flex items-center justify-between mb-1">
                         <div className="flex items-center gap-2 min-w-0">
-                          {isRework && (
+                          {showReworkBadge && (
                             <span className="bg-orange-500 text-white text-[10px] font-bold px-2 py-0.5 rounded shrink-0">
                               🔄 리워크
                             </span>
                           )}
-                          <h3 className="text-lg font-extrabold text-gray-900 truncate">
+                          <h3 className="text-xl font-extrabold text-gray-900 truncate">
                             {wi?.work_instruction_no || "작업지시"}
+                            {splitInfo && (
+                              <span className="text-sm font-bold text-blue-500 ml-1">
+                                (접수 #{splitInfo.order})
+                              </span>
+                            )}
                           </h3>
                         </div>
-                        <span className={`shrink-0 ml-2 text-xs font-bold px-3 py-1 rounded-full ${badge.bg} ${badge.text}`}>
+                        <span className={`shrink-0 ml-2 text-sm font-bold px-3 py-1.5 rounded-full ${badge.bg} ${badge.text}`}>
                           {badge.prefix}{badge.label}
                         </span>
                       </div>
 
                       {/* Sub-info: item name + equipment */}
-                      <div className="flex items-center gap-3 text-xs text-gray-500 mb-3">
+                      <div className="flex items-center gap-3 text-sm text-gray-500 mb-3">
+                        <span className="truncate">📦 {wi?.item_name || wi?.item_code || wi?.item_number || "품목"}</span>
                         {!isRework && (
-                          <>
-                            <span className="truncate">📦 {wi?.item_name || wi?.item_code || "품목"}</span>
-                            <span className="shrink-0">⚙️ {eqName}</span>
-                          </>
+                          <span className="shrink-0">⚙️ {eqName}</span>
                         )}
                         {isRework && (
-                          <>
-                            <span className="truncate">📦 {wi?.item_name || wi?.item_code || "품목"}</span>
-                            <span className="shrink-0">원공정: {proc.process_code}</span>
-                            <span className="shrink-0">불량 {defectQty}EA</span>
-                          </>
+                          <span className="shrink-0">⚙️ {proc.process_name || proc.process_code}</span>
                         )}
                       </div>
 
-                      {/* Process steps (compressed) -- not for rework */}
-                      {!isRework && siblingProcesses.length > 1 && (
+                      {/* Process steps (compressed) — both normal and rework cards */}
+                      {siblingProcesses.length > 1 && (
                         <CompressedProcessSteps
                           processes={processesByWo[proc.wo_id] || []}
                           currentSeqNo={proc.seq_no}
                           status={proc.status}
                           onClick={() => openDetailModal(proc)}
+                          batchId={(proc as Record<string, unknown>).batch_id as string | undefined}
+                          allProcesses={allProcesses}
                         />
                       )}
 
@@ -1107,13 +1429,17 @@ export function WorkOrderList() {
                           <ReworkCardBody
                             reworkQty={planQty}
                             availableQty={availableQty}
-                            originProcessCode={proc.process_code}
+                            originProcessName={originProcessName}
+                            originProcessCode={originProcessCode}
+                            originDefectQty={originDefectQty}
+                            reworkRound={reworkRound}
                           />
                         ) : proc.status === "acceptable" ? (
                           <AcceptableCardBody
                             planQty={planQty}
                             prevGoodQty={prevInfo.prevGoodQty}
                             availableQty={availableQty}
+                            reworkAvailableQty={prevInfo.reworkAvailableQty}
                           />
                         ) : proc.status === "in_progress" ? (
                           <InProgressCardBody
@@ -1146,14 +1472,14 @@ export function WorkOrderList() {
                     {/* Action button (full width, bottom) */}
                     {isRework && proc.status === "acceptable" && (
                       <button
-                        onClick={() => openAcceptModal(proc.id, proc.process_name, proc.seq_no)}
+                        onClick={() => openAcceptModal(proc.id, proc.process_name, proc.seq_no, (proc as Record<string, unknown>).rework_source_id as string | undefined)}
                         className="w-full py-3.5 text-sm font-bold text-white active:scale-[0.98] transition-all"
                         style={{ background: "linear-gradient(to bottom, #fb923c, #ea580c)" }}
                       >
                         리워크 접수
                       </button>
                     )}
-                    {!isRework && proc.status === "acceptable" && (
+                    {!isRework && proc.status === "acceptable" && availableQty > 0 && (
                       <button
                         onClick={() => openAcceptModal(proc.id, proc.process_name, proc.seq_no)}
                         className="w-full py-3.5 text-sm font-bold text-white active:scale-[0.98] transition-all"
@@ -1162,12 +1488,33 @@ export function WorkOrderList() {
                         접수
                       </button>
                     )}
-                    {proc.status === "in_progress" && mySplits.length > 0 && (
+                    {!isRework && proc.status === "acceptable" && availableQty <= 0 && inputQty > 0 && (
+                      <div className="w-full py-3 text-sm font-bold text-center text-gray-400 bg-gray-100">
+                        전량 접수 완료
+                      </div>
+                    )}
+                    {proc.status === "in_progress" && parseInt(proc.total_production_qty || "0", 10) === 0 && proc.parent_process_id && (
                       <button
-                        onClick={() => goToWork(mySplits[0].id)}
-                        className="w-full py-3.5 text-sm font-bold text-white bg-blue-500 active:scale-[0.98] transition-all"
+                        onClick={async (e) => {
+                          e.stopPropagation();
+                          if (!confirm("접수를 취소하시겠습니까?")) return;
+                          try {
+                            const res = await apiClient.post("/pop/production/cancel-accept", {
+                              work_order_process_id: proc.id,
+                            });
+                            if (res.data?.success) {
+                              fetchAll();
+                            } else {
+                              alert(res.data?.message || "취소 실패");
+                            }
+                          } catch (err: unknown) {
+                            const e2 = err as { response?: { data?: { message?: string } } };
+                            alert(e2.response?.data?.message || "취소 중 오류");
+                          }
+                        }}
+                        className="w-full py-4 text-base font-bold text-red-500 border-t-2 border-red-100 bg-red-50/50 active:scale-[0.98] transition-all"
                       >
-                        작업 계속
+                        접수 취소
                       </button>
                     )}
                   </div>
@@ -1213,7 +1560,20 @@ export function WorkOrderList() {
         workInstructionNo={detailModal.wiNo}
         totalQty={detailModal.totalQty}
         steps={detailModal.steps}
+        woId={detailModal.woId}
+        showReworkHistory={detailModal.showReworkHistory}
       />
+
+      {/* Fullscreen Work Modal */}
+      {workModalProcessId && (
+        <FullscreenWorkModal
+          processId={workModalProcessId}
+          myProcesses={allProcesses.filter((p) => p.parent_process_id && p.accepted_by === currentUserId && (p.status === "in_progress" || p.status === "completed"))}
+          instructionMap={instructionMap}
+          onSwitch={(id) => setWorkModalProcessId(id)}
+          onClose={() => { setWorkModalProcessId(null); fetchAll(); }}
+        />
+      )}
     </div>
   );
 }
diff --git a/frontend/hooks/pop/usePopSettings.ts b/frontend/hooks/pop/usePopSettings.ts
new file mode 100644
index 00000000..6eafa9cd
--- /dev/null
+++ b/frontend/hooks/pop/usePopSettings.ts
@@ -0,0 +1,219 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { usePathname } from "next/navigation";
+import { apiClient } from "@/lib/api/client";
+
+export interface PopSettings {
+  version: string;
+  screens: {
+    processExecution: {
+      materialInput: boolean;
+      photoUpload: boolean;
+      plcEnabled: boolean;
+      bomFlexible: boolean;
+      packagingOptions: string[];
+      defectTypes: string[];
+      reworkTargetSelection: boolean;
+      groupPhotoEnabled: boolean;
+      dateFilter: boolean;
+      lastProcessInventory: "auto" | "manual" | "button";
+      defaultWarehouse: boolean;
+      inspectionAutoJudge: "off" | "warn" | "fail";
+      standardTimeDisplay: boolean;
+      progressDisplay: boolean;
+    };
+    inbound: {
+      inspectionRequired: boolean;
+      photoUpload: boolean;
+      barcodeEnabled: boolean;
+      packagingRecord: boolean;
+      defectSeparation: boolean;
+    };
+    outbound: {
+      photoUpload: boolean;
+      barcodeEnabled: boolean;
+    };
+    home: {
+      kpiCarousel: boolean;
+      recentActivity: boolean;
+      bannerEnabled: boolean;
+      bannerText: string;
+      iconThemeColor: string;
+      iconCustomImages: boolean;
+      dashboardLayout: "default" | "compact" | "detailed";
+    };
+    plc: {
+      connectionType: "db" | "opcua" | "rest";
+      refreshInterval: number;
+      tagMappings: Array<{
+        tagName: string;
+        processCode: string;
+        checklistItemId: string;
+        unit: string;
+      }>;
+      alarmThresholds: Array<{
+        tagName: string;
+        lowerLimit: number;
+        upperLimit: number;
+        action: "warn" | "stop";
+      }>;
+    };
+  };
+}
+
+const DEFAULT_SETTINGS: PopSettings = {
+  version: "hardcoded-1.0",
+  screens: {
+    processExecution: {
+      materialInput: true,
+      photoUpload: true,
+      plcEnabled: false,
+      bomFlexible: true,
+      packagingOptions: ["낱개", "박스", "파렛트"],
+      defectTypes: ["스크래치", "치수불량", "변색", "크랙", "기포"],
+      reworkTargetSelection: true,
+      groupPhotoEnabled: false,
+      dateFilter: false,
+      lastProcessInventory: "manual",
+      defaultWarehouse: false,
+      inspectionAutoJudge: "off",
+      standardTimeDisplay: false,
+      progressDisplay: false,
+    },
+    inbound: {
+      inspectionRequired: false,
+      photoUpload: false,
+      barcodeEnabled: true,
+      packagingRecord: false,
+      defectSeparation: false,
+    },
+    outbound: {
+      photoUpload: false,
+      barcodeEnabled: true,
+    },
+    home: {
+      kpiCarousel: true,
+      recentActivity: true,
+      bannerEnabled: false,
+      bannerText: "",
+      iconThemeColor: "#2563eb",
+      iconCustomImages: false,
+      dashboardLayout: "default",
+    },
+    plc: {
+      connectionType: "db",
+      refreshInterval: 5,
+      tagMappings: [],
+      alarmThresholds: [],
+    },
+  },
+};
+
+// URL -> screen_id mapping
+const POP_SCREEN_MAP: Record<string, number> = {
+  "/pop/home": 6526,
+  "/pop/inbound": 6529,
+  "/pop/inbound/purchase": 6528,
+  "/pop/inbound/cart": 6527,
+  "/pop/outbound": 6,
+  "/pop/outbound/sales": 5,
+  "/pop/production": 8,
+  "/pop/production/process": 7,
+};
+
+// URL -> settingsKey mapping
+const PATH_TO_SETTINGS_KEY: Record<string, keyof PopSettings["screens"]> = {
+  "/pop/home": "home",
+  "/pop/inbound": "inbound",
+  "/pop/inbound/purchase": "inbound",
+  "/pop/inbound/cart": "inbound",
+  "/pop/outbound": "outbound",
+  "/pop/outbound/sales": "outbound",
+  "/pop/production": "processExecution",
+  "/pop/production/process": "processExecution",
+};
+
+function getScreenIdFromPath(pathname: string): number | null {
+  // Exact match first
+  if (POP_SCREEN_MAP[pathname]) return POP_SCREEN_MAP[pathname];
+  // Longest-prefix match (e.g. /pop/production/process/xxx -> 7)
+  const sorted = Object.keys(POP_SCREEN_MAP).sort((a, b) => b.length - a.length);
+  for (const path of sorted) {
+    if (pathname.startsWith(path)) return POP_SCREEN_MAP[path];
+  }
+  return null;
+}
+
+function getSettingsKeyFromPath(pathname: string): keyof PopSettings["screens"] | null {
+  // Exact match first
+  if (PATH_TO_SETTINGS_KEY[pathname]) return PATH_TO_SETTINGS_KEY[pathname];
+  // Longest-prefix match
+  const sorted = Object.keys(PATH_TO_SETTINGS_KEY).sort((a, b) => b.length - a.length);
+  for (const path of sorted) {
+    if (pathname.startsWith(path)) return PATH_TO_SETTINGS_KEY[path];
+  }
+  return null;
+}
+
+// Per-screenId cache to avoid redundant fetches
+const screenCache: Record<number, Record<string, unknown>> = {};
+
+export function usePopSettings(screenPath?: string) {
+  const autoPathname = usePathname();
+  const pathname = screenPath || autoPathname || "";
+
+  const [settings, setSettings] = useState<PopSettings>(DEFAULT_SETTINGS);
+  const [loading, setLoading] = useState(true);
+
+  const fetchSettings = useCallback(async () => {
+    const screenId = getScreenIdFromPath(pathname);
+    const settingsKey = getSettingsKeyFromPath(pathname);
+
+    if (!screenId || !settingsKey) {
+      setLoading(false);
+      return;
+    }
+
+    // Use cache if available
+    if (screenCache[screenId]) {
+      const popConfig = screenCache[screenId];
+      const merged = { ...DEFAULT_SETTINGS };
+      merged.screens = {
+        ...merged.screens,
+        [settingsKey]: { ...merged.screens[settingsKey], ...popConfig },
+      };
+      setSettings(merged);
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const res = await apiClient
+        .get(`/screen-management/screens/${screenId}/layout-pop`)
+        .catch(() => null);
+
+      if (res?.data?.data?.settings?.popConfig) {
+        const popConfig = res.data.data.settings.popConfig;
+        screenCache[screenId] = popConfig;
+
+        const merged = { ...DEFAULT_SETTINGS };
+        merged.screens = {
+          ...merged.screens,
+          [settingsKey]: { ...merged.screens[settingsKey], ...popConfig },
+        };
+        setSettings(merged);
+      }
+    } catch {
+      // Use default settings on failure
+    }
+
+    setLoading(false);
+  }, [pathname]);
+
+  useEffect(() => {
+    fetchSettings();
+  }, [fetchSettings]);
+
+  return { settings, loading };
+}
diff --git a/frontend/hooks/useLogin.ts b/frontend/hooks/useLogin.ts
index 0c8ac7d5..d52bc0d3 100644
--- a/frontend/hooks/useLogin.ts
+++ b/frontend/hooks/useLogin.ts
@@ -139,16 +139,7 @@ export const useLogin = () => {
               return;
             }
           } else {
-            const firstMenuPath = result.data?.firstMenuPath;
-            const firstMenuName = result.data?.firstMenuName;
-            if (firstMenuName) {
-              localStorage.setItem("currentMenuName", firstMenuName);
-            }
-            if (firstMenuPath) {
-              router.push(firstMenuPath);
-            } else {
-              router.push(AUTH_CONFIG.ROUTES.MAIN);
-            }
+            router.push(AUTH_CONFIG.ROUTES.MAIN);
           }
         } else {
           // 로그인 실패
diff --git a/frontend/lib/api/smartFactoryLog.ts b/frontend/lib/api/smartFactoryLog.ts
index cd70b94f..09c66f62 100644
--- a/frontend/lib/api/smartFactoryLog.ts
+++ b/frontend/lib/api/smartFactoryLog.ts
@@ -67,3 +67,132 @@ export async function getSmartFactoryLogStats(
   const response = await apiClient.get(`/admin/smart-factory-log/stats?${params.toString()}`);
   return response.data;
 }
+
+// ─── 스케줄 관리 ───
+
+export interface SmartFactorySchedule {
+  id: number;
+  company_code: string;
+  company_name: string | null;
+  is_active: boolean;
+  time_start: string;
+  time_end: string;
+  exclude_weekend: boolean;
+  exclude_holidays: boolean;
+  daily_count: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface TodayPlanEntry {
+  companyCode: string;
+  total: number;
+  sent: number;
+  remaining: number;
+}
+
+export interface SmartFactoryHoliday {
+  id: number;
+  holiday_date: string;
+  holiday_name: string;
+  created_at: string;
+}
+
+export async function getSchedules(): Promise<{ success: boolean; data: SmartFactorySchedule[] }> {
+  const response = await apiClient.get("/admin/smart-factory-log/schedules");
+  return response.data;
+}
+
+export async function upsertSchedule(params: {
+  companyCode: string;
+  isActive: boolean;
+  timeStart: string;
+  timeEnd: string;
+  excludeWeekend: boolean;
+  excludeHolidays: boolean;
+  dailyCount: number;
+}): Promise<{ success: boolean; message: string }> {
+  const response = await apiClient.post("/admin/smart-factory-log/schedules", params);
+  return response.data;
+}
+
+export async function deleteSchedule(companyCode: string): Promise<{ success: boolean }> {
+  const response = await apiClient.delete(`/admin/smart-factory-log/schedules/${companyCode}`);
+  return response.data;
+}
+
+export async function runScheduleNow(companyCode: string): Promise<{
+  success: boolean;
+  data: { total: number; sent: number; skipped: number };
+}> {
+  const response = await apiClient.post(`/admin/smart-factory-log/schedules/${companyCode}/run-now`);
+  return response.data;
+}
+
+export async function getTodayPlan(): Promise<{ success: boolean; data: TodayPlanEntry[] }> {
+  const response = await apiClient.get("/admin/smart-factory-log/schedules/today-plan");
+  return response.data;
+}
+
+export async function getHolidays(): Promise<{ success: boolean; data: SmartFactoryHoliday[] }> {
+  const response = await apiClient.get("/admin/smart-factory-log/holidays");
+  return response.data;
+}
+
+export async function addHoliday(holidayDate: string, holidayName: string): Promise<{ success: boolean }> {
+  const response = await apiClient.post("/admin/smart-factory-log/holidays", { holidayDate, holidayName });
+  return response.data;
+}
+
+export async function deleteHoliday(id: number): Promise<{ success: boolean }> {
+  const response = await apiClient.delete(`/admin/smart-factory-log/holidays/${id}`);
+  return response.data;
+}
+
+// ─── API 키 관리 ───
+
+export interface ApiKeyEntry {
+  companyCode: string;
+  companyName: string;
+  hasDbKey: boolean;
+  dbKey: string | null;
+  hasEnvKey: boolean;
+}
+
+export async function getApiKeys(): Promise<{ success: boolean; data: ApiKeyEntry[] }> {
+  const response = await apiClient.get("/admin/smart-factory-log/api-keys");
+  return response.data;
+}
+
+export async function saveApiKey(companyCode: string, apiKey: string): Promise<{ success: boolean }> {
+  const response = await apiClient.post("/admin/smart-factory-log/api-keys", { companyCode, apiKey });
+  return response.data;
+}
+
+export async function deleteApiKey(companyCode: string): Promise<{ success: boolean }> {
+  const response = await apiClient.delete(`/admin/smart-factory-log/api-keys/${companyCode}`);
+  return response.data;
+}
+
+// ─── 즉시 전송 ───
+
+export interface CompanyUser {
+  user_id: string;
+  user_name: string;
+  dept_name: string | null;
+}
+
+export async function getCompanyUsers(companyCode: string): Promise<{ success: boolean; data: CompanyUser[] }> {
+  const response = await apiClient.get(`/admin/smart-factory-log/users/${companyCode}`);
+  return response.data;
+}
+
+export async function sendNow(params: {
+  companyCode: string;
+  userIds: string[];
+  timeStart?: string;
+  timeEnd?: string;
+}): Promise<{ success: boolean; data: { total: number }; message: string }> {
+  const response = await apiClient.post("/admin/smart-factory-log/send-now", params);
+  return response.data;
+}
diff --git a/frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailComponent.tsx b/frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailComponent.tsx
index 2465cb80..d6ace35f 100644
--- a/frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailComponent.tsx
+++ b/frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailComponent.tsx
@@ -56,6 +56,141 @@ interface WorkResultRow {
   group_completed_at: string | null;
   inspection_method: string | null;
   unit: string | null;
+  inspection_code?: string | null;
+  judgment_criteria?: string | null;
+}
+
+// ========================================
+// 입력 UI 타입 해석
+// ========================================
+//
+// 1순위: inspection_standard.judgment_criteria (CAT_JC_01~04)
+//   - CAT_JC_01: 수치(범위)    → "number"   (숫자 키패드)
+//   - CAT_JC_02: 텍스트입력     → "text"     (텍스트 입력)
+//   - CAT_JC_03: O/X           → "checkbox" (큰 토글 버튼)
+//   - CAT_JC_04: 선택형         → "select"   (선택 버튼)
+//
+// 2순위: detail_type 폴백 (inspection_code가 없거나 judgment_criteria가 비어있을 때)
+type ResolvedInputType = "number" | "text" | "checkbox" | "select";
+
+function resolveInputType(item: {
+  judgment_criteria?: string | null;
+  detail_type?: string | null;
+  input_type?: string | null;
+}): ResolvedInputType {
+  // 1순위: judgment_criteria
+  if (item.judgment_criteria) {
+    switch (item.judgment_criteria) {
+      case "CAT_JC_01":
+        return "number";
+      case "CAT_JC_02":
+        return "text";
+      case "CAT_JC_03":
+        return "checkbox";
+      case "CAT_JC_04":
+        return "select";
+    }
+  }
+  // 2순위: detail_type 폴백
+  switch (item.detail_type) {
+    case "checklist":
+    case "check":
+    case "procedure":
+    case "equip_inspection":
+      return "checkbox";
+    case "inspection":
+    case "equip_condition":
+    case "production_result":
+      return "number";
+    case "input":
+      return "text";
+    case "lookup":
+      return "text";
+    default:
+      // 마지막 보루: 기존 input_type 값 유지 (number/checkbox가 들어있을 수 있음)
+      if (item.input_type === "number") return "number";
+      if (item.input_type === "checkbox") return "checkbox";
+      if (item.input_type === "select") return "select";
+      return "text";
+  }
+}
+
+/**
+ * judgment_criteria가 있는 경우 item을 "inspect" 라우터가 올바르게
+ * 분기하도록 detail_type/input_type을 정규화한다.
+ *
+ * CAT_JC_01(수치) → detail_type=inspect, input_type=numeric_range
+ * CAT_JC_02(텍스트) → detail_type=inspect, input_type=text
+ * CAT_JC_03(O/X)   → detail_type=inspect, input_type=ox
+ * CAT_JC_04(선택형) → detail_type=inspect, input_type=select
+ *
+ * judgment_criteria가 없으면 원본을 그대로 반환(detail_type 폴백).
+ */
+function normalizeByJudgmentCriteria(item: WorkResultRow): WorkResultRow {
+  if (!item.judgment_criteria) return item;
+  let inputType: string | null = null;
+  switch (item.judgment_criteria) {
+    case "CAT_JC_01":
+      inputType = "numeric_range";
+      break;
+    case "CAT_JC_02":
+      inputType = "text";
+      break;
+    case "CAT_JC_03":
+      inputType = "ox";
+      break;
+    case "CAT_JC_04":
+      inputType = "select";
+      break;
+    default:
+      return item;
+  }
+  return { ...item, detail_type: "inspect", input_type: inputType };
+}
+
+/**
+ * detail_type 폴백 정규화.
+ * DB에 실제로 들어있는 원본 detail_type 값(`checklist`, `equip_inspection`,
+ * `inspection`, `production_result`, `lookup`, `material_input` 등)을
+ * 기존 라우터가 알고 있는 canonical 값(`check`, `inspect`, `input`, `material`)으로
+ * 매핑한다.
+ *
+ * 이 단계는 judgment_criteria 정규화가 일어나지 않은 경우에만 영향을 준다.
+ */
+function normalizeByDetailType(item: WorkResultRow): WorkResultRow {
+  const dt = item.detail_type ?? "";
+  // 이미 canonical 타입 or inspect_* 레거시이면 그대로 둔다
+  if (
+    dt === "check" ||
+    dt === "input" ||
+    dt === "procedure" ||
+    dt === "material" ||
+    dt === "result" ||
+    dt === "info" ||
+    dt === "" ||
+    dt.startsWith("inspect")
+  ) {
+    return item;
+  }
+  switch (dt) {
+    // 토글(확인/미확인) — checklist/장비점검/절차류
+    case "checklist":
+    case "equip_inspection":
+      return { ...item, detail_type: "check" };
+    // 숫자 키패드 — 검사/장비상태/생산실적
+    case "inspection":
+    case "equip_condition":
+    case "production_result":
+      return { ...item, detail_type: "inspect", input_type: item.input_type || "numeric_range" };
+    // 텍스트 — 자유입력/조회
+    case "lookup":
+      return { ...item, detail_type: "input", input_type: item.input_type || "text" };
+    // 자재 투입 — BOM 자재 목록
+    case "material_input":
+      return { ...item, detail_type: "material" };
+    default:
+      return item;
+  }
 }
 
 interface GroupTimerState {
@@ -263,6 +398,185 @@ const COLORS = {
   kpiDefect: 'text-red-600',
 } as const;
 
+// ========================================
+// 숫자 키패드 모달 (체크리스트/자재투입 공용)
+// ========================================
+
+const NUMPAD_KEYS = [
+  { label: "7", action: "7" },
+  { label: "8", action: "8" },
+  { label: "9", action: "9" },
+  { label: "\u2190", action: "backspace" },
+  { label: "4", action: "4" },
+  { label: "5", action: "5" },
+  { label: "6", action: "6" },
+  { label: "C", action: "clear" },
+  { label: "1", action: "1" },
+  { label: "2", action: "2" },
+  { label: "3", action: "3" },
+  { label: ".", action: "dot" },
+];
+
+interface NumericKeypadModalProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: (value: string) => void;
+  title?: string;
+  unit?: string;
+  initialValue?: string;
+  lowerLimit?: number;
+  upperLimit?: number;
+}
+
+function NumericKeypadModal({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  unit,
+  initialValue,
+  lowerLimit,
+  upperLimit,
+}: NumericKeypadModalProps) {
+  const [value, setValue] = useState(initialValue || "0");
+  const hasRange = lowerLimit !== undefined && upperLimit !== undefined && !isNaN(lowerLimit) && !isNaN(upperLimit);
+
+  useEffect(() => {
+    if (open) {
+      setValue(initialValue || "0");
+    }
+  }, [open, initialValue]);
+
+  const handleKey = useCallback((action: string) => {
+    setValue((prev) => {
+      switch (action) {
+        case "backspace":
+          return prev.length <= 1 ? "0" : prev.slice(0, -1);
+        case "clear":
+          return "0";
+        case "dot":
+          return prev.includes(".") ? prev : prev + ".";
+        default: {
+          if (prev === "0" && action !== ".") return action;
+          return prev + action;
+        }
+      }
+    });
+  }, []);
+
+  const handleConfirm = () => {
+    const num = parseFloat(value);
+    if (isNaN(num)) return;
+    onConfirm(value);
+    onClose();
+  };
+
+  if (!open) return null;
+
+  const numValue = parseFloat(value);
+  const isOutOfRange = hasRange && !isNaN(numValue) && (numValue < lowerLimit! || numValue > upperLimit!);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+      <div className="relative bg-white w-[90%] max-w-[360px] rounded-2xl shadow-2xl z-10 overflow-hidden">
+        {/* Header */}
+        <div
+          className="flex items-center justify-between px-4 py-3"
+          style={{ background: "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)" }}
+        >
+          <span className="text-sm font-semibold text-white truncate">
+            {title || "숫자 입력"}
+          </span>
+          <button
+            onClick={onClose}
+            className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white hover:bg-white/30"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        <div className="p-4">
+          {/* Range indicator */}
+          {hasRange && (
+            <div className={cn(
+              "mb-3 text-center text-sm font-semibold px-3 py-2 rounded-lg",
+              isOutOfRange
+                ? "bg-red-50 text-red-600 border border-red-200"
+                : "bg-blue-50 text-blue-700 border border-blue-200"
+            )}>
+              기준: {lowerLimit} ~ {upperLimit}{unit ? ` ${unit}` : ""}
+            </div>
+          )}
+
+          {/* Display */}
+          <div className="relative mb-3">
+            <input
+              type="text"
+              readOnly
+              value={value === "0" ? "0" : value}
+              className={cn(
+                "w-full px-4 py-3 text-right text-3xl font-bold border-2 rounded-xl bg-gray-50",
+                isOutOfRange ? "border-red-300 text-red-600" : "border-gray-200 text-gray-900"
+              )}
+              style={{ fontVariantNumeric: "tabular-nums" }}
+            />
+            {unit && (
+              <span className="absolute right-14 top-1/2 -translate-y-1/2 text-gray-400 text-lg">{unit}</span>
+            )}
+          </div>
+
+          {/* Numpad grid */}
+          <div className="grid grid-cols-4 gap-2.5">
+            {NUMPAD_KEYS.map((key) => (
+              <button
+                key={key.action}
+                onClick={() => handleKey(key.action)}
+                className={`h-16 rounded-xl text-lg font-semibold active:scale-95 transition-all ${
+                  key.action === "backspace" || key.action === "clear"
+                    ? "bg-amber-100 text-amber-700 hover:bg-amber-200"
+                    : key.action === "dot"
+                    ? "bg-gray-200 text-gray-700 hover:bg-gray-300"
+                    : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                }`}
+                style={{ minWidth: 64, minHeight: 64 }}
+              >
+                {key.label}
+              </button>
+            ))}
+            {/* Bottom row: 0 (span 2) + Confirm (span 2) */}
+            <button
+              onClick={() => handleKey("0")}
+              className="col-span-2 h-16 rounded-xl text-lg font-semibold bg-gray-100 text-gray-900 hover:bg-gray-200 active:scale-95 transition-all"
+              style={{ minHeight: 64 }}
+            >
+              0
+            </button>
+            <button
+              onClick={handleConfirm}
+              disabled={isNaN(parseFloat(value))}
+              className={cn(
+                "col-span-2 h-16 rounded-xl text-lg font-bold text-white active:scale-95 transition-all",
+                isNaN(parseFloat(value)) && "opacity-40 cursor-not-allowed"
+              )}
+              style={{
+                minHeight: 64,
+                background: isNaN(parseFloat(value))
+                  ? "#9ca3af"
+                  : isOutOfRange
+                  ? "linear-gradient(135deg, #f87171 0%, #dc2626 100%)"
+                  : "linear-gradient(135deg, #10b981 0%, #059669 100%)",
+              }}
+            >
+              {isOutOfRange ? "확인 (범위 외)" : "확인"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 // ========================================
 // Props
 // ========================================
@@ -358,16 +672,24 @@ export function PopWorkDetailComponent({
     try {
       setLoading(true);
       const [resultRes, processRes] = await Promise.all([
-        dataApi.getTableData("process_work_result", {
-          size: 500,
-          filters: { work_order_process_id: workOrderProcessId },
-        }),
+        // POP 전용 API: inspection_standard.judgment_criteria 조인 포함
+        apiClient
+          .get(`/pop/production/checklist-items/${workOrderProcessId}`)
+          .then((res) => ({ data: (res.data?.data ?? []) as WorkResultRow[] }))
+          .catch(async () => {
+            // 폴백: 전용 API가 없는 환경에서는 기존 일반 조회 사용
+            const fb = await dataApi.getTableData("process_work_result", {
+              size: 500,
+              filters: { work_order_process_id: workOrderProcessId },
+            });
+            return { data: (fb.data ?? []) as unknown as WorkResultRow[] };
+          }),
         dataApi.getTableData("work_order_process", {
           size: 1,
           filters: { id: workOrderProcessId },
         }),
       ]);
-      setAllResults((resultRes.data ?? []) as unknown as WorkResultRow[]);
+      setAllResults(resultRes.data);
       const proc = (processRes.data?.[0] ?? null) as ProcessTimerData | null;
       setProcessData(proc);
       if (proc) {
@@ -1348,7 +1670,7 @@ interface BatchHistoryItem {
   changed_by: string | null;
 }
 
-const IMPLEMENTED_SECTIONS = new Set<ResultSectionType>(["total-qty", "good-defect", "defect-types", "note", "plc-data"]);
+const IMPLEMENTED_SECTIONS = new Set<ResultSectionType>(["total-qty", "good-defect", "defect-types", "note", "plc-data", "material-input"]);
 
 const SECTION_LABELS: Record<ResultSectionType, string> = {
   "total-qty": "생산수량",
@@ -1754,6 +2076,14 @@ function ResultPanel({
             />
           ))}
 
+        {/* 자재 투입 섹션 */}
+        {enabledSections.some((s) => s.type === "material-input") && (
+          <MaterialInputSection
+            workOrderProcessId={workOrderProcessId}
+            isConfirmed={isConfirmed}
+          />
+        )}
+
         {/* 미구현 섹션 플레이스홀더 (순서 보존) */}
         {!isConfirmed && enabledSections
           .filter((s) => !IMPLEMENTED_SECTIONS.has(s.type))
@@ -2164,6 +2494,356 @@ function InfoBar({ fields, parentRow, processName }: InfoBarProps) {
   );
 }
 
+// ========================================
+// 자재 투입 섹션
+// ========================================
+
+interface BomMaterial {
+  id: string;
+  child_item_id: string;
+  child_item_code: string;
+  child_item_name: string;
+  bom_qty: number;
+  unit: string;
+  process_type: string;
+  loss_rate: number;
+  required_qty: number;
+  input_qty: number;
+}
+
+interface MaterialInputRecord {
+  id: string;
+  item_code: string;
+  item_name: string;
+  input_qty: string;
+  unit: string;
+  remark: string | null;
+  recorded_by: string | null;
+  recorded_at: string | null;
+}
+
+// === 자재 수량 입력 (터치 키패드) ===
+interface MaterialQtyInputProps {
+  materialId: string;
+  materialName?: string;
+  unit: string;
+  requiredQty: number;
+  value: string;
+  isConfirmed: boolean;
+  onChange: (val: string) => void;
+}
+
+function MaterialQtyInput({
+  materialId: _materialId,
+  materialName,
+  unit,
+  requiredQty,
+  value,
+  isConfirmed,
+  onChange,
+}: MaterialQtyInputProps) {
+  const [keypadOpen, setKeypadOpen] = useState(false);
+
+  if (isConfirmed) {
+    return (
+      <div className="flex items-center justify-center gap-1.5">
+        <span className="text-base font-bold text-gray-700">{value || "-"}</span>
+        <span className="text-xs text-gray-400">{unit}</span>
+      </div>
+    );
+  }
+
+  // ±20% 범위
+  const lower = requiredQty * 0.8;
+  const upper = requiredQty * 1.2;
+
+  return (
+    <div className="flex items-center justify-center gap-1.5">
+      <button
+        type="button"
+        className="h-14 w-28 rounded-xl border-2 border-gray-200 px-3 text-center text-lg font-bold text-gray-900 transition-colors hover:border-blue-400 active:scale-95"
+        onClick={() => setKeypadOpen(true)}
+      >
+        {value || <span className="text-gray-300">0</span>}
+      </button>
+      <span className="text-xs text-gray-400">{unit}</span>
+      <NumericKeypadModal
+        open={keypadOpen}
+        onClose={() => setKeypadOpen(false)}
+        onConfirm={(val) => onChange(val)}
+        title={materialName || "자재 투입"}
+        unit={unit}
+        initialValue={value || ""}
+        lowerLimit={lower}
+        upperLimit={upper}
+      />
+    </div>
+  );
+}
+
+interface MaterialInputSectionProps {
+  workOrderProcessId: string;
+  isConfirmed: boolean;
+}
+
+function MaterialInputSection({ workOrderProcessId, isConfirmed }: MaterialInputSectionProps) {
+  const [materials, setMaterials] = useState<BomMaterial[]>([]);
+  const [inputValues, setInputValues] = useState<Record<string, string>>({});
+  const [existingInputs, setExistingInputs] = useState<MaterialInputRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  // BOM 자재 목록 + 기존 투입 기록 로드
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [bomRes, inputsRes] = await Promise.all([
+        apiClient.get(`/pop/production/bom-materials/${workOrderProcessId}`),
+        apiClient.get(`/pop/production/material-inputs/${workOrderProcessId}`),
+      ]);
+
+      const bomMaterials: BomMaterial[] = bomRes.data?.data?.materials ?? [];
+      setMaterials(bomMaterials);
+
+      const inputs: MaterialInputRecord[] = inputsRes.data?.data ?? [];
+      setExistingInputs(inputs);
+
+      // 기존 투입값을 inputValues에 반영 (같은 자재의 투입 합산)
+      const existingMap: Record<string, number> = {};
+      for (const inp of inputs) {
+        const key = inp.item_code || inp.item_name;
+        existingMap[key] = (existingMap[key] || 0) + (parseFloat(inp.input_qty) || 0);
+      }
+
+      const initialValues: Record<string, string> = {};
+      for (const mat of bomMaterials) {
+        const existing = existingMap[mat.child_item_code] || existingMap[mat.child_item_name];
+        initialValues[mat.id] = existing ? String(existing) : "";
+      }
+      setInputValues(initialValues);
+    } catch {
+      // 에러 시 빈 상태 유지
+    } finally {
+      setLoading(false);
+    }
+  }, [workOrderProcessId]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  const updateInputValue = (materialId: string, value: string) => {
+    setInputValues((prev) => ({ ...prev, [materialId]: value }));
+  };
+
+  // 기준 범위 판정: lower_limit~upper_limit이 있으면 사용, 없으면 +/-20%
+  const getStatus = (mat: BomMaterial, inputVal: string): { label: string; color: string } => {
+    const val = parseFloat(inputVal);
+    if (!inputVal || isNaN(val)) return { label: "", color: "" };
+
+    const required = mat.required_qty;
+    if (required <= 0) return { label: "기준 내", color: "text-green-600" };
+
+    const lowerBound = required * 0.8;
+    const upperBound = required * 1.2;
+
+    if (val >= lowerBound && val <= upperBound) {
+      return { label: "기준 내", color: "text-green-600" };
+    } else if (val < lowerBound) {
+      return { label: "기준 미달", color: "text-amber-600" };
+    } else {
+      return { label: "기준 초과", color: "text-amber-600" };
+    }
+  };
+
+  const handleSave = async () => {
+    const inputs = materials
+      .filter((mat) => {
+        const val = parseFloat(inputValues[mat.id] || "");
+        return !isNaN(val) && val > 0;
+      })
+      .map((mat) => ({
+        child_item_id: mat.child_item_id,
+        child_item_code: mat.child_item_code,
+        child_item_name: mat.child_item_name,
+        input_qty: parseFloat(inputValues[mat.id]),
+        unit: mat.unit,
+        bom_detail_id: mat.id,
+        required_qty: mat.required_qty,
+      }));
+
+    if (inputs.length === 0) {
+      toast.error("투입 수량을 입력해주세요.");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const res = await apiClient.post("/pop/production/material-input", {
+        work_order_process_id: workOrderProcessId,
+        inputs,
+      });
+      if (res.data?.success) {
+        toast.success(res.data.message || "자재 투입이 저장되었습니다.");
+        loadData(); // 새로고침
+      } else {
+        toast.error(res.data?.message || "자재 투입 저장에 실패했습니다.");
+      }
+    } catch {
+      toast.error("자재 투입 저장 중 오류가 발생했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div>
+        <div className="mb-4 text-xs font-semibold uppercase tracking-widest text-gray-400">자재 투입</div>
+        <div className="flex items-center gap-2 py-4 text-sm text-gray-400">
+          <Loader2 className="h-4 w-4 animate-spin" />불러오는 중...
+        </div>
+      </div>
+    );
+  }
+
+  if (materials.length === 0) {
+    return (
+      <div>
+        <div className="mb-4 text-xs font-semibold uppercase tracking-widest text-gray-400">자재 투입</div>
+        <div className="flex items-center gap-3 rounded-xl border border-dashed border-gray-200 p-4">
+          <Package className="h-5 w-5 shrink-0 text-gray-400" />
+          <p className="text-sm text-gray-400">BOM 자재 정보가 없습니다.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-4 text-xs font-semibold uppercase tracking-widest text-gray-400">자재 투입</div>
+
+      {/* 자재 목록 테이블 */}
+      <div className="overflow-hidden rounded-xl border border-gray-200 bg-white">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-gray-100 bg-gray-50 text-xs uppercase tracking-wider text-gray-400">
+              <th className="px-4 py-3 text-left font-medium">품목명</th>
+              <th className="px-4 py-3 text-right font-medium">기준량</th>
+              <th className="px-4 py-3 text-center font-medium">실제투입</th>
+              <th className="px-4 py-3 text-center font-medium">상태</th>
+            </tr>
+          </thead>
+          <tbody>
+            {materials.map((mat) => {
+              const status = getStatus(mat, inputValues[mat.id] || "");
+              return (
+                <tr key={mat.id} className="border-t border-gray-50">
+                  <td className="px-4 py-3">
+                    <div className="font-medium text-gray-900">{mat.child_item_name || mat.child_item_code}</div>
+                    {mat.child_item_code && mat.child_item_name && (
+                      <div className="text-xs text-gray-400">{mat.child_item_code}</div>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <span className="font-semibold text-gray-700">{mat.required_qty}</span>
+                    <span className="ml-1 text-xs text-gray-400">{mat.unit || "EA"}</span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <MaterialQtyInput
+                      materialId={mat.id}
+                      materialName={mat.child_item_name || mat.child_item_code}
+                      unit={mat.unit || "EA"}
+                      requiredQty={mat.required_qty}
+                      value={inputValues[mat.id] || ""}
+                      isConfirmed={isConfirmed}
+                      onChange={(val) => updateInputValue(mat.id, val)}
+                    />
+                  </td>
+                  <td className="px-4 py-3 text-center">
+                    {status.label && (
+                      <span className={cn("text-xs font-semibold", status.color)}>
+                        {status.color === "text-green-600" ? (
+                          <span className="inline-flex items-center gap-1">
+                            <CheckCircle2 className="h-3.5 w-3.5" />
+                            {status.label}
+                          </span>
+                        ) : (
+                          <span className="inline-flex items-center gap-1">
+                            <AlertCircle className="h-3.5 w-3.5" />
+                            {status.label}
+                          </span>
+                        )}
+                      </span>
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      {/* 저장 버튼 */}
+      {!isConfirmed && (
+        <div className="mt-4 flex items-center gap-3">
+          <button
+            className={cn(
+              "flex h-14 items-center gap-2 rounded-xl bg-gray-900 px-8 text-sm font-semibold text-white transition-colors hover:bg-gray-800",
+              saving && "cursor-not-allowed opacity-50"
+            )}
+            onClick={handleSave}
+            disabled={saving}
+          >
+            {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
+            투입 기록 저장
+          </button>
+        </div>
+      )}
+
+      {/* 기존 투입 이력 */}
+      {existingInputs.length > 0 && (
+        <div className="mt-6">
+          <div className="mb-3 text-xs font-semibold uppercase tracking-widest text-gray-400">투입 이력</div>
+          <div className="overflow-hidden rounded-xl border border-gray-200 bg-white">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-gray-100 bg-gray-50 text-xs uppercase tracking-wider text-gray-400">
+                  <th className="px-4 py-2 text-left font-medium">품목</th>
+                  <th className="px-4 py-2 text-right font-medium">투입량</th>
+                  <th className="px-4 py-2 text-right font-medium">시각</th>
+                </tr>
+              </thead>
+              <tbody>
+                {existingInputs.map((inp) => (
+                  <tr key={inp.id} className="border-t border-gray-50">
+                    <td className="px-4 py-2.5 font-medium text-gray-900">
+                      {inp.item_name || inp.item_code}
+                    </td>
+                    <td className="px-4 py-2.5 text-right font-semibold text-gray-700">
+                      {inp.input_qty} <span className="text-xs text-gray-400">{inp.unit}</span>
+                    </td>
+                    <td className="px-4 py-2.5 text-right text-gray-400">
+                      {inp.recorded_at
+                        ? new Date(inp.recorded_at).toLocaleString("ko-KR", {
+                            month: "2-digit",
+                            day: "2-digit",
+                            hour: "2-digit",
+                            minute: "2-digit",
+                          })
+                        : "-"}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 // ========================================
 // KPI 카드 (항상 표시)
 // ========================================
@@ -2537,8 +3217,11 @@ interface ChecklistItemProps {
   onSave: (rowId: string, resultValue: string, isPassed: string | null, newStatus: string) => void;
 }
 
-function ChecklistItem({ item, saving, disabled, onSave }: ChecklistItemProps) {
+function ChecklistItem({ item: rawItem, saving, disabled, onSave }: ChecklistItemProps) {
   const isDisabled = disabled || saving;
+  // 1순위: judgment_criteria 기반 정규화 (inspection_standard 조인 결과)
+  // 2순위: detail_type 폴백 정규화 (원본 DB 값 → canonical 라우터 값)
+  const item = normalizeByDetailType(normalizeByJudgmentCriteria(rawItem));
   const dt = item.detail_type ?? "";
 
   // "inspect_numeric" 등 레거시 형식 → "inspect"로 정규화, 접미사를 input_type 폴백으로 사용
@@ -2582,8 +3265,10 @@ function ChecklistItem({ item, saving, disabled, onSave }: ChecklistItemProps) {
 // 체크리스트 입력부 (우측 영역 전용 - 분할 레이아웃)
 // ========================================
 
-function ChecklistItemInput({ item, saving, disabled, onSave }: ChecklistItemProps) {
+function ChecklistItemInput({ item: rawItem, saving, disabled, onSave }: ChecklistItemProps) {
   const isDisabled = disabled || saving;
+  // 1순위: judgment_criteria, 2순위: detail_type 폴백
+  const item = normalizeByDetailType(normalizeByJudgmentCriteria(rawItem));
   const dt = item.detail_type ?? "";
 
   if (dt.startsWith("inspect")) {
@@ -2629,43 +3314,53 @@ function InspectInputRouter(props: { item: WorkResultRow; disabled: boolean; sav
   }
 }
 
-// === 수치 입력 (우측 전용) ===
+// === 수치 입력 (우측 전용) — 터치 키패드 모달 ===
 function InspectNumericInput({ item, disabled, saving, onSave }: { item: WorkResultRow; disabled: boolean; saving: boolean; onSave: ChecklistItemProps["onSave"] }) {
-  const [inputVal, setInputVal] = useState(item.result_value ?? "");
+  const [keypadOpen, setKeypadOpen] = useState(false);
   const lower = parseFloat(item.lower_limit ?? "");
   const upper = parseFloat(item.upper_limit ?? "");
   const hasRange = !isNaN(lower) && !isNaN(upper);
 
-  const handleSave = () => {
-    if (!inputVal || disabled) return;
-    const numVal = parseFloat(inputVal);
+  const handleConfirm = (val: string) => {
+    const numVal = parseFloat(val);
     let passed: string | null = null;
     if (hasRange) passed = numVal >= lower && numVal <= upper ? "Y" : "N";
-    onSave(item.id, inputVal, passed, "completed");
+    onSave(item.id, val, passed, "completed");
   };
 
+  const displayValue = item.result_value ?? "";
+
   return (
     <>
-      <input
-        type="number"
-        className="rounded-xl border-2 border-gray-200 text-center font-bold transition-colors focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-100"
-        style={{ width: 140, height: 48, fontSize: 22, color: item.is_passed === "Y" ? '#16a34a' : item.is_passed === "N" ? '#dc2626' : '#1f2937' }}
-        value={inputVal}
-        onChange={(e) => setInputVal(e.target.value)}
-        onBlur={handleSave}
+      <button
+        className={cn(
+          "rounded-xl border-2 text-center font-bold transition-colors",
+          disabled ? "bg-gray-50 border-gray-100" : "bg-white border-gray-200 hover:border-blue-400 active:scale-95",
+        )}
+        style={{
+          width: 140, height: 56, fontSize: 22,
+          color: item.is_passed === "Y" ? '#16a34a' : item.is_passed === "N" ? '#dc2626' : '#1f2937',
+        }}
+        onClick={() => !disabled && setKeypadOpen(true)}
         disabled={disabled}
-        placeholder="입력"
-      />
+      >
+        {displayValue || <span className="text-gray-300">입력</span>}
+      </button>
       {item.unit && <span className="text-gray-400" style={{ fontSize: 16 }}>{item.unit}</span>}
       {item.is_passed === "Y" && !saving && <span className="rounded-lg bg-green-100 px-3 py-1.5 font-bold text-green-700" style={{ fontSize: 15 }}>PASS</span>}
       {item.is_passed === "N" && !saving && <span className="rounded-lg bg-red-100 px-3 py-1.5 font-bold text-red-700" style={{ fontSize: 15 }}>FAIL</span>}
       {item.status === "completed" && item.is_passed === null && !saving && <span className="font-bold text-green-600" style={{ fontSize: 15 }}>완료</span>}
-      {!item.status || (item.status !== "completed" && !saving) ? (
-        <GlossyButton variant="blue" onClick={handleSave} disabled={disabled || !inputVal} style={{ minHeight: 48, minWidth: 80, fontSize: 16 }}>
-          저장
-        </GlossyButton>
-      ) : null}
       {saving && <Loader2 className="h-5 w-5 animate-spin text-gray-400" />}
+      <NumericKeypadModal
+        open={keypadOpen}
+        onClose={() => setKeypadOpen(false)}
+        onConfirm={handleConfirm}
+        title={item.detail_label || item.detail_content}
+        unit={item.unit ?? undefined}
+        initialValue={displayValue}
+        lowerLimit={hasRange ? lower : undefined}
+        upperLimit={hasRange ? upper : undefined}
+      />
     </>
   );
 }
@@ -2734,7 +3429,10 @@ function InspectSelectInput({ item, disabled, saving, onSave }: { item: WorkResu
           variant={currentValue === opt ? "blue" : "gray"}
           onClick={() => handleSelect(opt)}
           disabled={disabled}
-          style={{ minHeight: 52, minWidth: 100, fontSize: 16 }}
+          style={{
+            minHeight: 56, minWidth: 100, fontSize: 16,
+            ...(currentValue === opt ? { boxShadow: '0 0 0 3px #3b82f6, 0 4px 12px rgba(59,130,246,0.3), inset 0 1px 0 rgba(255,255,255,0.4)' } : {}),
+          }}
         >
           {opt}
         </GlossyButton>
@@ -2758,7 +3456,7 @@ function InspectTextInput({ item, disabled, saving, onSave }: { item: WorkResult
     <>
       <input
         className="flex-1 rounded-xl border-2 border-gray-200 px-3 transition-colors focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-100"
-        style={{ height: 48, fontSize: 16 }}
+        style={{ height: 56, fontSize: 16 }}
         value={inputVal}
         onChange={(e) => setInputVal(e.target.value)}
         disabled={disabled}
@@ -2768,7 +3466,7 @@ function InspectTextInput({ item, disabled, saving, onSave }: { item: WorkResult
         variant={judged === "Y" ? "green" : "gray"}
         onClick={() => handleJudge("Y")}
         disabled={disabled}
-        style={{ minHeight: 48, minWidth: 80, fontSize: 15 }}
+        style={{ minHeight: 56, minWidth: 90, fontSize: 16 }}
       >
         합격
       </GlossyButton>
@@ -2776,7 +3474,7 @@ function InspectTextInput({ item, disabled, saving, onSave }: { item: WorkResult
         variant={judged === "N" ? "red" : "gray"}
         onClick={() => handleJudge("N")}
         disabled={disabled}
-        style={{ minHeight: 48, minWidth: 80, fontSize: 15 }}
+        style={{ minHeight: 56, minWidth: 90, fontSize: 16 }}
       >
         불합격
       </GlossyButton>
@@ -2785,40 +3483,92 @@ function InspectTextInput({ item, disabled, saving, onSave }: { item: WorkResult
   );
 }
 
-// === 체크박스 (우측 전용) ===
+// === 체크박스 (우측 전용) — 큰 터치 토글 ===
 function CheckInputOnly({ item, disabled, saving, onSave }: { item: WorkResultRow; disabled: boolean; saving: boolean; onSave: ChecklistItemProps["onSave"] }) {
   const checked = item.result_value === "Y";
   return (
     <>
-      {item.status === "completed" && <span className="font-bold text-green-600" style={{ fontSize: 16 }}>완료</span>}
-      <Checkbox
-        checked={checked}
-        disabled={disabled}
-        className="h-8 w-8"
-        onCheckedChange={(v) => {
-          const val = v ? "Y" : "N";
-          onSave(item.id, val, v ? "Y" : "N", v ? "completed" : "pending");
+      <GlossyButton
+        variant={checked ? "green" : "gray"}
+        onClick={() => {
+          if (disabled) return;
+          onSave(item.id, "Y", "Y", "completed");
         }}
-      />
+        disabled={disabled}
+        style={{
+          minHeight: 56, minWidth: 110, fontSize: 18,
+          ...(checked ? { boxShadow: '0 0 0 3px #22c55e, 0 4px 12px rgba(34,197,94,0.3), inset 0 1px 0 rgba(255,255,255,0.4)' } : {}),
+        }}
+      >
+        <Check className="h-5 w-5" /> 확인
+      </GlossyButton>
+      <GlossyButton
+        variant={!checked && item.result_value === "N" ? "red" : "gray"}
+        onClick={() => {
+          if (disabled) return;
+          onSave(item.id, "N", "N", "pending");
+        }}
+        disabled={disabled}
+        style={{
+          minHeight: 56, minWidth: 110, fontSize: 18,
+          ...(!checked && item.result_value === "N" ? { boxShadow: '0 0 0 3px #ef4444, 0 4px 12px rgba(239,68,68,0.3), inset 0 1px 0 rgba(255,255,255,0.4)' } : {}),
+        }}
+      >
+        <X className="h-5 w-5" /> 미확인
+      </GlossyButton>
       {saving && <Loader2 className="h-5 w-5 animate-spin text-gray-400" />}
     </>
   );
 }
 
-// === 자유입력 (우측 전용) ===
+// === 자유입력 (우측 전용) — number는 키패드, text는 큰 입력칸 ===
 function InputOnlyItem({ item, disabled, saving, onSave }: { item: WorkResultRow; disabled: boolean; saving: boolean; onSave: ChecklistItemProps["onSave"] }) {
+  const isNumber = item.input_type === "number";
   const [inputVal, setInputVal] = useState(item.result_value ?? "");
-  const inputType = item.input_type === "number" ? "number" : "text";
+  const [keypadOpen, setKeypadOpen] = useState(false);
+
   const handleBlur = () => {
     if (!inputVal || disabled) return;
     onSave(item.id, inputVal, null, "completed");
   };
+
+  if (isNumber) {
+    return (
+      <>
+        <button
+          className={cn(
+            "flex-1 rounded-xl border-2 text-center font-semibold transition-colors",
+            disabled ? "bg-gray-50 border-gray-100" : "bg-white border-gray-200 hover:border-blue-400 active:scale-95",
+          )}
+          style={{ height: 56, fontSize: 18, color: '#1f2937' }}
+          onClick={() => !disabled && setKeypadOpen(true)}
+          disabled={disabled}
+        >
+          {inputVal || <span className="text-gray-300">값 입력</span>}
+        </button>
+        {item.status === "completed" && !saving && <span className="font-bold text-green-600" style={{ fontSize: 15 }}>완료</span>}
+        {saving && <Loader2 className="h-5 w-5 animate-spin text-gray-400" />}
+        <NumericKeypadModal
+          open={keypadOpen}
+          onClose={() => setKeypadOpen(false)}
+          onConfirm={(val) => {
+            setInputVal(val);
+            onSave(item.id, val, null, "completed");
+          }}
+          title={item.detail_label || item.detail_content}
+          unit={item.unit ?? undefined}
+          initialValue={inputVal}
+        />
+      </>
+    );
+  }
+
   return (
     <>
       <input
-        type={inputType}
+        type="text"
         className="flex-1 rounded-xl border-2 border-gray-200 px-3 text-center font-semibold transition-colors focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-100"
-        style={{ height: 48, fontSize: 16 }}
+        style={{ height: 56, fontSize: 16 }}
         value={inputVal}
         onChange={(e) => setInputVal(e.target.value)}
         onBlur={handleBlur}
@@ -2830,22 +3580,26 @@ function InputOnlyItem({ item, disabled, saving, onSave }: { item: WorkResultRow
   );
 }
 
-// === 절차 확인 (우측 전용) ===
+// === 절차 확인 (우측 전용) — 큰 터치 토글 ===
 function ProcedureInputOnly({ item, disabled, saving, onSave }: { item: WorkResultRow; disabled: boolean; saving: boolean; onSave: ChecklistItemProps["onSave"] }) {
   const checked = item.result_value === "Y";
   return (
     <>
-      <Checkbox
-        checked={checked}
-        disabled={disabled}
-        className="h-5 w-5"
-        onCheckedChange={(v) => {
-          onSave(item.id, v ? "Y" : "N", null, v ? "completed" : "pending");
+      <GlossyButton
+        variant={checked ? "green" : "gray"}
+        onClick={() => {
+          if (disabled) return;
+          onSave(item.id, checked ? "N" : "Y", null, checked ? "pending" : "completed");
         }}
-      />
-      <span className="text-gray-600" style={{ fontSize: 15 }}>확인</span>
+        disabled={disabled}
+        style={{
+          minHeight: 56, minWidth: 130, fontSize: 18,
+          ...(checked ? { boxShadow: '0 0 0 3px #22c55e, 0 4px 12px rgba(34,197,94,0.3), inset 0 1px 0 rgba(255,255,255,0.4)' } : {}),
+        }}
+      >
+        <Check className="h-5 w-5" /> {checked ? "확인됨" : "확인"}
+      </GlossyButton>
       {saving && <Loader2 className="h-5 w-5 animate-spin text-gray-400" />}
-      {item.status === "completed" && !saving && <span className="font-bold text-green-600" style={{ fontSize: 15 }}>완료</span>}
     </>
   );
 }
@@ -2913,20 +3667,42 @@ function ResultInputOnly({ item, disabled, saving, onSave }: { item: WorkResultR
 function CheckItem({ item, disabled, saving, onSave }: { item: WorkResultRow; disabled: boolean; saving: boolean; onSave: ChecklistItemProps["onSave"] }) {
   const checked = item.result_value === "Y";
   return (
-    <div className={cn("flex items-center gap-3 rounded-lg border px-4 py-3", item.status === "completed" && "border-green-200 bg-green-50")}>
-      <Checkbox
-        checked={checked}
-        disabled={disabled}
-        className="h-8 w-8"
-        onCheckedChange={(v) => {
-          const val = v ? "Y" : "N";
-          onSave(item.id, val, v ? "Y" : "N", v ? "completed" : "pending");
-        }}
-      />
-      <span className="flex-1 text-sm">{item.detail_label || item.detail_content}</span>
-      {item.is_required === "Y" && <span className="text-xs font-semibold text-destructive">필수</span>}
-      {saving && <Loader2 className="h-4 w-4 animate-spin" />}
-      {item.status === "completed" && !saving && <Badge variant="outline" className="text-xs text-green-600">완료</Badge>}
+    <div className={cn("rounded-lg border px-4 py-3", item.status === "completed" && "border-green-200 bg-green-50")}>
+      <div className="mb-2 flex items-center gap-2">
+        <span className="flex-1 text-sm font-medium">{item.detail_label || item.detail_content}</span>
+        {item.is_required === "Y" && <span className="text-xs font-semibold text-destructive">필수</span>}
+        {saving && <Loader2 className="h-4 w-4 animate-spin" />}
+      </div>
+      <div className="flex items-center gap-3">
+        <GlossyButton
+          variant={checked ? "green" : "gray"}
+          onClick={() => {
+            if (disabled) return;
+            onSave(item.id, "Y", "Y", "completed");
+          }}
+          disabled={disabled}
+          style={{
+            minHeight: 56, minWidth: 130, fontSize: 18,
+            ...(checked ? { boxShadow: '0 0 0 3px #22c55e, 0 4px 12px rgba(34,197,94,0.3), inset 0 1px 0 rgba(255,255,255,0.4)' } : {}),
+          }}
+        >
+          <Check className="h-5 w-5" /> 확인
+        </GlossyButton>
+        <GlossyButton
+          variant={!checked && item.result_value === "N" ? "red" : "gray"}
+          onClick={() => {
+            if (disabled) return;
+            onSave(item.id, "N", "N", "pending");
+          }}
+          disabled={disabled}
+          style={{
+            minHeight: 56, minWidth: 130, fontSize: 18,
+            ...(!checked && item.result_value === "N" ? { boxShadow: '0 0 0 3px #ef4444, 0 4px 12px rgba(239,68,68,0.3), inset 0 1px 0 rgba(255,255,255,0.4)' } : {}),
+          }}
+        >
+          <X className="h-5 w-5" /> 미확인
+        </GlossyButton>
+      </div>
     </div>
   );
 }
@@ -2952,21 +3728,22 @@ function InspectRouter(props: { item: WorkResultRow; disabled: boolean; saving:
 // ===== inspect: 수치(범위) =====
 
 function InspectNumeric({ item, disabled, saving, onSave }: { item: WorkResultRow; disabled: boolean; saving: boolean; onSave: ChecklistItemProps["onSave"] }) {
-  const [inputVal, setInputVal] = useState(item.result_value ?? "");
+  const [keypadOpen, setKeypadOpen] = useState(false);
   const lower = parseFloat(item.lower_limit ?? "");
   const upper = parseFloat(item.upper_limit ?? "");
   const hasRange = !isNaN(lower) && !isNaN(upper);
 
-  const handleBlur = () => {
-    if (!inputVal || disabled) return;
-    const numVal = parseFloat(inputVal);
+  const handleConfirm = (val: string) => {
+    const numVal = parseFloat(val);
     let passed: string | null = null;
     if (hasRange) {
       passed = numVal >= lower && numVal <= upper ? "Y" : "N";
     }
-    onSave(item.id, inputVal, passed, "completed");
+    onSave(item.id, val, passed, "completed");
   };
 
+  const displayValue = item.result_value ?? "";
+
   return (
     <div className={cn("rounded-lg border px-4 py-3", item.is_passed === "Y" && "border-green-200 bg-green-50", item.is_passed === "N" && "border-red-200 bg-red-50")}>
       <div className="mb-2 flex items-center justify-between">
@@ -2985,12 +3762,32 @@ function InspectNumeric({ item, disabled, saving, onSave }: { item: WorkResultRo
         <div className="mb-2 text-xs text-muted-foreground">{item.inspection_method}</div>
       )}
       <div className="flex items-center gap-2.5">
-        <Input type="number" className="w-36" style={{ height: `${DESIGN.input.height}px`, fontSize: `${DESIGN.section.titleSize}px` }} value={inputVal} onChange={(e) => setInputVal(e.target.value)} onBlur={handleBlur} disabled={disabled} placeholder="측정값 입력" />
+        <button
+          className={cn(
+            "w-36 rounded-xl border-2 text-center font-bold transition-colors",
+            disabled ? "bg-gray-50 border-gray-100" : "bg-white border-gray-200 hover:border-blue-400 active:scale-95",
+          )}
+          style={{ height: 56, fontSize: 20, color: '#1f2937' }}
+          onClick={() => !disabled && setKeypadOpen(true)}
+          disabled={disabled}
+        >
+          {displayValue || <span className="text-gray-300">측정값</span>}
+        </button>
         {item.unit && <span className="text-xs text-muted-foreground">{item.unit}</span>}
         {saving && <Loader2 className="h-4 w-4 animate-spin" />}
         {item.is_passed === "Y" && !saving && <Badge variant="outline" className="text-xs text-green-600">합격</Badge>}
         {item.is_passed === "N" && !saving && <Badge variant="outline" className="text-xs text-red-600">불합격</Badge>}
       </div>
+      <NumericKeypadModal
+        open={keypadOpen}
+        onClose={() => setKeypadOpen(false)}
+        onConfirm={handleConfirm}
+        title={item.detail_label || item.detail_content}
+        unit={item.unit ?? undefined}
+        initialValue={displayValue}
+        lowerLimit={hasRange ? lower : undefined}
+        upperLimit={hasRange ? upper : undefined}
+      />
     </div>
   );
 }
@@ -3149,8 +3946,9 @@ function InspectText({ item, disabled, saving, onSave }: { item: WorkResultRow;
 // ========================================
 
 function InputItem({ item, disabled, saving, onSave }: { item: WorkResultRow; disabled: boolean; saving: boolean; onSave: ChecklistItemProps["onSave"] }) {
+  const isNumber = item.input_type === "number";
   const [inputVal, setInputVal] = useState(item.result_value ?? "");
-  const inputType = item.input_type === "number" ? "number" : "text";
+  const [keypadOpen, setKeypadOpen] = useState(false);
 
   const handleBlur = () => {
     if (!inputVal || disabled) return;
@@ -3161,7 +3959,34 @@ function InputItem({ item, disabled, saving, onSave }: { item: WorkResultRow; di
     <div className={cn("rounded-lg border px-4 py-3", item.status === "completed" && "border-green-200 bg-green-50")}>
       <div className="mb-2 text-sm font-medium">{item.detail_label || item.detail_content}</div>
       <div className="flex items-center gap-2.5">
-        <Input type={inputType} className="flex-1" style={{ height: `${DESIGN.input.height}px`, fontSize: `${DESIGN.section.titleSize}px` }} value={inputVal} onChange={(e) => setInputVal(e.target.value)} onBlur={handleBlur} disabled={disabled} placeholder="값 입력" />
+        {isNumber ? (
+          <>
+            <button
+              className={cn(
+                "flex-1 rounded-xl border-2 text-center font-bold transition-colors",
+                disabled ? "bg-gray-50 border-gray-100" : "bg-white border-gray-200 hover:border-blue-400 active:scale-95",
+              )}
+              style={{ height: 56, fontSize: 20, color: '#1f2937' }}
+              onClick={() => !disabled && setKeypadOpen(true)}
+              disabled={disabled}
+            >
+              {inputVal || <span className="text-gray-300">값 입력</span>}
+            </button>
+            <NumericKeypadModal
+              open={keypadOpen}
+              onClose={() => setKeypadOpen(false)}
+              onConfirm={(val) => {
+                setInputVal(val);
+                onSave(item.id, val, null, "completed");
+              }}
+              title={item.detail_label || item.detail_content}
+              unit={item.unit ?? undefined}
+              initialValue={inputVal}
+            />
+          </>
+        ) : (
+          <Input type="text" className="flex-1" style={{ height: 56, fontSize: `${DESIGN.section.titleSize}px` }} value={inputVal} onChange={(e) => setInputVal(e.target.value)} onBlur={handleBlur} disabled={disabled} placeholder="값 입력" />
+        )}
         {saving && <Loader2 className="h-4 w-4 animate-spin" />}
       </div>
     </div>
@@ -3184,15 +4009,20 @@ function ProcedureItem({ item, disabled, saving, onSave }: { item: WorkResultRow
         {item.is_required === "Y" && <span className="text-xs font-semibold text-destructive">필수</span>}
       </div>
       <div className="flex items-center gap-2.5 pl-9">
-        <Checkbox
-          checked={checked}
-          disabled={disabled}
-          className="h-8 w-8"
-          onCheckedChange={(v) => {
-            onSave(item.id, v ? "Y" : "N", null, v ? "completed" : "pending");
+        <GlossyButton
+          variant={checked ? "green" : "gray"}
+          onClick={() => {
+            if (disabled) return;
+            onSave(item.id, checked ? "N" : "Y", null, checked ? "pending" : "completed");
           }}
-        />
-        <span className="text-sm text-muted-foreground">확인</span>
+          disabled={disabled}
+          style={{
+            minHeight: 56, minWidth: 130, fontSize: 18,
+            ...(checked ? { boxShadow: '0 0 0 3px #22c55e, 0 4px 12px rgba(34,197,94,0.3), inset 0 1px 0 rgba(255,255,255,0.4)' } : {}),
+          }}
+        >
+          <Check className="h-5 w-5" /> {checked ? "확인됨" : "확인"}
+        </GlossyButton>
         {saving && <Loader2 className="h-4 w-4 animate-spin" />}
       </div>
     </div>
diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
index a6249af7..cbc58206 100644
--- a/frontend/next.config.mjs
+++ b/frontend/next.config.mjs
@@ -31,9 +31,17 @@ const nextConfig = {
     ];
   },
 
-  // 개발 환경에서 CORS 처리
+  // 캐시 및 CORS 헤더
   async headers() {
     return [
+      // HTML 페이지: 배포 후 즉시 반영되도록 캐시 금지
+      {
+        source: "/((?!_next/static|_next/image|favicon.ico).*)",
+        headers: [
+          { key: "Cache-Control", value: "no-cache, no-store, must-revalidate" },
+        ],
+      },
+      // API CORS
       {
         source: "/api/:path*",
         headers: [
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 03f29e02..4cdf2d22 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -107,7 +107,6 @@
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
-        "@playwright/test": "^1.58.2",
         "@tailwindcss/postcss": "^4",
         "@tanstack/react-query-devtools": "^5.86.0",
         "@types/jsbarcode": "^3.11.4",
@@ -119,7 +118,6 @@
         "eslint-config-next": "15.4.4",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-prettier": "^5.5.4",
-        "playwright": "^1.58.2",
         "prettier": "^3.6.2",
         "prettier-plugin-tailwindcss": "^0.6.14",
         "prisma": "^6.14.0",
@@ -272,7 +270,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -314,7 +311,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -348,7 +344,6 @@
       "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
       "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@dnd-kit/accessibility": "^3.1.1",
         "@dnd-kit/utilities": "^3.2.2",
@@ -1419,23 +1414,6 @@
         "url": "https://opencollective.com/pkgr"
       }
     },
-    "node_modules/@playwright/test": {
-      "version": "1.58.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
-      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
-      "devOptional": true,
-      "license": "Apache-2.0",
-      "peer": true,
-      "dependencies": {
-        "playwright": "1.58.2"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -3081,7 +3059,6 @@
       "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.4.0.tgz",
       "integrity": "sha512-k4iu1R6e5D54918V4sqmISUkI5OgTw3v7/sDRKEC632Wd5g2WBtUS5gyG63X0GJO/HZUj1tsjSXfyzwrUHZl1g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/react-reconciler": "^0.32.0",
@@ -3741,7 +3718,6 @@
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.6.tgz",
       "integrity": "sha512-gB1sljYjcobZKxjPbKSa31FUTyr+ROaBdoH+wSSs9Dk+yDCmMs+TkTV3PybRRVLC7ax7q0erJ9LvRWnMktnRAw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@tanstack/query-core": "5.90.6"
       },
@@ -3836,7 +3812,6 @@
       "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.27.2.tgz",
       "integrity": "sha512-ABL1N6eoxzDzC1bYvkMbvyexHacszsKdVPYqhl5GwHLOvpZcv9VE9QaKwDILTyz5voCA0lGcAAXZp+qnXOk5lQ==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -4180,7 +4155,6 @@
       "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.27.2.tgz",
       "integrity": "sha512-kaEg7BfiJPDQMKbjVIzEPO3wlcA+pZb2tlcK9gPrdDnEFaec2QTF1sXz2ak2IIb2curvnIrQ4yrfHgLlVA72wA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prosemirror-changeset": "^2.3.0",
         "prosemirror-collab": "^1.3.1",
@@ -6681,7 +6655,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -6692,7 +6665,6 @@
       "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -6735,7 +6707,6 @@
       "resolved": "https://registry.npmjs.org/@types/three/-/three-0.180.0.tgz",
       "integrity": "sha512-ykFtgCqNnY0IPvDro7h+9ZeLY+qjgUWv+qEvUt84grhenO60Hqd4hScHE7VTB9nOQ/3QM8lkbNE+4vKjEpUxKg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@dimforge/rapier3d-compat": "~0.12.0",
         "@tweenjs/tween.js": "~23.1.3",
@@ -6818,7 +6789,6 @@
       "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.2",
         "@typescript-eslint/types": "8.46.2",
@@ -7451,7 +7421,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -8602,8 +8571,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/d3": {
       "version": "7.9.0",
@@ -8925,7 +8893,6 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9707,7 +9674,6 @@
       "integrity": "sha512-iy2GE3MHrYTL5lrCtMZ0X1KLEKKUjmK0kzwcnefhR66txcEmXZD2YWgR5GNdcEwkNx3a0siYkSvl0vIC+Svjmg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -9796,7 +9762,6 @@
       "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -9898,7 +9863,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -10516,21 +10480,6 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "license": "ISC"
     },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/fstream": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
@@ -11070,7 +11019,6 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
       "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
@@ -11851,8 +11799,7 @@
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
-      "license": "BSD-2-Clause",
-      "peer": true
+      "license": "BSD-2-Clause"
     },
     "node_modules/levn": {
       "version": "0.4.1",
@@ -13051,38 +12998,6 @@
         "pathe": "^2.0.3"
       }
     },
-    "node_modules/playwright": {
-      "version": "1.58.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
-      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
-      "devOptional": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "playwright-core": "1.58.2"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
-    },
-    "node_modules/playwright-core": {
-      "version": "1.58.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
-      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
-      "devOptional": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/pngjs": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
@@ -13203,7 +13118,6 @@
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -13497,7 +13411,6 @@
       "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.4.tgz",
       "integrity": "sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "orderedmap": "^2.0.0"
       }
@@ -13527,7 +13440,6 @@
       "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz",
       "integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prosemirror-model": "^1.0.0",
         "prosemirror-transform": "^1.0.0",
@@ -13576,7 +13488,6 @@
       "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.41.4.tgz",
       "integrity": "sha512-WkKgnyjNncri03Gjaz3IFWvCAE94XoiEgvtr0/r2Xw7R8/IjK3sKLSiDoCHWcsXSAinVaKlGRZDvMCsF1kbzjA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prosemirror-model": "^1.20.0",
         "prosemirror-state": "^1.0.0",
@@ -13780,7 +13691,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13850,7 +13760,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -13901,7 +13810,6 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.66.0.tgz",
       "integrity": "sha512-xXBqsWGKrY46ZqaHDo+ZUYiMUgi8suYu5kdrS20EG8KiL7VRQitEbNjm+UcrDYrNi1YLyfpmAeGjCZYXLT9YBw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -13943,8 +13851,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/react-leaflet": {
       "version": "5.0.0",
@@ -14252,7 +14159,6 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -14275,8 +14181,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/recharts/node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -15334,8 +15239,7 @@
       "version": "0.180.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.180.0.tgz",
       "integrity": "sha512-o+qycAMZrh+TsE01GqWUxUIKR1AL0S8pq7zDkYOQw8GqfX8b8VoCKYUoHbhiX5j+7hr8XsuHDVU6+gkQJQKg9w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/three-mesh-bvh": {
       "version": "0.8.3",
@@ -15423,7 +15327,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -15772,7 +15675,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/frontend/package.json b/frontend/package.json
index ef8770ad..be92d231 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -116,7 +116,6 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
-    "@playwright/test": "^1.58.2",
     "@tailwindcss/postcss": "^4",
     "@tanstack/react-query-devtools": "^5.86.0",
     "@types/jsbarcode": "^3.11.4",
@@ -128,7 +127,6 @@
     "eslint-config-next": "15.4.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
-    "playwright": "^1.58.2",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "prisma": "^6.14.0",
diff --git a/frontend/public/pop-settings-preview.html b/frontend/public/pop-settings-preview.html
new file mode 100644
index 00000000..633b6923
--- /dev/null
+++ b/frontend/public/pop-settings-preview.html
@@ -0,0 +1,1339 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>POP 화면 설정 관리 v2</title>
+<style>
+/* ── Reset ── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: 'Pretendard', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  background: #e2e8f0;
+  color: #1e293b;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+/* ── Main Layout: 65% POP / 35% Settings ── */
+.main-layout {
+  display: flex;
+  height: 100vh;
+  gap: 0;
+}
+
+/* ── Left: POP Preview Area ── */
+.pop-area {
+  flex: 0 0 65%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #cbd5e1;
+  padding: 24px;
+  position: relative;
+}
+
+.pop-frame {
+  width: 100%;
+  max-width: 1000px;
+  aspect-ratio: 1280 / 800;
+  background: #f8fafc;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 0 2px #94a3b8;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── POP Header ── */
+.pop-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  background: #fff;
+  border-bottom: 1px solid #e2e8f0;
+  flex-shrink: 0;
+}
+.pop-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.pop-logo {
+  width: 36px; height: 36px;
+  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+  border-radius: 8px;
+  display: flex; align-items: center; justify-content: center;
+  color: #fff; font-weight: 800; font-size: 14px;
+}
+.pop-brand { font-size: 18px; font-weight: 700; color: #0f172a; letter-spacing: -0.5px; }
+.pop-header-right {
+  display: flex; align-items: center; gap: 12px;
+  font-size: 13px; color: #64748b;
+}
+.pop-user-badge {
+  background: #f1f5f9; padding: 4px 12px; border-radius: 20px;
+  font-weight: 600; color: #475569;
+}
+.pop-logout-btn {
+  padding: 4px 12px; border-radius: 6px; border: 1px solid #e2e8f0;
+  background: #fff; font-size: 12px; color: #64748b; cursor: pointer;
+}
+
+/* ── POP Back Header (for sub-screens) ── */
+.pop-back-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  background: #fff;
+  border-bottom: 1px solid #e2e8f0;
+  flex-shrink: 0;
+  gap: 12px;
+}
+.back-btn {
+  width: 36px; height: 36px;
+  border-radius: 8px; border: 1px solid #e2e8f0;
+  background: #fff; display: flex; align-items: center; justify-content: center;
+  cursor: pointer; font-size: 18px; color: #475569;
+  transition: all .15s;
+}
+.back-btn:hover { background: #f1f5f9; }
+.pop-screen-title { font-size: 18px; font-weight: 700; color: #0f172a; }
+
+/* ── POP Content ── */
+.pop-content {
+  flex: 1;
+  overflow-y: auto;
+  background: #f1f5f9;
+  position: relative;
+}
+
+/* ── Configurable Zone ── */
+.config-zone {
+  position: relative;
+  cursor: pointer;
+  transition: all .2s;
+}
+.config-zone::before {
+  content: '';
+  position: absolute; inset: 0;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  z-index: 5;
+  pointer-events: none;
+  transition: all .2s;
+}
+.config-zone::after {
+  content: attr(data-label);
+  position: absolute;
+  top: 4px; left: 8px;
+  background: rgba(37, 99, 235, 0.85);
+  color: #fff;
+  font-size: 10px; font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+  opacity: 0;
+  z-index: 6;
+  pointer-events: none;
+  transition: opacity .15s;
+  white-space: nowrap;
+}
+.config-zone:hover::before {
+  border-color: rgba(37, 99, 235, 0.4);
+  background: rgba(37, 99, 235, 0.06);
+}
+.config-zone:hover::after {
+  opacity: 1;
+}
+.config-zone.selected::before {
+  border-color: #2563eb;
+  background: rgba(37, 99, 235, 0.08);
+}
+.config-zone.selected::after {
+  opacity: 1;
+  background: #2563eb;
+}
+.config-zone.off-state {
+  opacity: 0.3;
+  position: relative;
+}
+.config-zone.off-state .off-overlay {
+  position: absolute; inset: 0;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(148, 163, 184, 0.3);
+  border-radius: 8px;
+  z-index: 4;
+  pointer-events: none;
+}
+.off-overlay span {
+  background: #64748b; color: #fff;
+  padding: 4px 16px; border-radius: 6px;
+  font-size: 13px; font-weight: 700;
+}
+
+/* ══════════ HOME SCREEN ══════════ */
+.home-screen { padding: 20px; }
+
+/* KPI Carousel */
+.kpi-carousel {
+  display: flex; gap: 12px; margin-bottom: 20px;
+  overflow-x: auto; padding-bottom: 4px;
+}
+.kpi-card {
+  flex: 0 0 calc(33.33% - 8px);
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px 20px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+}
+.kpi-card-title {
+  font-size: 12px; font-weight: 600; color: #64748b;
+  margin-bottom: 4px;
+}
+.kpi-card-value {
+  font-size: 28px; font-weight: 800;
+  background: linear-gradient(135deg, #2563eb, #7c3aed);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.kpi-card-sub {
+  font-size: 11px; color: #94a3b8; margin-top: 2px;
+}
+.kpi-card.green .kpi-card-value {
+  background: linear-gradient(135deg, #059669, #10b981);
+  -webkit-background-clip: text; background-clip: text;
+}
+.kpi-card.orange .kpi-card-value {
+  background: linear-gradient(135deg, #ea580c, #f59e0b);
+  -webkit-background-clip: text; background-clip: text;
+}
+
+/* Menu Grid */
+.menu-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.menu-item {
+  background: #fff;
+  border-radius: 14px;
+  padding: 20px 12px;
+  text-align: center;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+  cursor: pointer;
+  transition: all .2s;
+}
+.menu-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+.menu-icon {
+  width: 56px; height: 56px;
+  border-radius: 16px;
+  display: flex; align-items: center; justify-content: center;
+  margin: 0 auto 10px;
+  font-size: 26px;
+}
+.menu-icon.blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
+.menu-icon.green { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
+.menu-icon.purple { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
+.menu-icon.amber { background: linear-gradient(135deg, #fef3c7, #fde68a); }
+.menu-icon.gray { background: #f1f5f9; }
+.menu-label { font-size: 13px; font-weight: 600; color: #334155; }
+.menu-item.empty { opacity: 0.4; cursor: default; }
+.menu-item.empty:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
+
+/* Recent Activity */
+.recent-section { }
+.recent-title {
+  font-size: 14px; font-weight: 700; color: #334155; margin-bottom: 10px;
+  display: flex; align-items: center; gap: 6px;
+}
+.recent-list {
+  background: #fff; border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+  overflow: hidden;
+}
+.recent-item {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #f1f5f9;
+  font-size: 13px;
+}
+.recent-item:last-child { border-bottom: none; }
+.recent-item-left { display: flex; align-items: center; gap: 10px; }
+.recent-dot {
+  width: 8px; height: 8px; border-radius: 50%;
+}
+.recent-dot.blue { background: #3b82f6; }
+.recent-dot.green { background: #10b981; }
+.recent-dot.amber { background: #f59e0b; }
+.recent-item-text { color: #334155; font-weight: 500; }
+.recent-item-time { color: #94a3b8; font-size: 12px; }
+
+/* ══════════ INBOUND SCREEN ══════════ */
+.inbound-screen, .outbound-screen { padding: 16px; }
+
+.field-row {
+  display: flex; gap: 10px; margin-bottom: 12px;
+}
+.field-input {
+  flex: 1;
+  padding: 12px 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #fff;
+  font-size: 14px;
+  color: #334155;
+}
+.field-input::placeholder { color: #94a3b8; }
+.scan-btn {
+  width: 48px; height: 48px;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 20px;
+  cursor: pointer;
+  transition: all .15s;
+  flex-shrink: 0;
+}
+.scan-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
+
+/* Item Cards */
+.item-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+}
+.item-card-header {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 10px;
+}
+.item-name { font-size: 15px; font-weight: 700; color: #0f172a; }
+.item-code { font-size: 12px; color: #94a3b8; }
+.inspection-badge {
+  background: #fef2f2; color: #dc2626;
+  padding: 3px 10px; border-radius: 6px;
+  font-size: 11px; font-weight: 600;
+}
+.item-card-body {
+  display: flex; align-items: center; gap: 12px;
+}
+.qty-input {
+  width: 80px; padding: 10px;
+  border: 1px solid #e2e8f0; border-radius: 8px;
+  text-align: center; font-size: 16px; font-weight: 700;
+  background: #f8fafc;
+}
+.pkg-select {
+  padding: 10px 14px;
+  border: 1px solid #e2e8f0; border-radius: 8px;
+  background: #fff; font-size: 13px; color: #475569;
+}
+
+/* Bottom Action Area */
+.bottom-actions {
+  display: flex; gap: 10px; margin-top: 16px;
+}
+.action-btn {
+  flex: 1;
+  padding: 14px;
+  border-radius: 12px;
+  border: none;
+  font-size: 15px;
+  font-weight: 700;
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  transition: all .15s;
+}
+.action-btn.primary {
+  background: linear-gradient(135deg, #2563eb, #1d4ed8);
+  color: #fff;
+}
+.action-btn.primary:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af); }
+.action-btn.secondary {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  color: #475569;
+}
+.action-btn.secondary:hover { background: #f8fafc; }
+
+/* Photo Upload */
+.photo-upload-zone {
+  border: 2px dashed #cbd5e1;
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+  color: #94a3b8;
+  font-size: 13px;
+  margin-top: 12px;
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+}
+
+/* ══════════ PROCESS EXECUTION SCREEN ══════════ */
+.process-screen {
+  display: flex;
+  flex: 1;
+  height: 100%;
+}
+
+/* Process Sidebar */
+.process-sidebar {
+  width: 160px;
+  background: #fff;
+  border-right: 1px solid #e2e8f0;
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+.process-sidebar-title {
+  padding: 14px 14px 8px;
+  font-size: 12px; font-weight: 700; color: #94a3b8;
+  text-transform: uppercase; letter-spacing: 0.5px;
+}
+.process-item {
+  padding: 10px 14px;
+  font-size: 13px; font-weight: 500;
+  color: #475569; cursor: pointer;
+  border-left: 3px solid transparent;
+  transition: all .15s;
+}
+.process-item:hover { background: #f8fafc; }
+.process-item.active {
+  background: #eff6ff;
+  border-left-color: #2563eb;
+  color: #1d4ed8; font-weight: 700;
+}
+
+/* Process Main */
+.process-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Tabs */
+.process-tabs {
+  display: flex; gap: 0;
+  background: #fff;
+  border-bottom: 1px solid #e2e8f0;
+  flex-shrink: 0;
+}
+.process-tab {
+  padding: 10px 18px;
+  font-size: 13px; font-weight: 600;
+  color: #64748b;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all .15s;
+}
+.process-tab:hover { color: #334155; }
+.process-tab.active {
+  color: #2563eb;
+  border-bottom-color: #2563eb;
+}
+
+/* Process Content */
+.process-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 14px;
+  background: #f1f5f9;
+}
+
+/* Work Order Card */
+.wo-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+  cursor: pointer;
+  transition: all .15s;
+  border: 2px solid transparent;
+}
+.wo-card:hover { border-color: #bfdbfe; }
+.wo-card.active { border-color: #2563eb; background: #eff6ff; }
+.wo-card-top {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 6px;
+}
+.wo-product { font-size: 14px; font-weight: 700; color: #0f172a; }
+.wo-status {
+  font-size: 11px; font-weight: 600; padding: 2px 10px;
+  border-radius: 10px;
+}
+.wo-status.waiting { background: #fef3c7; color: #92400e; }
+.wo-status.running { background: #dbeafe; color: #1e40af; }
+.wo-card-info { font-size: 12px; color: #64748b; }
+
+/* Work Detail */
+.work-detail {
+  margin-top: 12px;
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+.work-detail-title {
+  font-size: 14px; font-weight: 700; color: #0f172a;
+  margin-bottom: 12px; padding-bottom: 8px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+/* Timer Bar */
+.timer-bar {
+  display: flex; align-items: center; gap: 8px;
+  background: #f8fafc; border-radius: 10px;
+  padding: 10px 14px; margin-bottom: 12px;
+}
+.timer-item {
+  display: flex; flex-direction: column; align-items: center;
+  flex: 1;
+}
+.timer-label { font-size: 10px; color: #94a3b8; font-weight: 600; }
+.timer-value { font-size: 16px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
+.timer-sep { width: 1px; height: 30px; background: #e2e8f0; }
+.timer-start-btn {
+  padding: 8px 18px; border-radius: 8px; border: none;
+  background: linear-gradient(135deg, #10b981, #059669);
+  color: #fff; font-size: 13px; font-weight: 700;
+  cursor: pointer;
+}
+
+/* Checklist */
+.checklist { margin-bottom: 12px; }
+.checklist-title { font-size: 12px; font-weight: 700; color: #64748b; margin-bottom: 6px; }
+.checklist-item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 0; font-size: 13px; color: #334155;
+}
+.checklist-check {
+  width: 18px; height: 18px; border-radius: 4px;
+  border: 2px solid #cbd5e1; background: #fff;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 11px; color: #fff; cursor: pointer;
+}
+.checklist-check.checked { background: #2563eb; border-color: #2563eb; }
+
+/* Result Input */
+.result-input-row {
+  display: flex; gap: 10px; margin-bottom: 12px; align-items: center;
+}
+.result-label { font-size: 13px; font-weight: 600; color: #475569; min-width: 50px; }
+.result-qty {
+  width: 70px; padding: 8px;
+  border: 1px solid #e2e8f0; border-radius: 8px;
+  text-align: center; font-size: 15px; font-weight: 700;
+  background: #f8fafc;
+}
+.result-qty.bad { border-color: #fecaca; background: #fef2f2; color: #dc2626; }
+
+/* Material Section */
+.material-section {
+  background: #f8fafc; border-radius: 10px;
+  padding: 12px; margin-bottom: 12px;
+}
+.material-title {
+  font-size: 12px; font-weight: 700; color: #64748b; margin-bottom: 8px;
+  display: flex; align-items: center; gap: 6px;
+}
+.material-item {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 6px 0; font-size: 13px;
+  border-bottom: 1px solid #e2e8f0;
+}
+.material-item:last-child { border-bottom: none; }
+
+/* Defect Button */
+.defect-btn {
+  padding: 10px 18px; border-radius: 8px; border: none;
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  color: #fff; font-size: 13px; font-weight: 700;
+  cursor: pointer; width: 100%; margin-top: 8px;
+}
+
+/* ══════════ RIGHT: SETTINGS PANEL ══════════ */
+.settings-area {
+  flex: 0 0 35%;
+  background: #fff;
+  border-left: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Settings Header */
+.settings-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid #e2e8f0;
+  flex-shrink: 0;
+}
+.settings-header h2 {
+  font-size: 16px; font-weight: 700; color: #0f172a;
+}
+.settings-header .screen-name {
+  font-size: 13px; color: #64748b; margin-top: 2px;
+}
+
+/* Settings Body */
+.settings-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+}
+
+/* Empty State */
+.settings-empty {
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  height: 100%;
+  color: #94a3b8;
+  text-align: center;
+}
+.settings-empty-icon {
+  font-size: 48px; margin-bottom: 16px; opacity: 0.5;
+}
+.settings-empty-text {
+  font-size: 14px; font-weight: 600; margin-bottom: 4px; color: #64748b;
+}
+.settings-empty-sub {
+  font-size: 13px; color: #94a3b8;
+}
+
+/* Setting Group */
+.setting-group {
+  margin-bottom: 20px;
+}
+.setting-group-title {
+  font-size: 14px; font-weight: 700; color: #0f172a;
+  margin-bottom: 4px;
+}
+.setting-group-desc {
+  font-size: 12px; color: #94a3b8; margin-bottom: 12px;
+}
+
+/* Toggle */
+.toggle-row {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid #f1f5f9;
+}
+.toggle-row:last-child { border-bottom: none; }
+.toggle-label { font-size: 13px; font-weight: 500; color: #334155; }
+.toggle-switch {
+  width: 44px; height: 24px;
+  border-radius: 12px;
+  background: #cbd5e1;
+  position: relative;
+  cursor: pointer;
+  transition: background .2s;
+  flex-shrink: 0;
+}
+.toggle-switch.on { background: #2563eb; }
+.toggle-switch::after {
+  content: '';
+  position: absolute;
+  top: 2px; left: 2px;
+  width: 20px; height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  transition: transform .2s;
+}
+.toggle-switch.on::after { transform: translateX(20px); }
+
+/* Tag Editor */
+.tag-editor { margin-top: 8px; }
+.tag-editor-label { font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 6px; }
+.tag-list {
+  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
+}
+.tag {
+  display: flex; align-items: center; gap: 4px;
+  padding: 4px 10px; border-radius: 6px;
+  background: #eff6ff; color: #1d4ed8;
+  font-size: 12px; font-weight: 600;
+}
+.tag-remove {
+  cursor: pointer; opacity: 0.6; font-size: 14px;
+}
+.tag-remove:hover { opacity: 1; }
+.tag-input-row { display: flex; gap: 6px; }
+.tag-input {
+  flex: 1; padding: 6px 10px;
+  border: 1px solid #e2e8f0; border-radius: 6px;
+  font-size: 12px;
+}
+.tag-add-btn {
+  padding: 6px 12px; border-radius: 6px;
+  border: 1px solid #2563eb; background: #eff6ff;
+  color: #2563eb; font-size: 12px; font-weight: 600;
+  cursor: pointer;
+}
+
+/* Settings Footer */
+.settings-footer {
+  padding: 16px 24px;
+  border-top: 1px solid #e2e8f0;
+  display: flex; gap: 10px;
+  flex-shrink: 0;
+}
+.settings-footer .btn {
+  flex: 1;
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
+}
+.settings-footer .btn:hover { background: #f8fafc; }
+.settings-footer .btn-save {
+  background: #2563eb; color: #fff; border-color: #2563eb;
+}
+.settings-footer .btn-save:hover { background: #1d4ed8; }
+</style>
+</head>
+<body>
+
+<div class="main-layout">
+  <!-- ══════ LEFT: POP PREVIEW ══════ -->
+  <div class="pop-area">
+    <div class="pop-frame" id="popFrame">
+      <!-- HOME SCREEN -->
+      <div id="screen-home" class="screen active-screen">
+        <div class="pop-header">
+          <div class="pop-header-left">
+            <div class="pop-logo">V</div>
+            <span class="pop-brand">VEXPLOR</span>
+          </div>
+          <div class="pop-header-right">
+            <span class="pop-user-badge">topseal_admin</span>
+            <button class="pop-logout-btn">로그아웃</button>
+          </div>
+        </div>
+        <div class="pop-content home-screen">
+          <!-- KPI Carousel -->
+          <div class="config-zone" data-key="kpiCarousel" data-label="KPI 캐러셀" data-screen="home" onclick="selectZone(this)">
+            <div class="kpi-carousel">
+              <div class="kpi-card">
+                <div class="kpi-card-title">입고 현황</div>
+                <div class="kpi-card-value">127</div>
+                <div class="kpi-card-sub">오늘 입고 완료</div>
+              </div>
+              <div class="kpi-card green">
+                <div class="kpi-card-title">출고 현황</div>
+                <div class="kpi-card-value">89</div>
+                <div class="kpi-card-sub">오늘 출고 완료</div>
+              </div>
+              <div class="kpi-card orange">
+                <div class="kpi-card-title">생산 현황</div>
+                <div class="kpi-card-value">34</div>
+                <div class="kpi-card-sub">진행중 작업</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Menu Grid -->
+          <div class="menu-grid">
+            <div class="menu-item" onclick="navigateTo('inbound')">
+              <div class="menu-icon blue">📦</div>
+              <div class="menu-label">구매입고</div>
+            </div>
+            <div class="menu-item" onclick="navigateTo('outbound')">
+              <div class="menu-icon green">🚛</div>
+              <div class="menu-label">판매출고</div>
+            </div>
+            <div class="menu-item" onclick="navigateTo('process')">
+              <div class="menu-icon purple">⚙️</div>
+              <div class="menu-label">생산실행</div>
+            </div>
+            <div class="menu-item" onclick="navigateTo('inventory')">
+              <div class="menu-icon amber">📊</div>
+              <div class="menu-label">재고관리</div>
+            </div>
+            <div class="menu-item empty">
+              <div class="menu-icon gray">+</div>
+              <div class="menu-label" style="color:#94a3b8">비어있음</div>
+            </div>
+            <div class="menu-item empty">
+              <div class="menu-icon gray">+</div>
+              <div class="menu-label" style="color:#94a3b8">비어있음</div>
+            </div>
+            <div class="menu-item empty">
+              <div class="menu-icon gray">+</div>
+              <div class="menu-label" style="color:#94a3b8">비어있음</div>
+            </div>
+            <div class="menu-item empty">
+              <div class="menu-icon gray">+</div>
+              <div class="menu-label" style="color:#94a3b8">비어있음</div>
+            </div>
+          </div>
+
+          <!-- Recent Activity -->
+          <div class="config-zone" data-key="recentActivity" data-label="최근 활동" data-screen="home" onclick="selectZone(this)">
+            <div class="recent-section">
+              <div class="recent-title">📋 최근 활동</div>
+              <div class="recent-list">
+                <div class="recent-item">
+                  <div class="recent-item-left">
+                    <div class="recent-dot blue"></div>
+                    <span class="recent-item-text">구매입고 #2024-0127 완료</span>
+                  </div>
+                  <span class="recent-item-time">10분 전</span>
+                </div>
+                <div class="recent-item">
+                  <div class="recent-item-left">
+                    <div class="recent-dot green"></div>
+                    <span class="recent-item-text">SMT 공정 작업 시작</span>
+                  </div>
+                  <span class="recent-item-time">25분 전</span>
+                </div>
+                <div class="recent-item">
+                  <div class="recent-item-left">
+                    <div class="recent-dot amber"></div>
+                    <span class="recent-item-text">판매출고 #2024-0089 대기중</span>
+                  </div>
+                  <span class="recent-item-time">1시간 전</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- INBOUND SCREEN -->
+      <div id="screen-inbound" class="screen" style="display:none">
+        <div class="pop-back-header">
+          <button class="back-btn" onclick="navigateTo('home')">←</button>
+          <span class="pop-screen-title">구매입고</span>
+        </div>
+        <div class="pop-content inbound-screen">
+          <!-- Vendor Select + Barcode -->
+          <div class="config-zone" data-key="barcodeEnabled" data-label="바코드 스캔" data-screen="inbound" onclick="selectZone(this)">
+            <div class="field-row">
+              <input class="field-input" placeholder="거래처 선택..." readonly>
+              <button class="scan-btn" title="바코드 스캔">📷</button>
+            </div>
+            <div class="field-row">
+              <input class="field-input" placeholder="품목 검색..." readonly>
+              <button class="scan-btn" title="바코드 스캔">📷</button>
+            </div>
+          </div>
+
+          <!-- Item Cards -->
+          <div class="config-zone" data-key="inspectionRequired" data-label="검사 필수 배지" data-screen="inbound" onclick="selectZone(this)">
+            <div class="item-card">
+              <div class="item-card-header">
+                <div>
+                  <div class="item-name">PCB 기판 A-Type</div>
+                  <div class="item-code">ITM-2024-001</div>
+                </div>
+                <span class="inspection-badge">검사 필수</span>
+              </div>
+              <div class="item-card-body">
+                <input class="qty-input" value="100" readonly>
+                <span style="font-size:13px;color:#64748b">EA</span>
+                <select class="pkg-select"><option>박스</option></select>
+              </div>
+            </div>
+            <div class="item-card">
+              <div class="item-card-header">
+                <div>
+                  <div class="item-name">커넥터 B-12P</div>
+                  <div class="item-code">ITM-2024-042</div>
+                </div>
+                <span class="inspection-badge">검사 필수</span>
+              </div>
+              <div class="item-card-body">
+                <input class="qty-input" value="500" readonly>
+                <span style="font-size:13px;color:#64748b">EA</span>
+                <select class="pkg-select"><option>봉투</option></select>
+              </div>
+            </div>
+          </div>
+
+          <!-- Bottom Actions + Photo -->
+          <div class="bottom-actions">
+            <button class="action-btn primary">✓ 입고 확정</button>
+          </div>
+
+          <div class="config-zone" data-key="photoUpload" data-label="사진 첨부" data-screen="inbound" onclick="selectZone(this)">
+            <div class="photo-upload-zone">
+              📎 사진 첨부 (터치하여 촬영 또는 갤러리 선택)
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- OUTBOUND SCREEN -->
+      <div id="screen-outbound" class="screen" style="display:none">
+        <div class="pop-back-header">
+          <button class="back-btn" onclick="navigateTo('home')">←</button>
+          <span class="pop-screen-title">판매출고</span>
+        </div>
+        <div class="pop-content outbound-screen">
+          <!-- Customer + Barcode -->
+          <div class="config-zone" data-key="barcodeEnabled" data-label="바코드 스캔" data-screen="outbound" onclick="selectZone(this)">
+            <div class="field-row">
+              <input class="field-input" placeholder="고객사 선택..." readonly>
+              <button class="scan-btn" title="바코드 스캔">📷</button>
+            </div>
+            <div class="field-row">
+              <input class="field-input" placeholder="품목 검색..." readonly>
+              <button class="scan-btn" title="바코드 스캔">📷</button>
+            </div>
+          </div>
+
+          <!-- Item Cards -->
+          <div class="item-card">
+            <div class="item-card-header">
+              <div>
+                <div class="item-name">완제품 모듈 X-100</div>
+                <div class="item-code">PRD-2024-015</div>
+              </div>
+            </div>
+            <div class="item-card-body">
+              <input class="qty-input" value="50" readonly>
+              <span style="font-size:13px;color:#64748b">EA</span>
+              <select class="pkg-select"><option>파렛트</option></select>
+            </div>
+          </div>
+          <div class="item-card">
+            <div class="item-card-header">
+              <div>
+                <div class="item-name">센서 어셈블리 Y-20</div>
+                <div class="item-code">PRD-2024-023</div>
+              </div>
+            </div>
+            <div class="item-card-body">
+              <input class="qty-input" value="200" readonly>
+              <span style="font-size:13px;color:#64748b">EA</span>
+              <select class="pkg-select"><option>박스</option></select>
+            </div>
+          </div>
+
+          <div class="bottom-actions">
+            <button class="action-btn primary">✓ 출고 확정</button>
+          </div>
+
+          <div class="config-zone" data-key="photoUpload" data-label="사진 첨부" data-screen="outbound" onclick="selectZone(this)">
+            <div class="photo-upload-zone">
+              📎 사진 첨부 (터치하여 촬영 또는 갤러리 선택)
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- PROCESS EXECUTION SCREEN -->
+      <div id="screen-process" class="screen" style="display:none; flex-direction:column;">
+        <div class="pop-back-header">
+          <button class="back-btn" onclick="navigateTo('home')">←</button>
+          <span class="pop-screen-title">생산실행</span>
+        </div>
+        <div class="pop-content" style="padding:0; display:flex; flex:1;">
+          <div class="process-screen">
+            <!-- Sidebar -->
+            <div class="process-sidebar">
+              <div class="process-sidebar-title">공정 목록</div>
+              <div class="process-item active">SMT</div>
+              <div class="process-item">검사</div>
+              <div class="process-item">조립</div>
+              <div class="process-item">포장</div>
+              <div class="process-item">출하검사</div>
+            </div>
+            <!-- Main -->
+            <div class="process-main">
+              <div class="process-tabs">
+                <div class="process-tab active">접수가능</div>
+                <div class="process-tab">진행중</div>
+                <div class="process-tab">대기</div>
+                <div class="process-tab">완료</div>
+              </div>
+              <div class="process-content">
+                <!-- Work Order Cards -->
+                <div class="wo-card active">
+                  <div class="wo-card-top">
+                    <span class="wo-product">PCB 모듈 A-100</span>
+                    <span class="wo-status waiting">접수대기</span>
+                  </div>
+                  <div class="wo-card-info">수량: 500 EA &middot; 공정 1/5 &middot; WO-2024-0312</div>
+                </div>
+                <div class="wo-card">
+                  <div class="wo-card-top">
+                    <span class="wo-product">센서보드 B-200</span>
+                    <span class="wo-status running">진행중</span>
+                  </div>
+                  <div class="wo-card-info">수량: 200 EA &middot; 공정 3/5 &middot; WO-2024-0313</div>
+                </div>
+
+                <!-- Work Detail (expanded) -->
+                <div class="work-detail">
+                  <div class="work-detail-title">PCB 모듈 A-100 &mdash; SMT 작업</div>
+
+                  <!-- Timer -->
+                  <div class="timer-bar">
+                    <div class="timer-item">
+                      <span class="timer-label">포함시간</span>
+                      <span class="timer-value">02:34:12</span>
+                    </div>
+                    <div class="timer-sep"></div>
+                    <div class="timer-item">
+                      <span class="timer-label">순수시간</span>
+                      <span class="timer-value">01:45:30</span>
+                    </div>
+                    <div class="timer-sep"></div>
+                    <div class="timer-item">
+                      <span class="timer-label">그룹</span>
+                      <span class="timer-value" style="font-size:13px">A라인</span>
+                    </div>
+                    <button class="timer-start-btn">▶ 시작</button>
+                  </div>
+
+                  <!-- Checklist -->
+                  <div class="checklist">
+                    <div class="checklist-title">체크리스트</div>
+                    <div class="checklist-item">
+                      <div class="checklist-check checked">✓</div>
+                      <span>솔더 페이스트 도포 확인</span>
+                    </div>
+                    <div class="checklist-item">
+                      <div class="checklist-check"></div>
+                      <span>리플로우 온도 설정 확인</span>
+                    </div>
+                  </div>
+
+                  <!-- Results -->
+                  <div class="result-input-row">
+                    <span class="result-label">양품</span>
+                    <input class="result-qty" value="480" readonly>
+                    <span class="result-label">불량</span>
+                    <input class="result-qty bad" value="20" readonly>
+                    <span style="font-size:12px;color:#94a3b8">EA</span>
+                  </div>
+
+                  <!-- Material Section -->
+                  <div class="config-zone" data-key="materialInput" data-label="자재 투입" data-screen="process" onclick="selectZone(this)">
+                    <div class="material-section">
+                      <div class="material-title">📦 자재 투입</div>
+                      <div class="material-item">
+                        <span>PCB 기판 (RAW-001)</span>
+                        <span style="font-weight:700">500 EA</span>
+                      </div>
+                      <div class="material-item">
+                        <span>솔더 페이스트 (MAT-012)</span>
+                        <span style="font-weight:700">2 KG</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Photo Upload -->
+                  <div class="config-zone" data-key="photoUpload" data-label="사진 첨부" data-screen="process" onclick="selectZone(this)">
+                    <div class="photo-upload-zone">
+                      📎 사진 첨부
+                    </div>
+                  </div>
+
+                  <!-- Defect Button -->
+                  <div class="config-zone" data-key="defectTypes" data-label="불량 유형" data-screen="process" onclick="selectZone(this)">
+                    <button class="defect-btn">🔴 불량 처리</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- INVENTORY SCREEN (placeholder) -->
+      <div id="screen-inventory" class="screen" style="display:none">
+        <div class="pop-back-header">
+          <button class="back-btn" onclick="navigateTo('home')">←</button>
+          <span class="pop-screen-title">재고관리</span>
+        </div>
+        <div class="pop-content" style="display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:14px;">
+          <div style="text-align:center">
+            <div style="font-size:48px;margin-bottom:12px;opacity:0.5">📊</div>
+            <div style="font-weight:600">재고관리 화면</div>
+            <div style="font-size:13px;margin-top:4px">(미리보기 준비중)</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ══════ RIGHT: SETTINGS PANEL ══════ -->
+  <div class="settings-area">
+    <div class="settings-header">
+      <h2>화면 설정</h2>
+      <div class="screen-name" id="settingsScreenName">홈 화면</div>
+    </div>
+    <div class="settings-body" id="settingsBody">
+      <div class="settings-empty" id="settingsEmpty">
+        <div class="settings-empty-icon">⚙️</div>
+        <div class="settings-empty-text">설정할 영역을 클릭하세요</div>
+        <div class="settings-empty-sub">왼쪽 POP 화면에서 설정 가능한 영역에<br>마우스를 올리면 파란 테두리가 표시됩니다</div>
+      </div>
+      <div id="settingsContent" style="display:none"></div>
+    </div>
+    <div class="settings-footer">
+      <button class="btn" onclick="resetSettings()">기본값 초기화</button>
+      <button class="btn btn-save" onclick="saveSettings()">저장</button>
+    </div>
+  </div>
+</div>
+
+<script>
+// ── State ──
+const screenNames = {
+  home: '홈 화면',
+  inbound: '구매입고 설정',
+  outbound: '판매출고 설정',
+  process: '생산실행 설정',
+  inventory: '재고관리 설정'
+};
+
+let currentScreen = 'home';
+let selectedZone = null;
+
+// Settings store
+const settings = {
+  home: {
+    kpiCarousel: { enabled: true, label: 'KPI 캐러셀', desc: '홈 화면 상단에 입고/출고/생산 현황 카드를 표시합니다.' },
+    recentActivity: { enabled: true, label: '최근 활동', desc: '홈 화면 하단에 최근 활동 내역을 표시합니다.' }
+  },
+  inbound: {
+    barcodeEnabled: { enabled: true, label: '바코드 스캔', desc: '거래처/품목 선택 시 바코드 스캔 버튼을 표시합니다.' },
+    inspectionRequired: { enabled: true, label: '검사 필수 배지', desc: '품목 카드에 검사 필수 여부 배지를 표시합니다.' },
+    photoUpload: { enabled: true, label: '사진 첨부', desc: '입고 시 사진 촬영/첨부 영역을 표시합니다.' }
+  },
+  outbound: {
+    barcodeEnabled: { enabled: true, label: '바코드 스캔', desc: '고객사/품목 선택 시 바코드 스캔 버튼을 표시합니다.' },
+    photoUpload: { enabled: true, label: '사진 첨부', desc: '출고 시 사진 촬영/첨부 영역을 표시합니다.' }
+  },
+  process: {
+    materialInput: { enabled: true, label: '자재 투입', desc: '작업 상세에서 자재 투입 섹션을 표시합니다.' },
+    bomFlexible: { enabled: false, label: 'BOM 유동 투입', desc: 'BOM에 없는 자재도 유동적으로 투입할 수 있습니다.' },
+    photoUpload: { enabled: true, label: '사진 첨부', desc: '작업 중 사진 촬영/첨부 영역을 표시합니다.' },
+    groupPhotoEnabled: { enabled: false, label: '그룹별 사진', desc: '그룹(라인)별로 별도 사진을 첨부할 수 있습니다.' },
+    plcEnabled: { enabled: false, label: 'PLC 연동', desc: 'PLC 장비와 연동하여 자동 데이터 수집합니다.' },
+    reworkTargetSelection: { enabled: false, label: '재작업 공정 지정', desc: '불량 발생 시 재작업할 공정을 선택할 수 있습니다.' },
+    packagingOptions: { enabled: true, label: '포장 옵션', desc: '포장 유형을 선택할 수 있습니다.', type: 'tags', tags: ['박스', '봉투', '파렛트', '벌크'] },
+    defectTypes: { enabled: true, label: '불량 유형', desc: '불량 처리 시 선택 가능한 유형 목록입니다.', type: 'tags', tags: ['외관불량', '치수불량', '기능불량', '혼입', '스크래치'] }
+  }
+};
+
+// ── Navigation ──
+function navigateTo(screen) {
+  // hide all
+  document.querySelectorAll('.screen').forEach(s => {
+    s.style.display = 'none';
+  });
+  // show target
+  const target = document.getElementById('screen-' + screen);
+  if (target) {
+    target.style.display = screen === 'process' ? 'flex' : '';
+    if (screen !== 'process') target.style.display = '';
+    // For process screen, need flex
+    if (screen === 'process') {
+      target.style.display = 'flex';
+      target.style.flexDirection = 'column';
+    }
+  }
+  currentScreen = screen;
+  document.getElementById('settingsScreenName').textContent = screenNames[screen] || screen;
+
+  // Deselect zone
+  deselectAllZones();
+  showEmptySettings();
+  applyAllSettings();
+}
+
+function deselectAllZones() {
+  document.querySelectorAll('.config-zone.selected').forEach(z => z.classList.remove('selected'));
+  selectedZone = null;
+}
+
+// ── Zone Selection ──
+function selectZone(el) {
+  event.stopPropagation();
+  deselectAllZones();
+  el.classList.add('selected');
+  selectedZone = el;
+  const key = el.dataset.key;
+  const screen = el.dataset.screen;
+  showSettingsFor(screen, key);
+}
+
+// ── Settings Rendering ──
+function showEmptySettings() {
+  document.getElementById('settingsEmpty').style.display = 'flex';
+  document.getElementById('settingsContent').style.display = 'none';
+}
+
+function showSettingsFor(screen, key) {
+  document.getElementById('settingsEmpty').style.display = 'none';
+  const contentEl = document.getElementById('settingsContent');
+  contentEl.style.display = 'block';
+
+  const screenSettings = settings[screen];
+  if (!screenSettings) { showEmptySettings(); return; }
+
+  // Build settings for this zone + all screen toggles
+  let html = '';
+
+  // Selected zone highlight
+  const zoneSetting = screenSettings[key];
+  if (zoneSetting) {
+    html += `<div class="setting-group" style="background:#eff6ff;padding:14px;border-radius:10px;margin-bottom:16px;">`;
+    html += `<div class="setting-group-title" style="color:#1d4ed8">${zoneSetting.label}</div>`;
+    html += `<div class="setting-group-desc">${zoneSetting.desc}</div>`;
+    html += `<div class="toggle-row" style="border:none;padding:6px 0 0;">`;
+    html += `<span class="toggle-label">활성화</span>`;
+    html += `<div class="toggle-switch ${zoneSetting.enabled ? 'on' : ''}" onclick="toggleSetting('${screen}','${key}',this)"></div>`;
+    html += `</div>`;
+
+    // Tag editor if applicable
+    if (zoneSetting.type === 'tags' && zoneSetting.tags) {
+      html += renderTagEditor(screen, key, zoneSetting);
+    }
+    html += `</div>`;
+  }
+
+  // All other settings for this screen
+  html += `<div class="setting-group">`;
+  html += `<div class="setting-group-title">전체 ${screenNames[screen]} 옵션</div>`;
+  html += `<div class="setting-group-desc">이 화면의 모든 설정 가능 옵션</div>`;
+
+  Object.entries(screenSettings).forEach(([k, v]) => {
+    const isSelected = (k === key);
+    html += `<div class="toggle-row" style="${isSelected ? 'background:#eff6ff;border-radius:6px;padding:10px 8px;' : ''}">`;
+    html += `<span class="toggle-label">${v.label}</span>`;
+    html += `<div class="toggle-switch ${v.enabled ? 'on' : ''}" onclick="toggleSetting('${screen}','${k}',this)"></div>`;
+    html += `</div>`;
+  });
+  html += `</div>`;
+
+  contentEl.innerHTML = html;
+}
+
+function renderTagEditor(screen, key, setting) {
+  let html = `<div class="tag-editor" style="margin-top:10px;">`;
+  html += `<div class="tag-editor-label">항목 관리</div>`;
+  html += `<div class="tag-list" id="tags-${screen}-${key}">`;
+  setting.tags.forEach((tag, i) => {
+    html += `<span class="tag">${tag}<span class="tag-remove" onclick="removeTag('${screen}','${key}',${i})">x</span></span>`;
+  });
+  html += `</div>`;
+  html += `<div class="tag-input-row">`;
+  html += `<input class="tag-input" id="tagInput-${screen}-${key}" placeholder="새 항목 입력..." onkeydown="if(event.key==='Enter')addTag('${screen}','${key}')">`;
+  html += `<button class="tag-add-btn" onclick="addTag('${screen}','${key}')">추가</button>`;
+  html += `</div>`;
+  html += `</div>`;
+  return html;
+}
+
+// ── Toggle ──
+function toggleSetting(screen, key, el) {
+  event.stopPropagation();
+  settings[screen][key].enabled = !settings[screen][key].enabled;
+  el.classList.toggle('on');
+  applyAllSettings();
+
+  // Re-render if this is the selected zone
+  if (selectedZone && selectedZone.dataset.key === key && selectedZone.dataset.screen === screen) {
+    showSettingsFor(screen, key);
+  }
+}
+
+// ── Tag Management ──
+function addTag(screen, key) {
+  const input = document.getElementById(`tagInput-${screen}-${key}`);
+  if (!input || !input.value.trim()) return;
+  settings[screen][key].tags.push(input.value.trim());
+  input.value = '';
+  showSettingsFor(screen, key);
+}
+
+function removeTag(screen, key, index) {
+  event.stopPropagation();
+  settings[screen][key].tags.splice(index, 1);
+  showSettingsFor(screen, key);
+}
+
+// ── Apply Settings to POP Preview ──
+function applyAllSettings() {
+  document.querySelectorAll('.config-zone').forEach(zone => {
+    const screen = zone.dataset.screen;
+    const key = zone.dataset.key;
+    if (!settings[screen] || !settings[screen][key]) return;
+
+    const enabled = settings[screen][key].enabled;
+
+    // Remove old overlay
+    const oldOverlay = zone.querySelector('.off-overlay');
+    if (oldOverlay) oldOverlay.remove();
+
+    if (!enabled) {
+      zone.classList.add('off-state');
+      const overlay = document.createElement('div');
+      overlay.className = 'off-overlay';
+      overlay.innerHTML = '<span>OFF</span>';
+      zone.appendChild(overlay);
+    } else {
+      zone.classList.remove('off-state');
+    }
+  });
+}
+
+// ── Save / Reset ──
+function saveSettings() {
+  const json = JSON.stringify(settings, null, 2);
+  console.log('Saved settings:', json);
+  alert('설정이 저장되었습니다.\n\n(콘솔에서 JSON 확인 가능)');
+}
+
+function resetSettings() {
+  if (!confirm('모든 설정을 기본값으로 초기화하시겠습니까?')) return;
+  // Reset all to enabled=true
+  Object.values(settings).forEach(screen => {
+    Object.values(screen).forEach(s => { s.enabled = true; });
+  });
+  // Reset tags
+  settings.process.packagingOptions.tags = ['박스', '봉투', '파렛트', '벌크'];
+  settings.process.defectTypes.tags = ['외관불량', '치수불량', '기능불량', '혼입', '스크래치'];
+  // Keep these false by default
+  settings.process.bomFlexible.enabled = false;
+  settings.process.groupPhotoEnabled.enabled = false;
+  settings.process.plcEnabled.enabled = false;
+  settings.process.reworkTargetSelection.enabled = false;
+
+  applyAllSettings();
+  if (selectedZone) {
+    showSettingsFor(selectedZone.dataset.screen, selectedZone.dataset.key);
+  } else {
+    showEmptySettings();
+  }
+  alert('기본값으로 초기화되었습니다.');
+}
+
+// ── Click outside to deselect ──
+document.getElementById('popFrame').addEventListener('click', function(e) {
+  if (!e.target.closest('.config-zone') && !e.target.closest('.menu-item') && !e.target.closest('.back-btn')) {
+    deselectAllZones();
+    showEmptySettings();
+  }
+});
+
+// ── Init ──
+applyAllSettings();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e6ada6f1..da4ba141 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "ERP-node",
+  "name": "vexplor_dev",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -17,8 +17,7 @@
       },
       "devDependencies": {
         "@types/oracledb": "^6.9.1",
-        "@types/pg": "^8.15.5",
-        "playwright": "^1.58.2"
+        "@types/pg": "^8.15.5"
       }
     },
     "node_modules/@azure-rest/core-client": {
@@ -1476,21 +1475,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -2079,38 +2063,6 @@
         "pathe": "^2.0.3"
       }
     },
-    "node_modules/playwright": {
-      "version": "1.58.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
-      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "playwright-core": "1.58.2"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
-    },
-    "node_modules/playwright-core": {
-      "version": "1.58.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
-      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/postgres-array": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
diff --git a/package.json b/package.json
index 16b3b1e8..c6c80dce 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
   },
   "devDependencies": {
     "@types/oracledb": "^6.9.1",
-    "@types/pg": "^8.15.5",
-    "playwright": "^1.58.2"
+    "@types/pg": "^8.15.5"
   }
 }
diff --git a/sonar-project.properties b/sonar-project.properties
new file mode 100644
index 00000000..b08e2bd3
--- /dev/null
+++ b/sonar-project.properties
@@ -0,0 +1,7 @@
+sonar.projectKey=vexplor
+sonar.projectName=vexplor
+sonar.sources=backend-node/src
+sonar.exclusions=**/node_modules/**,**/dist/**,**/*.test.*,**/test-scenarios/**,**/build/**,**/.next/**
+sonar.host.url=http://localhost:9000
+sonar.sourceEncoding=UTF-8
+sonar.scm.disabled=true